Articles
Introduction à JavaScript
JavaScript et HTML

JavaScript et HTML

Cet article explique JavaScript et HTML.

YouTube Video

L'objet window en JavaScript

L'objet window en JavaScript est l'objet global dans un environnement de navigateur, fournissant des fonctions et des informations liées à la page web et à la fenêtre du navigateur. Comme window est l’objet global du navigateur, tout le code JavaScript exécuté dans le navigateur devient une partie de l'objet window. L'objet window joue un rôle important dans l'exécution de JavaScript dans l'environnement du navigateur, en fournissant de nombreuses API et propriétés.

Principales caractéristiques de l'objet window

Propriétés 

 1// Get and display the document's title
 2console.log(window.document.title);
 3
 4// Get and display the current URL
 5console.log(window.location.href);
 6
 7// Go back to the previous page
 8window.history.back();
 9
10// Display the browser's user agent
11console.log(window.navigator.userAgent);
12
13// Display the width and height of the viewport
14console.log(`Width: ${window.innerWidth}, Height: ${window.innerHeight}`);
  • window.document : Accède au document HTML actuel.
  • window.location : Gère l'URL actuelle et la navigation du navigateur.
  • window.history : Accède aux informations de l'historique du navigateur et permet la navigation avant et arrière.
  • window.navigator : Fournit des informations sur le navigateur et le dispositif.
  • window.innerWidth / window.innerHeight : Récupère la largeur et la hauteur de la fenêtre d’affichage (viewport).

Méthodes 

 1// Show an alert
 2window.alert('Hello, this is an alert!');
 3
 4// Show a confirmation dialog
 5if (window.confirm('Are you sure you want to proceed?')) {
 6    console.log('User clicked OK');
 7} else {
 8    console.log('User clicked Cancel');
 9}
10
11// Show a prompt dialog
12const userInput = window.prompt('Please enter your name:');
13console.log(`Hello, ${userInput}!`);
14
15// Open a new tab
16window.open('https://www.example.com', '_blank');
17
18// Display a message after 3 seconds
19window.setTimeout(() => {
20    console.log('This message appears after 3 seconds!');
21}, 3000);
22
23// Display a message every second
24const intervalId = window.setInterval(() => {
25    console.log('This message appears every second!');
26}, 1000);
27
28// Clear the interval after 5 seconds
29setTimeout(() => {
30    clearInterval(intervalId);
31    console.log('Interval cleared.');
32}, 5000);
  • window.alert() : Affiche une boîte de dialogue d’alerte.
  • window.confirm() : Affiche une boîte de dialogue demandant une confirmation de l'utilisateur et renvoie un résultat OK ou Annuler.
  • window.prompt() : Affiche une boîte de dialogue invitant l'utilisateur à entrer une valeur et retourne cette valeur.
  • window.open() : Ouvre une nouvelle fenêtre ou un nouvel onglet.
  • window.setTimeout() / window.setInterval() : Définit un minuteur pour exécuter une fonction après un certain temps ou à intervalles réguliers.

Gestion des événements 

 1// Display a message when the page is fully loaded
 2window.onload = () => {
 3    console.log('Page is fully loaded!');
 4};
 5
 6// Display a message when the window is resized
 7window.onresize = () => {
 8    console.log('Window resized! New size:', window.innerWidth, 'x', window.innerHeight);
 9};
10
11// Display a message when the page is being scrolled
12window.onscroll = () => {
13    console.log('Page is being scrolled!');
14};
  • window.onload : Un événement qui s’exécute lorsque la page est entièrement chargée.
  • window.onresize : Un événement qui s’exécute lorsque la taille de la fenêtre change.
  • window.onscroll : Un événement qui se déclenche lorsque l’utilisateur fait défiler la page.

Rôle comme une variable globale 

1var myVar = 10;
2console.log(window.myVar); // 10
  • L'objet window contient des variables et des fonctions globales. En d'autres termes, les variables et fonctions déclarées deviennent automatiquement des propriétés de window.

Manipulation du DOM en JavaScript

La manipulation du DOM (Modèle Objet de Document) en JavaScript est utilisée pour interagir dynamiquement avec les éléments sur la page web. Le DOM représente la structure d'un document HTML sous forme d'arbre, qui peut être modifiée en utilisant JavaScript pour altérer la structure et contrôler l'affichage de la page.

Principes de base du DOM

Le DOM traite le HTML d'une page web comme des objets, permettant l'accès et la modification des éléments et des attributs. Utilisez l'objet document pour accéder au document HTML.

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <title>Example of DOM Manipulation</title>
 5  </head>
 6  <body>
 7    <div id="content">Hello, World!</div>
 8    <button id="changeText">Change Text</button>
 9  </body>
10</html>

Récupérer les éléments du DOM

JavaScript possède plusieurs méthodes pour accéder aux éléments du DOM.

  • document.getElementById() : Obtenir un élément par son attribut id
  • document.getElementsByClassName() : Obtenir des éléments par nom de classe (HTMLCollection)
  • document.getElementsByTagName() : Obtenir des éléments par nom de balise (HTMLCollection)
  • document.querySelector() : Obtenir le premier élément correspondant en utilisant un sélecteur CSS
  • document.querySelectorAll() : Obtenir tous les éléments correspondants en utilisant un sélecteur CSS (NodeList)

Exemple : getElementById et querySelector 

1const content = document.getElementById('content');
2console.log(content.textContent); // "Hello, World!"
3
4const button = document.querySelector('#changeText');

Manipulation du DOM

Diverses opérations peuvent être effectuées sur les éléments obtenus.

Changer le texte

Pour changer le texte d'un élément, utilisez textContent ou innerHTML.

  • textContent : Obtenir ou modifier le contenu textuel d'un élément. Les balises HTML ne sont pas interprétées.
  • innerHTML : Obtenir ou modifier le contenu HTML d'un élément. Les chaînes contenant des balises HTML sont également traitées.
1content.textContent = 'Hello, world!';  // Change the text
2button.innerHTML = '<strong>Click to change</strong>';  // Change including HTML

Modification des attributs

Utilisez setAttribute() et getAttribute() pour modifier les attributs des éléments.

1button.setAttribute('disabled', 'true');  // Disable the button
2const id = content.getAttribute('id');  // Get the "content"

Modification du CSS

Utilisez la propriété style pour modifier les styles CSS.

1content.style.color = 'red';  // Change the text color to red
2content.style.fontSize = '20px';  // Change the font size

Manipulation des classes

Utilisez classList pour ajouter ou supprimer des classes d'un élément.

  • add() : Ajouter une classe
  • remove() : Supprimer une classe
  • toggle() : Ajouter ou supprimer une classe selon sa présence
  • contains() : Vérifier si une classe existe
1content.classList.add('highlight');  // Add a class
2button.classList.toggle('active');   // Toggle a class

Créer et supprimer des éléments DOM

Créer de nouveaux éléments

Utilisez document.createElement() pour créer un nouvel élément et l'ajouter au DOM.

1const newDiv = document.createElement('div');  // Create a new div element
2newDiv.textContent = 'This is a new element';
3document.body.appendChild(newDiv);  // Append to the body element

Suppression d'éléments

Utilisez la méthode remove() pour supprimer un élément.

1newDiv.remove();  // Remove the created element

Ajouter des événements

Dans le cadre de la manipulation DOM, vous pouvez ajouter des gestionnaires d'événements qui réagissent aux interactions utilisateur. Utilisez addEventListener() pour gérer des événements comme les clics et les interactions clavier.

1button.addEventListener('click', () => {
2    content.textContent = 'The text has been changed';
3});

Dans cet exemple, cliquer sur un bouton modifie le texte de l'élément #content.

Naviguer dans l'arbre DOM

Vous pouvez naviguer dans le DOM pour accéder aux éléments parent et voisins.

  • parentNode : Accéder au nœud parent
  • childNodes : Accéder aux nœuds enfants (de tous types)
  • firstChild / lastChild : Premier/dernier élément enfant
  • nextSibling / previousSibling : Élément suivant/élément précédent
1const parent = content.parentNode;  // Get the parent element
2const firstChild = parent.firstChild;  // Get the first child element
3console.log(firstChild);

Exemple : Ajouter un nouvel élément à une liste

Voici un exemple d'ajout d'un nouvel élément à une liste.

 1<ul id="list">
 2  <li>Item 1</li>
 3  <li>Item 2</li>
 4</ul>
 5<button id="addItem">Add Item</button>
 6
 7<script>
 8    const list = document.getElementById('list');
 9    const addItemButton = document.getElementById('addItem');
10
11    addItemButton.addEventListener('click', () => {
12        const newItem = document.createElement('li');
13        newItem.textContent = 'New Item';
14        list.appendChild(newItem);
15    });
16</script>

Dans ce code, cliquer sur le bouton "Ajouter un élément" ajoute un nouvel élément <li> à la liste.

Résumé

  • La manipulation du DOM en JavaScript vous permet d'obtenir, de modifier, de créer et de supprimer des éléments dans un document HTML.
  • Vous pouvez obtenir des éléments à l'aide de méthodes comme getElementById() et querySelector().
  • Utilisez textContent ou innerHTML pour changer le texte et le HTML, et setAttribute() pour manipuler les attributs.
  • Utilisez createElement() pour créer de nouveaux éléments et remove() pour les supprimer.
  • Vous pouvez créer des pages web interactives qui répondent aux actions de l'utilisateur via la gestion des événements.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Fonctions génératrices en JavaScript