0% ont trouvé ce document utile (0 vote)

63 vues173 pages

JavaScript Janvier 2022

Transféré par

Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.

Formats disponibles

Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

0% ont trouvé ce document utile (0 vote)

63 vues173 pages

JavaScript Janvier 2022

Transféré par

Bouhejba Ali

Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.

Formats disponibles

Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Vous êtes sur la page 1/ 173

JavaScript

Institut supérieur de gestion 2021-2022

1
Plan
 Introduction
 Comment intégrer du code JavaScript dans une page ?
 Les variables, déclaration, types
 Les opérateurs
 Les entrées/sorties de données
 Les instructions conditionnelles
 Les instructions itératives
 Les Fonctions
 Les chaines de caractères
 Portée des variables
 Fonctions prédéfinies
 La gestion des évènements

2
Plan
 l’orienté objet en JavaScript
 Valeurs primitives
 objets prédéfinis
◦ L’objet global JavaScript String
◦ L’objet global JavaScript Number
◦ L’objet global JavaScript Number
◦ L’objet global JavaScript Math
◦ Les tableaux en JavaScript et l’objet global Array
◦ Les dates en JavaScript et l’objet global Date
 Document Object Model (DOM)
◦ Qu’est-ce que le DOM ?
◦ L'interface de programmation DOM
◦ Accès aux données d’un Formulaire
◦ Notions avancées du DOM

3
Introduction
 Javascript a été initialement développé par Netscape et s'appelait alors
LiveScript. Adopté à la fin de l'année 1995, par la firme Sun (qui a aussi
développé Java), il prit alors son nom de Javascript malgré qu’il est tout à
fait différent de Java.
 Javascript est un langage de scripts qui incorporé aux balises Html, permet
d’ajouter de l'interactivité aux pages Web
◦ Contrôle des valeurs saisies dans un formulaire,
◦ Exécution d’un programme lors de la survenue d’événement
 Ces scripts vont être gérés et exécutés par le browser lui-même sans
devoir faire appel aux ressources du serveur
 Il présente cependant un inconvénient d’avoir un code source visible par
l’utilisateur ce qui induit une confidentialité nulle.

4
Comment intégrer du code JavaScript
dans une page ?
 Il y a deux manières d'ajouter du code JavaScript dans une page :
1. En liant depuis la page HTML un fichier externe, dans lequel sont placées
les instructions JavaScript dans la balise <head>. Cependant il est
actuellement recommandé de la placer en fin de document juste
avant </body> pour ne pas bloquer le chargement de la page.

2. En ajoutant le code JavaScript à l'intérieur de l'élément script dans la

partie <head> de la page HTML ou bien juste avant </body> en fin du
fichier Html

5
Comment intégrer du code JavaScript
dans une page ?
<script src="monscript.js" async ></script>

 L'attribut async est un attribut booléen Lorsqu'il est présent, il spécifie

que le script sera exécuté de manière asynchrone dès qu'il sera disponible.
 Remarque: l' attribut async est uniquement destiné aux scripts externes
(et ne doit être utilisé que si l' attribut src est présent).
 Remarque: Il existe plusieurs façons d'exécuter un script externe:
 Si async est présent: le script est exécuté de manière asynchrone avec le
reste de la page (le script sera exécuté pendant que la page continue
l'analyse)
 Si async n'est pas présent et defer est présent: Le script est exécuté
lorsque la page a terminé l'analyse
 Si aucun async ou defer n'est présent: le script est récupéré et exécuté
immédiatement, avant que le navigateur ne poursuive l'analyse de la page

6
Le Javascript minimum "Hello World!"
 afficher du texte directement dans le document HTML:

Contenu du fichier HTML Contenu du fichier index.js

<!DOCTYPE html>
<html> document.write("Hello World!".fontsize(18));
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />

<script src="index.js"></script>
<title>- Le Site Web</title>
</head>
<body>
</body>
</html>

Commentaires dans JavaScript:

Utiliser // pour les commentaires sur une ligne.
Utiliser au début /* et à la fin */ pour les commentaires sur plusieurs lignes.

7
Les variables
déclaration

 Dans un langage de programmation, des variables sont utilisées pour

stocker des valeurs de données.
 JavaScript utilise le mot-clé var pour déclarer des variables.
 Les noms de variables doivent débuter avec une lettre ou un tiret "_ “ et
ils sont sensibles à la casse.
 Un signe = est utilisé pour affecter des valeurs aux variables.
 On ne définit pas le type de la variable lors de sa déclaration, c’est sa
valeur qui définit son type.

Contenu du fichier index.js

var x,y,z;
x = 5;
y = 6;
z=x+y;

8
Les variables
Types de données JavaScript

 Les variables javaScript peuvent avoir de nombreux types de données et

c’est la valeur affectée à la variable qui définit son type:
◦ number : tout nombre entier ou avec virgule tel que 22 ou 3.1416.
◦ string : des chaînes de caractères : Toute suite de caractères comprise entre guillemets
telle que "suite de caractères" ou entre simples quottes ‘suite de caractères’
◦ boolean : true, false
◦ null sert à spécifier une variable sans valeur.
◦ undefined pour créer une variable sans lui donner une valeur, elle est de ce type jusqu'à
temps qu'on lui donne une valeur.
◦ object : Un type object peut définir une collection non ordonnée de paires de clé-valeur.
var x = {firstName:"Foulen", lastName:"Ben Foulen};
Remarque la valeur NaN est l’abbréviation de "Not a Number", c’est à dire "Ce n'est pas un
nombre !" C'est en fait le résultat d'une opération mathématique sans sens (la division de 0 par
0, la racine carrée d'un nombre négatif)

Exemple
var length = 16; // Number
var prenom = "Foulen"; // String
var x = {prenom:"foulen", nom:"Ben Foulen"}; // Object
9
Les variables
Types de données JavaScript
 Les variables JavaScript ont des types dynamiques . La même variable peut changer de type
aucours du programme

Exemple
var x; // ici x is undefined
x = 5; // maintenant x est de type Number
x = "Foulen"; //maintenant x is de type String
x = ‘Foulen’; //on peut aussi utiliser les simples cotes pour le type string

 JavaScript Strings : les chaînes sont écrites avec des guillemets.Vous pouvez utiliser des
guillemets simples ou doubles. On peut utiliser des guillemets à l'intérieur d'une chaîne, tant
qu'ils ne correspondent pas aux guillemets ouvrant la chaîne
var carName1 = "Peuget 508"; // double quottes
var carName2 = 'Peuget 508'; // simples quottes
var answer1 = "It's alright"; // Simple quotte à l'intérieur de double quottes
var answer2 = "son nom est 'Johnny'"; // simple quottes à l'intérieur de double quottes
var answer3 = 'son nom est "Johnny"'; // double quottes à l'intérieur de simple quottes

10
Les variables
Types de données JavaScript
 JavaScript Numbers: JavaScript n'a qu'un seul type de nombres. Les nombres peuvent être
écrits avec ou sans décimales:
var x1 = 34.00; // écrit avec decimales
var x2 = 34; // écrit sans decimales
var y = 123e5; // 12300000
var z = 123e-5; // 0.00123

 JavaScript Booleans: peuvent avoir seulement deux valeurs true, false

var x = 5;
var y = 5;
var z = 6;
(x == y) // Returns true
(x == z) // Returns false
 JavaScript Arrays: Les tableaux javaScript sont écrits entre crochets. Les éléments
du tableau sont séparés par des virgules. Les indices du tableau commencent par 0.
var cars = ["Saab", "Volvo", "BMW"];
 JavaScript Objects :Un type Object peut définir une collection non ordonnée de paires de
clé-valeur.
var personne = {Prenom:"Foulen", Nom:"Ben Foulen", age:30, CouleurYeux:"vert"};

11
Les variables
Types de données JavaScript

 L’opérateur JavaScript typeof est utilisé pour retourner le type d'une variable JavaScript.

typeof "" // Returns "string"

typeof "John" // Returns "string"
typeof "John Doe" // Returns "string"
typeof 0 // Returns "number"
typeof 314 // Returns "number"
typeof 3.14 // Returns "number"
typeof (3) // Returns "number"
typeof (3 + 4) // Returns "number"
typeof null // object
typeof "John" // Returns "string"
typeof 3.14 // Returns "number"
typeof true // Returns "boolean"
typeof false // Returns "boolean"
typeof x // Returns "undefined" (ici x n'a pas de valeur)
typeof {name:'John', age:34} // Returns "object"
typeof [1,2,3,4] // Returns "object" (pas "array")

12
Les opérateurs

Les opérateurs arithmétiques

symbole Nom Signification

+ plus addition
- moins soustraction
* multiplié par multiplication
/ divisé par division
% modulo reste de la division par

Les opérateurs relationnels

Symbole Nom
== égal
< inférieur
<= inférieur ou égal
> supérieur
>= supérieur ou égal
!= différent
Les opérateurs logiques

Symbole Nom Exemple Signification

&& et (condition1) && (condition2) condition1 et condition2
|| ou (condition1) || (condition2) condition1 ou condition2

13
Les opérateurs

Les opérateurs associatifs

Symbole Description Exemple Signification

+= plus égal x += y x=x+y
-= moins égal x -= y x=x-y
*= multiplié égal x *= y x=x*y
/= divisé égal x /= y x=x/y

Les opérateurs d’incrémentation

symbole Description
x++ incrémentation
(x++ est le même que x=x+1)
x-- décrémentation
(x-- est le même que x=x-1)

14
Les opérateurs de comparaison

 L'égalité stricte avec === L'égalité stricte compare deux valeurs et teste leur
égalité.
 Aucune des valeurs n'est convertie implicitement en une autre valeur avant que la
comparaison soit effectuée.
 Si les valeurs sont typées différemment, elles sont considérées comme différentes.
 Si les valeurs sont de même type et ne sont pas des nombres, elles sont considérées
égales si elles ont la même valeur.
 Si les deux valeurs sont des nombres, elles sont égales si elles ont la même valeur et
que cette valeur n'est pas NaN

 L'égalité faible avec == Le test d'égalité faible compare deux valeurs après les
avoir converties en valeurs d'un même type. Une fois converties (la conversion peut
s'effectuer pour l'une ou les deux valeurs), la comparaison finale est la même que
celle effectuée par ===
Pour plus de détails :
https://developer.mozilla.org/fr/docs/Web/JavaScript/Les_diff%C3%A9rents_tests_d_%C
3%A9galit%C3%A9#stricte

15
Les opérateurs
Priorité des opérateurs Les opérateurs s'effectuent dans l'ordre suivant de
priorité (du degré de priorité le plus faible ou degré de priorité le plus élevé). Dans le
cas d'opérateurs de priorité égale, de gauche à droite.

opérateur Description
, virgule ou séparateur de liste

= += -= *= /= %= Affectation et opérateurs associatifs

?: Opérateur conditionnel

|| Ou logique

&& Et logique

== != Égalité et différent

< <= >= > relationnel

+- Addition soustraction

*/ Multiplication division

! - ++ -- Not moins unaire incrémentation décrémentation

() parenthèses

16
Les entrées/sorties de données
 Les sorties des données
 JavaScript peut "afficher" les données de différentes manières:
◦ Ecriture dans un élément HTML, en utilisant innerHTML.
◦ Écriture dans la sortie HTML en utilisant document.write().
◦ Ecrire dans une boîte d'alerte, en utilisant window.alert().
◦ Ecriture dans la console du navigateur, en utilisant console.log().

• Utilisation de innerHTML: Pour accéder à un élément HTML, JavaScript peut

utiliser la méthode document.getElementById(id)
• L' attribut id définit l'élément HTML. La propriété innerHTML définit le contenu
HTML:
<!DOCTYPE html>
Exemple <html>
<body>
<h1>Exemple sur l'output avec getElementById</h1>
<p>on change le contenu du paragraphe ayant comme id "demo" en
insérant du contenu</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>

17
Les entrées/sorties de données
 Les sorties des données

• Utilisation de document.write () À des fins de test, il est pratique

d'utiliser document.write():

<!DOCTYPE html>
<html>
<body>
<h1>Test de document write</h1>
<p>Ecriture à l'emplacement du script dans la page Html</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>

Remarque: L'utilisation de document.write () après le chargement d'un document

HTML supprimera tout le HTML existant : cette méthode ne doit être utilisée que pour
les tests
Exemple
<!DOCTYPE html>
<html>
<body>
<h1>utilisation de document.write après le chargement du document</h1>
<p>Ecrasement du document après le click</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html> 18
Les entrées/sorties de données
 Les sorties des données

• Utilisation de la méthode alert () On peut utiliser une boîte de dialogue

d'alerte pour afficher des données: cette méthode retourne la valeur
UNDEFINED.
<!DOCTYPE html>
<html>
<body>
<h1>La méthode alert()</h1>
<script>
alert("erreur Vérifiez la saisie");
</script>
</body>
</html>

19
Les entrées/sorties de données
 Les sorties des données

• Utilisation de console.log () À des fins de débogage, on peut appeler la

méthode console.log() dans le navigateur pour afficher les données.

<!DOCTYPE html>
<html>
<body>

<h2>Activate Debugging</h2>

<p>tapez F12 pour activer le debugging.</p>

<p>choisir "Console" dans le menu du debugger </p>
<script>
console.log(5 + 6);
</script>

</body>
</html>

20
Les entrées/sorties de données
 Les Entrée des données

• Utilisation de la méthode prompt() qui retourne la valeur entrée ou null si

aucune valeur n’est entrée.

<html>
<head>
<h1> Entrée de données avec prompt() </h1>
<script>
var nom=prompt ("Quel est votre nom?")
document.write("Bonjour "+"<b>"+nom+"</b>"+".")
</script>
</head>
</html>

Après la saisie du nom et le click sur le bouton ok

21
Les entrées/sorties de données
 Les Entrée des données

• Saisie d’une réponse booléenne avec la méthode confirm() qui retourne

retourne les valeurs TRUE ou FALSE.

<html>
<head>
<script language="javascript">
var reponse= confirm ("confirmez vous la réponse?")
document.write ("<br> Merci pour votre réponse !")
</script>
</head>
</html>

Après le click sur le bouton ok ou annuler

22
Les entrées/sorties de données
 Les Entrée/sorties dans un formulaire
• Exemple
• on crée deux zones texte pour la saisie des deux nombres
• et une zone de saisie pour le résultat
• un bouton pour appeler la fonction qui affiche la somme dans la zone résultat en
accédant au contenu à l’aide de la valeur de l’attribut name

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var A = document.frm1.Aname.value ;
var B = document.frm1.Bname.value ;
document.frm1.somme.value = Number(A)+Number(B);
}
</script>
</head>

<body>
<form name="frm1" action="traitement.php">
valeur de A: <input type="number" name="Aname" value="0"><br>
valeur de B: <input type="number" name="Bname" value="0"><br><br>
A+B = <input type="number" name="somme" value="0" readonly ><br><br>
<input TYPE="button" NAME="bouton" value="Calculer la somme" onClick="myFunction()" >
</form>
</body>
</html> 23
Les instructions conditionnelles
 En JavaScript, nous avons les instructions conditionnelles suivantes:
 if pour spécifier un bloc de code à exécuter, si une condition spécifiée est
vraie
if (condition) {
// block of code to be executed if the condition is true
}
 else pour spécifier un bloc de code à exécuter, si la même condition est
fausse
if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}
 else if pour spécifier une nouvelle condition à tester, si la première
condition est fausse
if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) { // block of code to be executed if the condition1 is false and condition2 is true}
else { // block of code to be executed if the condition1 is false and condition2 is false }
 switch pour spécifier de nombreux blocs de code alternatifs à exécuter

24
Les instructions conditionnelles
 Exemple

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get a time-based greeting:</p>

<button onclick="myFunction()">Try it</button>

</body>
</html>

25
Les instructions conditionnelles
 switch pour spécifier de nombreux blocs de code alternatifs à exécuter
<!DOCTYPE html>
<html>
Syntaxe <body>
<p id="demo"></p>
switch(expression) { <script>
case x: var day;
switch (new Date().getDay()) {
// code block case 0:
break; day = "Sunday";
break;
case y: case 1:
// code block day = "Monday";
break;
break; case 2:
default: day = "Tuesday";
break;
// code block case 3:
} day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script> </body> </html> 26
Les instructions itératives
JavaScript prend en charge différents types de boucles:
 for - parcourt un bloc de code plusieurs fois
 while - boucle à travers un bloc de code tant qu'une condition spécifiée est
vraie. Elle commence par tester d’abord la condition
 do/while - boucle également à travers un bloc de code tant qu'une
condition spécifiée est vraie. Elle teste la condition après la première
exécution

27
Les instructions itératives
La boucle For

Syntaxe
for (statement 1; statement 2; statement 3) {
// code block to be executed
}
Statement 1 est exécuté avant l’éxécution du code block.
Statement 2 définit la condition pour exécuter le code block.
Statement 3 est exécuté à chaque fois que le code block a été exécuté.

Exemple
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Loop</h2>

<p id="demo"></p>
<script>
var text = "";
var i;
for (i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html> 28
Les instructions itératives
La boucle while exécute un bloc de code tant qu'une condition spécifiée
est vraie.

Syntaxe
while (condition) {
// code block to be executed
}
Exemple
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript While Loop</h2>
<p id="demo"></p>
<script>
var text = "";
var i = 0;
while (i < 10) {
text += "<br>The number is " + i;
i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

29
Les instructions itératives
La boucle do while La boucle do while est une variante de la boucle
while. Cette boucle exécutera le bloc de code une fois, avant de vérifier si la
condition est vraie, puis elle répétera la boucle tant que la condition est vraie.
Syntaxe
do {
// code block to be executed
}while (condition);
Exemple
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Do/While Loop</h2>
<p id="demo"></p>
<script>
var text = ""
var i = 0;
do {
text += "<br>The number is " + i;
i++;
}while (i < 10);

document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
30
Les Fonctions javaScript
Une fonction JavaScript est un bloc de code conçu pour effectuer une tâche
particulière. Une fonction JavaScript est exécutée lorsqu’elle est appelée dans
le programme.
Syntaxe Les variables déclarées avec var
dans une fonction resteront
function name(parameter1, parameter2, parameter3) { locaux à cette fonction.
// code to be executed
} Les paramètres sont passés par
valeur.
Exemple 1
On pourra utiliser la commande
<!DOCTYPE html>
<html> return (optionnel) Exemple:
<body> return a*b
<h2>JavaScript Functions</h2>
<p>dans cet exemple on appelle une fonction qui calcule le produit
de deux nombres et retourne le résultat :</p>
<p id="demo"></p>
<script>
var x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;

function myFunction(a, b) {
return a * b;
}
</script>
</body>
</html>
31
Les Fonctions javaScript
Une fonction JavaScript est un bloc de code conçu pour effectuer une tâche
particulière. Une fonction JavaScript est exécutée lorsqu’elle est appelée dans
le programme.
Syntaxe
function name(parameter1, parameter2, parameter3) {
// code to be executed
}

Exemple 2, Les fonctions peuvent être utilisées de la même

manière qu’on utilise des variables, dans des expressions.

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "The temperature is " + toCelsius(77) + " Celsius";

function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
</script>
</body>
</html> 32
Les variables
Portée des variables, variables locales, variables globales

 Les variables déclarées tout au début du script, en dehors et avant toutes

fonctions, seront toujours globales, qu'elles soient déclarées avec var ou de
façon contextuelle (sans var). On pourra donc les exploiter partout dans le
script.
 Dans une fonction, une variable déclarée par le mot clé var aura une
portée limitée à cette seule fonction. On ne pourra donc pas l'exploiter
ailleurs dans le script. D'où son nom de locale. Par contre, toujours dans
une fonction, si la variable est déclarée contextuellement (sans utiliser le
mot var), sa portée sera globale.

33
Les Fonctions javaScript
 On pourra mettre dans un fichier à part: fonctions.js toutes les fonctions
déclarées. Pour les charger et les utiliser dans différentes pages Web on
utilise l’instruction suivante dans la balise <head>

ATTENTION! : Pas de balise <script> dans fonctions.js

Fonctions prédéfinies
 La fonction Eval 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.

Exemple 2
Exemple 1
<body> <body>
<h2>JavaScript Functions</h2> <h2>JavaScript Functions</h2>
<p>Fonction eval</p> <p>Fonction eval</p>
<p id="demo"></p> <p id="demo"></p>
<script> <script>
str ='3+5'; str ='myFunction(3,5) + myFunction(10,9)';
x=eval(str); x=eval(str);
document.getElementById("demo").innerHTML ='le résultat est ' + x; document.getElementById("demo").innerHTML ='le résultat est ' + x;
</script>
</body> function myFunction(a, b) {
</html> return a * b;
}
</script>
</body>

35
Travail à faire

36
Fonctions prédéfinies
 La fonction parseFloat Cette fonction convertit une chaîne en nombre à
virgule flottante si la chaîne commence par un caractère numérique.
 Si le premier caractère ne peut pas être converti en nombre, parseFloat () renvoie
NaN. Sinon elle analyse la chaîne jusqu'à ce qu'elle atteigne la fin du nombre et
renvoie le nombre sous le type nombre.
<!DOCTYPE html> document.getElementById("demo").innerHTML =
<html> a + "<br>" +
<body> b + "<br>" +
c + "<br>" +
<p>Click the button to parse different strings.</p> d + "<br>" +
e + "<br>" +
<button onclick="myFunction()">Try it</button> f + "<br>" +
g;
<p id="demo"></p> }
</script>
<script>
function myFunction() { </body>
var a = parseFloat("10") </html>
var b = parseFloat("10.00")
var c = parseFloat("10.33")
var d = parseFloat("34 45 66")
var e = parseFloat(" 60 ")
var f = parseFloat("40 years")
var g = parseFloat("He was 40")

37
Les évènements
 Les évènements sont des actions qui se produisent et auxquelles
on va pouvoir répondre en exécutant un code. Par exemple, on va
pouvoir afficher ou cacher du texte suite à un clic d’un utilisateur
sur un élément, on change la taille d’un texte lors du passage de la
souris d’un utilisateur sur un élément.
 Les évènements et leur prise en charge sont l’un des mécanismes
principaux de JavaScript qui vont nous permettre d’ajouter un vrai
dynamisme à nos pages Web.

38
Les évènements
En JavaScript, un évènement est une action qui se produit et qui
possède deux caractéristiques essentielles :
 C’est une action qu’on peut « écouter », c’est-à-dire une action
qu’on peut détecter car le système va nous informer qu’elle se
produit ;
 C’est une action à laquelle on peut « répondre », c’est-à-dire qu’on
va pouvoir attacher un code à cette action qui va s’exécuter dès
qu’elle va se produire.
 Par exemple, on va pouvoir détecter le clic d’un utilisateur sur un
bouton d’un document et afficher une boite de dialogue ou un
texte suite à ce clic. On parlera donc « d’évènement clic ».
 Il existe de nombreux évènements répertoriés en JavaScript (Le
chargement du document, Un clic sur un bouton, Le survol d’un élément
par la souris..)

39
Gestionnaires d’évènements
Pour écouter et répondre à un évènement, nous allons définir ce qu’on
appelle des gestionnaires d’évènements.
Un gestionnaire d’évènements est toujours divisé en deux parties :
 une partie qui va servir à écouter le déclenchement de l’évènement,
 et une partie gestionnaire en soi qui va être le code à exécuter dès que
l’évènement se produit.

Aujourd’hui, en JavaScript, il existe trois grandes façons d’implémenter un

gestionnaire d’évènements :
 on peut utiliser des attributs HTML de type évènement (non
recommandé) ;
 on peut utiliser des propriétés JavaScript liées aux évènements ;
 on peut utiliser la méthode addEventListener() (recommandé).

40
Gestionnaires d’évènements
Utiliser les attributs HTML pour gérer un évènement
Cette façon de faire ne devrait plus être utilisée aujourd’hui. Cependant, de nombreux sites
utilisent encore ce type de syntaxe ce qui nous force à l’étudier ici.
 Cette méthode consiste à insérer un attribut HTML lié à l’évènement
qu’on souhaite gérer directement dans la balise ouvrante d’un élément à
partir duquel on va pouvoir détecter le déclenchement de cet évènement.
 Ces attributs HTML de « type évènement » possèdent souvent le nom de
l’évènement qu’ils doivent écouter et gérer précédé par « on » comme par
exemple :
◦ L’attribut onclick pour l’évènement « clic sur un élément » ;
◦ L’attribut onmouseover pour l’évènement « passage de la souris sur
un élément » ;
◦ L’attribut onmouseout pour l’évènement « sortie de la souris
d’élément » ;
◦ Etc..
Nous allons passer en valeur de ces attributs le code JavaScript qu’on
souhaite exécuter (généralement une fonction) suite au déclenchement de
l’évènement en question. Dès que l’évènement va être détecté, le code
présent dans l’attribut va être exécuté

41
Gestionnaires d’évènements
Utiliser les attributs HTML pour gérer un évènement
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Première méthode de gestion des évènements</title>
<meta charset="utf-8">
</head>

<body>
<h1>Titre principal</h1>
<p>Un premier paragraphe</p>
<button onclick="alert('Bouton cliqué')">Cliquez moi !</button>
<div onmouseover="this.style.backgroundColor='orange'"
onmouseout="this.style.backgroundColor='white'">
<p>Un paragraphe dans un div</p>
<p>Un autre paragraphe dans le div</p>
</div>
</body>
</html>

42
Gestionnaires d’évènements
Utiliser les attributs HTML pour gérer un évènement
Liste des principaux évènements
Évènements applicables sur la balise <body>
évènement description

onload Le script s'exécute lors du chargement d'un document HTML

onunload Le script s'exécute lors du déchargement d'un document HTML

Évènements applicables sur la balise <form>

évènement description

onchange Le script s'exécute lorsque l’élément change

onsubmit Le script s'exécute lorsque le formulaire est soumis (submitted)

onreset Le script s'exécute lorsque le formulaire est réinitialisé

onselect Le script s'exécute lorsque l’élément est sélectionné

onblur Le script s'exécute lorsque l’élément perd le focus

onfocus Le script s'exécute lorsque l’élément prend le focus

43
Gestionnaires d’évènements
Utiliser les attributs HTML pour gérer un évènement
Liste des principaux évènements
Évènements du clavier
évènement description

onkeydown Le script s'exécute lorsque la touche est enfoncée

onkeypress Le script s'exécute lorsque la touche est enfoncée et

relâchée
onkeyup Le script s'exécute lorsque la touche est relâchée

EXEMPLE 1
<!DOCTYPE html>
<html>
<body>
<p>Press and hold down a key inside the text field to set a red background color. Release the key to set a green background color.</p>
<input type="text" id="demo" onkeydown="keydownFunction()" onkeyup="keyupFunction()">
<script>
function keydownFunction() { document.getElementById("demo").style.backgroundColor = "red"; }
function keyupFunction() { document.getElementById("demo").style.backgroundColor = "green"; }
</script>
</body>
</html>

44
Gestionnaires d’évènements
Utiliser les attributs HTML pour gérer un évènement
Liste des principaux évènements
Évènements du clavier event.keyCode
EXEMPLE 2
<!DOCTYPE html>
<html>
<body>

<p>Press a key on the keyboard in the input field to get the Unicode character code of the pressed key.</p>

<input type="text" size="40" onkeypress="myFunction()">

function myFunction() {
var x = event.which || event.keyCode;
document.getElementById("demo").innerHTML = "The Unicode value is: " + x;
}
</script>

</body>
</html>
45
Gestionnaires d’évènements
Utiliser les attributs HTML pour gérer un évènement
Liste des principaux évènements Évènements de la souris
évènement description

onclick Le script s'exécute lorsqu'un click de souris survient

ondblclick Le script s'exécute lorsqu'un double-click de souris

survient

onmousedown Le script s'exécute lorsque le bouton de la souris est

enfoncé

onmousemove Le script s'exécute lorsque le pointeur de la souris se

déplace

onmouseout Le script s'exécute lorsque le pointeur de la souris sort

d'un élément

onmouseover Le script s'exécute lorsque le pointeur de la souris se

déplace sur un élément

onmouseup Le script s'exécute lorsque le bouton de la souris est

relâché 46
Gestionnaires d’évènements
Utiliser les attributs HTML pour gérer un évènement
Liste des principaux évènements Évènements de la souris
EXEMPLE 1
<!DOCTYPE html>
<html>
<body>
<p id="myP" onmousedown="mouseDown()" onmouseup="mouseUp()">
Click the text! The mouseDown() function is triggered when the mouse button is pressed down over
this paragraph, and sets the color of the text to red. The mouseUp() function is triggered when the
mouse button is released, and sets the color of the text to green.
</p>
<script>
function mouseDown() {
document.getElementById("myP").style.color = "red";
}
function mouseUp() {
document.getElementById("myP").style.color = "green";
}
</script>
</body>
</html>

47
Gestionnaires d’évènements
Utiliser les attributs HTML pour gérer un évènement
Liste des principaux évènements Évènements de la souris
EXEMPLE 2
<!DOCTYPE html>
<html>
<head>
<title>Première méthode de gestion des évènements</title>
<meta charset="utf-8">
</head>

<body>
<h1>Titre principal</h1>
<p>Un premier paragraphe</p>
<button onclick="alert('Bouton cliqué')" >Cliquez moi !</button>
<div onmouseover="this.style.backgroundColor='orange'"
onmouseout="this.style.backgroundColor='white'">
<p>Un paragraphe dans un div</p>
</div>

<div ondblclick="this.style.backgroundColor='red'"
<p>Un autre paragraphe dans le div</p>
</div>
</body>
</html>
48
Gestionnaires d’évènements
Utiliser les propriétés JavaScript pour gérer un évènement
Chaque évènement est représenté en JavaScript par un objet basé sur
l’interface Event.
Les gestionnaires d’évènements sont des propriétés de la forme
« on »+ nom de l’évènement géré.
On va passer le code à exécuter en cas de déclenchement de
l’évènement en valeur de la propriété relative à l’évènement et allons
utiliser ces propriétés à partir d’objets Element

49
Gestionnaires d’évènements
Utiliser les propriétés JavaScript pour gérer un évènement
Contenu du fichier HTML
<!DOCTYPE html>
<html>
<head>
<title>Cours JavaScript</title>
<meta charset="utf-8"> Contenu du fichier cours.js
<link rel="stylesheet" href="cours.css"> //On sélectionne le button d’id #bt1 et le div d’id #div1 du document
<script src='cours.js' async></script> let b1 = document.querySelector("#bt1");
</head> let d1 = document.querySelector("#div1");
<body>
<h1>Titre principal</h1> //On utilise les propriétés gestionnaires d'évènement avec nos éléments
<p>Un premier paragraphe</p> b1.onclick = function(){alert('Bouton cliqué')};
<button id="bt1">Cliquez moi !</button> d1.onmouseover = function(){this.style.backgroundColor ='orange'};
<div id="div1"> d1.onmouseout = function(){this.style.backgroundColor='white'};
<p>Un paragraphe dans un div</p>
<p>Un autre paragraphe dans le div</p>
</div>
</body>
</html>

50
Gestionnaires d’évènements
Utiliser les propriétés JavaScript pour gérer un évènement
 Notez que cette façon de faire est moins efficace et performante que la
suivante car chaque objet ne va pouvoir posséder qu’une propriété
gestionnaire d’évènements pour un même type d’évènements ce qui
signifie qu’on ne va pas pouvoir réagir plusieurs fois de façons différentes à
un même évènement à partir d’un même élément.

51
Gestionnaires d’évènements
Utiliser la méthode addEventListener() pour gérer un
évènement
 Cette dernière façon de gérer les évènements est la manière
recommandée aujourd’hui car c’est la plus flexible et la plus performante.

 On va passer deux arguments à la méthode addEventListener() : le nom

d’un évènement qu’on souhaite prendre en charge ainsi que le code à
exécuter (qui prendra souvent la forme d’une fonction) en cas de
déclenchement de cet évènement.

 Notez qu’on va par ailleurs pouvoir utiliser la méthode addEventListener()

pour réagir plusieurs fois et de façon différente à un même évènement ou
pour réagir à différents évènements à partir de différents ou d’un même
objet Element.

52
Gestionnaires d’évènements
Utiliser la méthode addEventListener() pour gérer un
évènement
Contenu du fichier HTML
<!DOCTYPE html>
<html>
<head>
<title>Cours JavaScript</title>
Contenu du fichier cours.js
<meta charset="utf-8">
//On sélectionne le button d’id #bt1 et le div d’id #div1 du document
<link rel="stylesheet" href="cours.css">
let b1 = document.querySelector("#bt1");
<script src='cours.js' async></script>
let d1 = document.querySelector("#div1");
</head>
<body>
//On utilise la méthode addEventListener pour gérer des évènements
<h1>Titre principal</h1>
b1.addEventListener('click', function(){alert('Bouton cliqué')});
<p>Un premier paragraphe</p>
d1.addEventListener('mouseover', function(){this.style.backgroundColor ='orange'});
<button id="bt1">Cliquez moi !</button>
d1.addEventListener('mouseover', function(){this.style.fontWeight ='bold'});
<div id="div1">
d1.addEventListener('mouseout', function(){this.style.backgroundColor='white'});
<p>Un paragraphe dans un div</p>
<p>Un autre paragraphe dans le div</p>
</div>
</body>
</html>

53
Gestionnaires d’évènements
Supprimer un gestionnaire d’évènements avec
removeEventListener()
 La méthode removeEventListener() va nous permettre de
supprimer un gestionnaire d’évènement déclaré avec
addEventListener().

 Pour cela, il va suffire de passer en argument le type d’évènement

ainsi que le nom de la fonction passée en argument de
addEventListener().

54
Gestionnaires d’évènements
Supprimer un gestionnaire d’évènements avec
removeEventListener() Exemple
<!DOCTYPE html> <div id="myDIV1">
<html> <p id="demo1"></p>
<head> <p id="demo2"></p>
<title>Cours JavaScript</title> <p id="demo3"></p>
<meta charset="utf-8"> </div>
<link rel="stylesheet" href="casino.css">
<script src='casino.js' async></script> </body>
</head> </html>
<body> Code CSS
<div id="myDIV">This div element has an onmousemove event #myDIV{
handler that displays a random number every time you move background-color:coral;
your mouse inside this orange field. border:1px solid; padding:50px;
<p>Click the button to remove the DIV's event handler.</p> color:white; }

<button id="myBtn1">Stop 1</button> #myDIV1{display:flex; }

#demo1, #demo3{background-color: red;
<button id="myBtn2">Stop 2</button>
font-size: 45px;width: 50px; }
<button id="myBtn3">Stop 3</button>
#demo2{ background-color: green;
</div>
font-size: 45px; width: 50px; }

55
Gestionnaires d’évènements
Supprimer un gestionnaire d’évènements avec
removeEventListener()
function myFunction1() {
code JavaScript document.getElementById("demo1").innerHTML =
let b1 = document.querySelector("#myBtn1"); Math.trunc(Math.random()*10); }
let b2 = document.querySelector("#myBtn2"); function myFunction2() {
let b3 = document.querySelector("#myBtn3"); document.getElementById("demo2").innerHTML =
let d1 = document.querySelector("#myDIV"); Math.trunc(Math.random()*10); }
function myFunction3() {
d1.addEventListener("mousemove", myFunction1); document.getElementById("demo3").innerHTML =
d1.addEventListener("mousemove", myFunction2); Math.trunc(Math.random()*10); }
d1.addEventListener("mousemove", myFunction3); function removeHandler1() {
d1.removeEventListener("mousemove", myFunction1); }
b1.addEventListener("click", removeHandler1);
b2.addEventListener("click", removeHandler2); function removeHandler2() {
b3.addEventListener("click", removeHandler3); d1.removeEventListener("mousemove", myFunction2); }

function removeHandler3() {
d1.removeEventListener("mousemove", myFunction3); }

56
Gestionnaires d’évènements
Supprimer un gestionnaire d’évènements avec
removeEventListener() Explication de l’exemple

On commence par ajouter à myDIV trois gestionnaires

d’évènement pour le même évènement « mousemove »
Chacun réagit en affichant un chiffre aléatoire dans une
zone de texte.

d1.addEventListener("mousemove", myFunction1);
d1.addEventListener("mousemove", myFunction2);
d1.addEventListener("mousemove", myFunction3);

On ajoute à chaque bouton, un gestionnaire de

l’évènement « click » ce gestionnaire réagit au click en
supprimant l’un des gestionnaires de l’évènement
mousemouve de myDiv ce qui aura pour effet d’arêter la
génération des chiffres aléatoires dans la zone texte
correspondante.

b1.addEventListener("click", removeHandler1);
b2.addEventListener("click", removeHandler2);
b3.addEventListener("click", removeHandler3);

function removeHandler1() {
d1.removeEventListener("mousemove", myFunction1);
}

function removeHandler2() {
d1.removeEventListener("mousemove", myFunction2);
}

function removeHandler3() {
d1.removeEventListener("mousemove", myFunction3);
} 58
l’orienté objet en JavaScript

• La programmation orientée objet est une façon de concevoir un code autour du

concept d’objets.
• Un objet est une entité qui peut être vue comme indépendante et qui va contenir
un ensemble de variables (qu’on va appeler propriétés) et de fonctions (qu’on
appellera méthodes).
• JavaScript est un langage qui intègre l’orienté objet dans sa définition même, ce qui
fait que tous les éléments du JavaScript vont soit être des objets soit pouvoir être
convertis et traités comme des objets
• 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.
• L’intérêt de développer en orienté objet plutôt qu’en procédural par exemple est
de permettre une plus grande modularité ou flexibilité du code ainsi qu’une
meilleure lisibilité et une meilleure maintenabilité de celui-ci

59
l’orienté objet en JavaScript
Création d’un objet JavaScript littéral et manipulation de ses membres

Nous pouvons 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().

60
/*Notre variable "utilisateur" est ici une variable-objet
l’orienté objet en JavaScript let utilisateur = {
Création d’un objet littéral /*nom, age et mail sont des propriétés de l'objet utilisateur
*La valeur de la propriété "nom" est un tableau*/
nom : ['faouzi', 'dhieb'],
age : 29,
mail : '[email protected]',

//Bonjour est une méthode de l'objet utilisateur

• On parle ici d’objet « littéral » car nous
avons défini chacune de ses propriétés et bonjour: function(){
de ses méthodes lors de la création, alert('Bonjour, je suis ' + this.nom[0] + ', j\'ai ' + this.age
c’est-à-dire littéralement. + ' ans');
}}; alert(typeof utilisateur);

• let utilisateur stocke notre objet.

• typeof qui renvoie le type de valeur d’une variable qui est object
• Un « membre » est un couple « nom : valeur », et peut être une propriété ou une
méthode.
• notre objet est ici composé de différents membres : 3 propriétés et 1 méthode.
• Le membre nommé bonjour de notre objet est une méthode puisqu’une fonction
anonyme lui est associée en valeur
• Chaque membre d’un objet est toujours composé d’un nom et d’une valeur qui sont
séparées par :. Les différents membres d’un objet sont quant-à-eux séparés les uns des
autres par des virgules
• La partie valeur d’un membre peut être n’importe quel type de valeur : une chaine de
caractère, un nombre, une fonction, un tableau ou même un autre objet littéral.
• Les membres d’un objet qui ne servent qu’à stocker des données sont appelés des
propriétés tandis que ceux qui manipulent des données sont appelés des méthodes. 61
l’orienté objet en JavaScript
Utiliser le point pour accéder aux membres d’un objet, les modifier ou en
définir de nouveaux

Pour accéder aux propriétés et aux méthodes d’un objet, on utilise le caractère point . qu’on
appelle également un accesseur.
On va ici commencer par préciser le nom de l’objet puis l’accesseur puis enfin le membre
auquel on souhaite accéder.
Cet accesseur va nous permettre non seulement d’accéder aux valeurs de nos différents
membres mais également de modifier ces valeurs.

62
l’orienté objet en JavaScript
Utiliser le point pour accéder aux membres d’un objet, les modifier ou en
définir de nouveaux
let utilisateur = {
<!DOCTYPE html> //nom, age et mail sont des propriétés de l'objet "utilisateur "
<html> nom : ['faouzi', 'Dhieb'],
<head> age : 29,
<title>Cours JavaScript</title> mail : '[email protected]',
<meta charset="utf-8">
<link rel="stylesheet" //Bonjour est une méthode de l'objet utilisateur
href="cours.css"> //Le mot clef this sert à faire référence à l’objet qui est couramment manipulé.
<script src='objet2.js' bonjour: function(){
async></script> alert('Bonjour, je suis ' + this.nom[0] + ', j\'ai ' + this.age + ' ans');
</head> }
};
<body>
<h1>Titre principal</h1> /*On accède aux propriétés "nom" et "age" de "utilisateur " et on affiche leur valeur
<p>Un paragraphe</p> *dans nos deux paragraphes p id='p1' et p id='p2'*/
<p id='p1'></p>
<p id='p2'></p> document.getElementById('p1').innerHTML = 'Nom : ' + utilisateur .nom;
<p id='p3'></p> document.getElementById('p2').innerHTML = 'Age : ' + utilisateur .age;
</body>
</html> //On modifie la valeur de la propriété "age" de "utilisateur "

utilisateur.age = 30;

document.getElementById('p3').innerHTML = 'Nouvel âge : ' + utilisateur .age;

/*On accède à la méthode "bonjour" de l'objet "utilisateur " qu'on exécute de la

même façon qu'une fonction anonyme stockée dans une variable*/

utilisateur .bonjour();
63
l’orienté objet en JavaScript
Utiliser le point pour accéder aux membres d’un objet, les modifier ou en
définir de nouveaux

On va encore pouvoir utiliser notre accesseur pour créer de nouveaux membres pour
notre objet. Pour cela, il suffit de définir un nouveau nom de membre et de lui passer une
valeur :

<!DOCTYPE html> let utilisateur = {

<html>
<head> nom : ['faouzi ', 'Dhieb'],
<title>Cours JavaScript</title> age : 29,
<meta charset="utf-8"> mail : '[email protected]',
<link rel="stylesheet"
href="cours.css">
<script src='objet3.js' bonjour: function(){
async></script> alert('Bonjour, je suis ' + this.nom[0] + ', j\'ai ' + this.age + ' ans');
</head> }
};
<body>
<h1>Titre principal</h1> /* on ajoute la propriété taille à l'objet utilisateur */
<p>Un paragraphe</p> utilisateur.taille = 170;
<p id='p1'></p> /*on ajoute la méthode mesure à l'objet utilisateur */
</body> utilisateur.mesure = function(){
</html> alert('Bonjour, je suis ' + this.nom[0] +
', j\'ai ' + this.age + ' ans et je mesure ' + this.taille + 'cm');}

utilisateur .mesure();

64
l’orienté objet en JavaScript
Utiliser le point pour accéder aux membres d’un objet, les modifier ou en
définir de nouveaux

On va également pouvoir utiliser des crochets plutôt que le point pour accéder aux propriétés
de nos objets, mettre à jour leur valeur ou en définir de nouvelles.

let utilisateur = {
nom : ['faouzi ', 'Dhieb'],
age : 29,
mail : 'faouzi [email protected]',

bonjour: function(){
alert('Bonjour, je suis ' + this.nom[0] + ', j\'ai ' + this.age + ' ans');
}
};

document.getElementById('p1').innerHTML = 'Nom complet : ' + utilisateur ['nom'];

document.getElementById('p2').innerHTML = 'Prénom : ' + utilisateur ['nom'][0]; // ici ‘faouzi’
utilisateur ['age'] = 30;
document.getElementById('p3').innerHTML = 'Age : ' + utilisateur ['age'];

65
l’orienté objet en JavaScript
La fonction constructeur d’objets : définition et création d’un constructeur
Créer des objets à partir d’une fonction constructeur
Une fonction constructeur d’objets est une fonction qui va nous permettre de créer des objets
semblables.
Pour construire des objets à partir d’une fonction constructeur, nous définissons tout d’abord
notre fonction constructeur et ensuite nous allons appeler ce constructeur en utilisant le mot
clefs new.
On définit ici une fonction Utilisateur() qu’on va utiliser comme constructeur d’objets.
Notez que lorsqu’on définit un constructeur, on utilise par convention une majuscule au début du nom de la
fonction afin de bien discerner nos constructeurs des fonctions classiques dans un script.
function Utilisateur(n, a, m){
this.nom = n;
this.age = a;
this.mail = m;
//this: Le mot clef qui va permettre de définir et d’initialiser les propriétés ainsi que les méthodes de
chaque objet créé.
this.bonjour = function(){
alert('Bonjour, je suis ' + this.nom[0] + ', j\'ai ' + this.age + ' ans');
}
}
//on crée de nouvelles instances à l’aide du mot clé new
let sami = new Utilisateur(['Sami', 'beji'], 29, '[email protected]');
let sondos = new Utilisateur(['Sondos', 'Trabelsi'], 27, '[email protected]');
let sarra = new Utilisateur(['Sarra', 'Hammi'], 19, '[email protected]');

document.getElementById('p1').innerHTML = 'informations de Sami : '+

sami['nom'][0] + ' ' + sami['nom'][1]+ ' '+ sami['age']+ ' ans' + ' Email:' + sami.mail ;
document.getElementById('p2').innerHTML = 'informations de sondos : ' +
sondos['nom'][0] + ' ' + sondos['nom'][1]+' '+ sondos['age']+ ' ans' + ' Email:' + sondos.mail ;
document.getElementById('p3').innerHTML = 'informations de sarra : ' +
sarra['nom'][0] + ' ' + sarra['nom'][1]+' '+ sarra['age']+ ' ans' + ' Email:' + sarra.mail ; 66
l’orienté objet en JavaScript
Valeurs primitives et objets prédéfinis en JavaScript

 JavaScript dispose de constructeurs d’objets prédéfinis dans son langage. Ces

constructeurs vont disposer de propriétés et de méthodes intéressantes qu’on
va pouvoir immédiatement utiliser avec les objets qu’on va créer à partir de ces
constructeurs.
 Dans cette nouvelle partie, nous allons voir certains de ces constructeurs (qu’on
appellera désormais simplement des objets) et définirons ce que sont les valeurs
primitives.
 En JavaScript, il existe 7 types de valeurs différents. Chaque valeur qu’on va
pouvoir créer et manipuler en JavaScript va obligatoirement appartenir à l’un de
ces types. Ces types sont les suivants :
 string ou « chaine de caractères » en français ;
 number ou « nombre » en français ;
 boolean ou « booléen » en français ;
 null ou « nul / vide » en français;
 undefined ou « indéfini » en français ;
 symbol ou « symbole » en français ;
 object ou « objet » en français ;
 Les valeurs appartenant aux 6 premiers types de valeurs sont appelées des
valeurs primitives. Les valeurs appartenant au type object sont des objets.

67
l’orienté objet en JavaScript
Valeurs primitives et objets prédéfinis en JavaScript

 Le JavaScript possède deux grandes catégories de types de données : les valeurs

primitives et les objets.
 On appelle valeur primitive en JavaScript une valeur qui n’est pas un objet et
qui ne peut pas être modifiée.
 Cela va être différent pour les objets : on va tout à fait pouvoir modifier les
membres d’un objet.
 Autre différence entre valeurs primitives et objets : les valeurs primitives sont
passées et comparées par valeur tandis que les objets sont passés et comparés
par référence.
 Si deux valeurs primitives ont la même valeur, elles vont être considérées égales.
Si deux objets définissent les mêmes propriétés et méthodes avec les mêmes
valeurs, ils ne vont pas être égaux. Pour que deux objets soient égaux, il faut que
les deux fassent référence aux mêmes membres.

68
l’orienté objet en JavaScript
Valeurs primitives et objets prédéfinis en JavaScript

<!DOCTYPE html> //Deux valeurs primitives

<html> let ch1 = 'Une chaine de caractères';
<head> let ch2 = 'Une chaine de caractères';

<title>Cours JavaScript</title>
//true car les deux valeurs (et les types) sont égaux
<meta charset="utf-8">
document.getElementById('p1').innerHTML = 'ch1 == ch2 ? : ' +
<link rel="stylesheet" href="cours.css"> (ch1 === ch2);
<script src='primitives.js' async></script>
</head> //Trois objets
<body> let ob1 = {prenom : ‘Sami'};
let ob2 = {prenom : ‘Sami'};
<h1>Titre principal</h1>
let ob3 = ob1;
<p>Un paragraphe</p>
<p id='p1'></p>
//false car les deux objets ne font pas référence aux mêmes
<p id='p2'></p> membres
<p id='p3'></p> document.getElementById('p2').innerHTML = 'ob1 === ob2 ? : ' +
(ob1 === ob2);
</body>
</html>
//true car les deux objets font référence aux mêmes membres
document.getElementById('p3').innerHTML = 'ob1 === ob3 ? : ' +
(ob1 === ob3);

69
l’orienté objet en JavaScript
Valeurs primitives et objets prédéfinis en JavaScript
 chaque type de valeur primitive, à l’exception de null et de undefined,
possède un équivalent objet prédéfini en JavaScript.
 Ainsi, le JavaScript possède quatre objets natifs
String, Number, Boolean et Symbol qui contiennent des propriétés et des
méthodes.
 Dans le code qui suit, notre variable ch1 contient une valeur primitive de type
chaine de caractères (string) tandis que la variable ch2 contient un objet String.
 Ici, on utilise la propriété length et la méthode toUpperCase() définies dans le
constructeur String() sur notre objet de type string afin de connaitre la
longueur de la chaine de caractères et de renvoyer cette chaine en majuscules.

//On définit une valeur primitive

let ch1 = 'Une chaine de caractères';
//On appelle le constructeur String() pour créer un objet String
let ch2 = new String('Une chaine de caractères');
//La propriété length compte la longueur de la chaine
document.getElementById('p1').innerHTML = ch2.length;
//La métohde toUpperCase() renvoie la chaine en majuscules sans modifier
l'objet
document.getElementById('p2').innerHTML = ch2.toUpperCase();
document.getElementById('p3').innerHTML = ch2; 70
l’orienté objet en JavaScript
Valeurs primitives et objets prédéfinis en JavaScript
 Il est à noter que le fait de déclarer une valeur primitive offre de bien meilleurs
résultats en termes de performances que de créer un nouvel objet et c’est la
raison principale de l’existence de ces valeurs.
 De plus, on peut utiliser les méthodes et propriétés définies dans les
constructeurs relatifs avec nos valeurs primitives pour avoir les avantages des
deux
 lorsqu’on tente d’accéder à une propriété ou à une méthode depuis une valeur
primitive, le JavaScript va convertir cette valeur en un objet relatif au type de la
valeur primitive (un objet String pour une chaine de caractères, Number pour un
nombre, etc.).

//On définit une valeur primitive

 L’objet String gère les chaînes de caractères. Le constructeur String() possède

deux propriétés et une trentaine 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 en effet utiliser des valeurs primitives qui sont plus performantes et
avec lesquelles on va également pouvoir utiliser les propriétés et méthodes
définies dans le constructeur.
 Les propriétés de l’objet String : Le constructeur String() ne possède que deux
propriétés : une propriété length et, une propriété prototype comme tout objet.
 La propriété length va nous permettre d’obtenir la longueur d’une chaine de
caractères. Cette longueur est exprimée en points de code (appelées « codets »)
sur la base du format UTF-16.

EXEMPLE:
let ch1 = 'Sami';
let ch2 = 'Sami beji‘ //L'espace est un caractère
//La propriété length renvoie la longueur d'une chaine
document.getElementById('p1').innerHTML = 'longueur du mot '+ ch1+ ' = ' + ch1.length;
document.getElementById('p2').innerHTML = 'longueur du mot '+ ch2+ ' = ' + ch2.length;

72
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript String, propriétés et méthodes

 Principales méthodes de l’objet String:

Méthode Description
includes() permet de déterminer si une chaine de caractères est incluse dans une autre. Cette méthode
prend l’expression (la chaine) à rechercher en argument.
startsWith() permet de déterminer si une chaine commence par une certaine sous chaine (ou
expression). Si c’est le cas, cette méthode renvoie true. Dans le cas contraire, c’est le
booléen false qui est renvoyé.
endsWith() permet de déterminer si une chaine se termine par une certaine sous chaine. Elle va
fonctionner exactement de la même manière que startsWith().
substring() retourne une sous-chaîne de la chaîne courante à partir d’un indice de départ. Cette
méthode demande un indice de départ en argument obligatoire qui va servir à indiquer la
position de départ de la sous-chaine. On va également pouvoir passer un deuxième indice
facultatif pour préciser une position de fin pour notre sous-chaine.
Notez que dans le cas où on fournit une position de départ qui se situe après la position de
fin, la méthode substring() intervertira automatiquement les deux valeurs.
indexOf() permet de déterminer la position de la première occurrence d’un caractère ou d’une chaine
de caractères dans une chaîne de caractères de base. Elle va renvoyer la position à laquelle
cette expression a été trouvée la première fois dans la chaine si elle est trouvée ou la valeur
-1 si l’expression n’a pas été trouvée dans la chaine.
lastIndexOf() va fonctionner exactement de la même manière que sa sœur indexOf() à la différence près
que c’est la position de la dernière occurrence de l’expression cherchée qui va être
renvoyée (ou -1 si l’expression n’est pas trouvée dans la chaine).
73
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript String, propriétés et méthodes

 Principales méthodes de l’objet String: Exemple

let ch = "Bonjour, je suis un étudiant de l'isg de Tunis";
/*Si "étudiant de l'isg" est trouvé dans la chaine sotckée dans ch, includes() renvoie true */
if(ch.includes("étudiant de l'isg"))
document.getElementById('p1').innerHTML = " 'étudiant de l'isg' présent dans la chaine :" + '"'+ ch +'"';
if(ch.startsWith('Bonjour')){
document.getElementById('p2').textContent = 'La chaine' + '"'+ ch +'" commence par "Bonjour"';
}
if(ch.endsWith('de Tunis')){
document.getElementById('p3').textContent = 'et elle se termine par "de Tunis"';
}
document.getElementById('p4').textContent ="'"+ ch.substring(9)+"'" + " est extraite à partir de l'indice 9";
document.getElementById('p5').textContent = "'"+ ch.substring(9, 29)+ "'"+ " est extraite entre les indices 9 et 29 (dernier
indice non compris)";
document.getElementById('p6').textContent ="'"+ ch.substring(29, 9)+"'" + " est extraite entre les indices 9 et 29 (dernier
indice non compris)";

document.getElementById('p7').textContent = "La première apparition de la lettre 's' est à l'indice " + ch.indexOf('s');
document.getElementById('p8').textContent = "La première apparition de la chaine 'je suis' est à l'indice " + ch.indexOf('je
suis');
document.getElementById('p9').textContent = "La dernière apparition de la lettre 's' est à l'indice " + ch.lastIndexOf('s');

74
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript String, propriétés et méthodes

 Principales méthodes de l’objet String: Exécution de l’exemple

75
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript String, propriétés et méthodes

 Principales méthodes de l’objet String:

Méthode Description
slice() La méthode slice() extrait une section d’une chaine de caractères et la retourne
comme une nouvelle chaine de caractères. La chaîne de caractères de départ n’est
pas modifiée.
On doit fournir en argument de départ obligatoire la position de départ dans la
chaine de caractères de départ où doit démarrer l’extraction. On peut également
passer en deuxième argument optionnel la positon où l’extraction doit s’arrêter.

Cette méthode va donc fonctionner comme substring() à deux différences près :

• En passant des valeurs négatives en argument à slice(), les positions de départ

et de fin d’extraction seront calculées à partir de la fin de la chaine de
caractères à partir de laquelle on extrait ;
• En passant une position de départ plus lointaine que la position d’arrivée
à slice(), cette méthode n’inverse pas les valeurs mais renvoie une chaine de
caractères vide.
• Vous pouvez également noter que la méthode slice() ne modifie pas la chaine
de caractères d’origine mais renvoie une nouvelle chaine.

substr(start, length) est similaire à slice (). La différence est que le deuxième paramètre spécifie la
longueur de la chaine extraite.

76
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript String, propriétés et méthodes

 Principales méthodes de l’objet String: Exemple sur la méthode slice()

<!DOCTYPE html> let ch = "Bonjour, je suis un étudiant de l'isg de Tunis";
<html> document.getElementById('h2').textContent = "on travaille sur la
chaine: " + "'" + ch +"'";
<head>
document.getElementById('p1').textContent ="'"+ ch.slice(9)+"'" +
<title>Cours JavaScript</title>
" est extraite à partir de l'indice 9";
<meta charset="utf-8">
document.getElementById('p2').textContent = "'"+ ch.slice(9, 29)+
<link rel="stylesheet" "'"+ " est extraite entre les indices 9 et 29 (dernier indice non
href="chaines1.css" /> compris)";
<script src='chaines2.js' document.getElementById('p3').textContent ="'"+ ch.slice(29, 9)
async></script> +"'" + " ch.slice(29, 9) retourne une chaine vide";
</head> document.getElementById('p4').textContent ="'"+ ch.slice(-46, -39)
<body> +"'" + " est extraite entre les indices -46 (début) et -39";

<h1>La méthode Slice()</h1> document.getElementById('p5').textContent ="'"+ ch.substr(9, 19)

+"'" + " extraction de 19 caractères à partir de l'indice 9";
<h2 id= 'h2'></h2>
<p id='p1'></p>
<p id='p2'></p>
<p id='p3'></p>
<p id='p4'></p>
<p id='p5'></p>
</body>
</html>

77
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript String, propriétés et méthodes

 Principales méthodes de l’objet String:

Méthode Description
replace() La méthode replace() nous permet de rechercher une expression
dans une chaine de caractères et de la remplacer par une autre.
On va passer deux arguments à cette méthode : l’expression à
rechercher, et l’expression de remplacement.
La méthode replace() va renvoyer une nouvelle chaine de caractères
avec les remplacements faits. La chaine de caractères de départ ne sera
pas modifiée.
Notez que dans le cas où on passe une expression de type chaine de
caractères à rechercher, seule la première occurrence dans la chaine
sera remplacée. Pour pouvoir remplacer toutes les occurrences, il
faudra passer une expression régulière comme schéma de recherche à
cette méthode. Nous étudierons les expressions régulières dans une
prochaine partie.

78
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript String, propriétés et méthodes

 Principales méthodes de l’objet String: Exemple de replace()

</head>

<body>
<h1>La méthode replace()</h1>
<h2 id= 'h2'></h2>
<p id='p1'></p>
<p id='p2'></p>
</body>
</html>

79
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript String, propriétés et méthodes

 Principales méthodes de l’objet String:

Méthode Description
toLowerCase() retourne une chaine de caractères en minuscules.

toUpperCase() A l’inverse, cette méthode retourne une chaine de

caractères en majuscules.

Ces deux dernières méthodes retournent une nouvelle

chaine de caractères et ne modifient pas chaine de
caractères de base.
trim() supprime les espaces en début et en fin de chaîne.

80
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript String, propriétés et méthodes

 Principales méthodes de l’objet String: Exemple sur les méthodes

toLowerCase() toUpperCase(), trim()
<!DOCTYPE html>
<html> let ch = " Bonjour, je suis un étudiant de l'isg de Tunis ";
<head> document.getElementById('h2').textContent = "on travaille sur la
chaine: " + "'" + ch +"'";
<title>Cours JavaScript</title>
document.getElementById('p1').textContent = "chaine toute en
<meta charset="utf-8">
miniscules : " + ch.toLowerCase();
<link rel="stylesheet"
document.getElementById('p2').textContent = "chaine toute en
href="chaines1.css" />
majuscules : " +ch.toUpperCase();
<script src='chaines4.js'
document.getElementById('p3').textContent = "chaine après
async></script>
élimination des espaces du début et de fin: '"+ ch.trim()+"'";
</head>
<body>
<h1>Les méthodes
toLowerCase() toUpperCase(),
trim()</h1>
<h2 id= 'h2'></h2>
<p id='p1'></p>
<p id='p2'></p>
<p id='p3'></p>
</body>
</html>
81
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript String, propriétés et méthodes

 Principales méthodes de l’objet String:

Méthode Description
concat() concatine deux ou plusieurs chaines de caractères elle peut être utilisée à la place de
l’opérateur +.
charAt () La méthode charAt () renvoie le caractère à l'index spécifié dans une chaîne. L'index du
premier caractère est 0, le second caractère est 1, et ainsi de suite.
Property Access str[i] renvoie le caractère à l'index spécifié dans une chaîne. L'index du premier
str[i] caractère est 0, le second caractère est 1, et ainsi de suite.
Cela fait ressembler les chaînes à des tableaux (mais ce n'est pas le cas)
Si aucun caractère n'est trouvé, [ ] renvoie undefined, tandis que charAt ()
renvoie une chaîne vide.
Str[] est en lecture seule. str[0] = "A" ne donne aucune erreur (mais ne
fonctionne pas!)
Si vous souhaitez utiliser une chaîne en tant que tableau, vous pouvez la convertir
en tableau. En utilisant la méthode split()
split () Convertit une chaine en tableau

82
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript String, propriétés et méthodes

 Principales méthodes de l’objet String: concat(), charAt(), ch[]

<!DOCTYPE html> let ch = "Bonjour, je suis un étudiant de l'isg de Tunis";
<html> document.getElementById('h2').textContent = "on travaille
sur la chaine: " + "'" + ch +"'";
<head>
document.getElementById('p1').textContent ="'"+
<title>Cours JavaScript</title>
ch.concat(" La meilleure école en Tunisie'")
<meta charset="utf-8">
document.getElementById('p2').textContent = "'"+
<link rel="stylesheet" href="chaines1.css" /> ch.charAt(0) + "'" + " se trouve à l'indice 0 de la chaine"
<script src='chaines5.js' async></script> document.getElementById('p3').textContent ="'"+ ch[0] +
</head> "'" + " se trouve à l'indice 0 de la chaine"

<body>
<h1>Les méthodes concat(), charAt, []</h1>
<h2 id= 'h2'></h2>
<p id='p1'></p>
<p id='p2'></p>
<p id='p3'></p>
</body>
</html>

83
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript String, propriétés et méthodes

 Principales méthodes de l’objet String: Exemple sur la méthode split()

<!DOCTYPE html> let ch = "Bonjour, je suis un étudiant, de l'isg de Tunis";

<html> document.getElementById('h2').textContent = "on travaille sur la
chaine: " + "'" + ch +"'";
<head>
<title>Cours JavaScript</title> Tab1=ch.split(",")
<meta charset="utf-8"> document.getElementById('p1').textContent ="la chaine est
transformée en tableau avec le séparateur Virgule '"+ Tab1[0] + "' "
<link rel="stylesheet" href="chaines1.css" /> +"'"+ Tab1[1] +"' "+ "'"+ Tab1[2]+"'";
<script src='chaines6.js' async></script> Tab2=ch.split("");
</head> chaine="";
<body> for(i=0; i<ch.length; i++)
<h1>La méthode split()</h1> chaine= chaine + Tab2[i] + "|" ;
<h2 id= 'h2'></h2> document.getElementById('p2').textContent ="la chaine est
<p id='p1'></p> transformée en tableau contenant chaque caractère séparément ["
+ chaine + "]";
<p id='p2'></p>
</body>
</html>

84
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript String, propriétés et méthodes

 La fonction String(object) convertit l'argument de type objet entré en

paramètre en une chaîne de caractères
<!DOCTYPE html>
<html>
<body>
<p>Click the button to convert different objects to strings.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x1 = Boolean(0);
var x2 = Boolean(1);
var x3 = new Date();
var x4 = "12345";
var x5 = 12345;
var res =
String(x1) + "<br>" +
String(x2) + "<br>" +
String(x3) + "<br>" +
String(x4) + "<br>" +
String(x5);

document.getElementById("demo").innerHTML = res;
}
</script>
</body>
</html> 85
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript Number, propriétés et méthodes

 Propriétés de l’objet Number:

La plupart des propriétés de l’objet Number sont des propriétés dites statiques.
Cela signifie qu’on ne va pouvoir les utiliser qu’avec l’objet Number en soi et non
pas avec une instance de Number() (ni donc avec une valeur primitive).
 Les propriétés MIN_VALUE et MAX_VALUE représentent respectivement les
plus petite valeur numérique positive et la plus grande valeur numérique qu’il est
possible de représenter en JavaScript ;
 Les propriétés MIN_SAFE_INTEGER et MAX_SAFE_INTEGER représentent
respectivement le plus petit et le plus grand entiers représentables correctement
ou de façon « sûre » en JavaScript. L’aspect « sûr » ici fait référence à la capacité
du JavaScript à représenter exactement ces entiers et à les comparer entre eux.
Au-delà de ces limites, les entiers différents seront jugés égaux ;
 Les propriétés NEGATIVE_INFINITY et POSITIVE_INFINITY servent
respectivement à représenter l’infini côté négatif et côté positif ;
 La propriété NaN représente une valeur qui n’est pas un nombre (« NaN » est
l’abréviation de « Not a Number ») et est équivalente à la valeur NaN.

86
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript Number, propriétés et méthodes

 Propriétés de l’objet Number:

<!DOCTYPE html> document.getElementById('p1').innerHTML =

<html> 'MIN_VALUE : ' + Number.MIN_VALUE
<head> + '<br>MAX_VALUE : ' + Number.MAX_VALUE
<title>Cours JavaScript</title> + '<br>MIN_SAFE_INTEGER : ' + Number.MIN_SAFE_INTEGER
<meta charset="utf-8"> + '<br>MAX_SAFE_INTEGER : ' + Number.MAX_SAFE_INTEGER
<link rel="stylesheet" href="chaines1.css" + '<br>NEGATIVE_INFINITY : ' + Number.NEGATIVE_INFINITY
/> + '<br>POSITIVE_INFINITY : ' + Number.POSITIVE_INFINITY
<script src='Number1.js' async></script> + '<br>NaN : ' + Number.NaN;
</head>

<body>
<h1>Propriétés de l'objet Number</h1>
<h2 id= 'h2'></h2>
<p id='p1'></p>
<p id='p2'></p>
<p id='p3'></p>
</body>
</html>

87
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript Number, propriétés et méthodes

 Méthodes de l’objet Number:

 Le constructeur Number() dispose également d’une dizaine de méthodes. La
plupart des méthodes de Number vont devoir être utilisées avec
l’objet Number en soi. Nous allons passer en revue les plus intéressantes.

Méthode Description
isFinite() La méthode isFinite() permet de déterminer si une valeur fournie
est un nombre fini.
isInteger() permet de déterminer si une valeur est un entier valide. Si la valeur
testée est bien un entier, la méthode isInteger () renverra le
booléen true. Dans le cas contraire, cette méthode renverra la
booléen false.
Notez que si la valeur testée est NaN ou l’infini, la méthode
renverra également false.
isNaN() permet de déterminer si la valeur passée en argument est la
valeur NaN (valeur qui appartient au type Number).
isSafeInteger() permet de déterminer si une valeur est un entier sûr (un entier que
le JavaScript peut représenter correctement).

88
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript Number, propriétés et méthodes

 Méthodes de l’objet Number: isFinite(), isInteger()

let nb1 = 10;
let nb2 = Number.POSITIVE_INFINITY;
let nb3 =10.36;
if(Number.isFinite(nb1)) document.getElementById('p1').textContent = 'Le nombre ' + nb1 + ' est fini';
else document.getElementById('p1').textContent = 'Le nombre ' + nb1 + ' est infini';
if(Number.isFinite(nb2)) document.getElementById('p2').textContent = 'Le nombre ' + nb2 + ' est fini';
else document.getElementById('p2').textContent = 'Le nombre ' + nb2 + ' est infini';
if(Number.isInteger(nb1)) document.getElementById('p3').textContent = 'Le nombre ' + nb1 + ' est
entier';
else document.getElementById('p3').textContent = 'Le nombre ' + nb1 + ' n\'est pas entier';
if(Number.isInteger(nb3)) document.getElementById('p4').textContent = 'Le nombre ' + nb3 + ' est
entier';
else document.getElementById('p4').textContent = 'Le nombre ' + nb3 + ' n\'est pas entier';

89
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript Number, propriétés et méthodes

 Méthodes de l’objet Number: isNaN(), isSafeInteger()

90
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript Number, propriétés et méthodes

 Méthodes de l’objet Number:

Méthode Description
parseFloat() La méthode parseFloat() permet de convertir une chaîne de caractères en un
nombre décimal. L’analyse de la chaîne s’arrête dès qu’un caractère qui n’est pas
+,-, un chiffre, un point ou un exposant est rencontré. Ce caractère et tous les
suivants vont alors être ignorés. Si le premier caractère de la chaîne ne peut pas
être converti en un nombre, parseFloat() renverra la valeur NaN
parseInt() permet de convertir une chaine de caractères en un entier selon une base et va
renvoyer ce nombre en base 10. On va lui passer deux arguments : la chaine de
caractères à convertir et la base utilisée pour la conversion.
toFixed() permet de formater un nombre en indiquant le nombre de décimales (nombre
de chiffres après la virgule) qu’on souhaite conserver. On va indiquer en
argument de cette méthode le nombre de décimales souhaitées et notre
méthode va renvoyer une chaine de caractères qui représente le nombre avec le
nombre de décimales souhaitées.
toPrecision() est relativement similaire à la méthode toFixed(). Cette méthode permet de
représenter un nombre avec un nombre de chiffre données (avec une certaine «
précision »). On va lui passer en argument le nombre de chiffres qu’on souhaite
conserver et celle-ci va renvoyer une chaine de caractères représentant notre
nombre avec le bon nombre de chiffres.
toString() permet de transformer un nombre en une chaine de caractères. On va pouvoir
lui passer une base en argument pour formater notre nombre. Elle renverra une
chaine de caractères représentant notre nombre. 91
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript Number, propriétés et méthodes

 Propriétés de l’objet Number:Number.parseFloat() Number.parseInt()

let nb1 = '41 avenue de la liberté';

let nb2 = '38.5 kilogrammes'
let nb3 = 'Bmw 520';
document.getElementById('p1').textContent ="parseFloat(" + nb1 + ") = " + Number.parseFloat(nb1);
document.getElementById('p2').textContent ="parseFloat(" + nb2 + ") = " + Number.parseFloat(nb2);
document.getElementById('p3').textContent ="parseFloat(" + nb3 + ") = " + Number.parseFloat(nb3);
document.getElementById('p4').textContent ="Number.parseInt('0F', 16) = " + Number.parseInt('0F', 16);
document.getElementById('p5').textContent ="Number.parseInt('FFF', 16)= " + Number.parseInt('FFF', 16);
document.getElementById('p6').textContent = "Number.parseInt('1000', 2)= " + Number.parseInt('1000', 2);

92
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript Number, propriétés et méthodes

 Méthodes de l’objet Number:toFixed() toPrecision() toString(16)

let nb1 = 1234.452;

let nb2 = 145;
document.getElementById('p1').textContent = nb1 + " toFixed(0) :" + nb1.toFixed(0);
document.getElementById('p2').textContent = nb1 + " toFixed(1) :" + nb1.toFixed(1);
document.getElementById('p3').textContent = nb1 + " toFixed(2) :" + nb1.toFixed(2);

document.getElementById('p4').textContent = nb1 + " toPrecision(2) :" + nb1.toPrecision(2);

document.getElementById('p5').textContent = nb1 + " toPrecision(4) :" + nb1.toPrecision(4);
document.getElementById('p6').textContent = nb1 + " toPrecision(6) :" + nb1.toPrecision(6);

document.getElementById('p7').textContent = nb2 + " toString(16) :" + nb2.toString(16);

document.getElementById('p9').textContent = nb2 + " toString(2) :" + nb2.toString(2);
document.getElementById('p9').textContent = nb2 + " typeof(toString(2)) :" + typeof(nb2.toString(2));

93
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript Math, propriétés et méthodes

 A la différence des autres objets globaux, l’objet natif Math n’est pas un constructeur. En
conséquence, toutes les propriétés et méthodes de cet objet sont statiques et vont donc
devoir être utilisées directement avec cet objet.
 L’objet Math possède une dizaine de propriétés et une trentaine de méthodes.
 Propriétés de l’objet Math: Les propriétés de l’objet Math stockent des constantes
mathématiques utiles.
 Math.E a pour valeur le nombre d’Euler (exponentiel de 1), soit environ 2,718 ;
 Math.LN2 a pour valeur le logarithme naturel (ou népérien) de 2, soit environ 0,693 ;
 Math.LN10 a pour valeur le logarithme naturel de 10, soit environ 2,302 ;
 Math.LOG2E a pour valeur le logarithme base 2 de E (exponentiel de 1), soit environ
1.44269;
 Math.LOG10E a pour valeur le logarithme base 10 de E, soit environ 0.43429 ;
 Math.PI a pour valeur pi, soit environ 3,14159 ;
 Math.SQRT1_2 a pour valeur la racine carrée de ½, soit environ 0,707 ;
 Math.SQRT2 a pour valeur la racine carrée de 2, soit environ 1,414.

94
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript Math, propriétés et méthodes

 Propriétés de l’objet Math

document.getElementById('p1').innerHTML =
'Math.E : ' + Math.E
+ '<br>Math.LN2 : ' + Math.LN2
+ '<br>Math.LN10 : ' + Math.LN10
+ '<br>Math.LOG2E : ' + Math.LOG2E
+ '<br>Math.LOG10E : ' + Math.LOG10E
+ '<br>Math.PI : ' + Math.PI
+ '<br>Math.SQRT1_2 : ' + Math.SQRT1_2
+ '<br>Math.SQRT2 : ' + Math.SQRT2;

95
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript Math, propriétés et méthodes

 Méthodes de l’objet Math: floor() ceil() round() trunc()

Méthode
L’objet Math Description
possède des méthodes qui permettent d’arrondir des nombres, de
générer des nombres
floor() aléatoires
Arrondit ou passée
la valeur encore en
deargument
calculer leà cosinus, sinus, tangente,
l’entier immédiatement
logarithme ou l’exponentielle
inférieur (ou d’un
égal)nombre.
à cette valeur.
ceil() au contraire, cette méthode va arrondir la valeur passée en
argument à l’entier immédiatement supérieur (ou égal) à cette
valeur.
round() arrondit la valeur passée en argument à l’entier le plus proche.
trunc() ignore la partie décimale d’un nombre et ne retourner que sa partie
entière.

96
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript Math, propriétés et méthodes

Méthodes de l’objet Math: floor() ceil() round() trunc()

let nb1 = 12.3456;

let nb2 = 2.45;
let nb3 = 2.54;
document.getElementById('p1').innerHTML = 'Nombre : ' + nb1 +
'<br>floor() : ' + Math.floor(nb1) + '<br>ceil() : ' + Math.ceil(nb1) +
'<br>round() : ' + Math.round(nb1) + '<br>trunc() : ' + Math.trunc(nb1);

document.getElementById('p2').innerHTML = 'Nombre : ' + nb2 +

'<br>floor() : ' + Math.floor(nb2) + '<br>ceil() : ' + Math.ceil(nb2) +
'<br>round() : ' + Math.round(nb2) + '<br>trunc() : ' + Math.trunc(nb2);

document.getElementById('p3').innerHTML = 'Nombre : ' + nb3 +

'<br>floor() : ' + Math.floor(nb3) + '<br>ceil() : ' + Math.ceil(nb3) +
'<br>round() : ' + Math.round(nb3) + '<br>trunc() : ' + Math.trunc(nb3);

97
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript Math, propriétés et méthodes

 Méthodes de l’objet Math: Math.random()

Méthode Description
random() permet de générer un nombre décimal compris entre 0 (inclus) et 1
(exclu) de manière pseudo-aléatoire.
On va ensuite pouvoir multiplier son résultat par un autre nombre
N de notre choix afin d’obtenir un nombre pseudo-aléatoire
compris dans l’intervalle [0 N[

//Renvoie un nombre décimal aléatoire entre 0 et 1 et l'affiche dans p id='p1'

document.getElementById('p1').innerHTML = " un nombre décimal aléatoire entre 0 et 1 :" +Math.random();

//renvoie un nombre entier aléatoire entre 0 et 100

document.getElementById('p2').innerHTML = "un nombre entier aléatoire entre 0 et 100 (non compris): "
+Math.round(Math.random()*100);

98
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
L’objet global JavaScript Math, propriétés et méthodes

 Méthodes de l’objet Math:

Méthode Description
min() renvoie le plus petit nombre d’une série de nombres passés en arguments.
Exemple: Math.min(50, 2.5, 5, 14);
max() La méthode au contraire, va renvoyer le plus grand nombre d’une série de
nombres passés en arguments. Exemple: Math.max(2, 75, -156);
Dans les deux cas, si l’une des valeurs fournies en argument n’est pas un
nombre et ne peut pas être convertie en nombre, alors ces méthodes
renverront la valeur NaN.
abs() renvoie la valeur absolue d’un nombre

cos(), sin(), tan(), retournent respectivement le cosinus, le sinus, la tangente, l’arc cosinus, l’arc
acos(), asin() et sinus et l’arc tangente d’une valeur passée en argument.
atan() Les valeurs passées et retournées sont exprimées en radians. Pour convertir
une valeur en radians en une valeur en degrés, il suffit de multiplier la valeur
en radians par 180 et de diviser par pi
exp() et log() renvoient respectivement l’exponentielle et le logarithme népérien (ou
logarithme naturel) d’une valeur passée en argument.

99
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array

 En JavaScript, les tableaux sont des objets qui dépendent de l’objet global Array.
 Nous allons dans la suite voir comment définir des tableaux en JavaScript. Nous
nous intéresserons ensuite aux propriétés et méthodes de l’objet Array.
 On va pouvoir stocker n’importe quel type de valeur en valeurs d’un tableau.

100
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array

Création d’un tableau en javaScript

 Déclaration de base
 Un tableau est un objet Array . Pour déclarer un tableau, il faut utiliser
l'instruction new : var tab=new Array();
La variable tab a maintenant la structure d'un tableau. Elle possède les propriétés et
les méthodes des tableaux et est prête à recevoir le contenu du tableau.
En JavaScript, comme dans la plupart des langages de programmation, le premier
élément du tableau commence à l'indice 0.
Pour alimenter le tableau avec les jours de la semaine ensuite l’afficher, on écrit le
code suivant :

var tab=new Array();

tab[0]="Lundi"; tab[1]="Mardi"; tab[2]="Mercredi"; tab[3]="Jeudi";
tab[4]="Vendredi";tab[5]="Samedi"; tab[6]="Dimanche";
// pour afficher le contenu du tableau
for(i=0;i<tab.length;i++)
Remarque Si on accède à un élément dont l'indice
document.write(tab[i]+" "); n'existe pas, JavaScript retourne undefined.
Par exemple, tab[10] n'existe pas, cet élément
vaut undefined.

101
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array

Afficher un tableau dans la console

La console du navigateur permet d'afficher un tableau directement
avec console.table(tableau) :
var tab=new Array();
tab[0]="Lundi";
tab[1]="Mardi";
tab[2]="Mercredi";
tab[3]="Jeudi";
tab[4]="Vendredi";
tab[5]="Samedi";
tab[6]="Dimanche";

// afficher le tableau dans la console

console.table(tab);

102
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array

 Déclaration accélérée
 La déclaration du tableau des jours de la semaine peut se faire plus directement
en utilisant les paramètres du constructeur Array:
var tab=new Array("Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi","Dimanche");
// afficher le tableau dans la console
console.table(tab);

103
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array

 Déclaration au format JSON

 Le format JSON permet de créer et d'alimenter les données d'un tableau encore
plus rapidement. Les crochets ouvrant et fermant définissent un tableau. Les
données sont ajoutées à l'intérieur, séparées par des virgules.

var tab=["Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi","Dimanche"];

console.table(tab);

104
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array

 Changer les indices

 Dans certains cas, un indice numérique est moins pratique ou moins explicite
qu'un indice sous forme de texte.
Par exemple, imaginons que pour chaque jour de la semaine on veut afficher le
plat du jour :
 il pourrait être intéressant d'avoir un tableau de ce type :

indice Lundi Mardi Mercredi Jeudi Vendredi Samedi Dimanche

contenu Pizza Cordon cornet lasagnes poisson tartiflette couscous

bleu escalope

105
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array
 Changer les indices
indice Lundi Mardi Mercredi Jeudi Vendredi Samedi Dimanche

contenu Pizza Cordon cornet lasagnes poisson tartiflette couscous

bleu escalope

 Ce tableau sera déclaré comme suit dans javaScript (tabPlats)

var tab=["Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi","Dimanche"];
var tabPlats=new Array();
tabPlats["Lundi"]="Pizza";
tabPlats["Mardi"]="Cordon bleu";
tabPlats["Mercredi"]="cornet escalope";
tabPlats["Jeudi"]="lasagnes";
tabPlats["Vendredi"]="poisson";
tabPlats["Samedi"]="tartiflette";
tabPlats["Dimanche"]="couscous";
//affichage dans la console
console.table(tabPlats);
//affichage sous forme de tableau html
var str = "";
str = str + "<table border=1>";
str = str + "<caption> Liste des plats </caption>";
for(i=0;i<tab.length;i++)
str = str + "<tr> <td>" + tab[i] + "</td> <td>" + tabPlats[tab[i]] + "</td> </tr>";
str = str + "</table>";
document.write(str); 106
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array
 Changer les indices
indice Lundi Mardi Mercredi Jeudi Vendredi Samedi Dimanche

contenu Pizza Cordon cornet lasagnes poisson tartiflette couscous

bleu escalope

table {border-style: none; }

td{ width:100px;
height:20px;
background-color: blue;
color:white;
border-radius: 3px;
}
caption {
background-color:rgb(55,31,120);
color:white;
font-style: bold;
font-size:22px;
}

td:first-child { background-color: rgb(101,34,24)};

}

107
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array

 Tableaux d’objets
 Il est possible d'associer à un élément de tableau un objet JavaScript complexe.
 Imaginons un tableau contenant tous les utilisateurs du site.
Un utilisateur est décrit par :
- son nom
- son mot de passe
- son droit d’accès

108
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array

 Tableaux d’objets
// une fonction constructeur qui cree un objet utilisateur
function Utilisateur(un_nom,un_pwrd,un_droit) {
this.nom=un_nom;
this.pwrd=un_pwrd;
this.droit=un_droit;
}
//on peut créer des utilisateur en faisant appel au constructeur
var sami=new Utilisateur("Sami Bouali","CA5585","administrator");
var sarra=new Utilisateur("Sarra Hammami","Sous2006","user");
var taoufik=new Utilisateur("Taoufik beji","TawTaw2021","user");
var lamia=new Utilisateur("Lamia ben Abbess","Lami325","user");

//remplissage du tableau avec les objets

var users=new Array();
users[0]=sami;
users[1]=sarra;
users[2]=taoufik;
users[3]=lamia;
//Pour accéder aux l'objets et à leurs propriétés, on utilise la notion pointée :
//affichage sous forme de tableau html
var str = "";
str = str + "<table border=1>";
str = str + "<caption> Liste des utilisateurs </caption>";
str = str + "<tr> <th> Nom et Prénom </th> <th> pwrd </th> <th>Droits d'accès </th> </tr>";
for(i=0;i<users.length;i++)
str = str + "<tr> <td>" + users[i].nom + "</td> <td>" + users[i].pwrd + "</td> <td>" + users[i].droit + "</td> </tr>";
str = str + "</table>";
document.write(str);
109
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array

 Tableaux à plusieurs dimensions

 On vient de voir qu'il est possible de créer des tableaux d'objets. Or un tableau
est aussi un objet JavaScript Array. Il est donc possible de créer des tableaux de
tableaux, ce qui correspond à des tableaux à plusieurs dimensions.
Le nombre de dimensions d'un tableau n'est pas limité;
 Si l'on ne connait pas à l'avance les éléments qui vont composer le tableau, on
peut utiliser le constructeur de la classe Array. Il prend en argument la taille du
tableau. On peut ensuite initialiser autant de dimensions que l'on souhaite avec
des boucles.

// une fonction constructeur qui cree un objet utilisateur

function Utilisateur(un_nom,un_pwrd,un_droit) {
this.nom=un_nom;
this.pwrd=un_pwrd;
this.droit=un_droit;
}

110
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array

 Tableaux à plusieurs dimensions

 Si l'on ne connait pas à l'avance les éléments qui vont composer le tableau, on
peut utiliser le constructeur de la classe Array. Il prend en argument la taille du
tableau. On peut ensuite initialiser autant de dimensions que l'on souhaite avec
des boucles.
// ce code crée un tableau à deux dimensions ayant 10 lignes et 5 colonnes
var monTableau = new Array(10);
for (var i = 0; i < 10; i++)
{
monTableau[i] = new Array(5);
}
//On affecte une valeur aléaoire à chaque case du tableau

for (var i = 0; i < 10; i++)

for (var j = 0; j < 5; j++)
monTableau[i][j] = Math.trunc(Math.random()*100);
// affichage du tableau bidimensionnel
var str= "<table border=1>";
str = str + "<caption> Tableau Bidimensionnel </caption>";
for (i = 0; i < 10; i++)
{
str=str+"<tr>";
for ( j = 0; j < 5; j++)
{str=str+ "<td>" + monTableau[i][j] + "</td>" ;}
str=str+"</tr>";
}
str=str+"</table>";
document.write(str); 111
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array

 Tableaux à plusieurs dimensions

 Exercice: écrire un programme javascript, html, CSS permettant d’afficher un
tableau bidimentionnel (10*10) contenant les nombres de 0 à 99 tels que les
nombre premiers sont affichés avec un fond bleu et une couleur blanche.

112
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array

Code HTML de la solution

<!DOCTYPE html>
<html>
<head>
<title>Cours JavaScript</title>
<meta charset="utf-8">
<link rel="stylesheet" href="arrayPrem.css" />
</head>
<body>
<h1>Tableau des nombres premiers</h1>
<script src='arrayPrem.js'></script>
</body>
</html>

113
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array
Code JavaScript de la solution
// ce code crée un tableau à deux dimensions ayant 10 lignes et 10 colonnes
var monTableau = new Array(10);
for (var i = 0; i < 10; i++)
{
monTableau[i] = new Array(10);
}
//On affecte une valeur de 0 à 99 à chaque case de la matrice
k=0;
for (var i = 0; i < 10; i++)
for (var j = 0; j < 10; j++)
{
monTableau[i][j] = k;
k++
}

114
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array
Code JavaScript de la solution
// affichage du tableau bidimensionnel
var str= "<table border=1>";
str = str + "<caption> Nombres Premiers </caption>";
for (i = 0; i < 10; i++)
{
str=str+"<tr>";
for ( j = 0; j < 10; j++)
{
if (estPremier(monTableau[i][j]))
str=str+ "<td class='premier'>" + monTableau[i][j] + "</td>" ;
else
str=str+ "<td class='nonpremier'>" + monTableau[i][j] + "</td>" ;
}
str=str+"</tr>";
}
str=str+"</table>";
document.write(str);

115
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array

Code CSS de la solution

table {
border-style: none;
}
.premier{
width:50px;
height:20px;
background-color: blue;
color:white;
border-radius: 3px;}
.nonpremier{
width:50px;
height:20px;
border-radius: 3px;}
caption {
background-color:rgb(55,31,120);
color:white;
font-style: bold;
font-size:22px; } 116
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array

 Les propriétés et les méthodes du constructeur Array()

 Le constructeur Array() ne possède que deux propriétés : la propriété length qui
retourne le nombre d’éléments d’un tableau et la propriété prototype qui est
une propriété que possèdent tous les constructeurs en JavaScript.
 Array() possède également une trentaine de méthodes. Nous allons ici étudier les
plus importantes à connaitre.

117
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array

 Les propriétés et les méthodes du constructeur Array()

Les méthodes push() et pop(): permettent au tableau de se comporter

comme une Pile.
 La méthode push() va nous permettre d’ajouter des éléments en fin de tableau
et va retourner la nouvelle taille du tableau. Nous allons passer les éléments à
ajouter en argument.
 La méthode pop() va elle nous permettre de supprimer le dernier élément d’un
tableau et va retourner l’élément supprimé.

118
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array
 Les propriétés et les méthodes du constructeur Array()
 Les méthodes push() et pop():
let animaux = ['chat', 'chien', 'lion', 'tigre'];
let ages = [15, 10, 23, 35, 42];
document.getElementById('p1').innerHTML = " animaux avant push() [" + animaux +"]";
document.getElementById('p3').innerHTML = " ages avant pop() [" + ages +"]";
/*On ajoute 3 éléments à "animaux" et on récupère la nouvelle taille du tableau
*renvoyée par push() dans une variable "taille"*/
let taille = animaux. push('loup', 'cheval', 'zèbre');
//On supprime le dernier élément de ages et on récupère l'élément supprimé dans
elemSupprime
let elemSupprime = ages.pop();
document.getElementById('p2').innerHTML = " après push le tableau contient " + taille +"
élements :["+ animaux+ "]";
document.getElementById('p4').innerHTML = " l'élement supprimé est "+ elemSupprime + " les
élements restants dans ages : [" + ages+ "]";

119
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array

 Les propriétés et les méthodes du constructeur Array()

 Les méthodes unshift() et shift()

 La méthode unshift() va nous permettre d’ajouter des éléments en début de
tableau et va retourner la nouvelle taille du tableau. Nous allons passer les
éléments à ajouter en argument.
 La méthode shift() va elle nous permettre de supprimer le premier élément d’un
tableau et va retourner l’élément supprimé.

120
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array
 Les propriétés et les méthodes du constructeur Array()
 Les méthodes unshift() et shift():
let animaux = ['chat', 'chien', 'lion', 'tigre'];
let ages = [15, 10, 23, 35, 42];
document.getElementById('p1').innerHTML = " animaux avant shift() [" + animaux +"]";
document.getElementById('p3').innerHTML = " ages avant unshift() [" + ages +"]";
/*On ajoute 2 éléments au début de "animaux" et on récupère la nouvelle taille du tableau
*renvoyée par unshift() dans une variable "taille"*/
let taille = animaux. unshift('loup', 'cheval', 'zèbre');
//On supprime le premier élément de ages et on récupère l'élément supprimé dans elemSupprime
let elemSupprime = ages.shift();
document.getElementById('p2').innerHTML = " après shift le tableau contient " + taille +" élements
:["+ animaux+ "]";
document.getElementById('p4').innerHTML = " l'élement supprimé est "+ elemSupprime + " les
éléments restants dans ages : [" + ages+ "]";

121
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array
 Les propriétés et les méthodes du constructeur Array()
 Méthode toString()
 Dans le code précedent, vous pouvez noter qu’on arrive à afficher les différentes
valeurs de notre tableau animaux dans notre paragraphe simplement
avec document.getElementById('p1').innerHTML = animaux
 Cela est dû au fait que lorsqu’un tableau doit être représenté par une valeur
texte, JavaScript appelle automatiquement la méthode toString() sur celui-ci qui
concatène les éléments du tableau et renvoie une chaîne de caractères contenant
chacun des éléments, séparés par des virgules.

122
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array
 Les propriétés et les méthodes du constructeur Array()
 La méthode splice()
 Permet d’ajouter, de supprimer ou de remplacer des éléments n’importe où dans
un tableau.
 La méthode splice() va pouvoir prendre trois arguments : une position de
départ à partir d’où commencer le changement, le nombre d’éléments à
remplacer et finalement les éléments à ajouter au tableau.
 En précisant une position négative, les changements seront faits en comptant à
partir de la fin :
 Si on précise 0 en nombre d’éléments à remplacer, alors aucun élément ne sera
supprimé du tableau de base. Dans ce cas, il sera nécessaire de préciser des
éléments à rajouter.
 Enfin, si on ne précise pas d’éléments à rajouter au tableau, le nombre d’éléments
à remplacer tel que précisé en deuxième argument seront supprimés du tableau
à partir de la position indiquée en premier argument.
 Cette méthode va également retourner un tableau contenant les éléments
supprimés.

123
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array
 Les propriétés et les méthodes du constructeur Array()
 La méthode splice()
let animaux = ['chat', :
 'chien', 'lion', 'tigre'];
let ages = [15, 10, 23, 35, 42];
document.getElementById('p1').innerHTML = " animaux avant splice(2, 0, 'pandas', 'lièvre') [" + animaux +"]";
document.getElementById('p3').innerHTML = " ages avant splice(1, 2, 100) [" + ages +"]";
/*On insère 'pandas' et 'lièvre' dans le tableau animaux, après le deuxième élément
*(chien) et sans supprimer d'éléments*/
animaux.splice(2, 0, 'pandas', 'lièvre');
/*On supprime les deux éléments après le premier ( c'est à dire 10 et 23) et on insère 100 après le premier élément
(15) */
let del = ages.splice(1, 2, 100);
document.getElementById('p2').innerHTML = " animaux après splice(2, 0, 'pandas', 'lièvre') [" + animaux + "]";
document.getElementById('p4').innerHTML = " ages après splice(1, 2, 100) [" + ages + "]";
document.getElementById('p5').innerHTML = '"' + del + '" supprimé de ages';

124
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array
 Les propriétés et les méthodes du constructeur Array()
 La méthode join()
 retourne une chaine de caractères créée en concaténant les différentes valeurs
d’un tableau. Le séparateur utilisé par défaut sera la virgule mais nous allons
également pouvoir passer le séparateur de notre choix en argument de join().

let animaux = ['chat', 'chien', 'lion', 'tigre'];

let ages = [15, 10, 23, 35, 42];
document.getElementById('p1').innerHTML = "animaux :[" + animaux.join('-') + "]";
document.getElementById('p2').innerHTML = " ages : [" + ages.join('/') + "]" ;
document.getElementById('p3').innerHTML = " ages : [" + ages.join('|') + "]" ;

125
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array
 Les propriétés et les méthodes du constructeur Array()
 La méthode slice()
 La méthode slice() renvoie un tableau créé en découpant un tableau de départ.
 Cette méthode va prendre en premier argument facultatif la position de départ
où doit commencer la découpe de notre tableau de départ. Si la position passée
est un nombre négatif, alors le début de la découpe sera calculé à partir de la fin
du tableau de départ. Si aucune position de départ n’est passée, la découpe
commencera depuis le début du tableau de départ.
 On va également pouvoir lui passer en second argument facultatif la position où
doit s’arrêter la découpe du tableau de départ. Si la position passée est un
nombre négatif, alors la fin de la découpe sera calculé à partir de la fin du tableau
de départ. Si aucune position de fin n’est passée, alors on récupèrera le tableau
de départ jusqu’à la fin pour créer notre nouveau tableau.

126
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array
 Les propriétés et les méthodes du constructeur Array()
 La méthode slice()
let animaux = ['chat', :
 'chien', 'lion', 'tigre'];
let ages = [15, 10, 23, 35, 42,52,66];
document.getElementById('p1').innerHTML = " animaux avant slice() [" + animaux +"]";
document.getElementById('p2').innerHTML = " ages avant slice() [" + ages +"]";
//appel à slice à partir de l'indice 1 jusqu'à l'indice 3
let sliceAnimaux = animaux.slice(1, 3);
//appel à slice à partir de l'indice 2 jusqu'à la fin
let sliceAges = ages.slice(2);
//appel à slice sans position début ni fin retourne tout le tableau
let sliceAges1 = ages.slice();
//appel à slice à partir de la position 4 en comptant à partir de la fin jusqu'a
// la position 2 en comptant à partir de la fin.
let sliceAges2 = ages.slice(-4,-2);
//appel à slice à partir de la position 4 en comptant à partir de la fin jusqu'a la fin du tableau
let sliceAges3 = ages.slice(-4);

127
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array
 Les propriétés et les méthodes du constructeur Array()
 La méthode slice()
 :
document.getElementById('p3').innerHTML = " animaux.slice(1, 3) " + sliceAnimaux.join(' - ');
document.getElementById('p4').innerHTML = "ages.slice(2) " + sliceAges.join(' / ');
document.getElementById('p5').innerHTML = "ages.slice() " + sliceAges1.join(' | ');
document.getElementById('p6').innerHTML = "ages.slice(-4,-2) " + sliceAges2.join(' | ');
document.getElementById('p6').innerHTML = "ages.slice(-4) " + sliceAges3.join(' | ');

128
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array
 Les propriétés et les méthodes du constructeur Array()
 La méthode concat()
 La méthode concat() va nous permettre de fusionner différents tableaux entre
eux pour en créer un nouveau qu’elle va renvoyer.
 Cette méthode va prendre en arguments les tableaux que l’on souhaite
concaténer à un premier tableau de départ qu’on a choisi.
 On peut fusionner autant de tableaux que l’on veut entre eux. Les tableaux de
départ ne sont pas modifiés.
let animaux = ['chat', 'chien', 'lion', 'tigre'];
let ages = [15, 10, 23, 35, 42,52,66];
let couleurs = ['jaune','rouge', 'vert', 'bleu', 'rose']
document.getElementById('p1').innerHTML = " animaux [" + animaux +"]";
document.getElementById('p2').innerHTML = " ages [" + ages +"]";
document.getElementById('p3').innerHTML = " couleurs [" + ages +"]";
let tabFusion = animaux.concat(ages, couleurs);
document.getElementById('p4').innerHTML = "fusion des 3 tableaux :[" + tabFusion.join ('-') + "]";

129
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array
 Les propriétés et les méthodes du constructeur Array()
 La méthode includes()
 La méthode includes() permet de déterminer si un tableau contient une valeur
qu’on va passer en argument. Si c’est le cas, includes() renvoie true. Dans le cas
contraire, cette méthode renvoie false.
 Cette méthode est sensible à la casse (une majuscule est considérée comme une
entité différente d’une minuscule).
let animaux = ['chat', 'chien', 'lion', 'tigre'];
document.getElementById('p1').innerHTML = "contenu du tableau : ["+ animaux + "]";
if(animaux.includes('lion'))
document.getElementById('p2').innerHTML = " 'lion' est dans le tableau";
else document.getElementById('p2').innerHTML = " 'lion' n'est pas dans le tableau";
if(animaux.includes('Lion'))
document.getElementById('p3').innerHTML = "'Lion' est dans le tableau";
else document.getElementById('p3').innerHTML = " 'Lion' n'est pas dans le tableau";

130
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array
 Les propriétés et les méthodes du constructeur Array()
 Le tri de tableaux méthodes sort() et reverse()
 La méthode sort() trie le tableau par ordre croissant ou selon une fonction
définie par l’utilisateur
 La méthode reverse() inverse l'ordre du tableau.
 Utilisons notre tableau des mois de l'année et trions le par ordre alphabétique
avec sort()

131
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array
 Les propriétés et les méthodes du constructeur Array()
 Le tri de tableaux méthodes sort() et reverse()
var
mois=["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"];
document.write("Affichage du tableau avant le tri :<br>");
document.write(mois.join(", "));
/* Tri du tableau */
mois.sort();
//mois.sort() ne retourne pas de résultat. C'est le tableau mois sur lequel est appliquée la méthode qui est trié.
document.write("<hr>Affichage du tableau trié :<br>");
document.write(mois.join(", "));
/* Inversion du tableau */
mois.reverse();
document.write("<hr>Affichage du tableau inversé :<br>");
document.write(mois.join(", "));

132
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array
 Les propriétés et les méthodes du constructeur Array()
 Le tri de tableaux méthodes sort() avec méthode de Tri
spécifique
 Nous venons de voir comment trier un tableau contenant des éléments
simples comme des nombres ou des chaînes. Il est aussi possible de trier
un tableau avec sa propre fonction de tri.
 Voyons comment trier notre tableau tousMesAnimaux par âge:

133
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array
 Les propriétés et les méthodes du constructeur Array()
 Le tri de tableaux méthodes sort() avec méthode de Tri
spécifique et parcours avec la méthode forEach()
function Animal(un_nom,une_espece,un_age) { this.nom=un_nom; this.espece=une_espece; this.age=un_age; }
var milou=new Animal("Milou","Chien","4");
var titi=new Animal("Titi","Oiseau","1");
var rominet=new Animal("Rominet","Chat","2");
var nemo=new Animal("Nemo","Poisson","6");
var dumbo=new Animal("Dumbo","chien","20");
var kingKong=new Animal("KingKong","gorille","50");
var animaux=new Array();
animaux[0]=milou; animaux[1]=titi; animaux[2]=rominet; animaux[3]=nemo; animaux[4]=dumbo;
animaux[5]=kingKong;
animaux.sort(function (a, b) { return a.age - b.age; });
animaux.forEach(function(animal) { document.write("Mon "+animal.espece+" "+animal.nom+" a "+animal.age+"
an(s).<br>"); });

Le script appelle la méthode sort()qui utilise une fonction

personnalisée avec 2 paramètres de comparaison.
L'appel à forEach() exécute pour chaque élément du
tableau une fonction personnalisée d'affichage de l'animal
parcouru. On voit que le tableau est trié par âge de
l'animal. 134
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array
 Les propriétés et les méthodes du constructeur Array()
 array.forEach(function(currentValue, index, arr)) appelle une
fonction pour chaque élément d'un tableau, dans l'ordre.
 CurrentValue: obligatoire ; la valeur de l'élément courant
 Index: optionnel ; l'indice de l'élément courant
 arr: optionnel; l'objet Array auquel appartient l'élement

<!DOCTYPE html>
<html>
<body>
<p>For each element in the array: multiply the value with 10 and update the element value:</p>
<p id="demo"></p>
<script>
var numbers = [65, 44, 12, 4];
numbers.forEach(myFunction);
function myFunction(item, index, arr) {
arr[index] = item * 10; }
document.getElementById("demo").innerHTML = numbers; </script>
</body> </html>

135
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les tableaux en JavaScript et l’objet global Array
 Les propriétés et les méthodes du constructeur Array()
 array.forEach(function(currentValue, index, arr)) appelle une
fonction pour chaque élément d'un tableau, dans l'ordre.
 CurrentValue: obligatoire ; la valeur de l'élément courant
 Index: optionnel ; l'indice de l'élément courant
 arr: optionnel; l'objet array auquel appartient l'élément

<!DOCTYPE html>
<html>
<body>
<p>List all array items, with keys and values:</p>
<p id="demo"></p>
<script>
var fruits = ["apple", "orange", "cherry"];
fruits.forEach(myFunction);
function myFunction(item, index) {
document.getElementById("demo").innerHTML += index + ":" + item + "<br>";
}</script>
</body></html>

136
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les dates en JavaScript et l’objet global Date

 l’objet Date permet de créer et de manipuler des dates grâce à ses méthodes.
 Les propriétés et les méthodes du constructeur Date()
Récupérer la date actuelle :
 Pour récupérer la date actuelle sous forme littérale, on va 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
statique now() du constructeur Date.
let date1 = Date();
let date2 = Date.now();
doument.getElementById('p1').innerHTML = date1;
document.getElementById('p2').innerHTML = date2;

 la forme littérale est difficilement exploitable telle quelle pour nous car celle-ci
suit les normes anglo-saxonnes. Nous allons voir comment afficher nos dates
137
avec un format local dans la suite de cette leçon.
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les dates en JavaScript et l’objet global Date

 Les propriétés et les méthodes du constructeur Date()

Créer un objet de type date
 Pour créer et manipuler une date particulière, nous allons devoir créer un objet de
type date. Pour créer un objet de type date, nous allons utiliser le
constructeur Date() avec donc le mot clef new.
 On va pouvoir instancier notre constructeur Date() de différentes manières pour
créer une date.
1. On peut déjà instancier Date() sans lui passer d’argument, auquel cas le
constructeur va créer un objet date contenant la date actuelle complète en
fonction de l’heure locale du système. let date1 = new Date();
2. Fournir une date littérale en anglais selon une norme ISO 8601 en argument de
Date() exemple let date2 = new Date('March 23, 2019 20:00:00');
3. fournir une date sous forme de millisecondes écoulées depuis le 1er janvier 1970
à Date() pour qu’il crée un objet avec la date demandée. let date3 = new
Date(1553466000000);

138
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les dates en JavaScript et l’objet global Date

 Les propriétés et les méthodes du constructeur Date()

Créer un objet de type date
4. On va pouvoir passer une suite de nombres à notre constructeur pour qu’il crée un
objet date morceau par morceau. Ces nombres représentent, dans l’ordre :
 L’année (argument obligatoire) de la date qu’on souhaite créer ;
 Le numéro du mois (argument obligatoire) de la date qu’on souhaite créer, entre 0 (pour
janvier) et 11 (pour décembre) ;
 Le numéro du jour du mois (facultatif) de la date qu’on souhaite créer, entre 1 et 31 ;
 L’heure (facultatif) de la date qu’on souhaite créer, entre 0 et 23 ;
 Le nombre de minutes (facultatif) de la date qu’on souhaite créer, entre 0 et 59 ;
 Le nombre de secondes (facultatif) de la date qu’on souhaite créer, entre 0 et 59 ;
 Le nombre de millisecondes (facultatif) de la date qu’on souhaite créer, entre 0 et 999.

let date1 = new Date();

let date2 = new Date('March 23, 2019 20:00:00');
let date3 = new Date(1553466000000);
let date4 = new Date(2020,7,23,16,50);
document.getElementById('p1').innerHTML =
'Date 1 : ' + date1 + '<br>Date 2 : ' + date2 +
'<br>Date 3 : ' + date3 + '<br>Date4 : ' + date4;
139
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les dates en JavaScript et l’objet global Date

 Les propriétés et les méthodes du constructeur Date()

Les méthodes getters et setters de l’objet Date
L’objet Date possède de nombreuses méthodes qu’on peut classer en différents groupes :
les méthodes qui vont nous permettre d’obtenir une date, celles qui vont permettre de
définir une date, celles qui vont permettre de formater une date, etc.
Les getters de l’objet Date
L’objet Date va posséder différentes méthodes getters qui vont chacune nous permettre
de récupérer un composant d’une date (année, mois, jour, heure, etc.). Les getters
suivants vont renvoyer un composant de date selon l’heure locale :
 getDay() renvoie le jour de la semaine sous forme de chiffre (avec 0 pour dimanche, 1 pour lundi
et 6 pour samedi)
 getDate() renvoie le jour du mois en chiffres pour la date spécifiée selon l’heure locale ;
 getMonth() renvoie le numéro du mois de l’année (avec 0 pour janvier, 1 pour février, 11 pour
décembre) pour la date spécifiée selon l’heure locale ;
 getFullYear() renvoie l’année en 4 chiffres pour la date spécifiée selon l’heure locale ;
 getHours() renvoie l’heure en chiffres pour la date spécifiée selon l’heure locale ;
 getMinutes() renvoie les minutes en chiffres pour la date spécifiée selon l’heure locale ;
 getSeconds() renvoie les secondes en chiffres pour la date spécifiée selon l’heure locale ;
 getMilliseconds() renvoie les millisecondes en chiffres pour la date spécifiée selon l’heure
locale.
140
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les dates en JavaScript et l’objet global Date

 Les propriétés et les méthodes du constructeur Date()

Les méthodes getters et setters de l’objet Date
L’objet Date possède de nombreuses méthodes qu’on peut classer en différents groupes :
les méthodes qui vont nous permettre d’obtenir une date, celles qui vont permettre de
définir une date, celles qui vont permettre de formater une date, etc.
Les getters de l’objet Date
L’objet Date nous fournit également des getters équivalents qui vont cette fois-ci
renvoyer un composant de date selon l’heure UTC (coordinated universal time) et
qui sont les suivants :
 getUTCDay() renvoie le jour de la semaine sous forme de chiffre (avec 0 pour dimanche, 1
pour lundi et 6 pour samedi) pour la date spécifiée selon l’heure UTC ;
 getUTCDate() renvoie le jour du mois en chiffres pour la date spécifiée selon l’heure UTC ;
 getUTCMonth() renvoie le numéro du mois de l’année (avec 0 pour janvier, 1 pour février, 11
pour décembre) pour la date spécifiée selon l’heure UTC ;
 getUTCFullYear() renvoie l’année en 4 chiffres pour la date spécifiée selon l’heure UTC ;
 getUTCHours() renvoie l’heure en chiffres pour la date spécifiée selon l’heure UTC ;
 getUTCMinutes() renvoie les minutes en chiffres pour la date spécifiée selon l’heure UTC ;
 getUTCSeconds() renvoie les secondes en chiffres pour la date spécifiée selon l’heure UTC ;
 getUTCMilliseconds() renvoie les millisecondes en chiffres pour la date spécifiée selon l’heure
UTC.
141
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les dates en JavaScript et l’objet global Date

 Les propriétés et les méthodes du constructeur Date()

Les méthodes getters et setters de l’objet Date
Les getters de l’objet Date
let date1 = new Date(2021, 3, 2, 12, 30, 15); document.getElementById('p1').innerHTML =
'Date : ' + date1 +
let jourSemaine = date1.getDay(); '<br>Jour de la semaine : ' + jourSemaine +
let jourMois = date1.getDate(); '<br>Jour du mois : ' + jourMois +
let mois = date1.getMonth(); '<br>Numéro du mois : ' + mois +
let annee = date1.getFullYear(); '<br>Année : ' + annee +
let heures = date1.getHours(); '<br>Heures : ' + heures + ' (heure UTC : ' +
let heuresUTC = date1.getUTCHours(); heuresUTC + ')' +

let minutes = date1.getMinutes(); '<br>Minutes : ' + minutes +

let secondes = date1.getSeconds(); '<br>Secondes : ' + secondes +

let ms = date1.getMilliseconds(); '<br>Millisecondes : ' + ms;

142
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les dates en JavaScript et l’objet global Date

 Les propriétés et les méthodes du constructeur Date()

Les méthodes getters et setters de l’objet Date
Les setters de l’objet Date Les setters de l’objet Date vont nous permettre de
définir (ou de modifier) des composants de dates pour une date donnée. Ces setters
vont correspondre exactement aux getters vus précédemment:
 setDate() et setUTCDate() définissent le jour du mois en chiffres pour la date
spécifiée selon l’heure locale ou l’heure UTC
 setMonth() et setUTCMonth() définissent le numéro du mois de l’année (avec 0
pour janvier, 1 pour février, 11 pour décembre) pour la date spécifiée selon l’heure
locale ou l’heure UTC ;
 setFullYear() et setUTCFullYear() définissent l’année en 4 chiffres pour la date
spécifiée selon l’heure locale ou l’heure UTC ;
 setHours() et setUTCHours () définissent l’heure en chiffres pour la date
spécifiée selon l’heure locale ou l’heure UTC ;
 setMinutes() et setUTCMinutes() définissent les minutes en chiffres pour la date
spécifiée selon l’heure locale ou l’heure UTC;
 setSeconds() et setUTCSeconds() définissent les secondes en chiffres pour la
date spécifiée selon l’heure locale ou l’heure UTC
 setMilliseconds() et setUTCMilliseconds() définissent les millisecondes en
chiffres pour la date spécifiée selon l’heure locale ou l’heure UTC. 143
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les dates en JavaScript et l’objet global Date

 Les propriétés et les méthodes du constructeur Date()

Les méthodes getters et setters de l’objet Date
Les Setters de l’objet Date
//On crée une date
let date1 = new Date(2021, 0, 25, 12, 30, 15);
document.getElementById('p1').innerHTML = 'Date avant modification : ' + date1;
//On modifie la date
date1.setDate(31);
date1.setMonth(2);
date1.setFullYear(2022);
date1.setHours(10);
date1.setMinutes(0);
date1.setSeconds(0);
date1.setMilliseconds(0);
//on affiche la date modifiée
document.getElementById('p2').innerHTML = 'Date après modification : ' + date1 ;

144
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les dates en JavaScript et l’objet global Date
Les propriétés et les méthodes du constructeur Date()
Convertir une date au format local L’objet Date dispose également de
méthodes nous permettant de convertir un format de date en un format local.
Ces méthodes vont notamment nous permettre de :
1. afficher les éléments de date dans un ordre local (jour puis mois puis année par
exemple)
2. afficher une heure selon un format 12 heures ou 24 heures.
3. traduire des dates littérales anglaises dans la langue locale.
Pour faire cela, on va pouvoir utiliser les méthodes suivantes :
 toLocaleDateString() renvoie la partie « jour-mois-année » d’une date, formatée
en fonction d’une locale et d’options.
 toLocaleTimeString() renvoie la partie « heures-minutes-secondes » d’une date,
formatée en fonction d’une locale et d’options.
 toLocaleString() renvoie la date complète, formatée en fonction d’une locale et
d’options.
 Ces trois méthodes vont donc pouvoir prendre deux arguments : un premier
argument qui est une locale et un second qui correspond à des options.
 La locale sert à définir la langue dans laquelle la date doit être formatée. Pour la
Tunisie on utilisera ‘ar-TN’ (Arabic (Tunisia)) pour la France, on utilisera ’fr-FR’.
(pour la liste des locales consulter http://www.lingoes.net/en/translator/langcode.htm)
145
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les dates en JavaScript et l’objet global Date
Convertir une date au format local
 Les options vont permettre de modifier le comportement par défaut de nos méthodes
et notamment d’expliciter si on souhaite que la date passée soit renvoyée sous forme
de chiffres ou sous forme littérale. Les options qui vont particulièrement nous
intéresser vont être les suivantes :
 weekday qui représente le jour de la semaine. Les valeurs possibles sont « narrow »,
« short » et « long » ;
 day qui représente le jour du mois. Les valeurs possibles sont numeric et 2-digit ;
 month qui représente le mois. Les valeurs possibles sont numeric et 2-digit ;
 year qui représente l’année. Les valeurs possibles sont numeric et 2-digit ;
 hour qui représente l’heure. Les valeurs possibles sont numeric et 2-digit ;
 hour12 qui prend la valeur true pour un affichage 12h et false pour un affichage 24h
 minute qui représente les minutes. Les valeurs possibles sont numeric et 2-digit ;
 second qui représente les secondes. Les valeur possibles sont numeric et 2-digit.

146
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les dates en JavaScript et l’objet global Date

Les propriétés et les méthodes du constructeur Date()

Convertir une date au format local
A noter que les navigateurs sont obligés de supporter à minima les ensembles suivants. Si vous utilisez
une autre combinaison, celle-ci pourra ne pas être supportée :
 weekday, year, month, day, hour, minute, second ;
 weekday, year, month, day ;
 year, month, day ;
 year, month ;
 month, day ;
 hour, minute, second ;
 hour, minute.

147
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les dates en JavaScript et l’objet global Date

Les propriétés et les méthodes du constructeur Date()

Convertir une date au format local

let date1 = new Date();

let dateLocale = date1.toLocaleString('fr-FR',{

weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute:
'numeric', second: 'numeric', hour12:true});
document.getElementById('p1').innerHTML = 'Date : ' + dateLocale;

dateLocale = date1.toLocaleString('fr-FR',{ weekday: 'narrow', year: '2-digit', month: '2-digit',

day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit'});
document.getElementById('p2').innerHTML = 'Date : ' + dateLocale;

148
objets prédéfinis en JavaScript (objets natifs des objets « globaux ».)
Les dates en JavaScript et l’objet global Date

Les propriétés et les méthodes du constructeur Date()

Convertir une date au format local (heure en arabe)

let date1 = new Date();

let dateLocale = date1.toLocaleString('ar-TN', { weekday: 'long', year: 'numeric', month: 'long',

day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12:false});

document.getElementById('p1').innerHTML = 'Date : ' + dateLocale;

dateLocale = date1.toLocaleString('ar-TN',{ weekday: 'narrow', year: '2-digit', month: '2-digit',

day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit'});
document.getElementById('p2').innerHTML = 'Date : ' + dateLocale;

149
Document Object Model (DOM)

Introduction
 Quand une page Web est chargée, le navigateur crée un modèle objet de document
(Document Object Model) de la page. Le modèle DOM HTML est construit comme un
arbre d'objets.

150
Document Object Model (DOM)

Qu’est-ce que le DOM ?

 Le DOM est une interface de programmation pour des documents HTML ou XML
qui représente le document (la page web actuelle) sous une forme qui permet aux
langages de script comme le JavaScript d’y accéder et d’en manipuler le contenu et
les styles.
 Le DOM est ainsi une représentation structurée du document sous forme
«d’arbre» crée automatiquement par le navigateur. Chaque branche de cet arbre se
termine par ce qu’on appelle un nœud qui va contenir des objets. On va finalement
pouvoir utiliser ces objets, leurs propriétés et leurs méthodes en JavaScript.
 Le DOM est un standard W3C (World Wide Web Consortium). Il définit une
norme pour l'accès aux documents, La norme DOM W3C est séparée en trois
parties distinctes :
 Noyau DOM - modèle standard pour tous les types de documents
 DOM XML - modèle standard pour les documents XML
 DOM HTML - modèle standard pour les documents HTML

151
Document Object Model (DOM)

Qu’est-ce que le DOM de HTML?

Le code HTML DOM est une interface de programmation objet et un modèle standard
pour HTML. Il définit :
 Les éléments HTML comme des objets
 Les propriétés de l'ensemble des éléments HTML
 Les méthodes pour accéder à tous les éléments HTML
 Les événements pour tous les éléments HTML
En d'autres termes : Le DOM HTML est un standard pour savoir comment obtenir,
modifier, ajouter ou supprimer des éléments HTML

152
Document Object Model (DOM)
 Avec le modèle objet, JavaScript obtient toute la puissance dont il a besoin pour
créer HTML dynamique :
 JavaScript peut changer tous les éléments HTML dans la page
 JavaScript peut changer tous les attributs HTML dans la page
 JavaScript peut changer tous les styles CSS dans la page
 JavaScript peut supprimer des éléments et attributs HTML existants
 JavaScript peut ajouter de nouveaux éléments et attributs HTML
 JavaScript peut réagir à tous les événements de HTML existants dans la page
 JavaScript peut créer de nouveaux événements HTML dans la page

153
Document Object Model (DOM)

L'interface de programmation DOM

L'interface de programmation est les propriétés et méthodes de chaque objet.
 Une propriété est une valeur qu’on peut obtenir ou définir (comme changer le contenu d'un
élément HTML).
 Une méthode est une action qu’on peut exécuter(comme ajouter ou de supprimer un élément
HTML)
<html>
Exemple <body>
<p id="intro">Hello World!</p>
<script>
let txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>
</body>
</html>
 Dans l'exemple ci-dessus, getElementById est une méthode, tandis qu’innerHTML est une
propriété.
 la méthode utilisée getElementById("intro") pour trouver l'élément dont l’id est « intro ».
 La propriété innerHTML est utile pour obtenir ou remplacer le contenu des
éléments HTML.
154
Document Object Model (DOM)

Accès aux données d’un Formulaire

Nous allons prendre l'exemple du formulaire ci-dessous afin d'illustrer l'accès aux champs pour lire
les données ou pour les modifier. Ce formulaire est nommé "formCV"
<form name="formCV" method="post" action="traitement.php">

155
Document Object Model (DOM)

Accès aux textes contenus dans les champs

Les éléments de formulaire concernés sont :
 Les boîtes de saisie de texte, nombre, email, recherche … (INPUT type="text",
"number", "research", …)
 Les zones saisies de textes sur plusieurs lignes (TEXTAREA)
 Les boîtes de saisie masquées (INPUT type="password")
 Les boîtes de soumission de fichier (INPUT type="file")
 Les données masquées (INPUT type="hidden")

156
Document Object Model (DOM)

Accès aux textes contenus dans les champs

Lecture
document.getElementById(identifiant_element).value
Ou bien
document.nom_formulaire.nom_element.value

Ecriture
document.getElementById(identifiant_element).value = texte
Ou bien
document.nom_formulaire.nom_element.value = texte

157
Document Object Model (DOM)

Accès aux textes contenus dans les champs

 Exemple 1 : pour la boîte de saisie de texte

// Code HTML dans l'élément FORM

<input type="text" name="nom" id="nom" placeholder="nom et prénom" size="30" maxlength="40">
// Instruction JavaScript pour lire
var nomPrenom = document.getElementById('nom').value;

// ou bien var nomPrenom = document.formCV.nom.value;

// nomPrenom prend dans l'exemple la valeur ‘Moez Hammami’

158
Document Object Model (DOM)

Accès aux textes contenus dans les champs

 Exemple 2 : exemple pour la soumission de fichier

// Code HTML dans l'élément FORM

Attachez-un CV : <input type="file" name="fichier" id="fichier">
// Instruction JavaScript pour lire
let fichierCV = document.getElementById("fichier").value;

// ou bien var nomPrenom = document.formCV.fichier.value;

// fichierCV prend dans l'exemple la valeur ‘C:\fakepath\cv.docx’ // pour cacher la structure des fichiers du client

159
Document Object Model (DOM)

Accès aux textes contenus dans les champs

 Exemple 3 : La saisie de textes sur plusieurs lignes

// Code HTML dans l'élément FORM

<textarea name="adresse" id="adresse" rows="5" cols = "30"> </textarea>
// Instruction JavaScript pour écrire du texte
document.getElementById("adresse").value = " Veuillez saisir une adresse valide" ;
// ou bien var nomPrenom = document.formCV.adresse.value = " Veuillez saisir une adresse valide" ;

160
Document Object Model (DOM)

Accès aux choix cochés par le client

Les éléments de formulaire concernés sont :
 Les boutons radio (INPUT type="radio")
 Les cases à cocher (INPUT type="checkbox")
Il s’agit de rechercher les boites cochées et afficher leur valeur

document.getElementById(identifiant_element).checked
// Retourne une valeur true/false

document.getElementById(identifiant_element).value
// Retourne le nom donné à la boîte

161
Document Object Model (DOM)
 Accès aux choix cochés par le client
 Exemple 1 : Pour les boutons radio
//Code HTML dans l’élément Form
<input type="radio" name="etatCivil" value="celibataire" id="celibataire" />
<label for="celibataire">célibataire</label><br>
<input type="radio" name="etatCivil" value="marié" id="marie" />
<label for="marie">marié</label><br>
<input type="radio" name="etatCivil" value="divorcé" id="divorce" />
<label for="divorce">divorcé</label><br>
<input type="radio" name="etatCivil" value="veuf" id="veuf" />
<label for="veuf">veuf</label><br>

// Instruction JavaScript pour rechercher qui est coché (un seul)

let listeR = document.getElementsByName('etatCivil');
// ou bien let listeR = document.formCV.etatCivil;
let etatCivil="";
for (let i = 0; i < listeR.length; i++) {
if (listeR[i].checked)
etatCivil = listeR[i].value;
} // état civil contient la chaine "marié"
// On peut utiliser une seule ligne pour récupérer l’option sélectionnée
// on utilise la méthode querySelector() (qui renvoie le premier élément qui correspond à un ou
plusieurs sélecteurs CSS spécifiés dans le document.)
etatCivil = document.querySelector('input[name=etatCivil]:checked').value; 162
//voir la partie pseudo-classes dans les sélecteurs CSS (slide 37 cours CSS)
Document Object Model (DOM)
 Cocher ou décocher un choix
 Exemple 2 : pour les boîtes à cocher
//Code HTML dans l’élément Form
<input type="checkbox" name="diplomes" value="licence" id="licence" />
<label for="licence">Licence</label><br>
<input type="checkbox" name="diplomes" value="maîtrise" id="maitrise" />
<label for="maitrise">Maîtrise</label><br>
<input type="checkbox" name="diplomes" value="mastère" id="mastere"/>
<label for="mastere">Mastere</label><br>
<input type="checkbox" name="diplomes" value="doctorat" id=" doctorat" />
<label for="doctorat">Doctorat</label>

// Instruction JavaScript pour rechercher qui est coché (0 ou plusieurs)

let listeCHK = document.getElementsByName('diplomes');
// ou bien let listeCHK = document.formCV.diplomes;

let listeDiplomes = "";

for (let i = 0; i < listeCHK.length; i++) {
if (listeCHK[i].checked)
listeDiplomes += listeCHK[i].value + ' ';
}
// listeDiplomes contient "Maîtrise Mastere Doctorat"

163
Document Object Model (DOM)
 Cocher ou décocher un choix
document.getElementById(identifiant_element).checked = true/false

 Exemple 3.1 : pour décocher un choix dans les boîtes à cocher

document.getElementById("doctorat").checked = false;

 Exemple 3.2 : Instruction JavaScript qui décoche ce qui est coché et coche ce qui ne l'est pas

let listeCHK = document.getElementsByName('diplomes');

for (i = 0; i < listeCHK.length; i++) {
if (listeCHK[i].checked) {
listeCHK[i].checked = false;
}else {
listeCHK[i].checked = true;
}
}

164
Document Object Model (DOM)
 Accès aux choix dans les listes de choix element select
Lire Les choix
document.getElementById(identifiant_element)[num_element].selected
// Retourne une valeur true/false
document.getElementById(identifiant_element)[num_element].value
// Retourne le nom donné au choix
document.getElementById(identifiant_element).length
// Retourne le nombre de choix possibles dans la liste
document.getElementById(identifiant_element)[num_element].text
// Retourne le texte HTML associé

 Exemple 4 :
Document Object Model (DOM)
 Accès aux choix dans les listes de choix element select
Lire Les choix
 Exemple 4 : pour une liste à choix multiple (qui fonctionne pour le choix unique également)

// Code HTML dans l'élément FORM

<select name="competences" id="competences" multiple>
<optgroup label="Langues">
<option value="arabe">arabe </option>
<option value="Français">Français</option>
<option value="Anglais">Anglais</option>
/optgroup>
<optgroup label="programmation web">
<option value="HTML5">HTML5 </option>
<option value="CSS3">CCS3</option>
<option value="JavaScript">JavaScript</option>
<option value="PHP5">PHP5</option>
</optgroup>
</select>
Document Object Model (DOM)
 Accès aux choix dans les listes de choix element select
Lire Les choix
 Exemple 4 : pour une liste à choix multiple (qui fonctionne pour le choix unique également)

// Instruction JavaScript pour extraire les choix sélectionnés par l'utilisateur

let select = document.getElementById('competences');
listeComp = "";
listeCompText="";
for (let i=0; i<select.length; i++) {
if (select[i].selected) {
listeComp += select[i].value + ' ';
// value pour récupérer la valeur
listeCompText += ' (Texte HTML : ' + select[i].text + ')'; }
// text pour récupérer le texte affiché
}

alert("liste des Valeurs :" + listeComp + " Liste de textes " + listeCompText);
Document Object Model (DOM)
 Accès aux choix dans les listes de choix element select
Lire Les choix
Pour les listes à choix unique il est possible d'obtenir directement quel est le
choix sélectionné avec :
document.getElementById(identifiant_element).selectedIndex

 Exemple 5 : pour une liste à choix unique

// Code HTML dans l'élément FORM
<select name="universite" id="universite">
<option value="Tunis">Tunis </option>
<option value="Manar">Manar</option>
<option value="carthage">Carthage</option>
<option value="sousse">Sousse</option>
<option value="sfax">Sfax</option>
<option value="Jendouba">Jendouba</option>
<option value="kairouan">Kairouan</option>
<option value="Gabes">Gabes</option>
</select>
// Instruction JavaScript pour extraire le choix sélectionné par l'utilisateur
let selectUniversite = document.getElementById('universite');
let universite = selectUniversite[selectUniversite.selectedIndex].value;
alert('Choix sélectionné : ' + universite);
Document Object Model (DOM)
 Accès aux choix dans les listes de choix element select
Modifier Les choix
Pour les listes à choix multiple est possible de modifier les choix sélectionnés
avec :
document.getElementById(identifiant_element)[num_element].selected=true/false

 Exemple 6 : pour une liste à choix multiple

// Instruction JavaScript pour extraire le choix sélectionné par l'utilisateur
let select = document.getElementById('competences');

for (i=0; i<select.length; i++) {

if (select[i].selected)
select[i].selected = false;
else
select[i].selected = true;
}
Document Object Model (DOM)
 Accès aux textes sur les boutons : Les éléments de formulaire concernés sont :
 Les boutons de soumission (INPUT type="submit")
 Les boutons de soumission avec image (INPUT type="image")
 Les boutons d'annulation (INPUT type="reset")
 Les boutons simples (INPUT type="button")
 Exemple 7 :

// Code HTML dans l’élément Form

<input type="button" value="effacer" name="BoutonEffacer" id ="BoutonEffacer" />
// Instruction JavaScript pour lire

let texte = document.getElementById("BoutonEffacer").value;

alert (texte);// texte contient effacer.
Document Object Model (DOM)
 Méthodes
 blur() : enlève le focus d'un champ du formulaire
 click() :simule un clic de souris sur le champ du formulaire
 focus() : attribue le focus à un champ du formulaire
 select() :sélectionne le contenu d'un champ du formulaire
document.getElementById('id').blur()
document.getElementById('id').click()
document.getElementById('id').focus();
document.getElementById('id'). select()

 Exemple 8
// code Html pour la gestion de l'évènement
<body onload="setFocus()">
// code javaScript permettant d'attribuer le focus à l'élément nom lors du chargement du document
function setFocus()
{
document.getElementById('nom').focus();
}
Document Object Model (DOM)
 Méthodes
 blur() : enlève le focus d'un champ du formulaire
 click() :simule un clic de souris sur le champ du formulaire
 focus() : attribue le focus à un champ du formulaire
 select() :sélectionne le contenu d'un champ du formulaire
document.getElementById('id').blur()
document.getElementById('id').click()
document.getElementById('id').focus();
document.getElementById('id'). select()

 Exemple 9
// code Html pour la gestion de l'évenement
<select name="competences" id="competences" multiple onblur="clickSimulate()">
// code javaScript permettant de simuler un click sur le bouton permettant d'apploder le fichie CV
lorsque l'élément compétences perd le focus
function clickSimulate()
{
document.getElementById('fichier').click();
}
Document Object Model (DOM)
 Activer ou désactiver des contrôles
 Il est possible de désactiver ou d'activer des contrôles d'un formulaire pour les éléments
INPUT, BUTTON, TEXTAREA et SELECT en réponse à un événement.
 Prenons l'exemple dessiné ci-dessous qui active le champ pour entrer le nombre
d'enfants uniquement si on clique sur les boutons radio qui correspondent aux états civile
marié, divorcé ou veuf et qui désactive le champ si on clique sur le bouton célibataire :
 Exemple 10
//HTML qui permet d'effectuer ces actions :
<input type="radio" name="etatCivil" value="celibataire" id="celibataire" onclick= "desactiver()" />
<label for="celibataire">célibataire</label><br>
<input type="radio" name="etatCivil" value="marié" id="marie" onclick= "activer()" />
<label for="marie">marié</label><br>
<input type="radio" name="etatCivil" value="divorcé" id="divorce" onclick= "activer()" /> <label
for="divorce">divorcé</label><br>
<input type="radio" name="etatCivil" value="veuf" id="veuf" onclick= "activer()" />
<label for="veuf">veuf</label><br>

//Le contenu des fonctions d'activation javascript

function activer() L'élément nombre enfants est désactivé

{ document.getElementById('nbEnfants').disabled = false; }

function desactiver()
{ document.getElementById('nbEnfants').disabled = true; } L'élément nombre enfants est activé

Vous aimerez peut-être aussi

Programmation Web - Javascript 2022-2023
Pas encore d'évaluation
Programmation Web - Javascript 2022-2023
74 pages
JavaScript Complet
Pas encore d'évaluation
JavaScript Complet
19 pages
Support_Programmation_web_JavaScript_2024-2025[1]
Pas encore d'évaluation
Support_Programmation_web_JavaScript_2024-2025[1]
37 pages
Programmation Web Javascript
Pas encore d'évaluation
Programmation Web Javascript
37 pages
Partie 2_1 Acquérir les fondamentaux de javascript
Pas encore d'évaluation
Partie 2_1 Acquérir les fondamentaux de javascript
28 pages
Chapitre 3 Javascript
Pas encore d'évaluation
Chapitre 3 Javascript
67 pages
05-Javascript Base
Pas encore d'évaluation
05-Javascript Base
55 pages
cours 7 javascript bases
Pas encore d'évaluation
cours 7 javascript bases
93 pages
Support JS
Pas encore d'évaluation
Support JS
31 pages
UE 21 Et Plus PCD
Pas encore d'évaluation
UE 21 Et Plus PCD
26 pages
Javascript
Pas encore d'évaluation
Javascript
54 pages
2_JS TP
Pas encore d'évaluation
2_JS TP
31 pages
Chapitre 2 Dev Num
Pas encore d'évaluation
Chapitre 2 Dev Num
59 pages
Chapitre 4
Pas encore d'évaluation
Chapitre 4
73 pages
1 JavaScript VariableOperateurStructuresControle
Pas encore d'évaluation
1 JavaScript VariableOperateurStructuresControle
18 pages
Chapitre3 JS Partie1
Pas encore d'évaluation
Chapitre3 JS Partie1
39 pages
2 Javascript
Pas encore d'évaluation
2 Javascript
137 pages
Support de Cours Programmation Web 11052024090808 ProgWeb3
Pas encore d'évaluation
Support de Cours Programmation Web 11052024090808 ProgWeb3
70 pages
Part 5 and 6 Javascript
Pas encore d'évaluation
Part 5 and 6 Javascript
40 pages
Développement Web Full Stack JS: Niveau 1: Orange Digital Center
100% (1)
Développement Web Full Stack JS: Niveau 1: Orange Digital Center
96 pages
Cours Programmation Web - Javascript
Pas encore d'évaluation
Cours Programmation Web - Javascript
23 pages
Java Script 1
Pas encore d'évaluation
Java Script 1
8 pages
Javascript
Pas encore d'évaluation
Javascript
88 pages
0209-formation-programmation-javascript
Pas encore d'évaluation
0209-formation-programmation-javascript
53 pages
JavaScript Part 1
Pas encore d'évaluation
JavaScript Part 1
40 pages
Chapitre 4 - JavaScript
Pas encore d'évaluation
Chapitre 4 - JavaScript
18 pages
Chapitre 3
Pas encore d'évaluation
Chapitre 3
70 pages
 C’est quoi le JavaScript ?
Pas encore d'évaluation
 C’est quoi le JavaScript ?
15 pages
javascript-240201135423-3760375a
Pas encore d'évaluation
javascript-240201135423-3760375a
66 pages
01 JS Introduction
Pas encore d'évaluation
01 JS Introduction
17 pages
Cours Programmation Web II Chapitre 1 JavaScript
Pas encore d'évaluation
Cours Programmation Web II Chapitre 1 JavaScript
88 pages
JavaScript - Part 1
Pas encore d'évaluation
JavaScript - Part 1
40 pages
cours2-web
Pas encore d'évaluation
cours2-web
78 pages
Lecon4 1 Dynamisation Des Pages Web Cote Client Javascript
Pas encore d'évaluation
Lecon4 1 Dynamisation Des Pages Web Cote Client Javascript
52 pages
Cours 4 Javascript
Pas encore d'évaluation
Cours 4 Javascript
52 pages
JavaScript L2
Pas encore d'évaluation
JavaScript L2
15 pages
Javascript
Pas encore d'évaluation
Javascript
101 pages
Cours CSS Et Javascript - Licence 1 Maths-Info
Pas encore d'évaluation
Cours CSS Et Javascript - Licence 1 Maths-Info
86 pages
Technologie Web JavaScript PDF
100% (1)
Technologie Web JavaScript PDF
64 pages
Chapitre 3 Js
Pas encore d'évaluation
Chapitre 3 Js
38 pages
Javascript 3eme sciences informatiques STI
Pas encore d'évaluation
Javascript 3eme sciences informatiques STI
14 pages
1-JavaScript (1)_035530
Pas encore d'évaluation
1-JavaScript (1)_035530
31 pages
Premiere Partie Cours JavaScript L2 D2AW 2019-2020
Pas encore d'évaluation
Premiere Partie Cours JavaScript L2 D2AW 2019-2020
19 pages
Javascript
Pas encore d'évaluation
Javascript
58 pages
File 46
Pas encore d'évaluation
File 46
4 pages
Sequence 02 - Cours Programmation Objet Evenementielle
Pas encore d'évaluation
Sequence 02 - Cours Programmation Objet Evenementielle
27 pages
Révision Js
Pas encore d'évaluation
Révision Js
54 pages
Cours Javascript
Pas encore d'évaluation
Cours Javascript
61 pages
3-JS (1)
Pas encore d'évaluation
3-JS (1)
131 pages
Devweb JS&PHP
Pas encore d'évaluation
Devweb JS&PHP
111 pages
Billiejoe Javascript Fiches
Pas encore d'évaluation
Billiejoe Javascript Fiches
27 pages
Leçon Javascript
Pas encore d'évaluation
Leçon Javascript
56 pages
JS 120522
Pas encore d'évaluation
JS 120522
50 pages
Cours Javascript Terminale
Pas encore d'évaluation
Cours Javascript Terminale
6 pages
Programmation Web Ch4
Pas encore d'évaluation
Programmation Web Ch4
63 pages
Partie3 Javascript ANTARI 2021 2022
Pas encore d'évaluation
Partie3 Javascript ANTARI 2021 2022
51 pages
Support de Cours Javasrcipt ESMIA L2 IRD
Pas encore d'évaluation
Support de Cours Javasrcipt ESMIA L2 IRD
63 pages