2014-08-20 04:01:40 +04:00
|
|
|
|
---
|
|
|
|
|
language: javascript
|
|
|
|
|
contributors:
|
|
|
|
|
- ['Adam Brenecki', 'http://adam.brenecki.id.au']
|
|
|
|
|
- ['Ariel Krakowski', 'http://www.learneroo.com']
|
|
|
|
|
filename: javascript-fr.js
|
|
|
|
|
translators:
|
|
|
|
|
- ['@nbrugneaux', 'https://nicolasbrugneaux.me']
|
|
|
|
|
lang: fr-fr
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
JavaScript a été crée par Brendan Eich, travaillant alors a Netscape, en 1995.
|
|
|
|
|
Le langage avait à l'origine pour but d'être un langage de scripting simple
|
|
|
|
|
pour les sites web, complétant le Java pour des applications web complexes. Mais
|
|
|
|
|
son intégration très proche et simple des pages web, ainsi que le support natif
|
|
|
|
|
des navigateurs a rendu le JavaScript incontournable aujourd'hui tant bien dans
|
|
|
|
|
le front-end que dans le back-end.
|
|
|
|
|
|
|
|
|
|
En effet, le JavaScript n'est plus uniquement limité aux navigateurs, grâce à
|
|
|
|
|
Node.JS, un projet qui offre un environnement indépendant dans lequel un
|
|
|
|
|
interpréteur Javascript, basé sur le célèbre moteur V8 de Google Chrome,
|
|
|
|
|
peut être utilisé directement côté serveur pour exécuter des programmes écrits
|
|
|
|
|
en JavaScript.
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
// Les commentaires sont comme en C. Les commentaires en ligne commencent par 2 slashs,
|
|
|
|
|
/* et les commentaires sur plusieurs lignes commencent avec slash-étoile
|
|
|
|
|
et finissent avec étoile-slash */
|
|
|
|
|
|
|
|
|
|
// Toutes les expressions peuvent finir par ;
|
|
|
|
|
doStuff();
|
|
|
|
|
|
|
|
|
|
// ... mais n'en n'ont pas forcément besoin, les point-virgules sont ajoutés
|
|
|
|
|
// lors de l’interprétation aux sauts de ligne, sauf exceptions
|
|
|
|
|
doStuff()
|
|
|
|
|
|
|
|
|
|
// Parce que ces cas peuvent produire des effets inattendus, nous utiliserons
|
|
|
|
|
// des point-virgules dans ce guide.
|
|
|
|
|
|
2014-08-20 12:12:21 +04:00
|
|
|
|
|
2014-08-20 04:01:40 +04:00
|
|
|
|
///////////////////////////////////
|
|
|
|
|
// 1. Nombres, Chaines de caractères et Opérateurs
|
|
|
|
|
|
|
|
|
|
// JavaScript a un seul type de nombre (qui est un 64-bit IEEE 754 double (décimaux))
|
|
|
|
|
// Comme avec le Lua, ne paniquez pas à cause du manque d'int (entiers): les
|
|
|
|
|
// doubles ont un mantisse de 52 bits, ce qui est assez pour stocker des int jusqu'à
|
|
|
|
|
// 9 x 10¹⁵ exactement.
|
|
|
|
|
3; // = 3
|
|
|
|
|
1.5; // = 1.5
|
|
|
|
|
|
|
|
|
|
// L'arithmétique de base fonctionne comme vous vous y attendriez
|
|
|
|
|
1 + 1; // = 2
|
|
|
|
|
8 - 1; // = 7
|
|
|
|
|
10 * 2; // = 20
|
|
|
|
|
35 / 5; // = 7
|
|
|
|
|
|
|
|
|
|
// Ainsi que les divisions non-entières
|
|
|
|
|
5 / 2; // = 2.5
|
|
|
|
|
|
|
|
|
|
// Les opérations bits à bits fonctionnent aussi, quand vous effectuez une opération
|
|
|
|
|
// bits à bits , votre nombre décimal est converti en entier *jusqu'à* 32 bits.
|
|
|
|
|
1 << 2; // = 4
|
|
|
|
|
|
|
|
|
|
// Comme en mathématiques, la priorité est donnée aux parenthèses.
|
|
|
|
|
(1 + 3) * 2; // = 8
|
|
|
|
|
|
|
|
|
|
// Il existe 3 valeurs spéciales pour les nombres:
|
|
|
|
|
Infinity; // le résultat de 1/0 par exemple
|
|
|
|
|
-Infinity; // le résultat de -1/0 par exemple
|
|
|
|
|
NaN; // le résultat de 0/0 par exemple
|
|
|
|
|
|
|
|
|
|
// Il existe également le type booléen.
|
|
|
|
|
true; // vrai
|
|
|
|
|
false; // faux
|
|
|
|
|
|
|
|
|
|
// Les chaines de caractères (strings) sont crées avec ' ou ' indifféremment, la seule
|
|
|
|
|
// raison de choisir l'un ou l'autre est la consistance dans votre code.
|
|
|
|
|
'abc';
|
|
|
|
|
'Hello, world';
|
|
|
|
|
|
|
|
|
|
// La négation utilise le symbole !
|
|
|
|
|
!true; // = false
|
|
|
|
|
!false; // = true
|
|
|
|
|
|
|
|
|
|
// L'égalité est === ou ==
|
|
|
|
|
// === compare la valeur exacte 2 === '2' // = false
|
|
|
|
|
// == convertit la valeur pour comparer 2 === '2' // = true
|
|
|
|
|
// En général, il vaut mieux utiliser === pour ne pas faire d'erreurs.
|
|
|
|
|
1 === 1; // = true
|
|
|
|
|
2 === 1; // = false
|
|
|
|
|
|
|
|
|
|
// L'inégalité est !== ou !=, basé sur le même principe qu'avant.
|
|
|
|
|
1 !== 1; // = false
|
|
|
|
|
2 !== 1; // = true
|
|
|
|
|
|
|
|
|
|
// Plus de comparaisons:
|
|
|
|
|
1 < 10; // = true
|
|
|
|
|
1 > 10; // = false
|
|
|
|
|
2 <= 2; // = true
|
|
|
|
|
2 >= 2; // = true
|
|
|
|
|
|
|
|
|
|
// Les strings se concatènent avec +
|
|
|
|
|
'Hello ' + 'world!'; // = 'Hello world!'
|
|
|
|
|
|
|
|
|
|
// et peuvent être comparées avec < et >
|
|
|
|
|
'a' < 'b'; // = true
|
|
|
|
|
|
|
|
|
|
// Vous pouvez accéder les caractères dans une string avec charAt
|
|
|
|
|
'This is a string'.charAt(0); // = 'T'
|
|
|
|
|
|
|
|
|
|
// .. ou utiliser substring pour avoir un plus gros morceau
|
|
|
|
|
'Hello world'.substring(0, 5); // = 'Hello'
|
|
|
|
|
|
|
|
|
|
// la longueur, length, est une propriété, donc n'utilisez pas de ()
|
|
|
|
|
'Hello'.length; // = 5
|
|
|
|
|
|
|
|
|
|
// Il y a également null et undefined
|
|
|
|
|
null; // utilisé pour une non-valeur
|
|
|
|
|
undefined; // utilisé pour une valeur actuellement non présente (cependant,
|
|
|
|
|
// undefined est aussi une valeur valide)
|
|
|
|
|
|
|
|
|
|
// false, null, undefined, NaN, 0 and '' sont 'presque-faux' (falsy), tout le reste
|
|
|
|
|
// est 'presque-vrai' (truthy)
|
|
|
|
|
// Notez que 0 est falsy mais '0' est truthy, alors même que 0 == '0' (mais 0 !== '0')
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
///////////////////////////////////
|
|
|
|
|
// 2. Variables, Tableaux et Objets
|
|
|
|
|
|
|
|
|
|
// Les variables sont déclarées avec le mot clé var. Le typage en JavaScript est
|
|
|
|
|
// dynamique, donc pas besoin de spécifier le type. L'assignement utilise un seul =.
|
|
|
|
|
var someVar = 5;
|
|
|
|
|
|
|
|
|
|
// si vous oubliez le mot clé var, vous n'aurez pas d'erreur (sauf en mode strict)
|
|
|
|
|
someOtherVar = 10;
|
|
|
|
|
|
|
|
|
|
// ... mais la variable sera crée dans l’environnement global, et non l’environnement
|
|
|
|
|
// local dans lequel vous l'avez défini.
|
|
|
|
|
|
|
|
|
|
// Les variables déclarées et non assignées sont undefined par défaut
|
|
|
|
|
var someThirdVar;
|
|
|
|
|
var someThirdVar = undefined;
|
|
|
|
|
|
|
|
|
|
// ... sont deux déclarations identiques.
|
|
|
|
|
|
|
|
|
|
// Il y a des raccourcis pour les opérations mathématiques:
|
|
|
|
|
someVar += 5; // équivalent pour someVar = someVar + 5;
|
|
|
|
|
someVar *= 10; // de même, someVar = someVar * 100;
|
|
|
|
|
someVar++; // = someVar += 1;
|
|
|
|
|
someVar--; // = someVar -= 1;
|
|
|
|
|
|
|
|
|
|
// Les tableaux (Arrays) sont des listes ordonnées de valeurs, de tous types.
|
|
|
|
|
var myArray = ['Hello', 45, true];
|
|
|
|
|
|
|
|
|
|
// Leurs membres peuvent être accédés en utilisant les crochets
|
|
|
|
|
// Les indices commencent à 0.
|
|
|
|
|
myArray[1]; // = 45
|
|
|
|
|
|
|
|
|
|
// Les tableaux sont modifiables, ainsi que leurs longueurs
|
|
|
|
|
myArray.push( 'World' );
|
|
|
|
|
myArray.length; // = 4
|
|
|
|
|
|
|
|
|
|
// Ajout/Modification à un index spécifique
|
|
|
|
|
myArray[3] = 'Hello';
|
|
|
|
|
|
|
|
|
|
// Les objets JavaScript sont appelés 'dictionnaires' ou 'maps' dans certains autres
|
|
|
|
|
// langages: ils sont une liste non-ordonnée de paires clé-valeur.
|
|
|
|
|
var myObj = {key1: 'Hello', key2: 'World'};
|
|
|
|
|
|
|
|
|
|
// Les clés sont des strings, mais les ' ou " sont optionels si elles sont des
|
|
|
|
|
// noms valides en JavaScript. Les valeurs peuvent être de n'importe quel type.
|
|
|
|
|
var myObj = {myKey: 'myValue', 'my other key': 4};
|
|
|
|
|
|
|
|
|
|
// Les attributs d'objets peuvent être accédés avec les crochets
|
|
|
|
|
myObj['my other key']; // = 4
|
|
|
|
|
|
|
|
|
|
// .. ou avec un point si la clé est un identifiant valide.
|
|
|
|
|
myObj.myKey; // = 'myValue'
|
|
|
|
|
|
|
|
|
|
// Les objets sont eux aussi modifiables.
|
|
|
|
|
myObj.myThirdKey = true;
|
|
|
|
|
|
|
|
|
|
// Si vous essayez d'accéder à une valeur non-définie, vous obtiendrez undefined
|
|
|
|
|
myObj.myFourthKey; // = undefined
|
|
|
|
|
|
2014-08-20 12:12:21 +04:00
|
|
|
|
|
2014-08-20 04:01:40 +04:00
|
|
|
|
///////////////////////////////////
|
|
|
|
|
// 3. Logique et structures de contrôle
|
|
|
|
|
|
|
|
|
|
// La syntaxe de cette section est identique au Java.
|
|
|
|
|
|
|
|
|
|
// Les si (if) fonctionnent comme vous vous y attendez.
|
|
|
|
|
var count = 1;
|
|
|
|
|
if (count === 3) {
|
|
|
|
|
// seulement quand count est 3
|
|
|
|
|
}
|
|
|
|
|
else if (count === 4) {
|
|
|
|
|
// uniquement quand count est 4
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
// le reste du temps, si ni 3, ni 4.
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// De même pour while.
|
|
|
|
|
while (true) {
|
|
|
|
|
// Une boucle infinie !
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Les boucles do-while sont pareilles, mais sont exécutées au moins une fois.
|
|
|
|
|
var input
|
|
|
|
|
do {
|
|
|
|
|
input = getInput();
|
|
|
|
|
} while (!isValid(input))
|
|
|
|
|
|
|
|
|
|
// La boucle for est la même qu'en C ou en Java:
|
|
|
|
|
// initialisation; condition pour continuer; itération
|
|
|
|
|
for (var i = 0; i < 5; i++){
|
|
|
|
|
// sera exécutée 5 fois
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// && est le "et" logique, || est le "ou" logique
|
|
|
|
|
if (house.size === 'big' && house.colour === 'blue'){
|
|
|
|
|
house.contains = 'bear';
|
|
|
|
|
}
|
|
|
|
|
if (colour === 'red' || colour === 'blue'){
|
|
|
|
|
// colour est soit 'red' soit 'blue'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Les raccourcis && et || sont pratiques pour instancier des valeurs par defaut.
|
|
|
|
|
var name = otherName || 'default';
|
|
|
|
|
|
|
|
|
|
// Ceci est l'équivalent de
|
|
|
|
|
var name = otherName;
|
|
|
|
|
if (!name){
|
|
|
|
|
name = 'default';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Le switch vérifie les égalités avec ===
|
|
|
|
|
// utilisez un "break" à la fin de chaque cas
|
|
|
|
|
// ou les cas suivants seront eux aussi exécutés
|
|
|
|
|
grade = 'B';
|
|
|
|
|
switch (grade) {
|
|
|
|
|
case 'A':
|
|
|
|
|
console.log('Great job');
|
|
|
|
|
break;
|
|
|
|
|
case 'B':
|
|
|
|
|
console.log('OK job');
|
|
|
|
|
break;
|
|
|
|
|
case 'C':
|
|
|
|
|
console.log('You can do better');
|
|
|
|
|
break;
|
|
|
|
|
default:
|
|
|
|
|
console.log('Oy vey');
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
///////////////////////////////////
|
|
|
|
|
// 4. Fonctions, Scope (Environnement) et Closures
|
|
|
|
|
|
|
|
|
|
// Les fonctions sont déclarées avec le mot clé function
|
|
|
|
|
function myFunction(thing){
|
|
|
|
|
return thing.toUpperCase();
|
|
|
|
|
}
|
|
|
|
|
myFunction('foo'); // = 'FOO'
|
|
|
|
|
|
|
|
|
|
// Les fonctions JavaScript sont des objets de première classe, donc peuvent
|
|
|
|
|
// être réassignées à d'autres variables et passées en tant que paramètres pour
|
|
|
|
|
// d'autres fonctions
|
|
|
|
|
function myFunction(){
|
|
|
|
|
// ce code s'exécutera dans 5 secondes
|
|
|
|
|
}
|
|
|
|
|
setTimeout(myFunction, 5000);
|
|
|
|
|
// Note: setTimeout ne fait pas parti du langage, mais les navigateurs ainsi
|
|
|
|
|
// que Node.js le rendent disponible
|
|
|
|
|
|
|
|
|
|
// Les fonctions n'ont pas nécessairement besoin d'un nom, elles peuvent être
|
|
|
|
|
// anonymes
|
|
|
|
|
setTimeout(function(){
|
|
|
|
|
// ce code s'exécutera dans 5 secondes
|
|
|
|
|
}, 5000);
|
|
|
|
|
|
|
|
|
|
// Le Javascript crée uniquement un scope dans les fonctions, pas dans les
|
|
|
|
|
// autres blocs.
|
|
|
|
|
if (true){
|
|
|
|
|
var i = 5;
|
|
|
|
|
}
|
|
|
|
|
i; // = 5 - et non undefined comme vous pourriez vous y attendre
|
|
|
|
|
|
|
|
|
|
// Cela a mené à un style comment de fonctions anonymes immédiatement exécutée;
|
|
|
|
|
// ou "immediately-executing anonymous functions"
|
|
|
|
|
(function(){
|
|
|
|
|
var temporary = 5;
|
|
|
|
|
// Nous pouvons accéder au scope global en assignant à l'objet global,
|
|
|
|
|
// qui dans les navigateurs est "window". Il est différent dans Node.js.
|
|
|
|
|
window.permanent = 10;
|
|
|
|
|
})();
|
|
|
|
|
// Cela permet de ne pas avoir de fuites de variables qui polluent
|
|
|
|
|
// l’environnement global.
|
|
|
|
|
temporary; // raises ReferenceError
|
|
|
|
|
permanent; // = 10
|
|
|
|
|
|
|
|
|
|
// Une des particularité les plus puissantes de Javascript est le système de
|
|
|
|
|
// closures. Si une fonction est définie dans une autre fonction, alors la
|
|
|
|
|
// fonction interne aura accès aux variables de la fonction parente, même si
|
|
|
|
|
// celle-ci a déjà finie son exécution.
|
|
|
|
|
function sayHelloInFiveSeconds(name){
|
|
|
|
|
var prompt = 'Hello, ' + name + '!';
|
|
|
|
|
// Fonction interne
|
|
|
|
|
function inner(){
|
|
|
|
|
alert(prompt);
|
|
|
|
|
}
|
|
|
|
|
setTimeout(inner, 5000);
|
|
|
|
|
// setTimeout is asynchrone, donc la fonction sayHelloInFiveSeconds quittera
|
|
|
|
|
// immédiatement, et setTimeout appelera inner après.
|
|
|
|
|
}
|
|
|
|
|
sayHelloInFiveSeconds('Adam'); // ouvre un popup avec 'Hello, Adam!' dans 5sec
|
|
|
|
|
|
2014-08-20 12:12:21 +04:00
|
|
|
|
|
2014-08-20 04:01:40 +04:00
|
|
|
|
///////////////////////////////////
|
|
|
|
|
// 5. Encore plus à propos des Objets; Constructeurs and Prototypes
|
|
|
|
|
|
|
|
|
|
// Les objets peuvent contenir des fonctions.
|
|
|
|
|
var myObj = {
|
|
|
|
|
myFunc: function(){
|
|
|
|
|
return 'Hello world!';
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
myObj.myFunc(); // = 'Hello world!'
|
|
|
|
|
|
|
|
|
|
// Lorsqu'une fonction attachée à un objet est appelée, elle peut accéder à
|
|
|
|
|
// l'objet avec le mot clé this.
|
|
|
|
|
myObj = {
|
|
|
|
|
myString: 'Hello world!',
|
|
|
|
|
myFunc: function(){
|
|
|
|
|
return this.myString;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
myObj.myFunc(); // = 'Hello world!'
|
|
|
|
|
|
|
|
|
|
// LA valeur de "this" change de par l'endroit où la fonction est appelée, et
|
|
|
|
|
// non de l'endroit où elle est définie. Donc elle ne fonctionnera pas si elle
|
|
|
|
|
// est appelée hors du contexte l'objet.
|
|
|
|
|
var myFunc = myObj.myFunc;
|
|
|
|
|
myFunc(); // = undefined
|
|
|
|
|
|
|
|
|
|
// A l'inverse, une fonction peut être attachée à un objet et y gagner l'accès
|
|
|
|
|
// au travers de "this"
|
|
|
|
|
var myOtherFunc = function(){
|
|
|
|
|
return this.myString.toUpperCase();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
myObj.myOtherFunc = myOtherFunc;
|
|
|
|
|
myObj.myOtherFunc(); // = 'HELLO WORLD!'
|
|
|
|
|
|
|
|
|
|
// Nous pouvons aussi spécifier un contexte pour une fonction quand elle est
|
|
|
|
|
// appelée grâce à "call" ou "apply".
|
|
|
|
|
var anotherFunc = function(s){
|
|
|
|
|
return this.myString + s;
|
|
|
|
|
}
|
|
|
|
|
anotherFunc.call(myObj, ' And Hello Moon!'); // = 'Hello World! And Hello Moon!'
|
|
|
|
|
|
|
|
|
|
// 'apply' est presque identique, mais prend un tableau comme liste d’arguments.
|
|
|
|
|
|
|
|
|
|
anotherFunc.apply(myObj, [' And Hello Sun!']); // = 'Hello World! And Hello Sun!'
|
|
|
|
|
|
|
|
|
|
Math.min(42, 6, 27); // = 6
|
|
|
|
|
Math.min([42, 6, 27]); // = NaN (uh-oh!)
|
|
|
|
|
Math.min.apply(Math, [42, 6, 27]); // = 6
|
|
|
|
|
|
|
|
|
|
// Mais, "call" and "apply" sont temporaires. Pour lier le contexte de façon
|
|
|
|
|
// permanente, nous pouvons utiliser "bind"
|
|
|
|
|
var boundFunc = anotherFunc.bind(myObj);
|
|
|
|
|
boundFunc(' And Hello Saturn!'); // = 'Hello World! And Hello Saturn!'
|
|
|
|
|
|
|
|
|
|
// "bind" peut aussi être utilisé pour créer une application partielle de la
|
|
|
|
|
// fonction (curry)
|
|
|
|
|
var product = function(a, b){ return a * b; }
|
|
|
|
|
var doubler = product.bind(this, 2);
|
|
|
|
|
doubler(8); // = 16
|
|
|
|
|
|
|
|
|
|
// Lorsque vous appelez une fonction avec le mot clé "new", un nouvel objet est
|
|
|
|
|
// crée et mis à disposition de la fonction via "this". Ces fonctions sont
|
|
|
|
|
// communément appelées constructeurs.
|
|
|
|
|
var MyConstructor = function(){
|
|
|
|
|
this.myNumber = 5;
|
|
|
|
|
}
|
|
|
|
|
myNewObj = new MyConstructor(); // = {myNumber: 5}
|
|
|
|
|
myNewObj.myNumber; // = 5
|
|
|
|
|
|
|
|
|
|
// Chaque objet en Javascript a un "prototype". Quand vous essayez d'accéder à
|
|
|
|
|
// une propriété que n'a pas l'objet, l'interpréteur regarder son prototype.
|
|
|
|
|
|
|
|
|
|
// Quelque implémentations de JS vous laissent accéder au prototype avec la
|
|
|
|
|
// propriété "magique" __proto__. Ceci peut être utile, mais n'est pas standard
|
|
|
|
|
// et ne fonctionne pas dans les navigateurs actuels.
|
|
|
|
|
var myObj = {
|
|
|
|
|
myString: 'Hello world!'
|
|
|
|
|
};
|
|
|
|
|
var myPrototype = {
|
|
|
|
|
meaningOfLife: 42,
|
|
|
|
|
myFunc: function(){
|
|
|
|
|
return this.myString.toLowerCase()
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
myObj.__proto__ = myPrototype;
|
|
|
|
|
myObj.meaningOfLife; // = 42
|
|
|
|
|
myObj.myFunc(); // = 'hello world!'
|
|
|
|
|
|
|
|
|
|
myPrototype.__proto__ = {
|
|
|
|
|
myBoolean: true
|
|
|
|
|
};
|
|
|
|
|
myObj.myBoolean; // = true
|
|
|
|
|
|
|
|
|
|
// Il n'y a pas de copie ici. Chacun des objets stocke une référence à son
|
|
|
|
|
// prototype. Cela veut dire que l'on peut le modifier et cela se répercutera
|
|
|
|
|
// partout.
|
|
|
|
|
myPrototype.meaningOfLife = 43;
|
|
|
|
|
myObj.meaningOfLife; // = 43
|
|
|
|
|
|
|
|
|
|
// Comme précédemment dit, __proto__ n'est pas standard et ne devrait pas être
|
|
|
|
|
// utilisé. Il y a deux autres moyen de créer un nouvel objet avec un prototype
|
|
|
|
|
// donné.
|
|
|
|
|
|
|
|
|
|
// Le premier est Object.create, mais c'est assez récent et risque de ne pas
|
|
|
|
|
// fonctionner dans tous les navigateurs.
|
|
|
|
|
var myObj = Object.create(myPrototype);
|
|
|
|
|
myObj.meaningOfLife; // = 43
|
|
|
|
|
|
|
|
|
|
// Le deuxième moyen, qui marche partout, fonctionne avec les constructeurs.
|
|
|
|
|
// Les constructeurs ont un propriété appelée prototype. Ce n'est *pas* le
|
|
|
|
|
// prototype du constructeur de la fonction elle-même, c'est le prototype que
|
|
|
|
|
// les nouveaux objets crées grâce à ce constructeur avec "new" auront.
|
|
|
|
|
MyConstructor.prototype = {
|
|
|
|
|
myNumber: 5,
|
|
|
|
|
getMyNumber: function(){
|
|
|
|
|
return this.myNumber;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
var myNewObj2 = new MyConstructor();
|
|
|
|
|
myNewObj2.getMyNumber(); // = 5
|
|
|
|
|
myNewObj2.myNumber = 6
|
|
|
|
|
myNewObj2.getMyNumber(); // = 6
|
|
|
|
|
|
|
|
|
|
// Les types pré-définis tels que les strings ou nombres ont aussi des
|
|
|
|
|
// constructeurs
|
|
|
|
|
var myNumber = 12;
|
|
|
|
|
var myNumberObj = new Number(12);
|
|
|
|
|
myNumber == myNumberObj; // = true
|
|
|
|
|
|
|
|
|
|
// ... mais ils ne sont pas exactement équivalent.
|
|
|
|
|
typeof myNumber; // = 'number'
|
|
|
|
|
typeof myNumberObj; // = 'object'
|
|
|
|
|
myNumber === myNumberObj; // = false
|
|
|
|
|
if (0){
|
|
|
|
|
// 0 est falsy, le code ne fonctionnera pas.
|
|
|
|
|
}
|
|
|
|
|
if (Number(0)){
|
|
|
|
|
// Parce que Number(0) est truthy, le code fonctionnera
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Cependant, vous pouvez ajouter des fonctionnalités aux types de bases grâce à
|
|
|
|
|
// cette particularité.
|
|
|
|
|
String.prototype.firstCharacter = function(){
|
|
|
|
|
return this.charAt(0);
|
|
|
|
|
}
|
|
|
|
|
'abc'.firstCharacter(); // = 'a'
|
|
|
|
|
|
|
|
|
|
// C'est très souvent utilisé pour le "polyfilling", qui implémente des nouvelles
|
|
|
|
|
// fonctionnalités de JavaScript dans de plus anciens environnements, tels que
|
|
|
|
|
// les vieux navigateurs.
|
|
|
|
|
|
|
|
|
|
//Par exemple, Object.create est assez récent, mais peut être implémenté grâce à
|
|
|
|
|
// ce polyfill
|
2014-08-20 12:12:21 +04:00
|
|
|
|
if (Object.create === undefined){ // pour ne pas reécrire si la fonction existe déjà
|
2014-08-20 04:01:40 +04:00
|
|
|
|
Object.create = function(proto){
|
2014-08-20 12:12:21 +04:00
|
|
|
|
// créer un constructeur temporaire avec le bon prototype
|
2014-08-20 04:01:40 +04:00
|
|
|
|
var Constructor = function(){};
|
|
|
|
|
Constructor.prototype = proto;
|
2014-08-20 12:12:21 +04:00
|
|
|
|
// puis on utilise "new" pour créer un object avec ce prototype
|
2014-08-20 04:01:40 +04:00
|
|
|
|
return new Constructor();
|
|
|
|
|
}
|
|
|
|
|
}
|
2014-08-20 04:03:01 +04:00
|
|
|
|
```
|
2014-08-20 04:01:40 +04:00
|
|
|
|
|
|
|
|
|
## Pour aller plus loin (en anglais)
|
|
|
|
|
|
|
|
|
|
The [Mozilla Developer
|
|
|
|
|
Network](https://developer.mozilla.org/fr-FR/docs/Web/JavaScript) expose une
|
|
|
|
|
excellente documentation pour le Javascript dans les navigateurs. Et contient
|
|
|
|
|
également un wiki pour s'entraider.
|
|
|
|
|
|
|
|
|
|
MDN's [A re-introduction to
|
|
|
|
|
JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
|
|
|
|
|
recouvre les principaux sujets vus ici. Le guide est délibérément uniquement
|
|
|
|
|
à propos du JavaScript, et ne parle pas des navigateurs; pour cela, dirigez vous
|
|
|
|
|
plutôt ici :
|
|
|
|
|
[Document Object
|
|
|
|
|
Model](https://developer.mozilla.org/en-US/docs/Using_the_W3C_DOM_Level_1_Core)
|
|
|
|
|
|
|
|
|
|
[Learn Javascript by Example and with Challenges](http://www.learneroo.com/modules/64/nodes/350) quelques challenges.
|
|
|
|
|
|
|
|
|
|
[JavaScript Garden](http://bonsaiden.github.io/JavaScript-Garden/) is an in-depth
|
|
|
|
|
un guide pour vous éviter les faux-amis dans le JavaScript.
|
|
|
|
|
|
|
|
|
|
[JavaScript: The Definitive Guide](http://www.amazon.com/gp/product/0596805527/) un classique. A lire.
|
|
|
|
|
|
|
|
|
|
En addition aux contributeurs de cet article, du contenu provient du
|
|
|
|
|
"Python tutorial" de Louie Dinh, et de [JS
|
|
|
|
|
Tutorial](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
|
|
|
|
|
sur le réseau Mozilla.
|