10. A JavaScript alapjai
10.2.3 Függvények, változók, adattípusok
Függvények
Az eddig itt bemutatott kódokban csak utasítások szerepeltek. A forráskód könnyebb olvashatósága érdekében rendszerezhetjük az utasításainkat külön-böző függvényekbe. A függvények, olyan utasítások csoportja, amit egy egység-ként kezelhetünk. Az egyes függvényeket a meghívásuk előtt meg kell határoz-nunk. Ez a function kulcsszóból, a függvény nevéből, esetleges paraméterlistájából és a törzséből áll.
1 function Udvozles() { 2 alert(’Szia!’);
3 }
Láthatjuk a függvény nevét, mely az Udvozles nevet kapta. A JavaScript érzékeny kis- és nagybetűkre, ezért ha meghívjuk később ezt a függvényt, akkor ugyan ebben a formában (Udvozles) kell rá hivatkoznunk. A függvény neve utáni zárójel kötelező. Amennyiben olyan függvényt írunk, amelynek van para-métere úgy az egyes parapara-métereket a két zárójel között kell felsorolnunk. A függvény törzsét, azaz az utasítások sorozatát kapcsos zárójelek között kell megadni.
Célszerű ezeket a függvény meghatározásokat a HTML dokumentum
<head> részében elhelyezni, így amikor használni akarjuk a dokumentumban, akkor már biztos, hogy léteznek.
1 <html>
2 <head>
3 <title>Függvények használata</title>
4 <script type=„text/javascript”>
5 function Udvozles(nev) { 6 alert(’Szia ’ + nev + ’!’);
7 }
8 </script>
9 </head>
10 <body>
11 A HTML dokumentum törzse 12 </body>
13 </html>
A JavaScript alapjai 153
A fenti HTML dokumentumot betöltve a böngészőbe, semmi nem fog tör-ténni. Ahhoz hogy a függvényünk produkáljon eredményt, meg kell hívni vala-hol. A függvény meghívása úgy történik, hogy valahol a dokumentumban utasí-tásként elhelyezzük a függvény nevét és paraméterét, ha van.
1 <html>
2 <head>
3 <title>Függvények használata</title>
4 <script type=„text/javascript”>
5 function Udvozles(nev) { 6 alert(’Szia ’ + nev + ’!’);
7 }
8 </script>
9 </head>
10 <body>
11 <scipt type=„text/javascript”>
12 Udvozles(„Kinga”);
13 Udvozles(„Béla”);
14 </script>
15 </body>
16 </html>
Megfigyelhetjük a példában, hogy egyszer írtuk meg a függvényt, de azt kétszer is használtuk más paraméterrel.
42. ábra: JavaScript feldolgozása
Ha olyan függvényt szeretnénk írni, amely valamilyen értéket visszaad, ak-kor egy újabb kulcsszót kell majd használnunk a függvény törzsében, ez pedig nem más, mint a return.
1 function terulet(a, b) { 2 return (a*b);
3 }
A függvény visszatérési értéke a paraméterben megkapott két szám szor-zata lesz. Nézzük meg a gyakorlatban is hogy néz ez ki.
4 <html>
5 <head>
6 <title>Függvények használata 2</title>
7 <script type=„text/javascript”>
8 function terulet(a ,b) { 9 return (a + b);
10 }
11 </script>
12 </head>
13 <body>
14 <scipt type=„text/javascript”>
15 document.write(’Terület: ’ + terulet(2,5));
16 </script>
17 </body>
18 </html>
Változók
Az előző fejezetekben már találkozhattunk a változó szóval, de egy- két fontos dolgot még meg kell említeni róla. A változók neveinél meg van határoz-va, hogy miből épülhet fel. Ezek a következők, amire jó hogyha odafigyelünk:
A változók neveiben csak az angol abc kis- és nagybetűit, a számjegye-ket 0-9-ig, és az _ jelet. Ezen kívül semmi mást!
A változónevek első karaktere nem lehet szám!
A változónevek úgy, mint a függvények nevei is kis- nagybetű érzéke-nyek, azaz a szam változó nem ugyan az, mint a Szam vagy a SZAM!
A JavaScript alapjai 155
Lehetőségünk van létrehozni különböző hatókörű változókat. Azaz meg tudjuk határozni, hogy egy változó globálisan elérhető legyen a dokumentumon belül, vagy csak lokálisan például egy függvény belsejében.
A lokális változók neveit a programban var kulcsszó előzi meg. Ha a válto-zót függvényeken kívül használjuk, akkor elhagyható a kulcsszó. Ha a függvény törzsében hozunk létre egy változót a var kulcsszóval, akkor az csak ott hasz-nálható, a függvényen kívül már nem. A függvények paraméterében átadott változók is lokálisak.
Ha szeretnénk értéket adni egy változónak, akkor a sima egyenlőség jelet kell használnunk. Tehát az egyenlőség jel bal oldalán áll a változó neve, a bal oldalán pedig az érték vagy kifejezés. Ezeket persze lehet variálni is.
1 szam = 12;
2 szam = szam + 1; // Itt növeljük az értékét 3 szam += 1; // Ez ugyan az, mint az előző 4 szam -= 1; // Itt 1-el csökkentjük az értéket 5 szam++; // Ez ugyan az, mint ami 3. sorban van 6 szam--; // Ez a 4. sorral egyezik meg
Adattípusok
Vannak olyan programozási nyelvek, ahol meg kell határoznunk előre, hogy milyen adattípussal szeretnénk dolgozni. Ilyen például a C# vagy a Pascal.
A JavaScriptben nem kell ilyenekkel foglalkoznunk, de azért nézzük át, milyen adattípusok léteznek a JavaScriptben.
Számok: Ide tartoznak, az egész számok, és a lebegőpontos számok is.
Például: 1, 6 vagy a 3.1415
Logikai változók: Ide a true és false logikai értékek tartoznak.
Karakterláncok: Ezek valójában a szövegek, amik több karakterből te-vődnek össze. Például „alma a fa alatt”
null: ez egy speciális érték, ez jelenti a még nem meghatározott válto-zókat.
A JavaScript az egyes adattípusok közötti átalakításról megpróbál önállóan gondolkodni. Ez némely esetben probléma nélkül fog működni.
1 document.write(’Összesen: ’+total);
Itt a total változóban tárolt számot automatikusan szöveggé alakítja.
Előfordulhatnak olyan esetek is, amikor nem bízunk meg a kapott változó típu-sában és szeretnénk az átalakítani. Erre a célra szolgál két függvény a parseInt() és a parseFloat(). Míg az első egy szöveget alakít át szám-má, az utóbbi szövegből készít lebegőpontos értéket.
Mind a két függvény addig olvassa be a karaktereket a szöveg elejétől, amíg az szám vagy pont. Utóbbi a csak a parseFloat() függvényre igaz.