Úvod do JavaScriptu

Javascript je jedním ze základních prvků moderních webových aplikací. Jistě každý z Vás zná například poštovní službu Gmail, Google Docs či Seznam. V pozadí všech před chvílí jmenovaných webových projektů stojí totiž Javascript.

Díky novým technikám, například AJAXu (tento výraz si vysvětlíme v některém příštím díle) zažívá tento skriptovací jazyk opravdu renesanci. Pokud jste vytvářeli své projekty například za pomocí HTML či jiného jazyka a chyběla Vám ve Vašem díle určitá interaktivita či šikovný prvek, je na čase naučit se Javascriptu.

Co všechno můžete pomocí Javascriptu dělat? Tak například vyskakovací okna, interakci na chování formulářových prvků, posouvat předměty na ploše, vytvářet interaktivní galerii svých fotografií atd. využití Javascriptu je prostě obrovské.

Během mého předchozího povídání se objevilo několik výrazů, kterým nemusíte až tak rozumět, a proto si je postupně vysvětlíme. V tomto, a dalších článcích, se Vás pokusím seznámit se základy a také pokročilejšími rysy Javascriptu. Část článku bude rozdělena na povídání pro začátečníky a část pro pokročilé. Tak tedy pojďme na to…

Co je to Javascript

V úvodu jsem napsal, že Javascript je skriptovacím jazykem. Kdybych měl sáhnout do naučných definic, mohl bych také říct, že Javascript je multiplatformní, objektově orientovaný skriptovací jazyk.a) Co znamená slovo multiplatformní?Za slůvkem multiplatformní se neskrývá nic jiného, než ta skutečnost, že Javascriptu skutečně nevadí, na jakém operačním systému jej používáte. Takže svá díla můžete vytvářet jak na systému Windows tak třeba i MacOS X, Linuxu či jiném dalším.b) Co znamená slovo objektově orientovaný?Tady se mnou možná budete mírně polemizovat. Pokud jste někdy programovali například v C++, Javě, PHP či jiném jazyku, tak vám pojem objektově orientovaný nebude cizí. Celá filosofie tkví v tom, že daný kód se skládá z tříd, do kterých píšete jednotlivé metody a z výsledných tříd pak vytváříte objekt.

Programování objektově orientovaným stylem je možné i v Javascriptu, i když mnohé z objektově orientovaného programování v něm není implementováno a my si tak musíme vypomáhat námi vytvořenými metodami, například rozhraní či třída žádnou svou vestavěnou metodu nemá a my si tak musíme vypomáhat vlastní metodou, takovýchto případů je v Javascriptu mnoho, ale podrobnosti o objektovém programování v Javascriptu se dozvíte v dalších dílech.c) Co znamená „skriptovací jazyk“?Pomocí Javascriptu nevytváříte programy, ale skripty, odtud pochází ono slůvko skriptovací. Pokud budete chtít například v C++ vytvořit program tak ho po napsání kódové části musíte ještě pomocí určitých nástrojů přeložit do strojového jazyka a poté ho můžete spouštět.

Tyto kroky nejsou v Javascriptu nutné, prostě si napíšete svůj kód a můžete ho ihned používat, žádný překlad na strojový jazyk se zde nedělá. Takto vytvořené programové části se nazývají skripty.d) Javascript je Case sensitiveNázev Case sensitive, v sobě skrývá pouze to, že Javascript rozlišuje velká a malá písmena. Při psaní skriptů si na to musíte zejména ze začátku dát pozor.

Podívejme se na následující ukázku:

function funkce(){return „obsah funkce“;}
dokument.write(Funkce());

Vytvořili jsme funkci s názvem funkce a následně jsme chtěli vypsat její obsah, ale zřejmě omylem jsme napsali Funkce(), tedy velké počáteční písmeno, Javascript to bude brát tak, že voláme funkci, která není nikde vytvořená. Na toto si prosím dávejte pozor.

Jaký software na Javascript

Tady je odpověď velmi jednoduchá, prostě jakýkoli. Klidně Vám postačí obyčejný jednoduchý editor, jako je například v systému Windows Poznámkový blok, či PSPad, pokud byste chtěli editor, který Vám dokáže napovědět části syntaxe, tak klidně můžete použít freewarový Netbeans.

Výhoda tedy je, že vývoj Javascriptu Vás nemusí stát ani korunu. Všechny výše jmenované nástroje jsou zdarma, tedy jedná se o freeware.

Které prohlížeče podporují Javascript

Obecně se dá říct, že Javascript podporují všechny prohlížeče. Pokud bychom však zašli do větší hloubky, zjistili bychom, že některé prvky podporují jednotlivé prohlížeče různě. Pro Internet Explorer je mnohdy třeba volat speciální metody, používá třeba jiný postup atd.

Prohlížeče Firefox a Opera uznávají standardy mezinárodní, kdyžto Microsoft zase ty svoje a tím pádem je jasné, že mnohdy může dojít k menším problémkům, které se však většinou dají vyřešit.

Vytvoření skriptu

a) Zápis skriptu přímo na stránku HTML

<script language=“JavaScript“ type =“text/javascript“>
kód skriptu
<script>

Skripty můžeme vkládat přímo do stránky HTML, a to tak, že celý skript uzavřeme do tagu <script>. Pomocí atributu language sdělíme prohlížeči o jaký skriptovací jazyk se jedná.   Jde však o zastaralý atribut označený jako deprecated – zavržený. Zcela si tak vystačíme s atributem type, pomocí kterého sdělujeme o jaký typ informací se jedná.b) Vložení skriptu nacházejícího se v samostatném souboru do dokumentu HTMLDaleko lepší, a i profesionálnější, přístup je uložit si skript do samostatného souboru a ten pak naimportovat do stránky HTML.

Postup je velmi jednoduchý, prostě si otevřete třeba Poznámkový blok a začnete psát skript, například takto:

function moje_funkce(){alert(„Ahoj“);}
moje_funkce();

Jak vidíte, do souboru nepíšete nic jiného, než ten příkaz, který chcete vykonat, smyslem tohoto demonstrační ukázky je, že funkce po načtení stránky HTML zobrazí vyskakovací okno s pozdravem Ahoj, pokud Vám smysl skriptu uniká, nezoufejte, vše si v dalších dílech podrobně vysvětlíme.

Soubor uložte pod názvem muj_skript.js
Důležitá je koncovka toho souboru, tím js uvádíte, že se jedná o javascriptový kód.

Soubor muj_skript.js naimportujete do HTML stránky tak, že do tagu head umístíte následující zápis:

<script src=“muj_skript.js“ type=“text/javascript“>

Výsledně by tedy vše vypadalo takto:

<html>
  <head>
  <title>Moje stránka</title>
  <meta http-equiv=“Content-Type“ content=“text/html; charset=UTF-8″>
  <script src=“muj_skript.js“ type=“text/javascript“>
  </head>
  <body>
  </body>
</html>c) Vložení skriptu do odkazuMmohdy se může stát, že potřebujete vložit jednoduchý skript do odkazu na stránce, podívejme se tedy na příklad:

<a href=“javascript:alert(‚Javascriptová hláška!!‘);“>Klikni zde, obsahuji Javascript.</a>

Nejlepším způsobem vkládání Javascriptu je naimportování podle bodu b, oddělíte tím Javascript od ostatního kódu; tím zpřehledníte a zkomfortníte si tak svou práci.

Omlouvám se za mnoho teorie, příští článek bude obsahovat více praktických ukázek a méně teorie.

Jiří Šarišský
Latest posts by Jiří Šarišský (see all)

Související příspěvky:

Element a komentáře Martin Schlemmer (Retal) – rozhovor Český hosting aneb kozy táhnou HTML a odkazy