Bevezetés a JavaScript nyelvbe, alapvetően korábbi, főleg C-szintaxisú nyelvekből szerzett tapasztalatokra építve. Elsősorban az ezekkel való hasonlóság kerül ebben a fejezetben hangsúlyozásra.
A kliensoldali webprogramozás nem áll másból, mint hogy megfelelő JavaScript kódot kell elhelyezni a HTML kódban. A „JavaScript” kifejezés azonban több különböző elemet takar. Az egyik maga a nyelv, az, amit az ECMAScript szabvány is definiál. A másik az a programozói interfész, amin keresztül JavaScript kóddal manipulálni lehet a betöltött dokumentum elemeit. Ebben a fejezetben kizárólag az első értelemben vett JavaScripttel, azaz a nyelvi elemekkel foglalkozunk.
A JavaScript nyelv tervezésekor több más nyelv szolgált mintaként. A szintaxist – ahogy azt a JavaScript nyelv történeténél olvastuk – szándékosan a C nyelvcsaládtól örökölte, hogy a Java nyelvvel ebben a tekintetben hasonló legyen. A hasonlóság azonban nagyjából ki is merül ebben. Másik forrás a Scheme nevű, funkcionális programozási nyelv volt, amelytől a JavaScript a funkcionális aspektusát kapta meg (függvények mint első osztályú objektumok). Egy következő minta a Self nyelv volt, mely egy prototípus alapú objektum-orientált nyelv. A Self nyelv a hagyományos objektum-orientált programozási modell hátulütőit próbálta oly módon megoldani, hogy megszüntette az osztályok és objektumok között különbséget, és helyette dinamikus objektumokat vezetett be, amelyek közvetlenül egymást másolják. Azokat az objektumokat pedig, amelyekről a másolatokat készítik, prototípusoknak hívja. A JavaScript nyelv ebből a koncepcióból örökli dinamikus objektumait, és a prototípus alapú, szó szerinti objektum-orientáltságát. Az utolsó ihletet adó alkalmazás a HyperCard volt, ami az első hipermédia rendszernek is tekinthető: szövegek, táblázatok, képek interaktív kezelését tette lehetővé. A JavaScript a rendszerből az eseménykezelés filozófiáját vette át.
A sokféle minta egy olyan nyelvet eredményezett, amely nagyon sokoldalúan használható, és nagyon sokféle programozási mintának ad teret. Ebben a tananyagban azzal a – nem kizárólagos – feltételezéssel élünk, hogy az olvasó jártas valamilyen C alapú, magas szintű programozási nyelvben, mint pl. C++ vagy Java. A JavaScript nyelvet is ebből a szempontból közelítjük meg, azaz kiemeljük a szintaktikailag hasonlóságot, és ehhez képest elemezzük az eltéréseket. Tesszük ezt abban reménykedve, hogy a hasonlóságot felismerve az olvasó nem ijed meg egy új nyelvtől, hanem a meglévő ismereteire alapozva bővítheti a tudását. A JavaScript nyelv többi aspektusát részben érintjük, de nem célunk ebben a tananyagban egy teljesen részletes mélyre ható nyelvi bemutatás. Csupán olyan mértékben mutatjuk be a nyelvet, amennyire az segítségünkre lesz eredeti célunkban: a weboldalak programozásában.
Az alábbi nyelvi bevezető alapvető célja egyrészt az, hogy azt megértve az olvasó képes legyen tetszőleges adatszerkezetet a nyelv elemeivel definiálni (modellalkotás), másrészt az, hogy ezen adatszerkezeteken képes legyen feladatokat megoldani programozási tételek JavaScript nyelven történő implementálásával.
Ahogy fentebb említettük a JavaScript tudatosan hasonlít a C++ nyelvhez: szintaxis, vezérlési szerkezetei, operátorai szinte egy az egyben megegyeznek. A két nyelv külső hasonlósága mögött azonban lényeges különbségek vannak. A C++ nyelv egy
A JavaScript ezzel szemben egy
A gyengén típusosság azt jelenti, hogy egy változó típusa a benne tárolt értéktől függ, vagy másképpen megfogalmazva: a típusok az értékekhez tartoznak, nem a változókhoz. Az ilyen nyelveket dinamikusan tipizált nyelveknek is szokták hívni. Ez a gyakorlatban azt jelenti, hogy míg C++-ban minden változó bevezetésénél meg kell mondanunk a típusát, és onnantól kezdve csak az adott típusú adat tárolható benne, addig JavaScriptben csak jeleznünk kell, hogy egy változót szeretnénk létrehozni (a var kulcsszóval, ld. később), és onnantól kezdve bármilyen típusú értéket tárolhatunk benne. A gyengén típusossága rengeteg automatikus típuskonverzióval jár olyan esetekben, amikor különböző típusú adatokkal dolgozunk (pl. összehasonlítás, műveletek, stb.) Ennek megvan a maga előnye, hiszen pl. egy szövegként tárolt számot fel lehet használni mindenféle explicit konverzió nélkül matematikai kifejezésekben, ugyanakkor nem várt eredménnyel is szolgálhat egy automatikus átalakítás.
A JavaScript kódot a böngészőbe épített JavaScript értelmező (interpreter) értelmezi sorról sorra. Az értelmezett nyelvekben nincsen fordítási fázis, nem a lefordított kód fut, hanem az első lehetőségnél az értelmező elkezdi a program végrehajtását. Ennek egyik következménye, hogy JavaScriptben nincsen főprogram. A másik az, hogy a programban lévő hiba akkor derül ki, amikor az értelmező ráfut a hibát tartalmazó sorra. Az értelmezett nyelveknél a forrás maga a program. Érdemes megjegyezni, hogy a modern böngészők az optimalizálás és gyors futás érdekében végeznek valamennyi előfeldolgozást a kódban (sőt futás közben is).
A böngésző a HTML oldalt sorfolytonosan tölti be és jeleníti meg. Ha script blokkal találkozik, akkor az abban lévő JavaScript kódot futtatja. A script blokk értelmezésének befejeztével folytatja a blokk után HTML kód betöltésével. Ha egy script blokkban a JavaScript kód valamilyen oknál fogva nem halad tovább (végtelen ciklus, felugró ablak), akkor az oldal betöltése is megáll.
JavaScriptben hiba esetén a hibás kódot tartalmazó script blokk értelmezése megáll, a böngésző a script blokk utáni HTML rész betöltését, és újabb script blokkok értelmezését végzi el. Az alábbi példában az első script blokkban az első konzolra írás sikerül, azonban a következő sorban ReferenceError-t kapunk, hiszen olyan objektum tulajdonságát szeretnénk beállítani, ami nem is létezik. A szkript futása ebben a script blokkban befejeződik, a második konzolra írás nem történik meg. A böngésző megjeleníti a második paragrafust is, majd folytatja a második script blokk értelmezésével, amelyben a 3-as szám a konzolra íródik.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bevezetés a kliensoldali webalkalmazások készítésébe</title>
</head>
<body>
<p>Paragrafus 1.</p>
<script type="text/javascript">
console.log('1. szkript blokk eleje');
alma.szin = 'piros';
console.log('1. szkript blokk vége');
</script>
<p>Paragrafus 2.</p>
<script type="text/javascript">
console.log('2. szkript blokk');
</script>
<p>Paragrafus 3.</p>
</body>
</html>
A konzolon megjelenő eredmény a következő:
A fenti JavaScript kód futásának eredménye a konzolonSzkriptnyelveknek azokat a programozási nyelveket nevezzük, amelyek egy adott alkalmazás vagy működési környezet vezérlését teszik lehetővé. Ilyen például a shell szkript, amely egy operációs rendszer működését vezérli, és a JavaScript is ilyen, hiszen a böngésző és a betöltött dokumentum állapotát változtatja meg.
A JavaScript nyelv néhány további jellemzője:
Megjegyzéseket ugyanúgy lehet írni JavaScriptben, mint C++-ban. Az egysoros megjegyzést a // után, a többsorost a /* */ közé lehet írni.
//egysoros megjegyzés /* többsoros megjegyzés */
JavaScriptben a következő elemi adattípusok vannak:
Ezek mellett még két speciális értéket (egyértékű elemi típust) különböztet meg:
Az összetett típusok:
Az alábbiakban gyakran beszélünk majd egy adott típusú érték literálformájáról. Literálformának nevezzük azt, ahogy az érték megjelenik kifejezésekben (pl. értékadásban).
A logikai típusnak két értéke van:
true false
Logikai kifejezésekben (pl. egy elágazás feltételében) bármilyen érték logikai értékké konvertálódik. Hamis értéket adnak az alábbiak:
Minden egyéb érték igazként értékelődik ki.
A JavaScript nem különbözteti meg az egész számokat a lebegőpontosaktól, a háttérben minden szám 64 bites lebegőpontos számként van tárolva. A gyakorlatban amíg egy szám egészként ábrázolható, egészként jelenik meg, ha a rajta végzett művelet kivezet az egész számok köréből, akkor lebegőpontos számként kerül kiírásra. Az egész számok 32 bites előjeles egészként kezelődnek, ami meghatározza az értéktartományukat. Számliterálok:
12 -12 12.34 -12.34
A JavaScript képes oktális és hexadecimális számokat is megjeleníteni. Ezekre példa a hivatalos leírásban található. A lebegőpontos számoknál a tudományos formátum is támogatott.
JavaScriptben a szövegek karakterek sorozata. Nem különbözteti meg a karaktert a szövegtől. Szöveges érték megjelenítéséhez egyaránt használható az idézőjel és a macskaköröm is. Egyik a másikban minden gond nélkül megjelenhet. A szövegliterál támogatja az escape szekvenciákat.
'Szöveg' "Szöveg" 'Idézőjelben "így" macsakörmölök' "Macskakörömben 'így' idézek" 'Idézőjelben \' idézőjel' "Macskakörömben \" macskaköröm" 'Escape: \t \n \\ '
Bár a nyelv megkülönbözteti ezt a két értéket, szerepük nagyjából hasonló: az undefined a nem definiált értéket, a null a szándékos érték nélküliséget jelöli. A JavaScriptben az undefined fordul elő többször: ez az értéke egy kezdőérték nélküli változónak, vagy ezzel tér vissza egy függvény, ha nem adunk explicit visszatérési értéket. Ezzel szemben null értékkel sokkal ritkábban találkozunk. Literálformái:
undefined null
Változókat a var kulcsszó segítségével hozunk létre. Változó létrehozásakor rögtön adhatunk a változónak kezdőértéket. Ha ezt nem tesszük meg, akkor a változó értéke undefined lesz. Több változót is lehet egyszerre deklarálni, ezeket a , operátorral választjuk el egymástól.
//Változó kezdőértékkel
var nev = 'Micimackó';
//Változó kezdőérték nélkül
var masik; //undefined
//Több változó deklarálása egyszerre
var alma = 'piros',
korte = 'sárga';
Bár a függvényeknél részletesebben tárgyaljuk, de itt is érdemes megemlíteni, hogy függvényen kívül deklarált változó globális lesz, míg függvényen belül létrehozott lokálisként jön létre.
Ha elhagyjuk a var kulcsszót, akkor minden esetben globális változó jön létre. Ennek nem várt mellékhatásai lehetnek, éppen ezért minden esetben ajánlott a var kulcsszó használata.
A fentiek alapján elképzelhető, hogy véletlen elírással könnyen hozhatunk létre globális változókat. Ennek elkerülésére az ECMAScript 5 bevezette az ún. strict mode-ot, amely hibát ad var kulcsszóval nem deklarált változó használata esetén.
Mivel a JavaScript szintaxisát a C nyelvcsaládból örökölte, így az operátorok nagy része is megegyezik azokkal. Rövid felsorolásban tekintsük át az operátorokat:
Ezeken kívül még van pár operátor, amikről részletesen a dokumentációban lehet olvasni.
A fentiek közül a === operátort érdemes kiemelni. Mivel a JavaScript gyengén típusos nyelv, ezért két érték == operátorral történő összehasonlításakor automatikus konverziót végez az értékeken, hogy azonos típusra hozza őket, majd azokat hasonlítja össze. A === operátorral kiküszöbölhető az automatikus konverzió, mert az típus és érték szerinti egyezőséget vizsgál. Az automatikus típuskonverzióból adódó meglepetések elkerülése végett érdemes explicit konvertálás után a === operátort használni. A típus és érték szerinti egyenlőtlenséget a !== operátorral vizsgálhatjuk.
'1' == 1 //true '1' === 1 //false '1' !== 1 //true
A másik említésre méltó dolog az operátorokkal kapcsolatban, hogy ugyanúgy a + az összeadás és a szövegösszefűzés operátora. Ha a + operátor bármelyik operandusa szöveg, akkor az operátor szövegösszefűzést végez, azaz az operandusokat szöveggé alakítja, ha valamelyik nem még az.
1 + 1 //2 'piros' + 'alma' //'piros alma' '1' + 1 //'11' 'Jézus ' + 12 + ' tanítványa' //'Jézus 12 tanítványa' 'Jézus ' + 6 + 6 + ' tanítványa' //'Jézus 66 tanítványa' 'Jézus ' + (6 + 6) + ' tanítványa' //'Jézus 12 tanítványa' 6 + 6 + ' tanítványa Jézusnak' //'12 tanítványa Jézusnak', mert balról jobbra értékeli ki a kifejezést
Ha járatosak vagyunk bármilyen C alapú nyelvben, akkor a JavaScript vezérlési szerkezetei is ismerősek lesznek.
//egyirányú elágazás
if (felt) {
utasítások
}
//kétirányú elágazás
if (felt) {
utasítások
} else {
utasítások
}
//többirányú elágazás, a vizsgálat === operátorral történik
switch(kifejezés) {
case érték1:
utasítások
break;
case érték2:
utasítások
break;
default:
utasítások
}
A ciklusoknál egyedüli újdonságként a for ... in ciklus jelenik meg, amely egy objektum elemeit sorolja fel (ld. az objektumoknál). A for ciklusnál a deklarált ciklusváltozó nem lesz a ciklusmagra nézve lokális, az egész függvényen belül elérhető.
while (felt) {
utasítások
}
do {
utasítások
} while (felt);
for (var i = 1; i <= n; i++) {
utasítások
}
for (var tul in obj) {
utasítások
}
JavaScriptben kétféle összetett típus van: a tömbök és az objektumok.
A JavaScript tömb annyiban hasonlít a C++-ban megismert tömbökre, hogy ez is egy 0-tól kezdve, számokkal indexelt adatszerkezet, ahol az egyes adattagokat a [] operátorral érhetjük el. Ugyanakkor egy nagyon dinamikus típusról van szó abban az értelemben, hogy a tömb hossza tetszőlegesen változtatható, új elemeket lehet beletenni, meglévőket törölni, módosítani, és bármelyik eleme tetszőleges típusú lehet.
Literálformája a [], a szögletes zárójelpárok között lehet megadni a tömb elemeit. A tömb hosszát a length tulajdonságával kérhetjük le.
Nézzünk néhány példát a tömb használatára.
//Üres tömb létrehozása var uresTomb = []; //Tömb létrehozása előre feltöltött elemekkel var tomb = [12, 'alma', true]; //Hivatkozás a tömb elemeire tomb[0]; // => 12; tomb[1]; // => 'alma'; tomb[2]; // => true; //A tömb hosszának lekérdezése tomb.length // => 3 //Elemek módosítás tomb[0] = 13; tomb[0]; // => 13 //Új elem beszúrása a tömb végére tomb[tomb.length] = 'uj'; // => tomb[3] === 'uj' //Új elem felvétele tetszőleges indexre tomb[100] = 'messze'; tomb.length; // => 101 //A köztes elemek undefined értékűek tomb[99]; // => undefined //Elem törlése (méret nem változik) delete tomb[1]; tomb[1]; // => undefined tomb.length; // => 101
Mátrixokat, többdimenziós struktúrákat tömbök tömbjeként lehet létrehozni:
//Mátrix
var m = [[1, 2, 3], [4, 5, 6]];
//Vagy sokkal olvashatóbb módon:
var m = [
[1, 2, 3],
[4, 5, 6]
];
//Elem elérése:
m[1][2]; // => 6
A tömbök tipikus feldolgozása ciklussal történik. Bár a for ... in ciklus is használható erre, a legbiztonságosabb feldolgozást a klasszikus for ciklus adja.
var gyumolcsok = [
'alma',
'korte',
'szilva'
];
//A gyümölcsök kiírása a konzolra
for (var i = 0; i < gyumolcsok.length; i++) {
console.log(gyumolcsok[i]);
}
Az objektum JavaScriptben nem más, mint név-érték (vagy kulcs-érték) párok gyűjteménye. Leginkább egy asszociatív tömbhöz hasonlít, amelynek lényege, hogy az egyes elemeket a nevük (vagy kulcsuk) alapján érünk el. Szintaxisában, használatában rekordhoz (C++ struct) vagy az osztálypéldányokhoz hasonlít.
A JavaScript objektumok nagyon rugalmas adatszerkezetek, tetszőleges típust képesek tárolni, és tetszőleges mértékben módosíthatóak, bővíthetőek. Literálformája a , ha előre szeretnénk elemeket megadni benne, akkor azokat kulcs: ertek formában kell felsorolni vesszővel elválasztva. A kulcsot tetszőleges azonosító lehet, bonyolultabb esetekben szövegként kell megadni. Az elemekre vagy a . operátorral hivatkozhatunk, vagy tömbszerűen a [] operátor segítségével.
Nézzünk néhány példát az objektumok használatára:
//Üres objektum létrehozása
var uresObj = ;
//Objektum létrehozása előre megadott elemekkel.
var sari = {
kor: 8,
'lakhely': 'Budapest', //a kulcs szöveges megadása nem szükséges, de lehetséges
'haja szine': 'barna' //itt viszont kötelező a szöveges megadás
};
//Hivatkozás az elemekre
sari.kor; // => 8
sari['kor']; // => 8
sari['haja szine']; // => 'barna'
//Elem módosítása
sari.kor = 9;
//Objektum bővítése
sari.fiu = false;
//Elem törlése
delete sari.kor;
sari.kor; // => undefined
Az objektumok tetszőleges elemet tartalmazhatnak, így az egyszerű típusok mellett tömböt, vagy akár másik objektumot is.
//Tömb az objektumban
var zsofi = {
kor: 7,
kedvencEtelek: [
'krumplipüré',
'rántott hús',
'tejberizs'
]
};
//Elem elérése
zsofi.kedvencEtelek[0]; // => 'rántott hús'
//Objektum az objektumban
var david = {
kor: 4,
cim: {
iranyitoszam: '1241',
varos: 'Budapest',
utca: 'Holvoltholnemvolt utca',
hazszam: 63
}
};
//Elem elérése
david.cim.utca; // => 'Holvoltholnemvolt utca'
Az objektumok feldolgozása a for ... in ciklussal történik.
var matyi = {
kor: 1.5,
fiu: true,
cuki: true
}
//Elemek kilistázása a konzolra
for (var i in matyi) {
console.log(i, matyi[i]);
}
//Eredmény
// => kor 1.5
// => fiu true
// => cuki true
Ha feladatunk egy bonyolultabb adatszerkezet modellezése, akkor valamilyen összetett típust használunk a megoldáshoz. JavaScriptben ilyen esetben vagy a tömbben, vagy az objektumban, vagy a kettő együttes használatában gondolkodhatunk. Nézzünk néhány példát!
Ha adott értékek sorozata, akkor azokat tömbbe vesszük fel. Azt, mint C++-ban statikus tömbbel vagy vector-ral oldanánk meg, JavaScriptben a tömbliterállal végezzük el. Ha például meg kell adnunk a nálunk lévő kütyüket, akkor a következőt tesszük:
var kutyuk = [
'telefon',
'fülhallgató',
'pendrive',
'e-könyv olvasó'
];
Ha különböző értékeket szeretnénk egységbe foglalni, akkor azt record vagy struct helyett objektummal oldjuk meg. Ilyen lehet például egyetemi adataink nyilvántartása:
var hallgato = {
nev: 'Mosolygó Napsugár',
neptun: 'kod123',
szak: 'Informatika BSc'
};
Ha feladatunk ezeknek a hallgatóknak a tárolása, akkor rekordok tömbje helyett a hallgatói objektumokat kell tömbbe szervezni:
var hallgatok = [
{
nev: 'Mosolygó Napsugár',
neptun: 'kod123',
szak: 'Informatika BSc'
},
{
nev: 'Kék Ibolya',
neptun: 'kod456',
szak: 'Informatika BSc'
}
];
Ha a hallgatóknál a felvett tárgyakat is fel kell sorolnunk, akkor az egyes hallgatói objektumokat bővíteni kell a tárgyak tömbjével:
var hallgatok = [
{
nev: 'Mosolygó Napsugár',
neptun: 'kod123',
szak: 'Informatika BSc',
targyak: [
'Programozás',
'Webfejlesztés 2.',
'Számítógépes alapismeretek'
]
},
{
nev: 'Kék Ibolya',
neptun: 'kod456',
szak: 'Informatika BSc',
targyak: [
'Programozás',
'Webfejlesztés 2.',
'Diszkrét matematika',
'Testnevelés'
]
}
];
Az adatszerkezetek fenti leírási módjának, amely során JavaScript objektum- és tömbliterállal adjuk meg az adatainkat, külön nevet is adtak, és JavaScript Object Notation vagy röviden JSON néven hivatkoznak rá. A JSON formátum ma már szabványosnak számít, és erősebb formai megkötése van, mint amit a JavaScript ezeknél a literáloknál megenged. Az egyik legfontosabb különbség, hogy az objektumok megadásánál a kulcsokat "" között kell megadni. A weben számos ingyenes szolgáltatás érhető el, amelyek ellenőrzik a JSON leírásunk helyességét vagy újraformázzák azokat.
JavaScriptben a függvényeknek más a szintaxisa, mint amit az erősen típusos C alapú nyelvekben megszoktunk. Gyengén típusos nyelvről lévén szó, a függvényeknél nem kell megadni sem a paraméterek típusát, sem a visszatérési érték típusát. A függvényeket a function kulcsszóval adjuk meg, az utasításokat utasításblokkba helyezzük, a visszatérési értéket a return utasítás után adjuk meg. A függvény meghívása a függvény nevével történik megadva utána zárójelben a paraméterek aktuális értékét. Híváskor a zárójel akkor is kötelező, ha nincsenek aktuális paraméterek. A paraméterek és a visszatérési érték is tetszőleges elemi vagy összetett érték lehet.
//Függvény általános formája
function fvnev(par1, par2) {
utasítások;
return visszatérési érték;
}
//Például
function negyzet(x) {
return x * x;
}
negyzet(3); // => 9
JavaScriptben az egyszerű típusú értékek érték szerint, az összetett típusú adatok referencia szerint adódnak át. Így egy függvény tipikusan a paraméterein keresztül kapja meg a bemeneti adatokat, és a visszatérési értékén keresztül adja meg a feldolgozás eredményét (ahogy az normálisan elvárható).
A függvényen kívül deklarált változók globális változók lesznek. Globális változók bárhonnan elérhetőek. A függvényen belül var kulcsszóval deklarált változók a függvényre nézve lokálisak lesznek. Ha függvényen belül elhagyjuk a var kulcsszót, akkor viszont globális változó jön létre. Mivel a globális változók használata könnyen hibához vezethet, ezért próbáljuk meg számukat minimalizálni.
Ismerve a JavaScript adat- és vezérlési szerkezeteit, a különböző feladattípusokra adott absztrakt programozási tételek JavaScript nyelven is megvalósíthatóak. A teljesség igénye nélkül nézzünk néhány példát.
Adott számoknak a sorozata, adjuk meg az összegüket.
A számok sorozatát tömbben tároljuk, az összegzés logikáját függvénybe szervezzük ki. A függvény bemeneti paramétereként a tömböt kell megadnunk, ez inherensen tartalmazza a hosszát is. Az összegzés eredményét a függvény visszatérési értékként adja meg. Az eredményt a konzolra írjuk.
function osszegzes(tomb) {
var s = 0;
for (var i = 0; i < tomb.length; i++) {
s = s + tomb[i];
}
return s;
}
var x = [1, 3, -2, 8];
console.log('Az összeg: ' + osszegzes(x));
Adott számoknak a sorozata, keressünk benne negatív számot.
A tétel különlegessége, hogy kimenetén két adat is megjelenik: van-e a keresett tulajdonságú elem, és ha igen, akkor melyik indexen található. A megoldást adó függvénynek ezzel a két értékkel kell visszatérni. A return után azonban csak egy értéket adhatunk meg, ezért a kettős eredményt egy összetett adatszerkezetbe foglaljuk. A kétféle összetett típus közül az objektum az, amelyik erre a feladatra alkalmasabb, hiszen két értéket kell egységbe foglalnunk. Így a függvény visszatérési értéke egy objektum lesz, amit literálformában adunk meg.
function kereses(x) {
var i = 0;
while (i < x.length && !(x[i] < 0)) {
i++;
}
return {
vane: i < x.length,
sorsz: i
};
}
var tomb = [1, 3, -2, 8];
console.log(kereses(tomb));
A JavaScript nyelv önmagában nem tartalmaz beolvasó és kiíró utasításokat. Ezeket mindig az a környezet biztosítja, amiben a JavaScript értelmezésre kerül. Beolvasásra, kiírásra JavaScriptben három lehetőségünk van:
A böngészők három beépített függvényt biztosítanak a felhasználóval való kapcsolattartásra.
Az alert() függvény egy felugró ablakban írja ki a paraméterként megkapott értéket. Viszonylag ritkán használjuk. Próbáljuk ki a konzolban a következő kódrészletet:
alert('Hello világ!');
A confirm() függvény egy olyan ablakot dob fel, amelyen egy „OK” és „Mégsem” gomb helyezkedik el a paraméterként megadott szöveg alatt. A függvény igaz értékkel tér vissza az előbbi, hamis értékkel az utóbbi megnyomása esetén. Gyakran használjuk azokban az esetekben, amikor egy művelet megerősítésre vár.
var mehet = confirm('Szereted a csokit?');
console.log(mehet);
A prompt() függvény egy szöveges beviteli mezőt tartalmazó ablakot jelenít meg. Első paramétere az ablakon megjelenő szöveg, az opcionális második pedig a beviteli mező alapértelmezett értékét adja meg. A függvény a beviteli mezőbe írt szöveggel tér vissza. Nagyon ritkán használjuk.
var nev = prompt('Mi a neved?', 'Senki bácsi');
console.log(nev);
A JavaScript konzolokra csak kiírni lehet. Kiíró utasításból többet is tartalmazhat egy konzol attól függően, hogy milyen típusú üzenetet írunk ki, szeretnénk-e a kiírásokat csoportosítani, vagy időt mérni. Ezek az utasítások konzolonként változhatnak. A console.log() parancs azonban mindenhol elérhető. Felhasználóval történő kommunikációra nem használjuk, csak fejlesztéskor.
Mivel a felhasználó a böngészőbe weboldalakat tölt be, ezért az egyértelműen legfelhasználóbarátabb kommunikáció a betöltött dokumentumon keresztül zajlik. Beolvasásra a HTML űrlapelemei szolgálnak, kiírásra pedig a dokumentum adott elemei tartalmának módosítása. Ennek módját akkor részletezzük, amikor a JavaScript és a dokumentum kapcsolatát nézzük meg.
Van egy másik, manapság viszonylag elavultnak mondható lehetőség, amely csak és kizárólag az oldal betöltése közben használható. A document.write() vagy document.writeln() paranccsal JavaScriptből generálhatunk HTML tartalmat az oldalba. Ez a megoldás csupán kiírásra szolgál, de amíg nem ismerjük az egyéb módokat, használhatjuk ezt is feladataink eredményének megjelenítésére.
document.writeln('Tetszőleges HTML');
document.writeln('<p>Példa paragrafus</p>');
Az alábbi példa HTML környezetben mutatja be a használatát.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>document.writeln() példa</title>
</head>
<body>
<h1>Celsiusból Fahrenheit</h1>
<script type="text/javascript">
var cels = prompt('Celsius fok:', 0)
var fahr = cels * 9 / 5 + 32;
document.writeln('<p>Celsius = ' + cels + '</p>');
document.writeln('<p>Fahrenheit = ' + fahr + '</p>');
</script>
</body>
</html>
Ebben a részben áttekintettük a JavaScript nyelv alapjait. Láthattuk, hogy szintaktikáját – vezérlési szerkezeteit, operátorait – illetően sok hasonlóság van a C++ vagy a Java nyelvvel, így a programok kinézete nem lehet idegen annak, aki e nyelveket már ismeri. A nyelv jellege azonban eltér ezekétől: egy gyengén típusos, értelmezett nyelvről van szó. Láthattuk azt is, hogy viszonylag kevés típus van a JavaScriptben. Egyszerű típus a szöveg, a szám és a logikai, összetett típusként a tömböt és az objektumot különbözteti. Ez utóbbi kettőből tudjuk felépíteni bonyolultabb adatszerkezeteinket.
Oldd meg az alábbi feladatokat JavaScript segítségével.
A feladatok megoldását külön függvényként készítsd el, ahol a bemeneti adatokat paraméterként, a kimenetieket visszatérési értékként szerepelnek.
A feladatok először úgy oldd meg, hogy a bemeneti adatokat adottnak tekintjük (beégetve a forráskódba, mint a fenti példáknál), a kiírást pedig első körben a konzolra kell elvégezni a console.log() parancs segítségével. Opcionálisan egészítsd ki a feladatok megoldását beolvasással és a dokumentumba kiírással a document.writeln() parancs segítségével.
 |
 |
 |
A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.