Týden 4
10.1 Odkazy
Hypertextové odkazy, které jsou nepostradatelnou součástí www stránek. Umožňují nám pouhým
kliknutím myši přenést se na cíl odkazu.
<a href=“http://www.seznam.cz“ title=“Seznam“>Seznam</a>
Hypertextový odkaz se uvozuje do párového tagu <a>. Má opět povinné atributy, které je potřeba přesně dodržet. Tím nejdůležitějším je podobně jako u obrázku cíl odkazu. Zapisuje se zde pomocí atributu href. Opět pomocí rovnítka a uvozovek nastavíme cíl odkazu. Např. portál seznam. Hyper- textový odkaz mívá ještě doporučován atribut title, což je text, který se uživateli zobrazí v bublině při najetí kurzorem na odkaz.
Text, který se v prohlížeči jako odkaz zobrazí je uvozen mezi počáteční a koncovou značku tagu <a>.
Stejně jako v případě cesty k obrázku se i u hyper. odkazů mohou použít relativní i absolutní cesty. Můžeme se odkazovat na jinou www stránku, třeba příklad 1, nebo také na fotografii uloženou ve složce obrazky.
<a href=“obrazky/foto.jpg“ title=“Pěkná fotka“>Ukaž foto</a>
V případě, že byste se chtěli odkazovat na stránku prvního příkladu (první-priklad.html) a máte ji
stejně jako třetí příklad uloženou ve složce kapitola 2, vypadal by odkaz následovně:
<a href=“prvni-stranka.html“ title=“První stránka“>Moje prvotina</a>
Obr. 10.1: Relativní odkazování; zdroj: (3)
81 ZNAČKY HTML KÓDU PRO PRÁCI S ODKAZY
Jak jsme již řekli, odkazy jsou v podstatě nejdůležitější částí webových stránek. Povinným atributem je zde cíl odkazu, který je zadán URL adresou. Může se jednat o stránku ve stejném adresáři webové aplikace, nebo o vzdálený link odkazující se na adresu jiného serveru. Důležitým atributem je target, který určí, zda se odkazující link otevře do nového resp. stejného okna prohlížeče.
Obr. 10.2: Zdrojový kód pro odkazy; zdroj: (4)
Obr. 10.3. Zobrazení obou odkazů z Obr. 10.2; zdroj: (4)
Pohledem na atributy elementu ) <a> (Tab. 10.1) vidíme atribut name sloužící po pojmenování ně- jakého úseku stránky, kterému říkáme záložka. Pokud tedy použijeme tento mechanismus, můžeme použít element <a> i pro odkazy uvnitř jedné stránky. Tento mechanismus je oblíben u online ma- nuálů, které v horní části stránky uvedou obsah s relativními odkazy na kapitoly, které jsou psány zhora dolů za sebou a link na záložky pomocí atributu name tak umožní snadný pohyb uvnitř roz- sáhlého textu.
Tab. 10.1: Atributy elementu <a>; zdroj: (4
Jiným typem odkazů jsou záložky. Takový odkaz vám otevře vybranou stránku na vybraném místě, třeba uprostřed (odroluje na vybrané místo). Záložky se vytvářejí atributem name u tagu <a>.
Nějaký text <a name="zalozka" /> Pokračování stránky
Záložky není nijak vidět, ale můžeme se na ní přesunout odkazem, tak aby text následující po záložce byl na prvním řádku prohlížeče.
WEBOVÉ TECHNOLOGIE
82
<a href="soubor.html#zalozka">Na záložku</a>
Tento odkaz otevře stránku soubor.html. Všimněte si nové věci v URL #zalozka, tímto způsobem se zadává jméno záložky. S použitím záložek může vzniknout problém, pokud se nacházejí u spodního okraje stránky. Prohlížeč je v takovém případě nemůže zobrazit na prvním řádku, ale až dále, pouze doroluje dokument až na konec.
Speciálním odkazem je odkaz na e-mail, který umožňuje otevřít e-mailového klienta (MS Outlook).
URL tohoto odkazu se skládá ze speciálního protokolu mailto: za kterým následuje e-mailová adresa. Po kliknutí by se mělo otevřít okno Vašeho e-mailového klienta s novou zprávou a vyplněnou polož- kou adresát. Tento odkaz nefunguje vždy, ne každý má poštovního klienta, proto je dobré napsat do textu odkazu samotný e-mail (5).
10.1.1 Formátování odkazů
Asi mi dáte za pravdu, že modro-fialové odkazy se nebudou vyjímat na každém webu. Proto existuje možnost změnit styl odkazů pomocí CSS. Styl odkazů lze nastavit pomocí pseudoelementů v exter- ním souboru nebo uvnitř elementu style.
Příklad:
a {font-size: 15px}
a:link {color: black}
a:hover {background-color: gray} a:visited {color: red}
a:active {color: blue}
První řádek nastavuje velikost písma odkazů. Na dalších řádcích se setkáváme s pseudoelementy.
Příklad:
a:link nastavuje styl nenavštívených odkazů, a:hover - styl odkazů po najetí myši,
a:visited - navštívené odkazy, a:active - aktivní odkazy (5).
11.1 XML
XML (eXtensible Markup Language – rozšiřitelný značkovací jazyk) je obecný značkovací jazyk stan- dardizovaný konsorciem W3C. Jedná se o velmi flexibilní textový formát odvozený z SGML. Jeho po- užití je především pro ryze strukturované dokumenty, tj. dokumenty obsahující strukturované nebo strukturovatelné informace. XML není určen jen pro texty, ale poradí si s jakýmikoliv daty i databá- zovými.
Vemme si například nějakou HTML stránku nějaké firmy, která zde prezentuje své výrobky či sl užby. Pro člověka jsou všechna data jednoduše čitelná. Pokud například uvidíme adresu firmy, poznáme, že se jedná o její adresu.
Obr. 11. 1: Zdrojový kód HTML stránky; Zdroj: (3)
V jazyce XML bychom mohli adresu firmy popsat pomocí následujících značek.
Obr. 11.2: Zdrojový kód stránky v jazyce XML; Zdroj: (3)
Takto strukturovaný dokument je pro počítač mnohem snáze čitelný – ví přesně, kde co hledat. Díky tomu je možno v XML umístit velké množství informací.
Jazyk XML má široké využití. Pomocí XML je možno strukturovat data dat tak, aby byla použitelná při databázovém zpracování. Jazyk XML má samozřejmě další možnosti. Ať už se jedná o výměnu dat mezi pobočkami firem (business-to-business applications), webové stránky, elektronické publi- kování či úložiště dat pro programy.
WEBOVÉ TECHNOLOGIE 86
11.1 Základní syntaxe XML 11.1.1 Základní stavební kameny
Základními stavebními kameny jazyka jsou element, atribut a text. Element je reprezentován oteví- rací značkou, obsahem a uzavírací značkou. Z elementů je potom sestaven celý dokument v poža- dované struktuře, které dosáhneme pomocí zanořování elementů do sebe. Element má vždy oteví- rací a uzavírací značku.
<element>obsah</element>
Obsah elementu se uvádí mezi otevírací a uzavírací značku elementu a obvykle reprezentuje data související s elementem a jeho atributy. Textem může být libovolná textová informace, libovolné množství vnořených elementů, nebo kombinace elementů a textu.
Atributy obsahují hodnoty, které jsou nějakým způsobem svázané s elementem, a jsou vždy součástí otevírací značky elementu.
<element atribut="hodnota">obsah</element>
Atributů je možné k elementu přiřadit neomezené množství. Název atributu je následován znakem = a hodnota atributu je uzavřena v jednoduchých (’) nebo dvojitých (") uvozovkách. Opačný druh uvozovek, než který byl použit k uvození atributu, může být použit v textu hodnoty atributu.
Zvláštním případem elementu je prázdný element, který nemá obsah. Takovýto element je možné ukončit přímo v otevírací značce pomocí znaku / na konci značky. Dobrým zvykem je dávat před znak lomítka mezeru. Prázdný element může mít v otevírací značce libovolné množství atributů.
<element />
11.1.2 Struktura dokumentu
Základním prvkem každého XML dokumentu je XML deklarace (prolog). Jedná se o jasnou identifi- kaci, že předložený textový dokument je XML dokumentem. Říká nám, jaká verze jazyka je použita a řeší problém s kódováním textu na různých platformách. Deklaraci je nutné uvést hned na začátku dokumentu. Tyto informace využívají zejména XML parsery. ke korektnímu zpracování dané verze a daného kódování.
<?xml version="1.0" encoding="UTF-8" ?>
87 TECHNOLOGIE XML
Pod XML deklarací se musí nacházet právě jeden kořenový element dokumentu. V obsahu tohoto kořenového elementu je poté text, ve většině případů však další zanořené elementy, je tak možné vytvořit složitou stromovou strukturu. (5)
<?xml version="1.0" encoding="UTF-8" ?> <člověk pohlaví="žena ">
<jméno>Jana </jméno> <příjmení>Nováková </příjmení> </člověk>
11.1.3 Zpracovávací instrukce
Zpracovávací instrukce se používají pro speciální komunikaci XML s aplikací, která XML zpracovává. Takovou aplikací může být například webový prohlížeč, kterému v dokumentu předáme informaci o tom, jaký má použít styl pro zobrazení dokumentu. Každá zpracovávací instrukce má cíl (target) a pseudoatributy.
<?xml-stylesheet type="text/xsl" href="transformace.xslt" ?>
V tomto příkladě je cílem xml-stylesheet a pseudoatributy type a href. Každý cíl má svou sadu pseudoatributů, zde nesou informaci o typu stylopisu a místě, kde se nachází. Konktrétně se jedná o XSL transformaci, které je věnována kapitola 11.4.
11.1.4 Správně strukturovaný XML dokument
Správně strukturovaný (well-formed) XML dokument je takový dokument, který je ve všech ohle- dech vytvořen v souladu s W3C XML standardem. Pokud dokument není správně strukturován, ne- měl by být cílovou aplikací zpracován. To umožňuje snadné strojové zpracování dokumentu, jelikož přesně víme, jakou může mít strukturu. Tato skutečnost značně zjednodušuje implementaci nástroj ů pro zpracování XML.
11.1.5 Validní XML dokument
Na XML dokument jsou kladena přísná pravidla, aby byl vůbec za XML považován. Nicméně tento základní mechanismus nijak neupravuje to, jakou sadu značek je možné použít, jak je možné struk- turovat elementy, jaké atributy můžou jednotlivé elementy obsahovat a jaké jsou kladeny poža- davky na data v těchto elementech a atributech uváděná.
WEBOVÉ TECHNOLOGIE 88
Všechny tyto informace je možné přesně definovat pomocí XML schémat, o kterých pojednává ka- pitola 11.3. XML dokument se poté porovná s pravidly, která jsou ve schématech uvedena. Tomuto procesu se říká validace, a dokument, který tímto procesem úspěšně projde, se označuje jako validní XML dokument.
11.2 XML parsery
Základní činností, kterou chceme s dokumenty ve formátu XML provádět, je jejich čtení. První věc, co bychom s dokumentem mohli udělat, je otevřít ho v programu jako textový soubor a pomocí ně- jakého vlastního mechanismu z něj data číst (například budeme proudově číst dokument, a když na- razíme na speciální znaky XML, provedeme určitou činnost). Tímto způsobem to samozřejmě pro- vést lze, práce je to ale značně kontraproduktivní, jelikož minimálně číst z XML dokumentu chce v programech každý.
Proto již existují speciální nástroje prozpracování XML, které toto umožňují. Tyto nástroje se nazývají parsery. Termínem zpracování se potom rozumí čtení, změna stávajících prvků, přidávání nových prvků a transformace dokumentu do jiných formátů.
11.2.1 DTD a kontrola struktury dokumentu
V XML dokumentu můžeme použít jakékoliv značky. Samozřejmě můžeme jejich používání omezit na předem definované značky. To se provádí pomocí DTD - Document Type Definition (Definice Typu Dokumentu). Pak můžeme kontrolovat, zda dokument vyhovuje naší definici a zda ho tedy můžeme zpracovat podle našich požadavků. Kontrola správnosti struktury dokumentu se provádí pomocí par- seru.
Samozřejmě, pokud si každý programátor na světě vytvoří svůj vlastní DTD, pak by asi výměna a zpracování XML dat neměly velký smysl. Proto existují různé skupiny a sdružení vydávající DTD, které jsou doporučeny pro užívání v dané oblasti.
89 TECHNOLOGIE XML
11.3 XML Schema
XML Schema je alternativou k DTD. Tato technologie jako „definice typů“ nemá svůj obraz v dopo-
ručeních W3C, kde se používá DTD, což je nevýhodou XML Schema.
Na druhé straně XML Schema má z hlediska technologického oproti DTD své nesporné výhody. Jed- nou z těchto výhod je „přísná syntaxe“ XML v dokumentu přímo v XML Schema. Jednoduše řečeno - XML Schema je well-formed XML dokument.
Další výhodou je extensibilita XML Schema a možnost zavádění datových prvků, které nelze v DTD zavést.
XML Schema používá několika rezervovaných názvů elementů XML pro definici typů prvků. Jako pří- klad si uveďme následující schéma. Všimněte si, že se jedná o XML dokument bez zavedení DTD, který má deklarované typy pomocí části well-formed dokumentu XML:
<?xml version="1.0"?>
<Schema xmlns="schemas-microsoft-com:xml-data">
<ElementType name="title" /> <ElementType name="author" /> <ElementType name="pages" />
<ElementType name="book" model="closed"> <element type="title" />
<element type="author" />
<element type="pages" />
<AttributeType name="copyright" />
<attribute type="copyright" /> </ElementType>
</Schema>
Všimněte si na příkladu
elementu <Schema>, zejména kde začíná a kde končí,
zavedení namespace v tomto elementu,
definičního elementu <ElementType> s atributem identifikátoru name,
WEBOVÉ TECHNOLOGIE 90
11.4
vztahu mezi podřízenými typy (kdo koho jako typ obsahuje) pomocí vnoření elementu <ele- ment> s uvedením typu, který je souhlasný s názvem name v předešlé definici <Ele- mentType>,
zavedení typů atributů a kam patří podle stejného vzoru, jako jsou zavedeny elementy.
XSLT
Jednou z velmi důležitých částí XML technologie je XSL (eXtensible Stylesheet Language), je to sty- lový prostředek, který využívá syntaxe jazyka XML. Dle konsorcia W3C se jazyk XSL skládá ze dvou částí:
XSLT–eXtensible Stylesheet Language Transformations, českým ekvivalentem metody pro trafnsformaci XML dokumentů;
XSLFO–eXtensible Stylesheet Language Formatting Objects, českým ekvivalentem metody formátování XML dokumentů.
XSLT (eXtensible Stylesheet Language Transformations) je speciální jazyk pro transformaci XML do- kumentů na jinou formu (např. HTML, PDF, PS apod). XSLT lze vyjádřit následujícím obrázkem
Obrázek 11.3. Transformace XML na uživatelský formát zdroj: (3)
Tedyktomu, abybylomožno XMLdokument transformovat, jezapotřebí kXMLdokumentu vytvořit navíc XSLT styl. Ten XSLT procesoru říká, jakým způsobem má jednotlivé značky v XML dokumentu transformovat na výstupní značky. Existují různé implementace XSLT procesorů (Saxon, Xalan, XT...), jelikož ale procházíme kurzem C#, zaměříme se na procesor dostupný v .NET Framework.
91 TECHNOLOGIE XML
11.4.1 Tvorba XSLT Stylesheets
Styly pro generování z XML dokumentů se opět píší s použitím XML. Pokud chceme použít pro zpra- cování nějaký styl, obecně se do XML dokumentu zařazuje odpovídající značka hned za deklaraci dokumentu.
Obr. 11.4: Ukázka stylu v XML dokumentu; zdroj: (3)
K jednomu XML dokumentu lze připojit i více stylů.
V prostředí .NET Framework toto můžeme ipmlementovat také, nicméně zpracování stylu funguje na principu načtení XML dokumentu, načtení XSLT stylu a následně provedení transformace.
Pojďme se ale nyní podívat, jak se v praxi vytváří takový XSLT styl. Budeme stále věrní kuchařce. Kód, který transformuje vstupní XML data na HTML kód, nyní vypadá takto:
Obr. 11.5: Ukázka XLST stylu; zdroj: (3)
Vidíme zde, že je v XSLT stylech možno používat jakékoliv značky. Ty, které jsou určeny pro zpraco- vání XSLT parserem, mají předponu xsl. Pomocí výrazů jazyka XPath si navíc jednoduše zvolíme, jaký element budeme právě potřebovat a zpracujeme jej.
Nebudu se zde rozsáhle rozepisovat o možnostech XSLT, kdo bude mít zájem o větší detaily dopo- ručuji odkazy www.w3c.org/style/XSL a stránky Jiřího Koska XSLT v příkladech. My si osvětlíme zá- klady používání XSLT.
WEBOVÉ TECHNOLOGIE 92
Základy XSLT
Jako každý XML dokument, i XSLT soubor by měl kromě deklarace obsahovat i kořenový element. V případě XSLT je kořenovým elementem xsl:stylesheet. V tomto elementu se uvádí jmenný prostor, který používá XSLT, případně verze XSLT. My u XSLT budeme používat jmenný prostor http://www.w3c.org/1999/XSL/Transform.
Šablony (templates)
Základ transformace XSL tvoří šablony (templates). Ty popisují, jak se který element má měnit. Ná- sledující ukázka šablony vybere kořenový element (tedy celý dokument). Pro výběr elementů se tedy používá atribut match a jako výraz se zadá cesta k uzlu.
Obr. 11.6: Ukázka deklarace šablony; zdroj: (3)
Do šablon je možno vkládat jiné šablony pomocí xsl:apply-templates. Pokud do tohoto příkazu jako atribut vložíme select a hodnotu elementu, který chceme zpracovat, provede se právě tento. Pokud atribut select nepoužijeme, provedou se všechny šablony, které vyhovují nalezeným elementům.
Někdy se může stát, že budeme potřebovat pro jednu šablonu více způsobů zpracování. Provádíme to pomocí tzv. módů šablony.
Obr. 11.7: Ukázka módů šablony; zdroj: (3)
XSL transformace se dá zapsat i bez většího použití šablon, podobně jako v úvodním příkladu. Pokud ale budeme chtít transformovat rozsáhlejší dokument, pravděpobně se bez šablon neobejdeme. S šablonami je navíc výsledný kód přehlednější.
93 TECHNOLOGIE XML Výběr hodnot
Příkazem pro zobrazení dat je xsl:value-of. Slouží pro získání hodnoty konkrétního elementu. V jeho atributu select se pak pomocí výrazů XPath zadá cesta k elementu. Následující příklad zjistí hodnotu atributu nazev aktuálního uzlu. Výraz atributu select lze také zapsat pouze ve tvaru @nazev.
Obr. 11.8: Ukázka výběru hodnot; zdroj: (3)
Tvorba elementů, atributů
Budeme chtít vytvořit nový element. Například chceme vytvořit odkaz na nějaké místo a jako hod- notu vzít hodnotu existujícího atributu. Dá se to provést následujícím způsobem - pomocí příkazu xsl:element vytvoříme nový element a k němu vytvoříme příkazem xsl:attribute potřebné atributy.
Kód výše vytvoří následující výstup:
Obr. 11.9: Ukázka tvorby elementů; zdroj: (3)
12.1 JavaScript a jeho použití
Nyní již máme za sebou výklad o HTML jazyku, kaskádových stylech, pozicování stránek a umíme vytvářet stránky na poměrně kvalitní úrovni. Stále však na stránkách můžeme postrádat určitou dy- namiku. Komunikace klienta s webovým serverem neumožňuje pomocí html kódu zajistitdynamické chování v klientském počítači. Nemůžeme tak kontrolovat obsahy formulářů, cookies, měnit dyna- micky text a odpovídat na určité události na straně klienta, protože o tom web server nic neví. Ře- šením této situace jsou skriptovací jazyky.
JavaScript je skriptovací jazyk na straně klienta, který je určen jako nástroj pro výše uvedené skuteč- nosti. Tato kapitola není referenční programátorskou příručkou pro JavaScript, vysvětlí vám však jeho.
K čemu vůbec potřebujeme JavaScript? Než pronikneme do konkrétních vlastností a syntaxe jazyka, řekněme si, co vlastně umí v interakci s jazykem HTML:
Dokáže reagovat na události jako klikání myší, změna polohy objektů apod.
Pomocí něj můžeme validovat data z formulářů na straně klienta.
Dokáže vytvořit dynamický text v HTML stránce.
Dokáže přizpůsobovat a měnit HTML elementy.
Umožňuje číst a zapisovat proměnné cookies, detekovat klientův prohlížeč a další užitečné vlastnosti.
Javascript je skriptovací jazyk na straně klienta, to znamená, že webový server nemá žádnou infor- maci o tom co se na klientském počítači děje. Všechny akce, které provádí skript, se dějí na klientské straně.
12.1.1 Vložení JavaScriptu do stránky
Je to v podstatě velice jednoduché. Zatím si stále vystačíme se znalostmi základů HTML.
Skripty se zapisují do HTML mezi tagy <script> a </script>. Všechno, co je mezi těmito tagy, je program psaný v jazyce JavaScript.
V příkladě níže je použit příkaz document.write(). Ten způsobuje zápis do proudu doku- mentu. Zapsaný text se ihned zobrazí v prohlížeči.
Pokud se zapisuje normální text, musí se obalit uvozovkami (na rozdíl od proměnné). Mezi uvozovkami se nesmí zalomit řádek.
97
ZÁKLADY JAZYKA JAVASCRIPT
Každý příkaz JavaScriptu se ukončuje středníkem;
12.1.2
Obr. 12.1: Ukázka umístění JavaScriptového kódu do stránky; zdroj: (3)
Možnosti zápisu JavaScriptu v HTML dokumentu
Existují 3 způsoby zápisu (vložení) JavaScriptu do HTML dokumentu:
1. Pomocí párového tagu <script> do proudu dokumentu. (viz předchozí ukázka) 2. Odkazem na externí soubor.
Obr. 12.2: Příklad odkazu na externí soubor; zdroj: (3)
Odkazy na Externí soubory JavaScriptu (mají příponu .js) se umísťují buď do hlavičky HTML doku- mentu, stejně jako např. styly CSS, nebo na konec těla HTML dokumentu, těsně před koncovou značku tagu <body>. V praxi se více upřednostňuje druhý způsob, tj. na konec těla dokumentu. Kód JavaScriptu tak bude bezpečně vykonán, až jakmile se uživateli načte (vykreslí) samotná stránka. Stránka navíc uživateli nabídne často rychlejší odezvu. V probíraných příkladech (cvičných soubo- rech) sice umisťujeme odkazy na soubory JavaScriptu do hlavičky dokumentu, ale děláme tak spíše z důvodu přehlednosti v rámci naší výuky. V praxi doporučujeme onen druhý způsob.
3. In-line zápis - "v řádku". Nevyužívá tag <script>, ale zapisuje se jako atribut jiného tagu. Většinou reaguje na nějakou událost.
Příklad:
<a href="http://www.mvso.cz" onmouseover = "alert('Na škole je myš!!!')">MVSO </a>
Příklad ukazuje klasický odkaz s textem MVSO. Důležitý je atribut (událost) onmouseover. Při přejetí myši se vykoná příkaz alert.
WEBOVÉ TECHNOLOGIE 98
Všimněte si, že v in-line zápisu je nutno používat apostrofy místo uvozovek (protože uvo-
zovky by zakončily zápis skriptu).
Onmouseover je jednou z událostí, kterých existuje asi tucet. Bez existence událostí by in- line zápis skriptu nedával smysl.
Inline zápis se již nedoporučuje používat. Nejde o to, že by nebyl podporován, ale jde o nežádoucí míchání obsahu HTML dokumentu a aplikační logiky. Význam je podobný jako v případě CSS. Kaská- dové styly se rovněž nedoporučují zapisovat do stránky, ale do externího souboru. Nedochází tak k míchání obsahu, od jeho formátování (3).
12.2 Prvky a syntaxe jazyka
V souboru JavaScriptu (.js) se zapisuje zdrojový kód přímo, bez uvození do tagu <script>. Stejně tak
si budeme představovat následující prvky jazyka.
12.2.1 Základní syntaxe
Příkazy se oddělují středníkem nebo koncem (zalomením) řádku.
první příkaz; druhý příkaz;
Záleží na velikosti písmen v proměnných i v názvech objektů.
Objekt window.Location je špatně, protože správný tvar je window.location.
Řetězce se uzavírají do uvozovek
Je možné využívat i apostrofů, které jsou i nezbytné při in-line zápisu. <img onmouseover="alert('AHOJ')" />
Escapování znaků
Pro escapování znaků se používá zpětné lomítko. <img onmouseover="alert(\"AHOJ\")" />
Logické hodnoty
99 ZÁKLADY JAZYKA JAVASCRIPT JavaScript zná speciální hodnotu pro pravdu: true a pro nepravdu: false.
Další pravidla
Objekty a jejich metody a vlastnosti se oddělují tečkami: objekt.podobjekt.vlastnost
Programové sekvence se uzavírají do složených závorek {} (zejména při větvení a deklaraci funkcí).
12.2.2 Proměnné
V programování představují proměnné „úložiště“ informace (vyhrazené místo v paměti).
Obr. 12.3. Příklad proměnné v JavaScriptu; zdroj: (3)
Názvem proměnné může být libovolné slovo (s výjimkou několika klíčových slov jazyka). Zá- leží na velikosti písmen.
V JavaScriptu je vhodné proměnné deklarovat. Na deklarování slouží klíčové slovo var ná- sledované výpisem deklarovaných proměnných.
Proměnná použitá v příkladu má název x. Do proměnné x je načtena hodnota "Obsah pro- měnné", která je dalším příkazem document.write zapsána do proudu dokumentu.
Příklad:
Obr. 12.4. Příklad proměnné v JavaScriptu; zdroj: (3)
12.2.3 Operátory
Operátory přiřazení přiřazení
přičtení, ale také připojení řetězce přinásobení, odečtení, "přidělení„
přičtení 1 odečtení 1
=
+=
*= , -=, /= ++
--
WEBOVÉ TECHNOLOGIE
100
Obr. 12.5. Příklad zápisu operátorů v JavaScriptu; zdroj: (3)
Početní operátory
+ sčítání i spojování řetězců (příklad cyklu for níže) - odčítání, unární negace
* násobení
/ dělení
Logické operátory
==
!=
<, <= , >=, > &&
||
!
?: ,
rovnost (dvě rovnítka) nerovnost
aritmetické srovnání
logické AND (a zároveň)
logické OR (nebo)
logické NOT (negace)
podmínkový výběr (ternární operátor)
logické spojení (třeba v zápisu parametrů funkcí)
Logické operátory se používají zejména při větvení programů na stanovení podmínek. Podmínky na- bývají hodnot true (pravda) a false (nepravda).
12.2.4 Větvení
Větvení nebo-li podmínkové konstrukce jsou klasickou součástí téměř všech programovacích ja- zyků. Struktura této konstrukce je ve veštině programovacích jazyků téměř shodná. V JavaScriptu má následující podobu:
Klauzule if
If (podmínka 1) { příkazy prováděné při splnění podmínky; }
101 ZÁKLADY JAZYKA JAVASCRIPT
else if (podmínka 2) { příkazy prováděné při nesplnění podmínky 1 a splnění podmínky 2; } else if (podmínka n) { příkazy prováděné při nesplnění podmínek (n-1) a splnění podmínky n; } else { příkazy prováděné při nesplnění všech n předchozích podmínek; }
Obr. 12.6: Příklad větvení v JavaScriptu; zdroj: (3)
12.2.5 Cykly
Cyklus je v programování konstrukce, která dle stanovených podmínek může opakovat provádění příslušných operací. Jednoduchý příklad může zahrnovat rozesílání spamu. Program rozesílá ne- chtěné reklamy. Rozeslání se provede tolikrát, kolik program nalezne emailových adres. A šťastní adresáti se mají nač těšit.
Cyklus WHILE
Cyklus s podmínkou na začátku. Sekvence vnitřních příkazů se provádí dokola, dokud platí pod- mínka. Jakmile podmínka neplatí, vnitřek příkazu while už se nevykoná a program bude pokračovat pod koncem sekvence while.
while (podmínka) { sekvence příkazů }
Následující příklad zvyšuje proměnnou o pět jednotek, dokud nebude větší nebo rovna třiceti:
Obr. 12.7: Cyklus while v JavaScriptu; zdroj: (3)
Cyklus FOR
Cyklus určený pro daný počet opakování.
for (počáteční hodnota; podmínka; navýšení) { příkazy} Např. tento program vypíše všechny HTML nadpisy:
WEBOVÉ TECHNOLOGIE
102
12.2.6 Funkce
Obr. 12.8: Cyklus for v JavaScriptu; zdroj: (3)
V JavaScriptu existuje podobně jako v jiných programovacích jazycích možnost definovat (deklarovat) vlastní funkce. Funkce je programový blok, který může (ale nemusí) zpracovávat vstupní n-vstupních parametrů a vrací určitou hodnotu (pomocí klíčového slova return). Výhdou funkcí je jejich znovupoužitelnost, což umožňuje eleminovat mnoho duplicitního kódu.
Deklarace funkce
function jmenoFunkce (parametr 1, parametr 2, ..., paramet rn) { příkaz; příkaz; return hodnota }
Volání funkce jmenoFunkce (hodnota, hodnota);
Obr. 12.9: Příklad funkce v rámci validace formuláře; zdroj: (3)
103 ZÁKLADY JAZYKA JAVASCRIPT
12.3 Objektové vlastnosti JavaScriptu
Již výše jsme si řekli, že JavaScript je jazyk objektový. V praxi to pro případ JavaScriptu znamená, že téměř všechno může být objektem. Např. řetězec, pole, funkce, data atd. Měli byste vědět, že objekt je tvořen:
Vlastnostmi – proměnné asociované s objektem.
Metodami – funkce, které objekt může vykonávat.
Princip objektu a jeho vlastností a metod si můžete prohlédnout i na webu W3Schools.com. Mějme tedy objekt auto:
Obr. 12.9: Objekt a jeho vlastnosti; zdroj: (3)
Vlastnosti objektu auto jsou např. jeho název, označení modelu, hmotnost a barva. Všechny auta (objekty) mají tyto vlastnosti, jenom se mění hodnoty těchto vlastností.
Metody objektu autojsou nastartování, ježdění a brždění. Všechny auta (objekty) mohou vykonávat tyto akce (metody).
Nyní se můžeme podívat, jakým způsobem lze s objekty pracovat přímo v JavaScriptu.
Vytvoření objektu:
V JavaScriptu se např. objekt řetězce vytváří pomocí klíčového slova new. Objekt uložíme do pro-měnné txt.
var txt = new String("Ahoj Hercule");
Vlastnosti:
Tento objekt má např. vlastnost length (v ní je uložena hodnota počtu znaků řetězce). Zjištění hod- noty této vlastnosti je velmi jednoduché.
txt.length // obsahuje hodnotu 12
WEBOVÉ TECHNOLOGIE 104
Metody:
Objekt řetězce má např. metodu indexOf(). Ta vrací pozici prvního výskytu hledaného podřetězce.txt.indexOf("Hercule"); // vrátí 5
12.3.1 Document Object Model (DOM)
Díky DOM může JavaScript přistupovat k libovolným HTML elementům a může je měnit. V mo- mentě, kdy je webová stránka načtena, vytvoří prohlížeč její objektový model. HTML DOM je kon- struován jako strom objektů:
Obr. 12.10: Strom HTML objektů; zdroj: (3)
HTML DOM definuje:
HTML elementy jako objekty.
Vlastnosti všech HTML elementů.
Metody pro přístup k HTML elementům.
Události pro všechny HTML elementy.
Příklad
Ukážeme si jednoduchou ukázku použití jedné z metod pro přístup k HTML elementům, a speciální vlastnosti, která umožňuje získat obsah elementu a rovněž jej měnit.
105 ZÁKLADY JAZYKA JAVASCRIPT
Metoda getElementById() je nejběžnější metoda pro přístup k HTML elementům prostřednictvím jejich id. Ano, přesně podle těch id, které jsme se naučili už využívat v rámci použití identifikátorů kaskádových stylů.
Vlastnost innerHTML lze použít jak pro získání obsahu zpřístupněného elementu, tak pro možnost jeho změny.
Obr. 12.11: Použití metody getElementById; zdroj: (3)
Ačkoli je obsah nadpisu druhé úrovně s identifikátorem header „...“, tak jej jednoduchý skript JS s využitím metod a vlastností DOM nahradí textem z elementu odstavce s identifikátorem intro.
Příklad
S objektovým přístupem a částečně i DOM jsme se již setkali v případě validace formuláře v našem zkušebním webu (formulare). Podívejme se blíže na následující řádky kódu (část zdrojového kódu HTML dokumentu kontrolovany-form.html):
Volání funkce:
Obr. 12.12: Volání funkce; zdroj: (3)
V momentě odeslání formuláře (událost onsubmit) je ještě před jeho samotným odesláním volána funkce kontrolaJmena, ktere je jako parametr předán objekt zpracovávaného formuláře (klíčové slovo this).
Funkce, která provádí validaci, tento parametr označuje jako vstup (v případě deklarace funkce, lze parametry pojmenovat libovolně).
Obr. 12.13: Příklad funkce; zdroj: (3)
WEBOVÉ TECHNOLOGIE 106
Do proměnné zadanaHodnota je načtena hodnota vložená uživatelem do políčka formuláře Jméno. Objekt formuláře (vstup) obsahuje kolekci elementů (tedy prvků formuláře). V našem případě po- třebujeme z této kolekce vybrat element, jehož atribut name má hodnotu „name“. K tomuto účelu slouží metody namedItem().
vstup.elements.namedItem("name")
Předchozí zápis je vlastně odkazem na objekt textového políčka formuláře. A nyní nám už jen stačí dotázat se tohoto objektu na jeho vlastnost value, která v sobě nese skutečný obsah textového po- líčka formuláře.
Více k této problematice a spousta dalších příkladů k využití na webu W3Schools.com5.
12.4 Knihovny JavaScriptu
Knihovny funkcí jsou připravené funkce JavaScriptu, které nám výrazně usnadňují jeho použití a při- nášejí funkcionalitu navíc. Některé knihovny jsou přímo určeny pro konkrétní účely, jako např. pro vytváření obrazových galerií. Jiné jsou navrženy pro zjednodušení navigace, obsluhy událostí atd.
12.4.1 Lightbox
Lightbox je jedna z mnoha JavaScriptových knihoven, které se používají pro prohlížení obrázků v ak- tuálním okně prohlížeče. Takové fotogalerie jsou dnes již běžnou součástí a denně se s nimi setká- váme na nejrůznějších webových portálech či stránkách. Jejich použití je velmi jednoduché a závisí pouze na stažení příslušných souborů a umístění do kontextu webových stránek.
Knihnu Lightboxu si spolu s jednoduchým návodem na její použití můžete stáhnout zde: http://loke-shdhakar.com/projects/lightbox2/
Její praktickou aplikaci a popis použití obsahuje rovněž stránka Lightbox webu formulare. Z dalších podobných knihoven, které se využívají pro obrázkové galerie, zmíníme např. FancyBox nebo Grey- Box.
5 http://www.w3schools.com/js/js_htmldom.asp
107 ZÁKLADY JAZYKA JAVASCRIPT
12.4.2 jQuery
jQuery je knihovna navržená pro jednoduchou navigaci v elementech stránky, manipulaci s nimi, obsluhu událostí a provádění vzdálených asynchronních volání. Oproti knihovnám jako je Lightbox tedy nestačí pouze stáhnout příslušný kód a vložit ho do stránky, ale je potřeba rovněž umět vytvořit s pomocí jQuery uživatelský kód, který bude plnit námi požadované akce.
Knihovna umožňuje provádět dvě základní akce:
Selekci – tj. výběr elementů webové stránky, které připadají zadanému selektoru (jako v CSS).
Modifikaci – např. přidání elementu, odstranění potomků nebo nastavení stylu CSS nad vy- branými elementy.
Příklad
Následující kód vybere všechny elementy, které patří do třídy intro, a nastaví u uvedených vlastnostíCSS nové hodnoty:
Obr. 12.14: Příklad kódu; zdroj: (3)
Knihovna jQuery je v základu součástí pouze jednoho souboru, který jsme mimojiné již použili s kni- hovnou Lightbox, která jej pro své účely využívá. Po stažení tohoto souboru16 jej vložíme pomocí tagu <script> do stránky. Vlastní skripty, které budeme s pomocí této knihovny psát, buď vhodně umístíme do jiného externího souboru nebo přímo do stránky mezi tagy <script>. Použití jQuery si můžene opět prohlédnout v akci na webu formulare.
jQuery nenahrazuje JavaScript, ale zachovává jeho funkcionalitu a rozšiřuje pole jeho možností (jedná se o nadstavbu JS). Ve zdrojovém kódu jQuery tak lze používat i klasický JavaScriptový syn- tax.
Na závěr této kapitoly si řekněme, co jQuery nabízí v porovnání s klasických JavaScriptem:
Kód využívající knihovnu jQuery pro výběr elementů a jejich modifikaci je výrazně kratší.
Kratší kód je lépe čitelný.
Psaní jQuery zrychluje vývoj.
S použitím jQuery je možné vytvářet kód kompatibilní se všemi hlavními prohlížeči.