Opdrachten functies

De grootste

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:

De grootste van drie

Pas de HTML pagina aan zodat je een derde getal kunt ingeven en daarvan het grootste getal kunt opzoeken.

Weergeven

Klok

Een 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:

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()">

Minuten en seconden met twee cijfers weergeven

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.

Op andere pagina's gebruiken

Aangezien het weergeven van een klok ook op andere pagina's van pas kan komen, plaats je alle functies in een afzonderlijk JavaScript bestand.

Weergeven

In- en uitzoomen

Om 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:

Schrijf de functie zoom() die:

Aangezien je deze interessante functie ook op andere pagina's wilt gebruiken, zonder je de noodzakelijke JavaScript code af in een apart bestand.

Weergeven