Manipuler les objets — Cours Programmer en JavaScript

Leçon 1

Créer un objet

La syntaxe littérale

L'exemple du résumé : le téléphone

const telephone = {
  marque: "SmartF22",
  prix: 400,
  stock: 200,
  ref: "SmartPhone2022",
  verifierStock: function () {          // une méthode
    return this.stock > 0;              // this = l'objet telephone
  },
};

console.log(telephone.marque);          // SmartF22 (notation pointée)
console.log(telephone["prix"]);         // 400 (notation crochets)
console.log(telephone.verifierStock()); // true

Vidéo · À regarder

JavaScript Full Course for free

Bro Code · YouTube

Regarde de 5:00:40 à 5:12:0711 min 27 s

Ouvrir sur YouTube à 5:00:40

Vidéo · À regarder

JavaScript Full Course for free

Bro Code · YouTube

Regarde de 5:12:07 à 5:23:4711 min 40 s

Ouvrir sur YouTube à 5:12:07

Leçon 2

Manipuler un objet

Leçon 3

Les objets natifs

Méthode	Rôle	Exemple avec `t = ["A", "B", "C"]`	Résultat
`push(x)`	ajoute à la fin	`t.push("D")`	`["A", "B", "C", "D"]`
`unshift(x)`	ajoute au début	`t.unshift(22)`	`[22, "A", "B", "C"]`
`pop()`

Leçon 4

Les expressions régulières

Élément	Signification	Exemple
`[abc]`	un caractère parmi a, b, c	`/[aeiou]/` : une voyelle
`[0-9]`, `[a-z]`, `[A-Z]`	un caractère dans l'intervalle	`/[0-9]/` : un chiffre
`\d`, `\w`, `\s`	un chiffre ; une lettre, un chiffre ou `_` ; un espace

Leçon 5

JSON

Méthode	Conversion	Nom
`JSON.parse(texte)`	texte JSON → objet JavaScript	analyse syntaxique (parse)
`JSON.stringify(objet)`	objet JavaScript → texte JSON	linéarisation (stringify)

Travaux pratiques

Le carnet de contacts en JSON

Exercices

Exercice 7.1

Choisis la bonne réponse

1Dans une méthode, this désigne…
2["A", "B", "C"].pop() supprime…
3"Bonjour".substring(0, 3) vaut…
4new Date(2026, 0, 1) représente…
5Math.floor(7.9) vaut…
6/^\d{5}$/.test("2000") vaut…
7JSON.parse convertit…
8Quelle écriture est du JSON valide ?

0/8 répondues

Exercice 7.2

Le stagiaire

Exercice 7.3

Manipulations de tableaux et de chaînes

L'essentiel du chapitre

À retenir

Objet littéral { cle: valeur, methode() { } } ; constructeur function Nom() { this.x = x; } + new ; ou class.
objet.cle ou objet["cle"] ; ajouter en affectant ; delete objet.cle ; for...in pour parcourir.
Array : length, push, pop, shift, unshift, splice, slice, indexOf, includes, sort((a, b) => a - b), join.
String (immuable) : length, toUpperCase, substring, slice, indexOf, includes, split, trim, replace.
Date : new Date(), getFullYear, getMonth (0 à 11), getDate, getDay (0 = dimanche).
Math : round, floor, ceil, max, min, random. window : alert, confirm, prompt, setTimeout, setInterval.
Regex : /motif/i, ^ $ \d \w [a-z] + * ? {n} ; regex.test(ch), ch.replace(regex, x).
JSON : clés entre guillemets doubles ; JSON.parse (texte → objet), JSON.stringify (objet → texte).

Propriété / méthode	Rôle	Exemple avec `s = "Cours JavaScript"`	Résultat
`length`	longueur	`s.length`	`16`
`charAt(i)` ou `s[i]`	caractère à l'indice `i`	`s.charAt(0)`	`"C"`
`substring(x, y)`	de `x` à `y - 1`	`s.substring(6, 10)`	`"Java"`
`slice(x, y)`	comme substring, accepte les négatifs	`s.slice(-6)`	`"Script"`
`toLowerCase()` / `toUpperCase()`	minuscules / majuscules	`s.toUpperCase()`	`"COURS JAVASCRIPT"`
`indexOf(t)`	position de `t` (-1 si absent)	`s.indexOf("Java")`	`6`
`includes(t)`	contient `t` ?	`s.includes("Script")`	`true`
`startsWith(t)` / `endsWith(t)`	commence / finit par `t` ?	`s.startsWith("Cours")`	`true`
`split(sep)`	découpe en tableau	`s.split(" ")`	`["Cours", "JavaScript"]`
`trim()`	supprime les espaces au début et à la fin	`" ok ".trim()`	`"ok"`
`replace(a, b)`	remplace la première occurrence	`s.replace("Cours", "Module")`	`"Module JavaScript"`
`Array.from(s)`	transforme en tableau de caractères	`Array.from("abc")`	`["a", "b", "c"]`

Méthode	Renvoie
`getDate()`	le jour du mois, de 1 à 31
`getDay()`	le jour de la semaine, de 0 (dimanche) à 6 (samedi)
`getMonth()`	le mois, de 0 (janvier) à 11 (décembre)
`getFullYear()`	l'année sur 4 chiffres
`getHours()`, `getMinutes()`, `getSeconds()`, `getMilliseconds()`	l'heure, les minutes…
`getTime()`	les millisecondes écoulées depuis le 1er janvier 1970
`setDate()`, `setMonth()`, `setFullYear()`, `setHours()`…	modifient la date
`toLocaleDateString("fr-FR")`, `toLocaleTimeString("fr-FR")`	la date ou l'heure en texte, au format français
`getUTC...()`, `setUTC...()`	les mêmes, en temps universel (UTC)

Méthode	Rôle	Exemple	Résultat
`Math.round(x)`	arrondi le plus proche	`Math.round(4.5)`	`5`
`Math.floor(x)`	arrondi inférieur	`Math.floor(4.9)`	`4`
`Math.ceil(x)`	arrondi supérieur	`Math.ceil(4.1)`	`5`
`Math.trunc(x)`	partie entière	`Math.trunc(-4.7)`	`-4`
`Math.abs(x)`	valeur absolue	`Math.abs(-3)`	`3`
`Math.pow(x, y)`	puissance	`Math.pow(2, 10)`	`1024`
`Math.sqrt(x)`	racine carrée	`Math.sqrt(81)`	`9`
`Math.max(...)`, `Math.min(...)`	maximum, minimum	`Math.max(3, 9, 4)`	`9`
`Math.random()`	nombre aléatoire dans [0, 1[	`Math.random()`	`0.7312…`
`Math.PI`	la constante π	`Math.PI`	`3.14159…`

Méthode	Rôle
`alert(texte)`	affiche un message ; bloque le programme jusqu'au clic sur OK
`confirm(texte)`	demande une confirmation : renvoie `true` (OK) ou `false` (Annuler)
`prompt(texte, défaut)`	demande une saisie : renvoie la chaîne saisie ou `null`
`open(url, nom, options)`	ouvre une nouvelle fenêtre ou un nouvel onglet
`setTimeout(f, ms)` / `clearTimeout(id)`	exécute `f` une fois après `ms` millisecondes / annule
`setInterval(f, ms)` / `clearInterval(id)`	exécute `f` toutes les `ms` millisecondes / arrête

Méthode	Appelée sur	Renvoie
`regex.test(chaine)`	la regex	`true` ou `false`
`regex.exec(chaine)`	la regex	un tableau avec la correspondance, ou `null`
`chaine.match(regex)`	la chaîne	les correspondances (toutes avec `g`), ou `null`
`chaine.search(regex)`	la chaîne	l'indice de la première correspondance, ou `-1`
`chaine.replace(regex, texte)`	la chaîne	une nouvelle chaîne (toutes les occurrences avec `g`)
`chaine.split(regex)`	la chaîne	un tableau de morceaux

Le constructeur du résumé

function Telephone(nom, prix, stock, ref) {
  this.nom = nom;
  this.prix = prix;
  this.stock = stock;
  this.ref = ref;
  this.verifierStock = function () {
    return this.stock > 0;
  };
}

const t1 = new Telephone("SmartF22", 400, 200, "pro1");
const t2 = new Telephone("Mi Max", 200, 0, "t2");
console.log(t1.nom);               // SmartF22
console.log(t2.verifierStock());   // false

La même chose avec une classe

class Telephone {
  constructor(nom, prix, stock) {
    this.nom = nom;
    this.prix = prix;
    this.stock = stock;
  }

  verifierStock() {
    return this.stock > 0;
  }
}

const t3 = new Telephone("Nova", 1500, 12);
console.log(t3.verifierStock());   // true

Ajouter, modifier, parcourir, supprimer

telephone.dateSortie = "2022";          // AJOUTER une propriété
telephone.prix = 350;                   // MODIFIER une propriété

for (const cle in telephone) {          // PARCOURIR les clés
  console.log(cle);                     // marque, prix, stock, ref, verifierStock, dateSortie
}

delete telephone.dateSortie;            // SUPPRIMER une propriété

console.log(Object.keys(telephone));    // tableau des clés
console.log("prix" in telephone);       // true : la propriété existe

Déclarer et lire un tableau

let vide = [];                          // la bonne pratique (plutôt que new Array())
let lettres = ["A", "B", "C"];

console.log(lettres.length);            // 3 : la taille
console.log(lettres[1]);                // "B"
console.log(lettres[lettres.length - 1]);   // "C" : le dernier élément
console.log(lettres.indexOf("C"));      // 2 : l'indice de "C" (-1 si absent)
console.log(lettres.includes("Z"));     // false

contact.json (exemple du résumé)

json

{
  "nom": "Saidi",
  "prenom": "Ali",
  "age": 40,
  "interets": null,
  "experience": ["CSS", "JS", "HTML"],
  "adresse": { "rue": "Sidi Maarouf", "ville": "Casablanca", "codeP": 10000 }
}

Créer et lire une date

const maintenant = new Date();                    // la date et l'heure actuelles
const examen = new Date(2026, 5, 15, 9, 0);       // 15 JUIN 2026, 9 h 00 (mois de 0 à 11 !)
const depuisTexte = new Date("2026-06-15");       // à partir d'une chaîne
const depuisMs = new Date(0);                     // 1er janvier 1970 (millisecondes)

console.log(examen.getDate());          // 15 : le jour du mois (1-31)
console.log(examen.getDay());           // 1 : le jour de la semaine (0 = dimanche)
console.log(examen.getMonth());         // 5 : le mois (0 = janvier)
console.log(examen.getFullYear());      // 2026
console.log(examen.getHours());         // 9
console.log(examen.toLocaleDateString("fr-FR"));   // 15/06/2026

Calculer un nombre de jours

const aujourdhui = new Date();
const finAnnee = new Date(aujourdhui.getFullYear(), 11, 31);
const jours = Math.ceil((finAnnee - aujourdhui) / (1000 * 60 * 60 * 24));
console.log(`Encore ${jours} jours avant la fin de l'année`);

Un compte à rebours avec setInterval

let secondes = 5;
const minuteur = setInterval(() => {
  console.log(secondes);
  secondes--;
  if (secondes < 0) {
    clearInterval(minuteur);      // arrête la répétition
    console.log("Partez !");
  }
}, 1000);

if (confirm("Supprimer ce fichier ?")) {
  console.log("Supprimé");
}

Les exemples du résumé, corrigés

let texte = "Un cours de JS";

console.log(texte.search("JS"));                        // 12
console.log(texte.replace(/js/i, "JavaScript"));        // Un cours de JavaScript (i : sans casse)
console.log("un cours de JavaScript".search(/[A-Z]/));  // 12 : la première majuscule
console.log(/JS/.test(texte));                          // true
console.log(/js/.test(texte));                          // false (sensible à la casse)
console.log("12-05-2026".split(/-/));                   // ["12", "05", "2026"]

Vérifier des saisies courantes

const regTel = /^0[5-7]\d{8}$/;                      // téléphone marocain : 06xxxxxxxx
const regEmail = /^[\w.-]+@[\w-]+\.[a-z]{2,}$/i;     // e-mail (simplifié)
const regCode = /^\d{5}$/;                           // code postal : 5 chiffres

console.log(regTel.test("0612345678"));      // true
console.log(regTel.test("612345678"));       // false
console.log(regEmail.test("sara@ofppt.ma"));  // true

parse et stringify

const jsonData = '{"nom":"Saidi", "prenom":"Ali"}';
console.log(typeof jsonData);               // string

const objet = JSON.parse(jsonData);         // texte → objet
console.log(typeof objet);                  // object
console.log(objet.nom + " " + objet.prenom);   // Saidi Ali

const texte = JSON.stringify({ nom: "Saidi", prenom: "Ali" });   // objet → texte
console.log(texte);                         // {"nom":"Saidi","prenom":"Ali"}
console.log(JSON.stringify(objet, null, 2));   // version indentée, lisible