n00b pro

Javascript samenvatting

Dit hoofdstuk is onderdeel van de cursus Javascript. Andere cursussen in dezelfde reeks: HTML, CSS, C#, Ontwikkelomgeving.

Variabelen en objecten

declaratie

variabelen 
let num1 = 3; // geheel getal
let num2 = 3.14; // kommagetal
let boo = true; // boolean
let str = 'hello'; // string
let dat = new Date(); // Date object
let me = {
  age: 54,
  name: 'Rogier'
}; // object

conversie

toString() zet getallen e.d. om naar een string 
console.log(3.66.toString()) // '3.66'
console.log(3.66.toString() + 12) // '3.6612'
console.log(["apple", "banana", "cherry"].toString()) // 'apple,banana,cherry'
parseInt() zet teksten e.d. om naar een geheel getal 
console.log(parseInt(3.66)) // 3 - rond af naar beneden
console.log(parseInt('10')) // 10 - het is nu een getal i.p.v. een string
console.log(parseInt('12 monkeys')) // 12 (ok: getal staat in het begin)
console.log(parseInt('he is 40')) // NaN - Not a Number
parseFloat() zet teksten e.d. om naar een kommagetal 
console.log(parseFloat(3.66)) // 3.66
console.log(parseFloat('5.5 beers')) // 5.5 (ok: getal staat in het begin)
console.log(parseFloat('the value of PI is 3.14')) // NaN - Not a Number

NaN, Infinity, undefined, null

waarde betekenis voorbeeld
NaN, isNaN() zou een getal moeten zijn, maar is het niet 
console.log(parseInt('hello')) // NaN
const test = isNaN(3 * 'hello'); // true
Infinity oneindige waarde 
console.log(10 / 0) // Infinity - dus geen fout!
undefined heeft nog geen waarde gekregen 
const test;
console.log(test) // undefined
null idem als undefined, maar betekent eerder "heeft bewust geen waarde" 
const test = null; // heeft bewust geen waarde

Strings

declaratie

gebruik quotes 
const name = 'Rogier'; // enkel quotes krijgen de voorkeur
const name = "Rogier"; // mag, maar liever niet
const name = `Rogier`; // mag ook, maar wordt enkel gebruikt bij multiline strings en string interpolatie
string interpolatie 
const name = 'Rogier';
const length = 1.92;
const weight = 87;
console.log(`Welkom ${name}, je bmi is ${weight / (length * length)}`);
multiline string 
console.log(`Een
twee
drie
vier
hoedje van
hoedje van...`);

string properties en methodes

property/methode omschrijving voorbeeld
  
const str1 = 'Straks maakt mama macaroni klaar';
length aantal karakters 
console.log(str1.length); // 32
includes(str) controleert of een string str bevat 
console.log(str1.includes('pasta')); // false
indexOf(str) eerste positie van str (-1 indien niet gevonden) 
console.log(str1.indexOf('ma')); // 7
console.log(str1.indexOf('pa')); // -1
replaceAll(str1, str2) vervangt alle str1 door str2 
console.log(str1.replaceAll(' ', '-')); // 'Straks-maakt-mama-macaroni-klaar'
split(separator) splitst een string in een array 
console.log(str1.split(' ')); // ['Straks', 'maakt', 'mama', 'macaroni', 'klaar']
toLowerCase() zet om naar kleine letters 
console.log(str1.toLowerCase()); // 'straks maakt mama macaroni klaar'
toUpperCase() zet om naar kleine letters 
console.log(str1.toUpperCase()); // 'STRAKS MAAKT MAMA MACARONI KLAAR'

Arrays en objecten

declaratie

arrays 
// declaratie
const arr = [1, 2, 3, 5, 8, 13]; // arrays zijn meestal constanten

// items aanspreken
console.log(arr[2]); // 3
arr[4]++; // wordt 9
objecten 
// declaratie (objecten zijn meestal constanten)
const options = {
  color: '#0F0',
  showIcon: true
};

// achteraf nog een property toevoegen
options.size = 14;

// properties aanspreken
console.log(`opties: kleur ${options.color}, grootte ${options.size} ${options.showIcon ? 'met' : 'zonder'} icoon`);

// alternatieve syntax
console.log(`opties: kleur ${options['color']}, grootte ${options['size']} ${options['showIcon'] ? 'met' : 'zonder'} icoon`);

array properties en methodes

Javascript kent geen onderscheid tussen arrays, lijsten, stacks, queues enz... zoals in C#; alles is een array.

property/methode omschrijving voorbeeld
  
const arr1 = ['boter', 'kaas', 'melk', 'eieren'];
length aantal elementen 
console.log(arr1.length); // 4
contains(item) controleert of de rij item bevat 
console.log(arr1.contains('melk')); // true
indexOf(item) eerste index van item (-1 indien niet gevonden) 
console.log(arr1.indexOf('melk')); // 2
						console.log(arr1.indexOf('brood')); // -1
join(glue) voeg items samen tot een string 
console.log(arr1.join(', ')); // 'boter, kaas, melk, eieren'
pop() verwijder en return element achteraan de rij 
console.log(arr1.pop()); // 'eieren'
push(item) voeg item toe achteraan de rij 
console.log(arr1.push('brood'));

Functies

klassieke declaratie 
function vindGgd(a, b) {
  while (b !== 0) {
    const temp = b;
    b = a % b;
    a = temp;
  }
  return a;
}
declaratie als constante 
const vindGgd = function(a, b) {
  ...
}
declaratie met arrow expressie 
const vindGgd = (a, b) => {
  ...
}
optionele parameters 
function tekenTekst(txt, color = '#090', size = 14, withIcon = false) {
  ...
}
tekenTekst('hallo', '#338'); // size blijft 14, geen icoon

Controlestructuren

selecties

code omschrijving voorbeeld
if als 
const badGrades = true;
if (badGrades) {
  console.log('House arrest for two weeks');
}
if - else als - dan 
const badGrades = true;
if (badGrades) {
  console.log('House arrest for two weeks');
} else {
  console.log('No house arrest');
}
voorwaarde1 ? waarde1 : waarde2 ternaire operator 
const badGrades = true;
console.log(badGrades ? 'House arrest for two weeks' : 'No house arrest');
if - else - if als - dan - als 
const seasonNr = 3;
const seasonName;
if (seasonNr == 1) {
  seasonName = 'lente';
} else if (seasonNr == 2) {
  seasonName = 'zomer';
} else if (seasonNr == 3) {
  seasonName = 'herfst';
} else if (seasonNr == 4) {
  seasonName = 'winter';
} else {
  seasonName = 'onbekend seizoen';
}
switch - case cascade selectiestructuur 
const seasonNr = 3;
let seasonName;
switch (seasonNr)
{
   case (1): seasonName = 'lente'; break;
   case (2): seasonName = 'zomer'; break;
   case (3): seasonName = 'herfst'; break;
   case (4): seasonName = 'winter'; break;
   default: seasonName = 'onbekend seizoen';
}
voorwaarde1 ? waarde1
: voorwaarde2 ? waarde2
: voorwaarde3 ? waarde3
: defaultwaarde 		getrapte ternaire operator 
const seasonNr = 3;
const seasonName = seasonNr == 1 ? 'lente'
   : seasonNr == 2 ? 'zomer'
   : seasonNr == 3 ? 'herfst'
   : seasonNr == 4 ? 'winter'
   : 'onbekend seizoen';

iteraties

code omschrijving voorbeeld
for iteratie met vaste grenzen 
const friends = [ 'Bubba', 'Lt. Dan' ];
for (let i = 0; i < friends.length; i++) {
    console.log(friends[i]);
}
for-of iteratie over een array 
const friends = ['Bubba', 'Lt. Dan'];
for (const friend of friends) {
  console.log(friend);
}
for-in iteratie over de keys van een object 
const options = {
  color: '#0F0',
  size: 14,
  showIcon: true
};
for (const key in myCar) {
   console.log(`the value of ${key} is ${options[key]}`);
}
forEach() iteratie met callback methode 
const lnksMenu = document.querySelectorAll('nav a');
lnksMenu.forEach(lnk => {
   ...
});

Document Object Model

querying

Opmerking: alle andere methodes als getElementById() enz... mogen niet gebruikt worden

functie omschrijving voorbeeld
querySelector() zoek eerste element op basis van een CSS selector 
const btnSubmit = document.querySelector('#frm1 [type=submit]');
querySelectorAll() zoek alle elementen op basis van een CSS selector 
const lnksMenu = document.querySelectorAll('nav a');
lnksMenu.forEach(lnk => { // itereer met forEach
  ...
});

navigatie

property omschrijving
node.children collectie van children van de huidige node
node.nextElementSibling volgende sibling (null indien niet gevonden)
node.parentNode parent van de huidige node
node.previousElementSibling vorige sibling (null indien niet gevonden)
methode omschrijving voorbeeld
node.closest(...) zoekt dichtstbijzijnde bovenliggende element (ancestor) te vinden dat overeenkomt met een opgegeven CSS-selector 
<div class="row-item">
  <div class="row-nr">12</div>
  <div class="row-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi, corporis!</div>
  <div class="row-actions">
    <button class="edit">✏️</button>
    <button class="delete">🗑️</button>
  </div>
</div>


const btnEdit = document.querySelector('.edit'); // edit button
const textToEdit = btnEdit.closest('.row-item').querySelector('.row-text'); // item text to edit

manipulatie

property betekenis voorbeeld 
<div id="test" class="message box" data-lastviewed="2024-03-11" data-tag="quote">
  <p>dit is <em style="display:none">regel 1</em></p>
</div>

const divTest = document.querySelector('#test');
innerHTML HTML binnen een element 
console.log(divTest.innerHTML); // '<p>dit is <em>regel 1</em></p>'
textContent tekst binnen een element (negeer tags) 
console.log(divTest.textContent); // 'dit is regel 1'
value, src, href... HTML attributen verschijnen als Javascript properties 
imgPhotoBig.src = 'img/photo1.jpg';
chbAccept.checked = true;
if (inpEmail.value == '') ...;
classList lijst van CSS classes voor dit element 
console.log(divTest.classList.contains('box')); // true
divTest.classList.add('green'); // classList value is 'message box green'
divTest.classList.remove('message', 'green'); // classList value is 'box'
divTest.classList.toggle('box'); // classList value is ''
divTest.classList.toggle('box'); // classList value is 'box'
style geeft rechtstreeks toegang tot CSS properties 
divTest.style.color = '#690';
divTest.style.boxShadow = '10px 10px 5px #888'; // box-shadow wordt boxShadow
dataset geeft toegang tot custom data-* attributen 
console.log(divTest.dataset.tag); // 'quote'
divTest.dataset.lastviewed = '2024-04-01'; // data-lastviewed waarde aangepast

Events

event listeners

Events voeg je altijd toe met addEventListener(event, callback). Enkele codefragmenten:

code omschrijving voorbeelden
addEventListener(evt, callback) voer callback() uit als event optreedt 
const btn1 = document.querySelector('#btn1');

// met anonieme callback methode
btn1.addEventListener('click', (e) => {
  console.log('btn1 clicked');
});

// met expliciete callback methode
function handleBtn1Click(e) {
  console.log('btn1 clicked');
}
btn1.addEventListener('click', handleBtn1Click);
this element waarop de event hander gedefinieerd is 
const tbl1 = document.querySelector('table');
function handleTableClick(e) {
  console.log(`${this.nodeName} clicked`'); // TABLE (handles event)
}
tbl1.addEventListener('click', handleTableClick);
e.target element waarop het event op plaatsvond 
const tbl1 = document.querySelector('table');
function handleTableClick(e) {
  console.log(`${e.target.nodeName} clicked`'); // TD (was clicked)
}
tbl1.addEventListener('click', handleTableClick);
e.preventDefault() verhinder de standaardactie van links, submitknoppen enz... 
const lnk1 = document.querySelector('nav a');
lnk1.addEventListener('click', (e) => {
  e.preventDefault();
  console.log(`link default actie disabled`');
});

soorten events

event omschrijving typische targets
click muisklik alle elementen
mouseover muis erboven alle elementen
mouseout muis ervan weg alle elementen
keydown toets ingedrukt tekst elementen
keyup toets losgelaten tekst elementen
focus element krijgt focus form elementen
blur element verliest focus form elementen
submit formulier wordt verstuurd <form>
input waarde wordt veranderd <input> en <textarea>
change waarde is veranderd <input>, <textarea>, <select>

event object

Het event object e in ...addEventListener('keydown', (e) => { ... }); bevat informatie over het event.

property omschrijving event type
e.target het element waarop het event plaatsvond alle event types
e.key ingevoerd karakter, b.v 'Z' toetsenbord
e.code ingedrukte toets, b.v 'KeyZ' toetsenbord
e.shiftKey werd de shift ingedrukt, b.v true toetsenbord
e.ctrlKey werd de control ingedrukt, b.v true toetsenbord
e.clientX horizontale positie van de muis (naar rechts) muis
e.clientY verticale positie van de muis (naar onder) muis

Games

Enkele veelgebruikte API's en technieken waar je van gehoord moet hebben:

API omschrijving toestemming nodig?
drag drop API drag drop, b.v. bestanden of afbeeldingen naar een webpagina slepen nee
geolocation API opvragen locatie van de gebruiker ja
localStorage bewaren van gegevens op de browser; worden niet naar de server gestuurd zoals cookies nee
notification API kleine notificatie popups rechtsonder ja
speech API tekst naar speech en speech naar tekst ja (voor toegang microfoon)
sound API zelf geluiden synthetiseren nee
webcam API gebruik webcam van de gebruiker (toestemming nodig) nee
webGL 3D graphics genereren in webpagina's nee

Drie manieren om een game loop te maken:

met setTimeout() 
function doLoop() {
  // do game logic here
  // ...

  // new loop after 20ms
  setTimeout(doLoop, 20);
}
met setInterval() 
function doLoop() {
  // do game logic here
  // ...
}

// new loop each 20ms
setInterval(doLoop, 20);
met requestAnimationFrame() 
function doLoop() {
  // do game logic here
  // ...

  // new loop whenever ready
  requestAnimationFrame(doLoop);
}

Web API

Schematisch de code van een fetch() (schrap de stukken code die je niet nodig hebt):


async function getApiData() {
  // build request url
  const url = 'https://api.somedomain.com/api/method/...';
  const params = new URLSearchParams();
  params.append('api_key', API_KEY);
  params.append('param1', 'val1');
  params.append('param2', 'val2');
  params.append('...', '...');
  url += '?' + params.toString();

  // build options
  const options = {
    method: '...',
    headers: {
      'Authorization': 'Bearer ghp_fIWhq1DrL...'
      ...
    }
    ...
  };

  // fetch data with options
  const resp = await fetch(url, options);
  if (!resp.ok) {
    console.log('opvragen github repos mislukt');
    return;
  }
  const data = await resp.json();

  // process data
  data.forEach(entry => {
    ...
  });
}
async function doFetch() {
  console.log('fetching data...');
  await getApiData();
  console.log('...done');
}
doFetch();

Debugging

code omschrijving voorbeeld
console.log() schrijf tekst naar de console 
console.log('deze mededeling komt in de console');
console.error() schrijf fout naar de console 
console.log('deze foutmelding komt in de console');
debugger plaats een breekpunt 
console.log('opdracht regel 1');
debugger; // pauzeer hier
console.log('opdracht regel 2');