Wolfgang Mueller
In dieser Lektion lernen Sie, wie eine Webseite durch JavaScript-Code verändert werden kann. Zielsetzung ist es dabei, dass Ergebnisse von Berechnungen von JavaScript-Code direkt auf einer Webseite dargestellt werden können (siehe Abbildung 1). Darüber hinaus sind aber über die Mechanismen, die Sie hier kennenlernen werden, auch weitere Dinge möglich:
Mit HTML werden Webseiten grundsätzlich in einer hierarchischen Struktur beschrieben. Man kann diese Struktur auch als eine Baumstruktur darstellen.
|
HTML
|
 |
Jedes Element einer HTML-Seite wird dabei durch einen Knoten im Baum repräsentiert. Knoten weisen dabei immer einen Inhalt und Attribute auf. Letztere steuern insbeonsdere die Darstellung des Elements.
Von JavaScript aus kann auf diesen Baum direkt zugegriffen werden. Es können dabei Knoteninhalte asugelesen und verändert werden. Zudem können auch Knoten
hinzugefügt oder gelöscht werden. Für diesen Zweck wird vom jeweiligen Browser bei Darstellung einer HTML-Seite ein Objekt bereitgestellt, das document-Objekt, welches das aktuelle HTML-Dokument in
Form einer Baumstruktur repräsentiert. Eine detaillierte Beschreibung dieses document-Objekts ist hier zu finden.
Eine wesentliche Funktionalität, die über das document-Objekt verfügbar ist, ist die Suche und der Zugriff auf bestimmte Knoten im Baum. Eine häufig verwendete Vorgehensweise
ist die Vergabe einer eindeutigen ID an einen Knoten, den man manipulieren möchte, im HTML-Code, und der Zugriff auf diesen Knoten über das document-Objekt mittels
der vergebenen ID. Das folgende Beispiel illustriert diese Vorgehensweise. Dabei wird im zugehörigen HTML-Code einem <p>-Knoten die eindeutige ID output zugewiesen.
<html>
<head>
<meta charset="UTF-8">
<title>Dynamic HTML Elements with JavaScript</title>
<script src="scripts/ex-p-changer.js">
</script>
</head>
<body>
<h1>Dynamic HTML Elements with JavaScript</h1>
<p>The static part of the HTML page contains just a single paragraph content.
</p>
<p ID="output">
</p>
</body>
</html>
Die dazugehörige JavaScript-Datei sieht wie folgt aus:
var element = document.getElementById('output');
element.innerHTML =
"This paragraph was added by JavaScript.";
Ein wichtiges Element auf dem Weg zu vollständig interaktiven Formularen und Berechnungen innerhalb von Webseiten stellt das Feststellen und die Verarbeitung von Nutzereingaben sowie anderer Nutzeraktivitäten dar. Hierzu gehören etwa:
In JavaScript werden solche Ereignisse als Eventsbeteichnet. JavaScript stellt intern Mechanismen zum Erkennen solchen Events bereit und bietet zudem Möglichkeiten zu deren Behandlung (Event Handling)an. Eine vollständige Liste der Events, die erkannt und behandelt werden können, finden Sie etwa auf der selfhtml-Seite oder auch auf den Seiten von Mozilla.
Eine ausführliche Eimführung in das Event Handling können Sie auf den Seiten von selfhtml finden:
Grundlage für die Benachrichtigung über Events und deren Behandlung stellt die Bereitstellung einer JavaScript-Funktion dar, die registriert werden muss und die dan im Fall des Eintreffens des jeweiligen Events vom System aufgerufen wird. In dieser Funktion können dann spezifische Schritte festgeletgt werden, die aufgrund des Ereignisses zur Anwendung kommen sollen.
Das folgende Beispiel illustriert die Definition eines Event Handlers und dessen Registrierung. In dem Beispiel wird ein spezielles HTML-Element für Interaktionen eingesetzt, ein Button. Für diesen Button wird dann ein Event-Handler registriert, der im Fall eines Klicks auf diesen aufgerufen werden soll.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Button with JavaScript</title>
<script src="scripts/example-button.js"></script>
</head>
<body>
<h1>Dynamic HTML contents with JavaScript</h1>
<p>Press the button to add dynamic content from the linked JavaScriot script: </p>
<button type="button" id="button1" onclick="handleButtonClickAndAddContent();">Go!</button>
<p id="output"></p>
</body>
</html>
Zu dieser HTML-Datei gehört dann eine gesonderte JavaScript-Datei, in diesem Fall mit dem Namen "example-button.js" im Unterordner "scripts":
function handleButtonClickAndAddContent() {
var element = document.getElementById('output');
element.innerHTML =
"This paragraph was added by the handleButtonClickAndAddContent-function!";
}
HTML stellt neben Buttons weitere spezielle Elemente für Nutzereingaben zur Verfügung. Diese sind inner halb von Formularen (umgesetzt mit dem form-Element) mit dem HTML-Element input
verfügbar. Formulare diesen dabei die Zusammenfassung mehrerer Eingabeelemente, deren Werte nach dem Ausfüllen und Absenden des Formulatrs dann weiter verarbeitetet werden. Einzelne Input-Eingabelemente können dabei über eine
Parametrisierung bzgl. der Eingabeform angepasst werden. So können beispielsweise Texteingabefelder, Buttons, Slider und Checkboxen umgesetzt werden. Eine vollständigere Darstellung ist aufg den
Seiten von selfhtml zu finden.
Das folgende Beispiel zeigt die Umsetzunng eines Formulars mit zugehörigem Skript zur Verarbeitung der eingegebenen Werte. Das Skript muss in diesem
Fall das Eingabeelement oder die Eingabeelemente des Formulars identifizieren und deren Werte extrahieren. Diese geschieht mit dem .value-Accessor. Entsprechend
extrahierte Werte können dann weiter verarbeitet werden.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Using Forms with JavaScript</title>
<script src="scripts/example-simple-form.js"></script>
</head>
<body>
<h1>A Simple Form with JavaScript</h1>
<form>
<ol><li>
<label for="firstname">>Please enter your firstname:</label>
<input id="firstname" name="firstname>>
</liol></ol>
</form>
<p id="output"></p>
</body>
</html>
Die JavaScript-Datei sieht hierbei wie folgt aus:
function handleForm() {
var inputElement = document.getElementById("firstname");
var outputElement = document.getElementById("output");
outputElement.innerHTML = "Hello " + inputElement.value + "!";
}
Die vorherigen Beispiele zeigen die Registrierung eines Event Handlers und das Zusammenspiel dieser Funktion mit dem HTML-Code. In diesen konkreten Fällen ist die Event-Handler-Funktion speziell auf die Aufgabe der Ausgabe Veränderung eines bestimmten HTML-Paragraphen mit Bezeichnung output zugeschnittem. Würden weitere interaktive Elemente in die Seite eingebaut, müsste bei dieser Vorgehensweise für jedes dieser Elemente und für jede Ereignisbehandlung ein weitere spezifische Event-Handler-Funktion geschrieben werden. Es gibt jedoch Situationen, in der sich die Vorgehensweisen bei der Ereignisbehandlung sehr ähneln. Beispiele hierfür sind:
Um die Viederverwendung von Event-Handler-Funktionen zu ermöglichen ist es aus Sicht der Funktion grundsätzlich erst einmal wichtig zu erfahren, von
welchem HTML-Element das jeweilige Ereignis ausgelöst wurde. Unter anderem hierzu ist es möglich, die Event-Handler-Funktion um einen Parameter zu ergänzen.
Diesen hatten wir bislang bei unseren Beispielen ignoriert. Vom System wird ein solcher Parameter, der weitere Kontextinformtionen zum ausgelösten Ereignis enthält,
mit übergeben, wenn dies bei der Registrierung mittels onclick entsprechend angegeben wird. Dieser kann insbesondere dazu genutzt werden, um das HTML-Element, das das Ereignis ausgelöst hat, zu identifizieren. Dies wird
im folgenden Beispiel genutzt, um auf Events von 2 Buttons mit einem einzigen Event-Handler adequat reagieren zu können.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Button with JavaScript</title>
<script src="scripts/example-2-button.js"></script>
</head>
<body>
<h1>Dynamic HTML contents with JavaScript</h1>
<p>Press the button to add dynamic content from the linked JavaScript script: </p>
<button type="button" id="button1" onclick="handleButtonClickAndAddContent(event);">Button 1</button>
<button type="button" id="button2" onclick="handleButtonClickAndAddContent(event);">Button 2</button>
<p id="output"></p>
</body>
</html>
Zu dieser HTML-Datei gehört dann eine gesonderte JavaScript-Datei, in diesem Fall mit dem Namen "example-button.js" im Unterordner "scripts":
function handleButtonClickAndAddContent(event) {
var element = document.getElementById('output');
element.innerHTML =
"The following button was pressed: " + event.currentTarget.textContent;
}
prompt() und alert()-Funktion erfolgen können.