Notice: Undefined index: main in /www/html/info/template.php on line 221

Notice: Undefined variable: headers in /www/html/info/global.php on line 46

JavaScript

JavaScript-et írhatunk majdnem minden HTML elem speciális attribútumaiba. Ezekkel lehet olyan eseményeket kezelni, mint pl.: az egérkurzor az adott elem fölé ért, egérgombbal kattintottak az adott elemre, stb. Eme attribútumok közül a fontosabbak:

attribútum	esemény
onClick	Az egérrel kattintottak az adott elemre.
onMouseOver	Az egérkurzor az adott elem fölé ért.
onMouseOut	Az egér elhagyta az adott elemet.

Az alábbi példa kiírja azt, hogy "hello", ha az egérrel a képre kattintunk

Így írjuk	így jelenik meg
<img src='makawe.png' onClick='alert("hello")'>

Érezhetően nem volna túl olvasható, ha hosszabb scripteket próbálnánk meg pl. egy onClick attribútumba begyömöszölni. Ezért lehetőség van JavaScripteket írni a <script='JavaScript'> </script> HTML elemek közé. Ezt általában a HTML oldalunk HEAD részében helyezzük el Példa a saját függvény definiálása résznél.

Típusok

Két fontos típusunk van: a szöveg, és a szám. A számot egyszerűen be lehet írni, de tizedestört esetén ponttal kell elválasztani a törtrészt az egészrésztől. A szöveget aposztrófok, vagy macskakörmök közé kell írni. Különbségek:

3 + 3 eredménye 6: számokat összead a + jel.
"3" + "3" eredménye 33: szövegeket egymás mögé ír a + jel.
22 < 123 igaz: a számokat érték szerint hasonlítja össze
"22" < "123" nem igaz: az ABC sorrendben "123" előrébb van, mivel az "1" karakterrel kezdődik. Egyébként a szövegeket ily módon nem magyar ABC alapján hasonlítja össze, így például az ékezetes betűk a 'Z'-nél nagyobbnak számítanak.

HTML elemek elérése

Ha nevet adunk (a name attribútummal) egy képnek, egy űrlapnak és a mezőinek, akkor tudunk rájuk hivatkozni JavaScript-ünkben. Így le tudjuk kérdezni az értéküket, illetve módosítani is tudunk rajtuk ezt-azt.

A képet egyszerűen a nevével elérhetjük. A példában a kep nevet kapta a kép, így az src attribútumát kep.src alakban érhetjük el.

Az űrlap mezőket document.űrlapnév.mezőnév alakban érhetjük el. Példánkban az ul nevű űrlap a nevű mezejének értékét (azaz a beleírt szöveget) document.ul.a.value formában érhetjük el.

Így írjuk	így jelenik meg
<img name='kep' src='makawe.png' onMouseOver=' kep.src="makaweinverz.png" ' onMouseOut=' kep.src="makawe.png" '> <form name='ul'> <input name='a'> <input type='button' value='Nyomj meg!' onClick='document.ul.b.value = document.ul.a.value'> <input name='b'> </form>

Így írjuk

így jelenik meg

<img name='kep' src='makawe.png' 
  onMouseOver=' kep.src="makaweinverz.png" '
  onMouseOut=' kep.src="makawe.png" '>

<form name='ul'>
  <input name='a'>
  <input type='button' value='Nyomj meg!' 
    onClick='document.ul.b.value = document.ul.a.value'>
  <input name='b'>
</form>

Változók

A var kulcsszó után vesszővel elválasztva változók neveit sorolhatjuk fel. Ezzel "dobozok" jönnek létre: ezekbe a dobozokba tehetünk értéket, kiolvashatjuk és módosíthatjuk az értéket. Értéket a következőképp tehetünk egy változóba:
változó neve = valamilyen kifejezés
Ne felejtsünk értéket adni a változóinknak, mielőtt használnánk őket.

var egyik, masik, harmadik
egyik = 1
masik = (12 * 2) / 3
egyik = egyik + 2
harmadik = (egyik + masik) * 5

Eme értékadások után természetesen egyik értéke 3, másik értéke 8, harmadik értéke 55.

Függvények

A függvények mindenféle teendőket végeznek el. Mikor egy függvényt használunk (meghívunk) akkor a függvény neve után két zárójelet: "()" kell tenni. Ha a függvénynek paramétereket is kell adni, akkor azokat a zárójelek közé kell írni. Egyes függvények értéket is visszaadnak. Néhány hasznos függvény (figyelj, hogy hol van kisbetű, és hol nagybetű):

függvény neve	ezt csinálja
alert( valami )	Egy felbukkanó ablakban kiírja valamit
parseFloat( valami )	Ha valami szöveg típusú és számként értelmezhető, akkor ezt a számot adja vissza szám típusúként.
Math.random()	Véletlenül kiválaszt egy számot 0 és 1 között, és azt adja vissza
Math.round( valami )	valami értékét adja vissza kerekítve. 0,5-nél már felfelé kerekít

Az első sor a kerekitett nevű változóba a 12 számot írja. A második sor az ul űrlap a mezejébe egy 0 és 20 közti véletlen számot tesz.

kerekitett = Math.round(12.345)
document.ul.a.value = Math.random() * 20

Saját függvények

Praktikus dolog az onClick és hasonló attríbútumoknál minél rövidebb scriptet írni, ám néha nagyon sok mindent kell végrehajtani. Ekkor érdemes definiálni egy saját függvényt, és az onClick (vagy más) attribútumnál csak eme függvényt meghívni.

A függvény definíciója a függvény fejéből, és törzséből áll. A függvény feje:
function kulcsszó, aztán a függvény neve, majd két normál zárójel. Ezután jön a törzs: ez két kapcsos zárójel közti utasítások sorozata. A függvény definícióját érdemes a HEAD-en belül a SCRIPT részben elhelyezni.

Így írjuk	így jelenik meg
<html> <head> <script language='javascript'> function perketto() { var szam szam = parseFloat(document.ul2.a.value) document.ul2.b.value = Math.round(szam / 2) } </script> </head> <body> <form name='ul2'> <input name='a'> <input type='button' value='/2' onClick='perketto()'> <input name='b'> </form> </body> </html>

Így írjuk

így jelenik meg

<html>
  <head>
    <script language='javascript'>
    function perketto()
    {
      var szam
      szam = parseFloat(document.ul2.a.value)
      document.ul2.b.value = Math.round(szam / 2)
    }
    </script>
  </head>
  
  <body>
    <form name='ul2'>
      <input name='a'>
      <input type='button' value='/2' onClick='perketto()'>
      <input name='b'>
    </form>
  </body>
</html>

Elágazás

Lehetőség van rá, hogy bizonyos utasításokat csak akkor hajtsunk végre, ha bizonyos feltétel(ek) teljesül(nek). Ez a feltétel mondjuk azt ellenőrzi, hogy két érték egyforma-e, vagy hogy az egyik kisebb-e a másiknál. Példák az x és y változókkal:

`x == y`	x értéke megegyezik y értékével. Ide két = jel kel, különben nem a megegyezést ellenőrizné, egyszerűen beírná y értékét x-be.
`x != y`	x értéke nem egyezik meg y értékével
`x < y`	x értéke kisebb y értékénél
`x <= y`	x értéke kisebb, vagy egyenlő, mint y értéke
`x > y`	x értéke nagyobb y értékénél
`x >= y`	x értéke nagyobb, vagy egyenlő, mint y értéke

Az elágazást az if kulcsszóval hozhatjuk létre. Az if után normál zárójelben következik a feltétel, utána kapcsos zárójelek közt az utasítások, melyeket akkor kell végrehajtani, ha a feltétel igaz.

Így írjuk	így jelenik meg
<script language='javascript'> function milyen() { var szam szam = parseFloat(document.ul3.a.value) if ( szam > 10 ) { alert ('tíznél nagyobb') } } </script> <form name='ul3'> <input name='a'> <input type='button' value='milyen' onClick='milyen()'> </form>

Így írjuk

így jelenik meg

<script language='javascript'>
function milyen()
{
  var szam
  szam = parseFloat(document.ul3.a.value)
  if ( szam > 10 )
  {
    alert ('tíznél nagyobb')
  }
}
</script>

<form name='ul3'>
  <input name='a'>
  <input type='button' value='milyen' onClick='milyen()'>
</form>

Természetesen egy elágazáson belül további elágazások lehetnek. Egy elágazás záró kapcsos zárójele után nyithatunk egy else ágat: ennek az ágnak a kapcsos zárójelei közt lévő utasításokat akkor fogja végrehajtani, ha a feltétel nem igaz.

A feltételeket a következő logikai operátorokkal tovább bonyolíthatjuk:

`!(feltétel)`	Akkor igaz, ha a feltétel nem igaz
`(feltétel1) && (feltétel2)`	Akkor igaz, ha a feltétel1 igaz és feltétel2 is igaz.
`(feltétel1) \|\| (feltétel2)`	Akkor igaz, ha a feltétel1 és feltétel2 közül legalább az egyik igaz.

Lássunk egy példát else ággal, és logikai operátorokkal:

Így írjuk így jelenik meg

<script language='javascript'> function milyenek() { var szama, szamb szama = parseFloat(document.ul4.a.value) szamb = parseFloat(document.ul4.b.value) if ( szama == szamb ) { if ( szama > 10) { alert('egyforma, tíznél nagyobb számok') } } else { if ( (szama > 10) && (szamb > 10) ) { alert('nem egyforma, tíznél nagyobb számok') } } } </script> <form name='ul4'> <input name='a'> <input name='b'> <input type='button' value='milyenek' onClick='milyenek()'> </form>

Így írjuk	így jelenik meg
<script language='javascript'> function milyenek() { var szama, szamb szama = parseFloat(document.ul4.a.value) szamb = parseFloat(document.ul4.b.value) if ( szama == szamb ) { if ( szama > 10) { alert('egyforma, tíznél nagyobb számok') } } else { if ( (szama > 10) && (szamb > 10) ) { alert('nem egyforma, tíznél nagyobb számok') } } } </script> <form name='ul4'> <input name='a'> <input name='b'> <input type='button' value='milyenek' onClick='milyenek()'> </form>

Ciklus (Hurok)

Ha többször akarunk valami hasonló dolgot csinálni, akkor egy hurokkal tehetjük meg. A legegyszerűbb hurok következőképp néz ki:

while ( feltétel )
{
...
}

A kapcsos zárójelek közti utasításokat addig hajtja végre, amíg a feltétel igaz. Ugyanolyan feltételeket lehet használni, mint az elágazás esetében. Nagyon figyelni kell arra, hogy a feltétel előbb utóbb mindenképp teljesüljön, különben soha nem jutunk ki a hurokból! Íme egy példa:

Így írjuk	így jelenik meg
<script language='javascript'> function ismetlo() { var szam, szoveg, kiirando, i szam = parseFloat(document.ul5.hanyszor.value) szoveg = document.ul5.szoveg.value if ( (szam > 10) \|\| (szam <= 0) ) { alert('A szám 1 és 10 között legyen!') } else { kiirando = '' i = 1 while ( i <= szam ) { kiirando = kiirando + szoveg i = i + 1 } alert (kiirando) } } </script> <form name='ul5'> Szöveg: <input name='szoveg'> Hányszor: <input name='hanyszor'> <input type='button' value='Ismételd!' onClick='ismetlo()'> </form>	Szöveg: Hányszor:

Így írjuk

így jelenik meg

<script language='javascript'>
function ismetlo()
{
  var szam, szoveg, kiirando, i
  szam = parseFloat(document.ul5.hanyszor.value)
  szoveg = document.ul5.szoveg.value
  if ( (szam >  10) || (szam <= 0) )
  {
    alert('A szám 1 és 10 között legyen!')
  }
  else
  {
    kiirando = ''
    i = 1
    while ( i <= szam )
    {
      kiirando = kiirando + szoveg
      i = i + 1
    }
    alert (kiirando)
  }
}
</script>

<form name='ul5'>
   Szöveg: <input name='szoveg'>
   Hányszor: <input name='hanyszor'>
   <input type='button' value='Ismételd!' onClick='ismetlo()'>
</form>

Tömbök

A tomb = new Array() utasítással a tomb nevű változót tömbbé tehetjük. A tömb egy olyan változó, amiben több érték is tárolható, ezeket az értékeket az indexükkel különböztethetjük meg a tömbön belül. Az indexet a tömb neve után, szögletes zárójelbe írjuk.

Az alábbi példában három szöveget teszünk egy tömb 1, 2, 3 indexű fiókjaiba, majd egy ciklusban kiíratjuk. Látszik, hogy indexként nem csak egyszerű számot, hanem bármilyen szám típusú kifejezést (a példában az i változót) használhatunk.

Így írjuk	így jelenik meg
<script language='javascript'> function malacka() { var szavak, i szavak = new Array() szavak[1] = "egy" szavak[2] = "kismalac" szavak[3] = "röf-röf-röf" i= 1 while (i <= 3) { alert(szavak[i]) i = i+ 1 } } </script> <form name='ul6'> <input type='button' value='Kérem! Malac!' onClick='malacka()'> </form>

Így írjuk

így jelenik meg

<script language='javascript'>
function malacka()
{
  var szavak, i
  szavak = new Array()
  szavak[1] = "egy"
  szavak[2] = "kismalac"
  szavak[3] = "röf-röf-röf"
  
  i= 1
  while (i <= 3)
  {
    alert(szavak[i])
    i = i+ 1
  }
}
</script>

<form name='ul6'>
   <input type='button' value='Kérem! Malac!' onClick='malacka()'>
</form>