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.
Jusqu'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ée 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 ..)
Ecriture 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
dans la section d'en-tête, ou dans le corps de la page.
* 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 , 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 ... 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).
# 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ée à un gestionnaire d'événement qui apparait 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.
* balise est le nom de certaines balises, souvent des composants de formulaire
* onEvenement est un nouvel attribut de la balise
* Bien entendu il faut connaitre les associations entre événements et balises "sensibles" à ces é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é.
# 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.
* 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
.
* On peut (depuis Netscape 3) placer le code dans un fichier spécifique d'extension .JS :
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.
Exemple resume
<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>
Introduction à JavaScript par l'exemple
Voici quelques exemples introductifs et progressifs
* accompagnés de commentaires et
* de corrigés écrits eux-mêmes en JavaScript
Afficher du texte :
EXEMPLE 1
<HTML>
<HEAD> <TITLE> Exemple 1 </TITLE> </HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var bonjour = "Bonjour !";
var question = "Comment allez vous ";
var phrase = bonjour + "<BR>" + question;
document.write(phrase, "aujourd'hui ?");
</SCRIPT>
</BODY>
</HTML>
A la lecture de ce code JS, comprendre :
* la déclaration et l'initialisation (c'est-à-dire : donner une valeur initiale) des variables bonjour, question, et phrase.
* l'affectation d'une valeur à une variable, avec l'opérateur = , sur le modèle :
variable = valeur (ou expression)
* l'instruction document.write("texte") est l'instruction générale d'affichage de "texte" dans le même document (le document "courant").
* les constantes "texte" sont placées entre " "; à défaut JS croit qu'il s'agit d'une variable.
* la concaténation (mise "bout à bout") de variables de type texte et de constantes "texte" est réalisée avec l'opérateur +
* document.write(...) affiche aussi bien les valeurs des variables que les constantes texte.
On peut séparer les éléments à afficher par l'opérateur + ou plus simplement par la virgule ,.
* toutes les balises HTML peuvent figurer comme constantes texte, et sont exécutées comme du code HTML.
Ainsi, " " inséré dans la valeur de la variable phrase, fera passer à la ligne suivante la suite du texte à afficher.
Afficher une image.
EXEMPLE 2
<HTML>
<BODY> <CENTER>
<SCRIPT language = "JavaScript" >
document.write("<IMG SRC='../../images/lycee2.jpg'> <BR> <H1>
Une photo de mon lycée</H1><P>");
document.write("<IMG SRC='../../images/monchat.gif'> <BR> <H1>
et de mon chat .... </H1>");
</SCRIPT>
</CENTER>
</BODY>
</HTML>
Comprendre le script, en particulier le rôle du code HTML inséré et prévoir le résultat de son exécution.
Pour vérifier, appuyer sur ce bouton :
Afficher la date et l'heure.
EXEMPLE 3
<HTML>
<BODY>
<SCRIPT language = "JavaScript" >
var date = new Date();
// déclaration d'une variable de type Date
// la variable date contient alors la date courante
var mois = date.getMonth() + 1;
// la variable mois contient le N° du mois à partir de 0 (à 11)
var jour = date.getDate() ;
var annee = date.getYear();
if (navigator.appName =='Netscape')
annee = annee + 1900 ;
// getYear() donne le numéro de l'année
// pour netscape et Mozilla à partir de 1900
document.write("<Date> " , jour, " / ", mois, " / "+annee, "<BR>");
document.write("<Heure> ", date.getHours(), " : ",date.getMinutes(),
" : ",date.getSeconds() );
</SCRIPT>
</BODY>
</HTML>
A la lecture de ce code JS, comprendre :
* La déclaration var date = new Date(); déclare un objet appelé date, de type Date, initialisé à la date du système.
* Les fonctions getDate(), getMonth() etc... s'appliquent à la variable date. Ces fonctions ne peuvent s'adresser à ce type de variable Date.
On dit que ce sont des méthodes de l'objet date.
La notation générale est : objet.méthode() (étude plus complète dans le chapitre
objets prédéfinis).
Comprendre le script et prévoir le résultat de son exécution.
Pour vérifier :
Calculer la somme des 100 premiers naturels non nuls
EXEMPLE 4-1
<HTML>
<HEAD> <TITLE> Exemple 4</TITLE> </HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var somme=0;
var nombre= 100; for (i=1; i <=nombre ; i++)
somme=somme + i ;
document.write("La somme des premiers naturels jusqu'à " + nombre +
" est égale à " + somme+ "<BR>");
document.write( "Pour vérifier : ("+nombre+ " * "+(nombre+1)+" )/2 = "+somme);
</SCRIPT>
</BODY>
</HTML>
A la lecture de ce code JS, comprendre :
* l'écriture générale d'une structure répétitive de type FOR
* i++ signifie i = i +1
Comprendre le script et prévoir le résultat de son exécution.
Pour vérifier :
EXEMPLE 4-2 (modification de l'exercice 4-1)
<SCRIPT LANGUAGE="JavaScript">
var somme=0;
var nombre= 100;
for (i=1; i <=nombre ; i++) {
somme=somme + i ;
document.write("Pour i = ", i, " ---> somme = " , somme ,
"<BR>"); }
</SCRIPT>
Ici remarquer les accolades { ...} indispensables pour englober plusieurs instructions (séparées par des ; ) dans l' instruction répétitive FOR.
Qu' obtient-on pour l'exercice 4-2, où (contrairement à l'ex 4-1) l'instruction d'affichage est incluse dans l'instruction FOR ?
L'événement OnClick sur un bouton de formulaire
Considérons un composant de type bouton
Un clic sur le bouton provoque un événement OnClick auquel le programmeur peut rattacher du code JS (le plus souvent une fonction).
Dans l'exemple qui suit, la fonction ALERT() est appelée par le clic. Son rôle est d'afficher une boîte avec un message.
EXEMPLE 5
<HTML>
<HEAD> <TITLE> Exemple 5 du cours JS1</TITLE>
< /HEAD>
<body>
<form>
<input type="button" value="Cliquez" onClick="alert('Coucou, c\'est moi !')">
</form>
</body>
</HTML>
Boîte de dialogue et instruction conditionnelle
alert() affiche une boite de message simple et attend la validation ou Echap.
reponse = prompt("texte","chaine par défaut") affiche "texte" et une ligne de saisie dans une boîte.
La poursuite du programme est bloquée tant que l'utilisateur n'a pas saisi une chaîne de caractères validée.
Prompt(..) a pour résultat la chaine saisie ou sinon, la "chaine par défaut" (si elle doit être vide, mettre ""). Cette chaine est donc affectée ici à la variable nommée reponse
Le script utilise aussi la structure conditionnelle SI .. ALORS .. SINON (étude complète dans le chapitre 3)
Exemple :
EXEMPLE 6
<HTML>
<HEAD> <TITLE> Exemple 6</TITLE> </HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var prenom="" , bahut="" ;
prenom=prompt( "Votre prénom","");
bahut=prompt( "Le nom de votre établissement",""); if ( prenom !="" && bahut !="")
document.write("Bonjour ", prenom," ! <BR> Vous plaisez-vous à ", bahut, " ?") else
alert("saisie incomplète !");
</SCRIPT>
</BODY>
</HTML>
Lire attentivement ce code JS. Voici quelques informations :
* Dans l'instruction conditionnelle, la condition qui suit if doit obligatoirement être mise entre parenthèses.
* principaux opérateurs de comparaison :
o == (égalité, à ne pas confondre avec l'affectation =)
o != (différent)
o Autres : > , < , >= , <=
* principaux opérateurs logiques
o && : et (utilisé ici pour composer 2 conditions simples).
o || : ou (le caractère | est obtenu au clavier avec Alt Gr -)
o ! : non.
S'efforcer de décrire pas à pas la signification et le résultat des lignes de code.
Fonctions et procédures
Les fonctions doivent être déclarées dans la section
... , entre les balises , pour être comprises avant toute utilisation.
Elles sont appelées habituellement dans le corps de la page entre ...
* soit à partir d'une section de code (voir exemple VII et exemple VIII)
* soit affectées à une procédure d'événement liée à un composant d'un formulaire (voir exemple IX).
Leur nom est introduit par le mot function. L'identificateur de la "function" est obligatoirement suivi de parenthèses.
Entre ces parenthèses on écrit éventuellement la liste des paramètres (cf exemple VIII).
JS ne fait apparemment pas de distinction entre fonctions et procédures.
* Les procédures sans paramètre s'écrivent :
function nom-fonction () { séquence d'instructions
}
Les fonctions fournissent un résultat
function nom-fonction () {
séquence d'instructions returnparamètre-résultat
}
Voici un exemple simple de procédure sans paramètre :
EXEMPLE 7
<HTML>
<HEAD>
<TITLE> Exemple de fonction</TITLE>
<SCRIPT language="JavaScript"> function bonjour() {
document.write("Bonjour",<BR>);
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT bonjour();
</SCRIPT>
<FORM>
<input type="button" value="Salut" onClick="alert('Et bon courage à tous ' )">
</FORM>
</BODY>
</HTML>
A la lecture de ce code JS, noter et retenir :
* la place de l'appel de la fonction bonjour()
* elle effectue une action, afficher Bonjour ! , sans calculer une valeur résultat. (l'absence d'instruction return caractérise une procédure).
Comprendre le script et prévoir le résultat de son exécution.
Pour tester :
Procédures et fonctions avec paramètre(s)
Les procédures et fonctions avec paramètre(s) sont déclarées conformément au paragraphe précédent.
Ils en différent par la présence d'une liste de paramètres placés entre parenthèses.
Bien sûr, ces paramètres doivent recevoir des valeurs correctes qui leur sont affectées lors de l'appel de la fonction.
Function nom-fonction (liste de paramètres formels) {
séquence d'instructions
[return paramètre-résultat ]
}
Voici l'exemple simple d'une fonction à un paramètre :
EXEMPLE 8
<HTML>
<HEAD> <TITLE> Exemple 8</TITLE>
<SCRIPT LANGUAGE="JavaScript"> function somme_N_entiers (N) { var somme=0;
for (i=1; i <=N ; i++) {
somme=somme + i ;
document.write("Pour i = ", i, "---> somme = " , somme , "<BR>");
} return somme
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
var nombre= prompt("Somme jusqu'à N = ", 10);
document.write("Somme des 100 premiers entiers non nuls = ", somme_N_entiers(nombre));
</SCRIPT>
</BODY>
</HTML>
A la lecture de ce code JS, comprendre :
* l'appel de la fonction n'est pas ici provoqué par un événement du genre onClick (cf exemple V), mais par l'affichage de son résultat demandé par l'instruction document.write
* ce résultat est l'image de la valeur de nombre par la fonction somme_N_entiers, c'est-à-dire la valeur du paramètre somme qui est calculée par le code de la fonction.
la fonction est définie avec un paramètre formel dont la valeur n'est connue qu'au moment de l'appel. Il y a alors transmission de la valeur du paramètre d'appel et affectation au paramètre formel.
* bien comprendre que dans ces conditions, la définition d'une fonction informatique est la description formelle d'un calcul ou d'une suite d'instructions.
* l'appel, c'est-à -dire l'exécution de la fonction avec la valeur du paramètre transmis, s'apparente au calcul de f(xo), l'image de la valeur xo attribuée à la variable x, par une fonction mathématique f.
Comprendre le script et prévoir le résultat de son exécution.
Pour tester :
Fonction appelée par un événement
Utilisation de formulaire
EXEMPLE 9
<HTML>
<HEAD> <TITLE> Exemple 9</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function somme_N_entiers (nb) { var somme=0;
for (i=1; i <=nb ; i++) {
somme=somme + i ;
document.write("Pour i = ", i, "---> somme = " , somme , "<BR>");
} return somme;
}
</SCRIPT>
</HEAD>
<BODY>
<H3><CENTER>Somme des N premiers entiers non nuls</CENTER></H3>
<FORM name=formulaire
<!-- attention, ce qui suit n'est pas une affectation ! -->
Nombre = <INPUT type=text name=nombre value=10>
<INPUT type=button name=bouton value="Calculer"
onClick="formulaire.resultat.value=somme_N_entiers(formulaire.nombre.value)">
Résultat = <INPUT type=text name=resultat value="">
</FORM>
</BODY>
</HTML>
* Dans ce dernier exemple, proche du précédent VIII, on reprend la fonction somme_N_entiers(N), en enlevant l'affichage contenu dans l'itération.
* Cette fonction est simplement chargée de donner le résultat du calcul contenu dans la variable somme, grâce à l'instruction return somme
* Les nouveautés résident dans la façon de dialoguer avec le programme; pour cela on utilise des composants de formulaire.
o entrée de la valeur du paramètre N dans un composant de type champ de texte, nommé nombre, avec une valeur par défaut égale à 10. appel de la fonction provoqué par l'événement onClick sur le bouton nommé bouton.
o somme_N_entiers( ) utilise un paramètre dont la valeur est contenue dans le champ nombre
o cette fonction calcule un résultat appelé sommequi est affectée à la valeur d'un autre composant de type texte, nommé resultat, et qui est chargé de l'affichage.
o remarquer que tout cela est inclus dans du code HTML, et ne nécessite pas de section SCRIPT
o en revanche, comme on ne dispose pas de variables JS, on fait référence aux valeurs des contenus de ces composants par l'intermédiaire de leur propriété value. Il ne faut pas confondre la valeur et le nom du composant, donné par la propriété name.
o bien comprendre la façon de noter la référence à ces valeurs :
par exemple, dialogue.nombre.value signifie :
"la valeur du composant nommé nombre situé dans le formulaire nommé dialogue".
Comprendre le script et prévoir le résultat de son exécution.
Pour vérifier :
Introduction à JavaScript par l'exemple
Generalites