JavaScript je často zaměňován s Javou. Java je samostatný programovací jazyk. Má s JavaScriptem pouze podobnou syntaxi

Okruhy k absolutoriu

JavaScript

Co je JavaScript JavaScript je programovací jazyk, který se používá v internetových stránkách. Zapisuje se přímo do HTML kódu, což je velká výhoda, protože je to jednoduché. JavaScript je klientský skript. To znamená, že se program odesílá se stránkou na klienta (do prohlížeče) a teprve tam je vykonáván. (Protikladem klientských skriptů jsou skripty serverové, které jsou vykonávány na serveru a na klienta jdou už jen výsledky.)

Existují i jiné jazyky klientských skriptů, například VBScript. Jsou ale tak málo používané, že když se dnes mluví o "skriptech", myslí se tím JavaScripty.

JavaScript není Java JavaScript je často zaměňován s Javou. Java je samostatný programovací jazyk. Má s JavaScriptem pouze podobnou syntaxi.

Čte se to různě Někdo čte javascript s j, někdo s dž na začátku. Oboje je používané. Já to čtu většinou [džavaskript], ale hodně to střídám a málokdy si všimnu, jak jsem to vlastně řekl. V angličtině se to vyslovuje [džev'skript].

Co je potřeba umět 

HTML, alespoň základy



základy programování, alespoň trochu

Charakteristiky jazyka JavaScript je jazyk 

interpretovaný -- nemusí se kompilovat



objektový -- využívá objektů prohlížeče a zabudovaných objektů



závislý na prohlížeči -- funguje ale ve většině prohlížečů



case sensitivní -- záleží na velikosti písem v zápisu



syntaxí podobný jazykům C, Java a podobným

Omezení jazyka 

JavaScript funguje pouze v prohlížeči. -1-

Okruhy k absolutoriu

JavaScript



Uživatel může JavaScript zakázat



Existují různé odlišné verze jazyka i prohlížečů, což vede k častým chybám.



Neumí přistupovat k souborům (kromě cookies) ani k žádným systémovým objektům.



Neumí žádná data uložit (kromě cookies).

Začlenění skriptu do stránky Tři způsoby zápisu 1. Pomocí tagu <script> normálně do proudu dokumentu. 2. Tagem <script> s odkazem na externí soubor 3. In-line (řádkový) zápis jako atribut tagu bez použití tagu <script> Pro začátek nemusíte umět všechny způsoby, stačí ten první. Chcete-li se naučit skriptovat rychle, tuto stránku přeskočte a později se k ní vraťte.

Normálně do HTML kódu Skript se vloží mezi značky <script> a . Tento způsob je asi nejčastější a byl použit i na stránce prvních příkladů tohoto kurzu. Příklad normálního začlenění skriptu, který zobrazí povzbuzující okénko: <script> alert('Hlavu vzhůru, bude hůř!');

Skript se může objevit kdekoliv v HTML kódu -- jak v hlavičce, tak v těle dokumentu. Prohlížeč pak skript zpracovává okamžitě, jakmile na něj narazí.

Externím souborem Program v JavaScriptu se dá uložit i do jiného souboru a potom ho do stránky načítat. Příklad: Do souboru externi_skript.js uložím toto: document.write("Toto napsal externí Java Script");

Do stránky, do které pak chci skript vložit, vložím tento kus HTML kódu: <script src="externi_skript.js">

Stane se to samé, jako bych ten skript vypsal mezi tagy <script>. Zobrazte si příklad použití externího skriptu. Obliba skriptů v externích souborech je velmi široká. Nejčastěji se to používá k načítání stejného skriptu do různých stránek, což je netušená zbraň.

In-line zápis In-line znamená "v řádku" a je to třetí způsob začlenění JavaScriptu do HTML stránek. Nevyužívá tag <script>, ale zapisuje se jako atribut jiného tagu. Většinou reaguje na nějakou uživatelovu událost. Raději ukážu příklad: Městský úřad Slaný

-2-

Okruhy k absolutoriu

JavaScript

Příklad ukazuje normální odkaz (tag ) s textem Městský úřad Slaný. Důležitý je tam ten atribut onmouseover, což znamená "při přejetí myší". No a při přejetí myší se spouští ten skript, co je zapsán jako hodnota atributu. Všimněte si, že v in-line zápisu je nutno používat apostrofy místo uvozovek (protože uvozovky by zakončily zápis skriptu). A takhle to vypadá, zkuste si přejet myší: Městský úřad Slaný Onmouseover je jednou z událostí, kterých existuje asi tucet. Bez existence událostí by in-line zápis skriptu nedával smysl.

href="javascript:..." Jiný in-line způsob nepoužívá události, ale odkazů. Místo adresy cíle (URL) ale začíná textem "javascript: a následuje program". Např. Skript

Namísto přechodu na jinou adresu se prostě provede skript. Ukázka: Skript Tento způsob začlenění scriptu se moc nedoporučuje.

Kombinace způsobů Všechny způsoby začlenění skriptů do stránky jsou sice rovnocenné, ale v různých případech různě výhodné. V naprosté většině složitějších skriptů se tedy způsoby kombinují, protože je to efektivní. Sami jistě chápete, že například zapisovat příliš dlouhý in-line skript vede k chybám a zmatku, takže se in-line zapisuje většinou jenom volání funkcí, které jsou definované dříve. Nejčastější způsob kombinace: 

externím skriptem jsou definovány funkce



normálním zápisem (pomocí <script> ) jsou inicializovány proměnné a startovní funkce



in-line skripty volají funkce podle událostí v závislosti na reakcích uživatele

Deklarace proměnných Příklad: <script> var x = "Obsah proměnné"; document.write(x);

Tento příklad s jednoduchou proměnnou si můžete zobrazit v prohlížeči. Výstup je jednoduchý: Obsah proměnné

Vysvětlení skriptu Předpokládám, že každý už pozná, kde začíná a končí skript (tagy <script>).

-3-

Okruhy k absolutoriu

JavaScript

Názvem proměnné může být libovolné slovo (s výjimkou několika klíčových slov jazyka). Záleží na velikosti písmen. V JavaScriptu je dobré proměnné deklarovat. Na deklarování slouží klíčové slovo var následované výpisem použitých proměnných. Ale nemusí se to dělat. Proměnná použitá v příkladu má jméno x. Do proměnné x je načtena hodnota "Obsah proměnné", která je dalším příkazem document.write zapsána do proudu dokumentu. Všimněte si, že v příkazu document.write(x) už není to x obaleno uvozovkami, protože se jedná o proměnnou. Kdyby tam ty uvozovky byly, tak to vypíše x namísto Obsah proměnné. document.write(x); /* vypíše Obsah proměnné */ document.write("x"); /* vypíše x */

Počítání s proměnnou Proměnné se inicializují při prvním přiřazení hodnoty (což doporučuji udělat hned při deklaraci). Není třeba deklarovat typ proměnné (číslo, text apod.), JavaScript určí typ proměnné automaticky podle obsahu (řetězec, číslo nebo logická hodnota). Je to velmi pohodlné. S proměnnými se dají dělat normální výpočty. Syntaxe je v jednoduchých případech zřejmá. Příklad: <script> var y, text; y = 13; y = y * 2 * 7 * 11; text = "Hezké číslo je " + y; document.write(text);

Příklad výpočtů s proměnnými si můžete zobrazit. Program by měl vypsat Hezké číslo je 2002. Používají se zde dvě proměnné y a text; 

y je proměnná číselná,



text je proměnná textová.

Je zde vidět i příklad automatické konverze -- k textovému řetězci se přičte číslo (v proměnné y), které se přitom automaticky převede na řetězec.

Poznámka o velikosti písem JavaScript je jazyk case-senzitivní, to znamená, že v něm všude záleží na velikosti písmen (na rozdíl od HTML). Je na to třeba dávat pozor zejména u jmen proměnných. Takže například proměnná x je různá od proměnné X. Pokud vám přijde, že to zdůrazňuji zbytečně často, při zoufalém ladění chyb poznáte, že to zdůrazňuji málo. :-)

Textové proměnné Všechny proměnné typu text musejí mít hodnoty zadané v uvozovkách nebo v apostrofech. Apostrofy je nutno použít, pokud se celý skript nachází v uvozovkách (in-line zápis). Např.: ...

Jak dostat do proměnné dostat nějaký znak, který by Javascript pochopil jako součást programu? Například uvozovky? Znaku se předřadí zpětné lomítko. Např: -4-

Okruhy k absolutoriu

JavaScript

promenna = "Obsah"; document.write( promenna );

Tento prográmek by vypsal text, který by byl pochopen jako odkaz. To zajímavé je použití zpětných lomítek pro vypsání uvozovek. V tomto případě by se náhodou problém dal řešit také těmi apostrofy: promenna = "Obsah"; document.write( promenna );

Logické proměnné Do proměnné se dá uložit pravda nebo nepravda. To je moc výhodné (zejména se to ocení při větvení programu, protože se zkrátí zápis). Pro logické hodnoty existují v JavaScriptu dvě klíčová slova true a false. Zapisují se bez uvozovek. Např. takmer = true; ozaj = false;

Základy syntaxe JavaScriptu Příkazy se oddělují středníkem nebo koncem řádku jeden příkaz; další příkaz další příkaz který ale nemůže pokračovat na dalším řádku;

V praxi se doporučuje středníky používat, protože přidávají přehlednost.

Záleží na velikosti písmen Všude. V názvech proměnných, v názvech objektů. Proměnná je něco jiného než proměnná. Objekt window.Location je špatně, protože tam má být window.location.

Řetězce se uzavírají do uvozovek Přípustné jsou i apostrofy (na české klávesnici Alt + 39). Je to jedno, zda se použije apostrofy nebo uvozovky. Někdy jsou apostrofy nutné, zejména při in-line zápisu.

Při přejetí obrázku se zobrazí hláška s textem AHOJ. Jindy je třeba využít escape sekvencí.

Escape sekvence Pokud je nějaký speciální znak, který JavaScript interpretuje, potřeba zapsat do stránky, musí se využít tzv. escape sekvence. Před ten znak se napíše zpětné lomítko. Nejčastěji se to používá u uvozovek. Předchozí příklad lze zapsat i takto:

Logické hodnoty JavaScript zná speciální hodnotu pro pravdu: true a pro nepravdu: false. -5-

Okruhy k absolutoriu

JavaScript

Další pravidla Objekty a jejich metody a vlastnosti se oddělují tečkami: objekt.podobjekt.vlastnost Programové sekvence se uzavírají do složených závorek {} (zejména při větvení a deklaraci funkcí).

Operátory Operátory vycházejí z jazyka Java nebo C. Kromě níže uvedených existují ještě bitové operátory, které se ale skoro nepoužívají.

Operátory přiřazení Slouží k nastavení hodnot proměnných. Normálně by stačilo jenom =, ale používají se i jiné operátory. = +=

přiřazení přičtení

*= , -=, /

přinásobení, odečtení, "přidělení"

++

přičtení 1

Například a += 4

je to samé a=a+4

b ++

b=b+1

Početní operátory + sčítání, spojování řetězců - odčítání, unární negace * násobení /

dělení

Logické operátory ==

rovnost (dvě rovnítka)

!=

nerovnost aritmetické srovnání (teď nevím, jestli tam je

<,<=,>=,>

>= nebo =>)

&&,||

logické AND (a zároveň), logické OR (nebo)

!

logické NOT (negace)

?:

podmínkový výběr (ternální operátor) logické spojení (třeba v zápisu parametrů

,

funkcí) -6-

Okruhy k absolutoriu

JavaScript

Logické operátory se používají zejména při větvení programů na stanovení podmínek. Podmínky nabývají hodnot true (pravda) a false (nepravda). Zejména je třeba upozornit na dvě rovnítka (zjišťování rovnosti). Kdyby se použilo jenom jedno, tak by to znamenalo přiřazení. Jedná se o nejčastější a nejhůře odhalitelnou chybu.

Větvení Základní způsoby větvení a cyklů v JavaScriptu jsou příkazy if, while a for. if(podmínka) {program}

jestliže je splněna podmínka, vykonává se program

while(podmínka) {program}

program se opakuje, dokud trvá podmínka

for(iniciace; podmínka; navýšení){program}

cyklus (vykonávaný většinou přesně několikrát)

if if(podmínka) { příkazy prováděné při splnění podmínky; } else { příkazy prováděné při nesplnění podmínky; }

Jako podmínka se musí uvést výraz, jehož logická hodnota je true nebo false (pravda nebo nepravda). Např.: if (volby == "svobodne"){ document.write("Možná máme demokracii"); pokracovat = true;} else { document.write("Máme diktaturu"); pokracovat = false;}

Zápis je ve většině případů jednodušší. Např.: if (puntiku != 12) document.write("Nemáme celý ciferník!");

Jak je vidět, pokud je příkaz jenom jeden, nemusí se uzavírat do složených závorek. Také lze vynechat else, není-li potřeba. Časté chyby u if: 

špatný zápis podmínky (pro rovnost se musejí používat dvě rovnítka)



chybějící středníky nebo složené závorky



nadbytečné středníky



mezery většinou nehrají v zápisu roli

rozhodovací operátor ? : Ternální operátor umožňuje rychlejší zápis rozhodování, pokud chci pouze přiřadit hodnotu proměnné. Syntaxe: -7-

Okruhy k absolutoriu

JavaScript

proměnná = podmínka ? hodnota1 : hodnota2;

Pokud je podmínka pravdivá, má proměnná hodnotu hodnota1, pokud je podmínka nepravdivá, má proměnná hodnotu hodnota2.

switch case Pro větvení do více alternativ existuje příkaz switch, který ale nefunguje v trojkových verzích prohlížečů, proto je lepší jej nepoužívat. Sytaxe je: switch(proměnná) { case hodnota : příkaz; case hodnota2 : příkaz2; ... default : příkazx}

while Cyklus s podmínkou na začátku. Sekvence vnitřních příkazů se provádí dokola, dokud platí podmínka. Jakmile podmínka neplatí, pokračuje program dál. while (podmínka) { sekvence příkazů }

Následující příklad zvyšuje proměnnou o pět jednotek, dokud nebude větší nebo rovna třiceti: while(promenna < 30) { promenna += 5; }

Časté chyby u while: 

zápis podmínky musí být logická hodnota (pozor na dvě rovnítka)



uvědomte si, zda podmínka má nebo naopak nesmí platit



pokud podmínka nezávisí na měněných proměnných, můžete dostat nekonečný cyklus.

do while Cyklus s podmínkou na konci nefunguje v trojkových verzích prohlížečů. Syntaxe: do {sekvence příkazů} while (podmínka)

Je-li podmínka pravdivá, cyklus se ukončí a program jde dál.

for Cyklus obvykle určený pro daný počet opakování (třebaže to může být jinak). Syntaxe: for (počáteční hodnota; podmínka; navýšení) { příkazy; }

Např. tento program vypíše všechny HTML velikosti písma: for (i=1; i <= 7; i++) { document.write("Vzorek písma"); document.write("
"); }

Zobrazte si příklad. Drobný komentář: používám proměnnou i, která má na počátku hodnotu 1. Navýšení i++ znamená, že při každém dalším průchodu cyklem se i zvýší o 1 (++ je navýšení o -8-

Okruhy k absolutoriu

JavaScript

jedna). Trochu komplikovanější věcí je použití sekvence \" , což je způsob, jak do výstupu vložit uvozovky.

for in Cyklus přiřazuje proměnné postupně všechny vlastnosti objektu. Nefunguje v IE 3. Syntaxe: for (proměnná in objekt) {příkazy}

break Příkaz break předčasně ukončí cyklus while nebo for.

continue Příkaz continue skočí na začátek cyklu.

-9-

Okruhy k absolutoriu

JavaScript

Funkce Syntaxe deklarace funkce v JavaScriptu: function jmenoFunkce(parametry) {tělo funkce};

nebo podrobněji zapsáno: function jmenoFunkce(parametr, parametr) { příkaz; příkaz; return hodnota };

Například: function upozorneni(stranka) { alert("Tímto se dostanete na stránku s názvem " + stranka) };

Volání funkce: jmenoFunkce(hodnota, hodnota);

Velmi často se funkce volají na základě událostí dokumentu přímo z HTML kódu, například: Obsah

Při kliknutí na slovo "Obsah" se vyvolá funkce upozorneni() s hodnotou parametru "hlavní stránka". Předtím samozřejmě musí být funkce inicializovaná (v předchozím příkladu). Pokud funkce vrací hodnotu (deklarace obsahuje return hodnota), dá se funkce volat zápisem proměnná = jmenoFunkce(parametry);

Proměnné ve funkci Proměnná deklarovaná ve funkci klíčovým slovem var je lokální. Lokální proměnné jsou i parametry funkce (to, co je v závorce za jménem funkce). Pokud se ve funkci použije jméno jiné nedeklarované proměnné, jde o proměnnou globální.

Zabudované funkce JavaScriptu eval Eval je od slova vyhodnotit (evaluate). Funkce vezme svoje argumenty a vyhodnotí je jako by to byl kus programu. Používá se zejména pro dynamickou změnu kódu. Tuto funkci mají v oblibě všichni programátoři JavaScriptu, protože umožňuje zápis konstrukcí běžných z vyšších jazyků, které by JavaScript jinak nevzal. Příklad: promenna="document.write"; promenna2="(1 + 1)"; eval(promenna + promenna2)

Funkce eval() vezme argument promenna + promenna2 a vyhodnotí ho. Dostane řetězec document.write(1 + 1)

a rovnou to provede. Takže se vypíše dvojka. Můžete se přesvědčit.

- 10 -

Okruhy k absolutoriu

JavaScript

parseFloat a parseInt Převodní a zaokrouhlovací funkce. Argumentem je řetězec, který je převeden na číslo. parseInt z něj vrátí jenom celou část, parseFloat i s desetinou částí.

Události JavaScriptu Přehled uživatelských událostí Události okna a dokumentu: Událost onLoad

Popis

Nefunguje

Lze použít na

v

při úplném načtení stránky

body, img

IE3

při opouštění stránky

body

IE3

onResize

při změně velikosti okna

body

IE3, NN3

onScroll

při skrolování, posouvání obsahu

onUnloa d

body, textarea, cokoli s

IE3

overflow

Události myši Událost

onClick

Popis

Lze použít na

Nefunguje v

při kliknutí na prvek nebo při přednastavené akci

IE3, NN3

onDblClick

při dvojkliku na prvku

IE3

onMouseOver

při najetí myší na prvek

všechny elementy,

IE3

onMouseOut

při odjetí z prvku

v 4. verzích prohlížečů

IE3, NN3

onMouseMove při pohybu myši nad prvkem onMouseDow n onMouseUp

ale jenom některé

IE3, NN3

při stisknutí tlačítka nad prvkem IE3, NN3 při uvolnění tlačítka nad prvkem

- 11 -

Okruhy k absolutoriu

JavaScript

Události klávesnice Událost

Popis

onKeyPress onKeyDow

Lze použít

Nefunguje

na

v

při stisknutí klapky ve chvíli, kdy je element

IE3, NN3

aktivní

IE3, NN3

při stlačení klapky ve chvíli, kdy je element aktivní asi cokoliv

n

IE3, NN3

při uvolnění klapky ve chvíli, kdy je element

onKeyUp

aktivní

Test onKeyPress Události formuláře a formulářových polí Událost onSubmit

onReset

onFocus

onBlur

Popis těsně před odesláním formuláře, příklad při vynulování formuláře tlačítkem reset při aktivaci políčka (okna)

Lze použít na form

IE3

form

IE3

input, select, textarea, window

při deaktivaci políčka

input, select, textarea,

(okna)

(window nepotvrzeno)

onChang

při změně hodnoty

e

políčka

Nefunguje v

input, select, textarea

při výběru jiné hodnoty v onSelect

selectu

select,

výběr textu nefunguje v

nebo při vybrání textu

body (výběr textu)

IE3 a NN*

myší

- 12 -

Okruhy k absolutoriu

JavaScript

Další události Událos t onAbor t

Popis

při přerušení načítání

Lze použít

Popor

na

a

img, body

IE3

Události okna a dokumentu Událost

onLoad

Popis

Lze použít na

při úplném načtení stránky se všemi

Nefunguje v

body, img

IE3

při opouštění stránky

body

IE3

onResize

při změně velikosti okna

body

IE3, NN3

onScroll

při skrolování, posouvání obsahu

onUnloa d

objekty

body, textarea, cokoli s overflow

IE3

OnLoad Událost onLoad nastává ve chvíli, kdy je objekt načten. Praktický význam má pro dokument (tag ) nebo pro obrázek (). Podle mých zkušeností nelze vázat na jiné tagy (možná ještě