Angular Chapitre2 Js Es

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
RoadMap – chapitre 2
 Introduction à JavaScript
 Le noyau de JavaScript
 Java Script coté client Web
 Atelier DOM
 JavaScript coté Serveur Web
 Les Frameworks JavaScript
Section 1 : Introduction à JavaScript
JAVA S C R IPT/ EC M A SC R IPT
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
Un peu d’histoire …
 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 )
Qu'est-ce que le 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 !
Navigateurs et JavaScript
 Chaque navigateur intègre un interpréteur de JS :
• SpiderMonkey (Firefox)
• V8 (Google Chrome),
• Chakra (Internet Explorer),
• SquirrelFish (Safari).
Débugger en 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
La galaxie JavaScript
Section 2 : Le noyau de JavaScript
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
Aspects lexicaux
 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
Déclaration et typage
 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...
Types primitifs
 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;
Structures de contrôle
 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
Opérateurs arithmétiques
 Opérateurs binaires
 Opérateurs unaires
Opérateurs logiques
 Opérateurs binaires  Opérateurs relationnels
 Opérateurs unaires
Fonction par déclaration
 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(),...
Portée et vie des variables
 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
Valeurs spéciales des variables
 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)
Exemple illustratif
Fonction par expression
 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
Traitements des erreurs
 Exceptions
• Encadrer les portions de code susceptibles de poser problème et traiter l'erreur le cas
échéant.
 Bloc try … catch … finaly
Objets primitifs
 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");
JSON
 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
JSON : document vs. code
Désigne le début d’un
objet
Désigne le début d’un

tableau
courses.json courses.js
Section 3: JavaScript coté Client Web
JS, une technologie client
JavaScript coté Client Web
Sous programmes JS
 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
Programme principal JS
 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)

Evènements HTML
Deux stratégies possibles
 Directement à l'aide d'attributs dédiés (inline)
 Ou mise en place d'écouteurs d'évènement
Evènements et standards
 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="#" false">Continuer</a>
Extension au noyau JS
 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>, ...
BOM: Browser Object Model
 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.
BOM: Browser Object Model
 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.
Entrées/sorties des données à l’aide du BOM
 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 !");
Divers exemples BOM
DOM: Document Object Model
 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
Document XHTML : exemple
Arbre du document XHTML
Propriétés d'un nœud
Navigation dans l'arbre DOM
Méthodes d'un nœud
Accès direct aux nœuds
 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") ;
Accès direct aux nœuds
 Par la valeur de l'attribut name (si il existe)
• var result = document.getElementsByName("news_email") ;
 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") ;
Mode d'accès : comparaison
Accès par navigation dans l'arbre

Accès directe
Objets HTML
 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
La technologie Ajax
 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
Atelier – DOM
#01
Entant que utilisateur je veux
envoyer un message
#02
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
#01
Atelier – DOM (Solution) Entant que utilisateur je veux
envoyer un message
La partie body la page web contact.html
#01
Atelier – DOM (Solution) Entant que utilisateur je veux
envoyer un message
La partie head de la page web contact.html
#02
Atelier – DOM (Solution)

voir les messages
La partie head de la page web contact.html
Section 4: JavaScript coté Serveur
Web [avec Node.js]
JS, une technologie serveur
JavaScript coté Serveur Web
Sous le capot de Node.js
 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
Points forts
 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
Asynchrone vs synchrone
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.
Hello world
Section 5: Frameworks JavaScript
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.
Pourquoi un Framework 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
Points forts
 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
Meilleurs Frameworks JS
Meilleurs Frameworks JavaScript à apprendre en 2021
Comment choisir le framework front-end
adéquat pour son application ?

Angular Chapitre2 Js Es

Transféré par

Droits d'auteur :

Formats disponibles

Angular Chapitre2 Js Es

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Angular Chapitre2 Js Es

Transféré par

Droits d'auteur :

Formats disponibles

Chapitre 2 : JavaScript/ECMAScript

NOTIONS FONDAMENTALES - USAGE

• 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

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

• CSS pour spécifier la présentation

• JS pour spécifier le comportement

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

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

• Chakra (Internet Explorer),

 Dans un environnement de développement

Console développeur : Google Chrome

 L'appel se fait de manière classique

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

 Cycle de vie d'une variable

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

Désigne le début d’un

 Soit par inclusion d'un fichier externe

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

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

 Objets de type DOM

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

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

 L'arbre DOM est chargé dans le navigateur

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

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

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

Accès par navigation dans l'arbre

 Bouscule les habitudes de navigation par page

JavaScript coté Client Web

La partie body la page web contact.html

JavaScript coté Client Web

La partie head de la page web contact.html

Atelier – DOM (Solution)

JavaScript coté Client Web

La partie head de la page web contact.html

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

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

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

• Model View View Model : MVVM

• Model View Whatever : MVW

 Code JS évolutif, réutilisable et maintenable

 Développement piloté par les tests

Meilleurs Frameworks JavaScript à apprendre en 2021

Vous aimerez peut-être aussi