Médiaforma

Guide de survie – Evénements et gestion événementielle

Print Friendly, PDF & Email

Les bases de la gestion événementielle

Tester le code


<!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

Tester le code


<!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

Tester le code


<!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

Tester le code


<!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

Tester le code


<!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

Tester le code


<!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

Tester le code


<!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>

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.