Veuillez vous connecter à votre compte.
Le JavaScript est un langage de programmation essentiel pour la création d'applications web interactives. Pour maîtriser l'art de la programmation web, il est crucial de comprendre en profondeur deux concepts fondamentaux : le BOM (Browser Object Model) et le DOM (Document Object Model). Ce cours vous fournira une connaissance approfondie de ces sujets, du niveau débutant au niveau avancé, en utilisant des exemples pratiques pour illustrer chaque concept.
Le BOM (Browser Object Model)
Le BOM est la partie de JavaScript qui permet d'interagir avec le navigateur lui-même. Il offre un ensemble d'objets et de fonctionnalités pour manipuler l'environnement du navigateur. Voici les principaux aspects du BOM :
Le BOM, c'est comme le panneau de contrôle secret de ton navigateur. Il te permet de faire des trucs sympas avec les pages web. Imagine-le comme le tableau de bord de ta voiture, mais pour ton navigateur. Avec le BOM, tu peux ouvrir de nouvelles fenêtres, rediriger vers d'autres sites, et même rafraîchir la page. C'est comme un super-héros pour ton navigateur !
L'Objet window
L'objet window est la fenêtre du navigateur et représente le point d'entrée du BOM. Vous pouvez l'utiliser pour effectuer diverses tâches, telles que :
// Ouvrir une nouvelle fenêtre
let nouvelleFenetre = window.open('https://www.example.com', 'Nouvelle Fenêtre', 'width=600, height=400');
// Rediriger vers une nouvelle URL
window.location.href = 'https://www.example.com';
// Rafraîchir la page
window.location.reload();
La méthode window.setTimeout()
La méthode window.setTimeout() permet de déclencher une fonction après un délai spécifié en millisecondes. Par exemple, pour afficher une alerte après 3 secondes :
setTimeout(function() {
window.alert("Alerte après 3 secondes !");
}, 3000);
La méthode window.setInterval()
La méthode window.setInterval() permet d'exécuter une fonction de manière répétée à intervalles réguliers. Par exemple, pour afficher l'heure toutes les secondes :
Vous allez adorer
setInterval(function() {
let date = new Date();
console.log("Heure actuelle : " + date.toLocaleTimeString());
}, 1000);
La méthode window.clearTimeout()
La méthode window.clearTimeout() permet d'annuler l'exécution d'une fonction prévue avec window.setTimeout(). Par exemple, pour annuler une alerte après 2 secondes :
let alerteTimeout = setTimeout(function() {
window.alert("Cette alerte ne s'affichera pas !");
}, 2000);
clearTimeout(alerteTimeout);
La méthode window.clearInterval()
La méthode window.clearInterval() permet d'arrêter l'exécution répétée d'une fonction prévue avec window.setInterval(). Par exemple, pour arrêter l'affichage de l'heure après 5 secondes :
let intervalID = setInterval(function() {
let date = new Date();
console.log("Heure actuelle : " + date.toLocaleTimeString());
}, 1000);
setTimeout(function() {
clearInterval(intervalID);
}, 5000);
La propriété window.location.hostname
La propriété window.location.hostname permet d'obtenir le nom d'hôte (par exemple, le nom de domaine) de la page actuelle. Par exemple, pour afficher le nom d'hôte de la page :
let nomHote = window.location.hostname;
console.log("Nom d'hôte : " + nomHote);
La propriété window.location.protocol
La propriété window.location.protocol permet d'obtenir le protocole (HTTP ou HTTPS) de la page actuelle. Par exemple, pour afficher le protocole de la page :
let protocole = window.location.protocol;
console.log("Protocole : " + protocole);
La méthode window.focus()
La méthode window.focus() permet de mettre le focus sur une fenêtre ouverte précédemment avec window.open(). Cela peut être utile pour ramener l'attention de l'utilisateur sur une fenêtre spécifique. Par exemple :
// Ouvrir une nouvelle fenêtre
let nouvelleFenetre = window.open('https://www.example.com', 'Nouvelle Fenêtre', 'width=600, height=400');
// Mettre le focus sur la nouvelle fenêtre
nouvelleFenetre.focus();
La méthode window.blur()
La méthode window.blur() permet de retirer le focus d'une fenêtre actuellement active. Cela peut être utilisé pour minimiser une fenêtre. Par exemple :
// Retirer le focus de la fenêtre actuelle
window.blur();
La méthode window.open() avec target="_self"
La méthode window.open() permet également d'ouvrir une nouvelle URL dans la fenêtre actuelle en utilisant target="_self". Par exemple :
// Ouvrir une nouvelle URL dans la fenêtre actuelle
window.open('https://www.example.com', '_self');
La propriété window.innerWidth et window.innerHeight
Les propriétés window.innerWidth et window.innerHeight permettent d'obtenir la largeur et la hauteur de la zone d'affichage du navigateur. Par exemple :
let largeurFenetre = window.innerWidth;
let hauteurFenetre = window.innerHeight;
console.log("Largeur de la fenêtre : " + largeurFenetre);
console.log("Hauteur de la fenêtre : " + hauteurFenetre);
La propriété window.location.pathname
La propriété window.location.pathname permet d'obtenir le chemin d'accès de la page actuelle. Par exemple, pour afficher le chemin d'accès de la page :
let cheminAcces = window.location.pathname;
console.log("Chemin d'accès de la page : " + cheminAcces);
La propriété window.location.search
La propriété window.location.search permet d'obtenir la partie de la chaîne de requête de l'URL de la page. Par exemple, pour afficher la chaîne de requête :
let chaineRequete = window.location.search;
console.log("Chaîne de requête de l'URL : " + chaineRequete);
La méthode window.location.assign() avec une URL relative
La méthode window.location.assign() peut également être utilisée avec une URL relative pour rediriger vers une page à l'intérieur du même site. Par exemple :
// Rediriger vers une page interne
window.location.assign('/nouvelle-page.html');
Annonces (Sponsorisée)
Le DOM (Document Object Model)
Le DOM est une représentation hiérarchique des éléments d'une page web. Chaque élément HTML est représenté par un objet du DOM, créant une structure arborescente. Voici une exploration complète du DOM :
Le DOM, c'est comme la carte au trésor secrète de la page web. Il décompose la page en une structure d'objets et d'éléments. Imagine que tu as une carte qui te montre où se trouvent tous les trésors de la page web, comme les images, les boutons, et les textes. Avec le DOM, tu peux chercher ces trésors, les modifier, et même en créer de nouveaux. C'est un peu comme être l'Indiana Jones du monde numérique, sauf que tu ne risques pas de rencontrer de momies !
Sélection d'Éléments
La première étape pour travailler avec le DOM est de sélectionner des éléments. Vous pouvez le faire de plusieurs manières :
// Sélection par ID
let monElement = document.getElementById('monId');
// Sélection par classe
let elements = document.getElementsByClassName('maClasse');
// Sélection par balise
let paragraphes = document.getElementsByTagName('p');
// Sélection par sélecteur CSS
let element = document.querySelector('.maClasse');
Manipulation d'Éléments
Une fois que vous avez sélectionné des éléments, vous pouvez les lire et les modifier :
// Lire le contenu d'un élément
let texte = monElement.textContent;
// Modifier le contenu d'un élément
monElement.textContent = 'Nouveau contenu';
Création et Modification d'Éléments
Vous pouvez créer de nouveaux éléments, les modifier et les ajouter à la page :
// Création d'un nouvel élément
let nouvelElement = document.createElement('div');
nouvelElement.textContent = 'Nouvel élément';
// Ajout à la page
document.body.appendChild(nouvelElement);
Événements
Les événements sont essentiels pour interagir avec les utilisateurs. Vous pouvez les attacher aux éléments pour déclencher des actions en réponse aux interactions de l'utilisateur :
// Ajouter un gestionnaire d'événements
monElement.addEventListener('click', function() {
alert('L\'élément a été cliqué !');
});
Manipulation Avancée
Le DOM offre des fonctionnalités avancées pour la création de pages web dynamiques. Cela inclut la création d'éléments de formulaire, la manipulation du CSS, l'animation, et bien plus encore. Voici quelques exemples :
// Créer un nouvel élément d'entrée de formulaire
let input = document.createElement('input');
input.type = 'text';
input.value = 'Entrez du texte';
// Modifier le style CSS d'un élément
monElement.style.backgroundColor = '#f2f2f2';
monElement.style.fontSize = '16px';
// Animer un élément
monElement.style.transition = 'transform 0.5s';
monElement.addEventListener('mouseover', function() {
monElement.style.transform = 'scale(1.2)';
});
monElement.addEventListener('mouseout', function() {
monElement.style.transform = 'scale(1)';
});
Suppression d'Éléments
Vous pouvez également supprimer des éléments du DOM :
// Supprimer un élément
let elementASupprimer = document.getElementById('aSupprimer');
elementASupprimer.parentNode.removeChild(elementASupprimer);
Modification du contenu HTML
Vous pouvez également manipuler le contenu HTML d'un élément :
// Lire le contenu HTML
let contenuHTML = monElement.innerHTML;
// Modifier le contenu HTML
monElement.innerHTML = '
Nouveau contenu HTML
';
Ajout de Classes CSS
Vous pouvez ajouter ou supprimer des classes CSS à un élément :
// Ajouter une classe
monElement.classList.add('nouvelleClasse');
// Supprimer une classe
monElement.classList.remove('ancienneClasse');
Création de Fragments de Document
Les fragments de document sont utiles pour optimiser la manipulation du DOM en minimisant les opérations de réaffectation. Vous pouvez les utiliser pour créer des éléments en dehors de la structure principale du DOM :
// Créer un fragment de document
let fragment = document.createDocumentFragment();
// Créer des éléments et les ajouter au fragment
for (let i = 0; i < 10; i++) {
let nouvelElement = document.createElement('div');
nouvelElement.textContent = 'Élément ' + i;
fragment.appendChild(nouvelElement);
}
// Ajouter le fragment au DOM
monElement.appendChild(fragment);
Recherche d'Éléments Parents et Enfants
Vous pouvez accéder aux éléments parents et enfants d'un élément donné :
// Accéder à l'élément parent
let parent = monElement.parentNode;
// Accéder aux éléments enfants
let enfants = monElement.childNodes;
Cliquez sur ce bouton ci-dessous afin que le bot vous explique une aperçu général de ce post
Maintenant, le DOM (Document Object Model), c'est un peu comme la structure de la page web. C'est un arbre qui représente chaque élément de ta page, comme les balises HTML. Chaque élément est un "nœud" dans cet arbre. Avec le DOM, tu peux les atteindre et les manipuler avec JavaScript. Tu peux changer le texte, ajouter de nouveaux éléments, déplacer des trucs, ou supprimer des éléments. C'est ce qui te permet de rendre ta page interactive.
Donc, en gros, le BOM, c'est pour jouer avec le navigateur lui-même, et le DOM, c'est pour jouer avec le contenu de la page web. Quand tu combines les deux, tu peux créer des trucs vraiment cool sur ton site web, mec.
Conclusion
Vous avez maintenant acquis une compréhension approfondie du BOM et du DOM en JavaScript, des bases aux concepts avancés. Ces connaissances sont essentielles pour le développement web interactif et la création d'applications modernes.
Continuez à explorer, à expérimenter et à développer vos compétences JavaScript. Le BOM et le DOM sont des outils puissants qui vous permettront de créer des expériences web exceptionnelles.
