A JavaScript bemutatása

Az előadások a következő témára: "A JavaScript bemutatása"— Előadás másolata:

1 A JavaScript bemutatása

2 Bevezetés A JavaScript egy tömör, objektum-alapú leíró nyelv, amelyet a kliens-szerver Internet alkalmazásokhoz fejlesztettek ki. A browser (böngésző) fordítja le a JavaScript utasításokat, amelyek közvetlenül bele vannak ágyazva egy HTML lapba.

3 Egy kliens alkalmazásban a böngésző fel tudja ismerni a HTML lapokba beágyazott JavaScript utasításokat és felelni tud felhasználói eseményekre mint például: egérklikkelés form bemenet oldal navigáció.

4 Tudunk írni egy olyan JavaScript függvényt, ami ellenőrzi, hogy a felhasználók érvényes információt írtak-e be egy formába, ami egy telefonszámot vagy egy irányítószámot kért. Hálózati átvitel nélkül egy HTML lap a beágyazott JavaScript segítségével ellenőrizheti a bevitt szöveget és figyelmezteti a felhasználót egy üzenetablak segítségével, ha a bemenet nem érvényes. A JavaScriptet cselekvések elvégzésére is lehet használni (mint például egy audio file lejátszása, egy applet végrehajtása, vagy egy plug-innel való kommunikáció) figyelembe véve, hogy a felhasználó megnyitott egy lapot vagy kilépett egy lapról.

5 JavaScript és a Java A JavaScript nyelv hasonlít a Java-hoz, de nincs benne meg a Java típus ellenőrzése. A JavaScript támogatja a legtöbb Java kifejezés szintakszisát és az alapvető folyamat irányítási konstrukciókat. A JavaScript programokat nem kell lefordítani, ellentétben Java programokkal, mivel a JavaScriptben kis szamú adattípus van: numerikus, Boolean, és string. A JavaScript szintén támogatja a függvényeket, amelyeket speciális deklarációs követelmények nélkül lehet használni. A függvények lehetnek objektumok elemváltozói, amelyeket "laza" típusú módszerrel hajtanak végre. A JavaScript kiegészíti a Java-t, a Java appletek hasznos tulajdonságait megőrizve. A JavaScript utasítások le tudják kérdezni és be tudják állítani egy alkalmazás tulajdonságait, állapotát vagy meg tudják változtatni egy applet vagy plug-in végrehajtását. A Java-t egy kiterjeszthető nyelvként tervezték, különösen a gyors végrehajtásra és a típus biztonságra helyezték a hangsúlyt.

6 A Nyelv Koncepciói Értékek,Nevek,Literálok Kifejezések,Operátorok
Objektum Modell Objektumok,Függvények

7 Értékek A JavaScript a következő típusokat ismeri:
számok, például 17 vagy logikai (Boolean) értékek, igaz vagy hamis stringek, például "Hello!" null, egy speciális kulcsszó, ami a null értéket jelöli Relatíve kevés típusú érték, vagy adattípus van. Nincs explicit különbség az egész és a valós számok között. Nincs explicit dátum adattípus sem. De a Date objektum és a beépített függvények segítségével lehetőség nyílik a dátum kezelésre. Az objektumok és a függvények alapvető elemei a nyelvnek. Egy objektum értékeket és függvényeket tárol, amiket az alkalmazások során végre lehet hajtani.

8 Adattípus Konverzió A JavaScript laza típusú nyelv. Ez azt jelenti, hogy nem kell egy változó adattípusát meghatározni deklaráláskor, és az adattípusokat automatikusan átkonvertálja, ha az szükséges a script végrehajtása során. Például így lehet egy változót definiálni: var ertek = 29 Később ugyanez a változó felvehet egy string értéket is, például: ertek = „Köszönöm az halat!" Mivel a JavaScript laza típusú nyelv, ez nem okoz hibaüzenetet. Általában a kifejezések numerikus és string értékeket is tartalmaznak. A JavaScript átkonvertálja a numerikus értéket stringgé. Példaként nézzük a következő utasításokat: x = „Az érték: " + 29, y = 29 + " az érték." Az első utasítás a „Az érték: 29" stringgel, a második utasítás a „29 az érték" stringgel tér vissza.

9 Változónevek Értékek tárolására változókat lehet használni. Ezekre a változónevek-re amikről beszélünk megfelelő szabályok vonatkoznak. Egy JavaScript azonosító vagy név betűvel (a-z vagy A-Z) vagy '_' aláhúzás karakterrel kezdődhet, amelyek után betűk,számjegyek és aláhúzás karakterek tetszőleges kombinációja állhat. A JavaScript a kis és nagybetűket megkülönbözteti. Néhány példa helyes változónévre: Number_hits temp99 _name

10 Literálok (konstansok)
A literálokkal lehet értékeket megjeleníteni a JavaScript-ben. Ezek fix értékek, amelyek szó szerint benne vannak a forráskódban, de nem változók. Literálokra példák: 42 "To be or not to be"

11 Lebegőpontos konstansok:
Egészek: Az egész számokat decimális, hexadecimális és oktális formában lehet kifejezni. Egy decimális egész literál számjegyek sorozatából áll, ahol a 0 számjegy nem állhat az első helyen. Egy egész számot ki lehet fejezni oktális és hexadecimális formában is. Ha egy szám első számjegye 0 az azt jelenti,hogy a szám oktális, ha az első számjegye 0x (0X) az azt jelenti, hogy hexadecimális. Lebegőpontos konstansok: Egy lebegőpontos literálnak a következő részei vannak: egy decimális egész, egy tizedespont ("."), egy törtrész (másik decimális szám), egy exponens és egy típus utótag. Az exponens rész az egy "e" vagy "E" és utána egy egész, ami lehet előjeles (+,-). Egy lebegőpontos literál legalább egy számjegy és egy tizedespont vagy "e" ("E"). Íme néhány példa lebegőpontos literálra: 3.1415 -3.1E12 .1e12

12 Stringek Speciális Karakterek
Egy string literál nulla vagy több karakter dupla vagy egyszeres idézőjelek közé zárva. Egy stringet ugyanolyan típusú idézőjellel kell határolni. Ez azt jelenti, hogy mind a kettő vagy egyszeres vagy dupla idézőjel. A következő példák string literálokat mutatnak be: "blabla" 'blabla' "1234" "one line \n another line" Speciális Karakterek A következő speciális karakterek lehetnek a JavaScript string literáljaiban: \b backspace (visszalépéses törlés) \f lapdobás \n újsor \r kocsivissza \t tabulátor karakter \a sípolás

13 Kifejezések A kifejezés literálok, változók, operátorok és utasítások kombinációja amely kiértékelése egyetlen értéket eredményez. Az érték lehet egy szám, egy string vagy egy logikai érték. Elvben kétfajta kifejezés van: ami egy értéket ad egy változónak, és amelyiknek egyszerűen van egy értéke. Például a kifejezés x = 7 egy olyan kifejezés ami az x változónak 7-t értékül. A kifejezés önmagának adja értékül a 7-t. Az ilyen kifejezés az értékadó operátor-t használja. Másrészt a kifejezés 3 + 4 egyszerűen kiértékelődik 7-nek, és nem végez értékadást. Az ilyen kifejezésekben használt operátorokat lehet operátor-nak tekinteni.

14 A JavaScriptben az alábbi kifejezések találhatók:
Aritmetikai: egyetlen számot ad vissza string: egyetlen stringet eredményez Logikai: igaz vagy hamis értéket eredményez A speciális kulcsszó null jelöli a null értéket. A változóknak nem lehetne definiálatlan értéket adni, és nem lehetne használni őket futási hiba nélkül.

15 Feltételes Kifejezések
Egy feltételes kifejezés felvehet kétfajta értéket a feltételtől függően. A szintaxis a következő: (feltétel) ? érték1 : érték2 Ha a feltétel igaz, a kifejezés értéke az érték1 lesz, ha nem az érték2. Ugyanott lehet feltételes kifejezést is használni, ahol lehet sima kifejezést. For example, status = (age >= 18) ? "adult" : "minor" Ez az utasítás "adult"-ot ad értékül a status változónak, ha az age tizennyolc vagy nagyobb, egyébként pedig "minor"-t ad értékül.

16 Értékadó Operátorok (=, +=, -=, *=, /=)
Egy értékadó operátor a baloldali operandusnak ad értéket. Az egyenlőség operátor (=) egyszerűen a jobboldali operandus értékét adja át a baloldali operandusnak. Például x = y az y értékét adja az x operandusnak. Ezek az operátorok az aritmetikai operátorok rövidítései: x += y jelenti x = x + y x -= y jelenti x = x - y x *= y jelenti x = x * y x /= y jelenti x = x / y x %= y jelenti x = x % y

17 Operátorok A JavaScriptben vannak aritmetikai, string és logikai operátorok. Vannak kétoperandusú és egyoperandusú operátorok. A kétoperandusú operátoroknak egyik operandusa az operátor előtt, a másik pedig az operátor után helyezkedik el: operandus1 operátor operandus2 Például, or x * y Az egyoperandusú operátornál az operandus vagy az operátor után, vagy az operátor előtt található: operátor operandus vagy operandus operátor Például, x++ or ++x.

18 Összehasonlító Operátorok (= =, >, >=, <, <=, !=)
Egy összehasonlító operátor összehasonlítja az operátorait és visszatér egy logikai értékkel, ami igaz, ha az összehasonlítás igaz, ellenkező esetben pedig hamis. Az operandusok lehetnek numerikus vagy string értékek. string értékek összehasonlítása a lexikografikus sorrenden alapul.

19 string Operátorok A stringekre az összehasonlító operátorokon kívül a konkatenáció operátort (+) is lehet használni. Ez az operátor két stringet összekapcsol és visszatér a két operandus string úniójaként kapott stringgel. Például: "my " + "string" eredménye: "my string" A rövidített értékadó operátort (+=), szintén lehet használni stringek konkatenálására.

20 A JavaScript Objektum Modell
A JavaScript egy egyszerű objektum-orientált paradigmán alapszik. Egy objektum elemváltozók együttese, amik JavaScript változók. Az elemváltozók más objektumok is lehetnek. Egy objektumhoz kapcsolódó függvényeket az objektum elemfüggvényeinek nevezzük. Ezen felül a beépített objektumok segítségével saját objektumokat lehet definiálni.

21 Objektumok és Elemváltozók
Egy JavaScript objektum elemváltozói összefüggésben vannak magával az objektummal. Az objektumok elemváltozóit egy egyszerű jelölés segítségével lehet elérni: objektumNév.elemváltozóNév Az objektumnévben is, és az elemváltozónévben is a kis és nagybetűk meg vannak különböztetve. Egy elemváltozót értékadás áltál definiálunk. Például tegyük fel, hogy van egy myCar nevű objektumunk. Így adhatunk a make, model és a year elemváltozóknak értéket: myCar.make = "Ford" myCar.model = "Mustang" myCar.year = 69;

22 Függvények és Elemfüggvények
A függvények a JavaScript nyelv egyik alapvető építőelemei. Egy függvény egy JavaScript eljárás--utasítások halmaza, amelyek speciális feladatokat végeznek. A függvény definíciója a function kulcsszóval kezdődik, amit követ a függvény neve a függvény paraméterlistája, amiket zárójelbe kell tenni és vesszővel elválasztani a JavaScript utasítások, amiket kapcsos zárójelek közé kell elhelyezni Egy alkalmazásban az aktuális lapon definiált összes függvényt lehet használni. Általában célszerű az összes függvény a lap HEAD részében definiálni. Mivel, ha egy felhasználó betölti a lapot, akkor az függvények biztos, hogy előbb betöltődnek, minthogy a felhasználó valamit is csinálna. A függvényekben lévő utasítások lehetnek korábban definiált függvények meghívásai. Példa függvény definiálásra: function pretty_print(string) { document.write("<HR><P>" + string) } Ennek a függvénynek egy string argumentuma van, amit néhány HTML tag-hez hozzákapcsol a konkatenáció operátor segítségével és az eredményt kijelzi az aktuális dokumentumban.

23 Új Objektumok Létrehozása
Mind a kliens, mind pedig a server JavaScript alkalmazásokban számos előre definiált objektum van. Az új objektumok létrehozása két lépcsőben törénik: Definiálni az objektum típust függvény írás segítségével. Létrehozni a new paranccsal az objektum egy példányát. Ha definiálni akarunk egy objektum típust, akkor létre kell hoznunk egy függvényt, ami az objektum típus nevét, elemváltozót, és elemfüggvényeit meghatározza. Példaként tegyük fel, hogy létre akarunk hozni az autók részére egy objektum típust. Azt akarjuk, hogy az objektum neve car legyen, és legyenek make, model és year elemváltozói. Ehhez a következő függvényt kell megírni: function car(make, model, year) { this.make = make; this.model = model; this.year = year; } A this ebben az esetben a függvénynek átadott értékeket rendeli az objektum elemváltozóihoz. Most már létre lehet hozni a mycar nevű objektumot: mycar = new car("Eagle", "Talon TSi", 1993); Ez az utasítás létrehozza a mycar objektmot, és a megfelelő elemváltozóértékekhez hozzárendeli a megfelelő paraméter értékeket.