CBRA - Informatik Unterricht

Appearance

JavaScript - Die Programmiersprache des Webs ​

Einführung in JavaScript ​

Was ist JavaScript? ​

JavaScript (oft abgekürzt als JS) ist:

  • Eine Programmiersprache (im Gegensatz zu HTML und CSS!)
  • Die einzige Programmiersprache, die Browser nativ verstehen
  • Verantwortlich für Interaktivität und Dynamik auf Webseiten
  • Eine der beliebtesten Programmiersprachen der Welt

Wichtig: JavaScript macht Webseiten interaktiv und ermöglicht Reaktionen auf Benutzeraktionen!

JavaScript einbinden ​

1. Externes JavaScript (empfohlen):

html
<body>
    <!-- Dein HTML-Inhalt -->

    <script src="script.js"></script>
</body>

2. Internes JavaScript:

html
<body>
    <script>
        console.log("Hallo Welt!");
    </script>
</body>

3. Inline-JavaScript (nicht empfohlen):

html
<button onclick="alert('Geklickt!')">Klick mich</button>

Best Practice: JavaScript-Dateien am Ende des <body> einbinden, damit HTML zuerst geladen wird.

Die Browser-Konsole ​

Die Konsole ist dein wichtigstes Werkzeug zum Debuggen:

Konsole öffnen:

  • Chrome/Edge: F12 oder Strg + Shift + J
  • Firefox: F12 oder Strg + Shift + K
  • Safari: Cmd + Option + C

Ausgabe in der Konsole:

javascript
console.log("Hallo Welt!");
console.log(42);
console.log(true);

Variablen ​

Variablen deklarieren ​

Variablen speichern Werte, die du später verwenden kannst.

Mit let (veränderbar):

javascript
let name = "Max";
let alter = 25;
let istStudent = true;

console.log(name);  // Max
console.log(alter); // 25

Mit const (unveränderbar):

javascript
const pi = 3.14159;
const land = "Deutschland";

// pi = 3.14;  // Fehler! Kann nicht geändert werden

Mit var (alt, nicht empfohlen):

javascript
var x = 10;  // Alte Schreibweise, besser let oder const nutzen

Best Practice:

  • Nutze const standardmäßig
  • Nutze let nur, wenn sich der Wert ändern soll
  • Vermeide var

Variablennamen ​

Regeln:

  • Beginnen mit Buchstabe, $ oder _
  • Können Buchstaben, Zahlen, $ und _ enthalten
  • Sind case-sensitive (name ≠ Name)
  • Keine Leerzeichen erlaubt

Gut:

javascript
let vorname = "Anna";
let nachname = "Müller";
let alter1 = 25;
let istAktiv = true;
let _privateVariable = 42;
let $element = document.querySelector('div');

Schlecht:

javascript
let 1name = "Max";        // Fehler: Beginnt mit Zahl
let mein name = "Max";    // Fehler: Leerzeichen
let let = "Max";          // Fehler: Reserviertes Wort

Konventionen (camelCase):

javascript
let firstName = "Max";
let lastName = "Mustermann";
let isUserLoggedIn = true;

Datentypen ​

Primitive Datentypen ​

String (Text):

javascript
let text1 = "Hallo Welt";
let text2 = 'Auch gültig';
let text3 = `Template Literal mit ${variable}`;

let name = "Max";
let greeting = `Hallo, ${name}!`;  // "Hallo, Max!"

Number (Zahlen):

javascript
let ganzeZahl = 42;
let dezimalZahl = 3.14;
let negativeZahl = -10;

let summe = 10 + 5;      // 15
let differenz = 10 - 5;  // 5
let produkt = 10 * 5;    // 50
let quotient = 10 / 5;   // 2
let rest = 10 % 3;       // 1 (Modulo: Rest der Division)

Boolean (Wahrheitswert):

javascript
let istWahr = true;
let istFalsch = false;

let istVolljährig = alter >= 18;
let istStudent = true;

Undefined und Null:

javascript
let x;              // undefined (keine Zuweisung)
let y = null;       // null (absichtlich leer)

Typ prüfen ​

javascript
let name = "Max";
let alter = 25;
let istStudent = true;

console.log(typeof name);       // "string"
console.log(typeof alter);      // "number"
console.log(typeof istStudent); // "boolean"

Operatoren ​

Arithmetische Operatoren ​

javascript
let a = 10;
let b = 3;

console.log(a + b);  // 13 (Addition)
console.log(a - b);  // 7  (Subtraktion)
console.log(a * b);  // 30 (Multiplikation)
console.log(a / b);  // 3.333... (Division)
console.log(a % b);  // 1  (Modulo / Rest)
console.log(a ** b); // 1000 (Potenz: 10³)

Inkrement und Dekrement:

javascript
let zähler = 0;
zähler++;       // zähler = zähler + 1;  (jetzt 1)
zähler--;       // zähler = zähler - 1;  (jetzt 0)

let x = 5;
x += 3;         // x = x + 3;  (jetzt 8)
x -= 2;         // x = x - 2;  (jetzt 6)
x *= 2;         // x = x * 2;  (jetzt 12)
x /= 4;         // x = x / 4;  (jetzt 3)

Vergleichsoperatoren ​

javascript
let a = 5;
let b = 10;
let c = "5";

// Gleichheit
console.log(a == c);   // true  (Wert gleich, loser Vergleich)
console.log(a === c);  // false (Wert UND Typ gleich, strenger Vergleich)

// Ungleichheit
console.log(a != b);   // true  (Wert ungleich)
console.log(a !== c);  // true  (Wert ODER Typ ungleich)

// Größer/Kleiner
console.log(b > a);    // true
console.log(b < a);    // false
console.log(a >= 5);   // true
console.log(a <= 4);   // false

Best Practice: Nutze immer === und !== (strenger Vergleich).

Logische Operatoren ​

javascript
let alter = 20;
let hatFührerschein = true;

// UND (&&) - Beide Bedingungen müssen wahr sein
console.log(alter >= 18 && hatFührerschein);  // true

// ODER (||) - Mindestens eine Bedingung muss wahr sein
console.log(alter < 18 || hatFührerschein);   // true

// NICHT (!) - Kehrt Wahrheitswert um
console.log(!hatFührerschein);                // false
console.log(!(alter < 18));                   // true

Kontrollstrukturen ​

If-Else ​

javascript
let alter = 20;

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

Mit else:

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

Mit else if:

javascript
let note = 85;

if (note >= 90) {
    console.log("Sehr gut");
} else if (note >= 75) {
    console.log("Gut");
} else if (note >= 60) {
    console.log("Befriedigend");
} else {
    console.log("Nicht bestanden");
}

Verschachtelt:

javascript
let alter = 20;
let hatFührerschein = true;

if (alter >= 18) {
    if (hatFührerschein) {
        console.log("Du darfst Auto fahren");
    } else {
        console.log("Du brauchst einen Führerschein");
    }
} else {
    console.log("Du bist zu jung");
}

Ternärer Operator ​

Kurzform für einfache if-else:

javascript
let alter = 20;
let status = alter >= 18 ? "Volljährig" : "Minderjährig";

console.log(status);  // "Volljährig"

Syntax:

javascript
bedingung ? wennWahr : wennFalsch

Switch ​

Für mehrere mögliche Werte:

javascript
let tag = "Montag";

switch (tag) {
    case "Montag":
        console.log("Wochenstart!");
        break;
    case "Freitag":
        console.log("Fast Wochenende!");
        break;
    case "Samstag":
    case "Sonntag":
        console.log("Wochenende!");
        break;
    default:
        console.log("Ein normaler Tag");
}

Wichtig: break nicht vergessen, sonst werden weitere Cases ausgeführt!

Schleifen ​

For-Schleife ​

Für eine bestimmte Anzahl von Wiederholungen:

javascript
for (let i = 0; i < 5; i++) {
    console.log(i);
}
// Ausgabe: 0, 1, 2, 3, 4

Syntax:

javascript
for (initialisierung; bedingung; inkrement) {
    // Code
}

Beispiele:

javascript
// Zahlen von 1 bis 10
for (let i = 1; i <= 10; i++) {
    console.log(i);
}

// Rückwärts zählen
for (let i = 10; i > 0; i--) {
    console.log(i);
}

// In Schritten von 2
for (let i = 0; i <= 10; i += 2) {
    console.log(i);  // 0, 2, 4, 6, 8, 10
}

While-Schleife ​

Läuft, solange Bedingung wahr ist:

javascript
let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}
// Ausgabe: 0, 1, 2, 3, 4

Vorsicht vor Endlosschleifen:

javascript
let i = 0;
while (i < 5) {
    console.log(i);
    // i++; vergessen -> Endlosschleife!
}

Do-While-Schleife ​

Führt Code mindestens einmal aus:

javascript
let i = 0;
do {
    console.log(i);
    i++;
} while (i < 5);

Unterschied zu while:

javascript
// while: Prüft zuerst
let x = 10;
while (x < 5) {
    console.log(x);  // Wird nicht ausgeführt
}

// do-while: Führt mindestens einmal aus
let y = 10;
do {
    console.log(y);  // Wird einmal ausgeführt
} while (y < 5);

Break und Continue ​

Break - Bricht Schleife ab:

javascript
for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break;  // Stoppt bei 5
    }
    console.log(i);
}
// Ausgabe: 0, 1, 2, 3, 4

Continue - Überspringt aktuellen Durchlauf:

javascript
for (let i = 0; i < 5; i++) {
    if (i === 2) {
        continue;  // Überspringt 2
    }
    console.log(i);
}
// Ausgabe: 0, 1, 3, 4

Funktionen ​

Funktionen definieren ​

Funktionen sind wiederverwendbare Code-Blöcke:

Function Declaration:

javascript
function grüßen() {
    console.log("Hallo!");
}

grüßen();  // Aufruf der Funktion

Mit Parametern:

javascript
function grüßen(name) {
    console.log("Hallo, " + name + "!");
}

grüßen("Max");   // "Hallo, Max!"
grüßen("Anna");  // "Hallo, Anna!"

Mehrere Parameter:

javascript
function addieren(a, b) {
    let summe = a + b;
    console.log(summe);
}

addieren(5, 3);   // 8
addieren(10, 20); // 30

Return-Werte ​

Funktionen können Werte zurückgeben:

javascript
function addieren(a, b) {
    return a + b;
}

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

let summe = addieren(10, 20) + addieren(5, 5);
console.log(summe);  // 40

Wichtig: Nach return wird nichts mehr ausgeführt:

javascript
function beispiel() {
    return "Rückgabe";
    console.log("Wird nicht ausgeführt");
}

Default-Parameter ​

javascript
function grüßen(name = "Gast") {
    console.log("Hallo, " + name + "!");
}

grüßen("Max");   // "Hallo, Max!"
grüßen();        // "Hallo, Gast!"

Arrow Functions (Moderne Syntax) ​

Kürzere Schreibweise für Funktionen:

Klassisch:

javascript
function addieren(a, b) {
    return a + b;
}

Arrow Function:

javascript
const addieren = (a, b) => {
    return a + b;
};

Noch kürzer (implizites Return):

javascript
const addieren = (a, b) => a + b;

console.log(addieren(5, 3));  // 8

Ein Parameter (Klammern optional):

javascript
const quadrat = x => x * x;

console.log(quadrat(5));  // 25

Keine Parameter:

javascript
const grüßen = () => console.log("Hallo!");

grüßen();  // "Hallo!"

Scope (Gültigkeitsbereich) ​

javascript
let global = "Ich bin global";

function beispiel() {
    let lokal = "Ich bin lokal";
    console.log(global);  // Funktioniert
    console.log(lokal);   // Funktioniert
}

beispiel();
console.log(global);  // Funktioniert
// console.log(lokal);   // Fehler! Nicht zugänglich

Arrays ​

Arrays erstellen ​

Arrays speichern mehrere Werte in einer Variable:

javascript
let zahlen = [1, 2, 3, 4, 5];
let namen = ["Max", "Anna", "Tom"];
let gemischt = [1, "Text", true, 3.14];

console.log(zahlen);   // [1, 2, 3, 4, 5]
console.log(namen);    // ["Max", "Anna", "Tom"]

Auf Elemente zugreifen ​

Index beginnt bei 0:

javascript
let namen = ["Max", "Anna", "Tom"];

console.log(namen[0]);  // "Max"
console.log(namen[1]);  // "Anna"
console.log(namen[2]);  // "Tom"

// Länge des Arrays
console.log(namen.length);  // 3

// Letztes Element
console.log(namen[namen.length - 1]);  // "Tom"

Arrays verändern ​

Elemente ändern:

javascript
let namen = ["Max", "Anna", "Tom"];
namen[1] = "Lisa";
console.log(namen);  // ["Max", "Lisa", "Tom"]

Elemente hinzufügen:

javascript
let namen = ["Max", "Anna"];

// Am Ende hinzufügen
namen.push("Tom");
console.log(namen);  // ["Max", "Anna", "Tom"]

// Am Anfang hinzufügen
namen.unshift("Lisa");
console.log(namen);  // ["Lisa", "Max", "Anna", "Tom"]

Elemente entfernen:

javascript
let namen = ["Max", "Anna", "Tom"];

// Letztes Element entfernen
let letzter = namen.pop();
console.log(letzter);  // "Tom"
console.log(namen);    // ["Max", "Anna"]

// Erstes Element entfernen
let erster = namen.shift();
console.log(erster);  // "Max"
console.log(namen);   // ["Anna"]

Arrays durchlaufen ​

Mit for-Schleife:

javascript
let namen = ["Max", "Anna", "Tom"];

for (let i = 0; i < namen.length; i++) {
    console.log(namen[i]);
}

Mit for...of (modern):

javascript
let namen = ["Max", "Anna", "Tom"];

for (let name of namen) {
    console.log(name);
}

Mit forEach:

javascript
let namen = ["Max", "Anna", "Tom"];

namen.forEach(function(name) {
    console.log(name);
});

// Oder mit Arrow Function
namen.forEach(name => console.log(name));

Nützliche Array-Methoden ​

includes() - Prüft, ob Element existiert:

javascript
let namen = ["Max", "Anna", "Tom"];

console.log(namen.includes("Anna"));  // true
console.log(namen.includes("Lisa"));  // false

indexOf() - Findet Index eines Elements:

javascript
let namen = ["Max", "Anna", "Tom"];

console.log(namen.indexOf("Anna"));  // 1
console.log(namen.indexOf("Lisa"));  // -1 (nicht gefunden)

slice() - Erstellt Teil-Array:

javascript
let zahlen = [1, 2, 3, 4, 5];
let teil = zahlen.slice(1, 4);

console.log(teil);    // [2, 3, 4]
console.log(zahlen);  // [1, 2, 3, 4, 5] (Original unverändert)

join() - Verbindet zu String:

javascript
let namen = ["Max", "Anna", "Tom"];

console.log(namen.join(", "));  // "Max, Anna, Tom"
console.log(namen.join(" - ")); // "Max - Anna - Tom"

Objekte ​

Objekte erstellen ​

Objekte speichern zusammengehörige Daten mit Namen (Properties):

javascript
let person = {
    name: "Max Mustermann",
    alter: 25,
    stadt: "Berlin",
    istStudent: true
};

console.log(person);

Auf Properties zugreifen ​

Dot Notation:

javascript
let person = {
    name: "Max",
    alter: 25
};

console.log(person.name);   // "Max"
console.log(person.alter);  // 25

Bracket Notation:

javascript
console.log(person["name"]);   // "Max"
console.log(person["alter"]);  // 25

// Nützlich bei dynamischen Keys
let eigenschaft = "name";
console.log(person[eigenschaft]);  // "Max"

Properties ändern und hinzufügen ​

javascript
let person = {
    name: "Max",
    alter: 25
};

// Property ändern
person.alter = 26;
console.log(person.alter);  // 26

// Property hinzufügen
person.stadt = "Berlin";
console.log(person.stadt);  // "Berlin"

// Property löschen
delete person.stadt;
console.log(person.stadt);  // undefined

Methoden in Objekten ​

Objekte können auch Funktionen enthalten:

javascript
let person = {
    name: "Max",
    alter: 25,

    grüßen: function() {
        console.log("Hallo, ich bin " + this.name);
    },

    // Kürzere Syntax (ES6)
    geburtstag() {
        this.alter++;
        console.log("Jetzt bin ich " + this.alter);
    }
};

person.grüßen();      // "Hallo, ich bin Max"
person.geburtstag();  // "Jetzt bin ich 26"

this bezieht sich auf das aktuelle Objekt.

Objekte durchlaufen ​

for...in:

javascript
let person = {
    name: "Max",
    alter: 25,
    stadt: "Berlin"
};

for (let key in person) {
    console.log(key + ": " + person[key]);
}
// Ausgabe:
// name: Max
// alter: 25
// stadt: Berlin

Object.keys():

javascript
let keys = Object.keys(person);
console.log(keys);  // ["name", "alter", "stadt"]

Object.values():

javascript
let values = Object.values(person);
console.log(values);  // ["Max", 25, "Berlin"]

Verschachtelte Objekte ​

javascript
let person = {
    name: "Max",
    alter: 25,
    adresse: {
        straße: "Hauptstraße 1",
        plz: "10115",
        stadt: "Berlin"
    }
};

console.log(person.adresse.stadt);        // "Berlin"
console.log(person.adresse.plz);          // "10115"

Arrays von Objekten ​

javascript
let personen = [
    { name: "Max", alter: 25 },
    { name: "Anna", alter: 30 },
    { name: "Tom", alter: 22 }
];

console.log(personen[0].name);  // "Max"
console.log(personen[1].alter); // 30

// Durchlaufen
for (let person of personen) {
    console.log(person.name + " ist " + person.alter + " Jahre alt");
}

DOM-Manipulation ​

Was ist das DOM? ​

DOM = Document Object Model

Das DOM ist die Brücke zwischen JavaScript und HTML:

  • JavaScript kann HTML-Elemente auswählen, ändern, erstellen und löschen
  • JavaScript kann auf Benutzerinteraktionen reagieren (Klicks, Eingaben, etc.)

Elemente auswählen ​

getElementById:

javascript
let element = document.getElementById("meinElement");

querySelector (empfohlen):

javascript
// Nach ID
let element = document.querySelector("#meinElement");

// Nach Klasse
let element = document.querySelector(".meinKlasse");

// Nach Tag
let element = document.querySelector("p");

// Komplexe Selektoren
let element = document.querySelector(".container > p.wichtig");

querySelectorAll (mehrere Elemente):

javascript
let elemente = document.querySelectorAll(".karte");
// Gibt NodeList zurück (ähnlich wie Array)

elemente.forEach(element => {
    console.log(element);
});

Inhalte ändern ​

textContent:

javascript
let überschrift = document.querySelector("h1");
überschrift.textContent = "Neuer Text";

innerHTML (mit HTML):

javascript
let container = document.querySelector(".container");
container.innerHTML = "<p>Neuer <strong>HTML</strong>-Inhalt</p>";

Attribute ändern ​

javascript
let bild = document.querySelector("img");

// Attribute auslesen
console.log(bild.src);
console.log(bild.alt);

// Attribute ändern
bild.src = "neues-bild.jpg";
bild.alt = "Neue Beschreibung";

// Attribute setzen/entfernen
bild.setAttribute("width", "300");
bild.removeAttribute("height");

CSS-Styles ändern ​

javascript
let box = document.querySelector(".box");

// Einzelne Styles
box.style.backgroundColor = "red";
box.style.color = "white";
box.style.padding = "20px";

// Mehrere Styles
box.style.cssText = "background-color: red; color: white; padding: 20px;";

Wichtig: CSS-Properties werden in camelCase geschrieben:

  • background-color → backgroundColor
  • font-size → fontSize

Klassen hinzufügen/entfernen ​

javascript
let element = document.querySelector(".box");

// Klasse hinzufügen
element.classList.add("aktiv");

// Klasse entfernen
element.classList.remove("versteckt");

// Klasse umschalten (toggle)
element.classList.toggle("highlight");

// Prüfen, ob Klasse existiert
if (element.classList.contains("aktiv")) {
    console.log("Element ist aktiv");
}

Event Listener ​

Reagiere auf Benutzerinteraktionen:

Click-Event:

javascript
let button = document.querySelector("button");

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

// Mit Arrow Function
button.addEventListener("click", () => {
    console.log("Button wurde geklickt!");
});

Weitere Events:

javascript
// Doppelklick
element.addEventListener("dblclick", () => {});

// Maus über Element
element.addEventListener("mouseenter", () => {});

// Maus verlässt Element
element.addEventListener("mouseleave", () => {});

// Eingabefeld Änderung
input.addEventListener("input", () => {});

// Formular absenden
form.addEventListener("submit", (e) => {
    e.preventDefault();  // Verhindert Seiten-Reload
});

Praktisches Beispiel ​

HTML:

html
<div class="counter">
    <h2 id="zahl">0</h2>
    <button id="plus">+</button>
    <button id="minus">-</button>
    <button id="reset">Reset</button>
</div>

JavaScript:

javascript
let zahl = 0;
let zahlElement = document.querySelector("#zahl");
let plusButton = document.querySelector("#plus");
let minusButton = document.querySelector("#minus");
let resetButton = document.querySelector("#reset");

plusButton.addEventListener("click", () => {
    zahl++;
    zahlElement.textContent = zahl;
});

minusButton.addEventListener("click", () => {
    zahl--;
    zahlElement.textContent = zahl;
});

resetButton.addEventListener("click", () => {
    zahl = 0;
    zahlElement.textContent = zahl;
});

Praktische Beispiele ​

Beispiel 1: Todo-Liste (vereinfacht) ​

HTML:

html
<input type="text" id="todoInput" placeholder="Neue Aufgabe">
<button id="addButton">Hinzufügen</button>
<ul id="todoList"></ul>

JavaScript:

javascript
let input = document.querySelector("#todoInput");
let button = document.querySelector("#addButton");
let liste = document.querySelector("#todoList");

button.addEventListener("click", () => {
    let text = input.value;

    if (text !== "") {
        let li = document.createElement("li");
        li.textContent = text;
        liste.appendChild(li);

        input.value = "";  // Eingabefeld leeren
    }
});

Beispiel 2: Dark Mode Toggle ​

HTML:

html
<button id="themeToggle">Dark Mode</button>

CSS:

css
body {
    background-color: white;
    color: black;
    transition: all 0.3s;
}

body.dark-mode {
    background-color: #222;
    color: white;
}

JavaScript:

javascript
let button = document.querySelector("#themeToggle");

button.addEventListener("click", () => {
    document.body.classList.toggle("dark-mode");

    if (document.body.classList.contains("dark-mode")) {
        button.textContent = "Light Mode";
    } else {
        button.textContent = "Dark Mode";
    }
});

Beispiel 3: Formular-Validierung ​

HTML:

html
<form id="myForm">
    <input type="text" id="name" placeholder="Name" required>
    <input type="email" id="email" placeholder="E-Mail" required>
    <button type="submit">Absenden</button>
</form>
<p id="message"></p>

JavaScript:

javascript
let form = document.querySelector("#myForm");
let nameInput = document.querySelector("#name");
let emailInput = document.querySelector("#email");
let message = document.querySelector("#message");

form.addEventListener("submit", (e) => {
    e.preventDefault();

    let name = nameInput.value;
    let email = emailInput.value;

    if (name === "" || email === "") {
        message.textContent = "Bitte alle Felder ausfüllen!";
        message.style.color = "red";
    } else {
        message.textContent = "Formular erfolgreich abgesendet!";
        message.style.color = "green";

        // Hier würde normalerweise das Formular versendet
        console.log("Name:", name);
        console.log("E-Mail:", email);

        form.reset();  // Formular zurücksetzen
    }
});

Best Practices ​

1. Aussagekräftige Variablennamen ​

javascript
// Schlecht
let x = 25;
let y = "Max";

// Gut
let alter = 25;
let name = "Max";

2. Const bevorzugen ​

javascript
// Wenn sich Wert nicht ändert
const PI = 3.14159;
const API_URL = "https://api.example.com";

// Nur bei Änderung let verwenden
let counter = 0;
counter++;

3. Strikte Gleichheit verwenden ​

javascript
// Schlecht
if (alter == "25") { }

// Gut
if (alter === 25) { }

4. Funktionen klein halten ​

javascript
// Jede Funktion sollte eine klare Aufgabe haben
function addieren(a, b) {
    return a + b;
}

function ausgeben(wert) {
    console.log(wert);
}

function berechnenUndAusgeben(a, b) {
    let summe = addieren(a, b);
    ausgeben(summe);
}

5. Kommentare sinnvoll einsetzen ​

javascript
// Erkläre WARUM, nicht WAS
// Gut: Komplexe Logik erklären
// Prüft ob Schaltjahr (durch 4 teilbar, aber nicht durch 100, außer durch 400)
if ((jahr % 4 === 0 && jahr % 100 !== 0) || jahr % 400 === 0) {
    // ...
}

// Nicht nötig: Offensichtlicher Code
// Schlecht
let alter = 25;  // Setzt alter auf 25

Häufige Fehler ​

1. Semikolons vergessen ​

javascript
// Funktioniert meist, aber besser explizit
let x = 5
let y = 10

// Empfohlen
let x = 5;
let y = 10;

2. Falsche Vergleichsoperatoren ​

javascript
// Problem: Typ-Konvertierung
"5" == 5   // true (unerwünscht)

// Lösung: Strikte Gleichheit
"5" === 5  // false (korrekt)

3. Falsche Array-/String-Indizes ​

javascript
let namen = ["Max", "Anna", "Tom"];

// Fehler: Index out of bounds
console.log(namen[3]);  // undefined

// Richtig
console.log(namen[2]);  // "Tom"
console.log(namen[namen.length - 1]);  // Letztes Element

4. Variablen-Scope ​

javascript
if (true) {
    var x = 10;  // var ist global
    let y = 20;  // let ist block-scoped
}

console.log(x);  // 10
console.log(y);  // Fehler! y ist nicht definiert

Debugging-Tipps ​

Console.log() strategisch einsetzen ​

javascript
function addieren(a, b) {
    console.log("a:", a);  // Werte prüfen
    console.log("b:", b);

    let summe = a + b;
    console.log("summe:", summe);

    return summe;
}

Typeof prüfen ​

javascript
let wert = "123";
console.log(typeof wert);  // "string"

// Bei unerwartetem Verhalten Typ prüfen
if (typeof wert === "string") {
    wert = Number(wert);
}

Browser DevTools nutzen ​

  • Console - Fehler und Logs
  • Debugger - Breakpoints setzen
  • Elements - DOM inspizieren
  • Network - API-Anfragen prüfen

Ressourcen zum Weiterlernen ​

Dokumentation:

Interaktive Tutorials:

Übungen:

Cheat Sheet ​

KonzeptSyntax
Variablelet name = "Max"; const PI = 3.14;
Funktionfunction name() { } oder const name = () => { }
If-Elseif (bedingung) { } else { }
For-Loopfor (let i = 0; i < 10; i++) { }
Arraylet arr = [1, 2, 3]; arr.push(4);
Objektlet obj = { key: "value" }; obj.key
DOMdocument.querySelector(".class")
Eventelement.addEventListener("click", () => {})

Viel Erfolg beim Programmieren mit JavaScript!

Informatik & ICT Unterricht Neufeld

Copyright © 2025 CBRA