Seriál JavaScript pro začátečníky - 1. díl

Na začátku byla tma, pak přišel Internet a s ním World Wide Web. Tak se zrodil nekonečný svět webových sídel a prezentací. Ovšem všechny stránky byly mrtvé. Stále vypadaly tak, jak byly stvořené, neměnily se, nehýbaly se. Až mnohem později (v prosinci 1995) se v průkopnickém prohlížeči Netscape Navigator (verze 2.0b3) objevily první zárodky života, který s sebou přinášel JavaScript 1.0. V současnosti se svět WWW jen hemží živými, pohyblivými, dynamicky reagujícími stránkami. Za tímto životem již nestojí pouze JavaScript, ale i mnohé další skriptovací jazyky a webové technologie (Java, Flash, animované GIFy, …). Nicméně JavaScript (a zejména úvod do jeho programování) bude náplní tohoto seriálu.

Co to je JavaScript?

JavaScript je skriptovací jazyk, který je součástí zdrojového kódu HTML stránky a je interpretován na straně klienta. To je asi nejdůležitější myšlenka úvodu seriálu, neboť se z ní dá vyvodit mnoho důležitých informací:

• Zdrojové kódy skriptů se před vlastní interpretací stahují na klientský počítač, kde je prohlížeč interpretuje zároveň s HTML značkami stránky.
• Skript se nepřekládá, jeho kód je volně přístupný v čitelné podobě a kdokoliv si jej může prohlédnout. Na jednu stranu je to velmi výhodné - můžete se poučit ze skriptů ostatních vývojářů, neboť všechny jsou dostupné. Ale i nevýhodné - nemůžete utajit vlastní algoritmy, nemůžete pomocí JavaScriptu zabezpečit své stránky, autorizovat návštěvníky a podobně.
• Jelikož je interpretován na straně klienta, může se stát, že prohlížeč s ním bude mít problémy a vy jej nebudete moci ovlivnit. Ne každý prohlížeč JavaScriptu rozumí a umí jej správně interpretovat. Na to byste neměli zapomínat! Myslete na uživatele s alternativními prohlížeči, myslete na ty, kteří mají skriptování vypnuto. Hlavní náplní stránek jsou data a ne jejich různá dynamická vylepšení a zkrášlení. Je lepší udělat méně přitažlivou, ale zato plně funkční stránku přístupnou všem prohlížečům, než stránku geniálně dynamickou a moderní, kterou ale správně a použitelně zobrazí pouze jeden konkrétní prohlížeč. Z toho vychází další důležitá poučka při vylepšování stránek - používejte JavaScript s mírou a rozvahou a neopomeňte otestovat jeho funkčnost v co nejvíce prohlížečích.

Pracovní prostor JavaScriptu je omezen jen a pouze na webový prohlížeč. Z bezpečnostních důvodů nemůže využívat síťové připojení (může pouze přesměrovat prohlížeč na jinou stránku), nemůže spouštět aplikace, zavirovat počítač, nemůže ukládat a číst data z disku. Výjimkou jsou malá data nazývaná cookies (koláčky neboli sušenky), které mají značně omezenou velikost a jsou ukládány na jedno specifické místo na klientském počítači (v závislosti na prohlížeči). Druhá výjimka by vznikla v případě, že máte nainstalován Active-X prvek, který zápis a čtení dat na disk umožňuje. Proto nemůžete nikdy pomocí JavaScriptu naprogramovat počítadlo přístupů, knihu návštěv, diskusní fórum. Na to musíte využít skriptování na straně serveru, které zajišťuje například ASP nebo PHP.

Z výše uvedených skutečností vyplývá, že JavaScriptem lze manipulovat pouze s obsahem stránky a prohlížečem. Snadno tak naprogramujete všeliké roll-over efekty (změna elementu, obrázku po najetí myší), vytvářet nová okna prohlížeče, dynamicky generovat či měnit obsah stránky, využívat časovače pro spouštění akcí, vytvářet dynamické stránky, které reagují na činnost uživatele, kontrolovat vyplňování formulářů (to je jedno z nejrozumnějších použití JavaScriptu) a podobně.

JavaScript je objektově orientovaný jazyk, vychází ze syntaxe jazyků C/C++ a často se plete s Javou, se kterou má mnoho společných rysů. Na to dávejte pozor, Java je úplně jiný jazyk! Díky své jednoduchosti se JavaScript používá nejen na webových stránkách ale i pro skriptování v aplikacích, kde lze s jeho pomocí snadno vytvářet makra a jiné (polo)automatické akce (uveďme například výborný vývojářský balík Macromedia Studio MX a nebo programátorský editor rkEdit).

Co potřebujeme k tvorbě skriptů?

Jelikož kód JavaScriptu se interpretuje a tedy se nepřekládá do žádného spustitelného kódu (či mezikódu, jak je tomu u Javy), budeme k jeho programování potřebovat pouze dvě aplikace: textový editor na psaní kódu a internetový prohlížeč na zobrazování výsledků.

Editor může být libovolný, jediný požadavek je, aby uměl ukládat napsaný zdrojový kód v prostém textovém formátu. Bohatě vám tedy postačí i notepad.exe, ale doporučuji využít lepší programátorské editory se zvýrazněnou syntaxí. Například rkEdit, který používám já, MultiEdit, WinEdit, UltraEdit a další. Získáte tak podstatně lepší přehled a kontrolu nad napsaným kódem, navíc některé programátorské editory mají vestavěné nápovědy (pro JavaScript, HTML, CSS) a další skvělé výhody. Naproti tomu WYSWYG editory pro psaní webových stránek nepřináší při programování skriptů žádnou výhodu (spíše jsou na obtíž), neboť nás zajímá zdrojový kód a nikoliv vizuální podoba.

Prohlížeč používejte takový, pro který chcete stránky se skriptem optimalizovat. Tedy ten, který bude mít většina návštěvníků vašich stránek. Ale nezůstávejte jen u jednoho, nainstalujte a zkoušejte jich více. Například prohlížečů firmy Netscape můžete mít nainstalováno více verzí (na rozdíl od Microsoftu, kde je něco takového obtížné, ale v současné době již né nemožné - viz článek Multiple MSIE na serveru Skyzyx. Proč testovat ve více prohlížečích? Protože každý z nich (ba dokonce každé dvě různé verze od stejného výrobce) interpretují JavaScript trochu jinak nebo například vůbec neznají novější vlastnosti. Proto se nedivte, že jeden a ten samý skript vypadá skvěle v Microsoft Internet Exploreru (dále jen MSIE), ale v Netscape Navigatoru (NN) nefunguje vůbec. A to je právě jedna z těch větších obtíží při psaní skriptů.

První program

Úvod bychom měli za sebou a tak je nejvyšší čas pustit se do programování. Začneme jednoduchým skriptem, který naleznete v úvodu každé učebnice libovolného programovacího jazyka. Vytvoříme skript „Hello world!“.

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
    <title>Můj první skript</title>
    <script type="text/javascript">
      <!-- Ukrytí před staršími prohlížeči
        alert ("No nazdar!");
      // Konec ukrytí -->
    </script>
  </head>

  <body>
     Obsah mé první "živé" stránky.
  </body>
</html>

Předtím, než se pustím do vysvětlování, přepište si zdrojový kód uvedené stránky ve svém editoru do souboru hello_world.htm a zobrazte jej v internetovém prohlížeči, kde by se mělo objevit dialogové okénko s nápisem „No nazdar!“, jak ukazuje doprovodný obrázek. Pokud jste líní, můžete použít následující odkaz na první příklad: hello_world.htm.

Při zobrazení skriptu v prohlížeči si můžete všimnout, jak prohlížeč postupně interpretuje HTML stránku. Nejdříve zpracuje značku <title> - nastaví název dokumentu do horní lišty prohlížeče, pak vykoná skript v hlavičce a interpretace se zastaví (čeká se na potvrzení dialogu od uživatele). Teprve poté se zobrazí tělo stránky.

Předpokládám, že základy značkovacího jazyka HTML znáte, takže se ve výkladu zaměřím více na kód skriptu. Ten je celý ukryt v hlavičce dokumentu, tedy v sekci uzavřené mezi značkami <head> a </head>. Samozřejmě že se skript může nacházet i v jiných částech stránky, k tomu se ale dostaneme později. V hlavičce je mimo jiné metatagem definováno kódování použité ve stránce a název celého dokumentu (značka <title>). Aby prohlížeč poznal, kde začíná kód JavaScriptu, musí být ohraničen značkami <script> a </script>. V uvedeném příkladě je značka doplněna o atribut type s hodnotou "text/javaScript", který specifikuje konkrétní skriptovací jazyk. Kromě JavaScriptu existuje ještě například VBScript, který vyvinula firma Microsoft a který zatím umí interpretovat jen MSIE (proto se moc na webových stránkách nepoužívá).

Na dalším řádku se nachází začátek HTML komentáře. Jeho ukončovací značka je uvedena na posledním řádku skriptu (před ukončovací značkou </script>) a obaluje tak veškerý kód JavaScriptu. Ptáte se proč? Protože starší prohlížeče (no v dnešní době by to už musely být buď hodně staré vykopávky a nebo hodně nezvyklé, ba přímo exotické kousky - proto dnes již kód takto obalovat nemusíte a ani se to již nedoporučuje), které neumí interpretovat kód skriptu, by prostě a jednoduše vypsaly jeho kód. Považovaly by jej totiž za text, jenž se formátuje pro ně neznámou značkou <skript>.

A ještě jedna odbočka: Jak už jsem psal na mnoha místech, JavaScript nemusí podporovat každý prohlížeč (případně si jej může vypnout sám uživatel). Aby takový uživatel/prohlížeč nepřišel zkrátka, je dobré využít značku <noscript> a do ní vložit alternativní neskriptový obsah - nebo alespoň upozornění:

<script type="text/javascript">
  ...
</script>
<noscript>
  Váš prohlížeč nepodporuje JavaScript, pokud by podporoval,
  zobrazil by dialogové okno s textem "No nazdar!".
</noscript>
      

Znáte-li alespoň trochu HTML, jistě vám neuniklo, že konec HTML komentáře tvoří znaky -->, proč jsou tedy v kódu před nimi na tom samém řádku uvedeny ty dvě lomítka? Protože se stále ještě nacházíme v oblasti kódu JavaScriptu, kde se nesmí psát HTML značky (a tedy ani znaky -->), neboť by došlo k syntaktické chybě. Východiskem je jejich zakomentování pomocí javascriptového (jednořádkového) komentáře, což jsou právě ty dvě lomítka //.

A nyní se konečně dostáváme k jádru uvedeného skriptu. Výše uvedené řádky představují „šablonu“, která by měla být obalena kolem každého skriptu. Oním jádrem je řádek, obsahující jediný příkaz:

alert ("No nazdar!");

Tedy on to není ani příkaz, je to prosté volání metody základního objektu window (jehož název se nemusí uvádět, neboť je to objekt na nejvyšší úrovni hierarchie - o tom si povíme více v následujícím díle), který reprezentuje okno prohlížeče. Metoda alert() zobrazí jednoduchý informační dialog, obsahující pouze předaný řetězec a tlačítko „Ok“.

Ladění

Ač se to nezdá, uvedená metoda alert() je jedna z nejpoužívanějších. Je to totiž nejjednodušší a nejrychlejší způsob ladění skriptů na stránkách. Nevíte-li, co se v jistý okamžik nachází v proměnné či vlastnosti objektu, stačí zavolat tuto metodu a předat ji záhadnou proměnnou (nebo vlastnost) a ona zobrazí v dialogovém okně její hodnotu.

alert("Neznama: " + Neznama);

Existují samozřejmě i kvalitnější nástroje pro ladění JavaScriptu. Například Netscape JavaScript Debugger pro starší prohlížeče NN, Venkman pro ty novější a nebo Microsoft Script Debugger pro MSIE. Další zajímavé vylepšení pro MSIE se nazývá Web Developer Accessories. Recenze výše uvedených nástrojů naleznete v SWN 2/2002 na straně 70. Ještě poslední poznámka k tomuto tématu - při programování a ladění JavaScriptů v MSIE je výhodné, aby vás váš prohlížeč vždy upozornil na případné chyby. Toho lze docílit zaškrtnutím následující položky v jeho nastavení:

Nástroje/Možnosti sítě Internet/Upřesnit/Procházení/
Zobrazovat oznámení při každé chybě ve skriptu

To by bylo k úvodnímu dílu krátkého seriálu o JavaScriptu všechno. Příště se podíváme na několik základních objektů, se kterými může skript v prohlížeči operovat a jejich metody a vlastnosti.