Le JavaScript : initiation et bonne utilisation sur votre site Internet

XP-Infos n° 9 – mars 2010

Article

Ce mois-ci, nous examinons le JavaScript, un langage de programmation utilisé pour renforcer l’interaction des utilisateurs avec un site, créer des animations et améliorer l’ergonomie des sites Web. Nous utiliserons la page créée et modifiée en janvier et février, donc n’hésitez pas à réviser si nécessaire !

Le code JavaScript

Voici à quoi ressemble le code JavaScript :

window.onload = function() {
  document.getElementById("division1").style.display = "block";
  alert("La division est réaffichée.");
}

Je sais : là, ça se complique sérieusement ! C’est pour cela que nous n’irons pas plus loin dans l’étude de ce type de code, le but de cet article n’étant pas de vous enseigner le JavaScript, mais de savoir ce qui est utile pour votre site dans ce domaine.

En gros, le code ci-dessus s’exécute lorsque le document HTML a été chargé par le navigateur (window.onload), recherche la division1 dans le code X/HTML (document.getElementById("division1")), puis modifie la propriété CSS que nous avions ajoutée le mois dernier (.style.display = "block";) pour réafficher la division que nous avions masquée. Ensuite, nous envoyons un message au navigateur pour qu’il l’affiche à l’utilisateur (alert("La division est réaffichée.");).

Apports du JavaScript

Le code JavaScript permet d’améliorer l’expérience de l’utilisateur en ajoutant des animations à la page ou en permettant à l’internaute d’interagir instantanément avec le site Web (par exemple : affichage ou masquage d’informations supplémentaires au survol d’un lien, fonction permettant de faire glisser un article pour le déposer dans un panier, etc.). Ceci n’est pas possible avec le simple X/HTML ni avec les langages serveurs comme PHP, puisque dans ces cas-là, la page doit d’abord être envoyée au serveur, où l’action de l’utilisateur est interprétée, puis le navigateur doit attendre que le serveur lui renvoie cette page avec les modifications qui y ont été apportées.

A contrario, c’est votre navigateur Internet qui lit et exécute immédiatement les instructions JavaScript : le processus est donc très rapide car il se produit directement sur votre ordinateur sans passer par le serveur Web. Ce qui permet donc, par exemple, de faire glisser un élément sur la page.

Le JavaScript est même capable de communiquer avec le serveur Web, ce qui permet par exemple de remplir une deuxième liste déroulante en fonction d’un choix effectué dans une première liste sans devoir redemander au serveur Web l’intégralité de la page. Cette méthode accélère la vitesse d’utilisation du site, puisque seules les nouvelles informations nécessaires sont demandées au serveur, et non la page tout entière.

C’est ce type d’utilisation de JavaScript qui a donné naissance au terme d’AJAX.

Dangers du JavaScript

Comme indiqué ci-dessus, le JavaScript est lu et exécuté par votre navigateur. Mais tous les navigateurs (ou « agents utilisateurs ») n’incluent pas forcément un module de lecture et d’exécution du JavaScript. Les navigateurs textuels sont dans ce cas et beaucoup de téléphones portables, par exemple, n’exécutent pas le code JavaScript. De plus, les navigateurs permettent de désactiver le JavaScript et certains utilisateurs choisissent délibérément cette option. De même, certains internautes surfent derrière des serveurs ou des firewalls qui filtrent le JavaScript (par exemple, au sein du réseau d’une entreprise spécifique). Enfin, les robots des moteurs de recherche n’exécutent pas le JavaScript.

Même si la proportion de visiteurs sans JavaScript reste toujours modeste, cette dernière raison justifie peut-être à elle seule la construction d’un site parfaitement fonctionnel sans JavaScript, afin que l’intégralité de votre site soit correctement indexée par les moteurs de recherche.

Par ailleurs, comme pour les CSS, les mises en œuvre de JavaScript diffèrent d’un navigateur à l’autre. Il faut donc ajouter du code pour gommer ces différences, ce qui en augmente la complexité – et donc le coût de production – ou bien faire le choix (hasardeux) de privilégier un navigateur au détriment des autres.

Bonne utilisation du JavaScript

Ce langage de programmation ne doit donc servir qu’à rajouter une couche de fonctionnalités qui améliorent votre site, mais celui-ci doit fonctionner parfaitement sans JavaScript. Pourtant, aujourd'hui encore, de grands sites font le choix de se priver d’une partie des internautes : visitez donc la boutique Orange en désactivant JavaScript : vous vous retrouverez face à une page pratiquement vide !

Même si vous ne comprenez rien au code JavaScript, vous pouvez vérifier quelques points :

  • Le JavaScript peut être placé n’importe où dans votre X/HTML. Mais comme pour les CSS, il est recommandé de séparer les deux codes afin de bien distinguer ces deux aspects d’une page Web et d’en faciliter la maintenance et l’évolution. C’est le signe d’une bonne pratique et les coûts à venir en seront d’autant plus contenus.
  • Votre navigateur vous permet de désactiver JavaScript. Visitez donc votre site sans JavaScript et vérifiez que tout y est bien accessible quand même.

Trucs et astuces

Désactiver temporairement JavaScript sur votre navigateur :

  • Dans Internet Explorer 8 : menu Outils, Outils de développement, puis dans le menu Désactiver, cliquez sur Script.
  • Dans Firefox 3 : menu Outils, puis Options, onglet Contenu, désactivez la case à cocher Activer JavaScript.
  • Dans Opera 9 : menu Outils, puis Préférences, onglet Avancé, rubrique Contenu, désactivez la case à cocher Activer le JavaScript.
  • Dans Safari 4 : menu Développement, cliquez sur Désactiver JavaScript.
  • Dans Google Chrome 4 : impossible depuis l’interface graphique, il faut lancer le programme en tapant la commande !

Cours de JavaScript en ligne :

Le mois prochain

Le PHP : initiation aux pages dynamiques.