Your SlideShare is downloading. ×

Javascript un langage supérieur

573

Published on

2 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
573
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
37
Comments
2
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Alan TuringAlonzo Church
  • Transcript

    • 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 OREILLY  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 :  Sinspire 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 Cest 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  Cest donc un langage de maître
    • 11.  Cest un langage sérieux qui sert à faire du développement pérenne. Lorganisation et le découpage du code se font à laide de fonctions Les fonctions ont de la mémoire  Closure, delegate anonyme, Lambda
    • 12.  La notion dobjet 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 dobjet est associé un prototype  Si lobjet 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 dextension personnalisés Cest un langage dynamiquement typé  Comme le C#
    • 14. Types de basesNumber Boolean String Date Array Object Function RegExp Math Types utilisateur Les fonctions
    • 15.  Syntaxiquement : cest 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 cest 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 nest pas un langage pour débutant
    • 19. Absence ou pauvreté de loutillage…• Peu ou pas dIntelliSense• Pas de vérification en design time • Mais si on utilise le compilateur de JScript.net on peut déceler lessentiel des problèmes syntaxiques
    • 20. … Absence ou pauvreté de loutillage…• Debug plus difficile • FireBug et VisualStudio permettent néanmoins de faire beaucoup de choses
    • 21. … Absence ou pauvreté de loutillage• 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 cest 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  Dextension  Dassemblage et dorganisation
    • 27. Exemple : var p = { Nom : toto, Prénoms : [Jean, Alain], Taille : 1.52, DateNaissance : new Date (1980, 0, 12), Salarié : true };
    • 28.  Si p est un objet ayant un champ Nom p.Nom = toto; Et p [‘Nom] = toto; Expriment la même chose
    • 29.  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
    • 30.  JavaScript peut senrichir avec 4 lignes de code par la notion de méthode dextension de C# 3.0. Les voici : Function.prototype.addMethod = function (name, f) { if(!this.prototype[name]) this.prototype[name] = f; return this; };
    • 31.  Utilisation de addMethod : Number.addMethod (integer, function() { return Math [this < 0 ? ceil : floor] (this); }); var i = (3.16).integer ();
    • 32.  A la mode  Le web moderne ne peut pas s’en passer  HTML5  Mobilité De plus en plus d’outillage  TypeScript  JsFiddle  FireBug…
    • 33.  De plus en plus de bibliothèques  JQuery…  Google, Bing…  Facebook, Twitter…  Raphaël, Processing, Bonsaï…  MicroJS.com , des centaines d’autres…
    • 34. Leurs problèmes majeurs vis-à-vis de JavaScript
    • 35.  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 dabonnement Varient plus ou moins  Dun browser à lautre  Dune version à lautre  Dun OS à lautre
    • 36.  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
    • 37. Les détails de la syntaxe
    • 38. Variables, expressions, opérateurs , conditions, et boucles
    • 39.  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;
    • 40.  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
    • 41.  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
    • 42.  Arithmétique  Binaire : +, -, *, /, %  Unaire : ++, -- Comparaison  >, <, >=, <=, !=, ==, !==, === Logiques  Binaire : Et (&&), Ou (||)  Unaire : Non (!)
    • 43.  Numériques  AND(&), OR(|), Not(~), XOR(^), <<, >>, >>> Affectation  =  +=, -=, *=, /=, %=, &=, |=, ^=, <<=, >>=, >>>=  A op= B est équivalent à A = A op B  A += 3 est équivalent à A = A + 3
    • 44.  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
    • 45. if (expressionA) { // bloc d’instructions : A} else if (expressionB) { // bloc d’instructions : B} else if (expressionC) { // bloc d’instructions : C} else { // instructions : D}
    • 46. switch (expression) { case expressionA : // bloc d’instructions : A break; case expressionB : // bloc d’instructions : B break; case default: // bloc d’instructions : C break;}
    • 47. while(expression) { // bloc d’instructions // continue; permet de passer à l’itération suivante // break; permet de sortir de la boucle}
    • 48. do { // bloc d’instructions // continue; permet de passer à l’itération suivante // break; permet de sortir de la boucle} while (expression);
    • 49. 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}
    • 50. Numérique, chaine decaractères, booléen, date, objet, tableau, fonctions…
    • 51.  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
    • 52.  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
    • 53. 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 === Numberb.constructor === Stringc.constructor === Booleand.constructor === Date truee.constructor === Objectf.constructor === Arrayg.constructor === Functionh.constructor === RegExp
    • 54. var T1 = []; // T1 un tableau vide // T1.length vaut 0T1.push (‘toto’); // T1.length vaut 1 // T1[0] vaut ‘toto’ // T1[3] vaut undefinedvar T2 = [4, 17]; // T2 un tableau à deux éléments // T2.length vaut 2 // T2[0] vaut 4 et T2[1] vaut 17T2 [3] = 2013; // T2.length vaut 4 // T2[3] vaut 2013 // T2[2] vaut undefined // 2 in T2 vaut false // 3 in T2 vaut true
    • 55. var O1 = {}; // O1 un objet videO1.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 falseO1.Age = 17; // O1.Age vaut maintenant 17delete O1.Prénom; // O1.Prénom vaut undefined // Age in O1 vaut true // Prénom in O1 vaut false
    • 56. 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 17for (var p in O2) { // bloc d’instructions // continue; permet de passer à l’itération suivante // break; permet de sortir de la boucle}
    • 57. …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
    • 58.  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’ }; }
    • 59. variables, portée, arguments, this, modes d’appel, constructor
    • 60. // La fonction F avec :// deux paramètres a et b// deux variables locales c et d// et une fonction locale carrefunction F (a, b) { carre var c = 10; c function carre (x) { return x * x; } var d = 2; d return a * carre (c) + d * b;}
    • 61. // La fonction F avec deux paramètres a et b// ici a vaut 2 et b vaut 5var r1 = F(2, 5);// ici a vaut 3 et b vaut undefinedvar r2 = F(3);// ici a vaut 4 et b vaut 5 et 6 est ignoréevar r2 = F(4, 5, 6);var nbParametres = F.length; // ici 2
    • 62. // La fonction G avec deux paramètres a et bfunction 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 v3G (10); // 10 * 1 10 * *G (20, 30); // 20 30 2 20 30 *G (30, 40, 50); // 30 40 3 30 40 50 // * = undefined
    • 63.  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 ();
    • 64.  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
    • 65. // La fonction H incrémente le champs V d’un objetfunction H () { this.V = this.V + 1; }// o1 un objet avec deux champs V et W et une méthode Incvar o1 = { V : 5, W : 6, Inc : H };// o2 un objet avec un champ V et une méthode Incvar o2 = { V : 2, Inc : H };o1.Inc (); // appel de H avec this === o1 o1.V vaut 6o2.Inc (); // appel de H avec this === o2 o2.V vaut 3H.call (o1); // appel de H avec this === o1 o1.V vaut 7H.call (o2); // appel de H avec this === o2 o2.V vaut 4
    • 66. // Appelé à travers new la fonction Point construit// un objet avec deux champs X et Yfunction 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);
    • 67. 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
    • 68. 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]);
    • 69.  Fonctions nommées  Par leur nom Fonction anonymes  À travers une variable Fonction constructeur  À travers new Pour contrôler le contexte  À travers apply () ou call ()
    • 70.  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); }
    • 71.  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
    • 72.  Exemple : générateur des entiersfunction Entiers() { var n = 0; var f = function () { return n++; }; return f;}
    • 73.  Usagevar 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;
    • 74.  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; };}
    • 75.  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();
    • 76.  Fibonacci non récursive par closurefunction Fibonacci() { var a = 0, b = 1; return function () { var r = a + b; return a = b, b = r; };}
    • 77.  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
    • 78. 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;
    • 79.  Memoize : technique de création de cache de réponsefunction 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); };}
    • 80.  Utilisation pour Fibonacci récursivefunction 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 !
    • 81.  Exemple : Fibonacci recursive anonymevar fibonacci = function (n) { if (n < 2) return 1; return fibonacci (n – 2) + fibonacci (n – 1);}fibonacci = memoize (fibonacci); // va beaucoup plus vite
    • 82.  Transformer une fonction de N variables en une fonction de M variables (avec M < N) en fixant certains valeurs des variables
    • 83. 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); };}
    • 84. 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)
    • 85. var GMelies = (function () { // Etat global de votre appli return { Main : function () { // Point d’entrée de votre appli } };}) ();
    • 86.  Organiser le code Encapsulation  Approche boîte noire  Cacher les complexités Extension  Cache Adaptation  Cross Browser
    • 87.  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)
    • 88. DOM IE et W3C
    • 89.  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
    • 90.  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
    • 91.  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
    • 92.  Façon W3C  addEventListener  removeEventListener  Un argument pour le gestionnaire de l’événement ▪ Avec un preventDefault ▪ Avec un stopPropagation ▪ Avec un target
    • 93.  Adaptateur de l’argument de l’événement pour IEfunction xbEvent(e) { if (e) { e.preventDefault = function() { e.returnValue = false; } e.stopPropagation = function() { e.cancelBubble = true; } e.target = e.srcElement; } return e;}
    • 94.  Abonnement façon IEfunction ieAddHandler(element, eventName, handler) { element.attachEvent(on + eventName, function () { handler(element, xbEvent(window.event)); });}
    • 95.  Abonnement façon W3Cfunction w3cAddHandler(element, eventName, handler) { element.addEventListener(eventName, function (e) { handler(element, e); }, false);}
    • 96.  Abonnement cross browservar addHandler = (function () { function xbEvent(e) { … } function ieAddHandler (element, eventName, handler) { … } function w3cAddHandler (element, eventName, handler) { … } return (window.addEventListener) ? w3cAddHandler : ieAddHandler;}) ();
    • 97. Evaluation dynamique
    • 98.  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})");}
    • 99.  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);
    • 100. et leur prototypes
    • 101.  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
    • 102. function Point (x, y) { this.X = x; this.Y = y; }// distance est une méthode du prototype de PointPoint.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 Pointvar p1 = new Point (1, 1);var p2 = new Point (4, 5);var d = p1.distance (p2); // ici d vaut 5
    • 103. 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 ();
    • 104. var c = new Carre (5); // c.Largeur vaut 5 // c.Longueur vaut 5var s = c.Surface (); // s vaut 25var p = c.Perimetre (); // p vaut 20c.constructor === Carre // truec.constructor === Rectangle // falsec instanceof Carre // truec instanceof Rectangle // trueSurface in c // truec.hasOwnProperty (Surface) // false
    • 105. (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/ */
    • 106. 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); };}
    • 107. 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)
    • 108. RegExp
    • 109.  Des Exemplesvar tel = /^(d{2}(.|s)?){5}$/tel.test (0102030405) // vaut truetel.test (010203040) // vaut falsetel.test (01.02.03.04.05) // vaut truetel.test (01 02 03 04 05) // vaut truetel.test (01.02 03 04 05) // vaut truevar tel2 = new RegExp (^d{2}(.|s)?(d{2}1?){4}$);tel2.test (01.02.03.04.05) // vaut truetel2.test (01 02 03 04 05) // vaut truetel2.test (01.02 03 04 05) // vaut false
    • 110.  Des Exemplesvar 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, "");}
    • 111.  Des Exemplesvar 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 5var m2 = cp.exec (75); // m2[0] = 75 // m2[1] = 75 // m2[2] = // m2.index vaut 0 // m2.lastIndex vaut 2var m3 = cp.exec (7); // m3 vaut null
    • 112. XMLHttpRequest
    • 113.  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
    • 114.  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)
    • 115.  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
    • 116.  Le code cross browserfunction 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();}
    • 117. var request = getHttpRequest();var url = …;var async = false; // ou truevar 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’
    • 118. request.readyState // 4 -> ResponseReadyrequest.getResponseHeader(content-type);request.responseXML // si la réponse c’est du XMLrequest.responseText // si la réponse c’est du JSONrequest.statusTextrequest.status
    • 119. 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;}

    ×