JavascriptLes fondamentaux   Jean-pierre VINCENT (indépendant)   Pierre lagarde (Microsoft)
Qui ça ?     Jean-pierre VINCENTbraincracking.org (veille techno)@theystolemynick12 ans de WebConsultant, formateur, exper...
Pourquoi Javascript ?
Présent partout● Navigateur● Jeux Web (remplace Flash)● Mobile (Phonegap ...)● Télévisions● Serveur (Node.js, ...)● Softwa...
Mauvaise réputation
Mauvaise réputationparseInt(06); // 6parseInt(08); // 0      wftjs.com
Mauvaise réputationtypeof NaN // numberNaN === NaN // falsetypeof null // objectnull instanceof Object // false          w...
Mauvaise réputation(1.7976931348623157e+308 ===1.7976931348623158e+308 )// true!alert(111111111111111111111); //alerts 111...
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 Nets...
Evolution● EcmaScript 5● Harmony● EcmaScript.Next● EcmaScript.Next.Next
En attendant ...   EcmaScript 3
ObjectifsPortée des variables (var + function)●Contexte (this)●Function()●
Portée des variables 1 closure = 1 portéeClosure = 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   ...
Portée des variablestest1 = function() {     var x = 1;     test2 = function() {     var x = 2;    console.log(x); // 2   ...
Portée des variablestest1 = function() {     var x = 1;     test2 = function() {     var x = 2;     test3 = function() {  ...
Démo « porté et boucle »
Morales1 Toujours utiliser var
Application pratiqueDé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 ); }=> pa...
Créer un scope2/3 : parler gentiment au parser( function() {    var privateVariable = true;    console.log( privateVariabl...
Créer un scope3/3 : auto-exécution( function() {     var privateVariable = true;     console.log( privateVariable );})()=>...
Application pratique(function() {     var privateVariable = true;     window.init = function() {          console.log( pri...
Morales1 Toujours utiliser var2 Utiliser le pattern module
Contextethis = contexte dexécution
ContexteDémo « contexte »
Contexte - DOMmyClass = function() {     this.id = myClass;     this.getId = function() {          console.log(this.id);  ...
Contexte – fix portéemyClass = function() {     this.id = myClass;     var me = this;     this.getId = function() {       ...
Contexte – fix portéeDémo du fix
Morales1 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, cest pratiqueaction(); // truefunction action() {    console.log(true);}
function action()Le hoisting, cest dangereuxif( 1 === 1) {  function action() {    console.log(1 === 1);  }} else {  funct...
function action()Implicitement sensible à la portée(function() {     function action() {          console.log(action);    ...
var action = function()Plus explicite donc moins dangereux
Morales1 Toujours utiliser var2 Utiliser le pattern module3 Verrouiller le contexte4 déclarer ses fonction avec varaction ...
Avant la Démo « mise en pratique »     Utilisation des     ●écrasements de fonction
Utilisation des     écrasements de fonctionvar bind = function( el, ev, callback) {  if(document.body.attachEvent){       ...
return function()var bind =function( el, ev, callback) {  if(document.body.attachEvent)     return function(el, ev, callba...
Démo « mise en pratique »Problème : écouter la liste déléments
Teasing : 17h30 amphi Havane  OOJS, bonnes pratiques...
ConclusionJavascript est différent, apprenez le
Questions ?Jean-pierre VINCENTbraincracking.org@theystolemynickRDV maintenant :stand Generative Objects(N° 55 à côté HP)
Introduction à JavaScript
Prochain SlideShare
Chargement dans…5
×

Introduction à JavaScript

566 vues

Publié le

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!

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
566
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
28
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • Introduction à JavaScript

    1. 1. JavascriptLes fondamentaux Jean-pierre VINCENT (indépendant) Pierre lagarde (Microsoft)
    2. 2. Qui ça ? Jean-pierre VINCENTbraincracking.org (veille techno)@theystolemynick12 ans de WebConsultant, formateur, expertise
    3. 3. Pourquoi Javascript ?
    4. 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. 5. Mauvaise réputation
    6. 6. Mauvaise réputationparseInt(06); // 6parseInt(08); // 0 wftjs.com
    7. 7. Mauvaise réputationtypeof NaN // numberNaN === NaN // falsetypeof null // objectnull instanceof Object // false wftjs.com
    8. 8. Mauvaise réputation(1.7976931348623157e+308 ===1.7976931348623158e+308 )// true!alert(111111111111111111111); //alerts 1111111111111111100009999999999999999 //=> 10000000000000000 wftjs.com
    9. 9. APIs● DOM (window.document)● Node● WinRT● ...
    10. 10. Compliqué ?
    11. 11. Différent !
    12. 12. Historique court● Né pendant la guerre (95)● En quelques semaines● Influence Erlang, Lisp, Python, Askell IE et Netscape daccord pour EcmaScript 3
    13. 13. Evolution● EcmaScript 5● Harmony● EcmaScript.Next● EcmaScript.Next.Next
    14. 14. En attendant ... EcmaScript 3
    15. 15. ObjectifsPortée des variables (var + function)●Contexte (this)●Function()●
    16. 16. Portée des variables 1 closure = 1 portéeClosure = function() { PORTÉE}
    17. 17. Portée des variablestest1 = function() { var x = 1; console.log(x); // 1}();console.log(x); // undefined
    18. 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. 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. 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. 21. Démo « porté et boucle »
    22. 22. Morales1 Toujours utiliser var
    23. 23. Application pratiqueDémo « module pattern »
    24. 24. Créer un scope1/3 : fonction anonyme function() { var privateVariable = true; console.log( privateVariable ); }
    25. 25. Créer un scope1/3 : fonction anonyme function() { var privateVariable = true; console.log( privateVariable ); }=> parse error
    26. 26. Créer un scope2/3 : parler gentiment au parser( function() { var privateVariable = true; console.log( privateVariable );})=> rien
    27. 27. Créer un scope3/3 : auto-exécution( function() { var privateVariable = true; console.log( privateVariable );})()=> true
    28. 28. Application pratique(function() { var privateVariable = true; window.init = function() { console.log( privateVariable ); }}())init(); // trueconsole.log(privateVariable);//undefined
    29. 29. Morales1 Toujours utiliser var2 Utiliser le pattern module
    30. 30. Contextethis = contexte dexécution
    31. 31. ContexteDémo « contexte »
    32. 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. 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. 34. Contexte – fix portéeDémo du fix
    35. 35. Morales1 Toujours utiliser var2 Utiliser le pattern module3 Verrouiller le contexte
    36. 36. Function()Déclarations● function action() {}action = function() {}●
    37. 37. Function()Déclarations● function action() {}action = function() {}●Exécution● action();
    38. 38. Function()Un petit jeu ?
    39. 39. function action()Le hoisting, cest pratiqueaction(); // truefunction action() { console.log(true);}
    40. 40. function action()Le hoisting, cest dangereuxif( 1 === 1) { function action() { console.log(1 === 1); }} else { function action() { console.log(1 !== 1); }}
    41. 41. function action()Implicitement sensible à la portée(function() { function action() { console.log(action); }}())action(); // undefined
    42. 42. var action = function()Plus explicite donc moins dangereux
    43. 43. Morales1 Toujours utiliser var2 Utiliser le pattern module3 Verrouiller le contexte4 déclarer ses fonction avec varaction = function() { }
    44. 44. Avant la Démo « mise en pratique » Utilisation des ●écrasements de fonction
    45. 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. 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. 47. Démo « mise en pratique »Problème : écouter la liste déléments
    48. 48. Teasing : 17h30 amphi Havane OOJS, bonnes pratiques...
    49. 49. ConclusionJavascript est différent, apprenez le
    50. 50. Questions ?Jean-pierre VINCENTbraincracking.org@theystolemynickRDV maintenant :stand Generative Objects(N° 55 à côté HP)

    ×