Výuka JavaScriptu – 4.

Dnes si vysvětlíme jak se kód pomocí prohlížeče vykonává. Řekneme si o událostech a najdete tu i slíbený seznam klíčových slov.
Kapitoly článku

V prvním dílu jsme si již vysvětlili co je to JavaScript, které prohlížeče ho podporují a kam a jak skripty na stránce vkládat. Druhý díl objasňuje možnosti tagu SCRIPT a základy syntaxe (proměnné, textové řetězce, operátory, příkazy a funkce). Poslední třetí díl před tímto se zabýval hlouběji operátory, cykly, a podmínkami. Dnešním dílem část „Základy práce s JavaScriptem“ ukončíme.

Provedení našeho kódu

Internetový prohlížeč postupně načítá stránku a každý skript je vykonán tak brzo, jak je načten. Vhodným umístěním na stránce může být skript proveden, ještě než jsou načteny obrázky, zvuky nebo než je zobrazen celý obsah stránky.

Očividně nám tato vlastnost může způsobit i problémy. V následujícím příkladu se pokusíme najít nastavenou barvu hypertextového odkazu stránky, která se nachází v objektu document.linkColor. První pokus je učiněn v párovém tagu HEAD, druhý až v sekci BODY.

Zdrojový kód příkladu:

<html>
<head>
<title>Barva odkazu</title>
<script type="text/javascript">
  // Vrátí barvu odkazu na stránce.
  var bo1 = document.linkColor;   //bo=barva odkazu, zkratky usnadňují život
</script>
</head>
<body bgcolor="#ffffff" text="#000000" link="#ff0000">
<font face="Arial,Helvetica" size=3>
<script type="text/javascript">
  // Znovu vrátí barvu odkazu na stránce.
  var bo2 = document.linkColor;
  // Vypíšeme si obě barvy.
  document.writeln(`Barva odkazu poprvé: ` + bo1 + `<br>`);
  document.writeln(`Barva odkazu podruhé: ` + bo2);
</script>
</font>
</body>
</html>

Jako výsledek našeho snažení se na stránce objeví:

Barva odkazu poprvé: #0000ff
Barva odkazu podruhé: #ff0000

Při prvním pokusu ještě není načten tag <BODY>, kde je definována barva odkazu a proto je vrácena standardní barva odkazu (modrá). Jak se stránka postupně načítá je následně načten tag <BODY> ve kterém dojde ke změně barvy odkazu ze standardní modré barvy na červenou. Ve druhém pokusu o zjištění barvy odkazu je sekce <BODY> již načtena, a proto získáme nově definovanou hodnotu barvy odkazu (červená).

 

Skript definovaný uvnitř funkce, není vykonán dokud není funkce volána. Ale, jak a kdy umíme volat funkci? Dozvíte se v následující kapitole: Události.

Události

Každý internetový prohlížeč rozpozná určité množství událostí, například když stránka dokončí své načítání nebo když uživatel přesune ukazatel myši nad odkaz či klikne na tlačítko a mnohé další. Tyto události můžeme rozpoznat a provést kód JavaScriptu při jejich výskytu.

Jedna cesta, jak tyto události rozpoznat je pomocí správce událostí (event handler). Ten umí událost zachytit, rozpoznat a vykonat při jejím výskytu potřebné příkazy JavaScriptu. O správce událostí definované JavaScriptem je možné doplnit většinu HTML tagů (tabulka níže). Příklady zde uvedené fungují jak v IE, tak Netscapu.

Definujeme správce události

Pokud chceme definovat správce události, přidáme jméno této události do HTML tagu s příkazem JavaScriptu, který se má vykonat.

Příklad:

<html>
<head>
<title>Navyš</title>
<script type="text/javascript">
var navys;
navys = 0;
</script>
</head>
<body>
  <a href="#" onClick="navys++;alert(navys);">navyš</a>
</body>
</html> 

Proměnná navys bude zvýšena o jedničku pokaždé, když uživatel klikne na odkaz. Do správce události můžete napsat jakýkoliv kód JavaScriptu, který je správný. Může to být jeden příkaz nebo několik příkazů oddělených pomocí středníku (;). Nejčastější a i nejobvyklejší je volat skrze událost nějakou funkci. Nezapomeňte, že tyto příkazy se uzavírají do uvozovek a je nutné zde dodržovat stejné podmínky jako u textových řetězců.

Změna obrázku

Další příklad ukazuje dobře známý efekt se změnou obrázku po najetí kurzoru myši.

Poznámka: tento příklad nebude chodit s Internet Explorer verze 3 nebo nižším.

Tag <IMG> nemá sám o sobě správce události pro pohyb myši, ale má ho hypertextový odkaz. Toho tedy využijeme a obrázek uzavřeme do tagu pro hypertextový odkaz <A HREF=...></A>.

Podíváme se na vlastní kód. Prvně si vytvoříme funkci zmenObr() pro manipulaci s obrázky. Funkce je volána s argumenty jmeno a zdroj se kterými se ve funkci dále pracuje.

function zmenObr(jmeno, zdroj) {
  document.images[jmeno].src = zdroj; //najde obrázek definovaný v argumentu
jmeno a změní jeho URL
  return true;
}

Nyní definujeme pro každý odkaz tři správce události, jeden když je kurzor myši nad odkazem, druhý když je kurzor myši odsunut z odkazu a poslední, když je myší kliknuto na tento odkaz. Příklad je uveden níž:

  <a href="http://www.seznam.cz"
     onMouseOver="zmenObr (`obr1`, `tlacitko_on.gif`)"
     onMouseOut=" zmenObr (`obr1`, `tlacitko_off.gif`)"
     onClick="return false;">
  <img name="obr1" border=0 src="tlacitko_off.gif">
  </a>

Obě události onMouseOver i onMouseOut volají funkci zmenObr(), s argumenty pro jméno obrázku, které se má změnit (v tagu IMG specifikováno pomocí NAME= hodnota) `obr1` a URL obrázku ve který se má změnit `tlacitko_on.gif` (objekty, jejich vlastnosti a metody použité ve funkci zmenObr si podrobně vysvětlíme v dalších částech kurzu).

Popis k události onClick. Příkaz vrací hodnotu false pomocí příkazu return false čímž prohlížeči sděluje, aby potlačil svoje normální chování pro tuto událost. Normálně by prohlížeč po kliknutí na odkaz sledoval a načetl novou stránku. Vrácením hodnoty false sdělíme prohlížeči, že nemá přejít na novou stránku. Pokud ovšem chcete, aby prohlížeč přešel na novou stránku změníte vrácenou hodnotu na return true nebo správce události onClick vynecháte úplně.

Jiný příklad

Dalším často používaný správce události je onLoad, například použitý v tagu <BODY>. V jednom z předcházejících příkladů jsme si ukázali, co se může stát pokud vykonáme příkaz JavaScriptu ještě před kompletním načtením stránky. Událost onLoad je spuštěna, až po kompletním načtení stránky prohlížečem.

Takže předchozí příklad přepíšeme třeba takto:

<html>
<head>
<title>Opět 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>

Poznámka: Funkce alert() je standartní funkce JavaScriptu, která zobrazí dialogové okno se zadaným obsahem. V tomto příkladu to bude hodnota document.linkColor, což je barva odkazu definovaná pro tuto stránku v tagu <BODY>.

Seznam správců událostí

Toto je pouze částečný seznam HTML a tagů a jim příslušných správců událostí. Kompletní popis hledejte na Netscape HTML Reference a Microsoft IE DHTML Events.

Tag Správce události Kdy je volána?
<A> onClick Po kliknutí myší na odkaz.
onMouseOver Při přesunutí myši nad odkaz.
onMouseOut Po odsunutí myši z odkazu.
<AREA> onMouseOver Při přesunutí myši nad oblast klikací mapy.
onMouseOut Po odsunutí myši z oblasti klikací mapy.
<BODY> onBlur Když rám nebo okno přestává být aktivní.
onFocus Když je rám nebo okno je aktivován myší nebo pomocí tabulátoru.
onLoad Po natažení okna nebo rámu do okna prohlížeče.
onUnload Po odstranění okna nebo rámu z okna prohlížeče.
<FORM> onReset Po vynulování formuláře.
onSubmit Při odesílání formuláře.
<IMG> onAbort Když je načítaní obrázku zastaveno uživatelem, stisk tlačítka STOP.
onLoad Až je celý obrázek načten do okna prohlížeče.
onError Při výskytu chyby při načítání obrázku.
<INPUT> s TYPE="BUTTON" nebo "CHECKBOX" nebo "RADIO" nebo "RESET" onClick Po kliknutí myší na prvek formuláře.
<INPUT> s TYPE="TEXT" nebo <TEXTAREA> onBlur Když prvek formuláře přestává být aktivní.
onChange Když je text ve formuláři změněn.
onFocus Když je textová oblast fomuláře aktivována myší nebo pomocí tabulátoru.
onSelect Když uživatel označí celý nebo jen část textu v textové oblasti formuláře.
<INPUT> s TYPE="SELECT" onBlur Když vybraný prvek ze seznamu přestává být aktivní.
onChange Když je změněn prvek seznamu.
onClick Když uživatel klikne na prvek v seznamu.
onFocus Když je určitý prvek v seznamu aktivován.

Dnešním dílem končí část základy JavaScriptu a příště se vrhneme na objekty. Slíbený seznam klíčových slov je na druhé stránce.

Témata článku: Software, Microsoft, Prohlížeče, Programování, Internet Explorer, Java, Javascript, Výuka, Alert, Druhý typ, Druhá sekce, Aktivní uživatel, Textový řetězec, Červené tlačítko, Head, Správce, Body, Určitý objekt, Catch


Určitě si přečtěte

Nejlepší příslušenství k počítači. Tipy na osvědčené klávesnice, tiskárny, routery…

Nejlepší příslušenství k počítači. Tipy na osvědčené klávesnice, tiskárny, routery…

** Tipy na užitečné příslušenství k počítačům ** Poradíme, s jakými produkty neuděláte chybu ** Některé z věcí mohou být dobrými vánočními dárky

David Polesný, Stanislav Janů | 20

David PolesnýStanislav Janů
Příslušenství
Google chystá funkci, která z chytrého Gmailu udělá hloupý Gmail
Lukáš Václavík
SoukromíGmailGoogle
Elon Musk podpořil Signal jako náhradu WhatsAppu. Aplikaci okamžitě zavalili uživatelé
Markéta Mikešová
WhatsAppElon MuskFacebook
Japonská MANA může být 80× výkonnější než sebelepší tranzistorový procesor

Japonská MANA může být 80× výkonnější než sebelepší tranzistorový procesor

** Tranzistory současných počítačů vyzařují při přepínání teplo ** Na Tokijské univerzitě proto vyvíjejí adiabatické procesory ** Využívají supravodivost a jsou 80× úspornější

Jakub Čížek | 43

Jakub Čížek
TranzistoryProcesoryTechnologie
Uživatelé hlásí problémy s jednou z listopadových záplat pro Windows 10
Karel Kilián
Windows UpdateAktualizaceWindows 10
Air Bank, Fio banka a MONETA zakládají alianci pro bankovní identitu
Jakub Čížek
BankaČeskoeGovernment

Aktuální číslo časopisu Computer

Jak prodloužit výdrž notebooku

Velké testy: gamepady a inkoustové tiskárny

Důkladný test Sony Playstation 5