JS: Variablen, Datentypen und DOM-Manipulation

Erste Schritte: JS: Variablen, Datentypen und DOM-Manipulation

Wenn du interaktive Webanwendungen erstellen möchtest, kommst du um JavaScript nicht herum.
In diesem Tutorial konzentrieren wir uns auf drei wichtige Bausteine: die
Variablen (um Werte zu speichern), die
Datentypen (um diese Werte zu klassifizieren) und die
DOM-Manipulation (um Inhalte und Strukturen in deinem HTML-Dokument
dynamisch zu verändern).

1. Variablen in JavaScript

JavaScript hat drei Schlüsselwörter zur Deklaration von Variablen:
var, let und const. Die var-Schreibweise ist älter
und sorgt manchmal für unvorhersehbares Verhalten, während let und
const modernere Alternativen mit klarem Gültigkeitsbereich darstellen.

Beispiele

// Mit "let" kannst du Werte verändern:
let username = "Max";
username = "Maria";

// "const" ist unveränderlich:
const PI = 3.14159;
// PI = 4;  -> Fehler: Du darfst PI nicht neu zuweisen.

// "var" (alt, aber funktioniert):
var greeting = "Hallo Welt!";
greeting = "Guten Tag!";

– let: Für Variablen, deren Wert du zur Laufzeit verändern möchtest.
– const: Für Konstanten, deren Wert sich nicht ändert.
– var: Selten empfohlen, da der Gültigkeitsbereich (Scope) sich
an Funktionen orientiert, was leicht zu Fehlern führen kann.

2. Datentypen in JavaScript

JavaScript kennt mehrere grundlegende Datentypen. Häufig verwendete sind:

  • Number: Ganzzahlen und Kommazahlen (z. B. 42, 3.14)
  • String: Zeichenketten (z. B. „Hallo“, ‚Welt‘)
  • Boolean: Wahrheitswerte (true / false)
  • Null: Absichtlicher „Kein Wert“
  • Undefined: Variable wurde deklariert, aber noch kein Wert zugewiesen
  • Object: Komplexere Strukturen (Arrays, Objekte, Funktionen)

Beispiele

let age = 25;             // Number
let firstName = "Anna";   // String
let isStudent = true;     // Boolean
let something = null;     // Null
let unknown;              // Undefined (nicht initialisiert)

Um den Typ einer Variable zu prüfen, kannst du typeof verwenden: 

console.log(typeof age);       // "number"
console.log(typeof firstName); // "string"
console.log(typeof isStudent); // "boolean"
console.log(typeof unknown);   // "undefined"

3. DOM-Manipulation

Ein Hauptgrund, weshalb JavaScript im Browser so beliebt ist,
liegt in der DOM-Manipulation. Das DOM (Document Object Model)
ist eine programmatische Repräsentation der HTML-Struktur,
in der du Elemente finden, erstellen, ändern oder löschen kannst.

3.1 Elemente auswählen

Mit document.getElementById() oder
document.querySelector() findest du bestimmte HTML-Elemente: 

// In deinem HTML steht:
// <div id="info">Hallo</div>
// <p class="text">Beispiel-Text</p>

let infoDiv = document.getElementById("info");
let textPara = document.querySelector(".text"); 
// Selektiert das erste Element mit der Klasse "text"

querySelectorAll() liefert eine Liste mehrerer Elemente zurück.
Du kannst CSS-Selektoren verwenden, um gezielt Elemente zu finden (z. B. #header nav a).

3.2 Inhalte ändern

Um den Text innerhalb eines Elements zu aktualisieren, nutzt du meist
textContent oder innerHTML: 

infoDiv.textContent = "Neuer Info-Text"; // Setzt nur reinen Text
// infoDiv.innerHTML = "Neuer Text"; 
// -> Erlaubt auch HTML (vorsichtig bei Benutzereingaben!)

3.3 Neue Elemente erzeugen

Du kannst neue Elemente per JavaScript erzeugen und in den DOM-Baum einfügen: 

let newPara = document.createElement("p");
newPara.textContent = "Ich bin ein neu erstellter Absatz.";

// Element in ein existierendes Element, z. B. infoDiv, anhängen
infoDiv.appendChild(newPara);

Dieses <p>-Element erscheint nun in der Seite unterhalb der bestehenden Inhalte
des <div id=“info“>.

3.4 Events & EventListener

Für echte Interaktivität koppelst du DOM-Manipulationen an Benutzeraktionen.
Nutze addEventListener statt veralteter Inline-Events wie onclick: 

// HTML:
<button id="changeBtn">Ändern</button>

// JS:
let button = document.getElementById("changeBtn");
button.addEventListener("click", function() {
    infoDiv.textContent = "Ich wurde durch einen Klick verändert!";
});

Sobald der Nutzer auf den Button klickt, ändert sich der Text in infoDiv.

Zusammenführung: Kurzes Beispiel

Nehmen wir an, du hast im HTML Folgendes: 

<div id="info">Initialer Inhalt</div>
<button id="colorBtn">Farbe ändern</button>

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

In deiner app.js schreibst du: 

// Variablen
let colors = ["red", "blue", "green", "orange"];
let index = 0;

// Element referenzieren
let infoDiv = document.getElementById("info");
let colorBtn = document.getElementById("colorBtn");

// Event-Listener
colorBtn.addEventListener("click", function() {
    // DOM-Manipulation: Hintergrundfarbe wechseln
    infoDiv.style.backgroundColor = colors[index];
    // Nächste Farbe für den nächsten Klick
    index = (index + 1) % colors.length; 
});

Hier definierst du ein Array mit Farben (Array = Object),
speicherst den aktuellen Index, und änderst bei jedem Klick
die Hintergrundfarbe von infoDiv. Anschließend wird der Index
in einer Schleife weitergeschaltet.

Tipps & Best Practices

  • Saubere Variablennamen: Wähle aussagekräftige Bezeichner (z. B. userName, isLoggedIn).
  • Immer let oder const nutzen: var ist fehleranfällig.
  • DOM-Methoden kennen: appendChild(), removeChild(), replaceChild(), insertBefore() etc. stehen dir zur Verfügung.
  • Moderne Browser-APIs: Mit querySelector() und querySelectorAll() hast du sehr flexible Selektoren.
  • Performance im Blick behalten: Bei vielen DOM-Updates sind virtuelle DOM-Lösungen (z. B. React) oder Batch-Operationen oft effizienter.

Fazit

Variablen und Datentypen bilden in JavaScript die Grundlage für jede Art von Logik,
während die DOM-Manipulation es dir ermöglicht,
ohne Seiten-Reload direkt mit dem HTML-Inhalt zu interagieren.
Genau dadurch entsteht die lebendige, interaktive Ebene, die moderne Webapplikationen auszeichnet.
Ob du einfach nur Text in einem Absatz austauschst oder ein komplexes dynamisches Interface baust –
mit JavaScript kannst du deine Ideen schnell umsetzen und für ein ansprechendes Nutzererlebnis sorgen.