HTML, CSS und JavaScript

JavaScript-Programme

Ein JavaScript-Programm wird auf einer HTML-Seite in den Head zwischen die Tags

eingefügt.

Beispiel: Folgende HTML-Seite enthält ein JavaScript-Programm, das beim Aufruf der Seite eine Meldungs-Box mit dem Text "Hallo" auf dem Bildschirm erscheinen lässt.

<html>
<head>
<title>Test</title>
<script language="JavaScript">
    var x;
    x="Hallo";
    alert(x);
</script>
</head>
<body>
Hier erscheint der Text der <abk>HTML</abk>-Seite.
</body>
</html>

In dem JavaScript-Programm wird zunächst eine Variable x deklariert. Danach wird der Variablen x ein Wert zugewiesen, hier der Text "Hallo". Anschließend wird die eingebaute Funktion alert aufgerufen, die eine Meldungs-Box auf dem Bildschirm erscheinen lässt. [Ausprobieren]

In JavaScript wird jede Anweisung mit einem Semikolon abgeschlossen. Groß- und Kleinschreibung spielt eine Rolle; eine großgeschriebene Variable X und eine kleingeschriebene Variable x sind verschieden.

Aufgabe 1: Kopieren Sie den obigen HTML-Quelltext in einen Text-Editor (z.B. den Windows-Notizblock). Speichern sie den Quelltext unter dem Dateinamen "Test.htm" ab. Öffnen Sie anschließend die Datei "Test.htm" mit dem Internet-Explorer (Doppelklick auf "Test.htm"). Indem Sie den Quelltext im Editor bearbeiten, speichern und im Internet-Explorer die Schaltfläche "Aktualisieren" betätigen, können Sie die Auswirkung von Änderungen beobachten.

Die Eingabe von Werten für ein JavaScript-Programm geschieht über ein HTML-Formular oder über eine Eingabebox.

Die Ausgabe kann auf unterschiedliche Weise geschehen – entweder als einfachste Möglichkeit mit Hilfe einer Meldungs-Box, oder über eine eigene HTML-Seite, oder in einem eigenen Bereich auf der Seite, auf der sich auch das Eingabe-Formular befindet. Im folgenden sind drei Muster-Dateien angegeben, in denen die verschiedenen Möglichkeiten realisiert sind.

Für die Realisierung der Ein-und Ausgabe werden fortgeschrittenere Techniken der JavaScript-Programmierung benötigt. So werden etwa Funktionen benutzt; ferner ist ein Zugriff auf das Document Object Model der HTML-Seite erforderlich. Es wird daher empfohlen, die Programmbeispiele zunächst einfach als gegeben hinzunehmen. Mit dem Menüpunkt Ansicht | Quelltext des Internet-Explorers lässt sich der Quelltext der Dateien ansehen.

Als Beispiel werden im Programm zwei Zahlenwerte eingegeben und die Summe der beiden Zahlen ausgegeben.

Ausgabe mit Meldungsfenster

Ausgabe in eigener HTML-Seite

Ausgabe auf derselben HTML-Seite

Weiter mit: [Variablen und Ausdrücke] oder

HTML, CSS und JavaScript

JavaScript-Programme

Einfügen von JavaScript in HTML-Seiten

Ein- und Ausgabe