Video 6: Javascript interactief

 

Opdracht 6.1: leuk…

Stel je voor ik wil het volgende stukje code groeperen onder de naam “VertelMop”.

alert("Sam en Moos lopen met z'n tweeën door de Kalverstraat");
alert("Vraagt Sam aan Moos:");
alert("'Mag ik in het midden lopen?'");

Wat voor code moet ik om deze regels plaatsen om dat te bereiken?

Geef met de slider aan hoe tevreden je bent met je uitwerking en mail je code.
  50%  
Geef eerst aan hoe tevreden je bent met je uitwerking!

Opdracht 6.2: …doen

Als ik de de bovenstaande regels samen de naam “VertelMop” heb gegeven, hoe zorg ik ervoor dat dat geheel dan ook wordt uitgevoerd?

Geef met de slider aan hoe tevreden je bent met je uitwerking en mail je code.
  50%  
Geef eerst aan hoe tevreden je bent met je uitwerking!

Vraag 6.3: getElementById()?

Kun je beschrijven wat, in Javascript, de betekenis van getElementById() is?

[ Mail je antwoord … ]

Opdracht 6.4: moppen tappen

Maak code die, uitgaande van de voorbeeld-HTML van Video 5, er voor zorgt dat als iemand op het groene blok klikt, de inhoud van het rode blok verandert in jouw favoriete mop; en dat, omgekeerd, als ik op het rode blok klik, de inhoud van het groene blok een andere mop krijgt.

(tip: als je in HTML twee regels onder elkaar wilt zetten, dan is de <BR> tag een handige om er tussen te zetten).

Geef met de slider aan hoe tevreden je bent met je uitwerking en mail je code.
  50%  
Geef eerst aan hoe tevreden je bent met je uitwerking!

Opdrachten 6.5, 6.6 en 6.7: plaatjes veranderen

Van de volgende opdrachtjes hoef je alleen de 6.5 te mailen. Opdrachten 6.6 en 6.7 zijn voor de bonus 🙂

  1. Zorg ervoor dat je twee plaatjes van gelijke afmetingen hebt (ik noem ze even afbeelding A en afbeelding B), en zet die in dezelfde directory als waar je de bovenstaande voorbeeld HTML hebt opgeslagen.
  2. Vervang de inhoud van het groene blok door een IMG tag die afbeelding A toont. Geef de IMG tag een id-attribuut. Je hebt dan waarschijnlijk zoiets als dit in de HTML staan: 
    <IMG id="plaatje" src="abeeldingA.png">
  3. Open de nieuwe HTML-file in Firefox, en voer, in de FireBug console, de volgende code uit: 
    document.getElementById("plaatje").src = "afbeeldingB.png"

    (Waarbij je “plaatje” en “afbeeldingB.png” vervangt door je eigen namen)

  4. Zorg er nu voor dat, als je op het plaatje klikt, het plaatje verandert.
    Geef met de slider aan hoe tevreden je bent met je uitwerking en mail je code.
      50%  
    Geef eerst aan hoe tevreden je bent met je uitwerking!
  5. Voor de bonus: kun je er voor zorgen dat, als ik 1 keer klik, dat-ie verandert na afbeelding B, klik ik nogeens, dan verandert-ie weer naar afbeelding A, klik ik weer dan weer naar afbeelding B, enzovoorts?
    Geef met de slider aan hoe tevreden je bent met je uitwerking en mail je code.
      50%  
    Geef eerst aan hoe tevreden je bent met je uitwerking!
  6. Meer bonus: Als je i.p.v. “onclick” de namen “onmouseover” en “onmouseout” gebruikt, dan kun je je functies laten uitvoeren in reactie op bewegingen van de muis over het plaatje. Gebruik dat om het plaatje te veranderen als de muis over het plaatje ‘hangt’, en weer terug verandert als de muis niet meer boven het plaatje hangt.
    Geef met de slider aan hoe tevreden je bent met je uitwerking en mail je code.
      50%  
    Geef eerst aan hoe tevreden je bent met je uitwerking!