Présentation donnée lors de Devoxx France 2013 dans le cadre d'un quickie. Détails sur le site de Devoxx France : http://www.devoxx.com/display/FR13/JavaScript+pour+les+developpeurs+Java+++quels+sont+les+pieges+a+eviter Voici le résumé de cette session : Javascript a été inspiré par différents langages. Java lui a donné sa syntaxe, ses objets et ses méthodes. Les syntaxes de Javascript et Java sont très proches, les développeurs Java pensent de la même manière lorsqu'ils codent dans ces 2 langages. Cependant Javascript possèdent de nombreuses subtilités qui peuvent se transformer en bugs si elles ne sont pas connues. A travers ce quickie, je vais lister les prinicipaux pièges dans lesquels les développeurs Java ont tendance à tomber et comment les éviter. Voici une liste non exhaustive des points qui seront abordés : * Les différents opérateurs permettant de tester l'égalité : == et === * La portée des variables * L'enfer des variables globales ou comment isoler les variables pour qu'elles ne soient pas globales * Les conversions de chaînes de caractères en nombre * Les objets natifs Javascript ne devant pas être utilisés comme en Java * L'objet this et ses différentes utilisations Et d'autres encore !

1. Javascript pour les
développeurs Java :
quels sont les pièges à éviter ?
12h35 - 12h50 - La Seine B

2. Javascript pour les développeurs Java :
quels sont les pièges à éviter ?
Florian Boulay
Expert Java chez In Fine Consulting
@FlorianBoulay
27 au 29 mars 2013

3. Florian Boulay
Java depuis longtemps dans de nombreux projets dans de
grandes banques.
Aime le beau code, les bons outils et programming, motherfucker.
Actuellement :
Android, Angular JS, Scala, Mongo DB, Cassandra,
Performance, libgdx....

4. Les points abordés
New
Portée instanceof
wrapper
Module pattern === vs ==
conversion
Objets this

5. Portée des variables
var foo = 'hello';
Pas Jo
function funct(){
if(true){ li
var foo = 'bye';
}
console.log(foo); // bye !!!!!
}

6. Portée des variables
var foo = 'hello';
ien
function funct(){
C'e st b var foo = 'bye'; // Déclaration au début
if(true){
}
console.log(foo);
}

7. Portée des variables
function globalVar(){
Pas Su
bar = 'bye';
per
console.log(bar); // bye
}
console.log(bar); // bye !!!

8. Portée des variables
function globalVar(){
var bar = 'bye'; // ne pas oublier var
Mie ux
C'est console.log(bar);
}
console.log(bar); // bar is not defined

9. Portée des variables
Ne jamais oublier le mot-clé var
La portée est uniquement liée aux fonctions

10. Isolation du code
function funct(){
var foo = 'hello'; Le Glob
// ... C'est l al
}
e ma l
funct();

11. Isolation du code : module pattern
(function(){
'isolat ion var foo = 'hello';
L // ...
st bon
C'e })();
// En : module pattern
// Fr : fonction anonyme auto appelante

12. Module Pattern : variante
var module = (function () {
psulat ion var exposedObject = {},
nca
privateVariable = 1;
E function privateMethod() {
// méthode privée
}
exposedObject.publicProperty = true;
exposedObject.publicMethod = function () {
// méthode exposée
};
return exposedObject;
}());
module.publicMethod();

13. Isolation du code
Isoler du code est facile en Javascript une fois que l'on
connaît mieux les fonctions.
Le module pattern doit être utilisé au maximum pour ne
pas exposer le code privé
Terminé le code au niveau global

14. Objets
var obj1 = new Object(); // objet ?
obj1.funct = function(){
Confus
return 'me' ;
}
var obj2 = { // objet ?
i on
funct : function() {
return 'me';
}
}
var obj3 = function(arg) { // objet ?
this.funct = function() {
return arg ;
}
}
obj1.funct(); // ?
obj2.funct(); // ?
obj2['funct'](); // ?
var instance = new obj3('me') ;
instance.funct(); // ?

15. Objets
var obj = {
simple
Reste r prop : true,
funct : function() {
return 'me';
}
}

16. New
Compo
var inst1 = new ApiObject(); // on fait comme ça ?
var inst2 = ApiObject(); // ou comme ça ?
rteme
innate nt
// ­­­­­­­­­­­­­­­­ //
ndu
var MyObject = function() {
this.bar = 'mux';
}
var oops = new MyObject(); // ??
var yipp = MyObject(); // ??

17. New
var inst = new ApiObject();
Moua is // Règle tacite : si la fonction
commence par une majuscule elle doit
être initialisé avec un new
// lire la doc
// Si utilisation de this dans une
fonction, faire un new (=
constructeur)

18. This
var MyObject = function() {
Niak
this.bar = 'devoxx';
}
var oops = new MyObject(); // ??
var yipp = MyObject(); // ??
this.cheese = 'camembert'; // ?

19. This
var MyObject = function() {
oi ?
this.bar = 'devoxx';
Alors qu }
var oops = new MyObject();
console.log(oops.bar); // devoxx
var yipp = MyObject();
console.log(bar); // devoxx
// même chose qu'au dessus
this.cheese = 'camembert';
// this dépend du contexte d'appel

20. Objets
New n'est pas le passage obligé pour créer un objet
Un objet est une fonction aussi
This n'est pas votre ami

21. ==
'' == '0' // false
0 == '' // true
Gneee
0 == '0' // true
false == 'false' // false
e ?
false == '0' // true
false == undefined // false
false == null // false
null == undefined // true
' trn ' == 0 // true

22. ==
Facile
===

23. instanceof vs typeof
var foo = 'mit mit';
Shepa
typeof foo ; // ?
foo instanceof String; // ?
var bar = new String('vroum') ;
typeof bar ; // ?
bar instanceof String; // ?

24. instanceof vs typeof
typeof 3; // « number »
plusclair typeof 'niak'; // « string »
C' est 3 instanceof Number; // false
var me = new String('me');
me instanceof String; // true
typeof me ; // « object »

25. Types wrapper
var obj = new Object();
var arr = new Array();
beurk
var num = new Number(42);
var str = new String('42');
var bool = new Boolean(true);
var regex = new RegExp('.*');

26. Types wrapper
var obj = {};
upi
var arr = []
Yo var num = 42;
var str = '42';
var bool = true;
var regex = /.*'/;

27. Convertir un texte en nombre
parseInt('123'); // ?
parseInt('123HelloDevoxx'); // ? Ah oua
parseInt('123'); // ?
parseInt('123HelloDevoxx', 10); // ?
is ?
parseInt('0123HelloDevoxx', 8); // ?

28. Convertir un texte en nombre
parseInt('123'); // 123
Hum. .. parseInt('123HelloDevoxx'); // 123
parseInt('123HelloDevoxx', 10); // 123
parseInt('0123HelloDevoxx', 8); // 83
// ­­­­­­­­­­­­­­­­­ //
+'123' // 123
+'123HelloDevoxx' // NaN
+'0123HelloDevoxx' // NaN

29. A vous désormais
Javascript contient quelques erreurs de
design mais reste simple
Java est mainstream côté serveur, Javascript l'est côté client
Excellent livre : Javascript the good parts

30. Merci à tous
Test disponible sur le stand
http://codinfine.com
27 au 29 mars 2013