Les scripts

Introduction

HTML n'est pas un langage de programmation mais plutôt un standard de présentation.  Les scripts sont des «petits programmes» associés aux pages HTML et qui apportent cetains éléments d'interactivité et de dynamisme.  Ils sont exécutés par le client (client-side scripts), en ce qui nous concerne: le navigateur.  Plusieurs langages sont disponibles pour écrire des scripts.  Le plus fréquent est JavaScript, créé par Netscape mais il est possible d'utiliser VBScript (Visual Basic), Tcl ou même des "vrais" langage de programmation comme Java.

Dans le cadre du cours IFT1945, nous nous contenterons d'une présentation succinte de JavaScript.  Sans plus attendre voici donc un premier exemple.

<script language="JavaScript "><!--
/* Voici une première fonction en JavaScript */
function bonjour() {
alert("Mon premier script");
}
// --></script >

...
   <A HREF="javascript:bonjour()">
...

 

La programmation

La programmation consiste à créer des instructions qui indiquent comment obtenir les résultats attendus à partir des données fournies ou comment réagir à certains événements.  Dans le cas spécifique des pages WEB, nous pourrons donc programmer le comportement du navigateur en réaction à des  événements comme un clique de souris par exemple ou bien valider les données saisies dans un formulaire.

 

Le langage

Dans ce cours nous nous contenterons de présenter le langage le plus utilisé c'est à dire le JavaScript.  C'est un langage très simple qui n'a pas la "puissance" des langages comme Java ou C++ mais qui est tout à fait adéquat pour la plupart des applications de pages WEB.

Un programme en JavaScript est un ensemble d'instruction (une par ligne ou séparées par des point-virgules).

 

Les commentaires

Le programmeur peut ajouter des commentaires, qui ne seront pas exécutés par l'interprèteur, à son programme.  On utilise la même syntaxe qu'en C ou en C++

 

Les constantes

entières
un nombre en point fixe exprimé en décimal, en octal ou en hexadécimal: 12, 0777, 0x0A
flottantes
un nombre réel i.e. fractionnaire: 3.1415926535, 3.0E8
chaînes de caractères
suite de caractères délimitée par des guillemets ou des apostrophes: "Bonjour", 'Allo', '<FONT size="3">'
booléennes
une valeur logique: true, false
 

Les variables

boolean
variable logique
number
variable contenant un nombre
string
variable contenant une chaîne de caractères
Array
une suite de variables
 

Les opérateurs

+, +=
addition ou concaténation, ajout
-, -=
soustraction, retrait
*, /, *=, /=
multiplication et division
++, --
incrémentation et décrémentation
<, <=, ==, !=, >=, >
opérateurs de comparaison
typedef
définition de type
 

Les fonctions et les méthodes

Les fonctions (générales) sont des parties de code plus ou moins indépendantes du reste du programme.  Les méthodes sont des fonctions associées à un objet spécifiques.  En guise d'exemple de fonction générale, mentionnons la fonction "alert" qui permet d'afficher un message à l'écran.   Ex: alert("Mon premier script"); que nous avons aperçu tantôt.

 

Les instructions de contrôle

Le langage possède des instructions de contrôle:

 

Les objets

Bien que n'étant pas strictement typé, le langage JavaScript possède quand même une notion d'objet un peu édulcoré possédant des attributs et des méthodes.

 

Les événements intrinsèques

Plusieurs événements peuvent se produire lors de la navigation dans une page WEB.  On en dénombre dix-huit que nous avons classés en quatre catégories.

Les événements généraux

Les événements généraux sont liés à la page complète et sont déclanchés soit au chargement soit symétriquement au retrait de celle-ci.

onload
à la fin du chargement d'un élément BODY ou FRAMESET
onunload
lorsqu'un document est retiré d'une fenêtre (BODY et FRAMESET)

Exemple:

<BODY onload='alert("Bienvenue")' onunload='alert("Aurevoir et merci")'>

 

Les événements liés à la souris

En fait, on veut dire: liés au dispositif de pointage quel qu'il soit! smiley.gif (89 bytes)

onclick
lorsque notre internaute clique sur un élément HTML.  L'événement est relié à l'élément lui-même.
ondblclcik
si on a plutôt un double-clique.
onmousedown
abaissement d'un des boutons lorsque le curseur se trouve sur un élément HTML.
onmouseup
relachement d'un des boutons lorsque le curseur se trouve sur un élément HTML.
onmouseover
lorsque le pointeur arrive au dessus d'un élément.
onmousemove
lorsque le pointeur se déplace au dessus d'un élément.
onmouseout
lorsque le pointeur quitte un élément.
 

Les événements liés au clavier

onkeypress
lors de la frappe d'une touche du clavier
onkeydown
lors de l'appuie d'une touche quand l'élément a le focus.
onkeyup
lors du relachement d'une touche quand l'élément a le focus
 

Les événements spécifiques aux formulaires

onsubmit
au moment de l'envoi des données d'un formulaire
onreset
lorsqu'on appui sur un bouton RESET d'un formulaire
onfocus
lorsqu'un élément reçoit le focus.
onblur
lorsqu'un élément perd le focus.
onselect
lorsque l'utilisateur sélectionne du texte dans un élément INPUT ou TEXTAREA.
onchange
lorsqu'un élément perd le focus et que sa valeur a été changé.

 

Association des événements et des scripts

Pour que le code JavaScript soit exécuté, il faut l'associer à des événements.  Notez bien que le code inséré dans l'entête d'une page HTML est exécuté au moment du chargement de la page.

éléments HTML quelconques

Les événements liés à la souris ou au clavier peuvent être associé à presque tous les éléments HTML.

 

éléments HTML des formulaires

Dans ce cas, il y a double "collaboration" entre les éléments HTML et le code JavaScript.

  1. Le formulaire peut servir de moyen d'entrée des données pour le programme JavaScript.
    Entrez un nombre: et cliquez à l'extérieur de la zone
    Sa racine carrée est:
  2.  

  3. Le code peut servir à valider ou simplement agrémenter la saisie des données. Veuillez, par exemple répondre à ce petit sondage.
Mon nom est: 
J'aimerais bien avoir un examen final difficile: 
Oui Sûrement pas!

 

Vous trouverez d'autres programmes dans la section consacrée au JavaScript.

Lectures suggérées