WEBAPPLICATIES II
Academiejaar 2016 - 2017
Jakob Lierman
HoGent
,Jakob Lierman Webapplicaties II
Inhoud
JAVASCRIPT I .................................................................................................................................................. 7
DE BOUWSTENEN..................................................................................................................................................... 7
Variabelen ...................................................................................................................................................... 7
Constanten ..................................................................................................................................................... 7
Datatypes ....................................................................................................................................................... 7
Undefined ....................................................................................................................................................... 8
Null ................................................................................................................................................................. 8
Number ........................................................................................................................................................... 8
Boolean ......................................................................................................................................................... 10
String ............................................................................................................................................................ 11
Date .............................................................................................................................................................. 12
TOEVOEGEN AAN HTML-PAGINA EN UITVOEREN ......................................................................................................... 12
DEBUGGEN ........................................................................................................................................................... 13
INSTRUCTIES ......................................................................................................................................................... 13
Blocks ............................................................................................................................................................ 13
If.................................................................................................................................................................... 13
Switch ........................................................................................................................................................... 14
While/do-while ............................................................................................................................................. 14
For................................................................................................................................................................. 14
Break/continue ............................................................................................................................................. 14
OPERATOREN ........................................................................................................................................................ 15
FUNCTIES SIMPEL UITGELEGD.................................................................................................................................... 15
Scope ~ context van de variabelen ............................................................................................................... 15
Gebruik van bestaande functies ................................................................................................................... 16
ARRAYS................................................................................................................................................................ 16
Plaatsen van waarden in een array .............................................................................................................. 17
Aanmaken van een array via array literal .................................................................................................... 17
Opvragen van een element aan de hand van de index ................................................................................. 17
Verwijderen van een element in de array ..................................................................................................... 17
Overlopen van een array .............................................................................................................................. 18
Pop, push, shift en unshift ............................................................................................................................ 18
Zoeken of een waarde voorkomt in een array .............................................................................................. 19
Array methods .............................................................................................................................................. 19
Meerdimensionele arrays ............................................................................................................................. 20
JAVASCRIPT II ............................................................................................................................................... 21
OBJECTEN ............................................................................................................................................................ 21
Waarde van property van een object uitlezen .............................................................................................. 21
Een property toevoegen aan een object ....................................................................................................... 21
Object aanmaken op verschillende manieren............................................................................................... 22
De waarde van een property van een object wijzigen .................................................................................. 22
Een property van een object verwijderen ..................................................................................................... 22
For..in..: overlopen van alle properties ......................................................................................................... 22
FUNCTIES ............................................................................................................................................................. 23
Hoisting......................................................................................................................................................... 23
Function scope .............................................................................................................................................. 24
Scope chaining .............................................................................................................................................. 24
Functie definiëren ......................................................................................................................................... 25
Klein verschil door hoisting ......................................................................................................................................... 25
Opmerking in verband met function declaration ....................................................................................................... 25
Function overloading .................................................................................................................................... 26
2
,Jakob Lierman Webapplicaties II
OBJECTEN EN FUNCTIES (METHODES) ......................................................................................................................... 26
this keyword ................................................................................................................................................. 26
Patroon: code groeperen in object literals.................................................................................................... 27
EVENTS EN EVENT HANDLERS .................................................................................................................................... 27
Functies koppelen aan events ....................................................................................................................... 28
Democratie = scheiding der machten ........................................................................................................... 28
This keyword................................................................................................................................................. 29
De methode addEventListener ..................................................................................................................... 30
REVEALING MODULE PATTERN ................................................................................................................................. 30
Problemen met voorgaande code................................................................................................................. 30
Patroon: Revealing Module pattern ............................................................................................................. 30
Structuur module .......................................................................................................................................... 30
CLOSURES ............................................................................................................................................................ 32
EXCEPTIONS .......................................................................................................................................................... 33
FUNCTIES IN DEPTH ................................................................................................................................................ 33
Parameters en argumenten .......................................................................................................................... 33
Parameters: arguments object ................................................................................................................................... 34
Een mini jQuery............................................................................................................................................. 35
JAVASCRIPT III .............................................................................................................................................. 36
OBJECTEN ............................................................................................................................................................ 36
Prototype chaining ....................................................................................................................................... 38
OO PROGRAMMING .............................................................................................................................................. 39
DE CONSTRUCTOR FUNCTIE ...................................................................................................................................... 39
De constructor functie zelf ............................................................................................................................ 39
Creatie van objecten ................................................................................................................................................... 39
Verschillen met een ‘gewone functie’ ........................................................................................................................ 40
Het nieuwe object? ..................................................................................................................................................... 40
PROTOTYPE .......................................................................................................................................................... 40
Overerving .................................................................................................................................................... 40
Overerving .................................................................................................................................................... 41
The prototype chaining rule: how the engine finds a property of an object when you access one? ............ 41
De hidden link naar het prototype object __proto__ ................................................................................... 42
Via een prototype kan je default-waarden creëren ...................................................................................... 42
9 native object constructors gedefinieerd in JavaScript ............................................................................................. 43
Native object type uitbreiden ....................................................................................................................... 43
Samenvatting ............................................................................................................................................... 43
ZOEKFUNCTIE ........................................................................................................................................................ 44
RANDOM WEERGEVEN ............................................................................................................................................ 44
SORTEREN OP DATUM ............................................................................................................................................. 45
ENCAPSULATION .................................................................................................................................................... 46
OVERERVING......................................................................................................................................................... 46
CHAINABLE METHODS ............................................................................................................................................. 47
CANVAS........................................................................................................................................................ 48
FALLBACK ............................................................................................................................................................. 48
CANVAS DRAWING ................................................................................................................................................. 48
Verschillende mogelijkheden om te tekenen ................................................................................................ 49
Canvas toevoegen aan de pagina ............................................................................................................................... 49
Verschillende properties declareren .......................................................................................................................... 49
Tekenen van een module (tweetModule) .................................................................................................................. 49
Preview ....................................................................................................................................................................... 50
Klikken op canvas en cirkels tekenen ......................................................................................................................... 53
Image .......................................................................................................................................................................... 54
3
, Jakob Lierman Webapplicaties II
Advanced drawing ........................................................................................................................................ 54
Transformaties ............................................................................................................................................................ 54
Composities ................................................................................................................................................................ 55
Afbeeldingsdata & URL’s ............................................................................................................................................ 58
Animatie ..................................................................................................................................................................... 60
Grafieken .................................................................................................................................................................... 62
Canvas 3D drawing ....................................................................................................................................... 62
WEB STORAGE .............................................................................................................................................. 63
VROEGER ............................................................................................................................................................. 63
Cookies.......................................................................................................................................................... 63
Problemen met het gebruik van cookies .................................................................................................................... 63
WEB STORAGE STANDAARD ..................................................................................................................................... 63
WS API ATTRIBUTEN EN FUNCTIES ............................................................................................................................ 64
VOORBEELD STICKY NOTES ....................................................................................................................................... 64
noteToSelfV1.js ............................................................................................................................................. 64
stickyModule ................................................................................................................................................ 64
sessionStorage versus localStorage .............................................................................................................. 65
JSON OBJECT STORAGE .......................................................................................................................................... 65
Voorbeeld ..................................................................................................................................................... 66
Objecten en arrays opslaan in webstorage .................................................................................................. 66
Voorbeeld ................................................................................................................................................................... 66
WEB STORAGE API EVENT ...................................................................................................................................... 68
Voorbeeld ..................................................................................................................................................... 68
DOCUMENT OBJECT MODEL ......................................................................................................................... 69
WAT IS DOM ....................................................................................................................................................... 69
Voorbeelden ................................................................................................................................................. 70
EIGENSCHAPPEN VAN EEN NODE ............................................................................................................................... 70
nodeType ...................................................................................................................................................... 70
childNodes .................................................................................................................................................... 71
parentNode, firstChild, lastChild, previousSibling, nextSibling ..................................................................... 71
DYNAMISCHE HTML-CODE GENEREREN ..................................................................................................................... 71
Voorbeeld ..................................................................................................................................................... 71
REPOSITORY.......................................................................................................................................................... 72
productenRepository .................................................................................................................................... 72
voegProductToe.......................................................................................................................................................... 73
getProduct .................................................................................................................................................................. 74
getRubrieken .............................................................................................................................................................. 74
getProductUitRubriek ................................................................................................................................................. 74
WIJZIGINGEN AANBRENGEN IN EEN DOCUMENT ........................................................................................................... 75
innerHTML .................................................................................................................................................... 75
Wijzigen van documentstructuur.................................................................................................................. 75
WERKEN MET ATTRIBUTEN....................................................................................................................................... 75
Manier 1 ....................................................................................................................................................... 75
Manier 2 ....................................................................................................................................................... 77
Manier 3 ....................................................................................................................................................... 77
EÉN OF MEERDERE NODES SELECTEREN ....................................................................................................................... 77
JQUERY ........................................................................................................................................................ 78
TOEVOEGEN AAN PROJECT ....................................................................................................................................... 78
SELECTORS ........................................................................................................................................................... 78
Basic selectors .............................................................................................................................................. 79
Basic filter selectors ...................................................................................................................................... 79
4
Academiejaar 2016 - 2017
Jakob Lierman
HoGent
,Jakob Lierman Webapplicaties II
Inhoud
JAVASCRIPT I .................................................................................................................................................. 7
DE BOUWSTENEN..................................................................................................................................................... 7
Variabelen ...................................................................................................................................................... 7
Constanten ..................................................................................................................................................... 7
Datatypes ....................................................................................................................................................... 7
Undefined ....................................................................................................................................................... 8
Null ................................................................................................................................................................. 8
Number ........................................................................................................................................................... 8
Boolean ......................................................................................................................................................... 10
String ............................................................................................................................................................ 11
Date .............................................................................................................................................................. 12
TOEVOEGEN AAN HTML-PAGINA EN UITVOEREN ......................................................................................................... 12
DEBUGGEN ........................................................................................................................................................... 13
INSTRUCTIES ......................................................................................................................................................... 13
Blocks ............................................................................................................................................................ 13
If.................................................................................................................................................................... 13
Switch ........................................................................................................................................................... 14
While/do-while ............................................................................................................................................. 14
For................................................................................................................................................................. 14
Break/continue ............................................................................................................................................. 14
OPERATOREN ........................................................................................................................................................ 15
FUNCTIES SIMPEL UITGELEGD.................................................................................................................................... 15
Scope ~ context van de variabelen ............................................................................................................... 15
Gebruik van bestaande functies ................................................................................................................... 16
ARRAYS................................................................................................................................................................ 16
Plaatsen van waarden in een array .............................................................................................................. 17
Aanmaken van een array via array literal .................................................................................................... 17
Opvragen van een element aan de hand van de index ................................................................................. 17
Verwijderen van een element in de array ..................................................................................................... 17
Overlopen van een array .............................................................................................................................. 18
Pop, push, shift en unshift ............................................................................................................................ 18
Zoeken of een waarde voorkomt in een array .............................................................................................. 19
Array methods .............................................................................................................................................. 19
Meerdimensionele arrays ............................................................................................................................. 20
JAVASCRIPT II ............................................................................................................................................... 21
OBJECTEN ............................................................................................................................................................ 21
Waarde van property van een object uitlezen .............................................................................................. 21
Een property toevoegen aan een object ....................................................................................................... 21
Object aanmaken op verschillende manieren............................................................................................... 22
De waarde van een property van een object wijzigen .................................................................................. 22
Een property van een object verwijderen ..................................................................................................... 22
For..in..: overlopen van alle properties ......................................................................................................... 22
FUNCTIES ............................................................................................................................................................. 23
Hoisting......................................................................................................................................................... 23
Function scope .............................................................................................................................................. 24
Scope chaining .............................................................................................................................................. 24
Functie definiëren ......................................................................................................................................... 25
Klein verschil door hoisting ......................................................................................................................................... 25
Opmerking in verband met function declaration ....................................................................................................... 25
Function overloading .................................................................................................................................... 26
2
,Jakob Lierman Webapplicaties II
OBJECTEN EN FUNCTIES (METHODES) ......................................................................................................................... 26
this keyword ................................................................................................................................................. 26
Patroon: code groeperen in object literals.................................................................................................... 27
EVENTS EN EVENT HANDLERS .................................................................................................................................... 27
Functies koppelen aan events ....................................................................................................................... 28
Democratie = scheiding der machten ........................................................................................................... 28
This keyword................................................................................................................................................. 29
De methode addEventListener ..................................................................................................................... 30
REVEALING MODULE PATTERN ................................................................................................................................. 30
Problemen met voorgaande code................................................................................................................. 30
Patroon: Revealing Module pattern ............................................................................................................. 30
Structuur module .......................................................................................................................................... 30
CLOSURES ............................................................................................................................................................ 32
EXCEPTIONS .......................................................................................................................................................... 33
FUNCTIES IN DEPTH ................................................................................................................................................ 33
Parameters en argumenten .......................................................................................................................... 33
Parameters: arguments object ................................................................................................................................... 34
Een mini jQuery............................................................................................................................................. 35
JAVASCRIPT III .............................................................................................................................................. 36
OBJECTEN ............................................................................................................................................................ 36
Prototype chaining ....................................................................................................................................... 38
OO PROGRAMMING .............................................................................................................................................. 39
DE CONSTRUCTOR FUNCTIE ...................................................................................................................................... 39
De constructor functie zelf ............................................................................................................................ 39
Creatie van objecten ................................................................................................................................................... 39
Verschillen met een ‘gewone functie’ ........................................................................................................................ 40
Het nieuwe object? ..................................................................................................................................................... 40
PROTOTYPE .......................................................................................................................................................... 40
Overerving .................................................................................................................................................... 40
Overerving .................................................................................................................................................... 41
The prototype chaining rule: how the engine finds a property of an object when you access one? ............ 41
De hidden link naar het prototype object __proto__ ................................................................................... 42
Via een prototype kan je default-waarden creëren ...................................................................................... 42
9 native object constructors gedefinieerd in JavaScript ............................................................................................. 43
Native object type uitbreiden ....................................................................................................................... 43
Samenvatting ............................................................................................................................................... 43
ZOEKFUNCTIE ........................................................................................................................................................ 44
RANDOM WEERGEVEN ............................................................................................................................................ 44
SORTEREN OP DATUM ............................................................................................................................................. 45
ENCAPSULATION .................................................................................................................................................... 46
OVERERVING......................................................................................................................................................... 46
CHAINABLE METHODS ............................................................................................................................................. 47
CANVAS........................................................................................................................................................ 48
FALLBACK ............................................................................................................................................................. 48
CANVAS DRAWING ................................................................................................................................................. 48
Verschillende mogelijkheden om te tekenen ................................................................................................ 49
Canvas toevoegen aan de pagina ............................................................................................................................... 49
Verschillende properties declareren .......................................................................................................................... 49
Tekenen van een module (tweetModule) .................................................................................................................. 49
Preview ....................................................................................................................................................................... 50
Klikken op canvas en cirkels tekenen ......................................................................................................................... 53
Image .......................................................................................................................................................................... 54
3
, Jakob Lierman Webapplicaties II
Advanced drawing ........................................................................................................................................ 54
Transformaties ............................................................................................................................................................ 54
Composities ................................................................................................................................................................ 55
Afbeeldingsdata & URL’s ............................................................................................................................................ 58
Animatie ..................................................................................................................................................................... 60
Grafieken .................................................................................................................................................................... 62
Canvas 3D drawing ....................................................................................................................................... 62
WEB STORAGE .............................................................................................................................................. 63
VROEGER ............................................................................................................................................................. 63
Cookies.......................................................................................................................................................... 63
Problemen met het gebruik van cookies .................................................................................................................... 63
WEB STORAGE STANDAARD ..................................................................................................................................... 63
WS API ATTRIBUTEN EN FUNCTIES ............................................................................................................................ 64
VOORBEELD STICKY NOTES ....................................................................................................................................... 64
noteToSelfV1.js ............................................................................................................................................. 64
stickyModule ................................................................................................................................................ 64
sessionStorage versus localStorage .............................................................................................................. 65
JSON OBJECT STORAGE .......................................................................................................................................... 65
Voorbeeld ..................................................................................................................................................... 66
Objecten en arrays opslaan in webstorage .................................................................................................. 66
Voorbeeld ................................................................................................................................................................... 66
WEB STORAGE API EVENT ...................................................................................................................................... 68
Voorbeeld ..................................................................................................................................................... 68
DOCUMENT OBJECT MODEL ......................................................................................................................... 69
WAT IS DOM ....................................................................................................................................................... 69
Voorbeelden ................................................................................................................................................. 70
EIGENSCHAPPEN VAN EEN NODE ............................................................................................................................... 70
nodeType ...................................................................................................................................................... 70
childNodes .................................................................................................................................................... 71
parentNode, firstChild, lastChild, previousSibling, nextSibling ..................................................................... 71
DYNAMISCHE HTML-CODE GENEREREN ..................................................................................................................... 71
Voorbeeld ..................................................................................................................................................... 71
REPOSITORY.......................................................................................................................................................... 72
productenRepository .................................................................................................................................... 72
voegProductToe.......................................................................................................................................................... 73
getProduct .................................................................................................................................................................. 74
getRubrieken .............................................................................................................................................................. 74
getProductUitRubriek ................................................................................................................................................. 74
WIJZIGINGEN AANBRENGEN IN EEN DOCUMENT ........................................................................................................... 75
innerHTML .................................................................................................................................................... 75
Wijzigen van documentstructuur.................................................................................................................. 75
WERKEN MET ATTRIBUTEN....................................................................................................................................... 75
Manier 1 ....................................................................................................................................................... 75
Manier 2 ....................................................................................................................................................... 77
Manier 3 ....................................................................................................................................................... 77
EÉN OF MEERDERE NODES SELECTEREN ....................................................................................................................... 77
JQUERY ........................................................................................................................................................ 78
TOEVOEGEN AAN PROJECT ....................................................................................................................................... 78
SELECTORS ........................................................................................................................................................... 78
Basic selectors .............................................................................................................................................. 79
Basic filter selectors ...................................................................................................................................... 79
4
