Javascript ne se limite pas à           jQuery
Javascript ne se limite pas à           jQuery   Javascript                      jQuery
Introduction        Pourquoi faire une    présentation sur Javascript ?
Introduction / But de la présentation                     jQuery
Introduction / But de la présentation   Redécouvrir un langage pour    en faire un meilleur usage
Introduction / Plan de la présentation1.   Introduction / Rappels2.   Les fonctions / Les objets3.   Les closures4.   Le p...
Introduction / Plan de la présentation1.   Introduction / Rappels2.   Les fonctions / Les objets3.   Les closures4.   Le p...
Rappels    En Javascript, tout est Objet.          false.toString();//false          [1,2,3].toString();//"1,2,3“         ...
Rappels          Les objets en tant que          conteneurs de données             var personne = {                    nom...
Functions / Déclaration     Plusieurs façons de déclarer             une fonction               •function declaration     ...
Functions / Scopes   Scope = portée des variables  Une variable est globale ou limitée au scope                 d’une fonc...
Functions / Scopes / Mot clé var   N’oubliez pas le mot clé var devant le nom de vos variables !
Functions / Scopes / Mot clé varPortée des variables en fonction du mot clé var•Une variable   déclarée   sans   le   mot ...
Functions / Scopes / Mot clé var   N’oubliez pas le mot clé var devant le nom de vos variables !   //même effet, mais pren...
Functions / Scopes / Mot clé var   N’oubliez pas le mot clé var devant le nom de vos variables !     var toto = "Je suis u...
Functions / Scopes / Objet window L’objet window est créé par le navigateur lors            de l’ouverture d’une page     ...
Functions / Constructeur    En javascript : pas d’objets instanciés à partir d’une Classe.   Les fonctions font office de ...
Functions / Différence entre une instance et une « classe » instanciable (une fonction)var instance = {       methode:func...
Functions / this                   this;
Functions / this Appelé comme un objet ou une fonction, this sera toujours présentfunction maFonction(){       console.log...
Functions / this / Function expressionAppelé comme un objet ou une fonction, this sera toujours présent              jQuer...
Functions / call - applyEn utilisant call ou apply, la valeur de this à lintérieur de la fonction         appelée est sett...
Functions / call – apply / exemple       var prime = {              id:123456,              payeur:"MESSALI",             ...
Functions / argumentsComme il existe par défaut une variable this dans toute fonction, ilexiste une variable arguments qui...
Functions / ClosuresEn Javascript : pas de variable privée/publique,     uniquement le scope de la fonction. Le scope de c...
Functions / Closures                Exemple de variable privée function Counter(start) {    //variable définie dans le sco...
Functions / Pattern IIFEIIFE = Immediatly Invoked Function Expression                   parfois nommé             Anonymou...
Functions / Pattern IIFEIIFE = Immediatly Invoked Function Expression                           parfois nommé             ...
Functions / Pattern IIFE / Namespace protégé     (function(window){            //"namespace" protégé            function t...
Functions / Prototype•Chaque objet descend de Object•Chaque objet contient un attribut "prototype"•Il est possible dajoute...
Functions / Prototype / Ajout de méthode  Ajout de méthode à un objet sans l’étendre   function Animal(){          this.ty...
Functions / Prototype / Chaîne PrototypePour récupérer une propriété, javascript remontela chaine de prototype jusqu’à la ...
Functions / Prototype / Chaîne Prototypefunction Animal(){       this.type = "Un animal";       this.mange = function(){co...
Functions / Prototype / Objets natifsModification du prototype des objets natifs : déconseillé. A part pourporter une méth...
Functions / Prototype / Objets natifsQuelques exemples avec des objet natifs      Object.prototype.test = "toto";      var...
Functions / Prototype / hasOwnPropertyLa seule façon de savoir si une propriété est définie sur lobjet lui même etnon quel...
Functions / Prototype / hasOwnProperty / boucle for in         //modification du prototype de Object         Object.protot...
Functions / Prototype / Closures - Encapsulation•Les méthodes définies à lintérieur du constructeur (Counter) ont accès à ...
jQuery           Let’s jQuery !         •Code source de jQuery         •Plugin jQuery
ConclusionJavascript ne se limite pas à jQuery …   Javascript est un langage objet …             … pensez-y …
ConclusionJavascript ne se limite pas à jQuery …   Javascript est un langage objet …             … pensez-y …
Ressources :                                jQuery http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/  ...
Christophe Rosset – avril 2011
Christophe Rosset – avril 2011
Javascript ne se limite pas à jquery
Prochain SlideShare
Chargement dans…5
×

Javascript ne se limite pas à jquery

604 vues

Publié le

Présentation à la nAcademy (Avril 2011) : Javascript ne se limite pas à jQuery par Christophe Rosset

0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
604
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Javascript ne se limite pas à jquery

  1. 1. Javascript ne se limite pas à jQuery
  2. 2. Javascript ne se limite pas à jQuery Javascript jQuery
  3. 3. Introduction Pourquoi faire une présentation sur Javascript ?
  4. 4. Introduction / But de la présentation jQuery
  5. 5. Introduction / But de la présentation Redécouvrir un langage pour en faire un meilleur usage
  6. 6. Introduction / Plan de la présentation1. Introduction / Rappels2. Les fonctions / Les objets3. Les closures4. Le pattern IIFE5. Le prototype6. Exposition de ces principes dans le code source de jQuery / dans un plugin
  7. 7. Introduction / Plan de la présentation1. Introduction / Rappels2. Les fonctions / Les objets3. Les closures4. Le pattern IIFE5. Le prototype6. Exposition de ces principes dans le code source de jQuery / dans un plugin Fonction Objet Scope Closure Prototype
  8. 8. Rappels En Javascript, tout est Objet. false.toString();//false [1,2,3].toString();//"1,2,3“ function maFonction(){} maFonction.toto = "test"; maFonction.toto;//"test"
  9. 9. Rappels Les objets en tant que conteneurs de données var personne = { nom:ROSSET, prenom:Christophe }
  10. 10. Functions / Déclaration Plusieurs façons de déclarer une fonction •function declaration •function expression //function declaration function maFonction(){} //function expression var autreFonction = function(){};
  11. 11. Functions / Scopes Scope = portée des variables Une variable est globale ou limitée au scope d’une fonction
  12. 12. Functions / Scopes / Mot clé var N’oubliez pas le mot clé var devant le nom de vos variables !
  13. 13. Functions / Scopes / Mot clé varPortée des variables en fonction du mot clé var•Une variable déclarée sans le mot clé var est automatiquement globale.•Une variable déclarée avec le mot clé var, hors dune fonction est globale.•Une variable déclarée sans le mot clé var, dans une fonction est globale.•Une variable déclarée avec le mot clé var, dans une fonction est locale à cettefonction.
  14. 14. Functions / Scopes / Mot clé var N’oubliez pas le mot clé var devant le nom de vos variables ! //même effet, mais prenez lhabitude dutiliser le mot clé var. var toto = "Je suis déclaré dans le scope global"; toto = "Je suis aussi déclaré dans le scope global"; function test(){ var toto = "Je nexiste que dans le scope de la fonction test()"; }
  15. 15. Functions / Scopes / Mot clé var N’oubliez pas le mot clé var devant le nom de vos variables ! var toto = "Je suis une globale"; function test(){ toto = "Tiens jai oublié le mot clé var ..."; } console.log(toto);//"Je suis une globale" test(); console.log(toto);//"Tiens jai oublié le mot clé var ..."
  16. 16. Functions / Scopes / Objet window L’objet window est créé par le navigateur lors de l’ouverture d’une page //ces trois déclarations sont équivalentes toto = "Je suis une globale"; var toto = "Je suis une globale"; window.toto = "Je suis une globale";
  17. 17. Functions / Constructeur En javascript : pas d’objets instanciés à partir d’une Classe. Les fonctions font office de constructeur avec le mot clé new.//Php : différence entre Class, //Javascriptfunction et instance function maClasse(){ this.methode = function(){}Class maClasse { } public function methode(){} var instance = new maClasse();//objet} maClasse();//appel de la fonction$instance = new maClasse();
  18. 18. Functions / Différence entre une instance et une « classe » instanciable (une fonction)var instance = { methode:function(){}}instance.methode();//appel la methode déclaré sur cet objetvar instance = new instance();//TypeError: object is not a function/** ------------------ */function maClasse(){ this.methode = function(){}}var instance = new maClasse();instance.methode();//appel la méthode déclaré sur lobjet instanciémaClasse.methode();//TypeError: Object function maClasse() has no method methode‘/** ------------------ */var objetVide = {};
  19. 19. Functions / this this;
  20. 20. Functions / this Appelé comme un objet ou une fonction, this sera toujours présentfunction maFonction(){ console.log(this);}maFonction();//appelé de cette façon, this fera référence à la variable global window/** ------------------ */function maClasse(){ this.methode = function(){ console.log(this); }}var instance = new maClasse();instance.methode();//appelé de cette façon, this fera référence à mon objet instance
  21. 21. Functions / this / Function expressionAppelé comme un objet ou une fonction, this sera toujours présent jQuery(body).click(function(){ jQuery(this).addClass(tata); }) //equivaut à jQuery(body).click(maFonction); function maFonction(){ jQuery(this).addClass(tata); }
  22. 22. Functions / call - applyEn utilisant call ou apply, la valeur de this à lintérieur de la fonction appelée est settée avec celle du première argument function ttc(net,taxes){ console.log(net+taxes); } ttc(100,20);//affiche 120 var objetVide = {}; ttc.call(objetVide,100,20);//affiche 120 ttc.apply(objetVide,[100,20]);//affiche 120
  23. 23. Functions / call – apply / exemple var prime = { id:123456, payeur:"MESSALI", // ... net:200, taxes:20 } var devis = { id:456879, idClient:46846, // ... net:1500, taxes:250 } function getTtc(){ var ttc = this.net + this.taxes; console.log(ttc); } var ttcPrime = getTtc.call(prime);//affiche 220 var ttcDevis = getTtc.call(devis);//affiche 1750
  24. 24. Functions / argumentsComme il existe par défaut une variable this dans toute fonction, ilexiste une variable arguments qui est un tableaux des arguments passés à la fonction. function ttc(net,taxes){ console.log(net+taxes); } function aliasTtc(){ ttc.apply({},arguments); } ttc(100,20);//affiche 120 aliasTtc(100,20);//affiche 120 /** ------------------ */ //nombre darguments variables function message(){ var message = ""; for(var i = 0; i < arguments.length; i++){ message += arguments[i]+ ; } console.log(message); } message(Bonjour,je,suis,Tophe); message(Hello,world);
  25. 25. Functions / ClosuresEn Javascript : pas de variable privée/publique, uniquement le scope de la fonction. Le scope de cette fonction conserve laccès au scope au dessus de lui lorsquil a été défini.
  26. 26. Functions / Closures Exemple de variable privée function Counter(start) { //variable définie dans le scope Counter var count = start; //méthode définie dans le scope Counter -> a accès à la variable count this.increment = function() { count++; } //méthode définie dans le scope Counter -> a accès à la variable count this.get = function() { return count; } } var toto = new Counter(10); toto.increment(); toto.get();//11 /** ------------------ */ toto.hack = function(){ count = 23; } toto.get();//11
  27. 27. Functions / Pattern IIFEIIFE = Immediatly Invoked Function Expression parfois nommé Anonymous Wrappers ou Self-Invoked Anonymous Function (function(){ //code })()
  28. 28. Functions / Pattern IIFEIIFE = Immediatly Invoked Function Expression parfois nommé Anonymous Wrappers ou Self-Invoked Anonymous Function ( //evalue la fonction à lintérieur des parenthèses function(){} ) //retourne lobjet fonction () //appelle le resultat /** ------------------ */ (function(arg){ console.log(arg);//affiche "toto" })(toto)
  29. 29. Functions / Pattern IIFE / Namespace protégé (function(window){ //"namespace" protégé function transform(str){ return str.toUpperCase(); } function Client(nom,prenom){ this.nom = transform(nom); this.prenom = transform(prenom); this.display = function(){ console.log(this.prenom+ +this.nom); } } //seul lobjet Client sera visible dans le scope global window.Client = Client; })(window) //scope global var instance = new Client(Rosset,Christophe); instance.display();//CHRISTOPHE ROSSET transform(toto);//ReferenceError: transform is not defined
  30. 30. Functions / Prototype•Chaque objet descend de Object•Chaque objet contient un attribut "prototype"•Il est possible dajouter des attributs/fonctions àce prototype de façon à enrichir lobjet concerné
  31. 31. Functions / Prototype / Ajout de méthode Ajout de méthode à un objet sans l’étendre function Animal(){ this.type = "Un animal"; this.mange = function(){console.log(this.type+ ça mange);} } Animal.prototype.dors = function(){console.log(this.type+ ça dors);} var c = new Animal(); c.mange();//Un animal ça mange c.dors();//Un animal ça dors
  32. 32. Functions / Prototype / Chaîne PrototypePour récupérer une propriété, javascript remontela chaine de prototype jusqu’à la trouver
  33. 33. Functions / Prototype / Chaîne Prototypefunction Animal(){ this.type = "Un animal"; this.mange = function(){console.log(this.type+ ça mange);}}function Chat(){ this.type = "Un chat"; this.miaule = function(){console.log(this.type+ ça miaule);}}function Chaton(){ this.type = "Un chaton"; this.joue = function(){console.log(this.type+ ça joue);}}//assigner au prototype de Chat une instance de AnimalChat.prototype = new Animal;//assigner au prototype de Chaton une instance de ChatChaton.prototype = new Chat;var a = new Chaton();a.joue();//Un chaton ça joue /** la chaine prototypea.miaule();//Un chaton ça miaule a [instanceof Chaton]a.mange();//Un chaton ça mange joue [function] type "Un chaton"var b = new Chat(); __proto__ [instanceof Chat]b.miaule();//Un chat ça miaule miaule [function]b.mange();//Un chat ça mange type "Un chat" __proto__ [instanceof Animal]var c = new Animal(); mange [function]c.mange();//Un animal ça mange type "Un animal" __proto__ [instanceof Object] ...
  34. 34. Functions / Prototype / Objets natifsModification du prototype des objets natifs : déconseillé. A part pourporter une méthode apparue dans une nouvelle version de Javascriptsur un ancien navigateur tel que IE6 if (!Array.prototype.forEach) { Array.prototype.forEach = function(fun /*, thisp*/) { var len = this.length; if (typeof fun != "function") throw new TypeError(); var thisp = arguments[1]; for (var i = 0; i < len; i++) { if (i in this) fun.call(thisp, this[i], i, this); } }; } [tata,titi,toto].forEach(function(value,index){ console.log(index+ +value); }) //0 tata 1 titi 2 toto
  35. 35. Functions / Prototype / Objets natifsQuelques exemples avec des objet natifs Object.prototype.test = "toto"; var objetTest = {a:toto} var stringTest = "azertyuiop"; var arrayTest = [1,2,3,4]; console.log(objetTest.test);//toto console.log(stringTest.test);//toto console.log(arrayTest.test);//toto /** ------------------ */ Number.prototype.toEuros = function(){ return (Math.round(this*100)/100).toString().replace(.,,)+€; } 125.12254.toEuros();//"125,12€"
  36. 36. Functions / Prototype / hasOwnPropertyLa seule façon de savoir si une propriété est définie sur lobjet lui même etnon quelque part dans sa chaine prototype est dutiliser .hasOwnProperty //modification du prototype de Object Object.prototype.toto = Hello world; var obj = {societe:Neuros}; obj.societe;//"Neuros" obj.toto;//"Hello world"  societe in obj;//true toto in obj;//true obj.hasOwnProperty(societe);//true obj.hasOwnProperty(toto);//false
  37. 37. Functions / Prototype / hasOwnProperty / boucle for in //modification du prototype de Object Object.prototype.toto = Hello world; var obj = {societe:Neuros}; //log : societe toto for(var i in obj){ console.log(i); } //log : societe for(var i in obj){ if(obj.hasOwnProperty(i)){ console.log(i); } }
  38. 38. Functions / Prototype / Closures - Encapsulation•Les méthodes définies à lintérieur du constructeur (Counter) ont accès à la variable count.•Les méthodes définies sur le prototype ne sont pas définies sur le scope du constructeur et nontpas accès aux variables locales du constructeur. function Counter(start) { //variable définie dans le scope Counter var count = start; //méthode définie dans le scope Counter -> a accès à la variable count this.increment = function() { count++; } //méthode définie dans le scope Counter -> a accès à la variable count this.get = function() { return count; } } //methode set créé une nouvelle closure nayant pas accès à count Counter.prototype.set = function(value){ //count est global //si on met var count, on fait une variable locale à set count = value; } var toto = new Counter(10); toto.increment(); toto.get();//11 toto.set(200); toto.get();//11
  39. 39. jQuery Let’s jQuery ! •Code source de jQuery •Plugin jQuery
  40. 40. ConclusionJavascript ne se limite pas à jQuery … Javascript est un langage objet … … pensez-y …
  41. 41. ConclusionJavascript ne se limite pas à jQuery … Javascript est un langage objet … … pensez-y …
  42. 42. Ressources : jQuery http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/ Javascript Objet http://mckoss.com/jscript/object.htmhttp://blog.mklog.fr/article/js-oo-et-manipulation-prototype-via-call-apply Javascript en général http://bonsaiden.github.com/JavaScript-Garden/ Javascript is not only jQuery (si vous n’êtes pas convaincu) http://www.slideshare.net/rmurphey/the-jquery-divide-5287573
  43. 43. Christophe Rosset – avril 2011
  44. 44. Christophe Rosset – avril 2011

×