Dnes pokračujeme s objekty frame, document, image, link a form.
V pátém dílu jsme začali s objekty a vysvětlili si základní pojmy,v šestém dílu jsme si řekli něco víc o vlastnostech a metodách objektů, vestavěných objektech a hlavním objektu window. Dnes pokračujeme s objekty frame, document, image, link a form.
Objekt frame
Objekt frames náleží do nejvyššího objektu window. Pokud stránka obsahuje rámy pak hlavní objekt window obsahuje pole nazvané frames s vlastním objektem window pro každý objekt tohoto pole.
Tyto rámy můžou obsahovat další rámy. Z rámu se můžeme odkázat na vytvářecí (rodičovské - frameset) okno pomocí zápisu window.parent nebo pouze parent. U více zanořených rámů se dá použít zápis window.parent.parent. Zápisem window.top se odkážeme na nejvyšší okno z kteréhokoliv rámu.
Tyto vlastnosti umožňují pracovat s daty nebo spouštět funkce v rámu z jiného rámu.
Část ohledně rámů je o něco složitější na pochopení a proto jí bude věnována pozornost v samostatná část 3 - Práce s okny a rámy.
Objekt document (objekty HTML)
Objekt document je jeden z nejpoužívanějších. Obsahuje několik vlastností, pomocí kterých můžeme zjistit různé informace o stránce. Zde jsou:
- bgColor - barva pozadí stránky.
- fgColor - barva písma.
- linkColor - barva odkazu.
- vlinkColor - barva navštíveného odkazu.
- location - vrací URL aktivní stránky.
- reffer - vrací stránku, ze které uživatel přišel.
- Title - obsahuje titulek stránky, který je mezi HTML tagy
<TITLE> a </TITLE>.
- anchors - vrací počet ukotvení na stránce.
- lastModified - vrací datum a čas poslední úpravy HTML souboru.
- images - vrací seznam obrázků na stránce.
- forms - vrací seznam formulářů na stránce.
- links - vrací seznam odkazů na stránce.
- Cookie - vrací textový soubor s uživatelskými cookies.
Vlastnosti nejčastěji odpovídají hodnotám atributů v HTML tagu. Napříkad bgColor odpovídá hodnotě BGCOLOR= uvedené v tagu <BODY>. Na dalších objekektech jako obrázky a odkazy je to taky názorně vidět.
Nezapomeňte, že vlastnosti images, forms a links jsou vráceny jako seznam. Tento seznam je vlastně pole, vždy jedno pole pro každý element na stránce (obrázek, formulář a odkaz)!!! Pokud tedy chceme pracovat například s obrázkem:
var abc = document.images[3];
Tento zápis nám zpřístupní obrázek v čtvrtém <IMG> tagu na stránce (čísluje se od nuly). Pracovat s číselnými indexi je nevýhodné. JavaScript naštěstí umožňuje použít jméno obrázku jako index pole, namísto čísla.
var abc = document.images["jmeno_obr"];
Tento zápis vrátí obrázek jehož atribut NAME v tagu <IMG> obsahuje "jmeno_obr".
Poznámka: Netscape ve verzi 3 obsahuje chybu. Pokud je obrázek umístěn uvnitř tabulky vrátí se stejný obrázek několikrát, tím pádem nemůžeme přesně identifikovat hodnoty obrázku.
Někdy se dá použít ještě zkrácenější zápis než jsme si zatím uvedli. Pokud je prvek na stránce unikátní tzn., dané jméno prvku se smí na stránce vyskytnout pouze jednou. Můžeme použít zápis:
var abc = document.jmeno_obr;
Objekt Image
Informace o obrázcích jsou uloženy v objektu Image, tyto informace obsahují URL obrázku, jeho stav načtení a informace o výšce či šířce. Pomocí pole images můžeme přistupovat ke všem vlastnostem objektu Image. Ve většině případů pracujeme s obrázky, které jsou v images poli, ale někdy potřebujeme pracovat i s obrázky, které ještě na stránce nejsou.
Například chceme-li vytvořit efekt pro změnu obrázku po najetí kurzorem myši, je dobré načíst si předem obrázek pro změnu. Aby se nemohlo stát, že budeme s myší nad obrázkem čekat a čekat, než se změní. Proto vytvoříme nový objekt Image a do vlastnosti .src tohoto nového objektu zadáme cestu k obrázku:
var mujObr = new Image();
mujObr.src = "obr/obrazek2.gif";
S načtením stránky je i náš dosud neviditelný obrázek uložen ve vyrovnávací paměti prohlížeče (pokud ji nemáme vypnutou). Pokud teď kurzor myši najede nad obrázek, načte se nový obrázek okamžitě.
Poznámka: Příklad se změnou obrázku jsme si uvedli už v třetím dílu, ovšem bez přednačtení obrázku pro změnu.
V následujícím příkladu jsou uvedeny oba dva zmiňované případy. V prvním se obrázek nezačne načítat dokud se nad něj nepřesune kurzor myši a ve druhém je obrázek přednačten.
Poznámka, příklad nechodí s Internet Explorer 3.0 nebo nižším.
<html>
<head>
<title>Změna obrázku</title>
<script type="text/javascript">
<!--
// Přednačteme si obrázek `bigred.gif`.
var mujObr = new Image();
mujObr.src = "graphics/bigred.gif";
// Funkce na změnu obrázku.
function zmenObr(jmeno, URL) {
document.images[jmeno].src = URL;
return true;
}
-->
</script>
</head>
<body bgcolor="#ffffff">
<font face="Arial,Helvetica" size=2>
<b>Ukázka vysvětluje, jak přednačíst obrázek pro odstranění pauzy u efektu
se změnou obrázku:</b>
<p>
<!-- Zde začíná efekt změny obrázků. -->
<a href="#"
onMouseOver="zmenObr(`obrazek1`, `graphics/biggreen.gif`)"
onMouseOut="zmenObr(`obrazek1`, `graphics/bigblue.gif`)"
onClick="return false;">
<img name="obrazek1" align="right" src="graphics/bigblue.gif" hspace="20">
</a>
<em>Bez přednačtení.</em>
<p>
Při přesunu kurzoru myši nad obrázek se začne načítat obrázek pro změnu.
<p>
<a href="#"
onMouseOver="zmenObr(`obrazek2`, `graphics/bigred.gif`)"
onMouseOut="zmenObr(`obrazek2`, `graphics/bigblue.gif`)"
onClick="return false;">
<img name="obrazek2" align="right" src="graphics/bigblue.gif" hspace="20">
</a>
<em>S přednačtením.</em>
<p>
V tomto případě pokud nastavíte kurzor myši nad obrázek, bude změněň velmi rychle.
<em>(Pokud byl již načten.)</em>
<p>
</font>
</body>
</html>
Objekt Link
Objekt Link nebude s největší pravděpodobností používat moc často. Nejzajímavější budou asi vlastnosti href, která vrací URL stránky.
document.links[0].href
Poznámka: Jestliže stránka obsahuje obrázkové mapy (imagemap), objekt Link je vytvořen pro každý tag.
Objekt Form
Form objekt není až tak zajímavý sám o sobě, ale obsahuje další objekty, které zpřístupňují ostatní prvky formuláře. Jsou zde objekty pro vstupní pole text, password, textarea, skrytá pole (hidden fields), zatržítka radiobutton a checkbox, roletky a tlačítka reset a submit.
Každý prvek formuláře má svůj vlastní objekt se svými vlastnosmi. Všechny podporují vlastnost value. Vlastnost vrací jakékoliv údaje zadané uživatelem, například textový vstup nebo hodnotu přidělenou pomocí atributu VALUE v ktomu opovídajícímu HTML tagu (např.: <input type="hidden" value="www.moje.cz">).
Pro přístup k jednotlivým elementům formuláře, musíme napřed zpřístupnit objekt form. Podle příkladů uvedených již dříve, můžeme tak učinit z objektu document jedním z těchto způsobů:
document.forms[0] // první formulář na stránce.
document.forms["email"] // formulář s NAME="email" v tagu <FORM>.
document.email // formulář s NAME="email" v tagu <FORM>.
Podobně můžeme přistupovat i k vstupním objektům použitím pole elements nebo přímo pomocí hodnoty atributu NAME="..." v <INPUT> tagu:
document.forms[0].elements[3]
// Třetí vstupní prvek v prvním formuláři na stránce.
document.forms["objednavka"].elements["adresa"]
// prvek pojmenovaný "adresa" ve formuláři "objednavka".
document.objednavka.adresa
// prvek pojmenovaný "adresa" ve formuláři "objednavka".
Nejčastější použití je pro kontrolu údajů ve formuláři, před odesláním dat na server. Jednoduchý příklad demonstruje přístup k hodnotám ve formuláři a vygenerování chybového hlášení, pokud je nějaké pole formuláře nevyplněno.
<html>
<head>
<title>Kontrola formuláře</title>
<script type="text/javascript">
<!--
// Funkce pro kontrolu polí formuláře. Vrátí false pokud je pole prázdné.
function kontrFormular() {
if (document.mujFormular.uzivCislo.value == "") {
document.mujFormular.uzivCislo.focus();
alert("Prosím zadejte vaše uživatelské číslo.");
return false;
}
if (document.mujFormular.email.value == "") {
document.mujFormular.email.focus();
alert("Prosím zadejte emailovou adresu.");
return false;
}
if (document.mujFormular.tel.value == "") {
document.mujFormular.tel.focus();
alert("Prosím zadejte telefonní číslo.");
return false;
}
return true;
}
//-->
</script>
</head>
<body bgcolor="#ffffff">
<font face="Arial,Helvetica,sans-serif" size="2">
<b>Příklad demonstruje přístup k hodnotám ve formuláři, pokud
je nějaké pole formuláře nevyplněno, zobrazí se chybové hlášení.<br> <br>
Formulář nelze odeslat pokud nejsou všechna pole vyplněna.</b>
<p>
Prosím, vyplňte všechna pole:
<p>
<form name="mujFormular" onSubmit="return kontrFormular()"
action="dekuji.html" method="get">
<table border=0 cellpadding=2 cellspacing=0>
<tr>
<td><font face="Arial,Helvetica" size=3>Uživatelské číslo:</font></td>
<td><input name="uzivCislo" type="input" value="" size=30></td>
</tr>
<tr>
<td><font face="Arial,Helvetica" size=3>Emailová adresa:</font></td>
<td><input name="email" type="input" value="" size=30></td>
</tr>
<tr>
<td><font face="Arial,Helvetica" size=3>Telefon:</font></td>
<td><input name="tel" type="input" value="" size=10></td>
</tr>
</tr>
<tr>
<td align=center colspan=2><input type="submit" value="Odeslat">
<input type="reset" value="Vynulovat"></td>
</tr>
</table>
</form>
</font>
</body>
</html>
Pár poznámek k kódu:
- Tag FORM používá událost onSubmit k volání funkce kontrFormular() při stisku tlačítka Odeslat.
- Kdykoli funkce kontrFormular() najde prázdné vstupní pole, zobrazí se chybové hlášení a metoda focus() nastaví kurzor na toto prázné pole.
- Rovněž, když je vstupní pole prázdné, funkce vrátí false. To zamezí vykonání akce a odeslání dat formuláře.
Více se budeme prvky formuláře zabývat v Části 4 - Formuláře detailně.
Příště dokončíme objekty. Řekneme si něco krátce o objektech Date a Math a začneme novou část, "Práce s okny a rámy".
