36
Javascript pas à pas, au trot, puis au grand galop ! Cyril Durand Consultant indépendant sur JavaScript ASP.net Administrateur et développeur CodeS SourceS

Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Embed Size (px)

Citation preview

Page 1: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Javascript pas à pas, au trot, puis au grand galop !

Cyril DurandConsultant indépendant sur JavaScript & ASP.net Administrateur et développeur CodeS-SourceShttp://blogs.developpeur.org/Cyril/

Page 2: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

CodeS-SourceS

Communauté francophone des développeurs18 sites, un par langage+ 1 000 000 membres +35 millions de lignes de codesNombreux sites satellites :

Blogs.CodeS-SourceS.com Search.CodeS-SourceS.com Files.CodeS-SourceS.com Emploi.CodeS-SourceS.comwww.TechnoS-SourceS.com

www.CodeS-SourceS.com

VENEZ NOUS RENCONTRER AU VILLAGE COMMUNAUTAIRE …

Page 3: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Agenda

JavaScript : un langage incomprisPrototype et constructorMicrosoft Ajax LibraryLe futur de JavaScriptTips & tricks : retour d’expérience

Page 4: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Historique JavaScript

Décembre 1995 :Netscape 2.0LiveScript => JavaScript

1996 :JScriptInternet Explorer 3

1998 : Standardisation ECMA => ECMA-262 EcmaScript

1999 :ECMAScript 3ème édition => JavaScript 1.5

Page 5: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Un vrai langage !

Pas juste un jouet pour la « weberie »

Langage de script / interprétéDynamiqueOrienté prototypeQuelques concepts de langage fonctionnel

Page 6: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

6 Types de base

NumberUn seul type : 64 bits à virgule flottante (double)

StringImmutable

Null et Undefined null : valeur d’une variable qui ne vaut pas quelque choseundefined : valeur d’une variable non assigné ou non déclaré

BooleanObject

Page 7: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Boolean

true ou falseTout ce qui n’est pas faux est évalué comme vrai :

false0‘’NaNInfinityundefinednull

Page 8: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

typeof, === et ||

typeofRetourne le type de base

=== (opérateur d’égalité strict)Vérifie la valeur et le type

|| retourne la première valeur non fausse

Page 9: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Gestion des erreurs

Page 10: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Function 1/6Déclaration :

Fonctions anonymes :

Constructeur de fonction

Page 11: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Function 2/6

add variable global mal

Page 12: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Function 3/6

Page 13: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Function 4/6

Le this se rapporte au contexte appelant

Page 14: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Function 5/6

apply et callMéthodes de l’objet Functionpermettent de changer le contexte appelant

Page 15: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Function 6/6

Portée de variable au niveau de la fonction

closure

Page 16: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Object 1/2

Conteneur de paire clé/valeurTableau associatifDictionary<String, Object> / HashTableClé de type string

Non triéHashmyObject.name ou myObject[‘name’]Expando attribute

Un tableau (Array) est un object !

Page 17: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Object 2/2

Page 18: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Création d’objets

Démo

Page 19: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Prototype 1/2

Chaque objet a un lien caché vers son prototypeL’instance du prototype est partagé entre toutes les instances du type

Person

Person.prototype

• get_firstName()• set_firstName(value)• speak()

Possibilité de modifier le prototype à n’importe quel instant

Y compris sur les types natifs

•_firstName

Page 20: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Prototype 2/2

Le prototype est un objetIl peut contenir un objet contenant un prototypeChainage de prototypesNotion d’héritage

Developper

Developper.prototype (Person)

Person.prototype

• get_firstName()• set_firstName(value)• speak()

• get_language()• set_language(value)• code()p.speak()

p.prototype.speak()p.prototype.prototype.speak()

•_firstName

•_language

Page 21: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Closure Vs Prototype

  prototype closure

IE7 25 332 ko 568 ms 108 900 ko 976 ms

FF2 39 612 ko 953 ms 56 976 ko 1 236 ms

Opera 9.23 25 008 ko 284 ms 45 882 ko 674 ms

Safari 3.0.3 55 820 ko 240 ms 59 124 ko 333 ms

Création de 100 000 instances de Foo

Page 22: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Prototype

Démo

Page 23: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Microsoft Ajax Library

Framework JavaScriptGratuit Open Source – Microsoft Permissive licenceSimplifie les notions objets Utilisé par ASP.net Ajax

Modifie le prototype de certains objets

Page 24: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Tips & Tricks – le debug

Page 25: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Tips & Tricks

Retour d’expérience

Démo

Page 26: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Microsoft Ajax Library

Démo

Page 27: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

Le futur de JavaScript

JS 1.5

JS 1.6

JS 1.7

JS 1.8JS 2.0

Page 28: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

JavaScript 1.6

Nouvelles méthodes sur les tableauxindexOflastIndexOfeveryFilterForeachmapsome

E4X : manipulation XML dans js

Page 29: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

E4X

Page 30: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

JavaScript 1.7

Firefox 2.0Generator

yieldArray comprehensionfor each (value in obj)

Itère sur les valeurs let

Déclare une variable de la portée des accolades

Valeur de retour multiple

Page 31: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

JS 1.7 - generator

Page 32: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

JS 1.7 Array Comprehension

Page 33: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

JS 1.7 multiple return value

Page 34: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

JS 1.8

Encore en betaFirefox 3.0

Page 35: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

La référence technique

pour les IT Pros :technet.microsoft.com

L’engagement Microsoft pour les

développeurs :msdn.microsoft.com

S’informer - Un portail d’informations, des événements, une newsletter bimensuelle personnalisée

Se former - Des webcasts, des articles techniques, des téléchargements, des forums pour échanger avec vos pairs

Bénéficier de services - Des cursus de formations et de certifications, des offres de support technique

Visual Studio 2008 +

Abonnement MSDN Premium

Abonnement TechNet Plus :

Versions d’éval + 2 incidents support

Page 36: Communauté francophone des développeurs 18 sites, un par langage + 1 000 000 membres +35 millions de lignes de codes Nombreux sites satellites : Blogs.CodeS-SourceS.com

© 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after

the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Votre potentiel, notre passion TM