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: és 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 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 <SCRIPT [LANGUAGE=nyelv]>
1 of 14
2011.05.22. 19:05
Javascript leírás
http://www.mediacenter.hu/help/javascript/
Ez esetben <SCRIPT SRC=fájlnév> 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: >> egyszerûen kettõvel osztja a számot, az elõjelet megtartva. >>> jobbra tolja a számot, és balról nullákkal tölti fel, tehát az elõjel megváltozhat!
2 of 14
2011.05.22. 19:05
Javascript leírás
http://www.mediacenter.hu/help/javascript/
a logikai kifejezések nem feltétlenül értékelõdnek ki teljesen. Tehát ha az elsõ operandusból lehet következtetni az eredményre, akkor a második operandus kiértékeletlen marad. kétféle idézõjel használható: a " és a '. Ezeket felváltva használva ágyazhatunk egymásba idézõjeleket. Egyébként egy \-t írva elé hasonló hatást érhetünk el. az idézõjelek közé zárt szöveg automatikusan egy string objektum, tehát tetszõleges mûveletek végezhetõk vele.
Különleges kifejezések true és false konstansok igaz és hamis értékekkel. this ez mindig az aktuális objektumra hivatkozó változó. null a semmilyen objektumra hivatkozik. void(kifejezés) kiértékeli a kifejezést, majd elnyeli az értékét, aminek következtében a teljes kifejezésnek nem lesz értéke. typeof(objektum) egy stringet ad vissza, ami a kifejezés típusát jellemzi. new típus(paraméterek) értéke egy új objektum a megadott típusból, a megadott paraméterekkel (ezeknek jelentése típusonként változó). return [kifejezés] függvénybõl visszatér a megadott kifejezés értékével, vagy érték nélkül. function név(paraméterek) { utasítások; } definiál egy adott nevû függvényt, a paraméterek a függvény belsejében mint változók használhatók. var név [= kifejezés] definiál egy változót. Ha még nincs ilyen nevû, akkor a var elhagyásával egy értékadás is definiálhatja. eval(string) kiértékeli a megadott Javascript kifejezést parseInt(string) egész számmá konvertálja a stringet parseFloat(string) lebegõpontos számmá konvertálja isNaN(szám) megadja, hogy a szám érvénytelen érték-e
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; }
3 of 14
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.
2011.05.22. 19:05
Javascript leírás
http://www.mediacenter.hu/help/javascript/
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.
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 Az utasítás minden hivatkozása elõször az objektum mezõire való with (objektum) utasítás; 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: name megadja az objektum HTML-ben megadott nevét toString([alap]) szöveggé konvertálja az objektumot. Az alap a számrendszer alapszáma, ahol ez számít
Beépített objektumok navigator Ennek segítségével megtudhatunk néhány dolgot a böngészõnkrõl. appCodeName a böngészõ kódneve appName a böngészõ neve appVersion a verziószáma, platformja, és országkódja egy stringben javaEnabled megadja, hogy engedelyezett-e a Java
4 of 14
2011.05.22. 19:05
Javascript leírás
http://www.mediacenter.hu/help/javascript/
userAgent ezt az stringet küldi a szervereknek adatátvitelkor
internet-címek Ilyen objektum ugyan nem létezik, de sok hasonló igen. Itt összefoglaljuk a közös mezõiket. hash a # és utána a jelzõ neve host hostname + ":" + port hostname a gép neve href a teljes cím pathname az elérési út a gépen port a port száma protocol a cím kezdete a :-ig search a ? és az utána következõ kérés
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 join(elválasztó) összekapcsolja az elemeket egy stringgé sort(függvény) rendezi az elemeket, függvény(a, b) értékei szerint. Ha ez pozitív, akkor a jön elõbb, ha negatív, akkor b jön elõbb, ha nulla, akkor nem változik a sorrendjük. reverse() megfordítja a sorrendjüket
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. getDate() megadja a napot getDay() megadja a hét napját (0-vasárnap, 1-hétfõ ...) getHours() megadja az órákat getMinutes() megadja a perceket getMonth() megadja a hónapot getSeconds() megadja a másodperceket getTime() az teljes idõt getTimeZoneoffset() percekben az idõzóna eltérés a GMT-tõl getYear() megadja az évszámot parse() egy stringet teljes idõvé alakít
5 of 14
2011.05.22. 19:05
Javascript leírás
http://www.mediacenter.hu/help/javascript/
setDate(nap) beállítja a napot setHours(óra) az órákat setMinutes(perc) a perceket setMonth(hó) a hónapot setSeconds(mp) a másodperceket setTime(idõ) beállítja a teljes dátumot setYear(év) beállítja az évszámot toGMTString() GMT stringgé konvertálja toLocaleString() helyi megadású stringgé konvertálja UTC(év, hó, nap, óra, perc, mp) ezt a teljes idõt adja meg
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. arguments az argumentumok tömbje
string Egy karakterlánc. Ilyet legegyszerûbben idézõjeles szöveg megadásával hozhatunk létre. length a hossza charAt(hol) megadja az adott helyen lévõ karaktert indexOf("szöveg" [, honnan]) az elsõ elõfordulása lastIndexOf("szöveg" [, honnan]) az utolsó elõfordulása split(elválasztó) egy tömbbe szétvágja a stringet substring(eleje, utána) egy részét adja meg toLowerCase() csupa kisbetûvel toUpperCase() csupa nagybetûvel A következõ metódusok a stringet olyan stringgé alakítják, ami HTML formázásokkal az adott módon jeleníti meg a szöveget anchor(neve) jelzõt rak rá big() naggyá teszi blink() villogóvá bold() vastaggá fixed() írógépeltté
6 of 14
2011.05.22. 19:05
Javascript leírás
http://www.mediacenter.hu/help/javascript/
fontcolor(szín) ilyen színûvé fontsize(méret) ekkora méretûvé italics() dõltté link(URL) ide hivatkozó linkké small() kicsivé strike() áthúzottá sub() indexszé sup() kitevõvé
Û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. 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 action az action mezõ elements az ûrlapon szereplõ objektumok encoding az enctype mezõ length az ûrlapon szereplõ objektumok száma method a method mezõ target a target mezõ submit() elküldi reset() törli
button Egy gomb, amire rá lehet kattintani. VALUE= a címkéje onClick=kattintás esetén
value a címkéje click() egy rákattintást szimulál
7 of 14
2011.05.22. 19:05
Javascript leírás
http://www.mediacenter.hu/help/javascript/
checkbox Egy kétállapotú kapcsoló. Ha be van kapcsolva, akkor az értéke elküldõdik a szervernek.
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
checked értéke mutatja, hogy be van-e ikszelve defaultChecked pedig, hogy alapértelmezésben be van-e value az értéke
FileUpload Egy fájlt lehet vele feltölteni. VALUE=a
kezdeti tartalma
value a tartalma
hidden Ez a mezõ nem jelenik meg, de az értékét megkapja a szerver. VALUE=
a tartalma
value a tartalma
password Mint a text, de a begépelt karakterek helyén csillagok látszanak. VALUE=kezdeti tartalma SIZE=a mezõ szélessége
defaultValue a kezdeti tartalma value a tartalma focus() fókuszálja blur() elhagyatja select() kijelöli
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
8 of 14
2011.05.22. 19:05
Javascript leírás
http://www.mediacenter.hu/help/javascript/
meg az objektumokat (a form elements nevû tömbje is külön tárol minden gombot!). címkéje VALUE= az értéke CHECKED ha ez van
alapban kiválasztva
checked mutatja, hogy ki van-e választva defaultChecked az alapértelmezés length a lehetõségek száma value az értéke
reset Alapállapotba rakja az ûrlapot. VALUE= a címkéje onClick=rákattintás esetén
value a value mezõ
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 onBlur=elhagyás esetén onChange=változtatás esetén onFocus=fókusz esetén
választani
length a lehetõségek száma options a lehetõségek selectedIndex a (z elsõ) kiválasztott száma option Egy opció a select objektumhoz.
