32
Ein Skript in die Webseite einbinden
Bringen Sie Ihre Webseiten mit JavaScript auf Vordermann
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.
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.
siehe Abbildung |
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:
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.
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.
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:
siehe Abbildung |
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 |
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.
<SCRIPT LANGUAGE=JAVASCRIPT> ...JavaScript-Anweisungen hier einfügen </SCRIPT>
Abbildung 32.4: Auch der Communicator zeigt Ihr Skript als HTML an, wenn Sie sich bei der Definition der Markierung <SCRIPT> verschreiben.
siehe Abbildung |
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>
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. |
<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>
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.
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 |
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 |
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.