Grundlegende Befehle und Sprachstruktur
Grundlegende JavaScript-Programmierung
Lernen Sie mehr ⁿber das Programmieren in JavaScript
Tag 12
Kapitel 23 - JavaScript
In den letzten paar Tagen haben Sie gelernt, Ihren Webseiten Extramerkmale und InteraktivitΣt hinzuzufⁿgen, unter anderem AbbildungsplΣne, Formulare und CGI-Skripten. Alle diese Merkmale werden, mit Ausnahme der Client-seitigen AbbildungsplΣne, von den meisten gegenwΣrtigen Browsern unterstⁿtzt, so da▀ Sie sie bedenkenlos einsetzen k÷nnen, ohne sich gro▀ um die KompatibilitΣt sorgen zu mⁿssen. Diese Merkmale haben jedoch ihren Preis: Fast alle erfordern Interaktion mit einem Web-Server, fⁿr Skripten oder die Verarbeitung einfacher Werte und sind aus diesem Grund fⁿr viele Arten von PrΣsentationen nicht die beste L÷sung.
Heute und in den nΣchsten paar Tagen werden Sie neuere Merkmale auf dem Web und in den verschiedenen Browsern kennenlernen, die dem Browser FunktionalitΣt hinzufⁿgen und es Ihnen erm÷glichen, neue und interessante interaktive PrΣsentationen zu erzeugen, die nicht so stark auf Programmen beruhen, die auf der Server-Seite laufen.
JavaScript, das zuvor LiveSkript genannt wurde, ist eine Programmiersprache, die HTML-Seiten FunktionalitΣt und Merkmale hinzufⁿgt. JavaScript-Skripten werden in HTML-Dateien eingebettet und laufen auf der Browser-Seite. JavaScript ist eine Neuerung, die die Unterstⁿtzung vieler kommerzieller Organisationen erfΣhrt. JavaScript wird momentan - in der einen oder anderen Form - von einer Handvoll Browsern, darunter Netscape und Microsoft Internet Explorer unterstⁿtzt.
Wie die meisten Technologien, die im Internet und speziell im World Wide Web verwendet werden, befindet sich JavaScript im Zustand stΣndiger Weiterentwicklung und VerΣnderung. JavaScript hat sich sehr schnell von der Version 1.0 in Netscape 2 zu Version 1.1 in Netscape 3 und schlie▀lich zu Version 1.2 im Netscape Communicator weiterentwickelt. In der Zwischenzeit hat Microsoft JSkript - seine eigene JavaScript-Variante, die im Internet Explorer 3.0 unterstⁿtzt wurde - vorgestellt. Jede dieser Variationen und Versionen hatte ihre eigenen feinen Unterschiede und Inkonsistenzen. Anstatt diese Unterschiede zu berⁿcksichtigen, behandle ich JavaScript hier im Hinblick auf die grundlegenden Merkmale, die allen Implementationen von JavaScript gemein sind.
|
Netscapes JavaScript ist eine Skripting-Sprache, die nur eine entfernte ─hnlichkeit zu Java von Sun Microsystems aufweist. Wegen ihrer Namen werden die beiden aber leicht verwechselt. JavaScript ist eine einfache Sprache, die nur auf Web-Browsern anwendbar ist. Java ist eine umfassendere Programmiersprache, die so gut wie auf allen Betriebssystemen funktioniert. Mehr ⁿber Java erfahren Sie morgen an Tag 13, ╗Java, Plug-Ins und eingebettete Objekte½. |
In diesem Kapitel werden Sie die Grundlagen von JavaScript kennenlernen, indem Sie die folgenden Themen erforschen:
|
Alle JavaScript-Beispiele in diesem Buch erfordern Netscape Navigator 2.0 oder h÷her. Ich habe Netscape Navigator 2.0 fⁿr alle Beispiele verwendet, obwohl die meisten davon auch mit h÷heren Versionen von Netscape wie auch mit dem Internet Explorer 3.0 oder h÷her zusammenarbeiten sollten. JavaScript ist kein formaler Bestandteil der HTML-3.2-Spezifikation. Allerdings wird in dem Entwurf zur Cougar/HTML-4.0-Spezifikation der Vorschlag gemacht, das <Skript>-Tag und die Unterstⁿtzung von JavaScript und VBSkript (eingefⁿhrt von Microsoft mit dem Internet Explorer 3.0) neben anderen Skriptsprachen zu ⁿbernehmen. |
JavaScript wird eingefⁿhrt
Nach den Worten einer Pressemeldung, die von Netscape Communications und Sun Microsystems zusammen herausgegeben wurde, kann man JavaScript folgenderma▀en charakterisieren: ╗JavaScript ist eine leicht anwendbare Objekt-Skripting-Sprache, die dazu entworfen wurde, live-online Anwendungen zu erzeugen, die Objekte und Ressourcen sowohl auf Clients als auch auf Servern miteinander verbinden. JavaScript wurde fⁿr die Erstellung von HTML-Seiten und von unternehmungslustigen Anwendungsentwicklern entworfen, um das Verhalten von Objekten, die entweder auf der Client- oder der Server-Seite ausgefⁿhrt werden, dynamisch beschreiben zu k÷nnen.½
Was ist JavaScript?
Einfach ausgedrⁿckt bedeutet dies, da▀ Sie mit Hilfe von JavaScript Ihren Webseiten FunktionalitΣt hinzufⁿgen k÷nnen, wozu Sie in der Vergangenheit komplexe CGI-basierte Programme auf einem Web-Server ben÷tigt hΣtten. In vieler Hinsicht Σhnelt JavaScript Visual Basic - der anwenderfreundlichen Programmiersprache, die von Microsoft entwickelt wurde - vor allem deshalb, weil Sie JavaScript auch mit wenig oder keinem Programmierwissen dazu verwenden k÷nnen, komplexe Web-basierte Anwendungen zu erstellen.
Was JavaScript jedoch unterscheidet ist die einzigartige Weise, in der es sich ins World Wide Web integriert. Anstatt als separate Datei gespeichert zu sein - wie ein CGI-Skript - wird der JavaScript-Code als Teil eines Standard-HTML-Dokuments eingefⁿgt, so wie alle anderen HTML-Tags und -Elemente. Au▀erdem laufen JavaScript-Skripten im Unterschied zu CGI-Skripten, die auf dem Web-Server laufen, auf dem Browser. Deshalb sind sie auf allen Web-Browsern einsetzbar, die JavaScript unterstⁿtzen, unabhΣngig vom Rechnertyp oder Betriebssystem.
|
Netscape hat auch eine serverseitige Version von JavaScript entwikkelt, die neben oder anstelle von serverseitigem CGI verwendet werden kann. Serverseitiges JavaScript wurde in der LiveWire-Entwicklungsumgebung implementiert, die in Verbindung mit Netscape's Web-Servern FastTrack bzw. Enterprise lΣuft. Der Internet Information Server von Microsoft bietet in der Version 3.0 JavaScript auch als serverseitige Entwicklungssprache. |
Warum sollte ich JavaScript verwenden?
Die Antwort auf diese Frage hΣngt zu einem gewissen Ausma▀ davon ab, welche FΣhigkeiten schlie▀lich in die JavaScript-Sprache aufgenommen werden. Es ist jedoch wahrscheinlich, da▀ Skripten, die mit JavaScript geschrieben sind, schlie▀lich dazu in der Lage sein werden, alle Aspekte einer Webseite oder eines Web-Formulares zu kontrollieren und auch direkt mit Plug-Ins zu kommunizieren, die auf Webseiten abgebildet werden oder auch mit kompilierten Java-Applets.
Was JavaScript Ihnen abgesehen von solchen futuristischen M÷glichkeiten anbietet, ist, da▀ Sie viele einfache (und nicht so einfache) Programmieraufgaben auf den Web-Browsern (oder Clients) durchfⁿhren k÷nnen, anstatt sich auf CGI-Skripten auf der Web-Server-Seite zu verlassen. Au▀erdem erm÷glicht JavaScript es Ihnen, mit viel gr÷▀erer Effizienz die Gⁿltigkeit von Informationen zu ⁿberprⁿfen, die von Lesern auf Formularen und anderen Dateneingabebildschirmen eingegeben werden. Und schlie▀lich bringt JavaScript, wenn es mit Frames integriert wird, eine gro▀e Vielfalt von neuen Optionen aus dem Bereich des Web-Publizierens mit sich.
Einfache Anwendung
Im Unterschied zu Java wurde JavaScript fⁿr Nichtprogrammierer entworfen. Als solches ist es relativ einfach anzuwenden und viel weniger pedantisch bei solchen Einzelheiten wie der ErklΣrung von Variablentypen. Au▀erdem brauchen sie den JavaScript-Code nicht zu kompilieren, bevor er verwendet werden kann - was Sie ansonsten bei den meisten anderen Sprachen, einschlie▀lich Java, tun mⁿssen. Dennoch ist JavaScript eine Programmiersprache, bei der die Lernkurve flacher ist als bei HTML (wenn auch nicht so flach wie bei Java). Allerdings ist es m÷glich, ohne jegliche Programmerierfahrung JavaScript fⁿr sehr einfache Aufgaben, wie sie spΣter in diesem Kapitel beschrieben werden, einzusetzen. Komplexere Vorhaben machen es erforderlich, wesentliche Konzepte der Programmierung zu erlernen.
Steigerung der Server-Effizienz
In dem Ma▀, in dem immer mehr Leute das World Wide Web ⁿberfluten, werden viele beliebte Web Sites schnell an die Grenzen ihrer gegenwΣrtigen Verarbeitungsm÷glichkeiten gedrΣngt. Als Ergebnis davon suchen Web-Operatoren fortwΣhrend nach Wegen, den Verarbeitungsaufwend ihrer Systeme zu reduzieren - um die Notwendigkeit von teuren Rechner-Upgrades abzuwenden. Dies war einer der Hauptgrⁿnde fⁿr die Einfⁿhrung von Client-seitigen AbbildungsplΣnen wie denen, die in Kapitel 17, ╗AbbildungsplΣne½, besprochen wurden.
Mit der Einfⁿhrung von JavaScript wurden einige neue Leistungsoptionen fⁿr Web-Publizisten verfⁿgbar. Nehmen wir mal an, da▀ Sie ein Formular erzeugt haben, mit dem Leute ihre Abrechnungsdetails in Ihr Online-Bestellsystem eingeben k÷nnen. Wenn dieses Formular ⁿbermittelt wird, mu▀ Ihr CGI-Skript als erstes die Informationen ⁿberprⁿfen, die geliefert wurden, um sicherzustellen, da▀ alle angemessenen Felder korrekt ausgefⁿllt wurden. Sie mⁿssen ⁿberprⁿfen, da▀ Name und Adresse eingetragen wurden, da▀ eine Abrechnungsmethode ausgewΣhlt wurde, da▀ die Kreditkarteninformationen vollstΣndig ausgefⁿllt wurden und... - die Liste ist endlos.
Was passiert aber, wenn Ihr CGI-Skript feststellt, da▀ Informationen fehlen? In diesem Fall mⁿssen Sie den Leser benachrichtigen, da▀ es Probleme mit der ▄bermittlung gibt, und ihn dann darum bitten, die Einzelheiten zu bearbeiten und das komplette Formular erneut einzusenden. Dies beinhaltet, da▀ das Formular zurⁿck zum Browser geschickt wird, dann vom Leser mit der richtigen Information wieder ⁿbermittelt wird, dann wieder ⁿberprⁿft wird und da▀ dieser Vorgang so lange wiederholt wird, bis alles stimmt. Dieser Proze▀ ist sehr ressourcenintensiv, sowohl auf der Server-Seite (da jeder Durchlauf des CGI-Programms Rechen- und SpeicherkapazitΣt verbraucht) als auch auf der Netzwerkseite, da die ▄bertragung zwischen Browser und Server wiederholt stattfinden mu▀.
Indem Sie alle ▄berprⁿfungs- und Nachprⁿfungsprozeduren auf den Web-Browser verlegen - sofern Sie JavaScript anwenden - sind keine zusΣtzlichen Transaktionen, da es nur eine ╗echte½ Transaktion gibt, die jeweils zurⁿck zum Server ⁿbertragen wird. Und da der Web-Server keine eigenen ▄berprⁿfungen durchfⁿhren mu▀, sind die Server-Hardware-Anforderungen geringer, da weniger Verarbeitungsressourcen ben÷tigt werden, um ein komplexes Formular zu ⁿbermitteln.
JavaScript und Web-Service-Provider
Zu einer Zeit, da viele Web-Service-Provider die Verfⁿgbarkeit von CGI-Skript-Unterstⁿtzung aus Sicherheits- oder Leistungsgrⁿnden stark beschrΣnken, bietet JavaScript eine Methode, einen gro▀en Teil der fehlenden CGI-FunktionalitΣt zurⁿckzugewinnen. Es erm÷glicht die Durchfⁿhrung von Aufgaben, die bisher von einem serverseitigen CGI-Skript durchgefⁿhrt wurden, auf einem Web-Browser.
Die meisten Web-Service-Provider liefern normalerweise eine Art von einfachem CGI-Skript, das ein von einem Leser ⁿbermitteltes Formular annehmen und eine grundlegende Verarbeitung daran vornehmen kann, um es z.B. auf der Platte zu speichern oder es an den Eigentⁿmer des Sites zu schicken. Wenn es jedoch um komplexere Formulare geht, waren die einzigen Alternativen bisher, einen anderen Service-Provider zu finden oder Ihren eigenen Web-Server einzurichten. Aber jetzt, mit JavaScript, braucht dies nicht lΣnger der Fall zu sein.
Indem Sie die grundlegenden formularverarbeitenden CGI-Skripten eines Web-Service-Providers, die in der Seite selbst enthalten sind, mit den JavaScript-Routinen verbinden, gibt es nur sehr wenige formularbasierte AktivitΣten, die nicht sogar auf den restriktivsten und sicherheitsbewu▀testen Sites eines Web-Service-Providers ausgefⁿhrt werden k÷nnten. Wenn die volle Integration von Java, JavaScript und Plug-Ins einmal erreicht ist, werden Sie au▀erdem dazu in der Lage sein, Dinge auf Webseiten zu tun, die zuvor fⁿr unm÷glich gehalten wurden, selbst wenn Sie die am meisten fortentwickelten CGI-Skripten eingesetzt hΣtten.
Das <Skript>-Tag
Um die Einbindung von JavaScript-Programmen in normale HTML-Dokumente zu erleichtern, hat Netscape die Einfⁿhrung eines neuen <Skript>-Tags vorgeschlagen. Indem Sie ein <Skript>-Tag in einem Dokument plazieren, weisen Sie Netscape an, alle dem Tag folgenden Textzeilen als Skript zu behandeln - und nicht als normalen Webseiteninhalt. Dieser Vorgang geht dann weiter, bis ein korrespondierendes </Skript>-Tag gefunden wird, von dem aus der Browser dann zu seinem normalen Modus operandi zurⁿckkehrt - den Text als Web-Inhalt zu behandeln.
Wenn es in einem Dokument verwendet wird, mu▀ jedes Skript-Tag ein LANGUAGE (Sprachen-)-Attribut enthalten, um die Skripting-Sprache anzugeben, die verwendet werden soll. Momentan sind die zwei m÷glichen Werte fⁿr dieses Attribut LANGUAGE="LiveSkript" und LANGUAGE="JavaScript". Generell sollten Sie jedoch immer die JavaScript-Option verwenden. Als Netscape begann, JavaScript zu entwickeln, nannten sie es LiveSkript. Mit der Ver÷ffentlichung von Netscape 2.0, dem ersten offiziellen Release mit JavaScript-Unterstⁿtzung, wurde der Name in JavaScript geΣndert. Aus diesem Grund sollten Sie die LiveSkript-Option nicht verwenden.
Die Struktur eines JavaScript-Skripts
Wenn Sie irgendwelchen JavaScript-Code in ein HTML-Dokument aufnehmen, sollten Sie, abgesehen von der Verwendung des <Skript>-Tags, noch einige andere Konventionen beachten:
Wenn diese drei Punkte berⁿcksichtigt werden, sieht die grundlegende Struktur fⁿr die Einbindung von JavaScript-Code innerhalb von HTML-Dokumenten so aus:
<HTML>
<HEAD>
<TITLE>Test Skript</TITLE>
<Script LANGUAGE="JavaScript">
<!- Verwenden Sie das oeffnende Kommentar-Tag, um JavaScript-Code zu verstecken
// Ihr JavaScript-Code gehoert hierher
// schliessen Sie das Kommentar-Tag auf der Zeile direkt vor dem </Skript>-Tag ->
</Skript>
</HEAD>
<BODY>
Ihr Web-Dokument gehoert hierher
</BODY>
</HTML>
Das SRC-Attribut
Neben dem LANGUAGE-Attribut kann das <Skript>-Tag auch ein SRC-Attribut enthalten. Indem Sie ein SRC-Attribut einfⁿgen, k÷nnen Sie ein JavaScript-Skript in einer separaten Datei speichern, um es in die aktuelle Webseite aufzunehmen. Dies ist eine praktische Option, wenn Sie es mit mehreren Webseiten zu tun haben, die alle denselben JavaScript-Code verwenden, und Sie den Code nicht jedesmal kopieren und einfⁿgen wollen.
Wenn es so angewendet wird, benutzt das <Skript>-Tag die folgende Syntax:
<SCRIPT LANGUAGE="JavaScript½ SRC="http://www.myserver.com/Skript.js">
In dieser Form kann SKRIPT eine beliebige relative oder absolute URL sein und .js ist die Dateierweiterung fⁿr eine JavaScript-Datei. Dies funktionierte in Netscape 2.0 noch nicht. Erst mit der Einfⁿhrung von Netscape 3.0 war es funktionsfΣhig.
Grundlegende Befehle und Sprachstruktur
Im Grunde genommen benutzt JavaScript einen objektorientierten Ansatz zum Computerprogrammieren. Das bedeutet im Prinzip, da▀ alle Elemente auf einer Webseite als Objekte behandelt werden, die gruppiert werden, woraus sich eine komplette Struktur ergibt.
Wenn diese Struktur verwendet wird, kann davon ausgegangen werden, da▀ alle Elemente einer einzelnen Webseite in einem Basisobjekt-Container enthalten sind, der Window genannt wird. Innerhalb des window-Objekts gibt es mehrere kleine Container (oder Objekte) die Informationen ⁿber die verschiedenen Elemente einer Web-Browser-Seite enthalten. Folgendes sind die Hauptobjekte:
Sie k÷nnen eine komplette Liste der verfⁿgbaren Objekte in JavaScript als Teil der JavaScript-Dokumentation von Netscape unter http://home.netscape.com/eng/mozilla/Gold/handbook/JavaScript/index.html. erhalten.
Eigenschaften und Methoden
Innerhalb eines jeden Objekt-Containers k÷nnen Sie auf zwei Haupttypen von Ressourcen zugreifen: Eigenschaften und Methoden.
Eigenschaften sind im wesentlichen Variablen, die einen Wert annehmen, der mit dem Objekt zusammenhΣngt, an dem Sie interessiert sind. Zum Beispiel befindet sich innerhalb des Dokumenten-Objekts eine Eigenschaft namens title, die den Titel des aktuellen Dokuments enthΣlt und durch das <TITLE>-Tag beschrieben wird.
In JavaScript erhalten Sie den Wert dieser Eigenschaft, indem Sie den Befehl document.title anwenden. Der erste Teil des Befehls gibt JavaScript an, mit welchem Objekt Sie arbeiten wollen, und der zweite Teil - der dem Punkt (.) folgt - reprΣsentiert den Namen der Eigenschaft selbst.
Folgendes sind einige Beispiele von Eigenschaften, die Sie einfⁿgen k÷nnen:
Sehen Sie sich die JavaScript-Dokumentation unter http://home.netscape.com/eng/mozilla/Gold/handbook/JavaScript/index.html an, wenn Sie an allen Eigenschaften jedes verfⁿgbaren Objekts interessiert sind.
Abgesehen von den Eigenschaften sind den meisten Objekten auch noch spezielle Funktionen zugeordnet, die Methoden genannt werden. Methoden sind eine Gruppe von Programmierbefehlen, die sich direkt auf ein bestimmtes Objekt beziehen. Zum Beispiel hat das document-Objekt eine Methode namens write zugeordnet, mit der Sie Text direkt auf eine Webseite schreiben k÷nnen. Diese Methode hat die folgende Syntax
document.write("Hello world");
Wie es schon bei den Eigenschaften der Fall war, fⁿhren Sie eine Methode aus oder rufen sie auf, indem Sie zuerst das Objekt angeben, das mit ihr assoziiert ist, gefolgt von einem Punkt und dann dem Namen der eigentlichen Methode. Au▀erdem folgen den Methodennamen Klammern (). Die Klammern umgeben etwaige Argumente dieser Methode - wenn die Methode z.B. mit Zahlen funktioniert, werden die Klammern diese Zahlen enthalten. In dem "Hello World"-Beispiel verwendet die write()-Methode eine Zeichenfolge (in Anfⁿhrungszeichen), die als Argument geschrieben wird.
Beachten Sie, da▀ auch dann, wenn eine Methode keine Argumente annimmt, die Klammern immer noch eingesetzt werden mⁿssen. Beispielsweise wird die toString()-Methode, die zum location-Objekt geh÷rt, dazu verwendet, den URL des gegenwΣrtigen Dokuments in eine Zeichenkette umzuwandeln, die mit anderen Methoden wie document.write() angewendet werden kann. Es gibt keine Argumente zu dieser Methode; Sie rufen sie einfach mit leeren Klammern auf, so wie hier: location.toString().
So wie bei den Eigenschaften hat jedes Objekt mehrere Methoden, die Sie in Ihren JavaScript-Skripts anwenden k÷nnen. Die vollstΣndige Liste k÷nnen Sie von derselben URL erhalten, die die Liste von den zuvor erwΣhnten Objekten und Eigenschaften enthΣlt; hier sind einige ausgewΣhlte Methoden:
Indem Sie die document.write()- und location.toString()-Methoden mit der document.title-Eigenschaft, die bereits erwΣhnt wurde, in einem HTML-Dokument wie dem folgenden kombinieren, k÷nnen Sie ein sehr einfaches JavaScript-Skript wie das hier gezeigte erzeugen. Die Ergebnisse werden in Abbildung 23.1 gezeigt.
<HTML>
<HEAD>
<TITLE>Test JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!- vor alten Browsern verstecken
document.write(document.title + "<BR>");
document.write(location.toString());
// nicht mehr verstecken ->
</Skript>
</HEAD>
</HTML>
|
Methode, Eigenschaft, Funktion und Variablennamen sind in JavaScript alle von der Gro▀- und Kleinschreibung abhΣngig, das hei▀t Gro▀- und Kleinbuchstaben machen einen Unterschied. Wenn Ihr Skript aus Abbildung 23.1 nicht funktionieren will, vergewissern Sie sich, da▀ Sie location.toString() und nicht location.tostring() geschrieben haben. |
Abbildung 23.1: |
Ereignisse und JavaScript
Obwohl die Implementierung von solchen Methoden wie document.write() bei der Erstellung von Webseiten nⁿtzlich sein kann, liegt die eigentliche StΣrke von JavaScript in seiner FΣhigkeit, auf Ereignisse zu reagieren.
Ereignisse sind Aktionen, die auf einer Webseite auftreten, normalerweise dann, wenn ein Leser auf irgendeine Weise mit der Seite interagiert. Wenn z.B. eine Person einen Wert in das Textfeld eines Formulars eingibt oder einen Submit-Button anklickt, wird eine Serie von Ereignissen innerhalb des Web-Browsers ausgel÷st, die alle von JavaScript-Programmen abgefangen werden k÷nnen, und zwar gew÷hnlich in der Form von Funktionen.
Funktionen
Funktionen sind Methoden sehr Σhnlich. Der Unterschied liegt jedoch darin, da▀, wΣhrend Methoden einem spezifischen Objekt zugeordnet sind, Funktionen unabhΣngige Routinen darstellen, die au▀erhalb der Begrenzungen eines Objekts operieren. Um eine Funktion fⁿr die aktuelle Webseite zu definieren, wⁿrden Sie etwa folgendes schreiben:
<SCRIPT LANGUAGE="JavaScript">
function functionName( operands ) {
Hierher gehoeren die Aktionen,die von Ihrer Funktion ausgefuehrt werden sollen
}
</Skript>
In diesem Code ist functionName ein beliebiger, von Ihnen gewΣhlter eindeutiger Name, und operands ist eine Liste von Werten, die Sie zu der Funktion senden wollen. Im Anschlu▀ an die Funktionsdefinition und innerhalb des Klammernpaares { } beinhalten sie die Liste von Instruktionen, die Sie durch die Funktion ausfⁿhren lassen wollen. Dies kann eine Reihe von Berechnungen, ein Gⁿltigkeitstest fⁿr ein Formular oder so ziemlich alles sein, das Ihnen einfΣllt.
|
JavaScript enthΣlt auch eine Anzahl von eingebauten Objekten und Funktionen, die es Ihnen erm÷glichen, mathematische Funktionen, Zeichenketten-Manipulation und Datum- und Uhrzeit-Berechnungen durchzufⁿhren. Fⁿr eine vollstΣndige Liste von eingebauten Funktionen ziehen Sie die Online-JavaScript-Dokumentation zu Rate. |
Den Ereignissen Funktionen zuordnen
Nachdem Sie Ihre Funktionen definiert haben, mⁿssen Sie sie als nΣchstes den verschiedenen Ereignissen zuordnen, die Sie erzielen m÷chten. Sie tun dies, indem Sie den verschiedenen Elementen der Webseite oder des Formulars die sogenannten Event-Handler (╗Behandler von Ereignissen½) zuordnen. GegenwΣrtig k÷nnen Sie die folgenden Event-Handler einsetzen:
Wann er aufgerufen wird |
|
Jedesmal wenn ein Leser ein bestimmtes Feld verlΣ▀t |
|
Jedesmal wenn ein Leser den Inhalt eines bestimmten Felds verΣndert |
|
Jedesmal wenn ein Leser einen bestimmten Button anklickt |
|
Jedesmal wenn ein Leser ein bestimmtes Feld betritt |
|
Jedesmal wenn eine Webseite geladen oder erneut geladen wird |
|
Jedesmal wenn ein Leser den Maus-Cursor ⁿber einem bestimmten Feld plaziert |
|
Jedesmal wenn ein Leser den Inhalt eines bestimmten Felds auswΣhlt |
|
Jedesmal wenn ein Leser ein bestimmtes Formular ⁿbermittelt |
|
Jedesmal wenn die gegenwΣrtige Webseite verlassen wird |
Um die Funktionen zu bestimmen, die mit einem beliebigen dieser Ereignisse assoziiert werden sollen, brauchen Sie blo▀ den entsprechenden Event-Handler als Attribut des Felds einzufⁿgen, das Sie kontrollieren wollen. Nehmen Sie z.B. ein Standard-Formular mit ein paar Textfeldern und einem Submit-Button, so wie es hier gezeigt wird:
<FORM METHOD="POST"
SRC="../cgi-bin/form">
<INPUT TYPE="TEXT" NAME="username">
<INPUT TYPE="TEXT" NAME="emailAddress">
<INPUT TYPE="SUBMIT">
</FORM>
Indem Sie onSubmit="return checkform( this )" zu dem <FORM>-Tag hinzufⁿgen, wird die Funktion namens checkform() ausgefⁿhrt werden, bevor Netscape das Formular ⁿbermittelt. In checkform() k÷nnen Sie alle gewⁿnschten ▄berprⁿfungen durchfⁿhren und, wenn es Probleme gibt, die Formularⁿbermittlung verz÷gern und den Leser bitten, Berichtigungen durchzufⁿhren. Der this-Parameter, der innerhalb der Klammern (()) enthalten ist, wird benutzt, um der checkform()-Funktion anzugeben, welches Formular-Objekt mit dem <FORM>-Tag zusammenhΣngt. (Beachten Sie, da▀ Sie mehr darⁿber in Kapitel 24, ╗Mit JavaScript arbeiten½, erfahren werden.)
ZusΣtzlich k÷nnen Sie ein Feld nach dem anderen ⁿberprⁿfen, indem Sie einen der beiden Event-Handler onChange oder onBlur in jedem <INPUT>-Tag einfⁿgen. Da der Event-Handler onBlur jedesmal aufgerufen wird, wenn eine Person ein Feld verlΣ▀t, ist er ideal fⁿr Eingabeⁿberprⁿfungen.
Sie k÷nnen in Buttons wie dem Submit-Button auch onClick-Ereignisse aufnehmen, die aktiviert werden, wenn der Leser den angegebenen Button anklickt. Zum Beispiel wⁿrde <INPUT TYPE="SUBMIT" onClick="processclick()"> jedesmal die Funktion namens processclick() aufrufen, wenn der Submit-Button angeklickt wird.
|
JavaScript fⁿhrt einen neuen <INPUT>-Typ namens button ein, der einfach einen Button auf einer Webseite plaziert. |
Variablen
Abgesehen von den Eigenschaften erm÷glicht JavaScript es Ihnen auch, den sogenannten Variablen Werte zuzuordnen oder von ihnen abzurufen. Eine Variable ist im wesentlichen ein benutzerdefinierter Container, der eine Zahl, etwas Text oder ein Objekt enthalten kann. Aber im Unterschied zu den meisten h÷herentwickelten Sprachen, die Sie dazu zwingen, den Inhalt jeder Variable einem spezifischen Typ zuzuordnen, wird von den JavaScript-Variablen gesagt, da▀ sie eine Sprache mit lockeren Typen ist. Das bedeutet, da▀ Sie den Informationstyp, den die Variable beinhaltet, nicht angeben mⁿssen, wenn die Variable erzeugt wird. TatsΣchlich kann dieselbe Variable abhΣngig von Ihren Erfordernissen unterschiedlichen Datentypen zugeordnet werden.
Um eine Variable fⁿr ein JavaScript-Programm zu deklarieren, k÷nnten Sie folgendes schreiben:
var variablename = Wert ;
In dieser Form ist variablename jeder eindeutige Name, den Sie wΣhlen. Das Gleichheitszeichen (=), das dem variablename folgt, wird Zuordnungsoperator (assignment operator) genannt. Dieser weist JavaScript an, da▀ das, was sich auf der rechten Seite des Gleichheitszeichens befindet - also Wert -, der Variablen als Inhalt zugeordnet werden soll. Dieser Wert kann eine Textfolge, eine Zahl, eine Eigenschaft, das Resultat einer Funktion, ein Array, ein Datum oder sogar eine andere Variable sein. Hier kommt ein Beispiel:
var name = "Laura Lemay" ;
var age = 28 ;
var title = document.title ;
var documenturl = location.toString() ;
var myarray = new Array(10);
var todaysdate = new Date();
var myname = anothername ;
|
Variablennamen (und Funktionsnamen) k÷nnen aus den Buchstaben a bis z, den Zahlen 0 bis 9 und dem Unterstreichungssymbol (_) bestehen, der Name darf jedoch nicht mit einer Zahl beginnen. |
|
Wenn Sie eine Variable innerhalb einer Funktion deklarieren, werden Sie den Inhalt dieser Variablen nur von innerhalb der Funktion erreichen k÷nnen. Das wird der Gⁿltigkeitsbereich der Funktion genannt. Wenn Sie andererseits eine Variable innerhalb eines <Skript>-Blocks deklarieren, aber nicht innerhalb einer Funktion, k÷nnen Sie auf den Inhalt der Variablen von jedem Punkt auf der aktuellen Webseite zugreifen. |
Operatoren und Ausdrⁿcke
Nachdem eine Variable definiert wurde, k÷nnen Sie ⁿber ihren Inhalt verfⁿgen oder ihn Σndern, indem Sie die sogenannten Operatoren einsetzen. Tabelle 23.1 zΣhlt einige der beliebteren Operatoren auf, die von JavaScript zur Verfⁿgung gestellt werden, und beinhaltet auch jeweils ein Anwendungsbeispiel. (Wie gesagt, k÷nnen Sie eine vollstΣndige Liste aller unterstⁿtzten Operatoren in der Online-JavaScript-Dokumentation finden.)
|
Die Beispiele, die in der zweiten Spalte von Tabelle 23.1 gezeigt werden, werden Ausdrⁿcke (expressions) genannt. Im Prinzip ist ein Ausdruck eine gⁿltige Menge von Variablen, Operatoren und Ausdrⁿcken, die zu einem einzigen Wert umgerechnet werden. Zum Beispiel wird b+c zu einem einzigen Wert umgerechnet, der a zugeordnet wird. |
Es gibt auch einige spezielle Operatoren, die die Zuordnungsfunktion (=) und den Operator in einer einzigen Funktion vereinigen. Solche Operatoren werden Zuordnungsoperatoren genannt. Tabelle 23.2 zΣhlt die Zuordnungsoperatoren auf, die JavaScript beinhaltet.
Tabelle 23.1: JavaScript-Operatoren und -Ausdrⁿcke
Operator |
Beispiel |
Beschreibung |
a = b + c |
Addiert die Variablen b und c und ordnet das Ergebnis der Variablen a zu. |
|
a = b - c |
Subtrahiert den Wert der Variablen c von der Variablen b und ordnet das Ergebnis der Variablen a zu. |
|
a = b * c |
Multipliziert Variable b mit Variable c und ordnet das Ergebnis der Variablen a zu. |
|
a = b / c |
Teilt Variable b durch Variable c und ordnet das Ergebnis der Variablen a zu. |
|
a = b % c |
Errechnet b geteilt durch c und ordnet den Rest der Variablen a zu (Moduls). |
|
a = ++b |
Erh÷ht den Wert der Variablen b um 1 und ordnet das Ergebnis der Variablen a zu. |
|
a = --b |
Vermindert Variable b um 1 und ordnet das Ergebnis der Variablen a zu. |
Tabelle 23.2: JavaScript-Zuordnungsoperatoren
Zuordnungs-Operator |
Beispiel |
Beschreibung |
a += b |
Entspricht a = a + b. |
|
a -= b |
Entspricht a = a - b. |
|
a *= b |
Entspricht a = a * b. |
|
a /= b |
Entspricht a = a / b. |
|
a %= b |
Entspricht a = a % b. |
|
Die Operatoren + und += k÷nnen sowohl mit Zeichenkettenvariablen als auch mit numerischen Variablen verwendet werden. Wenn sie mit Zeichenketten verwendet werden, ist das Ergebnis von a = ╗text½ + ╗and more text½ eine Variable die ╗text and more text½ enthΣlt. |
Grundlegende JavaScript-Programmierung
Um alle Event-Handler, Methoden, Parameter, Funktionen, Variablen und Operatoren unter einen Hut zu bringen, enthΣlt JavaScript einige einfache Programmieraussagen, die denen von Java und Basic Σhneln.
Wenn Sie schon ⁿber ein wenig Programmiererfahrung verfⁿgen, k÷nnen Sie Ihre ersten JavaScript-Programme bereits schreiben, nachdem Sie einige Minuten damit verbracht haben, die Liste der unterstⁿtzten Aussagen zu ⁿberfliegen, die in der Online-Dokumentation von Netscape Communication besprochen werden. Fⁿr diejenigen unter Ihnen, denen diese Erfahrung fehlt, enthΣlt die folgende Sektion einen Schnellkurs ⁿber die Grundlagen der Programmierung.
Was ist ein Programm?
UnabhΣngig von der verwendeten Sprache besteht ein Programm einfach aus einer Vielzahl von Instruktionen, mit denen Sie Ihrem Computer eine Aktion oder eine Anzahl von Aktionen beschreiben, die Sie ihn ausfⁿhren lassen wollen. Im einfachsten Fall wird mit der Instruktion am Anfang einer Code-Liste begonnen und jede Instruktion auf der Liste einzeln abgearbeitet, bis das Ende erreicht ist:
<SCRIPT
LANGUAGE="JavaScript">
// Start des Programms - BEACHTEN SIE: zeilen, die mit '//' anfangen,
// werden als Kommentar behandelt
document.write("step one") ;
document.write("step two") ;
// Ende des Programms
</Skript>
Es kommt jedoch selten vor, da▀ Sie jemals ein Programm ununterbrochen durch ein Reihe von Schritten arbeiten lassen wollen - vor allem in JavaScript -, da es einfacher wΣre, die Botschaften auf dem Bildschirm mit HTML zu schreiben, als JavaScript zu verwenden. Aus diesem Grund enthalten die meisten Programmiersprachen verschiedene grundlegende Instruktionen, die es Ihnen erm÷glichen, den Flu▀ der Instruktionen zu kontrollieren.
Die erste dieser Anweisungen wird if-Aussage genannt. Im Prinzip erm÷glicht sie es Ihnen, Tests innerhalb des Programmcodes vorzunehmen, um herauszufinden, welche Teile des Programms in einer bestimmten Situation ausgefⁿhrt werden sollten. Nehmen wir mal an, da▀ Sie z.B. ein Web-Formular haben, das danach fragt, ob eine Person mΣnnlich oder weiblich sei. In solchen FΣllen wollen Sie der Person vielleicht eine geschlechtsspezifische Antwort geben, die auf dem angegebenen Geschlecht beruht:
if ( form.theSex.value == "male"
) {
document.write("Thank you for your response, Sir" ) ;
}
if ( form.theSex.value == "female") {
document.write("Thank you for your response, Madam" ) ;
}
Wenn dieser Code abliefe und die Eigenschaft form.theSex.value dem Wert "male" zugewiesen worden wΣre, wΣre die erste document.write()-Methode aufgerufen worden. Wenn es dem Wert "female" zugewiesen worden wΣre, wΣre die zweite Aussage abgebildet worden. Im Moment brauchen Sie sich keine Gedanken darⁿber zu machen, wie der Wert form.theSex.value zugeordnet wurde; darⁿber werden Sie mehr in Kapitel 24 erfahren.
Der Codeblock neben der if-Aussage fⁿhrt einen Vergleich zwischen der Eigenschaft form.theSex.value und dem Wort "male" durch. Dieser Vergleich wird durch sogenannte Vergleichsoperatoren kontrolliert. In diesem Fall wurde ein Test fⁿr Gleichwertigkeit durchgefⁿhrt, wie es durch das Symbol == verdeutlicht wird. Tabelle 23.3 fⁿhrt die Vergleichsoperatoren auf, die gegenwΣrtig von JavaScript erkannt werden.
Tabelle 23.3: JavaScript-Vergleichsoperatoren
Operator |
Operatorbeschreibung |
Kommentare |
== |
Ist gleich |
a == b: testet, um herauszufinden, ob a gleich b ist. |
!= |
Nicht gleich |
a != b: testet, um herauszufinden, ob a ungleich b ist. |
< |
Kleiner als |
a < b: testet, um herauszufinden, ob a kleiner als b ist. |
<= |
Kleiner oder gleich |
a <= b: testet, um herauszufinden, ob a kleiner oder gleich b ist. |
>= |
Gr÷▀er oder gleich |
a >= b: testet, um herauszufinden, ob a gr÷▀er oder gleich b ist. |
> |
Gr÷▀er als |
a > b: testet, um herauszufinden, ob a gr÷▀er als b ist. |
Das vorhergehende Beispiel hΣtte auch in einer leicht abgeΣnderten Form geschrieben werden k÷nnen, indem eine unterschiedliche Version der if-Aussage verwendet worden wΣre, die eine else-Aussage beinhaltet.
if ( form.theSex.value == "male"
) {
document.write("Thank you for your response, Sir" ) ;
}
else {
document.write("Thank you for your response, Madam" ) ;
}
In diesem Beispiel, bei dem es keine Notwendigkeit fⁿr einen zweiten if-Test gibt - da eine Person nur entweder mΣnnlich oder weiblich sein kann - wurde die else-Aussage benutzt, um das Programm anzuweisen, die zweite Nachricht abzubilden, wenn der erste Test fehlgeschlagen wΣre.
|
In beiden vorhergehenden Beispielen hΣtte jedem Ergebnis eine beliebige Anzahl von Aussagen zugeordnet werden k÷nnen, indem sie innerhalb des entsprechenden Klammernpaars eingefⁿgt worden wΣren. |
Schleifen
Manchmal werden Sie eine Anzahl von Anweisungen mehrfach durchlaufen lassen wollen. Es gibt zwei Schleifenarten von JavaScript, die diese Aufgabe ausfⁿhren. Die erste Art von Aussage, die for-Schleife genannt wird, ist ideal fⁿr Situationen, in denen Sie eine Gruppe von Instruktionen eine festgelegte Anzahl von Malen wiederholen m÷chten. Die zweite Art, die while-Schleife, eignet sich besser fⁿr Situationen, in denen die Anzahl der erforderlichen Schleifen von einer Σu▀eren Quelle bestimmt wird.
for-Schleifen
Die grundlegende Struktur einer for-Schleife sieht so aus:
for (var count = 1; count <= 10; ++count
) {
Ihre Aussagen gehoeren hierher
}
In diesem Beispiel wird eine Variable namens count aufgestellt und auf einen Wert 1 eingestellt. Dann wird ein Test durchgefⁿhrt, um herauszufinden, ob der Wert von count kleiner oder gleich 10 ist. Wenn ja, werden alle Aussagen innerhalb der Klammern {}, die der for-Aussage folgen, einmal ausgefⁿhrt. Der Wert von count wird dann durch die Aussage ++count um 1 inkrementiert und dann nochmals der Test count <= 10 durchgefⁿhrt. Wenn das Ergebnis immer noch wahr ist, werden alle Anweisungen innerhalb der Klammern nochmals ausgefⁿhrt. Dieser Vorgang geht weiter, bis der Wert von count gr÷▀er als 10 ist, womit die for-Schleife endet.
while-Schleifen
Die grundlegende Struktur einer while-Schleife sieht so aus:
while ( Bedingung ) {
Ihre Aussage gehoert hierher
}
Im Unterschied zur for-Schleife, die einen eingebauten Inkrementierungs-Mechanimus besitzt, ist der einzige erforderliche Test fⁿr eine while-Schleife das Ergebnis true (wahr) vom Bedingungs-Test, der der while-Aussage folgt. Dieser Test k÷nnte ein ─quivalenztest sein wie a==b oder jeder der anderen Tests, die bereits bei der if-Aussage erwΣhnt wurden.
Solange sich diese Bedingung als wahr erweist, werden die Aussagen innerhalb der Klammern, die der while-Schleife folgen, fⁿr immer weiterlaufen - oder wenigstens, bis Sie Ihren Web-Browser schlie▀en.
|
Wenn Sie while-Schleifen verwenden, sollten Sie es vermeiden, Endlosschleifen zu erzeugen. Wenn Sie es doch nicht lassen k÷nnen, ist so ziemlich Ihr einziger verbleibender Ausweg, um die Schleife anzuhalten, den Web-Browser zu beenden. |
Lernen Sie mehr ⁿber das Programmieren in JavaScript
Die Liste der Aussagen, Funktionen und Optionen, die in diesem Kapitel enthalten sind, reprΣsentieren nur einen Teil des Potentials, das von JavaScript angeboten wird. TatsΣchlich entwickelt und Σndert sich JavaScript immer noch mit jeder neuen Version von Netscapes Navigator-Browser.
Aus diesem Grund kann ich die Wichtigkeit der Online-Dokumentation, die von Netscape Communications geliefert wird (siehe Abbildung 23.2), gar nicht ⁿberbetonen. Alle neuen JavaScript-Verbesserungen und Features werden zuerst unter http://home.netscape.com/eng/mozilla/Gold/handbook/JavaScript/index.html dokumentiert. Au▀erdem sollten Sie sich unter http://home.netscape.com/eng/mozilla/Gold/handbook/JavaScript/index.html informieren, wo noch mehr Informationen ⁿber JavaScript im allgemeinen einschlie▀lich Anwendungsbeispielen und zusΣtzlichen Schritt-fⁿr-Schritt-ErklΣrungen angeboten werden.
Abbildung 23.2: |
Zusammenfassung
JavaScript bietet HTML-Publizisten die M÷glichkeit, einfache Programme oder Skripten in einer Webseite einzufⁿgen, ohne sich mit den vielen Schwierigkeiten auseinandersetzen zu mⁿssen, die beim Programmieren in h÷heren Programmiersprachen wie Java oder C++ auftreten.
In diesem Kapitel haben Sie das <Skript>-Tag und seine Anwendung zur Einbettung von JavaScript-Programmen in HTML-Dokumenten kennengelernt. Au▀erdem haben Sie auch die grundlegende Struktur und einige der Aussagen und Funktionen der JavaScript-Sprache erkundet.
Nachdem Sie nun dieses grundlegende Wissen hinter sich haben, werden Sie im nΣchsten Kapitel einige aus dem Leben gegriffene Beispiele von JavaScript kennenlernen und mehr ⁿber die Konzepte erfahren, die mit JavaScript zusammenhΣngen.
Fragen und Antworten
Frage:
Braucht man nicht eine Entwicklungsumgebung, um mit JavaScript arbeiten zu k÷nnen?
Antwort:
Nein, nein. Genauso wie bei HTML ist alles, was Sie zum Schreiben von JavaScript ben÷tigen, ein Texteditor. Sie verwechseln vielleicht JavaScript mit Java, das eine umfassendere Programmiersprache ist, die zumindest einen Compiler ben÷tigt, um das Programm ausfⁿhren zu k÷nnen.
Frage:
Sind Java und JavaScript kompatibel?
Antwort:
Das hΣngt davon ab, was Sie als ╗kompatibel½ bezeichnen. Java und JavaScript haben eine ganze Menge der Syntax gemeinsam, dennoch gehen die ─hnlichkeiten zwischen den beiden kaum darⁿber hinaus. JavaScript-Skripten k÷nnen nicht mit einem Java-Compiler kompiliert werden, noch k÷nnen Java-Programme so in einer HTML-Datei aufgenommen werden, wie das bei JavaScript-Skripten der Fall ist. Java-Programme erfordern einen Java-Compiler und werden dann als ausfⁿhrbare Programme in Webseiten aufgenommen, wohingegen JavaScript-Skripten in Code-Form interpretiert werden, wΣhrend die HTML-Seite heruntergeladen wird.
Mit Netscape 3 stellte Netscape LiveConnect vor, das Plug-Ins, Java und JavaScript die M÷glichkeit gibt, miteinander zu interagieren. Eine JavaScript-Ereignisbehandlung z.B. k÷nnte verwendet werden, um einen Methodenaufruf in einem eingebetteten Java-Applet auszul÷sen. Oder ein Java-Applet k÷nnte eine JavaScript-Funktion aufrufen, um ein HTML-Formular zu aktualisieren.
Frage:
In Java und C++ war ich daran gew÷hnt, Variablen mit Ausdrⁿcken wie int, char und String zu definieren. Warum kann ich dies in JavaScript nicht tun?
Antwort:
Weil das nicht geht. Wie schon gesagt, ist JavaScript eine sehr locker strukturierte Sprache. Das bedeutet, da▀ alle Variablen jede Form annehmen und sogar dynamisch geΣndert werden k÷nnen. Als Ergebnis davon bestimmt der Werttyp, der einer Variable zugeordnet wird, automatisch den Variablentyp.
Copyright ⌐1998 by SAMS, einem Imprint
der Markt&Technik Buch- und
Software-Verlag GmbH.
Elektronische Fassung des Titels: HTML 4 in 14 Tagen, ISBN: 3-8272-2019-X
