diff options
| -rw-r--r-- | fr-fr/javascript-fr.html.markdown | 264 |
1 files changed, 232 insertions, 32 deletions
diff --git a/fr-fr/javascript-fr.html.markdown b/fr-fr/javascript-fr.html.markdown index 15478cdb..f1977dac 100644 --- a/fr-fr/javascript-fr.html.markdown +++ b/fr-fr/javascript-fr.html.markdown @@ -6,23 +6,26 @@ contributors: filename: javascript-fr.js translators: - ['@nbrugneaux', 'https://nicolasbrugneaux.me'] + - ['Michel Antoine', 'https://github.com/antoin-m'] lang: fr-fr --- JavaScript a été créé 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 (à ne pas confondre avec JavaScript) -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 +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, +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. +ECMAScript (la norme du langage Javascript) entre en version 6. Cette version introduit de nombreuses mises à jour tout en restant rétrocompatible. L'implémentation de ces nouvelles fonctionnalités est en cours et celles-ci ne sont donc pas forcément compatibles avec tous les navigateurs. + ```js // Les commentaires sont comme en C. Les commentaires mono-ligne commencent par 2 slashs, /* et les commentaires sur plusieurs lignes commencent avec slash-étoile @@ -31,7 +34,7 @@ en JavaScript. // Toutes les expressions peuvent finir par ; doStuff(); -// ... mais n'en n'ont pas forcément besoin, les point-virgules sont ajoutés +// ... 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() @@ -79,6 +82,12 @@ false; // faux "abc"; 'Hello, world'; +// *ES6:* Les chaines de caractères peuvent être crées en utilisant un modèle +// entouré des quotes inverses (`) à la place des quotes classiques (' ou "). +// Les variables sont interprétées avec ${var} +let banta = "Harry", santa = "Hermione"; +`${banta}, your santa is ${santa}.` // = "Harry, your santa is Hermione." + // La négation utilise le symbole ! !true; // = false !false; // = true @@ -117,26 +126,34 @@ false; // faux // Il y a également null et undefined null; // utilisé pour une non-valeur -undefined; // utilisé pour une valeur actuellement non présente (cependant, +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') +// *ES6:* Introduction d'un nouveau type primitif : Symbol +var symbol_one = Symbol(); +var symbol_two = Symbol('This is optional description, for debugging'); +typeof symbol_one === 'symbol' // = true + +// *ES6:* Un Symbol est immutable et unique +Symbol() === Symbol() // = false +Symbol('learnx') === Symbol('learnx') // = false /////////////////////////////////// -// 2. Variables, Tableaux et Objets +// 2. Variables, Tableaux, Objets, Maps et Sets -// Les variables sont déclarées avec le mot clé var. Le typage en JavaScript est +// 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 aura une portée globale (plus communément trouvé en tant -// que "global scope" en anglais), et non pas une portée limitée à la fonction +// ... mais la variable aura une portée globale (plus communément trouvé en tant +// que "global scope" en anglais), et non pas une portée limitée à la fonction // dans laquelle vous l'aviez définie. // Les variables déclarées et non assignées sont undefined par défaut @@ -145,6 +162,32 @@ var someThirdVar = undefined; // ... sont deux déclarations identiques. +// Il est possible de déclarer plusieurs variables en séparant leur déclaration +// avec l'opérateur virgule +var someFourthVar = 2, someFifthVar = 4; + +// *ES6:* Les variables peuvent maintenant être déclarées avec les mots-clés +// `let` et `const` +let someSixthVar = 6; +const someSeventhVar = 7; + +// *ES6:* Le mot-clé `let` attache la variable au block de code et non à la fonction +// à l'inverse de `var` +for (let i = 0; i < 10; i++) { + x += 10; +} +i; // = raises ReferenceError + +// *ES6:* Les variables "const" doivent être assignées lors de l'initialisation +const someEighthVar = 7; +const someNinthVar; // raises SyntaxError + +// *ES6:* Modifier une variable constante ne lève par d'erreur mais échoue +// silencieusement +const someNinthVar = 9; +someNinthVar = 10; +someNinthVar; // = 9 + // 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; @@ -165,6 +208,22 @@ myArray.length; // = 4 // Ajout/Modification à un index spécifique myArray[3] = 'Hello'; +// *ES6:* Les Arrays peuvent maintenant être déstructurés en utilisant le pattern matching +var [a, b] = [1, 2]; +var [a, , b] = [1, -2, 2] + +a; // = 1 +b; // = 2 + +// *ES6:* La déstructuration peut échouer silencieusement. +// Il est aussi possible d'utiliser des valeurs par défaut +var [a] = []; +a; // = undefined; +var [a = 1] = []; +a; // = 1; +var [a = 1] = [2]; +a; // = 2; + // 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'}; @@ -179,12 +238,55 @@ myObj['my other key']; // = 4 // .. ou avec un point si la clé est un identifiant valide. myObj.myKey; // = 'myValue' +// *ES6:* Un Symbol peut être utilisé en tant que clé. Puisque ceux-ci sont uniques, +// le seul moyen d'accéder à la propriété est d'avoir une référence sur ce Symbol. +myObj["key"] = "public value"; +myObj[Symbol("key")] = "secret value"; +myObj[Symbol("key")]; // = undefined + // 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 +// *ES6:* Comme les Arrays, les Objects peuvent être déstructurés en utilisant le pattern matching +var {foo} = {foo: "bar"}; +foo // = "bar" + +// *ES6:* Les Objects déstructurés peuvent utiliser des noms de variables différents +// de ceux d'origine grâce au pattern matching +var {foo, moo: baz} = {foo: "bar", moo: "car"}; +foo // = "bar" +baz // = "car" + +// *ES6:* Il est possible d'utiliser des valeurs par défaut lor de la déstructuration d'un Object +var {foo="bar"} = {moo: "car"}; +foo // = "bar" + +// *ES6:* Une erreur lors de la déstructuration restera silencieuse +var {foo} = {}; +foo // = undefined + +// *ES6:* Les Maps sont des objets itérables de type clé-valeur. +// Il est possible de créer une nouvelle map en utilisant `new Map()` +var myMap = new Map(); + +// *ES6:* Il est possible d'ajouter un couple clé-valeur avec la méthode `.set()`, +// de récupérer une valeur avec `.get()`, +// de vérifier qu'une clé existe avec `.has()` +// et enfin de supprimer un couple clé-valeur avec `.delete()` + +myMap.set("name", "Douglas"); +myMap.get("name"); // = "Douglas" +myMap.has("name"); // = true +myMap.delete("name"); + +// *ES6:* Les Sets sont des ensembles de valeurs uniques. +// Il est possible de créer un set avec `new Set()`. +// Toute valeur non unique est ignorée. +var mySet = new Set([1,2,2]); +console.log([...mySet]); // = [1,2] /////////////////////////////////// // 3. Logique et structures de contrôle @@ -198,7 +300,7 @@ else if (count === 4) { // uniquement quand count est 4 } else { - // le reste du temps, si ni 3, ni 4. + // le reste du temps, si ni 3, ni 4. } // De même pour while. @@ -218,6 +320,22 @@ for (var i = 0; i < 5; i++){ // sera exécutée 5 fois } +// La boucle for...in permet d'itérer sur les noms des propriétés d'un objet +var description = ""; +var person = {fname:"Paul", lname:"Ken", age:18}; +for (var x in person){ + description += person[x] + " "; +} +description; // = "Paul Ken 18 " + +// *ES6:* La boucle for...of permet d'itérer sur les propriétés d'un objet +var description = ""; +var person = {fname:"Paul", lname:"Ken", age:18}; +for (var x of person){ + description += x + " "; +} +description; // = "Paul Ken 18 " + // && est le "et" logique, || est le "ou" logique if (house.size === 'big' && house.colour === 'blue'){ house.contains = 'bear'; @@ -264,7 +382,21 @@ function myFunction(thing){ } myFunction('foo'); // = 'FOO' -// Les fonctions JavaScript sont des objets de première classe, donc peuvent +// Attention, la valeur à retourner doit se trouver sur la même ligne que +// le mot-clé `return` sinon la fonction retournera systématiquement `undefined` +function myFunction(){ + return // <- semicolon automatically inserted here + {thisIsAn: 'object literal'} +} +myFunction(); // = undefined + +// *ES6:* Les paramètres des fonctions peuvent désormais avoir des valeurs par défaut +function default(x, y = 2) { + return x + y; +} +default(10); // == 12 + +// 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(){ @@ -274,13 +406,17 @@ 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 +// 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, une portée d'action limitée, pour +// *ES6:* Introduction d'un sucre syntaxique permettant de créer +// une fonction anonyme de la forme : `param => returnValue`. +setTimeout(() => console.log('5 seconds, are up.'), 5000); + +// Le Javascript crée uniquement un scope, une portée d'action limitée, pour // les fonctions, et pas dans les autres blocs. if (true){ var i = 5; @@ -293,7 +429,7 @@ i; // = 5 - et non undefined comme vous pourriez vous y attendre 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, - // le scope global sera en fait local au module dans lequel vous + // le scope global sera en fait local au module dans lequel vous // vous trouvez. http://nodejs.org/api/globals.html window.permanent = 10; })(); @@ -302,8 +438,8 @@ i; // = 5 - et non undefined comme vous pourriez vous y attendre temporary; // raises ReferenceError permanent; // = 10 -// Une des fonctionnalités les plus puissantes de Javascript est le système de -// closures. Si une fonction est définie dans une autre fonction, alors la +// Une des fonctionnalités 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){ @@ -318,6 +454,18 @@ function sayHelloInFiveSeconds(name){ } sayHelloInFiveSeconds('Adam'); // ouvre un popup avec 'Hello, Adam!' dans 5sec +// *ES6:* Les paramètres des fonctions appelées avec un tableau en entré +// préfixé par `...` vont se peupler avec les éléments du tableau +function spread(x, y, z) { + return x + y + z; +} +spread(...[1,2,3]); // == 6 + +// *ES6:* Les fonctions peuvent recevoir les paramètres dans un tableau en utilisant l'opérateur `...` +function spread(x, y, z) { + return x + y + z; +} +spread(...[1,2,3]); // == 6 /////////////////////////////////// // 5. Encore plus à propos des Objets; Constructeurs and Prototypes @@ -340,7 +488,7 @@ myObj = { }; myObj.myFunc(); // = 'Hello world!' -// La valeur de "this" change de par l'endroit où la fonction est appelée, et +// 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; @@ -356,7 +504,7 @@ myObj.myOtherFunc = myOtherFunc; myObj.myOtherFunc(); // = 'HELLO WORLD!' // Le contexte correspond à la valeur de "this". -// Nous pouvons aussi spécifier un contexte, forcer la valeur de "this, +// Nous pouvons aussi spécifier un contexte, forcer la valeur de "this, // pour une fonction quand elle est appelée grâce à "call" ou "apply". var anotherFunc = function(s){ return this.myString + s; @@ -371,19 +519,19 @@ 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" fonctionnenent uniquement au moment de l'appel de la -// fonction. Pour lier le contexte de façon permanente, nous pouvons utiliser +// Mais, "call" and "apply" fonctionnenent uniquement au moment de l'appel de la +// fonction. Pour lier le contexte de façon permanente, nous pouvons utiliser // "bind" pour garder une référence à la fonction avec ce "this". 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 +// "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 +// 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(){ @@ -395,8 +543,8 @@ myNewObj.myNumber; // = 5 // Chaque objet en Javascript a un "prototype". Quand vous essayez d'accéder à // une propriété que l'objet n'a pas, l'interpréteur va regarder son prototype. -// Quelques 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 +// Quelques 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 certains des navigateurs actuels. var myObj = { myString: 'Hello world!' @@ -478,7 +626,7 @@ String.prototype.firstCharacter = function(){ '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 +// 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 à @@ -492,31 +640,83 @@ if (Object.create === undefined){ // pour ne pas reécrire si la fonction existe return new Constructor(); } } + +// *ES6:* Les objets peuvent être équipés de proxies qui permettent d'intercepter +// les actions sur leurs propriétés. Voici comment créer un proxy sur un objet : +var proxyObject = new Proxy(object, handler); + +// *ES6:* Les méthodes d'un objet handler sont appelées lors de l'interception d'une action. +// La méthode `.get()` est appelée à chaque lecture d'une propriété +// tandis que la méthode `.set()` est appelée à chaque écriture. +var handler = { + get (target, key) { + console.info('Get on property' + key); + return target[key]; + }, + set (target, key, value) { + console.info('Set on property' + key); + return true; + } +} + +// *ES6:* Les classes peuvent désormais être définies en utilisant le mot-clé `class`. +// Le constructeur s'appelle `constructor` et les méthodes statiques utilisent le mot-clé `static` +class Foo { + constructor() {console.log("constructing Foo");} + bar() {return "bar";} + static baz() {return "baz";} +} + +// *ES6:* Les objets issus des classes sont initialisés avec le mot-clé `new`. +// Il est possible d'hériter d'une classe avec le mot-clé `extends` +var FooObject = new Foo(); // = "constructing Foo" +class Zoo extends Foo {} + +// *ES6:* Les méthodes statiques doivent être appelées par la classe, les autres méthodes par l'objet +Foo.baz() // = "baz" +FooObject.bar() // = "bar" + +// *ES6:* Il est désormais possible d'exporter des valeurs en tant que module. +// Les exports peuvent être n'importe quel objet, valeur ou fonction. +var api = { + foo: "bar", + baz: "ponyfoo" +}; +export default api; + +// *ES6:* La syntaxe `export default` permet d'exporter l'objet sans en changer le nom. +// Il y a plusieurs façons de l'importer: +import coolapi from "api"; // = importe le module dans la variable `coolapi` +import {foo, baz} from "api"; // = importe les attributs `foo` et `baz` du module +import {foo as moo, baz} from "api"; // = importe les attributs `foo` (en le renommant `moo`) et `baz` du module +import _, {map} from "api"; // = importe les exports par défaut ET `map` +import * as coolapi from "api"; // = importe le namespace global du module + ``` ## 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 +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 +à 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. +[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. +[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 +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. |