Javascript Vandaag Samenvatting functies Uitwerkingen Puzzels Pauze DOM

Javascript

Vandaag • Samenvatting functies • Uitwerkingen Puzzels • Pauze(); • DOM • Formulieren • DOM-opdrachten

Functies var optellen = function(){ getal 1 = prompt("getal 1? "); getal 2 = prompt("getal 2? "); antwoord = parse. Int(getal 1) + parse. Int(getal 2); alert(antwoord); } optellen();

Functies en parameters var optellen = function( getal 1, getal 2){ antwoord = getal 1 + getal 2; alert(antwoord); } optellen(4, 2);

onclick <input type="button" value="klik" onclick="optellen(); " /> <script> var optellen = function(){ getal 1 = prompt("getal 1? "); getal 2 = prompt("getal 2? "); antwoord = parse. Int(getal 1) + parse. Int(getal 2); alert(antwoord); } } </script>

Puzzels • Uitwerking opgave 1, 2 en 3

Pauze var pauze = function(vloeistof, brandstof){ alert("Drink " + vloeistof); alert("Eet " + brandstof); } pauze(koffie, brood);

Robot Harry kijken(); if(afstand > 10 cm){ rechtdoorlopen(); Else naarlinksdraaien();

DOM Het Document Object Model is een platformen taalonafhankelijke interface die er voort zorgt dat programma’s en scripts de inhoud, structuur en stijl van het document kunnen bewerken

Objecten object functie/betekenis navigator Informatie over de browser zelf, zoals welke versie, welk besturingssysteem, etc window Informatie over het browservenster, zoals dimensie, status, etc document Het HTML-document zelf (alles wat in het venster getoond wordt) history Lijst van bezochte pagina’s location Huidige url forms Representeert het formulier op de webpagina

Eigenschappen • Objecten vertellen iets over de componenten waaruit een webpagina is opgebouwd. • Eigenschappen vertellen iets over de manier waarop die componenten zijn vormgegeven – Voorbeeld document. body. style. background. Color = “black”;

Methoden • Opdracht die een object kan uitvoeren – Voorbeeld • document. write(“<h 1>Hello World</h 1>”);

Document

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

DOM-opdracten get. Element. By. Id() Vindt element in de boomstructuur met aangegeven id get. Elements. By. Tag. Name() Vindt alle elementen van de aangegeven tag get. Elements. By. Class. Name() Vindt alle elementen waarop de CSS-klasse van toepassing is query. Selector() Vindt alle elementen op basis van CSS selectors (vergelijkbaar met j. Query) append. Child() Voegt een child-node toe als laatste node aan een aangegeven element remove. Child() Verwijdert een child-node van een aangegeven element replace. Child() Vervang een child-node door een ander parent. Node() Vindt het parent-element van het huidige element next. Sibling() Vindt het volgende element op hetzelfde niveau als het huidige element previous. Sibling() Vindt het vorige element op hetzelfde niveau als het huidige element insert. Before() Voegt een node toe, voorafgaand aan een aangegeven node

DOM opdrachten • Selecteren met get. Element. By. Id Hele object: – document. get. Element. By. Id('div. Naam') Eigenschap (met punt notatie) – document. get. Element. By. Id('div. Naam'). inner. HTML – document. get. Element. By. Id('invoer. Veld'). value – document. get. Element. By. Id('radio. Button'). checked

DOM opdrachten • Uitlezen Eigenschap (met punt notatie) var div. Tekst = document. get. Element. By. Id('div. Naam'). inner. HTML var invoer 1 = document. get. Element. By. Id('invoer. Veld'). value var radio 1 = document. get. Element. By. Id('radio. Button'). checked;

DOM opdrachten • Aanpassen Eigenschap (met punt notatie) – document. get. Element. By. Id('div. Naam'). inner. HTML = "Hello world"; – document. get. Element. By. Id('invoer. Veld'). value = " "; – document. get. Element. By. Id('radio. Button'). checked = true;

DOM opdrachten • Voorbeeld getal raden

Eindopdracht • Voorbeeld • Niveau's – Niveau 1 = prompt/alert – Niveau 2 = get. Element. By. Id's – Niveau 3 = j. Query • Code kan je hergebruiken(upgraden)

Eindopdracht • Bekijk alle wireframes en functionaliteiten • Denk alvast na over een Social Media dienst

Huiswerk • Puzzels – opgave 4 en 5 (af)maken • Codecademy oefeningen maken (zie SHL) • Functionaliteiten realiseren (zie SHL) • Github synchroniseren

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