cours javascript.pptx

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
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
III. Types, variables, opérateurs, objets
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

JavaScript 13
Les feuillesde l’arbreDOM

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

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

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)

Introduction
I. L’arbre DOM
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
III. Variables, types, opérateurs, fonctions, objets
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]

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 */

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
c. Déclaration avec les fonctions

Objets
JavaScript 36
• Trois manières pour déclarer les
objets :
a. New Object
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
PLAN
39

Instructions
conditionnelles
Exemple :
JavaScript 40

Conditions multiples
JavaScript 41

Conditions multiples
Exemple :
JavaScript 42

Boucles for
JavaScript 43
Exemple :

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

cours javascript.pptx

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à cours javascript.pptx

Similaire à cours javascript.pptx (20)

Dernier

Dernier (15)

cours javascript.pptx