Element objektum

Modern ismeretek WEB oldalon : Javascript ismertető HTML formátumban

Element objektum
Az Element objektumok használata
Elemváltozók (tulajdonságok) :
checked		Kiválasztva
defaultChecked		Feltételezett választás
defaultValue		Feltételezett érték
form		Az űrlap neve
name		Az elem neve
type		Az elem tipusa
value		Az elem értéke / tartalma
Elemfüggvények (metódusok) :
blur()		Az elem inaktívvá válik (a fókuszt elviszi onnan)
click()		Ráklikkel a gombra (magától)
focus()		Kiválassza az elemet (ráviszi a fókuszt)
handleEvent()		Továbbadja az eseményt az eseménykezelő hierarhiának megfelelően, úgy mint a Window objektum esetében
select()		Kiválassza a mező szövegét / tartalmát
Alárendelt objektumok :
options		Választólista elemei

Element objektumok : Általános ismertető

Az elements objektum által, mely a JavaScript objektum hierarhiában a forms objektum alatt található, lehetőségünk van egy űrlap elemeinek elérésére. Ezt többféle módon is megtehetjük :

Példa 1:

document.forms[#].elements[#].tulajdonság
document.forms[#].elements[#].metódus()

document.forms[0].elements[0].value = "valami";
document.forms[0].elements[0].blur();

Példa 2:

document.ürlapneve.elemneve.tulajdonság
document.ürlapneve.elemneve.metódus()

document.Tesztürlap.bevitel.value = "valami";
document.Tesztürlap.bevitel.blur();

Magyarázat:

Egy űrlap elemeinek elérésére többféle módon is lehetséges :

sorszámmal megadva, mint azt az 1. példa mutatja
Figyelje meg, hogy a document kulcsszó után az űrlap sorszáma[0], majd az elem sorszáma [0] áll. A számozás 0-val kezdődik, mivel tömbben tárolja őket.
névvel megadva, mint azt a 2. példa mutatja

Figyelje meg :

Az elem objektumok, úgymint : beviteli mezők, választólisták, különböző nyomógombok, alapjávan véve egymáshoz hasonlító objektumok. Ezek elsősorban tulajdonságaik és metódusaik révén különböznek egymástól. Ezeket az elemeket egy tömbként kezelhetjük. Így a továbbiakban elemváltozóik (tulajdonságok) és elemfüggvényeik (metódusok) szerint vizsgáljuk őket, mindig megjelölve, hogy mely objektumokra érvényesek azok.

Csoport elemek:

A Checkbox-ok és Radio-gombok alavető esetben összetartozó elemek, melyeket egyazon névvel illetünk. Ezek az elemek nevükben azonosak, (name="azonos" ) csak tartalmukban különböznek Pl.(value="más és más"). Az ilyen azonos nevű csoportok szintén tömböt képeznek.

Példa:

document.form.kedvencek[2].checked = true;

Magyarázat:

A példa feltételezi, hogy a következő HTML parancsok voltak előzőleg kiadva :

<input type=radio name="kedvencek" value="Sándor Csikar">
<input type=radio name="kedvencek" value="Puskás Öcsi">
<input type=radio name="kedvencek" value="Albert Flórián">

Így a példában Albert Flóriánt választottuk, aki a harmadik az adott csoportban.

checked

Meghatározza, hogy egy Radio vagy Checkbutton aktiválva van vagy nem. Lehetséges értékek : true / false illetve 1 és 0. Használható : Nyomógomb Checkbox Rádió gomb

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
function Mehet() {
 if(document.urlap.mod[0].checked == true)
  window.location.href="fájl1.htm"
 else if(document.urlap.mod[1].checked == true)
  window.location.href="fájl2.htm"
 else 
  alert("Kérem válasszon !");
}
</script>
</head><body>
<form name="urlap">
<input type=radio name="mod" value="van"> Kerettel 
<input type=radio name="mod" value="nincs"> Keret nélkül
<br><input type=button value="Start" onClick="Mehet()">
</form>
</body></html>

Magyarázat:

A példa egy olyan űrlapot jelenít meg, melyen két rádiógomb és egy start nyomógomb látható. A start gomb megnyomásakor a Mehet() függvényt hívjuk meg. Ebben vizsgáljuk, hogy a "mod"nevű választás megtörtént-e. Ha igen, akkor a választásnak megfelelően, a location href révén megnyitunk egy HTML fájlt, különben figyelmeztetést adunk.

defaultChecked

Meghatározza, hogy egy Radio vagy Checkbutton alapértelmezésben aktiválva van vagy sem. Lehetséges értékek : true / false illetve 1 és 0. Használható : Checkbox Rádió gomb esetében.

defaultValue

Egy beviteli mező feltételezett értékét tartalmazza.

Használható : Egysoros beviteli mező Többsoros beviteli mező esetében.

form

Meghatározza az űrlapot, melyen az elemek találhatók. Használható : Nyomógomb Checkbox Fájl-gomb Rejtett elemek Jelszó mező Radio-Button Törlés gomb Elküldés gomb Egysoros beviteli mező Többsoros beviteli mező esetében .

Példa:

<html><head><title>Teszt</title>
</head><body>
<form name="urlap">
<input type=button name="Gomb" value="Teszt"
onClick="alert(document.urlap.gomb.form.name)">
</form>
</body></html>

Magyarázat:

A példa egy olyan űrlapot mutat, melyen csak egy nyomógomb van. Ha ezt megnyomjuk, akkor kiirja az űrlap nevét egy ablakban..

name

Ez a tulajdonság az űrlapon levő elem nevét határozza meg.

Használható : Nyomógomb Checkbox Fájl gomb Rejtett elemek Jelszó mező Rádió gomb Törlés gomb Elküld gomb Egysoros beviteli mező Többsoros beviteli mező

Példa:

<html><head><title>Teszt</title>
</head><body>
<form name="urlap">
<input type=button name="Gomb" value="Teszt"
onClick="alert(document.urlap.Gomb.name)">
</form>
</body></html>

Magyarázat:

A példa egy olyan űrlapot mutat, melyen csak egy nyomógomb van. Ha ezt megnyomjuk, akkor kiirja az elem nevét egy ablakban..

type

Ez a tulajdonság az űrlapon levő elem tipusát határozza meg.

Használható : Nyomógomb Checkbox Fájl gomb Rejtett elemek Jelszó mező Rádió gomb Törlés gomb Elküld gomb Egysoros beviteli mező Többsoros beviteli mező

Példa:

<html><head><title>Teszt</title>
</head><body>
<form name="urlap">
<input type=radio name="Fa" value="Bükk"> Bükk<br>
<input type=radio name="Fa" value="Cser"> Cser<br>
<input type=radio name="Fa" value="Tölgy"> Tölgy<br>
Növény: <input size=30 name="Növény"><br>
<input type=submit name="Mehet" value="Mehet">
</form>
<script language="JavaScript">
for(i=0;i<document.urlap.length;++i) {
document.write("<br>Elemneve: "+document.forms[0].elements[i].name);
document.write(" , Elemtipus: "+document.forms[0].elements[i].type);
}
</script>
</body></html>

Magyarázat:

Das Példa egy olyan űrlapot mutat, melyen különböző fajta elemek láthatók. Ezek :radio, text és submit tipusú elemek, melyeket az elem nevével együtt kiiratunk a document write() metódus meghívásával.

value

Ez a tulajdonság az űrlapon levő elem értékét tárolja .

Használható : Nyomógomb Checkbox Fájl gomb Rejtett elemek Jelszó mező Rádió gomb Törlés gomb Elküld gomb Egysoros beviteli mező Többsoros beviteli mező

Példa:

<html><head><title>Teszt</title>
</head><body>
<form name="urlap">
Neve: <input size=30 name="Neve">
<input type=submit name="Elküldő_gomb" value="Elküld">
<input type=hidden name="Browser" value="">
</form>
<script language="JavaScript">
 document.urlap.Browser.value = navigator.userAgent;
</script>
</body></html>

Magyarázat:

A példa egy olyan űrlapot mutat, melyen egy elküldő gomb és egy rejtett mező (<input type=hidden>) található.Az űrlap deklaráció alatt van a Script terület megadva. Azért alatta, mert a JavaScript kód futtatásának előfeltétele a form (űrlap) megléte. A Browser nevű rejtett mezőnek átadjuk a felhasználó gépén futó böngésző tipusát : navigator userAgent. Ezt a dinamikusan képzett információt is továbbíthatjuk aztán az űrlap elküldésével együtt.

blur()

Elviszi a fókuszt az elemről, az inaktívvá válik .Nem vár paramétert..

Használható : Nyomógomb Checkbox Fájl gomb Jelszó mező Rádió gomb Törlés gomb Elküld gomb Egysoros beviteli mező Többsoros beviteli mező

Példa:

<html><head><title>Teszt</title>
</head><body>
<form name="urlap">
<input name="mezo1" size=30 onFocus="this.form.mezo1.blur()">
</form>
</body></html>

Magyarázat:

A példa egy olyan űrlapot mutat, melyen csak egy mező van.A felhasználó ki akarja választani ezt az elemet, akkor a mezőt azonnal inaktívvá teszi, úgy hogy a fókuszt elviszi onnan a blur() metódus hívásával. Ezáltal megakadályozza annak módosítását.

click()

Autómatikusan ráklikkel a megnevezett gombra. Nem vár paramétert.

Használható : Nyomógomb Checkbox Fájl gomb Rádió gomb Törlés gomb Elküld gomb

Példa:

<html><head><title>Teszt</title>
</head><body>
<form name="urlap">
A Mohácsi csata éve ?<br>
<input size=6 name="evszam">
<input type=button name="Gomb" value="Elküld" onClick="Check()">
</form>
<script language="JavaScript">
function Check() {
 if(document.urlap.evszam.value != "1526")
  window.location.href = "hibas.htm";
 else
  window.location.href = "siker.htm";   
}
window.setTimeout("document.urlap.Gomb.click()",10000);
</script>
</body></html>

Magyarázat:

A példa egy olyan kérdőívet mutat, melyen a diáknak a Mohácsi csata évszámát kell megadni, melyet a window.setTimeout() metódus hívásával 10 másodpercen belüli időre korlátozunk. Ha ezen időn belül nem született döntés, és a tanuló nem küldte el a válaszát, akkor a program magától ráklikkel az "Elküld" gombra a document.ürlap.Gomb.click()segítségével és az eredménytől függően megnyitja az állományt a location href hívásával.

focus()

Ráirányítja a fókuszt a kérdéses elemre, nem vár paramétert. Használható : Nyomógomb Checkbox Fájl gomb Jelszó mező Rádió gomb Törlés gomb Elküld gomb Egysoros beviteli mező Többsoros beviteli mező

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
function Check() {
 if(document.urlap.evszam.value != "1526") {
   alert("Szégyen, hogy ezt sem tudja!");
   document.urlap.evszam.focus();
 }
 else {
   alert("Rendben van!");
   window.location.href = "fájl2.htm";
 }  
}
</script>
</head><body>
<form name="urlap">
A Mohácsi csata éve : <input size=6 name="evszam">
<input type=button value="Tovább" onClick="Check()">
</form>
</body></html>

Magyarázat:

A példa egy olyan kérdőívet mutat, melyen a diáknak a Mohácsi csata évszámát kell megadni. Ha a tanuló rossz választ adott, akkor a hibaüzenet után újból a beviteli mezőre kerül a fókusz, különben nyugtázza a választ és megnyit egy másik fájlt a location href hívásával.

handleEvent()

Továbbadja a vezérlést egy olyan objektumnak, mely képes arra reagálni.Ugyanúgy működik mint a Window objektum handleEvent() metódusa.

select()

A teljes beviteli mező tartalmát kiválassza, nem vár paramétert.

Használható : Jelszó mező Egysoros beviteli mező Többsoros beviteli mező

Példa:

<html><head><title>Teszt</title>
</head><body>
<form name="urlap">
Másolja át a teljes sort a böngésző URL sorába:<br>
<input type=text size=40 name="Code" value="javascript:top.close()">
</form>
<script language="JavaScript">
 document.urlap.Code.focus();
 document.urlap.Code.select();
</script>
</body></html>

Magyarázat:

A példa egy olyan űrlapot mutat, melyen csak egy beviteli mező van. Adunk ennek a mezőnek kezdeti értéket, rávisszük a fókuszt és kiolvassuk annak tartalmát. Ezután már csak be kell a sort másolni az URL cimsorba.

Készült : 1999-10-27. Lengyel Sándor