2. JavaScript de loin
Bibliographie
Introduction
Les aspects négatifs
Les aspects positifs
Le problème avec les DOMs HTML
3. JavaScript de près
Les instructions
▪ Variables
▪ Expressions et opérateurs
▪ Conditions
▪ Boucles
▪ Les types de bases
Les tableaux
Les objets
4. Les fonctions, les variables et la portée
Les exceptions
Récursion
Les « closure », ou fonctions à mémoire
Les « timer »
Les événements
Les expressions régulières
Ajax
6. JavaScript : the good parts
de Douglas Crockford chez O'REILLY
Le meilleur (très dense)
Secrets of the JavaScript Ninja (2012)
de Jhon Resig et Bear Bibeault chez Manning
Le meilleur qui couvre les aspects avancés du langage
Pro JavaScript Techniques
de Jhon Resig chez Apress :
Le meilleur qui couvre JavaScript et le DOM HTML
ppk on JavaScript
de Peter-Paul Koch chez New Riders
Tout sur la compatibilité entre les DOM HTML
The art and science of JavaScript
Auteurs multiples dont Cameron Adams chez sitepoint
Agréable à lire parce que très facile
7. Très bref historique des débuts :
S'inspire de Self (1986) et de Scheme (1998)
Naissance chez Netscape :
▪ Mocha
▪ LiveScript
▪ JavaScript 1.0 (1995)
▪ suite à négociation avec Sun
8. JScript 1.0 (1996 Microsoft )
ECMAScript (1997)…
JScript.Net (2002)…
Chrome V8
▪ Node.js (2009)
▪ Développement serveur sans browser
Windows 8, Chakra
▪ développement natif en JavaScript (2012)
10. JavaScript a probablement le meilleur rapport :
utilisation/connaissance
C'est un langage
Minimaliste
Malléable
Perméable
Vous pouvez donc mettre en œuvre vos patterns
préférés en les intégrant au langage
C'est donc un langage de maître
11. C'est un langage sérieux qui sert à faire du
développement pérenne.
L'organisation et le découpage du code se
font à l'aide de fonctions
Les fonctions ont de la mémoire
Closure, delegate anonyme, Lambda
12. La notion d'objet est présente
Encapsulation
Données
Méthodes
Pas de notion de classe a priori
bien que au programme des versions futures
Mais une notion de prototype
A chaque type d'objet est associé un prototype
Si l'objet ne peut pas traiter la demande, il le délègue à
son prototype (qui est un autre objet)
13. On peut facilement créer :
La notion d'événement
Des notions de réutilisation
▪ Par délégation simple ou multiple
▪ Par mécanismes d'extension personnalisés
C'est un langage dynamiquement typé
Comme le C#
14. Types de bases
Number Boolean String Date Array Object Function RegExp Math
Types utilisateur
Les fonctions
15. Syntaxiquement : c'est un langage de la
famille C, C++, C#.
Case sensitif, Accolades, Point virgules
Mêmes mots clés pour
▪ Les boucles, les conditions et les branchements
Mêmes opérateurs
▪ Logiques, arithmétiques et comparaisons
16. Sinon c'est un langage qui peut être classé
sous les catégories
Orienté Objet
Fonctionnelle
Dynamique
De plus en plus comme le C#
18. Qui font que ce n'est pas un langage pour débutant
19. Absence ou pauvreté de l'outillage…
• Peu ou pas d'IntelliSense
• Pas de vérification en design time
• Mais si on utilise le compilateur de
JScript.net on peut déceler l'essentiel
des problèmes syntaxiques
20. … Absence ou pauvreté de l'outillage…
• Debug plus difficile
• FireBug et VisualStudio permettent
néanmoins de faire beaucoup de
choses
21. … Absence ou pauvreté de l'outillage
• Refactoring : quasi impossible
• Navigation dans le code :
• Go to definition
• Find All References…
• quasi impossible
22. Les aspects bâclés du langage…
• Les variables globales
• Syntaxe du langage
• null, undefined, false, zéro et chaine vide
• dans les conditions : valent tous faux
• null == undefined
23. … Les aspects bâclés du langage…
• Incohérences du langage
• Si T est un tableau
• T.constructor == Array
• typeof T== 'object'
24. … Les aspects bâclés du langage
• Incohérences du langage
• typeof NaN == 'number'
• typeof null == 'object'
• 0 == '0', false != 'false', false == '0'
26. JSON
JavaScript Object Notation
Syntaxe de représentation de données qui
contrairement à XML and Co ne nécessite pas des
études supérieures
Possibilité de créer ses propres schémas
De réutilisation
D'extension
D'assemblage et d'organisation
27.
28.
29. Exemple :
var p = { Nom : 'toto',
Prénoms : ['Jean', 'Alain'],
Taille : 1.52,
DateNaissance : new Date (1980, 0, 12),
Salarié : true };
30. Si p est un objet ayant un champ Nom
p.Nom = 'toto';
Et
p [‘Nom'] = 'toto';
Expriment la même chose
31. Si Ajouter est une fonction avec deux
paramètres a et b sur un objet calc
calc .Ajouter ( 3, 4);
calc ['Ajouter'] ( 3, 4);
calc ['Ajouter'].apply (null, [3, 4]);
Expriment la même chose
32. JavaScript peut s'enrichir avec 4 lignes de
code par la notion de méthode d'extension de
C# 3.0. Les voici :
Function.prototype.addMethod = function (name, f) {
if(!this.prototype[name]) this.prototype[name] = f;
return this;
};
33. Utilisation de addMethod :
Number.addMethod ('integer', function() {
return Math [this < 0 ? 'ceil' : 'floor'] (this);
});
var i = (3.16).integer ();
34. A la mode
Le web moderne ne peut pas s’en passer
HTML5
Mobilité
De plus en plus d’outillage
TypeScript
JsFiddle
FireBug…
35. De plus en plus de bibliothèques
JQuery…
Google, Bing…
Facebook, Twitter…
Raphaël, Processing, Bonsaï…
MicroJS.com , des centaines d’autres…
37. Les champs et leur caractère readonly
Les méthodes et leurs arguments
Les événements
Leur nom et leurs paramètres
Le mécanisme d'abonnement
Varient plus ou moins
D'un browser à l'autre
D'une version à l'autre
D'un OS à l'autre
38. Si on se restreint aux browsers modernes :
FF (3 et plus), IE (6, 7, 8, 9, 10), Safari, Chrome…
Avec une centaine de lignes de JavaScript on
masque la quasi-totalité des différences
Pour le reste, notamment le CSS on peut sans
trop de problème se limiter au dénominateur
commun
41. Déclaration
var x; // x est déclaré mais vaut undefined
Déclaration et initialisation
var y = 5; // y est déclaré et vaut 5
var s = ‘toto’; // s est déclaré et vaut ‘toto’
var a = 0, b = 1, c = 3.14, d = true, e = null;
42. Déclaration et affectation
var z, t; // z et t sont déclarés
z = 14; // affectation de la valeur 14 à z
t = z; // affectation de la valeur de z à t
t = z = 32; // affectation de 32 à z puis à t
45. Numériques
AND(&), OR(|), Not(~), XOR(^), <<, >>, >>>
Affectation
=
+=, -=, *=, /=, %=, &=, |=, ^=, <<=, >>=, >>>=
A op= B est équivalent à A = A op B
A += 3 est équivalent à A = A + 3
46. Conditionnel
Operateur ternaire :
▪ ? :
Expression ternaire :
▪ a ? 3 : 7 // vaut 3 si a est ‘vraie’ 7 sinon
Vérité des expressions en JavaScript
Faux : false, undefined, null, NaN,
0 (zéro), ‘’ (chaine vide)
Vrai: tout le reste
47. if (expressionA) {
// bloc d’instructions : A
} else if (expressionB) {
// bloc d’instructions : B
} else if (expressionC) {
// bloc d’instructions : C
} else {
// instructions : D
}
48. switch (expression) {
case expressionA :
// bloc d’instructions : A
break;
case expressionB :
// bloc d’instructions : B
break;
case default:
// bloc d’instructions : C
break;
}
49. while(expression) {
// bloc d’instructions
// continue; permet de passer à l’itération suivante
// break; permet de sortir de la boucle
}
50. do {
// bloc d’instructions
// continue; permet de passer à l’itération suivante
// break; permet de sortir de la boucle
} while (expression);
51. for (var n = 0; n < 5; n++) {
// bloc d’instructions
// continue; permet de passer à l’itération suivante
// break; permet de sortir de la boucle
}
53. En JavaScript tout est objet
Donc objet ne veut pas dire grand-chose !
Il y a des objets simples comme
▪ les nombres, exemples : 712 ou 3.14
▪ les nombres booléens : true, false
Des objets plus complexes comme
▪ Les chaines de caractères
▪ Les dates
54. Les tableaux sont des objets qui permettent de
ranger d’autres objets et y accéder par un index
entier
On peut avoir des objets complexes qui
permettent de réunir d’autres objets et y accéder
par un nom.
Les fonctions sont des objets
▪ Qui peuvent servir { créer d’autres objets
▪ Qui peuvent servir à exécuter du code
55. var a = 5; // typeof a === ‘number’
var b = ‘toto’; // typeof b === ‘string’
var c = true; // typeof c === ‘boolean’
var d = new Date (); // typeof d === ‘object’
var e = { }; // typeof e === ‘object’
var f = [ ]; // typeof f === ‘object’
var g = window.alert; // typeof g === ‘function’
var h = /^ad+/; // typeof h === ‘object’
a.constructor === Number
b.constructor === String
c.constructor === Boolean
d.constructor === Date true
e.constructor === Object
f.constructor === Array
g.constructor === Function
h.constructor === RegExp
56. var T1 = []; // T1 un tableau vide
// T1.length vaut 0
T1.push (‘toto’); // T1.length vaut 1
// T1[0] vaut ‘toto’
// T1[3] vaut undefined
var T2 = [4, 17]; // T2 un tableau à deux éléments
// T2.length vaut 2
// T2[0] vaut 4 et T2[1] vaut 17
T2 [3] = 2013; // T2.length vaut 4
// T2[3] vaut 2013
// T2[2] vaut undefined
// 2 in T2 vaut false
// 3 in T2 vaut true
57. var O1 = {}; // O1 un objet vide
O1.Nom = ‘Duval’; // O1 a un champs ‘Nom’
O1[‘Prénom’] = ‘toto’; // O1 aun champs ‘Prénom’ de plus
// O1.Nom vaut ‘Duval’
// O1.Prénom vaut ‘toto’
// O1.Age vaut undefined
// Nom in O1 vaut true
// Age in O1 vaut false
O1.Age = 17; // O1.Age vaut maintenant 17
delete O1.Prénom; // O1.Prénom vaut undefined
// Age in O1 vaut true
// Prénom in O1 vaut false
58. var O2 = { Prénom : ‘toto’, Nom : ‘Duval’, Age = 17 };
// ici ça bouclera trois fois
// 1 : p vaut ‘Prénom’ et O2[p] vaut ‘toto’
// 2 : p vaut ‘Nom’ et O2[p] vaut ‘Duval’
// 3 : p vaut ‘Age’ et O2[p] vaut 17
for (var p in O2) {
// bloc d’instructions
// continue; permet de passer à l’itération suivante
// break; permet de sortir de la boucle
}
59. …
try {
// instructions A
Sans Exception Avec Exception
} catch (x) { dans A dans A
A (complet) A (partiel)
// instructions B
C B
} finally { D C
D
// instructions C
}
// instructions D
60. Si on se trouve dans une situation
incohérente,
exceptionnelle,
qui ne devrait pas arriver
Alors il faut lever une exception
if (incoherence) {
throw { Code: 45, Message : ‘Description’ };
}
62. // La fonction F avec :
// deux paramètres a et b
// deux variables locales c et d
// et une fonction locale carre
function F (a, b) {
carre
var c = 10; c
function carre (x) { return x * x; }
var d = 2; d
return a * carre (c) + d * b;
}
63. // La fonction F avec deux paramètres a et b
// ici a vaut 2 et b vaut 5
var r1 = F(2, 5);
// ici a vaut 3 et b vaut undefined
var r2 = F(3);
// ici a vaut 4 et b vaut 5 et 6 est ignorée
var r2 = F(4, 5, 6);
var nbParametres = F.length; // ici 2
64. // La fonction G avec deux paramètres a et b
function G (a, b) {
var count = arguments.length;
var v1 = arguments[0];
var v2 = arguments[1];
var v3 = arguments[2];
}
// Les appels a b count v1 v2 v3
G (10); // 10 * 1 10 * *
G (20, 30); // 20 30 2 20 30 *
G (30, 40, 50); // 30 40 3 30 40 50
// * = undefined
65. Orienté Objet
Exemple et vocabulaire
▪ toLowerCase () est une méthode des objets de type
chaine de caractères.
▪ Au lieu d’appeler une fonction et lui passer la chaine en
paramètre
▪ On prend la chaine et on appelle dessus une méthode.
var majuscules = ‘TOTO’;
var minuscules = majuscules.toLowerCase ();
66. A l’intérieur d’une méthode, this représente l’objet ou
le contexte sur lequel la méthode est appelée.
var obj = {}; // voici un objet
obj.V = 5; // on lui ajoute un champs V qui vaut 5
// on lui ajoute une méthode Inc qui incrémente V
obj.Inc = function () { this.V = this.V + 1; }
// on appelle la méthode Inc
obj.Inc (); // maintenant obj.V vaut 6
67. // La fonction H incrémente le champs V d’un objet
function H () { this.V = this.V + 1; }
// o1 un objet avec deux champs V et W et une méthode Inc
var o1 = { V : 5, W : 6, Inc : H };
// o2 un objet avec un champ V et une méthode Inc
var o2 = { V : 2, Inc : H };
o1.Inc (); // appel de H avec this === o1 o1.V vaut 6
o2.Inc (); // appel de H avec this === o2 o2.V vaut 3
H.call (o1); // appel de H avec this === o1 o1.V vaut 7
H.call (o2); // appel de H avec this === o2 o2.V vaut 4
68. // Appelé à travers new la fonction Point construit
// un objet avec deux champs X et Y
function Point (x, y) { this.X = x; this.Y = y; }
// ici un objet et construit
// la fonction Point est appelée avec this === l’objet
// l’objet est retourné.
var p = new Point (0, 0);
69. function distance (p1, p2) {
var dx = p2.X – p1.X;
var dy = p2.Y – p1.Y;
return Math.sqrt (dx * dx + dy * dy);
}
var a = new Point (1, 2);
var b = new Point (4, 6);
var d = distance (a, b); // d vaut 5
70. function somme() {
var s = 0;
for (var n = 0; n < arguments.length; n++) {
s += arguments [n];
}
return s;
}
var zero = somme ();
var dix = somme (1, 2, 3, 4);
var cent = somme.call (null, 10, 20, 30, 40);
var mille = somme.apply(null, [100, 200, 300, 400]);
71. Fonctions nommées
Par leur nom
Fonction anonymes
À travers une variable
Fonction constructeur
À travers new
Pour contrôler le contexte
À travers apply () ou call ()
72. Une fonction peut s’appeler elle-même
Attention il lui faut une condition d’arrêt et la
convergence vers cette condition
Exemple scolaire: Fibonacci
function fibonacci (n) {
if (n < 2) return 1;
return fibonacci (n – 2) + fibonacci (n – 1);
}
73. Les closure sont des fonctions à mémoire
Contrairement { la pile qui est nettoyée { la sortie d’une
fonction, le closure est retenu tant qu’une fonction
existe.
Une fonction, quand elle est créée, a accès aux variables
qui sont dans sa portée
La notion de closure permet à une fonction de retenir la
visibilité à ses variables
74. Exemple : générateur des entiers
function Entiers() {
var n = 0;
var f = function () { return n++; };
return f;
}
75. Usage
var g1 = Entiers();
var a1 = g1 (); // a1 vaut 0;
var a2 = g1 (); // a2 vaut 1;
var a3 = g1 (); // a3 vaut 2;
var g2 = Entiers();
var b1 = g2 (); // b1 vaut 0;
var b2 = g2 (); // b2 vaut 1;
var b3 = g2 (); // b3 vaut 2;
76. Exemple : le problème 3 N + 1 ?
function Syracuse(n) {
return function () {
if (n % 2 === 0) n /= 2;
else n *= 3, n += 1;
return n;
};
}
77. Question : que valent a, b, c, d et e ?
var f = Syracuse(17);
var a = f();
var b = f();
var c = f();
var d = f();
var e = f();
78. Fibonacci non récursive par closure
function Fibonacci() {
var a = 0, b = 1;
return function () {
var r = a + b;
return a = b, b = r;
};
}
79. Higer order functions
Dans un univers fonctionnel tout est fonction
JavaScript peut être considéré comme un langage
fonctionnel parce qu’en JavaScript les fonctions
sont des objets
Elles peuvent servir en tant que paramètre à
d’autres fonctions
Les fonctions peuvent transformer des fonctions
80. function Carre (f) {
return function (x) { var r = f (x); return r * r; };
}
var carreDesEntiers = Carre (Entiers ());
var a = carreDesEntiers (); // a vaut 0;
var b = carreDesEntiers (); // b vaut 1;
var c = carreDesEntiers (); // c vaut 4;
var d = carreDesEntiers (); // d vaut 9;
var e = carreDesEntiers (); // e vaut 16;
81. Memoize : technique de création de cache de
réponse
function memoize(f) {
return function () {
f.values = f.values || {};
var p = arguments[0];
if (p in f.values) return f.values[p];
else return f.values[p] = f.apply(null, arguments);
};
}
82. Utilisation pour Fibonacci récursive
function fibonacci (n) {
if (n < 2) return 1;
return fibonacci (n – 2) + fibonacci (n – 1);
}
var memoizedFibo = memoize (fibonacci);
var fibo100 = memoizedFibo (100); // est très lent !
83. Exemple : Fibonacci recursive anonyme
var fibonacci = function (n) {
if (n < 2) return 1;
return fibonacci (n – 2) + fibonacci (n – 1);
}
fibonacci = memoize (fibonacci); // va beaucoup plus vite
84. Transformer une fonction de N variables en
une fonction de M variables (avec M < N) en
fixant certains valeurs des variables
85. function partial(f) {
var defArgs = [];
for (var n = 1; n < arguments.length; n++)
defArgs.push(arguments[n]);
return function () {
var args = [];
for (var i = 0, j = 0; i < defArgs.length || j < arguments.length; i++) {
args.push((defArgs[i] === undefined) ? arguments[j++] : defArgs[i]);
}
return f.apply(null, args);
};
}
86. function F (a, b) { return 100 * a + b; }
var F1 = partial (F, undefined, 3); // F1 (x) === F(x, 3)
var F2 = partial (F, 5); // F2 (x) === F(5, x)
var v1 = F1 (5); // F (5, 3)
var v2 = F2 (3); // F (5, 3)
87. var GMelies = (function () {
// Etat global de votre appli
return {
Main : function () {
// Point d’entrée de votre appli
}
};
}) ();
89. Une fonction qui déclenche un appel d’une
autre fonction à intervalles réguliers
setInterval (action, millisecondes)
clearInterval (timer)
Une fonction qui déclenche un appel d’une
autre fonction au bout d’un certain délai
setTimeout (action, millisecondes)
clearTimeout (timer)
91. Première approche
Utiliser les onxxx des éléments du DOM HTML
▪ onclick
▪ onmouse (down, move, up, over, out)
▪ onkey (down, up, press)
▪…
Plusieurs problèmes
▪ Abonnement multiples
▪ Abonnement, désabonnement dynamique
92. Deuxième approche
Abonnement et désabonnement dynamique par
API JavaScript.
Problèmes
▪ Différence
▪ de comportement entre IE et les autres browsers
▪ API différent
▪ Noms d’événements parfois différents
▪ Mais réglable facilement
93. Façon IE
attachEvent
detachEvent
Nom des événements = onxxx
Pas d’argument d’événement mais window.event
▪ Pas de preventDefault
▪ Mais : window.event.returnValue = false
▪ Pas de stopPropagation
▪ Mais : window.event.cancelBubble = true
▪ Pas de target mais
▪ Mais : window.event.srcElement
94. Façon W3C
addEventListener
removeEventListener
Un argument pour le gestionnaire de l’événement
▪ Avec un preventDefault
▪ Avec un stopPropagation
▪ Avec un target
95. Adaptateur de l’argument de l’événement
pour IE
function xbEvent(e) {
if (e) {
e.preventDefault = function() { e.returnValue = false; }
e.stopPropagation = function() { e.cancelBubble = true; }
e.target = e.srcElement;
}
return e;
}
96. Abonnement façon IE
function ieAddHandler(element, eventName, handler) {
element.attachEvent('on' + eventName, function () {
handler(element, xbEvent(window.event));
});
}
97. Abonnement façon W3C
function w3cAddHandler(element, eventName, handler) {
element.addEventListener(eventName, function (e) {
handler(element, e);
}, false);
}
98. Abonnement cross browser
var addHandler = (function () {
function xbEvent(e) { … }
function ieAddHandler (element, eventName, handler) { … }
function w3cAddHandler (element, eventName, handler) { … }
return (window.addEventListener) ? w3cAddHandler : ieAddHandler;
}) ();
100. La fonction eval permet d’évaluer du
JavaScript.
Quelques exemples :
var function testEval() {
var a = 16;
var b = eval ('a + 5'); // b vaut 21
eval ('a = 5'); // a vaut 5 maintenant
// évaluation de JSON o.Nom vaut 'Toto' et o.Age vaut 22
var o = eval ("({Nom:'Toto', Age: 22})");
}
101. Le constructeur des fonctions Function
permet de construire une fonction !
Exemple :
var ajouter = new Function ('a', 'b', 'return a + b;');
var sept = ajouter (3, 4);
103. En JavaScript chaque fonction à un prototype
Le prototype est un objet
Par défaut le prototype est l’objet vide
Le prototype peut être défini par programme
En JavaScript quand on accède à un champs
d’un objet
On cherche le champ d’abord sur l’objet
Puis sur le prototype du constructeur de l’objet
104. function Point (x, y) { this.X = x; this.Y = y; }
// distance est une méthode du prototype de Point
Point.prototype.distance = function (p) {
var dx = this.X - p.X;
var dy = this.Y - p.Y;
return Math.sqrt(dx * dx + dy * dy);
};
// le constructeur de p1 et p2 c’est la fonction Point
var p1 = new Point (1, 1);
var p2 = new Point (4, 5);
var d = p1.distance (p2); // ici d vaut 5
105. function Rectangle(largeur, longueur) {
this.Largeur = largeur; this.Longueur = longueur; }
Rectangle.prototype.Surface = function () {
return this.Largeur * this.Longueur; }
Rectangle.prototype.Perimetre = function () {
return 2 * (this.Largeur + this.Longueur); }
function Carre (cote) {
Rectangle.call (this, cote, cote); }
Carre.prototype = new Rectangle ();
106. var c = new Carre (5); // c.Largeur vaut 5
// c.Longueur vaut 5
var s = c.Surface (); // s vaut 25
var p = c.Perimetre (); // p vaut 20
c.constructor === Carre // true
c.constructor === Rectangle // false
c instanceof Carre // true
c instanceof Rectangle // true
'Surface' in c // true
c.hasOwnProperty ('Surface') // false
107. (function () {
if (!Array.prototype.forEach) {
Array.prototype.forEach = function (action, context) {
for (var i = 0; i < this.length; i++) {
action.call(context || null, this[i], i, this);
};
}
})();
/* à lire :
http://perfectionkills.com/how-ecmascript-5-still-does-not-
allow-tosubclass-an-array/ */
108. Function.prototype.partial = function () {
var f = this;
var defArgs = [];
for (var n = 1; n < arguments.length; n++)
defArgs.push(arguments[n]);
return function () {
var args = [];
for (var i = 0, j = 0; i < defArgs.length || j < arguments.length; i++) {
args.push((defArgs[i] === undefined) ? arguments[j++] : defArgs[i]);
}
return f.apply(null, args);
};
}
109. function F (a, b) { return 100 * a + b; }
var F1 = F.partial (undefined, 3); // F1 (x) === F(x, 3)
var F2 = F.partial (5); // F2 (x) === F(5, x)
var v1 = F1 (5); // F (5, 3)
var v2 = F2 (3); // F (5, 3)
112. Des Exemples
var s = 'a, b, c, d , e, f';
var t1 = s.split (',');
var t2 = s.split(/s*,s*/);
function trim(s) {
return (s || "").replace(/^s+|s+$/g, "");
}
115. Inventé par Microsoft en 1998
Outlook Web Access
Intégré à IE5 en 1999
Démocratisé par Google
GMail 2004
Maps 2005
Terme utilisé la première 18 février 2005
Ajax: A New Approach to Web Applications
W3C : 6 avril 2006
le premier document visant la standardisation
116. AJAX (Asynchronus JAvascript and XML)
Asynchronus : oui mais pas forcément
JavaScript : oui
XML : ?
▪ Ou JSON (JavaScript Object Notation)
Applications modern HTML5
Plus de place pour du JavaScript
SPA (Single Page Application)
117. Les échanges
1
HTML, CSS, JavasSript
Demandé par le Browser
XML HTTP
JavaScript
DOM
2
Serveur
Essentiellement des Données
Mais aussi du
HTML , CSS et JS
Demandé par l’application
Browser
118. Le code cross browser
function getHttpRequest() {
if (typeof XMLHttpRequest === 'undefined') {
XMLHttpRequest = function () {
var isIE5 = /MSIE 5/.test (navigator.userAgent);
var appId = isIE5 ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP';
return new ActiveXObject(appId);
};
}
return new XMLHttpRequest();
}
119. var request = getHttpRequest();
var url = '…';
var async = false; // ou true
var method = 'GET'; // ou 'POST‘
var postData = null;
request.open(method, url, async);
request.setRequestHeader ('Content-Type', 'application/x-www-form-urlencoded');
request.onreadystatechange = function () { };
request.send(postData); // postData !== null pour ‘POST’
120. request.readyState // 4 -> ResponseReady
request.getResponseHeader('content-type');
request.responseXML // si la réponse c’est du XML
request.responseText // si la réponse c’est du JSON
request.statusText
request.status