JavaScript ist eine Programmiersprache, die direkt im Browser des Besuchers läuft und Webseiten interaktiv macht. Während HTML die Struktur vorgibt und CSS für das Design sorgt, bringt JavaScript die Seite zum Leben. Mit JavaScript kannst du auf Benutzeraktionen reagieren – etwa wenn jemand auf einen Button klickt, über ein Element fährt oder etwas in ein Formular eingibt. Die Sprache ermöglicht es, Inhalte dynamisch zu ändern, ohne die ganze Seite neu laden zu müssen. JavaScript ist heute aus dem Web nicht mehr wegzudenken und wird von allen modernen Browsern unterstützt.
Wofür wird JavaScript gebraucht?
JavaScript macht Webseiten interaktiv und benutzerfreundlich. Hier einige typische Einsatzbereiche:
Im Gegensatz zu PHP, das auf dem Server läuft, wird JavaScript im Browser ausgeführt. Das macht die Seite schneller und reaktionsfreudiger, da nicht bei jeder Aktion eine Anfrage an den Server geschickt werden muss.
Erstes Beispiel: Button mit Klick-Funktion
In diesem Beispiel erstellen wir einen Button, der beim Klicken eine Nachricht ausgibt und die Farbe eines Textes ändert.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>JavaScript Beispiel - Button</title>
<style>
.container {
background-color: #f0f0f0;
padding: 20px;
margin: 20px;
border-radius: 5px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h2 id="meinText">Klicke auf den Button!</h2>
<button onclick="textAendern()">Klick mich!</button>
</div>
<script>
function textAendern() {
// Text des h2-Elements ändern
document.getElementById("meinText").innerHTML = "Du hast geklickt!";
// Farbe des Textes ändern
document.getElementById("meinText").style.color = "red";
// Eine Nachricht ausgeben
alert("Hallo! Der Text wurde geändert.");
}
</script>
</body>
</html>
In diesem Beispiel passieren mehrere Dinge: Wir definieren eine Funktion namens textAendern(), die ausgeführt wird, sobald der Button geklickt wird. Die Funktion greift auf das Element mit der ID "meinText" zu und ändert sowohl den Textinhalt als auch die Textfarbe. Zusätzlich erscheint ein Alert-Fenster mit einer Nachricht.
JavaScript-Code kann entweder direkt in der HTML-Datei innerhalb von <script>-Tags stehen oder in einer separaten .js-Datei ausgelagert werden. Die Funktion document.getElementById() ist eine der wichtigsten Methoden in JavaScript – sie ermöglicht den Zugriff auf beliebige HTML-Elemente über deren ID.
Zweites Beispiel: Eingabefeld und Begrüßung
Hier erstellen wir ein Eingabefeld, in das der Besucher seinen Namen eintippen kann. Nach dem Klick auf den Button erscheint eine persönliche Begrüßung.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>JavaScript Beispiel - Eingabe</title>
<style>
.container {
background-color: #e8f4f8;
padding: 30px;
margin: 20px;
border-radius: 8px;
max-width: 500px;
}
input {
padding: 10px;
font-size: 16px;
border: 2px solid #4CAF50;
border-radius: 4px;
margin-right: 10px;
}
button {
background-color: #008CBA;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
#ausgabe {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
color: #006600;
}
</style>
</head>
<body>
<div class="container">
<h2>Wie heißt du?</h2>
<input type="text" id="nameEingabe" placeholder="Dein Name">
<button onclick="begruessen()">Begrüßen</button>
<p id="ausgabe"></p>
</div>
<script>
function begruessen() {
// Wert aus dem Eingabefeld holen
var name = document.getElementById("nameEingabe").value;
// Prüfen, ob etwas eingegeben wurde
if (name === "") {
alert("Bitte gib deinen Namen ein!");
} else {
// Begrüßung anzeigen
document.getElementById("ausgabe").innerHTML = "Hallo " + name + ", willkommen auf meiner Seite!";
}
}
</script>
</body>
</html>
Dieses Beispiel zeigt, wie JavaScript mit Benutzereingaben umgeht. Die Funktion begruessen() liest den Wert aus dem Eingabefeld mit .value aus und speichert ihn in der Variable name. Mit einer if-Bedingung prüfen wir, ob das Feld leer ist – falls ja, erscheint eine Warnung. Wurde ein Name eingegeben, wird eine personalisierte Begrüßung im <p>-Element mit der ID "ausgabe" angezeigt.
Variablen in JavaScript werden mit var, let oder const deklariert. Der Operator === prüft auf Gleichheit. Mit dem Plus-Zeichen + können Texte und Variablen miteinander verknüpft werden.
Mit diesen Grundlagen kannst du bereits einfache interaktive Elemente auf deiner Webseite einbauen. JavaScript bietet noch viel mehr Möglichkeiten, aber diese Beispiele zeigen das Prinzip: Der Browser reagiert auf Aktionen des Besuchers und passt die Seite dynamisch an – ohne dass sie neu geladen werden muss.