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 avantages d'acheter des résumés chez Stuvia:
Qualité garantie par les avis des clients
Les clients de Stuvia ont évalués plus de 700 000 résumés. C'est comme ça que vous savez que vous achetez les meilleurs documents.
L’achat facile et rapide
Vous pouvez payer rapidement avec iDeal, carte de crédit ou Stuvia-crédit pour les résumés. Il n'y a pas d'adhésion nécessaire.
Focus sur l’essentiel
Vos camarades écrivent eux-mêmes les notes d’étude, c’est pourquoi les documents sont toujours fiables et à jour. Cela garantit que vous arrivez rapidement au coeur du matériel.
Foire aux questions
Qu'est-ce que j'obtiens en achetant ce document ?
Vous obtenez un PDF, disponible immédiatement après votre achat. Le document acheté est accessible à tout moment, n'importe où et indéfiniment via votre profil.
Garantie de remboursement : comment ça marche ?
Notre garantie de satisfaction garantit que vous trouverez toujours un document d'étude qui vous convient. Vous remplissez un formulaire et notre équipe du service client s'occupe du reste.
Auprès de qui est-ce que j'achète ce résumé ?
Stuvia est une place de marché. Alors, vous n'achetez donc pas ce document chez nous, mais auprès du vendeur woutnba. Stuvia facilite les paiements au vendeur.
Est-ce que j'aurai un abonnement?
Non, vous n'achetez ce résumé que pour €4,49. Vous n'êtes lié à rien après votre achat.