Chapitre 5.

Les objets JavaScript

Chapitre 5. Les objets JavaScript

Chapitre 5 : Les objets JavaScript

֍ Durée : 1 heure 30 minutes.

֍ Mots clés : window, navigator, location, history, document, alert, confirm, prompt,
getElementById, Array, Boolean, Date, Function, Math, Number, RegExp, String.

֍ Objectifs : À l'issue de ce chapitre, vous serez en mesure de :

» Distinguer les objets du navigateur.

» Lister les objets du noyau JavaScript.

15 Programmation Web 2
 Chapitre 5 : Les objets JavaScript

Introduction

En JavaScript, tout est objet ! On distingue toutefois parmi ceux-ci, deux types : les objets de
type primitif et les objets de type composé. Les premiers sont ceux qui se résument à une
valeur unique : les nombres, les booléens et les chaînes. Les seconds (tableaux, objets)
comportent plusieurs valeurs (propriétés), chacune bénéficiant d'un nom et d'une valeur,
l'ensemble réuni en une seule entité (l'objet), elle aussi identifiée par un nom.

L'accès à une propriété (pour lui affecter ou en lire sa valeur) devra obligatoirement préciser
en premier lieu le nom de l'objet suivi du nom de la propriété concernée. On peut affecter à
une propriété n'importe quel type d'objet (objets de type primitif ou de type composé).

1- Les objets du navigateur

Lorsque vous ouvrez une page Web, le navigateur crée des objets prédéfinis correspondant à la page
Web, à l'état du navigateur, et peuvent donner beaucoup d'informations qui vous seront utiles.

Les objets de base du navigateur sont : navigator, window, location, history et document.
 navigator : qui contient des informations sur le navigateur de celui qui visite la page

 window : c'est l'objet où s'affiche la page, il contient donc des propriétés concernant la
fenêtre elle-même mais aussi tous les objets-enfants contenus dans celle-ci

 location : contient des informations relatives à l'adresse de la page à l'écran

 history: c'est l'historique, c'est-à-dire la liste de liens qui ont été visités précédemment

 document : il contient les propriétés sur le contenu du document (couleur d'arrière

plan, titre, ...)

Les objets du navigateur sont classés dans une hiérarchie qui décrit la page affichée à l'écran,
et qui permet d'accéder à n'importe quel objet grâce à une désignation dépendant de la
hiérarchie.

Pour accéder à un objet du navigateur, il faut parcourir la hiérarchie du navigateur, en partant

du sommet (l'objet window), puis en parcourant tous les maillons jusqu'à atteindre l'objet
désiré. La syntaxe est window.objet1.objet2.objet3.objet_visé (ici il y a trois objets
intermédiaires [objet1, objet2 et objet3] mais ce nombre peut varier de 0 à un très grand
nombre d'objets, suivant l'imbrication des objets dans la page).

16 Programmation Web 2
 Chapitre 5 : Les objets JavaScript

Pour lire ou modifier le contenu d'une propriété de l'objet visé il suffit de rajouter un point,
puis le nom de la propriété. Certaines propriétés sont modifiables, c'est-à-dire qu’il est
possible de modifier dynamiquement un élément (du texte, une image, etc.). Certaines
propriétés sont par contre en lecture seule, c'est-à-dire qu'elles permettent uniquement de
récupérer des informations mais qu'il est impossible de les modifier.

17 Programmation Web 2
Chapitre 5 : Les objets JavaScript

1.1.L'objet window

Cet objet représente le navigateur contenant l'objet document. Il est créé lors de l'ouverture du
navigateur et contient toutes les propriétés et les méthodes de gestion de la fenêtre. Ses
propriétés et ses méthodes peuvent être appelées sans devoir préciser l'objet window.

Une méthode de l'objet window

window.alert ("Bonjour !");

L'objet window est sous-entendu

alert("Bonjour !");

1.1.1. Demande de confirmation à l'utilisateur

JavaScript propose une prise en charge limitée des fenêtres modales. La méthode
window.alert() est assez commune mais il existe d'autres options. Avec
window.confirm(), l'utilisateur se voit présenter une fenêtre de type Oui/Non. S'il clique sur
Oui, window.confirm() renvoie true, et false dans le cas contraire. Le code de l’exemple
suivant l'utilise comme valeur de retour pour un lien. Ainsi, si l'utilisateur clique sur Non, le
navigateur ne suit pas le lien.

Demande de confirmation à l’utilisateur

<a href="page.html" onclick="return window.confirm('Visiter le lien?');">Cliquer ici</a>

1.1.2. Demande de données utilisateur

La méthode window.prompt()permet aux utilisateurs de saisir du texte dans un champ de

texte d'une seule ligne. Ces informations correspondent à la valeur de retour de l'appel de
méthode et peuvent ensuite être utilisées dans le script.

Demande de données utilisateur

<script type="text/javascript">
let name = window.prompt("Entrer votre nom !", "<Votre nom>");
if (name != "") {
window.alert("Bonjour, " + name + "!");
}
</script>

Programmation Web 2
Chapitre 5 : Les objets JavaScript

1.2.L'objet navigator

Cet objet contient les propriétés du navigateur (nom, version, langue, etc.). On utilise de
moins en moins souvent cet objet pour identifier le navigateur de l'utilisateur car certaines
propriétés peuvent être modifiées (cas d'Opera).

On utilisera plutôt certaines propriétés de l'objet document pour réaliser ces tests.

1.2.1. Détection du type de navigateur

L'objet navigator propose des informations sur le navigateur. Sa propriété userAgent, qui
contient la chaîne d'identification complète du navigateur, est très utile mais parfois difficile à
analyser.

Pour déterminer simplement le type d'un navigateur, il suffit d'employer la propriété appName.

Détermination du type de navigateur

window.alert(navigator.appName);

1.2.2. Détection du numéro de version du navigateur

Pour déterminer le numéro de version du navigateur, il existe plusieurs manières. La plupart

du temps, on doit rechercher navigator.userAgent.

1.3.L’objet location

Cet objet contient des informations relatives à l'adresse de la page à l'écran.

1.3.1. Redirection du navigateur

La propriété location.href permet un accès en lecture et en écriture à l'URL de la page en

cours. Régler location.href sur une autre valeur redirige le navigateur, qui charge alors la
nouvelle page.
location.href()
location.href = "nouvellePage.html";

Programmation Web 2
Chapitre 5 : Les objets JavaScript

La page précédente arrive ensuite dans l'historique du navigateur. Si on souhaite remplacer

l'ancienne page dans l'historique, on utilise la méthode location.replace() :

location.replace()
location.replace("nouvellePage.html");

1.3.2. Rechargement de la page

La méthode reload() de l'objet location recharge la page en cours, l'équivalent de

location.href = location.href.

Rechargement de la page
location.reload();

1.4.L'objet document

L'objet document regroupe toutes les méthodes de gestion de la page Web. Ses fonctions
permettent de cibler un objet (un paragraphe par exemple) pour modifier ses attributs.

Pour modifier les attributs d'un élément (paragraphe, lien, etc.), celui-ci doit être au préalable
identifié par un identifiant unique (attribut id). L'objet est ensuite ciblé grâce à la méthode
getElementById() contenue dans l'objet document. Si l'élément possédant cet id n'existe
pas la méthode renvoie null.

Utilisation des objets contenus dans le document

//objet contient toutes les propriétés de idElement
let monElement = document.getElementById("idElement") ;
//pour modifier la taille de la police
monElement.style.fontSize = "12px";
//pour modifier la police
monElement.style.fontFamily = "Arial";
//pour modifier le contenu du paragraphe (balises div, span, p et body uniquement).
monElement.innerHTML = "Salut tout le monde !!";

Dès qu'un serveur Web envoie une ressource au client, il envoie également la date de dernière
modification du document. La propriété lastModified récupère cette date.

Programmation Web 2
Chapitre 5 : Les objets JavaScript

Date de dernière modification

document.write(document.lastModified);

1.5.L’objet history

C’est l'historique, c'est-à-dire la liste de liens qui ont été visités précédemment.

Les propriétés et les méthodes de l'objet history sont peu nombreuses, elles peuvent
néanmoins être très utiles pour aider à la navigation.

 La propriété length permet de connaître le nombre d'objets dans l'historique.

 La méthode back permet d'aller à l'URL précédent dans l'historique.
 La méthode forward permet d'aller à l'URL suivant dans l'historique.
 La méthode go(variable) permet d'aller à un des URL de l'historique. Le paramètre
variable est un nombre entier (positif ou négatif) qui détermine le nombre de pages
relatif auquel se trouve l'URL désiré. Il est possible d'entrer une chaîne de caractères
en paramètre, auquel cas le navigateur cherchera la page de l'historique la plus proche
contenant cette chaîne.

Navigation dans l'historique d'un navigateur

// Exemple 1
window.history.back(); // history.back();
// Exemple 2
window.history.forward(); // history.forward();

2- Les objets du noyau JavaScript

JavaScript fournit en standard un certain nombre d'objets proposant des propriétés et des
méthodes permettant d'effectuer simplement un grand nombre de manipulations. Ces objets
sont appelés objets du noyau JavaScript, car ils ont été standardisés par l'ECMA (European
Computer Manufacturer Association) et constituent la base du langage JavaScript.

Les objets du noyau sont indépendants du navigateur du client, contrairement aux

objets du navigateur.

Programmation Web 2
Chapitre 5 : Les objets JavaScript

Présentation des objets du noyau JavaScript

Nom de l’objet Description
permet de créer des tableaux. Il possède de nombreuses méthodes permettant d'ajouter, de
Array
supprimer ou d'extraire des éléments d'un tableau ainsi que de les trier.
permet de créer des valeurs booléennes, c'est-à-dire des éléments possédant deux états
Boolean
(vrai et faux).
Date permet de créer des dates et des durées. Il propose des méthodes permettant de les manipuler.
Function permet de définir des fonctions personnalisées.
permet de manipuler des fonctions mathématiques, comme par exemple les fonctions
Math
trigonométriques.
Number permet de faire des opérations de base sur les nombres.
permet de créer des expressions régulières, c'est-à-dire des éléments permettant de faire des
RegExp
opérations avancées sur les chaînes de caractères.
String propose une grande variété de méthodes permettant de manipuler des chaînes de caractères.

Programmation Web 2