1. A la redcouverte de JavaScriptRaphal Semeteys
([email protected])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. Sommaire Introduction ECMAScript Aspects techniques mconnus
Outils libres disponibles Le futur de JavaScript2 Solutions Linux
30 janvier 2008
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Outils libres disponiblesEnvironnements de dveloppement
(1/2) cf. http://www.qsos.org20 Solutions Linux 30 janvier
2008
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. 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. 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. 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. Questions / Rponses [email protected] 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.