Week 2: Chapter 15 & 18

[123rvb123]

Chapter 15: Handling events

Event handlers

Polling is een proces waarbij de computer of apparaat wacht voor een externe apparaat, om te zien of het klaar voor gebruik is. Een voorbeeld hiervan is wanneer een printer geconnect is met een port, de computer wacht tot dat het kan printen. De meeste programmers wilen polling vermijden.
Een goed systeem hiervoor is dat het systeem de code op de hoogte houdt, als er iets gebeurd.

Events and DOM nodes

Event listeners worden alleen opgeroepen als het event gebeurd in de context van het object waar ze op geregistreerd zijn.

Voorbeeld

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Met de removeEventListener methode, haal je een handler weg.

Event Object

De Event object houdt meer informatie over een event. Zo kan je bijvoorbeeld zien met welke muisknop een gebruiker op een button klikt.

 else if (event.button == 1) {
      console.log("Middle button");

Propagation

Met de meeste event types, zien handlers met nodes & children ook welke events gebeuren bij de children. Eventh handlers op een paragraaf zien ook een click event. Als de paragraf en button beide een handler hebben, mag de meest specifieke, eerst gaan.

Met de stopPropagation methode, zorg je ervoor dat andere het event ook zien. Dit kan handig zijn wanneer je bijvoorbeeld een button in een andere clickable element hebt, en je niet wilt dat de button ook het clickable element indrukt.

---

Chapter 18: HTTP and Forms

De protocol

Het eerste wat gebeurd als je een link typt in je browser, is dat de browser het adres van de server opzoekt van de link en probeert hierna een TCP connectie hiermee te maken op poort 80, de standaard poort voor HTTP traffic.

De informatie die de client verstuurd heet een request. Het begint met deze lijn GET /18_http.html HTTP/1.1. Het eerste woord is de methode, GET betekent dat je wat wilt krijgen. Andere methodes zijn DELETE om te verwijderen, PUT om te maken of vervangen, en POST om informatie naartoe te verzenden.

Browsers en HTTP

Een redelijk gecompliceerde website kan 10 tot 200 resources bevatten. Om dit snel op te halen worden er meerdere GET requests tegelijk aangevraagd.

Get moet gebruikt worden voor requests die vragen om informatie. Requests dat wat veranderen op de server, zoals het maken van een account of het posten van een bericht moet met andere methodes zoals bijvoorbeeld POST.

Fetch

De interface waardoor Javascript, HTTP requests kan maken betekent fetch. Fetch gebruikt de GET methode en vraagt niet om een body.

Focus

Met de focus methode kan je kiezen welke velden keyboard focus krijgen. Dit houdt in wanneer je op een element drukt, dat deze actief wordt. Je kan bijvoorbeeld alleen typen in een tekstveld als deze fgefocussed is. Bij een select menu kan je met de pijltjes door de selectie heen gaan. Dit kan veranderd worden met Javascript focus en blur methodes.

Storing data client-side

Met localStoage kan je data op een pagina houden, dat wanneer je de pagina reload het blijft staan (wordt niet opgeslagen op een server), maar als de pagina afgesloten wordt is de data weg. Browsers geven een limiet aan hoeveel data in de localStorage bewaard kan worden.