Visitez https://bensassimanel.wixsite.com/manel-bensassi :-)

1. Université Jendouba
Faculté des Sciences Juridiques
Économiques et de Gestion
Développement Web: JavaScipt
Manel Ben Sassi
Université de Jendouba, FSJEG
bensassi.manel@gmail.com
1 / 122

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

3. On entend parler du JavaScript ...
3 / 122

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

5. JavaScript... Quelques généralités
Questions
1. Quelle est la différence entre JavaScript et l’applet ?
5 / 122

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

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

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

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

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

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

12. JavaScript... Difficultés ?
Difficultés d’utilisation de JavaScript ...
12 / 122

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

14. Frameworks JavaScript
Frameworks divers...
14 / 122

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

16. Le noyau de JavaScript ...
16 / 122

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

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

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

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

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

22. Exercice ...
Dessinez le rendu de ce code !
22 / 122

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

24. Les variables ...
24 / 122

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

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

27. 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
MonPrnom 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

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

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

30. Portée et vies des variables
La portée des variable
30 / 122

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

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

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

34. Les structures de contrôle et d’itération
Structures de contrôles
Condition if (expr) {... } else {... }
34 / 122

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

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

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

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

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

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

41. Les fonctions prédéfinies
eval Cette fonction exécute un code Javascript à partir d’une
chaîne de caractères.
41 / 122

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

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

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

45. L’orienté Objet ...
45 / 122

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

47. La programmation orientée Objet
Exemple
47 / 122

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

49. Objets primitifs
Manipulation des tableaux ... ) Un exemple
La suite ..
49 / 122

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

51. Les objets
Comment créer les Objets ?
51 / 122

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

53. 2 façons de créer ses objets
Création directe d’objet
Utilisation d’un constructeur d’objet
53 / 122

54. Les objets ...
L’opérateur Typeof renvoie une chaîne de caractères indiquant quel est le
type de l’opérande.
54 / 122

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

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

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

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

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

60. Exercice
Que fais ce programme ?
60 / 122

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

62. Exemple de définition JSON
62 / 122

63. Exemple d’utilisation JSON
63 / 122

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

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

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

67. Sous-programmes JS ...Exemple
67 / 122

68. Sous-programmes JS ...Exemple
68 / 122

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

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

71. Les objets du navigateur ... BOM
71 / 122

72. L’objet window ...
L’objet window représente la fenêtre du navigateur
72 / 122

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

74. L’objet BOM ... Browser Object Model
En plus de window, il est possible d’utiliser les objets location, navigator,
screen et history.
74 / 122

75. L’objet BOM ... Exemple
D’autres exemples ...
75 / 122

76. Du l’objet BOM ... DOM
Figure – BOM et DOM
76 / 122

77. DOM par un exemple HTML
Figure – Exemple HTML comme un objet
77 / 122

78. DOM par un exemple HTML
La navigation arborescente dans un document HTML
78 / 122

79. DOM... Document Objet Model
Méthode getElementById : Cette méthode prend comme argument l’id
d’un élement.
79 / 122

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

98. Les évènements... Exercice
Exercice : Ecrivez le script permettant de changer (en + ou -) la valeur de
la progression.
Figure – Solution
98 / 122

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

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

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

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

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

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

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

106. 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 :WINDOWSCookies" ou encore
"C :WINDOWSTEMCookies".
106 / 122

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

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

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

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

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

112. Annexe
112 / 122

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

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

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

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

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

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

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

120. Annexe Evènement
Utiles par exemple pour contrôler les champs de saisie.
120 / 122

121. Références Bibliographiques
121 / 122

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