Scribd
Importer
7 vues3 pages

JavaScript Jour10 DOM Evenements

Le document présente un cours sur le DOM et les événements en JavaScript, expliquant comment manipuler le contenu HTML et ajouter des événements interactifs. Il couvre des méthodes de sélection d'éléments, la modification de contenu et l'ajout d'événements via des exemples pratiques. Des exercices et un devoir sont également fournis pour renforcer l'apprentissage.

Transféré par

pshonnamba
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
7 vues3 pages

JavaScript Jour10 DOM Evenements

Le document présente un cours sur le DOM et les événements en JavaScript, expliquant comment manipuler le contenu HTML et ajouter des événements interactifs. Il couvre des méthodes de sélection d'éléments, la modification de contenu et l'ajout d'événements via des exemples pratiques. Des exercices et un devoir sont également fournis pour renforcer l'apprentissage.

Transféré par

pshonnamba
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Cours JavaScript - Jour 10 : DOM et Evenements

Cours JavaScript - Jour 10 : Le DOM et les Evenements

Objectifs :

- Comprendre ce qu'est le DOM

- Modifier le contenu HTML avec JavaScript

- Ajouter des evenements (clic, saisie, etc.)

1. Le DOM (Document Object Model)

Le DOM est la representation d'une page HTML vue par JavaScript.

Chaque element HTML devient un objet JS qu'on peut manipuler.

2. Selection d'elements

[Link]("id")

[Link]("classe")

[Link]("#id ou .classe")

[Link]("div")

Exemple :

<p id="message">Bonjour</p>

let para = [Link]("message");

[Link]([Link]); // Bonjour

3. Modifier le contenu

[Link] = "Salut tout le monde !";

[Link] = "red";

4. Ajouter des evenements


HTML :

<button onclick="direBonjour()">Clique ici</button>

JS :

function direBonjour() {

alert("Bonjour !");

Avec addEventListener :

let btn = [Link]("monBtn");

[Link]("click", function() {

alert("Bouton clique !");

});

5. Exercices

Changer un texte :

<h1 id="titre">Bienvenue</h1>

<button onclick="changerTitre()">Changer</button>

function changerTitre() {

[Link]("titre").textContent = "Nouveau Titre";

Afficher un message :

<button id="affiche">Afficher message</button>

<p id="resultat"></p>

[Link]("affiche").addEventListener("click", function() {

[Link]("resultat").textContent = "Tu as clique !";

});

=== DEVOIR ===


Créer une page avec :

- un <input> pour taper un prenom

- un bouton "Afficher"

- un paragraphe vide

- afficher "Bonjour [prenom]" en cliquant

CORRECTION :

<!DOCTYPE html>

<html>

<body>

<input type="text" id="prenom" placeholder="Tapez ici">

<button id="btnAfficher">Afficher</button>

<p id="message"></p>

<script>

[Link]("btnAfficher").addEventListener("click", function() {

let nom = [Link]("prenom").value;

[Link]("message").textContent = "Bonjour " + nom + " !";

});

</script>

</body>

</html>

Resume :

- DOM = structure HTML manipulable

- textContent = changer le texte

- addEventListener = reagir aux actions de l'utilisateur

Vous aimerez peut-être aussi