JavaScript

P°φΦinou vzniku JavaScriptu byl po₧adavek na zv²Üenφ u₧ivatelskΘho komfortu pro u₧ivatele strßnek. JavaScript m∙₧eme pou₧φt nap°φklad p°i vstupnφ kontrole dat vklßdan²ch do formulß°∙ jeÜt∞ p°edtφm, ne₧ jsou vypln∞nΘ ·daje odeslßny na server. Kontrolu ·daj∙ nemusφ provßd∞t server a v²sledkem je rychlejÜφ odezva pro u₧ivatele. JavaScript ve sv²ch prvnφch verzφch navφc umo₧nil i vytvß°enφ interaktivn∞jÜφho u₧ivatelskΘho rozhranφ strßnek. Strßnka mohla reagovat na r∙znΘ udßlosti vyvolanΘ u₧ivatelem a nap°φklad dopl≥ovat pole do formulß°∙ nebo vyvolat otev°enφ novΘho okna prohlφ₧eΦe. Tyto mo₧nosti pak dßle rozÜφ°il nov² koncept dynamickΘho HTML.

My se nynφ struΦn∞ seznßmφme se zßklady programovßnφ v JavaScriptu. PotΘ si ukß₧eme, jak se skripty (tak se °φkß program∙m v JavaScriptu) za°azujφ do HTML strßnky. V poslednφ Φßsti se podφvßme na to, jak jsou v JavaScriptu p°φstupnΘ jednotlivΘ komponenty prohlφ₧eΦe a strßnky pomocφ objektovΘho modelu dokumentu (DOM).

JavaScript za dev∞t a p∙l minuty

Ka₧d² program se sklßdß z p°φkaz∙, kterΘ se provßdφ sekvenΦn∞ v po°adφ, v jakΘm jsou zapsßny. jednotlivΘ p°φkazy se od sebe odd∞lujφ st°ednφkem a je dobr²m zvykem psßt ka₧d² p°φkaz na samostatnou °ßdku -- program je pak mnohem p°ehledn∞jÜφ.

V programech m∙₧eme pou₧φvat prom∞nnΘ, kterΘ slou₧φ k ulo₧enφ r∙zn²ch hodnot podle naÜich pot°eb. Prom∞nnΘ nenφ pot°eba p°edem deklarovat, ale je to lepÜφ. Deklarace prom∞nnΘ se uvozuje klφΦov²m slovem var:

var Pocitadlo = 0;
var PocetMesicu = 12;
var i, j;
var Pozdrav = "Ahoj Karle!";
var Nalezeno = false;

Prom∞nnΘ mohou obsahovat jeden ze t°φ typ∙ dat -- Φφslo, textov² °et∞zec a logickß hodnota. Logickß hodnota odpovφdajφcφ pravd∞ se jmenuje true. Nepravd∞ odpovφdß hodnota false.

Mezi nejjednoduÜÜφ p°φkazy pat°φ p°i°azovacφ p°φkaz. Jeho tvar

prom∞nnß = v²raz

K dispozic jsou samoz°ejm∞ b∞₧nΘ operßtory jako '+' (sΦφtßnφ), '-' (odΦφtßnφ), '*' (nßsobenφ) a '/' (d∞lenφ).

delta = y - x;
obvod = 2 * 3.14 * polomer;
palce = centimetry / 2.54;

x = x + 1;
x++;

PoziceX = PoziceX + KrokX;
PoziceX += KrokX;

Pro porovnßvßnφ hodnot mßme k dispozici relaΦnφ operßtory '<', '>', '<=' a '>='.

LogickΘ v²razy m∙₧eme navzßjem spojovat pomocφ logick²ch spojek '&&' (a zßrove≥) a '||' (nebo). Negaci v²razu provedeme zapsßnφm vyk°iΦnφku '!' p°ed jeho zaΦßtek.

JeVIntervalu = (x >= DolniMez) && (x <= HorniMez);

if (podmφnka) {
    p°φkazy, kterΘ se provedou p°i spln∞nφ podmφnky
    }
else {
    p°φkazy, kterΘ se provedou p°i nespln∞nφ podmφnky
    }

if (hodina > 12) {
    hlaseni = "DobrΘ odpoledne!";
    }
else {
    hlaseni = "DobrΘ rßno!";    
    }

if (hodina > 12) 
    hlaseni = "DobrΘ odpoledne!"
else 
    hlaseni = "DobrΘ rßno!";

Cyklus for mß tvar:

for (poΦßteΦnφ inicializace; podmφnka; inkrementace) {
    p°φkazy
    }

var i,
    faktorial = 1;

for (i=1; i<=n; i++) {
    faktorial *= i;
    }

while (podmφnka) {
    p°φkazy
    }

Velice u₧iteΦnou pom∙cku nabφzφ JavaScript v mo₧nosti definovat si vlastnφ funkce. Funkce pou₧ijeme v p°φpadech, kdy pot°ebujeme v programu na r∙zn²ch mφstech provßd∞t stejnΘ Φinnosti. Pou₧itφm funkcφ k≤d programu zkrßtφme, zp°ehlednφme a p∙jde snadn∞ji modifikovat. Definujme funkci pro v²poΦet faktorißlu. Funkce bude navφc rekurzivnφ, proto₧e bude volat sama sebe:

function Faktorial(n) {
    if ((n==1) || (n==0)) 
        return 1 
    else 
        return (n * Faktorial(n-1));
    }

var i;
for (i=1; i<=10; i++) {
    document.writeln(i, "! = ", Faktorial(n));
    }

1! = 1
2! = 2
3! = 6
4! = 24
5! = 120
6! = 720
7! = 5040
8! = 40320
9! = 362880
10! = 3628800

Funkce m∙₧e mφt i vφce parametr∙, odd∞lujφ se pak Φßrkou.

V poslednφ ukßzce se objevila konstrukce document.writeln. Tento zßpis specifikuje vyvolßnφ metody writeln u objektu document. Popis objekt∙ vß₧φcφch se k prohlφ₧eΦi a strßnce uvedeme na konci tohoto Φlßnku. JavaScript vÜak obsahuje i n∞kolik objekt∙, kterΘ s HTML v∙bec nesouvisφ. Jednß se objekty String, Date a Math. Ty umo₧≥ujφ prßci s °etezci, s ·daji o datu a Φase a s matematick²mi funkcemi.

ObvodKruhu = 2 * Math.PI * Polomer;
c = Math.sqrt(a*a+b*b);   // d∙sledek Pythagorovy v∞ty

Zakomponovßnφ JavaScriptu do HTML

• Skripty, kterΘ jsou vykonßny p°i nahrßnφ strßnky do prohlφ₧eΦe. Tyto skripty se do strßnky vklßdajφ pomocφ elementu SCRIPT.
• Skripty, kterΘ jsou vykonßny v₧dy, kdy₧ se vyskytne urΦitß udßlost. Udßlostφ existuje n∞kolik a v₧dy se musφ p°ipojit ke konkrΘtnφmu elementu. Udßlostφ m∙₧e b²t nap°φklad p°ejetφ myÜφ nad elementem.

<SCRIPT LANGUAGE="JavaScript">
  window.status = "Prßv∞ si prohlφ₧φte moji strßnku."
</SCRIPT>

Druhou mo₧nostφ je vlo₧it skript pouze pomocφ odkazu. I v tomto p°φpad∞ vÜak musφme pou₧φt ukonΦovacφ tag </SCRIPT>:

<SCRIPT LANGUAGE="JavaScript"
        SRC="http://netscape.com/exmpl/demo.js">
</SCRIPT>

P°i vklßdßnφ skript∙ je rovn∞₧ vhodnΘ jejich obsah skr²t p°ed starÜφmi prohlφ₧eΦi pomocφ triku s komentß°i:

<HEAD>
<TITLE>Strßnka, kterß vßm popφÜe stavovou °ßdku</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
  window.status = "Prßv∞ si prohlφ₧φte moji strßnku."
// -->
</SCRIPT>
</HEAD>

Pokud pou₧φvßme skripty pro dynamickΘ vygenerovßnφ Φßsti dokumentu, m∙₧eme pou₧φt element NOSCRIPT a umφstit do n∞j alternativnφ text pro starÜφ prohlφ₧eΦe, kterΘ nepodporujφ skripty:

<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
  document.write("Pou₧φvßte prohlφ₧eΦ " + navigator.appName
                                  + " " + navigator.appVersion)
// -->
</SCRIPT>
<NOSCRIPT>
Pou₧φvßte prohlφ₧eΦ, kter² nepodporuje JavaScript.
</NOSCRIPT>
</BODY>

Aby byly naÜe dokumenty opravdu interaktivnφ, je pot°eba, aby provedenφ urΦitΘ Φßsti skriptu bylo vyvolßno udßlostφ, kterou zp∙sobil u₧ivatel. Udßlostφ m∙₧e b²t p°ejetφ myÜφ p°es urΦit² element, kliknutφ myÜφ apod.

U ka₧dΘho elementu m∙₧eme pou₧φt n∞kolik nov²ch atribut∙, kterΘ odpovφdajφ jednotliv²m udßlostem. Jako jejich hodnota se uvßdφ p°φkazy, kterΘ se po vyvolßnφ danΘ udßlosti majφ provΘst -- tzv. obsluha udßlosti.

Obecn∞ m∙₧eme pou₧itφ udßlosti u n∞jakΘho elementu zapsat jako:

<TAG udßlost=obsluha udßlosti>

P°ehled udßlostφ, kterΘ m∙₧eme pou₧φt, uvßdφ tabulka. Ukß₧eme si Φßst strßnky, kde se po najetφ myÜφ nad odkaz ve stavovΘ °ßdce prohlφ₧eΦe objevφ vysv∞tlujφcφ text:

O rozvoj Webu se starß konsorcium
<A HREF="http://www.w3.org"
   onMouseOver="window.status='Kliknutφm na odkaz se dostanete'
   + ' na domovskou strßnku konsorcia W3C'">
W3C</A>

Objektov² model dokumentu

window
  |--location 
  |--frames 
  |--history 
  |--navigator 
  |--event 
  |--screen 
  +--document 
       |--links
       |--anchors
       |--images
       |--filters
       |--forms
       |--applets
       |--embeds
       |--plugins
       |--frames
       |--scripts
       |--all
       |--selection
       |--styleSheets
       +--body

Zßkladnφm objektem je window, p°es kter² jsou dostupnΘ vÜechny dalÜφ objekty. Nejd∙le₧it∞jÜφm objektem je document, kter² v sob∞ zahrnuje vÜechny objekty a vlastnosti vztahujφcφ se k aktußlnφmu dokumentu. Na jednotlivΘ objekty v hierarchii (viz obrßzek 5) se odvolßvßme pomocφ teΦkovΘ notace: window.screen, window.document, window.document.body.

Proto₧e jsou vÜechny objekty potomky objektu window, m∙₧e tento vynechßvat. Zkrßcen∞ m∙₧eme psßt window.screen, document, document.body.

Na dalÜφch ni₧Üφch ·rovnφch v objektovΘ hierarchii mohou b²t bu∩ dalÜφ objekty anebo p°φmo vlastnosti a metody jednotliv²ch objekt∙. VÜe si ukß₧eme na p°φklad∞. Objekt document.all obsahuje vÜechny elementy obsa₧enΘ v dokumentu. P°φstupnΘ jsou pomocφ svΘho jmΘna definovanΘho atributem ID:

<H1 ID=Nadpis>Pokusn² nadpis</H1>
<P ID=Odstavec1>Text odstavce te∩ nenφ d∙le₧it²

<HTML>
<HEAD>
<TITLE>Ukßzka dynamickΘho HTML 1.</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function ChangeAlign()
{
  document.all.Nadpis.align = "center";
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<H1 ID=Nadpis ALIGN=LEFT
    onClick="ChangeAlign()">Pokusn² nadpis</H1>
<P ID=Odstavec1>Text odstavce te∩ nenφ d∙le₧it²
</BODY>
</HTML>

U objekt∙, kterΘ odpovφdajφ element∙m strßnky, mßme k dispozici vlastnost i objekt style. Pomocφ vlastnosti style m∙₧eme p°istupovat k definici stylu elementu stejn∞ jako pomocφ atributu STYLE. Nßsledujφcφ k≤d by zm∞nil barvu a velikost nadpisu:

document.all.Nadpis.style = "color: red; font-size: 30px";

document.all.Nadpis.style.color = "red";
document.all.Nadpis.style.fontSize = "30px"

<HTML>
<HEAD>
<TITLE>Ukßzka dynamickΘho HTML 2.</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function ChangeText()
{
  document.all.Nadpis.innerText = "Poslouchßte m∞ p∞kn∞!!!";
  document.all.Nadpis.style.color = "blue";
  document.all.Nadpis.style.fontSize = "50px";
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<H1 ID=Nadpis onClick="ChangeText()">
Klikn∞te na tenhle nadpis a uvidφte, co se stane.</H1>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>Ukßzka dynamickΘho HTML 3.</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function ChangeText()
{
  document.all.Nadpis.outerHTML = "<IMG SRC=astro.gif>"
        + "<P>Krom∞ obrßzku p°idßm i krßtk² odstavec textu.";
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<H1 ID=Nadpis onClick="ChangeText()">
Klikn∞te na tenhle nadpis a uvidφte, co se stane.</H1>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>Ukßzka dynamickΘho HTML 4.</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function ChangeDocumentAlign()
{
    document.styleSheets[0].addRule("BODY", "text-align: center", 0);
}
// -->
</SCRIPT>
<STYLE></STYLE>
</HEAD>
<BODY onClick="ChangeDocumentAlign()">
<H1>Nadpis</H1>
<P>A n∞kolik odstavc∙ textu
</BODY>
</HTML>

Bohu₧el zde nem∙₧eme rozebrat celou objektovou hierarchii. Zmφnφme se vÜak jeÜt∞ alespo≥ o n∞kolika zajφmavostech. Adresa dokumentu, kter² je prßv∞ zobrazovßn, je p°φstupnß p°es objekt location. Pokud tedy chceme p°φmo skriptem zm∞nit strßnku, kterß se prßv∞ zobrazuje, m∙₧eme pou₧φt p°φkaz location="http://n∞kde.jinde.cz".

Pokud mßme strßnku rozd∞lenou na rßmy, m∙₧eme z jakΘhokoliv rßmu m∞nit strßnku zobrazenou v ostatnφch rßmech. StaΦφ novou adresu zapsat do parent.jmΘno_rßmu.location. Tφmto zp∙sobem m∙₧eme dosßhnout specißlnφch efekt∙, jako je zm∞na obsahu vφce rßm∙ najednou po zvolenφ jednoho odkazu. V₧dy bychom vÜak m∞li zvß₧it, zda je chovßni strßnky snadno pochopitelnΘ pro jejφ u₧ivatele.

┌vod | KaskßdovΘ styly | Ukßzky | P°ehled vlastnostφ styl∙ | DHTML vs. Java