In diesem Beitrag sollen die Grundprinzipien gezeigt werden, wie mit Hilfe der Sprache JavaScript einfache Web-Applikationen programmiert werden können. Hierzu ist es wichtig, die folgenden Grundtechniken, die das Rückgrat jeder interaktiven Anwendung im Browser bilden, zu kennen.

Erstes Beispiel

Im folgenden soll ein einfaches Programm in HTML, CSS und JavaScript demonstrieren, wie einfache Interaktion mit Elementen, Eventhandling und Manipulation des Inhalts umgesetzt werden kann.

Als erstes scheuen wir uns an, wie ein Eingabefeld realisiert wird. Dazu verwenden wir in HTML eine <div class="container"> Umgebung in der wir die drei Objekte "input", "button" und "output" spezifizieren. Die Vorteile einer <div class="container"> -Umgebung sind:

Layout-Steuerung: Mit container können Sie gezielt CSS anwenden – z. B. flex, gap , alignment
Logische Gruppierung: Eingabe, Button und Ausgabe bilden eine funktionale Einheit – die div macht das sichtbar und wartbar.
Skalierbarkeit: Später kann man die Gruppe leicht erweitern – z. B. mit Icons, Tooltips oder Validierung.
Responsives Design: Container ermöglichen flexible Layouts für verschiedene Bildschirmgrößen.
Didaktische Klarheit: Die Gruppierung macht nachvollziehbar, wie DOM-Strukturen aufgebaut sind und macht das Styling kontrollierbar

Im nächsten Schritt wird eine Funktion definiert, die beim Drücken des Buttons ausgeführt wird. Ihn Ihr wird der Inhalt des Eingabefeldes gelesen und in das Ausgabefelds übertragen.


	<h1>JavaScript Einführung</h1>
	
	<div class="container">
	  <input type="text" id="inputField" placeholder="Text eingeben">
	  <button onclick="copyText()">Übertragen</button>
	  <div id="output">Ausgabe erscheint hier</div>
	</div>
	
	<script>
	  function copyText() {
		const input = document.getElementById('inputField').value;
		document.getElementById('output').textContent = input;
	  }
	</script>

Weiteres Beispiel: Text-Codierung

In diesem Beispiel wird gezeigt, wie man auch komplexere Aufgaben durchführen kann. Der eingegebene Inhalt wird gelesen und die einzelnen Buchstaben nach der Cäsar-Verschlüsselungsmethode codiert und ausgegeben.


	<h2 class="abstandUeberschrift">Cäsar-Verschlüsselung</h2>
	<div>
	  <input type="text" id="inputField" placeholder="Text eingeben">
	  <button onclick="verschluesseln()">Verschlüsseln</button>
	  <div class="output-box" id="output">Ausgabe erscheint hier</div>
	</div>
	
	<script>
	  function verschluesseln() {
		const shift = 3; // Verschiebung um 3 Zeichen
		const input = document.getElementById('inputField').value;
		let output = '';
	
		for (let i = 0; i < input.length; i++) {
		  const char = input[i];
		  const code = input.charCodeAt(i);
	
		  // Großbuchstaben A-Z
		  if (code >= 65 && code <= 90) {
			output += String.fromCharCode(((code - 65 + shift) % 26) + 65);
		  }
		  // Kleinbuchstaben a-z
		  else if (code >= 97 && code <= 122) {
			output += String.fromCharCode(((code - 97 + shift) % 26) + 97);
		  }
		  // Andere Zeichen bleiben unverändert
		  else {
			output += char;
		  }
		}
		document.getElementById('output').textContent = output;
	  }
	</script>

Web App2 Codierung — Screenshot der Seite mit dem Codierungs-Beispiel

Projekt: Einheiten-Umrechner

Unser erstes Ziel ist es, eine kleine App zu entwickeln, die zwei Umrechnungen ermöglicht:

Grain ↔ Gramm
Yard ↔ Meter

Web App — Einfache Umrechnungs-App für beliebige Browser

Standardmässig ist die Umrechnung von der Einheit Grain in Gramm vorgesehen, mit dem Auswahlmenu rechts neben dem Eingabefeld kann aber auch von Gramm in Grain umgerechnet werden. Gleiches gilt für die Umrechnung von Yard in Meter.

1️⃣ Die Eingabefelder

Wir beginnen mit zwei Bereichen, in denen Nutzer eine Zahl eingeben und die Richtung der Umrechnung wählen kann:


	<input id="inputGrain" type="number" placeholder="Grain oder Gramm">
	<select id="directionGrain">
	  <option value="gr2g">Grain → Gramm</option>
	  <option value="g2gr">Gramm → Grain</option>
	</select>

2️⃣ Die Ausgabe

Das Ergebnis soll sofort erscheinen, sobald der Nutzer tippt oder die Richtung ändert. Dafür brauchen wir ein Ausgabefeld:


	<div class="output">
	  <div id="result">–</div>
	  <div id="unit">–</div>
	</div>

3️⃣ Die Umrechnungslogik

Im JavaScript definieren wir die Umrechnungsfaktoren und schreiben eine Funktion, die das Ergebnis berechnet:


	const umrechnungen = {
	  gr2g: { faktor: 1 / 15.432, einheit: "Gramm" },
	  g2gr: { faktor: 15.432, einheit: "Grain" },
	  y2m:  { faktor: 0.9144, einheit: "Meter" },
	  m2y:  { faktor: 1.09361, einheit: "Yard" }
	};
	
	function berechne(val, dir) {
	  const faktor = umrechnungen[dir].faktor;
	  const einheit = umrechnungen[dir].einheit;
	  const res = val * faktor;
	  document.getElementById("result").innerText = res.toFixed(4);
	  document.getElementById("unit").innerText = einheit;
	}

4️⃣ Interaktive Reaktion

Damit die Umrechnung automatisch erfolgt, fügen wir Event-Listener hinzu:


	document.getElementById("inputGrain").addEventListener("input", rechneGrain);
	document.getElementById("directionGrain").addEventListener("change", rechneGrain);

✅ Fazit

Mit wenigen Zeilen HTML, CSS und JavaScript entsteht ein interaktives Tool, das sofort reagiert und visuelles Feedback gibt. Die Struktur ist modular und leicht erweiterbar – ideal für eigene Projekte.

Zusammengefasst sieht der gesamte Code wie folgt aus:


	<!DOCTYPE html>
	<html lang="de">
	<head>
	  <meta charset="UTF-8">
	  <title>Einheiten-Umrechner</title>
	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	  <style>
		body {
		  font-family: sans-serif;
		  padding: 20px;
		  background: #f4f4f4;
		  max-width: 500px;
		  margin: auto;
		}
		h2 {
		  text-align: center;
		  margin-top: 30px;
		}
		.row {
		  display: flex;
		  gap: 10px;
		  margin-bottom: 10px;
		}
		input, select {
		  font-size: 1.2em;
		  padding: 10px;
		  flex: 1;
		}
		.button-group {
		  display: flex;
		  justify-content: flex-end;
		  gap: 10px;
		  margin-bottom: 20px;
		}
		.copyBtn {
		  font-size: 1em;
		  padding: 6px 10px;
		  background-color: #e0e0e0;
		  color: #333;
		  border: none;
		  border-radius: 5px;
		  cursor: pointer;
		}
		.output {
		  margin-top: 30px;
		  display: flex;
		  justify-content: center;
		  align-items: baseline;
		  gap: 10px;
		  font-size: 1.8em;
		  font-weight: bold;
		  color: #333;
		}
		#unit.gramm { color: #007aff; }
		#unit.grain  { color: #a52a2a; }
		#unit.meter  { color: #228b22; }
		#unit.yard   { color: #8b4513; }
		#copyMsg {
		  text-align: center;
		  margin-top: 10px;
		  font-size: 1em;
		  color: green;
		}
	  </style>
	</head>
	<body>
	
	  <h2>Grain ↔ Gramm</h2>
	  <div class="row">
		<input id="inputGrain" type="number" placeholder="Grain oder Gramm">
		<select id="directionGrain">
		  <option value="gr2g">Grain → Gramm</option>
		  <option value="g2gr">Gramm → Grain</option>
		</select>
	  </div>
	  <div class="button-group">
		<button class="copyBtn" onclick="kopiereGrain()">📋</button>
	  </div>
	
	  <h2>Yard ↔ Meter</h2>
	  <div class="row">
		<input id="inputYard" type="number" placeholder="Yard oder Meter">
		<select id="directionYard">
		  <option value="y2m">Yard → Meter</option>
		  <option value="m2y">Meter → Yard</option>
		</select>
	  </div>
	  <div class="button-group">
		<button class="copyBtn" onclick="kopiereYard()">📋</button>
	  </div>
	
	  <h2>Ergebnis</h2>
		<div class="output"></div>
		<div id="result">–</div>
		<div id="unit">–</div>
		<div id="copyMsg"></div>
	
	  <script>
		const umrechnungen = {
		  gr2g: { faktor: 1 / 15.432, einheit: "Gramm" },
		  g2gr: { faktor: 15.432, einheit: "Grain" },
		  y2m:  { faktor: 0.9144, einheit: "Meter" },
		  m2y:  { faktor: 1.09361, einheit: "Yard" }
		};
	
		let lastResult = "";
	
		function berechne(val, dir) {
		  const resultField = document.getElementById("result");
		  const unitField = document.getElementById("unit");
		  const copyMsg = document.getElementById("copyMsg");
	
		  copyMsg.innerText = "";
	
		  if (isNaN(val) || !umrechnungen[dir]) {
			resultField.innerText = "–";
			unitField.innerText = "Bitte Zahl";
			unitField.className = "";
			lastResult = "";
			return;
		  }
	
		  const faktor = umrechnungen[dir].faktor;
		  const einheit = umrechnungen[dir].einheit;
		  const res = val * faktor;
	
		  lastResult = res.toFixed(4);
		  resultField.innerText = lastResult;
		  unitField.innerText = einheit;
		  unitField.className = einheit.toLowerCase();
		}
	
		function rechneGrain() {
		  const val = parseFloat(document.getElementById("inputGrain").value);
		  const dir = document.getElementById("directionGrain").value;
		  berechne(val, dir);
		}
	
		function rechneYard() {
		  const val = parseFloat(document.getElementById("inputYard").value);
		  const dir = document.getElementById("directionYard").value;
		  berechne(val, dir);
		}
	
		function kopiereGrain() {
		  const val = document.getElementById("inputGrain").value;
		  if (val !== "") {
			navigator.clipboard.writeText(val).then(() => {
			  document.getElementById("copyMsg").innerText = "Grain/Gramm-Eingabe kopiert!";
			});
		  }
		}
	
		function kopiereYard() {
		  const val = document.getElementById("inputYard").value;
		  if (val !== "") {
			navigator.clipboard.writeText(val).then(() => {
			  document.getElementById("copyMsg").innerText = "Yard/Meter-Eingabe kopiert!";
			});
		  }
		}
	
		// 🔁 Live-Umrechnung beim Tippen und Auswahlwechsel
		document.getElementById("inputGrain").addEventListener("input", rechneGrain);
		document.getElementById("directionGrain").addEventListener("change", rechneGrain);
		document.getElementById("inputYard").addEventListener("input", rechneYard);
		document.getElementById("directionYard").addEventListener("change", rechneYard);
	  </script>
	
	</body>
	</html>

Fazit

Grundlagen des Document Object Model (DOM) Manipulation

Das DOM-Modell (Document Object Model) ist die zentrale Schnittstelle zwischen HTML, CSS und JavaScript – es beschreibt, wie Inhalte einer Webseite strukturiert sind und wie sie programmgesteuert verändert werden können.

Die Webseite und deren HTML-Tags sind in eier baumartiger Darstellung dstrukturiert. Jeder HTML-Tag wird darin als Knoten (Node) im Baum dargestellt, und mit Hilfe von JavaScript kann jeder Knoten gelesen (z. B. Textinhalt oder Attribute), verändert (z. B. Farben, Texte, Klassen), hinzufügt oder gelöscht werden.

Das Grundprinzip kann wie folgt zusammengefasst werden. Jedes Objekt auf der Web-Seite (= Knoten in der DOM Struktur) kann über eine id eindeutig identifiziert und angesprochen werden. In unserem Beispiel wäre das ein Absatz mit einem p-Tag und der id=notiz. Auf diesen Inhalt kann nun über document.getElementById("notiz").textContent; zugegriffen werden.


		// Lesen
		const text = document.getElementById("notiz").textContent;
		
		// Schreiben
		document.getElementById("notiz").textContent = "Neue Sichtung";
		
		// Hinzufügen
		const neu = document.createElement("p");
		neu.textContent = "Fuchs um 19:10 Uhr";
		document.body.appendChild(neu);
		
		// Löschen
		neu.remove(); // entfernt das neue Element wieder

Darüber hinaus kann der gelesene Inhalt einer Variable zugewiesen werden und wie im obigen Beispiel dann an ein neues Objekt angehängt werden. Ebenso sind weitere Aktionen möglich. Diese sind in nachfolgender Tabelle zusammengefasst.

Aktion	Methode(n)	Beschreibung
Lesen	`element.textContent` `element.innerHTML` `element.value`	Text oder HTML-Inhalt eines Elements auslesen
Schreiben	`element.textContent = "..."` `element.innerHTML = "..."` `element.setAttribute()`	Text, HTML oder Attribute eines Elements setzen
Hinzufügen	`document.createElement()` `parent.appendChild(child)` `insertBefore()`	Neue Elemente erzeugen und einfügen
Löschen	`element.remove()` `parent.removeChild(child)`	Elemente aus dem DOM entfernen

Diese Möglichkeiten der Manipulation von Objekten ist in nachfolgendem Beispiel etwas ausführlicher dargestellt:

Event Handling

Events sind Dinge, die im Browser passieren – z. B. ein Benutzer klickt auf einen Button, oder eine Taste wird gedrückt, die Maus bewegt sich, ein Feld wird verändert, ein Bild wird geladen. Solche Dinge werden als Events bezeichnet. Eventhandling bedeutet: Man sagt JavaScript, was es tun soll, wenn so ein Ereignis eintritt. In der nachfolgenden Tabelle sind die wichtigsten Events zusammengefasst.

Event	Bedeutung	Typisches Element
`click`	Wird ausgelöst, wenn ein Element angeklickt wird	Button, Link, Bild
`submit`	Wird ausgelöst, wenn ein Formular abgeschickt wird	Formular
`change`	Wird ausgelöst, wenn sich der Wert eines Eingabefelds ändert	Input, Select, Checkbox
`keydown`	Wird ausgelöst, wenn eine Taste gedrückt wird	Dokument, Eingabefeld
`keyup`	Wird ausgelöst, wenn eine Taste losgelassen wird	Dokument, Eingabefeld
`mouseover`	Wird ausgelöst, wenn die Maus über ein Element fährt	Bild, Button, Text
`mouseout`	Wird ausgelöst, wenn die Maus ein Element verlässt	Bild, Button, Text
`load`	Wird ausgelöst, wenn die Seite oder ein Element vollständig geladen ist	Fenster, Bild
`input`	Wird bei jeder Eingabe in ein Feld ausgelöst	Textfeld, Textarea
`focus`	Wird ausgelöst, wenn ein Element den Fokus erhält	Input, Textarea
`blur`	Wird ausgelöst, wenn ein Element den Fokus verliert	Input, Textarea

Eventlistener

Um auf Events zu reagieren, müssen diese erstmal erkannt werden. Dazu verwendet man sogenannte "Listener" diese sehen im Quellcode etwa so aus: document.getElementById("meinButton").addEventListener("click", meineFunktion);. Dieser Listener reagiert beispielsweise genau dann, wenn ein "Klick" auf das Element mit der id=meinButton erfolgt.

Als nächstes wird dann folgende Funktion ausgeführt: function meineFunktion() Zusammengefasst in einem einfachen Beispiel wo ein Button dargestellt wird, der sobald er gedrückt wurde eine Nachricht ausgibt:

Variablen, Bedingungen, Schleifen

Aspekt	Beispiel	Beschreibung
Variable (let)	`let tier = "Rehbock";`	Speichert einen veränderbaren Wert
Konstante (const)	`const uhrzeit = "18:30";`	Speichert einen festen Wert, der nicht überschrieben werden darf
Bedingung (if)	`if (tier === "Rehbock") { ... }`	Führt Code nur aus, wenn die Bedingung erfüllt ist
Alternative (else)	`else { ... }`	Führt Code aus, wenn die Bedingung nicht erfüllt ist
Logisches UND (&&)	`if (a > 0 && b < 10)`	Beide Bedingungen müssen erfüllt sein
Logisches ODER (\|\|)	`if (a === 5 \|\| b === 5)`	Mindestens eine Bedingung muss erfüllt sein
Logisches NICHT (!)	`if (!istLeer)`	Kehrt den Wahrheitswert um
for-Schleife	`for (let i = 0; i < 3; i++) { ... }`	Wiederholt den Codeblock eine bestimmte Anzahl von Malen
while-Schleife	`while (zähler < 3) { ... }`	Wiederholt den Codeblock, solange die Bedingung wahr ist
Array	`let sichtungen = ["Fuchs", "Dachs"];`	Speichert mehrere Werte in einer Liste
Array durchlaufen	`for (let tier of sichtungen) { ... }`	Geht jedes Element im Array durch

Fetch API (Daten laden)

Die Fetch API ist der Schlüssel zur Kommunikation mit der Außenwelt mit der eigenen Anwendung. Die Fetch API erlaubt Daten von außen zu holen – also von:

🌐 Webservern
📦 Datenbanken
📁 JSON-Dateien
🔌 REST-APIs (z. B. Wetter, Nachrichten, Tierbeobachtungen)

Beispiel

Als Beispiel soll auf die Fruitshop REST API von predic8.de zugegriffen werden. Sie stellt eine Reihe von öffentlichen, frei nutzbaren Schnittstellen bereit, die sich ideal zum Lernen, Testen und Experimentieren mit REST-Prinzipien eignen. Diese API stellt folgende Schnittstelle bereit:

Ressource	Methode	Beispiel-URL	Beschreibung
Produkte	`GET`	`https://api.predic8.de/shop/v2/products`	Liste aller Produkte
Einzelnes Produkt	`GET`	`https://api.predic8.de/shop/v2/products/13`	Details zu einem Produkt
Produktbild	`GET`	`https://api.predic8.de/shop/v2/products/13/image`	Bild eines Produkts
Hersteller	`GET`	`https://api.predic8.de/shop/v2/vendors/3`	Informationen zu einem Hersteller
Bestellung	`GET`	`https://api.predic8.de/shop/v2/orders/4`	Details zu einer Bestellung
Produkt anlegen	`POST`	`https://api.predic8.de/shop/v2/products`	Neues Produkt hinzufügen
Produkt ändern	`PUT`	`https://api.predic8.de/shop/v2/products/13`	Produkt aktualisieren
Produkt löschen	`DELETE`	`https://api.predic8.de/shop/v2/products/13`	Produkt entfernen
DLP-Feld prüfen	`GET`	`https://api.predic8.de/dlp/fields/email`	Prüft, ob ein Feld vertraulich ist
DLP-Felder prüfen	`POST`	`https://api.predic8.de/dlp/fields`	Prüft mehrere Felder gleichzeitig

Die Struktur, die man von der predic8 REST-API erhält, enthält ein klassisches Array von Objekten, eingebettet in einem übergeordneten JSON-Objekt. Das ist in JavaScript absolut üblich und ideal für die Verarbeitung mit Schleifen, forEach(), map() oder sogar Tabellen. Mit folgender Prozedur können Daten gelesen werden:

Der Ausdruck response.json() (oder res.json) ist eine Methode, die den JSON-Text asynchron in ein JavaScript-Objekt umwandelt – und das Ergebnis wird dann in der Variable data gespeichert. In der Variable data, steht also das Ergebnis von res.json() – also das komplette JSON-Objekt, das die API zurück liefert.

Der Ausdruck data.products ist ein Array mit allen Produkten. Jeder Eintrag ist ein Objekt mit Eigenschaften wie id, name, product_url usw. Mit der Anweisung forEach(produkt => { ... }) wir jeder Eintrag im Array durchlaufen. In der Variable Produkt steht nun ein kompletter Eintrag aus dem Array. In unserem Beispiel wird mit der Anweisung console.log("Produkt:", produkt.name); auf den Eintrag name zugegriffen und in der Browser-Konsole ausgegeben.

Ausgabe in eine Tabelle und eine Liste

Ein praktisches Beispiel: Wetterdaten

OpenMeto ist eine verlässliche, öffentlich zugängliche Wetterquelle ohne API-Key. Das Beispiel zeigt wie Wetterdaten in eine Webseite integriert werden können. Hier der Code anschliessend das Ergebnis zum Testen.

🌦️ Aktuelles Wetter: Straubing & Großer Arber

Klick auf den Button, um die aktuellen Wetterdaten abzurufen: