Successfully reported this slideshow.

Javascript : fondamentaux et OOP

2

Share

Upcoming SlideShare
Reasoning about laziness
Reasoning about laziness
Loading in …3
×
1 of 68
1 of 68

Javascript : fondamentaux et OOP

2

Share

Download to read offline

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

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

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Javascript : fondamentaux et OOP

  1. 1. Javascript Les fondamentaux La POO Jean-pierre VINCENT
  2. 2. Qui ça ? Jean-pierre VINCENT braincracking.org (veille techno) @theystolemynick 10 ans de Web Consultant, 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éputation parseInt('06'); // 6 parseInt('08'); // 0 wftjs.com
  7. 7. Mauvaise réputation typeof NaN // number NaN === NaN // false typeof null // object null instanceof Object // false wftjs.com
  8. 8. Mauvaise réputation (1.7976931348623157e+308 === 1.7976931348623158e+308 )// true! alert(111111111111111111111); // alerts 111111111111111110000 9999999999999999 //=> 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 d'accord 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 3 fondamentaux ● 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ée Closure = function() { PORTÉE }
  18. 18. Portée des variables test1 = 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ée function 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(); // true console.log(privateVariable);//undefined
  22. 22. Créer un scope 1 function() { var privateVariable = true; console.log( privateVariable ); } => parse error
  23. 23. Créer un scope 2 ( function() { var privateVariable = true; console.log( privateVariable ); }) => rien
  24. 24. Créer un scope 3 ( 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 globale action(); // true .. function action() { console.log(true); }
  28. 28. function action() TROP globale action(); // a !== 1 if( 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 s'auto-exécuter autoInit = 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(); // -1 myObject.decrement(); // -2 myObject2 = new myClass(); myObject2.increment(); // 1 myObject2.increment(); // 2
  35. 35. Héritage mySubClass = function() { this.publicVariable = 10; }; mySubClass.prototype = myClass.prototype; mySubClass.prototype.constructor = mySubClass; myObject2 = new mySubClass(); myObject2.increment(); // 11 myObject2.increment(); // 12
  36. 36. Renvoi d'objets myClass = function () { var privateVariable = 0; // public methods return { decrement:function() { console.log( --privateVariable ); }, increment:function() { console.log( ++privateVariable ); } } };
  37. 37. Renvoi d'objets myClass = function () { return { decrement:function() { }, increment:function() { } } }; myObject = myClass(); myObject.decrement(); // -1 myObject.decrement(); // -2 myObject2 = myClass(); myObject2.increment(); // 1 myObject2.increment(); // 2
  38. 38. Function === Object myClass = function () { return { publicMethod:function() {} } }; myClass.staticMethod = function() {}; myObject = myClass(); myObject.staticMethod(); // Error myClass.publicMethod(); // Error
  39. 39. Portée + déclaration var queries = [ new XHR('url1'), new XHR('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éclaration for(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(); // 0 queries[ 1 ].onload(); // 1 queries[ 2 ].onload(); // 2
  41. 41. Notions de base ✓ Portée des variables (var + function) ✓ Function() ● Contexte (this)
  42. 42. Contexte this = contexte d'exécution
  43. 43. Contexte - facile myClass = function() { this.id = 'myClass'; } myClass.prototype = { action:function() { console.log(this.id); } }; myObject = new myClass(); myObject.action(); // 'myclass'
  44. 44. Contexte - DOM myClass = 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 objets myClass = 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 natif myClass = 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 prototype myClass = 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 lignes de code) ● Lemonde.fr : 480 variables globales
  52. 52. Actions ✗ Function action() {} ✓ var action = function() { var myVariable; } ✓namespaces
  53. 53. Namespaces var MY_APP_NAMESPACE = {}; MY.doSomething = function() {}; MY.utils = {}; MY.utils.XHR = function() { }
  54. 54. Namespaces - astuce récupérer ou créer un namespace MY = windows.MY || {}; MY.utils = MY.utils || {};
  55. 55. Création d'un scope Rappel (function(){ // début de scope local var private = true; // ici je suis chez moi })(); // fin de scope local
  56. 56. Programmation Orienté 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 JS new (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 namespace utilisé 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 constructeur MY.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 constructeur MY.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ée var currentInstances = {}; // factory MY.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 VINCENT braincracking.org @theystolemynick

×