javascript : fondamentaux et oop
DESCRIPTION
3 fondamentaux de JavaScript : la portée des variables, les fonctions, le contexte.Application pour la programmation Orienté Objet en JavaScriptTRANSCRIPT
![Page 1: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/1.jpg)
Javascript
Les fondamentauxLa POO
Jean-pierre VINCENT
![Page 2: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/2.jpg)
Qui ça ?Jean-pierre VINCENT
braincracking.org (veille techno)@theystolemynick
10 ans de WebConsultant, formateur, expertise
![Page 3: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/3.jpg)
![Page 4: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/4.jpg)
Pourquoi Javascript ?
![Page 5: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/5.jpg)
Présent partout● Navigateur● Jeux Web (remplace Flash)● Mobile (Phonegap ...)● Télévisions● Serveur (Node.js, ...)● Software (Chromeless, ...)● OS (JoliCloud, WebOS...)● Windows 8 !
![Page 6: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/6.jpg)
Mauvaise réputation
![Page 7: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/7.jpg)
Mauvaise réputation
parseInt('06'); // 6parseInt('08'); // 0
wftjs.com
![Page 8: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/8.jpg)
Mauvaise réputation
typeof NaN // numberNaN === NaN // false
typeof null // objectnull instanceof Object // false
wftjs.com
![Page 9: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/9.jpg)
Mauvaise réputation
(1.7976931348623157e+308 === 1.7976931348623158e+308 )// true!
alert(111111111111111111111); // alerts 111111111111111110000
9999999999999999 //=> 10000000000000000
wftjs.com
![Page 10: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/10.jpg)
APIs● DOM
● Node
● WinRT
●...
![Page 11: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/11.jpg)
Compliqué ?
![Page 12: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/12.jpg)
Différent !
![Page 13: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/13.jpg)
Historique court● Né pendant la guerre (95)● En quelques semaines● Influence Java, Erlang, Lisp, Python
IE et Netscape d'accord pourEcmaScript 3
![Page 14: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/14.jpg)
Evolution
● EcmaScript 5● Harmony● EcmaScript.Next ● EcmaScript.Next.Next
![Page 15: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/15.jpg)
En attendant ...
EcmaScript 3
![Page 16: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/16.jpg)
Objectif de cette heure
● Savoir deboguer avec 3 fondamentaux
● Développer Orienté Objet
![Page 17: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/17.jpg)
Notions de base
● Portée des variables (var + function)
● Function()
● Contexte (this)
![Page 18: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/18.jpg)
Portée des variables
1 closure = 1 portée
Closure = function() {PORTÉE
}
![Page 19: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/19.jpg)
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
![Page 20: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/20.jpg)
Boucle infinie !function genericFunctionName() { for(i = 0; i < myArray.length; i++) { .... }}
for(i = 0; i < 10; i++) { genericFunctionName();}
![Page 21: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/21.jpg)
Boucle corrigéefunction genericFunctionName() { for( var i = 0; i<myArray.length;i++){ .... }}
for(i = 0; i < 10; i++) { genericFunctionName();}
![Page 22: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/22.jpg)
Application pratique(function() {
var privateVariable = true;function init() {
console.log( privateVariable );}
}())
init(); // trueconsole.log(privateVariable);//undefined
![Page 23: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/23.jpg)
Créer un scope1
function() { var privateVariable = true; console.log( privateVariable ); } => parse error
![Page 24: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/24.jpg)
Créer un scope2
( function() { var privateVariable = true; console.log( privateVariable ); }) => rien
![Page 25: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/25.jpg)
Créer un scope3
( function() { var privateVariable = true; console.log( privateVariable ); })() => true
![Page 26: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/26.jpg)
Notions de base
✓ Portée des variables (var + function)
● Function()
● Contexte (this)
![Page 27: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/27.jpg)
Function()
● function action() {}
● action = function() {}
● action();
![Page 28: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/28.jpg)
function action()
Toujours globale action(); // true..function action() { console.log(true);}
![Page 29: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/29.jpg)
function action()TROP globaleaction(); // a !== 1if( a === 1) { function action() { console.log('a === 1'); }} else { function action() { console.log('a !== 1'); }}
![Page 30: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/30.jpg)
var action = function()
Permet de choisir la portée
![Page 31: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/31.jpg)
Peut s'auto-exécuter
autoInit = function() {console.log('hello world');
}();// hello world
![Page 32: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/32.jpg)
return function()var onDOMEvent = function( el, ev, callback) { if(document.body.attachEvent){
el.attachEvent('on'+ev, callback); } else {
el.addEventListener( ev, callback);}
};
![Page 33: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/33.jpg)
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); };}();
![Page 34: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/34.jpg)
Function.prototypevar myClass = function () { this.publicVariable = 0;};
myClass.prototype = { decrement:function() { console.log( --this.publicVariable ); }, increment:function() { console.log( ++this.publicVariable ); }};
![Page 35: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/35.jpg)
Function.prototypevar myClass = function () {};myClass.prototype = { decrement:function() {}, increment:function() {}};myObject = new myClass();myObject.decrement(); // -1myObject.decrement(); // -2myObject2 = new myClass();myObject2.increment(); // 1myObject2.increment(); // 2
![Page 36: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/36.jpg)
Héritage
mySubClass = function() {this.publicVariable = 10;
};mySubClass.prototype = myClass.prototype;mySubClass.prototype.constructor = mySubClass;
myObject2 = new mySubClass();myObject2.increment(); // 11myObject2.increment(); // 12
![Page 37: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/37.jpg)
Renvoi d'objetsmyClass = function () { var privateVariable = 0; // public methods return { decrement:function() { console.log( --privateVariable ); }, increment:function() { console.log( ++privateVariable ); } }};
![Page 38: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/38.jpg)
Renvoi d'objetsmyClass = function () { return { decrement:function() { }, increment:function() { } }};myObject = myClass();myObject.decrement(); // -1myObject.decrement(); // -2myObject2 = myClass();myObject2.increment(); // 1myObject2.increment(); // 2
![Page 39: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/39.jpg)
Function === ObjectmyClass = function () { return { publicMethod:function() {} } };myClass.staticMethod = function() {};
myObject = myClass();myObject.staticMethod(); // Error
myClass.publicMethod(); // Error
![Page 40: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/40.jpg)
Portée + déclarationvar 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!
![Page 41: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/41.jpg)
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(); // 0queries[ 1 ].onload(); // 1queries[ 2 ].onload(); // 2
![Page 42: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/42.jpg)
Notions de base
✓ Portée des variables (var + function)
✓ Function()
● Contexte (this)
![Page 43: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/43.jpg)
Contexte
this = contexte d'exécution
![Page 44: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/44.jpg)
Contexte - facile
myClass = function() {this.id = 'myClass';
}myClass.prototype = {
action:function() {console.log(this.id);
}};
myObject = new myClass();myObject.action(); // 'myclass'
![Page 45: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/45.jpg)
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
![Page 46: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/46.jpg)
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
![Page 47: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/47.jpg)
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
![Page 48: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/48.jpg)
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'
![Page 49: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/49.jpg)
Notions de base
✓ Portée des variables (var + function)
✓ Function()
✓ Contexte (this)
![Page 50: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/50.jpg)
Développement durable
● Pollution du scope global
● Programmation Orienté Objet
![Page 51: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/51.jpg)
Pollution globale
![Page 52: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/52.jpg)
Pollution globale2 exemples complètement au hasard
● Gmail : 33 variables globales (450K lignes de code)
● Lemonde.fr : 480 variables globales
![Page 53: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/53.jpg)
Actions
✗ Function action() {}
✓ var action = function() { var myVariable; }
✓namespaces
![Page 54: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/54.jpg)
Namespaces
var MY_APP_NAMESPACE = {};
MY.doSomething = function() {};
MY.utils = {};
MY.utils.XHR = function() {
}
![Page 55: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/55.jpg)
Namespaces - astuce
récupérer ou créer un namespace
MY = windows.MY || {};
MY.utils = MY.utils || {};
![Page 56: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/56.jpg)
Création d'un scopeRappel
(function(){ // début de scope local var private = true;
// ici je suis chez moi
})(); // fin de scope local
![Page 57: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/57.jpg)
ProgrammationOrientéObjet
![Page 58: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/58.jpg)
Tout est objet
"abc".indexOf('a');
[1,2,3].slice(1);
13.3714 .toFixed(1);
/[0-9]/g.test('10/11/2011');
![Page 59: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/59.jpg)
POO Classique
new, class, static, public, private, __construct, $this, const, self::, extends, protected, parent::, abstract, final, interface, implements, instanceof
![Page 60: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/60.jpg)
POO JS
new (optionel) this (particulier) instanceof
![Page 61: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/61.jpg)
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
![Page 62: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/62.jpg)
Raccourci(function(){ // début de scope local
// raccourci vers le namespace utilisé var self = MY.utils.XHR; self.staticVariable = true;
})(); // fin de scope local
![Page 63: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/63.jpg)
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
![Page 64: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/64.jpg)
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
![Page 65: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/65.jpg)
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);}})();
![Page 66: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/66.jpg)
Tout est émulable
● programmation événementielle
● tests unitaires et fonctionnels
● patterns classiques : MVC, observer, facade, proxy, singleton, factory ...
![Page 67: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/67.jpg)
Conclusion
● Javascript est différent, apprenez le
● OOP réutilisable
![Page 68: Javascript : fondamentaux et OOP](https://reader030.vdocuments.mx/reader030/viewer/2022020803/54826fc0b47959140d8b47ae/html5/thumbnails/68.jpg)
Questions ?
Jean-pierre VINCENTbraincracking.org@theystolemynick