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 :
<HEAD> <SCRIPT LANGUAGE="JavaScript"> ... code //code : instructions, déclarations de fonctions, etc.. </SCRIPT> </HEAD> |
<SCRIPT> est évalué au début du chargement de la page.
<HEAD>, il n'est pas exécuté tout de suite.
<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).
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.
Ecriture générale
<balise ... onEvenement="code JS" | "fonction JS"> |
où
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 language="JavaScript">
function calculer() {
....// code.....
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Calculer" onClick="calculer()">
</FORM>
</BODY>
</HTML>
|
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>
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> |
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 :
opérateur +
opérateur + ou plus simplement par la virgule ,.
phrase, fera passer à la ligne suivante la suite du texte à afficher.
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>
|
A la lecture de ce code JS, comprendre :
A la lecture de ce code JS, comprendre :
Ici remarquer les accolades { ...} indispensables pour englober plusieurs instructions (séparées par des ; ) dans l' instruction répétitive FOR.
reponse = prompt("texte","chaine par défaut") affiche "texte" et une ligne de saisie dans une boîte.
Le script utilise aussi la structure conditionnelle SI .. ALORS .. SINON (étude complète dans le chapitre 3)
Exemple :
Lire attentivement ce code JS. Voici quelques informations :
Leur nom est introduit par le mot function.
L'identificateur de la "function" est obligatoirement suivi de parenthèses.
JS ne fait apparemment pas de distinction entre fonctions et procédures.
Pour approfondir leurs différences, voir le chapitre Fonctions JS
A la lecture de ce code JS, noter et retenir :
Voici l'exemple simple d'une fonction à un paramètre :
A la lecture de ce code JS, comprendre :
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>
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).
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>
Comprendre le script et prévoir le résultat de son exécution.
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>
Qu' obtient-on pour l'exercice 4-2, où (contrairement à l'ex 4-1) l'instruction d'affichage est incluse dans l'instruction FOR ?
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>
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
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>
S'efforcer de décrire pas à pas la signification et le résultat des lignes de code.
Elles sont appelées habituellement dans le corps de la page entre <BODY>... </BODY>
Entre ces parenthèses on écrit éventuellement la liste des paramètres (cf exemple VIII).
function nom-fonction () {
séquence d'instructions
}
function nom-fonction () {
séquence d'instructions
return paramè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>
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 ]
}
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>
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>
nombre, avec une valeur par défaut égale à 10.
appel de la fonction provoqué par l'événement onClick sur le bouton nommé bouton.
nombre
sommequi est affectée à la valeur d'un autre composant de type texte, nommé resultat, et qui est chargé de l'affichage.
value. Il ne faut pas confondre la valeur et le nom du composant, donné par la propriété name.
par exemple, dialogue.nombre.value signifie :
"la valeur du composant nommé nombre situé dans le formulaire nommé dialogue".