n00b pro

05. 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

conversie

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
+ zet tekst om naar een getal 
console.log(+'3.66') // 3.66 - het is nu een getal i.p.v. een string
console.log(+'12 monkeys') // 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
undefined heeft nog geen waarde gekregen 
const test = null; // heeft bewust geen waarde
null idem als undefined, maar betekent eerder "heeft bewust geen waarde" 
const test;
console.log(test) // undefined

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
endsWith(str) controleert of een string eindigt met str 
console.log(str1.endsWith('ar')); // true
includes(str) controleert of een string str bevat 
console.log(str1.contains('pasta')); // false
indexOf(str) eerste positie van str (-1 indien niet gevonden) 
console.log(str1.indexOf('ma')); // 7
console.log(str1.indexOf('pa')); // -1
lastIndexOf(str) laatste positie van str (-1 indien niet gevonden) 
console.log(str1.lastIndexOf('ma')); // 18
replace(str1, str2) vervangt de eerste str1 door str2 
console.log(str1.replace('mama', 'papa')); // 'Straks maakt papa macaroni klaar'
replaceAll(str1, str2) vervangt alle str1 door str2 
console.log(str1.replace(' ', '-')); // 'Straks-maakt-mama-macaroni-klaar'
split(separator) splitst een string in een array 
console.log(str1.split(' ')); // ['Straks', 'maakt', 'mama', 'macaroni', 'klaar']
startsWith(str) controleert of een string begint met str 
console.log(str1.startsWith('Stra')); // true
substr(start, num) substring vanaf positie start en num karakters 
console.log(str1.substr(10, 15)); // 'kt mama macaron'
substring(start, end) substring van posities start tot end 
console.log(str1.substring(10, 15)); // 'kt ma'
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

Opmerking: 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'));
shift() verwijder en return element aan het begin de rij 
console.log(arr1.shift()); // 'boter'
unshift(item) voeg item toe vooraan de rij 
console.log(arr1.unshift('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.firstElementChild eerste child van de huidige node
node.lastElementChild laatste child 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)

manipulatie

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

const divTest = document.querySelector('#test');
innerHTML HTML code binnen een element 
console.log(divTest.innerHTML); // '<p>dit is <em>regel 1</em></p>'
innerText tekst binnen een element (zonder tags) 
console.log(divTest.innerText); // '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', 'small'); // classList value is 'message box green small'
divTest.classList.remove('message'); // classList value is 'box green small'
divTest.classList.toggle('box'); // classList value is 'green small'
divTest.classList.toggle('box'); // classList value is 'box green small'
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);
 
e.target
 element waar het event op plaatsvond 
const btn1 = document.querySelector('#btn1');
function handleBtn1Click(e) {
  console.log(`${e.target.id} clicked`');
}
btn1.addEventListener('click', handleBtn1Click);

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 ingedrukte toets, b.v 'Z' toetsenbord
e.keyCode ASCII nummer van de ingedrukte toets, b.v 90 toetsenbord
e.shiftKey werd de shift 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

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');