Exemples

Note: si vous tapez javascript: dans le champ "location", le butineur ouvrira une fenêtre console javascript dans laquelle les messages d'erreur seront affichés.

• créer un lien qui ouvrira un document dans une nouvelle fenêtre:

  <a href="AutreDoc.html" onClick="NewWin('AutreDoc.html'); return false" >le texte du lien</a>

  avec la fonction NewWin définie ainsi:

  function NewWin(DocUrl) {
    window.open(DocUrl, 'MaNouvelleFenetre',
      'menubar,location,resizable,scrollbars,status,titlebar,toolbar');
    }

  Note: le return false dans la valeur de l'attribut onClick sert à empécher que le butineur effectue le changement dans la fenêtre d'origine. Si JavaScript est désactivé, le lien normal, défini par l'attribut href, sera utilisé.
  

• sélectionner interactivement la couleur d'arrière-plan du document:

  <form name="colorForm">
    <select name="color" onChange=setColor()>
      <option>Rouge
      <option>Vert
      <option>Bleu
      <option selected>Blanc
      <option>Jaune
      <option>Pourpre
    </select>
  </form>

  avec la fonction setColor définie ainsi:

  function setColor() {
  var choice;
    choice = document.colorForm.color.selectedIndex;
    switch(choice) {
       case 0: document.bgColor = "FF0000"; break;
       case 1: document.bgColor = "00FF00"; break;
       case 2: document.bgColor = "0000FF"; break;
       case 3: document.bgColor = "FFFFFF"; break;
       case 4: document.bgColor = "FFFF00"; break;
       case 5: document.bgColor = "FF00FF"; break;
       }
    }

  Note: si JavaScript est désactivé, le formulaire n'aura tout simplement pas d'effet.

• filtrer les caractères non-alphabétiques d'un champ texte d'un formulaire:

  <form method=GET name="TestForm"
    action="http://cuisung.unige.ch/cgi-bin/printenv">
  Alpha:
  <input name="test" size=30 maxlength=50
    onChange="this.value=toAlpha(this.value)">
  <input type=submit value="Submit">
  </form>
  

  avec la fonction toAlpha définie ainsi:

  function toAlpha(checkString) {
    newString = "";
    count = 0;
  
    // parcoure le string caractere par caractere
    for (i = 0; i < checkString.length; i++) {
      ch = checkString.substring(i, i+1);
  
    // ajouter le caractere au nouveau string si c'est un caractere alphabetique
    if ((ch >= "a" && ch <= "z") || (ch >= "A" && ch <= "Z" )) {
      newString += ch;
      }
    }
  
    if (checkString != newString) {
      // verifie aupres de l'utilisateur que c'est ok d'oter les caracteres non-alphabetiques
      if (confirm("La valeur que vous avez fournie\ncontient des caracteres non-alphabetiques,\nremplacer par '" + newString + "'?")) {
        // retourne le string modifie
        return newString;
        } else {
        // retourne le string d'origine
        return checkString;
        }
      }
    return checkString;
    }

  Note: si JavaScript est désactivé, le formulaire continuera à fonctionner, mais il n'y aura pas de vérification avant l'envoi des données.

• pour une ressource d'un type MIME donné, utiliser le plugin approprié s'il est disponible, ou fournit un lien vers la ressource si un programme externe est disponible, ou indiquer que le type MIME n'est pas supporté:

  <script type="text/Javascript">
  <!--
  typemime = navigator.mimetypes["UnType/UnSoustype"]
  if (typemime) {
    // Ce type MIME est reconnu, peut-on l'afficher avec un plugin?
    plugin = typemime.enabledPlugin
    if (plugin)
      // Le plugin approprié existe, montre l'information en-ligne
      document.write("Voici ...: <EMBED SRC='URL' HEIGHT='100' WIDTH='100'>")
    else
      // Pas de plugin approprié, fournit un lien vers l'information
     document.write("L'<A HREF='URL'>information</A> est disponible ...")
    } else {
    // Non, indiquer qu'il n'est pas possible de traiter
    document.write("Désolé, votre butineur ne sait pas comment traiter des resources UnType/UnSoustype.")
    } // if (typemime)
  // -->
  </script>
  <noscript>
    L'<a href="URL" >information</a> est disponible ...
  </noscript>
  

• pour empécher un document d'être affiché dans un frame et de toujours apparaître dans la fenêtre racine du butineur:

  if (top != self)
    top.location = self.location

  Si JavaScript n'est pas activé, ce mécanisme ne fonctionnera pas, mais cela ne devrait pas poser de problème.

• pour éviter qu'un "vieux" butineur produise des erreurs à cause d'une syntaxe trop récente, mettre au début du document:

  <script type="text/Javascript">
  <!--
  function stopErrors() {
    return true;
    }
  window.onerror = stopErrors;
  // -->
  </script>

• pour changer une image lorsque le curseur est dessus (on encapsule l'image dans un lien vide en gérant les événements MouseOver et MouseOut dans le lien):

  <a href=""
    onMouseOver="document.MonImage.src='../../gif/arrow.EN.gif'; return true;"
    onMouseOut="document.MonImage.src='../../gif/arrow.NE.gif'; return true;" >
  <img name="MonImage" src="../../gif/arrow.NE.gif" border=0 >
  </a>

• pour faire défiler un texte dans la barre de status on utilise la propriété window.status

---

• Form validation code
• JavaScript Source
• Focus on JavaScript, chez Mining Co./About.com
• JavaScript Sample Code (site Netscape)
• Cut-and-Paste JavaScript
• Exemples du livre de Danny Goodman JavaScript Bible

---