Rozluštěné křižovatky DHTML

DHTML dospělo po několika letech rozporů konečně do relativně standardizované fáze. Díky možnostem prohlížečů lze dnes programovat nejen jednoduché skripty, ale i výkonné a efektní aplikace. Tutoriál, který by vám měl na této spletité cestě podat pomocnou ruku, začínáme právě dnes.

Nejdříve se budeme zabývat moderní a stálé oblíbenější technikou internetového a intranetového programování. Budete-li pravidelnými čtenáři, dozvíte se, co vlastně zkratka DHTML znamená a jak se s tímto nástrojem pracuje. Čeká na vás porce teoretických podkladů, ale také spousta vysvětlených a vysvětlujících příkladů a v závěru i pokročilejších aplikací. Samozřejmostí budou také odkazy na standardy, dokumentaci a referenční příručky. Věřím, že text bude přínosný především pro začínající programátory, přičemž si na své přijdou i zkušenější uživatelé.

Co je DHTML ?

Formálně vzato je DHTML zkratka Dynamic HyperText Markup Language – česky dynamické HTML. Laicky řečeno jde o způsob, jak na straně klienta měnit obsah a vzhled libovolného dokumentu v prohlížeči, bez spoluúčasti serveru. Nejedná se ale o samostatný skriptovací či programovací jazyk, nýbrž o abstraktní a nestandardizovaný pojem, vycházející z prostředků a možností moderních prohlížečů. Čtenáři, libující si v referenčních materiálech s množstvím funkcí a atributů ovšem nemusí věšet hlavu, neboť materiálů ke studiu bude opravdu spousta. DHTML je totiž aplikace nástrojů, které znáte: HTML, javascriptu, kaskádových (kaskádních) stylů a především objektového modelu dokumentu. To vše v jednom, oku lahodícím, balení. Zatímco načtení stránky do prohlížeče znamená pro statický dokument konec aktivity, u DHTML je to ten pravý čas, jak pomocí výše zmíněných prostředků své pracné výtvory rozhýbat, zefektivnit a vložit do nich trochu interaktivity.

Nejprve však trocha historie. První „začátky“ byly velmi nelehké a programovat DHTML skriptíky se rovnalo mnohým probdělým nocím a ostrým slovům, adresovaným tvůrcům prohlížečů. Právě společnosti, tvořící tehdy majoritní prohlížeče Explorer a Netscape se výrazně rozcházely v názorech na prostředí a rozhraní pro práci s dokumentem. Ačkoli byly první verze standardů představeny WWW konsorciem (W3C) na počátku roku 1998, přesto připravovaly vývojářům mnohé bezesné noci tím, že je hrubě nedodržovaly (což se v menší míře děje dodnes). Když už se tak stalo, jejich nasazení bylo často prachbídné. Někdy zase přišly společnosti se svým vlastním proprietálním řešením (což se také děje dodnes), které bylo sice funkční, ale podpora ze strany konkurence byla nulová. A tak se skripty psaly i pro několik verzí prohlížečů. Dnešní situace je veskrze pozitivnější, především z důvodu téměř úplné a jednotnější podpory starších a alespoň částečně posledních standardů. Také psát kód pro všechny možné verze prohlížečů se stále méně používá (případné rozlišování neprobíhá na úrovni jednotlivých verzí, ale výrobců), neboť podíl na trhu minoritních prohlížečů často neodpovídá vynaloženému úsilí. Speciálním případem jsou intranetové aplikace, kde může vývojář programovat pouze pro jeden typ podnikového prohlížeče.

Jak již bylo řečeno, DHTML je :

• Objektový model dokumentu
• Javascript
• Kaskádové styly
• Pozicování
• Model událostí
• HTML

Pokud vám výše jmenované názvy vůbec nic neříkají, musíte si alespoň základní znalosti doplnit sami. O všech existují seriály tady na Intervalu: HTML, Javascript, CSS, události. Začínat tímto textem opravdu nedoporučuji. Možná se ptáte, jak to vše souvisí s DHTML ? Odpověď je jednoduchá. Abyste mohli přidat nějaký element do stránky, musíte znát jeho funkci (HTML). Pro práci s dokumentem či elementem jako objektem, je potřeba znát objektový model dokumentu (DOM). Pokud chcete upravit vzhled, styl, případně pozici elementu na stránce, je nutné se orientovat v kaskádových stylech a pozicování (CSS). Toto vše lze provádět skrze rozhraní JavaScriptu (JS). Pokud chcete některou z jmenovaných akcí vyvolat po vzniku nějaké události v dokumentu (například kliknutí myši nebo stisk klávesy), základní znalost událostí bude nutná. Připomínám, že všechny uvedené nástroje mají své doporučené standardy vyvíjené konsorciem W3C, jejichž kompletní přehled včetně odkazů je k dispozici v tabulce pod odstavcem. Jejich podpora prohlížeči má stoupající tendenci, to ovšem neznamená, že se nevyhneme problémům, neboť stále není kompletní.

Odkazy na standardy:

Proč DHTML?

V dřívějších dobách to byla především výsledná efektnost skriptů, která motivovala vývojáře k tvorbě nejrůznějších „hejblátek“. Bohužel, často vznikaly hrůzné výtvory (především osobní stránky), které navíc polovina prohlížečů nebyla schopna správně zobrazit. V současnosti, vyjma efektních, vznikají i různá efektivní řešení. Důkazem budiž například tvorba rozmanitých menu a rozbalovacích nabídek, která nabízí snadnější navigaci na webu. Navíc ušetří serverové zdroje, neboť není potřeba tak častá spolupráce se serverem. Dalším směrem, kam se DHTML ubírá, je přibližovaní se vzhledu a ovládaní webových aplikací k operačním systémům. Opravdu není problém, o čemž se i v dalších dílech přesvědčíme, vytvořit webovou stránku či aplikaci tak, aby její GUI bylo takřka totožné s operačním systémem. Orientace nových uživatelů a práce s aplikací se tak může výrazně zjednodušit.

Využití DHTML je opravdu pestré: od drobných vylepšení informačních a osobních webů až po komplexní aplikace přibližující se funkčností ke klasický programům. Samozřejmě existuji určitá pravidla, kdy je vhodné DHTML použít a kdy ne. Je-li vaším primárním cílem pouze obsah a oslovení skupiny uživatelů např. s mobilními zařízeními, nebo chcete vytvořit bezbariérový web, je třeba velmi zvážit užití DHTML.

TIP:

Problémy DHTML

Jak již bylo v předešlé části vyřčeno, tím největším problémem pro DHTML jsou především prohlížeče a s tím související implementace standardů. Abychom předešli vášnivým diskusím, všechny informace a příklady uvedené v tomto seriálu (nebude-li uvedeno jinak) budou funkční v IE 5.0+ a Mozilla 0.9.1+ a Netscape 6+ (celkem 16 verzí prohlížečů), neboť jejich podpora standardů je nejrozsáhlejší, jejich celkový podíl na trhu je téměř 100% a navíc zastupují nesmiřitelné světy Linuxu a Windows. Čtyřkové verze prohlížečů Netscape ještě neznají pravý DOM. Operou se nemá zatím moc smysl zabývat (v rámci DHMTL). Sami její autoři přiznávají, že kromě několika málo metod zatím nepodporují standard W3C DOM LEVEL1. Možná se dočkáme u verze 7.0, kde je slibována plná podpora W3C DOM LEVEL2.

Přesto bude potřeba zjišťovat typ prohlížeče tam, kde se IE a Mozilla/NS rozcházejí. Podle toho upravíme část procedury dané aplikace. K rozporu nedochází ani tak v metodách DOM, jak tomu bylo doposud, ale například při zjišťování velikostí prvků apod. Možností, jak rozpoznat prohlížeč, je více: buď využít browser sniffer, což je předem napsaná JS knihovna, která veškerou práci udělá za nás, nebo si pomoci objektu navigator napsat vlastní skript. Speciálně se pak využívá přímého testování prvků použitých v kódu. Například níže uvedenou konstrukcí odmítneme všechny prohlížeče, které nepodporují metodu document.getElementById. Je pak pouze na programátorovi, zda-li nabídne alternaci nebo činnost kódu ukončí. Tento postup je populární a vhodný např. pro prohlížeče Opera, která umožňuje tvářit se jako IE, ačkoli jsou její chování a znalosti metod zatím na zcela odlišné úrovni.

if(!document.getElementById) {alert(‚Vas prohlizec nepodporuje metodu getElementById‘);}
else { /// kod aplikace /// }

Existuje ještě jedno východisko, ale o něm se zmíním až se budu zabývat objektovým programováním. V seriálu budu používat knihovnu sniffer.js, která je napsaná pouze pro základní potřeby toho textu. Pro sofistikovanější práci doporučuji sniffer2.js. Knihovna se vkládá jako externí JS knihovna tak, jak je uvedeno níže.

<html>
<head>
<script src=“sniffer.js“></script>
</head>
<body>
…
</body>
</html>

Učíme se DHTML

DHTML, jakožto abstraktní pojem, jsou především aplikace a skripty založené na určitých nástrojích a standardech. Pozorný a pravidelný čtenář našeho serveru se s tímto pojmem už jistě setkal, ale vždy se jednalo o krátké ochutnání konkrétní aplikace bez hlubšího teoretické podkladu. Samozřejmě i u DHTML platí, že každý problém lze řešit mnoha rozdílnými postupy a co programátor, to unikátní přístup (o tom se jistě přesvědčíte v následných diskusích :). To platí jak v elementárních tak pokročilejších úlohách, proto budu uvádět i případné další odkazy na jiné zdroje s rozdílným řešením. Jelikož ale není možné se zaobírat všemi detaily, cílem tohoto textu bude namixovat hutný koktejl informací a poskytnout základního průvodce k DHTML aplikacím, jehož součástí bude probrání základních teoretických podkladů a praktických ukázek, včetně případných odkazů na kompletní reference a další webové zdroje pro další, hlubší studium. Ve finále pak znalosti zúročíme v podobě konkrétních aplikací.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.