Stefan Franke
In dieser Lektion lernen Sie die Grundlagen zur Nutzung von JavaScript innerhalb von Webseiten kennen. Ziel ist es, dass Sie in der Lage sind, eine erste dynamische Webseite unter Einbezug von JavaScript zu erstellen.
HTML und CSS ermöglichen die Beschreibung statischer Webseiten auf Grundlage von Inhalten und deren Struktur sowie Beschreibungen zu deren Darstellung. Die Integration von dynamischen Elementen bedarf der Beschreibung der spezifischen dynamischen Inhalte und deren Verhalten in Form von Skripten in JavaScript. Solche Skripte können dann im Fall des Eintreffens eines bestimmten Ereignisses (z. B. ein Klick auf einen Inhalt) aktiviert und aufgerufen werden. Die Skripte selbst können dann wiederum Inhalte und Strukturen der Webseite sowie deren Darstellung verändern oder beeinflussen. Dazu müssen HTML-, CSS- und JavaScript-Inhalte miteinander verknüpft werden.
JavaScript-Inhalte funktionieren daher zunächst erst einmal nicht ohne eine Webseite, in die sie eingebunden sind. Wir werden später kurz auf andere Verwendungen von JavaScript in anderen Kontexten und unabhängig von Webseiten eingehen.
JavaScript-Code kann mit dem <script>-Tag in eine HTML-Seite eingebunden werden. Die einfachste Möglichkeit ist die direkte Einbindung von JavaScript-Anweisungen in die HTML-Datei:
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript verwenden</title>
<script>
alert("JavaScript im Header!");
</script>
</head>
<body>
<h1>JavaScript</h1>
<script>
alert("JavaScript nach der Ueberschrift");
</script>
<p>Schritt 1: JavaScript-Code einbinden.</p>
<script>
alert("JavaScript am Dokumentende.");
</script>
</body>
</html><script>-Tags können im HTML-Code mehrfach und an verschiedenen Stellen eingebunden werden. Entsprechend der Verarbeitung von HTML-Dokumenten von oben nach unten kommen auch die jeweiligen JavaScript-Elemente in dieser Reihenfolge zur Ausführung.
In der Praxis wird JavaScript-Code zu weiten Teilen in eine externe Datei ausgelagert:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript verwenden</title>
<script src="scripts/example2.js"></script>
</head>
<body>
<h1>JavaScript</h1>
<p>JavaScript code included from external file</p>
</body>
</html>Die zugehörige JavaScript-Datei (scripts/example2.js):
alert("JavaScript successfully included");Wie in vielen anderen Programmiersprachen stellen Anweisungen ein grundlegendes Element der Sprache dar. Einzelne Anweisungen werden in JavaScript mit einem Semikolon (;) voneinander getrennt.
JavaScript unterstützt verschiedene Formen von Anweisungen. Eine einfache Form stellen Zuweisungen dar. Anders als in Python müssen Variablen vor der ersten Verwendung deklariert werden. Verwenden Sie let für veränderbare Werte und const für Konstanten. (var ist veraltet und sollte nicht mehr verwendet werden.)
const name = "EIS-Projekt";
console.log("Willkommen zum " + name + "!");
alert("Willkommen zum " + name + "!");console.log() gibt Text in der Browserkonsole aus (F12 → Console). Das ist die bevorzugte Methode zum Testen und Debuggen – alert() unterbricht den Programmfluss und sollte später vermieden werden.
JavaScript verwendet dynamische Typisierung – der Typ der Variable ergibt sich dynamisch anhand des zugewiesenen Werts.
Auf dieser Grundlage sind auch Berechnungen möglich:
const unitPrice = 2.20;
const amount = 4;
const totalPrice = unitPrice * amount;
console.log(`Gesamtpreis: ${totalPrice} Euro`);
alert(`Gesamtpreis: ${totalPrice} Euro`);Die Schreibweise `Gesamtpreis: ${totalPrice} Euro` verwendet Template Literals (Backtick-Zeichen `). Innerhalb von ${...} können Variablen und Ausdrücke direkt eingesetzt werden – das ist übersichtlicher als das Verketten mit +.
Verzweigungen steuern den Programmfluss. Die wichtigste Form ist die if-Anweisung:
if (condition) {
// wird ausgeführt, wenn die Bedingung wahr ist
}
else {
// wird ausgeführt, wenn die Bedingung falsch ist
}Beispiel:
const input = prompt("Geben Sie eine Zahl ein:");
const number = Number(input);
if (number >= 0) {
console.log("Die Zahl ist positiv!");
} else {
console.log("Die Zahl ist negativ!");
}Hinweis: Die Funktion prompt wird hier zur interaktiven Eingabe verwendet. Wir werden später bessere Möglichkeiten kennenlernen, solche Eingaben direkt über Formularelemente auf der Webseite zu ermöglichen.
Eine JavaScript-Funktion fasst Anweisungen zu einem Block zusammen, der beliebig oft aufgerufen werden kann. Funktionen dienen der Strukturierung, Modularisierung und Wiederverwendung von Code.
function sumOfTwoValues(a, b) {
const result = a + b;
return result;
}Funktionsnamen beginnen in JavaScript konventionell mit einem Kleinbuchstaben und verwenden bei zusammengesetzten Begriffen die CamelCase-Konvention. Parameter werden innerhalb der Klammern angegeben. Die Klammern müssen auch dann aufgeführt werden, wenn die Funktion keine Parameter hat.
Verwendung der Funktion:
const x = 2;
const y = 5;
// Zwei Literale addieren
let sum = sumOfTwoValues(1, 4.5);
console.log(sum); // 5.5
// Zwei Variablen addieren
sum = sumOfTwoValues(x, y);
console.log(sum); // 7Erstellen Sie für jede Aufgabe eine eigene HTML-Datei in Ihrem Website-Projekt (z. B. notenrechner.html). Lagern Sie den JavaScript-Code jeweils in eine eigene .js-Datei im Ordner js/ aus.
prompt() abfragt und die zugehörige Note per alert() ausgibt. Verwenden Sie folgende Skala:
berechneNote(punkte) aus, die die Note als Text zurückgibt.console.log() und alert() aus, z. B.: `72 von 90 Punkten (80%) = gut`..js-Datei aus.prompt() ab und geben Sie per alert() aus:
text.length)text.split(" ").length)text.toUpperCase())analyseText(text), die alle drei Werte als formatierten String zurückgibt. Nutzen Sie Template Literals.Git-Tipp: Vergesst nicht, eure neuen JavaScript-Dateien zu committen:
git add .→git commit -m "JS-Uebungen hinzugefuegt"→git push