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ů
12. Ú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ů
13. Ú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.
JavaScript
- Náhoda - Random
Náhodu zajišťuje matematická metoda Math.random()
, která vrací číslo v rozsahu 0.0 až 1.0
(0.23, 0.578, 0.999). Dále jsou některá použití této funkce.
Náhodné
pozadí
14. Vytvořte skript pomocí něhož
zajistíte náhodné střídání barvy pozadí.
Náhodný
text
15.
Vytvořte skript, který vygeneruje náhodný text.
JavaScript
- Řetězce
Metoda
substring()
Tato metoda řetězec ořízne. Syntaxe: testovaný_řetězec.substring(od,do)
.
Zde je malý příklad užití této metody:
"ahoj".substring(0)
První znak řetězce má číslo 0, druhý 1 atd. Jako parametr jsme zapsali 0. Není zadáno číslo znaku do kterého se má řetězec vrátit, proto se vrátí se celý řetězec od znaku 0.
"ahoj".substring(1,3)
Nyní bude vrácen řetězec bez 1. znaku do 3. znaku ("hoj").
Metoda
split()
Vytvoří pole prvků z řetězce, který rozdělí na několik částí pomocí
rozdělovače:
retezec = "a.b.c.d.e.f.g.h.i.j";
pole = retezec.split(".");
document.write(pole.toString());
Řetězec je rozdělen na prvky (podle tečky), metoda toString() vrátí obsah celého pole, všechny prvky oddělené čárkou.
Vlastnost
length
Vlastnost length vrací délku řetězce.
Syntaxe: textový_řetězec.length.
"ahoj".length
Vrátí: 4. Na je třeba si dát pozor při vytváření skriptu, řetězec má 4 znaky, ale poslední má číslo 3.
16.
Vytvořte pole s omezeným počtem znaků viz. ukázka