Výuka JavaScriptu - 1.

Každý týden vyjde minimálně jeden článek a pokud je budete pilně číst neměl by být pro vás na konci problém psát vlastní skripty. Základ pro pochopení článků je znalost HTML.

Jaký potřebujete software?

Klidně vystačíte i s Poznámkovým blokem, který obsahují všechny verze Windows. Samozřejmě lepší je použít například HomeSite nebo nějaký freewarový program jako PSPad. K prohlížení vytvořených skriptů je zapotřebí ještě nějaký internetový prohlížeč.

Co je JavaScript?

JavaScript je skriptovací jazyk založený na programovacím jazyku JAVA. JavaScript může být spuštěn na straně klienta (client-side) nebo serveru (server-side). V článcích naleznete informace pouze o tvorbě JavaScriptu na straně klienta (client-side), kdy se kód nachází v HTML dokumentu a je realizován v internetovém prohlížeči, tj. kód se přenese spolu s HTML dokumentem z webové stránky a váš prohlížeč ho spustí a vykoná.

Poznámka: JavaScript NENÍ to stejné co JAVA!

Skriptovací jazyk umožňuje přistupovat k různým prvkům webových stránek jako jsou obrázky, formuláře, odkazy a jiné. Tyto prvky můžeme s pomocí JavaScriptu různě měnit a ovlivňovat. JavaScript také dovoluje reagovat na různé události, například kliknutí myši, stisk klávesy a další, což dovoluje spouštět různé akce podle chování uživatele.

V JavaScriptu se dá napsat například skript reagující na události vyvolané myší (pohyb myši, stisk tlačítka, …), kontrolu formuláře i animace. Jak to ho dosáhnout se dozvíte v sérii článků.

JavaScript má i několik omezení, ovšem logických. Například se nedají číst ani zapisovat soubory na uživatelský počítač (ten, kdo si prohlíží vaše stránky). Toto omezení je jasné, pokud si někdo spustí program na svém počítači (client-side skripty jsou vykonávány na straně klienta) musí si být jist, že program (skript) neohrozí bezpečnost počítače.

Které prohlížeče podporují JavaScript?

Netscape jako první zavedl podporu JavaScriptu ve svém prohlížeči Netscape Navigator 2. Microsoft ho následoval a implementoval podporu JavaScriptu do Internet Exploreru 3. Další prohlížeče reagovaly podobně a podporu pro JavaScript implementovaly také. V současnosti znamená příchod každé nové verze prohlížeče aktualizaci a doplnění stávající verze JavaScriptu.

Kompatibilita mezi různými druhy prohlížečů a jejich verzí může způsobovat při návrhu skriptu problémy, proto se zezačátku zaměříme na všeobecné vlastnosti. Později si ukážeme tyto rozdíly a jak si s nimi poradit.

Poznámka: JavaScript není doménou pouze prohlížečů Netscape Navigator a Internet Explorer. Velmi kvalitní podpora JavaScriptu je i v prohlížečích Mozilla a Opera.

Verze JavaScriptu

JavaScript prošel určitým vývojem a to nám přineslo několik verzí:

• JavaScript 1.0 - Netscape Navigator 2.0
• JavaScript 1.1 - Netscape Navigator 3.0; Internet Explorer 3.0 (ovšem podpora JavaScriptu V IE nestála za nic)
• JavaScript 1.2 - Netscape Navigator 4.0-4.05; první verze Internet Exploreru 4.0
• JavaScript 1.3 - Netscape Navigator 4.06-4.5; pozdější verze Internet Exploreru 4.0 plus Internet Explorer 5.0
• JavaScript 1.5 - Netscape Navigator 6.0 a vyšší; Internet Explorer 5.5 a vyšší

Microsoft současně s podporou JavaScriptu představil i vlastní implementaci jazyka JavaScript (od IE 3). Tato implementace je známá pod jménem JScript. Aby bylo možné dosáhnout určité kompatibility, Evropská asociace výrobců počítačů ECMA stanovila normu. Této normě by měli jednotlivé specifikace JavaScriptu odpovídat. Více na stránkách ECMA - Standardizing Information and Communication Systems.

Poznámka: Všechny skripty uvedené v sérii článků pracují s Netscape Navigatorem nebo Microsoft Internet Explorerem verze 3 a vyšší. Pokud není uvedeno jinak!

Část 1

Základy práce s JavaScriptem

Zápis skriptu

  <script language="JavaScript" type="text/javascript">
  <!--
     vlastní kód
  //––>
  </script>

Tímto tagem prohlížeči sdělíme, že skript, který bude následovat, je napsán v JavaScriptu, a že MIME-type je "text/javascript". Pokud vynecháte definici TYPE nic se nestane, kód se provede stejně, ale není to podle standardu W3C.

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

Nyní skryjeme obsah skriptu před staršími prohlížeči pomocí triku s komentáři.

<!--
//––>

Před ukončení HTML komentáře přidáme dvě lomítka. Prohlížeče, které znají JavaScript, se někdy pokoušely interpretovat konec HTML komentáře za část skriptu. Konec skriptu nás vrátí do normálního HTML.

</SCRIPT>

Vložení skriptu do stránky

Abyste mohli používat skripty na svých stránkách, musíte vědět jak je do stránky vložit. Skript se vkládá mezi tagy <SCRIPT> a </SCRIPT>. V HTML stránce to potom může vypadat třeba takto:

  <script language="JavaScript" type="text/javascript">
  <!--
     alert("Ahoj světe!");
  //––>
  </script>

Skripty můžete ke stránce připojit i pomocí externího souboru. V tomto případě použijete parametr SRC s definicí URL skriptu. Takto připojené skripty mají obvykle koncovku .js:

<script language="JavaScript" src="mujsckript.js" type="text/javascript"></script>

Párový tag <SCRIPT> můžete na stránce použít kolikrát chcete. Nejlepší a nejsnadnější je však umístit celý skript na jedno místo a v jednotlivých částech stránky volat pouze funkce ve skriptu definované. (V některých vyjímečných případech budete muset skript rozdělit, abyste zajistili správné provedení skriptu.)

Při vkládání skriptu preferujte vložení pomocí externího souboru, což přináší značné výhody. Všeobecně se skript vkládá mezi tagy <HEAD> a </HEAD>. To zajišťuje, že skript bude připraven k použití ihned po načtení stránky. Sem je dobré vložit všechny funkce nebo skripty, které mají být funkční ještě před vlastním zobrazením stránky.

Jindy je třeba vložit skript mezi tagy <BODY> a </BODY>. Tento způsob vložení se používá, když skript generuje vlastní HTML obsah stránky.

Pro lehký úvod by to mohlo stačit. Příště si povíme něco víc o tagu <SCRIPT> a základech syntaxe. Snad se vám první díl líbil.