Added French translation for Javascript

2024-12-23 15:24:09 +03:00 · 2014-08-20 02:01:40 +02:00 · 2014-08-20 02:01:40 +02:00 · ddd4db06ca
commit ddd4db06ca
parent 791edecd78
1 changed files with 508 additions and 0 deletions
--- a/fr-fr/javascript-fr.html.markdown
+++ b/fr-fr/javascript-fr.html.markdown
@ -0,0 +1,508 @@
+---
+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.
+
+///////////////////////////////////
+// 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
+
+///////////////////////////////////
+// 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
+
+///////////////////////////////////
+// 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
+if (Object.create === undefined){ // don't overwrite it if it exists
+    Object.create = function(proto){
+        // make a temporary constructor with the right prototype
+        var Constructor = function(){};
+        Constructor.prototype = proto;
+        // then use it to create a new, appropriately-prototyped object
+        return new Constructor();
+    }
+}
+
+## 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.