Výuka JavaScriptu - Jan Němec (2002)

Vuka JavaScriptu
Tento seril vychzel na serveru www.zive.cz.

Autor serilu: Marek Nmec
Do PDF pevedl: JasnaPaka
1. Dl - vod
Kad tden vyjde minimln jeden lnek a pokud je budete piln st neml by bt pro vs
na konci problm pst vlastn skripty. Zklad pro pochopen lnk je znalost HTML.
Jak potebujete software?

Klidn vystate i s Poznmkovm blokem, kter obsahuj vechny verze Windows.
Samozejm lep je pout napklad HomeSite nebo njak freewarov program jako PSPad.
K prohlen vytvoench skript je zapoteb jet njak internetov prohle.
Co je JavaScript?
JavaScript je skriptovac jazyk zaloen na programovacm jazyku JAVA. JavaScript me
bt sputn na stran klienta (client-side) nebo serveru (server-side). V lncch naleznete
informace pouze o tvorb JavaScriptu na stran klienta (client-side), kdy se kd nachz v
HTML dokumentu a je realizovn v internetovm prohlei, tj. kd se penese spolu s HTML
dokumentem z webov strnky a v prohle ho spust a vykon.
Poznmka: JavaScript NEN to stejn co JAVA!
Skriptovac jazyk umouje pistupovat k rznm prvkm webovch strnek jako jsou
obrzky, formule, odkazy a jin. Tyto prvky meme s pomoc JavaScriptu rzn mnit a
ovlivovat. JavaScript tak dovoluje reagovat na rzn udlosti, napklad kliknut myi, stisk
klvesy a dal, co dovoluje spoutt rzn akce podle chovn uivatele.
V JavaScriptu se d napsat napklad skript reagujc na udlosti vyvolan my (pohyb myi,
stisk tlatka, ), kontrolu formule i animace. Jak to ho doshnout se dozvte v srii lnk.
JavaScript m i nkolik omezen, ovem logickch. Napklad se nedaj st ani zapisovat
soubory na uivatelsk pota (ten, kdo si prohl vae strnky). Toto omezen je jasn,
pokud si nkdo spust program na svm potai (client-side skripty jsou vykonvny na
stran klienta) mus si bt jist, e program (skript) neohroz bezpenost potae.
Kter prohlee podporuj JavaScript?

Netscape jako prvn zavedl podporu JavaScriptu ve svm prohlei Netscape Navigator 2.
Microsoft ho nsledoval a implementoval podporu JavaScriptu do Internet Exploreru 3. Dal
prohlee reagovaly podobn a podporu pro JavaScript implementovaly tak. V souasnosti
znamen pchod kad nov verze prohlee aktualizaci a doplnn stvajc verze
JavaScriptu.
Kompatibilita mezi rznmi druhy prohle a jejich verz me zpsobovat pi nvrhu
skriptu problmy, proto se zezatku zamme na veobecn vlastnosti. Pozdji si ukeme
tyto rozdly a jak si s nimi poradit.
Poznmka: JavaScript nen domnou pouze prohle Netscape Navigator a Internet

Explorer. Velmi kvalitn podpora JavaScriptu je i v prohlech Mozilla a Opera.
Verze JavaScriptu
JavaScript proel uritm vvojem a to nm pineslo nkolik verz:
JavaScript 1.0 - Netscape Navigator 2.0

JavaScript 1.1 - Netscape Navigator 3.0; Internet Explorer 3.0 (ovem podpora
JavaScriptu V IE nestla 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; pozdj 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 souasn s podporou JavaScriptu pedstavil i vlastn implementaci jazyka

JavaScript (od IE 3). Tato implementace je znm pod jmnem JScript. Aby bylo mon
doshnout urit kompatibility, Evropsk asociace vrobc pota ECMA stanovila normu.
Tto norm by mli jednotliv specifikace JavaScriptu odpovdat. Vce na strnkch ECMA Standardizing Information and Communication Systems.
Poznmka: Vechny skripty uveden v srii lnk pracuj s Netscape Navigatorem nebo
Microsoft Internet Explorerem verze 3 a vy. Pokud nen uvedeno jinak!
Zpis skriptu
<script language="JavaScript" type="text/javascript">
<!-vlastn kd
//>
</script>
Tmto tagem prohlei sdlme, e skript, kter bude nsledovat, je napsn v JavaScriptu, a
e MIME-type je "text/javascript". Pokud vynechte definici TYPE nic se nestane, kd se
provede stejn, ale nen to podle standardu W3C.
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
Nyn skryjeme obsah skriptu ped starmi prohlei pomoc triku s komenti.
<!-//>
Ped ukonen HTML komente pidme dv lomtka. Prohlee, kter znaj JavaScript, se
nkdy pokouely interpretovat konec HTML komente za st skriptu. Konec skriptu ns
vrt do normlnho HTML.
</SCRIPT>
Vloen skriptu do strnky

Abyste mohli pouvat skripty na svch strnkch, muste vdt jak je do strnky vloit.
Skript se vkld mezi tagy <SCRIPT> a </SCRIPT>. V HTML strnce to potom me
vypadat teba takto:
<!-alert("Ahoj svte!");
//>
</script>
Skripty mete ke strnce pipojit i pomoc externho souboru. V tomto ppad pouijete
parametr SRC s definic URL skriptu. Takto pipojen skripty maj obvykle koncovku .js:
<script language="JavaScript" src="mujsckript.js"
type="text/javascript"></script>
Prov tag <SCRIPT> mete na strnce pout kolikrt chcete. Nejlep a nejsnadnj je
vak umstit cel skript na jedno msto a v jednotlivch stech strnky volat pouze funkce ve
skriptu definovan. (V nkterch vyjmench ppadech budete muset skript rozdlit, abyste
zajistili sprvn proveden skriptu.)
Pi vkldn skriptu preferujte vloen pomoc externho souboru, co pin znan vhody.
Veobecn se skript vkld mezi tagy <HEAD> a </HEAD>. To zajiuje, e skript bude
pipraven k pouit ihned po naten strnky. Sem je dobr vloit vechny funkce nebo
skripty, kter maj bt funkn jet ped vlastnm zobrazenm strnky.
Jindy je teba vloit skript mezi tagy <BODY> a </BODY>. Tento zpsob vloen se
pouv, kdy skript generuje vlastn HTML obsah strnky.
2. Dl Zklady syntaxe
Tag Script
V tagu <SCRIPT> me specifikovat, kter verze JavaScriptu je pouita. A to pomoc
parametru LANGUAGE = hodnota. Me zde bt "JavaScript", "JavaScript1.1",
"JavaScript1.2", "JavaScript1.3" nebo "JavaScript1.5" a speciln pro IE "JScript". Vtina
prohle si zjist verzi z parametru LANGUAGE a pokud tuto verzi nepodporuje, skript se
ignoruje.
Poznmka: O tom, e Microsoft od IE 3 pedstavil i vlastn implementaci JavaScriptu jsem se
zmnil ji v prvnm dlu. Pro zopakovn, Microsoft implementace je pojmenovna prv
JScript.
Zptky k parametru LANGUAGE. Pomoc tohoto parametru meme definovat odlin
skripty pro rzn verze prohle. Jednoduch seznam rznch verz prohle a
podporovan verze JavaScriptu byl taky v prvnm dlu.
Napklad prohle Netscape 2.0 ignoruje skript definovan tagem <SCRIPT
LANGUAGE="JavaScript1.2">, ale Netscape 4.0 tento kd vykon. Tak meme odliit
rzn verze skript na jedn strnce. Kad verze skriptu mus bt uzavena v samostatnm
tagu SCRIPT.
Pklad, jak si zjistit podporovanou verzi JavaScriptu:
<html>
<head>
<title>Verze JavaScriptu</title>
</head>
<body>
<script language="JavaScript1.1">
// JavaScript pro star prohlee
document.write("JavaScript 1.1<br> <br>");
</script>
// JavaScript pro novej prohlee
</script>
// JavaScript pro nejnovj prohlee
</script>
// JavaScript pro nejnovj prohlee
</script>
<script language="JScript">
// Speciln verze JavaScriptu pro IE - JScript
document.write("Jcript - pro IE<br> <br>");
</script>
</body>
</html>
Doufm, e nen co vysvtlovat.
Poznmka: Pokud se v pkladu ve uvede definice TYPE (viz prvn dl) nemus skript vdy
fungovat sprvn. To jsou paradoxy.
function f1() {
// Zde bude skript v JavaScriptu pro star prohlee.
...
}
</script>
<script language="JavaScript1.2" type="text/javascript">
function f1() {
// JavaScript 1.2 kd pro novj prohlee.
...
}
</script>
Tady si u skript vysvtlme. Prohle Netscape 2.0 pouije definici funkce f1 uzavenou v
prvnm provm tagu <SCRIPT>, ale definici uzavenou v druhm tagu <SCRIPT> ignoruje.
Prohle Netscape 4.0 pouije tak prvn definici, avak pokud m druh funkce (f1=f1)
stejn jmno pepe prvn definici.
Zklady syntaxe
Jet ne zaneme pst vlastn skripty, musme znt minimln zklady syntaxe a struktury
JavaScriptu. Co mem pouvat, kam co a jak umstit, atd.
Syntaxe JavaScriptu je podobn C/C++ a JAV. Kompletn popis hledejte na Netscape`s
JavaScript Reference nebo Microsoft`s JScript Reference. Zde najdete seznam
podporovanch pkaz, opertor a standardnch funkc JavaScriptu. Te si vysvtlme
zklady pro zatek.
Promnn
Promnnou deklarujeme pomoc slova var. Identifiktor promnn me mt libovolnou
dlku a sestvat z jakhokoliv psmene, sla a znaku podtrtka (_), pokud nen prvn znak
slo. Jako identifiktor nememe pout klov slova - slova majc v JavaScriptu speciln
vznam. JavaScript je case-sensitive (rozliuje mal a velk psmena), identifiktory count a
Count odkazuj na dv odlin promnn!
Promnn deklarovan mimo funkci jsou globln, tzn. jsou bt dostupn odkudkoli ve
skriptu a z funkc ve skriptu. Nejastji definujeme promnou mimo funkci, tedy jako
globln. Globln promnou meme pepsat lokln promnou (definovanou uvnit funkce),
pokud bude mt identifiktor promnn stejn jmno. Tomu kme pekrvn promnnch.
Pr pklad:
var
var
var
var
var
var
text;
max_score;
cislo3 = 1;
ErrorMessage = "Spojen selhalo."
dnyPryc = 5.7;
82sester = true;
// chyba promnn zan slem!
Textov etzce
etzce jsou uzaven mezi uvozovky jednoduch (`) nebo dvojit ("). Jeden typ uvozovek
mete kombinovat s druhm bez omezen. Pouvte-li pod stejn typ uvozovek a nechcete
jej mnit, vlote ped uvozovac uvozovky zptn lomtko.
Pklad bude asi nejlep:
var text1
var text2
var text3
var text4
lomtka
var text5
var text6
=
=
=
=
"Ahoj svte.";
`Zdravm opt.`;
"Neklikej na m.";
"ekl jsem "NE"";
= èkl jsem "NE"`;

= "ekl jsem \"NE\"";
// chyba, jeden typ uvozovek bez zptnho

// vsledek: ekl jsem "NE"
// vsledek: ekl jsem "NE"
Opertory a vrazy
Vtina opertor (+; -; *; /; ++; --; atd.) a vraz pouvanch v C/C++ a JAV je
podporovna i v JavaScriptu.
Opt pklad:
promnn = vraz
soucet += 4;
i++;
vzkaz = "Chyba " + kodchyby;
Pkazy
A znovu, vtina pkaz pouvanch v C/C++ a JAV je podporovna i v JavaScriptu.
Klov slova jsou:
komente - // pro jeden dek, /* a */ pro vce dk

cykly - for, do, while a dal
podmnn pkazy - if, then, else; switch, case
objekty - new, this, with a dal
Funkce
Funkce pouijeme v ppadech, kdy potebujeme v programu na rznch mstech provdt
stejn innosti. Pouitm funkc kd programu zkrtme, zpehlednme a pjde snadnji
modifikovat.
Funkce se definuje nsledujcm zpsobem:
function jmeno_fce(arg1, arg2, ...) {
pkazy JavaScriptu ...
}
Jmno funkce mus dodrovat sejn pravidla, jako jmno promnn. K voln funkce
(sputn), pouijeme jej jmno a pidme argumenty, pokud je funkce poaduje.
var vyska = 5;
var sirka = 3;
spocti_obsah(vyska, sirka);
Poznmka: Samozejm, e funkce me bt i bez argument.

Jak u jsem zmnil, funkce se nejastji vkldaj do hlaviky dokumentu, mezi tagy <HEAD>
a </HEAD>. Co nm zajist, e funkce bude natena a k dispozici jet ne bude volna.
Funkce me vracet i hodnoty. Tmto funkcm se k funkce s nvratovou hodnotou a
doclme toho tak, e na konec funkce pidme pkaz return.
Pklad funkce s nvratovou hodnotou:
function secti(x, y) {
return x + y;
}
...
var soucet = secti(7, 10);
3. Dl Opertory a zkladn cykly

Opertory
Aritmetick
Opertor Popis
Pklad Vsledek
stn
2+2
odtn
5-2
nsoben
4*5
20
dlen
15/5
5/2
3
2.5
Modulo dlen, zbytek po celoselnm dlen. 5%2

Pklad 1:
10%8
5/2 po dlen 2, zbytek 1
Pklad 2:
10/8 po dlen 1, zbytek 2
1
2
++
zven o jedniku
x=5
x++
x=6
--
snen o jedniku
x=5
x--
x=4
Mon je i zkrcen zpis, pokud ho nkde uvidte, nelekejte se.

Opertor Pklad Stejn jako zpis
+=
x+=y
x=x+y
-=
x-=y
x=x-y
*=
x*=y
x=x*y
/=
x/=y
x=x/y
%=
x%=y
x=x%y
++
x++
x=x+1
--
x--
x=x-1
Relan
Slou k porovnvn hodnot uloench v jednotlivch promnnch. Nic sloitho.
Opertor Popis
Pklad
==
je rovno
5==8 vrt false (nepravda)
!=
nerovn se
5!=8 vrt true (pravda)
>
je vt ne
5>8 vrt false (nepravda)
<
je men ne
5<8 vrt true (pravda)
>=
je vt nebo rovno 5>=8 vrt false (nepravda)
<=
je men nebo rovno 5<=8 vrt true (pravda)
Logick
Opt zde dochz k porovnvn hodnot jako u relanch opertor. Zde se ovem porovnvaj
jejich logick hodnoty.
Opertor Popis
Pklad
&&
a (logick souin)
Vsledek bude true, pokud vechny porovnvan hodnoty budou
true.
x=6 y=3
(x < 10 && y > 1) vrt true
(pravda)
||
nebo (logick souet)

Vsledek bude true, pokud aspo jedna z porovnvanch hodnot
bude true.
x=6 y=3
(x==5 || y==5) vrt false
(nepravda)
negace
Mn hodnotu operandu na opanou.
x=6 y=3
x != y vrt true (pravda)
Poznmka: Logick promnn mou nabvat pouze dvou hodnot a to true nebo false. True
meme nahradit slem 1 a false slem 0. Krtk pklad:
<script type="text/javascript">
<!-var x;
x=true;
if (x==1)document.write("true");
else document.write("false");
//-->
</script>
Vm, e pro zatenka bv pochopen logickch opertor sloitj a proto je zde mal
pklad, kde mete trnovat.
Poznmka: JavaScript obsahuje i dal speciln opertory. Pi psan skript se s nimi s
nejvt pravdpodobnost vbec nesetkte a proto je neuvdm.
Priorita opertor
Pi psan komplikovanjch vraz se me v jedn rovnici vyskytnout vce opertor.
Kadmu je asi jasn, e 3+5*2 je nco jinho ne (3+5)*2. Kad opertor m jinou prioritu.
Na zatek nm budou pro aritmetick opertory stait pravidla matematiky (pednost
nsoben ped stnm atd.).
Cykly
Pouvaj se tehdy pokud chceme provst njak blok kdu opakovan. V JavaScriptu k
tomuto elu meme pout nsledujc pkazy:
while - Cyklus s podmnkou na zatku. Cyklus se bude provdt tak dlouho, dokud
bude platit podmnka.
do...while - Cyklus podmnkou na konci. Stejn jako v pedchzejcm ppad, ale
podmnka se testuje a na konci.
for - Cyklus se zadanm potem opakovn.
While
while (podmnka) {
pkazy JavaScriptu
}
Pklad na vysvtlen snad bude stait:

<!-var i=0;
while (i<5) {
alert("i = " + i);
i++;
}
//-->
</script>
Do...while
do {
pkazy JavaScriptu
} while (podmnka)
Opt snad bude stait pouze pklad:

<!-var i=0;
do {
alert("i = " + i);
i++;
} while (i<5)
//-->
</script>
Poznmka: Na rozdl od pedchzejcho pkladu probhne cyklus minimln jednou bez

ohledu na poten stav ukonovac podmnky. Zkuste zmnit poten hodnotu i napklad
na 10 a uvidte.
For
for (poten inicializace; podmnka; prava dc promnn) {
pkazy JavaScriptu
}
Pklad:
<!-for (var i=0; i<5; i++) {
alert("i = " + i);
}
alert("Konec!");
//-->
</script>
Podmnky
Pouijeme je tehdy, pokud chceme, aby se program podle njak podmnky sm rozhodl, jak
bude dl pokraovat.
Podmnkov opertory
Jde o zvltn druh opertor, kter umouj vyhodnotit njakou jednoduchou podmnku a v
zvislosti na vsledku provst danou operaci. V JavaScriptu nm k tomuto elu slou dva
opertory, kter se vdy pouvaj spolen. Jsou to znaky ? a :. Jejich pouit vypad takto:
(podmnka) ? vsledek pi splnn podmnce : vsledek pi nesplnn
podmnce;
Krtk pklad se vdy hod:

<!-var i, hlaska;
i=5;
hlaska = (i==0) ? "Hodnota i je opravdu nula." : "Hodnota i nen rovna
nule.";
alert(hlaska);
//-->
</script>
Poznmka: Podmnkov opertory jsem mohl zaadit u do sekce "Opertory", ale zde mn to
pijde vhodnj.
Podmnn pkaz If
Pouv se tehdy pokud chceme, aby se urit pkazy v JavaScriptu provedly pouze za
uritch okolnost a dal pkazy zase za jinch okolnost. Obecn zpis vypad takto:
if (podmnka) {
pkazy, kter se provedou pi splnn podmnce; }
else {
pkazy, kter se provedou pokud nen podmnka splnna; }
Pi vcensobnm vtven programu by obecn zpis vypadal takto:

if (podmnka1) {
pkazy, kter se
else if (podmnka2)
pkazy, kter se
vyhovuje; }
else {
pkazy, kter se
podmnka; }
provedou pokud je podmnka1 splnna; }

{
provedou pokud nen podmnka1 splnna, ovem podmnka2
provedou pokud nen splnna ani jedna pedchzejc
Poznmka: Pokud by vyhovovala podmnka1 i podmnka2, provede se kd pouze v bloku

podmnka1. Podmnka1 vyhovuje, je tedy proveden jej kd a skript skon v hledn dalch
vyhovujcch podmnek!
V nsledujcm pklad se pokusme vytvoit kd, kter vyhodnot a ocen obchodnky.
Obchodnk, kter prod vce ne 10 kus vrobku obdr bonus a jako dal zklad platu se
mu potaj prodan kusy nad 10. Naopak obchodnk, kter prod mn ne 10 kus vrobku,
bude krcen na plat. Jestlie obchodnk prod prv 10 kus vrobku, nestane se nic.
<!-var prodkus = 11;
if (prodkus > 10) {
alert("Zskvte bonus 5000 K!");
alert("Poet prodanch kus je snen o deset.");
prodkus = prodkus - 10; // potaj se pouze kusy pevyujc 10
}
else if (prodkus == 10) {
alert("Dobr prce, ovem na bonus to nen.");
alert("Poet prodanch kus je vrcen na 0.");
prodkus = 0;
}
else {
alert("Z platu vm srme 5000 K \n protoe jste nedoshl kvty.");
alert("Ztrtu budete muset dohnat.");
prodkus = prodkus - 10;
}
//-->
</script>
Hodn autor dl na zatku chybu uvedenou ne. Popemlejte, pro skript zde uveden
neme sprvn fungovat.
<!-var prodkus = 11;
if (prodkus > 10) {
alert("Zskvte bonus 5000 K!");
alert("Poet prodanch kus je snen o deset.");
prodkus = prodkus - 10; // potaj se pouze kusy pevyujc 10
}
if (prodkus == 10) {
alert("Dobr prce, ovem na bonus to nen.");
alert("Poet prodanch kus je vrcen na 0.");
prodkus = 0;
}
if (prodkus < 10) {
alert("Z platu vm srme 5000 K \n protoe jste nedoshl kvty.");
alert("Ztrtu budete muset dohnat.");
prodkus = prodkus - 10;
}
//-->
</script>
een: Obchodnk prod napklad 11 kus vrobku a je mu piznn bonus. Nsledn je mu

poet prodanch kus snen o deset, nyn tedy m pouze 1 prodan kus. Dal podmnka
nevyhov, ale posledn ano. Tm je dobrmu obchodnku streno z platu 5000 K a s
prodanmi kusy se dostane do mnusu. To by se asi divil! Sprvn zpis (nad tmto) skon po
splnn prvn podmnky a dal vyhovujc podmnky nehled.
Switch (pepna)
Pokud je zpis pomoc if, else if a else dlouh a nepehledn napklad, kdy mme vybrat
mezi vce hodnotami (teba 10 podmnek). V tomto ppad puijeme pkaz switch
(pepna), kter umouje rozdlit program jednodue a pehledn na nkolik vtv.
Struktura zpisu pkazu switch vypad takto:
switch (promnn) {
case hodnota1:
pkazy, kter se provedou pokud promnn=hodnota1;
break;
...
case hodnotaN:
pkazy, kter se provedou pokud promnn=hodnotaN;
break;
default:
pokud nebyla splnna ani jedna z pedchzejcch podmnek
provedou se pkazy zapsan zde;
break;
}
Pklad s hlekami na rzn dny pomoc pkazu switch:
//Rzn hlky podle dne v tdnu. Pamatujte,
//e Nedle=0, Pondl=1, ter=2, atd..
var d=new Date()
den=d.getDay() // nabv hodnot 0 a 6
switch (den) {
case 5:
document.write("Konen ptek.");
break;
case 6:
document.write("Super sobota!");
break;
case 0:
document.write("Pohodika je nedle.");
break;
default:
document.write("U se tm na vkend.");
break;
}
</script>
Vnoen podmnky a cykly

Nkdy je vhodn pro zjednoduen skriptu vloit vce podmnek nebo cykl do sebe. V tomto
ppad je nutn peliv sledovat syntaxi, sprvn poet zvorek, bloky se nesm pekrvat
atd.
Vnoen cykly
Uvnit jednoho cyklu probh dal cyklus.
Pklad na malou nsobilku:
<!-var i,j;
for (i=1; i<=10; i++) { //vnj cyklus
for (j=1; j<=10; j++) { //vnitn cyklus
document.write(i*j+ " "); //vype dek s malou nsobilkou
}
document.write("<br>"); //pechod na nov dek
}
//-->
</script>
Vnoen podmnky
Stejn jako u cykl musme dt zvenou pozornost na syntaxi, jinak se snadno dopustme
chyby. Na nsledujcm pkladu si pedvedeme jak se d kd pomoc vnoench podmnek
zjednoduit.
Pklad na vyhledn maxima ze t sel:

<!-var x, y, z;
x=8;y=-5;z=6;
var max=x;
if (y>max){
max = (y>z) ? y:z; //podmnkov opertor
}
else {
if (z>max){
max=z;
}
}
alert("Nejvt slo je: "+ max);
//-->
</script>
Poznmka: Zatm jsme nemluvili o monosti zadvn hodnot uivatelem, proto do skriptu
vstupuj rovnou hodnoty. Pozdji si povme i o vstupu hodnot od uivatele z formule nebo
pomoc dialogovho okna.
Dnen dl je del ne jsem si pvodn myslel, proto zde nenajdete slben klov slova
JavaScriptu. Pesto doufm, e i tento del dl jste strvili a vydrte na pokraovn. Pt se
podrobnji podvme na provdn kdu, ekneme si nco o udlostech a snad konen zbude
msto i pro klov slova.
4. Dl Udlosti
V prvnm dlu jsme si ji vysvtlili co je to JavaScript, kter prohlee ho podporuj a kam a
jak skripty na strnce vkldat. Druh dl objasuje monosti tagu SCRIPT a zklady syntaxe
(promnn, textov etzce, opertory, pkazy a funkce). Posledn tet dl ped tmto se
zabval hloubji opertory, cykly, a podmnkami. Dnenm dlem st Zklady prce s
JavaScriptem ukonme.
Proveden naeho kdu

Internetov prohle postupn nat strnku a kad skript je vykonn tak brzo, jak je
naten. Vhodnm umstnm na strnce me bt skript proveden, jet ne jsou nateny
obrzky, zvuky nebo ne je zobrazen cel obsah strnky.
Oividn nm tato vlastnost me zpsobit i problmy. V nsledujcm pkladu se pokusme
najt nastavenou barvu hypertextovho odkazu strnky, kter se nachz v objektu
document.linkColor. Prvn pokus je uinn v provm tagu HEAD, druh a v sekci BODY.
Zdrojov kd pkladu:
<html>
<head>
<title>Barva odkazu</title>
// Vrt barvu odkazu na strnce.
var bo1 = document.linkColor;
//bo=barva odkazu, zkratky usnaduj
ivot
</script>
</head>
<body bgcolor="#ffffff" text="#000000" link="#ff0000">
<font face="Arial,Helvetica" size=3>
// Znovu vrt barvu odkazu na strnce.
var bo2 = document.linkColor;
// Vypeme si ob barvy.
document.writeln(`Barva odkazu poprv: ` + bo1 + `<br>`);
document.writeln(`Barva odkazu podruh: ` + bo2);
</script>
</font>
</body>
</html>
Jako vsledek naeho snaen se na strnce objev:

Barva odkazu poprv: #0000ff
Barva odkazu podruh: #ff0000
Pi prvnm pokusu jet nen naten tag <BODY>, kde je definovna barva odkazu a proto je
vrcena standardn barva odkazu (modr). Jak se strnka postupn nat je nsledn naten
tag <BODY> ve kterm dojde ke zmn barvy odkazu ze standardn modr barvy na
ervenou. Ve druhm pokusu o zjitn barvy odkazu je sekce <BODY> ji natena, a proto
zskme nov definovanou hodnotu barvy odkazu (erven).
Skript definovan uvnit funkce, nen vykonn dokud nen funkce volna. Ale, jak a kdy
umme volat funkci? Dozvte se v nsledujc kapitole: Udlosti.
Udlosti
Kad internetov prohle rozpozn urit mnostv udlost, napklad kdy strnka
dokon sv natn nebo kdy uivatel pesune ukazatel myi nad odkaz i klikne na tlatko
a mnoh dal. Tyto udlosti meme rozpoznat a provst kd JavaScriptu pi jejich vskytu.
Jedna cesta, jak tyto udlosti rozpoznat je pomoc sprvce udlost (event handler). Ten um
udlost zachytit, rozpoznat a vykonat pi jejm vskytu potebn pkazy JavaScriptu. O
sprvce udlost definovan JavaScriptem je mon doplnit vtinu HTML tag (tabulka
ne). Pklady zde uveden funguj jak v IE, tak Netscapu.
Definujeme sprvce udlosti
Pokud chceme definovat sprvce udlosti, pidme jmno tto udlosti do HTML tagu s
pkazem JavaScriptu, kter se m vykonat.
Pklad:
<html>
<head>
<title>Navy</title>
var navys;
navys = 0;
</script>
</head>
<body>
<a href="#" onClick="navys++;alert(navys);">navy</a>
</body>
</html>
Promnn navys bude zvena o jedniku pokad, kdy uivatel klikne na odkaz. Do
sprvce udlosti mete napsat jakkoliv kd JavaScriptu, kter je sprvn. Me to bt jeden
pkaz nebo nkolik pkaz oddlench pomoc stednku (;). Nejastj a i nejobvyklej je
volat skrze udlost njakou funkci. Nezapomete, e tyto pkazy se uzavraj do uvozovek a
je nutn zde dodrovat stejn podmnky jako u textovch etzc.
Zmna obrzku
Dal pklad ukazuje dobe znm efekt se zmnou obrzku po najet kurzoru myi.
Poznmka: tento pklad nebude chodit s Internet Explorer verze 3 nebo nim.
Tag <IMG> nem sm o sob sprvce udlosti pro pohyb myi, ale m ho hypertextov
odkaz. Toho tedy vyuijeme a obrzek uzaveme do tagu pro hypertextov odkaz <A
HREF=...></A>.
Podvme se na vlastn kd. Prvn si vytvome funkci zmenObr() pro manipulaci s obrzky.
Funkce je volna s argumenty jmeno a zdroj se ktermi se ve funkci dle pracuje.
function zmenObr(jmeno, zdroj) {

document.images[jmeno].src = zdroj; //najde obrzek definovan v
argumentu
jmeno a zmn jeho URL
return true;
}
Nyn definujeme pro kad odkaz ti sprvce udlosti, jeden kdy je kurzor myi nad
odkazem, druh kdy je kurzor myi odsunut z odkazu a posledn, kdy je my kliknuto na
tento odkaz. Pklad je uveden n:
<a href="http://www.seznam.cz"
onMouseOver="zmenObr (òbr1`, `tlacitko_on.gif`)"
onMouseOut=" zmenObr (òbr1`, `tlacitko_off.gif`)"
onClick="return false;">
<img name="obr1" border=0 src="tlacitko_off.gif">
</a>
Ob udlosti onMouseOver i onMouseOut volaj funkci zmenObr(), s argumenty pro jmno

obrzku, kter se m zmnit (v tagu IMG specifikovno pomoc NAME= hodnota) òbr1` a
URL obrzku ve kter se m zmnit `tlacitko_on.gif` (objekty, jejich vlastnosti a metody
pouit ve funkci zmenObr si podrobn vysvtlme v dalch stech kurzu).
Popis k udlosti onClick. Pkaz vrac hodnotu false pomoc pkazu return false m
prohlei sdluje, aby potlail svoje normln chovn pro tuto udlost. Normln by
prohle po kliknut na odkaz sledoval a naetl novou strnku. Vrcenm hodnoty false
sdlme prohlei, e nem pejt na novou strnku. Pokud ovem chcete, aby prohle
peel na novou strnku zmnte vrcenou hodnotu na return true nebo sprvce udlosti
onClick vynechte pln.
Jin pklad
Dalm asto pouvan sprvce udlosti je onLoad, napklad pouit v tagu <BODY>. V
jednom z pedchzejcch pklad jsme si ukzali, co se me stt pokud vykonme pkaz
JavaScriptu jet ped kompletnm natenm strnky. Udlost onLoad je sputna, a po
kompletnm naten strnky prohleem.
Take pedchoz pklad pepeme teba takto:
<html>
<head>
<title>Opt barva odkazu</title>
</head>
<body bgcolor="#ffffff" link="#ff0000" onLoad="alert(`Barva odkazu je: `
+ document.linkColor);">
<font face="Arial,Helvetica" size="3">
</font>
</body>
</html>
Poznmka: Funkce alert() je standartn funkce JavaScriptu, kter zobraz dialogov okno se
zadanm obsahem. V tomto pkladu to bude hodnota document.linkColor, co je barva
odkazu definovan pro tuto strnku v tagu <BODY>.
Seznam sprvc udlost

Toto je pouze sten seznam HTML a tag a jim pslunch sprvc udlost. Kompletn
popis hledejte na Netscape HTML Reference a Microsoft IE DHTML Events.
Tag
Udlost
Kdy je volna?
<A>
onClick
Po kliknut my na odkaz.
onMouseOver
Pi pesunut myi nad odkaz.
onMouseOut
Po odsunut myi z odkazu.
onMouseOver
Pi pesunut myi nad oblast klikac

mapy.
onMouseOut
Po odsunut myi z oblasti klikac mapy.
onBlur
Kdy rm nebo okno pestv bt

aktivn.
onFocus
Kdy je rm nebo okno je aktivovn

my nebo pomoc tabultoru.
onLoad
Po nataen okna nebo rmu do okna

prohlee.
onUnload
Po odstrann okna nebo rmu z okna

prohlee.
onReset
Po vynulovn formule.
onSubmit
Pi odesln formule.
onAbort
Kdy je natan obrzku zastaveno

uivatelem, stisk tlatka STOP.
onLoad
A je cel obrzek naten do okna

prohlee.
onError
Pi vskytu chyby pi natn obrzku.
<INPUT> s TYPE="BUTTON" nebo

"CHECKBOX" nebo "RADIO" nebo "RESET"
onClick
Po kliknut my na prvek formule.
<INPUT> s TYPE="TEXT" nebo <TEXTAREA>
onBlur
Kdy prvek formule pestv bt

aktivn.
onChange
Kdy je text ve formuli zmnn.
onFocus
Kdy je textov oblast fomule

aktivovna my nebo pomoc tabultoru.
onSelect
Kdy uivatel ozna cel nebo jen st

textu v textov oblasti formule.
<AREA>
<BODY>
<FORM>
<IMG>
<INPUT> s TYPE="SELECT"
onBlur
Kdy vybran prvek ze seznamu

pestv bt aktivn.
onChange
Kdy je zmnn prvek seznamu.
onClick
Kdy uivatel klikne na prvek v

seznamu.
onFocus
Kdy je urit prvek v seznamu

aktivovn.
Dnenm dlem kon st zklady JavaScriptu a pt se vrhneme na objekty. Slben

seznam klovch slov je zde.
Klov slova
JavaScript si pro svoji potebu vyhradil nkolik slov, kter maj speciln vznam a nesm bt
pouita k jinmu elu (Identifiktor - nzev promnn nebo funkce, atd.). S nktermi zde
uvedenmi slovy jste se v kurzu ji setkali a s dalmi se jet seznmte.
abstract
else
instanceof
switch
boolean
enum
int
synchronized
break
export
interface
this
byte
extends
long
throw
case
false
native
throws
catch
final
new
transient
char
finally
null
true
class
float
package
try
const
for
private
typeof
continue
function
protected
var
debugger
goto
public
void
default
if
return
volatile
delete
implements
short
while
Do
import
static
with
double
in
super
5. Dl Udlosti
V minulch dlech jsme si probrali zklady prce s JavaScriptem a dnes se pustme do nov
sti objekty.
Objekty JavaScriptu
Co je to objekt?
Jak se d z jmna pedpokldat, a jak jsem se ji zmnil JavaScript je postaven na
programovacm jazyku JAVA. Oba jsou to objektov orientovan jazyky. Nepjdu do detail
objektov orientovanho programovan, ale vysvtlme si zkladn termny, pro lep
pochopen jazyka JavaScipt.
JavaScript pracuje s objekty. Kad objekt je v podstat blok dat a abychom s tmto blokem
mohli pracovat existuj vlastnosti a metody asociovan s objektem. Vlastnosti mohou bt
promnn nebo jin objekty a sad funkc spojench s objektem kme metody.
jmeno_objektu.jmeno_vlastnosti
dokument.bgcolor = "red";
jmeno_objektu.jmeno_metody
document.write("Pikaz write je metodou objektu dokument.");
Vechny objekty JavaScriptu jsou uspodny do struktury, kterou znzoruje nsledujc

obrzek:
Tato struktura m svoje jmno, k se j objektov model dokumentu, zkrcen DOM

(Document Object Model).
Na objekt mete myslet jako na typ dat, teba cel slo nebo etzec. Pi definici promnn
vytvte instanci objektu. Pokud byste tak chtli init veobecn slou k tomuto elu
opertor new:
var text = new String("Toto je mj text."); // String = konstruktor
var cislo = new Number(4.02); // Number = konstruktor
var dnes = new Date();// Date = konstruktor
Opertor new se pouv k vytvoen novch objekt. Za klovm slovem new nsleduje
konstruktor. Opertorem new se nejdve vytvo nov objekt, kter vak nem definovny
dn vlastnosti. Pak se vyvol specifikovan funkce konstruktoru, kter se mou pedat
parametry.
Nkter objekty, jako napklad Date, maj vce funkc konstruktoru ne jednu.
var rok = new Date().getYear();
novy_objekt = new konstruktor.konstruktor
Poznmka: Pokud konstruktor neobsahuje dn parametry, je mono vynechat zvorky.

Konstruktor je zvisl na parametrech, kter jsou mu pedny pi voln. Objekt Date bude
bez parametr nastaven na aktuln datum a as. Pklad vytvoen novho objektu volnm
funkce (konstruktoru) s parametry:
<!-var Xmas = new Date("December 24, 2001");
document.write("Den: " + Xmas.getDate() + "<br>" + "Msc: "
+(Xmas.getMonth()+1) + "<br>" + "Rok: " + Xmas.getYear());
//-->
</script>
Dnes jsme si ekli nco krtce o objektech. Vte co je to objektov model dokumentu, e
objekty mou obsahovat dal objekty a promnn, kterm kme vlastnosti a e objekt v
sob m zabudovanou sadu funkc, kterm kme metody. Nakonec jsme si v rychlosti
ukzali jak vytvoit nov objekt.
Tma objekt je sloitj na pochopen a proto se mu budeme vnovat i nkolik dalch dl.
6. Dl Vlastnosti a metody objekt

Dnes opt o objektech. Trochu detailnji si ukeme vlastnosti a metody, ekneme si nco o
vestavnch objektech a window objektech.
Vlastnosti objekt
Jak jsme si minule vysvtlili vlastnosti jsou objekty a promnn, nadazench objekt. K
vlastnostem uritho objektu se pistupuje pomoc "tekov" notace:
var text = new String("Kdysi dvno, ila, byla ...");
var dlk = text.length;
Nastav promnnou dlk na 27, co je poet vech znak v tomto etzci text.
asto potebujeme mnit vlastnosti objektu pmo. Napklad pro zmnu barvy pozad strnky
meme vlastnost bgColor objektu document mnit dynamicky. Jak je pipraveno v ukzce:
<html>
<head>
<title>Zmna barvy strnky</title>
<!-// Funkce, kter mn barvu pozad strnky.
function zvolBarvu(barva) {
document.bgColor = barva; //bgColor je vlastnost objektu document
}
//-->
</script>
</head>
<body alink="#808080" vlink="#666666">
<font face="Arial,Helvetica,sans-serif" size="2">
<b>Pklad zmny hodnoty u vlastnosti objektu.</b>
<p>

Pro zmnu barvy pozad naje kurzorem myi nad odkaz:
<p>
<a href="#" onMouseOver="zvolBarvu(`#ff6666`)"
onMouseOut="zvolBarvu(`#ffffff`)">
erven</a><br>
<a href="#" onMouseOver="zvolBarvu(`#66ff66`)"
Zelen</a><br>
<a href="#" onMouseOver="zvolBarvu(`#6666ff`)"
Modr</a>
</font>
</body>
</html>
Nkter vlastnosti objekt nemohou bt zmnny pmo (barvu pozad strnky jsme mnili
pmo pomoc vlastnosti bgColor), napklad vlastnost length u etzc. Nicmn, na co
potebujeme mnit dlku etzce? Pouijeme-li metodu concat(), kter spojuje dva etzce
dohromady, hodnota vlastnosti length urujc dlku etzce se po spojen etzc zmn
automaticky. Pi jejm dalm voln obdrme ji novou hodnotu dlky etzce.
Metody objekt
Metody jsou sady funkc zabudovanch v objektu a pistupujeme k nim pomoc stejn
tekov notace jako u vlastnost. Za jmnem metody nsleduj zvorky obsahujc poadovan
argumenty:
var errorMsg = new String("");
var msgHeader = new String("Chyba: ");
var errorCode = new String("X001");
errorMsg = msgHeader.concat(errorCode); //concat je metoda
document.write(errorMsg); //write je metoda
Vsledn hodnota objektu errorMsg je "Chyba: X001".
Objekty JavaScriptu
Tato kapitola vm umon se seznmit s nktermi objekty JavaScriptu. Clem nen zahrnout
vs vekerm vtem vlastnost a metod vech objekt, ale udlat si o nich ucelenou
pedstavu a pochopit zkladn pravidla pouvn. Opt dm pednost snaze vm nco
vysvtlit a ukzat na pkladech, ped suchou teori. Podle m se na pkladech u lpe a
rychleji.
JavaScript obsahuje mnoho peddefinovanch objekt, kter jsou uvedeny pmo v jeho
definici. Nkter reprezentuj rozdln typy dat, jako etzce, sla, zatmco jin se tkaj
objekt na strnce, napklad odkaz, obrzk a dalch. Pi pouvn objekt, jejich
vlastnost a metod musme brt v vahu umstn v hierarchii objekt. Proto je nutn ped
nzvem kad vlastnosti nebo metody napsat i jmno nadazenho objektu.
Vestavn objekty
Vestavn objekty nemaj nic spolenho s web strnkami i HTML jazykem. Pedstavuj
rozen JavaScriptu o pole, zkladn matematick funkce a konstanty, dle umouj prci s
datumem i etzci. A jsou to:
Array - pole promnnch.

Boolean - logick promnn, me nabvat pouze dvou hodnot true nebo false.
Date - objekt reprezentujc datum.
Number - numerick hodnota, bu cel slo nebo desetinn slo.
String - etzec znak uzaven v jednoduchch nebo dvojitch uvozovkch.
Math - obsahuje metody pro matematick konstanty a funkce.
Jak jsme si ji ukzali tyto objekty se vytvej za pomoci opertoru new. Ovem je dobr
vdt, e objekty typu Boolean, Number a String jsou vytveny implicitn. Tzn. nemusme je
vytvet pomoc opertoru new, sta:
var nalezeno = false;
var max = 47.9;
var jmno = "Pepa";
Objektov model dokumentu (DOM)

Po naten strnky, prohle vytvo nkolik objekt reprezentujcch informace strnce a
jejm obsahu. Tyto objekty jsou seazeny podle hierarchie od nejvych a k nejnim.
Nejve postaven je objekt window a m nsledujc vlastnosti:
history - obsahuje seznam vech ji dve navtvench URL.

location - informace o aktulnm URL.
frames - pokud strnka pouv rmy, jsou zde uloeny informace o pozici rmu a
tak obsahuje objekt window pro kad rm.
document - informace o obsahu strnky.
screen - informace o velikosti okna a barvch (pouze Netscape 4).
Jinm typem vysoce postavenho objektu, kter se vytvo po naten strnky je navigator.
Ten ale nen soust objektu window. Tento objekt v sob obsahuje informace o typu
prohlee, verzi, dostupnch pluginech a jin.
Na tyto objekty a jejich vlastnosti se odkazujeme opt pomoc teek. Napklad pokud chceme
zjistit URL strnky, pouijeme:
var url = window.location.href;
Protoe vechny zde uveden objekty vychzej z objektu window, JavaScript netrv na tom,
aby se tento objekt musel neustle uvdt. Zpis tedy meme zkrtit:
var url = location.href;
Dle si popeme tak pr zkladnch metod objektu window.
Metody objektu window

Objekt window poskytuje takt pr uitench metod, mezi tyto metody pat i zobrazovn
dialogovch oken:
alert() zobraz dialogov okno s vmi zadanm obsahem.

alert(promenna + "textov etzec"); alert(promenna); nebo dal
kombinace.
confirm() zobraz dialogov okno s tlatky "OK" a "Storno". Po kliknut na "OK"

vrac true po kliknut na "Storno" false.
if(confirm("Mte m rdi?")==true)
alert("To je dobe :)");
else
alert("To se mn nelb :(");
prompt() zobraz dialogov okno se vstupem pro uivatele.

var jmeno;
jmeno = prompt("Vae jmno?", "vepite vae jmno");
//zkuste i jmeno = prompt("Vae jmno?");
alert("Zdravm " + jmeno + ".");
Nsledujc pklad ukazuje prci se vemi ve uvedenmi druhy dialogovch oken.

<html>
<head>
<title>Dialogov okna</title>
<!-function alertTest() {
alert("Stisknte OK.\nPokud chcete pokraovat.");
document.forms["zprava"].text.value = "";
return false;
}
function confirmTest() {
if(confirm("Pokraovat?"))
//stejn jako if((confirm("Pokraovat?"))==true)
document.forms["zprava"].text.value = "Stiskl jsi OK.";
else
document.forms["zprava"].text.value = "Stiskl jsi Storno.";
return false;
}
function promptTest() {
var name;
jmeno = prompt("Napite svoje jmno:", "mazel");
document.forms["zprava"].text.value = "Ahoj " + jmeno + "!";
return false;
}
//-->
</script>
</head>
<body bgcolor="#ffffff">
<b>Pklady dialogovch oken.</b>
<p>

Vyberte druh dialogovho okna:
<p>
<ul>
<li><a href="#" onClick="return alertTest()">Alert okno</a>
<li><a href="#" onClick="return confirmTest()">Confirm okno</a>
<li><a href="#" onClick="return promptTest()">Prompt okno</a>
</ul>
<p>
<form name="zprava">
<b>Vsledek vaeho ponn:</b> <input name="text" type="input"
value="">
</form>
</font>
</body>
</html>
Jak u jsme si ekli u textovch etzc, mus se dodrovat urit pravidla syntaxe. Vedle
zpisu dalch uvozovek uvnit uvozovek pomoc zptnho lomtka tu mme i dal
formtovac znaky, kter vyuijeme zejmna u dialogovch oken:
\b - smazn znaku ped kurzorem
\f - posun papru
\n - nov dka
\r - nvrat na zatek dky
\t - tabultor
\` - apostrof (neukonuje etzec)
\" - uvozovka (neukonuje etzec)
\\ - zptn lomtko
Poznmka: Metoda alert() je velmi uiten pi odlaovn kdu. Mete ho umstit do
skriptu a zobrazovat v dialogovm okn hodnoty promnnch a objekt. To me bt
neoceniteln pi snaze vystopovat chybu! (Stejn dobe se d pout i objekt document.write.)
Dal metody otevrajc, zavrajc nebo mnc vzhled okna prohlee si ukeme v sti 3.
V tto sti bude e o prci s okny a rmy.
Jin uiten metoda objektu window je setTimeout(). Metoda umouje provdt sti kdu
JavaScriptu po uritm asovm intervalu. Syntaxe kdu, kter m bt vykonn se d
stejnmi pravidly jako udlosti. Tedy pkazy nebo funkce JavaScriptu uzaven v
uvozovkch:
setTimeout("navys++; alert(Àhoj svte!`);", 500);
Kd nahoe vyk pl vteiny (asov daj se udv v milisekundch, 1/1000 sekundy), pot
nav promnnou navys a oteve dialogov okno alert s textem "Ahoj svte!".
Metoda setTimeout() vrac uniktn slo. Toto slo meme pout u metody
clearTimeout() pro zruen pkaz, kter se maj vykonat po uplynut asovho intervalu.
var id = setTimeout("nejakaFce(arg1, arg2);", 3000);

...dal pkazy JavaScriptu...
if (chyba)
clearTimeout(id);
Konkrtn pklad bude asi nejlep (clearTimeout):

<html>
<head>
<title>Pesmrovn strnky</title>
<!-var cekej = setTimeout("location.href=`nekam_jinam.html`;", 5000);
//-->
</script>
</head>
<body>
<h2>Pesmrovn strnky</h2>
Pokud neprojevte alespo trochu zjmu, budete za 5 vtein pesmrovn
pry.
</font>
<form>
<input type="button" value="ZRU" onClick="clearTimeout(cekej);">
</form>
</body>
</html>
Upozoruji, e setTimeout() metoda nezastavuje prohle, dn pauza! Nsledujc kd je

vykonn okamit. Pkazy nebo funkce uveden v metod setTimeout() se vykonaj pouze
jednou. V Netscapu 4.0 je metoda setInterval(), kter vykonv pkazy opakovan po
zadanm asovm intervalu. Metoda, kter naopak ru vykonvn tchto pkaz je
clearInterval().
Ukzka demonstruje uit metody setTimeout() pro opakovan voln funkce zobrazujc as
na strnce.
<html>
<head>
<title>as na strnce</title>
<!-function obnovCas() {
// Zskme dnen den a souasn as.
var PraveTed = new Date();
var hod = PraveTed.getHours().toString();
var min = PraveTed.getMinutes().toString();
var sec = PraveTed.getSeconds().toString();
// Formt asu.
if (min.length < 2)
min = "0" + min;
if (sec.length < 2)
sec = "0" + sec;
var cas = hod + ":" + min + ":" + sec;
/* Obnov zobrazen asu a pot za sekundu vol fci obnovCas().
Funkcm volajcm sami sebe se k rekurzivn. */
document.forms["hodiny"].cas.value = cas;
setTimeout("obnovCas();", 1000);
}
//-->
</script>
</head>
<body onLoad="obnovCas();">
<b>Pklad pouit metody setTimeout().</b>
<form name="hodiny">AS: <input type="text" name="cas" size="7">
</form>
</font>
</body>
</html>
7. Dl Objekty frame, document, image, link a form

V ptm dlu jsme zaali s objekty a vysvtlili si zkladn pojmy,v estm dlu jsme si ekli
nco vc o vlastnostech a metodch objekt, vestavnch objektech a hlavnm objektu
window. Dnes pokraujeme s objekty frame, document, image, link a form.
Objekt frame
Objekt frames nle do nejvyho objektu window. Pokud strnka obsahuje rmy pak hlavn
objekt window obsahuje pole nazvan frames s vlastnm objektem window pro kad objekt
tohoto pole.
Tyto rmy mou obsahovat dal rmy. Z rmu se meme odkzat na vytvec (rodiovsk
- frameset) okno pomoc zpisu window.parent nebo pouze parent. U vce zanoench rm
se d pout zpis window.parent.parent. Zpisem window.top se odkeme na nejvy okno
z kterhokoliv rmu.
Tyto vlastnosti umouj pracovat s daty nebo spoutt funkce v rmu z jinho rmu.
st ohledn rm je o nco sloitj na pochopen a proto j bude vnovna pozornost v
samostatn st 3 - Prce s okny a rmy.
Objekt document (objekty HTML)

Objekt document je jeden z nejpouvanjch. Obsahuje nkolik vlastnost, pomoc kterch
meme zjistit rzn informace o strnce. Zde jsou:
bgColor - barva pozad strnky.

fgColor - barva psma.
linkColor - barva odkazu.
vlinkColor - barva navtvenho odkazu.
location - vrac URL aktivn strnky.
reffer - vrac strnku, ze kter uivatel piel.
Title - obsahuje titulek strnky, kter je mezi HTML tagy <TITLE> a </TITLE>.
anchors - vrac poet ukotven na strnce.
lastModified - vrac datum a as posledn pravy HTML souboru.
images - vrac seznam obrzk na strnce.
forms - vrac seznam formul na strnce.
links - vrac seznam odkaz na strnce.
Cookie - vrac textov soubor s uivatelskmi cookies.
Vlastnosti nejastji odpovdaj hodnotm atribut v HTML tagu. Napkad bgColor

odpovd hodnot BGCOLOR= uveden v tagu <BODY>. Na dalch objekektech jako obrzky
a odkazy je to taky nzorn vidt.
Nezapomete, e vlastnosti images, forms a links jsou vrceny jako seznam. Tento seznam je
vlastn pole, vdy jedno pole pro kad element na strnce (obrzek, formul a odkaz)!!!
Pokud tedy chceme pracovat napklad s obrzkem:
var abc = document.images[3];
Tento zpis nm zpstupn obrzek v tvrtm <IMG> tagu na strnce (sluje se od nuly).
Pracovat s selnmi indexi je nevhodn. JavaScript natst umouje pout jmno obrzku
jako index pole, namsto sla.
var abc = document.images["jmeno_obr"];
Tento zpis vrt obrzek jeho atribut NAME v tagu <IMG> obsahuje "jmeno_obr".
Poznmka: Netscape ve verzi 3 obsahuje chybu. Pokud je obrzek umstn uvnit tabulky vrt
se stejn obrzek nkolikrt, tm pdem nememe pesn identifikovat hodnoty obrzku.
Nkdy se d pout jet zkrcenj zpis ne jsme si zatm uvedli. Pokud je prvek na strnce
uniktn tzn., dan jmno prvku se sm na strnce vyskytnout pouze jednou. Meme pout
zpis:
var abc = document.jmeno_obr;
Objekt Image
Informace o obrzcch jsou uloeny v objektu Image, tyto informace obsahuj URL obrzku,
jeho stav naten a informace o vce i ce. Pomoc pole images meme pistupovat ke
vem vlastnostem objektu Image. Ve vtin ppad pracujeme s obrzky, kter jsou v
images poli, ale nkdy potebujeme pracovat i s obrzky, kter jet na strnce nejsou.
Napklad chceme-li vytvoit efekt pro zmnu obrzku po najet kurzorem myi, je dobr
nast si pedem obrzek pro zmnu. Aby se nemohlo stt, e budeme s my nad obrzkem
ekat a ekat, ne se zmn. Proto vytvome nov objekt Image a do vlastnosti .src tohoto
novho objektu zadme cestu k obrzku:
var mujObr = new Image();
mujObr.src = "obr/obrazek2.gif";
S natenm strnky je i n dosud neviditeln obrzek uloen ve vyrovnvac pamti

prohlee (pokud ji nemme vypnutou). Pokud te kurzor myi najede nad obrzek, nate se
nov obrzek okamit.
Poznmka: Pklad se zmnou obrzku jsme si uvedli u v tetm dlu, ovem bez pednaten
obrzku pro zmnu.
V nsledujcm pkladu jsou uvedeny oba dva zmiovan ppady. V prvnm se obrzek
nezane natat dokud se nad nj nepesune kurzor myi a ve druhm je obrzek pednaten.
Poznmka, pklad nechod s Internet Explorer 3.0 nebo nim.
<html>
<head>
<title>Zmna obrzku</title>
<!-// Pednateme si obrzek `bigred.gif`.
var mujObr = new Image();
mujObr.src = "graphics/bigred.gif";
// Funkce na zmnu obrzku.
function zmenObr(jmeno, URL) {
document.images[jmeno].src = URL;
return true;
}
-->
</script>
</head>
<b>Ukzka vysvtluje, jak pednast obrzek pro odstrann pauzy u efektu
se zmnou obrzku:</b>
<p>

<a href="#"
onMouseOver="zmenObr(òbrazek1`, `graphics/biggreen.gif`)"
onMouseOut="zmenObr(òbrazek1`, `graphics/bigblue.gif`)"
<img name="obrazek1" align="right" border="0" src="graphics/bigblue.gif"
hspace="20">
</a>
<em>Bez pednaten.</em>
<p>
Pi pesunu kurzoru myi nad obrzek se zane natat obrzek pro zmnu.
<p>
<a href="#"
onMouseOver="zmenObr(òbrazek2`, `graphics/bigred.gif`)"
onMouseOut="zmenObr(òbrazek2`, `graphics/bigblue.gif`)"
<img name="obrazek2" align="right" border="0" src="graphics/bigblue.gif"
hspace="20">
</a>
<em>S pednatenm.</em>
<p>
V tomto ppad pokud nastavte kurzor myi nad obrzek, bude zmn velmi
rychle.
<em>(Pokud byl ji naten.)</em>
<p>
</font>
</body>
</html>
Objekt Link
Objekt Link nebude s nejvt pravdpodobnost pouvat moc asto. Nejzajmavj budou
asi vlastnosti href, kter vrac URL strnky.
document.links[0].href
Poznmka: Jestlie strnka obsahuje obrzkov mapy (imagemap), objekt Link je vytvoen
pro kad tag.
Objekt Form
Form objekt nen a tak zajmav sm o sob, ale obsahuje dal objekty, kter zpstupuj
ostatn prvky formule. Jsou zde objekty pro vstupn pole text, password, textarea, skryt
pole (hidden fields), zatrtka radiobutton a checkbox, roletky a tlatka reset a submit.
Kad prvek formule m svj vlastn objekt se svmi vlastnosmi. Vechny podporuj
vlastnost value. Vlastnost vrac jakkoliv daje zadan uivatelem, napklad textov vstup
nebo hodnotu pidlenou pomoc atributu VALUE v ktomu opovdajcmu HTML tagu (nap.:
<input type="hidden" value="www.moje.cz">).
Pro pstup k jednotlivm elementm formule, musme naped zpstupnit objekt form.
Podle pklad uvedench ji dve, meme tak uinit z objektu document jednm z tchto
zpsob:
document.forms[0]
document.forms["email"]
document.email
// prvn formul na strnce.

// formul s NAME="email" v tagu <FORM>.
// formul s NAME="email" v tagu <FORM>.
Podobn meme pistupovat i k vstupnm objektm pouitm pole elements nebo pmo
pomoc hodnoty atributu NAME="..." v <INPUT> tagu:
document.forms[0].elements[3]
// Tet vstupn prvek v prvnm formuli na strnce.
document.forms["objednavka"].elements["adresa"]
// prvek pojmenovan "adresa" ve formuli "objednavka".
document.objednavka.adresa
// prvek pojmenovan "adresa" ve formuli "objednavka".
Nejastj pouit je pro kontrolu daj ve formuli, ped odeslnm dat na server.
Jednoduch pklad demonstruje pstup k hodnotm ve formuli a vygenerovn chybovho
hlen, pokud je njak pole formule nevyplnno.
<html>
<head>
<title>Kontrola formule</title>
<!-// Funkce pro kontrolu pol formule. Vrt false pokud je pole przdn.
function kontrFormular() {
if (document.mujFormular.uzivCislo.value == "") {
document.mujFormular.uzivCislo.focus();
alert("Prosm zadejte vae uivatelsk slo.");
return false;
}
if (document.mujFormular.email.value == "") {
document.mujFormular.email.focus();
alert("Prosm zadejte emailovou adresu.");
return false;
}
if (document.mujFormular.tel.value == "") {
document.mujFormular.tel.focus();
alert("Prosm zadejte telefonn slo.");
return false;
}
return true;
}
//-->
</script>
</head>
<b>Pklad demonstruje pstup k hodnotm ve formuli, pokud
je njak pole formule nevyplnno, zobraz se chybov hlen.<br> <br>
Formul nelze odeslat pokud nejsou vechna pole vyplnna.</b>
<p>
Prosm, vyplte vechna pole:
<p>
<form name="mujFormular" onSubmit="return kontrFormular()"
action="dekuji.html" method="get">
<table border=0 cellpadding=2 cellspacing=0>
<tr>
<td><font face="Arial,Helvetica" size=3>Uivatelsk slo:</font></td>
<td><input name="uzivCislo" type="input" value="" size=30></td>
</tr>
<tr>
<td><font face="Arial,Helvetica" size=3>Emailov adresa:</font></td>
<td><input name="email" type="input" value="" size=30></td>
</tr>
<tr>
<td><font face="Arial,Helvetica" size=3>Telefon:</font></td>
<td><input name="tel" type="input" value="" size=10></td>
</tr>
</tr>
<tr>
<td align=center colspan=2><input type="submit" value="Odeslat">
<input type="reset" value="Vynulovat"></td>
</tr>
</table>
</form>
</font>
</body>
</html>
Pr poznmek k kdu:
Tag FORM pouv udlost onSubmit k voln funkce kontrFormular() pi stisku

tlatka Odeslat.
Kdykoli funkce kontrFormular() najde przdn vstupn pole, zobraz se chybov
hlen a metoda focus() nastav kurzor na toto przn pole.
Rovn, kdy je vstupn pole przdn, funkce vrt false. To zamez vykonn akce a
odesln dat formule.
8. Dl Objekty Date a Math

V ptm dlu jsme s objekty zaali a vysvtlili si zkladn pojmy, v estm dlu jsme si ekli
nco vc o vlastnostech a metodch objekt, vestavnch objektech a hlavnm objektu
window. Sedm dl navzal s objekty frame, document, image, link a form. A jak u jste si
mohli pest v vodu dnes ns ek o seznmen s objekty Date a Math plus strun shrnut
poznatk o objektech.
Objekt Date
S objektem Date jste se mohli v prbhu serilu setkat ji nkolikrt, napklad v estm dlu.
Nkdy jsou s tmto objektem v zatcch spojeny urit problmy a tak si ho vysvtlme o
nco podrobnj ne ostatn.
Hodnota asu je v objektu Date uloena jako poet milisekund od potku. Tento potek
je stanoven na 1.1.1970 greenwichskho asu. Je zde pouit standard z UNIXu, kde se toto
datum asto oznauje jako epocha, protoe krtce pedtm byl systm UNIX poprv
pedstaven potaovmu svtu.
Jist jste ji vichni urit pochopili, e objekt Date slou ke zjiovn informac o datu a
ase. pln nejjednodu pouit vypad takto:
<!-document.write(Date());
//-->
</script>
Jako informace se vm v prohlei zobraz:

Mon Jan 28 18:16:12 2002
Dal mon zpis, kdy objektu pedvme urit datum:

var datum=new Date("October 12, 1988 13:14:00") //Vynechte-li hodiny,
minuty
nebo sekundy hodnota bude nastavena na nulu.
var datum=new Date("October 12, 1988")
var datum=new Date(88,09,12,13,14,00)
var datum=new Date(88,09,12)
var datum=new Date(500) //as od potku v milisekundch.
Informace o ase sice mme, ale pro bnou praxi nejsou moc vyuiteln. Jsou anglicky a ani
vstup nepat mezi nejpehlednj. Natst existuje cel ada metod (vlastnosti nejsou),
kter nm prci s datem a asem usnadn. Ovem pedtm, ne tyto metody meme pout je
nutn objekt Date vytvoit pomoc zpisu, kter ji dobe znme:
var datum = new Date();
Metody, kter nyn ji na objekt meme pout jsou:
getNco() - zobraz napklad den v msci, minuty, rok.

setNco() - nastavme napklad den v msci, minuty, rok.
UTC() - metoda vrac poet milisekund uplynulch od potku, kter se vdy chpe
jako greenwichsk as.
Date.UTC(rok,msc,datum,hodiny,minuty,vteiny);
parse() - metoda vrac poet milisekund uplynulch od potku do mstnho asu.

Date.parse("msc_ENG, den_v_msci, Rok Hod:Min:Sec");
<!-document.write(Date.UTC(2002, 11, 24, 12, 0, 0) +"<br>"); //Vimnte
si as!
document.write(Date.parse("December, 24, 2002 13:00:00"));
//-->
</script>
toGMTString() a toLocaleString() - Konvertuje datum na etzec zachovvajc

Internet GMT konvence nebo lokln konvence pro zobrazen datumu a asu.
<!-var datum = new Date(); // vytvo objekt datum obsahujc aktuln
datum a as
var GMT = datum.toGMTString();
var mistni_cas = datum.toLocaleString();
document.write("Date():" + datum +"<BR>GMT: " + GMT +
"<BR>Mstn as: " + mistni_cas);
//-->
</script>
getTimetzoneOffset() - vrac asov posun loklnho (mstnho) asovho psma v

minutch.
<!-var datum = new Date();
document.write(datum.getTimezoneOffset());
//-->
</script>
Jednotliv metody get a set se v syntaxi moc neli a proto si probereme pouze get metody:
Metoda
Vznam
NN IE
ECMA
getDate()
Vrac den v msci (1-31).
2.0
3.0 1.0
getDay()
Vrac den v tdnu (0-6, kde 0=nedle).
2.0
3.0 1.0
getMonth()
Vrac msc (0-11).
2.0
3.0 1.0
getYear()
Vrac rok. Vce v tabulce ne.
2.0
3.0 1.0
getFullYear() Vrac letopoet v kompletn tymstn podob.
4.0
4.0 1.0
getHours()
Vrac hodiny (0-23).
2.0
3.0 1.0
getMinutes()
Vrac minuty (0-59).
2.0
3.0 1.0
getSeconds()
Vrac sekundy (0-59).
2.0
3.0 1.0
getTime()
Vrac poet milisekund, kter ubhly od 1.ledna 1970 (potku). 2.0
3.0 1.0
Poznmka: Vechny metody vracej slo, ne textov etzec! Pi pouvni tchto metod je
nutn nzvy metod zapsat sprvn vetn velkch a malch psmen.
Protoe s pechodem na rok 2000 se vyskytly problmy a kad vrobce prohlee je e
trochu odlin mte zde tabulku, kde najdete nvratov hodnoty pro metody getYear() a
getFullYear().
Prohle
getYear() 1998 getYear() 2000 getFullYear()
Netscape 2 Windows 98
100
nepodporuje
Netscape 2 Mac
100
nepodporuje
2000
nepodporuje
Netscape 3 Mac
2000
nepodporuje
2000
nepodporuje
98
98
Netscape 3 Linux
Explorer 3 Windows
98
100
nepodporuje
Explorer 3 Mac
98
2000
2000
Opera 3 Windows
98
100
nepodporuje
100
2000
Netscape 4 Mac
98
100
2000
Netscape 4 Linux
98
100
2000
Netscape 4 Solaris
98
100
2000
Explorer 4 Windows
98
2000
2000
Explorer 4 Mac
98
2000
2000
Opera 4 Windows
98
100
2000
Opera 4 Linux
98
100
2000
100
2000
Konqueror
Explorer 5 Windows
98
2000
2000
Explorer 5 Mac
98
2000
2000
Explorer 5 Solaris
2000
2000
100
2000
Netscape 6 Mac
98
100
2000
Netscape 6 Linux
98
100
2000
Objekt Math
Tento objekt obsahuje adu matematickch funkc (metod a vlastnost), kter se daj pi
nkterch vpotech vyut. Nsledujc tabulka ukazuje ty nejdleitj:
Metody
Nzev
Popis
abs()
Vrac absolutn hodnotu zadanho sla.
acos()
Vrac arcus kosinus zadanho sla v radinech.
asin()
Vrac arcus sinus zadanho sla v radinech.
atan()
Vrac arcus tangens zadanho sla v radinech.
cos()
Vrac kosinus zadanho hlu.
exp()
Vrac hodnotu ex, kde x je zadan slo.
log()
Vrac pirozen logaritmus zadanho sla.
max(x,y) Vrac vt ze dvou zadanch sel.

min(x,y)
Vrac men ze dvou zadanch sel.
pow(x,y) Vrac mocninu xy, kde x a y jsou zadan sla.

random() Vrac nhodn slo v rozsahu 0 a 1.
round()
Vrac zaokrouhlenou hodnotu zadanho sla.
sin()
Vrac sinus zadanho hlu.
sqrt()
Vrac odmocninu zadanho sla.
tan()
Vrac tangens zadanho sla.
Vlastnosti
Nzev
Popis
Eulerovo slo (2,718281828459045).
PI
Ludolfovo slo (3,141592653589793).
LN2
Pirozen logaritmus sla 2 (0,6931471805599453).
LN10
Pirozen logaritmus sla 10 (2.302585092994046).
SQRT1_2 Odmocnina z 0,5 (0,7071067811865476).

SQRT2
Odmocnina ze dvou (1,4142135623730951).
Pklady:
document.write(Math.round(8.6));
document.write(Math.random());
document.write(Math.PI);
Hody kostkou:
<!-var kostka;
kostka = Math.random();
kostka = Math.round(kostka*5)+1;
document.write(kostka);
//-->
</script>
Po tyech lekcch vnovanch objektm si snad pamatujete vraz objektov model

dokumentu. Dle, e objekty mou obsahovat dal objekty a promnn, kterm kme
vlastnosti a e objekt v sob m zabudovanou sadu funkc, kterm kme metody. Umte
vytvoit nov objekt a pokud nkde uvidte teku, eknete si "tekov" notace tu znm a
umm s n pracovat.
9. Dl Prce s okny a rmy

V dlech jedna a tyi jsme probrali zklady prce s JavaScriptem. Syntaxi jazyka, co jsou to
promnn, textov etzce, opertory, pkazy a funkce. Na pokoji jsme nenechali ani
podmnky a cykly a nakonec jsme si ekli nco o vlastnm provdn kdu a objasnili co jsou
to udlosti. V druh sti "Objekty", kter zabrala tyi dly, pt a osm jsme si opt vysvtlili
zkladn pojmy, vme co je to vlastnost a co metoda objektu. Znme vestavn objekty, hlavn
objekt window a v poslednch dvou pedchzejcch dlech jsme se seznmili i s objekty
frame, document, image, link, form, Date a Math.
st 3
Prce s okny a rmy
Nevm co vce ci k tto nov kapitole. Doufm, e nzev ve vystihuje. A proto zanme!
Vytvoen novho okna

V nkterch ppadech je vhodn otevt nov okno prohlee, napklad pro zobrazen krtk
textov zprvy, banneru nebo pi tvorb plovoucho menu. Ne vichni uivatel jsou nadeni
vyskakujcmi okny, ale s rozvahou a ohleduplnost mete zatraktivnit vzhled svch strnek.
Krtk kviz s pop-up okny
Jako pklad je uveden krtk kviz se temi otzkami o slunen soustav. Odpovdi jsou
zobrazeny po kliknut na odkaz v malm novm okn.
<html>
<head>
<title>Kviz na slunen soustavu</title>
<!-// Funkce otevrajc nov okno s zadanm URL.
function zobrOdp(url) {
window.open(url, "odpoved",
"height=100,width=100,directories=no,location=no," +
"menubar=no,resizeable=no,status=no,toolbar=no");
return false;
}
//-->
</script>
</head>
<body leftmargin=20 topmargin=20>

<b>Pklad s otevenm novho okna.</b>
<p>
KVZ:
<ol>
<li>Nejvt planeta solrnho systmu.<br>
<a href="#" onClick="return zobrOdp(`Jupiter.html`);">Odpov</a>
<p>
<li>Nejmen planeta?<br>
<a href="#" onClick="return zobrOdp(`Mercur.html`);">Odpov</a>
<p>
<li>Nejvzdlenj planeta od slunce?<br>
<a href="#" onClick="return zobrOdp(`Pluto.html`);">Odpov</a>
</ol>
</font>
</font>
</body>
</html>
Strnka s odpovd me vypadat napklad takto:

<html>
<head>
<title>Sprvn odpove</title>
</head>
<body bgcolor="#000000" text="#ffffff">
<center>
<font face="Arial,Helvetica" size=4><b>Jupiter</b></font>
<p>
<form>
<input type=submit value="Close" onClick="window.close(); return false;">
</form>
</center>
</body>
</html>
Pokud n slunen systm neznte tak dobe jako j :)), zde jsou odpovdi: 1. Jupiter, 2.
Merkur, 3. Pluto.
Kad odkaz na oven sprvnosti zodpovzen vol funkci zobrOdp() a ped ji URL
strnky se sprvnou odpovd. Ve volan funkci zobrOdp() je pouita metoda open() pro
vytvoen novho okna.
function zobrOdp(url) {
window.open(url, "odpoved",
"height=100,width=100,directories=no,location=no,menubar=no," +
"resizeable=no,status=no,toolbar=no");
return false;
}
Poznmka: V pkladu s kvizem je etzec obsahujc seznam parametr definujc vzhled

novho okna moc dlouh. Proto je rozdlen na dva dky a spojen pomoc opertoru `+`.
Vsledkem je jeden nerozdlen etzec.
Metoda open() m ti argumenty: URL strnky, jmno nov strnky a etzec obsahujc
seznam parametr definujcch vzhled novho okna.
window.open("URL","jmno_okna","parametry_okna");
URL udv umstn zdrojovho souboru, kter se m zobrazit v novm okn. Jmno_okna
udv nzev okna do kterho se m strnka nahrt, pokud okno s takovm nzvem neexistuje,
oteve se nov okno se zadanm jmnem. Parametry_okna vzhled novho okna definuj
(nap. toolbar=no, directories=no, menubar=no), zadvaj se vedle sebe a oddluj se rkou.
Parameter
Hodnota Funkce
toolbar
yes / no
M se zobrazit toolbar?
location
yes / no
dek s adresou dokumentu?
directories
yes / no
Zobrazit odkazy?
status
yes / no
Stavov dek?
menubar
yes / no
Hlavn menu?
scrollbars
yes / no
Posuvn lita?
resizable
yes / no
Schopnost mnit velikost okna?
copyhistory yes / no
M se penst historie strnek?
width
slo
rka novho okna v pixelech.
height
slo
Vka novho okna v pixelech.
top
slo
x-ov souadnice novho okna (od levho hornho rohu)
left
slo
y-ov souadnice novho okna (od levho hornho rohu)
Poznmka: msto yes/no mete pst 1/0.

Odkazy na okna
Vytvome-li nov okno a budeme chtt pozdji zmnit jeho obsah (okno mus bt oteven),
ulome vslednou hodnotu pkazu open() do promnn. Teba vytvome nov okno a
pozdji na njak podnt od uivatele meme pomoc vlastnosti location zmnit obsah
tohoto okna:
mojeOkno = window.open("nejaka_stranka.html", "", "height=100,width=100");
...
mojeOkno.location = "nova_stranka.html";
Kd nahoe nen nijak sloit a jist se d snadno pochopit, proto nebudu uvdt pklad.
Z nov vytvoenho okna se meme odkazovat na okno (pvodn), to z kterho bylo toto
nov okno vytvoeno pomoc vlastnosti opener, co je tak objekt.
Napklad:
window.opener.location = "nova_stranka.html";
Zmn obsah starho (pvodnho) okna (okna, z kterho vzniklo nov okno) na
nova_stranka.html.
Nejlpe asi bude uvst pklad. Tento krtk skript vytvo nov plovouc okno s odkazy. Po
kliknut na odkaz se plovouc okno zave a pvodn okno je pesmrovno na strnku z
odkazu.
<html>
<head>
<title>Plovouc menu</title>
<!-var plovMenu;
function zobrMenu()
{

var menu="\
<font face=Àrial,Helvetica,sans-serif` size=`2`>\
<ul>\
<li><a href=`#`
onClick=window.opener.location=`http://www.seznam.cz/`;window.close();>Sezn
am</a>\
<li><a href=`#`
onClick=window.opener.location=`http://www.quick.cz/`;window.close();>Quick
</a>\
<li><a href=`#`
onClick=window.opener.location=`http://www.uzdroje.cz/`;window.close();>U
zdroje</a>\
<li><a href=`#`
onClick=window.opener.location=`http://www.centrum.cz/`;window.close();>Cen
trum</a>\
</ul>\
<center>\
<form>\
<input type=submit value=`Close` onClick=`window.close(); return false;`>\
</form>\
</center>\
</font>"; //toto cel je jeden dlouh etzec

plovMenu = window.open("","","width=200,height=170");
plovMenu.document.write(menu); //vykreslen odkaz v plov. menu
}
//-->
</script>
</head>
<body>
<b>Pklad s plovoucm menu. Po kliknut na odkaz v menu se toto okno zave
a pvodn
strnka je pesmrovna na strnku vybranou.</b><br> <br>
<a href="javascript:zobrMenu();">Otevi menu</a><br>
<a href="javascript:plovMenu.close();">Zavi menu</a>
</font>
</body>
</html>
Poznmka: etzec obsahujc menu je opt dlouh a pro lep pehlednost je rozdlen na
vce dk. V tomto ppad je vdy na konec dku pidno zptn lomtko, kter skriptu
sdluje, e etzec pokrauje na dalm dku. Zde jsme nepouili opertor `+`.
Zavrn oken
Znovu se podvejte na plovouc menu z pedchozho pkladu i z pkladu se sluneni
soustavou. Okno mete zavt tradinm zpsobem nebo pomoc metody close().
<form>
<input type=submit value="Zavt" onClick="window.close(); return false;">
</form>
Po stisku tlatka je volna metoda window close(), kter zave okno, stejn jako Soubor ->
Zavt, kek v nstrojov lit nebo Alt+F4.
Poznmka: bez potvrzen meme zavt pouze okno, kter bylo vytvoeno pomoc skriptu.
Zkuste si nast odpov v kvizu na planety a zavt pomoc tlatka Close.
10. Dl Prce s rmy

V minulm dlu jsme si popsali jak vytvoit nov okno a rzn jeho parametry. Dnes si
vysvtlme, jak se odkazovat na jednotliv rmy a jak pouvat funkce nebo promnn v
jinch rmech. Pokud se mn podailo napsat tento dl srozumiteln a pochopiteln budete
umt ovldat rmy podle libosti.
Prce s rmy
Jak u jsem zmnil v sti o objektech JavaScriptu, rmy representuj samostatn okna. Kad
takov okno m svoje URL, historii a vlastnosti. Zaneme tedy hned pkladem, protoe jak
doufm ty rychlmu uen napomhaj nejvce.
V pkladu vytvome soubor oken, pomoc nsledujcho HTML kdu:
<html>
<head>
<title>Kurz JavaScriptu - frameset</title>
</head>
<frameset rows="310,*">
<frame src="ram1.html" name="ram1" scrolling="No">
<frameset cols="33%,33%,33%">
</frameset>
</frameset>
</html>
Potm, e strnky ram1.html a ram4.html si dokete vytvoit sami.

Pro jistotu:
<html>
<head>
<title>Rm 1</title>
</head>
<center>
<font face="Arial,Helvetica,sans-serif" size="4"><b>Rm 1</b></font>
</center>
</body>
</html>
Tmto HTML kdem vytvome tyi rmy, jeden nahoe a ti stejn velikosti pod nm. Jak
jsme si ji ukzali v minulch dlech barva pozad strnky se mn pomoc vlastnosti
bgColor. Ovem v tomto ppad nechceme mnit barvu stvajc strnky (rmu), ale mnme
barvu strnky v jinm rmu.
Tto zmny doclme tak, e ze stvajcho rmu (okna) hledme rodie tohoto rmu ili
vlastn strnku, ve kter jsou rmy definovan (frameset). Rodiovsk okno (strnku)
nalezneme pomoc vlastnosti window.parent (meme pout i u zmnnou vlastnost top,
kter ns odke na nejvy okno z kterhokoliv rmu). Nalezenm rodie mme k dispozici
objekt s definic vech rm a pouitm vlastnosti frames nsledn obdrme pole vech
rm. K jednotlivm polm meme pistupovat, jak u jsme si dve ukzali napklad
pomoc zpisu frames[jmeno_ramu]. Po inicializaci pole mme k dispozici objekt window
vybranho rmu a meme s nm pracovat, teba zmnit barvu pozad pomoc vlastnosti
bgColor.
Schma znzoruje jak meme pomoc vloen krtkho kdu do strnky ram1.html zmnit
barvu v rmu 4:
<form>
<input type="submit" value="Zmna rmu 4 na luto"
onClick="parent.frames[`ram4`].document.bgColor=`#FFFF00`">

</form>
Poznmka: Kd meme beze zmny vloit do jakhokoliv rmu (nejenom rmu 1) a bude
fungovat.
Jak vidte z obrzku z jednotlivch rm mohu pistupovat k ostatnm rmm pouze pes
rodiovsk objekt (frameset). Naopak z rodiovskho objektu s definic rm (frameset)
mohu pistupovat k jednotlivm rmm pmo.
Snad jste to alespo trochu pochopili. Nyn vytvome funkci zmBrvOkna(), kter po
kliknutm na tlatko v hornm okn budeme mnit barvu jednotlivch oken pod nm. Funkce
bude uloena v hornm rmu (ram1.html) a jako parametry budeme pedvat jmno okna a
barvu:
function zmBrvOkna(jmeno_ramu, barva) {

window.parent.frames[jmeno_ramu].document.bgColor = barva;
/* window.parent.window.frames[jmeno_ ramu].window.document.bgColor =
barva;
del zpis jako nahoe a d se peloit asi takto:
window.rodi. window.rm[jmno_ rmu].window.strnka.barva_pozad =
barva; */
return false;
}
Pro plnost, zde je upraven kd strnky rm 1 (ram1.html):

<html>
<head>
<title>Rm 1</title>
<!-// Funkce mnc barvu pozad v jinm rmu.
function zmBrvOkna(jmeno_ramu, barva) {
parent.frames[jmeno_ramu].document.bgColor = barva;
/* del zpis jako nahoe
window.parent.window.frames[jmeno_ ramu].window.document.bgColor = barva;
*/
return false;
}
//-->
</script>
</head>
<body>

<font size=4><b>Rm 1</b></font>
<p>
<b>Odkaz na ostatn rmy:</b>
<p>
Pouij tlatko pro zmnu barvy pozad rmu:
<p>
<form>
<table width="100%" border="0" cellspacing="1" cellpadding="4"
bgcolor="#C0C0C0">
<tr bgcolor="#000000">
<th><font color="#ffffff" face="Arial,Helvetica" size=3>Rm 2</font></th>
</tr>
<tr>
<td><input type="submit" value="erven" onClick="return
zmBrvOkna(`ram2`,`#ff0000`);"></td>
</tr>
<tr>
<td><input type="submit" value="Zelen" onClick="return
zmBrvOkna(`ram2`,`#00ff00`);"></td>
</tr>
<tr>
<td><input type="submit" value="Modr" onClick="return
zmBrvOkna(`ram2`,`#0000ff`);"></td>
</tr>
</table>
</form>
</font>
</body>
</html>
Odkazy na promnn a funkce

Nemusme se odkazovat pouze na document a ostatn window objekty dalch rm, ale
meme pouvat jakkoliv globln promnn nebo funkce definovan v ostatnch rmech.
Pklad, jak si nechat vypsat promnnou definovanou v jinm rmu:
document.write(window.parent.frames[`ram1`].mojeProm + "<BR>");
Nyn si ukeme, jak volat funkci zmBrvOkna() z jinho rmu. Do t spodnch strnek ve
kterch mnme barvu pidme kd pro zmnu na pvodn blou barvu.
<html>
<head>
<title>Rm 2</title>
</head>
<center>
<font face="Arial,Helvetica" size="4"><b>Rm 2</b></font>
<form>
<input type="submit" value="Default" onClick="return
window.parent.frames[`ram1`].zmBrvOkna(window.name, `#ffffff`);">
</form>
</center>
</body>
</html>
window.parent.frames[`hlavni_ram`].zmBrvOkna(window.name, `#ffffff`);
Jak vidte pouv se stejn postup jako pedtm. Opt se pomoc window.parent odkazujeme
na strnku s definicemi rm a pomoc frames["ram1"] se odkazujeme na vrchn rm (Rm
1). Pipojenm funkce zmBrvOkna() na konec volme tuto funkci i s parametry
(jmno_rmu, barva).
Vlastnost name pedvme jako parametr ve voln funkce zmBrvOkna(). Vlastnost name
objektu window vrac jmno aktulnho rmu z pole frames[] (jmno rmu je definovno v
tagu <FRAME>, NAME=hodnota). Tm pedme "automaticky" funkci zmBrvOkna() jako
parametr jmno rmu z kterho je tato funkce volna.
Opt schma pro snadnj pochopen:
Jak u jsme si ekli, stejnm zpsobem meme pistupovat i ke globlnm promnnm z

jinch rm. Stejn jako u funkce pouze pipojme jmno promnn na konec odkazu a ovem
zvorky vynechme. Zde je ukzka rznch monost pro nastudovn.
Snad se v rmech orientujete, snail jsem se to podat co nejsrozumitelnji. Pt ns ekaj
objekty location a history a jejich mon pouit.
11. Dl Objekty Location a History

Jak otevt nov okno a nsledn ho zavt ji umme. Ovlivovat rmy mezi sebou ji tak
umme a proto si dneska ukeme ji pouze urit finesy pi prci s okny a rmy.
Objekty window: Location a History

Objekt location
Objekt location obsahuje informace o URL aktuln naten strnky. URL strnky tak
meme zmnit pmo na novou adresu:
window.location = "http://www.google.com";
pln postauje:
location = "http://www.google.com"; //jak jsme si ji uvedli, objekt window
nemusme uvdt
Jako pklad me poslouit tento krtk kd, kter zmn aktuln strnku po 5 vteinch a
zobraz strnku www.google.com:
setTimeout("window.location = `http://www.google.com`;", 5000);
Okno meme tak zmnit nebo nast pomoc jedn ze dvou metod objektu location:
reload() - zpsob znovunaten strnky. Pouv se pokud potebujeme obnovit obsah

strnky.
replace(URL) - nate strnku danou URL v okn nebo rmu prohlee. Star
umstn strnky je v historii strnek pepsno souasnou strnkou. (Pokud napklad
navtvme strnku www.neco.cz/prvni.html, pot www.neco.cz/replace.html, kter ns
pomoc metody replace pesmruje na strnku www.neco.cz/druha.html. I kdy jsme
navtvili celkov ti strnky v historii prohlee jsou pouze dv,
www.neco.cz/prvni.html a www.neco.cz/druha.html.)
Pouit metody replace() zapin, e uivatel nen schopen vrtit se na pedchoz strnku
pomoc tlatka prohlee Zpt. Neznamen to, e uivatel neme pout tlatko Zpt
vbec, ale pokud ho pouije bude vrcen ped nahrazovac strnku (strnku, na kter jsme
pouili metodu replace).
Tato metoda me pi patnm pouit hodn ztit ivot uivatelm, jindy zase naopak me
bt jej pouit v nkterch situacch pmo vhodn. V nsledujcm pkladu pouijeme opt
metodu setTimeout() pro opakovan natn strnek s reklamou do rmu kad ti vteiny.
Nechte ukzku bet nkolik vtein a pot zkuste vrtit na vodn strnku pomoc tlatka
Zpt na prohlei.
<html>
<head>
<title>Reklama pomoc - location</title>
<!-// Seznam reklamnch strnek.
var stranky = new Array("rkl1.html", "rkl2.html", "rkl3.html");
var n = 0;
// Funkce mnc strnky s reklamou ve spodnm rmu.
function obnReklamu() {
window.parent.frames["reklama"].location = stranky[n];
if (++n >= stranky.length)
n = 0;
setTimeout("obnReklamu()", 3000);
}
//-->
</script>
</head>
<body onLoad="obnReklamu()">
<b>Pklad se zmnou reklamnho banneru.</b>
<p>
Pokad, kdy se banner zmn, je pidna nov URL do historie strnek v
prohlei.
Pokud by jste se chtli vrtit na pedchoz strnku pomoc tlatka zpt na
prohlei,
asi by jste se uklikali.
</font>
<p>
</body>
</html>
Museli jste nkolikrt klinout, e ano? A m dle by strnka bela, tm obtnj by bylo
vrtit se na pvodn strnku. Nyn si pedvedeme, jak tento problm vyeit pomoc metody
replace(). V pvodnm skriptu s reklamou vymte funkci obnReklamu() za tuto:
function obnReklamu() {
window.parent.frames["reklama"].location.replace(stranky[n]);
if (++n >= stranky.length)
n = 0;
setTimeout("obnReklamu()", 3000);
}
Objekt history
Dal z uitench objekt je objekt history, kter uchovv informace o URL vech
navtvench strnek. Objekt history podporuje ti metody:
forward() - nate URL strnky, kter nsleduje v historii za souasnou strnkou.

back() - nate URL pedchzejc strnky z historie.
go() tak nat URL strnek z historie prohlee. U tto metody mete definovat o
kolik pozic v historii se m prohle pesunout ze souasn pozice. Meme
napklad zapsat, e se prohle m vrtit o dv pozice nebo na strnku obsahujc v
URL urit textov etzec. Pokud metod go zadme jako argument textov etzec,
najde prvn strnku v historii, jej URL obsahuje zadan textov etzec.
Tyto dv metody jsou si ekvivalentn:

history.go(-1);
history.back();
//pi 0 se nahraje aktuln strnka
Tento pkaz nate prvn strnku jej URL v historii obsahuje slovo "netscape" (je brn zetel
na velikost psmen):
history.go("netscape");
// nepodporuje IE
Poznmka: Pokud pkaz neme vyhovt, neprojev se dn zmna a to u vech t metod.

Obsah okna se nezmn a nen vygenerovno chybov hlen.
Pedpokldejme, e mte strnku, na kterou vedou odkazy z ostatnch vaich strnek. Chceteli na tuto strnku vloit odkaz pro nvrat na pedchzejc strnku, nastv problm. Nevte, z
kter strnky byla souasn strnka natena. Proto nememe specifikovat atribut HREF=, ale
vyuijeme objekt history:
<a href="#" onClick="history.back(); return false;">Zpt</a>
Zmna obsahu strnky

Metoda scroll() umouje posouvat (rolovat) obsah webov stnky nebo rmu. Strnka me
bt posouvna jak horizontln, tak vertikln.
window.scroll(x,y); // Posune obsah okna nebo rmu na pozici udanou
parametry x a y, co jsou souadnice. Lev horn roh HTML dokumentu
odpovd souadnicm [0,0].
V uvedenm pkladu je spodn rm s pedpovd poas pro rzn svtov msta posouvn
pomalu nahoru.
<html>
<head>
<title>Rolujc pedpov poas</title>
<!-// Promnn y pro poten vertikln pozici rmu.
var y = 0;
function rolujRam() {
// Roluje rm s pedpovd poas vdy o jeden pixel (0-870) a vdy po
// 50 milisekundch vol funkci znovu.
y++;
if (y > 870)
y = 0;
window.parent.frames["pocasi"].scroll(0, y);
setTimeout("rolujRam()", 50);
}
//-->
</script>
</head>
<body bgcolor="#ffffff" text="#000000" onLoad="rolujRam();">
<b>Pklad rolujc strnky.</b>
</font>
</body>
</html>
V pkladu je strnka posouvna a do 870 pixel a pot se zane posouvat opt od zatku.
Dalm zpsobem jak pepsat obsah okna je pout metody write() a writeln() objektu
dokument. Tyto funkce umouj vypsn textovho etzce, ve kterm mohou bt i HTML
tagy pomoc prohlee na obrazovku monitoru. Nsledujc pklad vype text zadan do
formule v hornm rmu do spodnho rmu.
<html>
<head>
<title>Vypsn textu</title>
<!-function prepisRam() {
// Pepe obsah spodnho rmu textem vepsanm do formule.
window.parent.frames["text"].document.writeln(document.forms[0].text.value)
;
window.parent.frames["text"].document.close();
return false;
}
//-->
</script>
</head>
<b>Pklad s pepsnm obsahu jin strnky.</b>
<p>
Napite njak text a stisknte "Odeslat", text bude zobrazen ve spodnm
rmu.<br>
Mete pouvat i HTML tagy, jako napkad <B></B>,<BR>:
<form onSubmit="return prepisRam();">
<textarea name="text" rows=5 cols=80></textarea><br>
<input type="submit" value="Odeslat">

<input type="reset" value="Vymazat">
</form>
</font>
<p>
</body>
</html>
Mete si vyzkouet rzn experimenty s vkldnm rznch HTML tag. Napklad mete
pout tag <BODY> s rznou barvou pozad strnky. Dal experimenty se daj provdt i se
skripty, napite si njak skript a vyzkouejte si co se stane. Pklad pro ty s men fantazi :-)
<script>
alert("Ahoj lidi!");
</script>
Prohldnte si zdrojov kd spodnho rmu (prav tlatko myi a nsledn "Zobrazit

zdrojov kd") a uvidte, jak se projevil v vstup ve spodnm rmu.
Ve funkci prepRam() jsou nejdleitj tyto dva dky:
;
Prvn dek vype text zapsan do formule v hornm rmu do strnky v rmu spodnm.
Nsledn je volna metoda close(), kter prohlei sdl, e vstup je u konce a me dojt k
vyrendrovn (vygenerovn) strnky. Metoda close() by mla bt volna vdy, kdy dojde k
pepsn obsahu strnky.
Mal vylepen
Mon jste si vimli, e posledn pklad pidv kadou nov vygenerovanou strnku do
historie prohlee. S podobnm problmem jsme se u setkali na strnce s reklamou.
Problm vyeme podobn jako u reklamy, pidme jeden dek s metodou open() do funkce
prepRam().
Poznmka: Metoda open() je v tomto ppad metodou objektu document, ne window!
window.parent.frames["text"].document.open("text/html", "replace");
;
etzec "text/html" v metod open() sdluje prohlei, e m oekvat HTML data. Dal
etzec "replace" prohlei sdl, e nem pidvat poloky do historie prohlee. Je to
stejn jako, kdy pouijeme location.replace(URL) pi zmn obsahu okna nebo rmu.
Ostatn mon MIME-typy pro metodu open jsou:

"text/html" - implicitn HTML formt
"text/plain" - prost text, znaky HTML se neinterpretuj
"image/gif" - obrzek ve formtu GIF
"image/jpeg" - obrzek ve formtu JPEG
"image/x-bitmap" - obrzek ve formtu x-bitmap
Dalmi MIME-typy jsou identifikace formt pro instalovan rozen plug-in, kter se pak
staraj o jejich interpretaci sama.
Jednoduch zmna pedchzejcho pkladu snad ve objasn. Zmnn funkce prepRam()
po pidn jednoho dku nyn vypad takto:
function prepisRam() {
// Pepe obsah spodnho rmu textem vepsanm do formule.
window.parent.frames["text"].document.open("text/html", "replace");
;
return false;
}
Poznmka: V IE 6 nefunguje sprvn (pro, to nevim).
12. Dl Vce o formulch

Minulm dlem jsme dokonili kapitolu pojednvajc a oknech a rmech a dnes se pustme
trochu podrobnji do formul. Vysvtlme si rozdly mezi jednotlivmi elementy formule
a ukeme si pklady jejich poit. Zklady prce s formuli jsme si uvedli ji v sedmm
dlu.
st 4
Vce o formulch
Pouit formul
V doposud uvedench pkladech jste si mon u vimli, e jsme v pedstihu pouvali
vtinou elementy formule ve spojen s kdem JavaScriptu (napklad dl sedm a jedenct),
jako funkce rznch tlatek a textov vstupy. Elementy formule dovoluj uivateli interakci
se strnkou m jsou ideln pro pouit se skriptem. Dovoluj data shromdit a nsledn
provst akci podle vstupu uivatele. V tto tvrt sti se tedy podvme na rzn elementy
formule a ukeme si jak mohou bt pouity spolu se skriptem.
Objekt form
Pedtm, ne se pustme do jednotlivch element formule, tak se podvme na samotn
objekt form. Jak u jsme uvedli v sti 2 "Objekty JavaScriptu" je objekt form vytvoen pro
kad prov tag <FORM></FORM> na strnce. Podobn je tak vytvoen vlastn objekt pro
kad element (checkbox, radio a text) v objektu form (ve formuli). Tyto jednotliv objekty
element formule jsou uloeny v poli a dostaneme se k nim za pouit vlastnosti elements
objektu form.
K elementm formule budeme pistupovat stejn jako v minulch pkladech. Prvn pklad
obsahuje dva formule na strnce:
<html>
<head>
<title>Ukzkov formul</title>
</head>
<body>
<form action="/cgi-bin/customer.cgi" method="post" name="infozakaznik">
Jmno: <input type="text" name="jmeno"><br>
Adresa: <input type="text" name="adresa"><br>
<input type="submit" value="Odeslat"><input type="reset" value="Vymazat">
</form>
<form action="/cgi-bin/order.cgi" method="post" name="dataobjednavky">
ID zbo: <input type="text" name="idzbozi"><br>
Mnostv: <input type="text" name="mnozstvi"><br>
<input type="submit" value="Odeslat"><input type="reset" value="Vymazat">
</form>
</body>
</html>
Pro pstup k elementu formule "mnozstvi" meme pout jeden z nsledujcch zpis (ale
i dal):
var
var
var
var
mn
mn
mn
mn
=
=
=
=
document.forms[1].elements[1];
document.forms["dataobjednavky"].elements[1];
document.forms.dataobjednavky.elements["mnozstvi"];
document.dataobjednavky.mnozstvi;
Pro kad typ elementu formule (checkbox, radio a text) je k dispozici jin typ objektu.
Vtina z tchto objekt nabz k pouit vlastnost value a napklad metodu focus(). Ovem
nkter vlastnosti a metody jsou pslun pouze uritmu typu elementu formule a jeho
objektu.
Poznmky: Seznam vekerch objekt formule a jejich vlastnost a metod bude uveden v
poslednm dlu tto sti jako ploha.
Pokud chcete zjistit typ objektu pro urit element formule, pouijte vlastnost type. V
uvedenm pkladu je pomoc
document.dataobjednavky.mnozstvi.type
jako vsledek vrcen etzec "text".

Zpracovn formul (Form)
Normln obsahuje tag <FORM> atribut ACTION, kter specifikuje URL programu nebo
skriptu pro zpracovn na serveru. Jak u jsme uvedli v seznamu sprvc udlost udlost
onSubmit meme pout ke kontrole vstupu nebo jin manipulaci s daty pomoc JavaScriptu
jet pedtm, ne jsou data odeslna na server ke zpracovn. Pomoc nvratovch hodnot
true nebo false tak meme ovlivnit odesln dat. (Pokud bude napklad nkter pole
formule vyplnno chybn i vbec je vygenerovna chybov hlka a vrcena hodnota false
m nedojde k odesln formule. Odeslat pjde a budou vechny daje korektn vyplnny.)
Pokud chceme pouvat elementy formule pouze pro ovlivnn njakho kdu JavaScriptu a
nepoadujeme zpracovn na serveru, meme vynechat atributy ACTION= a METHOD=
(ppadn ENCTYPE=) v tagu <FORM>.
Typy element formule

Objekt Button
K dispozici mme ti typy tlatek. Tlatka Submit a Reset, kter jste ji urit vidli u mnoha
formul maj svj specifick typ objektu (submit a reset). Kad z tchto dvou tlatek
obsahuje svoj vestavnou funkci. Ukzka HTML kdu se vemi temi tlatky:
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<input type="button" value="Button">
Prv rozdl mezi ji uvedenmi tlatky Submit a Reset a obecn pouitelnm Button je ten,
e Submit a Reset maj nastavenou implicitn akci, kter se provede po stisku tlatka. Submit
odesl data na server a Reset mae jednotliv pole formule. Pro button mus bt
poadovan akce definovna za pomoci ulosti onClick.
Vykonn definovan implicitn akce element Submit a Reset mete pepsat pomoc
nvratov hodnoty false udlosti onClick. Nsledujc ukzka jednoduch kalkulaky ukazuje
jak pomoc vech t typ tlatek vykonat stejnou akci.
<html>
<head>
<title>Jednoduch kalkulaka</title>
<script>
// Funkce je volna pi stisku jakhokoliv ze t tlatek.
function secti() {
document.forms[0].soucet.value = parseInt(document.forms[0].prvni.value,
10) +
parseInt(document.forms[0].druhy.value,
10);
}
</script>
</head>

<b>Pklad pouit rozdlnch typ tlatek:</b>
<p>
Vlote dv sla a stisknte jakkoliv ze t tlatek pro souet:
<p>
<form>
<input name="prvni" type="text" value="" size=4> + <input name="druhy"
type="text" value="" size=4> =
<input name="soucet" type="text" value="" size=4>
<p>
<input type="submit" value="Seti - Submit" onClick="secti(); return
false;">
<input type="reset" value="Seti - Reset" onClick="secti(); return
false;">
<input type="button" value="Seti - Button" onClick="secti();">
</form>
</font>
</body>
</html>
Asi jste zaregistrovali, e jsme v pkladu pouili novou metodu (funkci) parseInt(). Funkce
pevd textov etzec na slo v zadan soustav. Funkce parseInt() je vestavn funkce
JavaScriptu. Tato metoda proto nen asociovan s dnm objektem, ale je soust jazyka
samotnho.
parseInt(etzec ,[soustava])
Pokud neuvedete dnou soustavu, JavaScript ji piad automaticky:
Zan-li etzec "0x", je zvolena soustava hexadecimln (16).

Zan-li etzec "0", je zvolena soustava oktalov (8).
Je-li etzec zapoat jinou hodnotou, je zvolena soustava decimln (10).
Pokud bysme tuto funkci nepouili a vstupn etzec nepevedli na slo obdrme jako
vsledek pi pokusu sest "2" a "2" opt etzec "22" a ne slo 4.
Tlatko Reset po stisku vymae (nastav) veker pole formule na jejich implicitn hodnoty,
specifikovan pomoc atributu VALUE=. Toto se nm nkdy nehod, a to tehdy pokud
potebujeme vymazat pole formule pln a ne vrtit na hodnotu v atributu VALUE. Jak
doclit toho, aby se elementy formule vymazaly pln si ukeme v nsledujcm pkladu,
kdy pepeme implicitn hodnoty VALUE na null.
<html>
<head>
<title>Mazn</title>
<!-// Funkce pro vymazan implicitnch hodnot (value) formule jet ped
vykonnm zabudovan funkce tlatka Reset.
function clearFields(f) {
f.vyrobce.defaultValue = "";
f.os.defaultValue = "";
return true;
}
//-->
</script>
</head>
<b>Nadefinovn vlastn akce tlatku <i>Reset</i>:</b>
<p>
Prosm vyplte nsledujc informace:
<p>
<form onReset="return clearFields(this);">
<table border="0" cellspacing="0" cellpadding="4">
<tr>
<td><font face="Arial,Helvatica" size=3>Vrobce potae:</font></td>
<td><input type="text" name="vyrobce" value="Compaq" size="30"></td>
<td><font face="Arial,Helvatica" size=3>Model:</font></td>
<td><input type="text" name="model" size="30"></td>
</tr>
<tr>
<td><font face="Arial,Helvatica" size=3>Operan systm:</font></td>
<td><input type="text" name="os" value="Windows 95" size="30"></td>
<td><font face="Arial,Helvatica" size=3>Verze:</font></td>
<td><input type="text" name="version" size="30"></td>
</tr>
<tr>
<td colspan="4"><input type="reset" value="Reset"></td>
</tr>
</table>
</form>
</font>
</body>
</html>
Objekty Text, Password, Hidden a Textarea

Tyto objekty jsou si navzjem velmi podobn, u vech je vstupem textov etzec. Rozdl je
zejmna v zobrazen na obrazovce:
Text - jedna dka s textem, me bt jakkoliv dlky.

Password - stejn jako v pedtm jedna dka s textem. Ovem veker napsan znaky
v tomto poli jsou nahrazeny za "*", aby se pedelo monmu spaten citlivch dat na
obrazovce.
Hidden - tak jedna dka s textem, ale text zde uveden se nezobrazuje na strnce a
neme bt mnn uivatelem pmo. Hodnotu VALUE elementu mete mnit v
kdu.
Textarea - vcedkov text. Zadan text je reprezentovn jako jeden textov etzec.
V mstech, kde jsme zadali Enter je vloen znak pro zatek novho dku.
Poznmka: Skryt pole se pouvaj pro penos informac na a ze serveru. Pestoe nejsou na
strnce zobrazena lze se k nim dostat pes zdrojov kd strnky. Proto pokud tmto zpsobem
chcete pedvat citliv informace je dobr tyto data njak zaifrovat, aby je mohl zptn
deifrovat pouze k tomu uren server.
Elementy text a textarea poskytuj udlost onChange, kter umouje provst akci pi zmn
pole formule. Vyuit tto udlosti demonstruje dal pklad. Vimnte si, e udlost
OnChange je volna pouze pokud uivatel vstupn pole zmn a pot opust (pomoc klvesy
TAB, myi nebo stiskem klvesy ENTER).
<html>
<head>
<title>onChange</title>
<!-// Potadlo pro poet voln funkce aktualInfo().
var pocet = 0;
// Funkce pro sumarizaci vstupnch daj.
function aktualInfo() {
pocet++;
document.forms[0].all.value = "Poet voln: " + pocet + "\n\n" +
document.forms[0].jmeno.value + " " +
document.forms[0].prijmeni.value + "\n" +
document.forms[0].adresa.value + "\n" +
document.forms[0].psc.value + " " +
document.forms[0].mesto.value + "\n";
}
//-->
</script>
</head>


<b>Pklad se zachytvnm zmny vstupnho textu:</b>
<p>
Prosm vyplte nsledujc informace:
<p>
<form>
<table border=0 cellpadding=4 cellspacing=0>

<tr>
<td><font face="Arial,Helvatica" size=2>Jmno:</font></td>
<td><input name="jmeno" type="text" value="" size=20
onChange="aktualInfo()";></td>
</tr>
<tr>
<td><font face="Arial,Helvatica" size=2>Pjmen:</font></td>
<td><input name="prijmeni" type="text" value="" size=20
</tr>
<tr>
<td><font face="Arial,Helvatica" size=2>Adresa:</font></td>
<td><input name="adresa" type="text" value="" size=40
</tr>
<tr>
<td colspan=2>
<font face="Arial,Helvatica" size=2>Msto:</font> <input name="mesto"
type="text" value="" size=20 onChange="aktualInfo()";>
<font face="Arial,Helvatica" size=2>PS:</font> <input name="psc"
type="text" value="" size=5 onChange="aktualInfo()";>
</td>
</tr>
<tr><td> </td></tr>

<tr><td colspan=2><textarea name="all" rows=4 cols=60></textarea></td></tr>
</table>
<p>
</form>
</font>
</body>
</html>
Poznmka: Stisk klvesy ENTER v nkterch prohlech nevyvol udlost onChange (IE 5.5
a vy Opera 5.0 a vy).
Mon jste si zjistili, e hodnota ve vstupnm poli mus bt skuten zmnna, aby dolo k
voln udlosti. Pokud uivatel vstup smae nevystoup z pole a nsledn znovu vepe stejn
text udlost onChange volna nebude. Ovit si to mete pozorovnm hodnoty "Poet
voln" v textov oblasti uvedenho pkladu.
Objekt Checkbox
Elementy formule checkbox a radio se pouvaj k vbru z vce monost. Element
checkbox je vhodn pout v ppad, e vm sta pouze jednoduch odpov typu "ano"
nebo "ne". Element radio je vhodn pout tam, kde chceme vybrat pouze jednu z nabzench
monost.
Objekt checkbox je nastaven s hodnotou atributu VALUE v HTML tagu. Tato hodnota je na
server odeslna pouze v ppad, e polko formule je zakrtnuto. Vlastnost checked uruje
stav elementu, true pokud je polko zakrtnuto a false pokud ne.
Stav elementu (zakrtnut/nezakrtnut) mete zjiovat a ovlivovat pomoc JavaScriptu. V

pkladu si uivatel me vybrat se seznamu jednotliv typ zbo nebo zakrtnout i
odkrtnout vechna pole najednou pomoc jednoho stisku tlatka.
<html>
<head>
<title>Zakrtnout/odkrtnout vechny checkboxy</title>
<!-// Funkce pro zakrtbut/odkrtnut vech polek najednou.
function nastavZatr(zatr) {
document.forms[0].option1.checked = zatr;
}
//-->
</script>
</head>

<b>Pklad s poutm checkbox:</b>
<p>
Prosm zakrtnte typ zbo k dodn:
<p>
<form>
<input type="checkbox" name="option1" value="X-plod WWW server">X-plod WWW
server<br>
<input type="checkbox" name="option2" value="90d podpora">90 denn
podpora<br>
<input type="checkbox" name="option3" value="Extended pack">Extended
pack<br>
<input type="checkbox" name="option4" value="Titn pruka">Titn
pruka<br>
<p>

<input type="button" value="Select All" onClick=" nastavZatr(true);">
<input type="button" value="UnSelect All" onClick=" nastavZatr(false);">
</form>
</font>
</body>
</html>
13. Dl Vce o formulch 2. st

V minulm dle jsme si zopakovali pouit objektu form na strnce. ekli si nco o
zpracovn formul a piblili si elementy button, text, password, hidden, textarea a
checkbox. Dnen dl bude navazovat objekty radio, select a option. Na konci najdete seznam
vech objekt formule a jejich monch vlastnost a metod.
Objekt Radio
Element "radiobutton" se odliuje od checkboxu tm, e umouje volit z vce alternativ ne
dv. Napklad chceme na strnce zjistit vkov rozloen nvtvnk. Przkum si na strnku
meme pidat nsledovn:
<input
<input
<input
<input
<input
<input
name="vek"
name="vek"
name="vek"
name="vek"
name="vek"
name="vek"
type="radio"
type="radio"
type="radio"
type="radio"
type="radio"
type="radio"
value="pod 18">pod
value="18 - 25">18
value="25 - 35">25
value="35 - 45">35
value="45 - 55">45
value="nad 55">nad
18<br>
- 25<br>
- 35<br>
- 45<br>
- 55<br>
55
Vimnte si, e vechna tlatka (radiobutton) maj stejn jmno, vek. Radio tlatka se
shlukuj do skupin, kde jednu skupinu vdy tvo stejn pojmenovan tlatka. K tomu, aby
prohle poznal, kter tlatko pat k jedn skupin je nutn, aby vechny tlatka v tto
skupin mla stejnou hodnotu atributu NAME. Mme-li takovou skupinu tlatek, pjde ve
skupin stisknou pouze jedno. Pokud stisknete jin tlatko, je pvodn zatren automaticky
smazno. Pi odesln formule na server je hodnota zatrenho tlatka odeslna jako
vsledek cel skupiny.
Kad tlatko ve skupin je reprezentovno svm objektem radio. Stejn jako checkbox m
kad takovto objekt vlastnost value, kter odpovd hodnot atributu VALUE= pslunho
tlatka v HTML a stejn tak i vlastnost checked. Rozdl je prv v tom, e jak ozname
jedno tlatko na strnce nebo pomoc kdu, je oznaen pedelho automaticky zrueno.
Nyn ji slym otzku: Jak mu pistoupit k jednotlivm tlatkm, kdy maj vechny
stejn jmno? Odpov je jednoduch, objekt radio je vlastn pole, kde jsou zvl uloeny
jednotliv parametry pro kad tlatko ve skupin. Pouitm nsledujcho krtkho kdu
meme pistoupit postupn ke kadmu tlatku ve skupin.
var rbutt;
for (i = 0; i < document.forms["mujformular"].vek.length; i++) {
rbutt = document.forms["mujformular"].vek[i];
if (rbutt.checked) {
... njak dal kd
}
}
Opt pipomnm, e z cel skupiny me bt zatrhnuto pouze jedno tlatko. To znamen, e

pouze jedno tlatko me vrtit true pi pouit vlastnosti checked. Nsledujc pklad
demonstruje jak najt zvolen hodnoty tlatek ve vcero skupinch.
<html>
<head>
<title>Zobrazen stisknutch tlatek.</title>
<!-// Funkce pro zobraz vybran hodnoty pro kad stisknut tlatko.
function zobrVyber () {
var str = "";
var i;
// Najde vk.
for (i = 0; i < document.forms[0].vek.length; i++)
if (document.forms[0].vek[i].checked)
str = str + "Vkov skupina: " + document.forms[0].vek[i].value +
"\n";
// Najde vdlek.
for (i = 0; i < document.forms[0].vydelek.length; i++)
if (document.forms[0].vydelek[i].checked)
str = str + "ist vdlek: " + document.forms[0].vydelek[i].value +
"\n";
// Najde stav (svobodn/enat).
for (i = 0; i < document.forms[0].stav.length; i++)
if (document.forms[0].stav[i].checked)
str = str + "Stav: " + document.forms[0].stav[i].value + "\n";
alert(str);
}
//-->
</script>
</head>
<body>
<!- Seznam jednotlivch monost. -->
<b>Pklad pouit radio tlatek:</b>
<p>
Prosm vyplte poadujc daje:
<p>
<form>
<tr valign=top>
<td><font size="-1">
<strong>Vae vkov skupina:</strong>
<p>
<input name="vek" type="radio" value="pod 18">pod 18<br>
<input name="vek" type="radio" value="18 - 25">18 - 25<br>
<input name="vek" type="radio" value="nad 55">nad 55</font>
</td>
<strong>Rozmez vaeho istho vdlku:</strong>
<p>
<input name="vydelek" type="radio" value="pod 5 000 K">pod 5 000 K<br>
<input name="vydelek" type="radio" value="5 000 - 10 000 K">5 000 - 10 000
K<br>
<input name="vydelek" type="radio" value="10 000 - 15 000 K">10 000 - 15
000 K<br>
<input name="vydelek" type="radio" value="15 000 - 20 000 K">15 000 - 20
000 K<br>
<input name="vydelek" type="radio" value="nad 20 000 K">nad 20 000

K</font>
</td>
<strong>Status:</strong>
<p>
<input name="stav" type="radio" value="enat/">enat/<br>
<input name="stav" type="radio" value="Rozveden/">Rozveden/<br>
<input name="stav" type="radio" value="Svodn/">Svodn/<br></font>
</td>
</tr>
</table>
<p>
<!- Zobraz vybran hodnoty pro kad stisknut tlatko. -->
<input type="button" value="Zobraz vybran" onClick="zobrVyber();">
</form>
</font>
</body>
</html>
Mon jste si vzpomnli na minul dl, kdy jsme pomoc skriptu oznaovali i odznaovali
vechna zatrtka. Jak to vyeit v ppad, e zatrtek je moc a kd by se tm znan
prothnul? Stejn jako v pedchzejcm ppad. Vem zatrtkm dme stejn jmno a
oznaujeme nebo odznaujeme je pomoc skriptu:
function nastavZatr(zatr) {
for (i = 0; i < document.forms[0].jmno.length; i++)
document.forms[0].jmno[i].checked = zatr;
}
Poznmka: Vdy je dleit zvit, kter zpsob je vhodnj, krat a efektivnj.

Zjednoduen se d ct, e m krat kd, tm lep.
Objekt Select a Option
Roletka s vbrem ze seznamu je dal cestou jak nabdnout uivateli volbu z vce monost.
Zkladn formt pro pidn roletky se seznam vypad nsledovn:
<form name="mujF">
<select name="kraje" size="1">
<option value="Jihoesk">Jihoesk</option>
<option value="Jihomoravsk">Jihomoravsk </option>
<option value="Karlovarsk">Karlovarsk</option>
<option value="Krlovehradeck">Krlovehradeck</option>
<option value="Libereck">Libereck</option>
<option value="Moravskoslezsk">Moravskoslezsk</option>
<option value="Zlnsk">Zlnsk</option>
</select>
</form>
Objekt select je vytvoen pro kad prov tag <SELECT></SELECT> nachzejc se na

strnce. A ji tradin takto vznikl objekt Option obsahuje pole se seznamem vech
vlastnost, jedna poloka pole vdy pedstavuje jeden <OPTION></OPTION> tag z HTML
strnky. K jednotlivm polokm pole pistupuje pomoc vlastnosti options.
Poznmka: IE 3.0 nepodporuje objekty Select a Option.
Dal dv vlastnosti objektu Select, kter byste mli znt, protoe je budete asto pouvat
jsou length, kter vrt poet poloek option v poli options. Druhou uitenou vlastnost je
selectedIndex, kter vrac slo vybranho prvku z roletky uivatelem. Mjte prosm na
pamti, e toto slo pat poli a proto prvn poloka pole je oznaena slem 0 (Jihoesk).
Nejlpe bude si tyto nov vlastnosti vyzkouet na pkladu a ve bude hned jasn. Do tagu
<SELECT> se seznamem kraj pidejte sprvce udlosti onChange="zobrVyb();" a na
strnku vlote nsledujc skipt:
<!-function zobrVyb() {
var n = document.forms["mujF"].kraje.length;
var i = document.forms["mujF"].kraje.selectedIndex;
var s = document.forms["mujF"].kraje.options[i].value;
alert(s); //Postupn mte nzev promnn a uvidte.
}
//-->
</script>
Uveden pklad funguje dobe pouze pokud je vybrna jedna poloka ze seznamu.
Pouijeme-li v tagu <SELECT> atribut MULTIPLE me uivatel vybrat vce poloek ze
seznamu souasn (pidrenm klvesy Ctrl nebo Shift, podle standardu Windows). V tomto
ppad by nm vlastnost selectedIndex vrtila pouze prvn oznaenou poloku!
Pro prci s vcero oznaenmi polokami nm JavaScript nabz vlastnost selected. Pomoc
tto vlastnosti meme otestovat vechny v objektu option. Nsledujc pklad ukazuje jak
opakovat dotaz pro zjitn vech oznaench poloek uivatelem a jejich nsledn vpis.
<html>
<head>
<title>Vcensobn vbr</title>
<!-// Funkce pro zobrazen vech vybranch poloek seznamu.
function zobrVyber() {
var i;
var str = "";
for (i = 0; i < document.forms[0].seznam.length; i++)
if (document.forms[0].seznam[i].selected)
str = str + document.forms[0].seznam[i].value + "\n";
alert(str);
}
//-->
</script>
</head>
<body>

<b>Pklad s vcensobnm vbrem ze seznamu:</b>
<p>Prosm vyberte jednu nebo vce kategori:
<form>
<select name="seznam" size="9" multiple>
<option value="Novinky">Novinky</option>
<option value="Sport">Sport</option>
<option value="Poas">Poas</option>
<option value="Zbava">Zbava</option>
<option value="Spolenost">Spolenost</option>
<option value="Udlosti">Udlosti</option>
<option value="Ekonomie">Ekonomie</option>
<option value="Zahrada">Zahrada</option>
<option value="Nemovitosti">Nemovitosti</option>
</select>
<p>
<input type="button" value="Uka oznaen" onClick="zobrVyber();">
<input type="reset" value="Odzna">
</form>
</font>
</body>
</html>
Nakonec je zde slben seznam vech objekt formule a jejich monch vlastnost a metod.
Snad vm bude uiten.
Objekt
Vlastnosti
Metody
Udlosti
Button
form, name, type, value
blur(), click (), focus(),

handleEvent(udlost)
onBlur="kdJavaScriptu",
onClick="kdJavaScriptu",
onFocus="kdJavaScriptu",
onMouseDown="kdJavaScriptu",
onMouseUp="kdJavaScriptu"
Checkbox
checked, defaultChecked, blur(), click(), focus( ),

handleEvent(udlost)
onFocus="kdJavaScriptu"
Form
action = URL, elements, handleEvent(udlost),

encoding, length, method, reset(),submit()
name, target
onReset="kdJavaScriptu",
onSubmit="kdJavaScriptu"
Hidden
dd metody objektu Object (watch,

unwatch - pouze NN)
Option new
defaultSelected, selected, dd metody objektu Object (watch,
Option(text,
text, value
unwatch - pouze NN)
value,
defaultSelected,
selected)
Password
defaultValue, form, name, blur(),focus(),handleEvent(udlost), onBlur="kdJavaScriptu",

type, value
select()
Radio
checked, defaultChecked, blur(), click(), focus( ),

handleEvent(udlost)
Reset
blur(), click (), focus(),

handleEvent(udlost)
Select
form, length, name,

options, selectedIndex,
type
blur(), focus( ),
handleEvent(udlost)
onChange="kdJavaScriptu",
Submit
blur(), click(), focus( ),

handleEvent(udlost)
Text
defaultValue[ =
blur(), focus( ),
"novDefaultnHodnota"], handleEvent(udlost), select()
onSelect=" JavaScript"
Textarea
defaultValue[ =
blur(), focus( ),
"novDefaultnHodnota"], handleEvent(udlost), select()
onKeyDown="JavaScript",
onKeyPress="JavaScript",
onKeyUp="JavaScript",
onSelect=" JavaScript"
14. Dl Tvorba vlastnch objekt

V minulch dvou dlech jsme se vnovali o nco podrobnji formulm a od tto sti se
dostvme k nkterm "sloitjm" monostem pouvn JavaScriptu. Nepjdu pln do
detail, ale radi opt pedvedu nkolik pklad a nastnm zkladn pouit. Dal studium je
ji na vs. Dnes si povme nco o tvorb vlastnch objekt.
st 5
Tvorba vlastnch objekt
V Javascriptu mme ji standardn zabudovanou sadu nkolika objekt tkajcch se jak

obsahu vlastn strnky, tak napklad datovch typ a dal. Ovem nejste omezeni pouze na
pouvn tchto zabudovanch objekt, mete si vytvoit objekty vlastn i s jejich
vlastnostmi a metodami! Urit se vm to bude hodit napklad pi prci s obshlmi
datovmi strukturami nebo pro zjednoduen kdu.
Pro vytvoen novho objektu muste nejdve vytvoit konstruktor. To je funkce, kter
definuje vlastnosti vaeho objektu a v nkterch ppadech nastav i jejich poten hodnoty.
Nsledn, pot co mme definovny vlastnosti novho objektu meme vytvoit metody,
kter mohou s objektem pracovat.
Funkce konstruktoru
Kad objekt potebuje funkci konstruktoru. Tato funkce je volna pokad, kdy vytvome
novou instanci objektu za pouit opertoru new. Pomoc konstruktoru jsou definovny
vlastnosti objektu s jejich potenmi hodnotami. Ve funkci konstruktoru meme tak
deklarovat metody naeho novho objektu.
Pklad ukazuje konstruktor pro nov objekt nazvan Produkt, ve kterm jsou uloeny daje vlastnosti o rznch katalogovch vrobcch.
function Produkt(jmeno, idcislo, cena, doprava, mnozstvi) {
this.jmeno = jmeno; //vlastnost jmeno ve funkci konstruktoru Produkt
this.katolgid = idcislo; //vlastnost katolgid ve funkci konstruktoru
Produkt
this.cena = cena;
this.doprava = doprava;
this.mnozstvi = mnozstvi;
}
Jmna parametr ve funkci Produkt a jmna vlastnost naeho novho objektu se pro snaz
orientaci ve vtin ppad shoduj, ale nen to povinnost. U novho objektu mohou bt
poten hodnoty jednotlivch vlastnost nastaveny pi jeho vzniku nebo a pozdji. Pokud
bychom potebovali mt hodnotu urit vlastnosti nastavenu konstantn, definujeme ji ve
funkci Produkt. Napklad do funkce Produkt pidme dek:
this.prodejna = "Praha 6";
Ale ani hodnota vlastnosti prodejna nen nastavena "napevno" a d se mnit.
Nov jsme pouili klov slovo this, kter odkazuje na objekt, ke ktermu se konkrtn
vlastnost i metoda vztahuje. V tomto pklad tedy odkazuje na objekt Produkt. Pokud
chceme vytvoit instanci objektu Produkt, meme toho doclit takto:
var polozka1 = new Produkt("mixer", "9003-2", 2523, 150, 2);
var polozka2 = new Produkt("mycka", "9117-1", 7688, 300, 1);
Nov objekt meme vytvoit i bez potench hodnot a ty zadat a pozdji. Hodnoty
stvajcch objekt jde tak mnit:
var polozka3 = new Produkt();
polozka3.jmeno = "robot";
polozka1.cena = 2223;
Asi u jste zaregistrovali, e k tmto novm vlastnostem se dostvme stejn jako k

jakmkoliv jinm vlastnostem. Pomoc tekov notace:
var celkem = (polozka1.cena + polozka1.doprava) * polozka1.mnozstvi;
Definice novch metod

dek kdu nahoe nm ukazuje jednu cestu jak spotat celkovou sumu za vrobek, kter je
sloena z ceny vrobku, dopravy a balnho a vynsobena potem kus. Pokud budeme tento
vpoet potebovat astji, mon by se nm na to mohla hodit njak metoda. Abychom tak
mohli uinit musme pepsat funkci konstruktoru, kde definujeme metodu nazvanou celkem.
Pro tuto novou metodu tak zhotovme funkci.
function Produkt(jmeno, idcislo, cena, doprava, mnozstvi) {
this.jmeno = jmeno;
this.katolgid = idcislo;
this.cena = cena;
this.doprava = doprava;
this.mnozstvi = mnozstvi;
this.celkem = celkem; //deklarace metody celkem
}
function celkem() {
}
return ((this.cena + this.doprava) * this.mnozstvi);
Formt v konstruktoru pro definovn nov metody je this.jmenoMetody = jmenoFunkce.

Nen nutn, aby se jmno metody a funkce shodovalo, ovem pro jasnost a srozumitelnost
zpisu jsem pouil stejn jmno. Nyn ji meme pout:
var prodCelkem= polozka1.celkem ();
sumu za jeden prodan vrobek
//metoda celkem nm spote celkovou
15. Dl Cookies
Minule jsme si pedvedli jak si vytvoit vlastn objekt a protoe do konce vuky u moc dl
nezbv budou tyto posledn dly o nco krat ne bylo zvykem na zatku. Kad ze
zvrench dl pojednv o urit oblasti a podle m nem cenu kombinovat dv rzn
oblasti v jednom dlu. To by jako vysvtlen na vod mohlo stait a nyn k dnenmu dlu.
Ukeme si pouit cookies na strnce s jednoduchm formulem a rozebereme si jednotliv
parametry cookies.
st 6
Prce s cookies
Hned na vod si dovolm poznamenat, e pehnan strach z cookies nem opodstatnn.

Cookies se sice na disk ukldaj bez vaeho vdom (mete si zapnout potvrzovn), ale
ukldaj se do urenho adrese a obsah takto uloen cookie si me zpt vythnout jenom
strnka, kter ji stvoila. O tom, e by cookies vykonaly njak kd i odeslaly informace z
vaeho potae neme bt ani e.
Te, kdy jsem zahnal chmury meme pokraovat. Cookies jsou tedy cesta jak uloit
urit informace na uivatelov potai, kter mohou bt zskny zpt nkdy pozdji. Toho
meme vyut pro uloen vyplnnho formule (jmno, pjmen nebo adresa), aby uivatel
nemusel tyto informace vyplovat nanovo, pihlaovacch daj (jmno, ID) nebo pi
individulnm nastaven strnky (napklad na Mobilmanii je pomoc cookies uloen v
kabtek).
Cookies se vytvej s pouitm nsledujcch informac:
jmeno=hodnota - Tento etzec reprezentuje jmno cookie a veker data pod tmto
jmnem uloen.
Expires - Datum, po kterm je informace v cookie star a ji nepotebn. Pokud
souasn datum pekro toto datum, cookie se automaticky smae. Nezad-li se dn
datum vypren platnosti, je cookie smazna okamit po zaven strnky.
Path - Parametry Path a Domain jsou pouity z bezpenostnch dvod. Normln je
cookie pstupn pouze strnkm, kter jsou ve stejnm adresi jako strnka, kter
cookie vytvoila. Pokud chceme cookie zpstupnit i pro ostatn strnky, musme to
uvst v tomto parametru.
Domain - Obdoba parametru Path. Parametr zpstupn cookies i strnkm z jinch
domn.
Secure - Pokud je tento parametr nastaven na true, mohou bt cookie zaslny pouze
pomoc zabezpeenho kanlu, SSL.
V nejvt vtin ppad vystame s parametry name a expires. Pro vytvoen sprvnho
data vypren platnosti cookie meme vyut objektu Date, m mme zaruen i sprvn
formt. Nsledujc kd ukazuje, jak jednodue nastavit datum pro vypren cookie na urit
poet dn od souasnho data. Pouhou zmnou hodnoty promnn dny si meme libovoln
zvolit poet dn od souasnho data, kdy platnost cookie vypr:
var dny = 7;
var denExp = new Date();
denExp.setTime (denExp.getTime() + (86400 * 1000 * dny));
Data cookie meme ukldat a zptn st pomoc vlastnosti document.cookie. Vechny

cookie se shodnmi hodnotami domain a path jsou na uivatelskm disku ukldny do
jednoho souboru a jsou uloeny v etzci vdy jako dvojice jmno=hodnota. Jednotliv
cookies jsou v tomto etzci oddlena stednkem a mezerou: jmno1=hodnota1;
jmno2=hodnota2. Vyzkouejte si ke kdu ve pidat:
document.cookie = "jmeno1 = hodnota1; expires=" + denExp.toGMTString() + ";
path=/";
document.cookie = "jmeno2 = hodnota2; expires=" + denExp.toGMTString() + ";
path=/aaaa";
Na disku budou vytvoeny dva soubory s cookies. Pokud napklad promnn jmeno1 existuje
je v souboru nahrazena stvajc a pokud ne, pid se nov jmno promnn a jej hodnota na
konec souboru.
Asi jste si vimli metody toGMTString, tato metoda nm zajiuje pevod datumu na formt,
ktermu cookie bude rozumt. Doba platnosti mus bt toti zadna v tomto formtu: Wdy,
DD-Mon-YY HH:MM:SS GMT, kde maj jednotliv znaky tento vznam:
Wdy: jmno dne v tdnu anglicky (3 znaky),
DD: den v msci (2 znaky),
Mon: msc anglicky (3 znaky),
YY: rok (2 znaky),
HH: hodina,
MM: minuta,
SS: sekundy,
GMT: udv, e se jedn o as na hvzdrn Greenwitch.
Obecn pouiteln funkce na cookies
Pedvedeme si funkce, kter nm usnadn prci s cookies. Tyto ti funkce um uloit, nast a
smazat jakoukoliv cookie podle jmna:
function ulozCookie (jmeno, hodnota, vyprsi) {
document.cookie = jmeno + "=" + escape(hodnota) + "; expires=" +
vyprsi.toGMTString() + "; path=/";
}
function nactiCookie(jmeno) {
var najdi;
najdi = jmeno + "=";

offset = document.cookie.indexOf(najdi);
if (offset != -1) {
offset += najdi.length ;
konec = document.cookie.indexOf(";", offset) ;
if (konec == -1)
konec = document.cookie.length;
return unescape(document.cookie.substring(offset, konec));
}
else
return "";
function smazCookie(jmeno) {
var denExp = new Date();
denExp.setTime(denExp.getTime() - (86400 * 1000 * 1));
ulozCookie(jmeno, "", denExp);
}
escape() a unescape() jsou vestavn funkce JavaScriptu, kter konvertuj speciln znaky do
estnctkovho systmu. To proto, e pr jmno=hodnota nesm obsahovat mezery, rky,
stednky, dvojteky nebo dal znaky. Pouitm funkce escape() meme v hodnot cookie
pouvat jakkoliv znaky. Pokud chceme tuto hodnotu zptn nast, pevedem ji do itelnho
tvaru pomoc funkce unescape().
K dobrm zpsobm pat vymazat cookie, o kter vme, e ji nebudeme potebovat. Pestoe
jsou cookie uloeny v malch souborech existuj urit omezen. Maximln poet cookie na
jeden prohle (Netscape) je 300 a na disk lze umstit maximln 20 cookies z jedn domny.
Funkce smazCookie(jmeno) posune den platnosti cookie o jeden den ped aktuln den. Tm
se prohlei sdl, e me tuto cookie vymazat. Vzpomete si na metody pro prci s datem z
osmho dlu. Datum vypren platnosti nastavme pomoc metody setTime jej hodnota mus
bt zadna v milisekundch.
16. Dl Zachytvn udlost

V minulm dlu jsme si pedvedli prci s cookies a dnes si ekneme nco o zachytvn
udlost a uritch rozdlech pi psan skript pro rzn prohlee.
Hned na vod si dovolm poznamenat, e tato kapitola spad pod JavaScript verze 1.2. Pokud
tedy chcete, aby vm skripty korektn pracovaly muste mt nainstalovn Netscape Navigator
nebo Internet Explorer verze 4.0 a vy i jin podobn prohle.
st 7
Zachytvn udlost
Po celou dobu vuky jsme pracovali s rznmi udlostmi a na jejich oeten jsme pouvali
sprvce udlosti (pro jistotu pipomenu, mouseover je udlost, zatmco onmouseover je
sprvce udlosti). Internet Explorer nabz monost pout sprvce udlosti skoro v kadm
HTML tagu. Netscape pouv lehce odlin pstup. Pestoe podporuje tak sprvce udlost
pro mnoho HTML tag nkter udlosti mus bt zachyceny odlinm zpsobem ne jsme
zatm zvykl. Napklad objekt window implicitn mezachytv udlost pro pohyb myi
mousemove, a proto si ukeme jak ho to nait.
Zachytvn udlost v Netscapu
V prohlei Netscape 4+ meme zachytvat udlosti objekt window, layer (NN6
nepodporuje) nebo document. Abychom toho doclili musme pout metodu captureEvent() s
definovnm udlosti kterou chceme zachytvat a nsledn specifikovat funkci, kter bude na
udlost reagovat. Zde je ukzka pro zachycen stisku tlatka myi u objektu window:
window.captureEvents(Event.CLICK);
window.document.onClick = klikMysi;
function klikMysi(udalost) {
...
}
Nezapomete metod captureEvents() pedat definici udlosti pro zachytvn, v naem

ppad Event.CLICK. Objekt Event obsahuje informace o udlosti a Event.CLICK je
konstanta, kter odkazuje na konkrtn typ udlosti. Nkter tyto typy udlost jsou:
CLICK - kdy je kliknuto tlatko myi.

MOUSEDOWN - kdy je tlatko myi stisknuto.
MOUSEUP - pi uvolnn tlatka myi.
MOUSEMOVE - pokud se kurzor myi pohne.
KEYPRESS - kdy je stisknuta njak klvesa.
KEYDOWN - pokud je klvesa stlaena.
KEYUP - kdy je klvesa uvolnna.
Pro Mozillu se jednotliv konstanty lehce li a mete je najt na Gecko DOM Reference.
Pokud chceme zachytvat vce udlost u jednoho objektu je nutn jednotliv udlosti oddlit
logickm opertorem OR (samozejm, e se daj pot i jin logick opertory, ale jejich
vyuit nevidm reln). V pkladu zachytvme vechny stisky tlatka myi a klvesy:
window.captureEvents(Event.MOUSEDOWN | Event.KEYDOWN);
window.document.onMouseDown = mysDole;
window.document.onKeyDown = klavesaDole;
Udlosti v Internet Exploreru

V Internet Exploreru nen udlosti zachytvat. Obsahuje jeden spolen objekt pro udlosti
event jako vlastnost objektu window. Bohuel jsou vlastnosti tohoto objektu odlin od
Netscapu. Tmto velmi jednoduchm kdem si meme nechat vypsat aktuln pozici kurzoru
myi ve stavov lit prohlee:
<BODY onmousemove="window.status = `X=` + window.event.x + ` Y=` +
window.event.y">
Psan skript pro vce prohle

Jak u jsem naznail, narme na problm s nekompatibilitou skript pro rzn prohlee.
Abychom doclill stejnho efektu v rznch prohlech je nutn je njak o sebe odliit (pro
jednoduchost budu zatm uvaovat pouze IE a NN). Pokud tedy chceme odliit od sebe IE a
NN meme pout test na objekt document.layers, kter podporuje pouze Netscape a objekt
document.all, kter zase podporuje pouze Internet Explorer:
if (document.layers) {
// Specifick kd pro Netscape.

...
else if (document.all) {
// Specifick kd pro Internet Explorer.

...
else {
// Kd pro vechny ostatn prohlee.

...
Pokud objekt neexistuje, je jeho hodnota null a na podmnku if je vrcena logick hodnota
false. Pomoc njakho sloitjho kdu tak meme odliit vechny typy prohle. Pklad
ukazuje, jak zobrazovat aktuln souadnice kurzoru myi pro v Intenet Exploreru, Netscapu a
Mozille:
<html>
<head>
<title>Pohyb myi</title>
<!-// Funkce konstruktoru pro zjitn prohlee.
function zj_prohlizec(){
this.ver=navigator.appVersion;
this.dom=document.getElementById ? 1:0;
this.ns4 = (document.layers && !this.dom) ? 1:0;

this.ns6 = (this.dom && parseInt(this.ver) >= 5) ?1:0;
this.minIE4 = (document.all) ? 1 : 0;
}
prohlizec =new zj_prohlizec() //Nov objekt pro zjitn prohlee
var mouseX = 0;
var mouseY = 0;
// Nastaven zachytvn pro Netscape a Mozillu.
if (prohlizec.ns4 | prohlizec.ns6)
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = souradniceKurzoru; // inicializace udlosti jak pro
NN, tak pro IE
function souradniceKurzoru(e) {
// Uloen pozice kurzoru.
if (prohlizec.ns4 | prohlizec.ns6) {
mouseX = e.pageX;
mouseY = e.pageY;
}
if (prohlizec.minIE4) {
mouseX = event.clientX + document.body.scrollLeft;
mouseY = event.clientY + document.body.scrollTop;
}
window.status = mouseX + "," + mouseY; // Zobrazen souadnic.
return true;
}
//-->
</script>
</head>
<body>
<font face="Arial,Helvetica,sans-serif">Pokud budete pohybovat my, budou
se souadnice kurzoru zobrazovat dole ve stavov lit
prohlee.<p>Funguje v IE, NN a Mozille.</font>
</body>
</html>
17. Dl Regulrn vrazy

Regulrn vrazy obsahuje snad kad programovac jazyk a ani u JavaScriptu tomu nen
jinak. Tyto regulrn vrazy pro JavaScript jsou odvozeny z Unixu, take nkte z vs je
vlastn mon u znaj. V dnenm dlu si nastnme co takov regulrn vrazy jsou a jak
nm mou usnadnit prci. Nebudu se rozepisovat o vech detailech, k tomu jsou referenn
pruky a ani by se to jednoho dlu nevelo.
st 8
Regulrn vrazy
Regulrn vrazy meme pout v JavaScriptu od verze 1.2 a slou ke zpracovn textovch
etzc. Za pomoci regulrnch vraz si nastavme masku a pot zjiujeme, zda dan
textov etzec nmi definovan masce vyhovuje. Pokud m etzec vyhovt mus obsahovat
stejn znaky jako maska definovan v regulrnm vrazu. Napklad regulrnmu vrazu
"ahoj" vyhov etzec "ahoj" nebo "zdar a ahoj" a spousta dalch.
Maska regulrnho vrazu se v JavaScriptu uzavr mezi zptn lomtka /maska/. Napklad:
/abc/
Takto definovan regulrn vraz spluj napklad nsledujc etzce:
"abcdef"
"defabc"
"_-_-abc-_-_"
Tyto etzce danou podmnku ovem nespluj:
"fedcabvc"
"ab c"
"JavaScript"
Za /masku/ pouitou v regulrnm vrazu meme pidat rzn modifiktory, kter nm

porovnvn mou ovlivnit.
i - pi porovnvn nen brn zetel na velikost psmen,

g - komplexn vyhledvn masky,
m - vyhledv na vce dcch.
Pi definici masky regulrnch vraz se pouvaj speciln znaky tzv. metaznaky, kter
nevyhledvaj sami sebe, ale maj speciln vznam. Napklad metaznak "^" oznauje
zatek etzce a "$" naopak konec etzce. V tomto ppad regulrnmu vrazu "âbc"
vyhov pouze etzce zanajc danm textem, nap. "abc" nebo "abcdef". Narozdl
regulrnmu vrazu "abc$" (metaznak "$" se zapisuje na konec vrazu) vyhov pouze etzce
konc na zadan text, nap. "abc" nebo "xxxabc". Mezi dal metaznaky pat:
metaznak koment
$
Hledan vraz se nachz na konci etzce.
Hledan vraz se me opakovat kolikrt chce, avak nemus bt ptomn vbec. Nap. regulrnmu
vrazu ".*" vyhov jakkoli etzec, i przdn, protoe metaznak "." zastupuje libovoln znak, kter
se me opakovat kolikrt chce, co nm vyjaduje metaznak "*". Pokud chcete vyhledvat znak *
muste pout \*.
Hledan text nebo znak se vyskytuje alespo jednou, dv se za znak i vraz. Regulrnmu vrazu
"xa+b" proto vyhov etzce "xab", kde "a" se me mezi "x" a "b" vyskytovat kolikrt chce,
nejmn vak jednou. A opt, pokud chcete vyhledvat znak + muste pout \+.
Nahrazuje jeden libovoln znak mimo znaku novho dku. Take regulrnmu vrazu "a.a"
vyhovuj nap. etzce obsahujc "aaa", "axa", ale i "a a". Pokud chcete vyhledat znak . pouijte opt
\. Dle to u uvdt nebudu, ale toto pravidlo plat pro i pro vechny ostatn metaznaky.
Oznauje zatek specilnch zvorkovch vraz. Napklad [abc] zna, e v etzci se mus
nachzet znak a,b nebo c. Samozejm tam mou bt i vechny. [a-zA-Z] je vet
znak pedstavujc vechna psmena. A napklad masce "[12345]0" nebo "[1-5]0" vyhov pouze
etzce obsahujc 10, 20, 30, 40, 50.
Vraz ped tmto metaznakem se me opakovat nejve jednou. Regulrnmu vrazu "xa?b" vyhov
pouze etzce obsahujc "xab" nebo "xb", napklad "axbs", protoe mezi znaky "x" a "b" se me
objevit nejve jeden znak "a".
Potebujeme-li pout metaznak v jeho pvodnm vznamu, vlome ped nj zptn lomtko "\".
Napklad chceme-li vyhledat etzec "+.?}[" musme pout "\+\.\?\}\[".
Oznauje zatek etzce, hledan vraz se zapisuje za tento metaznak.
Pomoc sloench zvorek meme pesnji urit, kolikrt se m dan vraz opakovat kvantifiktor.
V podstat logick opertor OR. etzec vyhovuje vrazu v ppad, e obsahuje alespo jeden
podvraz. Regulrnmu vrazu "aa|bb|cc" vyhov pouze etzce obsahujc "aa", "bb" nebo "cc".
Nap. "dfsaagh", "asbbwe", ale i "aabbcc".
()
Vytvoen podvrazu. Napklad regulrnmu vrazu "5(ab)+6" vyhov etzce obsahujc nap.
"5ab6" nebo "5ababab6". Mezi znaky "5" a "6" se mus vyskytovat nenulov poet znak "ab".
Naopak regulrnmu vrazu "5(ab)?6" vyhov pouze etzce obsahujc "56" nebo "5ab6".
Kvantifiktor Koment
{m,n}
Vraz se vyskytuje minimln m krt, ale ne vce ne n krt. Nap. regulrnmu vrazu
"x{5,10}" vyhov etzce obsahujc pt a deset znak "x" zapsanch za sebou.
{n,}
Vraz se vyskytuje minimln n krt. Vrazu "x{5,}" vyhov etzce, kde se znak "x" opakuje
minimln 5 krt za sebou.
{n}
Vraz se vyskytuje pesn n krt.
*, + a ?
Tyto metaznaky jsme si ji pedstavili.
Dal speciln znaky Pedstavuje

\n
Znak novho dku.
\r
Znak pro nvrat na zatek dky - CR.
\t
Vyjaduje znak tabultoru.
\v
Znak vertiklnho tabultoru.
\f
Znak pro posun papru - FF.
\d
slice (stejn jako [0-9]).
\D
Vyjaduje neseln vraz (stejn jako [^0-9]).
\w
Pedstavuje abecedn-seln znaky (stejn jako [a-zA-Z_0-9]).
\W
Pedstavuje neabecedn-neseln znaky (stejn jako [â-zA-Z_0-9]).
\s
Vyjaduje znak mezery (stejn jako [ \t\v\n\r\f]).
\S
Vyjaduje vechny znaky, ovem ne mezery (stejn jako [^ \t\v\n\r\f]).
Netscape a IE maj troku odlinou implementaci regulrnch vraz, ale nsledujc zpis
funguje v obou:
var mujRV = /maska/modifiktor;
Metoda test() porovnv vloen textov etzec s maskou regulrnho vrazu a vrac true
pokud podmnce vyhovuje. Nsledujc pklad testuje e-mailovou adresu zadanou
uivatelem:
<html>
<head>
<title>Zkontroluj e-mail</title>
<!-// Funkce pro kontrolu e-mailov adresy.
function zkontrEmail(email) {
var re = /^[_a-zA-Z0-9\.\-]+@[_a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,4}$/;
if (re.test(email))
alert("Vyhovuje.");
else
alert("Nevyhovuje.");
}
//-->
</script>
</head>


<b>Pklad pouit regulrnch vraz:</b>
<p>
Vlote e-mailovou edresu a stisknte tltko "Zkontroluj" pro test emailov adresy.
<p>
<form>
E-mail:
<font size=3><input name="email" type="text" size=10></font>

<input type="button" value="Zkontroluj"
onClick="zkontrEmail(this.form.email.value);">
</form>
</font>
</body>
</html>
Toto je pouze zklad regulrnch vraz, a pokud se chcete dozvdt vce navtivte strnky
Microsoftu nebo Netscapu.
18. Dl DHTML
Minule jsme si ukzali nco z regulrnch vraz. Doufm, e nastnn toho co to jsou
regulrn vrazy s ukzkou pouit vm jasn ukzalo jejich monosti. Musm podotknout, e
tyto monosti jsou daleko vt ne se do lnku velo. Dnes vuku zavrm strunm
vodem do DHTML. pln posledn dl akort pinese utdn seznam rznch zdroj na
internetu tkajc se problematiky, o kter jsme tu dva msce hovoili.
st 9
DHTML
Je dobr si uvdomit, e DHTML je pouze zkratka pro vraz "Dynamic HTML". Tato zkratka
se tak ustlila, e se nyn pro dynamick strnky bn pouv, ale DHTML jinak neexistuje.
Nen to dn "vc" ani standard definovan konsorciem World Wide Web Consortium
(W3C). DHTML nen definovno nikde.
Dynamick HTML je ve skutenosti kombinace CSS (cascading style sheets), DOM
(document object model), skriptovacch jazyk (Javascript nebo VBscript) a HTML. DHTML
tedy nen dn nov jazyk, je to smsice vech ve jmenovanch technologi. m vce
budete umt tyto technologie, tm budete lep v DHTML.
Tak, co to tedy je? Dynamick HTML je jednodue standardn HTML, kter se me mnit
pot co je ji strnka natena v prohlei. Jednoduch dynamick prvky na strnce jsem si v
prbhu serilu u vytvoili, napklad zmna obrzku nebo textu po najet kurzorem myi.
Mezi jin efekty, kter jste ji jist taky vidli napklad pat pohyb njakho prvku za
kurzorem myi nebo posun obrzku po obrazovce a mnoho dalch. Ve co v HTML na
strnce vytvome meme nsledn pomoc DHTML mnit.
Jednotliv sti DHTML

Jak u jsme si nkolikrt ekli zkratka DHTML nen dn "vc" ani standard a jde pouze o
kombinaci nkolika technologi.
CSS
Mon jste se s touto zkratkou ji setkali. Pokud, ale nevte co znamen, pokusm se ve
strunosti vysvtlit.
Nezkrcen to je Cascading Style Sheets. CSS bylo uvedeno na konci roku 1996 a dalo by se
ci, e jeho uveden znamenalo prlom v dosavadnm pojet HTML. V pvodn verzi HTML
se toti veker text formtoval na strnce pomoc HTML tag jako H1, FONT, B, I a
ostatnch bez monosti peddefinovn. S uvedenm styl se tato situace zmnila. Za pomoci
CSS si definujeme nkolik styl s jejich parametry v vodu webov strnky nebo v externm
souboru a pak se na n pouze odkazujeme. Vhod z toho plynoucch je mnoho. Pkladn,
potebujeme zmnit veker nadpisy lnk, kter mme definovny napklad takto:
<font face="Verdana,Geneva,Arial,Helvetica,sans-serif" size="5"
color="#0000FF"><B>NADPIS</B></font>
Prochzet vechny soubory, kter tvo nae strnky a hledat tyto tagy by zabralo hodn asu.
U CSS zmnme pouze jeden extern soubor a je vystarno. V souboru s definic CSS se
zmn hodnoty stylu definujc nadpis lnku:
.nadpis { font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight : bold; color : Blue; font-size : 16pt; }
Tato zmna se projev okamit na vech strnkch. Z toho dvodu je daleko lep vyuvat
pro definici CSS extern soubor, definovn v vodu kad strnky ztrc na efektivnosti.
CSS tedy slou k modifikaci styl, kter v HTML ji existuj (nap. H1, P, CODE, atd.) a k
vytven zcela novch styl s novmi parametry. Formtovac monosti CSS jsou velice
bohat, co usnaduje nvrh strnek pesn podle naich pedstav.
Styly jako prvn uvedla firma Microsoft a implementovala do Internet Exploreru 3.0.
Prohlee uveden na trh od roku 1997 styly ve verzi Level 1 v naprost vtin podporuj.
Souasn modern prohlee zahrnuj i podporu CSS2.
Te si jist kte, co znamen ono Level 1. V souasnosti existuj dv specifikace styl,
star CSS1 (level 1) z 16.prosince 1996 a novj CSS2 (level 2) z 12.kvtna 1998. Rzn
verze prohle tyto specifikace jet dopluj o sv vlastn definice. Troku zmatek, bohuel
ucelen seril, kter by ve objasnil na iv doposud nevyel. Teba to nkdy napravm :)
DOM
V souasn dob vychz o DOM na iv seril, take pouze ve strunosti. Document Object
Model je v podstat vazba mezi pouitm skriptovacm jazykem a prvky na strnce. DOM je
vlastn hierarchie element na strnce, kter jsou reprezentovny prohleem. S pomoc
DOM meme snadno pistupovat k jednotlivm elementm na strnce, mnit je nebo
pidvat nov. Pro prci s DOM bylo pidno urit rozen i do JavaScriptu. Bohuel, jak
u jsem psal o kompatibilit mezi jednotlivmi prohlei a skripty, zde se s tmto problmem
opt urit setkte.
Napklad pokud vytvome na strnce element s pesnm urenm pozice:
<div id="divID" style="position:absolute; left:50; top:100; backgroundcolor: ThreedLightShadow;">Text uzaven v tagu DIV.</div>
V rznch verzch prohle se k nmu pistupujeme rznmi zpsoby:

V Netscapu (NN4+):
mujDIV = document.layers["divID"];
V IE (IE4):
mujDIV = document.all["divID"];
Pokud prohle podporuje standard W3C, nejlep zpsob je (IE 5+, NN6+):
mujDIV = document.getElementById("divID");
Pokud chceme tento element ovlivovat, tak zle na verzi prohlee. Chceme-li napklad
njak element skrt:
V Netscapu (NN4+):
document.layers["divID"].visibility = "hide";
// mujDIV.visibility = "hide";
Dal rozdl nastane pi pouit NN6, kde se ji "hide" a "show" nepouv a namsto toho
muste pout "hidden" a "visible".
V IE (IE4):
document.all["divID"].style.visibility = "hidden";
// mujDIV.visibility = " hidden ";
A nakonec opt podle doporuenho standardu W3C (IE 5+, NN6+):

document.getElementById("divID").style.visibility = "hidden";
// mujDIV.visibility = " hidden ";
Vidte, e nastv pkn zmatek a to jet zdaleka nejsou vechny odlinosti.

Skriptovac jazyk
O tom snad nemusm nic pst, o jeho vysvtlen se snam ji osmnct dl. Snad jen to, e v
DHTML nemuste pouvat pouze JavaScript, ale mete pout i VBScript. Zde ovem
budete omezeni pouze na IE, jeliko ostatn prohlee VBScript nepodporuj.
HTML
Pokud jste doetli a sem asi vm HyperText Markup Language (HTML) jeho
prostednictvm mete vytvet webov strnky nemusm pedstavovat. Znovu si jen
dovolm pipomenout, e na iv ji vyel ptadvacetidln seril o tomto jazyku.
Krtk pklad na rozlouenou, kter mn pozici elementu DIV na strnce ve tyech
smrech (testovno na prohlech IE 5.5 a 6.0, NN 4.51 a 6.1, Mozilla 0.9.4 a Opera 5.12):
<html>
<head>
<title>Zmna pozice elementu</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
</head>
<body>
<div id="blok1" style="position:absolute; left:10; top:300; backgroundcolor: Silver;">Text uzaven v tagu DIV.</div>
<!-// Funkce pro pohyb elementu DIV po strnce.
function posunBlok(x, y) {
var block = ziskejEL("blok1");

// IE 5 a vy, Mozilla, NN6+, Opera 5 a vy
if (document.getElementById){
block.style.left = parseInt(block.style.left) + x;
block.style.top = parseInt(block.style.top) + y;
}
// NN4+
else if (document.layers) {
block.left += x;
block.top += y;
}
// IE4
else if (document.all) {
block.pixelLeft += x;
block.pixelTop += y;
}
// Funkce pro zskn elementu podle verze prohlee.

function ziskejEL(jmeno) {
// IE 5 a vy, Mozilla, NN6+, Opera 5 a vy
if (document.getElementById)
return(document.getElementById(jmeno));
// NN4+
else if (document.layers)
return(document.layers[jmeno]);
// IE4
else if (document.all)
return(document.all[jmeno].style);
else
return(null);
}
//-->
</script>
<form>
<tr align=center>
<td> </td>
<td><input type="button" value="nahoru" onClick="posunBlok(0, 10);"></td>
<td> </td>
</tr>
<tr align=center>
<td><input type="button" value="vlevo" onClick="posunBlok(-10, 0);"></td>
<td> </td>
<td><input type="button" value="vpravo" onClick="posunBlok(10, 0);"></td>
</tr>
<tr align=center>
<td> </td>
<td><input type="button" value="dol" onClick="posunBlok(0, 10);"></td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
Tm je vuka JavaScriptu skonena. Snad jste si nco odnesli a budete se k tomuto serilu rdi
vracet. Pokud najdete njak nesrovnalosti nebo vm nebude nco jasn napite. Nkter dl
mu pepracovat (internet nen kniha) nebo vydat rozenou st. Posledn dl ji nebude
vnovn vuce, ale zajmavm zdrojm na internetu, kde si mete sv obzory nadle
roziovat.
19. Dl Zdroje na Internetu

Vuka JavaScriptu skonila ji minule lehkm vodem do DHTML. Pokud si nkdo peetl
cel seril, potm, e ho JavaScript zaujal a bude se mu chtt vnovat i nadle. Proto v
tomto dle najdete seznam zajmavch odkaz na strnky, kter se vnuj JavaScriptu u ns i v
zahrani. Pokud by se vm zdlo, e jsem na njakou zajmavou strnku zapomnl, polete
mn ji na e-mail, rd ji doplnm. Vznikne tak zajmav rozcestnk.
Domc strnky vnujc se JavaScriptu:

Strnky na adrese skripty.web3.cz jsou vnovny skriptovacm jazykm a najdete zde
samozejm i JavaScript a nkolik pklad. Nejvc se mn lbily pikvorky v JavaScriptu.
Absolventsk prce ze soukrom vy odborn koly a obchodn akademie v eskch
Budjovicch vnovan JavaScriptu z roku 2000 a jet jedna mlad z roku 1999. Do tetice
jet jedny strnky vnovan JavaScriptu z te koly. Asi maj dobrho uitele :-)
Podobn seril jako na iv ovem krat a nezabvajc se nktermi oblastmi JavaScriptu
jako regulrn vrazy nebo zachytvnm udlost, atd. od Martina Kudlka.
Velmi dobr diplomov prce Lenky vancarov "JavaScript v pkladech" z Masarykovy
univerzity v Brn.
Nesmm zapomenout ani na strnky Petra Koiky, kter jsou vsledkem jeho bakalskho
prce. Najdete zde podrobnou referenn pruku k pkazm JavaScriptu verze 1.0.
Archv skript najdete na java.tatousek.cz, kde se mete pihlsit i do e-mailov konference
o tvorb WWW strnek a je zde i diskusn frum se stejnou tematikou.
Pokud vm nevad sloventina mete navtvit rozshl archiv skript i s prukou o
JavaScriptu na javascript.sk nebo si pest a sthnout osvtov seril o JavaScriptu od
Rastislava kulttyho.
Zahranin zdroje:
Archivy skript:
Dynamic Drive
JavaScript Source
ScriptSearch
WebFX
Nvody a lnky vnovan JavaScriptu:
Standard jazyka podle ECMA-262, ECMAScript Language Specification.
Strnky Microsoftu vnovan skriptovacm jazykm.

Seznam vech pkaz podle ECMA-262 na DevGuru.
irt.org a zde napklad FAQ databze rozdlen na urit okruhy.
JavaScript Kit je vnovn jak JavaScriptu, tak DHTML.
W3schools na tchto strnkch se mete nauit jak JavaScript, tak DHTML, XHTML, CSS,
XML, XSL, DOM a dal.
WebReference, opt strnky vnovan nkolika skriptovacm jazykm najednou.
Seznam odkaz tkajcch se JavaScriptu na dmoz.org a na Googlu.
DHTML:
Spoustu zajmavch lnk o DHTML najdete na Dynamic HTML Lab.
Strnky Thomase Brattliho DHTML central jsou vnovan DHTML se spoustou zajmavch
skript.
Referenn pruka k DOMu (Gecko DOM Reference) na Mozille.
GetElementById obsahuje DHTML skripty a nvody na jejich tvorbu.
Strnky Scott Andrewa jsou vnovny zejmna estkovm verzm prohle, ale i tak zde
najdete spoustu zajmavch informac.
Strnky Peter-Paul Kocha vnovan JavaScriptu, DOM a DHTML.
Strnky 13thparallel jsou vnovny DHTML pro pokroil.
DOM podle W3C.
Strnky jednotlivch prohle:
Internet Explorer, vod do DHTML, pouit rznch filtr a strnky pro vvoje.
Netscape
Mozilla
Opera
Snad se budete v odkazech orientovat. Asi jste si tak vimli, e nkdy se kategorie JavaScript
a DHTML pekrvaj nebo lpe eeno dopluj.

Výuka JavaScriptu - Jan Němec (2002)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Výuka JavaScriptu - Jan Němec (2002)

Uploaded by

Copyright:

Available Formats

Vuka JavaScriptu

Tento seril vychzel na serveru www.zive.cz.

Jak potebujete software?

Kter prohlee podporuj JavaScript?

Poznmka: JavaScript nen domnou pouze prohle Netscape Navigator a Internet

JavaScript 1.0 - Netscape Navigator 2.0

Microsoft souasn s podporou JavaScriptu pedstavil i vlastn implementaci jazyka

Vloen skriptu do strnky

Doufm, e nen co vysvtlovat.

= `ekl jsem "NE"`;

// chyba, jeden typ uvozovek bez zptnho

komente - // pro jeden dek, /* a */ pro vce dk

Poznmka: Samozejm, e funkce me bt i bez argument.

3. Dl Opertory a zkladn cykly

Modulo dlen, zbytek po celoselnm dlen. 5%2

Mon je i zkrcen zpis, pokud ho nkde uvidte, nelekejte se.

5==8 vrt false (nepravda)

5!=8 vrt true (pravda)

5>8 vrt false (nepravda)

5<8 vrt true (pravda)

je vt nebo rovno 5>=8 vrt false (nepravda)

je men nebo rovno 5<=8 vrt true (pravda)

nebo (logick souet)

Pklad na vysvtlen snad bude stait:

Opt snad bude stait pouze pklad:

Poznmka: Na rozdl od pedchzejcho pkladu probhne cyklus minimln jednou bez

Krtk pklad se vdy hod:

Pi vcensobnm vtven programu by obecn zpis vypadal takto:

provedou pokud je podmnka1 splnna; }

Poznmka: Pokud by vyhovovala podmnka1 i podmnka2, provede se kd pouze v bloku

een: Obchodnk prod napklad 11 kus vrobku a je mu piznn bonus. Nsledn je mu

Pklad s hlekami na rzn dny pomoc pkazu switch:

Vnoen podmnky a cykly

Pklad na vyhledn maxima ze t sel:

Proveden naeho kdu

Jako vsledek naeho snaen se na strnce objev:

function zmenObr(jmeno, zdroj) {

Ob udlosti onMouseOver i onMouseOut volaj funkci zmenObr(), s argumenty pro jmno

Seznam sprvc udlost

Pi pesunut myi nad odkaz.

Po odsunut myi z odkazu.

Pi pesunut myi nad oblast klikac

Po odsunut myi z oblasti klikac mapy.

Kdy rm nebo okno pestv bt

Kdy je rm nebo okno je aktivovn

Po nataen okna nebo rmu do okna

Po odstrann okna nebo rmu z okna

Kdy je natan obrzku zastaveno

A je cel obrzek naten do okna

Pi vskytu chyby pi natn obrzku.

<INPUT> s TYPE="BUTTON" nebo

Po kliknut my na prvek formule.

<INPUT> s TYPE="TEXT" nebo <TEXTAREA>

Kdy prvek formule pestv bt

Kdy je text ve formuli zmnn.

Kdy je textov oblast fomule

Kdy uivatel ozna cel nebo jen st

Kdy vybran prvek ze seznamu

Kdy je zmnn prvek seznamu.

Kdy uivatel klikne na prvek v

Kdy je urit prvek v seznamu

Dnenm dlem kon st zklady JavaScriptu a pt se vrhneme na objekty. Slben

Vechny objekty JavaScriptu jsou uspodny do struktury, kterou znzoruje nsledujc

Tato struktura m svoje jmno, k se j objektov model dokumentu, zkrcen DOM