Informatika érettségi előkészítő (11. és 12. évfolyam)
A javascript a <script> és </script> HTML tag-ek közé kerül.
A javascriptben a kis és a nagybetűk különbözőek. A parancsokat pontosvessző
választja el egymástól.
Változók
Változó megadása:
valtozo = 123;
Műveletek változókkal:
a = b + c;
Ha b és c értéke szöveg (string), az "a" változó ezekek összefűzött értékét
tárolja, ha szám, akkor összegüket.
Kiírás a HTML oldalra
A javascript a document.write paranccsal ír ki karaktersorokat (sztring) és
változókat a weboldalra. A sztringeket mindig idézőjelbe kell tenni. A kiírható
sztringek HTML formázások is lehetnek. Lehetőség van egyszerre sztringeket és
változókat is kiíratni, ezek közé + jelet kell tenni. Pl:
document.write("<b>" + a + " + " + b + " = " + valtozo + "</b><br>")
Függvények
Függvényt a function paranccsal lehet definiálni, a függvény megadása
(függvénytörzs) kapcsos zárójelek közt található. Pl:
function osszead(x,y)
{
var eredmeny = x + y;
alert(x + " + " + y + " = " + eredmeny);
}
Ez a függvény későbbi használatakor a megadott x és y változókat összeadja, majd
felpattanó ablakban kiírja az összeadást. A függvényt így lehet használni a
program egy másik részében:
osszead(3,8);
Függvény definiálásakor meghatározható, hogy a számított értéket csak adja ki a
return segítségével.
function osszead2(x,y){
return x+y;
}
Ilyenkor a függvény így használható:
document.write("<b>24 + 4 = " + osszead2(24,4) + "</b>");
Űrlapelemek kezelése
A HTML részben lévő űrlapelemek értékeivel végezhet műveleteket a javascript. HTML Űrlap elemek
Beviteli mezők
Az űrlapelem: <form name="x"><input ame="y"></form>
Az érték lekérdezése: document.x.y.value (a beírt szöveg)
Példa:
<form name="x"><input name="y">
<input type="button" value="próba" onClick="alert('beírás: ' +
document.x.y.value)">
</form>
Checkbox kezelése
Az űrlapelem: <form name="a"><input type="checkbox" name="b"></form>
Az érték lekérdezése: document.a.b.checked (TRUE vagy FALSE értéke lehet)
Példa:
<form name="a"><input type="checkbox" name="b">
<input type="button" value="próba" onClick="if(document.a.b.checked) alert('kiválasztva!');
else alert('nincs kiválasztva!')">
</form>
Listaválasztó kezelése
Az űrlapelem: <form name="c"><select name="d"><option
value="egy">Első választás</option></form>
Az értékek lekérdezése:
document.c.d.selectedIndex - megadja a kiválasztott elem sorszámát a listáról
document.c.d.options[3].text - megadja a lista 3. eleméhez írt szöveget (az <>
és </option> közötti részt)
document.c.d.options[3].value - megadja a lista 3. eleméhez tartozó értéket
Példa:
<script>
function valasztas(){
alert(document.c.d.options[document.c.d.selectedIndex].text)
}
</script>
<form name="c">
<select name="d" onChange="valasztas()">
<option>Első választás</option>
<option>Második választás</option>
<option>Harmadik választás</option>
<option>Negyedik választás</option>
</select>
</form>
Eseménykezelők
Az űrlapelemekhez, szöveghez, képekhez html-ben rendelhető eseménykezelők: onAbort onBlur onClick onDblClick onFocus onMouseDown onMouseOut onMouseOver onMouseUp onMove onReset onSelect onSubmit onChange
A <body> tagbe helyezhető eseménykezelők: onKeyPress onKeyUp onKeyDown onLoad onUnload onResize onMouseMove onError onDragDrop onBlur
Az eseménykezelők részletes leírása