Previous Page TOC Index Next Page See Page

32

Eine Einführung in JavaScript

Ein Skript in die Webseite einbinden

Bringen Sie Ihre Webseiten mit JavaScript auf Vordermann

Web-Dokumente mit JavaScript aufpeppen

JavaScript läßt sich dazu einsetzen, um Webseiten dynamisch, interaktiv und vor allem viel spannender als ein einfaches statisches HTML-Dokument zu machen. Mit JavaScript können Benutzereingaben geprüft werden, Animationen erzeugt oder auch kleine Anwendungen geschrieben werden.

Und möchten Sie das Beste wissen? Sie müssen kein Programmierer sein, um JavaScript in Ihrer Webseite einzusetzen. Aus diesem Grund werden Sie in diesem Kapitel auch nicht die Programmierung mit Java-Script erlernen. Wenn Sie jedoch mehr über die Programmierung wissen möchten, dann finden Sie weitere Informationen in dem Online-Java-Script-Handbuch von Netscape an der Adresse http://home.net-scape.com/eng/mozilla/3.0/handbook/javascript/index.html.

Dieses Kapitel soll Ihnen vielmehr zeigen, wo Sie nützliche Skripts im Internet finden und wie Sie diese in Ihren Seiten integrieren können.

Eine Einführung in JavaScript

JavaScript hat nur sehr wenig mit Java zu tun. Ursprünglich entwickelte Netscape eine Skriptsprache mit der Bezeichnung LiveScript, die vor allem dazu diente, Java-Applets mit einer Webseite zu verbinden, denn ein Skript ermöglicht es, die Eigenschaften eines Applets aufgrund bestimmter Ereignisse zu ändern. LiveScript enthält viele der gleichen Konzepte und Schlüsselwörter, die man auch in Java wiederfindet; viele Konzepte und Schlüsselwörter, die es bei Java gibt, wurden jedoch aus Gründen besserer Leistungsfähigkeit nicht in LiveScript übernommen. Im Laufe der Zeit wurde diese Skriptsprache weiterentwickelt, so entstand JavaScript.

Die meisten Skripts, die Sie erstellen bzw. im Internet vorfinden, arbeiten mit dem Netscape Communicator und dem Microsoft Internet Explorer, bei letzterem wird die Skriptsprache als JScript bezeichnet. Der Microsoft Explorer ist jedoch nicht 100% mit JavaScript kompatibel, das zeigt sich beispielsweise daran, daß sich die Netscape-Homepage mit dem Explorer nicht ohne JScript-Fehlermeldung öffnen läßt.


Mehr Informationen über Microsofts JavaScript bekommen Sie an der Adresse http://www.microsoft.com/jscript. 

Beispiele für JavaScripts Möglichkeiten

Sie bekamen bisher schon einen kleinen Vorgeschmack auf das, was JavaScript für Sie tun kann, doch das ist nicht alles. Sie haben erfahren, daß Sie Objekte manipulieren und auf Ereignisse reagieren können – ein wenig zu abstrakt? Damit Sie sich eine bessere Vorstellung von dem machen können, was JavaScript leistet, sollten Sie am besten einige Beispiele der Nutzungsmöglichkeiten kennenlernen: Abbildung 32.1: Klicken Sie auf More>>, um ein verstecktes Formular sichtbar zu machen. In Kapitel 28 können Sie detailliert nachlesen, wie Ebenen mit JavaScript kontrollieren. 
siehe Abbildung 
 
Die Firma Netscape bietet Ihnen in ihrem Web-Bereich noch Dutzende weiterer Beispiele aus dem echten Internet-Leben. Sehen Sie an der Adresse http://developer.net-scape.com/library/examples/examples.html#javascript nach. 

JavaScript-Code erkennen

Wenn Sie mit C++ oder Java vertraut sind, dann werden Sie JavaScript-Code sehr einfach erkennen (siehe Listing 32.1). JavaScript sieht auf den ersten Blick dem Java-Code sehr ähnlich, es arbeitet mit Objekten und verwendet die gleiche Syntax. 
Listing 32.1: Ein JavaScript-Beispielskript 
 
function AddSeries( Last ) 
 
{ 
 
intTotal = 0; 
 
for ( j = 1; j <= Last; j++ ) 
 
{ 
 
intTotal += j; 
 
alert( intTotal ); 
 
} 
 
return intTotal; 
 
} 

document.write( "Hallo" );
In Listing 32.1 sehen Sie ein Beispiel eines JavaScript-Programms, daß zwar nicht besonders nützlich ist, doch einige wichtige charakteristische Merkmale aufzeigt:

Einige JavaScript-Details, die Sie kennen sollten

Sie müssen bei weitem nicht alles über JavaScript wissen, um es nutzbringend einzusetzen. Holen Sie sich einfach die Beispiele dort, wo sie kostenlos angeboten werden, und binden Sie sie in Ihre Webseiten ein.

Sie können sich JavaScript jedoch noch besser zunutze machen, wenn Sie mit den Grundlagen dieser Skriptsprache vertraut sind. Zunächst müssen Sie wissen, daß JavaScript eine Interpretersprache ist, dann sollten Sie etwas über Ereignissteuerung erfahren und Sie sollten wissen, wann der Browser mit der Ausführung eines Skripts beginnt. Zu guter Letzt ist es natürlich erforderlich, daß Sie Kenntnis darüber haben, wo ein Skript innerhalb des HTML-Codes integriert wird. Die nachfolgenden Abschnitte werden Ihnen diese Grundlagen näherbringen.

JavaScript ist einer interpretierte Sprache

JavaScript ist eine interpretierte Sprache oder eine Skriptsprache, im Gegenteil zu einer Compilersprache. Der Unterschied besteht darin, wie ein Programm, das von einem Entwickler erstellt wird, vom Benutzer ausgeführt wird. C++ ist beispielsweise eine Compilersprache. Nachdem ein C++-Programm erstellt ist, wird es von einem Compiler in Maschinensprache übersetzt und kann dann als eigenständige EXE-Datei auf dem Computer des Benutzers ausgeführt werden. Anders verhält es sich bei einer interpretierten Sprache, bei der ein Programm immer einen Interpreter braucht, wenn es ausgeführt werden soll. Dieser interpretiert die Anweisungen Zeile für Zeile und führt sie nacheinander aus.

Aus diesem Grund ist eine Interpretersprache auch langsamer als eine Compilersprache, doch wenn man den Einsatzzweck der Interpretersprache JavaScript betrachtet, ist diese Tatsache kein wirklicher Nachteil. Ihre Skripts werden vom Web-Browser interpretiert und sind in der Regel sehr klein. Außerdem werden sie nur ausgeführt, wenn der Benutzer etwas tut (z.B. mit der Maus klicken). Ein Skript zu kompilieren wäre genauso unnötig, als wenn Sie mit einem Ferrari nur ins Büro und wieder zurück fahren würden. In einem kompilierten Programm muß die CPU drei Maschinenbefehle ausführen, um einen Teil einer Funktion abzuarbeiten. In einem interpretierten Programm werden Hunderte von Maschinenbefehlen für die gleiche Funktion ausgeführt. Jetzt können Sie sicher verstehen, weshalb kompilierte Programme schneller sind.

JavaScript ist ereignisgesteuert

Mit JavaScript binden Sie Anweisungen in Ihre Webseite ein, die beschreiben, wie der Browser auf bestimmte Ereignisse reagieren soll. Ereignisse sind Dinge, die auf einer Webseite geschehen. Beispielsweise dann, wenn sich der Mauszeiger über einen Hyperlink bewegt oder wenn der Benutzer die Maustaste anklickt.

Abbildung 32.2 illustriert das Konzept der Ereignissteuerung. Beachten Sie dabei die drei Schlüsselpunkte: das Objekt, das Ereignis und die Ereignissteuerung. Die folgende Liste beschreibt diese drei Elemente:

Abbildung 32.2: Ereignisse signalisieren dem Browser, daß ein Objekt seine Aufmerksamkeit fordert. 
siehe Abbildung 
 

Wann Skripts ausgeführt werden

Lädt ein Benutzer eine Seite, die JavaScript enthält, dann registriert der Browser dies und übersetzt die Skripts in einen Zwischencode, denn dieser wird etwas effektiver ausgeführt. Er erstellt ebenfalls eine Tabelle, die die Namen der einzelnen JavaScript-Funktionen in der Webseite enthält, die sog. Symboltabelle. Der Web-Browser des Benutzers führt den unterschiedlichen Code zu unterschiedlichen Zeiten aus. Eine Funktion wird nicht zwingend beim Laden des HTML-Dokuments, sondern erst aufgrund eines Ereignisses ausgeführt (dies kann allerdings auch beim Laden der Seite auftreten).

Inline-Code wird sofort ausgeführt, wenn der Browser die Seite lädt. Erinnern Sie sich, Inline-Code ist JavaScript-Code, der kein Bestandteil einer Funktion ist. Sie können Inline-Code dazu einsetzen, um zu beeinflussen, wie der Browser die HTML-Seite aufbaut.

Sehen Sie sich Listing 32.2 an, eine Wiederholung des Codes aus Listing 32.1. Die letzte Zeile des Skripts führt der Browser beim Laden der Seite aus, da sie sich nicht innerhalb einer Funktion befindet. Die daraus resultierende Webseite sehen Sie in Abbildung 32.2. Die verbleibenden Zeilen werden beim Laden nicht ausgeführt, sondern erst, wenn ein bestimmtes Ereignis eintritt, mit denen diese Funktion assoziiert ist. 

Listing 32.2: Ein JavaScript-Beispielskript 
 
function AddSeries( Last ) 
 
{ 
 
intTotal = 0; 
 
for ( j = 1; j <= Last; j++ ) 
 
{ 
 
intTotal += j; 
 
alert( intTotal ); 
 
} 
 
return intTotal; 
 
} 



document.write( "Hallo" );
Abbildung 32.3: Die Methode document.write schreibt den Inhalt in die Webseite, wenn der Browser die HTML-Datei lädt. 
siehe Abbildung 
 

Wo Skripts eingebunden werden

Grundsätzlich lassen sich Skripts überall in einer Webseite einfügen. Viele ziehen es jedoch vor, die JavaScript-Funktionen innerhalb der <HEAD>-Markierung am Anfang eines Dokuments einzubinden, denn dadurch wird das HTML-Dokument übersichtlicher.

Ganz hartgesottene HTML-Autoren fügen Ihren JavaScript-Code möglichst nah an der Stelle im Dokument ein, an der er verwendet wird. Sie plazieren ein Skript, das mit einem Ereignis in einem Formular verbunden ist, innerhalb des Formulars. Oder Sie fügen das mit einem Java-Applet verbundene Skript möglichst nah der Markierungen <APPLET> oder <OBJECT> ein.


Auch wenn es empfehlenswert ist, sein HTML-Dokument ordentlich und übersichtlich aufzubauen, kann es Probleme verursachen, wenn man JavaScript-Code am Anfang des Dokuments einfügt. Denn einige Web-Suchmaschinen verwenden die ersten Zeilen eines HTML-Dokuments für eine kurze Beschreibung eines Bereichs. Wenn Ihr HTML-Dokument nun Hunderte von Zeilen mit JavaScript-Code am Anfang des Dokuments enthält, und Sie Ihren Bereich beispielsweise mit AltaVista suchen, dann erhalten Sie als Beschreibung das Skript. 

Ein Skript in die Webseite einbinden

So, jetzt kennen Sie die wichtigsten Grundlagen über JavaScript. Ich wette, Sie sind nun schon gespannt darauf, Ihre Webseiten mit JavaScript zu bereichern. Verwenden Sie dazu die Markierung <SCRIPT>. Diese Markierung hat nur ein einziges Attribut, nämlich LANGUAGE. Setzen Sie den Wert von LANGUAGE auf JAVASCRIPT, um festzulegen, daß Ihr Skript die Sprache JavaScript verwendet, im Gegensatz zu Microsofts VBScript oder einer anderen Skiptsprache. Da es sich bei <SCRIPT> um einen Container handelt, muß auch eine Abschlußmarkierung folgen, nämlich </SCRIPT>. Hier ein kleines Beispiel:
<SCRIPT LANGUAGE=JAVASCRIPT> 

...JavaScript-Anweisungen hier einfügen 

</SCRIPT>

Sie können das Attribut LANGUAGE auch weglassen. Wenn Sie keine Skriptsprache spezifizieren, gehen die meisten Browser davon aus, daß Sie JavaScript verwenden. 

Skripts vor nichtskriptfähigen Browsern verbergen

Eine Vielzahl von Benutzern setzen Browser ein, die nicht in der Lage sind, JavaScript zu interpretieren. Wenn ein solcher Browser <SCRIPT> und </SCRIPT> vorfindet, dann ignoriert er diese Markierungen, da er sie nicht interpretieren kann. Der Browser zeigt alles innerhalb dieser Markierungen als HTML-Inhalt an. Dies ist jedoch sicherlich nicht das, was Sie möchten. Abbildung 32.4 zeigt ein Beispiel dafür.

Abbildung 32.4: Auch der Communicator zeigt Ihr Skript als HTML an, wenn Sie sich bei der Definition der Markierung <SCRIPT> verschreiben. 

siehe Abbildung 
 Um Skripts vor nichtskriptfähigen Browsern zu verbergen, werden HTML-Kommentare verwendet. Die Öffnungsmarkierung für den HTML-Kommentar muß in die erste Zeile, innerhalb des Skriptblocks, eingefügt werden. Die Markierung, die den Kommentarbereich beendet, sollte in der letzten Zeile des Skriptblocks stehen. Beachten Sie bitte, daß Sie diese Zeile mit einem JavaScript-Kommentar beginnen, denn nachdem JavaScript den Code interpretiert, geht es davon aus, daß alles im Skript JavaScript ist. JavaScript-fähige Browser ignorieren diese Kommentare, während nichtskriptfähige Browser alles zwischen den Kommentarmarkierungen ignorieren. Listing 32.3 zeigt ein Beispiel. 
Listing 32.3: Skripts mit Kommentaren verstecken. 
 
<SCRIPT LANGUAGE=JAVASCRIPT> 

<!-- 
 
function AddSeries( Last ) 
 
{ 
 
intTotal = 0; 
 
for ( j = 1; j <= Last; j++ ) 
 
{ 
 
intTotal += j; 
 
alert( intTotal ); 
 
} 
 
return intTotal; 
 
} 


 
document.write( "Howdy" ); 

//--> 

</SCRIPT>

Skripts mit Ereignissen verbinden

Im nächsten Schritt müssen Sie lernen, wie Skripts mit Objekten auf Ihrer Webseite verbunden werden. Bevor Sie dieses Kapitel gelesen haben, werden Sie erfahren haben, wie Skripts aus dem Internet heruntergeladen und in ein HTML-Dokument eingebunden werden. Ebenso wie Sie einen neuen CD-Spieler mit dem Verstärker Ihrer Stereoanlage verbinden müssen, um CDs zu hören, müssen Sie JavaScript-Code mit Objekten in Ihrem HTML-Dokument verbinden, damit der Code zu dem von Ihnen gewünschten Zeitpunkt ausgeführt wird.

Die meisten Objekte auf einer Webseite verfügen über Ereignisse. Einige dieser Ereignisse, mit denen Sie Skripts verbinden können, finden Sie in der nachfolgenden Tabelle.

Tabelle 32.1: Häufig genutzte HTML-Ereignisse 

Name  Das Ereignis tritt ein, wenn 
onBlur  das Feld eines Formulars den Focus verliert. 
onChange  der Inhalt eines Feldes oder einer Liste geändert wird. 
onClick  der Benutzer ein Objekt anklickt. 
onFocus  ein Formularfeld den Focus bekommt. 
onMouseOut  sich der Mauszeiger vom Objekt wegbewegt. 
onMouseOver  sich der Mauszeiger auf dem Objekt befindet. 
onSelect  der Benutzer ein Formularfeld selektiert. 
OnSubmit  der Benutzer die Schaltfläche Submit anklickt. 
 Erinnern Sie sich an Abbildung 32.2? Diese verdeutlicht, daß Objekte, Ereignisse und Ereignisbehandlungen zusammenarbeiten. Sie müssen durch das Objektereignis ein Objekt mit einer Ereignisbehandlung verknüpfen. Dies wird dadurch erreicht, daß Sie das Attribut des Ereignisses in die HTML-Markierung hinzufügen und dessen Wert auf eine bestimmte JavaScript-Anweisung setzen, die bei einem bestimmten Ereignis aufgerufen wird. Um beispielsweise eine Funktion mit dem Namen MyFunction() mit dem Ereignis OnClick einer Schaltfläche zu verknüpfen, wird die <INPUT>-Markierung einer Schaltfläche wie folgt definiert:
<INPUT TYPE=BUTTON NAME=BUTTON onClick="MyFunction()">
Auf ebenso einfache Weise können Sie eine Ereignisbehandlung mit einem anderen Ereignis aus Tabelle 32.1 verbinden, beispielsweise onClick, dann muß die <INPUT>-Markierung wie folgt definiert werden:
<INPUT TYPE=BUTTON NAME=BUTTON onClick="MyFunction()" MouseOut="ByeMouse()">
Stellen Sie sich vor, Sie laden aus dem Internet ein wirklich tolles Skript herunter, das in der Statuszeile eine Nachricht anzeigt, wenn der Benutzer die Maus über ein Link bewegt. Sie binden dann das Skript in Ihre Webseite ein (siehe Listing 32.4), doch nichts passiert. Das Problem ist, daß Sie es nicht mit Ihrer Webseite verbunden haben, dies geschieht dadurch, daß Sie die Funktion Message() mit dem Ereignis onMouseOver jedes Ankers in ihrem HTML-Dokument verbinden. 
Listing 32.4: Ein neues Skript 
 
<SCRIPT LANGUAGE=JAVASCRIPT> 

<!-- 
 
function Message() 
 
{ 
 
window.status="Sie haben die Maus über einen Link bewegt!"; 
 
} 

//--> 

</SCRIPT>
 
Listing 32.5: Das neue Skript mit dem Dokument verknüpfen 
 
<HTML> 

<HEAD> 
 
<TITLE>Ein Skript einbetten</TITLE> 

</HEAD> 

<BODY> 
 
<A HREF="more.htm" onMouseOver="Message()">Mehr Info</A> 
 
<A HREF="less.htm" onMouseOver="Message()">Weniger Info</A> 

</BODY> 

</HTML>

Bringen Sie Ihre Webseiten mit JavaScript auf Vordermann

Der schnellste Weg, um Ihren Webseiten den JavaScript-Flair hinzuzufügen, ist die Verwendung bereits fertiger Skripts. An der Adresse http://tstudio.usa.net finden Sie eine reichhaltige Auswahl fertiger Skripts, die Sie in Ihren Seiten nutzen können.

Eine weitere empfehlenswerte Adresse ist Gamelan (http://javascript.developer.com), an der neben vieler sofort einsetzbarer Beispiele auch Dokumentationen zu finden sind, die Ihnen helfen, JavaScript besser einzusetzen.

Für ein schnelles Erfolgserlebnis können Sie die Skripts ausprobieren, die in den folgenden Abschnitten beschrieben werden. Diese Skripts zeigen, wie eine Direkthilfe für Links auf Ihrer Webseite implementiert werden kann.

Eine Direkthilfe für eine Hyperlink-Adresse

Sehen Sie einmal auf die Statuszeile des Communicators, wenn Sie den Mauszeiger über einen Hyperlink bewegen. Es wird der URL für den Link angezeigt, auf dem sich die Maus befindet. Mit Hilfe eines Skripts können Sie eine wesentlich nützlichere Information anzeigen (siehe Abbildung 32.5) lassen.

Abbildung 32.5: Wenn der Benutzer mehr Informationen darüber bekommt, was ihn an einer bestimmten Adresse erwartet, spart er sich Zeit, da er für ihn uninteressante Adressen einfach übergehen kann. 

siehe Abbildung 
 Wir verwenden das Ereignis onMouseOver der Markierung <A>, um einen Hilfstext darzustellen und das Ereignis onMouseOut, um den Text wieder zu entfernen. Fügen Sie dazu bei jedem Link auf Ihrer Webseite das folgende Attribute onMouseOver in der Markierung <A> hinzu. Dadurch werden jedesmal, wenn der Benutzer den Mauszeiger über den Anker bewegt, zwei Anweisungen ausgeführt. Die erste Anweisung self-status='Der Hilfstext' stellt den Text innerhalb der Anführungszeichen in der Statuszeile dar. Ändern Sie diesen Text in eine kurze Information über den entsprechenden Link. Die zweite Anweisung return return true true verhindert, daß der Browser die URL-Referenz in der Statuszeile anzeigt.
onMouseOver="self.status='The help text'; return true;"
Fügen Sie nun auch das Attribut für das onMouseOut-Ereignis zu jeder <A>-Markierung hinzu, wie in dem folgenden Beispiel. Dies funktioniert ebenso beim onMouseOver-Ereignis, das eben beschrieben wurde. Der Unterschied besteht darin, daß der Text in der Statuszeile gelöscht wird, wenn der Benutzer den Mauszeiger von dem HyperLink wegbewegt. Der Effekt beider Ereignisbehandlungen ist, daß ein kurzer Hilfetext angezeigt wird, sobald der Benutzer die Maus über einen Hyperlink bewegt, der wieder gelöscht wird, sobald sich der Mauszeiger nicht mehr über dem Link befindet.
onMouseOut="self.status=''; return true;"
Abbildung 32.6: Alternativ können Sie ein CGI-Skript erstellen, das die Wahl des Benutzers verarbeitet. Die hier gezeigte Lösung ist jedoch wesentlich effizienter, da die Verarbeitung beim Client durchgeführt wird. 
siehe Abbildung 
 Sehen Sie sich Listing 32.6 an. Es zeigt den HTML-Code für ein Formular mit einem Drop-down-Listenfeld. Es öffnet die Webseite, die der Benutzer aus der Liste auswählt. Die Funktion OpenURL() ist mit dem Ereignis OnChange der Markierung <SELECT> verbunden. Wenn der Benutzer ein Element aus dem Listenfeld auswählt, setzt OpenURL() die Eigenschaft window.location auf den entsprechenden URL. 
Listing 32.6: Formular und Skript für die Navigation 
 
<HTML> 



<SCRIPT LANGUAGE=JAVASCRIPT> 

<!-- 
 
function OpenURL( Index ) 
 
{ 
 
if ( Index == 0 ) window.location = "http://rampages.onramp.net/~jerry"; 
 
if ( Index == 1 ) window.location = "http://www.microsoft.com"; 
 
if ( Index == 2 ) window.location = "http://www.mcp.com"; 
 
if ( Index == 3 ) window.location = "http://www.netscape.com"; 
 
} 

//--> 

</SCRIPT> 



<FORM NAME=NAVIGATE> 
 
<SELECT NAME=LIST SIZE=1 OnChange="OpenURL( document.NAVIGATE.LIST.selectedIndex )"> 
 
<OPTION NAME=JERRY>Jerry's Homepage 
 
<OPTION NAME=MS>Microsoft 
 
<OPTION NAME=QUE>Macmillan Publishing 
 
<OPTION NAME=NETSCAPE>Netscape 
 
</SELECT> 

</FORM> 

</HTML>
Damit das vorstehende Skript auch in Ihrem HTML-Dokument funktioniert, müssen Sie die Liste des Formulars aktualisieren. Dann müssen Sie in der Funktion OpenURL eine Zeile hinzufügen, in der der Index der Benutzerauswahl geprüft und der entsprechende URL in dem Browser geöffnet wird. Dies geschieht am einfachsten dadurch, indem Sie eine der bereits bestehenden Zeilen kopieren und die Indexnummer ändern, so daß sie mit dem Formular korrespondiert. Dann ändern Sie den URL, der window.location zugewiesen wird. Denken Sie daran, daß das erste Element in der Liste den Index 0 hat, das zweite den Index 1 etc. 
© 1997 Que

Ein Imprint des Markt&Technik Buch- und Software- Verlag GmbH
Elektronische Fassung des Titels: Special Edition Netscape Communicator 4, ISBN: 3-8272-1026-7
Previous Page Page Top TOC Index Next Page See Page