1 Kennismaken met JavaScript 1
Een korte geschiedenis van JavaScript 2
Brendan Eich 2
ECMAScript, JavaScript en versienummers 2
Waarvoor wordt JavaScript gebruikt? 4
Kernbegrip – JavaScript core 5
Indeling van dit boek 6
Oefenbestanden downloaden 6
Voorkennis 7
Bekendheid met HTML en CSS 7
Wat hoeft u niet te weten? 8
Ontwikkelhulpmiddelen voor JavaScript 8
JavaScript-debuggers 10
Uw eerste JavaScript 11
Commentaar gebruiken 11
JavaScript-functies 13
Parameters en prompt() 13
Een inline event handler schrijven 15
De debugger gebruiken 17
JavaScript-code in extern bestand 20
Conclusie 21
Praktijkoefeningen 22
2 Statements, gegevenstypen en variabelen 25
De syntaxis van JavaScript 26
Statements 26
Structuur van statements 27
Hoofdletters en kleine letters 27
Werken met variabelen 28
De naamgeving van variabelen 29
Gereserveerde woorden 30
Commentaar 30
Gegevenstypen 31
Primitieve- of enkelvoudige gegevenstypen 31
Strongly typed en loosely typed 32
Numbers 33
Getallen converteren met parseInt() en parseFloat() 33
Verkorte schrijfwijze: het plusteken 35
Verkorte schrijfwijze: nesting 36
Tekenreeksen of strings 36
Lege string 36
Speciale tekens in strings 37
Escapetekens 37
Een backslash tonen 38
Werken met stringfuncties 38
Booleaanse waarden 39
Objecttypen 40
Conclusie 41
Praktijkoefeningen 41
3 Operatoren 43
Variabelen bewerken met operatoren 44
Toewijzingsoperatoren 44
Verkorte schrijfwijze 45
Nog kortere schrijfwijze: increment en decrement 45
Wiskundige operatoren 46
Stringoperatoren 46
Logische operatoren 47
Vergelijkingsoperatoren 48
De operatoren == en === 48
Drie isgelijktekens 49
De voorwaardelijke operator ?, : 50
De operator typeof 51
Bewerkingsvolgorde 52
Voorrangsregels of operator precedence 52
Voorbeelden 54
Bij twijfel, gebruik haakjes! 54
Praktijkoefeningen 54
4 Program flow controleren 57
Inleiding – verschillende typen lussen 58
If-else 58
Accolades 59
else 60
Veelgemaakte fout: toekenning in plaats van vergelijking 60
Nogmaals: de vergelijkingsoperator 60
Conclusie 61
while() 62
Het statement for() 63
Drie parameters voor de for-lus 63
Voorbeeld – de tafel van tien met for() 64
De statements break, continue en return 65
Het statement for-in 66
Conclusie 68
Praktijkoefeningen 68
5 Beginnen met functies, arrays en objecten 71
Complex gegevenstype 1 – Functies 72
Herhaald taken uitvoeren 72
Structuur van een functie 73
Moderne notatie 73
Anonieme functies 73
Functies aanroepen 74
Parameters 75
Parameters doorgeven 76
Naamgeving van parameters binnen en buiten de functie 76
Regels voor parameters 77
Waarden retourneren 78
Eén waarde retourneren 78
Returnwaarde toekennen 79
Meerdere waarden retourneren 79
Moderne syntaxis, de arrow function 80
Kenmerken 80
Eén parameter voor de functie 81
Meerdere parameters voor de functie 81
Complex gegevenstype 2 – Arrays 82
Arrayelementen uitlezen en toevoegen 83
Arrays in de debugger 83
Lengte van array 84
Handboek – JavaScript & jQuery
Arraymethoden 85
.join() 85
.reverse() 86
.sort() 86
Gevorderd – eigen sorteerfunctie meegeven 87
.push() 88
.pop() 88
Overige arraymethoden 88
.forEach() 89
Gevorderd – Meer arraymethoden 90
.map() 90
.filter() 91
.reduce() 92
Meer arraymethoden 94
Complex gegevenstype 3 – Objecten 94
Eigenschappen, namen en waarden 94
Accolades 95
Complexe objecten 96
this 96
Classes gebruiken 96
Waarden van objecten uitlezen 97
Conclusie 99
Praktijkoefeningen 99
6 JavaScript-events en event handlers 101
Wat zijn events? 102
Procedureel programmeren 102
Eventgeoriënteerd programmeren 102
Naamgeving van events 103
Target 104
Event handlers of callbacks 104
De functie addEventListener() 105
Voorbeelden van events en event handlers 106
Controleren of het document geladen is 106
Muisevents afvangen 108
De parameter e gebruiken in event handlers 110
Eigenschappen van de event e analyseren 112
Klikken op knoppen afvangen 114
Alternatieve notaties voor de event handler 115
Inhoud van een tekstvak ophalen 116
Toetsenbordevents afvangen 118
Conclusie 120
Praktijkoefeningen 121
7 Werken met het DOM 125
Wat is het DOM? 126
Begrippen 127
Elementen in het DOM selecteren 128
Selecteren via id 129
Selecteren via type 129
Selecteren via CSS-klasse 130
querySelector() en querySelectorAll() – selecteren met CSS-selectors 132
Voorbeeld – radiobuttons selecteren en uitlezen 133
Elementen in het DOM toevoegen en verwijderen 135
Elementen maken met document.createElement() 135
Textnodes maken 136
Elementen invoegen in het DOM 136
.appendChild() 137
.insertBefore() 138
.removeChild() 139
.replaceChild() 140
Overige DOM-functies 141
Conclusie 142
Praktijkoefeningen 143
8 Kennismaken met jQuery 145
Wat is jQuery? 146
jQuery – sinds 2006 146
jQuery in een notendop 148
Waarom jQuery gebruiken? 148
Versies van jQuery 149
Varianten van jQuery 150
Praktijk – jQuery toevoegen en gebruiken 151
jQuery insluiten in de pagina 151
Werken met een Content Delivery Network, CDN 152
Enkele jQuery-basisvoorbeelden 153
HTML-code 153
Selecties maken 153
Het jQuery-object 154
Chaining 155
De jQuery API 156
Elementen selecteren met jQuery 157
De functie document.ready() 159
Enkele korte voorbeelden 161
Oefeningen 162
Conclusie 163
Praktijkoefeningen 163
9 jQuery API: HTML- en CSS-functies 165
CSS-eigenschappen lezen en schrijven 166
De functie .css() 166
Voorbeeld van .css() 166
Opties meegeven als object 167
Configuratieobject 168
.addClass() en .removeClass() 168
.toggleClass() 170
.hasClass() 171
Werken met HTML en attributen 173
Voorbeeld-HTML 173
.html() 173
.text() 174
.attr() 175
Object meegeven als parameter 177
Elementen invoegen en verwijderen uit het DOM 178
.append() en .prepend() 178
.before() en .after() 179
.appendTo() en .prependTo() – Andere manieren van invoegen 179
.wrap() en .wrapInner() – Elementen omsluiten 180
.empty() en .remove() – Elementen verwijderen 181
Formuliervelden verwerken met jQuery 182
.val() 182
.is() 183
Keuzerondjes uitlezen 184
Selectievakjes uitlezen en de functie .each() 185
Conclusie 187
Praktijkoefeningen 188
10 jQuery-animatiefuncties 191
Basisanimatiefuncties 192
Inleiding 192
Animatiesnelheid 192
Standaardcode bij de voorbeelden 193
.hide() en .show() – Eenvoudige animatie 193
.toggle() 194
.slideDown() en .slideUp() 195
.slideToggle() 196
Elementen infaden en uitfaden 196
.fadeIn() en .fadeOut() 196
.fadeToggle() 197
.fadeTo() – Zelf transparantie instellen 197
Callbackfuncties na animatie 198
Asynchroon 198
Callbackfunctie 199
Arrow functions gebruiken 200
Eigen animaties maken met .animate() 201
Parameters voor .animate() 201
Configuratieobject 202
Callback na animatie 202
Reset? Zelf schrijven! 203
Wat kunnen we animeren en hoe? 204
Relatieve notaties 204
Easing gebruiken 206
Meer easingmogelijkheden 207
Plug-in van easings.net gebruiken 208
Geavanceerde animatiefuncties 208
Globale eigenschappen voor animaties 209
Case: tabbladen maken 210
Tabbladen als user interface 210
Stap 1 – de tabs maken 210
Stap 2 – de inhoud van de tabs maken 211
Stap 3 – de tabs vormgeven 211
Stap 4 – de tabs functionaliteit geven 213
Tabs faden 214
Case: een luxe tooltip 214
Stap 1 – de HTML-code 214
Stap 2 – CSS schrijven voor de tooltip 215
Stap 3 – het script schrijven 215
Stap 4 – de tooltip tonen en verbergen 216
Stap 5 – de muis volgen 216
Stap 6 – de browsertooltip verwijderen 217
Conclusie 219
Praktijkoefeningen 219
11 Eventafhandeling in jQuery 221
Eenvoudige event binding en -afhandeling 222
Eenvoudige events 222
.click() 222
.hover() 224
.focus() en .blur() 226
Betere eventafhandeling met .on() 228
Fragmentatie 228
Live events met .on() 229
Context selector 230
Handboek – JavaScript & jQuery
Live events in lijsten 231
.off() 233
Event object 233
Muispositie onderzoeken 234
Het event object inspecteren 234
Conclusie 235
Browser events 236
Formulierevents 236
.focus() en .blur() 236
.select() 236
.change() 237
.submit() 238
Toetsenbordevents 239
Muisevents 240
Conclusie 241
Live event binding 241
Praktijkoefeningen 242
12 jQuery en Ajax 245
Wat is Ajax? 246
Ajax, XML en JSON 246
Ajax in de browser en op de server 247
jQuery en Ajax 248
Ajax – alleen in combinatie met een server 248
Het object XMLHttpRequest 248
Een kleine webserver met serve 249
HTML-documenten laden met .load() 250
Debuggen van netwerkverkeer 251
Toepassingen 252
Uitbreidingen van .load() 253
Aangegeven fragment laden 253
Gegevens meesturen 254
Callbackfunctie uitvoeren 254
JavaScript same origin policy 255
Geen foutmelding bij .load() 256
jQuery Ajax-functies 257
$.ajax() 258
De functie .ajax() 258
Opbouw van $.ajax() 258
Success-callback voor $.ajax() 259
Foutafhandeling 260
Meer parameters voor $.ajax() 262
Het object jqXHR 263
Enkele veelgebruikte parameters 263
Case – werken met openweathermap.org 264
Stap 1 – wat is openweathermap.org? 264
Stap 2 – de interface 265
Stap 3 – het script beginnen 266
Stap 4 – de Ajax-call schrijven 266
Stap 5 – de eerste versie testen 266
Stap 6 – Gegevens tonen in de UI 268
Stap 7 – gegevens aanpassen en UI uitbreiden 268
Stap 8 – foutcontrole inbouwen 270
Meer API‘s 271
Standaardinstellingen maken met .ajaxSetup() 272
Ajax-events 273
Toepassingen van Ajax-events 274
Conclusie 274
Praktijkoefeningen 275
13 Werken met jQuery UI 277
Wat is jQuery UI? 278
Andere projecten 278
Onderdelen van jQuery UI 279
Leer de algemene werkwijze 279
Aparte plug-ins 280
Wat zijn plug-ins? 281
jQuery kan niet alles 281
Kenmerken van plug-ins 281
Plug-ins vinden en downloaden 282
Stappenplan 282
Wat hebben plug-ins met jQuery UI te maken? 284
jQuery UI downloaden en gebruiken 284
Downloaden 284
Toevoegen aan de pagina 286
Uw eerste widget – de datepicker gebruiken 287
De datumkiezer lokaliseren 288
De gekozen datum uitlezen 289
De component slider en werken met events 290
Configuratieobject voor widgets 290
Een slider maken 291
De slider configureren 291
Events voor de slider 292
Parameters voor events 293
Andere notatie voor event handlers 293
Handboek – JavaScript & jQuery
Werken met tabs 294
Thema‘s voor tabs 295
Opties voor tabs 295
Interacties maken met drag-and-drop 297
De categorie Interactions 297
Draggable 297
Opties voor draggable 299
Dropzones maken 299
De event drop afhandelen 301
Terugkeren ongedaan maken 302
De positie verbeteren 303
Conclusie 304
Werken met thema’s 305
Wat is een thema? 305
ThemeRoller 305
Een kant-en-klaar thema downloaden en gebruiken 306
Downloaden 307
Twee bestanden jquery-ui.css 309
Een eigen thema maken 309
Conclusie 311
Conclusie 312
Web 312
Twitter 313
Praktijkoefeningen 314
Index 317
