Faculté des Sciences Juridiques

Université Jendouba Économiques et de Gestion

Développement Web: JavaScipt

Manel Ben Sassi

Université de Jendouba, FSJEG

[email protected]

1 / 122
Sommaire
1 Introduction
2 Le noyau JavaScript
Les variables
Les opérations et les fonctions prédéfinies
L’orienté Objets
JSON
3 Le JavaScript côté client Web
DOM
Les évènements
Les cookies
4 Annexes
Annexe String
Annexe Date
Annexe Objet window
Annexe Evènement
5 Bibliographie
2 / 122
On entend parler du JavaScript ...

3 / 122
JavaScript... C’est quoi ?

JavaScript
un peu d’histoire ...
est un langage de script simplifié orienté objet dont la syntaxe est
basée sur celle du Java.
Javascript a été initialement élaboré par Netscape en association avec
Sun Microsystem.
Plus tard, Microsoft développera son propre langage Javascript
officiellement connu sous le nom de JScript.

C’est un langage script qui permet de :

I rendre dynamique un site internet développé en HTML.
I développer de véritables applications fonctionnant exclusivement dans
le cadre d’Internet.

4 / 122
JavaScript... Quelques généralités

Questions
1. Quelle est la différence entre JavaScript et l’applet ?

5 / 122
JavaScript... Quelques généralités

Questions
1. Quelle est la différence entre JavaScript et l’applet ?
2. Maintenant, quelle est la différence entre Java et JavaScript ?

6 / 122
JavaScript... Quelques généralités

Questions
1. Quelle est la différence entre JavaScript et l’applet ?
2. Maintenant, quelle est la différence entre Java et JavaScript ?

I Contrairement à un applet Java qui est un programme compilé, les

scripts écrits en Javascript sont interprétés
I Le Java, représenté par un ou plusieurs fichiers autonomes dont
l’extension sera *.class ou *.jar, est invoqué par une balise HTML
spécifique
I Le JavaScript est écrit directement au sein du document HTML
sous forme d’un script encadré par des balises HTML spéciales.

7 / 122
JavaScript... Intérêt ?
Quel intérêt pour JavaScript

8 / 122
JavaScript... Intérêt ?
Quel intérêt pour 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)
Animation : Aficher/masquer du texte, défiler des images, créer des
info bulles
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).

9 / 122
JavaScript... Généralité
JS .. Une technologie cliente

10 / 122
Navigateur ... et JavaScript

JS .. Une technologie cliente

Chaque navigateur intègre un interpréteur de JS, plus ou moins
performant
SpiderMonkey (Firefox), V8 (Google Chrome), Chakra (Internet
Explorer), SquirrelFish (Safari)
Permet un niveau d’interactivité plus riche qu’avec de l’HTML simple
Certains traitements simples (ex : contrôle des saisies utilisateur)
peuvent être réalisés par le navigateur plutôt que par le serveur
Un document HTML/CSS chargé dans le navigateur peut être
"remanié" dynamiquement !

11 / 122
JavaScript... Difficultés ?

Difficultés d’utilisation de JavaScript ...

12 / 122
JavaScript... Difficultés ?

Difficultés d’utilisation de JavaScript ...

I Si le script ne fonctionne pas, la page est, le plus souvent, inutilisable.
Attention au menu non visible !
I 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,
. . . ).
I Lenteur d’exécution des scripts, ainsi que pour les scripts complexes,
un certain délai avant le démarrage

13 / 122
Frameworks JavaScript

Frameworks divers...

14 / 122
Les alternatives à JavaScript

Le concurrent déchu : VB Script (Microsoft)

Utilisé à l’époque de l’hégémonie d’Internet Explorer. N’est interprété
que par ce dernier.
Le prétendant sérieux : DART (Google)
Actuellement compilé en JavaScript mais vise à terme à supplanter
JavaScript
Chrome sera logiquement le 1er navigateur à supporter nativement des
scripts DART

15 / 122
Le noyau de JavaScript ...

16 / 122
HTML et JavaScript

La page HTML devra TOUJOURS contenir les deux balises

spécifiques et indispensables

Le code JavaScript s’intègre de deux manières 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.
C’est la méthode la plus simple et la plus fréquemment utilisée par les
développeurs de sites Internet.
2 Insertion indirecte comme un module externe

17 / 122
HTML et JavaScript
1re méthode : Insertion directe
Le code s’exécute automatiquement lors du chargement de la page
HTML dans le navigateur en même temps que le contenu de la page
HTML s’affiche à l’écran.
Le code JavaScript est placé dans le corps même de la page HTML,
entre les balises <body> .......... Et ......... </body>

18 / 122
HTML et JavaScript
2me méthode : Insertion par appel à un module exterme
On peut insérer du code JavaScript en faisant appel à un module
externe se trouvant à n’importe quelle adresse (URI).

Les 2 balises de Javascript doivent être placés entre <body> et

</body> dans le cas d’une exécution directe ou entre les Tags
<head> et </head> de la page HTML pour une exécution différée.
Stocké dans un fichier sur le serveur à son adresse d’appel sous forme
de TEXTE SIMPLE portant l’extension .txt ou .js
Simplifie la maintenance des sites faisant appel à des modules
JavaScript communs à plusieurs pages HTML.
Inconvénient : l’appel au code externe génère une requête
supplémentaire vers le serveur, et encombre le réseau
19 / 122
Entrée et sortie de données avec JavaScript
3 types de boites de messages
Méthode alert() sert à afficher à l’utilisateur des informations simples de
type texte. Une fois que ce dernier a 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

20 / 122
Entrée et sortie de données avec JavaScript

Méthode document.write() La méthode document.write permet d’écrire du

code HTML dans la page WEB

21 / 122
Exercice ...

Dessinez le rendu de ce code !

22 / 122
La structure d’un script en JavaScript

La syntaxe du langage Javascript s’appuie sur le modèle de Java et C

Règles générales
L’insertion des espaces peut s’effectuer n’importe où dans le script
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 y est sensible à la casse
Il existe deux méthodes permettant d’intégrer des commentaires à vos
scripts.
Placer un double slash (//) devant le texte
Encadrer le texte par un slash suivi d’une étoile (/*) et la même
séquence inversée (*/)

23 / 122
Les variables ...

24 / 122
Déclaration et typage en JavaScript
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é (=).
Si une valeur est affectée à une variable sans que cette dernière ne soit
déclarée, alors Javascript la déclare automatiquement.

25 / 122
Déclaration et typage en JavaScript

Déclaration et la portée des variables

Déclaration et affectation
La lecture d’une variable non déclarée provoque une erreur
Une variable correctement déclarée mais dont aucune valeur n’est
affectée, est indéfinie (undefined).

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.

26 / 122
Déclaration et typage en JavaScript

Contraintes concernant les noms de variables

Les noms de variables ne peuvent contenir que des lettres, chiffres, ou
le caractère "" (underscore)
MonPrenom est un nom valide
Les caractères spéciaux et accentués sont interdits
MonPr 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 JavaScript ne peuvent être utilisés comme noms de
variable.

27 / 122
Les variables en JavaScript

Les types primitifs

Entier var annee = 2014 ;
Réel var prixttc =122.15 ;
Chaîne de caractère var message="Bonjour" ; var message=’IAG’ ;
Booléen var estSympa=true ;

28 / 122
Portée et vies des variables

La portée des variable

Variable locale Une variable déclarée à l’interieur d’une fonction est
seulement accessible dans cette fonction
Variable globale Une variable déclarée en dehors de toute fonction est
accessible en tout point du script et de la page
Cycle de vie d’une variable Une variable locale est supprimée
lorsque la fonction se termine
Une variable globale est supprimée à la fermeture de la
page

29 / 122
Portée et vies des variables

La portée des variable

30 / 122
Valeurs spéciales des variables

JavaScript inclut aussi deux types de données spéciaux

Null possède une seule valeur, null, qui signifie l’absence e données
dans une variable
Undefined possède une seule valeur, undifined. Une variable dont le
contenu n’est pas clair car elle n’a jamais stocké de valeur, pas même
null est dite non définie (undifined).

31 / 122
Les opérations et les fonctions
prédéfinies ...

32 / 122
Les opérations sur les chaînes

Les opérations sur les chaînes de carcatères

Concaténation var chaine = "bonjour" + "FI3/FCD1" ;
Déterminer la longueur d’une chaine var ch1 = "bonjour" ; var
longueur = ch1.length ;
Identifier le nième caractère d’une chaîne var ch1 ="Rebonjour !" ; var
carac = ch1.charAt(2) ; Attention ! On compte de zéro
Extraction d’une partie de la chaîne var dateDuJour = "04/04/03" ;
var mois = dateDuJour.substring(3, 5) ;
3 : est l’indice du premier caractère de la sous-chaîne à
extraire
5 : indice du dernier caractère à prendre en considération ; ce
caractère ne fera pas partie de la sous-chaîne à extraire

33 / 122
Les structures de contrôle et d’itération

Structures de contrôles
Condition if (expr) {... } else {... }

34 / 122
Les structures de contrôle et d’itération

Structures de contrôle
Sélection switch(expr){ case n : .. }

L’opérateur ternaire ? : permet de remplacer une instruction if . . . else

simple. Sa syntaxe utilisée pour donner une valeur à une
variable est

Question Réecrivez l’instruction switch avec l’opérateur ternaire

35 / 122
Les structures de contrôle et d’itération
Structures de contrôles
Boucle while (expr) {... }
do {... } while (expr) ;

Itération for (expr1 ;expr2 ;expr3) {... }

for(value in object) {... }
foreach (key in object) {... }

36 / 122
Les structures de contrôle et d’itération

Certaines instructions permettent un contrôle supplémentaire sur les

boucles :
break permet de quitter la boucle courante
continue permet de terminer l’itération en cours de la boucle courante

37 / 122
Exercices
1 Utiliser les méthodes JavaScript prompt() et alert() pour demander à
l’utilisateur deux nombres puis afficher leur somme.
2 Ecrire un script demandant de l’utilisateur d’entrer son âge et de
contrôler la validité de l’âge entré (si l’âge est erroné afficher un
message d’erreur et redemander de saisir l’âge).
3 Ecrire le code Javascript qui détermine si un nombre entier x est
parfait.

Définition
Un nombre est parfait ssi il est égal à la somme de ses diviseurs stricts.
6 est parfait car 6 = 1 + 2 + 3.

38 / 122
Les opérations
Structures de contrôles
JavaScript permet d’assigner des (pointeurs sur) fonctions à des
variables
Fonctions anonymes dont l’appel se fait au travers des variables qui les
référencent

39 / 122
Les Fonctions par déclaration

La déclaration se fait à l’aide du mot clé function

function name(param1, param2) { ... ; return value ;}
Peut retourner une valeur (return) ou non
L’appel se fait de manière classique
Liaison des arguments avec les paramètres, s’il y en a.
Le noyau JavaScript possède déjà une bibliothèque de fonctions
prédéfinies
eval(), isNaN(), parseInt(), encodeURI(), ...

40 / 122
Les fonctions prédéfinies

eval Cette fonction exécute un code Javascript à partir d’une

chaîne de caractères.

41 / 122
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

isNaN détermine si le paramètre n’est pas un nombre (NaN : Not a

Number).

42 / 122
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).

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

43 / 122
Les fonctions prédéfinies

Number Convertit l’objet spécifié en valeur numérique

String Convertit l’objet spécifié en chaîne de caractères

44 / 122
L’orienté Objet ...

45 / 122
La programmation orientée Objet

Paradigme Objet Un objet est décrit par ses propriétés et ses méthodes
I Accès aux propriétés et méthodes par un point ’.’
I Auto-référence avec this
I Visibilité des propriétés et méthodes : public/privé

Absence du concept de classe On ne peut pas définir de classes d’objets

46 / 122
La programmation orientée Objet

Exemple

47 / 122
Objets primitifs

Boolean var estSympa = new Boolean(true) ;

Number (entiers et réels) var annee = new Number(2014) ;
Array I var saveursYop = new Array[2] ;
I saveursYop[0] ="banane" ;
I saveursYop[1] ="kiwi" ;
String var message = new String("2eme IAG") ;

48 / 122
Objets primitifs

Manipulation des tableaux ... ) Un exemple

La suite ..

49 / 122
Exemples Objets

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...
Les objets javascript peuvent réagir à des "Evénements".
Tous les navigateurs ne supportent pas les mêmes objets

50 / 122
Les objets

Comment créer les Objets ?

51 / 122
Les objets

Comment créer les Objets ?

L’opérateur New est utilisé pour créer une nouvelle instance ou un nouveau
type d’objet défini par l’utilisateur ou de l’un des types
d’objets prédéfinis, Array, Boolean, Date, Function, Image,
Number, Object, ou String.

52 / 122
2 façons de créer ses objets
Création directe d’objet

Utilisation d’un constructeur d’objet

53 / 122
Les objets ...

L’opérateur Typeof renvoie une chaîne de caractères indiquant quel est le

type de l’opérande.

54 / 122
Les objets ... String

Quelques méthodes String

anchor( ) : formate la chaîne avec la balise <A> nommée ;
b( ) : formate la chaîne avec la balise <B> ;
charAt( ) : renvoie le caractère se trouvant à une certaine position ;
concat( ) : permet de concaténer 2 chaînes de caractères ;
toLowerCase( ) : permet de passer toute la chaîne en minuscule ;
toUpperCase( ) : permet de passer toute la chaîne en majuscules ;

Voir annexe pour la suite

55 / 122
Les objets ... Array

Quelques méthodes Array

concat( ) : permet de concaténer 2 tableaux ;
join( ) : convertit un tableau en chaîne de caractères ;
reverse( ) : inverse le classement des éléménts du tableau ;
slice( ) : retourne une section du tableau ;
sort( ) : permet le classement des éléments du tableau ;
Propriété Array
I length : retourne le nombre d’éléments du tableau ;

56 / 122
Les objets ... Date

Quelques méthodes pour l’objet Date

I getFullYear( ), getYear( ), getMonth( ), getDay( ), getDate(),
getHours( ), getMinutes( ), getSeconds( ), getMilliseconds( ) :
retournent respectivement l’année complète, l’année (2chiffres), le
mois, le jour de la semaine, le jour du mois, l’heure, les minutes, les
secondes et les millisecondes stockés dans l’objet Date ;

Voir annexe pour la suite

57 / 122
Les objets ... Math

Quelques méthodes Mathématiques

abs( ), exp( ), log(), sin( ), cos( ), tan( ), asin( ), acos( ), atan( ),
max( ), min( ), sqrt( ) sont les opérations mathématiques habituelles ;
atan2( ) : retourne la valeur radian de l’angle entre l’axe des abscisses
et un point ;
ceil( ) : retourne le plus petit entier supérieur à un nombre ;
floor( ) : retourne le plus grand entier inférieur à un nombre ;
pow( ) : retourne le résultat d’un nombre mis à une certaine
puissance ;
random( ) : retourne un nombre aléatoire entre 0 et 1 ;
round( ) : arrondi un nombre à l’entier le plus proche.

58 / 122
Exercice

Exercices

Ecrire un script qui calcule la factorielle d’un nombre entier positif n

Ecrire une fonction Javascript qui affiche la table de multiplication
d’une valeur donnée en paramètre. Avant l’appel à la fonction la
valeur doit etre saisie par l’intermédiaire d’une fenetre de dialogue.

59 / 122
Exercice

Que fais ce programme ?

60 / 122
JSON ...

JavaScript Object Notation (JSON)

Définition Format léger et vraiment très simple
Il n’existe que 2 concepts : objets {} et tableaux[]
sont manipulables nativement par JavaScript
Usages I Sert à stocker des données (ex : fichier de configuration)
I Sert à échanger des données à travers le réseau, entre
clients et serveurs (ex : sérialisation / désérialisation)
I Sert à décrire un objet JS mais sous une forme textuelle
dans le code source

61 / 122
Exemple de définition JSON

62 / 122
Exemple d’utilisation JSON

63 / 122
Le JavaScript côté client Web ...

64 / 122
Sous-programmes JS ...
Le code des sous-programmes se situe au niveau de l’entête d’un
document HTML
Soit directement

Soit par inclusion d’un fichier externe

65 / 122
Sous-programmes JS ...

Le code du programme principal se situe dans le corps d’un document

Html ) les portions de code qui ont vocation à appeler les
sous-programmes
Soit dans une balise spéciale <script></script>

Soit via des évènements

66 / 122
Sous-programmes JS ...Exemple

67 / 122
Sous-programmes JS ...Exemple

68 / 122
Les objets du JS...
Objets de type BOMBrowser Object Model, permet la
manipulation du navigateur
Les navigateurs sont des logiciels qui offrent les mêmes fonctionnalités
de base : ouvrir / fermer des onglets, aller à un URL, mémoriser la liste
des url, etc
Objets de type DOM Document Object Model qui permet la
représentation d’un document sous la forme d’un objet
Les balises sont des noeuds et leurs imbrications forment une
arborescence
Cette structure d’arbre est ensuite facile à manipuler
Cet arbre est chargé dans le navigateur et est parcouru par le parseur
du navigateur afin de produire l’affichage graphique
Chaque modification ultérieure de cet arbre force le rafraîchissement de
l’affichage graphique.
Objets de type HTML Comme par exemple <a>, <area>,
<canvas>, <button>, <form>, <image>, <input>, <link>,
<table>, etc .
69 / 122
Les objets du navigateur ...

Pour comprendre les évènements ) Objet Window

Le plus haut dans la hiérarchie qui correspond à la fenêtre même du
navigateur.
L’objet document fait référence au contenu de la fenêtre.
document regroupe au sein de propriétés l’ensemble des éléments
HTML présents sur la page. Pour atteindre ces différents éléments,
nous utiliserons :
1. 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) ;
2. Soit des collections d’objets qui regroupent sous forme de
tableaux Javascript tous les éléments de type déterminé.

70 / 122
Les objets du navigateur ... BOM

71 / 122
L’objet window ...

L’objet window représente la fenêtre du navigateur

72 / 122
L’objet window ...
Il est possible de programmer l’exécution d’une méthode à un instant
donné ou à des temes réguliers grâce à setTimeout etsetInterval

NB : Il est possible d’annuler avec clearnTimeout et clearInterval

Voir Annexe pour le reste des propriétés et des méthodes propres à l’objet window
73 / 122
L’objet BOM ... Browser Object Model

En plus de window, il est possible d’utiliser les objets location, navigator,

screen et history.

74 / 122
L’objet BOM ... Exemple

D’autres exemples ...

75 / 122
Du l’objet BOM ... DOM

Figure – BOM et DOM

76 / 122
DOM par un exemple HTML

Figure – Exemple HTML comme un objet

77 / 122
DOM par un exemple HTML

La navigation arborescente dans un document HTML

78 / 122
DOM... Document Objet Model

Méthode getElementById : Cette méthode prend comme argument l’id

d’un élement.

79 / 122
DOM... Document Objet Model
Méthode getElementsByTagName : Cette méthode prend comme
argument le nom de balise des éléments à récupérer.

80 / 122
DOM... Document Objet Model
Propriété innerHTML : En utilisant cette propriété, il est possible de
modifier le contenu d’un élément.

Remarque
La propriété innerText (textContent pour Firefox) est similaire à
innerHTML, mais ne traite que du texte simple.
81 / 122
DOM... Document Objet Model
Création dynamiquement des éléments HTML : Ceci peut se faire
suivant ces étapes :
1 createElement : création de l’élément (noeud)

2 createTextNode : attribuer un élément textuel au noeud créé.

3 appendChild : fixer le noeud à sa bonne position dans l’arbre du

document

82 / 122
DOM... Document Objet Model
Modifier le style d’une manière dynamique :Tout élément HTML
dispose d’un attribut style en JS. Les noms des propriétés CSS doivent être
convertis en camel case. Par exemple :
Propriété CSS Propriété JS
background-image style.backgroundImage
color style.color
Font-family style.fontFamily

83 / 122
DOM... Document Objet Model

Accès direct aux noeuds

Par la valeur de l’attribut name (s’il existe) var result =
document.getElementsByName ("newEmails") ;
Renverra 0 ou n résultats.

84 / 122
Evènement

Evènement
Un évènement est provoqué par une action de l’utilisateur ou du navigateur
lui-même. Les évènements ont des noms tels que click, load et mouseover.
Une fonction appelée en réponse à un évènement se nomme un écouteur
(event handler ou event listener). Souvent, leur nom commence par on
comme par exemple onclik ou onload.

85 / 122
Evènement

Les évènements les plus importants

Evènement Elément(s) HTML concerné(s)
onLoad Body, frameset, Object
onUnload Body, frameset,
OnError Img, Objetc, body, et frameset
onAbort Body et frameset
onSelect Input et textarea
onChange Input, select, textarea
onSubmit, onReset Form
onFocus, onBlur Label, input, select, textarea et button
onResize, onScroll Body
onClick, onMouseOver, onContextMenu Quasiment tout

86 / 122
Evènement

Nommage des objets-élémments

I Pour pouvoir manipuler un objet en javaScript, il doit posséder un
nom
I Pour pouvoir distinguer les différents objets-éléments d’une page web,
il suffit de leur donner un nom à travers de l’attribut NAME
<Table Name="tableau1">. . .
<Table Name="tableau2">. . .
<Form Name = "formulaire1">. . .
<Form Name ="formulaire2">. . .
<Textarea Name ="texte1">. . .
I Dans le cas où l’objet serait unique alors pas besoin de nom pour
désigner cet objet

87 / 122
HTML Event Handlers

On utilise des attributs HTML pour déclarer les écouteurs. La valeur de ces
attributs est le code JavaScript à exécuter lorsque l’évènement est produit.

88 / 122
HTML Event Handlers

onClick
Se produit lorsque l’utilisateur clique sur un élément spécifique dans
une 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

89 / 122
HTML Event Handlers

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é

90 / 122
HTML Event Handlers

onMouseover
Analogue à onClick sauf qu’il suffit que l’utilisateur place le pointeur
de sa souris sur l’un des éléments précités (lien hypertexte, image,
bouton, texte, etc.) pour qu’il ait lieu
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.

91 / 122
HTML Event Handlers

onMouseover
Analogue à onClick sauf qu’il suffit que l’utilisateur place le pointeur
de sa souris sur l’un des éléments précités (lien hypertexte, image,
bouton, texte, etc.) pour qu’il ait lieu
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.

92 / 122
Manipulation des objets

Pour adresser un objet, il ne suffit pas de donner son nom : il faut

aussi préciser son "chemin d’accès" dans l’arborescence de la
structure

Si le nom de la fenêtre est omis, le navigateur utilisera par défaut la

fenêtre courante
Dans le cas de cadres (frames), il est pertinent de donner le nom de la
fenêtre
Il est possible aussi d’omettre window.document : l’adressage réussi
puisqu’il n’y a qu’un seul objet "document" dans la fenêtre.
93 / 122
Les évènements... Retenez
Ainsi ... Deux stratégies possibles ... Pour la gestion des évènements
La première Directement à l’aide d’attributs dédiés (inline)

94 / 122
Les évènements... Retenez
Ainsi ... Deux stratégies possibles ... Pour la gestion des évènements
La deuxième Mise en place d’écouteurs d’évènement

95 / 122
Les évènements... Retenez
Question : Ré-écrivez le code précédemment proposé avec les événements.

96 / 122
Les évènements... Retenez
Question : Ré-écrivez le code précédemment proposé avec les événements.

Figure – Solution

97 / 122
Les évènements... Exercice

Exercice : Ecrivez le script permettant de changer (en + ou -) la valeur de

la progression.

Figure – Solution

98 / 122
Les évènements... Objet event

Quand un événement se produit, toutes les informations le concernant sont

enregistrées dans un objet appelé event. Il est possible de récupérer cet
objet sous forme de paramètre d’une fonction écouteur.

Figure – Solution

99 / 122
Les évènements... souris

Ce sont :
Click double click
mousedown mouseup
mouseover mouseout
mousemove •

Les propriétés utiles et accessibles à partir de l’objet event sont :

clientX clientY
screenX screenY
shiftkey ctrlKey
altKey metaKey

100 / 122
Les évènements... clavier

Ce sont :
keydown keyup
keypress

Les propriétés utiles et accessibles à partir de l’objet event sont :

shiftkey ctrlKey
altKey metaKey
keyCode

101 / 122
Les évènements... HTML

Ce sont :
load unload
abort error
select change
submit reset
reseize scroll
focus blur

Remarque La plupart de ces évènements sont liés aux formulaires ou l’objet

window.

102 / 122
Les cookies ...

Un "Cookie" ...
est une chaîne de caractères qu’une page HTML (contenant du code
JavaScript) peut écrire à un emplacement UNIQUE et bien défini sur
le disque dur du client.
Cette chaîne de caractères ne peut être lue que par le seul serveur qui
l’a générée.

Que faire avec un cookie ?

103 / 122
Les cookies ...

Un "Cookie" ...
est une chaîne de caractères qu’une page HTML (contenant du code
JavaScript) peut écrire à un emplacement UNIQUE et bien défini sur
le disque dur du client.
Cette chaîne de caractères ne peut être lue que par le seul serveur qui
l’a générée.

Que faire avec un cookie ?

I Transmettre des valeurs (contenu de variables) d’une page HTML à
une autre.
Par exemple, créer un site marchand et constituer un "caddie" pour le
client. Caddie qui restera sur son poste et vous permettra d’évaluer la
facture finale au bout de la commande. Sans faire appel à quelque
serveur que ce soit.
I Personnaliser les pages présentées à l’utilisateur en reprenant par
exemple son nom en haut de chaque page.
104 / 122
Les cookies ...
Les "Cookies" ... des limites
On ne peut pas écrire autant de cookies que l’on veut sur le poste de
l’utilisateur (client d’une page). Il y a des limites :
I Limites en nombre : Un seul serveur (ou domaine) ne peut pas être
autorisé à écrire plus de 20 cookies.
I Limites en taille : un cookie ne peut excéder 4 Ko.
I Limites du poste client : Un poste client ne peut stocker plus de
300 cookies en tout.
Où sont stockés les cookies ?

105 / 122
Les cookies ...
Les "Cookies" ... des limites
On ne peut pas écrire autant de cookies que l’on veut sur le poste de
l’utilisateur (client d’une page). Il y a des limites :
I Limites en nombre : Un seul serveur (ou domaine) ne peut pas être
autorisé à écrire plus de 20 cookies.
I Limites en taille : un cookie ne peut excéder 4 Ko.
I Limites du poste client : Un poste client ne peut stocker plus de
300 cookies en tout.
Où sont stockés les cookies ?
En général, ils sont pour Netscape, dans le répertoire de l’utilisateur
(si il y a des profils différents) sous le nom de "cookie.txt".
Microsoft Internet Explorer stocke les cookies dans des répertoires
tels que "C :\WINDOWS\Cookies" ou encore
"C :\WINDOWS\TEM\Cookies".

106 / 122
Les cookies ...

Structure d’un cookie

Nom=Contenu ; expires=expdate ; path=Chemin ;

domain=NomDeDomaine ; secure

La variable Nom contient le nom à donner au cookie.

La variable Contenu contient le contenu du cookie
Exemple macookie="oui :visite"
Le mot réservé expires suivi du signe "=". Derrière ce signe, une date
d’expiration représentant la date sous la forme (Wdy, DD-Mon-YYYY
HH :MM :SS GMT) à laquelle le cookie sera supprimé du disque dur
du client. Utiliser les fonctions de l’objet Date
path représente le chemin de la page qui a créé le cookie.

107 / 122
Les cookies ...

Structure d’un cookie

Nom=Contenu ; expires=expdate ; path=Chemin ;

domain=NomDeDomaine ; secure

domain représente le nom du domaine de cette même page

secure prend les valeurs "true" ou "false" permet de spécifier que le
cookie sera envoyé uniquement si la connexion est sécurisée selon que
le cookie doit utiliser des protocoles HTTP ou HTTPS.
Les arguments path, domain et secure sont facultatifs. Lorsque ces
arguments sont omis, les valeurs par défaut sont prises. Pour secure, la
valeur est "False" par défaut.

108 / 122
Gestion des cookies ...

Ecrire un un cookie Un cookie est une propriété de l’objet document (la

page HTML chargée dans le navigateur) alors l’intruction d’écriture de
cookie est :

document.cookie = Nom + "=" + Contenu + " ; expires=" +

expdate.toGMTString() ;

109 / 122
Gestion des cookies ...

Lecture d’un cookie Accéder à la propriété cookie de l’objet document.

Modification d’un cookie Modifier le contenu de la variable Contenu puis

réécrire le cookie sur le disque dur du client

110 / 122
Gestion des cookies ...

Suppression d’un cookie Positionner la date de péremption du cookie à

une valeur inférieure à celle du moment où on l’écrit sur le disque.

111 / 122
Annexe

112 / 122
Les objets ... String ... Annexe

Quelques méthodes
italics( ) : formate la chaîne avec la balise <I> ;
lastIndexOf( ) : permet de trouver le dernier indice d’occurrence d’un
caractère ;
link( ) : formate la chaîne avec la balise <A> pour permettre de faire
un lien ;
slice( ) : retourne une portion de la chaîne ;
substr( ) : retourne une portion de la chaîne ;
substring( ) : retourne une portion de la chaîne ;
indexOf( ) : permet de trouver l’indice d’occurrence d’un caractère
dans une chaîne ;
charCodeAt( ) : renvoie le code du caractère se trouvant à une
certaine position ;

113 / 122
Les objets ...date ... Annexe

Quelques méthodes date

getUTCFullYear( ), getUTCYear( ), . . . retournent respectivement
l’année complète, l’année (2chiffres), . . . stockés dans l’objet Date en
temps universel ;
setFullYear( ), setYear( ), . . . remplacent respectivement l’année
complète, l’année (2chiffres), . . . dans l’objet Date ;
setUTCFullYear( ), setUTCYear( ), . . . remplacent l’année complète,
l’année (2chiffres), . . . dans l’objet Date en temps universel ;
getTime( ) : retourne le temps stocké dans l’objet Date ;
getTimezoneOffset( ) : retourne la différence entre l’heure du client et
le temps universel ;
toGMTString( ), toLocaleString( ), toUTCString( ) : convertissent la
date en chaîne de caractère selon la convention GMT, selon la
convention locale ou en temps universel ;

114 / 122
Les objets ...Window ... Annexe

Quelques propriétés (1)

closed : indique que la fenêtre a été fermée ;
defaultStatus : indique le message par défaut dans la barre de status ;
document : retourne l’objet document de la fenêtre ;
frames : retourne la collection de cadres dans la fenêtre ;
history : retourne l’historique de la session de navigation ;
location : retourne l’adresse actuellement visitée ;
name : indique le nom de la fenêtre ;

115 / 122
Les objets ...Window ... Annexe

Quelques propriétés (2)

navigator : retourne le navigateur utilisé ;
opener : retourne l’objet window qui a créé la fenêtre en cours ;
parent : retourne l’objet window immédiatemment supérieur dans la
hiérarchie ;
self : retourne l’objet window correspondant à la fenêtre en cours ;
status : indique le message affiché dans la barre de status ;
top : retourne l’objet window le plus haut dans la hiérarchie.

116 / 122
Les objets ...Window ... Annexe

Quelques méthodes
blur( ) : enlève le focus de la fenêtre ;
close( ) : ferme la fenêtre ;
focus( ) : place le focus sur la fenêtre ;
moveBy( ) : déplace d’une distance ;
moveTo( ) : déplace la fenêtre vers un point spécifié ;
open( ) : ouvre une nouvelle fenêtre ;
print( ) : imprime le contenu de la fenêtre ;
resizeBy( ) : redimensionne d’un certain rapport ;
resizeTo( ) : redimensionne la fenêtre ;
setTimeout( ) : évalue une chaîne de caractère après un certain laps
de temps.

117 / 122
Annexe Evènement

Evènement load et unload

Pour l’objet window, l’évènement load se produit lorsque la page
complète est chargée, incluant les ressources externes telles que les
images, les fichiers JavaScript et CSS.
Il est possible d’associer cet évènement à des éléments img.
L’évènement unload se produit typiquement lorsqu’on change de page.
Cela permet par exemple de libérer proprement certaines ressources.

118 / 122
Annexe Evènement

Evènement submit et reset

Ils sont associés à un formulaire. Pour valider la soumission ou la
ré-initialisation, la fonction écouteur doit retourner true.
this.name1.value représente la valeur du champ name1 de l’objet this
qui est le formulaire auquel est associé l’écouteur.

119 / 122
Annexe Evènement

Utiles par exemple pour contrôler les champs de saisie.

120 / 122
Références Bibliographiques

121 / 122
Références Bibliographiques

1 Javascript : The Good Parts, Crockford Douglas, Edition O’Reilly,

16 Mai 2008, 170 pages
2 JavaScript : The Definitive Guide, David Flanagan, Edition
O’Reilly, Mai 2011, 1096 Pages
3 High Performance JavaScript, Nicholas C. Zakas, Edition O’Reilly,
Mars 2010, Pages 231

122 / 122