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].

<!-- Eingebettetes Skript -->
<script>
  // JavaScript-Code
</script>
 
<!-- Externes Skript -->
<script src="script.js"></script>

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]

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

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)

var status = "aktiv";
 
if (status === "aktiv") {
  alert("Zugriff gewährt.");
} else {
  alert("Zugriff verweigert.");
}

Schleifen (Loops)

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

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

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

// Benutzerdefinierte Funktion mit Parametern
function addieren(a, b) {
  return a + b;
}
 
var summe = addieren(3, 4); // Ergebnis: 7

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].

// 1. Zuweisung als Eigenschaft
window.onclick = function() {
  alert("Klick im Fenster erkannt!");
};
 
// 2. Verwendung von addEventListener()
window.addEventListener("click", function() {
  alert("Klick via EventListener!");
});