JavaScript

Erste Schritte – JavaScript: Basiswissen

Wenn du PHP lernen und dynamische Webanwendungen erstellen möchtest,
solltest du zumindest die Grundlagen von JavaScript kennen. Während PHP auf dem Server
ausgeführt wird, läuft JavaScript im Browser des Besuchers und erweitert die
interaktiven Möglichkeiten einer Webseite. So kannst du ohne erneutes Laden der Seite
Formulare validieren, Elemente animieren oder dynamischen Content einblenden.

Was ist JavaScript?

JavaScript ist eine clientseitige Skriptsprache, die von allen gängigen
Browsern verstanden wird. Ursprünglich wurde sie konzipiert, um Webseiten interaktiver
zu machen. Inzwischen ist sie sehr vielseitig und kann sogar auf Servern ausgeführt werden
(Node.js). Für traditionelle Webprojekte ist JavaScript jedoch hauptsächlich im Frontend
im Einsatz, um Layouts zu verändern, Eingaben zu prüfen oder auf Nutzeraktionen zu reagieren.

Einbinden von JavaScript

Um JavaScript in deine Seite zu integrieren, kannst du das Skript entweder direkt
im HTML unterbringen (inline) oder als separate Datei einbinden: 

<!-- Im <head> oder vor </body> -->
<script src="app.js"></script>

Es empfiehlt sich oft, das Skript am Ende des <body>-Tags einzubinden,
damit zuerst der restliche Inhalt geladen wird und die Seite schneller reagiert.

Grundsyntax und Variablen

JavaScript kennt verschiedene Möglichkeiten, Variablen zu deklarieren:
let, const und var. Heutzutage werden
let (für veränderliche Werte) und const (für unveränderliche Werte)
bevorzugt, da sie einen klar definierten Gültigkeitsbereich haben. 

// app.js

// Eine veränderliche Variable
let username = "Max";

// Eine Konstante
const PI = 3.14159;

// Eine ältere Variante (var) solltest du nur verstehen, nicht aktiv nutzen
var oldStyle = "Hallo Welt!";

// Datentypen erkennen
console.log(typeof username); // "string"
console.log(typeof PI);       // "number"

Datentypen und Operatoren

JavaScript unterstützt Zahlen, Strings, Booleans, Arrays, Objekte und mehr.
Operatoren funktionieren ähnlich wie in anderen Programmiersprachen:
+ für Addition (oder String-Konkatenation), – für Subtraktion, ++ für Inkrement, usw. 

let zahl = 5;
zahl += 3;  // Kurzform für zahl = zahl + 3
console.log(zahl); // 8

let greeting = "Hallo";
greeting += " Welt!";
console.log(greeting); // "Hallo Welt!"

Kontrollstrukturen (if, switch, Schleifen)

Mit Kontrollstrukturen steuerst du den Programmfluss: 

// if / else
let age = 20;
if (age >= 18) {
    console.log("Du bist volljährig.");
} else {
    console.log("Leider noch nicht 18.");
}

// switch
let day = "Montag";
switch(day) {
  case "Montag":
    console.log("Wochenbeginn");
    break;
  case "Samstag":
  case "Sonntag":
    console.log("Wochenende!");
    break;
  default:
    console.log("Ein ganz normaler Tag.");
}

// for-Schleife
for (let i = 0; i < 5; i++) {
    console.log("Zähler:", i);
}

// while-Schleife
let n = 3;
while (n > 0) {
    console.log("n ist jetzt:", n);
    n--;
}

Funktionen

Funktionen fassen wiederverwendbaren Code zusammen. Du kannst sie als Deklaration oder
als anonyme Funktion (Arrow Function) definieren. 

// Funktionsdeklaration
function sum(a, b) {
    return a + b;
}
console.log(sum(2, 3)); // 5

// Arrow Function
const multiply = (x, y) => {
    return x * y;
};
console.log(multiply(4, 5)); // 20

Mit diesen Grundlagen strukturierst du deinen Code und vermeidest unnötige Wiederholungen.

DOM-Manipulation

Ein Hauptgrund, weshalb JavaScript so wertvoll ist: du kannst
den sogenannten Document Object Model (DOM) manipulieren,
um Inhalte und Layouts dynamisch zu ändern. 

// index.html (Ausschnitt)
<div id="info">Ursprünglicher Text</div>
<button onclick="changeText()">Klick mich</button>

<script>
function changeText() {
    let div = document.getElementById("info");
    div.innerHTML = "Text wurde geändert!";
}
</script>

Hier ruft ein Button-Klick changeText() auf, und JavaScript ändert
den Inhalt des <div> mit der ID „info“.

Ereignisse (Events)

Benutzeraktionen (Klicks, Tastendrücke, Mausbewegungen) lösen Events aus,
auf die du reagieren kannst: 

// index.html
<input type="text" id="username" onkeyup="showValue()">
<div id="output"></div>

<script>
function showValue() {
    let text = document.getElementById("username").value;
    document.getElementById("output").textContent = text;
}
</script>

Sobald der Nutzer eine Taste im Eingabefeld drückt, rufst du showValue() auf,
um den Inhalt in output anzuzeigen.

Kleine Übung: Formular validieren

// index.html
<form onsubmit="return validateForm()">
    <label for="email">E-Mail:</label>
    <input type="text" id="email" name="email" />
    <button type="submit">Abschicken</button>
</form>

<script>
function validateForm() {
    let emailValue = document.getElementById("email").value;
    if (!emailValue.includes("@")) {
        alert("Ungültige E-Mail-Adresse!");
        return false; // Verhindert das Abschicken
    }
    return true; // Formular darf abgeschickt werden
}
</script>

Das Skript überprüft simpel, ob ein @-Zeichen enthalten ist. Ist dies nicht der Fall, gibt es
eine Warnung. So sparst du dir einen erneuten Seitenreload oder Servercheck,
wenn offensichtlich ein Fehler vorliegt.

Tipps & Best Practices

  • Struktur: Vermeide Inline-Eventhandler (z. B. onclick).
    Besser ist addEventListener in deinen Skripten.
  • Konstante vs. Variable: Nutze const, wo sich eine
    Variable nicht mehr ändert, um Fehler zu vermeiden.
  • Debugging: Mit console.log() und den DevTools (F12 im Browser)
    findest du Bugs schneller.
  • Libraries & Frameworks: Sobald du mehr Erfahrung hast,
    kannst du auf Tools wie jQuery, React, Vue.js oder Angular setzen,
    um komplexere Anwendungen zu realisieren.

Fazit

JavaScript ist die Sprache des Browsers und ergänzt PHP perfekt:
PHP kümmert sich um die serverseitige Verarbeitung (Datenbanken, Sessions, Sicherheit),
während JavaScript dem Benutzer ein dynamisches Erlebnis liefert,
indem Formulare ohne Reload verarbeitet, Inhalte aktualisiert oder Animationen gesteuert werden.
Mit den vorgestellten Grundlagen (Variablen, Funktionen, DOM-Manipulation, Events)
hast du genug Wissen, um erste interaktive Features in deine Webseiten zu integrieren.
Von hier aus kannst du tiefer eintauchen (z. B. AJAX, Fetch API, ES6+ Features)
und dein JavaScript-Wissen Schritt für Schritt erweitern.