JavaScript - Einführung 1. Ein Wort zuvor Leider muss ich gestehen

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 AJAXHype 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 yPosition, 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!', '');
print
Ö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 EventHandlern 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
raus['blubb'].src =
rein['blubb'] = new
rein['blubb'].src =
Image();
"pics/blubb_b.gif";
Image();
"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 HTMLFormularelement <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 EventHandler 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.