-
Notifications
You must be signed in to change notification settings - Fork 0
/
cheatSheet.html
402 lines (358 loc) · 16.3 KB
/
cheatSheet.html
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
<!DOCTYPE html>
<html lang="en, nl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cheatsheet Web2</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" charset="utf-8" src="script.js"></script>
</head>
<body>
<main>
<h2>Cheatsheet Web2: Javascript</h2>
<nav class="topnav" role="navigation">
<a class="topnav Home active">Home</a>
</nav>
<div class="General">
<h3>Naming convention</h3>
<ul>
<li>folder: styles/scripts</li>
</ul>
<h3>Functies</h3>
<ul>
<li>
<b>const allEqual = arr => arr.every(val => val === arr[0]);</b>
Gemakkelijk om te checken of een array allemaal identieke elementen bevat
</li>
</ul>
<h3>Tips</h3>
<ul>
<li>Opgelet: Zet in eventlistener geen () achter de functie.</li>
<li>Bepaald element aanspreken: rechter muisklik er op in browser => copy => copy JS path</li>
<li>.naam = klasse <=> #naam = id</li>
<li><b>string.replace[All](zoekterm, vervangvalue):</b> kunnen handig zijn om met strings te werken.</li>
<li>Als je een index in een function zet wordt deze reset elke keer die functie uitgevoerd wordt.</li>
</ul>
</div>
<div class="Input/Output">
<h3>Waardes uitlezen</h3>
<ul>
<li><b>document.getElementById('id'):</b> Haalt data uit ID</li>
<li><b>document.querySelector('img'):</b> Haalt alle elementen uit css-selectoren of html-tags.</li>
<li><b>document.getElementsByClassName('classname'):</b> Haalt alle elementen uit Klasse. OPGELET:
returnd
array (index toevoegen voor 1 element).</li>
<li><b>document.querySelectorAll('img'):</b> Haalt alle elementen uit css-selectoren of html-tags..
OPGELET:
returnd array (index toevoegen voor 1 element).</li>
</ul>
<h4>textContents vs innerText vs innerHTML</h4>
<table cellpadding="4" cellspacing="1" summary=""
id="SILKTEST-21EEFF3F-DIFFERENCEBETWEENTEXTCONTENTSINNERTEXTINNERHTML-REF__TABLE_B374B1CE90374DA19410AA71563E976B"
class="table" frame="border" border="1" rules="all">
<thead class="thead" align="left">
<tr class="row">
<th class="entry" align="top" width="37.03703703703704%" id="d161577e99">Code</th>
<th class="entry" align="top" width="62.962962962962955%" id="d161577e102">Returned Value</th>
</tr>
</thead>
<tbody class="tbody">
<tr class="row">
<td class="entry" align="top" headers="d161577e99 ">
<samp class="ph codeph">
element.GetProperty(<b>"textContents"</b>)</samp>
</td>
<td class="entry" align="top" headers="d161577e102 ">
<pre class="pre codeblock">This is my link collection:</pre>
</td>
</tr>
<tr class="row">
<td class="entry" align="top" width="37.03703703703704%" headers="d161577e99 ">
<samp class="ph codeph">
element.GetProperty("<b>innerText</b>")</samp>
</td>
<td class="entry" align="top" width="62.962962962962955%" headers="d161577e102 ">
<pre
class="pre codeblock">This is my link collection:Bye bye Borland Welcome to Micro Focus</pre>
</td>
</tr>
<tr class="row">
<td class="entry" align="top" width="37.03703703703704%" headers="d161577e99 ">
<samp class="ph codeph"> element.GetProperty("<b>innerHtml</b>")</samp>
</td>
<td class="entry" align="top">
<pre class="pre codeblock">
This is my <b>link collection</b>:
<ul>
<li><a href="www.borland.com">Bye bye <b>Borland</b></a></li>
<li><a href="www.microfocus.com">Welcome to <b>Micro Focus</b></a></li>
</ul>
</pre>
</td>
</tr>
</tbody>
</table>
<h3>Input</h3>
<b>.value</b> hoort enkel bij <input> elementen!
checkbox / radiobutton = bool => element.checked
<pre>
Voorbeeld omgaan met radio buttons
HTML code:
<input type="radio" name="colors" value="red" checked>
<input type="radio" name="colors" value="green">
<input type="radio" name="colors "value="blue">
Javascript code:
var checkedRadioButton = document.querySelector("input[name='colors']:checked")
</pre>
<h4><Select> Element</h4>
Properties:
<ul>
<li>
<b>.options:</b> elementen uit Select, vormt array
<ul>
<li><b>.selected:</b> bool die aangeeft of option geselecteerd is</li>
<li><b>.value</b></li>
<li><b>.text</b></li>
</ul>
</li>
<li>
<b>.selectedIndex:</b> index van eerste geselecteerde option (-1 = niets geselecteerd) =>
via dit zoek je geselecteerde optie op in .options array
</li>
</ul>
<pre>
Voorbeeld omgaan met select elementen
HTML code:
<select id="selfruit" size="4"multiple>
<option>appel</option>
<option>peer</option>
<option>banaan</option>
<option>kiwi</option>
</select>
Javascript code:
let selectedOptions = document.querySelectorAll("#selFruit option:checked");
</pre>
<p>
De variabele selectedOptions zal nu een lijstbevatten met de geselecteerde options.<br>
Als je er maar eentje verwacht omdat het <select> element geen multiple vermeldt, kun je natuurlijk
querySelector() gebruiken i.p.v. querySelectorAll().
</p>
<h4>Opgelet</h4>
<ul>
<li>
<b>.textContent en .innerHTML</b> horen nooit bij <input> elementen.
Strikt genomen, “bijna nooit” bv. wel als je de tekst op een button wil veranderen.
</li>
<li>
Om een een nieuw child element toe te voegen kun je beter <b>.insertAdjacentHTML(positie, html)</b>
gebruiken (zie verderop)
i.p.v. .innerHTML+= "..." te schrijven.<br>
<b>positie:</b> beforebegin, afterbegin, beforeend, afterend
</li>
<li><b>n.appendChild(html)</b> voegt node toe aan einde lijst children.</li>
</ul>
</div>
<div class="Events">
<h3>Events</h3>
<b>Functie: elementNode.addEventListener("anEvent", ourFunction);</b>
<p>
Merk op dat er geen haakjes ( ) staan achter de naam van de callback functie!!!!!
</p>
<h4>Setup functie</h4>
<pre>
const setup= () => {
...
}
window.addEventListener("load", setup);
</pre>
<p>
De setup function is een event listener die eigenlijk de initialisatie code bevat van onze
applicatie.<br>
Typisch is dat hierin allerlei andere event listener functions aanhun resp. elementen worden
gekoppeld.<br>
Moet in meeste gevallen onderaan als laatste functie opgeroepen worden in JS.<br>
</p>
<h4>Werken met meerdere events</h4>
<pre>
let objecten = document.getElementsByClassName('object');
for (let i = 0; i < objecten.length; i++) {
objecten[i].addEventListener('event', method);
}
<b>Event.target:</b> returned object waarvan event getriggered werd.
<b>Event.currentTarget:</b> returned object waarvan event momenteel uitgevoerd wordt.
</pre>
</div>
<div class="Arrays">
<h3>Index</h3>
<ul>
<li><b>Array.indexOf / Array.lastIndexOf:</b> index van value zoeken</li>
<li><b>Array.push:</b> element toevoegen einde</li>
<li><b>Array.pop:</b> element verwijderen einde</li>
<li><b>Array.slice(beginIndex, eindIndex):</b> elementen uit array halen, returned nieuwe array</li>
</ul>
<h3>Sort</h3>
<b>Array.sort(sortFunctie):</b> Sorteert array naar voorwaarden.
<pre>
<b>Een array van getallen sorteren:</b>
const compare= (a,b) => {
return a-b;
}
let array=[34, 67, 12, 5, 23];
array.sort(compare);
<b>Een array van strings sorteren:</b>
const compare= (a, b) => {
return a.localeCompare(b);
}
let array=["zebra", "aap", "giraf", "ezel"];
array.sort(compare);
</pre>
</div>
<div class="Klasses">
<h3>Klasses</h3>
<ul>
<li>alle klasses achterhalen (1 string gescheiden door spaties): <b>element.className;</b></li>
<li>alle klasses verwijderen: <b>element.className = "";</b></li>
<li>klasse toevoegen: <b>element.classList.add("klasseNaam");</b></li>
<li>klasse verwijderen: <b>element.classList.remove("klasseNaam");</b></li>
<li>bepaalde klasse zoeken: <b>element.classList.contains("klasseNaam");</b></li>
</ul>
</div>
<div class="CSS">
<h3>CSS aanpassen</h3>
<ul>
<li>kleur: <b>elementNode.style.color="red";</b></li>
<li>achtergrond kleur: <b>elementNode.style.backgroundColor="red";</b></li>
<li>margin: <b>elementNode.style.marginLeft="10px";</b></li>
</ul>
<p>
Met klasses werken heeft voorkeur boven custom css.<br>
Overweeg enkel custom css bij veel mogelijke waarden.<br>
<br>
<b>typeof</b> returned type
</p>
</div>
<div class="Math">
<h3>Random: Math.random()</h3>
<p>Opgelet, dit returned een float number!</p>
<pre>
<b>Voorbeelden:</b>
// Returns a random integer from 0 to 9:
Math.floor(Math.random() * 10);
// Returns a random integer from 1 to 10:
Math.floor(Math.random() * 10) + 1;
</pre>
</div>
<div class="Attributen">
<h3>Attributen van DOM-elementen manipuleren</h3>
<p>
Attributen zijn de parameters die in de html tag staan.<br>
De waarde van attributen zijn altijd strings.<br>
Je kan custom attributen maken door "data-<i>kiesnaam</i>" te gebruiken.
</p>
<ul>
<li>
<b>element.getAttribute(a):</b> returned waarde van attribuut a van element.
(a parameter = string met naam attribuut)
</li>
<li><b>element.setAttribute(a, value):</b> stelt attribuut a van element in op v.</li>
</ul>
</div>
<div class="Nodes">
<p>
We maken een onderscheid tussen methods die alle soorten nodes returnen en degene die elementen
returnen<br>
<b>n</b> staat voor node in deze context.
</p>
<ul>
<li><b>n.parentNode:</b> Geeft parent, of null indien er geen is.</li>
<li>
<b>n.children (geeft enkel elementen) / n.childNodes:</b> Geeft lijst van childs (geen array maar
.length en index werken)
<ul>
<li><b>n.first(Element)Child:</b> geeft eerste child</li>
<li><b>n.last(Element)Child:</b> geeft laatste child</li>
</ul>
n.firstElementChild en n.lastElementChild, komen vaak van pas bij het gebruik van
insertAdjacentHTML() op posities"afterbegin" en "beforeend", als verwijzing naar het nieuwe element!
</li>
<li><b>n.next(Element)Sibling / n.previous(Element)Sibling:</b> Geeft de volgende/vorige sibling, of
null indien er geen is.</li>
<li><b>n.nodeName:</b>Geeft soort element als string</li>
<li><b>n.nodeType:</b>Geeft soort element als getal (1=element, 2=attribuut, 3=text)</li>
<li><b>n.nodeValue: (enkel text nodes)</b>Geeft tekst in string of null indien element node.</li>
</ul>
</div>
<div class="Date">
<h3>Voorbeelden</h3>
<pre>
let now= new Date();
let uren = now.getHours(); // uren
let minuten = now.getMinutes(); // minuten
console.log( `het is nu ${ uren} uur en ${ minuten} minuten` );
console.log( `de datum is ${ now.getDate()} /${ now.getMonth()} ` ); // dag en maand
console.log( now.toISOString()); //ISO 8601 formaat
console.log( now.toString());
Sun May 09 2021 23:52:43 GMT+0200 (CEST) // output
console.log( now.toDateString());
Sun May 09 2021 // output
console.log( now.toTimeString());
23:52:43 GMT+0200 (CEST) // output
console.log( now.toISOString());
2021-05-09T21:52:43.296Z //output
console.log( now.toISOString().substr(0,10)); // het datum stukjeeruit halen met substr()
2021-05-09 // output
console.log( now.toISOString().substr(11,8)); // het tijd stukje eruit halen met substr()
21:52:43 // output
</pre>
</div>
<div class="Objecten">
<h3>Voorbeelden</h3>
<pre>
Aparte values instellen:
let student={};
student.voornaam="Jan";
student.familienaam="Janssens";
student.geboortedatum=new Date("1993-12-31");
object literal notatie (JSON):
let student = {
voornaam : "Jan",
familienaam : "Janssens",
geboortedatum : new Date("1993-12-31"),
kotAdres : { // een object
straat : "Kerkstraat 12",
postcode : "8000",
gemeente : "Brugge"
},
isIngeschreven : true, // een boolean
namenVanExen : ["Sofie", "Berta", "Philip", "Albertoooo"], // een array
};
</pre>
<h3>JSON functies</h3>
<ul>
<li>Object omzetten naar JSON = <b>JSON.stringify(<i>object</i>);</b></li>
<li>JSON omzetten naar object = <b>JSON.parse(<i>json</i>);</b></li>
</ul>
</div>
<div class="Storage">
<h3>Functies</h3>
<pre>
<b>
localStorage.setItem("myKey", "myValue");
console.log(localStorage.getItem("myKey"));
geen item => returned null
</b>
<b>removeItem(key):</b> verwijdert het item voor de gegeven key
<b>clear():</b> verwijdert alle items(ook handig om bv. vanop de console local storage leeg te maken).
</pre>
<h3>Opmerkingen</h3>
<ul>
<li>opgeslagen value is altijd string en meestal JSON.</li>
<li>keys krijgen applicatie specifiek voorvoegsel.</li>
<li>checken en gebruiken aanwezige data bij start app.</li>
<li>wijzigingen wegschrijven zodra data beschikbaar wordt.</li>
</ul>
</div>
</main>
</body>
</html>