1 | Első lépések
|
2 | A HTML-dokumentum
|
3 | Frémek
|
4 | Ablakok és
on-the-fly dokumentumok
|
5 | Statusbar and
timeouts
|
6 | Előre definiált
objektumok
|
7 | Formák
|
8 | Az Image-objektum
|
9 | Rétegek I
|
10 |
Rétegek II
|
11 | JS 1.2 esemény
model
|
12 |
Drag & drop
|
B
EVEZETÉS A J AVA S CRIPT
A JavaScript egy olyan új script nyelv melyet a Netscape fejlesztett ki. A JavaScript segítségével könnyedén készthetünk interaktív web-oldalakat. Ez a leírás megmutatja, hogy mire képes a JavaScript - és legfoképpen, hogy hogyan.
Sokan azt hiszik, hogy a JavaScript ugyanaz, mint a
Java, a hasonló nevük miatt. Ez nem igaz. Most túl sokáig tartana, hogy az összes
különbséget bemutassam - úgyhogy, elég ha megjegyezzük, hogy a JavaScript nem
ugyanaz, mint a Java.
További információkért olvassa el a Netscape
leírásában vagy a könyvem -ben
leírtakat :-)
JavaScript Futtatása
Mi szükséges a JavaScript-ben irt script-ek
futtatásához? Eloször is egy JavaScript-et ismero böngészo - például Netscape
Navigator (2.0-ás verzió vagy újabb) vagy a Microsoft Internet Explorer (MSIE - 3.0
-ás verzió vagy újabb). Mivel ezek a böngészok széles körben elterjedtek sokan
képesek JavaScript-ek futtatására. Ez természetesen egy elég fontos érv a JavaScript
választása mellett, ha jobb web-oldalt szeretnénk.
Természetesen szükség van alapveto HTML ismeretekre mielott elolvassuk ezt az
ismertetot. A HTML-rol sok valóban jó online forrás található. A Yahoo kereso
segítségével a 'html' online keresés során még több információt kaphatunk a
HTML-rol.
JavaScript beillesztése HTML-oldalakba
A JavaScript kódot közvetlenül illeszthetjük
HTML-oldalakba. Egy egyszeru példán keresztül bemutatjuk, hogyan muködik ez a
gyakorlatban:
<html> <body> <br> Ez egy hagyományos HTML dokumentum. <br> <script language="JavaScript"> document.write("Ez már JavaScript!") </script> <br> Ismét HTML. </body> </html>
Az elso ránézésre ez olyan mint egy hagyományos
HTML-file. Az egyetlen újdonság a következo rész:
<script language="JavaScript"> document.write("Ez már JavaScript!") </script>
Ez a JavaScript rész. Ha elmentjük normál HTML
file-ként, és betöltjük egy JavaScript-et ismero böngészobe, láthatjuk muködés
közben.
A kimenet a következo lesz ( JavaScript böngészo esetén 3 sor látható):
Ez egy hagyományos HTML dokumentum.
Ez már JavaScript!
Ismét HTML.
Bevallom, ez a script nem túlzottan hasznos- sokkal egyszerubb lett volna HTML -ben megírni. Csak a <script> tag-et akartuk demonstrálni. Minden ami a <script> és a </script> tag között található, JavaScript kódnak interpretálódik. Látható a document.write() utasítás az egyik legfontosabb utasítás a JavaScript programozásban. A document.write() arra használható, hogy az aktuális dokumentumba írjunk (ebben az esetben HTML dokumentum). Tehát a mi kis JavaScript programunk az Ez már JavaScript! szöveget írja a HTML dokumentumba.
Böngészok
JavaScript nélkül
Hogyan néz ki az oldalunk, ha a böngészo
számára nem ismert a JavaScript? A nem JavaScript böngészo nem ismeri a
<script> tagot. A tagot figyelmen kívül hagyja és az utána következo kódot
normál szövegként írja ki. Ez azt jelenti, hogy a felhasználó a programunk
JavaScript kódját a HTML dokumentumon belül láthatja. A szándékunk persze nem ez. De
lehetoség van a forráskód elrejtésére a régi böngészok számára. Használjuk a
<!-- --> HTML-commenteket. Az új forráskód így néz ki :
<html> <body> <br> Ez egy hagyományos HTML dokumentum. <br> <script language="JavaScript"> <!-- hide from old browsers document.write("Ez már JavaScript!") // --> </script> <br> Ismét HTML. </body> </html>
Az output egy nem-JavaScript böngészovel így néz ki:
Ez egy hagyományos HTML dokumentum. Ismét HTML.
A HTML-comment nélkül a script egy nem-JavaScript böngészon így néz ki:
Ez egy hagyományos HTML dokumentum. document.write("Ez már JavaScript!") Ismét HTML.
Jegyezzük meg, hogy a JavaScript source kódot nem lehet teljesen elrejteni. Mi csak megelozzük a kód kiírását a régi böngészokön - de a user megtekintheti a kódot a 'View document source' paranccsal. Nem lehet senkit sem megakadályozni a source megtekintésétol (megtudja az effekt muködését).
Az Események és a kezeloik nagyon fontosak a JavaScript programozáshoz. Az Események legtöbbször valamilyen felhasználó által indított muvelek hatására indulnak el. Ha a felhasználó leüt egy gombot, akkor egy Click-event indul el. Ha az egérpointer egy link fölött halad el, akkor egy MouseOver-event indul el. Számos különbözo event létezik. Szeretnénk, hogy a JavaScript programunk reagáljon a különbözo eseményekre. Ezt az event handler-ek (eseménykezelok) segítségével történik. Egy gomb lenyomása egy ablak legördülését okozhatja. Ez azt jelenti, hogy az ablak a Click-event válaszaként jelenjen meg. Az ehhez szükséges event-handlert onClick-nek nevezzük. Meghatározzuk a számítógép számára, hogy mit tegyen, ha az az esemény következik be. A következo sorokban egy egyszeru példát láthatunk az onClick event handler muködésére:
<form>
<input type="button" value="Click me"
onClick="alert('Yo')">
</form>
Szerepel egy-pár újdonság ebben a kódban. Vegyük
sorra oket. Láthatjuk, hogy egy gombbal egy "form" hozható létre
(alapvetoen ez egy HTML-probléma ezért nem térünk ki rá). Az új rész az onClick="alert('Yo')" az <input> tagon belül. Ahogy már említettük, ez
meghatározza, mi történik mikor a gombot leütjük. Tehát, ha egy gombleütés
történik, a számítógépnek az alert('Yo') muveletet kell végrehajtania. Ez JavaScript kód (Figyeljük
meg, hogy nem használjuk a <script> tagot ebben az esetben).
Az alert() utasítás egy új (popup) ablakot hoz létre. A zárójelen belül
meg kell határozni egy string-et. Esetünkben ez a string a 'Yo'. Ez a szöveg
megjelenik az ablakban. Tehát a programunk egy ablakot hoz létre, melyben a 'Yo' felirat
látható, mikor leütjük a gombot.
Egy dolog viszont zavaró lehet: A document.write() utasításban dupla
idézojelet írunk " de ha kombináljuk az alert() utasítással, csak
szimpla idézojelet ' használunk - miért? Alapvetoen mind a kettot használhatjuk. A
legutóbbi példában onClick="alert('Yo')" -t irtunk, látható, hogy mind a két fajta idézojelet
használtuk. Ha onClick="alert("Yo")"-t írnánk, a számítógép összezavarodna, mivel nem tudná
eldönteni, melyik rész tartozik az onClick eseménykezelohöz. Ebben az esetben
váltogatni kell az idézojeleket. Az idézojelek sorrendje nem számit. Tehát az onClick='alert("Yo")' is helyes.
Sok különbözo eseménykezelot használhatunk. Néhánnyal még megismerkedünk a továbbiakban- a teljesség igénye nélkül. Más létezo eseménykezelokrol a témához kapcsolódó könyvekben találhatunk információt.
Ha a Netscape Navigatort használjuk az ablak
tartalmazni fogja a JavaScript alert szöveget. Ez egy biztonsági eloírás. A prompt()
eljárással egy egyszeru popup ablak készítheto. Ez az ablak inputot vár. Egy
rosszindulatú script imitálhat egy üzenetet, mely valamilyen jelszót kérhet. Az
ablakban megjelent szövegbol látható, hogy az ablakot a web-böngészo hozza létre
és nem az operációs rendszer. Mivel ez egy biztonsági eloírás, az üzenet nem
távolítható el.
A JavaScript programok nagy részében függvényeket
használunk. Ezért már most szót ejtünk, eme elkerülhetetlenül fontos
koncepcióról.
A függvényeket egyes parancsok összekötegelésére használjuk. Írjunk egy programot,
amely háromszor írja ki ugyanazt a szöveget. Tekintsük a következo példát.
<html> <script language="JavaScript"> <!-- hide document.write("Welcome to my homepage!<br>"); document.write("This is JavaScript!<br>"); document.write("Welcome to my homepage!<br>"); document.write("This is JavaScript!<br>"); document.write("Welcome to my homepage!<br>"); document.write("This is JavaScript!<br>"); // --> </script> </html>
Ez a rész a következo szöveget írja ki háromszor:
Welcome to my homepage! This is JavaScript!
Figyeljük meg a forráskódot - ha háromszor írjuk a kódot egymás után helyes eredményt kapunk. De ez eléggé hatékony? Nem, de a problémát egyszerubben is megoldhatjuk:
<html> <script language="JavaScript"> <!-- hide function myFunction() { document.write("Welcome to my homepage!<br>"); document.write("This is JavaScript!<br>"); } myFunction(); myFunction(); myFunction(); // --> </script> </html>
Ebben a script-ben három sorral egy függvényt definiálunk
function myFunction() { document.write("Welcome to my homepage!<br>"); document.write("This is JavaScript!<br>"); }
A {}zárójelen belüli parancsok a myFunction()
függvényhez tartoznak, ami azt jelenti, hogy a két document.write()
parancsot összekötegeltük és egy függvényhívással végrehajthatók. A példánkban
három függvényhívás található. Miután definiáltuk a függvényt, a myFunction()
utasítást háromszor írjuk egymást követoen. Ez azt jelenti, hogy háromszor hívjuk
meg a függvényt mely tartalmát háromszor hajtja végre a számítógép.
Csodálkozhatunk, hogy miért olyan fontosak a függvények, hiszen ez egy nagyon
egyszeru példa. A késobbiek során természetesen láthatjuk a függvények elonyeit
és fontosságukat. Foleg a változók átadása teszi a script-et tényleg rugalmassá -
késobb megnézzük mi is ez.
Függvényeket eseménykezelokkel is kombinálhatjuk:
<html> <head> <script language="JavaScript"> <!-- hide function calculation() { var x= 12; var y= 5; var result= x + y; alert(result); } // --> </script> </head> <body> <form> <input type="button" value="Számol" onClick="calculation()"> </form> </body> </html>
Próbáljuk ki a következo példát:
A gomb a calculation() függvényt hívja meg. A függvény bizonyos számításokat tud végrehajtani. Ehhez az x, y és a result változókat használjuk. Változókat a var kulcsszóval hozhatunk létre. A változók különbözo értékek tárolására használhatók - úgy mint számok, szövegek , sztringek, stb. A var result= x + y; sor megmondja a böngészonek, hogy a result változót hozza létre és az x + y (pl.: 5 + 12) eredményét tárolja benne. A példában szereplo értékek után a result változó értéke 17. Az alert(result) utasítás ebben az esetben ugyan az mint az alert(17). Ez azt jelenti, hogy egy új ablakban a 17-es számot láthatjuk.
A JavaScript a web-oldal minden elemét egy hierarhiába rendezi. Minden elemet objektumnak tekint. Az objektumok saját tulajdonságokkal rendelkeznek. JavaScript segítségével könnyedén manipulálhatjuk az objektumokat. Ehhez fontos a HTML-dokumentumok hierarhiájának ismerete. Könnyen megértheto egy példán keresztül. A következo kód egy egyszeru HTML-oldal.
<html> <head> <title>My homepage </head> <body bgcolor=#ffffff> <center> <img src="home.gif" name="pic1" width=200 height=100> </center> <p> <form name="myForm"> Name: <input type="text" name="name" value=""><br> e-Mail: <input type="text" name="email" value=""><br><br> <input type="button" value="Push me" name="myButton" onClick="alert('Yo')"> </form> <p> <center> <img src="ruler.gif" name="pic4" width=300 height=15> <p> <a href="http://rummelplatz.uni-mannheim.de/~skoch/">My homepage</a> </center> </body> </html>
Így néz ki a programban:
Két kép, egy link, két szövegmezo és egy gomb
található a képen. A JavaScript szemszögébol nézve a böngészo ablak egy ablak
objektum (window-object). Az ablak objektum olyan elemeket tartalmaz, mint a
statusbar. Az ablakon belül be tudunk tölteni egy HTML dokumentumot (vagy egy másik
típusú file-t, de most csak HTML file-okkal foglalkozunk). Ez az oldal egy dokumentum
objektum (document-object). Ez azt jelenti, hogy a dokumentum objektum azt a
HTML dokumentumot jelenti meg, amelyet az adott pillanatban töltöttünk be. A dokumentum
objektum egy nagyon fontos objektum a JavaScript programozásban, újra és újra
használni fogjuk. A dokumentum objektum tulajdonságai lehetnek például az oldal
háttérszíne. Ami a legfontosabb, hogy minden HTML objektum a dokumentum objektum
tulajdonsága. A HTML-object például egy, vagy egy form.
A következo képen láthatjuk, hogyan épül fel a példában látott HTML oldal:
Információt akarunk kapni a különbözo
objektumokról és kezelni akarjuk azokat. Ehhez tudnunk kell, hogy hogyan érjük el a
különbözo objektumokat. Az objektumok neveit az ábrán láthatjuk. Ha most
szeretnénk tudni, hogy hogyan címezzük meg az elso képet a HTML oldalon vessünk egy
pillantást a hierarhiára. Felurol induljunk. Az elso objektum a document. Az
oldalt az elso kép reprezentálja az images[0]-val. Ez azt jelenti, hogy ezt az
objektumot a JavaScript-en keresztül a document.images[0] -val érhetjük el.
Ha például szeretnénk tudni, hogy a felhasználó mit írt az elso formába, eloször
gondoljunk arra, hogy hogyan érhetjük el ezt az objektumot. Most ismét a hierarhia
tetejérol induljunk. Kövessük az útvonalat az elements[0] nevu objektumig és
utána rakjuk egymás után az összes érintett objektumot. Ezek szerint az elso
szövegrészt a következo sorrendben érhetjük el: document.forms[0].elements[0]
De hogyan tudhatjuk meg a bevitt szöveget? Ahhoz, hogy megtudjuk, milyen
tulajdonságokkal és eljárásokat tartalmaz egy objektum, nézzünk utána a JavaScript
referenciában. Ott látható, hogy egy szövegrész a value tulajdonsággal
rendelkezik. Ez a szövegrészbe bevitt szöveg. Most már ezzel a sorral kiolvashatjuk az
értéket:
name= document.forms[0].elements[0].value;
A stringet a name változóban tároljuk. Most
már dolgozhatunk ezzel a változóval. Például létrehozhatunk új ablakot (popup
window): alert("Helló " + name). Ha az input 'Stefan' az alert("Helló " + name) parancs megnyit egy új ablakot a 'Helló Stefan'
szöveggel.
Ha nagy oldalaink vannak, akkor eléggé zavaró lehet, az egyes objektumokat számokkal
címezni - például document.forms[3].elements[17] vagy lehet, hogy document.forms[2].elements[18]
volt? Ezen probléma elkerülése végett, egyedi neveket adhatunk a különbözo
objektumoknak. Ezt láthatjuk a következo HTML kódban is:
<form name="myForm"> Name: <input type="text" name="name" value=""><br> ...
Ez azt jelenti, hogy a forms[0] hívható myForm-nak is. Az elements[0] helyett használhatjuk a name-et (ahogy azt meghatároztuk az <input> tag név tulajdonságában). A következo helyett:
name= document.forms[0].elements[0].value;
írhatjuk ezt is:
name= document.myForm.name.value;
Ez nagyon megkönnyíti a dolgunkat - foleg nagy
oldalaknál, sok objektummal (Jegyezzük meg, hogy mindig helyesen hivatkozzunk - myform
helyett ne írjuk myForm -ot)
Sok JavaScript objektum tulajdonsága nincs leszukítve olvasási muveletekre. Új
értékeket rendelhetünk ezekhez a tulajdonságokhoz. Például új stringet írhatunk
egy szövegrészhez. Nézzük meg ezt a példát:
Itt van a kód a példához - az érdekes rész a második <input> tag onClick-tulajdonságán belül van:
<form name="myForm"> <input type="text" name="input" value="bla bla bla"> <input type="button" value="Write" onClick="document.myForm.input.value= 'Yo!'; ">
Minden részletre nem tudok kitérni itt. Ha
megnézünk egy JavaScript referenciát sokkal könnyebben megérthetjük a hierarhiát.
Írtam egy rövid példát. Itt láthatjuk a különbözo objektumok használatát.
Eloször is próbáljuk ki, mit csinál.
A forrás:
<html> <head> <title>Objects</title> <script language="JavaScript"> <!-- hide function first() { // létrehoz egy popup ablakot // a beírt szöveggel alert("A szövegrész értéke: " + document.myForm.myText.value); } function second() { // ez a függvény ellenorzi a checkbox állapotát var myString= "The checkbox is "; // ellenorizte e a checkbox-ot? if (document.myForm.myCheckbox.checked) myString+= "checked" else myString+= "not checked"; // output string alert(myString); } // --> </script> </head> <body bgcolor=lightblue> <form name="myForm"> <input type="text" name="myText" value="bla bla bla"> <input type="button" name="button1" value="Button 1" onClick="first()"> <br> <input type="checkbox" name="myCheckbox" CHECKED> <input type="button" name="button2" value="Button 2" onClick="second()"> </form> <p><br><br> <script language="JavaScript"> <!-- hide document.write("A háttérszín: "); document.write(document.bgColor + "<br>"); document.write("A szöveg a második gombon: "); document.write(document.myForm.button2.value); // --> </script> </body> </html>
Az ablak és dokumentum objektumok mellett van még egy
fontos objektum: az elhelyezkedés objektum. Ez az objektum tartalmazza a betöltött HTML
dokumentum címét. Ha betöltöttük a http://www.xyz.com/page.html oldalt, akkor
a location.href megegyezik ezzel a címmel.
A legfontosabb azonban az, hogy új értékeket rendelhetünk a location.href-hez.
Ez a gomb például betölt egy új oldalt az aktuális ablakba:
<form> <input type=button value="Yahoo" onClick="location.href='http://www.yahoo.com'; "> </form>
Gyakran felmerülo kérdés, hogy a frame-ek és a
JavaScript hogyan dolgoznak együtt. Eloször nézzük mik azok a frame-ek és mire
használhatóak. Ezután megnézzük ,hogyan használhatjuk a JavaScript-el együtt.
A böngészo ablak különbözo frame-ekre bontható. Ez azt jelenti, hogy egy frame egy
négyzetes terület a böngészo ablakon belül. Mindegyik frame-ben egy-egy dokumentum
található (legtöbbször HTML-dokumentum). Például készíthetünk két frame-et. Az
egyik frame-be betölthetjük a Netscape homepage-ét, a másikba a Microsoft
homepage-ét.
Bár a frame-ek készítése egy HTML probléma, a fo lépéseket leírjuk. Frame-ek
készítéséhez két tag szükséges: a <frameset> és a <frame>. Egy HTML
oldal, mely két frame-et készít, így nézhet ki:
<html> <frameset rows="50%,50%"> <frame src="page1.htm" name="frame1"> <frame src="page2.htm" name="frame2"> </frameset> </html>
Ez két frame-et eredményez. A sortulajdonságokat (rows property) a <frameset> részben használjuk. Ez azt jelenti ,hogy a két frame egymás alatt helyezkedik el. A felso frame betölti page1.htm HTML oldalt ,az alsón pedig megjelenik a page2.htm dokumentum.
Ha oszlopokat szeretnénk sorok helyett, egyszeruen
"rows" helyett "cols" -t írunk. A "50%,50%" rész az
ablakok méretét határozza meg. Azt is írhatnánk, hogy "50%,*" ha nem
akarjuk kiszámolni a második frame méretét, annak érdekében, hogy 100%-ot kapjunk.
Megadhatjuk a méretet pixelekben ha elhagyjuk a % jelet.
Minden frame kap egy egyedi nevet, amit a <frame> tagban name
tulajdonságával megadhatunk.
Különbözo <frameset> tagok lehetnek. A következo példa egy Netscape dokumentáció (Csak egy kicsit módosítottuk):
<frameset cols="50%,50%"> <frameset rows="50%,50%"> <frame src="cell.htm"> <frame src="cell.htm"> </frameset> <frameset rows="33%,33%,33%"> <frame src="cell.htm"> <frame src="cell.htm"> <frame src="cell.htm"> </frameset> </frameset>
tekintsük ezt a példát:
A szél vastagságát a border tulajdonsággal állíthatjuk be a <frameset> tagban. A border=0 azt jelenti, hogy nem akarunk szélet (nem muködik Netscape 2.x verziókkal).
Most nézzük meg, hogyan 'látja' a JavaScript a
frame-eket a böngészo ablakban. Két frame-et fogunk készíteni, ahogy az az elso
példában látható.
Láthattuk, hogy a JavaScript a weboldal minden elemét egy hierarchiába rendezi. Ez a
tulajdonsága hasonlít a frame-ekére. A következo ábra mutatja az elso példa
felépítését:
A hierarchia tetején a böngészo ablak áll. Ez az
ablak két frame-re oszlik. Az ablak a szülo ebben a hierarchiában, a frame-ek pedig a
gyermekek. A két frame-nek egyedi nevet adtunk : frame1 és frame2. A nevek
segítségével könnyedén cserélhetünk információt a frame-ek között.
A script a következo problémát is megoldhatja: a felhasználó rákattint egy link-re
az elso frame-ben - de az oldalt inkább a második frame-be kellene betölteni. Ezt
például a menubarokon használhatjuk (vagy navigationbar) ahol egy frame mindig ugyan az
marad és néhány közvetlen linket tartalmaz a homepage bejárásához.
Tekintsünk három esetet:
Az ablak szempontjából a két frame neve : frame1 és frame2. Láthatjuk az ábrából, hogy közvetlen összeköttetés van az szülo ablak és a frame-ek között. Tehát ha van egy leírás a szülo ablakban - vagyis az oldalon, amely a frame-eket hozza létre - és el akarjuk érni a frame-eket csak a frame-ek neveit kell használni. Például írhatjuk a következot:
frame2.document.write("A message from the parent window.");
Néha el akarjuk érni a szülo ablakot egy frame-bol. Erre szükség lehet ha el szeretnénk távolítani a frame-eket. Eltávolítani a frame-eket nem jelent mást mint betölteni egy új oldalt. A mi esetünkben ez a szülo ablak. A szülo ablakhoz (vagy frame-hez) hozzáférhetünk a szülovel rendelkezo gyerek frameken keresztül. Ha egy új dokumentumot akarunk betölteni, akkor új URL-t kell hozzárendelni a location.href -hez. Ha el akarjuk távolitani a frameket, akkor a szülo ablak location-objectjet kell használnunk. Mivel minden frame be tudja tölteni a saját oldalát, más és más location-objectünk van minden egyes framehez. Egy új oldalt tudunk betölteni a szülo ablakba a következo paranccsal:
parent.location.href= "http://...";
Sokszor szembesülünk azzal a problémával , hogy egyik frame-bol elérjük a másikat. Hogyan írhatunk át valamit az egyik frame-bol a másikba - vagyis milyen parancsot kell beírni a page1.htm oldalra? Az ábrából látható, hogy nincs közvetlen összeköttetés a két frame között. Ez azt jelenti, hogy nem hívhatjuk frame2-t a frame1-bol ,mert ez a frame semmit sem tud a másik frame létezésérol. A szülo ablak szemszögébol a második frame neve frame2 ,míg az elso frame szemszögébol a szülo ablak neve szülo. A következot kell írnunk, ha hozzá akarunk férni a második frame document-objectjéhez.:
parent.frame2.document.write("Hi, this is frame1 calling.");
Vessünk egy pillantást a navigationbar felépítésére. Különbözo linkek lesznek egy frame-ben. Ha a felhasználó leüti az egyik linket akkor az nem jelenik meg ugyan abban a frame-ben - a második frame-be töltodnek be.
Itt egy példa:
Eloször kell egy script , ami létrehozza a frame-eket. Ez a dokumentum példa úgy néz ki mint az elso példa (ebben a részben):
frames3.htm
<html> <frameset rows="80%,20%"> <frame src="start.htm" name="main"> <frame src="menu.htm" name="menu"> </frameset> </html>
A start.htm oldal a bejövo oldal ,amely megjelenik az elején a fo frame-ben. Nincsenek különleges követelmények erre az oldalra nézve.
A következo oldal töltodik a menu frame-be :
menu.htm
<html> <head> <script language="JavaScript"> <!-- hide function load(url) { parent.main.location.href= url; } // --> </script> </head> <body> <a href="javascript:load('first.htm')">first</a> <a href="second.htm" target="main">second</a> <a href="third.htm" target="_top">third</a> </body> </html>
Egy új oldal frame-be töltésére különbözo lehetoségek léteznek. Az elso link a load() függvényt használja. Nézzük meg hogyan hívjuk le ezt a függvényt:
<a href="javascript:load('first.htm')">first</a>
Láthatjuk, hogy a böngészo JavaScript kódot hajthat végre egy másik oldal betöltése helyett. - csak használni kell a javascript-et: a href tulajdonságban. Látható, hogy a zárójelen belülre 'first.htm' -et irtunk. Ezt a stringet a load() függvénynek adjuk át. A load() függvényt a következoképpen definiálhatjuk:
function load(url) { parent.main.location.href= url; }
Látható, hogy a zárójelek közé 'url'-t
irtunk. Ez azt jelenti, hogy 'first1.htm' stringet az url változóban tároljuk.
A load() függvényen belül használhatjuk ezt a változót. Majd még
láthatunk további példákat változók átadására a késobbiekben.
A második link a cél tulajdonságot (target property) használja.
Valójában ez nem JavaScript. Ez egy HTML tulajdonság. Látható, hogy csak meg kell
határoznunk a frame nevét. Vegyük észre, hogy nem szabad a frame elé a parent szót
raknunk. Ez egy kicsit zavaró lehet. Ennek oka, hogy a cél nem JavaScript, hanem HTML.
A harmadik link azt mutatja , hogyan távolítsuk el a frame-eket a cél tulajdonsággal.
Ha el akarjuk tüntetni a frame-eket a load() függvénnyel csak be kell irnunk a
függvénybe, hogy parent.location.href= url.
Melyik utat választanád? Ez a script - tol is függ. A cél tulajdonság nagyon egyszeru. Akkor használhatjuk ha be akarunk tölteni egy oldalt egy másik frame-be.A JavaScript solution (vagyis az elso link) akkor használandó, amikor egyszerre több dolgot szeretnénk egy link kiválasztása után. Általános probléma két oldal betöltése két különbözo frame-be. Bár megoldható a probléma a céltulajdonsággal, de egy JavaScript függvénnyel sokkal egyszerubb. Tegyük fel, hogy van három frame: frame1, frame2 és frame3. A felhasználó rákattint egy linkre az elso frame-ben (frame1). Ezután be akarunk tölteni két különbözo oldalt a másik két frame-be. A következo függvényt használhatjuk például:
function loadtwo() { parent.frame1.location.href= "first.htm"; parent.frame2.location.href= "second.htm"; } Ha sokkal rugalmasabbá akarjuk tenni a függvényünket használhatunk változó átadást: Ez így nézhet ki:
function loadtwo(url1, url2) { parent.frame1.location.href= url1; parent.frame2.location.href= url2; }
A függvény lehívható a loadtwo("first.htm", "second.htm") vagy loadtwo("third.htm", "forth.htm") parancsokkal.
4. Rész: Ablakok és on-the-fly dokumentumok
A JavaScript rendelkezik egy nagyszeru
tulajdonsággal: új ablakokat nyithatunk meg vele a böngészon belül. Az ablakba új
dokumentumot tölthetünk (pl. egy HTML dokumentumot) vagy röptében (on-the-fly) új
dokumentumokat hozhatunk létre. Nézzük meg eloször, hogy miként lehet új ablakot létrehozni,
egy HTML-oldalt betölteni és utána az ablakot bezárni.
A következo script megnyit egy új böngészoablakot és egy jelentéktelen üzenetet
ír ki benne:
<html> <head> <script language="JavaScript"> <!-- hide function openWin() { myWin= open("bla.htm"); } // --> </script> </head> <body> <form> <input type="button" value="Open new window" onClick="openWin()"> </form> </body> </html>
A bla.htm nevu oldalt az open() paranccsal tölthetjük be az új ablakba.
Az új ablak megjelenését szabályozhatjuk. Például megadhatjuk, hogy az ablakon legyen-e statusbar, toolbar vagy menubar. Ezen kívül az ablak méretét is meghatározhatjuk. A következo script megnyit egy 400x300-as méretu új ablakot. Az ablakban nincs statusbar, toolbar vagy menubar.
<html> <head> <script language="JavaScript"> <!-- hide function openWin2() { myWin= open("bla.htm", "displayWindow", "width=400,height=300,status=no,toolbar=no,menubar=no"); } // --> </script> </head> <body> <form> <input type="button" value="Open new window" onClick="openWin2()"> </form> </body> </html>
Látható, hogy a tulajdonságokat a "width=400,height=300,status=no,toolbar=no,menubar=no" string határozza meg. Jegyezzük meg: a string belsejébe nem kell szóközt rakni!
Láthattuk, hogy három argumentumot használtunk egy ablak létrehozásakor:
directories | yes|no |
height | pixelek száma |
location | yes|no |
menubar | yes|no |
resizable | yes|no |
scrollbars | yes|no |
status | yes|no |
toolbar | yes|no |
width | pixelek száma |
Mire való a második argumentum? Ez az ablak neve. A korábbiakban láthattuk a target-property használatát. Ha ismerjük egy létezo ablak nevét, akkor egy új oldal is betöltheto abba az ablakba.
alwaysLowered | yes|no |
alwaysRaised | yes|no |
dependent | yes|no |
hotkeys | yes|no |
innerWidth | number of pixels (replaces width) |
innerHeight | number of pixels (replaces height) |
outerWidth | number of pixels |
outerHeight | number of pixels |
screenX | position in pixels |
screenY | position in pixels |
titlebar | yes|no |
z-lock | yes|no |
Láthattuk, hogy három argumentumot használtunk egy ablak létrehozásakor:
myWin= open("bla.htm", "displayWindow", "width=400,height=300,status=no,toolbar=no,menubar=no");
Mire való a második argumentum? Ez az ablak neve. A korábbiakban láthattuk a target-property használatát. Ha ismerjük egy létezo ablak nevét, akkor egy új oldal is betöltheto abba az ablakba.
<a href="bla.html" target="displayWindow">
Itt látható az ablak neve (ha az ablak nem létezik,
akkor egy új ablakot hozhatunk létre a kóddal).
Jegyezzük meg, a myWin nem az ablak neve. Az ablakot ezzel a változóval
érhetjük el. Mivel ez egy normális változó, csak a script-en belül érvényes, ahol
definiáltuk. Az ablak neve (itt: displayWindow) egy unikum név, melyet bármely
böngészoablak esetében használhatunk.
Az ablakokat bezárhatjuk a JavaScript segítségével . Ehhez a close() parancs szükséges. Nyissunk meg egy új ablakot mint az elobb. Ebbe az ablakba betöltjük a következo oldalt:
<html> <script language="JavaScript"> <!-- hide function closeIt() { close(); } // --> </script> <center> <form> <input type=button value="Bezárás" onClick="closeIt()"> </form> </center> </html>
Ha az új ablakon belül leütjük a gombot, az ablak bezárul. Az open() és close() az ablak objektum parancsai. Elvileg window.open() és window.close() utasításokat kellene írni az open() és close() helyett. Ez igaz, de az ablak objektum itt kivételt jelent. Nem kell kiírni a window-t, ha egy ablak objektum parancsot akarunk hívni. (ez csak ennél az objektumnál igaz).
Dokumentumok on-the-fly létrehozása
Most a JavaScripten belül egy érdekes részhez
érkeztünk - dokumentumok on-the-fly létrehozása. Ez azt jelenti, hogy a JavaScript
kóddal új HTML-oldalt hozhatunk létre. Ezen felül más dokumentumokat is - mint
VRML-sceneket stb. is létrehozhatunk. Ezeket a dokumentumokat külön ablakban vagy
frame-ben is kiírhatjuk.
Eloször hozzunk létre egy egyszeru HTML-dokumentumot és írjuk ki egy új ablakban.
Íme:
<html> <head> <script language="JavaScript"> <!-- hide function openWin3() { myWin= open("", "displayWindow", "width=500,height=400,status=yes,toolbar=yes,menubar=yes"); // dokumentum megnyitása további output-hoz myWin.document.open(); // create document myWin.document.write("<html><head><title>On-the-fly"); myWin.document.write("</title></head><body>"); myWin.document.write("<center><font size=+3>"); myWin.document.write("Ez a HTML-dokumentum a JavaScript "); myWin.document.write("segítségével készült!"); myWin.document.write("</font></center>"); myWin.document.write("</body></html>"); // dokumentum bezárása - (nem az ablaké!) myWin.document.close(); } // --> </script> </head> <body> <form> <input type=button value="On-the-fly" onClick="openWin3()"> </form> </body> </html>
Foglalkozzunk egy kicsit a winOpen3() függvénnyel.
Látható, hogy eloször egy új böngészoablakot nyitunk meg. Az elso argumentum egy
üres string "" - ez azt jelenti, nem határozunk meg URL-t. A
böngészo ne csak betöltsön egy létezo dokumentumot - a JavaScript hozzon létre egy
új dokumentumot.
Definiáljuk a myWin változót. Ennek a változónak a segítségével
elérhetjük az új ablakot. Jegyezzük meg, hogy nem használhatjuk az ablak nevét (displayWindow)
erre a célra.
Ha megnyitottuk az ablakot, nyissuk meg a dokumentumot is:
// open document for further output myWin.document.open();
A dokumentum objektum open() eljárását használjuk erre a célra - ez egy
teljesen más módszer mint az ablak objektum open() eljárás! Ez az utasítás nem nyit
meg ablakot - elokészíti a dokumentumot további kiíratásra.
A myWin utasítást a document.open() elé kell írni annak érdekében,
hogy elérhessük az új ablakot.
A következo sorok hozzák létre a dokumentumot a document.write()
utasítással:
//dokumentum létrehozása myWin.document.write("<html><head><title>On-the-fly"); myWin.document.write("</title></head><body>"); myWin.document.write("<center><font size=+3>"); myWin.document.write("Ez a HTML-dokumentum a JavaScript "); myWin.document.write("segítségével készült!"); myWin.document.write("</font></center>"); myWin.document.write("</body></html>");
Megfigyelhetjük, hogy sima HTML-tagokat írunk a
dokumentumba. HTML-kódot hozunk létre! Bármilyen HTML tagot írhatunk ide.
Az output után újból be kell zárnunk a dokumentumot, amit a köv. kód hajt végre:
// dokumentum bezárása - (nem az ablaké!) myWin.document.close();
Mint említettük már a dokumentumokat on-the-fly hozhatjuk létre és frame-eken belül meg is jeleníthetjük oket. Ha például van két frame-ünk -frame1 és frame2- és egy új dokumentumot akarunk létrehozni a frame2-ben akkor a következot írhatjuk a frame1-be:
parent.frame2.document.open(); parent.frame2.document.write("Here goes your HTML-code"); parent.frame2.document.close();
VRML-scene-ek on-the-fly létrehozása
A JavaScript rugalmasságát kihasználva
demonstráljuk, hogy hogyan lelet VRML-scene-t on-the-fly létrehozni. A VRML (Vitual
Reality Modelling Language) Virtuális Valóság Modellezo nyelv. 3D jeleneteket
hozhatunk létre ezzel a nyelvvel. Gyerünk szedd elo a 3D szemüveged és indulás...
Azért ez mégsem így megy, most csak egy egyszeru példa jön; egy kék kocka.
VRML plug-in szükséges ahhoz, hogy láthassuk a példát. Ez a script nem ellenorzi a
VRML plug-in meglétét (ez az implemetálásnál nem jelent gondot).
Íme a forrás:
<html> <head> <script language="JavaScript"> <!-- hide function vrmlScene() { vrml= open("", "displayWindow", "width=500,height=400,status=yes,toolbar=yes,menubar=yes"); // open document for further output vrml.document.open("x-world/x-vrml"); vr= vrml.document; // create VRML-scene vr.writeln("#VRML V1.0 ascii"); // Light vr.write("Separator { DirectionalLight { "); vr.write("direction 3 -1 -2.5 } "); // Camera vr.write("PerspectiveCamera { position -8.6 2.1 5.6 "); vr.write("orientation -0.1352 -0.9831 -0.1233 1.1417 "); vr.write("focalDistance 10.84 } "); // Cube vr.write("Separator { Material { diffuseColor 0 0 1 } "); vr.write("Transform { translation -2.4 .2 1 rotation 0 0.5 1 .9 } "); vr.write("Cube {} } }"); // dokumentum bezárása - (nem az ablaké!) vrml.document.close(); } // --> </script> </head> <body> <form> <input type=button value="VRML on-the-fly" onClick="vrmlScene()"> </form> </body> </html>
A forráskód nagyon hasonlít az elozo példánkra. Eloször megnyitunk egy új ablakot. Utána meg kell nyitnunk a dokumentumot, ahhoz hogy elokészítsük az outputhoz. Nézzük ezt a kódot:
// dokumentum megnyitása további output-hoz vrml.document.open("x-world/x-vrml");
Az elozo példában nem írtunk semmit sem a zárójelek közé. Mit jelent a "x-world/x-vrml"
? Ez a MIME típusa a létrehozni kívánt file-nak. Itt mondjuk meg a böngészonek,
hogy milyen típusú adat következik. Ha nem írunk semmit a zárójelek közé, akkor a
MIME típus alapértelmezésben "text/html" (ez a HTML-fájlok MIME típusa).
(Több módszer is van bizonyos MIME típusok megismerésére - a böngészo is
rendelkezik egy listával az ismert MIME típusokról. Ezt a listát az 'option' vagy
'preference' menüben találhatjuk meg.)
A 3D jelenet létrehozásához vrml.document.write()-ot kell írnunk a script-be.
Ez túl hosszú, ezért alkalmazzuk a vr= vrml.document definíciót. Most mát
írhatjuk a vr.write() parancsot a vrml.document.write() helyett.
Így már megjeleníthetjük a sima VRML-kódot. Nem fogjuk elmagyarázni a VRML-scene
elemeit. Számos jó VRML forrás található az Interneten. A tiszta VRML-kód így néz
ki:
#VRML V1.0 ascii Separator { DirectionalLight { direction 3 -1 -2.5 } PerspectiveCamera { position -8.6 2.1 5.6 orientation -0.1352 -0.9831 -0.1233 1.1417 focalDistance 10.84 } Separator { Material { diffuseColor 0 0 1 } Transform { translation -2.4 .2 1 rotation 0 0.5 1 .9 } Cube {} } }
Ez az a kód amit a document.write()
paranccsal megjelenítünk.
Természetesen teljesen mindegy, hogy on-the-fly hozzuk létre a sima VRML-fájlt vagy
betöltjük (cube.wrl).
Akkor lesz érdekesebb, ha a felhasználó megad különbözo objektumokat - mint a
cilinder, kúp etc. - és a JavaScript létrehozza a jelenetet hozzá.
5. Rész: A Statusbar és az idozítok
A JavaScript programokkal képesek vagyunk az állapotkijelzo csík (statusbar) felületére - ez a böngészo alján lévo tálca - írni. Ehhez csak annyit kell tenni, hogy egy string-et rendelünk a window.status parancshoz. A következo példában két gomb található, melyekkel kiírathatunk egy stringet és egy másik gomb, mellyel letörölhetjük a kiírást.
A script így néz ki:
<html> <head> <script language="JavaScript"> <!-- hide function statbar(txt) { window.status = txt; } // --> </script> </head> <body> <form> <input type="button" name="look" value="Írj!" onClick="statbar(' Helló! Ez a statusbar!');"> <input type="button" name="erase" value="Törölj!" onClick="statbar('');"> </form> </body> </html>
Létrehozunk egy formát, aminek két gombja van. Mind a ketto gomb a statbar() függvényt hívja meg. A Write! gomb által hívott függvény így néz ki:
statbar('Helló! Ez a statusbar!');
A zárójeleken belül a 'Helló! Ez a statusbar!' feliratot tesszük. Ez azt jelenti, hogy ezt a string-et átadjuk a statbar() függvénynek. A statbar() így definiálható:
function statbar(txt) { window.status = txt; }
Az új dolog az egészben, hogy a függvény nevén
belül két zárójel között a txt -t használtuk. Ez azt jelenti, hogy a
string amit átadtunk a függvénnyel, a txt változóban tároljuk.
A függvényeket rugalmasabbá tehetjük - ami a gyakorlatban is elég gyakran használt
módszer- ha változókat adunk a függvénynek. Különbözo értékeket adhatunk át a
függvényeknek, csak vesszovel el kell választani oket.
A txt karaktersorozatát a window.status = txt utasítással írathatjuk ki a statusbar felületére.
A szöveg törlését úgy lehet megoldani, hogy a window.status parancshoz egy
üres string-et rendelünk hozzá.
A statusbar felületére kiirt szövegeket könnyedén lehet a linkekkel kapcsolatban használni. Ahelyett, hogy kiírnánk a link URL címét, elmagyarázhatjuk, hogy mirol szól a következo oldal. A következo példa ezt mutatja be. Mutassunk az egérrel erre a linkre és láthatjuk. A kód a következo:
<a href="dontclck.htm" onMouseOver="window.status='Don\'t click me!'; return true;" onMouseOut="window.status='';">link</a>
Itt az onMouseOver és az onMouseOut eseményeket
használjuk az egérpointer helyzetének meghatározására - mikor található a pointer
a link felett és mikor nem.
Furcsának tunhet, hogy miért kell az onMouseOver tulajdonságaként 'return true'-t
írnunk. Ez azért van így, hogy a böngészo ne a saját válaszát hajtsa végre a
MouseOver esemény hatására. Alapértelmezésben a böngészo a link URL címét
jeleníti meg a statusbar felületén. Ha nem használjuk a return true
paramétert, a böngészo rögtön felülírja a statusbar tartalmát, amint
végrehajtotta a kódunkat - ez azt jelenti, hogy felülírja a szövegünket és a
felhasználó nem tudná elolvasni. Általánosan használhatjuk a return true
paramétert az eseménykezeloben és így visszaszoríthatnánk a böngészo válaszát
az eseményre.
Az onMouseOut esemény nem létezett a JavaScript 1.0 verzióban. Ha Netscape Navigator
2.x valamelyik változatát használjuk különbözo eredményeket kapunk különbözo
platformokon. A Unix felületen az onMouseOut hatására a szöveg eltunik annak
ellenére, hogy a böngészo nem ismeri. Windows alatt a szöveg nem tunik el. Ha
Windows felületen kompatibilissé akarjuk tenni a kódunkat Netscape 2.x verziókkal,
akkor például olyan függvényt írhatunk, amelyik a statusbar felületére írt
szöveget egy ido múlva letörli. Ezt timeout-okkal lehet megoldani. A következo
fejezetben többet is megtudhatunk errol.
Ebben a scriptben más is található - néha kvótákat írathatunk ki. Ki akarjuk írni
a Don't click me szöveget - amint az onMouseOver eseménykezeloben
meghatároztuk, single kvótákat használunk. De a Don't szó szintén single
kvótát használ! A böngészo teljesen összezavarodik, ha csak 'Don't ...' szöveget
írunk. A probléma megoldásához írjunk egyszeruen egy backslash \ jelet a quote elé,
ami azt jelenti, hogy ez az outputhoz tartozik (a dupla kvótával ugyan ezt tehetjük ).
Az idozítok (timeout) segítségével a számítógéppel egy kódot egy ido elteltével hajtathatunk végre. Létrehoztam egy gombot, amit ha megnyomunk 3 másodperc múlva elojön egy ablak:
A script igy néz ki:
<script language="JavaScript"> <!-- hide function timer() { setTimeout("alert('Az ido lejárt!')", 3000); } // --> </script> ... <form> <input type="button" value="Idozíto" onClick="timer()"> </form>
A setTimeout() a window-objektum módszere. Ez
beállít egy timeout-ot. Az ido lejárta után az elso argumentum a JavaScript kód
amit végrehajt a gép. Az esetünkben ez az argumentum az "alert(' Az ido
lejárt!')". Jegyezzük meg, hogy a JavaScript kódnak kvótákon belül kell lennie.
A második argumentum meghatározza a számítógépnek, mikor hajtsa végre a kódot. Az
idozítonek milliszekundumokban kell megadni az idot (3000 milliszekundum = 3
másodperc).
Biztosan mindenki látott már mozgó szöveget a
statusbar felületén. Az Interneten mindenütt láthatók. Megnézzük, hogy hogyan lehet
beprogramozni egy ilyen scroller-t. Emellett megnézzük a scrollerek lehetséges
fajtáit.
A scroller-ek könnyedén implementálhatók. Vajon hogy lehet megvalósítani mozgó
szöveget a statusbar-on. Szöveget kell írnunk a statusbar felületére. Egy kis ido
múlva ugyanazt a szöveget kell kiírnunk a statusbar felületére- de egy kicsit balra
mozdítva. Ha ezt újra és újra megismételjük a felhasználóban mozgó szöveg
benyomását kelti. Azt gondoljuk át, hogyan határozzuk meg, hogy a szöveg melyik
része legyen látható, mivel az egész szöveg hosszabb mint a statusbar.
A következo gomb megnyit egy ablakot és egy mozgó
szöveget jelenít meg.
Íme a forráskód - néhány megjegyzéssel
<html> <head> <script language="JavaScript"> <!-- hide // a scroller szöveg meghatározása var scrtxt = "Ez a JavaScript! " + "Ez a JavaScript! " + "Ez a JavaScript!"; var length = scrtxt.length; var width = 100; var pos = -(width + 2); function scroll() { // megjeleníti a szöveget a megfelelo pozíción és beállít egy timeout-ot // egyel tovább lépteti a szöveget pos++; // számolja a kiirt szöveget var scroller = ""; if (pos == length) { pos = -(width + 2); } // ha a szöveg nem érte még el a bal oldalt, akkor írjunk // pár szóközt - különben le kell vágnunk a szöveg // részét (ami már elhagyta a képernyot a bal oldalon) (pos < 0) { for (var i = 1; i <= Math.abs(pos); i++) { scroller = scroller + " ";} scroller = scroller + scrtxt.substring(0, width - i + 1); } else { scroller = scroller + scrtxt.substring(pos, width + pos); } // hozzárendeli a szöveget a statusbar-hoz window.status = scroller; // hivd meg ezt a függvényt 100 millisecondum múlva setTimeout("scroll()", 100); } // --> </script> </head> <body onLoad="scroll()"> És itt jön a HTML oldal body része. </body> </html>
A scroll() függvény fo része ahhoz szükséges,
hogy kiszámítsuk, a szöveg melyik része legyen látható. Nem magyarázzuk el a kódot
részletesen - értsük meg, hogyan muködik nagyvonalakban.
A scroller indításához a <body> tag onLoad eseménykezelojét használjuk. Ez
azt jelenti, hogy a scroll() függvényt közvetlenül a HTML-oldal betöltése után
hívjuk meg.
A scroll() függvényt az onLoad tulajdonsággal hívjuk meg. Kiszámolja a scroller elso
lépését és utána megjeleníti. A scroll() függvény végére egy timeout-ot
állítunk be. Ez azt eredményezi, hogy a függvény minden 100 milliszekundumban
végrehajtódik. A szöveg egy lépéssel elorébb kerül és egy újabb timeout indul.
És ez így folytatódik tovább.
Sokan használják a scrollereket az Interneten. A hátránya az, hogy az emberek hamar
megunhatják. Foleg, ha az URL nem látható, ha egy link fölé mozgatjuk az
egérpointert. Ez megoldható, ha leállítjuk a scrollert, mikor egy MouseOver esemény
történik - onMouseOut eseménnyel újra indítható. Ha scrollert akarsz használni, ne
az alap scrollert használd - próbálj meg néhány szép effektet hozzáadni. Például
a szöveg egy része balról a másik része jobbról jön és amikor találkoznak
középen, a szöveg néhány másodpercig állva marad. Egy kis fantáziával könnyedén
kitalálhatunk alternatívákat.
6. Rész: Elore definiált objektumok
A Dátum-objektum (Date-object)
A JavaScript segítségével lehetoségünk nyílik
néhány elore definiált objektum használatára. Ilyen például a Dátum-objektum, az
Array-objektum vagy a Matematikai-objektum. Számos más objektum is létezik.
Eloször a dátum-objektumot tekintsük át. Amint a nevébol is látszik, idovel és
dátummal dolgozik. Például könnyu kiszámolni hány nap maradt a következo
karácsonyig. Vagy a pontos idot mondja meg a HTML dokumentumnak.
Kezdjük egy olyan példával, amely kijelzi az aktuális idot. Hozzunk létre eloször
egy új Dátum-objektumot. Erre a célra egy új operátort fogunk használni. Nézzük a
következo sort:
today= new Date()
Ez definiál egy új Dátum-objektumot: 'today'.
Ha nem adunk meg dátumot és idopontot, az aktuális dátum és ido kerül a
Dátum-objektumba. Ez azt jelenti, hogy ha végrehajtjuk a today= new Date() sort,
az éppen aktuális dátum és idopontot határozzuk meg.
A Dátum-objektum kínál néhány eljárást amit most a today objektumban
használhatunk. Ezek például getHours(), setHours(), getMinutes(), setMinutes(),
getMonth(), setMonth() stb.
Vegyük észre, hogy egy Dátum-objektum csak egy konkrét dátumot és idot képvisel.
Ez nem hasonlít egy órához, amely minden másodpercben automatikusan változtatja az
idot.
Ahhoz, hogy megkapjuk a dátumot és az idot használhatunk egy másik konstruktort (ez a
Date() eljárás melyet az új operátor hív meg, amikor az új Dátum-objektumot
hozza létre):
today= new Date(1997, 0, 1, 17, 35, 23)
Ez létrehoz egy Dátum-objektumot ,ami 1997 Január elsején 17:35 percet és 23 másodpercet jelöl. A következoképpen határozhatjuk meg a dátumot és az idot:
Dátum(év , hónap , nap , óra , perc , másodperc)
Vegyük észre ,hogy a januárt 0-val jelöljük ( nem 1-gyel ,ahogy azt gondolnánk). Az 1 a februárt jelöli stb.
Most írjunk egy scriptet, amely kijelzi az aktuális idot és dátumot. Az eredmény így fog kinézni:
Time: 20:57
Date: 3/16/3903
A kód így néz ki:
<script language="JavaScript"> <!-- hide now= new Date(); document.write("Time: " + now.getHours() + ":" + now.getMinutes() + "<br>"); document.write("Date: " + (now.getMonth() + 1) + "/" + now.getDate() + "/" + (1900 + now.getYear())); // --> </script>
Itt olyan eljárásokat használunk a
Dátum-objektumunkban az ido és a dátum kiíratására, mint a getHours().
Láthatjuk, hogy az évhez hozzáadunk 1900-at. A getYear() eljárás az 1900 óta
eltelt évek számát adja meg. Ez azt jelenti, hogy ha az év 1997, az eljárás 97-et ad
vissza, ha 2010 akkor 110-et és nem 10-et! Ha 1900-at adunk meg, nem lesz problémánk a
2000. évvel. Jegyezzük meg, hogy a getMonth() eljárással kapott számot meg
kell növelnünk egyel.
Ez a script nem ellenorzi, ha a percek száma kevesebb mint 10. Ez azt jelenti, hogy az
idot a következo képpen kapjuk meg:14:3 , ami azt jelenti, hogy 14:03. A következo
script-ben látni fogjuk, hogyan oldható meg ez a probléma.
Most egy muködo órára látunk példát.
Íme a kód:
<html> <head> <script Language="JavaScript"> <!-- hide var timeStr, dateStr; function clock() { now= new Date(); // ido hours= now.getHours(); minutes= now.getMinutes(); seconds= now.getSeconds(); timeStr= "" + hours; timeStr+= ((minutes < 10) ? ":0" : ":") + minutes; timeStr+= ((seconds < 10) ? ":0" : ":") + seconds; document.clock.time.value = timeStr; // dátum date= now.getDate(); month= now.getMonth()+1; year= now.getYear(); dateStr= "" + month; dateStr+= ((date < 10) ? "/0" : "/") + date; dateStr+= "/" + year; document.clock.date.value = dateStr; Timer= setTimeout("clock()",1000); } // --> </script> </head> <body onLoad="clock()"> <form name="clock"> Ido: <input type="text" name="time" size="8" value=""><br> Dátum: <input type="text" name="date" size="8" value=""> </form> </body> </html>
A setTimeout() eljárást használjuk, hogy
beállítsuk az idot és a dátumot minden másodpercben. Tehát minden másodpercben
létrehozunk egy Dátum-objektumot az aktuális idovel.
Láthatjuk, hogy <body> tagban a clock() függvényt az onLoad
eseménykezelovel hívjuk le. A HTML-oldal body részében két szövegrészünk van. A clock()
függvény a megfelelo formában írja be az idot és dátumot ebbe a két
szövegrészbe. Láthatjuk, hogy erre a célra két stringet használunk(timeStr és
dateStr). Korábban említettük, hogy a10-nél kevesebb percekkel problémák vannak
- a script ezt a problémát a következo sorral megoldja:
timeStr+= ((minutes < 10) ? ":0" :
":") + minutes;
Itt a percek számát hozzáadjuk a timeStr string-hez. Ha a percek száma kevesebb mint tíz, 0-át kell hozzáadnunk. Ez a sor egy kicsit idegennek tunhet. A következoképpen is írhatjuk és ez már ismertebb:
if (minutes < 10) timeStr+= ":0" + minutes else timeStr+= ":" + minutes;
Az Elrendezés-objektum (Array-object)
Az elrendezések nagyon fontosak. Gondoljunk bele egy
olyan problémába, ahol 100 különbözo nevet kell tárolni. Hogyan lehet ezt
JavaScript segítségével megoldani? Nos, definiálhatunk 100 változót és
különbözo neveket rendelhetünk hozzájuk. Ez igen bonyolult.
Az elrendezések úgy néznek ki, mintha változókat kötegelnénk egymáshoz. Egy
névvel és egy számmal lehet elérni ezeket. Legyen az elrendezésünk neve 'names'.
Ekkor az elso nevet a names[0]-val érhetjük el. A második név legyen names[1]
stb.
A JavaScript 1.1 verzió óta (Netscape Navigator 3.0) használhatjuk az
Elrendezés-objektumot. Új elrendezést így készíthetünk: myArray= new Array().
Most értékeket rendelhetünk ehhez az elrendezéshez.
myArray[0]= 17;
myArray[1]= "Stefan";
myArray[2]= "Koch";
A JavaScript elrendezések valóban rugalmasak. Nem
kell az elrendezés méretével törodni - a mérete dinamikusan változik. Ha azt
írjuk, myArray[99]= "xyz" az elrendezésnek 100 eleme lehet (a JavaScript elrendezés
csak nohet - nem képes zsugorodni. Ezért legyen minél kisebb az elrendezésünk.).
Nem számít, hogy számokat, string-eket vagy más objektumokat tárolunk az
elrendezésben. Az elrendezések minden tulajdonságát nem említettük de remélem
látjuk, hogy az elrendezések nagyon fontosak.
Természetesen minden világosabb lesz ha megnézünk egy példát. Ez a következo
példa kimenete:
elso elem
második elem
harmadik elem
Íme a forráskód :
<script language="JavaScript">
<!-- hide
myArray= new Array();
myArray[0]= "elso elem";
myArray[1]= "második elem";
myArray[2]= "harmadik elem";
for (var i= 0; i< 3; i++) {
document.write(myArray[i] + "<br>");
}
// -->
</script>
Eloször egy myArray nevu elrendezést hozunk létre. Utána három különbözo értéket rendelünk az elrendezéshez. Ezután egy ciklus indul. Ez a ciklus háromszor végrehajtja a document.write(myArray[i] + "<br>") parancsot. Az i változó ebben a for-ciklusban 0-tól 2-ig számol. Láthatjuk, hogy a myArray[i]-t használjuk a for-ciklusban. Ahogy az i változó 0-tól 2-ig számol, három document.write() hívásunk lesz. A ciklust így is átírhatnánk:
document.write(myArray[0] + "<br>"); document.write(myArray[1] + "<br>"); document.write(myArray[2] + "<br>");
Elrendezések JavaScript 1.0-val
Mivel az Elrendezés-objektum nem létezik a JavaScript 1.0 verzióban (Netscape Navigator 2.x és Microsoft Internet Explorer 3.x) más alternatívákat kell kitalálnunk. A Netscape dokumentációban erre ezt a kódot találhatjuk:
function initArray() { this.length = initArray.arguments.length for (var i = 0; i < this.length; i++) this[i+1] = initArray.arguments[i] }
Most így hozhatunk létre elrendezést:
myArray= new initArray(17, 3, 5);
A zárójelekben lévo számok az elrendezés kezdoértékei (ezt a JavaScript 1.1 Elrendezés-objektummal is meg lehet valósítani). Vegyük figyelembe, hogy ez az elrendezés nem implementálja a JavaScript 1.1 Elrendezés-objektum minden elemét (ott van például a sort() eljárás, amely valami szerint elrendezi az elemeket).
A Matemetiai-objektum (Math-object)
Ha matematikai számításokra van szükségünk, akkor
a Matematiai-objektumban találunk néhány eljárást, ami segíthet. Például a
szinusz-eljárás: sin(). A Netscape dokmentációban teljese referencia
található.
Bemutatom a random() eljárást. Ha a Math.random() eljárást meghívjuk,
kapunk egy véletlen számot 0 és1 között . Ez itt a document.write(Math.random()) kimenete
(a szám más lesz, ha újból betöltjük az oldalt):
0.3973097041858748
A Forákat széles körben használják az Interneten. A form input tartalmát gyakran a szerver kapja meg, vagy egy meghatározott e-mail címre érkezik meg. De, hogyan gyozohetünk meg arról, hogy a felhasználó által közölt adatok valósak? A JavaScript segítségével a form inputot könnyedén ellenorizhetjük, mielott elküldodik az Interneten keresztül. Eloször szeretném bemutatni, hogy miként lehet a formát érvényesíteni (validálni). Ezután megnézzük a lehetoségeit annak, hogy hogyan küldhetünk információt az Internet -en keresztül.
Eloször egy egyszeru script-et akarunk készíteni. A HTML-oldal két szövegrészt fog tartalmazni. Az elsobe a nevet, a másodikba az e-mail címet kell írni. Írjunk be bármit és nyomjuk le a gombot. De megpróbálhatjuk azt is, hogy nem írunk be semmit és megnyomjuk a gombot.
Ha nem írunk be semmit, akkor hibaüzenetet kapunk.
Bármi más érvényes lesz. Ez természetesen nem akadályozza meg azt, hogy a
felhasználó rossz nevet írjon be. A böngészo még számokat is elfogad. Ha azt írod
be, hogy 17, akkor azt fogod látni, hogy 'Hi 17!'. Ez tehát nem teljesen jó megoldás.
A második forma egy kicsit bonyolultabb. Próbáljunk meg beírni egy stringet -
például a nevünket. Ez nem fog muködni, hacsak nincs egy @ jel a nevünkben. A
feltétel tehát a @ jel. Ha nem írunk be semmi mást csak egy @ jelet az is érvényes,
csak nincs sok értelme. Minden Internet e-mail cím tartalmaz @ jelet, így ez nem jelent
problémát.
Hogyan is néz ki az elozo két formula forrása?
<html> <head> <script language="JavaScript"> <!-- Hide function test1(form) { if (form.text1.value == "") alert("Kérem írjon be valamit!") else { alert("Hi "+form.text1.value+"! Form input ok!"); } } function test2(form) { if (form.text2.value == "" || form.text2.value.indexOf('@', 0) == -1) alert("Nem érvényes e-mail cím!"); else alert("OK!"); } // --> </script> </head> <body> <form name="first"> Enter your name:<br> <input type="text" name="text1"> <input type="button" name="button1" value="Input Tesztelése" onClick="test1(this.form)"> <P> Enter your e-mail address:<br> <input type="text" name="text2"> <input type="button" name="button2" value="Input Tesztelése" onClick="test2(this.form)"> </body> </html>
Eloször nézzük meg a HTML kódot a body részben.
Készítünk két szövegrészt és két gombot. A gombok attól függoen, hogy melyiket
nyomjuk le meghívják a test1(...) vagy a test2(...) függvényt. Átadjuk a this.form-ot
a függvényeknek annak érdekében, hogy a függvényben a megfelelo elemeket
címezhessük meg a késobbiek során.
A test1(form) függvény érzékeli, ha a string üres ( if (form.text1.value ==
"")... .A 'form' egy változó, amely megkapja a 'this.form' értékét a
függvényhíváskor. Megkaphatjuk az input elem értékét a 'value'-n keresztül, ha
kombináljuk a form.text1-el. Ha a bemeno string megegyezik a ""
karakterekkel, akkor nem írtunk be semmit. A felhasználó egy hibaüzenetet kap. Ha
valamit beírtunk, akkor egy ok üzenetet kapunk.
Problémát okoz, ha csak helyközöket írunk be. Ez érvényes bemenet. Ez
természetesen kizárható a leírt információk alapján.
Nézzük meg a test2(form) függvényt. Ez a függvény is összehasonlítja a
beirt stringet az üres stringgel. De irtunk még valamit az if parancsba. A || -t
OR-operátornak nevezzük. Ezzel már találkozhattunk a hatodik részben.
Az if parancs megnézi, hogy akár az elso, akár a második összehasonlítás igaz-e.
Ha bármelyik igaz, akkor a következo parancs lép életbe. Ez azt jelenti, hogy egy
hibaüzenetet kapunk, ha a string üres vagy nem tartalmaz @ jelet. Ha a string tartalmaz
@ jelet, akkor az if parancs másik muvelete lép életbe.
Karakterek meglétének ellenorzése
Néha szeretnénk korlátozni, hogy a formában beviheto karakterek betuk, vagy számok. Gondoljunk egy telefonszámra - a bemenet számokat tartalmaz (feltételezzük, hogy a telefonszám nem tartalmaz más karaktert). Ellenorizhetjük, hogy a bevitt adat vajon szám-e. De a legtöbb ember különbözo szimbólumokat használ a telefonszámában - például: 01234-56789, 01234/56789 vagy 01234 56789. Nem kényszeríthetjük a felhasználót, hogy ne írjon szimbólumokat a telefonszámába. Ezért ki kell bovíteni a scriptünket. Ezt mutatja meg a következo példa, amit a könyvembol vettem: ( JavaScript book)
A forráskód:
<html> <head> <script language="JavaScript"> <!-- hide // ****************************************************** // Script from Stefan Koch - Voodoo's Intro to JavaScript // http://rummelplatz.uni-mannheim.de/~skoch/js/ // JS-book: http://www.dpunkt.de/javascript // You can use this code if you leave this message // ****************************************************** function check(input) { var ok = true; for (var i = 0; i < input.length; i++) { var chr = input.charAt(i); var found = false; for (var j = 1; j < check.length; j++) { if (chr == check[j]) found = true; } if (!found) ok = false; } return ok; } function test(input) { if (!check(input, "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "/", "-", " ")) { alert("Input not ok."); } else { alert("Input ok!"); } } // --> </script> </head> <body> <form> Telefonszám: <input type="text" name="telephone" value=""> <input type="button" value="Ellenorzés" onClick="test(this.form.telephone.value)"> </form> </body> </html>
A test() függvény meghatározza, hogy melyik karakter érvényes:
Milyen lehetoségek vannak az adatok elküldésére?
Az adatokat legegyszerubben e-mail-en keresztül küldhetjük el. Ismerkedjünk meg egy
kicsit közelebbrol ezzel a módszerrel.
Ha szeretnénk, hogy a server kezelje a bevitt adatokat, akkor CGI (Common Gateway
Interface) használata szükséges. Ez lehetové teszi a bevitt adatok automatikus
feldolgozását. A server például felépíthet néhány vásárlótól kapott adatokból
egy adatbázist. Vagy például az index oldalak, mint a Yahoo. Általában rendelkeznek
valamilyen keresési algoritmussal, amivel az adatbázisukban kereshetnek. A felhasználó
gyorsan választ kap, miután megnyomta a gombot. Nem kell arra várni, amíg a szerver
karbantartói elolvassák a bemenetet és megkeresik a kért információt. A szerver ezt
automatikusan megcsinálja. A JavaScript nem tud ilyen dolgokat csinálni.
JavaScript segítségével nem készíthetünk vendégkönyvet (guestbook), mivel a
JavaScript nem képes egy server-en file-ba írni. Ezt csak CGI segítségével tehetjük
meg. Természetesen létrehozhatunk vendégkönyvet, ha e-mail-en keresztül küldik el.
Bár a visszajelzéseket manuálisan kell bevinni a vendégkönyvbe. Ez rendben van, ha
nem vársz 1000 visszajelzo levelet egy nap.
A következo script csak HTML nyelvet használ. JavaScript nem szükséges . Persze, ha
szeretnénk ellenorizni az input-ot mielott a formulát elküldjük szükségünk lesz
JavaScrip használatára. Fontos, hogy a mailto-parancs nem muködik mindenhol -
például a Microsoft Internet Explorer 3.0 nem támogatja.
<form method=post action="mailto:your.address@goes.here" enctype="text/plain"> Do you like this page? <input name="choice" type="radio" value="1">Not at all.<br> <input name="choice" type="radio" value="2" CHECKED>Waste of time.<br> <input name="choice" type="radio" value="3">Worst site of the Net.<br> <input name="submit" type="submit" value="Send"> </form>
Az enctype="text/plain" tulajdonságot akkor használjuk, ha sima szöveget küldünk kódolt részek nélkül. Ez könnyebbé teszi a levél elolvasását.
Ha validálni szeretnénk az adatokat mielott elküldodik, akkor használhatjuk az onSubmit eseménykezelot. Be kell raknunk ezt az eseménykezelot a <form> tagba. Ez így néz ki:
function validate() {
// az input ok-e?
// ...
if (inputOK) return true
else return false;
}
...
<form ... onSubmit="return validate()">
...
Ezzel a kóddal nem küldodik el a forma, ha nem helyes.
Fókuszáljunk egy meghatározott forma elemre
A focus() módszerrel egy kicsit felhasználóbaráttá lehet tenni a formát. Definiálhatjuk, hogy melyik elem van kezdetben a fókuszban. Azt is meghatározhatjuk, hogy csak arra a részre koncentráljon a böngészo, amelyik hibás volt. A böngészo a megfelelo forma elembe helyezi a kurzort; a felhasználónak nem kell a forma elemre kattintania mielott ki akarja tölteni. Ezt a következo script valósítja meg:
function setfocus() { document.first.text1.focus(); }
Ez a script az elozo példa elso szövegrészre fókuszálna. Meghatározhatjuk az egész forma nevét (itt first) és a single forma elem nevét (itt text1). Ha szeretnénk a fókuszt a betöltés kezdetétol érvényesíteni használjuk az onLoad tulajdonságot <body> tagban. Ez így néz ki:
<body onLoad="setfocus()">
A következo kóddal is kibovíthetjük:
function setfocus() { document.first.text1.focus(); document.first.text1.select(); }
Láthatjuk, hogy a szöveg elem kerül a fókuszba és kijelölodik az input.
Ejtsünk egy pár szót a kép objektumról, ami már a
JavaScript 1.1 verzióban is létezett. A kép objektum segítségével képeket
cserélhetünk egy web oldalon. Így készíthetünk animációkat is.
Régebbi böngészok használói nem tudják hasznosítani az itt leírtakat (Netscape
Navigator 2.0 vagy Microsoft Internet Explorer 3.0).
Eloször nézzük, hogyan tudunk megcímezni egy képet. Minden képet egy tömbben
(array) tárolunk. Ennek a tömbnek a neve: images. Ez a dokumentum-objektum egy
tulajdonsága. A web oldalon minden kép kap egy számot. Az elso kép az egyest, a
második a kettest stb. Az elso képet a document.images[0] parancson keresztül
cimezhetjük meg.
Egy HTML dokumentumban minden kép Kép-objektumnak tekintheto. Egy Kép-objektumnak
vannak bizonyos tulajdonságai. Megtudhatjuk például a kép méretét a width és
height tulajdonságok használatával. A document.images[0].width megadja az elso kép szélességét (pixelben).
Ha több kép van egy oldalon, nehéz a képek számozása. Ha nevet adunk a különbözo
képeknek, azzal megoldjuk a problémát. Ha egy képet a
<img src="img.gif" name="myImage" width=100 height=100>
taggal deklarálunk, akkor a document.myImage or document.images["myImage"]paranccsal megcimezhetjük.
Bár jó tudni, hogyan kapjuk meg egy kép méretét egy web oldalon, de nem ezt akarjuk tudni. Mi képeket akarunk változtatni egy web oldalon. Ehhez szükségünk van az src tulajdonságra. Az src tulajdonság a kép cimét képviseli. JavaScript 1.1 segitségével meg lehet határozni egy már betöltött kép cimét. Ennek eredményeként a képet az új cimen töltjük be. Ez az új kép kicseréli a régi képet a web oldalon. Nézzük a következo példát:
<img src="img1.gif" name="myImage" width=100 height=100>
Betöltjük az img1.gif képet és adunk egy nevet neki: myImage. A következo sor kicseréli az img1.gif képet az img2.gif -fel:
document.myImage.src= "img2.src";
Az új képnek mindig ugyanaz a mérete, mint a réginek. Nem változtathatjuk a méretet. Lehet tesztelni a következo példát a gomb lenyomásával. (Csak egyszer muködik) :
Egy nagy hátrány, hogy az új kép akkor kerül betöltésre, ha egy új címet rendelünk az src tulajdonsághoz. Mivel a kép nincs elore betöltve, egy kis idobe telik, amíg az új kép megérkezik az Interneten keresztül. Néhány esetben ez rendben van, de legtöbbször ezek a késések nem elfogadhatóak. Mit lehet ezzel kezdeni? Igen a kép újratöltése a megoldás. Egy új Kép objektumot kell készítenünk. Nézzük a következo sorokat:
hiddenImg= new Image(); hiddenImg.src= "img3.gif";
Az elso sor elkészíti az új Kép objektumot. A második sor definiálja a kép címét. Már láthattuk, hogy ha új címet rendelünk az src attribútumhoz, akkor a böngészo kénytelen lesz betölteni a képet, amelyikre a cím mutat. A img2.gif képet akkor töltjük be mikor a második sort hajtjuk végre. A kép nem jelenik meg miután a böngészo befejezte a betöltését. A memóriában tároljuk késobbi használatra. Ahhoz, hogy megjelenjen a kép a következo sort használhatjuk:
document.myImage.src= hiddenImg.src;
A képet elovesszük a memóriából és most már
azonnal megjelenik. Sikerült újratölteni a képet.
Természetesen a böngészonek be kellett fejeznie a kép újratöltését, hogy
megjelenítse azt késés nélkül. Tehát ha sok kép van, akkor késés lehetséges,
mert a böngészo le lehet terhelve a képek betöltésével. Figyelembe kell venni az
Internet sebességét is - a képek letöltése nem megy gyorsabban e kód
segítségével. Megpróbáljuk letölteni a képeket korábban - a felhasználó
korábban látja ezeket. Ezzel az egész folyamat simábban fut.
Ha gyors Internet elérésed van, akkor kíváncsi lehetsz mirol is beszélek. Nos van
aki 14.4 Mb/s modemet használ.
Képek váltogatása, felhasználó által indított események hatására
Szép effekteket kaphatunk, ha bizonyos események hatására képeket váltogatunk. Például képeket váltogathatunk, ha az egérkurzort a képernyo egy meghatározott területe fölé mozdítjuk. Próbáljuk ki a következo példát: mozgassuk az egérkurzort a kép fölé (hibaüzenetet kapuk, ha JavaScript 1.0 böngészot használunk):
A példa forráskódja:
<a href="#" onMouseOver="document.myImage2.src='img2.gif'" onMouseOut="document.myImage2.src='img1.gif'"> <img src="img1.gif" name="myImage2" width=160 height=50 border=0></a>
Ez a kód okozhat néhány problémát:
Most nézzünk meg egy teljes scriptet, amely megoldja
ezt a problémát.
Két követelmény van, amely rugalmassá teszi a scriptet:
Láthatjuk a kódot muködés közben:
<html> <head> <script language="JavaScript"> <!-- hide // ****************************************************** // Script from Stefan Koch - Voodoo's Intro to JavaScript // http://rummelplatz.uni-mannheim.de/~skoch/js/ // JS-book: http://www.dpunkt.de/javascript // You can use this code if you leave this message // ****************************************************** // ok, JavaScript böngészonk van var browserOK = false; var pics; // --> </script> <script language="JavaScript1.1"> <!-- hide // JavaScript 1.1 böngészo - oh yes! browserOK = true; pics = new Array(); // --> </script> <script language="JavaScript"> <!-- hide var objCount = 0; // number of (changing) images on web-page function preload(name, first, second) { // elore betöltjük a képeket és egy tömbbe rendezzük oket if (browserOK) { pics[objCount] = new Array(3); pics[objCount][0] = new Image(); pics[objCount][0].src = first; pics[objCount][1] = new Image(); pics[objCount][1].src = second; pics[objCount][2] = name; objCount++; } } function on(name){ if (browserOK) { for (i = 0; i < objCount; i++) { if (document.images[pics[i][2]] != null) if (name != pics[i][2]) { // set back all other pictures document.images[pics[i][2]].src = pics[i][0].src; } else { // show the second image because cursor moves across this image document.images[pics[i][2]].src = pics[i][1].src; } } } } function off(){ if (browserOK) { for (i = 0; i < objCount; i++) { // set back all pictures if (document.images[pics[i][2]] != null) document.images[pics[i][2]].src = pics[i][0].src; } } } // preload images - you have to specify which images should be preloaded // and which Image-object on the wep-page they belong to (this is the first // argument). Change this part if you want to use different images (of course // you have to change the body part of the document as well) preload("link1", "img1f.gif", "img1t.gif"); preload("link2", "img2f.gif", "img2t.gif"); preload("link3", "img3f.gif", "img3t.gif"); // --> </script> <head> <body> <a href="link1.htm" onMouseOver="on('link1')" onMouseOut="off()"> <img name="link1" src="link1f.gif" width="140" height="50" border="0"></a> <a href="link2.htm" onMouseOver="on('link2')" onMouseOut="off()"> <img name="link2" src="link2f.gif" width="140" height="50" border="0"></a> <a href="link3.htm" onMouseOver="on('link3')" onMouseOut="off()"> <img name="link3" src="link3f.gif" width="140" height="50" border="0"></a> </body> </html>
Ez a script minden képet egy pics tömbbe helyez. A kezdetkor meghívott preload() függvény építi fel ezt a tömböt. A preload() függvényt a következoképpen hívjuk meg:
preload("link1", "img1f.gif", "img1t.gif");
Ez azt jelenti, hogy a függvény betölti a img1f.gif
és img1t.gif képeket. Az elso képnek kell megjelennie, amikor az egérkurzor
nincs a kép területén. Mikor a felhasználó keresztülmozgatja az egérkurzort a kép
területén a második kép jelenik meg. A preload() függvény elso "img1"
argumentumával meghatározzuk, hogy a web oldalon melyik kép objektumhoz tartozik a két
elore betöltött kép. Ha megnézzük a példánk <body> részét találhatunk egy
képet, melynek neve img1. A kép nevét használjuk, hogy megváltoztassuk a
képek sorrendjét, anélkül, hogy megváltoztatnánk a scriptet.
A két függvényt (on() és off() ) az eseménykezelokön keresztül
hívjuk meg. Mivel a képek nem reagálnak a MouseOver és MouseOut eseményekre, egy
linket kell alkalmaznunk.
Az on() függvény visszaállit minden más képet. Ez fontos, mert elofordulhat,
hogy néhány kép ki van emelve. (Például a MouseOut esemény nem következik be, mikor
a felhasználó elmozdítja a kurzort a képrol az ablakon kívülre).
Képekkel természetesen megszépíthetjük a web oldalunkat. A Kép-objektummal igen bonyolult effektek készíthetok. De vegyük észre, hogy nem minden kép és JavaScript program javítja az oldalunkat. Ha internetezünk, láthatunk rengeteg példát, ahol szörnyen használják a képeket. Nem a képek mennyisége teszi széppé az oldalunkat, hanem a minoségük. Elég bosszantó letölteni egy 50 kB -os rossz minoségu képet. Ezt vedd figyelembe, mikor egy olyan oldalt tervezel amit szívesen fognak látogatni.
Ez a Netscape Navigator 4.0 új tulajdonsága. Ez
lehetové teszi objektumok, mint pl. kép-objektumok tetszoleges elhelyezését.
Emellett tudunk objektumokat mozgatni a HTML-oldalunkon. El is rejthetünk objektumokat.
A Rétegek könnyen kezelhetoek a JavaScript segítségével.
Rétegek csak Netscape Navigator 4.0 verzióval használhatóak ebben a pillanatban. Most sem részletezem a különbözo tagokat. A következo címen többet is megtudhatunk: http://home.netscape.com/comprod/products/communicator/index.html.
Mik azok a rétegek? Ez könnyen elmagyarázható:
vegyünk néhány darab papírt. Az egyikre írjunk egy szöveget. A másikra rajzoljunk
egy képet. A harmadikon írjunk szöveget a kép alá, stb. Most tegyük ezeket a
papírdarabokat egy táblára. Azt mondjuk, hogy minden papír egy réteg. Azt is
mondhatnánk, hogy egy réteg valamiféle tároló, mely objektumokat tartalmaz - itt
szöveget és képeket.
Vegyünk egy papírt, amin van egy kép. Mozgassuk körbe a táblán. Figyeljük, ahogy a
kép követi a papír mozgását. Ha elmozgatjuk a papírt jobbra, a kép követi. Mire
következtethetünk? Rétegek, amelyek különbözo objektumokat tartalmaznak - kép,
szöveg, stb.- elhelyezhetoek a HTML oldalon és mozgathatóak. Ha elmozdítunk egy
réteget, az összes rajta lévo objektum követni fogja a mozgását.
A Rétegek egymásra helyezhetok, úgy mint a papírlapok az asztalon. Minden rétegnek
lehet átlátszó része. Lyukasszunk ki egy lapot. Tegyük rá egy másik lapra. A lyuk
az átlátszó része az elso lapnak.
Egy réteg elkészítéséhez a <layer> vagy <ilayer> tagra van szükségünk. A következo tulajdonságokat használhatjuk:
name="layerName" | A réteg neve |
left=xPosition | A bal felso sarok horizontális pozíciója |
top=yPosition | A bal felso sarok vertikális pozíciója |
z-index=layerIndex | A réteg index száma |
width=layerWidth | A réteg szélessége pixelben |
clip="x1_offset, y1_offset, x2_offset, y2_offset" | Definiálja a réteg megjelenítendo részét |
above="layerName" | Melyik réteg felé kerüljön |
below="layerName" | Melyik réteg alá kerüljön |
Visibility=show|hide|inherit | A réteg láthatósága |
bgcolor="rgbColor" | A háttér színe - egy standard szín neve vagy RGB érték |
background="imageURL" | Háttér kép |
A <layer> tag segítségével a rétegeket el
lehet helyezni. Ha nem határozzuk meg a réteg helyét, akkor az ablak bal felso
sarkába helyezodik.
Az <ilayer> tag készít egy réteget, amelynek helye a dokumentum lefolyásától
függ. Kezdjük egy egyszeru példával. Két réteget akarunk készíteni. Az elso
rétegre teszünk egy képet, a másodikra egy szöveget. Amit el akarunk érni, hogy
megjelenjen a szöveg a kép alatt.
A szöveg megjelent a kép alatt. Íme a
forráskód:
<html> <layer name=pic z-index=0 left=200 top=100> <img src="img.gif" width=160 height=120> </layer> <layer name=txt z-index=1 left=200 top=100> <font size=+4> <i> Layers-Demo </i> </font> </layer> </html>
Látható, hogy két réteget definiáltunk a
<layer> taggal. Mindketto pozíciója 200/100 (a left és a top aránya).
Minden a <layer> és a </layer> tag között ehhez a réteghez tartozik.
Itt a z-index tulajdonságot használtuk. Ez azt definiálja, hogy milyen
sorrendben jelenjenek meg a rétegek. Vagyis meg tudjuk mondani a böngészonek, hogy a
szöveg a kép alá vagy felé kerüljön. A legmagasabb z-indexu réteg kerül a
képernyo tetejére. Nem kell 0-át vagy 1-et használnunk - minden pozitiv egész
megfelel.
Ha azt irjuk az elso <layer> tagba, hogy z-index=100 akkor a szöveg a kép
alá kerül - mivel a szövegrésznek kisebb a z-index száma. (z-index=1). Láthatjuk a
suöveget a képen, mert átlátszó háttért használunk. (gif89a formátum).
A szöveg a réteg alatt van.
Most a JavaScript segítségével hozzáférünk a
rétegekhez. Egy példával kezdünk: A felhasználó egy gomb lenyomására elrejthet,
vagy elohozhat egy réteget.
Eloször azt kell megtudnunk, hogyan jelenítsük meg a rétegeket a JavaScriptben.
Többféle lehetoség van. A legjobb lehetoség ha minden rétegnek adunk egy nevet. A
legjobb dolog az egészben az, hogy minden réteghez külön nevet rendelhetünk. Ha
definiálunk egy réteget:
<layer ... name=myLayer> ... </layer>
akkor hozzá tudunk férni a document.layers["myLayer"]
-en keresztül. Írhatnánk, hogy document.myLayer - de ez tönkreteszi a
böngészot. Ezt a problémát valószínuleg csak a preview verzió hibája és meg
fogják oldani a végleges változatban. Mi a document.layers["myLayer"]
- t használjuk.
Elérhetoek a rétegek egy egész indexen keresztül is. Ha hozzá akarunk férni a
legalsó réteghez, írjuk azt, hogy document.layers[0]. Vegyük észre,
hogy ez az index nem ugyanaz mint a z-index . Ha van két rétegünk (layer1 és layer2)
a 17 és 100 z-index számokkal, akkor a következot használjuk: document.layers[0]
és document.layers[1] , nem pedig: document.layers[17] és document.layers[100].
A következo példában egy gomb lesz, mely elrejt és megjelenít egy réteget. (Netscape Navigator 4.0 - vagy magasabb szükséges).
A forráskód:
<html> <head> <script language="JavaScript"> <!-- hide function showHide() { if (document.layers["myLayer"].visibility == "show") document.layers["myLayer"].visibility= "hide" else document.layers["myLayer"].visibility= "show"; } // --> </script> </head> <body> <ilayer name=myLayer visibility=show> <font size=+1 color="#0000ff"><i>This text is inside a layer</i></font> </ilayer> <form> <input type="button" value="Show/Hide layer" onClick="showHide()"> </form> </body> </html>
A gomb meghívja a showHide() függvényt.
Láthatjuk, hogy ez a függvény a myLayer Réteg-objektum visibility
tulajdonságát használja. A hozzárendeljük a "show" vagy "hide"
paramétereket a document.layers["myLayer"].visibility sorhoz,
elrejthetjük vagy elohozhatjuk a réteget. Jegyezzük meg, hogy "show"
és "hide" sztringek, így nem írhatjuk azt, hogy: document.layers["myLayer"].visibility=
show.
A <layer> tag helyett az <ilayer> tagot használtam, mert be akartam
illeszteni a réteget a dokumentum áramlásába.
A left és top tulajdonságok meghatározzák a réteg helyzetét. Adhatunk új értékeket ezeknek a tulajdonságoknak, hogy megváltoztassuk a réteg helyzetét. A következo sor a réteg vízszintes helyzetét állítja be:
document.layers["myLayer2"].left= 200;
Most programozni fogunk egy mozgó réteget - ez úgy néz ki mint egy scroller a böngészo ablakban.
A script a következo:
<html> <head> <script language="JavaScript"> <!-- hide function move() { if (pos < 0) direction= true; if (pos > 200) direction= false; if (direction) pos++ else pos--; document.layers["myLayer2"].left= pos; } // --> </script> </head> <body onLoad="setInterval('move()', 20)"> <ilayer name=myLayer2 left=0> <font size=+1 color="#0000ff"><i>This text is inside a layer</i></font> </ilayer> </body> </html>
Készítünk egy réteget (myLayer2). Látható,
hogy onLoad eseménykezelot használunk a <body> tagon belül. El kell
kezdeni réteg görgetését, amint az oldalt betöltöttük. A setInterval()
függvényt használjuk az onLoad eseménykezeloben. Ez egy új módszer a
JavaScript 1.2-ben. Újra és újra hívhatunk egy függvényt egy bizonyos
idointervallumon belül. Az elozo részben a setTimeout() függvényt
használtuk. A setInterval() majdnem ugyanígy muködik, de csak egyszer kell
meghívni.
A setInterval() függvénnyel minden 20 milliszekundumban meghívjuk a move()
függvényt. A move() függvény egy bizonyos pozícióba helyezi a réteget. Mivel
újra és újra meghívjuk ezt a függvényt a szöveg folyamatos görgetését kapjuk. A move()
függvényben mindössze ki kell számolnunk a réteg helyét és a document.layers["myLayer2"].left=
pos -hoz rendelni.
Ha az ehhez a részhez tartozó leírásban található forráskódot nézzük, észrevehetjük, hogy az én kódom egy kicsit különbözik. Beépítettem egy olyan részt, hogy a régebbi JavaScript böngészokkel rendelkezok ne kapjanak hibaüzenetet. Hogy lehet ezt elérni? A következo kód csak olyan böngészokön muködik, amelyek ismerik a JavaScript 1.2 verziót:
<script language="JavaScript1.2"> <!-- elrejtés document.write("JavaScript 1.2 verziót ismero böngészot használsz."); // --> </script>
Ez volt a problémánk az Image-objktumnál is. A kódot hasonló módon átírhatjuk. A browserOK változó beállítása megoldja a problémát.
A következo példa bemutatja a rétegek átfedését:
Korábban már szót ejtettünk az új réteg technikáról. Ez a rész a következo témákat érinti:
Meg tudjuk határozni, hogy a réteg mely része legyen látható. Ezen a területen kívül semmi sem lesz látható. Ezt kivágásnak nevezzük. A clip HTML tulajdonságot így használhatjuk:
<ilayer left=0 top=0 clip="20,50,110,120"> <img src="davinci.jpg" width=209 height=264> </ilayer>
(Megadjuk a left=0 és top=0
értékeket ,mivel az én Netscape verziómon (PR3 WinNT-n) problémák lépnek fel ha nem
adjuk meg ezeket az értékeket)
Bár a kép mérete 209x264 ,mégis csak egy kis részletet látunk belole:
Ennek a résznek a mérete 90x70 (pixelben). Az elso két érték (20,50) a kivágott rész bal felso sarkát határozza meg. A másik két érték a jobb alsó sarkot határozza meg. A következo kép ezt illusztrálja::
A JavaScript segítségével még több érdekes dolog végrehajtható. Megváltoztathatjuk a Réteg-objektum clip.left, clip.top, clip.right és clip.bottom értékeit. Csak adjunk egy új értéket valamelyiknek és a kivágott terület azonnal megváltozik. A következokben erre láthatunk egy példát. A felhasználónak az, az érzése, hogy a kép lassan áll össze.
Ime a kód:
<html> <head> <script language="JavaScript"> <!-- hide var middleX, middleY, pos; function start() { // kép méretét lekérjük var width= document.layers["imgLayer"].document.davinci.width; var height= document.layers["imgLayer"].document.davinci.height; // kiszámoljuk a kép k özépso pixelének helyét middleX= Math.round(width/2); middleY= Math.round(height/2); // starting position pos= 0; // start it! show(); } function show() { // növeljük a clipping area méretét pos+= 2; // step size document.layers["imgLayer"].clip.left= middleX- pos; document.layers["imgLayer"].clip.top= middleY- pos; document.layers["imgLayer"].clip.right= middleX+ pos; document.layers["imgLayer"].clip.bottom= middleY+ pos; // ellenorizzük, hogy az egész kép megjelent-e if (!((pos > middleX) && (pos > middleY))) setTimeout("show()", 20); } // --> </script> </head> <body> <ilayer name="imgLayer" clip="0,0,0,0"> <img name=davinci src="davinci.jpg" width=209 height=264> </ilayer> <form> <input type=button value="Start" onClick="start()"> </form> </body> </html>
<html> <head> <script language="JavaScript"> <!-- hide var middleX, middleY, pos; function start() { // kép méretét lekérjük var width= document.layers["imgLayer"].document.davinci.width; var height= document.layers["imgLayer"].document.davinci.height; // kiszámoljuk a kép középso pixelének helyét middleX= Math.round(width/2); middleY= Math.round(height/2); // starting position pos= 0; // indíts! show(); } function show() { // increase size of clipping area pos+= 2; // step size document.layers["imgLayer"].clip.left= middleX- pos; document.layers["imgLayer"].clip.top= middleY- pos; document.layers["imgLayer"].clip.right= middleX+ pos; document.layers["imgLayer"].clip.bottom= middleY+ pos; // ellenorizzük, hogy az egész kép megjelent-e if (!((pos > middleX) && (pos > middleY))) setTimeout("show()", 20); } // --> </script> </head> <body> <ilayer name="imgLayer" clip="0,0,0,0"> <img name=davinci src="davinci.jpg" width=209 height=264> </ilayer> <form> <input type=button value="Start" onClick="start()"> </form> </body> </html>
A <body>-rész végén meghívjuk start()
függvényt. Eloször meg kell határozni a kiindulási pozíciót- ez a kép középso
pixele. A middleX és middleY változókban eltároljuk a pixel x és
y értékeit. Aztán meghívjuk a show() függvényt. Ez a függvény
beállítja a kivágott részt a middleX, middleY és pos
változók szerint. A pos változó értéke a show() függvény minden
egyes meghívása után növekszik. Ez azt jelenti, hogy a kivágott rész mindig
növekszik. A show() után beállítunk egy idozítot a setTimeout() -
ehhez hasonlóan a show() függvényt újra és újra meghívjuk. Ez a folyamat
véget ér amint az egész kép megjelenik.
Jegyezzük meg jól, hogy hogyan lehet a kép méretét a start() függvényben
megkapni:
var width= document.layers["imgLayer"].document.davinci.width; var height= document.layers["imgLayer"].document.davinci.height;
A document.layers["imgLayer"] utasitással hozzáférhetünk az imgLayer -t. De miért használunk document-ot a document.layers["imgLayer"] után? Nos, minden réteg tartalmazza a saját HTML-oldalát - ez azt jelenti, hogy minden rétegnek van egy dokumentum objektuma. Ha szeretnénk elérni a képet azt imgLayer rétegen belül, akkor hozzá kell férni ehhez a dokumentum-objectumhoz. A kódban láthatjuk, hogy a kép neve davinci. A többi már tiszta.
Korábban már láttuk, hogy egy réteg tartalmaz
különbözo objektumokat. Megkérdezhetnénk, hogy ez mire jó. Több ok van a nested
layer-ek használatára. Tekintsünk néhány példát amelyek demonstrálják a
használatukat.
Az elso példa egy olyan réteget (szülo réteg) használ, amely további két
réteget tartalmaz. (layer1 és layer2)..
Ez a szülo réteg
Láthatunk három gombot. Ezek a rétegek fogják
elindítani és megállítani a rétegek mozgását. Láthatod, hogy a szülo réteg
mozgatása hatással van a másik két rétegre. De mondjuk a layer1 (vagy layer2)
mozgatása csak arra a rétegre van hatással. Ez demonstrálja, hogy hogyan
definiálhatunk objektum csoportokat nested layers segítségével.
Nézzük meg a forráskódot:
<html>
<head>
<script language="JavaScript">
<!-- hide
// starting position
var pos0= 0;
var pos1= -10;
var pos2= -10;
// moving?
var move0= true;
var move1= false;
var move2= false;
// direction?
var dir0= false;
var dir1= false;
var dir2= true;
function startStop(which) {
if (which == 0) move0= !move0;
if (which == 1) move1= !move1;
if (which == 2) move2= !move2;
}
function move() {
if (move0) {
// move parentLayer
if (dir0) pos0--
else pos0++;
if (pos0 < -100) dir0= false;
if (pos0 > 100) dir0= true;
document.layers["parentLayer"].left= 100 + pos0;
}
if (move1) {
// move parentLayer
if (dir1) pos1--
else pos1++;
if (pos1 < -20) dir1= false;
if (pos1 > 20) dir1= true;
document.layers["parentLayer"].layers["layer1"].top= 10 + pos1;
}
if (move2) {
// move parentLayer
if (dir2) pos2--
else pos2++;
if (pos2 < -20) dir2= false;
if (pos2 > 20) dir2= true;
document.layers["parentLayer"].layers["layer2"].top= 10 + pos2;
}
}
// -->
</script>
</head>
<body onLoad="setInterval('move()', 20)">
<ilayer name=parentLayer left=100 top=0>
<layer name=layer1 z-index=10 left=0 top=-10>
This is the first layer
</layer>
<layer name=layer2 z-index=20 left=200 top=-10>
This is the second layer
</layer>
<br><br>
This is the parent layer
</ilayer>
<form>
<input type="button" value="Move/Stop parentLayer"
onClick="startStop(0);">
<input type="button" value="Move/Stop layer1"
onClick="startStop(1);">
<input type="button" value="Move/Stop layer2"
onClick="startStop(2);">
</form>
</body>
</html>
Látható, két réteget definiáltunk szülo rétegen belül. Ezek a nested layer-ek. Hogyan is érhetjük el ezekre a rétegeket JavaScript segítségével? Láthatjuk, hogy hogyan muködik ez a move() függvényben:
document.layers["parentLayer"].left= 100 + pos0; ... document.layers["parentLayer"].layers["layer1"].top= 10 + pos1; ... document.layers["parentLayer"].layers["layer2"].top= 10 + pos2;
A nested layer-ek elérése érdekében nem elég csak document.layers["layer1"] vagy document.layers["layer2"] parancsokat használni, mert a layer1 és layer2 rétegek a szülo rétegen belül találhatók.
Már láthattuk, hogy hogyan definiálhatunk kivágott
régiót. A következo példában egy kivágott részt és egy mozgó képet használunk.
A kivágott részt akarjuk fixálni - hogy ne kövesse a kép mozgását.
Nyomd le ezt a gombot, hogy betöltsd a példát:
Itt a forráskód:
<html> <head> <script language="JavaScript"> <!-- hide var pos= 0; // starting position var direction= false; function moveNclip() { if (pos<-180) direction= true; if (pos>40) direction= false; if (direction) pos+= 2 else pos-= 2; document.layers["clippingLayer"].layers["imgLayer"].top= 100 + pos; } // --> </script> </head> <body onLoad="setInterval('moveNclip()', 20);"> <ilayer name="clippingLayer" z-index=0 clip="20,100,200,160" top=0 left=0> <ilayer name="imgLayer" top=0 left=0> <img name=davinci src="davinci.jpg" width=209 height=264> </ilayer> </ilayer> </body> </html>
Újból láthatjuk, hogy hogyan férhetünk hozzá a nested layerekhez.
document.layers["clippingLayer"].layers["imgLayer"].top= 100 + pos;
Érdekes effektek készíthetok átlátszó rétegek
segítségével. Foképp az átlátszó réteszeket tartalmazó képek néznek ki jól.
Nem minden képformátum tudja kezelni az átlátszó részeket. Most a legjobb formátum
a gif89a. A legtöbb új grafikus program ezt támogatja. Az Interneten freeware toolokat
is találhatunk
A PNG formátum szintén támogatja az átlátszó részeket. Azt hiszem lesz egy pár
oldal a jövoben ami ezt a formátumot fogja támogatni. (mivel a legtöbb böngészo
ezt támogatja). Sok elonye van a gif formátummal szemben.
Tekintsük a következo példát
Ez a példa ezt a két képet használja (A háttérszín miatt láthatóak az átlátszó részek):
|
|
A script nem különbözik a többi példától - így nem fogom ide nyomtatni (természetesen megnézhetjük a forráskódot a 'View document source' pontot választva).
Láthatsz még további példákat a http://www.dpunkt.de/javascript/ címen).
11. Rész: JavaScript 1.2 eseménymodell
Itt az ideje, hogy megismerkedjünk a Netscape Navigator 4.x egyik új tulajdonságával: a JavaScript 1.2 eseménymodelljével. A bemutatásra kerülo példák csak Netscape Navigator 4.x -en muködnek.
A következo eseményeket támogatja a JavaScript 1.2 (A Netscape's JS 1.2 documentation címen több is található ezekrol az eseményekrol):
Abort | Focus | MouseOut | Submit |
Blur | KeyDown | MouseOver | Unload |
Click | KeyPress | MouseUp | |
Change | KeyUp | Move | |
DblClick | Load | Reset | |
DragDrop | MouseDown | Resize | |
Error | MouseMove | Select |
Találkozhatunk jó néhány új eseménnyel. Ebben a részben jobban megismerhetünk
pár eseményt.
Eloször nézzük mire jó az Újraméretez (Resize) esemény. Ennek segítségével
észlelni tudjuk, ha az ablakot újraméreteztük. A következo script ezt mutatja meg:
<html> <head> <script language="JavaScript"> window.onresize= message; function message() { alert("The window has been resized!"); } </script> </head> <body> Please resize the window. </body> </html>
A
window.onresize= message;
sorral definiáljuk az eseménykezelot. Ez azt jelenti, hogy amikor az ablakot újraméretezzük, akkor meghívjuk a messaga() függvényt. Talán nem ismered az eseménykezeloknek ezt a fajta definiálását. Például ha van egy gomb objektumunk az eseménykezelot a következoképpen definiáljuk.
<form name="myForm"> <input type="button" name="myButton" onClick="alert('Click event occured!')"> </form>
De ezt is írhatjuk:
<form name="myForm"> <input type="button" name="myButton"> </form> ... <script language="JavaScript> document.myForm.myButton.onclick= message; function message() { alert('Click event occured!'); } </script>
Talán azt gondolnánk, hogy a második alternatíva egy kicsit bonyolultabb. Az
elsovel az a probléma, hogy az ablak objektum nincs definiálva egy bizonyos tag - en
belül, így a második változatot kell használnunk.
Két fontod dolog: Eloször is nem szabad azt írnunk, hogy window.onResize. A
második, hogy nem szabad zárójeleket raknunk az üzenet mögé. Ha azt írjuk, hogy „window.onresize=
message()" , a böngészo a „message()" -et függvényként
értelmezi. De ebben az esetben mi nem akarjuk a függvényt közvetlenül hívni - mi
csak az eseménykezelot akarjuk definiálni.
Az esemény objektum (Event object)
Egy új eseménykezelot adtunk a JavaScript 1.2 -höz. Ez tulajdonságokat tartalmaz,
amelyek leírnak egy eseményt. Mindig mikor egy esemény bekövetkezik, egy esemény
objektum adódik az eseménykezelohöz.
Ha Netscape Navigator 4.x -et használsz és a következo képen valahova rákattintasz,
egy figyelmezteto ablak jelenik meg és kijelzi az egér esemény koordinátáit:
Íme a forráskód:
<layer> <a href="#" onClick="alert('x: ' + event.x + ' y: ' + event.y); return false;"> <img src="davinci.jpg" width=209 height=264 border=0></a> </layer>
Láthatjuk, hogy az onClick eseménykezelot használjuk az <a> tag -
ban, mint a korábbi JavaScript verziókban. What is new is that we use event.x and
event.y for creating the output in the alert window. Ez az esemény objektum, amire azért
van szükség, hogy megkapjuk az esemény egér koordinátáit.
Mindent <layer> tagon belulre tettem. Így meg fogjuk kapni a rétegre vonatkozó
koordinátákat, vagyis a képet. Máskülönben a böngészo ablakra vonatkozó
koordinátákat kapnánk meg.
(return false; utasitást úgy használjuk, hogy a böngészo nem követi a
linket)
Az esemény objektumnak a következo tulajdonságai vannak:
Tulajdonság | Magyarázat |
---|---|
data | DragDrop esemény során elengedett objektumok URL tömbje. |
layerX | A kurzor vízszintes pozíciója pixelben a rétegre vonatkoztatva. Az újraméretez eseménnyel együtt ez a tulajdonság a böngészo ablak szélességét jelenti. |
layerY | A kurzor függoleges pozíciója pixelben a rétegre vonatkoztatva. Az újraméretez eseménnyel együtt ez a tulajdonság a böngészo ablak magasságát jelenti. |
modifiers | A módositó billentyuket meghatározó string - ALT_MASK, CONTROL_MASK, META_MASK or SHIFT_MASK |
pageX | A kurzor vízszintes pozíciója pixelben a böngészo ablakra vonatkoztatva. |
pageY | A kurzor függoleges pozíciója pixelben a böngészo ablakra vonatkoztatva. |
screenX | A kurzor vízszintes pozíciója pixelben a képernyore vonatkoztatva. |
screenY | A kurzor függoleges pozíciója pixelben a képernyore vonatkoztatva. |
target | Azt az objektumot reprezentáló string ahová az eseményt eredetileg küldtük. |
type | Az esemény tipusát reprezentáló string. |
which | A leütött gomb ASCII-értéke vagy a leütött egérgomb száma. |
x | Szinoním a layerX-el |
y | Szinoním a layerY-al |
Egy fontos tulajdonság az event capturing. Ha valaki rákattint egy gombra, akkor
meghivja a gomb onClick eseménykezelojét. With the help of event capturing you
can achieve that your window, document or layer object captures the event before it is
being handled by the button object. Like this your window, document or layer object can
handle the event before it reaches its intended target.
Nézzünk egy példát, hogy mire is jó ez:
<html> <head> <script language="JavaScript"> window.captureEvents(Event.CLICK); window.onclick= handle; function handle(e) { alert("The window object captured this event!"); return true; // i.e. follow the link } </script> </head> <body> <a href="test.htm">Click on this link</a> </body> </html>
Látható, hogy nem definiálunk eseménykezelot az <a> tag -on belül. Helyette azt használjuk, hogy :
window.captureEvents(Event.CLICK);
in order to capture the Click event through the window object.Normális esetben
az ablak objektum nem ismeri a Click eseményt. But through capturing the event
we can redirect it to the window object.
Ügyeljünk az Event.CLICK írására. A CLICK betuit mindig nagybetuvel kell írni. If
you want to capture several events you'll have to separate them through a | - for example:
window.captureEvents(Event.CLICK | Event.MOVE);
Láthatjuk, hogy a handle() függvény helyett a return true; parancsot használjuk, amit eseménykezelo függvényként definiáltunk. Ez azt jelenti, hogy a böngészo követi a linket, miután a handle() függvény végrehajtódott. Ha return false; parancsot íruk helyette, akkor az összes következo eseményt elnyomja.
Ha egy onClick eseménykezelot definiálunk az <a> tagban akkor észre fogjuk venni, hogy ezt az eseménykezelot nem hívtuk meg. Ez nyilvánvaló, mivel az ablak objektum captures az eseményt mielott eléri a link objektumot. Ha így definiáljuk a handle() függvényt
function handle(e) { alert("The window object captured this event!"); window.routeEvent(e); return true; }
a számítógép ellenorzi, hogy vannak e más eseménykezelok ehhez az objektumhoz definiálva. Az „e" változó a mi eseményobjektumunk, amit az eseménykezelo függvényhez adtunk.
Küldhetünk egy bizonyos eseményt közvetlenül is egy bizonyos objektumhoz. Erre a célra használhatjuk a handleEvent() módszert. Ez így néz ki:
<html> <script language="JavaScript"> window.captureEvents(Event.CLICK); window.onclick= handle; function handle(e) { document.links[1].handleEvent(e); } </script> <a href="test.htm">Click on this link</a><br> <a href="test.htm" onClick="alert('Event handler of second link!');">Second link</a> </html>
Az összes Click esemény a második linkre küldödik - akkor is ha nem kattintunk közvtlenül a linkekre!
A következo script bemutatja, hogy a script reagálhat gomblenyomás eseményekre (key events).Csak üssünk le egy gombot, hogy muködés közben láthassuk a script-et.
<html> <script language="JavaScript"> window.captureEvents(Event.KEYPRESS); window.onkeypress= pressed; function pressed(e) { alert("Key pressed! ASCII-value: " + e.which); } </script> </html>
Mi is az a drag & drop?
Az új JavaScript 1.2 eseménymodellje és a rétegek
segítségével végrehajthatjuk a drag & drop-ot a web-lapunkon. Ehhez a Netscape
Navigator 4.0-ás változatára lesz szükségünk, hogy használjuk a JavaScript 1.2-es
tulajdonságait.
Mi is az a drag & drop? Néhány operációs rendszer (mint a Win95/NT vagy a MacOS) megengedi a file-ok törlését, a lomtárba elejtett ikonok által. Ráklikkelhetünk egy file ikonjára, elmozgathatjuk (azaz az egér gombját lenyomva tartjuk, míg az egeret mozgatjuk) az ikont a lomtárhoz, és "kipottyanthatjuk" oda a file-t.
A drag & drop, amelyet itt akarunk végrehajtani,
csak az adott web-lapra korlátozódik. Tehát, nem használhatjuk ezt az utasítást egy,
a HTML-oldalon levo objektum hard diskre történo mozgatásához.
Az erre vonatkozó példát a következo címen: http://home.netscape.com/comprod/products/communicator/user_agent_vacation.html
kipróbálhatjuk.
A JavaScript nem támogatja a drag & drop-ot közvetlenül, ezt a kódot saját magunknak kell megírnunk. A késobbiekben láthatjuk, ez nem túl bonyolult.
Nos, mire van szükségünk? Két dologra: az elso az,
hogy bizonyos egéreseményeket regisztrálni kell (azaz, hogyan hívjuk, melyik eseményt
hová kell mozgatni) . Ehhez ki kell találnunk, hogyan jeleníthetjük meg a mozgó
objektumokat a képernyon. Természetesen egy új rétegjellemzot fogunk használni a
különbözo objektumok definiálására és a képernyon való mozgatására. Minden
objektumot a saját rétege ábrázol.
Egér-események a JavaScript 1.2 -ben
Mely egér-eseményeket (Mouse Event) kell használnunk? Bár nincs MouseDrag eseményünk, de megvalósíthatjuk azt a MouseDown, MouseMove és MouseUp eseményekkel. A JavaScript 1.2 egy új eseménymodellt használ. Ezen eseménymodellek nélkül nem tudnánk megoldani a feladatunkat. Az elozo fejezetben már beszéltünk néhány új eseménymodellrol. Nézzük ismét meg a fontos részeket.
A felhasználó megnyomja az egér gombját valahol a böngészo ablakon belül. Az alábbi script feldolgozza ezt az egér-eseményt, és kiszámítja, melyik objektumon (azaz rétegen) belül történt az esemény. Ehhez ismernünk kell az egér-eseményre vonatkozó koordinátákat (más információkkal együtt) .
Egy másik fontos dolog az ún. esemény elfogadás.
Ha a felhasználó pl. ráklikkel egy gombra, az egér-eseményt közvetlenül
küldi el a gomb objektumhoz. Ha azt szeretnénk, hogy az ablak kezelje az eseményünket,
akkor hagyjuk, hogy az ablak-objektum fogadja és befolyásolja ezt az eseményt. A
következo példában (a Click eseményt használjuk) bárhová kattintva a böngészo
ablakán belül, egy ablak jelenik meg, mely az egér-esemény koordinátáit
tartalmazza:
Íme a kód a példához:
<html>
<script language="JavaScript">
<!--
window.captureEvents(Event.CLICK);
window.onclick= displayCoords;
function displayCoords(e) {
alert("x: " + e.pageX + " y: " + e.pageY);
}
// -->
</script>
Klikkelj valahova a böngészo ablakán belül!
</html>
Eloször megmondjuk az ablak objektumnak, hogy fogadja
el a Click eseményt. A captureEvent() eljárást használjuk erre a célra. A window.onclick=
displayCoords; sor definiálja, hogy mi történik, ha a Click esemény
elofordul. Megmondja a böngészonek, hogy hívja meg a displayCoords() fügvényt
válaszul a Click eseményre (ebben az esetben nem kell használni a zárójelet a displayCoords
mögött) . A displayCoords() függvény a következoképpen definiálható:
function displayCoords(e) {
alert("x: " + e.pageX + " y: " + e.pageY);
}
Láthatjuk, hogy ez a függvény egy argumentummal
rendelkezik (amit 'e'-nek hívunk) . Ez az Eseményobjektum, amely a displayCoords()
függvényhez kapcsolódik. Az eseményobjektum rendelkezik a pageX illetve a pageY
tulajdonságokkal (más tulajdonságok mellett) , amelyek az egéresemények
koordinátáit reprezentálják. A riadóablak ezeket az értékeket mutatja.
MouseDown, MouseMove és MouseUp
Amint azt már említettük, a JavaScript nem ismeri a MouseDrag
eseményt. Ezért kell használnunk a MouseDown, MouseMove és MouseUp
eseményeket, hogy végrehajthassuk a drag & drop muveleteket. A következo példa
az MouseMove használatát mutatja. Az egér kurzorának aktuális koordinátái az
állapotsávban jelennek meg.
Láthatjuk, hogy a kód hasonlít az elozohöz:
<html>
<script language="JavaScript">
<!--
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove= displayCoords;
function displayCoords(e) {
status= "x: " + e.pageX + " y: " + e.pageY;
}
// -->
</script>
Az egér koordinátái a státuszsorban láthatók.
</html>
Figyeljük meg az Event.MOUSEMOVE írásmódját:
a MOUSEMOVE-ot nyomtatott nagybetuvel kell írni. Amikor azt definiáljuk, hogy
melyik függvényt kell meghívni a MouseMove esemény elofordulásakor, akkor
kisbetut kell használni: window.onmousemove=...
Most kombinálhatjuk a két utóbbi példát: azokat a
koordinátáit jelenítjük meg az egérnek, amikor azt lenyomott egérgombbal mozgatjuk.
A példához tartozó kód:
<html>
<script language="JavaScript">
<!--
window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
window.onmousedown= startDrag;
window.onmouseup= endDrag;
window.onmousemove= moveIt;
function startDrag(e) {
window.captureEvents(Event.MOUSEMOVE);
}
function moveIt(e) {
// koordináták megjelenításe
status= "x: " + e.pageX + " y: " + e.pageY;
}
function endDrag(e) {
window.releaseEvents(Event.MOUSEMOVE);
}
// -->
</script>
Nyomjuk le az egér gombját, és mozgassuk az egeret.
A koordináták a státuszsorban láthatók.
</html>
Eloször is az ablak objektumnak megmondjuk, hogy fogadja a MouseDown és MouseUp
eseményeket:
window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
Láthatjuk, hogy a | jelet használtuk azért, hogy
definiáljunk néhány eseményt, amelyet el kell fogadnia az ablak objektumnak. A
következo két sor definiálja, mi történik, ezen események bekövetkezésekor:
window.onmousedown= startDrag;
window.onmouseup= endDrag;
Az ablak-objektumnak a következoképp adjuk át a MouseMove eseményt:
window.onmousemove= moveIt;
Nem definiáltuk az Event.MOUSEMOVE-ot a window.captureEvents()
függvényben! Ezt az eseményt az ablak objektum nem fogadja el. Nos, miért kell
mondanunk az ablak objektumnak, hogy hívja meg a moveIt() függvényt, pedig ez az
esemény soha nem éri el az ablak objektumot ? A válasz a kérdésre a startDrag()
függvényben található, amely rögtön meghívódik a MouseDown esemény
bekövetkezésekor:
function startDrag(e) {
window.captureEvents(Event.MOUSEMOVE);
}
Ez azt jelenti, hogy az ablak objektum elfogadja a MouseMove
eseményt, mihelyt az egér gombját lenyomjuk. Meg kell állítanunk a MouseMove
esemény elfogadását, amikor a MouseUp esemény bekövetkezik. Ezt végzi az endDrag()
függvény a releaseEvents() eljárás segítségével:
function endDrag(e) {
window.releaseEvents(Event.MOUSEMOVE);
}
A moveIt() függvény az egér koordinátáit
írja ki a státuszsor.
Most már minden elemünk megvan az események
regisztrálásához, amely a drag & drop végrehajtásához szükséges.
Rátérhetünk az objektumok képernyon való megjelenítésére.
Mozgó objektumok
megjelenítése
Az elozo fejezetben már láthattuk, hogy a rétegek segítségével mozgó objektumokat állíthatunk elo. Már csak annyit kell megtennünk, hogy regisztráljuk, melyik az az objektum, amelyre a felhasználó ráklikkelt. Ekkor, ennek az objektumnak követnie kell az egérmozgásokat. Íme a kód, melyet a fejezet elején láttunk:
<html>
<head>
<script language="JavaScript">
<!--
var dragObj= new Array();
var dx, dy;
window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
window.onmousedown= startDrag;
window.onmouseup= endDrag;
window.onmousemove= moveIt;
function startDrag(e) {
currentObj= whichObj(e);
window.captureEvents(Event.MOUSEMOVE);
}
function moveIt(e) {
if (currentObj != null) {
dragObj[currentObj].left= e.pageX - dx;
dragObj[currentObj].top= e.pageY - dy;
}
}
function endDrag(e) {
currentObj= null;
window.releaseEvents(Event.MOUSEMOVE);
}
function init() {
// mozgatható ( 'dragable') rétegek definiálása
dragObj[0]= document.layers["layer0"];
dragObj[1]= document.layers["layer1"];
dragObj[2]= document.layers["layer2"];
}
function whichObj(e) {
// ellenorizzük, melyik objektumot értük el
var hit= null;
for (var i= 0; i < dragObj.length; i++) {
if ((dragObj[i].left < e.pageX) &&
(dragObj[i].left + dragObj[i].clip.width > e.pageX) &&
(dragObj[i].top < e.pageY) &&
(dragObj[i].top + dragObj[i].clip.height > e.pageY)) {
hit= i;
dx= e.pageX- dragObj[i].left;
dy= e.pageY- dragObj[i].top;
break;
}
}
return hit;
}
// -->
</script>
</head>
<body onLoad="init()">
<layer name="layer0" left=100 top=200 clip="100,100" bgcolor="#0000ff">
<font size=+1>Object 0</font>
</layer>
<layer name="layer1" left=300 top=200 clip="100,100" bgcolor="#00ff00">
<font size=+1>Object 1</font>
</layer>
<layer name="layer2" left=500 top=200 clip="100,100" bgcolor="#ff0000">
<font size=+1>Object 2</font>
</layer>
</body>
</html>
Láthatjuk, hogy három réteget definiáltunk a
HTML-lap <body> részében. Az egész lap után az init()-nek nevezett
függvény töltodik be a <body> tag-ben szereplo onLoad eseménykezelo
segítségével:
function init() {
// mozgatható ('dragable') réteg definiálása
dragObj[0]= document.layers["layer0"];
dragObj[1]= document.layers["layer1"];
dragObj[2]= document.layers["layer2"];
}
A dragObj elrendezés tartalmazza az összes réteget, amelyet a felhasználó mozgathat. Minden réteg kap egy számot a dragObj elrendezésben. Erre a számra késobb lesz szükségünk.
Láthatjuk, hogy ugyanazokat a kódokat használjuk, mint ahogy föntebb láthattuk, azért, hogy elfogadjuk az egéreseményeket:
window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
window.onmousedown= startDrag;
window.onmouseup= endDrag;
window.onmousemove= moveIt;
A következo sort csatoltuk a startDrag()
függvényhez:
currentObj= whichObj(e);
A whichObj() definiálja, hogy a felhasználó
melyik objektumra kattintott rá, és a rétegszámmal tér vissza. Ha nincs olyan réteg,
amelyet eltalált, a visszatérési érték nulla. A currentObj változó tárolja
ezt a rétegszámot, vagy a nullát. A currentObj mutatja azoknak a rétegeknek a
számát, amelyek az adott pillanatban mozognak (vagy nulla, ha nincs mozgó réteg) .
A whichObj() függvényben ellenorizzük a left,
top, width és height tulajdonságokat minden egyes rétegre. Ezeknek
az értékeknek a segítségével ellenorizhetjük, melyik objektumra kattintott a
felhasználó.
"Eldobható"
(dropping) objektumok
A drag & drop eseményekrol a korábbiakban már szóltunk. Nézzük meg az objektumok mozgatásának mechanizmusát. Tegyük fel, hogy egy online üzletet szeretnénk nyitni., ahol számos árucikket rakhatunk a bevásárlókosárba. A felhasználónak kell ezeket a cikkeket a bevásárlókosárhoz mozgatni és "bepottyantani" oda. Tehát regisztrálni kell , amikor a felhasználó belepottyant egy objektumot a kosárba - vagyis meg akarja azt venni.
Mely kódrészletet kell megváltoztatni, hogy
végrehajthassuk ezt ? Ellenoriznünk kell, melyik pozícióban van az objektum a MouseUp
esemény után - azaz néhány kódot hozzá kell tenni az endDrag() függvényhez.
Például ellenorizhetjük, hogy az egér-esemény koordináták egy bizonyos
derékszögu négyszögön belül helyezkednek-e el. True visszatérési érték
esetén, meghívhatunk egy függvényt, amely regisztrálja az összes cikket, amit
vásároltunk (sorrendben is beletehetjük a cikkeket) . Ezután megmutathatunk egy cikket
a bevásárlókosáron belül.
Számos lehetoség kínálkozik scriptünk tökéletesítésére. Az elso: megváltoztathatjuk a rétegek sorrendjét, mihelyt a felhasználó ráklikkel egy objektumra. Máskülönben igencsak meglepodhetünk, ha az objektumot mozgatva az eltunik egy másik objektum mögött. A problémát megoldhatjuk a startDrag() függvényen belül, a rétegek sorrendjének változtatásával.
Nem kell me. V?;"i( , zöld és kék dobozok rakosgatásával a web-lapon. Már néhány fantasztikus grafika hozzácsatolásával is emlékezni fognak a felhasználók a web-lapunkra. Ha azt szeretnénk, hogy az objektum képként jelenjék meg, egy egyszeru <img> tag alkalmazásával ezt elérhetjük.