diff options
Diffstat (limited to 'files/fr/conflicting/web/javascript/guide/index.html')
| -rw-r--r-- | files/fr/conflicting/web/javascript/guide/index.html | 899 |
1 files changed, 899 insertions, 0 deletions
diff --git a/files/fr/conflicting/web/javascript/guide/index.html b/files/fr/conflicting/web/javascript/guide/index.html new file mode 100644 index 0000000000..a251b58105 --- /dev/null +++ b/files/fr/conflicting/web/javascript/guide/index.html @@ -0,0 +1,899 @@ +--- +title: Objets élémentaires JavaScript +slug: Web/JavaScript/Guide/Objets_élémentaires_JavaScript +tags: + - Guide + - JavaScript + - Objets JavaScript +translation_of: Web/JavaScript/Guide +translation_of_original: Web/JavaScript/Guide/Predefined_Core_Objects +--- +<p>{{jsSidebar("JavaScript Guide")}}</p> + +<p>Dans ce chapitre nous verrons les différents objets élémentaires qui existent en JavaScript : <code>Array</code>, <code>Boolean</code>, <code>Date</code>, <code>Function</code>, <code>Math</code>, <code>Number</code>, <code>RegExp</code>, et <code>String</code>.</p> + +<h2 id="Les_tableaux_objet_Array">Les tableaux : objet <code>Array</code></h2> + +<p>JavaScript ne possède pas type primitif pour les tableaux. En revanche, il est possible d'utiliser l'objet natif <code>Array</code> ainsi que ses méthodes pour manipuler des tableaux. L'objet <code>Array</code> possède différentes méthodes pour manipuler les tableaux : fusion, inverse, tri... Il possède une propriété permettant de déterminer la longueur du tableau et d'autres propriétés qu'on peut utiliser avec les expressions rationnelles.</p> + +<p>Un <em>tableau</em> est un ensemble ordonné de valeurs auxquelles on peut faire référence via un nom et un indice. Si par exemple on utilise un tableau <code>reg </code>qui contient un registre de noms indicés (autrement dit dont la position dans le tableau est déterminée) par un identifiant : on aurait <code>reg[1]</code> pour le premier nom, <code>reg[2]</code> pour le second et ainsi de suite/</p> + +<h3 id="Créer_un_tableau">Créer un tableau :</h3> + +<p>Les instructions suivantes permettent de créer des objets <code>Array</code> équivalents :</p> + +<div> +<pre class="brush: js">var arr = new Array(element0, element1, ..., elementN); +var arr = Array(element0, element1, ..., elementN); +var arr = [element0, element1, ..., elementN]; +</pre> +</div> + +<p><code>element0, element1, ..., elementN</code> est la liste des valeurs des éléments du tableau. Quand ces valeurs sont fournies, les éléments du tableau sont initialisés avec ses valeurs. La propriété <code>length </code>vaudra alors le nombre d'arguments.</p> + +<p>La dernière syntaxe, utilisant des crochets, est appelée « littéral de tableau » ou « initialisateur de tableau ». C'est la forme la plus courte pour créer un tableau et c'est cette forme qui est souvent préférée. Voir la page <a href="/fr/docs/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Litt.C3.A9raux_de_tableaux" title="/fr/docs/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Litt.C3.A9raux_de_tableaux">Littéraux de tableaux</a> pour plus de détails.</p> + +<p>Lorsqu'on souhaite créer un tableau de longueur non nulle mais qui ne contient aucun élément, les syntaxes suivantes peuvent être utilisées :</p> + +<pre class="brush: js">var arr = new Array(longueurTabl); +var arr = Array(longueurTabl); + +// Ces instructions ont le même effet +var arr = []; +arr.length = longueurTabl; +</pre> + +<p>Dans le code ci-dessus, <code>longueurTabl</code> doit être du type <code>Number</code>. Si ce n'est pas le cas, un tableau avec une seule valeur, celle fournie, <code>longueurTabl</code>, sera créé. Si on appelle <code>arr.length</code>, on aura bien <code>longueurTabl</code>, en revanche le tableau ne contiendra que des éléments vides (indéfinis). Si on utilise une boucle <code>for...in</code> sur le tableau, aucun des éléments du tableau ne sera renvoyé.</p> + +<p>En plus de définir une nouvelle variable en lui assignant un tableau, on peut également assigner les tableaux à une propriété d'un nouvel objet ou d'un objet existant :</p> + +<pre class="brush: js">var obj = {}; +// ... +obj.prop = [element0, element1, ..., elementN]; + +// OU +var obj = {prop: [element0, element1, ...., elementN]} +</pre> + +<p>Si on souhaite initialiser un tableau avec un seul élément qui est un nombre, on doit utiliser la syntaxe avec crochets. En effet, si on utilise le constructeur <code>Array()</code> auquel on passe un seul argument numérique, celui-ci sera interprété comme <code>longueurTabl</code>, et non pas comme le seul élément du tableau.</p> + +<pre><code>var arr = [42]; +var arr = Array(42); // Crée un tableau sans élément mais de longueur 42 + +// L'instruction ci-avant est équivalente à +var arr = []; +arr.length = 42; +</code> +</pre> + +<p>Si on appelle le constructeur <code>Array() </code>avec un argument qui n'est pas un nombre entier (dont la partie décimale est non nulle), on obtiendra une erreur <code>RangeError</code>. Voici un exemple :</p> + +<pre>var arr = Array(9.3); // RangeError: Invalid array length +</pre> + +<p>Si on souhaite créer des tableaux d'un seul élément (peu importe le type), il est plus adapté d'utiliser des littéraux de tableaux ou de créer un tableau vide puis d'y ajouter la valeur.</p> + +<h3 id="Remplir_un_tableau">Remplir un tableau</h3> + +<p>Il est possible de remplir un tableau en affectant des valeurs à ses différents éléments :</p> + +<pre class="brush: js">var reg = []; +reg[0] = "Casey Jones"; +reg[1] = "Phil Lesh"; +reg[2] = "August West"; +</pre> + +<p><strong>Note :</strong> Si on utilise les crochets et un nombre décimal non entier, une propriété sera créée pour l'objet mais cela ne créera pas un élément du tableau.</p> + +<pre> var arr = []; +arr[3.4] = "Oranges"; +console.log(arr.length); // 0 +console.log(arr.hasOwnProperty(3.4)); // true +</pre> + +<p>On peut également remplir un tableau à la création :</p> + +<pre class="brush: js">var monTableau = new Array("Hello", maVar, 3.14159); +var monTableau = ["Mangue", "Pomme", "Orange"] +</pre> + +<h3 id="Faire_référence_aux_éléments_d'un_tableau">Faire référence aux éléments d'un tableau</h3> + +<p>Il est possible de faire référence aux élément d'un tableau en utilisant leur indice dans ce tableau. Ainsi, si on définit le tableau suivant :</p> + +<pre class="brush: js">var monTableau = ["Vent", "Eau", "Feu"]; +</pre> + +<p>On peut faire référence au premier élément du tableau en utilisant <code>monTableau[0]</code> et au second élément en utilisant <code>monTableau[1]</code>. Les indices des éléments d'un tableau commencent à zéro.</p> + +<p><strong>Note :</strong> L'opérateur du tableau (les crochets) est aussi utilisé pour accéder aux propriétés du tableau (en effet les tableaux sont des objets en JavaScript, et on peut donc utiliser leurs propriétés). Par exemple :</p> + +<pre> var tabl = ["un", "deux", "trois"]; +tabl[2]; // trois +tabl["length"]; // 3 +</pre> + +<h3 id="La_propriété_length">La propriété <code>length</code></h3> + +<p>En termes d'implémentation, les éléments d'un tableau sont en fait stockés comme des propriétés de l'objet et l'indice de l'élément est le nom de la propriété. La propriété <code>length</code> est spéciale : elle renvoie toujours l'indice du dernier élément plus 1. Attention : les indices d'un tableau, en JavaScript, commencent à 0 et pas à 1.</p> + +<pre class="brush: js">var chats = []; +chats[30] = ['Nyan']; +print(chats.length); // 31 +</pre> + +<p>Il est également possible d'affecter une valeur à la propriété <code>length</code>. Si on lui assigne une valeur inférieure au nombre d'éléments du tableau : le tableau sera tronqué. Si on lui affecte la valeur 0, le tableau sera entièrement vidé.</p> + +<pre class="brush: js">var chats = ['Marie', 'Toulouse', 'Berlioz']; +console.log(chats.length); // 3 + +chats.length = 2; +console.log(chats); // affiche "Marie,Toulouse" - Berlioz a été retiré + +chats.length = 0; +console.log(chats); // Rien n'est affiché : tableau vide + +chats.length = 3; +console.log(cats); // [undefined, undefined, undefined] +</pre> + +<h3 id="Effectuer_des_boucles_sur_des_tableaux">Effectuer des boucles sur des tableaux</h3> + +<p>On sera souvent amené à faire des boucles sur les valeurs d'un tableau pour répéter un traitement sur chacune d'elle. La façon la plus simple de faire des boucles est la suivante :</p> + +<pre class="brush: js">var couleurs = ['rouge', 'vert', 'bleu']; +for (var i = 0; i < couleurs.length; i++) { + console.log(couleurs[i]); +} +</pre> + +<p>Si on est certain qu'aucun des éléments du tableau ne pourra être évalué à <code>false</code>. Si par exemple le tableau est constitué d'éléments du <a href="/fr/docs/R%C3%A9f%C3%A9rence_DOM_Gecko">DOM</a>, on peut utiliser la syntaxe suivante, plus efficace :</p> + +<pre class="brush: js">var divs = document.getElementsByTagName('div'); +for (var i = 0, div; div = divs[i]; i++) { + /* Effectuer un traitement sur les div */ +} +</pre> + +<p>En faisant cela, on évite de répéter le test qui consiste à vérifier la longueur du tableau et on s'assure que la variable <code>div</code> est réassignée à chaque passage dans la boucle.</p> + +<p>La méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach"><code>forEach()</code></a>, introduite avec JavaScript 1.6, permet de boucler sur un tableau d'une autre façon :</p> + +<pre class="brush: js">var couleurs = ['rouge', 'vert', 'bleu']; +couleurs.forEach(function(couleur) { + console.log(couleur); +}); +</pre> + +<p>La fonction, passée en argument de la méthode <code>forEach</code> est exécutée pour chaque élément du tableau (qui sera passé en argument de cette fonction). Les éléments du tableau non assignés ne sont pas traités.</p> + +<p>Les éléments du tableau qui n'ont pas été définis lors de la création du tableau ne sont pas utilisés avec <code>forEach, </code>en revanche lorsque <code>undefined</code> a été explicitement assigné à un élément du tableau, il est pris en compte :</p> + +<pre class="brush: js">var array = ['premier', 'second', , 'quatrième']; + +// la boucle ci-dessous renvoie ['premier', 'second', 'quatrième']; +array.forEach(function(element) { + console.log(element); +}) + +if(array[2] === undefined) { console.log('array[2] vaut undefined'); } // true + +var array = ['premier', 'second', undefined, 'quatrième']; + +//la boucle ci-dessous renvoie ['premier', 'second', undefined, 'quatrième']; +array.forEach(function(element) { + console.log(element); +})</pre> + +<p>Les éléments d'un tableau étant stockés comme des propriétés d'un tableau, il n'est pas conseillé d'utiliser de boucle <code>for...in</code> pour traiter les tableaux car on traitera les éléments du tableau ainsi que toutes les propriétés énumérables.</p> + +<h3 id="Méthodes_de_l'objet_Array">Méthodes de l'objet <code>Array</code></h3> + +<p>L'objet <code>Array</code> possède les méthodes suivantes :</p> + +<ul> + <li><a href="/fr/docs/JavaScript/R%C3%A9f%C3%A9rence_JavaScript/R%C3%A9f%C3%A9rence_JavaScript/Objets_globaux/Array/concat"><code>concat()</code></a> : fusionne deux tableaux et renvoie le résultat de cette fusion + + <pre class="brush: js">var monTableau = new Array("1", "2", "3"); +monTableau = monTableau.concat("a", "b", "c"); // monTableau vaut maintenant ["1", "2", "3", "a", "b", "c"] +</pre> + </li> + <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/join"><code>join(délimiteur = ",")</code></a> fusionne les éléments d'un tableau en une seule chaîne, en utilisant un délimiteur : + <pre class="brush: js">var monTableau = new Array("Air", "Eau", "Feu"); +var liste = monTableauArray.join(" - "); // "Air - Eau - Feu" +</pre> + </li> + <li><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/push"><code>push()</code></a> ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la longueur du tableau après cet ajout : + <pre class="brush: js">var monTableau = new Array("1", "2"); +monTableau.push("3"); // monTableau vaut maintenant ["1", "2", "3"] +</pre> + </li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/pop"><code>pop()</code></a> retire le dernier élément d'un tableau et renvoie cet élément : + <pre class="brush: js">var monTableau = new Array("1", "2", "3"); +var dernier = monTableau.pop(); // monTableau vaut ["1", "2"] et dernier = "3" +</pre> + </li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/shift"><code>shift()</code></a> retire le premier élément du tableau et renvoie cet élément : + <pre class="brush: js">var monTableau = new Array ("1", "2", "3"); +var premier = monTableau.shift(); // monTableau vaut ["2", "3"], premier vaut "1" +</pre> + </li> + <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/unshift"><code>unshift()</code></a> ajoute un ou plusieurs éléments en premier(s) élément(s) dans un tableau et renvoie la nouvelle longueur : + <pre class="brush: js">var monTableau = new Array ("1", "2", "3"); +monTableau.unshift("4", "5"); // monTableau devient ["4", "5", "1", "2", "3"]</pre> + </li> + <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/slice"><code>slice(indice_debut, jusqu_indice)</code></a> extrait une portion d'un tableau et renvoie un nouveau tableau : + <pre class="brush: js">var monTableau = new Array ("a", "b", "c", "d", "e"); +monTableau = monTableau.slice(1, 4); /* commencer à 1 et jusqu'à l'indice 3, renvoyant + ainsi [ "b", "c", "d"] */ +</pre> + </li> + <li><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/splice"><code>splice(indice, nombre_a_enlever, ajout_element1, ajout_element2, ...)</code></a> retire des éléments d'un tableau et les remplace si des valeurs sont fournies : + <pre class="brush: js">var monTableau = new Array ("1", "2", "3", "4", "5"); +monTableau.splice(1, 3, "a", "b", "c", "d"); // monTableau vaut ["1", "a", "b", "c", "d", "5"] + // ce code commence à l'indice 1 (où il y a la valeur "2"), retire 3 éléments + // puis insère les éléments fournis à partir de cet indice +</pre> + </li> + <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/reverse"><code>reverse()</code></a> transpose les éléments d'un tableau : le premier élément du tableau et le dernier devient le premier : + <pre class="brush: js">var monTableau = new Array ("1", "2", "3"); +monTableau.reverse(); // transpose le tableau qui devient [ "3", "2", "1" ] +</pre> + </li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/sort"><code>sort()</code></a> trie les éléments d'un tableau : + <pre class="brush: js">var monTableau = new Array("Air", "Eau", "Feu"); +monTableau.sort(); // trie le tableau qui devient [ "Air", "Eau", "Feu" ] +</pre> + + <p><code>sort()</code> peut également prendre en argument une fonction de rappel (<em>callback</em> en anglais) qui détermine la relation d'ordre selon laquelle les éléments sont comparés. Cette fonction compare deux valeurs et renvoie l'une de ces trois valeurs :</p> + + <ul> + <li>Si <code>a</code> est inférieur à <code>b</code> selon la relation d'ordre : -1 (ou tout autre nombre négatif)</li> + <li>Si <code>a</code> est supérieur à <code>b</code> selon la relation d'ordre : 1 (ou tout autre nombre positif)</li> + <li>Si <code>a</code> et<code> b</code> sont égaux selon la relation d'ordre : 0.</li> + </ul> + + <p>Par exemple, on peut utiliser la fonction ci-après pour trier selon la dernière lettre d'un tableau :</p> + + <pre class="brush: js">var triFn = function(a, b){ + if (a[a.length - 1] < b[b.length - 1]) return -1; + if (a[a.length - 1] > b[b.length - 1]) return 1; + if (a[a.length - 1] == b[b.length - 1]) return 0; +} +monTableau.sort(triFn); // tri le tableau qui deviendra +//monTableau = ["Air","Eau","Feu"]</pre> + </li> +</ul> + +<p>Du code compatible avec les anciens navigateurs, pour remplacer ces fonctions, est disponible sur les pages qui concernent ces fonctions. Le support des navigateurs pour ces fonctions est détaillé <a class="external" href="http://www.robertnyman.com/javascript/" title="http://www.robertnyman.com/javascript/">ici (en anglais)</a>.</p> + +<ul> + <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/indexOf"><code>indexOf(élémentCherché[, indiceDebut])</code></a> permet de chercher dans le tableau l'élément <code>élémentCherché</code> et renvoie le premier indice où l'élément est trouvé. + + <pre class="brush: js">var a = ['a', 'b', 'a', 'b', 'a']; +alert(a.indexOf('b')); // Affiche 1 +// Ensuite, on cherche après la première correspondance +alert(a.indexOf('b', 2)); // Affiche 3 +alert(a.indexOf('z')); // Affiche -1 car 'z' n'a pas été trouvé +</pre> + </li> + <li><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/lastIndexOf"><code>lastIndexOf(élémentCherché[, indiceDebut])</code></a> fonctionne comme <code>indexOf</code>, mais cherche à partir de la fin du tableau. + <pre class="brush: js">var a = ['a', 'b', 'c', 'd', 'a', 'b']; +alert(a.lastIndexOf('b')); // Affiche 5 +// Ensuite on cherche avant la dernière correspondance +alert(a.lastIndexOf('b', 4)); // Affiche 1 +alert(a.lastIndexOf('z')); // Affiche -1 +</pre> + </li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach"><code>forEach(callback[, thisObject])</code></a>exécute la fonction <code>callback</code> sur chaque élément du tableau. + <pre class="brush: js">var a = ['a', 'b', 'c']; +a.forEach(alert); // Affiche chaque élément +</pre> + </li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map"><code>map(callback[, thisObject])</code></a> renvoie un nouveau tableau composé des résultats de l'application de la fonction <code>callback</code> sur chaque élément du tableau initial + <pre class="brush: js">var a1 = ['a', 'b', 'c']; +var a2 = a1.map(function(item) { return item.toUpperCase(); }); +alert(a2); // affiche A,B,C +</pre> + </li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/filter"><code>filter(callback[, thisObject])</code></a> renvoie un nouveau tableau composé des éléments du tableau initial pour lesquels la fonction callback a renvoyé <code>true</code>. + <pre class="brush: js">var a1 = ['a', 10, 'b', 20, 'c', 30]; +var a2 = a1.filter(function(item) { return typeof item == 'number'; }); +alert(a2); // affiche 10,20,30 +</pre> + </li> + <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/every"><code>every(callback[, thisObject])</code></a> renvoie true si la fonction <code>callback</code> renvoie <code>true</code> pour chaque élément du tableau + <pre class="brush: js">function isNumber(value){ + return typeof value == 'number'; +} +var a1 = [1, 2, 3]; +alert(a1.every(isNumber)); // Affiche true +var a2 = [1, '2', 3]; +alert(a2.every(isNumber)); // Affiche false +</pre> + </li> + <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/some"><code>some(callback[, thisObject])</code></a> renvoie true si la fonction <code>callback</code> renvoie true pour au moins un élément du tableau + <pre class="brush: js">function isNumber(value){ + return typeof value == 'number'; +} +var a1 = [1, 2, 3]; +alert(a1.some(isNumber)); // Affiche true +var a2 = [1, '2', 3]; +alert(a2.some(isNumber)); // Affiche true +var a3 = ['1', '2', '3']; +alert(a3.some(isNumber)); // Affiche false +</pre> + </li> +</ul> + +<p>Les méthodes ci-dessus utilisent des fonctions de rappel (<em>callback</em>) et sont appelées méthodes <em>itératives</em>. En effet, d'une certaine façon, elles bouclent sur le tableau. Chacune de ces méthodes possède un argument facultatif <code>thisObject</code>. Si cet argument est utilisé, il représentera le contexte utilisé pour le mot-clé <code>this</code> utilisé dans la fonction de rappel. S'il n'est pas utilisé et que la fonction est appelée en dehors d'un contexte objet donné <code>this</code> fera référence à l'objet global (<a href="/fr/docs/DOM/window" title="/fr/docs/DOM/window"><code>window</code></a>). Pour plus d'informations, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this"><code>this</code></a>.</p> + +<p>En réalité, la fonction de rappel est utilisé avec trois arguments. Le premier est la valeur de l'élément, le deuxième est l'indice de l'élément et le troisième est la référence au tableau. Étant donné que JavaScript ignore les arguments en trop pour une fonction, on peut très bien appeler une fonction qui ne prend qu'un seul paramètre (comme <code>alert</code> par exemple).</p> + +<ul> + <li><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/Reduce"><code>reduce(callback[, initialValue])</code></a> applique la fonction <code>callback(valeur1, valeur2)</code> afin de réduire le tableau à une seule valeur. + + <pre class="brush: js">var a = [10, 20, 30]; +var total = a.reduce(function(premier, second) { return first + second; }, 0); +alert(total) // Affiche 60 +</pre> + </li> + <li><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/ReduceRight"><code>reduceRight(callback[, initialValue])</code></a> fonctionne comme <code>reduce()</code> mais en partant du dernier élément.</li> +</ul> + +<p><code>reduce</code> et <code>reduceRight</code> sont des méthodes itératives plus compliquées. Ces méthodes sont à utiliser pour des algorithmes récursifs pour réduire une séquence d'objet en une seule valeur.</p> + +<h3 id="Tableaux_à_plusieurs_dimensions">Tableaux à plusieurs dimensions</h3> + +<p>Les tableaux peuvent être imbriqués, cela signifie qu'un tableau peut contenir un autre tableau comme élément. De cette façon, on peut créer des tableaux à plusieurs dimensions.</p> + +<p>Voici par exemple la création d'un tableau de dimension 2.</p> + +<pre class="brush: js">var a = new Array(4); +for (i = 0; i < 4; i++) { + a[i] = new Array(4); + for (j = 0; j < 4; j++) { + a[i][j] = "[" + i + "," + j + "]"; + } +} +</pre> + +<p>Le code précédent permettra de créer un tableau avec ces lignes :</p> + +<pre>Ligne 0: [0,0] [0,1] [0,2] [0,3] +Ligne 1: [1,0] [1,1] [1,2] [1,3] +Ligne 2: [2,0] [2,1] [2,2] [2,3] +Ligne 3: [3,0] [3,1] [3,2] [3,3] +</pre> + +<h3 id="Tableaux_et_expressions_rationnelles">Tableaux et expressions rationnelles</h3> + +<p>Lorsqu'un tableau provient d'une correspondance entre une expression rationnelle et une chaîne de caractères, le tableau possède des propriétés et des éléments fournissant des informations sur la correspondance. Un tel tableau peut être renvoyé par <a href="/fr/docs/JavaScript/Reference/Objets_globaux/Object/RegExp/Exec"><code>RegExp.exec()</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/match"><code>String.match()</code></a>, et <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/split"><code>String.split()</code></a>. Pour plus d'informations sur l'utilisation des tableaux et des expressions rationnelles, voir la page <a href="/fr/docs/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res">Expressions rationnelles</a>.</p> + +<h3 id="Manipuler_des_objets_semblables_aux_tableaux">Manipuler des objets semblables aux tableaux</h3> + +<p>Certains objets JavaScript, comme <a href="/fr/docs/Web/API/NodeList"><code>NodeList</code></a> (renvoyé par la méthode <a href="/fr/docs/DOM/document.getElementsByTagName"><code>document.getElementsByTagName()</code></a>) ou <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments"><code>arguments</code></a> (disponible au sein d'une fonction) ressemblent à des tableaux et peuvent se comporter comme tels, en revanche ils ne possèdent pas toutes les propriétés d'un objet de type <code>Array</code>. Par exemple, l'objet <code>arguments</code> possède un attribut <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/length"><code>length</code></a> mais ne possède pas la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach"><code>forEach()</code></a>.</p> + +<p>Les méthodes génériques, disponibles à partir de JavaScript 1.6, permettent d'utiliser des méthodes de l'objet <code>Array</code> sur des objets semblables à des tableaux. Chaque méthode standard possède un équivalent disponible via l'objet <code>Array</code> lui-même. Ainsi :</p> + +<pre class="brush: js"> function alertArguments() { + Array.forEach(arguments, function(item) { + alert(item); + }); + } +</pre> + +<p>Dans les versions plus anciennes, il est possible d'émuler ces méthodes génériques en utilisant la méthode <code>call</code> fournie par les fonctions :</p> + +<pre class="brush: js"> Array.prototype.forEach.call(arguments, function(item) { + alert(item); + }); +</pre> + +<p>Ces méthodes génériques peuvent également être utilisées sur les chaînes de caractères. En effet, elles fournissent un accès séquentiel aux différents caractères, comme pour les différents éléments d'un tableau :</p> + +<pre class="brush: js">Array.forEach("une chaine", function(caractere) { + alert(caractere); +});</pre> + +<p>Voici d'autres exemples utilisant ces méthodes sur des chaînes de caractères. Ces exemples utilisent également les <a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.8#Fermetures_d.27expressions">fermetures d'expressions de JavaScript 1.8</a> :</p> + +<pre class="brush: js">var str = 'abcdef'; +var filtreConsonnes = Array.filter(str, function (c) !(/[aeiou]/i).test(c)).join(''); // 'bcdf' +var voyellesPrésentes = Array.some(str, function (c) (/[aeiou]/i).test(c)); // true +var toutesVoyelles = Array.every(str, function (c) (/[aeiou]/i).test(c)); // false +var intercaleZéros = Array.map(str, function (c) c+'0').join(''); // 'a0b0c0d0e0f0' +var valeurNumérique = Array.reduce(str, function (c, c2) c+c2.toLowerCase().charCodeAt()-96, 0); +// 21 (reduce() since JS v1.8) +</pre> + +<p>Les méthodes <code>filter</code> et <code>map</code> ne renvoient pas directement les caractères comme faisant partie d'une même chaîne de caractères mais le résultat de l'opération sur chacun des caractères, il est donc nécessaire d'utiliser <code>join</code> pour obtenir une chaîne de caractères finale.</p> + +<h3 id="Tableaux_définis_par_compréhensions">Tableaux définis par compréhensions</h3> + +<p>À partir de JavaScript 1.7, les définitions de tableaux par compréhension permettent de construire, simplement, un tableau se basant sur le contenu d'un premier tableau. Ces compréhensions sont souvent utilisées en lieu et place des méthodes <code>map()</code> et <code>filter()</code>.</p> + +<p>Dans l'exemple suivant, on définit un tableau par compréhension pour qu'il contienne les doubles des éléments du premier tableau :</p> + +<pre class="brush: js">var nombres = [1, 2, 3, 4]; +var doubles = [i * 2 for (i of nombres)]; +alert(doubles); // Affiche 2,4,6,8 +</pre> + +<p>Cela est équivalent à l'opération <code>map()</code> qui suit :</p> + +<pre class="brush: js">var doubles = nombres.map(function(i){return i * 2;}); +</pre> + +<p>Les compréhensions peuvent également être utilisées afin de restreindre un tableau à certaines valeurs correspondants à un critère. On peut par exemple ne garder que les nombres pairs :</p> + +<pre class="brush: js">var nombres = [1, 2, 3, 21, 22, 30]; +var pairs = [i for (i of nombres) if (i % 2 === 0)]; +alert(pairs); // Affiche 2,22,30 +</pre> + +<p><code>filter()</code> aurait également pu être utilisé :</p> + +<pre class="brush: js">var pairs = nombres.filter(function(i){return i % 2 === 0;}); +</pre> + +<p>Les opérations du style de <code>map()</code> et <code>filter()</code> peuvent être combinées en une seule compréhension. Voici par exmple un tableau défini par compréhension qui contient les doubles des nombres pairs du premier tableau :</p> + +<pre class="brush: js">var nombres = [1, 2, 3, 21, 22, 30]; +var pairsDoubles = [i * 2 for (i of nombres) if (i % 2 === 0)]; +alert(pairsDoubles); // Affiche 4,44,60 +</pre> + +<p>Les crochets utilisés pour les définitions par compréhension permettent d'introduire une portée implicite. Les nouvelles variables (comme i dans l'exemple) sont utilisées comme si elles avaient été déclarées avec <a href="/fr/docs/Web/JavaScript/Reference/Instructions/let"><code>let</code></a>. Elles ne seront donc pas disponibles en dehors de la compréhension.</p> + +<p>Il n'est pas nécessaire de partir d'un tableau pour utiliser une telle définition, on peut également utiliser les <a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">itérateurs et les générateurs</a>.</p> + +<p>On peut également utiliser des chaînes de caractères comme objet de départ :</p> + +<pre class="brush: js">var str = 'abcdef'; +var filtreConsonnes = [c for (c of str) if (!(/[aeiouAEIOU]/).test(c)) ].join(''); // 'bcdf' +var intercaleZéros = [c+'0' for (c of str) ].join(''); // 'a0b0c0d0e0f0' +</pre> + +<p>Ici aussi, il faut utiliser la méthode <code>join()</code> pour obtenir une chaîne de caractère unique en sortie.</p> + +<h2 id="L'objet_Boolean">L'objet <code>Boolean</code></h2> + +<p>L'objet <code>Boolean</code> est une « enveloppe » (ou <em>wrapper</em> en anglais) autour du type primitif booléen. La syntaxe suivante permet de créer un objet <code>Boolean</code> :</p> + +<pre class="brush: js">var nomObjetBooléen = new Boolean(valeur); +</pre> + +<p>Attention, il ne faut pas confondre les valeurs <code>true</code> et <code>false</code> du type primitif booléen et les valeurs true et false de l'objet <code>Boolean</code>. Tout objet dont la valeur n'est pas <code>undefined</code> , <code>null</code>, <code>0</code>, <code>NaN</code>, ou la chaîne de caractères vide (y compris un objet <code>Boolean</code> dont la valeur est false) sera évalué comme <code>true</code> dans un test conditionnel. Voir l'instruction <a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if...else </a>pour plus d'informations.</p> + +<h2 id="Objet_Date">Objet <code>Date</code></h2> + +<p>JavaScript ne possède pas de type de données pour gérer les dates. En revanche, il est possible d'utiliser un objet <code>Date</code>, ainsi que ses méthodes, pour manipuler de telles données. L'objet<code> Date</code> possède différentes méthodes pour définir des dates, obtenir des informations sur une dates et les manipuler, il ne possède aucune propriété.</p> + +<p>La gestion des dates en JavaScript est similaire à celle effectuée par Java. Les deux languages partagent de nombreuses méthodes et ils stockent tous les deux les dates comme le nombre de millisecondes depuis le premier janvier 1970 à 00h00m00 UTC.</p> + +<p>L'intervalle qu'on peut utiliser avec l'objet <code>Date</code> est entre100 000 000 jours avant le premier janvier 1970 UTC et 100 000 000 jours après.</p> + +<p>Pour créer un tel objet :</p> + +<pre class="brush: js">var nomObjetDate = new Date([paramètres]); +</pre> + +<p><code>nomObjetDate</code> est le nom de l'objet qu'on crée. Il peut être un nouvel objet à part entière ou bien la propriété d'un objet existant.</p> + +<p>Si on utilise le constructeur Date sans le mot-clé <code>new</code>, on obtiendra seulement la date représentée dans une chaîne de caractères.</p> + +<p>On peut utiliser les <code>paramètres</code> suivants :</p> + +<ul> + <li>Aucun : on crée la date et l'heure du jour : <code>aujourdhui = new Date();</code>.</li> + <li>Une chaîne de caractères qui représente la date au format suivant "Mois_en_anglais jour, année heures:minutes:secondes." Ainsi <code>var Noel95 = new Date("December 25, 1995 13:30:00")</code>. Il est possible de ne pas renseigner les heures, minutes et secondes : les valeurs par défaut seront nulles (0).</li> + <li>Un ensemble d'entiers pour l'année, le mois et le jour<code> : var Noel95 = new Date(1995, 11, 25)</code>.</li> + <li>Un ensemble d'entiers pour l'année, le mois, le jour, l'heure, les minutes et les secondes : <code>var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);</code>.</li> +</ul> + +<p><strong>Versions antérieures à JavaScript 1.2 (inclus)</strong><br> + L'objet <code>Date</code> fonctionne de la façon suivante :</p> + +<ul> + <li>Les dates antérieures à 1970 ne sont pas autorisées.</li> + <li>JavaScript se repose sur des utilitaires de gestion des dates qui dépendent de la plate-forme utilisée : on obtient donc des comportements et des résultats différents en fonction de la plate-forme sur laquelle on se situe.</li> +</ul> + +<h3 id="Les_méthodes_de_l'objet_Date">Les méthodes de l'objet <code>Date</code></h3> + +<p>Les méthodes de l'objet <code>Date</code> sont à répartir entre quatre grandes catégories :</p> + +<ul> + <li>Les méthodes de définition <code>set...</code>, permettant de régler le jour et l'heure dans les objets <code>Date</code></li> + <li>Les méthodes d'accès <code>get...</code>, permettant d'obtenir les valeurs de la date et de l'heure des objets <code>Date</code></li> + <li>Les méthodes de conversion <code>to...</code>, qui permettent d'obtenir une mise en forme en chaîne de caractères</li> + <li>Les méthodes d'analyse (<em>parsing</em>) et les méthodes UTC, permettant de transformer certaines chaînes de caractères en <code>Date</code>.</li> +</ul> + +<p>Les deux premières catégories permettent de définir ou d'obtenir les secondes, les minutes, les heures, le jour du mois, le jour de la semaine, les mois et les années. Il existe une méthode <code>getDay</code> pour obtenir le jour de la semaine, en revanche, il n'existe pas de méthode <code>setDay</code> car le calcul du jour de la semaine se fait automatiquement. Ces méthodes utilisent des entiers, de la façon suivante :</p> + +<ul> + <li>Les secondes et minutes : 0 à 59</li> + <li>Les heures : 0 à 23</li> + <li>Les jours : 0 (Dimanche) à 6 (Samedi)</li> + <li>La date : 1 to 31 (jour du mois)</li> + <li>Les mois : 0 (janvier) à 11 (décembre)</li> + <li>Les années : années depuis 1900</li> +</ul> + +<p>Par exemple, si on veut définir la date suivante :</p> + +<pre class="brush: js">var Noel95 = new Date("December 25, 1995"); +</pre> + +<p>On aura alors <code>Noel95.getMonth()</code> qui renverra 11, Noel<code>95.getFullYear()</code> qui renverra 1995.</p> + +<p>Les méthodes <code>getTime</code> et <code>setTime</code> peuvent notamment être utilisées pour comparer des dates. La méthode <code>getTime</code> renvoie le nombre de millisecondes écoulées depuis le premier janvier 1970 00h00m00s pour un objet <code>Date</code>.</p> + +<p>De cette façon, le code suivant permet d'afficher le nombre de jours restants pour l'année courante :</p> + +<pre class="brush: js">var ajd = new Date(); +var finAnnee = new Date(1995, 11, 31, 23, 59, 59, 999); // On règle jour et mois +finAnnee.setFullYear(ajd.getFullYear()); // On règle l'année +var msParJour = 24 * 60 * 60 * 1000; // Nombre de millisecondes par jour +var joursRestants = (finAnnee.getTime() - ajd.getTime()) / msParJour; +var joursRestants = Math.round(joursRestants); //renvoie le nombre de jours restants +</pre> + +<p>Dans cet exemple, on crée un objet <code>Date</code> qui contient la date du jour. Ensuite on crée un objet <code>finAnnee</code> et on fixe son année à celle du jour courant. Ensuite, en connaissant le nombre de millisecondes dans une journée, on calcule le nombre de jours entre<code> ajd</code> et <code>finAnnee</code> en utilisant la méthode <code>getTime</code> puis en arrondissant la valeur à un nombre entier.</p> + +<p>La méthode <code>parse</code> peut s'avérer utile lorsqu'on souhaite transformer une chaîne de caractères (en anglais, attention) en une date. L'exemple qui suit utilise les méthodes <code>parse</code> et <code>setTime</code> pour assigner une valeur de date à l'objet <code>dateIPO </code>:</p> + +<pre class="brush: js">var dateIPO = new Date(); +dateIPO.setTime(Date.parse("Aug 9, 1995")); +</pre> + +<h3 id="Exemple_d'utilisation">Exemple d'utilisation</h3> + +<p>L'exemple qui suit permet de définir la fonction <code>JSClock()</code> qui renvoie l'heure au même format qu'une horloge numérique :</p> + +<pre class="brush: js">function JSClock() { + var time = new Date(); + var heure = time.getHours(); + var minute = time.getMinutes(); + var seconde = time.getSeconds(); + var temp = "" + heure; + temp += ((minute < 10) ? ":0" : ":") + minute; + temp += ((seconde < 10) ? ":0" : ":") + seconde; + return temp; +} +</pre> + +<p>La fonctionThe <code>JSClock</code> commence par créer un objet <code>Date</code> appelé <code>time</code>. Aucun argument n'est donné, c'est donc la date et l'heure courante. Ensuite, on appelle les méthodes <code>getHours</code>, <code>getMinutes</code>, et <code>getSeconds</code> pour connaître l'heure, les minutes et les secondes.</p> + +<p>Les trois instructions suivantes permettent de construire une chaîne de caractères avec la variable <code>temp</code>. On ajoute l'heure, puis les minutes (si celles-ci sont inférieures à 10, on rajoute un 0 devant), puis les secondes (de la même manière on rajoute un zéro devant si le nombre de secondes est inférieur à 10).</p> + +<h2 id="L'objet_Function">L'objet <code>Function</code></h2> + +<p>L'objet élémentaire <code>Function</code> définit une chaîne de caractères de code JavaScript qui doit être compilé comme une fonction.</p> + +<p>Pour créer un objet <code>Function</code> on peut utiliser la syntaxe suivante :</p> + +<pre class="brush: js">var functionNomObjet = new Function ([arg1, arg2, ... argn], corpsFonction); +</pre> + +<p><code>functionNomObjet</code> est le nom d'une variable ou d'une propriété d'un objet. On peut également utiliser cette syntaxe avec un objet suivi par un nom de gestionnaire d'événements en minuscules comme <code>window.onerror</code>.</p> + +<p><code>arg1</code>, <code>arg2</code>, ... <code>argn</code> sont les arguments qui sont utilisés par la fonction. Chacun de ces arguments doit être une chaîne de caractères qui est un identifiant JavaScript valide (ex : "x" ou "monFormulaire".</p> + +<p><code>corpsFonction</code> est une chaîne de caractères définissant le code JavaScript qui doit être compilé comme le code de la fonction.</p> + +<p>Les objets<code> Function</code> sont évalués à chaque fois qu'ils sont utilisés. Utiliser ces objets est moins efficaces que la déclaration de fonctions qu'on appellera au sein du code. Cela est dû au fait que les fonctions déclarées sont compilées.</p> + +<p>En plus de la définition de fonction abordée ici, on peut également les expressions de fonction ou l'instruction <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function"><code>function</code></a>. Voir la <a href="/fr/docs/Web/JavaScript/Reference">référence JavaScript</a> pour plus d'informations sur ces différentes syntaxes.</p> + +<p>Le code suivant assigne une fonction à la variable <code>setBGColor</code>. Cette fonction permet de définir la couleur d'arrière-plan du document courant.</p> + +<pre class="brush: js">var setBGColor = new Function("document.bgColor = 'antiquewhite'"); +</pre> + +<p>Pour appeler l'objet <code>Function</code>, on peut utiliser le nom de la variable comme une fonction. Le code qui suit exécute la fonction qui aura été assignée à la variable <code>setBGColor</code> :</p> + +<pre class="brush: js">var choixCouleur="antiquewhite"; +if (choixCouleur=="antiquewhite") {setBGColor()} +</pre> + +<p>On peut assigner la fonction à un gestionnaire d'événements de différentes façons :</p> + +<ol> + <li> + <pre class="brush: js">document.form1.colorButton.onclick = setBGColor; +</pre> + </li> + <li> + <pre class="brush: html"><INPUT NAME="colorButton" TYPE="button" + VALUE="Changer la couleur de l'arrière-plan" + onClick="setBGColor()"> +</pre> + </li> +</ol> + +<p>La création de la variable <code>setBGColor</code> montrée avant est similaire à la fonction suivante :</p> + +<pre class="brush: js">function setBGColor() { + document.bgColor = 'antiquewhite'; +} +</pre> + +<p>Assigner une fonction à une variable est similaire à la déclaration d'une fonction, cependant il y a quelques différences :</p> + +<ul> + <li>Lorsqu'on assigne une fonction à une variable en utilisant la syntaxe <code>var setBGColor = new Function("...")</code>, <code>setBGColor</code> est une variable dont la valeur courante est une référence à la fonction créée avec <code>new Function()</code>.</li> + <li>Quand on crée une fonction en utilisant la syntaxe <code>function setBGColor() {...}</code>, <code>setBGColor</code> n'est pas une variable, c'est le nom de la fonction.</li> +</ul> + +<p>Il est possible d'imbriquer une fonction au sein d'une fonction. La fonction imbriquée est privée, en termes de portée, pour la fonction englobante.</p> + +<ul> + <li>La fonction imbriquée peut être utilisée à partir d'instructions seulement depuis la fonction englobante.</li> + <li>La fonction imbriquée peut utiliser des arguments et des variables de la fonction englobante. La fonction englobante ne peut pas utiliser les arguments et les variables de la fonction imbriquée.</li> +</ul> + +<h2 id="L'objet_Math">L'objet <code>Math</code></h2> + +<p>L'objet élémentaire <code>Math</code> possède différentes propriétés et méthodes pour manipuler des constantes et des fonctions mathématiques. Ainsi, la propriété <code>PI</code> de cette objet possède la valeur de pi (3.141...) :</p> + +<pre class="brush: js">Math.PI +</pre> + +<p>De la même façon, cet objet met a disposition des fonctions mathématiques qui sont des méthodes de l'objet <code>Math</code>. On retrouvera des fonctions trigonométriques, logarithmiques, exponentielles... Ainsi pour utiliser la fonction sinus, on écriera :</p> + +<pre class="brush: js">Math.sin(1.56) +</pre> + +<p>Note : les arguments des méthodes trigonométriques de cet objet doivent être exprimés en radians.</p> + +<p>Le tableau suivant liste les différentes méthodes de l'objet <code>Math</code>.</p> + +<table class="standard-table"> + <caption>Tableau 7.1 Méthodes de l'objet Math</caption> + <thead> + <tr> + <th scope="col">Méthode</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>abs</code></td> + <td>Valeur absolue</td> + </tr> + <tr> + <td><code>sin</code>, <code>cos</code>, <code>tan</code></td> + <td>Fonctions trigonométriques sinus, cosinus et tangente</td> + </tr> + <tr> + <td><code>acos</code>, <code>asin</code>, <code>atan</code>, <code>atan2</code></td> + <td>Fonctions trigonométriques inverses, les valeurs renvoyées sont exprimées en radians</td> + </tr> + <tr> + <td><code>exp</code>, <code>log</code></td> + <td>Les fonctions exponentielle et logarithme (naturel ou à base <code>e</code>)</td> + </tr> + <tr> + <td><code>ceil</code></td> + <td>Renvoie le plus petit entier supérieur ou égal à l'argument</td> + </tr> + <tr> + <td><code>floor</code></td> + <td>Renvoie le plus grand entier inférieur ou égal à l'argument</td> + </tr> + <tr> + <td><code>min</code>, <code>max</code></td> + <td>Renvoie le minimum ou le maximum (respectivement) des deux arguments</td> + </tr> + <tr> + <td><code>pow</code></td> + <td>La fonction puissance, le premier argument est la base et le second argument est l'exposant</td> + </tr> + <tr> + <td><code>random</code></td> + <td>Renvoie un nombre aléatoire compris entre 0 et 1</td> + </tr> + <tr> + <td><code>round</code></td> + <td>Arrondit l'argument au plus proche entier</td> + </tr> + <tr> + <td><code>sqrt</code></td> + <td>La fonction racine carrée</td> + </tr> + </tbody> +</table> + +<p>Contrairement à beaucoup d'autres objets, on ne crée jamais d'objet <code>Math</code> personnalisé : on utilise toujours l'objet élémentaire <code>Math</code>.</p> + +<h2 id="L'objet_Number">L'objet <code>Number</code></h2> + +<p>L'objet <code>Number</code> possède des propriétés correspondantes aux constantes numériques. On y trouve : la valeur maximale qu'il est possible de représenter, la valeur minimale, les infinis (négatifs et positifs), et également la constante « not a number » ou NaN qui indique que la valeur n'est pas un nombre. Ces valeurs sont fixes, ne peuvent être changées et s'utilisent de la façon suivante :</p> + +<pre class="brush: js">var maximum = Number.MAX_VALUE; +var minimum = Number.MIN_VALUE; +var infiniPlus = Number.POSITIVE_INFINITY; +var infiniMoins = Number.NEGATIVE_INFINITY; +var nonNombre = Number.NaN; +</pre> + +<p>Il faut toujours utiliser les propriétés de l'objet <code>Number</code> lui-même et non pas celles d'un objet <code>Number</code> qui aurait été créé.</p> + +<p>Le tableau suivant liste les différents propriétés de l'objet <code>Number</code> :</p> + +<table class="standard-table"> + <caption>Tableau 7.2 Propriétés de l'objet Number</caption> + <thead> + <tr> + <th scope="col">Propriété</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>MAX_VALUE</code></td> + <td>Le plus grand nombre qu'on peut représenter</td> + </tr> + <tr> + <td><code>MIN_VALUE</code></td> + <td>Le plus petit nombre qu'on peut représenter</td> + </tr> + <tr> + <td><code>NaN</code></td> + <td>Valeur spéciale pour les valeurs non numériques</td> + </tr> + <tr> + <td><code>NEGATIVE_INFINITY</code></td> + <td>Valeur spéciale pour représenter l'infini négatif</td> + </tr> + <tr> + <td><code>POSITIVE_INFINITY</code></td> + <td>Valeur spéciale pour représenter l'infini positif</td> + </tr> + </tbody> +</table> + +<p>Le prototype <code>Number</code> fournit également des méthodes pour obtenir des informations d'objets <code>Number</code>. Le tableau suivant liste ces différentes méthodes de <code>Number.prototype</code> :</p> + +<table class="fullwidth-table"> + <caption>Tableau 7.3 Méthodes de Number.prototype</caption> + <thead> + <tr> + <th scope="col">Méthode</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>toExponential</code></td> + <td>Renvoie une chaîne de caractères représentant le nombre dans sa notation exponentielle.</td> + </tr> + <tr> + <td><code>toFixed</code></td> + <td>Renvoie une chaîne de caractères représentant le nombre dans sa notation à point fixe.</td> + </tr> + <tr> + <td><code>toPrecision</code></td> + <td>Renvoie une chaîne de caractères représentant le nombre dans sa notation à point fixe, avec une précision donnée.</td> + </tr> + <tr> + <td><code>toSource</code></td> + <td>Renvoie un littéral objet représentant l'objet <code>Number</code>. Cette valeur peut ensuite être utilisée pour créer un nouvel objet. Cette méthode surcharge la méthode <code>Object.toSource</code>.</td> + </tr> + <tr> + <td><code>toString</code></td> + <td>Renvoie une chaîne de caractères représentant l'objet. Cette méthode surcharge la méthode <code>Object.toString.</code></td> + </tr> + <tr> + <td><code>valueOf</code></td> + <td>Renvoie la valeur primitive de l'objet. Cette méthode surcharge la méthode <code>Object.valueOf</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="L'objet_RegExp">L'objet <code>RegExp</code></h2> + +<p>Pour plus d'explications sur le fonctionnement des expressions rationnelles, voir la page sur<a href="/fr/docs/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res"> les expressions rationnelles</a>.</p> + +<h2 id="L'objet_String">L'objet String</h2> + +<p>L'objet <code>String</code> est une enveloppe pour les données du type chaîne de caractères. Les littéraux de chaînes de caractères ne doivent pas être confondus avec les objets <code>String</code>. Par exemple, le code suivant crée deux choses : un littéral de chaîne de caractère,<code> s1</code>, et l'objet <code>String</code> <code>s2</code> :</p> + +<pre class="brush: js">var s1 = "truc"; //crée un littéral de chaîne de caractères +var s2 = new String("truc"); //crée un objet String +</pre> + +<p>Chacune des méthodes de l'objet <code>String</code> peut être utilisée sur une valeur qui est un littéral de chaîne de caractères (pour ce faire, JavaScript convertit automatiquement le littéral en un objet <code>String</code> temporaire, appelle la méthode voulue puis supprime l'objet temporaire). Il est également possible d'utiliser la propriété <code>String.length</code> sur un littéral de chaîne de caractères.</p> + +<p>Il est fortement recommandé d'utiliser des littéraux de chaînes de caractères à moins d'avoir spécifiquement besoin d'utiliser un objet <code>String</code>. En effet, les objets <code>String</code> peuvent avoir des effets inattendus :</p> + +<pre class="brush: js">var s1 = "2 + 2"; //crée un littéral de chaîne de caractères +var s2 = new String("2 + 2"); //crée un objet String +eval(s1); //renvoie 4 +eval(s2); //renvoie la chaîne "2 + 2"</pre> + +<p>Un objet <code>String</code> possède une seule propriété, <code>length</code>, indiquant le nombre de caractères contenus dans la chaîne de caractères. Dans le code qui suit, x recevra la valeur 13 car la chaîne "Hello, World!" possède 13 caractères :</p> + +<pre class="brush: js">var maChaine = "Hello, World!"; +var x = maChaine.length; +</pre> + +<p>Un objet possède deux types de méthodes : celles qui renvoient une chaîne modifiée à partir de l'objet initial et celles qui renvoient une version au format HTML de la chaîne. Dans la première catégorie on trouvera des méthodes comme<code> substring</code> et <code>toUpperCase</code>, dans la seconde catégorie, on trouvera notamment <code>bold</code> et <code>link</code>.</p> + +<p>Par exemple, si on utilise la chaîne précédente <code>maChaine.toUpperCase()</code> ou aussi <code>"hello, world!".toUpperCase()</code>, on obtiendra le résultat "HELLO, WORLD!".</p> + +<p>La méthode <code>substring</code> contient deux arguments et renvoie un fragment de la chaîne de caractères entre ces deux arguments qui correspondent aux indices de début et de fin du « découpage ». <code>maChaine.substring(4, 9)</code> renverra "o, Wo".</p> + +<p>L'objet <code>String</code> possède également certaines méthodes permettant d'obtenir directement des données au format HTML : des liens, du texte formaté... Ainsi on pourrait créer un hyperlien avec la méthode suivante :</p> + +<pre class="brush: js">maChaine.link("http://www.helloworld.com") +</pre> + +<p>Le tableau qui suit liste les méthodes des objets <code>String</code>.</p> + +<table class="fullwidth-table"> + <caption>Tableau 7.4 Méthodes des instances du prototype String</caption> + <thead> + <tr> + <th scope="col">Méthode</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/anchor">anchor</a></code></td> + <td>Permet de créer un ancre HTML</td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/big" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String//big">big</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/blink" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/blink">blink</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/bold" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/bold">bold</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/fixed" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/fixed">fixed</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/italics" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/italics">italics</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/small" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/small">small</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/strike" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/strike">strike</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/sub" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/sub">sub</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/sup" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/sup">sup</a></code></td> + <td>Permet de formater une chaîne de caractères au format HTML. (Note : l'utilisation du CSS peut parfois être plus judicieuse que certaines entités HTML).</td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/charAt" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/charAt">charAt</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/charCodeAt" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/charCodeAt">charCodeAt</a></code></td> + <td>Renvoie le caractère ou le code du caractère à la position indiquée dans la chaîne de caractères.</td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/indexOf" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/indexOf">indexOf</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/lastIndexOf" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/lastIndexOf">lastIndexOf</a></code></td> + <td>Renvoie la position d'un fragment de la chaîne de caractères (respectivement la dernière position).</td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/link" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/link">link</a></code></td> + <td>Crée un hyperlien HTML</td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/concat" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/concat">concat</a></code></td> + <td>Concatène deux chaînes de caractères en une chaîne de caractères.</td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/fromCharCode" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/fromCharCode">fromCharCode</a></code></td> + <td>Construit une chaîne de caractères à partir de la séquence de codes Unicodes fournie. Cette méthode appartient au prototype String mais pas aux instances objets String.</td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/split" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/split">split</a></code></td> + <td>Découpe un objet <code>String</code> en un tableau de chaînes de caractères selon un séparateur donné.</td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/slice" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/slice">slice</a></code></td> + <td>Extrait un fragment de la chaîne de caractères et renvoie une nouvelle chaîne.</td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/substring" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/substring">substring</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/substr" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/substr">substr</a></code></td> + <td>Renvoie un fragment de la chaîne de caractères à partir d'un indice jusqu'à un autre indice ou à partir d'un indice et pour une longueur donnée.</td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/match" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/match">match</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/replace" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/replace">replace</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/search" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/search">search</a></code></td> + <td>Fonctionne avec les expressions rationnelles.</td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/toLowerCase" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/toLowerCase">toLowerCase</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/toUpperCase" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/toUpperCase">toUpperCase</a></code></td> + <td> + <p>Renvoie la chaîne de caractères en lettres minuscules (respectivement, en lettres majuscules).</p> + </td> + </tr> + </tbody> +</table> + +<p style="text-align: right;"><span style="float: left;"><a href="/fr/docs/JavaScript/Guide/Utiliser_les_objets">« Précédent</a></span> <a href="/fr/docs/Web/JavaScript/Guide/Le_mod%C3%A8le_objet_JavaScript_en_d%C3%A9tails">Suivant »</a></p> |