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 namespaces Loin de la théorie vous aurez des explications pratiques et des démos de code ainsi que les bonnes pratiques.

1. Javascript
Les fondamentaux
Jean-pierre VINCENT (indépendant)
Pierre lagarde (Microsoft)

2. Qui ça ?
Jean-pierre VINCENT
braincracking.org (veille techno)
@theystolemynick
12 ans de Web
Consultant, formateur, expertise

4. Pourquoi Javascript ?

5. Présent partout
●
Navigateur
●
Jeux Web (remplace Flash)
●
Mobile (Phonegap ...)
●
Télévisions
●
Serveur (Node.js, ...)
●
Software (Chromeless, ...)
●
OS (JoliCloud, WebOS...)
●
Windows 8 !

6. Mauvaise réputation

7. Mauvaise réputation
parseInt('06'); // 6
parseInt('08'); // 0
wftjs.com

8. Mauvaise réputation
typeof NaN // number
NaN === NaN // false
typeof null // object
null instanceof Object // false
wftjs.com

9. Mauvaise réputation
(1.7976931348623157e+308 ===
1.7976931348623158e+308 )// true!
alert(111111111111111111111); //
alerts 111111111111111110000
9999999999999999 //=> 10000000000000000
wftjs.com

10. APIs
● DOM (window.document)
● Node
● WinRT
● ...

11. Compliqué ?

12. Différent !

13. Historique court
● Né pendant la guerre (95)
● En quelques semaines
● Influence Erlang, Lisp, Python, Askell
IE et Netscape d'accord pour
EcmaScript 3

14. Evolution
●
EcmaScript 5
●
Harmony
●
EcmaScript.Next
●
EcmaScript.Next.Next

15. En attendant ...
EcmaScript 3

16. Objectifs
Portée des variables (var + function)
●
Contexte (this)
●
Function()
●

17. Portée des variables
1 closure = 1 portée
Closure = function() {
PORTÉE
}

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

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

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

21. Portée des variables
test1 = 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

22. Démo « porté et boucle »

23. Morales
1 Toujours utiliser var

24. Application pratique
Démo « module pattern »

25. Créer un scope
1/3 : fonction anonyme
function() {
var privateVariable = true;
console.log( privateVariable );
}

26. Créer un scope
1/3 : fonction anonyme
function() {
var privateVariable = true;
console.log( privateVariable );
}
=> parse error

27. Créer un scope
2/3 : parler gentiment au parser
( function() {
var privateVariable = true;
console.log( privateVariable );
})
=> rien

28. Créer un scope
3/3 : auto-exécution
( function() {
var privateVariable = true;
console.log( privateVariable );
})()
=> true

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

30. Morales
1 Toujours utiliser var
2 Utiliser le pattern module

31. Contexte
this = contexte d'exécution

32. Contexte
Démo « contexte »

33. Contexte - DOM
myClass = function() {
this.id = 'myClass';
this.getId = function() {
console.log(this.id);
};
};
myObject = new myClass();
document.body.onclick = myObject.getId;
// document.body.id

34. Contexte – fix portée
myClass = function() {
this.id = 'myClass';
var me = this;
this.getId = function() {
console.log(me.id);
};
};
myObject = myClass();
document.body.onclick = myObject.action;
// 'myClass'

35. Contexte – fix portée
Démo du fix

36. Morales
1 Toujours utiliser var
2 Utiliser le pattern module
3 Verrouiller le contexte

37. Function()
Déclarations
● function action() {}
action = function() {}
●

38. Function()
Déclarations
● function action() {}
action = function() {}
●
Exécution
●
action();

39. Function()
Un petit jeu ?

40. function action()
Le hoisting, c'est pratique
action(); // true
function action() {
console.log(true);
}

41. function action()
Le hoisting, c'est dangereux
if( 1 === 1) {
function action() {
console.log('1 === 1');
}
} else {
function action() {
console.log('1 !== 1');
}
}
action(); // 1 !== 1

42. function action()
Implicitement sensible à la portée
(function() {
function action() {
console.log('action');
}
}())
action(); // undefined

43. var action = function()
Plus explicite donc moins dangereux

44. Morales
1 Toujours utiliser var
2 Utiliser le pattern module
3 Verrouiller le contexte
4 déclarer ses fonction avec var
action = function() { }

45. Avant la Démo « mise en pratique »
●Utilisation des
écrasements de fonction

46. 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

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

48. Démo « mise en pratique »
Problème : écouter la liste d'éléments

49. Teasing : 17h30 amphi Havane
OOJS, bonnes pratiques...

50. Conclusion
Javascript est différent, apprenez le

51. Questions ?
Jean-pierre VINCENT
braincracking.org
@theystolemynick
RDV maintenant :
stand Generative Objects
(N° 55 à côté HP)