Príručka k JavaScriptu
1. kapitola

1.0 Co je to JavaScript ?

JavaScript je pomerne novy, objektovo orientovany skriptovy jazyk, za vznik ktoreho mozno vdacit firmam Netscape a Sun. JavaScript myslienkovo vychadza, ako uz z nazvu vyplyva, z Javy. V pripade, ze chcete pridat do vasich stranok javovsky applet, potrebujete mat vyvojove prostredie pre Javu, ci aspon kompilator. Vysledny applet je vacsinou pomerne velky. Jeho ladenie tiez nebyva prave lahka zalezitost. Applet tvori samostatny subor. Do html suboru popisujuceho www stranku sa vklada iba odkaz na tento subor, pripadne niektore dalsie parametre, ktore budu brane do uvahy pri konecnej kompilacii.

Na rozdiel od Javy, JavaScript je neoddelitelnou sucastou www stranky. Nemusite nic kompilovat, jednoducho vlozite zdrojovy text prislusneho JavaScriptu priamo do html suboru. Ake to ma vyhody, to snad ani netreba zdoraznovat. Predovsetkym je to zjavne odlahcenie vasej stranky - JavaScript je oproti appletu s rovnakou funkciou o dost mensi. To je vec, ktora by sa nemala pri dnesnej priepustnosti liniek zanedbavat. Prakticky vsetko, co sa da naprogramovat v Jave, sa da zvladnut pomocou JavaScriptu. Pokial sa rozhodnete zmenit niektoru malickost v programe napisanom pomocou JavaScriptu, staci si otvorit prislusny html subor v niektorom z editorov stranok. Medzi hlavne nevyhody JavaScriptu mozno povazovat pristupnost zdrojoveho textu vasho programu kazdemu a mierne odlisna podpora tohto jazyka v prehliadacoch www stranok.

1.1 Spustanie skriptov jazyka JavaScript

Skripty v jazyku JavaScript su v sucasnej dobe podporovane 3 prehliadacmi webovskych stranok. Jednotlive implementacie v tychto prehliadacoch sa od seba mierne lisia, a preto nie je zarucene, ze skript, ktory pracoval bezchybne v jednom, bude si plnit svoju funkciu aj v inom prehliadaci. S podporou JavaScriptu prisiel ako prvy Netscape Navigator 2.0. Neskor sa pripojil Microsoft Internet Explorer. Tym tretim sa stal prehliadac stranok Opera, ktory vsak v monych oblastiach zaostava.

1.2 Zaclenenie skriptov do HTML

Teraz si ukazeme niekolko skriptov, na ktorych sa naucite sposob implementacie skriptov do WWW stranok. Zacneme so skriptom, ktory zapisuje text do dokumentu HTML.

<html>
<head>
<title>Moj prvy JavaScript</title>
</head>
<body>

Toto je napisane normalne.<br>

<script language="JavaScript">
<!--
document.write("A toto napisal JavaScript!")
// -->
</script>

<br>A toto je opat napisane normalne.

</body>
</html>

V pripade, ze pouzivate prehliadac podporujuci JavaScript, o riadok nizsie uvidite vystup uvadzaneho skriptu:

Toto je napisane normalne.

A toto je opat napisane normalne.

Je zrejme jasne, ze uvedeny skript nie je velmi uzitocny, pretoze to iste sa da realizovat pomocou beznych HTML prikazov jednoduchsie a rychlejsie. Ale nam tu islo o to, aby ste si vsimli ako sa implementuje skript do www stranky.

1.3 Prve funkcie

Najlepsie je, ked si funkcie deklarujete medzi znackami <head> www stranky. Je to dobre z dovodu, aby prehliadac interpretoval skripty skor nez by mal uzivatel moznost nieco urobit. Skripty v jazyku JavaScript sa zvyknu ukladat medzi komentare, aby nevznikal zmatok na stranke prezeranej starsou verziou prehliadaca.

<html>
<head>
<script language="JavaScript">
function pushbutton()
{
alert("Ahoj!");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Stlac ma" onclick="pushbutton()">
</form>
</body>
</html>

Ked si chcete otestovat tento skript, stlacte tlacitko, ktore sa nachadza na nasledujucom riadku:

Tento skript vytvori tlacitko s napisom Stlac ma. V pripade, ze bude tlacitko stlacene, objavi sa okno s napisom Ahoj!. A ako to vsetko funguje ? Najprv sa nahra vyssie uvedena funkcia do pamati. Potom je pomocou znacky <form> vytvorene tlacitko. Vo vnutri znacky <input> mame moznost vidiet nieco nove. Ide o parameter onClick, ktory hovori prehliadacu co ma urobit, v pripade, ze dojde k stlaceniu tlacitka (samozrejme iba prehliadacom, ktore podporuju JavaScript). Funkcia pushbutton() je deklarovana v hlavicke dokumentu. Az ked sa stlaci tlacitko, tak sa vyvola tato funkcia. V tomto skripte je este nieco nove - metoda alert. Tato metoda je deklarovana v samotnom jazyku JavaScript, a preto ju staci zavolat. V JavaScripte je mnoho metod takto predeklarovanych a niektore dalsie si ukazeme v buducich prikladoch.

1.4 Prvky formulara

V tomto priklade si ukazeme ako sa da precitat nieco, co vlozil uzivatel do formulara.

<html>
<head>
<script language="JavaScript">
function getname(str)
{
alert("Ahoj, "+ str+"!");
}
</script>
</head>
<body>
Prosim napiste svoje meno:
<form>
<input type="text" name="name" onBlur="getname(this.value)" value="">
</form>
</body>
</html>

Tak a teraz si mate moznost tento skript otestovat:

Prosim napiste svoje meno:

Opat sa v tomto skripte nachadzaju niektore nove prvky. Ako ste si uz mohli vsimnut, pouzivaju sa tu komentare. Tymto sposobom je mozne skripty skryt pred starsimi prehliadacmi stranok.

V tomto html dokumente sa nachadza formularovy prvok, ktory umoznuje uzivatelovi vlozit svoje meno. Parameter OnBlur v znacke <input> hovori klientovi, ktoru funkciu musi zavolat, v pripade, ze dojde k vlozeniu textu do formulara. Takze funkcia getname(str) bude zavolana ked opustite formularovy prvok. Tato funkcia vezme retazec, ktory ste napisali vo funkcii getname(this.value). 'This.value' znamena hodnotu, ktoru uzivatel vlozil do formulara.

1.5 Datum poslednych zmien

V nasledujucom priklade si ukazeme ako sa da zrealizovat vypis poslednej zmeny dokumentu. Uz nebudete musiet pisat datum poslednych uprav rucne do dokumentu, pretoze tato funkcia to urobi za Vas. Jednoducho napiseme maly skript, ktory automaticky zmeni datum po Vasich upravach.

<html>
<body>
Toto je jednoducha stranka
<br>
Posledne zmeny:
<script language="JavaScript">
<!--
document.write(document.lastModified);
// -->
</script>
</body>
</html>

Nasledujuca kapitola - Obsah