Pour ce septième volet sur l'apprentissage du langage JavaScript moderne, nous allons nous attarder sur l'objet document.
Le but de ce tutoriel en vidéo étant de bien se familiariser avec le DOM (Document Object Model) et d'apprendre à le manipuler très facilement.
Pour cela, nous allons revoir les méthodes suivantes :
- getElementById
- getElementsByTagName
- getElementsByClassName
- querySelector
- querySelectorAll
Une série d'exemples et d'exercices viendront compléter les théories déjà acquises sur ces méthodes, au cours des modules précédents.
Je mets à votre disposition, l'ensemble des codes sources des exercices.
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Accès aux modules précédents sur le JavaScript moderne :
Table des matières de cette formation JavaScript (durée : 1h38m)
-
L'objet document
- Présentation gratuit 00:03:09
- Sélection par l'identifiant 00:08:20
- Manipulations de l'identifiant 00:07:43
- Sélection par la classe 00:07:58
- Manipulations de la classe 00:07:22
- Sélection par un élément HTML 00:04:37
- Manipulations d'un élément HTML 00:05:46
- Sélection par les sélecteurs 1/2 00:06:37
- Sélection par les sélecteurs 2/2 00:04:18
- Manipulation d'un attribut HTML 00:05:35
- Manipulation d'une classe css 00:05:38
-
Exercice 1
- Enoncé 00:01:08
- Correction 00:05:54
-
Exercice 2
- Enoncé 00:02:20
- Mise en place du HTML 00:02:46
- Mise en place du CSS 00:04:03
- Mise en place du JavaScript 1/2 00:05:02
- Mise en place du JavaScript 2/2 00:03:43
-
Conclusion
- Pour le prochain module 00:03:42
- Conclusion 00:02:24
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Tuto de qualité qui permet de se former progressivement au js. Merci
-
Dans le continuité des précédents tutos, avec des mises en situations sous formes d'exercices sympas. Go ! pour le module 8 ! Et j'ai aussi retenu une suite avec des modules de perfectionnement :) Excellente idée et merci Carl ! Yves B.
-
Super tes tutos Carl !! Je suis arrivé à faire vos exercices, pas forcément avec ta solution, mais en terme de ligne de code c'était similaire. Juste une petite question, est il possible de supprimer le tableau des noms et de faire apparaitre la phrase cliquez ici pour rouvrir le tableau ? (à la place de supprimer le tableau) et de cliquer et le tableau réapparait ?
-
Avec quelle version de logiciel ce tuto est-il compatible ?JavaScript
-
Que contient le fichier source ?Les codes sources de ce tutoriel.
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés