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!

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

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)