0% ont trouvé ce document utile (0 vote)

203 vues85 pages

Javascript

Le document décrit les bases de la programmation JavaScript, y compris les différentes façons d'écrire du code JavaScript dans une page HTML et quand il sera exécuté. Il explique comment déclarer des fonctions JavaScript et les appeler en réponse à des événements comme des clics de bouton ou la saisie de formulaire.

Transféré par

ahmed naciri

Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.

Formats disponibles

Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

0% ont trouvé ce document utile (0 vote)

203 vues85 pages

Javascript

Transféré par

ahmed naciri

Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.

Formats disponibles

Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Vous êtes sur la page 1/ 85

‫‪www.phpmaroc.

com‬‬ ‫‪MA‬‬
‫‪…………………………………………………………………………….‬‬

‫‪AIT LAASRI M'HAND‬‬

‫‪Webmaster‬‬
‫‪http://www.phpmaroc.com‬‬

‫‪2005-2006‬‬

Retour au menu

Programmation JavaScript : généralités

Javascript est un langage de programmation très récent, créé par les sociétés Netscape et Sun
Microsystems vers la fin de l'année 1995.
Son objectif principal : introduire de l'interactivité avec les pages HTML, et effectuer des
traitements simples sur le poste de travail de l'utilisateur.
Le moyen : introduire de petits programmes, appelés SCRIPTS, dans les pages HTML.
Jusqu'ici la programmation ne pouvait être exécutée que sur le serveur. La possibilité d'inclure
des programmes dans les pages HTML et de les exécuter directement sur le poste client est
intéressante, car elle permet de décharger le serveur de ce travail et ... d'éviter les attentes des
réponses aux requêtes adressées via le Réseau.
Le code du programme est interprété par le navigateur client (qui reçoit la page). Il ne peut
pas être exécuté indépendamment, ce qui le limite comme langage de programmation,
contrairement à JAVA (à ne pas confondre !).

C'est un langage basé sur des objets, très simple et conçu, en principe, pour des non
spécialistes.
En résumé, voici ses principales caractéristiques :

• JS est un langage de programmation structurée qui concourt à enrichir le HTML, à

le rendre plus "intelligent" et interactif.
• Le code JS est intégré complètement dans le code HTML, et interprété par le
navigateur client
• JS contient des gestionnaires d'événement : il reconnaît et réagit aux demandes de
l'utilisateur, comme un clic de la souris, une validation de formulaire, etc...

Mais c'est un langage limité :

• ce n'est pas un langage de programmation à part entière, indépendant.

• c'est un langage de script, dépendant de HTML, c'est une extension de HTML. Sa
syntaxe ressemble à Java, car elle reprend celle du langage C, mais il est en fait très
différent. Java est un langage complet , compilé et complètement autonome du
langage HTML
• ce n'est pas véritablement un langage orienté objet (pas d'héritage de classe , ni de
polymorphisme ..)

Ecriture et exécution du code JS

On peut placer du code JS dans une page HTML à 3 endroits et sous des formes bien
différentes.

1. Entre les balises <SCRIPT>....</SCRIPT> dans la section d'en-tête, ou dans le

corps de la page.

Le code inclus dans la séquence <SCRIPT> est évalué au début du

o
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 apparait comme un nouvel attribut d'un composant de
formulaire
L'exécution du code est alors provoquée par appel d'une fonction JS (préalablement
déclarée) dont l'exécution constitue une réponse à l'événement.
Un événement survient à l'initiative de l'utilisateur, par exemple en cliquant sur un
bouton, ou après la saisie du texte dans un champ de formulaire.

Ecriture générale

<balise ... onEvenement="code JS" | "fonction JS">

où

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 connaitre les associations entre événements et balises
"sensibles" à ces événements.

Ici on peut voir les correspondances entre les balises et les événements

Exemple

Le code HTML suivant crée un bouton de nom "bouton1", sur lequel est écrit
"Calculer".
Quand l'utilisateur appuie sur ce bouton, l'événement onClick est déclenché et la
fonction calculer() est appelée.
Son code, déclaré dans l'en-tête est alors exécuté.

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function calculer() {
....// code.....

3. Associé au pseudo-protocole javascript: dans une URL.

Cette pseudo-URL permet de lancer l'exécution d'un script écrit en JS, au lieu d'être
une requête pour obtenir un nouveau document (comme avec les protocoles habituels
http: , ftp: )

Ecriture générale

<A HREF="JavaScript:code JS" | "appel fonction

JS">texte|image activable</A>

L'opérateur void
Pour empêcher que le code ou la fonction appelée dans l'URL JavaScript, ne
remplace le document courant, on applique l'opérateur void, qui neutralise toute
valeur ou tout effet de retour.

<A HREF="JavaScript:void( appel-fct(..) )">.....</A>

Exemple

<HTML>
<HEAD>
<SCRIPT 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.

Exemple-résumé

<html>
<head>
<script>
function saluer() {
alert("Bonjour tout le monde !");
}
</script>
</head>

<body>
<H4>Exécution immédiate</H4>
<script>
alert("Bonjour tout le monde !");
</script>
<H4>Exécution sur événement onClick</H4>
<form>
<input type="button" name="Bouton1" value="Salut"
onClick="saluer()">
</form>
<H4>Exécution sur protocole javascript:</

Retour au menu

Exercice 1 : comparaison de l'affichage de texte en HTML et en JS

Voici un source HTML qui contient un tout petit script JavaScript.

Lisez attentivement et écrivez ce que vous prévoyez à l'exécution.
<html>
<head>
<title>Mon premier script JavaScript!</title>
</head>
<body>

<H3>Ceci est un document HTML habituel.</H3>

<H3>Nous sommes de retour au code HTML habituel.</H3>

</body>
</html>
Ecrivez l'interprétation de ce source par le navigateur.
Ensuite, pour vérifier, appuyer sur le bouton :

Exercice 2 : afficher une image dans un tableau HTML

Reprendre l'exemple II du cours.

En utilisant du code JS :

• afficher une image encadrée dans un tableau HTML d'épaisseur 10

• faire suivre d'une liste non ordonnée de contenu quelconque

Exercice 4 : Itération FOR

S'inspirer de l'exemple IV du cours.

Ecrire une page pour afficher la table de multiplication par un entier N.

• Déclarer une variable entière N et lui affecter la valeur 7 par exemple

• Utiliser une instruction itérative FOR
• Améliorer la présentation en
o Encadrant les lignes affichées dans un tableau HTML
o ou en générant l'affichage sous forme de liste non ordonnée

Exercice 6 : Boite de dialogue et itération FOR

Généraliser l'exercice précédent, en s'inspirant de l'exemple VI du cours.

La valeur de la variable N dont on affichera les multiples, doit être d'abord demandée à
l'utilisateur avec la fonction prompt(). Par défaut, si l'utilisateur ne saisit rien, N vaudra 9.

Exercice 8 : Procédure avec paramètre

S'inspirer de l'exemple VIII du cours.

• Déclarer une procédure table_mult(N), qui doit calculer et afficher la table de

multiplication par N (si possible encadrée dans un tableau HTML).
• La valeur du paramètre N sera demandée à l'utilisateur au moyen d'une boite de
dialogue PROMPT, puis sera passée en paramètre dans l'appel de table_mult(N).
• Prolongement
Supprimer la demande de valeur N, et faire afficher l'ensemble des tables de
multiplication par N = 1, 2, ... 10, par des appels itératifs table_mult(i)

Exercice 9 : Fonction appelée par un événement

Utiliser la même interface graphique que dans l'exemple IX du cours. Il est même
recommandé de récupérer son code puis de l'adapter

• Le premier champ de texte attend la saisie par l'utilisateur d'un "réel" x.

• Le clic sur le bouton marqué f(x) appelle une fonction qui retourne le résultat de
l'évaluation d'une fonction mathématique, par exemple 3*x*x-2*x-1 (ou tout autre
formule de calcul à une variable).
• Ce résultat doit être affiché dans le second champ de texte.
• Prolongement
Faire saisir xmin, xmax, dx dans 3 champs de texte et faire afficher une table de
valeurs x, f(x) pour x variant par pas de dx de xmin jusqu'à xmax. L'affichage
s'effectura dans un composant <textarea>, grâce à sa propriété value, identique
à celle d'une ligne de texte .

Autres exercices

S'inspirer de l'exemple IX du cours.

• Soit à vérifier l'identité (la somme des premiers entiers impairs consécutifs est
toujours le carré d'un entier )
1 + 3 + 5 + ... + (2n-1) = n²
• Construire une fonction sommeNbImpairs(n) qui calcule la somme précédente et
retourne sa valeur.
On utilisera pour cela une boucle for dans laquelle cette somme sera
progressivement calculée. Ne pas oublier d'initialiser à 0, la variable somme.

2 Les structures de données en JavaScript

Retour au menu

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 chaines 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, document.write( ), 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.

Exemple

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';

document.write(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 ;
document.write('Voici la valeur de x : x = '+ x+ "<BR>"
);
document.write("et son type : typeof(x) = " + typeof(x)
);

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.

Eviter absolument ce qui suit (c'est compris par JS, mais peu recommandable !)

var x = 12.5;
document.write('Ici x est une variable "réelle" : x = '+
x+ "<BR>" );
x = "Bonjour !" ;
document.write("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 !

Affectation de variables

• Mécanisme de l'affectation
variable = valeur (de l'expression, de même type)
Exemple à étudier :

var a=10 ; b= 15;

document.write( " a= "+a + " ; b= "+b+"<BR>");
a = 2 * b - 5 ; // valeur de a = 2 fois la valeur de b
- 5
document.write( " a= "+a + " ; b= "+b+"<BR>");
b = a + b ; // nouvelle valeur de b = précédente
valeur de b + valeur de a
document.write( " a= "+a + " ; b= "+b);

En voici l'exécution :

a= 10 ; b= 15
a= 25 ; b= 15
a= 25 ; b= 40

Faire l'exercice 1 sur l'affectation

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.

<HEAD>
<script>
var lycee="J-Feyder";
var ville="Epinay-sur-Seine";
document.write("Mon lycée est situé dans la ville
d\'"+ville+"<BR>");
var date = new Date();
</script>
</HEAD>
</BODY>
<script>
document.write("Il porte le nom du cinéaste
"+lycee+"<BR>");
document.write("Nous sommes au mois N°",date.getMonth() +
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°4

Construction des expressions

On peut distinguer plusieurs types d'expressions :

• expressions arithmétiques : construites par opérations sur les entiers et les réels.
Principales opérations
o les 4 opérations usuelles : + , - , * , / )
o ++ (incrément) , -- (décrément)
o % (modulo ou reste par une division entière)
• expressions d'affectation (ou attribution)
o l'opérateur d'affectation : variable = expression
o autres opérateurs d'attribution : += , -= , *= , /= , %= , ++ , --
o x += 4 équivaut à x = x + 4
x ++ équivaut à x = x + 1
• expressions chaînes de caractères
o + opérateur de concaténation (mise bout à bout) de deux chaînes
o var aujourdhui = " Lundi " + 3 + " novembre" +
1997;
o document.write(aujourdhui, "<BR>" );
o += ajoute la chaîne de droite à la chaîne de gauche

var message = "Bonjour ";

message += "tout le monde !" ;

o
En voici l'exécution :

Bonjour tout le monde !

• expressions booléennes ou logiques

o opérateurs de comparaison : == (égal, même valeur) , != (différent) , > , >= ,
< , <=
o opérateurs logiques : && (ET) , || (OU ) , ! (NON) , utilisés surtout dans les
instructions conditionnelles.
o Les expressions conditionnelles
(condition) ? val1 : val2 : évalue la condition et exécute val1 si vrai, ou val2
si faux.
Exemple : message = ( fin = true ) ? "bonjour" : "au
revoir"

Tableaux JS

Un tableau dans un langage de programmation n'a rien à voir avec un tableau HTML ou Word
!
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]

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
12
www.phpmaroc.com MA
…………………………………………………………………………….
var mois= new Array(12); mois[0]="Janvier";
...mois[11]="Décembre";

var Les4saisons = new Array("printemps", "été", "automne",

"hiver");
document.write("Voici les 4 saisons : <UL>")
for (i=0 ; i<4 ; i++) {
document.write("<LI>", Les4saisons[i] )
}
document.write("</UL>");

En voici l'exécution :

Voici les 4 saisons :

• printemps
• été
• automne
• hiver

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++)
document.write(tab[i][j]," " );
document.write("<br> " );
}

123
456
789

Propriétés

• length donne le nombre d'éléments.

var mois= new Array(12);
document.write("Il y a ", mois.length, "mois dans l'année");
var NbMois = mois.length ; document.write(" partagés en ", NbMois / 3, "
trimestres");

Méthodes

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

var unLepton="un électron";

var tab= new Array(unLepton, " porte une charge négative
égale à ", 1.6E-19," C");
for( i=0; i<tab.length; i++) document.write(tab[i] );

• En voici l'exécution :

un électron porte une charge négative égale à 1.6e-19 C

• 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"];
document.write("Voici les 4 saisons : <br>")
for (i=0 ; i<Les4saisonsbis.length ; i++)
document.write(Les4saisonsbis[i], " " )

En voici l'exécution :

Voici les 4 saisons :

printemps été automne hiver

TP Données

Retour au menu

Exercice 1 : Mécanisme de l'affectation

I. Il s'agit d'échanger les valeurs des variables a et b.

Construire un petit programme pour tester cet échange, des 2 façons différentes
décrites ci-dessous.
Enregistrer l'exercice sous le nom js2-ex1.htm dans le répertoire personnel.
1. Montrer que cela ne semble pas possible sans l'intervention d'une 3ème
variable c intermédiaire.

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
14
www.phpmaroc.com MA
…………………………………………………………………………….
Ecrire la procédure echange1(a, b) qui utilise la variable c, déclarée en
variable locale
2. Voici un algorithme sans 3ème variable. Montrer qu'il procéde bien à
l'échange et écrire la procédure echange2(a, b)

a b
lire a, b 3 7
a=a+b 10 7
b=a-b 10 3
a=a-b 7 3

II. Il s'agit d'écrire une séquence d'affectation portant sur 2 variables U et Us (signifiant
valeur suivante)
valeurs initiales de (U, Us) = (a, b)
valeurs finales de (U, Us) = (b, a+b)
on aura besoin d'utiliser une variable intermédiaire temporaire T

U Us
lire a, b 3 5
................
5 8

Retour au cours JavaScript 3

3 Les structures de contrôle en JavaScript

Retour au menu

Structure algorithmique d'un programme

Un programme informatique est assemblé à partir de 3 catégories principales d'instructions,

quel que soit le langage utilisé pour le coder :

• instructions séquentielles
• instructions conditionnelles (ou alternatives)
• instructions itératives (ou répétitives)

Nous allons voir en parallèle les notations algorithmiques et leur traduction en JS.

La séquence d'instructions

Il s'agit d'une suite d'actions qui sont exécutées dans l'ordre, les unes après les autres sans
choix possibles, ni répétitions.
Séquence ou bloc d'instructions
algorithme Code JavaScript

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
15
www.phpmaroc.com MA
…………………………………………………………………………….
début {
Instruction 1 Instruction 1;
Instruction 2 Instruction 2;
............ ............
fin }

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
}

Remarques

1. La condition doit être toujours entourée de ( )

2. Le mot alors (then) est toujours sous-entendue.
3. La séquence alors est exécutée si la condition est vraie.
4. La séquence else (optionnelle) est exécutée si la condition est fausse.
5. les { } ne sont pas obligatoires qu'en cas d'instructions multiples.

Exemple 1-1

<SCRIPT language = "JavaScript" >

var prixHT =150 ; prixTTC=0;
if ( prixHT == 0 )
alert("donnez un prix HT !");
else
prixTTC = prixHT * 1.206;
document.write("Prix HT = " + prixHT + "<BR>");
document.write("Prix TTC = ", prixTTC, "<BR>");
</SCRIPT>

Qu'obtient-on exactement à l'exécution ?

Pour vérifier, voir le corrigé exemple 1-1

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
stucture conditionnelle.
<SCRIPT language = "JavaScript" >
var age=0;
age=prompt("Donnez votre âge : ","");

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
16
www.phpmaroc.com MA
…………………………………………………………………………….
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>

Qu'obtient-on exactement à l'exécution ?

Pour vérifier, voir le corrigé exemple 1-2

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

Structure itérative FOR

algorithme Code JavaScript
POUR I de valeur
initiale
for (valeur initiale; condition;
à valeur
poursuite) {
finale
Répéter
séquence d'instructions
Séquence
d'instructions
}
FIN POUR

La condition qui suit FOR est composée de 3 éléments :

1. une valeur ou expression initiale portant sur une variable entière appelée compteur.
2. une condition : tant qu'elle est vraie, la répétition est poursuivie.
3. une expression de poursuite qui consiste en la mise à jour du compteur.

Exemple 2

<SCRIPT language = "JavaScript" >

document.write("Table des carrés<BR>");
for (var i = 0; i <15; i++) {
document.write("i = "+i+" i² = "+ i*i+"<BR>");
}
</SCRIPT>

Exemple 3

<SCRIPT language = "JavaScript" >

Qu'obtient-on exactement à l'exécution ?

Pour vérifier, voir le corrigé exemple 3

• Les accolades sont obligatoires s'il y a plusieurs instructions.

• Chaque instruction se termine par un point-virgule ;
• La séquence sera répétée tant que la condition est vraie, compte-tenu de la mise à jour
du compteur.
• Normalement la mise à jour du compteur doit "rapprocher" de l'arrêt de l'itération.
• Sinon, les conditions mal conçues peuvent entrainer des "boucles infinies", comme
par exemple :
for (i= 11 ; i>10 ; i ++) { .... }

Variante

for (variable in objet ) {

séquence instructions
}

Exemple 4

<SCRIPT language = "JavaScript" >

function hasard(N) {
return Math.floor(Math.random()*N)+1;
}
document.write("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 ) {
document.write("tab [", i,"] = ", tab[i]," ");

Qu'obtient-on exactement à l'exécution ?

Pour vérifier, voir le corrigé exemple 4

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

Structure itérative WHILE

algorithme Code JavaScript
TANT QUE (condition est vraie)
WHILE (condition) {
REPETER
séquence d'instructions
Séquence d'instructions
}
FIN TANT QUE

Exemple 5

<SCRIPT language = "JavaScript" >

Qu'obtient-on exactement à l'exécution ?

Pour vérifier, voir le corrigé exemple 5

TP Structures de programme

Retour au menu

Exercice 1 : Résultats du Bac

Un(e) candidat(e) au Bac entre sa moyenne définitive, et ... reçoit sa mention.

On utilisera au choix des boites de dialogue (ou si on connait 2 composants d'un formulaire).

Exercice 2 : Equations 1er et 2ème degré

Résolution de l'équation ax+b=0 :

si a<>0 alors
S={-b/a}
sinon
si b<>0
alors S= {}
sinon S=R.
Ecrire un programme JS fournissant l'ensemble des solutions, à partir des valeurs de a et de b.

Equation du second degré

Ecrire l'algorithme de résolution complète de l'équation du second degré ax² + bx +c =0
à coefficients réels, dans R puis dans C
On pourra étendre plus tard (en connaissant la construction d'objets) au cas général où a, b et
c sont des complexes.
Ecrire un programme JS fournissant l'ensemble des solutions, connaissant les valeurs des
coefficients.

Exercice 3 : Construction de boucle for

• Soit à vérifier l'identité elle aussi remarquable : 1 + 3 + 5 + ... + (2n-1) = n²

Il n'est pas interdit de la démontrer par récurrence
• Construire une fonction sommeNbImpairs(n) qui calcule la somme précédente et
retourne sa valeur.
S'inspirer On utilisera pour cela une boucle dans laquelle cette somme sera
progressivement calculée.
Définir une variable somme s à initialiser convenablement.
• L'utilisateur saisira la valeur de n dans un champ de texte et appelera la fonction en
cliquant sur un bouton.
Il pourra comparer le résultat avec n²

Exercice 4 : Lancer d'un dé

1. pile-face() qui simule un lancer d'une pièce au hasard et donne 0 ou 1 respectivement

pour pile ou face.
2. dé( ) qui simule le lancer d'un dé normal (donc donne un entier au hasard de 1 à 6).

Simuler grâce à une structure répétitive FOR, l'affichage des résultats d'une série de 600
lancers d'un dé normal.

Lancer d'un dé, version 2

• Partir d'une copie du programme précédent.

• Pour une série de 600 lancers, noter dans un tableau Résultat de taille 6, le nombre de
1, de 2 , ....de 6 obtenus.
• N'afficher que les 6 éléments de ce tableau; obtenez vous 6 fois 100 exactement ?

Lancer d'un dé, version 3

1. On reprend la situation de l'exercice 3

2. On effectue l'épreuve des 600 lancers du dé un grand nombre de fois, et on note pour
chacune le tableau Résultat
3. Effectuer la moyenne des nombres de 1,.de 2... de 6 obtenus pour 1000 séries.

Exercice 5 : suite de Syracuse

Une conjecture proposée par J. Conway vers 1950, affirme que la suite S définie par
récurrence par :
1er terme So > 0

Si Sn est pair
alors Sn+1 = Sn / 2
sinon Sn+1 = 3* Sn +1
est périodique de période 3 (avec les valeurs 1, 4, 2 ) à partir d'un certain rang.

Construisez un programme JS, à enregistrer sous js3-ex6.htm permettant :

1. la saisie de la valeur initiale So

2. le calcul et l'affichage des termes successifs
3. tant que la périodicité (c-à-d la valeur 1) n'est pas atteinte
4. conclure en donnant le nombre de termes (y compris So)

Exercice 6 : Suite de Fibonacci

1. Montrer que l'exercice 3 fournit la séquence d'affectation qui permet de calculer les
termes consécutifs.
2. Ecrire une séquence (ou une fonction Fibo(N)), qui calcule le nième terme N de la
suite.
3. La tester ensuite en faisant calculer et afficher les N premiers termes de cette suite.

Exercice 7 : Suite convergeant vers la racine de N

1. Soit la suite définie par Uo = N/2 et Un+1 = (Un + N / Un) / 2 , où N est un naturel;
en admettant sa convergence, vérifier que sa limite est racine de N.
2. Dans une instruction WHILE, calculer ses termes successifs, tant que la valeur
absolue de la différence de 2 termes consécutifs dépasse 10-6, c'est-à-dire | Un+1 -
Un | > 1E-6
3. Ensuite, conclure et afficher le nombre d'itérations calculées.

Exercice 8 : Maitriser la boucle for

• Quelle est l'affichage de la 1ère boucle ?

• Sachant que la 1ère boucle affiche le résultat 166833, on demande de trouver les 3
autres résultats s2, s3 et s4.
• La dernière boucle donne "Valeur de s5 = 513 et arret à n = 57", expliquez !
pourquoi la valeur de s5 n'est-elle pas inférieure à 500 ?

var s2, n ;
for (n=0, s2=0 ; n< 1000 ; n=n+3 )
s2 += n;
document.write ("Valeur de s2 = " +
s2+"<P>");

var s3;
for ( n=0, s3=0 ; n< 1000; s3 += n , n=n+3

var s4;
for ( n=0, s4=0 ; n< 1000; n=n+3 , s4 += n
)
;
document.write("Valeur de s4 = " +
s4+"<P>");

var s5;
for ( n=0, s5=0 ; n< 1000 && s5 < 500 ; s5
+= n , n=n+3 )
;
document.write("Valeur de s5 = " + s5 +" et
arret à n = "+n);
</script>

4 Les classes prédéfinies de JavaScript

Retour au menu

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 étudirons les objets du navigateur, puis enfin nous apprendrons
comment définir nos propres classes d'objets en JavaScript.
• Une classe d'objets est un ensemble d'informations regroupés 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.

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 Math.PI désigne une propriété de l'objet Math : le nombre PI

o Math.sin(1.50) appelle une méthode de l'objet Math et calcule sin (1.50),
l'angle étant exprimé en radians.

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 :

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 Math.sqrt() , racine carrée.

o Math.log() , Math.exp() , Math.abs() ,Math.cos (), Math.sin() , Math.tan()
o Math.floor(), Math.ceil() entier immédiatement inférieur / supérieur.
o Math.pow(base, exposant), fct puissance, où base et exposant sont des
expressions numériques quelconques évaluables.
o Math.max() , Math.min()
o Math.random(), nombre "réel" choisi au hasard dans [0 , 1[
o Math.round()arrondit à l'entier le plus proche.

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]

II. String

Déclaration

var chaine = "<B>Bonjour !</B>";

document.write ("La longueur de la chaine ",chaine, " est
: ",
chaine.length,". 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 ;
document.write("J\'enseigne encore " + monOption) ;

J'enseigne encore l'option "informatique"

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;
document.write(" a = ", a,"<br> b = ", b,"<br> c =
", c);
for (var i=0; i<255 ; i++)
document.write("En décimal i = "+i+ " s'écrit "+
i.toString(16)+"
")

a = 5007
b = 12
c = 3.1416
En décimal d= 255 s'écrit ff

o Exercice d'entrainement au calcul mental

o chaine.toUpperCase(), pour mettre chaine en majuscule.
Exemple :

var chaine = "Bonjour !";

chaine = chaine.toUpperCase();

o chaine.substring(d, l) extrait une partie de chaine, à partir du caractère de

position d+1, jusqu'à l.
Exemple :

var chaine = "aujourd\'hui";

document.write(" chaine.substring( 2,6) = ",
chaine.substring( 2,6));

chaine.substring( 2,6) = jour

o chaine.charAt(n) donne le caractère placé en nième position (n de 0 à

chaine.length-1).
Exemple :

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
26
www.phpmaroc.com MA
…………………………………………………………………………….
var chaine = "informatique";
document.write("J'épelle :<br>");
for (i=0 ; i< chaine.length ; i++)
document.write (chaine.charAt(i), " - ");

J'épelle :
i-n-f-o-r-m-a-t-i-q-u-e-

o chaine.indexOf(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;
document.write ("1ère position de ", s_ch, " dans ",
chaine," est : ",
chaine.indexOf( s_ch),"<br>");
document.write ("position de ", car ," dans ",
chaine," à partir de la
position ", position," est : ",
chaine.indexOf(car, position)"<br>");

1ère position de ma dans informatique est : 5

position de i dans informatique à partir de la position 2 est : 8

La méthode chaine.split(séparateur)
o
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 : [email protected]
découpage suivant "@" :
tab_ch1[0] = jules.toto
tab_ch1[1] = mail.ac-creteil.fr
découpage suivant "." :
tab_ch1[0] = jules.toto
tab_ch1[1] = mail.ac-creteil.fr
III. Exercice

Très classique ! traduction Français ---> Javanais

IV. 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

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

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 = maDate.getDate () // jour vaut 24.
document.write("Nous étions le ", jour, "/",
maDate.getMonth()+1, "/", maDate.getYear()+1900
,<br>);
document.write("Nous sommes le ", aujourdhui.getDate(),
"/",
aujourdhui.getMonth()+1, "/",
aujourdhui.getYear()+1900 );

Nous étions le 24/11/1981

Nous sommes le 10/4/3904

Nous avons passé l'an 2000 .. depuis combien de jours ?

TP Objets prédéfinis

Retour au menu

Exercice 1 : tableau de valeur de la fonction ln(x) dans [-10,10]

Il s'agit de signaler quand le calcul n'est pas possible, et sinon d'afficher les valeurs dans un
tableau.

Exercice 2 : entrainement au calcul mental (version 1)

• On sait que la fonction eval(texte) accepte en paramètre une chaine de caractères et

retourne sa valeur numérique, si l'interprétation de la chaine en calcul est possible.
• A chaque question, fournir un calcul simple de la forme :
a ope1 b ope2 c, où a,b et sont 3 nombres entiers choisis au hasard de 0 à 20
par exemple, et ope1 et ope2 sont 2 opérations choisies au hasard et indépendamment
dans {+, -, *}.
• Un test comporte 10 questions successives, posées chacune à l'aide de la fonction
prompt()
• L'évaluation et les réponses seront données globalement ensuite. Pensez aux tableaux
JS pour stocker les résultats fournis par l'élève et les bonnes réponses.

Exercice 3 : parlez-vous le javanais ?

"Traduire" une phrase en Javanais : pour cela, chaque lettre "a" de la phrase est remplacée par
"ava".
Par exemple "ça va ?" sera "traduit" par "çava vava ?"
Que donnera "Jean, sais-tu parler Javanais ?

Exercice 4 : StatAlphabet

Soit une chaine phrase.

Il s'agit de trouver son nombre de caractères classés par lettres de l'alphabet rencontrée dans
cette phrase.

Exercice 5 : nombre de jours écoulés depuis le 1/1/2000

Revoir cet exemple III et le paragraphe concernant les objets Date

1. construire la date actuelle et la date correspondant au 1er janvier 2000

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
29
www.phpmaroc.com MA
…………………………………………………………………………….
2. en déduire le nombre de secondes entre ces 2 dates
3. faire afficher le nombre de jours écoulés depuis le 1/1/2000

5 Procédures et fonctions

Retour au menu

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;
}
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.

nomProcédure(valeur1, valeur2, ...) ;

variable = nomFonction(valeur1, valeur2, ...) ;

Exemple

Etudier l'exemple suivant et prévoir exactement son exécution.

Ensuite, comparer avec le corrigé.
<HEAD>
<SCRIPT>
// déclaration de la procédure
function bonjour(prenom) {
document.write("Bonjour, comment vas-tu ", prenom," ?<br>");
}
// déclaration de fonctions
function volumeSphere(rayon) {
return 4/3*Math.PI*Math.pow(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) ;

document.write( "Tu dois payer ", calculerPrix( 150, 4),

"F.<BR>");
document.write( "Sais-tu que le volume de la sphère de rayon
unité est ",
volumeSphere(1)," ?<BR>" );
</BODY>

Visibilité des paramètres

• 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 ?

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
31
www.phpmaroc.com MA
…………………………………………………………………………….
<HEAD>
<SCRIPT LANGAGE=JavaScript >
function bonjour(nom) { // nom est un paramètre local
var ch ="Salut !"; // ch est une variable locale
document.write("au début de la fonction : Bonjour
"+nom +"<BR>");
nom = "Alain"; // on modifie le paramètre
local
document.write("à la fin de la fonction : Bonjour "+nom
+"<BR>");
}

var prenom = "Jacques";

bonjour(prenom) ;
document.write("après appel de la fonction : Bonjour
"+prenom +"<BR>");
</SCRIPT>
<HEAD>

Comparez avec le corrigé 1.

• On ajoute à la fin l'instruction suivante :

document.write("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 ?
o Comparez avec le corrigé 2.

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");
document.write("Liste des premières factorielles jusqu'à ",
nb);
for (var i=0;i<nb;i++)
document.write(i+ " ! = "+fact(i)+"<br>")
</script>
</BODY>
</HTML>

Qu'obtient-on exactement à l'exécution ?

Pour vérifier, voir le corrigé exemple 3

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 calculer.arguments[i]
o pour taille calculer.arguments.length
• Exemple
• function calculerPrix(PrixUnitaire, NbArticles) {
• if (calculerPrix.arguments.length !=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 < somme.arguments.length; i++)
resultat += somme.arguments[i] ;
return resultat ;
}
// quelques appels
document.write("1+2+3 = somme(1,2,3) = " +
somme(1,2,3)+"<p>");
document.write("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>");
document.write(" somme(15.4) = " + somme(15.4)+"<p>");
document.write(" somme() = " + somme()+"<p>");

Qu'obtient-on exactement à l'exécution ?

Pour vérifier, voir le corrigé exemple 4

• Création d'instance de la classe Function

o nom_fct=Function("arg1", .. "argN", "code_fct"), où :

o arg1, .. argN est la liste des paramètres de la fonction
o code_fct est le code, donc la suite des instructions, séparées par des ;

Exemple :
Les 2 fonctions f1 et f2 sont équivalentes :

Pour vérifier, voir le corrigé exemple 5

Formulaires dans une page HTML

Retour au menu

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érent le dialogue avec le client- utilisateur.
Le langage JavaScript, 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 ..

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
<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

TP exercice 1

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 (si on ne
précise pas).
• 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 (éventuellement son contenu défile vers la
gauche).
• MAXLENGTH pour limiter le nombre de caractères pouvant être entrés dans le champ.

Exemples

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
36
www.phpmaroc.com MA
…………………………………………………………………………….
Tapez votre nom : <INPUT NAME="Nom" VALUE="toto">
toto
Tapez votre nom :
Tapez votre adresse e-mail: <INPUT NAME="e-mail"
VALUE="[email protected]" SIZE=40>

[email protected]
Tapez votre adresse e-mail:

Code Postal: <INPUT NAME="CP" SIZE=5 MAXLENGTH=5 VALUE="">

Code Postal: (taper exactement 5 chiffres)

Champ mot de passe

Quelquefois on ne veut pas que le texte tapé par l'utilisateur apparaisse à l'écran.
En particulier s'il s'agit d'un mot de passe ! Pour cela, on utilise le composant dont le type est
TYPE=PASSWORD.
<INPUT TYPE="password" NAME="mot_de_passe" MAXLENGTH=taille
maximum>

Exemple

Entrez votre mot de passe : <INPUT TYPE="password"

MAXLENGTH=5>

Entrez votre mot de passe :

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.

Exemple

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
37
www.phpmaroc.com MA
…………………………………………………………………………….
<TEXTAREA NAME="Demande" ROWS=8 COLS=55>
Bonjour,
J'ai une demande très importante à formuler.
J'espère que vous pourrez me dépanner ...
</TEXTAREA>
Bonjour,
J'ai une demande très importante à formuler.
J'espère que vous pourrez me dépanner ...

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.

Exemples

Vous êtes inscrit(e) au lycée J-Feyder dans une classe de :

<SELECT NAME="Niveau" SIZE=3>
<OPTION> seconde
<OPTION> première
<OPTION SELECTED> terminale
<OPTION> section BTS
</SELECT>

seconde
première
terminale
Vous êtes inscrit(e) au lycée J-Feyder dans une classe de :

<SELECT NAME="pizza" MULTIPLE SIZE=3 MULTIPLE>

<OPTION> anchois
<OPTION SELECTED>tomate

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
38
www.phpmaroc.com MA
…………………………………………………………………………….
<OPTION>olives
<OPTION SELECTED> fromage
<OPTION>épices
<OPTION>viande hachée
<OPTION>câpres
</SELECT>

anchois
tomate
olives
Que désirez vous dans votre pizza ?

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).

Exemple

<INPUT NAME="Client" TYPE=CHECKBOX> Déjà client ?<BR>

<INPUT NAME="Brochure" TYPE=CHECKBOX CHECKED>Demande d'une
brochure

Déjà client ?
Demande d'une brochure.

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

• <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.

Exemple

Vous habitez :<BR>

<INPUT TYPE=RADIO NAME="Ville" VALUE="E" CHECKED >Epinay<BR>
<INPUT TYPE=RADIO NAME="Ville" VALUE="SD" >Saint-Denis<BR>
<INPUT TYPE=RADIO NAME="Ville" VALUE="V" >Villetaneuse<BR>
<INPUT TYPE=RADIO NAME="Ville" VALUE="S" >Stains<BR>

Vous habitez :
Epinay
Saint-Denis
Villetaneuse
Stains

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.

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 ou bien
<INPUT TYPE="SUBMIT" NAME= ".." VALUE="Envoyer">
Envoyer

Boutons de réinitialisation

Effacer

TP exercice 2

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
:http://serveur/chemin/prog.html?champ1=valeur1&champ2=va
leur2&....
• 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:
.
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

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
41
www.phpmaroc.com MA
…………………………………………………………………………….
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:[email protected]">

Pour expérimenter cette méthode, voir l'exercice 3 du TP

TP exercice 3

Programmation événementielle en JS

Retour au menu

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 connaitre 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 reconnait 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)

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 this.form 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

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
43
www.phpmaroc.com MA
…………………………………………………………………………….
Gest.
provoqué par l'utilisateur qui ... sur les objets ...
é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

• Prérequis: Il est nécessaire de connaitre déjà les champs (ou composants) de

formulaires du langage HTML.
Pour les découvrir, voir ce chapitre d'introduction aux formulaires HTML
• 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">
<INP

Traitement d'un formulaire en JS

Retour au menu Le présent chapitre se présente comme un exemple complet et commenté de

traitement des divers composants d'un formulaire.
Conseils :

1. Etudier d'abord le codage de la partie <BODY> définissant l'interface graphique, en

liaison avec son exécution figurant ci-dessous.

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
44
www.phpmaroc.com MA
…………………………………………………………………………….
2. Pour chaque composant, étudier le code JavaScript qui permet de récupérer les
données du formulaire pour un traitement spécifique.

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 1ère année Classe préparatoire Section de T.S. IUT Autre école

Ecrivez ci-dessous le sujet de votre projet informatique :

Voici mon projet d'option informatique

Recommencer la saisie
Valider ces informations Fermer le formulaire
Effacer

Code du formulaire

<SCRIPT LANGUAGE="JavaScript1.1">
var hauteur=300;
var largeur=300;
options="width="+largeur+",height="+hauteur+"toolbar=yes,
directories=no, menubar=no,scrollbars=yes,status=yes";

function traiter_info(formulaire) {
w =open("","Fiche_de_renseignements",options);
nom=formulaire.Nom.value;
prenom=formulaire.Prenom.value;
motpass=formulaire.secret.value;
discipline=formulaire.disciplines.options[formulaire.disciplines.selectedInde
for (i=0;i<formulaire.specialites.length;i++) {
if (formulaire.specialites[i].checked)
specialite=formulaire.specialites[i].value;

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
45
www.phpmaroc.com MA
…………………………………………………………………………….
}
w.document.write("<font size=+1><u><center>Fiche de
renseignements</center></u></font><p>");
w.document.write("Votre nom : ", nom,"<br>");
w.document.write("Votre prénom : ", prenom,"<br>");
w.document.write("Votre mot de passe : ", motpass,"<P>");
w.document.write("Votre spécialité de TS : ", specialite,"<br>");
w.document.write("Votre discipline favorite : ",discipline,"<P>");
w.document.write("Vous êtes inscrit(e) en : <UL>");
if (formulaire.deug.checked) w.document.write("<LI>"+formulaire.deug.value+
if (formulaire.cpge.checked) w.document.write("<LI>"+formulaire.cpge.value+
if (formulaire.iut.checked) w.document.write("<LI>"+formulaire.iut.value+"<
if (formulaire.bts.checked) w.document.write("<LI>"+formulaire.bts.value+"<
if (formulaire.autre.checked)
w.document.write("<LI>"+formulaire.autre.value+"<br>");
w.document.write("</ul>");
w.document.write("<br>");
}

function fermer(){
w.close();
}
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#c0c0c0" TEXT="#000000"

LINK="#0000A0" VLINK="#009000" ALINK="#FF00FF">
<H1>Fiche d'inscription</H1>

<FORM NAME="Fiche">
Nom : <INPUT TYPE ="text" NAME="Nom" VALUE="" >
Prénom : <INPUT TYPE ="text" NAME="Prenom" VALUE="" >
Mot de passe : <INPUT TYPE="password" NAME="secret" SIZE=5>
<P>
Vous êtes en terminale S à dominante :
<INPUT TYPE="radio" NAME="specialites" VALUE="Math" checked>Mathématiques
<INPUT TYPE="radio" NAME="specialites" VALUE="PC">Physique-chimie
<INPUT TYPE="radio" NAME="specialites" VALUE="SVT">SVT
<P>
Quelle est votre discipline préférée ?
<SELECT NAME="disciplines" SIZE=3>
<OPTION>Physique
<OPTION SELECTED>Informatique
<OPTION>Philosophie
<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" value="Deug 1ère année">Deug 1ère an
<INPUT TYPE=CHECKBOX NAME="cpge" value="Classe préparatoire">Classe préparat
<INPUT TYPE=CHECKBOX NAME="bts" value="Section de T.S.">Section de T.S.

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
46
www.phpmaroc.com MA
…………………………………………………………………………….
<INPUT TYPE=CHECKBOX NAME="iut" value="IUT">IUT
<INPUT TYPE=CHECKBOX NAME="autre" value="Autre école">Autre école
<P>
Ecrivez ci-dessous le sujet de votre projet informatique :<BR>
<TEXTAREA NAME="Projet" ROWS=5 COLS=55>
Voici mon projet d'option informatique
</TEXTAREA>
<P>
<CENTER>
<TABLE width=90% BORDER=2>
<TR ALIGN=center>
<TD width=33%>Valider ces informations<P>;INPUT TYPE=BUTTON
VALUE="Enregistrer" onClick='traiter_info(Fiche)'>
</TD>
<TD width=33%>Recommencer la saisie<P><INPUT TYPE=RESET
VALUE="Effacer">
</TD>
<TD width=33%>Fermer le formulaire<P><INPUT TYPE=BUTTON
VALUE="Fermer" onClick='fermer()'>
</TD>
</TR>
</TABLE>
</CENTER>
</FORM>

Retour au menu

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(this.value)">
</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 this.value prendra la valeur tapée dans le champ.
Remarque :this désigne l'objet courant; ici, this est facultatif.
Expliquez ce qu'affichera cette page.

Pour vérifier, écrivez votre prénom :

Exercice 2 : événement onLoad sur le chargement d'un document

• Revoir si nécessaire l'exemple III du cours d'introduction et ce paragraphe concernant

les objets Date
• Le programme exo-heure.html affiche le jour et l'heure au moment du
chargement ducorps du document qui le contient.
• On utilisera donc le gestionnaire d'événement onLoad qui appelle la fonction
dateheure() ... à écrire.
• Compléter en ajoutant un bouton dont l'activation provoquera une mise à l'heure.

Voici l'affichage souhaité

16/4/2000 Dimanche 16 avril 2000 12:48:31

L'utilisateur choisit la couleur de fond de la fenêtre du navigateur entre plusieurs couleurs

proposées, par exemple :

• Rouge

o Vert
o Bleu
o 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 document.bgColor = "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.

Exercice 4 : événements onClick sur un bouton et onChange sur une ligne de texte

Reprendre cet exercice table de multiplication.

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

Exercice 5 : é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 disparait quand la souris quitte le lien.
• Quand il clique sur le lien, une boite de message alert() apparait.

Voici un exemple de réalisation

Exercice 6 : é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 chaine doit être de la forme chaine1@chaine2

TP2 Evénements JavaScript

Retour au menu

Exercice 1 (enquete.html)

A partir du modèle de traitement d'un formulaire, générer en JS un document récapitulatif des

choix effectués par l'utilisateur sur le petit questionnaire ci-dessous.
Les renseignements recueillis seront affichés dans une zone de texte appelée reponse.
Pour gagner du temps, récupérer ici dans le fichier le code HTML de l'interface, et y ajouter le
code JS.

nom
prénom
e-mail
établissement
ville
Seine-Saint-Denis
département Val de Marne
Seine et Marne

Votre type d'emploi

enseignement
éducation
administration
direction

Vos loisirs préférés

Son Vidéo Télévision Cinéma

Bas du formulaire
Programmation Logiciels Internet

Décrivez votre projet de site WEB

Validation du formulaire

Annuler

Exercice 2 (exo-calcul.html)

Voici l'interface souhaitée (dont on pourra récupérer le code) :

Entrez vos données 45+21=66

Entier 1 : 45-21=24
45*21=945
45/21=2.142857142857143
Entier 2 : 45%21=3
1.2+5.9=7.1000000000000005
Réel 1 : 1.2-5.9=-4.7
1.2*5.9=7.08
1.2/5.9=.20338983050847456
Réel 2 : 1.2%5.9=1.2

Exercice 3 Calcul mental, version 2 (exo-calcul-mental.html)

• On entre une expression arithmétique dans une ligne de texte nommée calcul.
(On pourra par la suite en fournir au hasard)
• L'enfant doit proposer une réponse dans le champ nommé reponse
• Prévoir un 3ème champ, nommé message, pour accueillir un message.
• Si la saisie dans reponse est vide, alors afficher dans message "Propose une
réponse", sinon comparer la réponse à la valeur (avec la fonction eval() qui évalue
une chaine de caractère).
• Le message sera suivant le cas "réponse fausse .. corrige" ou bien "bonne réponse"
• Un bouton marqué résultat devrait permettre à tout moment d'obtenir la réponse
exacte dans le champ message.
• La partie d'analyse de la réponse sera programmée dans une fonction verif()

Voici l'interface souhaitée (dont on pourra récupérer le code) :

Test de calcul mental

Calcule mentalement et écris ta réponse

A calculer 3*8

Réponse 23

Message réponse fausse ... recommence

Résultat
Pour recommencer Effacer
<>

Exercice 4 (exo-nb-mysterieux.html)

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
52
www.phpmaroc.com MA
…………………………………………………………………………….
• Il s'agit de faire trouver un nombre entier nbInconnu à l'utilisateur. Ce nombre sera
obtenu au hasard, entre 0 et 100, par exemple.
• On n'accorde qu'un nombre d'essais limité maxEssai, fixé en constante au début du
programme .
• A chacun des essais dans le composant Proposition, le joueur donne un nombre
NbEssai et par appel d'une fonction provoquée par l'événement onChange, il
obtiendra dans le composant Message, « c'est plus » ou « c'est moins ».
• Deux conditions peuvent donc arrêter la répétition des essais :
1. Le joueur a découvert nbInconnu
2. OU il a épuisé le nombre total d'essais permis maxEssai
• Si le nombre inconnu a été trouvé avant le nombre maximum d'essais, le programme
affichera le message dans le composant Réponse
"Vous avez trouvé en ... essais", sinon il affichera "Le nombre à touver était : ......".
• Prévoir la possibilité pour le joueur de recommencer une partie (bouton Nouveau
jeu).
A tout moment, le joueur peut demander la réponse (bouton Réponse).

Voici l'interface souhaitée (dont on pourra récupérer le code)

Découvrez le nombre mystérieux

Vous avez 7 essais pour trouver le nombre choisi par l'ordinateur,

au hasard entre 1 et 100

Proposition : 23

N°essai : 3

Message : c'est plus !

Réponse :

Exercice 5 (exo-trinome.html)

• Déclarer une fonction trinome() qui doit afficher la liste des valeurs de la fonction
f(x) =3x² - 2x -1, par défaut, pour x entier de -5 jusqu'à 5.
La fonction est donc construite à l'aide d'une itération for(var x = ....; x < .... ; x++)
• Construire dans la partie BODY, un formulaire comprenant 3 composants de type
champ de texte ( pour la saisie par l'utilisateur des valeurs des 3 coefficients a, b,
c) et un bouton Calculer qui doit déclencher l'appel de la fonction trinome()
• Lors de cet appel, on récupère les valeurs a, b, c, xm, xM saisies dans le
formulaire (il sera peut-être nécessaire de convertir ces chaines en valeurs numériques
avec parseInt ou parseFloat ).
• Améliorer le programme en appelant la fonction trinome(), à chaque changement
de l'une des 5 valeurs saisies.

Voici l'interface souhaitée (dont on pourra récupérer le code)

Tableau de valeurs

f(x) = 3x²-2x-1

f( -5 ) = 84
f( -4 ) = 55
f( -3 ) = 32
f( -2 ) = 15
3 f( -1 ) = 4
a= f( 0 ) = -1
-2 f( 1) =0
b= f( 2) =7
-1 f( 3 ) = 20
c= f( 4 ) = 39
-5 f( 5 ) = 64
xmin=
5
xmax=

Les objets du navigateur

Retour au menu

La hiérarchie des objets JavaScript

Voici la hiérarchie de toutes les classes d'objets gérés par le Navigateur

navigator

Les classes de base du navigateur

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
54
www.phpmaroc.com MA
…………………………………………………………………………….
• 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
navigator.appName
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..

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
document.bgColor = 'blue' ;
• Pour la page HTML courante, nous avons les propriétés suivantes :
Propriétés de l'objet WINDOW
o Protocole utilisé : window.location.protocol = file:
o URL : window.location.href =
file:///E:/mhand/mhand/1m/Ami/JavaScript%20Java/SITE/javascript(1)/javas
cript(cours)/Jour3/c-objets-navigateur.html
o Message de la barre d'état : window.defaultStatus = Voici les objets
construits par le navigateur

Propriétés de l'objet DOCUMENT

o Titre du document : document.title = Cours JavaScript

o Couleur du texte : document.fgColor = #000000
o Couleur du fond : document.bgColor = #f1f1f1

Compléments : connaitre les propriétés d'un objet

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
55
www.phpmaroc.com MA
…………………………………………………………………………….
On peut connaitre toutes les propriétés des objets avec une itération FOR .... IN
Par exemple pour l'objet document :
function proprietes() {
var objet;
var n=document.ppte.liste.selectedIndex;
switch (n) {
case 0: objet=navigator; break;
case 1: objet=navigator.plugins; break;
case 2: objet=navigator.mimeTypes; break;
case 3: objet=window; break;
case 4: objet=window.location; break;
case 5: objet=window.history; break;
case 6: objet=window.document; break;
case 7: objet=document.forms[0]; break;
case 8: objet=document.forms[0].elements; break;
case 9: objet=document.images; break;
case 10: objet=document.links; break;
case 11: objet=forms[0].liste.options; break;
}
var nom=document.ppte.liste.options[n].text;
fen=open("","Proprietes","width=600,height=250,toolbar=yes,
directories=no, menubar=no,scrollbars=yes,status=yes");
fen.focus();
var texte = "";
for (var i in objet )
texte +=nom+"."+i+" = " +objet[i] +"
";
fen.document.write(texte);
fen.document.close();
}
Pour tester, choisir dans la liste OU appuyer sur ce bouton

navigator

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.
navigator.userAgent = Mozilla/4.7 [fr] (Win95; I)
informations générales envoyées au serveur HTTP à
chaque requête du navigateur
navigator.appCodeName = Mozilla
nom de code
navigator.appVersion = 4.7 [fr] (Win95; I)
informations sur la plate-forme d'exécution
navigator.appName = Netscape
navigator.language = fr
navigator.platform = Win32
type de machine
navigator.securityPolicy = France policy
navigator.plugins = [object PluginArray]
tableau des plug-ins installés

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
56
www.phpmaroc.com MA
…………………………………………………………………………….
navigator.mimeTypes = [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.
2. if (navigator.appName !='Netscape')
3. window.history.back();
4. else
5. document.write('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 (navigator.plugins['Shockwave'])
8. document.write('<EMBED NAME="acte_1" SRC="acte_1.swf"
9. WIDTH="100%" HEIGHT="100%" ALIGN="LEFT"
QUALITY="high" SALIGN="lT"> ');
10. else
11. document.write('Désolé, votre navigateur ne sait pas
afficher Shockwave');

TP manipulation de fenêtres (objet Window)

Retour au menu

A. Gestion dynamique d'une fenêtre

Ouvrir ou fermer une fenêtre ? (exo-fenetre1)

Il s'agit d'écrire 2 boutons et 2 liens <A href=".."> dans une page.

o L'ouverture du document ouvre une petite fenêtre fen1 où est affiché un

message, du genre "Bonjour tout le monde !", en taille 6.
o Clic sur le bouton Ouvrir ouvre une 2ème fenêtre fen2
o Clic sur le bouton Fermer ferme les fenêtres ouvertes.
o Un clic sur le premier lien doit fermer la fenetre courante (le lien fonctionne
alors comme un bouton)
o Passer la souris sur le 2ème lien produit le même effet (utiliser le pseudo-
protocole javascript:)

o fermer la fenêtre par clic

o fermer la fenêtre par mouseOver

Ouvrir et fermer une fenêtre externe (exo-fenetre2)

cet exercice propose 3 façons :

8. par événement onClick sur 2 boutons, pour ouvrir et pour fermer

9. par activation d'un hyperlien géré par le pseudo-protocole <A
HREF=javascript:..
10. par événement onMouseOver/Out sur un lien ou une image

Ouvrir et fermer une fenêtre par événement

11. clic sur un bouton

12. clic sur un hyperlien
13. onMouseOver/onMouseOut sur un hyperlien

Gestion par bouton

Gestion par clic sur un lien

o ouvrir la fenêtre par clic

o fermer la fenêtre par clic

Gestion en pointant un lien

Ouvrir ou fermer la fenêtre

en pointant l'image ou en pointant ce lien

Cache-cache avec une fenêtre (exo-fenetre3)

La fenêtre est créée dès l'ouverture, mais immédiatement masquée.

Les 4 boutons ci-dessous vont permettre de la gérer.

o la montrer (lui donner le focus)

o la masquer (lui enlever par la méthode blur()).
o la fermer
o la recréer si elle a été fermée

B. Méthode setTimeOut()
‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
58
www.phpmaroc.com MA
…………………………………………………………………………….
Simulation d'une montre digitale (exo-fenetre4)

On affichera cette montre dans une fenêtre indépendante, lors de l'ouverture de la

page courante

0. Reprendre un exercice antérieur, par exemple exo-heure.html

1. Pour simuler l'écoulement du temps, utiliser des appels récursifs de la
fonction d'affichage quelle_heure() avec la fonction setTimeout()
:
setTimeout("quelle_heure()", 1000);
2. Appeler la fonction quelle_heure() en réponse à l'événement onLoad sur la
balise <body>
3. Pour afficher la montre dans une petite fenêtre, faire appel à la méthode
open(). Choisir les options de cette fenêtre : pas de barres, non modifiable.

Exemple de réalisation :

Automatisation avec la fonction setTimeOut() (exo-fenetre5)

Lors du chargement du document courant, il s'agit de faire afficher un message de

bienvenue, dans une nouvelle petite fenetre. Celle-ci sera refermée automatiquement
au bout de quelques secondes.

Projet : QCM

On pose une question et on donne 5 secondes au joueur pour donner la bonne

réponse, en cochant sur une case ou en sélectionnant un bouton radio.
Construire un test de 10 questions puis donner les réponses avec le bilan du joueur
L'affichage de la question dans une fenêtre auxiliaire démarre le décompte :
delai = setTimeout(perdu(), 5000)
Une réponse du joueur, qu'elle soit juste ou pas, arrête le temps et lance l'évaluation
de la réponse :
clearTimeout(delai); verification();

C. Fenêtres d'informations

Il s'agit d'afficher des informations (texte, image) associé à un mot, une phrase, une
image, une zone ... dans une nouvelle fenêtre

Fenêtre d'infos furtives (exo-pc-fen.html)

Lorsque l'utilisateur passe la souris sur des zones particulières d'une image en
coordonnées, ou d'un texte, une fenêtre surgit avec un texte descriptif ou une image,
adapté à la zone pointée.
Ceci est réalisé par un script qui réagit aux événements onMouseOver et
onMouseOut, en respectivement ouvrant et fermant la fenêtre d'information. On
pourra au choix utiliser une image (cartes de France, du métro, plan de l'académie, du
93) ou cette page où est déjà préparée une image en coordonnées d'un pc

Examen d'un document choisi dans une liste (exo-choix-document.html)

ouvrir
Choisissez :
fermer

Fenêtres de navigation (exo-web)

o Construire une liste déroulante (objet <select>) dont les items sont les url
de quelques moteurs de recherche.
o La sélection d'un item de la liste doit :
vérifier si la fenêtre fen est ouverte, alors l'ouvrir
charger le document, situé à l'url choisi, et l'afficher
o On pourra compléter avec une autre liste déroulante ou une série de boutons
radios, pour sélectionner des sites disciplinaires.

Des moteurs de recherche ----- et ------ des cours d'informatique

Altavista HTML

La classe document

Retour au menu

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 document.formu que par
document.forms[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 : document.formu.lycee.value="J-
Feyder";

Le programmeur JS peut avoir accès en lecture à ces tableaux.

Leur taille est obtenu avec la propriété length; ainsi forms.length est le nombre de

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= ...>

Un exemple concret

Soit le code d'une page d'accueil :

(Source Stefan Koch http://rummelplatz.uni-
mannheim.de/~skoch/js/tutorial.htm)
<html>
<head>
<title>My homepage</title>
</head>
<body bgcolor=#ffffff>
<center>
<img src="home.gif" 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="ruler.gif" name="image4" width=300 height=15>
<p>
<a href="http://rummelplatz.uni-mannheim.de/~skoch/">My
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 = document.forms[0].elements[1].value ou
var mail = document.formu.nom.value;

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 : document.title = Cours JavaScript

• Couleur du texte : document.fgColor = #000000
• Couleur du fond : document.bgColor = #f1f1f1
• Couleur de liens : document.linkColor = #0000a0
• Couleur de liens visités : document.vlinkColor = #cc3366
• Couleur de liens activés : document.alinkColor = #cc3366
• Adresse du document : document.URL =
file://E:\mhand\mhand\1m\Ami\JavaScript%20Java\SITE\javascript(1)\javascript(co
urs)\Jour3\c-document.html
• Date de dernière modification : document.lastModified = 12/26/2001 16:26:10
• Le cookie du document : document.cookie =

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

Retour au menu

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[]

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

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
63
www.phpmaroc.com MA
…………………………………………………………………………….
• 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();
• monImage.src = "moi.jpg";
• 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

Méthodes

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

img.src='fichier-image'.

Solution proposée

<BODY>
<A HREF="javascript:void(0)"

onMouseOver="img.src='../images/connect.gif'
"
onMouseOut="img.src='../images/creteil.gif'
">
<IMG NAME="img" WIDTH=60 HEIGHT=61
BORDER=0
SRC="../images/creteil.gif"></A>
..........
</BODY>

Version améliorée

Voici une solution plus générale et satisfaisante, qui consiste à charger d'abord les images
dans un tableau d'images, dès l'affichage du document.
<SCRIPT>
var commentaire=new Array(2);

function init() {
commentaire[0]="Et voici mon chat jeune .."
commentaire[1]="C'est moi en pleine action .."
for (var i=0 ; i <images.length; i++)
images[i]= new Image();
images[0].src="../../images/monchat.gif"
images[1].src="../../images/etmoi.jpg"
}
function changimage(n) {
document.image.src=images[n].src;
status=commentaire[n];
}
</SCRIPT>

<BODY onLoad="init()">
<H2>Evénements onMouseover et onMouseout sur un lien-
image</H2>

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/dalhias.jpg'; Evénements onClick sur un
tab_image[1].src='../images/eglantines.jpg'; lien-image
tab_image[2].src='../images/roses rouges.jpg';
tab_image[3].src='../images/roses jaunes.jpg';
tab_image[4].src='../images/chrysanthemes.jpg';

var n=0;

function change() {
n= ++n;
if (n == tab_image.length) n=0;
window.document.image.src=tab_image[n].src;
}
</script> Cliquer pour changer d'image
</HEAD>

<BODY>
<H4>Evénements onClick sur un lien-image</H4>

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
65
www.phpmaroc.com MA
…………………………………………………………………………….
<A HREF="JavaScript:change()">
<IMG NAME="image" WIDTH=200 HEIGHT=150
SRC="../images/fleurs1.jpg">
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) : monImage.src = "../images/Monchat.jpg"
• L'URL de l'image est spécifiée comme valeur de la propriété src

Exemple de code

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
d = 100 ;
n = 0 ;
var im = new Array(10) ;

<IMG SRC="i0.gif" NAME="monImage"

BORDER=0 WIDTH=58 HEIGHT=76
onLoad="setTimeout('anime()',d)">
</BODY>

Retour au menu

Exercice 1

Choisir une série d'images de même taille (à peu près) et réaliser la "version améliorée" du
cours, en utilisant un appel de fonction pour changer d'images.

Exercice 2 : Sélection d'images dans une liste

L'image chargée par défaut à l'affichage de la page, peut être remplacée par l'image
sélectionnée dans la liste.
Par exemple

Choisissez :

Exercice 3 : permutation d'images

Les 3 images ont été insérées dans le document par leur balise <IMG SRC="...">.
On dispose alors d'un tableau des 3 images de fleurs, manipulables sous les noms
images[i], i=0,1,2
En réaffectant la propriété src de l'image images[i], on peut remplacer l’image actuelle.
L'événement onClick sur un bouton doit appeler la fonction permuter(), qui effectuera
une permutation circulaire des 3 images.

Situation initiale

Exercice 4 : contrôle du défilement d'images

On dispose de 3 séries d'images dans le répertoire images et nommées

imag0.gif à imag6.gif , 0.gif à 9.gif , 0.jpg à 9.jpg.
Il s'agit pour chacune des séries de les afficher en boucle toutes les secondes, à l'aide de 2
boutons Commencer et Arrêter.

Voici un exemple :

Image : contrôle de l'animation

Programmation multi-cadres

Retour au menu

Rappels HTML

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
...
<FRAMESET COLS="50%,50%">
<FRAME fichier2.htm
SRC="fichier1.htm">
<FRAMESET fichier1.htm fichier3.htm
ROWS="33%,33%,33%">
<FRAME
SRC="fichier2.htm"> fichier4.htm
<FRAME
SRC="fichier3.htm">
<FRAME Bien sûr, dans les 4 cadres, ce sont les
SRC="fichier4.htm"> contenus des 4 documents fichier1.htm ,
</FRAMESET> fichier2.htm...etc.. qui seront affichés.
</FRAMESET>

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 : 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 %.

<FRAME SCR = "fichier.htm " 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=" doc1.htm" TARGET = "cadre3" >voir ce document </A>
affichera le document doc1.htm 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%"> et voici mon

<FRAME SRC="fichier1.htm" chat
name="cadre1">
<FRAMESET ROWS=" 30% , * " >
<FRAME SRC="fichier2.htm"
name="cadre2"> Ma page Cliquez
<FRAME SRC="fichier3.htm" personnelle vite
name="cadre3"> dans le
</FRAMESET> cadre
</FRAMESET> au
dessus,
<- extrait document pour
fichier2.htm -> admirer ...

<A HREF="monchat.gif" TARGET

= "cadre3" > après activation du lien
et voici mon chat</A>

<- extrait document et voici mon

Ma page chat
fichier3.htm ->
personnelle

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
70
www.phpmaroc.com MA
…………………………………………………………………………….
<PRE>
<font size=-1>
Cliquez vite
dans le cadre
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
frames.length
• 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 window.nom-cadre.objet.propriété
o window.frames[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.formu.message= "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 :
parent.frames[1].location.href= 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
document.links[1].target = "cadre_haut"
o Afficher le document (ou l'image) dans la fenetre nommée maFenetre
window.fen = open("c-frames.html","maFenetre",
options);
document.links[0].target = "maFenetre";

TP Programmation multi-cadres

Retour au menu

• Voici le partage de la fenêtre du navigateur.

• <FRAMESET ROWS="*,*,*">
• <FRAME NAME="cadre0" SRC="fichier0.html">
• <FRAME NAME="cadre1" SRC="fichier1.html">
• <FRAME NAME="cadre2" SRC="fichier2.html">
• </FRAMESET>
• Dans form0, on crée le formulaire nommé "form0" contenant la zone de texte
nommée "texte0".
• Dans form2, on crée le formulaire nommé "form2" contenant une zone de texte
nommée "texte2".
• Dans form1, on crée le formulaire nommé "form1" contenant 2 zones de texte
nommées "saisie" et "texte1", et un bouton "Copier".
• Les 2 événements : clic sur le bouton et validation de la saisie (dans le champ
saisie), doivent appeler la même fonction copier().
Celle-ci est déclarée dans le document du cadre form1 et provoquera la copie du
texte saisi dans les 3 autres zones de texte.

Exercice 2 (exo-famille-cadres.html)

(d'après un exercice de JavaScript / M. Dreyfus /Sybex)

On considère l'arborescence suivante de cadres :

• Remarquer qu'il y a 3 cadres dans la page mais hiérarchisés. Ils ne sont pas de même
niveau. Alfred et Jules sont frères, Tom est leur oncle.
• Créer la page f3.html avec le FRAMESET constitué des 2 cadres f4 et f5 et
contenant respectivement f4.html et f5.html.
• Créer ensuite la page f1.html avec le FRAMESET constitué des cadres f2 et
f3 contenant respectivement f2.html et f3.html.
• Dans chacun des 3 cadres, écrire une phrase indiquant quelle est la personne
concernée. Ex : " ici Jules, frère d'Alfred et neveu de Tom ".
• Puis, dans chacun des 3 cadres ajouter un formulaire contenant une zone de texte
nommée " message".
• On coisit de se positionner dans la situation de Jules. Jules va envoyer un message à
son frère, un autre à son oncle et un à lui-même. Pour cela compléter le formulaire de
Jules par 3 boutons correspondant aux 3 messages à transmettre.
• Le gestionnaire d'événement onClick de chaque bouton devra effectuer l'envoi
dans la zone de texte du cadre correspondant. Par exemple, le click sur le bouton

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
72
www.phpmaroc.com MA
…………………………………………………………………………….
"écrire à mon frère" enverra le message "salut Alfred, ici ton frère jules" dans la zone
de texte message du cadre d'Alfred.

Exercice 3 (exo-cadres-couleurs.html)

Partager l'écran en 9 cadres de même taille. On demande 2 versions :

1. afficher des couleurs de fond aléatoires dans ces cadres, toutes les secondes
2. afficher au hasard une image ou rien dans les 9 cadres, toutes les 3 secondes.

Exercice 4 (exo-cadres-images.html)

Il s'agit de choisir à la fois une image et le cadre où elle doit être affichée

Où voulez vous
afficher
les images ?

Choisissez
d'abord le lieu
:
• en haut
• en bas

Ensuite l'image
:
• image de mon
chat
• un plan de
métro
• un plan du
93
• des roses

Pour
recommencer

Exercice 5 (exo-visionner-images)

Voici une copie d'écran.

Les gestionnaires d'événements onMouseOver et onMouseOut seront utilisés pour
provoquer un aperçu "furtif" de l'image ou du document dans une fenêtre indépendante.

Exercice 6 (changer-images-cadre)

Il s'agit de construire un menu simple basé sur des changements d'images suivant la rubrique
pointée par la souris.
On dispose des 5 images zone1.gif ... zone5.gif qu'on chargera dans un tableau à
l'affichage de la page.

Quelques projets

• metaChercheur
Il s'agit de simuler le travail d'un méta-chercheur. Un ou plusieurs mots-clés sont
choisis et une chaine de requête conforme à la syntaxe de chaque moteur leur est
adressé.
• Simulation de devis
Exemple : devis proposé par la société MicroHard
• QCM, tests ..
Exemple : entrainement au calcul mental

Programmation objet en JS

Retour au menu

Introduction

• Nous avons vu 3 classes définies dans le langage JS : Date, String, Image.

On peut créer des objets de ces types, dans la terminologie des langages orientés-

Pourquoi définir une classe de personne ?

Comment représenter et gérer un ensemble de N personnes, dotées d'un ensemble d'attributs

comme nom, prénom, num tél, adresse complète, sexe, age, profession ...
Actuellement, il est inévitable de créer autant de tableaux de taille N que d'attributs.
var tabNom = new Array(N);
var tabPrenom = new Array(N);
var tabAnnee_naissance = new Array(N);

L'émiettement des données relatives à une personne dans de nombreux tableaux complique
les traitements et apparait artificiel : que représente au fond le tableau des années de naissance
? et l'unité d'une personne tient au choix du même numéro d'indice dans tous les tableaux !

Dans la conception objet, la personne redevient le centre des préoccupations. On en fait une
description générale dans la déclaration d'une classe d'objets, qui se compose de 2 parties qui
décrivent ses propriétés et ses actions.

Exemple élémentaire

// La classe Rectangle posséde 2 propriétés

// Voici son constructeur
function Rectangle ( L, l) {
this.largeur = l;
this.longueur = L ;
}
// rect1 et rect2 sont des instances de la classe Rectangle.
// Les objets sont crées avec l'opérateur new.
var rect1 = new Rectangle(10 , 6)
var rect2 = new Rectangle(15 , 10.5)

// Lors de la création de rect1 par new, this est "remplacé"

par rect1.

// Exemple d'utilisation
document.write("largeur = "+ rect1.largeur)
document.write("longueur = "+ rect2.longueur)

// la fonction suivante calcule l'aire du rectangle

function calcule_aire () {
return this.largeur * this.longueur
}

/* On peut se servir de la fonction calcule_aire() pour

intégrer
* une méthode dans la définition de la classe Rectangle
* la méthode est appelée aire
*/
function Rectangle ( L, l) {
this.largeur = l ;
this.longueur = L ;
this.aire = calcule_aire ;
}

// utilisation de la méthode
var a2 = rect2.aire())
document.write("L'aire du rectangle rect1 = "+rect1.aire() );

Définition d'une classe d'objets

On choisit tout d'abord un nom identifiant la classe de l'objet, souvent commençant par une
majuscule. Par exemple Personne, Voiture, Maison, Article ...
Les éléments de ces classes autrement dit les objets, seront identifiés en minuscules

Propriétés
Puis, les noms des propriétés (ou variables d'objet) qui décrivent les caractéristiques stables
des objets, même si les valeurs de ces propriétés changent.
Ainsi pour Personne, les propriétés retenues peuvent être nommées : nom, prenom,
adresse, codePostal, ville, numTel, annee_naissance, solde ...
A tout moment un objet, c'est-à-dire une personne particulière, possède une valeur pour
chaque propriété, valeur qui peut varier au cours du temps, comme son adresse ou le solde de
son compte bancaire.

Méthodes
A coté de ces caractéristiques, les méthodes de l'objet décrivent son comportement, plus
précisément les traitements auquels tout objet est soumis.
Par exemple, une personne peut calculer son âge, déménager, changer de N° de téléphone,
avoir son compte crédité ou débité ...et avoir un nouveau-né !
Le plus souvent, ces méthodes d'objet agissent sur les propriétés et en modifient les valeurs.
Elles sont donc décrites par du code de fonction, intégré à la définition de l'objet.

Constructeur d'objets
En JS, la classe d'un objet est complètement décrite par une (seule) fonction particulière
appelée constructeur de l'objet
La classe de l'objet et son constructeur portent le même nom.
Son écriture va contenir 2 parties : les déclarations des propriétés et des méthodes.

Schéma de constructeur
Le mot this, comme dans tous les langages orientés objets, permet de référencer les futurs
objets de la classe.

//constructeur de la classe
function nom-classe(param1, param2 ...) {
// déclaration et initialisation des propriétés
this.propriété1 = param1 ;

Exemple de constructeur de Personne

//déclaration des fonctions-méthodes, elles peuvent suivre la

fonction-constructeur
function calculer_age() {
.....
}
function mouvement_compte() {
.....
}
function nouvelle_naissance() {
.....
}
// Constructeur de l'objet Personne
function Personne(n, p, ad, cp, v, t, a, nb) {
// Definition des propriétés
this.nom = n ; this.prenom = p ;
this.adresse=ad ; this.codePostal=cp; this.ville=v;
this.numTel=t;
this.annee_naissance = a; this.nb_enfant = nb ;

// Définition des méthodes

this.age = calculer_age ;
this.compte = mouvement_compte ;
this.naissance = nouvelle_naissance;
}

Utilisation de la classe d'objets

Construction d'objets
La classe d'objets étant décrite dans la fonction constructeur (plus les fonctions annexes, pour
les méthodes de l'objet), comment l'utiliser ?
On doit distinguer 2 étapes :

1. création des objets

2. accès, modification de leurs propriétés, appel à leurs méthodes

Cette classe est une sorte de modèle selon lequel on va pouvoir créer des objets concrets,
manipulables.
Ces objets concrets _ exemplaires tirés du modèle_ s'appellent les instances de la classe.

Pour créer une telle instance, on effectue un appel à l'aide de l'opérateur new au constructeur
de l'objet, et on affecte le résultat à un identificateur de variable.
(Remarque : newa déjà été utilisé dans ce rôle pour créer des objets du type Date, Array.. )

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
77
www.phpmaroc.com MA
…………………………………………………………………………….
Ecriture générale
var instance1 = new nom-classe(liste de valeurs)
Les valeurs passées en paramètre vont affecter les propriétés de l'instance (et ainsi les
initialiser), conformément au code du constructeur : ils doivent donc correspondre
exactement, en place et en nombre, aux paramètres formels du constructeur.
Mais on peut alternativement appeler le constructeur par défaut, sans paramètre, reportant à
plus tard l'initialisation des propriétés.

Exemple : création et utilisation d'instances de Personne

// création et initialisation complète d'une instance

var p = new Personne('Toto','Jules',1,'10 rue
V.Hugo','93000','Bobigny','01222222',1950,3);
// ou création, puis initialisation d'une instance
var p = new Personne();
p.prenom= "Jules";
p.nom= "Toto";
.........

Prolongements

I. Tableau d'objets

Le type tableau en JS admet tout type d'éléments. On peut donc remplir un tableau de
Personne
var personnes = new Array (N);
for (var i=0; i<personnes.length; i++)
personnes[i] = new Personne();
personnes[0].nom = "Toto";
.......

II. Utilisation de fichier de code .js

o Il est très utile d'insérer du code standard dans plusieurs pages.
En particulier les déclarations de classes peuvent reservir !
o Pour cela, par exemple sauvegarder tout le code de la classe Personne, en
enlevant toutes les balises HTML, y compris <SCRIPT>, dans le fichier
personne.js
Dès lors il suffira d'importer ce code avec la directive <SCRIPT
SRC=personne.js"> </SCRIPT>
o Remarques :
On peut faire importer plusieurs fichiers, avec des directives semblables, ne
pas énumérer les fichiers .js; de plus on peut écrire un bloc <SCRIPT> pour
les définitions locales de fonctions.
III. Pour connaitre une classe

Pour connaitre les propriétés/méthodes d'un objet, on peut utiliser une fonction qui
parcourera toutes ses propriétés, comme nous l'avons déjà fait pour les objets
prédéfinis window, document ..

<SCRIPT LANGUAGE="JavaScript">
function proprietes(objet,nom) {
var texte = "";
for (var i in objet )

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
78
www.phpmaroc.com MA
…………………………………………………………………………….
texte +=nom+"."+i+" = " +objet[i] +"
";
document.write(texte)
}
// parcours des propriétés des instances de Personne
for (var i=0; i<personnes.length; i++)
proprietes(personnes[i], personnes[i].nom)
</SCRIPT>

IV. Classe définie à l'aide d'autres classes

Soient 2 classes ClasseA et ClasseB. On suppose que :

ClasseB contienne une propriété de "type" ClasseA, ou plus exactement qu'une
de ses propriétés soit construite par affectation d'une instance de ClasseA.

function ClasseA( n, ........) {

// Definition des propriétés de ClasseA
this.nom = n;
...........
}

function ClasseB( a, b, objetA, ....) {

// Definition des propriétés de Classe2
this.ppa = a;
this.ppb = b;
// objetA sera remplacé à la construction par
// une instance existante de la ClasseA
this.ppc = objetA;
...........
}
var instA = new ClasseA( ...);
var instB = new ClasseB( aa, bb, instA, ...);

document.write('La valeur de la ppté ppc de instB est :

',
instB.instA.ppc);

Exemple
Soit une classe Voiture dotée des propriétés suivantes :

function Voiture(ma, mo, a, p) {

this.marque=ma;
this.modele=mo;
this.annee=a;
// le proprietaire est implicitement un "objet" de type
Personne !
this.proprietaire = p; // p sera une instance de Personne
this.presenter=presenter_voiture;
}

var toto = new Personne('Toto', 'Jules', .....);

toto.presenter();

// Maintenant posons quelques questions importantes !

// toto et auto se présentent avec leur méthodes
particulières
toto.presenter();
auto.presenter();
// combien d'enfants a le propriétaire de auto ?
document.write('Le propriétaire de la voiture auto a ',
auto1.proprietaire.nb_enfant ,' enfant(s)');
// quel est l'âge du propriétaire de (l') auto ?
document.write('Voici l\'âge du propriétaire de la
voiture auto : ',
auto.proprietaire.age());
// mais laissons le propriétaire de auto se présenter
lui-même !
document.write('Présentons l\'heureux propriétaire de la
voiture auto');
auto1.proprietaire.presenter();

V. La propriété prototype

Cette propriété spéciale s'applique à une classe déjà construite et permet de lui ajouter
de nouvelles propriétés et méthodes
On peut effectuer ces ajouts sur des classes prédéfinies ou définies par le
programmeur
Il faudra ensuite attribuer une valeur à cette propriété, car on ne dispose pas d'un
constructeur d'objet qui l'intégre. Syntaxe
nomClasse.prototype.nomPropriété = valeurInitiale ;

Exemples

1. ajout d'une propriété sexe à la classe Personne

Personne.prototype.sexe = "f" ;
2. ajout d'une méthode à la classe String

<SCRIPT>
// ajout d'une méthode à la classe String
function fin() {
return this.charAt(this.length-1);
}
String.prototype.fin = fin ;
</SCRIPT>
</HEAD>

<BODY>
<SCRIPT>
var ch1 = "Bonjour à tous"
var ch2 = "et à demain !"
document.write("Le dernier caractère de "+ "\""+ ch1+
"\"" + " : "+ch1.fin()+"<br>");
document.write("Le dernier caractère de "+ "\""+ ch2+

TP Programmation-objet en JS

Retour au menu

Exercice 1 : classe Rectangle

Reprendre l'exemple du cours, ajouter la méthode calcul_perimetre() au constructeur,

et modifier la méthode afficheToi().
Tester.

Exercice 2 : classe Personne

1. Définir le constructeur Personne(), et créer quelques instances de Personne

regroupée dans un tableau appelé personnes[] .
2. Le sauvegarder dans le fichier personne.js
3. Construire une page basePersonne.html, récupérant ce code grâce à la directive
:
<SCRIPT SRC=personne.js"> </SCRIPT>
4. Dans cette page écrire un formulaire de saisie pour construire de nouvelles instances
de Personne, avec des boutons Annuler (reset) et Ajouter(validation).
Bien sur cette saisie ira ajouter un élément du tableau personnes[].
5. A la demande, par clic sur un bouton Afficher, faire afficher la liste des personnes
existants dans personnes[], par appel itératif de la méthode afficheToi(), à
l'intérieur d'un composant Textarea

Exercice 3 : classe Employe

1. Il s'agit de définir une classe Employe pour simuler l'enregistrement d'une personne
salarié dans une entreprise.
2. Déclarer un constructeur de Entreprise avec les propriétés nom, ville, etc .. et
une méthode presenteToi().
A enregistrer sous le nom entreprise.js
3. Puis écrire un constructeur de Employe pourvu des propriétés : entreprise,
personne ("un employé est une personne"), fonction, salaire, anciennete, et une
méthode presenteToi().
A enregistrer sous le nom employe.js
4. Ecrire baseEntreprise.js et baseEmploye.js, dans lesquels on définit des
tableaux entreprises et employes
5. Ecrire afficheEmploye.html qui importe les 4 fichiers précédents, ainsi que
personne.js et basePersonne.js et répond à quelques questions :
1. quelles sont les entreprises ?

Exercice 4 : classe Biblio

Projet

Pour un assembleur d'ordinateurs, il s'agit de construire un document dynamique, qui

affiche un devis au fur at à mesure que l'utilisateur fait ses choix de composants
d'ordinateur, sans attendre une validation finale, comme sur cet exemple.

6. Reprendre la même interface graphique, en l'actualisant et en la complétant

d'une liste déroulante de modèles d'imprimantes.
7. Ecrire le fichier info.js contenant les déclarations des classes Ordinateur et
Imprimante, puis tableaux ordi[] et impr[] remplis de quelques instances de
ces 2 classes.
8. Modifier le code de cette page, pour utiliser les objets à la place des divers
tableaux.

Gérer les cookies en JS

Retour au menu

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écanime 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 chaine de caractères, dans un seul
fichier au format texte, appelé cookies.txt 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
cookies.txt !

Observations

Vérifier le paramètre suivant de votre navigateur

Menu Edition/Préférences/Avancées/, activer :

La présente page abrite un cookie, à des fins de démonstration, nommé

CompterPassageCoursCookie.

• Il contient seulement la chaine 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 chaine qui sera stockée et qui constitue le cookie
o sa date de fraicheur
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/cookies.txt
• On y trouve une 1ère ligne du genre
• FALSE /D|/javascript/Jour4 FALSE 959810400
CompterPassageCoursCookie 4

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(2000,5,1);

function CompterLesPassages () {
// fonction pour mettre en évidence le cookie

‫ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬
83
www.phpmaroc.com MA
…………………………………………………………………………….
n = RechercherLeCookie("CompterPassageCoursCookie");
opts="width=200,height=20,,screenX=400,screenY=10"
fen = open("", "Delicious_Cookies",opts);
fen.document.write("Page chargée "+ n + " fois !<P>
Vous reprendrez bien un de ces délicieux cookies ...");
fen.document.close();
id=setTimeout("fen.close();MiseAJourCookie (n);",2000);
}

function MiseAJourCookie (nb) {

// fonction de mise à jour du cookie
nb = eval(nb) + 1;
document.cookie = "CompterPassageCoursCookie=" + nb + ";
expires=" + futur.toGMTString();
}

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 = document.cookie ;
unArgument = unArgument + "=";
var longueur = unArgument.length ;
var resultat;
if(chaine.length > 0) {
debut = chaine.indexOf( unArgument , 0 );
if (debut >= 0) {
fin = chaine.indexOf( ";" , debut+longueur );
if (fin >= 0)
resultat =
unescape(chaine.substring(debut+longueur,fin));
else
resultat =
unescape(chaine.substring(debut+longueur,chaine.length));
}
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
document.cookie = "CompterPassageCoursCookie=" + ";expires=" +
date.toGMTString();
}

Exercice

Etudions un autre exemple de cookie (réf. JavaScript/M. Dreyfus/Sybex)

• Dans une page page.html, lors de sa première visite, on demande à l'utilisateur sa

couleur préférée, dans une liste incluse dans la page choixCouleur.html, 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 !
• On demande d'étudier les scripts de page.html et choixCouleur.html
(dossier Jour4/exo-cookies) et d'éventuellement les compléter.

EN CA DE QUESTION VEUILLEZ ME CONTACTER SUR

[email protected]
[email protected]

www.phpmaroc.com

Vous aimerez peut-être aussi

Java Script
Pas encore d'évaluation
Java Script
106 pages
Cours 7 Javascript Bases
Pas encore d'évaluation
Cours 7 Javascript Bases
93 pages
Cours JavaScript
Pas encore d'évaluation
Cours JavaScript
37 pages
Cours Javascript
Pas encore d'évaluation
Cours Javascript
15 pages
Cours JS
Pas encore d'évaluation
Cours JS
60 pages
Cours Javascript
Pas encore d'évaluation
Cours Javascript
21 pages
Chapitre JavaScript
Pas encore d'évaluation
Chapitre JavaScript
122 pages
Cours D Anglais Pour D Butants
Pas encore d'évaluation
Cours D Anglais Pour D Butants
136 pages
Cours 4 Javascript
Pas encore d'évaluation
Cours 4 Javascript
52 pages
Chapitre 1: Introduction À Javascript: 1. Qu'Est-Ce Que Le Javascript ?
100% (1)
Chapitre 1: Introduction À Javascript: 1. Qu'Est-Ce Que Le Javascript ?
4 pages
Cours JAVA Script PDF
100% (1)
Cours JAVA Script PDF
63 pages
Javascript: Formateur Jaouad Assabbour
Pas encore d'évaluation
Javascript: Formateur Jaouad Assabbour
164 pages
Javascript
Pas encore d'évaluation
Javascript
66 pages
1-JavaScript (1) - 035530
Pas encore d'évaluation
1-JavaScript (1) - 035530
31 pages
Javascript
Pas encore d'évaluation
Javascript
57 pages
Cours04 Complet JS
Pas encore d'évaluation
Cours04 Complet JS
7 pages
Java Script
Pas encore d'évaluation
Java Script
37 pages
Javascript LBS
Pas encore d'évaluation
Javascript LBS
50 pages
Chap3 JavaScript
Pas encore d'évaluation
Chap3 JavaScript
157 pages
Programmation Web 2 Seances 1-4
Pas encore d'évaluation
Programmation Web 2 Seances 1-4
150 pages
Programmation Web 2 Seances1-2
Pas encore d'évaluation
Programmation Web 2 Seances1-2
110 pages
Technologie Et Programmation Web 4
Pas encore d'évaluation
Technologie Et Programmation Web 4
35 pages
Partie1 Cours JavaScript V3 Presentation Variables Type
Pas encore d'évaluation
Partie1 Cours JavaScript V3 Presentation Variables Type
56 pages
03A JavaScript Introduction
Pas encore d'évaluation
03A JavaScript Introduction
73 pages
Cours JavaScript
Pas encore d'évaluation
Cours JavaScript
38 pages
Interaction Entre L'homme Et La Machine Sur Le Web (Javascript)
Pas encore d'évaluation
Interaction Entre L'homme Et La Machine Sur Le Web (Javascript)
6 pages
Lecon 1 - Introduction A JavaScript PDF
Pas encore d'évaluation
Lecon 1 - Introduction A JavaScript PDF
14 pages
Javascript
Pas encore d'évaluation
Javascript
54 pages
Javascript
Pas encore d'évaluation
Javascript
51 pages
### Introduction À JavaScript
Pas encore d'évaluation
### Introduction À JavaScript
7 pages
Cours Web M1 GL - 5
Pas encore d'évaluation
Cours Web M1 GL - 5
27 pages
Javascript
Pas encore d'évaluation
Javascript
2 pages
1-Introduction Js BDD
Pas encore d'évaluation
1-Introduction Js BDD
37 pages
Js CM 1 Notes
Pas encore d'évaluation
Js CM 1 Notes
42 pages
Cours JAVASCRIPT Partie 1
Pas encore d'évaluation
Cours JAVASCRIPT Partie 1
8 pages
JavaScript 1
Pas encore d'évaluation
JavaScript 1
34 pages
Chapitre 01 - Cours Developpement de Site Web Dynamique Avec Javascript
Pas encore d'évaluation
Chapitre 01 - Cours Developpement de Site Web Dynamique Avec Javascript
15 pages
Les Bases de Javascript: Qu'Est Le Javascript, Réellement ?
Pas encore d'évaluation
Les Bases de Javascript: Qu'Est Le Javascript, Réellement ?
11 pages
HTML5 Est Une Norme Qui Voit Le Jour en 2014 Décrivant Le Web Moderne. Par Abus de Langage
Pas encore d'évaluation
HTML5 Est Une Norme Qui Voit Le Jour en 2014 Décrivant Le Web Moderne. Par Abus de Langage
7 pages
31 Meditations Demi-Feuilles
Pas encore d'évaluation
31 Meditations Demi-Feuilles
96 pages
Cours Programmation Web II Chapitre 1 JavaScript
Pas encore d'évaluation
Cours Programmation Web II Chapitre 1 JavaScript
88 pages
Java Script 2
Pas encore d'évaluation
Java Script 2
34 pages
Javascript - 01
Pas encore d'évaluation
Javascript - 01
24 pages
UE 21 Et Plus PCD
Pas encore d'évaluation
UE 21 Et Plus PCD
26 pages
Chapitre n1
Pas encore d'évaluation
Chapitre n1
7 pages
Java Script
Pas encore d'évaluation
Java Script
7 pages
Introduction À Javascript - 123625
Pas encore d'évaluation
Introduction À Javascript - 123625
8 pages
Chapitre1 Language Java
Pas encore d'évaluation
Chapitre1 Language Java
15 pages
T4 C1 Interaction Page Web
Pas encore d'évaluation
T4 C1 Interaction Page Web
6 pages
CoursJavaScript Id1805
Pas encore d'évaluation
CoursJavaScript Id1805
42 pages
Javascript
Pas encore d'évaluation
Javascript
24 pages
CoursJavaScript Id1796
Pas encore d'évaluation
CoursJavaScript Id1796
35 pages
Opera Romantique
Pas encore d'évaluation
Opera Romantique
37 pages
Initiation Javascript
Pas encore d'évaluation
Initiation Javascript
36 pages
Diapo 1STMG
Pas encore d'évaluation
Diapo 1STMG
1 320 pages
Chapitre 4 - JavaScript
Pas encore d'évaluation
Chapitre 4 - JavaScript
18 pages
TP Si Tic Js
Pas encore d'évaluation
TP Si Tic Js
34 pages
Java Script
Pas encore d'évaluation
Java Script
7 pages
Introduction JS
Pas encore d'évaluation
Introduction JS
2 pages
TD1
100% (1)
TD1
7 pages
Epreuve de Langue Française Terminale A
0% (1)
Epreuve de Langue Française Terminale A
3 pages
09TAB Classical Guitar Fernando Sor Op. 60 With Tab
Pas encore d'évaluation
09TAB Classical Guitar Fernando Sor Op. 60 With Tab
51 pages
Le Rôle de La Fiche Terminologique Dans Le Langage de Spécialité de La Zootechnie - Docx-Lucrare
Pas encore d'évaluation
Le Rôle de La Fiche Terminologique Dans Le Langage de Spécialité de La Zootechnie - Docx-Lucrare
9 pages
Psaume 41 2-3
Pas encore d'évaluation
Psaume 41 2-3
2 pages
TD Réseau
Pas encore d'évaluation
TD Réseau
3 pages
TP D'initiation - HTML - CSS
Pas encore d'évaluation
TP D'initiation - HTML - CSS
6 pages
Fiche Discoursrapporteb1 PDF
Pas encore d'évaluation
Fiche Discoursrapporteb1 PDF
2 pages
Les Rites Simplifies de La Omra - Omra Privée
Pas encore d'évaluation
Les Rites Simplifies de La Omra - Omra Privée
16 pages
Le Français. Scéance 7 Adjectifs Posséssifs. Correction
Pas encore d'évaluation
Le Français. Scéance 7 Adjectifs Posséssifs. Correction
24 pages
Le Positivisme en Droit International: Fondement Épistémologique D'un Paradigme Mécaniciste
Pas encore d'évaluation
Le Positivisme en Droit International: Fondement Épistémologique D'un Paradigme Mécaniciste
37 pages
Chaine - Transmission - Numerique - 24-02-2022
Pas encore d'évaluation
Chaine - Transmission - Numerique - 24-02-2022
114 pages
La Générosité de Dieu
Pas encore d'évaluation
La Générosité de Dieu
4 pages
SHP54-1231 2
Pas encore d'évaluation
SHP54-1231 2
36 pages
Prendre Le Web - Intro Au Développement Web
Pas encore d'évaluation
Prendre Le Web - Intro Au Développement Web
21 pages
Rapport de Soutenance Final - Projet OCR: Ludovic ALLARD Pierre PERETTI Benoit DE GELAS
Pas encore d'évaluation
Rapport de Soutenance Final - Projet OCR: Ludovic ALLARD Pierre PERETTI Benoit DE GELAS
23 pages
Partie Entiere
Pas encore d'évaluation
Partie Entiere
23 pages
Tao Long - La Voie Du Dragon
Pas encore d'évaluation
Tao Long - La Voie Du Dragon
24 pages
11.5.2.4 Lab - Share Resources
Pas encore d'évaluation
11.5.2.4 Lab - Share Resources
3 pages
II-Exemples de Parties Denses Dans Des Espaces de Dimension Quelconque
Pas encore d'évaluation
II-Exemples de Parties Denses Dans Des Espaces de Dimension Quelconque
3 pages
Barbe Nom
Pas encore d'évaluation
Barbe Nom
1 page
Algorithme D
Pas encore d'évaluation
Algorithme D
4 pages
111111lettre de Recommandation Professionnelle - Modèle Word Et Texte Gratuit - Docutexte
Pas encore d'évaluation
111111lettre de Recommandation Professionnelle - Modèle Word Et Texte Gratuit - Docutexte
2 pages
I Wanna + (Verb)
Pas encore d'évaluation
I Wanna + (Verb)
3 pages
Annexe e CV Europass
Pas encore d'évaluation
Annexe e CV Europass
2 pages
Didactique Du FLE - TP #3 - 2023
Pas encore d'évaluation
Didactique Du FLE - TP #3 - 2023
2 pages
Programmer en JavaScript
D'Everand
Programmer en JavaScript
Preston Prescott
4.5/5 (2)
Spring Boot par la pratique: Développer les services Rest avec Spring-Boot et Spring-RestTemplate
D'Everand
Spring Boot par la pratique: Développer les services Rest avec Spring-Boot et Spring-RestTemplate
Bertrand Nguimgo
Pas encore d'évaluation
Getting started with Javascript: Professional Training
D'Everand
Getting started with Javascript: Professional Training
Remy Lentzner
Pas encore d'évaluation
Bien débuter avec JavaScript: Formation professionnelle
D'Everand
Bien débuter avec JavaScript: Formation professionnelle
Rémy Lentzner
Pas encore d'évaluation
Suite logicielle: Révolutionner la vision par ordinateur avec la suite logicielle ultime
D'Everand
Suite logicielle: Révolutionner la vision par ordinateur avec la suite logicielle ultime
Fouad Sabry
Pas encore d'évaluation