Pas de pagina event.html aan zodat er drie knoppen staan. Elke knop start bij een klik erop een eigen functie.
De eerste knop bestaat reeds en start de functie datumWeergeven().
Schrijf een tweede functie om de lokale tijd weer te geven. Deze functie lijkt als twee druppels water op de eerste functie, maar gebruikt in de plaats van datum.toLocaleDateString() om de datum weer te geven, datum.toLocaleTimeString() om de tijd weer te geven.
Maak een knop Tijd weergeven waarbij de pas geschreven functie bij het aanklikken wordt uitgevoerd.
Maak een derde functie met bijhorende knop om de datum en de tijd weer te geven. Gebruik in de functie voor het weergeven van de datum en de tijd datum.toLocaleString().
De Kop 1 (h1) bevat nu Datum weergeven.
Verander de inhoud van de h1 tag naar Datum en/of tijd weergeven.
Om de kop bij het klikken op een knop aan te passen:
Geef je aan de kop tag (h1) het id kop.
Voeg je aan de functie datumWeergeven de volgende opdracht toe:
document.getElementById("kop").innerHTML = "Datum weergeven";
Verander naargelang de knop waarop geklikt wordt, de kop naar Tijd weergeven of Datum en tijd weergeven.
WeergevenVerplaats alle JavaScript code naar een apart bestand en sla dit bestand op als datum.js.
Zorg dat de pagina event.html gebruik maakt van het externe JavaScript bestand datum.js.
Alle oplossingen van opdrachten staan op het internet.
Bij het klikken op een tabblad verschijnt de inhoud van het tabblad en verdwijnt de inhoud van de andere tabbladen.
Met de volgende HTML code maak je een tabblad:
<span style="cursor:pointer" onclick="tabblad1();">HTML </span>|
De volgende HTML code bevat de onzichtbare inhoud van het eerste tabblad:
<div id="tab1" style="border:thin solid #000; padding: 0px 5px; display:none">HTML verzorgt de structuur en de inhoud van de webpagina.</div>
Schrijf zelf de JavaScript functie om de inhoud van het eerste tabblad zichtbaar te maken en alle andere tabbladen onzichtbaar te maken als je weet dat de opdracht
document.getElementById("tab1").style.display="";
het eerste tabblad laat verschijnen en de opdracht
document.getElementById("tab1").style.display="none";
het eerste tabblad laat verdwijnen.
Naast het tabblad HTML, maak je een tabblad
CSS met de tekst CSS is verantwoordelijk voor de opmaak,
JavaScript met de tekst JavaScript voegt functionaliteit toe,
PHP met de tekst PHP maakt dynamische onderdelen op de webserver aan.
Plaats de JavaScript code in een extern bestand.