JavaScript - Die Programmiersprache des Webs

JavaScript macht Webseiten interaktiv! Während HTML die Struktur und CSS das Design liefert, bringt JavaScript das Leben rein.

Was ist JavaScript?

JavaScript ist eine Programmiersprache die im Browser läuft:

Die 3 Säulen des Webs:

HTML = Struktur (Gerüst)
CSS = Design (Aussehen)
JavaScript = Interaktivität (Verhalten)

Beispiel: Interaktivität

<!-- HTML: Button -->
<button id="myButton">Klick mich!</button>

/* CSS: Style */
#myButton {
    padding: 10px 20px;
    background: blue;
    color: white;
}

// JavaScript: Funktion
document.getElementById('myButton').addEventListener('click', function() {
    alert('Button wurde geklickt!');
});

Wofür braucht man JavaScript?

Was du mit JavaScript machen kannst:

Interaktive Elemente
- Buttons reagieren auf Klicks
- Formulare validieren
- Dropdown-Menüs öffnen/schließen
Dynamischer Content
- Inhalte ohne Neuladen ändern
- Daten von APIs laden
- Live-Updates (Chat, Benachrichtigungen)
Animationen & Effekte
- Smooth Scrolling
- Animierte Übergänge
- Parallax-Effekte
Single Page Applications (SPAs)
- React, Vue, Angular
- Keine Seitenwechsel mehr

Beispiele:

Facebook Feed (automatisch neue Posts)
Google Maps (Interaktive Karte)
YouTube (Video-Player)
Gmail (E-Mails ohne Neuladen)

📝 Quiz

Was sind die 3 Säulen des Webs?

HTML, CSS, PythonHTML, CSS, JavaScriptJavaScript, PHP, MySQLReact, Vue, Angular

JavaScript einbinden

3 Wege, JavaScript einzubinden:

1. Inline (im HTML-Tag)

Inline JavaScript

<!-- ❌ Nicht empfohlen! -->
<button onclick="alert('Hallo!')">Klick mich</button>

Nachteil: Vermischt HTML und JavaScript (schlecht wartbar)

2. Internal (im `<script>`-Tag)

Internal JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Meine Seite</title>
</head>
<body>
    <button id="myButton">Klick mich</button>

    <script>
        // JavaScript-Code hier
        document.getElementById('myButton').addEventListener('click', function() {
            alert('Button geklickt!');
        });
    </script>
</body>
</html>

Wichtig: <script> am Ende vom <body>!

3. External (externe Datei)

Am besten: Separate .js Datei

External JavaScript

<!-- HTML: index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Meine Seite</title>
</head>
<body>
    <button id="myButton">Klick mich</button>

    <!-- JavaScript einbinden -->
    <script src="script.js"></script>
</body>
</html>

JavaScript-Datei: script.js

// script.js
document.getElementById('myButton').addEventListener('click', function() {
    alert('Button geklickt!');
});

Vorteile:

✅ Klare Trennung
✅ Wiederverwendbar
✅ Bessere Organisation
✅ Caching (schneller)

📝 Quiz

Welche Methode ist die beste um JavaScript einzubinden?

Inline im HTML-Tag (onclick='...')Internal im <script>-TagExternal in einer separaten .js DateiAlle sind gleich gut

Deine erste JavaScript-Zeile

console.log() - Ausgabe in der Konsole:

Erstes JavaScript

console.log('Hallo Welt!');
console.log(42);
console.log(true);

Browser-Konsole öffnen:

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

Kommentare in JavaScript

Notizen im Code:

Kommentare

// Einzeilige Kommentar
console.log('Hallo');  // Auch am Ende der Zeile

/*
   Mehrzeiliger
   Kommentar
*/

console.log('Welt');

Nutze Kommentare für:

✅ Erklärungen
✅ TODOs
✅ Code temporär deaktivieren

Variablen - Werte speichern

Variablen = Container für Daten:

Variablen Basics

// Variable deklarieren
let name = 'Max';
let alter = 25;
let istStudent = true;

// Ausgeben
console.log(name);       // Max
console.log(alter);      // 25
console.log(istStudent); // true

// Verwenden
console.log('Ich heiße ' + name);
console.log('Ich bin ' + alter + ' Jahre alt');

Datentypen

Die wichtigsten Typen:

Datentypen

// String (Text)
let name = 'Max';
let nachname = "Mustermann";
let satz = `Hallo ${name}`;  // Template String

// Number (Zahl)
let alter = 25;
let preis = 19.99;
let negativ = -10;

// Boolean (Wahr/Falsch)
let istStudent = true;
let hatFuehrerschein = false;

// Undefined (nicht definiert)
let x;
console.log(x);  // undefined

// Null (bewusst leer)
let y = null;

📝 Quiz

Welcher Datentyp ist 'true'?

StringNumberBooleanUndefined

Einfache Operationen

Rechenoperationen

// Addition
let summe = 5 + 3;
console.log(summe);  // 8

// Subtraktion
let differenz = 10 - 4;
console.log(differenz);  // 6

// Multiplikation
let produkt = 6 * 7;
console.log(produkt);  // 42

// Division
let quotient = 20 / 5;
console.log(quotient);  // 4

// Strings verbinden
let vorname = 'Max';
let nachname = 'Mustermann';
let vollname = vorname + ' ' + nachname;
console.log(vollname);  // Max Mustermann

📝 Quiz

Was ist das Ergebnis von 10 + '5' in JavaScript?

15'105'Errorundefined

Interaktion mit HTML

DOM (Document Object Model) manipulieren:

HTML ändern

<!-- HTML -->
<h1 id="titel">Alter Titel</h1>
<button id="btn">Ändere Titel</button>

<script>
    // Element auswählen
    let titel = document.getElementById('titel');
    let button = document.getElementById('btn');

    // Bei Klick ändern
    button.addEventListener('click', function() {
        titel.textContent = 'Neuer Titel!';
        titel.style.color = 'red';
    });
</script>

Praktisches Beispiel - Counter

Zähler-App

<!-- HTML -->
<div>
    <h2 id="count">0</h2>
    <button id="increment">+</button>
    <button id="decrement">-</button>
    <button id="reset">Reset</button>
</div>

<script>
    let count = 0;
    let countElement = document.getElementById('count');

    // Plus Button
    document.getElementById('increment').addEventListener('click', function() {
        count++;
        countElement.textContent = count;
    });

    // Minus Button
    document.getElementById('decrement').addEventListener('click', function() {
        count--;
        countElement.textContent = count;
    });

    // Reset Button
    document.getElementById('reset').addEventListener('click', function() {
        count = 0;
        countElement.textContent = count;
    });
</script>

Wichtige JavaScript-Konzepte

Was du als nächstes lernst:

Variablen (let, const, var)
Datentypen (String, Number, Boolean, Array, Object)
Operatoren (+, -, *, /, ==, ===)
Conditionals (if, else, switch)
Loops (for, while, forEach)
Funktionen (function, arrow functions)
Arrays (Listen von Werten)
Objects (Daten-Strukturen)
DOM Manipulation (HTML mit JS ändern)
Events (Click, Hover, Keyboard)

JavaScript vs. Andere Sprachen

JavaScript ist besonders:

| Feature | JavaScript | |---------|------------| | Läuft | Im Browser (& Node.js) | | Typ | Dynamisch typisiert | | Schwierigkeit | Anfängerfreundlich | | Verwendung | Web, Apps, Server, Games |

Vergleich:

Python - Backend, Data Science
Java - Enterprise, Android
JavaScript - Web, Frontend & Backend (Node.js)

Developer Tools

Browser-Tools für Entwickler:

Console nutzen

// F12 drücken, dann in Console:

console.log('Einfache Ausgabe');
console.warn('Warnung');
console.error('Fehler');
console.table([{name: 'Max', alter: 25}, {name: 'Anna', alter: 30}]);
console.clear();  // Console leeren

Best Practices

✅ DO:

Script-Tag am Ende vom <body>
Externe .js Dateien nutzen
Aussagekräftige Namen für Variablen
Kommentare für Erklärungen
console.log() zum Debuggen
Einrückung für Lesbarkeit

❌ DON'T:

Nicht inline JavaScript im HTML
Keine kryptischen Namen (x, abc, temp)
Nicht ohne Semikolon (empfohlen)
Keine globalen Variablen überall
Nicht var nutzen (veraltet, nutze let/const)

Debugging-Tipps

Fehler finden

// 1. Console nutzen
console.log('Wert:', variable);

// 2. Fehler lesen
// Browser zeigt Zeile und Fehlertyp

// 3. Breakpoints setzen
// In DevTools → Sources → auf Zeile klicken

// 4. typeof prüfen
console.log(typeof variable);

📝 Quiz

Welches Tool ist am besten zum Debuggen in JavaScript?

alert() für alle VariablenBrowser DevTools mit console.log() und BreakpointsNur kommentieren von Code-ZeilenCode neu schreiben bis es funktioniert

Häufige Anfängerfehler

Fehler 1: Script vor HTML-Element

❌ FALSCH:

<script>
    document.getElementById('button').addEventListener('click', ...);
    // Fehler: button existiert noch nicht!
</script>
<button id="button">Click</button>

✅ RICHTIG:

<button id="button">Click</button>
<script>
    document.getElementById('button').addEventListener('click', ...);
</script>

Fehler 2: Groß-/Kleinschreibung

❌ FALSCH:

let name = 'Max';
console.log(Name);  // Fehler: Name nicht definiert!

✅ RICHTIG:

let name = 'Max';
console.log(name);  // JavaScript ist case-sensitive!

Fehler 3: Fehlende Anführungszeichen

❌ FALSCH:

console.log(Hallo);  // Fehler: Hallo nicht definiert

✅ RICHTIG:

console.log('Hallo');  // String braucht Anführungszeichen

📝 Quiz

Wo sollte das <script>-Tag platziert werden?

Im <head>Am Anfang von <body>Am Ende von <body> (vor </body>)Egal wo

TipsAndTricks

⚡

Tipps & Tricks

Console Tricks für besseres Debugging

Nutze mehr als nur console.log():

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

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

// console.warn und console.error
console.warn('Warnung!');
console.error('Fehler aufgetreten!');

// Zeit messen
console.time('myLoop');
for (let i = 0; i < 1000; i++) { }
console.timeEnd('myLoop');  // myLoop: 0.5ms

Template Literals statt String-Verkettung

Moderne String-Syntax für besseren Code:

const name = 'Max';
const age = 25;

// ❌ Alt: Mit +
console.log('Hallo ' + name + ', du bist ' + age + ' Jahre alt');

// ✅ Neu: Template Literals
console.log(`Hallo ${name}, du bist ${age} Jahre alt`);

// Mit Berechnungen
console.log(`In 5 Jahren bin ich ${age + 5}`);

querySelector statt getElementById

Nutze CSS-Selektoren für flexiblere Auswahl:

// ❌ Alt: Limitiert
const element = document.getElementById('myId');

// ✅ Neu: Flexibler mit CSS-Selektoren
const element = document.querySelector('#myId');
const button = document.querySelector('.btn.primary');
const firstItem = document.querySelector('ul > li:first-child');

const als Standard, let nur wenn nötig

Nutze const als Standard für besseren Code:

// ✅ const wenn Wert sich nicht ändert
const name = 'Max';
const API_URL = 'https://api.example.com';

// ✅ let nur wenn Wert sich ändert
let count = 0;
count++;

// ❌ var ist veraltet - nicht mehr nutzen!
var x = 10;  // Nicht nutzen!

📝 Quiz

Was macht console.log()?

Zeigt eine Alert-BoxGibt Werte in der Browser-Konsole ausSpeichert WerteLöscht Variablen

Übungsaufgaben

Jetzt bist du dran! Löse diese Challenges um dein Wissen zu testen:

🎯

Aufgabe 1: Dein erster Button

Einfach

Erstelle einen Button der beim Klick eine Alert-Box mit 'Hallo!' anzeigt.

HTML

<button>Klick mich!</button>

<script>
  // Dein Code hier

</script>

<button>Klick mich!</button>

<script>
  // Dein Code hier

</script>

Live-Vorschau

🎯

Aufgabe 2: Text ändern mit Button

Einfach

Erstelle einen Button der den Text eines <h1> Elements ändert wenn man draufklickt.

HTML

<h1 id="titel">Alter Text</h1>
<button onclick="changeText()">Text ändern</button>

<script>
  function changeText() {
    // Dein Code hier: Ändere den Text auf "Neuer Text!"

  }
</script>

<h1 id="titel">Alter Text</h1>
<button onclick="changeText()">Text ändern</button>

<script>
  function changeText() {
    // Dein Code hier: Ändere den Text auf "Neuer Text!"

  }
</script>

Live-Vorschau

🎯

Aufgabe 3: Counter erstellen

Mittel

Erstelle einen Zähler mit + und - Buttons. Der Zähler soll bei 0 starten.

HTML

<h2 id="counter">0</h2>
<button onclick="increment()">+</button>
<button onclick="decrement()">-</button>

<script>
  let count = 0;

  function increment() {
    // Dein Code: count erhöhen und anzeigen

  }

  function decrement() {
    // Dein Code: count verringern und anzeigen

  }
</script>

<h2 id="counter">0</h2>
<button onclick="increment()">+</button>
<button onclick="decrement()">-</button>

<script>
  let count = 0;

  function increment() {
    // Dein Code: count erhöhen und anzeigen

  }

  function decrement() {
    // Dein Code: count verringern und anzeigen

  }
</script>

Live-Vorschau

Nächste Schritte

Du kennst jetzt:

✅ Was JavaScript ist und wozu man es braucht
✅ Wie man JavaScript einbindet (<script>)
✅ console.log() für Ausgaben
✅ Erste Variablen
✅ Basis-Datentypen
✅ Einfache DOM-Manipulation

Als Nächstes lernst du:

Variablen im Detail (let, const, var)
Datentypen (String, Number, Boolean)
Operatoren (+, -, *, /)
Conditionals (if, else)

Weiter so! 🚀

JavaScript Einführung - Was ist JavaScript?

JavaScript - Die Programmiersprache des Webs

Was ist JavaScript?

Wofür braucht man JavaScript?

📝 Quiz

JavaScript einbinden

1. Inline (im HTML-Tag)

2. Internal (im <script>-Tag)

3. External (externe Datei)

📝 Quiz

Deine erste JavaScript-Zeile

Kommentare in JavaScript

Variablen - Werte speichern

Datentypen

📝 Quiz

Einfache Operationen

📝 Quiz

Interaktion mit HTML

Praktisches Beispiel - Counter

Wichtige JavaScript-Konzepte

JavaScript vs. Andere Sprachen

Developer Tools

Best Practices

✅ DO:

❌ DON'T:

Debugging-Tipps

📝 Quiz

Häufige Anfängerfehler

Fehler 1: Script vor HTML-Element

Fehler 2: Groß-/Kleinschreibung

Fehler 3: Fehlende Anführungszeichen

📝 Quiz

TipsAndTricks

Tipps & Tricks

Console Tricks für besseres Debugging

Template Literals statt String-Verkettung

querySelector statt getElementById

const als Standard, let nur wenn nötig

📝 Quiz

Übungsaufgaben

Aufgabe 1: Dein erster Button

Aufgabe 2: Text ändern mit Button

Aufgabe 3: Counter erstellen

Nächste Schritte

Gut gemacht! 🎉

Artikel bewerten

Das könnte dich auch interessieren

JavaScript Grundlagen: Deine erste Programmierung

JavaScript Arrays - Listen & Array Methods

JavaScript Conditionals - if, else, switch

2. Internal (im `<script>`-Tag)