JavaScript Novembre 2009 - New

Formation Javascript
Prof:
Barkallah haitham
Le langage JavaScript
I.
Introduction
Activit 1 :
Crer un dossier de travail nomm TpjavaScript dans D:\formation\ .
Crez une page html nomme Maximum.html qui permet de calculer le maximum de
deux entiers a et b.
Constatation :
Activit2 :
Citer quatre limites du langage HTML
1.
2.
3.
4.
....
Activit3 :
Proposer deux solutions pour remdier ses limites.
1re Solution :
2me Solution :
Activit 2 (page 79):
Remarque:
JavaScript est un langage de .ct permettant damliorer
linteractivit des pages web, en utilisant des structures de contrle et des vnements.
JavaScript est un langage de scripts incorpor dans les ....
JavaScript est un langage.. en temps rel par le .Web.
II.
Les emplacements du code JavaScript
Complter les balises du langage JavaScript :

<HTML><HEAD><TITLE>..</TITLE>
<..>
..
<>
</HEAD><BODY>
<..>
..
<>
</BODY></HTML>
Page : 1
1:
2:
Prof:
Barkallah haitham
Activit4 :
Crer un fichier HTML contenant le code JavaScript permettant laffichage dune fentre de message
portant votre nom, prnom et votre adresse. Sauvegarder ce fichier sous le nom Act4.html
III.
Les objets JavaScript
Activit5 :
Crer un fichier HTML nomm Act5.html et saisir le code suivant :
<HTML><HEAD><TITLE>Saisir votre Nom</TITLE>
<SCRIPT LANGUAGE="javascript">
function teste(){
x=window.document.form1.nom.value;
if(x = ="")
alert("champ texte vide");
else
alert("Saisie correcte");
} </SCRIPT>
</HEAD>
<BODY>
window.document.write(" <p align='center'><h1>Contler une zone de texte</h1></p>");
</SCRIPT>
<FORM method="POST" name="form1" >
<p>Saisir votre Nom: <input type="text" name="nom" size="20"></p>
<p><input type="button" value="Tester" name="test" onclick="teste()"></p>
</FORM></BODY></HTML>
La Hirarchie des objets dinterface en JavaScript

Objet
Objet Fentre (.)
Objet
Objet
Objet
Objet
Les mthodes (fonctions) des objets : des fonctions prdfinies par le langage JavaScript
sur les objets.
Exemples :
EX1 : La mthode write() : cest une mthode applicable sur lobjet document
Syntaxe : Window.Document .write("BienVenue") ;
EX2 : La mthode alert() : cest une mthode applicable sur lobjet window
Syntaxe : Window.alert("BienVenue") ;
Page : 2
Prof:
Barkallah haitham
Les proprits des objets : permettant de dcrire les caractristiques des objets.
Exemple : pour accder au contenu dune zone de texte il faut utiliser la proprit value
Syntaxe : x=Window.Document.form1.nom.value ;
IV.
Les entres/Sorties en JavaScript
A) Laffichage (sortie) en JavaScript :

Activit6:
Crer un fichier HTML nomm Act6.html contenant le code JavaScript permettant laffichage dune
fentre de message contenant le texte suivant : Bonne anne 2010 , sachant que 2010 est stock dans
une variable Y.
Constatation :
La mthode alert() :
Cest une mthode de lobjet window permet laffichage dans une fentre de message (boite de
dialogue). Il est possible dutiliser la mthode alert() de diffrents faons :
EX1 : window.alert("Bonne anne") ;
EX2 : chaine="Bonne anne" ;

alert(chaine) ;

alert(chaine+"2010") ;
Activit7:
Crer un fichier HTML nomm Act7.html contenant le code JavaScript permettant la cration de la
page dcrite ci-dessous :
****Affichage dun message texte***
Color en Rouge
2010
Color en Jaune
Le contenu de la variable x est : 2010
Color en bleu
Le contenu de la variable x est : 2010
Color en vert
Constatation :
La mthode write() :
Cest une mthode de lobjet document permet de modifier de faon dynamique le contenu dune page
web. Il est possible dutiliser la mthode write() de diffrents faons :
EX1 : Document.write("Bonne anne") ;

Document.write(chaine) ;

Document.write(chaine+"2010") ;
Page : 3
Prof:
Barkallah haitham
EX4 : CH= "2010" ;

Document.write("<font color=red><b><u>Bonne anne</u></b></font>"+CH ) ;
EX5 : CH1= "Bonne anne" ;
CH2= "2010" ;
Document.write(CH1+CH2) ;
B) La lecture (entre) en JavaScript :

Activit 6.
Constatation :
La mthode prompt () :
Cest une mthode de lobjet window permet la saisie dans une boite de dialogue et retourne une
valeur de type chane de caractres. Il est possible dutiliser la mthode prompt() de diffrents faons :
EX1 :A=window.prompt("Saisir votre anne de naissance") ;
EX2 :A=prompt("Saisir votre anne de naissance"," ") ;
EX3 :A=prompt("Saisir votre anne de naissance","19 ") ;
Conversion de types :
La fonction isNaN() : is Not a Number : est une fonction boolenne permettant
de vrifier si le contenu dune variable est numrique ou non :
isNaN(A) : retourne True si le contenu de A nest pas numrique.
isNaN(A) : retourne False si le contenu de A est numrique.
Ex : A= prompt("Donner votre numro dordre dans la classe"," ") ;
If(isNaN(A)){
alert(" Conversion impossible ");}
else{
B=Number(A);
B=B+1;}
La fonction Number() : permet de convertir une chane en entier sil est

possible.
Ex1 : A= prompt("Saisir votre anne de naissance","19 ") ;
A=A+1 ;
alert(A) ;
Rsultat=.
Ex2: A= Number(prompt("Saisir votre anne de naissance","19 ")) ;
A=A+1 ;
alert(A) ;
Rsultat=.
La fonction String() : permet de convertir un entier en chane de caractres.
Ex : A=200 ;
Page : 4
Prof:
Barkallah haitham
B=String(A) ;
B=B+1 ;
Alert(B) ;
Rsultat=.
Activit8:
Crer un fichier HTML nomm Act8.html contenant le code JavaScript permettant la lecture deux
entiers a et b par lutilisateur, de calculer leur somme et afficher le rsultat dans une fentre de message.
V.
Les variables et les types

A) Les variables :
Activit 5.
La dclaration des variables
Les variables peuvent se dclarer de deux faons :
1re mthode(Explicite) : JavaScript utilise le mot cl var devant la variable dclarer.
Ex : var n=22 ;
var chaine=" Bonjour" ;
var b=2>5 ;
2me mthode(Implicite) : On crit directement le nom de la variable suivie du
caractre = et de la valeur affecter.
Ex : n=22 ;
chaine=" Bonjour" ;
b=2>5 ;
La porte (visibilit) des variables
Ex1 :
Ex2 :
var a=12;
var b=4;
function MultiplePar2(b){
var a=b*2;
return a;}
document.write(" Le double de",b,
"est",MultiplePar2(b)) ;
document.write(" La valeur de a est",a) ;
</SCRIPT >
var a=12;
var b=4;
function MultiplePar2(b){
a=b*2;
return a;}
document.write(" Le double de",b,
"est",MultiplePar2(b)) ;
document.write(" La valeur de a est",a) ;
</SCRIPT >
Rsultat :
Rsultat :
.
.
.
.
Constatations :
o Lorsque une variable dclare sans le mot cl var (.) elle est
accessible partout dans le script (nimporte quelle fonction du script peut faire appel
cette variable).On parle alors de variable
o La porte dune variable dclare de faon explicit (.),
dpond de lendroit ou elle est dclare :
Une variable dclare au dbut de script, avant toute fonction, sera
Page : 5
Prof:
Barkallah haitham
Une variable dclare dans une fonction aura une porte limite cette fonction,
on parle alors dune variable
Activit9:
Crer un fichier HTML nomm Act9.html contenant le code JavaScript permettant la lecture dun
entier en affichant le message Saisir votre valeur (valeur par dfaut est indfinie) puis dincrmenter
la valeur saisie par 2 et afficher le rsultat dans une boite de dialogue.
Si on saisit une chane de caractres on affichera le texte suivant : Conversion impossible .
B) Les types :
En JavaScript il nest pas ncessaire de dclarer le type des variables, contrairement aux autres
langages tels que Pascal, C, Java,...
En fait, JavaScript utilise 4 types de donnes :
o Des nombres : entiers ou avec virgules.
o Des chanes de caractres (String)
o Des boolens : prend la valeur True pour vrai et false pour faux.
o Le type null :mot qui indique que la variable est vide.
VI.
Les oprateurs prdfinis
Voir livre page 87 et 88
VII.
Les structures de contrle conditionnelles
Activit10:
Crer un fichier HTML nomm Act10.html contenant le code JavaScript permettant de
dterminer le maximum entre deux entiers.
Le rsultat sous forme dune fentre de message.
Activit11:
Crer un fichier HTML nomm Act11.html contenant le code JavaScript permettant de
dterminer le maximum entre trois entiers.
Le rsultat sous forme dune fentre de message.
Constatations :
La forme simple rduite :
If(condition)
{ traitement ;}
La forme simple complte :
If(condition)
{ traitement1 ;}
else
{ traitement2 ;}
La forme simple gnralise :
If(condition)
{ traitement1 ;}
else
else
{ traitement n ;}
Activit12:
Soit le code JavaScript suivant :
var m=prompt("Entrez le numro de mois : "," ");
var a= prompt("Entrez la valeur de lanne: ","20 ");
switch(a){
case"1" : case"2" : case"3" : case"4" : case"5" : case"6" : case"7" :j:=31; break;
case"1" : case"2" : case"3" : case"4" :j==30;
case"2" : if(m MOD 4= 0)
j=29; else j=28; }
Page
:6
alert(" Le nombre des jours du mois
N",m+"est="+j)
;
</SCRIPT >
Prof:
Barkallah haitham
Travail faire :
1. Saisir le code JavaScript ci-dessus et enregistrer le fichier sous le nom Act12.html .
2. Corriger les erreurs qui figurent dans ce code.
Constatation :
Switch(..){
Case .. : traitement1 ; break ;
Case ...: traitement2 ; break ;
.
.
Case .. : traitementn ; break ;
default autre traitement ; break ;}
VIII.
Les structures de contrle itratives
A) La boucle pour :
Activit13:
Crer un fichier HTML nomm Act13.html contenant le code JavaScript permettant dafficher
tous les nombres parfaits compris entre 5 et 1000 ; sachant quun nombre N est dit parfait sil est
gal la somme de ses diviseurs sauf lui-mme.
Exemple : Pour N=6 la somme ses diviseurs (sauf 6) est 1+2+3=6, donc 6 est un nombre parafait.
Constatation :
for ( Valeur initiale ; Condition ; progression)

{ Traitement rpter }
Valeur initiale :..
Condition :.
Progression :..
Exemple :
Afficher le message Bonjour 5 fois :
for ( i=1 ; i<=5 ; i++)

document.write(i+"Bonjour.<br>");
B) La boucle rpter :
Activit14:
Crer un fichier HTML nomm Act14.html contenant le code JavaScript permettant la lecture de
deux entiers positifs N1 et N2 avec (N2>N1), puis dafficher tous les nombres compris entre N1 et
N2.
Constatation :
do
{
Traitement rpter
}while( condition(s)) ;
La condition utilise aprs while est une condition de continuit.
Page : 7
Prof:
Barkallah haitham
Exemple :
Lire deux entiers a et b tels que a>1 et b>1 :
do
{ a = prompt("Donner le premier entier : "," ");
b = prompt("Donner le deuxime entier :" ," ");

x = Number(a) ;
y = Number(b) ;
} while( x<=1 || y<=1) ;
C) La boucle tantque :
Activit15:
Crer un fichier HTML nomm Act15.html contenant le code JavaScript permettant de calculer
le PGCD de deux entiers a et b, tels que a>1 et b >2, en utilisant la mthode des diffrences.
Constatation :
while( condition(s))
{ Traitement rpter ;}
Exemple :
Lire deux entiers a et b tels que a>1 et b>1 :
while( a !=b)
{ if (a>b)
a - = b;
Else b - = a; }
IX.
Les fonctions en JavaScript
Activit16:
Crer un fichier HTML nomm Act16.html cotenant un code JavaScript permettant dafficher le
maximum entre deux entiers tout en utilisant une fonction.
Constatation :
<HEAD>
..
Function nom_fonction (paramtre(s))
{ Traitement(s) ;
[Return nom_variable ;] }
..
</HEAD>
Activit17:
Crer un fichier HTML nomm Act17.html contenant un code JavaScript permettant dafficher
le mot Bonjour.
NB : Dclarer une fonction affiche non paramtre.
Constatation:
..
Exemple :
Ecrire une fonction permettant deffectuer la somme de deux entier a et b donnes en paramtre.
Function Somme (a,b)
{ var som=a+b;
Return som; }
Page : 8
Prof:
Barkallah haitham
X.
Les vnements en JavaScript
Activit18:
Crer un fichier HTML nomm Act18.html contenant un code JavaScript permettant louverture
dune bote de dialogue contenant votre nom et prnom lors dun click en utilisant lvnement
OnClick().
Constatation:
JavaScript offre la possibilit dutiliser plusieurs vnements, contrairement au HTML qui se
contente de lunique vnement Clic.
Syntaxe : <nom_balise OnEvnement= fonction()>
A) OnClick :
Activit19:
Crer un fichier HTML nomm Act19.html contenant un code JavaScript permettant de calculer
le cube dun entier saisi dans une zone texte en cliquant sur un bouton ou un lien hypertexte.
Constatation:
Lvnement OnClick peut tre utilis avec .
Exemple :
Modifier la solution ralise dans lexemple prcdent en utilisant lvnement OnClick.
Appel de la fonction : <input type= button value= Afficher la somme
OnClick= Somme()>
Ou bien : <A Href=# OnClick=Somme()>Afficher la somme</A>
Dclaration de la fonction :
Function somme()
{Var s= document.formulaire.a.value + document.formulaire.b.value;
Alert(La somme est gale :+s) ;
}
B) OnFocus :
Activit20:
Crer un fichier HTML nomm Act20.html contenant un code JavaScript permettant de lire une
chaine saisie dans une zone texte puis de la transformer en majuscule dans une autre zone de texte.
Lvnement sera dclench lorsque le curseur est mis dans la nouvelle zone.
Constatation:
Lvnement OnFocus survient lorsquun champ texte est prt recevoir ce que lutilisateur a
lintention de taper au clavier. (c-a-d quand la zone a le focus (curseur))
Exemple :
Modifier la solution ralise dans lexemple prcdent en utilisant lvnement OnFocus.
Tout dabord il faut ajouter une troisime zone de texte :
Appel de la fonction : <input type= text name=s OnFocus= Somme()>
Function somme()
{Var s= document.formulaire.a.value + document.formulaire.b.value;
Page : 9
Prof:
Barkallah haitham
document.formulaire.s.value = s ;}
C)OnChange :
Activit21:
Crer un fichier HTML nomm Act21.html contenant un code JavaScript permettant de
slectionner le nom dun pays partir dune liste droulante puis de lafficher dans une zone de
texte.
Constatation:
Lvnement OnChange survient lorsquun champ de formulaire perd le focus.
Exemple :
Ecrire un script qui permet de lire une chaine saisie dans une zone texte. Lorsque le curseur quitte
cette zone, la chaine sera remplace par sa taille.
Appel de la fonction : <input type= text name=ch OnChange= taille()>
function taille()
{var v=document.f.ch.value;
document.f.ch.value=v.length; }
D) OnSubmit :
Activit22:
Crer un fichier HTML nomm Act22.html contenant un code JavaScript permettant de
contrler la saisie de deux champs texte Nom et Age lors de lenvoie du formulaire.
Utiliser une fonction Verif() qui permet de vrifier les conditions suivantes:
- Les champs ne doivent pas tre vides.
- Lge doit tre numrique et suprieur ou gal 18.
Constatation:
Lvnement OnSubmit survient lorsque lutilisateur clic sur le bouton envoyer.
Solution :
<HTML><HEAD>
<SCRIPT language=javascript>
function verif(){
if(document.f.nom.value=="" || document.f.age.value==""){
alert("les champs sont vides");
return false;}
if(isNaN(document.f.age.value)){
alert("l'age doit tre numrique");
return false;}
if(document.f.age.value<18){
alert("l'age doit tre > 18");
return false;}}
</SCRIPT></HEAD><BODY>
<FORM method="POST" name="f" action="ch.html" onsubmit="verif()">
<p>Saisir votre nom<input type="text" name="nom" size="20"></p>
<p>Saisir votre ge <input type="text" name="age" size="20"></p>
<p><input type="submit" value="Envoyer" name="B1">
<input type="reset" value="Rtablir" name="B2"></p>
</FORM> </BODY></HTML>
Page : 10
Prof:
Barkallah haitham
XI.
Les objets prdfinis en JavaScript
A) Lobjet String (chane de caractres):

Activit23:
Crer un fichier HTML nomm Act23.html contenant deux zones de texte :
La premire pour la saisie dune chaine ch de n caractres (avec 3n8).
La deuxime pour la saisie dun caractre c quelconque.
Ajouter une fonction en JavaScript permettant dafficher la taille, le nombre doccurrences de c
dans ch et la position de la premire occurrence de c dans ch.
Activit24:
Crer un fichier HTML nomm Act24.html contenant un code JavaScript permettant de saisir
une chane de caractres ch dans une zone texte puis de lire un entier n compris entre 2 et 10 dans
une boite de dialogue et dextraire partir de ch une sous chane de n caractres commenant de la
position 1.
Le rsultat sera affich comme suit : La nouvelle chane est :..
Constatation :
Equivalent
Exemple pour
Proprit & Mthodes
Rle
en Pascal
Ch= Merci
T=Ch.length
;
Ch.Length ;
Length(ch) ; Permet de retourner la longueur dune
T=5
chane ou 0 si elle est vide
P1=Ch.indexOf(e);
Ch2.indexOf(ch1,[P]) ; Pos(ch1,ch2) Permet de rechercher la premire position de
Ch.Substr(p,n) ;
Copy(ch,p,n)
Ch.charAt(x) ;
Ch[x]
ch1 dans ch2 si elle existe et -1 dans le cas

contraire.
P permet de dterminer la position du caractre
partir duquel la recherche est effectue.
Permet dextraire de la chane Ch une sous
chaine de n caractres partir de la position p.
Permet de retourner le caractre dont la position
gale x sachant que 0xCh.length-1
ou
P1=Ch.indexOf(e,0);
P2=Ch.indexOf(a);
P1=1 P2= -1
Ch1=ch.Substr(1,3) ;
Ch1=erc
C1=Ch.charAt(3) ;
C2=Ch.charAt(7) ;
C1=c C2=
B) Lobjet Math
Activit25:
Ecrire un code JavaScript permettant de calculer lhypotnuse dun triangle de cts A et B
(SQRT=racine carr).Puis dafficher le rsultat dans une nouvelle zone de texte.
Nb : utiliser une fonction Calcul_hypotenuse() pour ce calcul.
Mthodes
Math.abs(x)
Rle
Permet de retourner la valeur absolue de x
Math.sqrt(x)
Permet de renvoyer la racine carre de x
Math.round(x)
Permet darrondit x lentier le plus proche
Math.random()
Permet de retourner un nombre alatoire entre 0

et 1. (Seule la proprit random() ne demande
Page : 11
Exemple
X= -2 ;
Y=Math.abs(X) ;
Y=2
X= 4 ;
Y=Math.sqrt(X) ;
Y=2
X= 4,45 ;
Y=Math.round(X) ;
Y=4
Y=Math.random () ;
Y= valeur_alatoire
Prof:
Barkallah haitham
Math.eval(x)
pas d'argument)
Pour avoir un nombre alatoire entre 0 et 5 par
exemple il faut crire :
Permet dvaluer une chaine de caractre sous
forme de valeur numrique.
Y=Math.random ()*5 ;
X=2+6*2;
Y=Math.eval(X) ;
Y=14
C) Lobjet Image :
Activit26:
Crer un fichier HTML nomm Act26.html contenant un code JavaScript permettant de crer une
page web contenant une image :
Suite un clic sur le bouton suivant , limage sera remplace par une autre.
Et suite un clic sur le bouton prcdent , on revient limage initiale.
Constatation :
Soit limage suivante: <img src="image1.jpg" width="140" height="76" name="identifiant">
Pour modifier cette image par une autre, on utilise la syntaxe suivante:
document.images["identifiant"].src = "image2.jpg" ;
XII.
Les formulaires en JavaScript

1- Le contrle zone de texte :
Activit27:
Crer un fichier HTML nomm Act27.html contenant un code JavaScript permettant de lire le prix
unitaire et la quantit en stock dun produit, dans zone de texte, et suite un clic sur un bouton le
programme va afficher le montant total dans une autre zone.
Constatation :
Pour affecter le contenu dune zone de saisie une variable, on utilise la syntaxe suivante :
Nomvariable = document.nomformulaire.nomzonedesaisie.value ;
Pour modifier la valeur dune zone de texte, on utilise la syntaxe suivante :
document.nomformulaire.nomzonedesaisie.value = Expression ;
2- Les boutons radio:

Activit28:
srie de 3 boutons radio pour slectionner ltat civil dun utilisateur, qui est par dfinition ne peut tre
qu'une seule chose (Pour notre exemple : Mari(e), Clibataire ou Divorc(e)). Il s'agit de dterminer si
une case doption est coche ou pas (checked). Si elle est coch on va afficher sa valeur (value).
C'est quand on clique sur le bouton "OK" que la fonction Truc() est appele.
NB : Les cases doptions sont numrotes partir de 0.
Constatation :
Pour vrifier ltat dune case doption, on utilise la syntaxe suivante :
Nomvariable = document.nomformulaire.nomcase[indice].checked ; (il sagit
boolenne).
Pour rcuprer la valeur dun bouton radio, on utilise la syntaxe suivante :
Page : 12
dune
variable
Prof:
Barkallah haitham
Nomvariable = document.nomformulaire.nomcase[indice].value ;
Pour rcuprer le nombre doption dans un groupe de cases doption, on utilise la syntaxe
suivante :
Nomvariable = document.nomformulaire.nomcase.length ;
3- Les cases cocher (checkbox):

Activit29:
srie de 4 cases cocher pour slectionner les nombres paires parmi cinq (2, 7, 34, 55 et 90). Il s'agit de
dterminer si le rsultat est valide. Lorsquon clique sur le lien hypertexte "Test" que la fonction test()
est appele.
Constatation :
Pour vrifier ltat dune case cocher, on utilise la syntaxe suivante :
Nomvariable = document.nomformulaire.nomcase.checked ;
Pour rcuprer la valeur dune case cocher, on utilise la syntaxe suivante :
Nomvariable = document.nomformulaire.nomcase.value ;
Application:
Crer un fichier HTML nomm App29.html contenant un code JavaScript permettant de crer une
srie de 3 cases cocher pour slectionner loption dun lve en 4me SI (musique, thatre ou dessin). Il
s'agit de dterminer si une case est coche ou pas (checked), ainsi que la valeur de cette case (value).
Lorsquon clique sur le lien hypertexte "Mes options" que la fonction Aff() est appele.
4- Les listes de slection (liste de menu droulant):

Activit30:
liste de menu droulant contenant quatre pays (Tunisie, Algrie, France et Canada), une zone de texte
pour la saisie dun nouveau pays et dinsrer trois boutons (Ajouter, supprimer et rechercher).
Le clic sur le bouton ajouter fait appel une fonction ajout() qui permet dajouter une
nouvelle pays cette liste.
Le clic sur le bouton supprimer fait appel une fonction sup() qui permet de supprimer un
lment de cette liste.
Le clic sur le bouton rechercher fait appel une fonction rech() qui permet dafficher dans
une boite de message le pays slectionn.
Constatation :
Pour trouver le nombre dlments dans une liste droulante, on utilise la syntaxe suivante:
document.nomformulaire.nomliste.options.length;
Pour retourner lindice dun lment slectionn, on utilise la syntaxe suivante:
document.nomformulaire.nomliste.options.selectedIndex;
NB : Lindice dune liste droulante commence partir de 0.
Pour retourner le texte dun lment dune liste, on utilise la syntaxe suivante :
document.nomformulaire.nomliste.options[indice].text ;
Pour retourner la valeur dun lment dune liste, on utilise la syntaxe suivante :
document.nomformulaire.nomliste.options[indice].value;
Page : 13
Prof:
Barkallah haitham
Pour vrifier si une option est slectionn (renvoie true) ou non (renvoie false), on utilise la
syntaxe suivante :
document.nomformulaire.nomliste.options[indice].selected;
Pour ajouter une nouvelle option une liste droulante, on utilise la syntaxe suivante :
Nomvariable=new option(texte, valeur) ;
document.nomformulaire.nomliste.options[Taille_liste]=nomvariable;
La suppression dune liste se fait travers la syntaxe:
document.nomformulaire.nomliste.options[indice]=null;
Activit 31 :
Modifier lactivit prcdente de telle faon dcrire le code javascript dans un fichier externe.
Remarque :
La dclaration de foctions javascript peut se faire :
Entre <HEAD> et </HEAD>
Entre <BODY> et </BODY>
Dans un fichier texte externe, avec lextension .js, inclure par la suite dans les fichier HTML.
Dans ce cas, il faut ajouter la partie entte du document HTML la commande suivante :
<SCRIPT LANGUAGE=javaScript SRC=FichierTexte.JS></SCRIPT>
XIII.
Outil propos pour la formation
LOutil SotinkDHTMLMenu est un logiciel trs

puissant permettant de crer des Menu en Javascript
pour les pages Web en des simples cliques partir de
Templates (modles) prdfinis. Cet Outil offre la
possibilit dajouter des effets super splendides aux
menus crs.
http://www.dhtml-menu-builder.com
XIV.
XIV. Codes Utiles
Comment afficher la date ou l'heure en temps rel ?
L'objet Date() contient 4 fonctions qui permettent d'afficher l'heure et le jour selon les cas. Les 4
fonctions qui affichent l'heure sont :
toString() : date en anglais, heure (hh:mm:ss) et fuseau horaire ;
toTimeString() : heure (hh:mm:ss) au format 24h si navigateur en franais et fuseau horaire ;
Page : 14
Prof:
Barkallah haitham
toLocaleString() : date dans la langue du systme, heure (hh:mm:ss) au format 24h si navigateur
en franais ;
toLocaleTimeString() : heure (hh:mm:ss) au format 24h si navigateur en franais.
Exemple : afficher l'heure du systme et la mettre jour toutes les secondes.
function horloge()
{
var tt = new Date().toLocaleTimeString(); // hh:mm:ss
document.getElementById("timer").innerHTML = tt;
setTimeout(horloge, 1000); // mise jour du contenu "timer" toutes les
secondes
}
Et voici la zone d'affichage :

<div id="timer"></div>
La fonction est appele, par exemple, de la manire suivante :

<body onload="horloge();">
Comment comparer deux dates ?
Voici une technique permettant de comparer deux dates :

// Mise en place de la premire date
var d1 = new Date(2006,11,27);
// Mise en place de la seconde date
var d2 = new Date(2006, 0, 18);
if (d1 > d2)
{
alert("d1
}
else if (d1 <
{
alert("d1
}
else
{
alert("d1
}
est aprs d2");

d2)
est avant d2");
et d2 sont la mme date");
Nous pouvons pousser un peu plus la prcision de la comparaison en ajoutant l'heure de la date :
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);
Comment vrifier si un champ qui contient la date et l'heure au format (aaaa-mm-jj

hh:mm:ss) est bien rempli ?
// date au format dd-mm-yyyy hh:mm:ss (fr)
// date au format yyyy-mm-dd hh:mm:ss (en)
function isGoodDate(mydate, format)
{
var thedate, day, month, year;
var onedate;
var thetime, hours, minutes, seconds;
var onetime;
var mysplit=mydate.split(' ');
if (mysplit.length != 2)
{
return false;
}
Page : 15
Prof:
Barkallah haitham
thedate=mysplit[0].split('-');
if (format=="en")
{
year = parseInt(thedate[0],10);
month = parseInt(thedate[1],10);
day = parseInt(thedate[2],10);
if ((mysplit[0].length != 10) || (thedate.length != 3) ||
(isNaN(year)) || (isNaN(month)) || (isNaN(day)) ||
(thedate[0].length < 4) || (thedate[1].length < 2) ||
(thedate[2].length < 2))
{
return false;
}
}
else if (format=="fr")
{
day = parseInt(thedate[0],10);
month = parseInt(thedate[1],10);
year = parseInt(thedate[2],10);
if ((mysplit[0].length != 10) || (thedate.length != 3) ||
(isNaN(year)) || (isNaN(month)) || (isNaN(day)) ||
(thedate[0].length < 2) || (thedate[1].length < 2) ||
(thedate[2].length < 4))
{
return false;
}
}
else
{
return false;
}
onedate = new Date(year, month-1, day);
year = onedate.getFullYear();
if ((onedate.getDate() != day) ||
(onedate.getMonth() != month-1) ||
(onedate.getFullYear() != year ))
{
return false;
}
thetime
hours =
minutes
seconds
= mysplit[1].split(':');
parseInt(thetime[0],10);
= parseInt(thetime[1],10);
= parseInt(thetime[2],10);
if ((mysplit[1].length != 8) || (thetime.length != 3)||

(isNaN(hours)) || (isNaN(minutes)) || (isNaN(seconds)) ||
(thetime[0].length < 2) || (thetime[1].length < 2) ||
(thetime[2].length < 2))
{
return false;
}
onetime = new Date(year, month-1, day, hours, minutes, seconds);
Page : 16
Prof:
Barkallah haitham
if ((onetime.getHours() != hours) || (onetime.getMinutes() != minutes) ||

(onetime.getSeconds() != seconds))
{
return false;
}
return true;
}
La fonction prend un paramtre supplmentaire qui s'appelle format. Sa valeur est soit "fr" soit "en".
isGoodDate("18-11-2012 11:36:00","fr"); retournera true. isGoodDate("18-11-2012
11:36:00","en"); retournera false.
isGoodDate("2012-11-18 11:36:00", "fr"); retournera false. isGoodDate("2012-11-18
11:36:00", "en"); retournera true.
Dans le cas o le second paramtre n'est ni "fr" ni "en" la fonction retournera false. Tout ceci sous
rserve que la chane passe contienne effectivement une date et une heure valides.
Comment calculer le nombre de jours entre deux dates ?
Si vous souhaitez calculer le nombre de jours sparant deux dates donnes, cette fonction fera votre
bonheur :
function diffdate(d1,d2){
var WNbJours = d2.getTime() - d1.getTime();
return Math.ceil(WNbJours/(1000*60*60*24));
}
Explication : d1 et d2 tant deux dates, la mthode getTime() retourne le nombre de millisecondes

coules depuis le 1er janvier 1970.
Il suffit donc de soustraire les deux valeurs et de convertir le nombre de millisecondes obtenues en jours
(1000 => secondes, 60 => minutes, 60 => heures, 24 => jours).
Exemple d'utilisation de ce code :
var Date1 = new Date(2010,0,1);
alert(diffdate(Date1,Date2) + ' jours');
Vous pouvez bien sr enrichir cette fonction en spcifiant le l'unit de temps renvoyer :
function diffdate(d1,d2,u){
var div=1;
switch(u){
case 's':
div=1000;
break;
case 'm':
div=1000*60;
break;
case 'h':
div=1000*60*60;
break;
case 'd':
div=1000*60*60*24;
break;
}
Page : 17
Prof:
Barkallah haitham
var Diff = d2.getTime() - d1.getTime();

return Math.ceil(Diff/div);

alert(diffdate(Date1,Date2,'d') + ' jours\n'+diffdate(Date1,Date2,'h')
+ ' heures\n'+diffdate(Date1,Date2,'m')
+ ' minutes\n'+diffdate(Date1,Date2,'s')
+ ' secondes\n'+ diffdate(Date1,Date2,'')
+ ' millisecondes');
Comment remplacer une image par une autre lors du passage de la souris ?
Ici, on est en prsence de deux vnements :

- onmouseover --> lorsque le souris passe au dessus de l'image
- onmouseout --> lorsque la souris sort de l'image
<img id='img' src="ImgDepart.gif" border=0
onmouseover="document.getElementById('img').src='ImgDessus.gif'"
onmouseout="document.getElementById('img').src='ImgDepart.gif'">
Comment changer la couleur de fond d'une ligne (balise <tr>) lors du passage de la
souris ?
Au chargement de la page, la couleur de fond est blanche (par dfaut).

Lorsque l'on passe la souris dessus, elle devient rouge :
- onmouseover="this.style.backgroundColor='red'"
Lorsqu'on enlve la souris de la ligne, elle redevient blanche :
- onmouseout="this.style.backgroundColor='white'"
<table border="0">
<tr onmouseover="this.style.backgroundColor='red'"
onmouseout="this.style.backgroundColor='white'">
<td>coucou</td>
<td>re coucou</td>
</tr>
</table>
Comment dtecter l'appui sur une touche du clavier ?
Voici la fonction :
function detectTouche(e){
if(parseInt(navigator.appVersion,10) >=4){
if(navigator.appName == 'Netscape'){ // Pour Netscape, firefox, ...
document.getElementById('zone').value = String.fromCharCode(e.which);
document.getElementById('zone1').value = e.which;
}
else{ // pour Internet Explorer
document.getElementById('zone').value = String.fromCharCode(e.keyCode);
document.getElementById('zone1').value = e.keyCode;
}
}
}
Page : 18
Prof:
Barkallah haitham
Et voici le corps de la page :

<body onkeydown="detectTouche(event)">
<input type="text" id="zone" size="30" />
<input type="text" id="zone1" size="30" />
</body>
Dans le premier champ texte, la lettre s'affichera et dans la seconde, son code ASCII associ.
Comment aller la page prcdente, suivante ?
En JavaScript, il y a l'objet history qui permet de grer l'historique du navigateur.

Pour aller la page prcdente :
history.back();
history.go(-1);
Pour aller la page suivante :
history.next();
Comment connatre la rsolution du visiteur ?
Il faut pour cela utiliser les proprits "screen" suivantes : - height pour la hauteur
- width pour la largeur
Entre les balises <head></head> :
hauteur = screen.height;
largeur= screen.width;
resol = largeur+ " x " + hauteur;
alert(resol);
Comment dtecter la dsactivation du JavaScript cot client ?
Il n'y a malheureusement pas grand chose faire dans ce cas. La meilleure faon de faire est d'utiliser
les balises HTML :
<noscript>
Attention, le JavaScript est dsactiv et vous ne pourrez bnficier

de toutes les fonctionnalits de cette page.
</noscript>
Comment accder aux lments d'un formulaire ?
Supposons que nous ayons dans notre page le formulaire suivant:

<form name="monFormulaire" action="...">
<input type="..." name="monInput" id="monInputId" />
<input ...
</form>
L'accs aux lments du formulaire peut se faire de plusieurs faons:
Page : 19
Prof:
Barkallah haitham
La possibilit historique.
document.monFormulaire.monInput
C'est la plus mauvaise. En effet, l'adressage n'est correctement support que par Internet Explorer et rien
n'assure la compatibilit avec les navigateurs futurs. De plus si nomInput contient des caractres
spciaux (typiquement les [] de PHP), cette syntaxe ne fonctionne pas. Elle ne peut que difficilement
tre utilise pour des noms gnrs dynamiquement.
Adressage par les tableaux forms et elements.
Le document contient un tableau de ses formulaires (forms) et chacun des formulaire contient un
tableau de ses lments (elements).
document.forms['monFormulaire'].elements['monInput']
Cette syntaxe est bien plus portable que la prcdente, accepte les caractres spciaux (comme []) et est
aise utiliser avec des noms gnrs dynamiquement.
Utiliser l'id de l'input.
Chaque lment de la page HTML peut tre dsign de faon unique par son id ( vous de vous assurer
qu'il existe un et un seul lment ayant cet id).
document.getElementById('monInputId')
Cette mthode utilise le DOM, est trs souple et concise. Elle connat certaines limitations pour des
utilisations dans des boucles.
Comment rcuprer la valeur d'un champ texte ?
Il suffit d'utiliser la proprit value :

document.getElementById('idduchamp').value
Comment vider un champ texte quand on clique dessus ?
Il suffit d'ajouter un attribut onfocus au champ texte :

<input type="text" name="nom_de_mon_input" id="id_de_mon_input" value="Valeur de
l'input" onfocus="this.value=''" />
Comment slectionner le contenu d'un champ texte quand on clique dessus ?
Il suffit d'ajouter un attribut onfocus au champ texte :

<input type="text" name="nom_de_mon_input" id="id_de_mon_input" value="Valeur de
l'input" onfocus="this.select()" />
Page : 20
Prof:
Barkallah haitham
Comment rcuprer la valeur d'un select ?
Ce code est utile pour rcuprer la valeur d'un select lorsque, par exemple, l'internaute clique dessus.
document.getElementById('liste').value;
Ce code est valable uniquement si l'attribut multiple de la balise select est absent. Et il faut prciser
l'attribut value dans les balises option. Dans le cas contraire, le rsultat dpend du navigateur. Certains
navigateurs affichent alors le texte contenu entre les balises ouvrantes et fermantes des option.
Explications :
document.getElementById('liste') permet de dsigner la liste en question. La proprit options permet
de dsigner une des valeurs de la liste droulante. Il s'agit d'un tableau (il possde donc toutes les
proprits d'un tableau JavaScript). Ainsi, pour dsigner le premier lment de la liste, il suffit de faire :
document.getElementById('liste').options[0]
Pour connatre le nombre d'lments d'une liste :

document.getElementById("liste").options.length;
document.getElementById('liste').selectedIndex permet de dsigner l'lment slectionn.

Comment rcuprer le texte d'une option d'un select ?
Ce code est utile pour, par exemple, rcuprer le texte de l'option choisie par l'internaute dans une liste
droulante select.
var texte;
texte =
document.getElementById("liste").options[document.getElementById('liste').selectedI
ndex].text;
Pour viter la rptition du document.getElementById("liste"), on peut crire :

var liste, texte;
liste = document.getElementById("liste");
texte = liste.options[liste.selectedIndex].text;
Comment rcuprer les valeurs d'un select multiple ?
Pour rcuprer les valeurs slectionnes dans un select multiple, il faut parcourir l'ensemble des options
de ce select.
var selectedList = [],
selectBox = document.getElementById("liste"),
i;
Page : 21
Prof:
Barkallah haitham
for (i=0; i < selectBox.options.length; i++)

{
if (selectBox.options[i].selected)
{
selectedList.push(selectBox.options[i]);
}
}
La collection des options est incluse dans l'objet liste retourn par getElementById(), on peut donc
simplifier lgrement le code :
var selectedList = [],
selectBox = document.getElementById("liste"),
i;
for (i=0; i < selectBox.length; i++)
{
if (selectBox[i].selected)
{
selectedList.push(selectBox[i]);
}
}
Comment rcuprer l'tat de cases cocher ?
Pour vrifier l'tat des cases cocher (chexbox), il faut rechercher ces lments dans le formulaire puis,
s'ils sont prsents, les analyser un un :
var
var
les
var
formulaire = document.getElementById("idFormulaire"); // ciblage du formulaire

inputForm = formulaire.getElementsByTagName("input"); // rcupration de TOUS
lments de type input du formulaire
n;
n = inputForm.length;
for (i=0; i<n; i++)
{
if (inputForm[i].type.toLowerCase()=="checkbox") // si c'est une case
cocher
{
if (inputForm[i].checked) // case coche
{
alert(i + " est coche");
}
else // sinon
{
alert(i + " n'est pas coche");
}
}
}
Comment soumettre un formulaire automatiquement ?
Pour envoyer automatiquement un formulaire, on utilise la mthode submit de l'objet formulaire. Dans
l'exemple ci-dessous, le formulaire sera envoy 2500 millisecondes aprs l'appel la fonction.
Page : 22
Prof:
Barkallah haitham
setTimeout(function(){document.getElementById("idFormulaire").submit();},2500);
Comment soumettre un formulaire en utilisant un lien ?
Vous souhaitez, pour des raisons esthtiques (ou autres), que votre formulaire soit soumis non pas par
appui sur un bouton ou une image, mais par un clic sur un simple lien HTML. Il suffit pour cela de
dclencher la soumission avec l'appel de la mthode submit() de l'objet formulaire, et d'ajouter le motcljavascript pour prvenir le navigateur de considrer le lien comme tant une instruction JavaScript.
<a href="javascript:document.getElementById('idFormulaire').submit()">valider</a>
Lorsqu'un formulaire est soumis par sa mthode JavaScript submit(), le gestionnaire d'vnement du
formulaire onsubmit n'est pas dclench !
De par la prsence d'une pseudo-url, l'utilisation de ce code n'est toutefois pas recommande.
Comment vrifier que l'utilisateur a renseign un champ d'un formulaire ?
Vous voulez vrifier qu'un utilisateur a bien saisi une valeur dans un des champs de votre formulaire (le
champ nom par exemple) :
function verification(){
if(document.getElementById('nom').value == ""){
alert ('Vous avez oubli de saisir un champ !');
return false;
}
return true;
}
Comment dsactiver une zone de texte en cochant une checkbox ?
Voici le code de la fonction :

function changement()
{
if (document.getElementById('cb').checked)
document.getElementById('coucou').disabled=true;
else
document.getElementById('coucou').disabled=false;
}
Et voici le code du champ texte et de la checkbox :

<input type="checkbox" id="cb" onclick="changement()" />
<input type="text" id="coucou" />
Comment n'autoriser que la saisie de chiffres dans un champ texte ?
Page : 23
Prof:
Barkallah haitham
function chiffres(event) {
// Compatibilit IE / Firefox
if(!event && window.event) {
event=window.event;
}
// IE
if(event.keyCode < 48 || event.keyCode > 57) {
event.returnValue = false;
event.cancelBubble = true;
}
// DOM
if(event.which < 48 || event.which > 57) {
event.preventDefault();
event.stopPropagation();
}
}
<input type="text" onkeypress="chiffres(event)" />
XV.
Rfrences
* Support de cours Javascript Centre NTE Nouvelles Technologies et Enseignement
UNIVERSIT DE FRIBOURG - SUISSE
http://nte.unifr.ch/IMG/pdf/supportjavascript.pdf
* Club des dveloppeurs Javascript http://javascript.developpez.com/
* Tutoriel Javascript http://openclassrooms.com/courses/tout-sur-le-javascript
jjgh
Page : 24
Sommaire
I.
Introduction_________________________________________________________________________1
II.
Les emplacements du code JavaScript________________________________________________1
III.
Les objets JavaScript________________________________________________________________2
IV.
Les entres/Sorties en JavaScript______________________________________________________3
V.
Les variables et les types_____________________________________________________________5
VI.
Les oprateurs prdfinis_____________________________________________________________6
VII.
Les structures de contrle conditionnelles_____________________________________________6
VIII.
Les structures de contrle itratives___________________________________________________7
IX.
Les fonctions en JavaScript___________________________________________________________8
X.
Les vnements en JavaScript________________________________________________________8
XI.
Les objets prdfinis en JavaScript___________________________________________________10
XII.
Les formulaires en JavaScript________________________________________________________11
XIII.
Outil propos pour la formation______________________________________________________13
XIV.
XIV. Codes Utiles____________________________________________________________________14

Comment afficher la date ou l'heure en temps rel ?_________________________________________14
Comment comparer deux dates ?____________________________________________________________14
Comment vrifier si un champ qui contient la date et l'heure au format (aaaa-mm-jj hh:mm:ss)
est bien rempli ?____________________________________________________________________________14
Comment calculer le nombre de jours entre deux dates ?____________________________________16
Comment remplacer une image par une autre lors du passage de la souris ?_________________17
Comment changer la couleur de fond d'une ligne (balise <tr>) lors du passage de la souris ?
_____________________________________________________________________________________________17
Comment dtecter l'appui sur une touche du clavier ?_______________________________________17
Comment aller la page prcdente, suivante ?_____________________________________________18
Comment connatre la rsolution du visiteur ?_______________________________________________18
Comment dtecter la dsactivation du JavaScript cot client ?_______________________________18
Comment accder aux lments d'un formulaire ?___________________________________________18
Comment rcuprer la valeur d'un champ texte ?____________________________________________19
Comment vider un champ texte quand on clique dessus ?___________________________________19
Comment slectionner le contenu d'un champ texte quand on clique dessus ?_______________19
Comment rcuprer la valeur d'un select ?__________________________________________________20
Comment rcuprer le texte d'une option d'un select ?______________________________________20
Comment rcuprer les valeurs d'un select multiple ?________________________________________20
Comment rcuprer l'tat de cases cocher ?_______________________________________________21
Comment soumettre un formulaire automatiquement ?______________________________________21
Comment soumettre un formulaire en utilisant un lien ?_____________________________________22
Comment vrifier que l'utilisateur a renseign un champ d'un formulaire ?___________________22
Comment dsactiver une zone de texte en cochant une checkbox ?__________________________22
Comment n'autoriser que la saisie de chiffres dans un champ texte ?________________________22
XV.
Rfrences_________________________________________________________________________23

JavaScript Novembre 2009 - New

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

JavaScript Novembre 2009 - New

Hochgeladen von

Copyright:

Verfügbare Formate

Formation Javascript

Activit 2 (page 79):

Les emplacements du code JavaScript

Complter les balises du langage JavaScript :

Les objets JavaScript

La Hirarchie des objets dinterface en JavaScript

Les entres/Sorties en JavaScript

A) Laffichage (sortie) en JavaScript :

EX1 : window.alert("Bonne anne") ;

EX2 : chaine="Bonne anne" ;

EX3 : chaine="Bonne anne" ;

****Affichage dun message texte***

Le contenu de la variable x est : 2010

Le contenu de la variable x est : 2010

EX1 : Document.write("Bonne anne") ;

EX2 : chaine="Bonne anne" ;

EX3 : chaine="Bonne anne" ;

EX4 : CH= "2010" ;

B) La lecture (entre) en JavaScript :

EX1 :A=window.prompt("Saisir votre anne de naissance") ;

EX2 :A=prompt("Saisir votre anne de naissance"," ") ;

EX3 :A=prompt("Saisir votre anne de naissance","19 ") ;

La fonction Number() : permet de convertir une chane en entier sil est

Les variables et les types

Les oprateurs prdfinis

Voir livre page 87 et 88

Les structures de contrle conditionnelles

Les structures de contrle itratives

for ( Valeur initiale ; Condition ; progression)

for ( i=1 ; i<=5 ; i++)

b = prompt("Donner le deuxime entier :" ," ");

Les fonctions en JavaScript

Les vnements en JavaScript

Les objets prdfinis en JavaScript

A) Lobjet String (chane de caractres):

ch1 dans ch2 si elle existe et -1 dans le cas

Permet de renvoyer la racine carre de x

Permet darrondit x lentier le plus proche

Permet de retourner un nombre alatoire entre 0

Les formulaires en JavaScript

2- Les boutons radio:

3- Les cases cocher (checkbox):

4- Les listes de slection (liste de menu droulant):

Outil propos pour la formation

LOutil SotinkDHTMLMenu est un logiciel trs

XIV. Codes Utiles

Comment afficher la date ou l'heure en temps rel ?

Et voici la zone d'affichage :

La fonction est appele, par exemple, de la manire suivante :

Comment comparer deux dates ?

Voici une technique permettant de comparer deux dates :

est aprs d2");

et d2 sont la mme date");

var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

Comment vrifier si un champ qui contient la date et l'heure au format (aaaa-mm-jj

if ((mysplit[1].length != 8) || (thetime.length != 3)||

if ((onetime.getHours() != hours) || (onetime.getMinutes() != minutes) ||

Explication : d1 et d2 tant deux dates, la mthode getTime() retourne le nombre de millisecondes

var Diff = d2.getTime() - d1.getTime();

var Date1 = new Date(2010,0,1);

Ici, on est en prsence de deux vnements :

Au chargement de la page, la couleur de fond est blanche (par dfaut).

Comment dtecter l'appui sur une touche du clavier ?

**Affichage dun message texte*