Un langage supérieur
   JavaScript de loin     Bibliographie     Introduction     Les aspects négatifs     Les aspects positifs     Le pr...
   JavaScript de près     Les instructions      ▪ Variables      ▪ Expressions et opérateurs      ▪ Conditions      ▪ Bo...
 Les fonctions, les variables et la portée Les exceptions Récursion Les « closure », ou fonctions à mémoire Les « tim...
La place de JavaScript aujourd’hui
   JavaScript : the good parts     de Douglas Crockford chez OREILLY     Le meilleur (très dense)   Secrets of the Jav...
   Très bref historique des débuts :     Sinspire de Self (1986) et de Scheme (1998)     Naissance chez Netscape :     ...
 JScript 1.0 (1996 Microsoft ) ECMAScript (1997)… JScript.Net (2002)… Chrome V8  ▪ Node.js (2009)  ▪ Développement ser...
 JavaScript 1.5 (2000)  ▪ ECMAScript (version 3)  ▪ FF (1.0), IE (6, 7, 8), Opera (6,7,8,9) JavaScript 1.6 (2005) : FF (...
   JavaScript a probablement le meilleur rapport :    utilisation/connaissance   Cest un langage     Minimaliste     M...
   Cest un langage sérieux qui sert à faire du    développement pérenne.   Lorganisation et le découpage du code se    f...
   La notion dobjet est présente     Encapsulation     Données     Méthodes   Pas de notion de classe a priori     b...
   On peut facilement créer :     La notion dévénement     Des notions de réutilisation      ▪ Par délégation simple ou...
Types de basesNumber   Boolean   String     Date      Array        Object   Function   RegExp   Math                      ...
   Syntaxiquement : cest un langage de la    famille C, C++, C#.     Case sensitif, Accolades, Point virgules     Mêmes...
   Sinon cest un langage qui peut être classé    sous les catégories     Orienté Objet     Fonctionnelle     Dynamique...
Impérative (1937)   Déclarative (1936)Frédéric Fadel       Aspectize                            17
Qui font que ce nest pas un langage pour débutant
Absence ou pauvreté de loutillage…• Peu ou pas dIntelliSense• Pas de vérification en design time  • Mais si on utilise le ...
… Absence ou pauvreté de loutillage…• Debug plus difficile  • FireBug et VisualStudio permettent    néanmoins de faire bea...
… Absence ou pauvreté de loutillage• Refactoring : quasi impossible• Navigation dans le code :  • Go to definition  • Find...
Les aspects bâclés du langage…• Les variables globales• Syntaxe du langage  • null, undefined, false, zéro et chaine vide ...
… Les aspects bâclés du langage…• Incohérences du langage  • Si T est un tableau  • T.constructor == Array  • typeof T== o...
… Les aspects bâclés du langage• Incohérences du langage  • typeof NaN == number • typeof null == object • 0 == 0, false !...
Qui font que cest un langage de maître
   JSON     JavaScript Object Notation     Syntaxe de représentation de données qui     contrairement à XML and Co ne n...
Exemple : var   p = { Nom : toto,            Prénoms : [Jean, Alain],            Taille : 1.52,            DateNaissance :...
   Si p est un objet ayant un champ Nom    p.Nom = toto;    Et    p [‘Nom] = toto;    Expriment la même chose
   Si Ajouter est une fonction avec deux    paramètres a et b sur un objet calc    calc .Ajouter ( 3, 4);    calc [Ajoute...
   JavaScript peut senrichir avec 4 lignes de    code par la notion de méthode dextension de    C# 3.0. Les voici :    Fu...
   Utilisation de addMethod :    Number.addMethod (integer, function() {      return Math [this < 0 ? ceil : floor] (this...
   A la mode     Le web moderne ne peut pas s’en passer     HTML5     Mobilité   De plus en plus d’outillage     Typ...
   De plus en plus de bibliothèques     JQuery…     Google, Bing…     Facebook, Twitter…     Raphaël, Processing, Bon...
Leurs problèmes majeurs vis-à-vis de JavaScript
   Les champs et leur caractère readonly   Les méthodes et leurs arguments   Les événements     Leur nom et leurs para...
   Si on se restreint aux browsers modernes :     FF (3 et plus), IE (6, 7, 8, 9, 10), Safari, Chrome…   Avec une centa...
Les détails de la syntaxe
Variables, expressions, opérateurs , conditions, et boucles
   Déclaration     var x;   // x est déclaré mais vaut undefined   Déclaration et initialisation     var y = 5;       ...
   Déclaration et affectation     var z, t;   // z et t sont déclarés     z = 14;     // affectation de la valeur 14 à ...
   Exemples :     Opérateur binaires :      ▪ + (arithmétique addition)      ▪ > (comparaison supérieur à)      ▪ = (aff...
   Arithmétique     Binaire : +, -, *, /, %     Unaire : ++, --   Comparaison     >, <, >=, <=, !=, ==,     !==, ===...
   Numériques     AND(&), OR(|), Not(~), XOR(^), <<, >>, >>>   Affectation     =     +=, -=, *=, /=, %=, &=, |=, ^=, ...
   Conditionnel     Operateur ternaire :      ▪ ? :     Expression ternaire :      ▪ a ? 3 : 7      // vaut 3 si a est ...
if (expressionA) {    // bloc d’instructions : A} else if (expressionB) {    // bloc d’instructions : B} else if (expressi...
switch (expression) {    case expressionA :      // bloc d’instructions : A    break;    case expressionB :      // bloc d...
while(expression) {    // bloc d’instructions    // continue; permet de passer à l’itération suivante    // break; permet ...
do {  // bloc d’instructions  // continue; permet de passer à l’itération suivante  // break; permet de sortir de la boucl...
for (var n = 0; n < 5; n++) {    // bloc d’instructions    // continue; permet de passer à l’itération suivante    // brea...
Numérique, chaine decaractères, booléen, date, objet, tableau, fonctions…
   En JavaScript tout est objet     Donc objet ne veut pas dire grand-chose !     Il y a des objets simples comme      ...
 Les tableaux sont des objets qui permettent de  ranger d’autres objets et y accéder par un index  entier On peut avoir ...
var   a   =   5;                     //   typeof   a   ===   ‘number’var   b   =   ‘toto’;                //   typeof   b ...
var T1 = [];        // T1 un tableau vide                    // T1.length vaut 0T1.push (‘toto’);   // T1.length vaut 1   ...
var O1 = {};             // O1 un objet videO1.Nom = ‘Duval’;        //   O1 a un champs ‘Nom’O1[‘Prénom’] = ‘toto’;   // ...
var O2 = { Prénom : ‘toto’, Nom : ‘Duval’, Age = 17 };// ici ça bouclera trois fois// 1 : p vaut ‘Prénom’ et O2[p] vaut ‘t...
…try {    // instructions A                        Sans Exception   Avec Exception} catch (x) {              dans A       ...
   Si on se trouve dans une situation     incohérente,     exceptionnelle,     qui ne devrait pas arriver   Alors il ...
variables, portée, arguments, this, modes d’appel, constructor
// La fonction F avec ://     deux paramètres a et b//     deux variables locales c et d//     et une fonction locale carr...
// 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 undefine...
// La fonction G avec deux paramètres a et bfunction G (a, b) {    var   count = arguments.length;    var   v1 = arguments...
   Orienté Objet     Exemple et vocabulaire      ▪ toLowerCase () est une méthode des objets de type        chaine de ca...
   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 =...
// La fonction H incrémente le champs V d’un objetfunction H () { this.V = this.V + 1; }// o1 un objet avec deux champs V ...
// Appelé à travers new la fonction Point construit// un objet avec deux champs X et Yfunction Point (x, y) { this.X = x; ...
function distance (p1, p2) {    var dx = p2.X – p1.X;    var dy = p2.Y – p1.Y;    return Math.sqrt (dx * dx + dy * dy);}va...
function somme() {    var s = 0;    for (var n = 0; n < arguments.length; n++) {       s += arguments [n];    }    return ...
   Fonctions nommées     Par leur nom   Fonction anonymes     À travers une variable   Fonction constructeur     À t...
   Une fonction peut s’appeler elle-même     Attention il lui faut une condition d’arrêt et la      convergence vers cet...
   Les closure sont des fonctions à mémoire   Contrairement { la pile qui est nettoyée { la sortie d’une    fonction, le...
   Exemple : générateur des entiersfunction Entiers() {    var n = 0;    var f = function () { return n++; };    return f;}
   Usagevar g1 = Entiers();var a1 = g1 ();       // a1 vaut 0;var a2 = g1 ();       // a2 vaut 1;var a3 = g1 ();       //...
   Exemple : le problème 3 N + 1 ?function Syracuse(n) {    return function () {      if (n % 2 === 0) n /= 2;      else ...
   Question : que valent a, b, c, d et e ?var f = Syracuse(17);var   a   =   f();var   b   =   f();var   c   =   f();var ...
   Fibonacci non récursive par closurefunction Fibonacci() {    var a = 0, b = 1;    return function () {      var r = a ...
   Higer order functions     Dans un univers fonctionnel tout est fonction     JavaScript peut être considéré comme un ...
function Carre (f) {    return function (x) { var r = f (x); return r * r; };}var carreDesEntiers = Carre (Entiers ());var...
   Memoize : technique de création de cache de    réponsefunction memoize(f) {    return function () {      f.values = f....
   Utilisation pour Fibonacci récursivefunction fibonacci (n) {        if (n < 2) return 1;        return fibonacci (n – ...
   Exemple : Fibonacci recursive anonymevar fibonacci = function (n) {     if (n < 2) return 1;     return fibonacci (n –...
   Transformer une fonction de N variables en    une fonction de M variables (avec M < N) en    fixant certains valeurs d...
function partial(f) {    var defArgs = [];    for (var n = 1; n < arguments.length; n++)       defArgs.push(arguments[n]);...
function F (a, b) { return 100 * a + b; }var F1 = partial (F, undefined, 3); // F1 (x) === F(x, 3)var F2 = partial (F, 5);...
var GMelies = (function () {  // Etat global de votre appli  return {    Main : function () {         // Point d’entrée de...
   Organiser le code   Encapsulation     Approche boîte noire     Cacher les complexités   Extension     Cache   Ad...
   Une fonction qui déclenche un appel d’une    autre fonction à intervalles réguliers     setInterval (action, millisec...
DOM IE et W3C
   Première approche     Utiliser les onxxx des éléments du DOM HTML      ▪ onclick      ▪ onmouse (down, move, up, over...
   Deuxième approche     Abonnement et désabonnement dynamique par      API JavaScript.     Problèmes      ▪ Différence...
   Façon IE       attachEvent       detachEvent       Nom des événements = onxxx       Pas d’argument d’événement mai...
   Façon W3C     addEventListener     removeEventListener     Un argument pour le gestionnaire de l’événement      ▪ A...
   Adaptateur de l’argument de l’événement    pour IEfunction xbEvent(e) {    if (e) {        e.preventDefault = function...
   Abonnement façon IEfunction ieAddHandler(element, eventName, handler) {     element.attachEvent(on + eventName, functi...
   Abonnement façon W3Cfunction w3cAddHandler(element, eventName, handler) {     element.addEventListener(eventName, func...
   Abonnement cross browservar addHandler = (function () {    function xbEvent(e) { … }    function ieAddHandler (element...
Evaluation dynamique
   La fonction eval permet d’évaluer du    JavaScript.     Quelques exemples :var function testEval() {    var a = 16;  ...
   Le constructeur des fonctions Function    permet de construire une fonction !     Exemple :var ajouter = new Function...
et leur prototypes
   En JavaScript chaque fonction à un prototype     Le prototype est un objet     Par défaut le prototype est l’objet v...
function Point (x, y) { this.X = x; this.Y = y; }// distance est une méthode du prototype de PointPoint.prototype.distance...
function Rectangle(largeur, longueur) {    this.Largeur = largeur; this.Longueur = longueur; }Rectangle.prototype.Surface ...
var c = new Carre (5);        //   c.Largeur vaut 5                              //   c.Longueur vaut 5var s = c.Surface (...
(function () {  if (!Array.prototype.forEach) {    Array.prototype.forEach = function (action, context) {         for (var...
Function.prototype.partial = function () {    var f = this;    var defArgs = [];    for (var n = 1; n < arguments.length; ...
function F (a, b) { return 100 * a + b; }var F1 = F.partial (undefined, 3); // F1 (x) === F(x, 3)var F2 = F.partial (5);  ...
RegExp
   Des Exemplesvar tel = /^(d{2}(.|s)?){5}$/tel.test   (0102030405)       //   vaut   truetel.test   (010203040)        /...
   Des Exemplesvar s = a, b, c, d   ,   e, f;var t1 = s.split (,);var t2 = s.split(/s*,s*/);function trim(s) {   return (...
   Des Exemplesvar cp = /b(d{2})(d{3})?b/;var m1 = cp.exec (75004); //   m1[0] = 75004                            //   m1...
XMLHttpRequest
   Inventé par Microsoft en 1998     Outlook Web Access     Intégré à IE5 en 1999   Démocratisé par Google     GMail ...
   AJAX (Asynchronus JAvascript and XML)     Asynchronus : oui mais pas forcément     JavaScript : oui     XML : ?    ...
   Les échanges                                                 1                                    HTML, CSS, JavasSrip...
   Le code cross browserfunction getHttpRequest() {    if (typeof XMLHttpRequest === undefined) {        XMLHttpRequest =...
var   request = getHttpRequest();var   url = …;var   async = false;      // ou truevar   method = GET;     // ou POST‘var ...
request.readyState      // 4 -> ResponseReadyrequest.getResponseHeader(content-type);request.responseXML     // si la répo...
function successful(r) {    var success = false;    try {    success = (!r.status && location.protocol === file:) ||      ...
Javascript un langage supérieur
Javascript un langage supérieur
Upcoming SlideShare
Loading in …5
×

Javascript un langage supérieur

1,223 views
1,100 views

Published on

2 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total views
1,223
On SlideShare
0
From Embeds
0
Number of Embeds
55
Actions
Shares
0
Downloads
75
Comments
2
Likes
4
Embeds 0
No embeds

No notes for slide
  • Alan TuringAlonzo Church
  • Javascript un langage supérieur

    1. 1. Un langage supérieur
    2. 2.  JavaScript de loin  Bibliographie  Introduction  Les aspects négatifs  Les aspects positifs  Le problème avec les DOMs HTML
    3. 3.  JavaScript de près  Les instructions ▪ Variables ▪ Expressions et opérateurs ▪ Conditions ▪ Boucles ▪ Les types de bases  Les tableaux  Les objets
    4. 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. 5. La place de JavaScript aujourd’hui
    6. 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. 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. 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. 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. 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. 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. 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. 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. 14. Types de basesNumber Boolean String Date Array Object Function RegExp Math Types utilisateur Les fonctions
    15. 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. 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. 17. Impérative (1937) Déclarative (1936)Frédéric Fadel Aspectize 17
    18. 18. Qui font que ce nest pas un langage pour débutant
    19. 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. 20. … Absence ou pauvreté de loutillage…• Debug plus difficile • FireBug et VisualStudio permettent néanmoins de faire beaucoup de choses
    21. 21. … Absence ou pauvreté de loutillage• Refactoring : quasi impossible• Navigation dans le code : • Go to definition • Find All References… • quasi impossible
    22. 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. 23. … Les aspects bâclés du langage…• Incohérences du langage • Si T est un tableau • T.constructor == Array • typeof T== object
    24. 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. 25. Qui font que cest un langage de maître
    26. 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. 27. Exemple : var p = { Nom : toto, Prénoms : [Jean, Alain], Taille : 1.52, DateNaissance : new Date (1980, 0, 12), Salarié : true };
    28. 28.  Si p est un objet ayant un champ Nom p.Nom = toto; Et p [‘Nom] = toto; Expriment la même chose
    29. 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. 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. 31.  Utilisation de addMethod : Number.addMethod (integer, function() { return Math [this < 0 ? ceil : floor] (this); }); var i = (3.16).integer ();
    32. 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. 33.  De plus en plus de bibliothèques  JQuery…  Google, Bing…  Facebook, Twitter…  Raphaël, Processing, Bonsaï…  MicroJS.com , des centaines d’autres…
    34. 34. Leurs problèmes majeurs vis-à-vis de JavaScript
    35. 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. 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. 37. Les détails de la syntaxe
    38. 38. Variables, expressions, opérateurs , conditions, et boucles
    39. 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. 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. 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. 42.  Arithmétique  Binaire : +, -, *, /, %  Unaire : ++, -- Comparaison  >, <, >=, <=, !=, ==, !==, === Logiques  Binaire : Et (&&), Ou (||)  Unaire : Non (!)
    43. 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. 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. 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. 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. 47. while(expression) { // bloc d’instructions // continue; permet de passer à l’itération suivante // break; permet de sortir de la boucle}
    48. 48. do { // bloc d’instructions // continue; permet de passer à l’itération suivante // break; permet de sortir de la boucle} while (expression);
    49. 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. 50. Numérique, chaine decaractères, booléen, date, objet, tableau, fonctions…
    51. 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. 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. 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. 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. 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. 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. 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. 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. 59. variables, portée, arguments, this, modes d’appel, constructor
    60. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 72.  Exemple : générateur des entiersfunction Entiers() { var n = 0; var f = function () { return n++; }; return f;}
    73. 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. 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. 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. 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. 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. 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. 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. 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. 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. 82.  Transformer une fonction de N variables en une fonction de M variables (avec M < N) en fixant certains valeurs des variables
    83. 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. 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. 85. var GMelies = (function () { // Etat global de votre appli return { Main : function () { // Point d’entrée de votre appli } };}) ();
    86. 86.  Organiser le code Encapsulation  Approche boîte noire  Cacher les complexités Extension  Cache Adaptation  Cross Browser
    87. 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. 88. DOM IE et W3C
    89. 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. 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. 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. 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. 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. 94.  Abonnement façon IEfunction ieAddHandler(element, eventName, handler) { element.attachEvent(on + eventName, function () { handler(element, xbEvent(window.event)); });}
    95. 95.  Abonnement façon W3Cfunction w3cAddHandler(element, eventName, handler) { element.addEventListener(eventName, function (e) { handler(element, e); }, false);}
    96. 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. 97. Evaluation dynamique
    98. 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. 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. 100. et leur prototypes
    101. 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. 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. 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. 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. 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. 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. 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. 108. RegExp
    109. 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. 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. 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. 112. XMLHttpRequest
    113. 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. 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. 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. 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. 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. 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. 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;}

    ×