ROYAUME DU MAROC

‫مكتب التكوين المهني وإنعاش الشغل‬

office de la formation professionnelle et de la promotion du travail

ISMONTIC TANGER

MODULE 105: Programmation en JAVACRIPT

LES OBJETS EN JAVASCRIPT

ADDARRAZI ILHAM

2023-2024
Les objets en javascript

Un objet est un ensemble cohérent de propriétés et de méthodes. Le

JavaScript dispose d’objets natifs (objets prédéfinis) qui possèdent des
propriétés et des méthodes qu’on va pouvoir directement utiliser et nous
permet également de définir nos propres objets.
Il est possible de créer des objets de 4 manières différentes en JavaScript.
On va pouvoir :
Créer un objet littéral ;
Utiliser le constructeur Object() ;
Utiliser une fonction constructeur personnalisée ;
Utiliser la méthode create().
Les objets en javascript
1. Création d’un objet littéral
Il est possible de déclarer un objet directement dans une variable avec des
propriétés et des méthodes. En JavaScript, on peut créer
Syntaxe: un objet en définissant ses
propriétés à l'intérieur d'une
const monObjet = { paire d'accolades : { ... };
propriete1: valeur1, Cette manière de créer des
propriete2: valeur2,
objets est appelée « syntaxe
littérale »
// ... ,
methode1(/* ... */) { // ... },
methode2(/* ... */) { // ... } Une méthode est une
// ... propriété dont la valeur est
}; une fonction, elle permet de
définir une action pour un
objet
 Les objets en javascript
1. Création d’un objet littéral

Exemple: Et on peut accéder aux propriétés et aux

const voiture = { méthodes de la manière suivante:
vitesse: 30, let vitesse = [Link];
dimension: { let largeur = [Link];
largeur: 2, // Exécuter une méthode
longueur: 4 [Link]();
}, Modifier un objet:
klaxonner: function () { [Link]=50;
[Link]('BIIIIIIIIIP'); Ajouter dynamiquement une nouvelle propriété:
} [Link]=‘bleu’;
};
Les objets en javascript
2. Utiliser le constructeur Object() ;
Il est possible d’utiliser le constructeur Object() pour créer un nouvel
objet.
Syntaxe:
var monObjet= new Object();
[Link]été1=valeur;
[Link]été2=valeur;
……
monObjetmethode1=function(){

};
Les objets en javascript
2. Utiliser le constructeur Object() ;
Exemple:
var telephone = new Object();
[Link]=“Iphone";
[Link] = 10000;
telephone. stock= 20;
[Link] = function()
if ([Link] > 0) {
return true;
} else {
return false;
}
};
Les objets en javascript
3. Utiliser une fonction constructeur personnalisée ;
En Javascript, une fonction est considérée comme un objet. Il est donc possible de créer des
propriétés (et des méthodes) sur cette fonction.
Il est possible de créer un objet avec le constructeur new :
let monObjet = new Object();
Mais, il est possible aussi d’appliquer le constructeur sur une fonction (qui est aussi un objet)
possédant une structure (des propriétés), l’objet créé hérite de cette structure. On utilisera
l’opérateur this pour relier le nouvel objet aux propriétés de la fonction.
Syntaxe:
var monObjet=function(propriétée1, propriétée2,…){
[Link]étée1=propriétée1;
[Link]étée2=propriétée2;
…..
[Link]=function(){

};

}
La fonction constructeur doit vraiment être vue en JavaScript comme un plan de base pour la
création d’objets similaires et comme un moyen de gagner du temps et de la clarté dans son code.
On ne va définir dans cette fonction que les caractéristiques communes de nos objets et on pourra
Les objets en javascript
3. Utiliser une fonction constructeur personnalisée ;
Exemple:
var Stagiaire=function(nom,age,filiere){
[Link]=nom;
[Link]=age;
[Link]=filiere;
this.se_Presenter(){
[Link]("bonjour je suis "+[Link])
};
}

var s1=new Stagiaire(("Allali", 20, "TDI");

Les objets en javascript
4. Le prototype
Un constructeur possède un attribut prototype qui permet de stocker les méthodes d’un objet. Plutôt que
d’utiliser le mot-clé this pour affecter des méthodes à la construction, on ajoute les méthodes au
prototype.
Pour créer des relations entre objets, JavaScript utilise les prototypes.
En plus de ses propriétés particulières, tout objet JavaScript possède une propriété interne appelée
prototype. Il s'agit d'un lien (on parle de référence) vers un autre objet.
Lorsqu'on essaie d'accéder à une propriété qui n'existe pas dans un objet, JavaScript essaie de trouver cette
propriété dans le prototype de cet objet

Exemple:
function Utilisateur(prenom, nom) {
[Link] = prenom;
[Link] = nom;

}
[Link] = function() {
[Link]([Link], [Link]);
}
let u = new Utilisateur("David", "Gayerie");
[Link]();

L’utilisation du prototype optimise la gestion mémoire.

Les objets en javascript
5. Utiliser la méthode create()
La méthode [Link]() crée un nouvel objet avec un prototype donné
et des propriétés données.
Exemple1:
const person = {
isHuman: false,
printIntroduction: function() {
[Link](`My name is ${[Link]}. Am I human? $
{[Link]}`); }
};
const me = [Link](person);
[Link] = 'Matthew';
[Link] = true;
Les objets en javascript
5. Utiliser la méthode create()
La méthode [Link]() crée un nouvel objet avec un prototype donné
et des propriétés données.
Exemple 2:
const unObjet = { a: 2 };
// Crée unAutreObjet avec unObjet comme prototype
const unAutreObjet = [Link](unObjet);
[Link](unAutreObjet.a); // 2
[Link]() est utilisée pour créer l'objet unAutreObjet en lui donnant
comme prototype l'objet unObjet. Lors de l'appel à unAutreObjet.a, c'est
la propriété a de unObjet qui est utilisée puisque la propriété a n'existe pas
dans unAutreObjet.
Ce mode de relation entre les objets JavaScript est appelé délégation : un
objet délègue une partie de son fonctionnement à son prototype
Les objets en javascript
6. L’héritage
En JavaScript, un objet peut être créé à partir d’une fonction de construction. Cette
dernière est associé à un prototype qui est un objet représentant l’objet parent.
Par défaut, le prototype correspond à un objet qui ne contient que la propriété
constructor qui désigne la fonction elle-même.
Pour créer un héritage, il suffit de modifier l’objet prototype pour lui assigner un objet
parent:
Lorsqu’on accède à un attribut, une propriété
Exemple: ou une méthode, l’interpréteur commence par
function Parent() { le rechercher dans l’objet et, s’il n’existe pas, il
[Link] = "parent"; recherche récursivement dans l’objet prototype.
} Dans l’exemple précédent, on peut bien dire
que l’attribut nom est hérité de l’objet
prototype Parent.
function Enfant() { Le mécanisme d’héritage est très souple en
} JavaScript puisqu’on peut accéder à l’objet
prototype d’un objet avec la
[Link] = new Parent; méthode [Link](o) mais on
peut également changer dynamiquement le
let e = new Enfant; prototype d’un objet grâce à la
méthode [Link](o, p)
[Link]([Link]);
Les objets en javascript
6. Création d’une classe
Depuis ES6, la notion de classe a été introduite car elle est plus largement
utilisée dans les langages de programmation objet. Cependant, cela ne change
rien dans le principe de programmation objet par prototype de JavaScript. Il
s’agit plus d’un sucre syntaxique.
Syntaxe: constructor() peut être ajoutée à
class MaClasse { la définition de la classe. Cette
constructor(param1, param2 /* ... */) { méthode est exécutée pendant la
this.propriete1 = param1; création d'un objet et permet
this.propriete2 = param2;
// ...
d'ajouter des données à l'objet,
} sous forme de propriétés.
methode1(/* ... */) {
// ...
Instanciation :
}
methode2(/* ... */) { const monObjet = new
// ... MaClasse(arg1, arg2, ...);
}
// ...
}
 Les objets en javascript
6. Création d’une classe Il est également possible de déclarer des
Exemple: propriétés grâce aux mots-clés get et set.

class Utilisateur { class Utilisateur {

constructor(prenom, nom) { constructor(prenom, nom) {
[Link] = prenom; [Link] = prenom;
[Link] = nom; [Link] = nom;
} }

print() { get nom_complet() {

[Link](prenom, nom); return `${[Link]} ${[Link]}`;
} }
}
set nom_complet(v) {
let u = new Utilisateur("David", "Gayerie"); let t = [Link](" ");
[Link](); [Link] = t[0];
[Link] = t[1];
}
}
Les objets prédéfinis
1. L’objet Document

[Link] (message)// Ecrire dans le document

[Link] (message) // Ecrire dans le document (retour à la ligne)
Exemple:
[Link]("<center><font face='Arial' color='#0000ff’> <b>C'est
mon 2ème script</b></font></center>");
[Link]('<center><font face="Arial" color="#000FFF">
<b>C\'est mon 3ème script</b></font></center>’);

 Il y’a aussi: [Link], [Link] ,

[Link] , [Link], [Link]
 Autres fonctions utiles: [Link](), [Link](), [Link](),
[Link](), [Link](color), [Link](x),
[Link](), [Link](), [Link]()
Les objets prédéfinis
2. L’objet Window

L'objet window (fenêtre) est l'objet le plus haut de la hiérarchie javascript. Il est

le parent de chaque objet qui compose la page web, il contient donc :

l'objet document: la page en elle-même
l'objet location: le lieu de stockage de la page
l'objet history: les pages visitées précédemment
l'objet frames: les cadres (division de la fenêtre en sous-fenêtres)
Les objets prédéfinis
2. L’objet Window
2.1. Les méthodes de l'objet window
a. Les méthodes alert(), confirm() et prompt()
Les méthodes alert(), confirm() et prompt() sont des méthodes qui font apparaître
une boîte de dialogue.
 Methode alert
La méthode alert bloque le programme en cours tant que l'utilisateur n'aura pas
cliqué sur "OK". Très utile pour vous aider à débugger les scripts.

Syntaxe: alert(variable) ;

Exemple:

alert("chaîne de caractères") ;

alert(variable+ "chaîne de caractères");

Les objets prédéfinis
2. L’objet Window
2.1. Les méthodes de l'objet window
a. Les méthodes alert(), confirm() et prompt()
Les méthodes alert(), confirm() et prompt() sont des méthodes qui font apparaître une boîte de
dialogue, elles sont expliquées.
 Methode confirm

La méthode javascript confirm(texte) permet d'avertir l'utilisateur en ouvrant une boite de dialogue

avec deux choix "OK" ou "Annuler ". Le click sur OK renvoie la valeur true.

Exemple:

if (confirm('texte'))

{ //action à faire pour la valeur true }

else

{ //action à faire pour la valeur false }

Les objets prédéfinis
2. L’objet Window
2.1. Les méthodes de l'objet window
a. Les méthodes alert(), confirm() et prompt()
Les méthodes alert(), confirm() et prompt() sont des méthodes qui font apparaître une boîte de
dialogue, elles sont expliquées.
 Methode prompt

La méthode javascript prompt est une autre boite de dialogue dite boite d'invite, qui est

composée d'un champ comportant une entrée à compléter par l'utilisateur. Cette entrée

possède aussi une valeur par défaut.

La syntaxe est : prompt("texte de la boite d'invite" ,"valeur par défaut") ;

En cliquant sur OK, la méthode renvoie la valeur tapée par l'utilisateur ou la réponse proposée

par défaut. Si l'utilisateur clique sur Annuler ou Cancel, la valeur null est alors renvoyée.

Exemple : prompt(" quel est votre nom?", "Ali");

Les objets prédéfinis
2. L’objet Window
2.1. Les méthodes de l'objet window
b. Exercice d’application

Ecrire un script qui affiche le message "Hello

World" après le clic sur le premier bouton.

Lors du clic sur le deuxième bouton demander

à l'utilisateur de saisir son nom. ensuite

demander une confirmation du nom de

l'utilisateur. Si le nom est confirmé, afficher ce

dernier dans une boîte de dialogue.

Les objets prédéfinis
2. L’objet Window
2.1. Les méthodes de l'objet window
c. Les méthodes open(), et close()

[window.]open("URL","nom_de_la_fenêtre","caractéristiques_de_la fenêtre")

URL est l'URL de la page que l'on désire afficher dans la nouvelle fenêtre. Si

on ne désire pas afficher un fichier html existant, on mettra simplement ''".

caractéristiques_de_la _fenêtre est une liste de certaines ou de toutes les

caractéristiques de la fenêtre suivante que l'on note à la suite, séparées par

des virgules et sans espaces ni passage à la ligne.

Les objets prédéfinis
2. L’objet Window
2.1. Les méthodes de l'objet window
c. Les méthodes open(), et close()
height=pixels The height of the window. Min. value is 100
left=pixels The left position of the window. Negative values not
allowed
menubar=yes|no|1|0 Whether or not to display the menu bar
status=yes|no|1|0 Whether or not to add a status bar
titlebar=yes|no|1|0 Whether or not to display the title bar. Ignored unless the
calling application is an HTML Application or a trusted
dialog box
toolbar=yes|no|1|0 Whether or not to display the browser toolbar. IE and
Firefox only
top=pixels The top position of the window. Negative values not
allowed
width=pixels The width of the window. Min. value is 100
Les objets prédéfinis
2. L’objet Window
2.1. Les méthodes de l'objet window
c. Les méthodes open(), et close()

Il existe une méthode dans JavaScript disponible qui permet de fermer

l’onglet du fenêtre en cours. C’est la méthode close().
Il faut savoir que la méthode [Link]() ne peut fermer que l’onglet
ouvert en utilisant la méthode [Link](). Donc, pour fermer l’onglet
en cours en javaScript, il doit être ouvert à l’aide de la méthode
[Link]().
Les objets prédéfinis
3. L’objet STRING

JavaScript gère fort bien les chaînes de caractères et d'une façon générale
les caractères alphanumériques (nombres, mots ou mélange des deux).
Pour déclarer une chaîne, on la met entre guillemets : x = "chat" , z =
"123", y="" .
Méthodes:
Les objets prédéfinis
3. L’objet STRING

Autres méthodes:
toString() : convertit un nombre en chaîne : si y = 3.14, c = [Link]()
retourne dans c la chaîne "3.14" constituée de 4 éléments.
concat() : z = [Link](x) a le même effet que z = x + y.
[Link](): permet de transformer une chaine en tableau:
Exemple:
var filiere= "TDI";
var tabFiliere = [Link](filiere);
[Link](lettre => {
[Link](lettre);
});
Les objets prédéfinis
3. L’objet STRING

Autres méthodes:
toString() : convertit un nombre en chaîne : si y = 3.14, c = [Link]()
retourne dans c la chaîne "3.14" constituée de 4 éléments.
indexOf(): La méthode indexOf(car) (avec O en majuscule) permet de
retourner la position du caractères car passé en paramètre. Si le caractère
existe dans la chaîne, alors sa position (comprise entre 0 et la longueur de la
chaîne - 1) est retournée, sinon (le caractère ne figure pas dans la chaîne) alors
la valeur -1 est retournée. La méthode indexOf() peut accueillir un deuxième
paramètre qui est un entier qui indique à partir de quel position de la chaîne on
commencera la recherche du caractère passé en premier paramètre.
var str="Bonjour";
[Link]("o"); // Retourne 1
[Link]("x"); //Retourne -1
[Link]("o",2); // Retourne 4
Les objets prédéfinis
3. L’objet STRING

Autres méthodes:
startsWith() renvoie un booléen indiquant si la chaine de caractères
commence par la deuxième chaine de caractères fournie en argument.
endsWith() renvoie un booléen indiquant si la chaine de caractères se
termine par la chaine de caractères fournie en argument.
Exemple:
const str1 = 'Saturday night plans';
[Link]([Link]('Sat')); // expected output: true
[Link]([Link](‘?')); // expected output: false
Les objets prédéfinis
3. L’objet STRING

Exercices d’application:

Exercice 1:
Écrire un script qui demande à l’utilisateur de saisir une chaine de
caractères ch et un caractère c et qui calcule le nombre d’occurrences de ce
caractère dans ch.
.
Les objets prédéfinis
4. L’objet DATE

Pour travailler avec des dates et les manipuler en JavaScript, il est nécessaire d’utiliser l’objet
natif 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 objets prédéfinis
Méthode Description Type de valeurs retournée
L'objet retourné est un entier (entre 1 et 31) qui
getDate() Permet de récupérer la valeur du jour du mois
correspond au jour du mois :
• L'objet retourné est un entier qui correspond
Permet de récupérer la valeur du jour de la
getDay() au jour de la semaine :0: dimanche
semaine pour la date spécifiée
• 1: lundi ...
Permet de récupérer la valeur de l'anné sur 4 L'objet retourné est un entier qui correspond à
getFullYear()
chiffres pour la date passée en paramètre l'année (XXXX) : 2021
L'objet retourné est un entier (entre 0 et 23) qui
getHours() Permet de récupérer la valeur de l'heure
correspond à l'objet Date.
L'objet retourné est un entier (entre 0 et 999)
Permet de récupérer le nombre de
getMilliseconds() qui correspond aux millisecondes de l'objet
millisecondes
passé en paramètre.
L'objet retourné est un entier (entre 0 et 59) qui
getMinutes() Permet de récupérer la valeur des minutes
correspond aux minutes de l'objet Date.
• L'objet retourné est un entier (entre 0 et 11)
getMonth() Permet de récupérer le numéro du mois qui correspond au mois :0: janvier
• 1: février ...
L'objet retourné est un entier (entre 0 et 59) qui
getSeconds() Permet de récupérer le nombre de secondes correspond aux secondes de l'objet passé en
paramètre.
L'objet retourné est un entier. Cette méthode
Permet de récupérer le nombre de
getTime() est très utile pour convertir des dates, soustraire
millisecondes depuis le 1er janvier 1970
ou ajouter deux dates, etc.
Retourne la différence entre l'heure locale et L'objet retourné est un entier, il représente le
getTimezoneOffset()
l'heure GMT (Greenwich Mean Time) nombre de minutes de décalage
Permet de récupérer la valeur de l'anné sur 2 L'objet retourné est un entier qui correspond à
getYear()
chiffres pour l'objet Date. l'anné (XX) :
Les objets prédéfinis

Méthode Description Type de valeurs retournée

L'objet retourné est une chaîne de

Permet de convertir une date en une chaîne de
toGMTString() caractère du type :
caractères au format GMT
Wed, 28 Jul 1999 [Link] GMT

L'objet retourné est une chaîne de

Permet de convertir une date en une chaîne de caractère dont la syntaxe dépend du
toLocaleString()
carctères au format local système, par exemple :
28/07/99 [Link]
Les objets prédéfinis
Méthode Description Type de valeur en paramètre

Le paramètre est un entier (entre 1 et 31)

setDate(X) Permet de fixer la valeur du jour du mois
qui correspond au jour du mois

• Le paramètre est un entier qui

Permet de fixer la valeur du jour de la correspond au jour de la semaine :0:
setDay(X)
semaine dimanche
• 1: lundi ...

Le paramètre est un entier (entre 0 et 23)

setHours(X) Permet de fixer la valeur de l'heure
qui correspond à l'heure

Le paramètre est un entier (entre 0 et 59)

setMinutes(X) Permet de fixer la valeur des minutes
qui correspond aux minutes

• Le paramètre est un entier (entre 0 et

setMonth( X) Permet de fixer le numéro du mois 11) qui correspond au mois :0: janvier
• 1: février ...

Le paramètre est un entier représentant le

setTime(X) Permet d'assigner la date nombre de millisecondes depuis le
1er janvier 1970
Les objets prédéfinis
4. L’objet RegExp.
Les expressions régulières sont des schémas ou des motifs utilisés pour effectuer des
recherches et des remplacements dans des chaines de caractères.
Ces schémas ou motifs sont tout simplement des séquences de caractères dont certains
vont disposer de significations spéciales et qui vont nous servir de schéma de
recherche. Concrètement, les expressions régulières vont nous permettre de vérifier la
présence de certains caractères ou suites de caractères dans une expression.
En JavaScript, les expressions régulières sont avant tout des objets appartenant à
l’objet global constructeur RegExp.
Définir une expression régulière
on peut soit déclarer nos expressions régulières de manière littérale, en utilisant
des slashs comme caractères d’encadrement, soit appeler le constructeur RegExp:
var regex = /leContenuDeMaRegex/; //Les chaînes de caractères sont définies
entre guillemets ('), les regex entre des slashs (/)
var regex = new RegExp(‘expression’)
Les objets prédéfinis
4. L’objet RegExp.
les classes de caractères
Les objets prédéfinis
4. L’objet RegExp.
les répétiteurs
Les objets prédéfinis
4. L’objet RegExp.
Les méthodes intégrées
Fonction Description

Recherche une correspondance dans une chaîne de

exec() caractères. Elle renvoie un tableau d'informations ou null
en cas de non-concordance.

Teste si une chaîne de caractères correspond à un modèle.

test()
Il renvoie true (vrai) ou false (faux).

Recherche d'une correspondance dans une chaîne de

caractères. Elle renvoie l'index de la première
search()
correspondance, ou -1 si aucune correspondance n'est
trouvée.

Recherche une correspondance dans une chaîne, et

replace() remplace la sous-chaîne correspondante par une chaîne
de remplacement.

Recherche une correspondance dans une chaîne de

match() caractères. Elle renvoie un tableau d'informations ou null
en cas de non correspondance.

Divise une chaîne en un tableau de sous-chaînes en

split()
utilisant une expression régulière.
Les objets prédéfinis
5. L’objet Math .
x=[Link](y); //renvoie la val absolue
x=[Link](y); //renvoie l’entier >=y
x=[Link](y); //renvoie l'entier inférieur ou égal à y.
x=[Link](y);// arrondit le nombre à l'entier le plus proche
x=[Link](y,z); //renvoie le max de y et z
x=[Link](y,z); //renvoie le min
x=parseInt("variable"); //convertir vers int
x=parseFloat("variable"); //convertir vers folat
x=[Link](y,z); // calcule la valeur d'un nombre y à la puissance z.
x=[Link](); //renvoie la valeur d'un nombre aléatoire choisi entre 0 et 1.
x=[Link](y); //renvoie la racine carrée de y.
La fonction eval :
x=eval(variable);
Cette fonction évalue une chaîne de caractère sous forme de valeur numérique. On peut stocker dans
la chaîne des opérations numériques, des opérations de comparaison, des instructions et même des
fonctions.
str='5 + 10';
x=eval(str);
résultat: x=15;
Les objets prédéfinis
5. L’objet Math .
x=[Link](y); //renvoie la val absolue
x=[Link](y); //renvoie l’entier >=y
x=[Link](y); //renvoie l'entier inférieur ou égal à y.
x=[Link](y);// arrondit le nombre à l'entier le plus proche
x=[Link](y,z); //renvoie le max de y et z
x=[Link](y,z); //renvoie le min
x=parseInt("variable"); //convertir vers int
x=parseFloat("variable"); //convertir vers folat
x=[Link](y,z); // calcule la valeur d'un nombre y à la puissance z.
x=[Link](); //renvoie la valeur d'un nombre aléatoire choisi entre 0 et 1.
x=[Link](y); //renvoie la racine carrée de y.
La fonction eval :
x=eval(variable);
Cette fonction évalue une chaîne de caractère sous forme de valeur numérique. On peut stocker dans
la chaîne des opérations numériques, des opérations de comparaison, des instructions et même des
fonctions.
str='5 + 10';
x=eval(str);
résultat: x=15;