práce s DOMem
Stejně jako mnoho jiných knihoven, i tato obsahuje obal nejrůznějších funkcí resp. metod, které programátor používá velmi často. Mezi nimi najdeme například tyto:
JAK.gel(id); // (getElementById)
JAK.DOM.getElementsByClass(
'class', node, 'tag'); // vrátí pole prvků které mají třídu class
JAK.mel( 'tag', properties,
styles, doc); // (make element) vytvoří element
JAK.cel('tag', 'class', 'id', doc); // (create element) vytvoří element
JAK.DOM.clear(elm); // Vymaže všechny potomky daného DOM uzlu
JAK.DOM.addClass(elm, 'class'); // elementu přidá třídu
JAK.DOM.hasClass(elm, 'class'); // otestuje zda ma element danou třídu
JAK.DOM.removeClass(elm, 'class'); // elementu odebere třídu
JAK.DOM.getDocSize(); // vrací velikost dokumentu
JAK.DOM.getBoxPosition(elm); // zjisti pozici prvku elm ve stránce
JAK.DOM.getPortBoxPosition(elm); // zjistí pozici prvku elm ve stránce včetně
// skrolování
JAK samozřejmě neobaluje jen práci s DOM, což je jistě užitečné, zejména proto, že na různých prohlížečích se některé metody jmenují jinak. JAK tyto metody obaluje metodami vlastních objektů. Programátor má tak vše na jednom místě, dokumentované a fungující na široké škále internetových prohlížečů.
Události
Každý webový programátor někdy určitě přišel do styku s událostmi, které prohlížeč vytváří při nějaké akci a které putují celou stránkou až nakonec vykonají vše co měli. Typickou používanou událostí je onclick, onload, nebo onmouseover. Tyto události se obvykle zapisují přímo do html kódu, nicméně JAK obsahuje moc pěkný způsob jak nějakou vlastní funkci navěsit na událost kdykoli během života prvku. Místo obvyklého známého:
<img id="klikni_na_me" src="http://zeropage.cz//klikni_na_me.png" alt="klikni na mě" onclick="window.fce()">
Můžete někde později navěsit událost na prvek a následně je zpracovat pomocí těchto funkcí:
JAK.Events.addListener(
elm, 'click', window, fce); // elementu elm navěsí funkci window.fce
// na událost onclick
JAK.Events.removeListener(id); // odebere událost vytvořenou metodou
// addListener
JAK.Events.getTarget(e); // vrátí prvek, na kterém vznikla událost e
JAK.Events.cancelDef(e); // zruší výchozí akce pro událost e
Všimněte si že do názvu události již nepíšete první dvě písmena on! Tento mechanismus mě připadá velmi užitečný. Jednak umožní oddělit kód javacriptu od html kódu a dále tak lze šikovně ulevit prohlížeči, který javascript neumí nebo která ho má vypnutý (i když se to už moc nevidí).
AJAX
Zaklínadlo a pro začátečníky zároveň strašidlo ve světe javascriptu. Ve skutečnosti to není nic jiného, než explicitní dotaz na server. Javascript prostě odešle na server požadavek, GET nebo POST či jiné. Odpověď spustí callback a ten vrácenou stránku zpracuje, například tak, že její obsah vloží do nějakého prvku na stránce.
JAK tomuto postupu jak jinak než napomáhá, obaluje kód vlastním rozhraním, díky kterému je implementace AJAXu velmi snadná. Následující ukázka ukazuje, jak snadné je dotázat se serveru javascriptem.
var req = new JAK.Request( // vytvoří xhttp request
JAK.Request.XML, {asyc: false, timeout: false, method: 'get'});
req.setCallback(window, fce); // nastavi fci window.fce jako callback po
// dokončení požadavku
req.send('url', {arg: value}); // odešle požadavek na url
function fce(data, status){ // definici callbackus
if (status != 200) // test na http status 200 Ok
return;
alert(data); // xml dom nebo txt data atd...
}
Závěrem
Ještě než Vás zahrnu odkazy, upozorním na dvě užitečné věci. Prvním je obalené logování pomocí metody console.log(), která nekončí chybovým stavem v případě, že neexistuje objekt window.console. A druhou věcí je objekt JAK.Browser, který obsahuje atributy identifikující prohlížeč.
Stránka kde najdete kompletní dokumentaci včetně příkladů je
http://jak.seznam.cz. Knihovna je
distribuována pod MIT licencí. JAK obsahuje daleko více než obal různých metod a na stránce tak najdete definované třídy nebo gui objekty. Na ně se podíváme příště, nicméně kód těchto objektů je výborná ukázka programování pomocí JAKu. Obdobně tomu tak je u mapáckého api:
http://api.mapy.cz/. To je na JAKu postavené, resp. z tohoto api JAK vlastně vychází.