L'essentiel de JavaScript

Travailler avec des chaînes de caractères

Testez gratuitement nos 1309 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Explorez les multiples facettes des variables de type String. Ces chaînes de caractères peuvent être vues comme une variable array de caractères.

Transcription

Si les éléments de notre page web sont vus par le JavaScript comme des objets comme les autres objets, ils doivent avoir des propriétés et des méthodes. Je suis sur une simple page HTML dans Google Chrome. J'affiche directement mes outils de développement. Ils apparaissent dans le fond de la page. Plutôt que de rester sur ma console, comme depuis le début de cette formation, je passe sur l'onglet élément, divisé en deux parties. Dans la partie gauche, e retrouve mon codage HTML. Quand je passe ma souris sur les éléments du codage HTML, l'élément correspondant s'allume dans la partie supérieure de la fenêtre. J'en profite pour cliquer sur le petit triangle devant pour révéler les éléments qui composent la liste non ordonnée. Je sélectionne par exemple le second paragraphe, Dans le panneau à côté, je peux accéder à ses propriétés. puisqu'il s'agit d'un objet qui a des propriétés dans le JavaScript comme les autres objets du monde. Je clique sur le triangle devant "p. second" et voici la liste de ses propriétés auquel le JavaScript me donne accès. Elles sont très nombreuses ! Certaines d'entre elles sont faciles à comprendre. Nous allons en examiner quelques unes maintenant. L'une d'entre elles est la propriété nodeType, égale à 1. Un noeud de type 1 est un element node; le paragraphe est donc considéré comme un élément du DOM. Une autre priorpiété est nodeName, qui est "p", il s'agit du nom de la basile HTML, utilisée pour créer cet élément. Une propriété s'appelle innerHTML et une autre s'appelle inner Text ; ces deux propriétés partagent pour le moment la même valeur, soit le texte contenu à l'intérieur de ce paragraphe. Une autre propriété s'appelle className dont la valeur est "second" Elle correspond à l'attribut class = "second" de l'HTML La propriété a été traduite d'un objet figurant dans le Javascript et le DOM. Une autre propriété id n'a pour l'instant pas de valeur puisque aucun attribut "id" n'existe pour cet élément dans l'HTML. Une propriété intéressante est la propriété childNodes. Cette propriété est une liste des noeuds enfants de cet élément. Il s'agit d'une raie, en l'occurence d'un élément de longueur, qui est stocké à l'index 0 de cette raie. Vous savez que le premier index de toute raie commence à 0. Cet élément est un noeud de type texte, qui est inclus à l'intérieur d'une "p". Si je regarde les propriétés de ce noeud, j'ai affaire à un nodeType de type 3, qui correspond à un text node. Tout à l'heure, le noeud était de type 1, soit un element node. Il s'agit là d'un noeud de type text La nodeValue est le texte \inscrit à l'intérieur du paragraphe. Remarquez que ce texte a également une propriété childNode. Il s'agit là aussi d'une raie, d'une longueur de 0 cette fois, car le noeud text n'a pas lui-même d'enfant. Nous sommes à la fin du DOM tree, l'arbre évoqué dans la dernière vidéo. Prenons un autre exemple : l'élément dont je regarde les propriétés. La propriété id est égale à "list" qui correspond à l'attribut "id" que j'ai inscrit dans le code HTML. En revanche, l'attribut className est vide puisqu'il n'existe pas de "class" pour l'élément "ul". Cet élément est également un noeud de type 1, soit un élément node Cet élément est un élément "ul" comme le montre nodeName : "UL". Son innerHTML précise le code HTML contenu à l'intérieur de cet élément, avec les balises, les retours à la ligne, etc. Le innerText est le texte sans les balises HTML. Dans ce cas-ci, ces deux propriétés ont des valeurs différentes. Il est intéressant de constater que "ul" a lui aussi une propriété childNodes Il s'agit d'une raie d'une longueur de 7 éléments qui sont numérotés de 0 à 6, comme tout index de raie. Ces éléments sont de type "text" et "li". Les éléments de type "text" correspondent aux retours à la ligne pour passer d'une ligne à l'autre du code HTML. Les éléments "li" sont plus intéressants que ces retours à la ligne. Prenons l'élément "li" du milieu - il s'allume dans la partie supérieure- pour observer ses propriétés à lui. Il s'agit d'un noeud de type 1, soit un element node. La balise utilisée est la balise "li". Son inner HTML et son innerText correspondent au contenu de l'élément. Ici, les deux propriétés partagent la même valeur : "Deux paragraphes". Vous pouvez constater que cet élément "li" a lui aussi une propriété chidNodes, qui est la liste des noeuds enfants de cet enfant. L'élément possède un enfant, comme la raie est de longueur 1. L'élément enfant est stocké à l'index 0. Comme il est de type text, le nodeType est 3. La valeur est "Deux paragraphes", soit le contenu de l'élément "li". Cet élément a une propriété childNodes qui n'a pas de longueur. La raie est d'une longueur nulle puisqu'aucun élément enfant n'existe au-delà du texte "Deux paragraphes" , qui est à l'intérieur de "li". J'espère que vous comprenez mieux l'idée d'objet, et le fait que le code HTML a été traduit dans la tête du JavaScript en objet. Ces objets sont chacun affublé d'un grand nombre de propriétés. Avec le JavaScript, nous pouvons accéder à ses propriétés, en modifier la valeur, créer des éléments dans le DOM, les raccrocher comme enfants ou parents d'éléments existants ou bien prendre un élément du DOM et le faire élément enfant d'un autre. donc déplacer des éléments dans le DOM. Le DOM nous permet d'exécuter toutes ces opérations, que nous étudierons ensemble dès la prochaine vidéo.

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 !