Maîtrise Avancée de JavaScript

Contenu du cours

Maîtrise Avancée de JavaScript

Maîtrise Avancée de JavaScript

1. Classes

Bienvenue dans le Cours Déclaration de Classe Défi : Construire une Classe Méthodes de Classe Défi : Ajouter des Méthodes à une Classe Objet Paramètre Propriétés Privées Défi : Implémentation de Propriétés Privées dans une Classe Accesseurs et Mutateurs Défi : Gestion des Propriétés avec Getters et Setters Propriétés Statiques Méthodes Statiques Défi : Utilisation des Propriétés et Méthodes Statiques dans une Classe Héritage avec Extends et Utilisation de super()Défi : Héritage de Classe avec Extends et Utilisation de Super

2. Manipulation du DOM

Qu'est-ce Que le DOM?Interroger le DOM Défi : Interroger le DOM Comprendre la Hiérarchie du DOM Défi : Hiérarchie DOM Propriétés Du DOM Travailler Avec les Attributs des Éléments Défi : Travailler Avec les Propriétés et Attributs des Éléments Ajouter des Éléments Suppression des Éléments Défi : Ajouter et Supprimer des Éléments Modifier les Styles des Éléments Défi : Modifier les Styles des Éléments

3. Événements et Gestion des Événements

Introduction aux Événements et aux Écouteurs d'Événements L'Objet Événement Défi : Événements et Écouteurs d'Événements Propagation et Délégation d'Événements Défi : Propagation et Délégation d'Événements Événements Clavier et Souris Gestion des Écouteurs d'Événements

4. JavaScript Asynchrone et APIs

Introduction à JavaScript Asynchrone Rappels Promesses Async/Await Travailler Avec les APIs Intégration Pratique de l'API Défi : Travailler Avec l'API Travailler avec des Bibliothèques Tierces Défi : Travailler Avec des Bibliothèques Tierces Gestion de Plusieurs Requêtes Asynchrones

Modifier les Styles des Éléments

En développement web, nous avons souvent besoin de modifier dynamiquement les styles des éléments. JavaScript offre deux moyens principaux pour changer l'apparence des éléments : la mise à jour des styles en ligne à l'aide de la propriété style et la gestion des classes avec classList.

Changer les styles en ligne en utilisant la propriété style

La propriété style en JavaScript vous permet de modifier directement le CSS en ligne d'un élément HTML. Cette méthode vous donne un contrôle total sur les propriétés CSS individuelles mais est limitée aux styles en ligne et n'affecte que l'élément spécifique.

Nous pouvons modifier les propriétés CSS individuelles en utilisant la notation par points sur l'objet style d'un élément. Les noms des propriétés sont écrits en camelCase (par exemple, backgroundColor au lieu de background-color).

index.html

index.css

index.js

La propriété style est utilisée pour modifier les styles en ligne de l'élément #box. Chaque propriété CSS est accessible en tant que propriété JavaScript individuelle (par exemple, box.style.backgroundColor), vous permettant de changer dynamiquement des aspects spécifiques du style de l'élément.

Ajouter et supprimer des classes CSS avec classList

La propriété classList offre un moyen plus flexible et puissant de gérer les styles d'un élément en ajoutant, supprimant ou basculant des classes CSS. Cette méthode est plus maintenable que la modification directe des styles en ligne, car elle vous permet de tirer parti des fichiers CSS externes et de garder votre style séparé de votre logique JavaScript.

index.html

index.css

index.js

classList.toggle() est utilisé pour ajouter ou supprimer la classe highlight lorsque le bouton est cliqué. Cette méthode évite d'encombrer l'attribut style en ligne et s'appuie sur des règles CSS prédéfinies pour la maintenabilité.

Exemple Pratique : Changer de Thème

Prenons un exemple pratique où l'utilisateur peut passer d'un thème clair à un thème sombre en utilisant classList.

index.html

index.css

index.js

classList.replace() est utilisé pour échanger les classes light-theme et dark-theme en fonction de l'état actuel.

1. Quelle propriété est utilisée pour modifier les styles en ligne d'un élément ?

2. Comment changeriez-vous la couleur de fond d'un `<div>` avec un ID de `box` en corail en utilisant JavaScript ?

3. Que fait le code suivant ?

Quelle propriété est utilisée pour modifier les styles en ligne d'un élément ?

Sélectionnez la réponse correcte

style

classList

getComputedStyle()

Comment changeriez-vous la couleur de fond d'un <div> avec un ID de box en corail en utilisant JavaScript ?

Sélectionnez la réponse correcte

document.getElementById('box').classList.add('coral');

document.getElementById('box').style.color = 'coral';

document.getElementById('box').style.backgroundColor = 'coral';

document.getElementById('box').setAttribute('backgroundColor', 'coral');

Que fait le code suivant ?

Sélectionnez la réponse correcte

Il ajoute la classe active si elle n'existe pas ; la supprime si elle existe.

Il définit la classe active comme style en ligne sur le bouton.

Il ajoute seulement la classe active sans la supprimer.

Il change la couleur de fond en active.

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 12

We're sorry to hear that something went wrong. What happened?

some-alt