Příklad 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 použití apostrofů a uvozovek. 
<form  action="">
  <input type="button" value="Klikni sem" onclick="alert('Dobrý den!')" />
</form>

Příklad 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  action="">
  <input type="button" value="Zhasni"
         onclick="document.bgColor='black'" />
  <input type="button" value="Rozsviť"
         onclick="document.bgColor='white'" />
</form>

Příklad 3

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

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

Příklad 4

Znáte správnou odpověď? 
sin<sup>2</sup><I>x</I> + cos<sup>2</sup><I>x</I> =
<form name="kviz"  action="">
  <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Ě. Správná odpověď je 1.')" /> 2<br />
</form>
sin2x + cos2x =
0
1
2

Příklad 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>
Tady je příklad 5.

Příklad 6

Předpokládejme, že ve složce images máme uloženy následující dva obrázky: flag_cz.gif a flag_de.gif. 
<img src="images/flag_de.gif" id="obrazek1" alt="Německo" width="49" height="28"
     onmouseover="document.images.obrazek1.src='images/flag_cz.gif'"
     onmouseout="document.images.obrazek1.src='images/flag_de.gif'"/>
Německo

Příklad 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"  action="">
  <input type="text" name="zeme" size="20" />
</form>
<img src="images/flag_cz.gif" alt="ČR" border="1" width="49" height="28"
     onmouseover="document.vlajky.zeme.value='Česká republika'"
     onmouseout="document.vlajky.zeme.value=''"/>
<img src="images/flag_de.gif" alt="Německo" border="1" width="49" height="28"
     onmouseover="document.vlajky.zeme.value='Německo'"
     onmouseout="document.vlajky.zeme.value=''"/>
<img src="images/flag_gb.gif" alt="Velká Británie" border="1" width="49" height="28"
     onmouseover="document.vlajky.zeme.value='Velká Británie'"
     onmouseout="document.vlajky.zeme.value=''"/>
ČRNěmeckoVelká Británie

Příklad 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 action="">
  <input type="button" value="Česká republika"
         onclick="document.images.vlajka.src='images/flag_cz.gif'" />
  <input type="button" value="Německo"
         onclick="document.images.vlajka.src='images/flag_de.gif'" />
  <input type="button" value="Velká Británie"
         onclick="document.vlajka.src='images/flag_gb.gif'" />
</form>
<img src="images/flag_cz.gif" id="vlajka" alt="ČR" border="1"
     width="49" height="28" />
ČR