Programmier-Basics

Einsteiger JavaScript

Bevor wir Webseiten bauen, müssen wir die Sprache des Webs verstehen: JavaScript. Diese Übungen machst du am besten direkt in der Browser-Konsole (Rechtsklick -> Untersuchen -> Konsole) oder in einer einfachen HTML-Datei.

1. Hallo Welt & Variablen

Jeder fängt mal klein an.

Erstelle eine Variable name mit deinem Namen.
Erstelle eine Variable alter mit deinem Alter.
Lass die Konsole einen Satz ausgeben wie: “Hallo, ich heiße Yussuf und bin 16 Jahre alt.”

Tipp: Nutze console.log() und Template Strings (die mit den Backticks `).

2. Der Türsteher (If/Else)

Programmierer treffen ständig Entscheidungen.

Schreibe eine Funktion darfIchRein(alter).
Wenn alter unter 18 ist, gib zurück: “Du bist zu jung!”
Wenn alter 18 oder älter ist, gib zurück: “Willkommen im Club!”
Bonus: Wenn das Alter genau 18 ist, gib zurück: “Gerade so geschafft!“

3. Die Zählschleife (Loops)

Computer lieben Wiederholungen. Wir nicht.

Schreibe einen Loop, der alle Zahlen von 1 bis 20 in der Konsole ausgibt.
Aber: Bei jeder geraden Zahl soll “Gerade: [Zahl]” stehen.
Bei ungeraden Zahlen nur die Zahl.

Tipp: Der Modulo-Operator % hilft dir herauszufinden, ob eine Zahl durch 2 teilbar ist.

4. FizzBuzz (Der Klassiker)

Das ist eine berühmte Einstellungstest-Aufgabe (wirklich!).

Schreibe einen Loop von 1 bis 50.

Wenn die Zahl durch 3 teilbar ist -> Ausgabe “Fizz”
Wenn die Zahl durch 5 teilbar ist -> Ausgabe “Buzz”
Wenn sie durch 3 UND 5 teilbar ist -> Ausgabe “FizzBuzz”
Sonst -> Ausgabe der Zahl.

5. Array-Magie

Daten kommen selten allein. Meistens in Listen (Arrays).

Erstelle eine Liste mit deinen 5 Lieblingsessen: const essen = ["Pizza", "Döner", "Sushi", "Pasta", "Salat"];

Lass dir das erste und das letzte Element ausgeben.
Füge ein neues Essen hinzu.
Lösche das erste Essen.
Profi: Mach einen Loop, der sagt: “Ich mag [Essen]” für jedes Element in der Liste.

6. Der Klick (Events)

Jetzt verbinden wir Code mit HTML.

Erstelle eine einfache HTML-Datei mit einem Button und einem Paragraphen (<p>).

<button id="meinButton">Klick mich!</button>
<p id="text">Hier passiert noch nichts.</p>

Wenn man auf den Button klickt, soll sich der Text ändern zu: “Ouch! Du hast mich geklickt!”
Wenn man nochmal klickt, soll er sich wieder ändern.
Bonus: Zähle mit, wie oft geklickt wurde und zeige die Zahl an.