Front end Week 2:

Chapter 15: Handling Events

Event Handlers Event handlers zijn gebeurtenissen (events) die plaatsvinden in de browser. Dit wordt aan de code doorgegeven wanneer zich een gebeurtenis voordoet. Door handlers te maken voor deze specifieke gebeurtenissen (handelingen van gebruikers) kan de browser ze herkennen.

<p>Click this document to activate the handler.</p>

<script>

window.addEventListener("click", () => {

``console.log("You knocked?");``

});

</script>

window vertegenwoordigt het object waar de gebruiker de handeling uitvoert. In dit geval staat window voor het hele venster van het document.

Events and DOM nodes

<button>Click me</button>

<p>No handler here.</p>

<script>

let button = document.querySelector("button");

button.addEventListener("click", () => {

`console.log("Button clicked.");`

});

</script>

Je hebt de button variable, en de addEventListener registreert binnengekomen handelingen van gebruikers, dat is een Event object. Een event object is dus de directe handeling op de browser door de gebruiker. Dus als iemand bijvoorbeeld klikt op de button wordt deze eventhandler geactiveerd en dus herkent. Voorbeelden van event objects zijn dus click, mousedown, drag etc.

Propagation stopPropagation methode wordt gebruikt om ervoor te zorgen dat de eventhandlers niet op andere delen van de code overschakelen (de parents). Hiervoor kan je ook de target methode gebruiken, waardoor je dus doelt op een event (bijv. de button) .preventDefault zorgt ervoor dat de browser niet op de standaard manier een event gaat uitvoeren (bijv. de pijl omlaag drukt, schuift de browser de pagina omlaag) met .preventDefault kan je ditt dus stopzetten.

Chapter 18: HTTP and Forms

eloquentjavascript.net/18_http.html de browser zoekt eerst het adres op van de server die is gekoppeld aan eloquentjavascript.net en probeert een TCP-verbinding te openen op poort 80. Poort 80 is de standaardpoort voor HTTP-verkeer.

De browser communiceert dan met de server, en de server weer met de browser en opent het aangevraagde 'document' door de gebruiker. De aanvraag van de gebruiker noemen we een request.

Dit is deze request:

GET /18_http.html HTTP/1.1

het eerste stukje is de methode van de request. (ander voorbeeld is Delete, PUT om een bron te vervangen) GET betekent dat we de gespecificeerde bron willen opvragen.

18_http.html is het pad naar de bron waarop de request betrekking op heeft, dit kan bijvoorbeeld een bestand zijn op de server.

HTTP/1.1 de versie van het HTTP-protocol.

HTTP / 1.1 200 OK

De server antwoord hierop met hetzelfde HTTP-protocol gevolgd door een drie-cijferig nummer en de status. Statuscodes die met het cijfer 2 beginnen, geven aan dat het is gelukt. Statuscodes die met het cijfer 4 beginnen, dat er een probleem is met de request. Statuscodes die met het cijfer 5 beginnen, geven aan dat er een fout is gesignaleerd in verband met de server (voorbeeld van een status-code is 404, die heeft aan dat er iets niet goed is gegaan met de request).

Fetch Fetch is een interface waarmee je door middel van javascript HTTP-verzoeken kunt aanvragen. Een fetch aanroepen retourneert een response in de browser die de status van de server aangeeft.

fetch("example/data.txt").then(response => { console.log(response.status);