Javascript & tools

840 views
795 views

Published on

Javascript Presentation by David Rousset & David Catuhe (Microsoft Developer Evangelists) at the Intel HTML5 Webinar Series

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
840
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript & tools

  1. 1. Slim Soussi Vladimir Kostarev David Catuhe David Rousset Intel Intel Microsoft Microsoft
  2. 2. David Catuhe / Microsoft David Rousset / Microsofthttp://blogs.msdn.com/eternalcoding http://blogs.msdn.com/davrousdavca@microsoft.com davrous@microsoft.com
  3. 3. Agenda• Un peu d’histoire• Fondamentaux• Les outils• Quelques frameworks utiles…
  4. 4. Un peu d’histoire• Développé par Brendan Eich de Netscape en 1995• Nom de code Mocha puis renommé en LiveScript et finalement en JavaScript• Première version avec Netscape 2.0 en Septembre 1995• Peu de rapport avec Java (choix du nom surtout dicté par des raisons marketings de l’époque)• Novembre 1996 : Soumission à l’ECMA et apparition de l’ECMAScript
  5. 5. Un peu d’histoire• Juin 1997 : Première version de l’ECMAScript• Juin 2011 : ECMAScript 5.1• La marque « JavaScript » est sous copyright de Oracle• JavaScript est sorti du pur web: • Développement coté serveur (nodeJS) • Développement applicatif (Windows 8) 6
  6. 6. Fondamentaux de JavaScriptJavaScript est :• Construit autour de fonctions• Un langage à base de prototype• Un langage de script (mais pas que…)• Dynamique• Faiblement typé
  7. 7. Fondamentaux de JavaScriptEn JavaScript tout est fonction. Elles servent à :• Faire des fonctions (!!!)• Mimiquer les concepts objets • Constructeurs • Méthodes• Définir des namespaces• Définir la portée PUZZLE.update = function () { for (var index = 0; index < PUZZLE.blocks.length; index++) { var block = PUZZLE.blocks[index]; PUZZLE.updateBlock(block); } }; 9
  8. 8. 10
  9. 9. Fondamentaux de JavaScriptUn langage à base de prototypes :• Principe de clonage d’objets modèles (le prototype)• Délégation des méthodes vers le prototype• « Remplace » classes et héritage this.prototype.add = function (otherVector) { return new Vector2(this.x + otherVector.x, this.y + otherVector.y); }; 11
  10. 10. 12
  11. 11. Fondamentaux de JavaScriptUn langage de script :• Compilé à la volée par les navigateurs modernes (JIT)• Profite des dernières avancées des compilateurs • Multi cores • Optimisations 13
  12. 12. Fondamentaux de JavaScriptUn langage dynamique et faiblement typé :• Les types sont associés aux valeurs et non aux variables• Par exemple : • Une variable x peut être associée à un numérique à un instant et à une chaine de caractères plus tard• Types de valeurs supportés : • Number • String • Boolean • Function • Array • Object 14
  13. 13. 15
  14. 14. Les outilsLes barres F12 des navigateurs• Natif dans IE9/10 et Chrome• Via Firebug dans Firefox• Via DragonFly pour Opera
  15. 15. Les outils• Microsoft Visual Studio 2010 + Web Standards Update• Notepad++ • http://jsfiddle.net/• http://prefixmycss.com/• http://ie.microsoft.com/testdrive/• http://jsonformatter.curiousconcept.com/• http://jslint.com/• http://erik.eae.net/playground/regexp/regexp.html• http://code.google.com/p/jsfuzzer/• http://fmarcia.info/jsmin/test.html• … 18
  16. 16. 19
  17. 17. Quelques frameworks utiles…• jQuery : http://jquery.com/• jQuery UI : http://jqueryui.com/• Modernizr : http://www.modernizr.com/• Qunit : http://qunitjs.com/• YUI : http://developer.yahoo.com/yui/• SproutCore : http://www.sproutcore.com/• Midori : http://www.midorijs.com/• Fleegix : http://js.fleegix.org/• Prototype : http://www.prototypejs.org/• Dojo : http://dojotoolkit.org/• Mootools : http://mootools.net/• MochiKit : http://mochi.github.com/mochikit/• …
  18. 18. David Catuhe : davca@microsoft.com - http://blogs.msdn.com/eternalcoding David Rousset : davrous@microsoft.com – http://blogs.msdn.com/davrous

×