Skip to content

Intro JS DOM

Jump to bottom
hzuellig edited this page Apr 21, 2025 · 1 revision

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

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

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

Darstellung ändern DOM (Document Object Model)

DOM, was ist das?
Eine Schnittstelle, über die JavaScript alle Elemente eines HTML Dokuments verändern kann. Das DOM ist eine Abbildung des ganzen HTML Baums mit allen Knoten für JS. Jeder sogenannten 'Knoten' und jedes Attribut kann über JS angesprochen und verändert werden. Anders gesagt, eine .html Seite liefert JavaScript eine Abbildung ihrer Elemente, Stile und Zustands der Elemente. JavaScript kann diese Informationen lesen, aber über die Schnittstelle auch Elemente verändern, hinzufügen, etc. Der Zugriff geschieht über die document Variable.
https://www.w3schools.com/js/js_htmldom.asp

Noch etwas tiefer: https://eloquentjavascript.net/14_dom.html


Quelle: https://www.w3schools.com/js/js_htmldom.asp

Ein Beispiel

Mit JavaScript Attribute eines Elements verändern: Erstelle im HTML ein Element mit der ID #element und style es über CSS. Positioniere es absolut.

<div id="element"></div>
position: absolute;
top: 200px;
left: 0px;
let n = 0; /*schlüsselwort let und variablenname. zuweisung des werts von rechts nach links */
function buttonPressed() {
    n++;
    document.getElementById("element").style.left = n + "px";
}

Du greifst nun über die DOM Schnittstelle auf das Attribut left zu.
W3C, Zugriff auf Style Properties: https://www.w3schools.com/jsref/prop_style_aligncontent.asp

Ein zweites Beispiel

Elemente mit JavaScript erzeugen:

<button class="specialbutton" onclick="neuesElement()">Erzeuge Element!</button>
function neuesElement() {
    let div = document.createElement("div");
    div.classList.add('random');
    document.body.appendChild(div);
}

W3C Examples hier: https://www.w3schools.com/js/js_htmldom_nodes.asp
Beispiel ergänzt, random positionierung:

function neuesElement() {
    let div = document.createElement("div");
    div.classList.add('random');
    div.style.left = Math.random() * window.innerWidth + "px";
    div.style.top = Math.random() * window.innerHeight + "px";
    document.body.appendChild(div);
}

Wir werden nun einen CSS Stil über JavaScript (JS) verändern. Dazu müssen wir per JS das gewünschte Element ansprechen. Für diesen Zweck gibt es das DOM -> Document Object Model.

Ein Beispiel, wir setzen einen CSS Stil per JS. Erstelle im HTML ein Element mit der ID kreis und gib ihm ein paar CSS Stile.

Ein drittes Beispiel

 <div id="kreis"></div>
 #kreis {
            border-radius: 50%;
            width: 400px;
            height: 400px;
            background-color: #000506;
        }

Nun greifen wir über das DOM auf das Element kreis zu und verändern das CSS Attribut background-color über JS.

<script>
   function changeProperties(){
      let kreis = document.getElementbyId('kreis');/* Zugriff auf das Element kreis */
      kreis.style.backgroundColor = "red";/* Verändern des CSS Attributs */
      /*todo
      Probiere mal, andere CSS Properties zu verändern*/
   }
    
</script>

Auf die CSS Attribute greifst du in dieser Schreibweise zu (Muster): element.style.nameProperty Die Namen der Property sind in JS für einzelne Begriffe wir border, color gleich wie im CSS. Also element.style.color oder element.style.color. Für CSS Properties mit Bindestrich wie background-color, border-radius, animation-name gilt, dass das erste Wort klein geschrieben ist und das zweite gross und ohne Bindestrich direkt an das erste Wort gesetzt wird.
Also:
CSS background-color -> JS backgroundColor
CSS animation-name -> JS animationName
Eine Übersicht findest du hier: https://www.w3schools.com/jsref/dom_obj_style.asp

Ein viertes Beispiel: CSS Animation über JS starten

Wir werden nun eine CSS Animation über JavaScript starten. – CSS Animation erstellen mit dem Schlüsselwort @keyframes, und ein neues Element, das wir animieren werden, zum Beispiel:

@keyframes anim {
            0% {
                box-shadow: 0px 0px 8px 8px #e803ba;
            }
            25% {
                box-shadow: 0px 0px 0px 8px #e803ba, 0px 0px 8px 16px #e8035b;
                background-color: #03e8ba;
            }
            50% {
                box-shadow: 0px 0px 0px 8px #e803ba, 0px 0px 0px 16px #e84803, 0px 0px 8px 24px #e85f03;
                background-color: #038ce8;
            }
            75% {
                box-shadow: 0px 0px 0px 8px #e803ba, 0px 0px 0px 16px #e84803, 0px 0px 0px 24px #e85f03, 0px 0px 8px 32px #e8a303;
            }
        }
#kreis2 {
            border-radius: 50%;
            width: 400px;
            height: 400px;
            background-color: #000506;
            
        }

Nun weisen wir #kreis2 die Animation zu, wir wollen aber, dass sie noch nicht startet. Dazu kannst du den animation-play-state: paused; setzen.

            animation-name: anim;
            animation-duration: 4s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            animation-play-state: paused;

Wir werden nun einen Button erstellen und über Klick die Animation starten:

 <button class="specialbutton" onclick="starteAnimation()">Animiere den Kreis</button>
    <script>
        function starteAnimation() {
            let element = document.getElementById('kreis2');
            element.style.animationPlayState = "running";
         
        }
    </script>

Events über JS triggern

In unseren Beispielen haben wir das Event onclick auf einen HTML Button gesetzt und über HTML getriggert (=ausgelöst). Man kann Events aber auch über JavaScript triggern. Im Beispiel wollen wir die Animation nicht nur über den Button starten, sondern auch dann, wenn die User zu scrollen beginnen. In JavaScript sieht das so aus:

<script>
   window.addEventListener("scroll", starteAnimation);
</script>

https://www.w3schools.com/jsref/dom_obj_event.asp

Automatisierung

Etwas in einem bestimmten zeitlichen Abstand immer und immer wieder ausführen, z.Bsp. abfragen, wo die Mausposition ist oder die Uhrzeit setzen, usw. Dafür gibt es die Funktion, sie ruft in einem bestimmten zeitlichen Abstand eine andere Funktion auf: setInterval(andereFunktion, Zeit).

setInterval(function () {
  doSomething();
}, 20);

function doSomething(){
      let kreis = document.getElementbyId('kreis');/* Zugriff auf das Element kreis */
      kreis.style.left =eval(parseInt(kreis.style.left)+1)+"px";/* Update CSS Attributs left, Element wandert nach rechts */
}

Material für Selbststudium freiwillig

Mouse Follower bauen

https://codepen.io/Nandugokul-K-N/pen/MWLxWoV

Clone this wiki locally