Chapitre 1 : Les Objets JavaScript

I. Rappel
a) Qu’est-ce que c’est ?
Le JavaScript (JS) est un langage de script. Le code JS qui s’ajoute à la page HTML
dans une balise <script>. Il est interprété par le navigateur. Il permet de rendre
plus dynamique et interactive la page HTML, sans passer par le serveur.
Le code JavaScript permet d’agir sur les propriétés des éléments d’un document
HTML et donner une dynamique au document affiché

b) Intégration de JavaScript en HTML

 Lier le fichier HTML avec un fichier externe (.js) en précisant URL du
script : Placer en fin de document juste avant </body>

<script type="text/javascript" src=" fichier.js">

</script>

 Dans le Corps du fichier HTML, ajouter votre code JavaScript

<script type="text/javascript">
// … Code
</script>

c) Exercice
 Créer un script pour conjuguer les verbes du premier groupe.
 Le verbe doit être saisi dans une boite de dialogue et le résultat sera affiché
dans la page HTML.

1
II. Les objets JavaScript
a) Introduction
 Créer un tableau
 Afficher le type du tableau

var tab = new Array();

console.log(typeof (tab));

Qu’est-ce que vous remarquez ?  Objet

b) Qu’est-ce qu’un Objet ?

Un objet JavaScript rassemble plusieurs propriétés, qui peuvent être des données,
d’autres objets, ou encore des fonctions, alors appelées méthodes. Un objet n’est ni tout
à fait une structure comme en C, ni tout à fait une classe comme dans un langage objet
classique. Par exemple, un objet JavaScript n’a pas de visibilité (privée, public) pour ses
propriétés. Donc un objet est une entité de programmation qui possède des propriétés et
des méthodes. Il est possible d'agir sur les propriétés directement ou par l'intermédiaire
de méthodes. Une méthode est fonction s'appliquant à l'objet.

Exemple d’objet : Document, Date, Math …

c) Tableau
Le tableau est un des objets les plus utilisé. Vous trouvez ci-dessous quelques
exemples de création et utilisation du tableau (rappel)
Exemples
var tab = [1, 2, 3, 5];
tab[4]=15;
for (var i=0; i<tab.length; i++)
console.log(tab[i]);

var tab = [1, 2, "vide", 5];

tab[4]=15;
for (var i=0; i<tab.length; i++)
console.log(tab[i]);

var tab = [1, 2, "vide", [5, 6, 7]];

tab[4]=15;
for (var i=0; i<tab.length; i++)
console.log(tab[i]);
console.log(tab[3][1]);

2
var tab = new Array(5);
for(var i=0; i<5; i++)
tab[i]=i+1;
console.log(tab);

var tab = new Array();

//Insérer à la fin
tab.push(20);
tab.push(21);
tab.push(50);
tab.push(70);
//supprimer et retourner le dernier élément
var n = tab.pop();
for(var i=0; i<tab.length; i++)
console.log(tab[i]);
console.log(n);
// supprimer le premier élément
var f = tab.shift();
console.log(f);
// Insérer au début
f = tab.unshift(0);
for(var i=0; i<tab.length; i++)
console.log(tab[i]);
// supprimer l'élément précisé par l'indice (undefined)
delete tab[0];
for(var i=0; i<tab.length; i++)
console.log(tab[i]);

var tab = new Array();

//Insérer à la fin
tab.push(20);
tab.push(21);
tab.push(50);
tab.push(70);
tab.splice(1, 2);
for(var i=0; i<tab.length; i++)
console.log(tab[i]);
var tab = new Array(1, 2, "Bonjour", 'eco', 'salut', 500);
for(var i=0; i<tab.length; i++)
console.log(tab[i]);

Dans les exemples précédents, nous avons vu la création des tables avec les
différents types de propriétés (type primitifs et objets). Le tableau peut aussi
stocker des fonctions. Voir l’exemple suivant

3
var tableau = new Array();
tableau[0]='1250';
tableau[1]='stylo';
tableau[2]=8;
tableau[3]=10;
tableau[4]= function(){ return tableau[3]-tableau[2];}
console.log(tableau);
console.log(tableau[4]);
console.log(tableau[4]());

Exécution :

d) Création d’un objet au moyen d’un littéral

On peut créer un nouvel objet par un littéral, en définissant ses propriétés ses
méthodes entre des accolades {}. On met alors chaque nom de propriété suivi d’un :
suivi de la valeur de la propriété. Les propriétés ainsi construites sont séparées par des
virgules. Il y a plusieurs Méthodes (façons) pour créer un objet :

Méthode 1 :

var article =
{
"nom" : "clavier", "quantite" : 1000, "prix" : 80
};

Méthode 2 :

var article2 = {};

article2.nom = "clavier";
article2.prix= 80;
article2['quantite']=1000;

Méthode 3 :

function produit (nom, prix, qu){

this.nom=nom;
this.prix=prix;
this.qu=qu;
}
var produitt = new produit ("clavier", 80, 1000);

4
Méthode 4 :

On peut créer un objet via le constructeur Object.

var article3 = new Object();

article3.nom = "clavier";
article3.prix= 80;
article3.quantite = 1000;

Comme on a présenté précédemment, un objet peut contenir des propriétés qui

sont de type function. On parle alors de méthode de l’objet. Dans une méthode, on
accède aux propriétés de l’objet grâce à l’identificateur this, désignant l’objet auquel
appartient la méthode.
 Exemple :

var article3 = new Object();

article3.nom = "ecran";
article3.prix= 2500;
article3.quantite = 15;
article3.maj = function(d)
{
this.quantite-=d;
}
article3.maj(4);
console.log(article3);

L’ajout d’une méthode est comme l’ajout d’une propriété.

e) Objets Imbriqués (Composites et Composés)

Il est possible, dans un littéral d’objet, de créer une propriété qui est elle -même un
objet. On peut parler de composite pour l’objet qui contient un autre objet, qui est alors
un composé.

5
var Dossier =
{
"nom" : "J2ee", "Date" : "05/10/2022", "proprietaire" : "EL MAMOUNE", examen :
{"Date":"20/01/2023", "Dure":"2h", "type":"pratique"}
};

console.log(Dossier)
console.log(Dossier.examen)

Remarque ; On peut aussi créer un objet en appelant la méthode create

var Dossier =
{
"nom" : "J2ee", "Date" : "05/10/2022", "proprietaire" : "EL MAMOUNE", examen :
{"Date":"20/01/2023", "Dure":"2h", "type":"pratique"}
};

var tst = Object.create(Dossier);

console.log(tst);
tst.nom= 'java';
tst.Date = '01/07/2023';
console.log(tst);
tst.autre= "0000"; // ajout d'une propriété autre
console.log(tst)

6
III. L’Orienté objet en JavaScript

L’image ci-dessus est un extrait d’un tutoriel JavaScript

a) Définition d’une classe

// Définition de la classe
class compte {
// Définition du constructeur d'initialisation
constructor(code, solde)
{
this.code=code;
this.solde=solde;
}
// Définition des méthodes
affiche = function()
{
console.log("| Code : " +this.code + " | Solde : "+ this.solde);

}
verser = function (montant)
{
this.solde +=montant;
}
retrait = function(mt)
{
this.solde-=mt;
return this.solde;
}
}
let cp = new compte(458, 500);
cp.affiche();
cp.verser(1000);
cp.affiche();
var p = cp.retrait(50);
console.log(p);

7
 b) L’héritage
L’héritage permet, lors de la déclaration d’une nouvelle classe ou d’un nouvel
objet, d’y inclure les caractéristiques (telles que les propriétés et méthodes) d’une autre
classe.

// Définition de la classe Mère

class compte {
// Définition du constructeur d'initialisation
constructor(code, solde)
{
this.code=code;
this.solde=solde;
}
// Définition des méthodes
affiche_objet = function()
{
console.log(this);

}
affiche = function()
{
console.log("| Code : " +this.code + " | Solde : "+ this.solde);

}
verser = function (montant)
{
this.solde +=montant;
}
retrait = function(mt)
{
this.solde-=mt;
return this.solde;
}
}
//L'héritage
// Définition de la classe fille
class epargne extends compte
{
constructor(code, solde, pour)
{
super(code, solde);
this.pour= pour;
}

affiche2 = function()
{
this.affiche();
console.log(" | pourcentage : "+this.pour)

8
}
update = function()
{
this.solde +=this.solde*pour;
}

var cmp = new epargne(5000, 25000, 10)

cmp.affiche();
cmp.affiche2();

Pour résumer L’héritage nous permet de « Hériter » des propriétés et méthodes

d’une classe à une autre. C’est l’un des mécanismes de l’orienté objet les plus essentiels.
Le JavaScript est un langage orienté objet de type prototype.

c) JavaScript est un langage de prototypage

JavaScript n’est pas un langage orienté objet, ces objets sont créés par le biais de
prototypes. Nous avons utilisé le mot clé class pour créer un objet en JavaScript mais
nous avons créé ce qu’on appelle un prototype.

Tous les objets en JavaScript, aussi bien les objets natifs que les objets que vous
allez créer, sont et seront des prototypes. Le mot class nous permet de créer plus
facilement et surtout de manière plus lisible des objets.

Il est possible de surcharger des types natifs en JavaScript pour leur ajouter des
fonctionnalités ou comportements supplémentaires. Cela peut se faire très simplement,
comme vous pouvez le voir dans le code ci-dessous

Exemple 1:

Date.prototype.hello=function()
{
console.log("Aujourd'hui est votre jour (°_°)")
}

var d = new Date();

d.hello();

Exemple 2:

epargne.prototype.Hi=function()
{
console.log("Hi");
}