Javascript : fondamentaux et OOP

5,072 views
4,888 views

Published on

3 fondamentaux de JavaScript : la portée des variables, les fonctions, le contexte.
Application pour la programmation Orienté Objet en JavaScript

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,072
On SlideShare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
95
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Javascript : fondamentaux et OOP

  1. 1. JavascriptLes fondamentaux La POO Jean-pierre VINCENT
  2. 2. Qui ça ? Jean-pierre VINCENTbraincracking.org (veille techno)@theystolemynick10 ans de WebConsultant, formateur, expertise
  3. 3. Pourquoi Javascript ?
  4. 4. Présent partout● Navigateur● Jeux Web (remplace Flash)● Mobile (Phonegap ...)● Télévisions● Serveur (Node.js, ...)● Software (Chromeless, ...)● OS (JoliCloud, WebOS...)● Windows 8 !
  5. 5. Mauvaise réputation
  6. 6. Mauvaise réputationparseInt(06); // 6parseInt(08); // 0 wftjs.com
  7. 7. Mauvaise réputationtypeof NaN // numberNaN === NaN // falsetypeof null // objectnull instanceof Object // false wftjs.com
  8. 8. Mauvaise réputation(1.7976931348623157e+308 === 1.7976931348623158e+308 )// true! alert(111111111111111111111); //alerts 1111111111111111100009999999999999999 //=> 10000000000000000
  9. 9. APIs● DOM● Node● WinRT...●
  10. 10. Compliqué ?
  11. 11. Différent !
  12. 12. Historique court● Né pendant la guerre (95)● En quelques semaines● Influence Java, Erlang, Lisp, Python IE et Netscape daccord pour EcmaScript 3
  13. 13. Evolution● EcmaScript 5● Harmony● EcmaScript.Next● EcmaScript.Next.Next
  14. 14. En attendant ... EcmaScript 3
  15. 15. Objectif de cette heure● Savoir deboguer avec 3fondamentaux● Développer Orienté Objet
  16. 16. Notions de base● Portée des variables (var + function)● Function()● Contexte (this)
  17. 17. Portée des variables 1 closure = 1 portéeClosure = function() { PORTÉE}
  18. 18. Portée des variablestest1 = function() { var x = 1; test2 = function() { var x = 2; test3 = function() { var x = 3; console.log(x); // 3 }(); }(); console.log(x); // 1}();console.log(x); // undefined
  19. 19. Boucle infinie !function genericFunctionName() { for(i = 0; i < myArray.length; i++) { .... }}for(i = 0; i < 10; i++) { genericFunctionName();}
  20. 20. Boucle corrigéefunction genericFunctionName() { for( var i = 0; i<myArray.length;i++){ .... }}for(i = 0; i < 10; i++) { genericFunctionName();}
  21. 21. Application pratique(function() { var privateVariable = true; function init() { console.log( privateVariable ); }}())init(); // trueconsole.log(privateVariable);//undefined
  22. 22. Créer un scope1 function() { var privateVariable = true; console.log( privateVariable ); } => parse error
  23. 23. Créer un scope2( function() { var privateVariable = true; console.log( privateVariable ); }) => rien
  24. 24. Créer un scope3( function() { var privateVariable = true; console.log( privateVariable ); })() => true
  25. 25. Notions de base✓ Portée des variables (var + function)● Function()● Contexte (this)
  26. 26. Function()● function action() {}● action = function() {}● action();
  27. 27. function action()Toujours globaleaction(); // true..function action() { console.log(true);}
  28. 28. function action()TROP globaleaction(); // a !== 1if( a === 1) { function action() { console.log(a === 1); }} else { function action() { console.log(a !== 1); }}
  29. 29. var action = function() Permet de choisir la portée
  30. 30. Peut sauto-exécuterautoInit = function() { console.log(hello world);}();// hello world
  31. 31. return function()var onDOMEvent = function( el, ev, callback) { if(document.body.attachEvent){ el.attachEvent(on+ev, callback); } else { el.addEventListener( ev, callback); }};
  32. 32. return function()var onDOMEvent =function( el, ev, callback) { if(document.body.attachEvent return function(el, ev, callback) {element.attachEvent(on+event, callback); }; else return function(el, ev, callback) { el.addEventListener( ev, callback); };}();
  33. 33. Function.prototype var myClass = function () { this.publicVariable = 0;}; myClass.prototype = { decrement:function() { console.log( --this.publicVariable ); }, increment:function() { console.log( ++this.publicVariable ); }};
  34. 34. Function.prototype var myClass = function () {}; myClass.prototype = { decrement:function() {}, increment:function() {}};myObject = new myClass();myObject.decrement(); // -1myObject.decrement(); // -2myObject2 = new myClass();myObject2.increment(); // 1myObject2.increment(); // 2
  35. 35. HéritagemySubClass = function() { this.publicVariable = 10;};mySubClass.prototype = myClass.prototype; mySubClass.prototype.constructor =mySubClass;myObject2 = new mySubClass();myObject2.increment(); // 11myObject2.increment(); // 12
  36. 36. Renvoi dobjetsmyClass = function () { var privateVariable = 0; // public methods return { decrement:function() { console.log( --privateVariable ); }, increment:function() { console.log( ++privateVariable ); } }};
  37. 37. Renvoi dobjets myClass = function () { return { decrement:function() { }, increment:function() { } } };myObject = myClass();myObject.decrement(); // -1myObject.decrement(); // -2myObject2 = myClass();myObject2.increment(); // 1myObject2.increment(); // 2
  38. 38. Function === ObjectmyClass = function () { return { publicMethod:function() {} }};myClass.staticMethod = function() {};myObject = myClass();myObject.staticMethod(); // ErrormyClass.publicMethod(); // Error
  39. 39. Portée + déclarationvar queries = [ new XHR(url1), newXHR(url2), new XHR(url3)];for(var i = 0; i < queries.length; i++) { queries[i].onload = function() { console.log( i ); // référence };}queries[ 0 ].onload(); // 3!queries[ 1 ].onload(); // 3!queries[ 2 ].onload(); // 3!
  40. 40. Portée + déclarationfor(var i = 0; i < queries.length; i++) { queries[i].onload = function(i) { return function() { console.log( i ); // valeur }; }(i); // exécution immédiate}// plus tard ...queries[ 0 ].onload(); // 0queries[ 1 ].onload(); // 1queries[ 2 ].onload(); // 2
  41. 41. Notions de base✓ Portée des variables (var + function)✓ Function()● Contexte (this)
  42. 42. Contextethis = contexte dexécution
  43. 43. Contexte - facilemyClass = function() { this.id = myClass;}myClass.prototype = { action:function() { console.log(this.id); }};myObject = new myClass();myObject.action(); // myclass
  44. 44. Contexte - DOMmyClass = function() { this.id = myClass;}myClass.prototype = { action:function() { console.log(this.id); }};myObject = new myClass();document.body.onclick = myObject.action;// document.body.id
  45. 45. Contexte – tous objetsmyClass = function() { this.id = myClass;}myClass.prototype = { action:function() { console.log(this.id); }};myObject = new myClass();myEvent = { id:myObj2}myEvent.onfire = myObj.action;myEvent.onfire(); // myObj2
  46. 46. Contexte – fix natifmyClass = function() { this.id = myClass;}myClass.prototype = { action:function() { console.log(this.id); }};myObject = new myClass();myEvent = { id:myObj2}myEvent.onfire = myObj.action;myEvent.onfire.call( myObject ); // myClass
  47. 47. Contexte: sans prototypemyClass = function() { this.id = myClass; var me = this; return { action:function() { console.log(me.id); } }}; myObject = myClass(); document.body.onclick = myObject.action; // myClass
  48. 48. Notions de base✓ Portée des variables (var + function)✓ Function()✓ Contexte (this)
  49. 49. Développement durable● Pollution du scope global● Programmation Orienté Objet
  50. 50. Pollution globale
  51. 51. Pollution globale 2 exemples complètement au hasard●Gmail : 33 variables globales (450K lignesde code)● Lemonde.fr : 480 variables globales
  52. 52. Actions✗ Function action() {}✓ var action = function() { var myVariable; }✓namespaces
  53. 53. Namespacesvar MY_APP_NAMESPACE = {};MY.doSomething = function() {};MY.utils = {};MY.utils.XHR = function() {}
  54. 54. Namespaces - astucerécupérer ou créer un namespaceMY = windows.MY || {};MY.utils = MY.utils || {};
  55. 55. Création dun scopeRappel(function(){ // début de scope local var private = true;// ici je suis chez moi})(); // fin de scope local
  56. 56. ProgrammationOrientéObjet
  57. 57. Tout est objet"abc".indexOf(a);[1,2,3].slice(1);13.3714 .toFixed(1);/[0-9]/g.test(10/11/2011);
  58. 58. POO Classique new, class, static,public, private,__construct, $this, const,self::, extends, protected,parent::, abstract, final,interface, implements,instanceof
  59. 59. POO JSnew (optionel)this (particulier)instanceof
  60. 60. Interface publique(function(){ // début de scope local // accès global au constructeur MY.utils.XHR = function( url ) { this.url = url; }; // méthodes ou variable statiques MY.utils.XHR.staticVariable = true;})(); // fin de scope local
  61. 61. Raccourci(function(){ // début de scope local // raccourci vers le namespaceutilisé var self = MY.utils.XHR; self.staticVariable = true;})(); // fin de scope local
  62. 62. privées communes(function(){ // début de scope local// accès global au constructeurMY.utils.XHR = function( url ) { this.url = url; currentInstances.push( this );};var currentInstances = [];})(); // fin de scope local
  63. 63. privées par instance(function(){ // début de scope local// accès global au constructeurMY.utils.XHR = function( url ) { var isConnecting = true; return { query:function() { if( isConnecting) return false; } }};})(); // fin de scope local
  64. 64. Combo : factory pattern(function(){MY.utils.XHR = function( ) { throw new Error( please use .getInstance() );};// constructeur privévar XHR = function(url) { console.log(url); };// liste privéevar currentInstances = {};// factoryMY.utils.XHR.getInstance = function( url ) { if(currentInstances[url]) return currentInstances[url]; else return currentInstances[url] = new XHR( url);}})();
  65. 65. Tout est émulable● programmation événementielle● tests unitaires et fonctionnels● patterns classiques : MVC, observer,facade, proxy, singleton, factory ...
  66. 66. Conclusion● Javascript est différent, apprenez le● OOP réutilisable
  67. 67. Questions ?Jean-pierre VINCENTbraincracking.org@theystolemynick

×