Tutoriel : Les objets en Javascript

L'objet Array permet de créer des tableaux. Il possède de nombreuses méthodes permettant d'ajouter, de supprimer ou d'extraire des éléments d'un tableau ainsi que de les trier.

Les particularités de l'objet Array

L'objet Array est un objet du noyau Javascript permettant de créer et de manipuler des tableaux.

Voici la syntaxe à utiliser pour créer une variable tableau :

var x = new Array(element1[, element2, ...]);

Si aucun élément n'est précisé en paramètre, le tableau est vide à la création. Dans le cas contraire, il sera initialisé avec les valeurs des éléments passés en paramètre.

Les propriétés de l'objet Array

L'objet Array possède deux propriétés caractéristiques : les propriétés input et length.

La liste suivante décrit les propriétés de l'objet Array.

• constructor : Cette propriété contient le constructeur de l'objet Array ;

• input : Cette propriété permet de faire une recherche dans le tableau à l'aide d'une expression régulière ;

• length : Cette propriété contient le nombre d'éléments du tableau ;

• prototype : Cette propriété permet d'ajouter des propriétés personnalisées à l'objet.

Les méthodes standards de l'objet Array

La liste suivante décrit les méthodes de l'objet Array.

• concat(tab1, tab2[, tab3, ...]) : Cette méthode permet de concaténer plusieurs tableaux, c'est-à-dire de créer un tableau à partir des différents tableaux passés en paramètre ;

• join(tableau) ou Tableau.join() : Cette méthode renvoie une chaîne de caractères contenant tous les éléments du tableau ;

• pop(tableau) ou Tableau.pop() : Cette méthode supprime le dernier élément du tableau et retourne sa valeur ;

• Tableau.push(valeur1[, valeur2, ...]) : Cette méthode ajoute un ou plusieurs éléments au tableau ;

• Tableau.reverse() : Cette méthode inverse l'ordre des éléments du tableau ;

• Tableau.shift() : Cette méthode supprime le premier élément du tableau ;

• Tableau.slice() : Cette méthode renvoie un tableau contenant une partie (extraction) des éléments d'un tableau ;

• Tableau.splice() : Cette méthode ajoute/retire des éléments d'un tableau ;

• Tableau.sort() : Cette méthode permet de trier les éléments d'un tableau ;

• Tableau.unshift(valeur1[, valeur2, ...]) : Cette méthode renvoie le code source qui a permis de créer l'objet Array ;

• Tableau.toString() : Cette méthode renvoie la chaîne de caractères correspondant à l'instruction qui a permis de créer l'objet Array ;

• Tableau.unshift() : Cette méthode permet d'ajouter un ou plusieurs élément au début du tableau ;

• Tableau.valueOf : Cette méthode retourne tout simplement la valeur de l'objet Array auquel elle fait référence.

Les particularités de l'objet Boolean

L'objet Boolean est un objet du noyau Javascript permettant de créer et de manipuler des valeurs de type booléennes.

Voici la syntaxe à utiliser pour créer une variable booléenne :

var x = new Boolean(expression);

Le paramètre peut-être soit une valeur (True ou False) soit une expression, auquel cas celle-ci est évaluée en tant que valeur booléenne. Lorsqu'aucune valeur n'est passée, ou la valeur 0, ou une chaîne de caractères vide, ou null, ou undefined ou bien NaN, la valeur de l'objet est initialisée à False. Dans tous les autres cas, l'objet Boolean possédera la valeur True.

Les propriétés de l'objet Boolean

La liste suivante décrit les propriétés de l'objet Boolean.

• constructor : Cette propriété contient le constructor l'objet Boolean.

• prototype : Cette propriété permet d'ajouter des propriétés personnalisées à l'objet.

Les méthodes standards de l'objet Boolean

La liste suivante décrit les méthodes de l'objet Boolean.

• toSource() : Cette méthode renvoie le code source qui a permis de créer l'objet Boolean.

• toString() : Cette méthode renvoie la chaîne de caractères correspond à l'instruction qui a permis de créer l'objet Boolean.

• valueOf : Cette méthode retourne tout simplement la valeur de l'objet Boolean auquel elle fait référence.

Les particularités de l'objet Date

L'objet Date permet de travailler avec toutes les variables qui concernent les dates et la gestion du temps. Il s'agit d'un objet inclus de façon native dans Javascript, et que l'on peut toujours utiliser.

La syntaxe pour créer un objet-date peut être une des suivantes :

Nom_de_l_objet = new Date()

cette syntaxe permet de stocker la date et l'heure actuelle

Nom_de_l_objet = new Date("jour, mois date année heures:minutes:secondes")

les paramètres sont une chaîne de caractère suivant scrupuleusement la notation ci-dessus

Nom_de_l_objet = new Date(année, mois, jour)

les paramètres sont trois entiers séparés par des virgules.
Les paramètres omis sont mis à zéro par défaut

Nom_de_l_objet = new Date(année, mois, jour, heures, minutes, secondes[, millisecondes])

les paramètres sont six entiers séparés par des virgules.
Les paramètres omis sont mis à zéro par défaut
Les dates en Javascript sont stockées de la même manière que dans le langage Java, c'est-à-dire qu'il s'agit du nombre de millisecondes depuis le 1er janvier 1970. Ainsi, toute date antérieure au 1er janvier 1970 fournira une valeur erronée.

Avec les versions de Javascript inférieures à la version 1.3, pour manipuler des dates antérieures à "l'année zéro" il vous sera nécessaire de créer un objet date spécifique.
A partir de la version 1.3, il est possible de manipuler des dates de plus ou moins 100 000 000 jours par rapport au premier janvier 1970.

Les méthodes de l'objet Date

La date est stockée dans une variable sous la forme d'une chaîne qui contient le jour, le mois, l'année, l'heure, les minutes, et les secondes. Il est donc difficile d'accéder à un seul élément d'un objet date avec les fonctions de manipulation de chaînes de caractères, étant donné que chacun des éléments peut avoir une taille variable. Heureusement, les méthodes de l'objet Date fournissent un moyen simple d'accéder à un seul élément, ou bien de le modifier.
Leur syntaxe est la suivante :

Objet_Date.Methode()

Connaître la date

Les méthodes dont le nom commence par le radical get (mot anglais qui signifie récupérer) permettent de renvoyer une partie de l'objet Date :

• getDate() : Permet de récupérer la valeur du jour du mois. L'objet retourné est un entier (entre 1 et 31) qui correspond au jour du mois

• getDay() : Permet de récupérer la valeur du jour de la semaine pour la date spécifiée. L'objet retourné est un entier qui correspond au jour de la semaine

• getFullYear() : Permet de récupérer la valeur de l'année sur 4 chiffres pour la date passée en paramètre. L'objet retourné est un entier qui correspond à l'année (XXXX) : 2007

• getHours() : Permet de récupérer la valeur de l'heure. L'objet retourné est un entier (entre 0 et 23) qui correspond à l'objet Date.

• getMilliseconds() : Permet de récupérer le nombre de millisecondes. L'objet retourné est un entier (entre 0 et 999) qui correspond aux millisecondes de l'objet passé en paramètre.

• getMinutes() : Permet de récupérer la valeur des minutes. L'objet retourné est un entier (entre 0 et 59) qui correspond aux minutes de l'objet Date.

• getMonth() : Permet de récupérer le numéro du mois. L'objet retourné est un entier (entre 0 et 11) qui correspond au mois :

• getSeconds() : Permet de récupérer le nombre de secondes. L'objet retourné est un entier (entre 0 et 59) qui correspond aux secondes de l'objet passé en paramètre.

• getTime() : Permet de récupérer le nombre de millisecondes depuis le 1er janvier 1970. L'objet retourné est un entier. Cette méthode est très utile pour convertir des dates, soustraire ou ajouter deux dates, etc.

• getTimezoneOffset() : Retourne la différence entre l'heure locale et l'heure GMT (Greenwich Mean Time). L'objet retourné est un entier, il représente le nombre de minutes de décalage

• getYear() : Permet de récupérer la valeur de l'année sur 2 chiffres pour l'objet Date. L'objet retourné est un entier qui correspond à l'année (XX) :

Modifier le format de la date

Les deux méthodes suivantes ne permettent de travailler que sur l'heure actuelle (objet Date()) leur syntaxe est donc figée :

• toGMTString() : Permet de convertir une date en une chaîne de caractères au format GMT. L'objet retourné est une chaîne de caractère du type :

• toLocaleString() : Permet de convertir une date en une chaîne de carctères au format local. L'objet retourné est une chaîne de caractère dont la syntaxe dépend du système, par exemple :

Modifier la date

Les méthodes dont le nom commence par le radical set (mot anglais qui signifie régler) permettent de modifier une valeur :

• setDate(X) : Permet de fixer la valeur du jour du mois Le paramètre est un entier (entre 1 et 31) qui correspond au jour du mois

• setDay(X) :Permet de fixer la valeur du jour de la semaine. Le paramètre est un entier qui correspond au jour de la semaine :

• setHours(X) : Permet de fixer la valeur de l'heure. Le paramètre est un entier (entre 0 et 23) qui correspond à l'heure

• setMinutes(X) : Permet de fixer la valeur des minutes. Le paramètre est un entier (entre 0 et 59) qui correspond aux minutes

• setMonth(X) : Permet de fixer le numéro du mois. Le paramètre est un entier (entre 0 et 11) qui correspond au mois :

• setTime(X) : Permet d'assigner la date. Le paramètre est un entier représentant le nombre de millisecondes depuis le 1er janvier 1970

Les particularités de l'objet Math

L'objet Math est, comme vous l'imaginez, un objet qui a de nombreuses méthodes et propriétés permettant de manipuler des nombres et qui contient des fonctions mathématiques courantes. Quelque soit la méthode ou la propriété utilisée, il est indispensable de le préfixer avec Math car il s'agit de méthodes et propriétés statiques, par exemple :

Math.cos(1);

Les méthodes et propriétés standards de l'objet Math

La liste suivante décrit les méthodes de l'objet Math.

• abs() : Cette méthode renvoie la valeur absolue d'un nombre, il renvoie donc le nombre s'il est positif, son opposé (positif) s'il est négatif

• ceil() : Renvoie le plus petit entier supérieur ou égal à la valeur donnée en paramètre

• floor() : La méthode floor() retourne le plus grand entier inférieur ou égal à la valeur donnée en paramètre.

• round() : Arrondit à l'entier le plus proche la valeur donnée en paramètre. Si la partie décimale de la valeur entrée en paramètre vaut 0.5, la méthode Math() arrondi à l'entier supérieur.

• max(Nombre1, Nombre2) : max() renvoie le plus grand des deux nombres donnés en paramètre

• min(Nombre1, Nombre2) : Retourne le plus petit des deux nombres donnés en paramètre

• pow(Valeur1, Valeur2) : Retourne le nombre Valeur1 à la puissance Valeur2

• random() : La méthode random() renevoie un nombre pseudo--aléatoire compris entre 0 et 1. La valeur est générée à partir des données de l'horloge de l'ordinateur.

• sqrt(Valeur) : Renvoie la racine carrée du nombre passé en paramètre

Logarithmes et exponentielle

• Math.E : Propriété qui retourne le nombre d'Euler (environ 2.718).

• Math.exp(valeur) : Cette méthode renvoie l'exponentielle de la valeur entrée en paramètre.

• Math.LN2 : La propriété LN2 fournit le logarithme népérien de 2.

• Math.LN10 : Propriété donne le logarithme népérien de 10.

• Math.log(valeur) : La méthode log() renvoie le logarithme de la valeur entrée en paramètre.

• Math.LOG2E : Propriété qui renvoie la valeur du logarithme du nombre d'Euler en base 2.

• Math.SQRT1_2 : Propriété qui retourne la valeur de "1 divisé par racine de 2" (0.707).

• Math.SQRT2 : La propriété SQRT2 (Square Root 2) donne la racine de 2 (1.414).

Trigonométrie

• Math.PI : Retourne la valeur du nombre PI, soit environ 3.1415927

• Math.sin(valeur) : Retourne le sinus de la valeur entrée en paramètre (doit être donnée en radians). La valeur retourné est comprise dans l'intervalle [-1;1].

• Math.asin(valeur) : Retourne l'arcsinus de la valeur entrée en paramètre. La valeur doit être comprise dans l'intervalle [-1;1]. Dans le cas contraire, la méthode asin() renvoie la valeur NaN (Not a Number).

• Math.cos(valeur) : Retourne le cosinus de la valeur entrée en paramètre (doit être donnée en radians). La valeur retourné est comprise dans l'intervalle [-1;1].

• Math.acos(valeur) : Retourne l'arccosinus de la valeur entrée en paramètre. La valeur doit être comprise dans l'intervalle [-1;1]. Dans le cas contraire, la méthode acos() renvoie la valeur NaN (Not a Number).

• Math.tan(valeur) : Retourne la tangente de la valeur entrée en paramètre (doit être donnée en radians)

• Math.atan(valeur) : Retourne l'arctangente de la valeur entrée en paramètre. La valeur doit être comprise dans l'intervalle [-1;1]. Dans le cas contraire, la méthode atan() renvoie la valeur NaN (Not a Number).

Les particularités de l'objet RegExp

L'objet RegExp est un objet permettant de manipuler des expressions régulières, c'est-à-dire des modèles créés à l'aide de caractères ASCII permettant de manipuler des chaînes de caractères, afin de trouver des portions de la chaîne correspondant au modèle.

La création d'un objet RegExp se crée à l'aide d'une simple expression comme suit :

Expression = /motif/drapeau

Il est également possible de créer un tel objet de manière plus classique à l'aide de son constructeur :

Expression = new RegExp("motif","drapeau")

Le motif représente l'expression régulière en elle-même tandis que le drapeau (optionnel) permet de préciser le comportement de l'expression régulière :

• g indique une recherche globale sur la chaîne de caractère et indique une recherche de toutes les occurrences.

• i indique une recherche non sensible à la casse, c'est-à-dire que la recherche se fait indépendamment de l'écriture en majuscule ou minuscule de la chaîne.

• gi combine les deux comportements précédents.

Construire une expression régulière

Les expressions régulières permettent de rechercher des occurrences (c'est-à-dire une suite de caractères correspondant à ce que l'on recherche) grâce à une série de caractères spéciaux. L'expression régulière en elle-même est donc une chaîne de caractère contenant des caractères spéciaux et des caractères standards.

Début et fin de chaîne

Les symboles ^ et $ indiquent respectivement le début et la fin d'une chaîne, et permettent donc de la délimiter.

"^début": chaîne qui commence par "début"
"fin$": chaîne qui se termine par "fin"
"^chaîne$": chaîne qui commence et se termine par "chaîne"
"abc": chaîne contenant la chaîne "abc"

Nombre d'occurrences

Les symboles *, + et ?, signifient respectivement "zéro ou plusieurs", "au moins un", "un ou aucun", et permettent de donner une notion de quantité.

"abc+": chaîne qui contient "ab" suivie de un ou plusieurs "c" ("abc", "abcc", etc.)
"abc*": chaîne qui contient "ab" suivie de zéro ou plusieurs "c" ("ab", "abc", etc.)
"abc?": chaîne qui contient "ab" suivie de zéro ou un "c" ("ab" ou "abc" uniquement)
"^abc+": chaîne commençant par "ab" suivie de un ou plusieurs "c" ("abc", "abcc", etc.)

Les accolades {X,Y} permettent de donner des limites précises de nombre d'occurrences.

"abc{2}": chaîne qui contient "ab" suivie de deux "c" ("abcc")
"abc{2,}": chaîne qui contient "ab" suivie de deux "c" ou plus ("abcc" etc..)
"abc{2,4}": chaîne qui contient "ab" suivie 2, 3 ou 4 "c" ("abcc" .. "abcccc")

Il est à noter que le premier nombre de la limite est obligatoire ("{0,2}", mais pas "{,2}"). Les symboles vu précédemment ('*', '+', et '?') sont équivalents à "{0,}", "{1,}", et "{0,1}".

Parenthèses capturantes

Les parenthèses ( ) permettent de représenter une séquence de caractères et de capturer le résultat. Les occurrences correspondant au motif entre parenthèses sont accessibles via la méthode exec() de l'objet RegExp ou bien les méthodes search(), match() et replace() de l'objet String.

"a(bc)+": chaîne qui contient "a" suivie de au moins
une occurrence de la chaîne "bc"

La barre verticale | se comporte en tant qu'opérateur OU

"(un|le)": chaîne qui contient "un" ou "le"

"(un|le) chien": chaîne qui correspond à
"un chien" ou "le chien"

"siteduzero\.((net)|(com)|(org))":
chaîne qui correspond à :
"siteduzero.net"
"siteduzero.com"
"siteduzero.org"

Caractère quelconque

Le point (.) indique n'importe une occurrence de n'importe quel caractère.

"^.{3}$": chaîne qui contient 3 caractères
".*": Tous les caractères

Liste de caractères

Les crochets [ ] définissent une liste de caractères autorisés (ou interdits). Le signe - permet quand à lui de définir un intervalle. Le caractère ^ après le premier crochet indique quand à lui une interdiction.

"[abc]": chaîne qui contient un "a", un "b", ou un "c".
"[a-z]": chaîne qui contient un caractère compris entre "a" et "z".
"[^a-zA-Z]": chaîne qui ne commence pas par une lettre.

En effet entre crochets, chaque caractère représente ce qu'il est. Pour représenter un ] il faut le mettre en premier (ou après un ^ si c'est une interdiction). Etant donné que le signe - sert à définir un intervalle, il est nécessaire de commencer ou de terminer par ce caractère lorsque l'on veut indiquer qu'il fait partie des caractères autorisés :

"[-ag]": chaîne qui contient un moins (-), un "a", ou un "g"
"[a-g]": chaîne qui contient un caractère compris entre "a" et "g"
"[\+?{}.]": chaîne qui contient un de ces six caractères
"[]-]": chaîne qui contient le caractère "]" ou le caractère "-"

Les méthodes de l'objet RegExp

Les méthodes de l'objet RegExp permettent d'appliquer l'expression régulière à une chaîne de caractères.

La liste suivante décrit les méthodes de l'objet RegExp :

• Expression.compile("chaine") : Permet de redéfinir une nouvelle expression régulière.

• Expression.exec("chaine") : Effectue une recherche sur la chaîne de caractère avec l'expression régulière définie. Cette méthode retourne un tableau contenant les occurrences trouvées.

• Expression.test("chaine") : Teste une chaîne de caractère avec l'expression régulière. Cette méthode retourne True si la recherche est fructueuse, false dans le cas contraire.

Les particularités de l'objet String

string est un mot anglais qui signifie "chaîne", il s'agit en fait de chaîne de caractères.

L'objet String est un objet qui contient un certain nombre de propriétés et de méthodes permettant la manipulation de chaînes de caractères.

Les propriétés de l'objet String

L'objet string a une seule propriété : la propriété length qui permet de retourner la longueur d'une chaîne de caractères. Cette propriété est très utile car lorsque l'on traite une chaîne de caractères on aime généralement savoir à quel moment s'arrêter.
La syntaxe de la propriété length est la suivante :

x = nom_de_la_chaine.length

x = ('chaine de caractères').length;

On peut donc directement passer la chaîne de caractères comme objet, en délimitant la chaîne par des apostrophes et en plaçant le tout entre parenthèses.
La méthode traditionnelle consistant à appliquer une propriété à une variable de type string fonctionne bien évidemment aussi.

Les méthodes de l'objet String

Les méthodes de l'objet string permettent de récupérer une portion d'une chaîne de caractères, ou bien de la modifier.

Pour comprendre les méthodes suivantes, il est tout d'abord nécessaire de comprendre comment est stockée une chaîne de caractères

• Chaine.anchor("nom_a_donner"); : Transforme le texte Chaine en ancrage HTML.

• Chaine.big() : Augmente la taille de la police.

• Chaine.blink() : Transforme la chaîne en texte clignotant.

• Chaine.bold() : Met le texte en gras (balise <B>).

• Chaine.charAt(position) : Retourne le caractère situé à la position donnée en paramètre

• Chaine.charCodeAt(position) : Renvoie le code Unicode du caractère situé à la position donnée en paramètre

• concat(chaîne1, chaîne2[, ...]) : Permet de concaténer les chaînes passées en paramètre, c'est-à-dire de les joindre bout à bout.

• Chaine.fixed() : Transforme la Chaine en caractères de police fixe (balise <TT>)

• Chaine.fontcolor(couleur) : Modifie la couleur du texte (admet comme argument la couleur en hexadécimal ou en valeur littérale)

• Chaine.fontsize(Size) : Modifie la taille de la police, en affectant la valeur passée en paramètre

• Chaine.fromCharCode(code1[, code2, ..]) : Renvoie une chaîne de caractères composée de caractères correspondant au(x) code(s) Unicode donné(s) en paramètre.

• Chaine.indexOf(sous-chaîne, position) : Retourne la position d'une sous-chaîne (lettre ou groupe de lettres) dans une chaîne de caractère, en effectuant la recherche de gauche à droite, à partir de la position spécifiée en paramètre.

• Chaine.italics() : Transforme le texte en italique (balise <I>)

• Chaine.lastIndexOf(sous-chaîne, position) : La méthode est similaire à indexOf(), à la différence que la recherche se fait de droite à gauche :

• Chaine.link(URL) : Transforme le texte en hypertexte (balise <A href>)

• Chaine.small() : Diminue la taille de la police

• Chaine.strike() : Transforme le texte en texte barré (balise <strike>)

• Chaine.sub() : Transforme le texte en indice (balise <sub>)

• Chaine.substr(position1, longueur) : La méthode retourne une sous-chaîne commençant à l'index dont la position est donnée en argument et de la longueur donnée en paramètre.

• Chaine.substring(position1, position2) : La méthode retourne la sous-chaîne (lettre ou groupe de lettres) comprise entre les positions 1 et 2 données en paramètre.

• Chaine.sup() : Transforme le texte en exposant (balise <sup>).

• Chaine.toLowerCase() : Convertit tous les caractères d'une chaîne en minuscule.

• Chaine.toSource() : Renvoie le code source de création de l'objet.

• Chaine.toUpperCase() : Convertit tous les caractères d'une chaîne en majuscule.

• Chaine.valueOf() : Renvoie la valeur de l'objet String.

# édition du 15/04/07

J'ai oublié la méthode split() :
Selon un commentaire du validateur Thunderseb
Chaine.split(caractère) sert à faire un tableau à partir de la chaine. Les séparations de la chaine sont définies au moyen de caractère.

Citation : Thunderseb

Par exemple :

var chaine = 'plop,plip,plap';
chaine = chaine.split(",");

Les 3 morceaux sont alors contenus dans un tableau. chaine[1] retournera plip, et chaine[2] retournera plap

# fin édition du 15/04/07

Voila, vous savez tout sur les objets existants en Javascript.
Je doit maintenant vous laisser.
Si vous avez des remarques, faites des commentaires.

Merci de vos remarques, elles me seront utiles.
C'est mon premier Tuto......

Maintenant que vous connaissez toutes les fonctions et les objets du Javascript, ne venez plus demander comment on chronomètre le temps d'exécution d'une page :-° ... Ou je vous taperais sur les doigts :diable: ...