Javascript.

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

1 Javascript

2 Vandaag Samenvatting events Boodschappenlijstje1 Boodschappenlijstje2
Concept eindopdracht bespreken Github installaties controleren

3 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

4 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

5 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

6 Boodschappenlijstje

7 Boodschappenlijstje

8 Document Soort boomstructuur waarbij elke tak van de boom een object is welke door javascript benadert en gemanipuleerd kan worden

9 DOM opdrachten Uitlezen Een bepaalde eigenschap
var divTekst = document.getElementById('divNaam').innerHTML var invoer1 = document. getElementById('invoerVeld').value var radio1 = document. getElementById('radioButton').checked;

10 DOM opdrachten Aanpassen Eigenschap (met punt notatie)
document.getElementById('divNaam').innerHTML = "Hello world"; document. getElementById('invoerVeld').value = " "; document. getElementById('radioButton').checked = true;

11 Boodschappenlijstje Code voor knop
Eerst werking knop testen met alert() Functie toevoegen() Eerst werking functie testen met alert() Lijst vullen via innerHTML

12

13 DOM opdrachten Minder typen
Door eerst hele object in variabele op te slaan: var divje = document.getElementById('divNaam'); divje.innerHTML = "Hello world";

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

15 Puzzels  Eindopdracht

16 Puzzels  Eindopdracht

17 Eindopdracht Voorstel Social Media dienst bespreken

18 Github Installaties controleren

19 Huiswerk Codecademy oefeningen maken (zie SHL)
Functionaliteiten realiseren (zie SHL) Github synchroniseren