Ízelítő a  JavaScript nyelvből

1. Főbb tulajdonságok:

• Interpretálás: a forrássorokat a böngésző értelmezi és hajtja végre, lépésről lépésre.
• Tehermentesíti a kiszolgálót és a közbülső hálózatot. (Űrlapok kitöltésekor a kliens ellenőrzi az adatok helyességét)
• Interaktivitás (input mezők, egérműveletek)
• Biztonság: a JavaScriptben nincs semmilyen utasítás vagy függvény, amivel elérhetővé válnának a kliens fájljai a kiszolgáló számára.

2. JavaScript alapok

• Beillesztése a HTML forrásba:
• A <SCRIPT> jelölő segítségével

<SCRIPT language = "JavaScript">
...
</SCRIPT>
• Eseménykezelőként, más HTML jelölők paramétereként (ld. később)
• Megjegyzés: /* ..... */   vagy // (a sor hátralévő része).
• Kis- és nagybetűk különbözőek.
• Objektum alapú nyelv. Egy objektum részei: elemváltozók (tulajdonságok) és elemfüggvények (metódusok).
• Saját változók használata, típusok:

    var kor = 21;                // egész
    var kamatláb = 10.5          // lebegőpontos (valós)
    var lakhely = "Nyíregyháza"; // vagy 'Nyíregyháza', string
    var hazas = false;           // logikai (boolean), false/true

A var elhagyható, de használata ajánlott (egy függvény belsejében lokális változót csak így definiálhatunk).

• Az utasítások végén pontosvessző. (Elhagyható, ha külön sorban vannak az utasítások.)
• A JavaScript gyengén típusos nyelv: automatikus konverziók.

var a = 5;
var b = '6';
var c = '7';
a + b értéke 11,   b + c értéke '67', b * c értéke 42 lesz.

2_1. Példa: Képcsere 1. Ha az egeret a kép fölé visszük, az megváltozik. Megoldás
2_1. Feladat: Képcsere 2. Amelyik kis kép fölé visszük az egeret, az jelenik meg nagyban.

3. Operátorok, kifejezések

• Aritmetikai:

*, /, % (az osztás maradékát adja vissza: 5 % 3 értéke 2, 5.5 % 3 értéke 2.5) , +, -
 
• Logikai:

! (negálás, egy operandusú), && (és), || (vagy)
 
• Összehasonlító:

== (egyenlő), != (nem egyenlő), <, >, <=, >=
 
• Léptető (egy operandusú operátorok):

++, --
++a; //növeli a értékét eggyel, értéke a+1
a++; //növeli a értékét eggyel, értéke a

3_1. Példa: forrás, futtatás  (A források sok hasznos és új információt tartalmaznak!)
 

• Bitenkénti:

~ (negálás, egy operandusú), & (és), | (vagy), ^ (kizáró vagy), << (balra léptetés pl: a << 2), >> (jobbra léptetés az előjel megtartásával), >>> (jobbra léptetés, az előjelet nem veszi figyelembe) (ld. 3. Példa)
 
• Értékadó:

=,
+=, -=, *=, /= stb.  Összetett értékadások, bármely kétoperandusú aritmetikai, bitenkénti műveletre.
Értelmezése: a += b egyenértékű: a = a + b

3_2. Példa: Számológép1 forrás, futtatás
3_3. Példa: Számológép2 futtatás
3_1. Feladat: Jelenjen meg három nyomógomb a weblapon piros, kék ill. fehér felirattal. Amelyikre kattintunk, olyan színű legyen a háttér.
Segítség: a háttérszín elérése: document.bgColor.
3_2. Feladat:Készítsünk valuta váltó programot!

• Feltételes kifejezés

feltétel ? kifejezés1: kifejezés2    értéke: kifejezés1, ha a feltétel igaz, kifejezés2, ha a feltétel hamis.
Pl.: c = a > b ? a: b;     c értéke a és b közül a nagyobbik lesz

3_4. Példa: Párosság forrás, futtatás

3_3. Feladat: Két számról döntsük el, hogy a második osztója-e az elsőnek! forrás, futtatás
 

4. Utasítások

4.1 Utasítás blokk, összetett utasítás

4.2 for ciklus

Az inicializáló kifejezés egyszer, amikor a ciklusra kerül a vezérlés, hajtódik végre. A ciklus addig ismétli az utasítás vérehajtását, amíg a feltétel (logikai kifejezés) igaz. Az utasítás után mindig végrehajtja a léptető kifejezést. Az inicializáló kifejezés több részből is állhat, vesszővel elválasztva. A ciklusfej bármely része elhagyható. Az utasítás lehet blokk is.

4_1. Példa: Összegzés futtatás
4_2. Példa: Csillagok futtatás

Feladatok:
  4_1. N! kiszámítása
  4_2. Írjunk ki csillagokat háromszög alakban!
  4_3. Állítsuk elő a szorzótáblát ciklusok segítségével!

4.3 while utasítás

while (feltétel)
    utasítás

Addig ismétli az utasítást, amíg a feltétel (logikai kifejezés) igaz. Az utasítás lehet blokk is.

4_3. Példa: Írjuk ki, hogy a 10%-os kamatra elhelyezett pénzünk hány év alatt éri el az egymillió Ft-ot! futtatás
 

4.4 do while utasítás

Hátul tesztelő ciklus. Addig ismétli az utasítást, amíg a feltétel (logikai kifejezés) igaz.

4_4. Példa: Írjuk ki, hogy a 10%-os kamatra elhelyezett pénzünk hány év alatt éri el az egymillió Ft-ot! futtatás
 

4.5 Az if... else... utasítás

Ha a feltétel (logikai kifejezés) igaz, akkor akkor az utasítás1 kerül végrehajtásra, majd az if szerkezet utáni utasításokkal folytatódik a program. Ha a feltétel hamis, akkor az utasítás2 kerül végrehajtásra. Az else ág elhagyható. Mindkét utasítás lehet összetett utasítás is.

4_5. Példa: Üdvözöljük a napszaknak megfelelően a felhasználót! futtatás

Feladatok:
  4_4. Az üdvözlés négy féle legyen: Jó reggelt!, Jó napot!, Jó estét!, ill. Jó éjszakát!
  4_5. Írjunk JavaScript függvényt, amely kiértékeli a következő űrlapot!
 

4.6 A switch utasítás

switch (kifejezés)
{
     case érték1:
        utasítások
        break
     case érték2:
        utasítások
        break
        ...
     default:
        utasítások
}

A kifejezés kiértékelése után az értelmező azon a case ágon folytatja a futtatást, ahol az érték megegyezik a kifejezés értékével. Ha ilyen ág nincs, akkor a default ágra kerül a vezérlés. A default ág elhagyható. A break utasítással érhetjük el azt, hogy a megfelelő ág végrehajtása után a vezérlés a switch utáni első utasításra kerüljön.

4_6. Példa: Írjuk ki, hogy milyen nyelvű böngészőt használunk! forrás, futtatás
 
 

5. Egyszerű párbeszédablakok

alert: A felhasználót tájékoztathatjuk egy üzenettel. Szintaktikája: alert(üzenet). Az argumentumként kapott stringet (üzenet) egy OK gomb társaságában kiírja egy kis párbeszédablakba.

confirm: A felhasználó igaz/hamis döntést hozhat. Szintaktikája: confirm(üzenet). Az argumentumként kapott stringet (üzenet) egy OK és egy Cancel gomb társaságában kiírja egy kis párbeszédablakba. A függvény true értékkel tér vissza, ha az OK, és false értékkel, ha a Cancel gombot nyomtuk meg.

prompt: Egy szövegbeviteli mezőt nyúj. Szintaxisa: változó = prompt(kiírandó, alapérték). Megjeleníti a kiírandó stringet, valamint egy szövegbeviteli mezőt benne az alapértékkel (string), amit felülírhatunk. Visszatérési értéke a beírt szöveg (, ha az OK-ra kattintottunk).

5_1. Példa: futtatás

5_1. Feladat: Egy gombra kattintva jelenjen meg egy dialógusablak, melyben angolul megadhatjuk az oldal kívánt háttérszínét! (A document objektum bgColor elemváltozójának kell értéket adnunk.)
 

6. Időzítés

6_1. Példa: Egy link automatikus aktivizálódása (letöltése) egy megadott időintervallum letelte után. futtatás
6_2. Példa: Egy oldal automatikus frissítése. futtatás
6_3. Példa: Egy szöveg futtatása a státuszsorban. futtatás

6_1. Feladat: Digitális óra megjelenítése. Használjuk a dátum objektum getHours(), getMinutes() és getSeconds() függvényeit!
 

7. Űrlap ellenőrzése elküldés előtt

Az alábbi példa négy különböző mező ellenőrzését végzi el. Ehhez használjuk a stringek kezelését megvalósító string objektum elemváltozóit, elemfüggvényeit:

string objektum:
  Elemváltozó:
    length   a string hosszát tartalmazza.
  Elemfüggvények:
    charAt(index)  az index-edik pozícióban lévő karakterrel tér vissza. (A karakterek sorszámozása 0-va kezdődik!)
    indexOf(minta) a minta-t keresi, visszatérési értéke a megtalált pozíció, ill. ha nem talál: -1.
    substring(index1, index2) egy részlánccal tér vissza az index1-től az index2 előtti karakterrel bezárólag.
    toLowerCase() kisbetűssé konvertálja a stringet.
    toUpperCase() nagybetűssé konvertálja a stringet.

7_1. Példa: Egy űrlap ellenőrzése forrás, futtatás