Lektion 1 von 27 8 Min. Einsteiger Zur Übung Mit Codebeispiel

Einstieg

JavaScript ist die Programmiersprache des Browsers: Sie macht Seiten interaktiv, lädt Daten nach und reagiert auf Nutzer.

Ansicht

Verstehen

Lies die Kernidee und das Beispiel.

Prüfen

Beantworte die Aktiv-Checks.

Anwenden

Setze die Transferaufgabe um.

Lerninhalt

Verstehen & anwenden

Was JavaScript macht

HTML liefert Struktur, CSS das Aussehen — JavaScript liefert Verhalten: Klicks, Berechnungen, Datenverarbeitung.

Der Browser führt JavaScript direkt aus. Du brauchst nur einen Editor und die Entwicklertools.

console.log

Erste Ausgabe

console.log('Hallo JavaScript!');
console.log(2 + 3);

Skripte einbinden

script lädt JavaScript in eine Seite — direkt im HTML oder als externe Datei.

defer lässt das Skript erst nach dem Parsen des HTML laufen. So findet dein Code alle Elemente.

scriptdefer

Einbindung

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

Die Konsole als Werkzeug

Die Browser-Konsole (F12) zeigt Ausgaben, Fehler und erlaubt direktes Ausprobieren.

console.log ist dein wichtigstes Werkzeug beim Lernen: Werte sichtbar machen, Annahmen prüfen.

console.logdevtools

Vertiefung

Was der Browser mit deinem Code macht

JavaScript wird vom Browser geladen, geparst und ausgeführt. Ein <script> ohne defer blockiert dabei das HTML-Parsing; defer führt das Skript erst aus, wenn das Dokument vollständig aufgebaut ist.

Die Konsole ist dein Labor: console.log zeigt Werte, console.error markiert Fehler, und du kannst jeden Ausdruck direkt ausprobieren. Nutze sie, bevor du ratst.

Skript sauber einbinden

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

// app.js
console.log("Seite geladen");
console.log(2 + 3);

Merksatz: Mit defer findet dein Skript das fertige DOM. Die Konsole ist das schnellste Feedback-Werkzeug.

Übungsaufgabe

Deine erste Konsole

Erstelle eine Datei app.js, die deinen Namen, eine kleine Rechnung und einen Begrüßungstext in der Konsole ausgibt. Binde sie mit defer in eine HTML-Seite ein.

Das soll dein Programm können

Eine HTML-Seite mit script-Tag und defer
Drei console.log-Ausgaben
Mindestens eine Rechnung
Ein Template-String für die Begrüßung

Dein Code

Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.

Dein Code wird automatisch auf diesem Gerät gespeichert.

Hinweis anzeigen

Der Pfad in src muss stimmen. Öffne die Seite über einen lokalen Server oder über die DevTools, damit die Datei geladen wird.

Lösung anzeigen

Deine erste Konsole.js

// index.html: <script src="app.js" defer></script>

// app.js
const name = "Ada";
console.log("Hallo " + name);
console.log(7 * 6);
console.log(`Willkommen, ${name}!`);

Warum funktioniert das?

defer sorgt dafür, dass das Skript nach dem HTML läuft. Template-Strings mit Backticks machen die Begrüßung lesbarer als viele +-Verkettungen.

Aufgabe geschafft

Aktiv-Check

Teste dein Verständnis

1/6

Erkennen: Welcher Abschnitt passt?

Welcher Abschnitt passt zu diesen Begriffen?

console.log

Tipp: Erst erinnern, dann prüfen. Fehler sind Teil des Lernens.

Transfer

Mini-Projekt: Der Lernzähler

Baue einen kleinen Zähler, der bei jedem Klick hochzählt und den Wert im DOM anzeigt. Erweitere ihn um einen Reset-Button.

Selbstcheck

Kann ich das schon?

Hake ab, was du wirklich erklären oder selbst bauen könntest.

0 von 3 geschafft

Fortschritt

Bereit zum Abschließen?

Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.