13. Javascript
Javascript:
Weblapnál használt programozási nyelv, amely interaktívabbá teszi a lapot.
Ez dönti el, mit csináljon a lap, amikor pl. egérrel kattintunk rá. A HTML-lel párhuzamosan használjuk.
Kezdjünk egy új weblapot, melyben egy gombot hozunk létre, Klikkelj rám felirattal. A fájlt hello.html néven mentsd el!
<html>
<button>Klikkelj rám</button>
</html>
Próbálj a gombra klikkelni! Miért nem történik semmi?
Közölnünk kell a gombbal, mit csináljon a klikkeléskor. Ehhez hozzáadunk egy figyelőt. Akkor futtatja le a JavaScript kódot, amikor bekövetkezik egy esemény. Egy onclick figyelőt fogunk használni.
<html>
<button onclick='alert("Hello")'>Klikkelj rám</button>
</html>
Ciklusok:
Valahányszor megismételt parancsok sorozata.
Változók:
Számítógépes programban tárolt érték, vagy adat.
Összeadás művelete:
Pl.
<script>
document.write(10+10);
</script>
Képernyőn futtatás után az eredmény látható: 20
Ciklusok és ismétlés
A for ciklus használatával újra és újra kiírathatunk valamit a kijelzőre.
Pl.
<script>
for(var n=1; n<10; n++)
document.write(n);
</script>
Eredményként amit kiír a képernyőre: 123456789
var: változót jelenti
n: 1-től indul
n megáll 10 előtt
n++ egyesével növeli n-t
write(n) helyett writeln(n) használata: egy kis rést, szóközt hagy ki minden egyes szám között
Függvény:
Valaminek az elvégzésére készített parancsok sorozata, amely mindig lefut, amikor "hívták".
Kvízprgoram készítése:
Kell egy kód a kérdésfeltevésre, majd meg kell vizsgálni, hogy helyes-e a válasz és visszajelezni a játékosnak.
Pl.
Mennyi 5 * 5? Ha a válasz 25, írd ki, hogy Ügyes vagy! ha a válasz bármi más, írd ki, hogy Rossz válasz!
<script>
var válasz=prompt("Mennyi 5*5?"); [ez a sor bemenetet kér és a feleletet egy válasz nevű változóban tárolja]
if(válasz=="25") alert("Ügyes vagy"); [ellenőrzi, hogy helyes-e a válasz, ha igen, kijelzi, hogy ügyes vagy]
else alert("Rossz válasz"); [ha a válasz helytelen, azt jelzi, hogy Rossz válasz]
</script>
Bővítsd a kvízt még 2 kérdéssel!
Mennyi 10*10?
Mennyi 3*3?
Függvényalkotás:
Ahelyett, hogy minden kérdéshez 3 kódsort ismételnénk alkossunk egy kérdez nevű függvényt. Ezt a függvényt fogjuk hívni (futtatni) mindig, ha kérdést akarunk feltenni.
<script>
function kérdez(kérdés, helyes){ [ez a sor a kérdez függvény meghatározását kezdi el]
var válasz=prompt(kérdés); [kérdés nevű változó használata]
if(válasz==helyes) alert("Ügyes vagy");
else alert("Rossz válasz");
}
kérdez("Mennyi 5*5","25"); [ezek a sorok teszik fel a kérdéseket, ezek hívják a függvényt
kérdez("Mennyi 10*10","100"); és átadják neki a kérdésekhez és válaszokhoz tartozó értékeket]
kérdez("Mennyi 3*3","9");
</script>
Színváltoztatás
Feladat:
Írjunk egy olyan weblapot, amely különböző gombok lenyomásakor képes megváltoztatni a színét!
<html>
<button onclick='red()'>Pirosodj</button> [gomb hozzáadása, amely a red() függvényt hívja]
<script>
function red(){
document.body.style.backgroundColor="red";
}
</script>
</html>
Több szín, több függvény?
Nagyszerű lenne, ha újabb gombokat adhatnánk a laphoz, így más színekre is változtathatnánk a lapunkat. Ám ez külön függvényt jelentene minden egyes színhez. Csináljunk inkább egy setbg nevű, általános, háttérszínt változtató függvényt és átadhatunk neki egy színt.
A függvényt így hívhatnánk: setbg('red') vagy setbg('blue') stb.
<html>
<button >Kékülj</button> [gomb hozzáadása, amely a setbg() függvényt hívja]
<script>
function setbg(col){
document.body.style.backgroundColor=col;
}
</script>
</html>
Mentés színek.html néven!
Fájl átírása:
<html>
<button >Kékülj</button>
<button >Zöldülj</button>
<button >Narancssárga</button>
<button >Citromsárga</button>
<script>
function setbg(col){
document.body.style.backgroundColor=col;
}
</script>
</html>
Mentés színektöbbféle.html néven!