Modification d'éléments du DOM

Modification d'éléments du DOM

Aperçu indisponible

Vous devez vous connecter ou vous inscrire pour voir cette leçon.

Se connecterS'inscrire

Module intermédiaire

Acheter maintenantEn savoir plus

Fiche de synthèse

  • Fiche de synthèse2

Les bases du JavaScript (suite)

  • Les littéraux de gabarits (template strings) : interpolation d'expressions17
  • Raccourcis d'opérateurs, opérateurs puissance et modulo14
  • Les types primitifs5
  • La conversion de types11
  • Quiz #1
  • Structures conditionnelles else if et switch9
  • L'opérateur conditionnel '?'11
  • Déclarer des variables avec const, let et var5
  • La portée des variables avec let et const8
  • La portée des variables avec var1
  • Quiz final

Les objets

  • Introduction24
  • Différences entre classes et prototypes4
  • Que se passe-t-il dans la mémoire de l'ordinateur ?13
  • Imbrication d'objets, exemple avec l'API de Twitter12
  • Quiz final

La POO : Programmation Orientée Objet

  • Les fonctions de première classe17
  • Les méthodes : des fonctions dans des objets8
  • Pourquoi apprendre la POO ?10
  • Quiz final2

Les projets : objectifs et fonctionnement

  • Objectifs des projets2
  • Créer un site web de zéro depuis Visual Studio Code11

Lien entre HTML et JavaScript

  • Introduction au DOM et différences entre NodeJS et Chrome8
  • Qu'est-ce que le DOM ? Que contient-il ?7
  • Sélection d'éléments du DOM6
  • Modification d'éléments du DOM7
  • Création et insertion d'éléments dans le DOM10
  • Déplacer et supprimer des éléments du DOM
  • Traverser les éléments du DOM13

Projet #1 : Compteur de clics

  • Présentation du compteur de clics4
  • Les évènements (+ énoncé exercice incrémentation)8
  • Solution incrémentation et comment déboguer dans Chrome (instruction debugger)18
  • Solution décrémentation et bouton reset11
  • Détecter un clic droit10
  • Solution zone de clic12
  • Lire la valeur d'un élément input2
  • Solution incrémenter et décrémenter le compteur des valeurs des inputs3
  • Comment afficher temporairement une notification ?
  • Solution gestion des limites et notifications15
  • Conclusion et conseils5

Les tableaux

  • Introduction
  • Lecture et itération via une boucle
  • Modifier un élément et rappels
  • Documentation du MDN : l'exploiter efficacement25
  • Tableaux multidimensionnels
  • Quiz final

Les types d'objets standards en JavaScript

  • String et les objets "enveloppeurs" (wrappers)32
  • Number2
  • Boolean
  • Date
  • RegExp (expression régulières)
  • Object3
  • La librairie Math2

BONUS Projet #2 : Animation changement d'ordre

  • Démo de l'animation et explications
  • Phase de décollage
  • Phase de déplacement 1/6
  • Phase de déplacement 2/6
  • Phase de déplacement 3/6
  • Phase de déplacement 4/6
  • Phase de déplacement 5/6
  • Phase de déplacement 6/6
  • Déplacement des items de la liste 1/4
  • Déplacement des items de la liste 2/4
  • Déplacement des items de la liste 3/4
  • Déplacement des items de la liste 4/4
  • Remaniement du code
  • Mise à jour du DOM 1/4
  • Mise à jour du DOM 2/4
  • Mise à jour du DOM 3/4
  • Mise à jour du DOM 4/45
  • Sauvegarde et remaniement1

Projet #2 : Liste de courses

  • Présentation du projet2
  • Fonctionnement des exercices
  • Ajout d'un nouvel item11
  • Template nouvel item3
  • Template nouvel item (fin)5
  • Correction des espaces11
  • Majuscule première lettre3
  • Validation valeur filtrée5
  • Messages d'erreurs 1/22
  • Messages d'erreurs 2/24
  • Minimum 2 lettres 1/2
  • Minimum 2 lettres 2/2
  • Insertion intelligente 1/52
  • Insertion intelligente 2/54
  • Insertion intelligente 3/5
  • Insertion intelligente 4/5
  • Insertion intelligente 5/5
  • Refactoring
  • Réduire la maintenance
  • Sauvegarder les données 1/2
  • Sauvegarder les données 2/2
  • Chargement des données 1/2
  • Chargement des données 2/2
  • Modification du nom de l'item 1/46
  • Modification du nom de l'item 2/4
  • Modification du nom de l'item 3/4
  • Modification du nom de l'item 4/44
  • Modification de la quantité de l'item
  • Sauvegarde automatique des données 1/4
  • Sauvegarde automatique des données 2/4
  • Sauvegarde automatique des données 3/4
  • Sauvegarde automatique des données 4/43
  • target VS currentTarget
  • Supprimer un item 1/2
  • Supprimer un item 2/23
  • Exportation des données4
  • Changement de l'ordre des items 1/52
  • Changement de l'ordre des items 2/5
  • Changement de l'ordre des items 3/5
  • Changement de l'ordre des items 4/5
  • Changement de l'ordre des items 5/52
  • Affichage de l'indicateur 1/11
  • Affichage de l'indicateur 2/112
  • Affichage de l'indicateur 3/11
  • Affichage de l'indicateur 4/11
  • Affichage de l'indicateur 5/11
  • Affichage de l'indicateur 6/11
  • Affichage de l'indicateur 7/11
  • Affichage de l'indicateur 8/11
  • Affichage de l'indicateur 9/11
  • Affichage de l'indicateur 10/11
  • Affichage de l'indicateur 11/11

Module algorithmique

  • Que faire après le module intermédiaire ?3