SlideShare une entreprise Scribd logo
1  sur  46
Télécharger pour lire hors ligne
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
 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
Introduction à JavaScript
 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
Inclusion dans le code HTML
 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
 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>
 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>
 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>
 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
 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é
Objets en JS
 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
 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
 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
 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
 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
 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
Syntaxe de JS
 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
 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
 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
Pr. A. El Mhouti FSTH
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 :
Pr. A. El Mhouti FSTH
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.
Pr. A. El Mhouti FSTH
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 :
Pr. A. El Mhouti FSTH
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.
Pr. A. El Mhouti FSTH
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();
Pr. A. El Mhouti FSTH
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.
Pr. A. El Mhouti FSTH
29
Syntaxe
Formatage du document
Les événements
 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é)
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
 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
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 :
 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
 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
 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
 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
 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
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.
◼ ...
Pr. A. El Mhouti FSTH
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.
Pr. A. El Mhouti FSTH
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.
Pr. A. El Mhouti FSTH
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 :
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
 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
 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

Contenu connexe

Similaire à M31_Chapitre 4-JavaScript.pdf

Formation java script
Formation java scriptFormation java script
Formation java scriptRomdhani Asma
 
introJavaScript.ppt
introJavaScript.pptintroJavaScript.ppt
introJavaScript.pptMarwenJAZI
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScriptAbdoulaye Dieng
 
programmation orienté objet c++
programmation orienté objet c++programmation orienté objet c++
programmation orienté objet c++coursuniv
 
La puissance des pseudo-éléments
La puissance des pseudo-élémentsLa puissance des pseudo-éléments
La puissance des pseudo-élémentsGeoffrey Croftє
 
PHP (Partie I) Par Mahdi Ben Alaya
PHP (Partie I) Par Mahdi Ben AlayaPHP (Partie I) Par Mahdi Ben Alaya
PHP (Partie I) Par Mahdi Ben AlayaMahdi Ben Alaya
 
javaScript(1)-2023-2024-Partie1-Mechid (1).pdf
javaScript(1)-2023-2024-Partie1-Mechid (1).pdfjavaScript(1)-2023-2024-Partie1-Mechid (1).pdf
javaScript(1)-2023-2024-Partie1-Mechid (1).pdfmistersmile053
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JSAbdoulaye Dieng
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScriptAbdoulaye Dieng
 
Programmation web cours php -- sahmi academy
Programmation web   cours php -- sahmi academyProgrammation web   cours php -- sahmi academy
Programmation web cours php -- sahmi academySoufiane SAHMI
 
Chapitre4 cours de java
Chapitre4 cours de javaChapitre4 cours de java
Chapitre4 cours de javainfo1994
 
Cours JavaScript 2.ppt
Cours JavaScript 2.pptCours JavaScript 2.ppt
Cours JavaScript 2.pptPROFPROF11
 
Cours java smi 2007 2008
Cours java smi 2007 2008Cours java smi 2007 2008
Cours java smi 2007 2008Khalil Lechheb
 
Cours java smi 2007 2008
Cours java smi 2007 2008Cours java smi 2007 2008
Cours java smi 2007 2008Khalil Lechheb
 
Formation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHPFormation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHPkemenaran
 
Javascript pour les Développeurs WEB
Javascript pour les Développeurs WEBJavascript pour les Développeurs WEB
Javascript pour les Développeurs WEBAbbes Rharrab
 

Similaire à M31_Chapitre 4-JavaScript.pdf (20)

Formation java script
Formation java scriptFormation java script
Formation java script
 
introJavaScript.ppt
introJavaScript.pptintroJavaScript.ppt
introJavaScript.ppt
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
programmation orienté objet c++
programmation orienté objet c++programmation orienté objet c++
programmation orienté objet c++
 
La puissance des pseudo-éléments
La puissance des pseudo-élémentsLa puissance des pseudo-éléments
La puissance des pseudo-éléments
 
Cours wpf avancé
Cours wpf avancéCours wpf avancé
Cours wpf avancé
 
PHP (Partie I) Par Mahdi Ben Alaya
PHP (Partie I) Par Mahdi Ben AlayaPHP (Partie I) Par Mahdi Ben Alaya
PHP (Partie I) Par Mahdi Ben Alaya
 
javaScript(1)-2023-2024-Partie1-Mechid (1).pdf
javaScript(1)-2023-2024-Partie1-Mechid (1).pdfjavaScript(1)-2023-2024-Partie1-Mechid (1).pdf
javaScript(1)-2023-2024-Partie1-Mechid (1).pdf
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Programmation web cours php -- sahmi academy
Programmation web   cours php -- sahmi academyProgrammation web   cours php -- sahmi academy
Programmation web cours php -- sahmi academy
 
Chapitre4 cours de java
Chapitre4 cours de javaChapitre4 cours de java
Chapitre4 cours de java
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
 
Cours Ynov JS B1_1
Cours Ynov JS B1_1Cours Ynov JS B1_1
Cours Ynov JS B1_1
 
Cours JavaScript 2.ppt
Cours JavaScript 2.pptCours JavaScript 2.ppt
Cours JavaScript 2.ppt
 
Cours java smi 2007 2008
Cours java smi 2007 2008Cours java smi 2007 2008
Cours java smi 2007 2008
 
Cours java smi 2007 2008
Cours java smi 2007 2008Cours java smi 2007 2008
Cours java smi 2007 2008
 
Formation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHPFormation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHP
 
Javascript pour les Développeurs WEB
Javascript pour les Développeurs WEBJavascript pour les Développeurs WEB
Javascript pour les Développeurs WEB
 
Tapestry
TapestryTapestry
Tapestry
 

M31_Chapitre 4-JavaScript.pdf

  • 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
  • 5. Inclusion dans le code HTML
  • 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