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