Javascript : fondamentaux et OOP

Javascript

Les fondamentaux
La POO

Jean-pierre VINCENT

Qui ça ?
Jean-pierre VINCENT

braincracking.org (veille techno)
@theystolemynick

10 ans de Web
Consultant, formateur, expertise

Présent partout
● Navigateur
● Jeux Web (remplace Flash)

● Mobile (Phonegap ...)

● Télévisions

● Serveur (Node.js, ...)

● Software (Chromeless, ...)

● OS (JoliCloud, WebOS...)

● Windows 8 !

Mauvaise réputation

parseInt('06'); // 6
parseInt('08'); // 0

wftjs.com


typeof NaN // number
NaN === NaN // false

typeof null // object
null instanceof Object // false

wftjs.com


(1.7976931348623157e+308 ===
1.7976931348623158e+308 )// true!

alert(111111111111111111111); //
alerts 111111111111111110000

9999999999999999 //=> 10000000000000000

APIs
● DOM

● Node

● WinRT

...
●

Historique court
● Né pendant la guerre (95)
● En quelques semaines

● Influence Java, Erlang, Lisp, Python

IE et Netscape d'accord pour
EcmaScript 3

Evolution
● EcmaScript 5
● Harmony

● EcmaScript.Next

● EcmaScript.Next.Next

En attendant ...

EcmaScript 3

Objectif de cette heure

● Savoir deboguer avec 3
fondamentaux

● Développer Orienté Objet

Notions de base
● Portée des variables (var + function)

● Function()

● Contexte (this)

Portée des variables

1 closure = 1 portée

Closure = function() {
PORTÉE
}

Portée des variables
test1 = function() {
var x = 1;
var x = 2;
var x = 3;
console.log(x); // 3
}();
}();
console.log(x); // 1
}();
console.log(x); // undefined

Boucle infinie !
function genericFunctionName() {
for(i = 0; i < myArray.length; i++) {
....
}
}

for(i = 0; i < 10; i++) {
genericFunctionName();
}

Boucle corrigée
function genericFunctionName() {
for( var i = 0; i<myArray.length;i++){
....
}
}

for(i = 0; i < 10; i++) {
genericFunctionName();
}

Application pratique
(function() {
var privateVariable = true;
function init() {
console.log( privateVariable );
}
}())

init(); // true
console.log(privateVariable);//undefined

Créer un scope
1

function() {
}
=> parse error

Créer un scope
2

( function() {
})
=> rien

Créer un scope
3

( function() {
})()
=> true

Notions de base
✓ Portée des variables (var + function)

● Function()

● Contexte (this)

Function()
● function action() {}

● action = function() {}

● action();

function action()

Toujours globale

action(); // true
..
function action() {
console.log(true);
}

function action()
TROP globale
action(); // a !== 1
if( a === 1) {
function action() {
console.log('a === 1');
}
} else {
function action() {
console.log('a !== 1');
}
}

var action = function()

Permet de choisir la portée

Peut s'auto-exécuter
autoInit = function() {
console.log('hello world');
}();
// hello world

return function()
var onDOMEvent =
function( el, ev, callback) {
if(document.body.attachEvent){
el.attachEvent('on'+ev, callback);
} else {
el.addEventListener( ev, callback);
}
};

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);
};
}();

Function.prototype
var myClass = function () {
this.publicVariable = 0;
};

myClass.prototype = {
decrement:function() {
console.log( --this.publicVariable );
},
increment:function() {
console.log( ++this.publicVariable );
}
};

Function.prototype
var myClass = function () {};
decrement:function() {},
increment:function() {}
};
myObject = new myClass();
myObject.decrement(); // -1
myObject2 = new myClass();
myObject2.increment(); // 1

Héritage
mySubClass = function() {
this.publicVariable = 10;
};
mySubClass.prototype = myClass.prototype;
mySubClass.prototype.constructor =
mySubClass;

myObject2 = new mySubClass();

Renvoi d'objets
myClass = function () {
var privateVariable = 0;
// public methods
return {
decrement:function() {
console.log( --privateVariable );
},
increment:function() {
console.log( ++privateVariable );
}
}
};

Renvoi d'objets
return {
decrement:function() { },
increment:function() { }
}
};
myObject = myClass();
myObject2 = myClass();

Function === Object
return {
publicMethod:function() {}
}
};
myClass.staticMethod = function() {};

myObject.staticMethod(); // Error

myClass.publicMethod(); // Error

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!

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

Notions de base

✓ Function()

● Contexte (this)

Contexte

this = contexte d'exécution

Contexte - facile
myClass = function() {
this.id = 'myClass';
}
action:function() {
console.log(this.id);
}
};

myObject.action(); // 'myclass'

Contexte - DOM
}
action:function() {
}
};
document.body.onclick = myObject.action;

// document.body.id

Contexte – tous objets
}
action:function() {
}
};
myEvent = {
id:'myObj2'
}
myEvent.onfire = myObj.action;
myEvent.onfire(); // myObj2

Contexte – fix natif
}
action:function() {
}
};
myEvent = {
id:'myObj2'
}
myEvent.onfire = myObj.action;
myEvent.onfire.call( myObject ); // myClass

Contexte: sans prototype
var me = this;
return {
action:function() {
console.log(me.id);
}
}
};
document.body.onclick = myObject.action;
// 'myClass'

Notions de base

✓ Function()

✓ Contexte (this)

Développement durable

● Pollution du scope global

● Programmation Orienté Objet

Pollution globale
2 exemples complètement au hasard
●Gmail : 33 variables globales (450K lignes
de code)

● Lemonde.fr : 480 variables globales

Actions
✗ Function action() {}

✓ var action = function() {
var myVariable;
}

✓namespaces

Namespaces
var MY_APP_NAMESPACE = {};

MY.doSomething = function() {};

MY.utils = {};

MY.utils.XHR = function() {

}

Namespaces - astuce
récupérer ou créer un namespace
MY = windows.MY || {};

MY.utils = MY.utils || {};

Création d'un scope
Rappel

(function(){ // début de scope local
var private = true;

// ici je suis chez moi

})(); // fin de scope local

Tout est objet
"abc".indexOf('a');

[1,2,3].slice(1);

13.3714 .toFixed(1);

/[0-9]/g.test('10/11/2011');

POO Classique
new, class, static,
public, private,
__construct, $this, const,
self::, extends, protected,
parent::, abstract, final,
interface, implements,
instanceof

POO JS

new (optionel)
this (particulier)
instanceof

Interface publique

// accès global au constructeur
MY.utils.XHR = function( url ) {
this.url = url;
};
// méthodes ou variable statiques
MY.utils.XHR.staticVariable = true;


Raccourci

// raccourci vers le namespace
utilisé
var self = MY.utils.XHR;

self.staticVariable = true;


privées communes

this.url = url;
currentInstances.push( this );
};
var currentInstances = [];


privées par instance
var isConnecting = true;
return {
query:function() {
if( isConnecting)
return false;
}
}
};

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);
}
})();

Tout est émulable
● programmation événementielle

● tests unitaires et fonctionnels

● patterns classiques : MVC, observer,
facade, proxy, singleton, factory ...

Conclusion

● Javascript est différent, apprenez le

● OOP réutilisable

Questions ?

Jean-pierre VINCENT
braincracking.org
@theystolemynick

Javascript : fondamentaux et OOP

Contenu connexe

Tendances (20)

En vedette (20)

Similaire à Javascript : fondamentaux et OOP (20)

Plus de Jean-Pierre Vincent (17)

Javascript : fondamentaux et OOP