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

1. Slim Soussi Vladimir Kostarev David Catuhe David Rousset
Intel Intel Microsoft Microsoft

2. David Catuhe / Microsoft David Rousset / Microsoft
http://blogs.msdn.com/eternalcoding http://blogs.msdn.com/davrous
davca@microsoft.com davrous@microsoft.com

3. Agenda
• Un peu d’histoire
• Fondamentaux
• Les outils
• Quelques frameworks utiles…

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

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

8. Fondamentaux de JavaScript
JavaScript est :
• Construit autour de fonctions
• Un langage à base de prototype
• Un langage de script (mais pas que…)
• Dynamique
• Faiblement typé

9. Fondamentaux de JavaScript
En 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

10. 10

11. Fondamentaux de JavaScript
Un 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

12. 12

13. Fondamentaux de JavaScript
Un langage de script :
• Compilé à la volée par les navigateurs modernes (JIT)
• Profite des dernières avancées des compilateurs
• Multi cores
• Optimisations
13

14. Fondamentaux de JavaScript
Un 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

15. 15

17. Les outils
Les barres F12 des navigateurs
• Natif dans IE9/10 et Chrome
• Via Firebug dans Firefox
• Via DragonFly pour Opera

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

19. 19

21. 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/
• …

22. David Catuhe : davca@microsoft.com - http://blogs.msdn.com/eternalcoding
David Rousset : davrous@microsoft.com – http://blogs.msdn.com/davrous