Vous êtes sur la page 1sur 66

Chapitre 2 : JavaScript/ECMAScript

NOTIONS FONDAMENTALES - USAGE

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 33
Objectifs
A la fin de ce chapitre, vous serez capable de :
 Différencier entre les différents standards de JavaScript
 Utiliser les données et les types de données dans JavaScript.
 Gérer la logique d'un programme en JavaScript (conditions, boucles et erreurs).
 Écrire du code propre et facile à maintenir à l'aide de méthodes en JavaScript.
 Manipuler le DOM d’un doucement web
 Lister la galaxie des Frameworks basés sur le JavaScript

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 34
RoadMap – chapitre 2
 Introduction à JavaScript
 Le noyau de JavaScript
 Java Script coté client Web
 Atelier DOM
 JavaScript coté Serveur Web
 Les Frameworks JavaScript

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 35
Section 1 : Introduction à JavaScript
JAVA S C R IPT/ EC M A SC R IPT

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 36
Caractéristique du langage
Introduction à JavaScript
 Créé par Netscape en 1995 :
• Utilisé côté client pour dynamiser les pages web

• contient des gestionnaires d'événement : il reconnaît et réagit aux demandes de l'utilisateur

• langage très particulier (fonctionnel)

• intégration d’une couche objet

• utilisé aujourd’hui pour créer des interfaces riches

Attention
• Il n'a aucun lien avec le langage Java, dans la syntaxe, le paradigme ou le comportement
• Juste un choix marketing, car Java était très célèbre à l'époque

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 37
Un peu d’histoire …
Introduction à JavaScript
 Au début, le langage a été développé sous le nom de Mocha

 Lors de sa première livraison dans les versions bêta de Netscape Navigator 2.0, son nom
officiel était LiveScript

 Il a été renommé en JavaScript lors de son déploiement sur Netscape Navigator 2.0 Beta 3

 En 1996, Netscape a soumis JavaScript à Ecma International pour créer une spécification
standard, menant au nom de spécification de langage standard officiel: ECMAScript

 ECMAScript 6 est la dernière version standardisé de JS. (ECMAScript6 = ECMAScript 2015 =


ES6 )

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 38
Qu'est-ce que le JavaScript ?
Introduction à JavaScript
 L'un des langages Web incontournables:
• HTML pour spécifier le contenu

• CSS pour spécifier la présentation

• JS pour spécifier le comportement

 JavaScript est un langage de programmation utilisé pour créer des pages Web interactives

 JavaScript est : Dynamique - Non typé – Interprété et Orienté objet

 JavaScript permet un niveau d'interactivité plus riche qu'avec de l'HTML simple


• Certains traitements simples (ex: contrôle des saisies utilisateur) peuvent être réalisés par le
navigateur plutôt que par le serveur
• Un document HTML/CSS chargé dans le navigateur peut être "remanié" dynamiquement !

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 39
Navigateurs et JavaScript
Introduction à JavaScript
 Chaque navigateur intègre un interpréteur de JS :
• SpiderMonkey (Firefox)

• V8 (Google Chrome),

• Chakra (Internet Explorer),

• SquirrelFish (Safari).

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 40
Débugger en JavaScript
Introduction à JavaScript
 Directement dans un navigateur
• Firebug (plugin pour Firefox et Safari)
• Console Développeur (Chrome, IE, Safari)

 Dans un environnement de développement


• Javascript Debug Toolkit : plugin pour Eclipse

Console développeur : Google Chrome

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 41
La galaxie JavaScript
Introduction à JavaScript

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 42
Section 2 : Le noyau de JavaScript
JAVA S C R IPT/ EC M A SC R IPT

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 43
Aspects lexicaux
Le noyau de JavaScript
 Jeu de caractères
• JS est sensible à la casse, contrairement au HTML par exemple
◦ Les balises et attributs HTML, appelés depuis le JS côté client, doivent être représentés en minuscules, même
s'ils peuvent utiliser n'importe quel casse en HTML
• JS ignore les espaces et les sauts de ligne entre les jetons dans les programmes
◦ Le formatage est recommandé

 Commentaires
• //: commente tout le texte jusqu'à la fin de la ligne
• / * texte * /: commente le texte entre les deux

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 44
Aspects lexicaux
Le noyau de JavaScript
 Identifiants
• Doit commencer par une lettre, un trait de soulignement (_) ou un signe dollar ($)
• Les caractères suivants peuvent être des lettres, des chiffres, des traits de soulignement ou
des signes dollar

 Mots réservés
• Certains identifiants sont réservés au langage comme mots-clés

• Nouveaux mots-clés

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 45
Déclaration et typage
Le noyau de JavaScript
 Déclaration (optionnelle)
• Variables avec le mot clé var
• Constantes avec le mot clé const
• Une variable peut être déclarée après avoir été utilisée (hoisting)

 Typage dynamique
• Implicite et peut changer en cours d'exécution...

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 46
Types primitifs
Le noyau de JavaScript
 Entier
• var annee = 2013;

 Réel
• var prix_ttc = 45.789; //il s'agit d'un point, pas d'une virgule

 Chaîne de caractères
• var message="Framework JavaScript";
• var message=' Framework JavaScript ';

 Booléen
• var estSympa=true;

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 47
Structures de contrôle
Le noyau de JavaScript
 Possède les structures de contrôle du langage C
• if (expr) { ... } else { ... }
• breack, continue
• for (…) {…}
• while (expr) { ... }
• do { ... } while (expr);
• foreach pour les tableaux
• switch(expr) { case n:... }
• Et les exceptions throw, try , catch

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 48
Opérateurs arithmétiques
Le noyau de JavaScript
 Opérateurs binaires

 Opérateurs unaires

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 49
Opérateurs logiques
Le noyau de JavaScript
 Opérateurs binaires  Opérateurs relationnels

 Opérateurs unaires

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 50
Fonction par déclaration
Le noyau de JavaScript
 La déclaration se fait à l'aide du mot clé function
• function name(param1, param2) { ...; return value; }
• Peut retourner une valeur (return) ou non
◦ Différencie les procédures des "vraies" fonctions

 L'appel se fait de manière classique


• Liaison des arguments avec les paramètres, si il y en a.

 Le noyau JavaScript possède déjà une bibliothèque de fonctions prédéfinies


• eval(), isNaN(), parseInt(),alert(),...

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 51
Portée et vie des variables
Le noyau de JavaScript
 Variable locale
• Une variable déclarée à l'intérieur d'une fonction est seulement accessible dans cette
fonction

 Variable globale
• Une variable déclarée en dehors de toute fonction est accessible en tout point du script et
de la page

 Cycle de vie d'une variable


• Une variable locale est supprimée lorsque la fonction se termine
• Une variable globale est supprimée à la fermeture de la page

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 52
Valeurs spéciales des variables
Le noyau de JavaScript

 JavaScript inclut aussi deux types de données spéciaux


 Null possède une seule valeur, null, qui signifie l’absence e données dans
une variable
 Undefined possède une seule valeur, undifined. Une variable dont le
contenu n’est pas clair car elle n’a jamais stocké de valeur, pas même null
est dite non définie (undifined)

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 53
Exemple illustratif
Le noyau de JavaScript

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 54
Fonction par expression
Le noyau de JavaScript
 JavaScript permet d'assigner des fonctions à des variables
 Les fonctions anonymes sont des fonctions dont l'appel se fait au travers des
variables qui les référencent

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 55
Traitements des erreurs
Le noyau de JavaScript
 Exceptions
• Encadrer les portions de code susceptibles de poser problème et traiter l'erreur le cas
échéant.
 Bloc try … catch … finaly

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 56
Objets primitifs
Le noyau de JavaScript
 Boolean
• var isAuthenticated = new Boolean(true);
 Number (entiers et réels)
• var year = new Number(2013);
 Array
• var emotions = new Array[2];
• emotions[0] = "happy"; emotions[1]="angry";

 String
• var message = new String("Happy Day");

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 57
JSON
Le noyau de JavaScript
 JavaScript Object Notation (JSON)
• Format léger et très simple
◦ Il n'existe que 2 concepts : objets { } et tableaux [ ]
• manipulable nativement par JavaScript !
 Usage
• Sert à stocker des données (ex: fichier de configuration)
• Sert à échanger des données à travers le réseau, entre clients et serveurs
(ex: sérialisation/désérialisation)
• Sert à décrire un objet JS mais sous une forme textuelle dans le code source

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 58
JSON : document vs. code
Le noyau de JavaScript
Désigne le début d’un
objet

Désigne le début d’un


tableau

courses.json courses.js

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 59
Section 3: JavaScript coté Client Web
JAVA S C R IPT/ EC M A SC R IPT

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 60
JS, une technologie client
JavaScript coté Client Web

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 61
Sous programmes JS
JavaScript coté Client Web
 Le code des sous-programmes se situe au niveau de l'entête d'un
document Html
 Soit directement

 Soit par inclusion d'un fichier externe

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 62
Programme principal JS
JavaScript coté Client Web
 Le code du programme principal se situe dans le corps d'un document
Html
• C-a-d les portions de code qui ont vocation à appeler les sous-
programmes
 Soit dans une balise spéciale <script>…</script>

 Soit via des évènements (voir diapo suivante)


M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 63
Evènements HTML
JavaScript coté Client Web

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 64
Deux stratégies possibles
JavaScript coté Client Web
 Directement à l'aide d'attributs dédiés (inline)

 Ou mise en place d'écouteurs d'évènement

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 65
Evènements et standards
JavaScript coté Client Web
 Le navigateur implémente des comportements par défaut pour les
évènements
• Le clic gauche sur un lien hypertexte charge un nouveau document,
• Un clic gauche sur un bouton soumet le formulaire,
• Un clic droit affiche un menu contextuel,
•…
 Il est possible d'inhiber ce comportement par défaut, et le remplacer si
besoin
• <a href="#" onclick="return false">Continuer</a>

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 66
Extension au noyau JS
JavaScript coté Client Web
 Objets de type BOM
• Window, Navigator, Screen, History, Location

 Objets de type DOM


• DOM Document, DOM Elements, DOM Attributes, DOM Events, ...
 Objets de type HTML
• <a>, <area>, <canvas>, <button>, <form>, <iframe>,
<image>, <input>, <link>, <meta>, <object>, <option>,
<select>, <style>, <table>, <td>, <th>, <tr>, <textarea>, ...

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 67
BOM: Browser Object Model
JavaScript coté Client Web
 Le BOM Permet de manipuler le navigateur
• Tous les navigateurs (IE, Firefox, Chrome, ...) sont des
logiciels qui offrent les mêmes fonctionnalités de base
◦ Ouvrir/fermer des onglets, aller à une URL, mémoriser la liste des URL précédemment
consultées, etc.

 A la base du BOM, nous avons l’interface Window qui représente une


fenêtre de navigateur contenant une page ou un document.

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 68
BOM: Browser Object Model
JavaScript coté Client Web
 Les objets suivants appartiennent au BOM et sont tous des enfants de Window :

• L’objet Navigator qui représente l’état et l’identité du navigateur et qu’on va utiliser avec l’API Geolocation ;

• L’objet History qui permet de manipuler l’historique de navigation du navigateur

• L’objet Location qui fournit des informations relatives à l’URL de la page courante ;

• L’objet Screen qui nous permet d’examiner les propriétés de l’écran qui affiche la fenêtre courante ;

• L’objet Document est le DOM dans son ensemble que nous étudierons en détail dans la suite.

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 69
Entrées/sorties des données à l’aide du BOM
JavaScript coté Client Web
 Afin de gérer l'interaction avec l'utilisateur par le biais de la fenêtre
du navigateur, nous utilisons l’objet window

 2 méthodes d'entrée
• var user_age = window.prompt("Quel est votre age ?" , "");
• var user_quit = window.confirm("Voulez vous quitter cette page ?");

<
 1 méthode de sortie
 window.alert("Bienvenue sur ce site !");

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 70
Divers exemples BOM
JavaScript coté Client Web

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 71
DOM: Document Object Model
JavaScript coté Client Web
 Représentation d'un document XHTML sous sa forme 100% objet
• Les balises sont des noeuds et leurs imbrications forment une arborescence
• Cette structure d'arbre est ensuite facile à manipuler

 L'arbre DOM est chargé dans le navigateur


• L'arbre est parcouru par le moteur de rendu du navigateur afin de produire l'affichage graphique
• Chaque modification ultérieure de cet arbre force le rafraîchissement de l'affichage graphique

Information

 XHTML 1.0 est une transposition en syntaxe XML de HTML 4.


 HTML5 hérite de nombreuses ressemblances avec HTML4 et XHTML

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 72
Document XHTML : exemple
JavaScript coté Client Web

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 73
Arbre du document XHTML
JavaScript coté Client Web

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 74
Propriétés d'un nœud
JavaScript coté Client Web

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 75
Navigation dans l'arbre DOM
JavaScript coté Client Web

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 76
Méthodes d'un nœud
JavaScript coté Client Web

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 77
Accès direct aux nœuds
JavaScript coté Client Web
 Par la valeur de l'attribut id (si il existe)
• var result = document.getElementById("intro") ;
• Renverra 0 ou 1 résultat

 Par la valeur de l'attribut class (si il existe)


• var result = document.getElementsByClassName("joli1") ;
• Renverra 0 ou n résultats

 Par le nom de la balise (Tag en anglais)


• var result = document.getElementsByTagName("input") ;
• Renverra 0 ou n résultats

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 78
Accès direct aux nœuds
JavaScript coté Client Web
 Par la valeur de l'attribut name (si il existe)
• var result = document.getElementsByName("news_email") ;
• Renverra 0 ou n résultats
 Par les sélecteurs CSS
• var result = document.querySelector("p#intro") ;
• Renverra 0 ou 1 résultat, le premier trouvé
• var result = document.querySelectorAll("ul.joli > li") ;
• Renverra 0 ou n résultats

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 79
Mode d'accès : comparaison
JavaScript coté Client Web

Accès par navigation dans l'arbre


Accès directe

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 80
Objets HTML
JavaScript coté Client Web
 Après avoir navigué et atteint le nœud de son choix, il faut agir dessus
• Pour cela, il est nécessaire de connaître sa véritable nature (son type)
◦ nœud <body> ? nœud <h1> ?, nœud <img> ? etc.
• Principe : les attributs Html correspondent aux propriétés de l'objet

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 81
La technologie Ajax
JavaScript coté Client Web
 Asynchronous JavaScript and XML (Ajax)
• Un objet spécial sert à effectuer des requêtes/réponses HTTP en arrière plan
d'un document déjà chargé

 Bouscule les habitudes de navigation par page


• Une seule URL (une seule page) semble désormais rendre toute les
fonctionnalités possibles

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 82
Atelier – DOM
JavaScript coté Client Web

#01
Entant que utilisateur je veux
envoyer un message

#02
Entant que utilisateur je veux
voir les messages Remarques
 Créer un objet message ayant les propriété suivantes : name, email, comment
 Ajouter cet objet à un tableau messages
 A chaque clique, afficher le nouveau contenu du tableau

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 83
#01
Atelier – DOM (Solution) Entant que utilisateur je veux
envoyer un message

JavaScript coté Client Web

La partie body la page web contact.html

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 84
#01
Atelier – DOM (Solution) Entant que utilisateur je veux
envoyer un message

JavaScript coté Client Web

La partie head de la page web contact.html

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 85
#02

Atelier – DOM (Solution)


Entant que utilisateur je veux
voir les messages

JavaScript coté Client Web

La partie head de la page web contact.html

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 86
Section 4: JavaScript coté Serveur
Web [avec Node.js]
JAVA S C R IPT/ EC M A SC R IPT

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 87
JS, une technologie serveur
JavaScript coté Serveur Web

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 88
Sous le capot de Node.js
JavaScript coté Serveur Web
 Interpréteur Node.js
• Reprend le moteur V8 de Chrome (open source) JavaScript and XML (Ajax)
 Modèle mono-thread
• Gestion de la concurrence des clients différente des serveurs multi-threadés
• Oblige à se tourner vers un modèle non-bloquant

 Modèle non-bloquant
• Le fonctionnement asynchrone devient la règle
 Programmation sur une couche plus basse que d'autres
technologies serveur
M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 89
Points forts
JavaScript coté Serveur Web
 Performances
• Meilleurs résultats que Apache par exemple
 Programmation
• L'asynchrone est tendance ("reactive programming")
• Donne un second souffle au JS
 Extensibilité et communauté
• Il existe de très nombreux paquets (ou modules)
• Outillage efficace :
• Gestionnaire de paquets (npm)
• Annuaire officiel de paquets : www.npmjs.com
 Programmation sur une couche plus basse que d'autres technologies serveur
M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 90
Asynchrone vs synchrone
JavaScript coté Serveur Web
1. Begin to brew a pot of coffee. 1. Go to the store.
2. Go to the store while the coffee is brewing. 2. Buy cream and sugar.
3. Buy cream and sugar. 3. Return home.
4. Return home. 4. Start brewing a pot of coffee.
5. Drink coffee immediately. 5. Impatiently watch the pot of coffee as it
brews.
6. Enjoy life.
6. Experience caffeine withdrawal.
7. Crash.

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 91
Hello world
JavaScript coté Serveur Web

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 92
Section 5: Frameworks JavaScript
JAVA S C R IPT/ EC M A SC R IPT

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 93
Un Framework , c’est quoi ?
Frameworks JavaScript
 Un framework == un cadre de travail

 Un ensemble de composants qui structure l’application et qui contraint la manière dont vous
allez la développer

 Un framework est toujours associé à un langage de programmation : Java, PHP, JavaScript…


et aide dans le développement d’applications web.

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 94
Pourquoi un Framework JavaScript ?
Frameworks JavaScript
 Le besoin à un framework JavaScript front-end est justifié par :
 La complexité de la gestion manuelle des manipulations DOM et des mises à jour des données

 Les approches simples comme l'utilisation de la bibliothèque jQuery peuvent ne pas répondre
suffisamment aux besoins d’une application complexe.

 Gain de temps et d’efficacité: le framework apporte de nombreux outils qui permettent de ne pas
réinventer la roue pour toutes les fonctionnalités courantes

 Meilleure structuration du code : les frameworks permettent de donner une structure et par
conséquent, d’améliorer la qualité du code.

 Maintenance simplifiée: un projet bien structuré est infiniment plus simple

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 95
Points forts
Frameworks JavaScript
 Un framework JavaScript :
 permet de développer des applications web de type SPA appelé aussi Client web riche

 se base sur des architectures d'application bien définies


• Model View Controller : MVC

• Model View View Model : MVVM

• Model View Whatever : MVW

 Code JS évolutif, réutilisable et maintenable

 Développement piloté par les tests

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 96
Meilleurs Frameworks JS
Frameworks JavaScript

Meilleurs Frameworks JavaScript à apprendre en 2021

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 97
Comment choisir le framework front-end
adéquat pour son application ?
Frameworks JavaScript

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 98

Vous aimerez peut-être aussi