Untitled

 Frontend programmeren

Frontend programmeren
Mobiele webapps
 Gabriel Sánchez Cano
Brinkman Uitgeverij · Amsterdam · 2016
isbn 978 90 5752 331 1 / nur 124
Omslagontwerp: Proforma, Barcelona
Redactie en opmaak: Henk Pel
© 2016 Brinkman Uitgeverij, Amsterdam
Gehele of gedeeltelijke overneming of reproductie van de inhoud van deze uitgave, op welke
wijze dan ook, zonder voorafgaande schriftelijke toestemming van de auteursrechthebbende
is verboden, behoudens de beperkingen bij de wet gesteld. Het verbod betreft ook gehele of
gedeeltelijke bewerking. De uitgever is met uitsluiting van ieder ander gerechtigd de door
derden verschuldigde vergoedingen voor kopiëren, als bedoeld in artikel 17 Auteurswet 1912
en in het kb van 20 juni 1974 (Stb. 351, 1974) ex artikel 16b Auteurswet 1912, te innen en/of
daartoe in en buiten rechte op te treden.
Correspondentie inzake overneming of reproductie richten aan:
Brinkman Uitgeverij, Postbus 59686, 1040 ld Amsterdam
www.brinkman-uitgeverij.nl
tel. 020-4120970, fax 020-4120972
e-mail: info@brinkman-uitgeverij.nl
v
 Inhoud Inhoud
 1 Basis HTML5 en CSS3—1
 1.1 Inleiding 1
Evolutie van HTML 1
Lay-out en design van een webpagina 1
Van concept tot realisatie 2
De index of homepagina 2
Mappenstructuur van het project 3
HTML-editors 3
Geneste elementen 5
Browsers 6
Meta-elementen 8
Semantische elementen 10
Hiërarchie van elementen 11
id of class? 12
 1.2 CSS3 13
Inleiding 14
CSS-syntaxis 14
Stijlen coderen 17
<head>-stijlen 17
In-line-stijlen 18
De stylesheet 22
 1.3 Webkleuren 29
 1.4 Navigatie 33
Codering van de navigatie 33
Ontwerp van de navigatie 36
 1.5 Logo 42
Codering van het logo 42
Design van het logo 44
 1.6 Hoofd-content 46
Design van de hoofd-content 47
Browser-prefi x 48
 1.7 Positionering 51
relatieve positie 52
Lagen 56
 1.8 Codering en design van de footer 60
Symbolen in HTML 60
vi Inhoud
 1.9 De playlist-pagina 62
Codering van playlist-pagina 63
Wat zijn events? 65
 1.10 De formulierpagina 76
 1.11 De contactpagina 86
Codering van de contactpagina 86
Design van de contactpagina 87
 1.12 Responsive design 88
Grid-frameworks 89
Gridless 89
Voorbeeld van niet vloeiend design 89
Voorbeeld van vloeiend design 90
Responsive browser-knop 90
@media query 91
 1.13 Material design 95
Materiaaleigenschappen 96
Materiaal met objecten 97
Licht en schaduw van objecten 98
Materiaalomvorming 98
Beweging en betekenis 99
Eigenschappen van objecten en schaduwen 100
Hiërarchie van objecten 101
Interactie 101
Beweging 101
 1.14 Een material-design-sjabloon 104
Hoofdmenu 105
Het header-element 106
Translate3d 109
Het ~-teken 110
Tabs 112
Codering van de cards 114
 1.15 Material-design-project 117
De website XtreemTravel 117
De welkomstpagina 118
De windsurfi ng-pagina 118
De mountainclimbing-pagina 119
De snorkelenpagina 119
 Inhoud vii
 2 JavaScript—121
 2.1 Inleiding JavaScript 121
JavaScript-console 123
Taalcomponenten 124
JavaScript-variabelen 126
 2.2 Datatypes 131
Het datatype string 132
De methode typeof 132
Het datatype: boolean 133
Het datatype: number (integer) 133
Het datatype: number (fl oating-point) 133
parseInt() 134
parseFloat() 134
parseInt() 135
toString() 135
 2.3 Het Array-object 137
Een Array-object declareren 138
Array-elementen declareren 138
Array-methodes 141
Array-pointers 142
 2.4 Objecten 152
 2.5 Het Date-object 156
Creëer een Date-object 156
Creëer een Date-object met parameters 157
Creëer een Date-object met string 158
Creëer een Date-object met getallen 159
 2.6 Date-methodes 160
getFullYear 161
 2.7 Beslissingsstructuren 162
De opdracht if 162
De clausule else 164
AND-vergelijking 164
De clausule else if 166
De ternary-operator (? : ) 167
 2.8 Stroomdiagrammen 169
 2.9 Switch 171
 2.10 Eigen functies 173
Functie of methode 174
Externe functies 176
De tag <script source> 177
Functies dynamisch uitvoeren 180
Scope van variabelen 181
De array arguments[] 182
viii Inhoud
 2.11 Lussen 184
De for()-lus 185
De functie charAt() 187
 2.12 De for(in)-lus 190
 2.13 De while()-lus 193
De do-while()-lus 196
 2.14 Het Math-object 197
Math.abs(x) 198
Math.ceil(x) 198
Math.fl oor(x) 198
Math.max() 199
Math.min() 199
Math.round() 200
Math.random() 200
 2.15 String-methodes 201
indexOf() 202
Length 204
charAt() 204
split() 204
substring() 205
substr() 206
trim() 206
toLowerCase() en toUpperCase() 206
 2.16 Algoritmes 207
Het algoritme binary-search 208
Een voorbeeld 208
Pseudocode 209
 2.17 Het Document Object Model 213
getElementById 214
DOM-events (gebeurtenis) 214
De functie setTimeout() 215
De functie clearTimeout() 216
Mouse-events 217
Form-events 218
Keyboard-events 222
 2.18 Cookies 223
Hoe werk je met cookies? 224
JavaScript met cookies 225
Browser en cookies 228
 2.19 Een winkelwagentje in JavaScript 229
 Inhoud ix
 3 OOP in JavaScript—235
 3.1 Het UML class-diagram 235
Class met properties 236
Class met methodes 236
Subclass 236
 3.2 Het factory pattern 237
Destructor 239
Object-properties wijzigen 239
 3.3 Constructor-pattern 240
 3.4 Prototype-pattern 242
Objecten kunnen berichten naar elkaar sturen 243
 3.5 Inheritance (overerven) 244
Overschrijven van parent-methodes 246
Delete-function 247
 3.6 Een OOP videoPlayer 248
Rekenmachine algoritme 252
 3.7 Speciale functions 253
Externe methodes aan objecten koppelen 254
Call 254
Apply 256
Bind 256
 3.8 Anonieme functions 259
Callback-functions 259
Zelfuitvoerende functions 260
Return-functions 260
Function-closures 261
Function-heredity 262
 3.9 JSON-object-literals 264
Objecten als properties van het object window 265
Geneste JSON-object-literals 266
Chaining properties 266
Literal-objecten bundelen 267
 3.10 Lokale opslagcapaciteit (local storage) 268
Local storage lezen 269
 3.11 OOP webshop 270
Herbruikbare code 272
x Inhoud
 4 jQuery—277
 4.1 Basis van mobiele applicaties 277
Wat is een app? 278
Native apps 278
Webapps 278
Hybride apps 279
Native apps, webapps of hybride apps? 279
Frameworks voor mobiele applicaties 279
Een lokale testomgeving opzetten 280
De webserver Apache 280
Opera Mobile Emulator 281
De ontwikkelomgeving 282
De webapp Hello World 282
Het element <meta viewport> 284
Content Delivery Network (CDN) 284
Data-role 284
 4.2 Een testomgeving in de cloud opzetten 286
 4.3 De webapp FlashTix 287
De homepage 288
Functioneel ontwerp van de homepage 288
Header van de homepage 289
Content van de homepage 291
Footer van de homepage 292
Design van de homepage 293
Het attribuut data-icon 295
Het attribuut data-iconpos 295
 4.4 De lastminute-pagina 296
Functioneel ontwerp 296
Codering van de lastminute-pagina 297
Content van de lastminute-pagina 298
 4.5 De biopagina 300
Functioneel ontwerp 300
Codering van de biopagina 301
Het element <video> 302
Het element <source> 303
Mediabestandsformaten 303
 4.6 De bestelpagina 304
Functioneel ontwerp van de bestelpagina 305
Codering van de bestelpagina 305
Het attribuut input type= "range" 307
Data-role= "fi eldcontain" 307
 4.7 Je eigen lastminute-webapp 310
Functioneel ontwerp van de homepage 311
 Inhoud xi
 4.8 jQuery programmeren 312
De jQuery-wrapper 313
jQuery-chains 313
Use cases van de homepage 313
DOM-elementen laden 314
Content toevoegen: prepend() en append() 314
Verwijderen: remove() 317
 4.9 Events en event-handlers 318
De functie bind() 319
Events inspecteren 321
De functie unbind() 322
De functie one() 323
De functie live() 323
De functie die() 323
De functie trigger() 323
 4.10 Het canvas van HTML5 324
Het canvasraster 325
De canvas-context 325
Tekenen in het canvas 325
De canvasfunctie gradient() 326
De fi llStyle 326
De functie fi llRect() 327
De functie strokeRect() 327
De functie clearRect() 327
Canvas: font en shadow 327
Bogen en cirkels 328
Interactief tekenen 328
Canvasanimaties 329
 4.11 Use cases van de lastminute-pagina 331
Child-selectors 332
De functie addClass() 333
De functie CSS() 333
Eigenschap-selectors [ ] 333
De functie show() 334
De functie hide() 334
De wildcard-selectors van CSS 335
De beginwaardeselector [^=] 335
De eindwaardeselector [=] 336
De wildcard-selector [*=] 336
De functie size() 336
De functie fi rst() 336
De functie last() 336
De functie html() 336
De functie html(‘content’) 337
xii Inhoud
Elementen verplaatsen 337
De functies after() en before() 337
De each (iterator) 338
De functie insertBefore( ) 338
 4.12 Use cases van de biopagina 339
data-role= "tabs" 340
data-role= "navbar" 340
class= "ui-body-d" 340
De zoek-bar 341
jQuery-plug-ins 341
 4.13 Use cases van de bestelpagina 343
Wat is AJAX? 343
De functie .ajax() 344
Het server-script 346
 4.14 De e-ticketspagina 346
Use cases van de e-ticketspagina 348
 4.15 De agendapagina 348
Functioneel ontwerp van de agendapagina 349
Use cases van de agendapagina 350
Codering van de agendapagina 350
De knop Item toevoegen 350
De knop Selecteren 352
Local storage 353
De agenda opnieuw laden 354
De knop Verwijderen 354
 4.16 De locatiepagina 355
Codering van de locatiepagina 356
Header en footer van de locatiepagina 357
Use cases van de locatiepagina 357
Content van de locatiepagina 358
Google-markers 359
 Register—361
1
 1 Basis HTML5 en CSS3
 1.1 Inleiding
HTML is de lingua franca van het internet. Het is de programmeertaal die de technologieën achter het internet heeft verenigd en bevordert alle communicatie binnen het internet. Alle communicatie loopt via webpagina’s en alle webpagina’s zijn
in HTML geschreven.
Evolutie van HTML
HTML of HyperText Markup Language is in 1991 ontwikkeld door sir Tim Berners-Lee om wetenschappelijke documenten van het CERN, een Europese organisatie die fundamenteel onderzoek doet naar elementaire deeltjes, toegankelijk
te maken. Al snel werden de mogelijkheden van HTML onderkend en in de loop
der jaren verschenen steeds betere browsers. Het World Wide Web Consortium
(W3C) nam in 1996 de ontwikkeling van HTML over. Versie HTML 3.2 kwam in
januari 1997 tot stand. In december 1997 volgde een eerste versie van HTML 4,
gevolgd door de eerste versie van HTML5 in januari 2008. Al in 2007 zei Steve Jobs
dat HTML5 de software-Flash overbodig zou maken. Hij herhaalde zijn woorden
bij de introductie van de iPad in 2010.
De belangrijkste aanpassingen in HTML5 zijn het uniform afhandelen van fouten,
de mogelijkheid om een document logischer op te bouwen en nieuwe invoertypes.
HTML5 wordt ondersteund door alle nieuwe browsers, waaronder FireFox, Google
Chrome en Safari.
Lay-out en design van een webpagina
Uit onderzoek blijkt dat de meeste webdesigners in de loop der jaren zijn gaan ontwerpen volgens dezelfde patronen. Bij de meeste moderne websites komen we het
volgende ontwerp tegen:
• een webpagina met een banner en navigatie bovenaan;
• een of meer artikelen die de content vormen;
• een kolom aan de rechterkant voor reclame;
• een voettekst met bedrijfsinformatie onderaan.
Een voorspelbare website is makkelijker om te navigeren en de informatie is eenvoudiger te vinden.
2 1 Basis HTML5 en CSS3
Figuur 1.1 Lay-out van een webpagina
Van concept tot realisatie
In de volgende paragrafen maken we een website voor Radio GaGa. Radio GaGa
wil een website met een mooi vormgegeven homepage en met links naar playlists
waar de users naar muziek kunnen luisteren of video’s van concerten kunnen bekijken. Daarna komt een pagina met een formulier voor het bestellen van tickets voor
concerten.
Dit project pakken we op de volgende manier aan.
Ten eerste splitsen we het project op in kleinere delen en ten tweede wisselen we
bij ieder deel tussen markup (tags in de vorm van code) en design (ontwerp). In dit
hoofdstuk maken we de volgende webpagina’s:
• playlist.html
• formulier.html
• contact.html
De index of homepagina
We beginnen met het maken van de indexpagina. Deze pagina moet er als volgt
uitzien:
1.1 Inleiding 3
Figuur 1.2 De indexpagina
Deze pagina krijgt bovenaan een navigatiebar met daarin de navigatie naar de andere pagina’s. Daaronder komt het logo van Radio GaGa. Onder het logo komt de
content. De content bestaat uit een draaiende disk. Links en rechts, in het midden
van de pagina, komen bladerknoppen met een simpele navigatie naar de volgende
of de vorige pagina. Als laatste maken we de footer van de pagina met links naar
Twitter, YouTube en Facebook van Radio GaGa.
Mappenstructuur van het project
Een gestructureerde aanpak betekent een duidelijke mappenstructuur voor ons
project zodat we precies weten waar onze HTML en content te vinden is. De volgende fi guur toont de gewenste structuur:
Figuur 1.3
HTML-editors
Om de opgaven en lab-opdrachten uit dit boek te kunnen maken heb je een
HTML-editor nodig. Een HTML-editor is een applicatie voor het schrijven van
HTML-teksten. Deze teksten noemen we webpagina’s. Hierzijn twee websites waar
je gratis HTML-editors kunt downloaden:
4 1 Basis HTML5 en CSS3
• Brackets download je vanaf de volgende website: http://brackets.io/?lang=en
• Sublime text download je vanaf de volgende website: http://www.sublimetext.com
Na het downloaden en installeren van je favoriete editor begin je met het coderen
van de indexpagina.
In deze paragraaf maken we de code van de indexpagina. We maken kennis met de
volgende HTML-elementen:
• comments
• DOCTYPE
• geneste elementen
• meta-elementen
• semantische elementen
• ID en classes
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
 Webbouw 1 t/m 4
Lab 01
HTML-elementen
Webpagina’s bestaan uit platte tekst met markeringstekens, ook wel aangeduid
als tags. Hierin wordt de lay-out aangegeven, oftewel hoe de tekst gestructureerd
wordt. De tags worden door de webrowser geïnterpreteerd en de gebruiker krijgt
de opgemaakte tekst in de vorm van een webpagina te zien. Een markering tussen
haakjes, bijvoorbeeld <html> of <form>, wordt een tag genoemd. De syntaxis van
tags is als volgt:
<open tag> content van de tag </sluiten tag>
Als je een begintag hebt geopend, bijvoorbeeld <html>, eindig je altijd met een eindtag, bijvoorbeeld </html>. Je ziet dat de eindtag altijd een / bevat.
We beginnen nu met het coderen van onze eerste webpagina: de indexpagina.
• Webbouw 1
Open je favoriete HTML-editor en typ de volgende code. Sla het bestand op als
index.html in de map RadioGaGa.
<!-- website RadioGaGa -->
<!DOCTYPE html>
<html lang="nl">
 <head>
 <meta http-equiv="Content-Type"
1.1 Inleiding 5
 content="text/html;
 charset=UTF-8">
 <title>RadioGaGa</title>
 </head>
 <body>
 . . .
 </body>
</html>
Op de puntjes coderen we verder de content van de pagina tussen de tags <body> en
</body> in.
Hier volgt een uitleg over de elementen in Webbouw 1.
Element <!-- commentaren -->
We begonnen de code met het commentaar:
<!-- website RadioGaGa -->
Zulk soort commentaar kunnen we overal op de pagina plaatsen en ze zijn bedoeld
om de structuur en code van de pagina toe te lichten. Een commentaar heeft geen
eff ect op de weergave van de pagina.
Element <!DOCTYPE html>
Browsers kunnen meerdere soorten documenten interpreteren, zoals webpagina’s
en PDF’s. Het is daarom belangrijk om ons HTML-document te identifi ceren met
de tag <!DOCTYPE html>. Zo kan de browser onze code vertalen in een webpagina.
Element <html lang="nl">
De tweede regel in Webbouw 1 is het element <html>. We coderen de namen van
alle tags in kleine letters. De enige tag met hoofdletters is het element <!DOCTYPE>.
Sommige elementen kunnen attributen bevatten. Alle attributen krijgen een
naam en een waarde tussen dubbele aanhalingstekens. In dit geval is het attribuut
lang="nl". Zo geef je aan dat de content van deze pagina in het Nederlands wordt
geschreven.
Element </html> sluiten
Zoals te zien is sluiten we alle elementen met het slash-teken (/). Alle elementen
moeten gesloten worden. Als je een element niet goed sluit, leidt dit tot fouten in
het weergeven van de pagina.
Geneste elementen
Het eerste wat opvalt in Webbouw 1 zijn de geneste elementen. Dat zijn elementen
binnen andere elementen. In dit geval bevat <html> de elementen <head> en <body>.
Het <head>-element bevat op zijn beurt de <meta>- en <title>-elementen. Een genest element begin je met de Tab-toets. Bijvoorbeeld:
6 1 Basis HTML5 en CSS3
<html lang="nl">
 <head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
 <title>RadioGaGa</title>
 </head>
 <body>
 . . .
 </body>
</html>
We gebruiken Tab’s om de code leesbaarder te maken. Zo zien we in één oogopslag
welke elementen andere geneste elementen bevatten. Het gebruiken van Tab’s heeft
geen eff ect op het weergeven van de webpagina.
Geneste elementen moeten in de juiste volgorde worden gesloten. Een genest element moet als eerste gesloten worden. Daarna sluit je het element van het niveau
hoger. De volgende fi guur laat zien hoe je geneste elementen goed sluit.
Figuur 1.4 Geneste elementen
Element <head>
We hebben de webpagina ingedeeld in <head> (hoofd) en <body> (lichaam). We gebruiken het <head>-element voor meta-informatie en voor andere elementen zoals
<title>, en het <body>-element voor de content.
Element <title>
Iedere pagina krijgt een titel. De volgende regel zorgt er bijvoorbeeld voor dat de
titel RadioGaGa bovenaan de browser verschijnt:
<title>RadioGaGa</title>
De titel RadioGaGa verschijnt, maar niet de <title>-tags.
Na het opslaan van Webbouw 1 als index.html in de map RadioGaGa controleren
we het resultaat in meerdere browsers.
Browsers
Om de resultaten van de opgaven en de lab-opdrachten te kunnen zien moeten we
eerst de volgende browsers downloaden en installeren.
1.1 Inleiding 7
Browser Website
https://www.google.nl/chrome/browser/desktop/
https://support.mozilla.org/nl
http://www.opera.com/
http://safari.nl.softonic.com/
http://windows.microsoft.com/nl-nl/internet-explorer/
download-ie
Na het downloaden en installeren van deze browsers openen we het bestand index.html door er met de muis op te klikken. De browser presenteert de code van
Webbouw 1 zoals te zien is in de volgende fi guur.
Figuur 1.5 Het resultaat van Webbouw 1
LET OP
Gebruik dubbele aanhalingstekens (") in plaats van twee enkele aanhalingstekens
(' '). Bijvoorbeeld:
<html lang=''nl''> is niet correct.
<html lang="nl"> is correct.
We krijgen alleen maar de puntjes binnen het <body>-element te zien. In ons geval
hebben we Mozilla gebruikt. Het is dus niet nodig om een eigen domeinnaam bij
een provider aan te schaff en om de resultaten van de opgaven te kunnen zien. Met
de browsers kunnen we zowel internetten als onze webpagina’s bekijken. Als je later je eigen website wilt uploaden moet je wel een eigen domeinnaam aanschaff en.
8 1 Basis HTML5 en CSS3
Meta-elementen
We gebruiken <meta>-elementen voor het toevoegen van meta-informatie. Dit
is informatie over de informatie van de pagina. Deze informatie is relevant voor
browsers en zoekmachines. Google en Yahoo maken gebruik van deze informatie
in hun zoekalgoritmes. We kunnen meta-elementen ook gebruiken voor andere
doelen, zoals het automatisch laden van een andere pagina. Ieder meta-element
bevat de attributen:
name
content
Bijvoorbeeld, om de naam van de auteur van de pagina aan te duiden codeer je het
volgende:
name="author" content="naam van auteur"
In de volgende opgave coderen we belangrijke meta-informatie over de te bouwen
website.
Een meta-tag hoef je niet te sluiten met een / (het slash-teken).
LET OP
We mogen een lange HTML-tag alleen afbreken na een spatie. Dit doen we bijvoorbeeld om de code te verduidelijken.
• Webbouw 2
Open index.html en voeg de volgende meta-informatie eraan toe.
 <head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
 <meta name="robots" content="all">
 <meta name="language" content="Dutch">
 <meta name="author" content="je eigen naam">
 <meta name="description"
 content="RadioGaGa marketing">
 <meta name="keywords"
 content="RadioGaGa, muziek, playlist">
 <meta name="copyright" content="copyright">
 <title>RadioGaGa</title>
 </head>
 <body>
 . . .
 </body>
</html>
Hieronder volgt een uitleg over Webbouw 2.
1.1 Inleiding 9
<meta charset>
Charset is de set tekens ontworpen voor computers. In Webbouw 2 hebben we het
volgende attribuut gespecifi ceerd:
charset="UTF-8"
Dit is de karakterset voor alle Europese talen. Maar er zijn andere karaktersets,
bijvoorbeeld:
charset taal
charset="ISO-8859-6" Grieks
charset="ISO-8859-7" Arabisch
charset="UTF-8" Europese talen
<meta name="robots">
Gebruik deze tag als je gevonden wilt worden door zoekmachines:
<meta name="robots" content="all">
<meta name="language">
Om de taal van de content specifi ek aan te geven gebruiken we dit attribuut:
<meta name="language" content="Dutch">
<meta name="author">
Om de naam van de auteur van de pagina aan te geven gebruiken we:
<meta name="author" content="je eigen naam">
<meta name="description">
Voor een korte beschrijving van de website gebruiken we het attribuut description:
<meta name="description"
content="RadioGaGa marketing">
<meta name="keywords">
Voor een lijst met sleutelwoorden over de website gebruiken we het attribuut
keywords:
<meta name="keywords"
 content="RadioGaGa, muziek, playlist">
<meta http-equiv="refresh">
Het attribuut http-equiv="refresh" kunnen we gebruiken om het aantal seconden
voor het refreshen van deze pagina te specifi ceren. Het kan ook de naam van een
pagina aangeven waar we na een aantal seconden automatisch naar willen doorlinken, bijvoorbeeld een inleidingpagina:
10 1 Basis HTML5 en CSS3
<meta http-equiv=
"refresh"content="10;url=http://website.com">
Semantische elementen
De volgende HTML5-elementen hebben een semantische betekenis die de positie
en het doel van het element in een webpagina beschrijven.
<head> hoofd
<body> lichaam
<nav> navigatie
<main> hoofd-content
<section> sectie
<div> divisie
<p> paragraaf
<footer> voet
Element <body>
Na het defi niëren van het <head>-element met alle <meta>- en <title>-elementen
kunnen we verder met het coderen van de structuur van de pagina. Dit doen we
binnen het <body>-element.
Element <nav>
Binnen het <nav>-element coderen we de elementen die nodig zijn voor de navigatie van de website.
Element <main>
In het <main>-element coderen we de hoofd-content van de pagina, bijvoorbeeld
een groep afbeeldingen en teksten die het thema van de pagina defi niëren.
Element <section>
Het <main>-element mag één of meer secties of kolommen hebben. Dit doen we
met het <section>-element. Hier kunnen we verschillende gerelateerde content met
een thema combineren. Bijvoorbeeld, een <section>-element met het thema sport
mag een sectie sport en een sectie sportnieuws hebben.
Element <div>
Binnen het element <div> plaatsen we generieke (diverse) content, bijvoorbeeld
algemene plaatjes en teksten. Een <section> mag meerdere <div>’s hebben.
Element <footer>
Het <footer>-element is bedoeld voor informatie over het bedrijf, de webdesigner
en de copyrights. Ook kunnen we hier belangrijke links vinden.
1.1 Inleiding 11
• Webbouw 3
Open index.html en vervang de puntjes door de volgende secties:
 <body>
 <nav>
 <h3>Navigatie</h3>
 </nav>
 <div id="logo">
 <h3>Logo</h3>
 </div>
 <main>
 <h4>Hoofd-content</h4>
 </main>
 <footer>
 <h3>Footer</h3>
 </footer>
 </body>
</html>
Hiërarchie van elementen
Parent-elementen bevatten child-elementen en dit zijn geneste elementen. Het
<html>-element is het parent-element van alle andere elementen. Het <body>-
element is een child-element van het <html>-element maar ook een parent-element
van de elementen <nav>, <main> en <footer>.
Figuur 1.6
Elementen <h1> tot <h6>
Met de elementen <h1> tot <h6> defi niëren we de lettergrootte van teksten binnen
de elementen. Bijvoorbeeld:
12 1 Basis HTML5 en CSS3
<h1>RadioGaGa</h1>
<h2>RadioGaGA</h2>
<h3>RadioGaGa</h3>
<h4>RadioGaGa</h4>
<h5>RadioGaGA</h5>
<h6>RadioGaGA</h6>
id of class?
Als je een element identifi ceert met het attribuut id=, dan moet dit een unieke
naam zijn. We mogen geen twee elementen met dezelfde id benoemen. In Webbouw 3 hebben we het element:
<div id="logo">
Wanneer je meerdere elementen dezelfde visuele attributen wilt geven, krijgen ze
allemaal dezelfde class. Bijvoorbeeld:
<div id="logo" class="blauw">
<div id="footer" class="blauw">
Zo identifi ceren we elementen om ze later visuele attributen te kunnen geven. Dat
doen we in de volgende paragraaf wanneer we beginnen met het coderen van CSSstylesheets.
Figuur 1.7
LET OP
Als je geen resultaat krijgt dan moet je je code verbeteren. De meest voorkomende
beginnersfouten zijn het niet goed afsluiten van de tags.
Ook spellingsfouten bij namen van de elementen zijn een probleem. Bijvoorbeeld
<budy> in plaats van <body>.
Of <htm1> met het getal 1 in plaats van <html> met de letter l.
Het resultaat van deze fouten kan een lege pagina in de browser zijn.
1.2 CSS3 13
• Webbouw 4
Open index.html en voeg het nieuwe <div>-element binnen het <main>-element
toe:
<div id="disc"> <h4>Disc</h4>
Binnen disc voeg je het volgende element toe:
<div id="center"> <h4>Center</h4>
Het resultaat moet er als volgt uitzien:
Figuur 1.8
• Lab 01
In deze lab-opdracht maak je een nieuw script en sla je het op als labs.html. In dit
script maak je vier div’s met de volgende hiërarchie:
 div 1
 div 2
 div 3
 div 4
 1.2 CSS3
In deze paragraaf beginnen we met de vormgeving van de indexpagina. We maken
kennis met de volgende CSS-attributen:
• width
• height
• commentaren
• background
• overfl ow
• text-align
• margin
• border
14 1 Basis HTML5 en CSS3
• font
• box-shadow
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
 Oefening 1 t/m 6
Webbouw 5 t/m 6
Lab 02
CSS (Cascading Style Sheets) is ontstaan uit onvrede onder webdesigners over
het gebruik van HTML-tags voor het opmaken van webpagina’s. De CSS Working
Group van de W3C heeft versie 1 van CSS al eind 1996 ontwikkeld. Het gaf designers voor het eerst de mogelijkheid om de opmaak van lettertypen en de positie
van de elementen van een webpagina te bepalen.
Inleiding
CSS3 biedt meer geavanceerde mogelijkheden en dringt het aantal Javascriptelementen terug, waardoor de totale omvang van een pagina kleiner wordt, wat ten
goede komt aan de ranking bij zoekmachines. Belangrijk zijn daarnaast de grafi -
sche mogelijkheden, zoals drop shadows, ronde hoeken, meerdere achtergronden,
animaties en transparanties.
CSS-syntaxis
Met CSS-commando’s kunnen we één of meer HTML-elementen selecteren om
vervolgens stijlattributen toe te wijzen. Zo kunnen we de geselecteerde elementen
visuele eigenschappen toeschrijven. Elk commando heeft de volgende syntaxis:
selector {attribuut: waarde;}
Het commando bestaat uit twee delen:
selector { attribuut:waarde ; }
1 Selector is de naam van het HTML-element dat we willen selecteren.
2 Het paar attribuut:waarde beschrijft het attribuut en de attribuutwaarde die we
willen toekennen aan het geselecteerde HTML-element.
We schrijven de naam van het HTML-element zonder de haakjes < >. Tussen de
accolades { } schrijven we het paar attribuut:waarde. We eindigen met een puntkomma. We kunnen de geselecteerde elementen een of meer attributen toekennen,
bijvoorbeeld:
h1 {
 attribuut1: waarde1;
 attribuut2: waarde2;
}
1.2 CSS3 15
Elementen selecteren
Hier zien we een voorbeeld van het selecteren van meerdere HTML-elementen om
vervolgens visuele attributen toe te wijzen.
We passen de syntaxis toe:
h1 {
 color: black;
 text-align: center;
}
color en text-align
In het vorige voorbeeld hebben we alle <h1>-elementen geselecteerd om vervolgens
het attribuut color (tekstkleur) toe te wijzen. Het attribuut color heeft de waarde
black (zwart) gekregen. Het resultaat is dat de content van alle <h1>-elementen
zwart wordt weergegeven. Het attribuut text-align (tekst uitlijnen) krijgt de
waarde center (centreren). De attributen color en text-color zijn verwisselbaar en
worden herkend door alle browsers.
Een #id selecteren
Om een uniek element te selecteren gebruiken we de id van het element. Bijvoorbeeld, in index.html is er het element <div id="logo">. We kunnen door middel
van de id dit specifi eke element selecteren.
Hier passen we de syntaxis toe:
#logo {
 height: 200px;
}
Omdat geen twee elementen dezelfde id mogen hebben, hebben we hier het specifi eke element met id="logo" geselecteerd en het attribuut height (hoogte) toegekend met de waarde 200px, met andere woorden: 200 pixels hoog.
Een .class selecteren
Om alle elementen met dezelfde class-naam te selecteren gebruiken we een punt
gevolgd door de naam van de class. We kunnen door middel van de class-naam
visuele attributen voor meerdere elementen defi niëren.
Hier passen we de syntaxis toe:
.blauw {
 height: 200px;
}
Wat zijn pixels?
Een pixel is een vierkante punt op het beeldscherm van je PC. De resolutie van
beeldschermen wordt weergegeven in aantallen pixels. Schermen van smart-telefoons hebben bijvoorbeeld 600 pixels in de breedte en schermen van pc’s hebben
tot 1200 pixels in de breedte. Pixels zijn erg klein. Om de pixels van een beeld te
16 1 Basis HTML5 en CSS3
zien moeten we de afbeelding vergroten. In de volgende fi guur zien we de pixels
van de afbeelding.
Figuur 1.9
width en height
Met de attributen width (breedte) en height (hoogte) defi niëren we de dimensies
van de elementen in pixels en percentages, bijvoorbeeld:
#logo {
 width: 100%;
 height: 200px;
}
color
Om te werken met tekst in kleur gebruiken we het attribuut color als volgt:
color: black;
backgroundColor
De attributen background, background-color en backgroundColor zijn verwisselbaar en
herkend bij alle browsers.
Nieuwe HTML-properties, zoals backgroundColor, worden geschreven in camelCase. Dat wil zeggen, zonder verbindingsstreepje en de eerste letter van het tweede
woord krijgt een hoofdletter, dus backgroundColor.
Om een achtergrondkleur toe te passen gebruiken we het attribuut backgroundColor
als volgt:
backgroundColor: red;
Hier volgt een lijst met de meest voorkomende webkleuren – waarbij je ook het
gebruik van camelCase ziet:
aqua
aquaMarine
black
blue
blueViolet
brown
cadetBlue
chocolate
1.2 CSS3 17
coral
crimson
darkBlue
gray
green
greenYellow
indigo
orangeRed
red
border
Borders zijn de randen van de elementen. Met het attribuut border bepalen we de
stijl, kleur en dikte van de borders. Er zijn de volgende stijlen:
border: solid ononderbroken
border: dotted puntjes
border: dashed streepjes
Bijvoorbeeld de volgende borderstijlen:
border: 2px dotted black;
backgroundColor: orange;
geven een zwarte rand van puntjes van 2 pixels dik met een oranje achtergrond,
zoals hieronder:
Stijlen coderen
Er zijn drie manieren om stijlen te declareren:
1. Binnen het <head>-element (voor korte opdrachten)
2. In line (voor het direct toepassen van stijlen)
3. In een externe style sheet (voor grotere opdrachten)
<head>-stijlen
Stijlen binnen de <head> coderen we met de tags <style> en </style>, bijvoorbeeld:
<head>
<style>
 body{
 width: 40%;
 font-size: 22px;
 }
</style>
</head>
18 1 Basis HTML5 en CSS3
Hier hebben we stijlen voor de <body> gecodeerd.
In-line-stijlen
In-line-stijlen coderen we direct binnen een element met de eigenschap style=,
bijvoorbeeld:
 <h1 style="color: green;">
Hier zeggen we dat de tekstkleur in element <h1> groen is.
In de volgende opgave passen we twee methodes toe bij het coderen van stijlen.
Hier volgt een aantal extra oefeningen om de CSS-attributen goed te doorgronden
• Oefening 1: backgroundColor
Open een nieuw bestand en sla het op als oefening.html. Voeg de volgende code
toe:
<!DOCTYPE html>
<html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
 <title>Oefening</title>
 <style>
 body{
 border: 1px solid black;
 width: 40%;
 font-size: 80px;
 }
 #A{
 width: 150px;
 height: 150px;
 backgroundColor: green;
 }
 #B{
 width: 150px;
 height: 150px;
 backgroundColor: red;
 }
 #C{
 width: 150px;
 height: 150px;
 backgroundColor: blue;
 }
 </style>
</head>
1.2 CSS3 19
<body>
 <div id="A">
 A
 </div>
 <div id="B">
 B
 </div>
 <div id="C">
 C
 </div>
</body>
</html>
Figuur 1.10 Resultaat van oefening 1
• Oefening 2: Borders
In deze oefening coderen we in-line-stijlen, bijvoorbeeld:
 <div style="border: 1px solid black;">
voor de borders van elementen A, B en C:
• A met een ononderbroken zwarte rand met een dikte van 1 pixel.
• B met een ononderbroken zwarte rand met een dikte van 2 pixels.
• C met een ononderboken en gestippelde rand met een dikte van 3 pixels.
Figuur 1.11 Resultaat met borders
• Oefening 3: Marges
In deze oefening gaan we meer stijlen toevoegen binnen de <head>.
<head>
 <style>
 ...
 </style>
</head>
20 1 Basis HTML5 en CSS3
A krijgt de volgende marges:
• Een bovenmarge van 10 pixels.
• Een linkermarge van 10 pixels.
B krijgt de volgende marges:
• Een bovenmarge van 20 pixels.
• Een linkermarge van 70 pixels.
• Een ondermarge van 20 pixels.
C krijgt de volgende marges:
• Een auto linkermarge.
• Een auto rechtermarge.
• Een ondermarge van 30 pixels.
Figuur 1.12 Resultaat met marges
• Oefening 4: Padding
De padding (invulling) verwijst naar de ruimte tussen de rand en de content van een
element. Een padding geven we aan in percentages of pixels. Bijvoorbeeld:
padding: 10px 5px 0% 30px;
is hetzelfde als:
padding-top: 10px;
padding-right: 5px;
padding-bottom: 0%;
padding-left: 30px;
Wanneer alle paddings gelijk zijn zeggen we gewoon:
padding: 5%;
Codeer in de <head> de volgende stijlen voor A en C.
• A met een linker-padding van 25 pixels.
• C met een rechter-padding van 25 pixels.
1.2 CSS3 21
Figuur 1.13 Resultaat met paddings
In deze fi guur zien we dat elementen A en C breder dan B zijn geworden. Dat komt
door de toegevoegde paddings. Het resultaat is dat A en C nu 175 pixels breed zijn.
• Oefening 5: Box-shadow
Voor schaduwen van elementen gebruiken we box-shadow. Bijvoorbeeld:
box-shadow: 5px 5px 10px black;
Hier coderen we een zwarte schaduw van:
• 5 pixels rechts
• 5 pixels onder
• 10 pixels straal
Met negatieve getallen kunnen we experimenteren met negatieve schaduwen, bijvoorbeeld:
box-shadow:-5px -5px 10px black;
Dit is een schaduw met:
• 5 pixels links
• 5 pixels boven
Codeer in de <head> schaduwstijlen voor A, B en C.
• A met een groene schaduw van 5px bij 5px en met een straal van 10px.
• B met een zwarte schaduw van -5px bij -5px (negatieve) en met een straal van 10px.
• C met een blauwe schaduw van 0px bij 5px y (onder) en met een straal van 10px.
Figuur 1.14 Resultaat met schaduwen
22 1 Basis HTML5 en CSS3
• Oefening 6: Tekstschaduw
We kunnen ook schaduwen coderen voor teksten. Bijvoorbeeld:
text-shadow: 5px 5px 10px black;
Dit is een positieve schaduw voor teksten. Het lijkt alsof het licht van boven links
komt. Met negatieve getallen kunnen we met negatieve schaduwen experimenteren. Bijvoorbeeld:
text-shadow:-5px -5px 10px black;
Codeer in de <head> schaduwen voor de teksten A, B en C.
• A met rode tekst en een rode schaduw
• B met groene tekst en een negatieve groene schaduw
• C met witte tekst en een witte schaduw onder
Figuur 1.15 Resultaat met tekstschaduw
Hier merken we op dat de schaduw van de letters dezelfde richting uitgaan, net als
de schaduwen van de borders.
De stylesheet
In de volgende opgave maken we onze eerste stylesheet met de naam styles en met
de extensie .css. Alle stylesheets krijgen de extensie .css dat staat voor Cascading
Style Sheet.
• Webbouw 5
Codeer de volgende stijlen en sla ze op als styles.css in dezelfde map als
index.html. De uitleg volgt later.
/* Stijlen voor RadioGaGA */
html{
 height: 100%;
 width: 100%;
 background: #lightgray;
 overflow: auto;
}
body{
 width: 96%;
 margin-top: 0;
1.2 CSS3 23
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 5%;
 border: 1px solid;
 overflow: inherit;
 backgroundColor: #fff;
 text-align: center;
 font-family: Verdana, Arial, sans-serif;
 color: #000;
 font-size: 16px;
 font-style: normal;
}
h3{
 margin: 0;
 box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
}
De <link>-tag
Om onze webpagina te verbinden met onze stylesheet gebruiken we de tag <link>.
Zo kunnen we onze stijlen linken met een of meerdere webpagina’s. In de volgende
opgave linken we index.html met het bestand stijlen.css.
• Webbouw 6
Open index.html en voeg de volgende <link>-tag eraan toe. Dit moet gebeuren
binnen je <head>-element.
<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
 <link rel="stylesheet" href="styles.css">
 <title>RadioGaGa</title>
 </head>
De tag <link> bevat de volgende attributen:
rel="stylesheet" Stelt de relatie vast met stylesheet
href="styles.css" Verwijst naar het bestand styles.css
Open index.html met een browser. Als alles goed is verlopen zie je de volgende
fi guur.
24 1 Basis HTML5 en CSS3
Figuur 1.16
Als je andere resultaten krijgt, kijk dan nogmaals naar je code en je stijlen en zie
of je fouten kaunt verbeteren. Zorg ervoor dat de <link> tussen je twee bestanden
goed werkt.
Breedte in percentages
Het is raadzaam om percentages te gebruiken voor de breedte van je elementen. Zo
zorg je ervoor dat als het browservenster kleiner wordt de breedte van je <body>-
element altijd 96% van het venster blijft. We zeggen dan dat de breedte van je elementen elastisch is.
Hieronder zie je een <body>-element met een vaste breedte van 1400px. Een element
met een vaste breedte schikt zich niet naar de breedte van het venster.
Figuur 1.17
Hier volgt een uitleg van de stijlen in Webbouw 5.
1.2 CSS3 25
/* commentaar */
Met commentaar kunnen we onze stijlen beschrijven. CSS-commentaar plaatsen
we tussen /* en */ in. Bijvoorbeeld:
/* Stylen voor RadioGaGa */
backgroundColor
Het <html>-element heeft een grijze achtergrond gekregen met:
backgroundColor: lightgray;
overfl ow
Als een element te klein is voor de tekstinhoud dan zeggen we dat de tekst overloopt. In deze gevallen kunnen we kiezen voor het tonen van een scrollbar (schuifbalk).
overflow: auto;
text-align
Je ziet in het resultaat van Webbouw 5 en 6 dat alle teksten gecentreerd zijn weergegeven. Het attribuut text-align (tekst uitlijnen) kent vier opties:
text-align: left links uitlijnen
text-align: center centreren
text-align: right rechts uitlijnen
text-align: justify de tekst uitvullen over de hele regel
Een tekst centreren is niet hetzelfde als het centreren van een element. In ons geval
hebben we het <body>-element gecentreerd binnen het <html>-element. Dit hebben
we gedan met het attribuut margin.
margin
Marges zijn de ruimtes tussen alle elementen. We kunnen individuele marges specifi ceren:
margin-top: 0px
bovenmarge: 0px
margin-right: 0px rechtermarge: 0px
margin-bottom: 0px
ondermarge: 0px
margin-left: 0px linkermarge: 0px
26 1 Basis HTML5 en CSS3
Hierboven zien we de marges van de grijze elementen ten opzichte van de elementen waar ze zich in bevinden.
We kunnen ook alle marges in één keer vaststellen. Dit doen we met de klok mee:
boven, rechts, onder, links:
margin: 0 0 0 0;
Als alle vier de marges hetzelfde zijn doe je dit zo:
margin: 0; of margin: 5%;
Elementen centreren
Ons <body>-element heeft in Webbouw 4 een bovenmarge van 0% en een ondermarge van 5% gekregen. Om het element te kunnen centreren moeten we de linker- en
de rechtermarges als auto opgeven. Bijvoorbeeld:
body{
 margin-left: auto;
 margin-right: auto;
}
Border
Het <body>-element heeft een border (rand) van 1 pixel gekregen, als volgt:
border: 1px solid;
font
We gebruiken het attribuut font om het lettertype van de teksten binnen een element te defi niëren. Hier volgt een lijst met lettertypes die geschikt zijn voor alle
webbrowsers:
Figuur 1.18
font-size
Het attribuut font-size (tekengrootte) defi nieert de lettergrootte van je teksten.
1.2 CSS3 27
Dit attribuut kunnen we waarden geven in pixels, punten, percentages of relatief
ten opzichte van het font in de body, bijvoorbeeld 1.5 de font-size van het <body>-
element. Hieronder zien we hoe het font cerif gedefi nieerd kan worden in pixels,
punten, percentages of relatief ten opzichte van de basis:
cerif 12px pixels
cerif 24pt punten
cerif 48% percentage
cerif 1.5rem relatief
De meest exacte lettergrootte geven we aan in pixels (px).
Voor een betere kwaliteit afdruk van je teksten gebruik je punten (pt).
Percentages en rem zijn gerelateerd aan de lettergrootte van het <body>-element,
bijvoorbeeld:
body {font-size: 16px;} basis
body h1 {font-size: 2.0rem;} relatief: 2.0 x 16 = 32px
body h2 {font-size: 50%;} percentage: 50 van 16 = 8px
Subelementen
In onze webpagina zien we dat de body een nav-element heeft en dat het nav-element een h3-element heeft. Deze elementen noemen we subelementen. We kunnen heel specifi ek een subelement selecteren door het pad van het element aan te
geven. Bijvoorbeeld:
body nav {color: black}
of
body nav h3 {color: black}
font-style
We kunnen ons lettertype verder vormgeven met font-style. Hiervoor zijn er vier
opties:
normal normaal
bold vet
bolder vetter
lighter lichter
box-shadow
Om de dimensies van onze elementen beter te zien hebben we in Webbouw 5 schaduwen gebruikt. In ons geval hebben we de volgende schaduw gedefi nieerd:
box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
28 1 Basis HTML5 en CSS3
Dit betekent:
– 4 pixels aan de rechterkant
– 4 pixels onderaan
– 10 pixels vervaging
– De kleur van de schaduw is zwart (0 rood, 0 groen, 0 blauw, dat is geen kleur, dus
zwart) en is 50 transparant. Kleurencodes en de functie rgba bespreken we in de
volgende paragraaf.
Element met schaduw
• Lab 02
In deze lab-opdracht codeer je stijlen voor de vier div-elementen zoals in de volgende fi guur te zien is. Codeer een stylesheet met de volgende stijlen en sla die op
als labs.css.
Div 1 Border-shadow
 80 breed
 Hoogte 80px
 Font-size 20px
 Auto marge
 Marge boven 3
 Marge onder 3
Div 2 80 breed
 Hoogte 220px
 Font-size 15px
 Linkermarge 5
 Marge onder 3
Div 3 80 breed
 Hoogte 150px
 Linkermarge 3
Div 4 80 breed
 Hoogte 100px
 Linkermarge 0
Open labs.html en voeg de volgende link eraan toe:
 <link rel="stylesheet" href="labs.css">
1.3 Webkleuren 29
Het resultaat moet er als volgt uitzien:
Figuur Lab 02
 1.3 Webkleuren
In deze paragraaf maken we kennis met de volgende CSS-attributen:
• rgb
• rgba
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
 Oefening 7 t/m 9
Lab 03
Inleiding
Webkleuren zijn gebaseerd op de drie primaire kleuren: rood, groen en blauw.
Door deze drie basiskleuren te combineren kunnen we een spectrum van kleuren
creëren. In de volgende fi guur zie je primaire, secundaire en tertiaire webkleuren.
Figuur 1.19 Kleurenschijf
30 1 Basis HTML5 en CSS3
Er zijn drie manieren om kleuren te produceren in CSS:
• met decimale getallen;
• met hexadecimale getallen;
• met percentages.
Omdat de browsers constant in ontwikkeling zijn en omdat de ene browser een betere manier vindt om bijvoorbeeld kleuren te coderen, ontstaan hierdoor meerdere
manieren om kleuren te coderen.
De meest voorkomende manier om kleuren te coderen voor een webpagina is met
hexadecimale getallen. Hexadecimaal is een numeriek systeem gebaseerd op tien
getallen en zes letters (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). We gaan niet dieper
in op het hexadecimale systeem, maar het is belangrijk om te weten hoe het systeem wordt gebruikt om kleuren te combineren. Dit doen we met het attribuut rgb.
rgb
Met het attribuut rgb kunnen we de drie primaire kleuren, rood, groen en blauw
mengen met als resultaat een nieuwe kleur. De syntaxis is als volgt:
rgb(red,green,blue)
De mogelijke waarden voor iedere kleur zijn de volgende:
• hexadecimaal 0 t/m F;
• decimaal 0 t/m 255;
• percentage 0 t/m 100.
Bijvoorbeeld, de kleur blauw coderen we als volgt:
rgb(0,0,F)
Dit betekent: nul rood, nul groen en maximaal blauw.
We kunnen ook groen toevoegen, als volgt:
rgb(0,6,F)
Dit geeft als resultaat een blauwgroene kleur. Dezelfde kleur kunnen we op een
verkorte manier coderen:
#06F
Nog een andere manier is met zes cijfers. Dit doen we door elk cijfer te verdubbelen. Hierdoor heb je veel meer kleurenmogelijkheden. Bijvoorbeeld:
#06F is hetzelfde als #0066FF
• Oefening 7: BackgroundColor
Open een nieuw script en sla dit op als oefening7.html. Maak de volgende vijf div’s met de aangegeven achtergrondkleuren. Gebruik het attribuut
backgroundColor:
1.3 Webkleuren 31
backgroundColor: #fff;
Het resultaat moet er als volgt uitzien:
Figuur 1.20
Op internet vind je talloze webpagina’s met tabellen met kleurcodes zoals in de
volgende fi guur:
Figuur 1.21
Met de decimale methode kunnen we dezelfde groenblauwe kleur met de decimale
waarden 0 t/m 255 als volgt creëren:
rgb(0,56,255)
Met percentages kunnen we dezelfde kleur als volgt creëren:
rgb(0%, 22%, 100%)
32 1 Basis HTML5 en CSS3
De afwezigheid van kleuren geeft als resultaat de kleur zwart:
rgb(0, 0, 0)
Hier zie je dat spaties na de komma optioneel zijn.
rgba
We gebruiken het attribuut rgba om transparantie toe te voegen, waarbij a de transparantie aangeeft en een waarde tussen 0.0 en 1.0 krijgt. Bijvoorbeeld:
rgba(0, 255, 0, 0.3)
Hier krijgen we een groene kleur met een transparantie van 30%. In de vorige opgave hebben we dit attribuut gebruikt om een zwarte schaduw met een transparantie
van 50% te creëren:
box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
• Oefening 8: rgba
Open een nieuw script en sla dit op als oefening8.html. Maak de volgende div’s
met de aangegeven transparanties in rood.
Figuur 1.22
• Oefening 9: #kleurcodes
Open een nieuw script en sla het op als oefening9.html. Maak de volgende div’s
met de aangegeven kleurencodes:
Figuur 1.23
• Lab 03
Open labs.css en geef iedere div een eigen achtergrondkleur, hoogte en breedte. Bij
div 4 centreer je verticaal de tekst als volgt:
1.4 Navigatie 33
#div4 p{
 position: relative;
 top: 50%;
 transform: translateY(-50%);
}
Position wordt behandeld in paragraaf 1.5 en transform in paragraaf 1.6.
Het resultaat moet er als volgt uitzien:
Figuur Lab 03
 1.4 Navigatie
In deze paragraaf maken we de navigatie van de website en we maken kennis met
een aantal HTML-elementen en een aantal CSS-attributen.
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
 Webbouw 7 t/m 11
Lab 04
Een goed gestructureerde navigatie bepaalt of je website logisch en intuïtief is. De
navigatie moet zodanig gemaakt worden dat de gebruiker de gezochte informatie
gemakkelijk kan vinden. We beginnen met de HTML-code en eindigen met de
CSS-code.
Codering van de navigatie
De navigatie moet logisch opgebouwd worden zodat gezochte informatie nooit
meer dan drie klikken verwijderd is van de homepage. Het moet mogelijk zijn om
vanuit iedere webpagina terug te keren naar de homepage. HTML5 heeft de nieuwe tag <nav> met als betekenis ‘navigatie’.
34 1 Basis HTML5 en CSS3
Element <nav>
Meestal plaatsen we de navigatie bovenaan of aan de rechterkant van de pagina
zodat we door de hele website makkelijk kunnen navigeren. Omdat de navigatie in
de vorm van een lijst wordt gecodeerd kijken we nu naar HTML-lijsten.
Genummerde lijsten <ol>
Soms wil je een bepaald stuk tekst als lijst weergeven. Er bestaan twee soorten lijsten: genummerde lijsten en opsommingslijsten. We kijken eerst naar genummerde
lijsten.
<ol>
 <li>Webdesign</li>
 <li>Webhosting</li>
 <li>Webprogrammering</li>
</ol>
Dit genereert het volgende resultaat: een genummerde lijst <ol> met drie items
<li>:
1. Webdesign
2. Webhosting
3. Webprogrammering
Items <li>
Alle lijsten moeten minimaal een item <li> hebben. Deze genummerde items worden automatisch genummerd volgens hun positie in de lijst.
Opsommingslijsten <ul>
Een opsommingslijst is een lijst met bullets. Bijvoorbeeld:
<ul>
 <li>Duurzaam</li>
 <li>Ecologisch</li>
 <li>Groene voetafdruk</li>
</ul>
genereert de volgende bullets-lijst:
• Duurzaam
• Ecologisch
• Groene voetafdruk
Element <a>
Het element <a> is een klikbaar element voor het linken van twee documenten.
Deze elementen noemen we hyperlinks. Een hyperlink coderen we als volgt:
<a href="index.html">Home</a>
1.4 Navigatie 35
Het <a>-element bestaat uit drie delen:
1 <a href="index.html">, met het attribuut href met de naam van het te linken document. In dit geval index.html.
2 De tekst waar we moeten klikken om te linken. In dit geval Home.
3 </a>, om de hyperlink te sluiten.
HTML bestaat voor Hyper Text Markup Language. De hypertekst is de content of
de tekst tussen de tags in. In een hypertekst is het zo dat in de browser een, twee of
meer spaties als één spatie worden gezien. Als we een extra spatie willen toevoegen
gebruiken we de code &nbsp. Bijvoorbeeld <h1>&nbsp;&nbsp;tekst</h1>.
In de volgende opgave vervangen we het <h3>-element binnen de navigatie <nav>
door een lijst met hyperlinks.
<nav>
 <h3>Navigatie</h3>
</nav>
• Webbouw 7
Open index.html en vervang het <h3>-element binnen het <nav>-element door de
volgende lijst met hyperlinks.
 <nav>
 <ul>
 <li><a href="index.html">Home</a></li>
 <li><a href="playlist.html">Playlist</a></li>
 <li><a href="formulier.html">Formulier</a></li>
 <li><a href="contact.html">Contact</a></li>
 </ul>
 </nav>
De volgende fi guur illustreert het resultaat van de opgave: de navigatie als een bulletslijst met hyperlinks weergegeven.
• Home
• Playlist
• Formulier
• Contact
LET OP
Als je een ander resultaat krijgt, ga dan terug naar je code en je stijlen en zoek uit
wat er fout is gegaan.
36 1 Basis HTML5 en CSS3
Figuur 1.24
Ontwerp van de navigatie
Hier gaan we verder met het ontwerp van de navigatie van onze website. In dit deel
kijken we naar de volgende attributen:
• list-style-type
• display: block
• fl oat
• gradient
• tekst-decoration
• opacity
• pseudoklassen
• Webbouw 8
Open styles.css en voeg de volgende stijlen eraan toe.
nav{
 width: 100%;
}
nav ul{
 text-align: center;
 margin: 0 0 0 0;
 padding-left: 0;
}
li{
 list-style-type: none;
}
nav ul li{
 width: 25%;
 background: linear-gradient(#9FB3B5,#E3E9EA,#7C9799);
}
Het resultaat ziet er als volgt uit:
1.4 Navigatie 37
Figuur 1.25
Hier volgt een uitleg over Webbouw 8.
list-style-type
Dit attribuut is voor de opmaak van lijsten. We willen onze hyperlinks hebben in
een lijst zonder bullets. Dus zeggen we het volgende:
li{
 list-style-type: none;
}
Naast de optie none kunnen we de volgende opties gebruiken:
disc disc 
circle cirkel 
square vierkant 
decimal decimaal 1
lower-latin kleine letter Latijn i
upper-latin hoofdletter Latijn I
Het <body>-element bevat het <nav>-element en dat krijgt als breedte 100% van het
<body>-element. In de vorige opgave hebben we een navigatie gemaakt met vier
hyperlinks, dus krijgt iedere link 25% van de breedte van de navigatie.
nav ul li{
 width: 25%;
}
display: block
De volgende HTML-elementen krijgen automatisch het attribuut display: block.
• <h1> t/m <h6>
• <p>
• <li>
• <div>
• <main>
• <footer>
• <section>
38 1 Basis HTML5 en CSS3
Onze <li>-elementen binnen de navigatie krijgen ieder 25% van de breedte van het
nav-element en worden als blokken onder elkaar weergegeven.
<li> Home </li>
<li> Playlist </li>
<li> Formulier </li>
<li> Contact </li>
fl oat
Om onze hyperlinks horizontaal te groeperen gebruiken we het attribuut float.
Elementen met dit attribuut hebben de mogelijkheid om naar links of rechts te
‘zweven’.
float: left naar links zweven
float: right naar rechts zweven
Neem als voorbeeld de letters in een tekst: alle letters hebben de neiging om naar
links te ‘zweven’ naar de vorige letter. Bijvoorbeeld:
ABCD
Maar als het scherm te klein is gaat de letter onderaan naar de volgende regel, bijvoorbeeld:
ABCD
E
Dat gebeurt ook met HTML-elementen met het attribuut float. Als we bijvoorbeeld
onze <li>-elementen een breedte van 30% geven dan ‘zweeft’ het vierde element
onderaan naar de volgende beschikbare regel.
Home Playlist Formulier
Contact
1.4 Navigatie 39
clear
Met het attribuut clear kunnen we het ‘zweven’ ongedaan maken.
clear: left naar links zweven ongedaan maken
clear: right naar rechts zweven ongedaan maken
clear: both naar links en rechts zweven ongedaan maken
gradient (kleurverzadiging of kleurverloop)
Als laatste hebben we in de vorige opgave het attribuut linear kleurverloop gecodeerd. Met dit attribuut vullen we een achtergrond in met een kleurverloop. Er zijn
twee soorten gradients: linear en radial. De syntaxis is als volgt:
linear-gradient(kleur-1, kleur-2, . . . )
Bijvoorbeeld:
linear-gradient(red, blue);
linear-gradient(red, yellow, blue);
De volgende fi guur illustreert het resultaat van de tweede regel: een lineair kleurverloop van rood naar geel naar blauw.
Figuur 1.26
We kunnen ook een diagonaal kleurverloop coderen:
linear-gradient(45deg, red, yellow, blue);
linear-gradient(to left top, red, yellow, blue);
linear-gradient( to bottom, red, yellow, blue );
• Webbouw 9
Open styles.css. In deze opgave selecteer je het <li>-element binnen onze navigatie en past het attribuut float left toe. Het resultaat moet er als volgt uitzien:
Figuur 1.27
40 1 Basis HTML5 en CSS3
In de volgende opgave gaan we verder met de navigatie. We kijken naar meer attributen voor de hyperlinks.
• Webbouw 10
Open styles.css en voeg de volgende stijlen eraan toe.
a {
 text-decoration: none;
}
nav ul li a {
 font-size: 1.7rem;
 opacity: 0.5;
 filter: alpha(opacity=50);
}
nav ul li a:hover,
nav ul li a:focus
{
 color: firebrick;
}
Hier krijgen de hyperlinks een lettergrootte van 1.7 in relatie tot de 16px basislettergrootte van het body-element. Omndat hover en focus geen attributen maar
eff ecten zijn, plaatsen we geen spaties na de dubbelepunt, duswe schrijven: a:hover
en a:focus.
text-decoration
Met het attribuut text-decoration kunnen we de volgende opties toepassen: doorstrepen, onderstrepen, bovenstrepen.
none geen
underline onderstrepen
overline lijn erboven
line-trog doorhalen
Alle hyperlinks krijgen automatisch een onderstreping. Onderstrepen schakelen
we als volgt uit:
text-decoration: none;
opacity
Het attribuut opacity bepaalt de transparantie van een element. In de vorige opgave kregen alle hyperlinks een transparantie van 50.
opacity: 0.5;
pseudoklassen
Het beeldscherm is de interface van de browser. Een interface is het punt van interactie tussen twee systemen of objecten. Browsers hebben listeners (luisteraars) die
1.4 Navigatie 41
permanent aan het luisteren zijn naar events (gebeurtenissen) op het beeldscherm.
Bijvoorbeeld wanneer de muis over een tekst zweeft. Dit noemen we muis-events.
Muis-events kunnen we programmeren met behulp van pseudoklassen. Hyperlinks
hebben de volgende pseudoklassen:
a:hover wanneer de muis over een hyperlink zweeft
a:focus wanneer de muis op een hyperlink focust
a:visited wanneer de muis een hyperlink heeft gactiveerd
a:active wanneer de muis een hyperlink activeert
De pseudoklassen a:visited en a:active veranderen de kleur van de bezochte en de
actieve hyperlinks. Zo kunnen we zien welke links we bezocht hebben. In de laatste
opgave hebben we met behulp van de pseudoklasse a:hover een hover-eff ect gecodeerd zodat de kleur van de tekst van alle hyperlinks verandert wanneer de muis
over de link zweeft.
• Webbouw 11
Om de navigatie makkelijker te maken voor onze gebruikers codeer je in deze opgave een hover-eff ect zodat de achtergrondkleur van de hyperlinks verandert wanneer een hover-event plaatsvindt.
Daarna codeer je een tweede hover-eff ect voor kleurenblinde gebruikers waardoor
het hover-event de ruimte tussen de letters van een hyperlink laat veranderen. Gebruik hiervoor de volgende code:
letter-spacing: 5px
Het resultaat moet zoiets zijn:
Figuur 1.28
Je ziet dat bij het hover-eff ect de ruimte tussen de letters verandert.
42 1 Basis HTML5 en CSS3
• Lab 04
Open labs.css. In deze lab-opdracht codeer je een hover-eff ect zodat div 2 naar
rechts zweeft met een muis-over-event. Het resultaat moet er als volgt uitzien:
Figuur Lab 04
 1.5 Logo
In deze paragraaf maken we het logo voor de webapplicatie en we maken kennis
met een aantal HTML-elementen en een aantal CSS-attributen.
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
 Webbouw 12 t/m 14
Lab 05
Een logo is een afbeelding waaraan je een merk of bedrijf herkent. Een mooi vormgegeven logo moet het bedrijf of de website een unieke uitstraling geven. De uitstraling kan informeel, formeel of sportief zijn. In deze paragraaf behandelen we de
codering en de vormgeving van het logo van de website.
Codering van het logo
In de volgende opgave coderen we het logo onderaan de navigatie.
Download webdesign media
Alle media voor dit webdesign-boek vind je op
www.brinkman-uitgeverij-mbopraktijk.nl, onder Frontend programmeren.
Na het downloaden moet je de gecomprimeerde map decomprimeren (unzippen).
Het logo vind je in de map images met de naam logo.png. Kopieer en plak de map
images in je map RadioGaGa. In de volgende opgave gebruiken we het logo afbeelding binnen de img-tag.
1.5 Logo 43
• Webbouw 12
Open index.html en vervang het <h3>-element binnen je <div id="logo"> als volgt:
 . . .
 <div id="logo">
 <img width="200px" src="images/logo.png" alt="x">
 </div>
 . . .
Het resultaat zie je hieronder:
Figuur 1.29
LET OP
Als je geen afbeelding ziet, let dan op de spelling in je img-tag.
Element img
Hier hebben we een afbeelding toegevoegd met het element <img>. Dit element
heeft drie attributen:
width de afbeelding wordt weergeven met deze breedte
src de bron of URL van de afbeelding
alt alternatieve tekst wanneer de afbeelding niet gevonden is
Het attribuut src bevat de bron van de afbeelding. Dit kan een URL zijn of een
pad naar waar de afbeelding geplaatst is. In ons geval is dit de map images gevolgd
door / en de naam van de afbeelding:
src="images/logo.png"
Wat is een URL ?
URL is het acroniem voor Uniform Resource Locator, het is de manier waarop we
een document of resource lokaliseren op het internet. De algemene vorm van een
URL is:
protocol: //domain/map/document
44 1 Basis HTML5 en CSS3
protocol is een set normen voor de transmissie van informatie tussen twee computers. In ons geval gebruiken we het http-protocol voor de transmissie van webpagina’s over het internet.
domain is een gereserveerde naam die de computer of server in het internet identifi -
ceert, bijvoorbeeld:
http://google.com
map/document geeft de locatie en naam van het gezochte document.
Design van het logo
In de vorige webbouw hebben we het logo in een <img>-element geplaatst. Een andere manier om ons logo weer te geven is met behulp van de background-property.
CSS biedt ons meer mogelijkheden. In de volgende opgave doen we dit.
• Webbouw 13
Open index.html en verwijder het <img>-element binnen je <div id="logo"> als
volgt om de background property te gebruiken:
 . . .
 <div id="logo">
 </div>
 . . .
Nu geef je het logo weer als een achtergrondafbeelding met het attribuut
background-image.
• Webbouw 14
Open styles.css en voeg de volgende stijlen eraan toe.
#logo{
 margin-top: 15px;
 padding-top: 10%;
 background-image: url(images/logo.png);
 background-repeat: no-repeat;
 background-position: center;
}
background
Alle elementen hebben een achtergrond. Aan het attribuut background kun je afbeeldingen, kleuren en arcering toekennen. Dit attribuut heeft de volgende opties:
background-image achtergrond van de afbeelding of kleurverloop
backgroundColor achtergrondkleur
background-position positie van de achtergrond van de afbeelding
background-repeat herhaling van de afbeelding in de achtergrond
background-url url van de afbeelding voor deze achtergrond
1.5 Logo 45
background-url
In ons geval hebben we een url met een afbeelding gecodeerd:
background-image: url(images/disc.png);
background-position
Het attribuut position bepaalt de positie van de afbeelding in de achtergrond, het
heeft de volgende opties:
top boven
center midden
bottom onder
top left boven links
top center boven midden
top right boven rechts
bottom left onder links
bottom center onder midden
bottom right onder rechts
In ons geval hebben we gekozen voor:
background-position: center;
De optie repeat is voor het herhalen van de afbeelding in de achtergrond. We hebben gekozen voor:
background-repeat: no-repeat;
• Lab 05
Open labs.css en plaats de volgende twee backgrund-url’s als afbeeldingen binnen
div 2 en div 3.
http://icons.iconarchive.com/icons/yootheme/social-bookmark/256/social-googlebox-icon.png
http://icons.iconseeker.com/ico/mozilla/fi refox-2.ico
Het resultaat is het volgende:
Figuur Lab 05
46 1 Basis HTML5 en CSS3
 1.6 Hoofd-content
In deze paragraaf maken we de codering en het design van de hoofd-content van
de homepage. We maken kennis met de volgende CSS-attributen:
• border-radius
• opacity
• browser prefi x
• keyframes
• transform
• position
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
 Webbouw 15 t/m 21
Lab 06
Codering van de hoofd-content
In de hoofd-content coderen we een schijf met een animatie. Het resultaat van
deze paragraaf moet er als volgt uitzien:
Figuur 1.30
De hoofd-content plaatsen we binnen de <main>-tags.
1.6 Hoofd-content 47
• Webbouw 15
Open index.html en vervang de elementen <h3> en <h4> binnen je <main> door de
volgende twee div’s:
 . . .
 <main>
 <div id="disc">
 <div id="center">
 </div>
 </div>
 </main>
 . . .
Design van de hoofd-content
In de volgende opgave coderen we de vormgeving van de disc.
• Webbouw 16
Open styles.css en voeg de volgende stijlen eraan toe.
main{
 width: 100%;
 margin: 0;
 padding-bottom: 3%;
}
In de volgende opgave coderen we de stijlen van ons disc-element.
• Webbouw 17
Open styles.css en voeg de volgende stijlen eraan toe.
#disc {
 border-radius: 50%;
 display: inline-block;
 opacity: 0.8;
 width: 400px;
 height: 400px;
 margin-top: 10%;
}
border-radius
Om de hoeken van een element af te ronden gebruiken we het attribuut borderradius. In ons geval hebben we het disc-element een radius van 50 gegeven:
 border-radius: 50%;
Hieronder zien we drie fi guren met het attribuut border-radius.
48 1 Basis HTML5 en CSS3
Figuur 1.31
Figuur 1 heeft een border-radius van 5;
fi guur 2 heeft een border-radius van 20;
fi guur 3 heeft een border-radius van 50.
opacity
Dit attribuut geeft de transparantie van een element aan. In ons geval krijgt het
disc-element een transparantie van 80%.
 opacity: 0.8;
Het attribuut opacity maakt alle subelementen van het disc-element ook transparant.
LET OP
Het attribuut opacity gebruiken we om elementen transparant te maken.
Het attribuut rgba() gebruiken we om kleuren transparant te maken.
Een achtergrond met een kleurverloop vanuit het midden (radial) coderen we als
volgt:
• Webbouw 18
Open styles.css en voeg de volgende stijlen eraan toe.
#disc {
 background-image: -moz-radial-gradient(
 45px 45px 45deg, circle cover, grey 0%, black 100%, black 95%);
 background-image: -webkit-radial-gradient(
 45px 45px, circle cover, grey, black);
 background-image: radial-gradient(
 45px 45px 45deg, circle cover, grey 0%, black 100%, black 95%);
}
Browser-prefi x
Het attribuut radial-gradient werkt bij iedere browser anders. Het is te hopen dat
op een dag alle browsers dezelfde implementatie van alle attributen gaan hanteren. In de tussentijd moeten we alle nieuwe, nog niet gestandaardiseerd attributen
coderen met een browser-prefi x. Zo zorgen we ervoor dat de attributen bij iedere
browser op de juiste manier worden weergegeven.
1.6 Hoofd-content 49
-webkit is de prefi x voor de Chrome- en Safari-browsers.
-moz is de prefi x voor de Mozilla- en Firefox-browsers.
border-radius zonder prefi x is de standaardimplementatie.
Browser Prefi x
webkitmozowebkitms.-
keyframes
Met behulp van keyframes kunnen we animaties coderen in CSS. In de volgende
opgave coderen we een animatie met de naam revolutie. Deze animatie moet ons
disc-element ronddraaien, dat wil zeggen rotaties van 0 tot 360 graden maken. We
coderen ons keyframe eerst voor de Safari- en de Opera-browsers, daarna voor
Firefox en Chrome. Zo zorgen we ervoor dat de animatie op alle browsers werkt.
• Webbouw 19
Open styles.css en voeg de volgende stijlen eraan toe.
/* Safari, Opera */
@-webkit-keyframes revolutie {
 from { -webkit-transform: rotate(0deg); }
 to { -webkit-transform: rotate(360deg); }
}
/* standard */
@keyframes revolutie {
 from { transform: rotate(0deg); }
 to { transform: rotate(360deg); }
}
50 1 Basis HTML5 en CSS3
transform
Met het attribuut transform zeggen we wat voor animatie we willen coderen. Er zijn
twee opties:
translate verplaats, bijvoorbeeld van links naar rechts brengen
rotate rotatie, bijvoorbeeld 360 graden ronddraaien
Deze animatie revolutie passen we nu toe op ons element disc.
• Webbouw 20
Open styles.css en voeg de volgende stijlen eraan toe.
#disc {
 -webkit-animation-name: revolutie;
 -webkit-animation-duration: 3s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
 animation-name: revolutie;
 animation-duration: 3s;
 animation-iteration-count: infinite;
 animation-timing-function: linear;
}
Hier hebben we onze animatie revolutie op ons disc-element toegepast. Het betreft een animatie van drie seconden met een oneindig aantal herhalingen.
We eindigen de stijlen voor de hoofd-content met de stijlen voor het midden van
het disc-element.
• Webbouw 21
Open styles.css en voeg de volgende stijlen eraan toe.
#center {
 width: 105px;
 height: 105px;
 background: orange;
 position: relative;
 top: 37%;
 left: 37%;
 display: block;
 border: 0.5px solid #fff;
 border-radius: 50%;
}
Het resultaat is een ronddraaiende disc – zie de fi guur aan het begin van deze paragraaf.
1.6 Hoofd-content 51
• Lab 06
In deze lab-opdracht voeg je een animatie toe die div 2 op de x-as laat roteren.
Maak eerst het volgende keyframe:
@keyframes revolutie {
 from { transform: rotatex(0deg); }
 to { transform: rotatex(360deg); }
}
Daarna voeg je het keyframe aan div 2 toe als volgt:
– de animatie duurt 3 seconden;
– de animatie wordt ontelbare keren herhaald.
Het resultaat is dat alle divs horizontaal meedraaien.
Figuur Lab 06
 1.7 Positionering
In deze paragraaf positioneren we elementen in de homepage. We maken kennis
met de volgende CSS-attributen:
• position fi xed
• position relative
• position absolute
• z-index
• hsla
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
 Webbouw 22 t/m 24
Lab 07 en 08
De positie van een element wordt bepaald door de volgorde waarin het is aangemaakt. De elementen worden onder elkaar geplaatst, tenzij we het attribuut float
52 1 Basis HTML5 en CSS3
gebruiken. In dat geval zweven de elementen naar links of rechts. Maar we kunnen
in feite alle elementen overal op het beeldscherm plaatsen op de pixel nauwkeurig.
Hiervoor gebruiken we het attribuut position. Het attribuut heeft de volgende drie
opties:
fixed top | bottom | left | right
relative top | bottom | left | right
absolute top | bottom | left | right
fi xed positie
Een element met een fixed positie blijft altijd op dezelfde plek en scrolt niet met de
rest van de pagina mee. Bijvoorbeeld:
#element1{
 position: fixed;
 left: 0px;
 top: 0px;
 height: 50px;
 width: 100%;
}
De positie left 0px en top 0px zie je hieronder:
Figuur 1.32
In dit geval is het body-element grijs en zetten we ons element vast op 0 pixels
vanaf body-links en o pixels vanaf body-top.
relatieve positie
Wanneer je een element plaatst met een relatieve positie, dan is de nieuwe positie
relatief ten opzichte van de oorspronkelijke positie binnen het parent-element.
Bijvoorbeeld:
 #element2{
 position: relative;
 top: 0px;
 left: 10%;
 height: 200px;
 width: 200px;
 }
1.6 Hoofd-content 53
Het resultaat zie je hieronder:
Figuur 1.33
In dit geval staat het tweede element op een positie 10 links ten opzichte van het
body-element. De attributen fixed en relative zijn bijna hetzelfde. Het enige verschil is dat het attribuut fixed niet met de pagina mee scrolt.
Wanneer je een relatieve positie hoger dan het parent-element wenst, gebruik je
negatieve waarden. Bijvoorbeeld:
 position: relative;
 top: -90px;
Wanneer je een relatieve positie lager dan het parent-element wenst, gebruik je
positieve waarden. Bijvoorbeeld:
 position: relative;
 top: 90px;
Nu coderen we een derde element met een relatieve positie ten opzichte van element2: element3 is een child van element2.
#element3{
 position: relative;
 top: 0px;
 left: 0px;
 height: 100px;
 width: 130px;
}
Hier zien we de relatieve positie: top 0px en left 0px ten opzichte van de tekst in
element2:
Figuur 1.34
54 1 Basis HTML5 en CSS3
In dit geval is het derde element gepositioneerd ten opzichte van de tekst "Relati ef",
namelijk eronder.
absolute positie
Als je het derde element een absolute positionering wilt geven, dan doe je dat als
volgt:
#element3{
 position: absolute;
 top: 0px;
 left: 0px;
}
Het resultaat zie je hieronder:
Figuur 1.35
In dit geval heeft het derde element, ongeacht het tekstelement, een absolute positie ten opzichte van het parent-element gekregen.
• Lab 07
In deze lab-opdracht oefenen we verder met de positionering van elementen.
Open een nieuw bestand en sla het op als lab07.html. Voeg de volgende codes eraan toe.
<!DOCTYPE html>
<html lang="nl">
 <head>
<style>
 html{
 height: 100%;
 width: 100%;
 backgroundColor: dimgrey;
 overflow: auto;
 }
 body{
 backgroundColor: #fff;
 font-size: 30px;
 font-family: Verdana, Arial, sans-serif;
 margin: 50px;
 }
1.6 Hoofd-content 55
 div{
 margin: 0;
 }
 #vierkant{
 width: 400px;
 height: 300px;
 backgroundColor: deepskyblue;
 opacity: 0.5;
 }
 #driehoek{
 width: 0;
 height: 0;
 border-left: 150px solid transparent;
 border-right: 150px solid transparent;
 border-bottom: 200px solid darkorange;
 opacity: 0.8;
 }
 #cirkel{
 width: 100px;
 height: 100px;
 border-radius: 50%;
 backgroundColor: firebrick;
 }
</style>
</head>
<body>
 <div id="vierkant">
 <div id="cirkel"></div>
 </div>
 <div id="driehoek"></div>
</body>
</html>
Figuur Lab 07
Het resultaat zien we in de linkerafbeelding. In deze lab-opdracht maak je gebruik
van het attribuut position om de drie elementen te positioneren zoals te zien in de
rechterafbeelding. Voer de volgende stappen uit:
• centreer het vierkant;
• geef het vierkant een eigen schaduw;
56 1 Basis HTML5 en CSS3
• centreer de driehoek;
• positioneer de driehoek relatief top -200px;
• positioneer de cirkel in relatie tot het vierkant;
• geef de cirkel een eigen schaduw;
Lagen
z-index
Het attribuut z-index geeft ons de mogelijkheid om lagen te creëren en die te laten
overlappen. Elk element met het attribuut z-index krijgt een eigen laag. De index
bepaalt de volgorde van overlappen. Elementen met een hogere index worden op
de voorgrond weergegeven en elementen met een lagere index worden op de achtergrond weergegeven. Hieronder zie je drie lagen weergegeven.
Figuur 1.36
In de volgende opgave maken we een bladerknop (‘pager’) met een simpele navigatie naar de volgende en de vorige pagina.
• Webbouw 22
Open index.html en voeg de volgende elementen <div id="pager"> toe onderaan
het <main>-element.
 . . .
 <div id="pager">
 <div id="vorige">
 <a href="#top"> &lt;</a>
 </div>
 <div id="volgende">
 <a href="playlist.html"> &gt; </a>
 </div>
 </div>
 . . .
De stijlen van de bladerknop maken we hieronder.
1.6 Hoofd-content 57
• Webbouw 23
Open styles.css en voeg de volgende stijlen eraan toe.
#pager a{
 font-size: 3rem;
 font-weight: bolder;
 text-decoration: none;
 border-radius: 50%;
 box-shadow: 4px 4px 15px rgba(0,0,0,0.8);
 padding-left: 10px;
 padding-right: 10px;
}
#pager a:hover{
 opacity: 0.7;
 filter: alpha(opacity=40);
 font-size: 3.2rem;
 background-image: linear-gradient(to bottom, hsl(0, 80%, 50%), #bada55);
}
#vorige{
 z-index: 1;
 margin-left: 10px;
 position: fixed;
 top: 45%;
 left: 4%;
}
We hebben een hover-eff ect gecodeerd met een lineair verloop en een hsl.
hsl
Met het attribuut hsl specifi ceren we kleurtint (hue), verzadiging (saturation),
helderheid (lightness) en transparantie (alpha). Met het attribuut hsla kun je ook
transparantie specifi ceren.
Hue is afgeleid uit de kleurencirkel: 0 t/m 360 graden.
Saturation is een percentage: van grijstinten 0 tot volle kleur 100.
Lightness is een percentage: van donker 0 tot licht 100.
Alpha is opacity (transparantie): van onzichtbaar 0.0 tot zichtbaar 1.0.
Bijvoorbeeld:
background: hsla(165, 35%, 50%, 1.0)
De kleurtint is groen.
De verzadiging (grijstint) is 35.
De helderheid is 50.
De transparantie is 1.0.
58 1 Basis HTML5 en CSS3
Figuur 1.37
In ons geval hebben we een hover-eff ect gecodeerd met een kleurverloop als volgt:
linear-gradient(to bottom, hsl(0, 80%, 50%), #bada55);
Dit betekent een kleurverloop van boven naar beneden, beginnend met kleurtint 0
(rood) en een verzadiging van 80, een helderheid van 50, en we eindigen met de
kleur bada55.
• Webbouw 24
In deze opgave plaats je de rechter bladerknop binnen de pager. Het resultaat moet
er als volgt uitzien:
Figuur 1.38
• Lab 08
Open een nieuw bestand en sla het op als lab08.html. In deze lab-opdracht maak
je de volgende drie elementen:
1.6 Hoofd-content 59
<body>
 <div id="een" class="verticaal">
 <br>Element 1<br>index-1</div>
 <div id="twee" class="verticaal">
 <br>Element 2<br>index-2</div>
 <div id="drie" class="verticaal">
 <br>Element drie<br>index-3</div>
</body>
Open een nieuw bestand en sla het op als lab08.css.
Zorg ervoor dat alle div-elementen de volgende attributen krijgen:
div{
 height: 200px;
 width: 200px;
 border-radius: 50%;
 opacity: 0.7;
 text-align: center;
 font-size: 1.7rem;
 color: aliceblue;
}
Alle div’s krijgen de volgende verticale klasse:
.verticaal {
 margin: 30px 20px 0 0;
 transform: skew( 0, -30deg );
 -ms-transform: skew( 0, -30deg );
 -moz-transform: skew( 0, -30deg );
 -o-transform: skew( 0, -30deg );
 -webkit-transform: skew( 0, -30deg );
}
Alle div’s krijgen de volgende attributen:
• eigen achtergrondkleur;
• eigen relatieve positie;
• eigen z-index, om het element te overlappen;
• eigen draai-animatie.
Het resultaat zie je in de linkerafbeelding.
Figuur Lab 08
60 1 Basis HTML5 en CSS3
Zet de teksten om in cirkels zoals te zien is in de rechterafbeelding. Hiervoor maak
je gebruik van het attribuut border-radius.
 1.8 Codering en design van de footer
In deze paragraaf maken we de codering en het design van het footer-element.
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
 Webbouw 25, 26
Het onderste element van de pagina is het footer-element. In dit element plaatsen
we bedrijfsinformatie en belangrijke links naar bijvoorbeeld sociale media accounts
van het bedrijf.
• Webbouw 25
Open index.html en voeg het footer-element eraan toe.
 . . .
 <footer>
 <a href="#top"><img src="images/twitter.png" alt="x" ></a>
 <a href="#top"><img src="images/youtube.png" alt="x" ></a>
 <a href="#top"><img src="images/facebook.png" alt="x" ></a>
 <p>Copyright &copy; 2017 <i>Ontworpen door: xxx</i>
 Alle rechten voorbehouden.</p>
 </footer>
</body>
</html>
In deze opgave hebben we een speciale code gebruikt voor het symbool voor copyrights:
 <p>Copyright &copy; 2017 <i>Ontworpen door: xxx</i>
 Alle rechten voorbehouden.</p>
Symbolen in HTML
In de vorige opgave hebben we de &copy-code gebruikt voor het copyrightsymbool.
HTML heeft een Character Entity Encoding voor het coderen van speciale symbolen zoals de euro-, pond- en yen-tekens. Deze tekens coderen we met naamcodes
of numerieke codes. Hier volgt een tabel met symbolen en hun code.
1.8 Codering en design van de footer 61
Symbool Code Numeriek Omschrijving
&nbsp; &160; spatie
© &copy; &169; copyright
® &reg; &174; geregistreerd
™ &trade; &8482; trademark
 &euro; &8364; euro
 &pond; &163; pond
 &yen; &165; yen
& &AMP; &38; ampersand
< &lt; &60; minder dan
> &gt; &62; hoger dan
" &quot; &34; aanhalingsteken
• Webbouw 26
Open styles.css en voeg de volgende stijlen eraan toe:
footer{
 position: fixed;
 bottom: 0;
 right: 0;
 left: 0;
 margin: 0;
 float: left;
 text-align: center;
 width: 100%;
 padding-top: 20px;
 padding-bottom: 10px;
 background: linear-gradient(to right, red, orange, yellow, green, blue,
indigo, violet);
}
footer img{
 margin: 0;
 width: 4%;
}
footer p{
 margin: 0;
 color: firebrick;
}
Het resultaat van hoofdstuk 1 van het boek zie je hieronder:
62 1 Basis HTML5 en CSS3
Figuur 1.39
 1.9 De playlist-pagina
In deze paragraaf maken we de codering van de playlist-pagina. We maken kennis
met de volgende HTML-elementen:
• onclick events
• getElementById
• video-object
• table
• audio object
We behandelen ook de volgende CSS-attributen:
• text-transform
• nth-child( )
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
 Webbouw 27 t/m 35
Lab 09
In de playlist-pagina willen we drie albumcovers van drie artiesten weergeven.
Verder willen we dat als de user een album selecteert er aan de rechterkant een
multimediasectie van dat album wordt weergegeven. De multimediasectie bestaat
uit een video en een playlist van het gekozen album. Hieronder zie je het gewenste
1.9 De playlist-pagina 63
resultaat van de playlist-pagina:
Figuur 1.40
Alle pagina’s moeten hetzelfde design krijgen, zo ervaart de gebruiker dezelfde
‘look & feel’ gedurende het browsen op de website. Voor ons betekent dat dat sommige elementen zoals de navigatie, het logo en de footer hetzelfde blijven. Het
enige wat verandert is het hoofdonderwerp in het <main>-element. We hebben de
stijlen voor deze elementen in de vorige paragrafen gecodeerd en we hergebruiken
dezelfde stijlen in de playlist-pagina.
Codering van playlist-pagina
In de volgende opgave maken we een kopie van index.html en vervangen we het
<main>-element door een nieuw <main>-element.
• Webbouw 27
Stap 1: Open index.html en sla dit op als playlist.html.
Stap 2: Vervang het <main>-element door het volgende <main>-element:
. . .
<main>
<div id="albums"><h3>Albums</h3></div>
<div id="multimedia"><h3>Multimedia</h3></div>
</main>
. . .
Het resultaat zie je hieronder:
64 1 Basis HTML5 en CSS3
Figuur 1.41
We maken nu de code voor drie albums met onclick-events.
• Webbouw 28
Open playlist.html en vervang <h3>Albums</h3> met de volgende <ul>-lijst.
Binnen dubbele aanhalingstekens kunnen we enkele aanhalingstekens gebruiken,
dan is duidelijker wat bij elkaar hoort.
"tekst 'tekst'"
En binnen enkele aanhalingstekens kun je dubbele gebruiken als het nodig is:
'tekst "tekst"'
. . .
<main>
<div id="albums">
<ul>
 <li>
 <a onclick=
 "document.getElementById('album-1').style.display='block';
 document.getElementById('album-2').style.display='none';
 document.getElementById('album-3').style.display='none';">
 <img src="images/album-1.jpg"></a>
 </li>
 <li>
 <a onclick=
 "document.getElementById('album-1').style.display='none';
 document.getElementById('album-2').style.display='block';
 document.getElementById('album-3').style.display='none';">
 <img src="images/album-2.jpg"></a>
 </li>
 <li>
 <a onclick=
 "document.getElementById('album-1').style.display='none';
 document.getElementById('album-2').style.display='none';
 document.getElementById('album-3').style.display='block';">
 <img src="images/album-3.jpg"></a>
 </li>
</ul>
1.9 De playlist-pagina 65
</div> <!-- einde albums -->
<div id="multimedia"><h3>Multimedia</h3></div>
</main>
. . .
Hier zien we voorbeelden van het gebruik van aanhalingstekens binnen aanhalingstekens in code. Dit doen we met enkele aanhalingstekens. Bijvoorbeeld een
boektitel: "De boektitel is 'JavaScript'."
LET OP
In Webbouw 28 hebben we ook gezegd dat bij het klikken op de tweede afbeelding
het element ‘album-2’ zichtbaar moet worden en ‘album-1’ en ‘album-3’ onzichtbaar. In het tweede onclick-event:
album-1 krijgt display='none'
album-2 krijgt display='block'
album-3 krijgt display='none'
Wat zijn events?
Een webpagina herkent vier soorten events:
• window-events
• formulier-events
• toetsenbord-events
• muis-events
Een voorbeeld van een muis-event is wanneer er wordt geklikt op een knop of een
afbeelding. Dit event heet onclick. In de vorige opgave hebben we als volgt een
onclick-event toegevoegd aan het <a>-element:
<a onclick=". . .">
Tussen de aanhalingstekens zeggen we wat er moet gebeuren als dit event zich
voordoet:
<a onclick=
 "document.getElementById('album-1').style.display='block';
 document.getElementById('album-2').style.display='none';
 document.getElementById('album-3').style.display='none';">
 <img src="images/album-1.jpg">
</a>
In dit voorbeeld hebben we ervoor gezorgd dat als er op de afbeelding van het
eerste album wordt geklikt het element album-1 zichtbaar wordt en de elementen
album-2 en album-3 onzichtbaar. De elementen album-2 en album-3 coderen we in de
komende opgaven.
66 1 Basis HTML5 en CSS3
De methode getElementById
We maken gebruik van deze methode als volgt:
getElementById('id')
Enkele en dubbele aanhalingstekens zijn verwisselbaar, maar je moet consequent
zijn, bijvoorbeeld:
onclick = "document.getElementBiId('album-1')"
is hetzelfde als:
onclick = 'document.getElementBiId("album-1")'
Als het onclick-event begint met dubbele aanhalingstekens, dan moet het ook eindigen met dubbele aanhalingstekens.
Met deze methode selecteren we een element door middel van zijn id. Daarna kunnen we de attributen van het geselecteerde element wijzigen, bijvoorbeeld het attribuut display.
Het attribuut display
Dit attribuut heeft de volgende opties:
• block zichtbaar
• inline zichtbaar
• none onzichtbaar
Voorbeelden van block-elementen zijn:
• <h1>
• <p>
• <l1>
• <div>
Een inline-element krijgt geen marges. Voorbeelden van inline-elementen zijn:
• <span>
• <a>
Design van albums
In de volgende opgave coderen we de stijlen van het albums-element.
• Webbouw 29
Open styles.css en voeg de volgende stijlen eraan toe.
#albums{
 width: 25%;
 padding-left: 5%;
 float: left;
}
1.9 De playlist-pagina 67
#albums ul li img{
 width: 50%;
 margin-top: 9%;
 box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
}
Het resultaat zie je hieronder.
Figuur 1.42
• Webbouw 30
Open playlist.html en vervang het element <h3>Multimedia</h3> door het volgende:
. . .
</div> <!-- einde albums -->
<div id="multimedia">
<div id="album-1" style='display: block'>
 <video controls width="80%" preload poster="images/album-1.jpg">
 <source src="videos/trailer.webm" type="video/webm"/>
 <source src="videos/trailer.ogv" type="video/ogg"/>
 <source src="videos/trailer.mp4" type="video/mp4"/>
 </video>
</div> <!-- einde album-1 -->
</div> <!-- einde multimedia -->
</main>
. . .
video
Met het element <video> stellen we de attributen van het video-object in. Het attribuut poster geeft het beginbeeld en de attributen width en height geven de dimensies van het video-object aan. Bijvoorbeeld:
68 1 Basis HTML5 en CSS3
<video controls width="100%" height="250px"
 preload id="videos"
 poster="videos/videoposter.jpg">
source
Met het element <source> (bron) geven we aan waar de video te vinden is en wat
voor type video het is. De bron van een video kan je eigen website zijn of een andere website zoals YouTube. In ons geval plaatsen we de video in de map videos.
<source src="videos/trailer.webm" type="video/webm"/>
<source src="videos/trailer.ogv" type="video/ogg"/>
<source src="videos/trailer.mp4" type="video/mp4"/>
Het type attribuut geeft het format van de video aan. HTML5 maakt het mogelijk
om video’s af te spelen zonder browser-plugins. Het probleem is echter dat er op
dit moment nog geen standaardformat is. Niet alle browsers ondersteunen elk formaat. De indeling MP4 wordt op dit moment het meest gebruikt. Willen we onze
video’s in alle browsers kunnen afspelen, dan betekent dit dat we onze video’s moeten converteren naar alle formats.
Videoformaat
Hieronder zien we de videoformats die ondersteund worden door de verschillende
browsers.
Chrome MP4, OOG, WEBM
Mozilla OGG, WEBM
Opera OOG, WEBM
Safari MP4
Microsoft Flash
1.9 De playlist-pagina 69
Videoconversies
Op internet is gratis software voor videoconversie te downloaden. Zoek een fi lmpje
voor je website en maak daarna met behulp van conversiesoftware meerdere fi lmpjes in de verschillende formats voor alle browsers. Zorg ervoor dat je je video in
ieder geval naar de volgende drie formats converteert.
• webm
• ogg
• mp4
Design van multimedia
In de volgende opgave coderen we de stijlen van het multimedia-element.
• Webbouw 31
Open styles.css en voeg de volgende stijlen eraan toe.
#multimedia{
 width: 55%;
 border-radius: 2%;
 padding-top: 2%;
 box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
 float: left;
 background-image: linear-gradient(to bottom, hsl(0, 80%, 50%), #bada55);
}
Het resultaat zie je hieronder:
Figuur 1.43
70 1 Basis HTML5 en CSS3
Tabellen
Een tabel coderen we met de <table>-tag. De eenvoudigste tabel bestaat uit één
rij en één kolom. Je mag een tabel splitsen in drie secties: een koptekst (header),
een voettekst (footer) en de tabel zelf (body). In het volgende voorbeeld zien we de
basisstructuur van een tabel:
<table>
 <thead> . . . </thead>
 <tfoot> . . . </tfoot>
 <tbody> . . . </tbody>
</table>
thead
De tag <thead> gebruiken we om alle <th>-elementen of alle kopteksten van een
tabel te groeperen. Bijvoorbeeld:
<table>
 <thead>
 <tr>
 <th>Naam</th>
 <th>Adres</th>
 <th>Postcode</th>
 <th>Stad</th>
 </tr>
 </thead>
 <tfoot> . . . </tfoot>
 <tbody> . . . </tbody>
</table>
tr
Het element <tr> markeert het begin van een tabelrij.
th
Het element <th> gebruiken we voor kopteksten van de <thead>-elementen en voor
de voetteksten van de <tfoot>-elementen.
tfoot
Het <tfoot>-element gebruiken we om alle voetteksten van een tabel te
groeperen. Bijvoorbeeld:
<table>
 <thead>
 <tr>
 <th>Naam</th>
 <th>Adres</th>
 <th>Postcode</th>
 <th>Stad</th>
 </tr>
 </thead>
1.9 De playlist-pagina 71
 <tfoot>
 <tr>
 <th colspan="4">NAW-gegevens</th>
 </tr>
 </tfoot>
 <tbody> . . . </tbody>
</table>
colspan
Het attribuut colspan geeft aan hoeveel kolommen een element breed is. In dit geval is de voettekst van de tabel 4 kolommen breed.
<th colspan="4">NAW-gegevens</th>
tbody
Het <tbody>-element gebruiken we om alle <td>-elementen of alle cellen van een
tabel te groeperen. Bijvoorbeeld:
 <tbody>
 <tr>
 <td>Marco Leeman</td>
 <td>Kruislaan 222</td>
 <td>3333XX</td>
 <td>Rotterdam</td>
 </tr>
 <tr>
 <td>Gebre Gebrmariam</td>
 <td>Middenweg 111</td>
 <td>1000AB</td>
 <td>Utrecht</td>
 </tr>
 </tbody>
</table>
Met de bovenstaande code genereren we de volgende tabel:
Naam Adres Postcode Plaats
Marco Leeman Kruislaan 222 3333XX Rotterdam
Gebre Gebrmariam Middenweg 111 1000AB Utrecht
NAW-gegevens
• Lab 09
Open een nieuw bestand en sla het op als lab09.html. In deze lab-opdracht maak
je de volgende tabel aan.
Figuur Lab 09
72 1 Basis HTML5 en CSS3
Open een nieuw bestand en sla het op als lab09.css. Codeer de volgende stijlen.
– Geef de tabel een dubbele border.
– Geef een achtergrond met een linear-gradient.
– Geef alle tabelcellen <td> een padding-left en padding-right van 15px.
In de volgende opgave maken we een tabel voor een playlist van drie tracks voor
het eerste album.
• Webbouw 32
Open playlist.html en voeg de volgende tabel eraan toe.
. . .
</video>
<table>
 <thead>
 <tr>
 <th>Track</th><th>Titel</th><th>Tijd</th><th>Play</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>1</td>
 <td>Titel 1</td>
 <td>02:08</td>
 <td>
 <a onclick="
 document.getElementById('audio').src='muziek/2121.mp3';
 v=document.getElementById('audio');
 v.play();">|></a>
 </td>
 </tr>
 <tr>
 <td>2</td>
 <td>Titel 2</td>
 <td>03:18</td>
 <td>
 <a onclick="
 document.getElementById('audio').src='muziek/2121.mp3';
 v=document.getElementById('audio');
 v.play();">|></a>
 </td>
 </tr>
 <tr>
 <td>3</td>
 <td>Titel 3</td>
 <td>02:08</td>
 <td>
 <a onclick="
 document.getElementById('audio').src='muziek/2121.mp3';
 v=document.getElementById('audio');
 v.play();">|></a>
1.9 De playlist-pagina 73
 </td>
 </tr>
 </tbody>
</table>
<audio style="display: block" id="audio" src="muziek/2121.mp3" controls>
</audio>
</div> <!-- einde album-1 -->
<div id="album-2" style='display: none'>
 . . .
</div> <!-- einde album-2 -->
<div id="album-3" style='display: none'>
 . . .
</div> <!-- einde album-3 -->
</div> <!-- einde multimedia -->
</main>
. . .
Hier hebben we de tekens |> gebruikt voor de PLAY-knop.
In de vorige opgave maakten we weer gebruik van het onclick-event. In dit geval
willen we dat als er op een track wordt geklikt de bron en de naam van de track die
afgespeeld moet worden afgespeeld. Dit doen we als volgt:
 <a onclick="
 document.getElementById('audio').src='muziek/2121.mp3';
 v=document.getElementById('audio');
 v.play();">|></a>
audio
Het element audio gebruiken we voor het bepalen van de audiocontroles van het
audio-object. De controles zijn: volume, play en pause.
source
Het attribuut src (bron) geeft de bron aan van het audio-object. De bron kan een
MP3- of MPEG4-bestand in een map van de eigen website zijn of een externe website zoals iTunes. In ons geval is de map muziek de bron van de tracks.
<audio style="display: block" id="audio" src="muziek/2121.mp3" controls>
play-methode
De play-methode hoort bij het audio-object en speelt het aangegeven bestand af.
Bijvoorbeeld:
 v=document.getElementById('audio');
 v.play();">|></a>
audioformat
Hieronder zien we de verschillende audioformats voor het audio-object.
74 1 Basis HTML5 en CSS3
Formaat Extensie Omschrijving
WAV .wav Ontwikkeld door IBM en Microsoft voor Windows
OGG .ogg Ontwikkeld door Xiph.org
MP3 .mp3 Het populairste formaat, werkt in alle browsers
In de volgende opgave maken we de stijlen voor de playlist-tabel.
• Webbouw 33
Open styles.css en voeg de volgende stijlen eraan toe.
table {
 width: 100%;
}
table th{
 text-transform: uppercase;
}
tbody tr:nth-child(odd) {
 backgroundColor: #868585;
}
tbody tr:hover{
 opacity: 0.6; filter: alpha(opacity=6);
}
audio{
 width: 100%;
}
LET OP
Bij tr:nth-child en tr:hover mag je geen spaties typen.
text-transform
Dit attribuut gebruiken we voor het omzetten van teksten in hoofdletters of kleine
letters.
transform Omschrijving
lowercase Omzetten in kleine letters
uppercase Omzetten in hoofdletters
capitalize Eerste letter omzetten in hoofdletter
Bijvoorbeeld:
h1{text-transform: lowercase}
resultaat: radio gaga
h1{text-transform: uppercase}
resultaat: RADIO GAGA
1.9 De playlist-pagina 75
h1{text-transform: capitalize}
resultaat: Radio Gaga
nth-child()
Met dit attribuut selecteren we child-elementen in geneste elementen, bijvoorbeeld
in een lijst of tabel. Onze playlist tabel heeft meerdere rijen voor tracks. Met dit attribuut kunnen we de stijlen coderen voor bijvoorbeeld de even of oneven rijen:
Nth-child Omschrijving
tbody tr:nth-child(odd) Selecteer even tabelrijen
tbody tr:nth-child(even) Selecteer oneven tabelrijen
tbody tr:nth-child(2) Selecteer de tweede tabelrij
We selecteren de oneven rijen om vervolgens een andere achtergrondkleur te specifi ceren. Dit doen we als volgt:
tbody tr:nth-child(odd) {
 backgroundColor: #868585;
}
Daarna coderen we een hover-eff ect met een ondoorzichtigheid als volgt:
tbody tr:hover{
 opacity: 0.6; filter: alpha(opacity=6);
}
Het resultaat zien we hieronder:
Figuur 1.44
76 1 Basis HTML5 en CSS3
• Webbouw 34
In deze opgave maak je de code en de stijlen voor album-2 en album-3.
<div id="album-2" style='display: none'>
 . . .
</div>
<div id="album-3" style='display: none'>
 . . .
</div>
Bij ieder album vervang je de puntjes door een:
• video-object
• playlist-tabel
• audio-object
Bijvoorbeeld, als we op het tweede album klikken, moeten de video, de tracks en
het audio-object voor het tweede album verschijnen. Het resultaat zie je hieronder:
Figuur 1.45
• Webbouw 35
In deze opgave maak je de code van het bladerknop-element in de playlist-pagina
als volgt:
– vorige knop gaat naar index.html;
– volgende knop gaat naar formulier.html.
 1.10 De formulierpagina
In deze paragraaf maken we de code van de formulierpagina. We maken kennis
met de volgende HTML-elementen:
1.10 De formulierpagina 77
• form
• fi eldset
• legend
• input type text
• datalist
• input type radio
• textarea
• input type checkbox
• input type submit
We maken ook kennis met de volgende CSS-attributen:
• input: required
• input: invalid
• input: focus
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
 Webbouw 36 t/m 49
Lab 10
In de formulierpagina willen we een formulier maken waar de user gratis kaarten
kan bestellen voor een concert. Hieronder zie je het gewenste resultaat van de formulierpagina:
Figuur 1.46
78 1 Basis HTML5 en CSS3
Codering van het formulier
In de volgende opgave maken we een formulier voor het bestellen van gratis concertkaarten.
• Webbouw 36
Stap 1: Open index.html en sla het op als formulier.html.
Stap 2: Vervang het <main>-element door het volgende <main>-element:
. . .
<main>
<form name="formulier"
 action = "mailto: postmaster@radiogaga.com"
 method = "post">
 <fieldset>
 . . .
 </fieldset>
</form>
</main>
. . .
Hier zien we dat in codering de spaties vóór en na het =-teken optioneel zijn.
In de volgende opgaven gaan we de puntjes van het formulier invullen.
form
Met het <form>-element coderen we formulieren. Tussen de <form>- en </form>-tags
in mag je alleen formulier-elementen plaatsen. Aan de <form>-tag kun je een actie
(action) en een methode (method) toekennen. Zo kunnen de gegevens in een formulier in combinatie met scripts (bijvoorbeeld PHP, Personal Home Page) via de server lopen. Om de gegevens te kunnen mailen gebruik je bij action de term mailto:
<form name="formulier"
 action = "mailto: postmaster@radiogaga.com"
 method = "post">
Bij method geef je aan wat er met de informatie gedaan moet worden. In dit voorbeeld kiezen we voor post, want de informatie moet verzonden worden naar het
email-adres.
De basiselementen van een formulier zijn:
• invoervelden
• selectievakjes
• keuzerondjes
• keuzemenu
• knoppen
1.10 De formulierpagina 79
Hieronder zien we een voorbeeld van de basiselementen van een formulier:
Figuur 1.47
• Webbouw 37
Open formulier.html en voeg de volgende formulier-elementen eraan toe:
. . .
<fieldset>
<legend>Bestel gratis kaarten</legend>
 <input required type="text" id="naam"
 name="naam" placeholder="Naam" /><br>
 <input required type="email" id="email"
 name="email" placeholder="E-mail" /><br>
 <input required type="text" id="mobiel"
 name="mobiel" placeholder="Mobiel" /><br>
</fieldset>
. . .
fi eldset
Met het <fieldset>-element groeperen we een aantal formulier-elementen.
legend
Het <legend>-element is de legenda of beschrijving van een fieldset.
input type="text"
Het element <input type="text"> is een formulier-element met een invulvenster.
Bijvoorbeeld:
<input required type="text" id="naam" placeholder="vul uw naam in" />
• input type="text" geeft aan dat het een invulvenster voor tekst is.
• id="naam" geeft aan dat de referentienaam van het veld naam is.
• required geeft aan dat het invulvenster verplicht ingevuld moet worden.
• placeholder geeft de tekst die automatisch in het invulvenster verschijnt.
80 1 Basis HTML5 en CSS3
• Webbouw 38
Open formulier.html en voeg de volgende elementen eraan toe:
. . .
<input required type="text" placeholder="Woonplaats" name="woonplaats"
 id="woonplaats" list="steden" />
 <datalist id="steden">
 <option value="Amsterdam" />
 <option value="Utrecht" />
 <option value="Antwerpen" />
 <option value="Apeldoorn" />
 <option value="Brussel" />
 <option value="Rotterdam" />
 </datalist>
 <br>
 </fieldset>
. . .
list
Het list-attribuut van een element <input type="text"> geeft aan dat dit een optielijst is. Het attribuut geef de naam van de lijst aan:
list="steden"
datalist
Het datalist-element is de lijst met een aantal keuze-opties.
 <datalist id="steden">
 <option value="Amsterdam" />
 <option value="Utrecht" />
 <option value="Antwerpen" />
 <option value="Apeldoorn" />
 <option value="Brussel" />
 <option value="Rotterdam" />
 </datalist>
Niet alle steden staan in de lijst, we mogen ook onze eigen optie intypen. Het datalist-element is ook handig als we een lange lijst met opties hebben. Bijvoorbeeld
in ons geval: als we de letter A intikken krijgen we alleen de steden die de letter A
bevatten.
Figuur 1.48
1.10 De formulierpagina 81
• Webbouw 39
Open formulier.html en voeg de volgende elementen eraan toe:
. . .
 <select required naam="concerten" id="concerten">
 <option value="0">Kies een concert</option>
 <option value="Manu Chau">Manu Chau</option>
 <option value="Evanescence">Evanescence</option>
 <option value="Sade">Sade</option>
 </select>
 <br>
 </fieldset>
. . .
select
Het select-element is een keuzemenu met een beperkte aantal opties. Hier mogen
we geen eigen opties intypen.
option
Het option-element geeft de opties aan. De tekst tussen de tags <option> en
</ option> is de tekst die in het keuzemenu verschijnt.
• Webbouw 40
Open formulier.html en voeg de volgende elementen eraan toe:
 . . .
 <label for="datum">Geboortedatum: </label> <br>
 <input required type="date" name="datum" id="datum" /> <br>
 <label for="geslacht">Geslacht: </label>
 Man <input type="radio" name="geslacht" value="M" />
 Vrouw <input type="radio" name="geslacht" value="V" />
 <br>
 </fieldset>
 . . .
input type="date"
Het date-element genereert een maandkalender waarin we een datum kunnen
 kiezen.
input type="radio"
Een keuzerondje (radio-button) gebruik je uitsluitend om een optie uit een lijst te
kunnen kiezen. Bij het maken van een groep keuzerondjes moeten alle keuzerondjes dezelfde naam krijgen, bijvoorbeeld: name="geslacht".
82 1 Basis HTML5 en CSS3
• Webbouw 41
Open formulier.html en voeg de volgende elementen eraan toe:
 . . .
 <textarea placeholder="Schrijf een commentaar..."></textarea><br>
 </fieldset>
 . . .
textarea
Omdat een tekstveld weinig ruimte biedt om veel tekst kwijt te kunnen, kun je gebruik maken van <textarea>. We kunnen het aantal kolommen en rijen aangeven.
Bijvoorbeeld:
<textarea cols="35" rows="4"> </textarea>
checkbox
Selectievakjes (checkboxes) gebruik je om één of meer opties te kunnen kiezen. Bij
het maken van een selectievakje krijgen alle vakjes een eigen naam.
• Webbouw 42
Open formulier.html en voeg de volgende elementen eraan toe:
 . . .
 <label for="abonnementen">Gratis abonnementen:</label><br>
 Nieuwsbrief:
 <input type = "checkbox" name="nieuwsbrief"
 id = "nieuwsbrief" value="nieuwsbrief" /><br>
 Concertagenda:
 <input type = "checkbox" name="agenda"
 id = "agenda" value="agenda" /><br>
 <label for="ranking">Album Ranking</label>
 <input type="range" name="ranking" id="ranking" min="1" max="5">
 </fieldset>
 . . .
Input type = "range"
Met dit range-element kunnen we een getal tussen een minimale en een maximale
waarde aangeven.
Input type = "submit"
Bij online-formulieren kun je ook knoppen (buttons) gebruiken. Een verplicht onderdeel van een formulier is de verzendknop (submit-button). Dit doen we op de
volgende manier.
• Webbouw 43
Open formulier.html en voeg de volgende elementen eraan toe:
1.10 De formulierpagina 83
 . . .
 </fieldset>
 <input type="submit" id="verzend"
 name="verzend" value="Verzend" />
 </form>
</main>
 . . .
Het resultaat van de codering van het formulier zie je hieronder:
Figuur 1.49
• Webbouw 44
In deze opgave codeer je het bladerknop-element in de formulierpagina als volgt:
– vorige knop gaat naar playlist.html;
– volgende knop gaat naar contact.html.
Design van het formulier
In de volgende opgave maken we het design voor het formulier.
• Webbouw 45
Open styles.css en voeg de volgende stijlen eraan toe.
form{
 width: 100%;
 margin: 0;
 text-align: center;
}
legend{
 font-size: 1.5em;
 font-weight: bold;
}
fieldset{
 border: solid 2px #009D22;
 width: 70%;
 margin: auto;
 border-radius: 2%;
 background-image: linear-gradient(to bottom, hsl(0, 80%, 50%), #bada55);
}
84 1 Basis HTML5 en CSS3
Hier geven we het fieldset-element hetzelfde lineaire kleurverloop als het multimedia-element van de playlist-pagina. In de volgende opgave maken we het design
van de input-, select- en textarea-elementen.
• Webbouw 46
Open styles.css en voeg de volgende stijlen eraan toe.
input, select, textarea{
 border: solid 1px rgb(0, 0, 0);
 margin: 5px;
 padding: 5px 30px 5px 50px;
 width: 50%;
 text-align: center;
 font-size: 1em;
 border-radius: 5px;
}
In de volgende opgave zorgen we ervoor dat het vakje dat ingevuld moet worden
extra opvalt (focus) door een groene schaduw.
• Webbouw 47
Open styles.css en voeg de volgende stijlen eraan toe.
input: focus, textarea: focus{
 box-shadow: 6px 6px 10px #2eef1e;
}
select{
 width: 35%;
}
In de volgende opgave coderen we de opmaak voor de rest van de input-elementen.
Bij ieder element geven we het type tussen vierkante haakjes [ ] aan.
• Webbouw 48
Open styles.css en voeg de volgende stijlen eraan toe.
input[type=date]{
 width: 25%;
}
input[type=checkbox],
input[type=radio] {
 width: 4%;
}
input[type=submit] {
 backgroundColor: #bada55;
 width: 43%;
 opacity: 0.6;
}
input[type=submit]: hover {
 opacity: 1;
 transition: opacity 0.5s linear;
}
1.10 De formulierpagina 85
Merk op dat alle input-elementen gedefi nieerd waren met een breedte van 50.
Daarom moet nu worden aangegeven dat de radio-elementen een breedte van 4
moeten hebben. Het resultaat zie je hieronder:
Figuur 1.50
• Webbouw 49
In deze opgave codeer je het bladerknop-element in de playlist-pagina als volgt:
– vorige knop gaat naar playlist.html;
– volgende knop gaat naar contact.html.
• Lab 10
Open een nieuw bestand en sla het op als lab10.html. In deze lab-opdracht maak je
het volgende formulier aan.
Figuur Lab 10
86 1 Basis HTML5 en CSS3
 1.11 De contactpagina
In deze paragraaf maken we de code van de contactpagina. We maken kennis met
de volgende html inline-elementen:
• p
• strong
• em
• mark
We maken ook kennis met de volgende CSS-attributen:
• overflow
• text-shadow
• line-height
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
 Webbouw 50 t/m 52
Lab 11
Op de contactpagina willen we een korte tekst over onze organisatie plaatsen. We
willen ook een kort formulier waar de user vragen kan stellen of feedback aan de
webmaster kan geven.
Codering van de contactpagina
• Webbouw 50
Stap 1: Open index.html en sla het op als contact.html.
Stap 2: Vervang het <main>-element door het volgende <main>-element:
. . .
<main>
<p id="contact">
 <span>Aliquam erat volutpat.</span> <em>Mauris</em> vel neque sit amet nunc
gravida
 <strong>congue sed sit amet purus</strong>.<br> <mark>Quisque</mark> lacus
 quam, egestas ac tincidunt a, lacinia vel velit.<br>
</p>
</main>
. . .
LET OP
In HTML mag je tekst afbreken met de <br>-tag. De Enter-toets heeft in je code
geen enkel eff ect.
1.11 De contactpagina 87
Het element <p>
Met het <p>-element openen we een nieuwe alinea en met </p> sluiten we de alinea. Alle tekst ertussenin is de inhoud van de alinea. Op alinea’s kunnen we allerlei
tekstattributen toepassen, zoals lettertype, tekengrootte, vet, cursief en links, midden en rechts uitlijnen. Bijvoorbeeld:
<p>I Amsterdam</p>
em
Het <em>-element gebruiken we om een woord of tekst cursief weer te geven.
Bijvoorbeeld:
<p><em>I</em> Amsterdam</p>
geeft als resultaat:
I Amsterdam
strong
Het <strong>-element gebruiken we om een woord of tekst vet weer te geven.
Bijvoorbeeld:
<p><em>I</em> <strong>Am</strong>sterdam</p>
geeft als resultaat ...
I Amsterdam
mark
Het <mark>-element gebruiken we om een woord of tekst geel te markeren.
Bijvoorbeeld:
<p><em>I</em> <strong>Am</strong><mark>sterdam</mark></p>
geeft als resultaat ...
I Amsterdam
Design van de contactpagina
• Webbouw 51
Open styles.css en voeg de volgende stijlen eraan toe.
#contact{
 margin-left: auto;
 margin-right: auto;
 width: 50%;
 text-align: justify;
 line-height: 1.6em;
}
88 1 Basis HTML5 en CSS3
#contact span{
 font-size: 1.3rem;
 letter-spacing: 5px;
 text-shadow: 2px 2px 4px #2eef1e;
 text-transform: uppercase;
}input[type=submit]: hover {
 opacity: 1;
 transition: opacity 0.5s linear;
}
• Lab 11
In deze lab-opdracht maak je de contactpagina af door de code voor een feedbackformulier toe te voegen. Het design van de formulier-elementen hebben we al in de
vorige paragraaf gemaakt. Het resultaat moet er als volgt uitzien.
Figuur 1.51
• Webbouw 52
In deze opgave codeer je het bladerknop-element in de playlist-pagina als volgt:
– vorige knop gaat naar formulier.html;
– volgende knop gaat naar index.html.
 1.12 Responsive design
In deze paragraaf kijken we naar responsive design. Met responsive design maken
we vloeiende designs die zich aanpassen aan de resolutie van het scherm van de
user. Responsive design maken we met grid-frameworks of gridless.
1.12 Responsive design 89
Planning Inleveren
 Webbouw 53 t/m 55
Lab 12
Grid-frameworks
Een grid framework maakt gebruik van kolommen met een vast gedefi nieerde
breedte. De bekendste frameworks zijn Bootstrap en Foundation. Deze frameworks
gebruiken een aantal nuttige tools die ons designwerk vereenvoudigen. Het enige
nadeel is dat deze systemen in het algemeen bestaan uit veel te grote libraries die
de snelheid van onze website kunnen vertragen. De keuze voor het wel of niet gebruikmaken van een framework hangt af van de hoeveelheid functionaliteit die je
uit het framework haalt. Als je minder dan 30 van het systeem gebruikt, is het
niet de moeite waard om het framework toe te voegen aan je website, want veel van
de functionaliteit kun je zelf coderen in CSS.
Gridless
Gridless responsive design is een design waar we zelf de dimensies van kolommen
en div’s defi niëren in termen van percentages in plaats van vaste breedtes in pixels.
Bijvoorbeeld, als we een breedte van 95 toepassen op een element, betekent dit
dat de breedte van het element zich altijd zal aanpassen aan 95 van de breedte
van het venster of scherm van de user. Het maakt niet uit of het scherm groot, middel of klein is. In deze paragraaf werken we met gridless responsive design, zodat
we basiskennis van responsive design opdoen.
Voorbeeld van niet vloeiend design
In de volgende fi guur zien we een voorbeeld van niet-responsive design. Hier hebben we de breedte van de elementen in pixels gedefi nieerd. Het resultaat is dat bij
smallere beeldschermen de breedte van de kolommen niet wordt aangepast en een
deel van de pagina niet meer zichtbaar is.
Figuur 1.52
90 1 Basis HTML5 en CSS3
Voorbeeld van vloeiend design
In de volgende fi guur zien we een vloeiend design waar de dimensies van de elementen in termen van percentages zijn gedefi nieerd en zich aanpassen aan de
breedte van het scherm.
Figuur 1.53
Responsive browser-knop
Als je bijvoorbeeld in je Chrome-browser op Control-Shift-C klikt krijg je het volgende venster waar je onderin de linkerhoek op het mobiel icon kunt klikken. Je
krijgt onderstaand venster te zien.
Figuur 1.54
Hier zien we dat bij een venster van 900 pixels breed ons design niet optimaal is.
Met andere woorden, het scherm ziet er veel te vol uit.
1.12 Responsive design 91
@media query
We hebben een manier nodig om te kunnen bepalen wat voor apparaat door de
user wordt gebruikt. Is het scherm van een desktop, tablet of mobiel? Hiervoor
gebruiken we @media queries in CSS. In de volgende opgave gaan we @media queries uitvoeren om ons design aan te passen.
• Webbouw 53
Open een nieuw bestand en sla het op als responsive.css. Voeg de volgende stijlen
eraan toe.
/* max 900px (tablets) */
@media only screen
and (max-width: 900px){
 body{
 max-width: 900px;
 }
 main{
 backgroundColor: #97D0AC;
 }
 nav ul li a{
 font-size: 1.2rem;
 }
 #logo{
 margin-top: 35px;
 padding-top: 10%;
 background-size: 50% 50%;
 }
 #albums{
 width: 100%;
 padding-left: 5%;
 float: left;
 }
 #albums ul li img{
 width: 18%;
 margin-top: 3%;
 margin-left: 7%;
 margin-bottom: 5%;
 float: left;
 }
 #multimedia{
 margin-left: auto;
 margin-right: auto;
 float: none;
 }
}
Voeg deze responsive.css-stijlen als volgt toe aan je index-, playlist-, formulier- en
contactpagina’s:
 <link rel="stylesheet" href="responsive.css">
92 1 Basis HTML5 en CSS3
Hier hebben we een @media query uitgevoerd voor apparaten met resoluties onder de 900 pixels, bijvoorbeeld de meeste tablets – hoewel sommige tablets nu
al hogere resoluties hebben. Het enige wat voor ons belangrijk is is om te zien in
welke resolutie ons design wordt verstoord. Met deze @media query op 900 pixels
in Webbouw 53 doen we het volgende:
– het main-element krijgt een nieuwe achtergrondkleur;
– de font-size van de navigatie maken we kleiner.
nav ul li a{
 font-size: 1.2rem;
}
Background-size
De breedte van het logo wordt in percentages weergegeven.
#logo{
 margin-top: 35px;
 padding-top: 10%;
 background-size: 50%;
}
Het albums-element wordt naar boven gebracht en de afbeeldingen worden kleiner
weergegeven.
#albums{
 width: 100%;
 padding-left: 5%;
 float: left;
}
#albums ul li img{
 width: 18%;
 margin-top: 3%;
 margin-left: 7%;
 margin-bottom: 5%;
 float: left;
}
Het multimedia-element wordt gecentreerd.
#multimedia{
 margin-left: auto;
 margin-right: auto;
 float: none;
}
Om het resultaat van de vorige opgave te testen moet je de breedte van je browser
kleiner maken. Het resultaat moet zoals hieronder zijn:
1.12 Responsive design 93
Figuur 1.55
Als we ons scherm nog kleiner maken zien we dat bij ongeveer 600 pixels ons
design weer wordt verstoord. Met name de lettergrootte van de playlist is veel te
groot. In de volgende opgave krijgt het main-element een nieuwe achtergrondkleur
en maken we de tekst kleiner.
• Webbouw 54
Open responsive.css. Voeg de volgende stijlen eraan toe.
@media only screen
and (max-width: 600px){
 body{
 max-width: 600px;
 }
 main{
 backgroundColor: #D4808B;
 }
 table th{
 font-size: 0.8rem;
 }
 table td{
 font-size: 0.8rem;
 }
}
94 1 Basis HTML5 en CSS3
Het resultaat is een playlist met kleinere letters.
Figuur 1.56
Als we ons scherm nog kleiner maken zien we dat bij ongeveer 480 pixels breed
ons design weer wordt verstoord. Met name de navigatie is te klein geworden. In
de laatste @media query zorgen we ervoor dat de navigatieknoppen onder elkaar
komen te staan.
• Webbouw 55
Open responsive.css. Voeg de volgende stijlen eraan toe.
@media only screen
and (max-width: 480px){
 body{
 max-width: 480px;
 }
 main{backgroundColor: #FF4E00;
 }
 nav ul li{
 float: none;
 width: 100%;
 }
}
Het resultaat zie je hieronder:
1.13 Material design 95
Figuur 1.57
• Lab 12
In deze lab-opdracht maak je @media queries voor de formulier- en de contactpagina’s.
 1.13 Material design
Material design is een door Google ontworpen designtaal voor websites en apps.
De oorsprong van material design ligt in de vraag: ‘Hoe kunnen ons voorbereiden
op de toekomst, uitgaande van zaken die we al kennen?’ Matias Duarte, hoofd design bij Google Android, denkt door materialen te nemen die we al kennen, zoals
een vierkant wit vlak als papier en een cirkel als knop, een design-omgeving te kunnen maken die logisch en natuurlijk, maar ook futuristisch over moet komen.
Material design is een uitgebreide gids voor beeldend, bewegend en interactief
ontwerp voor verschillende platforms en apparaten. Material design is een set van
richtlijnen waar grafi sche web-elementen zoals knoppen en menu’s worden gezien
als papier-elementen. Met deze richtlijnen creëren we interfaces waar we typografi e, ruimte, schaal en kleur gebruiken om hiërarchie, betekenis en focus weer te
geven.
Planning Inleveren
 Materials opgaven 1 t/m 4
96 1 Basis HTML5 en CSS3
Materiaaleigenschappen
Het materiaal van material design kun je je voorstellen als een vel papier. Een vel
papier heeft een hoogte, een breedte en een dikte. De breedte geven we aan op de
x-as, de hoogte op de y-as en de dikte op de z-as – zie fi guur 1.59.
Doordat het papier dikte heeft creëren we diepte, zoals te zien is in fi guur 1.58. De
vellen papier kunnen in laagjes over elkaar heen liggen. De dikte van elk ‘vel papier’
(z-as) is altijd 1 dp (ongeveer 1px).
Figuur 1.58 Overlappende materialen creëren diepte
Materiaal is stevig en kan niet door ander materiaal heen. Om materiaal van elkaar
te onderscheiden gebruiken we de z-as zoals in de volgende fi guur:
Figuur 1.59 Materiaal met diepte in de z-as
1.13 Material design 97
Materiaal met objecten
Materiaal (het vel papier) kan objecten bevatten. In de volgende fi guur zien we een
blauw object op een grijze materiaal-achtergrond. In de volgende opgave coderen
we een object op een materiaal zoals in fi guur 1.60.
• Materials opgave 1
Open een nieuw bestand en sla het op als materialopgave1.html. Voeg de volgende
code eraan toe.
<!DOCTYPE html>
<html lang="nl">
 <head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
 <title>RadioX</title>
 <style>
 #papier{
 height: 300px;
 backgroundColor: #EEEEEE;
 display: flex;
 justify-content: center;
 align-items: center;
 }
 #object{
 backgroundColor: #03A9F4;
 width: 150px;
 height: 150px;
 box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
 }
 </style>
 </head>
 <body>
 <section id="papier">
 <div id="object"></div>
 </section>
 </body>
</html>
Het resultaat zie je hieronder:
Figuur 1.60
98 1 Basis HTML5 en CSS3
Een object kan reageren op contact van de user. Dat object kan een knop zijn op de
papieren materiaalachtergrond. Om de knop duidelijk te maken kunnen we deze
afbeelden door een verhoging ten opzichte van het materiaal te suggereren. Dit kan
door het gebruik van schaduw.
Licht en schaduw van objecten
We creëren het gevoel van licht door het gebruik van schaduwen. Een gericht
licht op een object geeft een scherpe schaduw, een lichtbron in de omgeving geeft
een zachtere schaduw. In de volgende fi guur zien we links een object met scherpe
schaduwen aan de linker- en onderkant. Rechts zien we een actief object met een
grotere schaduw.
Figuur 1.61
We kunnen het idee creëren dat de knoppen bewegen (aan – uit) door een scherpe
of zachte schaduw. Een grotere en zachtere schaduw geeft het idee van meer
 diepte.
Materiaalomvorming
Materiaal (een vel papier) kan zich omvormen, uitbreiden en inkrimpen, terwijl de
diekte (z-as) gelijk blijft, zoals in de volgende opgave.
• Materials opgave 2
Open een nieuw bestand en sla het op als materialopgave2.html. Voeg de volgende code eraan toe.
<!DOCTYPE html>
<html lang="nl">
 <head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
 <title>Materials</title>
 <style>
 #papier{
 height: 300px;
 display: flex;
 justify-content: center;
 align-items: center;
 }
1.13 Material design 99
 #object{
 z-index: 2;
 backgroundColor: #03A9F4;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 border: 2px solid #ccc;
 box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
 -moz-transition-duration: 6.0s;
 -moz-transition-timing-function: ease-in-out;
 transition: border-radius, height, width linear;
 transition-duration: 6.0s;
 transition-timing-function: ease-in-out;
 }
 #object:hover{
 box-shadow: 3px 8px 8px rgba(0,0,0,0.5);
 height: 200px;
 width: 300px;
 border-radius: 5px;
 transform: translate(0, 0);
 }
 </style>
 </head>
 <body>
 <section id="papier">
 <div id="object"></div>
 </section>
 </body>
</html>
Het resultaat zie je hieronder: een cirkel wordt omgevormd tot een vierkant.
Figuur 1.62
Beweging en betekenis
In de vorige fi guur hebben we gezien hoe materiaal reageert op de hover-actie van
de user.
In de volgende fi guur zien we de transitie van een knop tot een knop met een grotere afmeting met dezelfde schaduw. De afstand tussen de knop en het materiaal is
niet veranderd.
100 1 Basis HTML5 en CSS3
Figuur 1.63
In de volgende fi guur zien we de transitie van een knop tot een knop met een grotere afmeting en een grotere schaduw. Bijvoorbeeld: wanneer de user een knop
aanraakt maken we de knop iets groter met een grotere schaduw zoals hieronder:
Figuur 1.64
Hier zien we dat de schaduw van een normale knop scherp en klein is. We zien ook
dat een actieve knop een grotere en zachtere schaduw krijgt. Dit geeft het idee van
meer diepte.
Eigenschappen van objecten en schaduwen
Hier volgen eigenschappen voor schaduwen van verschillende objecten:
1.13 Material design 101
Object Normaal Geactiveerd
App-bar 4dp
Knop 2dp 8dp
Floating action
button (FAB)
6dp 12dp
Card 2dp 8dp
Menu 8dp
Submenu 9dp
Dialoog 24dp
Nav Drawer 16dp
Een drawer is een navigatiepaneel met navigatie-opties. Deze beweegt als een la die
open en dicht gaat.
Hiërarchie van objecten
Een object mag onafhankelijk van andere objecten bewegen, maar is wel beperkt
tot de ruimte van het parent-object. We defi niëren hiërarchie als de positie van een
child-object binnen een parent-object. De volgende specifi caties gelden voor parent- en child-objecten:
• Alle objecten hebben een parent-object.
• Objecten mogen een of meer child-objecten hebben.
• Child-objecten erven transformaties zoals:
– positie
– schaal
– diepte
– rotatie
Alle child-objecten binnen hetzelfde parent-object krijgen hetzelfde niveau in de
hiërarchie, behalve drawers, action-bars en dialoog-boxes.
Interactie
Interactie gebeurt tussen zusterobjecten met hetzelfde niveau. Bijvoorbeeld, in een
verzameling van cards zijn de cards zusters en mogen ze met elkaar interacteren.
Beweging
Beweging in material design imiteert beweging in de fysieke wereld. Bij het observeren van een beweging zien we of een object zwaar, licht, groot, klein of fl exibel is.
In de fysieke wereld zien we dat krachten beweging beïnvloeden, zoals versnelling
en richting van een object. Deze veranderingen zijn soepel, niet abrupt, en hebben
tijd nodig voor een natuurlijke transformatie.
102 1 Basis HTML5 en CSS3
In de volgende opgave coderen we een bal die langzamer beweegt bij het naderen
van de randen van een kader.
• Materials opgave 3
Open een nieuw bestand en sla het op als materialopgave3.html. Voeg de volgende code eraan toe.
<!DOCTYPE html>
<html lang="nl">
 <head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
 <title>Materials</title>
 <style>
 #papier{
 height: 300px;
 backgroundColor: #EEEEEE;
 }
 #veld{
 z-index: 1;
 width: 300px;
 height: 250px;
 border: 1px #000 solid;
 }
 .centreren{
 display: flex;
 justify-content: center;
 align-items: center;
 }
 #bal{
 z-index: 2;
 margin-left: auto;
 margin-right: auto;
 backgroundColor: #03A9F4;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 border: 0px solid #ccc;
 box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
 }
 </style>
 </head>
 <body>
 <section id="papier" class="centreren">
 <div id="veld">
 <div id="bal"></div>
 </div>
 </section>
 </body>
</html>
Het resultaat zie je hieronder:
1.13 Material design 103
Figuur 1.65
Display fl ex
Door de flex-context op een element toe te passen kunnen we de child-elementen
ordenen en uitlijnen, bijvoorbeeld:
display: flex;
justify-content: center;
align-items: center;
In de volgende opgave voegen we een beweging van boven naar beneden aan de bal
toe.
• Materials opgave 4
Open materialopgave3.html en voeg de volgende keyframes binnen de <style>-
tags eraan toe:
@-webkit-keyframes play {
 from, to {
 top: 0;
 -webkit-animation-timing-function: ease-in;
 }
 50% {
 top: 200px;
 -webkit-animation-timing-function: ease-in;
 }
}
 @keyframes play {
 from, to {
 top: 0;
 animation-timing-function: ease-in;
 }
 50% {
 top: 200px;
 animation-timing-function: ease-in;
 }
}
104 1 Basis HTML5 en CSS3
 #bal {
 position: relative;
 -webkit-animation-name: play;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-duration: 4.2s;
 animation-name: play;
 animation-iteration-count: infinite;
 animation-duration: 4.2s;
 }
We zien in het resultaat een meer natuurlijke beweging waar de bal versnelt maar
vertraagt bij het naderen van de randen van het kader.
 1.14 Een material-design-sjabloon
In deze paragraaf coderen we een sjabloon voor een webapp om te oefenen met de
material-design-richtlijnen. We realiseren de volgende basisingrediënten van material design:
• hoofdmenu met drawer-element
• tabs voor drie cards
• cards met content
• betekenisvolle beweging
Het resultaat van de te maken webapp zie je hieronder:
Figuur 1.66
1.14 Een material-design-sjabloon 105
Hoofdmenu
Het hoofdmenu coderen we als een drawer (la) die verschijnt van boven naar beneden wanneer we op het menu-icon klikken.
Het resultaat moet eruitzien zoals de volgende fi guur:
Figuur 1.67
De omvorming of verandering van de menuknop tot sluitknop met een X heeft een
duidelijk betekenis van openen en sluiten van het drawer-element.
Met het klikken op een tabknop verschijnt een card met eigen content. De kleur
van de tab komt terug in de card die bij de tab hoort.
106 1 Basis HTML5 en CSS3
Figuur 1.68
Planning Inleveren
 Webbouw 56 t/m 62
Het header-element
We beginnen met het coderen van het header-element. In de volgende opgave coderen we het header-element met het menu.
• Webbouw 56
Open een nieuw bestand en sla het op als materials.html. Voeg de volgende code
eraan toe:
<!DOCTYPE html>
<html>
<head>
 <title>Material design</title>
 <link rel="stylesheet" href="materials.css" />
</head>
<body>
 <div class="header">
 <input type="checkbox" id="menu" class="menu" />
 <label class="menu-cirkel" for="menu" >
 <span class="menu-streep"></span>
 </label>
 <nav class="drawer" >
1.14 Een material-design-sjabloon 107
 <ul>
 <li>Card 1</li>
 <li>Card 2</li>
 <li>Card 3</li>
 </ul>
 </nav>
 </div>
</body>
</html>
Hier hebben we het header-element gecodeerd met het menu-icon als een checkbox. De checkbox is een element met een status van checked of niet checked. Met
deze checkbox kunnen we de status van ons menu (open of gesloten) representeren. We gebruiken het menu-icon om de drawer of la te openen en te sluiten.
In het label-element creëren we een cirkel en in het span-element creëren we een
streep binnen de cirkel.
In het drawer-element plaatsen we de navigatie-elementen van het menu. Dit doen
we met de volgende stijlen.
• Webbouw 57
Open een nieuw bestand en sla het op als materials.css. Voeg de volgende code
eraan toe:
body {
 font-family: 'Roboto 2', 'Helvetica Neue';
 margin: 0;
 background: #dad4d4;
 text-align: center;
}
.header {
 position: absolute;
 top: 0;
 right: 0;
 left: 0;
 height: 100px;
 background: #70c26f;
 box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
}
li {
 background: #70c26f;
 list-style-type: none;
}
.menu {
 left: -9999px;
 position: absolute;
 top: -9999px;
}
.menu-cirkel {
 display: none;
 cursor: pointer;
108 1 Basis HTML5 en CSS3
 display: block;
 position: fixed;
 top: 15px;
 z-index: 99;
 width: 70px;
 height: 70px;
 transition: all 400ms ease-in-out;
 border: 2px solid #d34237;
 border-radius: 50%;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 -o-user-select: none;
 user-select: none;
 -webkit-tap-highlight-color: transparent;
}
.menu-cirkel:hover {
 border-color: #416ef8;
}
Het resultaat zie je hieronder:
Figuur 1.69
Vervolgens coderen we de streepjes binnen het menu-icon met de volgende stijlen.
• Webbouw 58
Open materials.css. Voeg de volgende code eraan toe:
/* insert strepen voor en na menu-streep */
.menu-cirkel .menu-streep,
.menu-cirkel .menu-streep:before,
.menu-cirkel .menu-streep:after {
 position: absolute;
 top: 50%;
 left: 50%;
 height: 4px;
 width: 35px;
 cursor: pointer;
 background: #d34237;
 display: block;
 content: '';
 transition: all 500ms ease-in-out;
}
.menu-cirkel:hover .menu-streep,
.menu-cirkel:hover .menu-streep:before,
.menu-cirkel:hover .menu-streep:after {
 backgroundColor: #416ef8;
}
1.14 Een material-design-sjabloon 109
/* menu-strepen positioneren */
.menu-cirkel .menu-streep {
 transform: translate3d(-50%, -4px, 0);
 -webkit-transform: translate3d(-50%, -4px, 0);
}
.menu-cirkel .menu-streep:before {
 transform: translate3d(-50%, -14px, 0);
 -webkit-transform: translate3d(-50%, -14px, 0);
}
.menu-cirkel .menu-streep:after {
 transform: translate3d(-50%, 10px, 0);
 -webkit-transform: translate3d(-50%, 10px, 0);
}
Translate3d
De strepen binnen de menu-cirkel bevinden zich op een andere laag dan de cirkel
zelf, zodat ze kunnen bewegen. Dit kan met translate3d. Het resultaat zie je hieronder:
Figuur 1.70
In de volgende opgave defi niëren we het drawer-element en centreren we het
menu-element.
• Webbouw 59
Open materials.css. Voeg de volgende code eraan toe:
/* drawer definiëren */
.drawer {
 position: fixed;
 top: 100px;
 left: 0;
 margin-left: auto;
 margin-right: auto;
 z-index: 1;
 height: 10%;
 visibility: hidden;
 transition-property: all;
 transition-duration: 500ms;
 transition-timing-function: ease-out;
 width: 100%;
 box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.5);
}
110 1 Basis HTML5 en CSS3
/* menu centreren */
.menu-cirkel {
 left: 50%;
 -webkit-transform: translate3d(-50%, 0, 0);
 transform: translate3d(-50%, 0, 0);
}
Het resultaat zie je hieronder:
Figuur 1.71
In de volgende opgave coderen we het klik-eff ect op de menu-cirkel als volgt: de
middenstreep verdwijnt, de boven- en onderstreep krijgen een roterende beweging
en vormen een X. Het element verandert van menu- tot sluitenknop.
• Webbouw 60
Open materials.css. Voeg de volgende code eraan toe:
/* on klick */
.menu:checked .menu-cirkel {
 border-color: #d34237;
}
.menu:checked ~ .menu-cirkel .menu-streep {
 backgroundColor: transparent;
}
.menu:checked ~ .menu-cirkel .menu-streep:before {
 transform: translateX(-50%) rotate(45deg);
 -webkit-transform: translateX(-50%) rotate(45deg);
}
.menu:checked ~ .menu-cirkel .menu-streep:after {
 transform: translateX(-50%) translateY(-10px)
 rotate(-45deg);
 -webkit-transform: translateX(-50%) translateY(-10px) rotate(-45deg);
 top: 10px;
}
Het ~-teken
Met het ~-teken selecteren we alle zuster-elementen van het eerste geselecteerde
zuster-element, bijvoorbeeld:
div ~ p {}
selecteert alle p-zuster-elementen binnen het div-element na het eerste p-element.
In ons geval maken we de middenstreep transparant en de boven- en onderstreep
krijgen een rotatie en vormen een X. Het resultaat zie je hieronder:
1.14 Een material-design-sjabloon 111
Figuur 1.72
In de volgende opgave coderen we de slide-down-animatie van het drawer-element.
• Webbouw 61
Open materials.css. Voeg de volgende code eraan toe:
/* drawer slide down animatie */
.drawer {
 z-index: 3;
 transition-duration: 500ms;
 background: #70c26f;
}
.drawer {
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
}
.menu:checked ~ .drawer {
 visibility: visible;
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
Wanneer er op het menu wordt geklikt, menu:checked, verschijnt het drawer-element van boven naar beneden.
Hier volgen de stijlen van de li-elementen van het menu.
• Webbouw 62
Open materials.css. Voeg de volgende code eraan toe:
div{
 margin: 0;
 padding: 0;
}
ul{
 padding: 0;
 margin: 0;
 width: 100%;
}
li {
 background: #70c26f;
 list-style-type: none;
}
112 1 Basis HTML5 en CSS3
li: hover{
 background: #0afa76;
 opacity: 0.4; filter: alpha(opacity=4);
}
Het resultaat zie je hieronder.
Figuur 1.73
Planning Inleveren
 Webbouw 63 t/m 68
Tabs
De tweede navigatie binnen de pagina coderen we met tabs voor drie verschillende
cards.
In de volgende opgave coderen we de HTML-tab-elementen binnen de webpagina
als volgt.
• Webbouw 63
Open materials.html. Voeg de volgende code eraan toe:
<div class="tabs">
<div class="tab" id="tab1" onclick=
 "document.getElementById('card1').style.display='block';
 document.getElementById('card2').style.display='none';
 document.getElementById('card3').style.display='none';">
Tab 1
</div>
<div class="tab" id="tab2" onclick=
 "document.getElementById('card1').style.display='none';
 document.getElementById('card2').style.display='block';
 document.getElementById('card3').style.display='none';">
Tab 2
</div>
<div class="tab" id="tab3" onclick=
 "document.getElementById('card1').style.display='none';
 document.getElementById('card2').style.display='none';
 document.getElementById('card3').style.display='block';">
Tab 3
</div>
</div>
1.14 Een material-design-sjabloon 113
Het resultaat zie je nog niet, want het header-element is naar voren en de tabs naar
achteren op de z-as weergegeven. Hier volgen de stijlen van de tab-elementen.
• Webbouw 64
Open materials.css. Voeg de volgende code eraan toe:
/* tabs */
.tabs {
 position: absolute;
 top: 150px;
 right: 0;
 left: 0;
 text-align: center;
}
.tab {
 display: inline-block;
 position: relative;
 border-radius: 4px;
 margin: 10px;
 overflow: hidden;
 text-align: center;
 width: 20%;
 height: 50px;
 line-height: 48px;
 box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
}
.tab:hover{
 box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
}
#tab1{
 backgroundColor: #F4DB33;
}
#tab2{
 backgroundColor: #972FF8;
}
#tab3{
 backgroundColor: #DC3C84;
}
Het resultaat zie je hieronder:
Figuur 1.74
114 1 Basis HTML5 en CSS3
Deze tabs zorgen ervoor dat een klik-event de geassocieerde card zichtbaar maakt
en de andere onzichtbaar.
Codering van de cards
In de volgende opgave coderen we de cards als volgt.
• Webbouw 65
Open materials.html. Voeg de volgende code eraan toe:
<div class="cards" id="card1" style="display: none;">
 <div class="content-left">
 Card 1
 <div class="x-icon" onclick=
 "document.getElementById('card1').style.display='none';">
 x</div>
 </div>
 <div class="content-right"> Content 1 </div>
</div>
<div class="cards" id="card2" style="display: none;">
 <div class="content-left">
 Card 2
 <div class="x-icon" onclick=
 "document.getElementById('card2').style.display='none';">
 x</div>
 </div>
 <div class="content-right"> Content 2 </div>
</div>
<div class="cards" id="card3" style="display: none;">
 <div class="content-left">
 Card 3
 <div class="x-icon" onclick=
 "document.getElementById('card3').style.display='none';">
 x</div>
 </div>
 <div class="content-right"> Content 3 </div>
</div>
Deze cards zijn nog steeds onzichtbaar:
style="display: none;"
Het klikken op een tab maakt de cards zichtbaar. Hier volgen de stijlen van de
cards.
1.14 Een material-design-sjabloon 115
• Webbouw 66
Open materials.css. Voeg de volgende code eraan toe:
/* cards */
.cards {
 position: relative;
 top: 150px;
 left: 60px;
 height: 300px;
 width: 80%;
 border-radius: 4px;
 text-align: start;
 overflow: hidden;
 background: #fff;
 box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
}
.content-left {
 float: left;
 width: 22%;
 height: 300px;
 padding: 15px;
 text-align: center;
}
.content-right {
 padding-top: 15px;
 padding-left: 15px;
 float: right;
 width: 60%;
 height: 300px;
}
.x-icon {
 border-radius: 50%;
 width: 60px;
 height: 60px;
 margin: 10px;
 font-size: 2.5em;
 backgroundColor: #70c26f;
 box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
}
.x-icon:hover{
 box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
}
#card1 .content-left{
 backgroundColor: #F4DB33;
}
#card2 .content-left{
 backgroundColor: #972FF8;
}
#card3 .content-left{
 backgroundColor: #DC3C84;
}
Het resultaat zie je hieronder:
116 1 Basis HTML5 en CSS3
Figuur 1.75
Als laatste passen we een in-zoom-animatie toe op de cards. Dat doen we in de
volgende opgave.
• Webbouw 67
Open materials.css. Voeg de volgende code eraan toe:
@keyframes zoomIn {
 0% {
 opacity: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 transform: scale3d(.3, .3, .3);
 }
 50% {
 opacity: 0.5;
 }
}
.cards{
 -webkit-animation-name: zoomIn;
 -webkit-animation-duration: 0.6s;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-timing-function: linear;
 -moz-animation-name: zoomIn;
 -moz-animation-duration: 0.6s;
 -moz-animation-iteration-count: 1;
 -moz-animation-timing-function: linear;
 animation-name: zoomIn;
 animation-duration: 0.6s;
 animation-iteration-count: 1;
 animation-timing-function: linear;
}
1.15 Material-design-project 117
Deze in-zoom-animatie zorgt ervoor dat de card zichtbaar wordt als volgt:
– op 0 is de opacity: 0;
– op 50 is de opacity: 0.5;
– op 100 is de opacity: 1.0.
Het in-zoom-eff ect gaat van een derde tot vol als volgt:
transform: scale3d(.3, .3, .3);
Figuur 1.76
 1.15 Material-design-project
XtreemTravel is een nieuw reisbureau dat opgericht is met het idee om avontuurlijke vakantiepakketten aan klanten en bedrijven aan te bieden. Denk bijvoorbeeld
aan windsurfen, mountain climbing en snorkelen. XtreemTravel wil een website
krijgen die opgebouwd is in de stijl van material design, met een moderne look en
feel.
De website XtreemTravel
Het doel van de website XtreemTravel is om klanten online te kunnen informeren
over de verschillende reispakketten. XtreemTravel heeft de content van de site als
volgt geschetst:
Een welkomstpagina met een links naar reispakketten:
– Windsurfi ng-pagina
– Mountainclimbing-pagina
– Snorkelenpagina
– Last-minutes-pagina
– About-us-pagina
– Een contactpagina waar users vragen kunnen stellen.
118 1 Basis HTML5 en CSS3
De welkomstpagina
De welkomstpagina krijgt de volgende content:
Welkom bij XtreemTravel, de online booking website voor de extreemste vakanties. Book je vakantie nu voor de voordeligste bestemmingen. Ons specialisme:
de actiefste vakanties voor windsurfers, snorkelaars en mountainclimbers op alle
continenten.
Daarna krijgt de homepage drie tabs met reispakketten.
Tab 1: Windsurfi ng
Afbeelding 1
Windsurfi ng in Cancún México
Deze maand is het aantrekkelijkst voor windsurfi ng in Cancún, México.
Lees verder ... (link naar de windsurfi ng-pagina).
Tab 2: Mountainclimbing
Afbeelding 2
Himalayas
Deze week vertrekt een groep enthousiaste klimmers naar de Himalayas.
Lees verder ... (link naar de mountainclimbing-pagina).
Tab 3: Snorkelen
Afbeelding 3
Costa Rica
Snorkelen in Costa Rica. Naast de natuurreservaten heeft Costa Rica ’s werelds
tweede grootste koraalrif.
Lees verder ... (link naar de snorkelenpagina).
De windsurfi ng-pagina
De windsurfi ng-pagina krijgt de volgende content:
Afbeelding 1
Windsurfi ng in Cancún México
Deze maand is het aantrekkelijkst voor windsurfi ng in Cancún, México. XtreemTravel heeft een fantastisch vakantiepakket voor u in de aanbieding. Tien dagen
inclusief alles. Geniet van het populairste hotel bij surfers: Hotel Vientos.
Totale prijs is € 599 p.p.
We vliegen met KLM. Vertrek is 15 mei om 08.00 uur vanaf Schiphol. De terugreis
is 25 mei om 13.00 uur. Aankomst 26 mei om 06.00 uur lokale tijd.
1.15 Material-design-project 119
De mountainclimbing-pagina
De mountainclimbing-pagina krijgt de volgende content:
Afbeelding 2
Mountainclimbing in de Himalayas
Volgende maand vertrekt een groep enthousiaste klimmers naar de Himalayas.
Doe mee met deze klimtocht naar 8000 meter hoogte onder begeleiding van experts. Na de tien dagen lange tocht geniet je van een driedaagse verblijf in het Everest Hotel en Spa Resort.
Totale prijs € 799 p.p.
We vliegen met KLM. Vertrek is aanstaande donderdag om 08.00 uur vanaf Schiphol. De terugreis is dinsdag 12 mei om 13.00 uur. Aankomst 12 mei om 16.00 uur
lokale tijd.
De snorkelenpagina
De snorkelenpagina krijgt de volgende content:
Afbeelding 3
Snorkelen in Costa Rica
Dit pakket is de beste combinatie: natuurreservaten en koraalrif. Speciale aanbieding voor backpackers. Begeleiding van experts. Na de drie dagen lange tocht door
het oerwoud geniet je van drie dagen snorkelen met verblijf in Hotel Ecosta.
Totale prijs € 499 p.p.
We vliegen met KLM. Vertrekdatum is elke donderdag om 08.00 uur vanaf Schiphol. De terugreis is elke donderdag om 13.00 uur. Aankomst de volgende dag om
16.00 uur lokale tijd.

121
 2 JavaScript
 2.1 Inleiding JavaScript
In dit hoofdstuk behandelen we de basiskennis van JavaScript en objectgeoriënteerd JavaScript.
Een interactieve website is veel meer dan webpagina’s met afbeeldingen. Een interactieve website kan vragen aan de gebruiker stellen en reacties krijgen. Om een site
interactief te maken gebruik je JavaScript.
In deze paragraaf maken we kennis met de volgende JavaScript-concepten en methodes:
• alert
• JavaScript-console
• write
• confi rm
• prompt
• variabelen
• operatoren
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
Opgaven 1 t/m 9
Lab 01
Wat is JavaScript?
JavaScript is in 1995 ontwikkeld door Brendan Eich van Netscape Communications
Corporation, speciaal voor het gebruik in Netscape Navigator. De oorspronkelijke
naam was Mocha en later LiveScript. De naam JavaScript komt uit de tijd dat in
de Netscape-browser ook ondersteuning voor Java-applets werd ingebouwd. Door
het gebruik van JavaScript werd het mogelijk om webpagina’s interactief te maken.
Dynamic HTML was hier een logisch vervolg op.
JScript is de Microsoft-implementatie van JavaScript. JavaScript is een scripttaal.
Een script is een stukje code op een HTML-pagina. Met JavaScript voeg je functionaliteit aan je webpagina’s toe. Er bestaat client-side en server-side JavaScript.
122 2 JavaScript
• Client-side JavaScript wordt direct uitgevoerd via de browser van de bezoeker
(client).
• Server-side JavaScript wordt uitgevoerd via een server, waarna het resultaat wordt
teruggestuurd naar de browser van de bezoeker.
De browser herkent een JavaScript aan de volgende <script>-tags. De syntaxis is als
volgt:
<script> ...... </script>
Op de puntjes plaatsen we JavaScript-code. Alle JavaScript-code tussen de
<script>-tags vormt de body van je script. In de volgende opgave coderen we ons
eerste JavaScript.
Figuur 2.1 Client-side en server-side JavaScript
• Opgave 1
Codeer het volgende script met je favoriete HTML-editor en sla het op als interactieve.html.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
<title>Interactive HTML</title>
</head>
<body>
 <h3>Interactieve HTML</h3>
 <p>Opgave 1: alertbox</p>
 <script>
 alert("Welcome to my world!!!");
 </script>
</body>
</html>
• Het woord alert is een standaard-JavaScript-methode die een alertbox op het
scherm weergeeft.
• Alle opdrachten binnen de <script>-tags moeten eindigen met een puntkomma (;).
• JavaScript kan zowel aan de <head>- als in de <body>-secties worden toegevoegd.
2.1 Inleiding JavaScript 123
Figuur 2.2 Het resultaat van opgave 1
JavaScript-console
Het komt vaak voor dat we tijdens het coderen van onze scripts type- of syntaxisfouten maken, waardoor we een leeg scherm te zien krijgen. Dit gebeurt doordat
ons script niet goed werkt. Wat we dan moeten doen is teruggaan naar de code van
het script om de fouten te verbeteren. Dit noemen we debugging.
Ga terug naar de code van je script interactieve.html en maak een typefout: wijzig
alert in lert en sla het script weer op.
<script>
 lert("Welcome to my world!!!");
</script>
Alle browsers hebben hulpmiddelen om ons te helpen deze fouten te herstellen. In
de volgende fi guur zien we de JavaScript-console van de browser Chrome. Om dit
scherm te krijgen klik je op Instellingen, daarna op Extra en dan kies je JavaScriptconsole. Voor de Mac-computer kun je Cmd+Shift+C gebruiken. Voor Windows:
Ctrl+Shift+C. Onderaan de JavaScript-console zien we de volgende foutmelding:
Uncaught ReferenceError: lert is not defined
Interactieve.html: 10
De foutconsole heeft onze typefout gedetecteerd in regel 10. Dit wordt vermeld aan
de rechterkant.
Het resultaat is een leeg scherm, zoals te zien is in de volgende fi guur. Onderaan
zien we in de JavaScript-console de foutmelding staan. lert is ongedefi nieerd, het is
geen ingebouwde methode van JavaScript.
Figuur 2.3 Leeg scherm met onderaan de foutconsole
124 2 JavaScript
We kunnen ook gebruikmaken van de console om fouten of resultaten weer te geven. Dat gaat als volgt:
console.log("Welcome to my world!!!");
• Opgave 2
Open interactieve.html. Verbeter de syntaxisfout en codeer een alertbox met de
volgende tekst:
"Opgave 2: Welkom bij mijn eerste JavaScript."
Taalcomponenten
De JavaScript-syntaxis is hetzelfde als de syntaxis van andere programmeertalen,
zoals C en Java. De volgende tabel is een samenvatting van de JavaScript-syntaxis.
Taalcomponenten JavaScript-syntaxis
Open- en close-tags <script> . . . </script>
Blok { . . . }
Commentaar // mijn commentaar
/* mijn commentaar */
Declaratie variabele var variabelenaam
Strings Een string geef je aan tussen aanhalingstekens
Bijvoorbeeld: "Titel JavaScript is nieuw"
Escape-teken \ Aanhalingsteken binnen een string geef je aan met \"
Bijvoorbeeld: "Titel \"JavaScript\" is nieuw"
Ingebouwde methodes
Alle programmeertalen hebben een ingebouwde library (bibliotheek) met methodes die de meest voorkomende taken uitvoeren en de werklast van de programmeur verlichten. Zoals de methode alert() heeft JavaScript nog meer methodes. In
de volgende paragrafen komen een aantal van deze methodes ter sprake.
document.write()
Deze methode gebruiken we om teksten en HTML-elementen vanuit JavaScript op
het beeldscherm te tonen. De write-opdracht heeft de volgende syntaxis:
document.write("jouw tekst");
• Opgave 3
Open interactieve.html en voeg de volgende code toe tussen je <script>-tags.
document.write("<p>Opgave 3: Dit is een paragraaf</p>");
2.1 Inleiding JavaScript 125
confi rm( )
Bij een interactieve webpagina hoort feedback van de gebruiker. Een manier om
feedback te vragen is met de methode confirm(). Deze methode genereert een confi rmbox waarmee je de user kunt vragen om informatie te verifi ëren. De confirmmethode heeft de volgende syntaxis:
confirm("jouw vraag?");
• Opgave 4
Open interactieve.html en voeg de volgende regel eraan toe.
confirm("Opgave 4: Wilt u doorgaan?");
Figuur 2.4 Het resultaat van opgave 4
• Klik je op OK, dan is het resultaat van de confi rmbox true.
• Klik je op Cancel of Annuleren, dan is het resultaat van de confi rmbox false.
prompt()
Met de promptbox vraag je om input van de user. Als je bijvoorbeeld meer gegevens van de user nodig hebt om een bepaald proces uit te voeren, kun je de user
‘prompten’ met de vraag naar meer informatie. De prompt-methode heeft de volgende syntaxis:
prompt("jouw prompttekst", "default waarde");
• Opgave 5
Open interactieve.html en maak de volgende promptbox:
prompt("Opgave 5: Typ uw wachtwoord in", "******");
Figuur 2.5 Het resultaat van Opgave 5
• Klik je op OK, dan is het resultaat van de promptbox de inputtekst.
• Klik je op Annuleren, dan is het resultaat van de promptbox een nul (leeg).
126 2 JavaScript
• Opgave 6
Open interactive.html en codeer het volgende:
1 Codeer de volgende promptbox: Typ uw gebruikersnaam in
2 Codeer de volgende confi rmbox: Wilt u abonnee worden?
JavaScript-variabelen
Een JavaScript-variabele is een datacontainer met een naam en een waarde. De
naam van de variabele is het adres van de variabele in het computergeheugen. Op
dit adres kun je data tijdelijk bewaren. Een variabele kun je je voorstellen als een
laatje met een naam in het geheugen van de computer. Door middel van de naam
kun je de inhoud van dat laatje bekijken of wijzigen.
Een variabele kan de volgende datatypen en waarden hebben:
Datatype Voorbeeld
date 11/11/2014
string "Carl"
boolean true/false
integer 19
fl oat (decimaal) 3.56
Namen van variabelen
De naam van een variabele mag letters, getallen of underscores bevatten. De naam
van de variabele moet een beschrijving zijn van de content van de variabele, bijvoorbeeld:
stad = "Amsterdam";
LET OP
JavaScript is hoofdlettergevoelig: er is onderscheid tussen namen met en zonder
hoofdletters: Stad en stad zijn twee verschillende variabelen.
Hieronder declareren we een variabele met een string:
var student = "Carl Jung";
Hiermee declareer je de variabele student en sla je die op met de inhoud "Carl
Jung" Je zou je dit als volgt kunnen voorstellen:
student
"Carl Jung"
Hieronder declareren we een variabele met een booleaanse waarde:
var leerplichtig = true;
2.1 Inleiding JavaScript 127
Je zou je dit als volgt kunnen voorstellen:
leerplicht
true
Hieronder declareren we een variabele met als waarde een getal:
var leeftijd = 16;
Je zou je dit als volgt kunnen voorstellen:
leeftijd
16
De waarde van een variabele kun je wijzigen. Bijvoorbeeld:
leeftijd = leeftijd + 1;
Hiermee verander je de waarde van de variabele leeftijd in 17.
leeftijd
17
Hier is nog een voorbeeld:
som
3
som = som + som;
Wat is het resultaat NU in som?
Operatoren van variabelen
Hieronder zie je de belangrijkste rekenkundige operatoren:
Betekenis Voorbeeld Resultaat in prijs
+ optellen prijs = 10 + 5 15
- aftrekken prijs = prijs - 1 14
++ plus 1 prijs++ 15
-- min 1 prijs-- 14
+= optellen prijs += 10
kort voor:
prijs = prijs + 10
24
-= aftrekken prijs -= 10
kort voor:
prijs = prijs - 10
14
* vermenigvuldigen prijs = prijs * 2 28
/ delen prijs = prijs / 2 14
128 2 JavaScript
Bij het rekenen hanteren alle programeertalen dezelfde volgorde van operatoren
voor het uitrekenen. Bijvoorbeeld, eerst vermenigvuldigen of delen en daarna optellen of aftrekken.
• Opgave 7
Wat is het resultaat van:
2 + 3 * 4 = ______
2 + 6 / 3 = ______
7 - 4 / 2 = ______
We kunnen de volgorde bepallen met haakjes, waardoor de operaties binnen de
haakjes als eerste worden uitgevoerd.
Wat is het resultaat van:
(2 + 3) * 4 = ______
(2 + 6) / 4 = ______
7 - (4 / 3) = ______
In de volgende opgave gaan we rekenen oefenen met variabelen.
• Opgave 8
Codeer het volgende script en sla het op als variabelen.html.
<!DOCTYPE html>
<html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
 <title>Variabelen</title>
</head>
<body>
 <script>
 var voornaam = "Carl";
 var achternaam = "Petersen";
 var schoolgeld = 1000;
 var boekengeld = 100;
 var bedrag = schoolgeld + boekengeld;
 var studiefinanciering = 600;
 var totaal = bedrag - studiefinanciering;
 var volledigenaam = voornaam + "<br />" + achternaam;
 document.write(
 "<p>Opgave 8</p>" + volledigenaam +
 "<br>Totaal te betalen: " + totaal);
 </script>
</body>
</html>
Het resultaat moet er als volgt uitzien:
2.1 Inleiding JavaScript 129
Opgave ς
Carl
Petersen
Totaal te betalen: οκκ
Overload operatoren
In het vorige voorbeeld hebben we de operator + op twee manieren gebruikt.
Ten eerste hebben we het bedrag als volgt berekend:
var bedrag = schoolgeld + boekengeld;
Ten tweede hebben we met de + drie stukken tekst aan elkaar geplakt:
var volledigenaam = voornaam + "<br />" + achternaam;
We zeggen dat de operator + wordt overloaded. Dit betekent dat deze operator
opereert in twee contexten: hij kan gebruikt worden voor het optellen van twee
getallen én hij kan gebruikt worden voor het aan elkaar plakken van teksten. De
context bepaalt de gebruikswijze van de operator. Bijvoorbeeld:
Geval 1:
resultaat = schoolgeld + boekengeld;
// resultaat is het bedrag 500
Geval 2:
resultaat = voornaam + boekengeld;
// resultaat is de string "Carl 100"
Bij geval 1 heeft de + operator twee getallen opgeteld.
Bij geval 2 is de context rond de + operator veranderd naar een string voornaam en
een getal boekengeld. De operator + heeft een string en een getal aan elkaar geplakt.
• Opgave 9
Open variabelen.html en maak de volgende variabelen aan:
– de variabele achternaam met de waarde Bolt;
– de variabele voornaam met de waarde Zakaria;
– de variabele nederlands met de waarde 9;
– de variabele engels met de waarde 8;
– de variabele rekenen met de waarde 7;
– de variabele gemiddeld met het berekende gemiddelde cijfer.
Geef de variabelen weer.
Het resultaat moet er als volgt uitzien:
130 2 JavaScript
Opgave σ
Zakaria Bolt
Nederlands: σ
Engels: ς
Rekenen: ρ
Gemiddeld: ς
• Lab 01
Codeer het volgende script en sla het op als lab01.html.
<!DOCTYPE html>
<html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
 <title>Lab 01</title>
 <!--dit script werkt met variabelen
 auteur:
 datum:
 -->
</head>
<body>
 <h2>Lab 01</h2>
 <h3>Factuur</h3>
 <script>
 var klantnaam = prompt("voer je eigen naam in");
 var aantal =
 parseInt(prompt("aantal boeken te bestellen?"));
 var titel = "JavaScript";
 var prijs = 29.90;
 document.write(
 "<br>Bedankt voor je bestelling: " + klantnaam);
 document.write("<br>Boektitel is: " + titel);
 document.write("<br>Aantal te bestellen: " + aantal);
 document.write("<br>Prijs per boek is: " + prijs.toFixed(2));
 </script>
</body>
</html>
Het resultaat moet er ongeveer als volgt uitzien:
2.2 Datatypes 131
Lab κλ
Factuur
Bedankt voor je bestelling: Jan
Boekti tel is: JavaScript
Aantal te bestellen: λκ
Prijs per boek is: μσ.σκ
Voer nu de volgende stappen uit:
1 Maak een nieuwe variabele bedrag.
2 Reken het bedrag uit (bedrag is aantal boeken maal de prijs).
3 Maak een nieuwe variabele btw.
4 Reken de btw van het bedrag uit (btw is 6 van het bedrag).
5 Maak een nieuwe variabele totaal.
6 Reken het totaal te betalen bedrag uit (totaal is bedrag + btw).
Het resultaat moet er als volgt uitzien:
Lab κλ
Factuur
Bedankt voor je bestelling: Peter
Boekti tel is: JavaScript
Aantal te bestellen: μμ
Prijs per boek is: μσ.σκ
Bedrag is: πορ.ςκ
BTW is: νσ.ξρ
Totaal inclusief BTW is: πσρ.μρ
 2.2 Datatypes
In deze paragraaf maken we kennis met de volgende datatypes en methodes:
• string
• boolean
• number
• parseInt()
• parseFloat()
• toString()
• toFixed()
132 2 JavaScript
Planning Inleveren
Opgaven 10 t/m 20
Lab 02
Zoals elke programmeertaal heeft JavaScript verschillende datatypes: nummers,
teksten, boolean (true of false), null en undefi ned. Het is belangrijk om goed te
begrijpen waanneer en waarom je een bepaald datatype moet gebruiken.
Het datatype string
Strings zijn tekenreeksen. Een string geef je aan als een tekst tussen aanhalingstekens, bijvoorbeeld "tekst". De meeste informatie in databases en webapplicaties
bestaat uit tekst, bijvoorbeeld NAW-gegevens, productinformatie enzovoort.
• Opgave 10
Codeer het volgende script en sla het op als datatypes.html.
<!DOCTYPE html>
<html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
 <title>Datatypes</title>
</head>
<body>
 <script>
 var naam = "Carl";
 var adres = "Kruislaan 111";
 document.write(
 "<br />Opgave 10: Datatype van naam is: "+
 typeof naam);
 </script>
</body>
</html>
De methode typeof
In bovenstaand voorbeeld hebben we de twee stringvariabelen naam en adres aangemaakt. Daarna hebben we met behulp van de opdracht typeof gevraagd om het
datatype van de variabele naam.
Het resultaat moet er als volgt uitzien.
Opgave λκ: Datatype van naam is: string
2.2 Datatypes 133
Het datatype: boolean
Het datatype boolean kan maar twee waarden krijgen: true of false (waar of onwaar). Op basis van de waarde van een boolean-variabele kunnen we straks interessante controles programmeren.
• Opgave 11
Open datatypes.html en voeg de volgende code eraan toe.
 var leerplichtig = true;
 var volwassen = false;
 document.write(
 "<br />Opgave 11: Datatype van leerplichtig is: " +
 typeof leerplichtig);
Het resultaat is:
Opgave λλ: Datatype van leerplichti g is: boolean
Het datatype: number (integer)
Een integer is een getal zonder decimale punt; het getal 6 is bijvoorbeeld een integer. Een getal met het datatype number (integer) kan positief of negatief zijn.
• Opgave 12
Open datatypes.html en voeg de volgende code eraan toe.
 var temperatuur = -10;
 document.write(
 "<br />Opgave 12: Datatype van temperatuur is: " +
 typeof temperatuur);
Het resultaat is:
Opgave λμ: Datatype van temperatuur is: number
Het datatype: number (fl oating-point)
JavaScript behandelt alle getallen als een getal met een ‘fl oatingpoint’ (drijvende
komma). Een fl oating-point-getal is dus een getal met een decimale komma; in JavaScript wordt de decimale komma weergegeven met een punt, zoals in het Engels
gebruikelijk is. Bijvoorbeeld 19 van 100 codeer je als volgt.
134 2 JavaScript
• Opgave 13
Open datatypes.html en voeg de volgende code eraan toe.
 var btw = 0.19 * 100;
 document.write(
 "<br />Opgave 13: Waarde van btw is: " + btw);
Het resultaat 19 is van het datatype fl oating-point; de decimale
punt is naar een andere positie verschoven (‘gedreven’).
Opgave λν: Waarde van btw is: λσ
parseInt()
Met de functie parseInt() maak je conversies van tekst-datatypes
naar integer-datatypes.
• Opgave 14
Open datatypes.html en voeg de volgende code eraan toe.
 var string = "33445";
 var resultaat = parseInt(string);
 document.write(
 "<br />Opgave 14: parseInt(string) Resultaat is: " +
 typeof resultaat);
Het resultaat is:
Opgave λξ: parseInt(string) Resultaat is: number
parseFloat()
Met de methode parseFloat() maak je conversies van tekst naar
fl oat datatypes.
• Opgave 15
Open datatypes.html en voeg de volgende code eraan toe.
 var string = "3.3445";
 var resultaat = parseFloat(string);
 document.write(
 "<br />Opgave 15: parseFloat(string) Resultaat is:" +
 typeof resultaat);
Het resultaat is:
2.2 Datatypes 135
Opgave λο: parseFloat(string) Resultaat is: number
parseInt()
Met de methode parseInt() maak je conversies van fl oat-datatypes
naar integer-datatypes.
• Opgave 16
Open datatypes.html en voeg de volgende code eraan toe.
 var float = 3.3445;
 var resultaat = parseInt(float);
 document.write(
 "<br />Opgave 16: parseInt(float) Resultaat is: " +
 typeof resultaat);
Het resultaat is:
Opgave λπ: parseInt(fl oat) Resultaat is: number
toString()
Met de methode toString() maak je conversies van fl oat of integer naar tekst.
• Opgave 17
Open datatypes.html en voeg de volgende code eraan toe.
 var float = 3.3445;
 var resultaat = float.toString();
 document.write(
 "<br />Opgave 17: float.toString() Resultaat is: " +
 typeof resultaat);
Het resultaat is:
Opgaveλρ: fl oat.toString() Resultaat is: string
Formatteren met toFixed(n)
Met de methode toFixed(n) formatteer je van fl oat naar n decimale posities.
136 2 JavaScript
• Opgave 18
Open datatypes.html en voeg de volgende code eraan toe.
 var float = 3.3445;
 var resultaat = float.toFixed(2);
 document.write(
 "<br />Opgave 18: float.toFixed(2) Resultaat is: " +
 typeof resultaat);
Het resultaat is:
Opgave λς: fl oat.toFixed(μ) Resultaat is: string
Het datatype: undefi ned
Als we een variabele willen gebruiken, moeten we deze variabele eerst defi niëren.
Een ongedefi nieerde variabele krijgt het datatype undefined.
• Opgave 19
Open datatypes.html en voeg het volgende eraan toe.
 var twee; // variabele twee ongedefinieerd.
 document.write(
 "<br />Opgave 19: Datatype var twee is: " +
 typeof twee);
Om niet alles te herhalen geven we steeds alleen het resultaat van de laatste opgave. Het resultaat is:
Opgave λσ: Datatype var twee is: undefi ned
Het datatype: NaN
Het datatype NaN betekent ‘Not a Number’. In de volgende opgave (de som van 10 +
Null) krijgt de variabele c het datatype NaN:
• Opgave 20
Open datatypes.html en voeg de volgende code eraan toe.
 var een = 1;
 var drie = een * twee; // var twee nog niet aangemaakt.
 document.write(
 "<br />Opgave 20: De waarde van drie is: " + drie);
Het resultaat is:
2.3 Het Array-object 137
Opgave μκ: De waarde van drie is: NaN
• Lab 02
Codeer het volgende script en sla het op als lab02.html.
In deze lab-opdracht maak je gebruik van de volgende conversie:
1 foot = 0.3048 meter
1 meter = 3.28084 feet
Stap 1: Prompt de user voor zijn lengte in meters.
Stap 2: Converteer de lengte naar feet.
Stap 3: Geef het resultaat weer.
Het resultaat zie je hieronder:
 2.3 Het Array-object
In deze paragraaf maken we kennis met de volgende array-methodes:
• arrays
• shift
• unshift
• pop
• push
• splice
• sort
• reverse
• indexOf
• typeof
• splice
• join
Planning Inleveren
Opgaven 21 t/m 41
Lab 03
138 2 JavaScript
Naast variabelen heb je ook datastructuren nodig waar je informatie tijdelijk in
kunt bewaren. Een van de eenvoudigste datastructuren is het Array-object (in
Java script beginnen objectnamen met een hoofdletter). Een array is een serie van
dezelfde soort of van verschillende data-elementen. Ieder element heeft een positie
in de array. De positie van een element in de array geef je aan met een index. Een
array kun je je voorstellen als een ladekastje met een naam in het geheugen van de
computer.
Elk laatje heeft een eigen volgnummer. Door middel van de naam en het volgnummer (index) kun je de inhoud van een laatje bekijken of wijzigen.
Een Array-object declareren
De syntaxis voor het declareren van een nieuwe array is:
var arraynaam = new Array();
De arraynaam bepalen we zelf. Met het keyword new maken we een
nieuw object dat gebaseerd is op het JavaScript Array-object. Het Array-object is
een sjabloon of model van een array. Vanuit dit sjabloon kunnen we onze eigen arrays aanmaken. De namen van de ingebouwde objecten beginnen met een hoofdletter. new Array() is juist maar new array() is syntactisch fout.
• Opgave 21
Zorg ervoor dat arrays.html er als volgt uitkomt te zien:
<!DOCTYPE html>
<html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
 <title>Arrays</title>
</head>
<body>
<script>
 var weekdag = new Array();
 document.write("<br />Opgave 21: Array aangemaakt");
</script>
</body>
</html>
Array-elementen declareren
Een array mag een of meer elementen hebben. Een element declareer je met de volgende syntaxis:
weekdag[0] = "zondag";
Je zou je deze array in het computergeheugen als volgt kunnen voorstellen:
2.3 Het Array-object 139
weekdag
[0]
"zondag"
Een array wordt intern in het computergeheugen aangemaakt, maar niet op het
beeldscherm. Als je de content van een array wilt zien, moet je de opdracht document.write gebruiken.
• Opgave 22
Open arrays.html en voeg de volgende code eraan toe binnen de <script>-tags:
weekdag[0] = "Maandag";
weekdag[1] = "Dinsdag";
weekdag[2] = "Woensdag";
weekdag[3] = "Donderdag";
weekdag[4] = "Vrijdag";
document.write("<br />Opgave 22: Elementen aangemaakt");
Je kunt je de array weekdag in het computergeheugen als volgt voorstellen:
weekdag
[0] [1] [2] [3] [4]
"Maandag" "Dinsdag" "Woensdag" "Donderdag" "Vrijdag"
Je verwijst naar een element door de array-naam en de index te gebruiken, bijvoorbeeld:
resultaat = weekdag[0]; // resultaat is "Maandag"
De indexnummers van een array beginnen altijd met 0.
Er is nog een manier om een array te declareren. Bovenstaande array zou je ook als
volgt kunnen aanmaken:
var weekdag = new Array
('Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag');
• Opgave 23
Open arrays.html en voeg de volgende code eraan toe:
document.write(
'<br />Opgave 23: weekdag array: ' + weekdag);
document.write(
'<br />Eerste element in array is: ' + weekdag[0]);
Het resultaat moet er als volgt uitzien:
140 2 JavaScript
Opgave μλ: Array aangemaakt
Opgave μμ: Elementen aangemaakt
Opgave μν: weekdag array: Maandag,Dinsdag,Woensdag,Donderdag,Vrijdag
Eerste element in array is: Maandag
Multidimensionale arrays
Een array kunnen we als volgt declareren:
var team = new Array();
Aan deze array kunnen we elementen als volgt toevoegen:
team[0] = 'Arsenal';
team[1] = 'Marseille';
team[2] = 'FC Barcelona';
team[3] = 'Ajax';
Maar een array-element kan zelf ook weer een array zijn, bijvoorbeeld:
team[0] = new Array();
Om naar een element van het array team te kunnen verwijzen, hebben we dus nu
twee indexen nodig, bijvoorbeeld:
team[0][0] = 3;
Zo hebben we een multidimensionale array aangemaakt. Kijk in de volgende tabel
naar de doelpunten van drie teams die ieder drie wedstrijden spelen:
Wedstrijd 1 Wedstrijd 2 Wedstrijd 3
Team 1 1 23
Team 2 456
Team 3 789
Deze gegevens kun je in een array van 3 × 3 cellen representeren. Eerst declareer je
je array team als volgt:
var team = new Array();
Dan declareer je drie team-elementen. Elk team krijgt een nieuw array, bijvoorbeeld:
team[1] = new Array();
team[2] = new Array();
team[3] = new Array();
Dan voer je de gegevens voor team[1] in, bijvoorbeeld:
team[1][1] = 1;
team[1][2] = 2;
team[1][3] = 3;
2.3 Het Array-object 141
Het resultaat zou je je als volgt kunnen voorstellen:
[1] [2] [3]
team[1] 123
team[2] 456
team[3] 789
De eerste index [1] verwijst naar het team en de tweede index [1] verwijst naar de
wedstrijd. Dus bij team 1 wedstrijd 1 was het aantal doelpunten 1.
Als je de doelpunten van team 1 wilt zien, doe je dat als volgt:
document.write('Scores team 1: ' + team[1][1] + ' ' +
team[1][2] + ' ' + team[1][3]);
Of
document.write('Scores team 1: ' + team[1]);
LET OP
Ons doel is om <"tag">-namen met dubbele aanhalingstekens en JavaScript zoveel
mogelijk met enkele aanhalingstekens te coderen. Dit zorgt voor leesbare code
waneer je HTML en JavaScript in één script codeert.
Array-methodes
Arrays zijn objecten en we maken nu kennis met de array-methodes die ingebouwd
zijn in array-objecten. Deze methodes helpen ons om arrays te verwerken en om
allerlei bewerkingen op arrays uit te voeren.
• Opgave 24
Typ het volgende script over en sla het op als arraymethodes.html.
<!DOCTYPE html>
<html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
 <title>Array methodes</title>
</head>
<body>
 <script>
 var studenten = new Array(
 'Zakaria','Albert','Hamsa','Mike','Pieter');
 document.write('<br>Opgave 24: Studenten: ' + studenten);
 </script>
</body>
</html>
142 2 JavaScript
Het resultaat van deze opgave zie je hieronder.
Opgave μξ: Studenten: Zakaria,Albert,Hamsa,Mike,Pieter
Hier hebben we een array-object met vijf elementen aangemaakt ergens in het
computergeheugen. De naam van de array is studenten en verwijst naar het geheugenadres waar de array aangemaakt is.
Figuur 2.6
Array-pointers
Array-pointers zijn verwijzingen naar een array-object. Maar pointers zijn geen
objecten. In de volgende opgave creëren we de pointer team die naar de array studenten verwijst. Een pointer is een tweede naam voor een object.
• Opgave 25
Open arraymethodes.html en voeg de volgende pointer eraan toe.
 team = studenten;
 document.write('<br />Opgave 25: Team: '+team);
 </script>
</body>
</html>
Het resultaat van deze opgave zie je hieronder. De array studenten heeft de pointer
team gekregen.
Opgave μο: Team: Zakaria,Albert,Hamsa,Mike,Pieter
Figuur 2.7
Zoals te zien is in deze fi guur verwijst de pointer team naar het array-object studenten. Het is geen kopie van het object. Dit testen we in de volgende opgave.
2.3 Het Array-object 143
• Opgave 26
Open arraymethodes.html en voeg de volgende code eraan toe.
team[0] = 'Umut';
document.write(
'<br />Opgave 26: Element [0] is gewijzigd: '+ studenten);
Het resultaat van deze opgave zie je hieronder.
Opgave μπ: Element [κ] is gewijzigd: Umut,Albert,Hamsa,Mike,Pieter
Je ziet in de volgende fi guur dat we nog steeds bezig zijn met hetzelfde object. Met
de pointer team verwijzen we nog steeds naar het object studenten.
team[0] = 'Umut';
Figuur 2.8
array.shift()
Een object mag methodes hebben. Het array-object heeft een aantal handige methodes die ons helpen met het verwerken en manipuleren van arrays. In de volgende opgave gebruiken we de methode shift(). Met deze methode kunnen we het
eerste element van een array verwijderen.
• Opgave 27
Open arraymethodes.html en voeg de volgende code eraan toe.
studenten.shift();
document.write(
'<br />Opgave 27: Resultaat van shift: '+studenten);
Het resultaat zie je hieronder: ‘Umut’ is verwijderd.
Opgave μρ: Resultaat van shift : Albert,Hamsa,Mike,Pieter
Het resultaat van de methode shift() is dat de hele array een positie naar links
opschuift en het eerste element verdwijnt.
144 2 JavaScript
array.unshift()
In de volgende opgave gebruiken we de methode unshift(). Met deze methode
kunnen we een of meer nieuwe elementen aan het begin van een array toevoegen.
• Opgave 28
Open arraymethodes.html en voeg de volgende code eraan toe.
studenten.unshift('Jozef','Umut');
document.write(
'<br /> Opgave 28: Resultaat van unshift: '+studenten);
Het resultaat zie je hieronder: ‘Jozef’ en ‘Umut’ zijn toegevoegd.
Opgave μς: Resultaat van unshift : Jozef,Umut,Albert,Hamsa,Mike,Pieter
Je ziet in de volgende fi guur dat er twee nieuwe elementen aan het begin van de
array zijn toegevoegd.
Figuur 2.9
array.pop()
In de volgende opgave gebruiken we de methode pop(). Met deze methode kunnen
we het laatste element uit een array verwijderen.
• Opgave 29
Open arraymethodes.html en voeg de volgende code eraan toe.
studenten.pop();
document.write(
'<br /> Opgave 29: Resultaat van pop: ' + studenten);
Het resultaat zie je hieronder: ‘Pieter’, het laatste element in je array, is verwijderd.
Opgave μσ: Resultaat van pop: Jozef,Umut,Albert,Hamsa,Mike
array.push()
In de volgende opgave gebruiken we de methode push(). Met deze methode kunnen we een of meer nieuwe elementen aan het einde van een array toevoegen.
2.3 Het Array-object 145
• Opgave 30
Open arraymethodes.html en voeg de volgende code eraan toe.
studenten.push('Pieter','David');
document.write(
'<br />Opgave 30: Resultaat van push: ' + studenten);
Het resultaat zie je hieronder: ‘Pieter’ en ‘David’ zijn toegevoegd.
Opgave νκ: Resultaat van push: Jozef,Umut,Albert,Hamsa,Mike,Pieter,David
Je ziet in de volgende fi guur dat er twee nieuwe elementen aan het einde van de
array zijn toegevoegd.
Figuur 2.10
array.splice()
In de volgende opgave gebruiken we de methode splice(). Met deze methode kunnen we een array in tweeën splitsen. De syntaxis is:
arraynaam.splice(begin-element, aantal-elementen)
Als je bijvoorbeeld een nieuwe array wilt maken met de eerste drie elementen uit
de array team, dan doe je dat zo:
nieuwearray = team.splice(0,3)
• Opgave 31
Open arraymethodes.html en voeg de volgende code eraan toe.
klas = studenten.splice(2,4);
document.write(
'<br>Opgave 31: Resultaat<br>studenten: '+studenten+'<br>klas:'+klas);
Het resultaat zie je hieronder.
Opgave νλ: Resultaat
studenten: Jozef,Umut,David
klas: Albert,Hamsa,Mike,Pieter
146 2 JavaScript
Je ziet in de volgende fi guur dat de array studenten gesplitst is in twee arrays. Eerst
krijgt de array klas vier elementen, beginnend met element[2]. Dan krijg je in de
array studenten de overgebleven drie elementen.
Figuur 2.11
array.sort()
In de volgende opgave gebruiken we de methode sort(). Met deze methode kunnen we een array ordenen in alfabetische volgorde.
• Opgave 32
Open arraymethodes.html en voeg de volgende code eraan toe.
studenten.sort();
document.write(
'<br />Opgave 32: Resultaat van sort: ' + studenten);
Het resultaat zie je hieronder.
Opgave νμ: Resultaat van sort: David,Jozef,Umut
Je ziet dat de volgorde van de elementen is veranderd.
Figuur 2.12
array.reverse()
In de volgende opgave gebruiken we de methode reverse(). Met deze methode
kunnen we een array ordenen in de omgekeerde volgorde.
• Opgave 33
Open arraymethodes.html en voeg de volgende code eraan toe.
studenten.reverse();
document.write(
'<br />Opgave 33: Resultaat van reverse: ' + klas);
2.3 Het Array-object 147
Het resultaat zie je hieronder.
Opgave νν: Resultaat van reverse: Albert,Hamsa,Mike,Pieter
array.indexOf()
Met de methode indexOf() kunnen we kijken of er een bepaald element in een array bestaat. We zouden bijvoorbeeld kunnen vragen of een bepaalde student in de
array studenten bestaat. De syntaxis van de methode indexOf() is:
var index = arraynaam.indexOf('element')
Als het element bestaat, krijg je de juiste index van het element.
Als het element niet bestaat, krijg je (-1) als resultaat.
• Opgave 34
Open arraymethodes.html en voeg de volgende code eraan toe.
index = studenten.indexOf('Jozef');
document.write(
'<br />Opgave 34: Resultaat van indexOf: ' + index);
Het resultaat zie je hieronder.
Opgave νξ: Resultaat van indexOf Jozef: λ
Element verwijderen
Om een specifi ek array-element te verwijderen, gebruiken we de opdracht delete.
In de volgende opgave gebruiken we de opdracht delete om het derde element in
de array klas te verwijderen:
• Opgave 35
Open arraymethodes.html en voeg de volgende code eraan toe.
delete klas[2];
document.write(
'<br />Opgave 35: Resultaat van delete: '+klas);
Het resultaat zie je hieronder.
Opgave νο: Resultaat van delete: Albert,Hamsa,,Pieter
Je ziet dat de opdracht delete alleen maar de content 'Mike' van het derde element
heeft verwijderd, het derde element blijft staan, maar is leeg tussen 'Hamsa', ,'Pieter'
148 2 JavaScript
Figuur 2.13
Dat kunnen we overigens controleren met de opdracht typeof.
De opdracht typeof
Met de opdracht typeof kunnen we checken wat voor datatype een element of een
variabele is.
• Opgave 36
Open arraymethodes.html en voeg de volgende code eraan toe.
document.write(
'<br />Opgave 36: Datatype van gedelete element is: '+ typeof klas[2]);
Het resultaat zie je hieronder.
Opgave νπ: Datatype van gedelete element is: undefi ned
Hier zien we dat het datatype van het gedelete element ‘undefi ned’ is.
Elementen verwijderen met splice()
Om een specifi ek array-element volledig te verwijderen, gebruiken we de
methode splice(). De syntaxis van de methode splice() is:
arraynaam.splice(element-index, 1)
element-index is de index van het te verwijderen element, 1 is het aantal te verwijderen elementen.
• Opgave 37
Open arraymethodes.html en voeg de volgende code eraan toe.
klas.splice(2,1);
document.write(
'<br />Opgave 37: Element volledig verwijderd: ' + klas);
Het resultaat zie je hieronder.
Opgave νρ: Element volledig verwijderd: Albert,Hamsa,Pieter
Zoals te zien is in de volgende fi guur is het derde element volledig verwijderd.
2.3 Het Array-object 149
Figuur 2.14
In de volgende opgave gebruiken we de methodes splice() en indexOf() om een
specifi eke student te verwijderen.
• Opgave 38
Open arraymethodes.html en voeg de volgende code eraan toe.
index = studenten.indexOf('Jozef');
studenten.splice(index,1);
document.write(
'<br>Opgave 38: Specifieke student verwijderd: '+ studenten);
Hier zie je het resultaat: ‘Jozef’ is verwijderd.
Opgave νς: Specifi eke student verwijderd: Umut,David
Array kopiëren met slice()
Soms wil je een exacte kopie van een array maken. Dat kan met behulp van de methode slice() zonder indexen.
• Opgave 39
Open arraymethodes.html en voeg de volgende code eraan toe.
klas2 = klas.slice();
document.write(
'<br />Opgave 39: Resultaat van kopiëren: ' + klas2);
Als je de methode slice() zonder begin-index gebruikt, wordt de eerste index
gebruikt. Als je de methode gebruikt zonder eind-index wordt de laatste index gebruikt.
Het resultaat zie je hieronder:
Opgave νσ: Resultaat van kopiëren: Albert,Hamsa,Pieter
Array transporteren
Soms wil je een array naar de server transporteren. Om dit te realiseren converteren we de array naar een string. Daarna kunnen we de string in de vorm van een
cookie naar de server transporteren. We behandelen cookies aan het einde van dit
hoofdstuk in paragraaf 2.18.
150 2 JavaScript
Array.join
De methode array.join(delimiter) converteert een array naar een string. In de
string wordt ieder element met de aangegeven delimiter of het scheidingsteken
gescheiden.
In de volgende opgave maken we gebruik van de methode array.join(delimiter)
om de array klas naar een string te converteren.
• Opgave 40
Open arraymethodes.html en voeg de volgende code eraan toe.
var myString = klas.join('|');
document.write(
'<br />Opgave 40: Resultaat van join: ' + myString);
Het resultaat is de volgende string met | tussen ieder element in:
Opgave ξκ: Resultaat van join: Albert|Hamsa|Pieter
String.split
De methode string.split(delimiter) converteert een string naar een array. In de
string wordt ieder element met het aangegeven delimiter-teken gescheiden, bijvoorbeeld een spatie of het |-teken.
In de volgende opgave maken we gebruik van de methode string.split(delimiter)
om de string myString uit de vorige opgave weer naar een array om te zetten.
• Opgave 41
Open arraymethodes.html en voeg de volgende code eraan toe.
var myArray = myString.split('|');
document.write(
'<br />Opgave 41: Resultaat van split: ' + myArray );
Het resultaat is de volgende string:
Opgave ξλ: Resultaat van split: Albert,Hamsa,Pieter
2.3 Het Array-object 151
• Lab 03
Maak een nieuw script lab03.html en voer de volgende stappen uit.
1 Codeer de volgende array met de naam ‘testarray’.
testarray
[0] [1] [2] [3]
"een" "twee" 3 "vier"
2 Voeg het vijfde element met de waarde 5 eraan toe.
3 Toon (testarray).
4 Toon het datatype van het vijfde element.
5 Verwijder het vijfde element.
6 Toon (testarray).
7 Voeg aan het begin een element toe met de waarde ‘nul’.
8 Toon (testarray).
9 Delete index[0].
10 Toon het datatype van index[0].
11 Verwijder het eerste element.
12 Toon (testarray).
13 Verwijder het tweede element.
14 Toon (testarray).
15 Als index[2] bestaat: verwijder deze.
16 Toon (testarray).
Als alles goed verloopt, ziet het resultaat er als volgt uit:
Lab κν
ν een,twee,ν,vier,ο
ξ Datatype is: number
π een,twee,ν,vier
ς nul,een,twee,ν,vier
λκ Datatype [κ] is: undefi ned
λμ een,twee,ν,vier
λξ een,ν,vier
λπ een,ν
152 2 JavaScript
 2.4 Objecten
In deze paragraaf maken we kennis met de volgende JavaScript-concepten en methodes:
• object
• property in object
Planning Inleveren
Opgaven 42 t/m 45
Lab 04
JavaScript kent fi rst class objecten. Dat zijn objecten die dynamisch gemaakt worden: CRUD (Create, Read, Update, Delete), Dat betekent dat we deze objecten dynamisch kunnen maken, lezen, wijzigen en verwijderen. Een object is een verzameling attributen of eigenschappen die toegevoegd en verwijderd kunnen worden. In
JavaScript maken we fi rst class objecten met accolades als volgt mijnObject = { }.
Syntaxis:
mijnObject = {
 attribuut1: 'waarde1' [, attribuut2: 'waarde2', . . .]
}
Bijvoorbeeld:
student = {
 id: 1,
 naam: 'Jozef',
 email: 'jozef@live.nl',
 opleiding: 'Applicatie Ontwikkelaar'
}
We kunnen controleren of een object een specifi ek attribuut heeft met de binary
in-operator. Bijvoorbeeld:
'email' in student;
Het resultaat is true.
De properties van het object student kunnen gewijzigd worden, bijvoorbeeld:
student.email = 'jozef@hotmail.com'
Stel dat we een array maken als volgt:
studenten = [];
We kunnen objecten aan deze array toevoegen met de push-methode:
2.4 Objecten 153
studenten.push(
 {
 id: 1,
 naam: 'Jozef',
 email: 'jozef@live.nl',
 opleiding: 'Applicatie Ontwikkelaar'
 }
);
We kunnen specifi eke properties aanvragen als volgt:
document.write(studenten[0].naam);
Het resultaat is:
Jozef
Een hash-array is een array met elementen die in plaats van een index een
naam krijgen. Bijvoorbeeld, in plaats van: arraynaam[1] kunnen we ook zeggen:
arraynaam['elementnaam']
JavaScript kent geen hash-arrays, maar we kunnen een hash-array als volgt simuleren.
• Opgave 42
Open een nieuw script en sla het op als objecten.html. Voeg de volgende code eraan toe.
<!DOCTYPE html>
<html lang="nl">
<head>
 <meta http-equiv="Content-Type" content="text/html;
 charset=UTF-8">
 <title>Objecten</title>
</head>
<body>
<script>
 var laptops = [];
 laptops['macbook'] =
 {'model':'air', 'voorraad': 2000,'prijs': 1090};
 document.write(
 '<br />Opgave 42: laptops array aangemaakt');
</script>
</body>
</html>
Het resultaat is:
Opgave ξμ: laptops array aangemaakt
154 2 JavaScript
In bovenstaand script hebben we een array laptops aangemaakt. Daarna hebben we
een object als volgt toegevoegd:
laptops['macbook'] =
{'model':'air', 'voorraad': 2000,'prijs': 1090};
In JavaScript is ['macbook'] geen element van de array laptops maar alleen een property. De array laptops is nog steeds leeg. We hebben er alleen de nieuwe property
['macbook'] aan toegevoegd. Deze property hebben we verder als een nieuw object
gedefi nieerd.
Voor dit object hebben we weer drie nieuwe properties met waarden gedefi nieerd:
{'model':'air', 'voorraad': 2000, 'prijs': 1090}
Omdat onze array laptops leeg is, kunnen we de array-methodes zoals pop() en
push() uit de vorige paragraaf hier niet gebruiken. Maar we kunnen dit verder beschouwen als een hash-array.
• Opgave 43
Open objecten.html en voeg de volgende laptops eraan toe.
laptops['asusbook'] =
{'model':'wind', 'voorraad': 1000, 'prijs': 990};
laptops['dellbook'] =
{'model': 'fire', 'voorraad': 987, 'prijs': 890};
document.write('<br />Opgave 43: laptops array uitgebreid');
</script>
</body>
</html>
Het resultaat is:
Opgave ξν: laptops array uitgebreid
Array.length
We kunnen verder testen of inderdaad onze array laptops leeg is met behulp van de
property array.length.
• Opgave 44
Open objecten.html en voeg de volgende code eraan toe.
document.write(
'<br />Opgave 44: De laptops array heft '+
laptops.length + ' elementen');
Het resultaat is:
2.4 Objecten 155
Opgave ξξ: De laptops array heeft κ elementen
Testen op array-properties
We kunnen nu gaan testen of een array een bepaalde property of object heeft.
Syntaxis: propertynaam in arraynaam
Bijvoorbeeld: var mac = ‘macbook’ in laptops;
Als de property in de array bestaat, dan is het resultaat true, anders false.
• Opgave 45
Open objecten.html en voeg de volgende code eraan toe.
var mac = 'macbook' in laptops;
var asus = 'asusbook' in laptops;
var dell = 'dellbook' in laptops;
document.write(
'<br>Opgave 45: De variabele mac is: ' + mac);
document.write(
'<br>Mac specificaties ------- ' +
'<br>Model: '+ laptops['macbook']['model'] +
'<br>Voorraad: '+ laptops['macbook']['voorraad'] +
'<br>Prijs: '+ laptops['macbook']['prijs']);
Het resultaat moet er als volgt uitzien:
Opgave ξο: De variabele mac is: true
Mac specifi cati es --------
Model: air
Voorraad: μκκκ
Prijs: λκσκ
• Lab 04
1 Maak een nieuw JavaScript en sla het op als lab04.html.
2 Codeer een nieuwe array met de naam palet en met vijf kleuren.
3 Toon (palet).
4 Codeer de volgende prompt:
var nieuwekleur = prompt('Typ een nieuwe kleur in: ');
5 Codeer een array-methode die de nieuwe kleur aan het einde van de array
palet toevoegt.
6 Toon (palet).
7 Codeer de volgende prompt:
var nieuwekleur = prompt('Typ een nieuwe kleur in: ');
156 2 JavaScript
8 Codeer een array-methode die de nieuwe kleur aan het begin van array palet toevoegt.
9 Toon (palet).
10 Sorteer de array palet oplopend op alfabetische volgorde.
11 Toon (palet).
12 Splits de array palet in tweeën: palet en palet2.
13 Toon (palet).
14 Toon (palet2).
15 Maak een exacte kopie van palet in palet3.
16 Toon (palet3);
Hieronder zie je het resultaat met willekeurige kleuren:
Lab κξ
ν palet is nu: wit,blauw,groen,rood,zwart
π palet is nu: wit,blauw,groen,rood,zwart,geel
σ palet is nu: oranje,wit,blauw,groen,rood,zwart,geel
λλ palet is nu: blauw,geel,groen,oranje,rood,wit,zwart
λν palet is nu: rood,wit,zwart
λξ paletμ is nu: blauw,geel,groen,oranje
λπ paletν is nu: rood,wit,zwart
 2.5 Het Date-object
In deze paragraaf maken we kennis met het JavaScript Date-object. Omdat Date
een object is schrijven we dit met een hoofdletter. We behandelen de volgende:
• Date-object
• Date creëren
• Date wijzigen
Planning Inleveren
Opgaven 46 t/m 50
Lab 05
Het Date-object is ook een interessant object in JavaScript. Dit object heeft, zoals
het Array-object, methodes die ons helpen om een datum te verwerken.
Creëer een Date-object
De syntaxis voor het declareren van een Date-object is als volgt:
new Date();
2.5 Het Date-object 157
Met het keyword new maken we een nieuw object dat gebaseerd is op het JavaScript
Date-object. Dit nieuwe object bevat de datum en de tijd van je computerklok.
• Opgave 46
Open een nieuw bestand en sla het op als dateobject.html. Voeg de volgende code
eraan toe.
<!DOCTYPE html> <html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
 <title>Date Object</title>
</head>
<body>
<script>
 var vandaag = new Date();
 document.write('<br />Opgave 46: '+ vandaag);
</script>
</body>
</html>
Het resultaat is afhankelijk van de huidige datum:
Opgave ξπ:
Wed Nov λν μκλπ λξ:οπ:οπ GMT+κλκκ
De huidige datum en tijd worden weergegeven.
In het resultaat zien we de datum en de tijd van vandaag. De tijd wordt gelezen
vanuit je computerklok en is lokale tijd. Lokale tijd in Nederland is CET = Central
European Time. CET is een uur later dan GMT, dus (GMT+0100). GMT is de afkorting voor Greenwich Mean Time.
Een datum is een moment in de tijd. Dit moment wordt gerekend als het aantal
milliseconden sinds middernacht 1 januari 1970. Bijvoorbeeld:
var nu = Date.now();
geeft als resultaat het aantal milliseconden sinds 1 januari 1970.
Een dag bevat 86.400.000 milliseconden, dus we kunnen zeggen:
var eenDag = 86400000;
Creëer een Date-object met parameters
Een nieuw Date-object kunnen we creëren met meerdere parameters. In de volgende opgave creëren we een Date-object met de parameter value.
Syntaxis met de parameter value:
new Date(value);
158 2 JavaScript
De datum van morgen kunnen we als volgt uitrekenen:
var morgen = new Date(nu + eenDag);
• Opgave 47
Open dateobject.html en voeg de volgende code eraan toe.
var nu = Date.now();
var eenDag = 86400000;
var morgen = new Date(nu + eenDag);
document.write( "<br />Opgave 47: De datum morgen is: "+ morgen);
</script>
</body>
</html>
Afhankelijk van de datum vandaag ziet het resultaat eruit als:
Opgave ξρ: De datum morgen is: Thu Nov λξ μκλο λο:κλ:οσ GMT+κλκκ
Creëer een Date-object met string
Nog een andere manier om een Date-object te creëren is met een string-parameter.
De syntaxis met de parameter date string is als volgt:
new Date(date string);
In de volgende opgave maken we een nieuw Date-object met een date-string.
• Opgave 48
Open dateobject.html en voeg de volgende code eraan toe.
// datum met date string
var schooljaar = new Date("2015-09-04");
// datum met datum en tijd string
var wintertijd = new Date("2015-10-28T03:00:00");
document.write("<br />Opgave 48: Begin wintertijd is: " + wintertijd);
// maak hieronder een var met eigen geboortedatum:
// geef hieronder je geboortedatum en tijd weer:
Het resultaat moet er ongeveer uitzien als:
Opgave ξς: Begin winterti jd is: Tue Oct μς μκλο κν:κκ:κκ GMT+κλκκ
Mijn geboortedatum is: Wed Oct κλ λσσο κμ:κκ:κκ GMT+κμκκ
2.5 Het Date-object 159
Creëer een Date-object met getallen
Weer een andere manier om een Date-object te creëren is met getallen.
De syntaxis met getallenparameters is als volgt:
new Date(jaar,maand[,dag,uur,minuut,seconde,milliseconde])
• Opgave 49
Open dateobject.html en voeg de volgende code eraan toe.
beginSchooldag = new Date(2015,8,9,8,30);
document.write("<br>Opgave 49: Begin schooldag: "+beginSchooldag);
Het resultaat moet er ongeveer zo uitzien:
Opgave ξσ: Begin schooldag: Wed Sep κσ μκλο κς:νκ:κκ GMT+κμκκ
• Opgave 50
Open dateobject.html en voeg de volgende code eraan toe.
nu = Date.now();
document.write("<br />Opgave 50: Nu: " + nu);
var dagen = ((nu -beginSchooldag) / eenDag);
document.write("<br>Aantal dagen sinds begin schooldag: " + dagen.toFixed(0));
Afhankelijk van de datum van vandaag moet het resultaat er ongeveer zo uitzien:
Opgave οκ: Nu: λξξςνορλλπορλ
Aantal dagen sinds begin schooldag: ρπ
• Lab 05
Maak een nieuw script lab05.html en voer de volgende stappen uit.
1 Codeer de volgende prompt:
einddatum = prompt("Wat is de einddatum JJJ-MM-DD?");
2 Codeer een Date-object var deadline met de einddatum.
3 Toon de datum deadline.
4 Codeer een var nu met Date.now().
5 Codeer de var dag = 86400000.
6 In deze stap reken je de resterende dagen uit tussen nu en de deadline.
Toon het volgende:
document.write('<br>Er zijn nog: ' + resterende.toFixed(0) + ' dagen te gaan!');
Afhankelijk van de datum vandaag moet het resultaat er zo uitzien:
160 2 JavaScript
Deadline: Sat Dec λμ μκμκ κλ:κκ:κκ GMT+κλκκ Er zijn nog: μοςξ dagen te gaan!
 2.6 Date-methodes
In deze paragraaf maken we kennis met de volgende JavaScript-concepten en methodes:
• getFullYear
• getMonth
• getDate
• getDay
• getHours
• getMinutes
• getSeconds
Planning Inleveren
Opgave 51
Lab 06
Het Date-object bevat een aantal methodes die ons helpen om data te verwerken.
Hier volgt een lijst met de meest gebruikelijk Date-methodes:
Methode Betekenis
getFullYear geeft het jaar als resultaat (JJJJ)
getMonth resultaat is de maand (0-11); januari is 0
getDate resultaat is de dag van de maand (1-31)
getDay resultaat is de dag van de week (0-6); zondag is 0
getHours resultaat is het uur (0-23)
getMinutes resultaat is minuten (0-59)
getSeconds resultaat is seconden (0-59)
getTime resultaat is milliseconden sinds 1 januari 1970
now resultaat is milliseconden sinds 1 januari 1970
toDateString resultaat is een leesbare datum
toTimeString resultaat is een leesbare tijd
setFullYear jaar resetten (JJJJ)
setMonth maand resetten (0-11)
setDate dag resetten (1-31)
setHours uur resetten (0-24)
setMinutes minuten resetten (0-60)
setSeconds seconden resetten (0-60)
2.6 Date-methodes 161
getFullYear
Met behulp van deze methode kunnen we een Date-object verwerken. Bijvoorbeeld:
var vandaag = new Date();
var jaar = vandaag.getFullYear();
vandaag.setHours(0);
• Opgave 51
Open een nieuw bestand en sla het op als datemethodes.html. Voeg de volgende
code eraan toe.
1 Codeer de volgende twee arrays:
var maanden = new Array('januari','februari','maart','april','mei','juni',
'juli','augustus','september','oktober','november','december');
var weekdag = new Array('zondag','maandag','dinsdag','woensdag','donderdag',
'vrijdag','zaterdag')
2 Maak gebruik van deze twee arrays om de systeemdatum in het Nederlands te vertalen.
Afhankelijk van de datum van vandaag, moet het resultaat er zo uitzien:
Vandaag is: Mon Oct μς μκλν λξ:ξλ:μκ GMT+κλκκ
Vandaag is: maandag μς oktober μκλν
• Lab 06
1 Open lab01.html en sla het op als lab06.html.
2 Maak een nieuw Date-object.
3 Geef de datum van vandaag weer als factuurdatum: dd-mm-jjjj.
4 Reken betaaldatum uit als factuurdatum + 5 dagen.
5 Geef de betaaldatum weer als dd-mm-jjjj.
Het resultaat moet er als volgt uitzien:
162 2 JavaScript
Lab κπ
Factuur
Factuurdatum: dd-mm-jjjj
Betaaldatum: dd-mm-jjjj
Bedankt voor je bestelling: Peter
Boekti tel is: JavaScript
Aantal te bestellen: μμ
Prijs per boek is: μσ.σκ
Bedrag is: πορ.ςκ
BTW is: νσ.ξρ
Totaal inclusief BTW is: πσρ.μρ
 2.7 Beslissingsstructuren
In deze paragraaf maken we kennis met de volgende JavaScript-concepten en methodes:
• if-opdracht
• else-clausule
• AND
• OR
• else-if-clausule
• ternary operator
Planning Inleveren
Opgaven 52 t/m 56
Lab 07
Alle programmeertalen hebben beslissingsstructuren. Wanneer we een beslissingsstructuur gebruiken, bepalen we de volgorde van uitvoering van de instructies in
een programma. Om beslissingsmomenten duidelijk aan te geven gebruiken we
stroomdiagrammen.
De opdracht if
Een beslissingsmoment kunnen we aangeven met de opdracht if. Je gebruikt de
opdracht if om te beslissen wat er moet gebeuren als een situatie true of false is.
De syntaxis van de opdracht if is als volgt:
if (voorwaarde) {
 acties uit te voeren als voorwaarde true is;
}
2.7 Beslissingsstructuren 163
Figuur 2.15 Stroomdiagram van de opdracht if
Een voorwaarde in de opdracht if() kunnen we aangeven door twee waarden te
vergelijken. Dit doen we met vergelijkingsoperatoren. Bijvoorbeeld:
if(a == b)
== betekent gelijk aan, === is identiek aan. Hier gebruiken we het symbool === om
twee strings of teksten te vergelijken.
De gebruikelijke vergelijkingsoperatoren zie je hieronder:
Symbool Betekenis Voorbeeld
== Gelijk aan if(leeftijd == 16)
=== Identiek aan if(naam=== "Carl")
! NIET !true
!= Niet gelijk aan if(naam != "Jan")
> Groter dan if(leeftijd > 17)
>= Groter dan of gelijk aan if(leeftijd >= 16)
<= Kleiner dan of gelijk aan if(leeftijd <= 16)
&& AND if(naam == "Carl" && leeftijd > 16)
|| OR if(naam == "Carl" || leeftijd == 16)
• Opgave 52
Open een nieuw bestand en sla het op als if-opdracht.html. Voeg de volgende
code eraan toe.
<!DOCTYPE html> <html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
 <title>if-opdracht</title>
</head>
164 2 JavaScript
<body>
<script>
 doorgaan = confirm('Opgave 52: Doorgaan?');
 if(doorgaan == true) {
 alert('Welkom bij de if-opdracht');
 }
</script>
</body>
</html>
De clausule else
De clausule else is optioneel. De clausule else is een alternatieve optie van de opdracht if. De syntaxis van de clausule else is als volgt:
if (voorwaarde) {
 acties uit te voeren als voorwaarde true is;
} else {
 acties uit te voeren als voorwaarde false is;
}
• Opgave 53
Open if-opdracht.html en voeg de volgende code eraan toe.
if(doorgaan == true) {
 alert('Opgave 53: Klik op OK om te beginnen');
} else {
 alert('Tot ziens!');
}
</script>
</body>
</html>
AND-vergelijking
Bij de AND-vergelijking is het hele if()-argument alleen true als zowel argument1
én argument2 true zijn. Bijvoorbeeld:
if(uur==24 && minuut>=0) {
 alert('het is middernacht');
}
Hier krijg je alleen de alertbox te zien als uur gelijk is aan 24 en als ook minuut groter
of gelijk aan 0 is. Beide voorwaarden moeten waar zijn.
Beslissingtabel van AND
Argument 1 && Argument 2 Resultaat
true && true true
true && false false
false && false false
false && true false
2.7 Beslissingsstructuren 165
OR-vergelijking
Bij een OR-vergelijking is het hele if()-argument true als één of beide argumenten
true zijn. Bijvoorbeeld:
var cola = true;
var thee = false;
if(cola || thee) {
 alert('we mogen of cola of thee of allebei');
}
Beslissingtabel van OR
Argument 1 || Argument 2 Resultaat
true || true true
true || false true
false || false false
false || true true
• Opgave 54
Open if-opdracht.html en voeg de volgende code eraan toe.
if(doorgaan == true) {
 leeftijd = parseInt(prompt('Wat is je leeftijd?'));
 if(leeftijd < 17) {
 leerplichtig = true;
 } else {
 leerplichtig = false;
 }
 gediplomeerd = confirm('Heb je je diploma behaald?');
 if(leerplichtig && !gediplomeerd) {
 alert('Doorstuderen!');
 }
 if(!leerplichtig && !gediplomeerd) {
 alert('Je bent niet leerplichtig EN niet gediplomeerd');
 }
 if(gediplomeerd || !leerplichtig) {
 alert(
 'Je bent gediplomeerd OF niet leerplichtig OF allebei');
 }
}
</script>
</body>
</html>
In bovenstand script voeren we met de if-opdracht drie verschillende testen uit.
Ten eerste testen we of de user leerplichtig is én niet gediplomeerd:
if(leerplichtig && !gediplomeerd)
Ten tweede testen we of de user niet leerplichtig is én niet gediplomeerd:
if(!leerplichtig && !gediplomeerd)
166 2 JavaScript
Als laatste testen we of de user niet leerplichtig is óf een diploma heeft:
if(gediplomeerd || !leerplichtig)
Dit zijn drie verschillende if-opdrachten. Maar we kunnen in feite alle testen binnen één if-opdracht uitvoeren met de clausule else-if.
De clausule else if
De clausule else if is ook optioneel en geeft ons de mogelijkheid meerdere alternatieve beslissingen te testen. De syntaxis van de clausule else if is als volgt:
if (voorwaarde1) {
 acties uit te voeren als voorwaarde1 true is;
}
else if (voorwaarde2) {
 acties uit te voeren als voorwaarde2 true is;
}
else {
 anders voer deze acties uit;
}
Figuur 2.16 Stroomdiagram van de clausule else if
• Opgave 55
Open een nieuw bestand en sla het op als if-else-opdracht.html en voeg de volgende if-else-if-opdracht eraan toe.
Bevestig of de user een creditcard heeft.
Bevestig of de leeftijd van de user boven de 18 is.
Als de user wel een creditcard heeft en ook boven de 18 is dan alert je: ‘Je mag 1000
euro lenen.’
2.7 Beslissingsstructuren 167
Anders: als de user geen creditcard heeft en ook boven de 18 is dan alert je: ‘Je mag
500 euro lenen.’
Anders alert je: ‘Je mag geen geld lenen.’
De ternary-operator (? : )
De ternary-operator is een verkorting van de if-opdracht. De ternary-operator
gebruik je bij if-opdrachten die kort en simpel te schrijven zijn. De syntaxis is als
volgt:
(voorwaarde ? resultaat als true: resultaat als false);
Na de voorwaarde komt een vraagteken (?). Daarna komt het resultaat als de voorwaarde waar (true) is. Dan volgt een dubbele punt (:). Daarna komt het resultaat
als de voorwaarde niet waar (false) is. Bijvoorbeeld:
<script>
 var leeftijd = 18;
 var leerplichtig = (leeftijf < 17 ? true: false);
</script>
Het resultaat van deze test is: leerplichtig = false
In de volgende opgave is het rapport voldoende:
<script>
 var gemiddeld = 8;
 var rapport = (gemiddeld >= 6 ? 'voldoende': 'onvoldoende');
</script>
• Opgave 56
Open een nieuw bestand en sla het op als ternary.html. Voeg de volgende ternaryoperator eraan toe:
Vraag de user naar zijn postcode.
Als de postcode gelijk is aan ‘1010ST’ toon je de volgende alertbox:
‘Kans op de Nationale Postcode Loterij is 90.’
Anders toon je de alertbox:
‘Kans op de Nationale Postcode Loterij is 0,069.’
• Lab 07
Open lab06.html en sla het op als lab07.html.
Maak een nieuwe variabele met de naam bezorgkosten = 15;
Vraag (‘prompt’) de gebruiker om zijn woonplaats.
Maak een nieuwe variabele met de naam woonplaats.
Maak een nieuwe variabele met de naam postcode.
Vraag (‘prompt’) de gebruiker om zijn postcode.
168 2 JavaScript
Codeer de volgende if-opdracht:
Als de woonplaats Amsterdam is en de postcode ligt tussen 1000AA en 2000BB,
dan moet de user de volgende alertbox krijgen:
‘U betaalt geen bezorgkosten’
en de variabele bezorgkosten moeten nul zijn.
Totaal te betalen moet totaal te betalen plus bezorgkosten zijn.
Als de woonplaats Amsterdam is en de postcode ligt tussen 1000AA en 2000BB,
dan betaalt de klant dus geen bezorgkosten.
Een mogelijk resultaat zie je hieronder:
Lab κρ
Factuur
Factuurdatum: dd-mm-jjjj
Betaaldatum: dd-mm-jjjj
Bedankt voor je bestelling: Jozef
Woonplaats ........Amsterdam
Postcode ............λκσκAC
Boekti tel .............JavaScript
Aantal te bestellen.... λκ
Prijs per boek.............μσ.σκ
Bedrag .......................μσσ.κκ
BTW......................... λρ.σξ
Bezorgkosten .............κ
Totaal inclusief BTW en bezorgkosten .....νλπ.σξ
Tip:
Gebruik de functies toLowerCase() en toUpperCase() om een string
om te zetten in hoofdletters of in kleine letters, bijvoorbeeld:
<script>
 var stad = 'Amsterdam';
 stad = stad.toLowerCase(); //resultaat is 'amsterdam'
 stad = stad.toUpperCase(); //resultaat is 'AMSTERDAM'
</script>
2.8 Stroomdiagrammen 169
 2.8 Stroomdiagrammen
In deze paragraaf maken we kennis met stroomdiagrammen:
Planning Inleveren
Opgave 57
Lab 08
Er zijn verschillende soort diagrammen die de communicatie tussen programmeurs en andere specialisten zoals informatieanalisten vereenvoudigen. Het eenvoudigste diagram is het stroomdiagram. De basiselementen van een stroomdiagram zie je in afbeelding 2.17.
Figuur 2.17 Basiselementen van het stroomdiagram
Er bestaat speciale software voor het maken van stroomdiagrammen, bijvoorbeeld
Visio of Word. In Word kun je bij Vormen kiezen voor Stroomdiagram.
• Opgave 57
Teken de volgende stappen in een stroomdiagram.
Is er sprake van een printerprobleem?
Is er sprake van een modemprobleem?
Als het een modemprobleem is, is het error E93?
 Als het E93 is 1. Mogelijk vuiltje op het startoog
 2. Schakel de machine uit en blaas in het startoogje
Als het een modemprobleem, is het error E402?
 Als het E402 is 1. Controleer of het aan-lampje brandt
 2. Schakel de machine uit en aan
170 2 JavaScript
Als het een modemprobleem, is het error E405?
 Als het E405 is 1. Is er sprake van een beschadiging?
 2. Reparatiekosten vallen buiten het contract
• Lab 08
In deze lab-opdracht codeer je een script volgens onderstaand stroomdiagram. Dit
script sla je op als lab08.html.
begin
maak een
vandaag Date Object
maak een
factuur Date Object
toon
datum vandaag
toon
factuurdatum
toon
betaaldatum
JA toon
“meld
incassobureau”
maak een
termijn Date Object
van 30 dagen
var betaaltijd =
(factuurdatum.getTime( ) +
termijn.getTime( ));
var betaaldatum = new
Date(betaaltijd);
stop
NEE
U hebt nog
resterende dagen
om te betalen
resterende dagen
uitrekenen
stop
Figuur 2.18 Stroomdiagram bij Lab 08
2.9 Switch 171
Afhankelijk van de datum vandaag zal het resultaat er ongeveer zo uitzien:
Lab ς
Vandaag is: Mon Oct μς μκλν
factuurdatum is: Fri Oct λλ μκλν
betaaldatum is: Sun Nov λκ μκλν
U hebt nog: λμ dagen om te betalen
 2.9 Switch
In deze paragraaf maken we kennis met de switch-opdracht:
Planning Inleveren
Opgave 58
Lab 09
De opdracht switch is ook een beslissingsstructuur. Deze kan effi ciënter zijn dan de
opdracht if. We gebruiken de opdracht switch om te beslissen welk blok uit veel
blokken code moet worden uitgevoerd. De syntaxis van de opdracht switch is als
volgt:
switch(n) {
case 1:
 acties uit te voeren als n==1
 break;
case 2:
 acties uit te voeren als n==2
 break;
default:
 acties uit te voeren als n anders is dan 1 en 2
}
Figuur 2.19 Stroomdiagram van de opdracht switch
172 2 JavaScript
• Opgave 58
Open een nieuw bestaand en sla het op als switch-opdracht.html. Voeg de volgende code eraan toe.
<!DOCTYPE html>
<html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
 <title>switch-opdrachten</title>
</head>
<body>
<script>
 var datum=new Date();
 var vandaag=datum.getDay();
 var uur=datum.getHours();
 document.write('Het is vandaag: ' + datum);
 switch(vandaag) {
 case 1:
 document.write('maandag is mijn eerste stagedag');
 break;
 case 2:
 document.write('dinsdag is mijn tweede stagedag');
 break;
 case 3:
 document.write('woensdag is mijn JavaScriptdag');
 break;
 case 4:
 document.write( 'donderdag is mijn werkdag');
 break;
 case 5:
 document.write('vrijdag is mijn roostervrije dag');
 break;
 }
</script>
</body>
</html>
• Lab 09
Al je veel beslissingen of opties moet coderen met alleen de if-opdracht, eindig je
met if-opdrachten binnen if-opdrachten binnen nog meer if-opdrachten. Dan
wordt je code vrijwel onbegrijpelijk. Met de opdracht switch kunnen we op een
meer gestructureerde manier beslissingen of opties coderen.
In deze lab-opdracht codeer je een script volgens onderstaand stroomdiagram. Dit
script sla je op als lab09.html.
2.10 Eigen functies 173
Figuur 2.20 Stroomdiagram bij Lab 09
 2.10 Eigen functies
In deze paragraaf maken we kennis met de volgende JavaScript-opdrachten en concepten:
• functies
• externe functies
• functieparameters
• scope van variabelen
Planning Inleveren
Opgaven 59 t/m 68
Lab 10
We hebben kennisgemaakt met een aantal methodes, bijvoorbeeld de methodes
voor het Array-object en het Date-object. Maar we kunnen ook onze eigen functies
coderen en hergebruiken. In deze paragraaf van hoofdstuk 2 leren we hoe we onze
eigen functies coderen.
174 2 JavaScript
Functie of methode
Een methode is een functie binnen een object. Een eigen functie is code die een
specifi eke taak uitvoert. Eigen functies codeer je apart. Ze zijn dan leesbaarder en
je kunt ze hergebruiken wanneer je dezelfde taak moet uitvoeren. In JavaScript
declareer je een functie binnen de <script>-tag als volgt:
function functienaam ( input parameters ) {
 acties uit te voeren;
 return (output) // return is optioneel;
}
Figuur 2.21 Stroomdiagram van een functie
Nadat je een functie hebt gecodeerd en gedefi nieerd, kun je de functie aanroepen.
Een functie roep je als volgt a:
functienaam();
Of
functienaam(input-parameters);
Functie met input
Hier maken we een nieuwe functie met de naam print en de parameter input.
Dit is de syntaxis van de functie: print(input).
function print(input) {
 document.write(input);
}
We hebben een nieuwe functie gedefi nieerd die een input-string verwacht om vervolgens de string op het beeldscherm weer te geven. Je zou voortaan deze functie
kunnen gebruiken in plaats van
document.write('String')
Dit kun je je als volgt voorstellen: de functie is als een zwarte doos. Je gooit wat input in de zwarte doos (input-parameter). De zwarte doos kan dan iets met de input
doen. De acties tussen de accolades worden binnen de zwarte doos uitgevoerd –
zie fi guur 2.22.
2.10 Eigen functies 175
Figuur 2.22 Een functie met input
Functie met input en output
Hier volgt een voorbeeld van een functie met input en output. Deze functie gebruikt de input om een resultaat te genereren en vervolgens de output te leveren:
function verdubbelen(input) {
 output = input*2;
 return(output);
}
Figuur 2.23
Een functie aanroepen
Om een functie te gebruiken (‘aanroepen’) moet je de juiste syntaxis van de functie
gebruiken. De syntaxis van een functie is de functienaam plus de functieparameters tussen haakjes. De volgende functie verdubbelen heeft als input een getal nodig
of een variabele met een getalwaarde, bijvoorbeeld:
verdubbelen(10);
of
verdubbelen(variabele);
Figuur 2.24 Een functie aanroepen
• Opgave 59
Open een nieuw bestaand en sla het op als mijnfunctions.html. Voeg de volgende
code eraan toe.
<html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
 <title>mijn functies</title>
176 2 JavaScript
 <!--dit script: werkt met functies
 auteur: typ je eigen naam hier -->
 <script>
 function verdubbel(inputgetal) {
 outputgetal = inputgetal * 2;
 return(outputgetal);
 }
 </script>
</head>
<body>
 <script>
 mijngetal = prompt('Typ een getal in');
 resultaat = verdubbel(mijngetal);
 document.write('<br />Input-getal:' + mijngetal);
 document.write('<br />Output-getal:' + resultaat);
 </script>
</body>
</html>
• De functie verdubbel() wordt in JavaScript in de <body> als volgt opgeroepen:
verdubbel(mijngetal)
• De input is: mijngetal
• De functie verdubbel() in de <head>-sectie wordt als volgt uitgevoerd: functie
verdubbel(inputgetal)
• De input-parameter (inputgetal) wordt vervangen door de werkelijk input: mijngetal
• De functie voert de volgende acties uit:
outputgetal = inputgetal * 2
• De functie geeft als resultaat: return(outputgetal)
Het resultaat zou er als volgt uit kunnen zien:
Input-getal: ξξ
Output-getal: ςς
Externe functies
Je codeert een interne functie binnen een HTML-pagina. Maar je kunt ook een
externe functie in een extern JavaScript-bestand coderen. Zo kan een groot deel
van je programmacode buiten je webpagina blijven.
Een externe functie is ideaal wanneer je herbruikbare code wilt programmeren. Je
kunt vanuit je webpagina’s de externe functies oproepen.
LET OP
Het externe JavaScript-bestand mag geen HTML-tags hebben. Hieronder zie je een
voorbeeld van een extern JavaScript-bestand.
2.10 Eigen functies 177
• Opgave 60
Zorg ervoor dat mijnfunctions.js er als volgt uitziet:
function afmelden() {
 var antwoord = confirm('Wilt u zich afmelden?');
 if(antwoord == true) {
 alert('U wordt afgemeld!!!');
 }
}
Figuur 2.25 Je herkent het mijnfunctions.js-bestand aan het js-pictogram.
De functie afmelden() genereert een confi rmbox met de vraag:
'Wilt u zich afmelden?'
Het resultaat van de confi rmbox wordt bewaard in de variabele antwoord.
Als de waarde van de variabele antwoord true is, wordt een alertbox gegenereerd
met de volgende melding: 'U wordt afgemeld!!!'
De tag <script source>
Elke webpagina kan gelinkt worden met een extern .js-bestand door de tag <script
src="extern bestand.js">. Deze tag typ je binnen de <head>-sectie.
• Opgave 61
Open mijnfunctions.html en voeg de volgende <script>-tags in de <head>-sectie en
in de <body>-sectie eraan toe:
<html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8>
 <title>mijn functies</title>
 <script src="mijnfunctions.js"></script>
 <script>
 function verdubbel(inputgetal ) {
 outputgetal = inputgetal * 2;
 return(outputgetal);
 }
 </script>
</head>
<body>
<script>
 mijngetal = prompt('Typ een getal in');
178 2 JavaScript
 resultaat = verdubbel(mijngetal);
 document.write('<br>Input-getal:' + mijngetal);
 document.write('<br>Output-getal:' + resultaat);
 afmelden();
</script>
</body>
</html>
Hierboven hebben we vanuit de <head>-sectie een link naar het externe bestand
mijnfunctions.js gemaakt. In de <body>-sectie hebben we de functie afmelden()
vanuit het externe script opgeroepen. Het resultaat zie je hieronder.
Figuur 2.26
Deze twee boxes worden gegenereerd door de functie afmelden() in het externe
JavaScript (mijnfunctions.js).
• Opgave 62
Open mijnfunctions.js en voeg de volgende functionaliteit eraan toe.
Maak de nieuwe functie begroeten() aan met de volgende functionaliteit:
1 Maak een Date()-object dat de systeemdatum genereert.
2 Maak een variabele uur met de waarde van de methode getHours().
3 Maak een if()-opdracht die het uur als volgt test:
– Als uur tussen 0 t/m 11 is, groet je: Goedemorgen!
– Anders als uur tussen 12 t/m 17 is, groet je: Goedemiddag!
– Anders groet je: Goedenavond!
Open mijnfunctions.html. Roep de functie begroeten() als volgt aan:
begroeten();
Het resultaat moet, afhankelijk van de tijd, een van de begroetingen zijn.
Input-getal: λλ
Output-getal: μμ
Goedemorgen!
2.10 Eigen functies 179
• Opgave 63
Open het externe bestand mijnfunctions.js en codeer de volgende functie
dollarKoers() die de huidige dollarkoers voor een euro oplevert.
function dollarKkoers() {
 return(1.36);
}
function euroKoers() {
 return(0.74);
}
Open mijnfunctions.html en voeg de volgende document.write-opdrachten toe.
document.write('<br />De dollarkoers is ' + dollarKoers());
document.write('<br />De eurokoers is ' + euroKoers());
In dit geval wordt de binnenste functie dollarKoers() als eerste uitgevoerd. De opgeleverde waarde van de functie dollarKoers() wordt dan de input voor de buitenste functie document.write(). De functie geeft dan 1.36 weer.
De dollarkoers is λ.νπ
De eurokoers is κ.ρξ
• Opgave 64
Open het externe bestand mijnfunctions.js en codeer de volgende functie
dollar_naar_euro() die de conversie van dollars naar euro’s uitvoert.
function dollar_naar_euro(dollars) {
 return(dollars * euroKoers());
}
Deze functie verwacht een getal als input-parameter. Dat getal representeert een
bedrag in dollars, bijvoorbeeld:
dollar_naar_euro(100)
De functie moet dit bedrag naar euro’s omzetten.
De functie zegt: als je me een bedrag in dollars geeft, vermenigvuldig ik dat bedrag
met de eurokoers en geef het resultaat.
Open mijnfunctions.html. Roep de functie dollar_to_euro() als volgt aan:
document.write(
'<br>100 dollar is ' + dollar_naar_euro(100) + ' euro\'s');
In de tweede regel wordt dollar_naar_euro(100) vervangen door 74.
In deze regel zie je het escapeteken \ binnen een string. Hiermee zeggen we dat het
(\')-teken niet het einde van de string is, maar dat het deel uitmaakt van de string.
'euros\'s' wordt weergegeven als euro's
180 2 JavaScript
Het resultaat moet er als volgt uitzien:
λκκ dollars is ρξ euro's
Functies met meerdere parameters
In de volgende opgave coderen we een nieuwe functie wissel(). Deze functie heeft
twee input-parameters: bedrag en valuta. De functie moet het bedrag van de aangegeven valuta wisselen.
• Opgave 65
Open het externe bestand mijnfunctions.js en codeer de volgende functie:
function wissel(bedrag, valuta) {
 if(valuta == 'euro') {
 return(bedrag * dollarKoers());
 }
 else if(valuta == 'dollar') {
 return(bedrag * euroKoers());
 }
}
Open mijnfunctions.html. Roep de functie wissel() als volgt aan:
document.write('<br>wissel 100 euro\'s in dollars: ' +
 wissel(100,'euro'));
document.write('<br>wissel 20 dollars in euro\'s: ' +
 wissel(20,'dollar'));
wissel λκκ euro’s in dollars: λνπ
wissel μκ dollars in euro’s: λξ.ς
Functies dynamisch uitvoeren
In de volgende opgave coderen we een formulier met een inputveld en een knop.
In het inputveld gaan we een bedrag intikken. Aan de knop koppelen we de functie
dollar_naar_euro(), zodat de functie wordt uitgevoerd als je op de knop klikt.
• Opgave 66
Open mijnfunctions.html en voeg het volgende formulier eraan toe:
<form name='form'>
 <input type="text" name="bedrag" placeholder="bedrag" />
 <input type= "button" value="converteren"
 onclick="document.write('conversie in euros:' +
 dollar_naar_euro(document.form.bedrag.value)) "/>
</form>
</body>
</html>
2.10 Eigen functies 181
Het resultaat zie je hieronder:
Figuur 2.27
Scope van variabelen
Een globale variabele is een variabele die zichtbaar is binnen het hele JavaScript.
Dit noemen we de scope van de variabele. Dat betekent dat een globale variabele
overal in je script gewijzigd of gelezen kan worden. Een variabele is globaal wanneer je deze een waarde geeft, bijvoorbeeld:
variabeleNaam = 'globalscope';
Een lokale variabele is een variabele binnen een functie. Dit noemen we de scope
van de functie. Je mag dezelfde naam van een globale variabele binnen een functie
gebruiken als je vooraf het keyword var gebruikt, bijvoorbeeld:
function scope(){
 // function scope
 var variabeleNaam = 'localescope';
 eersteKeer = 'globalescope';
}
In de functie is variabeleNaam een tweede variabele met een andere waarde.
LET OP
Als je een variabelenaam voor de eerste keer binnen een functie declareert dan
krijgt deze een globale scope.
• Opgave 67
Typ het volgende script en sla het op als scope.html.
<!DOCTYPE html>
<html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8" />
</head>
<body>
<script>
 // Globale scope
 scope = 'globaal';
 bevolking = 1000;
 document.write('<br>scope:'+scope + '<br>bevolking:'+ bevolking);
182 2 JavaScript
 function functionScope(){
 // lokale scope
 var scope = 'lokaal';
 var lokaleBevolking = 10;
 bevolking += lokaleBevolking;
 forensen = 2;
 document.write('<br>scope:'+scope + '<br>bevolking:'+ lokaleBevolking);
 }
 functionScope();
 document.write('<br>scope:'+scope + '<br>bevolking:'+ bevolking);
 document.write('<br>Als eerste benoemd in functie forensen:'+ forensen);
</script>
</body>
</html>
Het resultaat is:
scope:globaal
bevolking:λκκκ
scope:lokaal
bevolking:λκ
scope:globaal
bevolking:λκλκ
Als eerste benoemd in functi e forensen: μ
In het resultaat zien we dat:
• globale bevolking is 1000
• lokale bevolking is 10
• bevolking is globaal en opgeteld binnen de functie 1010
• forensen binnen de functie gedefi nieerd zonder var dus globaal
Samenvattend zeggen we dat de globale variabele bevolking zichtbaar is binnen
de scope van de functie, maar de lokale variabele lokaleBevolking onzichtbaar is
buiten de scope van de functie. Dit betekent dat lokaleBevolking buiten de functie
onzichtbaar, ongedefi nieerd en buiten scope is.
De array arguments[]
De array arguments[] is de array binnen een functie waar de input-parameters van
de functie worden opgeslagen. Als we een functie defi niëren, geven we de syntaxis
van de functie aan, bijvoorbeeld:
function bestelAuto(merk,klasse,kleur)
In dit geval zijn er drie input-parameters: (merk,klasse,kleur). Dit betekent dat we
maximaal drie input-parameters kunnen doorgeven. Deze parameters worden in
de array arguments[] als volgt opgeslagen:
2.10 Eigen functies 183
arguments[0] = merk;
arguments[1] = klasse;
arguments[2] = kleur;
We kunnen binnen de functie bestelAuto() controleren welke parameters doorgegeven zijn. Bijvoorbeeld of er nul, een, twee of drie parameters zijn. Dit doen we als
volgt:
if(typeof arguments[0] === 'undefined'){
 // gebruik default waarde
 merk = 'Audi';
}
In deze if-opdracht controleren we of de eerste parameter is doorgegeven. Als dat
niet het geval is, zetten we de default waarde ‘Audi’ in merk.
• Opgave 68
Open scope.html en voeg de volgende code onderaan het script toe.
function bestelAuto(merk,klasse,kleur){
 if(typeof arguments[0] === 'undefined'){
 // gebruik default waarde
 merk = 'Audi';
 }
 document.write(
 'Bestelde: een ' + merk + ' ' + klasse + ' in ' + kleur);
}
Codeer twee nieuwe if-opdrachten voor default waarden als volgt:
• default waarde voor voor klasse is C
• default waarde voor kleur is Rood
Test de if-opdrachten door de functie als volgt op te roepen:
bestelAuto();
bestelAuto('Porsche');
bestelAuto('Volvo', 'Klasse A');
bestelAuto('BMW', 'Klasse B', 'Blauw');
Het resultaat is:
Bestelde: een Audi Klasse C in Rood
Bestelde: een Porsche Klasse C in Rood
Bestelde: een Volvo Klasse A in Rood
Bestelde: een BMW Klasse B in Blauw
184 2 JavaScript
• Lab 10
Maak een nieuw bestand lab 10.html met de volgende functionaliteit:
1 Maak een formulier zoals te zien is in de volgende fi guur:
Figuur 2.28 Formulier in Lab 11
2 Koppel de knop converteren aan de functie exchange() in het externe bestand mijnfunctions.js.
3 Codeer de functie exchange() als volgt:
function exchange(bedrag, conversie) { . . . }
Zorg dat het bedrag wordt geconverteerd met een van de volgende koersen:
euro_dollarkoers = 1.36
dollar_eurokoers = 0.74
euro_roebelkoers = 48.40
roebel_eurokoers = 0.02
Het resultaat zou bijvoorbeeld het volgende kunnen zijn:
λκ roebel voor κ.μλ euro
 2.11 Lussen
In deze paragraaf oefenen we met de volgende lusstructuren.
• for()-lus
• for(in)-lus
• while()-lus
• do-while()-lus
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
Opgaven 69 t/m 73
Lab 11
2.11 Lussen 185
Controlestructuren zoals de if-opdracht, de switch-opdracht en functies helpen
ons de volgorde van uitvoering van de instructies in een programma te bepalen.
Met lussen kunnen we blokken code herhalen, bijvoorbeeld als je een blok code
drie of meerdere keren wil laten uitvoeren. Er zijn verschillende lusstructuren.
De for()-lus
Met de for()-lus kun je een aantal keren hetzelfde blok instructies herhalen. Het
aantal keren dat een blok code wordt herhaald, controleren we met een controlevariabele. In de volgende voorbeelden is x onze controlevariabele. De syntaxis is als
volgt:
for() is de constructie van de lus {
 body van de lus;
}
De constructie splitsen we in drie delen:
for(deel 1; deel 2; deel 3)
Bijvoorbeeld:
for(x=0; x<10; x++) {
 body van de lus
}
In deel 1 maken we de controlevariabele, bijvoorbeeld: x=0
In deel 2 bepalen we de voorwaarde, bijvoorbeeld: x < 10
In deel 3 tellen we de controlevariabele op, bijvoorbeeld: x++
In de body van de for()-lus coderen we de acties die worden uitgevoerd zolang de
voorwaarde true is. Bijvoorbeeld:
for(x=0;x<6;x++) {
 document.write(x);
}
Hier wordt de actie document.write(x) zes keer uitgevoerd en de controlevariabele x
zes keer opgeteld.
• Opgave 69
Open een nieuw bestand en sla het op als for-lus.html. Codeer het volgende script:
<!DOCTYPE html> <html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
 <title>De for-lus</title>
 <!--dit script: werkt met de for-lus -->
</head>
186 2 JavaScript
<body>
 <script>
 for (x = 0; x < 3; x++){
 document.write('Dit is lus: ' + x);
 }
 </script>
</body>
</html>
Het resultaat moet er zo uitzien:
Dit is lus: κ
Dit is lus: λ
Dit is lus: μ
De for()-lus herhaalt de functie write() drie keer. We hebben de lus als volgt geconstrueerd:
Deel 1: x=0 declareert de controlevariabele x en zet deze op 0.
Deel 2: x<3 is de voorwaarde. Zolang deze voorwaarde true is, wordt de lus herhaald. Als de voorwaarde false is, wordt de lus beëindigd.
Deel 3: x++ de variabele x wordt bij elke lus opgeteld.
De actie uit te voeren in de body van de lus is de volgende:
document.write( 'Dit is lus: ' + x );
Figuur 2.29 Stroomdiagram van de for()-lus
2.11 Lussen 187
• Opgave 70
Open for-lus.html en voeg de volgende array en lus eraan toe:
var student = new Array(
 'Zakaria','Albert','Hamsa','Mike','Pieter','Harry');
for(x=0; x<student.length; x++) {
 document.write('<br/>Element '+x+' is '+student[x]);
}
Hier gebruiken we de for()-lus om door de elementen van de array te
lopen. Het resultaat moet er als volgt uitzien:
Element κ is Zakaria
Element λ is Albert
Element μ is Hamsa
Element ν is Mike
Element ξ is Pieter
Element ο is Harry
De for-lus scant de array student[] als volgt:
– Bij de eerste lus krijgt var x de waarde 0, dus wordt student[0] weergegeven.
– Bij de tweede lus krijgt var x de waarde 1, dus wordt student[1] weergegeven, enzovoort – zolang de voorwaarde (x<6) true is.
– Na de zesde lus krijgt var x de waarde 6, dus de voorwaarde (x<6) is false. De
for()-lus wordt beëindigd.
• Opgave 71
Open for-lus.html en voeg de volgende for-lus eraan toe:
Codeer een for-lus die alleen de even elementen weergeeft.
Het resultaat moet er als volgt uitzien:
Element κ is Zakaria
Element μ is Hamsa
Element ξ is Pieter
De functie charAt()
Kijk eens naar de volgende functie:
charAt(index)
Deze functie scant een tekst en geeft als output het teken op positie x van een bepaalde tekst. De input index is een getal, de output is het teken op die positie in de
tekst. Een voorbeeld:
188 2 JavaScript
tekst = 'JavaScript';
letter = tekst.charAt(0);
De variabele tekst kunnen we ons als volgt voorstellen:
[0] [1] [2] [3] [4] [5] [6] [7] [8] [9]
J a v a S c r i p t
Na het uitvoeren van deze regels heeft de variabele letter de waarde 'J'. Dit is het
teken op positie 0 van de tekst. Zo kunnen we vanaf alle posities van de tekst het
juiste teken halen. Bijvoorbeeld:
letter = tekst.charAt(1);
Na deze opdracht heeft de variabele letter de waarde ‘a’.
Het volgende script leest een tekst om vervolgens de spaties in de tekst op te tellen.
Hiervoor gebruiken we de for()-lus.
• Opgave 72
Open for-lus.html en voeg de volgende code eraan toe:
var tekst = 'Hij lijkt een beetje op Nelson Mandela.';
lengte = tekst.length;
spaties = 0;
document.write('<br>');
for(x=0; x<lengte; x++) {
 teken = tekst.charAt(x);
 document.write(teken);
 if(teken == ' '){
 spaties++;
 }
}
document.write('<br>Tekst bevat ' + spaties + ' spaties');
</script>
</body>
</html>
Het resultaat moet er als volgt uitzien:
Hij lijkt een beetje op Nelson Mandela.
Tekst bevat π spati es
In dit script wordt de var tekst gedeclareerd met de volgende inhoud:
Hij lijkt een beetje op Nelson Mandela.
De var lengte krijgt de lengte (39) van de tekst en de variabele spaties is (0). De
voorwaarde voor de for()-lus is dat x kleiner moet zijn dan de lengte van de tekst
dus (x<lengte). Zo kan de for()-lus de hele tekst scannen.
2.11 Lussen 189
Je zou de variabele tekst als de volgende array kunnen zien:
[0] [1] [2] [3] [4] [5] . . .
H i j l i . . .
Met behulp van de functie charAt(x) kijken we naar het teken op elke positie [x].
Als het teken gelijk is aan een spatie wordt de spatieteller spaties verhoogd. Aan
het einde van de lus geef je het resultaat weer.
• Opgave 73
Open for-lus.html en voeg de volgende code eraan toe zodat het script de tekens
a, e, i, o, u optelt en vervolgens het totale aantal verschillende klinkers in de tekst
weergeeft.
Het resultaat moet er als volgt uitzien:
Opgave ρν
Hij lijkt een beetje op Nelson Mandela.
Aantal a’s: μ
Aantal e’s: ρ
Aantal i’s: μ
Aantal o’s: μ
Aantal u’s: κ
• Lab 11
Open for-lus.html en voeg de volgende code eraan toe:
var getal = new Array();
getal[0] = 'nul';
getal[1] = 'een';
getal[2] = 'twee';
getal[3] = 'drie';
getal[4] = 'vier';
getal[5] = 'vijf';
getal[6] = 'zes';
getal[7] = 'zeven';
getal[8] = 'acht';
getal[9] = 'negen';
Voeg de volgende functionaliteit eraan toe:
– Vraag de gebruiker om zijn telefoonnummer.
– Geef vervolgens alle cijfers van het telefoonnummer weer als tekst.
Maak hiervoor een for-lus die het telefoonnummer scant.
Gebruik de getal-array om alle cijfers van het telefoonnummer te vertalen naar
tekst. Het resultaat moet er ongeveer als volgt uitzien:
190 2 JavaScript
Figuur 2.30
Tip: Het telefoonnummer scan je met de for-lus. Gebruik de functie charAt() in de
for-lus om het juiste getal te vertalen door middel van de getal-array.
 2.12 De for(in)-lus
In deze paragraaf oefenen we met de for(in)-lus.
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
Opgaven 74 t/m 75
Lab 12
De for(in)-lus gebruiken we om de properties van een object te wijzigen. De syntaxis van de for(in)-lus is als volgt:
for(var property in array) {
 acties met var property;
}
Bij de eerste lus krijgt property de naam van de eerste property. Bij de tweede lus
krijgt property de naam van de tweede property, enzovoort.
• Opgave 74
Openen een nieuw bestand en sla het op als for-in-lus.html. Voeg de volgende
code eraan toe:
<!DOCTYPE html> <html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
 <title>for(in)-lus</title>
</head>
2.12 De for(in)-lus 191
<body>
<script>
 var laptops = new Array();
 laptops['macbook'] =
 {'model':'air', 'voorraad': 2000, 'prijs': 1090};
 laptops['asusbook'] =
 {'model':'wind' , 'voorraad': 1000,'prijs': 990};
 laptops['dellbook'] =
 {'model':'fire' , 'voorraad': 987,'prijs': 890};
 for(var merk in laptops) {
 document.write('<br>Merk: '+ merk);
 }
</script>
</body>
</html>
Deze for(in)-lus loopt door alle properties van de array laptops[]. De properties
zijn: 'macbook', 'asusbook' en 'dellbook'. Het resultaat moet er als volgt uitzien:
Merk: macbook
Merk: asusbook
Merk: dellbook
• Opgave 75
We gaan nu hetzelfde doen met de properties van alle merken.
Open for-in-lus.html en voeg de volgende for(in)-lus eraan toe binnen de eerste
for(in)-lus:
for(var property in laptops[merk]) {
 document.write(
 '<br>'+property + ': ' + laptops[merk][property]);
}
Hier willen we alle properties van alle laptops zien. Het resultaat moet er als volgt
uitzien:
192 2 JavaScript
Merk: macbook
model: air
voorraad: μκκκ
prijs: λκσκ
Merk: asusbook
model: wind
voorraad: λκκκ
prijs: σσκ
Merk: dellbook
model: fi re
voorraad: σςρ
prijs: ςσκ
• Lab 12
Zorg ervoor dat lab12.html er als volgt uitziet:
<!DOCTYPE html>
<html lang="nl">
<head>
 <title>lab 12</title>
 <!--
 dit script: werkt met de for(in)-lus
 -->
</head>
<body>
 <script>
 . . .
 </script>
</body>
</html>
Codeer nu een for(in)-lus die alle properties van de array laptops weergeeft. Als de
voorraad onder de 1000 is dan dan toon je een waarschuwing zoals hieronder.
2.13 De while()-lus 193
Merk: macbook
model:air
voorraad:μκκκ
prijs:λκσκ
Merk: asusbook
model:wind
voorraad:λκκκ
prijs:σσκ
Merk: dellbook
model:fi re
voorraad:σςρ---waarschuwing---
prijs:ςσκ
 2.13 De while()-lus
In deze paragraaf oefenen we met de volgende lusstructuren.
• while()-lus
• do-while()-lus
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
Opgaven 76 t/m 79
Lab 13
De while()-lus gebruik je net als de for()-lus om een blok instructies te herhalen.
Of het blok instructies wordt herhaald, bepaal je met een voorwaarde. Aan het einde van elke herhaling wordt gecontroleerd of nog steeds aan de voorwaarde wordt
voldaan. Als je de lus voortijdig wilt beëindigen, gebruik je de opdracht break. Als
je een bepaalde lus wilt overslaan, gebruik je de opdracht continue. De syntaxis van
de while()-lus is als volgt:
while(voorwaarde) {
 acties;
 // als je een lus wilt overslaan gebruik continue;
 // als je de lus voortijdig wilt beëindigen gebruik break;
}
Het volgende script laat een voorbeeld zien van het gebruik van de while()-lus:
194 2 JavaScript
• Opgave 76
Open een nieuw bestand en sla het op als while-lus.html. Codeer het volgende
script:
<!DOCTYPE html>
<html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
 <title>while-lus</title>
 <!--dit script: werkt met de while-lus -->
</head>
<body>
<script>
 var vandaag = new Date();
 var uur = vandaag.getHours();
 var minuten = vandaag.getMinutes();
 var seconden = vandaag.getSeconds();
 var milliseconden = vandaag.getMilliseconds();
 var lus = milliseconden;
 var finish = lus + 3;
 document.write('<br>while-lus begint om: ' +
 uur + ':' + minuten + ':' + seconden+':'+ milliseconden);
 while(lus < finish){
 lus = new Date().getMilliseconds();
 document.write('<br />Deze lus om: ' + lus);
 }
 document.write('<br />while-lus eindigt om: ' +
 uur + ':' + minuten + ':' + seconden + ':' + lus);
</script>
</body>
</html>
Het resultaat is dat de lus loopt gedurende drie milliseconden:
2.13 De while()-lus 195
while-lus begint om: λκ:νς:νπ:ςξρ
Deze lus om: ςξρ
Deze lus om: ςξρ
Deze lus om: ςξρ
Deze lus om: ςξρ
Deze lus om: ςξρ
Deze lus om: ςξρ
Deze lus om: ςξρ
Deze lus om: ςξς
Deze lus om: ςξς
Deze lus om: ςξς
Deze lus om: ςξς
Deze lus om: ςξς
Deze lus om: ςξς
Deze lus om: ςξς
Deze lus om: ςξσ
Deze lus om: ςξσ
Deze lus om: ςξσ
Deze lus om: ςξσ
Deze lus om: ςξσ
Deze lus om: ςξσ
Deze lus om: ςξσ
while-lus eindigt om: λκ:νς:νπ:ςοκ
• Opgave 77
Open while-lus.html. Zorg ervoor dat de while-lus de tweede milliseconde overslaat.
if(lus == milliseconden +1) {
 continue;
}
Het resultaat moet er als volgt uitzien. In dit geval wordt milliseconde 848 overgeslagen.
196 2 JavaScript
while-lus begint om: λκ:νς:νπ:ςξρ
Deze lus om: ςξρ
Deze lus om: ςξρ
Deze lus om: ςξρ
Deze lus om: ςξρ
Deze lus om: ςξρ
Deze lus om: ςξρ
Deze lus om: ςξρ
Deze lus om: ςξσ
Deze lus om: ςξσ
Deze lus om: ςξσ
Deze lus om: ςξσ
Deze lus om: ςξσ
Deze lus om: ςξσ
Deze lus om: ςξσ
while-lus eindigt om: λκ:νς:νπ:ςοκ
• Opgave 78
Open while-lus.html. Zorg ervoor dat de while-lus voortijdig wordt beëindigd na
twee milliseconden.
if(lus == milliseconden+2) {
 document.write('<br>while-lus voortijdig beëindigd');
 break;
}
Het resultaat moet er als volgt uitzien. In dit geval wordt de lus op milliseconde 167
doorlopen, milliseconde 168 wordt overgeslagen en op milliseconde 169 wordt de
lus voortijdig beëindigd.
while-lus begint om: λμ:ξκ:ξ:λπρ
Deze lus om: λπρ
Deze lus om: λπρ
Deze lus om: λπρ
Deze lus om: λπσ
while-lus voorti jdig beëindigd
while-lus eindigt om: λμ:ξκ:ξ:λπσ
De do-while()-lus
De do-while()-lus gebruik je net als de while()-lus, maar deze lus moet gegarandeerd minimaal één lus uitvoeren. In dit geval wordt de voorwaarde aan het einde
van elke lus gecontroleerd. De syntaxis is als volgt:
2.14 Het Math-object 197
do{
 acties;
} while (voorwaarde);
• Opgave 79
Open een nieuw bestand en sla het op als do-while-lus.html. Codeer het volgende
script:
<!DOCTYPE html>
<html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
 <title>do-while-lus</title>
 <!--dit script: werkt met de do-while-lus -->
</head>
<body>
<script>
 lus = 0;
 do{
 document.write(‘<br>Dit is lus ‘ + ++lus);
 doorgaan =
 confirm(‘Wil je doorgaan?’);
 } while (doorgaan);
</script>
</body>
</html>
• Lab 13
index = 0;
string1 = '1,2,3,4,5,6,8,9,0#';
string2 = '1,2,3#';
Codeer een do-while-lus die gebruikmaakt van de charAt()-methode om alle tekens
van een string weer te geven. De lus moet stoppen als het teken in de string gelijk
aan  is.
 2.14 Het Math-object
In deze paragraaf kijken we naar de volgende methodes van het Math-object. Math
is een object dus schrijven we dit met een hoofdletter M.
• abs(x)
• ceil(x)
• floor(x)
• max(x)
• min(x)
• random(x)
• round(x)
198 2 JavaScript
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
Opgaven 80 t/m 83
Lab 14
Het Math-object is een ander soort object dan bijvoorbeeld het Date-object. We
maken een nieuw Date-object als volgt: date = new Date(). Het Math-object is een
singleton object, met statische properties en methodes, die we kunnen uitvoeren
zonder dat we een nieuw object aanmaken. Deze statische methodes en properties
zijn reeds gedefi nieerd in het Math-object en daarom hoeven we geen nieuw object
te creëren.
Math.abs(x)
De methode abs() van het Math-object geeft als resultaat de absolute waarde van
een getal. Bijvoorbeeld:
Math.abs('-1'); // retourneert 1
Math.abs(-2); // retourneert 2
Math.abs(null); // retourneert 0
Math.abs('string'); // retourneert NaN
Math.abs(); // retourneert NaN
NaN betekent not a number.
Math.ceil(x)
De methode ceil() retourneert de plafondwaarde van een getal (dat is de kleinste
integer gelijk aan of groter dan het getal), bijvoorbeeld:
Math.ceil(3); // retourneert 3
Math.ceil(3.3); // retourneert 4
Math.ceil(3.8); // retourneert 4
Math.ceil(4.5); // retourneert 5
Math.ceil(5.004); // retourneert 6
Math.fl oor(x)
De methode floor() retourneert de vloerwaarde van een getal (dat is de grootste
integer gelijk aan of kleiner dan het getal), bijvoorbeeld:
Math.floor(3); // retourneert 3
Math.floor(3.3); // retourneert 3
Math.floor(3.8); // retourneert 3
Math.floor(4.5); // retourneert 4
Math.floor(5.004); // retourneert 5
2.14 Het Math-object 199
Math.max()
De methode max() retourneert het hoogste getal uit een groep getallen, bijvoorbeeld:
Math.max(3,6,8,5,3,2); // retourneert 8
• Opgave 80
Open een nieuw bestand en sla het op als math-object.html. Voeg de volgende
code eraan toe:
<!DOCTYPE html>
<html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
 <title>Math-Object</title>
 <!-- dit script: werkt met het Math-Object -->
</head>
<body>
<script>
 var mijnArray = new Array(3.51,3.50,3.49,-3.55,-3.50,-3.49);
 document.write('<br> Hoogste element in mijnArray is: '+
 Math.max.apply(null, mijnArray));
</script>
</body>
</html>
Het resultaat zie je hieronder:
Hoogste element in mijnArray is: ν.ολ
Math.min()
De methode min() retourneert het laagste getal uit een groep getallen, bijvoorbeeld:
Math.min(3,6,8,5,3,2); // retourneert 2
• Opgave 81
Open math-object.html en voeg de min-methode eraan toe:
 document.write('<br> Laagste element in mijnArray is: '+
 Math.min.apply(null, mijnArray));
</script>
</body>
</html>
Het resultaat van deze opgave zie je hieronder:
200 2 JavaScript
...
Laagste element in mijnArray is: -ν.οο
Math.round()
De methode round() retourneert de afgeronde integerwaarde van het getal, bijvoorbeeld:
Math.round(3.51); // retourneert 4
Math.round(3.50); // retourneert 4
Math.round(3.49); // retourneert 3
Math.round(-3.55); // retourneert -4
Math.round(-3.50); // retourneert -3
Math.round(-3.49); // retourneert -3
• Opgave 82
Open math-object.html en voeg de round-methode eraan toe:
 for(i=0; i < mijnArray.length; i++) {
 mijnArray[i] = Math.round(mijnArray[i]);
 }
 document.write('<br />Afgeronde elementen: ' + mijnArray);
</script>
</body>
</html>
Het resultaat zie je hieronder:
Afgeronde elementen: ξ,ξ,ν,-ξ,-ν,-ν
Math.random()
De methode random() retourneert elke keer weer een willekeurige waarde tussen 0
en 1, inclusief 0, exclusief 1, bijvoorbeeld:
Math.random();
// retourneert bijvoorbeeld de willekeurige waarde 0.137040278683634
Math.random();
// retourneert een nieuwe willekeurig waarde 0.837040278683634
• Opgave 83
Open math-object.html en voeg de random-methode eraan toe:
 document.write('<br>Vul mijnArray met willekeurige getallen');
 for(x=0;x < mijnArray.length;x++) {
 mijnArray[x] = Math.floor((Math.random()*10));
 document.write('<br>' + mijnArray[x]);
 }
2.15 String-methodes 201
</script>
</body>
</html>
Het resultaat moet zoiets zijn als:
Vul mijnArray met willekeurige getallen
λ
κ
μ
π
σ
ν
• Lab 14
In deze lab-opdracht maak je eerst de array:
alfa = ['a','b','c', etc...];
Daarna codeer je de functie nieuwewoorden() die nieuwe woorden van vijf willekeurige letters verzint. Je krijgt combinaties zoals die hieronder te zien:
zelqv jgifa zuaky
 2.15 String-methodes
In deze paragraaf kijken we naar de volgende string-methodes:
• indexOf()
• length
• charAt()
• split()
• substring()
• substr()
• toLowerCase()
• toUpperCase()
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
Opgaven 84 t/m 92
Lab 15
202 2 JavaScript
Je zou een tekst- of stringvariabele als een array kunnen zien. Het eerste teken van
de tekst is dan element [0], het tweede teken is dan element [1], enzovoort. JavaScript heeft een aantal ingebouwde methodes voor strings.
indexOf()
Een string is een tekenreeks oftewel een tekst. Elk teken heeft een index die de positie in de tekst aangeeft. De eerste positie is de nul-positie. De methode indexOf()
geeft de positie van een bepaald teken in de tekst. Als de letter niet gevonden
wordt, is het resultaat -1.
string = 'mijn tekst';
string.indexOf('k'); // retourneert 7
string.indexOf('a'); // retourneert -1
• Opgave 84
Open een nieuw bestand en sla het op als string-methodes.html. Codeer het volgende script:
<!DOCTYPE html>
<html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
 <title>string-methods</title>
 <!--dit script: gebruikt string methodes -->
</head>
<body>
<script>
 var titel = 'javascript';
 document.write('<br>Index van letter s is: ' +
 titel.indexOf('s'));
</script>
</body>
</html>
In dit voorbeeld geeft de methode title.indexOf('s') de positie van de eerst voorkomende letter ‘s’ in de titel ‘javascript’, dus het getal 4.
Het resultaat zie je hieronder:
Index van lett er s is: ξ
We kunnen ook de positie van een woord in een tekst vinden. Dit doen we in de
volgende opgave.
2.15 String-methodes 203
• Opgave 85
Open string-methodes.html en voeg de volgende code eraan toe:
var string =
"dit is een lange tekst met daarin het woord javascript";
In dit voorbeeld codeer je de methode die de positie van het woord javascript
teruggeeft. Zoek ook de positie van het woord HTML. Als het woord niet bestaat
dan is het resultaat -1.
Het resultaat van de opgave zie je hieronder:
Positi e van het woord javascript is: ξν
Positi e van het woord HTML is: -λ
In de volgende opgave gaan we testen wat de naam van de actieve browser is. We
kijken in de property userAgent van het object navigator en zoeken naar de volgende drie woorden:
MSIE
Firefox
Chrome
• Opgave 86
Open string-methodes.html en voeg de volgende code eraan toe:
if(navigator.userAgent.indexOf('MSIE') != -1) {
 document.write('<br>Browser is Internet Explorer');
}
else if(navigator.userAgent.indexOf('Firefox') != -1) {
 document.write('<br>Browser is Firefox');
}
else if(navigator.userAgent.indexOf('Chrome') != -1) {
 document.write('<br>Browser is Google Chrome');
}
Het resultaat van de opgave uitgevoerd met de Firefox-browser zie je hieronder:
Browser is Firefox
In dit voorbeeld geeft de methode indexOf('MSIE') de positie van het woord MSIE
in de property userAgent van het object navigator. Als het resultaat -1 is, betekent
dit dat er geen positie is en dat MSIE niet werd gevonden en dus dat de browser niet
Internet Explorer is. Op dezelfde manier hebben we getest op de browsers Firefox
en Chrome.
204 2 JavaScript
Length
De property length geeft de lengte van een string. In de volgende opgave gebruiken
we de property length van een string-object.
gebruiker = 'supergebruiker';
gebruiker.length // retourneert 14
• Opgave 87
Open string-methodes.html en voeg de volgende code eraan toe:
var titel = 'JavaScript';
Codeer een document.write-opdracht die de property length van de titel weergeeft.
Het resultaat moet het volgende zijn:
De lengte van ti tel is: λκ
charAt()
De methode charAt() geeft het teken op een bepaalde positie in de string. Bijvoorbeeld:
gebruiker = 'supergebruiker';
gebruiker.charAt(4) // retourneert r
• Opgave 88
Open string-methodes.html en voeg de volgende code eraan toe:
var title = 'JavaScript';
var spiegeling = ' '; for(x=0; x < title.length; x++) {
 teken = title.charAt(x);
 spiegeling = teken + spiegeling;
}
document.write('<br>JavaScript gespiegeld: ' + spiegeling);
In dit voorbeeld geeft de methode charAt(x) het teken op positie x. De for-lus leest
elk teken en maakt een nieuwe string in omgekeerde volgorde.
JavaScript gespiegeld: tpircSavaJ
split()
Met de methode split() kun je een lange string splitsen in kleinere strings. De
splitsing is gebaseerd op een teken, bijvoorbeeld een spatie of komma’s. De gesplitste strings worden in een array geplaatst.
2.15 String-methodes 205
namen = 'Jozef, Jan, Umut';
array = namen.split(,);
// retourneert de volgende array:
array[0] = 'Jozef'; array[1] = 'Jan'; array[2] = 'Umut'
• Opgave 89
Open string-methodes.html en voeg de volgende code eraan toe:
var tekst =
'dit is een lange tekst met daarin het woord javascript';
splitsing = tekst.split(' ');
document.write('<br>De resulterende array is: ' + splitsing);
In dit voorbeeld levert de methode split() de volgende array op:
splitsing[0] = 'dit';
splitsing[1] = 'is';
splitsing[2] = 'een';
splitsing[3] = 'lange';
splitsing[4] = 'tekst';
splitsing[5] = 'met';
splitsing[6] = 'daarin';
splitsing[7] = 'het';
splitsing[8] = 'woord';
splitsing[9] = 'javascript';
substring()
De methode substring() levert een deel van een string op. De substring is gebaseerd op een beginindex en een eindindex, bijvoorbeeld:
string = 'abcdefg';
string.substring(3,6) // retourneert 'defg'
Het resultaat hier is de substring die begint met beginindex [3] en eindigt met
eind index [6].
• Opgave 90
Open string-methodes.html en voeg de volgende code eraan toe:
var string =
'dit is een lange string met daarin het woord javascript';
Codeer de substringmethode die de volgende substring vanuit de variabele string
retourneert:
Substring van string: lange string
206 2 JavaScript
substr()
De methode substr() levert ook een deel van een string op. De substring is gebaseerd op een beginindex en een lengte, bijvoorbeeld:
gebruiker = 'supergebruiker';
gebruiker.substr(5,9) // retourneert 'gebruiker';
De methode levert de substring op beginnend met index [5] en lengte 9.
In de volgende opgave gebruiken we de methode substr om het woord javascript
uit de string te verwijderen.
• Opgave 91
Open string-methodes.html en voeg de volgende code eraan toe:
string = string.substr( 0,string.indexOf('javascript')) +
string.substr( string.indexOf('javascript')+10, string.length);
document.write('<br />String is nu: ' + string);
In dit geval gebruik je de methode indexOf() voor het bepalen van de beginpositie
van het woord javascript. Het resultaat zie je hieronder:
String is nu: dit is een lange string met daarin het woord
trim()
De methode trim() verwijdert alle spaties aan het begin en het eind van een string,
bijvoorbeeld:
tekst = ' JavaScript ';
tekst.trim() // retourneert 'JavaScript';
toLowerCase() en toUpperCase()
De methodes toLowerCase() en toUpperCase() veranderen een string in hoofdletters
of in kleine letters, bijvoorbeeld:
naam = 'Marlies' naam.toLowerCase() // retourneert marlies
naam.toUpperCase() // retourneert MARLIES
• Opgave 92
Open string-methodes.html en voeg de volgende code eraan toe:
var cursus = prompt('Kies een van de volgende '+
'cursussen HTML of JavaScript');
if (cursus.toLowerCase() == 'html' ||
 cursus.toLowerCase() == 'javascript') {
 document.write('<br>Je hebt: '+cursus.toUpperCase()+' gekozen.');
} else {
 document.write('<br />Kies een geldige cursus');
}
2.16 Algoritmes 207
In deze opgave gebruiken we de methode toLowerCase() om de invoer van de gebruiker te wijzigen in kleine letters. Het maakt zo niet uit wat de gebruiker typt:
JavaScript, javascript, JAVAscript, HTML of Html, cursus.toUpperCase() zet de
invoer altijd om in hoofdletters: JAVASCRIPT of HTML.
• Lab 15
Bij lab15.html codeer je de functie:
vervangen(docum, woord, nieuwewoord)
Deze functie zoekt een woord in een tekst en vervangt die door het nieuwewoord.
tekst = 'Dit document is een lang document maar ook een simpel document';
function vervangen(tekst,woord,nieuwewoord) {
 . . .
}
resultaat = vervangen(tekst,'document','script');
document.write(resultaat);
Op de puntjes codeer je de functie.
Figuur 2.31
In het resultaat hebben we het woord document vervangen door script.
Dit script is een lang script maar ook een simpel script
 2.16 Algoritmes
In deze paragraaf kijken we naar algoritmes.
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
Opgaven 93 t/m 95
Lab 16
Een algoritme is:
Een set instructies of een lijst van stappen in een bepaalde volgorde binnen een
computerprogramma om een specifi ek probleem op te lossen.
208 2 JavaScript
Deze problemen kunnen van simpel tot zeer complex zijn. Dankzij algoritmes nemen computers besluiten voor ons. Goede algoritmes vormen vaak de basis van
een effi ciënt computerprogramma. Een klassiek voorbeeld van een algoritme in de
informatica is het algoritme binary-search.
Het algoritme binary-search
Het algoritme binary-search is een algoritme dat nauwkeurig de stappen beschrijft
die uitgevoerd moeten worden om een zoekopdracht op te lossen.
In de informatica vindt binary-search de positie van een specifi eke inputwaarde
(de zoeksleutel) binnen een geïndexeerde array [0][1][2]... Het algoritme werkt als
volgt:
1 Het algoritme vergelijkt de zoeksleutel met de middel-index in de array.
2 Als de zoeksleutel en de middel-index overeenkomen, dan is het element gevonden
en de waarde geretourneerd.
3 Als de zoeksleutel kleiner is dan de middel-index, wordt de array gelijk gesteld aan
de eerste helft van de array. Stap 1 wordt herhaald met de eerste helft van de array.
4 Als de zoeksleutel groter is dan de middel-index, wordt de array gelijk gesteld aan
de tweede helft van de array. Stap 1 wordt herhaald met de tweede helft van de
 array.
5 Als de array leeg is wordt ‘Sleutel niet gevonden’ geretourneerd.
Een binary-search halveert het aantal te doorzoeken elementen bij elke herhaling,
zodat het vinden van een element veel minder tijd kost dan als je van voren af de
hele array doorzoekt.
Een voorbeeld
Stel je voor dat je op zoek bent naar sleutel 16 in een array. Dan moet het algoritme
de volgende stappen uitvoeren (zie fi guur 2.32):
1 Vergelijk de sleutel [16] met de middel-index.
2 Als de sleutels overeenkomen is het element gevonden en wordt de waarde geretourneerd.
3. Als de sleutel kleiner is dan de middel-index dan geldt: sub-array = eerste helft van
de array. Herhaal stap 1 met de sub-array (eerste helft).
4. Als de sleutel groter is dan de middel-index dan geldt: sub-array = tweede helft van
de array. Herhaal stap 1 met de sub-array (tweede helft).
5. Als de sub-array leeg is, wordt ‘Sleutel niet gevonden’ geretourneerd.
In de volgende fi guur zie je dat het algoritme 4 keer wordt herhaald voordat de
sleutel [16] gevonden is.
2.16 Algoritmes 209
Figuur 2.32
Pseudocode
Als je een complex algoritme gaat coderen, is het soms handig om eerst met
pseudo code te beginnen. Pseudocode is nog geen programma, maar geeft in grote
lijnen aan wat er moet gebeuren. Hier volgt een voorbeeld van een pseudocode
voor het algoritme binary-search:
BinarySearch(array, key, beginIndex, eindIndex)
if beginIndex > eindIndex
then
 return NIET _ GEVONDEN
else
 middenIndex = (beginIndex+eindIndex) / 2
 if key = middenIndex
 then
 return array[middenIndex]
 else if key < middenIndex
 then
 return BinarySearch(array, key, beginIndex, middenIndex –1)
 else
 return BinarySearch(array, key, middenIndex+1, eindIndex)
Pseudocode kunnen we naar alle programmeertalen vertalen. In de volgende opgave vertalen we de pseudocode naar JavaScript.
• Opgave 93
Open een nieuw bestand en sla het op als binary-search.html. Voeg de volgende
code eraan toe:
<!DOCTYPE html> <html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
 <title>Binary-search</title>
</head>
210 2 JavaScript
<body>
<script>
 var studenten = new Array(16);
 studenten[0] = {'naam':'Navajo', '06':'1234567800'};
 studenten[1] = {'naam':'Zakaria', '06':'1234567801'};
 studenten[2] = {'naam':'Hamsa', '06':'1234567802'};
 studenten[3] = {'naam':'Guus', '06':'1234567803'};
 studenten[4] = {'naam':'Mitchel', '06':'1234567804'};
 studenten[5] = {'naam':'Jan', '06':'1234567805'};
 studenten[6] = {'naam':'Idris', '06':'1234567806'};
 studenten[7] = {'naam':'Kees', '06':'1234567807'};
 studenten[8] = {'naam':'Umut', '06':'1234567808'};
 studenten[9] = {'naam':'Charles', '06':'1234567809'};
 studenten[10] = {'naam':'Pedro', '06':'1234567810'};
 studenten[11] = {'naam':'Joshua', '06':'1234567811'};
 studenten[12] = {'naam':'Angelo', '06':'1234567812'};
 studenten[13] = {'naam':'Peter', '06':'1234567813'};
 studenten[14] = {'naam':'Audi', '06':'1234567814'};
 studenten[15] = {'naam':'Arnold', '06':'1234567815'};
 function zoekalgoritme(studenten, key, imin, imax) {
 // test of array leeg is
 if (imax < imin){
 // array is leeg
 return('Niet gevonden');
 } else {
 imid= Math.ceil(imin + ((imax - imin) / 2));
 // vergelijken
 if (imid > key){
 // zoek in onderste sub-array
 document.write('<br>onderste imin: ' + imin);
 document.write('<br>onderste imid: '+imid);
 return(zoekalgoritme(studenten, key, imin, imid-1));
 }
 else if (imid < key) {
 // zoek in bovenste sub-array
 document.write('<br>bovenste imax: ' + imax);
 ocument.write('<br />bovenste imid: ' + imid);
 return(zoekalgoritme(studenten, key, imid+1, imax));
 } else {
 // key is gevonden
 return(studenten[imid]['naam']+studenten[imid]['06']);
 }
 }
 }
 var id = parseInt(prompt('Zoek student ID'));
 var eindindex = studenten.length;
 document.write('eindindex: '+eindindex + '<br>');
 var beginindex = 0;
 var student=zoekalgoritme(studenten,id,beginindex,eindindex);
 document.write('<br>Student gevonden: ' + student);
</script>
</body>
</html>
2.16 Algoritmes 211
• Opgave 94
Schrijf een algoritme dat een piramide weergeeft. Als bijvoorbeeld het inputgetal 9
is, dan genereert het algoritme een piramide zoals hieronder.
0
01
012
0123
01234
012345
0123456
01234567
012345678
Hieronder schrijven we de pseudocode voor het algoritme:
Voer array lengte in.
Lees lengte.
Maak array(lengte).
Array invullen als volgt:
 for(i=0; 1<=lengte;i++)
 array[i]=i
Voor elke rij
 write-elementen [0] t/m [rij – 1]
Open een nieuw bestand en sla het op als opgave94.html. Schrijf het volgende
script dat gebaseerd is op bovenstaand algoritme.
<!DOCTYPE html>
<html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html; charset=UTF-8">
 <title>Opgave 94</title>
</head>
<body>
<script>
 var lengte = parseInt(prompt('Voer een getal in:'));
 piramide = new Array(lengte);
 for(var i = 0; i <=lengte; i++) {
 piramide[i]= i;
 }
 document.write(piramide);
 for(var rij=1; rij <= lengte; rij++) {
 document.write('<br />');
 for (var i = 0; i < rij; i++) {
 document.write(piramide[i]);
 }
 }
</script>
</body>
</html>
212 2 JavaScript
• Opgave 95
Schrijf een algoritme dat een piramide weergeeft. Als bijvoorbeeld het inputgetal
10 is, dan genereert het algoritme een piramide zoals hieronder.
0123456789
012345678
01234567
0123456
012345
01234
0123
012
01
0
• Lab 16 Kalenderalgoritme
In deze lab-opdracht codeer je het volgende kalenderalgoritme.
Vraag de user naar de maand.
Vraag de user naar het jaar.
Maak een datumobject van jaar, maand en eerste dag.
Wat is de weekdag van de eerste dag van de maand? (zo, ma, ...)
Hoeveel dagen heeft de maand? (28,30,31...)
Geef lege <div>-elementen weer per weekdag vóór de eerste weekdag.
Geef elke dag van de maand in een <div>-element weer.
Het resultaat moet er als volgt uitzien:
Figuur 2.33
2.17 Het Document Object Model 213
 2.17 Het Document Object Model
In deze paragraaf kijken we naar het Document Object Model.
• getelementById
• setTimeout
• clearTimeout
• mouse-events
• form-events
• keyboard-events
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
Opgaven 96 t/m 114
Lab 17
Het Document Object Model (afgekort tot DOM) is een model voor het benaderen
van gestructureerde documenten zoals een HTML-document. Met JavaScript kun
je alle objecten die geassocieerd zijn met je webpagina benaderen en manipuleren.
Om een bepaald object te benaderen, moet je een documenthiërarchie doorlopen
(zie fi guur 2.34).
Figuur 2.34 Hiërarchie van objecten in een formulier
Om bijvoorbeeld de textarea (het tekstveld) in fi guur 2.34 te benaderen, loop je de
volgende hiërarchie door:
window.document.div.form.textarea
214 2 JavaScript
getElementById
Een andere manier om HTML-elementen vanuit JavaScript te benaderen is via het
id-attribuut van het element. Dat doen we met:
getElementById()
Met de opdracht getElementById kun je de attributen van een element wijzigen. Stel
je hebt bijvoorbeeld een <img>-element als volgt in je webpagina gecodeerd:
<img id="image" src="afbeelding.jpg" />
Dan kun je het element met getElementById als volgt manipuleren:
document.getElementById('image').src = 'image.jpg';
Eerst benaderen we het <img>-element door gebruik te maken van het id-attribuut
id="image". Daarna wijzigen we het src-attribuut. Hiermee hebben we aan het
<img>-element een nieuwe afbeelding toegewezen. Het was src="afbeelding.jpg" en
het is src = 'image.jpg' geworden.
DOM-events (gebeurtenis)
Een voorbeeld van een event is wanneer door een gebruiker op een knop wordt
geklikt, of als de waarde van een veld verandert. In JavaScript kunnen we acties
programmeren en deze acties kunnen we koppelen aan events. Zodra een bepaald
event zich voordoet, worden de gekoppelde acties uitgevoerd. Hieronder zie je een
lijst met de verschillende DOM-events:
• window-events
• form-events
• keyboard-events
• mouse-events
In de volgende paragrafen oefenen we met de verschillende DOM-events. We beginnen met de window-events.
Window-events
Window-events zijn events op het niveau van het browservenster of het document.
Hieronder zien we de event-naam en wanneer het event wordt getriggerd of geactiveerd.
Event Betekenis
onload Het javascript wordt geladen
onunload Het javascript wordt ontladen
Je vangt window-events op in de <body>-tag. Bijvoorbeeld:
<body onload="alert('JavaScript wordt geladen')">
2.17 Het Document Object Model 215
Dit is weer een voorbeeld van JavaScript binnen een HTML-tag.
In de volgende opgave coderen we de functie showklok() en koppelen we de functie
aan het onload-event:
<body onload="showklok();">
• Opgave 96
Open een nieuw bestand en sla het op als dom-events.html. Voeg de volgende
code eraan toe:
<!DOCTYPE html>
<html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
 <title>DOM events</title>
 <script src="dom-events.js"></script>
 <script>
 document.write('<form name="klok"> ' + '<input type="text" ' +
 'name="display" '+ 'size="8" '+
 'style="backgroundColor: #30CE28; font-size: 44px" >' + '</form>');
 var nu = new Date();
 var uur = nu.getHours();
 var min = nu.getMinutes();
 var alterneren = 0;
 function showklok() {
 min=((min < 10) ? '0': '') + min;
 if(alterneren) {
 document.klok.display.value=uur + ':' + min;
 alterneren = 0;
 } else {
 document.klok.display.value=uur + ' ' + min;
 alterneren = 1;
 }
 nu = new Date(); uur = nu.getHours(); min = nu.getMinutes();
 setTimeout('showklok()',1000);
 }
 </script>
</head>
<body onload="showklok();">
</body>
</html>
De functie setTimeout()
De functie setTimeout() voert steeds, na een aangegeven aantal milliseconden, een
actie (of je eigen functie) uit. Deze functie heeft twee input-parameters nodig: de
functienaam en het aantal milliseconden voor het herhaaldelijke uitvoeren van de
functie:
setTimeout('functienaam',milliseconden);
216 2 JavaScript
In bovenstaande opgave hebben we de functie showklok() getriggerd met het onload-event van de <body>-tag. Daarna hebben we, binnen deze functie showklok(),
dezelfde functie iedere seconde getriggerd.
Het resultaat van deze opgave zie je hieronder.
Figuur 2.35 Resultaat van de functie showklok()
De functie clearTimeout()
Om een timerfunctie te stoppen, gebruiken we de functie clearTimeout():
clearTimeout(functienaam);
• Opgave 97
Open dom-events.html en zorg ervoor dat je klok ook seconden weergeeft. Het
resultaat moet er als volgt uitzien:
Figuur 2.36 Resultaat van opgave 97
• Opgave 98
Open dom-events.html en voeg binnen het <body>-element het volgende <div>-
element eraan toe:
<body onLoad="showKlok();">
 <div>
 <a href="Javascript: showMedia();">
 <img src="ipad.jpg" id="media" /> </a>
 </div>
</body>
</html>
• Opgave 99
Open een nieuw bestand en sla het op als dom-events.js. Voeg de volgende code
eraan toe:
// Globale variabelen
var afbeeldingen = new Array('galaxy-s4.png','ipad.jpg','laptop.jpg');
var max = afbeeldingen.length;
var randomIndex=0;
function showMedia() {
 randomIndex = Math.floor((Math.random() * max));
 document.getElementById('media').src = afbeeldingen[randomIndex];
}
2.17 Het Document Object Model 217
Het resultaat moet er als volgt uitzien:
Figuur 2.37 Resultaat van opgave 99
• Opgave 100
Open dom-events.js en zorg ervoor dat de functie showMedia() zichzelf om de
500 milliseconden herhaalt. Het resultaat moet zijn dat na een klik op de afbeelding om de 500 milliseconden een nieuwe afbeelding wordt vertoond.
Mouse-events
Je vangt een mouse-event op tijdens het bewegen van de muis.
Bijvoorbeeld:
<img src="beeld1.jpg" onmouseover="mijnfunctie()" >
Hieronder volgt een tabel met de meeste voorkomende mouse-events:
Event Betekenis
onclick op een element wordt geklikt
onmouseup de muisknop wordt losgelaten
onmousedown de muisknop wordt ingedrukt
onmousemove de muis beweegt
onmouseout de muis beweegt weg van een element
onmouseover de muis beweegt over een element
In de volgende opgave vangen we de events mouseover en mouseout op met acties op
een afbeelding.
• Opgave 101
Open dom-events.html en voeg de volgende mouse-events eraan toe:
<img src="ipad.jpg" id="media"
 onmouseover="this.width=this.width*1.5"
 onmouseout="this.width=this.width/1.5" />
Het resultaat moet zijn dat wanneer je met de muis over de afbeelding beweegt de
afbeelding groter wordt; als je met de muis van de afbeelding af beweegt wordt de
afbeelding kleiner.
218 2 JavaScript
Form-events
Form-events zijn events die plaatsvinden binnen formulier-elementen. Hieronder
volgt een tabel met de meest voorkomende form-events. In een formulier is het
inputvakje dat je invult in focus, de anderen zijn buiten focus.
Event Betekenis
onchange een element is gewijzigd
onblur een element raakt buiten focus
onfocus een element heeft de focus
onselect een element is geselecteerd
onsubmit het formulier is verstuurd
onreset het formulier is gereset
Bij de volgende opgaven gebruiken we onderstaand formulier. We zullen zien hoe
we iedere ingevulde waarde in het formulier kunnen benaderen en controleren.
• Opgave 102
Open dom-events.html en voeg het volgende formulier eraan toe:
Figuur 2.38 Een formulier met DOM-elementen
Je vangt form-events op in de <form>-tag. Bijvoorbeeld:
<form onsubmit="mijnfunctie()" name="custform" method="POST">
of
<input type="text" onchange="mijnfunctie()" name="leeftijd">
2.17 Het Document Object Model 219
• Opgave 103
Open dom-events.html en herschrijf de radio-buttons als volgt.
Voeg het volgende onchange-event eraan toe.
<label for="man">Man: </label>
<input type="radio" name="geslacht" id="man" value="m"
onchange="
 if(document.custform.man.checked == true) {
 alert('Welkom meneer!');
 }" />
<label for="vrouw">Vrouw: </label>
<input type="radio" name="geslacht" id="vrouw" value="v"
onchange="
 if(document.custform.vrouw.checked == true) {
 alert('Welkom mevrouw!');
 }" />
In bovenstaande opgave hebben we een welkomstbericht vertoond gebaseerd op
het geslacht van de user.
• Opgave 104
Open dom-events.html en herschrijf het leeftijd-element als volgt:
Voeg het volgende onchange-event eraan toe.
Wanneer de leeftijd verandert en als de leeftijd onder de 17 is, dan alert je: ‘Je bent
leerplichtig!’
Hier controleren we of het veld <input required type="text" id="leeftijd"/> veranderd is. Als dat zo is, testen we of de nieuwe waarde gelijk aan of kleiner dan 17
is. Als dat het geval is maken we een alertbox met de tekst:
'Je bent leerplichtig!'
• Opgave 105
Open dom-events.html en voeg de volgende functionaliteit eraan toe.
Als de leeftijd boven de 55 is, dan verschijnt een alertbox met de melding:
Kijk naar onze seniorenprogramma's!
We zouden allerlei formuliercontroles kunnen uitvoeren binnen een formulier,
maar dan eindigen we met een rommeltje van HTML en JavaScript. Een betere
oplossing is om je JavaScript-controles in een extern bestand te coderen.
In de volgende opgave zorgen we ervoor dat wanneer je op je verzend-knop klikt,
een JavaScript-formuliercontrole wordt uitgevoerd.
220 2 JavaScript
• Opgave 106
Open dom-events.html en voeg de volgende form-events eraan toe:
<input type="submit" id="submit" name="submit"
 value="Verzenden"
 onmouseover="style.color='green'"
 onmouseout="style.color='black'"
/>
Alle verplichte inputvelden en e-mailadressen worden gecontroleerd door HTML5.
Maar we moeten zelf de volgende voorwaarden controleren:
• de postcode mag geen spaties hebben;
• de user moet 20 jaar of ouder zijn;
• wanneer de user een product kiest, maken we een alertbox zoals: ‘Tablet besteld’;
• wanneer de user een bezorgmethode kiest, wordt een beschrijving van de keuze
vertoond.
In de volgende opgave zorgen we ervoor dat wanneer je op de verzendknop klikt,
de functie formcheck() wordt uitgevoerd. Deze functie coderen we ook in de volgende opgaven.
• Opgave 107
Open dom-events.html en verander het <form>-element als volgt:
<form action="mailto: email@adres.nl"
 name="custform"
 method="post"
 onsubmit="return(formcheck(this));">
Hier zeggen we dat het onsubmit-event de functie formcheck() moet uitvoeren. We
zeggen ook dat als de return-waarde van deze functie false is, het formulier niet
wordt verstuurd. In de volgende opgave coderen we de functie formcheck().
• Opgave 108
Open dom-events.js. Codeer de functie formcheck().
function formcheck(thisForm) {
 postcode = thisForm.postcode.value;
 for(var i=0; i < postcode.length; i++) {
 var c = postcode.charAt(i);
 if(c == ' ') {
 alert("Postcode mag geen spaties hebben");
 thisForm.postcode.focus();
 return false;
 }
 }
}
Deze functie controleert of de waarde van het inputveld postcode spaties heeft. Als
dat zo is, wordt een alertbox vertoond en krijgt het inputveld postcode de focus,
omdat de postcode opnieuw mag worden ingetypt.
2.17 Het Document Object Model 221
• Opgave 109
Open dom-events.js en voeg de volgende functionaliteit eraan toe.
Zorg ervoor dat de functie formcheck() controleert of de leeftijd onder de 20 jaar
is en dat in dat geval de melding ‘Je moet 20 jaar of ouder zijn’ wordt vertoond. De
returnwaarde moet false zijn en je moet teruggaan naar het formulier met de focus op het leeftijdveld.
De status van een checkbox kunnen we ook controleren. Zo kunnen we bepalen
welke opties de user heeft aangevinkt. In de volgende opgave kijken we naar drie
elementen <input type="checkbox" name="gadget">. Het <form>-element heeft een
array met de namen van alle formulier-elementen. De drie checkboxes kunnen we
als volgt benaderen:
document.custform.gadget[0]
document.custform.gadget[1]
document.custform.gadget[2]
• Opgave 110
Open dom-events.html en voeg de volgende functionaliteit eraan toe:
<input type="checkbox"
 name="gadget"
 id="smartphone"
 value="s"
 onchange="
 if(document.custform.gadget[0].checked)
 {
 alert('Smartphone besteld!');
 }"
/>
Maak deze opgave af door alertboxes te maken voor ‘Laptop besteld!’ en ‘Tablet
besteld!’.
Als laatste controleren we het menu met bezorgmethodes. In de volgende opgave
controleren we of de bezorging ‘expres’ geselecteerd is. Als dat zo is dan vertonen
we meer informatie over deze keuze.
• Opgave 111
Open dom-events.html en voeg de volgende functionaliteit eraan toe:
<select onchange="
 if(document.custform.bezorging.value == 'express') {
 getElementById('expres-info').style.display='block';
 getElementById('dag-info').style.display='none';
 getElementById('week-info').style.display='none';
 }"
name="bezorging" >
Maak het <select>-element af met de drie opties 'express', 'dag' en 'week'.
222 2 JavaScript
• Vervolg
Open dom-events.html en voeg de volgende <div>-elementen toe:
 <br />
 <div id="expres-info" style="display:none">Express bestelling</div>
 <div id="dag-info" style="display:none">Dag bestelling</div>
 <div id="week-info" style="display:none">Week bestelling</div>
 <br />
• Opgave 112
Open dom-events.html en zorg ervoor dat indien gekozen, de elementen dag-info
en week-info worden weergegeven.
Keyboard-events
Keyboard-events zijn events die plaatsvinden wanneer je een toets op het toetsenbord drukt. Hieronder volgt een tabel met de meest voorkomende keyboardevents:
Event Betekenis
onkeydown een toets wordt ingedrukt
onkeypress een toets wordt ingedrukt en losgelaten
onkeyup een toets wordt losgelaten
Je vangt een keyboard-event op tijdens het tikken in een input-vak. Bijvoorbeeld:
<input type="text" name="leeftijd" onkeyup="mijnfunctie()">
In de volgende opgave vangen we een onkeyup-event op met de functie herhaling().
De functie zorgt ervoor dat als je je wachtwoord intikt, elke tik in het tweede
wachtwoordveld wordt herhaald.
• Opgave 113
Open dom-events.html en codeer een onkeyup-event als volgt:
<input required type="password" id="password"
placeholder="vul uw wachtwoord in"
onkeyup="herhalen()" />
• Opgave 114
Open dom-events.js en codeer de functie herhalen() als volgt:
function herhalen(){
 document.custform.password2.value =
 document.custform.password.value;
}
2.18 Cookies 223
• Lab 17 Lingospel
In deze lab-opdracht codeer je het volgende lingospel algoritme.
Figuur 2.39
Maak een steden-array.
Kies een willekeurige stad.
Laat de speler het aantal letters zien, bijvoorbeeld ??????
Laat de speler een eerste gok doen.
Laat de speler de juist gegokte letters zien, bijvoorbeeld ?a???
Laat de speler vier keer gokken.
Verzin een puntensysteem.
Het resultaat moet er als volgt uitzien:
Figuur 2.40
 2.18 Cookies
In deze paragraaf kijken we naar cookies.
• cookies maken
• cookies lezen
• cookies verwijderen
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
224 2 JavaScript
Planning Inleveren
Opgaven 115 t/m 118
Lab 18
Webpagina’s zijn stateless. Dat betekent dat webpagina’s geen geheugen hebben.
Een webpagina weet dus niets van de vorige webpagina. Met andere woorden, de
tweede, derde of honderdste keer dat je een webpagina bezoekt, is voor de website
net alsof het de eerste keer is. Dit is een probleem als je informatie van de ene webpagina naar de andere wilt sturen. Om dit probleem op te lossen heeft Netscape
cookies ontwikkeld. Met JavaScript kunnen we cookies maken, lezen en verwijderen.
Hoe werk je met cookies?
Een cookie is een ‘naam-waarde-construct’. Als je informatie tijdelijk wilt bewaren
maak je een cookie. Een cookie moet een naam en een waarde hebben. Cookies
worden op de harde schijf van de gebruiker opgeslagen als een tekstbestand. Een
cookie maak je op de volgende manier:
document.cookie =
'naam=waarde; expires=Thu, 2 Aug 2014 20:47:11 UTC; path=/'
Je kunt de volgende stappen herkennen.
Eerst geef je een cookie een naam en waarde:
naam=waarde;
Vervolgens geef je de verloopdatum. Na deze datum wordt de cookie door de
browser verwijderd, bijvoorbeeld:
expires= Thu, 2 Aug 2014 20:33:03 UTC;
Ten slotte geef je het pad naar je cookies: path=/. Deze property bepaalt de scope
van de cookies. De scope bestaat uit de domeinnaam en de webpagina die de cookies aanmaakt. Bijvoorbeeld: path=/voorbeeld.com/home.
Een cookie voor de user maak je bijvoorbeeld als volgt:
document.cookie =
'user=admin; expires=Thu, 2 Aug 2014 20:47:11 UTC; path=/'
Een tweede cookie voor het wachtwoord maak je zo:
document.cookie =
'password=123; expires=Thu, 2 Aug 2014 20:47:11 UTC; path=/'
Je mag de waarde van een cookie wijzigen door dezelfde cookie opnieuw te maken,
bijvoorbeeld:
2.18 Cookies 225
document.cookie =
'password=9u23Qf;expires=Thu,2 Aug 2014 20:47:11 UTC;path=/'
Om een cookie te verwijderen, zet je de verloopdatum naar een datum eerder dan
vandaag. De browser ziet dan dat de cookie is verlopen en vervolgens wordt de
cookie verwijderd. Bijvoorbeeld:
document.cookie =
'password=9u23Qf;expires=Wed,1 Aug 2014 20:47:11 UTC;path=/'
JavaScript met cookies
Met JavaScript kunnen we cookies maken, lezen, wijzigen en verwijderen. Deze
cookies zijn dan beschikbaar voor de duur van je browsersessie. In de volgende
opgave maken we een functie die nieuwe cookies aanmaakt.
• Opgave 115
Codeer het volgende script en sla het op als cookiefuncties.js.
// function: maakCookie
// parameters: naam, waarde, dagen
// return:
// doel: een cookie maken
function maakCookie(naam, waarde, dagen) {
 if (dagen) {
 var datum = new Date();
 datum.setTime(datum.getTime()+(dagen*24*60*60*1000));
 var verloopdatum = '; expires= ' + datum.toGMTString();
 } else {
 var verloopdatum = '';
 }
 document.cookie = naam+'='+waarde+verloopdatum+';path=/';
}
LET OP
Om cookies te maken in je browser moet je soms de instellingen wijzigen om lokale bestanden te kunnen maken.
Om deze functie te gebruiken, moet je drie stukken informatie via de parameters
doorgeven: de naam, de waarde en het aantal dagen dat de cookie actief moet blijven. Bijvoorbeeld:
maakCookie('user','administrator',7);
Deze opdracht maakt de cookie user met de waarde administrator met een houdbaarheid van zeven dagen. In de volgende opgave maken we een inlogscript.
226 2 JavaScript
• Opgave 116
Typ het volgende over en sla het op als inloggen.html.
<!DOCTYPE html>
<html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8" />
 <title>Inlogscript</title>
<script src="cookiefuncties.js"> </script>
<style>
 div{
 height: 120px;
 width: 200px;
 padding: 20px;
 border-width: 1px;
 border-style: solid;
 border-color: gray;
 border-radius: 5%;
 backgroundColor: rgb(217,217,0);
 }
</style>
</head>
<body>
<div>
<form
 name="inlog"
 action="welkom.html"
 method="POST"
onsubmit=
"maakCookie('user',document.inlog.user.value,1);
maakCookie('password',document.inlog.password.value,1);">
 Email-adres:
 <input type="email" size="20" id="user" />
 Wachtwoord:
 <input type="password" size="20" id="password" />
 <hr />
 <input type="submit" value="Verzenden"/>
 </form>
 </div>
</body>
</html>
De <hr/>-tag gebruiken we voor een horizontale lijn. Het resultaat zie je hieronder.
Figuur 2.41 Inlogformulier
2.18 Cookies 227
In de vorige opgave hebben we een inlogscript gecodeerd. Op het moment van het
onsubmit-event maken we de user-cookie en de password-cookie aan.
Dit inlogscript wordt daarna gelinkt met de volgende pagina welkom.html.
• Opgave 117
Open een nieuw bestand en sla het op als welkom.html. Codeer de volgende welkomstpagina:
<!DOCTYPE html>
<html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8" />
 <title>Welkom</title>
<script src="cookiefuncties.js"></script>
</head>
<body>
 <script>
 var newuser = leesCookie('user');
 document.write('Welkom ' + newuser + ' u bent ingelogd!!!');
 </script>
</body>
</html>
In deze pagina willen we in cookiefuncties.js de functie leesCookie() uitvoeren.
Deze functie moet de naam van de gebruiker vanuit de user-cookie lezen om de
gebruiker te verwelkomen. De functie leesCookie() coderen we in de volgende opgave:
• Opgave 118
Open cookiefuncties.js en voeg de volgende functie eraan toe:
// function: leesCookie
// parameters: naam
// return: waarde van de cookie
// doel: de waarde van een cookie retourneren
function leesCookie(naam){
 var naamCookie = naam + '=';
 var cookieArray = document.cookie.split(';');
 for(var i=0; i < cookieArray.length; i++){
 var dezeCookie = cookieArray[i];
 dezeCookie = dezeCookie.trim();
 if (dezeCookie.indexOf(naamCookie) == 0) {
 return dezeCookie.substring(naamCookie.length,dezeCookie.length);
 }
 }
 return null;
}
Om deze functie te gebruiken, moet je de naam van een cookie via de input-parameter doorgeven. Bijvoorbeeld:
228 2 JavaScript
gebruikersnaam = leesCookie('user');
zal de waarde van de cookie user retourneren. Dit gebeurt als volgt:
Met de functie split() maak je een array met daarin alle cookies.
Met de for-lus zoek je alle cookies in je array.
Met de if-opdracht en de functie indexOf() controleer je of de naam van de cookie
gelijk is aan 'user'.
Met return levert dit je de waarde van de cookie.
Browser en cookies
Als je nu op Control-Shift-C drukt verschijnt het volgende beeldscherm in je
Chrome-browser. Klik je op Resources en vervolgens op Cookies, dan zie je de net
aangemaakte cookies zoals in het volgende venster.
Figuur 2.42 Cookies tonen
Controleer in je eigen browser of de cookie ‘user’ inderdaad is aangemaakt. Klik op
Privacy en op de link Individuele cookies verwijderen en als het goed is zie je hier
de twee cookies ‘user’ en ‘password’ die je net gemaakt hebt. In de volgende opgave
maken we een functie om cookies te verwijderen.
• Lab 18
Open cookiefuncties.js en voeg de volgende functie eraan toe.
Maak de functie verwijderCookie() – hierin zet je de verloopdatum naar een dag
eerder. Als de browser ziet dat de datum verlopen is, wordt de cookie verwijderd.
Maak een <a>-link vanuit de pagina welkom.html naar een pagina uitloggen.html.
Maak de pagina uitloggen.html. In deze pagina voer je de functie verwijderCookie() uit om de cookies ‘user’ en ‘password’ te verwijderen. Toon de volgende
tekst: ‘U bent uitgelogd en cookies zijn verwijderd.’
2.19 Een winkelwagentje in JavaScript 229
 2.19 Een winkelwagentje in JavaScript
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
Opgaven 119 t/m 123
Lab 19
In dit project maken we een winkelwagentje oftewel shopping cart, een client-side
winkelwagenapplicatie met JavaScript voor een webwinkel. Begin met het coderen
van de volgende scripts. Gebruik je eigen afbeeldingen en knoppen.
• Opgave 119
Dit eerste script sla je op als xxlcomputers.html:
<!DOCTYPE html>
<html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8" />
 <script src="cookiefuncties.js"> </script>
 <script src ="shoppingcart.js"> </script>
</head>
<body>
<img src="toshiba.jpg" alt=" " />
<p>Toshiba Satellite A100 Prijs 999.99</p>
<form name="orderform"
 action="managecart.html"
 method="get"
 onsubmit="bestellen(this);">
 Aantal:
 <input type="text" size=2 id="aantal" value="1" />
 <input type="image" src="images/cart.jpg" />
 <input type="hidden" id="id" value=1 />
 <input type="hidden" id="merk" value="Toshiba" />
 <input type="hidden" id="model" value="Satellite" />
 <input type="hidden" id="prijs" value="999.99" />
</form>
<hr />
<img src="acer.jpg" alt=" " />
<p>Acer Aspire 3072 MB - 160 GB Prijs 529.00</p>
<form name="orderform"
 action="managecart.html"
 method="get"
 onsubmit="bestellen(this);">
 Aantal:
 <input type="text" size=2 id="aantal" value="1" />
 <input type="image" src="images/cart.jpg" />
 <input type="hidden" id="id" value=2 />
230 2 JavaScript
 <input type="hidden" id="merk" value="Acer" />
 <input type="hidden" id="model" value="Aspire" />
 <input type="hidden" id="prijs" value="529.99" />
</form>
<hr />
</body>
</html>
In dit script maken we twee bestelformulieren. Van de formulieren zijn maar een
paar elementen zichtbaar. De andere elementen zijn van het type="hidden". Na het
klikken op de bestelknop worden de gegevens aan het winkelwagentje toegevoegd
met onsubmit="bestellen(this)". Daarna wordt het winkelwagentje weergegeven
met action="manageCart.html". Het resultaat van de pagina xxlcomputers.html
moet er zo uitzien:
Figuur 2.43 Het winkelwagentje van xxlcomputers.html
• Opgave 120
Nu gaan we wat functies toevoegen aan het winkelwagentje. Typ het volgende over
en sla het op als shoppingcart.js:
// FUNCTION: bestellen
// PARAMETERS: Form Object
// RETURNS: Cookie met bestelling info...
// PURPOSE: cookie maken met info bestelde item
function bestellen(thisForm){
 productInfo =
 thisForm.id.value + '|' +
 thisForm.merk.value + '|'+
 thisForm.model.value + '|'+
 thisForm.prijs.value + '|' +
 thisForm.aantal.value;
2.19 Een winkelwagentje in JavaScript 231
 maakCookie (thisForm.id.value, productInfo,1);
 notice = thisForm.aantal.value + ' ' +
 thisForm.merk.value +
 ' in winkelwagen.';
 alert(notice);
}
In dit script maakt de functie bestellen() een cookie met de naam afkomstig uit
het html-element id en met gegevens van het bestelde item:
maakCookie(thisForm.id.value, productInfo,1);
Klik je bijvoorbeeld op de winkelwagentjesknop, dan wordt een cookie gemaakt
met de naam van de id en met de gegevens van de laptop.
• Opgave 121
Open shoppingcart.js en voeg de volgende functie eraan toe:
// FUNCTION: cartWeergeven
// PARAMETERS: Null
// RETURNS: Productentabel
// PURPOSE: Geeft productentabel weer in html
// formaat
function cartWeergeven() {
 tabelrij = '';
 for(i = 0; i <= 6; i++){
 dezeCookie = leesCookie(i);
 if(dezeCookie == null || dezeCookie == 'niet-gevonden')
 {continue;}
 velden = new Array();
 velden = dezeCookie.split('|');
 tabelrij += '<tr>'+
 '<td>' + velden[0] + '</td>' +
 '<td>' + velden[1] + '</td>' +
 '<td>' + velden[2] + '</td>' +
 '<td>' + velden[3] + '</td>' +
 '<td>' + velden[4] + '</td>' +
 '</tr>';
 }
 document.write(tabelrij);
}
In bovenstaand script gebruikt de functie cartWeergeven() een for-lus om alle cookies te lezen en in tabelvorm weer te geven. In deze for()-lus kun je maximaal zes
verschillende laptops bestellen.
232 2 JavaScript
• Opgave 122
Typ het volgende over en sla het op als managecart.html:
<!DOCTYPE html>
<html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8" />
 <title>Manage Cart</title>
 <script src="cookiefuncties.js"> </script>
 <script src ="shoppingcart.js"> </script>
 <style>
 table{
 width: 70%;
 border-style: solid;
 }
 th{
 backgroundColor: #cccccc;
 }
 td{
 width: 25%;
 font-weight: bold;
 text-align: center;
 }
 input{
 backgroundColor: bisque;
 }
 </style>
</head>
<body>
 <p>Overzicht van Uw shoppingcart:</p>
 <form action="mailto: webshop@xxlcomputers.nl"
 enctype="text/plain"
 onSubmit="return checkForm(this);"
 method="post">
 <table><tr>
 <th> ID </th>
 <th> Merk </th>
 <th> Model </th>
 <th> Prijs </th>
 <th> Aantal </th>
 </tr>
 <script>
 cartWeergeven();
 </script>
</table>
<br /><br />
</form>
</body>
</html>
2.19 Een winkelwagentje in JavaScript 233
Figuur 2.44 Het resultaat van managecart.html
Maak managecart.html af en voeg het bestelformulier toe zoals hier boven. Voeg
ook een link toe om terug te gaan naar de productenpagina.
Klanten willen hun bestelling ook wel eens aanpassen of verwijderen. We voegen
nog een functie toe om de winkelwagen leeg te maken.
• Opgave 123
Open shoppingcart.js en voeg de volgende functie eraan toe:
// FUNCTION: verwijderAlleCookies
// PARAMETERS: Null
// RETURNS: Null
// PURPOSE: Alle cookies verwijderen
function verwijderAlleCookies() {
 for(i = 1; i <= 6; i++){
 verwijderCookie(i);
 }
}
Bovenstaande functie verwijderAlleCookies() gebruikt een for-lus om alle cookies
te verwijderen. Kopel deze functie aan de link Leeg maken.
• Lab 19
Om deze applicatie af te ronden maak je het volgende:
• Voeg drie nieuwe laptops toe.
• Voeg een nieuw gegeven Geheugen toe voor alle producten, bijvoorbeeld: 4 GB of
8 GB.
234 2 JavaScript
• Voeg een nieuwe kolom Bedrag (prijs * aantal) toe aan de functie cartWeergeven().
• Voeg een nieuwe kolom Del toe aan de functie cartWeergeven().
Plaats hier een afbeelding. Koppel hieraan de functie verwijderCookie(), zodat als
op de afbeelding wordt geklikt, de desbetreff ende laptop verwijderd wordt uit het
winkelwagentje. Het resultaat moet er als volgt uitzien:
Figuur 2.45 Het resultaat van Lab 19
235
 3 OOP in JavaScript
De opkomst van objectgeoriënteerd programmeren (afgekort tot OOP) was een
‘paradigmaverschuiving’, dat wil zeggen: een totaal andere stijl van programmeren.
OOP is in de jaren zestig ontwikkeld en tegenwoordig zie je OOP in veel talen,
zoals JAVA, C, C++, Phyton, PHP en JavaScript.
 3.1 Het UML class-diagram
In deze paragraaf behandelen we de volgende objectgeoriënteerde programmeerconcepten:
• classes
• properties
• methodes
• sub-classes
• inheritance
Aan het einde van deze paragraaf laat je de volgende opgave door je docent controleren:
Planning Inleveren
Lab 01
Het basis-block van OOP is de class. Om classes te begrijpen kijken we eerst naar
een UML class-diagram. UML is een afkorting voor Unifi ed Modeling Language.
Het is een modelleertaal die gebruikmaakt van grafi sche notatie om modellen te
ontwerpen. Die modellen ontwerpen we in diagrammen zoals:
• use-case-diagram
• sequence-diagram
• activity-diagram
• class-diagram
Voor OOP is het class-diagram het belangrijkst. Een UML class-diagram is een
statisch model voor het beschrijven van de objecten in een systeem. Een class beschrijft de structuur en de eigenschapen (properties) en tevens de functies (methodes) van een object. Deze beschrijft ook de relaties tussen de objecten. We tekenen
een class-diagram als een rechthoek met drie vakken: een vak voor de naam van
de class, een vak voor de properties en een vak voor de methodes van de class. In
fi guur 3.1 zie je een voorbeeld van een class-diagram.
236 3 OOP in JavaScript
Figuur 3.1 Class-diagram
Class met properties
Een class kan properties en methodes hebben. In fi guur 3.2 zie je een class-diagram
voor een class met de naam Persoon en de properties naam, leeftijd en geslacht. De
naam van de class begint altijd met een hoofdletter.
Figuur 3.2 Class met properties
Class met methodes
Een class kan methodes hebben. We gebruiken methodes meestal om de properties
(data) van de class te verwerken. In fi guur 3.3 zie je een class-diagram voor de class
Persoon met de methode getNaam():
Figuur 3.3 Class met Method
Properties en methodes met twee of meer woorden, zoals de methode getNaam(),
schrijven we in camelCase. Dat wil zeggen: zonder spaties en de eerste letter van
het tweede woord krijgt een hoofdletter, dus getNaam(). Hier kunnen we in een
class de data en de logica die de data verwerk bundelen.
Subclass
Een class is een algemene beschrijving van een groep objecten. Een subclass is een
meer specifi eke beschrijving van een class. Een subclass noemen we ook een childclass.
3.2 Het factory pattern 237
Figuur 3.4 Parent en child-classes
• Lab 01
Maak een class-diagram voor de class rekenmachine. Bedenk de properties en de
methodes die bij een rekenmachine een rol spelen.
 3.2 Het factory pattern
Een object is een voorbeeld van een class. Als we eenmaal een class gedefi nieerd
hebben, kunnen we een of meer objecten uit de class maken. Een class is dan de
blauwdruk voor het bouwen van objecten. Bijvoorbeeld de class Voertuig is een
algemene beschrijving van verschillende voertuigobjecten. De subclass Trein is een
specifi eke beschrijving van een voertuigobject. Het object trein NS09374364 is een
voorbeeld van de class Voertuig en de subclass Trein.
In deze paragraaf behandelen we de volgende objectgeoriënteerde programmeerconcepten:
• factory pattern
• destructors
• properties wijzigen
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
Opgaven 1 t/m 2
Lab 02
238 3 OOP in JavaScript
JavaScript is een prototype-gebaseerde scripting-taal. JavaScript heeft geen classopdracht zoals Java of C.
• In JavaScript zijn functies fi rst-class citizens.
• Een class defi niëren we met constructor-functies.
• Een functie is een object.
Er zijn drie manieren om objecten te maken in JavaScript:
• factory-pattern
• constructor-pattern
• prototype-pattern
Met het factory-pattern creëren we een model om vervolgens objecten te kunnen maken. In de volgende opgave maken we de factory-pattern PlayerFactory. De
constructor is een function die een factory-pattern construeert. Daarna gaan we
vanuit deze constructor twee objecten construeren: een audioPlayer en een videoPlayer.
• Opgave 1
Maak een nieuw script en voeg de volgende code eraan toe. Sla het op als
oop-patterns.html.
<script>
// opgave 1
var PlayerFactory = function(media){
 var obj = {};
 obj.backgroundColor = "blue";
 obj.getColor = function(){
 return obj.backgroundColor;
 };
 obj.setColor = function(color){
 obj.backgroundColor = color;
 };
 obj.media = media;
 obj.play = function(media){};
 obj.pause = function(media){};
 return obj;
};
var audioPlayer = PlayerFactory('2121.mp3');
var videoPlayer = PlayerFactory('juanes.mp4');
</script>
Een nieuw object moet gebaseerd zijn op een bestaand model. Hier hebben we het
object audioPlayer gemaakt. Het is een object dat afstamt van de PlayerFactory. Een
constructor begint altijd met een hoofdletter, en het geconstrueerde object met een
kleine letter.
3.2 Het factory pattern 239
De input-parameter in audioPlayer is de media. We hebben hier ook het object
video Player gemaakt. Alle twee objecten krijgen alle properties en alle methodes
uit de PlayerFactory. Bijvoorbeeld, de property:
 obj.backgroundColor = "blue";
En de methode:
 obj.getColor = function(){
 return obj.backgroundColor;
 };
We gaan nu testen of de twee objecten audioPlayer en videoPlayer de properties en
de objecten vanuit de PlayerFactory hebben gekregen.
• Opgave 2
Open oop-patterns.html en voeg de volgende code eraan toe.
// opgave 2
console.log('Opgave 2');
audioPlayer.setColor('red');
console.log(audioPlayer.getColor());
console.log(videoPlayer.getColor());
Klik Control-Shift-C om de console van je browser te openen. Het resultaat in de
console zie je hieronder:
Opgave μ
red
blue
Destructor
Ongebruikte objecten veroorzaken verlies van geheugencapaciteit (memory leaks).
JavaScript heeft geen destructormethode zoals PHP, Java of C. JavaScript-objecten
worden automatisch verwijderd wanneer we de webpagina verlaten.
Object-properties wijzigen
Een manier om de properties van een object te benaderen is door chaining (bijvoorbeeld een methode of een property aan een object verbinden). Bijvoorbeeld:
audioPlayer.backgroundColor = 'green';
Een tweede manier om de properties van een object te benaderen en te wijzigen, is
met get/set-methodes. Get/set-methodes zijn lokale methodes die specifi eke toegang bieden tot de lokale properties van een object. In de vorige opgave hebben we
de volgende get/set-methodes gecodeerd:
240 3 OOP in JavaScript
 obj.getColor = function(){
 return obj.backgroundColor;
 };
 obj.setColor = function(color){
 obj.backgroundColor = color;
 };
Deze methodes kunnen we als volgt gebruiken:
audioPlayer.setColor('green');
• Lab 02
Codeer een factory-pattern gebaseerd op het class-diagram van de rekenmachine
uit Lab 01.
 3.3 Constructor-pattern
Het tweede pattern is het constructor-pattern. JavaScript-objecten zijn dynamisch,
dat wil zeggen: je kunt nieuwe properties en methodes toevoegen aan een bestaand
object (andere programeer talen kunnen dat niet). Dit kan gevaarlijk zijn, want je
kunt ongewild de structuur van een object wijzigen. Dit betekent dat je je scripts in
Java Script moet blijven testen om foute syntaxis en logische fouten te voorkomen.
Als je dit zorgvuldig doet, krijg je nieuwe mogelijkheden om dynamische objecten
en applicaties te ontwikkelen.
In deze paragraaf behandelen we het constructor-pattern, een volgend objectgeoriën teerd programmeerconcept.
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
Opgaven 3 t/m 4
Lab 03
Net zoals arrays en strings zijn functies in JavaScript ook objecten. We kunnen een
functie-object als volgt coderen:
hallo = function() {alert("Hallo wereld");}
Dit is hetzelfde als:
function hallo() {alert("Hallo wereld");}
In beide gevallen wordt het nieuwe object hallo aangemaakt. In de volgende opgave coderen we een constructor-functie voor het constructor-pattern en daarna
de objecten die afstammen uit de constructor-functie.
3.3 Constructor-pattern 241
• Opgave 3
Open oop-patterns.html en voeg de volgende code eraan toe.
// opgave 3
var PlayerConstructor = function(media){
 this.media = media;
 this.backgroundColor = "blue";
 this.getColor = function(){
 return this.backgroundColor
 };
 this.setColor = function(color){
 this.backgroundColor = color;
 };
 this.play = function(media){};
 this.pause = function(media){};
};
var audioPlayer = new PlayerConstructor('2121.pm3');
var videoPlayer = new PlayerConstructor('juanes.mp4');
Om objecten te maken uit de PlayerConstructor gebruiken we het keyword new.
We kunnen overigens testen of onze twee objecten de properties en de methodes
vanuit de PlayerConstructor gekregen hebben.
• Opgave 4
Open oop-patterns.html en voeg de volgende code eraan toe.
// opgave 4
console.log('Opgave 4');
audioPlayer.setColor("red");
console.log(audioPlayer.getColor());
console.log(videoPlayer.getColor());
Het resultaat in de console zie je hieronder:
Opgave ξ
red
blue
• Lab 03
Codeer een constructor-functie gebaseerd op het rekenmachine class-diagram uit
Lab 01.
242 3 OOP in JavaScript
 3.4 Prototype-pattern
Het prototype-pattern in JavaScript reserveert een spacename of ruimte waar objecten properties en methodes kunnen delen. Het voordeel hiervan is dat de methodes eenmalig worden gemaakt. Dit in tegenstelling tot de factory- of constructor-patterns waar de methodes bij elk object zijn geko pieerd.
In deze paragraaf behandelen we de volgende objectgeoriënteerde programmeerconcepten:
• prototype-pattern
• objectcommunicatie
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
Opgaven 5 t/m 7
Lab 04
In de volgende opgave coderen we een prototype-pattern en daarna twee objecten
die afstammen van de prototype-pattern.
• Opgave 5
Open oop-patterns.html en voeg de volgende code eraan toe.
// opgave 5
var ProtoPlayer = function(){};
ProtoPlayer.prototype.versie = "1.0";
ProtoPlayer.prototype.backgroundColor = "blue";
ProtoPlayer.prototype.setColor = function(color){
 this.backgroundColor = color;
};
ProtoPlayer.prototype.getColor = function(){
 return this.backgroundColor;
};
ProtoPlayer.prototype.play = function(media){
 return this.media;
};
In deze opgave hebben we een lege ProtoPlayer-constructor als volgt gemaakt:
var ProtoPlayer = function(){};
Daarna hebben we een prototype-ruimte gemaakt voor deze constructor. Vervolgens hebben we de property backgroundColor in de prototype-ruimte als volgt
gemaakt:
ProtoPlayer.prototype.backgroundColor = "blue";
3.4 Prototype-pattern 243
Uiteindelijk hebben we de methodes setColor, getColor en play aan het prototype
toegevoegd. Dat betekent dat alle objecten die van de lege ProtoPlayer-constructor
afstammen de methodes uit het gedeelde prototype mogen gebruiken.
• Opgave 6
Open oop-patterns.html en voeg de volgende code eraan toe.
// opgave 6
var audioPlayer = new ProtoPlayer();
audioPlayer.media = '2121.mp3';
console.log('Opgave 6');
console.log('versie' in audioPlayer);
console.log('prijs' in audioPlayer);
console.log('backgroundColor' in audioPlayer);
console.log(audioPlayer.hasOwnProperty('backgroundColor'));
Het resultaat in de console zie je hieronder:
Opgave π
true
false
true
false
Hier zien we dat versie een property is van het audioPlayer-object, maar prijs niet.
De backgroundColor is wel een property in het audioPlayer-object, maar geen eigen
property. Deze komt vanuit de prototype-ruimte.
Objecten kunnen berichten naar elkaar sturen
We kunnen methodes coderen die het mogelijk maken om berichten naar elkaar te
sturen. In de volgende opgave coderen we de methode getObjectColor.
• Opgave 7
Open oop-patterns.html en voeg de volgende code eraan toe.
// opgave 7
console.log('Opgave 7');
ProtoPlayer.prototype.getObjectColor = function(obj){
 return obj.backgroundColor;
};
var videoPlayer = new ProtoPlayer();
videoPlayer.media = 'juanes.mp4';
videoPlayer.backgroundColor = 'green';
console.log(audioPlayer.getObjectColor(videoPlayer));
console.log(videoPlayer.getObjectColor(audioPlayer));
244 3 OOP in JavaScript
Het resultaat in de console zie je hieronder:
Opgave ρ
green
blue
Hier zien we dat object videoPlayer zijn kleur heeft doorgegeven aan het object
audioPlayer en andersom.
• Lab 04
In deze lab-opdracht codeer je een constructor-functie voor het protoype-pattern
gebaseerd op het rekenmachine-class-diagram uit Lab 01.
 3.5 Inheritance (overerven)
In OOP hebben we superclasses. Die noemen we de parent-class. We kunnen ook
subclasses of child-classes defi niëren.
In deze paragraaf behandelen we de volgende objectgeoriënteerde programmeerconcepten:
• overerven (inheritance)
• overschrijven methodes
• encapsulation
• delete
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
Opgaven 8 t/m 11
Lab 05
De child-classes erven van de parent-classes door middel van inheritance of erfenis.
In het volgende class-diagram zie je dat de class MiniPlayer een child-class is van de
class ProtoPlayer. We zeggen: de class MiniPlayer extends de class ProtoPlayer. De
child-class MiniPlayer erft alle properties en methodes van de parent-class ProtoPlayer. We noemen deze relatie een: is-een-relatie. Bijvoorbeeld, een MiniPlayer
is-een ProtoPlayer.
3.5 Inheritance (overerven) 245
Figuur 3.5 Parent en child-classes
In de vorige fi guur zien we dat we meerdere objecten kunnen maken uit de MiniPlayer child-constructor.
In JavaScript mogen we parent-constructors en child-constructors creëren. Maar
we kunnen geen grand-child-constructors maken omdat JavaScript ‘single inheritance’ is.
In de volgende opgave maken we de child-constructor MiniPlayer uit de ProtoPlayer parent-constructor.
• Opgave 8
Open oo-patterns.html en voeg de volgende code eraan toe.
// opgave 8
// child constructor
function MiniPlayer(){
 // call parent constructor
 ProtoPlayer.call(this);
 // eigen property
 this.versie = '2.0';
};
// laat de child-constructor de prototyperuimte van
// de parent delen
MiniPlayer.prototype = Object.create(ProtoPlayer.prototype);
Door het delen van de prototyperuimte heeft de MiniPlayer-constructor de properties en methodes uit de ProtoPlayer-constructor geërfd, behalve de property-versie.
Deze property was namelijk gedefi nieerd als privé met het var-keyword. De MiniPlayer-constructor heeft een eigen versie-property.
246 3 OOP in JavaScript
Overschrijven van parent-methodes
Soms is het noodzakelijk om overgeërfde parent-methodes te herdefi niëren. Dan
overschrijven we deze methodes met meer specifi eke functionaliteit in de childclass. In de volgende opgave krijgen de get/set-methodes in de child-class nieuwe
functionaliteit. Deze methodes overschrijven de parent-methodes.
• Opgave 9
Open oo-patterns.html en voeg de volgende code eraan toe.
// opgave 9
//methode overschrijven
MiniPlayer.prototype.play = function(){
 return 'Now playing ... ' + this.media;
};
// voeg een nieuwe methode
MiniPlayer.prototype.pause = function(){
 return 'Pause ... ' + this.media;
};
// maak een child object
var miniPlayer = new MiniPlayer();
miniPlayer.media = '2121.mp3';
console.log('Opgave 9');
console.log(miniPlayer.play('2121.mp3'));
console.log(miniPlayer.pause());
Het resultaat in de console zie je hieronder:
Opgave σ
Now playing ... μλμλ.mpν
Pause ... μλμλ.mpν
Encapsulation
Encapsulation kunnen we vertalen we als inkapseling en dit betekent dat iedere
constructor zijn eigen properties en methodes verpakt. De child-constructor kan
de ingepakte methodes van de parent gebruiken zonder te weten hoe die werken.
Hier zeggen we dat de methodes en de properties van de parent publiek zijn en ook
beschikbaar voor de child-constructor – behalve de lokale properties. We zeggen
dat de lokale properties van de parent privé zijn en het child hoef niet alles van de
parent te weten. Een privé-property of methode defi niëren we met het keyword
var. Bijvoorbeeld in de parent-constructor ProtoPlayer:
 var versie = '1.0';
Dit is privé en niet geërfd bij de child-constructor MiniPlayer. De MiniPlayer-constructor heeft een eigen versie als volgt gemaakt:
3.5 Inheritance (overerven) 247
 this.versie = '2.0';
We kunnen dit testen – zie de volgende opgave.
• Opgave 10
Open oo-patterns.html en voeg de volgende code eraan toe.
// opgave 10
console.log('Opgave 10');
console.log(videoPlayer.versie);
console.log(miniPlayer.versie);
console.log(miniPlayer.backgroundColor);
Het resultaat in de console zie je hieronder:
Opgave λκ
λ.κ
μ.κ
blue
Hier zien we dat de versie in videoPlayer privé is en niet geërfd, miniPlayer heeft
een eigen versie, backgroundColor was wel geërfd.
Delete-function
Bij dynamische objecten in JavaScript kunnen we ook een bepaalde property van
het object verwijderen. Stel, je hebt een child-constructor die alle properties van de
parent heeft geërfd. Als je één van de geërfde properties niet meer nodig hebt, kun
je die property verwijderen met de delete-functie.
• Opgave 11
Open oo-patterns.html en voeg de volgende code eraan toe.
//opgave 11
console.log('Opgave 11');
delete(MiniPlayer.prototype.backgroundColor);
console.log(MiniPlayer.backgroundColor);
Het resultaat in de console zie je hieronder:
Opgave λλ
undefi ned
248 3 OOP in JavaScript
• Lab 05
In deze lab-opdracht maak je een child-constructor uit de rekenmachine-constructor. In de child-constructor voeg je de methode toe om percentages uit te rekenen.
 3.6 Een OOP videoPlayer
In deze paragraaf coderen we een video player met onze eigen videocontroles. Aan
het einde van de paragraaf moet je onderstaand resultaat zien:
Figuur 3.6
Planning Inleveren
Opgave 12
Lab 06 t/m 07
• Opgave 12
Open een nieuw script en sla het op als player.html. Voeg de volgende code eraan
toe.
<!DOCTYPE html>
<html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
<style>
 #container{
 margin-left: auto;
 margin-right: auto;
 width: 80%;
 }
 #controls{
 display: block;
 background: black;
 padding-top: 5px;
 text-align: center;
 width: 80%;
 }
3.6 Een OOP videoPlayer 249
 input[type = image]{
 width: 10%;
 }
</style>
</head>
<body>
<div id="container">
 <video id="video" controls width="80%" preload
 poster="video/juanes.bmp">
 <source src="video/juanes.mp4" type="video/mp4"/>
 </video>
 <div id="controls">
 <input type="image" src="img/play.png"
 onclick="player.play(video);" />
 <input type="image" src="img/pause.png"
 onclick="player.pause(video);" />
 </div>
</div>
</body>
</html>
• Lab 06
Codeer de volgende Player-constructor onderaan de HTML-code uit opgave 12.
var Player = function() {};
Player.prototype.play = function(media) {
 media.play();
};
Player.prototype.pause = function(media) {
 media.pause();
};
var player = new Player();
Hier hebben we methodes voor de play- en de pause-knoppen gemaakt. Maak
Lab 06 af door de methodes voor de volgende knoppen toe te voegen:
• reset
• forward
• rewind
• volume +
• volume –
• volume aan/uit
De operaties van het video-object kun je als volgt coderen:
Pause met media.pause();
Reset met media.currentTime = 0;
Forward met media.currentTime += 30;
Rewind met media.currentTime -= 30;
Volume+ met media.volume += 0.1;
Volume- met media.volume -= 0.1;
Volume aan/uit met media.muted = true/false
250 3 OOP in JavaScript
• Lab 07
Codeer de Calculator constructor en object die gebaseerd is op het class-diagram
uit Lab 01.
Codeer de volgende code en sla het op als calculator.html.
<!DOCTYPE html>
<html lang="nl">
<head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8" />
<style>
 #calculator {
 border: solid black 1px;
 padding: 4px;
 border-radius: 4px;
 width: 40%;
 margin-left: auto;
 margin-right: auto;
 }
 form{
 width: 100%;
 }
 #calculator input[type="text"] {
 text-align: right;
 }
 #output {
 backgroundColor: darkseagreen;
 width: 92%;
 margin-left: 5px;
 font-size: 1.3rem;
 border-radius: 8px;
 padding-right: 8px;
 }
 #buttontable {
 width: 100%;
 font-size: 1.0rem;
 }
 #buttontable input {
 width: 100%;
 height: 32px;
 padding: 0px;
 }
</style>
</head>
<body>
<div id="calculator">
<form action="index.html" method="post" name="calc">
<input type="text" name="output" id="output" value="0" />
<table id="buttontable">
<tr>
<td>
<input type="button" value="C"onclick="calculator.reset();"/>
</td>
3.6 Een OOP videoPlayer 251
<td>
<input type="button" value="BS" disabled />
</td>
<td>
<input type="button" value="MR" disabled />
</td>
<td>
<input type="button" value="MC" disabled />
</td>
</tr>
<tr>
<td>
<input type="button" value="7"
onclick="calculator.setOperand('7');" />
</td>
<td>
<input type="button" value="8"
onclick="calculator.setOperand ('8');" />
</td>
<td>
<input type="button" value="9"
onclick="calculator.setOperand ('9');" />
</td>
<td>
<input type="button" value="*"
onclick="calculator.setOperator('*');" />
</td>
</tr>
. . .
<td>
<input type="button" value="=" onclick="calculator.calculate();" />
</td>
Maak dit script af met de resterende knoppen. Het resultaat moet er als volgt uitzien:
Figuur 3.7
Codeer de Calculator-constructor en het calculator-object volgens het volgende
class-diagram:
252 3 OOP in JavaScript
Figuur 3.8
Rekenmachine algoritme
Hanteer het volgende algoritme of je eigen variatie hierop.
Stap 1: de setOperand-methode
Wanneer er wordt geklikt op een getal-knop (ook de decimale punt), dan wordt het
getal of de decimale punt opgeslagen in de operand.
De setOperand()-methode voegt inputs als volgt samen:
this.operand += operand;
Stel dat je 1.3 intikt, dan krijgt je de volgende situatie:
Stap savedOperand operator operand resultaat
1 1.3
Daarna wordt de operand in de rekenmachine vertoond.
Stap 2: de setOperator-methode
Wanneer er wordt geklikt op een operator-knop (+ - * / =), dan wordt er getest of
de status in resultaat gelijk is aan "".
Als het resultaat gelijk is aan "" wordt de operand opgeslagen in savedOperand en de
operand gelijk aan "".
Als het resultaat niet gelijk is aan "" wordt het resultaat opgeslagen in savedOperand
en de operand wordt "".
Stel dat je op + drukt, dan krijg je de volgende situatie:
Stap savedOperand operator operand resultaat
2 1.3 +
Daarna wordt stap 1 herhaald.
3.7 Speciale functions 253
Stel dat je op 6 drukt, dan krijg je de volgende situatie:
Stap savedOperand operator operand resultaat
2 1.3 + 6
Stap 3: de calculate-methode
Wanneer er wordt geklikt op de =-knop, voert de calculate-methode een switchopdracht uit gebaseerd op de operator. Het resultaat wordt als volgt uitgerekend:
resultaat = savedOperand operator operand
Stel dat je op = drukt, dan krijgt je de volgende situatie:
Stap savedOperand operator operand resultaat
3 1.3 + 6 7.3
Daarna wordt het resultaat getoond.
Stap 4: de reset-methode
Wanneer er wordt geklikt op de C-knop, reset deze methode alle properties naar
"".
Stel dat je op C drukt, dan krijgt je de volgende situatie:
Stap savedOperand operator operand resultaat
4
 3.7 Speciale functions
In deze paragraaf kijken we naar functies met speciale coderingstechnieken in JavaScript. We kijken naar de volgende concepten:
• externe methodes
• call-methode
• apply-methode
• bind-methode
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
Opgaven 13 t/m 16
Lab 08
254 3 OOP in JavaScript
Externe methodes aan objecten koppelen
In JavaScript kunnen we externe methodes koppelen aan objecten. Er zijn drie manieren om dit te doen:
• call
• apply
• bind
Call
In de volgende fi guur zien we aan de linkerkant een class-diagram met eigen methodes en aan de rechterkant externe methodes.
Figuur 3.9
Zoals te zien is in fi guur 3.9 zijn de methodes horizontaal en verticaal niet verbonden met de class Cirkel. Met de methode call maken we een verbinding tussen de
class Cirkel en de externe methodes.
Syntaxis:
externe-methode.call(obj, input-parameter);
In de volgende opgave koppelen we het object obj met de methodes horizontaal en
verticaal.
• Opgave 13
Open een nieuw script en sla het op als cirkel.html. Voeg de volgende code eraan
toe.
<!DOCTYPE html>
<html lang="nl">
 <head>
 <meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8" />
 <style>
 #box{
 width: 400px;
 height: 200px;
 border: solid black;
 }
3.7 Speciale functions 255
 .cirkel{
 border-radius: 50%;
 width: 50px;
 height: 50px;
 backgroundColor: red;
 position: relative;
 top: 50px;
 left: 100px;
 }
 </style>
</head>
<body>
 <div id="box">
 <div id="1" class="cirkel">
 </div>
 </div>
</body>
</html>
• Opgave 14
Open cirkel.html en sla het op als call.html. Voeg onderaan het volgende script
toe.
<script>
obj = {
 kleur:'red',
 cirkel: document.getElementById('1')
}
var horizontaal = function(posX){
 this.cirkel.style.left = posX+'px';
};
var verticaal = function(posY){
 this.cirkel.style.top = posY+'px';
};
// CALL
horizontaal.call(obj,300);
verticaal.call(obj,100);
</script>
Hierboven koppelen we met call de methode horizontaal aan het object obj met
de parameter 300. Het resultaat is een verplaatsing van de cirkel naar positie 300
horizontaal en positie 100 verticaal. Zie fi guur 3.10.
Figuur 3.10
256 3 OOP in JavaScript
Apply
De apply-methode is bijna hetzelfde als de call-methode. Het enige verschil is dat
in plaats van input-parameters we een array met input-parameters doorgeven. In
de volgende opgave gebruiken we de methode apply om de instellingen van het
object cirkel toe te passen.
Syntaxis:
externe-methode.apply(obj, array);
• Opgave 15
Open cirkel.html en sla het op als apply.html. Voeg onderaan het volgende script.
<script>
obj = {
 kleur:'red',
 cirkel: document.getElementById('1')
}
// Apply
var settings = [50,100,'green'];
var verplaats = function(posX,posY,kleur){
 this.cirkel.style.left = posX+'px';
 this.cirkel.style.top = posY+'px';
 this.cirkel.style.backgroundColor = kleur;
};
verplaats.apply(obj,settings);
</script>
Hier zien we weer dat de methode verplaats niet verbonden is met het object
cirkel. Met apply passen we de instellingen voor het object toe. Het resultaat zie je
hieronder.
Figuur 3.11
Bind
De bind-methode verbindt een externe methode met een object om daarna een
nieuw object te creëren.
Syntaxis:
nieuw object = externe-methode.bind(object);
3.7 Speciale functions 257
In de volgende opgave verbinden we het object obj met de methode verplaatsen en
creëren we het nieuwe object mijnCirkel.
• Opgave 16
Open cirkel.html en sla het op als bind.html. Voeg onderaan de volgende code
toe.
<script>
obj = {
 color: 'red',
 cirkel: document.getElementById('1')
}
var verplaats = function(posX,posY,color){
 this.cirkel.style.left = posX+'px';
 this.cirkel.style.top = posY+'px';
 this.cirkel.style.backgroundColor = color;
};
// BIND obj en methode in nieuw object
var mijnCirkel = verplaats.bind(obj);
mijnCirkel(160,20, 'blue');
</script>
Hier hebben we het nieuwe object mijnCirkel gemaakt en vervolgens verplaatst.
Het resultaat zie je in fi guur 3.12.
Figuur 3.12
• Lab 08
In de volgende lab-opgave coderen we een pingpongbal.
Stap 1:
Open cirkel.html en sla het op als pingPong.html. Voeg het volgende script eraan
toe.
<script>
var Bal = function(id,color,width,height){
 var right = true;
 var down = true;
 this.element = document.getElementById(id);
 this.element.style.width = width;
258 3 OOP in JavaScript
 this.element.style.height = height;
 this.element.style.backgroundColor = color;
 this.getX= function(){
 this.x = this.element.style.left;
 return (this.x.substring(0, this.x.length - 2));
 };
 this.getY = function(){
 this.y = this.element.style.top;
 return (this.y.substring(0, this.y.length - 2));
 };
 this.setX = function(pos){
 this.element.style.left = pos + 'px';
 };
 this.setY = function(pos){
 this.element.style.top = pos + 'px';
 };
};
</script>
Stap 2:
In de volgende stap voegen we een methode toe die de pingpongbal laat bewegen:
var playIt = function(obj){
 var xx = obj.getX();
 console.log(xx);
 if(obj.right){
 xx++;
 if(xx >=350) obj.right = false;
 }
 if(!obj.right){
 xx--;
 if(xx <= 0) obj.right = true;
 }
 obj.setX(xx);
 var yy = obj.getY();
 console.log(yy);
 if(obj.down){
 yy++;
 if(yy >=150) obj.down = false;
 }
 if(!obj.down){
 yy--;
 if(yy <= 0) obj.down = true;
 }
 obj.setY(yy);
};
bal1 = new Bal('1','red','50px','50px');
setInterval( 'playIt(bal1)',10);
Het resultaat is een pingpongbal die vanzelf beweegt binnen de kaders van de box.
3.8 Anonieme functions 259
 3.8 Anonieme functions
In deze paragraaf kijken we naar functies met speciale coderingstechnieken in
Java Script. We bekijken de volgende concepten:
• anonieme functies
• callback-functies
• zelfuitvoerende functies
• return-functies
• functie-closures
• heredity
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
Opgaven 17 t/m 19
Lab 09
In JavaScript kunnen we het volgende coderen zonder enige foutmeldingen:
['Joshua', 'Arnlod', 'Shireen'];
1234;
'Joshua';
function(parameter){return parameter;}
Je ziet dat de array, het getal, de tekst en de functie geen naam hebben, anoniem
zijn. Omdat deze waarden anoniem zijn, kunnen we er verder niks mee doen. Pas
als je de array een naam geeft, kun je hem verder gebruiken. Bijvoorbeeld:
studenten=['Joshua', 'Arnlod', 'Shireen'];
Anonieme functies kunnen heel handig zijn.
• We kunnen anonieme functies als input voor een andere functie gebruiken.
• We kunnen anonieme functies meteen uitvoeren.
Wanneer je een anonieme functie gebruikt als inputparameter voor een andere
functie, dan noem je de anonieme functie een callback-functie.
Callback-functions
Een willekeurige functie, noem het maar de ‘eerste functie’, kan inputparameters
krijgen. Inputparameters mogen ook functies zijn. Een functie die gebruikt wordt
als inputparameter noemen we de callback-functie van de eerste functie. Een deel
van de functionaliteit van de eerste functie wordt dan bepaald door de code van de
callback-functie. Bijvoorbeeld, de callback-functie wacht tot de eerste functie beeindigd is en dan pas wordt de callback-functie uitgevoerd. In de volgende opgave
coderen we een eerste functie met een callback-functie.
260 3 OOP in JavaScript
• Opgave 17
Open pingPong.html en sla het op als callback.html. Verwijder de volgende regel:
//setInterval( 'playIt(bal1)',10);
En voeg de volgende methode eraan toe:
function switchColor(obj,callback){
 yy = obj.element.style.left;
 yy = yy.substring(0, yy.length - 2);
 if(yy >= 150){
 obj.element.style.backgroundColor = 'blue';
 }else{
 obj.element.style.backgroundColor = 'green';
 }
 callback();
}
Hierboven hoeven we het object en de callback-functie nog niet te benoemen. We
hebben alleen maar de ruimte voor het object en de callback-functie gecreëerd.
De functie switchColor verwacht een object en een callback-functie als inputparameters.
function switchColor(obj,callback)
In de volgende code noemen we wel het object en de callback-functie. Codeer de
volgende setInterval met de callback-function playIt().
setInterval('switchColor(bal1,playIt(bal1))',10);
</script>
De switchColor-functie verandert de kleur van het object: aan de rechterkant naar
blauw en aan de linkerkant naar groen. Pas daarna wordt de callback-functie uitgevoerd. Om dit uit te voeren geven we de naam van het object (bal1) en de callbackfunctie (playIt) als volgt:
setInterval('switchColor(bal1,playIt(bal1))',10);
Het resultaat is een pingpongbal die beweegt en van kleur verandert binnen de
kaders van de box.
Zelfuitvoerende functions
Wanneer we de declaratie van een functie eindigen met haakjes openen en sluiten (
) betekent dit ‘nu uitvoeren’. Dan wordt de functie meteen uitgevoerd.
Return-functions
Een functie mag objecten als output geven. Het object van de output mag ook een
functie zijn. In de volgende opgave coderen we een functie die een functie als output geeft.
3.8 Anonieme functions 261
Function-closures
Een closure gebeurt wanneer een functie een anonieme functie als output geeft
met de eigen scope van de closure-functie. De output-functie krijgt de scope van
de eerste functie. Met scope bedoelen we de context of variabelen van de functie.
Wanneer we een functie declareren, kan de functie verwijzingen hebben naar alle
lokale variabelen binnen zijn scope. Maar bij closures blijven de variabelen zichtbaar in de output-functie, zelfs wanneer de output-functie iets later wordt uitgevoerd. Een closure gebeurt wanneer een functie een anonieme functie als output
geeft en dan uitvoert.
In de volgende fi guur zien we dat wanneer F2 wordt geretourneerd door F1 dat F2
zich de context van F1 herinnert, namelijk x=1 plus de eigen context, namelijk y=2.
Figuur 3.13
In de volgende opgave coderen we een functie met closure.
• Opgave 18
Open een nieuw script en sla het op als closure.html.
Voeg de volgende code eraan toe.
<script>
var topFunction = function(){
 tekst = "Deel een";
 console.log(tekst);
 return function(inputTekst){
 console.log(tekst + " plus " + inputTekst);
 };
}();
topFunction("Deel twee");
</script>
In deze opgave output de functie topFunction een anonieme functie. De anonieme
functie ‘herinnert’ de variabele tekst in de topFunction. De anonieme functie kan
dus variabelen uit de topFunction plus eigen va ria belen weergeven en gebruiken
voor verdere bewerking. Je gebruikt de topFunction als volgt:
topFunction("tekst");
262 3 OOP in JavaScript
Open de browserconsole door op Control-Shift-C te klikken. Het resultaat zie je
hieronder:
Deel een
Deel een plus Deel twee
Als je de topFunction aanroept, dan roep je de return-functie ook aan.
Function-heredity
Wat we in de vorige opgave hebben gedaan heet in JavaScript ‘closure’. In de volgende opgave coderen we een functie binnen een functie, en daarbinnen weer een
functie.
• Opgave 19
Open een nieuw script en sla het op als heredity.html Voeg de volgende code eraan toe.
<script>
function grootvader(){
 familieNaam = 'Mandela';
 var naam = 'grootvader';
 var leeftijd = 66;
 console.log(naam+' '+familieNaam+' is '+leeftijd);
 function vader(){
 ogen = 'bruine';
 var naam = 'vader';
 var leeftijd = 36;
 console.log(naam+' '+familieNaam+' is '+leeftijd);
 function kind(){
 var naam = 'kind';
 var leeftijd = 16;
 console.log(naam+' '+familieNaam+' is '+leeftijd +
 ' en heeft '+ogen+' ogen');
 }
 kind();
 window.kind = kind;
 }
 vader();
}
grootvader();
kind();
</script>
Het resultaat zie je hieronder:
3.8 Anonieme functions 263
grootvader Mandela is ππ
vader Mandela is νπ
kind Mandela is λπ en heeft bruine ogen
kind Mandela is λπ en heeft bruine ogen
In het resultaat zien we dat alle publieke variabelen van de grootvader zoals de
familie Naam overerven aan de vader- en kind-functies. De privévariabelen (beginnend met het key-word var) zoals naam en leeftijd worden niet geërfd. We zien
bijvoorbeeld dat de vader de familieNaam heeft geërfd, maar een eigen leeftijd heeft.
Het kind heeft de familieNaam plus de bruine ogen van zijn vader geërfd. Als laatste
hebben we de kind-functie buiten de scope van de vader uitgevoerd om te laten
zien dat het kind zich nog steeds de geërfde properties herinnert.
• Lab 09
Open pingPong.html en vervang het body-element door het volgende body-element:
<body>
 <div id="box">
 <div id="1" class="cirkel">
 </div>
 <div id="2" class="cirkel">
 </div>
 <div id="3" class="cirkel">
 </div>
 </div>
</body>
Vervang de volgende regel:
//setInterval( 'playIt(bal1)',10);
door de volgende regels:
bal1 = new Bal('1','red','50px','50px');
bal2 = new Bal('2','blue','35px','35px');
bal3 = new Bal('3','green','35px','35px');
setInterval( 'playIt(bal1)',10);
setInterval( 'playIt(bal2)',3);
setInterval( 'playIt(bal3)',8);
Het resultaat is drie pinpongballen die bewegen binnen de marges van de box.
264 3 OOP in JavaScript
Figuur 3.14
 3.9 JSON-object-literals
In deze paragraaf kijken we naar functies met speciale coderingstechnieken in JavaScript. We kijken naar de volgende concepten:
• JSON objecten
• geneste JSON objecten
• chaining
• objecten bundelen
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
Planning Inleveren
Opgaven 20 t/m 23
Lab 10
Literals zijn vaste waarden die je letterlijk codeert binnen je JavaScript. Bijvoorbeeld, een tekst-literal geef je als volgt aan:
"tekst literal"
Een object-literal is een lijst met property-namen en waarden binnen accolades {}.
Bijvoorbeeld:
{
 "attribuut": "waarde"
}
Object-literals maken we met JavaScript Object Notation, afgekort JSON. JSON is
een syntaxis voor het structureren en transporteren van tekstinformatie.
JSON is programeertaalonafhankelijk en de datastructuren zijn eenvoudig te lezen.
De syntaxis voor het maken van een JSON-object-literal is als volgt:
var jsonobject = {
 "attribuut1": "waarde1",
 "attribuut2": "waarde2"
};
3.9 JSON-object-literals 265
LET OP
Bij een JSON-object-literal gebruiken we dubbele aanhalligstekens.
De properties en de waarden coderen we binnen dubbele aanhalingstekens. De
mogelijke waarden voor de properties van een JSON-object-litral zijn:
• getallen: integer of fl oat
• tekst: string tussen dubbele aanhalingstekens " "
• boolean: true of false
• array: tussen vierkante hakjes [ ]
• object: tussen accolades { }
• null
Een JSON-object-literal mag geen methodes hebben. In de volgende opgave maken
we een persoon-object met drie properties.
• Opgave 20
Open json.html en voeg de volgende code eraan toe.
<script>
var student = {
 "naam": "Jurson",
 "leeftijd": 17,
 "geslacht": "M"
};
</script>
In bovenstaande JSON-literal is 17 een getal, geen tekst, dus komt daarom niet tussen aanhalingstekens. Datatypes in JavaScript zijn in hoofdstuk 2 behandeld.
In deze opgave bevat het object student een datastructuur met drie properties:
naam, leeftijd en geslacht.
Objecten als properties van het object window
Het window-object krijgt het hoogste niveau in een webpage. Alle andere objecten
zijn properties van het window-object. De datastructuur ziet er als volgt uit:
Figuur 3.15
266 3 OOP in JavaScript
Geneste JSON-object-literals
De properties van een JSON-object mogen van alle geldige datatypen zijn. Een
object mag ook sub-objecten bevatten.
• Opgave 21
Open json.html en voeg het volgende adres-object eraan toe.
var student = {
 "naam": "Jurson",
 "leeftijd": 17,
 "geslacht": "M",
 "adres": {
 "straat": "Kruislaan 33",
 "postcode": "1099TT",
 "woonplaats": "Utrecht"
 }
};
Je ziet dat het student-object een adres-object heeft gekregen. De structuur van het
student-object ziet er nu als volgt uit:
Figuur 3.16
Chaining properties
We kunnen de properties van een object lezen en wijzigen met behulp van chaining (ketenen, vastleggen). Via chaining kunnen we de hele datastructuur doorlopen en gegevens lezen of wijzigen. De syntaxis is als volgt:
object.subobject.property = "waarde";
Dat betekent dat:
window.student.naam = "Jurson";
hetzelfde is als:
student.naam = "Jurson";
3.9 JSON-object-literals 267
• Opgave 22
Open json.html en voeg de volgende code eraan toe.
student.naam = "Jurson Davis";
console.log(student.naam);
console.log(student.adres.woonplaats);
Het resultaat zie je hieronder:
Jurson Davis
Utrecht
Literal-objecten bundelen
We kunnen een verzameling objecten bundelen binnen een array. In de volgende
opgave defi niëren we een verzameling studenten binnen een array.
• Opgave 23
Open json.html en voeg de volgende code eraan toe.
var studenten = [];
studenten[0] = {
 "naam": "Jurson",
 "leeftijd": 17,
 "geslacht": "M",
 "adres": {
 "straat": "Kruislaan 33",
 "postcode": "1099TT",
 "woonplaats": "Utrecht"
 }
};
studenten[1] = {
 "naam": "Shireen ",
 "leeftijd": 20,
 "geslacht": "V",
 "adres": {
 "straat": "Eindstraat 55",
 "postcode": "2867NN",
 "woonplaats": "Amsterdam "
 }
};
studenten[2] = {
 "naam": "Sahra",
 "leeftijd": 17,
 "geslacht": "V",
 "adres": {
 "straat": "Hogestraat 23",
 "postcode": "1190UU ",
 "woonplaats": "Rotterdam"
 }
};
268 3 OOP in JavaScript
console.log(studenten[2].naam + '/' +
studenten[2].adres.woonplaats);
Het resultaat zie je hieronder:
Sahra/Rott erdam
In de volgende lab-opdracht codeer je een JSON-object-literal voor het object product.
• Lab 10
Open json.html en codeer de JSON-object-literals uit fi guur 3.17.
Figuur 3.17
Daarna codeer je console.log-opdrachten voor alle properties. Als alles goed verloopt, krijg je het volgende resultaat:
Product id: Aκκλ
Product merk: AUDI
Product prijs: ξπ.κκκ
Beschikbare kleuren: rood, blauw, zwart
 3.10 Lokale opslagcapaciteit (local storage)
In deze paragraaf kijken we naar functies met speciale coderingstechnieken in JavaScript. We kijken naar de volgende concepten:
• local storage schrijven
• local storage lezen
Aan het einde van deze paragraaf laat je de volgende opgaven door je docent controleren:
3.10 Lokale opslagcapaciteit (local storage) 269
Planning Inleveren
Opgave 24
Lab 11
JavaScript heeft toegang tot de local storage op de harde schijf van de gebruiker.
Hier kunnen we tijdelijk JSON-object-literals opslaan en lezen. Om een JSONobject-literal te kunnen opslaan in local storage, moeten we eerst het object in een
string omzetten. Dit doen we als volgt:
tekst = JSON.stringify(JSONobject);
Daarna kunnen we de tekst van het object opslaan. Dit doen we als volgt:
localStorage.setItem(key, tekst);
In de volgende opgave slaan we de complete studentenarray met JSONobjectliterals op in local storage.
• Opgave 24
Open json.html en voeg de volgende code eraan toe.
for(x=0; x < studenten.lenght; x++)
{
 localStorage.setItem
 (x,JSON.stringify(studenten[x]));
}
console.log('Objecten opgeschreven in local storage.');
Als alles goed verloopt, zul je het volgende resultaat zien:
Objecten opgeschreven in local storage.
Local storage lezen
Om local storage te kunnen lezen, moeten we eerst alle items in local storage weer
omzetten naar JSON-object-literals. Dit doen we als volgt:
obj = JSON.parse(localStorage.getItem(key);
In de volgende opgave zetten we de items in local storage weer om naar JSONobject-literals. Vervolgens kunnen we de gegevens lezen.
• Lab 11
Open json.html en voeg de volgende code eraan toe.
for(x=0; x < studenten.lenght; x++)
{
 obj = JSON.parse(localStorage.getItem(x));
 console.log(obj.naam);
}
270 3 OOP in JavaScript
Als alles goed verloopt, krijg je het volgende resultaat:
Jurson
Shireen
Sahra
In de meeste browsers kunnen we de items in local storage zien. Als we in de
JavaScript-console kijken en vervolgen op Local Storage klikken, zien we de opgeslagen objecten in local storage, zoals in fi guur 3.18:
Figuur 3.18 Local storage
 3.11 OOP webshop
In deze paragraaf maken we een webshop in objectgeoriënteerd JavaScript
(OOP JS). De naam van de webshop is ‘Computer Depot’. De webshop verkoopt
computeronderdelen zoals muizen, toetsenborden, beeldschermen enzovoort. De
webshop moet een Single Page Applicatie (SPA, een pagina met alleen HTML met
links naar JavaScript en CSS) worden. De eerste stap is het maken van een classdiagram voor een winkelmandje waarmee de users onderdelen kunnen kopen.
1 Maak een class-diagram webBasket met de bijbehorende properties en methodes.
2 Maak de productenpagina aan met minimaal drie producten en de properties zoals
prijs, merk enzovoort.
3 Codeer de class webBasket met de bijbehorende methodes.
4 De bestelde items kun je in een array of in een JSON-object in localStorage opslaan.
5 Test alle methodes en lever de applicatie in.
Uitwerking
Het class-diagram voor Computer Depot ziet er als volgt uit:
3.11 OOP webshop 271
Figuur 3.19
Planning Inleveren
Opgave 25 t/m 27
Lab 12
• Opgave 25
Codeer de productenpagina als volgt:
<body>
 <img src="images/laptopcases.jpg" width="150px" alt=" " />
 <br>Flip Laptop Cases Prijs 9.99
 <form name="orderform"
 action="computerpartdepot.html"
 method="get" onsubmit="basket.addItem(this);">
 <input type="hidden" name="id" value="1" />
 <input type="hidden" name="product" value="Laptop Case" />
 <input type="hidden" name="model" value="Flip" />
 <input type="hidden" name="prijs" value="9.99" />
 Aantal:
 <input type="text" size=2 maxlength=3 name="aantal" value="1" />
 <input type="image" src="images/basket.png" width="100px" />
 </form>
</body>
We plaatsen ons product binnen een form-tag zodat we straks meer productenin
de webbasket kunnen toevoegen met:
onsubmit="basket.addItem(this);"
Hier maken we gebruik van de (this)-pointer zodat we de gegevens van dit item
kunnen toevoegen met de addItem-methode van het basket-object.
272 3 OOP in JavaScript
• Opgave 26
Maak twee nieuwe producten aan. Ieder product krijgt zijn eigen form-tag.
• Opgave 27
We coderen nu het webBasket-object met functie-constructors als volgt:
function webBasket(){
 this.getNamen = function(form) { ... };
 this.getValues = function(form) { ... };
 this.addItem = function(form) { ... };
 this.deleteItem = function(key) { ... };
 this.viewBasket = function() { ... };
 this.emptyBasket = function() { ... };
};
We willen een addItem-methode maken die hergebruikt kan worden. In dit geval
betekent dit dat de methode altijd moet werken, zelfs wanneer het aantal form-elementen verandert. We moeten een manier vinden om de waarde en de naam van
een form-element op te halen. Vanuit de item-properties creëren we een JSONobject als volgt:
item = {
 "id": id,
 "product": product,
 "model": model,
 "prijs": prijs,
 "aantal": aantal
 };
Maar we willen de namen niet hard coderen, want als er een nieuwe property in
het formulier wordt toegevoegd, is onze code onbruikbaar en niet meer herbruikbaar in de nieuwe situatie. Bijvoorbeeld:
<input type="hidden" name="color" value="blue" />
De code moet dan als volgt herschreven worden:
item = {
 "id": id,
 "product": product,
 "model": model,
 "prijs": prijs,
 "color": blue,
 "aantal": aantal
 };
Herbruikbare code
In de volgende code halen we het aantal form-elementen uit het formulier.
i = form.elements.length;
3.11 OOP webshop 273
Vervolgens halen we de namen van de formulier-elementen eruit. Dit doen we als
volgt:
this.getNamen = function(form) {
 i = form.elements.length;
 namen = [];
 for(x=0;x<i;x++){
 namen.push(form.elements[x].name);
 }
 return namen;
};
Het resultaat is de array ['ID', 'product', 'model', 'prijs', 'aantal']
We doen hetzelfde met de waarden (values) van de elementen:
this.getValues = function(form) {
 i = form.elements.length;
 values = [];
 for(x=0;x<i;x++){
 values.push(form.elements[x].value);
 }
 return values;
};
Het resultaat is de array:
['1', 'Laptop Case', 'Flip', '9.99', '1']
Het bestelde item willen we in de vorm van een JSON-object coderen en in local
storage opslaan. Dit doen we als volgt:
this.addItem = function(form) {
 namen = this.getNamen(form);
 values = this.getValues(form);
 item = "{";
 for(x=0;x<values.length;x++){
 if(x==values.length-1){
 item += '"'+namen[x]+'":'+'"'+values[x]+'"'+"}"
 }else{
 item += '"'+namen[x]+'":'+'"'+values[x]+'"'+",";
 }
 }
 localStorage.setItem(values[0],item);
};
In deze oplossing hebben we de namen van de properties niet hard gecodeerd zodat de code herbruikbaar blijft.
In de laatste stap hebben we dit item in localStorage als volgt gecodeerd:
localStorage.setItem(values[0],item);
We gebruiken de ID van het item als de key in localStorage. Dit is handig voor als
we het item willen verwijderen, zoals in de volgende methode:
274 3 OOP in JavaScript
this.deleteItem = function(key) {
 localStorage.removeItem(key);
};
Om het winkelmandje (basket) leeg te maken coderen we de volgende methode:
this.emptyBasket = function(){
 localStorage.clear();
};
De volgende listing is een samenvatting van het object webBasket:
function webBasket(){
 this.getNamen = function(form) {
 i = form.elements.length;
 namen = [];
 for(x=0;x<i;x++){
 namen.push(form.elements[x].name);
 }
 return namen;
 };
 this.getValues = function(form) {
 i = form.elements.length;
 values = [];
 for(x=0;x<i;x++){
 values.push(form.elements[x].value);
 }
 return values;
 };
 this.addItem = function(form) {
 namen = this.getNamen(form);
 values = this.getValues(form);
 item = "{";
 for(x=0;x<values.length;x++){
 if(x==values.length-1){
 item += '"'+namen[x]+'":'+'"'+values[x]+'"'+"}";
 }else{
 item += '"'+namen[x]+'":'+'"'+values[x]+'"'+",";
 }
 }
 localStorage.setItem(values[0],item);
 };
 this.deleteItem = function(key) {
 localStorage.removeItem(key);
 this.viewBasket();
 };
 this.emptyBasket = function(){
 localStorage.clear();
 };
}
• Lab 12
Maak de methode viewBasket in het object webBasket. Deze methode moet ervoor
zorgen dat de items in localstorage worden weergegeven. De methode moet ook
3.11 OOP webshop 275
items verwijderen met de methode deleteItem() en emptyBasket(). Het resultaat
moet er als volgt uitzien:
Figuur 3.20

277
 4 jQuery
 4.1 Basis van mobiele applicaties
De statistieken over de explosieve groei van mobiele websites laten zien hoe belangrijk de trend naar mobiel internet is. Er worden nu meer smartphones verkocht dan pc’s. Voor webdevelopers opent dit allerlei nieuwe mogelijkheden.
Planning Inleveren
Opgaven 1, 2
Er zijn grote verschillen tussen het ontwerpen van een standaardwebsite en een
mobiele website. Een bestaande website kan niet zomaar omgezet worden naar een
mobiele website. De designer moet ervoor zorgen dat een smartphone alleen de
belangrijkste informatie van de site op een logische manier weergeeft.
Gebruikers ervaren mobiel internet ook anders. Ten eerste is de snelheid van mobiele verbindingen lager dan die van vaste breedbandverbindingen.
Ten tweede is er een groot verschil in beeldschermresolutie tussen smartphones en
desktops. In fi guur 4.1 zie je een website en een app op het scherm van een smartphone.
Figuur 4.1 Een website en een app op het scherm van een smartphone
278 4 jQuery
Wat is een app?
App is de afkorting voor applicatie of mobiele applicatie. Een app is software ontwikkeld voor de smartphone of de tablet. Deze apps voeren bepaalde functies uit,
bijvoorbeeld games, opzoeken van reistijden of het bestellen van tickets.
Apps kunnen gebruikmaken van functies van de smartphone, zoals het global positioning system (afgekort tot gps en gebruikt door Google Maps) , de temperatuur
meten, de noordzuidrichting bepalen enzovoort.
Er wordt onderscheid gemaakt tussen native apps, webapps of cross-platform
webapps, en hybride apps.
Native apps
Een native app is een applicatie die geprogrammeerd is voor een specifi ek platform, zoals Windows, iPhone of Android. Native apps werken binnen een gesloten
systeem en zijn daarvan afhankelijk voor de distributie en het winstmodel.
Kenmerken van native apps:
• ze worden gedownload en draaien op het besturingssysteem van de smartphone of
tablet;
• ze werken met of zonder internetverbinding;
• ze zijn specifi ek ontworpen voor een smartphone of tablet;
• ze mogen gebruikmaken van toestelfuncties zoals het adresboek of gps;
• ze worden gedistribueerd binnen het systeem van de specifi eke smartphone of tablet, zoals de Apple Store (iPhone);
• ze kunnen gebruikmaken van local storage of web storage.
Elk platform heeft zijn eigen programmeertaal voor native apps:
• voor de iPhone programmeer je in Swift;
• voor Android programmeer je in Java;
• voor Windows Phone programmeer je in C.
Webapps
Webapps zijn mobiele applicaties die platformonafhankelijk zijn en draaien op de
browsers van alle smartphones of tablets. De kenmerken zijn:
• webapps draaien op alle smartphones en tablets;
• basiscode in HTML, CSS en JavaScript wordt ondersteund door iPhone, Android,
Windows 7 en alle andere smartphones;
• webapps en updates hoef je niet te downloaden;
• webapps kunnen omgezet worden in native apps en dan gedistribueerd binnen de
verschillende systemen;
• webapps mogen gebruikmaken van toestelfuncties zoals gps, het adresboek, local
storage en web storage.
Op het moment dat een webapp volledig ontwikkeld en getest is, kun je je webapp
in een appstore publiceren. Kijk voor verdere instructies op de site van Phonegap:
www.phonegap.com.
4.1 Basis van mobiele applicaties 279
Hybride apps
Hybride apps maken gebruik van een combinatie van native en webtechnieken. Zo
gebruikt Whattsapp een server voor de opslag van gegevens, maar kun je ook native technieken als een camera toepassen.
Native apps, webapps of hybride apps?
Het doel van je project bepaalt of je voor een native app, een webapp of een hybride app kiest. Als je een interactieve game wilt programmeren, kun je beter een
native app kiezen. Als je een breder publiek wilt bereiken, bijvoorbeeld als je een
applicatie voor een krant of tijdschrift maakt, kun je beter een webapp programmeren. In het onderstaande schema staat een globaal overzicht wat je kan helpen
bij de keus.
Kenmerk Native Web Hybrid
Geen commissie aan store   
Geen vertraging bij acceptatie store  
Icoon op startscherm   
Makkelijk vinden van de app   
Notifi caties mogelijk  
Platformonafhankelijk  
Prestaties bij o.a. animatie   
Te vinden door zoekmachines  
Tegen lage kosten te realiseren  
Toegang tot functies van toestel   
Zonder internet te gebruiken  
Design van webapps
Er is een scala aan touchscreens en mobiele apparatuur, van smartphones en tablets tot e-readers. In de ideale situatie kan een design op de juiste schaal bij ieder
apparaat moeiteloos toegepast worden. Tot nu toe maakte het grote aantal verschillende apparaten en besturingssystemen voor mobiel internet het ontwerpen
van cross-platform-applicaties ingewikkeld.
Er zijn gelukkig nieuwe ontwikkelingen in mobiel webdesign die deze complexiteit
wegnemen. Het ontwikkelen van cross-platform-apps voor tablet en smartphone
is een stuk eenvoudiger geworden door nieuwe technologieën als HTML5, CSS3,
jQuery en Materials.
Frameworks voor mobiele applicaties
Een framework is een softwarebibliotheek met herbruikbare code voor het ontwikkelen van dynamische websites of apps. Er zijn veel gratis frameworks beschikbaar.
We geven een overzicht van de bekendste frameworks voor het ontwikkelen van
apps.
280 4 jQuery
Appcelerator
Je kunt een account maken bij Appcelerator en in de cloud je eigen apps ontwikkelen: www.appcelerator.com.
AppInventor
Je kunt specifi ek voor het Android-platform-apps ontwikkelen met de Software
Development Kit (SDK) voor Android. Deze kun je downloaden van uit https://
developer.android.com/sdk/index.html.
Windows Phone
Microsoft Visual Studio Express is een platform voor het ontwikkelen van apps
voor de Windows Phone:
www.microsoft.com/visualstudio
jQuery Mobile
jQuery Mobile is een framework gebaseerd op jQuery en jQuery-UI. Alle documentatie over jQuery Mobile vind je op jquerymobile.com.
jQuery Mobile biedt bijvoorbeeld een user interface (afgekort tot UI) voor bijna
alle mobiele platforms. Vroeger was het noodzakelijk om apps per mobiel apparaat
te ontwerpen. jQuery is heel geschikt voor het ontwerpen van cross-platformwebapps.
In dit boek gebruiken we jQuery Mobile voor het ontwikkelen en testen van een
mobiele cross-platform-webapp. Om jQuery Mobile te downloaden moet je de
volgende links in je script coderen:
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script
src="http://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
Een lokale testomgeving opzetten
Om te kunnen beginnen met het coderen van je cross-platform-apps moet je eerst
een testomgeving op je pc of laptop confi gureren. Hiervoor installeren we de volgende software:
• een lokale webserver;
• een emulator;
• een editor of ontwikkelomgeving.
De webserver Apache
Apache is een webserver die je lokaal kunt gebruiken om op je pc of laptop je apps
te testen. Ga naar de site Apache Friends: www.apachefriends.org.
4.1 Basis van mobiele applicaties 281
Download en installeer XAMPP. Dit pakket bevat onder meer de webserver Apache. Na het downloaden en installeren start je de server door XAMPP Control
Panel te starten. Klik op de knop Start om de server te starten (fi guur 4.2).
Figuur 4.2 XAMPP Control Panel
Opera Mobile Emulator
Een mobiele emulator is software die een of meer mobiele apparaten op je pc of
laptop nadoet, zodat je je applicaties kunt testen. Het is dus niet meer nodig om
allerlei mobiele apparatuur aan te schaff en om je cross-platform-apps te kunnen
testen. Eenvoudig in gebruik is Opera Mobile Emulator 12 of hoger. Je kunt deze
emulator downloaden van
http://www.opera.com/nl/developer/mobile-emulator
Na het downloaden en installeren van Opera Mobile Emulator start je de emulator
op. Vervolgens zie je het hoofdvenster (fi guur 4.3).
Figuur 4.3 Opera Mobile Emulator
Opera Mobile Emulator kan verschillende smartphones en tablets ‘nadoen’. Je
selecteert een profi el en het geselecteerde apparaat wordt gesimuleerd. Als je bijvoorbeeld wilt zien hoe je webapp eruit zal zien op een tablet, kies je het profi el
van de Samsung Galaxy Tab. Klik vervolgens op de knop Launch en er verschijnt
een venster met de weergavekenmerken van de tablet.
282 4 jQuery
Je kunt tegelijkertijd een tweede simulatie starten door in het hoofdvenster een
nieuw profi el te selecteren, bijvoorbeeld de smartphone Samsung Galaxy S II. Klik
op Launch en de emulator wordt gestart.
Figuur 4.4 Simulatie van de Samsung Galaxy S II
De ontwikkelomgeving
Een ontwikkelomgeving kan bestaan uit een eenvoudige HTML-editor, zoals Sublime of Brackets, of zelfs Kladblok in Windows.
Na het installeren van je HTML-editor kun je beginnen met het coderen van je
applicatie.
In plaats van een eenvoudige editor kun je kiezen voor een volledige ontwikkelomgeving: een Integrated Development Environment (IDE). Voorbeelden zijn Microsoft WebMatrix en NetBeans van Sun. Deze IDE’s bieden onder meer controle
op syntaxis en automatisch aanvullen.
De webapp Hello World
In deze paragraaf coderen we een eenvoudige webapp om te controleren of de
testomgeving goed werkt.
4.1 Basis van mobiele applicaties 283
• Opgave 1
Open je HTML-editor, typ het volgende script over en sla het op als hello.html in
de map htdocs van je lokaal geïnstalleerde Apache-webserver. De onderstreepte
regels typ je in een regel achter elkaar zonder een Enter te geven.
<!DOCTYPE html>
<html>
 <head>
 <title>FlashTix</title>
 <meta name="viewport"
 content="width=device-width, initial-scale=1">
 <link
 rel="stylesheet"
 href="http://code.jquery.com/mobile/1.4.5/
 jquery.mobile-1.4.5.min.css" />
 <script src="http://code.jquery.com/jquery-1.11.1.min.js">
 </script>
 <script
 src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
 </script>
 </head>
<body>
<div data-role = "page" class = "page" id = "homepage">
 <div class = "header" data-role = "header">
 <h1>Header</h1>
 </div><!-- /header -->
 <div class="content" id="homecontent" data-role="content">
 <h1>Hello world</h1>
 </div><!-- /homecontent -->
 <div class="footer" data-role="footer" >
 <h1>Footer</h1>
 </div><!-- /footer -->
</div><!-- /homepage -->
</body>
</html>
Om het resultaat van het script Hello world te kunnen testen typ je de volgende
URL in het adresvak van de mobiele simulator:
localhost/hello.html
Het resultaat zie je hieronder:
284 4 jQuery
Figuur 4.5
Het element <meta viewport>
Met het element <meta viewport> zeggen we dat onze pagina vertoond wordt in een
mobiele browser in plaats van een browser op een desktop. Dit doen we als volgt:
<meta name= "viewport"
content = "width=device-width, initialscale=1">
Content Delivery Network (CDN)
Met de volgende code:
<script src="http://code.jquery.com/jquery-1.11.1.min.js">
</script>
specifi ceren we het Content Delivery Network van jQuery Mobile. Een CDN is
een netwerkserver voor het distribueren van statische content zoals afbeeldingen,
 audio, video’s, CSS en de jQuery-bibliotheek.
Data-role
In het element <body> plaatsen we meerdere <div>-elementen met verschillende
rollen. In de volgende tabel zie je de verschillende rollen en hun betekenis.
4.1 Basis van mobiele applicaties 285
Tabel 5.1 Data-roles
Data-role Betekenis
page Wrapper voor de mobiele pagina
header Wrapper voor de header van de pagina
content Wrapper voor de content van de pagina
footer Wrapper voor de footer van de pagina
De data-role="page" is de ‘container’ of wrapper van de mobiele pagina:
<div data-role="page" class="page" id="homepage">
De data-role="header" is de wrapper of 'container' van de header-balk:
 <div class = "header" data-role = "header">
 <h1>Header</h1>
 </div><!-- /header -->
De data-role="content" is de content van de pagina:
 <div class="content" id="homecontent" data-role="content">
 <h1>Hello world</h1>
 </div><!-- /homecontent -->
De data-role="footer" is de wrapper voor de footer van de pagina:
 <div class="footer" data-role="footer" >
 <h1>Footer</h1>
 </div><!-- /footer -->
• Opgave 2
Open hello.html en vervang in de content "Hello world" door de volgende code:
<p>Webapps zijn cross-platform. Dit betekent dat ze werken
op alle smartphones en tablets.</p>
<p>Webapps kunnen omgezet worden in native apps en gedistribueerd door alle
appstores.</p>
Typ in de adresbalk van de emulator de URL
localhost/hello.html
In fi guur 4.6 zie je de weergave van de homepage in Opera Mobile Emulator.
286 4 jQuery
Figuur 4.6 Het resultaat van opgave 2
 4.2 Een testomgeving in de cloud opzetten
De tweede optie is om een testomgeving in de cloud op te zetten.
Planning Inleveren
Opgave 3
Een van de leukste Integrated Developmemt Environments (IDE) in de cloud is
Cloud 9. Maak een gratis Cloud 9-account om webapps in de cloud te programmeren. De site van Cloud 9 (https://c9io/) ziet er als volgt uit:
4.3 De webapp FlashTix 287
Figuur 4.7
• Opgave 3
Herhaal opgave 1 en 2. Codeer hello.html in de Cloud 9 IDE. Na het coderen tik je
op de Run-knop. Daarna kun je op de browser van je mobiele telefoon de URL van
je script intypen. Als alles goed verloopt zie je nu de Hello world!-pagina op je mobiele telefoon.
 4.3 De webapp FlashTix
In deze paragraaf ontwerp en realiseer je een webapp met de naam FlashTix. Tijdens het proces maak je kennis met verschillende internettechnologieën, zoals
HTML5, CSS3, JavaScript en jQuery Mobile. Het doel van de applicatie is klanten
de mogelijkheid te bieden om gratis lastminute-tickets te bestellen voor popconcerten.
Planning Inleveren
Opgave 4 t/m 8
homepage
Mappenstructuur voor het project
Na de installatie van Apache open je de rootmap htdocs en maak je een map met
de naam fl ashtix. In de map fl ashtix sla je de projectbestanden op: HTML, JavaScript, afbeeldingen en CSS.
Figuur 4.8 Mappenstructuur voor de webapp FlashTix
288 4 jQuery
De homepage
De homepage krijgt een element <header> met daarin de navigatie. Onder de navigatie komt het element <content> en onderaan komt het element <footer>. In
het functioneel ontwerp van de homepage maken we een beschrijving van hoe de
homepage eruit moet zien.
Functioneel ontwerp van de homepage
Het functioneel ontwerp van de homepage bevat een draadmodel (wireframe,
eenvoudige, kale tekening) van de homepage, de navigatie-elementen en de content-elementen. Om je draadmodel te tekenen kun je de gratis software Balsamiq
Mockups downloaden en installeren. Het volgende draadmodel is met Balsamiq
gemaakt.
Figuur 4.9 Draadmodel van de homepage
De beschrijving van de homepage ziet er als volgt uit:
Functioneel ontwerp van de homepage
Beschrijving De homepage stelt de navigatie van de applicatie op en
toont een concertposter met logo
Header Navigatie-elementen
Link naar homepage
Link naar lastminute-pagina
Content Content-elementen
Concertposter
Footer Navigatie-elementen
Link naar agendapagina
Link naar locatiepagina
Opmerkingen De homepage moet een welkomstbericht weergeven
4.3 De webapp FlashTix 289
Codering van de homepage
Na het functioneel ontwerp van de homepage kunnen we beginnen met het coderen van de pagina. In de volgende opgave coderen we de homepage volgens het
functioneel ontwerp.
• Opgave 4
Typ het volgende over en sla het op als index.html in de map fl ashtix in de map
htdocs. De onderstreepte regels typ je in één regel achter elkaar zonder een Enter
te geven.
<!DOCTYPE html>
<html>
<head>
<title>FlashTix</title>
<meta name="viewport"
 content="width=device-width, initial-scale=1">
<link
 rel="stylesheet"
 href="https://code.jquery.com/mobile/1.4.5/jquery.
 mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script src="https://code.jquery.com/mobile/1.4.5/
 jquery.mobile-1.4.5.min.js">
</script>
<link rel="stylesheet" href="flashtix.css" />
<script src="flashtix.js"></script>
</head>
<body>
 <div data-role="page" class="page" id="homepage">
 . . .
 </div><!-- /homepage -->
</body>
</html>
Op de puntjes gaan we de homepage opbouwen.
Data-role= "page"
In het element <body> heeft het eerste element <div> het attribuut data-role="page"
gekregen:
<div data-role="page" class="page" id="homepage">
Het attribuut data-role="page" defi nieert de pagina die zichtbaar wordt op je
smartphone of tablet.
Header van de homepage
In de volgende opgave coderen we het header-element van de homepage. Dit doen
we volgens het functioneel ontwerp.
290 4 jQuery
• Opgave 5
Open index.html en voeg de volgende header toe op de puntjes van de homepage:
<div class="header" data-role="header" data-theme="b">
 <div class="nav" data-role="controlgroup" >
 <div class="ui-grid-b" >
 <div class="ui-block-a" >
 <a class="knop" href="#homepage"
 data-role="button"
 data-icon="home"
 data-iconpos="left">Home</a>
 </div>
 <div class="ui-block-b">
 <a class="knop" href="#homepage"
 data-role="button" > Welkom </a>
 </div>
 <div class="ui-block-c">
 <a class="knop" href="#lastminutepage"
 data-role="button"
 data-icon="arrow-r"
 data-iconpos="left"
 data-transition="slidedown">Lastminute</a>
 </div>
 </div> <!-- /grid-b -->
 </div> <!-- nav -->
</div><!-- /header -->
Het resultaat is de header van de homepage in fi guur 4.10.
Figuur 4.10
Data-role = "header"
Het header-element gebruiken we voor de navigatie door de applicatie. Door middel van knoppen met links naar de andere pages kunnen we de navigatie vastleggen
volgens het functioneel ontwerp.
Data-role = "controlgroup"
Met het attribuut data-role="controlgroup" kunnen we elementen groeperen. Zo
kunnen we in één keer attributen voor de hele groep defi niëren.
<div class="nav" data-role="controlgroup">
class = "ui-grid-b"
jQuery Mobile heeft grid-classes. Met de class "ui-grid-b" bijvoorbeeld maken we
een div met drie kolommen, met de class "ui-grid-a" met twee kolommen.
4.3 De webapp FlashTix 291
class = "ui-block-a"
Wanneer je het grid gebruikt moet je ook de kolommen defi niëren als block-a en
block-b.
Data-theme = "b"
jQuery Mobile kent twee thema's: "a" en "b" of licht en donker.
Data-role= "button"
Het attribuut data-role="button" defi nieert een klikbare knop. Button-elementen
gebruiken we voor de navigatie, zodat de gebruiker intuïtief naar de andere pagina’s
van de applicatie kan navigeren. Het attribuut href= geeft de naam aan van de pagina waar je naartoe wilt navigeren.
Data-transition
Data-transitions zijn transitie-eff ecten bij het linken naar een nieuwe pagina. In
dit geval willen we een slidedown-eff ect zien bij het verschijnen van de lastminutepagina.
<a class="knop" href="#lastminutepage"
data-role="button"
data-transition="slidedown">Lastminute</a>
De mogelijke opties voor data-transitions (overgang van ene pagina naar andere)
zijn:
• slide
• slidedown
• slideup
• pop
• fade
• fl ip
Content van de homepage
Volgens het functioneel ontwerp moet de content van de homepage een concertposter met een logo zijn.
• Opgave 6
Selecteer en bewerk een foto voor de concertposter op je homepage. Open index.
html en voeg het volgende content-element onderaan het header-element toe.
<div class="content" id="homecontent" data-role="content">
 <br><br>
 <h1>FlashTix</h1>
 <img id="poster" class="poster" src="poster.jpg">
</div><!-- einde homecontent -->
292 4 jQuery
Data-role= "content"
In data-role="content" plaatsen we het hoofdthema van de page. In ons geval is dat
de naam van de webapp FlashTix met een poster.
Footer van de homepage
In het footer-element kunnen we extra navigatie of extra informatie over het bedrijf, de auteur en het copyright plaatsen. Het footer-element van de homepage
gaan we gebruiken voor speciale links naar een agendapagina en naar een locatiepagina. De agendapagina en de locatiepagina coderen we in paragraaf 4.15 en 4.16.
• Opgave 7
Open index.html en voeg het volgende footer-element onderaan het contentelement toe.
<div class="footer" data-role="footer" data-theme="b">
 <div class="nav" data-role="controlgroup">
 <div class="ui-grid-a">
 <div class="ui-block-a">
 <a class="knop" href="#agendapage"
 data-role="button"
 data-icon="grid"
 data-iconpos="left">Agenda</a>
 </div>
 <div class="ui-block-b">
 <a class="knop" href="#locationpage"
 data-role="button"
 data-icon="search"
 data-iconpos="left">Location</a>
 </div>
 </div><!-- /grid-a -->
 </div> <!-- /nav -->
</div><!-- /footer -->
Het resultaat met footer zie je hieronder:
4.3 De webapp FlashTix 293
Figuur 4.11
Data-role = "footer"
In data-role="footer" hebben we ook een controlgroup voor de navigatie naar twee
speciale pagina’s gecodeerd: de agendapagina en de locatiepagina.
Design van de homepage
Je ziet dat de knoppen in de header en footer niet even breed en niet gecentreerd
zijn. Dit stellen we in met CSS3-stijlen.
In de code van de homepage hebben we de volgende link naar het bestand fl ashtix.
css gecodeerd:
<link rel="stylesheet" href="flashtix.css" />
In de volgende opgave beginnen we met het coderen van het CSS-stijlenbestand
voor de app FlashTix.
• Opgave 8
Typ het volgende over en sla het op als fl ashtix.css.
.page{
 margin: none;
 width: 100%;
 height: 90%;
}
.header{
 width: 100%;
 text-align: center;
}
294 4 jQuery
.footer {
 width: 100%;
 text-align: center;
 position: fixed;
 bottom: 0px;
}
.nav{
 width: 100%;
}
a{
 width: 100%;
}
.content{
 text-align: center;
 margin: none;
 padding: 0px;
 width: 100%;
 height: 100%;
}
.melding{
 font-size: 1.5rem;
 color: red;
}.
albums{
 border-radius: 50%;
}
Het resultaat van deze opgave zie je in fi guur 4.12.
Figuur 4.12 Homepage met CSS-stijlen
Volgens het functioneel ontwerp zijn alle pagina’s in drie onderdelen ingedeeld:
• header
• content
• footer
4.3 De webapp FlashTix 295
De data-role="button" defi nieert een klikbare knop. Button-elementen kunnen
gebruikmaken van pictogrammen, zodat de gebruiker intuïtief weet wat de functie
van de knop is.
Het attribuut data-icon
Een data-icon in een button-element gebruiken we om de navigatie voor de gebruikers van de applicatie zo intuïtief mogelijk te maken. In tabel 5.2 zie je een overzicht van pictogrammen die beschikbaar zijn voor het button-element.
Tabel 5.2 Mogelijke waarden voor data-icon
Data-icon Betekenis
arrow-l pijl naar links
arrow-r pijl naar rechts
arrow-u pijl naar boven
arrow-d pijl naar beneden
delete verwijderen
plus toevoegen
minus verwijderen
check aanvinken
refresh vernieuwen
star ster
info info
home home
search zoek
In fi guur 4.13 zien we een weergave van de pictogrammen voor de button-elementen.
Figuur 4.13 Pictogrammen voor knoppen
Het attribuut data-iconpos
Het attribuut data-iconpos bepaalt op welke positie van de knop het pictogram
geplaatst moet worden. In tabel 2.2 zie je een overzicht van de mogelijke posities
voor een pictogram op een knop.
296 4 jQuery
Tabel 5.3 Mogelijke waarden voor dataiconpos
Data-iconpos Betekenis
left links geplaatst
top bovenaan geplaatst
bottom onderaan geplaatst
notext knop zonder tekst
 4.4 De lastminute-pagina
In deze paragraaf maken we een functioneel ontwerp voor de lastminute-pagina
om vervolgens de codering van de pagina te voltooien.
Planning Inleveren
Opgaven 9 t/m 15
lastminute-pagina
Functioneel ontwerp
Het functioneel ontwerp van de lastminute-pagina geeft de navigatie en de content
van de pagina aan.
Figuur 4.14 Draadmodel van de lastminute-pagina
De beschrijving van de pagina is als volgt:
4.4 De lastminute-pagina 297
Functioneel ontwerp van de lastminute-pagina
Beschrijving De lastminute-pagina toont een lijst met lastminute-tickets voor concerten
Header Navigatie-elementen
Link naar vorige pagina
Link naar homepageina
Link naar bestelpagina
Content Content-elementen concertenlijst
Footer-element Navigatie-elementen
Link naar agendapagina
Link naar locatiepagina
Opmerkingen Vanuit de concertlijst maak je links naar biografi epagina’s van de artiesten
Codering van de lastminute-pagina
In deze paragraaf coderen we de lastminute-pagina als een lijst met concerten.
In de navigatie van de homepage hebben we de tag <a> met data-role="button" en
href="#lastminutepage" als volgt gecodeerd:
<a class="knop" href="#lastminutepage" data-role="button"
data-icon="arrow-r" data-iconpos="left">Lastminute</a>
Met deze knop maken we een link naar de lastminute-pagina. Het bestand index.
html mag meerdere data-role="page" hebben. Een nieuwe pagina voegen we toe
door een nieuw element <div data-role="page"> aan toe te voegen. In de volgende
opgave coderen we de lastminute-pagina onderaan de homepage.
• Opgave 9
Open index.html en codeer het volgende element <div data-role="page"> onderaan de homepage.
<div data-role="page" id="lastminutepage">
...
</div><!-- einde lastminutepage -->
Op de puntjes coderen we in de komende opgaven de header-, content- en footerelementen.
In deze opgave coderen we het header-element van de lastminute-pagina volgens
het functioneel ontwerp.
• Opgave 10
Open index.html en voeg het header-element van de lastminute-pagina eraan toe.
Codeer het header-element met de navigatie naar voorbeeld van fi guur 4.15. De
navigatie van zowel de knop Home als de knop Vorige moet naar de homepage verwijzen. De knop Bestel verwijst naar de bestelpagina. De bestelpagina maken we in
de volgende paragraaf.
298 4 jQuery
Figuur 4.15
Content van de lastminute-pagina
De content van de lastminute-pagina komt tussen het header- en het footer-element te staan. De content is een lijst met lastminute-tickets voor concerten. Hiervoor gebruiken we data-role="listview".
Data-role = "listview"
jQuery Mobile kent data-role="listview" toe aan het element <ul>. Een listview
coderen we bijvoorbeeld als volgt:
<ul data-role="listview" data-theme="a">
 <li><a href="acura.html">Acura</a></li>
 <li><a href="audi.html">Audi</a></li>
 <li><a href="bmw.html">BMW</a></li>
</ul>
• Opgave 11
Open index.html en voeg het volgende content-element onderaan het headerelement toe:
<div data-role="content" class="content" id="lastminutecontent"><br>
 <ul data-role="listview" >
 <li id="pop" data-role="list-divider"
 data-theme="b">POP</li>
 <li id="shakira-concert">
 <a href="#shakira-biopage">
 <img class="poster" src="shakiraposter.jpg"/>
 <h3>Shakira</h3>
 <p>AmsterdamArena</p>
 <p>Vandaag 22:00 uur</p>
 </a>
 <a href="#shakira-biopage"
 data-transition="flip">
 </a>
 </li>
 </ul><!--/listview -->
</div><!--/content -->
Het resultaat van deze opgave zie je in fi guur 4.16.
4.4 De lastminute-pagina 299
Figuur 4.16 De lastminute-pagina
In het element <li> voor het concert van Shakira hebben we een foto en informatie
over het concert geplaatst, plus een link naar de biopagina van Shakira:
<a href="#shakira-biopage" data-transition="slideup">
Data-role = "list-divider"
Met data-role="list-divider" kunnen we een lijst in subgroepen opsplitsen. We
kunnen bijvoorbeeld de categorie POP-concerten als een subgroep defi niëren:
<li id="pop" data-role="list-divider" data-theme="b">POP</li>
Vervolgens kunnen we een tweede subgroep voor de categorie JAZZ defi niëren:
<li id="jazz" data-role="list-divider"
data-theme="b">JAZZ</li>
• Opgave 12
Open index.html en voeg een nieuw POP-concert onder het Shakira-concert toe.
• Opgave 13
Maak een nieuwe data-role="list-divider" voor JAZZ-concerten en voeg een jazzconcert toe.
• Opgave 14
Maak een nieuwe data-role="list-divider" voor ROCK-concerten en voeg een
rockconcert toe.
In de volgende opgave coderen we het footer-element van de lastminute-pagina
volgens het functioneel ontwerp.
• Opgave 15
Open index.html en voeg het footer-element van de lastminute-pagina eraan toe.
Codeer het footer-element exact zoals het footer-element van de homepage.
Het resultaat van bovenstande opgaven zie je hieronder:
300 4 jQuery
Figuur 4.17 De lastminute-pagina
 4.5 De biopagina
De biopagina is de pagina waar de gebruiker biografi sche informatie en video’s over
de artiest kan vinden. In deze paragraaf ontwerpen we de biopagina volgens het
functioneel ontwerp dat we nu eerst gaan maken.
Planning Inleveren
Opgaven 16 t/m 21
biopagina
Functioneel ontwerp
Het functioneel ontwerp van de biopagina geeft de navigatie en de content van de
page aan.
De beschrijving van de biopagina ziet er als volgt uit:
4.5 De biopagina 301
Functioneel ontwerp van de biopagina
Beschrijving De biopagina toont video’s en de biografi e van de artiest
Header-element Navigatie-elementen
Link naar (vorige) lastminute-pagina
Link naar homepage
Link naar bestelpagina
Content-element Content-elementen
Video’s en biografi sche teksten
Footer-element Navigatie-elementen
Link naar agendapagina
Link naar locatiepagina
Opmerkingen Iedere artiest krijgt zijn/haar eigen biopagina
Figuur 4.18 Draadmodel van de biopagina
Codering van de biopagina
In deze paragraaf maken we de code waarmee we de biopagina voorzien van een
video en een biografi e van de artiest.
• Opgave 16
Open index.html en codeer de volgende data-role="page" onderaan de lastminutepagina.
<div data-role="page" class="page" id="shakira-biopage">
...
</div><!-- einde shakira-biopage -->
302 4 jQuery
Op de puntjes coderen we in de komende opgaven de header-, content- en footerelementen.
In de volgende opgave beginnen we met het coderen van het header-element. Hieronder coderen we de navigatie volgens het functioneel ontwerp.
Figuur 4.19
• Opgave 17
Open index.html en voeg het header-element van de biopagina eraan toe. Codeer
het header-element met de navigatie die je ziet in fi guur 4.19. In de navigatie moet
de vorige pagina naar de lastminute-pagina verwijzen.
De content van de biopagina krijgt volgens het functioneel ontwerp een video en
een biografi sche tekst over de artiest.
• Opgave 18
Open index.html en voeg het volgende content-element van de biopagina eraan
toe:
<div data-role="content">
 <video controls="controls" width="90%"
 preload id="video" poster="shakiraposter.jpg">
 <source src="wildlife.mp4" type="video/mp4"/>
 <source src="shakira.webm" type="video/webm"/>
 <source src="shakira.3gpp" type="video/3gpp"/>
 </video><!-- einde video -->
 <p>Aliquameratvolutpat. Mauris vel nequesitamet nunc
 gravida conguesedsitametpurus. Quisquelacusquam,
 egestasactincidunt a, lacinia vel velit. Morbiac
 commodo nulla. </p>
</div><!-- einde content -->
Het element <video>
Het element <video> heeft de volgende attributen:
• controls
• width
• poster
Met deze attributen controleren we het plaatsen van het video-element:
<video controls="controls" width="90%"
 preload id="video" poster="shakiraposter.jpg">
4.5 De biopagina 303
Smartphones en tablets gebruiken snellere videocoderingen dan gewone websites.
De meest gebruikte bestandsformaten zijn MP4, WEBM en 3GPP.
Het element <source>
Met het element <source> kunnen we ervoor zorgen dat we bestanden met verschillende coderingen voor mobiele video beschikbaar hebben voor verschillende
mobiele browsers:
<source src="shakira.mp4" type="video/mp4"/>
<source src="shakira.webm" type="video/webm"/>
<source src="shakira.3gpp" type="video/3gpp"/>
Mediabestandsformaten
Ieder platform ondersteunt zijn eigen bestandsformaten voor media. Als softwareontwikkelaar moet je ervoor zorgen dat je applicaties cross-platform te gebruiken
zijn. In tabel 5.4 staan de bestandsformaten voor de platforms Android, Windows
en iPhone.
Tabel 5.4 Bestandsformaten voor media
Smartphone Audio Afbeelding Video
Android 3GP
MP4
OOG
JPG
GIF
PNG
BMP
3GP
MP4
WEBM
Windows 7 3GP
3G2
MP4
M4A
AAC
JPG
GIF
PNG
BMP
3GP
3G2
MP4
M4V
MOV
iPhone MP3
MP4
WAV
AIFF
TIFF
JPG
GIF
PNG
DIV
MOV
MP4
MPG4
Conversie van mobiele video
Op internet vindt je speciale software om conversies te maken van mobiele video.
Zo kun je bijvoorbeeld conversies maken van MOV naar 3GP.
• Opgave 19
Download een korte testvideo en maak conversies naar MP4, WEBN en 3GP.
In de volgende opgave coderen we het footer-element van de biopagina. Het
footer-element van de biopagina is exact hetzelfde als het footer-element van de
lastminute-pagina.
304 4 jQuery
• Opgave 20
Open index.html en voeg het footer-element van de biopagina eraan toe.
• Opgave 21
Open index.html en maak de volgende drie complete biopagina’s met header-,
content- en footer-elementen voor de andere drie concertartiesten van de applicatie FlashTix.
<div data-role="page" id="jeniffer-biopage"
data-content-theme="b">
...
</div><!-- einde jeniffer-biopage -->
<div data-role="page" id="nora-biopage"
data-content-theme="b">
...
</div><!-- einde nora-biopage -->
<div data-role="page" id="bruce-biopage"
data-content-theme="b">
...
</div><!-- einde bruce-biopage -->
Maak deze opgave af door op de puntjes de header-, content- en footer-elementen
toe te voegen.
 4.6 De bestelpagina
De bestelpagina is de pagina waar de gebruiker zijn tickets kan bestellen. Dit doet
hij door een bestelformulier in te vullen. In deze paragraaf ontwerpen we de bestelpagina van de applicatie FlashTix.
Planning Inleveren
 Opgaven 22 t/m 30
bestelpagina
4.6 De bestelpagina 305
Figuur 4.20 Draadmodel van de bestelpagina
Functioneel ontwerp van de bestelpagina
Het functioneel ontwerp van de bestelpagina geeft de navigatie en de content van
de pagina aan.
De beschrijving van de bestelpagina ziet er als volgt uit:
Functioneel ontwerp van de bestelpagina
Beschrijving De bestelpagina is een bestelformulier voor
lastminute-tickets die alleen vandaag geldig zijn
Header-element Navigatie-elementen
Link naar vorige pagina
Link naar homepage
Link naar nieuwspagina
Content-element Content-elementen bestelformulier
Footer-element Navigatie-elementen
Link naar agendapagina
Link naar locatiepagina
Opmerkingen De vorige pagina is de lastminute-pagina
Codering van de bestelpagina
In deze sectie coderen we de bestelpagina met een bestelformulier.
306 4 jQuery
• Opgave 22
Open index.html en codeer het volgende element <div data-role="page"> onderaan de biopagina’s:
<div data-role="page" id="bestelpage" class="page">
. . .
</div><!-- eind bestelpage -->
Op de puntjes coderen we in de komende opgaven de header-, content- en footerelementen.
In de volgende opgave coderen we het header-element van de bestelpagina. In de
navigatie moet de vorige pagina naar de lastminute-pagina verwijzen.
• Opgave 23
Open index.html en voeg het header-element van de bestelpagina eraan toe.
Codeer het header-element met de navigatie zoals in fi guur 4.21.
Figuur 4.21 Header van de bestelpagina
De content van de bestelpagina moet een bestelformulier zijn waarop de gebruiker
bestelinformatie invult.
• Opgave 24
Open index.html en voeg het volgende content-element van de bestelpagina eraan
toe.
<div data-role="content" class="content">
<form name="form" id="form">
. . .
</form><!-- einde formulier -->
</div><!--/content -->
We beginnen het opbouwen van het formulier met een controlgroup-element voor
het kiezen van een concert. Omdat de gebruiker maar één concert mag kiezen,
gebruiken we keuzerondjes (radiobuttons).
• Opgave 25
Open index.html en codeer de volgende controlgroup binnen het element <form>.
 <p>Kies een concert</p>
 <input type="radio" name="concert" value="shakira"/>
 <label for="shakira">Shakira</label>
 <input type="radio" name="concert" value="jeniffer"/>
 <label for="jeniffer">Jeniffer Lopez</label>
4.6 De bestelpagina 307
 <input type="radio" name="concert" value="nora"/>
 <label for="nora">Nora</label>
 <input type="radio" name="concert" value="bruce"/>
 <label for="bruce">Bruce Springstien</label>
 <label for="aantal">Aantal sterren</label>
<input type="range" name="aantal" id="aantal" min="1" max="3" />
Het resultaat zie je in fi guur 4.22.
Figuur 4.22
Het attribuut input type= "range"
Een gebruiker mag maximaal drie sterren geven. Om dit te controleren hebben we
het attribuut input type="range" gebruikt.
Data-role= "fi eldcontain"
Met data-role="fieldcontain" declareren we een container voor een groep elementen <input type="text">.
• Opgave 26
Open index.html en codeer het volgende fi eldcontain-element binnen het formelement.
<div data-role="fieldcontain">
<input class="required" type="text" id="naam"
 name="naam" placeholder="Typ hier je naam in" />
 <labelfor="minderjarig">Minderjarig:</label>
 <select name="slider" id="minderjarig" data-role="slider"
 data-mini="true">
 <option value="nee">Nee</option>
 <option value="ja">Ja</option>
 </select>
 ...
</div> <!-- einde fieldcontain -->
Op de puntjes coderen we in de komende opgaven meer formulier-elementen.
308 4 jQuery
Het attribuut label for
Het attribuut label for= is de tekst naast het tekstvakje van de elementen input
type="text".
Het attribuut placeholder
Het attribuut placeholder= is de grijze tekst die zichtbaar is in het tekstvakje van de
elementen input type="text".
Class= "required"
Wanneer een formulier-element class="required" krijgt, betekent dit dat dit element verplicht ingevoerd of afgevinkt moet worden.
Het select-element
Binnen een select-element kunnen we een keuze maken uit meerdere optionelementen:
<select name="slider" id="minderjarig"
 data-role="slider" data-mini="true">
 <option value="nee">Nee</option>
 <option value="ja">Ja</option>
</select>
• Opgave 27
Open index.html en voeg elementen input type="text" toe voor: Mobiele telefoon
en E-mailadres. Alle elementen moeten verplicht ingevuld worden. Het resultaat
van de opgave moet eruitzien zoals in fi guur 4.24.
Het datalist-element
Een datalist-element is een lijst met mogelijke waarden voor een element input
type="text". We kunnen bijvoorbeeld een lange lijst coderen met de namen van alle
steden:
<datalistid="steden">
 <option value="Almere">
 <option value="Amstelveen">
 <option value="Amsterdam">
 <option value="Den Haag">
</datalist>
• Opgave 28
Open index.html en voeg het volgende element <datalist> met de volgende elementen <option> eraan toe:
<input type="text" name="plaats" id="plaats" list="steden"
 placeholder="woonplaats" />
<datalist id="steden">
 <option value="Almere">
 <option value="Amstelveen">
4.6 De bestelpagina 309
 <option value="Amsterdam">
 <option value="Den Haag">
 <option value="Hilversum">
 <option value="Leeuwarden">
 <option value="Maastricht">
 <option value="Naarden">
 <option value="Utrecht">
</datalist>
Met een datalist is het eenvoudig om de juiste invoerwaarden te selecteren. De
invoer wordt door de gebruiker geselecteerd in plaats van ingetikt. Dit voorkomt
typefouten. Het resultaat moet eruitzien zoals in fi guur 4.23.
Figuur 4.23 Een datalist
Het textarea-element
Omdat een tekstveld soms te weinig ruimte biedt voor de benodigde tekst kun je
ook gebruikmaken van het textarea-element.
• Opgave 29
Open index.html en codeer het volgende textarea-element en controlgroup-element binnen het form-element.
 <textarea cols="35" rows="4" name="reactie" id="reactie"
 placeholder="mail ons je reactie">
 </textarea>
 <div data-role="controlgroup">
 <p>Kies een gratis abonnement</p>
 <input type="checkbox" name="news" id="news" />
 <label for="news">FlashTixNewsletter</label>
 <input type="checkbox" name="gids" id="gids" />
 <label for="gids">Uitgids</label>
 <input type="checkbox" name="fest" id="fest" />
 <label for="fest">Festival Gids</label>
 </div><!-- einde controlgroup -->
</div><!-- einde fieldcontain -->
<input type="submit" id="submit" value="Verzend">
</form><!-- einde form -->
</div><!-- einde content -->
310 4 jQuery
Het checkbox-element
In tegenstelling tot keuzerondjes (radio-elementen), waarmee de gebruiker maar
één optie kan kiezen, kunnen bij selectievakjes (checkbox-elementen) meerdere
opties geselecteerd worden.
In de volgende opgave coderen we het footer-element van de bestelpagina.
• Opgave 30
Open index.html en voeg het footer-element van de bestelpagina eraan toe. Codeer het footer-element met de navigatie zoals in fi guur 4.24 te zien is.
Figuur 4.24 Bestelformulier
 4.7 Je eigen lastminute-webapp
In deze opdracht ontwerp en realiseer je je eigen lastminute-webapp. In overleg
met je docent kies je een van de volgende onderwerpen:
• fi lm
• toneel
• musea
• sport
• vliegtuigtickets
• treinen
• cruises
• hotels
• vakantiehuizen
Planning Inleveren
eigen lastminute-app
4.7 Je eigen lastminute-webapp 311
Functioneel optwerp
Maak eerst een functionel ontwerp van je eigen lastminute-app. Begin met de sitemap en maak dan draadmodellen van elke pagina. Zie fi guur 4.25 voor een voorbeeld van een sitemap:
Figuur 4.25 Sitemap van je eigen lastminute-webapp
In het tweede deel van het functioneel ontwerp maak je een draadmodel van je
homepage waarin je de banner, navigatie en content van de pagina aangeeft.
Functioneel ontwerp van de homepage
Hier zie je een voorbeeld van een beschrijving van alle content-elementen van de
pagina, bijvoorbeeld knoppen, afbeeldingen en tekst.
Functioneel ontwerp van de homepage
Beschrijving
Header Navigatie-elementen
Content Content-elementen
Footer Navigatie-elementen
Opmerkingen
Maak het functioneel ontwerp af met draadmodellen en beschrijvingen van alle
pagina’s van je lastminute-webapp.
Nadat je het functioneel ontwerp hebt ingeleverd en dit is goedgekeurd, begin je
met de codering (HTML) en het design (CSS) van je eigen lastminute-webapp.
312 4 jQuery
 4.8 jQuery programmeren
jQuery is een JavaScript-bibliotheek of framework met veel verschillende JavaScript-technieken. Het doel ervan is om het ontwikkelen van webpagina’s met veel
functionaliteit eenvoudiger te maken. Webontwikkelaars kunnen hun kennis van
JavaScript in combinatie met jQuery, HTML5 en CSS3 gebruiken om DOM-elementen in een webpagina te coderen en zo dynamische applicaties te ontwikkelen.
Voor het programmeren in jQuery is kennis van objectgeoriënteerd programmeren in JavaScript noodzakelijk. Wanneer je deze kennis nog niet hebt, is het aan
te raden eerst hoofdstuk 3 OOP JavaScript door te nemen. Het is belangrijk dat je
de basisbegrippen van JavaScript-functies beheerst voordat je verdergaat met deze
paragraaf.
Planning Inleveren
Opgaven 31 t/m 34
Wat is DOM?
Het Document Object Model (afgekort tot DOM) is een model voor het benaderen
van gestructureerde documenten zoals een HTML-document. Met JavaScript kun
je alle DOM-elementen die geassocieerd zijn met je webpagina benaderen. Om een
bepaald element te benaderen, moet je de hiërarchie van het DOM doorlopen zoals in fi guur 4.26 te zien is:
Figuur 4.26 Document Object Model
Als je webpagina de structuur heeft die je in de fi guur ziet en je wilt het element
<textarea> van het element <form> van het element <div> in het document benaderen, dan moet je de DOM-hiërarchie als volgt doorlopen:
window.document.div.form.textarea
4.8 jQuery programmeren 313
De jQuery-wrapper
jQuery selecteert en geeft als resultaat een verzameling van DOM-elementen binnen een webpagina. De geselecteerde elementen worden gegroepeerd binnen de
jQuery-wrapper. Vanuit de jQuery-wrapper kun je de geselecteerde elementen
manipuleren. Om met jQuery een selectieopdracht uit te voeren, gebruik je de
volgende syntaxis:
$(selector) of jQuery(selector)
Bij selector geef je de elementen aan die je wilt selecteren. Om bijvoorbeeld alle
<p>-elementen in een webpagina te selecteren, doe je het volgende:
$('p') of jQuery('p')
Om alle <a>-elementen binnen alle <p>-elementen in een webpagina te selecteren,
doe je het volgende:
$('p a') of jQuery('p a')
De functie $() retourneert een JavaScript-wrapper-object. Het object bevat een
array met de geselecteerde DOM-elementen uit de webpagina.
jQuery-chains
We kunnen de geselecteerde elementen in de jQuery-wrapper manipuleren. Als
je bijvoorbeeld alle elementen <div class='inloggen'> onzichtbaar wilt maken,
selecteer je eerst de elementen. Daarna kun je de elementen manipuleren. Dit
doe je door operaties te koppelen (chaining) aan de geselecteerde elementen in de
 jQuery-wrapper. In het volgende voorbeeld worden de elementen in de jQuerywrapper onzichtbaar gemaakt:
$('div.inloggen').hide();
Chaining kunnen we tot meerdere niveaus coderen. Bijvoorbeeld:
$('div.inloggen').hide().addClass('onzichtbaar');
Hier worden de elementen eerst geselecteerd, dan onzichtbaar gemaakt en daarna
krijgen ze een nieuwe class:
class= 'onzichtbaar';
Use cases van de homepage
Een use case is een beschrijving van een interactie tussen de user en de applicatie.
We beginnen met de homepage. In deze paragraaf coderen we met jQuery de functionaliteit van de homepage van de applicatie FlashTix.
314 4 jQuery
Use cases van de homepage
Use case 01 Wanneer de gebruiker op de homepage komt, wordt een
welkomstbericht geactiveerd.
Use case 02 Wanneer de gebruiker op het canvas klikt, wordt een animatie
met de bedrijfsnaam en een afbeelding geactiveerd.
Opmerkingen
DOM-elementen laden
Je begint altijd met jQuery de instructie te geven om te wachten tot alle DOM-elementen van de webpagina zijn geladen in de browser. Dan pas kan jQuery beginnen met het zoeken van de elementen. Dit doen we door onze jQuery-opdrachten
in een functie te plaatsen:
jQuery(function() {
 $(jQuery-opdrachten);
});
Of:
$(function() {
 $(jQuery-opdrachten);
});
Alles wat je tussen de accolades codeert, zijn jQuery-opdrachten.
Als je eenmaal een verzameling (selectie) van de DOM-elementen in de wrapper
hebt, kun je functies uitvoeren op de elementen. Je kunt bijvoorbeeld dynamische
content aan de pagina toevoegen met de jQuery-functies append() en prepend(). In
de volgende opgave voegen we een welkomstmelding dynamisch toe aan de homepage.
Content toevoegen: prepend() en append()
De functie prepend() voegt HTML-content toe aan het begin van het geselecteerde
element. Bijvoorbeeld:
$('#homecontent').prepend('<p> Begin alinea.</p>');
Hier hebben we een alinea-element aan het begin van het element
<div id='homecontent'> toegevoegd.
• Opgave 31
Open index.html van de app FlashTix. In het element <head> voeg je een link naar
het bestand fl ashtix.js toe:
<script src= "flashtix.js"></script>
4.8 jQuery programmeren 315
• Opgave 32: De functie prepend()
Typ de volgende jQuery-code over en sla deze op als fl ashtix.js.
$(function() {
 $.mobile.pushStateEnabled = false;
 var welkomstMelding = 'Welkom!';
 $('#homecontent').prepend(
 '<p class="melding">'+ welkomstMelding + '</p>');
}); // einde jQuery
We coderen alle opgaven tussen deze twee regels in:
$(function() {
en
}); // einde jQuery
We hebben eerst een globale variabele welkomstMelding gedefi nieerd. Daarna hebben we met behulp van jQuery het element <div id='homecontent'> geselecteerd.
Let op: een id moet binnen een webpagina uniek zijn. Als je verschillende elementen met dezelfde id hebt, selecteert jQuery alleen het element dat het van boven
naar beneden het eerst tegenkomt. Het resultaat van opgave 32 is dat het complete
element <div id="homecontent"> wordt geselecteerd in de jQuery-wrapper.
<div id="homecontent" data-role="content">
 ...
</div><!-- /homecontent -->
Met de functie prepend() voegen we aan het begin van het geselecteerde contentelement een nieuw element <p> toe met daarin de inhoud van de variabele welkomstMelding.
$('#homecontent').prepend(
 '<p class="melding">'+ welkomstMelding + '</p>');
316 4 jQuery
Figuur 4.27
De functie append() voegt HTML-content toe aan het einde van het geselecteerde
element. Bijvoorbeeld:
$('#homecontent').append('<p> Einde alinea.</p>');
Hier hebben we een alinea-element aan het einde van het element
<div id='homecontent'> toegevoegd.
• Opgave 33: De functie append()
Typ de volgende jQuery-code
$('#homecontent').append('<p id="gratis">Gratis tickets!</p>');
binnen de jQuery-functie:
$(function() {
. . .
});// einde jQuery
in het bestand fl ashtix.js. Het resultaat zie je in fi guur 4.28.
4.8 jQuery programmeren 317
Figuur 4.28
In de volgende tabel zie je een aantal voorbeelden van eenvoudige selectieopdrachten en het resultaat ervan.
Tabel 6.1 Selectieopdrachten in jQuery
Selectieopdracht Resultaat
"p" Alle alinea-elementen
"#poster" Het unieke element met id= "poster"
".header" Alle elementen met class= "header"
"p #welkom" Eerste alinea met id= "welkom"
"a.knop" Alle ankers met class= "knop"
"p a.knop" Alle ankers met class= "knop" binnen een alinea-element.
"img#image. poster" De unieke afbeelding met id= "image" en class="poster"
Verwijderen: remove()
We kunnen elementen aan het DOM toevoegen, maar met de functie remove()
kunnen we ook elementen die niet meer nodig zijn verwijderen. Met de volgende
regel verwijder je de content van de homepage:
$('#homecontent').remove();
of
$('#homecontent').children('.class').remove();
318 4 jQuery
• Opgave 34: De functie remove( )
Open fl ashtix.js en codeer een jQuery-opdracht die het element <p id="gratis"> in
homecontent verwijdert.
 4.9 Events en event-handlers
Alle browsers hebben de mogelijkheid om te reageren op events (gebeurtenissen), zoals een muisklik. Maar niet alle browsers gaan op dezelfde manier om met
events. Daarom hebben interactieve applicaties een cross-browser-eventmodel
nodig. Dat is een model waarmee je events kunt afhandelen zonder dat je rekening
hoeft te houden met de verschillen tussen de browsers.
Planning Inleveren
 Opgaven 35 t/m 38
Wat is een event?
Een event is een actie die gedetecteerd wordt door een programma, zoals het klikken op een muisknop of het tikken op het toetsenbord. Een event-gestuurde applicatie is een applicatie die is ontworpen om op events te reageren.
Wat is een event-handler?
Een event-handler is een reactie op een event, bijvoorbeeld een reactie op een
touch-event. Een event-handler is een functie waarin je codeert hoe er gereageerd
moet worden wanneer een bepaald event plaatsvindt. Een event mag één of meer
handlers activeren.
Het event-model van jQuery
Het event-model van jQuery is een cross-browsermodel. Het houdt rekening met
de event-modellen van de verschillende browsers, zodat je maar één handler hoeft
te coderen die in alle browsers werkt. Enkele voordelen:
• verschillende handlers voor de event-typen;
• er zijn standaardnamen voor events;
• een event kan een invoerparameter voor de handler zijn;
• er zijn standaardmethodes voor handlers.
Met het event-model van jQuery kunnen we handlers instellen voor events die
plaatsvinden in DOM-elementen. In fi guur 4.29 zie je een event: een wijziging in
het element <input>. Het event begint bovenin de DOM-hiërarchie. In de afvangfase lopen we de DOM-structuur door op zoek naar het doelelement. Als het doel
eenmaal is gevonden, kan het event een eigen handler triggeren. In de tweede fase
lopen we door de DOM-structuur weer naar boven tot het einde van het event.
4.9 Events en event-handlers 319
Figuur 4.29 Begin, target en eind van een event
De functie bind()
We coderen event-handlers met de functie bind(). De syntaxis van de functie ziet
er als volgt uit:
bind(eventType, data, handler)
Een voorbeeld:
$('p').bind('click',function(event){
 alert('je hebt op een tekst geklikt');
});
In dit voorbeeld selecteren we eerst alle <p>-elementen. Daarna coderen en koppelen we een handler voor click-events op alle <p>-elementen in de wrapper.
Events kunnen window-, form-, mouse- of toetsenbord-events zijn, bijvoorbeeld
een click-event.
Handlers zijn de functies die we coderen om deze events te behandelen, bijvoorbeeld de achtergrondkleur van een element veranderen wanneer er op het element
wordt geklikt. Events en handlers kunnen we koppelen aan verschillende elementen. Dit doen we met de bind()-functie.
Deze handler voert telkens als op een <p>-element wordt geklikt de functie alert()
uit. De handler is gecodeerd binnen de anonieme functie:
function(event){
 alert('je hebt op een tekst geklikt');
}
320 4 jQuery
De handler zorgt ervoor dat er een venster wordt getoond met de tekst:
je hebt op een tekst geklikt.
Tabel 6.2 Events
Event Toelichting
Formulieren
change element is gewijzigd
blur element raakt focus kwijt
focus element heeft de focus
select element is geselecteerd
submit formulier is verstuurd
reset formulier is gereset
Touch/muis
tap een korte tik
taphold een lange tik
swipe horizontaal of verticaal slepen
swiperight swipe naar rechts
swipeleft swipe naar links
• Opgave 35: De functie bind( )
Open fl ashtix.js en codeer een handler voor het swipe-event:
$('body').bind('swipe',function(event){
 alert('Je hebt over het scherm geveegd');
});
Maak deze opgave af door een handler te coderen die een taphold-event koppelt
aan het element <body>. Als je met je vinger op het scherm tikt of klikt met de muis,
moet de alertbox verschijnen.
4.9 Events en event-handlers 321
Tabel 6.3 Meer events
Event Toelichting
vmouseover touch of muisaanwijzer boven element
vmouseout touch of muisaanwijzer verlaat element
vmousedown touch-start of muisknop wordt ingedrukt
vmouseup touch-einde of muisknop wordt losgelaten
vmousemove touch-move of muisaanwijzer wordt verplaatst
vclick touch-end of klik met de muis
vmousecancel opheff en touch- of muis-beweging
Scroll
scrollstart begin scrollen
scrollstop eind scrollen
Page Load
pageload pagina is geladen
pageloadfailed pagina is niet geladen
Events inspecteren
Wanneer je een handler hebt vastgelegd met bind(), kun je het event als invoerparameter doorgeven aan de handler-functie met function(event). Bijvoorbeeld:
$('body').bind('taphold', function( event ) {
 alert('Je hebt op het scherm langgetikt');
 event.stopImmediatePropagation();
 return false;
});
Je ziet dat de invoerparameter (event) het event zelf is dat wordt doorgegeven aan
de anonieme functie van de handler. Zo kunnen we het event verder inspecteren.
Bijvoorbeeld:
event.stopImmediatePropagation();
Hier voeren we de actie stopImmediatePropagation uit op het event. Zo kunnen we
verdere acties aan het event toevoegen.
Tabel 6.4 toont een lijst met eigenschappen (properties) van jQuery-events. (Bedenk dat de x-as horizontaal loopt en de y-as verticaal.)
322 4 jQuery
Tabel 6.4 Event-eigenschappen
Eigenschap van touch-/muis-event
data tweede parameter in de functie bind()
pageX x-coördinaat van pagina
pageY y-coördinaat van pagina
clientX x-coördinaat van browser
clientY y-coördinaat van browser
screenX x-coördinaat van scherm
screenY y-coördinaat van scherm
• Opgave 36: Eigenschappen van events
Open fl ashtix.js en codeer een handler voor het click-event op het <body>-element.
Toon de eigenschappen e.pageX en e.pageY van het click-event in een alertbox.
$('body').bind('click',function(e){
 ...
});
Het resultaat van opgave 36 zie je in fi guur 4.30.
Figuur 4.30
De functie unbind()
Deze functie gebruiken we om events en handlers los te koppelen van een element.
Met de functie unbind() maken we een bind ongedaan. De syntaxis van unbind()
ziet er als volgt uit:
unbind(eventType,listener)
Bijvoorbeeld:
$('body').unbind('click');
Deze functie gebruiken we om een handler los te koppelen van een element.
• Opgave 37: De functie unbind()
Open fl ashtix.js en voeg de volgende code toe: koppel het click-event en het swipeevent los van het body-element.
4.9 Events en event-handlers 323
De functie one()
De functie one() is bijna identiek aan bind(). Met one() kunnen we een handler
coderen die eenmalig wordt uitgevoerd. De syntaxis van de functie one() ziet er als
volgt uit:
one(eventType, data, handler)
Bijvoorbeeld:
$('body').one('click',function(event){
 alert('je hebt geklikt');
});
In dit voorbeeld selecteren we het <body>-element. Daarna koppelen we eenmalig
de handler. Deze handler geldt alleen voor het eerste click-event. Wordt voor de
tweede keer op het <body>-element geklikt, dan is er geen handler meer.
De functie live()
De functie live() is bijna identiek aan bind(), met als belangrijk verschil: met
live() kunnen we handlers coderen voor bestaande én niet-bestaande elementen.
Op het moment dat er een nieuw DOM-element geladen wordt, is de handler gekoppeld aan dat element. De syntaxis van de functie live() ziet er als volgt uit:
live(eventType, data, handler)
Bijvoorbeeld:
$('h1').live('click',function(event){
 alert('je hebt op een tekst geklikt');
});
Hier wordt een handler gecodeerd voor alle geselecteerde <h1>-elementen. Op het
moment dat je een nieuw <h1>-element toevoegt aan de DOM-structuur wordt
deze handler ook gekoppeld aan het nieuwe element.
De functie die()
Met de functie die() (sterf) kunnen we een live-handler verwijderen; die() is verder gelijk aan unbind(). De syntaxis van de functie die() ziet er als volgt uit:
die(eventType, listener)
Bijvoorbeeld:
$('h1').die('click');
De functie trigger()
Tot nu toe hebben we gezien hoe events van de browser en de gebruiker een handler activeren. Maar we kunnen ook zelf bepalen wanneer een event geactiveerd
324 4 jQuery
wordt. Misschien wil je een event ieder uur activeren. Dit doe je met de functie
trigger(). De syntaxis van trigger()ziet er als volgt uit:
trigger(eventType, data)
Bijvoorbeeld:
$('body').trigger('click');
Met deze regel code wordt een click-event op het body-element vanuit je script
geactiveerd, zonder dat je op de body klikt.
• Opgave 38: De functie trigger( )
Open fl ashtix.js en voeg de volgende code toe:
 $('body').taphold(function(){
 datum = new Date();
 uur = datum.getHours();
 if(uur <= 11){
 $('<p>Goedemorgen!</p>').prependTo('#homecontent');
 } else if(uur >= 12 && uur <= 17){
 $('<p>Goedemiddag!</p>'). prependTo('#homecontent');
 }else if(uur >= 18 && uur <= 24){
 $('<p>Goedenavond!</p>').prependTo('#homecontent');
 }
 });
 $('body').trigger('taphold');
Maak deze opgave af door ervoor te zorgen dat als het taphold-event wordt geactiveerd ook de tijd wordt weergegeven.
 4.10 Het canvas van HTML5
In HTML5 bestaat ook het <canvas>-element. Met dit element kunnen we tekenen
en grafi eken op een webpagina maken. Hier kunnen we teksten, lijnen en basisvormen zoals vierkanten en cirkels met verlopende kleuren tekenen. We kunnen ook
handlers voor click- en touch-events binnen het <canvas>-element coderen. We
beginnen met het plaatsen van een <canvas>-element bovenaan de afbeelding op de
homepage.
Planning Inleveren
Opgaven 39 t/m 49
• Opgave 39: Het element <canvas>
Open index.html van je FlashTix-app en voeg het <canvas>-element in boven het
#poster-element van de homepage.
<canvas id="mycanvas"></canvas>
4.10 Het canvas van HTML5 325
• Opgave 40: Stijlen voor <canvas>
Open styles.css van je FlashTix-app en voeg de volgende CSS-stijlen toe:
#mycanvas{
 width: 330px;
 height: 100px;
 margin-bottom: 40px;
 border-radius: 10px;
 backgroundColor: #F7F387;
}
Het canvasraster
De afmetingen van het raster zijn in pixels aangegeven (zie fi guur 4.31).
Figuur 4.31 Raster van het canvas
De afmetingen van ons <canvas>-element zijn in de CSS-stijl ingesteld op:
width: 330px;
height: 160px;
Dat is 330 pixels breed en 160 pixels hoog. Dit betekent dat het canvas begint op
positie 0,0 en eindigt op positie 330,160. Een positie in het raster correspondeert
met een pixel in het canvas. Een positie wordt aangegeven door zijn x- en y-coördinaten. Bijvoorbeeld, de positie van de eerste blauwe pixel is (0,0), de positie van de
tweede blauwe pixel is (3,2) en de positie van de derde pixel is (6,4).
De canvas-context
Om in het canvas te kunnen tekenen, gebruiken we een aantal tekenfuncties. Eerst
moeten we een pointer naar het canvas-element maken. Dit doen we met getElementById(). Dan moeten we een context voor het canvas maken. Dit doen we met
getContext('2d'):
var mycanvas = document.getElementById('mycanvas');
var ctx = mycanvas.getContext('2d');
Tekenen in het canvas
Om een tekening te maken, begin je met een pad. Dit pad is een lijst van alle tekenacties, bijvoorbeeld eerst een move-actie gevolgd door het tekenen van een lijn. De
functie stroke() tekent de acties. Bijvoorbeeld:
326 4 jQuery
ctx.beginPath();
ctx.moveTo(25,80);
ctx.lineTo(200,80);
ctx.stroke();
Hier beginnen we een pad. Daarna kiezen we een positie (25,80). Dan zeggen we
dat een lijn getekend moet worden van (25,80) naar (200,80). Met stroke() voer je
deze acties uit.
• Opgave 41: Canvas
Open fl ashtix.js en voeg de volgende code toe:
$('#mycanvas').bind('click', function(e) {
 var mycanvas = document.getElementById('mycanvas');
 var ctx = mycanvas.getContext('2d');
 ctx.beginPath();
 ctx.moveTo(25,80);
 ctx.lineTo(200,80);
 ctx.stroke();
});
// einde canvas
Maak deze opgave af met het tekenen van een tweede, parallelle lijn.
Als je op het canvas klikt, moet het resultaat eruitzien als in fi guur 4.32.
Figuur 4.32 Een lijn tekenen
De canvasfunctie gradient()
Kleurverlopen (gradients) maken we met de functie createLinearGradient(). Hier
moeten we een beginpunt (x,y) en een eindpunt (x,y) specifi ceren. Bijvoorbeeld:
var grd=ctx.createLinearGradient(200,70,200,110);
Voor het verloop moeten we een beginkleurwaarde en een eindkleurwaarde specifi ceren. Bijvoorbeeld:
grd.addColorStop(0, '#f55b5b');
grd.addColorStop(1, '#3112a3');
De fi llStyle
Om het verloop te kunnen gebruiken, moeten we dit als fillStyle doorgeven. Bijvoorbeeld:
ctx.fillStyle=grd;
4.10 Het canvas van HTML5 327
De functie fi llRect()
De functie fillRect() tekent een gevuld vierkant. De syntaxis van deze functie is:
fillRect(x,y,breedte,hoogte)
De functie strokeRect()
De functie strokeRect() tekent de randen van een vierkant. De syntaxis van deze
functie is:
strokeRect(x,y,breedte,hoogte)
De functie clearRect()
De functie clearRect() gebruiken we om een vierkant te wissen. De syntaxis van
deze functie is:
clearRect(x,y,breedte,hoogte)
• Opgave 42: Vierkant tekenen
Open fl ashtix.js en teken het volgende vierkant binnen het canvas-element:
 var grd=ctx.createLinearGradient(200,70,200,110);
 grd.addColorStop(0, '#f55b5b');
 grd.addColorStop(1, '#3112a3');
 ctx.fillStyle=grd;
 ctx.fillRect(25,25,100,100);
 ctx.strokeRect(25,25,100,100);
}); // einde canvas
Het resultaat van deze opgave zie je in fi guur 4.33.
Figuur 4.33 Een vierkant tekenen
Canvas: font en shadow
Naast een tekening kunnen we ook tekst binnen een canvas-element laten weergeven. In de volgende opgave tekenen we een tekst met schaduw.
• Opgave 43: Canvastekst
Open fl ashtix.js en teken de volgende tekst met schaduw:
 ctx.font= '40pt Georgia';
 ctx.shadowBlur = 5;
 ctx.shadowColor = 'rgb(0, 0, 0)';
 ctx.fillText('tekst',50,100);
}); // einde canvas
328 4 jQuery
Het resultaat van de opgave zie je in fi guur 4.34.
Figuur 4.34 Een tekst tekenen
Bogen en cirkels
Om bogen en cirkels te tekenen gebruiken we de functie arc(). De syntaxis is:
arc(x, y, straal, starthoek, eindhoek, klok)
Het centrum van de cirkel defi niëren we met de x- en y-coördinaten. De straal (radius) is de afstand van het centrum tot de rand van de cirkel.
De start- en eindhoek zijn het begin- en eindpunt van de boog of cirkel. Hoeken
worden in radialen en niet in graden gecodeerd. Bij klok geven we een waarde true
of false. Als de waarde true is wordt de cirkel of arc met de klok mee getekend. In
JavaScript kun je de conversie van graden naar radialen als volgt uitrekenen:
var radialen = (Math.PI/180)*graden;
• Opgave 44: Bogen en cirkels
Open fl ashtix.js en teken de volgende cirkel:
 ctx.beginPath();
 var x = 220;
 var y = 100;
 var radius = 25;
 var beginhoek = 0;
 var eindhoek = (Math.PI/180)*360;
 var klok = false;
 ctx.arc(x,y,radius,beginhoek,eindhoek,klok);
 ctx.fill();
 ctx.stroke();
}); // einde canvas
Het resultaat van de opgave zie je in fi guur 4.35.
Figuur 4.35 Een cirkel tekenen
Interactief tekenen
Interactief tekenen binnen het canvas kan bijvoorbeeld als we tekenacties baseren op mouseclick-events of touch-tap-events. In de volgende opgave tekenen we
cirkels die gebaseerd zijn op de positie van mouseclick-events of met je vinger het
scherm aanraken.
4.10 Het canvas van HTML5 329
• Opgave 45: Interactief tekenen
Open fl ashtix.js en voeg de volgende code toe:
 ctx.save();
 ctx.beginPath();
 x = e.pageX - this.offsetLeft;
 y = e.pageY - this.offsetTop;
 radius = 15;
 ctx.arc(x,y,radius,beginhoek,eindhoek,klok);
 ctx.fill();
 ctx.stroke();
 ctx.restore();
}); // einde canvas
Het resultaat is dat waar je ook klikt er een cirkel wordt getekend – zie fi guur 4.36.
Figuur 4.36 Interactief tekenen
Canvasanimaties
We hebben vierkanten, lijnen, cirkels en teksten op het canvas getekend. Met deze
kennis kunnen we nu door naar het maken van animaties binnen het canvas. In
deze paragraaf maken we een animatie met de volgende elementen: een cirkel,
een tekst en een afbeelding. In dit geval gebruiken we een timer om deze drie elementen elke 40 milliseconden opnieuw te tekenen (een animatieframe bestaat uit
40 milliseconden). Bij elk frame maken we de elementen iets groter; we beginnen
met een minimale grootte en eindigen met een maximale grootte. Wanneer we alle
frames naast elkaar tekenen, creëren we een animatie (zie fi guur 4.37).
Figuur 4.37 Canvasanimaties
We beginnen met het coderen van drie objecten.
• Opgave 46: Animaties
Open fl ashtix.js en voeg de volgende code toe:
 cirkelObj={
 radius: 10, maxRadius: 100,
 x: e.pageX - this.offsetLeft,
 y: e.pageY - this.offsetTop
 }
 tekstObj={
 size: 10,
330 4 jQuery
 font: 'pt Georgia',
 maxSize: 50,
 x: e.pageX - this.offsetLeft,
 y: e.pageY - this.offsetTop
 }
 posterObj={
 x: e.pageX - this.offsetLeft,
 y: e.pageY - this.offsetTop
 }
 ctx.lineWidth = 2;
 // load image
 newPosterObj = new Image();
 newPosterObj.src = 'shakiraposter.jpg';
}); // einde canvas
Vervolgens coderen we de functie voor de animaties.
• Opgave 47: De functie animeren()
Open fl ashtix.js en voeg de volgende code toe:
 function animeren(){
 ctx.save();
 // canvas vegen
 ctx.clearRect(0,0,mycanvas.width, mycanvas.height);
 // teken poster in x,y klik coördinaten
 ctx.drawImage(newPosterObj,posterObj.x,posterObj.y);
 posterObj.x +=3;
 ctx.restore();
 } // einde animeren
 setInterval(animeren,100);
}); // einde canvas
JavaScript heeft twee functies om een functie om de zoveel milliseconden te laten
uitvoeren. Dat zijn setTimeout() en setInterval(). In de vorige opgave in de laatste
regel voeren we de functie animeren() uit met behulp van de functie setInterval().
We tekenen de afbeelding elke 100 milliseconden en iedere keer beweegt de afbeelding 3 pixels naar rechts. Het resultaat zie je in fi guur 4.38.
Figuur 4.38 Animatie met afb eelding
In de volgende opgave tekenen we een cirkel die steeds groter wordt.
• Opgave 48: Cirkel tekenen
Open fl ashtix.js en voeg de volgende code toe binnen de functie animeren().
 // increase radius
 cirkelObj.radius +=2;
 ctx.beginPath();
4.11 Use cases van de lastminute-pagina 331
 ctx.arc(
 cirkelObj.x,
 cirkelObj.y,
 cirkelObj.radius,
 0,
 2*Math.PI,
 false);
 ctx.stroke();
} // einde animeren
Het resultaat zie je in afbeelding 4.39.
Figuur 4.39 Animatie met cirkel
In de volgende opgave tekenen we een tekst die steeds groter wordt.
• Opgave 49: Teken tekst
Open fl ashtix.js en voeg de volgende code toe binnen de functie animeren().
 ctx.font= tekstObj.size + tekstObj.font;
 ctx.fillText('FlashTix ',tekstObj.x,tekstObj.y);
 // tekengrootte
 tekstObj.size +=2;
 ctx.restore();
} // einde animeren
Het resultaat zie je in fi guur 6.15
Figuur 4.40 Animatie met tekst
 4.11 Use cases van de lastminute-pagina
Planning Inleveren
Opgaven 50 t/m 58
In deze paragraaf coderen we nieuwe functionaliteit voor de lastminute-pagina
volgens de use cases:
332 4 jQuery
Use cases van de lastminute-pagina
Use case 01 Tijdens het weekeinde worden geen tickets voor het
rockconcert verkocht.
Use case 02 Uitverkochte concerten moeten worden vermeld.
Use case 03 Extra kortingen per concert moeten worden vermeld.
Opmerkingen
Het <content>-element van de lastminute-pagina hebben we als volgt gecodeerd:
<div class="content" data-role="content">
 <ul data-role="listview" data-split-theme="b">
 <li data-role="list-divider">POP</li>
 <li id="shakira-concert">
 <a href="#shakira-biopage">
 <img class="poster" src="shakiraposter.jpg"/>
 <h3>Shakira</h3><br />
 <p>AmsterdamArena</p>
 <p>Vandaag 22:00 uur</p>
 </a>
 <a href="#shakira-biopage"
 data-transition="slideup">
 </a>
 </li>
 </ul>
</div>
We hebben een <ul>-element met een speciale data-role="listview" gecodeerd.
Daarna zie je dat het <ul>-listview-element twee soorten <li>-child-elementen
heeft:
– het eerste <li>-element krijgt een data-role="list-divider";
– het tweede <li>-element heeft twee <a>-elementen.
In het eerste <a>-element zie je dat het mogelijk is om meerdere elementen zoals
een <p>- en een <img>-element binnen een <a>-element te plaatsen.
Child-selectors
Elementen met meer subelementen zijn parent-elementen en de subelementen zijn
child-elementen. Volgens bovenstaande code heeft het <ul>-element twee <li>-
child-elementen:
<li id="pop" data-role="list-divider">POP</li>
<li id="shakira-concert">
Child-elementen selecteren we met het teken >, bijvoorbeeld:
$('#content > ul > li')
Bovenstaande opdracht selecteert alle <li>-child-elementen van het <ul>-element,
binnen het element <div id="content">.
4.11 Use cases van de lastminute-pagina 333
$('#content > #shakira-concert > .poster')
Bovenstaande opdracht selecteert het element <img class="poster"> van het element <li id="shakira-concert"> binnen het element <div id="content">.
jQuery gebruikt de CSS-syntaxis voor classes en id’s:
# voor id
. voor class
De functie addClass()
De functie addClass() voegt de eigenschappen (properties) van een specifi eke CSSclass toe aan alle wrapper-elementen. Bijvoorbeeld:
$('#content> #specials').addClass('specials');
Hier hebben we de class specials aan alle elementen met id='specials' toegevoegd.
• Opgave 50: De functie addClass()
Zorg ervoor dat in fl ashtix.js de class .ui-corner-all wordt toegevoegd aan alle
posters van de lastminute-pagina.
$('#lastminutecontent > ul > li > a > img').addClass(
'ui-corner-all');
Het resultaat zijn afbeeldingen met afgeronde hoeken.
De functie CSS()
De functie css() voegt een nieuwe CSS-eigenschap toe aan het geselecteerde element. Bijvoorbeeld:
$('#content').css('width', 450);
Hier krijgt het element <div id= "content "> een breedte van 450 pixels.
• Opgave 51: De functie css
Open fl ashtix.js en voeg de volgende code toe.
$('#lastminutecontent > ul > li > a > img').css(
'border-radius','50%');
Het resultaat zijn afbeeldingen met afgeronde hoeken.
Eigenschap-selectors [ ]
We kunnen ook een individueel <li>-element selecteren en manipuleren door
naar de eigenschap van het element te zoeken. Hiervoor gebruiken we de vierkante
haakjes [ ]. Als je bijvoorbeeld het tweede <li>-element in de volgende lijst specials wilt selecteren:
334 4 jQuery
<ul id='spacials'>
 <li><a href='#cdspage'>CD's</a></li>
 <li><a href='#posterspage'>Posters</a></li>
</ul>
dan kun je specifi ek op de waarde van de eigenschap href= selecteren. Bijvoorbeeld:
$('[href="#posterspage"]')
Stel je voor dat de tickets voor het Shakira-concert zijn uitverkocht. Dan wil je dat
in je webpagina vermelden. Dat doen we in de volgende opgave.
• Opgave 52: Attributen selecteren [ ]
Open fl ashtix.js en voeg onderaan de volgende jQuery-opdracht toe:
$('[href="#shakira-biopage"]').
append('<p class="melding">Uitverkocht!</p>');
Maak deze opgave af door de melding voor het jazzconcert: Nog 10 kaarten! Het
resultaat moet zijn zoals in fi guur 4.41.
De functie show()
Met de functie show() maken we onzichtbare elementen weer zichtbaar.
De functie hide()
Stel je voor dat je besloten hebt dat er in de weekends geen lastminutes voor rockconcerten worden verkocht. In de volgende opgave coderen we het volgende: wanneer het weekend is, maken we alle rockconcerten onzichtbaar.
• Opgave 53: De functie hide( )
Open fl ashtix.js en voeg onderaan de volgende jQuery-opdracht toe:
datum = new Date();
if(datum.getDay()===6 || datum.getDay()===0){
 $('.rock').hide();
 $('#bruce-concert').hide();
}
Als het weekend is, moet het resultaat zijn zoals in fi guur 4.41.
4.11 Use cases van de lastminute-pagina 335
Figuur 4.41 De functie hide()
• Opgave 54: De functie hide()
Open fl ashtix.js en voeg onderaan de volgende jQuery-opdracht toe:
Zorg ervoor dat het concert van Jennifer Lopez onzichtbaar wordt.
• Opgave
Open fl ashtix.js en voeg onderaan de volgende jQuery-opdracht toe:
Voeg een afbeelding van een ster toe onderaan het Nora-concert.
De wildcard-selectors van CSS
Met de wildcard-selectors kunnen we elementen met specifi eke CSS-eigenschappen selecteren. Bijvoorbeeld eigenschappen die met een specifi eke tekst beginnen
of eindigen.
De beginwaardeselector [^=]
We kunnen een groep elementen selecteren door naar de waarde van de eigenschappen te zoeken. Door het teken (^) te gebruiken, kunnen we onze zoekopdracht verder uitbreiden. Bijvoorbeeld:
$('[href ^="#"]').hide();
In dit geval selecteren we alle elementen die een interne hyperlink hebben. Het
deel ^="#" betekent dat de eigenschap href= moet beginnen met de tekst "#".
336 4 jQuery
De eindwaardeselector [$=]
Als je wilt zoeken naar alle elementen met eigenschappen die met een bepaalde
tekst eindigen, gebruik je het teken $. Bijvoorbeeld:
$('[href $="biopage"]').hide();
Hiermee selecteer je alle elementen met href-eigenschappen die eindigen met
"biopage". Met andere woorden: alle links naar de biopagina’s.
De wildcard-selector [*=]
Als je op zoek bent naar elementen met een eigenschap met een bepaalde tekst
aan het begin, in het midden of aan het eind van de eigenschap, dan gebruik je het
teken (*). Bijvoorbeeld:
$('[href *="bio"] ').hide();
Hiermee selecteer je alle hyperlinks met daarin de tekst "bio".
De functie size()
De functie size() geeft als uitvoer het aantal elementen binnen een wrapper. Als
je bijvoorbeeld wilt weten hoeveel <li>-elementen er in de lastminute-pagina zijn,
doe je het volgende:
alert($('#lastminutecontent > ul > li').size());
De functie fi rst()
De functie first() geeft als uitvoer een nieuwe wrapper met het eerste element uit
de wrapper. Bijvoorbeeld:
$('#lastminutecontent > ul > li').first().hide();
De functie last()
De functie last() geeft als uitvoer een nieuwe wrapper met het laatste element uit
de wrapper. Bijvoorbeeld:
$('#lastminutecontent > ul > li').last().show();
De functie html()
Er zijn twee functies voor het ‘setten’ (instellen) en het ‘getten’ (lezen) van HTMLcontent binnen geselecteerde elementen. Met de functie html() kunnen we vragen
naar de HTML-content van een element. Bijvoorbeeld:
$('#shakira-concert a > h3').html();
Dit geeft als resultaat de tekst ‘Shakira’ binnen het <h3>-element:
<h3>Shakira</h3>
4.11 Use cases van de lastminute-pagina 337
De functie html(‘content’)
Met de functie html('content') kunnen we de content binnen een element wijzigen. Bijvoorbeeld:
$('#shakira-concert a > h3').html('Shakira!!!!!');
Hier vervangen we de content binnen het <h3>-element door:
<h3>Shakira!!!!!</h3>
Elementen verplaatsen
Het is mogelijke om een element overal in je webpagina te verplaatsen. Hiervoor
hebben we de functies before() en after().
De functies after() en before()
Stel dat je de volgorde van de concerten in de lastminute-pagina wilt veranderen.
Dan moet je eerst een doelelement selecteren en vervolgens een tweede element
verplaatsen naar voor of na dat doelelement. Bijvoorbeeld:
$('#nora-concert').after($('#shakira-concert'));
Hier hebben we het #nora-concert-element als doel geselecteerd en vervolgens het
#shakira-concert-element verplaatst naar onder het doel.
• Opgave 56: De functies after( ) en before( )
Open fl ashtix.js en voeg de volgende code toe:
$('#nora-concert').after($('#shakira-concert'));
Maak deze opgave af door ervoor te zorgen dat de elementen <li id='#jazz'> en
<li id='#nora-concert'> worden verplaatst naar boven het element <li id='#pop'>.
Het resultaat moet eruitzien zoals in fi guur 4.42.
338 4 jQuery
Figuur 4.42
De each (iterator)
each(iterator) doorloopt alle wrapper-elementen. Zo kunnen we operaties per
element uitvoeren. Om bijvoorbeeld acties bij elk <li>-element van de content uit
te voeren doe je het volgende:
$('#content > li').each(function(){acties;});
In het volgende voorbeeld doorlopen we alle <li>-elementen en voeren we de actie
show() uit binnen de anonieme functie bij alle elementen in de wrapper.
• Opgave 57: De each(iterator)
Open fl ashtix.js en voeg de volgende code toe:
$('#lastminutecontent li') .each(function(){
 $(this).show();
});
De functie insertBefore( )
Met de functies insertBefore() en insertAfter() kunnen nieuwe elementen toegevoegd worden tussen bestaande DOM-elementen. De syntaxis van insertBefore()
is:
$('nieuwe elementen').insertBefore(target-element)
of
$('nieuwe elementen').insertAfter(target-element)
4.12 Use cases van de biopagina 339
In de volgende opgave voegen we een afbeelding in bovenaan de content van de
lastminute-pagina.
• Opgave 58: De functie insertBefore()
Open fl ashtix.js en voeg de volgende code toe:
$('<img class="poster" src="kylieposter.jpg" alt="pic" width="35%" />')
.insertBefore('#lastminutecontent > ul');
Het resultaat moet eruitzien zoals in fi guur 4.43.
Figuur 4.43 De functie insertBefore
 4.12 Use cases van de biopagina
Planning Inleveren
Opgaven 59 t/m 64
De biopagina is in zijn geheel gewijd aan de artiesten. De informatie moet gerealiseerd worden zoals aangegeven in onderstaande use cases.
Use cases van de biopagina
Use case 01 De video- en de biografi e-elementen van de biopagina moeten gesplitst worden in twee tabs.
Use case 02 Er moeten tweets van de artiesten vertoond
worden in de videotab van de biopagina.
Opmerkingen
In deze paragraaf splitsen we de content van de biopagina in twee tabs. Hiervoor
coderen we eerst de twee tabs. Het <content>-element van de Shakira-biopagina
hebben we in paragraaf 4.5 gecodeerd.
340 4 jQuery
Je ziet dat we hier een <video>-element en een <p>-element binnen de content van
de biopagina hebben gecodeerd. We willen dat het <p>-element en het video-element onder een eigen tab komen te staan.
data-role= "tabs"
Met data-role= "tabs " kunnen we binnen het <content>-element een navbar-element coderen.
data-role= "navbar"
Met data-role= "navbar " kunnen we de links naar de tab-elementen coderen.
• Opgave 59: De navbar
Open index.html en vervang de content van de biopagina door de volgende tabs:
<div data-role="tabs" id="tabs">
 <div data-role="navbar">
 <ul>
 <li><a href="#video" data-ajax="false">Video</a></li>
 <li><a href="#bio" data-ajax="false">Biografie</a></li>
 </ul>
 </div>
</div> <!-- einde tabs -->
class= "ui-body-d"
De body of werkelijke tabs coderen we binnen class = "ui-body-d".
• Opgave 60: De eerste tab
Open index.html en voeg het volgende video-element onderaan het tabs-element
toe:
 <div id="video" class="ui-body-d ui-content">
 <h1>Video</h1>
 <video controls="controls" width="90%"
 preload id="video" poster="shakiraposter.jpg">
 <source src="wildlife.mp4" type="video/mp4"/>
 <source src="shakira.webm" type="video/webm"/>
 <source src="shakira.3gpp" type="video/3gpp"/>
 </video><!-- einde video -->
 </div>
In dit voorbeeld hebben we de content van de video-tab gecodeerd.
• Opgave 61: De tweede tab
Open index.html en voeg de content van de tweede tab met de biografi e tekst eraan toe. Het resultaat moet er als volgt uitzien:
4.12 Use cases van de biopagina 341
Figuur 4.44
De zoek-bar
In de volgende opgave coderen we een zoek-bar waar we een zoekterm kunnen
invoeren.
• Opgave 62: De eerste tab
Open index.html en voeg de volgende code aan de bio-tab toe:
<ul data-role="listview"
data-filter="true"
data-filter-reveal="true"
data-filter-placeholder="Zoek term ..."
data-inset="true">
 <li><a href="#">T-shirts</a></li>
 <li><a href="#">Boeken</a></li>
 <li><a href="#">Albums</a></li>
</ul>
jQuery-plug-ins
jQuery kan worden uitgebreid met plug-ins. Plug-ins zijn jQuery-functies met een
specifi eke oplossing die ontwikkeld zijn door andere softwaredevelopers. Er zijn
bijvoorbeeld meerdere plug-ins voor het canvas te vinden op internet. Jij kunt ook
zelf plug-ins ontwikkelen en op internet posten. Zo kunnen andere developers je
342 4 jQuery
plug-ins gebruiken. Meer informatie over het maken van plug-ins vind je via de
link
http:// docs.jquery.com/Plugins/Authoring.
Er is een interessante jQuery plug-in te vinden in op de site
http://plugins.in1.com/socialist.
Met deze plug-in kun je social-media-sites zoals Twitter, Facebook en LinkedIn in
je applicatie integreren. Download de plug-in en volg de stappen zoals beschreven
in de website.
• Opgave 63: jQuery-plug-ins
Open index.html en voeg de volgende links aan het <head>-element toe:
<link href="jquery.socialist.css" rel="stylesheet" />
<script src="jquery.socialist.js"></script>
Onderaan de video-tab van de Shakira-biopagina maak je het volgende <div>-element voor het weergeven van Shakira-tweets.
<div id="twittercontent"></div>
• Opgave 64: De Twitter-plug-in
Open fl ashtix.js en voeg de volgende code toe:
$('#twittercontent').socialist({
networks: [ {name: 'twitter',id: 'shakira'}
] });
Het resultaat zie je in fi guur 4.45.
4.13 Use cases van de bestelpagina 343
Figuur 4.45 jQuery-plug-ins
 4.13 Use cases van de bestelpagina
De bestelpagina is in zijn geheel gewijd aan het bestellen van gratis lastminutetickets. De informatie moet gerealiseerd worden zoals aangegeven in onderstaande
use cases.
Planning Inleveren
Opgaven 65 t/m 68
Use cases van de bestelpagina
Use case 01 Bij het verzenden van een bestelling krijgt de user via de
E-ticketspagina een e-ticket in de vorm van een QR-code
Opmerkingen
Om een digitaal ticket van de bestelling te versturen naar de app maken we gebruik
van AJAX.
Wat is AJAX?
AJAX is een mix van technologieën: HTML, JavaScript, XMLHttpRequest en een
server-side-programmeertaal zoals ASP (Active Server Pages) of PHP (Personal
Home Page). Met deze mix van technologieën kunnen we complexe, interactieve
344 4 jQuery
en gebruikersvriendelijke interfaces opbouwen. Eenvoudig gezegd: AJAX bestaat
uit de volgende vier stappen:
1 AJAX stuurt een httpRequest vanuit een webpagina naar een webserver.
2 De webserver vertaalt de request in een query-opdracht, bijvoorbeeld naar een
data base. De database geeft het resultaat terug.
3 AJAX verstuurt het resultaat naar de client/browser.
4 AJAX vernieuwt een deel van de webpagina met het resultaat van de httpRequest.
AJAX lost het probleem van het vernieuwen van webpagina’s op, zodat je zonder te
veel opnieuw laden van pagina’s (page reloads) snellere, dynamischer en interactievere webapplicaties kunt ontwikkelen.
De term AJAX staat voor asynchroon JavaScript en XML.
XML is een op tekst gebaseerde markup-taal. XML wordt meestal gebruikt om
data te beschrijven en te transporteren. Zo kun je data uitwisselen, delen en opslaan.
Met XMLHttpRequest kun je een aanvraag vanuit een webpagina naar een webserver sturen en een resultaat ontvangen zonder dat de hele webpagina opnieuw moet
worden geladen. De gebruiker ziet dezelfde webpagina terwijl gegevens worden
uitgewisseld met de server. Alleen een deel van de pagina wordt vernieuwd.
Tabel 6.5 Eigenschappen van XMLHttpRequest
Eigenschap Beschrijving
onreadystatechange Event-handler als request-status verandert
readyState
Deze getallen beschrijven de actuele request-status:
0 = UNSENT
1 = OPENED
2 = HEADERS_RECEIVED
3 = LOADING
4 = DONE
responseText Geretourneerde content
status Serverstatuscode: 200 voor succes, 404 voor niet gevonden
statusText Tekstmelding van de response
De functie $.ajax()
JQuery heeft het gebruik van AJAX voor ons eenvoudig gemaakt. Om een request
te versturen hebben we het volgende nodig:
• een POST- of GET-methode specifi ceren;
• een server-side URL die de request opvangt;
• een functie die informeert over de voortgang van de request.
In de volgende opgave coderen we de GET-methode van de functie $.ajax() om de
bestelling te lezen en om een digitaal ticket naar de app te versturen.
4.13 Use cases van de bestelpagina 345
• Opgave 65: De POST-methode van AJAX
Open fl ashtix.js en voeg de volgende code toe:
$('#submit').click(function(){
 var email = document.form.email.value;
 var concert = document.form.concert.value;
 $.ajax({
 type:'POST',
 url: 'getEticket.php',
 data: ({
 email: email,
 concert: concert
 }),
 cache: false,
 dataType: "text",
 success: onSuccess
 });
 . . .
});
De functie ajax() krijgt de volgende attributen:
– type: POST is de soort AJAX-transactie.
– url: is het server-script dat de transactie afhandelt.
– data: de verstuurde data.
– dataType: mag text of json zijn.
– success: is de functie die data uit de server terugkrijgt en verwerkt.
Er zijn twee mogelijke uitkomsten uit een AJAX-request: success of error. Op de
puntjes behandelen we de twee mogelijkheden.
• Opgave 66: ajaxError
Open fl ashtix.js en voeg de volgende code toe:
$('#log').ajaxError(function(event, request, settings, exception) {
 $('#log').html("Error: " + settings.url +
 "<br />HTTP Code: " + request.status);
});
In het geval van success moet de succesfunctie de melding ‘E-ticket voor concert is
besteld.’ vertonen en het e-ticket moet in localStorage opgeslagen worden.
• Opgave 67: ajax succes
Open fl ashtix.js en voeg de volgende code toe:
function onSuccess(data){
$('#form').append('<p>E-Ticket voor concert'+ concert +
 '</p><img src="'+ data + '" alt="pic" width="35%" />');
 localStorage.setItem(concert,data);
}
346 4 jQuery
Het server-script
Het server-script moet in dit geval een E-ticket in de vorm van een QR-code leveren. Om QR-code te genereren zoeken we een plug-in of server-library voor deze
taak. Een voorbeeld is de library gecodeerd door Kentaro Fukuchi en te vinden op:
http://phpqrcode.sourceforge.net/
Download en installeer deze library en gebruik deze in de volgende opgave.
• Opgave 68: Het serverscript
Typ het volgende php-script over en sla het op als getEticket.php.
<?php
 include("phpqrcode/qrlib.php");
 $email = $_REQUEST['email'];
 $concert = $_REQUEST['concert'];
 $filename = $email . $concert . '.png';
 QRcode::png("Gratis toegang tot concert $concert
 bij het vertonen van dit QR code", $filename);
 $eticket= "http://localhost:8888/Flashtix/$filename";
 echo $eticket;
?>
De echo-opdracht is de URL van het e-ticket doorgegeven aan de succesfunctie.
Het resultaat zie je in fi guur 4.46. Klik op Control-Shift-C en kies Resources om
naar je Local Storage te kijken.
LET OP
Controleer de instellingen van je webbrowser om je localStorage te activeren.
Figuur 4.46 Local Storage met link naar e-ticket
 4.14 De e-ticketspagina
In deze paragraaf maken we een functioneel ontwerp voor de e-ticketspagina. Het
doel van deze pagina is om alle e-tickets in de localStorage te vertonen.
Planning Inleveren
Opgaven 69 t/m 72
4.14 De e-ticketspagina 347
Functioneel ontwerp van de eticketspagina
In het functioneel ontwerp van de e-ticketspagina tekenen we een <header>-
element met de header-navigatie, gevolgd door een <content>-element met daarin
de e-tickets in QR-code uit de localStorage. Als laatste tekenen we het <footer>-
element met de footer-navigatie.
Figuur 4.47 Draadmodel van de eticketspagina
De beschrijving van de e-ticketspagina ziet er als volgt uit:
Functioneel ontwerp van de e-ticketspagina
Beschrijving De e-ticketspagina toont alle e-tickets
uit je localStorage
Header-element
Navigatie-elementen
Link naar vorige bestelpagina
Link naar homepage
Content-element E-tickets
Footer-element Link naar agendapagina
Link naar locatiepagina
Opmerkingen
• Opgave 69: De e-ticketspagina
Open index.html en codeer het volgende <div data-role="page">-element onderaan de agendapagina.
<div data-role="page" class="page" id="eticketspage">
 . . .
</div><!-- einde eticketspage -->
Op de puntjes coderen we in de komende opgaven meer content.
348 4 jQuery
• Opgave 70: Header en footer van e-ticketspagina
Open index.html en codeer het header- en footer-element met de navigatie volgens het draadmodel in fi guur4.47.
• Opgave 71: Content van e-ticketspagina
Open index.html en codeer het content-element als volgt:
<div data-role="content" class="content" >
 <div id="etickets"></div>
</div><!-- einde content -->
Use cases van de e-ticketspagina
In deze paragraaf coderen we nieuwe functionaliteit voor de e-ticketspagina zoals
beschreven in de volgende use cases:
Use cases van de e-ticketspagina
Use case 01 Wanneer de gebruiker naar de e-ticketspagina
navigeert ziet hij/zij de bestelde gratis e-tickets
Opmerkingen
In de volgende opgave zoeken en vertonen we e-tickets vanuit localStorage.
• Opgave 72: Toon e-tickets
Open fl ashtix.js en voeg de volgende code toe:
if(localStorage.getItem('bruce')!== null){
 eticket = localStorage.getItem('bruce');
 $('#etickets').append(
 '<p>E-Ticket Concert Bruce Springsteen</p><img src="'+
 eticket + '" alt="pic" width="35%" />');
}
if(localStorage.getItem('shakira')!== null){
 eticket = localStorage.getItem('shakira');
 $('#etickets').append(
 '<p>E-Ticket Concert Shakira</p><img src="'+ eticket +
 '" alt="pic" width="35%" />');
}
 4.15 De agendapagina
In deze paragraaf maken we het functioneel ontwerp voor de agendapagina. Het
doel van deze pagina is om een agenda bij te houden van belangrijke concertdata,
bijvoorbeeld de datum en tijd van concerten en de locatie.
4.15 De agendapagina 349
Planning Inleveren
Opgaven 73 t/m 80
Functioneel ontwerp van de agendapagina
In het functioneel ontwerp van de agendapagina tekenen we een <header>-element
met de header-navigatie, gevolgd door een <content>-element met daarin agendaregels. Als laatste tekenen we het <footer>-element met de footer-navigatie.
Figuur 4.48 Draadmodel van de agendapagina
De beschrijving van de agendapagina ziet er als volgt uit:
Functioneel ontwerp van de agendapagina
Beschrijving De agendapagina toont reminders van concerten
Header-element
Navigatie-elementen
Link naar homepage
Link naar agendapagina
Link naar lastminute-pagina
Content-element
Agenda-items
Een datumveld
Een tekstveld
Footer-element Link naar agendapagina
Link naar locatiepagina
Opmerkingen
350 4 jQuery
Use cases van de agendapagina
In deze paragraaf coderen we nieuwe functionaliteit voor de agendapagina zoals
beschreven in de volgende use cases:
Use cases van de agendapagina
Use case 01 Wanneer de gebruiker op de plus-knop klikt, wordt
een nieuw agenda-item gemaakt.
Use case 02 Wanneer de gebruiker op de aanvink-knop klikt,
wordt een agenda-item aangevinkt.
Use case 03 Wanneer de gebruiker op de min-knop klikt, wordt
een aanvinking ongedaan gemaakt.
Use case 04 Wanneer de gebruiker op de del-knop klikt, wordt een
item verwijderd.
Use case 05 Wanneer de gebruiker op de refresh-knop klikt, wordt
de agenda in local storage opgeslagen.
Use case 06 Wanneer de gebruiker de applicatie opstart, worden
alle agenda-items vanuit local storage vertoond.
Opmerkingen
De content van de agendapagina moet een lijst met knoppen voor de volgende
functionaliteiten hebben:
• selecteer item;
• selectie ongedaan maken;
• item toevoegen;
• item verwijderen;
• agenda opslaan.
Codering van de agendapagina
In de volgende opgave coderen we de header- en footer-elementen van de agendapagina. We beginnen met het coderen van de knoppen en daarna voegen we de
functionaliteit aan de knoppen toe.
De knop Item toevoegen
In de volgende opgaven coderen en koppelen we functionaliteit aan de knop Item
toevoegen.
• Opgave 73: Content van agendapagina
Open index.html en codeer de volgende content binnen de agendapagina:
<div data-role="content" class="content" >
 <div data-role="controlgroup" data-type="horizontal">
 <a href="#agendapage" data-role="button"
 data-icon="check" id="sel"
 data-iconpos="notext">Select</a>
4.15 De agendapagina 351
 <a href="#agendapage" data-role="button"
 data-icon="plus" id="add"
 data-iconpos="notext">Add</a>
 <a href="#agendapage" data-role="button"
 data-icon="delete" id="del"
 data-iconpos="notext">Delete</a>
 <a href="#agendapage" data-role="button"
 data-icon="refresh" id="sav"
 data-iconpos="notext">Save</a>
</div>
 <div id="agendalijst"></div>
</div><!-- einde content -->
• Opgave 74: Item toevoegen
Open fl ashtix.js en voeg de volgende code toe.
$('#add').bind('click',function() {
 $('#agendalijst').append('<li class="agendaitem">'+
 '<input class="itembox" type="checkbox"/>'+
 '<input type="date" value="" id="itemdate" />'+
 '<input id="itemtext" type="textarea" '+
 'placeholder="to do ..." /></li>');
});
• Opgave 75: Agendastijlen
Open mijnstyles.css en voeg de volgende code toe.
#agendalijst{
 padding: 0px 10px 0px 10px;
 list-style-type: none;
 width: 95%;
}
.agendaitem{
 padding: 0px 0px 0px 0px;
 backgroundColor: #F7F387;
 border: 0px;
 border-bottom: solid 1px #3DD0B3;
 text-align: left;
}
#itemdate{
 backgroundColor: #F7F387;
 border: 0px;
 width: 35%;
}
#itemtext{
 backgroundColor: #F7F387;
 border: 0px;
 width: 50%;
}
Als je vier keer op de plus-knop klikt, krijg je het resultaat zoals in fi guur 4.49 voor
het selecteren van een datum.
352 4 jQuery
Figuur 4.49 Toegevoegde items
De knop Selecteren
We willen een knop coderen die alle agenda-items kan selecteren door het keuzevakje (checkbox) van alle items aan te vinken. In de volgende opgave coderen we de
knop en koppelen we de functionaliteit eraan.
• Opgave 76: Selecteer alle items
Open mijnjquery.js en voeg de volgende codes eraan toe.
$('#sel').bind('click',function() {
 $('.itembox').each(function(){
 $(this).click();
 });
});
Het resultaat is dat als je op de knop #sel klikt alle selectievakjes worden aangevinkt (fi guur 4.50).
4.15 De agendapagina 353
Figuur 4.50
• Opgave 77: Selecteer/deselecteer alle items
Open fl ashtix.js en voeg de volgende functionaliteit toe.
Verander de functionaliteit van de Select-knop zodat als je een tweede keer op de
knop klikt alle selectievakjes leeg worden gemaakt.
Local storage
Nadat je de agenda-items hebt toegevoegd die je ziet in fi guur 4.51 ga je de agenda
in local storage opslaan.
Figuur 4.51 Save agenda-items
In de volgende opgave coderen we deze knop en koppelen we de functionaliteit
eraan.
354 4 jQuery
• Opgave 78: Bewaar alle items
Open fl ashtix.js en voeg de volgende code toe:
$('#sav').bind('click',function() {
 localStorage.clear();
 var teller = 0;
 $('.agendaitem').each(function(){
 itemdate = $(this).children('input: eq(1)').val();
 itemtext = $(this).children('input: eq(2)').val();
 if(itemdate === null) return;
 teller++;
 obj = {
 id: teller,
 datum: itemdate,
 tekst: itemtext
 }
 localStorage.setItem(teller,JSON.stringify(obj));
 });
});
Het resultaat is dat als je op de knop #sav klikt, alle agenda-items in local storage
worden opgeslagen. Als je kijkt naar de local storage in je browser, moet je hetzelfde kunnen zien als in fi guur 4.51.
De agenda opnieuw laden
Dit is de laatste stap voor onze agendapagina. In deze stap coderen we een functie zodat elke keer als je de agendapagina opent, alle agendagegevens vanuit local
storage opnieuw in de agendapagina worden geladen. Vervolgens worden de gegevens opnieuw in de agendapagina geladen.
• Opgave 79: Agenda opnieuw laden
Open fl ashtix.js en voeg de volgende code toe:
for (var i=1;i<= localStorage.length;i++){
 if(localStorage.getItem(i)=== null){ continue;}
 read_obj = JSON.parse(localStorage.getItem(i));
 tekst = read_obj.tekst;
 datum = read_obj.datum;
 $('#agendalijst').append(
 '<li class="agendaitem">'+
 '<input class="itembox" type="checkbox"/>'+
 '<input type="date" value="' +
 datum + 'id="itemdate" />'+
 '<input id="itemtext" type="textarea" '+
 'value="' + tekst + '" /></li>');
}
De knop Verwijderen
Stel dat je het laatste item (zie fi guur 4.52) wilt verwijderen. Dan moet je eerst het
item selecteren en daarna alle geselecteerde items verwijderen. Dat gebeurt in de
volgende opgave.
4.16 De locatiepagina 355
Figuur 4.52 Aangevinkte items verwijderen
• Opgave 80: Verwijder aangevinkte items
Open fl ashtix.js en voeg de volgende code toe:
$('#del').bind('click',function() {
 $('.itembox').each(function(){
 var itemChecked = $(this).prop('checked');
 if(itemChecked){
 $(this).parent().remove();
 }
 });
});
Het resultaat is dat als je op de knop #del klikt, alle geselecteerde agenda-items
vanuit je local storage worden verwijderd. Als je naar de local storage in je browser
kijkt, moeten de aangevinkte items verwijderd zijn.
 4.16 De locatiepagina
In deze paragraaf maken we het functioneel ontwerp van de locatiepagina. Het
doel van deze pagina is om een Google-map met de locaties van de verschillende
concertpodia te tonen.
Planning Inleveren
Opgaven 81 t/m 87
356 4 jQuery
Functioneel ontwerp van de locatiepagina
In het functioneel ontwerp van de locatiepagina tekenen we een <header>-element
met de header-navigatie, gevolgd door een <content>-element met daarin een
Google-map met de concertlocaties. Als laatste tekenen we het <footer>-element
met de footer-navigatie.
De beschrijving van de locatiepagina ziet er als volgt uit:
Figuur 4.53 Google-map
Functioneel ontwerp van de locatiepagina
Beschrijving De locatiepagina toont een Google-map
Header-element
Navigatie-elementen
Link naar homepage
Link naar vorige agendapagina
Link naar bestelpagina
Content-element Google-map met locatie van de verschillende
concertpodia
Footer-element Link naar agendapagina
Link naar locatiepagina
Opmerkingen
Codering van de locatiepagina
In de volgende opgave coderen we de locatiepagina met een Google-map en de
locaties van de concertpodia.
4.16 De locatiepagina 357
• Opgave 81: De locatiepagina
Open index.html en codeer het volgende element <div data-role="page"> onderaan de locatiepagina.
<div data-role="page" id="locationpage" class="page">
.. .
</div><!-- einde locationpage -->
Op de puntjes coderen we in de komende opgaven meer content.
Header en footer van de locatiepagina
In deze paragraaf coderen we het header- en footer-element van de locatiepagina
volgens het functioneel ontwerp.
• Opgave 82: Header en footer van de locatiepagina
Open index.html en codeer het header- en footer-element met de navigatie zoals
in fi guur 6.28 te zien is.
Use cases van de locatiepagina
Hier coderen we nieuwe functionaliteit voor de locatiepagina zoals aangegeven in
de volgende use cases:
Use cases van de locatiepagina
Use case 01 Wanneer de gebruiker de locatiepagina opent, ziet hij
een Google-map met de locaties van de concertpodia
De content van de locatiepagina moet een kaart vanuit de Google-servers weergeven. De kaart krijgt markeringen op de verschillende adressen van de concertpodia
Om gebruik te maken van Google Maps moet je je eigen developer-key van de volgende Google-site halen:
https://developers.google.com/maps/documentation/javascript/get-api-key
Nadat je je eigen API_KEY hebt gekregen, maak je de volgende opgave.
• Opgave 83: Link naar Google-Maps-libraries
Open index.html en voeg de volgende link toe aan het <head>-element naar de server van Google Maps:
<script
src="http://maps.google.com/maps/api/js?sensor=false
&libraries=geometry&v=3.22&key=YOUR_API_KEY">
</script>
358 4 jQuery
Het attribuut sensor=false betekent dat we geen gps willen gebruiken. YOUR_API_
KEY moet je zelf bij Google ophalen.
Content van de locatiepagina
We beginnen met het coderen van de content van de locatiepagina. Hier maken we
een Google-map.
• Opgave 84: Google-map-tag
Open index.html en voeg de content van de loatiepagina eraan toe:
<div data-role="content" class="content" id="googlemap" >
 <div id="gmap" style="width: 100%;height: 100%;"></div>
</div><!-- /content -->
We hebben de coördinaten van een locatie nodig, bijvoorbeeld Paradiso in Amsterdam. Ga naar de volgende URL en typ het adres om de coördinaten te krijgen:
http://www. mapcoordinates.net/en
Van de site krijgen we de volgende coördinaten:
latitude = 52.3622774
longitude = 4.883945
• Opgave 85: Google-map maken
Open fl ashtix.js en voeg de volgende code eraan toe:
var positie = new google.maps.LatLng(52.3622774,4.883945);
var mapOptions = {
 zoom: 4,
 center: positie
}
var map = new google.maps.Map(document.getElementById("gmap"), mapOptions);
Het resultaat zie je hieronder:
4.16 De locatiepagina 359
Figuur 4.54 Google-map
LET OP
Als je geen Google-map te zien krijgt, probeer de pagina in je browser dan weer te
laden totdat je de map ziet.
Google-markers
Om markers in je Google-map te kunnen plaatsen voer je de volgende opgave uit.
• Opgave 86: Markers in je Google-map
Open fl ashtix.js en voeg de volgende code eraan toe.
var marker = new google.maps.Marker({
 position: positie,
 title:'Paradiso: Weteringschans 6,\n' +
 '1017 SG Amsterdam \n'+
 'Telefoon 020 222 22222'
});
// maak de marker
marker.setMap(map);
360 4 jQuery
Figuur 4.55 Het resultaat van opgave 52: Google-map met markers
• Opgave 87: Meer markers in je Google-map
Open fl ashtix.js en voeg markers voor de volgende twee podia toe:
– Melkweg
– Bimhuis
361
CSS
selecteren 15
CSS-attributen
background 44
background-color 16
background-color 25
background-position 45, 75
background-url 45
border-radius 47
box-shadow 21
capitalize 74
centreren 26
class 15
clear 39
color 15, 16
display block 37
fl oat 38
font 26
font-size 26
font-weight 27
gradient 39
height 16
id 15
in line 18
list-style-type 37
lowercase 74
margin 25
overfl ow 25
padding 20
position 51
rgb 29
rgba 32
text-align 15, 25
text-decoration 40
uppercase 74, 75
width 16
z-index 56
css-functie 333
CSS-klassen
pseudo 40
CSS sub attributen
declareren 27
D
datalist 80
data-role
content 284
footer 284
header 284
page 284
data-theme
b 291
B
background 44
background-color 16
backgroundColor 25
background-position 45, 75
background size 92
background-url 45
before functie 337
Beslissingsstructuren
do-while lus 196
if else 166
lussen 184
bind functie 319
bind function 256
boolean 133
border-radius 47
box-shadow 21
browser
download 6
browser prefi x 48
C
callback-functies 259
call-functie 254
canvas 324
Canvas
clearRect 327
fi llRect 327
fi llStyle 326
gradient 326
strokeRect 327
capitalize 74
CDN
content delivery network 284
centreren 26
chaining-properties 266
charAt 187
charAt string methode 204
charset 9
Class
ui-grid-b 290
class-diagram 235
class met methoden 236
class met properties 236
clear 39
clearTimeout 216
closure-functies 261
colspan 71
constructor pattern 240
Register
~ 110
A
absolute positie 54
addClass-functie 333
after-functie 337
ajax-functie 344
anonieme functies 259
append-functie 314
apply-functie 256
Apps
frameworks 279
hybride apps 279
meta viewport 284
native apps 278
webapps 278
Array
declareren 138
element declareren 138
element verwijderen 147
multidimensionaal 140
pointers 142
transporteren 149
Array-methodes
indexOF 147
join 150
lenght 154
pop 144
push 144
reverse 146
shift 143
sort 146
splice 145
typeof 148
unshift 144
array-object 152
attributen
data-icon 295
label for 308
placeholder 308
text-transform 74
Attribuut-data-iconpos 295
Audio
element 73
formats 73
source 73
362 Register
I
if else 166
indexOf array 147
indexOf string-methode 202
inheritance 244
in line 18
input type =\“checkbox\” 82
input type =\“date\” 81
input type =\“radio\” 81
input type =\“textarea\” 82
J
JavaScript
console 125
taalcomponenten 124
join array 150
jQuery
addClass 333
after 337
ajax 344
append 314
before 337
bind 319
css 333
die 323
DOM laden 314
fi rst 336
hide 334
html 336
last 336
live 323
one 323
prepend 314
remove 317
show 334
size 336
trigger 323
unbind 322
JS-methoden
charAt 187
clearTimeout 216
document.write 124
parseFloat 134
parseInt 134
prompt 125
setTimeout 215
toString 135
typeof 132
undefi ned 136
element kopiëren met slice 149
element verwijden met
splice 148
element verwijderen 147
em 87
encapsulation 246
F
fi rst-functie 336
fi xed 52
fl oat 38
font 26
font-size 26
font-weight 27
formulieren
<datalist> 80
element 78
input type =\“checkbox\” 82
input type =\“date\” 81
input type =\“radio\” 81
input type =\“textarea\” 82
legend 79
<option> 81
<select> 81
frameworks voor apps 279
G
geneste object literals 266
Google
markers 359
gradient 39
H
heredity 262
hide-functie 334
HTML
Character Entity Encoding 60
editors 3
elementen 4
evolutie 1
symbolen 60
html-functie 336
hybride apps 279
hyperlinks
active 41
focus 41, 43, 50
hover 41
visited 41, 43
data-transition
slide 291
datatype
boolean 133
NaN 136
string 132
date object 156
description 9
destructor 239
die-functie 323
display block 37
display fl ex 103
document.write 124
DOM
window-events 214
do-while-lus 196
drawer-menu 105
E
elementen
<a> 34
<audio> 73
<body> 10
canvas 324
commentaar 5
<div> 10
<!DOCTYPE> 5
<em> 87
<footer> 10
<form> 78
<h1> tot <h6> 11
<head> 6
<html> 5
<li> 34
<link> 23
<main> 10
<mark> 87
<nav> 10, 34
<ol> 34
<section> 10
semantische 10
sluiten> 5
<source> 68
<strong> 87
<tbody> 71
<tfoot> 70
<th> 70
<thead> 70
<title> 6
<tr> 70
<ul> 34
<video> 67
Register 363
pop array 144
position
absolute 54
fi xed 52
prepend-functie 314
prompt 125
prototype pattern 242
pseudoklassen
active 41
hover 41
push array 144
R
random math methode 200
remove-functie 317
responsive design 88
return-functies 260
reverse array 146
rgb 29
rgba 32
round math-methode 200
S
select 81
setTimeout 215
shift array 143
show-functie 334
size-functie 336
slide-transition 291
sort array 146
splice array 145
split string-methode 204
string 132
string-methodes
charAt 204
indexOf 202
split 204
substr 206
substring 205
toLowerCase 206
toUpperCase 206
strong 87
subclass 236
substring-methode 205
substr string-methode 206
symbolen in HTML 60
max math-methode 199
media query 91
meta-elementen
author 9
charset 9
description 9
keywords 9
language 9
refresh 9
robots 9
meta viewport 284
methode overschrijven 246
methodes
play 73
min math-methode 199
mobiele emulator 281
N
NaN 136
native apps 278
O
objecten berichten sturen 243
objecten bundelen 267
object literals 264
one-functie 323
OOP
constructor pattern 240
delete 247
destructor 239
encapsulation 246
heredity 262
inheritance 244
methode overschrijven 246
objecten communiceren 243
prototype pattern 242
webshop 270
opacity 40, 48
operatoren 127
option 81
overfl ow 25
overload-operatoren 129
P
padding 20
parseFloat 134
parseInt 134
pixels 15
play 73
JS-objecten
array 152
date 156
JSON
chaining properties 266
geneste object literals 266
objecten bundelen 267
object literals 264
JS speciale functies
anonieme 259
apply 256
bind 256
call 254
callback 259
closure 261
return 260
zelfuitvoerende 260
L
last-functie 336
legend 79
lenght array 154
link 23
lists 34
list-style-type 37
live-functie 323
localStorage
lezen 269
lowercase 74
lussen 184
M
margin 25
mark 87
Material design
beweging 99
cards 114
hiërarchie 101
interactie 101
licht 98
objecten 97
omvorming 98
schaduw 98
tabs 112
z-as 96
Math
max 199
min 199
random 200
round 200
364 Register
W
webapps 278
webpagina
layout 1
window-events in DOM 214
write 124
Z
zelfuitvoerende functies 260
z-index
lagen 56
U
UML
class diagram 235
class met methoden 236
class met properties 236
subclass 236
unbind-functie 322
undefi ned 136
unshift-array 144
uppercase 74, 75
url 43
V
variabelen 126
Video
conversies 69
formats 68
videoconversies 303
T
taalcomponenten 124
tabellen
body 71
colspan 71
footer 70
kolom 70
kop 70
rij 70
testen in de cloud 286
text-decoration 40
text-transform 74
toLOwerCase string-methode 206
toString 135
toUpperCase string-methode 206
translate3d 109
trigger-functie 323
typeof 132
typeof array 148