Week 2: Samenvatting hoofdstuk 15 & 18

[Txai-HvA]

Chapter 15: Handling events

Event handlers

Het systeem geeft een melding aan jouw code wanneer een event plaats vindt. Browsers doen dit door ons in staat te stellen functies te registreren als handlers voor specifieke evenementen.

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

Events and DOM nodes

De addEventListener method kan je ook gebruiken voor DOM elementen.

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

Je kan inplaats van dit ook de onclick method gebruiken, maar dat kan eenmalig. addEventListener heeft dat limiet niet. removeEventListener zorgt ervoor dat het event listener wordt verwijdert.

Event objects

Event handlers krijgen ook een argument: het event object, die informatie bevat over het event.
Als we bijvoorbeeld willen weten welke muisknop is ingedrukt, kunnen we kijken naar het event object’s button property.

<script>
  let button = document.querySelector("button");
  button.addEventListener("mousedown", event => {
    if (event.button == 0) {
      console.log("Left button");
    } else if (event.button == 2) {
      console.log("Right button");
    }
  });
</script>

Propagation

Als zowel een alinea als de button in de alinea een handler hebben, mag de meer specifieke handler - die op de button - als eerste aan de slag. Dat wordt propagation genoemd. Je kan dit tegenhouden met stopPropagation (behalve focus en blur events).

<button>B</button>
<script>
  document.body.addEventListener("click", event => {
    if (event.target.nodeName == "BUTTON") {
      console.log("Clicked", event.target.textContent);
    }
  });
</script>

Default actions

De meeste events hebben een default action. Denk hierbij aan links, scrollen met je pijltoetsen en een contextmenu openen met je rechtermuisknop. Als je de default action uit wilt zetten, kan je preventDefault gebruiken.

<script>
  let link = document.querySelector("a");
  link.addEventListener("click", event => {
    console.log("Nope.");
    event.preventDefault();
  });
</script>

Key events

Key events worden geactiveerd door knoppen op je keyboard of muis. Denk hierbij aan keydown, keypress, click, dbclick, scroll, mouseenter, mouseout.

Events and the event loop

Voor gevallen waarin je echt wat tijdrovende dingen op de achtergrond wilt doen zonder de pagina te bevriezen, bieden browsers web workers. Een web worker is een JavaScript-proces dat naast het hoofdscript wordt uitgevoerd. Het wordt gebruikt om berichten heen en weer te sturen naar de server.

squareWorker.addEventListener("message", event => {
  console.log("The worker responded:", event.data);
});
squareWorker.postMessage(10);
squareWorker.postMessage(24);

Timers

Met setTimeout kan je, na een bepaalde tijd, een functie af laten gaan. Met clearTimeout wordt de timer gecancelled.

  console.log("BOOM!");
}, 500);

if (Math.random() < 0.5) { // 50% chance
  console.log("Defused.");
  clearTimeout(bombTimer);
}

Debouncing

Door een event te debouncen zorg je ervoor je dat je event niet 100 keer wordt geactiveerd als je er op 100 keer op klikt. Hiermee geef je door middel van een timer aan wat de tijd moet zijn tussen het aantal kliks.

Chapter 18: HTTP and Forms

Het Hypertext Transfer Protocol wordt gebruikt om data op te vragen en te versturen.
Zodra je een url ingevuld in je browser en de server accepteerd de connectie kan het volgende worden terug gestuurd:
```GET /18_http.html HTTP/1.1``

GET haalt bepaalde data op, POST verstuurt data, PUT vervangt bepaalde data en DELETE verwijderd bepaalde data. /18_http.html is de file/resource. HTTP/1.1 is de HTTP protocol versie.

Browsers and HTTP

Wanneer een formulier element's method attribute GET is, wordt de informatie uit het formulier toegevoegd aan het einde van action url als een query string.

GET /example/message.html?name=Jean&message=Yes%3F HTTP/1.1

Wanneer je de GET vervangt door POST, wordt de data opgestuurd naar de body van de request.

FETCH

De interface waarmee browser JavaScript HTTP-verzoeken kan doen, wordt fetch genoemd.
Door fetch aan te roepen, wordt een promise geretourneerd die wordt omgezet in een response-object met informatie over de response van de server, zoals de statuscode en headers.

HTTP sandboxing

Browsers beschermen ons door scripts niet toe te staan HTTP-verzoeken naar andere domeinen te sturen. Servers kunnen in de header opnemen in hun response om de browser expliciet aan te geven dat het oké is dat het verzoek afkomstig is van een ander domein:
Access-Control-Allow-Origin: *

Security and HTTPS

Het veilige HTTP-protocol, dat wordt gebruikt voor URL's die beginnen met https, omhult HTTP-verkeer op een manier die het moeilijker maakt om te lezen en ermee te knoeien.

Focus & Blur

focus zorgt ervoor dat de je focus naar een textbox gaat. Dit kan geactiveerd worden door op de TAB toets te klikken. Met tabindex kan je de volgorde bepalen welke elementen gefocused worden. blur zorgt ervoor dat de focus op een element wordt uit gezet.

Disabled fields

Als je disabled aan een element toevoegd, bijvoorbeeld een knop, dan kan je ze niet gebruiken.

The form as a whole

De name attribute geeft de waarde mee zodra je een formulier verstuurd. Als je bij een button type="submit" gebruikt zorgt dat ervoor het formulier dat daarbij hoort wordt verstuurd naar de server.

Storing data client-side

Met localStorage kan je data toevoegen zonder dat die verloren gaan als je de pagina refreshed.
Met removeItem wordt dit item verwijderd.

console.log(localStorage.getItem("username"));
localStorage.removeItem("username");

Als je wilt dat data aan het einde van een sessie wordt verwijderd, kan je ook gebruik maken van sessionStorage.