Kapitel 3: Ihr erstes JavaScript-Programm

In diesem Kapitel schreiben wir Ihr erstes echtes JavaScript-Programm und lernen die wichtigsten Grundlagen.

3.1 `alert()` - Ein Popup-Fenster anzeigen

Die alert()-Funktion ist der einfachste Weg, um eine Nachricht anzuzeigen.

Grundlegende Verwendung

javascript

alert("Hallo Welt!");

Ergebnis: Ein Popup-Fenster mit dem Text "Hallo Welt!" und einem "OK"-Button.

Praxis-Beispiel

html

<!DOCTYPE html>
<html>
<head>
    <title>Mein erstes JS-Programm</title>
</head>
<body>
    <h1>Willkommen!</h1>
    
    <script>
        alert("Willkommen auf meiner Webseite!");
    </script>
</body>
</html>

Wann verwendet man alert()?

✅ Für einfache Benachrichtigungen
✅ Zum Debuggen (Fehlersuche)
❌ Nicht für professionelle Webseiten (störend für Benutzer)

Mehrere Nachrichten anzeigen

javascript

alert("Nachricht 1");
alert("Nachricht 2");
alert("Nachricht 3");

Die Popups erscheinen nacheinander - Sie müssen jedes mal auf "OK" klicken.

3.2 `console.log()` - Ausgabe in der Konsole (Programmierer-Muss!)

Während alert() für Benutzer gedacht ist, ist console.log() für Programmierer zum Debuggen.

Grundlegende Verwendung

javascript

console.log("Dies ist eine Nachricht für die Konsole");

Wo erscheint die Ausgabe?

Öffnen Sie die Browser-Entwicklertools (F12)
Klicken Sie auf den Tab "Konsole" (Console)

Verschiedene Arten der Konsolen-Ausgabe

javascript

// Normale Nachricht
console.log("Normale Nachricht");

// Fehlermeldung
console.error("Dies ist ein Fehler!");

// Warnung
console.warn("Dies ist eine Warnung!");

// Information
console.info("Dies ist eine Info!");

// Werte von Variablen anzeigen
let alter = 25;
console.log("Mein Alter ist:", alter);

// Mehrere Werte gleichzeitig
let name = "Max";
let stadt = "Berlin";
console.log("Name:", name, "Stadt:", stadt);

Praxis-Beispiel: Debugging

javascript

let zahl1 = 10;
let zahl2 = 20;
let summe = zahl1 + zahl2;

console.log("zahl1:", zahl1);
console.log("zahl2:", zahl2);
console.log("Summe:", summe);

Öffnen Sie die Konsole, um die Werte zu sehen!

Vorteile von `console.log()`

✅ Stört den Benutzer nicht (kein Popup)
✅ Zeigt komplexe Daten (Objekte, Arrays) übersichtlich an
✅ Kann bleiben (für zukünftiges Debugging)
✅ Performanter als alert()

3.3 Code-Kommentare (Single-line / Multi-line)

Kommentare sind wichtig für die Lesbarkeit Ihres Codes. Sie werden vom Browser ignoriert.

Einzeilige Kommentare (`//`)

javascript

// Dies ist ein einzeiliger Kommentar

let name = "Max"; // Auch am Ende einer Zeile möglich

// alert("Dies wird nicht ausgeführt");

Verwendung:

✅ Erklärungen zu einer Zeile Code
✅ Code temporär deaktivieren (auskommentieren)

Mehrzeilige Kommentare (`/* */`)

javascript

/* 
Dies ist ein mehrzeiliger Kommentar.
Er kann über mehrere Zeilen gehen.
Sehr nützlich für längere Erklärungen.
*/

let alter = 25;

/* 
Auch ganzer Code kann auskommentiert werden:
let x = 10;
let y = 20;
let z = x + y;
*/

Dokumentations-Kommentare (JSDoc-Stil)

javascript

/**
 * Berechnet die Summe zweier Zahlen
 * @param {number} a - Die erste Zahl
 * @param {number} b - Die zweite Zahl
 * @returns {number} Die Summe von a und b
 */
function addiere(a, b) {
    return a + b;
}

Wann verwendet man Kommentare?

Situation	Ja	Nein
Komplexe Logik erklären	✅
Offensichtlichen Code kommentieren		❌
TODO-Hinweise	✅
Code temporär deaktivieren	✅
Jeden einzelnen Schritt erklären		❌

Gutes Beispiel:

javascript

// Berechnet den Rabatt basierend auf dem Alter
let rabatt = alter > 60 ? 0.2 : 0;

Schlechtes Beispiel:

javascript

// Setzt den Namen auf "Max"
let name = "Max"; // Offensichtlich!

3.4 Wichtige Grundlagen: Code-Konventionen und Namenskonventionen

Gute Code-Konventionen machen Ihren Code lesbar und wartbar.

1. Einrückung (Indentation)

Verwenden Sie immer 2 oder 4 Leerzeichen für Einrückungen.

Richtig:

javascript

function begruessung(name) {
    console.log("Hallo " + name);
    if (name === "Admin") {
        console.log("Willkommen zurück!");
    }
}

Falsch:

javascript

function begruessung(name) {
console.log("Hallo " + name);
if (name === "Admin") {
console.log("Willkommen zurück!");
}
}

2. Semikolon am Zeilenende

In JavaScript ist das Semikolon optional, aber empfohlen.

javascript

// Gut
let name = "Max";
console.log(name);

// Funktioniert auch, aber nicht empfohlen
let alter = 25
console.log(alter)

3. Namenskonventionen (Naming Conventions)

Variablen und Funktionen: camelCase

javascript

// Gut (camelCase)
let firstName = "Max";
let lastName = "Mustermann";
function calculateTotalPrice() { ... }

// Schlecht
let first_name = "Max";  // Snake case (eher Python-Stil)
let FirstName = "Max";   // PascalCase (eher für Klassen)

Konstanten: UPPER_SNAKE_CASE

javascript

const MAX_SIZE = 100;
const API_KEY = "abc123";
const PI = 3.14159;

Klassen: PascalCase

javascript

class Person { ... }
class CarFactory { ... }

Dateinamen: kebab-case oder camelCase

// Empfohlen für Webprojekte
my-script.js
user-profile.js

// Alternativ
myScript.js
userProfile.js

4. Bedeutungsvolle Namen wählen

Gut:

javascript

let studentCount = 25;
function calculateAverageGrade() { ... }
let isUserLoggedIn = true;

Schlecht:

javascript

let x = 25;
function calc() { ... }
let flag = true;

5. Konsistent bleiben

Entscheiden Sie sich für einen Stil und bleiben Sie dabei!

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

✅ alert() zeigt Popup-Fenster an (für Benutzer)
✅ console.log() gibt Nachrichten in der Konsole aus (für Programmierer)
✅ Einzeilige Kommentare: //
✅ Mehrzeilige Kommentare: /* */
✅ Code-Konventionen: Einrückung, Semikolon, Namenskonventionen
✅ camelCase für Variablen und Funktionen
✅ UPPER_SNAKE_CASE für Konstanten

➡️ Nächster Schritt

Im nächsten Kapitel lernen wir Variablen und Konstanten - die "Schachteln" zum Speichern von Daten!

Übung:

Erstellen Sie eine HTML-Datei mit JavaScript
Verwenden Sie alert(), um "Willkommen!" anzuzeigen
Verwenden Sie console.log(), um Ihren Namen auszugeben
Fügen Sie Kommentare hinzu, um den Code zu erklären
Testen Sie alles im Browser (F12 für Konsole)

Kapitel 3: Ihr erstes JavaScript-Programm ​

3.1 alert() - Ein Popup-Fenster anzeigen ​

Grundlegende Verwendung ​

Praxis-Beispiel ​

Mehrere Nachrichten anzeigen ​

3.2 console.log() - Ausgabe in der Konsole (Programmierer-Muss!) ​

Grundlegende Verwendung ​

Verschiedene Arten der Konsolen-Ausgabe ​

Praxis-Beispiel: Debugging ​

Vorteile von console.log() ​

3.3 Code-Kommentare (Single-line / Multi-line) ​

Einzeilige Kommentare (//) ​

Mehrzeilige Kommentare (/* */) ​

Dokumentations-Kommentare (JSDoc-Stil) ​

Wann verwendet man Kommentare? ​

3.4 Wichtige Grundlagen: Code-Konventionen und Namenskonventionen ​

1. Einrückung (Indentation) ​

2. Semikolon am Zeilenende ​

3. Namenskonventionen (Naming Conventions) ​

Variablen und Funktionen: camelCase ​

Konstanten: UPPER_SNAKE_CASE ​

Klassen: PascalCase ​

Dateinamen: kebab-case oder camelCase ​

4. Bedeutungsvolle Namen wählen ​

5. Konsistent bleiben ​

📝 Zusammenfassung ​

➡️ Nächster Schritt ​

Kapitel 3: Ihr erstes JavaScript-Programm

3.1 `alert()` - Ein Popup-Fenster anzeigen

Grundlegende Verwendung

Praxis-Beispiel

Mehrere Nachrichten anzeigen

3.2 `console.log()` - Ausgabe in der Konsole (Programmierer-Muss!)

Grundlegende Verwendung

Verschiedene Arten der Konsolen-Ausgabe

Praxis-Beispiel: Debugging

Vorteile von `console.log()`

3.3 Code-Kommentare (Single-line / Multi-line)

Einzeilige Kommentare (`//`)

Mehrzeilige Kommentare (`/* */`)

Dokumentations-Kommentare (JSDoc-Stil)

Wann verwendet man Kommentare?

3.4 Wichtige Grundlagen: Code-Konventionen und Namenskonventionen

1. Einrückung (Indentation)

2. Semikolon am Zeilenende

3. Namenskonventionen (Naming Conventions)

Variablen und Funktionen: camelCase

Konstanten: UPPER_SNAKE_CASE

Klassen: PascalCase

Dateinamen: kebab-case oder camelCase

4. Bedeutungsvolle Namen wählen

5. Konsistent bleiben

📝 Zusammenfassung

➡️ Nächster Schritt