erwartet mindestens zwei, optional auch drei Parameter:
- URL = Zieladresse einer Datei, die in das neue Fenster geladen werden soll. Wenn sich die Datei im gleichen Verzeichnis befindet, genügt der Dateiname. Ansonsten relative Pfadnamen oder absolute http-Adressen angeben. Bei Netscape darf dies auch eine leere Zeichenkette sein (öffnet ein leeres Fenster), was beim MS Internet Explorer 4 und Opera 5.12 allerdings zu einer Fehlermeldung führt. Anstelle einer URL kann man auch mit about:blank eine leere Datei in das Fenster laden.
- Fenstername: Name, der aus Buchstaben, Ziffern und Unterstrich bestehen darf. Unter diesem Namen können beispielsweise Verweise ihre Ziele mit <a href="ziel.htm" target="NameDesFensters"> in das erzeugte Fenster laden. Gültige Fensternamen sind auch _blank,_parent,_self und _top. Opera 5.12 öffnet jedoch in jedem Fall die Datei im gleichen Fenster. Netscape 6.x interpretiert die Angabe _parent nicht.
- (optional) Angaben zum Aussehen des Fensters = Eine Zeichenkette, in der man die Größe und die Eigenschaften des Fensters festlegen kann. Mehrere Angaben sind durch Kommata zu trennen. Alle Attribute sind als String zu kennzeichnen.
- Nicht gesetzte Parameter müssen als Leerstring gekennzeichnet werden.
- Attribute:
- Auflistung der Attribute:
- directories
- location
- menubar
- resizable
- scrollbars
- status
- toolbar
- height
- width
- Allen Attributen kann entweder "yes" (0) oder "no" (1) zugewiesen werden.
- "width" und "height" hingegen benötigen die Breite in Pixeln ohne Massangabe.
- Attributangeben sollten grundsätzlich komplett gemacht werden, da je nach Browser weggelassene Attribute trotzdem verwendet werden oder nicht.
- Zur Positionierung des neuen Browser-Fensters kann man screenx oder screeny verwenden (funktioniert nur bei Netscape).
- Allgemeingültige Methode zum Verschieben von Fenstern (Positionieren) ist die Methode moveTo() mit den Angaben der x- und y-Koordinate des linken oberen Fensterecks. moveTo ist Bestandteil des Window-Objekts.
- Bestimmung der Attribute eines Unterfensters:
- Beispiel 1:
<html>
<head>
<title>
</title>
<script language="JavaScript">
<!--BEGIN
var attrib="";
function zuweis()
{
if(document.f1.c1.checked)
attrib+="directories=yes,";
else
attrib+="directories=no,";
if(document.f1.c2.checked)
attrib+="location=yes,";
else
attrib+="location=no,";
if(document.f1.c3.checked)
attrib+="menubar=yes,";
else
attrib+="menubar=no,";
if(document.f1.c4.checked)
attrib+="resizable=yes,";
else
attrib+="resizable=no,";
if(document.f1.c5.checked)
attrib+="scrollbars=yes,";
else
attrib+="scrollbars=no,";
if(document.f1.c6.checked)
attrib+="status=yes,";
else
attrib+="status=no,";
if(document.f1.c7.checked)
attrib+="toolbar=yes,";
else
attrib+="toolbar=no,";
if(document.f1.c8.checked)
attrib+="height=300,";
else
attrib+="height=300,";
if(document.f1.c9.checked)
attrib+="width=200,";
else
attrib+="width=200,";
window.open("","unterfenster",attrib);
}
//END-->
</script>
</head>
<body>
<form name="f1">
<input type="checkbox" name="c1" checked> directories<br>
<input type="checkbox" name="c2" checked> location<br>
<input type="checkbox" name="c3" checked> menubar<br>
<input type="checkbox" name="c4" checked> resizable<br>
<input type="checkbox" name="c5" checked> scrollbars<br>
<input type="checkbox" name="c6" checked> status<br>
<input type="checkbox" name="c7" checked> toolbar<br>
<input type="checkbox" name="c8" checked> height<br>
<input type="checkbox" name="c9" checked> width<br>
<input type="button" value="neues Fenster öffnen" onClick="zuweis()">
</form>
</body>
</html>
- Beispiel 2:
<html>
<head>
<title>
</title>
<script language="JavaScript">
<!--BEGIN
var fenster1;
var attribute;
function attrib()
{
attribute="";
if(document.eingabe.directory.checked)
a1="directories=yes,";
else
a1="directories=no,";
if(document.eingabe.location.checked)
a2="location=yes,";
else
a2="location=no,";
if(document.eingabe.menubar.checked)
a3="menubar=yes,";
else
a3="menubar=no,";
attribute=a1+a2+a3;
fenster1=open("","Fenster1",attribute);
fenster1.document.open();
fenster1.document.write("<html><body><h1>Die Attribute sind: "+attribute+"</h1></body></html>");
fenster1.document.close();
}
//END-->
</script>
</head>
<body>
<form name="eingabe">
<p align="right">
Directory-Buttons: <input type="checkbox" name="directory" checked><br>
Location: <input type="checkbox" name="location" checked><br>
Menubar: <input type="checkbox" name="menubar" checked><br>
</p>
<p align="right">
<input type="button" name="oeffnen" value="Öffnen" onClick="attrib()">
</p>
</form>
</body>
</html>
- schliesst ein Fenster
- erwartet keine Parameter:
- macht ein Fenster zum aktiven Fenster
- sinnvoll bei Verwendung von Zweitfenstern, aber auch bei Frame-Fenstern
- erwartet keine Parameter
- macht ein Fenster inaktiv
- das Gegenteil von focus()
- erwartet keine Parameter
- Aktivierung des Timers, zeitgestützt etwas durchzuführen
- führt eine Anweisung nach einer bestimmten Verzögerungszeit aus
- erwartet zwei Parameter:
- Code: eine JavaScript-Anweisung, die wiederholt werden soll, meistens ein Funktionsaufruf, wobei die anweisung als String gekennzeichnet werden muss
- Pause: Wert in Millisekunden bis zum Ausführen
- Beispiele:
- Beispiel 1:
Programm, das ständig eine Dialogbox öffnet und dort die aktuellen Sekunden anzeigt
<html>
<head>
<title>
</title>
<script language="JavaScript">
<!--BEGIN
var datum="";
var sekunde="";
function berechne()
{
datum=new Date();
sekunde=datum.getSeconds();
alert(sekunde);
setTimeout("berechne()",1000);
}
//END-->
</script>
</head>
<body onLoad="berechne()">
</body>
</html>
- Beispiel 2:
Programm, das in einem Textfeld die aktuellen Sekunden anzeigt
<html>
<head>
<title>
</title>
<script language="JavaScript">
<!--BEGIN
var datum="";
var sekunde="";
function berechne()
{
datum=new Date();
sekunde=datum.getSeconds();
document.form1.t1.value=sekunde;
setTimeout("berechne()",1000);
}
//END-->
</script>
</head>
<body>
<form name=form1>
<input type="button" name="b1" value="Sekunden anzeigen" onClick="berechne()">
<input type="text" name="t1" size=2 value="">
</form>
</body>
</html>
- Beispiel 3:
Programm, das im Dokument die aktuellen Sekunden anzeigt
<html>
<head>
<title>
</title>
<script language="JavaScript">
<!--BEGIN
var datum="";
var sekunde="";
function berechne()
{
datum=new Date();
sekunde=datum.getSeconds();
document.all.tags("p")[1].innerText=sekunde;
setTimeout("berechne()",1000);
}
//END-->
</script>
</head>
<body>
<p>
Sekunden:
</p>
<p>
0
</p>
<form name="f1">
<input type="button" name="b1" value="Start" onClick="berechne()">
</form>
</body>
</html>
- bricht einen Timeout ab, der mit der Methode setTimeout() gestartet wurde
- erwartet als Parameter die Variable, in der der Aufruf von setTimeout() gespeichert wurde
- Beispiele:
- Beispiel 1:
Programm, das im Dokument die aktuellen Sekunden anzeigt, wobei die Anzeige durch einen Schalter gestoppt werden kann
<html>
<head>
<title>
</title>
<script language="JavaScript">
<!--BEGIN
var datum="";
var sekunde="";
var ak="";
function berechne()
{
datum=new Date();
sekunde=datum.getSeconds();
document.all.tags("p")[1].innerText=sekunde;
ak=setTimeout("berechne()",1000);
}
function stoppe()
{
clearTimeout(ak);
}
//END-->
</script>
</head>
<body>
<p>
Sekunden:
</p>
<p>
0
</p>
<form name="f1">
<input type="button" name="b1" value="Start" onClick="berechne()">
<input type="button" name="b2" value="Stop" onClick="stoppe()">
</form>
</body>
</html>
- Beispiel 2:
Programm, das im Dokument die aktuellen Sekunden anzeigt, wobei die Anzeige durch einen Schalter gestoppt werden kann und dann auf dem Dokument angezeigt wird, bei welcher Sekundenzahl gestoppt wurde
<html>
<head>
<title>
</title>
<script language="JavaScript">
<!--BEGIN
var datum="";
var sekunde="";
var ak="";
function berechne()
{
datum=new Date();
sekunde=datum.getSeconds();
document.all.tags("p")[1].innerText=sekunde;
ak=setTimeout("berechne()",1000);
}
function stoppe()
{
clearTimeout(ak);
document.all.tags("p")[1].innerText="Sie haben das Programm bei "+sekunde+" Sekunden beendet.";
}
//END-->
</script>
</head>
<body>
<p>
Sekunden:
</p>
<p>
0
</p>
<form name="f1">
<input type="button" name="b1" value="Start" onClick="berechne()">
<input type="button" name="b2" value="Stop" onClick="stoppe()">
</form>
</body>
</html>
- Beispiel 3:
Programm, das im Dokument die aktuellen Sekunden anzeigt, wobei die Anzeige durch einen Schalter gestoppt werden kann und dann auf dem Dokument ausgegeben wird, nach wie vielen Sekunden gestoppt wurde
<html>
<head>
<title>
</title>
<script language="JavaScript">
<!--BEGIN
var date="";
var sekunde="";
var ein ="";
var aus="";
var aktiv=0;
function starten()
{
ein =new Date();
ein=ein.getTime()
begin();
}
function begin()
{
date=new Date();
sekunde=date.getSeconds();
document.zeitausgabe.b2.value="Beenden";
document.zeitausgabe.zeit.value=sekunde;
aktiv=setTimeout("begin()",1000);
}
function stop()
{
if (aktiv!=0)
{
aus=new Date();
aus=aus.getTime();
clearTimeout(aktiv);
aus=(aus-ein)/1000;
document.zeitausgabe.zeit.value="Beendet nach "+aus+" Sekunden";
aus=0;
aktiv=0;
}
}
//END-->
</script>
</head>
<body>
<form name="zeitausgabe">
<input type="button" name="b1" value="Start" onClick="starten()">
Sekunden:<input type="text" name="zeit" size=30 value="0">
<input type="button" name="b2" value="" onClick="stop()">
</form>
</body>
</html>
Beispiel für die Erzeugung von Unterfenstern:
<html>
<head>
<title>
</title>
<script language="JavaScript">
<!--BEGIN
var attribute="width=200,height=300,statusbar=no,menubar=no,toolbar=no,location=no,resizable=no";
var fenster1;
function start()
{
erzeuge1();
erzeuge2();
erzeuge3();
erzeuge4();
erzeuge5();
}
function schreibeDokument(z,fenster,x,y,farbe) //fenstername,Position,farbe
{
fenster.document.open();
fenster.document.writeln("<html><body bgcolor="+farbe+" text=#FFFFFF>");
fenster.document.writeln("<title>Das Unterfenster</title>");
fenster.document.writeln("<h1 align=center>Das Unterfenster "+z+"</h1>");
fenster.document.writeln("<i>Der Name des Fensters lautet:"+fenster.name+".</i><br>Es wurde komplett mit dem Document-Objekt erstellt.<br>");
fenster.document.writeln("</body></html>");
fenster.document.close();
fenster.moveTo(x,y);
fenster.focus;
}
function erzeuge1()
{
fenster1=open("","Unterfenster_1",attribute);
schreibeDokument(1,fenster1,10,110,"#FF0000");
}
function erzeuge2()
{
fenster2=open("","Unterfenster_2",attribute);
schreibeDokument(2,fenster2,220,110,"#00FF00");//
}
function erzeuge3()
{
fenster3=open("","Unterfenster_3",attribute);
schreibeDokument(3,fenster3,430,110,"#0000FF");
}
function erzeuge4()
{
fenster4=open("","Unterfenster_4",attribute);
schreibeDokument(4,fenster4,640,110,"#FF00FF");
}
function erzeuge5()
{
fenster5=open("","Unterfenster_5",attribute);
schreibeDokument(5,fenster5,850,110,"#00FFFF");
}
var fenst=1;
function schliess()
{
switch (fenst)
{
case 1:{fenster1.close();fenst++;break;}
case 2:{fenster2.close();fenst++;break;}
case 3:{fenster3.close();fenst++;break;}
case 4:{fenster4.close();fenst++;break;}
case 5:{fenster5.close();fenst++;break;}
case 6:{window.close();break}
}
}
END-->
</script>
</head>
<body color="#ffffff" text="#800000" onload="start()">
<h3 align="center">Hier wird eine Möglichkeit angezeigt, um einen Bildschirm im Aufbau zu organisieren. Jedes farbige Fenster kann einen anderen Themeninhalt wiedergeben.</h3>
<form name=formular>
<input type="button" name="b1" value="Fenster schliessen" onClick="schliess()">
</form>
</body>
</html>
- defaultStatus: voreingestellter Text für die Statuszeile
- document: Document-Objekt des Fensters
- status: gibt den vorübergehenden Inhalt der Statuszeile an
- name: Name des Fensters
- self: das Fenster, in dem man sich momentan befindet (self.name)
- opener: Fenster, aus dem man das Unterfenster geöffnet hat (window.opener)
- top: oberstes Fenster in der Objekt-Hierarchie
- parent: nächst-übergeordnetes Fenster
- length: Anzahl der Frames im Fenster
zurück zum Seitenanfang
zurück zum Index