Andrise programmeerimisalane WIKI

Enda loodud XHTML märgendid

Erineva meta-info lisamiseks lehel asuvatele elementidele on reeglina kasutusel id ja class väljad. Need väljad annavad üsna mugava viisi elemente „märgistada“. Eriti mugav on kasutada just class välja - sinna võib reastada tühikutega eraldatuna niipalju väärtuseid kui pähe tuleb.

<span class="aeg algus aasta">2010</span> - <span class="aeg lopp aasta">2011</span>

Nii saab kerge vaevaga JavaScripti abil vajaliku info lehelt välja korjata. Näiteks Prototype teegi abil võiks see käia nii:

$$('span.aasta').each(function(aasta_elm){
    alert(aasta_elm.innerHTML);
});

Antud kood väljastaks ekraanile ükshaaval teated kõigi elementide sisuga, millel on määratud klass nimega aasta. Näite puhul oleks siis nendeks kuvatavateks väärtusteks 2010 ja 2011.

Paraku aga kõigeks taolise lähenemise juures ei piisa. Probleem on selles, et klasside kasutamine annab küll suurepärase võimaluse elemente flag'ida, määrata ära kas omadus on olemas või mitte, aga ei saa samal viisil (või on see ebamõistlikult rakendatav) anda edasi täiendavaid väärtusi. Et näiteks on tegu küll aasta tüüpi elemendiga, aga selle asemel et hoida seda aasta väärtust innerHTML osas nagu näite puhul, oleks see kusagil elemendi defineerimise juures juba olemas. Palju parem oleks ju kui saaks esitada seda aastat kujul aasta=2010.

Siin tulebki appi olemasoleva HTML kogumi täiendamine omaenda elementide ja atribuutidega. Kuna XHTML definitsioon ütleb et tegu on laiendatava tüübiga (Extensible HTML), siis keskendume just sellele dokumendi tüübile. (Kuidas ja miks dokumenditüüpi koostada leiad siit)

XHTML laiendamiseks tuleb esiteks määrata ära oma nimeruum, seda saab teha lisades vastava märke <HTML> elemendi deklaratsiooni juurde.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:tml="http://www.tahvel.info/2010/tml">

Nagu näha lõime nimeruumi nimega tml (Tahvel.info Markup Language), mis viitab mingisugusele nimeruumi märkivale URI'le. Tegelikkuses seda aadressi ei eksisteeri ja seda ei peagi praktikas eksisteerima, brauserid saavad ka niisama hakkama.

Kui nimeruum on olemas, saab selle nimeruumiga luua erinevaid elemente ja atribuute nagu XML juures ikka.

<tml:minu-tag>Enda loodud tag</tml:minu-tag>
<tml:minu-tag minu-atribuut="väärtus">Enda loodud tag, enda loodud atribuut</tml:minu-tag>
<div tml:minu-atribuut="väärtus">Tavaline DIV, enda loodud atribuudiga</div>

Siinkohal on küll probleemiks, et W3C validaator ei pea loodud HTML koodi korrektseks XHTML dokumendiks, kuid sellega pole probleemi, kuna kõik brauserid söövad seda siiski sama hästi.

Kui markup on välja mõeldud, mida siis sellega edasi teha? Kõik oma loodud elemendid, mis asuvad enda loodud nimeruumis saab näiteks lehelt kokku korjata järgmise funktsiooniga:

/**
 * getByNS(ns, tagName [, node]) -> NodeList
 * - ns {string} kasutatav nimeruum
 * - tagName {string} otsitav märgend, ilma nimeruumita
 * - node {DOMElement} element mille järglaste hulgast objekte otsida (vaikimisi BODY)
 * Funktsioon otsib soovitud kohast üles kõik NS:TAG tüüpi elemendid ja tagastab
 * need NodeList kujul (mitte massiiv, vaid massiivilaadne "elus" list vastavate elementidega)
 */
getByNS = function(ns, tagName, node){
    node = node || document;
    var namespaces, elements = [], fullName = ns + ':' + tagName;
    if("getElementsByTagNameNS" in node && "namespaceURI" in document.body && !window.opera){
        return node.getElementsByTagNameNS(document.body.namespaceURI, fullName.toLowerCase());
    }else if("namespaces" in document){
        if (document.namespaces[ns]!==undefined) {
            return node.getElementsByTagName(tagName);
        }
    }
    return node.getElementsByTagName(fullName);
}

Kui aga tahame leida kõiki DIV elemente, mille minu-atribuut väärtus oleks 456, saab seda teha Prototype abil järgnevalt:

var elemendid = $$("div[tml:minu-atribuut=456]");

Lihtsalt elemendi atribuuti väärtust lugeda ja seada saab elemendi meetoditega getAttribute(name[, default_value]) ja setAttribute(name, value).

alert(minu_element.getAttribute("tml:minu-atribuut"));

Enda loodud sündmused

Vajadusel saab sellistele enda loodud elementidele külge panna ka erinevaid enda loodud sündmusi, mis rakenduvad mingitel kindlatel tingimustel. Selle jaoks tuleb vajalikul hetkel otsida üles kõik sündmust omavad elemendid ja käivitada sündmuse atribuudi tekstiline väärtus JavaScriptina.

<tml:minu-tag onkell12="alert(this.innerHTML)">kell sai 12</tml:minu-tag>

window.setTimeout(function(){
    var elemendid = getByNS("tml", "minu-tag");
    for(var i=0, len = spans.length; i<len; i++){
         Function(
             elemendid[i].getAttribute("onkell12","")
         ).call(spans[i]);
    }
},new Date(+new Date()+86400000).setHours(0,0,0,0)-new Date());

Näites otsitakse lehelt üles kõik <tml:minu-tag> tüüpi elemendid ja käivitatakse neis onkell12 sündmus nii, et this jääb viitama sellelesamale HTMl elemendile, mille sees atribuut asub (<tml:minu-tag>). Näite puhul vastaks sellele ainult üks element, mis väljastaks kell 12 ekraanile teate „kell sai 12“.

Kokkuvõtteks

Tegu on tehnikaga, mis võimaldab serveri poolel täita lehekülg erineva ainult selle lehega seotud meta-infoga, ilma et peaks väga asjade pärast muretsema. W3C validaator küll natuke köhib sellise koodi peale, kuid see on asi mida saab mõistlikul määral ignoreerida. Igati valiidsed alternatiivid võivad osutuda praktikas kas liiga keerulisteks või ebakindlateks.

Käidud rada: • close_tab • funcparams • geolocation • iframe • jstorage • location_referer • storage • timefield • window_blur • xhtml_custom_tags