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

Formation « Web Avancé »
JavaScript full-stack – Node.js – Meteor
Février 2016 – Formation ORT 3CSi spécialité développement web
Guillaume MOREL-BAILLY

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

|
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 :
Qui suis-je ?
linkedin.com/in/guillaumemorelbailly

|
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 ?
Qui êtes-vous ?

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

|
Technologies, frameworks, outils… abordés

|
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
7) Express
8) MongoDB
9) Angular
10) MEAN.JS
11) METEOR

Partie 1
Introduction à JavaScript
Eléments de base du langage et concepts avancés

|
JavaScript Histoire

|
JavaScript – Pourquoi ?

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

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

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

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

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

|
ECMAScript
Tout est histoire de
standardisation

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

|

|
• 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.
Dernières versions d’ECMAScript :
Tester la compatibilité ES6 de votre navigateur
sur : kangax.github.io/compat-table/es6/

|
• 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.
ECMAScript 6 (ES2015)

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

|
• 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.
TypeScript

|
Moteurs de
script et de
rendu
Comprendre le fonctionnement et
les composants de nos
navigateurs web.

|
JavaScript – Moteurs de script

|
Moteur de rendu
(HTML + CSS)
Moteur de script
(JavaScript)
Plugins
(Flash, Silverlight,
Applets Java, etc.)

|

|
Moteur de rendu
(HTML + CSS)
Moteur de script
(JavaScript)

|
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

|
• 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.
V8 : le moteur de script « next gen » de Google

|Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 31
JavaScript – Chargement d’une page par le navigateur

|
Le langage
JavaScript
Présentation

|
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.
JavaScript, c’est quoi ?

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

|
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

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

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

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

|
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
Balise HTML script

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

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

|
• Sur la majorité des navigateurs web : touche F12
• Firefox intègre même une console avancée : Développement > Ardoise JavaScript (Maj + F4)
Console du navigateur

|
Le langage
JavaScript
Eléments de base

|
JavaScript

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

|
JavaScript – Les variables
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";

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

|
• Valeur undefined dans un contexte booléen : convertie en false
• Valeur undefined dans un contexte numérique : convertie en NaN
var monTableau = new Array();
if (!monTableau[0]){ // false
maFunction();
}
var a;
a + 2; // NaN

|
• Valeur null dans un contexte numérique : convertie en 0 (zéro)
• Valeur null dans un contexte booléen : convertie en false
var n = null;
console.log(n * 32); // Le log affichera 0

|
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

|
JavaScript – L’instruction typeof
• Comme JS est faiblement typé, on a parfois le besoin de savoir avec qu’elle type de valeur on
travaille.

|
JavaScript – Conversion de types de données
• D’après vous, le code suivant lève t’il une erreur ?
var answer = 42;
answer = "Thanks for all the fish...";
JavaScript utilisant un typage dynamique, cette dernière instruction ne renverra pas d'erreur.

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

|
JavaScript – Conversion de chaînes en nombres
• parseInt effectue une conversion en valeur entière
• Number effectue une conversion numérique plus stricte
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

|
JavaScript – Conversion de chaînes en nombres
• parseFloat effectue une conversion d’une chaine de caractère en nombre flottant
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

|
JavaScript – Opérateur de comparaison

|
JavaScript - Commentaires
// un commentaire sur une ligne
/* un commentaire plus
long sur plusieurs lignes
*/
/* Par contre on ne peut pas /* imbriquer des commentaires */ SyntaxError */

|
JavaScript - Objets
• 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"
}
};

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

|
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 :
Description et syntaxe
[element0, element1, ..., elementN]
new Array(element0, element1[, ...[, elementN]])
new Array(arrayLength)
var fruits = ["Apple", "Banana"];

|
• Le premier élément d'un tableau a 0 pour indice
• La position du dernier élément est donnée par length moins 1.
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 ‘

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

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

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

|
JavaScript - Instructions conditionnelles
Instruction if...else
if (condition_1) {
statement_1;
} else if (condition_2) {
statement_2;
} else if (condition_n) {
statement_n;
} else {
statement_last;
}

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

|
• 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 :
var b = new Boolean(false);
if (b) // this condition evaluates to true
if (b == true) // this condition evaluates to false

|
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?");

|
JavaScript – Boucles et itérations
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++;
}

|
• 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 !
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"

|
• Permet d'exécuter une instruction tant qu'une condition donnée est vérifiée.
Instruction while
while (i < 10) {
text += "The number is " + i;
i++;
}

|
• Permet de répéter un ensemble d'instructions jusqu'à ce qu'une condition donnée ne soit plus vérifiée.
Instruction do…while
do {
i += 1;
console.log(i);
} while (i < 5);

|
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.
Gestion des exceptions
Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError

|
// Lever une erreur générique
try {
throw new Error("Ouups !");
} catch (e) {
console.log(e.name + ": " + e.message);
}

|
// Gérer une erreur spécifique
try {
foo.bar();
} catch (e) {
if (e instanceof EvalError) {
} else if (e instanceof RangeError) {
}
// ... etc
}

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

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

|
• Déclaration d’une fonction
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

|
• On peut aussi rendre une fonction auto exécutable :
(function() {
console.log('Hello World!');
})();
// Affichera Hello World! à l’ouverture de la page

|
• 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.
NB: Les notions de porté, passage par valeur et référence seront étudiées plus en détail dans le chapitre suivant.

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

|
Le langage
JavaScript
Manipulation du DOM

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

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

|

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

|
• 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.
Exercice n°1 : objectif

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

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

|
• Créer une fonction JavaScript qui permette d’ajouter une ligne à un tableau au clic sur un bouton.
<table id="myTable" border="1">
<tr>
<td>Ligne1 cellule1</td>
</tr>
<tr>
</tr>
</table>

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

|
• 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.
Exercice n°3 – « Tirage au sort » : objectif

|
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

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

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

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

|
<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);
});

|
• 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).
Exercice n°6 – « Chargement d’images » : objectif

|
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"
},{
width: "330",
height: "330"
},{
width: "320",
height: "330"
}
];

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

|
• 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 !
Exercice n°7 – « Puzzle glissant » : objectif Exercice noté
Basé sur l’application de Brad
Manderscheid développée pour
TutsPlus.com

|
Le langage
JavaScript
AJAX

|
JavaScript – AJAX
Asynchronous JavaScript And XML
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/

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

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

|
JavaScript – AJAX
Modèle d’application web classique

|
JavaScript – AJAX
Modèle d’application web dynamique

|
JavaScript – AJAX
Modèle d’application web dynamique
(or JSON)

|
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).
L’objet XMLHttpRequest

|
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.
L’objet XMLHttpRequest

|
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.
L’objet XMLHttpRequest – Création d’un objet
var xhttp = new XMLHttpRequest();

|
JavaScript – AJAX
• Pour envoyer une requête HTTP à un serveur, on utilise les fonctions open() et send().
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).

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

|
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

|
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.
oReq.addEventListener("progress", updateProgress, false);
oReq.addEventListener("load", transferComplete, false);
oReq.addEventListener("error", transferFailed, false);
oReq.addEventListener("abort", transferCanceled, false);
oReq.open();

|
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.
XML ou JSON ?

|
JavaScript – AJAX
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>

|
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.
XML ou JSON ?
JSON.stringify({}); // '{}'
JSON.stringify(true); // 'true'
JSON.stringify("toto"); // '"toto"'
JSON.stringify({x: 5, y: 6}); // '{"x":5,"y":6}'

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

|
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.
AJAX : Aujourd’hui et demain

|
Le langage
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.
Fonctions : portée

|
• 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 ».
Fonctions : portée

|
Fonctions : portée
// 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"

|
• 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.
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 :

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

|
var name = "Hello";
alert(name);
}
return displayName;
};
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.

|
var name = "Hello";
alert(name);
}
return displayName;
};
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.

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

|
function getCounter() {
var i = 0;
return function () {
return i++;
}
}
var counter1 = getCounter();
var counter2 = getCounter();
console.log(counter1()); // 1
Exemple 4 :

|
var sayHello = function (name) {
var text = 'Hello, ' + name;
console.log(text);
};
};
sayHello('Todd');
Exemple 5 : que fait ce code ?

|
var sayHello = function (name) {
var text = 'Hello, ' + name;
console.log(text);
};
};
var helloTodd = sayHello('Todd');
helloTodd(); // will call the closure and log 'Hello, Todd'
Exemple 5 : que fait ce code ?

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

|
• Dans une fonction JavaScript on aura l’objet suivant :
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.

|
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();

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

|
• 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.
...
for (var i = 0; i < texteAide.length; i++) {
document.getElementById(item.id).onfocus = function() {
showHelp(item.helper);
}
}
}
Closure

|
function makeHelpCallback(help) {
return function() {
showHelp(help);
};
}
...
for (var i = 0; i < helpText.length; i++) {
document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
}
}

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

|
• 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.
carName = "Volvo";
}

|
• 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.
var carName = "Volvo";
}

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

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

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

|
Portée et this
console.log(this); // <nav> element
setTimeout(function () {
console.log(this); // [object Window]
}, 1000);
};
• Même au sein de la même fonction, le scope peut être changé et la valeur de this peut l’être
également.

|
Portée et this
var that = this;
console.log(that); // <nav> element
setTimeout(function () {
console.log(that); // <nav> element
}, 1000);
};
• Même au sein de la même fonction, le scope peut être changé et la valeur de this peut l’être
également.

|
Créer un scope privé
(function () {
var myFunction = function () {
// do some stuff here
};
})();
myFunction(); // Uncaught ReferenceError: myFunction is not defined

|
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();

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

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

|
• 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.
Prototypes : présentation

|
• 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.
Prototypes : présentation

|
• 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.
Prototypes : héritage de propriété

|
• 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).
Prototypes : héritage de fonctions

|
• Le but est de créer la chaine de prototypes suivante :

|
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');

|
• Remarque : lorsqu'une fonction héritée est exécutée, la valeur de this pointe vers l'objet qui hérite.
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.

|
JavaScript – Concepts avancés (mémoire)
Références
var me = {
name: {
first: "John"
}
};
var foo = me.name;
foo = {first: "Alexis"};
console.log(me.name.first);

|
• 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
Références

|
Références
var obj = {};
obj.txt = "hi";

|
L’opérateur delete
var me = {
name: {
first: "Justin"
}
},
foo = me.name;
delete me.name;
console.log(foo.first);
window
me
name
first
"justin"

|
var me = {
name: {
first: "Justin"
}
},
foo = me.name;
delete me.name;
window
me
name
first
"justin"
foo

|
var me = {
name: {
first: "Justin"
}
},
foo = me.name;
delete me.name;
window
me
first
"justin"
foo

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

|
Références (suite)
var me = {
name: {
first: "Justin"
}
},
foo = me.name;
window
me
name
first
"Justin"
foo

|
Références (suite)
var me = {
name: {
first: "Justin"
}
},
foo = me.name;
foo = {
first: “Alexis"
}
window
me
name
first
"Justin"
foo
first
"Alexis"

|
21
undefined
undefined
21
{}
NaN
true
Les opérateurs de comparaison expliqués
"21"
null
null
21
{}
NaN
{valueOf: function() {return "1"}}
==
==
===
===
===
===
==
vrai
vrai
faux
vrai
faux
faux
vrai

|
• Opérateur === avec des types primitifs.
• Ce code va rechercher ces deux primitifs en
mémoire et va chercher à comparer leurs valeurs.
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

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

|
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

|
true == ({toString: function() {return "1"}})
Types identiques ?
string == number ?
===
true
1 == ({toString: function(){return "1"}})
==
false

|
1 == ({toString: function() {return "1"}})
Types identiques ?
string == number ?
===
true
false
1 == "1"
==

|
1 == "1"
Types identiques ?
string == number ?
===
true
1 == 1
==
false

|
1 == 1
Types identiques ?
string == number ?
true
==
false
===
==
C’est pour ça que le
comparateur == est
gourmand en performance !
Il faut plutôt privilégier
l’opérateur ===.

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

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

|
• 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.
Projets connexes

|
• 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.
Chargement de la bibliothèque
<script src="jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

|
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 $().

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

|
• 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 $().
$("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.

|
• 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 :
// Sélectionner tous les éléments p enfant de #bar
$("p", "#bar");
// Equivalent à :
$("#bar").find("p");

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

|
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

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

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

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

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

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

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

|
$(document).ready(function(){
// Document is ready
});
• La fonction $(function() { ... }); est équivalente à la notation :

|
jQuery – L’objet jQuery (notion avancée)
• 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);

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

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

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

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

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

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

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

Dernier

Dernier (20)

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