Samenvatting
Samenvatting Front-End Devolpment (Javascript)
- Instelling
- Odisee Hogeschool (Odisee)
In deze samenvatting zit alle leerstof rond Javascript uit de les Front-End Development
[Meer zien]Voorbeeld 2 van de 10 pagina's
Voorbeeld 2 van de 10 pagina's
In winkelwagenVerkoper
Volgen
Voorbeeld van de inhoud
JavaScriptLes 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
Voordelen van het kopen van samenvattingen bij Stuvia op een rij:
√ Verzekerd van kwaliteit door reviews
Stuvia-klanten hebben meer dan 700.000 samenvattingen beoordeeld. Zo weet je zeker dat je de beste documenten koopt!
Snel en makkelijk kopen
Je betaalt supersnel en eenmalig met iDeal, Bancontact of creditcard voor de samenvatting. Zonder lidmaatschap.
Focus op de essentie
Samenvattingen worden geschreven voor en door anderen. Daarom zijn de samenvattingen altijd betrouwbaar en actueel. Zo kom je snel tot de kern!
Veelgestelde vragen
Wat krijg ik als ik dit document koop?
Je krijgt een PDF, die direct beschikbaar is na je aankoop. Het gekochte document is altijd, overal en oneindig toegankelijk via je profiel.
Tevredenheidsgarantie: hoe werkt dat?
Onze tevredenheidsgarantie zorgt ervoor dat je altijd een studiedocument vindt dat goed bij je past. Je vult een formulier in en onze klantenservice regelt de rest.
Van wie koop ik deze samenvatting?
Stuvia is een marktplaats, je koop dit document dus niet van ons, maar van verkoper woutnba. Stuvia faciliteert de betaling aan de verkoper.
Zit ik meteen vast aan een abonnement?
Nee, je koopt alleen deze samenvatting voor €4,49. Je zit daarna nergens aan vast.
Is Stuvia te vertrouwen?
4,6 sterren op Google & Trustpilot (+1000 reviews)
Afgelopen 30 dagen zijn er 49160 samenvattingen verkocht
Opgericht in 2010, al 14 jaar dé plek om samenvattingen te kopen