https://www.freecodecamp.org/news/javascript-projects-for-beginners/



HTML

<div id="melding">

</div>

<div>
JavaScript Dag 1
</div>


CSS

#melding {
  color: red;
}


JavaScript

// Voorbeeldje
/* https://developer.mozilla.org/nl/docs/Web/JavaScript */
/* Chrome Developer Tools: F12 OF CTRL+SHFT+I */
/* Google: mdn javascript string */
console.clear();
console.log("Test");

var x = document.getElementById("melding");
x.textContent = "Testje";

var naam = "Marc";
naam = naam.toUpperCase();
console.log(naam);

function test() {
  return {
    naam: "Marc's JavaScript"
  };
}

var x = test();
console.log(x.naam);

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

var cursussen = ["Javascript", "HTML", "CSS"];
cursussen[3] = "APEX";
console.log(cursussen[3]);
console.log(cursussen);

var som = 2 + 3;
console.log(som);

var x = 3;
var y;
var z = x / y;
console.log(x / y);
console.log(isNaN(x / y));
console.log(isNaN(z));
console.log(Number.isInteger(x));
console.log(Number.parseFloat("12.4.45test"));
console.log(Number.parseInt("12.4.45test"));

var test = `1 + 2 = ${1 + 2}`;
var alternatief = "Wij hopen \n dat \\ het heel \
goed zal bevallen.";
console.log(alternatief);
console.log(test);

/*
function som(a, b) {
var uitkomst = a + b;
return uitkomst;
}

console.log(som(3,8));
*/

// van rechts naar links
var a = 4;
var b = 5;
var c = 3;
var d = a += b += c;
console.log(a, b, c, d);

console.log(3 + " + " + 4 + " = " + (3 + 4));


var x = 1;
var y = x++;
y += x;
console.log(x, y);


function test1(a) {
  // a wordt 0 als a nog niet gevuld is
  console.log(a, !!a);

  if (!a) {
    a = 0;
  } else {
    a = a
  }
  return a;

  //return a = a || 0;
}

var x = test1(4);
console.log(x);
x = test1();
console.log(x);

// Variant 1
//var getal1 = parseFloat(window.prompt("Getal a: "));
//var getal2 = parseFloat(window.prompt("Getal b: "));
// Variant 2
var getal1 = window.prompt("Getal a: ");
var getal2 = window.prompt("Getal b: ");
getal1 = Number.parseFloat(getal1);
getal2 = Number.parseFloat(getal2);

console.log("Eerste getal: " + getal1);
console.log("Tweede getal: " + getal2);
var sommetje = getal1 + getal2;
console.log(sommetje);
//console.log(getal1, getal2, getal1 + getal2);

var medling = `${a} + ${b} = ${a + b}`;
console.log(medling);


var x = 15;
//x++;
var boodschap = `De waarde van x is nu ${++x}`;
//boodschap = "De waarde van x is nu " + x;
console.log(boodschap);



console.log("De waarde van x is nu: " + x);
++x;
console.log("De waarde van x is nu: " + x);
x++;
console.log("De waarde van x is nu: " + x);


x = x < 25 ? x + 1 : 10;
console.log(x);


var arr_namen = ["Klaas", "Piet", "Jan"];
console.log(arr_namen[0]);
console.log(arr_namen[arr_namen.length - 1]);


var date = new Date();
var dag = date.getDay();
console.log("Datum: " + date);
console.log("Dag  : " + dag);

var dag = window.prompt("Geef dagnummer van de week:");
dag = Number.parseInt(dag);
switch (dag) {
  case 1:
  case 2:
  case 3:
  case 4:
  case 5:
    console.log("Werkdag");
    break;
  case 6:
  case 7:
    console.log("Weekend");
    break;
  default:
    console.log("Geen bekende dag van de week");
}

switch (true) {
  case dag >= 1 && dag <= 5:
    console.log("Werkdag");
    break;
  case dag === 6 || dag === 7:
    console.log("Weekend");
    break;
  default:
    console.log("Geen bekende dag van de week");
}



var x = 1;
while (x <= 5) {
  console.log(x++);
}

// https://www.jslint.com


x = 1;
do {
  console.log(x++);
} while (x == 2);
console.log(x);


// Array
let namen = ["Jan", "Pier", "Joris", "Corneel"];
for (let i = 0; i < namen.length; i++) {
  console.log(namen[i] + " heeft een baard.");
}


getallen = [1, 5, 3, 7];
for (let i = 0; i < getallen.length; i++) {
  console.log(i, getallen[i]);
}


getallen = [1, 5, 3, 7];
for (let getal of getallen) {
  console.log(`Het volgende getal heeft de waarde:  ${getal}`);
}


let namen2 = ["Jan", "Pier", "Joris", "Corneel"];
for (let naam of namen2) {
  console.log(`${naam} heeft een baard.`);
}


// Object
var artikel = {
  naam: "pen",
  prijs: 1.5
};
for (let eigenschap in artikel) {
  console.log(eigenschap, artikel[eigenschap]);
}


var artikel = {
  naam: "pen",
  prijs: 1.5,
  kleur: "blauw"
}

console.log(artikel.naam);
console.log(artikel["naam"]);


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


var prijzen = [10, 3.5, 2.7, 8];
var waarde = 0;
for (let i = 0; i < prijzen.length; i++) {
  //waarde = waarde + prijzen[i];
  waarde+=prijzen[i];
  console.log(i, prijzen[i]);
}
console.log("Totaal met for loop: " + waarde);


var prijzen = [10, 3.5, 2.7, 8];
var waarde = 0;
for (let getal of prijzen) {
  //waarde = waarde + getal;
  waarde+=getal;
  console.log(getal, waarde);
}
console.log("Totaal met for ... of loop: " + waarde);


var getal = Math.floor(Math.random() * 10) + 1;
var poging = parseInt(window.prompt("Geef een getal: "));
var teller = 1;

while (poging < getal || poging > getal) {
  if (poging < getal) {
    console.log("hoger");
  } else {
    console.log("lager");
  }
  poging = parseInt(window.prompt("Geef een getal: "));
  teller++;
}
console.log("Aantal pogingen: " + teller);



HTML

<div>
JavaScript Dag 2
</div>


JavaScript

console.clear();
// Console tonen door F12
console.log("Functies");

var date = new Date();
var dag = date.getDay();
var melding = "geen bestaande dag van de week";
switch (dag) {
  case 1:
  case 2:
  case 3:
  case 4:
  case 5:
    melding = "een werkdag";
    break;
  case 0:
  case 6:
    melding = "weekend";
}
console.log(melding);


function telop(a, b) {
  a = a || 0; // als a niet gevuld is: 0
  b = b || 0; // als b niet gevuld is: 0
  return a + b;
}
console.log(telop(5, 6));
var som = telop(10, 20);
console.log(som);
var x = telop(2, 3);
var y = telop(5, 6);
var z = telop(x, y);
console.log(z);

console.log(telop(2));

var telop = function(a, b) {
  return a + b;
}
console.log(telop(3, 6));


var telop = function(a, b) {
  a = a || 0; // als a niet gevuld is: 0
  b = b || 0; // als b niet gevuld is: 0
  let som = a + b;
  let args = arguments; // alle argumenten
  for (let i = 2; i < args.length; i++) { // vanaf 3e positie
    som += args[i];
  }
  return som;
}
console.log(telop(3, 4, 5));


var telop = function(a, b, ...overige) {
  a = a || 0; // als a niet gevuld is: 0
  b = b || 0; // als b niet gevuld is: 0
  let som = a + b;
  let args = overige; // overige argumenten
  for (let i = 0; i < args.length; i++) { // vanaf 1e positie
    som += args[i];
  }
  return som;
}
console.log(telop(3, 4, 5, 6));



var telop = function(a, b, ...overige) {
  a = a || 0; // als a niet gevuld is: 0
  b = b || 0; // als b niet gevuld is: 0

  if (typeof a !== 'number' || typeof b !== 'number') {
    throw 'Foute invoer: een argument was niet numeriek';
  }

  var som = a + b;
  for (let waarde of overige) {
    waarde = waarde || 0;
    som += waarde;
  }
  return som;
}

function tryTelop(a, b, ...argumenten) {
  try {
    return telop(a, b, argumenten); // 3 puntjes voor arguments?
  } catch (fout) {
    console.error("Er ging iets fout: ", fout);
    return fout;
  }
}

console.log(tryTelop(2, "test", undefined, 5, 6));
console.log(tryTelop(5, 6));


function minMax(a, b) {
  let minWaarde = a < b ? a : b;
  let maxWaarde = a > b ? a : b;
  return {
    min: minWaarde,
    max: maxWaarde
  };
}
let test = minMax(3, 4);
console.log(test.min);
console.log(test.max);


var namen = ["Jan", "Pier", "Joris", "Corneel"];

function toonNaam(naam) {
  console.log(naam.toUpperCase());
}
namen.forEach(toonNaam);


var namen = ["Jan", "Pier", "Joris", "Corneel"];
namen.forEach(function(naam) {
  console.log(naam.toUpperCase());
});


var namen = ["Jan", "Pier", "Joris", "Corneel"];
namen.forEach(naam => console.log(naam.toUpperCase()));


let namen2 = ["truus", "ellen", "kim", "vianne"];
namen2.forEach(s => console.log(s.toUpperCase()))
namen2 = namen2.map(s => s.toUpperCase());
console.log(namen2);


var maal = function(a, b) {
  a = a || 0; // als a niet gevuld is: 0
  b = b || 1; // als b niet gevuld is: 1
  let vermenigvuldig = a * b;
  let args = arguments; // alle argumenten
  for (let i = 2; i < args.length; i++) { // vanaf 3e positie
    vermenigvuldig *= args[i];
  }
  return vermenigvuldig;
}
console.log(maal(3, 4, 5));


var getallen = [1, 3, 5, 7, 9];

function toonDubbel(getal) {
  console.log(getal * 2);
}
getallen.forEach(toonDubbel);

var getallen = [1, 3, 5, 7, 9];
getallen.forEach(function(getal) {
  console.log(getal * 3);
});

var getallen = [1, 3, 5, 7, 9];
getallen.forEach(getal => console.log(getal * 4));

console.log(getallen);
getallen = getallen.map(x => x * 2);
console.log(getallen);
getallen.forEach((x, i, a) => a[i] = x * 2);
console.log(getallen);


var maal = function(a, b, ...overige) {
  a = a || 0; // als a niet gevuld is: 0
  b = b || 1; // als b niet gevuld is: 1
  /*
    if (typeof a !== 'number' || typeof b !== 'number') {
      throw 'Foute invoer: een argument was niet numeriek';
    }
    
      if (typeof a === 'string' && typeof b === 'number') {
        return a.repeat(b);
      }
    
  */

  var vermenigvuldig = a * b;
  for (let waarde of overige) {

    if (typeof waarde !== 'number') {
      throw "Fout, niet numeriek"
    }

    waarde = waarde || 1;
    console.log(waarde);
    vermenigvuldig *= waarde;
  }
  return vermenigvuldig;
}

function tryMaal(a, b, ...argumenten) {
  try {
    return maal(a, b, ...argumenten);
  } catch (fout) {
    console.error("Er ging iets fout: ", fout);
    return fout;
  }
}

console.log(tryMaal(3, 4, 5, 6));
console.log(tryMaal(3, 4, "a"));
//console.log(tryMaal("test", 2));
//console.log(tryMaal("a", "b"));



var totaal = (function() {
  var som = 0;
  return function(getal) {
    return som += getal;
  };
})();
console.log(totaal(3));
console.log(totaal(1));
console.log(totaal(2));


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


function getWaarde(ding, eigenschap) {
  return ding[eigenschap];
}
//console.log(getWaarde(artikel, "prijs")); // 1.5
for (let prop in artikel) {
  console.log(artikel[prop]);
}


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

Artikel.prototype.totaal = function(aantal) {
  return this.prijs * aantal;
}

let b = new Artikel("potlood", 0.5);
console.log(b.totaal(3));
console.log(b.naam, b.prijs);
console.log(a.totaal(3));


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



class Artikel2 {
  constructor(naam, prijs) { // geen keyword function
    this.naam = naam;
    this.prijs = prijs;
  }
  totaal(aantal) { // geen keyword function
    return this.prijs * aantal;
  }
}
var c = new Artikel2("gum", 0.9);
console.log(c.totaal(6));


var tekst = "Dit;is;een;voorbeeld.";
console.log(tekst.split(";"));



var fruit = ["appels", "peren", "mandarijnen", "bessen"];

fruit.splice(1, 0, "bananen", "aardbeien");
fruit.forEach(x => console.log(x));
console.log(fruit.slice(1, -1));
console.log(fruit.slice(1));

var gezond = fruit.slice(); // Er wordt een kopie gemaakt
fruit[1] = fruit[1].toUpperCase();
//console.log(gezond[1]);

console.log(fruit);
console.log(gezond);

console.log(fruit.indexOf("kersen")); // -1 = komt niet voor

/*
fruit.push("bananen"); // voegt toe aan het eind
fruit.unshift("kersen"); // voegt toe aan het begin
let laatste = fruit.pop(); // verwijdert laatste
let eerste = fruit.shift(); // verwijdert eerste
fruit.splice(2,1); // verwijdert element op 3e positie
fruit.splice(1,0,"aardbeien"); //voegt op 2e positie toe
fruit.splice(1,1,"perziken"); //vervangt op 2e positie
console.log(fruit.slice(1,-1)); // 2e tot voorlaatste
var copy = fruit.slice(); // geen argumenten:
// copy van hele array
console.log(fruit.indexOf("perziken")); // 1
*/


let fruit3 = "appels,peren, bananen  ,   bessen";
let sep = / *, */;
fruit3 = fruit3.split(sep);
console.log(fruit3);




var auto = {
  merk: "Opel",
  prijs: 2000.95,
  totaal: function(aantal) {
    return this.prijs * aantal;
  },
  type: {
    versnelling: "automaat",
    kleur: "blauw"
  },
  values: [],
  add: function(...val){
    this.values.splice(this.values.length,0,...val);
  },
  show: function(){
    this.values.forEach(x => console.log(x));
  }
}
console.log(auto.type.versnelling);
console.log(auto.totaal(3));
console.log(auto.merk);

auto.merk = "Ford";
auto.type.kleur = "groen";
console.log(auto.merk);
console.log(auto.type.kleur);

auto.add(2,3,4,5,6);
auto.show();


var naam2 = ["Kees", "Truus", "Karel", "Monique"];
console.log(naam2);
var eerste = naam2.shift();
naam2.splice(1, 0, eerste);
console.log(naam2);
naam2.splice(2, 1, "Manuela");
console.log(naam2);
var stringetje = naam2.toString();
console.log(stringetje);



class Boek {
  constructor(auteur, titel) { // geen keyword function
    this.auteur = auteur;
    this.titel = titel;
  }
  printBoek() { // geen keyword function
    return this.auteur + " " + this.titel;
  }
  //toString(){
  //  return this.auteur + ": " + this.titel;
  //}
}

var c = new Boek("MH", "Dagboek");
console.log(c.auteur, c.titel);
console.log(c.printBoek());


//var boekie[];
//boekie.push(new Boek("Piet","Het leven van Piet"));


var boekjes = ["Boek 4","Boek 2","Boek 1","Boek 3"];
boekjes.forEach(x => console.log(x));
console.log(boekjes.sort()); 
console.log(boekjes.sort((a,b) => a-b)); 

var zoekBoek3 = boekjes.filter(n => n=="Boek 3");
zoekBoek3.forEach(naam => console.log(naam));

console.table(boekjes);

var paragraph = 'The quick brown fox jumps over the lazy dog. It barked.';
var regex = /[A-Z]/g;
var found = paragraph.match(regex);
console.log(found);
found.forEach(q => console.log(q));



var nu = new Date();
console.log(nu);
console.log(nu.getFullYear());
console.log(nu.getMonth() + 1); // 0-based : 2 = Maart
console.log(nu.getDate());
console.log(nu.getHours());
console.log(nu.getMinutes()); 

Date.prototype.maanden = Date.prototype.maanden || ["Jan","Feb","Maa","Apr","Mei","Jun","Jul","Aug","Sep","Okt","Nov","Dec"];
console.log(Date.prototype.maanden[5]);

//var dag = new Datum(28,3,2019);
//console.log(dag.toString());
/*
Date.prototype.formatDate(){
  jaar  = this.getFullYear(),
  maand = this.getMonth
  //this.maanden
}
*/