Multimediakurs Leinfelder: Inhalt/Modul 7 "JavaScript in Handarbeit"/Modul 7.4 "JavaScript-Level 3/7.4.2 JS-Referenz

(© copyright)     Letzte Änderungen:30.03.2003


Modul 7.4.2: JS-Level 3: Vereinfachte JavaScript Objekt-, Eigenschaften- und Methoden-Referenz

Bitte lesen Sie die Vorbemerkungen zu dieser vereinfachten Java-Script Referenz auf der vorhergehenden Seite. Die Auflistung erfolgt alphabetisch nach Objektnamen. Ziehen Sie insbesondere auch die komplette original Netscape JavaScript-1.3-Referenz oder die ebenfalls sehr komplette und mit vielen Beispielen versehene Objektreferenz von S. Münzers Selfhtml-Kurs zu Rate. Auch wenn Referenzen allgemein zugänglich sind (s. o. Netscapes Originalreferenz) hat mir doch M.Seeboergers JavaScript Buch diese Zusammenstellung wesentlich erleichtert. Es sei hiermit als zusätzliches Zitat für diese Seite genannt (sowie als evtl. Kaufempfehlung).


Objekt Anchor

Unterobjekt zu documents

Kann über Indexnummern (Array) oder Ankernamen (sofern vergeben) angesprochen werden.

window.document.anchor[3] oder window.document.anchor["ankername"]

keine Methoden, nur Eigenschaft lenght (nur lesbar), gibt Anzahl der in einer Seite verwendeten Anker aus. var ankerzahl=window.document.anchors.length;


Objekt Applet

Unterobjekt zu documents. Adressierung und Eigenschaft analog zu Anchor. Spricht alle mit <applet> oder <embed> eingefügten Objekte an.


Objekt Area --> Objekt Link


Objekt Array --> Siehe frühere Kurserläuterungen (Level 2, Level 3) sowie Java-Script-1.3-Referenz von Netscape


Objekt Boolean

keinem anderen Objekt untergeordnet. Kann nur zwei Werte haben (true bzw. false). Objekt muss immer neu mit Constructor new erzeigt werden:

var stimmt = new Boolean();

keine für uns wichtigen Eigenschaften oder Methoden


Objekt Button --> siehe Objekt Form


Objekt Checkbox --> siehe Objekt Form


Objekt Date

keinem anderen Objekt untergeordnet. Dient zum Abfragen von Datum, Uhrzeit und Zeitabläufen. Wird nicht automatisch angelegt, sondern muss durch Constructor new neu erzeugt werden. Nicht zu verwechseln mit den Timern des -> window-Objektes

Neues Objekt mit aktuellem Datum : var Datum= new Date();

Objekterzeugung mit Parametern: var Datum = new Date (jahr, monat, tag, stunde, minute, sekunde, millisekunde);

Beispiel: var Datum = new Date(2002, 01, 07, 00, 00, 00, 000);

Methoden (Auswahl): getDate();
analog: getDay, getFullYear, getHours, getMilliseconds, getMinutes, getMonth, getSeconds jeweils komplett als: getHours(); etc.

Bespiel:

var datum = new Date ();
alert (datum.getMonth());

gibt den Monat aus. Wichtig. In JavaScript hat der Januar die Zahl 0, der Februar 1 etc. Um die "klassische" Ausgabe zu erhalten, müsste das Skript also lauten:

var datum = new Date ();
alert (datum.getMonth()+1);

oder auch

var datum = new Date ();
window.document.write(datum.getMonth()+1);

übersichtlicher natürlich via Variablenausgabe:

var datum = new Date ();
var monat = datum.getMonth() + 1;
window.document.write(monat);

Weitere Hinweise: getDay(); ermittelt den Wochentag des Monats. Die restlichen Methoden beziehen sich auf die im Benutzercomputer eingestellte lokale Uhrzeit. Die Weltzeit UTC ist ermittelbar mit:
getUTCDate(): getUTCDay(); etc.

getTime(); gibt die Anzahl der Millisekunden seit 1.1.1970 aus. Wichtig für Zeitberechnungen.
parse("jan 7, 2002"); ergibt die Millisekunden zwischen 1.1.1970 und dem im Stringparameter angegebenem Datum.

Set-Methoden setzen eine bestimmte Zeit, z.B.

setDate(tageszahl_eines_Monats); z.B. setDate(21);
analog:

setFullYear(jahr); oder auch setFullYear(jahr, monat, tag);
setHours(stunde, minute, sekunde, millisekunde);
setMilliseconds(millisekunde);
setMinutes(minute, sekunde, millisekunde);
setMonth(monat, tag);
setSeconds(sekunde, millisekunde);

analog auch für setUTCFullYear(jahr, monat, tag); etc.
analog auch für setTime(millisekunden_seit_1970);

keine für uns wichtigen Eigenschaften


Objekt document

Unterobjekt zu window-Objekt, wird bei Aufruf eines html-Dokuments automatisch angelegt (sobald ein body-Tag entdeckt wird).

Methoden (Auswahl):

open(typ); öffnet ein neues leeres Dokument. Dorthinein kann z.B. via der write();-Methode über JavaScript geschrieben werden. Beispiele in Level 1, 2 und 3 dieses Kurses. typ kann sein text/plain, text/html, image/jpeg oder image/gif. In der Regel wird hier text/html zu wählen sein.

zB. window.document.open("text/html");
window.document.write("hallo");

write(textstring);
writeln(textstring);
aus früheren Beispielen bekannt. Writeln bricht am Ende in eine neue Zeile um (aber nicht immer :-(
Textstring steht in Gänsefüßchen, mehrere Textstrings können durch Kommata oder + Zeichen verbunden werden. Variablen oder Methodenwerte können ebenfalls ausgegeben werden (dann ohne Kommata).

Eigenschaften (Auswahl):

linkColor, alinkColor, vlinkColor, fgColor, bgColor (Link-, active-LInk, visited Link, Text- und Hintergrundfarbe). Aus vorhergehenden Beispielen hinlänglich bekannt,

z.B. window.document.bgColor="#ccbbaa";

height : Höhe eines html-Dokuments in Pixeln, nur lesbar.

z.B.

var dokulaenge=window.document.height;
window.status="dieses Dokument ist " + dokulaenge + "Pixel lang";

lastModified : Änderungsdatum des Dokuments, nur lesbar, z.B.:

alert(window.document.lastModified);

weitere, nur lesbare Eigenschaften:

Daneben besitzt das document-Objekt viele Eigenschaften, die durch html-Elemente gebildet werden und ihrerseits Unterobjekte in Form von Arrays darstellen (v.a. anchors, applets, embeds, forms, images, links)

Weitere Eigenschaften in array-Form: cookie, plugins.

Sonstige interessante Eigenschaften:

classes (vgl. style-Objekt): hiermit können Sie z.B. externe CSS für das vorliegende Dokument ändern, z.B.

window.document.classes.classname.tagname.eigenschaft

z.B.,

window.document.classes.schriften.p.font-size="18px"

funktioniert ähnlich auch auch über IDs, ids sind wiederum auch eine Eigenschaft des Document-Objects:

window.document.ids.idname.eigenschaft

Cookies:

window.document.cookies

Jedes Webdokument kann die Eigenschaft cookies besitzen. Man ordnet dieser Eigenschaft bestimmte Werte in einer bestimmten Syntax zu, woraufhin der Browser ein sog. Cookie auf der Festplatte des Nutzers (an einer vordefinierten Stelle) ablegt. Der Cookie-Wert kann beim nächsten Aufruf der Seite wieder ausgelesen werden und daraus eine spezielle JavaScript-Anweisung ausgelöst werden (z.b. ein Alertfenster mit "Sie sind zum 2. Mal auf dieser Seite". Es gibt natürlich sehr viel sinnvollere Anwendungen. Näheres zu Cookies, welche nicht gerade leicht zu setzen, auszulesen und weiterzuverarbeiten sind, erfahren Sie in der Kursanlage 14: Cookies und Alternativen.


Objekt elements --> siehe Objekt Form


Objekt event --> siehe Netscape JavaScript-1.3-Referenz oder selfhtml-JS-Objektreferenz


Objekt FileUpload --> siehe Netscape JavaScript-1.3-Referenz oder selfhtml-JS-Objektreferenz


Objekt Form

Unterobjekt des Objekt documents, mit vielen weiteren Unterobjekten:

Button, Checkbox, Hidden, Password, Radio, Select, Reset, Submit, Text, Textarea

diese Unterobjekte sind wiederum Bestandteil des Objekts elements, welches alle Form-Elemente beinhaltet.

Formulare behandeln wir in diesem Kurs ausgiebiger erst in Modul 9. Eine kurze Einführung zu Formularen finden Sie bei entsprechenden späteren Beispielen zu Level 3.

Hier in aller Kürze: Formulare auf html-Seiten dienen insbesondere dazu, Benutzerdaten einzugeben und zur weiteren Verarbeitung an den Webserver schicken zu können (Modul 9). Umgekehrt können auch Daten eingelesen werden, dies kann durch Serverdaten geschehen oder auch durch JavaScript. Auf einem html-Dokument können mehrere Formulare sein, diese bilden dann ein form-Array (siehe unsere Arrayerläuterung in Level 2). Entsprechend können die einzelnen Formulare über Indexnummern (0 für das erste Element) oder Formularnamen (sofern diese vergeben wurden) angesprochen werden, also z.B.

window.document.forms[0] oder window.document.forms["erstesFormular"]

Formulare bestehen aus einer Vielzahl von Einzelelementen, die oben aufgelistet wurden (button, checkbox etc.). Diese dienen v.a . dazu Benutzereingaben zu machen, aus Vorauswahlen zu wählen und diese Formularangaben abzuschicken (oder ggf. wieder zu löschen). All dies sind Elemente des elements-array, welche wiederum nach Reihenfolge ihres Auftretens durch Indexzahlen oder durch Namen angesprochen werden können, also z.B.

window.document.forms[0].elements[5].write("Reinhold Leinfelder");
Der Name Reinhold Leinfelder wird hier in das 6. Element des 1. Formulars geschrieben (sofern es sich um ein schreibfähiges Element, also z.B. <input type="text"> handelt.

Alternative:
window.document.Anmeldung.Namen.write("Reinhold Leinfelder");

hier hieße das Formular nun Anmeldung, das entsprechende Eingabefeld Namen.

Die Methoden und Eigenschaften für die elements sind alle vergleichbar, wollen wir sie zuerst behandeln (Auswahl):

Methoden zu elements (Auswahl)

focus(); fokussiert das Objekt, d.h. es ist, z.B. für eine Benutzereingabe vorselektiert. Beispiele:

window.document.forms[0].elements[5].focus();
window.document.forms[0].elements[5].focus();

blur(); das Gegenteil von oben, nimmt den Focus weg.

click(); erzeugt Mausklick (z.B. wenn das Element ein Submit-Knopf ist), damit kann man z.B. ferngesteuert Formularangaben abschicken (z.B. nach einer bestimmten voreingestellten Zeit - allerdings muss der Benutzer dies aus Sicherheitsgründen noch bestätigen).

select(); ähnlich zu focus, aber hier wird z.B. das Eingabefeld gleich selektiert. Ist ein vorgegebener Text drin (z.B. "bitte hier Ihren Namen eingeben"), kann sofort überschrieben werden.

Eigenschaften zu elements (Auswahl)

length Anzahl der Einträge in einem Pulldownmenu, nur lesbar.

name enthält den Namen des Objekts, sofern als Name-Attribut im <input>-Tag angegeben.

Alle Teilobjekte von elements (also Button, Checkbox usw) stellen array-Teilobjekte von elements dar, die gleichzeitig Eigenschaften von elements darstellen. Es sind keine echten Unterobjekte, deswegen ist die Ansprache folgendermaßen:

window.document.forms[0].text[2] für das dritte Texteingabefeld auf dem ersten Formular. Elements fällt hier aus dem Objektpfad heraus, da text (oder auch button, checkbox etc.) Teilmengen des elements-Array darstellen, nicht etwa Unterobjekte.

type ergibt den Typ des elements-Teilobjekts (Ausgabe z.B. Button,Checkbox etc.).

value erhält den Wert eines <input>-Objektes, z.B.

alert(window.document.forms[0].elements[5].value);

die Eigenschaften checked, defaultChecked, defaultSelected, defaultValue verstehen sich erst, nachdem wir Formulare im Detail behandelt haben.

Methoden zu Form (Auswahl)

reset(); und submit(); verstehen sich von selbst, entsprechen dem Anklicken des entsprechenden Knopfes. Aus Sicherheitsgründen werden aber Formulare dennoch erst nach Bestätigung durch den Benutzer verschickt (ab JS 1.1).

Eigenschaften zu Form (Auswahl):

Das Unterobjekt-Array elements und alle Teilmengen davon (Button, Checkbox etc.) sind gleichzeitig Eigenschaften des Objekt forms.

encoding nur lesbar, gibt an, wie das Formular beim Absenden verschlüsselt wird (entsprechende Angabe geschieht im <form>-Tag des html-Dokuments.

lenght nur lesbar. Anzahl der Formulare auf einer Seite.

name Name des Formulars


Objekt Function

Dieses Objekt hat nichts mit dem Schlüsselwort ("Statement") zur Definition einer benutzerdefinierten function zu tun. Mit dem Objekt Function (Großschreibung und Semikolon am Ende!) können insbesondere neue mathematische Funktionen erzeugt werden. Das Objekt muss immer neu angelegt werden, z.B.

var rechnung=new Function ("x", "y", "return (x+y)*y");
var ergebnis=rechnung(5,2);
alert("Das Ergebnis ist" + ergebnis);

Als Ergebnis muss also berechnet werden (5+2)*2, d.h. 14.

HIer das Beispiel

Methoden und Eigenschaften entnehmen Sie bitte der Netscape JavaScript-1.3-Referenz


Objekt Hidden --> siehe Objekt Form


Objekt History

Unterobjekt des Window-Objektes. Vergleichbar mit der Verlaufsliste im Browser sowie dessen Rückwärts-Vorwärts-Knöpfen.

Methoden (Auswahl)

back(); Lädt vorhergehendes Dokument aus der History-Liste, z.B.
window.history.back();

forward(); analog oben, eins vorwärts (sofern man zuvor zurückgeblättert hat).

go(zahl_oder_URL-Teil); Am besten anhand Beispiele erklärbar:

window.history.go(-1); entspricht window.history.back();
window.history.go(-1); geht zwei Dokumente in der Historyliste zurück.
window.history.go(1); entspricht window.history.forward();
window.history.go(3); geht drei Dokumente in der Historyliste nach vorn
window.history.go("multimediakurs/inhalt.html"); Eingabe der kompletten URL oder, wie hier, eines Teils ruft dieses Dokument auf, sofern es in der History-Liste des Browsers gespeichert ist.

Eigenschaften sind sehr speziell und interessieren uns für diesen Kurs hier nicht.


Objekt Image

Unterobjekt des document-Objektes. Wird automatisch als array-Objekttyp erzeugt, wenn einer oder mehrere <img>-Tags auf einer html-Seite sind oder kann über den constructor new neu angelegt werden, z.B.:

var vorgeladenesBild= new Image(breite, hoehe); Breite und Höhe können weggelassen werden.

Array-Ansprache über images:
window.document.images[3]
oder über Bildname, sofern im img-Tag vergeben:
window.document.lieblingsbild

Objekt Link (Area berücksichtigen)

Das Image-Objekt hat keine für uns wesentlichen Methoden.

Eigenschaften (Auswahl):

border, complete, height, hspace, name, src, vspace, width.

Die meisten davon sind selbsterklärend:
border Angabe in Pixel
complete Wert true wenn Bild komplett geladen ist, ansonsten false
height und width in Pixeln
hspace, vspace Angabe eines freien Feldes um das Bild in Pixeln (falls z.B. Text um das Bild herumfließen soll).
src Angabe der URL (absolut, relativ, Dateiname) des Bildes
name Nur verfügbar, wenn dem Bild ein Name im <img>-Tag gegeben wurde.


Objekte JavaArray, JavaClass, JavaObject, JavaPackage --> siehe Netscape JavaScript-1.3-Referenz


Objekt Layer --> siehe Netscape JavaScript-1.3-Referenz

Hinweis: Dieses Objekt bezieht sich auf dhtml-Layers, die mit dem von uns bislang nicht behandelten <layer>-Tag eingerichtet wurden. Diese sollten nicht mehr verwendet werden. Diese Layers haben nichts mit den FloatingBoxes zu tun, wie wir sie in Modul 6 definiert haben. Näheres siehe JavaScript-Level 4 bzw. Kursanlage 6.


Objekt LInk und Objekt Area

Unterobjekte des document-Objekts.

Das Link-Objekt ist ein Array und listet alle auf einer html-Seite durch <a href ...> oder <area href ...> erzeugten Links. Das Area-Objekt bezieht sich hierbei auf sog. Imagemaps, die wir erst in Modul 8 behandeln. Die Methoden und Eigenschaften für beide Objekte sind identisch. Ansprache über Array-Syntax, z.B. window.document.links[3]

Wichtig: das Area-Objekt wird genauso angesprochen, es stellt kein eigenständiges Objekt dar.

Keine für uns relevanten Methoden vorhanden.

Eigenschaften (Auswahl):

Alle Eigenschaften können verändert werden.

hash steht für ein evtl. Ankerziel im URL; also den evtl. Teil #anker nach einem Dateinamen (z.B. http://www.palaeo.de/multimediakurs/index.html#copyright

host ergibt Servernamen, Domainnamen und ggf. Subdomainnamen.

hostname wie oben, aber es wird noch der Port mit angegeben. Ausgabemöglichkeit z.B. www.palaeo.de:80

href ergibt den gesamten, absoluten URL, z.B. "http://www.palaeo.de/multimediakurs/index.html"

pathname ohne Server-u. Domainnamen, sozusagen relativer Pfad aber Rootdirectory des Webservers, also z.B. "/multimediakurs/index.html"

port verwendeter Port des Webservers.

protocol z.B. http:

Beispiel: var server=window.document.links[0].host;
alert("der nachfolgende Link geht zum " + server + "Server");

weitere Eigenschaften werden von Internet Explorer nicht unterstützt.


Objekt Location

Unterobjekt zu window-Objekt

Methoden

reload(); lädt das aktuelle Dokument erneut, und zwar aus dem Browsercache, sofern dort gespeichert. Mit dem Parameter true wird das Dokument aus dem Internet neu geladen, also reload(true);

replace(URL); selbsterklärend, ein neues Dokument wird aufgerufen. Im Unterschied zu href (siehe unten) wird dabei der alte History-Eintrag ersetzt. Z.B.:
window.location.replace("http://www.palaeo.de/multimediakurs/index.html");

Eigenschaften (Auswahl)

alle Eigenschaften können verändert werden.

hash, host, hostname, pathname, port, protocol analog zum Link-Objekt

href Gesamtadresse. Über die Änderung dieser Eigenschaft wird der Browser genötigt, eine neue Seite zu laden (vergleichbar der Methode replace(); des Link-Objekts, siehe oben).

window.location.href="http://www.riffe.de/index2.html";

Href kann sogar weggelassen werden:
window.location="http://www.riffe.de/index2.html";

auch andere Fenster oder Frames können angegeben werden.

z.B.

var=NeuesFenster;
NeuesFenster=window.open();
NeuesFenster.location.href="http://www.riffe.de/index2.html";


Object Math

keinem Objekt untergeordnet. Wesentlich für mathematische Berechnungen. Umfassende Methoden und Eigenschaften. Nur einige sollen exemplarisch vorgestellt werden:

Methoden (Auswahl)

ceil(Zahl); oder round(Zahl); nächsthöhere Ganzzahl einer Zahl, z.B.

var a= Math.ceil(3,83); Der Wert der Variablen a wäre 4.

floor(Zahl); nächstniedrigere Ganzzahl, wichtig z.B. beim Auslesen von Browserversionen.

cos(Zahl); selbsterklärend. Analog auch sin, asin (Arcussinus in Radians), tan, atan usw.

exp(Zahl); Exponentialfunktion von Zahl zur Basis e

max(x,y); ermittelt die größere der beiden übergebenen Zahlen

min(x,y); analog

pow(x,y); Potenz y zur Basis x

sqrt(Zahl); Quadratwurzel von Zahl

Eigenschaften (Auswahl):

nur lesbar:

E Eulersche Zahl

LN10 natürlicher Logarithmus von 10, ca. 2,302

LN2 natürlicher Logarithmus von 2.

PI Zahl Pi, ca. 3.14159

weitere Methoden und Eigenschaften siehe Netscape JavaScript-1.3-Referenz


Objekt MimeType --> siehe Netscape JavaScript-1.3-Referenz


Objekt navigator

ist keinem anderen Objekt untergeordnet. Das Objekt bezieht sich auf Softwareausstattung des Nutzers, insbesondere des von ihm verwendeten Browsers.

(ab Navigator 6, d.h. JavaScript-Version 1.5 kann es sowohl eigenständig als auch als Unterobjekt von window angesprochen werden, also ist z.B. nachfolgendes möglich:
navigator.userAgent
window.navigator.userAgent
Letzteres funktioniert aber bislang nur unter Netscape Navigator 6, deshalb sollten Sie es nicht so handhaben).

Methoden (Auswahl):

javaEnabled(); falls dies der Fall ist, ist der Wert true, ansonsten false.

Eigenschaften (Auswahl):

appCodeName Codename des Browsers (Mozilla sowohl bei Netscape und Microsoft)

appName (z.B. Werte z.B. Netscape oder Microsoft Internet Explorer)

appVersion Versionsnummer des Browsers

language (leider nicht für IE). z.B.

if (navigator.language="de")
{
window.location.href="versiondeutsch.html";
}
window.location.href="internat.html";

platform Mögliche Werte ua. MacPCC, UNIX, Win32

userAgent umfasst appCodeName, appName, appVersion, language, platform

Alle Eigenschaften finden Sie hier als Skript zum Ausprobieren


Objekt Number, Objekt Object --> siehe Netscape JavaScript-1.3-Referenz


Objekt Option --> siehe Objekt Form


Objekt Packages --> siehe Netscape JavaScript-1.3-Referenz


Objekt Password --> siehe Objekt Form


Objekt Plugin --> siehe Netscape JavaScript-1.3-Referenz


Objekt Radio --> siehe Objekt Form


Objekt RegExp --> Netscape JavaScript-1.3-Referenz


Objekt Reset --> siehe Objekt Form


Objekt Screen

keinem anderen Objekt untergeordnet (ab JavaScript 1.5 optional auch dem window-Objekt untergeordet, vgl. Navigator-Objekt).

Das Objekt bezieht sich auf die Bildschirmeigenschaften des Nutzers.

Methoden keine (wie soll man auch den Bildschirm des Nutzers ändern ;-)

Eigenschaften (Auswahl)

height Bildschirmhöhe in Pixel (d.h. horizontale Auflösung)

width Bildschirmbreite in Pixel (vertikale Auflösung)

availHeight in Pixel, also Bildschirmhöhe abzüglich Benutzerelemente, wie Menuleiste von Apple, Taskleiste von Windows.

availWidth analog

Beispiel:

var breite, hoehe;
breite=screen.width;
hoehe=screen.height;
alert("Ihr Bildschirm hat " + breite + "*" + hoehe + " Pixel Aufloesung");

So sieht's aus.

Hinweis: wie wir das oe von Aufloesung in der Alertausgabe wegbekommen, behandeln wir im nächsten Teilmodul (7.4.3). Mit dem klassischen html-code (&ouml;) ist da leider nichts zu machen.


Objekt Select --> siehe Objekt Form


Objekt String

Keinem anderen Objekt untergeordnet. Dieses Objekt ist für komplexere Programmierung sehr wesentlich, da hier Textstrings (Zeichenketten) definiert, verändert und Teilauswahlen getroffen werden können.

Definitionsmöglichkeiten eines Strings:

Methoden (Auswahl):

big(); Textstring wird größer ausgegeben.

bold, small, italics, sub, sup, strike analog oben (analog der entsprechenden html-Auszeichnungstags), z.B.

var Zeichenkette="huhu";
Zeichenkette.small();

fixed(); unproportionale Schrift, wie z.B. Courier, entspricht dem tag <tt>, d.h. Teletext.

fontcolor(farbe); Farbangabe hexadezimalcode oder vordefinierte Farbnamen.

fontsize(groesse); Groesse zwischen 1-7, analog zum entsprechenden html-Tag.

charAt(position); ermittelt das Zeichen des Strings an der Stelle Position. Erste Buchstabe ist Position 0, dann 1 etc.

charCodeAt(position); ermittelt den Code eines Zeichens an der angegebenen Stelle.JS 1.2 ermittelt in IsoLatin-1-Zeichensatz, ab JS 1.3 nach Unicode-Standard.

concat(string1, string2, string 3, etc.); hängt die Strings aneinander.

Beispiel:

var kette1="mein";
var kette2="Name";
var kette3="ist";
var kette4="Joe";
var kette5=kette1.concat(kette2, kette3, kette4);
Der Wert von kette 5 ist dann: "mein Name ist Joe".

indexOf(text);
sucht im String nach dem Zeichenfolge text. Wird sie nicht gefunden, ist der Rückgabewert -1, ansonsten größer. Sobald die erste Zeichenfolge übereinstimmend gefunden wurde, bricht die Suche ab. Es wird ab dem ersten Zeichen im angegebenen String gesucht, sofern nicht als Parameter die Zeichenposition angegeben wird, aber der gesucht wird.

var langerText;
langerText="dies ist ein x-beliebiger Text, den wir jetzt duchsuchen wollen";
var suchen=langerText.indexOf("jetzt");

Letzte Zeile alternativ auch:
var suchen=langerText.indexOf("jetzt", 13);
Hier würde ab dem x von x-beliebig gesucht werden, da es das 14. Zeichen darstellt (0 ist das erste Zeichen, Leerzeichen werden mitgezählt).

slice(von, bis); Kopiert einen Teil aus einem String. Von und bis die Stringpositionen und werden in Ziffern angegeben. Lässt man den Parameter bis weg, wird bis zum letzten Zeichen kopiert. Slice (ausschneiden) ist eigentlich missverständlich, da der Originalstring erhalten bleibt.

split(zeichenfolge); Splittet einen String an den in zeichenfolge angegebenen Stellen und legt die daraus resultierenden Substrings in einem Array ab. Die zum Splitten benutzte Zeichenfolge wird gelöscht.

Beispiel:

var begruessung("Herr Prof. Maier");
var geteilt=begruessung.split(" ");

Hier wird am Leerzeichen gesplittet, der resultierende Array geteilt hat folgende Werte:

geteilt[0]="Herr";
geteilt[1]="Prof.";
geteilt[2]="Maier";

Tipp: Ein umfassendes Anwendungsbeispiel für die Split-Methode finden Sie in Anlage 14b: Cookies für Fortgeschrittene.

toLowerCase(); setzt den gesamten String in Kleinbuchstaben.

toUpperCase(); analog oben.

Eigenschaften

Hier interessiert uns nur eine (nicht änderbare) Eigenschaft

lenght Gibt die Anzahl der Zeichen in einem String zurück.

var text;
text=prompt(Wir berechnen die Laenge Ihres Satzes. Bitte einen Satz eingeben", "");
alert("Ihr Satz ist " + text.length + " Zeichen lang");

So sieht es aus.

Hinweis: dies ist natürlich keine sinnvolle Anwendung, aber stellen Sie sich doch z.B. die Kontrolle einer Benutzereingabe etwa in einem Formulardurch diese Eigenschaft vor (z.B. Postleitzahl, Kreditkartennummer). Ist die Nummer zu kurz oder zu lang, kann via einer if-Abfrage eine entsprechende Meldung generiert werden.


Objekt Style --> Netscape JavaScript-1.3-Referenz


Objekte Submit, Text, Textarea --> siehe Objekt Form


Objekt window und Objekt Frame

Mit dem window-Objekt haben wir uns bereits mehrfach beschäftigt. Das Frame-Objekt besitzt identische Methoden und Eigenschaften und wird hier deshalb mitbehandelt. Nur die Ansprache ist etwas anders.

z.B. window.alert("hallo");
aber parent.frame[2].alert("hallo");

In beiden Fällen hätte aber auch die vereinfachte Adressierungt alert("hallo"); genügt.

Frames bilden also wieder ein array-Objekt und können entweder über indexnummer oder Framenamen angesprochen werden.

window und Frame-Objekt sind keinem anderen Objekt untergeordnet.

Methoden (Auswahl)

alert(string); Im Kurs schon x-mal verwendet, Hinweisbox.

prompt(hinweistext, vorgabe); Dialogbox. Die Vorgabe wird häufig leergelassen, z.B. prompt("geben Sie Ihren Namen ein",""); der zurückgegebene Wert nach Eingabe entspricht dem eingegebenen Textstring. Drückt der Benutzer auf Abbrechen, wird null zurückgegeben.

confirm(string); Ja-Nein-Dialogbox. String ist eine Vorgabe, meist in Form einer Frage. Bei OK-click wird true, bei Abbrechen false zurückgegeben.
Beispiel:
confirm("Wollen Sie wirklich diese Seite verlassen?");
Bei ok wird der Wert true weitergegeben und eine if-Abfrage könnte auf eine neue Seite führen.

moveby(horizontal, vertikal); Bewegt das Fenster, Angaben in Pixel

moveto(horzontal, vertikal); Bewegt das Fenster an die angegebene Position, gerechnet von der linken oberen Browserecke.

focus(); bzw. blur(); Fenster bzw. Frame gewinnt bzw. verliert den Focus. Ein Fenster mit Focus steht im Vordergrund, eines mit blur geht in den Hintergrund.

open(URL, targetName, Attribute);
die window.open-Parameter wurden bereits ausführlich in 7.4.1 behandelt, lesen Sie dort ggf. nochmals nach. Im Prinzip können alle oder auch nur einige Parameter freigelassen werden, also z.B. window.open(); oder window.open("","",""); oder window.open("", "steuerpult", "width=200, height=300");

Für den Attribut-Parameter stehen eine Vielzahl von Möglichkeiten bereit. Hier werden nicht alle aufgeführt (insbesondere die nicht, die nicht im IE laufen).

und nun doch noch zwei Besonderheiten:

close(); schließt ein Fenster. Nur auf Fenster anwenden, die nicht das Hauptbrowserfenster darstellen, ansonsten steht der Benutzer ohne Fenster da (und unter Windows wird ihm sogar der Browser runtergefahren).

resizeBy(horizontal, vertikal); in Pixelangaben. Verändert die Fenstergröße um die angegebenen Pixel

resizeTo(horizontal, vertikal); in Pixelangaben. Verändert die Fenstergröße auf die angegebenen Maße

scrollby(horizontal, vertikal); Scrollt den Inhalt des Fensters um die Pixel angegebenen Werte

und nun noch die hilfreichen Timermethoden:

setTimeOut(function, millisekunden); startet die unter function angegebene Funktion nach den angegebenen Millisekunden.

z.B. var losgehts=window.setTimeOut('textschreiben()', 3000);

clearTimeOut(var); wenn man die Methode setTimeOut mit einer Variablen versehen hat (wie z.B. oben mit der Variablen losgehts) kann man mit dieser Methode die Wartezeit löschen, also z.B. window.clearTimeOut(losgehts);

setInterval(function, millisekunden); setTimeOut ruft eine function nur einmal auf (nach der eingestellten Verzögerung); setInterval ruft sie immer wieder (nach der angegebenen Verzögerungszeit auf). Kann analog oben mit clearInterval gelöscht werden.

Eigenschaften (Auswahl):

Viele der Eigenschaften des Window-Objektes stellen untergeordnete Objekte dar (z.B. document, history, location, frames).

Weitere Eigenschaften sind u.a. folgende:

Sonstige Eigenschaften:

closed Werte true oder false. Ermittelt, ob ein Fenster geschlossen ist (true). Wenn Sie also den Benutzer irgendwann mal ein Fenster über einen JavaScript-Fensternamen (d.h. via Variable) öffnen liesen, können Sie damit abklären, ob es noch geöffnet ist, also z.B.:
var neuFenster=window.open();
.........
if (neuFenster.closed=false)
{
window.document.write("Gut, dass Sie das Fenster noch offengelassen haben");
}
neuFenster=window.open();

Hinweis: Über einen evtl. vergebenen Targetnamen (s.o.) lässt sich ein Fenster für diese Methode nicht ansprechen.

opener Adressiert das Fenster, von dem aus ein weiteres Fenster geöffnet wurde. Wichtig, da ja das Hauptfenster des Browsers (also das, welches bei Aufruf des Browsers aufgeht) keinen JavaScript-Namen trägt. Mit dieser Methode können Sie das Hauptfenster aber dennoch, und zwar von einem weiteren Fenster aus ansprechen.

Beispiel: Nehmen wir an, sie haben ein zweites Fenster mit JavaScript-Namen neuFenster öffnen lassen:

var=neuFenster=window.open();

Sie wollen nun vom neuen Fenster aus das alte Schließen. Im neuen Fenster haben Sie folgendes Skript:
neuFenster.Opener.close();

self bezieht sich auf das aktuelle Fenster. Quasi synonym mit window oder einem JavaScript-Fensternamen (z.B. neuFenster), falls dieser definiert wurde.
self.close(); ist also synonym mit window.close(); oder ggf. auch mit neuFenster.close(); (letzteres nur, falls das Skript in einem Dokument innerhalb des neuFensters steht).

Heißer Tipp: self.close funktioniert bei manchen Browsern nicht, wenn es mit einem Link aufgerufen wird (also z.B. <a href="#" onclick="self.close();">Fenster schlie&szlig;en</a>, sofern im Dokument-Header ein base target angegeben ist. Dann wird zwar das Fenster geschlossen, ein neues geht dafür auf. Lösung: brechen Sie das im base-Target-Tag angegebene Fenster durch _self, also: <a href="#" target="_self" onclick="self.close();">Fenster schlie&szlig;en</a>

top bezieht sich auf das sog. oberste Fenster (meist das Browserfenster). top.close(); schließt dieses. Wichtig, wenn mehrere Frames auf einer Seite sind und Sie z.B. beim Laden einer neuen Seite wirklich alle Frames brechen wollen:
top.location.href="neueSeite.html" bricht alle Frames (s.u.)

parent bezieht sich auf den übergeordneten Frame.

Beispiel
Ein frame-document hat drei Frames definiert. Das Laden einer neuen Seite soll in den zweiten Frame geschehen.
parent.frames[1].location.href="seite2.html" (Sie erinnern sich, Indexnr. 0 ist der erste Frame, 1 der zweite usw).

Sie wollen diese Frames brechen:
parent.location.href="keineframes.html";

Hinweis: in vielen Fällen ist parent.location.href gleichbedeutend mit top.location.href. Zumindest früher hat man kaum mehrfach verschachtelte Frames verwendet. Dies ist heute nicht mehr so. Viele Domains werden über einen "unsichtbaren" Frame verwaltet (bestehend aus zwei Reihen ohne Rand dazwischen, Die erste Reihe ist z.B. nur 1 Pixel hoch, die zweite Reihe der Rest. Alles spielt sich dann in der zweiten Reihe ab. Oder aber die erste Reihe ist 100% hoch, die zweite * (d.h. der "Rest", der dann nicht vorhanden ist): Auch www.palaeo.de funktioniert so. Wenn wir einen Frame verwenden, z.B. die Eingangsseite www.palaeo.de/multimediakurs/index.html hätten wir zwei Möglichkeiten, von einem der Framefenster aus (also z.B. von diesem hier, sofern Sie es im Frame belassen haben), den Frame zu brechen:

Möglichkeit 1: parent.location.href="hinweis.html"; bricht den multimediaframe. Sie bleiben jedoch noch im www.palaeo.de-Frame (der unsichtbar ist). Sie merken es an zwei Befunden:

  1. In der Adressleiste sehen Sie noch die Angabe http://www.palaeo.de/...
  2. Wenn Sie im Browser den Quellcode der geladenen Seite aufrufen, sehen Sie nicht etwa den Code der Seite hinweis.html , sondern den code des ("unsichtbaren") palaeo-de-Frames.

Alternativ zu obiger Aufrufmöglichkeit können Sie den Link auch mit target="_parent" aufrufen (underscore nicht vergessen)!

Probieren Sie es aus.

Möglichkeit 2: top.location.href="hinweis.html" bricht alle Frames. Sie merken es an zwei Befunden:

  1. In der Adressleiste steht nun die IP-Nummer des Servers
  2. Wenn Sie im Browser den Quellcode der geladenen Seite aufrufen, sehen Sie nun den Code der Seite hinweis.html

Alternativ zu obiger Aufrufmöglichkeit können Sie den Link auch mit target="_top" aufrufen (underscore nicht vergessen)!

Probieren Sie es aus

Wenn Sie also sichergehen wollen, alle frames zu brechen, verwenden Sie top.--- bzw. target="_top"; ansonsten parent... bzw. target="_parent"

Heißer Tipp:

Wenn Sie normal in Frameseiten navigieren wollen, und diese ab und zu brechen wollen, verwenden Sie parent. Sollten Ihre Seiten mal auf einen Server umziehen, der einen Domainnamen mit unsichtbaren Frames verwaltet (sog. Stealth redirect), funktioniert Ihre Navigation nicht mehr, wenn Sie top verwenden.

Bei Links zu externen Seiten, die sich auf Ihren Frameseiten befinden, verwenden Sie aber am besten immer top... bzw. target="_top", um sicherzugehen, dass Sie auch wirklich aus der eigenen Domain herauskommen (sonst steht in der Adresszeile des Browsers fälschlicherweis immer noch Ihre Domain, was Ihnen im schlimmsten Fall sogar als Betrug ausgelegt werden kann.

Dazu gleich nochein weiteres Beispiel. Wir machen einen Link auf die Seite http://www.lmu.de (das ist die Eingangsseite der Universität München). Bitte verwenden Sie den Rückwärtsknopf Ihres Browsers, um gleich wieder zum Kurs zurückzukommen. Wenn Sie gleich durch die lmu-Seiten stöbern wollen, verwenden Sie Link 3 (der ruft Ihnen die Seite ordnungsgemäß in einem neuen Fenster auf).
Link 1 zu lmu.de, mit target="_parent" Hier bleibt in der Adressleiste www.palaeo.de/multimediakurs stehen.
Link 2 zu lmu.de, mit target="_top". Hier wird auch in der Adressleiste lmu angezeigt
Link 3 zu lmu.de, mit target="extra"

length ermittelt die Anzahl der "windows" im Browserfenster, d.h. die Anzahl der Frames, nur lesbar. var Rahmenzahl="window.length";



Objektunabhängige "Methoden" (Auswahl)

Formalisten nennen diese nicht Methoden, da sie ja an keinem Objekt ansetzen (also auch keine Methode im strengen Sinne darstellen). Es handelt sich um weiterer "built-in"-Funktionen, die aber nichts mit den von uns definierten functions und auch nichts mit dem Objekt Function (s.o.) zu tun haben. Wir verwenden sie wie Methoden. Der einzige Unterschied ist, dass kein Objektpfad dazu angegeben wird.

escape(string); Ergibt den hexadezimalen Code eines Zeichens oder eines Strings. alert(escape("ö"); Der Wert wäre %F6

Umrechnungsmöglichkeiten finden Sie auf der nachfolgenden Seite (Teilmodul 7.4.3).


unescape(string); analog zu oben: escape("%F6")=ö, bzw. &ouml;


eval(String_mit_Zahlen); z.B. eval("11-3"); Wert ist 8


isFinite(Parameter); stellt fest, ob der Parameter eine endliche Zahl ist. True wenn endliche Zahl, ansonsten false


isNaN(Parameter); stellt fest, ob Parameter keine Zahl ist; True, wenn keine Zahl. (NaN ist eine objektunabhängige Eigenschaft und bedeutet Not a Number)


Number(angabe); Angabe wird in Zahlen umgewandelt. Falls nicht möglich, Rückgabewert NaN , ansonsten Zahl. Häufig für Datumsangaben angewendet.

var Datum = new Date();
Number(datum)
;
Ein Datum wird dann als Zahl ausgegeben (das sind die seit 1.1.1979 vergangenen Millisekunden).


parseFloat(zahlenstring); konvertiert in Flieskommazahl. Falls zahlenstring keine Zahl enthält, wird NaN zurückgegeben.


parseInt(zahlenstring); Konvertiert in Ganzzahl, sind keine Zahlen vorhanden, wird NaN zurückgegeben



Damit sind wir am Ende unserer vereinfachten JavaScript-Objekt-Referenz angekommen. Sehen Sie für Syntax-Ergänzungen ins nachfolgende Modul 7.4.3. Zu kompletten Referenzen gehen Sie bitte zu Netscapes JavaScript-1.3-Referenz (sowie dem zugehörigen Java-Script-1.3-Guide von Netscape), zur SelfHTML-JS-Objektreferenz von S. Münzer oder beschaffen sich M.Seeboergers JavaScript Buch, um nur einige möglichen Quellen zu nennen.

In S. Münzers JavaScript-Referenz finden Sie auch viele Beispiele zu den einzelnen Objektmethoden und Eigenschaften. Einige weitere kommentierte Beispiele für Learning by Doing finden Sie auf unserer Kursseite 7.4.5.


>> Modul 7.4.3: Weitere Syntaxmöglichkeiten

<< Modul 7.4.1: Level3-Einführung und Syntaxpräzisierung