javascript & tools
DESCRIPTION
Javascript Presentation by David Rousset & David Catuhe (Microsoft Developer Evangelists) at the Intel HTML5 Webinar SeriesTRANSCRIPT
Intel AppUpSM
Intel® HTML5 Webinar Series
David CatuheMicrosoft
Slim SoussiIntel
David RoussetMicrosoft
Vladimir Kostarev
Intel
Episode 3: Javascript & Encapsulator
Vendredi, 16 Décembre 2011 à 15h00
Intel AppUpSM
Développer avec JavaScript
David Catuhe / Microsoft
http://blogs.msdn.com/
eternalcoding
David Rousset / Microsoft
http://blogs.msdn.com/davrous
Intel AppUpSMIntel AppUpSM
• Un peu d’histoire• Fondamentaux• Les outils• Quelques frameworks utiles…
Agenda
Intel AppUpSM
Un peu d’histoire
Intel AppUpSMIntel AppUpSM
• 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
Un peu d’histoire
Intel AppUpSM
6
Intel AppUpSM
• 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)
Un peu d’histoire
Intel AppUpSM
Fondamentaux
Intel AppUpSMIntel AppUpSM
JavaScript est :• Construit autour de fonctions• Un langage à base de prototype• Un langage de script (mais pas que…)• Dynamique• Faiblement typé
Fondamentaux de JavaScript
Intel AppUpSM
9
Intel AppUpSM
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
Fondamentaux de JavaScript
PUZZLE.update = function () { for (var index = 0; index < PUZZLE.blocks.length; index++) { var block = PUZZLE.blocks[index];
PUZZLE.updateBlock(block); }};
Intel AppUpSM
Démonstration
Hello world.js
(et accessoirement découverte de qUnit.js)
10
Intel AppUpSM
11
Intel AppUpSM
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
Fondamentaux de JavaScript
this.prototype.add = function (otherVector) { return new Vector2(this.x + otherVector.x, this.y + otherVector.y);};
Intel AppUpSM
Démonstration
Mise en place d’un modèle objet
12
Intel AppUpSM
13
Intel AppUpSM
Un langage de script :• Compilé à la volée par les navigateurs modernes (JIT)• Profite des dernières avancées des compilateurs• Multi cores• Optimisations
Fondamentaux de JavaScript
Intel AppUpSM
14
Intel AppUpSM
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
Fondamentaux de JavaScript
Intel AppUpSM
Démonstration
Amusons nous avec les variables et les portées
15
Intel AppUpSM
Les outils
Intel AppUpSMIntel AppUpSM
Les barres F12 des navigateurs• Natif dans IE9/10 et Chrome• Via Firebug dans Firefox• Via DragonFly pour Opera
Les outils
Intel AppUpSM
18
Intel AppUpSM
• 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• …
Les outils
Intel AppUpSM
Démonstration
Expérience de debug et de profiling avec JavaScript
19
Intel AppUpSM
Quelques frameworks utiles
Intel AppUpSMIntel AppUpSM
• 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/• …
Quelques frameworks utiles…
Intel AppUpSM
Questions ?
David Catuhe : [email protected] - http://blogs.msdn.com/eternalcoding
David Rousset : [email protected] – http://blogs.msdn.com/davrous