JavaScript - tutorial


Autorem tohoto výkladu je J.Šamánek (j.samanek@volny.cz, www.jsr.kgb.cz)

JavaScript je jednoduchý programovací jazyk, který lze zapisovat přímo do HTML stránek. Používá se k "oživení" stránek, což znamená, že stránky obsahují části, které reagují na to, co provede uživatel.

Jak začlenit JavaScript do stránky

Je to velmi jednoduché - stačí napsat:
<SCRIPT LANGUAGE="JavaScript"> - začátek JavaScriptu
<!-- - slouží pro zamaskování scriptu před prohlížeči, které nepodporují JavaScript (jinak je to na nic - není nutné)
//--> - slouží pro zamaskování scriptu před prohlížeči, které nepodporují JavaScript (jinak je to na nic - není nutné)
</SCRIPT> - konec JavaScriptu
Mezi tyto tagy pak píšeme všechny příkazy. Chceme-li psát komentáře (dodatky k programu, prohlížeč si jich při překladu programu nevšímá), pak napíšeme dvě lomítka "//" a za ně už cokoliv (pouze pro 1 řádek).

Proměnné

Proměnné jsou zástupci dat, kterým se přiřazují data dle potřeby. Proměnné se mužou (ale nemusí) na začátku deklarovat (zavést) pomocí příkazu "var" a je jim možné přiřadit počáteční hodnotu. Název proměnné se musí skládat z písmen, čísel nebo spodního podtržítka ("_"), ale nesmí začínat číslem. U proměnných jsou rozlišována malá a velká písmena ("text" není totéž co "Text" nebo "teXT" atd.).
Proměnné mohou být buď číselné (var cislo=5;) nebo textové (var text="ahoj";) nebo logické - ty nabývají hodnot "true" nebo "false" (var prepinac=true;).
Pro objasnění uvedeme příklad:

<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var text="ahoj";
var cislo=5;
var prepinac=true;
if (prepinac==true) document.write(text);
else document.write(cislo)
</SCRIPT>
</BODY>
</HTML>
 Výsledkem tohoto "programu" bude napsání slova "ahoj". Příkaz "document.write()" znamená "napiš" a do závorek se uvádí, co se má napsat. (Stejného výsledku bychom docílili i takto: document.write("ahoj"); .)
Kdybychom do proměnné přepínač dali hodnotu false, bylo by výsledkem "programu" napsání čísla "5". Je zde totiž použit podmíněný příkaz "if () else", který na základě splnění/nesplnění podmínky v závorce vykoná buď první část nebo část za slovem "else".
Přesná syntax je takto:
if (podmínka){
příkazy, které se provedou při splnění podmínky }
else {
příkazy, které se provedou při nesplnění podmínky }.
Pozn.: složené závorky se uvádějí, aby počítač poznal, které příkazy se mají provést.
Tzn. že v tomto případě zjistí, jestli se proměnná přepínač rovná "true", a protože ano, provede první příkaz.
V tomto příkladě je také vidět jedna věc: znak "=" znamená přiřazovací příkaz, kterým se zadává hodnota proměnné, kdežto "==" (2 rovnítka za sebou) znamená opravdu "rovná se".
Pozn.: V tomto příkladě jsem pro úplnost uváděl celou HTML strukturu, dále už budu uvádět jen script.

Matematické operátory

Zde uvádím přehled (ne vše, hlavně specialitky :-) matematických a logických operátorů a jejich zápis v JavaScriptu.
"=" znamená přiřaď
"==" znamená rovná se
"++" znamená přičti jedna (x++ je totéž co x=x+1)
"--" znamená odečti jedna (x-- je totéž co x=x-1)
"+=" znamená přičti... (např. x+=5 znamená: k x přičti 5 a je to totéž jako x=x+5); stejné i pro ostatní operátory (x-=; x*=; x/=)
"&&" znamená "a zároveň" (konjunkce-logický operátor)
"||" znamená "nebo" (disjunkce-logický operátor)
"<" znamená "je menší"
">" znamená "je větší"
"<=" znamená "je menší nebo rovno" (stejně ">=" znamená "je větší nebo rovno")

Cykly

Cykly slouží k opakovanému použití příkazů, případně s jinými vstupními hodnotami proměnných. Existuje několik typů cyklů:

Cyklus for:
Syntax:
for (zavedení opakované proměnné; podmínka, do kdy opakovat; mat. operace, která se má provést při každém novém opakování) {
příkazy }

Příklad - vypočtení faktoriálu ze zadaného čísla:
var cislo=5;
var faktorial=1;
for (var i=cislo;i>=1;i--) {
faktorial*=i;}

Cyklus while:
Syntax:
while (podmínka) {
příkazy}

Příkazy se provádějí, dokud platí podmínka, musíme tedy měnit hodnotu proměnné uvnitř příkazů (těla), aby nedošlo k tomu, že podmínka platí pořád, což by znamenalo nekonečnou smyčku a zatuhnutí počítače!!!
Příklad - faktoriál:
var cislo=5;
var faktorial=1;
while (cislo>0) {
faktorial*=cislo;
cislo--; }

Funkce

Pokud potřebujeme použít část programu ve více částech programu stačí využít funkci, což velice zjednoduší a zpřehlední program. Aby byla funkce univerzálnější, můžou se jí zadávat vstupní hodnoty (ale nemusí!).
Pro ukázku použijeme funkci, která bude počítat faktoriál (to je náhodička :-) tak, že bude volat sama sebe.

function faktorial(n) {
if (n==1 || n==0) return;
else {
cislo=n*faktorial(n-1); }
}

Stejné funkce bychom dosáhli i takto (tady už sama sebe nevolá):

function faktorial(n) {
var cislo=1;
while (n>0) {cislo*=n; n--; }
}

Události

Zatím bylo vše více méně teoretické. Abychom ale prakticky "oživili" stránky, musíme scripty přiřadit nějaké události, kterou vyvolá uživatel. Události se vážou vždy k nějakému objektu, např když uživatel přejede myší přes nadpis, vyvolá tím událost "onMouseOver" objektu "nadpis". Nejprve uvádím přehled událostí, příklad bude následovat záhy.
Události, které lze obslouzit skriptem
Událost Popis
onLoad Událost je vyvolána po natazení dokumentu do okna prohlízeče nebo do vsech rámů v rámci jednoho FRAMESET. Atribut můze být pouzit u elementů BODY a FRAMESET.
onUnLoad Událost je vyvolána po odstranění dokumentu z okna nebo rámu. Atribut můze být pouzit s elementy BODY a FRAMESET.
onClick Událost je vyvolána po kliknutí mysí na element. Atribut můze být pouzit u větsiny elementů.
onDblClick Událost je vyvolána po dvojitém kliknutí mysí na element. Atribut můze být pouzit u větsiny elementů.
onMouseDown Událost je vyvolána po stisknutí tlačítka mysi nad elementem. Atribut můze být pouzit u větsiny elementů.
onMouseUp Událost je vyvolána po uvolnění tlačítka mysi nad elementem. Atribut můze být pouzit u větsiny elementů.
onMouseOver Událost je vyvolána při přesunutí mysi nad element. Atribut můze být pouzit u větsiny elementů.
onMouseMove Událost je vyvolána při pohybu mysi nad elementem. Atribut můze být pouzit u větsiny elementů.
onMouseOut Událost je vyvolána po odsunutí mysi z elementu. Atribut můze být pouzit u větsiny elementů.
onFocus Událost je vyvolána v okamziku, kdy je element aktivován mysí nebo pomocí tabulátoru. Atribut je mozno pouzít u elementů LABEL, INPUT, SELECT, TEXTAREA a BUTTON.
onBlur Událost je vyvolána v okamziku, kdy element přestává být aktivní. Atribut je mozno pouzít u elementů LABEL, INPUT, SELECT, TEXTAREA a BUTTON.
onKeyPress Událost je vyvolána po stisku a následném uvolnění tlačítka na klávesnici. Atribut můze být pouzit u větsiny elementů.
onKeyDown Událost je vyvolána po stisku tlačítka na klávesnici. Atribut můze být použit u větsiny elementů.
onKeyUp Událost je vyvolána po uvolnění tlačítka na klávesnici. Atribut můze být pouzit u větsiny elementů.
onSubmit Událost je vyvolána při odesílání formuláře. Atribut můze být pouzit pouze u elementu FORM.
onReset Událost je vyvolána po vynulování formuláře. Atribut můze být pouzit pouze u elementu FORM.
onSelect Událost je vyvolána po označení textu ve vstupním poli. Atribut můze být pouzit u elementů INPUT a TEXTAREA.
onChange Událost je vyvolána pokud se změnila hodnota vstupního pole formuláře. Atribut můze být pouzit u elementů INPUT, SELECT a TEXTAREA.

Použití událostí si ukážeme na jednoduchém příkladě, který po najetí nad nadpis vyvolá okno s textem "Dobrý den!" :

<H1 onMouseOver="window.alert('Dobrý den!')" >Nadpis</H1>

Kdybychom ale chtěli, aby se po najetí myší stalo něco trošku složitějšího, bylo by dobré napsat si na to nějakou funkci a tu potom přiřadit této události. Funkce musí být definována v hlavičce (HEAD) dokumentu:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function okno() {
window.alert("Dobrý den!"); }
//-->
</SCRIPT>
</HEAD>
<BODY>
<H1 onMouseOver="okno()" >Nadpis</H1>
</BODY>
</HTML>

Objekty

Aby se stránky opravdu "oživily", musíme funkce a příkazy použít na objekty v dokumentu. Pro ukázku si ukážeme funkci, která bude měnit barvu všech odkazů na stránce po najetí myší na červenou.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function barva(co){
eval(co+".style.color='#FF0000'"; }

function barva2(co){
eval(co+".style.color='#000000'"; }
//-->
</SCRIPT>
</HEAD>
<BODY>
<A ID="a1" onMouseOver="barva(this.id)" onMouseOut="barva2(this.id)">odkaz 1</A>
<A ID="a2" onMouseOver="barva(this.id)" onMouseOut="barva2(this.id)">odkaz 2</A>
<A ID="a3" onMouseOver="barva(this.id)" onMouseOut="barva2(this.id)">odkaz 3</A>
</BODY>
</HTML>
 V tomto příkladě každý z objektů volá při najetí (resp. odjetí) myší funkci barva (resp. barva2) a jako parametr odesílá svůj název (this.id). Funkce pak pomocí funkce "eval" změní vlastnost "color" konkrétního objektu. Funkce "eval" slouží k tomu, aby převedla jméno objektu zastoupené proměnnou "co".

Ještě efektivněji by šlo tohoto výsledku dosáhnout pomocí této o něco složitější funkce:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function barva(){
if (window.event.srcElement.tagName=="A") window.event.srcElement.style.color="#FF0000"; }

function barva2() {
if (window.event.srcElement.tagName=="A") window.event.srcElement.style.color="#000000"; }
//-->
</SCRIPT>
</HEAD>
<BODY onMouseOver="barva()" onMouseOut="barva2()">
<A>odkaz 1</A>
<A>odkaz 2</A>
<A>odkaz 3</A>
</BODY>
</HTML>
 V tomto případě stačí přiřadit funkce do událostí objektu "BODY" a bude to fungovat pro všechny odkazy. To proto, že "window.event.srcElement" znamená objekt, který tuto funkci vyvolal. Pouze je třeba zadat podmínku, že jméno objektu musí být "A" (odkaz), jinak by se písmo měnilo u všech objektů na stránce!