Week 2

[CesarvanH]

Chapter 15: Handling events

Dit hoofdstuk gaat over wat eventhandlers eigenlijk zijn en wat je er allemaal mee kan doen. Eigenlijk blijft het document telkens updaten en kijken of er “events” plaats neemt. Het is hierbij belangrijk om niet te pollen (dit is eigenlijk het queuen van events waardoor de website sloom kan gaan aanvoelen). Het hoofdstuk gaat vooral om de “addEventListener” code wat voor veel eventhandlers gebruikt wordt omdat deze code dus de browser een functie kan laten uitvoeren wanneer er een event plaats neemt, hier is het event dus “click”

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

Ook kan de je browser laten luisteren naar events met specifieke DOM elementen door deze binnen javascript te selecteren en handig om ze dan ook meteen de definieren.

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

Het kan ook handig zijn meerdere event handlers te gebruiken op elementen zodat je naar meerdere events kan luisteren of bijvoorbeeld om een button onklikbaar te maken na de eerste klik.

<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Je kan ook event handlers gebruiken om te kijken naar meer gegevens zoals welke mouse button er geklikt is door middel van een if statement.

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

Propagation is een belangrijke term binnen de event handlers. Met bijvoorbeeld stopPropagation kan je na het eerste event een ander event niet laten triggeren als het bijvoorbeeld in elkaar is genesteld.

<script>
  let para = document.querySelector("p");
  let button = document.querySelector("button");
  para.addEventListener("mousedown", () => {
    console.log("Handler for paragraph.");
  });
  button.addEventListener("mousedown", event => {
    console.log("Handler for button.");
    if (event.button == 2) event.stopPropagation();
  });
</script>

Ook preventdefault werkt een beetje hetzelfde, sommige events hebben namelijk een default action wat getriggerd wordt zoals het klikken op een a href en met een preventdefault kan dit event dus vervangen worden. en niet getriggerd worden.

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

Al deze event handlers geven aan wat er moet gebeuren en wanneer het moet gebeuren. Er zijn veel mogelijkheden om aan te geven wanneer iets moet gebeuren, hieronder een lijstje.

• Keydown: Dit is wanneer er een toets wordt ingeklikt op het keyboard.
• Keyup: Dit is wanneer een toets niet meer wordt ingeklikt.
• Pointer: dit is voor waar de muis naar wijst.
• Mouse Clicks: dit is natuurlijk wanneer er wordt geklikt en is ook in de codes hierboven te zien.
• Mouse motion: dit wordt getriggerd wanneer de muis beweegt en kan gebruikt worden om de positie van de muis op te halen.
• Scrol events: dit is natuurlijk wanneer er gescrolled wordt.
• focus en blur: voor wanneer het tabje open staat in de browser.
• Load: voor wanneer de pagina volledig geladen is.
• Timers: voor het zetten van een tijd.
• Set Time Out: voor delays zodat je een betere snelheid kan behouden

Chapter 18: HTTP and Forms

Dit hoofdstuk gaat over forms en hoe het http protocol werkt. buiten de html body tags bevindt zich namelijk een protocol wat er voor zorgt dat deze gegevens opgehaald kunnen worden. binnen dit protocol worden er ook nog meer gegevens opgehaald zoals de browser, content type en connectie. dit hoort bij een http protocol. eigenlijk maakt de browser dus een verzoek en geeft de server antwoord.

forms zorgen er voor dat niet alleen de browser kan communiceren met de server maar ook de gebruiker en zo ontstaat er dus een communicatie van beide kanten.

Wanneer een form gesubmit wordt komt er in de url de informatie te staan als een query wat dus een soort opsomming is. zo kan er op een aantal manieren communicatie ontstaan.
Post: voor het creëren van data
Get: voor het ophalen van data
Fetch: wat eigenlijk een beetje hetzelfde is als get maar ook handig is voor het ophalen van bestanden en gebruikt maakt van een promise.

Client side en server side mogen dus niet met elkaar verward worden omdat dit 2 volledig verschillende bestanden zijn. Wat de client zien is gelukkig niet wat wij als developers zien anders zou het internet een stuk minder gebruikt worden.

https is een veiliger en zorgt voor een encrypted connection.

form fields hebben meerdere input types die hieronder beschreven zijn.
Text: Een tekstveld van één regel.
password: Hetzelfde als tekst, maar verbergt de getypte tekst.
checkbox: Een aan of uit schakelaar.
radio: Een meerkeuze veld.
file: Hiermee kan de gebruiker een bestand op zijn computer kiezen