javascript & tools

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

davca@microsoft.com

David Rousset / Microsoft

http://blogs.msdn.com/davrous

davrous@microsoft.com

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 : davca@microsoft.com - http://blogs.msdn.com/eternalcoding

David Rousset : davrous@microsoft.com – http://blogs.msdn.com/davrous