JAVASCRIPT Történet JavaScript nyelv nem azonos a Java nyelvvel 1995: Netscape vezette be az addigi statikus HTML oldalak dinamikussá tételére 1996: Microsoft saját változata a JScript Microsoft mint konkurenciát kifejlesztette a VBscript-et is De a VBScript a kihalás folyamatában van Ugyanakkor a JScript a.net default nyelve lett 1997: ECMA (European Computer Manufacturers Association) kiadja az ECMAScript nyelvet, hogy elősegítse a különböző változatok szabványosítását Számos változatuk megjelent Netscape változatok: JavaScript v1.0 v1.5 Internet Explorer: JScript v1.0 v5.6 Ma már a ténylegesen "jegyzett" böngészőkben a kompatíbilis változatok: ECMAScript-262 JavaScript 1.5 JScript 5.6 Mi a JavaScript Szkript Forráskód, amelynek végrehajtása soronként értelmezővel (interpreter) vagy a végrehajtás folyamán soronként gépi kódba fordítással Végrehajtható program Gépi kódú utasításokba lefordított program gyorsabb, de a lefordított program már nem változtatható A WEB alkalmazásokban gyakran használunk ügyfél oldali szkripteket kiszolgáló oldali szkripteket a web oldalakba plug-in segítségével integrált végrehajtható programokat A végrehajtáshoz egy értelmező (szkriptmotor) szükséges A kölönböző alkalmazások különböző szkriptmotorokat használnak Eltérés a szkriptmotorok között A nyelvnek a szkriptmotoroktól független elemei képezik a nyelv magját, ez a Core JavaScript vagy a JavaScript alkalmazás-független része A mag- és alkalmazásfüggő részek kapcsolata a különböző böngészők eltérő járulékos funkciókkal egészítheti ki a mag JavaScriptet a kiszolgáló oldali bővítések alapvetően eltérnek az ügyféloldaliaktól az egyes alkalmzások bővítése az adott alkalmazás céljainak felelnek meg Példák: Önálló JavaScript interpreter: DMDScript HTML oldalba illesztett JavaScript: böngésző szkriptmotor Szkriptmotor gazda: WSH (Példák: JS_exec_versions) 1
A mag JavaScript áttekintése Aritmetikai, logikai, bitkezelő műveletek és a programvezérlő szerkezetek azonosak a Java vagy a C (C++) nyelvben használtakkal Lényegi különbségek Gyengén típusos nyelv Prototípus alapú az objektumorientáltság Az adattípusokat nem kell explicit módon megadni és konvertálni Alap (mag) objektumok Megegyező sajátságok: vázlatos tárgyalás Eltérő sajátosságok: részletesebb tárgyalás Kitérő a gyakorolhatóság érdekében Hogyan helyezünk el egy szkriptet a böngészőben? Hogyan valósítunk meg primitív be- és kivitelt? <html> <script> var n = fp_input( "Kamatos kamat számítása - Kiindulási tõke = 100\n" + "Adja meg a kamat értékét!"); s = ""; sum = 100; for(i=1; i<11; i++){ sum = sum * (1+0.01*n); s += "Év:" + i + " Megnövekedett tõke:" + sum+'\n'; output(s); function output(str){alert(str); function str_input(){return promt("str",""); function int_input(str){return parseint(prompt(str,"")); function fp_input(str){return parsefloat(prompt(str,"")); </script> </html> Általános szintaktikai szabályok Értelmező figyelmen kívül hagyja a szóköz, tabulátor, sorvégkaraktert egy utasítás több sorba írható egy sorban több utasítás is lehet értelemszerűen: azonosító, kulcsszó, sztring stb. nem vágható szét! Utasítások lezárása pontosvesszővel opcionális, de ha egy sorban több utasítás van, akkor kötelező Javaslat minden utasítás külön sorba tegyünk minden utasítást explicite pontosvesszővel zárjunk Kis/nagybetű érzékeny a nyelv Értékek, változók és literálok Értékek sztringek: "Ez egy string", "1956",'1956' számok: 021, 17, 0x11, 3.14, 314E-2 logikai értékek: true és false null: nulla értéket kifejező speciális kulcsszó undefined: nem definiált érték Adattípus konverzió típusok dinamikus kezelése automatikus konverzió kifejezések kiértékelésekor a típusok preferált sorrendje String lebegőpontos egész logikai js1/ct.html 2
Változók betűvel, aláhúzással vagy $ jellel kezdődnek, s számmal is folytatódhatnak deklarálás és hatáskör egyszerű hozzárendelés pl. x = 23; var kulcsszó használata pl. var x = 32; De: függvényen belül csak akkor lokális a változó, ha var kulcsszóval deklaráltuk function f(){ x=1; f(); y = x; // itt y értéke 1 lesz function f(){ var x=1; y = x + 1; // itt runtime error lép fel function f(){ x=1; y = x; // itt runtime error lép fel Konstansok const prfix = '212'; neve nem lehet azonos egy függvény vagy változó nevével azonos hatáskörben Literálok tömb logikai lebegőpontos egész objektum sztring Tömb literálok nevek = ["Laci", "Feri", "Mari"]; kutya = ["puli",, "vizsla"]; // kutya[1] undefined mylist = ['home',,'shool',] //három elem mylist = [,'home',,'school'] //négy elem mylist = ['home',,'school',,] //négy elem Logikai (Boolean) literálok true ésfalse neve nem lehet azonos egy függvény vagy változó nevével azonos hatáskörben Objektum literálok var Sales = "Toyota"; function CarTypes(name) { if(name == "Honda") return name; else return "Sorry, we don't sell " + name + "."; car = {mycar:"saturn"; getcar:cartypes("honda"),special:sales; document.write(car.mycar); //Saturn docuemtn.write(car.getcar); //Honda document.write(car.special); //Toyota String literálok "Toyota" 'Jani' Speciális karakterek: \b visszalépés \t tabulator \f lapdobás \v vertikális tab \n soremelés \ aposztróf \r kocsi vissza \" idézőjel \t tabulator \\ fordított törtvonal \nnn Latin-1 kódolás oktális számmal (000377) \xnn Latin-1 kódolás hexa számmal megadva (00FF) \unnnn Unicode karakter négyjegyű haxa számmal megadva "egyik sor \n másik sor" "Deák Ferenc mondta: \"Ha egy nép \"" "Deák Ferenc mondta: 'Ha egy nép '" "Többsoros string literal, hibásan folyatatva" "Többsoros string literal," + " helyesen folytatva" "\u00a9 Gál Tibor" megfelelője Gál Tibor 3
String objektum metódusai a string literálokra is meghívható js1/ct3.html "abcd".charat(2) // c "abcd".length // 4 "Ugrás a Sun holapjára".link( "http://www.sun.com ") //<a href="http://www.sun.com ">Ugrás a Sun-ra</a> Kifejezések és operátorok Kifejezések Aritmetikai: kiértékelve számot ad vissza Sztring: kiértékelve sztringet ad vissza Logikai: kiértékelve true vagy false értéket ad vissza Objektum: kiértékelve objektumot ad vissza ok értékadó összehasonlító aritmetikai bit logikai sztring speciális Értékadó operátorok Az egyetlen nélkülözhetetlen értékadó operátor: = A többi Értékadó operátorok x += y x -= y x *= y x /= y x %= y x <<= y x >>= y x >>>= y x &= y Jelentés x = x + y x = x y x = x * y x = x / y x = x % y x = x << y x = x >> y x = x >>> y x = x & y Összehasonlító operátorok ==!= ===!== > >= < <= ===!== true értéket visszaadó példa (var1=3 var2=4) 3 == var1 "3" == var1 3 == '3' var1!= 4 var2!= "3" 3 === var1 var1!== "3" 3!== '3' var2 > var1 var2 >= var1 var1 >= 3 var1 < var2 var1 <= var2 var2 <= 5 egzakt egyenlő egzakt nem egyenlő x ^= y x = y x = x ^ y x = x y 4
Aritmetikai operátorok: mint a többi nyelvben + - * / % ++ - Jelentés Összeadás Kivonás Szorzás Osztás Modulus Inkrement Dekrement Negálás De: a / osztás lebegőpontos eredményt ad vissza Java-ban 3/2 visszaadott értéke 1 JavaScriptben 3/2 visszaadott értéke 1.5 Bit operátorok a & b Bitenkénti ÉS a b Bitenkénti VAGY a ^ b Bitenkénti kizáró VAGY ~a Bitenkénti NEM a << b Balra léptetés a >> b Jobbra léptetés az előjel megtartásával a >>> b Jobbra léptetés az előjel megtartása nélkül Leírás 1-et ad vissza minden olyan bit pozícióban, amelyben mindkét operandus bitje 1 értékű. 1-et ad vissza minden olyan bit pozícióban, amelyben legalább az egyik operandus bitje 1 értékű. 1-et ad vissza minden olyan bit pozícióban, amelyben a két operandus bitjei eltérőek. Invertálja az operandus bitjeit. Az a operandus bináris reprezentációjában b bittel balra lépteti a biteket, s a jobb oldalon nullákat léptet be. Az a operandus bináris reprezentációjában b bittel jobbra lépteti a biteket, a bal oldalon az előjelet megtartja, s a jobb oldalon kilépő biteket eldobja. Mint az előbbi, de a bal oldalon nullákat léptet be. Példák a bit operátorokra 15 & 9 (00001111 & 00001001 1001) 9 15 9 (00001111 00001001 1111) 15 15 ^ 9 (00001111 ^ 00001001 0110) 6-15 & 9 (111111110001 & 000000001001 000000000001) 1 Logikai operátorok &&! Jelentés Logikai ÉS Logikai VAGY Logikai NEM -15 9 (111111110001 000000001001 111111110001) 7-15 ^ 9 (111111110001 & 000000001001 1111 1111 1000) -8 9 << 2 ( 0000 1001 << 2 0010 0100) 36 9 >> 2 ( 0000 1001 >> 2 0000 0010) 2-9 >> 2 (111111110111 >> 2 11111111 11111101) -3 De: nem logikai értékek esetén A&&B az A kifejezést adja vissza, ha az false értékké konvertálható, egyébként a B kifejezést A B az A kifejezést adja vissza, ha az true értékké konvertálható, egyébként a B kifejezést!afalse értéket ad vissza, ha Atrue értékké konvertálható, egyébként true értéket Példák js1/ct8.html "cat " && "dog " true && true eredménye "dog" "cat " "dog " true true eredménye "cat" Rövidített kiértékelés 5
String operátorok + += Jelentés Két sztring összekapcsolása alpha + bet alphabet Összekapcsolás és értékadás alpha += bet alphabet Speciális operátorok? feltételes, comma delete törlés in tartalmazás-vizsgálat instanceof példányvizsgálat new példányosító this önreferencia typeof típusvizsgáló void visszaadott érték hiánya Feltételes operátor (?) status = (eletkor >= 18)? "felnott" : "kiskoru" Komma operátor (,) Mindkét op. kiértékelése, s jobboldali visszaadása for(i=0, j=9; i<9; i++, j--) Törlés operátor (delete) Objektumot, obj. tulajdonságot vagy tömbelemet töröl delete objectname delete objectname.propertyname delete arrayname[index] impliciten deklarált változó törölhető var kulcsszóval deklarált nem a sikeresen töröl entitás undefined állapotot vesz fel sikeres törlés true értékkel tér vissza tömbelem törlésekor a tömb hossza nem változik az in operátor nem találja meg a törölt elemeket, de indexszel hivatkozva undefined értékük megkapható js1/ct4.html Tartalmazás-vizsgálat operátor (in) Igaz értéket ad vissza, ha az adott tulajdonság megtalálható az adott objektumban primek = new Array(1,2,3,5,7); 0 in primek // eredménye true 5 in primek // eredménye false "PI" in Math // eredménye true, Math egy előre definiált // objektum, melynek van egy PI tulajdonsága Példányvizsgáló operátor (instanceof) Igaz értéket ad vissza, ha a két objektum típusa megegyezik thaday = new Date(2001, 09, 11); if(theday instanceof Date){ // ezek az utasítások végrehajtódnak A this operátor <input type=text name=age onchange="validate(this)"> this.img.width = 200; Típusvizsgáló operátor (typeof) Sztringet ad vissza, amely a kiértékeletlen operandus típusát jelzi typeof operandus typeof (operandus) typeof 2 +2 typeof 2+2 // visszaadott érték string // visszaadott érték number A void operátor Az argumentumában szereplőkifejezes-t ki kell értékelni, de nem kell visszaadni <a href="javascript:void (0)">Click here to do nothing</a> <a href="javascript:void(document.form.submit())"> Kattintson ide az elküldéshez</a> js1/kep.html 6
Az operátorok precedenciája típusa Individuális operátorok comma, értékadás = += -= *= /= %= <<= >>= >>>= &= ^= = feltételes?: logikai VAGY logikai ÉS && bitenkénti VAGY bitenkénti XOR ^ bitenkénti ÉS & egyenlőség ==!= ===!== reláció < <= > >= in instanceof bitenkénti léptetés << >> >>> összeadás/kivonás + - szorzás/osztás * / % negáció/inkrement! ~ - + ++ -- typeof void delete call / példány létrehozása () new tag. [] Blokkutasítások Feltételes utasítások A switch utasítás Utasítások {utasítás1 utasítás2 utasításn //utasítások csoportosítása if (x==y) {utasítások if (x>y) max=x; else max=y; swith (kifejezés){ case cimke1: utasítások; break; case cimke2: utasítások; break; default: utasítások; Java: kifejezés csak egész értékű lehet JavScript: bármi js1/ct5.html Ciklusutasítások A for utasítás for(var i=0; i<10; i++) { utasítások A do while utasítás do { utasítások while (i<5); A while utasítás while (n < 3) { utasítások; A break utasítás Címke nélküli esetben a legbelsőwhile, dowhile, for vagy switch végrehajtása fejeződik be Címkével használva, a hivatkozott címkével ellátott utasítás végrehajtása marad abba A continue utasítás Címke nélküli esetben abbahagyja a legbelső while, dowhile, for vagy switch utasítás végrehajtását és rátér a következő iterációra Címkével használva, a megjelölt címkéjű utasításban tár át a következő iterációra Objektummanipulációs utasítások A for utasítás for(változó in objektum) { utasítások js1/ct7.html Awith utasítás /beállítja az alapértelmezett objektumot/ var c = Math.sqrt(a*a+b*b); var d = c*math.sin(alfa); var kerulet = d*math.pi; // de with (Math) { var c = sqrt(a*a+b*b); var d = c*sin(alfa); var kerulet = d*pi; Megjegyzések // egyetlen sorra a sor végéig /* többsoros megjegyzés */ 7
Kivételkezelő utasítások A kivételek dobása a throw utasítással történhet Elkapásuk a try catch utasítással throw "Error2" throw 42; throw true; kivételt dobható utasítások catch(e) { kivétel felléptekor végrehajtandó utasítások catch(e if e=="error1") { catch(e if e=="error2") { Példa1 function getmonthname (mo) { mo=mo-1; //A tömb feltöltése hónap nevekkel (1=jan,12=dec) var months=new Array("jan.","febr.","márc.","ápr.","máj.", "jun.","júl.","aug.","szept.","okt.","nov.","dec."); if (months[mo]!= null) { return months[mo]; else { throw "IllegálisHónapSzám"; monthname=getmonthname(mymonth); // ez a függvény // kivételt dobhat catch (e) { monthname="unknown"; logmyerrors(e); // a kivétel objektum átadása a // hibakezelőnek js1/ct9.html Példa2 function getcustinfo(name, id, email) { var n, i, e; if (!validate_name(name)) throw "InvalidNameException" else n = name; if (!validate_id(id)) throw "InvalidIdException" else i = id; if (!validate_email(email)) throw "InvalidEmailException" else e = email; cust = (n + " " + i + " " + e); return (cust); A finally blokk (mindig végrehajtódik) openmyfile(); writemyfile(thedata); finally { closemyfile(); // mindig lezárja a fájlt // a függvény háromféle kivételt dobhat getcustinfo("lee", 1234, "lee@netscape.com"); catch (e if e=="invalidnameexception") {bad_name_handler(e); catch (e if e == "InvalidIdException") {bad_id_handler(e); catch (e if e == "InvalidEmailException") {bad_email_handler(e); catch (e){ // valami egyéb hiba logerror(e); 8