Embed Size (px)
DESCRIPTION
Decouvrez les particularités de JavaScript qui vous aideront à débogguer sans craindre ce langage aujourd'hui indispensable.- la portée des variables et comment ne pas polluer l'espace global- comprendre le mot clé this- les particularités des fonctions- introduction aux namespacesLoin de la théorie vous aurez des explications pratiques et des démos de code ainsi que les bonnes pratiques.
Citation preview
Javascript
Les fondamentaux
Jean-pierre VINCENT (indépendant) Pierre lagarde (Microsoft)
Qui ça ?Jean-pierre VINCENT
braincracking.org (veille techno)@theystolemynick
12 ans de WebConsultant, formateur, expertise
Pourquoi Javascript ?
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
Mauvaise réputation
parseInt('06'); // 6parseInt('08'); // 0
wftjs.com
Mauvaise réputation
typeof NaN // numberNaN === NaN // false
typeof null // objectnull instanceof Object // false
wftjs.com
Mauvaise réputation
(1.7976931348623157e+308 ===1.7976931348623158e+308 )// true!
alert(111111111111111111111); // alerts 111111111111111110000
9999999999999999 //=> 10000000000000000
wftjs.com
APIs● DOM (window.document)
● Node
● WinRT
● ...
Compliqué ?
Différent !
Historique court● Né pendant la guerre (95)● En quelques semaines● Influence Erlang, Lisp, Python, Askell
IE et Netscape d'accord pourEcmaScript 3
Evolution
●EcmaScript 5●Harmony●EcmaScript.Next●EcmaScript.Next.Next
En attendant ...
EcmaScript 3
Objectifs
●Portée des variables (var + function)
●Contexte (this)
●Function()
Portée des variables
1 closure = 1 portée
Closure = function() {PORTÉE
}
Portée des variablestest1 = function() {
var x = 1;
console.log(x); // 1}();console.log(x); // undefined
Portée des variablestest1 = function() {
var x = 1;test2 = function() {var x = 2;
console.log(x); // 2}();console.log(x); // ?
}();console.log(x); // undefined
Portée des variablestest1 = function() {
var x = 1;test2 = function() {var x = 2;
console.log(x); // 2}();console.log(x); // 1
}();console.log(x); // undefined
Portée des variablestest1 = function() {
var x = 1;test2 = function() {var x = 2;test3 = function() {console.log(x); // 2}();console.log(x); // 2}();console.log(x); // 1
}();console.log(x); // undefined
Démo « porté et boucle »
Morales
1 Toujours utiliser var
Application pratique
Démo « module pattern »
Créer un scope1/3 : fonction anonyme
function() {var privateVariable = true;console.log( privateVariable );
}
Créer un scope1/3 : fonction anonyme
function() {var privateVariable = true;console.log( privateVariable );
}=> parse error
Créer un scope2/3 : parler gentiment au parser
( function() {var privateVariable = true;console.log( privateVariable );
})=> rien
Créer un scope3/3 : auto-exécution
( function() {var privateVariable = true;console.log( privateVariable );
})()=> true
Application pratique
(function() {var privateVariable = true;window.init = function() {
console.log( privateVariable );}
}())
init(); // trueconsole.log(privateVariable);//undefined
Morales
1 Toujours utiliser var2 Utiliser le pattern module
Contexte
this = contexte d'exécution
Contexte
Démo « contexte »
Contexte - DOMmyClass = function() {
this.id = 'myClass';this.getId = function() {
console.log(this.id);};
};
myObject = new myClass();document.body.onclick = myObject.getId;// document.body.id
Contexte – fix portéemyClass = function() {
this.id = 'myClass';var me = this;this.getId = function() {
console.log(me.id);};
};myObject = myClass();
document.body.onclick = myObject.action;// 'myClass'
Contexte – fix portée
Démo du fix
Morales
1 Toujours utiliser var2 Utiliser le pattern module3 Verrouiller le contexte
Function()Déclarations● function action() {}
●action = function() {}
Function()Déclarations● function action() {}
●action = function() {}
●Exécution action();
Function()
Un petit jeu ?
function action()Le hoisting, c'est pratique
action(); // true
function action() { console.log(true);}
function action()Le hoisting, c'est dangereuxif( 1 === 1) { function action() { console.log('1 === 1'); }} else { function action() { console.log('1 !== 1'); }}action(); // 1 !== 1
function action()Implicitement sensible à la portée
(function() {function action() {
console.log('action');}
}())action(); // undefined
var action = function()
Plus explicite donc moins dangereux
Morales
1 Toujours utiliser var2 Utiliser le pattern module3 Verrouiller le contexte4 déclarer ses fonction avec var action = function() { }
Avant la Démo « mise en pratique »
● Utilisation des écrasements de fonction
Utilisation des écrasements de fonction
var bind = function( el, ev, callback) { if(document.body.attachEvent){
el.attachEvent('on'+ev, callback); } else {
el.addEventListener( ev, callback);}
};
Le test est fait à chaque exécution
return function()var bind =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); };}();
Démo « mise en pratique »
Problème : écouter la liste d'éléments
Teasing : 17h30 amphi Havane
OOJS, bonnes pratiques...
Conclusion
Javascript est différent, apprenez le
Questions ?Jean-pierre VINCENTbraincracking.org@theystolemynick
RDV maintenant :stand Generative Objects(N° 55 à côté HP)
