Javascript referencia



Bevezetés

A Javascript egy HTML fájlokba tervezett objektum-orientált nyelv. Alapjai a C és C++ nyelvek, így ezekre sokban hasonlít. Ez a dokumentum egy gyors összefoglaló a nyelvről, tehát feltételezi ezeknek a nyelveknek az ismeretét és némi gyakorlatot. Itt a JavaScript 1.1-es verziójáról lesz szó, ezt a Netscape a 3.0-tól fölfele már ismeri, az 1.2-t csak a 4.0 tudja.

Tartalom

  1. HTML, Javascript, és az objektumok
    1. A forráskód elhelyezése
    2. Az objektumok
    3. Típusok
    4. Operátorok
    5. Vezérlési szerkezetek
  2. A fontosabb objektumok
    1. Beépített objektumok
    2. Űrlapok
    3. Ablakok és keretek
    4. Hivatkozások
    5. Képek

HTML, Javascript és az objektumok

A Javascript szoros kapcsolatban áll a HTML szintaktikájával.

A forráskód elhelyezése

A Javascript forráskódokat a HTML-fájlba kell elhelyezni, a következő lehetséges módokon egyikén:
<SCRIPT [LANGUAGE=nyelv]> és </SCRIPT> tagok között
Az ide helyezett kódot a böngésző azonnal végrehajtja. Természetesen ha itt függvényt definiálunk, akkor az csak definiálásra kerül, végrehajtásra nem! Mivel a régebbi böngészők nem érthetik ezt a parancspárt, ezért szokás közéjük kerülő Javascript forrást HTML-megjegyzésbe rakni, ami nem akadályozza meg a fordításukat, és a régi böngészők sem írják ki (ezek számára használható a <NOSCRIPT>, </NOSCRIPT> parancspár, amik közé írt szöveget viszont csak ők jelenítik meg).
A LANGUAGE alapértelmezésben "JavaScript", ha későbbi verziókat használunk, akkor lehet még "JavaScript1.1", "JavaScript1.2" is.
Külön fájlba
Ez esetben <SCRIPT SRC=fájlnév></SCRIPT> parancspárt kell alkalmazni. A fájlnak ekkor tiszta Javascriptet kell tartalmaznia!
Eseménykezelőbe
Lehetséges bizonyos objektumoknak megfelelő eseménykezelőt megadni. Ezek a HTML-definícióban egy újabb attribútumként jelennek meg, amik értéke maga a Javascript forráskód, karakterláncként. Ha az itt szereplő kifejezés értéke false, akkor az objektum funkciója (pl: űrlap elküldése) nem lép működésbe; ahhoz, hogy minden működjön benne (pl: státuszsor átállítása), true-nak kell lennie. Az itt elhelyezett kód esetében az aktuális objektum (lásd: this) az, aminek az eseménykezelőjét definiáljuk. Az eseménykezelők nem függvények, Javascript kódból nem hívhatók! Viszont lehetséges őket értékadással átállítani; ekkor az objektumnak az eseménykezelő kisbetűs nevének megfelelő mezőjéhez kell a megfelelő függvény nevét hozzárendelni.
Javascriptes entitásba
Hasonlóan a HTML-esekhez (tehát ez HTML-parancsokban is alkalmazható!), a következő módon: &{kifejezés};. Ekkor a kifejezés kiértékelődik, mint Javascript, és az eredmény felhasználásra kerül, mint HTML-ben.
Internet-címekben, a javascript: előtaggal
Ha egy tetszőleges internet-címben ezzel az előtaggal Javascript forráskódot adunk meg, akkor az kiértékelésre kerül, és az eredmény adja meg a tényleges címet. Ha a kifejezésnek nincs értéke, akkor nem történik meg a hivatkozás.

Az objektumok

A Javascript objektum-orientált nyelv, tehát objektumokkal és azok mezőivel és metódusaival dolgozik. A mezők a megfelelő objektumok egy-egy tulajdonságát képviselik, illetve a metódusok segítségével műveleteket végezhetünk rajtuk. A megadás módja mindig objektumnév . mező. Amennyiben egy olyan metódust hívunk, ami nem tartozik konkrét objektumhoz, csak a típusához (statikus metódusok), akkor az objektum nevét a típus nevével kell helyettesíteni.

Lehetőség van a HTML-objektumok definiálásánál megadni az objektum nevét a NAME=név attribútummal. Ekkor lehetséges lesz Javascriptből ugyanezen a néven hivatkozni rá (kivétel: Area). Minden objektum rendelkezik egy name mezővel, ami a HTML-nevét tartalmazza. Ezzel ellentétben a Javascript változóneveket nem használhatjuk a HTML-kifejezésekben! A másik mód a HTML-objektumok elérésére hogy az őt tartalmazó objektumnak a legtöbbször van egy tömbje, ami a benne definiált objektumokat tartalmazza, definiálási sorrendben. Ekkor csak az indexét kell megállapítani.

A típusok

A Javascript egy laza típusokat használó nyelv, tehát a változóknak és kifejezéseknek nem rögzített a típusa, hanem a felhasználásnak megfelelően változik. Ennek következtében igen sűrűek az automatikus típuskonverziók. Ha egy kifejezésnek nincs értéke, de a kód azt várja, ez hibajelzéshez vezet.

Operátorok

Az összes C-ben használható operátor itt is használható, az eltérések a következők:

Különleges kifejezések

Vezérlési szerkezetek

blokkosítás
      {
   utasítás;
   ...
   utasítás;
   }
A kapcsos zárójelek közé írt utasítások egy utasításnak számítanak.
elágazás
if (feltétel)
   utasítás;
[else
   utasítás;]
Ha a feltétel igaz, akkor az első utasítás hajtódik végre. Ha nem, és adott az else ág, akkor az.
többszörös elágazás
switch (kifejezés) {
   case címke:
      utasítás;
      break;
   case címke:
      utasítás;
      break;
   ...
   default: utasítás;
   }
Ez csak a JavaScript 1.2-től érvényes utasítás! Kiértékelődik kifejezés, majd sorban összehasonlítódik a címkékkel. Ha valamelyikkel megegyezik, akkor az ahhoz tartozó ág végrehajtódik. Ha egyik címkével sem egyezik, és adott a default címke, akkor az. Ha nem adunk meg break utasításokat, akkor a vezérlés átfolyik a következő ágba.
ciklus
for ([kezdő kifejezés];
     [ciklusfeltétel];
     [léptető kifejezés])
   utasítás;
Kiértékelődik a kezdő kifejezés, majd amíg a feltétel igaz, végrehajtódik az utasítás és a léptetés.
hátultesztelő ciklus
do
   utasítás;
   while (feltétel);
Végrehajtódik utasítás mindaddig, amíg a feltétel hamis nem lesz.
elöltesztelő ciklus
while (feltétel)
   utasítás;
Amíg a feltétel igaz, végrehajtódik az utasítás.
címkézett utasítások
címke:
   utasítás;

break [címke];
continue [címke]
A címkézetlen break kilép a legbelső ciklusból. Címkével a címkézett utasítást fejezi be. A continue rátér a ciklus következő iterációjára. Címkézve az adott ciklust folytatja.
lépkedés a mezőkön
for (változó in objektum)
   utasítás;
A változó sorra felveszi az objektum összes mezőjét.
érvényességi tartomány váltás
with (objektum)
   utasítás;
Az utasítás minden hivatkozása először az objektum mezőire való hivatkozásként lesznek kezelve. Ha nincs megfelelő mező, akkor külső változóként.
megjegyzések
//
/* ... */
A // után a sor végéig megjegyzés következik. A /* és */ között többsoros megjegyzés is szerepelhet.

A fontosabb objektumok

Minden objektum rendelkezik a következőkkel:

Beépített objektumok

navigator

Ennek segítségével megtudhatunk néhány dolgot a böngészőnkről.

internet-címek

Ilyen objektum ugyan nem létezik, de sok hasonló igen. Itt összefoglaljuk a közös mezőiket.

Array

Tömböket lehet vele csinálni. A tömbnek nincs fix hossza, ha egy tetszőleges indexű elemének értéket adunk, akkor automatikusan a megfelelő hosszúságúra nyúlik. A tömb néhány eleme lehet null - az az index nem tartalmaz érvényes hivatkozást egy objektumra. A toString() metódus vesszővel elválasztva adja az elemek összefűzését.


new Array() létrehoz egy üres tömböt
new Array(kezdetiElemSzám) egy ekkora tömböt hoz létre
new Array(elem, elem, elem, ...) olyan tömböt hoz létre, mely ezeket az elemeket tartalmazza

Date

Dátumok és időpontok kezelésére szolgál. Egy ilyen objektum tulajdonképpen az 1970. jan. 1. 00:00.00 óta eltelt ezredmásodpercek száma.


new Date() a mai napot hozza létre
new Date("hó nap, év óra:perc:másodperc") és a
new Date(év, hó, nap [, óra, perc, másodperc]) a megfelelő időpontot.

Function

Segítségével létrehozhatunk egy függvény-objektumot. Később a nevéhez zárójelben hozzáfűzve a paramétereket meg is hívhatjuk.


new Function(arg1, arg2, ... , "függvény törzse") létrehoz egy függvény-objektumot ami a megadott függvénytörzsből áll, a paraméterek nevei az előző argumentumok.

Math

Matematikai konstansok és függvények tárháza.

string

Egy karakterlánc. Ilyet legegyszerűbben idézőjeles szöveg megadásával hozhatunk létre.

Űrlapok

Az űrlap lehetővé teszi, hogy a felhasználó adatokat vihessen be. Ezt sokféle objektum segíti. Mindegyiknek van egy type mezője, ami a bevitel típusát adja meg; ez egy string, legtöbbször az objektum típusa, kivétel a select objektum: itt lehet "select-one", vagy "select-multiple".

form

Ez tartalmazza a többi objektumot. Az elküldése egyenértékű az ACTION mezőben megadott cím, és az objektumok elkódolt értékének összefűzése után kapott cím betöltésével.

<FORM>
az űrlap elemei
</FORM>

  • TARGET=a célablak neve
  • ACTION=a szerver címe
  • METHOD=GET | POST a végrehajtás módja. Ettől függően a kezelő program egy környezeti változóban, vagy a standard bemenetről olvassa az űrlap értékét
  • ENCTYPE= a kódolásTípusa. Alapban application/x-www-form-urlencoded
  • onSubmit=elküldés esetén
  • onReset=törlés esetén

    button

    Egy gomb, amire rá lehet kattintani.

    <INPUT TYPE=button>

  • VALUE= a címkéje
  • onClick=kattintás esetén

    checkbox

    Egy kétállapotú kapcsoló. Ha be van kapcsolva, akkor az értéke elküldődik a szervernek.

    <INPUT TYPE="checkbox"> címkéje

  • VALUE= az értéke. Ezt küldi el a szervernek
  • CHECKED ha alapban be van ikszelve
  • onClick=rákattintás esetén

    FileUpload

    Egy fájlt lehet vele feltölteni.

    <INPUT TYPE="file">

  • VALUE=a kezdeti tartalma

    hidden

    Ez a mező nem jelenik meg, de az értékét megkapja a szerver.

    <INPUT TYPE="hidden">

  • VALUE= a tartalma

    password

    Mint a text, de a begépelt karakterek helyén csillagok látszanak.

    <INPUT TYPE="password">

  • VALUE=kezdeti tartalma
  • SIZE=a mező szélessége

    radio

    Több azonos nevű objektumot megadva, ez egy objektumként lesz kezelve a kiválasztás szempontjából - azaz mindig pontosan egy lehet kiválsztva. Egy radio nevét megindexelve kapjuk meg az objektumokat (a form elements nevű tömbje is külön tárol minden gombot!).

    <INPUT TYPE="radio">címkéje

  • VALUE= az értéke
  • CHECKED ha ez van alapban kiválasztva

    reset

    Alapállapotba rakja az űrlapot.

    <INPUT TYPE="reset">

  • VALUE= a címkéje
  • onClick=rákattintás esetén

    select

    Egy, vagy több lehetőséget lehet kiválasztani a segítségével. Az opciók megadhatók HTML-ből is, vagy később Javascript program segítségével is hozzáadhatók.

    <SELECT>opciók

  • SIZE=látható opciók száma
  • MULTIPLEha többet is ki lehet választani
  • onBlur=elhagyás esetén
  • onChange=változtatás esetén
  • onFocus=fókusz esetén

    option

    Egy opció a select objektumhoz.

    <OPTION> címkéje

  • VALUE= az értéke
  • SELECTED ha alapban ki van választva


    new Option([szöveg, érték, alapban, kiválasztva]) létrehoz egy új opció-objektumot. Ezt egy select options tömbjéhez hozzá kell rendelni, hogy használni is lehessen.

    submit

    Elküldi az űrlapot.

    <INPUT TYPE="submit">

  • VALUE= a címkéje
  • onClick=rákattintás esetén

    text

    Egy egysoros szövegbeviteli mező.

    <INPUT TYPE="text">

  • VALUE= a kezdeti tartalma
  • SIZE= a mező szélessége
  • MAXLEN= a beírható szöveg maximális hossza
  • onBlur=elhagyás esetén
  • onChange=változtatás esetén
  • onFocus=fókusz esetén
  • onSelect=kijelölés esetén

    textarea

    A text többsoros változata.

    <TEXTAREA>kezdeti tartalma</TEXTAREA>

  • ROWS= a sorok száma
  • COLS= az oszlopok száma
  • onBlur=elhagyás esetén
  • onChange=változtatás esetén
  • onFocus=fókusz esetén
  • onSelect=kijelölés esetén

    Ablakok és keretek

    Ezek eredetileg HTML/ben is léteznek, itt most némileg kibővültek a lehetőségeik. HTML-ben ablaknevekként használható a _top, _parent, _self és a _blank, ami az ablakot, a felsőbb szintű keretet, saját magát, illetve egy nem létező keretet jelent.

    Az ablaknak és kereteknek tulajdonképpen van onLoad és onUnload eseménykezelője, de ezek a benne lévő dokumentumban definiálhatók.

    window

    Egy külön ablak. Ez a legfelsőbb szintű objektum, ezt semmi sem tartalmazza.

    location

    A window mezője, az aktuális dokumentum címe.

    frame

    Egy keret, amikre fel lehet osztani egy ablakot, vagy más keretet. <FRAMESET>
    keretdefiníciók
    </FRAMESET>

  • ROWS=a magasságok listája
  • COLS=a szélességek listája
  • onLoad=betöltés esetén
  • onUnload=elhagyás esetén

    <FRAME>

  • NAME=a keret neve
  • SRC=a tartalmának címe

    document

    A HTML-dokumentum. <BODY>
    tartalma
    </BODY>

  • BACKGROUND=a háttérkép címe
  • BGCOLOR=a háttér színe
  • TEXT= a szöveg színe
  • LINK= a hivatkozások színe
  • ALINK=az aktív hivatkozások színe
  • VLINK= a használt hivatkozások színe
  • onLoad=betöltés esetén
  • onUnload=elhagyás esetén

    history

    A dokumentum előtt és utána nézett címek listája.

    Hivatkozások

    Egy kétféle objektum, amit össze is lehet vonni.

    anchor

    Egy könyvjelző a dokumentumban. Segítségével adott helyre lehet lépni. A dokumentum neve után egy #-val elválasztva a nevét hivatkozhatunk rá.

    <A> szöveg </A>

  • NAME=a neve

    link

    Egy hivatkozás egy másik helyre.

    <A> szöveg </A>

  • HREF= a hivatkozás címe
  • TARGET= a célablak neve
  • onClick=kattintás esetén
  • onMouseOver=ha rámegy az egér

    Képek

    Image

    Egy kép.

    <IMG>

  • SRC=a kép címe
  • LOWSRC=az alacsony felbontású kép címe
  • HEIGHT=a magasság pontokban, vagy százalékban
  • WIDTH=a szélesség pontokban, vagy százalékban
  • HSPACE=a vízszintes helykihagyás
  • VSPACE=a függőleges helykihagyás
  • BORDER=a keret vastagsága
  • ALIGN=az igazítása. Lehet left,right,top,absmiddle,absbottom,texttop,middle,baseline,bottom.
  • ISMAP ha imagemap
  • USEMAP= ezt a térképet használja
  • onAbort=megszakadás esetén
  • onError=hiba esetén
  • onLoad=ha betöltődött


    new Image([szélesség, magasság]) létrehoz egy üres, vagy egy megadott méretű képet

    Area

    Egy térképen egy terület. Ennek segítségével egy kép különböző helyeihez különböző funckiókat rendelhetünk.

    <MAP> területek </MAP>

  • NAME= a térkép neve <AREA>

  • NAME=a terület neve. Erre nem lehet Javascript-ből hivatkozni!
  • COORDS=a koordináták
  • HREF=ide hivatkozik
  • NOHREFnem hivatkozik
  • SHAPE=a terület alakja. Lehet:rect,poly,circle,default.
  • TARGET=a célablak neve
  • onClick=kattintás esetén
  • onMouseOut=elhagyás esetén
  • onMouseOver=rámutatás esetén. Ez utóbbi kettő csak akkor, ha van HREF attribútum.

    Ply