Section technique - JavaScript



JavaScript est un langage de programmation événementiel

   Créé à l'origine par Netscape, JavaScript est un langage de programmation événementiel. C'est à dire que nous pouvons programmer la réaction du navigateur en fonction des événements utilisateurs. Un événement utilisateur est par exemple le survol d'un texte par le curseur de la souris : par exemple, si votre navigateur dispose de JavaScript, le passage du curseur de la souris sur ce texte modifie la couleur du fond de cette page.
   Voici un tableau récapitulatif des événements que nous pouvons gérer à l'aide de JavaScript:
objets HTML événements gérables
document HTML (ou frame) onBlur, onDragDrop, onFocus, onLoad, onMove, onResize, onUnload
formulaire onSubmit, onReset
image onAbort, onError, onLoad
lien hypertexte onClick, onDblClick, onMouseOut, onMouseOver, onMouseDown, onMouseUp
champ texte, password ou multi-lignes onBlur, onChange, onFocus, onSelect, onKeyDown, onKeyPress, onKeyUp
cases à cocher, radio bouton ou bouton onClick, onDblClick, onMouseDown, onMouseUp
liste de sélection déroulante ou non onBlur, onChange, onFocus
(à noter que JavaScript est "case sensitive", c'est à dire qu'il fait la distinction entre minuscules et majuscules)

Voici quelques explications sur certains événements:
 
  • l'événement onMouseOver se produit lorsque le curseur de la souris survole la zone d'un lien hypertexte.
  • l'événement onMouseOut se produit lorsque le curseur de la souris quitte la zone d'un lien hypertexte.
  • pour un champ texte, l'événement onFocus se produit lorsque ce champ prend le focus, c'est à dire lorsqu'il devient l'objet actif de la page HTML. A ce moment-là, si nous entrons du texte au clavier, c'est dans ce champ qu'il va s'inscrire. Généralement, nous déplaçons le focus d'un champ à l'autre à l'aide de la touche "tabulation".
  • pour un champ texte, l'événement onBlur se produit lorsque ce champ perd le focus, c'est à dire lorsqu'il redevient inactif.

  • Remarque: VBScript est également un langage de programmation événementiel.


    JavaScript s'exécute en local dans le navigateur

       A la différence des scripts PHP qui sont exécutés par le serveur Web, le code JavaScript est exécuté par le navigateur sur le poste client. Nous dirons que "JavaScript tourne en local dans le navigateur".
       Cela signifie que ces programmes sont envoyés du serveur au navigateur avec la page HTML. Une fois chargés, ces programmes peuvent donc être exécutés plusieurs fois par le navigateur sans qu'il n'ait besoin de se reconnecter au serveur Web. Ainsi, en utilisant astucieusement JavaScript, nous pouvons limiter le nombre de pages HTML demandées au serveur Web et rendre la navigation sur notre site plus rapide et donc plus conviviale.
       Par exemple, un formulaire de réclamation dans lequel nous devons indiquer la date de commande et la date de réception d'un article défectueux. Evidemment, la date de commande doit être antérieure à la date de réception. Supposons que nous entrions des dates invalides:
     
  • sans JavaScript (ni VBScript), les données du formulaire sont envoyées au serveur Web, contrôlées par un script CGI (type PHP) sur le serveur Web, puis une page indiquant l'anomalie est envoyée au navigateur de l'utilisateur. (il s'est fait livrer un article défectueux, et en plus il doit attendre 10 secondes pour finalement apprendre qu'il doit vérifier ses dates).
  • avec JavaScript, nous pouvons contrôler la validité des dates avant l'envoi des données au serveur Web. Ainsi, l'utilisateur est invité sans attendre à vérifier ses dates. La fonction de contrôle des dates peut être déclenchée juste avant l'envoi des données (événement onSubmit du formulaire) ou même dès la saisie des dates (événements onChange des champs texte).

  • Remarque: VBScript s'exécute également en local, mais il ne fonctionne qu'avec Internet Explorer.


    JavaScript est un langage de programmation interprété

       Cela signifie qu'il n'y a pas de phase de compilation avant de pouvoir utiliser des programmes en JavaScript. C'est directement le code source des programmes qui est envoyé au navigateur. Lorsque le navigateur a besoin d'exécuter des instructions JavaScript, il les interprète au fur et à mesure qu'il les lit. Cela contribue à faire de JavaScript un langage relativement simple à apprendre.

    Remarque: VBScript est également un langage de programmation interprété, mais il ne fonctionne qu'avec Internet Explorer car c'est le seul navigateur équipé d'un interpréteur VBScript.


    Exemples de code JavaScript

       Le code JavaScript est chargé sur votre navigateur de la même manière que le code HTML. En fait, il est inclus à l'intérieur du code HTML. De ce fait, vous pouvez aussi facilement visualiser le code HTML que le code JavaScript d'une page Web (et donc vous en inspirer). Pour cela:
     
  • sous Netscape, cliquez sur le menu "Afficher", puis sur "Source de la page",
  • sous Internet Explorer, cliquez sur le menu "Affichage", puis sur "Source".

  •    Vous pouvez donc visualiser le code de ce site pour mieux comprendre certaines utilisations de JavaScript. Entre autres, je vous conseille les pages suivantes:
     
  • la première page de ce site, frame de droite: utilisation de la balise <noscript> pour gérer les navigateurs qui ne supportent pas JavaScript,
  • dans la section photo, choisir une des rubriques pour voir apparaître une page contenant une planche de photos: utilisation de JavaScript (window.open et Math.random()) pour ouvrir de nouvelles fenêtres Netscape pour chaque téléchargement d'une photo en grand format.
  • la page sondage: utilisation sommaire des cookies avec JavaScript.
  • pour expliquer la différence d'affichage entre Internet Explorer et Netscape: utilisation de JavaScript pour détecter le navigateur de l'internaute ainsi que sa version.

  • Pour des exemples plus complexes, voir la rubrique Exemples JavaScript de ce site.