Grundlagen Client- und serverseitige Skriptsprachen

Clientseitige Skriptsprachen und serverseitige Skriptsprachen haben unterschiedliche Aufgaben und arbeiten an ver-
schiedenen Stellen im Web. Die folgende Erklärung zeigt den Unterschied, indem auf JavaScript (clientseitig) und PHP
(serverseitig) eingegangen wird.

1. Clientseitige Skriptsprachen
Diese Skripte werden direkt im Browser des Benutzers ausgeführt. Ein typisches Beispiel ist JavaScript. Die Skripte
werden heruntergeladen und auf dem Gerät des Benutzers ausgeführt, was bedeutet, dass sie keine Serverinterak-
tionen benötigen, um bestimmte Aufgaben zu erfüllen.

JavaScript (Clientseitige Sprache)

Funktion
JavaScript wird hauptsächlich verwendet, um Webseiten interaktiv zu gestalten. Es kann z.B. Formulareingaben
überprüfen, Animationen erstellen, Inhalte dynamisch ändern oder Benutzerinteraktionen ermöglichen.

Funktionsweise
Der Browser lädt das JavaScript zusammen mit HTML und CSS herunter und führt es direkt aus. Das bedeutet,
dass der Benutzer sofort Ergebnisse sieht, ohne die Seite neu laden zu müssen.

Vorteile
Schnell
Da das Skript auf dem Gerät des Benutzers läuft, können Änderungen sofort sichtbar sein, ohne den Server zu
kontaktieren.

Interaktivität
Es ermöglicht dynamische Änderungen auf der Webseite, wie das Anzeigen von Pop-ups oder das Aktualisieren
von Inhalten, ohne die gesamte Seite neu zu laden.

Breite Unterstützung
Alle modernen Browser unterstützen JavaScript.

2. Serverseitige Skriptsprachen
Diese Skripte werden auf einem Webserver ausgeführt und der Benutzer sieht nur das Ergebnis. Der Browser hat
keinen direkten Zugang zu diesen Skripten. Ein typisches Beispiel ist PHP.

PHP (Serverseitige Sprache)

Funktion
PHP wird verwendet, um dynamische Webseiten zu generieren, die z.B. Daten aus einer Datenbank anzeigen. Es
kann auch Daten verarbeiten, die der Benutzer über Formulare absendet.

Funktionsweise
Wenn der Benutzer eine Seite aufruft, führt der Webserver das PHP-Skript aus, erstellt HTML und schickt das fertige
Ergebnis (HTML-Seite) an den Browser des Benutzers. Der Benutzer sieht nur das Endergebnis und hat keinen Zu-
gang zum PHP-Code.

Vorteile
Sicherheit
Da der PHP-Code auf dem Server ausgeführt wird, bleibt er für den Benutzer unsichtbar. Sensible Informationen
wie Datenbankzugänge können sicher verwaltet werden.

Verarbeitung großer Datenmengen

EPHP kann Daten aus Datenbanken laden, verarbeiten und dynamische Inhalte bereitstellen.

Plattformunabhängigkeit
PHP läuft auf fast allen Servern und ist gut mit Datenbanken wie MySQL kompatibel.
 Grundlagen Client- und serverseitige Skriptsprachen

Zusammenfassung

Clientseitige Skripte (wie JavaScript) werden im Browser des Benutzers ausgeführt. Sie ermöglichen eine schnelle,
interaktive Benutzererfahrung ohne die Notwendigkeit, mit dem Server zu kommunizieren.

Serverseitige Skripte (wie PHP) werden auf dem Webserver ausgeführt. Sie sind nützlich, um dynamische Inhalte zu
erstellen, Daten zu verarbeiten und die Sicherheit sensibler Informationen zu gewährleisten.

Beispiel für den Unterschied

• JavaScript könnte auf einer Webseite verwendet werden, um eine Fehlermeldung anzuzeigen, wenn der Benut-
zer vergisst, ein Pflichtfeld auszufüllen.

• PHP könnte verwendet werden, um die eingegebenen Daten zu verarbeiten und in einer Datenbank zu speichern.
 Grundlagen JavaScript Einführung

Variablen – Speicher für Daten

Variablen sind Container, die Werte speichern können.

Es gibt verschiedene Arten von Werten, z. B.:

• Strings (Texte)
• Zahlen (Ganzzahlen und Dezimalzahlen)

Deklaration einer Variable:

js

let userName = "Max"; // Ein String (Text)

let age = 16; // Eine Ganzzahl (Integer)
let price = 4.99; // Eine Dezimalzahl (Float)

• "Max" ist ein String (Text) – erkennt man an den Anführungszeichen.

• 16 ist ein Integer (Ganzzahl).
• 4.99 ist ein Float (Dezimalzahl).

Die Konsole – Ergebnisse anzeigen

Die Konsole ist ein Bereich im Browser, in dem wir Ausgaben testen können.
Man öffnet sie mit F12 (im Browser unter "Konsole").

Mit console.log() geben wir Werte aus:

js

console.log("Hello, world!"); // Gibt den Text aus

console.log(10 + 5); // Gibt die Summe 15 aus
console.log("Age: " + age); // Verbindet Text mit Variable
 Grundlagen JavaScript Einführung

Funktionen – Code wiederverwenden

Eine Funktion ist ein Codeblock, den wir mehrfach ausführen können.
So definieren und rufen wir eine Funktion auf:

js

function greet() {
console.log("Welcome!");
}

greet(); // Ruft die Funktion auf und gibt "Welcome!" aus.

Mit Parametern können wir Werte übergeben:

js

function showAge(userName, age) {

console.log(userName + " is " + age + " years old.");
}

showAge("Max", 16); // Gibt aus: Max is 16 years old.

 Grundlagen JavaScript Einführung

HTML-Elemente: <label>, <input> und <button>

1. Was ist ein Formular?

Ein Formular ist ein Bereich auf einer Webseite, in den der Benutzer Daten eingeben kann, z. B. seinen Namen oder
eine E-Mail-Adresse.

Damit ein Formular funktioniert, brauchen wir drei wichtige HTML-Elemente:

• <label> – Beschriftung für ein Eingabefeld

• <input> – Eingabefeld für den Benutzer
• <button> – Knopf, um eine Aktion auszulösen

2. Erklärung der Elemente

<label> – Beschriftung für ein Eingabefeld

Das <label>-Element hilft dabei, das Eingabefeld verständlicher zu machen. Es beschreibt, was der Benutzer
eingeben soll.

html

<label for="userName">Enter your name:</label>

Das for="userName" zeigt, dass dieses Label zu einem Eingabefeld mit der ID "userName" gehört.

<input> – Eingabefeld für den Benutzer

Das <input>-Element ermöglicht es dem Benutzer, eine Eingabe zu machen.

html

<input type="text" id="userName">

• type="text" bedeutet, dass hier Text eingegeben werden kann.

• id="userName" gibt diesem Eingabefeld eine eindeutige Kennung, damit wir es später mit JavaScript anspre-
chen können.

<button> – Knopf für Aktionen

Der <button>-Tag erzeugt einen Knopf, den der Benutzer anklicken kann.

html

<button>Submit</button>

• Ein Klick auf diesen Button löst eine Aktion aus.

 Grundlagen JavaScript Einführung

3. Verbindung mit JavaScript: document.getElementById()

Damit wir mit JavaScript auf das Eingabefeld zugreifen können, nutzen wir die Funktion
document.getElementById().

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Form</title>
</head>
<body>
<label for="userName">Enter your name:</label>
<input type="text" id="userName">
<button onclick="showName()">Submit</button>

<script>
function showName() {
// Holt den eingegebenen Text
let name = document.getElementById("userName").value;

// Gibt den Text in der Konsole aus
console.log("Hello, " + name + "!");
}
</script>
</body>
</html>

• Der Benutzer gibt seinen Namen in das <input>-Feld ein.

• Er klickt auf den <button>.
• Die Funktion showName() wird aufgerufen.
• document.getElementById("userName").value holt den eingegebenen Text.
• console.log("Hello, " + name + "!") gibt die Eingabe in der Konsole aus.