Javascript.

Presentatie over: "Javascript."— Transcript van de presentatie:

1 Javascript

2 Vandaag Uitwerkingen Puzzels Return waarde bij functies Events Onclick
Eindopdracht

3 Uitwerking Opgave 4

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

5 Uitwerking Opgave 5

6 #durftevragen

7 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.

8 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.

9 Ideale situatie: inhoud, opmaak en interactie gescheiden

10 Probleem: alles in één bestand

11 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

12 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

13 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

14 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

15

16 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)

17 Eindopdracht Bekijk alle wireframes en functionaliteiten

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