JavaScript objektumok

A JavaScript a HTML-hez hasonlóan egyszerű szöveges információ, valamint interpretált és nem végrehajtott nyelv, ami azt jelenti, hogy a forrássorokat a böngésző futás közben értelmezi és hajtja végre, lépésről lépésre. Így nincs szükség előzetes fordításra.

A JavaScript legnagyobb előnye, hogy interaktívvá teszi oldalainkat és tehermentesíti a kiszolgálót és a közbülső hálózatot, ugyanis megosztja az erőforrásokat a kiszolgáló és az ügyfél között. Például egy HTML oldalon található űrlap adatait kell kiértékelnünk. Ezt eddig mindig a kiszolgáló oldalon futó CGI programnak kellett elvégeznie. Sok esetben a feldolgozás egy részét elvégezheti a böngészőben futó JavaScript program is, ami csak az ügyfél gépet terheli. Ez viszont nem jelenti, hogy a JavaScript teljesen átveszi a CGI programok helyét.

JavaScript kódot kétféleképpen helyezhetjük el a HTML forrásban:

<SCRIPT> … </SCRIPT> HTML tag-ek között

-Eseménykezelőként más HTML tag-ek paramétereként.

A <SCRIPT> tag szintaxisa:

            <SCRIPT language="Script nyelv azonosítója">

            Script forrásszöveg

      </SCRIPT>

 

Ez az általános szintaxis nem JavaScript nyelvű kódrészek beillesztésére alkalmas, hanem például lehet az "VBscript" is. JavaScript esetén a nyelv azonosítója helyére a "JavaScript" szót írjuk.

Objektumok

Az objektum egy olyan struktúra a JavaScriptben, ami tulajdonságokból (elemváltozók) és metódusokból (elemfüggvények) épülnek fel. A tulajdonságok adják meg egy objektum állapotát.

Egy adott objektum elemváltozójára a következőképpen hivatkozunk: objektumnév.változónév

A JavaScript lehetőséget nyújt saját és beépített objektumok használatára.

Saját objektumokat a következőképpen definiálhatunk:

- Az objektum típusát megadjuk egy függvényen keresztül

- Az így definiált típus alapján objektum példányokat a new konstruktorral hozhatunk létre

A JavaScriptben számos beépített objektum is van, ezek legnagyobb része a HTML dokumentum egy-egy elemét reprezentálja, például űrlap mezőket, gombokat, linkeket.

Ilyen beépített objektumok például a következők:

Window

Az aktuális ablak az alapértelmezett objektum, ezért nem szükséges kiírnunk a nevét, amikor a függvényeire vagy változóira hivatkozunk. Új ablakot nyithatunk az open függvénnyel az alábbi módon: windowVáltozó = open (" URL", "windownév", "opciók") - ahol a windowváltozó az új ablak azonosítója, URL pedig az új objektumban megjelenő dokumentum címe.

Ha eseménykezelőből hívjuk a fenti függvényt vagy valamilyen okból kifolyólag nem a window az alapértelmezett objektum, akkor window.open alakban hívjuk meg, mert a sima open olyankor a document.open-nel azonos. Az opciók paraméter használatával látványossá tehetjük ablakainkat. Itt adhatjuk meg, hogy legyen-e státuszsor (status=yes| no), menüsor (menubar=yes| no), eszköztár (toolbar=yes| no), görgető-sávok (scrollbars=yes| no). Ugyancsak itt adhatjuk meg az ablak szélességét (width), magasságát (height) pixelben. Egyszerre több opciót is meg lehet adni, az egyes opciókat vesszővel elválasztva.

Egy megnyitott ablak bezárására a close függvény szolgál.

A alert, confirm függvények egyszerű párbeszéd ablakokat nyitnak meg. Az alert, mely a felhasználó figyelmeztetésére szolgál ,az argumentumként kapott stringet egy OK gomb társaságában kiírja egy kis párbeszédablakba.

Igaz vagy hamis döntést a confirm függvénnyel kérhetünk. Ez szintén megjeleníti az argumentumként kapott sztringet, valamint az OK és CANCEL gombot.

Igen hasznos függvények még a setTimeout és a clearTimeout, melyek időzített programvégrehajtásra, illetve annak leállítására valók.

A setTimeout szintxisa: azonosító = setTimeout ("kifejezés", msec). Ekkor egy időzítés indul el, és msec-ben megadott milliszekundum múlva a kifejezés (ami általában JavaScript utasítás vagy függvény) végrehajtódik . Ha valami miatt egy időzítést meg akarunk szüntetni, azt a clearTimeout (azonosító)- val tehetjük meg.

Frame

A frame objektum maga is egy window objektum emiatt egy sor tulajdonságot és függvényt örököl.

Ha a frame objektum további kereteket tartalmaz, akkor létezik a frames tömb is, amely tartalmazza az összes gyermek keretet. A frames tömbnek és a frame objektumnak a length változója adja meg a gyermek keretek számát. Az egyes keretek a name tulajdonságon keresztül, vagy ha az nem létezik, a szülő keret vagy ablak frames tömbjén keresztül érhetők el. A frame objektum self és window tulajdonsága az aktuális keretet jelenti, a parent pedig a szülő keretet vagy ablakot.

Az onLoad és onUnloaad eseménykezelők akkor hajtanak végre egy megadott JavaScript kódot, amikor a keret tartalma betöltődött, illetve elhagyjuk a keretet.

Document

A document objektum reprezentálja az ablakban vagy keretben megjelenített dokumentumot, amelyet a HTML <BODY> tag-jével deklaráltunk.

A title tulajdonság hordozza a dokumentum <TITLE> … </TITLE> tag-jében megadott stringet, ami a dokumentum címe, és a böngésző fejlécében jelenik meg.

Az alinkColor, bgColor, fgColor, linkColor, vlinkColor tulajdonságok rendre a HTML <BODY> tag-ben megadott allink, bgcolor, text, link, vlink paraméterek értékeit hordozzák string alakban.

A lastModified változó egy stringben tartalmazza a dokumentum fájl utolsó módosításának időpontját.

A location csak olvasható string változó tartalmazza a dokumentum teljes URL-jét.

A referrer tulajdonság szintén egy csak olvasható string, amely annak a dokumentumnak az URL-jét tartalmazza, amelynek egyik linkjére kattintva jutottunk el az aktuális dokumentumhoz. Ha nincs ilyen dokumentum, mert közvetlenül a billentyűzetről adtuk meg a címet, akkor a referrer string üres.

A forms és a links tömbök a dokumentum form illetve link objektumait tartalmazza.

Leghasznosabb függvényei a write és writeln elemfüggvények, amelyek arra hivatot-tak, hogy egy tetszőleges HTML formázott stringet kiírassunk velük a lapra az aktuális pozícióba. A dokumentum teljes kitörlésére használható a clear() függvény. Az open(" azonosító") függvénnyel inicializáljuk a dokumentumot. Ha a dokumentum, amelynek open függvényét meghívjuk, már tartalmaz valamilyen szöveget, az felülíródik, mert az open végrehajt egy clear-t is. Ezek után a write és writeln függvényekkel írhatunk az inicializált dokumentumba.

A close() függvény lezárja az open kimenetét.

Location

Egy ablak aktuális URL-jéről tartalmaz információkat. Szülőobjektuma a window obkójektum. A location objektumra az alábbi szintaxis szerint hivatkozhatunk:

ablaknév.location.elemváltozók

A teljes URL-t a href tulajdonság tartalmazza. A protocol csak a protokollt (http:), a port csak a portszámot tartalmazza.

A reload ( ) függvény az aktuális dokumentumot tölti be újra (egyenértékű az Internet Explorer Refresh gombjával).

A replace (URL) függvény az argumentumként megadott URL-t tölti be, de úgy, hogy az új objektum nem egy következő history bejegyzésbe kerül regisztrálásra, hanem az aktuális dokumentum helyére.

History

A böngészés során már meglátogatott lapok URL-jeit tárolja ez az objektum. Az eltárolt elemek számát adja a length vátozó. A böngésző BACK és FORWARD gombjainak lenyomását szimulálhatjuk a back ( ) és a forward ( ) függvényekkel. Közvetlenül is ugorhatunk egy megadott history bejegyzésre a go ( ) függvénnyel.

Navigator

A böngésző programunkról tárol néhány hasznos információt, például a nevét, verziószámát. A következő szintaxis szerint hivatkozhatunk rá: navigator.vátozónév

A böngésző program elterjedt nevét az appName változó hordozza. Az appCodeName változó a böngésző program kódnevét tartalmazza (például az Internet Explorer esetén ez az érték "Mozilla"). Az appVersion pedig a verziószámot adja meg.

Form

A form, űrlap objektum a HTML <FORM> elemét reprezentálja. Maga a form objektum nem sok elemváltozót és függvényt tartalmaz, viszont magába foglalja az összes beviteli mezőt reprezentáló objektumot is, ide értve a szöveges mezőket, gombokat és kapcsolókat. A form ojektum szülőobjektuma a document objektum.

Egy dokumentumban több űrlap is lehet. Az űrlapot a neve azonosítja (name tulajdonság), vagy ha nincs megadva, akkor elérhető a forms tömbön keresztül is a document.forms[index] alakban, ahol index az ablak sorszáma.

Az űrlapoknak lehet length tulajdonsága is, amely az adott form elemben található <INPUT> tag-ek számát adja meg. Az űrlapok egyes elemeit az elements tömb tartalmazza.

Ha azt szeretnénk, hogy űrlapunk adatait egy kiszolgáló gépen futó program fel is dolgozza, még léteznie kell az action paraméternek is, ami egy stringben megadja a feldolgozó program URL-jét, és biztosítani kell, hogy a felhasználó egy kattintással kezdeményezze az űrlap adatainak elküldését. Az adatok elküldése kétkéle módon történhet, GET és POST módszerrel, amit a method paraméter tárol.

A submit ( ) elemfüggvény meghívásakor az űrlap adatait elküldjük az action paraméter által meghatározott URL-nek. Ha egy submit objektum indítja el ezt az elküldést, akkor célszerű a <FORM> tag onSubmit eseménykezelőjének a használata.

A reset ( ) elemfüggvény az űrlap alaphelyzetbe állítására használható. Ehhez kapcsolódik az onReset eseménykezelő, melynek szintaxisa:

<FORM name = "az űrlap neve" onReset = "eseménykezelő kód">

Date

A date objektum a helyi dátum és időértékeket tárolja, valamint egy sor függvénye van a dátum és időérték manipulálására. Dátumobjektumokat a következő kifejezések valamelyikével lehet létrehozni:

dátumobjektum = new Date ( )

dátumobjektum = new Date (" év, hónap, nap")

dátumobjektum = new Date ( "hónap, nap, év, óra:perc:másodperc ")

A getYear ( ), getMonth ( ), getDate ( ), getHours ( ), getMinutes ( ), getSeconds ( ) elemfüggvények rendre az adott dátumobjektum év, hó (0-11), nap (1-31), óra (0-23), perc (0-59), másodperc (0-59) egésztípusú értékeivel térnek vissza.

A setYear ( ), setMonth ( ), serDate ( ), setHours ( ), setMinutes ( ), setSeconds ( ) függvények pedig az előbbi adatokat állítják be az argumentumként kapott értékre.

A getDay ( ) függvény 0-tól 6-ig terjedő egész számot ad vissza, attól függően, hogy a dátumobjektum napja a hét melyik napjára esik (a 0 vasárnapnak felel meg ).

A getTime ( ) visszadja az 1970 január 1 00:00 órától eltelt másodpercek számát.

A toLocaleString ( ) függvény visszatérési értéke egy string, ami gépünk időzóna beállításainak megfelelő formában tartalmazza az időpontot. Például: 08/03/00 15:42:30.

Mint minden objektumnak a Date-nek is van egy toString ( ) függvénye, hogy a tartalmát stringgé konvertálja.

String

Stringet létrehozhatunk egyszerű értékadással, vagy a new operátorral.

strinváltozó = new String ( " Ez a stringem " );

strinváltozó = "Ez a stringem";

A string objektum length elemváltozója a string hosszát adja meg.

A charAt( index) függvény azzal az egy karakterrel tér vissza, amelyik a string objektum index pozícióján található.

Az indexOf ( keresettstring, [index] ) függvény a string objektumban keresi a keresettstring-et. Visszatérési értéke a megtalált pozíció. Ha index paramétert is megadjuk, akkor a keresés index pozíciótól indul.

A lastIndexOf (keresettstring, [index] ) függvény indexOf-hoz hasonlóan keres, de attól eltérően visszafelé, azaz a keresett string utolsó előfordulási pozícióját adja meg. Ha index paramétert is megadjuk, akkor a keresés index pozíciótól visszafelé indul.

A substring (érték1, érték2) függvény használható stringből való kiemelésre. Visszatérési értéke érték1-nél levő karaktertől kezdve az érték2 előtti karakterig húzódó string.

A toLowerCase ( ) és a toUpperCase ( ) függvények a string objektumot csupa kis- illetve nagybetűkké alakítják.

Ezen kívül még jelen vannak a string formázó függvények is: bold ( ) - vastagított , italics ( ) - dőlt, small ( ) - kicsi, big ( ) - nagy karaktereket eredményeznek.

A fontsize ( méret ) és fontcolor ( szín ) függvények a szöveg méretét és színét adják meg, mint ahogy azt a <FONT=méret> … </FONT> illetve <FONT COLOR=szín> … </FONT> HTML tag-ek teszik. A méret 1 és 7 közzé eső egész érték, a szín pedig egy string, ami "#RRGGBB" formában határozza meg a szöveg színét egy lapon.

A split ( ) függvénnyel egy stringet lehet feldarabolni és a darabokat egy tömbbe helyezni. Formája: tömbvátozó = stringváltozó.split(karakter) - ahol a karakter egy egykarakteres string, a darabok elválasztását határozza meg. A tömbváltozó fogja tartalmazni az egyes string darabokat, az elválasztó karakterek nélkül.

Bálint Aliz