Frontend programmeren Versie 2020

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
-Code in het boek 2
-De index of homepagina 3
-Mappenstructuur van het project aanmaken 3
-HTML-editors 4
-Geneste elementen 6
-Browsers 7
-Meta-elementen 8
-Semantische elementen 10
-Hiërarchie van elementen 12
-id of class? 12
1.2 CSS3 14
-Inleiding 15
-CSS-syntaxis 15
-Stijlen coderen 18
--stijlen 18
-In-line-stijlen 18
-Samenvatting (margin en padding) 22
-De stylesheet 24
1.3 Webkleuren 30
1.4 Navigatie 34
-Codering van de navigatie 34
-Ontwerp van de navigatie 37
1.5 Flexbox 43
-Container-properties 44
1.6 Logo 49
-Codering van het logo 49
-Design van het logo 51
1.7 Hoofd-content 53
-Design van de hoofd-content 54
-Browser-prefix 55
1.8 Positionering 58
-Relatieve positie 59
-Lagen 63
1.9 Codering en design van de footer 67
-Symbolen in HTML 68
1.10 CSS Grid Layout 70
1.11 De playlist-pagina 76
-Codering van playlist-pagina 77
-Wat zijn events? 79
1.12 De formulierpagina 83
1.13 De contactpagina 92
-Codering van de contactpagina 93
-Design van de contactpagina 94
1.14 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 100
-Interactie 101
-Beweging 101
1.15 Een material-design-sjabloon 103
-Tabs 105
-Codering van de cards 107
1.16 Material-design-project 110
-De website XtreemTravel 110
-De welkomstpagina 111
-De windsurfi ng-pagina 111
-De mountainclimbing-pagina 112
-De snorkelenpagina 112

2 Basis JavaScript—113
2.1 Inleiding JavaScript 113
-JavaScript-console 115
-Taalcomponenten 116
-JavaScript-variabelen 118
2.2 Datatypes 123
-Het datatype string 124
-De methode typeof 124
-Het datatype: boolean 125
-Het datatype: number (integer) 125
-Het datatype: number (fl oating-point) 125
-parseInt() 126
-parseFloat() 126
-parseInt() 127
-toString() 127
2.3 Het Array-object 129
-Een Array-object declareren 130
-Array-elementen declareren 130
-Array-methodes 133
-Array-pointers 134
2.4 Objecten 143
2.5 Het Date-object 148
-Creëer een Date-object 148
-Creëer een Date-object met parameters 149
-Creëer een Date-object met string 150
-Creëer een Date-object met getallen 150
2.6 Date-methodes 152
-getFullYear 152
2.7 Beslissingsstructuren 154
-De opdracht if 154
-De clausule else 156
-&& (AND)-vergelijking 156
-|| (OR)-vergelijking 157
-De clausule else if 157
-De ternary-operator (? : ) 158
2.8 Stroomdiagrammen 160
2.9 Switch 163
2.10 Eigen functies 165
-Functie of methode 166
-Externe functies 168
-De tag 169
-Functies dynamisch uitvoeren 172
-Scope van variabelen 173
-De array arguments[] 174
2.11 Lussen 176
-De for()-lus 176
-De functie charAt() 179
2.12 De for(in)-lus 182
2.13 De while()-lus 185
-De do-while()-lus 188
2.14 Het Math-object 188
-Math.abs(x) 189
-Math.ceil(x) 189
-Math.fl oor(x) 189
-Math.max() 190
-Math.min() 190
-Math.round() 191
-Math.random() 191
2.15 String-methodes 192
-indexOf() 193
-Length 194
-charAt() 195
-split() 195
-substring() 196
-substr() 196
-trim() 197
-toLowerCase() en toUpperCase() 197
2.16 Algoritmes 198
-Het algoritme binary-search 199
-Een voorbeeld 199
-Pseudocode 200
2.17 Het Document Object Model 205
-getElementById 206
-DOM-events (gebeurtenis) 206
-De functie setTimeout() 208
-De functie clearTimeout() 208
-Mouse-events 209
-Form-events 210
-Keyboard-events 214
2.18 Cookies 216
-Hoe werk je met cookies? 216
-JavaScript met cookies 217
-Browser en cookies 220
2.19 Een winkelwagentje in JavaScript 221

3 Gevorderd JavaScript—227
3.1 OOP in JavaScript 227
-Class met properties 228
-Class met methodes 228
-Subclass 228
3.2 Het factory pattern 229
-Destructor 231
-Object-properties wijzigen 231
3.3 Constructor-pattern 232
3.4 Prototype-pattern 234
-Objecten kunnen berichten naar elkaar sturen 235
3.5 Inheritance (overerven) 236
-Overschrijven van parent-methodes 238
-Delete-function 239
3.6 Een OOP videoPlayer 240
-Rekenmachine algoritme 244
3.7 JSON-object-literals 245
-Objecten als properties van het object window 247
-Geneste JSON-object-literals 247
-Chaining properties 248
-Literal-objecten bundelen 248
3.8 Speciale functions 250
-Externe methodes aan objecten koppelen 250
-Call 251
-Apply 252
-Bind 253
3.9 Anonieme functions 255
-Callback-functions 256
-Zelfuitvoerende functions 257
-Return-functions 257
-Function-closures 257
-Function-heredity 259
3.10 Lokale opslagcapaciteit (local storage) 261
-Local storage lezen 261
3.11 OOP webshop 262
-Herbruikbare code 265
3.12 Functions van hogere orde 267

4 TypeScript—273
4.1 Ontwikkelomgeving installeren 273
-NPM (Node Package Manager) in Node 274
-Installeer TypeScript 274
-Installeer Visual Studio Code 274
4.2 Inleiding TypeScript 274
4.3 Objectgeoriënteerd programmeren (OOP) 279
-Klassen en objecten 280
-UML-klassendiagram 280
-Klasse met properties 280
-Klasse met methodes 281
-Subklasse 281
-Constructors 282
-Objecten 283
4.4 Access-methodes 285
4.5 Encapsulation (inkapseling) 287
4.6 Eigen methodes 288
4.7 Inheritance 290
-Parent-methodes overschrijven 294
-Inheritance implementeren 294
4.8 Interfaces 295
-Abstracte klasse 297
-Object-communication 298
4.9 Foutafhandeling met exceptions 299
-De StackTrace 299
4.10 Project OOP in TypeScript 302
4.11 Fullstack TypeScript (frontend & backend) 303
-App-opbouw 304
-Database verwerken 309
-Application Program Interface (API) 311
-De Node.js HTTP-module 314
4.12 Graphic User Interfaces (GUI) 316
-Views 316
4.13 De webapp FlexTix 318
-De homepage 318
-De lastminute-pagina 319
-De location-pagina 320

Register—325
Oefening baart kunst.