Inhoud

  1. Geen paragrafen H1 - Voorwoord
  2. Geeft paragrafen weer H2 - Wat is JavaScript?
    1. §1. Wat kun je met JavaScript?
    2. §2. De script-tag
    3. §3. Opdrachten
  3. Geeft paragrafen weer H3 - Statements (opdrachten)
    1. §1. Wat zijn statements?
    2. §2. Functie document.write
    3. §3. Commentaar
    4. §4. Functie alert
    5. §5. Opdrachten
  4. Geeft paragrafen weer H4 - Variabelen
    1. §1. Wat is een variabele?
    2. §2. Variabelen maken en gebruiken
    3. §3. Functie prompt
    4. §4. Operatoren
    5. §5. Strings
    6. §6. Opdrachten
  5. Geeft paragrafen weer H5 - Functies
    1. §1. Wat is een functie?
    2. §2. Functies maken en gebruiken
    3. §3. Functies die iets teruggeven
    4. §4. Parameters en argumenten
    5. §5. De scope van variabelen
    6. §6. Opdrachten
  6. Geeft paragrafen weer H6 - Loops en voorwaardes
    1. §1. Wat zijn loops en voorwaardes?
    2. §2. Het if-else statement
    3. §3. Vergelijkingen en hun operatoren
    4. §4. Functie confirm
    5. §5. Het switch-statement
    6. §6. De while-loop
    7. §7. De for-loop
    8. §8. Stoppen door break
    9. §9. Opdrachten
  7. Geeft paragrafen weer H7 - Events
    1. §1. Wat is een event?
    2. §2. Events maken en gebruiken
    3. §3. Welke events zijn er?
    4. §4. Variabele this
    5. §5. Variabele window.event
    6. §6. Opdrachten
  8. Geeft paragrafen weer H8 - Array
    1. §1. Wat is een Array?
    2. §2. Een Array maken en gebruiken
    3. §3. Een Array doorlopen
    4. §4. Een associatieve array
    5. §5. De for-in loop
    6. §6. Opdrachten
  9. Geeft paragrafen weer H9 - Objecten
    1. §1. Wat is een object?
    2. §2. Verschil object en variabele
    3. §3. Eigenschappen
    4. §4. Methodes
    5. §5. Eigenschappen en methodes
    6. §6. Opdrachten
  10. Geeft paragrafen weer H10 - Globale objecten
    1. §1. Wat zijn globale objecten?
    2. §2. Het window object
    3. §3. Het document object
    4. §4. Het Math object
    5. §5. Standaard HTML-Element object
    6. §6. Een HTML-Table object
    7. §7. Opdrachten

Hoofdstuk 7 - Opdracht 3

De opdracht:

Maak een div-element met de tekst: Hello world!
Zodra je met je muis over deze div heen gaat moet de tekst schuin gedrukt worden. Zodra je met je muis weer van deze div af gaat moet de tekst weer normaal worden.
Als je op de div klikt moet de tekst in het Nederlands vertaald worden ("Hallo wereld!" dus). Als er dan weer opnieuw op geklikt wordt verandert de tekst weer in Engels. Dus bij elke klik verandert de taal.
Hoe vaak de tekst ook vertaald wordt, hij moet altijd schuin gedrukt worden als de muis er overheen gaat, en weer normaal als de muis van de div af gaat.
Tip: geef de div met CSS (gewoon via het style-attribuut) een achtergrond zodat je kan zien wanneer je met je muis er boven hangt en wanneer niet.
Alleen voor het toekennen van de events mag de functie document.getElementById() gebruikt worden, verder niet.

Het antwoord:

Zie code.
Twee regels code kunnen misschien wat verwarrend zijn. Namelijk regels 8 en 11, omdat er 2x een toekenning (met de =) in staat. Dit werkt als volgt: eerst wordt er een waarde aan de variabele tekst toegekend (dit gebeurt eerst omdat dit tussen haakjes staat). Daarna wordt die waarde gebruikt en worden de strings "" en "" eraan vast geplakt.
Je zou de operator = dus als een soort speciale functie kunnen zien:
function operator=(variabele, nieuweWaarde)
{
    variabele = nieuweWaarde;
    return variabele;
}

JavaScript:
  1. var tekst = "Hello world!"; // Variabele om de huidige tekst bij te houden
  2. function vertaal()
  3. {
  4. if(tekst == "Hello world!")
  5. {
  6. // Pas de huidige tekst aan
  7. // Pas daarna de innerHTML aan van this, dus het element waarvan de event af komt
  8. // Maak de tekst gelijk schuin gedrukt want als er op het element geklikt wordt moet de muis er wel boven hangen
  9. this.innerHTML = "<i>"+(tekst = "Hallo wereld!")+"</i>";
  10. }
  11. else
  12. {
  13. // Hetzelfde, maar dan met de Engelse tekst
  14. this.innerHTML = "<i>"+(tekst = "Hello world!")+"</i>";
  15. }
  16. }
  17. function maakSchuin()
  18. {
  19. this.innerHTML = "<i>"+tekst+"</i>";
  20. }
  21. function maakNormaal()
  22. {
  23. this.innerHTML = tekst;
  24. }
  25. function maakEvents()
  26. {
  27. // Ken de functies aan de juiste events toe:
  28. document.getElementById("de-div").onclick = vertaal;
  29. document.getElementById("de-div").onmouseover = maakSchuin;
  30. document.getElementById("de-div").onmouseout = maakNormaal;
  31. }
  32. window.onload = maakEvents;

HTML:
  1. <div id="de-div" style="background:#eee;">Hello world!</div>