1. HTML5 Technologie HTML5 zavádí a vylepšuje širokou škálu funkcí, zahrnující pokročilé nástroje pro práci s formuláři, multimédii, strukturami a sémantikou, aby poskytla autorům více flexibility a interoperability a umožnila vznik nových webů a služeb bez nutnosti použití dalších doplňujících technologií (např. Flash). HTML5 především zavádí celou sadu nových elementů, které významně usnadňují strukturování stránek. Většina stránek je dnes tvořena klasickou skupinou obvyklých částí, jako je hlavička, patička a různé sloupce, přičemž se tyto části běžně vyznačují pomocí elementů div odlišených prostřednictvím popisných atributů id a class. Užití elementu div je dáno především tím, že současná verze jazyka (X)HTML postrádá nezbytné sémantické prvky pro přesnější vyznačení specifických částí dokumentu. HTML5 proto řeší tento problém zavedením nových elementů reprezentujících jednotlivé části dokumentu. Schéma vlevo ukazuje typický dvousloupcový layout vyznačený elementy div s atributy id a class. Obsahuje hlavičku, patičku a navigační lištu těsně pod hlavičkou. Hlavní obsah je tvořen článkem a vedlejším sloupcem umístěným vpravo. Element div je v HTML5 být nahrazen novými elementy: header, nav, section, article, aside a footer a odpadá tak nutnost přiřazení tříd či identifikátorů. Příklad základního kódu HTML5 dokumentu: <!DOCTYPE html> <html lang="cs"> <head> <meta charset="utf-8" /> <title>název stránky v titulkovém pruhu prohlížeče</title> </head> <body> <article> <header>...</header> <nav>...</nav> <section>...</section> <aside>...</aside> <footer>...</footer> </article> </body> </html> Další příklady využití HTML5 jsou v kapitolách 20 a 21 Audio a Video na webové stránce. Více na http://interval.cz/webdesign/html/.
2. DYNAMICKÉ HTML - DHTML Dynamické HTML je kombinací (X)HTML, CSS stylů a skriptů, přičemž vzhled stránky se chová při zobrazení dynamicky, tzn. pro změnu vzhledu není třeba znovu načítat stránku. Proti jiným metodám má tato zejména výhodu v prolnutí této technologie do celého textu stránky. Dynamické HTML se tak stává součástí textu na stránce a může ovlivňovat libovolnou součást stránky. Z dostupných technologií má DHTML nejblíže klasickému návrhu stránky pomocí HTML. Dynamické HTML je podporováno jak Netscape Communicatorem, Mozillou, Firefoxem, Operou, tak MS Internet Explorerem, avšak každým jinak a v různém stupni rozsahu. Odlišnosti jsou nejen v možnostech ovlivňování prvků dokumentu, ale i v syntaxi skriptovacího jazyka. Součástí dynamického HTML je řada standardních rozšíření. Pomocí dynamického HTML můžeme např. animovat objekty, používat vektorové objekty, přímo propojovat tabulky s databázovými zdroji nebo využívat mnoho dalších efektů. Jak i z názvu vyplývá, dynamické HTML je formou publikování na webu, která se i nadále dynamicky vyvíjí. V současnosti nejde již jen o dynamiku vzhledu webové stránky, ale také o dynamickou změnu obsahu stránky. Fenoménem brzké budoucnosti se zanedlouho jistě stane nová technologie, nazvaná XML (extensible Markup Language). Jejím posláním není nahradit HTML, XHTML, popř. DHTML, sloužící k definování vzhledu dokumentu, ale oblastí jejího působení je především logická struktura dokumentu. Dá se očekávat, že obě tyto technologie v blízké budoucnosti vzájemně do sebe prolnou. UDÁLOSTI TYPU INTRINSIC Aby byly naše dokumenty opravdu interaktivní, je potřeba, aby provedení určité části skriptu bylo vyvoláno událostí, kterou aktivoval uživatel. Událostí může být přejetí myší přes určitý element, pohyb myší, kliknutí myší, "double-klik", volba ve formuláři apod. V dynamickém HTML byly všechny prvky dokumentu rozšířeny, aby podporovaly události klávesnice a myši. Tyto události jsou v každém prvku vytvořeny přímo jako tzv. dynamické atributy a umožňují přímé spojení mezi prvkem a chováním (podobná spojení jako u prvku s jeho stylem). (X)HTML elementy mají tedy své vlastnosti, metody a reagují na příslušné události. Každý prvek je schopen reagovat na jakékoliv události v rámci stránky, a to prakticky i bez skriptování. Tím, že všechny tyto události jsou navíc plně skriptovatelné, umožňují vytvořit nebývale interaktivní stránky dynamické HTML stránky. DYNAMICKÉ ATRIBUTY PŘÍKAZŮ JAZYKŮ HTML A XHTML Události myši onmousedown onmouseup onmouseover onmousemove onmouseout onclick ondblclick stisknutí tlačítka uvolnění tlačítka přesun na HTML prvek přesun nad HTML prvkem přesun z HTML prvku kliknutí na HTML prvek dvojité kliknutí na HTML prvek
Události klávesnice onkeydown stisknutí klávesy onkeyup uvolnění klávesy onkeypress stisknutí (a uvolnění) klávesy Ostatní onload dokončení natahování obsahu okna (nebo rámců) atribut může být použit v prvcích BODY a FRAMESET onunload odstranění obsahu dokumentu z okna (nebo rámce) atribut může být použit v prvcích BODY a FRAMESET onfocus při získání fokusu; atribut může být použit v prvcích LABEL, INPUT, SELECT, TEXTAREA, BUTTON onblur při ztrátě fokusu; atribut může být použit v prvcích LABEL, INPUT, SELECT, TEXTAREA, BUTTON onsubmit při odeslání formuláře atribut může být použit v prvcích FORM onreset při nulování formuláře atribut může být použit v prvcích FORM onselect při výběru textu v textovém poli atribut může být použit v prvcích INPUT, TEXTAREA onchange při ztrátě fokusu, byla-li hodnota prvku změněna; atribut může být použit v prvcích INPUT, SELECT, TEXTAREA Příklad dynamického odkazu s měnícím se obrázkem (událost onmouse): <a href="url" onmouseover="identifikator.src= image2.jpg ; window.status=... text... ; return true;" onmouseout="identifikator.src= image1.jpg ; return true;"> <img src="image1.jpg" name="identifikator" border=0 alt="obrázek, měnící se pohybem myši"> </a> Poznámka: velké množství dalších příkladů k tomuto i následujícímu tématu najdete na www.pf.jcu.cz/pepe/priklady/dhtml-skripty. 3. DOM - OBJEKTOVÝ MODEL DHTML Aby bylo možné pomocí JavaScriptu ovládat chování prohlížeče a vzhled (X)HTML dokumentu, je definován takzvaný objektový model prohlížeče - několik automaticky tvořených objektů, obsahujících informace popisující stav prohlížeče a zobrazovaných (X)HTML dokumentů. Objekty, které jsou součástí objektového modelu prohlížeče, obsahují často vlastnosti, jejichž hodnotami jsou odkazy na další objekty a vytvářejí tak dosti složitou hierarchii, pomocí níž lze přistupovat v JavaScriptu k jakémukoli objektu. Většina aplikací, jako je např. Microsoft Word, Microsoft Excel, Microsoft PowerPoint a Internet Explorer, jsou složeny z objektů. Tyto aplikace jsou sestaveny z vhodně nadefinovaných softwarových modulů, s jejichž daty lze pracovat díky proměnným, známým
jako vlastnosti (properties) a jejich služby lze využívat pomocí funkčních volání, známých jako metody (methods). Vlastnosti a metody realizují užitečnou funkci pro určitou část softwaru. Kolekci vlastností a metod, jež definují určitý objekt, se říká rozhraní (interface). Rozhraní je vyvoláváno uživatelem pomocí nástrojových panelů a nabídek, může je však volat přímo programátor prostřednictvím programového kódu. Vše, co může provádět uživatel v aplikaci, může dělat i programátor, jenž provádí volání k objektům. Objektové modely jsou založeny na technologii známé jako Dynamic Object Model (DOM), což je specifikace, v níž je definováno, jak objekty komunikují za účelem sdílení služeb. Sdílení služeb dodává objektovým modelům výkonnost a flexibilitu. V objektovém modelu dokumentu tedy všechny jeho prvky disponují interface, který zpřístupňuje prvek a vlastnosti prvku. Každému (X)HTML prvku odpovídá objekt prvku, disponující vlastnostmi a metodami. Všechny atributy prvků jsou přístupné jako řetězcové vlastnosti objektu prvek. Každý objekt tedy disponuje množinou vlastností a metod. Základním objektem je window (představuje celý prohlížeč), přes který jsou dostupné všechny další objekty. Nejdůležitějším objektem je document, který v sobě zahrnuje všechny objekty a vlastnosti vztahující se k aktuálnímu dokumentu. Na jednotlivé objekty v hierarchii se odvoláváme pomocí tzv. tečkové notace: window.screen, window.document, window.document.body. Protože je ale objekt document nejpoužívanější, můžeme před ním vynechat specifikaci nadřazeného objektu window. Zkráceně tedy můžeme psát window.screen, document, document.body. ZÁKLADNÍ HIERARCHIE OBJEKTŮ window location history navigator event screen document links anchors images filters forms applets embeds plugins frames scripts all selection stylesheets objekt nejvyšší úrovně, otevřené okno v prohlížeči, je-li definováno více rámů, je jeden objekt window pro originální dokument a po jednom pro každý rám aktuální URL navštívené URL reprezentuje prohlížeč zpřístupnění událostí a jejich parametrů informace o obrazovce prohlížeče a vyobrazovacích schopnostech HTML dokument v okně prohlížeče kolekce všech <A> prvků, které obsahují atribut HREF a všechny <AREA> prvky v dokumentu kolekce všech <A> prvků, které obsahují atribut NAME nebo ID kolekce <IMG> prvků v dokumentu kolekce filtr objektů pro prvek kolekce <FORM> prvků v dokumentu kolekce všech <APPLET> objektů v dokumentu kolekce všech <EMBED> objektů v dokumentu alias pro embeds kolekci na dokumentu kolekce všech window objektů definovaných daným dokumentem kolekce všech <SCRIPT> objektů v dokumentu kolekce element objektů reprezentujících všechny prvky v HTML dokumentu aktuální selekce bloku textu kolekce StyleSheets objektů reprezentujících styly
body textrange style dialog mimetype specifikuje začátek a konec těla dokumentu text v HTML prvku aktuální nastavení všech možných vnitřních stylů pro daný prvek speciální window objekt vytvořený metodou showmodaldialog() datový MIME typ NEJČASTĚJI POUŽÍVANÉ OBJEKTY, JEJICH METODY A VLASTOSTI WINDOW metody: open, close, alert (parametry metody open: directories, height, width, left, top, location, menubar, resizable, scrollbars, status, toolbar) vlastnosti: status, default status Příklad (tlačítko na otevření nového okna prohlížeče): <form onclick="window.open('http://www.seznam.cz','seznam', 'width=400,height=400,scrollbars=no,resizable=no, menubar=no,location=no,status=no,toolbar=no'); return false;"> <input type="button" value="seznam" /> </form> DOCUMENT metody: write vlastnosti: bgcolor, fgcolor, link color, vlinkcolor, alinkcolor, location, lastmodified HISTORY metody: go, forward, back Příklad (tlačítka zpět a vpřed v historii navštívených stránek): <a href="" onclick="history.back(); return false;"><b>zpět</b></a> <a href="" onclick="history.forward(); return false;"><b>vpřed</b></a> LOCATION metoda: replace SCREEN vlastnosti: width, height (px), colordepth (bitů na pixel)
Příklad (zjištění nastaveného rozlišení a barevné hloubky): <script language="javascript"> document.write('pracujete v rozlišení ' + screen.width + 'x' + screen.height + ', v ' + screen.colordepth + '-bit barevné hloubce.') </script> NAVIGATOR vlastnosti: appname, appversion, cpuclass, platform Příklad (zjištění jména a verze prohlížeče): <script language="javascript"> document.write("používáte prohlížeč " + navigator.appname + " " + navigator.appversion) </script> DATE metody: gethours, getminutes, getseconds, getfullyear, getmonth, getday (den v týdnu), getdate (den v měsíci) Poznámka: velké množství dalších praktických příkladů na použití těchto i následujících objektů najdete na www.pf.jcu.cz/pepe/priklady/dhtml-skripty.