Deuxième leçon : HTML et JavaScript

HTML Avancé

Dans cette leçon, nous allons explorer certains éléments HTML avancés, comme les formulaires et les tableaux.

Formulaires

Les formulaires sont utilisés pour recueillir des informations. Voici un exemple simple :

Tableaux

Les tableaux permettent de présenter des données de manière organisée. Voici un exemple :

JavaScript Avancé

Nous allons maintenant aborder des fonctionnalités JavaScript plus avancées, notamment les tableaux et la manipulation du DOM.

Tableaux en JavaScript

Les tableaux vous permettent de stocker plusieurs valeurs. Voici comment créer un tableau :

        let fruits = ["Pomme", "Banane", "Cerise"];
    

Manipulation du DOM

Vous pouvez modifier le contenu d'une page dynamique en utilisant le DOM. Voici un exemple :

        document.getElementById("message").innerText = "Bonjour! Vous avez mis à jour ce texte.";
    

Exemple Complet

Voici un exemple complet qui utilise un tableau et manipule le DOM :

        <h2>Mes Fruits</h2>
        <ul id="listeFruits"></ul>
        <button onclick="ajouterFruit('Orange')">Ajouter Orange</button>

        <script>
            let fruits = ["Pomme", "Banane", "Cerise"];
            function afficherFruits() {
                let liste = document.getElementById("listeFruits");
                fruits.forEach(fruit => {
                    let item = document.createElement("li");
                    item.innerText = fruit;
                    liste.appendChild(item);
                });
            }
            function ajouterFruit(fruit) {
                fruits.push(fruit);
                afficherFruits();
            }
            afficherFruits();
        </script>
    

Impression de la page

Cliquez sur le bouton ci-dessous pour imprimer ou sauvegarder cette page en PDF :