Université M’hamed Bougara de

Boumerdès

Structure Infotronique
Master  Réseau &Télécommunication (M2)

Technologies Du Web
 Université M’hamed Bougara de
Boumerdès

JavaScript

08/12/2018
 Défi iti
Définitions 
Le JavaScript, créé en 1995 par Brendan Eich
C’est un langage de programmation de scripts orienté objet
JavaScript est un langage qui n'a absolument pas les
prétentions de JJava.
p
Java est un langage de programmation à part entière
(
(comme l C,
le C le
l C++,
C l Pascal...).
le P l ) SonS terrain
i d'action
d' i ne se
limite pas au Web.

08/12/2018
 Définitions 

JavaScript est profondément intégré à HTML

JavaScript est un langage de script un langage interprété

Il possède de nombreuses caractéristiques des langages objet,

mais il ne peut pas prétendre être un véritable langage objet
puisqu’il n'implémente pas la notion d'héritage et possède une
notion de classe très simpliste
08/12/2018
 Eléments de base

La boîte de dialogue alert()
alert() est une fonction, qui permet d
l t()  t   f ti   i  t d'afficher une boîte de dialogue 
ffi h    b ît  d  di l  
contenant un message. 
Exemple :
alert( Cours JavaScript )
alert(‘’Cours JavaScript’)

08/12/2018
 Eléments de base

La syntaxe Javascript
y J p
Les instructions doivent être séparées par un point‐virgule que l'on 
place à la fin de chaque instruction :
l  à l  fi  d   h  i i  
<script>
instruction_1;
instruction 2;
instruction_2;
instruction_3;
</script>
08/12/2018
 Eléments de base

La syntaxe d'une fonction est la suivante :

<script>
myFunction();
y
</script>
Par exemple :
<script>
i t
alert('Bonjour');
</script>

08/12/2018
 Eléments de bases

Remarques
q
De préférence, d'écrire le code Javascript dans un 
fichier externe, portant l'extension 
Ce fichier est ensuite appelé depuis la page Web au 
moyen de l'élément <script> comme suit
y p :
<script src
<script src="hello.js"></script>
="hello.js"></script>

08/12/2018
 Eléments de base

Bases des variables
<script>
var myVariable
var myVariable;;
myVariable
y = 2;
</script>

O  
Ou 

<script>
var myVariable
var myVariable = 2;
</script>

08/12/2018
 Eléments de base
Bases des variables (Remarques)

Une variable peut être de type numérique,

numérique mais aussi une
chaîne de caractères ou peut être de type booléen (boolean).
Il existe en JavaScript une notion de variable globale et locale.
d'une
Les variables locales sont déclarées au sein d fonction Les
une fonction.
variables globales sont les variables déclarées en dehors du corps
d'une fonction;

08/12/2018
 Eléments de base

Les opérateurs arithmétiques

On p
peut utiliser 5 opérateurs
p arithmétiques
q : l'addition (+), la
soustraction (‐), la multiplication (*), la division (/) et le modulo
(%) Le
(%). L modulo
d l estt le
l reste
t d'une
d' di i i
division.
Exemple
<Script>
var  x = 3;
x+= 5;
 
alert(x); 
alert (x); 
</script>

08/12/2018
 Eléments de base

La concaténation
Une concaténation consiste à ajouter
j une chaîne de caractères à la
fin d'une autre ;
Exemple :
<script>
var text
var text = ‘’Cours  ‘’;
text += ‘HTML';
alert((text);
alert text);
// Affi
// Affiche « Cours HTML».
h    C  HTML
</script>

08/12/2018
 Eléments de base
La fonction prompt()

Exemple
p
<script>
var start
var  start
t t = ‘Salut ', 
= ‘Salut ', name
 ‘S l t '  name, end = ' !', 
, end = ' !', result
  d   ' !'  result;
lt;
name = prompt('Quel est votre prénom ?');
result = start
= start + name
+ name + end;
alert((result
alert result);
);
</script>

08/12/2018
 Eléments de base
La fonction prompt()
Exemple
<script>
var first, second, result
var first, second, result;;
first = 
first = prompt
prompt('Entrez le premier chiffre :');
p p (('Entrez le premier chiffre :');
p );
second = 
second = prompt
prompt('Entrez le second chiffre :');
('Entrez le second chiffre :');
result
l = 
= parseInt
 parseInt(first) + 
I (first) + parseInt
(fi )   parseInt(second); /* 
I ((second); /* la fonction 
d)  /* l
 /* la fonction 
l  f i  
parseInt() transforme la chaîne de caractères en nombre 
parseInt () transforme la chaîne de caractères en nombre */
*/
alert((result);
alert result);
</script>
08/12/2018
 Eléments de base
Opérateurs de comparaison
== : égal à
!= : différent de
> supérieur à
>= supérieur ou égal à
< : inférieur à
<= : inférieur ou égal à

08/12/2018
 Eléments de base

Les opérateurs logiques

&& qui signifie : valeur1 && valeur2
valeur1 && valeur2
||  i  i ifi  OU : valeur1 || valeur2
|| qui signifie OU : valeur1 || valeur2
  l  ||  l
! qui signifie NON : !valeur
!valeur

08/12/2018
 Eléments de base
La condition if else
La fonction confirm() permet une interaction de l'utilisateur à 
p
l'exécution du code
(t
(true si OK, false si Annuler) :
i OK  f l   i A l ) 
Exemple
<script>
if (confirm
if (confirm(Réaliser le projet avec java ?')) {
confirm(Réaliser le projet avec java ?
(Réaliser le projet avec java ?')) {
(Réaliser le projet avec java ? )) {
alert(Le bon choix !');
alert(Le bon choix !');
}</script>
08/12/2018
 Eléments de base
La condition if else
Exemple
<script>
var nbre
var  nbre ;
nbre= prompt("Entrez un nombre "); 
nbre = prompt("Entrez un nombre "); 
nbre= 
nbre
b = parseInt
 parseInt(
I t(
t(nbre
nbre);
b );)
if (nbre
if (nbre == 0) {
alert('un nombre 
alert(
alert ('un nombre null
( un nombre null
un nombre null.
null.');
..');
);
} 
else if ( nbre
if ( nbre <= 0) 
alert("NOMBRE NEGATIF ");
alert ("NOMBRE NEGATIF ");
else {
alert("NOMBRE POSITIF.");
alert
l t("NOMBRE POSITIF
t("NOMBRE POSITIF.");
("NOMBRE POSITIF ")
}</script>
08/12/2018
 Eléments de base

Les boucles
La boucle while
Syntaxe
y
<script>
while
h l (condition) {
( d ){
instruction_1; instruction_2; instruction_3;
} </script>

08/12/2018
 Eléments de base

Les boucles
La boucle do while (peu utile)
Exemple
p
<script>
do {
d {
instruction_1; instruction_2; instruction_3;
} while
} while (condition);
</script>
/ i t
08/12/2018
 Eléments de base

Les boucles
La boucle for (très utile)
<script>
p
for (initialisation;
(initialisation; condition
condition;; incrémentation) {
instruction_11;
instruction_
instruction_22;
instruction_
instruction_33;
instruction_
} </script>
/ i t
08/12/2018
08/12/2018
 Les fonctions
‰ Pour définir une fonction qui ne retourne pas de valeur, la
syntaxe est la suivante :
function Nom_Function (Arg1, ..., ArgN) {
Instruction 1 InstructionM}
‰ Pour définir une fonction q
qui retourne une valeur, la syntaxe
y est
la suivante :
f
function
i Nom_Function
N F i (Arg1,...,
(A A N) {
ArgN)
Instruction 1
InstructionM
return valeur }
08/12/2018
 Les fonctions
Les fonctions

Exemple
Une fonction peut retourner une seule valeur, stockée dans une
variable :
<script>
function bonjour() {
return 'Bonjour !'
!';;
}
alert(bonjour())
alert(bonjour());;
</script>
/ i
08/12/2018
 Les fonctions
Les fonctions

Les fonctions prédéfinies

p
parseFloat
La fonction parseFloat analyse la chaîne de caractères qu'on lui
passe en paramètre
èt et,
t dans
d l mesure du
la d possible,
ibl lal traduit
t d it en
valeur numérique réelle. Par exemple, la chaîne
'1.414' sera traduite en valeur numérique 1.414

08/12/2018
 Les fonctions
Les fonctions prédéfinies
IsNaN
En JJavaScript,
p , lorsqu'une
q expression
p numérique
q ne p
peut p
pas être
évaluée, elle prend la valeur NaN (pour Not a Number). C'est le cas,
par exemple,
l lors
l d
d'une d
division par 0 ou lorsqu'on
l essaie de
d
transformer en nombre une chaîne de caractères qui n'a rien de
numérique.
S t
Syntaxe : IsNaN(expression)
I N N( i )
expression est l'expression numérique qu'on souhaite tester.
IsNaN retourne la valeur booléenne true ou false.
08/12/2018
 Les fonctions
Les fonctions
Les fonctions prédéfinies(IsNaN)
Exemple :
<SCRIPT LANGUAGE="JavaScript1.2">
var chaine1 = new String('33.14
var chaine1 = new String( 14')//
)//
var chaine2 = new String('Rien')
if (isNaN(Res = parseInt(chainel))) {
d
document.write('La valeur obtenue pour parseInt(\'' +
t it ('L   l   bt     I t(\'' 
chaine1 + '\')n\'est pas numerique.<BR>')
} else {
document.write ('La valeur numerique
( de parselnt (\'' +
(
chaine1 + '\') est ' + Res + '.<BR>')  }
if (isNaN(Res = parselnt(chaine2))) {
p
document.write('La valeur obtenue pour parseInt(\'' +
chaine2 + '\') n\'est pas numerique.')
}} else
e se {
document.write('La valeur numerique deparseInt(\'' + chaine2 + ' \ ' )est ' + Res + '.')
}</SCRIPT>
08/12/2018
 Les fonctions 

Les objets

En JavaScript, la définition d'une classe et la définition du

constructeur de cette classe sont réalisées simultanément par la
déclaration d'une fonction un peu particulière.

08/12/2018
 Les fonctions 
Les objets (Exemple)
( p ){
function Individu(nom, prenom, date_naissance) {
this.nom = nom
this.prenom = prenom
hi d i
this.date_naissance  d i
= date_naissance
}
Les propriétés : this.nom, this.prenom
L   ié é     hi   hi et  
this.date_naissance.
Pour créer une instance :
Femme   new Individu(‘XXX'
Femme = new Individu( XXX ,  'GGGG'
GGGG ,  '3/12/95')
3/12/95 )
Pour modifier le nom:    niece.nom = 'Aubert’

08/12/2018
 Les objets et les tableaux

Les variables contiennent des objets, qui peuvent être des

nombres,
b d chaînes
des h d caractères ou des
de d booléens.
b l Mais le
l
Javascript n'est pas un langage orienté objet (C++, C# ou Java),
mais un langage orienté objet par prototype.

08/12/2018
 Les objets et les tableaux
j

Les objets contiennent trois choses :

‐ un constructeur
‐ des propriétés
‐ des méthodes.
Exemple :
<script>
var 
var myString
myString = 'Ceci est une chaîne de caractères'; 
alert((myString.length); 
alert myString.length); 
alert((myString.toUpperCase()); 
alert myString.toUpperCase()); 
</script>
08/12/2018
 Les objets et les tableaux
j

Les tableaux
Après Number, String et Boolean, Array
b l est un 4e objet natif de 
b fd
Exemple :
<script>
var myArray = ['R', 'M', 'A', 'J', 'G'];
myArray[1] = 'P';
A [ ]   'P'
alert(myArray[1]); 
</script>

08/12/2018
 Les objets et les tableaux
j

Opérations sur les tableaux

On peut ajouter des
d items avec la
l méthode
h d push()
h() :
<script>
var myArray = ['R', 'M'];
myArray.push('A'); // Ajoute « A» à la fin du tableau
A h('A')  // Aj t    A  à l  fi  d  t bl
myArray.push('J', 'G'); // Ajoute « J » et « G» à la fin du 
tableau
</script>
08/12/2018
 Les objets et les tableaux

Opérations sur les tableaux

La méthode unshift() fonctionne comme push(), excepté que les
items sont ajoutés au début du tableau.
tableau Les méthodes shift() et
pop() retirent respectivement le premier et le dernier élément du
tableau.
Exemple 
<script>
var myArray = ['R', 'M', 'A, 'J', 'G'];
myArray shift(); // Retire « R»
myArray.shift(); // Retire « R»
myArray.pop(); // Retire « G»
( y y); // ff , ,J
alert(myArray); // Affiche « M,A,J »
</script>
08/12/2018
 Les objets et les tableaux

Parcourir un tableau
On peut parcourir un tableau avec for ;
Exemple
<script>
var myArray
y y = ['R', 'M', 'A', 'J', 'G']; 
[ , , , J , ];
for ( i = 0;i < myArray.length; i++)  
alert(myArray[i]); 
</script>

08/12/2018
 Les objets et les tableaux

Les objets littéraux
On peut remplacer l'indice par un identifiant comme suit :
Exemple :
<script>
var module = {{
cours: 'tw
cours: 'tw',',
TD: 'creation
TD: 'creation de site',
TP: '
TP: 'reaisation
reaisation', };
', };
}
alert(module['TP']); 
alert (module['TP']); 
alert((module.cours); 
alert module cours); 
module.cours
cours); 
module['expose'] = 'sur les sites sociaux'; 
alert((module.expose
alert module.expose); </script>
p ); </script>
); / p

08/12/2018
 Les objets et les tableaux

Parcourir un objet avec for in

On ne peut pas parcourir l'objet avec for, parce for s'occupe
d'incrémenter
d incrémenter des variables numériques.
numériques Là on fournit une
variable‐clé pour le parcours
Exemple :
<script>
var module = {{
cours: 'tw
cours: 'tw',',
TD: 'creation
TD: '
TD:  creation de site
de site',
TP: 'reaisation
TP: ' reaisation',',
};
for (var id in module) 
08/12/2018 alert(module[id]);  </script>
alert(module[id]);  </script>
 Exemples de  classes prédéfinies

Date()
Constructeur
Pour manipuler une date avec JavaScript,
JavaScript il faut créer un objet de
la classe Date. La création
d'un tel objet se fait de façon classique, en associant l'instruction
new et le constructeur
prédéfini Date().
La syntaxe pour la création d'un objet référençant la date actuelle
est : var nom_objet = new Date()

08/12/2018
 Exemples de  classes prédéfinies

Date() : Méthodes
getDate() Retourne le jour du mois, compris entre 1 et 31.
getDay() Retourne le jour de la semaine,
semaine compris entre 0 et 6 (0
= Dimanche).
getHours() Retourne l'heure, comprise entre 0 et 23 .
getMinutes()
g () Retourne les minutes,, comprises
p entre 0 et 59 .
getMonth() Retourne le mois compris entre 0 et 11 (0 = Janvier).
getSeconds()
() Retourne les secondes comprises entre 0 et 59.
getTime(() Retourne le nombre de millisecondes écoulées
depuis le 1er Janvier 1970.
08/12/2018
 Exemples de  classes prédéfinies

Date() : Méthodes
setSeconds(seconde) Affecte les secondes, comprises entre 0 et 
59.
setTime(millisec) Affecte une date en indiquant le nombre de 
millisecondes écoulées depuis le 1er Janvier 1970.
setYear (année) Affecte l'année (en indiquant le nombre 
( ) ( q
d'années depuis 1900).
toGMTString() Retourne une chaîne indiquant la date en 
utilisant les conventions GMT. Ex : Mon, 24 Dec 1996 23:58:59 
GMT.
toLocateString() Retourne une chaîne indiquant la date en 
utilisant les conventions locales.
4/ /9 3 59 59
Ex : 24/12/96 23:59:59.

08/12/2018
 Exemples de  classes prédéfinies

Date() : Méthodes
getTimeZoneoffset() Retourne le nombre de minutes de 
décalage entre l heure locale et l heure GMT.
décalage entre l'heure locale et l'heure GMT
getYear() Retourne le nombre d'années depuis 1900.
setDate() Affecte le jour du mois, compris entre 1 et 31.
g
getHours() Affecte l'heure, comprise entre 0 et 23.
() , p 3
setMinutes(minute) Affecte les minutes, comprises entre 0 et 
59.
setMonth(mois) Affecte le mois compris entre 0 et 11 (0 = 
Janvier).
08/12/2018
 Evénements JavaScript associés au formulaire 
p

Les composants d'un formulaire peuvent être considérés comme

des éléments d'un tableau numérotés à partir de zéro [0], on
peut accéder à un élément soit p
p par son indice,, soit p
par son nom.

08/12/2018
 Evénements JavaScript associés au formulaire 
p

L'objet TEXT
L'objet TEXT possède ainsi quatre propriétés :
‰ name donne le nom qui a été choisi pour cette balise.
‰ value retourne la valeur saisie par l
value retourne la valeur saisie par l'utilisateur
utilisateur.
‰ defaultValue retourne la valeur originale préinscrite dans le 
champ.
‰ type retourne le type de l
type retourne le type de l'objet (texte dans ce cas)
objet (texte dans ce cas)
Exemple

08/12/2018
 E é
Evénements JavaScript associés au formulaire 
t J S i t ié f l i
L'objet TEXT
L'objet TEXT
Exemple
On accède depuis une fonction JavaScript aux propriétés 
suivantes : 
document.FormFiche[n] donne prénom
document FormFiche prénom name donne prénom
document.FormFiche.prénom.name donne prénom
document.FormFiche[n].value donne Marianne
document.FormFiche.prénom.value donne Marianne
document.FormFiche[n].type donne text
[ ] yp
document.FormFiche.prénom.type
08/12/2018
donne  text
 E é
Evénements JavaScript associés au formulaire 
t J S i t ié f l i

Les méthodes de l objet TEXT
Les méthodes de l'objet TEXT
La méthode d'un objet définit la fonction qu'on lui applique. 
Il existe trois méthodes pour l'objet INPUT :
• focus permet de positionner le curseur de saisie dans le champ.
p p p
• blur permet de forcer le curseur de saisie hors du champ.
• select permet de sélectionner tout le texte saisi dans le champ.
  l    d   él i    l     i i d  l   h

08/12/2018
 Evénements JavaScript associés au formulaire 

Les méthodes de l'objet TEXT

Ainsi dans ll'exemple
Ainsi, exemple suivant,
suivant on sélectionne le champ prénom
comme premier champ de saisie :
document.FormFiche.prenom.focus( )
document.FormFiche.prenom.focus( )

08/12/2018
 Evénements JavaScript associés au formulaire 

Les événements associés à l'objet TEXT
Le traitement des événements est la partie la plus intéressante. 
La page s'animera dès l'intervention de l'utilisateur qui entraîne 
p g q
un traitement particulier.
Au niveau de la balise HTML, le programmeur indique pour 
d l b l l d
chaque type d'événements qu'il souhaite traiter, la fonction qu'il 
va effectuer. Il doit ensuite coder cette fonction dans la zone des 
scripts (JavaScript)
i t  (J S i t)
08/12/2018
 Evénements JavaScript associés au formulaire 

E
Exemple:
l
<input name="revenu" onFocus="aideContexte(veuillez 
renseigner le nom’)" onBlur="verifNum(this.value)">

08/12/2018
 Evénements JavaScript associés au formulaire
Evénements JavaScript associés au formulaire 
Voici les événements que l'on peut associer à la balise input :
onBlur apparaît lorsque l'on perd le focus, c'est‐à‐dire lorsque le
curseur de saisie quitte la zone de saisie des caractères.
caractères
onChange apparaît lorsque la valeur qui existait dans la zone est
changée, soit que l'on modifie la valeur par défaut, soit que l'on
saisisse dans une case préalablement vide,
vide soit que ll'on
on modifie
une valeur précédemment acquise.
onFocus apparaît dès que l'on clique dans la case de saisie.
onSelect apparaît
pp lorsque
q l'on sélectionne le texte dans la zone
de saisie.
08/12/2018
 Evénements JavaScript associés au formulaire
Evénements JavaScript associés au formulaire 
Les événements se programment toujours de la façon suivante :
Nom_d'événement=
Nom_d'événement=fonction_de_traitement
fonction_de_traitement(parametre1, 
(parametre1, 
parametre...)
parametre ...))
Même si aucun paramètre n'est nécessaire pour traiter 
l'événement, le jeu de parenthèses est obligatoire.
Remarque
q
Pour <INPUT TYPE=PASSWORD> est identique à l'objet TEXT, 
il a les mêmes propriétés et méthodes, mais il n'a AUCUN 
événement associé.

08/12/2018
 Evénements JavaScript associés au formulaire
Evénements JavaScript associés au formulaire 
Le type CHECKBOX
<input type="checkbox" name="m" value="HTML"
checked>HTML<br>
Les propriétés de l'objet CHECKBOX
name donne le nom qui a été choisi pour cette balise.
value retourne la valeur ((value)) p
programmée
g dans la balise.
type retourne le type de l'objet (checkbox).
Checked true si la case est validée, false dans le cas contraire.
defaultChecked retourne true si la case est validée par la balise
(attribut CHECKED), false dans le cas contraire.
08/12/2018
 Evénements JavaScript associés au formulaire 
Exemple
A travers l’exemple suivant, nous traitons le cas 
A travers l’exemple suivant, nous traitons le cas d’une case à 
p d’une case à 
cocher avec  un même nom pour plusieurs éléments.
<input type="checkbox" name="M2" value="html" 
i t t " h kb "  "M "  l "ht l" 
checked>HTML<br>
<input type="checkbox" name="M2" value="css" checked>CSS<br>
<input type "checkbox" name
<input type= checkbox  name="M2" value
M2  value="java ">JavaScript
java  >JavaScript
document.nomform[n].name donne M2
document. nomform.M2[n].name donne M2
document  nomform M2[n] value donne HTML pour n=0, CSS
document. nomform.M2[n].value donne
pour n=l et 
08/12/2018
JavaScript pour n= 2
 Evénements JavaScript associés au formulaire 

La méthode de ll'objet
objet CHECKBOX
C’est la méthode Click, qui permet par une instruction du script de
positionner la case en mode coché.
document. nomform.M2[n].click()
[ ] ()
L' événement associé à l'objet CHECKBOX
L'é é
L'événement associé
ié à l'objet
l' bj Checkbox
Ch kb est onClick
Cli k quii permet
d'exécuter une fonction
<input name="M2" type="checkbox" value="Validez"
onClick tagada()>
onClick=tagada()>
08/12/2018
 Evénements JavaScript associés au formulaire 

Type radio
<input type="radio" name="media" value="cd" checked> CD‐ROM
<input type="radio" name="media" value="dk"> Disquette

08/12/2018
 Evénements JavaScript associés au formulaire 
Les propriétés de l'objet RADIO
name donne le nom qui a été choisi pour cette balise.
q p
value retourne la valeur (value) programmée dans la balise.
t
type retourne le type de l'objet (radio).
  t  l  t  d  l' bj t ( di )
Checked true si la case est validée, false dans le cas contraire.
defaultChecked true si la case est validée par la balise (attribut 
CHECKED)  false dans le cas contraire
CHECKED), false dans le cas contraire.
index donne le rang (l'indice) du bouton qui est enfoncé.
length retourne le nombre d'éléments de type radio ayant le même 
attribut NAME

08/12/2018
 Evénements JavaScript associés au formulaire 
Comme checkbox on peut écrire :
document.nomform[n].name q
qui renvoie M2
La méthode de l'objet RADIO
Il s'agit
' it de
d la
l méthode
éth d Click
Cli k
document..nomform.
document nomform.m2[n].
[n].click()
L'événement associé à l'objet RADIO
<input type="radio"
type= radio name="media"
name= media value="cd"
value= cd
onClick=demande('cd') checked> CD‐ROM
<input type="radio" name="media" value="dk"
onClick=demande('dk')>
onClick=demande( dk )> Disquette

08/12/2018
 Evénements JavaScript associés au formulaire 

<SELECT> et <OPTION>

Les balises <SELECT> et <OPTION> représentent l'objet select.

Les propriétés de l'objet SELECT
Cet objet possède les propriétés suivantes :
• name donne le nom qui a été choisi pour cette balise.
q p
• length est un nombre représentant le nombre d'options de la liste.

08/12/2018
 Evénements JavaScript associés au formulaire 
<SELECT> et <OPTION>
Les propriétés de l objet SELECT
Les propriétés de l'objet SELECT
• type donne le type de l'objet SELECT, soit :
‰ select‐one pour une pop‐liste,
select one pour une pop liste
‰ select‐multiple pour une liste à sélection multiple,
‰ select pour une liste à sélection simple.
p p
• selectedlndex reflète l'index de l'option sélectionnée pour une 
li  à  él i   i
liste à sélection unique ou une pop‐list, et l'index de la première 
      li    l'i d  d  l   iè  
option sélectionnée pour une liste à sélection multiple. La propriété 
selectedIndex est la plus efficace pour connaître l'index de l'option 
sélectionnée d'une liste à sélection simple
sélectionnée d une liste à sélection simple. Si aucune option n
 Si aucune option n'est 
est 
sélectionnée, la valeur de l'index retournée est égale à ‐1.
08/12/2018
 Evénements JavaScript associés au formulaire 
<SELECT> et <OPTION>
Les propriétés de l'objet SELECT
Les propriétés de l objet SELECT
Pour connaître les options sélectionnées dans une liste à sélection 
multiple, il convient de scruter tous les éléments (options) de la liste 
p p
<script>
function quiEstSelect
function  quiEstSelect()(){{
for (i
for (i=0; i<document.f1
for (i=0; i<
0; i<document.f1
0; i<document.f1.s1..s1.length
length; i++) {
; i++) {
if (document.f1
if (document.f1.s1.options[i].
.s1.options[i].selected
selected == 
== true
true) {
) {
alert (i+" sélectionne")
alert((document.f1
alert document
document.f1.s1.value);
f1.s1.value);
s1 value);
}

}} / i t
}}</script>
<form name=f1>
name=f1>
<select name
<select  name= =sl size=7 multiple>
<option value=op1>1
l
<option value=op2>2
08/12/2018
<option value=op3>3
 Evénements JavaScript associés au formulaire 

Les méthodes de l'objet SELECT
bl et focus
blur f sont des
d méthodes
é h d quii n'ont
' pas vraiment
i d' ili é Si la
d'utilité. l méthode
éh d
focus() permet bien de donner le focus sur une liste (et non sur une pop‐list où
cette méthode est sans effet), elle ne permet pas d'en sélectionner une option. En
fait, elle n'a d'autre effet que d'attirer l'attention sur la liste. La méthode blur() doit
permettre de forcer la désélection de la liste.

08/12/2018
 Evénements JavaScript associés au formulaire 

L événements
Les é é t associés
ié à l'objet
l' bj t SELECT
• onChange, apparaît lorsque l'utilisateur effectue un changement
d'une option (sélection ou désélection).
• onFocus,
onFocus apparaît si ll'on
on clique sur une option quelconque d
d'une
une
liste. Il n'y a pas d'événement onFocus sur une pop‐list.
• onBlur, apparaît lorsque, après avoir cliqué sur une option d'une
liste on clique en dehors de cette liste.
liste, liste Il n
n'yy a pas d
d'événement
événement
onBlur sur une pop‐list.

08/12/2018
 Evénements JavaScript associés au formulaire 

Les propriétés des options de l'objet SELECT

• defaultSelected renvoie true ou false selon que l'option est celle

qui est sélectionnée par défaut.
défaut Si aucune option d
d'une
une pop‐list
pop list ne
possède d'attribut selected, c'est le premier élément de la liste qui est
considéré comme option sélectionnée par défaut.
Dans une liste standard (size > 1) defaultSelected n
n'est
est vrai que si
une option est explicitement marquée avec l'attribut selected.

08/12/2018
 Evénements JavaScript associés au formulaire 

<TEXTAREA>

Du point de vue JavaScript, l'objet TEXTAREA se

comporte
p exactement comme l'objet
j TEXT

08/12/2018
 Evénements JavaScript associés au formulaire 

Les propriétés des options de l objet SELECT
Les propriétés des options de l'objet SELECT

• selected renvoie true si ll'option

option est sélectionnée,
sélectionnée false sinon.
sinon
• text renvoie le texte associé à l'option (<option
value="fruit">bergamote renvoie bergamote).
• value renvoie la valeur associée à l'option
p ((<option
p
value="fruit">bergamote renvoie fruit).

08/12/2018
 Evénements JavaScript associés au formulaire 

<INPUT TYPE=SUBMIT>

L'attribut
L attribut NAME
Cet attribut est souvent omis lorsqu'il existe un seul bouton de
soumission pour le formulaire.
L'attribut VALUE
Il permet de spécifier essentiellement le texte qui sera inscrit sur le
b
bouton, mais aussi d'identifier
d' d f l bouton
le b qui a été sollicité
ll d
dans l
le
cas où il existerait plusieurs boutons de soumission portant le même
nom sur la même page.
08/12/2018
 Evénements JavaScript associés au formulaire 

<INPUT TYPE=SUBMIT>
Les p
propriétés
p de l'objet
j SUBMIT
Il possède trois propriétés
name donne
d l nom quii a été choisi
le h i i pour cette
tt balise.
b li
value retourne la valeur affichée sur le bouton.
type retourne le type de l'objet (submit).

08/12/2018
 Evénements JavaScript associés au formulaire 

<INPUT TYPE=SUBMIT>
Exemple
<input name="envoi" type="submit" value="Validez">
document.FormFiche[n] donne envoi
document.FormFiche.envoi.name donne envoi
d
document.FormFiche[n].value donne Validez
tF Fi h [ ] l  d  V lid
document.FormFiche.envoi.value donne Validez
document.FormFiche[n].type donne submit
document FormFiche envoi type donne submit
document.FormFiche.envoi.type
08/12/2018
 Evénements JavaScript associés au formulaire 

Les méthodes de l'objet SUBMIT

La seule méthode applicable sur l'objet SUBMIT est la méthode
click.
click

08/12/2018
 Evénements JavaScript associés au formulaire 

L'événement associé à l'objet SUBMIT
L'événement associé au bouton de soumission est onClick qui
permet d
d'exécuter
exécuter une fonction lorsque ll'utilisateur
utilisateur appuie sur le
bouton de soumission.
<input name="envoi"
name="envoi" type="
type="submit
submit"" value="Validez"
onClick=
onClick=verif
verif()>
()
()>

08/12/2018
 Définition de styles
y
Les fonctions anonymes

des fonctions spéciales et elles sont anonymes car elles ne 
possèdent pas de nom

function (arguments) {
// Le code de votre fonction anonyme
}

Pour  appeler  la fonction
var sayHello = function() {
alert('Bonjour !');
l ('   ')
};
sayHello();// l’appel  à travers le nom de la variable
sayHello();// l
sayHello ();// l
();// l’appel  à travers le nom de la variable
appel  à travers le nom de la variable
08/12/2018
 DOM

Le Document Object Model (abrégé DOM) est une interface 
de programmation pour les documents XML et HTML.

Le DOM est donc une API qui s'utilise avec les 
documents XML et HTML, et qui va nous permettre, via 
, q p ,
le Javascript, d'accéder au code XML et/ou HTML d'un 
document

08/12/2018
 DOM

L'objet window
L objet window
L'objet window est ce qu'on appelle un objet global qui 
représente la fenêtre du navigateur  C'est à partir de cet 
représente la fenêtre du navigateur. C est à partir de cet 
objet que le Javascript est exécuté.

alert(text)
alert(window text);
alert(window.text);

08/12/2018
 DOM
L'objet window

• alert() n'est pas vraiment une fonction. Il s'agit en 
réalité d'une méthode appartenant à l'objet window.
pp j
Mais l'objet window est dit implicite, c'est‐à‐dire qu'il 
n'y a généralement pas besoin de le spécifier
y g p p

• Toutes les fonctions ne font pas nécessairement partie 
p p
de l'objet window. Ainsi, les fonctions comme isNaN(), 
p
parseInt() ou encore parseFloat() ne dépendent pas 
p p p
d'un objet. Ce sont des fonctions globales

08/12/2018
 Définition de styles
L'objet window
Remarqueq
Lorsqu’on déclare une variable dans le contexte global de  
script, cette variable deviendra une propriété de l'objet 
p, p p j
window. 
Exemplep
<script>
var text = 'Variable globale !';
f
function x() {
i   () {
var text1 = 'Variable locale !';
alert(text1); 
alert(window.text); 
}}</script>
/ p
08/12/2018
 DOM

L’objet  document
L'objet document est un sous‐objet de window, l
L bj t d t  t    bj t d   i d  l'un des 
 d  
p
plus utilisés. 
Il représente la page Web et plus précisément la balise 
<html>. 
Cet élément nous permet d accéder aux éléments HTML et 
Cet élément nous permet d’accéder aux éléments HTML et 
les modifier

08/12/2018
 DOM

A éd  
Accéder aux éléments
 élé

L'objet document possède trois méthodes principales :

getElementB Id()
getElementById(), getElementsB TagName()
getElementsByTagName() et
g
getElementsByName().
y ()

08/12/2018
 DOM
Accéder aux éléments:  getElementById()
Cette méthode permet d accéder à un élément en 
Cette méthode permet d'accéder à un élément en 
connaissant son ID qui est simplement l'attribut id de 
l élém
l'élém

08/12/2018
 DOM
Accéder aux éléments:  getElementById()
Cette méthode permet d accéder à un élément en 
Cette méthode permet d'accéder à un élément en 
connaissant son ID qui est simplement l'attribut id de 
l élément. 
l'élément. 
Exemple :
<div id
id="myDiv">
myDiv >
<p>Texte <a> lien</a></p>
</div>
<script>
var div = document.getElementById('myDiv');
 document.getElementById( myDiv );
alert(div);
</script>
08/12/2018
 DOM

Accéder aux éléments:  getElementsByTagName()

Cette méthode permet de récupérer, sous la forme d'un 
p p ,
tableau, tous les éléments de la famille. 
Exemple
var divs = document.getElementsByTagName(
 document getElementsByTagName('div');
div );
for (var i = 0, c = divs.length
( g ; i < c ; i++) {
){
alert('Element n° ' + (i + 1) + ' : ' + divs[i]);
}
08/12/2018
 DOM

Accéder aux éléments:  getElementsByName()
permet de ne récupérer que les éléments qui possèdent un
attribut name que vous spécifiez.
que  ous spécifie

08/12/2018
 DOM

Accéder aux éléments grâce aux technologies récentes
g g

querySelector() et querySelectorAll()

Ces deux méthodes prennent pour paramètre un
seul argument : une chaîne de caractères
l       h î  d   è
Cette chaîne de caractères doit être un sélecteur CSS 
comme ceux que vous utilisez dans vos feuilles de style. 
        ili  d    f ill  d   l  

08/12/2018
 DOM

querySelector() et querySelectorAll()
Exemple

<div id="menu">
<div
di class="item">
l "i "
<span>Élément 1</span>
<span>Élément 2</span>
Élé   /
</div>
<div
di class="publicite">
l " bli i "
<span>Élément 3</span>
08/12/2018

Élé   /
 DOM
#menu .item span > selecteur CSS
Le script relatif est :
var query = document.querySelector('#menu .item span'),
queryAll = document.querySelectorAll('#menu .item span');
alert(query.innerHTML); // Affiche : "Élément 1"
(q y ); ff
alert(queryAll.length); // Affiche : "2"
alert(queryAll[0].innerHTML
l ( All[ ] i HTML + ' ‐
 '  ' + queryAll[1].innerHTML); // 
'    All[ ] i HTML)  // 
Affiche : "Élément 1 ‐ Élément 2 »

08/12/2018
 DOM
Exemples
Exemple1
<body>
b d
<a id="myLink" href="http://www.telecom.com">Un lien
modifié dynamiquement</a>
<script>
var link = document.getElementById('myLink');
g y ( y );
var href = link.getAttribute('href'); // On récupère l'attribut « href »
alert(href);
li k
link.setAttribute('href', 'http://www.medecine.com'); 
A ib ('h f'  'h // d i ')  // On 
édite l'attribut « href »
</script>
/ p
</body>
08/12/2018
 DOM
Exemples
Exemple2
E l
<body>
<a id="myLink" href="http://www
<a id= myLink  href= http://www.telecom.com
telecom com">Un lien
>Un lien
modifié dynamiquement</a>
<script>
p
var link = document.getElementById('myLink');
var href = link.href; // On récupère l'attribut « href »
alert(href);
l (h f)
link.href = 'http:// www.medecine.com ‘;
</script>
</body>

08/12/2018
 DOM
Exemples
Exemple 3  Modification l
E l     M difi ti  l'attribut class d
tt ib t  l  d'un élément HTML
 élé t HTML
<head>
<style type= text/css >
<style type="text/css">
.blue {
background: blue;
g ;
color: white;
}</style> </head>
<body>
b d
<div id="myColoredDiv">
<p>Un peu de texte <a>et un lien</a></p></div>
<script>
g y y
document.getElementById('myColoredDiv').className = 'blue'
</script>
</body>
08/12/2018
 DOM

Le contenu : innerHTML
code HTML interne de l'élément (innerText
innerText ou textContent
ou textContent)
Exemple
<body>
<div id="myDiv">
y
<p>Merci d’avoir </p>
</div>
<script>
var div = document.getElementById('myDiv');
alert(div innerHTML);
alert(div.innerHTML);
</script>
/
</body>y

08/12/2018
 DOM
Les événements au travers du DOM
<html>
<head>
</head>
<body><input  id="clickme" value="cliquer ici"></span>
b d i   id " li k "  l " li  i i" /
</body>
<script>
p
var element = document.getElementById('clickme');
var myFunction = function() {
alert("Vous m'avez cliqué !");
l t("V   '   li é !")
}; element.addEventListener('click', myFunction, false);
</script>
p
</html>

08/12/2018
 DOM

Les évènements au travers du DOM
La méthode addEventListener() (qui ne fonctionne pas sous IE8),
prend trois paramètres :
Le nom de l'événement (sans les lettres « on ») ;
( );
La fonction à exécuter ;
Un booléen  que l'on utilise généralement la valeur false

08/12/2018
 Résumé

Le DOM va servir à accéder aux éléments HTML présents dans un

d
document fi de
afin d les
l modifier
difi et d'interagir
d'i i avec eux.

L'objet window est un objet global qui représente la fenêtre du

navigateur

L’objet document est un sous‐

sous‐objet de window et représente la
page Web.
Web Et grâce à lui peut accéder aux éléments HTML de la
page Web d'un élément.
08/12/2018
 Résumé

08/12/2018
 Résumé

Les éléments de la page sont structurés comme un arbre

généalogique, avec l'élément <html> comme élément fondateur.

Différentes méthodes, comme getElementById()

getElementById(),
getElementsByTagName(),
getElementsByTagName
g y g querySelector()
querySelector
(), q y () ou
querySelectorAll()
querySelectorAll(), sont disponibles pour accéder aux éléments.
Les attributs
b peuvent tous être modifiés
d f grâce à setAttribute
setAttribute()
b ().
().

08/12/2018
 Résumé

Quelques uns des objets souvent manipulés :
• navigator
 navigator : c
: c’est le logiciel client dont le nom est noté dans 
est le logiciel client dont le nom est noté dans 
navigator.appName
• window : l’objet de plus haut niveau créé par le navigateur, c’est sa 
fenêtre.
• location : c’est l’objet URL de la fenêtre courante.
• history
 hi : ce sont les URL précédemment visitées.
     l  URL  é éd   i ié
• document : il s’agit du document courant, dont les propriétés sont 
le titre, les couleurs (fond, texte, lien ...), les formulaires, les images 
08/12/2018
etc
 Résumé

Certains éléments possèdent des propriétés qui permettent de

modifier ces attributs :

‰ La propriété innerHTML permet de récupérer ou de

définir le code HTML présent à l'intérieur d'un élément.

‰ De leur côté,, textContent et innerText ne sont

capables que de définir ou récupérer du texte brut, sans
aucunes balises
b li HTML
HTML.
08/12/2018
 Résumé

08/12/2018