Scribd
Importer
18 vues3 pages

Module 3-JS

Module 3-JS

Transféré par

eUser456
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
18 vues3 pages

Module 3-JS

Module 3-JS

Transféré par

eUser456
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
Vous êtes sur la page 1/ 3

Voici le module 3 de JavaScript : DOM et

interactions web.

Voici le module 3 de JavaScript : DOM et interactions web.

Introduction au DOM

1. Définition : Document Object Model (modèle objet de document).

2. Rôle : Représentation hiérarchique du code HTML.

3. Avantages : Manipulation dynamique du contenu web.

Sélection d'éléments

1. méthodes : document.getElementById(), document.getElementsByClassName(),


document.querySelectorAll().
2. Exemples :

// Sélection par ID
let element = document.getElementById('monId');

// Sélection par classe


let elements = document.getElementsByClassName('maClasse');

// Sélection par sélecteur CSS


let elements = document.querySelectorAll('.maClasse');

Manipulation du DOM

1. Création d'éléments : document.createElement().


2. Ajout d'éléments : appendChild(), insertBefore().

3. Suppression d'éléments : removeChild().


4. Modification de contenu : innerHTML, textContent.
5. Exemples :

// Création d'un élément


let div = document.createElement('div');
div.textContent = 'Bonjour !';

// Ajout de l'élément
document.body.appendChild(div);
Événements

1. Définition : Actions déclenchées par l'utilisateur.


2. Types d'événements : click, mouseover, keydown, submit.

3. Gestion d'événements : addEventListener(), removeEventListener().


4. Exemples :

// Ajout d'un événement click


document.getElementById('monBouton').addEventListener('click', function() {
console.log('Clic !');
});

Formulaires

1. Sélection de formulaires : document.forms.


2. Récupération de valeurs : element.value.
3. Validation de formulaires : checkValidity().
4. Exemples :

// Récupération de la valeur d'un champ


let valeur = document.forms[0].elements[0].value;

Exercices

1. Créer un bouton qui affiche une alerte.


2. Modifier le texte d'un élément HTML.
3. Ajouter un événement mouseover à un élément.
4. Valider un formulaire.

Ressources

1. Site officiel Mozilla : https://developer.mozilla.org/fr/docs/Web/JavaScript


2. Tutoriels W3Schools : https://www.w3schools.com/js/
3. Livre "JavaScript et DOM" de John Resig

4. Codecademy : https://www.codecademy.com/learn/introduction-to-javascript

Étapes suivantes

1. Module 4 : AJAX et API.


2. Module 5 : Frameworks JavaScript (React, Angular, Vue.js).
3. Projet personnel ou exercices supplémentaires.
4. Étude de la sécurité et des bonnes pratiques.

Vous aimerez peut-être aussi