Narsil č. 49

Tvorba webu 6

↑
Narsil TMW_6 – obrázek 1

V dnešním dílu budeme pokračovat objektovým programováním a ukážeme si další důležité objekty JavaScriptu.

OBJEKTOVÉ PROGRAMOVÁNÍ - pokračování

2. Objekt DOCUMENT

Objekt >document< je po objektu >window< dalším velmi důležitým objektem. Jeho obsahem je celá stránka zobrazená v okně; objekt >document< získává nové vlastnosti a jejich hodnoty ze zdrojového kódu html. Když se např. ve stránce objeví formulář, zobrazí se v objektu >dokument< nový objekt typu >form<, podobně obejví-li se ve stránce odkaz, v objektu >document< přibude nový objekt typu >link< atp.

Vše co se v dokumentu nachází tak lze ovlivňovat pomocí těchto vlastností, které odkazují na prvky (objekty) daného dokumentu. Objekt >document< obsahuje také několik polí, popisujících obsah dokumentu, např. pole odkazů (links), v němž každý objekt reprezentuje jeden hypertextový odkaz, nebo pole forms[], kde každý prvek obsahuje jeden objekt typu form pro každý formulář obsažený v dokumentu.

Na objekt >document< se odkazuje takto:

window.document

a nebo pokud se na >document< odvoláváte z aktivního okna:

document

Mnoho vlastností objektu >document< vzniká dynamicky při zobrazení www stránky, vždy jsou však určitého typu. Definicí formuláře např. vznikne objekt s názvem shodným s názvem formuláře, který bude typu >form< (a tedy typu formulář). Objekt >document< má však i další vlastnosti, které se využívají přímo, nikoliv jako odkazy na zástupce (jako třeba u formulářů nebo řetězců).

Vlastnosti objektu >document<:

- alinkColor - barva odkazu, na který bylo právě kliknuto

- all - sbírka všech objektů daného dokumentu. Jakýkoliv prvek na stránce se zde zobrazí jako objekt.

- bgColor - barva pozadí dokumentu

- fgColor - barva textu dokumentu

- linkColor - barva dosud nenavštívených odkazů

- location - obsahuje aktuální URL adresu dokumentu

- referrer - adresa URL, odkud byl aktuální dokument načten

- title - zjišťuje jméno dokumentu (z příkazu TITLE)

- vlinkColor - barva již navštívených odkazů

Základní metodou objektu >document< je:

- write() - vkládá řetězec nebo řetězce do právě zobrazovaného dokumentu.

Je to již známý příkaz document.write(text), který vypíše libovolný text, jenž může obsahovat i HTML příkazy, do www stránky.

3. Objekt FORM

Objekt >form< nám reprezentuje formulář. Objekt >form< Je součástí objektu dokumentu a je v něm uložen právě formulář. Tento objekt vzniká v okamžiku definice formuláře a je pojmenován jménem, který definuje sám uživatel. Pokud je tedy např. v html kódu vytvořen formulář

<form name="Atari">

bude zároveň vytvořen objekt typu >form<, který se bude nazývat "Atari".

Na jednotlivé prvky formuláře se odkazuje takto:

document.form.prvek

"form" zde reprezentuje jméno formuláře.

Základní vlastnosti objektu form:

- action - řetězec určený parametrem ACTION definuje URL nebo e-mailovou adresu, na kterou má být formulář odeslán

- encoding - řetězec udávající kódovací metodu určenou parametrem ENCTYPE. Většinou bývá tato hodnota "text/plain", což znamená čistý text.

- method - specifikuje technikuodeslání formuláře. Je definována parametrem METHOD a nabývá hodnot "get" nebo "post".

Základní metody objektu form:

- reset() - vyresetuje všechny prvky formuláře na jejich počáteční hodnoty. Jedná se o analogii tlačítka "typu reset", lze však provádět i přímo ze skriptu.

- submit() - potvrzení a odeslání daného formuláře.

Příklad malého zjednodušeného formuláře:

<form name="Atari" action="mailto:atari@atari.cz?subject=Formulář" method="post" enctype="text/plain" name="AtariForm" onsubmit="Odeslat(form)">

<input type="text" name="Jmeno">

<input type="text" name="Pocitac">

<input type="reset" name="Vymaz" value="Vymazat">

<input type="submit" name="Odeslat" value="Odeslat">

</form>

Tento formulář není kompletní, měl by být např. vložen do tabulky, nicméně na ukázku postačí. Pokud se na www stránce objeví takovýto formulář, bude automaticky vytvořen objekt "Atari" typu >form< a bude mít tyto vlastnosti:

action="mailto:atari@atari.cz?subject=Formulář"

method="post"

encoding="text/plain"

a dále se vytvoří vlastnosti objektu "Atari" s názvy "Jmeno", "Pocitac", "Vymaz" a "Odeslat", přičemž poslední dva již budou mít hodnoty Vymazat", resp. "Odeslat".

Na hodnoty těchto vlastností se pak budete odkazovat takto:

var formular = document.Atari;

hodnota1 = formular.Jmeno.value;

hodnota2 = formular.Pocitac.value;

hodnota3 = formular.Vymaz.value;

hodnota4 = formular.Odeslat.value;

Tyto hodnoty lze samozřejmě ve skriptu libovolně měnit.

S formuláři se dá dělat spoustu jiných věcí, zde vás však již odkáži na odbornou literaturu, kde najdete popsány různé způsoby, jak lze formulář odesílat, formátovat a vůbec s ním vyvádět všechno možné.

4. Objekt NAVIGATOR

Objekt >navigator< obsahuje několik vlastností, které popisují právě používaný webový prohlížeč. Lze tak zjistit, jaký web browser uživatel brousící po vašich stránkách využívá, nebo máte-li různé verze www stránek pro různé prohlížeče.

Obecná syntaxe je takováto:

window.navigator.vlastnost

Pro zjištění názvu a verze prohlížeče můžete použít např. tento kód:

info = "Prohlížeč: " + navigator.appname + navigator.appVersion;

Základní vlastnosti objektu navigator:

- appCodeName - kódový název prohlížeče

- appName - název prohlížeče

- appVersion - informace o verzi prohlížeče

U Exploreru (a také u CABa tuším) je kódovým názvem "Mozilla". appName je pro MSIE "Microsoft Internet Explorer", pro CABa "CAB". appVersion však v sobě nezahrnuje pouze verzi prohlížeče, ale další doplňové informace, pro MSIE na Windozech98 např. toto:

appVersion = 4.0 (compatible;MSIE 5.0;Windows 98;DigExt)

z čehož je vidět že kolikrát stačí zjišťovat jen vlastnost appVersion.

U CABa a MagiCu může odpověď vypadat např. takto:

Mozilla/3.0 (CAB 02.80; I-Con.OVL 01.70; MagiC)

A víme všechno. OS byl MagiC, prohlížeč byl CAB 2.8 a OVL pro IConnect.

5. Objekt LOCATION

Objekt >location< reprezentuje webovou adresu aktuálního dokumentu. Vlastnost "href" obsahuje kompletní URL tohoto dokumentu a ostatní vlastnosti objektu >location< popisují každou část tohoto URL.

Obecná syntaxe:

window.location

Pokud chcete zjistit URL aktuálního dokumentu, stačí přečíst přímo obsah objektu >location<, automaticky se načte hodnotou vlastnosti "href".

Tento příklad vypíše aktuální adresu do okna:

document.write(location);

Objekt >location< má však i jiné využití. Pokud mu přiřadíte novou URL adresu, automaticky dojde k nahrání nové webové stránky. Lze tak použít např. i pro (automatický) přechod na jinou stránku:

window.setTimeout("location='main.html'",5);

Toto automaticky přesměruje výstup za 5 vteřin po načtení stránky na stránku ve stejném adresáři, ale s názvem "main.html".

6. Objekt HISTORY

Objekt >history< slouží pro pohyb po navštívených stránkách. Lze tak v podstatě simulovat tlačítka "Zpět" a "Vpřed" jež se nacházejí v prohlížeči. Pro pohyb zpět slouží metoda "back", která se vrátí přesně o jeden krok. Je to tedy totéž jako jedno kliknutí na tlačíko "Zpět".

history.back();

Pro pohyb o jednu stránku dopředu je tu metoda "forward":

history.forward();

Poslední metodou, která umí provést požadovaný pohyb obousměrně o libovolný počet kroků, je metoda "go". Pokud se má provést pohyb zpět, je její parametr záporné číslo, pro pohyb vpřed je to pak číslo kladné.

history.go(-2);

provede dva kroky zpět. V dokumentu to pak může vypadat takto:

<a href="javascript:history.go(-1);">Zpět o krok</a>

Tímto se s naším seriálem loučíme nejen pro dnešek, ale již natrvalo. Nebudu začínat další nové kapitoly pouze pro jedno číslo Narsilu, kde bychom stejně všechno nestihli. Proto jak jsem zde zmínil již mnohokrát, všechny zájemce o JavaScript, kaskádové styly, ale třeba i PHP skripty a další věci které dělají web moderním, odkazuji na různé www stránky (za všechny uvedu hlavně výborné stránky "www.interval.cz") a na množství tištěné literatury, které je k dipozici dnes již skutečně široký výběr. Berte tedy články o tvorbě webu, které se objevily v Narsilu, jako základ, na kterém můžete stavět dále a také jako příklad, že tvorba webových stránek není zase až tak náročnou disciplínou, i když se v moderním pojetí ohromně rozrostly jak možnosti webu, tak i různé příkazy, jazyky a skripty, které je třeba umět alespoň zčásti ovládat.

Mnoho funkčních www stránek přeje a loučí se

Neznámý vojín