|
I.
Introduction au langage JavaScript
1. Généralités
Javascript est un langage de programmation très récent, créé par
les sociétés Netscape et Sun Microsystems vers la fin de l'année
1995.
Son objectif principal : introduire de l'interactivité avec les
pages HTML, et effectuer des traitements simples sur le poste de
travail de l'utilisateur.
Le moyen : introduire de petits programmes, appelés SCRIPTS, dans
les pages HTML. J'usqu'ici la programmation ne pouvait être exécutée
que sur le serveur. La possibilité d'inclure des programmes dans
les pages HTML et de les exécuter directement sur le poste client
est intéressante, car elle permet de décharger le serveur de ce
travail et… d'éviter les attentes des réponses aux requêtes
adressées via le Réseau.
Le code du programme est interprété par le navigateur client (qui
reçoit la page). Il ne peut pas être exécuté indépendamment, ce
qui le limite comme langage de programmation, contrairement à JAVA
(à ne pas confondre !).
C'est un langage basé sur des objets, très simple et conçu, en
principe, pour des non spécialistes.
En résumé, voici ses principales caractéristiques :
· JS est un langage de programmation structuré qui concourt à
enrichir le HTML, à le rendre plus " intelligent " et
interactif.
· Le code JS est intégré complètement dans le code HTML, et
interprété par le navigateur client.
· JS contient des gestionnaires d'évènement : il reconnaît et réagit
aux demandes de l'utilisateur, comme un clic de la souris, une
validation de formulaire, etc…
Mais c'est un langage limité :
· ce n'est pas un langage de programmation à part entière, indépendant
· c'est un langage de script, dépendant de HTML, c'est une
extension de HTML. Sa syntaxe ressemble à Java, car elle reprend
celle du langage C, mais il est en fait très différent. Java est
un langage complet, compilé et complètement autonome du langage
HTML
· ce n'est pas véritablement un langage orienté objet (pas d'héritage
de classe, ni de polymorphisme..)
2.
ÉCRITURE ET EXÉCUTION DU CODE
JS
On peut placer du code JS dans une page HTML à 3 endroits et sous
des formes bien différentes.
1. Entre les balises SCRIPT … /SCRIPT dans la section d'en-tête,
ou dans le corps de la page.
|
<HEAD>
<SCRIPT LANGAGE = " JavaScript ">
…code
//code : instructions, déclarations de fonctions, etc...
</SCRIPT>
</HEAD>
|
· Le code inclus dans la séquence <SCRIPT> est évalué au début
du chargement de la page
· S'il est inclus dans la section <HEAD>, il n'est pas exécuté
tout de suite.
· Par contre, s'il fait partie du corps du document, il est immédiatement
exécuté en même temps que le code HTML est interprété.
· Il est nécessaire d'inclure les déclarations de fonctions dans
la section <HEAD> .. </HEAD>. En effet, les fonctions
doivent être connues dès le chargement du document, mais ne
doivent être exécutées que lors d'un appel explicite de
l'utilisateur, le plus souvent en réponse à un évènement (voir
ci-dessous).
2. Associé à une balise HTML qui gère un évènement
Le code JS est généralement inséré sous forme d'un appel de
fonction,
affecté à un gestionnaire d'événement qui apparaît comme un
nouvel
attribut d'un composant de formulaire
L'exécution du code est alors provoquée par appel d'une fonction
JS
(préalablement déclarée) dont l'exécution constitue une réponse
à
l'évènement.
Un évènement survient à l'initiative de l'utilisateur, par
exemple en
cliquant sur un bouton, ou après la saisie du texte dans un champ
de
formulaire.
Ecriture générale
|
<Balise… onEvenement=
"code JS" |" fonction JS">
|
Où
* Balise est le nom de certaines balises, souvent des composants de
formulaire.
* onEvenement est un nouvel attribut de la balise.
* Bien entendu il faut connaître les associations entre évènements
et balises " sensibles " à ces évènements.
Ici on peut voir les correspondances entre les balises et les événements
Exemple
Le code HTML suivant crée un bouton de nom " bouton1 ",
sur lequel est écrit
"
calculer ".
Quand l'utilisateur appuie sur ce bouton, l'évènement onClick est
déclenché et la fonction calculer () est appelée.
Son code, déclaré dans l'en-tête est alors exécuté
|
<HTML>
<HEAD>
<SCRIPT langage="JavaScript">
Function calculer() {
…//code….
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button"
VALUE="Calculer"
onClick="calculer()">
</FORM>
</BODY>
</HTML>
|
3. Associé au pseudo-protocole javascript : dans une URL
Cette pseudo-URL permet de lancer l'exécution d'un script écrit en
JS, au
lieu d'être une requête pour obtenir un nouveau document (comme
avec
les protocoles habituels http : , ftp : )
Ecriture générale
|
<A HREF="JavaScript :code
JS" |" appel fonction JS"> texte/ image
activable< /A>
|
L'opérateur void
Pour empêcher que le code ou la fonction appelée dans l'URL
JavaScript, ne remplace le document courant, on applique l'opérateur
void, qui neutralise toute valeur ou tout effet de retour.
|
<A HREF="JavaScript :void
(appel-fct(..))" ….< /A>
|
Exemple
|
<HTML>
<HEAD>
<SCRIPT langage="JavaScript">
Function calculer() {
….//code….
}
< /SCRIPT>
</HEAD>
<BODY>
……
<A HREF="JavaScript : calculer()"> Pour
calculer </A>
……
< /BODY>
|
a) Quelques remarques
- JS fait la distinction entre majuscules et minuscules,
contrairement aux balises HTML.
C'est une source fréquente d'erreur.
- Pour comprendre le code, inclure des commentaires abondants :
// pour une simple ligne de commentaires
/*…..*/ pour les encadrer sur plusieurs lignes.
- Quand on ne définit pas de fonctions, on peut inclure le code
directement dans la section <BODY>
- On peut (depuis Netscape 3) placer le code dans un fichier spécifique
d'extension
.JS :
<Script language=
JavaScript src=source.js>
</Script>
Où source js doit être un fichier accessible au moment de l'exécution,
dans le répertoire courant ou à une adresse URL précisée.
Un tel fichier externe permet de réutiliser le code dans de
multiples pages, sans avoir à l'inclure dans le source.
b) Exemple-résumé
|
<Html>
<Head>
<Script>
Function saluer() {
Alert("Bonjour tout le monde!") ;
}
</script>
</head>
<body>
<H4> Exécution immédiate </ H4>
<script>
Alert ("Bonjour tout le monde !") ;
</script>
<H4> Exécution sur évènement onClick </H4>
<Form>
<Input type ="button" name="Bouton1"
value="Salut" onClick="saluer()">
</form>
<H4> Exécution sur protocole javascript : </H4>
<A HREF =" javascript : saluer()">
pour saluer </a>
</body>
</html>
|
|
