Javascript - úvod

Javascript může být definován v hlavičce souboru, nebo v těle.

Je-li použit v těle, pak se na začátku při zobrazení stránky 1x provede. Je tedy logické, že zde asi bude volání funkcí, generující části stránky (z našeho hlediska dále statické), popřípadě části kódu, který je napsán pro jednorázové použití. Naproti tomu v hlavičce mohou být připravené funkce, které se budou používat později

Event-driven (poznámka bez vztahu k předmětu)

Bývaly doby (a není tomu tak dávno), co každý program někde začínal, někde končil a jeho činnost šlo popsat algoritmem. Změna nastala s jiným systémem ovládání - stylem Windows (poprvé bylo k ovládání počítače grafické prostředí použito na Apple Macintosh v roce 1984; systém ovládání je starší, existoval na grafických pracovních stanicích, ale v té době jen v jednotlivých programech, nikoli v samotném operačním systému). Zde v programu proběhne jen jakási inicializace, a následně program čeká, co se bude dít. Pokud dojde k očekávané události, provede předpřipravenou obsluhu (odtud - řízené událostmi). Programátor místo psaní dlouhého programu připravuje obsluhu jednotlivých událostí. K prosazení tohoto přístupu k programování by stejně ale muselo dojít, protože takto pracují systémy řízení v reálném čase - tam se dokonce každá událost musí začít obsluhovat, i když obsluha těch předchozích ještě neskončila.

Typické obsluhované události

Musíme si představit, co se webové stránce může stát. Typické je, že někdo klikne na nějaký objekt (tlačítko, nápis, obrázek), někdo stiskne klávesu, tlačítko se může stát aktivním, někdo může vyplnit editační okénko, nebo dokonce zavřít okno prohlížeče. Seznam událostí typického objektu je na adrese kosek.cz. V následujícím textu, který jsem náhodně potkal na Internetu, si můžete prohlédnout použítí Javascriptu. Nejprve je v hlavičce stránky definována funkce changeImage:

<HTML>
 <HEAD>
 <TITLE>Titulek stránky</TITLE>
 <script>
   function changeImg(n,url)
   {
     eval('document.'+n+'.src="'+url+'";');
	 }
 </script>

</HEAD>

......

</HTML>

eval způsobí, že se funkce provede - možná je to zbytečné a stačilo by ji rovnou napsat, nevím.

Všimněte si hierarchické struktury dokumentu. Vytvořený název místa, které se má přepsat, je document.jméno-obrázku.src, což je jméno vlastnosti, která u obrázku zadává, z jakého souboru se má naplnit. Tuto funkci pak zavoláme dle potřeby, například definice jednoho z mnoha obrázků na zmíněné straně vypadala následovně:

<a href="forum.php">
<img src="buttons/6a.gif" border="0" id="obr6"
  onMouseover="changeImg('obr6','buttons/6b.gif')"
  onMouseOut="changeImg('obr6','buttons/6a.gif')"
  onClick="changeImg('obr6','buttons/6b.gif')">
</a>

Jméno obrázku (v příkladu výše zvýrazněno červeně) musí splňovat požadavky pro jméno proměnné - začínat písmenem a obsahovat jen písmena anglické abecedy a čísla. Je to jeden z mála atributů, které nejsou zpětně kompatabilní - v html 2.x se jméno uvádělo ve tvaru "name=...", zatímco od verze xhtml 1.1 je přípustné jen ve tvaru "id=...". Nutno podotknout, že parametr "name=" přežívá u položek formuláře, kde slouží k uvádění jména proměnné, která se předává například php scriptu, a nemusí být jednoznačná (například více objektů "radiobutton" může mít stejné jméno, pošle se pak hodnota jen toho tlačítka, které je zvoleno) - naproti tomu žádné dva prvky nesmí mít stejné "id".

Možná by se hodil obrázek. Obrázek 6b jsem nenašel, mám jen 1a, 1b, 2a, 2b, 3a, 3b, 4a, 4b, 5a a 5b. Tak nevím...

Povšimněte si:

Prosím, podívejte se opět na stránky, jejichž autorem je ing. Jiří Kosek, jmenovitě na ukázky DHTML. Je zde několik příkladů, které byste již nyní měli být schopni pochopit.

Poznámka: v takto jednoduchém případě snad nebylo Javascript funkci ani třeba definovat, viz ukázka .

Oblíbené je použití javascriptu pro použití ve formulářích. Soubor ukázka3 předvádí oblíbenou aplikaci Javascriptu, přepočet jednotek. Více ukázek je v prehistorické bakalářské práci pana ing. Václava Bunce. S použitím Javascriptu pro kontrolu formulářů před odesláním se seznámíte při dolaďování aplikace, která je hlavní náplní cvičení tohoto předmětu.

Řada aplikací je již na internetu hotová a stačí si je na své stránky přidat. Hezký archiv býval na adrese java.tatousek.cz, odkaz Skripty ke stažení.

Poznámka: Pro psaní html souborů, obsahujících Javascript, doporučuji použít nějaký program, který umí zvýraznit syntaxi, například Pspad nebo Eclipse. Většina chyb při psaní tohoto druhu programů je způsobena zapomenutím některé závorky nebo uvozovek, což je při zvýraznění syntaxe vidět (horší je to se zapomenutými středníky, ty vidět nejsou).

Uvnitř skriptu, kde je opravdu již Javascript a ne html, se důsledně rozlišují velká a malá písmena - po vzoru jazyka C. Není zde totiž aplikován modul, který by umožňoval porovnávat řetězce bez ohledu na velikost znaků.

Podrobnější kurs Javascriptu je na serveru Jak psát web.