1. Pr. A. El Mhouti FSTH
Université Abdelmalek Essaadi
Faculté des Sciences et Techniques d’Al-Hoceima
Département de Mathématiques et Informatique
Filière : LST-MI – S6
Année universitaire : 2019- 2020
Département de Mathématiques et Informatique
M31 : Technologies du Web
Chapitre 4 : Langage JavaScript
Pr. Abderrahim El Mhouti
Département de Mathématiques et Informatique
Faculté des Sciences et Techniques d’Al-Hoceima
a.elmhouti@uae.ac.ma
2. Introduction à JS
Inclusion de JS dans le code HTML
Théorie d’objets en JS
Syntaxe générale
Les évènements
Objets prédéfinis
Pr. A. El Mhouti FSTH
2
Plan
4. JavaScript est un langage de programmation Web.
Il a été inventé en 1995 par Brendan Eich (Netscape).
Objectif : JavaScript permet de dynamiser une page HTML, en ajoutant :
◼ des interactions avec l'utilisateur
◼ des animations (faire défiler des images)
◼ Afficher/masquer du texte
◼ Créer des infobulles, …
Javascript est totalement différent de Java : Javascript != scripts Java.
Pr. A. El Mhouti FSTH
4
Introduction à JavaScript
Généralités
Java JavaScript
• compilé et interprété
• orienté objets (classes, héritage)
• typage fort
• interprété
• orienté prototypes (héritage de propriétés)
• typage faible
6. Les instructions JavaScript doivent toujours être placées à l'intérieur des balises
<script> </script>.
Un script peut être placé à quatre endroits différents :
◼ Dans le corps de la page : le résultat du script JS s'affiche au sein du document
HTML lorsque la page est chargée.
◼ Dans l'en-tête de la page : le script JS ne s’exécute pas immédiatement, mais
d'autres scripts peuvent s'y référer (souvent employé pour les fonctions).
◼ A l’intérieur d'une balise HTML : on appelle cela un gestionnaire d'événements. Il
permet au script JS d'interagir avec des éléments HTML.
◼ Dans un fichier séparé : le script JS est stocké dans un fichier (extension .js) dont
on peut se référer en indiquant le nom de fichier dans la balise <script>.
La dernière méthode est généralement la méthode recommandée.
Pr. A. El Mhouti FSTH
6
Inclusion dans le code HTML
JavaScript
7. le JavaScript est placé à l’intérieur d’un élément <script> (placé généralement à la
fin de l’élément <head>.
Exemple :
Remarque : L’élément <script> possède un attribut type qui sert à indiquer le
langage utilisé (en HTML5 cet attribut n’est pas obligatoire).
Pr. A. El Mhouti FSTH
7
Inclusion dans le code HTML
JavaScript dans le <head>
8. le JavaScript est placé à l’intérieur d’un élément <script> (placé généralement à la
fin de l’élément <body>.
Exemple :
Pr. A. El Mhouti FSTH
8
Inclusion dans le code HTML
JavaScript dans le <body>
9. Remarque :
Lorsqu’on écrit du JavaScript dans un fichier HTML (dans le head, dans
le body ou les deux), on peut utiliser autant d’éléments script que l’on veut.
Dans ce cas, les scripts serons lus linéairement (dans leur ordre d’écriture).
Exemple :
Pr. A. El Mhouti FSTH
9
Inclusion dans le code HTML
JavaScript dans le <body>
10. Il est possible que de placer le code JavaScript directement dans la balise ouvrante
d’éléments HTML.
Ce type de construction est utilisé notamment pour prendre en charge des évènements
comme par exemple un clic.
Exemple : Placer le code JavaScript dans un attribut onclick de la balise <button> :
Le code JS va s’exécuter dès qu’on va cliquer sur le bouton correspondant.
Pr. A. El Mhouti FSTH
10
Inclusion dans le code HTML
JavaScript à l’intérieur d’une balise HTML
11. Pour lier fichiers HTML et JavaScript, on utilise l’élément <script> et son
attribut src= "chemin relatif du fichier .js".
Exemple : lier un fichier script.js à un fichier HTML placé dans le même dossier :
Remarque : Cette méthode est souvent la méthode recommandée dans le cas de
gros projets car elle permet une meilleure maintenabilité du code.
Pr. A. El Mhouti FSTH
11
Inclusion dans le code HTML
JavaScript dans un fichier « .js » séparé
13. JavaScript divise une page Web en objets.
Le but est de permettre d'accéder à ces objets, d'en retirer des informations et de
les manipuler.
Exemple :
Page Web chargée : Cette page s'affiche dans une fenêtre.
C'est l'objet window
Pr. A. El Mhouti FSTH
13
Objets en JS
Hiérarchie des objets
14. Exemple :
Dans cette fenêtre (window), il y a un document HTML : objet document.
→ l'objet fenêtre contient l'objet document.
Pr. A. El Mhouti FSTH
14
Objets en JS
Hiérarchie des objets
15. Exemple :
Dans ce document, on trouve un formulaire. C'est l'objet form.
→ l'objet window contient l’objet document qui contient l’objet form.
Pr. A. El Mhouti FSTH
15
Objets en JS
Hiérarchie des objets
16. Exemple :
Dans ce formulaire, on trouve trois objets : objet radio, objet bouton, objet texte.
l'objet window contient l'objet document qui contient l'objet form qui contient l'objet radio
l'objet window contient l'objet document qui contient l'objet form qui contient l'objet bouton
l'objet window contient l'objet document qui contient l'objet form qui contient l'objet text
Pr. A. El Mhouti FSTH
16
Objets en JS
Hiérarchie des objets
17. Pour accéder à un objet, il faudra donner le chemin complet de l'objet en allant du
contenant le plus extérieur à l'objet référencé.
Exemple : pour accéder au bouton radio "semaine", on écrit :
(window).document.form.radio[0]
Rmarque : L'objet window est repris par défaut par Javascript et devient donc
facultatif : document.form.radio[0]
Pr. A. El Mhouti FSTH
17
Objets en JS
Accès aux objets
18. Les objets Javascript ont des propriétés personnalisées.
Une propriété est un attribut, une caractéristique, une description de l'objet.
Exemple :
propriété des boutons radio : checked.
En JavaScript, pour accéder aux propriétés, on utilise la syntaxe :
nom_de_l'objet.nom_de_la_propriété
Exemple :
Dans le cas du bouton radio "semaine", pour tester
la propriété de sélection, on écrit :
document.form.radio[0].checked
Pr. A. El Mhouti FSTH
18
Objets en JS
Propriétés des objets
20. Variables faiblement typées
Commentaires : mono-ligne : //…., et multi-lignes : /*...*/
Séparateur d’instruction : ;
Opérateurs et instructions identiques au C/C++/Java
Des fonctions/procédures
◼ globales (méthodes associées à tous les objets)
◼ fonctions/procédures/méthodes définies par l’utilisateur
Des objets (des prototypes) :
◼ prédéfinis (String, Date, Math, etc.)
◼ liés à l’environnement
◼ définis par l’utilisateur
Pr. A. El Mhouti FSTH
20
Syntaxe
Caractéristiques
21. Opérateurs identiques à ceux du C/C++/Java
◼ opérateurs arithmétiques : + - ∗ / %
◼ opérateurs logiques : && | | !
◼ incrémentation : var++ ++var
◼ décrémentation : var-- –var
◼ comparaisons : == === != !== <= < >= >
◼ concaténation de chaîne de caractères : +
◼ affectation : = += -= ∗= ...
Pr. A. El Mhouti FSTH
21
Syntaxe
Opérateurs
22. Déclaration :
◼ Déclaration explicite : utiliser le mot var : var nom=valeur; //conseillée
◼ Déclaration implicite : sans utiliser le mot clé var : nom=valeur;
Règles générales :
◼ La déclaration est optionnelle mais elle est fortement conseillée.
◼ La variable est ‘undefined’ si aucune valeur n’est donnée à l’initialisation.
◼ Le typage est dynamique (à l’affectation).
◼ Types JavaScript : nombres, chaînes de caractères, booléens, null (pas de valeur).
◼ Le nom de la variable est sensible à la casse.
◼ Distinction de la localisation des variables (locale, globale).
Exemples :
Pr. A. El Mhouti FSTH
22
Syntaxe
Variables
23. Pr. A. El Mhouti FSTH
23
Syntaxe
Tests et boucles
24. En JavaScript, il existe deux types de fonctions :
◼ les fonctions propres à Javascript (appelée "méthodes") : elles sont associées à un
objet. Par exemple : méthode Alert() associée à l'objet window.
◼ les fonctions écrites par l’utilisateur.
Déclaration d’une fonction :
Appel d’une fonction :
Pr. A. El Mhouti FSTH
24
Syntaxe
Fonctions et Procédures
25. Déclaration :
◼ var nom = new Array ( [ dimension ] ) ;
◼ var nom = new Array ( o1 , . . . , on ) ;
Accès aux éléments du tableau avec les [ ] (ex : tableau[ 5 ])
◼ les indices varient de 0 à n-1.
◼ les éléments peuvent être de type différent.
◼ la taille peut changer dynamiquement.
◼ les tableaux à plusieurs dimensions sont possibles.
Propriétés et méthodes : length, reverse(), sort(), toString(), push(element), etc.
Tableaux associatifs : tableau['nom'], équivalent à tableau.nom.
Pr. A. El Mhouti FSTH
25
Syntaxe
Les tableaux
26. Boîte de dialogue type “pop-up” :
window.alert("Message à afficher");
Boîte de saisie simple :
reponse = window.prompt("texte","chaine par défaut");
Ouverture d’une fenêtre fille :
fenetre = window.open("page","titre");
Remarque : Ces 3 fonctions sont des méthodes de la classe window.
Exemple 3 : Boites de dialogue :
Pr. A. El Mhouti FSTH
26
Syntaxe
Boîtes de dialogue et fenêtres
27. Pour écrire dans le document HTML, on utilise la méthode write() de l’objet document.
Syntaxe :
Ecrire un texte : write("votre texte");
Ecrire une variable : write(nom);
Associer du texte et des variables : write("Votre nom est" + nom);
Exemple 2 :
Remarque : On peut utiliser les balises HTML pour agrémenter le texte :
◼ write("<b> Le résultat est </b>" + res); ou
◼ write ("<b>" + "Le résultat est " + "</b>" + res)
Exemple 4 :
La méthode writeln() est fort proche de write(), mais ajoute un retour chariot.
Pr. A. El Mhouti FSTH
27
Syntaxe
Affichage dans le document
28. variable.big() : affiche la variable comme si elle était comprise entre les balises
HTML <big> </big>. Les quatre instructions JavaScript suivantes sont équivalentes :
var nom="Salah"; //nom est une variable
◼ document.write("<big>"+nom+"</big>");
◼ document.write('<big>Salah</big>');
◼ document.write(nom.big());
◼ document.write("Salah".big());
Il en est de même pour :
◼ variable.small();
◼ variable.blink(); (n'est valable que sous Netscape 3 et plus)
◼ variable.bold();
◼ variable.fixed();
◼ variable.italics();
◼ variable.fontcolor(color );
◼ variable.fontsize(x);
◼ variable.strike(); (texte barré)
◼ variable.sub();
◼ variable.sup();
Pr. A. El Mhouti FSTH
28
Syntaxe
Formatage du texte dans le document
29. Les instructions de formatage de document :
document.bgColor : spécifier la couleur du fond (arrière-plan) d'un objet
document.
◼ Exemples :
◼ document.bgColor="white";
◼ document.bgColor="#FFFFFF";
document.fgColor : spécifier la couleur d'avant-plan (texte) d'un objet document.
document.alinkColor : spécifier la couleur d'un lien actif (après le clic de la souris
mais avant de quitter le lien) d'un objet document.
document.vlinkColor : spécifier la couleur d'un lien visité d'un objet document.
document.linkColor : spécifier la couleur d'un lien d'un objet document.
Pr. A. El Mhouti FSTH
29
Syntaxe
Formatage du document
31. Les événements sont des actions de l'utilisateur, qui vont pouvoir donner
lieu à une interactivité des pages Web.
Les principaux événements implémentés en JavaScript sont (ordre alphabétique):
Pr. A. El Mhouti FSTH
31
Les événements
Les événements JS
Evénement Description
Abort Cet événement se produit lorsque l'utilisateur interrompt le chargement de l'image
Blur Se produit lorsque l'élément perd le focus (l'utilisateur clique hors de cet élément).
Change Se produit lorsque l'utilisateur modifie le contenu d'un champ de données.
Click Se produit lorsque l'utilisateur clique sur l'élément associé à l'événement.
Dblclick Se produit lorsque l'utilisateur double-clique sur l'élément associé à l'événement.
Dragdrop Se produit lorsque l'utilisateur effectue un glisser-déposer sur la fenêtre du navigateur.
Error Se déclenche lorsqu'une erreur apparaît durant le chargement de la page.
Focus Se produit lorsque l'utilisateur donne le focus à un élément (cet élément est sélectionné)
32. Pr. A. El Mhouti FSTH
32
Les événements
Les événements JS
Evénement Description
keydown Se produit lorsque l'utilisateur appuie sur une touche de son clavier.
keypress Se produit lorsque l'utilisateur maintient une touche de son clavier enfoncée.
keyup Se produit lorsque l'utilisateur relâche une touche du clavier préalablement enfoncée.
Load Se produit lorsque le navigateur charge la page en cours
Mouseover Se produit lorsque l'utilisateur positionne le curseur de la souris au-dessus d'un élément
Mouseout Se produit lorsque le curseur de la souris quitte un élément.
Reset Se produit lorsque l'utilisateur efface les données d'un formulaire à l'aide du bouton
Reset.
Resize Se produit lorsque l'utilisateur redimensionne la fenêtre du navigateur
Select Se produit lorsque l'utilisateur sélectionne un texte (ou une partie d'un texte) dans un
champ de type "text" ou "textarea"
Input Se produit lorsque l'utilisateur écrit ou modifie la valeur d'un input
Submit Se produit lorsque l'utilisateur clique sur le bouton de soumission d'un formulaire
Unload Se produit lorsque l'utilisateur quitte la page en cours
33. Chaque événement ne peut pas être associé à n'importe quel objet.
Par exemple, l’événement change ne pourra pas s'appliquer à un lien hypertexte.
Récapitulatif des objets auxquels peuvent être associés chaque événement :
Pr. A. El Mhouti FSTH
33
Les événements
Association des événements aux objets
Evénements Objets concernés
abort Image
blur Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text,
TextArea, window
change FileUpload, Select, Submit, Text, TextArea
click Button, document, Checkbox, Link, Radio, Reset, Select, Submit
dblclick document, Link
dragdrop window
error Image, window
focus Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text,
TextArea, window
keydown document, Image, Link, TextArea
keypress document, Image, Link, TextArea
34. Pr. A. El Mhouti FSTH
34
Les événements
Association des événements aux objets
Evénements Objets concernés
keyup document, Image, Link, TextArea
load Image, Layer, window
mousedown Button, document, Link
mousemove Aucun spécifiquement
mouseout Layer, Link
mouseover Area, Layer, Link
mouseup Button, document, Link
move window
reset form
resize window
select text, Textarea
submit Form
unload window
Récapitulatif des objets auxquels peuvent être associés chaque événement :
35. Pour associer une action à un événement, on utilise les gestionnaires
d'événements.
La syntaxe d'un gestionnaire d'événement est la suivante :
onEvenement="Action_Javascript_ou_Fonction();"
Exemple :
onclick="alert('Vous avez cliqué sur cet élément')";
Pr. A. El Mhouti FSTH
35
Les événements
Les gestionnaires d'événements
36. Pour associer un évènement a un élément HTML, il suffit de mettre dans la balise le
nom de l'evenement (sous forme d’un attribut) et de lui associer une fonction.
<balise onEvenement="action">
la valeur associée est le code exécuté.
Exemple :
<img src='une_image.jpg' onclick='fonction(par1,par2)' />
On peut exécuter plusieurs fonctions sur le même évènement en rajoutant un point
virgule.
<img src='une_image.jpg' onclick='fonc1(); fonc2(); fonc()' />
Pr. A. El Mhouti FSTH
36
Les événements
Associer un évènement a un élément
37. onclick : se produit lorsque l'utilisateur clique sur l'élément associé à l'événement.
Exemple 5 : Associer l’évènement onclick a un bouton de formulaire :
Pr. A. El Mhouti FSTH
37
Les événements
Exemples : onclick
38. L'événement Load survient lorsque la page a fini de se charger.
A l'inverse, Unload survient lorsque l'utilisateur quitte la page.
Les événements onLoad et onUnload sont utilisés sous forme d'attributs de la
balise <body> ou <frameset>.
Exemple 6 : un script pour souhaiter la bienvenue à l'ouverture d'une page et un
petit mot d'au revoir au moment de quitter la page :
Pr. A. El Mhouti FSTH
38
Les événements
Exemples : onLoad et onUnload
39. L'événement onmouseOver se produit au survol de la souris (lien ou image).
L'événement onmouseOut, généralement associé à un onmouseOver, se produit
lorsque le pointeur quitte la zone sensible (lien ou image).
Exemple 7 :
Pr. A. El Mhouti FSTH
39
Les événements
Exemples : onmouseOver et onmouseOut
41. Global définit les propriétés et méthodes communes à tous les objets.
◼ Les méthodes et propriétés de cet objet n’appartiennent à aucune classe et cet
objet n’a pas de nom.
◼ La seule façon de faire référence à cet objet est this (ou rien).
◼ Chaque variable ou fonction globale est propriété de Global
◼ Propriétés de Global : Infinity, NaN, undefined
◼ Quelques méthodes :
◼ parseFloat(s) : transforme une chaîne de caractères en un nombre
flottant.
◼ parseInt (s,base): ransformer une chaîne de caractères en un entier.
◼ isNaN(expression) : détermine si la valeur passée en argument est NaN
◼ eval( expression ) évalue une expression.
◼ ...
Pr. A. El Mhouti FSTH
41
Objets prédéfinis
L’objet Global et les classes prédéfinies
42. Objet de navigateur
L'objet window se situe au sommet de la hiérarchie des objets de navigateur.
Pr. A. El Mhouti FSTH
42
Objets prédéfinis
L’objet Window
43. L'objet document est un objet de navigateur qui représente un document Web.
document désigne automatiquement le document de la fenêtre en cours.
Propriétés d'un objet document :
◼ location : indique l'URL du document.
◼ title : représente le titre du document.
◼ referrer : l’adresse d’où l’on vient.
◼ lastModified : est la date de dernière modification de la page.
◼ linkcolor : la couleur des liens.
◼ bgColor : couleur d'arrière plan
Quelques méthodes de l’objet document :
◼ write() : écrit du texte ou de l’html dans le document.
◼ writeln() : idem, mais suivi d’un retour-chariot.
◼ close() : fermeture du document en cours.
◼ getElementById(‘id_element'): retourne la valeur d’un élément identifié par son id.
Pr. A. El Mhouti FSTH
43
Objets prédéfinis
L’objet document
44. JavaScript stocke les chaînes en tant qu'objets String.
Exemples :
s1= "Bonjour";
s2= new String("Bonjour");
chaine=s1 + s2; // concaténation
Quelques méthodes de l’objet string :
Pr. A. El Mhouti FSTH
44
Objets prédéfinis
L’objet String
chaîne.length; La longueur de la chaîne
Chaîne=chaîne.toLowerCase(); retourne une chaîne en minuscules
Chaîne =chaîne.toUpperCase(); retourne une chaîne en majuscules
Chaîne=chaîne.charAt(n); Retourne un seul caractère d’indice n
45. Math est un objet prédéfini de JavaScript qui comprend de nombreuses constantes et
fonctions.
Les propriétés de l'objet Math sont des constantes mathématiques, ses méthodes des
fonctions mathématiques.
Liste des principales méthodes :
◼ Math.sqrt() , racine carrée.
◼ Math.log() , Math.exp() , Math.abs() ,Math.cos (), Math.sin() , Math.tan()
◼ Math.floor(), Math.ceil(),entier immédiatement inférieur /supérieur.
◼ Math.pow(base, exposant)
◼ Math.max() , Math.min()
◼ Math.random(), nombre "réel" choisi au hasard dans [0 , 1[ .
◼ Math.round(), arrondit à l'entier le plus proche.
Pr. A. El Mhouti FSTH
45
Objets prédéfinis
L’objet Math
46. Date est un objet prédéfini de JavaScript qui permet de manipuler facilement dates
et heures.
Pour construire un objet de type Date, il faut utiliser un constructeur Date() avec le
mot-clé new : variable = new Date(liste de paramètres)
◼ Les secondes et les minutes sont notées de 0 à 59.
◼ Les jours de la semaine de 0 (dimanche) à 6.
◼ Les jours du mois de 0 à 30.
◼ Les mois de 0 (janvier) à 11.
◼ Les années sont décomptées depuis 1900.
L’objet Date est utilisé à travers ses getters et setters :
getDate(), getMonth(), getFullYear(), getHours(), getMinutes(), getSecondes()
setDate(), setMonth(), setFullYear(), setHours(), setMinutes(), setSecondes()
Pr. A. El Mhouti FSTH
46
Objets prédéfinis
L’objet Date