Návrh a tvorba WWW Přednáška 12 JavaScript III.

Výjimky v JavaScriptu Výjimky jsou způsob jak řešit neočekávané nebo výjimečné situace ke kterým dochází při běhu skriptu. K obhospodaření výjimek slouží klíčová slova try, catch a finally. Pro vyhození výjimky potom klíčové slovo throw. //vyhození výjimky if (false) throw „Nastala výjimka.“ //obsluha výjimky try { // kus kódu } catch (e) { // ošetření výjimky } finally { //kus kódu, který se vykoná vždy, ať dojde k výjimce či nikoliv }

AJAX AJAX (Asynchronous JavaScript and XML) je označení pro technologii asynchronní komunikace mezi klientem a serverem. Tato technologie umožňuje dynamicky načítat a měnit obsah webové stránky bez nutnosti znovunačtení. V důsledku to přináší rychlejší zpracování stránek a příjemnější uživatelské prostředí. //vytvoření XMLHttpRequest objektu xmlhttp=new XMLHttpRequest(); //specifikace http requestu (metoda, url, synchonní/asynchronní) xmlhttp.open("POST","ajax_test.asp",true); //přidání HTTP hlavičky xmlhttp.setRequestHeader("Content-type","application/x-www-form- urlencoded"); //odeslání dotazu s POST parametry xmlhttp.send("name=Lukas&faculty=FEI");

JavaScript frameworks Ve vývoji javascriptových frameworků existují dva hlavní trendy – striktní dodržování zapouzdření a operování pouze na vlastním písečku (tedy namespace) nebo rozšiřování již existujících objektů. Příkladem frameworku striktně dodržujícího zapouzdření je jQuery nebo YUI, příkladem frameworku rozšiřujícím již existující objekty je Prototype. Oba přístupy mají něco do sebe. Většina webových vývojářů preferuje ono zapouzdření z obavy možné kolize. Tím pádem se nemusí obávat toho, že jejich skripty budou nekompatibilní se skripty třetích stran, na druhou stranu ale přicházejí o všechny ty užitečné metody, které by se daly doprogramovat do již existujících objektů. –script.aculo.us ( –Prototype ( –Moo Tools ( –jQuery ( –MochiKit ( –Rialto ( –Dojo Toolkit ( –Spry Framework (

jQuery JQuery je jednou z nejrozšířenějších a nejoblíbenějších JavaScriptových knihoven. Její síla je především v jednoduchosti a v dobré dokumentaci. Knihovna se stále rozvíjí a také díky široké komunitě přispěvatelů je k dispozici nepřeberné množství pluginů. Pomocí knihovny je především možné: –manipulovat s objekty DOM, –manipulovat s událostmi, –manipulovat s CSS, –zpracovávat animace a efekty, –pracovat s Ajaxem.

Příklad jQuery Jako příklad užití knihovny jQuery můžeme uvést přidání třídy „red“ k elementu h1, který je identifikován prostřednictvím id „nadpis“. Tuto operaci provedeme pomocí funkce addClass. Funkci navíc umístěme do funkce ready, která nám zajistí interpretaci obsahu až ve chvíli, kdy je připraven objektový model dokumentu (DOM). V opačném případě by totiž webový prohlížeč začal interpretovat naše příkazy už v době, kdy ještě není celý dokument načten. Jinak řečeno, nepodařilo by se nám zaměřit prvek „nadpis“, protože by ještě nebyl prohlížečem načten. Testing jQuery #red {color:red} $(document).ready(function() { $("#nadpis").addClass("red");}); Ukázka jQuery

MooTools Mootools je objektově orientovaný Framework, který je založen na rozšiřování objektů, což sebou nese jisté riziko kolize. V počátku vývoje byl inspirován frameworkem Prototype, dnes převažuje inspirace převážně v jazyce Ruby. Samotný framework se skládá z řady komponent, které je možné používat jako celek, ale i jednotlivě dle konkrétních požadavků. Je však nutno být na pozoru, protože funkčnost některých komponent je závislá na přítomnosti komponent jiných (především na jádře). Komponenty: –Core – základní funkcionalita, –More – oficiální rozšíření jádra o kolekci doplňků, –Class – základní knihovna pro Class objekt, –Natives – přidání funkcionality, kompatibility a nových metod pro jednodušší kódování, –Element – přidání vylepšení a kompatibility vztahující se k HTML Element Object, –Fx – rozšíření o efekty animace, –Request – obsahuje XHR rozhraní, cookie, JSON, atd., –Window – poskytuje interface ke klientským informacím, jako třeba rozměr okna prohlížeče.

Příklad MooTools Jako ukázka užití frameworku Mootool je zvolen příklad přidání události pro element s identifikátorem „tlacitko“. Stejně jako v předešlém příkladu užití knihovny jQuery, je nutné obsloužit stav, který nám znemožní interpretaci příkazů před načtením celého objektového modelu dokumentu. V případě Mootool přidáme k prvku window událost „domready“ a veškeré další příkazy uvedeme uvnitř této události. Samotné přidání události k prvku „tlacitko“ obsloužíme stejně jako u prvku window metodou addEvent(). Testing MooTools window.addEvent('domready', function () { $("tlacitko").addEvent('click', function() { alert("Click!"); });}); click

ExtJs Framework EXT JS disponuje řadou prvků uživatelského rozhraní, které umožňují vývojářům vytvářet velice rychle robustní webové aplikace. Jedná se např. o: –Tabulky, –Grafy, –záložky, –okna –stromy, –menu a navigaci, –formuláře, –atd. Dále Framework disponuje podporou pro: –tvorbu layouty, –Drag nad Drop, –MVC –a pokročilou komunikaci se serverem.

Příklad ExtJs Viz