Základy programování

Obsah:

• Co to jsou události
• Přehled událostí
• Zrušení události

Co to jsou události

Událostí může být například kliknutí myší na tlačítko, na obrázek apod., změna pole formuláře, odeslání formuláře, najetí myší nad text, obrázek, apod.

Na tuto událost reaguje internetový prohlížeč spuštěním funkce, která je u daného objektu této události přiřazena. (Více o funkcích v kapitole funkce.)

V hlavičce stránky zapíšeme např. funkci, která mění obrázek:

function zmenaObrazku(cislo)
{
  if (cislo<10) cislo = "0" + cislo;
  document.getElementById("obr").src = "img/foto" + cislo + ".jpg";
}

Tlačítkům 1 a 2 přiřadíme tuto funkci při kliknutí:

<input type="button" value="1" onclick="zmenaObrazku(1)">
<input type="button" value="2" onclick="zmenaObrazku(2)">

Obrázku můžeme přiřadit tuto funkci při najetí myši a při odjetí myši:

<img src="img/foto02.jpg" id="obr" height="25" width="100" alt=""
     onmouseover="zmenaObrazku(1)" onmouseout="zmenaObrazku(2)">

Přehled událostí

• onclick - kliknutí myší na objekt
• ondblclick - dvojklik myší
• onmouseover - najetí myší nad objekt
• onmouseout - odjetí myší z objektu
• onfocus - aktivace objektu
• onblur - opuštění objektu
• onchange - změna obsahu
• onsubmit - odeslání formuláře
• onreset - vymazání formuláře
• onload - načtení objektu
• onselect - označení textu
• onkeypress - stisknutí klávesy
• a další

Pro tlačítko používáme nejčastěji událost onclick, pro obrázek - onclick, onmouseover, onmouseout, onload, pro odkaz či normální text - onclick, onmouseover, onmouseout, pro pole formuláře - onfocus, onblur, onclick, onchange, pro formulář - onsubmit, onreset, pro tělo stránky - onload, onkeypress.

 

Vyberte plakát

Egyptské pyramidy Visuté zahrady Semiramidiny Feidiův Zeus v Olympii Artemidin chrám v Efesu Mauzoleum v Halikarnassu Rhódský kolos Maják na ostrově Faru     barevný černobílý

s textem       Vaše jméno:

     

Zrušení události

Zrušení události provedeme nastavením návratové hodnoty funkce na false:

return false;

V html kódu přiřadíme události návratovou hodnotu funkce robněž pomocí return:

<form onsubmit="return kontrola()" action="data.php" method="post">

Např. při odeslání formuláře stisknutím tlačítka submit je před odesláním dat na server spuštěna funkce JavaScriptu přiřazená události onsubmit. Tato funkce může provést kontrolu dat, nebudou-li data v pořádku, nastaví se return=false, tím se událost zruší a data nebudou na server odeslána.

Obdobně můžeme zrušit otevření odkazu. Přiřadíme-li odkazu funkci vyvolanou událostí onclick, která např. provede změnu obrázku ve stránce na další z galerie obrázků, pak return=false zruší otevření odkazu. Bude-li však v prohlížečí JavaScript vypnutý, nebude funkce spuštěna, obrázek ve stránce se nezmění, ale provede se otevření odkazu na nový obrázek.