====== JavaScript Grundlagen & Dokumentation ======

Diese Dokumentation bietet eine strukturierte Übersicht über die Grundlagen von JavaScript, Syntax, Variablen, Operatoren, Kontrollstrukturen, Funktionen und Event-Handling basierend auf den Unterlagen von Jennifer Robbins[cite: 17].

===== 1. Einführung & Einbindung =====

JavaScript ist eine clientseitige, lose typisierte und dynamische Skriptsprache, die direkt vom Browser interpretiert wird, um Webseiten Interaktivität und Logik hinzuzufügen[cite: 17].

==== Einbindungsarten ====

  * **Eingebettetes Skript:** Direkt im HTML-Dokument innerhalb des ''<script>''-Tags[cite: 17].
  * **Externes Skript:** Über ein externes Dokument per ''src''-Attribut eingebunden[cite: 17].

<code html>
<!-- Eingebettetes Skript -->
<script>
  // JavaScript-Code
</script>

<!-- Externes Skript -->
<script src="script.js"></script>
</code>

==== Empfohlene Platzierung ====

  * **Im `<head>`-Bereich:** Wenn Skripte ausgeführt werden müssen, bevor der Seiteninhalt geladen ist[cite: 17].
  * **Vor dem schließenden `</body>`-Tag:** Bevorzugt, damit das DOM und die Seitenstruktur vollständig geladen sind, bevor das Skript startet[cite: 17].

===== 2. Syntax & Variablen =====

==== Syntax-Grundlagen ====
  * JavaScript unterscheidet strikt zwischen **Groß- und Kleinschreibung** (Case-sensitive)[cite: 17].
  * **Einzeilige Kommentare:** Beginnen mit ''//''[cite: 17].
  * **Mehrzeilige Kommentare:** Stehen zwischen ''/*'' und ''*/''[cite: 17].

==== Datentypen ====

^ Datentyp ^ Beschreibung ^ Beispiel ^
| **Undefined** | Variable wurde deklariert, hat aber noch keinen Wert[cite: 17] | ''var foo;''[cite: 17] |
| **Null** | Bewusste Zuweisung von keinem Wert[cite: 17] | ''var foo = null;''[cite: 17] |
| **Zahl (Number)** | Numerische Werte für Berechnungen[cite: 17] | ''var foo = 5;''[cite: 17] |
| **String** | Textketten in einfachen oder doppelten Anführungszeichen[cite: 17] | ''var foo = "Text";''[cite: 17] |
| **Boolean** | Wahrheitswerte für Logikentscheidungen[cite: 17] | ''var foo = true;''[cite: 17] |
| **Array** | Indizierte Gruppe mehrerer Werte (Start bei Index 0)[cite: 17] | ''var foo = [5, "Text"];''[cite: 17] |

<code javascript>
// Deklaration und Datenzugriff
var fruits = ["Apfel", "Birne", "Kirsche"];
alert(fruits[0]); // Gibt "Apfel" aus
</code>

===== 3. Operatoren & Kontrollstrukturen =====

==== Vergleichs- & Mathematische Operatoren ====

  * **Vergleich:** ''=='' (Gleich)[cite: 17], ''==='' (Identisch: Wert & Typ gleich)[cite: 17], ''!=' ' (Nicht gleich)[cite: 17], ''!=='' (Nicht identisch)[cite: 17], ''>'' / ''<'' (Größer/Kleiner als)[cite: 17].
  * **Mathematik:** ''+'' (Addieren)[cite: 17], ''-'' (Subtrahieren)[cite: 17], ''*'' (Multiplizieren)[cite: 17], ''/'' (Dividieren)[cite: 17], ''++'' (Inkrement um 1)[cite: 17], ''--'' (Dekrement um 1)[cite: 17].

==== Bedingungen (if / else) ====

<code javascript>
var status = "aktiv";

if (status === "aktiv") {
  alert("Zugriff gewährt.");
} else {
  alert("Zugriff verweigert.");
}
</code>

==== Schleifen (Loops) ====

Schleifen führen Anweisungen wiederholt aus, solange eine Bedingung wahr ist[cite: 17].

<code javascript>
// Zählschleife von 0 bis 2
for (var i = 0; i <= 2; i++) {
  alert("Durchlauf Nummer: " + i);
}
</code>

===== 4. Funktionen & Variablen-Scope =====

Eine Funktion führt definierte Aufgaben aus, sobald sie aufgerufen wird[cite: 17]. Sie kann Argumente entgegennehmen und Ergebnisse zurückliefern[cite: 17].

==== Funktionsdefinition ====

<code javascript>
// Benutzerdefinierte Funktion mit Parametern
function addieren(a, b) {
  return a + b;
}

var summe = addieren(3, 4); // Ergebnis: 7
</code>

==== Sichtbarkeitsbereich (Scope) ====

  * **Lokaler Scope:** Variablen, die innerhalb einer Funktion mit ''var'' deklariert werden, sind nur dort gültig[cite: 17].
  * **Globaler Scope:** Außerhalb von Funktionen deklarierte Variablen (oder Variablen innerhalb einer Funktion ohne ''var'') sind im gesamten Skript verfügbar[cite: 17].

===== 5. Browser-Objekte & Events =====

==== Window-Objekt ====

Das ''window''-Objekt ermöglicht den Zugriff auf Browserfenster-Eigenschaften und -Methoden[cite: 17]:

  * **alert("Text"):** Zeigt einen Hinweisdialog an[cite: 17].
  * **confirm("Frage"):** Öffnet Bestätigungsdialog mit OK/Abbrechen[cite: 17].
  * **location:** Ermöglicht Lese- und Schreibzugriff auf die Adressleiste[cite: 17].
  * **history:** Enthält die aufgerufenen URLs der aktuellen Sitzung[cite: 17].

==== Ereignisbehandler (Event Handlers) ====

Events reagieren auf Benutzerinteraktionen wie ''onclick'' (Klick)[cite: 17], ''onmouseover'' (Maus darüber bewegen)[cite: 17] oder ''onload'' (Seite geladen)[cite: 17].

<code javascript>
// 1. Zuweisung als Eigenschaft
window.onclick = function() {
  alert("Klick im Fenster erkannt!");
};

// 2. Verwendung von addEventListener()
window.addEventListener("click", function() {
  alert("Klick via EventListener!");
});
</code>