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

Propriétés Du DOM

JavaScript fournit plusieurs propriétés pour accéder et manipuler le contenu. Comprendre ces propriétés vous permet de mettre à jour dynamiquement le contenu des pages web en fonction des interactions utilisateur ou d'autres conditions.

InnerHTML

La propriété innerHTML vous permet d'obtenir ou de définir le contenu HTML d'un élément, y compris les balises et le texte. C'est l'une des propriétés les plus couramment utilisées pour mettre à jour dynamiquement le contenu des pages.

index.html

index.js

Le innerHTML récupère tout le contenu, y compris les balises HTML, et permet d'insérer ou de mettre à jour le contenu avec des balises HTML.

TextContent

La propriété textContent obtient ou définit le contenu texte d'un élément, en supprimant toutes les balises HTML. C'est idéal lorsque vous avez besoin de travailler avec du texte brut sans tenir compte de la structure HTML.

index.html

index.js

Le textContent récupère uniquement le contenu textuel, en ignorant les balises HTML, et définit du texte brut, échappant automatiquement à toute balise.

Valeur

La propriété value est utilisée avec des éléments de formulaire comme <input>, <textarea>, et <select>, vous permettant d'obtenir ou de définir la valeur entrée par l'utilisateur.

index.html

index.js

La propriété value récupère la valeur actuelle des éléments de formulaire et définit une nouvelle valeur pour les éléments input, textarea ou select.

Différences entre InnerHTML et TextContent

Exemple Pratique : Mise à jour d'un Profil Utilisateur

Imaginez une page de profil utilisateur où les données initiales sont affichées, et l'utilisateur peut mettre à jour les détails de son profil à l'aide d'un formulaire. Lorsque l'utilisateur soumet le formulaire, le contenu de la page se met à jour dynamiquement.

index.html

index.css

index.js

Initialement, le profil affiche un nom d'utilisateur et une bio prédéfinis, qui peuvent être modifiés via des champs de saisie. Lorsque le bouton "Enregistrer les modifications" est cliqué, JavaScript met à jour le profil affiché : textContent met à jour le nom d'utilisateur en texte brut, tandis que innerHTML met à jour la bio pour permettre une mise en forme HTML basique, reflétant toutes les modifications effectuées par l'utilisateur.

1. Que fait la propriété `innerHTML` ?

2. Quand utiliseriez-vous `textContent` au lieu de `innerHTML` ?

3. Quelle sera la sortie du code suivant ?

4. Quelle propriété est utilisée pour obtenir ou définir la valeur d'un élément `<input>` ?

Que fait la propriété innerHTML ?

Sélectionnez la réponse correcte

Elle récupère uniquement le contenu textuel d'un élément.

Elle obtient ou définit le contenu HTML d'un élément, y compris les balises et le texte.

Elle récupère la valeur d'un champ de saisie.

Elle ne récupère que les nœuds enfants d'un élément.

Quand utiliseriez-vous textContent au lieu de innerHTML ?

Sélectionnez la réponse correcte

Lorsque vous devez définir ou récupérer du contenu en tant que texte brut, sans balises HTML.

Lorsque vous souhaitez ajouter plusieurs éléments enfants.

Lorsque vous devez définir du HTML avec des balises.

Lorsque vous travaillez avec des éléments de saisie.

Quelle sera la sortie du code suivant ?

Sélectionnez la réponse correcte

Hello, <strong>World!</strong>

Hello, World!

<strong>World!</strong>

World!

Quelle propriété est utilisée pour obtenir ou définir la valeur d'un élément <input> ?

Sélectionnez la réponse correcte

textContent

innerHTML

value

placeholder

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 6

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

some-alt