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

2.
Qui ça ? Jean-pierre VINCENTbraincracking.org (veille techno)@theystolemynick12 ans de WebConsultant, formateur, expertise

3.
Pourquoi Javascript ?

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

5.
Mauvaise réputation

6.
Mauvaise réputationparseInt(06); // 6parseInt(08); // 0 wftjs.com

7.
Mauvaise réputationtypeof NaN // numberNaN === NaN // falsetypeof null // objectnull instanceof Object // false wftjs.com

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

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

10.
Compliqué ?

11.
Différent !

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

13.
Evolution● EcmaScript 5● Harmony● EcmaScript.Next● EcmaScript.Next.Next

14.
En attendant ... EcmaScript 3

15.
ObjectifsPortée des variables (var + function)●Contexte (this)●Function()●

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

17.
Portée des variablestest1 = function() { var x = 1; console.log(x); // 1}();console.log(x); // undefined

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

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

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

21.
Démo « porté et boucle »

22.
Morales1 Toujours utiliser var

23.
Application pratiqueDémo « module pattern »

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

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

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

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

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

29.
Morales1 Toujours utiliser var2 Utiliser le pattern module

30.
Contextethis = contexte dexécution

31.
ContexteDémo « contexte »

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

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

34.
Contexte – fix portéeDémo du fix

35.
Morales1 Toujours utiliser var2 Utiliser le pattern module3 Verrouiller le contexte

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

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

38.
Function()Un petit jeu ?

39.
function action()Le hoisting, cest pratiqueaction(); // truefunction action() { console.log(true);}

40.
function action()Le hoisting, cest dangereuxif( 1 === 1) { function action() { console.log(1 === 1); }} else { function action() { console.log(1 !== 1); }}action(); // 1 !== 1

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

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

43.
Morales1 Toujours utiliser var2 Utiliser le pattern module3 Verrouiller le contexte4 déclarer ses fonction avec varaction = function() { }

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

45.
Utilisation des écrasements de fonctionvar 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

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

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

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

49.
ConclusionJavascript est différent, apprenez le

50.
Questions ?Jean-pierre VINCENTbraincracking.org@theystolemynickRDV maintenant :stand Generative Objects(N° 55 à côté HP)