Minule jsme dokončili kaskádové styly a pár řádkami začali JavaScript. Dnes budeme pokračovat vysvětlováním základních principů a proměnných JavaScriptu.
PROMĚNNÉ a VÝRAZY
Základem každého programovacího jazyka jsou příkazy (klíčová slova), které řídí program a udávají, co má interpreter (prohlížeč) udělat, a proměnné, podle nichž se řídí příkazy a chování programu v určitých situacích.
Proměnné jsou určitá místa v paměti, která mají svoji hodnotu. Každá proměnná má definován svůj název. Další vlastností proměnných je to, že nemají konstantní hodnotu - hodnoty lze kdykoliv během programu měnit. V danou chvíli je hodnotou proměnné konstanta; tou může být konkrétní číslo či řetězec. Příklad těchto konstant:
Číselné konstanty:
3,14
-8,54209
0,333333333333
7,04e+19
6,7382E-28
ŕetězcové konstanty:
"A1"
"3,14"
"Jakýkoliv text"
JavaScript nemá předem definován typ proměnných, proto se číselné i řetězcové konstanty odlišují uvozovkami. Místo nich lze někdy použít také apostrofy, já budu používat uvozovky.
1. Nabývání hodnot proměnných
Proměnná získá hodnotu přiřazením nějaké konstanty, jiné proměnné, nebo výsledku určité operace. Takže pokud chcete, aby proměnná >a< měla hodnotu >24<, provedete to následovně:
a = 24;
Velice jednoduché. Další příklad přidá k proměnné >a< další konstantu a výsledek nechť se zove >bb<:
bb = a + 9;
Opět velice jednoduché. Důležitý je však středník na konci řádku. Ten se používá v JavaScriptu vždy pro oddělení jednotlivých příkazů a operací. Pokud pro každý takovýto příkaz použijete nový řádek, není středník nutný (ale zase není na závadu), pokud byste psali příkazy za sebou do řádku, pak středník pro jejich oddělení nutný je, viz příklad:
a = 24; bb = a + 9;
Nyní je třeba si ještě zběžně ukázat rozdíl mezi globální a lokální proměnnou. Globální proměnná je definována v celém programu, tzn. že platí ve všech funkcích a procedurách, stejně jako v hlavní části programu. Může být pouze jedna stejného jména.
Lokální proměnná má platnost omezenu lokálně, na určitý úsek programu, např. na jednu funkci, proceduru nebo podprogram. S lokální proměnnou se pracuje pouze na úrovni funkce, nikoliv na úrovni programu jako s proměnnou globální. Lokální proměnná existuje pouze tehdy, je-li prováděna funkce; jakmile je její provádění u konce, lokální proměnná zanikne. Pokud nadefinujete lokální proměnnou se stejným názvem jako má nějaká globální proměnná, bude se uvnitř funkce pracovat s touto lokální proměnnou, mimo danou funkci pak s tou globální; obě budou mít jiné hodnoty.
2. Definice proměnných
Na začátku JavaScriptu je dobrým zvykem proměnné deklarovat, tedy říci vlastně prohlížeči, že dané proměnné budou používány a mají určité počáteční hodnoty. Tato deklarace však není nutná, proměnná se totiž vždy vytvoří v okamžiku jejího prvního použití.
Pro deklaraci proměnných používá JavaScript příkaz
var
což bude vypadat následovně:
var a;
var bb;
var a, bb;
Poslední příkaz definuje více proměnných naráz. Pomocí >var< však lze kombinovat deklaraci proměnných i s nastavením nějaké hodnoty:
var a = 24;
Jediným případem, kdy je nutné >var< použít, je případ, používáte-li lokální proměnnou uvnitř definice funkce a název proměnné je shodný s nějakou globální proměnnou. Pokud byste použili tuto proměnnou bez její deklarace, JavaScript by ji vyhodnotil nikoliv jako lokální, ale jako tu globální. Obejít to lze tím, že nebudete pro globální a lokální funkce používat stejné názvy.
3. Proměnné bez určitého typu
Podstatným rozdílem mezi JavaScriptem a např. Céčkem či Pascalem (ale i Javou), je fakt, že JavaScript nemá typové proměnné, tedy že proměnné mohou mít hodnotu jakéhokoliv datového typu (číslo, řetězec, pole). V JavaScriptu tak lze proměnné přiřadit např. číslo a poté třeba řetězec:
a = 24;
a = "dvacet čtyři";
Díky tomu není nutné při deklaraci proměnných specifikovat její datový typ.
Dalším zajímavým rysem JavaScriptu je skutečnost, že hodnoty proměnných se automaticky konvertují z jedné na druhou, viz příklad:
a = "Motorola ";
b = 68000;
c = a + b;
Zatímco v jiných jazycích by toto okamžitě signalizovalo chybu, v JavaScriptu se číslo - hodnota proměnné b - převede na řetězec a do proměnné >c< se tak uloží hodnota "Motorola 68000".
4. Základní typy hodnot proměnných
Proměnné mají několik základních a obecných datových typů.
4.1 Čísla:
Čísla jsou nejjednoduším datovým typem. Mohou být celá nebo s pohyblivou (desetinnou) čárkou. JavaScript však nedělá rozdíl mezi celým číslem a číslem s desetinnou čárkou. Všechna čísla jsou tak v JavaScriptu uložena jako hodnoty s pohyblivou čárkou (8 Bytů) a jsou tak i znázorněna. Číslo je tedy i toto:
3,5223485905325426*10-206,11
4.2 ŕetězce
ŕetězec je sada libovolných znaků spojených v jednu řadu. ŕetězce se označují buď apostrofy nebo uvozovkami. Stejně jako čísla, i řetězce lze sčítat (slučovat):
text = "Atari " + "forever";
vygeneruje text "Atari forever". Nebo podobně:
nazev = "Narsil";
vypis = "Nejlepší je" + " " + nazev;
Výsledkem bude pochopitelně řetězec "Nejlepší je Narsil". JavaScript však umí s řetězci daleko více, např. vyhledávat určité znaky, odstraňovat slova, převracet text atp. To se naučíme později.
4.3 Logické hodnoty
Logické hodnoty (boolean) definují dva stavy: pravda (true) a nepravda (false). Používají se k vyhodnocení porovnání hodnot proměnných, na jejich základě se pak program dále větví. Takto lze např. zjistit, zda se hodnota proměnné >a< rovná 24:
a == 24
Pokud se hodnota >a< opravdu rovná 24, pak je výsledkem porovnání logická hodnota >true<. Je-li tomuj inak, je výsledkem >false<. Zde je nuté vysvětlit si formu porovnávacích operátorů:
Rovnost (==) - vrací hodnotu true, jsou-li si dva operandy rovny, jinak vrací false. Operandy mohou být jakéhokoliv typu, proměnné jsou si pak rovny pouze pokud obsahují stejnou hodnotu, řetezce pokud obsahují stejné znaky.
Nerovnost (!=) - opak předchozího. Vrací true, jestliže se porovnávané hodnoty liší.
Menší než (<) - vrací true, je-li první operand menší než druhý.
Větší než (>) - opak předchozí.
Menší nebo rovno (<=) - vrací true, je-li první operand menší nebo stejný jako operand druhý.
Větší nebo rovno (>=) - analogicky obráceně.
Pozor proto na (=), jenž slouží pro přiřazení hodnoty některé proměnné.
4.4 Pole
Pole je dosti specifickou proměnnou, je spíše souborem proměnných jakéhokoliv datového typu. Může to být např. několik čísel poskládaných za sebou. Každé takovéto číslo má svůj index, kterým se označuje (jméno je společné pro celé pole). Indexy vždy začínají nulou, budeme-li tedy mít pole s názvem "Rok", jenž bude definovat 12 měsíců, tak každý měsíc bude očíslován indexem 0 - 11 (0 = leden, 11 = prosinec). Obecný zápis v JavaScriptu potom bude vypadat takto:
rok[n]
Pokud budete chtít pracovat (ukázat na) s červnem, řeknete to JavaScriptu následovně:
rok[5]
Hodnota proměnné >rok< přitom může být jakéhokoliv datového typu.
4.5 Speciální datový typ
Tímto speciálním typem je myšlena hodnota, která vlastně není hodnotou, je prázdná (nikoliv nula!) a zove se NULL. Někdy je totiž třeba definovat proměnnou, která nemá žádnou hodnotu. Té se pak přiřazuje tato speciální hodnota null. Hodnota null není ani číslo, ani řetězec, ani objekt (kdežto nula je číslo a prázdný řetězec je taky řetězec).
4.6 Objekty
JavaScript je objektově orientovaný jazyk a objekty jsou nutné pro pochopení jeho práce. Objekt je dalším specifickým datovým typem, souborem pojmenovaných dat. O pojmenovaných datech objektu hovoříme jako o vlastnostech objektu. Zatímco na pole se odkazuje indexem, na vlastnost objektu se odkazuje TEČKOU, která je umístěna mezi objektem a jeho vlastností. Následuje příklad. Mějme objekt >window<, tedy objekt okna prohlížeče, na jednotlivé vlastnosti pak můžeme odkazovat takto:
window.document
window.history
window.status
Window je tedy daný objekt a document, history a status jsou jeho vlastnosti. Tyto vlastnosti se v mnoha ohledech chovají jako proměnné JavaScriptu a mohou obsahovat jakýkoliv typ dat (včetně polí, funkcí i jiných objektů). Pokud je ve vlatnosti objektu uložena funkce, nazývá se metodou. Tak máme třeba objekt >document<, jenž má definovánu metodu >write<, která vypíše do okna prohlížeče zadaný text. Proč do okna? Protože >document< je i vlastností objektu >window<. Jelikož to ale prohlížeč ví, není třeba objekt >window< již uvádět:
document.write("Jakýkoliv libovolný text");
Podrobněji se k objektům dostaneme někdy příště.
5. Operátory
Aby bylo možné vyhodnocovat výrazy a získat tak nějakou hodnotu, je nutné použít operátory; známe číselné, porovnávací a logické.
5.1 Aritmetické operátory (matematické, číselné)
Tyto operátory definují základní matematické operace. Zde je jejich přehled:
Sčítání (+) - pokud jsou operandy čísla, budou sečteny; pokud jsou oba řetězce, složí je dohromady. Pokud je jen jeden řetězec, druhý je zkonvertován na řetězec a tyto dva jsou pak spojeny.
Odečítání (-) - odečte druhé číslo od prvního.
Násobení (*) - násobí dvě čísla.
Dělení (/) - dělí první číslo druhým. Výsledkem je vždy číslo s pohyblivou čárkou.
Modulo (%) - vrací zbytek po celočíselném dělení; např. 5%2 dává 1 a 4%2,2 dává 0,1.
Unární negace (-) - z kladného čísla udělá záporné a naopak.
Inkrement (++) - zvyšuje hodnotu proměnné o jednotku.
Dekrement (--) - odečte od proměnné jednotku.
5.2 Porovnávací operátory
Tyto operátory srovnávají různé hodnoty a v závislosti na výsledku vrací logické hodnoty true nebo false. Jejich přehled najdete v kapitole 4.3 výše.
5.3 Logické operátory
Ty vyhodnocují splnění několika podmínek naráz, provádějí na nich tzv. logickou algebru. JavaScript zná tyto 3 základní operátory:
and (&&) - vrací true pouze tehdy, mají-il oba operandy hodnotu true, čili musí platit oba najednou. V opačném případě vrací false.
or (||) - vrací true pokud alespoň jeden z operandů má hodnotu true. Pokud tomu tak není, vrátí false.
not (!) - vrací hodnotu true tehdy, má-li operand hodnotu false; pokud má operand hodnotu true, vrací false.
Tolik k operátorům. JavaScript jich má samozřejmě více, ale tyto jsou základní a ve většině případů s nimi vystačíte.
6. Práce s texty
ŕetězec je jedním ze základních datových typů nejen JavaScriptu. Pro práci s řetězci má JavaScript k dispozici vestavěný objekt >STRING<, který má definováno několik metod a jednu vlastnost, jež dokáží hodně usnadnit práci. Obecný zápis vypadá takto:
string.metoda()
string.vlastnost
Metoda může nabývat některé z těchto nejběžnějších hodnot:
substring() - vrací část řetězce definovanou číslem prvního a posledního požadovaného znaku.
charAt() - vrací požadované písmeno řetězce.
toLowerCase() - převede řetězec na malá písmena.
toUpperCase() - převede řetězec na velká písmena.
Jen upozorňuji na používání velkých a malých písmen v názvech, je to velice důležité. charAt() tak musí vypadat přesně takto, nelze např. Charat() ani CharAt().
Vlastnost může nabývat této hodnoty:
length - zjistí délku řetězce; hodnotou této vlastnosti je číslo.
Přes objekt string se neprovádí slučování řetězců, k tomuto účelu se používá sčítání (viz výše).
6.1 Zobrazení hodnoty řetězce
Abyste si mohli zjistit, jakou hodnotu má řetězec po operaci s určitou metodou, musíte si jej vypsat na obrazovku. V JavaScriptu existují dva základní způsoby:
a) vypsat požadovaný řetězec přímo do okna prohlížeče
b) vypsat řetězec do dialogu (resp. alertu).
První způsob vypadá následovně:
document.write();
Jednoduché. Jde o objekt document (tedy obsah stránky) a metodu write (což je funkce, která vypíše data obsažená v závorkách). Metoda write však nevypisuje jen čistý text nebo obsah proměnné, ale obsahuje přímo zdrojový kód html, který se pak běžně zobrazí. Ukážeme si to na příkladech:
document.write(celkem);
- toto vypíše do okna dokumentu hodnotu proměnné >celkem<. Můžeme si však tento výsledek nechat vypsat i tučně:
document.write("<b>",celkem,"<b>");
Formát zápisu je myslím dobře znatelný, pro jistotu ještě pár ukázek:
document.write("Narsil forever!<br>");
document.write("<i>Atari forever.</i><br>");
document.write("<h2>Ať je síla s vámi!</h2>");
document.write("<font size=-1>",celkem,"</font>");
Metodě write tak můžete předat jakýkoliv zdrojový text html.
Druhým zmíněným způsobem je vypisování řetězce do alertu. Použijeme zde metodu ALERT objektu WINDOW:
window.alert(celkem);
Toto vypíše hodnotu proměnné celkem do alertu. Ovšem jak již víme, není nutné definovat, že se jedná o objekt window, takže běžně zkracujeme:
alert(celkem);
Tady již nemůžeme využívat různých fajnovostí html, musíme se spokojit s běžným textem.
6.2 Zjišťování délky řetězce
Ukážeme si na příkladech. Mějme tedy řetězec "Falcon030". Přiřadíme jej proměnné >Model<:
Model = "Falcon030";
Nyní snadno zjistíme jeho délku použitím vlastnosti length:
document.write(Model.length);
Dobře si to prohlédněte, podobně se zapisují i ostatní metody a vlastnosti JavaScriptu, je třeba to pochopit. Nejprve máme daný objekt, kterého se to týká (document). Pak jeho metodu (write, tedy výpis do dokumentu). Tato metoda má v závorkách udáno, co bude dělat, tedy vezme proměnnou Model a vlastností řetězce length zjistí její délku.
V okně dokumentu se pak vypíše celé číslo (v našem případě 9) udávající počet znaků v řetězci.
6.3 Získání části řetězce
Chceme-li získat z řetězce jen určitou část, použijeme metodu substring objektu string (zmíněnou výše). Parametry této metody jsou počátek a konec řetězce (a samozřejmě proměnná, které se to bude týkat). Obecně:
string.substring(od, do);
Nyní použijeme naši proměnnou Model:
document.write(Model.substring(3,7));
Toto vypíše do stránky řetězec "con0". Zde pozor! Možná si řeknete, že spíše by mělo být vypsáno "lcon0". ŕetězec definovaný metodou substring však začíná o jeden znak dále, než je zadáno parametrem >od<, ale končí na té pozici, která byla zadána >do<. Na to je třeba si dát dobrý pozor. Proto v našem případě bude vypsán řetezec od 4. do 7. znaku (včetně, tedy celkem 4 znaky).
JavaScript nemá také funkci pro ořezání řetězce zprava. Tuto supluje také metoda substring:
document.write(Model.substring(Model.length-3));
Je to možná trošku nešikovné a rozhodně to nepřispívá k průhlednosti JavaScriptu, ale je to jediná možnost. Často se využije, uřezáváte-li koncovku, proto je dobré se na to podívat. Do stránky takto bude vypsán řetězec "030". Chcete-li získat znaky zleva (řetězec "Falcon"), použijete:
document.write(Model.substring(0,6));
Ještě zpět k ořezávání zprava. Zápis může být matoucí i z toho důvodu, že zde není parametr >do<. Tím je automaticky konec řetězce. Pro lepší názornost si tak můžete v duchu představit ...(Model.length-3,9)).
6.4 Získání jednoho znaku řetězce
Abychom nemuseli při potřebě získat pouze jeden znak používat metodu substring, je zde metoda charAt. Její hodnotou je jedno písmeno daného řetězce, na něž je odkázáno:
document.write(Model.charAt(6));
Toto vypíše do okna dokumentu písmeno "n" (šesté písmeno z řetězce Falcon).
6.5 Převod na malá a velká písmena
Potřebujete-li převést celý řetězec na všechna malá nebo všechna velká písmena, použijete k tomu tyto metody objektu string:
toLowerCase(); - všechna malá
toUpperCase(); - všechna velká
Funkce nepotřebují žádné parametry, závorky tedy budou prázdné (nikdy je ale nelze vynechat).
Jak tedy budeme převádět? Viz příklady:
Velka = Model.toUpperCase();
- převede řetězec "Falcon030" na "FALCON030".
Mala = Model.toLowerCase();
- převede řetězec "Falcon030" na "falcon030".
Mala2 = Velka.toLowerCase();
- převede řetězec "FALCON030" na "falcon030". A pak jej můžeme vypsat:
document.write(Mala2);
Tolik k řetězcům a pro dnešek i k JavaScriptu.
Konec třetí části.
Neznámý vojín