1. window
  2. document
  3. location
  4. history
  5. navigator
  6. array
  7. image
  8. date
  9. math
  10. string


1. window


Mit Hilfe des window-Objektes werden alle Inhalte des Browsers angezeigt. Dieses Objekt existiert auch, wenn der Browser keinen Inhalt hat. Zusätzlich zur Anzeige des Inhalts kontrolliert es noch weitere Aspekte eines Fensters, dies sind z.B. die Größe oder Informationen zu dem Fenster. Bei der Verwendung von Frames, erzeugt jeder Frame ein eigenes window-Objekt, da jeder dieser Frames ein Dokument enthält.

Auf das window-Objekt kann wie folgt zugegriffen werden:
  • window.attributName

  • window.methodenName(Parameter)
  • self.attributName

  • self. methodenName(Parameter)
Da ein window-Objekt immer vorhanden ist, kann man den Teil "window." Auch weglassen. Dann würde die Deklaration wie folgt aussehen:
    attributName
    methodenName(Parameter)
1. Eigenschaften

EigenschaftErläuterung

_contentInhalt einer Web-Adresse oder HTML-Datei wird geladen
closesprüft, ob Fenster geschlossen ist oder nicht
defaultStatusAnzeige von Text in der Statusleiste
documentgeladenes Dokument
framesbestimmter Frame wird angesprochen
historyInfos, der bisher besuchten Web-Seiten
innerHeightHöhe des Fensterinhaltes
innerWidthBreite des Fensterinhaltes
lengthAnzahl der Frames
locationverfügt über die aktuelle Web-Adresse
locationbarSymbolleiste des Browsers sichtbar oder nicht
menubarMenüleiste des Browsers sichtbar oder nicht
nameName des Fensters
openerdas Fenster (Opener), von dem ein Fenster geöffnet wurde, wird angesprochen
outerHeigthäußere Höhe des Fensters
outerWidthäußere Breite des Fensters
pageXOffsetx-Koordinate des Fensterinhaltes, wenn gescrollt wird
pageYOffsety-Koordinate des Fensterinhaltes, wenn gescrollt wird
parentÜbergeordnetes Fenster
personalbarregelt, ob Symbolleiste mit den Buttons What's cool,... versehen ist
screenXx-Koordinate der linken oberen Ecke des Fensters auf dem Monitor
screenYy-Koordinate der linken oberen Ecke des Fensters auf dem Monitor
scrollXAnzahl der Pixel, um die Inhalt auf der x-Achse gescrollt wird
scrollYAnzahl der Pixel, um die Inhalt auf der y-Achse gescrollt wird
selfsynonymer Ausdruck für aktuelles Fenster
statusText in Statusleiste, wenn Ereignis eintritt
statusbarregelt Sichtbarkeit der Statusleiste
toolbarregelt, ob Symbolleiste mit den Buttons Zurück, Vorwärts,... versehen ist
topoberes Fenster, i.d.R. Browser-Fenster
windowaktuelles Fenster

Erklärungen zu den Eigenschaften:

_content:

Der Inhalt wird in den Bereich, der für HTML zur Verfügung steht, geladen. Aus diese Eigenschaft kann z.B. location.href angewendet werden.

  window._content.location.href = "Internet-Adresse";

closes:

Wenn das Fenster geschlossen ist, dann ist der Wert true, ansonsten ist er false. Die Eigenschaft ist nur lesbar.

  var Fenster = window.closed;

defaultStatus:

Angegebener Text wird in die Statusleiste geschrieben, es sei denn ein Ereignis überschreibt den Text.

  window.defaultStatus = "Das ist ein Test!";
return true;

document:

Näheres zu den Eigenschaften und Methoden siehe document-Objekt.

frames:

Über ein Array von Frame-Objekten kann ein Frame angesprochen werden. Näheres zu den Eigenschaften und Methoden siehe Frame-Objekt.

  parent.frames[1];

history:

Näheres zu den Eigenschaften und Methoden siehe history-Objekt.

innerHeight:

Die Höhe wird in Pixel angegeben.

  window.innerHeight = 200;

innerWidth:

Die Breite wird in Pixel angegeben.

  window.innerWidth = 200;

length:

Die Eigenschaft ist nur lesbar.

  var Anzahl = window.length;

location:

Näheres zu den Eigenschaften und Methoden siehe location-Objekt.

locationbar:

Wenn der Browser sichtbar ist, dann ist der Wert true, ansonsten ist er false. Um den Wert zu verändern, muss erst die Berechtigung UniversalBrowserWrite über die Methode enablePrivilege des security-Objektes innerhalb des Java-Pakets netscape gesetzt sein.

  netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");
  var sichtbar = window.locationbar.visible;

menubar:

Wenn die Menüleiste sichtbar ist, dann ist der Wert true, ansonsten ist er false. Die Berechtigung UniversalBrowserWrite muss über die Methode enablePrivilege des security-Objektes innerhalb des Java-Pakets netscape gesetzt sein.

  netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");
  var sichtbar = window.menubar.visible;

name:

In JavaScript 1.0 ist die Eigenschaft nur lesbar, ab 1.1 auch veränderbar.

  alert(window.name);

opener:

  window.opener.close();

outerHeigth:

Die Höhe wird in Pixel, einschließlich Symbol-, Menü-, Fensterleisten und Fensterrahmen, angegeben.

  window.outerHeight = 200;

outerWidth:

Die Breite wird in Pixel, einschließlich Symbol-, Menü-, Fensterleisten und Fensterrahmen, angegeben.

  window.outerWidth = 200;

pageXOffset:

  var pos = window.pageXOffset;

pageYOffset:

  var pos = window.pageYOffset;

parent:

Die Eigenschaft beinhaltet das Frameset und bestimmt den aktuellen Frame. Die Eigenschaft ist nur lesbar.

  parent.frames[1];

personalbar:

Wenn die Leiste sichtbar ist, dann ist der Wert true, ansonsten ist er false. Die Berechtigung UniversalBrowserWrite muss über die Methode enablePrivilege des security-Objektes innerhalb des Java-Pakets netscape gesetzt sein.

  netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");
  window.personalbar.visible = true;

screenX:

Der Ursprung der Koordinate ist die linke obere Ecke.

  alert(window.screenX);

screenY:

Der Ursprung der Koordinate ist die linke obere Ecke.

  alert(window.screenY);

scrollX:

Die Eigenschaft ist nur lesbar.

  alert(window.scrollX);

scrollY:

Die Eigenschaft ist nur lesbar.

  alert(window.scrollY);

self:

  self.status = "Das ist ein Test!";
  return true;

status:

Wenn mittels defaultStatus etwas in Statusleiste geschrieben wurde, dann wird es mit dieser Methode überschrieben.

  window.status = "Das ist ein Test!";
  return true;

statusbar:

Wenn die Statusleiste sichtbar ist, hat sie den Wert true, ansonsten false. Die Berechtigung UniversalBrowserWrite muss über die Methode enablePrivilege des security-Objektes innerhalb des Java-Pakets netscape gesetzt sein.

  netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");
  window.statusbar.visible = true;

toolbar:

Wenn die Leiste sichtbarist, aht sie den Wert true, ansonsten false. Die Berechtigung UniversalBrowserWrite muss über die Methode enablePrivilege des security-Objektes innerhalb des Java-Pakets netscape gesetzt sein.

  netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");   window.toolbar.visible = true;

top:

Die Eigenschaft ist nur lesbar.

  top.close();

window:

Methoden und Eigenschaften werden auf das aktuelle Fenster angewandt. Die Eigenschaft ist nur lesbar.

  window.alert("Das ist ein Test!");



2. Methoden

MethodeErläuterung

addPanel(name, URL, custom)Eintrag einer Web-Seite in die Registerkarte (Sidebar) im Netscape-6-Browser
alert(String)Anzeige einer Dialogbox
back()Anzeige der vorherigen Seite
blur()angegebenes Fenster verliert Fokus
captureEvents(type)Abfangen von Ereignissen
clearInterval(ID)Löschen der Intervallzeit
clearTimeout(ID)Löschen einer Wartezeit, die bei setTimeout() übergeben wurde
close()schließt aktuelles Fenster
confirm(String)Anzeige einer Dialogbox
disableExternalCapture()blendet Möglichkeit aus, Events in einem Frame abzufangen, der eine fremde Web-Seite auf einem anderen Server enthält
enable ExternalCapture()bietet Möglichkeit an, Events in einem Frame abzufangen, der eine fremde Web-Seite auf einem anderen Server enthält
find(string, a, b)Suche nach String im angegebenen Fenster
focus()angegebenes Fenster erhält Fokus
forward()Anzeige des nächsten Seite im Browser
handleEvent(typ)Aufruf eines Eventhandlers
home()Anzeige der Startseite
moveBy(PixelHorizontal, PixelVertikal)Bewegung des aktuellen Fensters in Pixel
moveTo(x, y)Bewegung des aktuellen Fensters in Pixel an angegebene Position
open(URL, windowName, Attribute)Öffnet neues Browser-Fenster
print()Ausdruck des Inhalts des aktuellen Fensters
prompt(String, Vorgabe)Anzeige einer Dialogbox mit OK- und Abbrechen-Button und einer Eingabezeile
releaseEvent(typ)Freigabe eines Ereignisses
resizeBy(PixelHorizontal, PixelVertikal)Veränderung der Höhe und Breite des aktuellen Fensters in Pixel
resizeTo(x, y)Veränderung der Höhe und Breite des aktuellen Fensters auf angegebene Größe in Pixel
routeEvent(typ)Ereignis typ wird an untergeordnetes Objekt gesendet
scroll(x, y)Scrollen des Inhalts des Fensters an gewünschte Position
scrollBy(PixelHorizontal,PixelVertikal)sichtbarer Bereich des Fensters wird gescrollt in Pixel
scrollByLines(nr)Scrollen des sichtbaren Bereichs des Fensters
setCursor(cursor)Setzen eines anderen Cursors
setInterval(function‚ ms)Setzen eines Zeitintervalls in Millisekunden
setTimeout(function‚ ms)Setzen einer Wartezeit in Millisekunden
sizeToContent()Vergrößerung oder Verkleinerung eines Fensters
stop()Laden einer Datei wird gestoppt



Erklärungen zu den Methoden:

addPanel(name, URL, custom):

Als Parameter muss der Name der Registerkarte angegeben werden. Weiterhin ist die URL notwendig. Der Paramter custom ermöglicht Änderungen an der Registerkarte.

  window.sidebar.addPanel("News", "Internet-Adresse", "");

alert(String):

Als Parameter wird ein String übergeben, den die Dialogbaox enthält

  window.alert("Das ist ein Test!");

back():

Die Seite wird aus dem Cache geladen. Dieser Methode müssen keine Parameter übergeben werden. Sie ist jederzeit aufrufbar. Die Methode hat die gleiche Funktion wie history.back().

  window.back();

blur():

Wenn das Fenster den Fokus verloren hat, bedindet es sich im Hintergrund.

  window.blur();

captureEvents(type):

Als Parameter muss das Event angegeben werden. Alle Events, die eingesetzt werden können, sind im folgenden aufgelistet:
    Event.ABORT, Event.BLUR, Event.CLICK, Event.CHANGE, Event.DBLCLICK, Event.DRAGDROP, Event.ERROR, Event.FOCUS, Event.KEYDOWN, Event.KEYPRESS, Event.KEYUP, Event.LOAD, Event.MOUSEDOWN, Event.MOUSEMOVE, Event.MOUSEOUT, Event.MOUSEOVER, Event.MOUSEUP, Event.MOVE, Event.RESET, Event.RESIZE, Event.SELECT, Event.SUBMIT, Event.UNLOAD
  window.captureEvents(Event.CLICK);

clearInterval(ID):

Als Parameter muss die ID angegeben werden, die von setInterval() zurückgegeben wird.

  window.clearInerval(ID);

clearTimeout(ID):

Als Parameter muss die ID angegeben werden, die von setTimeout() zurückgegeben wird.

  window.clearTimeout(ID);

close():

Dieser Methode müssen keine Parameter übergeben werden. Sie ist jederzeit aufrufbar.

  window.close();

confirm(String):

Als Parameter muss ein String übergeben wird, den die Dialogbox enthält. Der Rückgabewertist true, wenn der OK-Button gedrückt wurde, ansonsten ist er false.

  window.confirm("Das ist ein Test!");

disableExternalCapture():

Dieser Methode müssen keine Parameter übergeben werden. Sie ist jederzeit aufrufbar.

  window.disableExternalCapture();

enable ExternalCapture():

Dieser Methode müssen keine Parameter übergeben werden. Sie ist jederzeit aufrufbar. Die Methode kann nur von einem signiertem Script aufgerufen werden. Die Berechtigung UniversalBrowserWrite muss über die Methode enablePrivilege des security-Objektes innerhalb des Java-Pakets netscape gesetzt sein.

  netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");
  window.enableExternalCapture();

find(string, a, b):

Als Parameter wird ein String übergeben, der die gesuchte Zeichenkette darstellt. Der Parameter a wird angegeben, um die Groß-/Kleinschreibung zu berücksichtigen (true) oder nicht (false). Der Parameter b gibt an, ob rückwärts (true) oder vorwärts(false) gesucht werden soll. Der Rückgabewert der Methode ist true, wenn die Zeichenkette gefunden wurde, ansonsten ist er false.

  var suchen = window.find("Name", true, false);

focus():

Wenn das Fenster den Fokus erhalten hat, befindet es sich im Vordergrund. Dieser Methode müssen keine Parameter übergeben werden. Sie ist jederzeit aufrufbar.

  window.focus();

forward():

Die Seite wird aus dem Cache geladen. Dieser Methode müssen keine Parameter übergeben werden. Sie ist jederzeit aufrufbar. Die Methode hat die gleiche Funktion wie history.forward().

  window.forward();

handleEvent(typ):

Als Parameter muss das Event angegeben werden. Die Events, die als type eingesetzt werden können, findet man bei der Methode captureEvents().

  window.handleEvent(Event.MOUSEOVER);

home():

Die Startseite ist die Seite, die als Home-Seite in den Einstellungen angegeben ist.

  window.home();

moveBy(PixelHorizontal, PixelVertikal):

Der erste Parameter stellt die Bewegung in horizontaler und der zweite Parameter die Bewegung in vertikaler Richtung dar.

  window.moveBy(200, 150);

moveTo(x, y):

Der erste Parameter stellt die Position auf der horizontalen x-Achse und der zweite Parameter die Position auf vertikaler y-Achse dar. Der Ursprung der Koordinaten ist die linke obere Ecke des Bilschirms.

  window.moveTo(450, 300);

open(URL, windowName, Attribute):

Als Parameter wird die URL übergeben, die den Dateinamen oder die Adresse angibt. Des Weiteren muss der Name des Fensters angegeben werden und Attribute, die das Erscheinungsbild des Browsers beeinflussen.

  var fenster = window.open("test.html", "Fenster1", "outerHeight =300, outerWidth = 300, resizable = no");

print():

Dieser Methode müssen keine Parameter übergeben werden. Sie ist jederzeit aufrufbar.

  window.print();

prompt(String, Vorgabe):

Als Parameter wird ein Stringübergeben, den die Dialogbox enthält. Der zweite Parameter stellt die Vorbelegung der Eingabezeile dar und ist optional. Der Rückgabewert ist der Inhalt der Eingabezeile. Ist er null, dann wurde die Abbrechen-Taste gedrückt.

  window.prompt("Bitte Name eingeben!", "Name");

releaseEvent(typ):

Als Parameter muss das Event angegeben werden. Die Events, die als type eingesetzt werden können, findet man bei der Methode captureEvents().

  window.releaseEvent(Event.KEYPRESS);

resizeBy(PixelHorizontal, PixelVertikal):

Der erste Paramter stellt die Anzahl der Pixel in horizontaler und der zweite Parameter die Anzahl der Pixel in vertikaler Richtung dar.

  window.resizeBy(100, -150);

resizeTo(x, y):

Der erste Paramter stellt die neue Koordinate auf der horizontalen Achse und der zweite Parameter die neue Koordinate auf der vertikalev Achse dar. Die Größenangaben korrespondieren mit den Attributen outerWidth und outerHeight der Methode open().

  window.resizeTo(400, 150);

routeEvent(typ):

Als Parameter muss das Event angegeben werden. Die Events, die als type eingesetzt werden können, findet man bei der Methode captureEvents().

  window.routeEvent(Event.SUBMIT);

scroll(x, y):

Der Paramter x stellt die Position auf der horizontalen Achse und y die Position auf der vertikalen Achse dar. Der Ursprung liegt in der linken oberen Ecke des Fensters. Ab JavaScript 1.2 wurde diese Methode durch srollTo() ersetzt und sollte nicht mehr verwendet werden.

  window.scroll(350, 100);

scrollBy(PixelHorizontal,PixelVertikal):

Der erste Paramter stellt die Anzahl der Pixel in horizontaler und der zweite Parameter die Anzahl der Pixel in vertikaler Richtung dar. Negative Werte sind erlaubt. Voraussetzung für die Anwendung der Methode ist, das das Attribut scrollbars der Methode open() auf yes gesetzt ist.

  window.scrollBy(100, -50);

scrollByLines(nr):

Der Parameter nr gibt die Anzahl der Zeilen an, die gescrollt werden sollen (nur ganze Zahlen). Wenn die Zahl positiv ist, wird nach unten gescrollt, ansonsten nach oben. Ausgangspunkt ist die aktuelle HTML-Zeile, die sich unterhalb der Symbolleiste befindet.

  window.scrollByLines(5);

setCursor(cursor):

Der Parameter cursor gibt den Namen des Cursors an, der verwendet werden soll. Es gibt verschiedene Arten von Cursors:
    - crosshairFadenkreuz
    - pointerHand
    - movezum Symbolisieren von Bewegung
    - waitfür Wartezustand
    - textfür Texteingaben
    - helpfür Hilfetexte
    - n-resizeVergrößerung nach oben (North)
    - s-resizeVergrößerung nach unten (South)
    - e-resizeVergrößerung nach rechts (East)
    - w-resizeVergrößerung nach links (West)
    - ne-resizeVergrößerung nach rechts oben (North-East)
    - nw-resizeVergrößerung nach links oben (North-West)
    - se-resizeVergrößerung nach rechts unten (South-East)
    - sw-resizeVergrößerung nach links unten (South-West)
  window.setCursor("wait");

setInterval(function‚ ms):

Als Parameter muss die Funktion angegeben werden, die nach ms (Millisekunden) aufgerufen werden soll.

  var ID = window.setInterval('start()', 1000);

setTimeout(function‚ ms):

Als Parameter muss die Funktion angegeben werden, die nach ms (Millisekunden) nur einmal aufgerufen werden soll.

  var ID = window.setTimeout('start()', 1000);

sizeToContent():

Die Methode wird verwendet, um den gesamten Inhalt darzustellen.

  var fenster = window.open("test.html", "Fenster", "resizable = no");
  fenster.sizeToContent();

stop():

Dieser Methode müssen keine Parameter übergeben werden. Sie ist jederzeit aufrufbar.

  window.stop();

3. Unterobjekte

* Da die ausführliche Behandlung der einzelnen Unterobjekte den Rahmen dieses Tutorials sprengen würde werden sie hier nur der Vollständigkeit halber erwähnt:

document, event, history, location

4. Beispiel

Quellcode:

<html>
<head>
<title>window</title>
<script language="JavaScript">
<!--
window.defaultStatus = "Dies ist ein Beispiel.";

function Status()
{
 window.status = "Der Inhalt der Statusleiste wird überschrieben.";
}
//-->
</script>
</head><body>
siehe Statusleiste<br><br>
<a href="javascript:Status()">Statusleiste überschreiben mittels Eigenschaft status</a>
<p align="right">
<input type="Button" value="Fenster schliessen" onClick="window.close()">
</p>
</body></html>


ansehen

Top


2. document


Das document - Objekt ist ein Unterobjekt des JavaScript Objektes window.

Im document-Objekt sind alle Informationen über das aktuelle Dokument im Browser enthalten. Mittels dessen Eigenschaften und Methoden kann das Aussehen des Dokuments verändert werden.

Auf das document-Objekt kann wie folgt zugegriffen werden:
  • [window.]document.attributName
  • [window.]document.methodenName(Parameter)
[] - optionale Angabe, wenn Dokument im aktuellen Fenster angesprochen wird

1. Eigenschaften:

EigenschaftErläuterung

alinkColorFarbe eines aktiven Links
anchorsjeder Anker, der mit erzeugt wurden, ist damit ansprechbar
appletsjedes Applet, das mit <APPLET> bzw. <OBJECT> erzeugt wurde, ist damit ansprechbar
bgColorHintergrundfarbe des Dokuments
classesVeränderung der Stileigenschaft der CSS
cookiein die Datei cookie.txt wird ein String geschrieben
domainSpeicherung des Namen der Domain in einem String
embedsjedes Objekt, dass über <EMBED> erzeugt wurde, ist damit ansprechbar
fgColorTextfarbe des Dokuments
formNameName des Formulars wird zurückgegeben
formsjedes Formular, dass über <FORM> erzeugt wurde, ist damit ansprechbar
heightAnzahl Pixel auf y-Achse
idsVeränderung einer Stileigenschaft der CSS
imagesjedes Bild, dass über <IMG> geladen wurde, ist damit ansprechbar
lastModifiedSpeicherug des Datums der leztzen Änderung in einem String
layersjeder Layer, der über <LAYER>, <ILAYER>, <DIV> oder <SPAN> erzeugt wurde, ist damit ansprechbar
linkColorFarbe der Links
linksjeder Link, der über <A HREF> bzw. <AREA HREF> erzeugt wurde, ist damit ansprechbar
pluginsjedes Plugin ansprechbar
referrerenthält URL des Dokuments, in dem sich ein Link befindet
tagsVeränderung der Eigenschaften eines jedes HTML-Tags möglich
titleenthält Titel des Dokuments als String, der innerhalb von <TITLE>...</TITLE> festgelegt wurde
urlenthält URL des aktuellen Dokuments als String
vlinkColorFarbe eines besuchten Links
widthAngabe der Pixel auf der x-Achse

Erklärungen zu den Eigenschaften:

alinkColor:

Die Angabe der Farbe erfolgt entweder über die hexadezimale Schreibweise oder des vordefinierten Farbnamen.

   window.document.alinkColor = "#00FF00";
   window.document.alinkColor = "green";

anchors:

Die Eigenschaft ist Array, das das Anchor-Objekt enthält. Die Anzahl der Anker bestimmt die Länge des Arrays. Jeder Anker über eine Indexnummer angesprochen. Bei Benutzung des Attributes NAME im Anker, kann dieser auch über diesen Namen angesprochen werden.

   var test = window.document.anchors[2];
   var test = window.document.anchors["Test"];

applets:

Die Eigenschaft ist Array, das das Applet-Objekt enthält. Jedes Applet ist über eine Indexnummer ansprechbar. Bei Benutzung des Attributes NAME im Applet-Tag, kann dieses auch über den Namen angesprochen werden.

   var test = window.document.applets[1];
   var test = window.document.applets["Test"];

bgColor:

Die Angabe der Farbe erfolgt entweder über die hexadezimale Schreibweise oder des vordefinierten Farbnamen.

   window.document.bgColor = "#00FF00";
   window.document.bgColor = "green";

classes:

Die Angabe des Tag-Name, der verändert werden soll, ist notwendig. Es muss die Angabe des Klassenname erfolgen, dem CSS-Eigenschaft zugewiesen werden soll.

   window.document.classes.Klassenname.Tag-Name.property;

cookie:

Die Datei enthält Informationen über Browser bzw. Besuch einer bestimmten Web-Seite.

   winow.document.cookie = "Ich bin ein Krümelkeks.";

domain:

   window.document.domain = "www.htwm.de";

embeds:

Die Eigenschaft ist Array, das das embed-Objekt enthält. Jedes <EMBED>-Tag ist über eine Indexnummer ansprechbar. Bei Benutzung des Attributes NAME, kann das Objekt auch über diesen Namen angesprochen werden. Die Eigenschaft ist nur lesbar.

   var test = window.document.embed[2];

fgColor:

Die Angabe der Farbe erfolgt entweder über die hexadezimale Schreibweise oder des vordefinierten Farbnamen.

   window.document.fgColor = "#00FF00";
   window.document.fgColor = "green";

formName:

   var formular = window.document.formName;

forms:

Die Eigenschaft ist Array, das das Form-Objekt enthält. Jedes Formular ist über eine Indexnummer ansprechbar. Bei Benutzung des Attributes NAME, kann das Objekt auch über diesen Namen angesprochen werden. Die Eiganschaft ist nur lesbar.

   var formular = window.document.forms[1];
   var formular = window.document.forms["Vorname"];

height:

Die Eigenschaft ist nur lesbar

   alert(document.height);

ids:

Die Angabe des Tag-Namen, der geändert werden soll, und eines Klassennamen, dem die CSS-Eigenschaften zugewiesen werden, ist notwendig

   window.document.ids.idName.proberty;

images:

Die Eigenschaft ist Array, das das Image-Objekt enthält. Jedes Bild ist über eine Indexnummer ansprechbar. Bei Benutzung des Attributes NAME, kann Objekt auch über diesen Namen angesprochen werden. Die Eigenschaft ist nur lesbar.

   var bild = window.document.images[2];
   var bild = window.document.images["Foto"];

lastModified:

Die Übertragung dieser Informationen und anderer Daten im http-Protokoll erfolgt über den Server. Wenn die Eignaschaft durch den Server nicht unterstützt wird, dann ist der Wert der Eignaschaft gleich 0. Die Eigenschaft ist nur lesbar.

   alert(window.document.lastModified);

layers:

Die Eigenschaft ist Array, das das Layer-Objekt enthält. Jedes Bild ist über eine Indexnummer ansprechbar. Bei Benutzung des Attributes NAME, kann Objekt auch über diesen Namen angesprochen werden. Die Eigenschaft ist nur lesbar.

   window.document.layers[1];
   window.document.layers["Test"];

linkColor:

Die Angabe der Farbe erfolgt entweder über die hexadezimale Schreibweise oder des vordefinierten Farbnamen.

   window.document.linkColor = "#00FF00";
   window.document.linkColor = "green";

links:

Die Eigenschaft ist Array, das das Link-Objekt enthält. Jeder Link ist über eine Indexnummer ansprechbar. Die Eigenschaft ist nurlesbar. Mir links werden Informationen über den Link abgerufen. Nicht verwechseln mit der Eigenschaft anchors, über die die Anker nur angesprochen werden.

   window.document.links[2];

plugins:

Die Eigenschaft ist Array, das das Plugin-Objekt enthält. Jedes Plugin ist über eine Indexnummer ansprechbar. Die Eigenschaft ist nurlesbar.

   window.document.plugins[1];

referrer:

Die Eigenschaft ist nurlesbar.

   var url = window.document.referrer;

tags:

   document.tags.H1.color="green";

title:

Die Eigneschaft ist nur lesbar.

   var name = window.document.title;

url:

Die Eigneschaft ist nur lesbar.

   var url = window.document.url;

vlinkColor:

Die Angabe der Farbe erfolgt entweder über die hexadezimale Schreibweise oder des vordefinierten Farbnamen.

   window.document.vlinkColor = "#00FF00";
window.document.vlinkColor = "green";

width:

Diese Angabe der Pixel beinhaltet alle HTML-Elementen des Dokuments, einschließlich dem Platz bis zum Fensterrand. Die Eigneschaft ist nur lesbar.

   alert(document.width);


2. Methoden:

MethodeErläuterung

captureEvents(type)Abfangen von Ereignissen
close()Schließen des aktuellen Dokuments
contextual()Veränderung der Stileigenschaft der CSS
getSelection()Speicherung von markiertem Text des aktuellen Dokuments in einem String
handleEvent(type)Aufruf eines Eventhandlers
open(type)Öffnen eines neuen, leeren Dokuments in Browser-Fenster
releaseEvent(type)Freigabe eines Ereignisses
routeEvent(type)Senden eines Ereignisses an untergeordnetes Objekt
write(text)Schreiben eines String in aktuelles Dokument
writeln(text)Schreiben eines Strings in aktuelles Fenster


Erklärungen zu den Methoden:

captureEvents(type):

Als Parameter muss das Event angegeben werden. Die Events, die als type eingesetzt werden können, findet man bei der Methode captureEvents() des window-Objektes.

   window.documents.captureEvents(Event.DBLCLICK | Event.MOUSEOVER);

close():

Dieser Methode müssen keine Parameter übergeben werden. Sie ist jederzeit aufrufbar.

   window.document.close();

contextual():

Über die Methode wird der Name eines Tags angegeben, das geändert werden soll und sich innerhalb eines anderen Tags befindet. Ebenfalls muss der Klassenname angegeben werden, dem die CSS-Eigenschaft zugewiesen werden soll.

   window.document.contextuel(window.document.tags.tagName1, window.document.tags.tagName2).proberty;

getSelection():

Dieser Methode müssen keine Parameter übergeben werden. Sie ist jederzeit aufrufbar.

   window.document.getSelection();

handleEvent(type):

Als Parameter muss das Event angegeben werden. Die Events, die als type eingesetzt werden können, findet man bei der Methode captureEvents() des window-Objektes.

   window.document.handleEvent(Event.MOUSEUP);

open(type):

Mit Hilfe der Methoden write und writeln werden Informationen ausgegeben. Als Parameter muss der MIME-Type übergeben werden. Es gibt folgende MIME-Typen:
  • text/plain - Texte im Format ISO-Latin-1
  • text/html - Texte im HTML-Format
  • image/jpeg - JPG-Grafiken
  • image/gif - GIF-Grafiken
   window.document.open("text/plain");    window.document.open("text/html", "replace");

releaseEvent(type):

Als Parameter muss das Event angegeben werden. Die Events, die als type eingesetzt werden können, findet man bei der Methode captureEvents() des window-Objektes.

   window.document.releaseEvent(Event.KEYPRESS);

routeEvent(typ):

Als Parameter muss das Event angegeben werden. Die Events, die als type eingesetzt werden können, findet man bei der Methode captureEvents() des window-Objektes.

   window.document.routeEvent(Event.KEYDOWN);

write(text):

Mehrere Strings werden durch Komma getrennt. Als Parameter wird ein String übergeben.

   window.document.write("Hallo", "Das ist ein Test.");
   window.document.write("<H2>Hallo</H2>", "<H5>Das ist ein Test.</H5>");

writeln(text):

Mehrere Strings werden durch Komma getrennt. Am Ende des letzten String wird ein Zeilenumbruch eingefügt. Als Parameter wird ein String übergeben.

   window.document.writeln("<H2>Hallo</H2>", "<H5>Das ist ein Test.</H5>");

3. Unterobjekte:

* Da die ausführliche Behandlung der einzelnen Unterobjekte den Rahmen dieses Tutorials sprengen würde werden sie hier nur der Vollständigkeit halber erwähnt:

HTML-Elemente, all, anchors, applets, forms, images, layers, links, node, plugins

4. Beispiel:

Quellcode:

<html>
<head>
<title>document</title>
<script language="JavaScript">
<!--
var titel = window.document.title;
document.write("<h2>Der Titel des Dokuments lautet: " + titel + "<br><br></h2>");

var i = 0;
function Farbwechsel()
{
 if(i == 0)
 {
  document.bgColor = "#FFFF80";
  document.fgColor = "#0000FF";
 }
 else if(i == 1)
 {
  document.bgColor = "#FF8000";
  document.fgColor = "#FFFFFF";
 }
 else if(i == 2)
 {
  document.bgColor = "#008080";
  document.fgColor = "#FFFF80";
 }
 else if(i == 3)
 {
  document.bgColor = "#000080";
  document.fgColor = "#FFFFFF";
 }
 else if(i == 4)
 {
  document.bgColor = "#400040";
  document.fgColor = "#BFBFBF";
 }
 else if(i == 5)
 {
  document.bgColor = "#000000";
  document.fgColor = "#0000BF";
  }
 i = i + 1;
}
//-->
</script>
</head><body></body></html>

ansehen

Top


3. location


Das location-Objekt dient dazu Informationen bezüglich der Herkunft des aktuellen HTML-Dokuments zu speichern. Zu diesen Informationen zählt u.a. URL, Servername und das verwendete Protokoll. Diese Informationen können ausgelesen werden.

Das Objekt ist ab Netscape Navigator 2.0 und IE 3.0 verfügbar.

1. Eigenschaften:

EigenschaftenErläuterung

hash Angeben eines Ankers eines Links, wird mit dem Zeichen # an Adresse angehängt
host Verbindung aus hostname und port
hostname Name des Servers, auf den der Link zeigt
href Angeben der kompletten URL mit allen Elementen; wird diesem Element neue Adresse zugewiesen, wird entsprechende Seite durch Browser geladen
pathname beinhaltet Pfad und Dateiname einer URL
port gibt Portnummer der URL an, wird meist nicht angegeben, Standardportnummer für http ist 80
protocol gibt das zu verwendete Protokoll für Verbindung an, für http-Verbindung Wert „http“
search enthält Suchstring (Search-String) einer URL, String wird mit Fragezeichen an URL angehangen; Verwendung z.B. bei Formular, um Werte aus dem Formular an andere HTML-Seite oder CGI-Script weiterzuleiten

Zusammensetzung einer Internet-Adresse:

protocol // hostname: port pathname search hash

Die jeweiligen Eigenschaften werden dann mit location.eigenschaft aufgerufen.

2. Methoden:

reload()Neuladen der Seiten
replace(URL)Laden einer Seite
assign(URL)Dokument laden

reload(erzwingen):
  -   ab Netscape 3, IE 4
  -   erzwingt Neuladen einer Seite
  -   gleiche Ergebnis wie Reload-Taste im Browser
  -   optionales Argument erzwingen mgl., boolescher Wert
  -   falls erzwingen true ist, wird das Neuladen der Seite erzwungen, auch wenn sie im Cache liegt

replace(URL):
  -   ab Netscape 3, IE 4
  -   Seite, auf die URL zeigt, wird geladen
  -   aktuelle History-Eintrag wird überschrieben, sodass man nicht mehr zur vorhergehenden Seite mit Zurück-Taste des Browsers gelangt

assign(URL):
  -   nur für IE, ab IE 4
  -  lädt Dokument der angegebenen URL

<html>
<head>
<title>location</title>
<script type="text/javascript">
     <!--
     with (document)
     {
         write(“<table>”);
         write(“<tr><td>href</td><td>” + location.href + ”</td></tr>”);
         write(“<tr><td>host</td><td>” + location.host + ”</td></tr>”);
         write(“</table>”);
     }
     //-->
</script>
<body>
</body>
</html>

Mit Hilfe des location-Objektes kann eine neue Seite geladen werden. Dazu muss lediglich location.href eine neue URL zugewiesen werden.

<script type="text/javascript">
     <!--
     function laden()
     {
         location.href = “http://www.htwm.de”;
     }
     //-->
</script>

Diese Funktion kann dann z.B. innerhalb eines Formulars beim Drücken eines Buttons aufgerufen werden.

Top


4. history


Das history - Objekt ist ein Unterobjekt des JavaScript Objektes window.

Das Objekt ermöglicht den Zugriff auf die zuletzt besuchten Internet-Seiten des aktiven Web-Browsers. Diese werden in einer Liste im Browser gespeichert und können im Bedarfsfall wieder aufgerufen werden.
Mögliche Anwendungsbeispiele für dieses Objekt wären Schaltflächen, die das Springen zur letzten besuchten Seite bzw. auf eine Seite vor ermöglichen.

1. Eigenschaften:

Dieses Objekt besitzt nur eine Eigenschaft:

   length      gibt die Länge der gespeicherten Liste zurück, d.h.: die Anzahl der bereits besuchten Seiten

   <a href="javascript:alert(history.length)">Anzahl besuchter Seiten</a>

2. Methoden:

MethodenErläuterung

back()eine Seite zurück
forward()eine Seite vor
go(urlanzahl)zu einer bestimmten URI in der history - Liste des Browsers springen


Erklärungen zu den Methoden:

back():

Dieser Methode müssen keine Parameter übergeben werden. Sie ist jederzeit aufrufbar.

   <a href="javascript:alert(history.back())">eine Seite zurück</a>

forward():

Dieser Methode müssen keine Parameter übergeben werden. Sie ist nur aufrufbar, wenn zuvor wenigstens einmal die history.back() - Methode aufgerufen wurde:

   <a href="javascript:alert(history.forward())">eine Seite vor</a>

go(urlanzahl):

Dieser Methode muss als Parameter die Anzahl der Seiten übergeben werden, die man überspringen will. Ein negativer Wert bewirkt, dass die gegebene Anzahl Seiten rückwärts gesprungen wird. Ein positiver Wert bewirkt, dass die gegebene Anzahl Seiten vorwärts gesprungen wird (nur wenn bereits vorher mindestens so viele Rückwärtssprünge aufgerufen wurden).

   <a href="javascript:alert(history.go(-4))">4 Seiten zurückgehen</a>

Das history - Objekt besitzt keine Unterobjekte.

Top


5. navigator


Mithilfe des Navigator - Objektes ist es dem JavaScript - Programmierer möglich, Informationen über den Browser zu erfragen. Dies ist zum Beispiel für Browserweichen unabdingbar. Mithilfe des Navigator - Objektes und seinen Methoden und Eigenschaften kann der Name und die Version des User - Browsers ermittelt und somit entsprechende Methoden und Funktionen angepasst werden. Ein Beispiel ist am Ende dieses Abschnitts zu finden.


1. Eigenschaften:

EigenschaftenErläuterung

appCodeNameermittelt den entsprechenden Spitznamen des Browsers
appName ermittelt den offiziellen Namen des Browsers
appVersion ermittelt die Version des Browsers
cookieEnabled erlaubt Cookies
language ermittelt die Sprache des Browsers
platform ermittelt die Plattform, auf welcher der Browser läuft
userAgent ermittelt die http-Identifikation des Browsers


nähere Erklärung der Eigenschaften:

appCodeName:

Netscape , MS Internet Explorer und Opera 5.12 geben bei dieser Abfrage den Wert "Mozilla" zurück.

<script type="text/javascript">
<!--
if (navigator.appCodeName == "Mozilla")
alert("Der Spitzname des Browsers ist Mozilla!");
//-->
</script>



appName:

Diese Eigenschaft ist die am häufigsten verwendete Methode für Browserweichen. Mit ihr lässt sich der exakte Name des Browser ermitteln, der verwendet wird.

<script type="text/javascript">
<!--
var Browser;

Browser = navigator.appName;    // zuweisen des Browsernamens der Variablen Browser
if( Browser =="Microsoft Internet Explorer")
    alert ("Sie verwenden MSIE!");
else if (Browser == "Netscape")
    alert("Sie verwenden einen Netscape-Browser!");
else
    alert("Sie verwenden einen anderen Browser"!);

//-->
</script>

Bei Opera kann der Benutzer frei wählen, welcher Wert in dieser Eigenschaft gespeichert wird!



appVersion:

Der Wert, der bei dieser Abrage zurückgegeben wird ist nicht ausschließlich die Produktversion des entsprechenden Browsers. Sie setzt sich vielmehr aus mehreren verschiedenen Angaben zusammen.

Netscape 4.01 gibt den folgenden Wert zurück:    "4.01 [en] (Win95; I)"
MS Internet Explorer :      "4.0 (compatible; MSIE 4.0; Windows 95)"

<script type="text/javascript">
<!--
if(navigator.appVersion.substring(0,1) == "4")
alert("Oh, ein Browser der 4. Generation!");
//-->
</script>

Erklärung: wie bereits oben erwähnt gibt die Eigenschaft appVersion nicht nur die Produktversion zurück. In diesem Beispiel wird aus dem Rückgabewert mittels der "substring()" - Methode von JavaScript der erste Zeichen des Rückgabestrings ermittelt. Dies ermöglicht die Feststellung , dass die Produktversion die 4. ist.

Bei Opera kann auch dieser Wert frei gewählt werden. Somit können hier unter Umständen falsche oder logisch nicht mögliche Werte zurückgegeben werden!



cookieEnabled:

Mithilfe dieser Eigenschaft kann der Programmierer ermitteln, ob das Speichern von Cookies auf durch den Browser erlaubt ist. Dieser Wert kann lediglich die 2 bool'schen Werte true oder false annehmen. Ist der Wert true wird das Speichern von Cookies durch de Nutzer erlaubt. Ist der wert false, darf ein Cookie nicht gespeichert werden. Ob vor dem Speichern eine Warnmeldung erscheint wird hierbei jedoch nicht geklärt.

Diese Eigenschaft wird jedoch nicht von allen Browsern unterstützt!

<script type="text/javascript">
<!--

var cookiestatus;
if(cookiestatus == true)
alert("Cookies sind erlaubt!");
else if(cookiestatus== false)
alert("Cookies nicht erlaubt!");
else
alert("Der Browser kennt diese Eigenschaft nicht!");
//-->
</script>


language:

Hier kann die Sprache des Browsers ermittelt werden. Die Rückgabewerte entsprechen dabei den Abkürzungen, die international üblich sind (Bsp.: de für Deutschland, ch für Schweiz, fi für Finnland...). Im Microsoft Internet Explorer heißt diese Eigenschaft userLanguage. Möchte man also die Sprache ermitteln wäre es zuallererst sinnvoll den Browsernamen zu ermitteln um dann die entsprechende Eigenschaft aufzurufen.

<script type="text/javascript">
<!--
var sprache;
var Browser;

Browser = navigator.appName;

if(Browser == "Microsoft Internet Explorer")
sprache = navigator.userLanguage;
else
sprache = navigator.language;

if(sprache=="de")
document.write ("Deutsch");
//-->
</script>


platform:

Gibt als Wert das Betriebssystem zurück, auf welchem der aktive Browser läuft.

<script type="text/javascript">
<!-
alert(navigator.platform);
//-->
</script>

Bei den aktuellen Windows - Versionen wird als Wert Win32 zurückgegeben.


userAgent:

Dieser Wert enthält alle wichtigen Informationen über den Browser in der Form, die der Browser auch bei jeder HTTP-Anforderung einer Datei im WWW sendet.

<script type="text/javascript">
<!--
document.write(navigator.userAgent);
//-->
</script>




2. Methoden:

Das Objekt navigator besitzt nur eine einzige Methode.

javaEnabled()       dient zur Überprüfung ob Java im aktuellen Browser verfügbar ist

Die Methode verfügt nur über zwei mögliche Rückgabewerte: true oder false.
Ist die Methode true kann Java im Browser angezeigt werden. Ist die Methode false wird Javacode vom aktiven Browser nicht interpretiert.

Dies ist zum Beispiel wichtig, wenn Applets verwendet werden sollen. Falls JavaEnabled() true ist, kann eine Position für ein JavaApplet angegeben werden. Ansonsten wird dieses nicht ausgegeben.

<script type="text/javascript">
<!--
if(navigator.javaEnabled())
{
document.write("<applet code=\"zticker.class\" width=\"150\" height=\"25\">");
document.write("<\/applet>");
}
//-->
</script>



3. Unterobjekte:

* Da die ausführliche Behandlung der einzelnen Unterobjekte den Rahmen dieses Tutorials sprengen würde werden sie hier nur der Vollständigkeit halber erwähnt:

mimeTypes, plugins

Top


6. array


Das Objekt dient als Container für verschiedene Variablenketten. Es gibt drei verschiedene Möglichkeiten, ein Array in JavaScript zu erzeugen:

- Objektname = new Array();    // wenn die benötigte Anzahl an Fächern noch nicht bekannt ist
- Objektname = new Array(Elementanzahl);    // wenn die Anzahl bekannt ist
- Objektname = new Array(Element0, Element1, ..., element_n);   // wenn die Werte bekannt sind

Der Zugriff auf die einzelnen Array - Elemente erfolgt über:

    element = arrayname[Index];

Anmerkung: Es können auch mehrdimensionale Arrays erzeugt werden. Das heißt, wenn in einem Array noch einmal ein Array liegt. In diesem Fall erfolgt der Zugriff über:

    element = arrayname[index_arr] [index_el];


1. Eigenschaften :

assoziative Arrays      Arrays mit Zeichenketten als Schlüssel
length                       Anzahl der im Array gespeicherten Elemente, beginnend mit 0


Erklärungen zu den Eigenschaften:

assoziative Arrays:

Der Zugriff auf die einzelnen im Array gespeicherten Elemente erfolgt hierbei über Zeichenketten (Schlüssel). Diese Gruppe von Arrays beinhaltet alle Objekte in JavaScript, die die Eigenschaft "name" oder "id" besitzen. Dazu zählen unter Anderem : forms[], images[] , tables[] ... .

Diese Art des Arrays ist vor allem in der Zusammenarbeit mit mehrdimensionalen Arrays sinnvoll.

Besonderheiten: Die Eigenschaft "length" ist assoziativen Arrays nicht bekannt
Die Methoden des Array - Objektes sind hier nicht anwendbar.

Die Elemente können nur mit Namen oder einer for() - in - Schleife angesprochen werden.

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
var Mitarbeiter=new Array();

Mitarbeiter[0] = new Array();
Mitarbeiter[0]["Name"] = "Müller";
Mitarbeiter[0]["Vorname"] = "Hans";
Mitarbeiter[0]["Wohnort"]= "Dresden";

Mitarbeiter[1]=new Array()
Mitarbeiter[1]["Name"] = "Schulze";
Mitarbeiter[1]["Vorname"] = "Frauke";
Mitarbeiter[1]["Wohnort"]= "Berlin";

for (var i=0;i
{
document.write("<dl><dt>Mitarbeiter "+(i+1)+"<\/dt>");
for (var Eigenschaft in Mitarbeiter[i])
document.write("<dd>"+ Eigenschaft + ": "+Mitarbeiter[i][Eigenschaft]+"<\/dd>");
document.write("<\/dl>");
}
//-->
</script>
</body></html>


length:

Der Rückgabewert entspricht der Anzahl der Elemente in einem Array.

    elemente = arrayname.length;


2. Methoden:

MethodenErläuterung

concat()Arrays verketten
join() ein Array in eine Zeichenkette umwandeln
pop() letztes Array-Element löschen
push() neue Array- Elemente anhängen
reverse() Reihenfolge der Elemente in einem Array umkehren
shift() erstes Array - Element entfernen
slice() Teil - Array extrahieren
splice() Element löschen und hinzufügen
sort() Elemente eines Arrays sortieren
unshift() Elemente am Array - Anfang einfügen


Erklärungen zu ausgewählten Methoden:

join():

Mittels dieser Methode ist es möglich, ein Array in eine Zeichenkette umzuwandeln. Dabei muss ein Parameter übergeben werden. Dieser Parameter bezeichnet das oder die Trennzeichen, durch die die einzelnen Arrayelemente in der Zeichenkette voneinander getrennt werden soll.

<html><head><title>Test</title>
<script type="text/javascript">
<!--
var Zahlen = new Array(1,2,4,8,16,32,64,128,256);
var Zahlenkette = Zahlen.join(" ");
alert(Zahlenkette);
//-->
</script>
</head><body>
</body></html>


push():

Die Methode dient zum Anhängen einer oder mehrerer Elemente an ein Array.
Es müssen als Parameter ein oder mehrere anzuhängende Elemente übergeben werden.

Besonderheiten:
In der JavaScript - Version 1.2 wird das letzte Element zurückgegeben.
In neueren Versionen wird die Länge des Arrays zurückgegeben.

Einige Browser kennen die Methode push() nicht. Es ist jedoch trotzdem möglich ein neues Element anzuhängen. Dafür verwendet man folgende Methode:

Zahlen[Zahlen.length]="Wert";

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
var Orte = new Array("Augsburg");
document.write(Orte.join(",") + '<p>');
var NeuestesElement = Orte.push("Berlin");
document.write(Orte.join(",") + '<br>');
document.write('Neu dabei: ' + NeuestesElement + '<p>');
var NeuestesElement = Orte.push("Chemnitz","Dortmund","Essen","Frankfurt");
document.write(Orte.join(",") + '<br>');
document.write('Neuestes Element: ' + NeuestesElement);
//-->
</script>
</body></html>


slice():

Es kann ein Teilarray aus dem Array extrahiert werden. Es müssen zwei Parameter übergeben werden. Der Erste ist die Indexnummer des ersten zu extrahierenden Elementes und der Zweite ist die Indexnummer des letzten zu extrahierenden Elements. Diese kann auch eine negative Zahl sein. Das steht dann für das entsprechende Element von hinten gezählt. Allerdings wird auch von hinten mit 0 zu zählen begonnen.

<html><head><title>Test</title>
<script type="text/javascript">
<!--
var Zahlen = new Array(1,2,3,4,5);
for(var i = 0; i < Zahlen.length; ++i)
{
var NeueZahlen = Zahlen.slice(i,Zahlen.length);
alert(NeueZahlen.join(","));
}
//-->
</script>
</head><body>
</body></html>


splice():

Fügt eine/mehrere Elemente an der angegebenen Stelle im Array ein. Sollte an der entsprechenden Stelle im Array bereits ein Wert stehen, so wird dieser überschrieben.
Die Methode benötigt mindestens zwei Parameter und einen optionalen Parameter.

-  Indexnummer an der das Element im Array eingefügt werden soll
-  Anzahl der einzufügenden Elemente
-  [Elemente, die eingefügt werden sollen] , werden diese nicht eingefügt so werden an die entsprechenden Stellen im Array leere Elemente eingefügt.

<html><head><title>Test</title>
<script type="text/javascript">
<!--
var Zahlen = new Array(1,2,3);
Zahlen.splice(1,3,4,5,6);
alert(Zahlen.join(","));
//-->
</script>
</head><body>
</body></html>

Top


7. image


Dieses Objekt gehört zu den vordefinierten Objekten.

Seit der JavaScript-Version 1.1 werden Bilder mit Hilfe des Image-Objektes dargestellt. Durch dieses Objekt kann man z.B. Angaben zu Bildern erfahren, u.a. Höhe und Breite eines Bildes.

Um die Bilder, die sich in einer HTML-Seite befinden, ansprechen zu können, wird entweder das image-Array verwendet oder den einzelnen Bilder werden eindeutige Namen zugewiesen.

Image ist verfügbar ab Netscape 3, IE 4.

Zugriff beiVerwendung eines Arrays:

    Zugriff aufEigenschaften: document.images[Nummer-des-Bildes-im-Array].Eigenschaft

    Hinweis:Array-Nummern beginnen bei 0

    Zugriff auf Methoden: document.images[Nummer-des-Bildes-im-Array].Methoden

Zugriff bei Verwendung eines eindeutigen Namens:

    document.Bildname.Eigenschaft

    document.Bildname.Methode


Eigenschaften:

border Breite des Rahmens
complete Angabe, ob Bild vollständig geladen
height Höhe des Bildes,Angabe in Pixel oder Prozentwert der Größe des Browsers
width Breite des Bildes, Angabe in Pixel oder Prozentwert der Größe des Browsers
hspace horizontaler Abstand zu umliegenden Objekten
vspace vertikaler Abstand zu umliegenden Objekten
scr Adresse des Bildes
lowscr Adresse des Alternativ-Bildes, wird zuerst geladen und hat meist geringere Auflösung
name Name des Bildes

zusätzliche Eigenschaften des IE:

align=“left“|“right“|“top“|“middle“|
“absmiddle“|“absbottom“|“texttop“|
“baseline“|“bottom“
Ausrichtung des Bildes
alt alternative Text zum Bild
fileCreateDate Datum, an dem Dokument erzeugt wurde
fileModifiedDate Datum der letzten Änderung des Dokumentes
fileSize Dokumentgröße in Byte
isMap gibt an, ob Bild in Zusammenhang mit einer serverseitige Imagemap verwendet wird
map verwendete Imagemap
useMap gibt verwendete clientseitige Imagemap an

Event-Handler:

onabort Festlegung des Ereignisses bei Abbruch des Ladevorgangs
onerror Festlegung des Ereignisses bei Fehler während des Ladens
onkeydown Festlegung des Ereignisses beim Runterdrücken einer Taste, ab Netscape 4, IE 4
onkeypress Festlegung des Ereignisses beim Drücken einer Taste, ab Netscape 4, IE 4
onkeyup Festlegung des Ereignisses beim Loslassen einer Taste, ab Netscape 4, IE 4
onload Festlegung des Ereignisses beim Abschluss des Ladevorgangs

Bsp.: Wechsel von Bildern

<html>
<head>
<script language="JavaScript">
><!--
var aktuell = 1;
function wechsel()
{
     if (aktuell == 1)
     {
         document.bilder.src = "bild2.gif";
         aktuell = 2;
     }
     else
     {
         document.bilder.src = "bild1.gif";
         aktuell = 1;
     }
}
 
// -->
</script>
</head>
<body>
<img src="bild1.gif" name="bilder" onLoad="setTimeout('wechsel()', 900)">
</body>
</html>

Top


8. date


Mit Hilfe des Date-Objekts ist es möglich das Datum und die Uhrzeit abzufragen. Wenn man dieses Objekt verwenden möchte, ist eine expliziete Deklaration notwendig. Es wird über den folgenden Konstriktor erzeugt:
  • var Datum = new Date();

  • Es wird ein Datum erzeugt, das das aktuelle Datum und Uhrzeit enthält.
  • var Datum = new Date(jahr, monat, tag, stunde, minute, sekunde, millisekunde);
  • Es wird ein Datum erzeugt, das die angegebenen Parameter enthält.
Alle Datumsangaben werden in Millisekunden seit dem 1.1.1970 (Greenwich Mean Time - GMT) gezählt.


1. Eigenschaften:

constructorAngabe der Funktion, die eine neue Eigenschaft oder Methode über prototype erzeugt
prototypeHinzufügen von neuen Eigenschaften oder Methoden zum Date-Objekt

Erklärungen zu den Eigenschaften:

constructor:

  var test = new Date();
  date.prototype.groesse = 3;
  alert(test.constructor);

prototype:

Diese Eigenschaft ist für die Erweiterung gedacht. Es erfolgt keine Anwendung auf prototype, sondern auf das Date-Objekt. Das Erben der neuen Methode oder Eigenschaft erfolgt bei der Erzeugung eines neuen Date-Objekts.

  var test = new Date();
  Date.prototype.groesse = 3;
  alert(test.groesse);


2. Methoden:

MethodeErläuterung

getDate()Tag des Monats
getDay()Wochentag des Monats
getFullYear()vierstellige Jahreszahl
getHours()Stundenzahl der Unhrzeit im Computer
getMilliseconds()Millisekunden der Unhrzeit im Computer
getMinutes()Minutenzahl der Unhrzeit im Computer
getMonth()Monatszahl der Unhrzeit im Computer
getSeconds()Sekundenzahl der Unhrzeit im Computer
getTime()Anzahl der Millisekunden, die seit dem 1.1.1970 vergangen sind
getTimezoneOffset()Ermitteln der Differenz zwischen der MEZ und GMT in Minuten
getUTCDate()Tag des Monats nach der Weltzeit UTC (Universal Coordinated Time, d.h GMT)
getUTCDay()Wochentag des Monats nach der Weltzeit UTC
getUTCFullYear()vierstellige Jahreszahl nach der Weltzeit UTC
getUTCHours()Stundenzahl nach der Weltzeit UTC
getUTCMilliseconds()Millisekunden nach der Weltzeit UTC
getUTCMinutes()Minuten nach der Weltzeit UTC
getUTCMonth()Monatszahl nach der Weltzeit UTC
getUTCSeconds()Sekundenzahl nach der Weltzeit UTC
getYear()Anzahl der Jahre seit 1900
parse(datum)Anzahl Millisekunden, die seit dem 1.1.1970, 00:00:00, und dem Datum im aktuellen String vergangen sind
setDate(wert)Setzen der Tageszahl innerhalb eines Monats
setFullYear(jahr, monat, tag)Setzen der vierstelligen Jahreszahl
setHours(stunde, minute, sekunde, millisekunde)Setzen der Stundenzahl als Lokalzeit
setMilliseconds(millisekunde)Setzen der Millisekundenzahl als Lokalzeit
setMinutes(minute, sekunde, millisekunde)Setzen der Minutenzahl als Lokalzeit
setMonth(monat, tag)Setzen der Monatszahl als Lokalzeit
setSeconds(sekunde, millisekunde)Setzen der Sekundenzahl als Lokalzeit
setTime(wert)Setzen der Zeit als Lokalzeit
setUTCDate(tag)Setzen der Tageszahl als Weltzeit
setUTCFullYear(jahr,monat, tag)Setzen der vierstelligen Zahreszahl als Weltzeit
setUTCHours(stunde, minute, sekunde, millisekunde)Setzen der Stundenzahl als Weltzeit
setUTCMilliseconds(wert)Setzen der Millisekundenzahl als Weltzeit
setUTCMinutes(minute, sekunde, millisekunde)Setzen der Minutenzahl als Weltzeit
setUTCMonth(monat, tag)Setzen der Monatszahl als Weltzeit
setUTCSeconds(sekunde, millisekunde)Setzen der Sekundenzahl als Weltzeit
setYear(wert)Setzen der zweistelligen Jahreszahl mittels der Variablen wert, die seit 1900 vergangen sind
toLocaleString()Konvertierung der Zeit und des Datums in einen String
toString()Umwandlung des aktuellen Datums in einen String
toUTCString()Umwandlung des aktuellen Datums in einen String, der in UTC umgerechnet wird
UTC(jahr, monat, tag, stunde, minute, sekunde, millisekunde)Zurückgeben der Millisekundenzahl, die seit dem 1.1.1970 00:00:00 vergangen sind


Erklärungen zu den Methoden:

getYear():

Der Rückgabewert ist bis 1999 zweistellig, ab 2000 ist er dreistellig. Ab Netscape 4.06 sollte die Methode getFullYear() verwendet werden.

parse(datum):

Zusätzlich kann die Zeitzone angegeben werden. Die Methode wird direkt auf das Date-Objekt angewendet und nicht auf ein vorher erzeugtes Objekt.

  alert(Date.parse("Aug 15, 2002"));

setFullYear(jahr, monat, tag):

Monat und Tag sind optionale Angaben. Wenn diese nicht gesetzt werden, ermittelt JavaScript die Werte selbständig.

setHours(stunde, minute, sekunde, millisekunde):

Ab JavaScript 1.3 sind die Zusatzangaben Minute, Sekunde und Millisekunde möglich.

setMinutes(minute, sekunde, millisekunde):

Ab JavaScript 1.3 sind die Zusatzangaben Sekunde und Millisekunde möglich.

setMonth(monat, tag):

Ab JavaScript 1.3 ist die Zusatzangabe Tag möglich.

setSeconds(sekunde, millisekunde)

Ab JavaScript 1.3 ist die Zusatzangabe Millisekunden möglich.

setTime(wert)

Die Methode bekommt den Parameter wert übergeben, die seit dem 1.1.1970, 00:00:00 GMT vergangen sind. Die Variable wird in Millisekunden angegeben.

setUTCFullYear(jahr, monat, tag)

Die Parameter Monat und Tag sind optionale Angaben. Wenn diese nicht gesetzt werden, ermittelt JavaScript die Werte selbständig.

setUTCHours(stunde, minute, sekunde, millisekunde)

Ab JavaScript 1.3 sind die Zusatzangaben Minuten, Sekunden und Millisekunden möglich.

setUTCMinutes(minute, sekunde, millisekunde)

Ab JavaScript 1.3 sind die Zusatzangaben Sekunden und Millisekunden möglich.

setUTCMonth(monat, tag)

Ab JavaScript 1.3 ist die Zusatzangabe Tag möglich

setUTCSeconds(sekunde, millisekunde)

Ab JavaScript 1.3 ist die Zusatzangabe Millisekunden möglich.

toLocaleString()

Der String beinhaltet das komplette Datum und die Uhrzeit. Das Aussehen des Strings iast abhängig vom Betriebssystem.

  var datum = new Date(99, 4, 15, 12, 00, 00);   alert(datum.toLocalString());

toString()

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

toUTCString()

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

UTC(jahr, monat, tag, stunde, minute, sekunde, millisekunde)

  alert(UTC(1998, 5, 13, 12, 25, 20, 300));


Alle get-Methoden des Date-Objektes sind gleich aufgebaut, wie das im folgenden Beispiel dargestellt ist:

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

Alle set-Methoden des Date-Objektes sind gleich aufgebaut, wie das im folgenden Beispiel dargestellt ist:

  var datum = new Date();   datum.setFullYear(1999, 5, 25);


3. Unterobjekte:

Das Date-Objekt besitzt keine Unterobjekte.


4. Beispiel:

Quellcode:
<html>
<head>
<title>Datum</title>
<script language="JavaScript">
<!--
function Datum()
{
 datum = new Date();
 wtag = datum.getDay();
 monat = datum.getMonth();
 jahr = datum.getFullYear();
 stunde = datum.getHours();
 minute = datum.getMinutes();
 sekunde = datum.getSeconds();
 millisek = datum.getMilliseconds();

 unterschied = datum.getTimezoneOffset() / 60;

 var wtage = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");
 var einz_monate = new Array("Januar", "Februar", "März", "April", "Mai" , "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");

 tag = datum.getDate();
 if(tag < 10)
 {
  tag = "0" + tag
 }

 if(stunde < 10)
 {
  stunde = "0" + stunde
 }

 if(minute < 10)
 {
  minute = "0" + minute
 }

 if(sekunde < 10)
 {
  sekunde = "0" + sekunde
 }

 document.write("Datum wird so ausgegeben, wie es der Computer erstellt.<br>");
 document.write("<ul><li>" + datum + "</li></ul>");

 document.write("Datum wird so ausgegeben, wie es der Benutzer möchte.<br><br>");
 document.write("<ul><li>" + wtage[wtag] +", den "+ tag +"."+ einz_monate[monat] +" "+ jahr +"<br>");
 document.write(stunde +":"+ minute +":"+ sekunde +"</li></ul>");

 document.write("Datum wird mit der Methode toLocalString() ausgegeben.");
 document.write("<ul><li>" +datum.toLocaleString() + "</li></ul>");

 document.write("Unterschied zwischen lokaler Rechnerzeit und Greenwich Meridian Time (GMT) beträgt <u>" + unterschied + "</u> Stunden.");
} //-->
</script>
</head>
<body onLoad="Datum()">
</body>
</html>

ansehen

Top

9. math


Das Math - Objekt ist die Grundlage sämtlicher mathematischer Berechnungen in JavaScript. Es enthält alle notwendigen Methoden um mathematische Operationen durchführen zu können.
Von Math muss keine Instanz erzeugt werden. Die Eigenschaften können auch so direkt angesprochen werden.

JavaScript unterscheidet nicht zwischen verschiedenen Typen numerischer Werte (double, float ...). Falls Typumwandlungen notwendig sind, werden diese automatisch durchgeführt.


1. Eigenschaften:

EigenschaftenErläuterung

EEulersche Konstante
LN2natürlicher Logarithmus von 2
LN10natürlicher Logarithmus von 10
LOG2Ekonstanter Logarithmus von 2
LOG10Ekonstanter Logarithmus von 10
PIKonstante PI
SQRT1_2Konstante für Quadratwurzel aus 0,5
SQRT2Konstante für Quadratwurzel aus 2


Da diese Konstanten einen bekannten Wert besitzen bedürfen sie wohl keiner weiteren Erklärung. Lediglich die Art, wie diese Konstanten aufgerufen werden soll noch mal kurz erwähnt werden:

Konstante = Math.Eigenschaft;

Beispiel: Pi = Math.PI;      somit wird der Variablen Pi der Wert 3,14... zugewiesen


2. Methoden:

* da das Prinzip der Anwendung bei diesen Methoden sehr ähnlich ist, werden nur einige wenige Beispiele zur Verdeutlichung aufgeführt

MethodenErläuterung

abs()absoluter Betrag einer Zahl
acos()Arcus Kosinus
asin()Arcus Sinus
atan()Arcus Tangens
ceil()nächsthöhere ganze Zahl
cos()Kosinus
exp()Exponentialwert
floor()nächstniedrige ganze Zahl
log()Anwendung des natürlichen Algorithmus
max()größere von zwei Zahlen
min()kleinere von zwei Zahlen
pow()Zahl hoch Exponent
random()Zufallsermittlung
round()kaufmännische Rundung einer Zahl
sin()Sinus
sqrt()Quadratwurzel
tan()Tangens


Anwendung wie folgt:

ergebnis = Math.methode(zahl);

Beispiel:
ergebnis = Math.sqrt(zahl);


Erklärung zu ausgewählten Methoden:

random():

Diese Methode wird immer dann verwendet, wenn eine Zufallsziehung stattfinde soll. (z.B.: bei einer Lottoziehung oder bei der zufälligen Ermittlung einer Position ...).
Math.random gibt eine zufällige Zahl zwischen 0 und 1 zurück. Es handelt sich dabei also um eine Bruchzahl, wie z. B.: 0,24569525494577 .... .
Es handelt sich bei dieser Zahl also um eine Pseudo-Zufallszahl, wie sie auf den EDV - Systemen von heute realisiert werden kann.

Besonderheit:

Erst seit Netscape 3.x auf allen Plattformen verfügbar.
bei Netscape 2.x nur unter Linux verfügbar.

<html><head><title>Test</title>
</head><body>
<form action="">
<input type="button" value="Button" onClick="alert(Math.random())">
</form>
</body></html>


pow():

Dieser Methode müssen zwei Parameter übergeben werden. Der erste übergebene Parameter steht für die Basis, der zweite übergebene Parameter steht für den Exponenten.

<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<input name="z1"><input name="z2"><input name="Aus">
<input type="button" value="=" onClick="Test.Aus.value=Math.pow(Test.z1.value,Test.z2.value)">
</form>
</body></html>
Top


10. string


Mittels der Eigenschaften und Methoden des String - Objektes kann auf Zeichenketten zugegriffen werden.


1. Eigenschaften:

Das String - Objekt besitzt lediglich eine einzige Eigenschaft:

length()     gibt die Anzahl der Zeichen in der Zeichenkette zurück

<script type="text/javascript">
<!--
var Eingabe = window.prompt("Irgendetwas eingeben","");
alert("Eingegebene Zeichen: " + Eingabe.length);
//-->
</script>


2. Methoden:

* Aufgrund der Vielzahl der Methoden dieses Objektes sind hier nur die wichtigsten und nützlichsten ausführlich erklärt. Der Vollständigkeit halber sind jedoch die anderen namentlich erwähnt.

MethodenErläuterung

anchor() Verweisanker erzeugen
big()großen Text erzeugen
blink()blinkenden Text erzeugen
bold()fetten Text erzeugen
charAt()Zeichen an einer bestimmten Stelle der Zeichenkette ermitteln
CharCodeAt()Latin-1 Code des Zeichens an einer bestimmten Stelle der Zeichenkette ermitteln
concat()Zeichenketten zusammenführen
fixed()Teletyper - Text erzeugen
fontcolor()Schriftfarbe zuweisen
fontsize()Schriftgröße zuweisen
fromCharCode()Latin - 1 Zeichenkette erzeugen
indexOf()Stelle eines bestimmten Zeichens ermitteln
italics()kursiven Text erzeugen
lastIndexOf()letzte Stelle eines Zeichens ermitteln
link()Verweis erzeugen
match()regulären Ausdruck anwenden
replace()regulären Ausdruck anwenden und ersetzen
search()suchen mit regulärem Ausdruck
slice()Teile aus einer Zeichenkette extrahieren
small()kleinen Text erzeugen
split()Zeichenkette aufsplitten
strike()durchgestrichenen Text erzeugen
sub()tiefgestellten Text erzeugen
substr()ermitteln einer Teilzeichenkette ab einer vorgegebenen Position
substring()ermitteln einer Teilzeichenkette
sup()hochgestellten Text erzeugen
toLowerCase()alles klein schreiben
toUpperCase()alles groß schreiben


Erklärungen zu ausgewählten Methoden:

CharAt():

Dieser Methode muß ein Integerwert als Parameter übergeben werden. Dieser Wert bezeichnet die Stelle, an welcher das Zeichen des String ermittelt werden soll.

<script type="text/javascript">
<!--
var Eingabe = "Das ist ein Teststring!";
var zeichen = Eingabe.CharAt(4);
alert(zeichen);
//-->
</script>


IndexOf():

Dieser Methode muß eine Zeichenkette als Parameter übergeben werden. Von diesem Zeichen kann nun der Indexwert ermittelt werden.

<script type="text/javascript">
<!--
var Eingabe = "Das ist ein Teststring!";
var position = Eingabe.IndexOf("ein");
alert(position);
//-->
</script>


replace():

Hierbei gilt es erst einmal den Begriff "regulärer Ausdruck" zu klären.
Ein "regulärer Ausdruck" ist ein Ausdruck, der Suchtreffer liefern kann.

Diese regulären Ausdrücke können nun durch diese Methode durch andere ersetzt werden.
Der Methode replace() müssen zwei Parameter übergeben werden: der zu ersetzende Ausdruck und der neue Ausdruck. Diese beiden Parameter werden durch en Komma getrennt. Die Übergabe der Parameter erfolgt folgendermaßen:

String.replace(/Ausdruckalt/, "Ausdruckneu");

<script type="text/javascript">
<!--
var Eingabe = "Das ist ein Teststring!";
var Eingabeneu = Eingabe.replace(/ein/, "mein");
alert(Eingabeneu);
//-->
</script>


split():

Wie bereits erwähnt, kann mit dieser Methode eine vorhandene Zeichenkette aufgesplittet werden.
Die dabei entstehenden Teilzeichenketten werden in einem Array gespeichert. Als Parameter wird eine Zeichenfolge oder ein einzelnes Zeichen übergeben, welches die Abgrenzung der einzelnen Teilzeichenketten darstellt. Dieses erscheint dann im Array nicht mehr. Diese Grenzzeichen kann ein Komma, ein Bindestrich , eine Wortgruppe ... sein.

Optional kann noch ein zweiter Parameter übergeben werden. Dies ist ein Integerwert und bestimmt, wenn er gesetzt wird, wie viel Splitvorgänge maximal durchgeführt werden sollen.

<script type="text/javascript">
<!--
var Satz = "Dies ist ein Teststring.";
var Woerter = Satz.split(" ");
document.write (Woerter[1]); // ergibt "ist"
document.write(Woerter[3]); // ergibt "Teststring!"
//-->
</script>


substr():

Aus einer Zeichenkette kann hiermit eine Teilzeichenkette extrahiert werden. Dabei müssen zwei Parameter übergeben werden:

- der Index des ersten Zeichen, welches extrahiert werden soll
- die Gesamtanzahl der Zeichen, die extrahiert werden sollen

<script type="text/javascript">
<!--
var Wort = "Kindereinzelfahrkarte";
var Extra = Wort.substr(0,7);
alert(Extra);        // ergibt "Kinderei"
//-->
</script>
Top