8. HTML: JavaScript verwenden

So kannst du deine Webseiten "das Laufen lehren"

In diesem Kapitel lernst du, wie du mit JavaScript vordefinierte Funktionen wie "Seite drucken" oder "history vor/zurück" auslöst, dynamisch Farben oder Inhalte und Bilder austauschst und Objekte über die Seite bewegst.

Wiederholung

Im letzten Kapitel haben wir gelernt, wie man mit CSS unterschiedliche Farben, Schriften, Innen- und Aussenabstände, Rahmen, Farben, Hintergrundbilder und Pseudoformate für Hyperlinks definiert.

Einführung

Diese Seite über JavaScript sprengt eigentlich den Rahmen unserer kleinen HTML-Einführung. JavaScript ist, anders als HTML und CSS eine Skriptsprache, mächtig, doch relativ leicht zu beherrschen. Der Einsatz von JavaScript ist immer dann geboten, wenn z.B

Dynamisch auf Anwender-Ereignisse oder Formulareingaben reagiert werden soll
Leicht zu automatisierende Schreibaufgaben im Dokument zu erledigen sind
Seiten dynamisch aufgerufen, Framesets nachgeladen oder Popups geöffnet werden sollen
Anzeigeeigenschaften (z.B. Bildschirmgrößen) oder Browsertypen ermittelt und flexibel auf die Ergebnisse reagiert werden soll

Was den Einsatz von JavaScript dagegen nicht gerade einfach macht, ist die große Verschiedenheit der Prozeduren, mit denen unterschiedliche Browsertypen (IE, Netscape, Konqueror, Safari, Opera) angesprochen werden müssen.

Als kleinen Einstieg hier einmal drei Verweise, die nicht wie bisher gewohnt neue Seiten öffnen oder Ankerstellen im Text anspringen, sondern per JavaScript besondere Browser-Befehle anstossen, die du sonst über die Knöpfe: vor, zurück, drucken des Browsers aufrufst:

zurück
wieder vor
diese Seite jetzt drucken

In der Statuszeile des Browsers kannst du beim Darüberfahren mit der Maus die JavaScript-Befehle lesen.
Der komplette Quelltext sieht so aus:

<a href="javascript:history.back()">zurück</a><br>
<a href="javascript:history.forward()">wieder vor</a><br>
<a href="javascript:window.print()">diese Seite jetzt drucken</a>

Das Beispiel zeigt, wie durch Notierung von javascript: in einem herkömmlichen Verweis dem Benutzer ein JavaScript-Befehl zur Verfügung gestellt werden kann.

Dafür gibt es auch einen Namen, er lautet inline-JavaScript. Es können auch mehrere dieser Befehle, durch einen Strichpunkt getrennt, in einem inline-JavaScript hintereinander notiert werden.

Für komplexere Anweisungen, und solche, die mehrfach verwendet werden, ist dagegen die Notierung als Funktion in einem JavaScript-Bereich vorzuziehen

So kannst du auf Objekte zugreifen

JavaScript hält zahlreiche vordefinierete Objekte bereit, auf die so leicht zugeggriffen werden kann. Das history-Objekt hast du ja eben schon kennen gelernt. Mit ihm hast du Zugriff auf die besuchten Seiten deines Besuchers. Und über das window-Objekt konnten wir die Druckfunktion des Browsers aktivieren. Weitere Objekte sind zum Beispiel: (siehe Tabelle)

JavaScript Objekte
das window-Objekt	Hierarchiehöchstes Objekt, gewährt Zugriff auf das Dokumentfenster
das document-Objekt	Unterobjekt des window-Objekts, gewährt Zugriff auf den Inhalt des Fensters, z.B. HTML-Seite
das images-Objekt	Unterobjekt des document-Objekts, gewährt Zugriff auf alle Bilder des Dokuments
das frame-Objekt	Zugriff auf Frames
das time-Objekt	Zugriff auf die Systemuhr des Benutzers
das anchors-Objekt	Zugriff auf alle Verweise der Seite
und und und...

Jedes dieser Objekte enthält wiederum Unterobjekte. Man könnte auch sagen, es besteht eine Hierarchie (=Rangordnung) von Objekten - alle Objekte stehen in einem Verhältnis zueinander und sind einander entweder über- neben- oder untergeordnet. So ist das document-Objekt z.B ein Unterobjekt des window-Objekts.

Um ein Unterobjekt anzusprechen müssen, ähnliche wie bei Pfadangaben, Objekte und Unterobjekte aneinandergehängt werden.

Beispiel 1:

window.document.images[0].src = "bild1.jpg";

Erklärung:

Objekte und Unterobjekte werden in richtiger, hierarchischer Reihenfolge, durch einen Punkt getrennt, aneinander gehängt. Hier sind es die Objekte window, document, images[], src. Das Beispiel ermöglicht den Zugriff auf die Quellenangabe eines beliebigen Bildes im Dokument (durch die Zahl "0" in den eckigen Klammern wird im Beispiel auf das erste im Quelltext notierte Bild zugegriffen). Durch die Notierung von "bild1.jpg" nach dem istgleich-Zeichen wird dem ersten Bild im Dokument die Pfadangabe "bild1.jpg" neu zugewiesen.

Noch einfacher lassen sich HTML-Elemente ansprechen, wenn ihnen mit dem Attribut name="" ein Name zugewiesen wurde. Ist spielt dann keine Rolle, wo das Bild im Quelltext notiert wurde. Über den Namen hat man immer den Zugriff:

Beispiel 1 lautet dann:

window.document[name].src = "bild1.jpg";

Anstelle von name notierst du den Namen des Bildes. Noch kürzer ist übrigens folgende Schreibweise: window.document.name.src

So kannst du Anwender-Ereignisse verarbeiten

Der Zugriff auf Objekte ist sehr praktisch, wenn es nur darum geht, Eigenschaften der Objekte auszulesen. Doch um die Eigenschaften dieser Objekte dynamisch, d.h. in Interaktivität mit dem Seitenbenutzer zu ändern, müssen noch zusätzlich Anwender-Ereignisse bestimmmt werden, die diese Änderungen anstossen.

Diese tragen den schönen Namen event-handler.

Hier eine Übersicht über einige Anwender-Ereignisse:

onload=""	Startet Ereignis beim Laden des Elements, indem es notiert ist
onclick=""	Startet Ereignis beim einfachen Anklicken des Elements, indem es notiert ist
ondblclick=""	Startet Ereignis beim doppelten Anklicken des Elements, indem es notiert ist
onmousedown=""	Startet Ereignis beim Drücken der linken Maustaste über dem Element, indem es notiert ist
onmouseover=""	Startet Ereignis, wenn die Maus das Element, indem es notiert ist, überfährt
onmouseout=""	Startet Ereignis, wenn die Maus das Element, indem es notiert ist, verlässt
onfocus=""	Startet Ereignis beim Fokusieren des Elements mit der Tabulatortaste
onselect=""	Startet Ereignis bei der Auswahl des Elements, in dem es notiert ist (Auswahlliste in Formularen)
onsubmit=""	Startet Ereignis beim Abschicken eines Formulars

Beispiel

Jetzt bringen wir Beispiel 1 (den Zugriff auf die Quellenangabe eines Bildes) und die event-handler onmouseover="" und onmouseout="" zusammen. Damit kann eine Grafik beim Darüberfahren mit der Maus dynamisch ausgetauscht werden.
Von diesem Highlight-Effekt wird bei Navigationsleisten recht häufig Gebrauch gemacht.

Der Quelltext lautet:

<img src="hkbutton.gif"
width="88" height="31" alt="sehr dynamisch"
onmouseover="document.images[0].src = "bild1.jpg"
onmouseout="document.images[0].src = "bild2.jpg">

Der Abschnitt Bilder austauschen bringt ebenfalls Beispiel 1 und zwei event-handler zusammen. Allerdings funktioniert der Austausch der Bilder hier über eine vordefinierte JavaScript-Funktion, wodurch der Befehl nur einmal (und nicht für jedes Bild neu) notiert werden muss.

Wie du eine solche Funktion in einem Scriptbereich definierst und was du beachten musst, zeigt der nächste Abschnitt.

Funktionen und Variablen in Scriptbereichen definieren

Scriptbereich einrichten

Bevor wir eine Funktion oder Variable definieren können, müssen wir einen JavaScript-Bereich einrichten. Das können wir sowohl im head als auch im body.

Und so sieht das aus:

<script language="JavaScript" type="text/javascript">
<!--

// -->
</script>

Funktionen definieren

In einer Funktion können mehrere Einzelanweisungen, die nacheinander ausgeführt werden sollen, zusammengefasst werden.

Eine neu Funktion definieren wir so:

function name(){}

Anstelle von name notierst du einen selbstvergebenen Namen für die Funktion. Du darfst aber keine Sonderzeichen (z.B. Umlaute) oder vordefinierte Namen verwenden.
In den geschweiften Klammern notierst du deine Anweisungen. Zur Sicherheit schließt du jede Anweisung mit einem Strichpunkt ab.

Beispiel:

<script language="JavaScript" type="text/javascript">
<!--
function popup() {
var neu = window.open("","neuFenster");
with (neu.document){
 open();
 writeln("<html><head><title>Noch mehr Seiten zum Thema JavaScript<\/title><\/head><body>");
 writeln("<h3>Noch mehr Seiten zum Thema JavaScript<\/h3>");
 writeln('<a href="http://selfhtml.teamone.de/javascript/index.htm">SelfHtml: JavaScript<\/a><br>');
 writeln('<a href="http://www.bingo-ev.de/~ub304/javscrpt/">Bingo: JavaScript<\/a><br>');
 writeln('<a href="http://dhtml.seite.net/">Milch &amp; Zucker<\/a><br>');
 writeln('<a href="http://javascript.seite.net/">Kakao &amp; Kekse<\/a><br>');
 writeln('<a href="http://www.dynamicdrive.com/">Dynamische Skripts - Bibliothek<\/a>');
 writeln("<\/body><\/html>");
 }
}
// -->
</script>
<a href="javascript:popup()">Popup &ouml;ffnen</a>

Erklärung:

Diese Funktion mit dem selbstvergebenen Namen "popup" erzeugt beim Anklicken des Verweises Popup öffnen ein neues Fenster, in das eine komplette HTML-Seite mit dem writeln()-Befehl geschrieben wird. Zu Beginn wird dafür eine Variable mit dem Namen "neu" definiert. Wie man eine Variable definiert erklärt der nächste Abschnitt.

Variable definieren

In einer Variablen können Werte, die den Funktionen zur Verarbeitung übergeben werden sollen, vorübergehend gespeichert werden. Diesen Variablen können auch jederzeit neue Werte zugewiesen werden. So macht die Wertzuweisung von

x = x+1;

die dem Mathematiker erstmal ziemlich unsinnig erscheint, in JavaScript durchaus Sinn. Denn die Anweisung bedeutet, das der Wert der Variablen x bei jedem erneuten Aufruf der Funktion, die mit ihr arbeitet, um den Wert 1 erhöht wird.

Eine neue Variable definieren wir so:

var name = 12;

Anstelle von name notierst du einen selbstvergebenen Namen für die Variable. Du darfst aber keine Sonderzeichen (z.B. Umlaute) oder vordefinierte Namen verwenden.
Hinter dem Istgleich-Zeichen notierst du die Wertzuweisung an die Variable, im Beispiel die Zahl 12. Ebenso könten wir der Variablen eine Zeichenkette (eingefasst durch Anführungszeichen), z.B. "JavaScript ist toll" oder eine bereits definierte, andere Variable zuweisen. (wir können var auch weglassen und nur den Namen der Variablen notieren, dann erhalten wir eine globale Variable. Mit globalen Variablen können dann auch mehrere Funktionen arbeiten)

Im Beispiel Texte austauschen weiter unten haben wir den Spezialfall einer Variablen, in der gleich ein ganzer Haufen von Wertzuweisungen gespeichert wird.

Dazu notierst du nach dem Namen der Variablen und dem Istgleich-Zeichen das Schlüsselwort

new Array();

In den runden Klammern notierst du dann alle Werte, welche die Variable im Verlauf ihrer Verarbeitung annehmen soll (durch Kommas getrennt und bei Zeichenketten wie z.B. Pfadangaben in Anführungszeichen!), also:

var text = new Array ('Texte austauschen','Das ist der erste Text','Das ist der zweite Text');

Nun kann z.B. einem Absatz dynamisch einer dieser drei Texte zugewiesen werden. Siehe Beispiel Texte austauschen!

JavaScript-Dateien auslagern

Funktionen, die auf mehreren Seiten Verwendung finden, werden praktischerweise ausgelagert, so wie wir das schon von CSS-Dateien kennen.
Dazu die Funktionen in einer einfachen Textdatei (ohne Skriptbereich!) erstellen und mit der Dateinamenserweiterung *.js abspeichern.
Mit folgender Notierung im head oder body wird die ausgelagerte Scriptdatei in die Datei eingebunden:

<script type="text/javascript" src="externe.js"></script>

Im Folgenden gebe ich ein paar weitere, nicht kommentierte Beispiele, die den unterschiedlichen Einsatz von JavaScript auf HTML-Seiten beleuchten.

Hintergrundfarbe austauschen

<form name="test" method="post"><input type="button" value=
"weiss" onclick=
"document.bgColor = '#FFFFFF' ">
 <input type="button" value="hellblau" onclick=
"document.bgColor = '#00FFFF' ">
 <input type="button" value="lila" onclick=
"document.bgColor = '#FF00FF' ">
 <input type="button" value="gelb" onclick=
"document.bgColor = '#FFFF00' ">
</form>

Texte austauschen

Hier drüber fahren oder klicken

<h5 id="nrtext" style="height:20px;">Texte austauschen</h5>
<script language="JavaScript" type="text/javascript">
<!--
var text = new Array
('Texte austauschen','Das ist der erste Text','Das ist der zweite Text');

function nrtext(nr) {
document.getElementById('nrtext').firstChild.nodeValue=text[nr];
}
//-->
</script>
<p
onmouseover="nrtext(1)"
onmousedown="nrtext(2)"
onmouseout="nrtext(0)">Hier dr&uuml;ber fahren oder klicken</p>

Bilder austauschen

<script language="JavaScript" type="text/javascript">
<!--
bild0 = new Image;
bild0.src = 'hkbutton.gif';

bild1 = new Image;
bild1.src = 'hkbutton1.gif';

function nimm(nr) {
document.images[1].src = nr.src;
}
// -->
</script>
<img src="hkbutton.gif"
width="88" height="31" alt="sehr dynamisch"
onmouseover="nimm(bild1)"
onmouseout="nimm(bild0)">

Objekte bewegen

Hier klicken!

<div onclick="startmoove()">
<div id="div1" style="position:relative;">
<h3>Objekte bewegen</h3>
</div>
<p>Hier klicken!</p>
</div>
<script language="JavaScript" type="text/javascript">
<!--
var ie  =(document.all)?1:0;
var DOM =(document.getElementById&&!document.all)?1:0;
var ns  =(document.layers)?1:0;

var timer=20;

function moove(obj,startx,starty,endx,endy,stufe){
 if (ie) {
 document.all["div"+obj].style.left=startx;
 document.all["div"+obj].style.top =starty;
 }
 if (DOM) {
 document.getElementById("div"+obj).style.left=startx;
 document.getElementById("div"+obj).style.top =starty;
 }
 if (ns) {
 document.layers["div"+obj].left=startx;
 document.layers["div"+obj].top =starty;
 }
 
 startx+=(endx-startx)/stufe;
 starty+=(endy-starty)/stufe;

 if(stufe>0)
  setTimeout('moove('+obj+','+startx+','+starty+','+endx+','+endy+','+(stufe-1)+')',timer);
}
function startmoove() {

X=(ns||DOM)?window.innerWidth:window.document.body.clientWidth;
 
//    obj startx,   y, endx, endy, stufe
  moove(1,   0,   0, X/2-100,  0, 50);
  setTimeout ('moove(1,  X/2-100,  0,  0,   0,  50)',5000);
}
//-->
</script>

Weiter geht's:

HTML-Schule