Embed Size (px)
Citation preview
JavaScript - Einführung
1. Ein Wort zuvor Leider muss ich gestehen, dass sich mein Know-How in Punkto JavaScript lange, lange Zeit in Grenzen hielt. Das Ganze beruhte auf einer Art Trauma, das ich um 1999 erlitten haben muss. Damals gab es noch keine PopUp-Blocker. Ich besuchte eine Seite (nicht mal Schweinkram!), wollte sie schließen und 5000 neue Fenster gingen auf, immer und immer wieder. Das führte dazu, das sich mein Internet Explorer total verabschiedete und ich Windows (damals noch 98) komplett neu installieren musste. Danach habe ich JavaScript deaktiviert, und mich jahrelang nicht mehr darum gekümmert. Ab Mitte 2003 fing ich an, mich ein wenig mit diesem Thema zu beschäftigen, und das auch fast nur in Kombination mit der Manipulation von CSS-Anweisungen. Erst seit dem AJAX-Hype habe ich mich wirklich intensiv damit beschäftigt. Das werdet ihr hier im Theorieteil nicht sonderlich merken, aber bei den Tutorials werde ich euch peu à peu mit meinem erworbenen Wissen quälen. Auch wenn ich selber zugegebenermaßen des Öfteren immer noch nicht ganz begreife, was es mit dieser Sprache auf sich hat.
2. Einführung JavaScript ist nicht Java! Entwickelt wurde die Sprache im Jahre 1995 von der Firma Netscape (kennt die noch einer?), um den hauseigenen Browser namens Navigator (kennt den noch einer?) um zusätzliche Funktionalitäten zu erweitern. Die ursprüngliche Bezeichnung war LiveScript, wurde aber im Zuge des Java-Hypes Anfang 1996 in JavaScript umbenannt. Trotz des ähnliche klingenden Namens hat diese Sprach NICHTS mit Java gemeinsam, außer der sehr ähnlichen Syntax. Java ist eine plattformunabhängige Hochsprache, die in einen so genannten nativen Bytecode umgewandelt und dann von einer Virtual Machine ausgeführt wird. JavaScript dagegen ist, wie der Name schon sagt, eine Scriptsprache, die im Browser interpretiert wird. Aus Sicherheitsgründen werden die Scripte in einer so genannten "Sandbox" ausgeführt, die verhindert, dass man direkten Zugriff auf das lokale Dateisystem hat.
3. Schreibweise Auch hier wird auf die Java- C++-Syntax zurückgegriffen. Semikolon am Ende jeder Zeile, geschweifte Klammern, bis die rechte Hand schmerzt, und Kommentare werden durch /* ... */ oder // gekennzeichnet. Ein Beispiel könnte so aussehen.
function tuWas ()
{
// einzeiliger Kommentar
setze Variable a = 1;
/**************************/
/* mehrzeiliger Kommentar */
/**************************/
machIrgendwas (hiermit);
}
Gut, tut es in der Realität zwar nicht, aber hier geht's nur um einen ersten Einblick. Darum auch "könnte".
4. AJAX Dieser Begriff taucht immer wieder im Zusammenhang mit dem derzeit so heiß geliebten Buzzword Web 2.0 auf. Dabei handelt sich um eine Technik, die seit der Einführung der Internet Explorers 5.0 verfügbar ist. Das ist auch einer der wenigen Augenblicke, wo man
Microsoft für eine wirklich gute Idee danken muss. Ja, nicht ungläubig den Kopf schütteln, das Ajax-Prinzip wurde wirklich von denen zum ersten Mal umgesetzt. Letztendlich geht es dabei darum, Daten im Hintergrund zu verarbeiten, ohne eine Seite komplett neu laden zu müssen. Ob aus diesem Hype sich ein Standard entwickelt, bleibt abzuwarten. Ich denke dabei vor allem an die oben beschriebene Java-Hysterie Mitte der 90er Jahre. Davon ist im Internet auch nur ein laues Lüftchen geblieben. Zumindest gemessen an den Erwartungen, die damals viele hatten. Ajax selber bietet trotz diverser Nachteile Möglichkeiten, die sehr interessant sind. Daher habe ich auch bei den Tutorials ein kleines Beispiel für euch parat, das euch einen ersten Einblick in die Materie liefert.
JavaScript - Einführung - DOM
1. Erläuterung Was jetzt kommt, hatten wir doch schon einmal. Genau bei den Prinzipien der Kaskadierung von Cascading Style Sheets. Da habt ihr (hoffentlich) gelernt, dass HTML-Dokumente eine hierarchische Struktur haben. Es gibt Eltern- und Kindelemente, die in einem bestimmten Verhältnis zueinander stehen. Das Ganze nennt sich Document Object Model. Zur Erinnerung zeige ich euch noch mal das Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Mein Titel</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<h1>Hier kommt eine Überschrift</h1>
<p>Es folgt ein Absatz mit ein wenig Text</p>
<table>
<tr>
<td>Text Spalte 1</td>
<td>Text Spalte 2</td>
<td>Text Spalte 3</td>
</tr>
</table>
<!--Hier folgt noch eine Liste-->
<ul>
<li>Krä</li>
<li>Bla</li>
<li>Schwall</li>
<li>Blubb</li>
<li>Blubber</li>
</ul>
</body>
</html>
2. Grafische Darstellung
Durch diesen Aufbau ergibt sich eine Baumstruktur, die sich durch folgende Punkte auszeichnet:
• Aus den so genannten Wurzelknoten (zum Beispiel <table> und <ul>) ergeben sich Verwandtschaftsbeziehungen
• Die Wurzelknoten sind die Elternelemente (parents)
• Die anderen Knotenpunkte sind die Kindelemente (childs)
• Gleichwertige Knoten werden als Geschwister (siblings) bezeichnet, also zum Beispiel die <li>- und <td>-Elemente
• Ausgehend vom obersten Wurzelknoten kann man jedes weitere Element ansprechen
3. Knotenarten
• Dokumentknoten (er stellt die gesamte Baumstruktur dar)
• Dokumentfragmentknoten (stellt einen Ausschnitt der Baumstruktur dar)
• Elementknoten (repräsentiert ein HTML-Element)
• Attributknoten (repräsentiert ein Attribut eines HTML-Element)
• Textknoten (Textinhalt eines HTML-Elements oder Attributs) Eine Besonderheit sind die Attributknoten. Sie "hängen" nicht in der Baumsstruktur, sondern sind Eigenschaften der Elementknoten.
JavaScript - Einführung - Einbindung
JavaScript-Code kann an praktisch jeder Stelle innerhalb eines HTML-Dokumentes eingefügt werden. Dazu gibt es ähnlich wie bei CSS drei Möglichkeiten.
1. In HTML-Tags Hier können so genannte Event-Handler platziert werden. Das sind Routinen, die auf bestimmte Aktionen des Benutzers reagieren. Dabei können zum Beispiel Funktionen oder Methoden aufgerufen werden. Ich bringe hier nur ein kleines Beispiel, die Details kommen später.
<img src="button.gif" onclick="alert('Hallo');">
2. Innerhalb eines HTML-Dokuments Hier wird der JavaScript-Code innerhalb des <script>-Tags eingebunden. Allerdings solltet ihr nicht die alte Schreibweise benutzen
<script language="javascript">
...Hier kommt der Code ...
</script>
sondern die neue
<script type="text/javascript">
...Hier kommt der Code ...
</script>
Für die Hardcore-Programmierer gibt es noch eine dritte Variante:
<script type="text/javascript" language="javascript">
...Hier kommt der Code ...
</script>
Üblicherweise solltet ihr analog zu den CSS-Anweisungen alles im Kopf der jeweiligen Datei zusammenfassen, also zum Beispiel:
<html>
<head>
<title>JavaScript</title>
<script type="text/javascript">
function openWindow (uri)
{
window.open (uri,'News','width=500,height=350');
}
</script>
</head>
<body>
...
</body>
</html>
3. In einer externen Datei Funktioniert genau so wie bei den CSS-Dateien, nur die Syntax ist ein klein wenig anders:
<script src="menue.js" type="text/javascript"></script>
4. Wann was Auch hier gelten mal wieder (fast) dieselben Grundsätze, die ich schon bei den Cascading Style Sheets erläutert habe.
• JavaScript-Code, der auf allen (oder den meisten) Seiten Gültigkeit hat, lagere ich in eine externe Datei aus.
• Scripte, die nur in einer Seite benötigt werden, definiere ich im Kopf der jeweiligen Datei.
• Event-Handler können (sollten aber nicht mehr) in HTML-Tags eingebunden werden.
5. Pfade Im Gegensatz zu CSS muss man in JavaScript die Pfade, zum Beispiel zu Bildern RELATIV zum HTML-Dokument setzen, in denen die externen JavaScript-Dateien eingebunden sind.
JavaScript - Grundlagen - Einführung
1. Ein Wort zuvor Wie ich schon unter dem Menüpunkt Einführung sagte, sollte man sich lieber erst mit PHP beschäftigen und sich dann erst auf JavaScript stürzen. Daher findet ihr einen gute Einstieg zur Theorie der Programmierung bei PHP - Grundlagen. Alles, was ihr dort zum den Themen "Variablen", "Typisierung", "Operatoren" und "Funktionen" erfahrt, gilt auch für JavaScript. Das Prinzip ist das Selbe, die Unterschiede werde ich hier herausstellen.
2. Variablen Im Gegensatz zu PHP beginnen Variablen in JavaScript NICHT mit einem $-Zeichen. Ansonsten gelten die Regeln wie bei PHP, mit einer Ausnahme. Es dürfen keine so genannten reservierten Wörter benutzt werden. Deklaration von Variablen In JavaScript gibt es das Schlüsselwort var, dessen Sinn ich eigentlich nie ganz begriffen habe. Manchmal braucht man es, manchmal nicht, und keine Sau weiß, warum.
var meine_variable = 1;
Na ja, so ganz stimmt die Aussage nicht. var benötigt man zum Beispiel, um Variablen als global zu definieren. Das bedeutet, dass sie innerhalb eines Scriptes überall verfügbar sind. "Variable" Variablen ... werden bei JavaScript in eckige Klammern gesetzt. Will man zum Beispiel dynamisch auf ein Formularelement zugreifen, so muss man das so machen:
formfeld = 'vorname';
formularname[formfeld].value = ''
// entspricht formularname.vorname.value
2. Typisierung, Operatoren, Funktionen Typisierung Alles derselbe Quark bei schwach typisierten Sprachen. Also nachsehen bei PHP - Grundlagen - Typisierung. Operatoren Alles derselbe Quark, also PHP - Grundlagen - Operatoren. Einen Unterschied gibt es aber. Der Verknüpfungsoperator ist in JavaScript nicht der Punkt (den braucht man hier für andere Dinge) sondern das Plus-Zeichen.
var verknuepfi = 'Peter ' + 'Kropff';
Funktionen Dito, also PHP - Grundlagen - Funktionen
3. Bedingungen, Schleifen Auch hier sind die Prinzipien bei den Bedingungen und Schleifen die Selben. Es gibt nur zwei Ausnahmen, die foreach-Schleife existiert in JavaScript nicht und die Verarbeitung von Arrays funktioniert anders. Zu letzterem komme ich später, aber zu Ersterem gibt es eine Alternative. for in Dies ist das Pendant zu foreach in PHP und funktioniert fast genau so. Spielt mal ein wenig damit herum, dann werdet ihr die Feinheiten schon kennen lernen.
var blubb = new Array ();
blubb['bla'] = 'Laber';
blubb['schwall'] = 'Sülz';
blubb['kräh'] = 'Jodelbla';
for (bla in blubb)
{
alert (bla + '-' + blubb[bla]);
}
4. Reservierter Wörter Da in JavaScript Variablen kein $ vor dem Namen haben, kann das zu Kollisionen führen. Nehmen wir mal folgendes Beispiel. Wir vergeben in PHP und JavaScript eine Variable mit demselben Namen:
<?php
$var = 'irgendwas';
?>
<script type="text/javascript">
var = 'irgendwas';
</script>
Nun, die erste Variante ist erlaubt, die zweite nicht. Warum? Ganz einfach, var ist in JavaScript ein so genanntes Schlüsselwort, das zur Initialisierung einer Variable dient. Und dann kracht es. Daher darf man bestimmte Worte bei der Vergabe von Variablen- oder Funktionsnamen nicht verwenden. Eine komplette Liste findet ihr bei SelfHTML.
JavaScript - Grundlagen - Objekte
1. Objekte Dieser Begriff stammt aus der Objekt Orientierten Programmierung (OOP). So, und jetzt gehen wahrscheinlich wieder die Streitigkeiten los, ob JavaScript nun objektorientiert oder objektbasiert ist. Mir ist das wurscht, also halte ich mich da raus. Was genau sind nun Objekte und was bedeuten sie? Also, ein Objekt ist ein Ding, mit dem man etwas machen kann oder das etwas hat. Toll, und nun? Nehmen wir mal als Beispiel ein Auto. Das ist dann unser Objekt. Nach welchen Kriterien wählen wir es aus? Farbe, Marke, Sicherheit und was weiß ich nicht. Das sind die Eigenschaften. Dann machen wir etwas damit. Wir fahren, putzen, reparieren es, stehen damit im Stau, führen liebevolle Gespräche, verfluchen es oder setzen es gegen einen Baum. Das sind die Methoden. Jedes Objekt kann ein oder mehrere Unterobjekte besitzen. Ein Auto hat zusätzlich einen Motor, Sitze, Radio, Räder, und so weiter. Und auch die verfügen über Eigenschaften und Methoden.
2. Eigenschaften Wie schon oben beschrieben, hat ein Objekt Eigenschaften. Diese kann man auslesen oder unter Umständen verändern. Man muss sich das in etwa so vorstellen. Unser Objekt Auto hat die Farbe rot. Die kann ich in Erfahrung bringen, indem ich mir die Kiste anschaue. Man hat aber auch die Möglichkeit, sie zu ändern, also wenn man seine Rostlaube in eine Lackiererei bringe und sage:
"Mach mich mal de Karre in blau." [Quelle: Dieter Koslowski aus Herne]
Leute aus anderen Gegenden benutzen natürlich ein anderes Idiom.
3. Methoden Habe ich auch schon beschrieben. Dabei handelt es sich um alles, was wir mit unserem Gefährt anstellen.
4. Die Sache mit den Pünktchen Durch die starke Anlehnung an Java und das DOM mit seiner Baumstruktur werden die einzelnen Objekte mit ihren Eigenschaften und Methoden durch einen Punkt zu einer Einheit verbunden. Vom Prinzip her müsst ihr euch das so vorstellen:
objekt.unterobjekt.eigenschaft;
objekt.unterobjekt.methode;
Um mal bei unserem Beispiel mit dem Auto zu bleiben, könnte die Verarbeitung von Eigenschaften so aussehen:
// Eigenschaft abfragen
sag_farbe = auto.farbe;
// Eigenschaft eines Unterobjektes ändern
auto.radio.hersteller = 'irgendein Koreaner';
Bei den Methoden könnte man folgendes machen
auto.radio.aufdreh();
auto.fahrOmaUm();
auto.verschrott();
auto.sitze.schmeissweg();
JavaScript - Grundlagen - Event-Handler
1. Begriffsbestimmung Ein EVENT ist ein Ereignis und ein HANDLER ist etwas, das dieses Ereignis kontrolliert. Bei jedweder Software versteht man darunter Aktionen des Benutzers. Und wie kann der den Ablauf eines Programms beeinflussen? Genau, mit so genannten Eingabegeräten. Da haben wir zum Beispiel die Maus oder auch Tastatur.
2. Maus-Ereignisse Was glaubt ihr, wie viele Möglichkeiten ihr habt, um mit der Maus ein wie auch immer geartetes Programm zu steuern? Es sind etliche. JavaScript stellt uns aber nicht alle zur Verfügung, die möglich sind, sondern nur Einige. Dabei handelt es sich um Folgende:
• onmouseover = Maus in ein Element bewegen
• onmouseout = Maus aus einen Element heraus bewegen
• onmousemove = Maus bewegen
• onmousedown = Maustaste drücken
• onmouseup = Maustaste rauf
• onclick = Maustaste klicken
• ondblclick = Maustaste doppelklicken
3. Tastatur-Ereignisse Bei der Eingabe per Tastatur haben wir deutlich weniger Möglichkeiten. Es sind dero dreien:
• onkeydown = Taste drücken
• onkeyup = Taste loslassen
• onkeypress = Taste gedrückt halten
3. Weitere Ereignisse Neben den oben beschriebenen stellt uns JavaScript noch Internet-spezifische Ereignisse zur Verfügung. Die beziehen sich zum einen auf Standard- und zum anderen auf spezielle Formularereignisse. Standardereignisse
• onload = HTML-Seite laden
• onunload = HTML-Seite verlassen
• onabort = laden der HTML-Seite abbrechen
• onfocus = wenn ein Element aktiviert wird Formularereignisse
• onsubmit = Formular abschicken
• onreset = Formular zurücksetzen
• onselect = Inhalt eines Formularelements mit der Maus markieren
• onchange = Ändern des Inhaltes eines select-Feldes
JavaScript - Grundlagen - Arrays
1. Hinweis In meiner PHP-Einführung zum Thema Arrays habe ich die grundsätzliche Arbeitsweise mit Arrays schon ausführlich erläutert. Also lest euch das bitte zuerst durch, damit ihr wisst, um was es sich eigentlich handelt. Hier geht es nur noch um die Besonderheiten bei JavaScript.
2. Das Objekt Bei den Grundlagen zu den Arrays in PHP habe ich euch schon die Wirkungsweise und Vorteile zu vermitteln versucht. Kommen wir nun zum großen Unterschied. Wie ich eingangs bereits erwähnte, sind Arrays in JavaScript keine "verketteten" Listen wie in PHP (leider), sondern Objekte. Das macht das Arbeiten damit nicht besonders komfortabel, aber da müssen wir durch.
3. Erzeugen eines Array-Objektes Hier stellt uns JavaScript drei grundsätzliche Möglichkeiten zur Verfügung, mit denen man im Gegensatz zu PHP IMMER anfangen muss.
var mein_array = new Object ();
var mein_array = Array ();
var mein_array = new Array ();
Fragt mich bitte nicht nach dem Unterschied zwischen Array und new Array, das habe ich bis heute noch nicht begriffen. Was die Initialisierung mittels Object angeht, so kann ich euch sagen, dass in diesem Fall zum Beispiel eine Abfrage der Anzahl über mein_array.length nicht funktioniert. Solche Arrays müssen immer mit einer for ... in Schleife ausgelesen werden. Um auf Nummer sicher zu gehen, sollte man immer die Standardmethode new Array nehmen. Mehrdimensionale Arrays Sobald in JavaScript ein Array ein weiteres enthalten soll, muss man wieder so vorgehen wie oben. Es ist leider nicht möglich, einfach mit eckigen Klammern zu arbeiten, so wie man das aus PHP gewohnt ist:
var mein_array = new Array ();
mein_array [0] = new Array ();
4. Vergabe eines Indizes Solange man ein Array nicht so mit Inhalten befüllt bla = new Array ('blubb','blubber'), muss man immer explizit einen Index angeben, völlig egal ob der nun numerisch oder alphanumerisch ist:
var mein_array = new Array ();
mein_array[0] = 'blubb';
meine_array['bla'] = 'blubber';
So etwas wie in PHP ist leider nicht möglich:
<?php
$name[] = 'Hinz';
$name[] = 'Kunz';
?>
5. Assoziative Arrays ... gibt es in JavaScript NICHT! Man kann dem Kind zwar einen Namen geben (mein_array['bla']), muss aber auf eines achten. Sollte es sich um Zahlen handeln, auch wenn sie von der Schreibweise her Strings sind, so wird die Reihenfolge des Arrays entsprechend geändert. Leider machen das sowohl der Internet Explorer als auch der Firefox genau genommen falsch. Testet mal folgenden Code im Opera, dann werdet ihr sehen, was ich meine:
index = new Array ('172','181','168');
mein_array = new Array ();
for (i in index)
{
mein_array[index[i]] = i;
}
for (i in mein_array)
{
alert (i);
}
Wichtig! Eine weitere Krankheit von JavaScript ist, dass man die Anzahl der Array-Einträge nur bei numerischen Arrays über length abfragen kann. Und auch dann nur, wenn die Indizes bei 0 beginnen und dann fortlaufend durchnummeriert sind! Probiert das folgende Beispiel mal aus und wundert euch:
index = new Array ('172','181','168');
mein_array = new Array ();
for (i in index)
{
mein_array[index[i]] = i;
}
alert (mein_array.length);
JavaScript - Objekte Teil 1 - Einführung
1. DOM-Objekte In diesem Kapitel dreht sich alles um die Objekte, die direkt in das DOM "eingehängt" sind. Dabei handelt es sich um alle Elemente, mit denen man direkt Einfluss auf ein Browserfenster und dessen Inhalt nehmen kann. Die anderen Objekte erläutere ich im zweiten Teil. Allerdings müsst ihr die folgenden Abschnitte nicht komplett durchlesen. Werft einen Blick drauf, damit ihr später wisst, was es so gibt.
2. Auswahl Ihr bekommt hier keinen kompletten Überblick, sondern nur eine gezielte Auswahl. Ich werde also zum Beispiel das frame-Objekt komplett ignorieren, (da wir ja nicht mehr mit Frames arbeiten wollen), oder diese dämliche Statuszeile links unten im Browserfenster, die eh keine Sau mehr interessiert. Auch ignoriere ich alles, was ich im praktischen Einsatz bisher noch nie benutzt habe oder sich mit HTML-Attributen beschäftigt, die das Aussehen beeinflussen. Eine vollständige Übersicht findet ihr bei SelfHTML
3. Der Internet Explorer ... kocht auch hier mal wieder seine eigenes Süppchen. Daher habe ich eine Extra-Seite (IE only) eingerichtet, die auf diese Besonderheiten eingeht.
4. Kompatibilität Wann welcher Browser was wie versteht, könnt ihr an den kleinen Bildchen erkennen, die ich hinter allem Wichtigen platziere. Das sieht dann so aus: Objekt, Methode, Eigenschaft
Dabei beziehe ich mich auf die aktuellen Versionen, soll heißen Firefox 1.0.x, 1.5.x, 2.0.x, Opera 8.x, Netscape 8.x, Safari 1.x und Internet Explorer 6.0, 7.0.
5. Die DOM-Elemente Ebene 1 An oberster Stelle steht das Objekt window. Es ist praktisch der Stammvater aller Weiteren, die da folgen werden. Ebene 2 Unterhalb des window-Objektes gibt es vier Dokumentfragmentknoten. Dabei handelt es sich um event, history, location und document. Eine Besonderheit stellt dabei document dar, da es das einzige Objekt dieser Ebene ist, das über weitere Unterobjekte verfügt. Ebene 3 Hierbei handelt es sich wie oben schon gesagt um alle Unterobjekte von document. Wir haben node, images, links und forms. Letzteres ist das einzige Objekt, das wiederum über Unterobjekte verfügt. Ebene 4 und 5 Mit elements kann man auf alle Elemente eines Formulars zugreifen, options als Unterobjekt bezieht sich auf die einzelnen Angaben in einem select-Feld. Die Details findet ihr der Übersichtlichkeit halber unter dem Abschnitt forms.
JavaScript - Objekte Teil 1 - window
1. Das Objekt Das window-Objekt steht in der Hierarchie des DOM an oberster Stelle. Daneben gibt es keine weiteren. Damit steuern wir ein Fenster als Ganzes. Dieses Objekt verfügt über Eigenschaften und Methoden.
2. Eigenschaften innerHeight, innerWidth
Hiermit kann die innere Höhe und Breite eines Fensters abgefragt und gesetzt werden, also alles im eigentlichen Fenster ohne Menüleiste, Favoriten, Statuszeile, und so weiter.
breite = window.innerWidth;
window.innerWidth = 400px;
outerHeight, outerWidth
Hiermit kann die Gesamthöhe und -breite eines Fensters abgefragt und gesetzt werden.
hoehe = window.outerHeight;
window.outerHeight = 400px;
pageYOffset, pageXOffset
Fragt die aktuelle horizontale, bzw. vertikale Position innerhalb einer Seite ab. Diese Eigenschaft kann wunderbar mit der Methode scrollTo kombiniert werden.
left_posi = window.pageXOffset;
name
Speichert und ändert den Namen eines Fensters. Ist besonders sinnvoll im Zusammenhang mit der Methode open.
3. Methoden alert
Gibt eine Fehlermeldung aus. Eignet sich hervoragend, um nach Fehlern zu suchen oder auf fehlerhafte Benutzereingaben des Users zu reagieren.
breite = window.innerWidth;
if (breite < 740)
{
alert ('Bitte die Fensterbreite vergrößern');
}
open
Öffnet ein neues Fenster. Im Gegensatz zur HTML-Attribut target="_blank" hat man deutlich mehr Einflussmöglichkeiten. Diese Methode erwartet mindestens zwei Parameter, optional
drei. Der erste ist der Name der Datei, der zweite der Name des Fensters und im dritten definieren wir das Aussehen, also Größe, Darstellung, Scrollleisten und so weiter. Der dritte Parameter
• height, width (px) = Breite und Höhe des Fensters
• left, top (px) = Position des Fensters in Pixeln
• rezisable (yes|no) = verhindert bzw. erlaubt, dass die Fenstergröße verändert werden kann
• scrollbars (yes|no) = mit oder ohne Scrolleiste
window.open('bla.htm', 'Blabla', 'width=300, height=400, scrollbars=no');
openener
Damit könnt ihr von neu geöffneten Fenstern auf alle Eigenschaften und Methoden des Ursprungsfensters zugreifen.
window.opener.close();
window.opener.location.href= 'bla.htm';
window.opener.style.color = '#f00';
moveBy, moveTo
Verschiebt das Fenster um den angegebenen Wert. Der Unterschied liegt darin, dass man bei moveBy sagt, um wie viele Pixel es verschoben wird, während man mit moveTo sagt, wohin man es platzieren möchte. Erwartet werden zwei Werte, für die x- und y-Position, moveBy gestattet auch negative Zahlen.
blubber = window.open('blubb.htm', 'blubb', 'width=300, height=400');
blubber.moveBy (50,50);
blubber.moveTo (100,200);
resizeBy, resizeTo
Verändert die Größe eines Fensters um den angegebenen Wert. Auch gilt derselbe Unterschied wie in obigem Beispiel. resizeBy verändert die Größe relative zum Ursprungswert, resizeTo dagegen absolut. Erwartet werden zwei Werte, für die x- und y-Position, resizeBy gestattet auch negative Zahlen.
window.resizeBy(-50,50);
window.resizeBy(250,400);
scrollBy, scrollTo
Scrollt zu einem bestimmten Punkt. Bei scrollBy die Anzahl von Pixeln, bei scrollTo zu einer Position. Erwartet werden zwei Werte, für die x- und y-Position, scrollBy gestattet auch negative Zahlen.
window.scrollBy(-20, -10);
window.scrollTo(100, 100);
prompt
Öffnet ein Dialogfenster mit einem Textfeld, einem Ok- und Abbrechen-Button.
eingabe = prompt('Tippp was ein!', '');
Öffnet den "Drucken"-Dialog. Entspricht der Vorgehensweise "Datei" -> "Drucken". Es gibt keine Parameter. setTimeout
Führt eine Anweisung mit einer bestimmten Verzögerung aus. Es werden zwei Parameter erwartet, erstens die Anweisung oder Funktion und zweitens die Verzögerung in Millisekunden. Diese Methode eignet sich besonders zu Animationen, wenn sie in einer Schleife abgearbeitet werden. Diese Sache ist so interessant, dass es ein kleines Tutorial dazu gibt.
function tuWas ()
{
}
window.setTimeout("tuWas()", 5000);
JavaScript - Objekte Teil 1 - event
1. Das Objekt Mit event können Maus- oder Tastatureingaben abgefangen werden. Damit lässt sich eine komplette Ereignisüberwachung programmieren, die sich aber von den eigentlichen Event-Handlern unterscheidet. Dieses Objekt kennt nur Eigenschaften. Leider ist Implementierung in den verschiedenen Browsern mal wieder völlig unterschiedlich. Wie könnt es auch anders sein. So benötigt der Internet Explorer (wer auch sonst) einen Verweis auf das Ereignis. Daher benötigt der immer eine entsprechende Anweisung wie variable = event.Eventart
2. Eigenschaften clientX, clientY
Speichert die horizontale und vertikale Position des Mauszeigers relativ zur linken oberen Ecke des aktuellen Fensters.
function getHorz(evt)
{
// Internet Explorer
if (document.all)
{
leftposi = event.clientX;
}
else
{
leftposi = evt.clientX;
}
alert (leftposi);
}
document.onclick = getHorz;
offsetX, offsetY
Speichert die horizontale und vertikale Position des Mauszeigers relativ zur linken oberen Ecke des auslösenden Elements. Diese Syntax ist zwar Microsoft-spezifisch, wird aber auch von anderen Browsern verstanden.
alert (window.event.offsetX)
pageX, pageY
Speichert die horizontale und vertikale Position des Mauszeigers relativ zur linken oberen Ecke des auslösenden Elements. Diese Syntax ist Netscape-/Mozilla-spezifisch.
function getHorz(evt)
{
leftposi = evt.clientX;
alert (leftposi);
}
document.onclick = getHorz;
screenX, screenY
Speichert die horizontale und vertikale Position des Mauszeigers absolut zum Bildschirm.
function getHorz (evt)
{
// Anpassung für Internet Explorer
if (!evt) evt = window.event;
alert(evt.screenX);
}
document.onclick = getHorz;
type
Gibt die Art eines Ereignisses ohne on zurück, also zum Beispiel bei onmousedown ein "mousedown".
function getType (evt)
{
// Anpassung für Internet Explorer
if (!evt) evt = type.event;
alert(evt.type);
}
document.onmouseup = getType;
document.onkeyup = getType;
JavaScript - Objekte Teil 1 - location, history
1. Die Objekte Damit steuert ihr die Navigation. location bezieht sich auf neue Links, während man über history auf die bereits besuchten Seiten des Users Zugriff hat.
2. Eigenschaften location href
Damit kann man eine URL direkt ansteuern, ist also die JavaScript-Version des HTML-Tags <a href..>. Wirklich sinnvoll ist die aber nur bei automatisierten Weiterleitungen oder wenn man gleichzeitig mehrere Fenster mit einem Link ansteuern will. Letzteres gilt aber nur beim Einsatz von Frames, also "igittigitt pfui bäh". Ansonsten sind die Methoden und Eigenschaften dieses Objektes meiner Meinung nach ziemlich nutzlos. Daher gehe ich auch nicht weiter darauf ein.
window.location.href = 'neue_url.htm';
3. Eigenschaften history length
Hier wird die Anzahl der Einträge in der History-Liste ausgegeben. Diesen Wert kann man selber nicht verändern.
alert(history.length);
4. Methoden history back
Springt zur Seite, die vorher aufgerufen worden ist.
<a href="#" onclick="history.back();">zurück</a>
forward
Springt zur nächsten Seite in der History-Liste, wenn zuvor ein "back"-Vorgang stattgefunden hat.
<a href="#" onclick="history.forward();">zurück</a>
go
Springt um die angegebene Anzahl von Seiten vor- oder zurück. Ein negativer Wert bedeutet dabei zurück.
<a href="#" onclick="history.go(-5);">5 Seiten zurück</a>
<a href="#" onclick="history.go(3);">3 Seiten vor</a>
JavaScript - Objekte Teil 1 - document
1. Das Objekte Mit diesem Objekt könnt ihr auf den Inhalt einer Internetseite zugreifen. Die Eigenschaften, über die man verfügt, sind meiner Meinung nach hanebüchener Unsinn, also lass ich sie weg. Die kann man auch größtenteils durch stinknormales HTML ersetzen, bzw. mit CSS formatieren. Bei den Methoden wird es allerdings sehr interessant.
2. Methoden createAttribute
Erzeugt ein HTML-Attribut, dass man später über das "node"-Objekt auf HTML-Elemente anwenden kann.
var breite = document.createAttribute('width');
createElement
Erzeugt ein HTML-Element, dass man später über das "node"-Objekt mit irgendwas (z.B. Text) füllen kann.
var absatz = document.createElement('p');
createTextNode
Erzeugt einen Textknoten, den später über das "node"-Objekt in ein HTML-Element einbinden kann.
var bla = document.createTextNode('Blubb blubber');
getSelection
Ermittelt den Text, den der Anwender mit der Maus markiert (selektiert) hat.
var markiert = document.getSelection();
write, writeln
Gibt beliebigen Text in einem Document aus. "writeln" fügt automatisch noch einen Zeilenumbruch am Ende ein.
document.write('Kräh bla schwall');
getElementById
Kann sich noch einer an die verschiedenen Definitionsmöglichkeiten bei CSS erinnern? Da habe ich darauf hingewiesen, dass eine id nur einmal pro Seite verwendet werden darf. Und endlich erfahrt ihr auch warum. HTML-Elemente mit einer ID lassen sich wunderbar manipulieren, und besonders mit CSS. Ein paar Beispiele:
document.getElementById('blubb').style.display = 'none';
document.getElementById('blubb').style.left = 50 + 'px';
document.getElementById(variablenname).style.border = 1 + 'px';
getElementByName
Funktioniert genau wie obiges Beispiel, greift aber auf HTML-Tags zu, die den entsprechenden Wert im name-Attribut haben.
document.getElementByName('blubb').style.display = 'none';
getElementByTagName
Funktioniert genau wie die vorherigen Beispiele, bezieht sich aber auf das HTML-Tag an sich.
document.getElementByTagName('p')...
getElementByClassName Wird immer wieder nachgefragt, gibt es aber leider nicht! Vielleicht erbarmt sich das W3C ja und baut es in den nächsten Standard ein. Allerdings existieren mittlerweile einige Workarounds zu diesem Thema.
3. style Bei den getElement-Methoden gibt es eine wirklich nützliche Zusatzfunktion, mit der man die CSS-Eigenschaften eines HTML-Elements auslesen und ändern kann. Meiner Meinung nach das Beste, was uns JavaScript bietet. Wer sich mit Cascading Style Sheets auskennt, hat hiermit kein Problem.
// Gibt die Vordergrundfarbe aus
var farbe = document.getElementById.style.color;
// Ändert die Farbe
document.getElementByClassName.style.color = '#f00';
Die Sache sieht ganz einfach aus und ist sie auch. Es gibt nur eine Ausnahme. Bei allen CSS-Eigenschaften mit einem Bindestrich ändert sich die Schreibweise. Der Strich fällt weg und der erste Buchstabe dahinter wird groß geschrieben.
document.getElementById.style.backgroundColor;
Da uns style ungeahnte Möglichkeiten bietet, werde ich euch bei den Tutorials eine Einführung zu diesem Thema liefern.
JavaScript - Objekte Teil 1 - document - node
1. Das Objekte node ist das zentrale Objekt, um auf die einzelnen Knoten eines HTML-Dokuments zuzugreifen (vgl. DOM). Um auf die Eigenschaften und Methoden zugreifen zu können, benötigt man die Methoden des document-Objektes. Da es sich bei diesem Thema um ein sehr komplexes handelt, zeige ich euch erst mal nur eine Auswahl. Die komplette Liste findet ihr bei SelfHTML.
2. Eigenschaften childNodes
Speichert alle verfügbaren Kindknoten und deren Inhalt in einem Array.
<div id="blubb">
Kräh <strong>bla</strong> schwall <span>blubb</span> blubber
</div>
...
// Gibt die Anzahl der Kindknoten aus
alert (document.getElementById('blubb').childNodes.length);
data
Gibt den Inhalt eines Knotens aus, wenn es sich dabei um Text handelt.
<div id="blubb">
Kräh bla schwall blubb blubber
</div>
...
alert(document.getElementById('blubb').firstChild.data);
firstChild, lastChild
Liefert das Objekt des ersten bzw. letzten Kindknotens eines Knotens.
<ul>
<li>blubb</li>
<li>blubber</li>
</ul>
...
alert (document.getElementsByTagName("ul")[0].lastChild.data);
nodeName, nodeValue, nodeType
nodeName liefert den Namen des Knotens, nodeValue den Inhalt und nodeType eine Ziffer für die Art des Knotens. Was nun jetzt welche Zahl bedeutet, erfahrt ihr zum Beispiel hier.
<p id="blubb" align="center">bla bla</p>
document.getElementsByTagName("body")[0].firstChild.nodeName;
document.getElementById("blubb").firstChild.nodeValue);
3. Methoden appendChild, removeChild
Erzeugt einen neuen, bzw. löscht einen alten Kindknoten.
<ul id="listing">
<li>Punkt 1</li>
</ul>
...
bla = document.getElementById('listing');
bla.removeChild(bla).firstChild);
bla.appendChild(document.createElement('li'));
appendData, deleteData
Fügen einem Textknoten Daten hinzu oder löschen sie.
<p id="schwafel">Kräh bla schwall</p>
...
bla = document.getElementById('schwafel');
zufueg = document.createTextNode(' blubb blubber');
bla.firstChild.appendData(zufueg.nodeValue);
...
zeichen = bla.firstChild.nodeValue.length;
bla.firstChild.deleteData(0, zeichen);
hasChildNodes
Überprüft, ob ein Knoten weitere Kindknoten hat. Gibt im Erfolgsfall true zurück.
<p id="schwafel">Kräh bla schwall</p>
...
if (document.getElementById('schwafel').hasChildNodes())
...
JavaScript - Objekte Teil 1 - document - images
1. Das Objekte Mit images habt ihr direkten Zugriff auf alle Bilder einer Seite, die mit dem <img>-Tag eingebunden sind. Es gibt dabei drei Möglichkeiten, diese Grafiken anzusprechen.
• über einen numerischen Index
• über den Namen der Grafik
• über den Namen der Grafik als Index Numerischer Index JavaScript nummeriert alle Bilder einfach durch, angefangen bei Null. Hütet euch aber davor, diese Möglichkeit zu nutzen. Da verliert man sehr schnell die Übersicht. Es sei denn, ihr wollt alle auf einmal ansteuern.
document.images[0]
...
document.images[10]
Namen
document.images.bildname
Namen als Index Ist mein persönlicher Favorit, da ich fanatischer Array-Fan bin.
document.images['bildname']
2. Eigenschaften width, height
Gibt die Breite und Höhe des Bildes zurück, die im img-Tag notiert wurde. Gibt es dort keine Angaben, liefern einige Browser nur eine Null.
<img src="pics/blubb.gif" name="bla" width="100" height="50">
...
alert (document.images['bla'].width);
length
Liefert die Anzahl der Bilder in einer Seite.
<img src="pics/blubb.gif">
<img src="pics/blubber.gif">
<img src="pics/bla.gif">
...
alert (document.images.length);
src
Wenn ihr mich fragt, die einzig wirklich sinnvolle Eigenschaft dieses Objektes, denn damit kann man Bilder austauschen, also zum Beispiel die berühmten RollOver-Effekte bei Buttons, die Bilder sind.
var rein = new Array();
var raus = new Array();
raus['blubb'] = new Image();
raus['blubb'].src = "pics/blubb_b.gif";
rein['blubb'] = new Image();
rein['blubb'].src = "pics/blubb_o.gif";
function Raus(button)
{
document.images[button].src = raus[button].src
}
function Rein(button)
{
document.images[button].src = rein[button].src
}
...
<a href="irgendwas.htm"
onMouseOver = "Rein('blubb');"
onMouseOut = "Raus('blubb');">
<img src="pics/blubb_b.gif" name="blubb">
</a>
JavaScript - Objekte Teil 1 - document - forms
1. Das Objekte Damit könnt ihr Formulare und deren Elemente ansteuern. Der Zugriff erfolgt ähnlich wie bei images, nur gibt es eine Möglichkeit mehr.
• über einen numerischen Index
• über den Namen des Formulars
• über den Namen des Formulars mittels des forms-Objektes
• über den Namen der Formulars als Index
document.forms[0]
document.formularname
document.forms.Formularname
document.forms['Formularname']
2. Methoden reset, submit
reset löscht die Eingaben innerhalb eines Formulars und entspricht dem HTML-Formularelement <input type="reset">. submit sendet die Eingaben und entspricht <input type="submit">.
3. elements element ist eigentlich ein Unterobjekt von forms, da sie aber direkt zusammenhängen, liste ich es hier auf.
4. Das Objekt Damit greifen wir auf die einzelnen Elemente eines Formulars zu, können Felder überprüfen oder deren Inhalt ändern. Eigenschaften Ich werde die nur mal ganz kurz auflisten, da Beispiele hier wenig Sinn ergeben. Mehr über die Verarbeitung von Formularen mit JavaScript zeige ich euch in einem kommenden Tutorial.
• checked
• defaultChecked
• defaultValue
• disabled
• type Methoden Siehe Eigenschaften
• blur
• click
• focus
• select
JavaScript - Objekte Teil 2 - Einführung
Neben den Objekten, die in das DOM "eingehängt" sind, gibt es noch weitere. Vorab möchte ich an dieser Stelle aber auf zwei "universelle" Eigenschaften hinweisen, die bis jetzt unterschlagen habe. Man kann sie bei fast allen Objekten nutzen, um an Informationen zu gelangen.
1. length Gibt eine Länge wieder. Dabei existieren einfach gesagt, drei Möglichkeiten: Strings In diesem Fall wir die Anzahl der Zeichen zurückgegeben.
var zeichenkette = 'Blubb Blubber';
// gibt 13 zurück
alert (zeichenkette.length);
Objekte Ermittelt die Anzahl von Elementen eines Objektes und gibt sie der Reihe nach in einem numerischen Array zurück. Klassische Beispiele sind Bilder oder Formularelemente.
<form name="blabla" action="irgendwas">
<input type="text" name="blubb">
<input type="text" name="bluber">
<textarea name="suelz">
kräh bla schwall
</textarea>
</form>
...
// gibt 3 zurück
alert (document.blabla.elements.length);
Selbst definierte Arrays
var dumdidum = new Array ('a','b','c','d');
// gibt 4 zurück
alert (dumdidum.length);
2. value Ermittelt einen Wert. Eignet sich vor allem bei der clientseitigen Überprüfung oder Änderung von Formularelementen.
<form name="blabla" action="irgendwas">
<input type="text" name="blubb" value="täräää">
<input type="text" name="bluber" value="heititei">
</form>
// gibt täräää zurück
alert (document.blabla.elements.blubb.value);
// ändert den Wert des Elements "blubber"
document.blabla.elements.blubber.value = 'hollahihudeldöö';
alert (document.blabla.elements.blubber.value);
JavaScript - Objekte Teil 2 - navigator
1. Das Objekt Über navigator kann man alles über den Browser des Users erfahren. Damit hat man die Möglichkeit, eventuelle Inkompatibilitäten abzufangen und darauf entsprechend zu reagieren. Leider gibt es eine kleine Einschränkung (wundert euch das). Opera kann sich sowohl als Internet Explorer ausgeben als auch als das, was er wirklich ist.
2. Eigenschaften appName
Gibt den Namen des Browsers zurück
alert (navigator.appName);
appVersion
Gibt die Versionsnummer des Browsers zurück
alert (navigator.appVersion);
cookieEnabled
Überprüft, ob Cookies gesetzt werden dürfen. Ist heutzutage eigentlich nicht mehr nötig, da man serverseitig mit so genannten Sessions arbeiten kann.
if (navigator.cookieEnabled == true)
language
Gibt die Sprachversion des Browsers(!) zurück. Das Ergebnis wird in einem länderüblichen Kürzel zurückgegeben. Hat jemand auf einem deutschen Betriebssystem einen englischsprachigen Browser installiert, so sagt das nichts über dessen "Muttersprache" aus. Ist also ziemlich unzuverlässig.
alert (navigator.language);
platform
Liefert das Betriebssystem des Users.
alert (navigator.platform);
userAgent
Gibt detaillierte Informationen über den Browser zurück. Eigentlich die einzig halbwegs zuverlässige Methode, um an Systeminformationen des Users zu kommen.
alert (navigator.userAgent);
JavaScript - Objekte Teil 2 - screen
1. Das Objekt screen liefert alle Informationen über den Bildschirm des Anwenders. Leider Gottes sind die entsprechenden Angaben ziemlich unzuverlässig (wie könnte es auch anders sein), daher sollte man dieses Objekt mit Vorsicht genießen.
2. Eigenschaften availHeight, availWidth
Gibt die maximale Breite und Höhe zurück, die einer Anwendung im Vollbildmodus zur Verfügung steht.
alert (availWidth + 'x' + availHeight);
colorDepth
Gibt den zur Basis 2 exponentiellen Wert der Farbtiefe zurück, Klingt furchtbar kompliziert, ist es aber nicht. Unter euren Bildschirmeinstellungen könnt ihr bei der Farbqualität (WinXP) zwischen Werten wie 16, 24 oder 32 Bit wählen. Und das ist die Zahl, die zurückliefert wird.
alert ('Farbtiefe = 2 hoch ' + colorDepth);
height, width
Gibt die Breite und Höhe der Bildschirmalösung an.
alert 'Bildschirmauflösung: ' + width + 'x' + height);
JavaScript - Objekte Teil 2 - Array
1. Das Objekt ... habe ich schon bei den Grundlagen beschrieben. Bei den Methoden erwähne ich hier nur einige, die komplette Liste gibt es wie gehabt bei SelfHTML.
2. Methoden concat
Fügt zwei Arrays zusammen.
blubb = new Array ('bla','schwall');
blubber = new Array ('kräh','dumdidum');
suelz = blubb.concat(blubber);
join
Macht aus einem Array eine Zeichenkette. Diese Methode erwartet als Parameter mindestens ein Trennzeichen:
blubb = new Array ('kräh','bla','schwall');
zusammen = blubb.join(' ');
pop, shift
Nein, ersteres ist kein Schweinkram, sondern entfernt lediglich den letzen Eintrag aus einem Array. shift dagegen macht das mit dem ersten Wert. Der Rückgabewert ist der Inhalt des gelöschten Elementes.
blubb = new Array ('kräh','bla','schwall');
hauwech = blubb.pop();
auchwech = blubb.shift();
push, unshift
Wenn man etwas wegballert, kann man auch wieder was dranhängen. push hängt die neuen Einträge hinten dran, unshift macht das am Anfang.
blubb = new Array ('kräh','bla','schwall');
blubber = blubb.push('dumdidum','tralala');
blubber = blubb.unshift('dumdidum','tralala');
reverse, sort
Sortieren ein Array neu. reverse geht nach dem numerischen Index vor und kehrt den um, also was am Anfang stand, befindet sich nun hinten. sort dagegen arbeitet alphabetisch von vorne nach hinten anhand der Inhalte der einzelnen Punkte. Über Parameter kann man das noch zusätzlich beeinflussen.
blubb = new Array ('kräh','bla','schwall');
blubber = blubb.reverse();
blubber = blubb.sort();
JavaScript - Objekte Teil 2 - String
1. Das Objekt Damit habt ihr Zugriff auf jedwede Form von wie auch immer gearteten Zeichenketten. Da viele Methoden mit veralteten HTML-Attributen zu tun haben, lasse ich die weg.
2. Eigenschaften charAt
Gibt das Zeichen zurück, das sich an einer bestimmten Position befindet.
var zeichen = 'hollahihü hihüdeldö';
alert (zeichen.charAt(5));
concat
Hängt eine Zeichenkette an eine andere hinten an.
var anfang = 'hollahihü hihüdeldö ';
var ende = 'diridiridudeldi';
var jodeldiplom = anfang.concat(ende);
indexOf, lastIndexOf
Ermitteln das erste, bzw. letzte Vorkommen eines Buchstabens oder Strings innerhalb einer Zeichenkette und geben die Position zurück.
var jodeldiplom = 'hollahihü hihüdeldö diridiridudeldi';
var erster = jodeldiplom.indexOf('diri');
var letzter = jodeldiplom.lastIndexOf('diri');
match
Durchsucht eine Zeichenkette anhand eines regulären Ausdrucks und liefert alles zurück, was gefunden wurde.
var jodeldiplom = 'hollahihü hihüdeldö diridiridudeldi';
jodeldiplom.match(/diriS{2}/);
replace
Ersetzt Abschnitte innerhalb einer Zeichenkette, auf die ein regulärer Ausdruck zutrifft. WICHTIG! Normalerweise wird nur der ERSTE Treffer ersetzt, wenn das bei allen geschehen soll, muss der Parameter g angegeben werden.
var jodeldiplom = 'hollahihü hihüdeldö diridiridudeldi';
// Ersetzt nur ERSTES "diri"
jodeldiplom.replace(/diri/, 'dödel');
// Ersetzt Alle "diri"
jodeldiplom.replace(/diri/g, 'dödel');
slice, substr
Gibt einen Ausschnitt aus einer Zeichenkette zurück. Erwartet zwei Parameter, einen für die Anfangs- und einen für die Endposition.
var jodeldiplom = 'hollahihü hihüdeldö diridiridudeldi';
var ausschnitt = jodeldiplom.slice(6, 11);
var ausschnitt = jodeldiplom.substr(6, 11);
split
Teil einen String anhand eines Trenners auf. Das Ergebnis wird als Array mit den einzelnen Elementen zurückgegeben.
var jodeldiplom = 'hollahihü,hihüdeldö,diridiridudeldi';
var einzeljodel = jodeldiplom.split(',');
JavaScript - IE only
1. Einführung Wahrscheinlich handelt es sich bei den Abweichungen, die der IE aufweist, um Relikte aus der Zeit des großen Browserkrieges in den späten 90ern. Besonders beim window- und document-Objekt gibt es gravierende Unterschiede zu den anderen Browsern. Ich liste zuerst die "richtigen" Befehle (sorry, Eigenschaften und Methoden) auf, und zeige dann die M$-Versionen.
2. innerHeight, innerWidth document.body.clientHeight, document.body.clientWidth document.documentElement.clientHeight, document.documentElement.clientWidth Au Mann, da gibt es sogar zwei Varianten. Und was genau ist nun der Unterschied? Ich hoffe, ich rede jetzt keinen Müll. document.body.clientHeight/Width funktionieren, wenn der Internet Explorer sich in den Quirks.Modus schaltet. Und wann macht er das? Genau, wenn wir bei der Doctype-Definition HTML 4 Transitional wählen. Bei allen anderen Varianten müsst ihr die zweite Version nehmen. Die funktioniert aber nur, wenn beim Aufruf das <html>- und <body>-Tag vorhanden sind. Idealerweise empfiehlt sich der Event-Handler onload im <body>-Tag.
3. outerHeight, outerWidth document.all.Body.offsetHeight, document.all.Body.offsetWidth Auch hier gibt es eine Unterscheidung, abhängig von der DTD. Leider kenne ich die Variante für strict nicht.
4. pageYOffset, pageXOffset document.body.scrollTop, document.body.scrollLeft document.documentElement.scrollTop, document.documentElement.scrollLeft Hier gelten dieselben Regeln wie bei obigen Beispielen. document.body.scrollTop/Left funktionieren nur bei der Doctype-Definition HTML 4 Transitional, ansonsten nehmt die letztere Version. Die funktioniert aber wieder mal nur dann, wenn beim Aufruf das <html>- und <body>-Tag vorhanden sind, also mit onload aufrufen.
5. Anwendungsweise Wie geht man nun an das Problem der unterschiedlichen "Befehle" heran? Nun es gibt eine eindeutige Unterscheidung zwischen den jeweiligen Browsern. Dabei handelt es sich um eine Methode des document-Objektes, die all lautet, eine alte Variante von getElementById ist und nur vom Internet Explorer verstanden wird. Aber Obacht! Achtet bei der Definition von Bedingungen auf die Reihenfolge.
if (document.all)
{
// IE-only
}
else
{
// Der Rest
}
Man kann das auch noch weiter steigern, indem man die jeweiligen Methoden dezidiert auflistet, und so die zusätzlichen Unterschiede innerhalb des Internet Explorers umgeht.
if (document.body.clientHeight)
{
// IE im Quirks-Modus
}
else if (document.documentElement.clientHeight)
{
// IE im Standard-Modus
}
else if (window.innerWidth)
{
// Der Rest
}
else
{
// Nanü, hier stimmt was nicht
}
So jetzt haben wir den theoretischen Bereich von JavaScript abgeschlossen und können nun erstmal das erworbene Wissen konkret umsetzen. Also auf zum ersten Tutorial.
