logo Ma logo Theo logo JavaScript

Familie Duck

Opdracht this keyword in JS functies

logo JavaScript

Doel van deze oefening

  • Ervaar dat functies op verschillende afbeeldingen een soortgelijk gedrag kan veroorzaken, zonder dat je dat voor elke afbeelding afzonderlijk moet coderen
  • De rol van this hierbij

Veronderstelde voorkennis

  • de beginselen van JavaScript Donald Duck
    • Arrays
    • Functies in JS:
      • notatie
      • groeperen van statements
    • events in JavaScript:
      .addEventListener('click', eenOfAndereFunctie)
    • for-loop

Keyword this

  • Heeft afhankelijk van de omstandigheden verschillende betekenissen
  • als je hem op een pagina in de console opdroept, verwijst this naar het window object
  • als door een event een functie wordt aangeroepen, dan verwijst this naar het element dat het event opriep.
Probeer dit uit in jouw browser en ga na of je alles begrijpt.

Opdracht

Resultaat

De link naar YouTube:
https://youtu.be/GzPRpBbz8Hw

Noodzakelijke aanvullingen:

  1. het data attribuut
  2. this.nextSibling
data-attribuut

  <img src="JSlogo.png"  alt="JavaScript" data-voorbeeld="logo JavaScript" data-extra="Nog meer info." >
is met JS te benaderen met: 

	this.dataset.voorbeeld 		// 'logo JavaScript'
	this.dataset.extra 		// 'Nog meer info.'
Next Sibling
  • als je in de DOM een volgend element wilt selecteren kan dat met this.nextSibling
  • Let er daarbij op dat als er nieuwe regel of zelfs een enkele spatie wordt gezien als een DOM-node. De consequentie daarvan kun je uitproberen.
    Downloaden en in je browser uitproberen. (Kijk ook in je console naar je foutmelding en probeer dat op te lossen.)

Inleveren

  • GitHUb Bestanden commit je regelmatig op GitHub.
    Denk daarbij aan de afronding van een onderdeel van de app en na elke les.
  • Kwik Na de eerste commit de GitHub-link al in Magister
  • Na afloop de bestanden online op hosts.ma-cloud.nl
  • Het linkje naar de live-versie in README.md
Deze presentatie is gemaakt met:
https://github.com/hakimel/reveal.js

Live demo: https://revealjs.com/#/