Formation « Web Avancé »
JavaScript full-stack – Node.js – Meteor
Février 2016 – Formation ORT 3CSi spécialité développeme...
|
Copyright
Cette présentation est mis à disposition selon les termes de la Licence Creative Commons
Attribution - Pas d’U...
|
Présentation
• Guillaume MOREL-BAILLY
• Développeur web et mobile freelance depuis +5 ans
• Ingénieur en sécurité inform...
|
Présentation
• Tour de table pour mieux vous connaitre, cerner vos
attentes et besoins.
• Cursus / formation; expérience...
|
Présentation du cours
• Objectif : vous apporter une culture sur les techniques de développement web modernes
orientées ...
|
Technologies, frameworks, outils… abordés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 6
|
Plan de formation
1) Introduction à JavaScript
2) Développer avec jQuery
3) L’architecture MEAN
4) Node.js
5) Déploiemen...
Partie 1
Introduction à JavaScript
Eléments de base du langage et concepts avancés
|
JavaScript Histoire
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 9
|
JavaScript – Pourquoi ?
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 10
|
JavaScript – Histoire
• 1993 : apparition du navigateur web NCSA Mosaic qui a rendu le World Wide Web populaire.
Distrib...
|
JavaScript – Histoire
• Netscape voulait que le langage de programmation Scheme soit
intégré au sein de son navigateur. ...
|
JavaScript – Histoire
"There was some pressure from management to make the syntax look like
Java. There was also some pr...
|
JavaScript – Histoire
• Brendan Eich s’est alors inspiré du langage de
programmation Self, basé sur le concept de protot...
|
JavaScript – Histoire
• 1996 : JavaScript est rapidement adopté pour le développement web orienté client. Netscape
soume...
|
ECMAScript
Tout est histoire de
standardisation
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 16
|
JavaScript – ECMAScript
• Ecma International est une organisation européenne de standardisation informatique (au sens
la...
|
JavaScript – ECMAScript
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 18
|
JavaScript – ECMAScript
• ECMAScript Edition 5 (ES5) : version actuellement intégrée dans les moteurs de scripts des
nav...
|
JavaScript – ECMAScript
• JavaScript, implémentation du standard ECMAScript n’a pas évolué depuis 2009. Depuis, de plus
...
|
ECMAScript 6 (ES2015)
class Shape {
constructor (id, x, y) {
this.id = id;
this.move(x, y);
}
move (x, y) {
this.x = x;
...
|
JavaScript – ECMAScript
• Langage de programmation open-source développé en 2012 par Microsoft, comme un sur-
ensemble d...
|
Moteurs de
script et de
rendu
Comprendre le fonctionnement et
les composants de nos
navigateurs web.
Février 2016 Format...
|
JavaScript – Moteurs de script
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 24
|
JavaScript – Moteurs de script
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 25
Moteur de rendu
(HTML + CSS)
...
|
JavaScript – Moteurs de script
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 26
|
JavaScript – Moteurs de script
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 27
|
JavaScript – Moteurs de script
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 28
Moteur de rendu
(HTML + CSS)
...
|
JavaScript – Moteurs de script
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 29
Firefox
Moteur de rendu : Gec...
|
JavaScript – Moteurs de script
• Projet open-source développé par Google et écrit en C++.
• Développé à l’origine pour G...
|Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 31
JavaScript – Chargement d’une page par le navigateur
|
Le langage
JavaScript
Présentation
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 32
|
JavaScript – Présentation
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 33
|
JavaScript – Présentation
• JavaScript est un langage de script, multi-plateforme et orienté web, piloté par les évèneme...
|
JavaScript – Présentation
• Notion de « first-class functions » (objet de première classe).
• Les fonctions JavaScript s...
|
JavaScript – Présentation
var square = function(x) {
return x * x;
},
mult = function (f1, f2) {
return function(n) {
re...
|
JavaScript vs Java (ou tout autre langage comparable : C#, C++, etc.)
• JavaScript est interprété : le code est traité
p...
|
JavaScript vs Java (ou tout autre langage comparable : C#, C++, etc.)
• JavaScript est un langage de programmation
objet...
|
JavaScript vs Java (ou tout autre langage comparable : C#, C++, etc.)
• JavaScript est faiblement typé (typage
dynamique...
|
JavaScript – Ecrire du code côté client
• La balise script permet d’intégrer du code JavaScript dans une page.
• Attribu...
|
JavaScript – Ecrire du code côté client
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 41
Code JavaScript « in...
|
JavaScript – Ecrire du code côté client
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 42
Fichier externe
<!DO...
|
JavaScript – Ecrire du code côté client
• Sur la majorité des navigateurs web : touche F12
• Firefox intègre même une co...
|
Le langage
JavaScript
Eléments de base
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 44
|
JavaScript
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 45
|
JavaScript – Les opérateurs
Types d’opérateurs Code d’exemple
var var foo;
new new Foo;
Assignation foo = {bar: "a value...
|
JavaScript – Les variables
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 47
Déclarations
Type de déclaration ...
|
JavaScript – Les variables
• Une variable déclarée grâce à l'instruction var ou let sans valeur initiale définie vaudra ...
|
JavaScript – Les variables
• Valeur undefined dans un contexte booléen : convertie en false
• Valeur undefined dans un c...
|
JavaScript – Les variables
• Valeur null dans un contexte numérique : convertie en 0 (zéro)
• Valeur null dans un contex...
|
JavaScript – Types de données
• 6 types de données primitifs en ECMAScript 5:
• Type booléen : Boolean (avec les valeurs...
|
JavaScript – L’instruction typeof
• Comme JS est faiblement typé, on a parfois le besoin de savoir avec qu’elle type de ...
|
JavaScript – Conversion de types de données
• D’après vous, le code suivant lève t’il une erreur ?
Février 2016 Formatio...
|
JavaScript – Conversion de types de données
• Lorsque des expressions impliquent des chaînes de caractères et des valeur...
|
JavaScript – Conversion de chaînes en nombres
• parseInt effectue une conversion en valeur entière
• Number effectue une...
|
JavaScript – Conversion de chaînes en nombres
• parseFloat effectue une conversion d’une chaine de caractère en nombre f...
|
JavaScript – Opérateur de comparaison
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 57
|
JavaScript - Commentaires
// un commentaire sur une ligne
/* un commentaire plus
long sur plusieurs lignes
*/
/* Par con...
|
JavaScript - Objets
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 59
• Liste d’une ou plusieurs paires de pro...
|
JavaScript - Objets
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 60
var sales = "Toyota";
function carTypes(...
|
JavaScript – Tableaux (Arrays)
• Les tableaux JavaScript sont des objets semblables à une liste
• Ils possèdent plusieur...
|
JavaScript – Tableaux (Arrays)
• Le premier élément d'un tableau a 0 pour indice
• La position du dernier élément est do...
|
JavaScript – Tableaux (Arrays)
• Les éléments d'un tableau sont simplement des propriétés d'objets.
• Normalement on acc...
|
JavaScript – Tableaux (Arrays)
• De façon semblable, les propriétés nommées avec des mots-clés réservés ne peuvent être
...
|
JavaScript – Objet natif : exemple de Math
• L’objet Math est un objet natif dont les méthodes et propriétés permettent ...
|
JavaScript - Instructions conditionnelles
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 66
Instruction if...e...
|
JavaScript - Instructions conditionnelles
• Lors d'un test, les valeurs suivantes seront considérées comme équivalentes ...
|
JavaScript - Instructions conditionnelles
• Attention à ne pas confondre les valeurs booléennes « primitives » true et f...
|
JavaScript - Instructions conditionnelles
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 69
Instruction switch...
|
JavaScript – Boucles et itérations
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 70
Instruction for
for (var ...
|
JavaScript – Boucles et itérations
• Permet d'itérer sur l'ensemble des propriétés énumérables d'un objet, dans un ordre...
|
JavaScript – Boucles et itérations
• Permet d'exécuter une instruction tant qu'une condition donnée est vérifiée.
Févrie...
|
JavaScript – Boucles et itérations
• Permet de répéter un ensemble d'instructions jusqu'à ce qu'une condition donnée ne ...
|
JavaScript – Concepts avancés
• Il est possible de lever (c’est-à-dire signaler) des exceptions avec l'instruction throw...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 75
Gestion des exceptions
// Leve...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 76
Gestion des exceptions
// Gére...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 77
Gestion des exceptions
// On c...
|
JavaScript – Fonctions
• Les fonctions font partie des briques fondamentales de JavaScript.
• Rappel de la partie « Prés...
|
JavaScript – Fonctions
• Déclaration d’une fonction
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 79
function...
|
JavaScript – Fonctions
• On peut aussi rendre une fonction auto exécutable :
Février 2016 Formation ORT 3CSi - Guillaume...
|
JavaScript – Fonctions
• Les paramètres donnés lors de l'appel d'une fonction sont appelés les arguments de la fonction....
|
JavaScript – Fonctions
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 82
// Declare the function 'myFunc'
func...
|
Le langage
JavaScript
Manipulation du DOM
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 83
|
JavaScript – Manipulation du DOM
• JavaScript contient une bibliothèque standard d'objets tels que Array, Date, et Math,...
|
JavaScript – Manipulation du DOM
• De manière simplifiée, le DOM :
• fournit une représentation structurée d’un document...
|
JavaScript – Manipulation du DOM
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 86
|
JavaScript – Manipulation du DOM
• L’API DOM est accessible par JavaScript via l’objet « document »
• Plusieurs méthodes...
|
JavaScript – Manipulation du DOM
• Créer une page HTML composée des éléments suivantes :
• Un titre de niveau h1
• Un pa...
|
JavaScript – Manipulation du DOM
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 89
Exercice n°1 : correction
<...
|
JavaScript – Manipulation du DOM
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 90
Exercice n°1 : correction
<...
|
JavaScript – Manipulation du DOM
• Créer une fonction JavaScript qui permette d’ajouter une ligne à un tableau au clic s...
|
JavaScript – Manipulation du DOM
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 92
Exercice n°2 : correction
f...
|
JavaScript – Manipulation du DOM
• Créer une page contenant un bouton qui permette de de
générer un nombre aléatoire com...
|
JavaScript – Manipulation du DOM
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 94
Exercice n°3 – « Tirage au ...
|
JavaScript – Manipulation du DOM
• Créer une fonction JavaScript qui, au clic sur un bouton :
• Demande à l’utilisateur ...
|
JavaScript – Manipulation du DOM
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 96
Exercice n°4 : correction
<...
|
JavaScript – Manipulation du DOM
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 97
Exercice n°5 : objectif
• C...
|
JavaScript – Manipulation du DOM
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 98
Exercice n°5 : correction
<...
|
JavaScript – Manipulation du DOM
• Ecrire un programme qui permette d’afficher une image aléatoire après un clic sur un ...
|
JavaScript – Manipulation du DOM
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 100
Exercice n°6 – « Chargemen...
|
JavaScript – Manipulation du DOM
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 101
Exercice n°6 – « Chargemen...
|
JavaScript – Manipulation du DOM
• Analyser et comprendre le code existant (dispo sur l’espace partagé).
• Améliorer l'i...
|
Le langage
JavaScript
AJAX
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 103
|
JavaScript – AJAX
Asynchronous JavaScript And XML
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 104
Format d’...
|
JavaScript – AJAX
• AJAX n’est pas un langage mais une architecture qui fait appel à plusieurs technologies.
• Permet de...
|
JavaScript – AJAX
• Microsoft a ensuite introduit l’objet XMLHttpRequest dans Internet Explorer 5 et dans Outlook
Web Ac...
|
JavaScript – AJAX
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 107
Modèle d’application web classique
|
JavaScript – AJAX
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 108
Modèle d’application web dynamique
|
JavaScript – AJAX
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 109
Modèle d’application web dynamique
(or JS...
|
JavaScript – AJAX
• Objet natif de JavaScript pouvant être utilisé par l’ensemble des moteurs de script (car
standardisé...
|
JavaScript – AJAX
• XMLHttpRequest permet d'envoyer des requêtes HTTP (GET, POST, PUT, etc.) de manière très
simple. Il ...
|
JavaScript – AJAX
• Les navigateurs modernes (Chrome, IE 7+, Firefox, etc.) supportent l’objet XMLHttpRequest. On
aborde...
|
JavaScript – AJAX
• Pour envoyer une requête HTTP à un serveur, on utilise les fonctions open() et send().
Février 2016 ...
|
JavaScript – AJAX
• Si une requête asynchrone (c’est-à-dire non bloquante) a été initiée, il faut spécifier la fonction
...
|
JavaScript – AJAX
Propriété Description / valeurs
onreadystatechange Enregistre une fonction qui devra être appelée auto...
|
JavaScript – AJAX
• On a vu qu’on pouvait utiliser l’évènement onreadystatechange ainsi que la propriété readyState
pour...
|
JavaScript – AJAX
• Historiquement le format XML était utilisé pour échanger des données entre le client et le serveur.
...
|
JavaScript – AJAX
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 118
XML ou JSON ?
{"employees":[
{"firstName"...
|
JavaScript – AJAX
• L'objet natif JSON contient des méthodes pour convertir des valeurs en JSON et pour convertir
des do...
|
JavaScript – AJAX
• La méthode JSON.parse() interprète une chaîne de caractères comme du JSON, transformant de
façon opt...
|
JavaScript – AJAX
• L’architecture AJAX est utilisée massivement dans les sites et applications web. Généralement
utilis...
|
Le langage
JavaScript
Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 122
|
JavaScript – Concepts avancés
• La portée est un des éléments fondamentaux de JavaScript, et peut être le plus difficile...
|
JavaScript – Concepts avancés
• En revanche, une fonction peut accéder aux différentes variables et fonctions qui appart...
|
Fonctions : portée
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 125
JavaScript – Concepts avancés
// The fol...
|
JavaScript – Concepts avancés
• Comme on l’a vu, JavaScript permet d'imbriquer des fonctions et la fonction interne aura...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 127
Fonctions : closures
var anim...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 128
Fonctions : closures
function...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 129
Fonctions : closures
function...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 130
Fonctions : closures
function...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 131
Fonctions : closures
function...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 132
Fonctions : closures
function...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 133
Fonctions : closures
var sayH...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 134
Fonctions : closures
var sayH...
|
JavaScript – Concepts avancés
Exercice d’application :
• Soit le code HTML suivant :
• Créer un script qui permette de c...
|
JavaScript – Concepts avancés
• Dans une fonction JavaScript on aura l’objet suivant :
Février 2016 Formation ORT 3CSi -...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 137
function showHelp(help) {
doc...
|
JavaScript – Concepts avancés
• Problème : le code précédent ne fonctionne pas. Quelque soit le champ sur lequel on se s...
|
JavaScript – Concepts avancés
• Explications : les fonctions attachées aux gestionnaires d'événements sont des closures ...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 140
Fonctions : closures
function...
|
JavaScript – Concepts avancés
• On ne peut pas accéder aux variables définies dans une fonction en dehors de cette fonct...
|
JavaScript – Concepts avancés
• Si on assigne une valeur à une variable qui n’a pas été déclarée (avec var), cette varia...
|
JavaScript – Concepts avancés
• Une fonction peut accéder aux différentes variables et fonctions qui appartiennent à la ...
|
JavaScript – Concepts avancés
• Une fonction définie dans une autre fonction (= closure) peut également accéder à toutes...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 145
Portée des fonctions et varia...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 146
Portée et this
var myFunction...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 147
Portée et this
var nav = docu...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 148
Portée et this
var nav = docu...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 149
Créer un scope privé
(functio...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 150
Module Pattern : namespace + ...
|
JavaScript – Concepts avancés
• L'élévation est peut-être l'élément le plus surprenant et celui qui peut causer le plus ...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 152
Hoisting (élévation)
var stat...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 153
Hoisting (élévation)
• On a v...
|
JavaScript – Concepts avancés
• JavaScript peut parfois se révéler déroutant, notamment pour les développeurs habitués à...
|
JavaScript – Concepts avancés
• Mais alors, quid de l’héritage ?
• Dès lors qu'on aborde l'héritage, JavaScript n'utilis...
|
JavaScript – Concepts avancés
• On sait déjà que les objets JavaScript sont des conteneurs de propriétés. On vient de vo...
|
JavaScript – Concepts avancés
• En JavaScript, toute fonction peut être rattachée à un objet en tant que propriété.
• Un...
|
JavaScript – Concepts avancés
• Le but est de créer la chaine de prototypes suivante :
Février 2016 Formation ORT 3CSi -...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 159
Prototypes : héritage de fonc...
|
JavaScript – Concepts avancés
• Remarque : lorsqu'une fonction héritée est exécutée, la valeur de this pointe vers l'obj...
|
JavaScript – Concepts avancés (mémoire)
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 161
Références
var me =...
|
JavaScript – Concepts avancés (mémoire)
• var str : on déclare simplement un
pointeur. La valeur de str est pour
l’insta...
|
JavaScript – Concepts avancés (mémoire)
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 163
Références
var obj ...
|
JavaScript – Concepts avancés (mémoire)
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 164
Références
var obj ...
|
JavaScript – Concepts avancés (mémoire)
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 165
Références
var obj ...
|
JavaScript – Concepts avancés (mémoire)
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 166
L’opérateur delete
...
|
JavaScript – Concepts avancés (mémoire)
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 167
L’opérateur delete
...
|
JavaScript – Concepts avancés (mémoire)
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 168
L’opérateur delete
...
|
JavaScript – Concepts avancés (mémoire)
• L'opérateur delete permet de retirer une propriété d'un objet.
• Contrairement...
|
JavaScript – Concepts avancés (mémoire)
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 170
Références (suite)
...
|
JavaScript – Concepts avancés (mémoire)
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 171
Références (suite)
...
|
JavaScript – Concepts avancés
21
undefined
undefined
21
{}
NaN
true
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BA...
|
JavaScript – Concepts avancés
• Opérateur === avec des types primitifs.
• Ce code va rechercher ces deux primitifs en
mé...
|
JavaScript – Concepts avancés
• Opérateur === avec des objets.
• Ce code va rechercher ces deux objets en mémoire
et va ...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 175
Les opérateurs de comparaison...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 176
true == ({toString: function(...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 177
1 == ({toString: function() {...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 178
1 == "1"
Types identiques ?
T...
|
JavaScript – Concepts avancés
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 179
1 == 1
Types identiques ?
Tou...
|Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 180
Partie 2
Développer avec jQuery
Write less, do more
|
jQuery – Présentation
• jQuery est une bibliothèque JavaScript open-source et multi-plateforme créée
entre autre pour fa...
|
Avantages
• Facilite grandement la manipulation du DOM
(l’utilisation de l’API document par JavaScript
reste compliquée ...
|
jQuery – Présentation
• jQuery UI : collection d'éléments utiles dans le développement d'une interface utilisateur riche...
|
jQuery – Présentation
• En fonction du projet sur lequel vous travaillez et des impératifs du cahier
des charges (suppor...
|
jQuery – Sélecteurs
• Les sélecteurs jQuery permettent de sélectionner des éléments du DOM sur lesquels on souhaite
effe...
|
jQuery – Sélecteurs
• La fonction $() n’est en fait qu’un alias vers la fonction jQuery().
• La fonction $() créé un nou...
|
jQuery – Sélecteurs
• Tout est question de contexte.
• Par défaut, les sélecteurs effectuent leurs recherchent dans le D...
|
jQuery – Sélecteurs
• En interne, la sélection d’un contexte différent est implémenté avec la fonction .find().
• Donc $...
|
jQuery – Sélecteurs
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 190
Sélecteur Exemple Sélectionnera…
this $...
|
jQuery – Sélecteurs
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 191
Sélecteur Exemple Sélectionnera…
parent...
|
jQuery – Sélecteurs
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 192
Sélecteur Exemple Sélectionnera…
[attri...
|
jQuery – Sélecteurs
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 193
Sélecteur Exemple Sélectionnera…
:input...
|
jQuery – Sélecteurs
• Soit le code HTML ci-dessous, sélectionner en jQuery le titre de niveau h1 et passer le texte en
m...
|
jQuery – Sélecteurs
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 195
Exercice d’application rapide
<div id="...
|
jQuery – La fonction $() (notion avancée)
• Nous avons vu que la fonction $() permet de sélectionner un ou des éléments ...
|
jQuery – La fonction $() (notion avancée)
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 197
// Execute la fon...
|
jQuery – La fonction $() (notion avancée)
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 198
$(document).ready...
|
jQuery – L’objet jQuery (notion avancée)
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 199
• Quand la fonctio...
|
jQuery – L’objet jQuery (notion avancée)
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 200
• La fonction eq()...
|
jQuery – L’objet jQuery (notion avancée)
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 201
• Détail important...
|
jQuery – L’objet jQuery (notion avancée)
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 202
• Pour bien distin...
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Prochain SlideShare
Chargement dans…5
×

Formation JavaScript full-stack (JS, jQuery, Node.js...)

1 060 vues

Publié le

Support de cours utilisé lors de la formation d'élèves en licence informatique. Cette formation porte sur les technologies JavaScript : de la découverte du langage aux notions avancées, en passant par la stack/architecture MEAN (MongoDB, Express, Angular, Node.js), jQuery et d'autres technologies du moment.

Plus d'informations sur mon profil Linkedin : https://fr.linkedin.com/in/guillaumemorelbailly

Publié dans : Formation
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 060
Sur SlideShare
0
Issues des intégrations
0
Intégrations
14
Actions
Partages
0
Téléchargements
178
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Formation JavaScript full-stack (JS, jQuery, Node.js...)

  1. 1. Formation « Web Avancé » JavaScript full-stack – Node.js – Meteor Février 2016 – Formation ORT 3CSi spécialité développement web Guillaume MOREL-BAILLY
  2. 2. | Copyright Cette présentation est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International (CC BY-NC-SA 4.0). http://creativecommons.org/licenses/by-nc-sa/4.0/ Vous êtes autorisé à partager et adapter ce document, selon les conditions suivantes : Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 2 Attribution — Vous devez créditer l’œuvre, intégrer un lien vers la licence et indiquer si des modifications ont été effectuées à l’œuvre. Pas d’Utilisation Commerciale — Vous n'êtes pas autorisé à faire un usage commercial de cette œuvre, tout ou partie du matériel la composant. Partage dans les mêmes conditions — Dans le cas où vous reprenez ou effectuez une modification de cette œuvre, vous devez la diffuser dans les même conditions, c'est à dire avec la même licence d’utilisation.
  3. 3. | Présentation • Guillaume MOREL-BAILLY • Développeur web et mobile freelance depuis +5 ans • Ingénieur en sécurité informatique depuis 1 an pour une SSII. Sécurisation et maintenance d’une application de BI pour un acteur mondial de l'acier inoxydable. • Me contacter : Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 3 Qui suis-je ? linkedin.com/in/guillaumemorelbailly
  4. 4. | Présentation • Tour de table pour mieux vous connaitre, cerner vos attentes et besoins. • Cursus / formation; expérience(s) professionnelle(s); technos abordées ou maitrisées; projets futurs, etc. ? • Qu’attendez-vous de cette formation ? Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 4 Qui êtes-vous ?
  5. 5. | Présentation du cours • Objectif : vous apporter une culture sur les techniques de développement web modernes orientées JavaScript. Découverte d’architectures et de frameworks client / serveur utilisés en entreprise. • Volume horaire : mois de février • Cours théorique (slides) et pratiques (exercices, TP) • Documents de cours • Evaluations : contrôles de connaissance (QCM + devoir sur feuille) + 1 application à développer de A à Z (mise en situation) Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 5
  6. 6. | Technologies, frameworks, outils… abordés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 6
  7. 7. | Plan de formation 1) Introduction à JavaScript 2) Développer avec jQuery 3) L’architecture MEAN 4) Node.js 5) Déploiement cloud sur Heroku (aparté) 6) Socket.io Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 7 7) Express 8) MongoDB 9) Angular 10) MEAN.JS 11) METEOR
  8. 8. Partie 1 Introduction à JavaScript Eléments de base du langage et concepts avancés
  9. 9. | JavaScript Histoire Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 9
  10. 10. | JavaScript – Pourquoi ? Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 10
  11. 11. | JavaScript – Histoire • 1993 : apparition du navigateur web NCSA Mosaic qui a rendu le World Wide Web populaire. Distribué gratuitement par le NCSA (National Center for Supercomputing Applications). • NCSA : un centre de recherche universitaire américain précurseur sur les technologies web. Développement par exemple du serveur web HTTPd (qui servira de base à Apache). Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 11 • 1994 : création de la Netscape Communications Corporation, puis apparition de Netscape Navigator un an plus tard, suite au débauchage des développeurs de Mosaic. • 1995 : Netscape détient plus de 90 % de part de marché, Microsoft lance Internet Explorer 1.0.
  12. 12. | JavaScript – Histoire • Netscape voulait que le langage de programmation Scheme soit intégré au sein de son navigateur. Scheme est un langage de script très épuré créé dans les années 70. • Brendan Eich est embauché par Netscape pour cette mission, mais finalement on lui demande de créer un nouveau langage de programmation. • Le cahier des charges était strict : il devait créer ce langage en 10 jours pour respecter la date de sortie de la version beta 2.0 de Netscape Navigator. Il fallait aussi s’inspirer de Java. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 12
  13. 13. | JavaScript – Histoire "There was some pressure from management to make the syntax look like Java. There was also some pressure to make it not too big, because after all, people should use Java if they're doing any real programming. This is just Java's dumb little brother. But if I put classes in, I’d be in big trouble.“ Brendan Eich Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 13
  14. 14. | JavaScript – Histoire • Brendan Eich s’est alors inspiré du langage de programmation Self, basé sur le concept de prototypes. • Le langage Mocha est créé, renommé ensuite en LiveScript. Quelques mois plus tard, en septembre 1995, Netscape opte pour un nom plus vendeur, JavaScript, après un partenariat signé avec Sun Microsystems. • Attention, malgré son nom et quelques similarités syntaxiques superficielles, JavaScript n’est pas Java ! Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 14
  15. 15. | JavaScript – Histoire • 1996 : JavaScript est rapidement adopté pour le développement web orienté client. Netscape soumet JavaScript à l’organisme de standardisation ECMA International. • Microsoft réagit en développant JScript inclus dans Internet Explorer 3. • 1997 : adoption du nouveau standard ECMAScript. Les spécifications sont rédigées dans le document Standard ECMA-262. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 15
  16. 16. | ECMAScript Tout est histoire de standardisation Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 16
  17. 17. | JavaScript – ECMAScript • Ecma International est une organisation européenne de standardisation informatique (au sens large). On pourrait le comparer au consortium W3C, mais qui est chargé uniquement des technologies du World Wide Web. • JavaScript est standardisé par Ecma International. • Le nom ECMAScript réfère au langage de programmation de type script standardisé. Le standard ECMAScript est documenté avec la spécification ECMA-262. • ECMAScript ne décrit pas le Document Object Model (DOM) qui est standardisé par le W3C. • Les spécifications du standard sont mises en œuvre dans différents langages de script. Les implémentations les plus connus étant JavaScript, Jscript et ActionScript. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 17
  18. 18. | JavaScript – ECMAScript Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 18
  19. 19. | JavaScript – ECMAScript • ECMAScript Edition 5 (ES5) : version actuellement intégrée dans les moteurs de scripts des navigateurs web  version qu’on utilisera dans le reste de ce cours • ECMAScript Edition 6 (ES6) : publié en juin 2015, ES6 (appelé aussi ES2015) n’est pas encore pleinement supporté par les navigateurs. On peut utiliser un transcompilateur comme Babel ou Traceur vers ES5 pour développer dés maintenant en ES6. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 19 Dernières versions d’ECMAScript : Tester la compatibilité ES6 de votre navigateur sur : kangax.github.io/compat-table/es6/
  20. 20. | JavaScript – ECMAScript • JavaScript, implémentation du standard ECMAScript n’a pas évolué depuis 2009. Depuis, de plus en plus d’applications web utilisent massivement JavaScript côté client. Le développement natif en JavaScript devient complexe et des manques se font sentir. • ECMAScript 6 est une mise à jour majeure du langage de script standardisé (liste complète des nouveautés sur : https://github.com/lukehoban/es6features/blob/master/README.md, comparaison de code ES5 vs ES6 sur http://es6-features.org/). • Le langage de programmation TypeScript est publié en 2012 par Microsoft. C’est un langage à part entière de JavaScript mais qui permet de transpiler le code TypeScript en JavaScript. Il a été créé pour apporter une réponse aux manques de ECMAScript 5. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 20 ECMAScript 6 (ES2015)
  21. 21. | ECMAScript 6 (ES2015) class Shape { constructor (id, x, y) { this.id = id; this.move(x, y); } move (x, y) { this.x = x; this.y = y; } } ECMAScript 5 var Shape = function (id, x, y) { this.id = id; this.move(x, y); }; Shape.prototype.move = function (x, y) { this.x = x; this.y = y; }; Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 21 JavaScript – ECMAScript
  22. 22. | JavaScript – ECMAScript • Langage de programmation open-source développé en 2012 par Microsoft, comme un sur- ensemble de JavaScript (tout code JavaScript peut être utilisé dans TypeScript). • Développé dans le but d’améliorer le code JavaScript (face aux manquements d’ECMAScript 5) : typage, interfaces, classes, modules, mixin, etc. • Le code TypeScript est transcompilé / transpiler vers JavaScript. • TypeScript supporte la spécification ECMAScript 6. Son intérêt est limité depuis l’arrivée d’ECMAScript 6. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 22 TypeScript
  23. 23. | Moteurs de script et de rendu Comprendre le fonctionnement et les composants de nos navigateurs web. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 23
  24. 24. | JavaScript – Moteurs de script Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 24
  25. 25. | JavaScript – Moteurs de script Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 25 Moteur de rendu (HTML + CSS) Moteur de script (JavaScript) Plugins (Flash, Silverlight, Applets Java, etc.)
  26. 26. | JavaScript – Moteurs de script Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 26
  27. 27. | JavaScript – Moteurs de script Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 27
  28. 28. | JavaScript – Moteurs de script Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 28 Moteur de rendu (HTML + CSS) Moteur de script (JavaScript)
  29. 29. | JavaScript – Moteurs de script Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 29 Firefox Moteur de rendu : Gecko Moteur de script : SpiderMonkey Google Chrome Moteur de rendu : Blink Moteur de script : V8 Internet Explorer Moteur de rendu : Trident Moteur de script : Chakra Safari Moteur de rendu : WebKit Moteur de script : Nitro Opera Moteur de rendu : Blink Moteur de script : V8
  30. 30. | JavaScript – Moteurs de script • Projet open-source développé par Google et écrit en C++. • Développé à l’origine pour Google Chrome, mais utilisé dans de nombreux autres projets, dont Node.js (cette technologie sera abordée dans un prochain chapitre). • Un moteur JavaScript très moderne sur plusieurs aspects. • V8 compile directement le JavaScript en langage machine (langage natif du processeur) avant de l’exécuter. Alors que les autres moteurs de script interprètent du bytecode, ou compilent le code en langage machine avant de l’exécuter. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 30 V8 : le moteur de script « next gen » de Google
  31. 31. |Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 31 JavaScript – Chargement d’une page par le navigateur
  32. 32. | Le langage JavaScript Présentation Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 32
  33. 33. | JavaScript – Présentation Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 33
  34. 34. | JavaScript – Présentation • JavaScript est un langage de script, multi-plateforme et orienté web, piloté par les évènements. • Il fait partie d’un environnement hôte, le plus souvent un navigateur web, pour qu’il puisse être utilisé sur les objets de cet environnement. • Fonctionnalités centrales et native de JavaScript : • Bibliothèque standard d’objets (Array, Date, Math, etc.) • Eléments de langage : opérateurs, structures de contrôles, instructions, etc. • Fonctionnalités étendues (côté client) : contrôle du navigateur et du DOM. Le DOM définit la façon dont les documents HTML sont exposés aux scripts. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 34 JavaScript, c’est quoi ?
  35. 35. | JavaScript – Présentation • Notion de « first-class functions » (objet de première classe). • Les fonctions JavaScript sont des objets de première classe, ce qui veut dire que les fonctions et les objets sont traités exactement de la même manière. Toute opération faite sur un entier, un string, un array ou un objet générique peut être fait sur une fonction. A l’inverse seule une fonction peut être appelée. • De manière concrète : • Une fonction peut avoir des propriétés • On peut affecter une fonction à une variable : var foo = function() {…}; • On peut passer une fonction comme paramètre à une autre fonction • Une fonction peut retourner une autre fonction Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 35 JavaScript, c’est quoi ?
  36. 36. | JavaScript – Présentation var square = function(x) { return x * x; }, mult = function (f1, f2) { return function(n) { return f1(n) * f2(n); } }, foo = mult(square, square), value = foo(2); console.log(value); // 16 Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 36 JavaScript, c’est quoi ?
  37. 37. | JavaScript vs Java (ou tout autre langage comparable : C#, C++, etc.) • JavaScript est interprété : le code est traité par le moteur de script du navigateur lors de l’exécution (ce qui le rend indépendant de toute plate-forme). Cas particulier : le moteur de script V8 de Google (inclus dans Chrome, Opera) qui compile JavaScript en code machine natif avant de l’exécuter. • Java est un langage compilé et interprété (le code source est compilé vers un bytecode, la machine virtuelle Java interprète ce bytecode). Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 37 JavaScript – Présentation
  38. 38. | JavaScript vs Java (ou tout autre langage comparable : C#, C++, etc.) • JavaScript est un langage de programmation objet orienté prototype. Les prototypes sont utilisés pour représenter les liens entre les objets. Les prototypes permettent d'avoir un héritage dynamique. Ainsi, les caractéristiques héritées par un objet peuvent varier dans le temps. • Java est un langage de programmation objet orienté classe. Il est entièrement basé sur l’utilisation de classes et de méthodes. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 38 JavaScript – Présentation
  39. 39. | JavaScript vs Java (ou tout autre langage comparable : C#, C++, etc.) • JavaScript est faiblement typé (typage dynamique). Seul le type var existe. NB : Avec ECMAScript 6, les types let et const sont introduits. TypeScript permet d’avoir un typage fort. • Java est fortement typé (typage statique) : char, byte, short, int, long, float, double, boolean et string. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 39 JavaScript – Présentation var name = "John"; var now = new Date(); var p = new Person(name, now); String name = "John"; Date now = new Date(); Person p = new Person(name, now); Person p = "Jake"; // throws ClassCastException
  40. 40. | JavaScript – Ecrire du code côté client • La balise script permet d’intégrer du code JavaScript dans une page. • Attributs de script : • type : indique le type MIME du contenu  "text/javascript" . Note : depuis HTM5 il n’est plus nécessaire de spécifier le type. • src : indique que le code se situe dans un fichier externe Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 40 Balise HTML script
  41. 41. | JavaScript – Ecrire du code côté client Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 41 Code JavaScript « inline » <script type="text/javascript"> function helloWorld() { alert("Hello World"); } </script> • Conseil : déplacer le code JavaScript dans un fichier externe et utiliser le moins possible du code inline dans un fichier HTML pour favoriser la maintenabilité et séparer clairement les responsabilités (l’affichage des traitements).
  42. 42. | JavaScript – Ecrire du code côté client Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 42 Fichier externe <!DOCTYPE html> <html lang="fr"> <head>...</head> <body> ... <script src="main.js"></script> </body> </html> • Conseil : charger les fichiers externes JavaScript en bas de page (juste avant la balise fermante body). Le navigateur web interprète la page reçue ligne par ligne : le chargement d’une ressource JavaScript est bloquante.
  43. 43. | JavaScript – Ecrire du code côté client • Sur la majorité des navigateurs web : touche F12 • Firefox intègre même une console avancée : Développement > Ardoise JavaScript (Maj + F4) Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 43 Console du navigateur
  44. 44. | Le langage JavaScript Eléments de base Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 44
  45. 45. | JavaScript Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 45
  46. 46. | JavaScript – Les opérateurs Types d’opérateurs Code d’exemple var var foo; new new Foo; Assignation foo = {bar: "a value"} foo.bar = "value"; delete delete foo.bar; Membres foo.bar; foo[‘bar’]; Appel bar(); foo.bar(); Comparaison == ou === Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 46
  47. 47. | JavaScript – Les variables Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 47 Déclarations Type de déclaration ECMAScript var ES5 On déclare une variable, éventuellement en initialisant sa valeur. let ES6 On déclare une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur. const ES6 On déclare une constante nommée, accessible en lecture seule. var x; var y = 42; var foo = "hello"; bar = "world";
  48. 48. | JavaScript – Les variables • Une variable déclarée grâce à l'instruction var ou let sans valeur initiale définie vaudra undefined. • Tenter d'accéder à une variable qui n'a pas été déclarée lèvera l’exception ReferenceError. • On utilise undefined pour déterminer si une variable possède une valeur : if (foo === undefined)… Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 48 Evaluation des variables var a; console.log("La valeur de a est " + a); // le log contient "La valeur de a est undefined" console.log("La valeur de b est " + b); // signale une exception ReferenceError
  49. 49. | JavaScript – Les variables • Valeur undefined dans un contexte booléen : convertie en false • Valeur undefined dans un contexte numérique : convertie en NaN Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 49 Evaluation des variables var monTableau = new Array(); if (!monTableau[0]){ // false maFunction(); } var a; a + 2; // NaN
  50. 50. | JavaScript – Les variables • Valeur null dans un contexte numérique : convertie en 0 (zéro) • Valeur null dans un contexte booléen : convertie en false Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 50 Evaluation des variables var n = null; console.log(n * 32); // Le log affichera 0
  51. 51. | JavaScript – Types de données • 6 types de données primitifs en ECMAScript 5: • Type booléen : Boolean (avec les valeurs true ou false) • Type nul : null • Type pour les valeurs indéfinies : undefined • Type pour les nombres : Number (par exemple 42 ou 3.14159) • Type pour les chaines de caractère : String (par exemple "Hello World") • 5 type pour les objets : Object, Array, Date, RegExp, Function Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 51
  52. 52. | JavaScript – L’instruction typeof • Comme JS est faiblement typé, on a parfois le besoin de savoir avec qu’elle type de valeur on travaille. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 52
  53. 53. | JavaScript – Conversion de types de données • D’après vous, le code suivant lève t’il une erreur ? Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 53 var answer = 42; answer = "Thanks for all the fish..."; JavaScript utilisant un typage dynamique, cette dernière instruction ne renverra pas d'erreur.
  54. 54. | JavaScript – Conversion de types de données • Lorsque des expressions impliquent des chaînes de caractères et des valeurs numériques ainsi que l'opérateur "+", JavaScript convertit les nombres en chaînes de caractères : • Attention, avec des instructions impliquant d'autres opérateurs (comme le signe "-", JavaScript ne convertit pas nécessairement les valeurs numériques en chaînes de caractères. Ainsi, on aura : Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 54 x = "La réponse est " + 42; // "La réponse est 42" y = 42 + " est la réponse"; // "42 est la réponse" foo = "37" - 7; // 30 bar = "37" + 7; // "377"
  55. 55. | JavaScript – Conversion de chaînes en nombres • parseInt effectue une conversion en valeur entière • Number effectue une conversion numérique plus stricte Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 55 parseInt(""); // NaN parseInt(42.5); // 42 parseInt("42"); // 42 parseInt("077"); // 63 (= 7 + 7*8) parseInt("123foo"); // 123 parseInt("0xF", 16); // 15 car on est en base hexa Number("foo"); // NaN Number("001"); // 1
  56. 56. | JavaScript – Conversion de chaînes en nombres • parseFloat effectue une conversion d’une chaine de caractère en nombre flottant Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 56 parseFloat("42.5"); // 42.5 parseFloat("1.45kg"); // 1.45 parseFloat("77.3"); // 77.3 parseFloat("077.3"): // 77.3 parseFloat("0x77.3"): // 0 parseFloat(".3"); // 0.3 parseFloat("0.1e6"); // 100000
  57. 57. | JavaScript – Opérateur de comparaison Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 57
  58. 58. | JavaScript - Commentaires // un commentaire sur une ligne /* un commentaire plus long sur plusieurs lignes */ /* Par contre on ne peut pas /* imbriquer des commentaires */ SyntaxError */ Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 58
  59. 59. | JavaScript - Objets Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 59 • Liste d’une ou plusieurs paires de propriétés nom / valeur • Ces paires sont délimitées par des accolades : { } • On peut également pour imbriquer un objet dans un autre var person = { firstName: "John", lastName: "Honda", age: 29, foo: { bar: "test" } };
  60. 60. | JavaScript - Objets Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 60 var sales = "Toyota"; function carTypes(name) { if (name === "Honda") { return name; } else { return "Sorry, we don't sell " + name + "."; } } var car = { myCar: "Saturn", getCar: carTypes("Honda"), special: sales }; console.log(car.myCar); // Saturn console.log(car.getCar); // Honda console.log(car.special); // Toyota
  61. 61. | JavaScript – Tableaux (Arrays) • Les tableaux JavaScript sont des objets semblables à une liste • Ils possèdent plusieurs méthodes incorporées pour exécuter des opérations de parcours et de modification. • Syntaxes pour créer un array : Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 61 Description et syntaxe [element0, element1, ..., elementN] new Array(element0, element1[, ...[, elementN]]) new Array(arrayLength) var fruits = ["Apple", "Banana"];
  62. 62. | JavaScript – Tableaux (Arrays) • Le premier élément d'un tableau a 0 pour indice • La position du dernier élément est donnée par length moins 1. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 62 Accéder aux éléments d’un tableau var arr = ["this is the first element", "this is the second element"]; console.log(arr[0]); // logs 'this is the first element' console.log(arr[1]); // logs 'this is the second element' console.log(arr[arr.length - 1]); // logs 'this is the second element‘ var fish = ["Lion", , "Angel"]; console.log(fish[0]); // logs ‘Lion' console.log(fish[1]); // logs ‘undefined' console.log(fish[2]); // logs ‘Angel ‘
  63. 63. | JavaScript – Tableaux (Arrays) • Les éléments d'un tableau sont simplement des propriétés d'objets. • Normalement on accède à une propriété d’objet avec la notation en point (object.property) • Cependant il n’est pas possible d’accéder aux propriétés dont le nom commence par un chiffre. Il est nécessaire d'utiliser la syntaxe avec les crochets. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 63 Accéder aux éléments d’un tableau var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; console.log(years.0); // a syntax error console.log(years[0]); // works properly
  64. 64. | JavaScript – Tableaux (Arrays) • De façon semblable, les propriétés nommées avec des mots-clés réservés ne peuvent être consultées qu'en utilisant la syntaxe avec crochets : Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 64 Accéder aux éléments d’un tableau (aparté) // An object var promise = { 'var' : 'text', 'array': [1, 2, 3, 4] }; Console.log(promise.array); // syntax error console.log(promise['array']); // works properly
  65. 65. | JavaScript – Objet natif : exemple de Math • L’objet Math est un objet natif dont les méthodes et propriétés permettent l'utilisation de constantes et fonctions mathématiques. • Cet objet n'est pas une fonction ! • Toutes les propriétés et les méthodes de Math sont statiques. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 65 console.log(Math.e); // 2.718 (nombre d’Euler) Console.log(Math.PI); // 3.14159… Console.log(Math.min(2, 58)); // 2 Console.log(Math.ceil(42.3)); // 43 : plus petit entier supérieur Console.log(Math.floor(42.8)); // 42 : plus petit entier inférieur
  66. 66. | JavaScript - Instructions conditionnelles Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 66 Instruction if...else if (condition_1) { statement_1; } else if (condition_2) { statement_2; } else if (condition_n) { statement_n; } else { statement_last; }
  67. 67. | JavaScript - Instructions conditionnelles • Lors d'un test, les valeurs suivantes seront considérées comme équivalentes à false : • False • Undefined • Null • 0 • NaN • La chaine de caractère vide ("") Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 67 Instruction if...else
  68. 68. | JavaScript - Instructions conditionnelles • Attention à ne pas confondre les valeurs booléennes « primitives » true et false avec les valeurs crées grâce à un objet Boolean. Par exemple, on aura : Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 68 Instruction if...else var b = new Boolean(false); if (b) // this condition evaluates to true if (b == true) // this condition evaluates to false
  69. 69. | JavaScript - Instructions conditionnelles Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 69 Instruction switch switch (fruittype) { case "Oranges": console.log("Oranges are $0.59 a pound."); break; case "Apples": console.log("Apples are $0.32 a pound."); break; case "Bananas": console.log("Bananas are $0.48 a pound."); break; default: console.log("Sorry, we are out of " + fruittype + "."); } console.log("Is there anything else you'd like?");
  70. 70. | JavaScript – Boucles et itérations Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 70 Instruction for for (var i = 0; i < 9; i++) { console.log(i); // more statements } var i = 0; for (;;) { if (i > 3) break; console.log(i); i++; }
  71. 71. | JavaScript – Boucles et itérations • Permet d'itérer sur l'ensemble des propriétés énumérables d'un objet, dans un ordre arbitraire. • Ne doit pas être utilisée pour parcourir un Array lorsque l'ordre des éléments est important ! Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 71 Instruction for…in var obj = {a:1, b:2, c:3}; for (var prop in obj) { console.log("obj." + prop + " = " + obj[prop]); } // Output: // "obj.a = 1" // "obj.b = 2" // "obj.c = 3"
  72. 72. | JavaScript – Boucles et itérations • Permet d'exécuter une instruction tant qu'une condition donnée est vérifiée. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 72 Instruction while while (i < 10) { text += "The number is " + i; i++; }
  73. 73. | JavaScript – Boucles et itérations • Permet de répéter un ensemble d'instructions jusqu'à ce qu'une condition donnée ne soit plus vérifiée. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 73 Instruction do…while do { i += 1; console.log(i); } while (i < 5);
  74. 74. | JavaScript – Concepts avancés • Il est possible de lever (c’est-à-dire signaler) des exceptions avec l'instruction throw et de les gérer (les intercepter) avec des instructions try...catch. • En JavaScript, n'importe quel objet peut être signalé comme une exception : throw "Erreur2"; • Cependant, afin de respecter certaines conventions et de bénéficier de certaines informations, on préférera les exceptions de base ECMAScript ou DOMException / DOMError si on manipule le DOM. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 74 Gestion des exceptions Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError
  75. 75. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 75 Gestion des exceptions // Lever une erreur générique try { throw new Error("Ouups !"); } catch (e) { console.log(e.name + ": " + e.message); }
  76. 76. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 76 Gestion des exceptions // Gérer une erreur spécifique try { foo.bar(); } catch (e) { if (e instanceof EvalError) { console.log(e.name + ": " + e.message); } else if (e instanceof RangeError) { console.log(e.name + ": " + e.message); } // ... etc }
  77. 77. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 77 Gestion des exceptions // On crée un nouvel objet, héritage par prototype depuis le constructeur de type Error function MyError(message) { this.name = 'MyError'; this.message = message || 'Default Message'; this.stack = (new Error()).stack; } MyError.prototype = Object.create(Error.prototype); MyError.prototype.constructor = MyError; try { throw new MyError('custom message'); } catch (e) { console.log(e.name); // 'MyError' console.log(e.message); // 'custom message' }
  78. 78. | JavaScript – Fonctions • Les fonctions font partie des briques fondamentales de JavaScript. • Rappel de la partie « Présentation » : les fonctions sont des objets de première classe. Cela signifie qu'elles peuvent être manipulées et échangées, qu'elles peuvent avoir des propriétés et des méthodes, comme tous les autres objets JavaScript. • Une fonction est une procédure JavaScript, un ensemble d'instructions effectuant une tâche ou calculant une valeur. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 78 var x = myFunction(4, 3); // Function is called, return value will end up in x function myFunction(a, b) { return a * b; // Function returns the product of a and b }
  79. 79. | JavaScript – Fonctions • Déclaration d’une fonction Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 79 function add(a, b) { var c = a+b; return c; } var add = function (a, b) { var c = a+b; return c; }; • On peut également assigner une fonction à une variable
  80. 80. | JavaScript – Fonctions • On peut aussi rendre une fonction auto exécutable : Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 80 (function() { console.log('Hello World!'); })(); // Affichera Hello World! à l’ouverture de la page
  81. 81. | JavaScript – Fonctions • Les paramètres donnés lors de l'appel d'une fonction sont appelés les arguments de la fonction. • Les arguments sont passés par valeur. Si la fonction modifie la valeur d'un argument, ce changement ne se répercute pas en dehors de la fonction. • Cas spécifique : passage par référence d’un objet. Si la fonction modifie les propriété de l'objet de la référence, ce(s) changement(s) seront perceptibles en dehors de la fonction. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 81 NB: Les notions de porté, passage par valeur et référence seront étudiées plus en détail dans le chapitre suivant.
  82. 82. | JavaScript – Fonctions Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 82 // Declare the function 'myFunc' function myFunc(theObject) { theObject.brand = "Toyota"; } var mycar = { brand: "Honda", model: "Accord", year: 1998 }; console.log(mycar.brand); // Log 'Honda‘ myFunc(mycar); // Pass object reference to the function // Logs 'Toyota' as the value of the 'brand' property of the object, as changed to by the function console.log(mycar.brand);
  83. 83. | Le langage JavaScript Manipulation du DOM Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 83
  84. 84. | JavaScript – Manipulation du DOM • JavaScript contient une bibliothèque standard d'objets tels que Array, Date, et Math, ainsi qu'un ensemble d'éléments de langage (on vient de les voir). • Ces fonctionnalités centrales et natives de JavaScript peuvent être étendues de plusieurs façons en fournissant d'autres objets. • JavaScript côté client étend ces éléments de base en fournissant des objets pour contrôler le navigateur et le Document Object Model (DOM). • Le DOM définit la façon dont les documents HTML sont exposés aux scripts. C’est une API, standardisée par le W3C et exploitée par les navigateurs web (entre autre). Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 84
  85. 85. | JavaScript – Manipulation du DOM • De manière simplifiée, le DOM : • fournit une représentation structurée d’un document HTML ou XML; • codifie la manière dont un script peut accéder à cette structure. • Le DOM parcourt une hiérarchie d’éléments. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 85
  86. 86. | JavaScript – Manipulation du DOM Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 86
  87. 87. | JavaScript – Manipulation du DOM • L’API DOM est accessible par JavaScript via l’objet « document » • Plusieurs méthodes : • document.createElement() • document.getElementById() • document.getElementByTagName() • document.getElementByName() • Plusieurs propriétés : • innerHTML • innerText Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 87
  88. 88. | JavaScript – Manipulation du DOM • Créer une page HTML composée des éléments suivantes : • Un titre de niveau h1 • Un paragraphe contenant du texte (contenant des mots en « strong », un lien, etc.) • Une liste de type ul ou ol • Le tout englobé dans un div • Utiliser document pour mettre en couleur le paragraphe • Créer un bouton permettant d’afficher une popup contenant l’attribut href du lien contenu dans le paragraphe. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 88 Exercice n°1 : objectif
  89. 89. | JavaScript – Manipulation du DOM Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 89 Exercice n°1 : correction <div id="wrapper"> <h1>Hello World!</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit, metus et aliquam convallis, orci est blandit metus, vel fringilla erat ex sit amet odio. Nunc consectetur aliquet odio, sit amet suscipit orci. Maecenas <a href="http://www.google.fr" title="Google" id="link">finibus</a> ipsum.</p> <ul> <li>Lorem ipsum</li> <li>Dolor sit amet</li> <li>Foo bar</li> </ul> <button id="myButton">Get href</button> </div>
  90. 90. | JavaScript – Manipulation du DOM Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 90 Exercice n°1 : correction <script> var elements = document.getElementsByTagName("p"); var length = elements.length; for (var i = 0; i < length; i++) { elements[i].style.color= "red"; } var myLink = document.getElementById("link"); var myButton = document.getElementById("myButton"); myButton.addEventListener("click", function(event) { alert(myLink.getAttribute("href")); }); </script>
  91. 91. | JavaScript – Manipulation du DOM • Créer une fonction JavaScript qui permette d’ajouter une ligne à un tableau au clic sur un bouton. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 91 Exercice n°2 : objectif <table id="myTable" border="1"> <tr> <td>Ligne1 cellule1</td> <td>Ligne1 cellule2</td> </tr> <tr> <td>Ligne2 cellule1</td> <td>Ligne2 cellule2</td> </tr> </table>
  92. 92. | JavaScript – Manipulation du DOM Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 92 Exercice n°2 : correction function insertRow() { var foo = document.getElementById('myTable').insertRow(0); var cell1 = foo.insertCell(0); var cell2 = foo.insertCell(1); cell1.innerHTML = "NvllLigne Cellule1"; cell2.innerHTML = "NvllLigne Cellule2"; } <button id="insertNewRow" onclick="insertRow">Ajouter une nouvelle ligne</button>
  93. 93. | JavaScript – Manipulation du DOM • Créer une page contenant un bouton qui permette de de générer un nombre aléatoire compris entre 1 et 12. • Afficher le résultat dans un champ input de type text. • Le bouton doit changer d’état : au premier chargement, afficher « Jouer » puis afficher « Rejouer ». • Astuce : vous pouvez utiliser l’objet Math pour générer un nombre aléatoire. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 93 Exercice n°3 – « Tirage au sort » : objectif
  94. 94. | JavaScript – Manipulation du DOM Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 94 Exercice n°3 – « Tirage au sort » : correction Pour générer le nombre aléatoire entre 1 et 12 : // Valeur min inclue, max inclue Math.floor(Math.random() * (max - min + 1)) + min; -> Math.random : nbr entre 0 et 1 -> (max - min + 1) : 12 - 1 + 1 -> Math.floor = plus grand entier qui est <= à un nbr x
  95. 95. | JavaScript – Manipulation du DOM • Créer une fonction JavaScript qui, au clic sur un bouton : • Demande à l’utilisateur de saisir le nombre de colonnes et le nombre de lignes. • Créée dynamiquement un tableau en fonction des entrées récupérées (et modifier le nom de chaque cellule créée). • Astuce : utiliser window.prompt() Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 95 Exercice n°4 : objectif
  96. 96. | JavaScript – Manipulation du DOM Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 96 Exercice n°4 : correction <table id="theTable" border="1"></table> <button onclick="create">Créer un tableau</button> // ou via fonction anonyme function create() { nbRow = window.prompt("Nombre de ligne", 1); nbCell = window.prompt("Nombre de colonnes", 1); for (var r = 0; r < parseInt(nbRow, 10); r++) { var x = document.getElementById(‘theTable').insertRow(r); for (var c = 0; c < parseInt(nbCell, 10); c++) { var y = x.insertCell(c); y.innerHTML=« Ligne "+ r +« , colonne "+ c; } } }
  97. 97. | JavaScript – Manipulation du DOM Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 97 Exercice n°5 : objectif • Créer une liste HTML (select) puis ajouter quelques éléments à cette liste (option). • Ajouter un bouton qui permettre de supprimer l’élément sélectionné de la liste. • Astuce : selectedIndex permet de récupérer l’élément sélectionné d’une liste HTML
  98. 98. | JavaScript – Manipulation du DOM Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 98 Exercice n°5 : correction <select id="fruits"> <option>Orange</option> <option>Mandarine</option> <option>Banane</option> <option>Kiwi</option> </select> <input type="button" id="myButton" value="Supprimer ce fruit"> var myButton = document.getElementById("myButton"); myButton.addEventListener("click", function(event) { var fruitsList = document.getElementById("fruits"); fruitsList.remove(fruitsList.selectedIndex); });
  99. 99. | JavaScript – Manipulation du DOM • Ecrire un programme qui permette d’afficher une image aléatoire après un clic sur un bouton. Attention : ces images doivent être préchargées lors du premier clic (pour améliorer l’UI). • Pour vous aider, voici quelques étapes : • Créer un objet contenant vos images avec quelques propriétés, ex : url, hauteur, largeur. • Précharger les images avec new Image(), les stocker dans un tableau. • Créer une fonction permettant de générer un nombre aléatoire (pour charger l’image aléatoirement dans votre objet) compris entre 0 et la taille de votre tableau de buffer. Vous pouvez vous baser sur l’exercice précédent. • Retourner l’élément correspondant à ce nombre aléatoire à partir du tableau de buffer (on reçoit une « instance » de Image). • Afficher l’image (en remplaçant la précédente). Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 99 Exercice n°6 – « Chargement d’images » : objectif
  100. 100. | JavaScript – Manipulation du DOM Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 100 Exercice n°6 – « Chargement d’images » : correction // Tableau de nos images var imgs = [{ src: "file:///C:/Users/user/Desktop/image1.jpeg", width: "256", height: "256" },{ src: "file:///C:/Users/user/Desktop/image2.jpg", width: "435", height: "474" },{ src: "file:///C:/Users/user/Desktop/image3.jpg", width: "330", height: "330" },{ src: "file:///C:/Users/user/Desktop/image4.jpg", width: "320", height: "330" } ];
  101. 101. | JavaScript – Manipulation du DOM Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 101 Exercice n°6 – « Chargement d’images » : correction // L’instanciation de Image, va automatiquement lancée une requête HTTP GET var imgBuffer = []; for (var i = 0, j = imgs.length; i < j; i++) { imgBuffer[i] = new Image(); imgBuffer[i].src = imgs[i].src; imgBuffer[i].width = imgs[i].width; imgBuffer[i].height = imgs[i].height; } // getRandNb retourne un objet Image // attribut de la méthode : valeur min, max => voir exercice précédent (compteur) var randomImg = getRandNb(0, preBuffer.length - 1); // Remplacer l’image existante var newImage = getRandomInt(0, imgBuffer.length - 1); var container = document.getElementById('container'); container.innerHTML = ''; container.appendChild(newImage);
  102. 102. | JavaScript – Manipulation du DOM • Analyser et comprendre le code existant (dispo sur l’espace partagé). • Améliorer l'interface utilisateur : par exemple, modifier l'état du bouton "Démarrer le jeu" après avoir démarrer une partie. • Le jeu devra gérer trois niveaux différents. Chaque niveau augmentant la complexité du puzzle et modifiant l'image de fond. • Le jeu devra garder les scores ainsi que les noms des joueurs par rapport au temps mis pour faire le puzzle et au nombre de mouvements réalisés. Il affichera les cinq meilleurs scores à la fin d'une partie, pour le niveau joué, dans un canevas (même principe que le texte de départ). Si les niveaux sont tous passés, afficher le classement global. • Soyez force de proposition ! Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 102 Exercice n°7 – « Puzzle glissant » : objectif Exercice noté Basé sur l’application de Brad Manderscheid développée pour TutsPlus.com
  103. 103. | Le langage JavaScript AJAX Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 103
  104. 104. | JavaScript – AJAX Asynchronous JavaScript And XML Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 104 Format d’échange de données en le client et le serveur. Historiquement du XML, puis progressivement remplacé par du JSON. On peut également échanger du texte brut. Une requête AJAX est asynchrone (non bloquante côté client). Le client écoute en parallèle une éventuelle réponse du serveur. Langage de script utilisé côté client pour initier les requêtes AJAX et éventuellement traiter la réponse du serveur. Manipulation du DOM pour mettre à jour le contenu. 1/ 2/ 3/
  105. 105. | JavaScript – AJAX • AJAX n’est pas un langage mais une architecture qui fait appel à plusieurs technologies. • Permet de dynamiser tout ou partie d’une page web pour enrichir l’expérience utilisateur en ne forçant plus le rechargement complet d’une page. • Première apparition du terme « AJAX » en 2005 dans un article du Web Adaptive Path rédigé par l’architecte Jesse James Garrett. Depuis, AJAX a rapidement été adopté par les développeurs. • Le concept de rechargement dynamique d’une page web est apparu dés 1996 via l’utilisation d’iframe et de l’élément HTML layer (abandonné depuis) : souvent regroupé sous le terme DHTML. • Une solution plus élégante a été introduite par Microsoft en 1998 : MSRS (pour Microsoft Remote Scripting) qui fonctionnait via un applet Java auquel on pouvait donner dynamiquement des données par le biais d'un module JavaScript. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 105
  106. 106. | JavaScript – AJAX • Microsoft a ensuite introduit l’objet XMLHttpRequest dans Internet Explorer 5 et dans Outlook Web Access (une sorte de webmail disponible avec Microsoft Exchange Server). • L’utilisation d’un applet Java dans MSRS a été remplacé par celui de l’objet XMLHttpRequest dans les années 2000. • Entre 2002 et 2005, l’objet XMLHttpRequest a été introduit dans le standard ECMAScript, le rendant utilisable par l’ensemble des navigateurs web du marché. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 106
  107. 107. | JavaScript – AJAX Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 107 Modèle d’application web classique
  108. 108. | JavaScript – AJAX Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 108 Modèle d’application web dynamique
  109. 109. | JavaScript – AJAX Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 109 Modèle d’application web dynamique (or JSON)
  110. 110. | JavaScript – AJAX • Objet natif de JavaScript pouvant être utilisé par l’ensemble des moteurs de script (car standardisé dans l’ECMAScript). • Cependant, il y a quelques différences d’implémentation selon le moteur et la version du navigateur de l’utilisateur. AJAX étant très demandé, c’est l’une des raisons pour laquelle jQuery a rapidement gagné en popularité. • XMLHttpRequest permet d'envoyer des requêtes synchrones ou asynchrones en HTTP. Mais il est généralement utilisé que pour l’envoi de requêtes asynchrones (c’est là tout son intérêt). • Donc l’objet XMLHttpRequest != AJAX (qui est une architecture, un semble de technologies). Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 110 L’objet XMLHttpRequest
  111. 111. | JavaScript – AJAX • XMLHttpRequest permet d'envoyer des requêtes HTTP (GET, POST, PUT, etc.) de manière très simple. Il suffit de créer une instance de l'objet, d’attacher éventuellement une fonction de callback, de lier une URL, et d'envoyer la requête. • Il existe plusieurs fonctions natives que nous allons voir dans les slides suivants. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 111 L’objet XMLHttpRequest
  112. 112. | JavaScript – AJAX • Les navigateurs modernes (Chrome, IE 7+, Firefox, etc.) supportent l’objet XMLHttpRequest. On abordera pas la gestion de l’AJAX pour les anciennes versions de ces navigateurs. • La syntaxe pour créer un objet XMLHttpRequest est la suivante : • A partir de cette instance, on peut utiliser les fonctions de XMLHttpRequest. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 112 L’objet XMLHttpRequest – Création d’un objet var xhttp = new XMLHttpRequest();
  113. 113. | JavaScript – AJAX • Pour envoyer une requête HTTP à un serveur, on utilise les fonctions open() et send(). Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 113 L’objet XMLHttpRequest – Envoyer une requête à un serveur xhttp.open('POST', 'foo.php', true); xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); // Optionnel Xhttp.send('firstName=John&lastName=Doe'); Fonction Description open(method, url, async) Spécifie le type de requête HTTP. send() Envoi la requête à un serveur. send(string) Envoi la requête à un serveur et transmet des données (typiquement, pour une requête HTTP de type POST).
  114. 114. | JavaScript – AJAX • Si une requête asynchrone (c’est-à-dire non bloquante) a été initiée, il faut spécifier la fonction JavaScript qui sera appelée lors de la réponse du serveur. C’est ce qu’on appelle une fonction de callback. • On utilisera l’évènement onreadystatechange de l’objet XMLHttpRequest Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 114 L’objet XMLHttpRequest – Recevoir une requête du serveur xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status == 200) { var response = xhttp.responseText; } }; xhttp.open("GET", "foo.php", true); xhttp.send(); Réponse retournée par le serveur Utiliser xhttp.responseXML si du XML est retourné par le serveur.
  115. 115. | JavaScript – AJAX Propriété Description / valeurs onreadystatechange Enregistre une fonction qui devra être appelée automatiquement à chaque fois que la propriété readyState change. Généralement on passe une fonction anonyme. readyState Statut de la requête XMLHttpRequest : 0 : request not initialized 1 : server connection established 2 : request received 3 : processing request 4 : request finished and response is ready status 200 : « OK » 404 : Page non trouvée Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 115 L’objet XMLHttpRequest – Recevoir une requête du serveur
  116. 116. | JavaScript – AJAX • On a vu qu’on pouvait utiliser l’évènement onreadystatechange ainsi que la propriété readyState pour surveiller la progression d’une requête asynchrone. • Une évolution de l’API permet maintenant d’utiliser la fonction addEventListener (implémentant l’interface ProgressEvent) pour intercepter les notifications de progression périodiques, de notifications d’erreur, etc. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 116 L’objet XMLHttpRequest – Recevoir une requête du serveur oReq.addEventListener("progress", updateProgress, false); oReq.addEventListener("load", transferComplete, false); oReq.addEventListener("error", transferFailed, false); oReq.addEventListener("abort", transferCanceled, false); oReq.open();
  117. 117. | JavaScript – AJAX • Historiquement le format XML était utilisé pour échanger des données entre le client et le serveur. • Cependant ce format est lourd et difficile à parser en JavaScript. • JSON (JavaScript Object Notation) est un format de données léger destiné à la transmission de données. Il est indépendant de tout langage, bien qu’il se rapproche de la syntaxe objet de JavaScript. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 117 XML ou JSON ?
  118. 118. | JavaScript – AJAX Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 118 XML ou JSON ? {"employees":[ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter", "lastName":"Jones"} ]} <employees> <employee> <firstName>John</firstName> <lastName>Doe</lastName> </employee> <employee> <firstName>Anna</firstName> <lastName>Smith</lastName> </employee> <employee> <firstName>Peter</firstName> <lastName>Jones</lastName> </employee> </employees>
  119. 119. | JavaScript – AJAX • L'objet natif JSON contient des méthodes pour convertir des valeurs en JSON et pour convertir des données JSON en valeurs JavaScript. • La méthode JSON.stringify() permet de convertir une valeur en JSON, et éventuellement de remplacer des valeurs grâce à une fonction de remplacement ou en ne filtrant que certaines propriétés données. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 119 XML ou JSON ? JSON.stringify({}); // '{}' JSON.stringify(true); // 'true' JSON.stringify("toto"); // '"toto"' JSON.stringify({x: 5, y: 6}); // '{"x":5,"y":6}'
  120. 120. | JavaScript – AJAX • La méthode JSON.parse() interprète une chaîne de caractères comme du JSON, transformant de façon optionnelle la valeur produite et ses propriétés, puis retourne la valeur. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 120 XML ou JSON ? var text = '{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}'; var obj = JSON.parse(text); document.getElementById("demo").innerHTML = obj.name + "<br>" + obj.street + "<br>" + obj.phone;
  121. 121. | JavaScript – AJAX • L’architecture AJAX est utilisée massivement dans les sites et applications web. Généralement utilisée pour dynamiser quelques éléments comme la validation et l’envoi d’un formulaire, la pagination d’éléments, etc. • On développe également des applications « full-ajax » : le code peut devenir vite complexe, lourd, difficile à maintenir. • D’autres technologies ont émergées en remplacement ou complément de Ajax, par exemple les WebSocket ou le concept de « binding » (pour lier de manière automatique un élément du DOM à une source de données) utilisé par exemple par AngularJS ou EmberJS. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 121 AJAX : Aujourd’hui et demain
  122. 122. | Le langage JavaScript Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 122
  123. 123. | JavaScript – Concepts avancés • La portée est un des éléments fondamentaux de JavaScript, et peut être le plus difficile à maitriser car il diffère beaucoup des autres langages de programmation. La portée s’applique aux variables comme aux fonctions. • Afin d'utiliser une fonction, il est nécessaire de l'avoir auparavant définie au sein de la portée dans laquelle on souhaite l'appeler. • On ne peut pas accéder aux variables définies dans une fonction en dehors de cette fonction : ces variables n'existent que dans la portée de la fonction. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 123 Fonctions : portée
  124. 124. | JavaScript – Concepts avancés • En revanche, une fonction peut accéder aux différentes variables et fonctions qui appartiennent à la portée dans laquelle elle est définie. • Une fonction définie dans une autre fonction peut également accéder à toutes les variables de la fonction « parente » et à toute autre variable accessible depuis la fonction « parente ». Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 124 Fonctions : portée
  125. 125. | Fonctions : portée Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 125 JavaScript – Concepts avancés // The following variables are defined in // the global scope var num1 = 20, num2 = 3, name = "Licorne"; // This function is defined in the global scope function multiply() { return num1 * num2; } multiply(); // Returns 60 // A nested function example function getScore () { var num1 = 2, num2 = 3; function add() { return name + " scored " + (num1 + num2); } return add(); } getScore(); // Returns "Chamahk scored 5"
  126. 126. | JavaScript – Concepts avancés • Comme on l’a vu, JavaScript permet d'imbriquer des fonctions et la fonction interne aura accès aux variables et paramètres de la fonction parente. À l'inverse, la fonction parente ne pourra pas accéder aux variables liées à la fonction interne. • On crée ce qu’on appelle une closure (fermeture en français) lorsque la fonction interne est disponible en dehors de la fonction parente. • Une closure est un objet spécial qui combine : une fonction + l’environnement dans lequel la fonction a été créée. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 126 Fonctions : closures
  127. 127. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 127 Fonctions : closures var animal = function(nom) { // La fonction externe utilise un paramètre "nom" var getNom = function () { // La fonction interne accède à la variable "nom" de la fonction externe return nom; } // Renvoie la fonction interne pour la rendre disponible // en dehors de la portée de la fonction parente return getNom; } monAnimal = animal("Licorne"); monAnimal(); // Renvoie "Licorne" Exemple 1 :
  128. 128. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 128 Fonctions : closures function createFunction() { var name = "Hello"; function displayName() { alert(name); } return displayName; }; var myFunction = createFunction(); myFunction(); Exemple 2 : • L'intérêt de ce code est que la fonction displayName() a été renvoyée depuis la fonction parente avant d'être exécutée. • Normalement, les variables locales d'une fonction n'existent que pendant l'exécution d'une fonction. Une fois que createFunction() aura fini son exécution, on peut penser que la variable name ne sera plus accessible.
  129. 129. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 129 Fonctions : closures function createFunction() { var name = "Hello"; function displayName() { alert(name); } return displayName; }; var myFunction = createFunction(); myFunction(); • Cependant, le code continue à fonctionner : la variable est donc accessible d'une certaine façon. • La solution est la suivante : createFunction est devenue une closure.
  130. 130. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 130 Fonctions : closures function createFunction() { var name = "Hello"; function displayName() { alert(name); } return displayName; }; var myFunction = createFunction(); myFunction(); • Pour rappel : closure = fonction + environnement dans lequel la fonction a été créée. • L'environnement est composé de toutes les variables locales de la portée présente lorsque la fermeture a été créée. • Ici myFunction est une fermeture qui contient la fonction displayName et la chaîne de caractères "Hello" qui existait lorsque la closure a été créée.
  131. 131. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 131 Fonctions : closures function faireAddition(x) { return function(y) { return x + y; }; }; var ajout5 = faireAddition(5); var ajout10 = faireAddition(10); console.log(ajout5(2)); // 7 console.log(ajout10(2)); // 12 Exemple 3 : • faireAddition permet de créer d'autres fonctions (qui font la somme de leur argument et d'un nombre fixe). • On crée deux fonctions, la première qui ajoute 5 à l'argument et la deuxième qui ajoute 10. • ajout5 et ajout10 sont des closures. Ils partagent la même définition de fonction mais des environnements différents. • Dans l'environnement de ajout5, x vaut 5. Pour ajout10, x vaut10.
  132. 132. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 132 Fonctions : closures function getCounter() { var i = 0; return function () { return i++; } } var counter1 = getCounter(); var counter2 = getCounter(); console.log(counter1()); // 1 console.log(counter1()); // 2 console.log(counter2()); // 1 console.log(counter2()); // 2 console.log(counter1()); // 3 console.log(counter1()); // 4 Exemple 4 :
  133. 133. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 133 Fonctions : closures var sayHello = function (name) { var text = 'Hello, ' + name; return function () { console.log(text); }; }; sayHello('Todd'); Exemple 5 : que fait ce code ?
  134. 134. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 134 Fonctions : closures var sayHello = function (name) { var text = 'Hello, ' + name; return function () { console.log(text); }; }; var helloTodd = sayHello('Todd'); helloTodd(); // will call the closure and log 'Hello, Todd' Exemple 5 : que fait ce code ?
  135. 135. | JavaScript – Concepts avancés Exercice d’application : • Soit le code HTML suivant : • Créer un script qui permette de changer le texte d’aide (par défaut « Des aides seront affichées ici ») au clic sur un champ input. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 135 Fonctions : closures <span id="helper">Des aides seront affichées ici</span> <p>Email : <input type="text" id="email" /></p> <p>Nom : <input type="text" id="name" /></p> <p>Âge : <input type="text" id="age" /></p>
  136. 136. | JavaScript – Concepts avancés • Dans une fonction JavaScript on aura l’objet suivant : Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 136 Fonctions : closures var helpers = [ {'id': 'email', 'helper': 'Votre adresse e-mail'}, {'id': 'name', 'helper': 'Votre prénom et nom'}, {'id': 'age', 'helper': 'Votre age (vous devez avoir au moins 18 ans)'} ]; • Aide : faire une boucle sur cet objet et manipuler le DOM avec la fonctions document.getElementById() pour sélectionner un élément HTML via son id. Utiliser « innerHTML » pour modifier le contenu d’un élément, et onfocus pour créer un évènement au focus.
  137. 137. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 137 function showHelp(help) { document.getElementById('helper').innerHTML = help; } function setupHelp() { var helpText = [ {'id': 'email', 'helper': 'Votre adresse e-mail'}, {'id': 'name', 'helper': 'Votre prénom et nom'}, {'id': 'age', 'helper': 'Votre age (vous devez avoir au moins 18 ans)'} ]; for (var i = 0; i < helpText.length; i++) { var item = helpText[i]; document.getElementById(item.id).onfocus = function() { showHelp(item.helper); } } } setupHelp();
  138. 138. | JavaScript – Concepts avancés • Problème : le code précédent ne fonctionne pas. Quelque soit le champ sur lequel on se situe, le message d'aide concernant l'âge est le seul qui s'affiche. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 138 Fonctions : closures
  139. 139. | JavaScript – Concepts avancés • Explications : les fonctions attachées aux gestionnaires d'événements sont des closures et que l'environnement qui leur est rattaché est le même pour les trois : il provient de la portée de la fonction setupHelp. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 139 Fonctions : closures function setupHelp() { ... for (var i = 0; i < texteAide.length; i++) { var item = helpText[i]; document.getElementById(item.id).onfocus = function() { showHelp(item.helper); } } } Closure
  140. 140. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 140 Fonctions : closures function makeHelpCallback(help) { return function() { showHelp(help); }; } function setupHelp() { ... for (var i = 0; i < helpText.length; i++) { var item = helpText[i]; document.getElementById(item.id).onfocus = makeHelpCallback(item.help); } }
  141. 141. | JavaScript – Concepts avancés • On ne peut pas accéder aux variables définies dans une fonction en dehors de cette fonction : ces variables n'existent que dans la portée de la fonction. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 141 Portée des fonctions et variables // code here can not use carName function myFunction() { var carName = "Volvo"; // code here can use carName console.log(carName); // Volvo } console.log(carName); // Uncaught ReferenceError: carName is not defined
  142. 142. | JavaScript – Concepts avancés • Si on assigne une valeur à une variable qui n’a pas été déclarée (avec var), cette variable aura automatiquement une portée globale. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 142 Portée des fonctions et variables // code here can use carName function myFunction() { carName = "Volvo"; // code here can use carName }
  143. 143. | JavaScript – Concepts avancés • Une fonction peut accéder aux différentes variables et fonctions qui appartiennent à la portée dans laquelle elle est définie. • Une variable déclarée en dehors d’une fonction a une portée globale. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 143 Portée des fonctions et variables var carName = "Volvo"; // code here can use carName function myFunction() { // code here can use carName }
  144. 144. | JavaScript – Concepts avancés • Une fonction définie dans une autre fonction (= closure) peut également accéder à toutes les variables de la fonction « parente » et à toute autre variable accessible depuis la fonction « parente ». Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 144 Portée des fonctions et variables
  145. 145. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 145 Portée des fonctions et variables // Variables globales var num1 = 20, num2 = 3, nom = "Licorne"; // Fonction définie dans la portée globale function multiplier() { return num1 * num2; } multiplier(); // Renvoie 60 function getScore () { var num1 = 2, num2 = 3; function ajoute() { return nom + " a marqué " + (num1 + num2); } return ajoute(); } getScore(); // "Licorne a marqué 5"
  146. 146. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 146 Portée et this var myFunction = function () { console.log(this); // this = global, [object Window] }; myFunction(); var myObject = {}; myObject.myMethod = function () { console.log(this); // this = Object { myObject } }; var nav = document.querySelector('.nav'); // <nav class="nav"> var toggleNav = function () { console.log(this); // this = <nav> element }; nav.addEventListener('click', toggleNav, false);
  147. 147. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 147 Portée et this var nav = document.querySelector('.nav'); // <nav class="nav"> var toggleNav = function () { console.log(this); // <nav> element setTimeout(function () { console.log(this); // [object Window] }, 1000); }; nav.addEventListener('click', toggleNav, false); • Même au sein de la même fonction, le scope peut être changé et la valeur de this peut l’être également.
  148. 148. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 148 Portée et this var nav = document.querySelector('.nav'); // <nav class="nav"> var toggleNav = function () { var that = this; console.log(that); // <nav> element setTimeout(function () { console.log(that); // <nav> element }, 1000); }; nav.addEventListener('click', toggleNav, false); • Même au sein de la même fonction, le scope peut être changé et la valeur de this peut l’être également.
  149. 149. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 149 Créer un scope privé (function () { var myFunction = function () { // do some stuff here }; })(); myFunction(); // Uncaught ReferenceError: myFunction is not defined
  150. 150. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 150 Module Pattern : namespace + scope privé et public // Définition du module var Module = (function () { var privateMethod = function () { ... }; return { myMethod: function () { console.log('myMethod has been called.'); }, someOtherMethod: function () { ... } }; })(); // call module + methods Module.myMethod();
  151. 151. | JavaScript – Concepts avancés • L'élévation est peut-être l'élément le plus surprenant et celui qui peut causer le plus de soucis en termes de portée. Le hoisting est fait de manière transparente par JavaScript. • La principale chose à garder en mémoire est la suivante (pour ECMAScript 5) : pour toute définition d'une variable, il y a une déclaration de cette variable au début de sa portée et une affectation à l'endroit de sa définition. • Les déclarations de fonctions sont également remontées dans le code. Par contre ce n’est pas le cas des expression de fonctions. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 151 Hoisting (élévation)
  152. 152. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 152 Hoisting (élévation) var state; // variable declaration state = "ready"; // variable definition (assignment) var state = "ready"; // declaration plus definition • Il faut toujours visualiser une variable comme étant constituée de deux parties : la déclaration puis la définition.
  153. 153. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 153 Hoisting (élévation) • On a vu qu’une variable déclarée dans un scope appartient à ce scope (cette portée). • Mais ce qu’on a pas encore vu, c’est que peut importe où la variable est déclarée dans ce scope, toutes les déclarations de variables sont remontées en haut de leur scope (global ou local). C’est ce qu’on appel l’élévation. • Note : l’élévation déplace seulement la déclaration de la variable. L’assignement n’est pas déplacé. console.log(state); // output: undefined var state = "ready"; var state; // moved to the top console.log(state); state = "ready"; // left in place
  154. 154. | JavaScript – Concepts avancés • JavaScript peut parfois se révéler déroutant, notamment pour les développeurs habitués à des langages fonctionnant avec des classes. • JavaScript ne fournit pas d'implémentation de classe. • Le mot-clé class a été introduit avec ECMAScript 6 mais ne fournit qu'un sucre syntaxique, JavaScript continue d'avoir un modèle d'héritage basé sur les prototypes. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 154 Prototypes : présentation
  155. 155. | JavaScript – Concepts avancés • Mais alors, quid de l’héritage ? • Dès lors qu'on aborde l'héritage, JavaScript n'utilise qu'un seul concept : les objets (souvenez- vous, tout est objet en JavaScript !). • Chaque objet possède un lien, interne, vers un autre objet, appelé prototype. • Cet objet prototype possède lui aussi un prototype et ainsi de suite, jusqu'à ce que l'on aboutisse à un prototype null. null, n'a, par définition, aucun prototype et forme donc le dernier maillon de la chaîne des prototypes. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 155 Prototypes : présentation
  156. 156. | JavaScript – Concepts avancés • On sait déjà que les objets JavaScript sont des conteneurs de propriétés. On vient de voir que chaque objet possède un lien vers un objet prototype. • Lorsqu'on souhaite accéder à une propriété d'un objet, on recherche : • d'abord parmi les propriétés propres de l'objet, • puis parmi celles de son prototype, • puis parmi celle du prototype du prototype, • et ainsi de suite jusqu'à ce qu'une propriété correspondante soit trouvée ou qu'on ait atteint la fin de la chaîne de prototypes. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 156 Prototypes : héritage de propriété
  157. 157. | JavaScript – Concepts avancés • En JavaScript, toute fonction peut être rattachée à un objet en tant que propriété. • Une fonction héritée agit comme n'importe quelle autre propriété (voir slide précédent). Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 157 Prototypes : héritage de fonctions
  158. 158. | JavaScript – Concepts avancés • Le but est de créer la chaine de prototypes suivante : Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 158 Prototypes : héritage de fonctions
  159. 159. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 159 Prototypes : héritage de fonctions Animal = function(name) { this.name = name; } Animal.prototype.eats = function() { return this.name + " is eating"; } Chordate = function(name) { this.name = name; } Chordate.prototype = new Animal(); Chordate.prototype.has_spine = true; Mammal = function(name) { this.name = name; } Mammal.prototype = new Chordate(); Mammal.prototype.has_hair = true; m = new Mammal('cat');
  160. 160. | JavaScript – Concepts avancés • Remarque : lorsqu'une fonction héritée est exécutée, la valeur de this pointe vers l'objet qui hérite. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 160 Prototypes : héritage de fonctions (et portée) var o = { a: 2, m: function(b){ return this.a + 1; } }; console.log(o.m()); // 3 // Appelle de o.m : 'this' fait référence à o var p = Object.create(o); // p est un objet héritant de o p.a = 12; // crée une propriété 'a' pour p console.log(p.m()); // 13 // lorsque p.m est appelé, 'this' fait référence à p.
  161. 161. | JavaScript – Concepts avancés (mémoire) Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 161 Références var me = { name: { first: "John" } }; var foo = me.name; foo = {first: "Alexis"}; console.log(me.name.first);
  162. 162. | JavaScript – Concepts avancés (mémoire) • var str : on déclare simplement un pointeur. La valeur de str est pour l’instant sur undefined • str = "hi" : on prend un pointeur et on lui assigne une adresse sur cette variable en mémoire Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 162 Références
  163. 163. | JavaScript – Concepts avancés (mémoire) Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 163 Références var obj = {}; obj.txt = "hi";
  164. 164. | JavaScript – Concepts avancés (mémoire) Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 164 Références var obj = {}; obj.txt = "hi";
  165. 165. | JavaScript – Concepts avancés (mémoire) Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 165 Références var obj = {}; obj.txt = "hi";
  166. 166. | JavaScript – Concepts avancés (mémoire) Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 166 L’opérateur delete var me = { name: { first: "Justin" } }, foo = me.name; delete me.name; console.log(foo.first); window me name first "justin"
  167. 167. | JavaScript – Concepts avancés (mémoire) Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 167 L’opérateur delete var me = { name: { first: "Justin" } }, foo = me.name; delete me.name; console.log(foo.first); window me name first "justin" foo
  168. 168. | JavaScript – Concepts avancés (mémoire) Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 168 L’opérateur delete var me = { name: { first: "Justin" } }, foo = me.name; delete me.name; console.log(foo.first); window me first "justin" foo
  169. 169. | JavaScript – Concepts avancés (mémoire) • L'opérateur delete permet de retirer une propriété d'un objet. • Contrairement à ce qu'on pourrait croire, l'opérateur delete n'a strictement rien à voir avec de la libération de mémoire directe  il ne libère la mémoire qu'indirectement, en supprimant des références. • Si l'opération de delete est bien effectuée, la propriété sera retirée de l'objet. • Remarque : delete fonctionne uniquement pour les propriétés d'un objet. Il n'a aucun effet sur les variables ou les noms de fonctions. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 169 L’opérateur delete
  170. 170. | JavaScript – Concepts avancés (mémoire) Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 170 Références (suite) var me = { name: { first: "Justin" } }, foo = me.name; window me name first "Justin" foo
  171. 171. | JavaScript – Concepts avancés (mémoire) Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 171 Références (suite) var me = { name: { first: "Justin" } }, foo = me.name; foo = { first: “Alexis" } window me name first "Justin" foo first "Alexis"
  172. 172. | JavaScript – Concepts avancés 21 undefined undefined 21 {} NaN true Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 172 Les opérateurs de comparaison expliqués "21" null null 21 {} NaN {valueOf: function() {return "1"}} == == === === === === == vrai vrai faux vrai faux faux vrai
  173. 173. | JavaScript – Concepts avancés • Opérateur === avec des types primitifs. • Ce code va rechercher ces deux primitifs en mémoire et va chercher à comparer leurs valeurs. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 173 Les opérateurs de comparaison expliqués var str1 = "hi"; var str2 = "hi"; str1 === str2 vrai Adresse Valeur … … x1001 call-object x1002 str1 x1003 x2001 x1004 str2 x1005 x2101 … … x2001 STRING x2002 hi … … x2101 STRING x2102 hi
  174. 174. | JavaScript – Concepts avancés • Opérateur === avec des objets. • Ce code va rechercher ces deux objets en mémoire et va comparer leurs pointeurs (car ce ne sont pas des primitifs). C’est une comparaison « par référence ». Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 174 Les opérateurs de comparaison expliqués var obj1 = {}; var obj2 = {}; obj1 === obj2 faux Adresse Valeur … … x1001 call-object x1002 obj1 x1003 x2001 x1004 obj2 x1005 x2101 … … x2001 OBJECT x2002 0 … … x2101 OBJECT x2102 0
  175. 175. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 175 Les opérateurs de comparaison expliqués – x == y Types identiques ? Tous les deux null ou undefined ? string == number ? boolean == anything ? Object == string ou Number ? === true == == false
  176. 176. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 176 true == ({toString: function() {return "1"}}) Types identiques ? Tous les deux null ou undefined ? string == number ? boolean == anything ? Object == string ou Number ? === true 1 == ({toString: function(){return "1"}}) == false
  177. 177. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 177 1 == ({toString: function() {return "1"}}) Types identiques ? Tous les deux null ou undefined ? string == number ? boolean == anything ? Object == string ou Number ? === true false 1 == "1" ==
  178. 178. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 178 1 == "1" Types identiques ? Tous les deux null ou undefined ? string == number ? boolean == anything ? Object == string ou Number ? === true 1 == 1 == false
  179. 179. | JavaScript – Concepts avancés Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 179 1 == 1 Types identiques ? Tous les deux null ou undefined ? string == number ? boolean == anything ? Object == string ou Number ? true == false === == C’est pour ça que le comparateur == est gourmand en performance ! Il faut plutôt privilégier l’opérateur ===.
  180. 180. |Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 180
  181. 181. Partie 2 Développer avec jQuery Write less, do more
  182. 182. | jQuery – Présentation • jQuery est une bibliothèque JavaScript open-source et multi-plateforme créée entre autre pour faciliter la manipulation du DOM, la gestion des évènements et l’utilisation de l’Ajax. • On peut étendre les fonctionnalités de jQuery par l’ajout du plugins. Il existe par exemple plusieurs centaines de plugins permettant d’implémenter une galerie d’image. • Première version lancée par John Resig en 2006. • On distingue 2 branches en production : • version 1.x (dernière en date 1.12.0) : support anciennes version IE • version 2.x (dernière en date 2.2.0) : plus légère Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 182
  183. 183. | Avantages • Facilite grandement la manipulation du DOM (l’utilisation de l’API document par JavaScript reste compliquée dés qu’il s’agit de manipuler des éléments précis du DOM). • On écrit souvent 2x moins de lignes de codes avec jQuery qu’en JavaScript natif. Gain de temps; maintenabilité accrue; etc. • Plugins : éviter de réinventer la roue ! Inconvénients • jQuery est une couche d’abstraction à JavaScript, si bien que certains développeurs « développent » en jQuery sans même connaitre JavaScript.  peut être problématique. • Nécessite de charger la bibliothèque (qui est de plus en plus lourde au fil du temps…). • Passer par les fonctions natives du langages JavaScript sera toujours plus rapide (en terme de charge / temps d’exécution). Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 183 jQuery – Présentation
  184. 184. | jQuery – Présentation • jQuery UI : collection d'éléments utiles dans le développement d'une interface utilisateur riche et interactive. La bibliothèque est découpée en 4 parties complémentaires : interactions (par exemple gestion du drag’n’drop), widgets (Datepicker, ProgressBar, Slider…), effets et les thèmes. jQuery UI a passé son âge d’or… il est en perte de vitesse depuis. On recommandera plutôt d’utiliser des fameworks UI en HTML5 (comme Bootstrap). • jQuery Mobile : première version sortie en octobre 2010, permet de développer facilement des interfaces mobiles. La bibliothèque a perdu de son intérêt depuis l’apparition de frameworks mobiles « modernes » plus performants. PhoneGap le maintien en vie. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 184 Projets connexes
  185. 185. | jQuery – Présentation • En fonction du projet sur lequel vous travaillez et des impératifs du cahier des charges (support des anciens navigateurs, ou utilisation d’un plugin jQuery basé sur une ancienne version, etc. ?), choisissez la version de jQuery correspondante. • Pour de nouveaux projets « from scratch », on conseillera la branche 2.x. • Chargement de la bibliothèque (version minifiée) en local ou via un CDN. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 185 Chargement de la bibliothèque <script src="jquery.min.js"></script> <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  186. 186. | jQuery – Sélecteurs • Les sélecteurs jQuery permettent de sélectionner des éléments du DOM sur lesquels on souhaite effectuer des opérations (par exemple récupérer la valeur d’un champ input, ou changer l’opacité d’un div). • En JavaScript natif on passe par l’API document qui permet l’accès et la manipulation directe du DOM. Cette API fournit des méthodes comme getElementById() ou getElementsByTagName() qui sont pratiques pour sélectionner des éléments simples et précis. Pour des usages plus poussés, ces méthodes montrent vite leurs limites. • jQuery permet de sélectionner très facilement des éléments du DOM en utilisant la fonction $(). Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 186
  187. 187. | jQuery – Sélecteurs • La fonction $() n’est en fait qu’un alias vers la fonction jQuery(). • La fonction $() créé un nouveau objet jQuery qui référence le(s) élément(s) sélectionné(s). • Note : on peut également utiliser des fonctions de jQuery sans forcément sélectionner un élément du DOM en amont. C’est par exemple le cas de $.ajax(). • Syntaxe de base : $(selector).action(); • Le sélecteur peut être vue comme une requête de sélection permettant d’identifier le ou les éléments HTML à manipuler. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 187
  188. 188. | jQuery – Sélecteurs • Tout est question de contexte. • Par défaut, les sélecteurs effectuent leurs recherchent dans le DOM à partir de la racine du document (la page web). Toutefois, un contexte alternatif peut être donné en utilisant le second attribut optionnel de la fonction $(). Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 188 $("div.foo").click(function() { $("span").addClass("bar"); }); $("div.foo").click(function() { $("span", this).addClass("bar"); }); Recherche d’un élément « span » dans le DOM à partir de la racine du document. Recherche d’un élément « span » dans le DOM à partir du nœud div.foo. C’est-à-dire que seul les éléments span enfants de .foo seront sélectionnés.
  189. 189. | jQuery – Sélecteurs • En interne, la sélection d’un contexte différent est implémenté avec la fonction .find(). • Donc $("span", this) est équivalent à $(this).find("span"). • De la même manière, on peut passer un sélecteur en 2nd argument : Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 189 // Sélectionner tous les éléments p enfant de #bar $("p", "#bar"); // Equivalent à : $("#bar").find("p");
  190. 190. | jQuery – Sélecteurs Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 190 Sélecteur Exemple Sélectionnera… this $(this) L’élément courant * $("*") Tous les éléments de la page #id $("#foo") Les éléments avec l’id “foo" .class $(".foo") Les éléments avec la classe “foo" .class,.class $(".foo, .bar") Tous les éléments avec la classe “foo" ou “bar" element $("p") Tous les éléments <p> el1,el2,el3 $("h1, div, p") Tous les éléments <h1>, <div> et <p> :first $("p:first") Le premier élément <p> :last $("p:last") Le dernier élément <p> :even $("tr:even") Tous les éléments <tr> pairs (even)
  191. 191. | jQuery – Sélecteurs Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 191 Sélecteur Exemple Sélectionnera… parent > child $("div > p") Tous les éléments <p> qui sont enfant direct d’un élément <div> parent descendant $("div p") Tous les éléments <p> qui sont descendant d’un élément <div> element + next $("div + p") Le premier élément <p> qui sera à la suite d’éléments <div> :focus $(":focus") L’élément qui a actuellement le focus :contains(text) $(":contains('Hello')") Tous les éléments qui contiennent le texte « Hello » :has(selector) $("div:has(p)") Tous les éléments <div> qui ont un élément <p> :empty $(":empty") Tous les éléments vides :parent $(":parent") Tous les éléments qui sont parents d’un autre élément :hidden $("p:hidden") Tous les éléments <p> qui sont cachés (visibilité) :visible $("table:visible") Tous les éléments <table> qui sont visibles
  192. 192. | jQuery – Sélecteurs Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 192 Sélecteur Exemple Sélectionnera… [attribute] $("[href]") Tous les éléments avec un attribut href [attribute=value] $("[href=‘foo.htm']") Tous les élements avec un attribut href égal à “foo.htm" [attribute!=value] $("[href!=‘foo.htm']") Tous les éléments avec un attribut href different de “foo.htm" [attribute$=value] $("[href$='.jpg']") Tous les éléments avec un attribut href finissant par ".jpg" [attribute^=value] $("[title^='Tom']") Tous les éléments avec un attribut titre commençant par "Tom" [attribute*=value] $("[title*=‘foo']") Tous les éléments avec un attribute titre contenant le mot “foo"
  193. 193. | jQuery – Sélecteurs Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 193 Sélecteur Exemple Sélectionnera… :input $(":input") Tous les éléments input :text $(":text") Tous les éléments input de type "text" :checkbox $(":checkbox") Tous les éléments input de type "checkbox" :submit $(":submit") Tous les éléments input de type "submit" :enabled $(":enabled") Tous les éléments input activés :disabled $(":disabled") Tous les éléments input désactivés :selected $(":selected") Tous les éléments input sélectionnés :checked $(":checked") Tous les éléments input cochés
  194. 194. | jQuery – Sélecteurs • Soit le code HTML ci-dessous, sélectionner en jQuery le titre de niveau h1 et passer le texte en majuscule (vous pouvez utiliser la fonction css() pour manipuler les styles). Sélectionner le premier élément li de la liste et passer le texte en rouge. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 194 Exercice d’application rapide <div id=wrapper> <h1>Lorem ipsum dolor sit amet</h1> <p>Un paragraphe de test</p> <ul> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> </ul> </div>
  195. 195. | jQuery – Sélecteurs Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 195 Exercice d’application rapide <div id="wrapper"> <h1>Lorem ipsum dolor sit amet</h1> <p>Un paragraphe de test</p> <ul> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> </ul> </div> <script> $(function() { // ou $(document).ready(function() { $('h1').css('text-transform', 'uppercase'); $('li:first-child').css('color', 'red'); }); </script> Bien penser à charger jQuery dans vote page !
  196. 196. | jQuery – La fonction $() (notion avancée) • Nous avons vu que la fonction $() permet de sélectionner un ou des éléments du DOM en fonction d’une requête. • On peut aussi utiliser la fonction $() avec les objets JavaScript natifs. • Dans ce cas, seules les fonctions jQuery data(), prop(), on() et trigger() sont disponibles. Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 196 // Define a plain object var foo = { foo: "bar", hello: "world" }; // Pass it to the jQuery function var $foo = $(foo); // Test accessing property values var test1 = $foo.prop("foo"); // bar
  197. 197. | jQuery – La fonction $() (notion avancée) Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 197 // Execute la fonction quand le DOM est prêt à être utilisé // C’est-à-dire quand la page sera entièrement chargée $(function() { // Document is ready }); • Dernier usage de la fonction $() : l’utilisation d’une fonction de callback. // Utilisation d’un alias (exemple d’utilisation: utilise lorsqu’on travaille avec WordPress, ou seul // le mot clé jQuery est disponible jQuery(function( $ ) { // On peut maintenant utiliser le signe $ comme alias à la function "jQuery" });
  198. 198. | jQuery – La fonction $() (notion avancée) Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 198 $(document).ready(function(){ // Document is ready }); • La fonction $(function() { ... }); est équivalente à la notation :
  199. 199. | jQuery – L’objet jQuery (notion avancée) Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 199 • Quand la fonction jQuery (ou l’alias $) est invoquée avec une sélecteur CSS, elle retournera un objet jQuery enveloppant tout élément(s) correspondant à ce sélecteur. Une « collection » est retournée. Attention, ce n’est pas un array JavaScript ! • Par exemple, en écrivant : var headings = $("h1"); • La variable headings est maintenant un élement jQuery contenant tous les éléments <h1> de la page au moment où la ligne a été interprétée par JavaScript. On peut vérifier ça en appelant la propriété length : alert(headings.length);
  200. 200. | jQuery – L’objet jQuery (notion avancée) Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 200 • La fonction eq() permet de retourner un élément précis de la collection jQuery : var firstHeading = headings.eq( 0 ); • La fonction get() permet de retourner un élément DOM précis de la collection jQuery. Donc au lieu de retourner un élément du DOM « jQuerisé », on retourne l’élement DOM lui-même (comme on l’aurait fait avec les fonctions de sélection natives de JavaScript) : var firstHeadingElem = $( "h1" ).get( 0 ); • Par contre on ne peut plus utiliser les fonctions natives de jQuery sur cette variable.
  201. 201. | jQuery – L’objet jQuery (notion avancée) Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 201 • Détail important : à chaque sélection d’un élément, un objet jQuery différent est retourné (même si cet objet fait référence au même élément du DOM). // Créé 2 objets jQuery totalement distinct pour le même élément var logo1 = $("#logo"); var logo2 = $("#logo"); // Pour s’en assurer, on peut comparer ces objets : console.log(logo1 === logo2); // false • Par contre, ils contiennent (référencent) le même élément DOM : var logo1Elem = logo1.get(0); var logo2Elem = logo2.get(0); console.log(logo1Elem === logo2Elem); // true
  202. 202. | jQuery – L’objet jQuery (notion avancée) Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 202 • Pour bien distinguer un objet jQuery d’un élément du DOM, il est d’usage de préfixer les variables référant à un objet jQuery avec le signe « $ ». • Il n’y a aucune magie derrière cette pratique : c’est juste une convention de nommage (à suivre ou non… mais soyez constant dans l’écriture de votre code). // Comparaison d’éléments du DOM (mais avec des nom de variable plus explicites) var $logo1 = $("#logo"); var logo1 = $logo1.get(0); var $logo2 = $("#logo"); var logo2 = $logo2.get(0); console.log(logo1 === logo2); // true

×