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 10 - Opdracht 7

De opdracht:

Maak een tabel waarin elke keer dat de muiscursor over een cel heen beweegt de achtergrond daarvan zwart wordt en de waarde in de cel (in eerste instantie 0) opgehoogd wordt.
Bij het verlaten van de cel moet de achtergrond weer wit worden.
Maak gebruik van this.

Het antwoord:

Zie code.

JavaScript:
  1. // Functie voor wanneer de muis de cel verlaat
  2. function out()
  3. {
  4. // Verander de kleuren, via de CSS-stijl
  5. this.style.backgroundColor = "#fff";
  6. this.style.color = "#000";
  7. }
  8.  
  9. // Functie voor wanneer de muis over de cel heen beweegt
  10. function over()
  11. {
  12. // Verander de kleuren, via de CSS-stijl
  13. this.style.backgroundColor = "#000";
  14. this.style.color = "#fff";
  15.  
  16. // Verhoog de waarde in de cel met 1
  17. ++this.innerHTML;
  18. }
  19.  
  20. // Alle events initialiseren
  21. function initEvents()
  22. {
  23. // Sla alle td's in het document op in een array
  24. var tds = document.getElementsByTagName("td");
  25. // Loop die array van td's langs
  26. for(var i = 0; i < tds.length; ++i)
  27. {
  28. // Ken events toe aan de huidige td
  29. tds[i].onmouseover = over;
  30. tds[i].onmouseout = out;
  31. }
  32. }
  33. window.onload = initEvents;

HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
  3. <head>
  4. <title>Celkleur volgt muis</title>
  5. <style type="text/css">
  6. table
  7. {
  8. border: 1px solid #000;
  9. }
  10. td
  11. {
  12. border: 1px solid #000;
  13. font-size: 48px;
  14. width: 75px;
  15. height: 75px;
  16. text-align: center;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <p>Beweeg met de muiscursor over de cellen</p>
  22. <table>
  23. <tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
  24. <tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
  25. <tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
  26. <tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
  27. <tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
  28. <tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
  29. </table>
  30. </body>
  31. </html>