Javascript

Javascript
Vandaag
• Samenvatting functies
• Uitwerkingen Puzzels
• Pauze();
• DOM
• Formulieren
• DOM-opdrachten
Functies
var optellen = function(){
getal1 = prompt("getal1?");
getal2 = prompt("getal2?");
antwoord = parseInt(getal1) +
parseInt(getal2);
alert(antwoord);
}
optellen();
Functies en parameters
var optellen = function( getal1, getal2){
antwoord = getal1 + getal2;
alert(antwoord);
}
optellen(4,2);
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>
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 > 10cm){
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.backgroundColor = “black”;
Methoden
• Opdracht die een object kan uitvoeren
– Voorbeeld
• document.write(“<h1>Hello World</h1>”);
Document
Document
• Soort boomstructuur waarbij elke tak van de
boom een object is welke door javascript
benadert en gemanipuleerd kan worden
DOM-opdracten
getElementById()
Vindt element in de boomstructuur met aangegeven id
getElementsByTagName()
Vindt alle elementen van de aangegeven tag
getElementsByClassName()
Vindt alle elementen waarop de CSS-klasse van
toepassing is
querySelector()
Vindt alle elementen op basis van CSS selectors
(vergelijkbaar met jQuery)
appendChild()
Voegt een child-node toe als laatste node aan een
aangegeven element
removeChild()
Verwijdert een child-node van een aangegeven element
replaceChild()
Vervang een child-node door een ander
parentNode()
Vindt het parent-element van het huidige element
nextSibling()
Vindt het volgende element op hetzelfde niveau als het
huidige element
previousSibling()
Vindt het vorige element op hetzelfde niveau als het
huidige element
insertBefore()
Voegt een node toe, voorafgaand aan een aangegeven
node
DOM opdrachten
• Selecteren met getElementById
Hele object:
– document.getElementById('divNaam')
Eigenschap (met punt notatie)
– document.getElementById('divNaam').innerHTML
– document. getElementById('invoerVeld').value
– document. getElementById('radioButton').checked
DOM opdrachten
• Uitlezen
Eigenschap (met punt notatie)
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;
DOM opdrachten
• Voorbeeld getal raden
Eindopdracht
• Voorbeeld
• Niveau's
– Niveau 1 = prompt/alert
– Niveau 2 = getElementById's
– Niveau 3 = jQuery
• 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