JavaScript : les objets natifs ou objets globaux standards

JavaScript est un langage orienté objet.

Un objet est une entité qui possède des propriétés et peut être manipulée avec des méthodes ;
Rappel : une méthode est une fonction spécifique à un type d'objet.
JavaScript propose nativement de nombreux modèles d'objets.

Ainsi le travail du développeur est simplifié. Pour prendre un seul exemple : une seule instruction suffit pour créer une date (un objet de type Date, on dit aussi créer des instances de Date). Le développeur web peut ensuite manipuler cette date avec toutes les méthodes existantes pour ce type d'objet.

Les objets de type array, map & set ont déjà été évoqués dans un chapitre précédent. Donc je n'y reviendrai pas dans ce chapitre.
les collections de données en JS : array, map & set

Les dates

la création littérale d'un objet Date n'est pas possible ; il faut impérativement recourir au constructeur Date().

Création d'un objet de type date

Le code d'un document HTML - extrait

...
<h3>Créer des instances de Date</h3>
<h4>
<script>
var cejour = new Date(); 
var jour1 = new Date(2025,11,25,0,0,0); 
var jour2 = new Date(1000000000); 
var jour3 = new Date(2024,1,30); 

document.write(cejour + "<br>"); 
document.write(jour1 + "<br>"); 
document.write(jour2 + "<br>"); 
document.write(jour3 + "<br>"); 
</script>
</h4>
...

J'utilise le "constructeur" Date() avec le mot réservé new pour créer de nouvelles "instances de Date.
N'oubliez pas le "D" majuscule à "Date" pour bien préciser qu'il s'agit d'un constructeur.
Le constructeur Date() sans argument retourne l'instant présent (date et heure actuelle). Sinon il faut argumenter dans l'ordre : année, rangMois, rangJour, [heure, minute seconde]).
Dans la syntaxe ci-dessus les crochets encadrent les arguments facultatifs.

Attention le rang du mois doit être un entier compris entre 0 et 11. Donc pour "janvier" il faut saisir 0 et 1 pour février, 11 pour décembre !
L'argument de Date() peut être aussi un TimeStamp c'est à dire le nombre de millisecondes depuis le 1er janvier 1970 à 0 heure.

Le rendu

Pour la dernière date, il n'y a pas affichage du "30 février 2024" (date qui n'exite pas) mais du 'Fri Mar 01 2024' (1er mars 2024)
Oui, le format d'affichage n'est pas très lisible pour un francophone, mais un peu de patience ...

Quelques méthodes applicables à un objet date

De nombreuses méthodes peuvent s'appliquer à un objet de type date.
Console utilisée le samedi 4 juin 2022. :

> cejour = new Date()
Sat Jun 04 2022 13:21:28 GMT+0200 (heure d’été d’Europe centrale)
> cejour.getFullYear()
2022
> cejour.getDay()
6
> cejour.getMonth()
5
> cejour.getDate()
4
> cejour.getTime()
1654341688159
> cejour.getYear()
22
> cejour.getHours()
13
> cejour.getMinutes()
21
> cejour.getSeconds()
28

Ici on n'a pas passé d'argument au "constructeur" Date() donc l'objet cejour contient l'instant présent.

getFullYear() : retourne le millésime sur 4 chiffres
getYear() : retourne le millésime sur 2 chiffres
getMonth() : retourne le rang du mois sous forme d'un entier compris entre 0 et 11
getDate() : retourne le rang du jour dans le mois sous forme d'un entier compris entre 1 et 31
getDay() : retourne le jour de la semaine sous forme d'un indice allant de 0 à 6 (0 pour dimanche et 6 pour samedi)
getHours() : retourne les heures
getMinutes() : retourne les minutes
getSeconds() : retourne les secondes
getTime() : retourne le timestamp c'est à dire le nombre de secondes depuis le 1er janvier 1970 et l'instant présent

Nous avons donc utilisé des méthodes dites "getter" c'est à dire des méthodes pour récupérer des infos sur un objet date.
Il existe aussi les méthodes dites "setter" ; vous avez entre autres : setFullYear(), setMonth(), setDate(), setHours(), etc.
À chaque méthode "getter" correspond une méthode "setter".

D'autres méthodes de l'objet date

Console du navigateur utilisée le dimanche 16 avril 2023 vers 22 heures :

>cejour = new Date()
Sun Apr 16 2023 22:09:28 GMT+0200 (heure d’été d’Europe centrale)
>cejour.toLocaleDateString()
'16/04/2023'
>cejour.toDateString()
'Sun Apr 16 2023'
>cejour.toLocaleTimeString()
'22:09:28'

Les méthodes toLocaleDateString() & toLocaleTimeString() sont intéressantes pour afficher une date ou une heure dans un format compréhensibles même pour un francophone.

Formater une date - solution moderne

La solution traditionnelle pour afficher les dates dans un format lisible pour un francophone consistait à utiliser des 'arrays' (un tableau indicé avec la liste des mois, un autre avec la liste des jours en français).
Et bien cette solution est obsolète.

EMACScript16 propose en effet le constructeur Intl (comme International) pour créer rapidement des formats de dates OU de nombres.
Pour créer un format de date il faut appliquer plus précisément la méthode DateTimeFormat() à ce constructeur.

Routine obsolète

Essayez quand même ce script, pour vous familiariser avec les méthodes applicables à une date.

var mois = new Array("janvier", "février", "mars", "avril","mai", 
	"juin", "juillet", "aout","septembre", "octobre", "novembre", "décembre"); 
var jours = new Array("dimanche","lundi", "mardi", "mercredi", "jeudi", 
	"vendredi", "samedi"); 
var aujourdhui = new Date(); 
var annee = aujourdhui.getFullYear(); 
var rang_mois =aujourdhui.getMonth();  
var nom_mois = mois[rang_mois]; // recherche dans le tableau "mois"
var jour = aujourdhui.getDate(); 
var type_jour =aujourdhui.getDay();
var nom_jour = jours[type_jour]; // recherche dans le tableau "jours"
document.write('Nous sommes le : ' + nom_jour + " " + jour + " " + nom_mois + " " + annee);

Mais revenons à la solution moderne

Le script sera alors : ... <h4> <script> var aujourdhui = new Date(); var formatDate = new Intl.DateTimeFormat("fr-FR", {hour12 : false, weekday : "long", year : "numeric" , month : "long", day : "numeric", hour : "2-digit", minute : "2-digit", second : "2-digit"}); document.write('<br>' + formatDate.format(aujourdhui)); </script> </h4> ...

Analyse

Intl.DateTimeFormat()

local : chaine décrivant le format de langue et de pays
JSON option : objet au format JSON précisant le format avec différentes propriétés

hour12 vaut false / true pour afficher l'heure sur 24 heures (ou 12 heures).
les propriétés weekday, year, month, day, hour, minute, second peuvent avoir comme valeur : "numeric", "long", "short" ou "2-digit"

... formatDate.format(aujourdhui) ... : appliquer le format "formatDate" à une date avec la méthode format()

Le rendu dans un iframe

Constatez que l'instant présent apparait sous un format très clair pour un francophone.
Le mois et le type de jour apparaissent sous forme textuelle car j'ai utilisé la valeur "long" pour les propriétés month & weekday

Les chaines de caractères ("strings")

Il y a beaucoup à dire sur les objets String.

Création de chaines

Pour créer un objet de type string (ou chaine) vous pouvez utiliser le constructeur String mais en général on préfère utiliser la solution littérale : let/const nomVariable ="suite de caractères alphanumériques".

Attention, si la chaine contient une apostrophe il faut délimiter la chaine par des guillemets doubles à moins d'échapper l'apostrophe.

Exemples de chaines correctes :
let voyelles ='aeiouy'
let consonnes = "bcdfghjklmnpqrstvwxz"
let surnom = "l'emmerdeur"
let pseudo = 'l\'emmerdeur'
var message = new String("bonjour");

Toutes les chaines ci-dessus ont été créées de façon littérale sauf la dernière (créée avec le constructeur String().

Nouveauté depuis ECMAScript 6

Il est possible d'écrire une chaine sur plusieurs lignes à condition qu'elle soit délimitée par des accents graves ("backquotes" en anglais).
Pour produire un "backquote" composez au clavier : altgr + 7
Si la chaine multilignes contient en son sein des accents graves, il faudra échapper ceux-ci (faire précéder l'accent grave de \.

Exemple

...
<button onclick ="script()">Lancez le script</button>
<script>
function script()
{
	var machaine = `Début de la chaine multiligne. 
	Suite de la chaine. 
	La chaine peut comprendre alors en son sein des guillemets simples ou doubles
	et même des accents graves à condition qu'ils soient échappés. 
	Exemples : "bonjour" 'bonsoir' \` salut \`
	Fin de la chaine.` ;
	document.write("<pre>ma chaine : " + machaine + "</pre>"); 
}
...

Observez bien les accents graves utilisés (peu visibles) pour délimiter la chaine.
Notez que le terme `salut` est encadré par des accents graves échappés.

Le rendu

L'affichage tient compte de sauts de ligne grâce au balisage avec la balise PRE.

Méthodes et propriétés applicables à une chaine

Testez dans la console :

> chaine ="  **aBcDeFgH**   "
 '  **aBcDeFgH**   '
> chaine.toLowerCase()
 '  **abcdefgh**   '
> chaine.toUpperCase()
 '  **ABCDEFGH**   '
> chaine.length
< 17
> chaine.trim()
 '**aBcDeFgH**'
> chaine.indexOf('*')
 2
> chaine.lastIndexOf('*')
 13
> chaine_propre = chaine.toLowerCase().trim()
 '**abcdefgh**'
> chaine
'  **aBcDeFgH**   '
> chaine_propre.charAt(0)
 '*'
> chaine_propre.length
 12
> chaine_propre.charAt(10)
 '*'
>chaine_propre.charCodeAt(2)
 97
> chaine_propre.charCodeAt(10)
 42
>chaine.includes('P')
false
>chaine.includes('B')
true
> chaine1 = chaine.toUpperCase().trim()
'**ABCDEFGH**'
>chaine
 '  **aBcDeFgH**   '

toUpperCase() : convertir en majuscules
toLowerCase() : convertir en minuscules
trim() : supprime les espaces en début et fin de chaine, nettoyage de la chaine
charAt(indice) : récupère le caractère du rang indiqué
indexOf(souschaine) : retourne l'indice de la première sous-chaîne ou -1 si la sous chaîne n'est pas trouvée
includes(souschaine) : retourne true OU false
lastIndexOf(souschaine) : retourne le rang de la dernière sous-chaîne ou -1 si la sous chaîne n'est pas trouvée
charCodeAt(indice) : retourne le code ASCII du caractère pour le rang indiqué

Notez que l'on peut chainer les méthodes, par exemple : chaine.toUpperCase().trim()
Attention,length n'est pas une méthode mais une propriété ; donc pas de parenthèses !

Remarque importante

Attention toutes ces méthodes ne modifient pas la chaine d'origine sauf remplacement.
Testez ceci :

>chaine ="  **aBcDeFgH**   "
>chaine.trim()
'**aBcDeFgH**'
>chaine
'  **aBcDeFgH**   '
chaine = chaine.trim().replaceAll('*','')
'aBcDeFgH'

chaine = chaine.trim().replaceAll('*','') : j'effectue un remplacement : le contenu de la variable "chaine" est remplacée par une nouvelle chaine.
J'ai utilisé une méthode très récente : replaceAll() qui est expliquée dans le paragraphe qui suit.

Des méthodes moins connues

startsWidth() : commence par ?
endsWidth() : se termine par ?
replace() : remplacer première occurence
replaceAll() : remplacer toutes les occurences

À saisir dans la console

>chaine ="bonjour mes amis"
'bonjour mes amis'
>chaine.startsWith("bonjour")
true
>chaine.endsWith("amis")
true
>chaine.replace('b','B')
'Bonjour mes amis'

Les deux premières méthodes retournent un booléen.

La méthode replace() recherche une expression dans une chaine et la remplace par une autre.
Attention, seule la première occurence est remplacée !.

Comment remplacer toutes les occurences dans une chaine

Solution ancienne : utiliser une expression régulière avec le drapeau 'g' (comme global) pour indiquer que toutes les occurrences doivent être remplacées.
Chapitre portant sur les expressions régulières

Solution moderne : faire appel à une méthode récente replaceAll().

Exemple - le code

...
<h4>Comment remplacer toutes les occurences d'une sous-chaine ? </h4>
<script>
let exp1 = new RegExp('[\*]','g'); 
let exp2 = new RegExp('[\-]','g'); 

let chaine1 = "****toto****"; 
let chaine2 = "-----titi-----"; 

let chaine11 = chaine1.replace(exp1,''); 
let chaine22 = chaine2.replace(exp2,''); 

document.write("<p>" + chaine1 + " est devenue :" + chaine11 ); 
document.write("<p>" + chaine2 + " est devenue :" + chaine22 );

let chaine3 = "-----coucou*****"; 
let chaine33 = chaine3.replaceAll('-','').replaceAll('*',''); 
document.write("<p>" + chaine3 + " est devenue :" + chaine33 );

J'utilise d'abord des "regExp" (expressions régulières) pour supprimer les * et - dans des chaines.
Comme je veux remplacer toutes les occurences, la regExp doit contenir l'option 'g'.
Les - et les * sont des métacaractères, ils doivent être échappés dans la classe des caractères concernés.

Dans un deuxième temps j'utilise la nouvelle méthode replaceAll(). Le premier paramètre n'étant pas une regExp (mais une simple chaine), il est inutile d'échapper les symboles - et *.

Le rendu

Exercice : vérifier une adresse mail

Une adresse mail valide comporte obligatoirement le caractère @ suivi d'un point.

On peut imaginer trois solutions pour vérifier une adresse mail.

Première solution

Emploi de la méthode indexOf(). ... <form> <label>votre adresse mail : </label> <input type = 'text'> <br><label>votre nom et prénom : </label> <input type = 'text'> </form> <p id ='message' style ='color : red'> <script> var mail = document.querySelector('input'); var message =""; mail.onblur = function() { var contenu = mail.value ; var rang_arobase = contenu.indexOf('@') ; var rang_point = contenu.indexOf('.',rang_arobase); if (rang_arobase >=0 && rang_point >=0) message = 'adresse mail correcte' ; else message = 'adresse mail incorrecte' ; document.getElementById('message').innerHTML = message ; } </script> ...

La méthode indexOf() possède un deuxième argument (facultatif) qui précise à partir de quelle position doit commencer la recherche de la sous chaîne passée en premier argument.
Je vous rappelle que la méthode indexOf() retourne -1 si elle n'a pas trouvé la sous chaîne dans la chaîne.
Donc si la chaîne saisie comprend un arobase et un point après l'arobase alors les variables rang_arobase et rang_point contiennent un entier supérieur à zéro.

Le rendu :

Deuxième solution

Emploi des méthodes indexOf() & include().
Le script devient alors :

...
mail.onblur = function()
{
	var contenu = mail.value; 
	var rang = contenu.indexOf('@') ; // position de @
	if (rang >=0 && contenu.includes('.' ,rang))  message = 'adresse mail correcte' ;
		else message = 'adresse mail incorrecte'; 
	document.getElementById('message').innerHTML = message ; 
}
...

La méthode includes() retourne un booléen et admet en deuxième argument le rang de départ de la recherche.

Le rendu :

Troisième solution

Vous pouvez aussi utiliser "l'artillerie lourde" : comparer la saisie à un objet de type RegExp.

Un peu de tout

la notation "template strings" qui évite la concaténation fastidieuse
le slicing (tranchage d'une chaine)
conversion d'un 'array' en chaine

Le code

...
<button onclick ="script()">Lancez le script</button>
<script>
function script()
{
let nom ="Macron";
let prenom ="Emmanuel"; 
let fonction ="Président de la République"; 

// combinier chaines et variable par concaténation : 
let concat1 = "Nom : " + nom + " prénom : " + prenom + "fonction : " + fonction  ; 
alert(concat1);

// combiner chaines et variables par  'template strings' : 
let concat2 =`Nom : ${nom} prénom : ${prenom} fonction : ${fonction} `; 
alert(concat2); 

//slicing d'une chaine
let chaine = new String("Bonjour mon cher ami") ; 
document.write(`${chaine}  <br> `); 
let longueur = chaine.length ; 
document.write(`${longueur}  est la longueur de cette chaine <br> `); 
let debut_chaine = chaine.slice(0,7); 
let milieu_chaine = chaine.slice(8,11); 
let fin_chaine = chaine.slice(11, longueur); 

document.write( ` '${debut_chaine}' est le début de la chaine<br> `);
document.write( ` '${milieu_chaine}' est le milieu de la chaine<br>`);
document.write(` '${fin_chaine}'  est la fin de la chaine<br>`);

//Convertir un tableau en chaine
var mois = new Array("janvier", "février", "mars", "avril","mai", "juin",
	"juillet", "aout","septembre", "octobre", "novembre", "décembre"); 
var chaine_mois = mois.toString(); 
document.write(`tableau converti en chaine : ${chaine_mois} `); 
}
...

Je vous montre que dans une chaine délimitée par des accents graves il est possible d'intégrer des variables avec la syntaxe ${variable}.
Cette technique est intitulée "template strings" OU "template literals" qu'on peut traduire par "modèle de chaine".
Ce nouvel outil est très utile car il évite de recourir à des concaténations parfois fastidieuses ...
Pour en savoir plus sur les templates strings

Je montre aussi comment extraire une sous-chaine d'une chaine ; il faut utiliser la méthode slice(indice début, indice fin). Cette méthode retourne les caractères compris entre indice début inclus et indice fin exclu.

Enfin j'explique comment convertir un tableau indicé en chaine avec la méthode toString().
Il est en effet plus facile d'afficher une chaine qu'un tableau indicé ...

Le rendu

À propos de la méthode toString()

Cette méthode a de multiples usages.
Nous venons de voir qu'elle peut convertir un array en chaine mais elle peut aussi convertir un nombre décimal en son équivalent en base 16 ou 8 ou 2.
Testez dans la console du navigateur :

>let nombre =256
>console.log(nombre.toString(16))
100
>console.log(nombre.toString(8))
400
>console.log(nombre.toString(2))
100000000

Générer la table des codes ASCII

Je vous rappelle que si vous voulez saisir @ au clavier il suffit de composer 64 via le clavier numérique tout en appuyant sur la touche alt ; en effet 64 est le code ASCII de @.

La méthode fromCharCode() appliquée directement au constructeur String et argumentée avec un entier (compris entre 0 et 255) retourne le caractère correspondant au code ASCII.

Le code du document

...
<button onclick ="fgenerer()" >Générer la table ASCII</button>
<table style ="width : 50% ; margin : 10px auto;">
	<tr><td>code ASCII</td><td>Symbole correspondant</td></tr>
<script>
function ftableau() 
{
    for (num = 1; num < 256; num++) 
	{
       document.write("<tr><td>" + num + "</td><td>" + String.fromCharCode(num) + "</td></Tt>");
    }
}
ftableau()
...

Le script génère le code HTML d'un tableau de 256 lignes ...

Le rendu

Ainsi si vous voulez afficher la lettre A majuscule et accentuées avec un accent grave, vous saurez qu'il faut composer ALT + 192.

L'objet Math

Les méthodes de l'objet Math (avec un M majuscule car c'est un constructeur) permettent d'effectuer des calculs.
Vous pouvez utiliser ses propriétés et méthodes sans avoir à créer d'instance de l'objet.

Méthodes de l'objet Math

Commandes à saisir dans la console :

> Math.abs(-20)
20
> Math.floor(4.5)
4
> Math.ceil(4.5)
5
> Math.round(4.55)
5
> Math.sqrt(9)
3
> Math.pow(10,5)
100000
>Math.max(10,11,12,9)
12
>Math.min(10,11,12,9)
9
> Math.sign(-10)
-1
> Math.sign(10)
1
> Math.random()
0.9048546055566105
> Math.random()
0.7660744744941468

Math.abs(n) : retourne la valeur absolue de n
Math.ceil(n) : retourne l'entier supérieur de n
Math.floor(n) : retourne l'entier supérieur de n
Math.round(n) : arrondit à l'entier le plus proche de n
Math.sqrt(n): retourne la racine carrée de n
Math.pow(n,p) : retourne le nombre n à la puissance p
Math.max(liste) : retourne le plus petit de la liste
Math.min(liste) : retourne le plus grand de la liste
Math.sign(n) : retourne le signe de n
Math.random() : génère un réel compris entre 0 et 1 exclu

Les constantes de Math

Testez dans la console :

> Math.PI
3.141592653589793
> Math.E
2.718281828459045
> angle_degres = 180
180
> angle_gradiants = angle_degres * Math.PI / 180
3.141592653589793

Surtout respectez la casse : PI en majuscule, E en majuscule !
180° vaut Π radians.

Un programme qui simule le lancer d'un dé

Le script

var compteur = 0 ; 
while (compteur < 6)
{
	var lancer = Math.random() // génère un réel entre 0 et 1 exclu 
	var lancer = Math.ceil(lancer * 6) ; // génération d'un entier compris entre 1 et 6
	document.write('résultat du lancer de dé : ' + lancer); 
	compteur = compteur + 1 ; 
}

Nous avons une boucle qui est exécutée 6 fois et génère 6 entiers compris entre 1 et 6
La méthode random() génère de façon aléatoire un réel compris entre 0 et 1 exclu (maximum : 0.9999....)
En multipliant par 6 ce réel on obtient donc un autre réel compris entre 0 et 6 exclu
En appliquant la méthode ceil() à ce réel on obtient un entier compris entre 1 et 6 et c'est bien ce que nous voulons.

Attention si on avait appliqué la méthode floor() on aurait obtenu un entier compris entre 0 et 5 ...

Le rendu du script

Actualisez la page pour effectuer un nouveau lancer de dé !

Formater les nombres - solution nouvelle

EMACScript16 propose désormais le constructeur Intl (comme International) pour créer rapidement des formats de dates et nombres.
Pour créer un format de nombre il faut utiliser plus précisément la méthode NumberFormat() de l'objet Intl.
Pour formater ensuite le nombre il suffit d'utiliser la syntaxe : nomFormat.format(nombreNonFormaté)
Ce nouvel outil remplace d'anciennes méthodes rappelées dans le script ci-dessous.

Exemple : le code

...
<h3>Formater les nombres</h3>
<script>
var nombre = 1000000.524 ;
document.write("<p>Formater nombre avec méthode toFixed : " + nombre.toFixed(2));  
document.write("<p>Formater nombre avec méthode toLocaleString : " + nombre.toLocaleString()); 

document.write("<h4> Formater nombre  avec un objet Intl.NumberFormat</h4> "); 
var feuro = new Intl.NumberFormat("fr-FR",{style:'currency', currency : 'EUR'});
var fdollar = new Intl.NumberFormat("en-US",{style:'currency', currency : 'USD'});
document.write("<p>" + feuro.format(nombre));
document.write("<p>" + fdollar.format(nombre));
...

méthode toFixed(n)
méthode toLocaleString()

La première méthode arrondit à l'affichage en fonction de n (nombre de décimales).
La deuxième méthode utilise la virgule en guise de séparateur décimal (et non pas le point) et l'espace en guise de séparateur de milliers.
Ces deux méthodes ne sont guère satisfaisantes leur rendu est partiel.

Intl.NumberFormat()

dans la variable "feuro" : format Euro
dans la variable "fdollar" : format US (dollar)

Intl.NumberFormat()

local : chaine décrivant le format de langue et de pays
JSON option : objet au format JSON précisant le format avec deux propriétés précisées au minimum : style & currency.

S'il s'agit d'un montant monétaire la propriété "style" doit avoir pour valeur "currency".
La propriété "currency" précise l'unité monétaire : 'EUR', 'USD', ...

Exemple : le rendu

Observez bien les deux formats monétaires, notez les différences : séparateur de milliers, séparateur décimal.

JavaScript et la notation scientifique

JS interprète correctement des nombres exprimés en notation scientique.
Pour exprimer 1 000 000 en notation scientifique il faut écrire 10e6.

Le script

var ff = new Intl.NumberFormat("fr-FR"); 
var nombre = 10e10; 
document.write (ff.format(nombre));
nombre =5.511111111111e8; 
document.write("<br>" + typeof nombre + " " + ff.format(nombre)); 
var resultat = 5e6 + 4e5 + 3e4 + 2e3; 
document.write("<br>" + ff.format(resultat));

Je crée un format francophone pour afficher les sommes importantes avec le constructeur Intl.NumberFormat(). Il suffit de préciser en argument du constructeur "fr-FR" pour que le séparateur de milliers soit l'espace et le séparateur décimal soit la virgule. En effet le deuxième argument de cette fonction est facultatif.

Le rendu dans un Iframe

Objet window

Window est l'objet JavaScript de plus haut niveau dans la hiérarchie des objets.
En fait alert(), prompt(), confirm(), setInterval(), setTimeout() sont des méthodes de l'objet window.

Mais window étant l'objet le plus haut dans la hiérarchie il peut être sous entendu.
On peut donc écrire tout simplement alert() (à la place de window.alert()). La syntaxe de ces méthodes de l'objet window équivaut alors à celle d'une fonction.

méthode open() pour ouvrir un nouvel onglet
méthode close() pour fermer un onglet

Le principal sous-objet de l'objet window est l'objet document.

Objet Document

L'objet document est à la base de l'interface DOM.
Le terme "document" désigne la page web courante (document HTML ou PHP).
L'objet document a des propriétés, des sous-objets et des méthodes.

Quelques propriétés de l'objet document

Elles sont mal connues et peu utilisées.

alinkColor : couleur des liens
bgColor : couleur de fond
fgColor : couleur du texte
etc.

Sous-objets de Document

images: retourne un tableau qui référence tous les éléments IMG
forms: retourne un tableau qui référence tous les éléments FORM
body: fait référence à la partie BODY du document HTML

Exemple 1 : emploi de document.forms

Emploi de document.forms :

	document.forms[0].login.value="identifiant ? " ;

Le champ nommée "login" du premier formulaire prend pour valeur "identifiant ?" .

Exemple 2 : emploi de document.images

Le code du document HTML : ... <style> img {display : inline-block ; width : 10%; vertical-align : top ; margin :1%; } ... <img src ="../images/bikini.jpg" alt ="bikini"> <img src ="../images/trikini.jpg" alt ="trikini"> ... <button onclick ="agrandir()">Agrandir images !</button> ... <script> function agrandir() { for (var i in document.images) { document.images[i].style.width ="30%" ; } } // fin fonction ...

Vous manipulez la collection d'images tel un tableau avec la structure for ... in document.images !

Le rendu :

Exemple 3 : emploi de document.body

Le code du document HTML

...
<body>
<button onclick ="fgenerer()">Générer une table de multiplication</button>
<script>
function fgenerer()
{
	var entier = prompt("tapez un entier compris entre 1 et 9") ;
	if (entier > 9 ) {entier =9 ; alert("saisie plafonnée à 9"); }
	var tableau = "<h3>La table de multiplication par" +  entier + "</h3>" ; 
	tableau+= "<table>"; 
	for (i=1; i<=10; i++)
	{
		produit = entier * i ; 
		tableau += "<tr><td>" + entier + "</td><td>fois "  + i + "</td><td>donne " + produit + "</td></tr>" ; 
	}
	tableau+= "</table>"; 
	document.body.innerHTML = tableau ; 
}
...

Au départ le seul élément dans BODY est la balise BUTTON.
Le nouveau contenu de BODY est construit dans la variable "tableau". À chaque passage dans la boucle une ligne de contenu est rajouté dans la cette variable : tableau += "nouvelle ligne"
Notez bien la dernière instruction du script : document.body.innerHTML = tableau Donc on recrée la partie BODY du document HTML ; c'est pour cette raison que l'élément BUTTON disparait.

Le rendu

On recrée la partie BODY du document HTML ; c'est pour cette raison que l'élément BUTTON disparait.

Comment éviter la disparition du bouton de commande ?

...
<button>Table par N !</button>
<div id ='affichage'></div>
<script>
...
document.querySelector('div').innerHTML = tableau ; 
...

Il ne faut plus recréer la partie BODY de la page mais un DIV de cette page.
Notez l'emploi d'une méthode de l'objet document : querySelector().

Les méthodes de l'objet document

C'est grâce à certaines méthodes de l'objet document que l'on peut cibler des éléments de la page.

Les anciennes méthodes de ciblage

document.getElementById(identifiant)
document.getElementsByTagName(balise)
document.getElementsByName(nom)

Les deux dernières méthodes sont obsolètes.

Les nouvelles méthodes de ciblage

Elles sont argumentées avec un sélecteur CSS.

document.querySelector('sélecteur CSS') : cible le premier élément correspondant au sélecteur CSS
document.querySelectorAll('sélecteur CSS') : cible tous les éléments HTML correspondant à ce sélecteur sous forme d'un "Array".

Exemples de syntaxe avec les nouveaux sélecteurs

document.querySelector('#debut') : cible l'élément dont l'attribut id a la valeur debut
document.querySelector('.important') : cible le premier élément donc l'attribut class à la valeur important
document.querySelector('p') : cible la première balise P
document.querySelector('h2') : cible la première balise H2
document.querySelectorAll('h3') : cible toutes les balises H3 ; crée un tableau indicé
document.querySelectorAll('p')[1] : cible la deuxième balise P (la première a l'indice zéro dans la liste)

Exemple

Pour affecter la couleur de fond vert clair à chaque balise H3 il suffira d'écrire la routine suivante :

	var titres = document.querySelectorAll('h3')
	for (var i in titres) 
		{ titres[i].style.backgroundColor = 'lime'; }

Il faut une boucle pour parcourir tous les éléments de l'array construit par la méthode querySelectorAll().

Traduction

Tutoriel sur Javascript

JavaScript : les bases

Framework historique : jQuery

Framework de nouvelle génération : Vue.js

Node.js : JavaScript 'côté serveur'

Recherche dans ce tuto

L'auteur : Patrick Darcheville

JavaScript : les objets natifs ou objets globaux standards

Les dates

Création d'un objet de type date

Le code d'un document HTML - extrait

Le rendu

Quelques méthodes applicables à un objet date

D'autres méthodes de l'objet date

Formater une date - solution moderne

Routine obsolète

Mais revenons à la solution moderne

Analyse

Le rendu dans un iframe

Les chaines de caractères ("strings")

Création de chaines

Nouveauté depuis ECMAScript 6

Exemple

Le rendu

Méthodes et propriétés applicables à une chaine

Remarque importante

Des méthodes moins connues

À saisir dans la console

Comment remplacer toutes les occurences dans une chaine

Exemple - le code

Le rendu

Exercice : vérifier une adresse mail

Première solution

Deuxième solution

Troisième solution

Un peu de tout

Le code

Le rendu

Générer la table des codes ASCII

Le code du document

Le rendu

L'objet Math

Méthodes de l'objet Math

Les constantes de Math

Un programme qui simule le lancer d'un dé

Le script

Le rendu du script

Formater les nombres - solution nouvelle

Exemple : le code

Exemple : le rendu

JavaScript et la notation scientifique

Le script

Le rendu dans un Iframe

Objet window

Objet Document

Quelques propriétés de l'objet document

Sous-objets de Document

Exemple 1 : emploi de document.forms

Exemple 2 : emploi de document.images

Exemple 3 : emploi de document.body

Le code du document HTML

Le rendu

Comment éviter la disparition du bouton de commande ?

Les méthodes de l'objet document

Les anciennes méthodes de ciblage

Les nouvelles méthodes de ciblage

Exemples de syntaxe avec les nouveaux sélecteurs

Exemple