JavaScript – sada příkladů 1

Události

`onload`	vznikne, když prohlížeč dokončí natahování obsahu okna nebo všech rámců
`onunload`	vznikne při odstranění obsahu dokumentu z okna nebo nebo rámce
`onclick`	vznikne při kliknutí myší na daný prvek
`ondblclick`	vznikne při dvojím kliknutí myší na daný prvek
`onmousedown`	vznikne, je-li stisknuto tlačítko myši na daném prvku
`onmouseup`	vznikne při uvolnění tlačítka myši na daném prvku
`onmouseover`	vznikne při ponechání kurzoru myši nad daným prvkem
`onmousemove`	vznikne při přesunu kurzoru myši nad daným prvkem
`onmouseout`	vznikne při opuštění kurzoru myši z daného prvku
`onfocus`	vznikne při zaměření pozornosti na daný prvek
`onblur`	vznikne při odebrání pozornosti z daného prvku
`onkeypress`	vznikne při stisku a uvolnění klávesy na prvku
`onkeydown`	vznikne při stisku klávesy na prvku
`onkeyup`	vznikne při uvolnění klávesy na prvku
`onsubmit`	vznikne při odeslání formuláře
`onreset`	vznikne při nulování formuláře
`onselect`	vznikne při výběru textu v textovém poli
`onchange`	vznikne, když řídicí prvek ztrácí pozornost a jeho hodnota byla od doby získání pozornosti modifikována

Příklad 1.1

Při kliknutí myší na následující tlačítko, tj. při události onclick, se vyvolá metoda alert, která slouží k zobrazení obsahu řetězce, který je uveden jako parametr v závorkách. Metoda alert slouží obecně k výstupu nějakého textu prostřednictvím dialogového okna. Povšimněte si užití apostrofů a uvozovek.

<FORM>
  <INPUT type="button" value="Klikni sem" onclick="alert('Dobrý den')">
</FORM>

Příklad 1.2

Při kliknutí myší na odpovídající tlačítko, tj. při události onclick, se nastaví odpovídající barva pozadí celého dokumentu.

<FORM>
  <INPUT type="button" value="Zhasni"
         onclick="document.bgColor='black'">
  <INPUT type="button" value="Rozsviť"
         onclick="document.bgColor='white'">
</FORM>

Vyzkoušejte si v novém okně.

Příklad 1.3

Podaří se vám "rozsvítit" kliknutím myší na tlačítko Rozsviť?

<FORM>
  <INPUT type="button" value="Zhasni"
         onclick="document.bgColor='black'">
  <INPUT type="button" value="Rozsviť"
         onclick="document.bgColor='white'" onmouseover="alert('Šetři!')">
</FORM>

Vyzkoušejte si v novém okně.

Příklad 1.4

Znáte správnou odpověď?

sin<SUP>2</SUP><I>x</I> + cos<SUP>2</SUP><I>x</I> =
<FORM name="kviz">
  <INPUT type="radio" name="odpoved"
         onclick="alert('ŠPATNĚ.')"> 0<BR>
  <INPUT type="radio" name="odpoved"
         onclick="alert('SPRÁVNĚ.')"> 1<BR>
  <INPUT type="radio" name="odpoved"
         onclick="alert('ŠPATNĚ.')"> 2<BR>
</FORM>

sin²x + cos²x =

Příklad 1.5

<HTML>
  <HEAD>
    <TITLE>Pokusná stránka</TITLE>
  </HEAD>
  <BODY onload="alert('Detekována šikmo položená podložka pod myš!')">
    <H1 align="center">Vítejte!</H1>
  </BODY>
</HTML>

Vyzkoušejte si v novém okně.

Příklad 1.6

Předpokládejme, že ve složce images máme uloženy následující dva obrázky: smiley.gif a palette.gif.

<IMG src="images/palette.gif" id="obrazek1" width="50" height="50"
     onmouseover="document.all.obrazek1.src='images/smiley.gif'"
     onmouseout="document.all.obrazek1.src='images/palette.gif'">

Příklad 1.7

Předpokládejme, že ve složce images máme uloženy následující tři obrázky:flag_cz.gif, flag_de.gif a flag_gb.gif.

<FORM name="vlajky">
  <INPUT type="text" name="zeme" size="20">
</FORM>
<IMG src="images/flag_cz.gif" border="1" width="49" height="28"
     onmouseover="document.vlajky.zeme.value='Česká republika'"
     onmouseout="document.vlajky.zeme.value=''">
<IMG src="images/flag_de.gif" border="1" width="49" height="28"
     onmouseover="document.vlajky.zeme.value='Německo'"
     onmouseout="document.vlajky.zeme.value=''">
<IMG src="images/flag_gb.gif" border="1" width="49" height="28"
     onmouseover="document.vlajky.zeme.value='Velká Británie'"
     onmouseout="document.vlajky.zeme.value=''">

Příklad 1.8

Opět předpokládejme, že ve složce images máme uloženy následující tři obrázky: flag_cz.gif, flag_de.gif a flag_gb.gif.

<FORM>
  <INPUT type="button" value="Česká republika"
         onclick="document.all.vlajka.src='images/flag_cz.gif'">
  <INPUT type="button" value="Německo"
         onclick="document.all.vlajka.src='images/flag_de.gif'">
  <INPUT type="button" value="Velká Británie"
         onclick="document.all.vlajka.src='images/flag_gb.gif'">
</FORM>
<IMG src="images/flag_cz.gif" id="vlajka" border="1"
     width="49" height="28">

Příklad 1.9

Předpokládejme, že ve složce images máme uložen obrázek pernstejn1.jpg se šířkou 275 a výškou 201 bodů.

<FORM>
  <INPUT type="button" value="Zmenšit"
         onclick="document.all.pernstejn.width='137';
	          document.all.pernstejn.height='100'">
  <INPUT type="button" value="Původní velikost"
         onclick="document.all.pernstejn.width='275';
	          document.all.pernstejn.height='201'">
  <INPUT type="button" value="Zvětšit"
         onclick="document.all.pernstejn.width='550';
	          document.all.pernstejn.height='402'">
</FORM>
<IMG src="images/pernstejn1.jpg" id="pernstejn"
     width="275" height="201">

Jak si vyzkoušet výše uvedené příklady?

Označte myší zdrojový text libovolné ukázky.
Vybraný text zkopírujte do clipboardu.
Klikněte myší do textového pole uvedeného níže a text sem z clipboardu vložte.
Zdrojový text můžete libovolně upravit.
Poté klikněte na tlačítko Ukázat. V okně náhledu se vám zobrazí dokument, jehož zdrojový text byl zapsán v textovém poli.
Pokud je třeba, aby se dokument otevřel v novém okně, stačí kliknout na tlačítko Ukázat v novém okně.
Tlačítkem Vybrat vše se označí veškerý text zapsaný v textovém poli.
Tlačítkem Smazat můžete obsah celého textového pole vymazat.

Náhled: