Introduction au langage JavaScript
Transféré par
peow tyuikIntroduction au langage JavaScript
Transféré par
peow tyuikIntroduction au langage JavaScript
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...)
MI: JavaScript 1/60 Hatem Sandid
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 <SCRIPT>....</SCRIPT> dans la section d'en-tête, ou dans le corps
de la page.
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
... code
//code : instructions, déclarations de fonctions, etc…
</SCRIPT>
</HEAD>
oLe code inclus dans la séquence <SCRIPT> est évalué au début du
chargement de la page.
o S'il est inclus dans la section <HEAD>, il n'est pas exécuté tout de suite.
o 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é.
o 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ée à 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ù
o balise est le nom de certaines balises, souvent des composants de formulaire
o onEvenement est un nouvel attribut de la balise
o Bien entendu il faut connaître les associations entre événements et balises
"sensibles" à ces événements.
MI: JavaScript 2/60 Hatem Sandid
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>
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>
MI: JavaScript 3/60 Hatem Sandid
Exemple
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function calculer() {
....// code.....
}
</SCRIPT>
</HEAD>
<BODY>
..........
<A HREF="JavaScript:calculer()">Pour calculer</A>
..........
</BODY>
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 LANGAGE=JavaScript SRC=[Link]>
</SCRIPT>
où [Link] 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 la source.
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>
MI: JavaScript 4/60 Hatem Sandid
<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
I. 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;
[Link](phrase, "aujourd'hui ?");
</SCRIPT>
</BODY>
</HTML>
A la lecture de ce code JS, comprendre :
o la déclaration et l'initialisation (c'est-à-dire : donner une valeur initiale) des
variables bonjour, question, et phrase.
o l'affectation d'une valeur à une variable, avec l'opérateur = , sur le
modèle :
variable = valeur (ou expression)
o l'instruction [Link]("texte") est l'instruction générale
d'affichage de "texte" dans le même document (le document "courant").
o les constantes "texte" sont placées entre " "; à défaut JS croit qu'il s'agit
d'une variable.
o la concaténation (mise "bout à bout") de variables de type texte et de
constantes "texte" est réalisée avec l'opérateur +
o [Link](...) affiche aussi bien les valeurs des variables que les
constantes texte.
MI: JavaScript 5/60 Hatem Sandid
On peut séparer les éléments à afficher par l'opérateur + ou plus
simplement par la virgule ,.
o toutes les balises HTML peuvent figurer comme constantes texte, et sont
exécutées comme du code HTML.
Ainsi, "<BR>" inséré dans la valeur de la variable phrase, fera passer à la
ligne suivante la suite du texte à afficher.
Comprendre le script et prévoir le résultat de son exécution.
Pour vérifier, appuyer sur ce bouton :
II. Afficher une image
EXEMPLE 2
<HTML>
<BODY> <CENTER>
<SCRIPT language = "JavaScript" >
[Link]("<IMG SRC='../../images/[Link]'> <BR>
<H1> Une photo de mon lycée</H1><P>");
[Link]("<IMG SRC='../../images/[Link]'> <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 :
III. 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 = [Link]() + 1;
// la variable mois contient le N° du mois à partir
de 0 (à 11)
var jour = [Link]() ;
var annee = [Link]();
if ([Link] =='Netscape')
annee = annee + 1900 ;
// getYear() donne le numéro de l'année
// pour netscape et Mozilla à partir de 1900
MI: JavaScript 6/60 Hatem Sandid
[Link]("<Date> " , jour, " / ", mois, " /
"+annee, "<BR>");
[Link]("<Heure> ", [Link](), " :
",[Link](),
" : ",[Link]() );
</SCRIPT>
</BODY>
</HTML>
A la lecture de ce code JS, comprendre :
o La déclaration var date = new Date(); déclare un objet appelé date, de type
Date, initialisé à la date du système.
o 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 :
IV. 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>
V. 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
MI: JavaScript 7/60 Hatem Sandid
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
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 !="")
[Link]("Bonjour ", prenom," ! <BR> Vous
plaisez-vous à ", bahut, " ?")
else
alert("saisie incomplète !");
</SCRIPT>
</BODY>
</HTML>
Lire attentivement ce code JS. Voici quelques informations :
o Dans l'instruction conditionnelle, la condition qui suit if doit obligatoirement
être mise entre parenthèses.
o principaux opérateurs de comparaison :
== (égalité, à ne pas confondre avec l'affectation =)
!= (différent)
Autres : > , < , >= , <=
o principaux opérateurs logiques
&& : et (utilisé ici pour composer 2 conditions simples).
|| : ou (le caractère | est obtenu au clavier avec Alt Gr -)
! : non.
VI. Fonctions et procédures
Les fonctions doivent être déclarées dans la section <HEAD>... </HEAD>, entre les balises
<SCRIPT> </SCRIPT>, pour être comprises avant toute utilisation.
Elles sont appelées habituellement dans le corps de la page entre <BODY>... </BODY>
o soit à partir d'une section de code <SCRIPT>... </SCRIPT> (voir exemple VII
et exemple VIII)
MI: JavaScript 8/60 Hatem Sandid
o 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.
o Les procédures sans paramètre s'écrivent :
function nom-fonction () {
séquence d'instructions}
o Les fonctions fournissent un résultat :
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() {
[Link]("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 :
o la place de l'appel de la fonction bonjour()
o elle effectue une action, afficher Bonjour ! , sans calculer une valeur
résultat. (l'absence d'instruction return caractérise une procédure).
MI: JavaScript 9/60 Hatem Sandid
VII. 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 ;
[Link]("Pour i = ", i, "---> somme = " ,
somme , "<BR>");
}
return somme
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
var nombre= prompt("Somme jusqu'à N = ", 10);
[Link]("Somme des 100 premiers entiers non nuls
= ", somme_N_entiers(nombre));
</SCRIPT>
</BODY>
</HTML>
A la lecture de ce code JS, comprendre :
o 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 [Link]
o 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.
MI: JavaScript 10/60 Hatem Sandid
o 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.
o 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.
o 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.
VIII. 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 ;
[Link]("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="[Link]=somme_N_entiers([Link])">
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.
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.
somme_N_entiers( ) utilise un paramètre dont la valeur est contenue dans le
champ nombre
MI: JavaScript 11/60 Hatem Sandid
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.
remarquer que tout cela est inclus dans du code HTML, et ne nécessite pas de
section SCRIPT
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.
bien comprendre la façon de noter la référence à ces valeurs :
par exemple, [Link] signifie :
"la valeur du composant nommé nombre situé dans le formulaire nommé
dialogue".
Les structures de données en JavaScript
Les données constantes
JS fournit les constantes suivantes, directement disponibles :
les constantes numériques : entiers, "réels" écrits en notation décimale, ou flottante (c-
à-d en notation scientifique, par ex : 2718E-3)
les 2 constantes booléennes : true ou false
les chaînes de caractères, entourées indifféremment de guillemets " " ou d'apostrophes
' ' (à privilégier).
la constante spéciale null signifie "rien", "absence de valeur". Cette "valeur" est
attribuée à toute variable utilisée sans être définie (par exemple prompt() retourne
null si on sélectionne le bouton Annuler)
Manipulation des chaînes de caractères
JavaScript facilite beaucoup l'affichage des résultats en convertissant automatiquement
les entiers en chaînes de caractères, ce qui permet de concaténer des nombres avec des
chaînes de caractères (transtypage automatique).
Dans l'instruction d'écriture dans le document courant, [Link]( ), les
données à afficher peuvent être séparées par des virgules ou des +.(la concaténation
par l'opérateur + est recommandée)
Des caractères spéciaux peuvent aussi être insérés dans les chaînes : \b (retour
arrière), \f (saut de page) , \n (nouvelle ligne) , \r (Entrée), & (tabulation); \' pour
une apostrophe
On peut insérer des codes HTML sous forme de chaines, qui seront bien interprétées à
l'exécution comme de véritables balise, et non par affichées telles quelles.
MI: JavaScript 12/60 Hatem Sandid
Exemple
<script>
[Link]("Voici la valeur approchée à ", 1E-3,
" près de la constante e : ", 2718E-3);
[Link]("<P>");
[Link]("Mon <i>lycée</i> est situé en
<u>Seine-Saint-Denis</u> dans la ville d\'Epinay-sur-Seine");
</script>
Voici la valeur approchée à 0.001 près de la constante e : 2.718
Mon lycée est situé en Seine-Saint-Denis dans la ville d'Epinay-sur-Seine
(Attention ! le symbole "exposant" E doit être collé au dernier chiffre.)
Déclaration et affectation de variables
Types de variables
On distingue 5 types de variables en JS.
Les nombres : number, les chaines : string, les booléens : boolean, les objets :
object et les fonctions : function
La fonction typeof() appliquée à une variable retourne son type.
var chaine = 'bonjour';
[Link](typeof(chaine));
En voici l'exécution :
string
Notation : var nom = valeur
Déclaration de la variable nom initialisée avec la valeur valeur; son type est alors
celui de la valeur.
o Le mot var est facultatif, mais recommandé.
o Les variables doivent commencer par une lettre ou par _
o JS distingue minuscules et majuscules.
Les variables suivantes mavariable, maVariable, Mavariable, MaVariable sont
toutes distinctes.
o Le symbole = est réservé à l'affectation; le symbole de comparaison (égalité)
se note == ( 2 symboles = collés).
o JS attribue automatiquement à la variable le type de la valeur affectée.
Sinon JS lui attribue une valeur et un type indéterminés "undefined"
var x ;
[Link]('Voici la valeur de x : x = '+ x+ "<BR>" );
[Link]("et son type : typeof(x) = " + typeof(x) );
MI: JavaScript 13/60 Hatem Sandid
En voici l'exécution :
Voici la valeur de x : x = undefined
et son type : typeof(x) = undefined
Attention
L'attribution implicite de type, à première vue pratique, risque d'engendrer confusion
et absence de rigueur.
Il faut s'habituer à déclarer les variables et à les initialiser (c'est-à-dire leur donner
une valeur initiale au moment de leur déclaration, ce qui fixe leur type.
Par exemple
nomLycee = "J. Feyder" ; TauxTva = 20.6 ;
Eviter absolument ce qui suit (c'est compris par JS, mais peu recommandable !)
var x = 12.5;
[Link]('Ici x est une variable "réelle" : x = '+ x+ "<BR>" );
x = "Bonjour !" ;
[Link]("Maintenant x est une chaîne de caractères : x = " +
x );
En voici l'exécution :
Ici x est une variable "réelle" : x = 12.5
Maintenant x est une chaîne de caractères : x = Bonjour !
Portée des variables
Portée d'une variable La portée d'une variable est le domaine où cette variable est
connue et utilisable. De façon générale les variables définies directement dans une
séquence de script (entre <script> ....</script>) ont une portée globale sur toutes les
parties de script.
Exemple :
<HEAD> <script>
var lycee="J-Feyder";
var ville="Epinay-sur-Seine";
[Link]("Mon lycée est situé dans la ville d\'"+ville+"<BR>");
var date = new Date();
</script> </HEAD> </BODY> <script>
[Link]("Il porte le nom du cinéaste "+lycee+"<BR>");
[Link]("Nous sommes au mois N°",[Link]() + 1,"<BR>");
</script> </BODY>
En voici l'exécution :
Mon lycée est situé dans la ville d'Epinay-sur-Seine
Il porte le nom du cinéaste J-Feyder
Nous sommes au mois N°10
MI: JavaScript 14/60 Hatem Sandid
Tableaux JS
C'est un ensemble de données, en général de même type (chaine de caractères, nombres ..),
rangées sous un même nom et distingués par un numéro.
Ce numéro, l'indice, est placé entre [ ], et caractérise un élément du tableau.
Déclaration
var nom_tableau = new Array(dimension) ;
Le mot new commande la construction d'un objet de type Array, c'est-à-dire, tableau.
Le paramètre dimension, s'il est présent, est le nombre d'éléments.
Exemples
var MonTableau = new Array(8)
construit un tableau nommé MonTableau, de taille 8 éléments.
var Les4saisons = new Array("printemps", "été", "automne", "hiver");
construit un tableau en initialisant 4 éléments, c'est-à-dire en leur affectant une valeur
initiale (qui pourra ensuite être modifiée).
var mois= new Array(12);
Utilisation
Les éléments d'un tableau de taille dim, sont indicés à partir de 0 jusqu'à dim - 1.
Exemples à étudier :
var MonTableau = new Array(8)
Ces 8 éléments sont nommés MonTableau[0] , .... MonTableau[7]
var mois= new Array(12); mois[0]="Janvier"; ...mois[11]="Décembre";
var Les4saisons = new Array("printemps", "été", "automne", "hiver");
[Link]("Voici les 4 saisons : <UL>")
for (i=0 ; i<4 ; i++) {
[Link]("<LI>", Les4saisons[i] )
}
[Link]("</UL>");
En voici l'exécution :
Voici les 4 saisons :
printemps
été
automne
hiver
MI: JavaScript 15/60 Hatem Sandid
Tableaux à plusieurs dimensions
Il faut les gérer comme des tableaux de tableaux (à une dimension).
Exemple et exécution :
tab=new Array(3);
tab[0]= new Array(1,2,3);
tab[1]= new Array(4,5,6);
tab[2]= new Array(7,8,9);
for (i=0;i<3;i++) {
for (j=0;j<3;j++)
[Link](tab[i][j]," " );
[Link]("<br> " );
}
123
456
789
Propriétés
length donne le nombre d'éléments.
var mois= new Array(12);
[Link]("Il y a ", [Link], "mois dans l'année");
var NbMois = [Link] ; [Link](" partagés en ", NbMois / 3, "
trimestres");
Méthodes
reverse() change l'ordre des éléments
sort() trie suivant l'ordre croissant, ou suivant le modèle indiqué en paramètre
Particularités et bizarreries ..
var tab = new Array() crée un objet vide, de type tableau, sans fixer sa dimension
var tab= new Array("bonjour", charge_e, 1.6E-19, "C") est accepté et crée un
tableau hétéroclite de 4 éléments
On peut aussi créer un tableau directement "en extension", sans faire appel au
constructeur Array(). On liste les valeurs des éléments dans [ ... ].
Exemple : les 2 définitions suivantes sont équivalentes
var Les4saisons = new Array("printemps", "été", "automne", "hiver");
var Les4saisonsbis = ["printemps", "été", "automne", "hiver"];
[Link]("Voici les 4 saisons : <br>")
for (i=0 ; i<[Link] ; i++)
[Link](Les4saisonsbis[i], " " )
En voici l'exécution :
Voici les 4 saisons :
printemps été automne hiver
MI: JavaScript 16/60 Hatem Sandid
Les structures de contrôle en JavaScript
L'instruction conditionnelle if ... [then] .. else
Syntaxe
Structure conditionnelle
algorithme Code JavaScript
if (condition) {
SI condition séquence 1
ALORS Séquence 1 }
SINON Séquence 2 else {
FINSI séquence 2
}
Conditionnelles imbriquées; exemple 1-2
Les instructions conditionnelles peuvent être imbriquées : cela signifie que dans la structure
conditionnelle, séquence 1 et/ou séquence 2, peuvent elles-mêmes contenir une structure
conditionnelle.
<SCRIPT language = "JavaScript" >
var age=0;
age=prompt("Donnez votre âge : ","");
if ( age <= 0 )
alert("Cela n'a pas de sens !");
else
if (age <=13)
alert("Vous êtes encore bien trop jeune ...")
else
if (age <18)
alert("Désolé, vous êtes encore mineur(e)")
else
if (age <25)
alert("Vous êtes déjà majeur(e) !")
else alert("Ne vous vieillissez donc pas !");
</SCRIPT>
L'itération contrôlée FOR
L'instruction for permet de répéter une séquence d'instructions tant qu'une condition est vraie;
syntaxe
algorithme Code JavaScript
POUR I de valeur
for (valeur initiale; condition;
initiale
poursuite) {
à valeur finale
Répéter
séquence d'instructions
Séquence d'instructions
}
FIN POUR
MI: JavaScript 17/60 Hatem Sandid
Exemple 3
<SCRIPT language = "JavaScript" >
function hasard(N) {
// renvoie une valeur entière au hasard entre 1 et N inclus
return [Link]([Link]()*N)+1;
}
[Link]("Tableau de 100 nombres au hasard<BR>");
max= prompt("Nombres au hasard de 1 à ","100");
tab = new Array(100);
for (var i = 0; i <100; i++) {
tab[i]= hasard(max);
}
for (var i = 0; i <100; i++) {
[Link]("tab [", i,"] = ", tab[i]," ");
}
</SCRIPT>
Variante
for (variable in objet ) {
séquence instructions
}
Exemple 4
<SCRIPT language = "JavaScript" >
function hasard(N) {
return [Link]([Link]()*N)+1;
}
[Link]("Tableau de 100 nombres au hasard<BR>");
max= prompt("Nombres au hasard de 1 à ","100");
tab = new Array(1000);
for (var i = 0; i <100; i++) {
tab[i]= hasard(max);
}
for (var i in tab ) {
[Link]("tab [", i,"] = ", tab[i]," ");
}
</SCRIPT>
Les instruction break et continue
L'instruction break permet de sortir de l'itération ou de la séquence en cours.
L'instruction continue sort de la séquence en cours puis reprend à l'itération suivante.
L'Itération WHILE (TANT QUE)
L'instruction répétitive while permet de répéter une séquence d'instructions tant qu'une
expression est vraie.
syntaxe
algorithme Code JavaScript
TANT QUE (condition est vraie)
WHILE (condition) {
REPETER
séquence d'instructions
Séquence d'instructions
}
FIN TANT QUE
MI: JavaScript 18/60 Hatem Sandid
Exemple 5
<SCRIPT language = "JavaScript" >
function hasard(N) {
return [Link]([Link]()*N)+1;
}
max= prompt("Nombres au hasard de 1 à ","6");
[Link]("<H2>Tableau de nombres entre 1 et ",max,
" tirés au hasard, jusqu'à obtenir ",max,"</H2>");
tab = new Array(10*max);
a = hasard(max);
tab[0] = a;
i = 0 ;
while ( a != max ) {
a = hasard(max);
tab[i]= a;
i ++
}
[Link](max, ' a été obtenu au ', i, 'ème tirage <P>') ;
i=0;
while ( tab[i] != null ) {
[Link]("tab [", i,"] = ", tab[i],"---");
if (i %5 ==0 && i!=0) [Link]("<br>");
i ++;
};
</SCRIPT>
MI: JavaScript 19/60 Hatem Sandid
Les classes prédéfinies de JavaScript
Généralités sur les objets en JS
JS n'est pas un vrai langage orienté objet. Des concepts primordiaux ne sont pas
implémentés, notamment l'héritage. Mais il peut constituer une introduction à la
syntaxe objet.
Dans le présent chapitre, nous prendrons connaissance de quelques classes de données
prédéfinies.
Ensuite, nous étudierons les objets du navigateur, puis enfin nous apprendrons
comment définir nos propres classes d'objets en Java Script.
Une classe d'objets est un ensemble d'informations regroupées sous un même nom,
qui décrivent la structure et le comportement commun de ces objets.
Pour définir une classe, il faut préciser :
1. les propriétés (ou attributs) qui décrivent ses caractéristiques
Une propriété est une variable qui est attachée à un type d'objets, et qui est
contient une de ses caractéristiques.
2. les méthodes (procédures ou fonctions) qui décrivent ses comportements et ses
actions
Une méthode est une fonction qui ne s'applique qu'à une classe d'objet.
Construction des objets
Pour obtenir un objet, appelé aussi instance de la classe, on utilise une fonction
spéciale appelée constructeur et qui porte le nom de la classe.
Un objet est alors créé par l'instruction :
var objet = new Classe();
Utilisation des objets
Propriétés et méthodes constitutives d'une classe ne sont alors applicables qu'à un
objet de cette classe.
[Link]été
objet.méthode()
Classes d'objets prédéfinis
Elles sont définies dans JS, accompagnées de données (propriétés) et de fonctions (méthodes)
utilisables directement par le programmeur.
Nous allons parcourir ces 4 classes d'objets : Math, String, Date et Image, afin de savoir
construire des objets de ces classes et utiliser leurs propriétés et leurs méthodes.
I. Math
Les fonctions mathématiques usuelles doivent être préfixées par le nom de l'objet
Math, desquelles elles dépendent. Ce sont les "méthodes" de calcul de l'objet Math.
Par exemple :
o [Link] désigne une propriété de l'objet Math : le nombre PI
o [Link](1.50) appelle une méthode de l'objet Math et calcule sin (1.50),
l'angle étant exprimé en radians.
MI: JavaScript 20/60 Hatem Sandid
Pour alléger les notations, on peut "factoriser" le préfixe Math dans une séquence de
calcul mathématique, comme dans l'exemple suivant :
<script>
r=10;
with (Math ) {
s = PI * pow(r , 2);
theta = PI / 3;
x = r * cos( theta );
y = r * sin( theta);
[Link]("PI = ",PI, "<br>");
[Link]("s = ", s,"<br> Coordonnées de M : x = ",x, " y
= ",y)
}
</script>
En voici l'exécution :
PI = 3.141592653589793
s = 314.1592653589793
Coordonnées de M : x = 5.000000000000001 y = 8.660254037844385
Liste des principales méthodes
o [Link]() , racine carrée.
o [Link]() , [Link]() , [Link]() ,[Link] (), [Link]() ,
[Link]()
o [Link](), [Link]() entier immédiatement inférieur / supérieur.
o [Link](base, exposant), fct puissance, où base et exposant sont des
expressions numériques quelconques évaluables.
o [Link]() , [Link]()
o [Link](), nombre "réel" choisi au hasard dans [0 , 1[
o [Link]()arrondit à l'entier le plus proche.
Conversion chaine <--> nombre (entier ou flottant)
o Fonctions parseInt(), parseFloat() et eval() récupère les chaines de
caractères passée en paramètre et s'efforce de les évaluer numériquement : voir
le paragraphe suivant String spéciale isNaN( ) évalue l'argument pour
déterminer s'il s'agit d'un nombre ("NaN" = Not a Number). Elle retourne alors
TRUE ou FALSE.
Exemple d'utilisation pour controler la saisie d'un entier :
o <SCRIPT LANGUAGE="JavaScript1.1">
o function testnum(chnum) {
o num=parseInt(chnum);
o if (isNaN(num))
o alert(chnum+ 'n\'est pas pas un entier !');
o }
o </SCRIPT>
o Exercices : Faire afficher un tableau de valeurs pour la fonction ln(x) dans [-
10, 10]
MI: JavaScript 21/60 Hatem Sandid
II. String
Déclaration
var chaine = "<B>Bonjour !</B>";
[Link] ("La longueur de la chaine ",chaine, " est : ",
[Link],". Pourquoi ?<br>");
La longueur de la chaine Bonjour ! est : 16. Pourquoi ?
var chaine = "<B>Bonjour !</B>" crée une variable nommée chaine et lui attribue :
1. le type String.
2. la valeur "Bonjour !" avec l'attribut gras
Propriétés
o La valeur peut donc être composée d'une suite de caractères quelconques, y
compris des balises HTML.
o Des caractères spéciaux peuvent aussi être insérés dans les chaînes : \b (retour
arrière), \f (saut de page) , \n (nouvelle ligne) , \r (Entrée), \t (tabulation); \'
pour une apostrophe
o L'unique propriété length permet d'obtenir la longueur de la chaine.
o L'opération + concaténe (mise à la suite) 2 chaines pour en former une
nouvelle
var info = '\"informatique\" ';
var monOption = "l\'option " + info ;
[Link]("J\'enseigne encore " + monOption) ;
J'enseigne encore l'option "informatique"
Quelques fonctions (ou méthodes)
o eval() évalue numériquement une expression arithmétique fournie sous forme
de chaine de caractères.
o parseInt(), donne un nombre entier résultant de la conversion (si possible)
d'une chaine de caractères.
Si la conversion n'est pas possible, la valeur renvoyée est 0.
o parseFloat(), donne un nombre décimal de la même façon.
o La fonction toString(base) convertit l'objet (nombre généralement ) en
une chaine représentant le nombre écrit dans la base indiquée.
o Exemple à étudier :
var a = 5+ "007";
var b = 5+ parseInt("007");
var c = 2+ parseFloat("1.1416");
var d=255;
[Link](" a = ", a,"<br> b = ", b,"<br> c = ", c);
for (var i=0; i<255 ; i++)
[Link]("En décimal i = "+i+ " s'écrit "+
MI: JavaScript 22/60 Hatem Sandid
[Link](16)+"
")
a = 5007
b = 12
c = 3.1416
En décimal d= 255 s'écrit ff
o Exercice d'entrainement au calcul mental
o [Link](), pour mettre chaine en majuscule.
Exemple :
var chaine = "Bonjour !";
chaine = [Link]();
o [Link](d, l) extrait une partie de chaine, à partir du caractère de
position d+1, jusqu'à l.
Exemple :
var chaine = "aujourd\'hui";
[Link](" [Link]( 2,6) = ", [Link](
2,6));
[Link]( 2,6) = jour
o [Link](n) donne le caractère placé en nième position (n de 0 à
[Link]-1).
Exemple :
var chaine = "informatique";
[Link]("J'épelle :<br>");
for (i=0 ; i< [Link] ; i++)
[Link] ([Link](i), " - ");
J'épelle :
i-n-f-o-r-m-a-t-i-q-u-e-
o [Link](s_ch) donne la 1ère position du caractère de chaine
égal au 1er caractère de s_ch.
Exemple :
var chaine = "informatique";
var s_ch = "ma";
var car = "i";
var position = 2;
[Link] ("1ère position de ", s_ch, " dans ", chaine,"
est : ",
[Link]( s_ch),"<br>");
[Link] ("position de ", car ," dans ", chaine," à
MI: JavaScript 23/60 Hatem Sandid
partir de la
position ", position," est : ", [Link](car,
position)"<br>");
1ère position de ma dans informatique est : 5
position de i dans informatique à partir de la position 2 est : 8
o La méthode [Link](séparateur)
Appliquée à un texte, elle fournit un tableau de chaines dont les éléments sont
les sous-chaines extraites suivant le séparateur.
Exemples
Chaine initiale : [Link]@[Link]
découpage suivant "@" :
tab_ch1[0] = [Link]
tab_ch1[1] = [Link]
découpage suivant "." :
tab_ch1[0] = [Link]
tab_ch1[1] = [Link]
III. Date
L'objet Date permet de définir et gérer les dates et les heures.
L'origine des dates a été choisie le 1er janvier 1900 et est exprimée en millisecondes.
Construction d'un objet de type Date
Pour construire un objet de type Date, il faut utiliser un constructeur Date()
avec le mot-clé new
variable = new Date(liste de paramètres)
Attention, les secondes et les minutes sont notées de 0 à 59, les jours de la semaine de
0 (dimanche) à 6, les jours du mois de 1 à 31, les mois de 0 (janvier) à 11, et les
années sont décomptées depuis 1900 .
On peut passer différents paramètres pour construire divers objets date
o Date() , pour obtenir la date et l'heure courante (connue du système)
o Date(month day, year hour:min:sec) pour obtenir par exemple :
December 25, 1995 13:30:00)
o Date(année, mois, jour), une suite convenable de 3 entiers, par exemple (2000,
0, 1)
o une suite de 6 entiers (année, mois, jour, heures, minutes , secondes), (même
exemple : 95, 11, 25 , 13, 30 , 00
Méthodes
Elles permettent d'extraire diverses informations d'un objet date
MI: JavaScript 24/60 Hatem Sandid
o set....() : pour transformer des entiers en Date
o get....() : pour transformer en date et heure des objets Date
o to...() : pour retourner une chaîne de caractères correspondant à l'objet Date
o après les préfixes set et get ,
on peut mettre Year, Month, Date , Hours, Minutes,
Seconds
pour obtenir respectivement : nombre d'années depuis 1900, le numéro du
mois, le N° du jour dans le mois, et les heures, minutes et secondes.
o getDay() donne le N° du jour de la semaine (le 0 tombe le dimanche)
o getTime() donne le nombre de millisecondes écoulées depuis le
1/1/1970, très pratique pour calculer des intervalles entre 2 dates.
Exemple
var aujourdhui= new Date();
var maDate = new Date ("November 24, 1981");
var jour = [Link] () // jour vaut 24.
[Link]("Nous étions le ", jour, "/",
[Link]()+1, "/", [Link]()+1900 ,<br>);
[Link]("Nous sommes le ", [Link](), "/",
[Link]()+1, "/", [Link]()+1900 );
Nous étions le 24/11/1981
Nous sommes le 11/10/3904
Procédures et fonctions
Déclaration et appel des fonctions en JS
On distingue traditionnellement les procédures et les fonctions.
JavaScript ne différencie pas leur syntaxe. Il est recommandé de les inclure dans la
section d'en-tête du document à l'intérieur du couple de balises
Une procédure est une suite d'instructions qui forment un tout et qui sont regroupées
sous un même nom.
Une fonction est une suite d'instructions qui calcule un résultat; celui-ci est transmis à
l'expression qui a appelé la fonction, après le mot return. A noter que l'instruction
return peut être utilisée plusieurs fois en cas de valeur retournée conditionnellement.
De plus, procédures et fonctions peuvent admettre des paramètres.
Ce sont des variables dont les valeurs sont fixées par le programme appelant au
moment de l'exécution et qui apparaissent "formellement", sans valeur affectée au
niveau de la déclaration.
S'il n'y a pas besoin de paramètres, le nom de la fonction est suivi d'un couple de
parenthèses vides.
Déclaration générale d'une procédure et d'une fonction
<HEAD>
<SCRIPT LANGUAGE=JavaScript >
Function nomProcédure(param1, param2, ...) {
séquence d'instructions;
MI: JavaScript 25/60 Hatem Sandid
}
Function nomFonction(param1, param2, ...) {
séquence d'instructions;
return nom_variable
}
</SCRIPT>
</HEAD>
Appel d'une procédure et d'une fonction
JS lit les fonctions présentes dans une page, lors de son ouverture, mais ne les
exécutent pas.
Une fonction n'est exécutée qu'au moment de son appel.
Dans l'écriture de l'appel de la fonction, il faut fournir une liste de valeurs
correspondant exactement à la liste des paramètres présents dans la déclaration.
Les procédures forment des instructions à part entière, tandis que les fonctions doivent
être affectées à une variable du type de retour ou incluses dans des expressions comme
[Link](...).
nomProcédure(valeur1, valeur2, ...) ;
variable = nomFonction(valeur1, valeur2, ...) ;
Exemple
Etudier l'exemple suivant et prévoir exactement son exécution.
<HEAD>
<SCRIPT>
// déclaration de la procédure
function bonjour(prenom) {
[Link]("Bonjour, comment vas-tu ", prenom," ?<br>");
}
// déclaration de fonctions
function volumeSphere(rayon) {
return 4/3*[Link]*[Link](rayon,3);
}
function calculerPrix(PrixUnitaire, NbArticles) {
return PrixUnitaire* NbArticles;
}
</SCRIPT>
</HEAD>
<BODY>
// appel de la procédure
bonjour("Toto") ;
//appels des fonctions
var montant=CalculPrix( 150 , 4) ;
[Link]( "Tu dois payer ", calculerPrix( 150, 4), "F.<BR>");
[Link]( "Sais-tu que le volume de la sphère de rayon unité est ",
volumeSphere(1)," ?<BR>" );
</BODY>
Visibilité des paramètres
MI: JavaScript 26/60 Hatem Sandid
De façon générale, les paramètres formels d'une fonction ne sont connus qu'à
l'intérieur de la fonction.
De même, les variables locales, variables qui sont explicitement déclarées à l'intérieur
de la fonction.
Conséquences :
Si la valeur d'un paramètre ou d'une variable locale est modifiée dans la fonction,
cette modification ne sera pas connue à l'extérieur de la fonction. On dit que cette
variable n'est pas visible au niveau du programme général
Examiner l'exemple suivant : qu'obtient-on exactement à l'exécution ?
<HEAD>
<SCRIPT LANGAGE=JavaScript >
function bonjour(nom) { // nom est un paramètre local
var ch ="Salut !"; // ch est une variable locale
[Link]("au début de la fonction : Bonjour "+nom +"<BR>");
nom = "Alain"; // on modifie le paramètre local
[Link]("à la fin de la fonction : Bonjour "+nom +"<BR>");
}
var prenom = "Jacques";
bonjour(prenom) ;
[Link]("après appel de la fonction : Bonjour "+prenom
+"<BR>");
</SCRIPT>
<HEAD>
On ajoute à la fin l'instruction suivante :
[Link]("après appel de la fonction : "+ ch +" bonjour "+nom
+"<BR>");
o Que va t-il se passer exactement ?
o Et si on supprime + ch , qu'obtient-on ?
Fonctions récursives
JavaScript est un langage récursif !
Exemple classique : la fonction factorielle
<HTML>
<BODY>
<script>
function fact(n) {
if (n==0) return 1
else return (n*fact(n-1))
}
nb=prompt("N= ","0");
[Link]("Liste des premières factorielles jusqu'à ", nb);
for (var i=0;i<nb;i++)
[Link](i+ " ! = "+fact(i)+"<br>")
</script>
</BODY>
</HTML>
MI: JavaScript 27/60 Hatem Sandid
Qu'obtient-on exactement à l'exécution ?
L'objet Function
A chaque fonction rencontrée, JavaScript construit un tableau de ces arguments,
appelés arguments.
Si la fonction s'appelle calculer, ce tableau a :
o pour éléments [Link][i]
o pour taille [Link]
Exemple
function calculerPrix(PrixUnitaire, NbArticles) {
if ([Link] !=2)
alert("impossible de calculer le prix !")
else
return PrixUnitaire* NbArticles; }
Dans le cas où l'on ne passe pas 2 paramètres effectifs lors de son appel, cette fonction
affiche un message d'alerte et renvoie la valeur undefined
On peut définir aussi une fonction dynamiquement, en cours d'exécution, et avec un nombre
d'arguments non précisés au départ !
Ce nombre d'arguments variables (et non défini à la déclaration), trouve son utilité
dans le cas où ces arguments doivent être traités comme les éléments d'un tableau
function somme() {
var resultat=0 ;
for (var i=0; i < [Link]; i++)
resultat += [Link][i] ;
return resultat ;
}
// quelques appels
[Link]("1+2+3 = somme(1,2,3) = " + somme(1,2,3)+"<p>");
[Link]("1+2+3+ .. +10 = somme(1,2,3,4,5,6,7,8,9,10) = "
+ somme(1,2,3,4,5,6,7,8,9,10)+"<p>");
[Link](" somme(15.4) = " + somme(15.4)+"<p>");
[Link](" somme() = " + somme()+"<p>");
MI: JavaScript 28/60 Hatem Sandid
Formulaires dans une page HTML
Présentation
Jusqu'ici, les pages HTML sont des documents passifs, à consulter.
L'utilisateur parcours des pages, mais ne peut pas écrire, fournir des informations, remplir un
formulaire et le transmettre, comme cela se fait couramment par Minitel.
Les seules initiatives attendues de la part de l'utilisateur sont des choix de "navigation" qui lui
sont proposés sous forme d'hyperliens cliquables.
Les formulaires HTML (FORMS en anglais) sont des ensembles de composants, appelés
aussi champs qui permettent à l'utilisateur d'entrer des informations, d'exprimer ses choix, de
saisir du texte ...
Bien sûr les réactions à apporter à ces informations doivent être prévues à l'avance, et donc
doivent être programmées. Les programmes en général placés sur le serveur gérant le
dialogue avec le client- utilisateur. Le langage Java Script, plus limité, permet l'insertion de
petits programmes dans les pages HTML, les rendant ainsi interactives. Il est ainsi possible
d'effectuer des traitements à partir des données entrées par l'utilisateur.
La balise FORM
Toute la partie formulaire de la page doit se trouver entre les marqueurs <FORM>
....</FORM> Cette balise sert de conteneur pour accueillir les éléments ou composants du
formulaire, comme par exemple un bouton, une ligne de texte, une liste de choix . Chacun de
ces composants s'y trouve déclaré et créé individuellement par une balise qui commence
généralement par INPUT ou par SELECT
Voici un exemple significatif qui regroupe la plupart des catégories de composants que peut
contenir une formulaire HTML. Chaque composant sera ensuite étudié en détail.
Un exemple complet
<H2><u><CENTER>Fiche de renseignements</CENTER></u></H2>
<FORM NAME="Fiche_inscription">
Nom : <INPUT TYPE ="text" NAME="Nom" VALUE="" >
Prénom : <INPUT TYPE ="text" NAME="Prenom" VALUE="" >
Mot de passe : < INPUT TYPE="password" NAME="Pass" SIZE=5><P>
Vous êtes en terminale S à dominante :
<INPUT TYPE="radio" NAME="option" VALUE="math" checked>Mathématiques
<INPUT TYPE="radio" NAME="option" VALUE="pc">Physique-chimie
<INPUT TYPE="radio" NAME="option" VALUE="svt">SVT
<P>
Quelle est votre discipline préférée ?
<SELECT NAME="disciplines" MULTIPLE SIZE=3>
<OPTION>Physique
<OPTION SELECTED>Informatique
<OPTION>Philosophie
MI: JavaScript 29/60 Hatem Sandid
<OPTION>Mathématiques
<OPTION>Langues
<OPTION>SVT
<OPTION>Histoire
<OPTION>EPS
</SELECT>
<P>
Vous vous êtes inscrit(e)s en : <BR>
<INPUT TYPE="checkbox" CHECKED NAME="DEUG" >DEUG<BR>
<INPUT TYPE="checkbox" NAME="CPGE">CPGE<BR>
<INPUT TYPE="checkbox" NAME="BTS">BTS<BR>
<INPUT TYPE="checkbox" NAME="IUT">IUT<BR>
<INPUT TYPE="checkbox" NAME="AUTRE">AUTRE
<P>
Ecrivez ci-dessous le sujet de votre projet informatique :<BR>
<TEXTAREA NAME="Projet" ROWS=8 COLS=55>
Voici mon projet d'option informatique
</TEXTAREA>
<P>
<INPUT TYPE="RESET" VALUE="Effacer"> Pour recommencer<P>
<INPUT TYPE="SUBMIT" VALUE="Valider" >Pour envoyer ces informations<P>
</FORM >
Fiche de renseignements
Nom : Prénom : Mot de passe :
Vous êtes en terminale S à dominante : Mathématiques Physique-chimie SVT
Physique
Informatique
Philosophie
Quelle est votre discipline préférée ?
Vous vous êtes inscrit(e)s en :
DEUG
CPGE
BTS
IUT
AUTRE
Ecrivez ci-dessous le sujet de votre projet informatique :
Voici mon projet d'option informatique
Effacer Valider
Pour recommencer Pour envoyer ces informations
MI: JavaScript 30/60 Hatem Sandid
Champs de texte
Ligne de texte
<INPUT TYPE="text" NAME="Nom du champ" VALUE="texte initial" SIZE=longueur>
Les divers paramètres
TYPE="text" est facultatif, car il s'agit du type de champ par défaut .
NAME pour préciser le nom du champ (utile pour la programmation).
VALUE pour donner un texte visible au champ.
SIZE fixe la longueur visible du champ
MAXLENGTH pour limiter le nombre de caractères pouvant être entrés dans le champ.
Zone de texte multiligne
Pour permettre à l'utilisateur de saisir un texte de plusieurs lignes, on utilise le composant
<TEXTAREA
<TEXTAREA NAME=".." ROWS=.. COLS= ..>
Texte affiché par défaut ...<BR>
</TEXTAREA>
Les divers paramètres
ROWS pour préciser le nombre de lignes de la fenêtre de saisie.
COLS pour préciser le nombre de colonnes.
<TEXTAREA>texte </TEXTAREA> le texte inséré est directement affiché tel quel;
l'utilisateur peut l'effacer.
Liste de sélection
Pour permettre un choix dans une liste de plusieurs options présentées sous forme de liste
déroulante, on utilise la balise <SELECT>
<SELECT NAME="..." SIZE=...>
<OPTION SELECTED >option 1
<OPTION>option 2
<OPTION>option 3
</SELECT>
Les divers paramètres
<OPTION> pour introduire chaque option de la liste.
SIZE= ... pour préciser le nombre de lignes visibles.
S'il y a plus d'options, la liste pourra être parcourue à l'aide d'une barre de défilement.
<OPTION SELECTED> pour sélectionner cette option par défaut.
<SELECT MULTIPLE> l'attribut facultatif MULTIPLE autorise à sélectionner plusieurs
options dans la liste.
MI: JavaScript 31/60 Hatem Sandid
Cases à cocher
Afin de répondre à des questions du type Oui/Non ou Vrai/faux, on utilise des boîtes à cocher
avec la balise :
<INPUT TYPE="CHECKBOX" NAME= "..." CHECKED>question
Les divers paramètres
<TYPE ="checkbox" > est indispensable pour produire une boite à cocher.
NAME=".." s'il y a plusieurs boites, chacune doit avoir un nom spécifique.
CHECKED pour cocher par défaut la boite (donc répondre Vrai par défaut).
Boutons de sélection
Le type RADIO vous permet de définir des boutons radio. Ils sont utilisés lorsque l'utilisateur
doit faire un choix entre plusieurs options concurrentes, qui s'excluent mutuellement.
Ils jouent ainsi un rôle analogue aux listes de sélection. Il faut donc indiquer le groupe des
boutons dans lequel ce choix exclusif doit s'exercer, en leur donnant un même nom (la valeur
de l'attribut NAME). L'utilisateur ne pourra alors sélectionner qu'un seul bouton radio à la fois
dans chaque groupe.
<INPUT TYPE="RADIO" NAME="nom" VALUE=".." CHECKED>option 1<BR>
<INPUT TYPE="RADIO" NAME="nom" VALUE=".." >option 2<BR>
<INPUT TYPE="RADIO" NAME="nom" VALUE=".." >option 3
Les divers paramètres
<TYPE ="radio" > est indispensable pour produire des bouton radio.
NAME="nom" l'ensemble des boutons doit porter le MEME nom.
VALUE="..." chaque bouton radio doit posséder une valeur spécifique pour
différencier les options.
CHECKED pour désigner LE bouton sélectionné par défaut.
Boutons de commande
Les boutons servent à recevoir des "clics". Leur principale fonction est de permettre à
l'utilisateur de déclencher des événements auxquels seront rattachées des fonctions.
Boutons communs
<INPUT TYPE="Button" NAME= ".." VALUE="Cliquez">
La valeur de l'attribut VALUE est le texte gravé sur le bouton.
Un bouton sert essentiellement à déclencher des traitements locaux, par appel d'une fonction
écrite en langage JavaScript.
MI: JavaScript 32/60 Hatem Sandid
Boutons de validation
Ce bouton sert à valider les informations saisies dans les champs du formulaire. Il provoque
l'expédition de ces informations soit sur le serveur pour y être traitée, soit en message
électronique
<INPUT TYPE="SUBMIT" NAME= ".." VALUE="Envoyer">
Envoyer
Boutons de réinitialisation
Ce bouton remet le formulaire dans son état initial, en réinitialisant les valeurs par défaut.
<INPUT TYPE="RESET" VALUE="Effacer>
Effacer
Compléments : transmission des données
La balise FORM possède plusieurs attributs, permettant de spécifier ce qui doit être fait lorsque
l'utilisateur veut envoyer les données au serveur.
Attribut action
<FORM ACTION="url"...> permet d'indiquer l'URL (de protocole : http, ftp, gopher, file,
mailto, news, telnet, ...) qui va recevoir les informations entrées dans le formulaire, lorsque
l'on cliquera sur le bouton de validation.
Plus précisément, l'URL est l'adresse d'un programme (un script) qui va récupérer les données
et les traiter. Si le champ ACTION est absent, l'URL sera celle du document courant.
Attribut method
L'attribut METHOD permet d'indiquer la méthode de transmission des données saisies dans le
formulaire. Il y en a deux:
La méthode GET, méthode par défaut, consiste à concaténer les données du formulaire
à l'URL spécifiée dans ACTION, après avoir inséré un point d'interrogation.
Ces données sont incluses sous forme d'une liste nom-champ=valeur-champ.
On obtient alors une requête adressée au serveur, du genre
:[Link]
La méthode POST génére une requête HTTP spéciale qui envoie les données au serveur
(plutôt qu'en l'accolant à l'URL). Il est recommandé d'utiliser la méthode POST
Exemple : l'action MAILTO:
C'est le moyen le plus simple pour faire expédier les informations du formulaire par
l'utilisateur.
Il consiste à utiliser automatiquement le courrier électronique.
Il suffit de spécifier l'adresse électronique (e-mail) du destinataire après le nom du protocole
MAILTO:
.
MI: JavaScript 33/60 Hatem Sandid
Si le serveur de messagerie est accessible, (si l'utilisateur est bien connecté), le corps du
message acheminé contiendra la liste des couples champ1=valeur1
Par exemple, pour m'envoyer vos fiches de rensenseignements, il suffirait de remplacer, dans
le formulaire du début de ce chapitre, la ligne <FORM NAME="Fiche_inscription"> par
<FORM NAME="Fiche_inscription" ENCTYPE="text/plain" METHOD="post"
ACTION="MAILTO:jgourdin@[Link]">
Programmation événementielle en JS
Résumé
L'utilisateur déclenche un "événement" (clic, déplacement souris, clic sur un bouton, choix
d'un option de liste déroulante etc. .) relativement à un objet (lien, composant de formulaire..).
L'événement est décelé (capté) par l'objet cible si celui-ci possède une "sensibilité" à
l'événement. Il faut donc connaître la correspondance objet événement.
S'il prévoit un intérêt à "répondre" à cet événement, le programmeur doit à l'avance, associer
du code JS ou une fonction JS à un tel couple objet événement. L'appel et l'exécution de ce
code ou de cette fonction seront automatiquement déclenchés par l'événement, et constituent
ainsi la "réponse" à celui-ci.
Les fonctions sont déclarées dans la partie <HEAD> et les appels en général associés à la
balise de l'objet HTML qui va capter l'événement. Il faut veiller à bien gérer le passage de
paramètres, souvent un formulaire entier.
Evénements JS
Nous avons déjà vu des exemples d'appels de fonctions JavaScript provoquées par des
événements qui surviennent au moment de l'exécution du programme.
Ces événements sont des actions qui sont déclenchées le plus souvent par l'utilisateur.
Par exemple, un clic sur un bouton (composant de formulaire) est un événement, comme l'est
la validation d'un texte saisi dans une ligne de texte, ou le choix d'une option dans un
composant case à cocher
Le navigateur reconnaît un ensemble d'événements associés à des balises, des liens et des
composants de formulaires. Par programmation, on peut leur associer des fonctions
particulières appelées gestionnaires d'événements appelée systématiquement lorsque ces
événements sont provoqués.
Un gestionnaire d'événement est une procédure particulière attachée à une balise
HTML,
1. prédéfinie par le langage JS (par exemple onClick)
2. déclenchée par l'événement correspondant (click sur un composant de type button)
3. qui apparaît dans la balise du composant qui reçoit l'événement
4. et à laquelle on affecte une fonction écrite en JS, déclarée préalablement
MI: JavaScript 34/60 Hatem Sandid
Définition générale
1. onEvent est le nom du gestionnaire d'événements associé à l'événement Event, comme
onClick
2. Balise est un nom de balise qui sait gérer un tel événement.
3. "code JS" est généralement une fonction déclarée auparavant dans une section
<HEAD> <SCRIPT>...</SCRIPT> </HEAD>
4. Mais ce peut être aussi une suite d'instructions JS, séparées par des virgules.
Supposons déjà déclarée une fonction nommée calculer. On peut appeler le navigateur à
l'exécuter au moment où l'utilisateur clique sur un bouton.
Pour cela il suffit d'affecter cette fonction calculer avec ses paramètres, au gestionnaire
onClick qui réagit à l'événement click , Le code à écrire est : Le paramètre [Link] fait
référence au formulaire qui contient le bouton lui-même.
Remarques
On peut utiliser plusieurs gestionnaires d'événements sur un même composant.
Par exemple : <A HREF="URL" onMouseOver="fct1()" onMouseOut="fct2()">voir ...</A>
Liste des événements
onBlur : se produit quand un champ Textarea, Text ou Select n'est plus activé.
onChange : se produit quand un champ Textarea, Text ou Select est modifié par
l'utilisateur.
onClick : se produit quand un composant Button, Checkbox, Radio Link, Reset ou
Submit reçoit un click souris
onFocus : se produit quand un composant Textarea, Text ou Select est activé.
onLoad : se produit quand le navigateur a fini de charger une fenêtre ou toutes les
frames d'un FRAMESET. L'événement onLoad se positionne dans la balise BODY ou
dans la balise FRAMESET
onMouseOver : se produit quand la souris passe sur un Hyperlien ou une zone
activable d'une image.
onSelect se produit quand un composant Textarea ou Text est sélectionné.
onSubmit : se produit quand un formulaire est globalement validé appui du bouton
Submit.
onUnload :se produit quand on quitte un document. L'événement onUnload se
positionne dans la balise BODY ou dans la balise FRAMESET.
onAbort : se produit quand l'utilisateur interrompt le chargement d'une image
onError : se produit quand le chargement d'une page ou d'une image produit une
erreur.
onMouseout : se produit quand la souris quitte une zone Area d'une image ou un
hyperlien.
onReset : se produit quand on clique sur le bouton reset d'un formulaire
Tableau récapitulatif
Gest. provoqué par l'utilisateur qui ... sur les objets ...
MI: JavaScript 35/60 Hatem Sandid
événement
onBlur enlève le focus du composant text, textarea, select
change la valeur d'un texte ou d'un
onChange text, textarea, select
composant à options
button, checkbox, radio, reset,
onClick clique sur un composant ou un hyperlien
submit
onFocus donne le focus au composant text, textarea, select
onLoad charge la page dans le navigateur balises BODY, FRAMESET
balises <A HREF..>, <AREA
onMouseOut la souris quitte un lien ou une ancre
HREF..>
balises <A HREF..>, <AREA
onMouseOver bouge la souris sur un lien ou une ancre
HREF..>
onReset efface les saisies d'un formulaire bouton reset
sélectionne une zone d'édition d'un
onSelect text, textarea
formulaire
onSubmit soumet un formulaire bouton submit
onUnload quitte la page balises BODY, FRAMESET
Programmer un formulaire
Un formulaire form se présente comme un objet inclus dans un objet document ( page
HTML).
On sait que lui-même se conduit comme un conteneur d'autres objets que sont les
composants usuels d'une interface graphique.
Ces objets possèdent des propriétés et des méthodes (fonctions) qui correspondent
pratiquement aux attributs des balises HTML qui les construisent .
Pour l'essentiel, la tâche du programmeur est d'analyser les traitements à effectuer sur
les informations extraites du formulaire puis d'écrire les fonctions correspondantes,
appelées par le déclenchement d'événements par l'utilisateur.
Champ de TEXTE
<FORM NAME="Questions">
<INPUT TYPE="text" NAME="classe" VALUE="" SIZE=10> ;
</FORM>
Le texte entré par l'utilisateur est affecté à la propriété value du composant classe situé
dans le formulaire Questions placé dans le document courant appelé document (par
défaut).
De l'intérieur de ce document, le contenu du champ de texte est donc "visible" et
accessible par son nom complet :
[Link]
En particulier, il peut être récupéré et affecté à une variable MaClasse par
l'expression: MaClasse = [Link]
La référence [Link] est suffisante car la portée du formulaire F est le
document où il est inséré.
MI: JavaScript 36/60 Hatem Sandid
Les formulaires dans un même document sont stockés dans un tableau appelé forms;
le premier formulaire est alors noté forms[0], la deuxième est forms[1] etc..
Si Questions est situé en position de premier formulaire, on peut remplacer
l'affectation précédente par :
MaClasse = [Link][0].[Link]
Liste de sélection SELECT
<FORM NAME="F">
<SELECT NAME="liste"
onChange='[Link]+=[Link][[Link]].value'
> ;
<OPTION VALUE="matin ... " >Matin
<OPTION VALUE="midi ... ">Midi
<OPTION VALUE="soir ... ">Soir
</SELECT>
<INPUT TYPE=TEXTE SIZE=40 NAME="resultat" VALUE="Vous avez sélectionné : " >
</FORM>
Matin
Propriétés de l'objet SELECT
selectedIndex est une propriété dont la valeur est le numéro de l'élément sélectionné
dans la liste
var num = [Link] ---> num est le numéro de l'élément sélectionné dans
le composant liste situé dans le formulaire F.
options[]est le tableau prédéfini contenant les objets de la liste
[Link][num] est l'objet champ situé au N° num (rappel : le 1er a le numéro 0)
[Link][num].value est la valeur de l'option N° num de la liste.
[Link][num].text est le texte suivant le champ <OPTION>.
Boutons de sélection RADIO
<FORM NAME="F">
<INPUT TYPE="RADIO" NAME="choix" value="sup. à 10" CHECKED
onClick='[Link]=[Link]'>plus de 10
<INPUT TYPE="RADIO" NAME="choix" value="entre 8 et 10"
onClick='[Link]=[Link]'>entre 8 et 10
<INPUT TYPE="RADIO" NAME="choix" value="inf. à 8"
onClick='[Link]=[Link]'>moins de 8
<INPUT TYPE=TEXTE SIZE=15 NAME="resultat" VALUE="" >
</FORM>
plus de 10
entre 8 et 10
moins de 8
Propriétés de l'objet RADIO
[Link][num] est le bouton radio N° num (le 1er a le numéro 0) de l'ensemble de
boutons nommé choix
MI: JavaScript 37/60 Hatem Sandid
checked est le booléen décrivant l'état d'un bouton : if ([Link][num].checked) ....
[Link][num].value est la valeur associée au bouton N° num de la série de bouton.
Cases à cocher CHECKBOX
Le traitement est complètement semblable au cas des boutons radio, à la différence que
chaque case possède un nom propre distinct des autres. L'état checked de chaque case doit
donc être testé individuellement.
Voir l'exemple complet qui suit.
Bouton de validation SUBMIT
Lorsque l'utilisateur "soumet" ses réponses en cliquant sur le bouton submit, une fonction
programmée en réaction au gestionnaire de l'événement onSubmit peut analyser ses choix et y
répondre.
On peut plus simplement préférer utiliser un bouton normal qui lance une fonction en réaction
à l'événement onClick()
Voir l'exemple suivant.
Envoyer un formulaire
Pour envoyer la saisie d'un formulaire sans faire appel à des programmes à placer sur le
serveur WEB, on peut envoyer le formulaire par courrier électronique de façon simple pour
l'utilisateur.
Il suffit d'ajouter un attribut particulier ACTION= dans la balise <FORM > qui précise le
mode de transmission
Voici comment envoyer le contenu du formulaire par e-mail,
<FORM ACTION="[Link] destinataire@nom serveur" METHOD="POST">
..................
<INPUT TYPE="SUBMIT" VALUE="Envoyer"
<INPUT TYPE="RESET" VALUE="Effacer"
</FORM>
Etude des événements onMouse sur une image en
coordonnées
Ici, on détourne les hyperliens correspondant aux zones de l'image cliquable de façon à ce
qu'un clic dans une zone appelle une fonction.
Pour cela, on n'affecte pas d'URL à l'attribut HREF de la balise <AREA>.
A la place, on affecte un appel d'une fonction (déjà déclarée) aux gestionnaires d'événements
onMouseOver ou onMouseOut pour réagir au passage de la souris sur chacune des zones.
<MAP NAME="mon_image">
<AREA HREF="" SHAPE="poly" COORDS="x,y,..." onMouseOver="fct1()" >
<AREA HREF="" SHAPE="circle" COORDS="x,y,..."onMouseOver="fct2()" >
..........................................
</MAP>
..........................................
<IMG SRC="fichier [Link]" USEMAP="#mon_image">
MI: JavaScript 38/60 Hatem Sandid
Dans l'exemple ci-dessous le passage de la souris sur la zone France de la carte, génère un
événement onMouseOver qui provoque l'appel de la fonction affiche(France), tandis que le
fait de quitter cette même zone associé à l'événement onMouseOut provoque l'appel de
affiche(efface).
<AREA COORDS="23,213,48,206,79,202,95,220,115,230,96,254,
102,260,99,281,104,285,88,293,77,284,65,293,30,272,42,245,23,213"
SHAPE="poly" HREF="" onMouseOver="affiche(France)"
onMouseOut="affiche(efface)">
QUELQUES ETATS D'EUROPE
Pays :
Population : hab.
Superficie : km2
Gouvernement :
Capitale :
Monnaie :
MI: JavaScript 39/60 Hatem Sandid
TP1 Evénements JavaScript
Exercice 1 : événement onBlur
<html>
<head>
<script language="JavaScript">
function lireprenom(str) {
alert("bonjour, "+ str+"!");
}
</script>
</head>
<body>
Entrez votre prénom :
<form>
<input type="text" name="exo1" value=""
onBlur="lireprenom([Link])">
</form>
</body>
</html>
L'événement onBlur (="sur sortie du focus") est déclenché lors de la validation (ou par action
sur la touche TAB ou en cliquant en dehors du champ).
La fonction lireprenom() est alors appelée.
Son paramètre [Link] prendra la valeur tapée dans le champ.
Remarque :this désigne l'objet courant; ici, this est facultatif.
Exercice 2 : événements onClick sur des boutons radio et onChange sur une
liste déroulante
L'utilisateur choisit la couleur de fond de la fenêtre du navigateur entre plusieurs couleurs
proposées, par exemple :
Rouge
Vert
Bleu
Au hasard
Des boutons radio sont liés à ces choix de couleur. Par défaut la couleur de fond du document
est rouge.
Un changement de bouton sélectionné doit provoquer immédiatement le changement de
couleur associée au bouton. Utiliser la propriété bgColor de l'objet document et lui affecter
une couleur,
par exemple [Link] = "red";
On pourra ensuite d'effectuer le même changement de couleur d'une seconde façon, en
sélectionnant la couleur dans une liste de sélection.
MI: JavaScript 40/60 Hatem Sandid
Exercice 3 : événements onClick sur un bouton et onChange sur une ligne de
texte
On saisira le nombre N dans un champ de texte nommé "nombre" (prendre 7 comme valeur
par défaut).
L'événement onClick du bouton, tout comme l'événement onChange du champ de texte doit
provoquer l'exécution de la fonction table_mult(N).
La table de multiplication sera affichée dans une zone de texte multiligne, nommée "resultat".
Voici un exemple de réalisation :
Table de
multiplication par N
7
Exercice 4 : événements onMouseOver et URL JavaScript: sur un hyperlien
Quand l'utilisateur passe la souris sur un hyperlien (peu importe sa nature, texte ou
image, et son effet) il doit faire afficher un message qui l'invite à cliquer sur le lien.
Ce texte disparaît quand la souris quitte le lien.
Quand il clique sur le lien, une boite de message alert() apparaît.
Voici un exemple de réalisation
Exercice 5 : événement onChange sur un champ de texte
Ecrire un programme JS pour contrôler la saisie d'un composant texte, qui doit contenir une
adresse e-mail. La chaîne doit être de la forme chaine1@chaine2.chaine3
MI: JavaScript 41/60 Hatem Sandid
Les objets du navigateur
La hiérarchie des objets JavaScript
Voici la hiérarchie de toutes les classes d'objets gérés par le Navigateur
navigator
window
|
+ --parent, frames[], self, top
|
+ --location
|
+ --history
|
+ --document
|
+ --forms[]
| |
| elements[] (text, textarea, checkbox, password
| radio, select, button, submit, reset)
+ --links[]
|
+ --images[]
|
+ --URL
Les classes de base du navigateur
Les objets de ces classes sont automatiquement instanciés à chaque étape du
fonctionnement du navigateur, par exemple lors de l'ouverture d'une fenêtre ou de
frames, la création des documents contenus dans chaque fenêtre ou frame, et les divers
éléments (formulaires, images, liens ...) contenus dans chaque élément.
Les applications JavaScript peuvent alors dialoguer avec ces objets visuels et les
manipuler.
Le programmeur peut ainsi agir sur l'état du navigateur, de ses fenêtres et des
documents et des composants qui y sont inclus.
Remarque
Mais attention, cette hiérarchie d'objets n'a rien à voir avec la notion d'héritage : les
objets "descendants" ne sont considérés que comme des propriétés particulière de
l'objet "ancêtre".
Ainsi, un objet document n'est pas un objet window particulier, mais une propriété de
window, qui est elle-même un objet doté de propriétés et de méthodes ...
Objets fondamentaux
o navigator : c'est le logiciel client dont le nom est noté dans
[Link]
o window : l'objet de plus haut niveau créé par le navigateur, c'est sa fenêtre.
o location : c'est l'objet URL de la fenêtre courante.
o history : ce sont les URL précédemment visitées.
o document : il s'agit du document courant, dont les propriétés sontle titre, les
couleurs (fond, texte, lien ...), les formulaires, les images etc..
MI: JavaScript 42/60 Hatem Sandid
Accéder aux propriétés d'un objet
Une propriété est une donnée qui décrit un objet.
Pour désigner complètement et correctement un objet, il faut faire précéder son nom
de la suite des noms des objets qui le contiennent (en respectant la hiérarchie des
objets); cette liste doit être séparée par l'opérateur . (point).
Comme la couleur de fond est la propriété bgColor de l'objet document, pour mettre
le fond en bleu on écrira
[Link] = 'blue' ;
Pour la page HTML courante, nous avons les propriétés suivantes :
Propriétés de l'objet WINDOW
o Protocole utilisé : [Link] = http:
o URL : [Link] = [Link]
[Link]/util/programmation/javascript/Jour3/[Link]
o Message de la barre d'état : [Link] = Voici les objets construits
par le navigateur
Propriétés de l'objet DOCUMENT
o Titre du document : [Link] = Cours JavaScript
o Couleur du texte : [Link] = #000000
o Couleur du fond : [Link] = #f1f1f1
La classe navigator
Cette classe ne contient qu'un seul objet, appelé navigator, qui est créé au démarrage du
logiciel.
Voici l'ensemble de ses propriétés, avec leur valeur, pour le navigateur actuel.
[Link] = Mozilla/4.7 [fr] (Win95; I)
informations générales envoyées au serveur HTTP à chaque requête du
navigateur
[Link] = Mozilla
nom de code
[Link] = 4.7 [fr] (Win95; I)
informations sur la plate-forme d'exécution
[Link] = Netscape
[Link] = fr
[Link] = Win32
type de machine
[Link] = France policy
[Link] = [object PluginArray]
tableau des plug-ins installés
[Link] = [object MimeTypeArray]
tableau des types mimes (voir
Edition/préférences/navigator/applications
Exemples d'utilisation
1. Il est nécessaire de tester le navigateur "client", pour pouvoir adapter le code si
nécessaire aux 2 navigateurs Netscape et Explorer.
Par exemple, voici un script qui renverrait à la page précédente s'il ne décèle pas
Netscape.
MI: JavaScript 43/60 Hatem Sandid
2. if ([Link] !='Netscape')
3. [Link]();
4. else
5. [Link]('Vous avez fait le bon choix !')
6. Tout aussi important est la nécessité de savoir si le navigateur posséde un plug-in,
module externe, pour interpréter certains types de fichiers comme les fichiers sons,
vidéos, pdf ..
Exemple :
tester si le navigateur peut interpréter du code Shockwave, avant de lui envoyer un
fichier.
Pour cela on interroge le tableau plugins[], propriété de navigator : posséde t-il un
élément indexé par 'Shockwave' ?
7. if ([Link]['Shockwave'])
8. [Link]('<EMBED NAME="acte_1" SRC="acte_1.swf"
9. WIDTH="100%" HEIGHT="100%" ALIGN="LEFT" QUALITY="high"
SALIGN="lT"> ');
10. else
11. [Link]('Désolé, votre navigateur ne sait pas afficher
Shockwave');
La classe WINDOW de JavaScript
Présentation
Il s'agit de la classe située au sommet de la hiérarchie.
De façon générale, comme tout se déroule dans une fenêtre du navigateur, le nom de la
fenêtre est implicite, le préfixe window. peut être omis pour désigner un objet ou une méthode
de la fenêtre courante (sauf dans un gestionnaire d'événement dont l'objet courant étant un
document, il faut préciser la fenêtre de ce document).
Bien entendu si la propriété ou la méthode s'adresse à une fenêtre définie par la programmeur
à l'aide de la méthode open(), il faut préfixer par son nom.
Voici les principales propriétés et méthodes
Propriétés simples
defaultStatus : représente le message de défaut qui sera affiché dans la barre de
statut
<body onLoad="defaultStatus='Bonjour à tous'">
status est un message affiché dans la barre de statut de la fenêtre.
[Link]="N\'oubliez pas de fermer vos fenêtres !"
length représente le nombre de cadres dans la fenêtre parente (0 sinon).
name représente le nom de la fenêtre
opener spécifie le nom de la fenêtre parent, qui l'a créée dynamiquement, avec
open().
parent est le nom de la frame où se trouve éventuellement la fenêtre
self est un synonyme pour le nom de la fenêtre et fait référence à la fenêtre courante
top fait référence à la fenêtre principale du navigateur.
MI: JavaScript 44/60 Hatem Sandid
window est un synonyme pour la fenêtre courante
closed booléen qui indique si la fenêtre a été fermée.
utilisation : if (! [Link]) [Link]();
Propriétés objets
Ces propriétés sont en fait elle-même des objets dotées de propriétés et de méthodes
document c'est le document HTML étudié
history liste des documents chargés dans la fenêtre (simule l'action des boutons
suivant et précédent)
o [Link]() : document précédent
o [Link]() : le suivant
o [Link](n) : recharge le document situé à n étapes du présent document (n
est de signe qcq)
location
o [Link] : chaine contenant l'url
o [Link] : partie de l'url après # (lien interne)
o [Link] : nom serveur et port
o [Link] : http, ftp, javascript, ..
o [Link]() : recharge le document courant = [Link](0)
o [Link](url)
frames[] est un tableau représentant tous les cadres dans une fenêtre Les fenêtres-
cadres peuvent être nommées au moment de leur définition par un nom, sinon on peut
les référencer par frames[index]
Méthodes de gestion d'objets fenêtres
Avec open()et close(), le programmeur dispose de moyens très souples avec les gestionnaires
d'événements, d'ouvrir et de fermer des fenêtres auxiliaires.
nomFenetre =open("URL","nom_fenetre", "options"); ouvre une nouvelle fenêtre
"URL" est l'adresse du document à charger dans la nouvelle fenêtre.
"nom_fenetre" est le nom de la fenêtre, à donner à l'attribut TARGET des balises
<FORM> ou <A>
"options" est une liste d'éléments optionnels qui précisent l'aspect de la fenêtre.
On utilise ensuite nomFenetre pour faire référence à un objet ou une propriété de la
nouvelle fenêtre.
Par exemple, pour écrire dans le composant message du formulaire formu situé dans
le document de la fenêtre fen, créee par fen=open(...), on écrit :
[Link]= "...";
Paramètres de la partie OPTIONS
On peut contrôler l'apparence de la nouvelle fenêtre à l'aide du 3ème paramètre de la méthode
open() qui accepte une liste d'options séparées par des virgules
barre d'outils toolbar[=yes|no] | [=1|0]
MI: JavaScript 45/60 Hatem Sandid
url visible location[=yes|no] | [=1|0]
répertoire ? directories[=yes|no] | [=1|0]
barre d'état status[=yes|no] | [=1|0]
barre de menu menubar[=yes|no] | [=1|0]
barre de défilement scrollbars[=yes|no] | [=1|0]
Redimensionnement resizable[=yes|no] | [=1|0]
visibilité permanente ? alwaysRaised[=yes|no] | [=1|0]
fermée avec la fen. parente dependant[=yes|no] | [=1|0]
Hauteur height= dimension en pixels
Largeur width= dimension en pixels
positionnement X screenX = nb pixels
positionnement Y screenY = nb pixels
Autres méthodes de window
alert(), prompt() et confirm(), ont déjà été utilisées
nb= prompt('Donner un nombre : ', 7)
if (isNaN(nb)) alert( nb+" n\'est pas un entier !");
méthodes focus(), blur() qui active ou désactive la fenêtre
moveBy(dx, dy)) déplace la fenêtre par translation et moveTo(x,y) déplace le coin
gauche, haut au point (x, y).
resizeBy(dl, dh) et resizeTo(l, h) jouent des rôles analogues, quant à la taille
de la fenêtre.
les méthodes de temporisation setTimeout() et clearTimeout() (voir plus loin)
Exemples de base
Apprenons à utiliser les méthodes open(), et close()
Exemple 1 : ouvrir
La fonction OuvrirFenetre(), déclenchée par l'événement onClick sur le bouton, utilise la
fonction open() pour ouvrir une nouvelle fenêtre, nommée fen1
<SCRIPT>
var hauteur=200; // hauteur de la fenêtre à créer
var largeur=500;
options="width="+largeur+",height="+hauteur+"toolbar=yes,
directories=no, menubar=no,scrollbars=yes,status=yes";
function OuvrirFenetre1() {
fen1 =open("","Nouvelle_fenetre1",options);
}
</SCRIPT>
<form>
Pour créer une fenêtre "enfant", cliquer sur ce bouton :
<INPUT type =Button value="Nouvelle fenêtre 1"
MI: JavaScript 46/60 Hatem Sandid
onClick="OuvrirFenetre1()">
</form>
Exemple 3 : afficher un document dans une fenêtre
Chargement d'un document à la création d'une nouvelle fenêtre
Cet exemple est semblable au précédent, à la différence que le fichier [Link],
passée en 1er paramètre de OPEN(), va être affichée dans le document dela nouvelle fenêtre.
function OuvrirFenetre2() {
fen2 =open("[Link]","Nouvelle_fenetre",options);
// les 2 lignes suivantes sont équivalentes
fen2 =open("","Nouvelle_fenetre",options);
[Link]="[Link]";
}
Pour vérifier :
Ecriture dans la nouvelle fenêtre après sa création
Supposons avoir créé une fenêtre vide, nommée Fen3.
Pour écrire dans cette fenêtre, il suffit de passer une chaine de caractères à la méthode
[Link] de Fen3 : [Link]("texte").
Attention ! message ne sera effectivement affiché dans Fen3, que s'il est impérativement suivi
de code comme <BR> ou si le document (pas la fenêtre) est fermé [Link]();
function EcrireFenetre3(message) {
fen3 =open("","Nouvelle_fenetre",options);
if (message !="")
[Link](message+"</BR>");
else
alert ("message vide !");
}
<FORM>
Ecrire un court texte dans le champ de saisie ci-dessous
<TEXTAREA NAME="zone" ROWS=8 COLS=55 VALUE="" WRAP="PHYSICAL">
Je suis très fier de ma nouvelle fenêtre !
</TEXTAREA>
puis le faire afficher dans <TT>MaFenêtre </TT>
en cliquant sur :
<INPUT type =Button name="Ecrire" value="Ecrire"
onClick="EcrireFenetre3([Link])">
</FORM>
Ecrire un court texte dans le champ de saisie ci-dessous
Je suis très fier de ma nouvelle fenêtre !
puis le faire afficher dans la fenêtre en cliquant sur :
Exemple 4 : charger un document en ligne
<script>
function fermer() {
if (fen1 !=null) [Link]();
if (fen2 !=null) [Link]();
MI: JavaScript 47/60 Hatem Sandid
}
function Connexion(moteur) {
if (moteur==1) {
fen1=open("","YAHOO",opts);
[Link]();
[Link]='[Link]
}
else {
fen2=open("","NOMADE",opts);
[Link]();
[Link]='[Link]
}
}
<form>
<input type=button value="Connexion à Yahoo" onClick="Connexion(1)">
<input type=button value="Connexion à Nomade" onClick="Connexion(2)">
<INPUT type =Button value="Fermer" onClick="fermer()">
</form>
Pour tester :
Méthodes de temporisation setTimeout() et clearTimeout()
La méthode (de l'objet Window) setTimeout() déclenche un miniteur, un compte à
rebours au bout duquel un expresion JS passée en 1er paramètre sera exécutée; le
temps d'attente est passé eb 2ème paramètre.
Syntaxe : TimeoutID=setTimeout(expression, ms)
o expression : c'est une chaîne de caractères contenant la formule de calcul ou le
nom de la fonction appelée à l'issue du délai. Cette action n’est exécutée
qu’une seule fois.
o ms : est une valeur numérique entière, exprimée en millisecondes.
o TimeoutID est un identificateur qui est utilisé seulement pour annuler
l’évaluation avec la méthode "clearTimeout()".
La méthode clearTimeout(TimeoutID) annule le minuteur avant sa fin. Surtout
utilisé pour arrêter des appels récursifs d’une fonction passée dans setTimeout()
Exemple simple
<HTML><HEAD>
<script>
var w, id
function ouvrir() {
w=open("","Essai","width=50,height=100,resizable=1,scrollbars=1")
}
function essai() {
[Link]();
[Link]("bonjour<BR>")
id= setTimeout ("essai()",1000)
}
function arreter() {
clearTimeout(id);
[Link]();
}
</script></HEAD>
<BODY>
<form>
MI: JavaScript 48/60 Hatem Sandid
<INPUT type =Button value="Démarrer" onClick="ouvrir();essai()">
<INPUT type =Button value="Arrêter" onClick="if (w != null)
arreter()">
<INPUT type =Button value="Fermer" onClick="if (w != null)
[Link]()">
</form>
Connaitre les propriétés de window
function propriétés(objet, nom) {
var texte = "";
for (var i in objet )
texte +=nom."i"+i+" " +objet[i] +"<br>;
return texte
}
[Link]("<HR>Propriétés <BR>"+
propriétés(document,"document")+"<HR>")
La classe document
La hiérarchie de la classe document
Un document HTML peut contenir diverses balises d'insertion d'images, de
formulaires, d'hyperliens, etc .. qui sont autant d'objet du point de vue du navigateur.
JavaScript les classe dans des tableaux d'objets au fur et à mesure, dans l'ordre de leur
apparition dans le document. Chaque objet peut posséder des propriétés et des
méthodes.
Par exemple, soit le 1er formulaire déclarée par <FORM NAME="formu">
On pourra le nommer aussi bien par [Link] que par [Link][0]
De même images[2] est la 3ème image insérée, grâce à une balise <IMG SRC=..>
Autre exemple :
Soit un champ de texte nommé lycee. Il a été défini dans le formulaire nommé formu
par
<INPUT type="text" name="lycee" value="" size=15>
Pour changer le texte on écrira : [Link]="J-Feyder";
Le programmeur JS peut avoir accès en lecture à ces tableaux.
Leur taille est obtenu avec la propriété length; ainsi [Link] est le nombre de
formulaires inclus dans le document.
En voici la liste, et les balises correspondantes :
o anchors[] tableau des liens internes <A NAME= ...>
o applets[] tableau des applets <APPLET CODE=...>
o embeds[] tableau des objets insérés <EMBED SRC=..>
o forms[] tableau des formulaires <FORM >
o elements[] tableau des composants du formulaire <INPUT ..>, <SELECT
..>, ..
o images[] tableau des images <IMG SRC=...>
o links[] tableau des liens hypertextes <A HREF= ...>
MI: JavaScript 49/60 Hatem Sandid
Un exemple concret
Soit le code d'une page d'accueil :
(Source Stefan Koch [Link]
[Link]/~skoch/js/[Link])
<html><head><title>My homepage</title></head>
<body bgcolor=#ffffff>
<center><img src="[Link]" name="image1" width=200 height=100></center>
<p>
<form name="formu">
Name: <input type="text" name="nom" value=""><br>
e-Mail: <input type="text" name="email" value=""><p>
<input type="button" value="Push me" name="bouton"
onClick="alert('Salut')">
</form>
<p><center><img src="[Link]" name="image4" width=300 height=15>
<p><a href="[Link] homepage</a>
</center></body></html>
Voici son aspect
Dans cet objet-window, cet objet-document posséde en tout 2 images, un lien et un formulaire
contenant 2 champs de texte et un bouton
Le contenu saisi dans le 2ème champ de texte peut être obtenu par :
var mail = [Link][0].elements[1].value ou
var mail = [Link];
MI: JavaScript 50/60 Hatem Sandid
Voici la hiérarchie des objets construits par JS sur ce document
Principales propriétés
Voici leur valeur pour le présent document :
Titre du document : [Link] = Cours JavaScript
Couleur du texte : [Link] = #000000
Couleur du fond : [Link] = #f1f1f1
Couleur de liens : [Link] = #0000a0
Couleur de liens visités : [Link] = #cc3366
Couleur de liens activés : [Link] = #cc3366
Adresse du document : [Link] = [Link]
[Link]/util/programmation/javascript/Jour3/[Link]
Date de dernière modification : [Link] = 12/26/2001 18:26:10
Le cookie du document : [Link] =
Principales méthodes
write(ch1, ch2, ..) affiche les chaines ou des arguments traduits en chaines.
open() crée un nouveau document, ne pas confondre avec la création d'une fenêtre !
close() ferme le document, impossible d'y ajouter alors du texte.
getSelection() donne le texte sélectionné
Traitements des images en JS
Rappels HTML
la balise <IMG NAME= .. SRC="URL" WIDTH=.. HEIGHT=.. ALIGN= ..>
URL est l'adresse internet (en général relative) du fichier image à charger (.gif ou .jpg)
l'alignement de l'image par rapport au texte voisin est réglé par l'attribut align
une image peut servir d'ancre pour un hyperlien
le navigateur classe les images insérées dans le document dans un tableau images[]
MI: JavaScript 51/60 Hatem Sandid
L'objet Image
Il fait partie des objets (ou plutôt des classes d'objets) prédéfinies du langage (à partir de la
version 1.2). Contrairement à l'usage de la balise IMG, on peut précharger l'image et la
stocker en cache (mémoire+disque) dans un objet de type Image, avant de l'afficher.
Contructeur Image()
Il s'agit d'une fonction spéciale sans paramètre qui sert à créer un objet.
var monImage = new Image()
Propriétés
Elles correspondent aux attributs de la balise <IMG>
name, src, lowsrc, height, width, border, hspace, vspace ..
La propriété la plus importante, src permet de charger le fichier image à partir d'une
URL et de le stocker dans l'objet.
var monImage = new Image();
[Link] = "[Link]";
Mais l'image n'est pas affichée. Elle pourra l'être dans une balise <IMG>
<IMG SRC=...>
De plus, malheureusement, les propriétés height et width ne sont pas modifiables
Exemples de manipulations d'images
Evénements onMouse
Soit une hyper-image nommée img (une image qui sert d'ancre à un lien interne ou externe).
Lorsque l'utilisateur promène sa souris sur une telle image, il provoque un événement
onMouseOver qui doit changer la source de l'image.
Lorsqu'il la quitte, l'événement onMouseOut est provoqué et l'image permanente sera de
nouveau affichée
Indication : affecter directement les gestionnaires d'événements par l'instruction
[Link]='fichier-image'.
Solution proposée
<BODY>
<A HREF="javascript:void(0)"
onMouseOver="[Link]='../images/[Link]'
"
onMouseOut="[Link]='../images/[Link]'
">
<IMG NAME="img" WIDTH=60 HEIGHT=61
BORDER=0
SRC="../images/[Link]"></A>
..........
</BODY>
MI: JavaScript 52/60 Hatem Sandid
Cliquer pour changer d'image
Solution proposée
<script langage="JavaScript1.2">
var tab_image = new Array(5);
for (var i=0; i< tab_image.length;i++)
tab_image[i]= new Image();
tab_image[0].src='../images/[Link]';
tab_image[1].src='../images/[Link]';
tab_image[2].src='../images/roses [Link]';
tab_image[3].src='../images/roses [Link]'; Evénements onClick sur un
tab_image[4].src='../images/[Link]'; lien-image
var n=0;
function change() {
n= ++n;
if (n == tab_image.length) n=0;
[Link]=tab_image[n].src;
}
</script>
</HEAD>
<BODY>
<H4>Evénements onClick sur un lien-image</H4> Cliquer pour changer d'image
<A HREF="JavaScript:change()">
<IMG NAME="image" WIDTH=200 HEIGHT=150
SRC="../images/[Link]">
Cliquer pour changer d'image
</A>
Défilement contrôlé d'images
Description
Ici le changement d'image n'est pas lié au déclenchement d'un événement provoqué par
l'utilisateur (onMouseOver ci-dessus), mais est automatiquement démarré au chargement de
l'image initiale par la balise IMG, grâce à l'événement onLoad qui appelle la fonction
anime().
Celle-ci se charge de changer la valeur de la propriété src donc de provoquer aussitôt
l'affichage d'une autre image.
Plus précisément :
création d'une variable-objet de type image : var monImage = new Image();
le chargement d'une image s'effectue dans le cache, sans affichage immédiat (comme
c'est le cas avec la balise IMG) : [Link] = "../images/[Link]"
L'URL de l'image est spécifiée comme valeur de la propriété src
MI: JavaScript 53/60 Hatem Sandid
Exemple de code
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
d = 100 ;
n = 0 ;
var im = new Array(10) ;
function init(){
for (var i=0; i<[Link];i++){
im[i] = new Image();
im[i].src= "../images/"+i+".gif" ;
} Exemple de réalisation
}
function anime() {
[Link]= im[n].src ;
n++;
if (n == [Link]) n=0;
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<IMG SRC="[Link]" NAME="monImage"
BORDER=0 WIDTH=58 HEIGHT=76
onLoad="setTimeout('anime()',d)">
</BODY>
MI: JavaScript 54/60 Hatem Sandid
Programmation multi-cadres
Rappels HTML
La balise <FRAMESET> est une directive de partage de la fenêtre initiale du
navigateur en sous-fenêtres
Les documents Elle remplace la balise <BODY>
Chaque balise décrivant chaque "frame", cadre est <FRAME>
Chaque document est décrit par
Un exemple
Divisons la fenêtre en deux colonnes principales d'égales largeurs. Ensuite, la colonne de
droite est elle-même divisée en 3 rangées d'égales hauteurs.
code représentation
[Link]
...
<FRAMESET COLS="50%,50%">
<FRAME SRC="[Link]"> [Link] [Link]
<FRAMESET ROWS="33%,33%,33%">
<FRAME SRC="[Link]">
[Link]
<FRAME SRC="[Link]">
<FRAME SRC="[Link]">
</FRAMESET>
</FRAMESET> Bien sûr, dans les 4 cadres, ce sont les
contenus des 4 documents [Link] ,
[Link]...etc.. qui seront affichés.
Les principales balises
1. <FRAMESET > </FRAMESET>
<FRAMESET ROWS=description-partage-rangées COLS= description-partage-
colonnes
Cette balise commande la division de la fenêtre du navigateur en plusieurs fenêtres
juxtaposées et indépendantes.
o Les paramètres ROWS et COLS permettent de partager une zone en plusieurs
fenêtres disposées (respectivement) horizontales OU verticales.
o Ils sont suivis d'une liste de valeurs, séparées par des virgules, qui détermine le
fractionnement de la fenêtre, soit en hauteur (pour ROWS), soit en largeur
(pour COLS). Le plus souvent, ces valeurs sont exprimées pourcentage de
l'espace disponible.
o Quelques exemples
ROWS= "30%, 70% " signifie un partage en 2 rangées dont les hauteurs sont
les 30% et 70% de la hauteur disponible dans la fenêtre.
ROWS= "30%, 50%, * " signifie un partage en 3 rangées de hauteur (de haut
en bas) 30%, 50% et le reste, indiqué par * (c'est-à-dire ici 20 %).
COLS = "150, * , * " signifie un partage de la largeur disponible en 3 colonnes
MI: JavaScript 55/60 Hatem Sandid
: celle de gauche mesurera 150 pixels exactement en largeur, et les 2 autres
auront la même largeur en se partageant le reste de l'espace disponible.
COLS = " *, * , *, * " provoque un partage de la largeur disponible en 4
colonnes de même largeur.
COLS = "10%, * , 2 * " signifie un partage en 3 colonnes de largeurs 10%,
30% et 60 %.
2. <FRAME .. >
<FRAME SCR = "[Link] " NAME=nom-cadre ... > </ FRAME>
o SRC définit le contenu du cadre. Il faut y indiquer le nom du fichier HTML à
charger dans le cadre, éventuellement sous forme d'URL pour un fichier non
local
o NAME = "nom du cadre", indispensable pour JS
o SCROLLING = "yes" | "no" | "auto" impose ou non la présence de barre de
défilement.
Si on choisit SCROLLING = "auto" , les barres de défilement apparaîtront en
cas de besoin.
o NORESIZE interdit la modification de la taille par l'utilisateur (par défaut, tous
les cadres sont modifiables.
L'attribut target dans les hyperliens
En l'absence d'indication complémentaire, une marque habituelle d'hyperlien <A
HREF="URL" > .... </A>, placée dans un cadre commandera l'affichage de ce
document à l'intérieur du cadre même.
Si l'hyperlien doit provoquer l'affichage dans un autre cadre, il faut préciser le nom du
cadre de destination, indiqué comme valeur du paramètre TARGET
Ainsi : <A HREF=" [Link]" TARGET = "cadre3" >voir ce document </A>
affichera le document [Link] dans le cadre nommé cadre3.
Pour adresser le document au cadre parent TARGET = "_parent" et pour revenir à la
fenêtre complète, indiquer TARGET = "_top"
Petit exemple :
code représentation
<- extrait document principal ->
avant activation
<FRAMESET COLS="50%,50%">
<FRAME SRC="[Link]"
name="cadre1">
et voici mon
<FRAMESET ROWS=" 30% , * " > chat
<FRAME SRC="[Link]"
name="cadre2">
<FRAME SRC="[Link]" Ma page Cliquez vite
name="cadre3"> personnelle dans le
</FRAMESET> cadre
</FRAMESET> au dessus,
pour
<- extrait document [Link] -> admirer ...
MI: JavaScript 56/60 Hatem Sandid
<A HREF="[Link]" TARGET =
"cadre3" >
et voici mon chat</A>
après activation du lien
<- extrait document [Link] -> et voici mon
chat
<PRE>
<font size=-1> Ma page
Cliquez vite
dans le cadre
personnelle
au dessus,
pour admirer ...
</font>
</PRE>
Gestion des cadres en JS
L'objet frames[]
Le navigateur crée un tableau frames, dont les éléments frames[x], x=0,1,, où 0,1,
2 est l'ordre d'introduction des cadres dans le fichier "parent". sont les cadres rangés
dans leur ordre de déclaration. Le nombre de cadres est alors accessible par
[Link]
On peut ainsi nommer les cadres par frames[i] ou par leur nom. La référence
complète pour utiliser les propriétés et les méthodes des objets situés d'un cadre, est :
o [Link]été
o [Link][num].objet.méthode()
Mais comment faire référence à une objet inclus dans un cadre à partir de code situé
dans le document d'un autre cadre ?
Les propriétés self, parent, top font référence respectivement au cadre courant,
au cadre parent et à la fenêtre d'origine, ou au cadre partagé, dans le cas d'imbrication.
Exemples :
o Pour afficher "Bonjour !" dans la zone de texte nommée message, située dans
le formulaire formu du document du cadre nommé cadre_bas :
parent.cadre_bas.[Link]= "Bonjour !"
o Pour afficher l'image N°4, déjà chargée en mémoire dans un tableau d'images
du document courant, dans le 2ème cadre :
[Link][1].[Link]= tabImages[3].src
Gestion des liens
On sait que l'objet documents posséde une propriété-tableau links[] qui rassemble
tous les liens du document.
Sa propriété target correspond à l'attribut target de la balise <A HREF=url ..>
Exemples
o Envoyer le document référencé par le lien dans le cadre nommé cadre_haut
[Link][1].target = "cadre_haut"
o Afficher le document (ou l'image) dans la fenetre nommée maFenetre
[Link] = open("[Link]","maFenetre", options);
[Link][0].target = "maFenetre";
MI: JavaScript 57/60 Hatem Sandid
Gérer les cookies en JS
Pourquoi les cookies ?
On peut définir les cookies comme la "mémoire du WEB".
Ils constituent la seule façon de s'affranchir de l'impossibilité d'écrire sur le disque du
navigateur client (on rappelle que JavaScript ne possède pas d'instructions d'entrées-
sorties fichiers).
Le mécanisme de pose de "cookies" a été imaginé pour permettre au moins à un
serveur de retrouver certains résultats de sa consultation précédente du client.
Pour cela, le serveur écrit sur le disque client quelques informations qu'il pourra
chercher et réexaminer lors d'une prochaine visite du même "client".
Ces renseignements sont stockés sous forme de chaîne de caractères, dans un seul
fichier au format texte, appelé [Link] par Netscape.
Et ils restent stockés, à l'insu de l'utilisateur client le plus souvent pendant toute leur
durée de vie, le "risque" dans ce dispositif étant l'effacement du fichier [Link] !
Observations
Vérifier le paramètre suivant de votre navigateur
Menu Edition/Préférences/Avancées/, activer :
"accepter uniquement les cookies qui seront renvoyés à leur serveur d'origine"
"M'avertir avant d'accepter un cookie"
La présente page abrite un cookie, à des fins de démonstration, nommé
CompterPassageCoursCookie.
Il contient seulement la chaîne de caractères CompterPassageCoursCookie = n, où n
est un entier qui compte le nombre de chargements de la présente page, par la même
machine cliente.
Recharger la page. A chaque fois on reçoit une demande du navigateur.
Lisez bien ce message : il contient
o exactement la chaîne qui sera stockée et qui constitue le cookie
o sa date de fraîcheur
o il sollicite votre décision : l'acceptez vous ?
Comment le cookie CompterLesPassages a t-il été noté ?
Ouvrir le fichier Program Files/Netscape/Users/default/[Link]
On y trouve une 1ère ligne du genre
FALSE /D|/javascript/Jour4 FALSE 959810400
CompterPassageCoursCookie 4
MI: JavaScript 58/60 Hatem Sandid
Enregistrement d'un cookie
Durant la session Web, chaque cookie est conservé en mémoire, il y a écriture sur disque à la
fermeture du navigateur. L'écriture s'effectue sur instruction du serveur utilisant la directive
HTTP suivante (incluse dans l'en-tête)
Set-Cookie
nom=valeur; [expires =date; path= chemin-client; domain= nom-domaine;
secure]
Seul le 1er champ, le nom identifiant le cookie et sa valeur (chaine de caractères
stockée) sont obligatoires.
date est la date d'expiration, au delà de laquelle le cookie sera supprimé du fichier
chemin nom du rép. serveur
nom-domaine nom du domaine Internet dans lequel le cookie peut être traité, les autres
serveurs devant l'ignorer
secure le cookie ne peut être consulté qu'au cours d'un échange sécurisé.
Ecrire un cookie
Voici le code gérant le cookie CompterPassageCoursCookie
<SCRIPT LANGUAGE="JavaScript">
// la date d'expiration
var futur = new Date(2005,1,1);
function CompterLesPassages () {
// fonction pour mettre en évidence le cookie
n = RechercherLeCookie("CompterPassageCoursCookie");
opts="width=200,height=20,,screenX=400,screenY=10"
fen = open("", "Delicious_Cookies",opts);
[Link]("Page chargée "+ n + " fois !<P>
Vous reprendrez bien un de ces délicieux cookies ...");
[Link]();
id=setTimeout("[Link]();MiseAJourCookie (n);",2000);
}
function MiseAJourCookie (nb) {
// fonction de mise à jour du cookie
nb = eval(nb) + 1;
[Link] = "CompterPassageCoursCookie=" + nb + ";
expires=" + [Link]();
}
function RechercherLeCookie (unArgument) {
// recherche de notre cookie dans la chaine gérée par le navigateur
// cette chaine est une propriété de l'objet document
var chaine = [Link] ;
unArgument = unArgument + "=";
var longueur = [Link] ;
var resultat;
if([Link] > 0) {
debut = [Link]( unArgument , 0 );
if (debut >= 0) {
fin = [Link]( ";" , debut+longueur );
if (fin >= 0)
resultat = unescape([Link](debut+longueur,fin));
MI: JavaScript 59/60 Hatem Sandid
else
resultat =
unescape([Link](debut+longueur,[Link]));
}
else resultat = 0;
}
else resultat = 0;
return resultat;
}
Supprimer un cookie
Comment supprimer notre cookie CompterPassageCoursCookie ? La méthode la plus simple
consiste à le réenregistrer en lui attribuant une date d'expiration dépassée !
<SCRIPT LANGUAGE="JavaScript">
// la date est dépassée !
var date = new Date(1999,0,1);
function EffacerCookie() {
//nom est le nom du cookie
[Link] = "CompterPassageCoursCookie=" + ";expires=" +
[Link]();
}
Exercice
Dans une page [Link], lors de sa première visite, on demande à l'utilisateur sa
couleur préférée, dans une liste incluse dans la page [Link], on change
alors en conséquence la couleur de fond du présent document.
Un cookie, nommé couleur_du_fond est alors noté avec pour valeur le nom de la
couleur choisie, il sera alors facile de la retrouver ... et de l'offrir au "client" lorsqu'il
reviendra sur la même page !
MI: JavaScript 60/60 Hatem Sandid
Vous aimerez peut-être aussi
- Création d'un Formulaire HTML et CSSPas encore d'évaluationCréation d'un Formulaire HTML et CSS16 pages
- Encodage de Factures avec HTML et CSSPas encore d'évaluationEncodage de Factures avec HTML et CSS3 pages
- Contrôles JavaScript pour FormulairesPas encore d'évaluationContrôles JavaScript pour Formulaires2 pages
- Guide des balises HTML essentiellesPas encore d'évaluationGuide des balises HTML essentielles8 pages
- Formulaire HTML : Guide et ExemplesPas encore d'évaluationFormulaire HTML : Guide et Exemples12 pages
- Introduction à JavaScript et événementsPas encore d'évaluationIntroduction à JavaScript et événements14 pages
- Manipulation des Objets Date et String en JS100% (1)Manipulation des Objets Date et String en JS3 pages
- TP2 JavaScript : Structures conditionnellesPas encore d'évaluationTP2 JavaScript : Structures conditionnelles5 pages
- Présentation des Bases de Données 2023Pas encore d'évaluationPrésentation des Bases de Données 202367 pages
- Exercices de JavaScript pour débutantsPas encore d'évaluationExercices de JavaScript pour débutants2 pages
- Correction Exercices Les Formulaires en HTML Série 01 - ApcpedagogiePas encore d'évaluationCorrection Exercices Les Formulaires en HTML Série 01 - Apcpedagogie1 page
- Examen HTML et CSS - Bac Blanc 2025Pas encore d'évaluationExamen HTML et CSS - Bac Blanc 202513 pages
- Introduction aux systèmes d'exploitationPas encore d'évaluationIntroduction aux systèmes d'exploitation4 pages
- Création d'un site web éducatif HTML/CSSPas encore d'évaluationCréation d'un site web éducatif HTML/CSS1 page
- Introduction à HTML, CSS & BootstrapPas encore d'évaluationIntroduction à HTML, CSS & Bootstrap102 pages
- Évaluation de JavaScript : Division et CalculsPas encore d'évaluationÉvaluation de JavaScript : Division et Calculs1 page
- Introduction à JavaScript et ses objetsPas encore d'évaluationIntroduction à JavaScript et ses objets11 pages
- Introduction à JavaScript et ses fonctionnalitésPas encore d'évaluationIntroduction à JavaScript et ses fonctionnalités79 pages
- Introduction à JavaScript et ses basesPas encore d'évaluationIntroduction à JavaScript et ses bases37 pages
- Introduction au langage C et ses basesPas encore d'évaluationIntroduction au langage C et ses bases59 pages
- Fonctions trigonométriques et hyperboliques100% (1)Fonctions trigonométriques et hyperboliques2 pages
- Manipulations graphiques des fonctions mathématiquesPas encore d'évaluationManipulations graphiques des fonctions mathématiques23 pages
- Système d'Information Géographique INF264Pas encore d'évaluationSystème d'Information Géographique INF26413 pages
- Méthode du Simplexe et Points AnguleuxPas encore d'évaluationMéthode du Simplexe et Points Anguleux7 pages
- Examen de mathématiques 2008 - Université de ToursPas encore d'évaluationExamen de mathématiques 2008 - Université de Tours4 pages
- Devoir 2BAC SVT : Fonctions et ComplexesPas encore d'évaluationDevoir 2BAC SVT : Fonctions et Complexes2 pages
- Trinômes et systèmes linéaires en mathsPas encore d'évaluationTrinômes et systèmes linéaires en maths2 pages
- Planification des apprentissages GS 1er trimestrePas encore d'évaluationPlanification des apprentissages GS 1er trimestre1 page
- Mouvement de rotation et accélérationPas encore d'évaluationMouvement de rotation et accélération3 pages
- Convergence des séries et intégrales en analysePas encore d'évaluationConvergence des séries et intégrales en analyse1 page
- Modélisation asynchrone des systèmes industrielsPas encore d'évaluationModélisation asynchrone des systèmes industriels6 pages
- Vitesse de rotation et mouvement des mobilesPas encore d'évaluationVitesse de rotation et mouvement des mobiles2 pages
- Révision DS2 : Fonctions Affines et StatistiquesPas encore d'évaluationRévision DS2 : Fonctions Affines et Statistiques2 pages
- Règles des trois doigts en magnétismePas encore d'évaluationRègles des trois doigts en magnétisme8 pages
- Exercices sur les variables aléatoires et loi binomialePas encore d'évaluationExercices sur les variables aléatoires et loi binomiale4 pages
- Introduction à la recherche opérationnellePas encore d'évaluationIntroduction à la recherche opérationnelle18 pages
- Limites et continuité en mathématiques 2024Pas encore d'évaluationLimites et continuité en mathématiques 202412 pages
- Exercices sur les racines carrées 3ePas encore d'évaluationExercices sur les racines carrées 3e1 page
- Oscillations Électriques et MécaniquesPas encore d'évaluationOscillations Électriques et Mécaniques2 pages