• Week 1: Progressive Enhancement Findings
  • Week 1: samenvattingen
    • Chapter 4: Datastructures: Objects and Arrays
    • Chapter 13: Javascript and the browser
    • Chapter 14: The Document Object Model
• Week 2: Codeplan
  • Chapter 15: Handling events
  • Chapter 18: HTTP and Forms
• Week 3: Scope and Context
  • Scope
  • Context
• Week 4: Hoisting & Closures
  • Hoisting
  • Closures
  • Week 4: samenvattingen
    • Chapter 4: Higher Order functions

Progressive enhancement is een principe die wordt gebruikt binnen webontwikkeling dat er voor zorgt dat websites en webapplicaties die technologieën gebruiken die niet in elke browser wordt ondersteund, toch zullen werken.

Met progressive enhancement wordt dus allereerst een basisversie gemaakt die volledig werkt voor alle gebruikers onder verschillende voorwaarden. Deze voorwaarden kunnen dingen zijn zoals een verouderde browser, gebruikers die JavaScript uit hebben staan in hun browser etc, niet veel voorkomende resoluties etc. Vervolgens worden op deze basisversie verschillende lagen aangebracht die het geheel uitbreiden. Deze lagen bestaan uit CSS en JavaScript.

Je zou progressive enhancement ook kunnen beschrijven als web content first. Iedereen kan de basis content van de website bekijken, maar degene die de technologieën of andere browser features wel ondersteunen krijgen de 'enhanced' versie van de website te zien.

Belangrijkste principes van Progressive Enhancement:

• Basis content moet beschikbaar zijn voor elke browser en elke versie van de browser.
• Basis functionaliteit moet beschikbaar zijn voor elke browser en elke versie van de browser.
• Semantisch correcte opgemaakte bestanden
• De enhanced layout wordt aangeboden door externe CSS bestanden.
• De enhanced functionaliteit wordt aangeboden door externe JavaScript bestanden.
• End-user browser voorkeuren worden gerespecteerd.

Voordelen:

• Toegankelijkheid: De basis content en functionaliteiten zijn beschikbaar voor elke gebruiker op elke browser.
• Search Engine Optimization (SEO): De basisinhoud is altijd toegankelijk voor 'spiders' van zoekmachines.

Progressive enhancement toegepast op mijn feature design

HTML

HTML, CSS

HTML, CSS & JavaScript

Bronnen:

Wikipedia contributors. (2021, February 8; last edited). Progressive enhancement. Wikipedia. https://en.wikipedia.org/wiki/Progressive_enhancement

Progressive Enhancement - MDN Web Docs Glossary: Definitions of Web-related terms | MDN. (2020, September 15). https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement

Nummers, booleans (true/false) en strings zijn 'atomen' waarop datastructuren zijn gebouwd. Objecten zorgen ervoor dat je waarden en andere objecten kan groeperen om complexere datastructuren te bouwen. JavaScript heet een data type voor het opslaan van een reeks aan waarden; een array.

let listOfNumbers = [2, 3, 5, 7, 11];
console.log(listOfNumbers[2]);
// → 5
console.log(listOfNumbers[0]);
// → 2
console.log(listOfNumbers[2 - 1]);
// → 3

Een array start altijd op 0 i.p.v. 1. De eerste waarde in een array wordt dus altijd opgeroepen met 0.

Bijna alle Javascript waarden hebben ook properties. De uitzonderingen zijn null en undefined. Je roept deze properties aan met een punt (value.x) of met brackets (value[x]). De dot notatie en de bracket notatie worden allebei gebruikt om object properties aan te roepen, maar het verschil tussen de twee is dat de bracket notatie ook gebruikt kan worden met variabelen.

array.length kan je gebruiken om de lengte van een array terug te krijgen.

Properties die functies bevatten worden methodes genoemd.

Een object in JavaScript is een collectie van properties. Een object kan je vergelijken met een object irl zoals een auto. Een auto heeft properties bijv: kleur, materiaal, gewicht etc. Deze objecten+properties kan je zelf maken en vervolgens gebruiken.

Het Hypertext Transfer Protocol (HTTP) is een protocol voor het ophalen van informatie, zoals webpagina's of afbeeldingen. Het World Wide Web is een reeks protocollen en indelingen waarmee je webpagina's in een browser kunt bezoeken. Elk document op het web wordt genoemd door een Uniform Resource Locator (URL). Een URL bestaat uit een protocol (http/https) een server en een path.

HTML staat voor Hypertext Markup Language en wordt gebruikt om web pagina's mee op te stellen. HTML documenten bevatten een head en een body. De head bevat informatie over het document (charset, titel etc.) en de body bevat het gehele document op zichzelf; alle tags en content.

JavaScript wordt toegevoegd aan het HTML document met behulp van de <script> </script> tags. Met JavaScript kan je dynamische web pagina's opstellen en ervoor zorgen dat gebruiker interactie met deze heeft.

Als je een web pagina opent in je browser dan pakt de browser de HTML en parsed deze. Het tekent als het ware de pagina op het scherm met de gegeven HTML. HTML structuren bestaan uit tags. Deze open en sluit je vervolgens weer. Er zijn veel tags die verschillende dingen doen. Deze structuur noem je de DOM (Document Object Model). Deze kan je op verschillende manier manipuleren met o.a. JavaScript.

Een tree is opgebouwd uit verschillende nodes en deze nodes kunnen referen naar andere nodes (children) die weer hun eigen children kunnen hebben a.k.a. nesting... Elke datastructuur die een tree wordt genoemd heeft een root. In de DOM is de document.documentElement de root.

De DOM kan gemanipuleert worden door o.a. JavaScript, hiermee kan je de verschillende nodes (tags) aangespreken die zich in de DOM bevinden. Met CSS kan je het gehele document stylen...

Een event handler is een functie of object die luistert d.m.v. een event listener naar het doen van een actie. Bijv: key presses, clicks.

<script>
  window.addEventListener("click", () => {
    console.log("You knocked?");
  });
</script>

Wanneer er op de browser window geklikt wordt, komt er in de console "You knocked?" te staan.

Event handler functies worden een argument mee gegeven: het event object. Dit object bevat aanvullende informatie over het event. Je kan zo bijvoorbeeld zien welke muisknop wordt ingedrukt door naar de event object properties te kijken. De informatie die wordt opgeslagen in het event object verschilt per event.

Veel events hebben een default actie. Bijv: als je een link klikt, ga je naar de bestemming van de link, als je pijltje naar beneden indrukt scroll je naar beneden op de webpagina. De JavaScript event handlers hebben prioriteit boven deze default acties.

Events worden aangroepen op specifieke DOM elementen, die dan verder verspreiden naar de children van dat element. Dit kan je stoppen d.m.v. (stopPropagation). De browser default eventhandling kan ook gestopt worden met (preventDefault).

De informatie die door de client wordt verstuurd heet een request. Deze bevat een method, GET en de path, hetgeen waar je naartoe wilt identificeert. De server verwerkt de request en geef een status code en een response terug. JavaScript maakt HTTP requests met fetch. Dit kan je tevens ook gebruiken voor API calls.

Browsers doen GET requests om elementen op te halen om een webpagina te laten zien. Je kan ook een GET request maken voor data die opgeslagen staat in een database, om deze te laten zien aan de gebruiker.

Webpagina's kunnen ook formulieren bevatten die de gebruiker kan invullen en vervolgens kan versturen met de submit knop. Deze formulieren maken gebruik van de POST functie om data te versturen en op te slaan in bijv: een database.

Data kan worden opgeslagen in een localStorage of sessionStorage. De localStorage bewaart de data voor altijd, maar de gebruiker kan deze handmatig wissen. de sessionStorage bewaart de data totdat de gebruiker de browser afsluit. Cookies zijn nog een andere manier om data op te slaan om later weer op te vragen. Een cookie is een klein bestandje dat de server op de computer van de gebruiker plaatst. Als de gebruiker terug gaat naar de bestemming van de cookie (een webpagina) wordt deze cookie opgehaald en wordt de data gebruikt.

De filter werkt zonder JavaScript volledig server side met query parameters.

Scoping bepaalt waar variabelen, functies en objecten aanspreekbaar zijn in je code. De scope van een variabele wordt bepaalt door de locatie van de variabele declaratie.

In JS zijn er twee scopes.

1. Global scope
2. Local scope

Een variabele buiten een functie zit in de global scope. Er zit wel een verschil tussen var en let declaraties. Let is gelimiteerd aan de block statement of de expressie waarin het gebruikt is. Var declareert een variabele globaal of locaal aan een gehele functie i.p.v. alleen het block statement.

Elke variabele die in een global scope staat kan aanspreekbaar zijn en aangepast worden in elke andere scope.

Dit is een stukje code van een eigen project waarbij ik de variabele textSlider buiten de functie declareer, waardoor deze overal kan worden gebruikt. De variabele verkrijgt het element met de ID 'slider' uit de HTML en voegt hier een event listener aan toe met een mousedown event.

const textSlider = document.getElementById('slider');

textSlider.addEventListener('mousedown', (e) => {
    mouseDown = true;
    startHorizontal = e.pageX - textSlider.offsetLeft;
    scrollLeft = textSlider.scrollLeft;
});

Variabelen die worden gedeclareert in een functie zijn variabelen in de local scope van de functie. Deze worden ook wel function scope genoemd, omdat de local scope door functies wordt aangemaakt. Variabelen in de local scope zijn alleen aanspreekbaar in de functie waarin ze zijn gedefinieerd.

In dit stukje code van een eigen project maak ik de variabelen aan in een functie, dus deze behoren tot de local scope van deze functie. Ik definieer container en imageFollowsCursor en deze halen een element op uit de HTML met een bepaald ID. Deze worden vervolgens allen binnen deze functie gebruikt.

followTooltip = (containerId, tooltipId) => {
    const container = document.getElementById(containerId);
    const imageFollowsCursor = document.getElementById(tooltipId);

    container.addEventListener("mousemove", (follow) => {
        const bounds = container.getBoundingClientRect();

        const x = follow.clientX - bounds.left + container.scrollLeft;
        const y = follow.clientY - bounds.top + container.scrollTop;

        imageFollowsCursor.style.left = `${x - imageFollowsCursor.offsetWidth / 2}px`;
        imageFollowsCursor.style.top = `${y - imageFollowsCursor.offsetHeight / 2}px`;

        if (imageFollowsCursor.classList.contains("hideFollowCursor")); {
            imageFollowsCursor.classList.remove("hideFollowCursor");
        }
    });

followTooltip('mainSection', 'followCursor');

Bronnen: Tolulope, K. (2018, April 24). Understanding Hoisting and Scoping in Javascript - Backticks & Tildes. Medium. https://medium.com/backticks-tildes/understanding-hoisting-and-scoping-in-javascript-39ea7b41e31

Liew, Z. (2019, January 17). JavaScript Scope and Closures. CSS-Tricks. https://css-tricks.com/javascript-scope-closures/

Context is gerelateerd aan objecten. Het refereert aan het object waar een functie aan toebehoort. Als je het JavaScript this keyword gebruikt dan refereer je aan het object binnen een functie.

In dit vorbeeld returned this.prop dus 42, omdat this refereert naar het object binnen de functie.

const test = {
  prop: 42,
  func: function() {
    return this.prop;
  },
};

console.log(test.func());
// expected output: 42

In een globale context refereert this aan een globaal object.

Het window object is een global object binnen een browser. Als je this toepast op het window krijg je dan ook alles binnen het window object terug.

// In web browsers, the window object is also the global object:
console.log(this === window); // true

a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b)  // "MDN"
console.log(b)         // "MDN"

• In een methode verwijst 'this' aan het owner object.
• Als 'this' zonder context wordt gebruikt, refereert het aan het globale object.
• In een functie refereert 'this' aan het globale object.
• In een stricte functie is 'this' undefined.
• In een event refereert 'this' aan een element die het event heeft ontvangen.
• Methodes zoals call() en apply() kunnen 'this' refereren aan elk object.

Bronnen: JavaScript this. (n.d.). W3Schools - The JavaScript This Keyword. Retrieved March 9, 2021, from https://www.w3schools.com/js/js_this.asp

Gupta, D. (2019, December 26). Understanding Javascript ‘this’ keyword (Context) - Towards Data Science. Medium. https://towardsdatascience.com/javascript-context-this-keyword-9a78a19d5786

Hoisting is een mechanisme die variabelen en functie declaraties boven aan de scope plaatst voor de code executie. Dit betekent dat het niet uitmaakt waar functies of variabelen zijn gedeclareert. Ze worden hoe dan ook bovenaan de scope geplaats ook al is de scope global of local. Hoisting verplaats alleen de declaraties (var x; x = 5) van variabelen en functies en geen initialisaties (var x = 5). De assignment van variabelen en fucnties blijven staan. Simpel gezegd kan een variabele gebruikt worden voordat deze gedeclareerd is.

Functies worden altijd als eerst gehoist, daarna de variabelen. Functie declaraties hebben prioriteit boven variabelen declaraties, maar niet boven variabele assignments.

var x; // Declare x
x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x;                     // Display x in the element

Zelfde resultaat en code, maar dan gehoist

x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x;                     // Display x in the element

var x; // Declare x

Bronnen: Wakio, M. (2021, February 25). Understanding Hoisting in JavaScript. DigitalOcean. https://www.digitalocean.com/community/tutorials/understanding-hoisting-in-javascript

Tolulope, K. (2018, April 24). Understanding Hoisting and Scoping in Javascript - Backticks & Tildes. Medium. https://medium.com/backticks-tildes/understanding-hoisting-and-scoping-in-javascript-39ea7b41e31

Binnen JavaScript is een closure een begrip waarbij een inner functie toegang heeft tot de buitenste(enclosing) functie variabelen. Oftewel je kan een functie in een functie plaatsen. De inner functie is dan de closure. De variabelen van de buitenste(parent) funtie kunnen opgehaald worden in de inner functie.

Een closure heeft drie scope chains.

• Het heeft toegang tot zijn eigen scope
• Het heeft toegang tot de buitenste functie variabelen
• Het heeft toegang tot de globale variabelen

function outer() {
   var b = 10;
   function inner() {
        
         var a = 20; 
         console.log(a+b);
    }
   return inner;
}

Een outer functie die variabele b heeft en deze returned in de inner functie. De inner functie heeft een variabele a en heeft toegang tot de outer variabele b. De scope van variabele b is gelimiteerd tot de outer functie en de scope van variabele a is gelimiteerd tot de inner functie.

Globale variabelen leven tot dat de pagina is afgesloten, zoals naar een andere pagina navigeren of de website afsluiten. Locale variabelen worden aangemaakt als de functie wordt aangeroepen en worden verwijderd zodra de functie is afgelopen.

Bronnen: Ram, P. (2019, August 29). A simple guide to help you understand closures in JavaScript. Medium. https://medium.com/@prashantramnyc/javascript-closures-simplified-d0d23fa06ba4

JavaScript Function Closures. (n.d.). JavaScript Closures. Retrieved March 9, 2021, from https://www.w3schools.com/js/js_function_closures.asp

Als een project groter wordt, dan wordt het complexer. Als een project complexer wordt dan wordt het steeds meer verwarrend en dat gaat uiteindelijk bugs opleveren. Het is dus beter om je code zo kort mogelijk te houden, maar zorgen dat het dan wel logisch blijft.

Een abstraction is een manier om de implementatiedetails te verbergen en alleen de functionaliteit aan de gebruikers te tonen. Het negeert de irrelevante details en toont alleen de vereiste details.

Functies die werken op andere functies, worden higher-order functies genoemd. Je kan een functie maken die zelf nieuwe functies maakt.

function greaterThan(n) {
  return m => m > n;
}

let greaterThan10 = greaterThan(10);
console.log(greaterThan10(11));
// → true

En functies die andere functies veranderen

function noisy(f) {
  return (...args) => {
    console.log("calling with", args);
    let result = f(...args);
    console.log("called with", args, ", returned", result);
    return result;
  };
}
noisy(Math.min)(3, 2, 1);
// → calling with [3, 2, 1]
// → called with [3, 2, 1] , returned 1

De forEach is een ingebouwde array method dat ongeveer als een for/of loop is, maar dan als een higher-order functie.

De filter methode returned een nieuwe array die alleen de elementen laat zien die door de predicate functie komen. Predicate funties zijn functies die een TRUE of FALSE teruggeven. Een array transformeren door elk element door een functie te halen kan je doen met map. Reduce wordt gebruikt om alle elementen in een array in één waarde te zetten. De some methode test of een element overeen komt met de gegeven predicate functie. findIndex vindt de positie van het eerste element die overeen komt met een predicate functie.