Envoyer à un ami
Les bases de la gestion événementielle
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Gestion événementielle</title>
<script>
function load()
{
document.getElementById("status").innerHTML = "L'événement 'load' a été généré.";
}
function bouton(b)
{
document.getElementById("status").innerHTML = "Le bouton " +b + " a été cliqué.";
}
</script>
</head>
<body onload="load()" onunload="unload();">
<p>Status: <span id="status">En attente.'</span></p>
<button onClick="bouton(1)">Bouton 1</button>
<button onClick="bouton(2)">Bouton 2</button>
</body>
</html>
Evénements liés à la fenêtre
<!DOCTYPE html>
<html>
<head>
<title>Evénements liés à la fenêtre</title>
<script>
function unload()
{
document.getElementById("status").innerHTML = "L'événement 'unload' a été généré";
}
function load()
{
document.getElementById("status").innerHTML = "L'événement 'load' a été généré";
}
</script>
</head>
<body onload="load()" onunload="unload();">
<p>Status: <span id="status">En attente de l'événement 'unload'</span></p>
</body>
</html>
Evénements clavier
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Gestion événementielle</title>
<script>
function faitecho(ev)
{
document.getElementById("echo").innerHTML = document.getElementById("echo").innerHTML + String.fromCharCode(ev.keyCode);
}
</script>
</head>
<body>
<p>echo: <span id="echo"></span></p>
<input type="text" id="saisie" onkeypress="return faitecho(event);">
</body>
</html>
Evénements souris
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Gestion événementielle</title>
<script>
function traitement(param)
{
document.getElementById("activite").innerHTML = param;
}
</script>
</head>
<body>
<img src="ecureuil.jpg"
onclick="traitement('clic souris');"
ondblclick="traitement('double-clic souris');"
ondrag="traitement('déplacement');"
ondrop="traitement('relâchement de l''image');"
onmousedown="traitement('bouton souris enfoncé');"
onmousemove="traitement('déplacement de la souris');"
onmousemove="traitement('déplacement du pointeur en
dedors de l''image');"
onmouseover="traitement('déplacement du pointeur au-
dessus de l''image');"
onmouseup="traitement('relâchement du bouton de la
souris');"
onmousewheel="traitement('déplacement de la roulette de
la souris');"
>
<p>Activité : <span id="activite"></span></p>
</body>
</html>
Evénements liés aux formulaires
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Gestion événementielle</title>
<script>
function traitement(param)
{
document.getElementById("activite").innerHTML = param;
}
</script>
</head>
<body>
<form name="MonFormulaire" method="post" >
<label>Quel est le meilleur système d'exploitation selon vous ?</label>
<input name="texte"
placeholder="Entrez votre réponse ici"
onforminput="traitement('Saisie de données');"
onformchange="traitement('Le contenu du formulaire change');"
onfocus="traitement('La zone de texte a le focus');"
onblur="traitement('La zone de texte a perdu le focus');"
>
<input type="submit" value="Envoyer" onsubmit="traitement
('Le bouton Submit a été pressé');">
</form>
<p>Activité : <span id="activite"></span></p>
</body>
</html>
Evénements liés aux médias
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Gestion événementielle</title>
<script>
function etat(param)
{
document.getElementById("activite").innerHTML = param;
}
</script>
</head>
<body>
<video id="video" src="https://www.mediaforma.com/uneminuteparjour/video/godmode.mp4"
controls="controls"
poster="https://www.mediaforma.com/uneminuteparjour/thumbs/godmode.jpg"
onabort="etat('onabort');"
oncanplay="etat('oncanplay');"
oncanplaythrough="etat('oncanplaythrough');"
ondurationchange="etat('ondurationchange');"
onemptied="etat('onemptied');"
onended="etat('onended');"
onerror="etat('onerror');"
onloadeddata="etat('onloadeddata');"
onloadedmetadata="etat('onloadedmetadata');"
onloadstart="etat('onloadstart');"
onpause="etat('onpause');"
onplay="etat('onplay');"
onplaying="etat('onplaying');"
onprogress="etat('onprogress');"
onratechange="etat('onratechange');"
onreadystatechange="etat('onreadystatechange');"
onseeked="etat('onseeked');"
onseeking="etat('onseeking');"
onstalled="etat('onstalled');"
onsuspend="etat('onsuspend');"
ontimeupdate="etat('ontimeupdate');"
onvolumechange="etat('onvolumechange');"
onwaiting="etat('onwaiting');"
>
</video>
<p>Activité : <span id="activite"></span></p>
</body>
</html>
Stockage local de données
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8" />
<title>Stockage local HTML5</title><style>
div
{
border-width: 1px;
border-style: dotted;
}
</style>
<script>
function Affiche()
{
var key = "";
var NomValeur = "<tr><th>Nom</th><th>Valeur</th></tr>\n";
var i=0;
for (i=0; i<=localStorage.length-1; i++)
{
key = localStorage.key(i);
NomValeur += "<tr><td>"+key+"</td>\n<td>"+localStorage.getItem(key)+"</td></tr>\n";
}
document.getElementById('NomValeur').innerHTML = NomValeur;
}function Enregistre()
{
var nom = document.forms.editor.name.value;
var valeur = document.forms.editor.data.value;
localStorage.setItem(nom, valeur);
Affiche();
}
function Lit()
{
var nom = document.forms.editor.name.value;
document.forms.editor.data.value = localStorage.getItem(nom);
Affiche();
}
function Efface()
{
var nom = document.forms.editor.name.value;
document.forms.editor.data.value = localStorage.removeItem(nom);
Affiche();
}
function EffaceTout()
{
localStorage.clear();
Affiche();
}
</script>
</head><body onload="Affiche()">
<h1>Stockage local HTML5</h1>
<form name=editor>
<div id="donnees">
<h2>Entrez la donnée à stocker</h2>
<p><label>Nom <input name=name></label></p>
<p><label>Donnée <textarea name=data cols=41 rows=10></textarea></label></p>
<p>
<input type="button" value="Lit" onclick="Lit()">
<input type="button" value="Enregistre" onclick="Enregistre()">
<input type="button" value="Efface" onclick="Efface()">
<input type="button" value="Efface tout" onclick="EffaceTout()">
</p>
</div>
<br><br>
<div id="valeurs">
<h2>Données stockées</h2>
<table id="NomValeur" border="1"></table>
</div>
</form>
</body>
</html>