Speciális témakörök a HTML DOM-ból: űrlapok, képek, táblázatok

A korábbi fejezetekben már láttuk azokat a módszereket, amelyekkel egy DOM objektum esetén megállapítható, hogy milyen tulajdonságai is vannak pontosan. A DOM-ról szóló részletesebb fejezetben azonban főleg a DOM Core szabványhoz tartozó ismereteket tekintettük át, azaz azokat a DOM tulajdonságokat és metódusokat, amelyek az elemekre elsősorban mint a dokumentumfa csomópontjaira tekintenek, és segítik elő a fa bejárását vagy az elemek kezelését.

Bizonyos HTML elemekhez azonban olyan speciális információk társulnak, amelyeket nem lehet általánosságban tárgyalni. Ezen információk egyrészt magából a HTML elem jellegzetességéből adódnak, amik ezeknek az elemeknek a DOM objektumainak plusz tulajdonságaiban és metódusaiban manifesztálódnak. Az egyes HTML elemek specialitásait a HTML DOM szabvány foglalja magában, minden elemre meghatározva az általános csomóponti elemhez (Element) viszonyított többlettudását. Egyes HTML elemekhez vagy területhez azonban tartozhat olyan speciális információ is, amely elsősorban a tipikus felhasználásukból fakad.

Ebben a fejezetben kiemelünk néhány olyan részterületet a HTML elemek és a honlapszerkesztés világából, amelyekhez ilyen többletinformáció társul. A szabvány száraz ismertetése helyett azonban igyekszünk a kiemelt elemekhez kapcsolódó tipikus felhasználási igényeket feleleveníteni és rájuk megoldást mutatni.

Űrlapok és űrlapelemek

A felhasználóval kapcsolatos interakció egyik legszembetűnőbb elemei az űrlapok. Ezeken keresztül történik az adatok beolvasása, megadása, ezek biztosítják a nyomható gombokat az oldalon. Mivel az űrlapelemek a beolvasás fő eszközei, ezért elengedhetetlenül szükséges számunkra az egyes HTML elemek viselkedését megismernünk.

Az űrlap elem

Az űrlapot a <form> elem jelzi az oldalon. Nem célunk magát a HTML elemet és attribútumait áttekinteni, ezeket ismertnek tekintjük. Az analóg módszer segítségével könnyen megállapíthatók a form elem tulajdonságai, amiknek jelentése megegyezik a HTML attribútumok jelentésével:

• action
• method
• enctype
• name
• target

Ezek írható, olvasható tulajdonságok, amiken keresztül tetszőlegesen kérdezhető le vagy változtatható meg az űrlap viselkedése.

Az űrlaphoz két metódus tartozik:

• submit(): elküldi az űrlapadatokat az action-ben meghatározott URL-re a method és az enctype beállításai szerint.
• reset(): az űrlap alapállapotba hozása.

Végül két speciális eseményt jelezhet a form elem objektuma:

• submit: űrlapadatok elküldése előtt hívódik meg. Vagy a submit gomb megnyomásakor, vagy a submit() metódus meghívásakor aktiválódik. Fontos tudnunk, hogy ez az esemény megszakítható, amit általában az űrlapelemek ellenőrzésekor szoktunk kihasználni. Addig ugyanis nem engedjük elküldeni az űrlapot, míg mindegyik elem nincs helyesen kitöltve.
• reset: az űrlap alapállapotba hozásakor jelentkezik.

Az input elem

A legtöbb űrlapelemet az <input> elemmel hozzuk létre, aminek a type attribútuma határozza meg a beviteli elem jellegét. Mivel ezek viselkedése különbözik, ezért bizonyos tulajdonságok és metódusok csak bizonyos típusú elemeknél értelmezhetőek. Van azonban jó pár olyan tulajdonság és metódus, ami minden input elemre igaz, ezeket tekintjük át ebben a fejezetben.

Az input elem közös tulajdonságai közül a fontosabbak emeltük ki, és csak azoknál adjuk meg a leírást, amely nem következtethető ki a HTML attribútumokból:

• name
• form: a beviteli elemet tartalmazó form objektumra mutat.
• value
• defaultValue: az elemnek az oldal betöltésekor lévő értéke.
• disabled
• tabIndex

A közös metódusok a következők:

• focus(): a fókuszt az elemre helyezi. Ez gyakorlatilag azt jelenti, hogy ez az aktív elem, ez van használatra jelölve (pl. szöveges elemknél ide kerül a kurzor).
• blur(): eltávolítja a fókuszt az elemről.
• click(): egérkattintás szimulálása az komponensen. Csak checkbox, radio, button, submit és reset típusoknál van értelme.
• select(): a komponensbeli szöveg kijelölése. Csak text, password és file típusoknál értelmezhető.

Események szintjén az alábbiakat emelhetjük ki:

• click: elemre kattintáskor hívódik meg.
• change: elem értékének változásakor hívódik meg, elemtől függően azonnal, vagy csak a fókusz elvesztése után.
• focus: a fókusz megkapásakor hívódik meg.
• blur: a fókusz elvesztésekor aktiválódik.

Szöveges beviteli mezők

Az input elemek közül a text és password típusúak tartoznak ide. Speciális tulajdonságaik:

• readOnly
• size
• maxLength

Jelölőmező

A checkbox típusú beviteli mező legfontosabb tulajdonsága az írható, olvasható checked attribútum. Ez logikai érték formájában adja meg vagy állítja be a jelölőmező bejelöltségét. Az oldal betöltésekor lévő állapot a defaultChecked tulajdonsággal kérdezhető le.

Rádiógombok

A radio típusú input elemeket akkor használjuk, ha több lehetőség közül csak egy választható. Több rádiógomb komponenst az azonos nevük foglal egy csoportba. Legfontosabb tulajdonsága neki is a checked, ami mellé a defaultChecked járul.

Tipikus probléma a rádiógombokkal kapcsolatban, hogy egy csoportban melyik is van kiválasztva. A problémát az jelenti, hogy nem egy komponens esetében kell kiolvasni egy tulajdonságot, hanem itt több elem alakít ki egy rádiócsoportot. Az azonosítóval történő választás itt tehát értelmét veszti, hiszen nem tudhatjuk, hogy melyik id-jú elemek alkotnak egy csoportot. Itt mindenképpen a name attribútum vezérli a feldolgozási logikát. Tekintsük a következő példaűrlapot:

<form id="form1">
    <input type="radio" name="alma" value="piros">
    <input type="radio" name="alma" value="sárga">
    <input type="radio" name="alma" value="zöld" checked>
    <input type="radio" name="alma" value="barna">
</form>

Az egyik lehetőséget a dokumentumszintű getElementsByName metódus adja, amit mintha éppen erre a feladatra találtak volna ki. Ez azonnal megadja az adott nevű komponenseket egy tömbben. Ezeken már csak végig kell menni, és meg kell nézni, melyiknek igaz a checked attribútuma (keresés programozási tétel):

function radioErteke(nev) {
    var radiok = document.getElementsByName(nev);
    var ertek;
    var i = 0;
    while (i < radiok.length && !radiok[i].checked) {
      i = i + 1;
    }
    if (i < radiok.length) {
      ertek = radiok[i].value;
    }
    return ertek;
}
 
//Vagy egy kis átalakítás után
function radioErteke(nev) {
    var radiok = document.getElementsByName(nev);
    for (var i = 0; i < radiok.length; i++) {
        if (radiok[i].checked) {
            return radiok[i].value;
        }
    }
    return undefined;
}
 
//Használata
radioErteke('alma');    //"zöld"

Egy másik lehetőség, hogy először az input elemeket válogatjuk ki a getElementsByTagName metódussal, és ezek között keressük az adott nevű bejelölt rádiógombot. Az alábbi megoldásban opcionálisan megadható a rádiócsoportot tartalmazó űrlap azonosítója is:

function radioErteke(nev, urlapAzon) {
    var tartalmazo = urlapAzon ? document.getElementById(urlapAzon) : document;
    var inputok = tartalmazo.getElementsByTagName('input');
    var ertek;
    var van = false;
    var i = 0;
    while (!van && i < inputok.length) {
      van = inputok[i].name == nev && inputok[i].checked;
      ertek = inputok[i].value;
      i = i + 1;
    }
    return ertek;
}
 
//Használata
radioErteke('alma', 'form1');   //"zöld"
radioErteke('alma');            //"zöld"

Legördülő mező

Legördülő mezőt vagy választó listát a <select> elembe ágyazott <option> elemekkel lehet létrehozni. A select elem legtöbb tulajdonsága a HTML attribútumokból kikövetkeztethető (multiple, size). Ezeken kívül azonban van a programozás szempontjából néhány fontosabb tulajdonsága is:

• value: a kiválasztott option elem értéke. Többszörös választás esetén az első elem értékét adja meg. Ha nincs opció választva, értéke üres szöveg.
• selectedIndex: a kiválasztott option elem sorszáma. Ha nincs kiválasztva elem, akkor értéke -1, egyébként pedig 0-tól kezdődően adja meg a sorszámot (első elem 0, második 1, stb).
• options: a select elemen belül található option elemek gyűjteménye. Egy option elemet vagy az indexével (pl. options[0]), vagy az azonosítójával (pl. options['id']) lehet elérni. A tömb hosszát a length tulajdonság adja vissza.

A select elem metódusai az option elemek kezelését segítik elő:

• add(elem[, elemElé]): egy új opció (elem) beszúrása a gyűjteménybe, opcionálisan megadva azt, hogy melyik opció elé szeretnénk beilleszteni (elemElé). E nélkül utolsóként kerül felvételre.
• remove(index): az adott indexű opció eltávolítása az opciók közül.

Egy opció esetén az alábbi tulajdonságok érhetők el:

• value: az opció értéke.
• text: az opció felirata.
• selected: az opció kiválasztottsága.

A legördülő mezőhöz számos tipikus feladat kapcsolódik. Ezek demonstrálására tekintsük a következő példát:

<select id="select1">
    <option value="ertek1">szöveg1</option>
    <option value="ertek2">szöveg2</option>
    <option value="ertek3" selected>szöveg3</option>
    <option value="ertek4">szöveg4</option>
</select>

Kiválasztott opció indexe, értéke, szövege

Tipikus feladat a kiválasztott opció tulajdonságainak a lekérdezése. Ennek bonyolultsága függ attól, mire is vagyunk kíváncsiak:

var select = document.getElementById('select1');
select.value;                               //"ertek3"
select.selectedIndex;                       //2
select.options[select.selectedIndex].value; //"ertek3"
select.options[select.selectedIndex].text;  //"szöveg3"

Készíthetünk egy függvényt, mely mindhárom információt visszaadja:

function kivalasztottOpcio(select) {
    if (select && select.selectedIndex > -1) {
        return {
            value:  select.value,
            text:   select.options[select.selectedIndex].text,
            index:  select.selectedIndex
        };
    }
    return ;
}
 
//Használata
var select = document.getElementById('select1');
kivalasztottOpcio(select);  //Object {value: "ertek3", text: "szöveg3", index: 2}

Új opció hozzáadása

Új opciót kétféleképpen adhatunk egy legördülő mezőhöz. Egyrészt létrehozhatunk egyet a document.createElement paranccsal, és azt az add metódussal a többi mellé rakjuk. Másrészt elvégezhető a feladat az innerHTML segítségével is.

//Új elem hozzáadása DOM műveletekkel
function ujOpcio(select, szoveg, ertek) {
    var ujop = document.createElement('option');
    ujop.value = ertek;
    ujop.text = szoveg;
    select.add(ujop, null);
}
 
//Új elem hozzáadása innerHTML segítségével
function ujOpcio(select, szoveg, ertek) {
    var ujop = '<option value="' + ertek + '">' + szoveg + '</option>';
    select.innerHTML += ujop;
}
 
//Használata
var select = document.getElementById('select1');
ujOpcio(select, 'új szöveg', 'ujErtek');

Opció törlése

Opció törléséhez egyszerűen a select elem remove metódusát kell alkalmaznunk:

function torolOpcio(select, i) {
    select.remove(i);
}
 
//Használata
var select = document.getElementById('select1');
torolOpcio(select, 3);

Értékek többszörös választás esetén

Ha a legördülő mező multiple tulajdonsága be van állítva, akkor kiválasztott értékeket csak úgy tudjuk megszerezni, ha végigmegyünk az options tömbön, és egyesével megnézzük az adott opció selected tulajdonságát. A kiválasztott értékeket egy tömbbe gyűjtjük és azzal térünk vissza.

Az űrlap ekként módosul:

<select id="select1" multiple size="4">
    <option value="ertek1" selected>szöveg1</option>
    <option value="ertek2">szöveg2</option>
    <option value="ertek3" selected>szöveg3</option>
    <option value="ertek4">szöveg4</option>
</select>

A feldolgozó függvény pedig így néz ki:

function kivalasztottOpciok(select) {
    var ertekek = [];
    for (var i = 0; i < select.options.length; i++) {
        if (select.options[i].selected) {
            ertekek.push(select.options[i].value);
        }
    }
    return ertekek;
}
 
//Használata
var select = document.getElementById('select1');
kivalasztottOpciok(select);     //["ertek1", "ertek3"]

Többsoros beviteli mező

A többsoros szöveges beviteli mező létrehozásáért felelős <textarea> elemnek gyakorlatilag az <input type="text"> mezővel megegyező tulajdonságai vannak (a speciális attribútumai mellett).

Űrlapok ellenőrzése

Tipikus feladat űrlapoknál elküldés előtt a beviteli mezők ellenőrzése. Ezáltal már kliensoldalon kiszűrhetők az egyszerűbb hibák, és nem kell a szervert feleslegesen sokszor megszólítanunk.

Az ellenőrzést érdemes az űrlap submit eseményében megtenni, ez ugyanis akkor is meghívódik ha a felületen nyomtuk meg az elküld gombot, és akkor is, ha programozottan küldjük el az űrlapot a submit metódussal. Ráadásul ebben az eseményben az elküldés folyamata megszakítható az űrlaphoz tartozó alapértelmezett esemény, az adatok elküldése megakadályozásával.

Az ellenőrzése során végig kell menni a vizsgálandó űrlapmezőkön, és a vizsgálati logika szerint kigyűjteni a hibákat. Annak érdekében, hogy a logikát a felülettől minél jobban leválasszuk, a hibákat egy tömbbe gyűjtjük.

Végül ha egy hiba is volt, akkor a hibákat a tömb alapján a felületen megjelenítjük a kívánt módon: vagy az űrlapmezők mellett, vagy listaként az űrlap elején.

A következőkben tekintsük meg az űrlapellenőrzés fontosabb, általánosítható részleteit. Egy űrlap általános váza a következő:

<form id="formId">
    <ul id="hibalista"></ul>
    <input type="text" id="formElem1">
    <!-- további elemek... -->
    <input type="submit">
</form>

JavaScript oldalon első lépés az eseménykezelő regisztrálása:

$('formId').addEventListener('submit', ellenoriz, false);

Az ellenoriz függvény inicializálja a hibalistát tartalmazó tömböt, majd végigmegy az elemeken a megfelelő feltételeket vizsgálva. Végül, ha hiba volt, megjeleníti, és megakadályozza az űrlap elküldését.

function ellenoriz(e) {
    var hibak = [];
 
    if (!joe($('elem1'))) {
        hibak.push('Az elem1-ben valamilyen hiba van!');
    }
    //további elemvizsgálat
    //...
 
    if (hibak.length > 0) {
        e.preventDefault();
        hibaMegjelenit(hibak);
    }
}
 
function hibaMegjelenit(hibak) {
    var sz = '<li>' + hibak.join('</li><li>') + '</li>';
    $('hibalista').innerHTML = sz;
}

Vissza a tartalomjegyzékhez

Képek

Az <img> elemnek az analóg módszerrel felderíthető attribútumain túl nincsen egyéb tulajdonsága. A képek programozása során a látványos stílusokhoz kapcsolható effektusokon kívül általában a megjelenített állományt szoktuk lecserélni. Ehhez a feladathoz a kép src attribútumának változtatása szükséges.

Ha az src attribútumnak JavaScriptből új erőforrást adunk meg, akkor a böngésző azt letölti és az img elemben megjeleníti (ha tudja). E műveletnek annyi hátránya szokott lenni, hogy lassú internetkapcsolat esetén az erőforrás letöltése jelentős időt vehet igénybe, és addig a felületen a kép helyén egy üres doboz jelenik meg. Ennek elkerülésére lehetőség van a képek előtöltésére. Ekkor a memóriában létrehozunk egy img elemet, nem csatoljuk a dokumentumhoz, hanem csak az src attribútumát állítjuk be. Ekkor a böngésző a háttérben letölti az erőforrást a memóriába. Később a lecserélendő img elem src attribútumát az előtöltött kép src attribútumára kell állítani, és azonnal megjelenik a kép.

Példaképpen tekintsük az alábbi képet:

<img src="alma.png" alt="Alma" id="kep1">

A kép cseréjét a következőképpen végezhetjük:

//Előtöltés nélkül
var kep = document.getElementById('kep1');
kep.src = 'korte.png';
 
//Előtöltéssel
var mem_kep = document.createElement('img');
mem_kep.src = 'korte.png';
//...
//ha szukseges a csere:
var kep = document.getElementById('kep1');
kep.src = mem_kep.src;

Vegyük figyelembe, hogy az esetek többségében nincsen szükség a képek programozott cseréjére, hiszen általában az egér fölé mozgatására történik ez a művelet, amit a CSS :hover pszeudoosztályával el tudunk érni. Ugyancsak kerüljük túl sok kép előtöltését, mert ez megnövelheti alkalmazásunk, és így a böngésző memóriaigényét.

Vissza a tartalomjegyzékhez

Táblázatok

A táblázathoz tartozó különböző elemek a HTML attribútumoknak megfelelő tulajdonságokon túl olyan további tulajdonságokat és metódusokat tartalmaznak, amelyekkel lehetővé válik a sorok és cellák kezelése.

Táblázat szintjén (HTMLTableElement) a következő tulajdonságok és metódusok érdekesek:

• rows: a táblázat összes (tHead és tFoot elemben is elhelyezkedő) sorát tartalmazó tömb.
• insertRow(index): új táblázatsor beszúrása index-edik sorként. A sor ugyanabba a táblázatrészbe kerül beszúrásra, ahol az index-edik sor volt. Ha az index -1 vagy a táblázat sorainak számával egyezik meg, akkor a végére kerül az új sor. Üres táblázat esetén a böngésző létrehozza a szükséges tBody elemet is. Visszatérési értéke az újonnan beszúrt sor.
• deleteRow(index): az index-edik sor törlése.

Egy táblázatsor (HTMLTableRowElement) az attribútumain túl a következő tulajdonságokat és metódusokat kínálja:

• rowIndex: a sor sorszáma az összes táblázatsor közül (tHead, tBody, tFoot).
• sectionRowIndex: a sor sorszáma az adott táblázatrészben.
• cells: az adott sorban található cellák tömbje.
• insertCell(index): új cella beszúrása az index-edik helyre. -1 vagy a cellák száma esetén a végére kerül az új cella. Visszatérési értéke az újonnan beszúrt cella.
• deleteCell(index): az index-edik cella törlése.

Végül cella szinten (HTMLTableCellElement) a HTML attribútumokon túli egyetlen tulajdonság, a cellIndex azt mondja meg, hogy a cella hányadik a soron belül.

A fenti információkkal lehetővé válik táblázattal dolgozó alkalmazásokban annak lekérdezése, hogy egy cellának mik az xy-koordinátái.

function xyKoord(td) {
    var x =  td.cellIndex;
    var tr = td.parentNode;
    var y =  tr.sectionRowIndex; //vagy tr.rowIndex
    return {
        x: x,
        y: y
    };
}

Vissza a tartalomjegyzékhez

Feladatok

Vissza a tartalomjegyzékhez