Week 2: 15, 18

[PhilipvEgmond]

Chapter 15: Handling events

Event handlers zorgen ervoor dat je code kan uitvoeren wanneer er bepaalde dingen, zoals keypresses, plaatsvinden.

<p>Click this document to activate the handler.</p>
<script>
  window.addEventListener("click", () => {
      console.log("You knocked?");
        });
</script>

Een event listener zet je op een bepaald object, zoals de window hierboven of een DOM element. Het zal dus ook alleen worden uitgevoerd als het event binnen de context van het object gebeurd.

Listeners op nodes met children ontvangen ook events binnen de children. Wanneer beide een listener hebben zal de meer specifieke eerst gaan. Het event werkt naar buiten toe, wat propagation genoemd word, vanaf de node waar het begint naar de parent node tot de root. Een event handler kan de stopPropagation method gebruiken op het event object om te voorkomen dat andere handlers hogerop het event ook ontvangen.

Ook hebben events een target property. Zo kan je bijvoorbeeld een click event listener op een node zetten en met event.target bepalen welke specifieke child node op is geklikt om dan een stukje code voor die child uit te voeren.

Met event.preventDefault zorg je dat de standaard reacties van elementen niet plaatsvinden omdat event handlers voor default behaviour plaatsvinden.

keyDown events activeren wanneer er op een knop gedrukt wordt en blijven activeren zolang er een knop blijft ingedrukt. Hier moet je voorzichtig mee zijn omdat je code vele malen uitgevoerd kan worden.

Er zijn events voor muis en touchscreen gebruikers. mouseMove activeert wanneer de muis beweegt en touchMove wanneer er iets over het scherm veegt.

Chapter 18: HTTP and Forms

Informatie verstuurd door de client heet een request. Get vraagt informatie aan de server, post verstuurt informatie, put vervangt informatie en delete verwijderd informatie. Na de method komt de resource waar de request op antwoord.

Een request of response kan gevolgd worden door een header, waar informatie over de response of request instaat.

HTTPS is een beveiligde vorm van HTTP, het is zo lastiger om van buitenaf requests aan te passen.

Een HTML pagina kan een formulier bevatten. Via formulieren kunnen gebruikers informatie naar de server versturen. Deze gebruiken de bovenstaande methods: get, post, etc. en werken zoals uitgelegd. Bij get zal de content van het formulier in de URL verwerkt worden en bij post wordt de informatie in de body van het request geplaatst en is dus beter als je informatie wil wijzigen in de database.

Javascript kan doormiddel van de browser een http request uitvoeren met fetch(). Waneer fetch wordt gebruikt wordt er een belofte gedaan die wordt opgelost in een antwoord met een object wat weer informatie heeft over de servers antwoord.

Een formulier geeft de gebruiker de mogelijkheid om http requests aan de server te doen. Een formulier kan verschillende velden hebben maar de meest gebruikte is input. Input heeft verschillende attributen die je kan meegeven zoals: tekst, password, checkbox, radio, file, etc.

Ook kan er data opgeslagen worden bij de client. Je hebt localStorage die gegevens opslaat tot het overschreven wordt. sessionStorgage slaat data op tot de browser gesloten wordt.