Javascript Concepts

DOM & Events

DOM: (Document Object Model) is een representatie van elk element op een pagina in een boomstructuur. De browser gebruikt het DOM om elk element op een pagina te tonen. Het bevat zowel de elementen als de inhoud van een element.

Event: Een event is een actie waar we naar kunnen luisteren doormiddel van Javascript. Hier een lijst met alle events waar je naar kunt luisteren: MDN event reference list

Progressive Enhancement

Progressive enhancement is een design philosophy waarbij je er voor zorgt dat de baseline van essentiële content en functionaliteit toegankelijk is voor zoveel mogelijk gebruikers, terwijl je gelijkertijd de best mogelijke ervaring levert aan de gebruikers die de meest up-to-date technology/browsers gebruiken die alle benodigde code kunnen runnen.

Functions

Een Javascript functie is een block met code die bedoeld is om een specifieke taak uit te voeren. Een functie wordt uitgevoerd zodra "iets" het aan roept, denk hierbij bijvoorbeeld aan een eventListener. Met de komst van ES6 is er een nieuwe manier voor het schrijven van functions toegevoegd aan Javascript. Deze manier heet een "arrow function".

// ES5
var add = function(x, y) {
    return x + y
};
// ES6
let add = (x, y) =>  x + y

Web API's

De DOM is een Web API. Het geeft de developer namelijk een interface die hij/zij kan gebruiken om interactie te creeëren. Op het gebruiken we Javascript om de DOM te manipuleren. Een voorbeeld hiervan is bijvoorbeeld de Intersection Observer.

/* intersection observer */
let theReveals = document.querySelectorAll('.reveal');

let IOObserver;

let IOOptions = {
	threshold: .3
};

IOObserver = new IntersectionObserver(IOFunction, IOOptions);

for (reveal of theReveals) {
	IOObserver.observe(reveal);
}

function IOFunction(entries) {
	for (entry of entries) {
		if(entry.isIntersecting) {
			entry.target.classList.add("active");
		}
	}
}

Scopes

Functional scopes

Wanneer in variabele gedeclareerd is in een functie, is deze alleen toegankelijk/beschikbaar binnen deze functie. Deze variabele worden ookwel "Local variables" genoemd.

Global scope

Variabelen die globaal zijn gedeclareerd, en dus buiten een functie, hebben een global scope. Global variabelen zijn overal toegankelijk in de Javascript. Ook is het zo dat Local variabelen meer prioriteit hebben dan global variabelen.

Block scope

Voor de introductie van ES6 (2015), had Javascript alleen de Global scope en de Function scope. Met de komst van ES6 werden er twee nieuwe keywords geïntroduceerd: let & const. Deze twee keywords voorzien de Block scope in Javascript. De const variabele wordt gebruikt om een variabele te declareren waarvan de waarde hetzelfde blijft, de let variabele wordt gebruikt om een variabele te declareren waarvan de waarde kan veranderen. Voorheen gebruiktte men hiervoor het var keyword.

Wanneer een variabele wordt gedeclareerd in een block aan de hand van de nieuwe keywords const & let, zijn deze niet meer beschikbaar buiten dat specifieke block.

{
  let x = 2;
}
// x can NOT be used here

{
  var x = 2;
}
// x CAN be used here

Hoisting

Hoisting is een mechanisme waarbij function/variabele declarations in de Javascript naar boven wordern verplaatst Hoisting is het proces waarbij de declaratie van variables en functions naar de bovenkant van de scope worden verplaatst voordat de code wordt uitgevoerd. Hoisting zorgt er voor dat functions veilig gebruikt kunnen worden in de code voordat deze zijn gedeclareerd.