Web Grundlagen · JavaScript Basics

← Zurück zu Web Grundlagen

JavaScript macht Webseiten interaktiv. Während HTML den Inhalt liefert und CSS das Aussehen bestimmt, reagiert JavaScript auf Benutzeraktionen und verändert die Seite zur Laufzeit.

Merke

JavaScript läuft im Browser

JavaScript wird direkt im Browser des Nutzers ausgeführt. Es kann Inhalte ändern, Eingaben prüfen oder auf Klicks reagieren – aber niemals direkt auf die Datenbank zugreifen.

1) JavaScript einbinden

JavaScript kann direkt im HTML stehen oder aus einer separaten Datei geladen werden. Für Lernbeispiele schauen wir uns beide Varianten an.

1.1 Direkt im HTML

HTML mit Script-Tag

<script>
    console.log("Hallo aus JavaScript");
</script>

So wirkt es

Im Browser passiert nichts Sichtbares

Der Text erscheint in der Entwickler-Konsole (F12 → „Konsole“). console.log() ist eines der wichtigsten Werkzeuge beim Lernen und Debuggen.

1.2 Als Datei (empfohlen)

In echten Projekten liegt JavaScript fast immer in eigenen Dateien.

JavaScript-Datei einbinden

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

Merke

Warum defer sinnvoll ist

Mit defer wartet der Browser, bis das HTML geladen ist, bevor das Script ausgeführt wird. Das verhindert viele typische Anfängerfehler.

2) Variablen & einfache Logik

Variablen speichern Werte. JavaScript ist dabei recht locker mit Datentypen – das ist praktisch, kann aber auch verwirren.

Variablen

let name = "Alex";
let alter = 30;

console.log(name);
console.log(alter);

Achtung

var vermeiden

Verwende let oder const. var ist veraltet und führt oft zu schwer nachvollziehbaren Fehlern.

3) DOM & Events (Klicks, Reaktionen)

Das DOM ist die JavaScript-Sicht auf das HTML-Dokument. Darüber kannst du Elemente auswählen und verändern.

Button-Klick

// JavaScript
const button = document.querySelector("#myButton");

button.addEventListener("click", () => {
    console.log("Button wurde geklickt");
});

Merke

JavaScript reagiert auf Events

Klicks, Tastendrücke oder Formular-Änderungen sind Events. JavaScript „hört“ darauf und führt Code aus.

Kleine Aufgaben (JavaScript)

Erst überlegen – dann Lösung einblenden.

Aufgabe 1 anzeigen

Wo erscheint der Text aus console.log()?

Lösung einblenden

Lösung

In der Browser-Konsole

Der Text wird in der Entwickler-Konsole des Browsers angezeigt, nicht direkt auf der Webseite.