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.

Hello world v JavaScriptu

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.

Petr Václavek

Zobrazit příspěvky od Petr Václavek
Grafik na volné noze, kterého živí kreslení pro zahraniční microstock fotobanky, příležitostný fotograf, tvůrce dubánků, velký lenoch, čajopijec, a vášnivý čtenář.

10 Komentářů

  1. Chose
    9. 9. 2005

    Predne ti musim pochvalit zajimavy clanek pro zacatecniky.

    Otazka: Kde v praxi je lepe podporovan language=„JavaS­cript“? Pokud vim, tak potreba uvadet language padla nekde s NN4, IE4 a starsi, tudiz to vidim jako opravdu zbytecne a navic je to deprecated vlastnost. Doporucil bych spise type=„text/ja­vascript“, ktery pouzivam a neni s tim vubec zadny problem.

    Odpovědět
  2. Petr Václavek
    9. 9. 2005

    Aj, tak přece jen mi něco uniklo. Tento článek není zcela aktuální, byl napsán pro Softwarové noviny, před asi dvěmi lety.

    Takže díky za upozornění, poopravím to.

    Odpovědět
  3. Jakub Vrána
    9. 9. 2005

    To by mě zajímalo, kdy byl tenhle článek ve skutečnosti napsán. Časté zmiňování dnes už téměř zapomenutého NN, odkazy na neexistující stránky, vyzdvihování atributu language, který je označen jako Deprecated a především používání <!– pro skrytí JavaScriptového kódu, které není dopředně kompatibilní (protože XML parser zpracovávající XHTML dokument může komentáře bez varování zahodit a zobrazovací část prohlížeče je vůbec nedostane).

    Dále i nějaké nepřesnosti: např. text umístěný v části <head> by prohlížeče podle normy vypisovat neměly.

    Napsat, že JavaScriptem nelze zabezpečit stránky a autorizovat uživatele proto, že jeho kód je volně přístupný, vyvolává dojem, že jediný možný způsob zabezpečení je „Security by obscurity“ – to je ale naopak ten nejhorší možný způsob.

    Stránku pomocí JavaScriptu alespoň primitivně zabezpečit lze (kódem location.href = prompt('Heslo:', '') + '.html'), autorizovat uživatele s využitím nějaké hashovací knihovny rovněž.

    No nic… Ve skutečnosti mi to na první díl seriálu nepřijde špatné a těším se na pokračování ;-).

    Odpovědět
  4. Jakub Vrána
    9. 9. 2005

    [2] Teď už to alespoň částečně dává smysl, komentář [3] jsem začal psát na stránce načtené před přidáním prvních dvou komentářů.

    Čtenáři by určitě ocenili, kdyby dříve napsané články byly oprášené pro aktuální podmínky…

    Odpovědět
  5. Petr Václavek
    9. 9. 2005

    Tak jsem se díval na stránky SWN a článek vyšel někdy v červnu 2003, psán byl samozřejmě s několikaměsíčním předstihem (kvůli uzávěrce).

    Uznávám, že mi několik (no vypadá to, že více) detailů uniklo při tom oprašování.

    Co se týče zabezpečení stránek Javascriptem, tak si stojím za svým – rozumně to nejde (už jen z té podstaty JavaScriptu). Samozřejmě najdou se nějaké cesty, ale ty bych moc nedoporučoval (to je podobné, jako kdyby chtěl někdo pomocí Php zobrazovat souřadnice myši nad obrázkem). O uvedeném primitivním zabezpečení jsem psal již několikrát, je to nouzové řešení (v okamžiku, kdy se provalí název souboru, je to v pr… a provalit se může třeba už jen z Cache paměti, historie, refereru…).

    Odpovědět
  6. Jakub Vrána
    9. 9. 2005

    [5] S tím samozřejmě souhlasím a přijímám zjednodušení, že „nelze“ ve skutečnosti znamená „nelze pořádně“. Vadilo mi hlavně uvedení tohoto faktu jako důsledek toho, že je kód volně přístupný – zabezpečení by nemělo být závislé na neznalosti kódu a jeho vyzrazení by bezpečnost nemělo nijak narušit.

    Odpovědět
  7. llook
    9. 9. 2005

    [5] – jak obehrát cache a historii nevím. S metodou POST (form.submit()) by se sice neměl dokument kešovat, ale adresa by stejně do historie přibyla.

    Ale obejít referery pure javascriptem lze. Teda u odkazů, u formulářů ne. Stačí cyklem projít všechny odkazy a přidat onclick, který uživatele pošle na přesměrovávací stránku – využívající location.search.

    Odpovědět
  8. Petr Václavek
    9. 9. 2005

    [7] Hmm, nějak moc mi to připomínání drbání za pravým uchem levou nohou 🙂

    Odpovědět
  9. jiri
    15. 9. 2007

    Neni nahodou nějaky java script ,aby se mi stranka oběvovala v Internet explore a v mozile firefox,nebo snad i v opeře stejně, totiž mi to v I. E. se zobrazi normalně jak ma , ale v Mozile a v Operě mi blikaji hypertextové odkazy , tu stranku dělam přes Front page,(?/…nloa­du.ic.cz) da se to nějak upravit?? odpověď mi napište do e-mailu : george2312 (at) cen­trum.cz ,předem děkuji za odpověď

    Odpovědět
  10. Petr Václavek
    18. 9. 2007

    O takovém JavaScriptu jsem ještě neslyšel a pochybuji, že by existoval. Doporučuji pečlivěji prostudovat kaskádové styly a zejména jejich rozdílné implementace v různých prohlížečích.

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Skočit na začátek stránky