JavaScript
- Formuláře
JavaScript umí pracovat s formuláři. Pomocí JavaScriptu je možné ověřovat vyplněná data, rozhodovat o odeslání formuláře atd.
Přístup
k formuláři prostřednictvím pořadových čísel
Každému formuláři, který se na stránce zobrazí, prohlížeč stránek automaticky přiřadí pořadové číslo. Prvnímu formuláři se přiřadí číslo 0, druhému 1 atd. K samotnému formuláři potom v JavaScriptu přistupujeme pomocí.
document.forms[pořadové_číslo_formuláře]
Každý formulář se skládá z formulářových prvků. Stejně jako formuláři, tak i formulářovým prvkům jsou přidělena pořadová čísla. Prvnímu prvku se přiřadí číslo 0, druhému1.
document.forms[pořadové_číslo_formuláře].elements[pořadové_číslo_prvku]
10. Úkolem je vytvořit stránku s formulářem,
která bude obsahovat vstupní řádek. Vedle tohoto řádku umístěte tlačítko, jehož
úkolem bude po jeho stisknutí zobrazit v dialogovém informačním okně
zadaný údaj nacházející do vstupního řádku.
Přístup
k formuláři prostřednictvím pojmenování
Odkazování prostřednictvím čísel není přehledné. Lepším způsobem je
přistupovat k formulářovým prvkům je jejich pojmenováním.
Kontrola
vložených formulářových údajů
11. Úkolem je vytvořit formulář a zkontrolovat údaje,
zda návštěvník naší stránky zadal svoji e-mailovou adresu ve správném tvaru,
tedy zda obsahuje @. Dále zkontrolovat zda zadal příjmení a jméno.
Metody pro práci s formuláři
S formuláři pracují tyto metody:
Metoda |
Popis |
document.form.reset() |
Smaže obsah formuláře; ekvivalentní s tlačítkem [reset] |
document.form.submit() |
Odešle formulář; ekvivalentní s tlačítkem [submit] |
document.form.prvek.blur() |
Deaktivace pohledu na prvek |
document.form.prvek.focus() |
Aktivace pohledu na prvek |
document.form.prvek.select() |
Vybere obsah prvku |
Checked - zaškrtávací pole
JavaScriptem lze zjistit, zda je zaškrtávací pole (checked) zaškrtnuto
následovně:
function
over(){
if
(document.zaskrt_pole.form2.checked==true)
window.alert("pole bylo
zaškrtnuto");
else
window.alert("pole nebylo
zaškrtnuto");
}
Select a option - rolovací nabídka
Rovněž rolovací menu lze ověřit a zjistit, co návštěvník vybral:
<select
name="sel"
onchange="window.alert(this.options[this.selectedIndex].value);">
<option
value="JavaScript">JavaScript</option>
<option
value="PHP">PHP</option>
<option
value="HTML">HTML</option>
<option
value="CSS">CSS</option>
</select>
Radio
A ještě jeden formulářový prvek ke kontrole:
<form
name="form6">
<label>ano</label><input
type="radio" name="a" checked>
<label>ne</label><input
type="radio" name="a">
<input
type="button" onClick="over()" value="Co jsem
zašktl?">
<script>
function over(){
if
(document.form6.a[0].checked)
window.alert("ano");
else
window.alert("ne")
}
</script>
</form>
Obrázky
Přístup
k obrázků prostřednictvím pořadových čísel a pojmenování
Je to podobné jako u formulářů. Každému
obrázku, který se na stránce zobrazí, prohlížeč přiřadí pořadové číslo prvnímu
obrázku přiřadí číslo 0, druhému 1 atd.
K obrázku potom přistupujeme
pomocí document.images[cisl_obr].
Místo pořadových čísel,
můžeme obrázky pojmenovat. Pomocí parametru name přidáním
do značky <img>. K obrázku potom
můžeme přistupovat pomocí document.name.
Záměna
obrázků
13. Úkolem
je vytvořit skript při němž dochází při ukázání kurzorem myši na obrázek k jeho
záměně za jiný.
Animace
obrázků
14. Úkolem
je vytvořit skript, který bude vytvářet dojem animace obrázků. Navíc uživateli
zpřístupněte i možnost plynulé regulace rychlosti pomocí tlačítek Zrychli a
Zpomal.