Javascript

Vandaag Uitwerkingen Puzzels Return waarde bij functies Events Onclick Eindopdracht

Uitwerking Opgave 4

Uitwerking Bij opgave 5 kan je radiobuttons gebruiken Maar je mag ook twee invoervelden gebruiken

Uitwerking Opgave 5

#durftevragen

Functies en parameters var optellen = function( getal1, getal2){ antwoord = getal1 + getal2; alert(antwoord); } optellen(4,2); Met parameters wordt de functie breder inzetbaar. Nu kan je functie op diverse manieren inzetten. De parameters kan je invullen met een prompt, een invoerveld, een database, etc.

Functies en return waarde var optellen = function( getal1, getal2){ antwoord = getal1 + getal2; alert(antwoord); return antwoord; } alert(optellen(4,2)); document.write(optellen(4,2)); document.getElementById('divje').innerHTML = optellen(4,2); Met return kan je een waarde terugsturen naar de plek waarde functie werd aangeroepen en kan je dan bepalen wat je met het antwoord doet.

Ideale situatie: inhoud, opmaak en interactie gescheiden

Probleem: alles in één bestand

Hier gaan we naar toe werken: scheiding van structuur, presentatie en gedrag Gestructureerde content in een html-bestand Presentatie met css in een css-bestand Gedrag in een js-bestand

Events Event Eventhandler Optreden mouseover onMouseover Als de muis over een bepaald object beweegt submit onSubmit Als de gebruiker op de button Verzenden van een formulier klikt load onLoad Als een pagina geladen is, maar voordat hij in de browser getoond wordt click onClick Als je met de muis ergens op klikt focus onFocus Als een formulierelement geselecteerd wordt (de focus krijgt) blur onBlur Als een formulierelement de focus verliest

onclick <input type="button" value="klik" onclick="optellen();" /> <script> var optellen = function(){ getal1 = prompt("getal1?"); getal2 = prompt("getal2?"); antwoord = parseInt(getal1) + parseInt(getal2); alert(antwoord); } </script> Events

onclick <input type="button" id="knop" value="klik" onclick="optellen();" /> <script> var optellen = function(){ getal1 = prompt("getal1?"); getal2 = prompt("getal2?"); antwoord = parseInt(getal1) + parseInt(getal2); alert(antwoord); } document.getElemtentById('knop').onclick = function(){ optellen(); </script> Events

Eindopdracht Voorbeeld Niveau's Code kan je hergebruiken(upgraden) Niveau 1 = prompt/alert Niveau 2 = getElementById's Niveau 3 = jQuery Code kan je hergebruiken(upgraden)

Eindopdracht Bekijk alle wireframes en functionaliteiten

Huiswerk Concept eindopdracht bedenken Codecademy oefeningen maken (zie SHL) Functionaliteiten realiseren (zie SHL) Github synchroniseren