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

23 vues58 pages

Leçon Javascript

Transféré par

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)

23 vues58 pages

Leçon Javascript

Transféré par

tojoniainalazasoa.rakotonirina

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

ENI RV.

1
COURS DE JAVASCRIPT

Le Dynamic HTML (DHTML) est une extension du //--> // Fin de la partie cachée
HTML qui, associée au javascript et aux feuilles
de styles, permet de manipuler dynamiquement
</SCRIPT>
des éléments HTML sur une page.
L'argument de la balise <SCRIPT> décrit le langage
Le DHTML a été inventé par Netscape à partir de sa utilisé. Il peut être "JavaScript" "JavaScript1.1"
version 4. Microsoft a suivi cette voie en "JavaScript1.2".
développant un autre langage de DHTML à
partir de la version 4 de Internet Explorer.
Dans un fichier externe
JavaScript est un langage de programmation
complètement lié au langage HTML. Le développeur Il est possible de mettre les codes de JavaScript en
internet code ses pages HTML en y intégrant des annexe dans un fichier (à partir de Netscape 3.0
sources JavaScript. Le visiteur, par l'intermédiaire de uniquement). Le code à insérer est le suivant:
son navigateur, charge le code des pages.
<SCRIPT LANGUAGE=Javascript
SRC="url/fichier.js"> </SCRIPT>
C'est le navigateur qui interprète le code HTML et
JavaScript. L'interprétation dépend naturellement du
type de navigateur utilisé et de sa version. Oû url/fichier.js correspond au chemin d'accès au
fichier contenant le code en JavaScript,
JavaScript est un langage objet et événementiel. Le
développeur peut créer des objets sur la page, avec Grâce aux évènements
des propriétés et des méthodes et leur associer des
actions en fonction d'événements déclenchés par le On appelle évènement une action de l'utilisateur,
visiteur (passage de souris, clic, saisie clavier, etc...) comme le clic d'un des boutons de la souris. Le code
dans le cas du résultat d'un événement s'écrit:
1 - COMMENT INTEGRER DU CODE JAVASCRIPT
DANS UNE PAGE HTML ? <balise eventHandler="code Javascript à insérer">

eventHandler représente le nom de l'événement.

A quel emplacement insérer le Javascript dans

votre page HTML Ajouter des commentaires dans votre code

Il y a plusieurs façon d'inclure du JavaScript dans Pour écrire des commentaires, Javascript utilise les
une page HTML: conventions utilisées en lange C/C++

• Grâce à la balise <SCRIPT> • Pour mettre en commentaires tout une ligne

on utilise le double slash:
• En mettant le code dans un fichier
// Tous les caractères derrière le // sont
• Grâce aux événements
ignorés
• Pour mettre en commentaire une partie du
Dans la balise script texte (éventuellement sur plusieurs lignes) on
utilise le /* et le */:
On place généralement le maximum d'éléments du /* Toutes les lignes comprises entre ces
script dans la balise d'en-tête (ce sont les éléments repères
située entre les balises <HEAD> et </HEAD>). Les Sont ignorées par l'interpréteur
évènements Javascript seront quant à eux placés de code */
dans le corps de la page (entre les balises <BODY>
et </BODY>) comme attribut d'une commande Il faut veiller à ne pas embriquer des
HTML... commentaires, au risque de provoquer une
erreur lors de l'exécution du code!
<SCRIPT language="Javascript"
type= "text/javascript ">
<!-- // Cache ce qui suit aux navigateurs qui ne Définition des constantes
supportent pas JavaScript Si il s'agit de chaine de caractère ou de chiffre elle ne
peuvent être modifié par contre si il s'agit d'objet ou de
Placez ici le code de votre script

1
ENI RV. 2
tableau leurs types ne peuvent être modifiés mais leur Lorsque l'on déclare de façon explicite une variable
contenu peut être modifié. en javascript (en précédant sa déclaration avec le mot
prenons comme exemple un tableau declaré avec var), sa portée dépend de l'endroit où elle est déclarée.
const comprenant trois valeurs : • Une variable déclarée au début du script, c'est-
const tableau=["un","deux","trois"] à-dire avant toute fonction sera globale, on
on ajoute une valeur au tableau puis on affiche la pourra alors les utiliser à partir de n'importe
valeur de la variable : quel endroit dans le script
const tableau=["un","deux","trois"] Une variable déclarée par le mot clé var dans une
tableau.push("quatre") fonction aura une portée limitée à cette seule fonction,
console.log(tableau) //renvoi c'est-à-dire qu'elle est inutilisable ailleurs, on parle
"un","deux","trois","quatre" alors de variable locale

2 - LA DECLARATION DES VARIABLES, DES

OBJETS ET DES TABLEAUX 3. CHAINE DE CARACTERES (STRING)
Une chaîne de caractère est, comme son nom
JavaScript utilise l'instruction var pour la déclaration. l'indique, une suite de caractères. On la représente par
Toute nouvelle variable doit être initialisée. la suite de caractères encadrée par des guillemets
simples (') ou doubles ("), sachant que les deux types
Déclaration des variables basiques de guillemets ne peuvent être mélangés pour une
même chaîne de caractères, ce qui signifie que les
Pour déclarer une variable basique, c'est-à-dire de type guillemets dans une chaîne de caractères existent par
entier, numérique, chaîne de caractères, etc, il ne faut paire.
pas déclarer le type. Le navigateur le détecte. Il existe des caractères spéciaux à utiliser dans les
EXEMPLES de déclaration de variables basiques : chaînes pour simuler d'une part des caractères non
var prenom_visiteur="Marcel"; visuels ou pour éviter au navigateur de confondre les
var nom_visiteur="Dupond"; caractères d'une chaîne avec ceux du script, ces
var age_visiteur=29; caractères sont précédés d'un antislash (\):
On remarque la présence du point virgule (;) à la fin de • \b : touche de suppression
chaque instruction. • \f : formulaire plein
Il est possible de placer sur une même ligne plusieurs • \n : retour à la ligne
instructions séparées par des points virgules.
• \r : appui sur la touche ENTREE
Une variable déjà déclarée s'utilise ensuite
• \t : tabulation
normalement :
var accueil="Bonjour " + prenom_visiteur + " " + • \" : guillemets doubles
nom_visiteur; • \' : guillemets simples
La déclaration des variables peut se faire de deux • \\ : caractère antislash
façons: Ainsi, si on veut stocker la chaine suivante dans la
• soit de façon explicite, en faisant précéder la variable Titre:
variable du mot clé var qui permet d'indiquer Qu'y a-t'il dans "c:\windows\"
de façon rigoureuse qu'il s'agit d'une variable: Il faudra écrire dans le code Javascript:
var chaine= "bonjour" Titre = "Qu'y a-t'il dans \"c:\\windows\\\"";
• soit de façon implicite, en écrivant directement ou Titre = 'Qu\'y a-t\'il dans \"c:\\windows\\\"';
le nom de la variable suivie du caractère = et
de la valeur à affecter: Booléens (booleans)
chaine= "bonjour" Un booléen est une variable spécial servant à évaluer
Le navigateur détermine seul qu'il s'agit d'une une condition, il peut donc avoir deux valeurs:
déclaration de variable. • vrai: représenté par 1
Même si une déclaration implicite est tout à fair • faux: représenté par 0
reconnue par le navigateur, il est tout de même plus •
rigoureux de déclarer les variables de façon explicite Les propriétés de l'objet String
avec le mot var... L'objet string a une seule propriété : la propriété length
qui permet de retourner la longueur d'une chaîne de
Portée (visibilité) des variables caractères. Cette propriété est très utile car lorsque l'on
traite une chaîne de caractères on aime généralement
Selon l'endroit où on déclare une variable, celle-ci savoir à quel moment s'arrêter.
pourra être accessible (visible) de partout dans le script La syntaxe de la propriété length est la suivante:
ou bien que dans une portion confinée du code, on x = nom_de_la_chaine.length;
parle de "portée" d'une variable. x = ('chaine de caracteres').length;
Lorsqu'une variable est déclarée sans le mot clé var, On peut donc directement passer la chaîne de
c'est-à-dire de façon implicite, elle est accessible de caractères comme objet, en délimitant la chaîne par
partout dans le script (n'importe quelle fonction du des apostrophes et en plaçant le tout entre
script peut faire appel à cette variable). On parle alors parenthèses.
de variable globale La méthode traditionnelle consistant à appliquer une

2
ENI RV. 3
propriété à une variable de type string fonctionne bien Le tableau suivant décrit les méthodes de l'objet string.
évidemment aussi.

Les méthodes de l'objet String

Les méthodes de l'objet string permettent de récupérer

une portion d'une chaîne de caractère, ou bien de la
modifier.
Méthode Description Exemples
Chaine = 'Comment ça marche?'

• var Resultat =
Retourne le caractère situé à la position chaine.charAt("Comment ça
chaîne.charAt(position)
donnée en paramètre marche?", 1)
donne 'o'

Chaine = 'Comment ça marche?'

Sous_Chaine = 'mar'

• var Resultat =
Retourne la position d'une sous-chaîne
Chaine.indexOf(Sous_Chaine, 6)
(lettre ou groupe de lettres) dans une
indexOf(sous-chaîne, donne '11'
chaîne de caractère, en effectuant la
position) • var Resultat =
recherche de gauche à droite, à partir de la
Chaine.indexOf(Sous_Chaine,
position spécifiée en paramètre.
12)
donne '-1'

Chaine = 'Comment ça marche?'

Sous_Chaine = 'mar'

La méthode est similaire à indexOf(), à la

• var Resultat =
différence que la recherche se fait de
Chaine.lastIndexOf(Sous_Chaine
droite à gauche:
, 6)
lastIndexOf(sous-chaîne, Retourne la position d'une sous-chaîne
donne '-1'
position) (lettre ou groupe de lettres) dans une
• var Resultat =
chaîne de caractère, en effectuant la
Chaine.lastIndexOf(Sous_Chaine
recherche de droite à gauche, à partir de la
)
position spécifiée en paramètre.
donne '11'

Chaine = 'Comment ça marche?'

Sous_Chaine = 'mar'

• var Resultat =
Chaine.lastIndexOf(Sous_Chaine
La méthode retourne la sous-chaîne (lettre , 6)
substring(position1,
ou groupe de lettres) comprise entre les donne '-1'
position2)
positions 1 et 2 données en paramètre. • var Resultat =
Chaine.lastIndexOf(Sous_Chaine
)
donne '11'

toLowerCase() Convertit tous les caractères d'une chaîne Chaine = 'Comment ça Marche?'
en minuscule
• var Resultat =
Chaine.toLowerCase

3
ENI RV. 4

donne 'comment ça marche?'

Chaine = 'Comment ça Marche?'

• var Resultat =
Convertit tous les caractères d'une chaîne Chaine.toUpperCase
toUpperCase()
en majuscule donne 'COMMENT çA
MARCHE?'

D'autres methodes
Méthode description
Correspond à la balise HTML <A name="
">.
anchor(nom_a_donner) Transforme le texte en ancrage HTML var dmc="alias";
document.write(dmc.anchor("Nom"));

var dmc="alias";
big() Augmente la taille de la police
document.write(dmc.big());
blink() Transforme la chaîne en texte clignotant
var dmc="alias";
bold() Met le texte en gras (balise <B>) document.write(dmc.bold());

var dmc="alias";
fixed Transforme le texte en police fixe (balise <TT>) document.write(dmc.fixed());

Modifie la couleur du texte (admet comme var dmc="alias";

fontcolor(couleur) argument la couleur en hexadécimal ou en document.write(dmc.fontcolor("#333399"));
valeur littérale)
var dmc="alias";
Modifie la taille de la police, en afectant la
fontsize(Size) document.write(m.fontsize(6));
valeur passée en paramètre

var dmc="alias";
italics() Transforme le texte en italique (balise <I>) document.write(dmc.italics());

var dmc="alias";
Transforme le texte en hypertexte (balise <A
link(URL) document.write(dmc.link("../index.html"));
href>)

Correspond à la balise HTML <SMALL>.

var dmc="alias";
small() Diminue la taille de la police
document.write(dmc.small());

Transforme le texte en texte barré (balise

strike()
<strike>)
var dmc="alias";
sub() Transforme le texte en indice (balise <sub>)
document.write(dmc.sub());
var dmc="alias";
sup() Transforme le texte en exposant (balise <sup>)
document.write(dmc.sup());

4. DECLARATION ET UTILISATION DES var un_tableau=new Array(10)

TABLEAUX
Cette ligne crée un tableau de 10 éléments de type
En JavaScript, les tableaux sont des objets et leur basique (réel, entier, chaîne de caractères). En
déclaration est identique à celle vue plus haut. JavaScript, le premier élément est indexé à 0. Il est
4
ENI RV. 5
possible de déclarer un tableau sans dimension fixée. La chaîne de caractère peut (et doit dans certains cas)
La taille du tableau s'adapte en fonction du contenu : contenir des caractères marqués d'un antislash (\). Par
exemple, si vous voulez écrire:
var un_autre_tableau=new Array;
Message d'alerte:
Pour accéder aux éléments du tableau, on utilise les Au feu!!
crochets "[" et "]"
Il faudra écrire le script suivant:
un_tableau[0]=10; alert('Message d\'alerte \nAu feu!!');
un_tableau[9]=5;
La méthode confirm()
Des méthodes associées à l'objet permettent
d'effectuer des traitements ou d'accéder à des La méthode confirm() est similaire à la méthode alert(),
propriétés. On utilise la notation pointée pour appliquer si ce n'est qu'elle permet un choix entre "OK" et
une méthode sur un objet ou pour accéder à une "Annuler". Lorsque l'utilisateur appuie sur "OK" la
propriété. méthode renvoie la valeur true. Elle renvoie false dans
le cas contraire...
var dimension=un_tableau.length;
Cette ligne retourne le nombre d'éléments de l'objet
Array appelé "un_tableau".

5. QU'EST-CE QU'UNE BOITE DE DIALOGUE?

Une boîte de dialogue est une fenêtre qui s'affiche au

premier plan suite à un événement, et qui permet

• Soit d'avertir l'utilisateur

• Soit le confronter à un choix Elle admet comme alert() un seul paramètre: une
chaîne de caractères...
• Soit lui demander de compléter un champ pour
Sa syntaxe est:
récupérer une informations
confirm('Chaîne de caractères');
confirm() est souvent utilisé dans une structure
Ce sont des méthodes de l'objet window. conditionnelle :
Ces boites de dialogue ont une mention Javascript, par if(confirm('Voulez-vous voir Mickey ?'))
exemple "Javascript user prompt" pour permettre de document.location.href='http://www.disney.fr'
savoir à l'utilisateur qu'il s'agit d'une boite d'invite de la
page en cours. En effet certains webmasters peu
scrupuleux pourraient faire croire qu'il s'agit d'une boite La méthode prompt()
windows et récupérer le mot de passe (Suite à une
erreur du fournisseur d'accès veuillez entrer votre login La méthode prompt fournit un moyen simple de
et votre mot de passe)... récupérer une information provenant de l'utilisateur, on
parle alors de boîte d'invite. La méthode prompt()
La méthode alert() requiert deux arguments:

La méthode alert() permet d'afficher dans une boîte • le texte d'invite

toute simple composée d'une fenêtre et d'un bouton • la chaîne de caractères par défaut dans le
OK le texte qu'on lui fournit en paramètre. champ de saisie

Voici sa syntaxe:
alert(nom_de_la_variable);
alert('Chaîne de caractères'); Sa syntaxe est donc la suivante:
alert('Chaîne de caractères' + nom_de_la_variable); Sa syntaxe est:

5
ENI RV. 6
var reponse = prompt('Posez ici votre question','chaîne </head><body>
par défaut'); </body></html>

Cette boîte d'invite retourne la valeur de la chaîne

saisie par l'utilisateur, elle retourne la valeur null si
jamais aucun texte n'est saisi... showModalDialog()

Exemple de prompt La méthode javascript showModalDialog(url,

arguments, parametres) est propre à Internet
<html> Explorer version>= 4.
<head> Elle permet d'avoir une boite de dialogue plus
<title>Prompt</title> personnalisée et dans laquelle des traitements peuvent
<meta http-equiv="Content-Type" content="text/html; être effectués.
charset=iso-8859-1">
</head> Elle est composée de trois parties :
- l'url de la page html.
<body bgcolor="#FFFFFF" text="#000000"> - l'argument (information) à faire passer dans la boite
<font face="Verdana, Arial, Helvetica, sans-serif" de dialogue.
size="3" color="#FF0000">Attention, - les paramètres de la boite de dialogue.
en informatique les nombres dits "décimaux"<br> La boîte de dialogue renvoie une valeur
s'écrivent avec un point, pas avec une (window.returnValue = "valeur") une fois fermée.
virgule.</font><br>
On l'écrit:
var m=showModalDialog("url de la page htmll" ,
<script language="JavaScript"> "argument" , "paramètre");
var resultat;
resultat = prompt("Entrez un nombre inférieur ou Les paramètre:
supérieur à 30", 29.789) - scroll ( yes|no ) affiche les scrollbarres
- center ( yes|no ) affiche la boîte center
if(resultat == null) - dialogWidth longueur de la boîte
alert("Vous ne voulez pas jouer ! Au-revoir.") - dialogHeight hauteur de la boîte
else if(isNaN(resultat)) - dialogTop position x de la boîte
alert("Entrée invalide : "+resultat) - dialogLeft position y de la boîte
else if(resultat < 30) - dialogHide masque la boîte
alert("Votre entrée : " + resultat + " est inférieure à - edge ( sunken|raised ) style des arêtes de la boîte
30") - help ( yes|no ) affiche l'icône d'aide
else if (resultat > 30) - resizable ( yes|no ) autorise le redimensionnement
alert("Votre entrée : " + resultat + " est supérieure à - status ( yes|no ) affiche la barre d'état
30") - unadorned ( yes|no ) affiche la boîte sans élément de
else contrôle
alert("Votre entrée : " + resultat + " est égale à 30")
</script> On l'écrit comme ceci :
</body> var m = showModalDialog("showmodaldialog.html", "",
</html> "dialogWidth=100; dialogHeight=100");

Exemple
Il semble que l'on ne puisse pas faire passer plusieurs
arguments.
Le seul moyen est de créer un Objet.
<html>
<html><head><title>Test utilisateur</title> <head>
<script language="JavaScript"> <title>Prompt</title>
 var m = showModalDialog("showmodaldialog.html","",
</script> "status=no; scroll=no; help=no; unadorned=yes");
6
ENI RV. 7
if(m==true){ itérative, dans d'autres fonctions et dans le corps de la
alert("le nom et prénom sont bons."); page.
}else{
alert("le nom et prénom ne sont pas bons."); Le code suivant, par exemple, définit une fonction
} nommée intitulée carré :
</script>
</body> function carre(nombre) { return nombre * nombre;}
</html>

Dans la page showmodaldialog.html pour recupérer Appel: var c= carre(4);document.write(" Carre: " +c);
l'objet mo:
<html> console.log(“Carre: “,carre(5));
<head>
<title>Prompt</title> Les paramètres primitifs (comme les nombres) sont
</head> passés à la fonction par valeur.
<body bgcolor="#FFFFFF" text="#000000">
<script language="JavaScript"> Une fonction peut être récursive, c'est-à-dire qu'elle
if(window.dialogArguments.prenom == "alias" && peut s'appeler elle-même.
window.dialogArguments.nom == "dmc"){
window.returnValue = true;
Voici la fonction qui calcule récursivement la factorielle
window.close();
d'un nombre :
}else{
window.returnValue = false;
window.close(); } function factorielle(n){ if ((n === 0) || (n === 1))

</script> return 1;
</body>
</html> else return (n * factorielle(n - 1));}

var c;
6 - LA DECLARATION DES FONCTIONS ET DES
INSTRUCTIONS
c = factorielle(3); // c reçoit la valeur 6
Les fonctions et instructions sont déclarées et codées
dans l'entête de la page et peuvent être appelées Si l'argument passé à la fonction est un objet (comme
ensuite à n'importe quel endroit de la page. Pour un objet Array ou un objet défini par l'utilisateur), et que
déclarer une fonction ou une instruction, on utilise le la fonction change les propriétés de cet objet, ces
mot-clé "function", suivi de son nom et des éventuels changements seront visibles en dehors de la fonction.
paramètres. Par exemple :

function ma_fonction(param1, param2) var mavoiture = {fabricant: "Honda", modèle: "Accord",

{
.... année: 1998};
}
function maFonction(monObjet) {
function mon_autre_fonction()
{ monObjet.fabricant = "Toyota";}
....
}
var x, y;

Le corps des fonctions et instructions est délimité par

x = mavoiture.fabricant; // x aura la valeur "Honda"
"{" et "}" dans lequel on place la déclaration des
variables locales, propres à la fonction, ainsi que
l'ensemble des traitements. maFonction(mavoiture);

Une fonction aura dans son corps une ou plusieurs y = mavoiture.fabricant; // y aura la valeur "Toyota"
instructions return qui permet de renvoyer une valeur // (la propriété fabricant
ou un objet. L'instruction return n'est pas obligatoire; on
a alors affaire à une instruction qui ne renvoie pas de Les expressions de fonction (l'expression function)
valeur.
On peut créer une fonction grâce à une expression de
Les fonctions déclarées dans l'entête de la page fonction. De telles fonctions peuvent être anonymes
peuvent être appelées elles-mêmes, de manière (ne pas avoir de nom correspondant). Par exemple,

7
ENI RV. 8
var carre = function (nombre) { return nombre * }
nombre };
Appeler des fonctions
// carre : une variable qui fait référence à la fonction
nom_fonction( arg1,arg2,…)
var x = carre(4); //x reçoit la valeur 16 : appel
Les fonctions doivent appartenir à la portée dans
Cependant, un nom peut être utilisé dans une laquelle elles sont appelées.
expression de fonction, ce afin de l'utiliser dans la
fonction (récursivité) En revanche, la déclaration d'une fonction peut être
faite après l'appel :
var factorielle =function fac(n) {return n < 2 ? 1 :
n*fac(n - 1) }; console.log(carré(5));

console.log(factorielle(3)); /* ... */

Il est possible de passer une expression de fonction function carre(n) { return n*n }
comme argument d'une autre fonction. Dans l'exemple
qui suit, la fonction map est définie et appelée avec Note : Cela ne fonctionne que pour les fonctions
une fonction anonyme comme premier argument : nommées

function map(f, a) { (function nomFonction(){}).

var resultat = []; // Créer un tableau Array Le code ci-dessous ne fonctionnera pas :

var i; console.log(carre); // La fonction vaut undefined

for (i = 0; i < a.length; i++) console.log(carre(5)); // TypeError: carré is not a

function
resultat[i] = f(a[i]);
var carre = function (n) {
return resultat;
return n * n;
}
}
Le code suivant :

var cube = function(x) {return x xx};//Une expression

de fonction Exemple d’appel des fonctions dans une page
:
map(cube, [0, 1, 2, 5, 10]); renverra le tableau [0, 1, 8, <HTML>
125, 1000]. <HEAD>
<SCRIPT language="Javascript">
En JavaScript, une fonction peut être définie selon une <!—
condition. function Moyenne(a,b){
return (a + b)/2 ;
Le fragment de code qui suit définit une fonction }
seulement si num vaut 0 : function Chargement() {
alert('Bienvenue sur le site');
}
var maFonction;
function Affiche(Texte) {
if (num === 0){ alert(Texte);
}
maFonction = function(monObjet) { //-->
</SCRIPT>
monObject.fabricant = "Toyota" </HEAD>
<BODY onLoad="Chargement();" >
}
<A href="#"
onClick="Affiche('Texte1');return(false)">Texte1</A>
8
ENI RV. 9
<A href="#"
onClick="Affiche('Texte2');return(false)">Texte2</A> L'instruction SWITCH est une variante de ELSE IF
<A href="#" onClick=" alert(‘Moyenne de 7 et 8 : ‘ + mais elle reste moins souple car elle n'accepte que des
Moyenne(7,8) ) égalités.
">Cacul moyenne</A>
</BODY> var x = 10;
</HTML> switch (x){
case 2 : alert("2 "); break;
7. STRUCTURE DU JAVASCRIPT case 4 :alert("4"); break;
case 10 :alert("10");break;
Le javascript a une structure de programmation proche default :alert("nul");
du langage C, moins riche naturellement. }

- Grouper des instructions - Les structures de boucles

Comme en C, les instructions sont regroupées par les Comme en C, le javascript reconnaît les boucles
accolades { et }. Dans un script, il doit y avoir autant itératives et les boucles conditionnelles.
d'accolades ouvertes que d'accolades fermées. Les boucles itératives
Le groupement d'instructions est utile. Il permet par Une boucle itérative exécute un groupe d'instructions
exemple de regrouper les instructions d'une fonction : tant que le compteur d'itérations n'a pas atteint une
function somme(a,b) { valeur donnée.
var sum=a+b; Voici la syntaxe générale
return sum;
} for(initialisation;condition;opération) {
Cette fonction inutile retourne la somme de deux // Vos instructions
paramètres. }

- Le test conditionnel Initialisation permet d'initialiser la valeur du compteur.

Condition teste si le compteur a atteint la valeur limite.
Test simple Si condition est vraie, la boucle continue.
L'instruction if permet de diriger l'exécution du script operation permet d'incrémenter le compteur à chaque
suivant le résultat d'un test. passage de la boucle.
Il y a 2 moyens d'utiliser if.
Si l'action à réaliser tient en une instruction : Voici quelques exemples concrets.
Faire une boucle pour i variant de 0 à 100 inclus par
if (age<18) alert("Vous devez être majeur"); pas de 1
for (var i=0; i<=100; i=i+1)
Ici, si l'âge du visiteur est inférieur à 18 ans, un
message est affiché. Faire une boucle pour i variant de 10 à 0 inclus par pas
de -1
Si l'action à réaliser tient en plusieurs instructions : for (var i=10;i>0;i=i-1)
if (age<18) {
alert("Vous devez être majeur"); Voici une application mathématique. Il s'agit de calculer
window.location="mineur.php3"; la somme des nombres de 1 à N.
} Entrez N dans le champ texte et cliquez sur le bouton :
N=
Ici, si l'âge du visiteur est inférieur à 18 ans, un La fonction qui calcule cette somme est déclarée :
message est affiché et le visiteur est redirigé vers la function somme(N) {
page mineur.php3. var sum=0;
for (var i=1;i<=N;i=i+1) {
Test Si - Sinon sum=sum+i;
}
Reprenons notre dernier exemple : alert("Somme de 1 à "+N+" = "+sum);
if (age<18) { }
alert("Vous devez être majeur");
window.location="mineur.php3";
Astuces d'écriture
} else {
Le javascript reprend du C la syntaxe particulière pour
window.location="majeur.php3"; les additions et soustractions.
} Ainsi, écrire a=a+1; est équivalent à a++;
Ici, si le visiteur est mineur, il est redirigé vers mineur.php3, Et a=a-1; est équivalent à a--;
sinon il est redirigé vers la page majeur.php3.
Dans la même idée, on peut aussi remplacer a=a+5;
- L'instruction SWITCH par a+=5;
9
ENI RV. 10
}
Vous trouverez donc souvent les boucles for avec cette Ici, tant que condition est vraie, la boucle est exécutée.
syntaxe : On peut imaginer de demander au visiteur de saisir un
for(var i=0;i<100;i++) nombre supérieur à 100 et de recommencer tant que
ce nombre n'est pas supérieur à 100.
Exercice 2 Voici la fonction appelée par le bouton :
Le second exercice est un mélange de FOR et IF. function demander() {
Le but de cet exercice est de créer une boucle avec var nb=0;
while (nb<=100) {
FOR.
nb=prompt("Entrez un nombre supérieur à 100");
La condition initiale i = 2. }
La condition de répétition i < 10. alert("Merci !");
Le bloc d'instruction sera { document.write("valeur de i }
est égale à"+i+"<BR>"); }. Ici, la boucle est répétée tant que nb n'est pas
Mais nous voulons que lorsque i = 5, supérieur à 100. Dès que nb est plus grand que 100,
le texte change pour { document.write("valeur de i est on quitte la boucle et le message Merci est affiché.
8. ECRIRE DU TEXTE
égale à 5 "); }.
La méthode write
Le script à taper sera : La méthode write() de l'objet document permet de
for (i=2; i<10; i++){ modifier de façon dynamique le contenu d'une page
if (i==5){ HTML, on peut l'utiliser de différentes façons:
document.write("valeur de i est égale à 5 "); • soit en passant directement le texte en
} paramètres:
document.write("valeur"+i+"<BR>"); document.write("bonjour");
qui aura pour effet de concaténer la chaîne
}
'bonjour' à l'endroit où est placé le script
• soit en passant le texte par l'intermédiaire
Pour le troisième exercice nous voulons que pour la d'une variable:
valeur i = 5 stopper la boucle. Chaine='bonjour';
Le script à taper sera : document.write(Chaine);
for (i=2; i<10; i++){ qui aura pour effet de concaténer la chaîne
if (i==5){ 'bonjour' (contenue dans la variable Chaine)à
l'endroit où est placé le script
document.write("valeur de i est égale à 5, je stoppe
• soit en utilisant les deux:
la boucle");
Chaine='bonjour';
break; document.write('je vous passe le' +
} Chaine);
document.write("valeur"+i+"<BR>"); qui aura pour effet de concaténer la chaîne
} 'bonjour' (contenue dans la variable Chaine) à
Le dernier exercice est un mélange de FOR et la suite de la chaîne de caractère 'je vous
SWICHT. Nous voulons que pour la valeur i = 2 écrire passe le' dans la page HTML
Il est ainsi possible d'utiliser des balises HTML à
"c'est un deux", l'intérieur même de la méthode write:
pour la valeur i = 8 "écrire "c'est un huit". document.write('<font
for (i=2; i<10; i++){ color="#FF0000">Bonjour</font>');
switch (i){
case 2 : document.write("c'est un deux"); Lorsque nous écrivons en javascript du texte dans la
break; page, nous pouvons formater le texte en gras,
italique..., à la seule condition que la chaîne à formater
case 8 : document.write("c'est un huit");
soit de type String().
break; Pour cela, vous devez utiliser la méthode javascript
default : document.write("valeur" +i +"<BR>"); toString() ou String().
}
}
La méthode writeIn
- Les boucles conditionnelles
La méthode writeIn fonctionne exactement comme la
Il peut être utile de faire une boucle tant qu'une méthode write à la seule différence qu'elle ajoute un
condition est vraie. retour chariot à la fin de la chaîne.
La boucle "tant que" est déclarée par while :
9. LES OBJETS DU NAVIGATEUR
while (condition) {
// Les instructions de la boucle
10
ENI RV. 11
Lorsque vous ouvrez une page Web, le navigateur crée précédemment visités)
des objets prédéfinis correspondant à la page Web, à
l'état du navigateur, et peuvent donner beaucoup document Informations sur le contenu
d'informations qui vous seront utiles. de la fenêtre (éléments qui
Les objets de base du navigateur sont les suivants: composent la page)
• navigator: qui contient des informations sur le
navigateur de celui qui visite la page images Référence des images
présentes dans la page
• window: c'est l'objet où s'affiche la page, il
contient donc des propriétés concernant la forms Référence des formulaires
fenêtre elle-même mais aussi tous les objets- présents dans la page
enfants contenus dans celle-ci
• location: contient des informations relatives à links Référence des liens
l'adresse de la page à l'écran présents dans la page
• history: c'est l'historique, c'est-à-dire la liste de anchors Référence des ancrages
liens qui ont été visités précédemment présents dans la page
• document: il contient les propriétés sur le
contenu du document (couleur d'arrière plan,
titre, ...) Comment accéder à un objet?
Les objets du navigateur sont classés dans une
hiérarchie qui décrit la page affichée à l'écran, et qui Pour accéder à un objet du navigateur, il faut parcourir
permet d'accéder à n'importe quel objet grâce à une la hiérarchie du navigateur, en partant du sommet
désignation dépendant de la hiérarchie (on part du (l'objet window), puis en parcourant tous les maillons
sommet puis on descend l'arborescence). jusqu'à atteindre l'objet désiré. La syntaxe est
Dans cette hiérarchie, les descendants d'un objet sont window.objet1.objet2.objet3.objet_vise .
des propriétés de ces objets mais peuvent aussi être
des objets qui contiennent eux même des propriétés... Pour accéder modifier une propriété de l'objet visé il
Voyons voir à quoi ressemble cette hérarchie: suffit de rajouter un point, puis le nom de la propriété.
Certaines propriétés sont modifiables, c'est-à-dire que
dynamiquement on va pouvoir modifier un élément (du
texte, une image, ...). Certaines propriétés sont par
contre en lecture seule, c'est-à-dire qu'elles permettent
Niveau1 Niveau2 Niveau3 Commentaire uniquement de récupérer des informations mais qu'on
ne peut pas les modifier...
navigator Informations sur le browser
utilisé 10. L’OBJET WINDOW
window Gestion de la fenêtre
d'affichage L'objet window est l'objet par exellence dans
Javascript, car il est le parent de chaque obet qui
parent, Désignation de la sous- compose la page web, il contient donc:
frames, fenêtre
self, top • l'objet document: la page en elle-même
location Informations sur • l'objet location: le lieu de stockage de la page
l'emplacement de la page • l'objet history: les pages visitées
précédemment
history Accès à l'historique (sites • l'objet frames: les cadres (division de la fenêtre
en sous-fenêtres)

Les propriétés de l'objet window

propriété description lecture seule Exemples

<A href='#'>Passez la souris ici</A>
<SCRIPT language=javascript>
Il s'agit du message qui s'affiche par non, modifiable à tout
defaultstatus window.defaultStatus="Ceci est le texte
défaut dans la barre d'état du navigateur moment
par défaut";
</SCRIPT>
Tous les éléments de
Il s'agit d'un tableau qui contient les
frames frames sont en lecture
cadres présents dans la fenêtre
seule

11
ENI RV. 12
Nous allons créer un bouton pour
charger une autre page.
function change(){
window.location="../index.html";
}
Pour récupérer l'url complète de la page
1.
location en cours.
Dans la balise HTML ou XHTML
body :
<form>
<input type="button" value="changer"
onclick="change()">
</form>
nombre de cadres (nombre d'éléments
length Lecture seule
du tableau frames
nom de la fenêtre dans laquelle on se
name Lecture seule
trouve
Il s'agit de la fenêtre qui englobe celle
Lecture seule, contient
parent dans laquelle on se trouve (si il y en a
des propriétés
une..)
Synonyme de la fenêtre actuelle Lecture seule, contient
self
(redondance ou précision?) des propriétés
window.status="Vous êtes sur le site de
non, modifiable à tout
DMC";
Il s'agit d'un message temporaire qui moment, vous devez
status s'affiche dans la barre d'état du retournez la valeur true
Pour supprimer le texte dans la barre des
navigateur suite à un événement pour l'utiliser avec
statuts :
onMouseOver
window.status="";
Il s'agit de la fenêtre de plus haut niveau,
Lecture seule, contient
Top celle qui contient tous les cadres
des propriétés
(frames)
Lecture seule, contient
Window Il s'agit de la fenêtre actuelle...
des propriétés
bgColor :
récupérer et de modifier la couleur de document.bgColor = "#993333";
fond de votre page HTML.

lastModified savoir quand la page HTML a été document.lastModified;

modifiée.

récupérer et de modifier la couleur des document.linkColor = "#993333

linkColor liens de votre page HTML.

vlinkColor récupérer et de modifier la couleur document.vlinkColor = "#993333";

des liens visités de votre page
HTML.
alinkColor document.alinkColor = "#993333";
récupérer et modifier la couleur des
liens actifs de votre page HTML.

title récupérer et modifier le titre de votre document.title = "mon titre";

page HTML.

• les propriété top et parent permettent de

Les propriétés window, self, frames, top et parent remonter dans la hiérarchie pour atteindre des
permettent de naviguer dans le système de sous- fenêtre de niveau supérieur, notamment pour
fenêtres, appelées frames. "sortir" des frames...
• les propriétés self et window sont les mêmes, • la propriété frames est un tableau qui permet
elles permettent de désigner la page en cours, de cibler un cadre spécifique faisant partie de
leur seul but est d'accentuer la précision de la la fenêtre où on se trouve. Pour désigner un
hiérarchie pour une meilleure lecture du code. cadre on utilise soit la notation
en effet, self.name est plus explicite que name window.frames[i] où i représente le numéro du

12
ENI RV. 13
cadre, soit window.nom_du_cadre en pixels)
désignant le cadre directement par le nom
Position verticale en pixels sur
qu'on lui a assigné dans la balise frameset. Top (en pixels)
l'écran
Les méthodes de l'objet window Popup en plein écran (version 5
Fullscreen (yes/no)
L'objet window possède des méthodes relatives à et +)
l'ouverture et à la fermeture des fenêtres.
Une méthode est une fonction associée à un objet, Par exemple,
c'est-à-dire une action que l'on peut faire exécuter à un open("page.html");
objet.. Une méthode s'appelle un peu comme une open("page.html", "target");
propriété, c'est-à-dire de la manière suivante: open("", "");
open("page.html", "target", "toolbar=yes,
window.objet1.objet2.methode() directories=yes, status=yes, menubar=yes, width=100,
height=100, scrollbars=yes, location=yes,
- Les méthodes alert(), confirm() et prompt() resizable=yes") ;
var Nom_fenetre = window.open("_page.html", "cible",
"width=100, height=100");
Les méthodes alert(), confirm() et prompt() sont des var Nom_fenetre = window.open("page.html", "cible",
méthodes qui font apparaître une boîte de dialogue. "top=100, left=100");
var Nom_fenetre =
window.open("_page.html" ,"cible" ,"width=200,
- Les méthodes open(), et close() height=200, resizable=yes, scrollbars=yes,
menubar=yes, status=no, location=yes, toolbar=yes");
Les méthodes open() et close() sont bien évidemment
destinées à permettre l'ouverture et la fermeture de Si vous voulez ouvrir une fenêtre virtuelle ne mettez
fenêtres. Toutefois la syntaxe de la méthode open() est rien à l'emplacement de la page :
longue car elle admet un nombre important de var Nom_fenetre = window.open("", "cible", "width=100,
paramètres: height=100, _les_autres_attributs");
La méthode open() permet d'ouvrir une nouvelle
fenêtre popup, voici sa syntaxe: Quelques exemples de combinaisons d'options :
window.open("URL",["nom_de_la_fenetre"],
["options_de_la_fenetre"]); Popup positionné avec Position fixe en haut à gauche :
OuvrirPopup('popup.html','','top=10,left=10')
La méthode javascript open() est composée de trois
parties : Popup minimaliste avec Aucune barre de menu, non
- la page à ouvrir (url), l'url de la page qui sera affichée redimensionnable, taille fixe :
dans la nouvelle fenêtre OuvrirPopup('popup.html', '', 'resizable=no,
- la cible (target. _self , _blank.....) location=no, width=200, height=100, menubar=no,
- ces caractéristiques (attributs). status=no, scrollbars=no, menubar=no')
Il est préférable de l'associer à une variable, ce qui Popup fullscreen avec Page en plein écran (version 5
nous permettra de manipuler la pop up: et +). Faire un ALT [F4] pour fermer la fenêtre :
var m = open("page.html","target","options"); OuvrirPopup('popup.html','','fullscreen=yes')
Les options de la fenêtre sont les suivantes:
Voici la fonction javascript qui ouvre un popup pour
tous ces exemples :
Option description
Affiche ou non les boutons de
directory = yes/no
navigation <SCRIPT language=javascript>
Location = yes/no Affiche ou non la barre d'adresse function OuvrirPopup(page,nom,option) {
Affiche ou non la barre de menu window.open(page,nom,option);
menubar = yes/no }
(fichier, edition, ...)
</SCRIPT>
Définit si la taille de la fenêtre est
resizable = yes/no
modifiable ou non
Affiche ou non les ascenceurs
scrollbars = yes/no • les options doivent être saisies les unes
(barres de défilement)
après les autres, séparées par des
status = yes/no Affiche ou non la barre d'état
virgules, sans espace
toolbar = yes/no Affiche ou non la barre d'outils
width = largeur (en • l'ensemble des options doit être encadré
Définit la largeur
pixels) par les guillemets
height = hauteur (en Définit la hauteur

13
ENI RV. 14
Chacune des fenêtres doit cependant être fermée, il Pour un bouton (image), le code sera:
faut donc se servir de la méthode close() qui permet de <A href="#"
fermer une fenêtre. onClick="self.close('nom_de_la_fenetre_');return(false)
"><img src="nom_de_l_image"></A>
La méthode close() requiert le nom de la fenêtre
comme argument, il suffit donc de créer un bouton Il est bien évidemment possible d'utiliser cette
(image, hypertexte, ou bouton de formulaire) qui procédure avec tous les gestionnaires d'événement, en
permettra de fermer cette fenêtre. utilisant par exemple une syntaxe proche de celle-ci:
<A href="#"
Pour un lien hypertexte, le code sera: onMouseOver="self.close('nom_de_la_fenetre_');"
<A href="#" ><img src="nom_de_l_image"></A>
onClick="self.close('nom_de_la_fenetre_');return(false)
">Cliquez ici pour fermer la fenêtre</A>

LES AUTRES METHODES DE L’OBJET WINDOW

Méthodes Description Exemple

window.close(). <html>
<head>
Une pop up peut être fermée de deux façons : <title>Info Bulle</title>
Soit on la ferme à partir de la fenêtre qui l'a <script language="JavaScript">
ouverte, soit à partir d'elle même. var fen;
A partir de la fenêtre qui l'a ouverte : Pour cela la function ouvrir()
pop up doit être ouverte comme ceci : {
var m = open ("page.html", "target", "attribut"); fen=open("page.html", "mafen", "toolbar=yes, width=100,
m.close(); height=100, scrollbars=yes") ;
}
A partir d'elle même : window.close(); function fermer_popup()
{ fen.close(); }

function fermer_window()
{ window.close(); }
</script>
</head>
<body bgcolor="#FFFFFF">
<input type="button" value="Ouvrir" onclick="ouvrir()"
title="Ouvrir" /> <br/>
<input type="button" value="fermer la fenetre popup"
onclick="fermer_popup() »> <BR>
<input type="button" value="fermer la fenetre en cours"
onclick="fermer_window()” >
</body>
</html>
: window.blur() <A href="javascript:window.blur()">Cacher la fenêtre</A>
Enlève le focus à la fenêtre
Rend la fenêtre invisible, en arrière plan en lui
supprimant le focus.

window.focus(). Nous allons créer un bouton pour mettre la fenêtre en premier

plan.
de positionner la fenêtre en premier plan. Dans la balise HTML ou XHTML script :
Une pop up peut être mise en avant de deux function change(){
façons. window.focus();
Soit on met le focus à partir d'une autre fenêtre, }
soit à partir d'elle même.
A partir d'une autre fenêtre : Dans la balise HTML ou XHTML body :
Pour cela la pop Up doit être ouverte comme ceci : <form>
var m = open ("page.html", "target", "attribut"); <input type="button" value="changer" onclick="change()">
pour lui donner le focus :m.focus(); </form>

14
ENI RV. 15
A partir d'elle même : window.focus();

window.setInterval(String code, Integer delai) <SCRIPT language=javascript>

function Horloge() {
Lance un traitement à intervalle régulier var dt=new Date();
window.status=dt.getHours()+":"+dt.getMinutes()
window.clearInterval(Object timer) +":"+dt.getSeconds();
}
Arrête l'exécution d'un traitement timer var timer=setInterval("Horloge()", 1000);
précédemment défini avec setInterval(). </SCRIPT>
<A href='javascript:clearInterval(timer)'>Arrêter l'horloge</A>

timerID =
setTimeout("fonction()",millisecondes); Exemple2 :
Déclenche une minuterie et appelle le code
javascript fonc dans delai millisecondes <html><head><title>set & clearTimeout</title>
pour lancer la fonction "fonction( )" après un délai <script language="JavaScript">
de "millisecondes' :
var timerId=""; //Identificateur du temporisateur
clearTimeout(timerId); var tim2Id="";
Pour arrêter le lancement de la fonction avant var marche=false;
expiration du délai :
function Temporisation(){
if(!marche) {
Exemple1 Minuterie simple qui affiche l'heure timerId=setTimeout("Alarme3s()",3000);
dans la barre de status. tim2Id=setTimeout("Arret()",3000);
marche=true;
<SCRIPT language=javascript> }
function Timer() { else {
var dt=new Date() clearTimeout(timerId);
window.status=dt.getHours() clearTimeout(timer2Id);
+":"+dt.getMinutes()+":"+dt.getSeconds(); marche=false;
setTimeout("Timer()",1000); }
} }
Timer(); function Arret(){marche=false;}
</SCRIPT> function Alarme3s(){alert("3 secondes se sont écoulées.")}
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">

: window.print() Imprimer la page<A

Imprime la page en cours href="javascript:window.print()">Imprimer</A>
window.moveTo(x,y) Nous allons créer un bouton pour déplacer la fenêtre.
Déplacer la fenêtre. Dans la balise HTML ou XHTML script :
- x, position horizontale en pixel. function change(){
- y, position verticale en pixel. window.moveTo(0,-10);
x, y sont les coordonnées sur lesquelles le coin }
haut gauche de la fenêtre va se positionner.
Dans la balise HTML ou XHTML body :
<form>
<input type="button" value="changer" onclick="change()">
</form>
window.moveBy(x,y) Nous allons créer un bouton pour déplacer la fenêtre.
Dans la balise HTML ou XHTML script :
Déplacer la fenêtre. function change(){ window.moveBy(-10,10);
- x, valeur de type Number positive ou négative }
15
ENI RV. 16
en pixel.
- y, valeur de type Number positive ou négative Dans la balise HTML ou XHTML body :
en pixel. <form>
x, y sont le nombre de pixels dont va se <input type="button" value="changer"
déplacer le coin haut gauche de la fenêtre. onclick="change()">
</form>
window.resizeBy(x,y) Exemple 1

redimensionner la fenêtre. Nous allons créer un bouton pour redimensionner la fenêtre.

Dans la balise HTML ou XHTML script :
- x, valeur de type Number positive ou négative en function change(){
pixel. window.resizeBy(-10,10);
- y, valeur de type Number positive ou négative en }
pixel.
x,y sont le nombre de pixels qui vont être rajoutés Dans la balise HTML ou XHTML body :
à la taille actuelle de la fenêtre. <form>
<input type="button" value="changer" onclick="change()">
</form>

Exemple 2

<SCRIPT language=javascript>
function TailleFenetre(deltaX, deltaY) {
window.resizeBy(deltaX, deltaY);
}
</SCRIPT>
<A href="javascript:TailleFenetre(-10,0)">Réduire la largeur de la
fenêtre</A>

window.resizeTo(x,y). Nous allons créer un bouton pour redimensionner la fenêtre.

Dans la balise HTML ou XHTML script :
redimensionner la fenêtre. function change(){
- x, valeur de type Number positive ou window.resizeTo(250,250);
négative en pixel. }
- y, valeur de type Number positive ou négative
en pixel. Dans la balise HTML ou XHTML body :
x, y sont la quantité de pixels à ajouter à la <form>
longueur et la quantité à ajouter à la hauteur. <input type="button" value="changer" onclick="change()">
</form>

• la méthode back permet d'aller à l'URL

11. L’OBJET HISTORY précédent dans l'historique
• la méthode forward permet d'aller à l'URL
L'objet history est une popriété de l'objet document. Il suivant dans l'historique
contient l'historique du navigateur, c'est-à-dire • la méthode go(variable) permet d'aller à un
l'ensemble des URL (adresses des pages) visitées par des URL de l'historique. Le paramètre variable
l'utilisateur. Ces adresses sont accessibles par le est un nombre entier (positif ou négatif) qui
navigateur en cliquant sur les boutons suivants et détermine le nombre de pages relatif auquel se
précédent. L'objet history offre des objets et des trouve l'URL désiré. Il est possible d'entrer une
méthodes qui permettent de naviguer dans cette liste chaîne de caractères en paramètre, auquel cas
d'adresse directement à partir de la page en cours. le navigateur cherchera la page de l'historique
la plus proche contenant cette chaîne
Les propriétés et les méthodes de l'objet history
Par exemple,
Les propriétés et les méthodes de l'objet history sont
peu nombreuses, elles peuvent néanmoins être très <input type="button" value="Back"
utile pour aider à la navigation. Onclick="javascript:window.history.back()">
<input type="button" value="Actualiser"
Onclick="javascript:window.history.go(0)">
• la propriété length permet de connaître le
nombre d'objets dans l'historique

16
ENI RV. 17
12. L'OBJET NAVIGATOR

Les particularités de l'objet navigator

L'objet navigator est un objet qui permet de récupérer des informations sur le navigateur qu'utilise le visiteur. Toutes
les propriétés de l'objet navigator sont en lecture seule, elles servent uniquement à récupérer des informations et non
à les modifier .

Les propriétés de l'objet navigator

Les propriétés de l'objet navigator sont peu nombreuses, elles permettent en fait de retourner des portions de
l'information sur votre navigateur qui est en fait une chaîne de caractères.

Propriété Description Pour votre navigateur

retourne le code du navigateur. Un navigateur a pour nom de
navigator.appCodeName code Mozilla (je ne sais pas pourquoi), cette information semble Mozilla
donc inutile
retourne le nom du navigateur (la plupart du temps la marque).
navigator.appName Cette propriété est utile pour différencier les navigateurs de Netscape
Netscape et de Microsoft)
retourne la version du navigateur. Cette propriété prend la forme
suivante:
Numéro de version( plateforme (système d'exploitation),
nationalité)
navigator.appVersion 5.0 (Windows)
Elle est utile pour connaître le système d'exploitation de
l'utilisateur, mais surtout, associée avec la propriété
navigator.appName elle permet de connaître les fonctionnlités
que supporte le navigateur de votre visiteur.
retourne la chaîne de caractère qui comprend toutes les
Mozilla/5.0 (Windows NT
informations. Les propriétés ci-dessus offrent un moyen pratique
5.1; rv:7.0a2)
navigator.userAgent de récupérer une partie de cette information (cette chaîne étant
Gecko/20110726
de longueur variable, il ne serait pas évident d'en récupérer une
Firefox/7.0a2
portion sans les autres propriétés...)

Les navigateurs ne supportent pas tous le Javascript de la même façon, ainsi, suivant les instructions Javascript que
l'on utilisera (suivant qu'il s'agit de Javascript 1.0, 1.1, ou 1.2) il faudra exécuter des instructions différentes. Par
respect pour vos visiteurs il est généralement bon de mettre en début de script une fonction qui permet de déterminer
la version du navigateur (et/ou sa marque) et exécuter les instructions appropriées en fonction du résultat.

Voici une grille avec les navigateurs, les valeurs de propriétés et quelques fonctionalités associées à ceux-ci:

Navigateur Version navigator.appName navigator.appVersion Javascript

Netscape Navigator 2 Netscape 2.0 (Win95; I) 1.0
Netscape Navigator 3 Netscape 3.xx (Win95; I) 1.1
Netscape Communicator 4 Netscape 4.xx (Win95; I) 1.1
Microsoft Internet Explorer 3 Microsoft Internet Explorer 2.0 (compatible; MSIE 3.0x; Windows 95) 1.0
Microsoft Internet Explorer 4 Microsoft Internet Explorer 4.0x (compatible; MSIE 4.0x; Windows 95) 1.2
Microsoft Internet Explorer 5 Microsoft Internet Explorer 5.xx (compatible; MSIE 5.0x; Windows 95) 1.2
Exemple de script

Il est parfois bon de pouvoir exécuter un ensemble d'instructions différent selon que le navigateur utilisé est Netscape
Navigator ou Microsoft Internet Explorer, voici un exemple de petit script permettant la distinction:

document.write(navigator.userAgent);
// Version = navigator.appVer;
Nom = navigator.appName;

17
ENI RV. 18

if (Nom == 'Netscape') {
placer ici les instructions à exécuter s'il s'agit de Netscape Navigator 4 ou supérieur
}

if (Nom == 'Microsoft Internet Explorer') {

placer ici les instructions à exécuter s'il s'agit de Microsoft Internet Explorer 4 ou supérieur
}

Une méthode améliorée si jamais on a souvent besoin de faire le test de navigateur, car l'accès à l'objet navigator
n'est effectué qu'une seule fois. Ensuite deux variables booléenne sont utilisées, et le test consiste uniquement à
regarder si la variable contient 1 au 0 et le navigateur n'a pas besoin de comparer la chaine nom à chaque test de
navigateur...

Nom = navigator.appName;
ns = (Nom == 'Netscape') ? 1:0
ie = (Nom == 'Microsoft Internet Explorer') ? 1:0

if (ns) {
placer ici les instructions à exécuter s'il s'agit de Netscape Navigator 4 ou supérieur
}

if (ie) {
placer ici les instructions à exécuter s'il s'agit de Microsoft Internet Explorer 4 ou supérieur
}

Imaginons que l'on veuille maintenant afficher du DHTML (HTML dynamique, c'est-à-dire dont les objets peuvent
bouger et être modifiés à loisir...), il faut alors vérifier que les versions des navigateurs sont supérieures à 4 (seuls
Netscape Navigator 4 (ou supérieur) et Microsoft Internet Explorer 4 (ou supérieur) le supportent.

Voici le script permettant de vérifier que les versions sont supérieures à 4:

Nom = navigator.appName;
Version = navigator.appVer;
ns4 = (Nom == 'Netscape' && Version >= 4 ) ? 1:0
ie4 = (Nom == 'Microsoft Internet Explorer' && Version >= 4 ) ? 1:0
if (ns4) {
placer ici les instructions à exécuter s'il s'agit de Netscape Navigator 4 ou supérieur
}

if (ie4) {
placer ici les instructions à exécuter s'il s'agit de Microsoft Internet Explorer 4 ou supérieur
}

De plus, Navigator possède une méthode intéressante : la méthode javaEnabled(), qui détermine si Java a été activé
sur le navigateur ou pas.

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
document.writeln("Nom du navigateur"+navigator.appName);
document.writeln("Version:"+navigator. appVersion);
document.writeln("Langue:"+navigator. platform);
document.writeln("En-tête du protocole HTTP:"+navigator. userAgent);
document.writeln("Langue"+navigator. language );
if(navigator.appCodeName == "Mozilla") alert("un navigateur puissant");
if(navigator.javaEnabled())
{
document.write("<applet code=\"ticker.class\" width=\"150\" height=\"25\">");
document.write("<\/applet>");
18
ENI RV. 19
}
</script>
</body></html>

La propriété geolocation de l’objet Navigator

Pour tenter de récupérer la localisation des visiteurs, on utilise la méthode getCurrentPosition() de l’objet geolocation
pour obtenir la latitude et la longitude de l’utilisateur si on y a accès.
Tout d’abord, on crée une fonction auto-invoquée (fonction nommée) qui va vérifier si les informations de localisation
sont disponibles ou pas.
En effet, si celles-ci sont disponibles, loc ne sera pas vide, et donc le test if loc == true sera vérifié.
Si la condition est vérifiée, notre fonction auto-invoquée exécute la méthode getCurrentPosition() qui, rappelons le,
prend une autre méthode en argument.
Si la condition n’est pas vérifiée, un message d’erreur est simplement renvoyé.
Finalement, notre fonction coordonnees se charge de récupérer la latitude et la longitude correspondant à
l’emplacement du visiteur.
Pour cela, nous allons devoir utiliser les propriétés coords, latitude et longitude.

13. L'OBJET IMAGE

- une référence numérique de 0 à X.
Déterminer l'image 0 correspond à la première balise IMG trouvée dans
votre page HTML, 1 la seconde balise IMG ...
document.images[Numbre]
Nous pouvons atteindre en javascript une image de
deux façons.
- une référence par rapport l'attribut NAME ou ID de la
Chaque image dans le document HTML ou XHTML à
balise HTML ou XHTML <IMG> :
une référence.

19
ENI RV. 20
<img src="image.gif" width="140" height="76"
name="identifiant"> alert(document.images.identifiant.width);
XHTML //140
<img src="image.gif" width="140" height="76"
id="identifiant"> La propriété javascript
document.images.identifiant document.images["identifiant"].width renvoie une
valeur de type Number dont l'unité est le pixel.
Attention, la valeur de "identifiant" doit être unique.
La propriété javascript
La propriété javascript document.images.length document.images["identifiant"].width accepte
renvoie un tableau contenant tous les objets image de comme valeur :
la page. - un nombre entier dont l'unité est le pixel.
Pour parcourir l'ensemble des images : document.images.identifiant.width =150;
for(var i = 0; i < document.images.length; i++){
alert(document.images[i].src) Attention, la longueur ne peut être changée (sauf dans
} les navigateurs récents, Firefox, Internet explorer >5.5).

La propriété javascript La propriété javascript

document.images["identifiant"].src renvoie l'url de document.images["identifiant"].border permet de
l'image. connaître la valeur de l'attribut border d'une image.
Cette url peut être absolue
("http://aliasdmc.fr/image/images.gif") ou relative <img src="image.gif" width="140" border="0"
("image/images.gif") suivant le navigateur. height="76" name="identifiant">

<img src="image.gif" width="140" height="76" alert(document.images.identifiant.border);

name="identifiant"> //0

alert(document.images.identifiant.src); La propriété javascript

//image.gif document.images["identifiant"].border renvoie
comme valeur :
La propriété javascript - un nombre entier ou chaîne vide si l'attribut n'est pas
document.images["identifiant"].src accepte comme spécifié.
valeur :
- url relative ou absolue d'un image. La propriété javascript
document.images["identifiant"].src = "nouvelle URL"; document.images["identifiant"].border accepte
comme valeur :
La propriété javascript - un nombre entier.
document.images["identifiant"].height permet de document.images["identifiant"].border=5;
connaître la hauteur de l'image.
<img src="image.gif" width="140" height="76"
name="identifiant"> La propriété javascript
document.images["identifiant"].alt permet de
alert(document.images.identifiant.height); connaître la valeur de l'attribut ALT.
//76
La propriété javascript
La propriété document.images["identifiant"].height document.images["identifiant"].alt renvoie comme
javascript renvoie une valeur de type Number dont valeur :
l'unité est le pixel. - un chaîne de caratère (String)

La propriété javascript <img src="image.gif" width="140" alt="coucou"

document.images["identifiant"].height accepte height="76" name="identifiant">
comme valeur :
- un nombre entier dont l'unité est le pixel. alert(document.images.identifiant.alt);
document.images.identifiant.height=150; //coucou
Attention, la hauteur ne peut être changée (sauf dans La propriété javascript
les navigateurs récents, Firefox, Internet explorer >5.5). document.images["identifiant"].alt accepte comme
valeur :
- un chaîne de caratère (String).
La propriété javascript document.images["identifiant"].alt="blabal";
document.images["identifiant"].width permet de
connaître la longueur de l'image. Attention, l'attribut alt ne peut être changée (sauf dans
<img src="image.gif" width="140" height="76" les navigateurs récents, Firefox, Internet explorer >5.5).
name="identifiant">
20
ENI RV. 21
Déclaration 14. L'objet link (lien)

Pour changer une image, il faut d'abord la déclarer.

Grâce à ces propriétés javascript, vous pourrez
On la déclare : changer à tout moment l'url de vos liens et sa target...
var Nom = new Image(); document.links[ N ]
L'objet document.links[ N ] permet d'atteindre un lien
Il faut ensuite lui donner son emplacement. (lien normal et ancre). N étant un nombre entier
On le note :
var Nom.src = "url"; Dans une page HTML ou XHTML, les liens sont
numérotés à partir de 0.
Les rollovers
On peut aussi récupérer un lien précis en ciblant son
attribut ID :
Exercice
var monlien = document.getElementById("id")
Dans cet exercie javascript nous allons créer un Attention, si vous voulez accéder à un lien de votre
rollover. page HTML, il faut :
Les deux images à intervertir au passage de la souris.
- mettre votre script Javascrit après la déclaration
<img src="exemple/images/bouton.gif" width="75" HTML du lien.
height="24" border="0"> - ou faire appel à l'attribut onload de la balise body.
<img src="exemple/images/boutonb.gif" width="75"
height="24" border="0"> Exemple qui ne marche pas :
<script>
Le changement s'effectuera au passage de la souris alert(document.links["identifiant"].href)
soit "onMouseOver" et "onMouseOut" pour rétablir </script>
l'image. <a href="http://aliasdmc.fr/links.html#a">Lien</a>
Exemple qui marche :
- La première étape consiste a mettre dans le corps du <a href="http://aliasdmc.fr/links.html#a">Lien</a>
document HTML, la première image et de lui rajouter <script>
un nom grâce à l'attribut name. alert(document.links[0].href)
</script>
Ce qui donne par exemple :
<img src="exemple/images/bouton.gif" width="75" links.length
height="24" border="0" name="bt"> La propriété javascript links.length de l'objet
document.links renvoie un tableau contenant tous les
- En suite nous allons créer deux fonctions, une pour objets links de la page (lien normal et ancre).
"onMouseOver" et une autre pour "onMouseOut". Nous Pour parcourir l'ensemble des liens :
n'oublierons pas de déclarer nos images. for(var i = 0; i < document.links.length; i++){
var bt1=new Image(); alert(document.links[i].href) ;}
bt1.src="exemple/images/bouton.gif"; Les nouveaux navigateurs permettent de récupérer
var bt2=new Image(); l'ensemble des liens :
bt2.src="exemple/images/boutonb.gif"; var meslien =
document.getElementsByTagName("a");
function montre(){ for(var i = 0; i < meslien.length; i++){
document.images.bt.src=bt2.src; alert(meslien[i].href)
} }
function cache(){ links.href
document.images.bt.src=bt1.src; La propriété javascript href de l'objet document.links
} permet de connaître la valeur de l'attribut HTML ou
XHTML HREF.
- Il ne nous reste plus qu'a associer ces fonctions à la <a href="http://aliasdmc.fr/links.html#a">Lien</a>
balise Img. La propriété javascript href de l'objet document.links
Pour cela, nous allons créer un lien sur l'image (balise renvoie une valeur de type String.
<A>) dans laquelle nous allons mettre nos actions. alert(document.links["identifiant"].href);
<a href="#" onMouseOut="cache()" //http://aliasdmc.fr/links.html#a
onMouseOver="montre()"> La propriété javascript href de l'objet document.links
<img src="exemple/images/bouton.gif" width="75" accepte une valeur de type String correspondant à
height="24" border="0" name="bt"> une url relative ou absolue.
</a> document.links["identifiant"].href="page.html";

links.target

21
ENI RV. 22
La propriété javascript target de l'objet document.links links.search
permet de connaître la valeur de l'attribut HTML ou La propriété javascript search de l'objet document.links
XHTML target. permet de connaître ou de modifier les parametres
<a href="links.html" target="_self">Lien</a> passés dans l'url d'un lien (?
La propriété javascript target de l'objet document.links parametre=aliasdmc&parametre1=aliasdmc).
renvoie une chaîne de caratères, ou vide si pas <a href="document.php?
d'attribut target. parametre=aliasdmc">lien</a>
alert(document.links["identifiant"].target); //_self La propriété javascript search de l'objet document.links
La propriété target de l'objet document.links accepte renvoie une valeur de type String.
une String. alert(document.links["identifiant"].search);
document.links["identifiant"].target ="_blank"; //?parametre=aliasdmc
Exemple La propriété javascript search de l'objet document.links
Nous allons créer tout d'abord un lien : accepte une- valeur de type String précédé d'un "?" .
<a href="document.html" target="_blank">lien</a> document.links["identifiant"].search= "?
alert( document.links[0].target); // L'alerte nous renvoie parametre=aliasdmc2";
donc "_blank »
Modifions le target: Voici les événements possibles de link:
document.links[0].target="_self";
alert( document.links[0].target); // L'alerte nous renvoie onMouseOver la souris survole le lien.
donc "_self » onMouseOut la sourie quitte le lien.
vous avez changé dynamiquement votre target. onClick on clique sur le lien.
onDbleClick on double clique sur le lien.
links.protocol onMouseUp le bouton gauche est relâché.
La propriété javascript protocol de l'objet onMouseDown le bouton gauche est appuyé.
document.links permet de connaître ou de modifier le onFocus le lien prend le focus.
protocol utilisé par le lien (ftp, http,...) onBlur le lien perd le focus.
<a
href="http://aliasdmc.fr/document.html">lien</a>
La propriété javascript protocol de l'objet
document.links renvoie une String qui correspond un 14.LES EVENEMENTS
protocol.
alert(document.links["identifiant"].protocol); //http Une action utilisateur (déplacement de la souris sur
La propriété javascript protocol de l'objet une zone, clic sur un bouton souris, ...) créée un
document.links accepte une String qui correspond un événement que javascript peut alors traiter par un
protocol.
handler associé.
document.links["identifiant"].protocol = "https";
Ainsi, le document HTML deviendra réactif à un
links.title
événement si à cet événement est associée une
La propriété javascript title de l'objet document.links
fonction javascript :
permet de connaître ou de modifier la valeur de
Ces événements peuvent être dans un formulaire ou
l'attribut HTML ou XHTML "title".
bien sur un lien hypertexte.
<a href="document.html" title="aliasdmc">lien</a>
¨Par exemple, soit le code HTML (partie de BODY) :
La propriété javascript title de l'objet document.links
<form>
renvoie une valeur de type String.
alert(document.links["identifiant"].title); <input type= "button " value= "exemple test " onClick=
//aliasdmc "alert(‘ouah!’); ">
La propriété javascript title de l'objet document.links </form>
accepte une String qui correspond à la nouvelle
valeur. Les interventions de l’utilisateur sont classifiées en
document.links["identifiant"].title = "alias\"dmc"; événements, et chaque objet du browser est sensible à
certains événements. L’association d’une série
links.hash d’instructions ou d’une fonction à un couple objet-
La propriété javascript hash de l'objet document.links événement (par l’attribut Onnomdel’événement
permet de connaître ou de modifier l'url du lien interne permettra d’associer un comportement à l’action de
à la page (#nom) ou ancre. l’utilisateur).
<a href="document.html#aliasdmc>lien</a>
La propriété javascript hash de l'objet document.links
renvoie une valeur de type String.
alert(document.links["identifiant"].hash);
//#aliasdmc
La propriété javascript hash de l'objet document.links
accepte une String précédé d'un "#".
document.links["identifiant"].hash= "#aliasdmc2";

22
ENI RV. 23

Les attributs dans Javascript 1.0

onBlur : l’utilisateur après avoir cliqué sur une zone d’entrée clique à l’extérieur
(événement Blur : un champ de formulaire perd le focus)
Est utilisé sur l'objet javascript form, window, frame
Est utilisé sur la balise HTML input, textarea, select, body, frame, frameset
onClick : l’utilisateur clique sur une zone hypertexte ou un élément de formulaire
Est utilisé sur l'objet javascript link,document, form
Est utilisé sur la balise HTML a, body, area et autre

onChange : l’utilisateur après avoir cliqué sur une zone de formulaire la quitte après avoir
changé son contenu
Est utilisé sur l'objet javascript form
Est utilisé sur la balise HTML input, textarea, select

onFocus l’utilisateur clique sur une zone de formulaire

Est utilisé sur l'objet javascript window, frame, form
Est utilisé sur la balise HTML body, frameset, frame, input

onLoad : une page est chargée par le navigateur (pour les images IMG aussi)
onMouseOver : la souris passe sur un lien hypertexte
onSelect : l’utilisateur sélectionne un champ élément d’un formulaire
Est utilisé sur l'objet javascript form
Est utilisé sur la balise HTML input, textarea

onSubmit : l’utilisateur soumet un formulaire (clique sur bouton submit)

onUnload : l'utilisateur ferme et quitte la page.
Est utilisé sur l'objet javascript window, frame
Est utilisé sur la balise HTML body, frameset, frame

En Javascript 1.2, les attributs suivants ont été rajoutés :

onMouseOut : le pointeur quitte un lien
onMouseDown, onMouseMove, Quand le bouton de la souris est appuyé.
onMouseOut Quand le curseur bouge.
onMouseUp, Quand le bouton de la souris est relâché.
onDblClick : Quand je sors du lien.

Est utilisé sur l'objet javascript link, document, form

Est utilisé sur la balise HTML a, body, form et autre
pour les liens et boutons de formulaires (button, checkbox, radio, submit, reset)
Quand on fait un double clique.
Est utilisé sur l'objet javascript link, document,area
Est utilisé sur la balise HTML a, body, area et autre

onKeyDown, onKeyPress, Quand j'appuie sur une touche.

onKeyUp : Quand je lâche la touche.
pour les zones de saisie de texte d’un formulaire(text, textarea, password)
Est utilisé sur l'objet javascript link, image, document, form
Est utilisé sur la balise HTML a, img, body, textarea

23
ENI RV. 24

onAbort, L'utilisateur a stoppé le chargement de l'image.

onError Est utilisé sur l'objet javascript form, window, frame
Est utilisé sur la balise HTML input, textarea, select, body, frame, frameset

Lorsqu'il se produit une erreur de script.

Est utilisé sur l'objet javascript image, window, frame
Est utilisé sur la balise HTML mg, body, frame, frameset

onReset Quand je réinitialise.

Est utilisé sur l'objet javascript forms
Est utilisé sur la balise HTML form

onMove, Quand je déplace la fenêtre.

Est utilisé sur l'objet javascript window, frame
Est utilisé sur la balise HTML body, frameset, frame

onDragDrop, onResize : pour la fenêtre du browser (tag Body ou Frameset) ;

Quand je redimensionne.
Est utilisé sur l'objet javascript window, frame
Est utilisé sur la balise HTML body, frameset, frame

et la gestion des événements est plus souple et programmable...

Associer un evenement à un element Exemple 2.1.

Pour ce faire il suffit des mettre dans la balise le nom <A HREF="#fin " onClick="alert('onClick sur le lien') ">
de l'evenement et de lui associé une fonction , onClick </A>

Par exemple : l’utilisateur clique sur une zone hypertexte. <BR>

[<I>cliquez sur onClick</I>]
<img src='une_image.jpg '
onclick='nom_de_lafonction(parametre1,parametre2)' / Exemple 2.2.
>
<a href= "page.htm " onclick= "return confirm('Etes-
on peut executer plusieurs fonctions sur le meme vous sûr de vouloir regarder cette page ?'); ">Regardez
evenement pour ce faire il suffit de rajouter un point cette exemple onClick</a>
virgule.
Exemple 2.3.
<FORM>
<img src='une_image.jpg' onclick='fonction1() ;
<INPUT TYPE="button"
fonction2() ; fonction3()' /> VALUE="Back" onClick="history.back()">
</FORM>

Exemple 2.4. Ouvre une fenetre

Exemple 1 :
<FORM>
<FORM><INPUT VALUE=onBlur <INPUT TYPE=BUTTON
VALUE="Cliquez ici pour ouvrir une petite
onBlur= "alert(‘onBlur de la zone’) "> fenetre !"
l’utilisateur après avoir cliqué sur une zone clique à onClick="PetiteFenetre()">
l’extérieur de la zone active. </FORM>
[<I>cliquez sur onBlur puis n’importe où à l’extérieur de
la zone</I>] </FORM> Javascript
function PetiteFenetre()
Exemple 2 : {

24
ENI RV. 25
msg=open("","DisplayWindow","width=250,height=100, <SELECT NAME="Page">
scrollbars=no"); <OPTION>-- Choisissez une page ---</OPTION>
msg.document.write("...Début du code HTML..."+ <OPTION></OPTION>
"<P>Pour fermer cette fenêtre,<BR>cliquez à <OPTION></OPTION>
l\'intérieur.</P>" + <OPTION></OPTION>
"<FORM NAME='Formulaire'><INPUT TYPE=text </SELECT>
NAME='ZoneTexte'" +
" onBlur='window.close()'></FORM> <SCRIPT>" +
La fonction qui travaille
"document.Formulaire.ZoneTexte.focus();
</SCRIPT>"+ "...fin du code HTML...");
msg.document.close(); La fonction Choix() sera déclarée dans l'en-tête de la
} page, comme d'hab' et effectuera les tâches
Exemple 2.4. Ouvre une nouvelle page suivantes :
<FORM>
<INPUT • Repérer la sélection de la première liste
TYPE=button • Ne pas réagir si on sélectionne le 1er élément
VALUE="Lien vers... " • Créer un tableau d'options
onClick="document.location.href='page.html'";> • Ecrire les nouvelles options dans la liste
</FORM>
function Choix(form) {
i = form.Rubrique.selectedIndex;
Exemple 3 : if (i == 0) {
return;
Exemple 3.1. }
switch (i) {
<FORM> case 1 : var txt = new Array
<INPUT VALUE=onChange onChange= "alert(‘on ('Materiel','Poissons','Sécurité'); break;
Change du texte’) "> case 2 : var txt = new Array
('Radioactivite','Information','Mesures'); break;
l’utilisateur aprés avoir cliqué sur une zone, la quitte case 3 : var txt = new Array
aprés avoir changé le texte.<BR> ('Philosophie','Psychologie','Humour'); break;
[<I>cliquez sur onChange, modifiez le texte puis }
form.Rubrique.selectedIndex = 0;
cliquez à l’extérieur de la zone</I>]
for (i=0;i<3;i++) {
</FORM> form.Page.options[i+1].text=txt[i];
}
Exemple 3.2. }

Dans cet exemple, nous allons modifier

dynamiquement le contenu d'une liste déroulante. La Exemple 3.3.
première liste est classique et le contenu de la seconde
est réaffecté dès que l'on agit sur la première : Cet exemple est d'utiliser l'attribut VALUE de l'élément
OPTION pour accueillir l'adresse du lien. Dès qu'on
Préparation d'un formulaire clique sur une des options de la liste, la fonction Lien()
consulte cette valeur et l'envoie au navigateur pour qu'il
La première liste du formulaire est créee en HTML pur charge la page.
et dur et est nommée sur cet exemple, Rubrique. On
l'accompagne toutefois de l'événement onChange qui Le formulaire :
va déclencher la mise à jour de la deuxième liste,
Page : Le code HTML du formulaire doit être placé dans le
corps du document (quelque part entre les balises
<SELECT NAME="Rubrique" <BODY> et </BODY>). Ce formulaire ne contient qu'un
onChange='Choix(this.form)'> seul élément (SELECT). La validation du formulaire est
<OPTION>-- Choisissez une rubrique ---</OPTION> automatiquement générée par le choix d'une option,
<OPTION>Plongée</OPTION> grâce à l'événement onChange.
<OPTION>Nucléaire</OPTION>
<OPTION>Bonheur</OPTION> <FORM NAME="Choix">
</SELECT> <SELECT NAME="Liste" onChange="Lien()">
<OPTION VALUE="">Choisir une option
La seconde liste est quasiment vide à la création, car <OPTION VALUE="../../copains.html">Les copains
son contenu dépendra de la sélection faite dans la <OPTION VALUE="../../plongee/index.html">La
première liste : plongée

25
ENI RV. 26
<OPTION •la plus ancienne consiste à pointer vers l'élément
VALUE="http://www.google.com">Recherche cible à lui associer l'évènement et à lui adjoindre le
</SELECT> nom de la fonction sans les parenthèses.
</FORM>
document.getElementById('mon_element').onNomE
La fonction JavaScript : venement=nom_fonction

La fonction Lien() doit être placée dans l'entête de la Par exemple :

page (quelque part entre les balises <HEAD> et
</HEAD>). Code html :

function Lien() { <div id="idevement">Mon évènement javascript <img

i = document.Choix.Liste.selectedIndex; src="monimage.gif" ></div>
if (i == 0) return;
url = document.Choix.Liste.options[i].value;
parent.location.href = url; Code javascript :
}
function action(event){ alert("action idevement"); }
Exemple 4 de code :

Exemple 4.1. document.getElementById("idevement").onclick=act

ion;
<FORM>
<INPUT VALUE=onFocus onFocus= "alert(‘onFocus on peut aussi lui adjoindre une fonction anonyme
sur la zone’) "> (fonction sans nom) afin de lui adjoindre un ou des
L’utilisateur clique sur une zone. <BR> paramètres.
[<I>cliquez sur onFocus</I>] </FORM>
document.getElementById('mon_element').onNomEve
Exemple 4.2. nement=function("un_parametre"){du code du
code...etc}
<A HREF= "#ex5 " onMouseOver= "alert(‘souris sur la
zone’) "> onMouseOver </A>l’utilisateur passe la Par exemple,
souris sur la zone<BR [<I>passez la souris sur
onMouseOver</I>] Code html :

Exemple 4.3. Cet exemple permet de modifier le <div id="idevement">Mon évènement javascript <img
contenu de la zone multiligne au passage de src="monimage.gif" ></div>
la souris
<FORM NAME="Info"><BR> Javascript
<TEXTAREA NAME="Texte"
ROWS="8" document.getElementById('mon_element').onclick=
COLS="40"
WRAP="physical"">Passez la function("evt"){alert("action idevement"); }
souris...</TEXTAREA>
</FORM> Pour retirer l'évènement , on peut réassigner une
Et pour chaque lien : chaine vide à l’évènement:
<A HREF="page.html"
onMouseOver="document.Info.Texte.value ='Bla, bla, document.getElementById('mon_element').onclick=
bla..."> ""
Texte du lien</a>
Methode 2:
Associer dynamiquement un évènement à un
élément •la deuxièmement méthode utilise
'addEventListener' et fait partie de l'objet event:
Consiste à ajouter un évènement à une balise dans la
page HTML alors que la page est déjà chargé ou a une addEventListener(nomEvent, nomFonction,
balise HTML creé dynamiquement. typePropagation) accepte comme paramètres :

Méthode 1:
- nomEvent, le nom de l'événement sans le "on",
- nomFonction, nom de la fonction sans les "()" qui va

26
ENI RV. 27
traiter l'événement, - nomFonction, nom de la fonction sans les "()"
- typePropagation, valeur de type Boolean qui spécifie qui va traiter l'événement,
le type de propagation de l'événement. (false : du fils
vers le parent) Par exemple,

Par exemple : Code html :

Code html : <div id="idevement">Mon événement javascript

<div id="idevement">Mon évènement javascript <img <img src="monimage.gif" ></div>

src="monimage.gif" ></div>
Code javascript :

function action(event){
Code javascript :
alert("action idevement");
function action(event){
alert("action idevement"); }
}
var monElement = var monElement =
document.getElementById("idevement"); document.getElementById("idevement");
monElement.addEventListener("click", action, false);
monElement.attachEvent("onclick", action);
avec cette méthode on peut adjoindre plusieurs
fonctions pour le même évènement. Fusion des deux méthodes addEventListener et
attachEvent
document.getElementById('mon_element').addEventLi
stener("click', nom_de_la_fonction_1, false); Code html :

document.getElementById('mon_element').addEventLi <div id="idevement">Mon événement javascript <img

stener("click', nom_de_la_fonction_2, false); src="monimage.gif"></div>

Pourquoi ajouter plusieurs fonctions sur le même Code javascript :

évènement
function action(event){
imaginons qu'il y a plusieurs scripts dans une page et
alert("action idevement");
que ces scripts doivent passer par une fonction
d'initialisation . }
document.onload=fonction_1; var monElement =
document.getElementById("idevement");
document.onload=fonction_2;
if(monElement.addEventListener){
dans cet exemple,seule la deuxième fonction sera
appelé car le première onload aura été écrasé par le monElement.addEventListener("click", action, false);
second .
}else if(monElement.attachEvent){
il faut donc utiliser addEventListener.
monElement.attachEvent("onclick", action);
document.addEventListener("load', fonction_1, false);
}
document.addEventListener("load',fonction_2, false);

et de cette manière les deux fonctions seront

exécutées. Supprimer un événement

La méthode attachEvent Il est possible de retirer l’évènement en précisant la

fonction concernée et les autres fonctions seront
Internet Explorer ne reconnait pas la méthode toujours exécutées.
addEventListener et il utilise
attachEvent(onNomEvent,nomFonction). Pour FireFox,Mozilla , on doit utiliser la

27
ENI RV. 28
méthode removeEventListener, pour Internet Explorer function couleur(parametre_couleur){
on doit utiliser detachEvent.
document.getElementById('dv').style.backgroundColor
On peut donc fusionner ces deux méthodes javascript =parametre_couleur;
dans une seule fonction.
}
Code javascript :
</script>
function supprimeEvent(objet, typeEvent, nomFunction,
typePropagation){ </head>

if (objet.addEventListener) { <body>

objet.removeEventListener(typeEvent, <button onclick='couleur("blue")'>bleu</button>

nomFunction, typePropagation);
<button onclick='couleur("green")'>vert</button>
} else if (objet.attachEvent) {
<button onclick='couleur("red")'>rouge</button>
objet.detachEvent('on' + typeEvent, nomFunction);
<br><br>
}
<div id='dv'
} style='height:50px;width:50px;background-
color:black'></div>
removeEventListener
</body>
Pour que l'action soit enlevée de l'événement, il faut
que la valeur "typePropagation" soit la même: </html>

objet.addEventListener('click', nomFunction, false); 2. le paramètre this

objet.removeEventListener(''click'', nomFunction, this pointe sur l‘élément d'où provient l'évènement ; il

false); evitera de mettre un id a l'element et donc d'utiliser
document.getElementById().
//La fonction nomFunction n'est plus appelée
Dans l'exemple suivant, on a un div de couleur vert
Avec cette méthode,on peut mettre une fonction avec un évènement 'onclick' et comme paramètre la
anonyme mais comme une fonction anonyme ne fonction this et quand on clique sur le div une alerte
contient pas de nom, il ne sera pas possible de retirer donnera la couleur de fond (backgroundColor) du div.
l' évènement avec removeEventListener
<!DOCTYPE html>
Les paramètres de fonction dans un évènement
<script type="text/javascript" >
function la_fonction(param_1,param_2,param_3)
function couleur(lui){
1. les paramètres basiques
var couleur_cible=lui.style.backgroundColor;
il s'agit soit de valeurs numérique soit de chaines de
caractères. alert(couleur_cible);

imaginons trois boutons auxquelles on y adjoint un }

évènement "onclick" avec comme paramètre de
</script>
fonction une couleur et à coté un div , et à chaque fois
que l'on cliquera sur un des boutons le div prendra la </head>
couleur du paramètre.
<body>

<div onclick='couleur(this)'
<!DOCTYPE html> style='height:50px;width:50px;background-
color:green'>clic moi</div>
<script type="text/javascript« >

28
ENI RV. 29
</body> clientY Retour de la coordonnée verticale du
pointeur de la souris, par rapport à la
</html>
fenêtre du navigateur.
Gestion globale des evenements avec l’objet event

event fait partie de la gestion globale des événements screenX Retour de la coordonnée horizontale du
par le navigateur et possède des méthodes et pointeur de la souris, par rapport à l'écran
propriétés.
screenY Retour de la coordonnée verticale du
Methodes Description pointeur de la souris, par rapport à l'écran

keyCode Récupère le code de caractère ASCII de la

preventDefault() empeche l'action du navigateur
touche qui a généré l'événement pour
par défaut de se produira comme onkeydown et onkeyup.
l'envoi d'un formulaire suite au
clic du bouton submit lié au which similaire a keyCode.
formulaire
charCode Récupère le code de caractère Unicode de
stopPropagation() limite l'évènement à l'Élément la touche qui a généré l'événement pour
cible afin d'éviter la propagation onkeypress.
aux parents afin d'éviter pour
chaque parent possédant le key Récupère la valeur de la touche qui a
généré l'événement pour onkeypress
même évènement le
onkedown et onkeyup.
déclenchement de la fonction
associé. altKey Retours si oui ou non la touche "ALT" a été
pressé quand un événement a été
déclenché
capture des évènement de la souris et du clavier
shiftKey Retours si oui ou non la touche "SHIFT" a
été pressé quand un événement a été
déclenché
propriete Description
ctrlKey Retours si oui ou non la touche "CTRL" a
type retourne le type de l'évènement (onclick; été pressé quand un événement a été
onmoseover...etc) déclenché

Pour l'utiliser il suffit de mettre event comme parametre

currentTarget retourne l'Élément qui a déclenché
de fonction qui utilise currentTarget et qui renvoie
l'évènement
l’élément déclencheur de l'evenement comme le fait
this
target retourne l'Élément survolé au
déclenchement de l' évènement dont le <!DOCTYPE html>
parent est l'Élément qui possède
l'évènement. <script type="text/javascript« >

function couleur(evt){
button Retours le bouton de la souris qui a été
cliqué (0:gauche; 1:centre; 2:droite) var
couleur_cible=evt.currentTarget.style.backgroundCo
clientX Retour de la coordonnée horizontale du lor;
pointeur de la souris, par rapport à la
fenêtre du navigateur. alert(couleur_cible);

29
ENI RV. 30
</script> </head>

</head> <body>

<body> <div id="un_div"

style='height:50px;width:50px;background-
<div onclick='couleur(event)' color:green'>
style='height:50px;width:50px;
clic moi</div>
background-color:green'>clic moi</div>
</body>
</body>
</html>
</html>
Sans préciser le paramètre "event" on se rend compte
quand on utilise la création dynamique d' que l'evenement a bien été transmis au paramètre de
évènement le paramètre est implicitement déclarè. la fonction.

Reprenons le code précédent en le modifiant afin de Exemple 1. création dynamique des évenements
créer dynamiquement au chargement de la page l'
évenement onclick. Pour se faire, on retire l'evenement <!DOCTYPE html>
de la balise et on donne un id à la balise :
<title>source javascript</title>
<div id=" un_div" style='height:50px;width:50px;
<script type="text/javascript">
background-color:green'>clic moi</div>
document.onmousemove=function(evt){
et on ajoute la ligne suivante dans le script
//affiche la position de la souris en X et Y par rapport
window.onload=function(){ au navigateur

document.getElementById("un_div").onclick=couleur document.getElementById(‘z1').value=evt.clientX;

} document.getElementById(‘z2').value=evt.clientY;

on peut faire aussi de cette facon }

window.onload=function(){ document.onkeypress=function(evt){

document.getElementById("un_div").addEventListener( //affiche le code clavier de la touche pressé

"click", couleur, false)}
document.getElementById(‘z3').value=evt.charCode;
ce qui donne
document.getElementById(‘z4').value=
<!DOCTYPE html>
String.fromCharCode(evt.charCode);
<script type="text/javascript">
}
window.onload=function(){
</script>
document.getElementById("un_div").onclick=coule
ur} </head>

function couleur(evt){ <body>

var Coordonnées de souris

couleur_cible=evt.currentTarget.style.backgroundColor;
<input type='text' id=‘z1'></input>
alert(couleur_cible);
<input type='text' id=‘z2'></input>
}
<br>
</script>
30
ENI RV. 31
evenement de touche Entrer un nombre 1

<br> <input type ="text" name ="nombre1 " onkeyPress

="return validerNombre1(event) ;" > <br>
<input type='text' id=‘z3'> </input>
Entrer un nombre 2 <input type ="text" name
correspond a ="nombre2 " onkeyDown ="return
validerNombre2(event) ;" ><br>
<input type='text' id=‘z4'> </input>
Entrer un nombre 3 <input type ="text" name
</body>
="nombre3 " onkeyPress ="return
</html> validerNombre3(event) ;" ><br>

</FORM>

Exemple 2. Validation d’un nombre </body>

<!DOCTYPE html> </html>

<script type="text/javascript« > Exemple 7

function validerNombre1(evt) { <FORM>

if ( evt.charCode <48 || evt.charCode >57) { Nom <input type = ="text"" name ="nom "
onkeyDown =“return passer_focus(event)"; > <BR>
return false; }
Prenom <input type = ="text"" name ="prenom" >
} <BR>

function validerNombre2(evt) { </FORM>

if (evt.keyCode <96 || evt.keyCode >105) Javascript

//if (evt.which <96 || evt.which >105) { function passer_focus(evt) {

if (evt.which !=8) // pas backspace if( ( evt.which == 13) || (evt.keyCode == 13 ) ) {

return false; document.forms[0].prenom.focus();

} event.keyCode=0 ;

// alert (" Type: "+evt.type); }

} }

function validerNombre3(evt) {

if (evt.key<'0'|| evt.key >'9') { Propagation des événements

if (evt.key !='Backspace') // pas backspace Dans le cas où vous avez des balises imbriquées avec
le même événement, les événements se propagent du
return false; bas vers le haut c'est à dire du fils vers le parent

}}

</script> <div id="idevt">Mon évènement javascript <img

src="monimage.gif" id="monimage"></div>
</head>
function action1(){
<body>
alert("action idevement");
<FORM>

31
ENI RV. 32
} }

var monElement = document.getElementById("idevt"); Mon événement javascript (image)

monElement.onclick = action1; Annuler l'événement

function action2(){ On peut annuler l'action effectuée, par exemple sur un

onsubmit (envoi du formulaire).
alert("action monimage");
Pour cela , on doit utiliser la méthode preventDefault
} de l'object event qui permet d'annuler l'événement.

var ImgElementt = Cependant Intenet Explorer utilise la propriété

document.getElementById("monimage"); returnValue de l'objet event.

ImgElement.onclick = action2; On doit donc coupler preventDefault et returnValue.

window.onload=function(){ <form action="http://www.aliasdmc.fr" target="_blank"

id="idevement"><input type="submit"
var monElement = document.getElementById("idevt);
value="envoyer" /></form>
monElement.onclick = action;
Code javascript :
var ImgElement=
function action(event){
document.getElementById("monimage");
if (event.preventDefault) {
ImgElement.onclick = action2;
event.preventDefault();
}
}
Mon évènement javascript (image)
event.returnValue = false;
Cliquer sur l'image, l'événement de l'image est
déclenché puis c'est celui du parent }

Arréter la propagation window.onload=function(){

Imaginons que lorsque l'on clique sur l'image , on ne var monElement =

veut pas que l'événement du parent soit déclenché. document.getElementById("idevement");

Pour cela , on doit utiliser la propriété cancelBubble et monElement.onsubmit = action;

la méthode stopPropagation de l'object event pour
arrêter la propagation de l'événement. }

<div id="idevt">Mon évènement javascript<img

src="monimage.gif" id="monimage" 15. LES AUTRES EXEMPLES
onclick='action2(event)'></div>
1. Modification d'une image lors du passage de la
function action1(){ souris

alert("action idevement"); } <html>

<head>
var monElement = document.getElementById("idevt"); <title>Modification d'une image lors du passage de la
souris</title>
monElement.onclick = action1; </head>
</head>
function action2(evt){ <body>
<a href="#"
alert("action monimage"); onMouseOver="document.img_1.src='execute.gif';"
onMouseOut="document.img_1.src='tomcat.gif';">
evt.stopPropagation(); <img name="img_1" src="tomcat.gif"> </a>
</body>
</html>
evt.cancelBubble = true;
32
ENI RV. 33

2. Clignotement du texte function stopit()

{
<html> control=false;
<head> }
<title>Clignotement</title>
<script language="JavaScript"> function doit()
i=0; {
function couleur() control=true;
{ clignote();
tabColoris = new Array ("#ffffff","#CE5852");// }
Vous pouvez changer les couleurs ou en rajouter </script>
if (i+1 == tabColoris.length) i=0; </head>
else i++; <body onLoad="clignote();">
<center>
document.getElementById("bienvenue").setAttribute('c <img src="blank.gif" />
olor',tabColoris[i]); <br />
setTimeout("couleur()",500); <input type="button" value="arrêter le clignotement"
} onClick="stopit();" />
</script> <br /> <br />
</head> <input type="button" value="reprendre le
<body topmargin="0" leftmargin="0" clignotement" onClick="doit();" />
onload="couleur()"> </center>
<p align="center"><font id="bienvenue" </body>
size="8">Bienvenue</font></b></p> </html>
</form>
</body>
</html>
4. Défilement de texte en javascript
3. Clignotement d’image
Ce script permet de faire défiler du texte dans une
ce petit script va vous permettre de faire clignoter une boîte (à l'aide des balises form et input). A noter que
ou plusieurs images dans une page web. Remplacer vous pouver changer la vitesse de défilement en
les valeurs "500" par toute autre durée en modifiant la ligne (valeur 100 à modifier :
millisecondes pour déterminer la vitesse de setTimeout("banniere()",100);). Ci dessous la boîte où
clignotement et utiliser les images de votre choix en va apparaître le message défilant.
tenant compte de leur position dans le document. Il
s'agit ici de la première image affichée puisque le <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
numéro d'indice est "0". L'image nommée "blank" est 4.01 TRANSITIONAL//EN">
une image est soit transparente soit de 1 pixel X 1 pixel <html>
pour donner l'impression qu'il n' y a rien. <head>
<title>IMAGE CLIGNOTANTE</title>
<html> <meta http-equiv="Content-Type"
<head> content="text/html; charset=utf-8" />
<title>IMAGE CLIGNOTANTE</title>
<meta http-equiv="Content-Type" <script language="javascript">
content="text/html; charset=utf-8" /> var position=0;
<script type="text/javascript"> var msg="Votre message ici";
control=true;
for (count=0; count<10;count=count+1)
function clignote() { msg=msg+""+msg; }
{
document.images[0].src="image.gif"; function banniere() {
window.setTimeout("clignote2();",500); document.affichage.texte.value=msg.substring(position
} ,position+100);

function clignote2() position = position+1;

{
if (control!=false) if (position==100) position=0;
{ setTimeout("banniere()",100); }
document.images[0].src="blank.gif";
window.setTimeout("clignote();",500); </script>
} </head>
} <body OnLoad="banniere()">

33
ENI RV. 34
<input type="button"
<form name="affichage"> <input type="text" OnClick="javascript:window.location.reload()"
name="texte" size=30 value="" /> value="Actualiser">
</form>
</body> <FORM ACTION="" METHOD=POST>
</html> <P><INPUT TYPE=button NAME=Bouton
VALUE="Actualiser maintenant"
5. Raffraichissement d’une page onclick='parent.location="javascript:location.reload()"'>
</FORM></P>
- En HTML, pour auto-Reactualisation d'une
page HTML avec la balise meta 16. LES FORMULAIRES
<head> Introduction aux formulaires
<meta http-equiv="refresh"
content="0;url=chemain_de_t_as_page.html" /> Les formulaires sont la base des échanges entre le site
</head> et le visiteur.
JavaScript ne peut pas échanger d'information à partir
Le "0" indiquant un temps en seconde avant de de fichier texte ou de base de données.
rafraichir la page au moyen de l'URL fourni. Pour permettre au visiteur de transmettre des
informations, les formulaires sont indispensables. Et
Par exemple pour rafraichir la page chaque grâce au JavaScript, il est possible de les rendre très
10 sec pratiques.
<META HTTP-EQUIV="Refresh" CONTENT="10; Le javascript associé aux formulaire permet :
URL=http://www.tonSite.com/page.html"> • d'assister et de guider le visiteur,
• de contrôler la saisie,
- En javascript, • de faire des traitements (calcul, manipulation
<A HREF="#" de chaînes de caractères),
onclick="document.location.reload();return(false)"><B> • d'envoyer les résultats au serveur.
Rafraîchir</B></A>

Tous les éléments de formulaires

Vue d'ensemble
Pour intégrer des éléments de formulaire, il faut encadrer les balises par <FORM> et </FORM>. .
La balise FORM, création de formulaire
La balise INPUT, la plus courante et tous ses types
type = TEXT, BUTTON, RADIO, CHECKBOX, HIDDEN, PASSWORD, SUBMIT et RESET.
La balise SELECT, la balise de liste
La balise TEXTAREA, la balise de zone de texte multi-lignes.

La balise FORM
La balise FORM a besoin de la balise de fin. Elles sont nécessaires pour afficher des éléments de formulaire.

Liste des propriétés :

name Nom du formulaire
action Adresse du script de serveur à exécuter
method Méthode d'appel du script (get ou post)
enctype Type d'encodage du formulaire
target Destination du retour du formulaire

Liste des méthodes :

submit Déclenche l'action du formulaire
reset Réinitialise les données du formulaire avec les valeurs par défaut

Liste des événements :

34
ENI RV. 35
onSubmit Détecte la soumission du formulaire
onReset Détecte la réinitialisation

Voyons maintenant en détail les différents éléments de formulaire.

L'élément INPUT

L'objet INPUT est le plus utilisé de tous. Il permet d'afficher :

• des champs texte

• des boutons
• des radio-boutons Choix 1 - Choix 2
• des cases à cocher Choix 1 - Case 2
• le champ caché
• le champ password
• les boutons spéciaux RESET et SUBMIT

Liste des propriétés :

name Nom du champ
type type du champ text, button, radio, checkbox, submit, reset
Value Libellé texte
defaultvalue Valeur par défaut du champ (utile avec reset)
size Taille du champ
maxlength Taille maximale du champ de type texte
checked Case à cocher ou radio bouton coché ou non
disabled Grisé (modification impossible par le visiteur)
readOnly Lecture seule
class Nom de la classe de style
style Chaîne de caractères pour le style
Cette liste est générique, des particularités surviennent avec le type.

Liste des méthodes :

focus Donne le focus (ou le curseur ou la main)
blur Enlève le focus
click Simule un clic (sur un bouton)

Liste des événements :

onFocus Détecte la prise de focus
onBlur Détecte la perte de focus
onClick Détecte le clic souris (sur un bouton)
onChange Détecte les changements
Les zones de texte INPUT type="text"

Une zone de texte est définie par la balise INPUT avec un type "text".
<INPUT type="text">

Un bouton est défini par la balise INPUT avec un type "button".

Un groupe de radio-boutons est défini par la balise INPUT avec un type "radio".
Pour définir un groupe, il faut donner le même nom à tous les champs. Ainsi, la sélection sera unique pour l'ensemble
du groupe.
Ici, le groupe s'appelle "sexe". A l'origine, Homme est coché. Homme et Femme sont des états opposés. Les radios-
boutons sont adaptés.

Homme - Femme
<INPUT type="radio" name="sexe" value="homme" checked>Homme -
<INPUT type="radio" name="sexe" value="femme">Femme

Une case à cocher est définie par la balise INPUT avec un type "checkbox".
Contrairement aux cases à cocher, il n'y a pas d'exclusion entre les propositions.
Ici, Majeur et Etudiant sont coché à l'origine. Mais il est possible de n'être ni l'un, ni l'autre, ou l'un des deux.

Majeur
Etudiant
<INPUT type="checkbox" name="majeur" checked>Majeur
<INPUT type="checkbox" name="etudiant">Etudiant

<INPUT type="password" name="passe" value="azerty" size=10>

A part cette différence d'affichage, il possède les mêmes propriétés que le champ texte.

L'élément caché

Un champ caché est destiné à transmettre des informations dans le formulaire, sans que le visiteur ne s'en
aperçoivent.
36
ENI RV. 37
Cela peut être une adresse mail, un résultat de traitement, l'heure, un cookie ou toute autre information.
Naturellement, le champ n'apparaît pas : voici sa syntaxe.
<INPUT type="hidden" value="contenu caché" name="cache">

Propriétés acceptées :
name | value | defaultvalue

Naturellement, toutes les propriétés et les événements concernant son affichage et son apparence sont sans effet.
REMARQUE : Même s'il n'apparaît pas à l'écran, son contenu reste manipulable en javascript.
Les boutons spéciaux RESET et SUBMIT

Ces boutons existent et il faut les décrire (Je préconise de les éviter).
Dans le formulaire suivant, changer les valeurs saisies et cliquez sur "RESET" :
Cochez moi !

<FORM name="formspe" action="javascript:alert('Formulaire soumis')">

<INPUT type="text" name="texte" value="Contenu">
<INPUT type="checkbox" checked>Cochez moi !
<BR>
<INPUT type="reset" value="RESET">
<INPUT type="submit" value="SUBMIT">
</FORM>

Les listes

Les listes sont définies par la balise <SELECT>. Cette balise définie la zone de la liste. Les lignes de contenu de la
liste sont alimentées par la balises <OPTION>.
Voici la syntaxe générale pour créer une liste contenant des lignes :
<SELECT name="mono" size=1>
<OPTION value="1">ligne 1</OPTION>
<OPTION value="2">ligne 2</OPTION>
<OPTION value="3">ligne 3</OPTION>
<OPTION value="4">ligne 4</OPTION>
</SELECT>

Les listes peuvent se présenter de plusieurs manières, selon leur propriété.

Sur plusieurs lignes Sur plusieurs lignes
Sur une ligne
mono-sélection multi-sélection
size=1
size=4 size=4 multiple

L'élément OPTION
L'objet OPTION est assez simple. Il peut avoir comme attributs : name, value, selected.
selected force la sélection de cette occurence dans la liste.

Liste des propriétés de l'élément SELECT :

name Nom de la liste
size Nombre de lignes à afficher
multiple Sélection multiple autorisée
disabled Grisage de la liste
class Classe de feuille de style
style Style de la liste

Liste des méthodes :

add Ajoute un ligne (objet OPTION)
remove Supprime une ligne

37
ENI RV. 38
focus Donne le focus à la liste
blur Reprend le focus

Liste des événements :

onChange Détecte la sélection d'une nouvelle ligne
onFocus Détecte la prise de focus
onBlur Détecte la perte de focus
L'élément SELECT est assez complexe, en particulier dans sa manipulation en javascript (voir détails page suivante).
Les zones de textes multi-lignes TEXTAREA
L'objet TEXTAREA est essentiellement utilisé pour permettre au visiteur de saisir un texte assez long (message,
descriptif...).
Voici la syntaxe classique pour définir une zone de texte :

<TEXTAREA name="texte" rows="5" cols="20">Ligne 1

Ligne 2
...
</TEXTAREA>
On remarque les 2 propriétés rows et cols qui indiquent le nombre de lignes et de colonnes de la zone.
Le texte contenu dans l'élément TEXTAREA apparaît tel que dans le code source : un retour à la ligne dans le code
source crée une nouvelle ligne dans la zone.

Liste des propriétés de l'élément TEXTAREA :

name Nom de la zone
rows Nombre de lignes
cols Nombre de colonnes
disabled Grisage de la zone
readOnly Lecture seule
class Classe de feuille de style
style Style de la liste

Liste des méthodes :

focus Donne le focus à la zone
blur Reprend le focus

Liste des événements :

onChange Détecte le changement de contenu
onScroll Détecte le défilement de la zone
onFocus Détecte la prise de focus
onFocus Détecte la perte de focus

Nous avons vu les éléments de formulaire, comment les déclarer, les attributs et les comportements possibles.
La page suivante montre comment les manipuler en javascript.

Exemple d’un formulaire

<HTML>
<BODY>
<B>
38
ENI RV. 39
<FORM action="http://unsite.com/prog/ajoutermembre" method="post">
Votre nom:<INPUT TYPE="TEXT" NAME="name"> <BR>
Votre Email :<INPUT TYPE="TEXT" NAME="Email"> <BR>
Votre filiere:
<SELECT NAME="filiere" SIZE="1">
<OPTION VALUE="GB"> Genie Logiciel et Base de données</OPTION>
<OPTION VALUE="SR"> Système et réseau </OPTION>
</SELECT>
<BR>
Sexe : <br>
<INPUT type="radio" name="genre" value="homme"> Homme<BR>
<INPUT type="radio" name="genre" value="femme"> Femme<BR>
Comment : <BR>
<TEXTAREA NAME="comment" COLS="20" ROWS="5" >
</TEXTAREA> </BR>
<INPUT TYPE="SUBMIT" VALUE="Submit">
<INPUT type="reset" value =”Reset”>
</FORM>
</B>
</BODY>
</HTML>

MANIPULATION DES ELEMENTS DU FORMULAIRE PAR JAVASCRIPT

Principe général
Les éléments de formulaire sont des objets javascript .
Cette page présente l'accès par javascript aux objets du formulaire.
Supposons le formulaire suivant :
<FORM name="general">
<INPUT type="text" name="champ1" value="Valeur initiale">
</FORM>

1.
Accéder au formulaire

Le formulaire est un élément de l'objet document. Pour accéder au formulaire general, il faut écrire :

• document.forms["general"]
ou
• document.forms[0]

39
ENI RV. 40
ou
• document.general

forms est le tableau des formulaires de document. On peut accéder à un formulaire par son nom ou par son indice
(commençant à 0), via le tableau elements ou directement par son nom

2. Accéder à un élément

Pour accéder maintenant à la zone de texte, on écrit :

• document.forms["general"].elements["champ1"]
ou
• document.forms["general"].elements[0]
ou
• document.forms["general"].champ1
• ou document.general.champ1

elements est le tableau de tous les éléments du formulaire. On peut accéder à un élément par son nom ou par son
indice, ou directement par son nom.
Remarques :

1. Il est préférable d'utiliser le nom des éléments, plutôt que les indices : les noms sont indépendants de
l'organisation du formulaire.
2. Les tableaux forms et elements peuvent sembler inutiles dans les exemples ci-dessus. Observez ce script pour
vous convaincre du contraire :
var nom_du_champ="champ1";
document.forms["general"].elements[nom_du_champ]
Ici, on peut accéder à un élément de formulaire dont le nom est contenu dans une variable javascript.

3. Manipuler les propriétés d'un élément

Une fois que l'élément est atteint, il est possible de manipuler ces propriétés.
Par exemple, pour placer dans la zone de texte le mot "NOUVEAU", il faut juste écrire :

document.forms["general"].elements["champ1"].value="NOUVEAU"
Cliquez sur ce bouton et observez le premier formulaire
Appeler une méthode sur un élément
Pour donner le focus au champ texte du haut de cette page, il faut appeler la méthode focus() sur cet élément.
document.forms["general"].elements["champ1"].focus()

<form name="FormTexte" method="" action="" >

4. Intégrer du javascript dans un événement

Un exemple d'événement
Un événement d'un élément de formulaire est déclenché par le navigateur en réaction à une action ou un changement
détecté.
L'événement le plus classique est le clic sur un bouton appelé onClick

Reprenons le même exemple, il s'agit de placer "NOUVEAU" dans la zone de texte du formulaire.

40
ENI RV. 41

Voici le script correspondant :

Dans le bouton, on a rajouté l'événement onClick qui reçoit le code javascript à exécuter lors du clic sur le bouton.
La syntaxe est :
onClick=' document.forms["changer"].elements["zonetexte"].value = "Encore nouveau" '>
Le code javascript doit se mettre entre " ou entre '. Il faut faire très attention à alterner les " et '. On peut écrire :
onClick='alert("Bonjour")'>
ou
onClick="alert('Bonjour')">

5. L'objet this

Il est fastidieux d'accéder aux éléments de formulaire par toute la chaîne document.forms.elements. Un objet
JavaScript this permet de raccourcir ce chemin d'accès.
this représente l'objet javascript en cours.

Donnez le focus à cette zone de texte, un message apparaît dans la barre de statut pour indiquer son nom. Le
message disparaît quand le champ perd le focus.
Voici le code source simplifié par this :

La variable window.status contient le message avec le nom du champ obtenu par :

this.name
équivalent ici à
document.forms["formfocus"].elements["champtexte"].name

Encore un exemple avec this

Reprenons encore une fois notre champ texte qui peut voir son contenu changer lors du clic sur un bouton :

<FORM>
<INPUT type="text" name="zonedetexte" value="Valeur initiale">
<INPUT type="button" value="Changer le contenu"
onClick=' this.form.zonedetexte.value="NOUVEAU" '>
</FORM>
Grâce à this.form, on peut accéder au formulaire de l'élément en cours. Le chemin pour accéder à zonedetexte est
ensuite classique.

Un autre exemple

<form name="FormTexte2" method="" action="" >

41
ENI RV. 42
6. L'accès aux éléments de type INPUT

Les zones de texte

La principale action en javascript sur une zone de texte est de manipuler son contenu.
Imaginons un formulaire appelé monform qui possède un champ texte appelé monchamp. On accède au contenu du
champ par :
document.forms["monform"].elements["monchamp"].value

Il faut bien penser à ajouter la propriété .value pour accéder au contenu.

Les boutons
Un bouton sert principalement à déclencher une action javascript.
La propriété value contient le libellé du bouton. Comme pour une zone de texte, ce libellé est accessible.

Les cases à cocher

Pour détecter qu'une case est cochée, il faut utiliser sa propriété checked
Majeur Etudiant

Voici le code de l'exemple :

<FORM>
<INPUT type="checkbox" name="majeur">Majeur
<INPUT type="checkbox" name="etudiant">Etudiant
<INPUT type="button" value="Tester" onClick="alert('Majeur : '+this.form.majeur.checked+'\nEtudiant :
'+this.form.etudiant.checked);">
</FORM>
checked est de type booléen. Il contient true pour vrai et false pour faux.

Les radio-boutons

Imaginons ce sondage :
Vous utilisez comme système d'exploitation :
Windows 95 Windows 98 Windows NT Linux Autre

La gestion des radio-boutons est assez complexe. Voici le code HTML de ce sondage :
<FORM>
<INPUT type="radio" name="os" value="Windows 95" checked>Windows 95
<INPUT type="radio" name="os" value="Windows 98">Windows 98
<INPUT type="radio" name="os" value="Windows NT">Windows NT
<INPUT type="radio" name="os" value="Linux">Linux
<INPUT type="radio" name="os" value="Autre">Autre
<INPUT type="button" value="Tester"
onClick="testerRadio(this.form.os)">

<SCRIPT language="javascript">
function testerRadio(radio) {
for (var i=0; i<radio.length;i++) {
if (radio[i].checked) {
alert("Système = "+radio[i].value)
}
}
}
</SCRIPT>

La déclaration du formulaire crée un groupe de radio-boutons liés : le nom du groupe est os.
La fonction javascript a comme paramètre le groupe des radio-boutons.
Une boucle parcourt la liste des boutons du groupe. On repère le bouton qui a la propriété checked à true et on affiche
alors la valeur correspondante.

7. L'accès aux éléments de type SELECT

<SELECT name="liste" size=1>

42
ENI RV. 43
<OPTION value="valeur ligne 1">Libellé ligne 1</OPTION>
<OPTION value="valeur ligne 2">Libellé ligne 2</OPTION>
<OPTION value="valeur ligne 3">Libellé ligne 3</OPTION>
<OPTION value="valeur ligne 4">Libellé ligne 4</OPTION>
</SELECT>

En JavaScript, la structure d'un élément de type SELECT reprend ce schéma :

name Nom de la liste
Indice de la ligne sélectionnée
selectedIndex
(ligne 1 : indice=0)
options Tableau des lignes
length Nombre de lignes
value Valeur d'une ligne
text Libellé d'une ligne

Voici le code des événements des boutons.

Pour récupérer l'indice la ligne sélectionnée :
this.form.elements['liste'].selectedIndex
Pour récupérer le nombre de lignes :
this.form.elements['liste'].options.length
Pour récupérer la valeur de la ligne sélectionnée :
this.form.elements['liste'].options[this.form.elements['liste'].selectedIndex].value

Exemple 1 : Choix unique

<select name="dmc">
<option value="Choix 1" selected> Choix 1 </option>
<option value="Choix 2"> Choix 2 </option>
<option value="Choix 3"> Choix 3 </option>
</select>

<a href="#" onClick=" alert(document.forms.f.dmc.options[2].value) ">Avant</a>

<a href="#" onClick="document.forms.f.dmc.options[2].value ='cmd';
alert(document.forms.f.dmc.options[2].value)">Après</a>

</form>

Exemple 2 Choix multiple

<select name="nom" multiple >

Récupérer les options séléctionnées

Vous pouvez récupérer les options sélectionnées :

Par exemple, sélectionnez plusieurs options :
Evaluer le nombre de sélections
<form name="f" multiple size="5>
<select name="dmc">
<option value="Choix 1" selected>Choix 1</option>
<option value="Choix 2">Choix 2</option>
<option value="Choix 3">Choix 3</option>
<option value="Choix 4">Choix 4</option>
<option value="Choix 5">Choix 5</option>
</select>
<a href="#" onClick=evaluation();">Evaluer.</a>
</form>

43
ENI RV. 44

8.
L'accès aux éléments de type TEXTAREA

Une zone de texte multi-lignes a comme propriété principale value qui contient le texte de la zone.
Contenu brut Contenu traité

Pour récupérer le contenu de la zone, on utilise le classique :

document.forms["nom"].elements["zone"].value
Le "contenu traité" est obtenu par l'appel de la fonction escape() qui convertit tous les caractères spéciaux et non
visibles (tabulations, retour à la ligne, ...).
Dans notre exemple, quand "Contenu traité" est coché, on affiche :
escape(document.forms["nom"].elements["zone"].value)
La fonction inverse est unescape().

LES RADIO-BOUTONS

La gestion des radio-boutons est assez complexe.

<FORM>
<INPUT type="radio" name="os" value="Windows 95" checked>Windows 95
<INPUT type="radio" name="os" value="Windows 98">Windows 98
<INPUT type="radio" name="os" value="Windows NT">Windows NT
<INPUT type="radio" name="os" value="Linux">Linux
<INPUT type="radio" name="os" value="Autre">Autre
<INPUT type="button" value="Tester"
onClick="testerRadio(this.form.os)">

<SCRIPT language="javascript">
function testerRadio(radio) {
for (var i=0; i<radio.length;i++) {
if (radio[i].checked) { alert("Système = "+radio[i].value) }
}
}
</SCRIPT>

On crée un groupe de radio-boutons liés : le nom du groupe est os.

Une boucle parcourt la liste des boutons du groupe. On repère le bouton qui a la propriété checked à true et on affiche
alors la valeur correspondante.

Nous avons vu dans cette page comment manipuler les éléments de formulaires avec le javascript.
La page suivante montre les Trucs et astuces de formulaires qui facilitent la saisie dans les formulaires.

ASTUCES DE FORMULAIRE Cette page montre de nombreuses astuces pour

rendre un formulaire dynamique et attractif, en réaction

44
ENI RV. 45
aux événements générés par l'utilisateur. }
Il est nécessaire de bien connaître le principe des </SCRIPT>
formulaires HTML pour tirer partie de ces astuces.
Dans le corps
1 - Donner le focus (curseur) à un élément de <FORM name="form3">
formulaire <INPUT type="button" name="bouton"
Le premier champ texte a le focus au chargement de la value="Cliquez-moi aussi !"
page. onClick="CompteClic(this.form)">
Cliquez sur les boutons pour donner le focus aux </FORM>
autres éléments. La prise de focus est possible pour
tous les types d'objets. 4 - Valider un formulaire par JavaScript
Il est souvent utile de vérifier la saisie d'un formulaire
avant de le valider.
L'idéal est de créer un bouton (de type "button" et pas
Le script "submit") qui appelle une fonction javascript qui
contrôle la saisie et soumet ou non le formulaire.
<FORM name="form1"> Voyons un exemple simple de test de saisie d'un email.
<INPUT type="texte" name="champ1">
<INPUT type="button" value="<- Donne le focus" Saisissez une adresse mail valide (du type
onClick="this.form.champ1.focus()"> [email protected])
<SELECT name="champ2" >
<OPTION>Ceci est la ligne n° 1</OPTION> Le script
<OPTION>Ceci est la ligne n° 2</OPTION> Dans l'entête de la page
</SELECT> <SCRIPT language="javascript">
<INPUT type="button" value="<- Donne le focus" function ValiderMail(formulaire) {
onClick="this.form.champ2.focus()"> if (formulaire.mail.value.indexOf("@",0)<0)
<TEXTAREA rows="2" cols="15" name="champ3"> {alert("Adresse mail saisie invalide.\nLe formulaire ne
<INPUT type="button" value="<- Donne le focus" sera pas validé.")}
onClick="this.form.champ3.focus()"> else {
</FORM> alert("Formulaire validé.\nPour valider un
formulaire : formulaire.submit()");
Pour donner le focus à un champ de formulaire à // Pour valider le formulaire en javascript :
l'ouverture de la page, il faut ajouter cette ligne dans la // formulaire.submit()
balise BODY : }
onLoad="document.forms['nomduform'].elements['nom }
champ'].focus()" </SCRIPT>
Dans le corps de la page
2 - Changer le libellé d'un bouton <FORM name="form4" action="">
Cliquez le bouton pour changer son libellé. Saisissez une adresse mail valide (du type
[email protected])
Le script ;<INPUT type="texte" name="mail">
<FORM name="form2"> <INPUT type="button" name="bouton"
<INPUT type="button" name="bouton" value="Valider" onClick="ValiderMail(this.form)">
value='Cliquez-moi !' onClick="this.value='Touché !'"> </FORM>
</FORM>
5 - Vider un champ à la prise de focus
3 - Ne permettre qu'un seul clic sur un bouton Par exemple, un champ de saisie de login avec à
Accepte le premier clic sur le bouton et empêche les l'origine "Votre login".
suivants. Si vous cliquez sur le champ, "Votre login" disparaît.
Utile pour éviter de recevoir 3 fois le même message
quand un visiteur s'excite sur le bouton "Envoyer" ! Le script
Le script <FORM name="form5">
Dans l'entête de la page <INPUT type="texte" name="login" value='Votre
<SCRIPT language="javascript"> login' onFocus="if (this.value=='Votre login')
var nbclic=0 // Initialisation à 0 du nombre de clic {this.value=''}">
function CompteClic(formulaire) { // Fonction appelée </FORM>
par le bouton
nbclic++; // nbclic+1 6 - Détecter la touche [Entrée] sur un formulaire
if (nbclic>1) { // Plus de 1 clic Utile dans les formulaires de recherche, où la plupart
alert("Vous avez déjà cliqué ce bouton.\nLe des utilisateurs tapent [Entrée] pour valider la
formulaire est en cours de traitement... Patience"); recherche, sans cliquer sur le bouton "Rechercher".
} else { // 1 seul clic
alert("Premier Clic.");
Entrez un mot :
}

45
ENI RV. 46
CONTROLES DE SAISIE DANS UN FORMULAIRE
L'appui sur [Entrée] déclenche la soumission du
formulaire qu'il est possible de détecter avec Cette page montre comment contrôler la bonne saisie
l'événement onSubmit. dans un formulaire. Il est utile de lire l'article sur les
La balise FORM peut donc s'écrire : chaînes de caractères pour comprendre les fonctions
<FORM name="formulaire" utilisées.
onSubmit="maFonction()">
1 - Est-ce un nombre ?
Il peut être utile de vérifier que la saisie dans un champ
de formulaire est bien un nombre : saisie de quantités,
7 - Empêcher la saisie dans un champ de prix...
Dès que la curseur souris arrive sur ce champ, il est Saisir ici : :
enlevé. Cela rend impossible la saisie ou la Soit nb le champ à tester. Si !(isNaN(nb)) retourne true,
modification de son contenu. alors nb est un nombre.

L'astuce est d'utiliser l'événement onFocus qui détecte 2 - Est-ce une date ?
l'arrivée du curseur dans le champ. Cette fonction vérifie la saisie d'une date au format
Voici la ligne décrivant la zone : jour/mois/année.
<INPUT type="text" value="Non modifiable" Entrez une date au format JJ/MM/AAAA
name="champ" onFocus="this.blur()"> Voici la fonction CheckDate(d), où d est une chaîne de
La méthode focus() appliquée au champ retire le caractères.
curseur. function CheckDate(d) {
// Cette fonction vérifie le format JJ/MM/AAAA saisi
Avec cette ligne, il est possible de rediriger le curseur et la validité de la date.
vers un autre champ du formulaire : // Le séparateur est défini dans la variable
<INPUT type="text" value="Non modifiable" separateur
name="champ" onFocus="this.form.champ2.focus()"> var amin=1999; // année mini
La méthode focus() appliquée à champ2 active le var amax=2005; // année maxi
curseur. var separateur="/"; // separateur entre
jour/mois/annee
var j=(d.substring(0,2));
var m=(d.substring(3,5));
8 var a=(d.substring(6));
- Alimenter un champ texte au passage de la souris var ok=1;
Pour alimenter un champ texte au passage de la souris if ( ((isNaN(j))||(j<1)||(j>31)) && (ok==1) ) {
sur un objet (ici une cellule d'un tableau), jbvillier, alert("Le jour n'est pas correct."); ok=0;
propose cette solution : }
<script language=javascript> if ( ((isNaN(m))||(m<1)||(m>12)) && (ok==1) ) {
/* ti script by [email protected] */ alert("Le mois n'est pas correct."); ok=0;
function focusOn() { }
document.forms["form11"].champtexte.value = "Hé if ( ((isNaN(a))||(a<amin)||(a>amax)) && (ok==1) ) {
hop" ; alert("L'année n'est pas correcte."); ok=0;
} }
</script> if ( ((d.substring(2,3)!=separateur)||
(d.substring(5,6)!=separateur)) && (ok==1) ) {
<form name="form11"> <table width="66%" alert("Les séparateurs doivent être des
height="28%" border="1"> "+separateur); ok=0;
<tr> }
<td width="57%" height="26" if (ok==1) {
onMouseOver="focusOn()">passez la souris ici</td> var d2=new Date(a,m-1,j);
<td width="43%"><input type="text" j2=d2.getDate();
name="champtexte"></td> m2=d2.getMonth()+1;
</tr> a2=d2.getFullYear();
</table> if (a2<=100) {a2=1900+a2}
</form> if ( (j!=j2)||(m!=m2)||(a!=a2) ) {
alert("La date "+d+" n'existe pas !");
Ce qui donne ok=0;
}
}
passez la souris ici
return ok;
}
Voir des exemples de contrôles de saisies dans un
formulaire 3 - Est-ce un mail ?
Pour vérifier qu'un mail est valide, il suffit de tester la
46
ENI RV. 47
présence de @ et du point.
function verifiermail(mail) { if(document.forml.depart.value.charAt(i)< "0" ||
if ((mail.indexOf("@")>=0)&&(mail.indexOf(".")>=0)) document.forml.depart.value.charAt(i)> "9")
{ return true { alert("date de départ non valide!");
} else { alert("Mail invalide !"); return false document.forml.depart.focus();
} return false;
} }
Cette fonction vérifie la présence du caractère @ et }
du . pour vérifier la validité. Si ces 2 caractères sont </script>
trouvés, la fonction retourne true sinon, elle affiche un </head>
message et retourne false.
Entrez une adresse mail <body>
<p align="left"><font size="3" face="Arial, Helvetica,
4. Exemple : Utilisation d'un script pour valider les sans-serif">Pour effectuer
informations saisies dans un formulaire une reservation en ligne, veuillez compléter le
HTML formulaire suivant. Vous recevrez une réponse dans
de brefs délais.</font></p>
<html>
<form name="forml" method="post" action="<?
<head>
php echo $_SERVER['PHP_SELF']; ?>"
<title>Reservation en ligne</title>
onSubmit="return verif_champs()">
<table align="center" border="0" cellspacing="2"
<script type="text/javascript">
cellpadding="0">
<tr><td align="right">Nom:</td><td><input type="text"
function verif_champs()
name="nom" size="32"></td>
{
</tr>
if(document.forml.nom.value == "")
<tr><td align="right">E-mail:</td><td><input
{ alert("Veuillez entrer votre nom SVP");
name="email" type="text" value="" size="32">
document.forml.nom.focus();
</td>
return false;
</tr>
}
<tr><td align="right">Adresse:</td><td><textarea
if(document.forml.email.value == "")
name="adresse" cols="24" rows="3"></textarea></td>
{
</tr>
alert("Veuillez nous communiquer votre adresse email
<tr><td align="right">Nb de personnes:</td>
pour que nous puissons vous repondre.");
<td><select name="perso" size="1">
document.forml.email.focus();
<option value="1">1</option>
return false;
<option value="2">2</option>
}
<option value="3">3</option>
if(document.forml.email.value.indexOf('@') == -1)
<option value="4">4</option>
{
<option value="5">5</option>
alert("Adresse Email invalide!");
<option value="6">6</option>
document.forml.email.focus(); return false;
<option value="7">7</option>
}
<option value="8">8</option>
<option value="9">9</option>
if(document.forml.email.value.length <7)
<option value="10">10</option>
{ alert("Adresse Email invalide!");
<option value="11">11</option>
document.forml.email.focus(); return false;
<option value="12">12</option></select></td>
}
</tr>
<tr><td align="right">Nb de chambres:</td>
if(document.forml.adresse.value == "")
<td><select name="chamb" size="1">
{
<option value="1">1</option>
alert("Veuillez nous communiquer votre
<option value="2">2</option>
adresse, merci.");
<option value="3">3</option>
document.forml.adresse.focus();
<option value="4">4</option></select></td>
return false;
</tr>
}
<tr><td align="right">Date d'arrivée*:</td><td><input
type="text" name="arrive" size="5"></td>
var i;
</tr>
for(i=0;i<document.forml.arrive.value.length;i++)
<tr><td align="right">Date de départ*:</td><td><input
if(document.forml.arrive.value.charAt(i)< "0" ||
type="text" name="depart" size="5"></td>
document.forml.arrive.value.charAt(i)> "9")
</tr>
{ alert("date d'arrivée non valide!");
<tr><td align="right">Pension compléte</td>
document.forml.arrive.focus(); return false;
<td><p><label><input type="radio" name="pension"
}
value="oui" checked>Oui</label>
for(i=0;i<document.forml.depart.value.length;i++)
47
ENI RV. 48
<br><label><input type="radio" name="pension" A cette dernière nous lui associerons un événement,
value="non">Non</label> généralement un "onclick" avec la méthode reset().
<br></p></td> <input type="button"
</tr> onClick="document.forms.f.reset()">
<tr><td align="right">Message:</td><td><textarea
name="mess" cols="24" rows="5"></textarea></td> Par exemple :
</tr> Taper du texte dans le champ.
</table>
<p align="center"> <form name="f">
<input type="hidden" name="action" <input type="text" name="textfield">
value="submitted"> <input type="button"
<input type="submit" name="Submit" value="Envoyer"> onClick="document.forms.f.reset()">
</p> </form>
</form>
<p align="left"><font size="3" face="Arial, Helvetica, submit()
sans-serif">* date au format JJMMAA,
merci.</font></p> Pour envoyer un formulaire via le javascript, il ne faut
</body> plus utiliser la balise HTML <input type="submit">
</html> mais la balise HTML <input type="button">.
A cette dernière nous lui associerons un événement,
Capture d’écran généralement un "onclick" avec la méthode submit().
<input type="button"
onClick="document.forms.f.submit()">
Par exemple :

image

Pour renvoyer un formulaire via le javascript, il ne faut

plus utiliser la balise HTML <input type="image">
mais une image avec un lien <a href="#">.
A ce dernier, nous lui associerons un événement,
généralement un "onclick" avec la methode submit().
<a href="#" onClick = "document.forms.f.submit()">
<img src="monimage.gif"> </a>

Par exemple :

Informations <form name="f">

<input type="text" name="champ">
Nous allons étudier les propriétés Javascript de la </form>
balise HTML :
<input type="reset">, qui permet de réinitialiser le <a href="#" onClick="document.forms.f.submit()"><img
formulaire HTML. src="monimage.gif"></a>
<input type="submit">, qui permet d'envoyer le
formulaire HTML. L'image avec le lien peut être dans ou en dehors du
<input type="image">, qui permet d'envoyer le formulaire.
formulaire HTML mais à la place du bouton on spécifie Vous pouvez aussi mettre une image pour la méthode
une image. reset(), voiçi une autre manière d'écrire :
<input type="button"> qui permet d'afficher un <a href = "javascript:document.forms.f.reset()"> <img
bouton de formulaire n'a aucune action. src="monimage.gif"> </a>

reset()
Méthode : window.document.forms.reset()
Pour remettre à jour un formulaire via le javascript, il ne Réinitialise un formulaire
faut plus utiliser la balise HTML <input type="reset">
mais la balise HTML <input type="button">. Exemple reset
48
ENI RV. 49
<FORM> document.getElementsByName("fruit")[2].checked =
true;
Champ 1 : <INPUT TYPE="text" NAME="champ1"
VALUE="défaut 1"><BR> </script>

Champ 2 : <INPUT TYPE="text" NAME="champ2"

VALUE="défaut 2"><BR> 17. JAVASCRIPT ET LES COOKIES

<INPUT TYPE="button" VALUE="Rétablir les valeurs Avec JavaScript, il est possible de programmer les
par défaut" onClick="this.form.reset();"> célèbres cookies.
Nous allons voir ici à quoi servent les cookies et
</FORM> comment stocker et récupérer des informations grâce à
eux.
Méthode : window.document.forms.submit() En bas de cette page, vous trouverez des exemples de
programmation de cookies.
Soumet un formulaire
1 - A quoi servent les cookies ?
Exemple submit Les cookies sont très utilisés, par tous les sites
commerciaux et par de plus en plus de sites perso. La
<FORM ACTION="http://www.toutjavascript.com" raison est simple. Un cookie permet de stocker de
manière permanente des informations sur le poste du
TARGET="_blank" METHOD="post">
visiteur, qui pourront être récupérées lors des futures
visites.
Champ 1 : <INPUT TYPE="text" NAME="champ1" Voyons quelques unes des principales informations
VALUE="défaut 1"><BR> stockées dans les cookies :
• Le nombre de visites, la date de la dernière
Champ 2 : <INPUT TYPE="text" NAME="champ2" visite,... (Exemple : Tout JavaScript.com)
VALUE="défaut 2"><BR> • Un identifiant et un mot de passe pour une
reconnaissance automatique du visiteur
<INPUT TYPE="button" VALUE="Soumettre ce (Exemple : CDNow)
formulaire à http://www.toutjavascript.com" • Une liste de mots-clés utilisés dans les
onClick="this.form.submit()"> moteurs de recherche pour cibler les publicités
à afficher (Exemple : beaucoup de moteurs de
</FORM> recherche)
• Une liste de paramètres de préférences de
Méthode : navigation pour personnaliser la page
window.document.getElementsByName() présentée (Exemple : Mon Yahoo !)
• Des informations à transférer d'une page à
Retourne un objet HTML à partir de son nom l'autre du site.

Exemple Case à cocher 2 - Comment STOCKER des informations ?

<FORM name="form_fruit"> Le type d'informations à stocker n'a aucune influence

sur le code. Un cookie est un fichier de texte qui
<INPUT type="checkbox" name="fruit" contient une chaîne de caractères contenant les
value="Fraise"> Fraise <BR> informations concaténées.
Voici la fonction qui permet de stocker une information
<INPUT type="checkbox" name="fruit" dans un cookie
value="Banane"> Banane <BR> function SetCookie (name, value) {
var argv=SetCookie.arguments;
var argc=SetCookie.arguments.length;
<INPUT type="checkbox" name="fruit"
var expires=(argc > 2) ? argv[2] : null;
value="Pomme"> Pomme <BR> var path=(argc > 3) ? argv[3] : null;
var domain=(argc > 4) ? argv[4] : null;
</FORM> var secure=(argc > 5) ? argv[5] : false;
document.cookie=name+"="+escape(value)+
<SCRIPT language=javascript> ((expires==null) ? "" : (";
expires="+expires.toGMTString()))+
document.getElementsByName("fruit")[0].checked = ((path==null) ? "" : ("; path="+path))+
true; ((domain==null) ? "" : ("; domain="+domain))+
((secure==true) ? "; secure" : "");
document.getElementsByName("fruit")[1].checked = }
true; La valeur à stocker est associée à un nom de cookie.
La date d'expiration permet de définir la longévité du
49
ENI RV. 50
cookie. Si elle est omise, le cookie est détruit à la page le menu et tous les liens de leur navigation. Nous
fermeture du navigateur. allons tout de même aborder la mise en place des
Le path indique simplement d'où vient le cookie. frames et surtout leur intérêt dans la programmation
Le nom de domaine permet d'identifier le cookie parmi JavaScript.
tous ceux stockés sur la machine.
La variable secure indique si l'accès au cookie est 1 - Comment intégrer des frames ?
protégé.
Donc pour stocker la valeur Arthur dans la variable Pour créer une page séparée en plusieurs frames, il
prenom il suffit d'appeler la fonction comme ceci : faut à l'origine une page principale qui remplace la
var pathname=location.pathname; zone BODY par la déclaration et le positionnement des
var frames.
myDomain=pathname.substring(0,pathname.lastIndex La structure classique d'une page découpée en frames
Of('/')) +'/'; est celle-ci.
var date_exp = new Date(); <HTML>
date_exp.setTime(date_exp.getTime() <HEAD>
+(365*24*3600*1000)); <TITLE>Titre de page</TITLE>
// Ici on définit une durée de vie de 365 jours </HEAD>
SetCookie("prenom","Arthur",date_exp,myDomain);
<FRAMESET cols="140,*">
<FRAMESET rows="*,50" frameborder=0>
3 - Comment RECUPERER les informations ? <FRAME name="FRAME1" src="frame1.html">
Voyons un cookie qui contiendrait les informations <FRAME name="FRAME2" src="frame2.html">
suivantes : </FRAMESET>
• prenom = Arthur <FRAME name="FRAME3" src="frame3.html">
• nb_visite = 3 </FRAMESET>
Pour récupérer l'information prenom, il faut extraire, de Cette déclaration crée une page découpée de la sorte :
la chaîne de caractères composant le cookie, le nom FRAME 1
de la variable soit prenom. La valeur de prenom est la
chaine de caractères située immédiatement après et FRAME 3
séparée par ';' et par ' '.
Voici le code des fonctions nécessaires à la
FRAME 2
récupération d'une information :
function getCookieVal(offset) {
var endstr=document.cookie.indexOf (";", offset); Nous n'allons pas voir en détail comment créer des
if (endstr==-1) frames, c'est là du langage HTML et la documentation
endstr=document.cookie.length; est riche dans ce domaine.
return
unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) { 2 - Le JavaScript dans les frames
var arg=name+"=";
var alen=arg.length; La première application qui vient à l'esprit avec les
var clen=document.cookie.length; frames est la création de menu. C'est en effet la
var i=0; principale utilité des frames - nous verrons qu'il y en a
while (i<clen) { d'autres.
var j=i+alen; En HTML, pour créer un lien qui charge une page dans
if (document.cookie.substring(i, j)==arg) une frame, il faut écrire :
return getCookieVal (j); <A HREF="page.html"
i=document.cookie.indexOf(" ",i)+1; target="nom_frame">Le Lien</A>
if (i==0) break;} Dans la balise A, target contient le nom de la frame à
return null; charger avec le fichier (ici page.html).
} En JavaScript, pour charger une page dans une frame,
Si la variable demandée n'est pas contenue dans le on utilise une des instructions suivantes :
cookie, elle est considérée comme valant null.
Pour récupérer la variable prenom, il suffit d'appeler la parent.frames[nu_frame].window.location="page.html"
fonction : Ici, on fait appel au tableau frames indicé par
le_prenom=GetCookie("prenom"); nu_frame. Ici la frame numéro nu_frame contient
page.html.

18. JAVASCRIPT ET LES FRAMES parent.frames["frame1"].window.location="page.html"

Maintenant, on accède au tableau des frames par son
Les frames sont de plus en plus rejetées par le monde nom. Le résultat est identique avec l'instruction
de l'internet. La plupart des grands sites les ont suivante :
abandonnées et ont choisi de recopier sur chaque parent.frame1.window.location="page.html"
50
ENI RV. 51
Si vous souhaitez charger 2 pages dans 2 frames On souhaite utiliser dans toutes les frames une
différentes avec 1 seul clic, JavaScript le permet. fonction qui affiche une ligne de copyright.
On commence par déclarer une fonction charger avec On commence par déclarer dans l'entête de la fenêtre
en paramètre les noms des pages à charger dans les 2 parente la fonction AffCopyright().
frames :
function charger(nom_page1,nom_page2) { <SCRIPT language="javascript">
parent.frames["frame1"].window.location=nom_page1; function AffCopyright() {
parent.frames["frame2"].window.location=nom_page2; document.write("<CENTER>Copyright 2000 - Tous
} droits réservés</CENTER>");
On suppose dans cet exemple que les frames }
s'appellent frame1 et frame2. <SCRIPT>
On crée ensuite un lien qui appelle la fonction
JavaScript charger : Dans toutes les frames du site, il suffit, pour afficher
<A cette note de copyright, d'appeler la fonction ainsi :
HREF="JavaScript:charger('page1.html','page2.html')"> <SCRIPT
1 Clic et 2 pages chargées</A> language="javascript">parent.AffCopyright()<SCRIPT>
L'intérêt est évidemment la facilité de mise à jour sur
Il est possible aussi d’écrire un script permettant toutes les pages du site de cette note de copyright. Il
d’afficher un message dans un frame : suffit de changer la fonction dans la page parent et les
modifications se reportent automatiquement dans
var user= document.forms(0).user.value; toutes les pages du site où la fonction est intégrée.
message="<BR>"+"vous n avez pas d adresse
electronique" + user; Les frames sont très utiles dans la conception de
window.parent.frames[1].document.writeln(message) sites :
• Elles facilitent la création et la mise à jour de la
La seconde application est la sauvegarde navigation
d'informations tout au long d'une session de navigation. • Elles offrent des possibilités de programmation
Les frames remplacent avantageusement les cookies en javascript (sauvegarde d'informations)
s'il s'agit de stocker des informations juste pendant la
navigation du visiteur. Les informations stockées sont 19. FONCTIONS MATHEMATIQUES
perdues dès que le visiteur ferme son navigateur ou s'il
remplace votre page par une autre. JavaScript est tout à fait adapté pour les calculs sur le
Pour stocker des informations, il suffit de déclarer une poste du visiteur, de nombreuses fonctions
variable dans l'entête de la fenêtre mère (celle qui mathématiques ont été implémentées.
contient la déclaration des frames grâce aux balises
<FRAMESET>). Cette variable peut être juste une 1. La conversion de chaînes de caractères en
valeur (nombre, chaîne, ...) ou un objet complexe.
nombres
Exemple de stockage de l'heure d'ouverture de la
Les fonctions de conversion
session
Dans l'entête (entre les balises <HEAD> et </HEAD>)
de la fenêtre parent, on déclare : En JavaScript, les variables ne sont pas typées,
<SCRIPT language="javascript"> mais il est utile de savoir transformer une chaîne
var heure=new Date(); en un entier ou un réel (nombre à virgule).
heure=date.getTime() // Imaginons ce script :
transformation de la date en millisecondes var chaine="3.14";
</SCRIPT> var entier=parseInt(chaine);
Rappel : la fenêtre parent est celle qui contient la var reel=parseFloat(chaine);
déclaration des frames
A l'issue de ce script, entier contient 3 et reel
Dans la frame1, on a accès à cette variable en codant : contient 3.14
<SCRIPT language="javascript">
var h=parent.heure; Est-ce un nombre ?
<SCRIPT> Supposons maintenant que la variable chaine soit
initialisée avec "azerty"
Cette possibilité peut être étendue aux fonctions. De la var chaine="azerty";
même façon que la fenêtre parente peut sauver des var entier=parseInt(chaine);
variables, il est possible de coder des fonctions dans var reel=parseFloat(chaine);
son entête et de les récupérer ensuite dans toutes les var rate=isNaN(entier);
frames.
A l'issue du script, entier et reel contiennent NaN,
Exemple de déclaration d'une fonction dans la car "azerty" ne peut pas se convertir en nombre.
page parente Pour détecter que chaine a bien le format d'un
nombre, il existe une fonction isNaN(valeur) qui
renvoie :
51
ENI RV. 52
- true si valeur n'est pas un nombre entier contient isNaN(entier)=
- false si valeur est un nombre reel contient isNaN(reel) =
Dans ce cas, rate est à vrai car la conversion a
échoué. Ces trois fonctions (attention aux majuscules) sont très
utiles pour manipuler des variables en étant sur d'avoir
ATTENTION, isNaN(valeur) retourne vrai si affaire à des nombres. Cela permet par exemple de
valeur N'est PAS un nombre convertir une saisie dans un formulaire et de vérifier
Pour bien comprendre que le visiteur a bien entré un nombre (prix, quantité,
Vous pouvez tester ces fonctions grâce à ce formulaire âge, année, ...)
(essayez avec un nombre et avec une chaîne comme
"azerty") : 2. L'objet Math
chaine contient
Le tableau suivant décrit les méthodes de l'objet Math.

Méthode description Exemple

• x = Math.abs(3.26) donne x = 3.26
Retourne la valeur absolue d'un nombre, il renvoie donc
Abs() le nombre s'il est positif, son opposé (positif) s'il est
négatif • x = Math.abs(-3.26) donne x =
3.26
• x = Math.ceil(6.01) donne x = 7
Retourne l'entier supérieur ou égal à la valeur donnée
ceil()
en paramètre
• x = Math.ceil(3.99) donne x = 4
• x = Math.floor(6.01) donne x = 6
Retourne l'entier inférieur ou égal à la valeur donnée en
floor()
paramètre
• x = Math.floor(3.99) donne x = 3
• x = Math.round(6.01) donne x = 6
Arrondit à l'entier le plus proche la valeur donnée en • x = Math.round(3.8) donne x = 4
round()
paramètre
• x = Math.round(3.5) donne x = 4
• x = Math.round(6,7.25) donne x =
7.25
max(Nombre1, Retourne le plus grand des deux entiers donnés en • x = Math.round(-8.21,-3.65) donne
Nombre2) paramètre x = -3.65

• x = Math.round(5,5) donne x = 5
• x = Math.max(6,7.25) donne x =
7.25
min(Nombre1, Retourne le plus petit des deux entiers donnés en • x = Math.max(-8.21,-3.65) donne x
Nombre2) paramètre = -3.65

• x = Math.max(5,5) donne x = 5
• x = Math.min(6,7.25) donne x = 6
• x = Math.min(-8.21,-3.65) donne x
min(Nombre1, Retourne le plus petit des deux entiers donnés en = -8.21
Nombre2) paramètre
• x = Math.min(5,5) donne x = 5
• x = Math.pow(3,3) donne x = 27
pow(Valeur1,
Retourne le nombre Valeur1 à la puissance Valeur2
Valeur2) • x = Math.pow(9,0.5) (racine
carrée) donne x = 3
• x = Math.random() donne x =
random() Retourne un nombre aléatoire compris entre 0 et 1
0.6489534931546957
Retourne la racine carrée du nombre passé en • x = Math.random() donne x =
sqrt(Valeur)
paramètre 0.6489534931546957
Logarithmes et exponentielle
Méthode description
Math.E Propriété qui retourne le nombre d'Euler (environ 2.718)
52
ENI RV. 53
Math.exp(valeur)Retourne l'exponentielle de la valeur entrée en paramètre
Math.LN2 Retourne le logarithme népérien de 2
Math.LN10 Retourne le logarithme népérien de 10
Math.log(valeur) Retourne le logarithme de la valeur entrée en paramètre
Math.LOG2E Propriété qui retourne la valeur du logarithme du nombre d'Euler en base 2
Math.SQRT1_2 Propriété qui retourne la valeur de 1 sur racine de 2 (0.707)
Math.SQRT2 Racine de 2 (1.414)
Trigonométrie
Méthode description
Math.PI Retourne la valeur du nombre PI, soit environ 3.1415927
Math.sin(valeur) Retourne le sinus de la valeur entrée en paramètre (doit être donnée en radians)
Math.asin(valeur) Retourne l'arcsinus de la valeur entrée en paramètre (doit être donnée en radians)
Math.cos(valeur) Retourne le cosinus de la valeur entrée en paramètre (doit être donnée en radians)
Math.acos(valeur)Retourne l'arccosinus de la valeur entrée en paramètre (doit être donnée en radians)
Math.tan(valeur) Retourne la tangente de la valeur entrée en paramètre (doit être donnée en radians)
Math.atan(valeur) Retourne l'arctangente de la valeur entrée en paramètre (doit être donnée en radians)

20. L'OBJET DATE Les dates en Javascript sont stockées de la même

manière que dans le langage Java, c'est-à-dire qu'il
L'objet Date permet de travailler avec toutes les s'agit du nombre de secondes depuis le 1er janvier
variables qui concernent les dates et la gestion du 1970. Ainsi, toute date antérieure au 1er janvier 1970
temps. Il s'agit d'un objet inclus de façon native dans fournira une valeur erronée. Si jamais on veut
Javascript, et que l'on peut toujours utiliser. manipuler des dates antérieures il s'agit de créer vous-
même un objet date spécifique...
La syntaxe pour créer un objet-date peut être une des
suivantes: Les méthodes de l'objet Date

1. Nom_de_l_objet = new Date() La date est stockée dans une variable sous la forme
cette syntaxe permet de stocker la date et d'une chaîne qui contient le jour, le mois, l'année,
l'heure actuelle l'heure, les minutes, et les secondes. Il est donc difficile
2. Nom_de_l_objet = new Date("mois jour, d'accéder à un seul élément d'un objet date, étant
année heures:minutes:secondes") donné que chacun des éléments peut avoir une taille
les paramètres sont une chaîne de caractère variable. Heureusement, les méthodes de l'objet Date
sous cette notation fournissent un moyen simple d'accéder à un seul
élément, ou bien de le modifier.
3. Nom_de_l_objet = new Date(year, month,
Leur syntaxe est la suivante:
day)
Objet_Date.Methode()
les paramètres sont trois entiers séparés par
des virgules.
Les paramètres omis sont mis à zéro par Connaître la date
défaut
4. Nom_de_l_objet = new Date(year, month, Les méthodes dont le nom commence par le radical
day, hours, minutes, seconds) get (mot anglais qui signifie récupérer) permettent de
les paramètres sont six entiers séparés par récupérer une valeur:
des virgules.
Les paramètres omis sont mis à zéro par
défaut

Méthode Description Type de valeurs retournée

Permet de récupérer la valeur du jour L'objet retourné est un entier (entre 1 et 31) qui
getDate()
du mois correspond au jour du mois:
L'objet retourné est un entier qui correspond au jour de la
Permet de récupérer la valeur du jour semaine:
getDay()
de la semaine pour la date spécifiée • 0: dimanche
• 1: lundi ...
Permet de récupérer la valeur de L'objet retourné est un entier (entre 0 et 23) qui
getHour()
l'heure correspond à l'heure
Permet de récupérer la valeur des L'objet retourné est un entier (entre 0 et 59) qui
getMinutes()
minutes correspond aux minutes
getMonth() Permet de récupérer le numéro du L'objet retourné est un entier (entre 0 et 11) qui
mois correspond au mois:
• 0: janvier
53
ENI RV. 54
• 1: février ...
L'objet retourné est un entier. Cette méthode est très utile
Permet de récupérer le nombre de
getTime() pour passer d'une date à une autre, soustraire ou ajouter
secondes depuis le 1er janvier 1970
deux dates, ...
Retourne la différence entre l'heure
L'objet retourné est un entier, il représente le nombre de
getTimezoneOffset()locale et l'heure GMT (Greenwich
minutes de décalage
Mean Time)

Modifier le format de la date

Les deux méthodes suivantes ne permettent de travailler que sur l'heure actuelle (objet Date()) leur syntaxe est donc
figée:
Méthode Description Type de valeurs retournée
Permet de convertir une date en une chaîne L'objet retourné est une chaîne de caractère du type:
toGMTString()
de caractères au format GMT Wed, 28 Jul 1999 15:15:20 GMT
L'objet retourné est une chaîne de caractère dont la
Permet de convertir une date en une chaîne
toLocaleString() syntaxe dépend du système, par exemple:
de carctères au format local
28/07/99 15:15:20

Modifier la date
Les méthodes dont le nom commence par le radical set (mot anglais qui signifie règler) permettent de modifier une
valeur:
Méthode Description Type de valeur en paramètre
Permet de fixer la valeur du jour du Le paramètre est un entier (entre 1 et 31) qui correspond au jour du
setDate(X)
mois mois
Le paramètre est un entier qui correspond au jour de la semaine:
Permet de fixer la valeur du jour de
setDay(X) • 0: dimanche
la semaine
• 1: lundi ...
setHour(X) Permet de fixer la valeur de l'heure Le paramètre est un entier (entre 0 et 23) qui correspond à l'heure
Permet de fixer la valeur des Le paramètre est un entier (entre 0 et 59) qui correspond aux
setMinutes(X)
minutes minutes
Le paramètre est un entier (entre 0 et 11) qui correspond au mois:
setMonth(X) Permet de fixer le numéro du mois • 0: janvier
• 1: février ...
Le paramètre est un entier représentant le nombre de secondes
setTime(X) Permet d'assigner la date
depuis le 1er janvier 1970

Attention!
Les méthodes getTime() et setTime() ne sont pas en secondes mais en millisecondes.
Si vous voulez attribuer un timestamp récupérer par exemple avec PHP, vous devez le multiplier par 1000.

22. FONCTIONS D’ENCODAGE Ce qui vous donne : le lien

escape()
Une url doit être au format ASCII (hexadécimal). encodeURI
transformer une chaîne de caractères en ASCII, vous La méthode encodeURI remplace la méthode escape
devez utiliser la fonction javascript escape(). dans le javascript 1.5 compatible avec Internet Explorer
5.5, Netscape6+, FireFox
Exemple :
document.links[n].href=escape("le lien 5"); Exemple :
ce qui vous donne : le%20lien%205 alert(encodeURI("le lien 5/;?#"));
ce qui vous donne : le%20lien%205/;?#
Cependant, les méthode escape et unescape ne
fonctionnent pas correctement pour les caractères non- Attention encodeURI n'encode pas les caratères
ASCII et sont donc déconseillées suivant " : ", " / ", " ; " et " ? ". Utilisez à la méthode
encodeURIComponent
unescape()
La méthode javascript unescape() vous permettra de decodeURI
faire l'inverse. La méthode javascript decodeURI() vous permettra de
faire l'inverse.
Exemple :
unescape("le%20lien%205"); Exemple :

54
ENI RV. 55
decodeURI("le%20lien%205/;?#"); else {alert(" E R R E U R !\n\nLe mot ["+lemot+"] n'est
Ce qui vous donne : le lien 5/;?# pas présent !!!!"); }
encodeURIComponent }
La méthode encodeURIComponent remplace toutes
les caractères. Elle compatible avec Internet Explorer
5.5, Netscape6+, FireFox. 2ème exemple : Est-ce un login valide ?
La principale utilité des expressions régulières en
Exemple : javascript est de vérifier la saisie dans un formulaire.
alert(encodeURIComponent("le lien 5;?#")); Cette fonction vérifie que le login saisi est bien
ce qui vous donne : le%20lien%205%3B%3F%23 formaté : de 3 à 8 caractères et sans caractères
decodeURIComponent spéciaux (uniquement des chiffres et des lettres).
La méthode javascript decodeURIComponent() vous
permettra de faire l'inverse. Saisissez un login :
Saisissez un login :
Exemple : Voici le code correspondant :
decodeURIComponent("le%20lien%205%3B%3F function VerifLogin(login) {
%23");
var exp=new RegExp("^[a-zA-Z0-9]{3,8}$","g");
Ce qui vous donne : le lien 5;?#
if ( exp.test(login) ) {alert("Le login ["+login+"] est
23. LES EXPRESSIONS REGULIERES valide :)"); }
else {alert(" E R R E U R !\n\nLe login ["+login+"] n'est
Les expressions régulières sont des objets qui existent pas valide !!!!"); }
dans la plupart des langages de programmation, mais }
qui sont mal connus, car relativement complexes.
Les expressions régulières permettent de réaliser des
traitements sur des chaînes de caractères, traitements
qui peuvent être assez complexes à réaliser sans l'aide
de ces fameuses expressions.

1er exemple : Trouver des mots dans un texte

Comment savoir si un mot est présent dans un texte.
Voici le texte :

Mot à recherche :
Voici le code correspondant :
function SearchRegExp1(f) {
var lemot = f.mot.value
var exp=new RegExp(lemot,"g");
if ( exp.test(f.texte.value) ) {alert("Le mot ["+lemot+"] a
été trouvé :)"); }
Déclarer un objet RegExp

Il existe 2 manières pour déclarer un objet RegExp. La plus lisible est d'utiliser le constructeur RegExp :
var reg=new RegExp(pattern, option);
Ici, reg est devenu un objet de type RegExp.
pattern est le motif associé, ce qui permet de faire le traitement. Son format est défini dans le paragraphe suivant.
option est une chaîne de caractère qui peut prendre les valeurs :
"", vide, aucune option,
"g", recherche globale sur toute la chaîne,
"i", ne pas faire la distinction majuscule/minuscule,
"gi", association de g et i.
Une autre notation, plus compacte, mais moins lisible est utilisée :
var exp=/pattern/option; Les 2 notations sont exactement équivalentes.

La syntaxe du motif pattern

C'est bien l'écriture du motif qui va faire toute la puissance de votre expression régulière. Voici les principales syntaxes
possibles :

55
ENI RV. 56
Motif Signification
^ Début de ligne ou de chaîne
$ Fin de ligne ou de chaîne
. N'importe quel caractère
x|y Caractère x ou y
[abc] Groupe de caractères : n'importe lequel de ceux entre crochets
[a-z] Groupe de caractères : n'importe lequel de a à z
[^0-9] Groupe de caractères : tous sauf ceux entre crochets
(x) Expression parenthésée (mémorisée)
* Caractère précédent de 0 à X fois
+ Caractère précédent de 1 à X fois
? Caractère précédent de 0 à 1 fois
{n} Caractère précédent exactement n fois
{n,} Caractère précédent au moins n fois
{n,m} Caractère précédent entre n et m fois
\ N'est pas un caractère, sert de caractère d'échappement
\\ Caractère \
\d Chiffres (équivalent à [0-9])
\D Sauf chiffres (équivalent à [^0-9])
\b Frontière de mot (espace, alinéa, ...)
\s Caractère d'espacement (espace, tabulation, saut de page, ...) équivalent à [ \f\n\r\t\v]
\S Un seul caractère sauf un espacement
\w N'importe quel caractère alphanumérique, y compris undescore (_) équivalent à [A-Za-z0-9_]
\W Tout sauf un caractère alphanumérique équivalent à [^A-Za-z0-9_]

Exemples de motif
Si on reprend l'exemple du contrôle de login, le pattern valait : ^[a-zA-Z0-9]{3,8}$
La signification est :
^ : pour montrer le début de la chaine,
[a-zA-Z0-9] : pour les caractères alphanumérique de a à z, de A à Z et de 0 à 9,
{3,8} : pour indiquer qu'il faut une longueure de 3 à 8 caractères alphanumériques,
$ : pour interdire tout caractère après.

Pour tester qu'une saisie est un mail valide, voici la chaîne pattern à utiliser :
^[a-zA-Z0-9\-_]+[a-zA-Z0-9\.\-_]*@[a-zA-Z0-9\-_]+\.[a-zA-Z\.\-_]{1,}[a-zA-Z\-_]+
La signification de cette chaîne est logique également :
^ : début du mail
[a-zA-Z0-9\-_]+ : Au moins un caractère alphanumérique en début de mail
[a-zA-Z0-9\.\-_]* : Tous les caractères alphanumériques plus ., - et _ au moins 1 fois
@ : une fois arobase
[a-zA-Z0-9\-_]+ : Tous les caractères alphanumériques plus ., - et _ au moins 1 fois
\. : 1 fois le caractère .
[a-zA-Z0-9\.\-_]{1,} : Tous les caractères alphanumériques plus ., - et _ au moins 2 fois
[a-zA-Z0-9\-_]+ : Au moins un caractère alphanumérique en fin de mail

Les différentes actions des RegExp

56
ENI RV. 57
les éléments qui correspondent à l'expression
L'objet RegExp possède plusieurs méthodes qui ont régulière.
différents effets.
Nous avons déjà vu la méthode test() qui valide une Extraction d'adresse mails dans un texte
chaîne de caractères en fonction d'un motif.
La méthode exec() retourne un tableau des occurences Texte à traiter :
répondant aux critères du motif.
Sur l'objet string, il existe également des méthodes qui Encore une utilisation de la méthode match() : function
attendent en paramètres une expression régulière. ExtraireMail(chaine) {
La méthode search() permet de trouver des var exp=new RegExp("[a-zA-Z0-9\-_]+[a-zA-Z0-9\.\-
occurences répondant aux critères du motif. _]*@[a-zA-Z0-9\-_]+\.[a-zA-Z\.\-_]{1,}[a-zA-Z\-_]+","g");
La méthode replace() permet de trouver et de var tabMail=chaine.match(exp);
remplacer des occurences répondant aux critères du if (tabMail==null) {alert("Problème dans
motif. l'expression !");}
La méthode match() permet de trouver des occurences else {
répondant aux critères du motif. var affichage="Nombre de mails trouvés = " +
tabMail.length + "\n";
Exemple d'utilisation de split() et match() for (var i=0;i<tabMail.length;i++){
affichage=affichage + " ["+ tabMail[i] + "]\n";
Supposons une liste de noms séparés par des virgules, }
des espaces ou des points-virgules, mais dont le alert(affichage);
format n'est pas uniforme. }
Les expressions régulières vont nous permettre de }
créer un tableau avec tous les noms correctement
isolés. Extraire les paramètres d'une url

Listes des noms : Grâce aux expressions régulières, on peut également

extraire simplement les paramètres passés dans une
url pour les traiter en javascript.
Pour l'extraction par split(), cette fonction est utilisée : Cette fonction crée un tableau associatif avec tous les
function ExtraireNom(chaine) { paramètres de l'url et leur valeur. Il est donc possible
var exp=new RegExp("[, ;]+","g"); de passer des paramètres de page en page en
var tabNom=chaine.split(exp); javascript.
if (tabNom==null) {alert("Problème dans
l'expression !");}
else { Le bouton ouvre un popup pour afficher le résultat
var affichage="Nombre de noms trouvés = " + Voici la fonction qui crée le tableau de paramètres :
tabNom.length + "\n"; function TJS_ExtractURL(url) {
for (var i=0;i<tabNom.length;i++){ var regexp=new RegExp("[?&]");
affichage=affichage + " ["+ tabNom[i] + "]\n"; var tab=url.split(regexp);
} tabparam=new Array;
alert(affichage); for (var i=1;i<tab.length;i++){
} tabparam[tab[i].substring(0,tab[i].indexOf("="))]=tab[i]
} .substring(tab[i].indexOf("=")+1)
La méthode split() créé un tableau qui contient tous les }
éléments trouvés entre le séparateur défini par }
l'expression régulière.

Pour l'extraction par match(), cette fonction est utilisée : Remplacer des caractères
function ExtraireNom2(chaine) {
var exp=new RegExp("[a-zA-Z\-]+","g"); Les expressions régulières permettent également de
var tabNom=chaine.match(exp); remplacer des caractères dans une chaîne.
if (tabNom==null) {alert("Problème dans Chaine AVEC les accents :
l'expression !");}
else { Chaine SANS les accents :
var affichage="Nombre de noms trouvés = " + Ici, on remplace tous les "e" accentés par un "e".
tabNom.length + "\n"; chaine=chaine.replace(/[éèêë]/g,"e");
for (var i=0;i<tabNom.length;i++){
affichage=affichage + " ["+ tabNom[i] + "]\n"; Rendre un mail cliquable
}
alert(affichage); La fonction remplace permet également de retenir des
} valeurs trouvées dans l'expression et de les réutiliser
} dans la chaîne de remplacement.
La méthode match() créé un tableau qui contient tous Par exemple pour la chaîne de texte suivante :
57
ENI RV. 58
 Ainsi, vous ne risquez pas de voir des données
Bonjour, vous pouvez nous joindre sur confidentielles récupérées à votre insu.
[email protected] ou [email protected]  De même, il n'est pas possible de lister les
A bientôt. logiciels copiés et non enregistrés. Impossible
aussi de détruire des fichiers indispensables ou
Après traitement, la chaîne de texte devient : d'introduire un virus sur le poste d'un visiteur.
Bonjour, vous pouvez nous joindre sur  Certains diront que JavaScript possède des
[email protected] ou [email protected] fonctions pour lire des fichiers texte. En fait,
A bientôt. javascript permet d'intégrer des applets Java
ou ActiveX qui elles sont capables d'agir sur le
function TJS_EmailCliquable(email) { disque dur. Il ne s'agit pourtant pas de
var exp=new RegExp("([a-zA-Z0-9\.\-_]+@[a-zA-Z0- javascript pur : si vous désactivez Java et
9\-_]+\.[a-zA-Z0-9]{2,})","g"); ActiveX, rien ne se passera.
return email.replace(exp,"<A href='mailto: JavaScript seul ne peut pas non plus récupérer
$1'>$1</A>"); l'adresse IP d'un visiteur. Il est indispensable
} également de passer par des appels à Java ou à
ActiveX.
Rendre une adresse url cliquable
3 - Les limites de JavaScript
Je vous invite à visiter le site de mon partenaire
http://www.microscop.net/tjs.html !  La principale limite de JavaScript est qu'il ne
permet pas de lire et d'écrire sur le disque dur
Après traitement, la chaîne de texte devient : du visiteur (en dehors des cookies) et du
Je vous invite à visiter le site de mon partenaire serveur.
http://www.microscop.net/tjs.html!  Il est donc impossible en javascript de générer
par exemple un fichier de connexions sur le
function TJS_UrlCliquable(url) { serveur, ou un compteur de visites sur une
var exp1=new RegExp("((ht|f)tps?://.*)[\\s]+","gi"); page donnée.
return url.replace(exp1,"<A href='$1'>$1</A>");  De même, JavaScript ne peut pas s'interfacer
} avec une base de données. Impossible alors de
concevoir un forum de discussion, un script de
LIMITES JAVASCRIPT sondage ou de vote, dont les données sont
stockées, soit dans un fichier, soit en base sur
1 - Ce que permet JavaScript le serveur. Impossible aussi de lier un
Le language JavaScript est parfaitement adapté pour catalogue en base sur le serveur à votre
des traitements sur le poste du navigateur. Voici boutique en ligne.
quelques exemples de cas où JavaScript est efficace
(voire irremplaçable) : 4 - Les alternatives
• Vérification de saisie dans des formulaires Il existe une multitude de technologies actuellement
(Adresse, email) qui permettent de combler les lacunes de javascript.
• Calculs simples suite à des saisies de On peut les séparer en 2 catégories :
formulaire (Tarifs, calculatrice) • Celles dont le code est exécuté sur le poste du
• Moteur de recherche (base de recherche visiteur (Flash , Java etc)
définie par le webmaster) • Celles dont le code est exécuté par le serveur
• Gestion des dates et des heures (Date du jour, qui renvoie une page au format HTML ( PHP,
Date de mise à jour, Calendriers) JSP,ASP , CGI etc)
• Gestion des cookies (Sauvegarde d'information
: nombre de visites, caddie virtuel)
• Gestion de la navigation (Menus dynamique,
popup)
• Animations graphiques (Dynamic HTML,
MouseOver, bannières rotatives, jeux)
• etc...
2 - JavaScript et la sécurité

JavaScript a été conçu pour limiter (presque)

complètement les risques pour le visiteur.
En ce sens,
 on peut dire que exécuter un javascript sur son
navigateur ne comporte aucun risque pour les
données et le matériel.
 JavaScript ne permet pas d'écrire ou de lire un
fichier sur le disque dur du visiteur ou sur le
serveur.
58

Vous aimerez peut-être aussi

Chapitre3 JS Partie1
Pas encore d'évaluation
Chapitre3 JS Partie1
39 pages
CoursJavaScriptVer1 0
Pas encore d'évaluation
CoursJavaScriptVer1 0
69 pages
Cours 7 Javascript Bases
Pas encore d'évaluation
Cours 7 Javascript Bases
93 pages
Formation Java Script
Pas encore d'évaluation
Formation Java Script
93 pages
3 JS
Pas encore d'évaluation
3 JS
57 pages
Cours JS
Pas encore d'évaluation
Cours JS
60 pages
Javascript PC
Pas encore d'évaluation
Javascript PC
57 pages
Chapitre JavaScript
Pas encore d'évaluation
Chapitre JavaScript
122 pages
Introduction À Javascript
Pas encore d'évaluation
Introduction À Javascript
77 pages
Introduction Au - Web Javascript
Pas encore d'évaluation
Introduction Au - Web Javascript
85 pages
Support Programmation Web JavaScript 2024-2025
Pas encore d'évaluation
Support Programmation Web JavaScript 2024-2025
37 pages
Ch4 Javascript
Pas encore d'évaluation
Ch4 Javascript
194 pages
3 JS
Pas encore d'évaluation
3 JS
131 pages
0642 Apprendre Jquery PDF
Pas encore d'évaluation
0642 Apprendre Jquery PDF
97 pages
Javascript
Pas encore d'évaluation
Javascript
54 pages
Javascript
Pas encore d'évaluation
Javascript
51 pages
Programmation Web Javascript
Pas encore d'évaluation
Programmation Web Javascript
37 pages
Intro Web 5
Pas encore d'évaluation
Intro Web 5
70 pages
DevWeb2 Part1
Pas encore d'évaluation
DevWeb2 Part1
84 pages
Devweb JS&PHP
Pas encore d'évaluation
Devweb JS&PHP
111 pages
Java Script
Pas encore d'évaluation
Java Script
66 pages
Coursinformatique Id3286
Pas encore d'évaluation
Coursinformatique Id3286
29 pages
Cours Java Script
Pas encore d'évaluation
Cours Java Script
22 pages
Programmation Web - Javascript 2022-2023
Pas encore d'évaluation
Programmation Web - Javascript 2022-2023
74 pages
2 Rappel JS-p1
Pas encore d'évaluation
2 Rappel JS-p1
66 pages
Chapitre 3 Javascript
Pas encore d'évaluation
Chapitre 3 Javascript
67 pages
Support de Cours React JS
100% (3)
Support de Cours React JS
114 pages
DevWeb JS PHP Partie1
Pas encore d'évaluation
DevWeb JS PHP Partie1
46 pages
Cours 4 Javascript
Pas encore d'évaluation
Cours 4 Javascript
52 pages
Technologie Web JavaScript PDF
100% (1)
Technologie Web JavaScript PDF
64 pages
0209 Formation Programmation Javascript
Pas encore d'évaluation
0209 Formation Programmation Javascript
53 pages
Partie3 Javascript ANTARI 2021 2022
Pas encore d'évaluation
Partie3 Javascript ANTARI 2021 2022
51 pages
Javascript
Pas encore d'évaluation
Javascript
57 pages
TP Sin Création Page html5 Javascript (Cours)
Pas encore d'évaluation
TP Sin Création Page html5 Javascript (Cours)
22 pages
Javascript
Pas encore d'évaluation
Javascript
58 pages
Cours JS
Pas encore d'évaluation
Cours JS
26 pages
Javascript - New
Pas encore d'évaluation
Javascript - New
36 pages
Cours ExpressJs
100% (1)
Cours ExpressJs
13 pages
CH 4 Javascript
Pas encore d'évaluation
CH 4 Javascript
23 pages
Cours Javascript
Pas encore d'évaluation
Cours Javascript
61 pages
Lecon4 1 Dynamisation Des Pages Web Cote Client Javascript
Pas encore d'évaluation
Lecon4 1 Dynamisation Des Pages Web Cote Client Javascript
52 pages
JavaScript Complet
Pas encore d'évaluation
JavaScript Complet
19 pages
JavaScript L2
Pas encore d'évaluation
JavaScript L2
15 pages
Cours - Technologies WEB2.0 - Ch2 - JAVASCRIPT - Partie1
Pas encore d'évaluation
Cours - Technologies WEB2.0 - Ch2 - JAVASCRIPT - Partie1
32 pages
Chapitre2-Web Dynamique PDF
100% (1)
Chapitre2-Web Dynamique PDF
73 pages
Chapitre 3
Pas encore d'évaluation
Chapitre 3
70 pages
Cours2 Web
Pas encore d'évaluation
Cours2 Web
78 pages
UE 21 Et Plus PCD
Pas encore d'évaluation
UE 21 Et Plus PCD
26 pages
Programmationweb-Cours 01
Pas encore d'évaluation
Programmationweb-Cours 01
40 pages
Cours CSS Et Javascript - Licence 1 Maths-Info
Pas encore d'évaluation
Cours CSS Et Javascript - Licence 1 Maths-Info
86 pages
Javascript
Pas encore d'évaluation
Javascript
51 pages
Cours Programmation Web II Chapitre 1 JavaScript
Pas encore d'évaluation
Cours Programmation Web II Chapitre 1 JavaScript
88 pages
CoursJavaScript Id1796
Pas encore d'évaluation
CoursJavaScript Id1796
35 pages
Chapitre 4
Pas encore d'évaluation
Chapitre 4
73 pages
Catalogue Logiciels Et Tutoriels Professionnels
Pas encore d'évaluation
Catalogue Logiciels Et Tutoriels Professionnels
33 pages
Chapitre 4 - JavaScript
Pas encore d'évaluation
Chapitre 4 - JavaScript
18 pages
Graphe 1 17
Pas encore d'évaluation
Graphe 1 17
221 pages
PROGR ED TICE 2018-2019 Seconde Premiere TLE APC
Pas encore d'évaluation
PROGR ED TICE 2018-2019 Seconde Premiere TLE APC
65 pages
Formation Java Script
Pas encore d'évaluation
Formation Java Script
52 pages
PVC 15
Pas encore d'évaluation
PVC 15
246 pages
Les Technologies Du Web
Pas encore d'évaluation
Les Technologies Du Web
44 pages
Prototypes D'objets JavaScript
Pas encore d'évaluation
Prototypes D'objets JavaScript
6 pages
Dai
Pas encore d'évaluation
Dai
18 pages
Développement Web Front-End
Pas encore d'évaluation
Développement Web Front-End
88 pages
Polycopié Du Cours - TIC - Bases de Données Et Internet PDF
Pas encore d'évaluation
Polycopié Du Cours - TIC - Bases de Données Et Internet PDF
128 pages
Cours Du Module M31: Technologies Du Web: Chapitre 2: Langage HTML
Pas encore d'évaluation
Cours Du Module M31: Technologies Du Web: Chapitre 2: Langage HTML
78 pages
Exercice 1 1-Créer Une Page Acceuil - HTML Comportant Le Code HTML Suivant
Pas encore d'évaluation
Exercice 1 1-Créer Une Page Acceuil - HTML Comportant Le Code HTML Suivant
3 pages
TFC Eldjo
Pas encore d'évaluation
TFC Eldjo
29 pages
s1 XML
Pas encore d'évaluation
s1 XML
86 pages
Ensemble R
Pas encore d'évaluation
Ensemble R
9 pages
Conception Et Realisation D'un - Widad CHOUEF - 3993
Pas encore d'évaluation
Conception Et Realisation D'un - Widad CHOUEF - 3993
48 pages
Sujet 2205
Pas encore d'évaluation
Sujet 2205
14 pages
LIB Prodige Guide de Developpement
Pas encore d'évaluation
LIB Prodige Guide de Developpement
42 pages
Routing Avec Angular
Pas encore d'évaluation
Routing Avec Angular
17 pages
Présentation Du Projet de Fin de Formation: L'Application Web Mercetest
Pas encore d'évaluation
Présentation Du Projet de Fin de Formation: L'Application Web Mercetest
33 pages
Rapport Finale
Pas encore d'évaluation
Rapport Finale
51 pages
Chapitre 1 - Introduction Générale
Pas encore d'évaluation
Chapitre 1 - Introduction Générale
16 pages
Chapitre 2 JEE Servlet PDF
Pas encore d'évaluation
Chapitre 2 JEE Servlet PDF
10 pages
Chapitre 6 Eléments de Présentation
Pas encore d'évaluation
Chapitre 6 Eléments de Présentation
15 pages
Couverture Soutenance
Pas encore d'évaluation
Couverture Soutenance
1 page
Sujet Total Archi 17
Pas encore d'évaluation
Sujet Total Archi 17
5 pages
Styles & Thèmes
Pas encore d'évaluation
Styles & Thèmes
9 pages
Développement D
Pas encore d'évaluation
Développement D
10 pages
Integrer Le Paiement Paypal Sur Son Site Web Avec La SDK Javascript Paypal 01102020
Pas encore d'évaluation
Integrer Le Paiement Paypal Sur Son Site Web Avec La SDK Javascript Paypal 01102020
10 pages
SCHOOL - FILE-Projections 2024 - 2025 À Date Du 16 Février 2024
Pas encore d'évaluation
SCHOOL - FILE-Projections 2024 - 2025 À Date Du 16 Février 2024
3 pages
Expose Balise
Pas encore d'évaluation
Expose Balise
5 pages
LD m1 Isd Pong01 Answers
Pas encore d'évaluation
LD m1 Isd Pong01 Answers
3 pages
TP1 HTML5
Pas encore d'évaluation
TP1 HTML5
4 pages
Webdesigner
Pas encore d'évaluation
Webdesigner
3 pages
Raccourcis Corel
Pas encore d'évaluation
Raccourcis Corel
5 pages
Shell Bash, De Débutant à Expert : Le guide pratique d'un SRE pour la maîtrise du terminal, le scripting et l'automatisation
D'Everand
Shell Bash, De Débutant à Expert : Le guide pratique d'un SRE pour la maîtrise du terminal, le scripting et l'automatisation
Nolan Reeves
Pas encore d'évaluation
Apprenez à programmer par vous-même
D'Everand
Apprenez à programmer par vous-même
Zach Zinfadel
Pas encore d'évaluation
Awk Le Guide Pratique Sous Linux
D'Everand
Awk Le Guide Pratique Sous Linux
Awkerman Anna
Pas encore d'évaluation
Getting started with Javascript: Professional Training
D'Everand
Getting started with Javascript: Professional Training
Remy Lentzner
Pas encore d'évaluation
LES MACROS AVEC GOOGLE SHEETS: Programmer en Javascript
D'Everand
LES MACROS AVEC GOOGLE SHEETS: Programmer en Javascript
Rémy Lentzner
Pas encore d'évaluation
Programmer en JavaScript
D'Everand
Programmer en JavaScript
Preston Prescott
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

Leçon Javascript

Transféré par

Leçon Javascript

Transféré par

ENI RV.

eventHandler représente le nom de l'événement.

A quel emplacement insérer le Javascript dans

• Grâce à la balise <SCRIPT> • Pour mettre en commentaires tout une ligne

2 - LA DECLARATION DES VARIABLES, DES

Les méthodes de l'objet String

Les méthodes de l'objet string permettent de récupérer

Chaine = 'Comment ça marche?'

Chaine = 'Comment ça marche?'

La méthode est similaire à indexOf(), à la

Chaine = 'Comment ça marche?'

donne 'comment ça marche?'

Chaine = 'Comment ça Marche?'

Modifie la couleur du texte (admet comme var dmc="alias";

Correspond à la balise HTML <SMALL>.

Transforme le texte en texte barré (balise

4. DECLARATION ET UTILISATION DES var un_tableau=new Array(10)

5. QU'EST-CE QU'UNE BOITE DE DIALOGUE?

Une boîte de dialogue est une fenêtre qui s'affiche au

• Soit d'avertir l'utilisateur

La méthode alert() permet d'afficher dans une boîte • le texte d'invite

Cette boîte d'invite retourne la valeur de la chaîne

Exemple de prompt La méthode javascript showModalDialog(url,

function ma_fonction(param1, param2) var mavoiture = {fabricant: "Honda", modèle: "Accord",

Le corps des fonctions et instructions est délimité par

function map(f, a) { (function nomFonction(){}).

var i; console.log(carre); // La fonction vaut undefined

for (i = 0; i < a.length; i++) console.log(carre(5)); // TypeError: carré is not a

var cube = function(x) {return x *x*x};//Une expression

- Grouper des instructions - Les structures de boucles

- Le test conditionnel Initialisation permet d'initialiser la valeur du compteur.

Les propriétés de l'objet window

propriété description lecture seule Exemples

lastModified savoir quand la page HTML a été document.lastModified;

récupérer et de modifier la couleur des document.linkColor = "#993333

vlinkColor récupérer et de modifier la couleur document.vlinkColor = "#993333";

title récupérer et modifier le titre de votre document.title = "mon titre";

• les propriété top et parent permettent de

LES AUTRES METHODES DE L’OBJET WINDOW

Méthodes Description Exemple

window.focus(). Nous allons créer un bouton pour mettre la fenêtre en premier

window.setInterval(String code, Integer delai) <SCRIPT language=javascript>

<body bgcolor="#FFFFFF" text="#000000">

: window.print() Imprimer la page<A

redimensionner la fenêtre. Nous allons créer un bouton pour redimensionner la fenêtre.

window.resizeTo(x,y). Nous allons créer un bouton pour redimensionner la fenêtre.

• la méthode back permet d'aller à l'URL

Les particularités de l'objet navigator

Les propriétés de l'objet navigator

Propriété Description Pour votre navigateur

Navigateur Version navigator.appName navigator.appVersion Javascript

if (Nom == 'Microsoft Internet Explorer') {

Voici le script permettant de vérifier que les versions sont supérieures à 4:

La propriété geolocation de l’objet Navigator

13. L'OBJET IMAGE

La propriété javascript La propriété javascript

<img src="image.gif" width="140" height="76" alert(document.images.identifiant.border);

alert(document.images.identifiant.src); La propriété javascript

La propriété javascript <img src="image.gif" width="140" alt="coucou"

Pour changer une image, il faut d'abord la déclarer.

Les attributs dans Javascript 1.0

onFocus l’utilisateur clique sur une zone de formulaire

onSubmit : l’utilisateur soumet un formulaire (clique sur bouton submit)

En Javascript 1.2, les attributs suivants ont été rajoutés :

Est utilisé sur l'objet javascript link, document, form

onKeyDown, onKeyPress, Quand j'appuie sur une touche.

onAbort, L'utilisateur a stoppé le chargement de l'image.

Lorsqu'il se produit une erreur de script.

onReset Quand je réinitialise.

onMove, Quand je déplace la fenêtre.

onDragDrop, onResize : pour la fenêtre du browser (tag Body ou Frameset) ;

et la gestion des événements est plus souple et programmable...

Associer un evenement à un element Exemple 2.1.

Par exemple : l’utilisateur clique sur une zone hypertexte. <BR>

Exemple 2.4. Ouvre une fenetre

Dans cet exemple, nous allons modifier

var cube = function(x) {return x xx};//Une expression