Anzeige
Tutorialbeschreibung

Javascript und Ajax - JavaScript einbauen

Javascript und Ajax - JavaScript einbauen

In dem 3. Kapitel geht es um das einbinden von Javascript. Du erfährst, welche die sichersten Varianten sind und wie diese sich Verhalten. Leichte Ausgaben werden hier auch schon getätigt.


Das nun folgende Tutorial ist ein Auszug aus der 7. Auflage des Buches: JavaScript und Ajax von Christian Wenz.
Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Galileo Press.

Kapitel 3 JavaScript einbauen

Aller Anfang ist schwer – bei JavaScript allerdings ist er recht einfach. Dieses Kapitel zeigt Ihnen einige Grundlagen von JavaScript; am Wichtigsten ist natürlich, wie Sie überhaupt JavaScript-Code in Ihre Seiten einbauen können. Eine komplette Spracheinführung folgt dann im nächsten Kapitel.

 

3.1 Verwendung von <script> 
topBilder

Nun kommen wir endlich zur Erstellung von JavaScript. Wie ich bereits erwähnt habe, wird JavaScript in HTML integriert; Sie arbeiten also hauptsächlich mit HTML-Dateien, die Sie in einem einfachen Texteditor erstellen können.

JavaScript-Kommandos können an mehreren Stellen einer HTML-Datei untergebracht werden:

gpBilder
 
zwischen den Tags <script> und </script>
gpBilder
 
in einer externen Datei
gpBilder
 
in Form eines HTML-Links
gpBilder
 
als Parameter von HTML-Tags

In den folgenden Abschnitten werden die einzelnen Möglichkeiten der Reihe nach vorgestellt und erläutert.

Als Beispiel hierzu dient die Anweisung document.write("The weather means the seasons"), die den Text "The weather means the seasons" ausgibt. Warum dieser Befehl so funktioniert, erfahren Sie in den nächsten Kapiteln; fürs Erste müssen Sie mir einfach vertrauen.

Die naheliegendste Methode, JavaScript-Befehle auszuführen, besteht darin, das<script>-Tag zu verwenden. Folgender Code sorgt dafür, dass »The weather means the seasons« ausgegeben wird:

<script>
document.write("The weather means the seasons");
</script>

Befehle werden in JavaScript untereinander – einer pro Zeile – dargestellt. Wenn Sie mehrere Kommandos in einer Zeile unterbringen wollen, müssen Sie die Anweisungen durch ein Semikolon voneinander trennen. Im Gegensatz zu anderen Programmiersprachen (beispielsweise Java) muss aber keineswegs jedes Kommando mit einem Strichpunkt enden. In der ersten Version der JavaScript-Sprachspezifikation war das Semikolon am Ende jeder Anweisung strikt vorgeschrieben. Inzwischen wurde aber davon Abstand genommen, und jeder JavaScript-Programmierer hat seinen eigenen Stil. Prinzipiell haben die Strichpunkte den Sinn, dem JavaScript-Interpreter (also dem Bestandteil des Browsers, der den JavaScript-Code ausführt) mitzuteilen, an welcher Stelle eine Anweisung endet. Es gibt auch Programmiersprachen, bei denen das Zeilenende das Ende einer Anweisung markiert. In JavaScript ist beides möglich. Um den Code sauber zu halten und um bei Programmierfehlern schneller die Fehlerquelle zu finden, verzichte ich nicht auf optionale Strichpunkte. Es ist Ihnen aber natürlich freigestellt, sich einen anderen Stil anzueignen – insbesondere, wenn Sie bereits Erfahrungen in einer Programmiersprache gesammelt haben, in der keine Strichpunkte vorkommen (z.  B. Visual Basic/VBScript).

Die beiden folgenden Anweisungen sind also äquivalent. Einmal stehen die beiden Befehle in verschiedenen Zeilen, einmal in einer Zeile.

<script>
document.write("The weather ");
document.write("means the seasons");
</script>

und

<script>
document.write("The weather "); document.write("means the seasons");
</script>

JavaScript-Code wird hierbei vom JavaScript-Interpreter des verwendeten Browsers ausgeführt. Betrachten Sie zum Beispiel folgendes HTML-Dokument:

<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script>
document.write("The weather means the seasons");
</script>
</body>
</html>

Wenn es vom Browser interpretiert worden ist und dieser Browser JavaScript unterstützt, verhält es sich so wie folgendes HTML-Dokument:

<html>
<head>
<title>JavaScript</title>
</head>
<body>
The weather means the seasons
</body>
</html>

Nehmen Sie es mir bitte nicht übel, wenn die ersten Beispiele in diesem Kapitel nicht unbedingt die breite Funktionspalette von JavaScript demonstrieren.

Wenn Sie dieses oder eines der anderen Beispiele im Buch im Microsoft Internet Explorer 6 unter Windows XP aufrufen (mit allen aktuellen Patches), erhalten Sie die in Abbildung 3.1 gezeigte Fehlermeldung. Sie müssen ein paar Mal klicken, bis der Code ausgeführt wird. Hierfür gibt es zwei Gegenmittel:

gpBilder
 
Installieren Sie einen lokalen Webserver, und rufen Sie die Beispiele über den Webserver auf.
gpBilder
 
Aktivieren Sie die Checkbox unter Extras N Internetoptionen Erweitert N Sicherheit N Ausführung aktiver Inhalte in Dateien auf dem lokalen Computer zulassen.

Bilder

Abbildung 3.1     Der Internet Explorer 6 warnt vor lokalem JavaScript-Code.

 

3.1.1 Das language-Attribut  

Das obige Beispiel ist streng genommen etwas unsauber. Das <script>-Tag eignet sich auch für andere Programmiersprachen, die in HTML-Dokumente eingebettet werden können, beispielsweise für Visual Basic Script (VBScript) oder JScript (keine Sorge, Sie haben nicht aufs falsche Pferd gesetzt: Diese beiden Sprachen funktionieren nur im Internet Explorer). Dazu diente früher das Attribut language des <script>-Tags. Ist es nicht gesetzt – wie im obigen Beispiel –, so wird angenommen, dass die zwischen den Tags stehenden Kommandos in JavaScript verfasst wurden (deswegen funktioniert obiges Beispiel auch). Aber um auf Nummer sicher zu gehen – es könnte ja sein, dass eine neue Version des Microsoft Internet Explorers als Standardsprache VBScript annimmt –, könnte man Folgendes schreiben:

<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script language="JavaScript">
document.write("The weather means the seasons");
</script>
</body>
</html>

XHTML schreibt vor, dass das type-Attribut gesetzt werden muss, in unserem Fall auf "text/javascript". Deswegen verwenden die Listings in den Folgekapiteln in den allermeisten Fällen das type-Attribut, denn nur ältere Browser werten nur das language-Attribut aus.

Wie Sie in Kapitel 1 erfahren haben, gibt es mehrere Versionen von JavaScript. Sie können im language-Attribut auch explizit eine der Versionen angeben. Der folgende Code wird nur von Browsern ausgeführt, die JavaScript Version 1.1 unterstützen (historische Randnotiz: das sind insbesondere der Netscape Navigator ab Version 3 und der Microsoft Internet Explorer ab Version 4):

<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script language="JavaScript1.1">
document.write("The weather means the seasons");
</script>
</body>
</html>

Noch ältere Browser, beispielsweise der Internet Explorer 3, ignorieren den JavaScript-Befehl und geben nichts aus.

Zur Zeit der Drucklegung (September 2006) sind die in der folgenden Tabelle aufgeführten Parameter gültig.

 

Tabelle 3.1     Die Parameter für <script language="…">

Parameter Bedeutung
JavaScript Jeder Browser, der JavaScript unterstützt
JavaScript1.1 Alle Browser, die mindestens die JavaScript-Version 1.1 unterstützen (ab NN3, IE4)
JavaScript1.2 Alle Browser, die mindestens die JavaScript-Version 1.2 unterstützen (ab NN4, IE5)
JavaScript1.3 Alle Browser, die mindestens die JavaScript-Version 1.3 unterstützen (ab Netscape Navigator 4.06, IE5)
JavaScript1.4 Ab Netscape 6/Mozilla
JavaScript1.5 Ab Netscape 6/Mozilla
JavaScript1.6 Ab Firefox 1.5
JavaSrcipt1.7 Ab Firefox 2.0

 

Mit der folgenden HTML-Seite können Sie überprüfen, welche JavaScript-Versionen der jeweilige Browser unterstützt:

<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script language="JavaScript">
document.write("Der Browser unterstützt JavaScript
<hr />");
</script>
<script language="JavaScript1.1">
document.write("Der Browser unterstützt JavaScript v1.1<hr />");
</script>
<script language="JavaScript1.2">
document.write("Der Browser unterstützt JavaScript v1.2<hr />");
</script>
<script language="JavaScript1.3">
document.write("Der Browser unterstützt JavaScript v1.3<hr />");
</script>
<script language="JavaScript1.4">
document.write("Der Browser unterstützt JavaScript v1.4<hr />");
</script>
<script language="JavaScript1.5">
document.write("Der Browser unterstützt JavaScript v1.5<hr />");
</script>
</body>
</html>

In Abbildung 2.1 sehen Sie beispielsweise, was der Internet Explorer 6 ausgibt.

Bilder

Abbildung 3.2     Die vom Internet Explorer 6 unterstützten JavaScript-Versionen

Beachten Sie bei obigem Beispiel, dass man mit document.write() insbesondere auch HTML-Code, in diesem Fall das <hr>-Tag für eine horizontale Linie, ausgeben kann.

Der folgenden Tabelle entnehmen Sie, welche Parameter ausgewählte Browserversionen erkennen bzw. unterstützen:

 

Tabelle 3.2     Die von ausgewählten Browsern unterstützten Parameter <script language="...">

Browser Unterstützte Parameter
Netscape 4.00 – 4.05 JavaScript1.0 bis JavaScript1.2
Netscape 4.06 – 4.8 JavaScript1.0 bis JavaScript1.3
Netscape 6/7/8, Mozilla, Firefox JavaScript1.0 bis JavaScript1.5
Internet Explorer 4 JavaScript1.0 bis JavaScript1.2
Internet Explorer 5/5.5/6/7 JavaScript1.0 bis JavaScript1.3
Opera 5.x/6/7/8/9 JavaScript1.0 bis JavaScript1.4
Konqueror/Safari JavaScript1.0 bis JavaScript1.4

 

Durch die Verwendung spezieller language-Attribute können Sie Fehlermeldungen vermeiden, die bei der Verwendung von zu modernen JavaScript-Kommandos erscheinen würden. Wenn Sie also Sprachelemente von JavaScript verwenden, die erst ab Version 1.1 unterstützt werden, sollten Sie das language-Attribut auf "JavaScript1.1" setzen; ältere Browser ignorieren dann die Befehle völlig.

Das stimmt leider nicht immer. Besonders »schlimm« ist in diesem Zusammenhang jedoch Konqueror und damit auch Safari. Es scheint zu genügen, dass der Wert des language-Attributs mit "JavaScript" beginnt. Fügt man beispielsweise in obiges Listing noch einen Block mit <script language="JavaScript1.6"> ein, würde auch dieser ausgeführt werden, obwohl das nicht zutrifft (siehe Abbildung 3.3).

Bilder

Abbildung 3.3     Konqueror kennt (angeblich) schon JavaScript 1.6!

Aus diesem Grund prüft man heutzutage kaum mehr die exakte JavaScript-Version, die ein Browser unterstützt, sondern man prüft, welche JavaScript-Features ein Browser umsetzen kann. Zahlreiche Beispiele dazu finden Sie im weiteren Verlauf dieses Buches.

 

3.1.2 Browser ohne JavaScript 

So schön ein Programm auch auf dem eigenen Rechner laufen mag – es kommt darauf an, dass es beim Kunden und bei allen Besuchern (nun gut, sagen wir, bei den meisten Besuchern) der Website läuft. In vielen Firmennetzwerken ist es beispielsweise so, dass JavaScript aus Sicherheitsgründen nicht aktiviert werden darf. Die Beispiele von oben sehen dann so aus wie in Abbildung 3.4.

Bilder

Abbildung 3.4     Die Ausgabe bei deaktiviertem JavaScript: Gähnende Leere

Bei ganz alten Browsern ist es noch schlimmer: Zuweilen sieht man sogar den JavaScript-Code. Sie können sich aber hier mit einem kleinen Trick behelfen: Mit <!-- wird ein HTML-Kommentar eingeleitet; alles dahinter wird vom HTML-Interpreter ignoriert, jedoch nicht vom JavaScript-Interpreter!

<script language="JavaScript"><!--

Nun stellt sich die Frage, wie der HTML-Kommentar beendet wird. Probieren Sie einmal die einfachste Variante aus, nämlich einfach ein Kommentar-Ende-Tag (-->) vor dem </script>:

<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script language="JavaScript"><!--
document.write("The weather means the seasons");
--></script>
</body>
</html>

Wenn Sie diese Seite im Browser laden, erhalten Sie unter Umständen eine Fehlermeldung, vor allem in älteren Browsern. Der Grund: Der JavaScript-Interpreter interpretiert --> als JavaScript-Befehl und liefert eine Fehlermeldung.

Aber auch hier gibt es einen kleinen Trick, mit dem Sie dieses Hindernis aus dem Weg räumen können. Mit // leitet man einen Kommentar im JavaScript-Code ein. Die Verwendung von Kommentaren ist bei der Programmierung sehr wichtig, damit man auch Wochen später noch weiß, was man damals eigentlich beabsichtigt hat, und damit auch andere Menschen mit dem Code arbeiten können. Es gibt zwei Arten von Kommentaren:

gpBilder
 
 //: Hiermit wird ein einzeiliger Kommentar eingeleitet; alles hinter den beiden Querstrichen in der jeweiligen Zeile wird vom JavaScript-Interpreter ignoriert.
gpBilder
 
 /* und */: Hiermit wird ein mehrzeiliger Kommentar eingeleitet; alles nach /* wird vom JavaScript-Interpreter ignoriert, bis die Zeichenfolge */ kommt und den Kommentar abschließt.

Im folgenden Listing sehen Sie Beispiele für Kommentare:

<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script language="JavaScript">
// Hier wird auf generelle JavaScript-Unterstützung geprüft
document.write("Der Browser unterstützt
JavaScript<hr />");
</script>
<script language="JavaScript1.1">
/* Hier geht es um JavaScript 1.1 */
document.write("Der Browser unterstützt JavaScript v1.1<hr />");
</script>
<script language="JavaScript1.2">
// JavaScript 1.2 wird überprüft,
// und zwar gründlich
document.write("Der Browser unterstützt JavaScript v1.2<hr />");
</script>
<script language="JavaScript1.3">

/* JavaScript 1.3 wurde mit Navigator 4.06 eingeführt */
document.write("Der Browser unterstützt JavaScript v1.3<hr />");
</script>
<script language="JavaScript1.4">
document.write("Der Browser unterstützt JavaScript v1.4<hr />");
</script>
<script language="JavaScript1.5">
document.write("Der Browser unterstützt JavaScript v1.5<hr />");
</script>
</body>
</html>

Kommen wir zum ursprünglichen Problem zurück. Der Browser gibt eine Fehlermeldung aus, weil --> als JavaScript-Code interpretiert wird und nicht als HTML-Element. Wenn dem --> jedoch ein // vorangestellt wird, ignoriert der JavaScript-Interpreter diesen Code; der HTML-Interpreter jedoch stellt fest, dass der Kommentar zu Ende ist. Der folgende Code wird von Browsern, die JavaScript unterstützen, ausgeführt. Browser, die kein JavaScript unterstützen oder bei denen JavaScript deaktiviert ist, sehen einen HTML-Kommentar, ignorieren das Innere und geben folglich nichts aus, auch keinen puren JavaScript-Code.

<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script language="JavaScript"><!--
document.write("The weather means the seasons");
//--></script>
</body>
</html>

Bei modernen (nicht JavaScript-fähigen) Browsern ist es allerdings nicht mehr notwendig, den JavaScript-Code durch ein Kommentarzeichen zu verstecken.

Sie sehen an den obigen Beispielen, dass es relativ einfach ist, bei Browsern, die JavaScript unterstützen, einen Text auszugeben. Der andere Weg ist aber auch möglich. Es gibt hierfür ein besonderes HTML-Element, <noscript>, das so ähnlich wie <noframes> funktioniert. Damit sind folgende Szenarien denkbar:

gpBilder
 
Der Browser unterstützt kein JavaScript, egal, ob das <noscript>-Tag bekannt ist oder nicht. Es wird notfalls ignoriert, und die darauf folgenden HTML-Elemente werden interpretiert (bzw. der Inhalt wird angezeigt).
gpBilder
 
Der Browser unterstützt JavaScript, und es ist auch eingeschaltet. Dann wird alles, was zwischen <noscript> und </noscript> steht, nicht dargestellt.
gpBilder
 
Der Browser unterstützt JavaScript, es ist jedoch ausgeschaltet. Dann wird auch all das dargestellt, was zwischen <noscript> und </noscript> steht.
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script language="JavaScript"><!--
document.write("The weather means the seasons");
//--></script>
<noscript>
Ihr Browser kann mit JavaScript nichts anfangen, oder es ist ausgeschaltet!
</noscript>
</body>
</html>

Denken Sie immer auch an diejenigen Besucher, die JavaScript deaktiviert haben oder deren Browser (man denke nur an die eingeschränkten Browser von Handhelds) kein JavaScript unterstützt. Erstellen Sie notfalls eine Version Ihrer Website, die auch ohne JavaScript funktioniert.

Abbildung 3.5 zeigt, dass das tatsächlich funktioniert: Sie sehen obiges Dokument im klassischen Text-Webbrowser Lynx.

Bilder

Abbildung 3.5     Kein JavaScript beim Text-Browser Lynx

 

3.1.3 Externe Dateien 
topBilder

Wenn Sie später einmal JavaScript-Programme schreiben, die auf mehreren unterschiedlichen Seiten benötigt werden, wäre es eigentlich ziemlich töricht, dasselbe Skript in mehrere Seiten zu kopieren – der Aufwand bei Änderungen am Skript wäre beträchtlich, da mehrere Dateien geöffnet und geändert werden müssten.

Es gibt hier auf den ersten Blick einen Ausweg, der aber auf den zweiten Blick auch seine Nachteile hat. Zuerst zur grauen Theorie: Man kann beim <script>-Tag im Attribut src den Namen einer externen Datei mit JavaScript-Kommandos angeben. Als Dateiendung hat sich hierbei .js durchgesetzt. Es empfiehlt sich, für alle externen Dateien ein eigenes Verzeichnis anzulegen, damit diese alle gesammelt an einem zentralen Ort zu finden sind.

Angenommen, folgende Datei ist auf dem Webserver im virtuellen Verzeichnis js unter dem Namen weather.js gespeichert:

//erste externe JavaScript-Datei
document.write("The weather means the seasons");

Sie wird folgendermaßen in ein HTML-Dokument eingebunden, um dieselbe Wirkung zu erzielen wie das Dokument aus dem vorigen Beispiel:

<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script language="JavaScript" src="/js/weather.js">
</script>
</body>
</html>

Natürlich kann auch hier das language-Attribut gesetzt werden (in den nächsten Kapiteln setzen wir aber aus den zuvor genannten Gründen auf type). Bei dem folgenden Dokument wird nur etwas ausgegeben, wenn der Browser JavaScript Version 1.1 unterstützt:

<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script language="JavaScript1.1" src="/js/weather.js">
</script>
</body>
</html>

Dieses Vorgehen birgt aber auch einen kleinen Fallstrick: Probieren Sie doch einmal Folgendes in Ihrem Browser aus:

<html>
<body>
<script language="JavaScript" src="/js/weather.js"><!--
document.write("<br />Invincibility is in oneself,
vulnerability is in the opponent");
//--></script>
</body>
</html>

Bilder

Abbildung 3.6     Nur ein Zitat wird angezeigt.

Das Ergebnis sehen Sie in Abbildung 3.6: Der Inhalt des <script>-Elements wird ignoriert. Der Grund: Ist das src-Attribut des <script>-Tags gesetzt, wird eingeschlossener JavaScript-Code nicht betrachtet; ist src nicht gesetzt, so wird der eingeschlossene Code ausgeführt. Um also beide Sätze auszugeben, muss das HTML-Dokument folgendermaßen abgeändert werden:

<html>
<body>
<script language="JavaScript" src="/js/weather.js"></script>
<script language="JavaScript"><!--
document.write("<br />Invincibility is in oneself, vulnerability is in the opponent");
//--></script>
</body>
</html>

Obwohl externe Dateien sehr praktisch und auch recht weit verbreitet sind, haben sie einen Nachteil: Sie werden in der Regel erst dann geladen, wenn das komplette HTML-Dokument vorliegt. Es kann also unter Umständen ein wenig dauern, bis der Code vorliegt. Das kann bei komplexeren Beispielen durchaus zu Timing-Problemen führen. Sollten in diesem Buch externe Dateien verwendet werden, so dient das in der Regel der Übersichtlichkeit des Codes. Behalten Sie aber das potenzielle Timing-Problem im Hinterkopf.

 

3.2 JavaScript-Links 
topBilder
topBilder

JavaScript-Befehle werden oft aufgrund von Benutzereingaben ausgeführt. Eine Möglichkeit besteht darin, eine Aktion durch einen Mausklick zu starten. Bevor ein paar Beispiele vorgestellt werden, muss noch ein neuer JavaScript-Befehl eingeführt werden. Mit window.alert("Invincibility is in oneself, vulnerability is in the opponent") wird ein modales Fenster ausgegeben, das den Text »Invincibility is in oneself, vulnerability is in the opponent« anzeigt. Je nach verwendetem Browser sieht das etwas anders aus; in Abbildung 3.7 sehen Sie die Darstellung im Firefox und in Abbildung 3.8 im Safari-Browser. Sie sehen daran, dass Sie auf das grafische Layout keinen Einfluss nehmen können, denn das wird vom jeweiligen Browser übernommen.

AbbildungBilder

Abbildung 3.7     Ein Warnfenster mit dem Firefox

AbbildungBilder

Abbildung 3.8     Dieselbe Meldung, diesmal im Mac-Browser Safari

HTML-Links können auf URLs mit den verschiedensten Protokollen verweisen, so zum Beispiel http:, ftp:, news: oder mailto:. Nun kommt ein weiteres Protokoll hinzu, das jedoch lediglich im Zusammenhang mit JavaScript eine Bedeutung hat: javascript:. Folgender Link gibt »Invincibility is in oneself, vulnerability is in the opponent« in einem modalen Fenster aus, wenn man darauf klickt:

<a href="javascript:window.alert('Invincibility is in oneself, vulnerability is in the opponent');">

Beachten Sie die Anführungszeichen. In JavaScript ist es prinzipiell egal, ob Sie einfache oder doppelte Anführungszeichen verwenden – Hauptsache, Sie hören so auf, wie Sie angefangen haben.

Folgendes ist also völlig korrekt:

document.write("The weather means the seasons");
document.write('<br />Invincibility is in oneself,
vulnerability is in the opponent');

Falsch ist dagegen:

document.write("The weather means the seasons ');
document.write('<br />Invincibility is in oneself,
vulnerability is in the opponent");

Obwohl man mit dem Pseudo-Protokoll javascript: bequem JavaScript-Befehle aufrufen kann, gibt es doch einen kleinen Nachteil: Browser, die kein JavaScript unterstützen, geben eine Fehlermeldung aus. Im folgenden Abschnitt wird diesem Missstand abgeholfen.

 

3.3 Event-Handler 
topBilder
topBilder

Ohne anderen Kapiteln allzu sehr vorgreifen zu wollen – wenn Sie bestimmte Aktionen ausführen, beispielsweise die Maus bewegen oder auf einen Link klicken, tritt JavaScript-intern ein so genanntes Ereignis (engl. event) ein. Manche dieser Ereignisse können Sie mit JavaScript abfangen und darauf reagieren. Dazu benötigen Sie Event-Handler, die als Attribute mancher HTML-Tags in den HTML-Code eingebunden werden. Eine vollständige Auflistung aller wichtigen Event-Handler finden Sie in der Referenz; davor werden die wichtigsten Handler in den jeweiligen Kapiteln anhand eines Beispiels vorgestellt.

Grundsätzlich gilt Folgendes: Ein Event-Handler beginnt stets mit on. Der Event-Handler, der zuständig ist, wenn auf einen Link geklickt wird, heißt onclick. Wenn folgender Link angeklickt wird, wird ein modales Fenster geöffnet:

<a href="irgendwohin.html" onclick="alert(
'Invincibility is in oneself, vulnerability is in the opponent');">Sun Tzu</a>

Vom Prinzip her wunderbar – Browser, die JavaScript unterstützen, führen den Code aus, folgen danach aber dem Link (in späteren Kapiteln dazu mehr). Ältere Browser »sehen« nur den Link und versuchen, das Ziel des Links aufzurufen. Das ist aber in der Regel nicht erwünscht. Das href-Attribut des Links muss gesetzt werden, sonst wird er nicht angezeigt. Es gibt aber eine Möglichkeit, einen Link anzugeben, der keine neue Seite lädt:

<a href="#" onclick="alert('Invincibility is in oneself,
vulnerability is in the opponent');">Sun Tzu</a>

Diesen Trick sollten Sie sich gut merken!

 

3.4 JavaScript-Entities 
topBilder
topBilder

Die letzte Möglichkeit, um JavaScript-Code in das HTML-Dokument einzubetten, wird sehr selten verwendet, was unter anderem auch daran liegt, dass hier nur Werte von HTML-Attributen gesetzt werden können – und dass es nur mit dem alten Netscape funktioniert. Sie kennen sicherlich HTML-Entities, die mit & beginnen und mit ; enden. Ein Beispiel ist die HTML-Entity für Ä, &Auml;. JavaScript-Entities sind ganz ähnlich aufgebaut: Sie beginnen mit &, enden mit ;, und dazwischen steht ein JavaScript-Ausdruck. Für dieses Beispiel wird ein weiteres neues JavaScript-Kommando eingeführt (genauer: eine Objekteigenschaft, aber dazu später mehr): location.protocol gibt das verwendete Protokoll der aktuellen Seite vor, also beispielsweise file: bei lokalen Dateien und http: bei Dateien aus dem World Wide Web. In dem folgenden Dokument wird das value-Attribut eines Texteingabefelds auf den Wert von location.protocol gesetzt. Die JavaScript-Entity heißt &{location. protocol}; – beachten Sie insbesondere, dass der JavaScript-Ausdruck in geschweifte Klammern eingeschlossen werden muss!

<html>
<head>
<title>JavaScript-Entities</title>
</head>
<body>
<form>

Protokoll: <input type="text"
   value="&{location.protocol};" />
</form>
</body>
</html>

Bilder

Abbildung 3.9     HTML-Attribute mit Entities setzen – leider nicht in allen Browsern

Das Tutorial ist ein Auszug aus der 7. Auflage des Buches von Christian Wenz:

JavaScript und Ajax - Das umfassende Handbuch
Galileo Computing, 853 Seiten, 8. aktualisierte Auflage

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Galileo Press.

Mehr Informationen zum aktualisierten Fachbuch für Webentwickler gibt es hier: JavaScript und Ajax
 
Alle Kapitel des Buches:
1 Grundlagen
2 JavaScript-Praxis
3 Professionelles JavaScript
4 Web 2.0 und Ajax
5 Kommunikation
6 Serverseitige Programmierung
7 Sicherheit
8 Praxis
9 Anhang
Bilder


 

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Sedad
  • 10.01.2018 - 22:29

Danke !

Portrait von skyflight1981
x
×
×