Le document traite des fondamentaux de JavaScript, en expliquant son utilisation omniprésente dans divers environnements comme les navigateurs, les serveurs et les applications mobiles. Il aborde des concepts clés tels que la portée des variables, les closures et le mécanisme 'this', tout en fournissant des démonstrations pratiques et des bonnes pratiques de programmation. L'auteur, Jean-Pierre Vincent, souligne l'importance d'apprendre JavaScript en raison de ses caractéristiques uniques et de son évolution au fil des ans.

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)