Fondamentaux du langage Javascript

1. JavaScript
Prise en main & Fondamentaux
Vincent PETETIN

2. Historique
• Crée il y a presque 20 ans (1995), lorsque Java était à la mode sur Internet
• « Java » dans « JavaScript » est purement commercial, seul la syntaxe à été pris
comme concept
• Typage dynamique : Scheme
• Héritage par prototype : Self

3. Fondamentaux
• Les objets
• La portée des variables (var, function)
• Les fonctions
• Le contexte (this)

4. Fondamentaux - les objects
• Dans JavaScript tout est objet
• 1 objet = collection de clés/valeurs
forme = {
couleur: "vert",
type: "carré",
foo: "yahouu !"
};
forme = new Object();
forme.couleur = "vert";
forme.type = "carré";
forme.foo = "yahouu !";
forme = {
couleur: "vert",
type: "carré",
foo: "yahouu !"
};
console.log(forme["couleur"]); // vert
console.log(forme["type"]); // carré
delete forme.foo;
for (var propertyName in forme) {
console.log(propertyName + ": " + forme[propertyName]);
}
// couleur: vert
// type: carré

5. Les fondamentaux – portée des variables
• Portée = vision de l’interpréteur à un instant t
• Portée globale (window dans un navigateur)
• 1 fonction = 1 portée
• « var » indique de créer une variable visible que pour la portée de création
test1 = function () {
var x = 1;
test2 = function () {
var x = 2;
test3 = function () {
var x = 3;
console.log(x); // 3
}();
}();
console.log(x); // 1
}();
console.log(x); // undefined
function genericFunctionName() {
for (i = 0; i < myArray.length; i++) {
console.log(i);
}
}
for (i = 0; i < 10; i++) {
genericFunctionName();
}
function genericFunctionName() {
for (i = 0; i < myArray.length; i++) {
console.log(i);
}
}
for (var i = 0; i < 10; i++) {
genericFunctionName();
}
function genericFunctionName() {
for (var i = 0; i < myArray.length; i++) {
console.log(i);
}
}
for (i = 0; i < 10; i++) {
genericFunctionName();
}

6. Fondamentaux – portée des variables
• Havre de paix
(function () {
var privateVariable = true;
window.init = function () {
console.log(privateVariable);
}
}());
init(); // true
console.log(privateVariable); // undefined

7. • 2 façons de déclarer une fonction :
• Implicite (la « mauvaise » façon de faire) :
• Explicite (la bonne façon de faire) :
Fondamentaux – les fonctions
action();
function action() { }
var action = function () { };
action();
if (1 == 1) {
// l'exécution du code passe ici ...
function action() {
console.log('a == 1');
}
} else {
// ... pourtant le compilateur se souvient de cette fonction
function action() {
console.log('a != 1');
}
}
action(); // a != 1
if (1 == 1) {
// l'exécution du code passe ici ...
action = function () {
console.log('a == 1');
}
} else {
// ... cette méthode n'est jamais appelée car la portée à été maitrisée
action = function () {
console.log('a != 1');
}
}
action(); // a == 1

8. • Auto-exécution :
• JavaScript est un langage orientée prototype : les fonctions en sous le cœur
• 1 fonction = 1 objet avec 1 propriété « prototype »
• Opérateur new (prototype.constructor)
• Héritage
Fondamentaux – particularités des fonctions
var autoInit = function () {
console.log('hello world');
}(); // hello world
var crypto = function () {
this.seed = 10;
this.version = "V1";
};
var myCrypto = new crypto();
console.log(myCrypto.version); // V1
var crypto = function () {
}
crypto.prototype.seed = 10;
crypto.prototype.version = "V1";
var myCrypto = new crypto();
console.log(myCrypto.version); // V1
var crypto = function () {
this.seed = 10;
this.version = "V1";
};
var myCrypto = new crypto();
crypto.prototype.writeSeed = function () {
console.log(this.seed);
};
myCrypto.writeSeed(); // 10
String.prototype.firstChar = function() {
return this[0];
}
console.log("premier".firstChar()); // p

9. • Différent des langages de programmation orienté Object (C++, Java,C#)
• JavaScript est capable de copier le corps du fonction d’un objet à l’autre
• prototype.call permet de fixer le contexte d’exécution d’une fonction
Fondamentaux – le contexte (ou this)
var user = function () {
this.name = "vp";
this.display = function () {
console.log(this.name + " !!!");
}
};
var user1 = new user();
document.onclick = user1.display; // undefined !!!
var user = function () {
this.name = "vp";
this.display = function () {
console.log(this.name + " !!!");
}
};
var user1 = new user();
document.onclick = user1.display; // my document !!!
document.name = "my document";
var user = function () {
this.name = "vp";
this.display = function () {
console.log(this.name + " !!!");
}
};
var user1 = new user();
document.onclick = user1.display; // vp !!!
document.onclick.call(user1);
document.name = "my document";

10. • Il n’y a pas de classe en JavaScript !
• JavaScript est un langage « orienté prototype »
• Prototypage :
• Le prototype d’une classe est sa définition
Prototypage