Cours Javascript 2

BTS SNIR
___________________________________________________________________________
JavaScript ( cours N°2 )
3 Les objets en JavaScript
3.1 DECOUVERTE DES OBJETS EN JAVASCRIPT

Le JavaScript, un langage orienté objet
Au tout début de ce cours, nous avons défini le JavaScript comme étant un langage orienté objet.
Cela signifie que ce langage a été construit autour du concept d’objets, et que son fonctionnement même
se base sur l’utilisation d’objets.
En effet, en JavaScript, quasiment tout est avant tout objet :
 Les chaînes de caractères, nombres et booléens peuvent être des objets (ou des valeurs primitives
traitées comme des objets) ;
 Les fonctions sont des objets ;
 Les tableaux sont des objets ;
 Les dates sont des objets ;
 Les expressions régulières sont des objets.
En bref, vous devez absolument comprendre ce que sont les objets et comment ils fonctionnent afin de
bien comprendre le JavaScript.
Qu’est-ce qu’un objet ?

Dans la « vraie » vie, par exemple, un crayon est un objet.
Il existe des crayons de différentes couleurs et de différentes tailles ou formes. La couleur, taille ou forme
d’un crayon vont être des propriétés.
Tous les crayons vont posséder les mêmes propriétés (tous les crayons possèdent une taille) mais les
valeurs associées à ces propriétés vont être différentes (chaque crayon peut avoir une taille différente des
autres).
De plus, un crayon sert à écrire. "Ecrire" est donc ici une fonction de l'objet crayon ou encore ce que nous
allons désormais appeler une méthode.
P.M. Lycée Durzy Page 1 sur 46

BTS SNIR
___________________________________________________________________________
Les objets en JavaScript

En JavaScript, tout comme dans la vraie vie, un objet va contenir un ensemble de propriétés et de
méthodes.
Dans ce cours, nous avons déjà vu ce qu’étaient les variables et avons appris à les manipuler.
Nous avons découvert que les variables pouvaient stocker différents types de valeurs comme une chaîne
de caractères, un nombre, un booléen, etc.
Cependant, jusqu’à présent, nous n’avons fait stocker qu’une seule valeur à la fois à nos variables. Plus
précisément, nous avons fait stocker ce que l’on appelle des valeurs primitives à nos variables.
En réalité, les variables en JavaScript vont toujours stocker soit des valeurs primitives, soit des objets.
Comme un objet peut contenir différentes propriétés (et méthodes) et leurs valeurs associées, nos
variables vont également de fait pouvoir stocker plusieurs valeurs lorsqu’elles vont stocker un objet.
Propriétés et méthodes des objets

Les objets en JavaScript vont contenir des propriétés et méthodes.
Les « propriétés » d’un objet peuvent être assimilées à des variables telles que nous les avons vues
précédemment. Elles sont constituées d’un nom et d’une valeur séparés par deux points (« : »).
Les « méthodes » d’un objet peuvent être assimilées à des fonctions qui vont elles-mêmes être stockées
dans des propriétés.
Si cela semble abstrait pour le moment, pas d’inquiétude : c’est tout à fait normal. Tout devrait très vite se
clarifier lorsque nous allons voir des exemples ensemble.
Dans l’exemple ci-contre, j’ai créé un premier

objet moi qui est en l’occurrence un objet littéral
(nous reparlerons de ce concept).
Nous n’allons pas apprendre à créer des objets

immédiatement donc pour le moment
concentrez-vous seulement sur les concepts de
propriétés et de méthodes.
Comme je l’ai indiqué, vous pouvez voir que

notre objet moi contient des propriétés et une
méthode.

BTS SNIR
___________________________________________________________________________
Par exemple, la paire prenom : "Pierre" est une première propriété avec sa valeur.
Pour les méthodes, la nuance est plus complexe à percevoir. En effet, vous remarquez qu’on assigne non
pas une valeur simple mais une fonction qui ne possède pas de nom à notre propriété identite.
Pour accéder aux valeurs retournées par cette fonction sans nom, nous allons devoir utiliser la propriété
identite sous forme de méthode en ajoutant un couple de parenthèses comme ceci : identite(). Cela va avoir
pour effet de déclencher l'exécution de notre méthode.
Cependant identite reste avant tout une propriété de moi.
Cet exemple est un peu complexe, et utilise des notions que nous n'avons pas encore étudiées, donc pas de
panique si vous ne comprenez pas tout tout de suite. Pour le moment, encore une fois, contentez-vous
d’observer ce que sont les propriétés et les méthodes.
Dans les parties à venir, nous allons nous familiariser petit à petit avec tout ce vocabulaire nouveau.
3.2 OBJETS NATIFS ET VALEURS PRIMITIVES EN

JAVASCRIPT
Les objets natifs du JavaScript

En JavaScript, vous devez savoir qu’il existe déjà des objets natifs, c’est-à-dire des objets qui possèdent
déjà leurs propriétés et méthodes et qui sont déjà « prêts à l’emploi ».
Par la suite, nous apprendrons également à créer nos propres objets. Pour le moment, nous allons nous
concentrer sur quelques-uns des objets natifs du JavaScript.
Nous avons déjà rencontré trois objets natifs du JavaScript dans ce cours : l’objet String (qui gère les
chaînes de caractères), l’objet Number (pour les nombres) et l’objet Boolean (pour les booléens).
Il en existe évidemment d’autres, comme l’objet Array (qui gère les tableaux) que nous étudierons plus
tard.
On appelle également ces objets des objets

globaux car ils vont nous permettre de
créer de nouveaux objets de même « type
».
Par exemple, à partir de l’objet global

String, nous allons pouvoir créer des objets
de type string.
Pour faire cela, nous allons utiliser le mot

clef new comme ceci :

BTS SNIR
___________________________________________________________________________
Nous venons de créer notre premier objet de type string à partir de notre objet global String et plus
précisément de la fonction constructeur String().
Cet objet (variable qui stocke un objet) qu’on a appelé chaine stocke tout simplement la chaîne de
caractères « Je suis un objet ».
Ici, vous devriez vous poser la question : quel est l’intérêt d’utiliser cette nouvelle notation et de créer un
objet de type string par rapport à ce que l’on faisait avant ? La réponse est simple : il n’y a strictement
aucun intérêt dans ce cas.
Pour bien que vous compreniez cela, je vais devoir vous parler des valeurs primitives.
Valeurs primitives ou objets ?

Comme nous l’avons vu précédemment, une variable peut stocker soit une valeur primitive, soit un objet.
Essayer ce code !
Comme vous pouvez le constater si vous essayer le code ci-dessus, le type de notre variable primitive est
string tandis que celui de chaine est « object ».
Cela est normal : notre première variable stocke une valeur primitive qui est une chaîne de caractères
tandis que la deuxième stocke un objet de type string.
Ce que vous devez absolument comprendre, à présent, est que les valeurs primitives sont de formidables
simplifications qui ont été introduites dans le JavaScript afin de simplifier celui-ci et de l’alléger.
En effet, lorsque vous avez le choix entre utiliser une valeur primitive ou créer un objet, vous devrez
toujours préférer cette première solution, qui consomme beaucoup moins de ressources et est beaucoup
plus flexible.
L’autre grand avantage des valeurs primitives est qu’elles sont traitées par le JavaScript… comme des
objets.

BTS SNIR
___________________________________________________________________________
Cela signifie que l’on va tout de même pouvoir utiliser les propriétés et méthodes de l’objet String par
exemple pour une valeur primitive de type string ou chaîne de caractères.
Par exemple, notre objet String possède une propriété length qui permet de connaître la taille d’une chaîne
de caractères ou encore une méthode toUpperCase() qui nous permet de transformer une chaîne de
caractères en majuscules.
Nous allons tout à fait pouvoir utiliser ces deux propriété et méthode sur notre variable primitive et donc
sur notre valeur primitive (nous reparlerons des propriétés et méthodes de String dans une prochaine
partie).
Essayer ce code !
Comme vous pouvez le constater, pour accéder aux propriétés et aux méthodes d’un objet, il suffit
simplement d’indiquer le nom de la variable ciblée et le nom de la propriété ou de la méthode en séparant
les deux par un point central.
Finalement, la dernière grande différence entre l’utilisation de valeurs primitives et la création d’un
nouvel objet va concerner la comparaison des valeurs ou des objets.
Tandis que l’on peut tout à fait comparer des valeurs primitives entre elles, il est totalement impossible de
comparer des objets entre eux.
Nous reparlerons plus de détail de cela dans la prochaine partie lorsque nous aborderons la notion
d’identité des objets.

BTS SNIR
___________________________________________________________________________
3.3 CREATION D’OBJETS EN JAVASCRIPT ET IDENTITE

DES OBJETS
Création d’objets en JavaScript

Outre les objets natifs, nous pouvons également créer nos propres objets en JavaScript.
Nous disposons de trois façons pour créer de nouveaux objets :
 On peut utiliser le mot clef new et créer un objet à partir de Object() ;

 On peut créer un objet littéral ;
 On peut définir un constructeur puis créer des objets à partir de celui-ci.
Créer des objets en utilisant new Object()

Nous avons déjà vu comment créer un nouvel objet de type string dans la partie précédente en utilisant le
mot clef new.
Nous allons faire exactement pareil ici en utilisant cette fois-ci le constructeur Object() et en définissant par
exemple plusieurs propriétés pour notre objet.
Notez qu’il est aujourd’hui généralement déconseillé de créer un objet de cette façon pour des raisons de
performance du code. Cette méthode ne vous est donc présentée qu’à titre d’exemple.
Essayer ce code !
Comme vous pouvez le remarquer, pour ajouter de nouvelles propriétés (ou méthodes) à notre objet, il
faut une nouvelle fois utiliser le point et ensuite définir le nom de la propriété et lui attribuer une valeur
avec le signe égal.

BTS SNIR
___________________________________________________________________________
Créer un objet littéral

Créer un objet littéral est la manière généralement recommandée de créer un objet, et c’est également la
manière la plus simple de procéder.
Pour créer un objet littéral, nous n’avons qu’à déclarer une nouvelle variable et à utiliser une paire
d’accolades en définissant les propriétés et méthodes de notre objet à l’intérieur de celles-ci.
Essayer ce code !
Ici, on crée un objet littéral moi possédant trois propriétés et une méthode. On utilise cette fois-ci les deux
points pour assigner les valeurs à nos marqueurs.
Notez l’utilisation du mot clef this qui fait ici référence à l’objet couramment utilisé.
Cela signifie que this.prenom va aller rechercher la valeur liée au prenom de l’objet moi, c’est-à-dire Pierre.
This est
un mot clef récurrent dans les langages orientés objets et il est très important de bien en
comprendre les différents sens selon les utilisations qui sont faites de celui-ci.
Notez également qu’il nous faut ajouter une paire de parenthèses afin de bien accéder au résultat retourné
par notre méthode id().
Sans l’utilisation de ces parenthèses, cela retournerait la valeur de la propriété id, c’est-à-dire tout le script
de notre fonction.
Créer des objets à partir d’un constructeur

La dernière méthode pour créer des objets en JavaScript est de créer un constructeur puis ensuite de créer
des objets à partir de celui-ci.
Notre constructeur va lui-même contenir des méthodes et des propriétés et les objets que nous allons créer
à partir de celui-ci vont en hériter.

BTS SNIR
___________________________________________________________________________
Nous utiliserons cette façon de faire pour des gros projets pour lesquels nous aurons à créer beaucoup
d’objets similaires.
Parmi les constructeurs natifs du JavaScript, nous avons déjà vu le constructeur String() à partir duquel
nous avons créé des objets de type string.
Nous avons ensuite pu observer que l’on pouvait toujours accéder aux propriétés et aux méthodes définies
dans le constructeur String() à travers nos objets de type string et même à travers les valeurs primitives.
Voici ci-dessous une liste des constructeurs natifs les plus connus et utilisés en JavaScript :
 Object() ;
 String() ;
 Number() ;
 Boolean() ;
 Array() ;
 RegExp() ;
 Function() ;
 Date() ;
Essayons de créer un nouveau constructeur ensemble. Tout d’abord, vous devez savoir qu’un constructeur
est avant tout une fonction et doit donc être déclaré avec le mot clef function.
Ensuite, dans cette fonction constructeur, nous allons définir des propriétés et des méthodes.
Essayer ce code !
Ici, nous avons créé un constructeur très simple. Dans ce cas-là, le mot clef this va une nouvelle fois faire
référence à l’objet sur lequel on travaille actuellement.
Par exemple, lorsque l’on crée l’objet pierre à partir de notre constructeur, pierre va prendre la place de this.
Ainsi, pour ensuite récupérer le prénom de l’objet pierre, nous n’avons qu’à y accéder via pierre.prenom.

BTS SNIR
___________________________________________________________________________
Notez que lorsqu’on crée un constructeur, nous sommes ensuite obligés d’utiliser le mot clef new pour
créer de nouveaux objets à partir de celui-ci et de procéder comme je l’ai fait ci-dessus.
L’identité des objets

Faites bien attention à un point avec les objets : au contraire des valeurs primitives, on y accède par
référence et non pas par valeur.
Ainsi, on ne peut pas ni « comparer » ni « copier » un objet car cela n’a tout simplement pas de sens.
Prenons un exemple concret afin de bien comprendre. Pour cela, nous allons comparer le comportement
des valeurs primitives et des objets.
Essayer ce code !
Lorsque l’on travaille avec des variables qui contiennent des valeurs primitives, on peut tout à fait créer
des « copies » de ces variables puis ensuite modifier les copies sans que cela impacte la valeur contenue
dans la variable originale.
Avec les objets, cela va être complètement différent puisqu’on ne va pas pouvoir créer directement de «
copie » d’un objet. En fait, on ne va créer qu’une autre référence pointant vers le même objet.
Ainsi, si l’on modifie par la suite l’une des valeurs d’une des références, on modifie également celle des
autres. Regardez plutôt l’exemple suivant pour vous en convaincre :

BTS SNIR
___________________________________________________________________________
Essayer ce code !
Faîtes bien attention à ce point car beaucoup de développeurs, même expérimentés,

font l’erreur.
3.4 L’OBJET STRING ET SES METHODES

L’objet String
L’objet String est l’objet qui gère les chaînes de caractères. Cet objet possède trois propriétés et une
vingtaine de méthodes.
Comme nous l’avons vu précédemment, nous n’utiliserons pas la fonction constructeur de cet objet pour
créer de nouveaux objets de type string : on préfèrera utiliser des valeurs primitives.
Cependant, rappelez-vous que nous allons pouvoir utiliser les propriétés et méthodes de cet objet avec nos
valeurs primitives.
Les propriétés de l’objet String sont les suivantes :
 La propriété length qui va nous permettre de connaître la longueur d’une chaîne de caractères ;
 La propriété prototype qui nous permet d’ajouter de nouvelles propriétés ou méthodes à un objet ;
 La propriété contructor qui va retourner la fonction qui a créé le prototype de l’objet String.
Nous n’étudierons pas ces deux dernières propriétés dans ce cours car elles ne sont que peu utilisées en
pratique par des développeurs non avancés.

BTS SNIR
___________________________________________________________________________
En revanche, nous allons dans la suite de cette partie étudier les méthodes de l’objet String les plus
couramment utilisées.
Les méthodes toLowercase() et toUpperCase()

Commençons avec les méthodes toLowerCase() et toUpperCase(). Ces deux méthodes vont nous permettre
respectivement de transformer une chaîne de caractères en minuscules ou en majuscules.
Faîtes bien attention à l’orthographe des méthodes en JavaScript lorsque vous en utilisez : celles-ci sont
sensibles à la casse et vous devez donc bien mettre des majuscules aux bons endroits.
Pour cela, retenez seulement que les méthodes dont le nom est composé de plusieurs mots vont prendre
une majuscule pour chaque début de mot sauf le premier (par exemple, « to lower case » devient «
toLowerCase() »).
Ces deux méthodes ne nécessitent pas d'argument pour fonctionner.
Essayer ce code !
La méthode charAt()
La méthode charAt() va retourner le caractère situé à une position donnée. Cette méthode va prendre
comme argument obligatoire un nombre qui va correspondre à une position.
Faites bien attention lorsque vous l’utilisez : le premier caractère d'une chaîne de caractères possède la
position zéro. Ensuite, tous les caractères (spéciaux ou non) et espaces comptent pour 1 :

BTS SNIR
___________________________________________________________________________
Essayer ce code !
Les méthodes indexOf() et lastIndexOf()

La méthode indexOf() va retourner la première position à laquelle un caractère (ou une séquence de
caractères) donné a été retrouvé dans une chaine (on parlera de première occurrence).
La méthode lastIndexOf() va elle retourner la dernière position à laquelle un caractère (ou une séquence de
caractères) donné a été retrouvé dans une chaine.
Ces deux méthodes vont avoir besoin d’un argument qui va être le caractère à rechercher :
Essayer ce code !
Comme vous pouvez l’observer, ces deux méthodes sont sensibles à la casse. Faîtes donc bien attention à
en tenir compte dans vos recherches.
Notez que le premier caractère possède une nouvelle fois la position 0 et que ces deux méthodes vont
retourner la valeur « -1 » si le caractère recherché n’est pas trouvé.
On peut également ajouter un deuxième argument à ces deux méthodes, facultatif, qui va être une position
à partir de laquelle la recherche doit démarrer.

BTS SNIR
___________________________________________________________________________
Dans ce cas, les caractères précédents le début de la recherche seront comptés mais non inclus dans la
recherche : on commence à rechercher à partir d’une certaine position, mais on compte depuis le début.
Essayer ce code !
La méthode replace()
La méthode replace() va nous permettre de rechercher un caractère (ou une expression) dans une chaîne de
caractères et de le(la) remplacer par un(e) autre.
Cette méthode va avoir besoin de deux arguments : le caractère (ou la chaine) à remplacer et le caractère
(ou la chaine) de remplacement.
Essayer ce code !
La méthode slice()
La méthode slice() va extraire une partie d’une chaîne et retourner la partie extraite comme nouvelle
chaîne.
Cette méthode a besoin de deux arguments : la position où doit débuter l’extraction et la position de fin de
l’extraction :

BTS SNIR
___________________________________________________________________________
Essayer ce code !
Vous pouvez également noter l’astuce suivante : en donnant des arguments négatifs à cette méthode, le
comptage commencera par la fin.
Ainsi, -1 va correspondre au dernier caractère, -2 à l’avant dernier, etc. Dans ce cas, il n’y a cependant
aucun moyen de récupérer le dernier caractère à moins de "tricher" en ajoutant un espace en fin de chaine.
Essayer ce code !
La méthode trim()
La méthode trim() supprime les espaces superflus en début et en fin de chaîne. Cela peut être très pratique
lorsqu’on veut nettoyer et mettre en forme des données envoyées par l’utilisateur par exemple.
Cette méthode n'a pas besoin d'argument pour fonctionner.

BTS SNIR
___________________________________________________________________________
Essayer ce code !
Autres méthodes de l’objet String

Il existe d’autres méthodes de String qui peuvent être intéressantes. Nous verrons certaines d’entre elles
plus tard dans ce cours.
Parmi celles-ci, il y a valueOf() qui retourne la valeur primitive d’un objet de type String, search() et match()
qui vont comparer une chaîne à une certaine expression et vont retourner les correspondances ou encore
split() qui va casser une chaîne de caractères selon un délimiteur et va créer un tableau avec les morceaux.
3.5 L’OBJET NUMBER
Présentation et propriétés
L’objet Number sert à gérer les nombres en JavaScript.
Tout comme pour les chaînes de caractères, nous préférerons utiliser les valeurs primitives plutôt que de
créer un nouvel objet de type Number à partir de sa fonction constructeur dans la mesure du possible.
L’objet Number possède cinq propriétés qui lui appartiennent exclusivement. Cela signifie qu’on ne peut
les utiliser que sur l’objet Number en soi, et pas sur d’autres objets ou valeurs primitives de type Number
:
 Les propriétés MIN_VALUE et MAX_VALUE vont respectivement retourner le plus petit et le plus
grand nombre possible en JavaScript ;
 Les propriétés NEGATIVE_INFINITY et POSITIVE_INFINITY représentent l’infini côté négatif et
positif ;
 La propriété NaN représentant une valeur qui n’est pas un nombre.

BTS SNIR
___________________________________________________________________________
Essayer ce code !
L’objet Number possède également deux propriétés constructor et prototype ainsi qu'une petite dizaine de
méthodes.
Nous allons étudier certaines de ces méthodes dès maintenant.
La méthode toString()
La méthode toString() va transformer un nombre en chaîne de caractères. Cette méthode n’a pas besoin
d'argument pour fonctionner.
Essayer ce code !
La méthode toFixed()
La méthode toFixed() va changer le nombre de décimales d’un nombre et va le transformer en chaîne de
caractères.
Cette méthode va prendre le nombre de décimales voulues en argument.

BTS SNIR
___________________________________________________________________________
Essayer ce code !
La méthode toPrecision()
La méthode toPrecision() va nous permettre de choisir la « longueur » du nombre (c'est à dire le nombre de
chiffres) qui doit être retourné et va le retourner sous forme de chaîne de caractères.
Cette méthode va prendre en argument la taille voulue comme ceci :
Essayer ce code !
La méthode toExponential()
La méthode toExponential() va nous permettre de choisir le nombre de décimales d’un nombre et va le
retourner sous forme de chaîne de caractères, en utilisant une notation sous forme de nombre exponentiel.
Cette méthode va prendre en argument le nombre de décimales souhaitées.

BTS SNIR
___________________________________________________________________________
Essayer ce code !
Quelques méthodes globales intéressantes

Le JavaScript possède des fonctions globales qui peuvent être utilisées avec tous les types de données.
Certaines de ces fonctions peuvent s’avérer intéressantes à utiliser en tant que méthodes avec des données
de type number, notamment les fonctions :
 Number() ;
 parseFloat() ;
 parseInt() ;
Nous aurons l’occasion de revoir ces trois méthodes plus tard dans le cours, donc nous allons pour le
moment nous contenter d’illustrer rapidement leur fonctionnement avec des exemples simples.
La méthode Number() va être utilisée pour convertir certaines valeurs JavaScript en nombres, comme des
booléens ou des valeurs de type date par exemple.
Essayer ce code !
Les méthodes parseInt() et parseFloat() vont retourner respectivement un nombre entier et un nombre entier
ou décimal à partir d’une chaîne de caractères.

BTS SNIR
___________________________________________________________________________
Essayer ce code !
3.6 L’OBJET JAVASCRIPT ARRAY
Présentation de Array et des tableaux

Un tableau (« array » en anglais) est un type de variable spécial qui peut contenir plusieurs valeurs.
Les tableaux vont être gérés par l’objet Array, un objet natif en JavaScript qui possède ses propres
propriétés et méthodes.
Lorsque l’on crée un tableau, un indice (ou une clef) numérique unique est automatiquement affectée à
chaque valeur de notre tableau.
Ainsi, la première valeur de notre tableau va être associée à l’index 0 (et non pas 1, faites bien attention
!), la deuxième valeur va recevoir la clef 1, etc.
L’association automatique d’une clef numérique unique et d’une valeur va s’avérer très pratique pour
cibler et travailler précisément sur chaque valeur du tableau par la suite.
Création et syntaxe d’un tableau

Comme pour String et Number, on va pouvoir créer un nouveau tableau en utilisant la syntaxe new Array.
Cependant, là encore, il est fortement déconseillé d'utiliser cette syntaxe et on préférera donc la méthode
que je vais vous présenter ci-dessous.
Créons donc immédiatement un premier tableau prenoms ensemble afin de voir la syntaxe des tableaux.
Cette variable tableau va tout simplement contenir quatre prénoms :

BTS SNIR
___________________________________________________________________________
Essayer ce code !
Observez bien la syntaxe de notre tableau : on utilise des crochets pour créer notre tableau et on sépare
chaque valeur par une virgule.
Dans notre exemple ci-dessus, notre tableau contient quatre valeurs, ou quatre éléments. Le premier
élément est composé de la valeur Pierre et possède l’indice 0. Le dernier, contenant la valeur Claire,
possède l’indice 3.
Vous pouvez comme d’habitude utiliser des guillemets ou des apostrophes pour entourer les différentes
valeurs textuelles de notre tableau.
Si vous souhaitez rentrer des nombres dans un tableau, en revanche, vous n'utiliserez ni guillemet ni
apostrophe.
Pour récupérer ensuite une valeur dans un tableau, nous allons nous servir de la clef associée à cette
valeur.
Il suffit ainsi de préciser le nom du tableau avec la clef associée à la valeur voulue entre crochets, comme
on l’a fait dans l’exemple ci-dessus.
On peut ensuite travailler sur cette valeur ou l’afficher avec un alert par exemple.
Si maintenant on souhaite modifier une valeur dans un tableau, on va une nouvelle fois utiliser l’index
correspondant à la valeur à modifier et tout simplement préciser une nouvelle valeur :
Essayer ce code !

BTS SNIR
___________________________________________________________________________
Connaître le nombre d’éléments dans un tableau

La propriété length va nous permettre de connaître le nombre d’éléments contenus dans un tableau. Voici
comment on va l’utiliser, en reprenant notre exemple précédent :
Essayer ce code !
Une petite astuce : comme length retourne le nombre d’éléments d’un tableau, et comme la première
valeur d’un tableau possède toujours la clef 0, on peut utiliser cette propriété pour rajouter des éléments à
la fin de notre tableau.
Voici comment on va s’y prendre en pratique :
Essayer ce code !
Comme vous pouvez l’observer, cette propriété est très pratique car on n’a pas à préciser explicitement
d’indice pour chaque nouvelle valeur ajoutée : prenoms.length va à chaque fois renvoyer le dernier nombre
d’éléments connus de notre tableau.
Ainsi, avant d’ajouter Florian à notre tableau, celui-ci contient quatre éléments. Une fois Florian ajouté,
notre tableau contient cinq éléments, et ainsi prenoms.length va renvoyer 5 et non plus 4.

BTS SNIR
___________________________________________________________________________
Parcourir un tableau et afficher toutes ses valeurs

Pour parcourir et afficher les valeurs d’un tableau, nous utiliserons généralement une boucle for, qui va
nous permettre de passer en revue notre tableau valeur par valeur.
Nous allons également pouvoir utiliser notre propriété length à l’intérieur de cette boucle afin de sortir de
la boucle toujours au bon moment.
Voici ce que ça va donner en pratique :
Essayer ce code !
Ici, on va bien entendu utiliser notre boucle for sur les indices de notre tableau. On commence à 0 en
initialisant une variable i = 0 puis on pose i < prenoms.length en condition puisqu’on sait que prenoms.length
est égal au plus grand indice de notre tableau + 1.
Ensuite, dans notre boucle for en soi, on parcourt notre tableau élément par élément et on stocke chaque
nouvelle valeur trouvée avec une phrase de texte dans une variable p qu’on a initialisée en dehors de la
boucle.
Au début, notre variable p est vide puis elle va stocker les prénoms de notre tableau un par un. A chaque
nouveau passage dans la boucle, un nouveau prénom avec notre petite ligne de texte est ajouté dans notre
variable grâce à l’opérateur +=.
Finalement, on affiche le contenu de notre variable à l’aide d’un alert().
Des tableaux avec des index textuels ?

Dans nombre d’autres langages informatique (dont le PhP, par exemple), on peut créer des tableaux en
choisissant d’attribuer une clef textuelle à chaque nouvelle valeur. On appelle ces tableaux des tableaux
associatifs.
En JavaScript, ce type de tableau n’existe tout simplement pas. Pour créer quelque chose qui ressemble à
un tableau associatif, nous allons créer un objet littéral en JavaScript.

BTS SNIR
___________________________________________________________________________
Essayer ce code !
Encore une fois attention : un objet littéral n’est pas un objet de type array. Ainsi, les propriétés et
méthodes de l’objet Array ne fonctionneront pas avec les objets littéraux.
Pour parcourir un objet littéral et afficher ses éléments, nous allons utiliser une nouvelle boucle
spécifiquement créée pour cela : la boucle for…in.
Cette boucle va parcourir notre objet littéral selon ses clefs, en utilisant un alias (un mot choisi qui va
ensuite être remplacé par les différentes clefs de notre objet).
Voyons immédiatement comment cela va fonctionner en pratique :
Essayer ce code !
Dans l’exemple précédent, nous utilisons le mot clefs comme alias. Vous devez bien comprendre que ce
mot va être remplacé par les différentes clefs effectives de notre tableau à chaque nouveau passage dans
la boucle (c’est-à-dire prenom1, prenom2, etc.).

BTS SNIR
___________________________________________________________________________
Notez également qu’on utilise, comme pour les tableaux, des crochets pour entourer les clefs de notre
objet littéral pour aller récupérer ses valeurs. Cela peut sembler étrange mais c’est la façon normale de
procéder.
3.7 LES MÉTHODES DE L’OBJET JAVASCRIPT ARRAY
Les méthodes de Array
L’objet Array possède une bonne dizaine de méthodes. Ces méthodes sont pour la plupart
très puissantes et vont nous permettre d’effectuer toutes sortes d’opérations sur nos tableaux.
Dans cette partie, nous allons voir la majorité des méthodes de Array, à savoir :
 Les méthodes push() et pop() ;
 Les méthodes shift() et unshift() ;
 La méthode splice() ;
 La méthode sort() ;
 La méthode reverse() ;
 La méthode join() ;
 La méthode slice() ;
 La méthode concat() .
Ajouter et supprimer des éléments en fin de tableau en JavaScript

BTS SNIR
___________________________________________________________________________
Pour ajouter des éléments en fin de tableau, on va utiliser la méthode push() . Pour supprimer
des éléments en fin de tableau, on va utiliser pop() .
Notez que les méthodes push() et pop() , en plus d’ajouter ou de supprimer de nouveaux
éléments dans un tableau, vont également retourner des informations relatives à notre
tableau.
Ainsi, la méthode push() va retourner la nouvelle taille du tableau tandis que pop() va retourner
dans une chaîne de caractères la valeur relative à l’élément supprimé.
Voyons immédiatement quelques exemples d’utilisation de push() et pop() .
Essayer ce code !
Ici, notre variable taille nous sert à récupérer l'information renvoyée par la méthode push() ,
c’est-à-dire la taille du nouveau tableau.

BTS SNIR
___________________________________________________________________________
Essayer ce code !
Ici, notre variable suppr va récupérer l'information renvoyée par pop() , c’est-à-dire la valeur
qui correspond à l’élément supprimé.
Ajouter et supprimer des éléments au début d’un tableau en JavaScript
Pour ajouter ou supprimer des éléments en début de tableau, on va respectivement utiliser

les méthodes unshift() et shift() .
La méthode unshift() va, comme push() , retourner la nouvelle taille du tableau tandis que shift() ,
comme pop() , va retourner la valeur supprimée sous forme de chaîne de caractères.
Essayer ce code !

BTS SNIR
___________________________________________________________________________
Essayer ce code !
Ajouter ou supprimer des éléments choisis dans un tableau
Pour ajouter ou supprimer des éléments dans un tableau, on peut également utiliser splice() .
L’avantage de cette méthode est qu’elle nous permet d’ajouter un élément n’importe où dans
un tableau ou de supprimer n’importe quel élément.
Splice() va prendre au minimum deux arguments : la position à partir de laquelle les nouveaux
éléments devront être ajoutés et combien d’éléments doivent être enlevés.
Plus précisément, les nouveaux éléments vont se placer juste avant l’élément correspondant
à l’indice donné.
Après ces deux arguments obligatoires, on peut rajouter autant d’autres arguments qu’on
veut insérer de valeurs :

BTS SNIR
___________________________________________________________________________
Essayer ce code !
Ici, nous avons ajouté des éléments et n’en avons supprimé aucun. Pour faire l’inverse, il
suffit de n’indiquer aucun élément à ajouter à splice() .
Faites bien attention avec les arguments que vous passez à splice() : le premier correspond
bien à une position et non pas à un nombre d’éléments à ajouter.
Essayer ce code !

BTS SNIR
___________________________________________________________________________
Classer les éléments d’un tableau
La méthode sort() va nous permettre de trier les éléments d’un tableau dans l’ordre croissant
ou alphabétique de leurs valeurs.
Attention cependant à la casse (majuscule / minuscule) : les valeurs commençant par des
majuscules vont être classées avant celles commençant par des minuscules.
Essayer ce code !
Faîtes cependant attention à un point : la méthode sort() va classer les valeurs en les
comparant caractère par caractère.
On va donc avoir des problèmes pour trier les nombres. Par exemple, « 25 » va être considéré
comme supérieur à « 100 » car, en comparant chiffre par chiffre, « 2 » est supérieur à « 1 ».
Pour trier des nombres, on utilisera généralement en plus de sort() une fonction de
comparaison. Comme ce besoin est très spécifique, nous n’allons pas l’étudier ensemble.

BTS SNIR
___________________________________________________________________________
Inverser l’ordre des éléments d’un tableau
Pour inverser l’ordre des éléments d’un tableau, on va cette fois-ci utiliser la méthode
reverse() .
Il peut être particulièrement intéressant d’utiliser cette méthode avec la méthode sort() que
nous venons de voir afin de classer des éléments dans l’ordre inverse de l’ordre alphabétique
ou décroissant.
Essayer ce code !
La méthode join()
La méthode join() va retourner les différentes valeurs d’un tableau sous forme de chaîne de
caractères.
Outre cela, nous allons pouvoir choisir le type de séparateur voulu entre les différentes
valeurs de notre tableau (un espace, une virgule, etc.).
Cette méthode va prendre le séparateur choisi en argument.

BTS SNIR
___________________________________________________________________________
Attention : join() ne modifie pas notre tableau en soi, elle renvoie seulement une chaîne de
caractères créée à partir de notre tableau.
Essayer ce code !
Créer un tableau à partir d’un autre
La méthode slice() va elle nous permettre de créer un nouveau tableau en extrayant des
éléments d’un tableau de base.
Cette méthode va généralement avoir besoin de deux arguments : une position de départ et
une positon de fin pour couper.
On peut toutefois ne préciser qu’un seul argument qui sera la position de départ. Dans ce
cas là, slice() coupera jusqu’à la fin du tableau de départ.
Tout comme la précédente, cette méthode n’impacte pas le tableau de départ. Elle va servir
à créer un nouveau tableau à partir de notre tableau de départ.

BTS SNIR
___________________________________________________________________________
Essayer ce code !
Comme vous pouvez le remarquer, nous n’avons cette fois-ci pas utilisé de boucle for pour
afficher les valeurs des tableaux.
En effet, on peut le faire tout simplement avec un alert() . Cependant, dans ce cas, nous
n’avons aucun contrôle sur le formatage en soi des données affichées. Ce n’est donc pas
recommandé en pratique.
Créer un tableau à partir de plusieurs tableaux
La méthode concat() va nous permettre de « concaténer » différents tableaux entre eux ; c’est-
à-dire de les fusionner pour en créer un nouveau.
Cette méthode va prendre en arguments les tableaux que l’on souhaite fusionner à un
premier de départ choisi arbitrairement pour en former un nouveau.
Notez que l’on peut fusionner autant de tableaux que l’on veut entre eux. Les tableaux de
base ne sont une nouvelle fois pas modifiés.

BTS SNIR
___________________________________________________________________________
Essayer ce code !
Comme vous pouvez le voir, on doit utiliser concat() sur l’un de nos tableaux de base (que
l’on peut choisir arbitrairement, cela n’impactera que l’ordre des valeurs du tableau final).
Ensuite, nous allons placer tous les autres tableaux à fusionner avec ce premier tableau en
arguments de concat() , en les séparant par des virgules.
Essayer ce code !

BTS SNIR
___________________________________________________________________________
3.8 L’OBJET JAVASCRIPT DATE
Présentation de l’objet JavaScript Date
L’objet Date est un objet natif du JavaScript qui va nous permettre de manipuler des dates.
Les dates en JavaScript peuvent être écrites de deux manières : soit littéralement (c'est-à-
dire sous forme de chaînes de caractères), soit sous forme d’un Timestamp Unix multiplié
par 1000.
Le Timestamp Unix correspond au nombre de secondes écoulées depuis le premier janvier

1970 à minuit UTC (Universal Time).
En JavaScript, on va compter en millisecondes (ms). C’est donc pour cela que le nombre
renvoyé par le JavaScript correspond au Timestamp Unix multiplié par 1000.
Récupérer la date actuelle
Pour récupérer la date actuelle sous forme littérale, on va tout simplement utiliser Date() .
Pour afficher cette même date sous forme de nombre (le nombre de millisecondes écoulées
depuis le 1er janvier 1970), on peut utiliser la méthode now() de l’objet Date.
Essayer ce code !

BTS SNIR
___________________________________________________________________________
Comme vous pouvez le remarquer, la forme littérale est difficilement exploitable telle quelle
pour nous car celle-ci suit les normes anglo-saxonnes.
Dans la suite de cette partie, nous apprendrons à mettre en forme des dates pour qu’elles
s’affichent en français.
Concernant le Timestamp, celui-ci va nous être très utile dans de nombreuses occasions car
d’une part il est simple de travailler avec des nombres en JavaScript et car c’est un standard
partagé par la majorité des langages web.
Encore une fois, pensez bien que le nombre retourné par le JavaScript correspond au
Timestamp Unix multiplié par 1000. Pour retrouver le Timestamp standard, il faudra donc
diviser le nombre renvoyé par 1000.
Créer un objet de type date
Pour créer un objet de type date, nous allons cette fois-ci être obligé d’utiliser le constructeur
Date() avec le mot clef new .
Nous pouvons ensuite préciser quatre types de valeurs différents en argument de notre
constructeur, qui vont constituer autant de manières de créer un objet de type date.
La première façon est de ne pas passer d’argument à notre constructeur. De cette manière,
l’objet créé va stocker la date actuelle.
Essayer ce code !

BTS SNIR
___________________________________________________________________________
La deuxième manière de procéder est de passer une date littérale en argument de notre
constructeur Date() .
De cette manière, l’objet créé stockera la date indiquée. Evidemment, il va nous falloir écrire
la date en anglais et au bon format pour que JavaScript la reconnaisse.
Essayer ce code !
On peut encore préciser un nombre en argument de notre constructeur. Ce nombre va

correspondre au nombre de millisecondes écoulées depuis le 1er janvier 1970.
Par exemple, il y a 604800000 millisecondes dans une semaine. Si on passe cette valeur en
argument pour notre constructeur Date() , l’objet créé stockera comme date le 8 janvier 1970
(1er janvier + une semaine).
Essayer ce code !
Finalement, on va encore pouvoir créer un nouvel objet de type date en passant sept nombres
en arguments à notre constructeur Date() .

BTS SNIR
___________________________________________________________________________
Ces nombres vont correspondre respectivement à l’année, le mois, le jour, l’heure, les
minutes, les secondes et les millisecondes correspondants à la date qui doit être stockée dans
l’objet créé.
Sachez toutefois que seuls les trois premiers nombres sont strictement obligatoires.
Essayer ce code !
Comme vous pouvez l’observer, si on ne précise pas l’heure, les minutes, etc. le point de
référence par défaut est minuit.
Notez également qu'en créant une date de cette manière, le mois de janvier est associé au
chiffre 0, février est associé à 1, juillet à 6, etc.
Les formats de date en JavaScript
Dans la partie précédente, nous avons vu quatre grandes façons de créer un objet de type
date avec le constructeur Date() :
 En ne précisant pas d’argument ;
 En précisant une date littérale ;
 En précisant un nombre (nombre de millisecondes) ;
 En précisant l’année, le mois, le jour, etc.

BTS SNIR
___________________________________________________________________________
Vous devez savoir qu’il existe plusieurs écritures valides lorsque l’on précise une date
littérale en JavaScript.
Le JavaScript reconnaît en effet quatre grands types de formats de dates littérales :
 Le format de dates ISO ;
 Les dates courtes ;
 Les dates longues ;
 Les dates complètes.
Voyons immédiatement avec un exemple à quoi correspondent ces différents formats de

dates.
Essayer ce code !
Notez que généralement on préférera utiliser la norme ISO pour créer une date en JavaScript.

BTS SNIR
___________________________________________________________________________
3.9 LES METHODES DE L’OBJET DATE
Les méthodes de l’objet Date
L’objet Date possède une cinquantaine de méthodes. Celles-ci vont très majoritairement se
décomposer en deux ensembles : les « getters » et les « setters ».
Dans cette partie, nous allons voir les méthodes les plus intéressantes pour nous de l’objet
Date. Vous n’aurez ensuite aucun mal à utiliser les autres méthodes si un jour vous en avez
besoin.
Les getters vont pour la plupart aller récupérer une information relative à une date (« get »
en anglais signifie « avoir, récupérer ») tandis que les setters vont servir à définir une date
(« set » signifie « définir, mettre en place »).
Les getters de l’objet Date
Les méthodes de type getter vont toutes commencer par get (d’où le nom).
Notez que le type de méthodes / fonctions « getter » n’est pas propre à l’objet Date ni même
au JavaScript : on retrouve cette convention d’écriture dans de nombreux autres langages en
informatique.
Les getters sont généralement assez simples d’utilisation puisque ces méthodes vont se
contenter de renvoyer une information.
Nous allons donc nous contenter de présenter tous les getters de l’objet Date les plus utiles
dans un même exemple :

BTS SNIR
___________________________________________________________________________
Essayer ce code !
Les setters de l’objet Date
Les méthodes de type setter commencent toutes par set .
Les méthodes de type setter, tout comme les getters, ne sont pas propre à l’objet Date ni au
JavaScript mais constituent un standard d’écriture communément admis : on retrouve des
setters dans de nombreux autres langages en informatique.
Très souvent, nous allons trouver l’équivalent des getters sous forme de setters ( setTime() ,
setFullYear() , etc.).

BTS SNIR
___________________________________________________________________________
Voyons ensemble les setters les plus utilisées :
Essayer ce code !
Formatage d’une date en JavaScript
Une fois que l’on a bien compris comment fonctionnent les getters de l’objet Date, il est
assez simple de formater une date pour que celle-ci s’affiche en français.
Il existe évidemment plusieurs façons de faire. Personnellement, je vous propose une

méthode utilisant les tableaux.

BTS SNIR
___________________________________________________________________________
Essayer ce code !
Il n’y a rien de vraiment difficile dans le script ci-dessus. Comme annoncé, on créé deux
tableaux jour et mois pour pouvoir ensuite afficher la date en français.
L’astuce est de se servir des valeurs renvoyées par getDay() et getMonth() en indices pour nos
tableaux afin d’aller chercher les bonnes valeurs.
La seule chose à laquelle il faut faire attention est de bien faire correspondre les valeurs de
nos tableaux avec les valeurs renvoyées par ces deux méthodes.
Pour cela, il faut se souvenir que getDay() renvoie un chiffre entre 0 pour « Sunday »
(dimanche) et 6 pour « Saturday » (samedi) tandis que getMonth() renvoie un nombre entre 0
pour « January » (janvier) et 11 pour « December » (décembre).

BTS SNIR
___________________________________________________________________________
3.10 L’OBJET JAVASCRIPT MATH
Présentation de l’objet Math
L’objet Math va nous permettre de réaliser différentes opérations sur des nombres grâce à
ses nombreuses méthodes.
Notez déjà que l’objet Math ne possède pas de constructeur. Ainsi, nous ne créerons pas
d’objet de « type Math » mais allons appliquer les méthodes à Math en soi.
Dans ce chapitre, nous n’allons voir que quelques-unes des méthodes qui me semblent les
plus intéressantes de l’objet Math.
La méthode random()
Commençons avec la méthode random() qui retourne un nombre décimal aléatoire entre 0 et
1. Cette méthode est très utile dans le cas d’un programme nécessitant la génération aléatoire
d'un nombre.
Essayer ce code !
Pour obtenir un nombre aléatoire entre 0 et 1000 par exemple, il suffit de multiplier le
résultat renvoyé par random() par 1000.

BTS SNIR
___________________________________________________________________________
Essayer ce code !
Si l’on souhaite maintenant obtenir un nombre entier, on peut appliquer la méthode round()
que nous allons voir immédiatement sur le résultat renvoyé par random() .
La méthode round()
La méthode round() va nous permettre d’arrondir un nombre donné à l’entier le plus proche.
Il peut être intéressant d’utiliser cette méthode avec random() .
Essayer ce code !
Les méthodes floor() et ceil()
Les méthodes floor() et ceil() vont nous permettre respectivement d’arrondir un nombre
décimal à l’entier inférieur ou supérieur.
Ces méthodes peuvent donc une nouvelle fois s’avérer utiles à utiliser avec random() .

BTS SNIR
___________________________________________________________________________
Essayer ce code !
Les méthodes min() et max()
Les méthodes min() et max() retournent respectivement le plus petit ou le plus grand nombre
parmi une série de nombres.
On va passer les nombres à comparer en arguments de ces deux méthodes.
Essayer ce code !
La méthode abs()
La méthode abs() va retourner la valeur absolue d’un nombre (c’est à dire la valeur sans le
signe « - »).
Cette méthode est très pratique si l’on crée un script qui n'accepte que des nombres positifs.

BTS SNIR
___________________________________________________________________________
Essayer ce code !
Autres méthodes de l’objet Math
L’objet Math possède de nombreuses autres méthodes. Pour information, en voici quelques
unes qui pourraient vous être utiles un jour :
Essayer ce code !

Cours Javascript 2

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours Javascript 2

Transféré par

Droits d'auteur :

Formats disponibles

BTS SNIR

JavaScript ( cours N°2 )

3 Les objets en JavaScript

3.1 DECOUVERTE DES OBJETS EN JAVASCRIPT

En effet, en JavaScript, quasiment tout est avant tout objet :

Qu’est-ce qu’un objet ?

P.M. Lycée Durzy Page 1 sur 46

Les objets en JavaScript

Propriétés et méthodes des objets

Dans l’exemple ci-contre, j’ai créé un premier

Nous n’allons pas apprendre à créer des objets

Comme je l’ai indiqué, vous pouvez voir que

P.M. Lycée Durzy Page 2 sur 46

Cependant identite reste avant tout une propriété de moi.

3.2 OBJETS NATIFS ET VALEURS PRIMITIVES EN

Les objets natifs du JavaScript

On appelle également ces objets des objets

Par exemple, à partir de l’objet global

Pour faire cela, nous allons utiliser le mot

P.M. Lycée Durzy Page 3 sur 46

Valeurs primitives ou objets ?

P.M. Lycée Durzy Page 4 sur 46

P.M. Lycée Durzy Page 5 sur 46

3.3 CREATION D’OBJETS EN JAVASCRIPT ET IDENTITE

Création d’objets en JavaScript

Nous disposons de trois façons pour créer de nouveaux objets :

 On peut utiliser le mot clef new et créer un objet à partir de Object() ;

Créer des objets en utilisant new Object()

P.M. Lycée Durzy Page 6 sur 46

Créer un objet littéral

Créer des objets à partir d’un constructeur

P.M. Lycée Durzy Page 7 sur 46

P.M. Lycée Durzy Page 8 sur 46

L’identité des objets

P.M. Lycée Durzy Page 9 sur 46

Faîtes bien attention à ce point car beaucoup de développeurs, même expérimentés,

3.4 L’OBJET STRING ET SES METHODES

Les propriétés de l’objet String sont les suivantes :

P.M. Lycée Durzy Page 10 sur 46

Les méthodes toLowercase() et toUpperCase()

Ces deux méthodes ne nécessitent pas d'argument pour fonctionner.

P.M. Lycée Durzy Page 11 sur 46

Les méthodes indexOf() et lastIndexOf()

P.M. Lycée Durzy Page 12 sur 46

P.M. Lycée Durzy Page 13 sur 46

Cette méthode n'a pas besoin d'argument pour fonctionner.

P.M. Lycée Durzy Page 14 sur 46

Autres méthodes de l’objet String

3.5 L’OBJET NUMBER

P.M. Lycée Durzy Page 15 sur 46

Nous allons étudier certaines de ces méthodes dès maintenant.

Cette méthode va prendre le nombre de décimales voulues en argument.

P.M. Lycée Durzy Page 16 sur 46

Cette méthode va prendre en argument la taille voulue comme ceci :

Cette méthode va prendre en argument le nombre de décimales souhaitées.

P.M. Lycée Durzy Page 17 sur 46

Quelques méthodes globales intéressantes

P.M. Lycée Durzy Page 18 sur 46

3.6 L’OBJET JAVASCRIPT ARRAY

Présentation de Array et des tableaux

Création et syntaxe d’un tableau

Cette variable tableau va tout simplement contenir quatre prénoms :

P.M. Lycée Durzy Page 19 sur 46