Výuka skriptovacího jazyka JavaScript

Co potřebuje ke tvorbě JS
První skript
Problém-uvozovky
Proměnné
Alert
Prompt
Operátory
Podmíněné příkazy
Switch
Cykly
While a do while
Continue a break
Jeden skript na více stránkách


Objekty v JavaScriptu
Hierarchie objektů
Využívání objektů
Hrátky s datumem
Počeštění datumu
Události v JS
Událost onMouseOver
Událost onMouseOut
Událost onClick
Událost onFocus
Událost onBlur
Událost onChange
Událost onSelect
Událost onLoad
Událost onUnLoad
Událost onError
Událost onAbort
Událost onReset
Událost onSubmit
Událost onKeyPress
Událost onDblClick
Nenápadný odkaz
Vpřed a Zpět


Co jsou to pole
Zjištění a změna velikosti pole
Jednoduchý kalendář a zabezpečení
Funkce
Funkce s parametrem
Grafika v JavaScriptu
Okna v Javascriptu
Přehled vlastností objektu window
Formuláře v JavaScriptu
Kniha hostů v JavaScriptu


Matematika v JavaScriptu



Objekty v JavaScriptu


Co je to objekt v JavaScriptu? Je to vlastně blok dat, která spolu logicky souvisí. Každý objekt je popsán několika proměnnými, těmto proměnným se říká vlastnosti. Kromě vlastností má každý objekt ješte několik funkcí, které mu umožňují provádění různých činností. Těmto funkcím v objektech se říká metody. Pro lepší názornost si představte, že link je vlastnost objektu document, takže pokud chceme nastavit barvu odkazu pomocí JS stačí napsat:
document.link="red"
S jednou metodou objektu document jsme se již setkali aniž bysme o tom věděli, jedná se o metodu write(). Syntaxe tedy je:
jmenoobjektu.jmenovlastnosti
nebo
jmenoobjektu.metoda()

Vnitřní objekty v JS
V jazyce JS je mnoho předem definovaných objektů, které můžete využít ve svých skriptech, většina má svoji obdobu i v jazyce HTML, takže následující tabulka zachycuje i podobu s HTML.

Tabulka vnitřních objektů
Objekt V jazyce HTML Vysvětlení
anchor <a name> </a> Vytvoří kotvu v dokumentu, sem může být směřován odkaz na určitou část.
applet <applet> </applet> Java applet; jednoduchý program v jazyce Java.
area <map> <area> </map> Oblast na klikací mapě.
Array - Pole proměnných; viz dále.
button <input type="button"> Vytvoří tlačítko v HTML dokumentu.
checkbox <input type="CheckBox"> Vytvoří zaškrtávací políčko v HTML dokumentu.
Date - Objekt pro práci s textem; viz dále.
document <body> </body> Tělo HTML, vše co vidíte na obrazovce je zde.
form <form> </form> Formulář v HTML dokumentu.
frame <frame> </frame> Pomocí tohoto objektu můžete vytvářet rámy.
history - Obsahuje seznam všech stránek, které uživatel zatím navštívil.
image <img> Umožňuje vkládání obrázků.
link <a href> </a> Hypertextový odkaz v HTML.
location - V tomto objektu jsou uloženy informace o aktuální HTML adrese.
Math - Objekt umožňující používání mnoha matematických funkcí.
navigator - V tomto objektu jsou informace o prohlížeči.
password <input type="password"> Vstupní textové pole pro zadávání hesla.
radio <input type="radio"> Přepínací tlačítko v HTML.
reset <input type="reset"> Objekt sloužící k vymazání formuláře.
select <select> <option> </select: Pomocí indexového pole pomáhá přistupovat k položkám seznamů a nabídek.
String - Dovoluje pracovat a upravovat řetězce.
submit <input type="submit"> Slouží k odeslání formuláře.
text <input type="text"> Vytvoří jednořádkové vstupní pole.
textarea <textarea"> </tetxarea> Víceřádkové vstupní pole.
window - Objekt představující okno webového prohlížeče

Hierarchie objektů
Objekty v JS jsou uspořádány do následující struktury:

Využívání objektů
Používáte-li objekty, vlastnosti či metody je nutné brát ohledy na jejich postavení v hierarchii. Pokud chcete použít nějaký objekt, musíte napsat i všechny objekty jemu nadřazené. Viz příklad:
window.document.form.select.selectedIndex
Pokud tento příkaz umístíte do skriptu, vykoná se násludující: v dokumentu se vyhledá formulář jménem form nabídka jménem select a v ní pořadí vybraného pole nabídky. Zdá se vám to dlouhé, mě také, takže tu mám pro vás malou radu:objekt window nemusíte psát, protože JS ho automaticky doplní. Ovšem nyní zanechme teorie a aby naše povídaní o objektech bylo zajímavější ukážeme si příklad:

Dokument jako na dlani
U objektu dokument si zjistíme několik zajímavých informací:
<u>
<script language="JavaScript">
document.write§
("Pozadí tohoto dokumentu má barvu: "+document.bgColor+"<br>")
document.write§
("Text na této stránce má barvu: "+document.fgColor+"<br>")
document.write§
("Barva odkazu na této stránce je: "+document.linkColor+"<br>")
document.write§
("Barva navštíveného odkazu je: "+document.vlinkColor+"<br>")
document.write§
("Barva aktivního odkazu je: "+document.alinkColor+"<br>")
document.write§
("Adresa této stránky je: "+document.location+"<br>")
document.write§
("Tato stránka byla naposledy upravena: "+document.lastModified+"<br>")
document.write§
("Před touto stránkou bylo navštíveno: "+history.length+" stránek")
</script>
</u> Nezapomeňte, že znak § znamená, že máte pokračovat v jednom řádku. Výsledek by byl podobný následujícímu:


Hrátky s časem
Velice oblíbené jsou v JavaScriptu hrátky s časem. Vypsání prostého datumu je velmi primitivní, stačí napsat jednoduchý skript.
<script language="JavaScript">
document.write("Dnešní datum a čas je: "+Date())
</script>

Efekt by měl vypadat podobně:

Přesto má tento skript několik podstatných vad, za prvé je anglicky a za druhé vždy nechceme zobrazit celý údaj, proto má objekt Date někoilk metod uvedených v tabulce:
Metoda Použití
getDate() den v měsíci
getDay() den v týdnu
getHours() hodiny
getMinutes() minuty
getMonth() měsíc
getSecond() sekundy
getTime() počet milisekund, které uběhly od roku 1970
getYear() rok

Některé z těchto metod se chovají poněkud divočeji a proto následuje podrobnější popis:
getDate()-tato metoda se chová tak jak se od ní očekává, to znamená, že vrací den v měsíci. První den v měsíci je tedy 1..
getDay()-tato metoda se chvá ze všech nejdivočeji, místo textu vrací číslo a to ještě neděle=0, pondělí=1 atd.
getHours()-tato metoda vrací hodiny ve 24hodinovém formátu
getMinutes()-tato metoda vrací podle názvu minuty v rozpětí 0-59
getMonth()-tato metoda vrací číselný měsíc a zase leden=0, únor=1 atd.
getSecond()-vrací jak se očekává vteřiny 0-59
getTime()-tato metoda se zdá být k ničemu, ovšem její význam zjistíte u cookies
getYear()-vrací rok
Ještě k objektu Date: není obsažen ani v dokumentu ani v okně, takže je nutné ho nejprve vytvořit:
Datum= new Date
document.write(Datum.getDate())

A nešli by ty divokosti nějak odstranit?
Samosebou pomocí nám dobře známého příkazu switch. Nyní si ukážeme jak si udělat pěkné a hlavně české hodiny.
<script language="JavaScript">
var datum= new Date //nejprve si vytvoříme objekt Date
var den=datum.getDay()
var hodina=datum.getHours()
var minuta=datum.getMinutes()
switch (den) {
case 0 : den="Neděle"
break;
case 1 : den="Pondělí"
break;
case 2 : den="Úterý"
break;
case 3 : den="Středa"
break;
case 4 : den="Čtvrtek"
break;
case 5 : den="Pátek"
break;
case 6 : den="Sobota"
break;
} //nyní jsme si zadali české názvy dní
alert("Dnes je "+den+" ,hodina "+hodina+" a minuta "+minuta+ ".")
</script>
Komu by tento skript ze záhadných příčin nefungoval, může si ho stáhnout zde. Vidíte, ani to nebolelo a už umíte vyrobit pěkné datum pro vaše internetové stránky, a to jsme teprve na začátku.

Události v JavaScriptu
Co je pro JS událost? Například kliknutí myši nebo nájezd myši na určité aktivní místo či úplně obyčejný stisk klávesy. Nyní si ukážeme úplné nejjednodušší událost a to nájezd myši na odkaz.
<p> Pokud najedete myší na <a href="www.odkaz.cz"§ onMouseOver="status='Najeli jste myší na tento odkaz';return true">§
tento odkaz</a>, ukáže se vám ve stavovém řádku text.</p>

Zkuste to a uvidíte výsledek. Nyní vám yvsvětlím smysl tajemného příkazu return true. Kdyby nebylo return true text by se zobrazil přesně opačně, to znamená ve chvíli, kdy kursor není na odkaze a ve chvíli kdy je by se zobrazila pouhá URL adresa.

Aktivní odkazy
Jak jste jistě již pochopili, událost onMouseOver se aktivuje v případě je-li kursor nad určitým objektem. Nyní toho využijeme k tvorbě odkazů, které budou měnit barvu při nájezdu myši.

<p> <a href="www.tento.cz"§ onMouseOver="document.linkColor='aqua';return true"> Tento odkaz</a> změní barvu na akvamarínovou pokud na něj najedete myší.</p>

Všechno si pěkně vyzkoušejte a uvidíte jak se vám to bude líbit. Nyní si zkuste na odkaz kliknout a poté na něj najet znovu, a ouha objevíte chybu našeho skriptu, navštívené odkazy nezobrazuje, tomu se dá zábránit použitím definice barvy odkazu typu vlink ve skriptu, viz nový zdrojový kód.

<p> <a href="www.tento.cz"§ onMouseOver="document.linkColor='aqua';return true§
" onMouseOver="document.vlinkColor='lime';return true"> §
Tento odkaz</a> změní barvu na akvamarínovou pokud na něj najedete myší, navštívený odkaz změní barvu na zelenou.</p>

Chcete-li můžete použít i vlastnost alinkColor. Zdá se vám nepraktické psát takvýto dlouhý text do jednoho řádku, mně také a proto si později ukážeme jak text podstatně zkrátit pomocí funkcí.

Událost onMouseOut
Pokud si vyzkoušíte předchozí skripty, zjistíte, že barva odkazu po nájezdu myši na odkaz se zázračně mění, ale jakmile odendáte kursor, barva odkazu zůstane stejná jakoby tam kursor byl. Na pomoc si zavoláme událost onMouseOut, která změní barvu odkazu po odjezdu myši.

<p> <a href="www.tento.cz"§ onMouseOver="document.linkColor='aqua';return true"§
onMouseOut="document.linkColor='lime';return true">§
Tento odkaz</a> změní barvu na akvamarínovou pokud na něj najedete myší, po odjezdu myši změní barvu na světle zelenou.</p>

Událost onClick
Přestaneme si hrát s odkazy a začneme si hrát s formuláři. Vytvoříme si formulář a vstupní textové pole. Poté si vytvoříme tlačítko, po jehož stisknutí se nám vypíše v okně text, který jsme zadali.

<form name="formular">
<input type="text" name="text1" value="Zadejte text"><br>
<input type="button" value="Vypiš" onClick="alert§
('Do textového pole jste zadali text: '+document.formular.text1.value)">
</form>
Výsledek bude podobný následujícímu:


Možná bych vám měl tento zdrojový osvětlit podrobněji. Nejprve vytvořím formulář nazývající se formular, poté textové pole jménem text1 a pokud spustíte stránku uvodíte v něm napsáno "Zadejte text". Dále vytvořím tlačítko na němž je napsáno "Vypiš" a s pomocí udílosti onClick určím, že pokud uživatel klikne vypíše se obsah(value) textového pole text1 v formuláři formular.

Událost onFocus
Co to vůbec je fokus: fokus nebo česky zaměření znamená, že objekt je aktivní(ve Windows má kolem sebe čáru). Událost onFocus se aktivuje, když objekt zaměření získá.

<form>
<input type="text" onFocus="alert('Toto textové pole získalo zaměření.')">
</form>
 A v praxi to vypadá takto:


Událost onBlur
Narozdíl od události onFocus je událost onBlur volána, když objekt zaměření ztrácí. Vyhovující příklad si jistě vytvoříte sami.

Událost onChange
Jak asi tušíte z názvu událost onChange je volána, když pole ztrácí zaměření a obsah textového pole se změnil. Ovšem narozdíl od události onBlur se událost nezavolá, pokud pouze zaměříme objekt a poté zaměření zrušíme.

<form>
<input type="button" value="Neměňte obsah pole"§
onChange="alert('Copak neumíte číst, obsah pole neměl být změněn')">
</form>
 Viz ukázka:


Událost onSelect
Událost onSelect je volána, když je vybrán text ve vstupním textovém poli. Používá se velmi zřídka a já sám jsem ji nepoužil snad nikdy, to jen tak pro informaci.

Událost onLoad

Naopak událost onLoad patří k nejpoužívanějším, je volána při každém načtení a pozor i aktualizaci stránky.

<head>
<script language="JavaScript">
var jmeno=prompt("Jaké je tvoje jméno?","Jakub")
</script>
</head>
<body onLoad="alert('Vítej: '+jmeno)">
</body>
A opět, jak to má vypadat:


Událost onUnLoad
Událost onUnLoad je pravým opakem předchozí a je volána při každém opuštění stránky i při aktualizování stránky, používá se k rozloučení nebo ukončení skriptů. Příklad nemusím vymýšlet u předchozího stačí nahradit událost a slovíčko Vítej slovem Sbohem.

Událost onError
Událost onError je volána, když se na stránce něco nepovede. To znamená nemůže se načíst obrázek, protože neexistuje. Zdrojový kód by byl následující:
<img src="neexistuju.jpg" onError="alert('Stala se chyba,§
obrázek neexistuje')">
Pokud program nenajde určený obrázek, vypíše chybový text.

Událost onAbort
Zvláštní událost onAbort je volána, když uživatel stiskne tlačítko STOP ve svém internetovém prohlížeči, je podobná události onError takže příklad si jistě vymyslíte sami.

Událost onReset
Událost se vztahuje k formulářům, konkrétně k tlačítku typu RESET, její použití úzce souvisí s událostí onSubmit.

Událost onSubmit
Tato událost se vztahuje k formulářům, specielně tlačítku SUBMIT. Viz příklad:
<BODY>
Prosím stiskněte jedno z tlačítek:
<FORM onSubmit="alert('Budu odeslán')"§
onReset="alert('Budu smazán')">
<input type="submit" value="Odeslat">
<input type="reset" value="Smazat">
</FORM>
</BODY>

Výsledek:


Událost onKeyPress
Událost onKeyPress je volána vždy, když uživatel ss¨tiskne a opět uvolní klávesu, může mít ještě dvě podudálosti: onKeyDown a onKeyUp. onKeyDown se aktivuje, když uživatel klávesu stiskne a onKeyUp, když ji opět uvolní. Viz příklad:
<Form>
<input type="text" onKeyDown="status='Zmáčkl jste klávesu'"§
onKeyUp="status='Uf, pustil jste mne'">
</Form>

Událost onDblClick
Poslední událostí v JavaScriptu je onDblClick, její využití je dosti sporadické a je volána, jakmile je na objekt poklepáno rovnou 2x.

Nenápadný odkaz
Abysme vytvořili maskovaný odkaz splívající s textem budeme potřebovat tag <SPAN>. Pomocí tagu span totiž můžeme přiřazovat i obyčejnému textu neobyčejné vlastnosti, nyní si vytvoříme nepoznatelný odkaz.
I když tu není nic vidět je§
<span onClick="location.href='www.sweb.cz/javascript'"> tu </span> schován odkaz na moje stránky.
Vyzkoušejte si to a na první pohled si budete myslet, vždyť je to úplně obyčejný text. Ale pokud se odvážíte kliknout na slovo tu budete odkázáni na moje stránky jako by to byl obyčejný hypertextový odkaz. Já osobně si myslím, že je velice efektivní používat nenápadný odkaz spíše než heslo, protože když o něm člověk neví, nemůže to zjistit jinak než podíváním se do zdrojového kódu.

Cesta tam a zase zpátky
Nyní zúžitkujeme svoje znalosti událostí při tvorbě velice efektních tlačítek VPŘED a ZPÁTKY. Budeme potřebovat objekt history a jeho metodu go().
<form>
<input type="button" value="Zpět" onClick="history.go(-1)">
<input type="button" value="Vpřed" onClick="history.go(1)">
</form>
 Tento velice používaný skript vytvoří dvě tlačítka s popisky Vpřed a Zpět, kliknutí na ně bude odpovídat kliknutí na stejná tlačítka v liště prohlížeče. Je to velice užitečný skript, a vyšperkovat ho mužeme tím, že místo obyčejných tlačítek tam vložíme obrázek.
<img src="obr1.jpg" border="0" onClick="history.go(-1)">
<img src="obr2.jpg" border="0" onClick="history.go(1)">


Nyní, když už umíte používat všechny události v JS doporučoval bych vám, všechny si je pořádně zopakovat. Jsou totiž spolu s objekty základními kameny JavaScriptu. Teď nás totiž čeká něco trochu složitějšího a to jsou: pole a funkce

Dále