1. 1. A la redcouverte de JavaScriptRaphal Semeteys (raphael.semeteys@atosorigin.com)Consultant Open SourceSolutions Linux 2008 2008 Atos Origin. Document exclusivement rserv usage commercial. Tout ou partie de ce document ne peut tre copi, modifi, diffus ou annot sans accord crit dAtos Origin ou du client.
2. 2. Sommaire Introduction ECMAScript Aspects techniques mconnus Outils libres disponibles Le futur de JavaScript2 Solutions Linux 30 janvier 2008
3. 3. Introduction JavaScript Langage de script, orient objet, Inspir de Self, sans lien avec Java Qui a souffert de la guerre des navigateurs Cr par Netscape, implment par Microsoft DOM incompatibles Mais grce au Web 2.0, il a de nouveau le vent en poupe Cependant, il reste souvent peu (re)connu Dconsidr par les dveloppeurs cot serveur Certaines de ses particularits sont ignores3 Solutions Linux 30 janvier 2008
4. 4. ECMAScriptJavaScript ou ECMAScript ? ECMAScript Spcification de lorganisme de standardisation "Ecma International" en 1997 ECMAScript (ECMA-262) : correspond JavaScript Core (hors browser etDOM) Composants ECMAScript (ECMA-290) : aucune implmentation connue E4X (ECMA-357) : support de XML Les technologies JavaScript et JScript visent dsormais limplmentation dustandard tout en proposant de nouvelles fonctionnalits pas (encore) incluses dansECMAScript. Il existe dautres implmentations4 Solutions Linux 30 janvier 2008
5. 5. ECMAScriptImplmentations ECMAScriptImplmentationditeur Langage LicenceRemarquesPremire implmentation en SpiderMonkeyMozilla CMPL/GPL/LGPL 1995Intgr FirefoxIntgr en 1996 Internet JScriptMicrosoftC++ PropritaireExplorerVersion utilisable uniquement JScript .Net MicrosoftC++ Propritairecot serveurExiste depuis 1998, intgr Java Rhino Mozilla Java MPL/GPL/LGPLSE 6 depuis dcembre 2006 PrestoOpera?Propritaire A remplac Elektra en 2003 ActionScriptAdobe C++ Propritaire Tamarin KDEs JavaScriptKDEC++ GPL Intgr Konqueror en 2000 engine (KJS) Bas sur KJS en 2002 et intgr JavaScriptCoreApple C++ GPL WebKit Slectionn pour Android5 Solutions Linux 30 janvier 2008
6. 6. Aspects techniques mconnusOrientation objet Objets gnriques Dans JavaScript tout est objet ou rfrence un objet Objet gnriquesvar MonObjet = new Object;MonObjet.attribut = "Attribut";MonObjet.fonction = function() {return "Fonction";}MonObjet.attribut;//retourne "Attribut"MonObjet.fonction() ; //retourne "Fonction" Peut tre vu comme un tableau associatifMonObjet[attribut]; //retourne "Attribut" (quivalent MonObjet.attribut)MonObjet[fonction]; : //retourne : function () { return "Fonction"; }MonObjet[fonction](); //retourne "Fonction" (quivalent MonObjet.fonction()) Dclaration simplifievar MonObjet = { attribut: Attribut , fonction: function() { return Fonction; } };6 Solutions Linux 30 janvier 2008
7. 7. Aspects techniques mconnusOrientation objet Constructeurs Constructeur Permet de crer des objets plus complexes Fonction excute la cration de lobjet (via linstruction new) Accessible via la proprit constructor Objet gnriquesfunction Voiture(param) { this.marque = param; this.demarrer = function() {return "vroom !"; } } var maVoiture = new Voiture("Renault"); maVoiture.marque; //contient "Renault" maVoiture.demarrer(); //retourne "vroom !" this : dans le corps du constructeur, fait rfrence lobjet en cours de cration7 Solutions Linux 30 janvier 2008
8. 8. Aspects techniques mconnusOrientation objet Prototypes (1/2) Prototype Objet associ toute fonction pour rfrence par les objets crs Accessibe via la proprit prototype du constructeur Mcanisme de remonte des prototypes Affectation dune proprit non existante : cre au niveau de lobjet Rcupration de la valeur dune proprit (existante ou pas)- si elle existe au niveau de lobjet, sa valeur est retourne- sinon, recherche au niveau du prototype de lobjet- sinon, recherche au niveau du prototype du prototype- etc...- sinon, retourne undefined8 Solutions Linux 30 janvier 2008
9. 9. Aspects techniques mconnusOrientation objet Prototypes (2/2) Permet de modifier dynamiquement les objets crs avec le mme constructeurfunction Voiture(param) {this.marque = param;}var maVoiture = new Voiture("Relault");Chien.prototype.demarrer = function() {return "Vroom !";}maVoiture.demarrer(); //retourne "Vroom !" Egalement valable pour les objets prdfinis de JavaScriptString.prototype.inverser = function() {var inverse = "";for (i = this.length - 1; i >= 0; i--) { inverse += this.charAt(i);}return inverse;}var chaine = "Bonjour !";chaine.inverser(); //retourne "! ruojnoB"9 Solutions Linux 30 janvier 2008
10. 10. Aspects techniques mconnusOrientation objet Hritage par prototypes Hritage par assignation de lobjet pre au prototype du fils Dynamique Hritage via la remonte de la chane des prototypes function Voiture() { this.demarrer = function() { return Vroom !" + this.marque; } } function Sportive(param) { this.marque = param; } Sportive.prototype = new Voiture(); Sportive.prototype.constructor = Voiture; Sportive.prototype.accelerer = function() { return Vroom vroom !!; } var maVoiture = new Sportive("Porsche"); Voiture.prototype.freiner = function() { return "Hiiin !"; } //maVoiture.demarrer() retourne : Vroom ! Porsche //maVoiture.accelerer() retourne : Vroom vroom !! //maVoiture.freiner() retourne : Hiiin !10Solutions Linux 30 janvier 2008
11. 11. Aspects techniques mconnusOrientation objet Hritage par classes Apparition de bibliothques simulant le modle de classes Extention de lobject Function pour y ajouter des mthodes Exemples - Librairie de Douglas Crockford (http://javascript.crockford.com/inheritance.html) - Base (http://dean.edwards.name/base) - Prototype (http://www.prototypejs.org) Future volution dECMAScript 4 (et JavaScript 2) Modle alternatif et optionnel de programmation par classes Introduction des notions de types, classes et interfaces Fait pour faciliter ladoption par les dveloppeurs Mode strict ou mixte11 Solutions Linux 30 janvier 2008
12. 12. Aspects techniques mconnusOrientation objet Encapsulation (1/2) Proprits publiques : les composants (attributs ou mthodes) dun objet sont, pardfaut, accessibles tous ; function Objet1() { this.attribut = "Attribut public"; } MonObjet1.prototype.fonction = function() { return "Fonction publique"; } var MonObjet1 = new Objet1(); MonObjet1.attribut; //contient "Attribut public" MonObjet1.fonction(); //retourne "Fonction publique" Proprits prives : crs dans le constructeur, accessibles seulement via lesmthodes prives de lobjet lui-mme ; function Objet2() { var attribut = "Attribut priv"; function fonction() {return "Fonction prive"; } } var MonObjet2 = new Objet2(); MonObjet2.attribut; //contient "undefined" MonObjet2.fonction(); //retourne lerreur "MonObjet2.fonction() is not a function"12 Solutions Linux 30 janvier 2008
13. 13. Aspects techniques mconnusOrientation objet Encapsulation (2/2) Mthodes privilgies : mthodes pouvant accder aux composants privs delobjet tout en tant accessibles depuis lextrieur function Objet3() { var attribut = "Attribut priv"; this.fonction = function() {return(attribut); }; } var MonObjet3 = new Objet3(); MonObjet3.fonction(); //retourne "Attribut priv"13 Solutions Linux 30 janvier 2008
14. 14. Aspects techniques mconnusTypage JavaScript est dynamiquement typ Cela ne veut pas dire quil nest pas typ Types primaires Rcuprable via loprateur typeof number, string, object, boolean, function, undefined Autre manire de voir : constructor.name Object : objet gnrique non typ ; Boolean : boolen (vaut true ou false) ; Number : nombre entier ou dcimal ; String : chane de caractres ; Array : tableau ; Function : fonction contenant une portion de code ; [NomConstructeur] : type dfini par lutilisateur via une fonction constructeur.14 Solutions Linux 30 janvier 2008
15. 15. Aspects techniques mconnusExceptions try... catch... finally try { // Code tester throw "Erreur 1"; } catch(erreur) { // Code excuter en cas derreur // erreur = Erreur 1 } finally { // Code excuter dans les deux cas } Possibilit dempiler les instructions catch chez Mozilla try { ... } catch ( e if e == "InvalidNameException" ) { ... } catch ( e if e == "InvalidIdException" ) { ... } catch ( e if e == "InvalidEmailException" ) { ... } catch ( e ) { ... }15 Solutions Linux 30 janvier 2008
16. 16. Aspects techniques mconnusClosures Contexte dexcution de fonctions imbriques fonction contenue accde aux proprits de la fonction contenante mme aprs lexcution de la fonction contenante Exemple function CreerActionVoiture(action) { return function() { return La voiture est en train de " + action; } } function Voiture() { this.demarrer = CreerActionVoiture("dmarrer"); this.freiner = CreerActionVoiture("freiner"); this.arreter = CreerActionVoiture("sarrter"); } var maVoiture = new Voiture(); //maVoiture.demarrer() retourne : La voiture est en train de dmarrer //maVoiture.freiner() retourne : La voiture est en train de freiner //maVoiture.arreter() retourne : La voiture est en train de sarrter Attention : on peut parfois crer des closures sans sen rendre compte...16 Solutions Linux 30 janvier 2008
17. 17. Aspects techniques mconnusECMAScript for XML (E4X) Nouveau type dobjet : XML Implment par Mozilla et Adobe Exemple var voitures = new XML(); voitures = ; alert(voitures.voiture.(@marque == "Renault").@modele); //Affiche: Megane for each(var voiture in voitures..@marque) { alert(marque); } //Affiche : //Renault //Porsche //Honda17Solutions Linux 30 janvier 2008
18. 18. Outils libres disponiblesInterprteurs en ligne de commande (shell) SpiderMonkey : js (http://developer-stage.mozilla.org/en/docs/Introduction_to_the_JavaScript_shell) Mode interactif Shebang#!/usr/bin/js -wvar toto = "titi";print(toto); Rhino (http://www.mozilla.org/rhino/shell.html) java org.mozilla.javascript.tools.shell.Main monscript.js Kjsembed (http://xmelegance.org/kjsembed) Script shell KDE wrapper de KJS Permet aux applications KDE dexecuter du JavaScript Kjscmd : ligne de commande ou console graphique Shells interactifs utilisable dans le browser Jash (http://www.billyreisinger.com/jash/) Rainbow9 (http://www.rainbow9.org)18Solutions Linux 30 janvier 2008
19. 19. Outils libres disponiblesDebuggers Rhino (http://www.mozilla.org/rhino/debugger.html) Pour code execut par Rhino (pas browser) Venkman (https://addons.mozilla.org/fr/firefox/addon/216) Extension Firefox dveloppe par Mozilla Firebug (http://www.getfirebug.com) Extension Firefox dveloppe par Joe Hewitt Debugger mais aussi profiling, logging Outil trs complet (HTML, DOM, CSS)19 Solutions Linux 30 janvier 2008
20. 20. Outils libres disponiblesEnvironnements de dveloppement (1/2) cf. http://www.qsos.org20 Solutions Linux 30 janvier 2008
21. 21. Outils libres disponiblesEnvironnements de dveloppement - Aptana (2/2) Aptana Studio est le plus complet Bas sur Eclipse Editeur JS avanc - Coloration syntaxique - Intellisense - Autocompletion Optimisation de code - Logging - Debugging - Profiling Gnration JsDoc Navigation dans le code Fonctionnalits HTML, CSS21 Solutions Linux 30 janvier 2008
22. 22. Outils libres disponiblesUtilitaires JSLint (http://www.jslint.com/lint.html) JavaScript Verifier Plus strict quECMAScript (vision de Crockford) Utilisable online, avec Rhino ou WSH JsUnit (http://www.jsunit.net) Tests unitaires Il existe une version serveur (Java, Ant) JSCoverage Mesures de couverture de code Instrumentation du code Rapport dans une page HTML JsDoc (http://jsdoc.sourceforge.net) et JsToolkit (http://jsdoctoolkit.org) JavaScript Documentation Tools Inspirs de JavaDoc JsToolkit est bas sur JsDoc22Solutions Linux 30 janvier 2008
23. 23. Le futur de JavaScriptECMAScript 4 La version 4 de norme ECMAScript est en cours dlaboration Elle prend en compte certaines fonctionnalits dActionScript 3.0 Nouveauts : Orientation objet : modle plus classique de classes, interfaces Modularisation du code : espaces de nommage, notion de packages Typage :- typage statique optionnel sous forme dannotations- possibilit de mixer des styles de typages- mode optionnel de compilation stricte Nombreuses autres nouveauts ... cf. http://www.ecmascript.org23 Solutions Linux 30 janvier 2008
24. 24. Le futur de JavaScriptLe projet Tamarin Adobe ActionScript Virtual Machine (AVM2) intgre dans Flash 9 Machine virtuelle Compilateur JIT Garbage collector Don en Novembre 2006 Mozilla au sein du projet Tamarin Implmentation compatible avec ECMAScript 4 Intgration avec SpiderMonkey (JavaScript 2) Courant 2008...24 Solutions Linux 30 janvier 2008
25. 25. Questions / Rponses raphael.semeteys@atosorigin.com 2008 Atos Origin. Document exclusivement rserv usage commercial. Tout ou partie de ce document ne peut tre copi, modifi, diffus ou annot sans accord crit dAtos Origin ou du client.