Javascript

Les Commandes JavaScript les Plus Utilisées : Exemples d’Applications

JavaScript est le langage de programmation essentiel pour le développement web. Que ce soit pour créer des interactions dynamiques sur une page web ou pour manipuler le contenu en temps réel, JavaScript offre un large éventail de fonctionnalités. Dans cet article, nous explorerons quelques-unes des commandes JavaScript les plus utilisées, accompagnées d’exemples d’application pour illustrer leur utilisation.

1. querySelector()

La méthode querySelector() est utilisée pour sélectionner un élément dans le DOM (Document Object Model) en fonction de son sélecteur CSS. Elle renvoie le premier élément correspondant trouvé dans le document.

Exemple d’Application :
Supposons que nous ayons un élément <div> avec l’ID “exemple” dans notre document HTML. Nous pouvons utiliser querySelector() pour le sélectionner et modifier son contenu.

<!DOCTYPE html>
<html>
<head>
    <title>Exemple d'Utilisation de querySelector()</title>
</head>
<body>

<div id="exemple">Contenu initial</div>

<script>
    // Sélection de l'élément div avec l'ID "exemple"
    const element = document.querySelector('#exemple');

    // Modification du contenu de l'élément
    element.textContent = 'Nouveau contenu';
</script>

</body>
</html>

2. addEventListener()

La méthode addEventListener() est utilisée pour attacher un écouteur d’événements à un élément HTML. Cela permet d’exécuter une fonction spécifique chaque fois que l’événement spécifié se produit sur cet élément.

Exemple d’Application :
Imaginons que nous voulions afficher une alerte lorsque l’utilisateur clique sur un bouton.

<!DOCTYPE html>
<html>
<head>
    <title>Exemple d'Utilisation de addEventListener()</title>
</head>
<body>

<button id="monBouton">Cliquez ici</button>

<script>
    // Sélection du bouton
    const bouton = document.querySelector('#monBouton');

    // Ajout d'un écouteur d'événements au clic sur le bouton
    bouton.addEventListener('click', () => {
        alert('Le bouton a été cliqué !');
    });
</script>

</body>
</html>

3. fetch()

La fonction fetch() est utilisée pour effectuer des requêtes HTTP depuis JavaScript. Elle permet de récupérer des ressources à partir d’URL et de gérer les réponses de manière asynchrone.

Exemple d’Application :
Supposons que nous voulions récupérer des données à partir d’une API et les afficher dans notre page web.

<!DOCTYPE html>
<html>
<head>
    <title>Exemple d'Utilisation de fetch()</title>
</head>
<body>

<div id="contenu"></div>

<script>
    // Utilisation de fetch pour récupérer des données à partir d'une API
    fetch('https://api.exemple.com/donnees')
        .then(response => response.json())
        .then(data => {
            // Manipulation des données récupérées
            const contenu = document.querySelector('#contenu');
            contenu.textContent = `Les données récupérées sont : ${data}`;
        })
        .catch(error => console.error('Une erreur s\'est produite :', error));
</script>

</body>
</html>

4. setAttribute()

La méthode setAttribute() est utilisée pour définir la valeur d’un attribut sur l’élément spécifié. Cela permet de modifier dynamiquement les attributs des éléments HTML.

Exemple d’Application :
Imaginons que nous voulions ajouter un attribut “alt” à une image après son chargement.

<!DOCTYPE html>
<html>
<head>
    <title>Exemple d'Utilisation de setAttribute()</title>
</head>
<body>

<img id="monImage" src="image.jpg">

<script>
    // Sélection de l'image
    const image = document.querySelector('#monImage');

    // Ajout de l'attribut alt après le chargement de l'image
    image.addEventListener('load', () => {
        image.setAttribute('alt', 'Image alternative');
    });
</script>

</body>
</html>

5. innerHTML

La propriété innerHTML est utilisée pour obtenir ou définir le contenu HTML d’un élément. Elle permet d’ajouter ou de modifier du contenu HTML à l’intérieur d’un élément.

Exemple d’Application :
Supposons que nous voulions ajouter une liste à puces à un élément <div> existant.

<!DOCTYPE html>
<html>
<head>
    <title>Exemple d'Utilisation de innerHTML</title>
</head>
<body>

<div id="conteneur">Contenu initial</div>

<script>
    // Sélection de l'élément div
    const div = document.querySelector('#conteneur');

    // Modification du contenu HTML de l'élément div
    div.innerHTML = '<ul><li>Élément 1</li><li>Élément 2</li><li>Élément 3</li></ul>';
</script>

</body>
</html>

6. setTimeout()

La fonction setTimeout() est utilisée pour exécuter une fonction après un délai spécifié en millisecondes. Elle permet de créer des temporisations dans l’exécution du code.

Exemple d’Application :
Supposons que nous voulions afficher un message d’alerte après 3 secondes.

<!DOCTYPE html>
<html>
<head>
    <title>Exemple d'Utilisation de setTimeout()</title>
</head>
<body>

<script>
    // Fonction à exécuter après un délai
    function afficherMessage() {
        alert('Message après 3 secondes !');
    }

    // Appel de la fonction après un délai de 3000 millisecondes (3 secondes)
    setTimeout(afficherMessage, 3000);
</script>

</body>
</html>

Ces exemples représentent seulement quelques-unes des nombreuses commandes JavaScript largement utilisées. En maîtrisant ces fonctions de base, vous pouvez créer des applications web interactives et dynamiques. L’apprentissage continu et l’exploration de nouvelles fonctionnalités vous permettront d’élargir vos compétences en développement web.