Katholieke Hogeschool Zuid-West-Vlaanderen

Studiegebied handelswetenschappen en bedrijfskunde Industriële wetenschappen en technologie opleiding van één cyclus

DEPARTEMENT VHTI VRIJ HOGER INSTITUUT VOOR TECHNOLOGIE & INFORMATICA Doorniksesteenweg 145 8500 KORTRIJK Tel. : (056)26 41 20 Fax : (056)21 98 67 e-mail : [email protected]

Lab Multimedia & Webtechnologie Javascript

Opleiding TOEGEPASTE INFORMATICA 1ste jaar

CURSUS JAVASCRIPT

Cursus Javascript

3

1

INLEIDING

De voorkant van een website rust op drie poten: structuur, presentatie en gedrag, oftewel XHTML, CSS en JavaScript. Deze drie poten dienen goed met elkaar samen te werken en strikt van elkaar gescheiden te zijn. Klinkt tegenstrijdig, maar dat is het niet. Strikt gescheiden betekent dat elke poot zijn eigen plek heeft: .html bestanden voor de structuur, een .css bestand voor de presentatie en een .js bestand voor het gedrag. Een beetje site bestaat uit tientallen XHTML-pagina's, maar als al deze pagina's naar dezelfde .css en .js bestanden linken, kun je door een paar regels code te veranderen de presentatie of het gedrag van de gehele site wijzigen. Strikte scheiding vereenvoudigt dus het onderhoud van de site. ECMAScript, een standaard van ECMA, is een programmeertaal die toelaat in een web browser berekeningen uit te voeren en objecten te manipuleren. Deze standaard is ontstaan uit Javascript (van Netscape) en JScript (van Microsoft) met als doel incompatibiliteit van die twee talen uit de wereld te helpen. Een website die Javascript gebruikt, werkt namelijk enkel volledig in Netscape Navigator, en een website die JScript gebruikt enkel in Internet Explorer. De derde versie van ECMAScript is van 1999. Gebruik van ECMAScript voor scripts garandeert dat de bedoelde functionaliteit in zoveel mogelijk browsers werkt. Javascript (ECMAScript) is een Object Oriented Programming taal. Dit wil zeggen dat men bestaande OBJECTEN en hun PROPERTIES gaat aanspreken of dat men er nieuwe gaat creëren. Wat zijn objecten ? „ „ „ „ „

een document een button een beeld een link ...

Alle objecten hebben PROPERTIES Wat zijn properties ? „ „ „ „ „

de achtergrondkleur van een document de grootte van een knop de transparantie van een beeld de relatieve of absolute referentie van een link ...

„ „ „ „ „

een document kan worden geopend of gesloten op een knop kunnen we klikken afbeeldingen kunnen door er op te klikken een pagina openen er op klikken zal u naar een andere pagina brengen ...

Wat zijn methods ?

Cursus Javascript

4

Wat zijn events ? „ „ „ „ „ „ „

onClick OnMouseOver OnMouseOut OnFocus OnBlur OnLoad OnUnLoad

EVENTS zullen de functies "uitoefenen" bv. We klikken op een knop waaraan de functie open een dialoogvenster, hangt.

Cursus Javascript

5

2

DE EERSTE STAPPEN

Javascript is ontworpen om aan de html taal meer interactiviteit te geven. Html en Javascript gaan dikwijls samen. Dus wordt er verondersteld dat je de html (xhtml) taal beheerst. Wat is Javascript nu eigenlijk? Javascript is een scriptingtaal, wat wil zeggen dat er een aantal objecten kunnen worden aangesproken, en dat er nieuwe kunnen worden aangemaakt. Met andere woorden, we bouwen niet alles op uit het niets, wat in een programmeertaal wel het geval is. Javascript moet altijd met een browser samenwerken: Internet Explorer, Netscape, ... Deze zullen de html elementen en de Javascript-instructies ontleden en omzetten. Zoals we een xhtml document steeds beginnen met de tags <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

Zo zullen we een script steeds tussen de twee volgende tags plaatsen <script type="text/javascript">

Al wat tussen deze twee tags vervat zit, is script-code. We zullen een eerste oefening doornemen. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //

We zien dat de script-tags tussen de en de worden geplaatst. Maar men kan ze eveneens na de zetten. Wanneer we een XHTML-pagina willen valideren, kan het gebeuren dat het script een onbekend aantal fouten oplevert, omdat de validator het script wil controleren op XHTML-compatibiliteit. Wil je toch de code in de pagina plaatsen, en niet in een extern bestand (.js) plaatsen, maak dan gebruik van de CDATA tag. Deze zorgt ervoor dat de XHTML-parser het script niet controleert. Met andere woorden, de validator slaat dit deel over. Je gebruikt CDATA op de volgende manier:

Cursus Javascript

6

<script type="text/javascript"> //

We zullen nu het bovenstaande script ontleden : Document is het object writeln Mijn eerste Javascript

is de functie van het object is de parameter van de functie van het object

Met andere woorden, we zeggen aan de browser dat hij "Mijn eerste Javascript" moet schrijven in het huidige, actieve document. We zullen nog een oefening maken. We wensen in ons document "Hello" te schrijven. document.writeln("Hello");

We gaan nog een stap verder, we willen dat Hello met de

heading wordt weergegeven. We zetten onder het voorgaande: document.writeln("

Hello

");

Hier zien we duidelijk dat xhtml en Javascript elkaar aanvullen. We gaan nog een stap verder. We zetten onder de twee voorgaande lijnen: (niet vergeten iedere lijn af te sluiten met een puntkomma ; document.fgColor="#ff0000";

Hier zeggen we dat de voorgrondkleur (fgColor= foreground color), die een eigenschap van het object document is, rood moet zijn. De RGB (Rood Groen Blauw) kleur rood wordt hier met een hexadecimale waarde aangeduid: ff0000 = 255 000 000. Als er nu een tekst in de body verschijnt, zal deze de rode kleur krijgen. Even samenvatten. • Javascript werkt samen met html • Javascript wordt tussen de tags of de tags gezet • In Javascript zijn er verschillende objecten, die we kunnen oproepen • Al deze objecten hebben functies, parameters, properties enz.. • Door deze in de juiste volgorde te zetten geven we instructies door Moet het steeds tekst zijn ? Neen, natuurlijk niet. Bekijk het volgende voorbeeld. document.writeln("");

Cursus Javascript

7

Er moet natuurlijk een afbeelding met de naam "bos.gif" bestaan. Dit zal in de pagina getoond worden.

2.1

Het document-object

Bij het openen van het xhtml-bestand met dit script erin zal de tekening bos.gif worden getoond. Natuurlijk moet je zeker zijn dat er een figuur met de naam bos.gif in dezelfde map staat als je html-pagina. Nu gaan we nog een stap verder: we zullen tekst en tekening samen in een script zetten. Misschien heb je al opgemerkt dat er steeds een ; (punt-komma) achter een instructie staat. Dit is om het einde van die instructie aan te tonen. document.writeln(""); document.writeln("Hello") ; document.fgColor="#ff0000" ;

En wat zien we? Eerst onze tekening en dan de woorden HELLO in het rood. We brengen een lichte verandering aan, in die zin dat we de tekst die moet verschijnen niet in het script zelf zetten maar in de body van het document. We krijgen hetzelfde resultaat. Om het overzichtelijk te maken zien we hieronder de twee voorbeelden, volledig uitgewerkt. Dus eerst het voorgaande voorbeeld waar de tekst (Hello) tussen de script tags staat, en dan het nieuwe voorbeeld waar de tekst "Hello" tussen de body tags staat. Voorbeeld 1

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //"); document.writeln("Hello"); document.fgColor="#ff0000"; //]]> Voorbeeld 2

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //"); document.fgColor="#ff0000"; //]]>

Cursus Javascript

8

Hello

De volgende stap is het aanroepen van het script op het moment dat wij dit wensen, dus niet automatisch bij het openen van de pagina. Dit doen we door van het geheel van de instructies een FUNCTIE te maken, deze een naam te geven en vervolgens via een button op te roepen. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //"); document.writeln("Hello"); document.fgColor="#ff0000"; } //]]>

Er gebeurt niets. Pas als we op de knop klikken, zien we de afbeelding en de rode tekst. Verder merken we op dat alle FUNCTIE-instructies tussen { } accolades staan. Dit is zeer belangrijk. Zo weet de browser waar de functie begint en eindigt. Dit wordt duidelijk als we meerdere functies onder elkaar schrijven.Ook hebben we voor het eerst een EVENT gebruikt, t.t.z. een click event. Maar later meer hierover.

2.2

De functies

In Javascript zullen we dikwijls gebruik maken van functies. Daarom is het goed om er nu reeds bij stil te staan. Functies maken is een manier om verschillende instructies te bundelen. Om dit duidelijk te maken gaan we eenzelfde tekst driemaal na elkaar zetten. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //
Cursus Javascript

9

document.write("Dit is mijn tweede pagina !
"); document.write("Gemaakt in Javascript !
"); document.write("Dit is mijn tweede pagina !
"); document.write("Gemaakt in Javascript !
"); document.write("Dit is mijn tweede pagina !
"); document.write("Gemaakt in Javascript !
"); //]]>



We zien dezelfde tekst driemaal verschijnen. Nu gaan we hetzelfde in een functie gieten. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //"); document.write("Gemaakt in Javascript !
"); } hetzelfde(); hetzelfde(); hetzelfde(); //]]>

Door een functie te maken die hetzelfde noemt en deze drie keer aan te roepen (function call) krijgen we onze tekst driemaal op het scherm. We merken op dat de commando's in de functie gebundeld worden tussen { } accolades en dat elke regel met een ; (puntkomma) wordt afgesloten. Een functie kan ook in samenwerking met een EVENT-HANDLER voorkomen. We hebben al de event-handler onClick gezien. We zullen hetzelfde event gebruiken om met variabelen in een functie te werken. Variabelen zullen verder nog meer aan bod komen. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //
Cursus Javascript

10

var x=12; var y=5; var result=x + y; alert(result); } //]]>

onclick="rekenen();" />

We klikken op de knop Rekenen en we krijgen een "alert" dialog-box met het totaal van de berekening, dus 17. We hebben een functie gemaakt met een handler (onclick). Door erop te klikken wordt de functie uitgevoerd. Om een variabele vast te leggen gebruiken we het woord -var-. Het totaal van de variabelen leggen we vast in de zojuist gemaakte variabele -result-. Om nu dat resultaat, dat vervat ligt in de variabele -result- (dus x+y of 12+5) op het scherm te tonen roepen we de alert-box op. Daarvoor gebruiken we de event-handler onclick. Windows heeft verschillende van deze boxen die we kunnen oproepen. Dit komt verder nog aan bod.

Cursus Javascript

11

3

DOM (DOCUMENT OBJECT MODULE)

Dom is de interface tussen het XHTML-document en een scriptaal. Het Document Object Model is een application programming interface (API). Daarin wordt vastgelegd hoe de logische structuur van een bestand is opgebouwd en hoe de inhoud kan worden bewerkt. Het DOM reguleert hoe de volle kracht en interactiviteit van scripttalen (zoals ECMAScript, de standaard versie van JavaScript) gebruikt kan worden. Het geeft de scripttaal gemakkelijke toegang tot de structuur, inhoud en presentatie van een document dat is geschreven in talen als XHTML en XML. In de ontwikkeling van HTML ontstond al vroeg de behoefte om documenten interactief te kunnen maken. De versie 4 browsers van Netscape en Microsoft werden gelanceerd onder de term Dynamic HTML. Daarmee werd aangegeven dat de gewenste interactiviteit mogelijk was geworden. Een essentiële voorwaarde voor interactiviteit van (X)HTML-documenten is dat de onderdelen (en de eigenschappen van elk onderdeel) van het document afzonderlijk benaderd kunnen worden. Alleen op deze manier kunnen de eigenschappen van dat onderdeel aangepast worden. De browsers hadden aanvankelijk ieder een eigen benaderingsmethode van de onderdelen van documenten. Het World Wide Web Consortium (W3C) heeft vervolgens een standaard opgesteld onder de naam Document Object Model (W3C – DOM). Dit was gebaseerd op Dynamic HTML en andere al bestaande standaarden zoals HyTime en SGML Groves. Doordat het Document Object Model gebaseerd was op Dynamic HTML, was het backwards compatible. Met de ontwikkeling van het Document Object Model zijn HTML-documenten veranderd van tekst-met-opmaaktekens (door ontwikkelaars ook wel HTML-soep genoemd) tot een gestructureerd stelsel van afzonderlijke objecten. Elk object in het document kan met programmeercode (zoals javascript) worden benaderd, en de eigenschappen kunnen worden aangepast. Een belangrijke eigenschap is de stijl van het object. Deze stijl kan ook worden bepaald met cascading style sheets. Volgens het DOM is ook "tekst" een eigenschap van een element. Hoewel de inhoud van een document meestal de bestaansreden is van een document, wordt die inhoud ondergeschikt gemaakt aan de structuur van het document. Volgens het Document Object Model bestaat een document uit een root node, die ingebedde (geneste) elementen kan bevatten. In XHTML bestanden is de root node html. In het plaatje hiernaast staat een schematische weergave van een (X)HTML document zoals dat door de Dom Inspector van Mozilla Firefox wordt weergegeven. De elementen in het plaatje refereren aan de gebruikte (X)HTML tag.

Cursus Javascript

12

3.1

DOM - versies

Het begrip DOM voor webpagina's werd mee geïntroduceerd met Javascript. We beschikken met Javascript over een taal waarmee we webpagina's dynamisch kunnen maken. In de voorbije hoofdstukken hebben we de basis van Javascript doorgenomen, het is nu tijd deze basiskennis uit te breiden met dynamische toepassingen. Voor webontwikkelaars is het belangrijk de eigenschappen van elementen op een webpagina te kunnen beïnvloeden. Wil je een figuur laten veranderen wanneer de gebruiker er met de muis over beweegt, dan moet je de eigenschap src van het element IMG kunnen aanpassen. Het DOM heeft ondertussen reeds een behoorlijk ontwikkeling doorgemaakt: 1. DOM 0: originele DOM ontworpen door Netscape. Wordt nog steeds door zowat alle browsers ondersteund. 2. Tussenliggende DOM's: met de introductie van de versie 4 browsers DHTML het toverwoord op het internet. Plots moesten op webpagina's tal dynamische effecten mogelijk zijn. Netscape en Microsoft gingen hier elk eigen weg. Netscape maakt gebruik van document.layers en Microsoft document.all

was van hun van

3. W3C DOM: standaard voorgesteld door het W3C, reeds level 3 in ontwerp. Meer over de DOM-levels bij Mozilla en W3C en W3Schools. 3.1.1

Dom 0

Daar nog tal van websites gebruik maken van de originele specificaties van DOM, is het onontbeerlijk dit model te bestuderen. Niveau 0 van DOM is relatief eenvoudig: document is het hoofdobject en daaronder heb je toegang tot images, links, forms en anchors. Hieronder vind je een screenshot van deze html pagina.

Cursus Javascript

13

Images[0]

Element[0]

Forms[0]

Element[1] Images[1]

Element[2]

Links[0]

We zullen nu de delen ontleden : We hebben in deze pagina • twee tekeningen (images), • 1 form met 3 elementen (twee text-velden en een button) • 1 link. Vanuit het standpunt van Javascript is het venster een venster-object. Dit venster-object heeft verschillende elementen zoals een statusbar. In dit venster-object kunnen we een html pagina laden (of een andere pagina). Op het moment dat een pagina in het venster wordt geladen, wordt het een document-object. (zie het document-object in het begin van de cursus). Dus het document-object is de html-pagina. De properties (eigenschappen) van dit document zouden bv de kleur van de achtergrond kunnen zijn. Wat nog belangrijker is, is dat alle html-objecten deel uitmaken van het document-object. Hieronder zien we de hiërarchie :

Nu kunnen we alle elementen en objecten in het object-document aanspreken. Gezien het hoofdobject het document is, en de tekeningen, de link, het formulier en de elementen objecten van dat hoofd-object zijn, zullen we ze op de volgende manier aanspreken: document.images[0]

Cursus Javascript

14

document.forms[0].elements[0] Natuurlijk moeten we ook de eigenschappen van de objecten kunnen aanspreken. Bv. De tekst die in een tekstbox wordt gezet. Dat is de waarde van de tekstbox of de value van het object. Waar kunnen wij deze eigenschappen vinden ? Verder in deze cursus vind je alle objecten en hun eigenschappen en methoden terug. Vb. name=document.forms[0].elements[1].value; Wat ook de waarde is van de tekst die we hier opvragen, deze wordt opgeslagen in de variabele name. Hierbij een kleine uitleg. We hebben gezien dat een variabele op de volgende manier wordt geschreven : var x=12

We kunnen onmiddellijk de naam en het gelijkheidsteken zetten zonder het woord -var-. Javascript weet onmiddellijk dat we een variabele bedoelen: x=12

De tekst die wordt opgeslagen in het element [0] van de forms[0] wordt weergegeven iedere keer dat we de variabele oproepen.In het voorbeeld hierboven zouden we de tekst die in het tekstvak wordt gezet in een tweede venster kunnen oproepen enz… Een laatste punt. Forms krijgt het nummer [0]. Maar in onze code hebben we eveneens een naam aan forms gegeven, t.t.z. myForm (zie hieronder) Het eerste element, element [0] heeft ook een naam, t.t.z. op (zie hieronder . We kunnen dus evengoed schrijven: name=document.forms[0].elements[0].value;

of name=document.myForm.op.value;

Dit maakt het natuurlijk een stuk makkelijker. Want als we twee of drie forms hebben, met elk een aantal elementen, zouden we al vlug aan document.forms[3].elements[8].value zitten wat het geheel nogal ingewikkeld maakt. Dus door aan alle forms en aan alle elementen namen te geven kunnen we ze gemakkelijker oproepen. OPGEPAST ! STEEDS DEZELFDE SCHRIJFWIJZE AANHOUDEN!!! Nu gaan we de informatie (tekst) die we in het tekstveld van het formulier schrijven ook oproepen via van een ALERT box. Hiervoor gaan we de pagina gebruiken die we hierboven hebben gemaakt. We zullen eerst het script-deel laten zien, daarna de volledige xhtml pagina. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript">

Cursus Javascript

15

//

Dit is het script-gedeelte. Nu moeten we dit in de xhtml pagina invoegen, zodat we ons formulier op het scherm krijgen, de tekstbox invullen, om vervolgens de inhoud van het element na name: uit het formulier terug op te roepen. Hieronder vind je de volledige pagina: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //

Name:

E-mail:

Homepage

We gaan verder met onze oefening. We vullen de twee tekstvakken in ons formulier in. Bij het klikken op de knop Opvragen krijgen we in een alert box de tekst die in het eerste element staat (dus na name:). Dat is ook datgene wat we in ons script gezet hebben : name=document.mijnform.txtnaam.value; dus de waarde (value) van het element[txtnaam] (het eerste tekstvak is element[0]) en van het formulier (mijnform) We kunnen natuurlijk de inhoud van element[1] ook opvragen, dus hetgeen we invullen na Email. Dan zou de coderegel in het script zijn: name=document.mijnform.txtmail.value;

Cursus Javascript

16

We zetten na mijnform de naam txtmail aangezien het tweede element de naam txtmail heeft.Verder zullen we leren hoe we de tekst in een andere pagina kunnen zetten i.p.v. in een alert box. 3.1.2

Tussenliggende Dom’s

Na DOM 0 ontwikkelden Netscape en Microsoft op eigen houtje een eigen DOM. Netscape koos voor document.layers, waarbij ze hun eigen filosofie volgden en ook een nieuwe tag LAYER gingen gebruiken. Deze DOM zullen we niet verder bespreken daar zelfs Netscape nu is afgestapt van deze DOM. Microsoft ging werken met document.all: één object-collectie van waaruit je alle elementen op de pagina kan bereiken.

3.1.3

W3C DOM

De verschillende objectmodellen van Netscape en Microsoft bemoeilijkten het leven van ontwikkelaars. Scripters wilden een standaard, zoals het HTML- en CSS-standaarden voor inhouden en stijlen. Het W3C reageerde met een standaard voor het documentenobjectmodel : het W3C DOM.

Cursus Javascript

17

4

W3C DOM

De W3C DOM is een platform-onafhankelijk interface die via script toegang heeft tot alle elementen ,inhoud, attributen en styles van een document. Voordien was directe toegang niet mogelijk, iets dat werd omzeild door hele stukken inhoud te herschrijven via document.write() e.d.. The DOM is onderverdeeld in verschillende delen (Core, XML, and HTML) and verschillende levels (DOM Level 1/2/3): • Core DOM - defines a standard set of objects for any structured document • XML DOM - defines a standard set of objects for XML documents • HTML DOM - defines a standard set of objects for HTML documents Wij leggen de nadruk in deze cursus op HTML DOM Voorbeeld : Dit voorbeeld toont hoe je de achtergrondkleur van een XHTML-document kan wijzigen naar geel wanneer de gebruik klikt. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //

Click on this document!

Document Objects The HTML DOM defines HTML documents as a collection of objects. The document object is the parent of all the other objects in an HTML document. The document.body object represents the element of the HTML document. The document object is the parent of the body object, and the body object is a child of the document object. Object Properties

Cursus Javascript

18

HTML document objects can have properties (also called attributes). The document.body.bgColor property defines the background color of the body object. The statement document.body.bgColor="yellow" in the example above, sets the background color of the HTML document to yellow. Object Events HTML document objects can respond to events. The onclick="ChangeColor()" attribute of the element in the example above, defines an action to take place when the user clicks on the document. Functions The ChangeColor() function in the example above, is a JavaScript function. The function will be triggered (started) when a user clicks on the HTML document. Changing Style The HTML DOM also defines a model for changing the styles of HTML objects. The coding example below shows how to obtain the same effect as the first example, by changing the style of the body object:

4.1

NODES

De W3C DOM gaat uit van het concept van nodes. Elke container (

,

,..), elk zelfstandig element (
en elk stuk tekst is een node (knooppunt). Nodes hebben parentchild-relaties als de ene container een andere bevat. Net als in het echt geldt een parent-childrelatie alleen voor direct opvolgende generaties; een node kan nul of meer kinderen hebben. Veronderstel het volgende html doc:

heading 1

een tekst

Dan ziet zijn DOM tree er zo uit in de DOM Inspector van Mozilla:

Cursus Javascript

19

Deze begint vanuit de document root, waaronder een DOCTYPE declaratie volgt. De eerste elementnode is die als child alle verdere elementen bevat. Bijvoorbeeld,

een Element node, die zelf nog een textNode als child heeft. Element nodes kunnen childNodes hebben, terwijl een textNode dat nooit kan. Er zijn ook attributeNodes die hier niet zichtbaar gemaakt zijn door de DOM inspector: een element kan attributen hebben die subnodes ervan zijn.

4.2

Relaties tussen nodes

Veronderstel volgend voorbeeld: •

Node 1

•

Node 2

•


o

Sub Node 1

o

Sub Node 2

o

Sub Node 3

Node 3

Cursus Javascript

id="ouder">

Node 1

Node 2

• Sub Node 1
• Sub Node 2
• Sub Node 3

Node 3

• Sub Node 1


20

o

Sub Node 1

Vertrekkende van het ul element "ouder" heeft dit element 3 childNodes, Node 1, 2 en 3. Alledrie hebben die dezelfde parentNode "ouder". Node 2 heeft als previousSibling Node1 en als nextSibling Node 3 (als we de 'whitespace' niet meerekenen). Elk li element heeft ook nog een textNode die zijn inhoud bevat. Net als alle andere element nodes heeft Node 2 een childNodes collection die zijn kinderen bevat. Met childNodes.length kunnen we weten hoeveel. Met childNodes[i] of childNodes.item(i) kunnen we elke individueel child aanspreken.

Wanneer je een node aangesproken hebt, kan je volgende properties, methods en collections gebruiken. Deze propertes, methods en collections zijn voornamelijk bedoeld om doorheen de nodes te navigeren. Naast deze heb je voor elk type node (element/object) bijkomende properties, methods en events (zie verder in de cursus). Properties Methods Collections firstChild appendChild() childNodes[] lastChild removeChild() attributes[] parentNode replaceChild() previousSibling createElement() nextSibling createTextNode() nodeName cloneNode() nodeType insertBefore() nodeValue getAttribute() Length setAttribute() hasAttributes() hasChildNodes()

4.3

DOM-Objecten

Let op : niet alle objecten worden ondersteund door het W3C. Elk object kent Porterties die men kan beïnvloeden, Methods en Events. Al deze gegevens kan je terugvinden op

Cursus Javascript

21

http://www.w3schools.com/htmldom/default.asp Object Anchor Applet Area Base Basefont Body Button Checkbox

Document Event

FileUpload Form Frame Frameset Hidden History

Iframe Image Link Location Meta Navigator Option

Password Radio Reset Screen Select

Cursus Javascript

Description Represents an HTML a element (a hyperlink) Represents an HTML applet element. The applet element is used to place executable content on a page Represents an area of an image-map. An image-map is an image with clickable regions Represents an HTML base element Represents an HTML basefont element Represents the body of the document (the HTML body) Represents a push button on an HTML form. For each instance of an HTML tag on an HTML form, a Button object is created Represents a checkbox on an HTML form. For each instance of an HTML tag on an HTML form, a Checkbox object is created Used to access all elements in a page Represents the state of an event, such as the element in which the event occurred, the state of the keyboard keys, the location of the mouse, and the state of the mouse buttons For each instance of an HTML tag on a form, a FileUpload object is created Forms are used to prompt users for input. Represents an HTML form element Represents an HTML frame Represents an HTML frameset Represents a hidden field on an HTML form. For each instance of an HTML tag on a form, a Hidden object is created A predefined object which can be accessed through the history property of the Window object. This object consists of an array of URLs. These URLs are all the URLs the user has visited within a browser window Represents an HTML inline-frame Represents an HTML img element Represents an HTML link element. The link element can only be used within the tag Contains information about the current URL Represents an HTML meta element Contains information about the client browser Represents an option in a selection list on an HTML form. For each instance of an HTML tag in a selection list on a form, an Option object is created Represents a password field on an HTML form. For each instance of an HTML tag on a form, a Password object is created Represents radio buttons on an HTML form. For each instance of an HTML tag on a form, a Radio object is created Represents a reset button on an HTML form. For each instance of an HTML tag on a form, a Reset object is created Automatically created by the JavaScript runtime engine and it contains information about the client's display screen Represents a selection list on an HTML form. For each instance of an HTML <select> tag on a form, a Select object is created

22

Style Submit Table TableData TableHeader TableRow Text Textarea Window

4.4

Represents an individual style statement. This object can be accessed from the document or from the elements to which that style is applied Represents a submit button on an HTML form. For each instance of an HTML tag on a form, a Submit object is created Represents an HTML table element Represents an HTML td element Represents an HTML th element Represents an HTML tr element Represents a text field on an HTML form. For each instance of an HTML tag on a form, a Text object is created Represents an HTML textarea element Corresponds to the browser window. A Window object is created automatically with every instance of a or tag

Elementen refereren

Om een bepaalde node te bereiken kunnen we proberen deze te identificeren of we zullen doorheen een collectie moeten lussen. Er zijn verschillende manieren om een object in een document aan te spreken: •

Aan de hand van de waarde van attributen. Zo kan in XHTML bijvoorbeeld het id (identiteit) attribuut gebruikt worden, deze wordt namelijk verondersteld uniek te zijn in het document. We gebruiken hiervoor getElementById(). •

Het volgen van de boomstructuur van het document, bijvoorbeeld: het tweede element van het document. •

Gebruik makend van de naam van de tag. Hiervoor gebruiken we getElementsByTagName 4.4.1

getElementById

Deze method resulteert in één element dat geïdentificeerd moet zijn met zijn id attribuut. Voorbeeld 1: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //

Cursus Javascript

23

Originele tekst

Verander tekst

Verander tekst

-->

We zullen proberen het volgende statement te verklaren : document.getElementById("tekst1").firstChild.nodeValue='De tekst is veranderd !';

Door document.getElementById("tekst1") te gebruiken, bekom je de p-node tekst1. Vervolgens schrijven we firstChild omdat we de eerste childnode van p willen hebben. En van deze node willen we de nodevalue veranderen. We hadden ook childNode kunnen gebruiken i.p.v. firstChild. Voorbeeld 2 : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> // foto.position = "relative"; foto.left = "200px"; }//]]>

het is mooi weer

Hier worden twee functies gebruikt. De eerste functie kleur wordt gebruikt om de kleur van de paragraaf weer te wijzigen naar red wanneer de gebruiker op knop “kleur” klikt. Door het Style-object krijg je toegang tot de stijlen van het element. (document.getElementById("id").style.property="value") De tweede functie zal de foto bos 200px naar rechts verplaatsen als we met de muis over de foto bewegen. 4.4.2

getElementsByTagName

Deze method resulteert in een nodeList van elementen met dezelfde html-tag. Ofwel ga je doorheen deze collectie lussen, ofwel pik je er één element uit met item(i). function ToonAlleLinks(){

Cursus Javascript

24

var links = document.getElementsByTagName('a'); for (var i=0; i
Deze functie toont alle links in het document. De eigenschap length geeft het aantal nodes met TagName a. Met de Method getAttribute krijgen we de waarde van het attribute href . 4.4.3

this

Het this keyword refereert steeds naar de 'owner' van de functie oproep. Enkel als de actie opgeroepen door een object op het object zelf toegepast wordt, kan je this gebruiken. De noodzaak een referentie te leggen met methods als getElementById() valt daarmee weg. function doeIets(obj) { obj.style.color = '#cc0000'; } <element onclick="doeIets(this);">

4.4.4

Opbouwen en afbreken van elementen

Het DOM laat toe 'on the fly' xhtml elementen op te bouwen nadat het document reeds geparsed werd, iets wat vroeger onmogelijk was. Het principe is eerst een element aan te maken met .createElement(), er eventuele attributen aan toe te voegen met setAttribute, en dat element daarna vast te maken aan een andere Node met appendChild. Met .removeChild en .replaceChild() kan je respectievelijk elementen verwijderen en vervangen door een ander. Voorbeeld: opbouwen van een tabel vanuit een geïdentificeerd element: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //
Cursus Javascript

25

td.appendChild(document.createTextNode(i+j)); tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); hier.appendChild(table); } //]]>

het is mooi weer

In bovenstaand voorbeeld wordt eerst een element 'weer' gerefereerd waarna er een tabel van 2 rijen en 2 kolommen aan vastgemaakt wordt als de gebruiker klikt op de knop tabel. Alle noodzakelijke html-elementen worden eerst aangemaakt en dan in de juiste volgorde vastgemaakt aan elkaar en tenslotte aan het doelwit. Eventuele tekstuele inhoud wordt via createTextNode() aan elementNodes vastgemaakt. Volgend statement table.setAttribute("border", "1"); kon je ook als volgt geschreven hebben table.border = “1”; daar border een property is van tabel In de volgende hoofdstukken zullen we een aantal specifieke objecten bespreken, te beginnen met het document-object. We zullen ook proberen van elke proterty, method en event een voorbeeld te geven.

Cursus Javascript

26

5

DOCUMENT-OJBECT

Het document-object het is belangrijkste object. Het object vertegenwoordigt het XHTMLdocument en kan gebruikt worden om alle elementen van het document te benaderen.

5.1

Document Object Properties

Property alinkColor bgColor Body Cookie documentElement domain fgColor lastModified linkColor referrer title URL vlinkColor

5.1.1

Description Sets or returns the color of the active links in the document Sets or returns the background-color of the document Specifies the beginning and end of the document body Sets or returns all cookies associated with the document Returns a reference to the root node of the document Returns the document server's domain name Sets or returns the text-color of the document Returns the date and time the document was last modified Sets or returns the color of the links in the document Returns the URL of the document that loaded the current document Returns the title of the document Returns the URL of the current document Sets or returns the color of the visited links in the document

IE 3

F 1

N W3C 2 D

3

1

2

D

5

1

6

Yes

3

1

2

Yes

5

1

6

No

4 3 3

1 1 1

3 2 2

Yes D No

3

1

2

D

3

1

2

Yes

3 4 3

1 1 1

2 3 2

Yes Yes D

Document.title

De title property geeft de titel van het document terug. (de tekst tussen de XHTML title element). Syntax: document.title Voorbeeld : titel opvragen <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

Cursus Javascript

27

<script type="text/javascript"> //
document.write("de titel van het document is " + document.title); //]]>



Let op : we hebben hier geen Event (zoals onclick, onmouseover). Het script wordt onmiddellijk uitvoerd. We moeten niet wachten totdat er een Event optreedt om het script uit te voeren.

5.2

Document Object Methods

Method clear() close() createAttribute("name") createElement("tag") createTextNode("txt") focus() getElementById()

Description IE Clears all elements in the document Closes the output stream and displays the sent data 3 Creates an attribute with a specified name 6 Creates an element 5 Creates a text string 5 Gives the document focus 5 Returns a reference to the first object with the 5 specified ID getElementsByName() Returns a collection of objects with the specified 5 NAME getElementsByTagName("tag") Returns a collection of objects with the specified 5 TAGNAME open() Opens a document for writing 3 write() Writes a text string to a document 3 writeln("str") Writes a text string followed by a new line 3 character to a document opened by open()

5.2.1

document.write()

De write() method schrijft een tekststring naar een document. Syntax: document.write(string)

Voorbeeld : <script type="text/javascript"> document.write("Hello World!");

Cursus Javascript

28

F 1 1 1 1 1 1 1

N 2 2 6 6 6 6 6

W3C No Yes No Yes Yes No Yes

1

6

Yes

1

6

No

1 1 1

2 2 2

Yes Yes Yes



5.2.2

document.createTextNode(“txt”)

De createTextNode(“txt”) creeërt een TextNode object. Syntax: oTextNode = document.createTextNode( [sText]) Voorbeeld : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //

Original Text

Vorige oefening kan je ook anders oplossen: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //
function fnChangeNode() { var oReplaceNode = document.getElementById("oSpan").childNodes(0); oReplaceNode.nodeValue="New text";

} //]]>

Original Text

Cursus Javascript

29

Een textnode kan volgende proterty en methods hebben: Property

Description

data

Sets or retrieves the value of a TextNode object.

length

Retrieves the number of characters in a TextNode object.

nextSibling

Retrieves a reference to the next child of the parent for the object.

nodeName

Retrieves the name of a particular type of node.

nodeType

Retrieves the type of the requested node.

nodeValue

Sets or retrieves the value of a node.

parentNode

Retrieves the parent object in the document hierarchy.

previousSibling

Retrieves a reference to the previous child of the parent for the object.

Method

Description

appendData

Adds a new character string to the end of the object.

deleteData

Removes a specified range of characters from the object.

insertData

Inserts a new character string in the object at a specified offset.

replaceData

Replaces a specified range of characters in the object with a new character string.

splitText

Divides a text node at the specified index.

substringData

Extracts a range of characters from the object.

5.3

Document Object Events

Syntax: document.event_name="someJavaScriptCode" Event onClick onDblClick onFocus onKeyDown onKeyPress onKeyUp onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp onResize

Cursus Javascript

Description IE Executes some code when a Click event occurs 5 Executes some code when a Doubleclick event 5 occurs Executes some code when a Focus event occurs 5 Executes some code when a Keydown event 5 occurs Executes some code when a Keypress event occurs 5 Executes some code when a Keyup event occurs 5 Executes some code when a Mousedown event 5 occurs Executes some code when a Mousemove event 5 occurs Executes some code when a Mouseout event 5 occurs Executes some code when a Mouseover event 5 occurs Executes some code when a Mouseup event occurs 5 Executes some code when a Resize event occurs 5

30

F 1 1

N W3C 6 6

1 1

6 6

1 1 1

6 6 6

1

6

1

6

1

6

1 1

6 6

6

WINDOW-OBJECT

Het Window-Object vertegenwoordigt de browser. Merk op dat niet alle objecten, proterties, methods en events ondersteund worden door alle browers. Het Window-object is ook geen W3C-dom standaard.

6.1

Window Object Objects

Object clientInformation clipboardData Document Event External History Location Navigator Screen

6.1.1

Description Contains information about the browser

IE F N W3C 4 5 This object can be used to access all elements in a 3 1 2 page Represents the state of an event 4 4 Contains the URLs the user has visited within a 3 browser window Contains the current URL of the window 3 1 2 Contains information about the client browser 3 1 4 Contains information about the client's display 4 1 2 screen

Het location-object

We hebben tot nu toe het DOCUMENT-OBJECT besproken. Het location-object geeft het adres van het huidige document en ziet eruit als volgt : window.location="url"

Maar wat nog belangrijker is, is dat men een nieuwe waarde aan location.href kan doorgeven. Zoals men met een tag zou doen. Aan het location.object kan men eveneens een event-handler zoals onMouseOver koppelen. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //

Cursus Javascript

31

Door te klikken op de button “toon huidige URL”, verschijnt de huidige url. De tweede button wijzigt de url en je wordt onmiddellijk doorgestuurd naar de pagina http://www.w3schools.com

6.1.2

Navigator-object

Dit object bevat informatie over de client-browser. 6.1.2.1

Navigator Object Properties

Property appCodeName appName appVersion browserLanguage cookieEnabled cpuClass onLine platform systemLanguage userAgent userLanguage

Description Returns the code name of the browser Returns the name of the browser Returns the platform and version of the browser Returns the current browser language Returns a Boolean value that specifies whether cookies are enabled in the browser Returns the CPU class of the browser's system Returns a Boolean value that specifies whether the system is in offline mode Returns the operating system platform Returns the default language used by the OS Returns the value of the user-agent header sent by the client to the server Returns the OS' natural language setting

IE 3 3 3 4 4

F 1 1 1

N W3C 2 2 2

1

6

1

4

1

2

4 4 4 4 3 4

Voorbeeld : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //") document.write("Version=" + x.appVersion) document.write("
") document.write("CookieEnabled=" + x.cookieEnabled) document.write("
") document.write("CPUClass=" + x.cpuClass) document.write("
") document.write("OnLine=" + x.onLine) document.write("
") document.write("Platform=" + x.platform)

Cursus Javascript

32

document.write("
") document.write("UA=" + x.userAgent) document.write("
") document.write("BrowserLanguage=" + x.browserLanguage) document.write("
") document.write("SystemLanguage=" + x.systemLanguage) document.write("
") document.write("UserLanguage=" + x.userLanguage) //]]>

6.1.2.2

Navigator Object Methods

Method javaEnabled()

Description IE A Boolean value that specifies whether the browser has 4 Java enabled

F 1

N W3C 3

Voorbeeld : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //

6.1.3

Screen-object

Het Screen-object bevat informatie over het beeldscherm 6.1.3.1

Screen object properties

Property availHeight availWidth colorDepth

Cursus Javascript

Description Returns the height of the display screen excluding the Windows Taskbar Returns the width of the display screen - excluding the Windows Taskbar Returns the bit depth of the color palette on the

33

IE 4

F 1

N W3C 4

4

1

4

4

1

4

destination device or buffer The height of the display screen Returns the normal number of horizontal dots per inch of the display screen Returns the normal number of vertical dots per inch of the display screen Returns the color resolution (in bits per pixel) of the display screen Returns width of the display screen

height logicalXDPI logicalYDPI pixelDepth width

4 6

1

4

1

4

1

4

6

4

Voorbeeld : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //") document.write("Available view area: ") document.write(screen.availWidth + "*" + screen.availHeight) document.write("
") document.write("Color depth: ") document.write(screen.colorDepth) document.write("
") document.write("LogicalXDPI: ") document.write(screen.logicalXDPI) document.write("
") document.write("LogicalYDPI: ") document.write(screen.logicalYDPI) document.write("
") document.write("PixelDepth: ") document.write(screen.pixelDepth) document.write("
") //]]>

6.2

Window Object Properties

Property Closed defaultStatus

dialogArguments

Cursus Javascript

Description Returns a Boolean value that specifies whether the referenced window has been closed Sets or returns the default text in the statusbar of the windows (will be displayed when the page loads) Returns all variables passed into the modal dialog window

34

IE 4

F 1

N W3C 3

3

1

2

4

dialogHeight dialogLeft dialogTop dialogWidth frameElement Length Name offscreenBuffering

Opener Parent returnValue screenLeft

screenTop Self Status Top

6.2.1

Sets or returns the height of the modal dialog 4 window Sets or returns the left coordinates of the modal 4 dialog window Sets or returns the top coordinates of the modal 4 dialog window Sets or returns the width of the modal dialog 4 window Returns the frame/iframe object that is hosting the 5 window in the parent document Sets or returns the number of frames in the 4 window Sets or returns the name of the window 3 Sets or returns a Boolean value that specifies 4 whether the window is drawn offscreen before being visible to the user Sets or returns a reference to the window that 4 created the window Returns the parent window 3 Sets or returns the value returned from the modal 4 dialog window Returns the x-coordinate of the upper left corner of 5 the browser - relative to the upper left corner of the screen Returns the y-coordinate of the top corner of the 5 browser - relative to the top corner of the screen Returns a reference to the current window 3 Sets or returns the text in the statusbar of the 3 window Returns the topmost ancestor window 3

1

6

1

2

1

3

1

2

1 1

2 2

1

2

Status

Met Javascript kunnen we ook in de statusbar (onderaan uw venster) schrijven. Daarvoor moeten we een string aan de eigenschap STATUS van het object WINDOW toevoegen. We zullen in ons voorbeeld twee buttons in een document plaatsen. Bij het klikken op de button Schrijf zal er een tekst in de statusbar verschijnen. Bij het klikken op de tweede knop Wissen zal alles gewist worden. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //

Cursus Javascript

35

value="Schrijf"

name="wissen"

value="Wissen"

onclick="reclame('laat

onclick="reclame('');"

Zoals je misschien al opgemerkt hebt, hebben we de tekststring in een variabele txt gezet. Deze variabele wordt toegevoegd aan de functie reclame. Waarom doen we dit op deze manier ? Nu kunnen we gelijk welke tekst in deze variabele opslaan. Iedere keer dat we de functie aanroepen, mogen we een andere tekst ingeven. In het tegenovergestelde geval zouden we voor iedere tekst een andere functie moeten schrijven. We kunnen ook verschillende variabelen aan één en dezelfde functie toevoegen, gescheiden door een komma. We geven dus onze tekst door met window.status=txt. We wissen deze tekst door een lege string aan window.status door te geven "". Een boodschap kan ook naar de statusbar worden doorgegeven via de event-handlers onMouseOver en onMouseOut. LINKS

6.3

Window Object Methods

Method alert() blur() clearInterval(ID) clearTimeout(ID) close() confirm() createPopup()

Cursus Javascript

Description Displays an alert box with a specified message and an OK button Removes focus from the current window Cancels a timeout that is set with the setInterval() method Cancels a timeout that is set with the setTimeout() method Closes the current window Displays a dialog box with a specified message and an OK and a Cancel button Creates a pop-up window

36

IE 3

F 1

N W3C 2

4 4

1 1

3 4

3

1

2

3 3

1 1

2 2

5

focus() moveBy(x,y) moveTo(x,y) navigate("URL") open() print() prompt() resizeBy() resizeTo() scroll() scrollBy() scrollTo() setActive() setInterval(code, millisec[, "lang"])

Sets focus on the current window Moves the window a specified number of pixels in relation to its current co-ordinates Moves the window's left and top edge to the specified co-ordinates Loads the specified URL into the window Opens a new browser window Prints the contents of the current window

4 4

1 1

3 4

4

1

4

3 3 5 3

1 4 1 4 1 2

4 4

1 4 1 4

4 4

1

4

4 5 4

1

4

1

4

Calls a function or evaluates an expression after a 3 specified number of milliseconds

1

2

Displays a dialog box that prompts the user for input Resizes the window by the specified pixels Resizes the window to the specified width and height Deprecated. Use scrollTo() instead Scrolls the content by the specified number of pixels Scrolls the content to the specified coordinates Calls a function / evaluate an expression every time a specified interval (in milliseconds) has been reached. The arguments can take the following values: code

Required. A pointer to a function or the code to be executed millisec Required. The number of milliseconds lang Optional. JScript | VBScript | JavaScript setTimeout()

6.3.1

Prompt()

De prompt() method wordt gebruikt om een dialoogbox weer te geven, waarmee je input kunt opvragen. Voorbeeld van de prompt-venster :

Syntax :

Cursus Javascript

37

confirm(text,defaultText) Parameter text defaultText

Description Optional. The message to display in the dialog box. Default is "" Optional. The default text in the dialog box' input field

Voorbeeld : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //

6.3.2

Confirm()

De confirm () method wordt gebruikt om een dialoogbox met een specifieke boodschap en een OK en een Cancel knop weer te geven. Voorbeeld van een Confirm dialoogbox:

Syntax : confirm(text)

Voorbeeld :

Cursus Javascript

38

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //

6.3.3

Print()

De print() method wordt gebruikt om inhoud van de huidige windows af te drukken. Syntax : Print()

Voorbeeld : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //

Cursus Javascript

39

6.3.4

Open()

Een nieuw venster openen in uw browser is een van de troeven van Javascript. Niet alleen kunnen we een nieuw venster openen, maar ook nieuwe documenten maken. Syntax : WindowObjectReference = window.open(strUrl, strWindowName [, strWindowFeatures]); Parameter URL

Description Optional. Specifies the URL of the page to display. If no URL is specified, a new window with about:blank is displayed.

Name

Optional. Specifies the value for the target attribute on a form or a link. The following values are supported:

Specs

•

_blank - URL is loaded into a new window

•

_media - URL is loaded into the content area of the Media Bar (IE6+)

•

_parent - URL is loaded into the parent frame

•

_search - URL is opened in the browser's search pane (IE5+)

•

_self - URL replaces the current page

•

_top - URL replaces any framesets that may be loaded

Optional. A comma-separated list of items. The following values are supported: channelmode = yes | no | 1 | 0 directories = yes | no | 1 | 0 fullscreen = yes | no | 1 | 0

whether to display the window in theater mode. Default is no whether to add directory buttons. Default is yes

whether to display the browser in full-screen mode. Default is no. A window in full-screen mode must also be in theater mode height = number the height of the window, in pixels. Min. value is 100 left = number the left position, in pixels location = yes | no | whether to display the address field. Default is yes 1|0 menubar = yes | no whether to display the menu bar. Default is yes |1|0 resizable = yes | no whether the window is resizable. Default is yes |1|0 scrollbars = yes | no whether to display scroll bars. Default is yes |1|0 status = yes | no | 1 whether to add a status bar. Default is yes |0 titlebar = yes | no | whether to display the title bar. Ignored unless the calling 1|0 application is an HTML Application or a trusted dialog box. Default is yes toolbar = yes | no | whether to display the browser toolbar. Default is yes 1|0

Cursus Javascript

40

top = number width = number

replace

the top position, in pixels the width of the window, in pixels. Min. value is 100

Optional.Specifies whether the URL creates a new entry or replaces the current entry in the history list. The following values are supported: •

true - URL replaces the current document in the history list

•

false - URL creates a new entry in the history list

Specificaties van een venster :

Eerst en vooral gaan we een nieuw venster openen en er een lege html pagina in tonen. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //

Cursus Javascript

41

onclick="openWin();" />

Je kunt ook de venster-omgeving bepalen. Zo kun je een toolbar, scrolbar, menubar enz.. toevoegen of weglaten. Ook de grootte van het venster kan bepaald worden. Het volgende script zal een nieuw venster openen. Dit zal 350 op 300 pixels meten. Het zal geen toolbar, statusbar of menubar hebben. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //

value="Open new

window"

onclick="openWin2();" />

Aangezien we een nieuw document in een nieuw venster openen (dus ze hebben geen naam), zetten we na MyWin=open("","",) tweemaal aanhalingstekens met een komma ertussen. Javascript laat ook toe om nieuwe html pagina's te maken in een nieuw venster. Dus we openen een nieuw document en schrijven erin. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //"); myWin.document.write("met Javascript"); myWin.document.write(""); myWin.document.close(); } //]]>

Cursus Javascript

42



6.3.5

Close()

Om een venster te sluiten met Javascript gebruikt men de CLOSE() methode. In het volgende voorbeeld zullen we een geopend venster sluiten. We maken een nieuwe pagina en noemen die sluiten.htm. In die pagina staat de knop CloseIt. Bij het klikken op de knop wordt het venster gesloten. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> // function closeIt() { close(); } //]]>

We hernemen ons vorig script waarin we een nieuw document openden, maar in plaats van tweemaal lege aanhalingstekens te zetten na open, zetten we nu de naam van onze nieuwe pagina, namelijk sluiten.htm. Bij het klikken op de knop met de tekst Open new window wordt een tweede venster geopend waarin we het nieuwe document zien met de knop Close this. Bij het klikken op deze knop wordt het venster gesloten. Misschien zul je opmerken dat je normaal window.open() en window.close() zou moeten schrijven, maar je mag ook close() en open() schrijven. Let er op dat de DOM-specificatie alleen het document en de inhoud ervan betreft. Objecten als window, navigator en screen maken tot en met level 3 geen deel uit van de DOMspecificatie, maar worden wel bij de meeste browsers ondersteund. 6.3.6

Moveto(x,y)

Via de method Moveto kan men een venster positioneren. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

Cursus Javascript

43

<script type="text/javascript"> //

6.3.7

value="Maak een pagina"

onclick="openWin();" />

setTimeout ()

Met een timer en/of timeout zullen we de computer een code en/of een script laten uitvoeren na een zekere tijd. De tijd zullen we met de methode setTimeout van het window-object instellen. Het eerste argument is de boodschap die in een ALERT box gegeven wordt en het tweede argument is de tijd in milliseconden (3 seconden = 3000 milliseconden). Hier is de code: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //

Tweede voorbeeld : Vanaf dat je op de knop “Display timed Text” hebt gedrukt, wordt weergeven wanneer 2, 4 en 6 seconden gepasseerd zijn. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript">

Cursus Javascript

44

//

Click on the button above. The input field will tell you when two, four, and six seconds have passed.

Cursus Javascript

45

7

FORMS

Met Javascript kunnen we de gegevens die in een form worden gezet nakijken en eventueel laten aanpassen. We zullen dit even testen met een gewoon formulier waarin drie tekstboxen door de gebruiker worden ingevuld. • In het eerste tekstvak zullen we nakijken of er iets is ingevuld. Indien niet zal de gebruiker een waarschuwing krijgen. • In het tweede tekstvak moet de gebruiker een e-mail adres invullen. Hier zal het script nakijken of er meerdere woorden in staan, gescheiden door een apestaartje @. Indien niet zal de gebruiker een waarschuwing krijgen. • In het derde tekstvak vullen we een telefoonnummer in. Dit moet 9 getallen bevatten. Het script zal de getallen bewerken zodat na de eerste drie getallen een schuine streep wordt gezet en na ieder 2de getal een punt. Onderaan het formulier zetten we twee knoppen: één om te verzenden en één om de ingevulde gegevens te wissen. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //
Cursus Javascript

46

// Als er nog geen fout is opgetreden…is het telefoonnummer juist if(foundError == false && isValidPhoneNumber(document.getElementById("txtphone").value) == false) { alert("Uw telefoonnummer is niet compleet."); foundError = true; } if(foundError == false) { document.open(); document.write(""); document.write(""); document.write("

Bedankt voor uw inschrijving.

"); document.write(""); document.close(); } // Is het e-mail adres juist (Staat er een apestaartje "@" in de naam, controle is niet volledig) function isValidEmail(theField) { if(theField.indexOf('@', 0) == -1) return false; else return true; } // Heeft het telefoonnummer het juiste aantal nummers function isValidPhoneNumber(theField) { inLen = theField.length; inStr = theField; // If this is a 9 digit number XXXYYYYYY if(inLen == 9) { for(var i=0; i

JavaScript : Nazicht van een formulier

---

<pre> Naam : Email : Telefoon :

Cursus Javascript

47

Cursus Javascript

48

8

OBJECTEN AANSPREKEN

Er bestaan een aantal ingebouwde objecten in Javascript : • • • •

String Math Date Array

Objecten worden aangemaakt met new operator o = new Object() o wordt een “variabele” van het type object het nieuwe object o bevat alle eigenschappen en functies van het type “object”

8.1

Het date-object

We zullen nu verder gaan met het Date (datum) object. Dit object geeft ons de mogelijkheid om met tijd en data te werken. We zullen een eerste maal het date object oproepen samen met de operator NEW. Code : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //

We gaan nu nog een stap verder en zullen de tijd en datum opvragen. Let wel dat dit geen klok is. We krijgen geen doorlopende tijd. Alleen de tijd van op dat ogenblik. Code : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //
vandaag=new Date();

Cursus Javascript

49

document.write("Het is" + vandaag.getHours() + ":" + vandaag.getMinutes() + "
"); document.write("Vandaag is het de" + vandaag.getDate() + " de"); //]]>



Hier leren we enkele methoden gebruiken die specifiek bij een object horen. In dit geval het object DATE. De methoden zijn : getHours() getMinute() getDate() getMonth() getFullYear() De laatste twee zullen we in een oefening gebruiken: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //
vandaag=new Date(); document.write("Het is" + vandaag.getHours() + ":" + vandaag.getMinutes() + "
"); document.write("Vandaag is het de" + vandaag.getDate() + "° van de " + (vandaag.getMonth() + 1) + " de maand" + "van het jaar" + vandaag.getFullYear()); //]]>



We hebben gebruik gemaakt van alle methoden die hierboven werden vermeld. Dit voorbeeld toont ons ook de volledige integratie van html en Javascript. Bij de methode getMonth moeten we steeds + 1 zetten. De reden is dat men hier begint bij 0. Dus de maand januari is niet de maand 1 maar 0, februari is 1 enz…het geheel moeten we tussen haakjes plaatsen. Zoals in het voorbeeld.

Cursus Javascript

50

8.2

Algemene oefening :

We zullen een formulier maken met een tekstveld en drie knoppen. Iedere knop zal een nieuw venster openen . In het tekstveld vullen we een naam in. • Bij het klikken op de eerste knop openen we een venster waarin de naam van de persoon (zoals in het tekstvak) wordt getoond. • Bij het klikken op de tweede knop krijgen we in een nieuw venster de datum en tijd. • Bij het klikken op de derde knop worden de gegevens in het tekstvak gewist. In elk venster dat we openen staat ook een knop om het venster te sluiten. Ieder nieuw venster moet een zwarte achtergrond hebben en witte tekst en moet 250 op 100 pixels groot zijn. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

Naam :

We hebben onze eerste pagina. Nu gaan we verder met het verbinden van een script aan de eerste twee knoppen. Het script wordt in de hoofding van de pagina ingevoerd. We beginnen met het script dat de tijd oproept. <script type="text/javascript"> //we openen een nieuwe pagina en maken een functie om datum en tijd op te roepen function tijd() { newwindow=window.open("","","width=250,height=100"); vandaag=new Date(); newwindow.document.write("Het is " + vandaag.getHours() + ":" + vandaag.getMinutes() + "
"); newwindow.document.write("Vandaag is het de " + vandaag.getDate() + "ste. De " + (vandaag.getMonth() + 1) + " de maand" + van het jaar" + vandaag.getFullYear()); newwindow.document.body.style.backgroundColor="black"; newwindow.document.body.style.color="white"; }

Cursus Javascript

51

We zijn al in de helft van ons werk. Nu moeten we een script met de knop Gegevens verbinden. <script language="Javascript" type="text/javascript"> function gegevens(textstring) { newwindow=window.open("","","width=250,height=100,resizable=no,scrollbars=no,toolbar=no"); newwindow.document.write(document.getElementById("txtnaam").value); newwindow.document.close(); }

De code voor de knop Wissen hebben we reeds in de body van het document gezet zodat ons werk gedaan is. In het script waarin we de tijd opvragen doen we het volgende om een (of meerdere) spaties tussen woorden te creëren: + " " +. Zoals we al weten, geeft de browser bij het inlezen van een html pagina steeds 1 spatie weer tussen letters of woorden, ook indien we met de tab toets meerdere spaties in ons document zetten.

8.3

String-object

Een string-object aanmaken kan op twee manieren : • var a=new String(“Dit is een string”); • x = “De variabele x is ook een string”;

8.3.1

String proterties

Met de proterty length wordt de lengte van de string opgevraagd. voorbeeld: var a=new String(“test”); var x = a.length; x zal de waarde 4 bevatten

8.3.2

String methods

8.3.2.1

charAt(index)

Geeft de letter terug op positie index (vanaf 0) Voorbeeld : var a=new String(“test”);

Cursus Javascript

52

var x = a.charAt(2); x zal de waarde “e” bevatten

8.3.3

charCodeAt(index)

Geeft de ascii-code voor de letter op positie index.

concat(string2) Geeft de samengevoegde string terug. Voorbeeld : str1=”Dit is een test. " str2=” Zin 2." str3=str1.concat(str2) de waarde van str3 zal “Dit is een test. Zin 2.” Andere methode: str3 = str1 + str2;

Cursus Javascript

53

9

ZELF OBJECTEN MAKEN

We zullen nu zelf een paar objecten aanmaken en vervolgens de gegevens die ze bevatten opvragen. Ons eerste object zal onze hond zijn, het tweede object onze kat. Het creëren van een object gaat als volgt : We kiezen een naam en maken het object. Voor het gelijkheidsteken zetten we een zelfgekozen naam, na het gelijkheidsteken de melding new Object(). De naam van de eigenschappen kiezen we eveneens zelf, zoals poes.ras of waf.jaar enz… waf=new Object();

We geven het enkele eigenschappen waf=new Object(); waf.naam="Ollie"; waf.ras="Dobberman"; waf.jaar="2007";

We maken het tweede object (de kat) en geven het enkele eigenschappen : poes=new Object(); poes.naam="Snoop"; poes.ras="Perzisch"; poes.jaar="2007";

Nu dat we twee objecten gemaakt hebben en elk enkele eigenschappen hebben toegewezen, gaan we deze opvragen. Alle eigenschappen die we toewijzen aan een object, worden in het geheugen van de browser geladen en kunnen opnieuw opgevraagd worden. Om de gegevens op te vragen zullen we knoppen maken waarop men kan klikken. bv. Geef de naam van de kat en het jaar van de hond of welke is hun ras enz…… Zoals we al gezien hebben, verbinden we knoppen met functies. We zullen nu het document maken met de twee objecten zoals hierboven omschreven. Daarna gaan we de functies maken. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //

Cursus Javascript

54



De volgende stap is het maken van functies. We maken een functie met alle eigenschappen van de hond. function hond() { document.write(waf.jaar,"
"); document.write(waf.ras); document.write(waf.naam); }

We maken een functie met het ras van beide dieren. function ras() { document.write(poes.ras); }

En we maken een functie waarin de ouderdom van de kat en de hond wordt weergegeven : function jaar() { document.write('De hond is van' + waf.jaar + 'en de poes van' + poes.jaar); }

Iedere functie roept één of meerdere eigenschappen op zoals vastgelegd in de objecten. Door deze functies te verbinden met knoppen, kunnen we de eigenschappen van ieder object in een html-document tonen. Hieronder vind je het script met de drie functies onder elkaar. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //"); document.write(waf.ras); document.write(waf.naam); } function ras() { document.write(poes.ras); } function jaar() { document.write('De hond is van' + waf.jaar + 'en de poes van' + poes.jaar); } //]]>

Dit script mag na de tag gezet worden of onmiddellijk na het script waarin we de objecten aanmaken.

Cursus Javascript

55

Nu maken we onze knoppen voor het opvragen van de gegevens :

onclick="jaar();" />

Nu rest ons nog het samenstellen van het volledige document met alle scripts en knoppen. Het volledige xhtml document. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //"); document.write(waf.ras); document.write(waf.naam); } function ras() { document.write(poes.ras); } function jaar() { document.write('De hond is van' + waf.jaar + 'en de poes van' + poes.jaar); } //]]>

Cursus Javascript

56

onclick="ras()" />

Cursus Javascript

57

onclick="jaar()" />

10

VARIABELEN

Een variabele (Eng.:variable) is een geheugenvakje waarin de browser informatie zal opbergen. De naam van de variabele bepaal je zelf, de inhoud ook, bijvoorbeeld var mijnWagen

We hebben een variabele met de naam mijnWagen gemaakt. Nu kennen we aan de variabele een waarde toe: var mijnWagen="Volkswagen"

Telkens als dat we de variabele mijnWagen oproepen, zal deze de waarde Volkswagen weergeven. We maken het iets ingewikkelder : var mijnWagen="Volkswagen" var hoeOud=15 var vanDaag=2007 var hetTotaal=vanDaag-hoeOud document.write("mijn wagen is van het jaar" +

hetTotaal)

In deze oefening hebben we de naam Volkswagen aan een variabele gegeven. Daarbij geven we de waarde "ouderdom van de wagen" en de waarde "huidige jaar" eveneens aan een variabele. We maken eveneens een variabele waarin dat we het aankoopjaar zetten. Maar dit doen we met een berekening. Aangezien we het huidige jaar kennen, en de ouderdom, kunnen we heel gemakkelijk het jaar achterhalen waarin hij voor de eerste keer verkocht werd. Dit alles zullen we in ons document tonen. (dus met document.write). Het volledige document ziet er als volgt uit. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <script type="text/javascript"> //" + "is van het jaar" + hetTotaal); //]]>

Aan een VARIABELE kennen we een waarde of een value toe. Een waarde kan samengesteld zijn:

Cursus Javascript

58

• Uit getallen of NUMBERS, positief of negatief. Ook "0" is een getal. We kunnen ook hexadecimale getallen gebruiken of getallen met komma's of exponele getallen. • Uit BOOLEANS, dus TRUE or FALSE (opgepast niet 1 en 0) gezien in Javascript alles wat 0 is, FALSE is en alle andere getallen TRUE zijn ! • Uit een STRING, dus alles wat tussen "aanhalingstekens" staat. • Uit een OBJECT, zoals hierboven gemaakt. waf=new Object(); • Uit NULL. Dit is niet hetzelfde als nul (zero). NULL betekent niets. • Uit UNDEFINED. Is een nieuwe variabele waaraan nog geen waarde is toegekend. Een klein voorbeeld: "10" + "2" is gelijk aan 10 + 2 is gelijk aan 12

Cursus Javascript

"102"

59

11

OPERATOREN

Operatoren of OPERATORS kunnen één of meerdere VARIABELEN of valueS (waarden) samennemen en een nieuwe value geven. Hieronder geven we de verschillende CLASSES (groepen) van OPERATORS :

11.1

Wiskundige operatoren +

optellen

-

aftrekken

*

vermenigvuldigen

/

delen

%

de rest na een deling ( 10%3 rest 1)

++

verhogings-operator, indien aan de linkerkant van de operand geplaatst, zal het de operand verhogen, en dan de nieuwe waarde doorgeven aan de variabele indien de operator aan de rechterkant van de operand wordt geplaatst, wordt de operand in de variabele gezet en dan wordt de waarde verhoogd. Vb: z = a (a is 10) z = ++a (a wordt 11 en zodus z ook) z = a++ (a en z zijn beide nog 11, dan wordt a 12)

--

idem als hierboven, maar met 1 verminderd ipv vermeerderd

-

negatie (zonder spatie tussen de operator en de waarde) de werkelijke waarde verandert niet

Je kunt deze operatoren combineren.

11.2

Vergelijkingsoperatoren ==

vergelijkt twee operatoren en geeft TRUE indien ze gelijk zijn

!=

vergelijkt en geeft TRUE indien de operatoren NIET gelijk zijn

>

groter dan, geeft TRUE indien waar

>=

groter dan of gelijk aan, geeft TRUE indien groter dan of gelijk

<

kleiner dan, geeft TRUE indien waar

<=

kleiner dan of gelijk aan, geeft TRUE indien kleiner dan of gelijk

Cursus Javascript

60

11.3

Boolean operatoren &&

"en", geeft TRUE indien beide operatoren waar zijn (aan beide voorwaarden moet worden voldaan)

||

"of", geeft TRUE indien IEDERE operator waar is (aan 1 van beide voorwaarden moet worden voldaan)

!

"niet", geeft TRUE indien de negatie waar is (als aan de voorwaarden voldaan is, wordt de volgende stap NIET uitgevoerd)

>

groter dan, geeft TRUE indien waar

>=

groter dan of gelijk aan, geeft TRUE indien groter dan of gelijk

<

kleiner dan, geeft TRUE indien waar

<=

kleiner dan of gelijk aan, geeft TRUE indien kleiner dan of gelijk

11.4

String Strings kunnen ook vergeleken worden bij middel van de vergelijkingsoperatoren Men kan met de + operator strings samen zetten "huis" + "kamer"

11.5

=

"huiskamer"

Toekenningsoperatoren

Met de toekenningsoperator = kan men een waarde aan een variabele geven. Men kan eveneens een andere variabele toekennen. =

kent de waarde van de rechtse operarand toe aan de linkse

+=

telt de waarde van de rechtse operand op bij de linkse variabele

-=

idem maar brengt het in mindering

*=

idem maar zal vermenigvuldigen

/=

idem maar zal delen

&=

geeft het vergelijkingsresultaat door aan de linkse operand

Cursus Javascript

61

12

HET IF – ELSE STATEMENT

De opdracht IF stelt altijd een voorwaarde. Na de voorwaarde volgt de opdracht die wordt uitgevoerd wanneer aan de voorwaarde is voldaan. We hebben al variabelen gezien. We zullen nu het klassieke voorbeeld ontleden waar de bezoeker op een homepage verwelkomd wordt en naar zijn naam gevraagd wordt. Hieronder vind je een voorbeeld. Tussen de head tags zetten we: var bezoeker if (bezoeker == null)bezoeker = prompt ("Goede dag, wat is uw naam ?" , hier uw naam in") if (bezoeker

"vul

== null) bezoeker = "vul uw naam in of klik op OK"

if (bezoeker == "") bezoeker = "naamloos"

En in de body zetten we: <script> document.write("Hallo, ", bezoeker)

We vragen, door middel van een dialoog box in de vorm van een prompt, aan de "bezoeker" hoe hij heet. In de prompt zien we de woorden "vul hier uw naam in". Als de bezoeker NIETS (null) invult, zal de tekst "vul hier uw naam in" blijven staan in de prompt en zal de welkomsgroet op de pagina zijn: Hallo,

vul hier uw naam in ?

Als de bezoeker op CANCEL klikt zien we in de pagina: Hallo, vul uw naam in of klik op OK ?

Als de bezoeker de tekst verwijdert in de dialoog box en op OK klikt, zien we in de pagina: Hallo,

naamloos ?

Hieronder vind je een tweede voorbeeld. Tussen de head tags zetten we : <script language="Javascript"> function test1(objwerelddeel) { if (objwerelddeel.value == "Europa") alert ("Juist, België ligt in Europa"); else { alert ("Dit is niet het juiste werelddeel"); } }

Cursus Javascript

62

En in de body zetten we In welk werelddeel ligt België? In Amerika, Azië of Europa?

We gaan nog een stap verder en zullen tekst controleren. Is de tekst aanwezig dan is alles OK, anders wordt een waarschuwing gegeven. Dit wordt meestal gebruikt bij het controleren van velden in een formulier. Hieronder vind je een voorbeeld. Tussen de head tags zetten we: function juist(objemail) { if (objemail.value == "" || objemail.value.indexOf("@") == -1) alert ("Dit adres is niet geldig !") else { alert ("Uw e-mail adres zal worden vermeld als: " + objemail.value + ".") } }

En in de body zetten we

Geef uw e-mail adres:

Achter de voorwaarde if zie je de voorwaarden waaraan de inhoud van de tekstbalk moet voldoen. Eerst wordt gecontroleerd of er iets in het veld staat, daarna of het @ teken vermeld wordt. De opdracht indexOf gaat na of de string die onmiddelijk na indexOf tussen aanhalingstekens en haakjes gezet wordt, aanwezig is. De –1 na de vergelijkingsoperator == is de waarde die aangeeft dat de string niet gevonden is. Nog een voorbeeld: we zoeken een bepaald stuk tekst. Als die tekst niet aanwezig is wordt een dialoog box getoond. Tussen de head tags zetten we : function zoeken(obj) { var string=obj.value if (string.indexOf ("gedicht") == -1 ) alert ("Dit is niet het juiste onderwerp") else { alert ("Bedankt voor het mooie gedicht") } }

En in de body zetten we:

Cursus Javascript

63

Schrijf iets over gedichten:

Cursus Javascript

64

13

INHOUD

CURSUS JAVASCRIPT ...................................................................................................................................... 3 1 2

INLEIDING ................................................................................................................................................... 4 DE EERSTE STAPPEN ................................................................................................................................... 6 2.1 Het document-object ......................................................................................................................... 8 2.2 De functies......................................................................................................................................... 9 3 DOM (DOCUMENT OBJECT MODULE) ........................................................................................................ 12 3.1 DOM - versies ................................................................................................................................. 13 4 W3C DOM ................................................................................................................................................. 18 4.1 NODES............................................................................................................................................ 19 4.2 Relaties tussen nodes....................................................................................................................... 20 4.3 DOM-Objecten................................................................................................................................ 21 4.4 Elementen refereren ........................................................................................................................ 23 5 DOCUMENT-OJBECT ................................................................................................................................. 27 5.1 Document Object Properties........................................................................................................... 27 5.2 Document Object Methods .............................................................................................................. 28 5.3 Document Object Events ................................................................................................................. 30 6 WINDOW-OBJECT ...................................................................................................................................... 31 6.1 Window Object Objects................................................................................................................... 31 6.2 Window Object Properties .............................................................................................................. 34 6.3 Window Object Methods ................................................................................................................. 36 7 FORMS ...................................................................................................................................................... 46 8 OBJECTEN AANSPREKEN ........................................................................................................................... 49 8.1 Het date-object ................................................................................................................................ 49 8.2 Algemene oefening : ........................................................................................................................ 51 8.3 String-object.................................................................................................................................... 52 9 ZELF OBJECTEN MAKEN ............................................................................................................................ 54 10 VARIABELEN ........................................................................................................................................ 58 11 OPERATOREN ....................................................................................................................................... 60 11.1 Wiskundige operatoren ................................................................................................................... 60 11.2 Vergelijkingsoperatoren.................................................................................................................. 60 11.3 Boolean operatoren......................................................................................................................... 61 11.4 String............................................................................................................................................... 61 11.5 Toekenningsoperatoren................................................................................................................... 61 12 HET IF – ELSE STATEMENT ................................................................................................................. 62 13 INHOUD ................................................................................................................................................ 65

Cursus Javascript

65