V6_JavaScriptEvent

JavaScript

JavaScript ist die dritte der drei Grund Webtechnologien: HTML, CSS und JS und JavaScript hat eine eigene Syntax. Ähnlich wie CSS kann auch JavaScript direkt im .html Dokument eingebunden oder als externes File dazugeladen werden.

Funktionen von JavaScript

JavaScript kann beispielsweise auf Ereignisse im Browser reagieren, die Darstellung der Seite verändern, eine CSS Animation starten, stoppen, Daten von einem Server laden, an einen Server schicken usw.

In diesem Dokument findest du Beispiele zu Ereignissen und Veränderungen der Seite.

JavaScript im HTML einbinden

Zwei Möglichkeiten (analog CSS):
Var 1. Füge diesen HTML Script Tag im HTML head oder im body ein:

<script>
    alert('hallo seite geladen');
</script>

Var 2. Im script.js

directory_name/
    - index.html
    - assets/
        - style.css
        - js/
            - scripts.js

<script src="assets/js/script.js"></script>

Im script.js. Mit dem Befehl console.log() kannst du in der Konsole etwas ausgeben lassen, Bsp. einen Wert von einer Variable.

console.log('hallo von extern')

Im head oder bevor der Body schliesst, einbinden. Wichtig, wenn du auf Elemente im DOM zugreifst, dann musst du das JavaScript einbinden, bevor der Body schliesst, nicht im head. Das DOM ist dort noch nicht fertig geladen.

Ereignisse HTML Events

Was ist ein HTML Event? HTML bietet die Möglichkeit, durch Ereignisse (Events) Aktionen im Browser auszulösen, z. B. ein JavaScript zu starten, wenn ein Benutzer auf ein Element klickt. Im Beispiel unten wird auf das onclick Event JavaScript aufgerufen.
Weitere Events:
onresize Wenn man das Browserfenster vergrössert oder verkleinert
onload Wenn die ganze Page gelanden ist
Noch mehr: https://www.w3schools.com/tags/ref_eventattributes.asp

Zwei Schreibweisen

Die alte Schreibweise schreibt den Event Handler als Attribut direkt in das html:

<button class="specialbutton" onclick="alert('Hallo')">Click mich!</button>

Innerhalb der Hochkommas von onclick="" wird JavaScript erwartet.

Die neue Schreibweise generiert per JavaScript einen sogenannten EventListener und hängt dem dem Element an. Das obige Beispiel sieht dann so aus:

<button id="buttonclick" class="specialbutton">Click mich!</button>

let btn = document.getElementById("buttonclick");
//Variante anonyme Funktion, kürzer
/*
btn.addEventListener("click", (e) => {
  alert("Hallo");
});
*/

//Variante mit Funktionsaufruf und Funktion, länger
btn.addEventListener("click", doSomething);

function doSomething(){
    alert("Hallo");
}

Event Object

Das Event Object beinhaltet eine Reihe von Informationen, zum Beispiel, wo geklickt wurde, welcher key eingegeben wurde, auf welches Element geklickt wurde usw. So kannst du dir das Event Objekt und alle Informationen in der Konsole ausgeben lassen:

let btn = document.getElementById("buttonclick");

btn.addEventListener("click", (e) => {
  console.log(e);

});

Events entfernen

<button>Act-once button</button>

  const button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);//Remove after called once
  }
  button.addEventListener("click", once);//ADD 

Ressourcen: https://eloquentjavascript.net/15_event.html