Javascript - antwoorden

Maat: px

Weergave met pagina beginnen:

Download "Javascript - antwoorden"

Fien van de Velde
7 jaren geleden
Aantal bezoeken:

1 informatica Javascript - antwoorden

2 Op dit lesmateriaal is een Creative Commons licentie van toepassing Remie Woudt 2013 François Vonk (Javascript geïsoleerd en major edits)

3 Opdracht 1... Opdracht 2 Wat gebeurt er in dit programma als tijdstip de waarde 10 krijgt? Bij exact de waarde 10 zal hij Hallo Wereld! afdrukken. Opdracht 3 Opdracht3.html maken. Controleer goed op inspringen. Code kan gekopieerd worden uit de reader. Opdracht 4 Opdracht4.html maken. Controleer goed op inspringen. Code kan gekopieerd worden uit de reader. Opdracht 5 Opdracht5.html maken. Controleer goed op inspringen. Code kan gekopieerd worden uit de reader. Opdracht 6 Opdracht6.html maken. Controleer goed op inspringen. Code kan gekopieerd worden uit de reader. Opdracht 7 Opdracht7.html maken. Controleer goed op inspringen. Code kan gekopieerd worden uit de reader. Opdracht 8 <!DOCTYPE html> <html lang="nl"> <head> <meta charset="utf-8" /> <title>samenvoegen</title> </head> <body> <form name="mijnform"> <input type="tekst" name="voornaam" value=""> <input type="tekst" name="voorvoegsel" value=""> <input type="tekst" name="achternaam" value=""> <input type="button" value="voeg samen" onclick="alert(voornaam.value+' '+voorvoegsel.value+' '+ achternaam.value)"> </form> </body> </html>

4 Opdracht 9 Opdracht9.html en opdracht9.css maken. Controleer goed op inspringen. Code kan gekopieerd worden uit de reader. Opdracht 10 Opdracht10.html maken. Controleer goed op inspringen. Code kan gekopieerd worden uit de reader. Opdracht 11 <!DOCTYPE html> <html lang="nl"> <head> <meta charset="utf-8" /> <title>eindbedrag uitrekenen</title> <script type="text/javascript"> function berekening() var beginbedr = parsefloat(document.mijnform.beginbedrag.value); var rente = parsefloat(document.mijnform.rente.value); var jaren = parsefloat(document.mijnform.aantaljaren.value); var resultaat = beginbedr * Math.pow((100 + rente) / 100, jaren); alert("bij " + rente + "% rente wordt " + beginbedr + " na " + jaren + " jaar: " + resultaat); </script> </head> <body> <form name="mijnform"> <input type="tekst" name="beginbedrag" value=""> Beginbedrag <input type="tekst" name="aantaljaren" value=""> Aantal jaren <input type="tekst" name="rente" value=""> Rente in procenten <input type="button" value="bereken" onclick="berekening()"> </form> </body> </html>

5 Opdracht 12 <!DOCTYPE html> <html lang="nl"> <head> <meta charset="utf-8"> <title>valuta omrekenen</title> <script type="text/javascript"> function berekenvaluta(getal) var dollarkoers = 1.32; var yenkoers = 112; var pondkoers = 0.84; var geld = 0; // sla het begin bedrag op zodat de code korter wordt var bedrag = parsefloat(document.valutaform.getal.value); if (document.valutaform.valuta1.checked) geld = bedrag * dollarkoers; alert('voor ' + bedrag + ' euro krijg je ' + geld + ' dollar'); else if (document.valutaform.valuta2.checked) geld = bedrag / dollarkoers; alert('voor ' + bedrag + ' dollar krijg je ' + geld + ' euro'); else if (document.valutaform.valuta3.checked) geld = bedrag * yenkoers; alert('voor ' + bedrag + ' euro krijg je ' + geld + ' yen'); else if (document.valutaform.valuta4.checked) geld = bedrag / yenkoers; alert('voor ' + bedrag + ' yen krijg je ' + geld + ' euro'); else if (document.valutaform.valuta5.checked) geld = bedrag * pondkoers; alert('voor ' + bedrag + ' euro krijg je ' + geld + ' pond'); else if (document.valutaform.valuta6.checked) geld = bedrag / pondkoers; alert('voor ' + bedrag + ' pond krijg je ' + geld + ' euro'); </script> </head> <body> <form name="valutaform"> <input type="radio" name="valuta" id="valuta1" checked> Van euro naar dollar <input type="radio" name="valuta" id="valuta2"> Van dollar naar euro <input type="radio" name="valuta" id="valuta3"> Van euro naar yen

6 <input type="radio" name="valuta" id="valuta4"> Van yen naar euro <input type="radio" name="valuta" id="valuta5"> Van euro naar pond <input type="radio" name="valuta" id="valuta6"> Van pond naar euro Geef het bedrag <input type="tekst" name="getal"> <input type="button" value="bereken" onclick="berekenvaluta()"> </form> </body> </html> Opdracht 13-1 Opdracht13.html en opdracht13.css maken. Controleer goed op inspringen. Opdracht 13-2 Opdracht13.html aanpassen. <link rel="stylesheet" type="text/css" href="opdracht13.css" /> Controleer goed op inspringen. Code kan gekopieerd worden uit de reader. Opdracht 13-3 Opdracht13.css aanpassen. Controleer goed op inspringen. Code kan gekopieerd worden uit de reader. Opdracht 13-4 Opdracht13.html en opdracht13.css aanpassen. Controleer goed op inspringen. Code kan gekopieerd worden uit de reader. Opdracht 13-5 Opdracht13.html aanpassen. Controleer goed op inspringen. Code kan gekopieerd worden uit de reader. Opdracht 14 a. Verklaar wat er gebeurt. b. De afbeeldingen zijn 300 pixels breed, de body is 940 pixels breed. Waarom lijkt het dan toch niet te passen? c. Bedenk twee manieren om ze wel passend te maken. a. De afbeeldingen komen naast elkaar b. De breedte is 940 pixels maar er is ook 44 pixels padding gedefinieerd. Dat wil zeggen dat er 88 pixels (de padding zit aan twee kanten) van de breedte afvallen. Voor de plaatjes zijn dus maar 852 pixels over en dus past het niet. c. Je kunt of de breedte 48 pixels groter maken of de padding 24 pixels (de padding zit aan twee kanten) kleiner maken.

7 Opdracht 15 Een redelijke rechtdoorzee methode staat hieronder. Het nadeel is dat je de code steeds aan moet passen als je meer soorten groente of fruit toe gaat voegen. Dat leidt doorgaans tot fouten en is irritant omdat het steeds weer tijd kost. <script type="text/javascript"> function laatzien(divid) var appels = document.getelementbyid("appels"); var peren = document.getelementbyid("peren"); var bananen = document.getelementbyid("bananen"); var item = document.getelementbyid(divid); if (item.id == "Appels") appels.classname="zichtbaar"; peren.classname="verstopt"; bananen.classname="verstopt"; if (item.id == "Peren") appels.classname="verstopt"; peren.classname="zichtbaar"; bananen.classname="verstopt"; if (item.id == "Bananen") appels.classname="verstopt"; peren.classname="verstopt"; bananen.classname="zichtbaar"; </script> Een betere, maar ook moeilijkere methode is gebruik maken van het feit dat DOM een boomstructuur is waarin ieder element een parent (vader/moeder), child (kind) of sibling (broer/zus) kan hebben. We krijgen via de parameter het id door van de div die we moeten veranderen. De andere divs zijn dus siblings van de div die we doorkrijgen. We kunnen met speciale DOM eigenschappen van elementen, in ons geval next- Sibling en previoussibling, alle siblings van het item dat we doorkrijgen vinden. Dat ziet er als volgt uit. <script type="text/javascript"> function laatzien(divid) var item = document.getelementbyid(divid); // maak alle siblings (broer/zus) van het item onzichtbaar var next = item.nextsibling; while (next) next.classname = "verstopt"; next = next.nextsibling; var prev = item.previoussibling while (prev) prev.classname = "verstopt"; prev = prev.previoussibling;

8 // maak het item zichtbaar item.classname = "zichtbaar"; </script> Als er geen sibling meer is dan geeft DOM als waarde NULL terug. Javascript interpreteert NULL hetzelfde als false. Dus als er geen sibling meer is dan stop de while-loop zoals we geleerd hebben. Een while-loop stop wanneer de conditie false wordt. Je zet hier dus alle siblings op verstopt ongeacht hoeveel er dat zijn en hoe ze heten.

Vergelijkbare documenten

atica inform Javascript

atica inform Javascript informatica Javascript Op dit lesmateriaal is een Creative Commons licentie van toepassing. 2010 Remie Woudt remie.woudt@gmail.com 2013 François Vonk (Javascript geïsoleerd en edits) Inhoudsopgave 1programmeren...4