introduction à javascript
DESCRIPTION
JavaScript est désormais omniprésent et rend possible l'écriture d'applications complexes et riches. Mais il est souvent mal connu des développeurs orientés objets classiques comme ceux pratiquant le C#, le Java ou le PHP. Cette session passera donc en revue les bases du langage JavaScript, ses spécificités comme les portées, les closures, le this différent de ce que vous pouvez connaître. Bref, vous verrez qu'il y a des pièges à éviter et qu'il ne faut pas négliger JavaScript. Il est très puissant mais potentiellement différent de ce vous connaissez déjà. Venez apprendre à le respecter avant de le maitriser!TRANSCRIPT
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)