JavaScript ismeretek

JavaScript: objektumokra és értékeikre való hivatkozás
Egy HTML oldalon belül az oldal elemeire a következőképp hivatkozhatunk:
1.szint: document
2.szint: a form neve, pl. form1
3.szint: az elem neve a formon belül, pl. eletkor
4.szint: az elem értékére való hivatkozás: value
A szinteket egymástól egy pont választja el:
document.form1.eletkor.value
Vegyük a következő példát:
<form name=”pelda”>
    <b>Név:</b>
<input name=”nev” size=20 value=”Nevem”>
<br>
    <b>Életkor:</b>
<select name=”eletkor”>
        <option value=”10”> 10
        <option value=”20” selected> 20
        <option value=”30”> 30
    </select>
<br>
    <b>Dohányzik?</b>
<input name=”dohany” type=”radio” value=”nem” checked>
    <input name=”dohany” type=”radio” value=”igen”>
<br><br>
    <input type=”button” value=”Nyomd meg!”>
</form>
Ebben az esetben az értékek alakulása a következő:
document.pelda.nev.value : Nevem
document.pelda.eletkor.value : 20

Az onClick() esemény bemutatása, értékadás
Az előző példában lévő gombot módosítsuk a következőképp:
<input type=”button” value=”Nyomd meg!” onClick=”document.pelda.nev.value=’Géza’”>
Ekkor gombnyomásra a név mezőbe bekerül a „Géza” szöveg.

JavaScript függvények szintaktikája, elhelyezkedése a HTML kódon belül
A fenti kóddal egyező eredményt kapunk, ha egy JavaScript függvényt használunk:
<input type=”button” value=”Nyomd meg!” onClick=”ujnev()”>
A HTML kód HEAD részébe a következő JavaScript kódot kell beilleszteni:
<SCRIPT language=”JavaScript”>
function ujnev() {
  document.pelda.nev.value=’Géza’;
}
</SCRIPT>

Változók használata JavaScript-ben
A változó az tulajdonképpen egy tároló, aminek neve van. A változóban bármit tárolhatunk: számokat, szövegeket, objektumokat, stb...
Két beviteli mező értékének felcserélésekor például szükséges egy változót is használnunk:
function csere() {
  valtozo = document.form1.egyik.value;
  document.form1.egyik.value = document.form1.masik.value;
  document.form1.masik.value = valtozo;
}


Függvények paraméterezése
A függvény neve utáni zárójelbe változók nevét írhatjuk. A változóknak a függvény meghívásakor adhatunk értéket:
Függvény meghívása egy paraméterrel:
<input type=”button” value=”Nyomd meg!” onClick=”ujnev(’Ági’)”>
A módosított függvény:
function ujnev(valtozo) {
  document.pelda.nev.value=valtozo;
}



Üzenetablakok megjelenítése
Üzenetek kiírására a beépített alert() függvényt használhatjuk. A függvény egyetlen paramétereként a kiíratni kívánt szöveget kell megadnunk.
Módosítsuk a fenti függvényt a következőképp:
function ujnev(valtozo) {
  document.pelda.nev.value=valtozo;
  alert(’Név megváltoztatva!’);
}


Formok táblázatba rendezése
A táblázatok egyik haszna, hogy segítségükkel a form elemeit szépen egymás alá igazíthatjuk, illetve a mezők címkéit és a mezőket elválaszthatjuk egymástól:

Név:    
Életkor:    
Dohányzik?    nem  igen


Feltételes elágazás a JavaScript kódban
A feltételes elágazás szerkezete a JavaScript-ben:
if (feltétel) {
  ha a feltétel teljesül, ezt hajtja végre;
}
else if (második feltétel) {
  ha a második feltétel teljesül, ezt hajtja végre;
}
else {
  ha egyik feltétel sem teljesül...;
}



Checkbox és Radio gombok kijelölésének vizsgálata:
document.form1.gombok[x].checked
A “form1”-en található “gombok” nevű elem (x+1)-edik gombja ki van-e választva.
A számozás 0-tól indul! A kifejezés értéke true ha igaz, és false ha hamis.
Pl: ha a 3. gomb be van jelölve, akkor a document.form1.gombok[2].checked kifejezés értéke igaz, tehát true.

Egy összetett onClick() esemény bemutatása
Próbáljuk ki, hogy mi történik, ha a függvényt így módosítjuk:
function ujnev() {
 document.pelda.nev.value='Géza';
 document.pelda.eletkor.value=30;
 if (document.pelda.dohany[1].checked) {
  document.pelda.nev.value=document.pelda.nev.value+' [igen]';
 }
 else {
  document.pelda.nev.value=document.pelda.nev.value+' [nem]';
 }
 alert('Kész vagyok!');
}

Következő feladat 

Javascript html-be ágyazása

<script LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT" src="scriptek/popupjs.js?kod=1111"></script>

bannerként
    <script type="text/javascript">//<!-- 
    var kod=111; 
    //--></script> 
    <script type="text/javascript" src="scriptek/popupjs.js"></script> 


<script language="javascript" src="http://www.marketingszoftverek.hu/webstat/st.php?woc=32424242" type="text/javascript"></script>

php-val
    header('Content-Type: text/javascript', true); 

Például szorzótábla beillesztése
<script type="text/javascript">
   var i, j;

   document.write('<table class="multiplicationtable">');
   for  (i=1; i<=15; i++) {
      document.write('<tr>');
      for (j=1; j<=15; j++) {
         document.write('<td class="mptd">', i*j, '</td>');
      }
      document.write('</tr>');
   }
   document.write('</table>');
</script>

vagy a fejrészben
<script type="text/javascript" src="szorzotabla.js"></script>

a szorzótábla.js tartalma
function insertmultiplicationtable() {
   var m, n;
   var divtable, newtable, newtablerow;
   var newtablebody, newtablecell, newresulttext;

   divtable = document.getElementById('multiplicationdiv');

   newtable = document.createElement('table');
   newtable.className = 'multiplicationtable';
   divtable.appendChild(newtable);

   newtablebody = document.createElement('tbody');
   newtable.appendChild(newtablebody);

   for (m=1; m<=15; m++) {
      newtablerow = document.createElement('tr');
      newtablebody.appendChild(newtablerow);
      for (n=1; n<=15; n++) {
         newtablecell = document.createElement('td');
         newtablecell.className = 'mptd';
         newresulttext = document.createTextNode(m*n);
         newtablecell.appendChild(newresulttext);
         newtablerow.appendChild(newtablecell);
      }
   }
}

Külön fájlból így lehet meghívnia js formátumot;
 
<script type="text/javascript" src="js_fajlom.js"></script>