L'essentiel de JavaScript

Comprendre et définir le DOM

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dans cette séquence, vous allez comprendre et définir, en théorie, ce qu'est le Document Object Model (DOM).

Transcription

Nous nous sommes concentrés jusqu'à présent sur du pur JavaScript sur la syntaxe des objets, etc. C'est une bonne manière de démarrer en JavaScript et de comprendre les concepts fondamentaux. N'oublions pas que le JavaScript s'exécute dans un contexte qui est la page web, qu'elle soit très simple ou plus complexe. Nos scripts prennent toujours vie au sein d'une page web. Il est donc important de comprendre les relations étroites qui unissent nos scripts à la page web. Nous devons être capables de manipuler la page web en JavaScript et d'intercepter les messages que nous envoie cette page web. Le Document Object Model (DOM) intervient à ce niveau. Dans Document Object Model, il y a trois mots. Nous allons essayer de les comprendre l'un après l'autre. Qu'est ce que le document ? Il s'agit de la page web. Comment la représente-t-on ? Après tout, laquelle de ces deux images représentent le mieux la page web? Aucune des deux ! Il s'agit de deux points de vue différents sur la même réalité. Le code source est la page web telle que vue par le navigateur et l'image à droite est la page web, telle que vue par l'internaute. La question est de savoir comment le JavaScript voit notre page web. Le JavaScript comprend la page web comme une collection d'objets, ce qui conduit au deuxième mot du Document Object Model. Qu'est-ce qu'un objet? On a déjà travaillé avec des objets. Une raie, un nombre, une date sont des objets. Nous avons même créé nos propres objets en JavaScript. Un objet est une chose. Quand on l'applique à la page web, ces choses peuvent être un titre de niveau 1, une liste non ordonnée ou le document complet, qui est lui aussi un objet. Les objets peuvent eux-mêmes contenir d'autres objets. Vous n'avez aucune difficulté à comprendre que les éléments sont intégrés à l'élément ou que le titre H1 fait partie de l'élément . Il s'agit ici d'une hiérarchie d'objets imbriqués les uns dans les autres. Comment définir les relations que ces objets entretiennent entre eux ? Quel est le vocabulaire à utiliser pour interpeller ces objets ? Quels sont les comportements que nous pouvons attendre de ces objets ? Ces question nous mènent au troisième mot du DOM : Model. Le modèle est une convention, un jeu de termes et de procédures auquel nous adhérons tous. Dans le cas du DOM, le codage HTML est vu comme une structure en arbre. avec l'élément HTML comme racine de l'arbre qui contient et . Le contient lui-même l'élément , etc. Chaque élément est appelé noeud ou node en anglais. Ne les appelez pas des branches ou des feuilles car personne d'autre ne comprendra ce que vous voulez dire. Si vous les appelez des noeuds alors les navigateurs vous comprendront car vous respecterez la convention de vocabulaire établie par le DOM. De même pour la relation qui unit ces éléments. Le "p" par exemple est enfant de Ce n'est pas le subordonné ou le secrétaire de . C'est l'enfant. C'est de cette manière que le DOM a décidé de l'appeler. Le est le parent de "p". Ce n'est pas le supérieur, le chef ou le directeur. C'est le parent C'est de cette manière que le DOM a décidé de l'appeler. Nous arrivons donc à la conclusion suivante: Le DOM est une convention qui permet de manipuler les éléments d'une page web. Le mot convention fait référence à l'idée de modèle. Le mot élément fait référence aux objets de la page. Le mot page web fait référence à l'idée de document. Le DOM est donc une convention. Ce n'est pas une technologie ou un langage. Connaître la convention est considéré comme la plus importante compétence de tout développeur JavaScript. Une fois à l'aise avec cette idée, vous pourrez vous servir du JavaScript pour réaliser plein de choses comme obtenir le titre d'un texte, atteindre le second paragraphe atteindre le troisième lien du menu et changer son CSC, changer la couleur de fond des paragraphes, atteindre les éléments de la dernière liste et les trier par ordre alphabétique atteindre l'image du logo et la déplacer de 40 pixels vers le haut la faire disparaître dans un fondu qui dure 40 secondes changer le comportement des liens, etc. Le DOM est le vocabulaire, le dictionnaire et la grammaire grâce auxquels nous pouvons parler avec nos pages web.

L'essentiel de JavaScript

​Ajoutez des fonctionnalités interactives à vos pages web avec JavaScript. Découvrez la syntaxe, le DOM, l'utilisation des bibliothèques JavaScript populaires, etc.

Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :26 avr. 2016
Durée :5h09 (47 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !