Hand-out Introduction to Programming, werkcollege 7 Alex Reuneker 2013

Maat: px

Weergave met pagina beginnen:

Download "Hand-out Introduction to Programming, werkcollege 7 Alex Reuneker 2013"

Francisca van Beek
7 jaren geleden
Aantal bezoeken:

1 Hand-out Introduction to Programming, werkcollege 7 Alex Reuneker (a.reuneker@hhs.nl), Document Object Model (DOM) DOM: DOM staat voor Document Object Model. Het DOM is een model van webpagina s waarin elk element op de pagina wordt vertegenwoordigd. Het DOM is voor te stellen als een boom waarin de elementen zich hiërarchisch tot elkaar verhouden. Dit is duidelijk te zien in het onderstaande voorbeeld. <title>dom-voorbeeld</title> <body> <h1>introduction</h1> <a href= page2.html >Click here</a> Document Root element: Element: Element: <body> Element: <title> Element: <h1> Element: <a> Attribute: href Text: DOM- Text: Text: Click here Value: voorbeeld Introduction page2.html Figuur 1. DOM-boom bij HTML-code Nodes: Attributes: Elk vakje in het bovenstaande figuur wordt een node (knoop) genoemd. Zoals goed te zien is, verhouden de nodes zich hiërarchisch tot elkaar. De document node omvat alle onderliggende nodes en is daarmee de parent node van het root element (html). Zoals je inmiddels weet, bestaat een HTML-node altijd uit twee nodes van gelijke orde, te weten head en body. (Nodes waarbij element staat en die voorzien zijn van punthaken corresponderen met tags in het HTML-document.) Attributes zijn attributen bij nodes. (Anders gezegd: attributen bij HTML-tags.) Zo heeft in het bovenstaande voorbeeld de link (element: <a>) het attribuut href waarin zich de doellocatie van de link (page2.html) bevindt. 1

2 Parents en children: Adjacent nodes: Parent nodes zijn nodes die andere nodes onder zich hebben, zoals head en body in het voorbeeld. De title-, h1- en a-nodes zijn child nodes. Ook de text nodes onder title, h1 en a zijn child nodes. Adjacent nodes (aangrenzende knopen) zijn nodes van gelijke orde in de hiërarchie. In het bovenstaande voorbeeld zijn de head- en body-knopen adjacent nodes, evenals de h1- en a- knopen. 2. DOM en JavaScript Nut van DOM: getelementbyid: Het DOM is van groot belang voor JavaScript. Alle nodes en bijbehorende attributen kunnen namelijk met behulp van JavaScript worden opgevraagd en gemanipuleerd. Met de getelementbyid-methode kan een node worden geïdentificeerd met behulp van een id. Omdat een id-attribuut uniek moet zijn, kan met deze methode altijd maar één node worden aangesproken. alert(document.getelementbyid( intro ).value); document.getelementbyid( intro ).value = Hoofdstuk 1 ; getelementbytag-: Name: Op de eerste regel wordt het attribuut value van de node met id intro opgevraagd en getoond in een alert-box. Op de tweede regel wordt het value-attribuut gevuld met de tekst Hoofdstuk 1. Ook andere attributen, zoals name, href, class etc. kunnen worden opgevraagd en aangepast. Met getelementbytagname kan een node worden geïdentificeerd met behulp van een tag. Zo kunnen bijvoorbeeld alle a-tags (links) worden aangesproken. Let erop dat het resultaat van deze methode een array is met daarin alle a-nodes uit de DOM-boom. var elements = document.getelementsbytagname( a ); alert(elements.length); getelementsbyclass- Met getelementsbyclassname kan een node worden geïdentificeerd met behulp Name: van een klasse. Zo kunnen bijvoorbeeld alle elementen met de klasse belangrijk worden aangesproken. Let erop dat het resultaat van deze methode een array is met daarin alle nodes uit de DOM-boom die bij het attribuut class de waarde belangrijk hebben. var elements = document.getelementsbyclassname( belangrijk ); alert(elements.length); 2

3 innerhtml: Met de innerhtml-methode kunnen text-nodes worden opgevraagd en gemanipuleerd, zoals in onderstaand voorbeeld. <title>dom-voorbeeld</title> <body onload="alert(document.getelementbyid('intro').innerhtml);"> <h1 id="intro">introduction</h1> <a href="page2.html">click here</a> In het onload-attribuut wordt met de regel document.getelementbyid( intro ).innerhtml de inhoud van het element met id intro opgehaald. De alert-box toont deze waarde vervolgens op het scherm. Als er de volgende regel had gestaan, dan was na het laden van de body-sectie de innerhtml van het element met id intro aangepast. <body onload="document.getelementbyid('intro').innerhtml = 'Hoofdstuk 1';"> 3

4 appendchild: Met appendchild kan een nieuwe node aan een parent-node worden toegevoegd. Element: <body> Element: <ul> Attribute: id Element: button Attribute: onclick Element: <li> Value: mylist Text: Voeg item toe Value: additem(); Text: Koffie Figuur 2. DOM-boom bij HTML-code met unordered list. <meta charset="utf=8" /> <script type="text/javascript"> function additem() { var node=document.createelement("li"); //Maak een nieuwe variabele node met //daarin een lijstitem. var textnode=document.createtextnode("thee"); //Maak een nieuwe variabel //textnode met daarin een node //met de string Thee node.appendchild(textnode); //Voeg aan node een child toe met daarin //textnode. document.getelementbyid("mylist").appendchild(node); //Voeg de node aan mylist //toe. </script> <body> <ul id="mylist"> <li>koffie</li> </ul> <button onclick="additem();">voeg item toe</button> Element: <body> Element: <ul> Attribute: id Element: button Attribute: onclick Element: <li> Element: <li> Value: mylist Text: Voeg item toe Value: additem(); Text: Koffie Text: Thee Figuur 3. DOM-boom bij HTML-code met unordered list en toegevoegd lijstitem. 4

5 removechild: Met removechild kan een child node uit het DOM worden verwijderd. In het onderstaande voorbeeld wordt het eerste lijstitem uit de unordered list met id mylist verwijderd. var node = document.getelementbyid( mylist ); node.removechild(node.firstchild); Zie ook replacechild, insertbefore, createattribute en createelement. 3. Onfocus en onblur events en formuliervalidatie Onfocus: Het onfocus event vindt plaats wanneer een element op een webpagina geselecteerd wordt ( in focus komt ). In het onderstaande voorbeeld wordt het formulierveld geleegd wanneer het in focus komt. <input type="text" name="firstname" id="firstname" value='vul uw naam in' onfocus="this.value=' ';" /> Onblur: Het onblur event vindt plaats wanneer een element op een webpagina focus verliest. In het onderstaande voorbeeld wordt het formulierveld gecontroleerd wanneer het focus verliest. <input type="text" name="telephone" id="telephone" value=vul uw tel.nummer in' onblur="checktel(this);" /> Onchange: Het onchange event vindt plaats wanneer de inhoud van een element op een webpagina verandert. In het onderstaande voorbeeld wordt het formulierveld gecontroleerd wanneer de inhoud ervan verandert. <input type="text" name="amount" id="amount" value='vul een bedrag in' onblur="checknumber(this);" /> 5

6 Formuliervalidatie: De bovenstaande events zijn goed te gebruiken om een formulierveld te valideren. Hieronder een voorbeeld. <meta charset="utf=8" /> <script type="text/javascript"> function validatenonempty(inputfield, errormessage) { if(inputfield.value.length == 0) { errormessage.innerhtml = "The field has not been filled in."; else { errormessage.innerhtml = "OK"; </script> <body> <label for="firstname">first name: </label> <input type="text" name="firstname" id="firstname" onblur="validatenonempty(this, document.getelementbyid('firstnameerror'));" /> <span id="firstnameerror" class="error"></span> <br /> <label for="lastname">last name: </label> <input type="text" name="lastname" id="lastname" onblur="validatenonempty(this, document.getelementbyid('lastnameerror'));" /> <span id="lastnameerror" class="error"></span> Figuur 4. Formuliervalidatie. Bronnen Morrison, Michael (2008) Head First JavaScript. Sebastopol: O Reilly. 6

Vergelijkbare documenten

Les 9: formulier controle met javascript.

Les 9: formulier controle met javascript. Javascript is erg veel gebruikt bij internet toepassingen. In tegenstelling tot PHP, wat een server side scripting is, is java client side scripting. Dwz, niet