Introduction à JavaScript

Javascript

Les fondamentaux

Jean-pierre VINCENT (indépendant) Pierre lagarde (Microsoft)

Qui ça ?Jean-pierre VINCENT

braincracking.org (veille techno)@theystolemynick

12 ans de WebConsultant, formateur, expertise

Pourquoi Javascript ?

Présent partout●Navigateur●Jeux Web (remplace Flash)●Mobile (Phonegap ...)●Télévisions●Serveur (Node.js, ...)●Software (Chromeless, ...)●OS (JoliCloud, WebOS...)●Windows 8 !

Mauvaise réputation

Mauvaise réputation

parseInt('06'); // 6parseInt('08'); // 0

wftjs.com

Mauvaise réputation

typeof NaN // numberNaN === NaN // false

typeof null // objectnull instanceof Object // false

wftjs.com

Mauvaise réputation

(1.7976931348623157e+308 ===1.7976931348623158e+308 )// true!

alert(111111111111111111111); // alerts 111111111111111110000

9999999999999999 //=> 10000000000000000

wftjs.com

APIs● DOM (window.document)

● Node

● WinRT

● ...

Compliqué ?

Différent !

Historique court● Né pendant la guerre (95)● En quelques semaines● Influence Erlang, Lisp, Python, Askell

IE et Netscape d'accord pourEcmaScript 3

Evolution

●EcmaScript 5●Harmony●EcmaScript.Next●EcmaScript.Next.Next

En attendant ...

EcmaScript 3

Objectifs

●Portée des variables (var + function)

●Contexte (this)

●Function()

Portée des variables

1 closure = 1 portée

Closure = function() {PORTÉE

}

Portée des variablestest1 = function() {

var x = 1;

console.log(x); // 1}();console.log(x); // undefined

Portée des variablestest1 = function() {

var x = 1;test2 = function() {var x = 2;

console.log(x); // 2}();console.log(x); // ?

}();console.log(x); // undefined

Portée des variablestest1 = function() {

var x = 1;test2 = function() {var x = 2;

console.log(x); // 2}();console.log(x); // 1

}();console.log(x); // undefined

Portée des variablestest1 = function() {

var x = 1;test2 = function() {var x = 2;test3 = function() {console.log(x); // 2}();console.log(x); // 2}();console.log(x); // 1

}();console.log(x); // undefined

Démo « porté et boucle »

Morales

1 Toujours utiliser var

Application pratique

Démo « module pattern »

Créer un scope1/3 : fonction anonyme

function() {var privateVariable = true;console.log( privateVariable );

}

Créer un scope1/3 : fonction anonyme

function() {var privateVariable = true;console.log( privateVariable );

}=> parse error

Créer un scope2/3 : parler gentiment au parser

( function() {var privateVariable = true;console.log( privateVariable );

})=> rien

Créer un scope3/3 : auto-exécution

( function() {var privateVariable = true;console.log( privateVariable );

})()=> true

Application pratique

(function() {var privateVariable = true;window.init = function() {

console.log( privateVariable );}

}())

init(); // trueconsole.log(privateVariable);//undefined

Morales

1 Toujours utiliser var2 Utiliser le pattern module

Contexte

this = contexte d'exécution

Contexte

Démo « contexte »

Contexte - DOMmyClass = function() {

this.id = 'myClass';this.getId = function() {

console.log(this.id);};

};

myObject = new myClass();document.body.onclick = myObject.getId;// document.body.id

Contexte – fix portéemyClass = function() {

this.id = 'myClass';var me = this;this.getId = function() {

console.log(me.id);

};};myObject = myClass();

document.body.onclick = myObject.action;// 'myClass'

Contexte – fix portée

Démo du fix

Morales

1 Toujours utiliser var2 Utiliser le pattern module3 Verrouiller le contexte

Function()Déclarations● function action() {}

●action = function() {}

Function()Déclarations● function action() {}

●action = function() {}

●Exécution action();

Function()

Un petit jeu ?

function action()Le hoisting, c'est pratique

action(); // true

function action() { console.log(true);}

function action()Le hoisting, c'est dangereuxif( 1 === 1) { function action() { console.log('1 === 1'); }} else { function action() { console.log('1 !== 1'); }}action(); // 1 !== 1

function action()Implicitement sensible à la portée

(function() {function action() {

console.log('action');}

}())action(); // undefined

var action = function()

Plus explicite donc moins dangereux

Morales

1 Toujours utiliser var2 Utiliser le pattern module3 Verrouiller le contexte4 déclarer ses fonction avec var action = function() { }

Avant la Démo « mise en pratique »

● Utilisation des écrasements de fonction

Utilisation des écrasements de fonction

var bind = function( el, ev, callback) { if(document.body.attachEvent){

el.attachEvent('on'+ev, callback); } else {

el.addEventListener( ev, callback);}

};

Le test est fait à chaque exécution

return function()var bind =function( el, ev, callback) { if(document.body.attachEvent) return function(el, ev, callback) {element.attachEvent('on'+event, callback); }; else return function(el, ev, callback) {

el.addEventListener( ev, callback); };}();

Démo « mise en pratique »

Problème : écouter la liste d'éléments

Teasing : 17h30 amphi Havane

OOJS, bonnes pratiques...

Conclusion

Javascript est différent, apprenez le

Questions ?Jean-pierre VINCENTbraincracking.org@theystolemynick

RDV maintenant :stand Generative Objects(N° 55 à côté HP)