Window objektum

Modern ismeretek WEB oldalon : Javascript ismertető HTML formátumban

Window objektum
A Window objektum használata
Elemváltozók (tulajdonságok) :
closed		Megadja, hogy zárva van-e az ablak.
defaultStatus		A státuszsorban alapértelmezésként megjelenő szöveg
innerHeight		Meghatározza az ablak belső magasságát (pixelben)
innerWidth		Meghatározza az ablak belső szélességét (pixelben)
locationbar		URL címkijelző sor. Ha a locationbar.visible tulajdonság igaz, akkor látható a kijelző sor, különben nem
menubar		Menüsor
name		Az ablak nevét tartalmazza
outerHeight		Meghatározza az ablak külső magasságát (pixelben)
outerWidth		Meghatározza az ablak külső szélességét (pixelben)
pageXOffset		Az ablak bal felső sarkának X koordinátája
pageYOffset		Az ablak bal felső sarkának Y koordinátája
personalbar		Kedvenc címek listája. Ha a personalbar.visible tulajdonság igaz, akkor van az ablaknak ilyen személyes feljegyzése, különben nincs.
scrollbars		Az ablak gördítősávjai. Ha a scrollbars.visible tulajdonság igaz, akkor az ablakban gördítősáv aktív, különben nem.
statusbar		A böngészőablak státuszsora. Ha a statusbar.visible tulajdonság igaz, akkor az ablakban a státuszsor látható , különben nem.
status		A státuszsor tartalma van benne.
toolbar		A böngészőablak eszközsora. Ha a toolbar.visible tulajdonság igaz, akkor az ablakban az eszközsor látható, különben nem.
Elemfüggvények (metódusok) :
alert(szöveg)		Az üzenőablakban megjelenít egy szöveget
back()		Az előzőleg meglátogatott oldalra ugrik(vissza)
blur()		Az ablakot inaktívvá teszi, (a focus ellentétje)
captureEvents()		Meghatározza, hogy mely tipusú eseményeket kapjon el a dokumentum.
clearInterval()		A setInterval() metódussal beállított ciklikus tevékenység letiltása.
close()		Bezárja az ablakot, paramétert nem vár.
confirm()		Megjelenít egy megerősítést kérő üzenőablakot Igen / Nem választási lehetőséggel.
disableExternalCapture()		Letiltja a frame-eket tartalmazó ablakban a külső lapok részére az események elkapását, Így megtilthatuk, hogy oldalunkat valaki egy idegen Frame-setbe letöltse .
enableExternalCapture()		Engedélyezi a frame-eket tartalmazó ablakban a külső lapok részére az események elkapását.
find(par1,[par2, par3])		Az ablakban keresi az első paraméterként átadott szöveget. A második és harmadik paraméter true/false értéket vehet fel, melyek a kis/nagybetűk különbségtételére és a keresési irányra vonatkoznak. (opcionálisan)
focus()		Aktívvá (kiválasztottá) teszi az ablakot
forward()		Az előzőleg meglátogatott oldalra ugrik (előre keres)
handleEvent()		Továbbadja az eseményt a hierarhiában egy olyan elemnek, mely képes azt fogadni.
home()		A Browser kezdő oldalát hívja meg
moveBy(x,y)		Eltolja az ablakot a pixelben mért paraméter értékekkel : -x balra, -y felfele mozgat
moveTo(x,y)		Eltolja az ablakot a pixelben mért paraméter értékekre. Az ablak bal felső sarka koordinátáinak értéke x,y lesz.
open(par1,par2,[par3])		Egy új ablakot nyit, ahol az első paraméter az URL cím, a második az ablak neve.A harmadik egy karakterlánc lehet, mely a megjelenésre utal.
print()		Kinyomtatja az ablak (HTML fájl) tartalmát.
prompt(par1,par2)		Adatbevitel számára megnyit egy üzenőablakot
releaseEvents()		Befejezi a paraméterként átadott események elkapását.
resizeBy(x,y)		Az ablak jobb alsó sarkát relatív értékekkel módosítja : - csökken, + nő az ablak mérete
resizeTo(x,y)		x az ablak új szélessége, y a magassága
route Event(esemény)		Továbbadja az eseményt a hierarchiának megfelelően.
scrollBy(x,y)		Görgeti a képernyő tartalmát jobbra, balra, le és fel (x, y előjeles érték pixelben megadva)
scrollTo()		Görgeti az ablak tartalmát a megadott x, y értékre, ahol : x bal, y felső pozició.
setInterval()		Egy bizonyos JavaScript tevékenység ciklikus végrehajtása, pl.: függvényhívás
setTimeout()		Egy tevékenység végrehajtását időzíti egy bizonyos idő elteltére.
stop()		Megszakítja egy oldal (HTML fájl) betöltését
Alárendelt objektumok :
document
event
history
location

A window objektum használata

A Window objektum a legfelső szintű objektum a JavaScript hierarhiában. Minden ami egy WWW Browser ablakban megjelenítésre kerül, az ennek az objektumnak az alárendeltje. A windowobjektum segítségével tudjuk a megjelenítőablakot kontrollálni, lekérdezni. Lehetőségünk van új ablak megnyitására, és annak tulajdonságait meghatározni. A fő kijelző ablakot maga a böngésző nyitja meg, arra a window vagy self kulcsszóval hivatkozhatunk, de el is hagyhatjuk azt, illetve megszólíthatjukaz ablakot a nevén keresztül is : (Példa2). Ezen kulcsszszavak után, egy pontot kitéve érhetjük el a metódusokat, tulajdonságokat és alárendelt objektumokat.

Példa1:

<html><head><title>Teszt</title>
<script language="JavaScript">
window.defaultStatus = "Itt vagyok otthon, ez itt a honlapom";
</script>
</head><body>
</body></html>

Magyarázat:

A példa a képernyő alján található státussorba ír ki egy szöveget, amihez a defaultStatus elemváltozót hívja meg. Egy Frame set-en (keret készlet) belül is megjeleníthetjük egy ablak tartalmát. Ehhez érdemes elolvasni a frame objektum leírását.

Példa2:

<html><head><title>Teszt</title>
<script language="JavaScript">
function Hivlak(){
 Ujablak = 
  window.open("fájl2.htm","masik","width=300,height=200,scrollbars");
 Ujablak.focus();
}
</script>
</head><body>
<a href="javascript:Hivlak()">Új ablak</a>
</body></html>

Magyarázat:

Ha a hivatkozásra kattintunk, a Hivlak() függvényen keresztül, az open() metódus által megnyitjuk az "Ujablak"-ot, benne a "fájl2.htm", melyre a fókuszt irányítjuk.

Példa3:

<a href="javascript:masik.close()">Bezár a bazár</a>

Magyarázat:

Az előbb nevet adtunk az új ablaknak, így már nevén nevezve is bezárhatjuk azt a close() metódussal.

Példa4: (a másik ablakba beépítve)

Módunk van arra is, hogy a szülő ablakot a gyerek ablakból elérjük. Ehhez az "opener" kulcsszó segít bennünket. Igy az összes metódust és tulajdonságot meghívhatjuk.

<a href="javascript:opener.close()">Főablakot bezárja</a>

locationbar

Meghatározza, hogy az ablaknak van-e saját URL kijelzősora. Ha az elemváltozó visible = = true, akkor látható a kijelző sor, ellenkező esetben nem.

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
kisablak = window.open("fájl2.htm", "masik", "width=300,height=200");
function URL_sor(){
 if(kisablak.locationbar.visible == false)  {
   kisablak.close();
   Ujablak = 
    window.open("fájl2.htm", "masik", "width=300,height=200,location");
   Ujablak.focus();
  }
}
</script>
</head><body>
<a href="javascript:URL_sor()">URL címsor van ?</a>
</body></html>

Magyarázat:

A "kisablak"-ban megnyitunk egy HTML fájlt. Majd a URL_sor() saját készítésű függvény hívásával lekérdezzük, hogy van-e neki URL címsora. Mivel nincs, ezért azt bezárjuk és az "Ujablak"-ban ismét megnyitjuk ugyanazt az állományt, most már URL sorral.

menubar

Meghatározza, hogy az ablaknak van-e saját menüsora. Ha az elemváltozó visible = = true, akkor látható a menüsor, ellenkező esetben nem.

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
function Hivlak(){
 if(window.menubar.visible == true)
  alert("Ha módosítani kíván,válassza a menüsorban a Edit>Page-t");
}
</script>
</head><body>
<a href="javascript:Hivlak()">Ezt az oldalt módosítjuk</a>
</body></html>

name

Megadja az ablaknak a nevét. A Netscape 2.0 -ban csak lekérdezhető volt, a későbbi verziókban már módosítható is.

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
Ablak = window.open("fájl2.htm","Kisablak","width=200,height=200");
function Ablakneve() {
 alert("A kisablak neve: " + Ablak.name);
 uj = prompt("Adjon egy új nevet az ablaknak","Name");
 Ablak.name = uj;
 alert("Az ablak új neve : " + Ablak.name);
}
</script>
</head><body>
<a href="javascript:Ablakneve()">Ablaknév módosítás</a>
</body></html>

statusbar

Ha a statusbar.visible = = true (igaz), akkor az ablakban a státuszsor látható, különben nem.

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
function kiir(Text) {
 if(window.statusbar.visible == true) window.defaultStatus = Text;
 else alert(Text);
}
</script>
</head><body>
<form name="Bevitel">
<input type=text name="mezo">
<input type=button
  value="Start" onClick="kiir(document.Bevitel.mezo.value)">
</form>
</body></html>

Magyarázat:

A példában egy űrlapot hozunk létre, benne egy beviteli mezővel. Ha a gombot megnyomjuk, akkor az meghívja kiir() saját készítésű függvényt, melynek paramétere maga a megjelenítendő szöveg. Ha az ablak rendelkezik státuszsorral, akkor abban írja ki a szöveget, különben egy alert() kijelzőablakban.

captureEvents()

Az adott ablak eseményfigyelését végzi. Paraméterként azokat az eseményeket várja, melyek figyelését kívánjuk.Az eseményeket egymástól | elválasztva kell megadni. A következő események figyelését lehet kérni :

Event.ABORT Event.BLUR Event.CHANGE Event.CLICK 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.

A felsorolt események megfelelnek az Event-Handler fejezetben leírtaknak, az "on" szótag nélkül, ahogy az Event-Objekt -ek esetében látható. Tehát az esemény Event.MOUSEOVER megfelel az eseménykezelő onMouseover - nak.

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
window.captureEvents(Event.KEYPRESS);
window.onkeypress = kiad;
function kiad(Esemeny){
 alert("Ön megnyomta a   " + Esemeny.which + "   gombot");
 window.captureEvents(Event.KEYPRESS);
 window.onkeypress = kiad;
}
</script>
</head><body>
 Üssön le egy billentyűt!
</body></html>

Magyarázat:

A példában a KEYPRESS (billentyű leütés) eseményt figyeljük. Ha a felhasználó leüt egy billentyűt, akkor az meghívja a kiad() saját készítésű függvényt, mely megjelenít egy üzenőablakot, benne, hogy melyik billentyűt nyomtuk le. Utána a függvény újfent figyeli a billentyűk leütését, azzal, hogy magát maghívja.

handelEvent()

Továbbadja az eseményt a hierarhiában egy olyan elemnek, mely képes azt fogadni.

<html><head><title>Teszt</title>
<script language="JavaScript">
function clickHandler(Esemeny)
{ window.document.links[0].handleEvent(Esemeny); }
window.captureEvents(Event.CLICK);
window.onClick = clickHandler;
</script>
</head><body>
<a href="fájl1.htm" onClick="location.href='fájl1.htm'">Hívás</a>
</body></html>

Magyarázat:

A példa tartalmaz egy hivatkozást, mellyel a fájl1.htm töltödik be, ha bárhol a képernyőn kattintunk egyet az egérrel. Ehhez a példa betöltésekor a captureEvents() egérkattintás figyelését adjuk meg . Ha megtörténik az esemény, akkor a ClickHandler() saját készítésű függvény kerül meghívásra. Ez a handleEvent() segítségével továbbadja az eseményt a dokumentum első hivatkozásának (document.links[0]). Ebben a hivatkozásban az eseménykezelő onClick= van megadva, ami képes a bekövetkezett eseményt feldolgozni. Ennek eredményeképpen a location href parancs segítségével ugyanaz az állomány kerül megnyitásra, mint amire a hivatkozás mutat.

open()

Ez a metódus egy új ablakot nyit, ahol az első paraméter az URL cím, a második az ablak neve. A harmadik paraméter opcionális, mely egy karakterlánc, és a megjelenés módjára utal :

1. URL-címe = Annak a HTML fájlnak a címe, amit az új ablakba kívánunk betölteni. Ha a kívánt állomány egy másik katalógusban van, akkor relatív cimzést kell használni.

2.Ablakneve = Egy név mely az angol abc betűiből, számokból és aláhúzásjelből állhat

3.karakterlánc (optionális), mely az ablak pozicióját, méretét, eszközsorát, URL sorát, gördítő sávját stb. határozza meg. Ezeket a tulajdonságokat egymástól vesszővel elválasztva kell megadni :

`height`		Az ablak magassága Pixelben, pl.: `height=200`
`width`		Az ablak szélessége Pixelben, pl.: `width=300`
`locationbar`		Ha igen(`yes`), akkor az ablak a megnyitáskor kap egy URL címsort. Ha nem (`no` = alapértelmezés), nem lesz neki .
`menubar`		Ha igen(`yes`), akkor az ablak a megnyitáskor kap egy menüsort, mely a böngészőt vezérli. Ha nem (`no` = alapértelmezés), nem kap
`resizable`		Ha nem (`no`), akkor a felhasználó nem méretezheti újra az ablakot. Ha igen (`yes` = alapértelmezés), akkor újra méretezheti
`status`		Ha igen (`yes`), akkor az ablak a megnyitáskor kap egy státuszsort. Ha nem (`no` = alapértelmezés), nem lesz neki .
`dependent`		Ha igen (`yes`), be lesz zárva az ablak, ha a szülőablakot bezárják. Ha nem (`no` = alapértelmezés), akkor nyitva marad.
`hotkeys`		Ha nem (`no`), akkor a billentyű-parancsok hatástalanok lesznek, ha igen (`yes` = alapértelmezés), hatásosak lesznek.
`innerHeight`		Az ablak belső magassága Pixelben, pl.: `innerheight=180`
`innerWidth`		Az ablak belső szélessége Pixelben, pl.: `innerWidth=280`
`screenX`		Az új ablak bal felső sarkának vizszintes távolsága Pixelben, pl.: `screenX=100`
`screenY`		Az új ablak bal felső sarkának függőleges távolsága Pixelben, pl.: `screenY=30`

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
F1=open("fájl1.htm","Ablak1","width=310,height=400,screenX=0,screenY=0");
F2=open("fájl2.htm","Ablak2","width=310,height=400,screenX=320,screenY=0");
self.focus();
self.close();
</script>
</head><body>
</body></html>

Magyarázat:

A példában megnyitunk két kisablakot melyek egymás mellett helyezkednek el. Majd a szülőablak bezárja magát.

prompt()

Adatbevitel számára megnyit egy üzenőablakot egy beviteli mezővel, egy OK és egy Törlés gombbal. A prompt()metódus visszatérő értéke a felhasználó által begépelt mező tartalma.

Két paramétert vár :

1. Kísérőszöveg = Itt megadhatjuk, hogy mit várunk a felhasználótól

2. mezőtartalom = feltételezett érték, lehet üres szring "" is

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
Check = prompt("Kérem a jelszót : ","");
if(Check != "Szezám tárulj") history.back();
else alert("Szabad a betekintés");
</script>
</head><body>
</body></html>

Magyarázat:

A példa megjelenít egy üzenőablakot a jelszót bekérő szöveggel és egy üres beviteli mezüvel. Ha nem helyesen adjuk meg a jelszót, akkor visszaküld bennünket az előzőleg meglátogatott oldalra, amúgy nyugtázza a jogosultságot és betölti az oldalt.

setInterval(code,pause) / clearInterval(code)

A szünet (pause) értéknek megfelelően (milliszekundumban megadva) ciklikusan végrehaj egy bizonyos JavaScript tevékenységet (code) mint pl. : egy függvényhívás vagy egy kifejezés kiértékelése. Mindezt addig ismétli, míg a clearInterval() meghívásával meg nem szakítjuk e tevélenységet.

Példa:

<html><head><title>Teszt</title>
</head><body>
<script language="JavaScript">
aktiv = window.setInterval("Szinez()",1000);
i = 0, farbe = 1;
function Szinez() {
  if(farbe==1)
    { document.bgColor="yellow"; farbe=2; }
  else
    { document.bgColor="aqua"; farbe=1; }
  i = i + 1;
  if(i >= 10)
    window.clearInterval(aktiv); 
} 
</script>
</body></html>

Magyarázat:

A példában megadjuk, hogy egy másodpercenként változtassa meg a háttér színét sárgáról aqua-ra és vissza. Mindezt pontosan tízszer hajtsa végre. Ehhez definiáljuk a setInterval() metódust, melyet az "aktiv" nevű változóban tárolunk el, és amely a Szinez() függvényt hívja meg 1000 milliszekundumonként. A függvény ciklusonként növeli a számláló értékét és végrehajtja a document bgColor metódust : "yellow" ill. "aqua" paraméterrel. Ha a számláló eléri a tizet, akkor clearInterval()hívásával töröljük a paraméterként átadott(aktiv)tevékenységet.

setTimeout()

Egy tevékenység végrehajtását időzíti egy bizonyos idő elteltére. Ez lehet egy függvényhívás vagy egy kifejezés kiértékelése.

Példa:

<html><head><title>Teszt</title>
</head><body>
<form name="urlap">
A Dózsa féle parasztfelkelés éve?<br>
<input size=6 name="evszam">
<input type=button name="Gomb" value="Mehet" onClick="Check()">
</form>
<script language="JavaScript">
function Check() {
 if(document.urlap.evszam.value != "1514")
  alert("Hibás a válasz ! ");
 else
  alert("Eltalálta, a válasz jó");;   
}
window.setTimeout("document.urlap.Gomb.click()",6000);
</script>
</body></html>

Magyarázat:

A példában a tanulónak 6 másodpercen belül meg kell válaszolnia a kérdést. Eredménytől függő választ adunk neki.

Készült : 1999-10-27. Lengyel Sándor