-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathUITLEG
115 lines (90 loc) · 3.12 KB
/
UITLEG
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
Javascript variabele
====================
var legetekst = "";
Javascript functie
==================
Een functie met naam log:
function log(tekst) {
console.log(tekst);
}
Uitvoeren:
log('hallo');
Een functie zonder naam (anonieme functie):
function (tekst) {
console.log(tekst);
}
Uitvoeren:
kan niet zo
Een anonieme functie toewijzen aan variabele log:
var log = function (tekst) {
console.log(tekst);
}
Uitvoeren:
log('hallo');
In de functie wordt console.log aangeroepen: een interne functie waarmee
gegevens naar de browser console geschreven kunnen worden. De console is
een onderdeel van de browser developer tools.
DOM elementen vinden
====================
Gebruik doc voor werken met DOM elementen:
De document body:
doc.find('body')
De eerste button:
doc.find('button')
De about page met id='page_about':
doc.find('#page_about')
Een div met class='header':
doc.find('div.header')
Een div met class='header' binnen de about page:
doc.find('#page_about div.header')
DOM events: uitvoeren van functie na gebeurtenis
================================================
Als je klikt op een DOM element wordt de 'onclick' handler aangeroepen. De
onclick handler van de body is:
doc.find('body').onclick
Als je aan die member een anonieme functie toewijst dan wordt de code daarin
uitgevoerd iemand op het dom element klikt:
doc.find('body').onclick = function(event) {
console.log('klik!');
console.log(event);
};
De parameter event bevat informatie over het event. Deze kan na klikken op de
body in de browser console worden uitgelezen dankzij de tweede regel in de functie
Omgaan met groepen DOM elementen
================================
Als er meerdere (vergelijkbare) elementen zijn waar iets mee gedaan moet worden,
zoals het toewijzen van een onclick handler, dan kan doc.forEachElement worden
gebruikt. Bijvoorbeeld als er meerdere <button> elementen in een document zitten
kunnen deze als volgt alle eenzelfde handler krijgen toegewezen:
doc.forEachElement('button', function(event) {
console.log('klik!', event); // meerdere parameters gescheiden met komma
console.log(event.target);
}
In bovenstaande functie is commentaar opgenomen met //
event.target is het DOM element waarop is geklikt.
Stel dat de body tag in de html er zo uitziet:
<body data-dingetje="test123">
...
</body>
En de onclick handling zo:
doc.find('body').onclick = function(event) {
console.log(event.target.dataset.dingetje);
};
Dan zal bij elke klik 'test123' worden gedumpt in de browser console.
Een omsloten functie
====================
Als alle code van een applicatie in functies is vervat wordt deze snel onoverzichtelijk.
Een manier om meer structuur in code aan te brengen is de omsloten functie:
var module = (function(){
var m = {};
var printOpvallend = function(tekst) {
console.log('**** ' + tekst + ' ****');
};
m.print = function(tekst) {
printOpvallend(tekst);
};
return m;
}.call());
technieken
==========
drag and drop: http://www.w3schools.com/html/html5_draganddrop.asp