JavaScript
Les 2: Javascript
- Niets met Java te maken!
- Client side scripting in browser gedaan
→ Alle code is zichtbaar voo0r de user en kan deze veranderen
→ Code wordt JIT compilation = lijn per lijn uitgevoerd
- = ECMAScript
- Loosely typed ipv int en string, let
- Dynamisch ⇒ Hele tijd een variable opnieuw schrijven of veranderen van
type kan
- Creating variables:
– let om een variabele die kan veranderen te instantieren, anders const
– camelCase!
– Geen var (function scope), in 2015 let en const ⇒ Block scoped → Niet
her gedeclareerd
- Functions:
– Function() is slecht in veiligheid
– statements = function declaration: function name() { console.log() };
– expression = function expression: let something = function()
{ console.log };
– function expressions are not hoisted → kan je niet gebruiken voor ze
gedefinieerd zijn
Les 3: DOM & Events
- DOM = Document Object Model = data representatie van de objecten dat
de samenstelling zijn van de structuur en content van een document op
het web
→ Logical tree
→ Bestaat uit ‘nodes’ (-> ~ HTML tags) , met elke node die een eigenschap heeft
(classList, innerText, innerHTML, children, id, attributes…) en een node kan child
nodes bevatten
- Window: window.document = DOM (document → html → …)
→ “BOM” Browser object model
- window.location
- window.navigator
- window.history
- window.screen
→ Global JS vars (window is overbodig, dit is logisch en dus niet nodig om
te typen)
- Querying The DOM:
→ Vroeger: document.getElementById(‘’);
→ Nu: document.querySelector(‘#button’);
→ Vergeet defer niet!
, - Events:
→ HTML: <button id=”btn”>click me</button>
→ get the element: const btn = document.querySelector(‘#btn’);
→ Attach an eventListener: btn.addEventListener(TRIGGER, HANDLER);
→ Altijd onclick in TRIGGER niet in button html of btn.onclick = function()
{}
→ Trigger:
→ Click, mousemove, touchstart, load, DOMContentLoaded,
submit…
→ Handler:
→ Anonymous function: btn.addEventListener(‘click’, function() {
alert(‘hello world’)
})
→ Function expression: const doeIets = function (){ alert(‘hello
world’) }
btn.addEventListener(‘click’, doeIets)
→ Event Propagation:
1) Capture phase: Window → Document → <html> → <body>
→
<main> → <article> → <form> → <button>
2) Target phase: <button>
3) Bubbling phase: omgekeerde van capture phase
→ Event object: const doeIets = function (event) {
//event.type
//event.eventPhase
//event.stopProgpagation()
//event.preventDefault()
} btn.addEventListener(‘click’, doeIets)
Les 4: Strict Mode
- Until 2009: JS was backwards compatible, never breaking existing code
- 2009: ES5 → nieuwe features en aangepaste bestaande → ‘use strict’;
bovenaan JS
- Nu: als je classes of modules gebruikt automatisch aangezet ⇒ Altijd
toevoegen is het makkelijkst
Les 5: Objects
- A non primitive data type
- Create:
//object constructor
let user = new Object(); //Dogshit
//object literal syntax
let user = { }; //veel beter
- Key - Value:
let user = {
name: “John”, //key = name, value = John
“last name” : “bar” //moet in “” indien 2 woorden
Les 2: Javascript
- Niets met Java te maken!
- Client side scripting in browser gedaan
→ Alle code is zichtbaar voo0r de user en kan deze veranderen
→ Code wordt JIT compilation = lijn per lijn uitgevoerd
- = ECMAScript
- Loosely typed ipv int en string, let
- Dynamisch ⇒ Hele tijd een variable opnieuw schrijven of veranderen van
type kan
- Creating variables:
– let om een variabele die kan veranderen te instantieren, anders const
– camelCase!
– Geen var (function scope), in 2015 let en const ⇒ Block scoped → Niet
her gedeclareerd
- Functions:
– Function() is slecht in veiligheid
– statements = function declaration: function name() { console.log() };
– expression = function expression: let something = function()
{ console.log };
– function expressions are not hoisted → kan je niet gebruiken voor ze
gedefinieerd zijn
Les 3: DOM & Events
- DOM = Document Object Model = data representatie van de objecten dat
de samenstelling zijn van de structuur en content van een document op
het web
→ Logical tree
→ Bestaat uit ‘nodes’ (-> ~ HTML tags) , met elke node die een eigenschap heeft
(classList, innerText, innerHTML, children, id, attributes…) en een node kan child
nodes bevatten
- Window: window.document = DOM (document → html → …)
→ “BOM” Browser object model
- window.location
- window.navigator
- window.history
- window.screen
→ Global JS vars (window is overbodig, dit is logisch en dus niet nodig om
te typen)
- Querying The DOM:
→ Vroeger: document.getElementById(‘’);
→ Nu: document.querySelector(‘#button’);
→ Vergeet defer niet!
, - Events:
→ HTML: <button id=”btn”>click me</button>
→ get the element: const btn = document.querySelector(‘#btn’);
→ Attach an eventListener: btn.addEventListener(TRIGGER, HANDLER);
→ Altijd onclick in TRIGGER niet in button html of btn.onclick = function()
{}
→ Trigger:
→ Click, mousemove, touchstart, load, DOMContentLoaded,
submit…
→ Handler:
→ Anonymous function: btn.addEventListener(‘click’, function() {
alert(‘hello world’)
})
→ Function expression: const doeIets = function (){ alert(‘hello
world’) }
btn.addEventListener(‘click’, doeIets)
→ Event Propagation:
1) Capture phase: Window → Document → <html> → <body>
→
<main> → <article> → <form> → <button>
2) Target phase: <button>
3) Bubbling phase: omgekeerde van capture phase
→ Event object: const doeIets = function (event) {
//event.type
//event.eventPhase
//event.stopProgpagation()
//event.preventDefault()
} btn.addEventListener(‘click’, doeIets)
Les 4: Strict Mode
- Until 2009: JS was backwards compatible, never breaking existing code
- 2009: ES5 → nieuwe features en aangepaste bestaande → ‘use strict’;
bovenaan JS
- Nu: als je classes of modules gebruikt automatisch aangezet ⇒ Altijd
toevoegen is het makkelijkst
Les 5: Objects
- A non primitive data type
- Create:
//object constructor
let user = new Object(); //Dogshit
//object literal syntax
let user = { }; //veel beter
- Key - Value:
let user = {
name: “John”, //key = name, value = John
“last name” : “bar” //moet in “” indien 2 woorden
