Summary
Samenvatting Front-End Devolpment (Javascript)
- Course
- Institution
In deze samenvatting zit alle leerstof rond Javascript uit de les Front-End Development
[Show more]
Seller
Follow
woutnba
Content preview
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
The benefits of buying summaries with Stuvia:
Guaranteed quality through customer reviews
Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.
Quick and easy check-out
You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.
Focus on what matters
Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!
Frequently asked questions
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
Satisfaction guarantee: how does it work?
Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.
Who am I buying these notes from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller woutnba. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy these notes for $4.82. You're not tied to anything after your purchase.
Can Stuvia be trusted?
4.6 stars on Google & Trustpilot (+1000 reviews)
49160 documents were sold in the last 30 days
Founded in 2010, the go-to place to buy study notes for 14 years now