Webseiten erstellen mit Javascript
Folgender Artikel wurde von Herrn
Boris Schäling
in der Kategorie "JavaScript"
bereitgestellt.
Die Entwicklung dynamischer Webseiten mit der Programmiersprache Javascript ist Thema dieses Online-Buchs. Sie lernen in einem eigenen Kapitel die Programmiersprache Javascript kennen und setzen Sie in einfachen Beispielen ein. In den nachfolgenden Kapiteln wird dann mit Javascript direkt auf Webseiten zugegriffen, um beispielsweise Formular-Eingaben zu überprüfen und Bilder beim Überfahren mit der Maus auszutauschen.
|
Tipps und Tricks
5.1 DHTMLDie Objekthierarchie des Microsoft Internet ExplorersIm vorherigen Kapitel haben Sie die in Javascript integrierte Objekthierarchie DOM 0 kennengelernt. Sie wissen nun, aus welchen Objekten dieses Modell besteht und wie Sie auf verschiedene Elemente der Webseite per Javascript zugreifen können. Sie wissen auch, dass dieses Modell nur sehr eingeschränkten Zugriff auf Elemente bietet: Die wichtigsten Objekte sind Wollen Sie wirklich uneingeschränkt beliebige Elemente in Webseiten in Javascript dynamisch bearbeiten, so steht Ihnen ab dem Microsoft Internet Explorer 4 ein alternatives Objektmodell zur Verfügung: DHTML steht für Dynamic HTML und bietet Zugriff auf wirklich alle Elemente in Webseiten. Sie können in DHTML auf jedes Element einer Webseite zugreifen und es bearbeiten. Während das Objektmodell DOM 0 noch recht übersichtlich war und sich in einer kleinen Grafik veranschaulichen ließ, platzt DHTML aus allen Nähten. Um wirklich Zugriff auf jedes Element einer Webseite zu bieten besteht die Objekthierarchie von DHTML aus derart vielen Objekten, dass es nicht möglich ist, diese alle mal eben in einem Diagramm unterzubringen. Die grundlegenden Zugriffstechniken auf Objekte in DHTML werden jedoch im Folgenden vorgestellt. In DOM 0 stehen zwei Möglichkeiten zur Verfügung, um ein Element eindeutig zu identifizieren: Entweder hangeln Sie sich die Objekthierarchie hinunter und geben jeweils einen nummerischen Index an, um beispielsweise auf das fünfte Bild im aktuellen Dokument zuzugreifen. Oder aber Sie geben dem Bild mit dem HTML-Attribut DHTML bedient sich eines anderen Mechanismus: Sie müssen, um ein Element Ihrer Webseite per Javascript ansprechen zu können, diesem im HTML-Code das Attribut Nachdem Sie den Elementen, die Sie in Javascript ansprechen möchten, einfach einen Um nun auf Elemente per DHTML zuzugreifen, hat Microsoft ein neues Objekt eingeführt und dies an das DOM 0-Objekt <html>
<head>
</head>
<body>
<form action="">
<input type="text" id="oInput" value="Hallo, Welt!">
</form>
<script language="jscript">
alert(window.document.all.oInput.value);
</script>
</body>
</html>
Im Beispiel wird über das Objekt Wie Sie sehen wird zuerst über die aus DOM 0 bekannten Objekte Wie Sie aus dem vorherigen Kapitel wissen kann die Angabe des Objekts alert(document.all.oInput.value); DHTML bietet eine noch kürzere Schreibweise an: Sie können alert(oInput.value); Wenn Sie obiges Beispiel mit der verkürzten Schreibweise ausprobieren führt dies zu einer Fehlermeldung im Internet Explorer. Obwohl der <html>
<head>
</head>
<body>
<form action="" id="oForm">
<input type="text" id="oInput" value="Hallo, Welt!">
</form>
<script language="jscript">
alert(oForm.oInput.value);
</script>
</body>
</html>
Falls Sie also Probleme haben, direkt über den Über die Vergabe eines Welche Eigenschaften ein konkretes Objekt in DHTML bietet und welche Methoden Sie aufrufen können, ob die Eigenschaften nur gelesen oder auch beschrieben werden können - das können Sie nur anhand von Referenzen herausfinden. Microsoft stellt online im Microsoft Developer Network eine wahrhaft riesige Referenz zur Verfügung, die Ihnen Überblick über jedes einzelne Objekt bietet und erklärt, inwiefern es innerhalb von DHTML bearbeitet werden kann. Ein paar interessante Eigenschaften und Methoden stehen jedoch jedem beliebigen Objekt in DHTML zur Verfügung. <html>
<head>
<script language="jscript">
function clickme()
{
oChange.innerText = "Danke, dass Sie geklickt haben!";
}
</script>
</head>
<body>
<span id="oChange" onclick="clickme();">Klick mich!</span>
</body>
</html>
Über die Eigenschaft Im folgenden Beispiel wird nicht auf die Eigenschaft <html>
<head>
<script language="jscript">
function clickme()
{
oChange.outerHTML = "<input type='button' value='Danke, dass Sie geklickt haben!'>";
}
</script>
</head>
<body>
<span id="oChange" onclick="clickme();">Klick mich!</span>
</body>
</html>
Während über die Eigenschaft Beim Zuweisen von Text an die Eigenschaft Sie haben in den Beispielen bisher ebenfalls gesehen, dass Event-Handler wie beispielsweise Zusätzlich zum erweiterten Einsatz von Event-Handlern definiert DHTML auch eine ganze Reihe neuer Event-Handler. So können Sie innerhalb von Javascript auf viel mehr Benutzereingaben reagieren und dynamischere Webseiten erstellen als mit DOM 0. Sie können beispielsweise nicht nur Mausereignisse abfangen, sondern auch Tastatureingaben. Welche Objekte welche Event-Handler unterstützen kann auch nur wieder der Blick in eine Referenz zeigen. DHTML ist so umfangreich und bietet derart viele Möglichkeiten an, dass es nicht möglich ist, sich alle Einsatzgebiete von Event-Handlern zu merken. 5.2 Eigenschaften von Objekten auflistenHilfreiche Javascript-RoutineDie spezielle <html>
<head>
</head>
<body>
<span id="oChange">Klick mich!</span>
<script language="jscript">
for (var element in oChange)
{
document.write(element + "=" + oChange[element] + "<br>");
}
</script>
</body>
</html>
Innerhalb der oChange.value Sie können stattdessen das Objekt auch als Array betrachten und den Namen der Eigenschaft als Index in eckigen Klammern angeben. oChange["value"] Beide Schreibweisen sind identisch und beliebig austauschbar. Nachdem in der Die vorgestellte Routine ist hilfreich, um in einem Browser zu überprüfen, welche Eigenschaften von einem Objekt zur Verfügung gestellt werden und auf welche Werte die Eigenschaften momentan gesetzt sind. Diese Routine funktioniert grundsätzlich auch mit dem Netscape Navigator und kann in allen Objekthierarchien verwendet werden. Wichtig ist nur, dass Sie hinter dem Schlüsselwort Wenn Sie obige Routine in anderen Browsern einsetzen wollen, vergessen Sie nicht, das Attribut 5.3 Browser abfragenBrowserabhängiger CodeIm ersten Kapitel haben Sie bereits gesehen, dass die Programmiersprache Javascript in verschiedenen Versionen vorliegt. Neben Javascript bietet Microsoft die Programmiersprache JScript an, die einen größeren Befehlsumfang als Javascript besitzt. Außerdem unterstützen die Browser verschiedene Objekthierarchien. Es ist daher in der Praxis oft notwendig, innerhalb von Javascript zu überprüfen, in welchem Browser und welcher Version das Script gerade abläuft. Damit kann verhindert werden, dass Javascript-Befehle verwendet werden oder auf Objekte zugegriffen wird, die im aktuellen Browser nicht zur Verfügung stehen. Am weitesten verbreitet ist folgende Überprüfung. <html>
<head>
<script type="text/javascript">
if (document.all)
{
alert("DHTML im Microsoft Internet Explorer 4+");
}
else if (document.layers)
{
alert("Layers im Netscape Navigator 4");
}
else if (document.getElementById)
{
alert("DOM 1/2");
}
else
{
alert("DOM 0");
}
</script>
</head>
<body>
</body>
</html>
Hinter dem Schlüsselwort Indem nun zwischen den runden Klammern die Existenz verschiedener Objekte überprüft wird, kann jeweils Code für einen bestimmten Browser in den nachfolgenden Anweisungsblock gestellt werden. Für den Microsoft Internet Explorer wird überprüft, ob das Objekt Kennt der Browser Kennt der Browser Beachten Sie, dass es sich bei Steht auch die Funktion Eine Überprüfung auf das Vorhandensein bestimmter Objekte wird im Internet in den Javascript-Expertenforen zum Teil kritisch gesehen. Das Problem ist, dass lediglich die Existenz eines Objektes nicht bedeutet, dass das Objekt genau für den von Ihnen vorgesehenen Zweck verwendet werden kann. Es kann ja sein, dass beispielsweise ein anderer Browser-Hersteller ein Objekt Praktisch gesehen spielt dieses Szenario jedoch überhaupt keine Rolle. Der Browser-Markt wird hauptsächlich zwischen Microsoft und Netscape aufgeteilt. Daneben gibt es keine anderen Objektmodelle - wenn doch, kommen sie so selten vor, dass sich um diese anderen Objektmodelle niemand kümmert. Wer es dennoch ganz genau machen möchte, der überprüft einen Browser über das aus DOM 0 bekannte Objekt 5.4 DOM 1/2Der offizielle StandardSo schön die Möglichkeiten von DHTML sind - dieses Objektmodell steht ausschließlich im Microsoft Internet Explorer zur Verfügung. Um zu verhindern, dass nun jeder Browser-Hersteller sein eigenes Objektmodell erfindet und mit Microsoft gleichzieht, arbeitet das W3C an einem gemeinsamen Standard für das Erstellen dynamischer Webseiten. Dieser Standard liegt inzwischen in der zweiten Version vor. DOM 2 baut jedoch auf DOM 1 lediglich auf und stellt eine Erweiterung dar. Es handelt sich also um ein Objektmodell, das in zwei kompatiblen Versionen vorliegt. Genauso wie in DHTML werden in DOM 1/2 Elemente in Webseiten über das Attribut <html>
<head>
<script type="text/javascript">
function clickme()
{
var obj = document.getElementById("oChange");
obj.firstChild.nodeValue = "Danke, dass Sie geklickt haben!";
}
</script>
</head>
<body>
<span id="oChange" onclick="clickme();">Klick mich!</span>
</body>
</html>
Bei Mausklick auf das Nachdem Sie das Objekt erhalten und in einer beliebigen Variable gespeichert haben, können Sie es bearbeiten. DOM 1/2 unterscheidet drei Objekttypen: Es gibt HTML-Tags, HTML-Attribute und Text. Alles, was nicht in spitzen Klammern steht, sondern zwischen einem geöffneten und einem geschlossenen Tag, ist Text. Im Beispiel wird über den Das Geniale an DOM 1/2 ist nun folgendes: Diese Objekthierarchie besteht nicht aus ganz konkreten Objekten, die alle eine ganz konkrete Eltern-Kind-Beziehung besitzen. Das Objektmodell richtet sich vielmehr nach dem in der Webseite verwendeten HTML-Code. Ein Objekt ist hierbei dann ein Eltern-Objekt, wenn zwischen dem geöffneten und dem geschlossenen HTML-Tag des Objekts weitere Objekte liegen. Auf das obige Beispiel übertragen bedeutet das, dass das DOM 1/2 erfordert demnach nicht wie DOM 0 oder DHTML ein Auswendiglernen von Objekthierarchien und Eltern-Kind-Beziehungen. Stattdessen richtet sich das Modell jeweils nach dem aktuell verwendeten Code. Mit einem Blick in Ihren Code können Sie sofort sehen, welche Eltern-Objekte welche Kind-Objekte besitzen. Verändern Sie den HTML-Code, verändern sich auch die Objektbeziehungen. Das Modell passt sich also punktgenau an das Dokument an - besser kann ein Document Object Model nicht sein. Sie wissen bereits, dass Sie über den Die Eigenschaft Nachdem nun über Betrachten Sie nun folgendes Beispiel. <html>
<head>
<script type="text/javascript">
function clickme()
{
var obj = document.getElementById("oBody");
obj.firstChild.firstChild.nodeValue = "Danke, dass Sie geklickt haben!";
}
</script>
</head>
<body id="oBody">
<span onclick="clickme();">Klick mich!</span>
</body>
</html>
Wenn Sie das Beispiel im Browser ausprobieren geschieht das gleiche wie im vorherigen Beispiel: Der angeklickte Text wird wieder ersetzt. Innerhalb der Funktion Wichtig ist: Über den Nachdem Sie nun wissen, wie Sie Objekte in Javascript ansprechen können, stellt sich die Frage, welche Eigenschaften diese Objekte eigentlich besitzen. Auch hier zeigt sich der geniale Ansatz von DOM 1/2: Ein Objekt besitzt genau die gleichen Eigenschaften wie der entsprechende HTML-Tag. Wenn der <html>
<head>
<script type="text/javascript">
var Prozent = 99;
function clickme()
{
if (Prozent >= 0)
{
var obj = document.getElementById("oMouse");
obj.width = 319 * Prozent / 100;
obj.height = 450 * Prozent / 100;
--Prozent;
}
}
</script>
</head>
<body>
<input type="button" onclick="clickme();" value="Klick mich!"><br>
<img src="maus.gif" width="319" height="450" id="oMouse">
</body>
</html>
Die Webseite zeigt eine Schaltfläche und eine Grafik an. Der Grafik ist der Neben den Eigenschaften, die den Attributen der HTML-Tags entsprechen, stellt DOM 1/2 ein paar Funktionen zur Verfügung, über die beispielsweise Objekte eingefügt und verschoben werden können. Betrachten Sie hierzu folgendes Beispiel. <html>
<head>
<script type="text/javascript">
function clickme()
{
var oBody = document.getElementById("oBody");
oBody.insertBefore(oBody.firstChild, oBody.lastChild);
}
</script>
</head>
<body id="oBody">
<div><input type="button" onclick="clickme();" value="Klick mich!"></div>
<img src="maus.gif" width="319" height="450">
</body>
</html>
In diesem Fall werden bei Mausklick die Positionen der Schaltfläche und der Grafik ausgetauscht. Die Funktion Abschließend noch kurz ein Wort zu Event-Handlern in DOM 1/2: Wie in DHTML erweitert auch DOM 1/2 die zur Verfügung stehenden Event-Handler. Ebenfalls wie in DHTML können auch in DOM 1/2 für fast jedes beliebige Element in einer Webseite Ereignisse abgefangen werden. So kann der Event-Handler 5.5 AufgabenÜbung macht den Meister
5.6 Weiterführende InformationenLinks ins Internet
|
