JavaScript 101 - Theorie-Skript

1. Einführung in JavaScript

JavaScript ist eine interpretierte Programmiersprache, die 1995 von Brendan Eich entwickelt wurde. Sie ist heute eine der beliebtesten Programmiersprachen weltweit und läuft in jedem Webbrowser.

Einfach erklärt: JavaScript ist wie eine Sprache, mit der du dem Computer Anweisungen gibst. Anders als viele andere Programmiersprachen kannst du JavaScript direkt im Browser ausführen - ohne zusätzliche Installation.

1.1 Das erste Programm

console.log("Hello, World!");

Die console.log()-Funktion gibt Text in der Konsole aus.

1.2 Kommentare

Kommentare dienen der Dokumentation und werden vom Interpreter ignoriert:

// Dies ist ein einzeiliger Kommentar

/*
Dies ist ein
mehrzeiliger Kommentar
*/

1.3 Wie führt JavaScript Code aus?

Einfach erklärt: JavaScript liest deinen Code wie ein Buch - von oben nach unten, Zeile für Zeile. Der Computer führt jede Anweisung nacheinander aus.

console.log("Erste Zeile");
console.log("Zweite Zeile");
console.log("Dritte Zeile");

Ausgabe:

Erste Zeile
Zweite Zeile
Dritte Zeile

Der Computer startet bei Zeile 1, führt sie aus, geht dann zu Zeile 2, führt sie aus, und so weiter bis zum Ende des Programms.

1.4 Semikolons und geschweifte Klammern

Wichtig: In JavaScript werden Anweisungen oft mit einem Semikolon ; beendet. Codeblöcke werden mit geschweiften Klammern {} gruppiert:

// Semikolons am Ende jeder Anweisung (empfohlen)
let alter = 18;
console.log(alter);

// Codeblöcke mit geschweiften Klammern
if (alter >= 18) {
    console.log("Du bist volljährig");
    console.log("Du darfst wählen");
}

Regeln für geschweifte Klammern:

• Öffnende Klammer { nach der Bedingung oder Funktionsdefinition
• Schließende Klammer } am Ende des Blocks
• Einrückung (2-4 Leerzeichen) macht den Code lesbarer, ist aber optional

1.5 Debugging - Fehler finden und beheben

Einfach erklärt: Debugging ist wie Detektivarbeit - du suchst nach Fehlern in deinem Code und behebst sie. Die Browser-Entwicklertools sind dein wichtigstes Werkzeug dabei.

Was ist ein Debugger?

Ein Debugger ist ein Werkzeug, das deinen Code Schritt für Schritt ausführt, sodass du genau sehen kannst, was passiert. In jedem Browser sind Entwicklertools mit einem Debugger eingebaut.

Browser-Entwicklertools nutzen

1. Entwicklertools öffnen:

• Drücke F12 oder Strg+Umschalt+I (Windows/Linux) bzw. Cmd+Option+I (Mac)
• Wechsle zum Tab "Console" für Ausgaben oder "Sources" für den Debugger

2. Wichtige Debug-Funktionen:

• Breakpoint setzen: Klicke auf eine Zeilennummer im Sources-Tab
• Step Over: Führt die aktuelle Zeile aus und geht zur nächsten
• Step Into: Geht in eine Funktion hinein
• Step Out: Verlässt die aktuelle Funktion
• Resume: Führt das Programm bis zum nächsten Breakpoint aus

3. console.log() zum Debuggen:

let x = 5;
console.log("x hat den Wert:", x);  // Schnelles Debugging

Debugging-Strategie: Variablen-Tabelle

Wenn du keinen Debugger hast, kannst du auf Papier eine Tabelle erstellen:

Beispiel-Code:

let x = 5;
let y = 10;
x = x + y;
y = x - y;

Variablen-Tabelle:

Zeile	Code	x	y	Notiz
1	let x = 5	5	-	x wird erstellt
2	let y = 10	5	10	y wird erstellt
3	x = x + y	15	10	x = 5 + 10
4	y = x - y	15	5	y = 15 - 10

Diese Methode hilft dir:

• Den Programmfluss zu verstehen
• Fehler in deiner Logik zu finden
• Zu verstehen, wie sich Variablen ändern

Tipp: Wenn dein Code nicht funktioniert, gehe ihn Zeile für Zeile durch und schreibe die Variablenwerte auf. Oft findest du so den Fehler!

2. Variablen und Datentypen

Einfach erklärt: Variablen sind wie beschriftete Schubladen, in denen du Werte aufbewahren kannst. Datentypen beschreiben, welche Art von Wert in der Schublade liegt - eine Zahl, ein Text, oder etwas anderes.

2.1 Variablen

Variablen sind Container für Daten. In JavaScript gibt es drei Arten, Variablen zu deklarieren:

let name = "Anna";        // Kann geändert werden
const PI = 3.14159;       // Kann NICHT geändert werden (Konstante)
var alter = 16;           // Ältere Schreibweise (verwende let)

Wann benutze ich was?

• let für Werte, die sich ändern können
• const für Werte, die gleich bleiben
• var vermeiden (ältere Syntax mit Besonderheiten)

Namensregeln für Variablen:

• Müssen mit Buchstaben, _ oder $ beginnen
• Können Buchstaben, Zahlen, _ und $ enthalten
• Sind case-sensitive (name ≠ Name)
• Sollten aussagekräftig sein
• Konvention: camelCase (meinName, ersteZahl)

2.2 Grundlegende Datentypen

Number (Zahlen)

let x = 42;           // Ganzzahl
let y = -17;          // Negative Zahl
let pi = 3.14159;     // Dezimalzahl
let temperatur = -5.5;

String (Zeichenketten)

let vorname = "Max";
let nachname = 'Mustermann';
let satz = `Dies ist ein
mehrzeiliger String`;   // Template Literal mit Backticks

Boolean (Wahrheitswerte)

let istWahr = true;
let istFalsch = false;

undefined und null

let nichtDefiniert;              // undefined (kein Wert zugewiesen)
let absichtlichLeer = null;      // null (bewusst leer)

2.3 Typ-Konvertierung

let x = "42";
let y = Number(x);        // String zu Number: 42
let z = parseInt(x);      // String zu Integer: 42
let a = parseFloat("3.14"); // String zu Float: 3.14
let b = String(100);      // Number zu String: "100"
let c = (100).toString(); // Alternative

3. Operatoren

Einfach erklärt: Operatoren sind wie mathematische Symbole. Mit ihnen kannst du rechnen (+, -, *, /), Werte vergleichen (===, <, >) oder logische Entscheidungen treffen (&&, ||, !).

3.1 Arithmetische Operatoren

let a = 10;
let b = 3;

let addition = a + b;        // 13
let subtraktion = a - b;     // 7
let multiplikation = a * b;  // 30
let division = a / b;        // 3.333...
let ganzzahlDivision = Math.floor(a / b);  // 3
let modulo = a % b;          // 1 (Rest)
let potenz = a ** b;         // 1000 (oder Math.pow(a, b))

3.2 Vergleichsoperatoren

let x = 5;
let y = 10;
let z = "5";

x === y    // false (strikt gleich - Wert UND Typ)
x !== y    // true (strikt ungleich)
x == z     // true (lose gleich - nur Wert, VERMEIDEN!)
x === z    // false (5 ist Number, "5" ist String)
x < y      // true (kleiner)
x > y      // false (größer)
x <= y     // true (kleiner oder gleich)
x >= y     // false (größer oder gleich)

Wichtig: Verwende immer === und !== statt == und !=!

3.3 Logische Operatoren

let a = true;
let b = false;

a && b    // false (UND)
a || b    // true (ODER)
!a        // false (NICHT)

4. Kontrollstrukturen

Einfach erklärt: Kontrollstrukturen erlauben es deinem Programm, Entscheidungen zu treffen. "Wenn dies, dann das" - genau wie du im Alltag Entscheidungen triffst. Mit if kannst du Code nur ausführen, wenn eine Bedingung erfüllt ist.

4.1 if-Anweisungen

let alter = 16;

if (alter >= 18) {
    console.log("Du bist volljährig");
} else if (alter >= 16) {
    console.log("Du darfst Mofa fahren");
} else {
    console.log("Du bist noch zu jung");
}

Wichtig: Bedingungen stehen in runden Klammern (), Codeblöcke in geschweiften Klammern {}!

4.2 Ternärer Operator (Kurzform)

let alter = 20;
let status = alter >= 18 ? "volljährig" : "minderjährig";
console.log(status);  // "volljährig"

5. Schleifen

Einfach erklärt: Schleifen wiederholen Code automatisch mehrmals. Statt denselben Code 100 Mal zu schreiben, sagst du dem Computer einfach: "Mach das 100 Mal". Das spart Zeit und macht deinen Code übersichtlicher.

5.1 for-Schleife

Die for-Schleife ist die häufigste Schleifenart:

// Über einen Zahlenbereich iterieren
for (let i = 0; i < 5; i++) {  // 0, 1, 2, 3, 4
    console.log(i);
}

// Mit anderem Start, Ende und Schritt
for (let i = 2; i < 10; i += 2) {  // 2, 4, 6, 8
    console.log(i);
}

Aufbau: for (Start; Bedingung; Schritt)

5.2 for...of-Schleife (für Arrays)

let fruechte = ["Apfel", "Banane", "Kirsche"];

for (let frucht of fruechte) {
    console.log(frucht);
}

5.3 while-Schleife

Die while-Schleife läuft, solange eine Bedingung wahr ist:

let zaehler = 0;
while (zaehler < 5) {
    console.log(zaehler);
    zaehler++;
}

5.4 break und continue

// break beendet die Schleife
for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break;
    }
    console.log(i);  // 0, 1, 2, 3, 4
}

// continue überspringt die aktuelle Iteration
for (let i = 0; i < 5; i++) {
    if (i === 2) {
        continue;
    }
    console.log(i);  // 0, 1, 3, 4
}

6. Funktionen

Einfach erklärt: Funktionen sind wie Rezepte. Du schreibst einmal auf, wie etwas gemacht wird, und kannst es dann immer wieder verwenden. Funktionen helfen dir, deinen Code zu organisieren und Wiederholungen zu vermeiden.

Funktionen sind wiederverwendbare Codeblöcke.

6.1 Funktionen definieren

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

begruessung();  // Aufruf der Funktion

6.2 Parameter und Argumente

function begruessung(name) {
    console.log(`Hallo, ${name}!`);
}

begruessung("Anna");  // Ausgabe: Hallo, Anna!

6.3 Rückgabewerte

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

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

6.4 Default-Parameter

function potenz(basis, exponent = 2) {
    return basis ** exponent;
}

console.log(potenz(5));      // 25 (5^2)
console.log(potenz(5, 3));   // 125 (5^3)

6.5 Mehrere Rückgabewerte (mit Array oder Objekt)

function berechne(a, b) {
    let summe = a + b;
    let produkt = a * b;
    return [summe, produkt];  // Array zurückgeben
}

let [s, p] = berechne(4, 5);  // s=9, p=20 (Destructuring)

6.6 Arrow Functions (Kurzschreibweise)

// Normale Funktion
function verdopple(x) {
    return x * 2;
}

// Als Arrow Function
const verdopple = (x) => x * 2;

// Mit mehreren Zeilen
const addiere = (a, b) => {
    let summe = a + b;
    return summe;
};

7. Arrays (Listen)

Einfach erklärt: Arrays sind wie Einkaufslisten - du kannst mehrere Dinge in einer bestimmten Reihenfolge aufschreiben. Arrays können wachsen oder schrumpfen, und du kannst jederzeit Elemente hinzufügen, entfernen oder ändern.

Arrays sind geordnete, veränderbare Sammlungen von Elementen.

7.1 Arrays erstellen

let zahlen = [1, 2, 3, 4, 5];
let gemischt = [1, "zwei", 3.0, true];
let leer = [];

7.2 Auf Elemente zugreifen

let fruechte = ["Apfel", "Banane", "Kirsche"];

console.log(fruechte[0]);   // "Apfel" (erstes Element)
console.log(fruechte[2]);   // "Kirsche" (drittes Element)
console.log(fruechte[fruechte.length - 1]);  // Letztes Element

7.3 Array-Slicing

let zahlen = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(zahlen.slice(2, 5));    // [2, 3, 4]
console.log(zahlen.slice(0, 3));    // [0, 1, 2]
console.log(zahlen.slice(7));       // [7, 8, 9]
console.log(zahlen.slice(-3));      // [7, 8, 9] (letzte 3)

7.4 Arrays modifizieren

let fruechte = ["Apfel", "Banane"];

// Element am Ende hinzufügen
fruechte.push("Kirsche");  // ["Apfel", "Banane", "Kirsche"]

// Element an Position einfügen
fruechte.splice(1, 0, "Mango");  // ["Apfel", "Mango", "Banane", "Kirsche"]

// Element entfernen (nach Wert)
let index = fruechte.indexOf("Banane");
if (index > -1) {
    fruechte.splice(index, 1);
}

// Letztes Element entfernen und zurückgeben
let letztes = fruechte.pop();

// Element an Index ändern
fruechte[0] = "Birne";

7.5 Nützliche Array-Methoden

let zahlen = [3, 1, 4, 1, 5, 9, 2, 6];

zahlen.length          // 8 (Länge)
Math.max(...zahlen)    // 9 (Maximum)
Math.min(...zahlen)    // 1 (Minimum)
zahlen.reduce((a, b) => a + b, 0)  // 31 (Summe)
zahlen.filter(x => x === 1).length  // 2 (Häufigkeit von 1)
zahlen.sort((a, b) => a - b)        // Sortiert das Array
zahlen.reverse()                     // Kehrt die Reihenfolge um
zahlen.includes(5)                   // true (enthält 5?)

7.6 Array-Methoden für Transformationen

let zahlen = [1, 2, 3, 4, 5];

// map: Jedes Element transformieren
let quadrate = zahlen.map(x => x * x);
// [1, 4, 9, 16, 25]

// filter: Elemente filtern
let gerade = zahlen.filter(x => x % 2 === 0);
// [2, 4]

// find: Erstes passendes Element finden
let erstesGerade = zahlen.find(x => x % 2 === 0);
// 2

8. Objekte (Dictionaries)

Einfach erklärt: Objekte sind wie echte Wörterbücher - zu jedem Stichwort (Schlüssel) gehört eine Erklärung (Wert). Du kannst zum Beispiel Namen mit Telefonnummern verknüpfen oder Wörter mit ihren Übersetzungen.

Objekte speichern Schlüssel-Wert-Paare.

8.1 Objekte erstellen

let person = {
    name: "Anna",
    alter: 16,
    stadt: "Berlin"
};

8.2 Auf Werte zugreifen

console.log(person.name);        // "Anna" (Punkt-Notation)
console.log(person["alter"]);    // 16 (Klammer-Notation)

// Mit Default-Wert
let email = person.email || "Nicht vorhanden";

8.3 Objekte modifizieren

// Wert ändern
person.alter = 17;

// Neues Paar hinzufügen
person.email = "anna@example.com";

// Paar entfernen
delete person.stadt;

// Alle Schlüssel, Werte oder Paare abrufen
Object.keys(person)    // ["name", "alter", "email"]
Object.values(person)  // ["Anna", 17, "anna@example.com"]
Object.entries(person) // [["name", "Anna"], ["alter", 17], ...]

8.4 Über Objekte iterieren

let person = { name: "Anna", alter: 16, stadt: "Berlin" };

// Über Schlüssel iterieren
for (let key in person) {
    console.log(key, person[key]);
}

// Mit Object.entries
for (let [key, value] of Object.entries(person)) {
    console.log(`${key}: ${value}`);
}

9. Strings

Einfach erklärt: Strings sind Texte in deinem Programm. JavaScript bietet viele nützliche Funktionen, um mit Texten zu arbeiten - wie umwandeln in Großbuchstaben, Teile ersetzen, oder nach bestimmten Wörtern suchen.

9.1 String-Operationen

let text = "JavaScript";

// Länge
text.length  // 10

// Konkatenation
let gruss = "Hallo " + "Welt";  // "Hallo Welt"

// Wiederholung
console.log("Ha".repeat(3));  // "HaHaHa"

// Zugriff auf Zeichen
text[0]   // "J"
text[text.length - 1]  // "t"

9.2 String-Methoden

let text = "  Hallo Welt  ";

text.toUpperCase()       // "  HALLO WELT  "
text.toLowerCase()       // "  hallo welt  "
text.trim()              // "Hallo Welt"
text.replace("Hallo", "Hi")  // "  Hi Welt  "
text.split(" ")          // ["", "", "Hallo", "Welt", "", ""]
text.trim().split(" ")   // ["Hallo", "Welt"]

// Prüfungen
"Hallo".startsWith("Ha")  // true
"Welt".endsWith("lt")     // true
"123".match(/^\d+$/)      // ["123"] (nur Ziffern)

9.3 Template Literals (String-Formatierung)

let name = "Anna";
let alter = 16;

// Template Literals (empfohlen)
let text = `Ich bin ${name} und ${alter} Jahre alt.`;

// Mehrzeilige Strings
let gedicht = `Erste Zeile
Zweite Zeile
Dritte Zeile`;

// Berechnungen in Template Literals
console.log(`Nächstes Jahr bist du ${alter + 1}`);

10. Input und Output

Einfach erklärt: Input bedeutet "Eingabe" - dein Programm fragt den Benutzer nach Informationen. Output bedeutet "Ausgabe" - dein Programm zeigt Ergebnisse an. So kann dein Programm mit Menschen interagieren.

10.1 Ausgabe

console.log("Normale Ausgabe");
console.warn("Warnung");
console.error("Fehler");
console.table([1, 2, 3]);  // Als Tabelle

10.2 Benutzereingabe (im Browser)

// Einfache Eingabe
let name = prompt("Wie heißt du?");
console.log(`Hallo, ${name}!`);

// Zahlen einlesen (prompt() liefert immer String!)
let alter = Number(prompt("Wie alt bist du?"));

// Ja/Nein-Frage
let zustimmung = confirm("Bist du einverstanden?");

11. Fehlerbehandlung

Einfach erklärt: Fehlerbehandlung ist wie ein Sicherheitsnetz. Wenn etwas schiefgeht (z.B. der Benutzer gibt Text statt einer Zahl ein), stürzt dein Programm nicht ab, sondern kann freundlich darauf reagieren und weiterlaufen.

11.1 try-catch

try {
    let eingabe = prompt("Gib eine Zahl ein:");
    let zahl = Number(eingabe);
    
    if (isNaN(zahl)) {
        throw new Error("Das war keine gültige Zahl!");
    }
    
    let ergebnis = 100 / zahl;
    
    if (!isFinite(ergebnis)) {
        throw new Error("Division durch Null!");
    }
    
    console.log(`Ergebnis: ${ergebnis}`);
} catch (error) {
    console.error(`Ein Fehler ist aufgetreten: ${error.message}`);
} finally {
    console.log("Dieser Block wird immer ausgeführt");
}

12. Best Practices

12.1 Code-Stil

// Variablen: camelCase
let meineVariable = 42;

// Funktionen: camelCase
function berechneSumme(a, b) {
    return a + b;
}

// Konstanten: UPPER_CASE
const PI = 3.14159;
const MAX_VERSUCHE = 3;

// Klassen: PascalCase (für fortgeschrittene Themen)
class MeineKlasse {
    // ...
}

12.2 Lesbarkeit

// Schlecht
function f(x,y,z){return x*y+z}

// Gut
function berechneVolumen(laenge, breite, hoehe) {
    let flaeche = laenge * breite;
    let volumen = flaeche * hoehe;
    return volumen;
}

12.3 Dokumentation

/**
 * Berechnet die Fakultät einer Zahl.
 * @param {number} n - Eine nicht-negative Ganzzahl
 * @returns {number} Die Fakultät von n (n!)
 */
function fakultaet(n) {
    if (n === 0) {
        return 1;
    }
    return n * fakultaet(n - 1);
}

Zusammenfassung

Du hast nun die Grundlagen von JavaScript kennengelernt:

• ✅ Variablen und Datentypen (let, const, Number, String, Boolean)
• ✅ Operatoren und Ausdrücke
• ✅ Kontrollstrukturen (if/else)
• ✅ Schleifen (for, while, for...of)
• ✅ Funktionen (function, Arrow Functions)
• ✅ Arrays und Objekte
• ✅ String-Verarbeitung
• ✅ Input/Output
• ✅ Fehlerbehandlung

Jetzt ist es Zeit, dein Wissen in den Übungen zu vertiefen!