JavaScript Grundlagen: Deine erste Programmierung

Willkommen bei JavaScript - der Programmiersprache des Webs! 🚀

Mit JavaScript machst du deine Webseiten interaktiv und dynamisch!

Was ist JavaScript?

JavaScript (kurz: JS) ist eine Programmiersprache für:

• 🖱️ Interaktivität (Klicks, Hover, etc.)
• 🔄 Dynamische Inhalte (Content ändern ohne Reload)
• ✅ Formular-Validierung
• 🎮 Spiele & Animationen
• 📡 API-Calls (Daten laden)

💡 Das Web-Trio:
HTML = Struktur
CSS = Design
JavaScript = Interaktivität

JavaScript einbinden

1. Inline (im HTML-Tag)

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

❌ Nicht empfohlen!

2. Internal (im script Tag)

<button id="btn">Klick mich!</button>

<script>
    document.getElementById('btn').onclick = function() {
        alert('Button geklickt!');
    };
</script>

✅ Gut für kleine Scripts

3. External (separate .js Datei)

script.js:

function greet() {
    alert('Hallo!');
}

index.html:

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

✅ BESTE Methode!

Console.log() - Dein bester Freund

<button id="btn">Klick & check Console!</button>

💡 Tipp: Öffne die Browser-Console mit F12 oder Rechtsklick > Untersuchen > Console

Variablen

Variablen speichern Werte:

<div id="output"></div>

Unterschied:

• let - Wert kann geändert werden
• const - Wert bleibt konstant
• var - VERALTET! Nicht mehr nutzen!

Datentypen

<div id="types"></div>

Operatoren

Rechenoperatoren

<div id="math"></div>

Vergleichsoperatoren

<div id="compare"></div>

⚠️ Wichtig: Nutze === statt == (prüft auch Typ!)

If/Else Bedingungen

<input type="number" id="age" placeholder="Dein Alter">
<button onclick="checkAge()">Prüfen</button>
<div id="result"></div>

Schleifen

For-Schleife

<div id="loop1"></div>

While-Schleife

<div id="loop2"></div>

Arrays (Listen)

<div id="array"></div>

Funktionen

<button onclick="sayHello('Max')">Grüße Max</button>
<button onclick="sayHello('Anna')">Grüße Anna</button>
<div id="greeting"></div>

DOM Manipulation

Das DOM (Document Object Model) ist deine HTML-Struktur in JavaScript!

<div id="demo">Original Text</div>
<button onclick="changeText()">Text ändern</button>
<button onclick="changeColor()">Farbe ändern</button>
<button onclick="hide()">Verstecken</button>
<button onclick="show()">Zeigen</button>

Events (Ereignisse)

<button id="btn1">Klick Event</button>
<button id="btn2" onmouseover="hover()">Hover Event</button>
<input id="input" onkeyup="typing()" placeholder="Tippe hier...">
<div id="event-output"></div>

Wichtige Events:

• onclick - Klick
• onmouseover - Hover (Maus drüber)
• onmouseout - Maus weg
• onkeyup - Taste losgelassen
• onload - Seite geladen
• onchange - Input geändert

Template Strings (moderne Syntax)

<div id="template"></div>

💡 Tipp: Nutze Backticks (``) für moderne Strings!

Praktisches Beispiel: To-Do Liste

<div style="max-width: 400px;">
    <h3>To-Do Liste</h3>
    <input id="todoInput" placeholder="Neue Aufgabe...">
    <button onclick="addTodo()">Hinzufügen</button>
    <ul id="todoList"></ul>
</div>

TipsAndTricks

const name = 'Max';
const age = 25;
// Alt:
console.log('Hallo ' + name + ', du bist ' + age + ' Jahre alt');
// Neu:
console.log(`Hallo ${name}, du bist ${age} Jahre alt`);

// Variablen mit Label
const user = { name: 'Max', age: 25 };
console.log({ user });  // { user: { name: 'Max', age: 25 } }

// Tabellen für Arrays/Objects
console.table([{ name: 'Max', age: 25 }, { name: 'Anna', age: 30 }]);

// Timer für Performance-Messung
console.time('myLoop');
for (let i = 0; i < 1000; i++) { }
console.timeEnd('myLoop');

// Klassische Funktion
function greet(name) {
    return 'Hallo ' + name;
}

// Arrow Function
const greet = (name) => `Hallo ${name}`;

// Bei einem Parameter: Klammern optional
const greet = name => `Hallo ${name}`;

// Array Destructuring
const colors = ['red', 'green', 'blue'];
const [first, second] = colors;  // first = 'red', second = 'green'

// Object Destructuring
const user = { name: 'Max', age: 25 };
const { name, age } = user;  // Direkter Zugriff auf Properties

Quiz

Zusammenfassung

Du hast gelernt: ✅ JavaScript einbinden
✅ Variablen (let/const)
✅ Datentypen (String, Number, Boolean, Array, Object)
✅ Operatoren
✅ If/Else Bedingungen
✅ Schleifen (for, while)
✅ Arrays
✅ Funktionen
✅ DOM Manipulation
✅ Events
✅ Template Strings

Nächste Schritte:

• ES6+ Features lernen
• Async/Await & Promises
• JSON & APIs
• JavaScript Frameworks (React, Vue)

Happy Coding! 🚀