UNIVERSITE SULTAN MOULAY SLIMANE

ECOLE NATIONALE DES SCIENCES APPLIQUÉES

KHOURIBGA

Chap 3 :
JavaScript
Pr SAADI Mostafa
 Introduction
 Javascript est un langage de scripts coté client;
incorporé dans une page HTML, permet:

◦ d'améliorer la présentation et l'interactivité des pages Web.

◦ d’étendre les capacités du langage et rendre dynamique un site

internet développé en HTML.

◦ de développer de véritables applications fonctionnant

exclusivement dans le cadre d'Internet.
 Le Javascript est un langage de script simplifié orienté
objet, dont la syntaxe est basée sur celle du Java et C.

2
JavaScript
 JavaScript

◦ Langage de programmation lié à HTML.

◦ Code intégré aux pages HTML.
◦ Code interprété
 par le navigateur client. (interprétation dépendante du
type et de la version du navigateur).
 Code interprété coté serveur : node.js.
◦  code PHP (interprété du coté serveur).

3
JavaScript
◦ JavaScript est un langage:
 Prototypé: à prototype (par opposition à un
langage basé sur les classes et sous classes pour
réaliser l'héritage).
 tout objet JavaScript est doté d'une propriété
prototype, qui représente le modèle sur lequel
l'objet en question se base.
 Événementiel: association d’actions aux
événements déclenchés par l’utilisateur (passage
de la souris, clic, saisie clavier, etc...).
4
JavaScript
 Intérêts de JavaScript ?
◦ Supporté (par défaut) par les principaux navigateurs,
◦ Ne nécessite pas de plug-in particulier.
◦ Accès aux objets contenus dans un document HTML
(+ possibilité de les manipuler relativement facilement).
◦ Possibilité de mettre en place des animations sans
l’inconvénient des longs temps de chargement nécessités par les
données multimédia.
◦ Langage relativement sécurisé : il est impossible de lire ou
d’écrire sur le disque client (impossibilité de récupérer un virus
par ce biais).
 Arrivée d'AJAX, JQUERY, NodeJS, Angular

5
JavaScript
 Difficultés d’utilisation de JavaScript ?
◦ Comme pour HTML, il n’y a pas de standard pour l’accès
aux différents objets d’un document (dépendant du navigateur).
◦ Si le script ne fonctionne pas, la page est, le plus souvent,
inutilisable. Attention au menu non visible !
◦ Les utilisateurs peuvent empêcher l’exécution de code JavaScript,
souvent en raison des erreurs générées par les scripts, ou encore en
raison de la nature de l’interaction
(apparition de nouvelles fenêtres, …).
◦ Lenteur d’exécution des scripts, ainsi que pour les scripts
complexes, un certain délai avant le démarrage.

6
Les objets
 Un objet est un élément nommé ayant des:
◦ Propriétés : paramètres que vous vérifiez et
modifiez.
◦ Méthodes : actions que l’objet est capable
d’effectuer.
◦ Événements : choses qui arrivent à l’objet,
auxquelles celui-ci peut répondre
automatiquement par une action.

7
 Les événements

Action
Action Event
Event JavaScript
JavaScript DOM
DOM Réaction
Réaction

Identification d'une action Localise l'objet

concernant l'objet dans la page WEB La source de
L'utilisateur place Indique à l'objet ce l'image
la souris sur l'objet qu'il doit faire Change

8
 Les événements
im1 = new Image();
im2 = new Image();

im1.src = "image1.gif";
im2.src = "image2.gif";

function changeImage (nomIm,src)

{ Traite
Traitel'événement
l'événement
document.images[nomIm].src = src;
}
<A HREF="#"

onMouseover="changeImage('image1',im2.src)"
Associe un gestionnaire
onMouseout="changeImage('image1',im1.src)" > Associe un gestionnaire

<IMG NAME="image1" HEIGHT=150 SRC="image1.gif" WIDTH=150 BORDER=0>

</A>

9
 Les événements
 On évitera les écritures suivantes :
<a href="#" id="lien1"
onMouseover="changeImage('image1',im2.src
)"
<form method="post" … onsubmit='verifie()
';>
1. intrusion du comportement dans le contenu
2. impossibilité d'associer plusieurs
gestionnaires à un même événement

10
 Les événements
 On écrira les événement sous la forme
window.addEventListener('load',fonction,false);

function fonction(){
document.getElementById('lien1').addEventListener('mouseover',
verifie,false);
}

11
HTML et JavaScript
 HTML et JavaScript
 En HTML, il existe des mécanismes (on parle
de méthodes et de propriétés) qui permettent
de lire, modifier, mettre à jour et supprimer des
éléments du document examiné.

 Cetensemble de mécanismes est appelé DOM

(pour Document Object Model).

13
 HTML et JavaScript
 Élément SCRIPT
<HTML>
...
<SCRIPT language="JavaScript">
<!-- // Masquage du code pour les navigateurs
// ne supportant pas JavaScript

... code JavaScript ...

//--> // Fin de la partie cachée

</SCRIPT>
...

</HTML>

14
 HTML et JavaScript
 Place de l’élément SCRIPT
◦ Possibilité d'intégrer du code JavaScript :
 dans l’entête de la page.
 dans le corps de la page.
 Intégration dans un événement d'un objet de la page
◦ Sous la forme d’un couple attribut-valeur HTML :
 Attribut = événement déclencheur
 Valeur = code JavaScript déclenché

...
<FORM name="formulaire" onSubmit="maFonction()">
...

15
 HTML et JavaScript
 la page HTML devra TOUJOURS contenir les deux balises
spécifiques et indispensables

<script language="JavaScript">
............
</script>

 Le code JavaScript s’intègre de deux manière avec le code HTML

◦ 1. Insertion directe dans le code HTML
 Le code JavaScript s'insère le plus souvent dans la page HTML
elle même.

◦ 2. Insertion comme un module externe

16
 HTML et JavaScript
Insertion directe dans le code HTML

<!DOCTYPE html>
<html>
<head>
<title>Premier script JavaScript !</title>
<meta charset='utf-8'>
</head>
<body>
<script>
alert('Ceci est affiché en JavaScript !');
</script>
</body>
</html>

Rq le <script> juste avant la fermeture de </body>

17
 HTML et JavaScript
Code Javascript dans un fichier externe
Le code Javascript est écrit dans un fichier externe dont l'extension est .js
Dans le fichier HTML, on utilise la balise <script> et son attribut src=…
pour spécifier le fichier externe

18
 La structure d’un script en JavaScript
 La syntaxe du langage Javascript est similaire à Java, PHP et C
 Règles générales
Chaque commande doit être terminée par un point virgule (;).
Un nombre à virgule est séparé par un point (.) et non par une
virgule
Le langage Javascript est sensible à la casse
Groupement d’instructions
Accolades : { … instructions … }
Commentaire
◦ Sur une ligne : // … commentaire …
◦ Sur plusieurs lignes : /* …
commentaire
… */
19
 Interactivité de JavaScript
 3 types de boites de messages peuvent être affichés en utilisant
le Javascript : Alerte, Confirmation et Invite
◦ Méthode alert()
 sert à afficher à l’utilisateur des informations simples de type
texte. Une fois l’utilisateur lu le message, il doit cliquer sur OK
pour faire disparaître la boîte.
◦ Méthode confirm()
 permet à l’utilisateur de choisir entre les boutons OK et Annuler.
◦ Méthode prompt()
 La méthode prompt() permet à l’utilisateur de taper son propre
message en réponse à la question posée.
 La méthode document.write permet d’écrire du code HTML dans la
page WEB.

20
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Untitled Document</title>
<meta charset="UTF-8">
</head>
<title> une page simple </title> <body>
</head> <script language="javascript">
<body> console.log("bonjour console");
<script> </script>
Alert("Bonjour"); <script>
</script> alert(« Bienvenu dans ma page!");
</script>
console.log("bonjour console");
</body>
<script>
</html>
var user_name;
user_name = prompt("Quel est votre nom ? ");
document.write ("votre nom est : " + user_name );
</script> dossiers :
<script> js/console.html
if(confirm("Quel bouton allez-vous choisir ?")) js/methods/alert
document.location.href="http://localhost";
</script>
</body> 21
 JavaScript
Langage de programmation
 Les variables
 Déclaration et affectation
◦ Le mot-clé var permet de déclarer une ou plusieurs variables.
◦ Après la déclaration de la variable, il est possible de lui affecter une
valeur par l'intermédiaire du signe d'égalité (=).

//Déclaration de i, de j et de k.
var i, j, k;

//Affectation de i.
i = 1;
//Déclaration et affectation de prix.
var prix = 0;

//Déclaration et affectation des caractères

var caractere = ["a", "b", "c"];

23
 Les variables
 La portée

◦ les variables peuvent être globales ou locales.

◦ Une variable globale est déclarée en début de script et est

accessible à n'importe quel endroit du programme.

◦ Une variable locale est déclarée à l'intérieur d'une fonction et

n'est utilisable que dans la fonction elle-même.

24
 Les variables
 Contraintes concernant les noms de variables
◦ Les noms de variables ne peuvent contenir que des lettres,
chiffres, ou le caractère "_" (underscore)
 Mon_Prenom est un nom valide
◦ Les caractères spéciaux et accentués sont interdits (é, à, ç,
ï, etc..)
 Mon_Prénom n'est pas un nom valide. Il y a un caractère
accentué.
◦ Les majuscules et les minuscules ont leur importance.
 MonPrenom est différent de Monprenom.
◦ Un nom de variable ne peut contenir d'espaces.
 Mon Prenom n'est pas un nom de variable correct. Il y a un
espace.
◦ Les mots réservés de JavaScript ne peuvent être utilisés
comme noms de variables.
25
 Les variables
 Le type d’une variable dépend de la valeur stockée dans cette variable.
Pas de déclaration de type. Pas de typage (détection automatique par
l’interpréteur)

Exemple: var maVariable = ‘ test ’; maVariable =10;

 trois principaux types de valeurs

 String
 Number : 10^-308 <nombre < 10^308
 Les nombres entiers
 les nombres décimaux en virgule flottant
 3 valeurs spéciales :
 Positive Infinity ou +Infinity (valeur infini positive)
 Négative Infinity ou –Infinity (valeur infinie négative)
 Nan (Not a Number) habituellement générée comme résultat d’une opération
mathématique incohérente
 Boolean
 deux valeurs littérales : true (vrai) et false (faux).
26
Valeurs spéciales
 JavaScript inclut aussi deux types de données spéciaux :

 Null : possède une seule valeur, null, qui signifie l’absence

de données dans une variable

 Undefined : possède une seule valeur, undefined. Une

variable dont le contenu n’est pas clair car elle n’a jamais
stocké de valeur.

27
 Exemple: Déclaration de variables
<HTML>
<HEAD> <TITLE> Exemple </TITLE> </HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">

var prenom_visiteur=« Mohamed";

var nom_visiteur=« Amine";
var age_visiteur=29;

// utilisation
var accueil="Bonjour " + prenom_visiteur + " " + nom_visiteur;

document.write(accueil);

</SCRIPT>
</BODY>
</HTML>

28
Exemple ++ :
var total=0;
var factor=5;
var result=42;
var affiche="";

function compte(base,factor){
result = base * factor;
factor*=2;
var total = result +factor;
return total;
}// compte

affiche+= 'compte(5,4) = ' + compte(5,4);

affiche+= '\ntotal = ' +total+ '\n factor =' + factor +
'\nresult = ' +result;
alert(affiche);

29
Verification de type de variables par
usage de TYPEOF

Conversion de type de variables

Parseint()
Parsefloat()
String()

30
 JavaScript
et
Langage à objets
 Les objets en JavaScript
 Existence d’objets prédéfinis
◦ JavaScript intègre d'origine plusieurs type d'objets.
◦ Déclaration : utilisation de var.
◦ Création : utilisation du mot clé new, suivi du type d'objet.
 Exemple
◦ Objet Date, très utile dans un environnement Internet.
...
// création d’un objet Date contenant la date du jour.
var date_jour = new Date();
// création d’un objet Date avec paramètres
var une_date = new Date(annee,mois-1,jour,heure,min) ;
...

32
 Les objets en JavaScript
 Deux types d’objets
◦ Objets prédéfinis : Date, Math, Form …
◦ Objets propres
 Création d’objets propres
◦ Par appel d’une fonction qui va créer les propriétés de l’objet.
◦ Utilisation de this pour faire référence à l’objet courant
 Exemple
var mon_chien = new CreerChien("Milou","Fox Terrier")
function CreerChien(le_nom,la_race)
{ this.nom=le_nom;
this.race=la_race;
}

33
 Les objets en JavaScript
Il existe 2 façons pour créer des objets propres
1) En utilisant le mot clé Objet
var mon_objet = new Object();
mon_objet[‘proprièté’] = valeur;
mon_objet[‘méthode’] = function (arg1)
{suite d’instructions}

2) La notation latérale:
var mon_objet =
{ proprièté : valeur,
méthode : function (arg1)
{suite d’instructions}
}
34
 Les objets en JavaScript
Il existe 2 façons d’accéder aux objets
‘

<script>
‘
var voiture =
{
Couleur : 'bleu',
Demarrage : function()
{ return 'tourner la clé'; }
}
alert(voiture.demarrage() + ' pour demarrer la voiture ' + voiture.couleur + ' ' );
</script>

35
 Les objets en JavaScript
 Accès aux propriétés d’un objet
◦ Utilisation de la notion pointée : objet.propriété
 Possibilité de parcourir toutes les propriétés d'un objet

◦ Utilisation de la boucle : for (i in object) { ... object[i] ... }

◦ i = nom de la propriété, object[i] = valeur de la propriété
 Exemple

document.write(mon_chien.nom);

// parcours des propriétés de l'objet navigator

var object = window.navigator;
for(i in object)
{ document.write(i+" = "+object[i]+""); }

36
 Les objets en JavaScript
<HTML>
<HEAD>
<SCRIPT>
function CreerChien(le_nom,la_race)
{ this.nom=le_nom;
this.race=la_race;
}
var mon_chien = new CreerChien("Milou","Fox Terrier")
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
document.write("<b>"+mon_chien.nom +" </b><br>");

// parcours des propriétés de l'objet navigator

var object=window.navigator;
for(i in object)
{ document.write(i+" = "+object[i]+" <br>"); }
</SCRIPT>
</BODY>
</HTML>

37
 Les objets en JavaScript
 Déclaration de méthodes
◦ Association de fonctions dans la création de l’objet.
 Exemple
function CreerChien(le_nom,la_race)
{ this.nom=le_nom;
this.race=la_race;
this.Afficher=AfficherChien;
}

function AfficherChien()
{ document.write("Ce chien s'appelle "+this.nom
+". C'est un "+this.race+".");
}

38
 Les objets en JavaScript
 Alternative pour la déclaration de méthodes
◦ Méthode générique, déclenchable sur un objet quelconque.
 Exemple

function AfficherChien()
{
with(this)
{
document.write("Ce chien s'appelle "+this.nom
+". C'est un "+this.race+".");
}
}

39
 L’objet Date
 L’objet Date( ) : Objet très important, nous permet d’accéder à la date
système de l’utilisateur final.
 Déclaration var date= new Date( );
 Méthodes:

getDate( ): récupérer le numéro du jour du mois(de 1 à 31).

getDay( ): récupérer le numéro du jour de la semaine (de 0 à 6).
getMonth(): permet de récupérer le numéro du mois (de 0 à 11).
getYear(): permet de récupérer l’année (sur 4 chiffres).
getHours(): permet de récupérer l’heure (de 0 à 23).
getMinutes():permet de récupérer les minutes (de 0 à 59).
getSeconds():permet de récupérer les secondes (de 0 à 59).
 Les méthodes de l’objet Date( ) citées plus haut et qui commencent
avec “get” sont utilisées pour lire à partir d’une date donnée.
 Pour “ecrire” dans cette date on utilise d’autres méthodes qui
commencent par “set”. setDate(), setDay(), setMonth(), setYear(),
setMonth(), setMinutes(), setseconds()…
40
 L’objet Date
<!DOCTYPE html>
<html> <head>
<title>Le DOM HTML</title>
<meta charset="utf-8">
</head>
<body>
<script>
function horloge() {
document.getElementById('gros_titre').innerHTML=Date();
}
</script>

<h3 id ="tete" onMouseover ="horloge()">click ici un lien DATE</h3>

<h1 id="gros_titre">Le DOM</h1>

</body>
</html>

41
 L’objet Date
<!DOCTYPE html>
<html>
<head>
<title>Le DOM HTML</title>
<meta charset="utf-8">
</head>
<body>
<button id ="tete" >click ici un lien DATE</button>
<h1 id="gros_titre">Le DOM</h1>
<script>
var boutton=document.getElementById("tete");
boutton.addEventListener("click", horloge);

function horloge()
{
document.getElementById('gros_titre').innerHTML=Date();
}
</script>
</body>
</html>
42
 L’objet String
 Javascript offre deux façons pour traiter les chaînes de
caractères.
 La première en les considérant comme un type simple (le

type string)
 La deuxième utilise le modèle objet, on dispose pour cela

d’un objet nommé String() offrant des méthodes et des

propriété assez nombreuses.
 Déclaration:

var maChaine = new String()

 Propriétés:

length: renvoie la longueur de la chaîne.

43
 L’objet String
 Méthodes:
 charAt(p): on utilise cette méthode pour renvoyer le caractère de
la chaîne, sur laquelle la méthode est appelée, situé à la position
spécifiée en paramètre p.
 indexOf(string): cette méthode renvoie la position, dans la chaîne
de caractères sur laquelle la méthode est appelée, de la première
occurrence de la chaîne passée en paramètre.
 lastIndexOf(string): fonctionne de la même façon que la
précédente, à la différence que c’est l’indice de la dernière
occurrence qui sera renvoyé.
 substring(value1,value2): retourne la sous chaîne, commençant à
la position value1 et finissant à la position value2.
 toLowerCase(): met la chaîne considérée en minuscule.
 toUpperCase(): met la chaîne considérée en majuscule.
44
 L’objet String
<html>
<head>
</head>
<body>
<script language="javascript">
var S=new String();
S="JAVAscript est UN langage de scripts";
document.write("considerons la chaine suivante:"+S);
document.write("<br/> le caractere a la position 5 est:"+S.charAt(5));
document.write("<br/> le premier caractere de mot (script)
est:"+S.indexOf("script"));
document.write("<br/> la deuxieme position de mot
(script):"+S.lastIndexOf("script"));
document.write("<br/> la chaine entre les position 2 et 5 est:"+S.substring(2,5));
document.write("<br/> la chaine en majuscules:"+S.toUpperCase());
document.write("<br/> la chaine en minuscules:"+S.toLowerCase());
</script>
</body>
</html> 45
L’objet String

46
Exemple: Méthodes associées aux chaînes
 Conversions
◦ toUpperCase() : conversion en MAJUSCULES
◦ toLowerCase() : conversion en minuscules
◦ big(), blink(), bold(), fixed(), italics(), small(), sub(), strike(), sup(),
fontcolor(string couleur), fontsize(string taille) :
ajout de balises HTML de mise en forme
Exemple
var chaine="Exemple min/MAJ";
document.write(chaine.toUpperCase());
document.write(chaine.toLowerCase());
document.write(chaine.italics());
document.write(chaine.strike());
document.write(chaine.fontcolor("red"));
EXEMPLE MIN/MAJ
document.write(chaine.fontsize("+2"));
exemple min/maj
Exemple min/MAJ
Exemple min/MAJ
Exemple min/MAJ
Exemple min/MAJ 47
 L’objet Math
 L’objet Math()
Objet permet de faire les opérations mathématiques.
 Methodes:
Math.abs (value), Math.sin (value), Math.cos (value),
Math.tan (value), Math.acos (value), Math.asin (value),
Math.atan (value), Math.PI, Math.e, Math.log(value),
Math.max(value1,value2), Math.min(value1,value2),
Math.pow(value,exponent), Math.Random(), Math.sqrt(value)

48
Fonctions mathématiques
 Principe général
◦ Appel des méthodes de l’objet Math
 Listes des méthodes
◦ abs(x), acos(x), asin(x), atan(x), cos(x), ln(x), log(x), round(x),
sin(x), sqrt(x), tan(x) : applique la fonction appropriée à x
◦ ceil(x) : renvoie le plus petit entier supérieur ou égal à x
◦ exp(x) : renvoie e (exponentielle) à la puissance x
◦ floor(x) : renvoie le plus grand entier inférieur ou égal à x
◦ max(x,y) : renvoie la plus grande des valeurs de x et y
◦ min(x,y) : renvoie la plus petite des valeurs de x et y
◦ pow(x,y) : renvoie x à la puissance y
◦ random(x) : renvoie un nombre aléatoire compris entre 0 et 1

49
Fonctions mathématiques
 Exemple
document.write(Math.random());
document.write(Math.min(5,4));
document.write(Math.exp(1));
document.write(Math.ceil(2.2));
document.write(Math.floor(2.2));
document.write(Math.round(2.2));
document.write(Math.pow(2,3));
.8012453357071934
4
2.718281828459045
3
2
2
8

50
 Exemple: L’objet Math
<html>
<head>
<title> test tableau </title>
</head>
<body>
<SCRIPT language=javascript>
document.write("La racine de 15 est
"+Math.sqrt(15));
document.write("<br> La valeur de
PI"+Math.PI);
document.write("<br> Le cosinus de PI/$ est
+Math.cos((Math.PI)/4));
</SCRIPT>
</body>
</html>

51
 Les Objets prédéfinis
◦ Les objets de JavaScript, sont soit des entités prédéfinies du langage,
soit créés par le programmeur.
 Par exemple, le navigateur est un objet qui s'appelle "navigator".
 La fenêtre du navigateur se nomme "window"
 La page HTML est un autre objet, que l'on appelle "document".
 Un formulaire à l'intérieur d'un "document", est aussi un objet.
 Un lien hypertexte dans une page HTML, est encore un autre objet.
Il s'appelle "link". etc...

◦ Accès aux propriétés d’un objet

 voiture.couleur.value
 voiture.couleur.value = verte

52
 Les objets prédéfinis
 Lors de chargement du navigateur, un certain nombre
d’objets, appelés objets du navigateur sont automatiquement
créés et sont prêts à être utilisés.

53
 Les objets du navigateur
◦ L'objet le plus haut dans la hiérarchie est window qui
correspond à la fenêtre même du navigateur.
◦ L'objet document fait référence au contenu de la fenêtre.
◦ document regroupe l'ensemble des éléments HTML
présents sur la page. Pour atteindre ces différents
éléments, nous utiliserons :
 soit des méthodes propres à l'objet document, comme la méthode
getElementById( ), qui permet de trouver l'élément en fonction
de son identifiant (ID);
 soit des collections d'objets qui regroupent sous forme de
tableaux Javascript tous les éléments de type déterminé.

54
 L’objets window
 L'objet window est l'objet par excellence dans Javascript, car il est le
parent de chaque objet qui compose la page web. il représente la
fenêtre de navigation.

Propriétés:
status : il définit le message qui s’affiche sur la barre d’état de la
fenêtre.

Méthodes :
◦ open(String url [, String nom] [, String options] ):
cette méthode permet de créer dynamiquement une nouvelle
fenêtre. Elle retourne une valeur qui est un objet sous forme de
fenêtre.

55
 L’objet window
<html>
<head>
<title> test tableau </title>
</head>
<body>
<SCRIPT language="javascript">
function ouvre_popup(page)
{
window.open(page,"nom_popup","menubar=no, status=no, scrollbars=no,
width=200, height=100");
}
</SCRIPT>
<A href="javascript:ouvre_popup('chaine.htm')">Ouverture d'un popup</A>
</body>
</html>

56
L’objet window

57
 L'objet document
 Cet objet représente le document de la page web. A partir de
cet objet on peut accéder aux différents éléments de la page.
Par exemple, à partir de l’objet document on peut accéder aux
objets images[], links[], forms[] que nous étudierons dans la
suite.
 Méthodes :
◦ close( ) : ferme le document après la fin de l’écriture;
◦ open( ) : ouvre le document pour l’écriture;
◦ write( ) : écrit dans le document;
◦ writeln( ) : écrit dans le document et effectue un retour à la
ligne.

58
 L’objet form
 Il correspond à l’élément HTML <form>.
 Les propriétés :
◦ name : correspond à l’attribut name de la balise <form>.
◦ action : contient l’adresse du scripte à exécuter lors de l’envoi
du formulaire.
◦ methode : méthode d’envoi du formulaire (=get ou =post)

 Méthodes:
◦ submit: déclanche l’envoi du formulaire. (simule le click sur le
bouton d’envoi)
◦ reset : réinitialise le formulaire. (simule le click sur le bouton
réinitialisation)

59
 L’objet form
 Événements:
◦ OnSubmit: cet événement survient lors de l’envoi du
formulaire. Il permet de programmer des actions de
contrôle du formulaire avant de l’envoyer au serveur.

◦ onReset : cet événement survient lors du click sur le

bouton de réinitialisation du formulaire.

60
JavaScript
et
Tableaux
Déclaration et création de tableaux
 Objet Array
◦ Déclaration par l’utilisation de var.
◦ Le premier élément du tableau est indexé à 0.
◦ Il est possible de déclarer un tableau sans dimension fixée.
La taille du tableau s'adapte en fonction du contenu.
 Exemple
...
// création d’un tableau de 10 éléments de type
// basique (réel, entier, chaîne de caractères)
var un_tableau = new Array(10) ;

// création d’un tableau

var un_autre_tableau = new Array;
...

62
 L’objet Array
 Déclaration:
pour déclarer une variable de type tableau on peut choisir entre ces trois
méthodes:
var monTableau1 = new Array(7);
var monTableau2 = new Array;
var monTableau1 = new Array(“A”, “B”,“C”,“D”, “F” );

La première méthodes est utilisée pour déclarer le tableau monTableau1.

C’est un tableau à 7 éléments (la taille est fixée dés le début).
La deuxième méthode crée un tableau à taille variable.
La troisième méthode permet d’initialiser le tableau dés sa création.

 Propriétés:
length: cette propriété donne la taille du tableau.

63
 L’objet Array
<body>
<h1>Les tableaux</h1>
<script>
var prenoms=['Ali', 'Saad', ‘Mona', ‘Sara'], p = '';

//On ajoute les valeurs Karim et Rajae en fin de

tableau
var ajout= prenoms.push('Karim', 'Rajae');

//On affiche les valeurs de notre tableau

for(var i = 0; i < prenoms.length; i++)
{ p += 'Prénom n°' + (i+1) + ' : ' +
prenoms[i] + '\n’; }
//On affiche la taille du tableau et les prénoms

alert('Le tableau contient ' +ajout+ ' éléments : \n\

//On supprime la dernière valeur du tableau
n' +p);
var suppr
</script> </body>= prenoms.pop();
//On affiche les prénoms du tableau et le prénom supprimé
alert(p + '\n\nNous avons supprimé ' +suppr+ ' du tableau'); 64
Utilisation de tableaux
 Accès aux éléments d’un tableau
◦ Utilisation des crochets : [ ]
...
var tableau = new Array;
tableau[0]=10;
tableau[9]=5;
...
 Propriétés de l’objet
...
// obtention du nombre d'éléments de un_tableau
var dimension=un_tableau.length;
...

65
Tableaux associatifs
 Principe
◦ L’indice est une chaîne de caractères
 Exemple
◦ Chargement d’une page HTML en fonction du jour de la semaine
...
var tab = new Array;
tab["Lundi"] ="semaine.html";
tab["Mardi"] ="semaine.html ";
tab["Mercredi"] ="enfant.html";
tab["Jeudi"] ="semaine.html";
tab["Vendredi"] ="semaine.html";
tab["Samedi"] ="weekend.html";
tab["Dimanche"] ="weekend.html";
...

66
 Tableaux d’objets
 Principe
◦ Array permet de stocker des objets de n’importe quel type :
 atomique : entier, réel, chaîne de caractères, …
 prédéfini : Date, …
 défini dans le code JavaScript, … cf. plus loin
 Exemple
var animaux = new Array;
// création de plusieurs instances d’Animal
var milou = new Animal("Milou","Chien");
var titi = new Animal("Titi","Canari");

// stockage d’instances d ’Animal dans un tableau

animaux[0]=milou;
animaux[1]=titi;
animaux[2]=new Animal("Rominet","Chat");
67
 Tableaux multi-dimensionnels
 Principe
◦ Array permet de stocker des objets, donc des tableaux.
 Exemple
...
var row0=new Array; row0[0]="O"; row0[1]="X"; row0[2]=" ";
var row1=new Array; row1[0]="X"; row1[1]="O"; row1[2]="X";
var row2=new Array; row2[0]=" "; row2[1]="0"; row2[2]="X";

var morpion=new Array;

morpion[0]=row0; morpion[1]=row1; morpion[2]=row2;
...
morpion[1][2]="X";
...

68
Exemple d’utilisation de tableaux
 Affichage de la date du jour
<HTML>
<HEAD> <TITLE> Exemple Date </TITLE> </HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var dt=new Date;
var jour=dt.getDay( ); // renvoi un jour [0..6]
var numero=dt.getDate( ); // renvoi le numéro dans le mois
var mois=dt.getMonth( ); // renvoi le mois [0..11]

var tab_jour=new Array("Dimanche","Lundi","Mardi",

"Mercredi","Jeudi","Vendredi","Samedi");
var tab_mois=new Array("Janvier","Février","Mars","Avril","Mai",
"Juin","Juillet","Août","Septembre",
"Octobre","Novembre","Décembre");

document.write("Nous sommes le "+tab_jour[jour]+" "

+numero+" "+tab_mois[mois]);

</SCRIPT>
</BODY>
</HTML>

69
Structures
de contrôle
Test conditionnel : if … else …
 But
◦ Permet de diriger l’exécution du script selon des conditions.

 Exemple
<SCRIPT language="JavaScript">
...
if(age<18) { alert("Vous devez être majeur");
window.location="mineur.php3";
}
else { window.location="majeur.php3";
}
...
</SCRIPT>

71
 Boucle itérative : for …
 But
◦ Répéter des instructions un nombre déterminé de fois.
 Syntaxe
◦ for(initialisation ; condition ; opération )
{ ... instructions ... }
 Exemple
var somme=0;
for( var i=1 ; i<=10 ; i++ )
{ somme += i; // équivalent à somme = somme +i;
} i++
... +=

Notations abrégées à la C
72
 Boucle conditionnelle : while …
 But
◦ Répéter des instructions tant qu’une condition est VRAIE.
 Syntaxe
◦ while(condition) { ... instructions ... }
 Exemple

function demander()
{ var nb=0;
while(nb<=100)
{ nb = prompt("Entrez un nombre supérieur à 100");
}
alert("Merci !");
}

73
Les Fonctions
 Fonctions
<!DOCTYPE html>
Une fonction correspond à un <html>
<head>
bloc de code pour effectuer une
<title>Les fonctions en JavaScript</title>
tâche précise. <meta charset="utf-8">
</head>
<body>
La fonction alert() a été créée <h1>Les fonctions</h1>
afin d’afficher des messages <script>
dans des boîtes de dialogue. function multiplication(x, y) {
return x * y ;
}

var resultat = multiplication(5, 10);

resultat += 2
alert(resultat);
</script>
</body>
</html>
75
Fonctions
 Emplacement de la déclaration
◦ Dans l'entête de la page
◦ Utilisation de la syntaxe :
◦ function nom_fonction([param1, …])
 Corps de la fonction
◦ Délimité par { … }
◦ Contenu :
 déclaration des variables locales, propres à la fonction,
 instructions réalisés par la fonctions,
 instruction return pour renvoyer une valeur ou un objet
(cette instruction n’est pas obligatoire  fonction qui ne renvoie pas
de valeur)

76
Fonctions
 Appel de fonction
◦ Peut avoir lieu à n'importe quel endroit de la page :
 dans d'autres fonctions,
 dans le corps de la page.
◦ Utilisation de : nom_fonction([param1, … ]);
<HTML>
<HEAD> <SCRIPT>// déclaration de fonction
function bonjour(nom) {
document.write("Bonjour ", nom);}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT> bonjour("M. Khalid");</SCRIPT>
</BODY>
</HTML>

77
 Fonctions
<HTML>
<HEAD>
<SCRIPT>// déclaration de fonctions
function volumeSphere(rayon) {
return 4/3*Math.PI*Math.pow(rayon,3);
}
function calculerPrix(PrixUnitaire, NbArticles) {
return PrixUnitaire* NbArticles;
}
</SCRIPT>
</HEAD>
<BODY> <SCRIPT>// appels des fonctions
document.write("Tu dois payer ",
calculerPrix(150,4)," DHs.<BR>");
document.write("Le volume d’une sphère de rayon 1
est ",
volumeSphere(1),"<BR>" );
</SCRIPT>
</BODY>
</HTML>
78
Fonctions
<HTML>
<HEAD> <SCRIPT>// déclaration de fonctions
function volumeSphere(rayon)
{ return 4/3*Math.PI*Math.pow(rayon,3); }

function calculerPrix(PrixUnitaire, NbArticles)

{ return PrixUnitaire* NbArticles; }
</SCRIPT>
</HEAD>
<BODY> <SCRIPT>// appels des fonctions
document.write("Tu dois payer ",
CalculerPrix(150,4)," DHs.<BR>");
document.write("Le volume d’une sphère de rayon 1
est ", volumeSphere(1),"<BR>"
);
</SCRIPT>
</BODY>
</HTML>

79
Fonctions
<HTML>
<HEAD> <SCRIPT>// déclaration de fonctions
function volumeSphere(rayon)
{ return 4/3*Math.PI*Math.pow(rayon,3); }

function calculerPrix(PrixUnitaire, NbArticles)

{ return PrixUnitaire* NbArticles; }
</SCRIPT>
</HEAD>
<BODY> <SCRIPT>// appels des fonctions
document.write("Tu dois payer ",
CalculerPrix(150,4)," DHs.<BR>");
document.write("Le volume d’une sphère de rayon 1
est ", volumeSphere(1),"<BR>"
);
</SCRIPT>
</BODY>
</HTML>
80
Fonctions: JavaScript *console
<HTML>
<HEAD> <SCRIPT>// déclaration de fonctions
function volumeSphere(rayon)
{ return 4/3*Math.PI*Math.pow(rayon,3); }

function calculerPrix(PrixUnitaire, NbArticles)

{ return PrixUnitaire* NbArticles; }
</SCRIPT>
</HEAD>
<BODY> <SCRIPT>// appels des fonctions
document.write("Tu dois payer ",
CalculerPrix(150,4)," Euros.<BR>");
document.write("Le volume d’une sphère de rayon 1
est ", volumeSphere(1),"<BR>"
);
</SCRIPT>
</BODY>
</HTML>

81
Les fonctions prédéfinies
 isFinite
◦ Détermine si le paramètre est un nombre fini. Renvoie false si
ce n'est pas un nombre ou l'infini positif ou infini négatif.
isFinite(240) //retourne true
isFinite("Un nombre") //retourne false

 isNaN
◦ Détermine si le paramètre n’est pas un nombre (NaN : Not a
Number).
isNaN("un nombre") //retourne true
isNaN(20) //retourne false

82
Les fonctions prédéfinies
 parseFloat
 analyse une chaîne de caractères et retourne un nombre
décimal.
 Si l'argument évalué n'est pas un nombre, renvoie NaN (Not
a Number).
var numero="125";
var nombre=parseFloat(numero); //retourne le nombre 125
 parseInt
 analyse une chaîne de caractères et retourne un nombre
entier de la base spécifiée.
 La base peut prendre les valeurs: 16 (hexadécimal), 10
(décimal), 8 (octal), 2 (binaire).
var prix=30.75;
var arrondi = parseInt(prix, 10); //retourne 30
83
Fonctions mathématiques
 Principe général
◦ Appel des méthodes de l’objet Math
 Listes des méthodes
◦ abs(x), acos(x), asin(x), atan(x), cos(x), ln(x), log(x), round(x),
sin(x), sqrt(x), tan(x) : applique la fonction appropriée à x
◦ ceil(x) : renvoie le plus petit entier supérieur ou égal à x
◦ exp(x) : renvoie e (exponentielle) à la puissance x
◦ floor(x) : renvoie le plus grand entier inférieur ou égal à x
◦ max(x,y) : renvoie la plus grande des valeurs de x et y
◦ min(x,y) : renvoie la plus petite des valeurs de x et y
◦ pow(x,y) : renvoie x à la puissance y
◦ random(x) : renvoie un nombre aléatoire compris entre 0 et 1

84
Fonctions mathématiques
 Exemple

document.write(Math.random());
document.write(Math.min(5,4));
document.write(Math.exp(1));
document.write(Math.ceil(2.2));
document.write(Math.floor(2.2));
document.write(Math.round(2.2));
document.write(Math.pow(2,3));

.8012453357071934
4
2.718281828459045
3
2
2
8
85
Programmation événementielle
Déclenchement d’instructions JavaScript

 Programmation événementielle
◦ JavaScript = langage réactif
◦ L’interaction avec l’utilisateur est gérée via des
événements

◦ Événement = tout changement d’état du navigateur

 Production d’événement
◦ Déclenché par l’utilisateur ou par le code JavaScript

87
Déclenchement d’instructions JavaScript
 Récupération des événements
◦ Gestionnaire d’événement qui associe une action (fonction
JavaScript) à la détection d’événement
 Événements détectables
◦ Nom de l’événement précédé de on :
onBlur, onChange, onClick, onFocus, onLoad, onMouseover,
onSelect, onSubmit, onUnload
 Association événement - action
◦ Dans le code HTML, identique à la déclaration d ’une propriété :
◦ <nom_élément attributi = propriétéi
événementj = "actionj" >

88
 Déclenchement d’instructions JavaScript
 Événements JavaScript
◦ blur : le focus est enlevé d’un objet
◦ change : la valeur d ’un champ de formulaire à été
modifiée par l’utilisateur
◦ click : un clic souris est déclenché sur un objet
◦ focus : le focus est donné à un objet
◦ load : la page est chargée par le navigateur
◦ mouseover : la souris est déplacée sur un objet
◦ select : un champ de formulaire est sélectionné (par
clic souris ou tabulation)
◦ submit : un formulaire est soumis
◦ unload : l’utilisateur quitte la page

89
 Les événements et les fonctions
◦ Javascript est dépendant des événements
 se produisent lors d'actions diverses sur les objets d'un
document HTML.
 onLoad;
 onClick
 onMouseover
 onMouseout
 ...

◦ Il est possible de lier l’exécution de fonctions à des

événements

90
 Les événements
 Evénement onLoad
 Se produit lorsque une page web est chargée dans la fenêtre du
navigateur
 Toute la page (y compris les images qu’elle contient si leur
chargement est prévu) doit avoir été chargée pour qu’il ait lieu.
 Cet événement peut être associé à une image seulement ; auquel
cas, il se produit une fois son chargement terminé
<HTML>
<BODY onLoad="alert('page chargée');">
Exemple de l'événement onLoad
</BODY>
</HTML>

91
 Les événements
 Événement onClick
 Se produit lorsque l’utilisateur clique sur un élément spécifique
dans la page, comme un lien hypertexte, une image, un bouton,
du texte, etc.
 Ces éléments sont capables de répondre séparément à cet
événement
 Il peut également être déclenché lorsque l’utilisateur clique
n’importe où sur la page s’il a été associé non pas à un élément
spécifique, mais à l’élément body tout entier
<HTML>
<BODY>
<INPUT TYPE="Button" Value="cliquer ici”
onClick="alert('Clic')">
</BODY>
</HTML>
92
 Les événements
 Événement onMouseover
 Analogue à onClick sauf qu’il suffit que l’utilisateur place le
pointeur de sa souris sur l’un des éléments (lien hypertexte,
image, bouton, texte, etc.) pour qu’il ait lieu

 Événement onMouseout
 A l’inverse de onMouseover, cet événement se produit lorsque
le pointeur de la souris quitte la zone de sélection d’un
élément.

93
 Exemple: Changement d'images
Avec le gestionnaire d'événement onMouseover, on peut prévoir qu'après le survol
d'une image par l'utilisateur, une autre image apparaisse
<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript">
function lightUp() {
document.images["homeButton"].src="button_hot.gif"
}
function dimDown() {
document.images["homeButton"].src="button_dim.gif"
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onMouseover="lightUp();" onMouseout="dimDown();">
<IMG SRC="button_dim.gif" name="homeButton" width=100 height=50 border=0>
</A>
</BODY>
</HTML>
94
 Modèle
Objet de
Document
DOM
Définition
 Le modèle d'objet du document donne une
représentation en mémoire des objets du document.
 Un objet est un élément HTML qui a été défini par un

ID ou un nom.
 Le DOM est l'adresse par laquelle vous pouvez localiser

un objet de la page HTML.

 Les objets de la page peuvent être identifié par un

attribut de nom ou d'ID qui lui donne son adresse unique
et en fait un objet.

96
Adresse de l'objet
 Le DOM décrit le chemin partant de la fenêtre du
navigateur pour descendre jusqu'aux objets de la page
Web.

 Le DOM est structuré comme un arbre est suit de près

la structure hiérarchique du code HTML.

 L'arbre contient des nœuds, les nœuds peuvent avoir

des fils, et tous les nœuds ont un parent (sauf la racine).

97
Le DOM HTML
 Document Object Model
 Le DOM est une interface de programmation qui
nous permet de manipuler le code HTML d’une page de
façon dynamique en utilisant le langage JavaScript.

 Le DOM HTML est un standard de programmation

reconnu par tous les navigateurs et considère les
éléments HTML comme des objets. Ainsi, nos éléments
HTML vont posséder des propriétés et des méthodes.

98
Le DOM HTML

99
Inspector DOM : Chrome

10
0
 Node (Nœud)
 C'est une des interfaces incontournable du modèle.
 Les différents types de nœuds reflètent les différentes

catégories de balisage d'un document : éléments, attributs,

commentaires, textes.
 Tous ces types de nœuds partagent un ensemble de

propriétés et fonctions héritées de leur type générique : le

nœud.
Ainsi, toutes les interfaces sur les nœuds disposent des
propriétés et méthodes de Node.

10
1
Propriétés de parcours du DOM
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
<h1 id="header">Les l&eacute;gumes<br></h1>
<ul>
<li id="a">Artichaud</li>
<li id="n">Aubergine</li>
<li id="c">carotte </li>
<li id="m">Mangue</li>
<li id="p">pomme de terre </li>
</ul>
</body>
</html>

10
2
Propriétés de parcours du DOM

10
3
Propriétés de parcours du DOM
Body
Body

text
text H1
H1 text
text UL
UL text
text

text
text LI
LI text
text LI
LI text
text LI
LI text
text Li
Li text
text LI
LI text
text

10
4
Propriétés de parcours du DOM
Propriété description

parentNode le nœud père

childnodes nœud fil du nœud courant

firstChild le premier nœud fil

lastChild le dernier nœud

previousSibling le nœud frère précèdent

nextSibling nœud frère suivant

10
5
Propriétés de parcours du DOM
Body
Body

text
text H1
H1 text
text UL
UL text
text

text
text LI
LI text
text LI
LI text
text LI
LI text
text Li
Li text
text LI
LI text
text

header.nextSibling.nodeType == Node.TEXT_NODE

legumes.childsNodes.length == 11

n.parentNode.previousSibling.nodeName == #text

10
6
 Propriétés de parcours du DOM
<body>
<SCRIPT LANGUAGE=JavaScript>
<!--
window.onload=function(){
var el=document.getElementById("n");
alert(el.firstChild.nodeValue);
alert(el.parentNode.previousSibling.nodeName);
}
//-->

10
7
Modèle Objet de Document (DOM)
 DOM

◦ Modèle associé à l’environnement client

 But

◦ Permettre la manipulation des objets :

 de l’interface
 du document
◦ (objets créés automatiquement par le
navigateur)
 Types d’objets
◦ Window, Document, Form, Browser , ...
10
8
Propriétés de noeud
 nodeName : le nom (par exemple #text)
 nodeType : valeur numérique souvent à comparer avec

les constantes
◦ 1 = Node.ELEMENT_NODE
◦ 2 = Node.ATTRIBUTE_NODE
◦ 3 = Node.TEXT_NODE
 nodeValue : la valeur !

10
9
 Parcourt dans le DOM
function getInnerText(node) {
var result = '';
if (Node.TEXT_NODE == node.nodeType)
return node.nodeValue;
if (Node.ELEMENT_NODE != node.nodeType)
return '';
for (var index = 0; index < node.childNodes.length; ++index)
result += getInnerText(node.childNodes.item(index));
return result;
} // getInnerText

11
0
Le DOM HTML
 L’objet document et ses méthodes

 Il existe différentes méthodes de l’objet Document qui

constituent autant de façons différentes d’accéder à un ou
plusieurs éléments HTML :
◦ La méthode getElementById() ;
◦ La méthode getElementsByTagName() ;
◦ La méthode getElementsByClassName() ;
◦ La méthode querySelector() ;
◦ La méthode querySelectorAll().

11
1
 Le DOM HTML
La méthode getElementById() de l’objet document

La première méthode, getElementById(), va nous permettre de cibler un élément HTML

possédant un attribut id en particulier.

<body>
<h1 id="gros_titre">Le DOM</h1>
<p>Du texte et <a href="http://localhost">un lien</a></p>
<script>
/*On utilise la méthode getElementById de
l'objet document.
*On enferme le résultat renvoyé dans
une variable "titre" */
var titre = document.getElementById('gros_titre');
alert(titre);
</script>
</body>

var titre = document.getElementById('gros_titre').style.color = "red"; 11

2
 Le DOM HTML
innerHTML
Accéder au contenu des éléments HTML et au texte
On utilise la propriété innerHTML sur le résultat renvoyé par les méthodes
<body>
<h1 id="gros_titre">Découverte du DOM HTML</h1>
<p class="para">Du texte et <a href="http://localhost">un lien</a></p>
<p class="para">Un deuxième paragraphe</p>

<script>
var h = document.getElementById('gros_titre').innerHTML;
alert(h);
</script>
</body>
</html>

var h = document.getElementById('gros_titre').innerHTML= "Hello World";

11
3
 Le DOM HTML
textContent
Accéder directement à des types d’éléments
<body>
<h1 id="gros_titre">Le DOM</h1>
<p class="para">Du texte et <a href= »localhost">un lien</a></p>
<p class="para">Un deuxième paragraphe</p>
<script>
/*La différence entre innerHTML et textContent*/
var p = document.querySelector('.para').innerHTML;
var t = document.querySelector('.para').textContent;

alert('Contenu récupéré avec innerHTML : \n' + p +

'\n\nContenu récupéré avec textContent : \n' + t);
</script>

11
4
 Le DOM HTML
Accéder directement à des types d’éléments
<body>
<h1 id="gros_titre">Le DOM</h1>
<p class="para">Du texte et <a href="http://localhost">un lien</a></p>
<p class="para">Un deuxième paragraphe</p>
<script>
var titre_page = document.title;
var page = document.body;
var lien = document.links;

alert('Contenu de titre_page : ' + titre_page +

'\nContenu de page : ' + page +
'\nContenu de lien : ' +lien);
</script>

11
5
Le DOM HTML
Modifier du contenu HTML

//modifier le contenu textuel de notre élément h1 avec innerHTML

document.getElementById('gros_titre').innerHTML = 'Titre modifié !';
// modifier le CSS
document.getElementById('gros_titre').style.color = ’red';

Créer, ajouter et insérer des éléments HTML

Modifier ou supprimer des éléments HTML

Naviguer dans le DOM

11
6
Le DOM HTML

11
7
Le DOM HTML

11
8
 DOM : objet Window
 Propriétés
◦ frames[ ] : tableau de frames
◦ frames.length : nombre de frames
◦ self : fenêtre courante

◦ opener : la fenêtre (si elle existe) qui a ouvert la

fenêtre courante
◦ parent : parent de la fenêtre courante, si la
fenêtre courante est une sous-partie d’un frameset
◦ top : fenêtre principale (qui a crée toutes les
fenêtres)
◦ status : message dans la barre de statut
◦ defaultstatus : message par défaut de la barre de statut
◦ name : nom de la fenêtre
11
9
 DOM : objet Window
 Méthodes
◦ alert(string) : ouvre une boîte de dialogue avec le
message passé en paramètre
◦ confirm : ouvre une boîte de dialogue avec les
boutons OK et cancel
◦ blur() : enlève le focus de la fenêtre
◦ focus() : donne le focus à la fenêtre
◦ prompt(string) : affiche une fenêtre de saisie
◦ scroll(int x, int y) : positionnement aux coordonnées (x,y)
◦ open(URL, string name, string options) : ouvre une nouvelle fenêtre
contenant le document identifié par l’URL
◦ close() : ferme la fenêtre

12
0
DOM : objet Document
 Propriétés
◦ title : titre du document
◦ location : URL du document
◦ lastModified : date de dernière modification

◦ referrer : URL de la page d’où arrive l’utilisateur

◦ bgColor : couleur de fond

◦ fgColor : couleur du texte
◦ linkColor
vlinkColor couleurs utilisées pour les liens hypertextes
alinkColor

12
1
 DOM : objet Document
 Propriétés
◦ forms[ ] : tableau des formulaires de la page
◦ forms.length : nombre de formulaire(s) de la page
◦ links[ ] : tableau des liens de la page
◦ links.length : nombre de lien(s) de la page
◦ anchors[ ] : tableau des ancres internes (<A NAME= …>)
◦ anchors.length : nombre de d’ancre(s) interne(s)
◦ images[ ]
◦ applets[ ] tableaux des images, applets et plug-ins
◦ embeds[ ]

◦ Remarque : les tableaux contiennent les éléments dans l’ordre de

leur apparition dans le code HTML

12
2
DOM : objet Document
 Méthodes
◦ write(string) : écrit une chaîne dans le document
◦ writeln(string) :idem + caractère de fin de ligne
◦ clear() : efface le document
◦ close() : ferme le document

12
3
 DOM : objet Form
 Propriétés
◦ name : nom (unique) du formulaire
◦ method :méthode de soumission (0=GET,1=POST)
◦ action :action déclenchée par la validation du formulaire
◦ target : fenêtre de destination de la réponse
(si elle existe)
◦ elements[ ] : tableau des éléments du formulaires
◦ length : nombre d’éléments du formulaire

12
4
 DOM : objet Form
 Méthodes
◦ submit() : soumet le formulaire
◦ reset() : ré-initialise le formulaire

 Événements
◦ onSubmit(method) : action à réaliser lorsque le
formulaire est soumis
◦ onReset(method) : action à réaliser lorsque le
formulaire est ré-initialisé

12
5
 DOM : objet Navigator
 Propriétés
◦ appCodeName : nom de code interne du navigateur
◦ appName : nom réel du navigateur
◦ appVersion : version du navigateur
◦ userAgent : objet complexe contenant des détails sur :
 l’appCodeName,
 l’appVersion
 le système d’exploitation utilisé
◦ plugins[] : tableau des plugins installés chez le client
◦ mimeType[] : tableau des types MIME supportés par le
navigateur

12
6
DOM : objet Navigator
 Méthodes

◦ javaEnabled : retourne TRUE si le navigateur

supporte Java (et que l’exploitation de Java est
actif)

12
7
 Exemples d’utilisation du DOM
 Exemple de formulaire

<FORM name="general">
<INPUT type="text" name="champ1" value="Valeur initiale">
</FORM>

 Accès à l’objet correspondant au formulaire précédent

◦ 3 possibilités :

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

12
8
Exemples d’utilisation du DOM
 Accès aux éléments du formulaire
◦ 3 possibilités :

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

 Accès aux propriétés d’un élément

document.forms["general"].elements["champ1"].value

12
9
Exemples d’utilisation du DOM
 Appeler une méthode sur un objet
◦ Pour donner le focus, par exemple :

document.forms["general"].elements["champ1"].focus();

 Associer une action à un événement

<FORM name="changer">
<INPUT type="text" name="zonetexte"
value="Valeur initiale">
<INPUT type="button" value="Changer la valeur"
onClick='document.forms["changer"].elements
["zonetexte"].value="NOUVEAU" '>
</FORM>

13
0
Exemples d’utilisation du DOM
<HTML>
<HEAD> <SCRIPT></SCRIPT> </HEAD>
<BODY>
<FORM name="changer">
<INPUT type="text" name="zonetexte"
value="Valeur initiale">
<INPUT type="button"
value="Changer la valeur"
onClick='document.forms["changer"].elements
["zonetexte"].value="NOUVEAU" '>
</FORM>

</BODY>
</HTML>

13
1
 Exemples d’utilisation du DOM
<!DOCTYPE html>
<html>
<body>

<p id="demo">Display the result here.</p>

<script>

var person = {name:"John", age:50};

document.getElementById("demo").innerHTML = person.name + " is " + person.age + "
years old.";

</script>

</body>
</html>

13
2
Les formulaires
 Rappel sur les formulaires
 Langage HTML
◦ Déclaration de formulaire : <FORM ...> ... </FORM>
◦ Élément(s) d’un formulaire : <INPUT ...>
 But
◦ Interaction avec l’utilisateur sous la forme d’une saisie
d’informations.
 Intérêt de JavaScript
◦ Augmenter l’interaction du côté client, par exemple pour :
 assister et guider le visiteur,
 contrôler la saisie,
 réaliser des traitements (calcul, …),
 envoyer des résultats au serveur.

13
4
Événements associés à <FORM …>
 onSubmit ="…"
◦ Détecte la soumission du formulaire

 onReset ="…"
◦ Détecte la réinitialisation du formulaire

13
5
 Éléments <INPUT …>
 Propriétés
◦ name : nom du champ
◦ type : type du champ (text, button, radio, checkbox, submit, reset)
◦ value : valeur textuelle
◦ size : taille du champ
◦ maxlength : taille maximale d’un champ texte
◦ checked : case à cocher / bouton radio coché ou non
◦ disabled : grisé (modification impossible)
◦ readOnly : lecture seule
◦ class : nom de la classe de style
◦ style : nom du style

13
6
Élément <INPUT type="text" …>
 Propriétés acceptées
◦ name, value, defaultvalue, size, maxlength, disabled, readOnly,
class, style

 Méthodes acceptées
◦ focus, blur

 Événements acceptés
◦ onFocus, onBlur, onChange

13
7
Éléments <INPUT …>
 Méthodes

◦ focus : donne le focus (curseur)

◦ blur : enlève le focus
◦ click : simule un click (sur un bouton)

 Événements

◦ onFocus : détecte la prise de focus

◦ onBlur : détecte la perte de focus
◦ onClick : détecte un click
◦ onChange : détecte les changements
13
8
Validation d’un formulaire par JavaScript
 Intérêt
◦ Vérifier les données saisies avant de valider réellement le
formulaire.
 Principe
◦ Création d’un bouton de type "button" (et pas de type "submit")
pour soumettre le formulaire.

◦ Association d’une fonction JavaScript qui:

 contrôle la saisie,
 soumet ou non le formulaire, à l’événement onClick de ce
bouton.

13
9
Exemple
<HTML><HEAD>
de validation d’un formulaire
<SCRIPT language="JavaScript">
function ValiderMail(formulaire)
{ if(formulaire.mail.value.indexOf("@",0)<0)
{ alert("Adresse mail saisie invalide.\n" );
// le formulaire ne sera pas validé
}
else { alert("Formulaire OK\n");
// Pour valider le formulaire en JavaScript :
formulaire.submit();
}}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Coordonnees" ACTION= >
Saisissez une adresse mail valide (nom@domaine) :
<INPUT TYPE="TEXT" NAME="mail">
<INPUT TYPE="button" NAME="bouton" VALUE="Valider"
onClick="ValiderMail(this.form)">
</FORM>
</BODY>
</HTML> 14
0
 Manipulation des éléments du formulaire
Exemple :
 1 - pour accéder au formulaire, il existe trois façons:

◦ a- document.form[0];
◦ b- document.form[“myform”];
◦ c- document.myform;
 2 – une fois accédé au formulaire, il nous reste d’accéder à
l’élément du formulaire. Tous les éléments du formulaire sont
regroupés dans le tableau élément[] associé à ce formulaire.
◦ a- document.myform.element[i];
◦ b- document.myform.element[“nom”];
◦ c- document.myform.nom;
 3- une fois accédé à l’élément voulu, on lit ou on modifie la
propriété concernée.
◦ document.myform.nom.value;

14
1
 Manipulation des éléments du formulaire
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function controle(form1) {
var test = document.form1.input.value;
alert("Vous avez tapé : " + test);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
<INPUT TYPE="text" NAME="input" VALUE=""><BR>
<INPUT TYPE="button" NAME="bouton" VALUE="Verifier le
formulaire" onClick="controle(form1)">
</FORM>
</BODY>
</HTML>

14
2
 Manipulation des éléments du formulaire
<body>
<h2>JavaScript Can Validate Input</h2>
<p>Please input a number between 1 and 10:</p>
<input id="numb”>
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;

// If x is Not a Number or less than one or greater than 10

if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script> 14
3
Manipulation des éléments du formulaire

14
4
 Manipulation des éléments du formulaire
<html>
<head>
<title> manipulation du forulaire </title>
</head>
<body>
<script language="javascript">
function afficher()
{
maFenetre=window.open();
maFenetre.document.open();
maFenetre.document.write(document.myform.nom.value+"</br>");
maFenetre.document.write(document.myform.prenom.value+"</br>");
maFenetre.document.write(document.myform.pass.value+"</br>");
L=document.myform.sexe.length;
for(i=0; i<L; i++)
{ if (document.myform.sexe[i].checked==true)
{ maFenetre.document.write(document.myform.sexe[i].value+"</br>"); }
}
14
5
 Manipulation des éléments du formulaire

if (document.myform.choix1.checked==true)
{ maFenetre.document.write(document.myform.choix1.value+"</br>");}

if (document.myform.choix2.checked==true)
{ maFenetre.document.write(document.myform.choix2.value+"</br>");}

if (document.myform.choix3.checked==true)
{maFenetre.document.write(document.myform.choix3.value+"</br>");}

maFenetre.document.write(document.myform.commentaire.value+"</br>");
}
</script>

14
6
 Manipulation des éléments du formulaire
<fieldset>
<form name="myform" onsubmit="afficher()">
<pre>
Entrez votre nom : <input type="text" name="nom"/>
Entrez votre prénom : <input type="text" name="prenom"/>
Entrez votre mot de passe : <input type="password" name="pass"/>
votre sexe:
<input type="radio" name="sexe" value="H"/> Homme
<input type="radio" name="sexe" value="F"/> Femme
vos loisirs:
<input type="checkbox" name="choix1" value="s"/> Sport
<input type="checkbox" name="choix2" value="l"/> Lecture
<input type="checkbox" name="choix2" value="m"/> Musique
Saisissez ici un commentaire:
<textarea name="commentaire" cols="20" rows="5"></textarea>
<input type="submit" value="Envoyer"/>
<input type="reset” value="Recommencer"/>
</pre> </form> </fieldset>
</body>
</html> 14
7
Calculs et opérations dans les formulaires

14
8
14
9
Calculs et opérations dans les formulaires

Résultats affichés des calculs HT

15
0
Calculs et opérations dans les formulaires

15
1
PopUp
Popup
◦ Nouvelle fenêtre, dont l’ouverture est déclenchée par
des événements liés à l’utilisateur

◦ 4 types de fenêtres :
 string prompt(string chaine)
 boolean confirm(string chaine)
 string alert(string chaine)
 window (appel de la méthode open(...))

15
3
window.open(URL [, nom] [,options])
 Paramètres
◦ URL : adresse de la page à charger
◦ nom : nom de la fenêtre (utilisable par TARGET)
◦ options (séparées par des , ) :
 toolbar = [ yes | no ] affichage de la barre d’outils
 location = [ yes | no ] affichage de l’URL de la page
 directories = [ yes | no ] affichage de la barre le lien
 status = [ yes | no ] affichage de la barre d’état
 menubar = [ yes | no ] affichage de la barre de menus
 scrollbars= [ yes | no | auto ] affichage des ascenseurs
 resizable = [ yes | no ] fenêtre redimensionnable ou non
 width = pixels, height = pixels largeur et hauteur en pixels
 top = pixels, left = pixels positionnement vertical et horizontal
 fullscreen = [ yes | no ] affichage plein écran
15
4
window.open(URL [, nom] [,options])
 Exemple
// Popup minimaliste, position fixe en haut à gauche
window.open('popup.html','','top=10,left=10')

// Aucune barre de menu, non redimensionnable, taille fixe

window.open('popup.html', '',
'resizable=no, location=no, menubar=no,
status=no, scrollbars=no',
width=200, height=100')

// Popup fullscreen
window.open('popup.html','','fullscreen=yes')

15
5
window.open(URL [, nom] [,options])
 Exemples de déclenchements d’ouvertures de fenêtre
// ouverture au chargement d’une page
<BODY onLoad="window.open( ... )">
...

// ouverture à la fermeture d’une page

<BODY onUnload="window.open( ... )">
...

 Fenêtre toujours visible

// forcer le focus
<BODY onblur="window.focus()" >
...

156
Fin