// HTML
Eerste blok
Derde blok
Vierde blok
Test (class aanpassen)
Voorbeeld window.onload
// 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 `${tekst}`
}
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) => `${a}`).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();