Tutoriel pour débuter en JavaScript

Pourquoi JavaScript ?

JavaScript est un langage de programmation puissant, complexe et trop souvent mal compris. Il permet le développement rapide d'applications avec lesquelles l'utilisateur va pouvoir intéragir pour saisir des données et observer le résultat de leur traitement.

L'avantage premier de JavaScript, dont le standard correspondant est connu sous l'appellation ECMAScript, est qu'il est centré sur le navigateur web, aussi il produira un résultat similaire sur toutes les plateformes supportées par le navigateur. Les exemples sur cette page, tout comme Google Maps, fonctionnent sur Linux, OS X and Windows. Avec le nombre toujours grandissant de bibliothèques JavaScript, il est de plus en plus facile de naviguer dans le document, sélectionner des éléments du DOM, créer des animations, gérer les évènements, et développer des applications AJAX. Contrairement à l'hyper médiatisation d'autres technologies promues par divers intérêts propriétaires, JavaScript est réellement le seul langage multi-plateformes côté client qui est à la fois gratuit et universellement adopté.

Ce que vous devriez déjà savoir

JavaScript est un langage très facile d'accès. Tout ce dont vous avez besoin pour commencer est d'un éditeur de texte et d'un navigateur web.

Bon nombre d'autres technologies allant au delà de la portée de ce document peuvent êtres intégrées et développées dans la continuité de JavaScript.
Ne vous attendez pas à réaliser une application comme Google Maps dès vos premières lignes en JavaScript.

Pour commencer

Il est très facile de débuter en JavaScript. Vous n'avez pas besoin d'avoir des outils de développement installés. Vous n'avez pas besoin de savoir utiliser une console, Make, ou d'utiliser un compilateur. JavaScript est interprété par votre navigateur web. Tout ce dont vous avez besoin est d'enregistrer votre programme dans un fichier texte puis de l'ouvrir dans votre navigateur. C'est tout.

JavaScript est un excellent langage de programmation pour débuter l'apprentissage de langages informatiques. Il permet des retours instantanés pour le nouvel étudiant, et lui fera découvrir des outils dont il ne manquera pas d'apprécier l'utilité dans la vie réelle. C'est un contraste saisissant en comparaison des langages C, C++ et Java qui peuvent être utiles pour certaines applications particulières.

Les problèmes de compatibilité entre les navigateurs

Il existe certaines variations concernant la disponibilité des fonctionnalités entre les différents navigateurs. Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, Apple Safari et Opera se comportent différement. Vous pouvez atténuer ces fluctuations en utilisants les diverses API JavaScript multi-plateformes disponibles. Ces API fournissent des fonctionnalités communes et masquent certaines des variations entre les navigateurs.

Comment essayer les exemples

Les exemples qui suivent possédent des échantillons de code. Il y a de multiples façons d'essayer ces exemples. Si vous posséder votre propre site, vous pouvez les sauvegarder comme nouvelles pages de celui-ci.

Si vous ne possédez pas de site personnel, vous pouvez sauvegarder ces exemples sous forme de fichiers sur votre ordinateur et les ouvrir dans le navigateur que vous utilisez en ce moment.
JavaScript est un langage très simple à utiliser pour commencer la programmation pour cette raison. Vous n'avez pas besoin de compilateur, ou d'un environnement de développement ; votre navigateur est le seul outil dont vous avez besoin pour démarrer.

Vour pouvez également utiliser certains site comme jsfiddle.net pour tester du code JavaScript.

Exemple : Capturer le clic de la souris

Les spécificités de la gestion d'événements (types d'événements, enregistrement des gestionnaires, propagation, etc.) sont trop vastes pour être totalement couverte par ce simple exemple. De plus, celui-ci ne peut présenter la capture du clic souris sans approfondir un minimum le système d'événements JavaScript. Garder à l'esprit que cet exemple va seulement éfleurer l'exhaustivité des événements JavaScript et que si vous souhaitez aller au delà des fonctionnalités basiques qui y sont décrites, lisez en plus à propos du système d'événements JavaScript.

Les événements « souris » sont un sous-ensemble de la pléthore d'événements déclenchés par le navigateur Web en réponse aux actions de l'utilisateur. Ce qui suit est une liste des événements émis en réponse aux actions d'un utilisateur sur la souris :

• click - transmis quand un utilisateur clic avec la souris
• dblclick - transmis quand un utilisateur double-clic avec la souris
• mousedown - transmis lorsqu'un utilisateur presse un bouton de la souris (la première moitié d'un clic)
• mouseup - transmis lorsqu'un utilisateur relâche un bouton de la souris (la seconde moitié d'un clic)
• mouseout - transmis lorsque le pointeur de la souris quitte les limites graphiques d'un objet
• mouseover - transmis lorsque le pointeur de la souris entre dans les limites graphiques d'un objet
• mousemove - transmis lorsque le pointeur de la souris bouge à l'intérieur des limites graphiques d'un objet
• contextmenu - transmis lorsqu'un utilisateur effectue un clic-droit.

Noter que dans les versions d'HTML, les événements inline (ceux ajoutés en tant qu'attribut de balise), doivent être écris en minuscule et que les gestionnaires d'événements dans les scripts sont aussi en minuscule.

La méthode la plus simple pour capturer ces événements et enregistrer les gestionnaires - en utilisant le HTML - est de spécificer chaque événement en tant qu'attribut de l'élément désiré.

  <span onclick="alert('Hello World!');">Cliquer ici</span>

Le code JavaScript que vous souhaitez exécuter peut être disposé en ligne dans l'élément ou bien être placé dans un éléménet <script> au sein de votre page HTML :

<script>
  function clickHandler() {
     alert("Hello, World!");
  }
</script>
<span onclick="clickHandler();">Cliquer ici</span>

Il est possible de capturer et d'utiliser l'événement qui se produit. Cela permet au développeur d'accéder à plus d'informations (par exemple : l'objet qui a reçu l'événement, le type de l'événement et le bouton de la souris utilisé). Par exemple :

<script>
  function clickHandler(événement) {
    var eType = événement.type;
    /* l'instruction suivante est utilisée à des fins de compatibilité */
    /* Firefox renseignera la propriété target de l'événement */
    /* IE renseignera la propriété srcElement */
    var eTarget = événement.target || événement.srcElement;

    alert( "événement capturé (type = " + eType + ", cible = " + eTarget + ")" );
  }
</script>
<span onclick="clickHandler(event);">Cliquer ici</span>

En plus de pouvoir recevoir des événements dans le HTML, il est possible de définir de nouveaux éléments HTML en JavaScript et de définir leurs attributs. L'exemple ci-après permet d'ajouter un élément <span> au corps de la page et de définir les attributs nécessaires pour qu'il reçoive les événements liés à la souris.

<body></body>
<script>
  function mouseeventHandler(event) {
    /* La ligne qui suit est utilisée à des fins de compatibilité */
    /* IE ne fournit pas directement l'événement */
    /* il faut obtenir une référence vers l'événement si nécessaire */
    if (!event) event = window.event;

    /* on récupère le type de l'événement et la cible */
    var eType = event.type;
    var eTarget = event.target || event.srcElement;
    alert(eType +' événement sur l'élément avec l'identifiant '+ eTarget.id);
  }

 function onloadHandler() {
   /* on récupère une référence à l'élément 'body' de la page */
   var body = document.body;
   /* on crée un élément span sur lequel on pourra cliquer */
   var span = document.createElement('span');
   span.id = 'SpanExemple';
   span.appendChild(document.createTextNode ('Cliquer ici !'));

   /* on inscrit l'objet span aux différents événements liés à la souris
      les événements sont écrits en minuscules, le nom du gestionnaire d'événement
      peut avoir n'importe quelle casse.
   */
   span.onmousedown = mouseeventHandler;
   span.onmouseup = mouseeventHandler;
   span.onmouseover = mouseeventHandler;
   span.onmouseout = mouseeventHandler;

   /* on affiche l'élément span sur la page */
   body.appendChild(span);   
}

window.onload = onloadHandler; // on remplace la fonction (on ne l'appelle pas) et donc on ne met pas de parenthèses
</script>

Exemple : Intercepter un événement clavier

De la même façon que pour les événements liés à la souris, il est possible d'utiliser les événements JavaScript pour capturer les interactions liées au clavier. Un événement est déclenché à chaque fois qu'une touche du clavier est utilisée.

La liste des événéments disponibles pour le clavier est plus restreinte que celle des événements pour la souris :

• keypress : se produit quand on appuie sur une touche et qu'on la relâche
• keydown : se produit quand on appuie sur une touche et que celle-ci n'a toujours pas été relâchée
• keyup : se produit quand la touche du clavier est relâchée
• TextInput (disponible pour les navigateurs Webkit au moment de l'écriture) : se produit quand du texte est saisi, que ce soit via un coller du presse-papier, une commande vocale ou une saisie clavier. Cet événement ne sera pas traité dans cet article.

Lors d'un événement keypress, la valeur Unicode de la touche pressée est enregistrée grâce à la propriété keyCode ou charCode (mais jamais dans les deux). Si la touche pressée génère un caractère (par exemple 'a'), charCode représentera la valeur du caractère en tenant compte de la casse (charCode gère l'appui simultané avec la touche shift pour écrire en majuscules). Dans les autres cas, le code de la touche est enregistré dans keyCode.

La façon la plus simple d'intercepter les événements clavier est ici aussi d'enregistrer des gestionnaires d'événements (handlers) dans le HTML et de spécifier quels événements doivent être gérés. Par exemple :

<input type="text" onkeypress="alert ('Coucou monde !');">

De la même façon qu'avec les événements liés à la souris, le code JavaScript peut être présenté dans la définition de l'attribut ou bien au sein d'un bloc <script> de la page HTML utilisée :

<script>
  function keypressHandler() {
    alert ("Coucou monde !");
  }
</script>

<input onkeypress="keypressHandler();" />

De la même façon que pour les événements liés à la souris, on peut enregistrer les détails de l'événement et de la cible de cet événement :

<script type="text/javascript">
  function keypressHandler(evt) {
      var eType = evt.type; // Renverra "keypress" comme type d'événement
      /* ici aussi on utilise une instruction pour que le code fonctionne
         sur les différents navigateurs (mozilla utilise which et les autre
         navigateurs utilisent keyCode.
         On peut ici utiliser l'opérateur ternaire pour obtenir le résultat */
      var keyCode = evt.which?evt.which:evt.keyCode;
      var eCode = 'keyCode est ' + keyCode;
      var eChar = 'charCode est ' + String.fromCharCode(keyCode); // ou evt.charCode
      alert ("Événement capturé (type = " + eType + ", valeur Unicode pour la touche = " + eCode + ", valeur ASCII = " + eChar + ")");
   }
</script>
<input onkeypress="keypressHandler(event);" />

Il est possible de capturer n'importe quel élément clavier en associant un gestionnaire d'événement avec ceux du document grâce à une fonction :

<script>
  document.onkeypress = keypressHandler;
  document.onkeydown = keypressHandler;
  document.onkeyup = keypressHandler;
</script>

Voici un exemple complet qui illustre comment gérer les événements du clavier :

<!DOCTYPE html>
<html>
<head>
  <script>
    var metaChar = false;
    var toucheExemple = 16;
    function keyEvent(event) {
      var key = event.keyCode || event.which; // une autre syntaxe que l'opérateur ternaire s'il n'y a pas de keyCode
      var keychar = String.fromCharCode(key);
      if (key == toucheExemple) {
        metaChar = true;
      }
      if (key != toucheExemple) {
         if (metaChar) {
            alert("Combinaison de la touche meta et de " + keychar)
            metaChar = false;
         } else {
           alert("Touche utilisée : " + key);
         }
      }
    }
    function metaKeyUp(event) {
      var key = event.keyCode || event.which;
      if (key == toucheExemple) { metaChar = false; }
    }
  </script>
</head>
<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)">
    Essayez de presser une touche !
</body>
</html>

Bugs et spécificités des navigateurs

Les deux propriétés des différents événements clavier sont keyCode et charCode. Pour faire simple, keyCode fait référence à la touche du clavier qui a été utilisée alors que charCode représente la valeur ASCII du caractère de la touche. Ces deux valeurs peuvent ne pas être les mêmes. Par exemple un 'a' (minuscule) et un 'A' (majuscule) auront le même keyCode car l'utilisateur appuiera sur la même touche du clavier. En revanche, la propriété charCode sera différente car le caractère sera différent.

La navigateurs interprètent charCode de façons différentes. Ainsi, Internet Explorer et Opera ne supportent pas charCode. Cependant, l'information du caractère est bien fourni avec keyCode , mais uniquement lors de l'événement keypress. Lors de keydown et de keyup keyCode contient les informations liées à la touche utilisée. Firefox utilise un terme différent : which pour distinguer le caractère.

Pour plus de précisions sur le fonctionnement des événements liés au clavier, voir la page sur l'API KeyboardEvent.

Exemple : Déplacer des images

L'exemple qui suit permet de déplacer une image de Firefox sur la page :

<!DOCTYPE html>
<html>
<head>
<style>
img { position: absolute; }
</style>

<script>
window.onload = function() {

  movMeId = document.getElementById("ImgMov");
  movMeId.style.top = "80px";
  movMeId.style.left = "80px";

  document.onmousedown = coordinates;
  document.onmouseup = mouseup;

  function coordinates(e) {
    if (e == null) { e = window.event;}
    
    // sous IE e.srcElement définira l'élément cible alors que pour Firefox ce sera e.target
    // Ces deux propriétés renvoient l'élément HTML pour lequel s'est produit l'événement.

    var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;

    if (sender.id=="ImgMov") {
      mouseover = true;
      pleft = parseInt(movMeId.style.left);
      ptop = parseInt(movMeId.style.top);
      xcoor = e.clientX;
      ycoor = e.clientY;
      document.onmousemove = moveImage;
      return false;
    }
    return false;
  }

  function moveImage(e) {
    if (e == null) { e = window.event; }
    movMeId.style.left = pleft+e.clientX-xcoor+"px";
    movMeId.style.top = ptop+e.clientY-ycoor+"px";
    return false;
  }

  function mouseup(e) {
    document.onmousemove = null;
  }
}
</script>
</head>

<body>
  <img id="ImgMov" src="https://placehold.it/100x100&text=JS" width="64" height="64">
  <p>Vous pouvez déplacer l'image sur cette page.</p>
</body>

</html>

Exemple : Redimensionner des éléments

<!DOCTYPE html>
  <html>
    <head>
      <style>
        #resizeImage {
          margin-left: 100px;
        }
      </style>
      <script>
      window.onload = function() {

        var resizeId = document.getElementById("resizeImage");
        var resizeStartCoordsX,
            resizeStartCoordsY,
            resizeEndCoordsX,
            resizeEndCoordsY;

        var resizeEndCoords;
        var resizing = false;

        document.onmousedown = coordinatesMousedown;
        document.onmouseup = coordinatesMouseup;

        function coordinatesMousedown(e) {
          if (e == null) {
            e = window.event;
          }

          var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target;

          if (element.id == "resizeImage") {
            resizing = true;
            resizeStartCoordsX = e.clientX;
            resizeStartCoordsY = e.clientY;
          }
          return false;
        }

        function coordinatesMouseup(e) {
          if (e == null) {
            e = window.event;
          }

          if (resizing === true) {
            var currentImageWidth = parseInt(resizeId.width);
            var currentImageHeight = parseInt(resizeId.height);

            resizeEndCoordsX = e.clientX;
            resizeEndCoordsY = e.clientY;

            resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px';
            resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px';

            resizing = false;
          }
          return false;
        }
      }
      </script>
    </head>

    <body>
      <img id="resizeImage" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png"
width="64" height="64">
      <p>Cliquer sur l'image et étirer pour la redimensionner.</p>
    </body>

  </html>

Exemple : Tracer des lignes

<!DOCTYPE html>
<html>
<head>
<script>
function dessinerLigne(ax, ay, bx, by)
{
    if(ay > by)
    {
        bx = ax+bx;  
        ax = bx-ax;
        bx = bx-ax;
        by = ay+by;  
        ay = by-ay;  
        by = by-ay;
    }
    var calc = Math.atan((ay-by)/(bx-ax));
    calc = (calc*180)/Math.PI;
    var length = Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
    document.body.innerHTML += "<div id='ligne' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc  + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>"
}
</script>
</head>
<body onload="dessinerLigne(200,400,500,900);"> <!-- Remplacez les coordonnées que vous souhaitez utiliser -->
</body>
</html>