Webentwicklung mit JavaScript für Einsteiger:innen

1. Was ist Webentwicklung?

Wenn wir eine Webseite oder ein kleines Browser-Spiel bauen, arbeiten meistens drei Sprachen zusammen:

HTML beschreibt den Inhalt
CSS beschreibt das Aussehen
JavaScript beschreibt das Verhalten

Ein einfaches Bild dazu:

flowchart LR  
	A[HTML] --> D[Webseite]  
	B[CSS] --> D  
	C[JavaScript] --> D

Man kann sich das so merken:

HTML = Das Gerüst
CSS = Das Design
JavaScript = Die Logik und Interaktivität

2. Wie arbeitet der Browser?

Wenn wir eine HTML-Datei öffnen, passiert einfach gesagt Folgendes:

Der Browser liest das HTML
Er baut daraus eine DOM-Struktur
Er liest das CSS
Er berechnet, wie alles aussehen soll
Er rendert die Seite, also zeigt sie an
JavaScript kann dann die Seite verändern indem das DOM verändert wird

flowchart TD  
	A[HTML-Datei laden] --> B[HTML lesen]  
	B --> C[DOM erstellen]  
	C --> D[CSS anwenden]  
	D --> E[Seite rendern]  
	E --> F[JavaScript reagiert auf Ereignisse]  
	F --> G[DOM wird verändert]  
	G --> E

Wichtig

Die Webseite ist nicht einfach nur „Text aus der HTML-Datei“.
Der Browser baut aus dem HTML ein Modell der Seite im Speicher auf. Dieses Modell heißt DOM.

3. Das DOM

3.1 Was bedeutet DOM?

DOM steht für Document Object Model.

Das DOM ist eine Art Baumstruktur der Webseite.
Jedes HTML-Element wird dabei zu einem Objekt, auf das JavaScript zugreifen kann.

Beispiel-HTML:

<body>  
	<h1>Dungeon Treasure Game</h1>  
	<div id="game"></div>  
	<button>Restart</button>  
</body>

Daraus entsteht ungefähr dieser DOM-Baum:

graph TD  
	A[document]  
	A --> B[html]  
	B --> C[body]  
	C --> D[h1]  
	C --> E[div#game]  
	C --> F[button]

JavaScript kann dann zum Beispiel:

ein Element finden
seinen Text ändern
CSS-Klassen hinzufügen
neue Elemente erstellen
Elemente löschen
auf Klicks und Tastendrücke reagieren

3.2 Warum ist das DOM so wichtig?

Ohne DOM könnte JavaScript zwar rechnen, aber nicht mit der Webseite arbeiten.
Das DOM ist die Verbindung zwischen JavaScript und dem sichtbaren Inhalt im Browser.

4. Wie HTML, CSS und JavaScript zusammenarbeiten

4.1 HTML: Struktur und Inhalt

HTML legt fest, was auf der Seite vorhanden ist.

Beispiel:

<h1>Dungeon Treasure Game</h1>  
<div id="info">  
	<div>Health: <span id="health">3</span></div>  
	<div>Score: <span id="score">0</span></div>  
</div>  
<div id="game"></div>  
<button id="restartBtn">Restart</button>

Hier gibt es:

eine Überschrift
einen Informationsbereich
einen Spielbereich
einen Button

4.2 CSS: Aussehen

CSS bestimmt, wie diese Elemente aussehen.

Beispiel:

.wall {
  background: #444;
}
 
.player {
  background: #4da6ff;
  color: white;
}
 
.treasure {
  background: gold;
}

Hier wird festgelegt, welche Farbe eine Wand, der Spieler oder ein Schatz hat.

4.3 JavaScript: Verhalten

JavaScript sorgt dafür, dass etwas passiert.

Beispiel:

document.getElementById("restartBtn")
  .addEventListener("click", restartGame);

Das bedeutet:

Finde das Element mit der ID restartBtn
Wenn darauf geklickt wird, rufe die Funktion restartGame() auf

4.4 Zusammenspiel

flowchart LR  
	A[HTML erstellt Elemente] --> B[DOM]  
	C[CSS gestaltet Elemente] --> B  
	D[JavaScript verändert DOM] --> B  
	B --> E[Sichtbare Webseite]

5. Wichtige JavaScript-Techniken zur DOM-Manipulation

5.1 Ein Element finden

Nach ID

const game = document.getElementById("game");

Das sucht das Element:

<div id="game"></div>

Nach CSS-Selektor

const message = document.querySelector("#message");

Beispiele:

document.querySelector("#game");  
document.querySelector(".player");  
document.querySelector("button");

5.2 Text in einem Element ändern

const health = 2;
document.getElementById("health").textContent = health;

Damit wird der Textinhalt geändert.

Beispiel:

<span id="health">3</span>

Wenn health = 2 ist, wird daraus sichtbar:

<span id="health">2</span>

5.3 Neue Elemente erzeugen

const cell = document.createElement("div");

Das erzeugt ein neues HTML-Element im Speicher.
Es ist aber noch nicht sichtbar, solange es nicht in die Seite eingefügt wird.

5.4 CSS-Klassen hinzufügen

cell.classList.add("cell");
cell.classList.add("wall");

Damit bekommt das Element CSS-Klassen.

Wenn im CSS steht:

.wall {  
	background: #444;  
}

dann wird das Feld als Wand dargestellt.

5.5 Text oder Emoji setzen

cell.textContent = "😀";

oder:

cell.textContent = "💎";

So kann man Feldern sichtbare Inhalte geben.

5.6 Elemente in die Seite einfügen

game.appendChild(cell);

Das fügt das neue Element als Kind von game ein.

Wenn man das in einer Schleife macht, entsteht das ganze Spielfeld.

5.7 Elemente entfernen oder Inhalt leeren

game.innerHTML = "";

Damit wird der komplette Inhalt des Spielbereichs gelöscht. Danach kann das Spielfeld neu aufgebaut werden.

Warum macht man das?

Beim Rendern des Spiels wird oft:

das alte Spielfeld entfernt
das neue Spielfeld komplett neu erzeugt

Das ist leicht verständlich und für Anfänger:innen oft einfacher als einzelne Felder gezielt zu aktualisieren.

6. Das Rendern der Webseite

6.1 Was bedeutet „rendern“?

„Rendern“ bedeutet hier:

Aus den Daten im JavaScript wird die sichtbare Webseite aufgebaut.

Wenn eine Webseite angezeigt wird gibt es oft 2 Ebenen:

Datenmodell in JavaScript (Variablen, Arrays, Objekte, …)
Darstellung im DOM

Ein einfaches Datenmodell könnte zum Beispiel so aussehen:

let score = 0;
let health = 3;
 
let player = {
  row: 0,
  col: 0
};
 
let map = [
  ["S", ".", "."],
  [".", "#", "T"],
  [".", "X", "E"]
];

Hier werden Informationen der Anwendung in JavaScript gespeichert:

score und health sind einfache Werte
player ist ein Objekt mit Eigenschaften
map ist ein Array aus Arrays und beschreibt ein Raster

Das ist wichtig, weil JavaScript nicht direkt „im HTML denkt“, sondern mit Daten arbeitet.
Die Daten beschreiben also den Zustand der Anwendung.

6.2 Datenmodell und Darstellung

Ein wichtiger Grundgedanke in der Webentwicklung ist:

Die Daten beschreiben was der Zustand ist, das DOM beschreibt wie dieser Zustand sichtbar wird.

Beispiel:

map[1][1] = "#";

Das bedeutet im Datenmodell:
An dieser Stelle befindet sich eine Wand. Wir legen einfach für uns fest, dass ein "#" für eine Wand steht.

Beim Rendern wird daraus dann ein sichtbares Element im DOM, zum Beispiel mit einer CSS-Klasse:

cell.classList.add("wall");

Man trennt also:

Datenmodell: Informationen und Logik
Darstellung: sichtbare HTML-Elemente im Browser

Das macht Programme übersichtlicher und leichter erweiterbar.

6.3 Vom Datenmodell zur sichtbaren Seite

Der typische Ablauf ist:

JavaScript speichert den aktuellen Zustand in Variablen, Arrays und Objekten
Eine Funktion liest diese Daten
Sie erzeugt oder verändert DOM-Elemente
Der Browser zeigt die neue Darstellung an

flowchart TD  
	A[Datenmodell in JavaScript] --> B[Render-Funktion]  
	B --> C[DOM wird erzeugt oder verändert]  
	C --> D[Browser rendert die Seite]

Ein einfaches Beispiel:

function updateInfo() {
  document.getElementById("health").textContent = health;
  document.getElementById("score").textContent = score;
}

Die Funktion liest Werte aus dem Datenmodell und schreibt sie in die passenden DOM-Elemente.

6.4 Beispiel: Eine Darstellung aus einem Array erzeugen

Ein besonders häufiges Muster ist, dass JavaScript über ein Array läuft und daraus HTML-Elemente erzeugt.

function renderMap() {
  const game = document.getElementById("game");
  game.innerHTML = "";
 
  for (let row = 0; row < map.length; row++) {
    for (let col = 0; col < map[row].length; col++) {
      const cell = document.createElement("div");
      cell.classList.add("cell");
 
      const tile = map[row][col];
 
      if (tile === "#") {
        cell.classList.add("wall");
      } else if (tile === "T") {
        cell.classList.add("treasure");
        cell.textContent = "💎";
      } else {
        cell.classList.add("floor");
      }
 
      game.appendChild(cell);
    }
  }
}

</>

Hier passiert Folgendes:

das Element #game wird gefunden
der alte Inhalt wird gelöscht
für jedes Feld der Karte wird ein neues div erzeugt
je nach Inhalt bekommt das Feld eine andere Klasse
das neue Element wird in die Seite eingefügt

So wird aus einem Datenmodell eine sichtbare Struktur.

6.5 Warum rendert man oft neu?

In einfachen Webanwendungen ist es oft am leichtesten, nach einer Änderung die Darstellung neu aufzubauen.

Ein typischer Ablauf ist dann:

Daten ändern
DOM aktualisieren
Browser zeigt die neue Ansicht

Beispiel:

score += 10;
map[2][1] = ".";
updateInfo();
renderMap();

Zuerst werden Daten verändert:

der Punktestand wird erhöht
ein Feld in der Karte wird geändert

Danach werden die sichtbaren Teile der Seite neu aufgebaut.

flowchart LR  
	A[Daten ändern] --> B[DOM aktualisieren]  
	B --> C[Neu rendern]

Das ist oft leichter verständlich als viele kleine Einzeländerungen an verschiedenen Stellen.

7. Ereignisse

Webseiten reagieren auf Aktionen von Benutzer:innen. Solche Aktionen nennt man Ereignisse oder Events.

Beispiele für Ereignisse sind:

ein Klick auf einen Button
ein Tastendruck
eine Mausbewegung

JavaScript kann auf solche Ereignisse reagieren.

Beispiel mit einem Klick:

document.getElementById("restartBtn")
  .addEventListener("click", restartGame);

Das bedeutet:

Finde den Button mit der ID restartBtn
Warte auf ein Klick-Ereignis
Rufe dann die Funktion restartGame() auf

Beispiel mit der Tastatur:

document.addEventListener("keydown", function (event) {
  if (event.key === "ArrowUp") {
    console.log("Nach oben");
  }
});

Hier reagiert JavaScript auf einen Tastendruck und prüft, welche Taste gedrückt wurde.

sequenceDiagram  
	participant User  
	participant Browser  
	participant JS  
	participant DOM  
	  
	User->>Browser: Klick oder Tastendruck  
	Browser->>JS: Ereignis auslösen  
	JS->>JS: Daten ändern  
	JS->>DOM: DOM aktualisieren  
	DOM->>User: Neue Darstellung anzeigen

8. Zusammenfassung

Der Browser liest HTML und baut daraus das DOM auf.
CSS bestimmt, wie die Elemente aussehen.
JavaScript kann auf das DOM zugreifen und es verändern.
In JavaScript werden Daten oft in Variablen, Objekten und Arrays gespeichert.
Dieses Datenmodell beschreibt den Zustand der Anwendung.
Eine Render-Funktion liest die Daten und erzeugt daraus die sichtbare Darstellung im DOM.
Nach Änderungen an den Daten wird die Seite oft neu gerendert.
Über Ereignisse wie Klicks oder Tastendrücke kann JavaScript auf Benutzeraktionen reagieren.

Damit hat man die wichtigsten Grundlagen, um interaktive Webseiten mit JavaScript zu bauen.

Deep Thought

Explorer

Webentwicklung mit JavaScript

Webentwicklung mit JavaScript für Einsteiger:innen

1. Was ist Webentwicklung?

2. Wie arbeitet der Browser?

Wichtig

3. Das DOM

3.1 Was bedeutet DOM?

3.2 Warum ist das DOM so wichtig?

4. Wie HTML, CSS und JavaScript zusammenarbeiten

4.1 HTML: Struktur und Inhalt

4.2 CSS: Aussehen

4.3 JavaScript: Verhalten

4.4 Zusammenspiel

5. Wichtige JavaScript-Techniken zur DOM-Manipulation

5.1 Ein Element finden

Nach ID

Nach CSS-Selektor

5.2 Text in einem Element ändern

5.3 Neue Elemente erzeugen

5.4 CSS-Klassen hinzufügen

5.5 Text oder Emoji setzen

5.6 Elemente in die Seite einfügen

5.7 Elemente entfernen oder Inhalt leeren

Warum macht man das?

6. Das Rendern der Webseite

6.1 Was bedeutet „rendern“?

6.2 Datenmodell und Darstellung

6.3 Vom Datenmodell zur sichtbaren Seite

6.4 Beispiel: Eine Darstellung aus einem Array erzeugen

6.5 Warum rendert man oft neu?

7. Ereignisse

8. Zusammenfassung

Graph View

Table of Contents

Backlinks