Download - Javascript & tools
![Page 1: Javascript & tools](https://reader034.vdocuments.site/reader034/viewer/2022052622/558df3001a28ab91598b45b7/html5/thumbnails/1.jpg)
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
![Page 2: Javascript & tools](https://reader034.vdocuments.site/reader034/viewer/2022052622/558df3001a28ab91598b45b7/html5/thumbnails/2.jpg)
Intel AppUpSM
Développer avec JavaScript
David Catuhe / Microsoft
http://blogs.msdn.com/
eternalcoding
David Rousset / Microsoft
http://blogs.msdn.com/davrous
![Page 3: Javascript & tools](https://reader034.vdocuments.site/reader034/viewer/2022052622/558df3001a28ab91598b45b7/html5/thumbnails/3.jpg)
Intel AppUpSMIntel AppUpSM
• Un peu d’histoire• Fondamentaux• Les outils• Quelques frameworks utiles…
Agenda
![Page 4: Javascript & tools](https://reader034.vdocuments.site/reader034/viewer/2022052622/558df3001a28ab91598b45b7/html5/thumbnails/4.jpg)
Intel AppUpSM
Un peu d’histoire
![Page 5: Javascript & tools](https://reader034.vdocuments.site/reader034/viewer/2022052622/558df3001a28ab91598b45b7/html5/thumbnails/5.jpg)
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
![Page 6: Javascript & tools](https://reader034.vdocuments.site/reader034/viewer/2022052622/558df3001a28ab91598b45b7/html5/thumbnails/6.jpg)
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
![Page 7: Javascript & tools](https://reader034.vdocuments.site/reader034/viewer/2022052622/558df3001a28ab91598b45b7/html5/thumbnails/7.jpg)
Intel AppUpSM
Fondamentaux
![Page 8: Javascript & tools](https://reader034.vdocuments.site/reader034/viewer/2022052622/558df3001a28ab91598b45b7/html5/thumbnails/8.jpg)
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
![Page 9: Javascript & tools](https://reader034.vdocuments.site/reader034/viewer/2022052622/558df3001a28ab91598b45b7/html5/thumbnails/9.jpg)
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); }};
![Page 10: Javascript & tools](https://reader034.vdocuments.site/reader034/viewer/2022052622/558df3001a28ab91598b45b7/html5/thumbnails/10.jpg)
Intel AppUpSM
Démonstration
Hello world.js
(et accessoirement découverte de qUnit.js)
10
![Page 11: Javascript & tools](https://reader034.vdocuments.site/reader034/viewer/2022052622/558df3001a28ab91598b45b7/html5/thumbnails/11.jpg)
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);};
![Page 12: Javascript & tools](https://reader034.vdocuments.site/reader034/viewer/2022052622/558df3001a28ab91598b45b7/html5/thumbnails/12.jpg)
Intel AppUpSM
Démonstration
Mise en place d’un modèle objet
12
![Page 13: Javascript & tools](https://reader034.vdocuments.site/reader034/viewer/2022052622/558df3001a28ab91598b45b7/html5/thumbnails/13.jpg)
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
![Page 14: Javascript & tools](https://reader034.vdocuments.site/reader034/viewer/2022052622/558df3001a28ab91598b45b7/html5/thumbnails/14.jpg)
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
![Page 15: Javascript & tools](https://reader034.vdocuments.site/reader034/viewer/2022052622/558df3001a28ab91598b45b7/html5/thumbnails/15.jpg)
Intel AppUpSM
Démonstration
Amusons nous avec les variables et les portées
15
![Page 16: Javascript & tools](https://reader034.vdocuments.site/reader034/viewer/2022052622/558df3001a28ab91598b45b7/html5/thumbnails/16.jpg)
Intel AppUpSM
Les outils
![Page 17: Javascript & tools](https://reader034.vdocuments.site/reader034/viewer/2022052622/558df3001a28ab91598b45b7/html5/thumbnails/17.jpg)
Intel AppUpSMIntel AppUpSM
Les barres F12 des navigateurs• Natif dans IE9/10 et Chrome• Via Firebug dans Firefox• Via DragonFly pour Opera
Les outils
![Page 18: Javascript & tools](https://reader034.vdocuments.site/reader034/viewer/2022052622/558df3001a28ab91598b45b7/html5/thumbnails/18.jpg)
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
![Page 19: Javascript & tools](https://reader034.vdocuments.site/reader034/viewer/2022052622/558df3001a28ab91598b45b7/html5/thumbnails/19.jpg)
Intel AppUpSM
Démonstration
Expérience de debug et de profiling avec JavaScript
19
![Page 20: Javascript & tools](https://reader034.vdocuments.site/reader034/viewer/2022052622/558df3001a28ab91598b45b7/html5/thumbnails/20.jpg)
Intel AppUpSM
Quelques frameworks utiles
![Page 21: Javascript & tools](https://reader034.vdocuments.site/reader034/viewer/2022052622/558df3001a28ab91598b45b7/html5/thumbnails/21.jpg)
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…
![Page 22: Javascript & tools](https://reader034.vdocuments.site/reader034/viewer/2022052622/558df3001a28ab91598b45b7/html5/thumbnails/22.jpg)
Intel AppUpSM
Questions ?
David Catuhe : [email protected] - http://blogs.msdn.com/eternalcoding
David Rousset : [email protected] – http://blogs.msdn.com/davrous