Javascript

Vandaag Samenvatting events Boodschappenlijstje1 Boodschappenlijstje2 Concept eindopdracht bespreken Github installaties controleren

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

Boodschappenlijstje

Boodschappenlijstje

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

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

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

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

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

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)

Puzzels  Eindopdracht

Puzzels  Eindopdracht

Eindopdracht Voorstel Social Media dienst bespreken

Github Installaties controleren

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