M31_Chapitre 4-JavaScript.pdf

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
M31 : Technologies du Web
Chapitre 4 : Langage JavaScript
Pr. Abderrahim El Mhouti
Faculté des Sciences et Techniques d’Al-Hoceima
a.elmhouti@uae.ac.ma

 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
2
Plan

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

 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.
6
Inclusion dans le code HTML
JavaScript

 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).
7
JavaScript dans le <head>

 le JavaScript est placé à l’intérieur d’un élément <script> (placé généralement à la
fin de l’élément <body>.
 Exemple :
8
JavaScript dans le <body>

 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 :
9
JavaScript dans le <body>

 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.
10
JavaScript à l’intérieur d’une balise HTML

 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.
11
JavaScript dans un fichier « .js » séparé

 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
13
Objets en JS
Hiérarchie des objets

 Exemple :
 Dans cette fenêtre (window), il y a un document HTML : objet document.
 → l'objet fenêtre contient l'objet document.
14
Objets en JS

 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.
15
Objets en JS

 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
16
Objets en JS

 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]
17
Objets en JS
Accès aux objets

 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
18
Objets en JS
Propriétés des objets

 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
20
Syntaxe
Caractéristiques

 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 : = += -= ∗= ...
21
Syntaxe
Opérateurs

 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 :
22
Syntaxe
Variables

23
Syntaxe
Tests et boucles

 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 :
24
Syntaxe
Fonctions et Procédures

 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.
25
Syntaxe
Les tableaux

 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 :
26
Syntaxe
Boîtes de dialogue et fenêtres

 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.
27
Syntaxe
Affichage dans le document

 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();
28
Syntaxe
Formatage du texte dans le document

 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.
29
Syntaxe
Formatage du document

 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):
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
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

 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 :
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
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 :

 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')";
35
Les événements
Les gestionnaires d'événements

 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()' />
36
Les événements
Associer un évènement a un élément

 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 :
37
Les événements
Exemples : onclick

 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 :
38
Les événements
Exemples : onLoad et onUnload

 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 :
39
Les événements
Exemples : onmouseOver et onmouseOut

Objets prédéfinis
(les prototypes)

 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.
◼ ...
41
Objets prédéfinis
L’objet Global et les classes prédéfinies

 Objet de navigateur
 L'objet window se situe au sommet de la hiérarchie des objets de navigateur.
42
Objets prédéfinis
L’objet Window

 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.
43
Objets prédéfinis
L’objet document

 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 :
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

 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.
45
Objets prédéfinis
L’objet Math

 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()
46
Objets prédéfinis
L’objet Date

M31_Chapitre 4-JavaScript.pdf

Contenu connexe

Tendances

Similaire à M31_Chapitre 4-JavaScript.pdf

Dernier

M31_Chapitre 4-JavaScript.pdf