1. Un langage supérieur

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

5. La place de JavaScript aujourd’hui

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)

9.  JavaScript 1.5 (2000)
▪ ECMAScript (version 3)
▪ FF (1.0), IE (6, 7, 8), Opera (6,7,8,9)
 JavaScript 1.6 (2005) : FF (1.5)
 JavaScript 1.7 (2006) : FF (2.0)
 JavaScript 1.8 (2008) : FF (3.0)
 JavaScript 1.8.5 (2010) : FF (4.0) IE (9) ECMAScript (5)
 JavaScript 2.0 (201?) : ECMAScript (version 6)

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#

17. Impérative (1937) Déclarative (1936)
Frédéric Fadel Aspectize 17

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'

25. Qui font que c'est un langage de maître

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

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…

36. Leurs problèmes majeurs vis-à-vis de JavaScript

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

39. Les détails de la syntaxe

40. Variables, expressions, opérateurs , conditions, et boucles

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

43.  Exemples :
 Opérateur binaires :
▪ + (arithmétique addition)
▪ > (comparaison supérieur à)
▪ = (affectation)
 Expression binaires :
▪3 + 5 // ça vaut 8
▪3 > 5 // ça vaut false
▪ pi = 3.14 // ça vaut 3.14

44.  Arithmétique
 Binaire : +, -, *, /, %
 Unaire : ++, --
 Comparaison
 >, <, >=, <=, !=, ==, !==, ===
 Logiques
 Binaire : Et (&&), Ou (||)
 Unaire : Non (!)

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
}

52. Numérique, chaine de
caractères, booléen, date, objet, tableau, fonctions…

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

61. variables, portée, arguments, this, modes d’appel, constructor

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

88.  Organiser le code
 Encapsulation
 Approche boîte noire
 Cacher les complexités
 Extension
 Cache
 Adaptation
 Cross Browser

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)

90. DOM IE et W3C

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

99. Evaluation dynamique

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

102. et leur prototypes

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)

110. RegExp

111.  Des Exemples
var tel = /^(d{2}(.|s)?){5}$/
tel.test ('0102030405') // vaut true
tel.test ('010203040') // vaut false
tel.test ('01.02.03.04.05') // vaut true
tel.test ('01 02 03 04 05') // vaut true
tel.test ('01.02 03 04 05') // vaut true
var tel2 = new RegExp ('^d{2}(.|s)?(d{2}1?){4}$');
tel2.test ('01.02.03.04.05') // vaut true
tel2.test ('01 02 03 04 05') // vaut true
tel2.test ('01.02 03 04 05') // vaut false

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

113.  Des Exemples
var cp = /b(d{2})(d{3})?b/;
var m1 = cp.exec ('75004'); // m1[0] = '75004'
// m1[1] = '75'
// m1[2] = '004'
// m1.index vaut 0
// m1.lastIndex vaut 5
var m2 = cp.exec ('75'); // m2[0] = '75'
// m2[1] = '75'
// m2[2] = ''
// m2.index vaut 0
// m2.lastIndex vaut 2
var m3 = cp.exec ('7'); // m3 vaut null

114. XMLHttpRequest

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

121. function successful(r) {
var success = false;
try {
success = (!r.status && location.protocol === 'file:') ||
((r.status >= 200) && (r.status < 300)) ||
(r.status === 304) ||
(navigator.userAgent.indexOf('Safari') >= 0)
&& (typeof r.status === 'undefined');
} catch (e) { }
return success;
}