Javascript za 5 minut

Tento Φlßnek je urΦen pro ty, je╛ cht∞jφ pochopit zßkladnφ podstatu JavaScriptu, jak se pou╛φvß a kam se vklßdß. Nenφ to ╛ßdnß uΦebnice, jen spφ╣e takov² ·vod pro ty, je╛ cht∞jφ javascript na sv²ch strßnkßch pou╛φvat.

JavaScript je skriptovacφ jazyk, kter² se provßdφ na stran∞ klienta tj. na cφlovΘm poΦφtaΦi. Vklßdß se do dokumet∙ HTML, bu∩ p°φmo, nebo pomocφ externφho souboru K jeho b∞hu pot°ebujete pouze prohlφ╛eΦ, podporujφcφ JavaScript. Zdrojov² k≤d JavaScriptu se vklßdß bu∩ p°φmo do dokumentu:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
--- k≤d JavaScriptu ---
</SCRIPT>

nebo do externφho souboru s p°φponou .js :

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="mujskript.js">
</SCRIPT>

Samoz°ejm∞ m∙╛eme javascripty provΘst po urΦitΘ akci n∞jakΘho objektu(onLoad, onMouseOver, ...), p°φkaz(y) se pak vklßdajφ rovnou jako hodnota atributu:

<IMG SRC="obrazek.gif" OnMouseOver="this.src=\'obrazek2.gif\'">

Pokud vklßdßme JavaScript p°φmo do dokumentu, bylo by vhodnΘ cel² k≤d vlo╛it do komentß°e. Vyhneme se tak necht∞nΘmu zobrazovßnφ Φßstφ zdrojovΘho k≤du u prohlφ╛eΦ∙, kterΘ JavaScript nepodporujφ:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
--- k≤d JavaScriptu ---
// ->
</SCRIPT>

V Javascriptu m∙╛eme psßt vφce p°φkaz∙ na °ßdek, ale pak je musφme odd∞lovat st°ednφkem:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
window.alert(\'Vφtejte na mΘ strßnce!\'); window.alert(\'P°eji mnoho zßbavy.\');
// ->
</SCRIPT>

Te∩, kdy╛ vφme, jak a kam se JavaScripty vklßdajφ, vytvo°φme si jednoduch² skript, kter² v vypφ╣e text "Vφtejte na m²ch strßnkßch":

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
document.write(\'Vφtejte na m²ch strßnkßch\');
// ->
</SCRIPT>

Otßzkou je, zdali v JavaScriptu psßt jednoduchΘ, nebo dvojitΘ uvozovky. Obojφ je sprßvn∞, ale Vßm doporuΦuji v JavaScriptu uvozovky v╛dy jednoduchΘ, nevznikajφ pak problΘmy p°i vklßdßnφ JavaScript∙ do efektu n∞jakΘho objektu. Dvojit²mi uvozovkami bych efekt p°edΦasn∞ ukonΦil a zbytek k≤du by le╛el jentak uprost°ed tagu, co╛ rozhodn∞ nenφ to pravΘ. Te∩ si ale ukß╛eme, jak v JavaScriptu provßd∞t jednoduchΘ poΦetnφ operace:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
cislo = 56 + 4;
document.write(\'SouΦet Φφsel 56 a 4 je: \'+cislo+\'.\');
// ->
</SCRIPT>

Nynφ ale p°ichßzφ okam╛ik, kdy budeme po u╛ivateli vy╛adovat urΦitß vstupnφ data. V nßsledujφcφm skriptu pou╛ijeme funkci prompt, co╛ je dialogovΘ okno se vstupnφm polem.

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
jmeno=window.prompt(\'Jak se jmenujete ?\');
document.write(\'Va╣e jmΘno je: \'+jmeno+\'.\');
// ->
</SCRIPT>

Dal╣φ dv∞ funkce, kterΘ s u╛ivatelem komunikujφ formou dialogov²ch oken jsou alert a confirm. Ob∞ si je (s op∞tovn²m vyu╛itφm funkce prompt) p°edstavφme v dal╣φm p°φkladu:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
window.alert(\'ZaΦφnßme !\');
souhlas=window.confirm(\'Souhlasφ╣ ?\');
barva=window.prompt(\'Jakß je tvoje oblφbenß barva ?\');
document.write(\'ZaΦali jsme.\');
if (souhlas) {document.write(\'<FONT COLOR="green">Souhlasil si.</FONT>\');} else
{document.write(\'<FONT COLOR="red">Nesouhlasil si.</FONT>\');}
document.write(\'Tvoje oblφbenß barva je \'+barva+\'.\');
// ->
</SCRIPT>

Slabß strßnka tohoto p°φkladu se projevφ ve chvφli, kdy v dialogovΘm vstupnφm poli kliknete na STORNO. Jak si sami m∙╛ete ov∞°it, v tomto p°φpad∞ bude mφt prom∞nnß BARVA hodnotu NULL, co╛ nenφ ono. V tomto skriptu se pokusφme tuto chybu odstranit:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
window.alert(\'ZaΦφnßme !\');
souhlas=window.confirm(\'Souhlasφ╣ ?\');
barva=window.prompt(\'Jakß je tvoje oblφbenß barva ?\');
document.write(\'ZaΦali jsme.\');
if (souhlas) {document.write(\'<FONT COLOR="green">Souhlasil si.</FONT>\');} else
{document.write(\'<FONT COLOR="red">Nesouhlasil si.</FONT>\');}
if (barva==null) {document.write(\'Oblφbenß barva nebyla zadßna.\');} else
{document.write(\'Tvoje oblφbenß barva je \'+barva+\'.\');}
// ->
</SCRIPT>

Pou╛itφm jinΘho operßtoru celou v∞c je╣t∞ zjednodu╣φme:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
window.alert(\'ZaΦφnßme !\');
souhlas=window.confirm(\'Souhlasφ╣ ?\');
barva=window.prompt(\'Jakß je tvoje oblφbenß barva ?\');
document.write(\'ZaΦali jsme.\');
if (souhlas) {document.write(\'<FONT COLOR="green">Souhlasil si.</FONT>\');} else
{document.write(\'<FONT COLOR="red">Nesouhlasil si.</FONT>\');}
if (barva!=null) {document.write(\'Tvoje oblφbenß barva je \'+barva+\'.\');}
// ->
</SCRIPT>

Na zßv∞r snad jen to, ╛e obsah Va╣ich strßnek by m∞l b²t p°φstupn² i prohlφ╛eΦ∙m bez javascriptu (nebo, pokud majφ javascript vypnut²). Prvnφ mo╛nostφ, jak toho docφlit je pou╛φvßnφ javascriptu pouze na dopl≥kovΘ efekty (jako nap°φklad zm∞na obrßzku tlaΦφtka po najetφ my╣φ atd.). Pokud chcete ale JavaScriptem vypisovat i informace, kterΘ se mß nßv╣t∞vnφk dozv∞d∞t, musφte ud∞lat je╣t∞ "nßhradnφ" text pro ty, kte°φ javascript nemajφ. Tento text pak vlo╛φte kamkoli do t∞la dokumentu mezi tagy <noscript> a </noscript>. Existujφ i takovφ rßdoby webdesignΘ°i, kte°φ mezi tyto tagy napφ╣φ text typu Po°i∩te si lep╣φ prohlφ╛eΦ!. To je ale rozhodn∞ neprofesionßlnφ. I trochu rozhßzen² design toti╛ urΦit∞ p∙sobφ lΘpe, ne╛-li takovΘto hlß╣ky. V∞°φm, ╛e javascript budete pou╛φvat jen st°φzliv∞ a s rozvahou, v opaΦnΘm p°φpad∞ to m∙╛e siln∞ ze╣tφhlit mno╛stvφ Va╣ich nßv╣t∞vnφk∙.

Marek Soldßt, marek@soldat.cz

Autor je ╣Θfredaktorem serveru Einstein.cz.