B EVEZETÉS A J AVA S CRIPT
P ROGRAMOZÁSBA
1 Első lépések
  • Mi is a JavaScript?
  • A JavaScript nem Java!
  • A JavaScript futtatása
  • JavaScript beillesztése HTML-oldalakba
  • Böngészok JavaScript nélkül
  • Esmények (Events)
  • Függvények
2 A HTML-dokumentum
  • JavaScript hierarhia
  • Az Elhelyezkedés-objektum
3 Frémek
  • Frémek készitése
  • Frémek és a JavaScript
  • A Navigationbar
4 Ablakok és on-the-fly dokumentumok 
  • Ablakok létrehozása
  • Ablakok elnevezése
  • Ablakok bezárása
  • Dokumentumok on-the-fly létrehozása
  • VRML on-the-fly
5 Statusbar and timeouts
  • A statusbar
  • Idozitok
  • Scroller
6 Előre definiált objektumok
  • A Dátum-objektum
  • Az Elrendezés-objektum
  • Elrendezések JavaScript 1.0-val
  • A Matematikai-objektum és a véletlen számok
7 Formák
  • Az input validálása
  • Karakterek meglétének ellenorzése
  • Bevitt adatok elküldése
  • Fókuszáljunk egy meghatározott forma elemre
8 Az Image-objektum
  • Képek a web oldalon
  • Új képek betöltése
  • Elore betöltött képek
  • Képek változtatása a felhasználó által eloidézett eseményeknél
9 Rétegek I
  • Mik a rétegek?
  • Rétegek létrehozása
  • Rétegek és a JavaScript
  • Rétegek mozgatása

10

Rétegek II
  • Kivágás
  • Nested layers
  • Effektek átlátszó rétegekkel
11 JS 1.2 esemény model
  • Új események
  • Esemény objetum
  • Event capturing

12

Drag & drop  
  • Mi a drag & drop?
  • Egér események és a JavaScript 1.2
  • MouseDown, MouseMove és MouseUp
  • Mozgó objektumok megjelenítése
  • "Eldobható" (dropping) objektumok
  • További fejlesztések

 

 


B EVEZETÉS A J AVA S CRIPT
P ROGRAMOZÁSBA



1. Rész: Elso lépések

Mi is a JavaScript?

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.

A JavaScript nem Java!

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).

Események (Events)


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.

Függvények

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.

VISSZA




2. Rész: A HTML dokumentum

JavaScript hierarhia

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 elhelyezkedés objektum

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>

VISSZA



3. Rész: Frames

Frémek készítése

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).

Frémek és a JavaScript

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.");


A Navigationbar

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.

 

VISSZA



4. Rész: Ablakok és on-the-fly dokumentumok

Ablakok létrehozása

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


Ablakok elnevezése

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.

Ablakok bezárása

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á.

VISSZA


5. Rész: A Statusbar és az idozítok

A statusbar

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 ).

Idozítok

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).

Scroller

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.

VISSZA


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.

Ido :
Dátum :

Í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



VISSZA


7. Rész: Formák (Forms)

Az input validásása

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.

Írd be a neved:

Írd be az e-mail címed:

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)

Telefonszám:

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:

Bevitt adatok elküldése

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.


VISSZA


8. Rész: A kép objektum

Képek a web oldalon

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.

Új képek betöltése

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) :

Elore betöltött képek

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:


Nézzük a forráskódot:

<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.



VISSZA


9. Rész: Rétegek I

Mik azok a rétegek?

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.

Rétegek létrehozása

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.

 

Rétegek és a JavaScript

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).

Ez a szöveg egy rétegen belül van.

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.

Rétegek mozgatása

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.

Ez a szöveg egy rétegen belül van.

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:

Ez egy rétegen belül van

 

 



VISSZA


10. Rész: Rétegek II

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:

Kivágás

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.

Nested layers

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 az elso réteg Ez a második réteg

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;

Effektek átlátszó rétegekkel

É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).

 


VISSZA



11. Rész: JavaScript 1.2 eseménymodell

 

Új események

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

Event capturing

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>

VISSZA


12. Rész: Drag & Drop

 

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.

További fejlesztések

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.

VISSZA