BOM, Méthodes Tableaux et Chaînes de Caractères (2025-2026)

---

1️ Le BOM (Browser Object Model) - Interagir avec le Navigateur

Qu’est-ce que le BOM ?

Le BOM permet d’interagir avec le navigateur (pas avec le HTML). C’est tout ce qui est en dehors du document : fenêtre, historique, URL, écran…

Structure du BOM

window (racine de tout)
├── document (DOM - structure HTML)
├── navigator (infos du navigateur)
├── location (URL actuelle)
├── history (historique de navigation)
├── screen (infos de l'écran)
├── alert() / confirm() / prompt()
├── setTimeout() / setInterval()
└── open() / close()

---

2️⃣ L’objet WINDOW

Qu’est-ce que window ?

window est l’objet racine du BOM. Tout ce qui existe dans le navigateur en est une propriété.

// window est l'objet global
console.log(window.innerWidth); // Largeur de la fenêtre
console.log(window.innerHeight); // Hauteur de la fenêtre

// Ces deux sont équivalents
window.alert('Bonjour');
alert('Bonjour');

Propriétés principales de window

// Dimensions de la fenêtre
console.log(window.innerWidth); // Largeur visible (sans barre de défilement)
console.log(window.innerHeight); // Hauteur visible

// Dimensions de l'écran
console.log(window.outerWidth); // Largeur totale (avec barre de défilement)
console.log(window.outerHeight); // Hauteur totale

// Position de la fenêtre
console.log(window.screenX); // Position X
console.log(window.screenY); // Position Y

// Scroll
console.log(window.scrollX); // Défilement horizontal
console.log(window.scrollY); // Défilement vertical

---

3️⃣ L’objet NAVIGATOR - Infos du Navigateur

Qu’est-ce que navigator ?

navigator donne des informations sur le navigateur et l’appareil de l’utilisateur.

Propriétés principales

// Langue de l'utilisateur
console.log(navigator.language); // "fr-FR"

// Identifiant du navigateur
console.log(navigator.userAgent); // Chaîne complète du navigateur
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36..."

// Connexion internet
console.log(navigator.onLine); // true ou false

// Plateforme
console.log(navigator.platform); // "Win32", "MacIntel", etc.

// Nombre de processeurs
console.log(navigator.hardwareConcurrency); // 8 (exemple)

// Mémoire disponible
console.log(navigator.deviceMemory); // 8 (Go)

Exemples pratiques

Exemple 1 : Vérifier la connexion internet

if (navigator.onLine) {
    console.log('Connecté à internet');
} else {
    console.log('Pas de connexion');
}

// Écouter les changements de connexion
window.addEventListener('online', () => {
    console.log('Connexion rétablie');
});

window.addEventListener('offline', () => {
    console.log('Connexion perdue');
});

Exemple 2 : Détecter le navigateur

const userAgent = navigator.userAgent;

if (userAgent.includes('Chrome')) {
    console.log('Utilisateur Chrome');
} else if (userAgent.includes('Firefox')) {
    console.log('Utilisateur Firefox');
} else if (userAgent.includes('Safari')) {
    console.log('Utilisateur Safari');
}

Exemple 3 : Adapter le contenu à la langue

const langue = navigator.language.split('-')[0]; // "fr" ou "en"

if (langue === 'fr') {
    console.log('Bienvenue en français');
} else if (langue === 'en') {
    console.log('Welcome in English');
}

---

4️⃣ L’objet LOCATION - Gérer l’URL

Qu’est-ce que location ?

location donne accès à l’URL actuelle et permet de la modifier.

📊 Structure d’une URL

https://www.example.com:8080/path/page.html?search=test#section

location.protocol   // "https:"
location.hostname   // "www.example.com"
location.port       // "8080"
location.pathname   // "/path/page.html"
location.search     // "?search=test"
location.hash       // "#section"
location.href       // URL complète

Propriétés et méthodes

// Lire l'URL actuelle
console.log(location.href); // URL complète
console.log(location.hostname); // Nom de domaine
console.log(location.pathname); // Chemin
console.log(location.search); // Paramètres (?...)
console.log(location.hash); // Ancre (#...)

// Modifier l'URL (redirection)
location.href = 'https://google.com'; // Rediriger
location.replace('https://google.com'); // Rediriger (pas d'historique)

// Recharger la page
location.reload(); // Recharge normale
location.reload(true); // Recharge sans cache

Exemples pratiques

Exemple 1 : Extraire les paramètres d’URL

// URL: https://example.com?nom=Eva&age=25

const params = new URLSearchParams(location.search);
console.log(params.get('nom')); // "Eva"
console.log(params.get('age')); // "25"

Exemple 2 : Rediriger selon une condition

const utilisateur = localStorage.getItem('utilisateur');

if (!utilisateur) {
    location.href = '/login'; // Rediriger vers login
}

Exemple 3 : Lire l’ancre (hash)

// URL: https://example.com#section-contact

const section = location.hash.slice(1); // "section-contact"
console.log(section);

// Scroller vers la section
document.getElementById(section)?.scrollIntoView();

---

5️⃣ L’objet HISTORY - Naviguer dans l’Historique

Qu’est-ce que history ?

history permet de naviguer dans l’historique du navigateur (boutons précédent/suivant).

Méthodes principales

// Revenir à la page précédente (bouton retour)
history.back();

// Aller à la page suivante (bouton suivant)
history.forward();

// Aller à une page spécifique
history.go(-1); // Revenir 1 page
history.go(1); // Avancer 1 page
history.go(-2); // Revenir 2 pages

// Nombre de pages dans l'historique
console.log(history.length);

Exemples pratiques

// Bouton "Retour"
document.querySelector('.btn-back').addEventListener('click', () => {
    history.back();
});

// Bouton "Suivant"
document.querySelector('.btn-next').addEventListener('click', () => {
    history.forward();
});

// Vérifier s'il y a un historique
if (history.length > 1) {
    console.log("L'utilisateur peut revenir");
}

---

6️⃣ L’objet SCREEN - Infos de l’Écran

Qu’est-ce que screen ?

screen donne des informations sur l’écran physique de l’utilisateur.

Propriétés principales

// Dimensions totales de l'écran
console.log(screen.width); // 1920 (px)
console.log(screen.height); // 1080 (px)

// Dimensions disponibles (sans barre des tâches)
console.log(screen.availWidth); // 1920
console.log(screen.availHeight); // 1040

// Profondeur de couleur
console.log(screen.colorDepth); // 24 (bits)

// Orientation
console.log(screen.orientation.type); // "landscape-primary"

Exemple pratique

// Adapter le layout à l'écran
if (screen.width < 768) {
    console.log('Petit écran (mobile)');
} else if (screen.width < 1024) {
    console.log('Écran moyen (tablette)');
} else {
    console.log('Grand écran (desktop)');
}

---

7️⃣ Dialogues - alert(), confirm(), prompt()

Afficher des messages à l’utilisateur

// Alert : afficher un message
alert('Bienvenue !');

// Confirm : demander une confirmation (true/false)
const reponse = confirm('Êtes-vous sûr ?');
if (reponse) {
    console.log('Utilisateur a cliqué OK');
} else {
    console.log('Utilisateur a cliqué Annuler');
}

// Prompt : demander une entrée
const nom = prompt('Quel est votre nom ?');
if (nom) {
    console.log('Bonjour ' + nom);
} else {
    console.log('Utilisateur a annulé');
}

---

8️⃣ Temporisation - setTimeout() et setInterval()

Exécuter du code après un délai

// setTimeout : exécuter une fois après un délai
setTimeout(() => {
    console.log('Message après 3 secondes');
}, 3000);

// setInterval : exécuter régulièrement
const intervalId = setInterval(() => {
    console.log('Message toutes les 2 secondes');
}, 2000);

// Arrêter l'intervalle
clearInterval(intervalId);

Exemple : Minuteur

let secondes = 10;

const minuteur = setInterval(() => {
    console.log(`Temps restant: ${secondes}s`);
    secondes--;

    if (secondes < 0) {
        clearInterval(minuteur);
        console.log('Temps écoulé !');
    }
}, 1000);

---

9️⃣ Fenêtres - open() et close()

Ouvrir/fermer des fenêtres

// Ouvrir une nouvelle fenêtre
const nouvelleFenetre = window.open('https://google.com', '_blank');

// Fermer la fenêtre
nouvelleFenetre.close();

// Ouvrir dans le même onglet
window.open('https://google.com', '_self');

// Ouvrir avec des options
window.open('https://google.com', 'popup', 'width=500,height=400,left=100,top=100');

---

📝 Projet : Générateur de Bulles Interactif

Objectif

Créer une animation où des bulles apparaissent et disparaissent. L’utilisateur clique sur les bulles pour augmenter un compteur.

📝 Code complet

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Générateur de Bulles</title>
        <style>
            body {
                overflow: hidden;
                min-height: 100vh;
                cursor: crosshair;
                margin: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #fff;
            }

            h3 {
                font-size: 10rem;
                text-align: center;
                margin-top: 20px;
                color: rgba(128, 128, 128, 0.555);
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: -1;
            }

            .bubble {
                position: absolute;
                border-radius: 50%;
                background: rgba(255, 166, 0, 0.6);
                opacity: 0;
                animation: anim 8s forwards;
                filter: hue-rotate(0deg);
                cursor: pointer;
            }

            @keyframes anim {
                to {
                    top: -250px;
                    left: var(--left);
                    opacity: 1;
                    filter: hue-rotate(720deg);
                }
            }
        </style>
    </head>
    <body>
        <h3>0</h3>

        <script>
            // Sélectionner le compteur
            const counterDisplay = document.querySelector('h3');
            let counter = 0;

            // Fonction pour créer une bulle
            const bubbleMaker = () => {
                // Créer l'élément bulle
                const bubble = document.createElement('span');
                bubble.classList.add('bubble');
                document.body.appendChild(bubble);

                // Taille aléatoire (100px à 200px)
                const size = `${Math.random() * 100 + 100}px`;
                bubble.style.height = size;
                bubble.style.width = size;

                // Position aléatoire
                bubble.style.top = `${Math.random() * 100 + 50}%`;
                bubble.style.left = `${Math.random() * 100}%`;

                // Direction aléatoire (gauche ou droite)
                const plusMinus = Math.random() > 0.5 ? 1 : -1;
                bubble.style.setProperty('--left', `${Math.random() * 100 * plusMinus}%`);

                // Clic sur la bulle
                bubble.addEventListener('click', () => {
                    counter++;
                    counterDisplay.textContent = counter;
                    bubble.remove();
                });

                // Supprimer la bulle après 8 secondes
                setTimeout(() => {
                    bubble.remove();
                }, 8000);
            };

            // Créer une bulle toutes les secondes
            setInterval(bubbleMaker, 1000);
        </script>
    </body>
</html>

🔍 Explication du code

1. Sélection du compteur

const counterDisplay = document.querySelector('h3');
let counter = 0;

• Récupère l’élément <h3> pour afficher le compteur
• Initialise le compteur à 0

2. Création d’une bulle

const bubble = document.createElement('span');
bubble.classList.add('bubble');
document.body.appendChild(bubble);

• Crée un élément <span>
• Ajoute la classe CSS bubble
• L’ajoute au DOM

3. Taille et position aléatoires

const size = `${Math.random() * 100 + 100}px`; // 100-200px
bubble.style.top = `${Math.random() * 100 + 50}%`;
bubble.style.left = `${Math.random() * 100}%`;

4. Animation avec variable CSS

const plusMinus = Math.random() > 0.5 ? 1 : -1;
bubble.style.setProperty('--left', `${Math.random() * 100 * plusMinus}%`);

• Définit la direction finale (gauche ou droite)

5. Gestion du clic

bubble.addEventListener('click', () => {
    counter++;
    counterDisplay.textContent = counter;
    bubble.remove();
});

6. Suppression automatique

setTimeout(() => {
    bubble.remove();
}, 8000);

---

🔟 Méthodes des Tableaux

📊 Tableau récapitulatif

Méthode	Utilité	Modifie ?
push()	Ajouter à la fin	✅ Oui
pop()	Supprimer la fin	✅ Oui
shift()	Supprimer le début	✅ Oui
unshift()	Ajouter au début	✅ Oui
slice()	Extraire une partie	❌ Non
splice()	Ajouter/supprimer	✅ Oui
concat()	Fusionner	❌ Non
join()	Convertir en chaîne	❌ Non
reverse()	Inverser	✅ Oui
sort()	Trier	✅ Oui
map()	Transformer	❌ Non
filter()	Sélectionner	❌ Non
reduce()	Agréger	❌ Non
find()	Trouver un élément	❌ Non
indexOf()	Position d’un élément	❌ Non
includes()	Contient ?	❌ Non

Exemples pratiques

push() et pop()

const fruits = ['pomme', 'banane'];
fruits.push('orange'); // ['pomme', 'banane', 'orange']
const dernier = fruits.pop(); // 'orange'

shift() et unshift()

const fruits = ['pomme', 'banane', 'orange'];
const premier = fruits.shift(); // 'pomme'
fruits.unshift('raisin'); // ['raisin', 'banane', 'orange']

slice() vs splice()

const fruits = ['pomme', 'banane', 'orange', 'raisin'];

// slice : extrait sans modifier
const partie = fruits.slice(1, 3); // ['banane', 'orange']
console.log(fruits); // Inchangé

// splice : modifie le tableau
fruits.splice(1, 2, 'kiwi'); // Remplace 2 éléments par 'kiwi'
console.log(fruits); // ['pomme', 'kiwi', 'raisin']

join()

const fruits = ['pomme', 'banane', 'orange'];
const texte = fruits.join(', '); // "pomme, banane, orange"

sort()

const nombres = [3, 1, 4, 1, 5, 9];
nombres.sort((a, b) => a - b); // [1, 1, 3, 4, 5, 9]

---

1️⃣1️⃣ Méthodes des Chaînes de Caractères

📊 Tableau récapitulatif

Méthode	Utilité
length	Longueur
charAt()	Caractère à une position
charCodeAt()	Code du caractère
indexOf()	Position d’une sous-chaîne
slice()	Extraire une partie
substring()	Extraire (sans négatif)
toLowerCase()	Convertir en minuscules
toUpperCase()	Convertir en majuscules
trim()	Supprimer les espaces
split()	Convertir en tableau
replace()	Remplacer
includes()	Contient ?
startsWith()	Commence par ?
endsWith()	Finit par ?
repeat()	Répéter
padStart()	Ajouter au début
padEnd()	Ajouter à la fin

Exemples pratiques

const texte = 'Bonjour JavaScript';

// Longueur
console.log(texte.length); // 18

// Caractère à une position
console.log(texte.charAt(0)); // "B"

// Convertir la casse
console.log(texte.toLowerCase()); // "bonjour javascript"
console.log(texte.toUpperCase()); // "BONJOUR JAVASCRIPT"

// Supprimer les espaces
const avecEspaces = '  Bonjour  ';
console.log(avecEspaces.trim()); // "Bonjour"

// Diviser en tableau
const mots = texte.split(' '); // ["Bonjour", "JavaScript"]

// Remplacer
console.log(texte.replace('JavaScript', 'JS')); // "Bonjour JS"

// Vérifier
console.log(texte.includes('Java')); // true
console.log(texte.startsWith('Bon')); // true
console.log(texte.endsWith('Script')); // true

// Répéter
console.log('Ha'.repeat(3)); // "HaHaHa"

// Ajouter au début
const numero = '42';
console.log(numero.padStart(5, '0')); // "00042"

---

Résumé des points clés

✅ window = Objet racine du BOM ✅ navigator = Infos du navigateur ✅ location = Gestion de l’URL ✅ history = Historique de navigation ✅ screen = Infos de l’écran ✅ setTimeout/setInterval = Temporisation ✅ alert/confirm/prompt = Dialogues ✅ Tableaux = push, pop, map, filter, reduce ✅ Chaînes = split, replace, includes, toUpperCase