Maak een HTML pagina met twee tekstvelden in één alinea naast elkaar.
Plaats daaronder een alinea met een knop met de tekst Bereken.
Plaats daaronder een alinea met een tekstveld met de tag Grootste getal: (zie afbeelding).
Schrijf een functie die uit twee getallen het grootste getal teruggeeft.
Zorg dat bij het klikken op de knop Bereken een functie wordt uitgevoerd die:
Het getal in het eerste tekstveld in een variabele plaatst.
Het getal in het tweede tekstveld in een variabele plaatst.
Het laatste tekstveld toont het grootste getal. Maak daarvoor gebruik van de eerder geschreven functie om het grootste getal te zoeken.
Pas de HTML pagina aan zodat je een derde getal kunt ingeven en daarvan het grootste getal kunt opzoeken.
WeergevenEen functie kan je ook aanroepen na een bepaalde tijd. We maken een klok.
Maak een pagina met voor de klok een aanpasbare alinea.
Schrijf de functie startKlok() die:
De datum van vandaag in een variabele plaats.
Het uur uit de variabele met de datum haalt en in een variabele plaatst (.getHours()).
De minuten uit de variabele met de datum haalt en in een variabele plaatst (.getMinutes()).
De seconden uit de variabele met de datum haalt en in een variabele plaatst (.getSeconds()).
Stel met behulp van deze variabelen de tijd met de notatie uu:mm:ss samen en plaats deze in de aanpasbare alinea.
Laat deze functie nogmaals na een halve seconde uitvoeren met de opdracht:
tijd = setTimeout('startKlok()',500);
setTimeout is de opdracht die in het voorbeeld de functie startKlok() na 500 milliseconden (halve seconde) laat uitvoeren. Daar deze opdracht deel uitmaakt van deze functie wordt de functie tot het afsluiten van de webpagina om de halve seconde uitgevoerd.
Nu rest ons alleen nog de functie te starten na het laden van de webpagina. Dit kan door de body tag met een onload event uit te breiden:
<body onload="startKlok()">
Bij het weergeven van de minuten en seconden worden getallen kleiner dan 10 met één cijfer weergegeven. Het weergeven van steeds twee cijfers is mooier.
Schrijf een functie waaraan je een getal doorgeeft en die getallen kleiner dan 10 laat voorafgaan door een 0 (m.a.w. 2 wordt 02 en 12 blijft 12) en de twee cijfers teruggeeft.
Gebruik deze functie om de minuten en seconden steeds met twee cijfers weer te geven.
Aangezien het weergeven van een klok ook op andere pagina's van pas kan komen, plaats je alle functies in een afzonderlijk JavaScript bestand.
WeergevenOm veel foto's op een webpagina te kunnen plaatsen, gebruiken we miniatuur weergaven van de foto's. Als je een foto beter wilt bekijken, kun je door erop te klikken de foto in ware grootte bekijken. Nogmaals klikken, verkleint de foto opnieuw.
Maak een HTML pagina met een foto met een breedte en hoogte van 25%. Daarvoor gebruik je de volgende HTML code:
<img src="paarden.jpg" style="width:25%; height:25%" onclick="afbeelding = this; zoom();" />
Zoals je ziet gebruiken we CSS om de breedte en hoogte van de foto aan te passen (1/4 of 25 % van de werkelijke grootte).
Bij het klikken op de foto krijgt de globale variabele afbeelding de waarde this. De opdracht this bevat het adres van de tag waarop je klikte (net zoals document.getElementById('idnaam') het adres van de tag met het id idnaam bevat).
Pas daarna wordt de functie zoom() uitgevoerd.
Plaats juist onder deze foto de tekst:
Klik op
de foto om in of uit te zoomen.
Schrijf de volgende JavaScript code:
Definieer een globale variabele voor de zoomfactor (als de waarde 1 is wordt ingezoomd, -1 is uitzoomen).
Definieer een globale variabele voor het adres van de afbeelding.
Schrijf de functie zoom() die:
De globale variabele met de zoomfactor op inzoomen plaatst als de breedte van de afbeelding 25% is of op uitzoomen plaats als de breedte van de afbeelding 100% is.
Tel de zoomfactor bij de afmeting (breedte) van de afbeelding.
Geef de afbeelding de nieuwe afmetingen (breedte en hoogte in percent).
Voer de functie zoom() om de 5 milliseconden uit tot de afbeelding 25% of 100% van zijn originele afmetingen bereikt.
Aangezien je deze interessante functie ook op andere pagina's wilt gebruiken, zonder je de noodzakelijke JavaScript code af in een apart bestand.
Weergeven