Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. Introduction au JavaScript
  3. Environnement de travail

Les bases en JavaScript

  1. Où écrire le JavaScript
  2. Syntaxe et commentaires
  3. Découverte des variables
  4. Les types de valeurs
  5. Opérations sur les variables
  6. La concaténation
  7. Présentation des conditions
  8. Les conditions if, if...else, if...else if...else
  9. Opérateurs logiques
  10. Evaluation / Simplification des conditions
  11. Conditions ternaires
  12. Switch
  13. Les boucles
  14. Découverte des fonctions
  15. Test n°1

Les objets en JavaScript

  1. Définition et découverte
  2. Valeurs primitives et objets
  3. Créer des objets
  4. Les méthodes de l’objet String
  5. Les méthodes de l’objet Number
  6. Découverte de l’objet Array
  7. Les méthodes de l’objet Array
  8. Découverte de l’objet Date
  9. Les méthodes de l’objet Date
  10. L’objet Math et ses méthodes
  11. Test n°2

Notions avancées sur les fonctions

  1. La portée en JavaScript
  2. Les fonctions anonymes
  3. Les fonctions auto-invoquées
  4. Les closures JavaScript
  5. Test n°3

Le DOM HTML

  1. Découverte du DOM HTML
  2. Accéder à un élément HTML
  3. Modifier du contenu HTML
  4. Ajouter et insérer des éléments HTML
  5. Modifier ou supprimer des éléments HTML
  6. Naviguer dans le DOM
  7. Les évènements en JavaScript
  8. AddEventListener()
  9. Propagation des évènements
  10. L'objet Event
  11. Test n°4

Le BOM - Browser Object Model

  1. Le BOM et l'objet Window
  2. L'objet Screen
  3. L'objet Navigator
  4. L'objet Location
  5. L'objet History
  6. Test n°5

Les expressions régulières

  1. Découverte des regex en JavaScript
  2. Recherches et remplacements
  3. Les quantifieurs et les options
  4. Les classes de caractères et les méta-caractères
  5. Test n°6

JavaScript et formulaires

  1. Rappels sur les formulaires en HTML
  2. Validation HTML des formulaires
  3. Validation JavaScript des formulaires
  4. Test n°7

L'élément HTML canvas

  1. Découverte de l'élément canvas
  2. Dessiner des rectangles
  3. Dessiner des lignes
  4. Dessiner des arcs de cercle
  5. Créer des dégradés
  6. Insérer du texte et des images
  7. Incliner un dessin
  8. Test n°8

Notions avancées

  1. Gestion du délai d'exécution
  2. La gestion des erreurs
  3. Le mode strict
  4. Test n°9

Conclusion

  1. Conclusion - Aller plus loin

LE DOM HTML

Découverte du Document Object Model (DOM)

Durant tout le début de ce cours, nous nous sommes concentrés sur le JavaScript exclusivement afin de bien comprendre son fonctionnement de base.

Maintenant que nous possédons des bases solides en JavaScript, nous allons pouvoir découvrir un autre aspect très intéressant de ce langage : comment manipuler du code HTML (et CSS) avec le JavaScript.

Pour manipuler du code HTML dynamiquement en utilisant le JavaScript, nous allons avoir besoin d’une interface qui va nous permettre d’accéder à ce code HTML.

L’interface que nous allons utiliser va justement être le Document Object Model, ou DOM.

Le DOM est séparé en trois parties : une partie pour le XML, une partie pour le HTML et une partie cœur, accessible pour tous. Nous ne nous occuperons pas ici de la partie XML.

Le Document Object Model d’une page web va être créé automatiquement par votre navigateur lors du chargement de la page.

Le DOM HTML est un standard de programmation reconnu par tous et considère les éléments HTML comme des objets. Ainsi, nos éléments HTML vont posséder des propriétés et des méthodes.

Le DOM HTML va également nous permettre de déclencher ce qu’on appelle des événements, un concept que nous verrons plus tard dans ce cours.

Les chapitres qui vont suivre vont être assez denses car nous allons voir beaucoup de choses nouvelles. Cependant, cette partie est véritablement passionnante de par ce qu’on va pouvoir faire.

N’hésitez donc pas à aller à votre rythme et à revenir plusieurs fois sur chaque point de chaque chapitre afin d’être sûr d’avoir bien tout assimilé.

La structure du DOM HTML

La première chose à savoir concernant la structure du DOM HTML est que tout dans une page HTML va être considéré comme un nœud, ou « node » (qui signifie nœud en anglais) : le document HTML lui même, les éléments HTML, les attributs HTML, le texte à l’intérieur des éléments, etc.

Le terme « node » est un terme générique qui sert à désigner tous les objets contenus dans le DOM. En un mot : tout objet appartenant au DOM est un node, ou un nœud en français.

Ensuite, vous pouvez déjà retenir qu’il y a plusieurs types de nœuds correspondant aux différents objets HTML : le type de nœud ELEMENT_NODE (pour les éléments HTML), le type de nœud TEXT_NODE (pour le texte), etc. Nous reviendrons plus en détail là dessus plus tard dans cette partie.

Le DOM HTML va être construit comme une hiérarchie de nœuds. De cette manière, on prend souvent l’image d’un arbre pour se représenter une page HTML du point de vue du DOM.

Pour comprendre simplement cela, prenons l’exemple d’une page HTML très simple et observons sa représentation sous forme de structure DOM HTML.

Une page HTML simple

Et voici le DOM relatif à cette page qui va être créé par le navigateur :

La représentation de notre page web sous forme de DOM HTML

Dans le schéma ci-dessus, on voit un premier nœud de type élément représenté par l’élément html. Ce nœud possède deux enfants : head et body qui sont également deux nœuds de type Element et qui possèdent eux mêmes d’autres enfants.

Cette structure hiérarchique doit vous sembler assez intuitive puisqu’elle suit l’ordre d’imbrication des éléments dans les autres.

Notez que head et body sont des nœuds « frères » : ils ont le même parent mais il n’y a pas de relation de hiérarchie entre eux.

Remarquez bien également que le texte contenu dans les éléments est ici reconnu comme un nœud (et donc comme un objet) à part entière : de cette façon, nous allons pouvoir le manipuler en utilisant des méthodes et propriétés en JavaScript.

L’histoire et la structure du DOM HTML : explication approfondie

Le DOM est une interface de programmation qui nous permet de manipuler le code HTML d’une page de façon dynamique en utilisant le langage JavaScript.

Le DOM est créé automatiquement lors du chargement d’une page web par le navigateur.

Aujourd’hui, le DOM est un standard et a été unifié : tous les navigateurs raisonnablement récents vont créer le même DOM à partir d’une même page et nous allons pouvoir utiliser les mêmes propriétés et méthodes.

Cependant, vous devez savoir qu’il y a quelques années de cela seulement, chaque navigateur possédait un DOM différent des autres.

Détaillons maintenant ce qu’il se passe exactement lorsqu’une page HTML est chargée par un navigateur.

Lorsqu’une page HTML est chargée par un navigateur, celui-ci crée automatiquement un DOM à partir de cette page.

Le document (ou la page) HTML en soi est représenté dans le DOM par un objet Document. L’objet Document, tout comme tous les autres objets créés par le DOM, est un nœud ou node.

Cet objet Document va donc représenter notre page web en soi et disposer de méthodes nous permettant de modifier cette page web.

L’objet Document va également contenir tous les autres objets créés par le DOM, comme par exemple l’objet Element.

Cela signifie donc que les objets Element vont disposer, en plus de leurs propres propriétés et méthodes, des propriétés et méthodes de l’objet Document par héritage.

Dans les chapitres suivants, nous allons beaucoup travailler avec les objets Document et Element car c’est grâce à eux, principalement, que nous allons pouvoir accéder au contenu de nos pages web et les modifier de façon dynamique.

Chapitre précédent

Chapitre suivant