SlideShare une entreprise Scribd logo
LE LANGAGE JAVASCRIPT
PolytechniqueSousse
Enseignante: Yamina Ghobni
2021/2022
Introduction
I. L’arbre DOM
II. Propriétés et méthodes de nœuds de l’arbre DOM
III. Variables, types, opérateurs, objets
IV. Instructions conditionnelles & évènements
V. Frameworks JavaScript: JQuery, Angular JS
PLAN
2
Introduction
I. L’arbre DOM
II. Propriétés et méthodes de nœuds de l’arbre DOM
III. Variables, types, opérateurs, objets
IV. Instructions conditionnelles & évènements
V. Frameworks JavaScript: JQuery, Angular JS
PLAN
3
Introduction
JavaScript
• HTML : langage statique
• CSS : Capacités dynamiques limitées
• Ne répondent pas à tous les besoins : intégrations, traitement, boucles, etc.
• JavaScript : langage de scripts interprété
• JavaScript : le navigateur dispose d’un interprète javascript
• JavaScript : agir sur les propriétés des éléments d’un document HTML
• Javascript : nécessite des bases en programmation
• Javascript: dynamicité et interactivité du document affiché
4
Que peut faire JS ?
JavaScript
• Afficher des messages
• Valider les formulaires
• Appliquer des calculs
• Générer des animations
• Détecter le navigateur et ses capacités
• Interagir avec le serveur à travers les services web
5
Intégrer du JS dans une page web
JavaScript
• Un script JavaScript est intégré à travers la balise «
script »
• Un script JavaScript peut être défini à :
 L’intérieur du corps de la page
 L’entête
 Fichier externe
• Fichier JavaScript : extension « js »
6
Exemple 1
JavaScript
<html>
<head>
<title>Exemple 1 JavaScript</title>
<link href="style2.css" type="text/css"
rel="stylesheet"/>
</head>
<body>
<h1>Affichage d'une variable d'entrée avec JS </h1>
<script>
var x= 8;
window.alert("la valeur de x est "+x);
</script>
<h1>Affichage d'une variable de sortie avec JS </h1>
<script>
var y= x*3;
window.alert("la valeur de y est "+y);
</script>
</body
>
</html>
7
Exemple 2
JavaScript
<html>
<body>
<h1> Premier exemple avec Javascript </h1>
<p>Cliquer sur le bouton pour afficher un message
d'alarme.</p>
<button onclick="myFunction()"> Allons-y</button>
<script>
function
myFunction() {
alert("Attention !!!!!");
}
</script
>
Script JavaScript défini à l’intérieur du code HTML
</body
>
</html>
8
Exemple 2
JavaScript
Script JavaScript défini à l’extérieur du code HTM
<script src="code.js" type="text/javascript">
</script>
<html>
<head>
</head>
<body>
<h1> Premier exemple avec Javascript </h1>
<p>Cliquer sur le bouton pour afficher un message
d'alarme.</p>
<button onclick="myFunction()"> Allons-y</button>
</body>
</html>
function myFunction() {
alert("Attention !!!!!");
}
9
code.js
Introduction
I. L’arbre DOM
II. Propriétés et méthodes de nœuds de l’arbre DOM
III. Types, variables, opérateurs, objets
IV. Instructions conditionnelles & évènements
V. Frameworks JavaScript: JQuery, Angular JS
PLAN
10
L’arbreDOM
JavaScript 11
JavaScript : permet de manipuler l’arbreDOM. C’estquoile DOM ?
• DOM : Document Object Model
• DOM : représentation structurée du document sous forme d'un arbre
• DOM : définit la façon dont la structure peut être manipulée
• JavaScript interagit avec la page via la structure DOM accessible via une
variable appelée « document »
• DOM : accéder à un ou plusieurs éléments
• Pour accéder à un élément par son « id », utiliser « GetElementById »
• Si un élément HTML dispose d’un « id », une variable est créée pour lui
Rappel : arbre et vocabulaire
JavaScript 12
Racinedel’arbre DOM
Rappel : arbre et vocabulaire
JavaScript 13
Les feuillesde l’arbreDOM
Rappel : arbre et vocabulaire
JavaScript 14
 Nœud article: sous arbre de la racine
 Nœuds du sous arbre : descendants du nœud article
 Nœud article : père des nœuds h1, p, img et p
 H1, p, img et p : fils du nœud article
Rappel : arbre et vocabulaire
JavaScript 15
 h1, p, img, p : nœudsfrères
 Le nœudimg suit le premier nœudp
 Le nœudh1 précède le premier nœudp
 h1, p, img et p : fils du nœudarticle
Commentconstruirel’arbre DOM
JavaScript 16
1. Parcourir le document séquentiellement ;
2. Chaque élément est un nouveau nœud :
 Si l’élément <elt> est emboité dans l’élément <boite>, le nœud
elt est fils du nœud boite
 Les éléments emboités dans le même niveau sont frères
 Ordre d’arrivés dans le document : gauche à droite dans le DOM
DOM : exemple
JavaScript 17
Fenêtre et DOM
JavaScript 18
• Fenêtre : trois objets (location, history et document)
• History : historique du navigateur
• Location : informations sur le site : port, protocole, etc.
• DOM : arborescence (chaque élément : nœud)
History
JavaScript 19
Location
JavaScript 20
Introduction
I. L’arbre DOM
II. Propriétés et méthodes de nœuds de l’arbre DOM
III. Variables, types, opérateurs, objets
IV. Instructions conditionnelles & évènements
V. Frameworks JavaScript: JQuery, Angular JS
PLAN
21
Propriétés/Méthodes desnœuds
JavaScript 22
Propriétés/Méthodes desnœuds
JavaScript 23
Styled’un nœud
JavaScript 24
• Propriétés CSS accessibles via la propriété « style » d’un
nœud
• Exemple : nœud.style.backgroundColor = ’yellow’;
Introduction
I. L’arbre DOM
II. Propriétés et méthodes de nœuds de l’arbre DOM
III. Variables, types, opérateurs, fonctions, objets
IV. Instructions conditionnelles & évènements
V. Frameworks JavaScript: JQuery, Angular JS
PLAN
25
Instructions et variables
JavaScript 26
• La syntaxe de JavaScript ressemble à la famille C, C++, java,
C#, etc.
• Un script JS : plusieurs instructions
• Type d’instructions: déclarations, opérations, etc.
• Chaque instruction se termine par « ; »
• Déclaration de variables : avec var
• Convertir une variable : parseInt ou parseFloat
Types
JavaScript 27
• Chaine de caractères : var s = « Bonjour » ou var = new
String(‘bonjour’)
• Tableaux : var tab = new Array(3), var tab = new Array(1,2,3), var tab =
[1,2,3]
Opérateurs
JavaScript 28
Opérateurs
JavaScript 29
Fonctions
JavaScript 30
• Déclarer une fonction : avec le mot clé
function
• Une fonction est délimitée par des
accolades { }
• Retour de la fonction : avec return
• Commentaires : avec // ou /* et */
Exemple
JavaScript 31
Propriétés des chaines de
caractères
JavaScript 32
Propriétés des tableaux
JavaScript 33
Objets
JavaScript 34
• Trois manières pour déclarer les objets :
a. New Object
b. Déclaration directe
c. Déclaration avec les fonctions
Objets
JavaScript 35
• Trois manières pour déclarer les objets :
a. New Object
b. Déclaration directe
c. Déclaration avec les fonctions
Objets
JavaScript 36
• Trois manières pour déclarer les
objets :
a. New Object
b. Déclaration directe
c. Déclaration avec les
fonctions
Objets prédéfinis
JavaScript 37
• L’objet« Math » : utilitaires mathématiques
• L’objet« String » : gère les chaines de
caractères
• L’objet« Date » : gère la date et heure
Objets prédéfinis
JavaScript 38
• L’objet« Math » : utilitaires mathématiques
• L’objet« String » : gère les chaines de
caractères
• L’objet« Date » : gère la date et heure
Introduction
I. L’arbre DOM
II. Propriétés et méthodes de nœuds de l’arbre DOM
III. Variables, types, opérateurs, fonctions, objets
IV. Instructions conditionnelles & évènements
V. Frameworks JavaScript: JQuery, Angular JS
PLAN
39
Instructions
conditionnelles
Exemple :
JavaScript 40
Conditions multiples
JavaScript 41
Conditions multiples
Exemple :
JavaScript 42
Boucles for
JavaScript 43
Exemple :
Boucles while
JavaScript 44
Evènements
JavaScript 45
• évènements: fonctions appelées en réaction à une action de l’utilisateur :
souris, clavier, etc.
• Gestionnaire d’évènement : fonction répondant à un évènement
• Evènements sont par convention préfixés par « on ». Exemple : «
onclick »
Evènements
JavaScript 46
Evènements de la souris
JavaScript 47
Evènements des formulaires
JavaScript 48
Evènements du clavier
JavaScript 49
Evènements de la fenêtre
JavaScript 50
Les minuteurs
JavaScript 51
• Minuteurs : gestionnaires d’évènements déclenchés à des intervalles
de temps (en ms)
• Les minuteurs (timers) : déclenchent des actions périodiques sur la page
• Création d’un minuteur : se fait en utilisant « setInterval »
• Arrêt d’un minuteur : se fait en utilisant « clearInterval »
Interaction avec les
fenêtres
JavaScript 52
Boites de dialogue
JavaScript 53
Introduction
I. L’arbre DOM
II. Propriétés et méthodes de nœuds de l’arbre DOM
III. Variables, types, opérateurs, fonctions, objets
IV. Instructions conditionnelles & évènements
V. Frameworks JavaScript: JQuery, Angular JS
PLAN
54
jQuery
JavaScript 55
• Bibliothèque Javascript : simplifier le développement de sites web
interactifs
• Puissante, légère, gratuite, open source
• Principe : sélectionner une partie du document et agir dessus
• Téléchargeable sur http://jquery.com/download/
• Exemple
:https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_p
• Exemple en TP.
AngularJS
JavaScript 56
• AngularJS : framework javascript
• Créer des applications web dynamiques
• Représenté par 3 composantes principales: model, view,
Controller
• Démo : Lien démo
AngularJS : exemple
JavaScript 57
• Lien vers l’exemple: https://github.com/NOFFABEL/TODO-APP
• Procédure d’installation de l’application:
 Cloner le projet : git clone
https://github.com/NOFFABEL/TODO-APP
 Installer les dépendances : npm install
 Démarrer l’application : npm start
 L’application s’ouvrira directement dansle navigateur:localhost:4200
Introduction
I. L’arbre DOM
II. Propriétés et méthodes de nœuds de l’arbre DOM
III. Variables, types, opérateurs, fonctions, objets
IV. Instructions conditionnelles & évènements
V. Frameworks JavaScript: JQuery, Angular JS
PLAN
58
JavaScript
THANK
YOU

Contenu connexe

Tendances

POO Java Chapitre 4 Heritage et Polymorphisme
POO Java Chapitre 4 Heritage et PolymorphismePOO Java Chapitre 4 Heritage et Polymorphisme
POO Java Chapitre 4 Heritage et Polymorphisme
Mouna Torjmen
 
Développement d'un site web de E-Commerce avec PHP (Première Partie)
Développement d'un site web de E-Commerce avec PHP (Première Partie)Développement d'un site web de E-Commerce avec PHP (Première Partie)
Développement d'un site web de E-Commerce avec PHP (Première Partie)
ENSET, Université Hassan II Casablanca
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
Kristen Le Liboux
 
POO Java Chapitre 2 Encapsulation
POO Java Chapitre 2 EncapsulationPOO Java Chapitre 2 Encapsulation
POO Java Chapitre 2 Encapsulation
Mouna Torjmen
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
Abel LIFAEFI MBULA
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
ENSET, Université Hassan II Casablanca
 
Introduction à Node.js
Introduction à Node.js Introduction à Node.js
Introduction à Node.js
Sonam TCHEUTSEUN
 
Cours design pattern m youssfi partie 4 composite
Cours design pattern m youssfi partie 4 compositeCours design pattern m youssfi partie 4 composite
Cours design pattern m youssfi partie 4 composite
ENSET, Université Hassan II Casablanca
 
TP1 Big Data - MapReduce
TP1 Big Data - MapReduceTP1 Big Data - MapReduce
TP1 Big Data - MapReduce
Amal Abid
 
Cours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategyCours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategy
ENSET, Université Hassan II Casablanca
 
Langage C#
Langage C#Langage C#
Mise en oeuvre des Frameworks de Machines et Deep Learning pour les Applicati...
Mise en oeuvre des Frameworks de Machines et Deep Learning pour les Applicati...Mise en oeuvre des Frameworks de Machines et Deep Learning pour les Applicati...
Mise en oeuvre des Frameworks de Machines et Deep Learning pour les Applicati...
ENSET, Université Hassan II Casablanca
 
Telecharger Exercices corrigés PL/SQL
Telecharger Exercices corrigés PL/SQLTelecharger Exercices corrigés PL/SQL
Telecharger Exercices corrigés PL/SQL
webreaker
 
POO Java Chapitre 1 Classe & Objet
POO Java Chapitre 1 Classe & ObjetPOO Java Chapitre 1 Classe & Objet
POO Java Chapitre 1 Classe & Objet
Mouna Torjmen
 
Support programmation orientée objet c# .net version f8
Support programmation orientée objet c#  .net version f8Support programmation orientée objet c#  .net version f8
Support programmation orientée objet c# .net version f8
ENSET, Université Hassan II Casablanca
 
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfiSupport de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
ENSET, Université Hassan II Casablanca
 
Cours javascript
Cours javascriptCours javascript
Cours javascript
krymo
 
HTML, CSS et Javascript
HTML, CSS et JavascriptHTML, CSS et Javascript
HTML, CSS et Javascript
ECAM Brussels Engineering School
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
ENSET, Université Hassan II Casablanca
 
Le langage html
Le langage htmlLe langage html
Le langage html
Mohammed Amine Mostefai
 

Tendances (20)

POO Java Chapitre 4 Heritage et Polymorphisme
POO Java Chapitre 4 Heritage et PolymorphismePOO Java Chapitre 4 Heritage et Polymorphisme
POO Java Chapitre 4 Heritage et Polymorphisme
 
Développement d'un site web de E-Commerce avec PHP (Première Partie)
Développement d'un site web de E-Commerce avec PHP (Première Partie)Développement d'un site web de E-Commerce avec PHP (Première Partie)
Développement d'un site web de E-Commerce avec PHP (Première Partie)
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
 
POO Java Chapitre 2 Encapsulation
POO Java Chapitre 2 EncapsulationPOO Java Chapitre 2 Encapsulation
POO Java Chapitre 2 Encapsulation
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
 
Introduction à Node.js
Introduction à Node.js Introduction à Node.js
Introduction à Node.js
 
Cours design pattern m youssfi partie 4 composite
Cours design pattern m youssfi partie 4 compositeCours design pattern m youssfi partie 4 composite
Cours design pattern m youssfi partie 4 composite
 
TP1 Big Data - MapReduce
TP1 Big Data - MapReduceTP1 Big Data - MapReduce
TP1 Big Data - MapReduce
 
Cours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategyCours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategy
 
Langage C#
Langage C#Langage C#
Langage C#
 
Mise en oeuvre des Frameworks de Machines et Deep Learning pour les Applicati...
Mise en oeuvre des Frameworks de Machines et Deep Learning pour les Applicati...Mise en oeuvre des Frameworks de Machines et Deep Learning pour les Applicati...
Mise en oeuvre des Frameworks de Machines et Deep Learning pour les Applicati...
 
Telecharger Exercices corrigés PL/SQL
Telecharger Exercices corrigés PL/SQLTelecharger Exercices corrigés PL/SQL
Telecharger Exercices corrigés PL/SQL
 
POO Java Chapitre 1 Classe & Objet
POO Java Chapitre 1 Classe & ObjetPOO Java Chapitre 1 Classe & Objet
POO Java Chapitre 1 Classe & Objet
 
Support programmation orientée objet c# .net version f8
Support programmation orientée objet c#  .net version f8Support programmation orientée objet c#  .net version f8
Support programmation orientée objet c# .net version f8
 
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfiSupport de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
 
Cours javascript
Cours javascriptCours javascript
Cours javascript
 
HTML, CSS et Javascript
HTML, CSS et JavascriptHTML, CSS et Javascript
HTML, CSS et Javascript
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
 
Le langage html
Le langage htmlLe langage html
Le langage html
 

Similaire à cours javascript.pptx

FORMATION javascript.pdf
FORMATION javascript.pdfFORMATION javascript.pdf
FORMATION javascript.pdf
OualidBelbrik
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)
Tugdual Grall
 
Spark - au dela du dataframe avec Tungsten et Catalyst
Spark - au dela du dataframe avec Tungsten et CatalystSpark - au dela du dataframe avec Tungsten et Catalyst
Spark - au dela du dataframe avec Tungsten et Catalyst
Mathieu Goeminne
 
Introduction au Jquery
Introduction au JqueryIntroduction au Jquery
Introduction au Jquery
Abdoulaye Dieng
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
Kristen Le Liboux
 
jQuery
jQueryjQuery
jQuery
Franck SIMON
 
Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !
Microsoft Technet France
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
davrous
 
Deuxième partie.pptx
Deuxième partie.pptxDeuxième partie.pptx
Deuxième partie.pptx
SafaeLhr1
 
Javascript proprement
Javascript proprementJavascript proprement
Javascript proprement
Guillaume Collic
 
Cours JavaScript.ppt
Cours JavaScript.pptCours JavaScript.ppt
Cours JavaScript.ppt
PROFPROF11
 
Cours Ynov JS B1_1
Cours Ynov JS B1_1Cours Ynov JS B1_1
Cours Ynov JS B1_1
ThomasBrunet18
 
Java script Introduction
Java script IntroductionJava script Introduction
Java script Introduction
Mohamed MHAMDI
 
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
maru.maru
 
Initiation au JavaScript
Initiation au JavaScriptInitiation au JavaScript
Initiation au JavaScript
Mouna Dhaouadi
 
Chapitre4_ConceptionDynamique (1).pptx
Chapitre4_ConceptionDynamique (1).pptxChapitre4_ConceptionDynamique (1).pptx
Chapitre4_ConceptionDynamique (1).pptx
fatmaezzahranouioui
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
hugomallet
 
jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09
Claude Coulombe
 

Similaire à cours javascript.pptx (20)

FORMATION javascript.pdf
FORMATION javascript.pdfFORMATION javascript.pdf
FORMATION javascript.pdf
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)
 
Spark - au dela du dataframe avec Tungsten et Catalyst
Spark - au dela du dataframe avec Tungsten et CatalystSpark - au dela du dataframe avec Tungsten et Catalyst
Spark - au dela du dataframe avec Tungsten et Catalyst
 
Introduction au Jquery
Introduction au JqueryIntroduction au Jquery
Introduction au Jquery
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
 
jQuery
jQueryjQuery
jQuery
 
Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
 
Deuxième partie.pptx
Deuxième partie.pptxDeuxième partie.pptx
Deuxième partie.pptx
 
Javascript proprement
Javascript proprementJavascript proprement
Javascript proprement
 
Cours JavaScript.ppt
Cours JavaScript.pptCours JavaScript.ppt
Cours JavaScript.ppt
 
Cours Ynov JS B1_1
Cours Ynov JS B1_1Cours Ynov JS B1_1
Cours Ynov JS B1_1
 
Java script Introduction
Java script IntroductionJava script Introduction
Java script Introduction
 
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
 
Hello xcode 4 v2
Hello xcode 4 v2Hello xcode 4 v2
Hello xcode 4 v2
 
Hello Xcode 4 v2
Hello Xcode 4 v2Hello Xcode 4 v2
Hello Xcode 4 v2
 
Initiation au JavaScript
Initiation au JavaScriptInitiation au JavaScript
Initiation au JavaScript
 
Chapitre4_ConceptionDynamique (1).pptx
Chapitre4_ConceptionDynamique (1).pptxChapitre4_ConceptionDynamique (1).pptx
Chapitre4_ConceptionDynamique (1).pptx
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
 
jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09
 

Dernier

Bonnard, Pierre et Marthe.pptx
Bonnard,     Pierre     et    Marthe.pptxBonnard,     Pierre     et    Marthe.pptx
Bonnard, Pierre et Marthe.pptx
Txaruka
 
GUIDE POUR L’EVRAS BALISES ET APPRENTISSAGES
GUIDE POUR L’EVRAS BALISES ET APPRENTISSAGESGUIDE POUR L’EVRAS BALISES ET APPRENTISSAGES
GUIDE POUR L’EVRAS BALISES ET APPRENTISSAGES
DjibrilToure5
 
MÉDIATION ORALE - MON NOUVEL APPARTEMENT.pdf
MÉDIATION ORALE - MON NOUVEL APPARTEMENT.pdfMÉDIATION ORALE - MON NOUVEL APPARTEMENT.pdf
MÉDIATION ORALE - MON NOUVEL APPARTEMENT.pdf
lebaobabbleu
 
Auguste Herbin.pptx Peintre français
Auguste   Herbin.pptx Peintre   françaisAuguste   Herbin.pptx Peintre   français
Auguste Herbin.pptx Peintre français
Txaruka
 
1e geo metropolisation metropolisation x
1e geo metropolisation metropolisation x1e geo metropolisation metropolisation x
1e geo metropolisation metropolisation x
NadineHG
 
1e Espaces productifs 2024.Espaces productif
1e Espaces productifs 2024.Espaces productif1e Espaces productifs 2024.Espaces productif
1e Espaces productifs 2024.Espaces productif
NadineHG
 
A1- Compréhension orale - présentations.pdf
A1- Compréhension orale - présentations.pdfA1- Compréhension orale - présentations.pdf
A1- Compréhension orale - présentations.pdf
lebaobabbleu
 
Compréhension orale La famille de Sophie (12).pdf
Compréhension orale  La famille de Sophie (12).pdfCompréhension orale  La famille de Sophie (12).pdf
Compréhension orale La famille de Sophie (12).pdf
lebaobabbleu
 

Dernier (8)

Bonnard, Pierre et Marthe.pptx
Bonnard,     Pierre     et    Marthe.pptxBonnard,     Pierre     et    Marthe.pptx
Bonnard, Pierre et Marthe.pptx
 
GUIDE POUR L’EVRAS BALISES ET APPRENTISSAGES
GUIDE POUR L’EVRAS BALISES ET APPRENTISSAGESGUIDE POUR L’EVRAS BALISES ET APPRENTISSAGES
GUIDE POUR L’EVRAS BALISES ET APPRENTISSAGES
 
MÉDIATION ORALE - MON NOUVEL APPARTEMENT.pdf
MÉDIATION ORALE - MON NOUVEL APPARTEMENT.pdfMÉDIATION ORALE - MON NOUVEL APPARTEMENT.pdf
MÉDIATION ORALE - MON NOUVEL APPARTEMENT.pdf
 
Auguste Herbin.pptx Peintre français
Auguste   Herbin.pptx Peintre   françaisAuguste   Herbin.pptx Peintre   français
Auguste Herbin.pptx Peintre français
 
1e geo metropolisation metropolisation x
1e geo metropolisation metropolisation x1e geo metropolisation metropolisation x
1e geo metropolisation metropolisation x
 
1e Espaces productifs 2024.Espaces productif
1e Espaces productifs 2024.Espaces productif1e Espaces productifs 2024.Espaces productif
1e Espaces productifs 2024.Espaces productif
 
A1- Compréhension orale - présentations.pdf
A1- Compréhension orale - présentations.pdfA1- Compréhension orale - présentations.pdf
A1- Compréhension orale - présentations.pdf
 
Compréhension orale La famille de Sophie (12).pdf
Compréhension orale  La famille de Sophie (12).pdfCompréhension orale  La famille de Sophie (12).pdf
Compréhension orale La famille de Sophie (12).pdf
 

cours javascript.pptx

  • 2. Introduction I. L’arbre DOM II. Propriétés et méthodes de nœuds de l’arbre DOM III. Variables, types, opérateurs, objets IV. Instructions conditionnelles & évènements V. Frameworks JavaScript: JQuery, Angular JS PLAN 2
  • 3. Introduction I. L’arbre DOM II. Propriétés et méthodes de nœuds de l’arbre DOM III. Variables, types, opérateurs, objets IV. Instructions conditionnelles & évènements V. Frameworks JavaScript: JQuery, Angular JS PLAN 3
  • 4. Introduction JavaScript • HTML : langage statique • CSS : Capacités dynamiques limitées • Ne répondent pas à tous les besoins : intégrations, traitement, boucles, etc. • JavaScript : langage de scripts interprété • JavaScript : le navigateur dispose d’un interprète javascript • JavaScript : agir sur les propriétés des éléments d’un document HTML • Javascript : nécessite des bases en programmation • Javascript: dynamicité et interactivité du document affiché 4
  • 5. Que peut faire JS ? JavaScript • Afficher des messages • Valider les formulaires • Appliquer des calculs • Générer des animations • Détecter le navigateur et ses capacités • Interagir avec le serveur à travers les services web 5
  • 6. Intégrer du JS dans une page web JavaScript • Un script JavaScript est intégré à travers la balise « script » • Un script JavaScript peut être défini à :  L’intérieur du corps de la page  L’entête  Fichier externe • Fichier JavaScript : extension « js » 6
  • 7. Exemple 1 JavaScript <html> <head> <title>Exemple 1 JavaScript</title> <link href="style2.css" type="text/css" rel="stylesheet"/> </head> <body> <h1>Affichage d'une variable d'entrée avec JS </h1> <script> var x= 8; window.alert("la valeur de x est "+x); </script> <h1>Affichage d'une variable de sortie avec JS </h1> <script> var y= x*3; window.alert("la valeur de y est "+y); </script> </body > </html> 7
  • 8. Exemple 2 JavaScript <html> <body> <h1> Premier exemple avec Javascript </h1> <p>Cliquer sur le bouton pour afficher un message d'alarme.</p> <button onclick="myFunction()"> Allons-y</button> <script> function myFunction() { alert("Attention !!!!!"); } </script > Script JavaScript défini à l’intérieur du code HTML </body > </html> 8
  • 9. Exemple 2 JavaScript Script JavaScript défini à l’extérieur du code HTM <script src="code.js" type="text/javascript"> </script> <html> <head> </head> <body> <h1> Premier exemple avec Javascript </h1> <p>Cliquer sur le bouton pour afficher un message d'alarme.</p> <button onclick="myFunction()"> Allons-y</button> </body> </html> function myFunction() { alert("Attention !!!!!"); } 9 code.js
  • 10. Introduction I. L’arbre DOM II. Propriétés et méthodes de nœuds de l’arbre DOM III. Types, variables, opérateurs, objets IV. Instructions conditionnelles & évènements V. Frameworks JavaScript: JQuery, Angular JS PLAN 10
  • 11. L’arbreDOM JavaScript 11 JavaScript : permet de manipuler l’arbreDOM. C’estquoile DOM ? • DOM : Document Object Model • DOM : représentation structurée du document sous forme d'un arbre • DOM : définit la façon dont la structure peut être manipulée • JavaScript interagit avec la page via la structure DOM accessible via une variable appelée « document » • DOM : accéder à un ou plusieurs éléments • Pour accéder à un élément par son « id », utiliser « GetElementById » • Si un élément HTML dispose d’un « id », une variable est créée pour lui
  • 12. Rappel : arbre et vocabulaire JavaScript 12 Racinedel’arbre DOM
  • 13. Rappel : arbre et vocabulaire JavaScript 13 Les feuillesde l’arbreDOM
  • 14. Rappel : arbre et vocabulaire JavaScript 14  Nœud article: sous arbre de la racine  Nœuds du sous arbre : descendants du nœud article  Nœud article : père des nœuds h1, p, img et p  H1, p, img et p : fils du nœud article
  • 15. Rappel : arbre et vocabulaire JavaScript 15  h1, p, img, p : nœudsfrères  Le nœudimg suit le premier nœudp  Le nœudh1 précède le premier nœudp  h1, p, img et p : fils du nœudarticle
  • 16. Commentconstruirel’arbre DOM JavaScript 16 1. Parcourir le document séquentiellement ; 2. Chaque élément est un nouveau nœud :  Si l’élément <elt> est emboité dans l’élément <boite>, le nœud elt est fils du nœud boite  Les éléments emboités dans le même niveau sont frères  Ordre d’arrivés dans le document : gauche à droite dans le DOM
  • 18. Fenêtre et DOM JavaScript 18 • Fenêtre : trois objets (location, history et document) • History : historique du navigateur • Location : informations sur le site : port, protocole, etc. • DOM : arborescence (chaque élément : nœud)
  • 21. Introduction I. L’arbre DOM II. Propriétés et méthodes de nœuds de l’arbre DOM III. Variables, types, opérateurs, objets IV. Instructions conditionnelles & évènements V. Frameworks JavaScript: JQuery, Angular JS PLAN 21
  • 24. Styled’un nœud JavaScript 24 • Propriétés CSS accessibles via la propriété « style » d’un nœud • Exemple : nœud.style.backgroundColor = ’yellow’;
  • 25. Introduction I. L’arbre DOM II. Propriétés et méthodes de nœuds de l’arbre DOM III. Variables, types, opérateurs, fonctions, objets IV. Instructions conditionnelles & évènements V. Frameworks JavaScript: JQuery, Angular JS PLAN 25
  • 26. Instructions et variables JavaScript 26 • La syntaxe de JavaScript ressemble à la famille C, C++, java, C#, etc. • Un script JS : plusieurs instructions • Type d’instructions: déclarations, opérations, etc. • Chaque instruction se termine par « ; » • Déclaration de variables : avec var • Convertir une variable : parseInt ou parseFloat
  • 27. Types JavaScript 27 • Chaine de caractères : var s = « Bonjour » ou var = new String(‘bonjour’) • Tableaux : var tab = new Array(3), var tab = new Array(1,2,3), var tab = [1,2,3]
  • 30. Fonctions JavaScript 30 • Déclarer une fonction : avec le mot clé function • Une fonction est délimitée par des accolades { } • Retour de la fonction : avec return • Commentaires : avec // ou /* et */
  • 32. Propriétés des chaines de caractères JavaScript 32
  • 34. Objets JavaScript 34 • Trois manières pour déclarer les objets : a. New Object b. Déclaration directe c. Déclaration avec les fonctions
  • 35. Objets JavaScript 35 • Trois manières pour déclarer les objets : a. New Object b. Déclaration directe c. Déclaration avec les fonctions
  • 36. Objets JavaScript 36 • Trois manières pour déclarer les objets : a. New Object b. Déclaration directe c. Déclaration avec les fonctions
  • 37. Objets prédéfinis JavaScript 37 • L’objet« Math » : utilitaires mathématiques • L’objet« String » : gère les chaines de caractères • L’objet« Date » : gère la date et heure
  • 38. Objets prédéfinis JavaScript 38 • L’objet« Math » : utilitaires mathématiques • L’objet« String » : gère les chaines de caractères • L’objet« Date » : gère la date et heure
  • 39. Introduction I. L’arbre DOM II. Propriétés et méthodes de nœuds de l’arbre DOM III. Variables, types, opérateurs, fonctions, objets IV. Instructions conditionnelles & évènements V. Frameworks JavaScript: JQuery, Angular JS PLAN 39
  • 45. Evènements JavaScript 45 • évènements: fonctions appelées en réaction à une action de l’utilisateur : souris, clavier, etc. • Gestionnaire d’évènement : fonction répondant à un évènement • Evènements sont par convention préfixés par « on ». Exemple : « onclick »
  • 47. Evènements de la souris JavaScript 47
  • 50. Evènements de la fenêtre JavaScript 50
  • 51. Les minuteurs JavaScript 51 • Minuteurs : gestionnaires d’évènements déclenchés à des intervalles de temps (en ms) • Les minuteurs (timers) : déclenchent des actions périodiques sur la page • Création d’un minuteur : se fait en utilisant « setInterval » • Arrêt d’un minuteur : se fait en utilisant « clearInterval »
  • 54. Introduction I. L’arbre DOM II. Propriétés et méthodes de nœuds de l’arbre DOM III. Variables, types, opérateurs, fonctions, objets IV. Instructions conditionnelles & évènements V. Frameworks JavaScript: JQuery, Angular JS PLAN 54
  • 55. jQuery JavaScript 55 • Bibliothèque Javascript : simplifier le développement de sites web interactifs • Puissante, légère, gratuite, open source • Principe : sélectionner une partie du document et agir dessus • Téléchargeable sur http://jquery.com/download/ • Exemple :https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_p • Exemple en TP.
  • 56. AngularJS JavaScript 56 • AngularJS : framework javascript • Créer des applications web dynamiques • Représenté par 3 composantes principales: model, view, Controller • Démo : Lien démo
  • 57. AngularJS : exemple JavaScript 57 • Lien vers l’exemple: https://github.com/NOFFABEL/TODO-APP • Procédure d’installation de l’application:  Cloner le projet : git clone https://github.com/NOFFABEL/TODO-APP  Installer les dépendances : npm install  Démarrer l’application : npm start  L’application s’ouvrira directement dansle navigateur:localhost:4200
  • 58. Introduction I. L’arbre DOM II. Propriétés et méthodes de nœuds de l’arbre DOM III. Variables, types, opérateurs, fonctions, objets IV. Instructions conditionnelles & évènements V. Frameworks JavaScript: JQuery, Angular JS PLAN 58