diff options
Diffstat (limited to 'fr-fr/javascript-fr.html.markdown')
| -rw-r--r-- | fr-fr/javascript-fr.html.markdown | 508 |
1 files changed, 508 insertions, 0 deletions
diff --git a/fr-fr/javascript-fr.html.markdown b/fr-fr/javascript-fr.html.markdown new file mode 100644 index 00000000..598fb6af --- /dev/null +++ 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. |