Dnes pokračujeme JavaScriptem, konkrétně jeho objekty a základními příkazy.
VESTAVĚNÉ OBJEKTY JAVASCRIPTU
JavaScript mí tři základní vestavěné objekty, z nichž každý má svoje vlastnosti i metody. Minule jsme se zmínili již o jednom takovémto objektu - objektu STRING (správně "string", nyní se podíváme na další dva - objekty DATE ("Date")a MATH ("Math"). Date se používá pro práci s datumem a časem, Math pro různé matematické operace.
Nejprve si vysvětlíme co je to vestavěný objekt JavaScriptu. Jsou to objekty, jež přímo nesouvisí s prohlížeči nebo jazykem HTML a jejich objekty (jako např. window), avšak byly přidány do jazyka JacaScript pro rozšíření jeho možností. Celkem rozlišuje tři typy objektů
1) objekty jazyka HTML - souvisí s prvky HTML a webovou stránkou (např. odkazy, seznamy, prvky formuláře atp.)
2) objekty prohlížeče - objekty umožňující pracovat přímo s browserem a jeho prostředím (např. objekty a metordy pro otevírání oken, práce s historií atp.)
3) a právě vestavěné objekty.
1. OBJEKT STRING (string)
V minulé části jsme se zmínili pouze o těch metodách objektu string, které pracovaly přímo s řetězcem samotným. Lze však využít i dalších metod, které vesměs formátují daný řetězec pro jeho zobrazení. Navíc je asi příliš často nevyužijete.
Ukážeme si malý příklad. Mějme již známou proměnnou Model, které jsme přiřadili řetězec Falcon030. Nyní si tento řetězec necháme vypsat např. tučně. Pokud tak budeme činit vícekrát za sebou v jednom dokumentu, je vhodné ulehčit si práci metodou >bold< objektu string. Proměnná "ModelB" tak bude reprezentovat řetězec "Falcon030" vypsán tučně:
Model = "Falcon030";
ModelB = Model.bold();
document.write(ModelB);
První řádek tedy přiřadil proměnné Model určitý řetězec, druhý řádek použil metodu >bold< k tomu, aby tento řetězec převedl na tučný a třetí řádek tento již tučný řetězec, který se umístil do proměnné "ModelB" vypsal na obrazovku. Veškeré další metody objektu string pracují podobně. Zde je jejich přehled:
* anchor() - převádí text na hypertextový odkaz, který je parametrem metody
* big() - převádí text na tučný (ekvivalent html značky <big></big>)
* bold() - to samé, ale ekvivalent html značky <b></b>
* fixed() - ekvivalent značky <tt></tt> (typewriter font)
* fontcolor() - barevné zvýraznění textu (ekvivalent html značky <font color>). Barva je uvedena jako parametr metody ve formátu RGB v hexadecimálním zápisu.
* fontsize() - nastavuje velikost textu (html značka <font size>). Velikost je uvedena jako parametr metody a může být 1 - 7 včetně.
* indexOf() - metoda vyhledává znak - uvedený jako její parametr - v příslušném řetězci. Je-li zadaný text nalezen, vrací metoda index tohoto znaku, jinak vrátí -1. Jako druhý parametr může být uveden index znaku (pořadí), od něhož se začne s prohledáváním.
* italics() - převádí text na kurzívu
* lastIndexOf() - jako "indexOf()", vyhledávání ale probíhá od konce řetězce
* link() - podobně jako metoda "anchor()" i tato metoda převádí text na hypertextový odkaz, tentokrát ovšem s parametrem HREF, který bude shodný s parametrem této metody.
* small() - převede řetězec na menší písmena (html značky <small></small>)
* strike() - přeškrtnutý text, html ekvivalent pro <strike></strike>
* sub() - dolní index
* sup() - horní index.
2. OBJEKT MATH (Math)
Objekt Math se používá pro různé matematické operace. Kromě metod, které představují běžné matematické funkce, obsahuje také některé standardní konstanty. Je neměnný (na rozdíl od Date) a vždy se odkazuje přímo na něj (u objektu string se odkazovalo přímo na proměnnou, která obsahovala objekt typu string).
var x=Math.PI;
document.write(Math.sin(x));
document.write(Math.cos(x));
První řádek tohoto jednoduchého příkladu deklaruje do proměnné "x" hodnotu konstanty PI. Druhý řádek pak vypisuje sinus 180 stupňů, tedy PI. V třetím řádkupodobně dostaneme i kosínus stejného úhlu.
Pomocí metod (matematických fnkcí) a vlastností (standardních konstant) lze provádět prakticky jakékoliv matematické operace. Nyní následuje abecední přehled základních matematických konstant a funkcí.
Vlastnosti (konstanty) objektu Math:
* E - e, základ přirozeného logaritmu (=2,71828)
* LN10 - logaritmus 10 o základu e (=2,30259)
* LN2 - logaritmus 2 o zákaldě e (=0,69315)
* PI - 3,141592653
* SQRT1_2 - druhá odmocnina z 1/2 (=0,7071)
* SQRT2 - druhá odmocnina ze dvou (=1,4142)
Metody (funkce) objektu Math:
* abs(x) - absolutní hodnota čísla x
* acos(x) - arkus kosinus čísla x (x je -1 do +1)
* asin(x) - arkus sinus čísla x (x je -1 do 1)
* atan(x) - arkus tangens čísla x
* ceil(x) - zaokrouhlí číslo směrem nahoru
* cos(x) - kosinus čísla x (radiány)
* exp(x) - exponent e na x
* floor(x) - zaokrouhlí směrem dolů (odsekne desetinnou část)
* log(x) - desetinný logaritmus čísla x
* min(x,y) - vrátí menší z hodnot x a y
* max(x,y) - vrátí větší z hodnot x a y
* pow(x,y) - mocnina x na y
* random(x) - náhodné číslo mezi 0 a 1
* round(x) - zaokrouhlí dle klasických pravidel
* sin(x) - sinus čísla x (radiány)
* sqrt(x) - druhá odmocnina čísla x
* tan()x - tangens čísla x; kotangens pouze jako obrácenou hodnotu tangentu.
Ještě malý příklad výpočtu obvodu kruhu (opět pomocí PI)
:
var r=2;
document.write(Math.PI * 2 * r);
3. OBJEKT DATE (Date)
Objekt date umožňuje pracovat s časem a datem. Počítá čas od magického roku 1970 a zobrazuje jej v běžné srozumitelné podobě. Na rozdíl od předchozích objektů string a Math nemá Date žádné vlastnosti, pouze metody.
Zkusme si hodnotu objektu Date vypsat:
document.write(Date());
Tím se vám zobrazí řetězec, který může vypadat nějak takto:
Sun Jul 15 12:30:48 2001
Myslím že je to celkem jasné (den, měsíc, čas, rok). Date má několik metod, které s tímto řetězcem umožňují různě pracovat. Avšak pozor! Objekt Date je třeba předtím, než s ním začneme něco dělat, přiřadit nějaké proměnné pomocí klíčového slova (konstruktoru) "new"! Příklad:
Datum = new Date();
Proč tomu tak je mi není zcela jasné, ale nevadí. Příkladem výše jsme si vytvořili proměnnou s názvem datum, která je vlastně dá se říci novým objektem. Je však prázdný, nemá žádné vlastnosti. Je tak spíše jakýmsi zástupcem, ukazatelem na objekt Date.
Základní metody objektu Date:
* getDate() - vrací číslo dne v aktuálním měsíci
* getDay() - vrací pořadové číslo dne v aktuálním týdnu (0-6, 0 je neděle)
* getHours() - vrací aktuální hodinu od 0 (=půlnoc) do 23
* getMinutes() - vrací aktuální minutu 0 - 59
* getMonth() - vrací číslo reprezentující měsíc v roce (0 = leden)
* getSeconds() - vrací aktuální sekundu mezi 0 a 59
* getFullYear() - vrací rok ve tvaru RRRR (1998, 2001)
* setDate(x) - nastaví den v měsíci (1 - 31)
* setHours(x) - nastaví hodinu (0 - 23)
* setMinutes(x) - nastaví minutu (0 - 59)
* setFullYear(x) - nastavní aktuální rok (RRRR)
Ukážeme si teď příklad, který na stránku vypíše aktuální čas ve tvaru HH:MM:SS.
datum = new Date();
hodiny = datum.getHours();
minuty = datum.getMinutes();
sekundy = datum.getSeconds();
cas = hodiny;
cas + = ((minuty < 10) ? ":0" : ":") + minuty;
cas + = ((sekundy < 10) ? ":0" : ":") + sekundy;
document.write(cas);
Co tento malý program dělá? V prvním řádku deklarujeme proměnnou datum, jakéhosi zástupce objektu date pro pozdější použití v dalších řádcích, druhém, třetím a čtvrtém, kde se do jednotlivých proměnných ukládají aktuální hodnoty (do proměnné "hodiny" se uloží kolik je právě hodin atp.). Pátý řádek přiřadí hodnotu proměnné "hodiny" jiné proměnné zvané "cas". V dalším řádku se pak k této hodnotě přidává hodnota proměnné "minuty" a následně ještě "sekundy". Funkce v závorkách znamená: jsou-li minuty či sekundy menší než 10, pak se vypíší s nulou před šíslem, tzn. jako :08 atp.; jsou-li však větší než deset, vypíší se normálně (s dvojtečkou před číslem, např. :28). Z toho nám v posledním řádku vznikne např.: 9:24:06
K dalším (složitějším) příkladům se dostaneme příště.
ZÁKLADNÍ PŕÍKAZY JAVASCRUIPTU
Dostáváme se na samotné příkazy JavaScriptu. Ty jak je zvykem pracují s různými parametry, jež zpracovávají. V programu jsou příkazy odděleny středníky, stejně jako všechny výrazy a operandy JavaScriptu. Nejprve si ukážeme výkonné příkazy, zbytek (příkazy pracující s funkcemi) příště.
1. Podmínka - IF
Podmínka je základní řídící strukturou programu. Na základě splnění nebo nesplnění podmínky program provede určenou operaci, to jistě všichni znáte.
Podmínku v JavaScriptu definuje příkaz IF. Podle něj se rozhoduje, zda je podmínk auvedená v parametru příkazu pravdivá nebo ne a podle toho se buď provede nebo neprovede příkaz, jenž následuje. Struktura příkazu >if< je následující:
if (výraz) příkaz;
Pokud je tedy výraz v závorce platný (true), bude proveden daný příkaz. A obráceně - jestliže >if< vyhodnotí výraz jako false, pak se příkaz neprovede.
if (model == "Falcon030") alert ("Gratuluji, máte Falcona");
Pokud bude mít proměnná "model" hodnotu "Falcon030", objeví se alert a nápisem jenž je uveden v závorce. Závorky okolo výrazu jsou nutné.
If však umožňuje provést i složenou podmínku, s více příkazy, viz dále.
if ((model == null) || (model =="")) {
model = "Model není znám/zadán";
alert("Zadejte model vašeho počítače");}
V tomto příkladu se provedlo jednak více příkazů byla-li podmínka splněna, jednak podmínku samotnou definují dva výrazy spojené logickým operátorem >or<. Každý z těchto výrazů je ohraničen závorkami a celý složený výraz je ohraničen ještě jednou, aby bylo jasné kde je začátek a konec. Celý blok příkazů, jenž se má provést je uzavřen do složených závorek (veškeré blokové příkazy či funkce se v JavaScriptu takto uzavírají).
Co však dělat, chceme-li provést příkaz i tehdy, není-li podmínka splněna? Jedno řešení se nabízí samo: druhý píkaz if s opačnou podmínkou než v prvním případě. To je ovšem celkem problematické. Proto je zde (jistě známý) tvar pro tato řešení:
if (výraz) příkaz1;
else příkaz2;
Je to velmi jednoduché a myslím i jasné. Pokud je výraz platný, provede se příkaz1, pokud je výraz false, provede se příkaz2.
If a else lze navíc i větvit (složená podmínka), tak jako v každém jiném programovacím jazyku:
if (výraz1);
if(výraz2) příkaz1;
else příkaz2;
else příkaz 3;
nebo:
if (výraz1);
if (výraz2) příkaz1;
else příkaz2;
else if (výraz3) příkaz3;
else příkaz4;
Tady jenom pozor na to, že příkaz >else< je součástí nejbližšího příkazu >if<, jinými slovy pozor na to ke komu co patří, jinak se snadno stane, že dané podmínky budou vyhodnocovány úplně jinak než jak jste si původně přáli.
2. Cyklus - WHILE
Příkaz >while< je základním příkazem, kterým JavaScript dovoluje provádět opakující se akce. Použije se např. tehdy, chcete-li provádět určitou akci tak dlouhou, dokud je nějaká podmínka splněna. Jakmile není, je cyklus přerušen a pokračuje se dále v programu. Syntaxe:
while (výraz) příkaz;
Místo jednoho příkazů však většinou v praxi následuje celý blok příkazů. Nejdříve je vyhodnocen výraz; je-li "false" je příkaz přeskočen a JavaScript porkačuje dalšímp říkazem v programu. Je-li však pravdivý ("true"), je proveden zadaný příkaz a poté je opět vyhodnocena podmínka zadaná ve výrazu. A celé se to opakuje až do té doby, kdy je výraz vyhodnocen jako nepravdivý.
Velmi jednoše tak lze vytvořit i nekonečnou smyčku, proto si dávejte pozor co tvoříte.
citac = 0;
while (citac < 10) {
document.write(citac + "<BR>");
citac ++;}
Tento jednoduchý prográmek vypisuje pod sebe čísla 0-9, tedy čísla menší než deset. Po každém vypsání se zvýší o jednotku. Jakmile je smyčka provedena desetkrát a čítač je větší nebo roven 10, cyklus skončí. Většina smyček cyklu while používá nějakou podobnou čítací proměnnou, která určuje počet provedených cyklů.
3. Cyklus - FOR
Druhým příkazem pro smyčku je známý příkaz >for<. Většina smyček obsahuje nějakou čítací proměnnou, která je inicializována před začátkem smyčky. Pak je testována jako součást výrazu, který se vyhodnocuje před každým opakováním smyčky. Na konci smyčky je tato čítací proměnná zvýšena o určitou jednotku (nějak změněna) předtím, než je výraz znovu vyhodnocen. Toto všechno - inicializace čítače, test výrazu a aktualizace čítače jsou tři rozhodující manipulace smyčkové proměnné. Příkaz for (na rozdíl od while) tohle všechno kombinuje v sobě:
for (inicializace čítače ; výraz ; změna čítače)
příkaz;
Následuje příklad stejný jako u while, ovšem za pomoci for:
for (citac = 0; citac < 10; citac ++)
document.write(citac + "<BR>");
Můžete si např. všimnou, že zde není nutné používat složené závorky kvůli příkazovému bloku.
Následuje příklad na výpočet faktoriálu:
for (var i = 1, f = 1; i <= 10; i++, f *= i);
document.write(i + "! = " + f + "<BR>");
A je to. Program zobrazí postupně faktoriál čísel 1 - 10 včetně.
Smyčky mohou být však mnohem složitější, zde jsou ukázány pouze jednodušší příklady. Dokonce se smí s každým opakováním smyčky měnit více než jedna proměnná - jednotlivé proměnné, jež se mají měnit, jsou odděleny čárkou, např.:
for (i = 0, j = 10 ; i < 10 ; i++, j-)
sum += i * j;
4. Přerušení cyklu - BREAK, CONTINUE
Cykly lze i předčasně ukončit - je-li to třeba - i jiným způsobem než je nesplnění podmínky. K tomu slouží příkaz >break<:
break;
Tento příkaz je určen pro cykly while a for, jinde jej nelze použít. Jeho základní funkcí je ukončení právě běžícího cyklu; řízení se předá následujícímu příkazu umístěnému za cyklem. Následuje příklad vyhledávání znaku v řetězci, po jehož nalezení je cyklus ukončen:
var text = "Atari forewer!";
var znak = "w";
for (i = 0; i < text.length; i ++) {
if (text[i] == znak)
break;}
Program bere jednotlivé znaky řetězce "text" zleva doprava a porovnává je s proměnnou "znak". Jakmile narazí na písmeno "w", skončí příkazem break. Pokud nic nenajde, ukončí korektně cyklus podmínku "i<text.length", tzn. že v řetězci už není žádné písmeno.
Jiným přerušením prováděného cykul je příkaz >continue<. Ten však neukončí běh celé smyčky a nepředá řízení dál, ale ukončí pouze provádění aktuálního cyklu a jde znovu na příkaz while nebo for:
continue;
Jak to funguje? Aktuální opakování uzavřeného cyklu je ukončeno a začíná nové. Pokud jde o smyčku while, je výraz ovlivňující běh smyčky znovu testován a je-li pravdivý, je tělo podmínky opět provedeno. U podmínky for je nejprve změněna čítací proměnná podle výrazu definovaného v těle příkazu for a teprve pak je výraz testován. Další opakování se provede, je-li výraz pravdivý, jinak cyklus končí.
Následující příklad použije příkaz continue k přerušení aktuálního opakování cyklu jestliže nastane chyba (zde když má daný výraz hodnotu null):
for (i = 0; i < pocet.length; i++) {
if (pocet[i] == null)
continue;
soucet += pocet[i];}
Příklad vychází ze skutečnosti, že přičtení hodnoty null k proměnné není možné. Proto je tomu příkazem continue zabráněno a cyklus pokračuje další proměnnou v pořadí, nejprve zvýšenou o jednotku. Toho samého efektu lze dosáhnout i takto:
for (I = 0; i < pocet.length; i++) {
if (pocet[i] != null)
soucet += pocet[i];}
Přičtení proměnné "pocet[i]" se provede pouze tehdy, jestliže se tato proměnná nerovná null.
5. Jednoduchá práce s objekty - WITH
Příkaz >with< slouží ke zjednodušení zápisu příkazů a operací pro práci s objekty. ŕíká, s jakým objektem se budou provádět následující operace. Syntaxe:
with (objekt)
příkaz;
Objekt specifikovaný v závorce příkazu with se prod alší operace v těle příkazu with stává implicitním, tzn. že všechny provedené operace se budou týkat tohoto objektu. Může zde být jak jeden příkaz, tak i blok příkazů umístěný do složených závorek. Příklad:
x = Math.sin(i * Math.PI);
y = Math.cos(i * Math.PI);
Zde se dvakrát vyskytuje příkaz Math. Použitím příkazu with lze zjednodušit:
with (math) {
x = sin(i * PI);
y = cos(i * PI);}
Myslím že je to jasné. Kdykoliv se v bloku příkazů příkazu with objeví nějaký identifikátor (proměnná atp.), zjišťuje JavaScript, zda není tento identifikátor metodou nebo vlastností objektu uvedeného v příkazu with. Pokud ano, pracuje s tímto objektem, pokud ne, pracuje s tímto identifikátorem tak, jak by pracoval normálně.
with (document) {
write(x);
write(y);
write(z);}
Tento příkaz zjednoduší častý výpis na stránku, metodu write objektu document.
Použití příkazu with je však poněkud složitější. Způsob vyhledávání identifikátorů není tak přímočarý. Proto odkazuji na rozšířenější odbornou literaturu; informace zde jsou dostačující pro začátečníky.
Konec čtvrté části. Příště funkce, objekty, ap.
Neznámý vojín