
// HTML
<div id="difje_1" class="rodekleur">
  Eerste blok
</div>
<div id="difje_2" name="mh1">
  Tweede blok<br>
  <a href="http://www.telegraaf.nl">Telegraaf</a><br>
  <a class="blauwebgkleur" href="http://www.nu.nl" id="nieuws">Nu.nl</a>
</div>
<div id="difje_3" class="rodekleur">
  Derde blok
</div>
<div id="difje_4" name="mh1">
  Vierde blok
</div>

<div>
  <a href="http://www.volkskrant.nl">Volkskrant</a><br>
  <a href="http://www.trouw.nl">Trouw</a><br>
  <a href="http://www.ad.nl">AD</a><br>
</div>

<div id="result"></div>

<div id="test" class="rood">
  Test (class aanpassen)
</div>

<ul id="lijst"></ul>

<div id="test2">
  Voorbeeld window.onload
</div><br>

<input id="test4" type="text"><br>
<label for="test4">Invoer test4 (keydown)</label><br>

<p>

<div id="buiten">
  buiten
  <div id="binnen">
    binnen
  </div>
</div>

</p>

<input id="postcode" type="text" pattern="^[1-9][0-9]{3} [A-Z]{2}$"><br>
<label for="postcode">Vul een geldige postcode in</label>

<!--
<script>
  window.onload=function(){
    var mijnDiv = document.getElementById("test2");
    console.log(mijnDiv.textContent);
  }
</script>
-->

// CSS
.rodekleur {
  color: red;
}

.blauwebgkleur {
  background-color: lightblue;
}

.rood {
  color: red;
}

.sterk {
  font-weight: bold;
}

.onderstreept {
  text-decoration: underline;
}

// JavaScript
console.clear();

var x = "Test"; // String
var y = 10.3; // Number
if (isNaN(x / y)) {
  console.error(`Deling ${x}/${y} is niet mogelijk.`)
}

if (Number.isInteger(y)) {
  console.log(y + " is een integer");
} else {
  console.log(y + " is geen integer");
}

console.log("parseFloat: " + Number.parseFloat(y));
console.log("parseInt  : " + Number.parseInt(y));

var afgerond = false; // Boolean

var cursussen = ["Javascript", "HTML", "CSS"]; // Aray
console.table(cursussen);
for (let x of cursussen) {
  console.log(x)
}
cursussen[3] = "APEX";
console.log(cursussen);

var artikel = {
  naam: "Pen",
  prijs: 1.5
}; // Object
console.log(artikel.naam);
artikel.prijs = 2.1;
console.log(artikel.prijs);

var naam = window.prompt("Geef uw naam op: ");
var boodschap = `Welkom, ${naam}`;
console.log(boodschap);
window.alert(boodschap);

function delen(a, b) {
  return a / b;
}
var q = delen(4, 10);
console.log(q);

var g1 = 9;
var g2 = 2;
console.log(g1 ** g2); // Machtsverheffen
console.log(g1 % g2); // Modulus, rest van een deling

console.log(3 + " + " + 4 + " = " + (3 + 4));
console.log(g1 += g2);
console.log(g1 -= g2);
console.log(g1 *= g2);
console.log(g1 /= g2);
console.log(g1 %= g2);
console.log(++g1);
console.log(g1++);
console.log(g1 != g2); // Ongelijk
console.log(g1 !== g2); // Exact ongelijk
console.log(g1 < 4 && g2 > 5);
console.log(g1 < 34 || g2 > 2);
console.log(!(g1 == g2));

var melding = g1 < g2 ? "Kleiner" :
  g1 > g2 ? "Groter" : "Gelijk";
console.log(melding);

g1 = g1 || 25;
console.log(g1);
g1 = g1 ? g1 : 25;
console.log(g1);

g1 = 10;
if (g1 < 10) {
  console.log("g1 is kleiner dan 10");
} else {
  if (g1 > 10) {
    console.log("g1 is groter dan 10");
  } else {
    console.log("g1 is gelijk aan 10");
  }
}

var kwartaal = 4;
switch (kwartaal) {
  case 1:
    console.log("Januari", "Februari", "Maart");
    break;
  case 2:
    console.log("April", "Mei", "Juni");
    break;
  case 3:
    console.log("Juli", "Augustus", "September");
    break;
  case 4:
    console.log("Oktober", "November", "December");
    break;
  default:
    console.error("Dit kwartaal bestaat niet");
}

var g3 = 1;
while (g3 < 5) {
  //console.log(g3++); // 1,2,3,4
  console.log(++g3); // 2,3,4,5
}

var g4 = 10;
do {
  console.log(g4++); // 10,11,12,13,14,15
  //console.log(++g4); // 11,12,13,14,15,15
} while (g4 <= 14);
console.log(g4);

let namen = ["Monique", "Esther", "Astrid", "Marielle"];
for (let i = 0; i < namen.length; i++) {
  console.log(i + " : " + namen[i] + " is een vrouw");
}

for (let naam of namen) {
  console.log(`${namen.indexOf(naam)} : ${naam} is een vrouw`);
} // Array

for (let eigenschap in artikel) {
  console.log(eigenschap + " : " + artikel[eigenschap]);
} // Object

var telop = function(a, b, ...overige) {
  a = a || 0;
  b = b || 0;
  let som = a + b;
  let args = overige;
  for (let i = 0; i < args.length; i++) {
    som += args[i];
  }
  return som;
}
console.log(telop(3, 4, 5));

if (typeof 'test' == 'string') {
  console.log("De variabele is een string");
}

if (typeof true == 'boolean') {
  console.log("De variabele is een boolean");
}

if (typeof 123 == 'number') {
  console.log("De variabele is een number");
}

if (function() {} instanceof Function) {
  console.log("Dit is een functie");
}

if ({ x: 1 } instanceof Object) {
  console.log("Dit is een object");
}

if ([1, 2, 3, 4] instanceof Array) {
  console.log("Dit is een array");
}

function optellen(a, b) {
  if (typeof a !== 'number' || typeof b !== 'number') {
    throw 'Foute invoer: gebruik getallen';
  }
  return a + b;
}
try {
  console.log(optellen(5, 6));
  console.log(optellen('abc', 6));
  console.log(optellen(94, 6));
} catch (fout) {
  console.log("Houston, we have a problem: " + fout);
}

function rekenen(a, b) {
  let plussen = a + b;
  let minnen = a - b;
  let vermenigvuldig = a * b;
  let deel = a / b;
  return {
    optellen: plussen,
    aftrekken: minnen,
    vermenigvuldigen: vermenigvuldig,
    delen: deel
  };
}
let testRekenen = rekenen(3, 4);
console.log(testRekenen.optellen);
console.log(testRekenen.aftrekken);
console.log(testRekenen.vermenigvuldigen);
console.log(testRekenen.delen);

namen.forEach(naam => console.log(naam.toUpperCase()));

// JSON notatie
var artikel = {
  naam: "pen",
  prijs: 1.5,
  totaal: function(aantal) {
    return this.prijs * aantal;
  },
  type: {
    punt: "fijn",
    kleur: "zwart"
  }
}
console.log(artikel.type.kleur);
console.log(artikel["naam"]);

var json = JSON.stringify(artikel);
console.log(json);
artikel = JSON.parse(json);
console.log(artikel.type.kleur);

function getWaarde(ding, eigenschap) {
  return ding[eigenschap];
}
console.log(getWaarde(artikel, "prijs"));

for (let prop in artikel) {
  console.log(artikel[prop]);
}

function Artikel(naam, prijs) {
  this.naam = naam;
  this.prijs = prijs;
}
var a = new Artikel("Kipsat", 2.75);
console.log(a.naam, a.prijs);

Artikel.prototype.totaal = function(aantal) {
  return this.prijs * aantal;
}
var c = new Artikel("Mankini", 75.0);
console.log(c.totaal(2));

class Artikel2 {
  constructor(naam, prijs) {
    this.naam = naam;
    this.prijs = prijs;
  }
  totaal(aantal) {
    return this.prijs * aantal;
  }
}
var d = new Artikel2("Auto", 25000);
console.log(d.totaal(3));

var nu = new Date();
var v01012019 = new Date(2019, 0, 1);
console.log(v01012019);
console.log(nu.getDate() + "-" + (nu.getMonth() + 1) + "-" + nu.getFullYear() + " " + nu.getHours() + ":" + nu.getMinutes());

var tekst = "265-0265873215-01";
console.log(tekst.length);
console.log(tekst.toUpperCase());
console.log(tekst.charAt(3));

var klantnummer = tekst.split("-");
console.log(klantnummer[0]);
console.log(klantnummer[1]);
console.log(klantnummer[2]);
console.table(klantnummer);

console.log(tekst.substr(0, 3));
console.log(tekst.substring(4, 14));
console.log(tekst.slice(-2));

var test = [1, "test", {
    min: 1,
    max: 4
  },
  [2, 3, 4]
];
console.log(test[0]);
console.log(test[3][0]);
console.log(test[2].max);

test[5] = 10;
console.table(test);
test.length = 2;
console.table(test);

var fruit = ["appels", "peren", "mandarijnen", "bessen"];
fruit.push("bananen");
fruit.unshift("kersen");
console.table(fruit);
let laatste = fruit.pop();
let eerste = fruit.shift();
console.log(eerste, laatste);
fruit.splice(2, 1);
console.table(fruit);
fruit.splice(1, 0, "aardbeien");
console.table(fruit);
fruit.splice(1, 1, "perziken");
console.table(fruit);
console.log(fruit.slice(1, -1));
var copy = fruit.slice();
console.table(copy);
console.log(copy.indexOf("perziken"));

fruit = fruit.map(naam => naam.toUpperCase());
fruit.forEach((naam, i) => console.log(`${i}: ${naam}`));

var getallen = [1, 3, 5, 2, 7, 9, 10, 6, 22, 5];
var somEven = getallen.filter(n => n % 2 == 0)
  .reduce((a, b) => a + b);
console.log(somEven);
console.log(getallen.sort());
console.log(getallen.sort((a, b) => a - b));
console.log(getallen.sort((a, b) => b - a));

console.log(fruit.join(" - "));
console.log(fruit.join());
console.log(fruit.join(";"));
console.log(fruit.toString());

var tekst = "Houben";
console.log(tekst.split());
console.log(tekst.split(""));
console.log(tekst.split("o"));
console.log(tekst.split("be"));
console.log(tekst.split("ou"));

var request = new XMLHttpRequest();
request.onreadystatechange = function(response) {
  if (request.readyState === XMLHttpRequest.DONE) {
    if (request.status === 200) {
      var list = JSON.parse(request.responseText);
      list.filter(item => item.postID < 5)
        .forEach(item => console.log(item.email));
    } else {
      console.log("Could not load comments :");
    }
  }
}
request.open('GET', 'https://jsonplaceholder.typicode.com/comments', true);
request.send();

var diffie = document.getElementsByTagName("div");
var arrDiv = Array.from(diffie);
console.table(arrDiv);

var classie = document.getElementsByClassName("rodekleur");
var arrClass = Array.from(classie);
console.table(arrClass);

var naampie = document.getElementsByName("mh1");
var arrName = Array.from(naampie);
console.table(arrName);
console.log(arrName[1].textContent);

var dif2 = document.getElementById("difje_2");
console.log(dif2);
console.log(dif2.textContent);
console.log(dif2.childElementCount);

var qSelect = document.querySelector("#difje_3");
console.log(qSelect);
console.log(qSelect.textContent);

var qSelectAll = document.querySelectorAll(".rodekleur");
console.log(qSelectAll.item(1).textContent);
var arrSelectAll = Array.from(qSelectAll);
console.log(arrSelectAll);
qSelectAll[0].style.backgroundColor = "yellow";

var test2 = document.querySelector("#difje_2 .blauwebgkleur");
console.log(test2.textContent);

let aatje = document.getElementsByTagName('a');
var arrA = Array.from(aatje);

console.log(arrA.length);
console.log(arrA[0].getAttribute("href"));
console.log(arrA[1].getAttribute("href"));
console.log(arrA[2].getAttribute("href"));
console.log(arrA[3].getAttribute("href"));
console.log(arrA[4].getAttribute("href"));
console.log(arrA[0].href);

function createLink(href, tekst) {
  var link = document.createElement("a");
  var text = document.createTextNode(tekst);
  link.appendChild(text);
  link.setAttribute("href", href);
  return link;
}

var mijnLink = createLink("http://www.vijfhart.nl", "Vijfhart");
var result = document.getElementById("result");
result.appendChild(mijnLink);
console.log(result);

function createLink2(href, tekst) {
  return `<a href="${href}">${tekst}</a>`
}

var mijnLink2 = createLink2("http://www.google.nl", "Google");
var result = document.getElementById("result");
result.innerHTML = mijnLink2;

var test = document.getElementById("test");
test.classList.add("sterk");
test.classList.remove("rood");
if (test.classList.contains("sterk")) {
  test.classList.replace("sterk", "onderstreept");
}
test.classList.toggle("onderstreept");

var artikelen = ["pen", "potlood"];
var lijst = document.getElementById("lijst");
lijst.innerHTML = artikelen.map((a, i) => `<li data-nr="${i}">${a}</li>`).join("");
var li = document.querySelector("li[data-nr='0']");
console.log(li.dataset.nr, li.textContent);


var binnen = document.getElementById("binnen");
var buiten = document.getElementById("buiten");

binnen.addEventListener("click", function(){
  console.log("op binnen geklikt");
}, false);
buiten.addEventListener("click", function(){
  console.log("op buiten geklikt");
}, false);

/*
// Het volgende stukje code conflicteert met bovenstaande click
window.addEventListener("click", function(e) {
  var newDiv = document.createElement("div");
  var newText = document.createTextNode(`positie: [${e.clientX}, ${e.clientY}]`);
  newDiv.appendChild(newText);
  newDiv.id = "test";
  var test = document.getElementById('test');
  if (test) {
    test.parentNode.replaceChild(newDiv, test);
  } else {
    document.body.appendChild(newDiv);
  }
});
*/

var test4 = document.getElementById("test4");
test4.addEventListener("keydown", function(e) {
  console.log(e.key);
}, false);

var postcode = document.getElementById("postcode");
postcode.addEventListener("change", function(e) {
  var re = new RegExp(e.target.pattern);
  var text = e.target.value;
  var label = document.querySelector("[for='postcode']");
  if (re.test(text)) {
    label.textContent = "Geldige postcode";
    label.style.color = "inherit";
  } else {
    label.textContent = "Ongeldige postcode";
    e.target.focus();
    e.target.value = "";
    label.style.color = "red";
  }
});

var array = Array.prototype.slice.call("test");
console.log(array);
var tekst = String.prototype.toUpperCase.apply(array);
console.log(tekst);

var test = {
  values: []
};
var add = Array.prototype.push.bind(test.values);
add(1, 2, 3);
add(4, 5);
console.log(test.values);

class ArtikelOvererving {
  constructor(naam, prijs) {
    this.naam = naam;
    this.prijs = prijs;
  }
  totaal(aantal) {
    return this.prijs * aantal;
  }
}
class ArtikelMetBTW extends ArtikelOvererving {
  constructor(naam, prijs, BTW) {
    super(naam, prijs);
    this.BTW = BTW;
  }
  totaalMetBTW(aantal) {
    return this.prijs * (1 + this.BTW / 100.0) * aantal;
  }
}

let qqq = new ArtikelMetBTW("Schaar",2.0,21);
let q10 = qqq.totaalMetBTW(10);
console.log(q10);


function makeClass(phrase) {
  // declare a class and return it
  return class {
    sayHi() {
      alert(phrase);
    }
  };
}

let User = makeClass("Hello World");
new User().sayHi();
