Browser sind in verschiedene Teile aufgeteilt auf die mit Hilfe von JavaScript zugegriffen werden kann. Zusammen werden diese Teile Browser Object Model genannt. An der Spitze dieser Hierarchie ist das Window-Objekt. Dieses Objekt stellt den gesamten Browser mit seiner Symbolleisten, Menüs, Statusleiste und der Seite selbst dar.
Unterhalb des Window-Objects gibt es weiter Objekte (Kindobjekte), auf die JavaScript zugreifen kann. Diese erlauben Dinge wie, leitet den Benutzer zu einer anderen Web-Seite, die Größe des Browser-Fensters ermitteln, Zugriff auf alle HTML-Elemente einer Seite und vieles mehr. Hier ist eine Aufzählung der Window-Objekte:
Das Window-Objekt repräsentiert das aktuelle Browserfenster. Alle JavaScript-Objekte, Variablen und Funktionen sind Mitglieder (members) des Window-Objekts. Auch das Document Object Model (DOM) gehört zu den Members. Zu beachten ist das iframe-Element eines HTML-Dokuments, iframes erzeugen ein eigenes Window Objekt.
Die open-Methode öffnet ein neues Browserfenster. Erwartet mindestens zwei, optional auch vier Parameter, Die Syntax lautet:
window.open(URL,name,specs,replace)
Die close-Methode schließt ein Fenster und erwartet dabei keine Parameter.
<button onclick="myFunction1()">Open Window!</button>
<button onclick="myFunction2()">Cloes Window!</button>
<script>
var myWindow;
function myFunction1() {
myWindow = window.open("", "_blank", "width=200, height=100");
myWindow.document.write("<p>Hallo Welt!</p>");
}
function myFunction2() {
myWindow.close();
}
</script>
Eine Liste der möglichen Parameterwerte finden sie hier, aber Achtung:
Manche Eigenschaften werden nicht von allen Browsern unterstützt.
Mit der setInterval-Methode wird eine Funktion oder Ausdruck aufgerufen der den Intervall in Millisekunden definiert. Der setInterval-Methode können noch weitere Parameter übergeben werden. Die Syntax lautet:
my var = setInterval(function,milliseconds,param1,param2,...)
Die setInterval-Methode führt die Funktion solange aus, bis clearInterval() aufgerufen wird. Die clearInterval-Methode löscht den Intervall (Timer) der mit setInterval definiert wurde. Die Syntax lautet:
clearInterval(id von setInterval)
Im Beispiel wird im Sekundentakt (1000 ms = 1 Sekunde) die Funktion setColor aufgerufen. Die Funktion prüft, ob der Hintergrund Gelb ist und wechselt gegebenenfalls auf Pink. Dadurch entsteht ein Farbwechsel (Toggling) der mit der Funktion stopToggling gestoppt werden kann.
<button onclick="stopToggling()">Stop Toggling</button>
<script>
var myVar = setInterval(setColor, 1000);
var x = document.body;
x.style.backgroundColor = "yellow";
function setColor() {
if ( x.style.backgroundColor == "yellow") {
x.style.backgroundColor = "pink";
} else {
x.style.backgroundColor = "yellow";
}
}
function stopToggling() {
clearInterval(myVar);
}
</script>
Die if-Anweisung in der setColor-Funktion kann auch mit einem bedingten Operator geschrieben werden.
function setColor() {
var x = document.body;
x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
Mit der setTimeout-Methode wird eine Funktion oder Ausdruck aufgerufen der den Timeout in Millisekunden definiert. Im Gegensatz zur setInterval-Methode wird setTimeout nur einmal ausgeführt. setTimeout bestimmt eine Verzögerung bevor eine Aktion (Funktion) ausgeführt wird. Laut Syntax können der setInterval-Methode noch weitere Parameter übergeben werden!!
var myVar = setTimeout(function,milliseconds,param1,param2,...)
Die setTimeout-Methode führt die Funktion einmal mit einer Verzögerung aus. Die clearTimeout-Methode kann das Ausführen von setTimeout verhindern. Die Syntax lautet:
clearTimeout(id von setTimeout)
Im folgenden Beispiel wird nach dem Klick auf Open Alert nach drei Sekunden eine alertBox geöffnet. Mit Stop Alert können sie dies verhindern.
<button onclick="myFunction1()">Open Alert</button>
<button onclick="myFunction2()">Stop Alert</button>
<script>
var myVar;
function myFunction1() {
myVar = setTimeout(function(){ alert("Hallo Welt!"); }, 3000);
}
function myFunction2() {
clearTimeout(myVar);
}
</script>
Diese Methoden solle Timeout und Intervals ersetzen, werden aber noch nicht von allen Browsern unterstützt. Vielleicht schaffe ich es zu einem späteren Zeitpunkt, hier ein einfaches Beispiel vorzustellen.
JavaScript kennt drei Typen von Popup Boxen:
Die alertBox ist ein PopUp mit Text und einer OK-Schaltfläche. Die confirmBox ist ein PopUp mit Text und den Schaltflächen OK und Abbrechen.
Beide Schaltflächen liefern einen Rückgabewert true (OK) und false (Abbrechen). Die promptBox ist ein PopUp mit Text, einem Eingabefeld dem ein
Standardwert übergeben werden kann und den Schaltflächen OK und Abbrechen. Wenn der User OK klickt wird der eingegebene Text zurückgegeben,
bei Abbrechen der Wert null.
Alle PopUp Boxen können mit oder ohne dem Präfix windows geschrieben werden.
alert("Text!");
confirm("Text!");
prompt("Text","Standard Text");
// oder
window.alert("Text!");
window.confirm("Text!");
window.prompt("Text!","Standard Text");
Im Beispiel öffnet jedes button-Element ein PopUp-Fenster und gibt einen Wert im p-Element zurück.
<button onclick="myFunction1()">Open Alert</button>
<button onclick="myFunction2()">Open Confirm</button>
<button onclick="myFunction3()">Open Prompt</button>
<p id="myID"><p>
<script>
function myFunction1() {
alert("Hallo Welt!");
document.getElementById("myID").innerHTML = "Du hast eine Alert Box geöffnet!";
}
function myFunction2() {
var r = confirm("Klick mich!");
var x;
if (r == true) {
x = "Du hast OK geklickt!";
} else {
x = "Du hast Abbrechen geklickt!";
}
document.getElementById("myID").innerHTML = x;
}
function myFunction3() {
var person = prompt("Schreibe bitte deinen Namen!", "Adi Prinz");
if (person != null) {
document.getElementById("myID").innerHTML =
"Hallo " + person;
} else {
document.getElementById("myID").innerHTML =
"Du hast Abbrechen geklickt!";
}
}
</script>
Für das windows-Object stehen auch einige Event Handler zur Verfügung:
Im Beispiel wird jedesmal, wenn die Fenstergröße verändert wird, eine Zufallszahl generiert.
<p id="myID">Zufallszahl<p>
<script>
window.addEventListener("resize", function(){
document.getElementById("myID").innerHTML = Math.random();
});
</script>
Das Navigator-Objekt liefert Informationen über den Browser des Besuchers. Diese Informationen sind allerdings nicht immer zuverlässig, Browser können identische Namen anzeigen, einige Browser identifizieren sich überhaupt nicht. Die Angaben aus dem navigator-Objekt sind read only und können daher nur gelesen werden. Das window.navigator-Object kann mit oder ohne dem Präfix window geschrieben werden.
navigator.property; navigator.method(); // oder window.navigator.property; window.navigator.method();
Browser-Name, Browser-Engine oder Browser-Version sind Eigenschaften des Navigator-Objekts, eine Methode wäre z.B. javaEnabled().
Mit der javaEnabled-Methode kann man feststellen, ob der Client JavaScript aktiviert bzw. deaktiviert hat. Die Methode liefert true oder false.
<button onclick="myFunction()">Klick mich!</button>
<p id="myID"><p>
<script>
function myFunction() {
var x = "Java Enabled: " + navigator.javaEnabled();
document.getElementById("myID").innerHTML = x;
}
</script>
Mit der cookieEnabled-Eigenschaft kann man feststellen, ob der Client Cookies akzeptiert.
<button onclick="myFunction()">Klick mich!</button>
<p id="myID"><p>
<script>
function myFunction() {
document.getElementById("myID").innerHTML =
"Cookies Enabled is " + navigator.cookieEnabled;
}
</script>
Mit der userAgent-Eigenschaft liefert einen String mit der Versionsnummer, dem Betriebssystem und der Sprache des Browser (außer bei Internet Explorer).
<button onclick="myFunction()">Klick mich!</button>
<p id="myID"><p>
<script>
function myFunction() {
document.getElementById("myID").innerHTML =
"User-agent header sent: " + navigator.userAgent;
}
</script>
Das Screen-Objekt liefert Informationen über den Monitor des Besuchers. window.screen liefert unter anderem Auflösung, Höhe, Breite und Farbtiefe des Monitors. Das window.screen-Object kann mit oder ohne dem Präfix window geschrieben werden.
screen.property; // oder window.screen.property;
Die wichtigsten Daten über den Monitor sind die Breite und Höhe des nutzbaren Bereichs sowie die Auflösung des Monitors in Pixeln.
Die colorDepth-Eigenschaft liefert die Farbtiefe des Monitors.
<button onclick="myFunction()">Klick mich!</button>
<p id="myID"><p>
<script>
function myFunction() {
var x = "Farbtiefe: " + screen.colorDepth + " bits per Pixel";
document.getElementById("myID").innerHTML = x;
}
</script>
Liefern Breite und Höhhe des beschreibbaren Bereichs des Monitors. Meist kleiner als die Monitorauflösung, da für die Taskleiste ein kleiner Bereich reserviert ist.
<button onclick="myFunction()">Klick mich!</button>
<p id="myID"><p>
<script>
function myFunction() {
var x = "Available Height: " + screen.availHeight + "px";
var y = "Available Width: " + screen.availWidth + "px";
document.getElementById("myID").innerHTML = x + "<br>" + y;
}
</script>
Im History-Objekt speichert der Browser die URLs, die der Benutzer besucht hat. das History-Objekt simuliert im Grunde genommen nur die Vorwärts- und Zurück-Buttons des Browsers. Das window.history-Object kann mit oder ohne dem Präfix window geschrieben werden.
history.back(); // oder window.history.back();
forward() back() und go() sind die Methoden des History-Objekts. history.back() liefert einen Zurück-Button, history.forward() einen Vorwärts-Button. Die go-Methode kann sogar die Anzahl der Zurück- (negative Werte) bzw. Vorwärts-Schritte (positive Werte) bestimmen.
<a href="#" onclick="window.history.back()">Zurück<a><br> <a href="#" onclick="window.history.forward()">Vorwärts<a><br> <a href="#" onclick="window.history.go(-2)">Gehe zwei zurück<a>
Das Location-Objekt enthält die URL/URI der aktuellen Webseite und kann auf Komponenten zugreifen:
Das window.location-Object kann mit oder ohne dem Präfix window geschrieben werden.
window.location.href // oder location.href
Das folgende Beispiel liefert alle Eigenschaften des Location-Objekts.
<a href="#myID">Anker</a>
<p id="myID"><p>
<script>
document.getElementById('myID').innerHTML =
"<pre>" +
"hash: " + window.location.hash + "\n" +
"host: " + window.location.host + "\n" +
"href: " + window.location.href + "\n" +
"hostname: " + window.location.hostname + "\n" +
"origin: " + window.location.origin + "\n" +
"pathname: " + window.location.pathname + "\n" +
"port: " + window.location.port + "\n" +
"protocol: " + window.location.protocol + "\n" +
"search: " + window.location.search + "\n" +
"</pre>";
</script>
Das Location-Object kennt auch drei Methoden für das Laden, Aktualisieren und Ersetzen einer URL.
window.location.assign("http://www.adiprinz.at");
window.location.reload(true); // lädt vom Server
window.location.replace("http://www.adiprinz.at");
Die Links bieten eine Übersicht der Methoden und Eigenschaften von Window-Objekten: