Environnement navigateur JavaScript, Spécifications
JavaScript est un outil très important utilisé pour rendre les sites web interactifs. Ce guide vous aidera à comprendre comment JavaScript fonctionne dans un navigateur web, en couvrant des sujets importants comme le Document Object Model (DOM), le Browser Object Model (BOM) et comment nous pouvons les manipuler via JavaScript. Nous vous montrerons également quelques exemples de code simples pour vous aider à démarrer.
Qu'est-ce que le Document Object Model (DOM) ?
Le Document Object Model (DOM) est comme une carte du contenu d'un site web. JavaScript vous permet de modifier le contenu, la structure et le design du site web grâce au DOM.
Exemple : Ajout et modification d'éléments
Voici comment ajouter une nouvelle partie à une page web et modifier son contenu. Comme vous pouvez le voir dans l'exemple ci-dessous, il n'y a pas de paragraphe de texte dans le body. Mais le code JavaScript ajoute une nouvelle balise p à l'objet document.
<!DOCTYPE html>
<html>
<head>
<title>Simple DOM Example</title>
</head>
<body>
<script>
// Make a new part of the page
const paragraph = document.createElement("p");
paragraph.textContent = "Hello, JavaScript!";
// Add the new part to the page
document.body.appendChild(paragraph);
</script>
</body>
</html>Result
Qu'est-ce que le Browser Object Model (BOM) ?
Le Browser Object Model (BOM) fournit à JavaScript la capacité d'interagir avec le navigateur. Il comprend plusieurs objets qui permettent aux scripts d'exécuter des fonctions liées au navigateur lui-même, et non pas seulement au contenu de la page web. Le BOM comprend également des objets standard comme history pour gérer la navigation du navigateur et screen pour accéder aux dimensions de l'écran. Pour clarifier la frontière dès le départ : le DOM se concentre sur la structure et le contenu de la page web, tandis que le BOM se concentre sur la fenêtre du navigateur elle-même.
Composants du BOM
window
L'objet window représente la fenêtre du navigateur. Il contient des fonctions pour contrôler le navigateur, y compris la manipulation de la taille et de la position de la fenêtre du navigateur. Voici comment vous pouvez ouvrir une nouvelle fenêtre de navigateur en utilisant l'objet window :
<!DOCTYPE html>
<html>
<head>
<title>Open New Window Example</title>
</head>
<body>
<button onclick="openNewWindow()">Click to Open a New Window</button>
<script>
function openNewWindow() {
// Open a new window and specify its properties
var myWindow = window.open("", "MsgWindow", "width=400,height=200");
myWindow.document.body.innerHTML = "<p>Welcome to a new pop-up window! This is created using JavaScript.</p>";
}
</script>
</body>
</html>Result
Note : Les navigateurs modernes bloquent généralement
window.open()s'il n'est pas déclenché directement par une action de l'utilisateur, comme un clic.
navigator
L'objet navigator contient des informations sur le navigateur, comme le nom, la version et les capacités du navigateur telles que le support des cookies. Voici comment utiliser l'objet navigator pour vérifier si les cookies sont activés :
Location
L'objet location fournit des informations sur l'URL actuelle et peut être utilisé pour rediriger le navigateur vers une autre adresse. Cet exemple affichera divers composants de l'URL (comme le protocole, le nom d'hôte et le chemin) sur la page web.
Autres façons d'utiliser le DOM
JavaScript vous permet également de gérer le contenu du site web de manière dynamique grâce aux événements et aux attributs de données.
Exemple : Gestion des clics et utilisation des données
Voici comment configurer des événements de clic et utiliser des attributs de données :
<!DOCTYPE html>
<html>
<head>
<title>Click Event Example</title>
<style>
#first {
background-color: red;
max-width: 100px;
}
</style>
</head>
<body>
<div id="first">Click me!</div>
<script>
document.getElementById('first').addEventListener('click', function () {
alert(`Item clicked.`);
});
</script>
</body>
</html>Result
Ce code configure un événement de clic pour l'élément div et affiche un message lorsqu'il est cliqué.
Conclusion
Comprendre comment JavaScript interagit avec le navigateur vous permet de créer des sites web réactifs et guidés par l'utilisateur. En maîtrisant le DOM et le BOM ainsi que les meilleures pratiques modernes, vous pouvez créer des applications web fiables et engageantes.
Practice
Quel est le rôle du DOM dans l'environnement navigateur de JavaScript ?