JavaScript für Einsteiger – Grundlagen der Webtechnologie

Kapitel 1: Einführung

Willkommen beim Kurs JavaScript für Einsteiger!

In diesem Kurs lernst du die Grundlagen von JavaScript. JavaScript ist eine Programmiersprache, die ursprünglich für Webseiten entwickelt wurde. Heute wird sie aber auch für Server, Apps und sogar Roboter verwendet!

Was du brauchst

Einen Webbrowser (z. B. Chrome, Firefox oder Edge)
Einen einfachen Texteditor (z. B. Notepad oder VS Code)
Neugier und etwas Geduld 😊

Warum JavaScript?

JavaScript ist ideal für Einsteiger:

Du brauchst keine speziellen Programme installieren.
Du kannst direkt im Browser programmieren.
JavaScript ist eine der meistgenutzten Sprachen der Welt.

Erstes Beispiel

Schreibe folgenden Code in eine Datei namens beispiel.html:

<!DOCTYPE html>
<html>
<head>
    <title>Mein erstes JavaScript</title>
</head>
<body>

<h1>Hallo JavaScript!</h1>

<script>
    console.log(\"Willkommen im Kurs!\");
</script>

</body>
</html>

Speichere die Datei und öffne sie im Browser. Dann öffne die Entwicklertools (F12) und gehe zum „Konsole“-Tab. Dort solltest du den Text „Willkommen im Kurs!“ sehen.

Übung

Ändere den Text in der Konsole zu deinem eigenen Namen. Beispiel:

console.log(\"Hallo Anna!\");

Wenn du das geschafft hast: Glückwunsch! Du hast dein erstes JavaScript-Programm geschrieben.

Kapitel 2: Variablen und Datentypen

In JavaScript speicherst du Werte in Variablen. Eine Variable ist wie eine Schublade mit einem Namen. Du kannst dort Daten ablegen und später wieder verwenden.

Variablen erstellen

Du kannst eine Variable mit let oder const erstellen:

let name = "Anna";
const alter = 25;

let: Der Inhalt kann später geändert werden.
const: Der Inhalt bleibt immer gleich.

Datentypen

Die wichtigsten Datentypen in JavaScript:

Text (String): "Hallo"
Zahl (Number): 42
Wahrheitswert (Boolean): true oder false

Beispiel

let vorname = "Max";
let geburtsjahr = 2000;
let istVolljaehrig = true;

console.log(vorname);
console.log(geburtsjahr);
console.log(istVolljaehrig);

Wenn du das im Browser ausprobierst, siehst du:

Max
2000
true

Übung

Erstelle eine neue Variable stadt mit deinem Wohnort und gib sie in der Konsole aus.

Zusatz

Du kannst mit typeof den Typ einer Variable prüfen:

let zahl = 42;
console.log(typeof zahl); // Ausgabe: number

Extra: Probier mal

Speichere den Namen, das Alter und den Wohnort von mindestens drei Personen in Variablen und gib sie in der Konsole aus.

Lösung ansehen

Kapitel 3: Operatoren und Ausdrücke

Mit Operatoren kannst du Variablen und Werte verarbeiten. Ein Ausdruck ist dabei eine Kombination aus Variablen, Werten und Operatoren, die einen neuen Wert ergibt.

Arithmetische Operatoren

+ (Addition)
- (Subtraktion)
* (Multiplikation)
/ (Division)
% (Modulo = Rest bei Division)

let a = 10;
let b = 3;

console.log(a + b); // 13
console.log(a % b); // 1

Vergleichsoperatoren

== (gleich, ohne Typprüfung)
=== (gleich, mit Typprüfung)
!= (ungleich)
>, <, >=, <= (größer/kleiner)

let x = 5;
let y = "5";

console.log(x == y);  // true (Wert gleich, Typ egal)
console.log(x === y); // false (Typ unterschiedlich)

Logische Operatoren

&& (und)
|| (oder)
! (nicht)

let istErwachsen = true;
let hatAusweis = false;

console.log(istErwachsen && hatAusweis); // false

Übung

Erstelle zwei Zahlenvariablen und berechne:

Die Summe
Die Differenz
Ob die erste Zahl größer ist als die zweite

Extra: Probier mal

Berechne zu zwei Zahlen die Summe, die Differenz und prüfe, ob die erste Zahl größer ist als die zweite.

Lösung ansehen

Kapitel 4: Bedingungen (if/else, switch)

Mit Bedingungen kannst du festlegen, dass ein bestimmter Code nur ausgeführt wird, wenn eine bestimmte Voraussetzung erfüllt ist.

if / else

let alter = 18;

if (alter >= 18) {
    console.log(\"Du bist volljährig.\");
} else {
    console.log(\"Du bist noch nicht volljährig.\");
}

Erklärung:

Wenn alter größer oder gleich 18 ist → Ausgabe: Du bist volljährig.
Sonst → Ausgabe: Du bist noch nicht volljährig.

else if

let punktzahl = 75;

if (punktzahl >= 90) {
    console.log(\"Sehr gut\");
} else if (punktzahl >= 75) {
    console.log(\"Gut\");
} else {
    console.log(\"Verbesserung nötig\");
}

switch

let farbe = \"rot\";

switch (farbe) {
    case \"rot\":
        console.log(\"Stop!\");
        break;
    case \"grün\":
        console.log(\"Go!\");
        break;
    default:
        console.log(\"Unbekannte Farbe.\");
}

Übung

Erstelle eine Variable temperatur und gib aus:

Wenn temperatur über 30 ist: „Es ist heiß.“
Wenn temperatur zwischen 15 und 30 liegt: „Angenehm.“
Sonst: „Kalt.“

Extra: Probier mal

Schreibe ein Programm, das je nach Ampelfarbe ausgibt, ob du gehen darfst oder warten musst.

Lösung ansehen

Kapitel 5: Schleifen

Mit Schleifen kannst du einen Codeblock mehrfach ausführen. Das spart dir viel Schreibarbeit!

for-Schleife

for (let i = 1; i <= 5; i++) {
    console.log(\"Durchlauf Nummer: \" + i);
}

Erklärung:

let i = 1: Startwert.
i <= 5: Bedingung – solange wahr, läuft die Schleife.
i++: Nach jedem Durchlauf wird i um 1 erhöht.

while-Schleife

let zahl = 1;

while (zahl <= 5) {
    console.log(\"Zahl: \" + zahl);
    zahl++;
}

Unterschied

Die for-Schleife ist ideal, wenn du weißt, wie oft etwas wiederholt werden soll.
Die while-Schleife ist besser, wenn du nur eine Bedingung hast.

Übung

Schreibe eine for-Schleife, die die Zahlen von 10 bis 1 rückwärts ausgibt.

Extra: Probier mal

Gib mit einer for-Schleife alle geraden Zahlen von 0 bis 20 aus.

Lösung ansehen

Kapitel 6: Funktionen

Funktionen sind benannte Codeblöcke, die du immer wieder aufrufen kannst. Sie helfen dir, deinen Code übersichtlich zu halten.

Funktion erstellen

function begruessen() {
    console.log(\"Hallo!\");
}

Mit begruessen(); rufst du die Funktion auf. Ausgabe: Hallo!

Funktion mit Parameter

function begruessenMitName(name) {
    console.log(\"Hallo, \" + name + \"!\");
}

begruessenMitName(\"Anna\"); // Ausgabe: Hallo, Anna!

Funktion mit Rückgabewert

function addiere(a, b) {
    return a + b;
}

let ergebnis = addiere(5, 3);
console.log(ergebnis); // 8

return gibt einen Wert an die Stelle zurück, an der die Funktion aufgerufen wurde.

Übung

Erstelle eine Funktion quadrat, die eine Zahl entgegennimmt und das Quadrat dieser Zahl zurückgibt. Beispiel: quadrat(4) soll 16 liefern.

Extra: Probier mal

Erstelle eine Funktion, die die Fläche eines Rechtecks berechnet (Parameter: Länge und Breite).

Lösung ansehen

Kapitel 7: Arrays und Objekte

Manchmal brauchst du Variablen, die mehrere Werte speichern können. Dafür gibt es Arrays und Objekte.

Arrays

Ein Array ist eine Liste von Werten:

let farben = [\"rot\", \"grün\", \"blau\"];

console.log(farben[0]); // Ausgabe: rot

Hinweis: Die Zählung beginnt bei 0.

Objekte

Ein Objekt kann verschiedene Werte mit Namen speichern:

let person = {
    vorname: \"Anna\",
    nachname: \"Müller\",
    alter: 30
};

console.log(person.vorname); // Ausgabe: Anna

Array-Methoden (kleiner Vorgeschmack)

push(): Wert am Ende hinzufügen
pop(): Letzten Wert entfernen
length: Länge des Arrays

farben.push(\"gelb\");
console.log(farben.length); // 4

Übung

Erstelle ein Array tiere mit mindestens drei Tiernamen.
Gib das zweite Tier aus.
Füge ein weiteres Tier hinzu.

Extra: Probier mal

Erstelle ein Array mit deinen fünf Lieblingsgerichten. Gib das erste und das letzte Gericht aus.

Lösung ansehen

Kapitel 8: DOM & Interaktionen

Mit JavaScript kannst du Webseiten-Inhalte ändern und auf Benutzeraktionen reagieren. Dafür nutzt du das DOM (Document Object Model).

Elemente auswählen

Mit document.getElementById() kannst du ein Element auf der Seite auswählen:

<h1 id=\"ueberschrift\">Hallo Welt</h1>

<script>
let ueberschrift = document.getElementById(\"ueberschrift\");
ueberschrift.textContent = \"Hallo JavaScript!\";
</script>

Die Überschrift auf der Seite ändert sich zu „Hallo JavaScript!“.

Benutzeraktionen erkennen

Du kannst auf Klicks oder andere Aktionen reagieren:

<button id=\"knopf\">Klick mich!</button>

<script>
let knopf = document.getElementById(\"knopf\");
knopf.addEventListener(\"click\", function() {
    console.log(\"Knopf wurde geklickt!\");
});
</script>

Übung

Erstelle eine HTML-Seite mit einer Überschrift und einem Button. Wenn der Button geklickt wird, soll die Überschrift ihren Text ändern.

Extra: Probier mal

Erstelle einen Button, der beim Klicken die Hintergrundfarbe der Webseite ändert.

Lösung ansehen

Kapitel 9: Abschlussprojekt

Jetzt kannst du dein Wissen aus den vorherigen Kapiteln anwenden!

Projektidee: Klick-Zähler

Du erstellst eine Webseite mit einem Button. Jedes Mal, wenn der Button geklickt wird, erhöht sich ein Zähler und zeigt die aktuelle Anzahl der Klicks an.

HTML

<h1 id=\"anzeige\">Anzahl der Klicks: 0</h1>
<button id=\"knopf\">Klick mich!</button>

JavaScript

let zaehler = 0;
let anzeige = document.getElementById(\"anzeige\");
let knopf = document.getElementById(\"knopf\");

knopf.addEventListener(\"click\", function() {
    zaehler++;
    anzeige.textContent = \"Anzahl der Klicks: \" + zaehler;
});

Erweiterung (optional)

Füge einen Button hinzu, der den Zähler zurücksetzt.
Ändere die Farbe der Anzeige, wenn eine bestimmte Anzahl von Klicks erreicht wurde.

Zusammenfassung

Mit diesem Projekt hast du Folgendes geübt:

Variablen und Datentypen
Bedingungen
Funktionen
DOM-Manipulation
EventListener

Kapitel 10: Abschlusstest & Teilnahmebescheinigung

Anhang: Cheatsheet JavaScript-Grundlagen

Variablen

let name = "Anna";
const alter = 25;

Datentypen

String: "Text"
Number: 42
Boolean: true, false

Operatoren

+, -, *, /, %
==, ===, !=
>, <, >=, <=
&&, ||, !

Bedingungen

if (bedingung) { ... } 
else { ... }

Schleifen

for (let i = 0; i < 5; i++) { ... }
while (bedingung) { ... }

Funktionen

function name(parameter) { 
    return wert; 
}

Arrays

let farben = ["rot", "grün", "blau"];
farben[0]; // rot

Objekte

let person = { vorname: "Anna", alter: 30 };
person.vorname;

DOM-Auswahl

document.getElementById("id");

EventListener

element.addEventListener("click", funktion);

Weitere Kurse

Du möchtest noch mehr lernen? Hier findest du unsere weiteren Grundlagenkurse: