Frontend week 2 - Marlenevanerp/blok-tech GitHub Wiki

Event handlers maken het mogelijk om gebeurtenissen op onze webpagina te detecteren en erop te reageren. De addEventListener-methode wordt gebruikt om een dergelijke handler te registreren.

Voorbeeld: Click me

No handler here.

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

Elke gebeurtenis heeft een type ("keydown", "focus", enzovoort) dat deze identificeert. De meeste gebeurtenissen worden aangeroepen op een specifiek DOM-element en verspreiden zich vervolgens naar de voorouders van dat element, zodat handlers die aan die elementen zijn gekoppeld, ze kunnen afhandelen.

Wanneer een gebeurtenishandler wordt aangeroepen, wordt een gebeurtenisobject met aanvullende informatie over de gebeurtenis doorgegeven. Dit object heeft ook methoden waarmee we verdere verspreiding kunnen stoppen (stopPropagation) en kunnen voorkomen dat de browser de gebeurtenis standaard afhandelt (preventDefault).

Als u op een toets drukt, worden "keydown" - en "keyup" -gebeurtenissen geactiveerd. Door op een muisknop te drukken, worden "mousedown", "mouseup" en "click" -gebeurtenissen geactiveerd. Als u de muis beweegt, worden "mousemove" -gebeurtenissen geactiveerd. Touchscreen-interactie resulteert in "touchstart", "touchmove" en "touchend" -gebeurtenissen.

Scrollen kan worden gedetecteerd met de "scroll" -gebeurtenis, en focusveranderingen kunnen worden gedetecteerd met de "focus" en "vervaging" -gebeurtenissen. Wanneer het document is geladen, wordt er een "laad" -gebeurtenis in het venster geactiveerd.

Het Hypertext Transfer Protocol, is het mechanisme waarmee gegevens worden opgevraagd en verstrekt op het World Wide Web.

In dit hoofdstuk wordt er besproken hoe het HTTP-protocol werkt. Een client verzendt een verzoek dat een methode (meestal GET) en een pad bevat dat een bron identificeert. De server beslist vervolgens wat hij met het verzoek doet en reageert met een statuscode en een antwoordtekst. Zowel verzoeken als antwoorden kunnen kopteksten bevatten die aanvullende informatie geven.

De interface waarmee browser JavaScript HTTP-verzoeken kan doen, wordt fetch genoemd. Een verzoek doen ziet er als volgt uit:

fetch ("/ 18_http.html"). dan (r => r.text ()). dan (text => { console.log (De pagina begint met $ {text.slice (0, 15)}); });

Browsers doen GET-verzoeken om de bronnen op te halen die nodig zijn om een webpagina weer te geven. Een pagina kan ook formulieren bevatten waarmee door de gebruiker ingevoerde informatie kan worden verzonden als een verzoek om een nieuwe pagina wanneer het formulier wordt verzonden.

HTML kan verschillende soorten formuliervelden vertegenwoordigen, zoals tekstvelden, selectievakjes, meerkeuzevelden en bestandskiezers.

Dergelijke velden kunnen worden geïnspecteerd en gemanipuleerd met JavaScript. Ze activeren de "change" -gebeurtenis wanneer ze worden gewijzigd, activeren de "invoer" -gebeurtenis wanneer tekst wordt getypt en ontvangen toetsenbordgebeurtenissen wanneer ze toetsenbordfocus hebben. Eigenschappen zoals waarde (voor tekst en geselecteerde velden) of aangevinkt (voor selectievakjes en keuzerondjes) worden gebruikt om de inhoud van het veld te lezen of in te stellen.

Wanneer een formulier wordt verzonden, wordt er een "submit" -gebeurtenis op geactiveerd. Een JavaScript-handler kan voor die gebeurtenis preventDefault aanroepen om het standaardgedrag van de browser uit te schakelen. Formulierveldelementen kunnen ook voorkomen buiten een formulierlabel.

Wanneer de gebruiker een bestand uit zijn lokale bestandssysteem heeft geselecteerd in een bestandskiezer, kan de FileReader-interface worden gebruikt om toegang te krijgen tot de inhoud van dit bestand vanuit een JavaScript-programma.

De objecten localStorage en sessionStorage kunnen worden gebruikt om informatie op te slaan op een manier die het herladen van pagina's overleeft. Het eerste object slaat de gegevens voor altijd op (of totdat de gebruiker besluit ze te wissen), en het tweede slaat ze op totdat de browser wordt gesloten.