Vissza az előzőleg látogatott oldalra (nem elérhető funkció)Vissza a tananyag kezdőlapjára (P)Ugrás a tananyag előző oldalára (E)Ugrás a tananyag következő oldalára (V)Fogalom megjelenítés (nem elérhető funkció)Fogalmak listája (nem elérhető funkció)Oldal nyomtatása (nem elérhető funkció)Oldaltérkép megtekintése (D)Keresés az oldalon (nem elérhető funkció)Súgó megtekintése (S)

Bevezetés a kliens- és szerveroldali webalkalmazások készítésébe / Speciális témakörök a HTML DOM-ból: űrlapok, képek, táblázatok

Tanulási útmutató

Összefoglalás

Egy korábbi fejezetben már részletesebben foglalkoztunk a Dokumentum Objektum Modellel. Ebben a fejezetben a HTML elemekhez kapcsolódó specialitásokról lesz szó, bővebben kitérve az űrlapelemek, képek és táblázatok kezeléséhez kapcsolódó ismeretekre.

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:

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:

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

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:

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

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

Szöveges beviteli mezők

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

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:

Forráskód
<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):

Forráskód
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:

Forráskód
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:

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

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

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:

Forráskód
<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:

Forráskód
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:

Forráskód
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.

Forráskód
//Ú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:

Forráskód
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:

Forráskód
<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:

Forráskód
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ő:

Forráskód
<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:

Forráskód
$('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.

Forráskód
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:

Forráskód
<img src="alma.png" alt="Alma" id="kep1">

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

Forráskód
//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:

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

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.

Forráskód
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

Feladat
  • Készíts egy űrlapot, amelyen egy nevet, életkort és egy érdeklődési területet kérünk be. A nevet és az életkort szöveges beviteli mezővel adható meg, az érdeklődési terület legördülő listából választható. Ennek első eleme „Kérem, válasszon!” feliratú.
    • A feladat az, hogy JavaScript segítségével ellenőrizzük, hogy a következő szabályok teljesülnek-e: név és érdeklődési terület megadása kötelező, életkornak csak számot fogadunk el. Az ellenőrzést elküldéskor végezzük el, a hibákat az űrlap felett egy listában jelenítsük meg.
    • Tegyünk fel egy radiogomb-csoportot is az oldalra, és vizsgáljuk azt is, hogy ki lett-e választva ezek közül az egyik.
  • Tegyünk fel az oldalra két lista űrlapelemet (select). Ezek között legyen két gomb: az egyikre kattintva a bal oldali listában kiválasztott elem átkerül a jobb oldali listába, a másikra kattintva ugyanez történik jobbról balra.
    • A listákban csak egy elemet lehet egyszerre kiválasztani.
    • A listákban többszörös választás is lehetséges.
  • Egy űrlapra tegyünk fel három radio gombot 1, 2, 3 értékkel és felirattal. Mellette legyen egy gomb. Erre kattintva a kiválasztott radiogombnak megfelelő számosságú szöveges beviteli mezőt generáljunk az űrlapba.
  • Egy űrlapon kérjük be a kitöltő nevét, és radio gomb segítségével a nemét. Ha a „nő” lett kiválasztva, akkor kérjük be a leánykori nevét is. Ellenkező esetben ez meg se jelenjen.
  • Egy űrlapon szöveges beviteli mezők és legördülő listák vannak. Oldjuk meg, hogy ha bármelyik mezőben változás állna be, akkor legyen piros az űrlap kerete.
  • Tegyünk fel egy képet az oldalra, mellé pedig egy szöveget (pl. „segítség” felirattal).
    • Ha a szöveg fölé visszük az egeret, akkor cseréljük le a képet valami másra.
    • Oldjuk meg ezt a problémát a kép előtöltésével!
  • Készíts egy képnézegetőt!
    • Az oldalon legyen egy kép és két gomb „Előző”, „Következő” felirattal. A gombokra kattintva változzon meg a kép. A képek forrását egy tömbben tároljuk.
    • Töltsük előre a következő képet.
    • Oldd meg a képváltás stílusátmenettel. Legegyszerűbb halványulással megoldani az átmenetet.
    • Ha nincs JavaScript, akkor egyáltalán ne jelenjen meg a képnézegető.
  • Egy oldalon sok kép van. Írjunk olyan JavaScript kódot, amely az oldal betöltése után minden képnél kigyűjti, hogy mi a kép id-ja és alt attribútuma, és azokat az oldal tetején egy listába kigyűjti.
  • Egy négyzetrácsos térképen el van dugva egy kincs. Kattintgatással keresd meg, hol van! A megtalálás után, a gép újra rejtse el a kincset!
    • A tábla legyen 2x2-es méretű!
    • Egy szöveges mezőben lehessen megadni, mekkora legyen a tábla. Egy gombra kattintva a megfelelő méretű táblázat jelenik meg.
    • Készítsünk számlálót, mely méri hány kattintásból találtuk meg a kincset!

Vissza a tartalomjegyzékhez

Új Széchenyi terv
A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.