Faculté Polytechnique

(1)

Faculté Polytechnique

Sidi Ahmed Mahmoudi

C ^HAPITRE 03 : L ^{E LANGAGE} J ^AVA S ^CRIPT

I-ILIA-011 – T ECHNOLOGIES DU WEB

(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. PLAN

(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 Conclusion

PLAN

(4)

Introduction

• 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

(5)

Que peut faire JS ?

• 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

(6)

Intégrer du JS dans une page web

• 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

(7)

Exemple 1

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

(8)

Exemple 2

<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

(9)

Exemple 2

Script JavaScript défini à l’extérieur du code HTM

<html>

<head>

<script src="code.js" type="text/javascript"> </script>

</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 !!!!!");

}

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

(11)

L’arbre 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

JavaScript : permet de manipuler l’arbre DOM. C’est quoi le DOM ?

(12)

Rappel : arbre et vocabulaire

(13)

Rappel : arbre et vocabulaire

Les feuilles de l’arbre DOM

(14)

Rappel : arbre et vocabulaire

▪ Nœud article: sous arbre de la racine

▪ Nœuds du sous arbre : descendants du nœud article

(15)

Rappel : arbre et vocabulaire

▪ h1, p, img, p : nœuds frères

▪ Le nœud img suit le premier nœud p

▪ Le nœud h1 précède le premier nœud p

▪ h1, p, img et p : fils du nœud article

(16)

Comment construire l’arbre DOM

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

(17)

DOM : exemple

(18)

Fenêtre et DOM

• 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)

(19)

History

(20)

Location

(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 Conclusion

PLAN

(22)

Propriétés/Méthodes des nœuds

(23)

Propriétés/Méthodes des nœuds

(24)

Style d’un nœud

• 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 Conclusion

PLAN

(26)

Instructions et variables

• 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

(27)

Types

• 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]

(28)

Opérateurs

(29)

Opérateurs

(30)

Fonctions

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

(31)

Exemple

(32)

Propriétés des chaines de caractères

(33)

Propriétés des tableaux

(34)

Objets

• Trois manières pour déclarer les objets : a. New Object

b. Déclaration directe

c. Déclaration avec les fonctions

(35)

Objets

• Trois manières pour déclarer les objets :

a. New Object

b. Déclaration directe

c. Déclaration avec les fonctions

(36)

Objets

• 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

• 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

• 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 Conclusion

PLAN

(40)

Instructions conditionnelles

Exemple :

(41)

Conditions multiples

(42)

Conditions multiples

Exemple :

(43)

Boucles for

Exemple :

(44)

Boucles while

(45)

Evènements

• é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 »

(46)

Evènements

(47)

Evènements de la souris

(48)

Evènements des formulaires

(49)

Evènements du clavier

(50)

Evènements de la fenêtre

(51)

Les minuteurs

• 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 »

(52)

Interaction avec les fenêtres

(53)

Boites de dialogue

(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. PLAN

(55)

jQuery

• 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

• 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

• 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 dans le 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. PLAN

(59)

TP N ° 02 : Javascript

• En séance du 02/03/2021 : la partie Javascript du TP2

• A faire (par groupe) d’ici la prochaine séance (08/03/2021):

➢ Exercice 1: réaliser et tester partie jQuery du TP2 ( + partie facultative)

➢ Exercice 2: visualiser/analyser démo « Angular Js » : Lien démo

• A remettre : captures d’écran montrant le résultat d’au moins 1 exercice

(60)

THANK YOU

Faculté Polytechnique

Faculté Polytechnique

Sidi Ahmed Mahmoudi

C HAPITRE 03 : L E LANGAGE J AVA S CRIPT

I-ILIA-011 – T ECHNOLOGIES DU WEB

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.

PLAN

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 Conclusion

PLAN

Introduction

• 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

Que peut faire JS ?

• 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

Intégrer du JS dans une page web

• 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

Exemple 1

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

Exemple 2

<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

Exemple 2

Script JavaScript défini à l’extérieur du code HTM

<html>

<head>

<script src="code.js" type="text/javascript"> </script>

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

C ^HAPITRE 03 : L ^{E LANGAGE} J ^AVA S ^CRIPT