Apprenez la manipulation de DOM JavaScript en 1 heure - Créer des boutons et plus !

1. Introduction: Bonjour et bienvenue dans ce cours sur la manipulation DOM. Je m'appelle Taylor English. Je serai votre instructeur pour le cours, et je suis très enthousiaste à ce sujet. J'ai créé ce cours pour que vous puissiez facilement comprendre la manipulation DOM afin que vous puissiez vous amuser à changer de CSS, boutons, à faire des choses, créer des éléments par programmation. C'est à cela que sert ce cours. Et j'ai facilité la compréhension pour les débutants. Et les gens expérimentés vont adorer, je suis sûr que ça vous plaira. Maintenant, je veux passer en revue ce dont nous allons parler. Mais avant de le faire, je veux vous dire où trouver d'autres vidéos comme celle-ci. Dans d'autres cours, vous pouvez regarder des vidéos gratuites sur ordinateur, trucs et astuces et résoudre des problèmes, ainsi que des programmes sur ma chaîne YouTube, qui est youtube.com slash C plus hacker, le tout expliqué. Il y a beaucoup d'excellents tutoriels. J'ai un cours de Skillshare que vous pouvez regarder appelé angular 11 pour les débutants, qui s'applique également à Angular 12, je crois. Mais il s'agit d'apprendre des composants, des services de routage, toutes ces choses formidables. Je pense que vous pourriez vraiment l'apprécier si vous appréciez ce cours. Et vous pouvez trouver qu'à ce lien, je vais essayer de le mettre dans la description de cette classe, cette vidéo. C'est juste un peu à propos de moi. Je suis étudiant à l'université en informatique. Il y a peut-être une certaine crédibilité pour vous, mais honnêtement, j'adore enseigner cela et c'est pourquoi je veux le partager. Donc ce cours, ce que nous allons passer en revue , c'est cinq choses de base. abord, je vais vous montrer comment configurer vos fichiers. Cela ne fait pas vraiment partie de la manipulation DOM, mais il inclut certains aspects importants, comme la liaison correcte de vos fichiers pour votre JavaScript et votre CSS. Ensuite, nous allons passer à la sélection des éléments, saisir le code HTML et à pouvoir faire les choses avec lui, enregistrant dans des variables. Je parlerai ensuite de la création d'éléments par programmation pour que vous puissiez les créer et les ajouter à certaines parties de la page via JavaScript. Ensuite, nous allons manipuler des éléments avec CSS et des choses comme ça. Vous pouvez donc modifier la couleur de votre page. Vous pouvez faire toutes sortes de choses via JavaScript. Enfin, nous parlerons des boutons et de la façon dont vous pouvez cliquer sur un bouton et exécuter des fonctions si les instructions sont en boucle. Nous allons entrer dans les détails là-dessus. J'espère que ça vous plaira. Ça va être vraiment amusant. Et je vous verrai dans la prochaine vidéo. 2. Configurer votre environnement: Très bien, il est temps de commencer notre première leçon. Avant de nous lancer dans la manipulation DOM, nous allons commencer par configurer nos fichiers, simples fichiers HTML, JavaScript et CSS. Allons-y et faisons-le. Vous devez créer un dossier dans lequel vous pouvez travailler sur ce projet. J'ai appelé ma manipulation DOM. Vous pouvez appeler le vôtre comme vous le souhaitez. Je vais travailler dans VS Code, ce que je recommande vivement. Créons un fichier et nous appellerons ce fichier index.html. Commençons maintenant. Sauvons ça. Créez nos balises HTML. À l'intérieur, nous voulons notre étiquette de tête, et à l'intérieur de cela, nous voulons notre étiquette de titre. Je vais juste dire la relation avec Dom. Maintenant, sous l'étiquette principale, vous devez mettre une étiquette corporelle. Ce n'est pas ce que je voulais dire. OK. Dans le body tag, nous pouvons simplement dire, mettons une étiquette de paragraphe et disons bonjour le monde. Créons maintenant un fichier JavaScript et CSS que nous allons commencer à utiliser dans les prochaines vidéos. Nous allons appeler celui-ci app.js. Pour s'assurer que celui-ci fonctionne. Je vais faire console.log. Bonjour tout le monde. Une fois encore. Maintenant, pour lier cela sous la balise body, nous allons mettre une balise source de script, et nous allons mettre app.js. Maintenant, c'est important car nous voulons que le JavaScript s'exécute fois que le reste du code HTML a déjà été défini. Il s'en prend à l'étiquette du corps. La syntaxe est script, puis la source est égale, puis le nom de votre fichier JavaScript. Encore une fois, vous pouvez appeler le vôtre comme vous le souhaitez. Faisons maintenant notre CSS. Je vais appeler ce style.css pour m' assurer que cela fonctionne. Faites du corps et nous ferons une couleur de fond de vert. Maintenant, nous lions la feuille de style, le style.css ici dans la balise de tête. Créons une balise de lien. Et vous pouvez accéder au CSS ici si vous avez l'abréviation Emmett. Mais tout ce qui va faire, c'est dire au code qu'il s'agit d'une feuille de style et donne le lien vers le fichier style.css. C'est donc notre syntaxe de base. C'est tout ce dont nous avons vraiment besoin pour commencer. Site Web très simple. Allons-y et ça. Maintenant, dans cette classe, je vais utiliser une extension VS Code pour tester cela. Et je vais vous montrer ce que c'est et comment l'obtenir. Voyons voir. Cette extension s' appelle Live Server. Si vous accédez à l'onglet Extensions ici dans le code VS, vous pouvez simplement effectuer une recherche. serveur Live devrait être l' une des premières choses qui apparaissent. Vous voudrez simplement l'installer. Maintenant, ce que cela va faire , c'est que lorsque nous entrons dans notre fichier HTML, nous pouvons cliquer avec le bouton droit de la souris et dire Ouvrir avec le serveur live. Nous pouvons également arrêter le serveur ici. Et il devrait également y avoir un bouton en bas qui indique Go Live. Ce bouton n'apparaît pas toujours. Je me fie donc généralement à ce menu contextuel. Si nous ouvrons avec un serveur live ici, c'est ce que nous obtenons. Nous obtenons notre Hello World vert afin savoir que la feuille de style est correctement connectée et configurée. Le code HTML est bon. Il est écrit Hello World. Si nous appuyons sur Control Shift I sous Windows, cela ouvrira notre console et cela indique Hello World. Une fois encore. Nous savons que tout fonctionne correctement ou JavaScript est correctement connecté. Tout fonctionne sur ce front et vous n'avez pas à vous soucier de ce message d'erreur. Ce n'est pas très pertinent pour ce sur quoi nous essayons de travailler en ce moment. Mais c'est la configuration de base. Juste un récapitulatif rapide. Vous voulez trois fichiers, index.html, app.js et style.css. Et n'oubliez pas que app.js est lié dans une balise de script sous la balise body, mais toujours dans HTML. Et la feuille de style se trouve dans une balise de lien dans la tête. OK ? Très bien, je vous verrai dans le prochain. 3. Sélectionner des éléments: Très bien, nous allons maintenant parler de la sélection d'éléments. Au sein de la manipulation DOM. Il est très important que le code sache obtenir les différents éléments HTML et faire les choses avec eux. Nous allons commencer par aller dans notre fichier app.js. Nous pouvons supprimer cette déclaration de journal ici. Maintenant, sur notre site Web, nous avons notre Hello World. Juste ici. Disons que nous voulons sélectionner Helloworld pouvoir le manipuler ou faire quelque chose avec. Maintenant, Hello World n' est qu'une balise de paragraphe. Il ne possède pas de classes ni d'identifiants. Je vais vous montrer comment le sélectionner comme ceci, mais aussi comment le sélectionner avec une classe ou un ID. Maintenant, pour le sélectionner comme ça, en fait, je vais commencer par utiliser un ID ou une classe. Commençons par un ID dans notre ID de type de balise de paragraphe, et nous allons simplement lui donner le nom bonjour. Passons maintenant à app.js. Et nous voulons le faire, c'est que nous voulons stocker la balise de paragraphe dans une variable afin que nous puissions faire les choses avec elle. Nous allons dire, disons que le paragraphe est égal. Nous allons maintenant taper un document. Document est la façon dont vous accédez au modèle d'objet de document. C'est ce que nous utilisons. Presque toutes ces commandes, sinon toutes, commencent par un document. Nous disons point de document, obtenons élément par ID et veillons à ce que le D dans ID soit en minuscules. Maintenant, VS Code est vraiment génial et devrait vous suggérer ces choses. Si ce n'est pas le cas, consultez le magasin d'extensions pour trouver une extension JavaScript gratuite pour la mise en évidence de la syntaxe. Nous avons dit obtenir un élément par pièce d'identité. La carte d'identité est bonjour. Nous mettons des parenthèses et entre guillemets simples diront bonjour. Maintenant, ce que nous pouvons faire, c'est que nous pouvons faire un console.log sur l'élément de paragraphe. Et cela nous montrera ce que nous avons réellement sélectionné afin que nous puissions voir ce que nous faisons. Si nous le sauvegardons. J'ai oublié de mentionner dans la dernière vidéo, chaque fois que nous enregistrons des modifications dans ces fichiers, le serveur en direct actualisera automatiquement la page pour que vous n'ayez pas à le faire. Si nous venons ici, il est toujours dit Hello world. Appuyez donc sur Control Shift. Je crois que c'est Command Shift I sur Mac. Si ce n'est pas le cas, regardez simplement ce qu'est cette commande, vous verrez qu'elle a enregistré cet élément. Donc, si nous regardons le code, nous avons dit que le paragraphe est égal à document.getElementByID. Ce que nous avons fait, c'est que nous avons effectivement récupéré l'élément du code HTML et que nous l'avons défini comme égal à cette variable. Explorons un peu cela et laissez-moi vous montrer quelques-unes des propriétés qu'il possède. Si nous allons au paragraphe ici et que nous appuyons sur point, cela va suggérer toutes sortes de choses. Il y a toutes sortes d'attributs auxquels nous pouvons accéder à partir de là. Supposons, par exemple, que nous voulions accéder au texte à l'intérieur. Nous pouvons dire TextContent. Et maintenant, nous enregistrons le contenu texte, qui est HelloWorld. Il y a maintenant un certain nombre de choses auxquelles vous pouvez accéder à partir d'ici et nous en reviendrons plus tard lorsque nous manipulerons les styles et rendrons les boutons interactifs dans ce type de choses. Mais pour l'instant, c'est ainsi que nous sélectionnons un élément. Disons donc qu' il y a un cours. Nous ferons la même chose avec bonjour, mais ce sera un cours. Au lieu de dire obtenir élément par ID, nous voulons utiliser get elements by class name. Maintenant, le cours que nous avons mis ici est bonjour. Voyons ce qui se passe lorsque nous avons enregistré cela. Vous pouvez voir qu'il a évoqué quelque chose appelé collection HTML. Et si nous ouvrons cela , c'est un tableau. Le premier élément de l'index 0 est une balise de paragraphe avec une classe Hello. Et si nous voulions simplement l'élément ? Comment pouvons-nous choisir cela ? Eh bien, le problème avec les classes c'est que plusieurs objets peuvent avoir une classe. si vous sélectionnez les éléments par nom de classe, il obtiendra un tableau de chaque élément qui porte ce nom de classe, même s'il n'y en a qu'un. Maintenant, les identifiants sont différents car vous ne devez placer un ID que sur un seul élément. Ainsi, lorsque vous dites obtenir un élément par ID, il vous le donne directement car il ne devrait y avoir qu' un seul élément avec cet ID. Si nous voulons accéder à l'élément spécifique, nous savons que dans le code c'est le premier, c'est le premier endroit où nous voyons cette classe de bonjour. Ensuite, juste après cela, nous pouvons mettre des crochets pour accéder au 0e index. Et cela va accéder à ce premier élément, qui sera la balise que nous voulons. Si nous sauvegardons cela et que nous revenons ici, vous pouvez voir que nous avons sélectionné l'ensemble de cet élément. Maintenant, nous pouvons faire la même chose sans utiliser de classe ou d'ID. Supposons, par exemple, que nous voulions simplement sélectionner toutes les balises de paragraphes. Je peux le faire est venir ici et dire document point obtenir élément par nom de balise. N'oubliez pas que les étiquettes sont ces objets ici même dans les carottes ou tout ce que vous appelez ces choses. Nous pouvons obtenir toutes les balises de paragraphe en disant GetElementsByTagName p pour paragraphe, assurez-vous que c'est entre guillemets. Qu'est-ce que cela nous montre ? Encore une fois, cela nous montre une collection HTML car nous pouvons avoir plusieurs éléments, plusieurs balises de paragraphe. Voyons ce qu'il nous montre ici. Dans l'index de largeur 0, nous avons notre balise de paragraphe. Dans le premier indice. Il y a aussi quelque chose. Je vais devoir vérifier et voir pourquoi c'est le cas. D'accord. J'ai donc juste fait une pause pendant une seconde et j'ai compris quel était le problème. Le problème était que dans notre code HTML, j'ai dû ouvrir des balises pour la balise de paragraphe au lieu d' avoir la barre oblique ici pour la fermer. Oups, il pensait qu'il y avait deux étiquettes P distinctes. J'ai réparé ça. Et si nous passons à app.js, nous pouvons voir qu'il est écrit GetElementsByTagName, nous obtenons le p. Ensuite, si nous venons ici et que nous regardons dans Chrome ici, vous pouvez voir que c'est un tableau avec un seul élément. Maintenant, encore une fois, nous faisons la même chose. Nous pouvons faire la même chose que pour les classes où nous pouvons sélectionner l'index zéro et voir la balise exacte. Nous avons appris à sélectionner des éléments par balise, nom, ID et classe. Quelle est la prochaine étape ? Supposons que vous souhaitiez sélectionner un élément en fonction de plusieurs attributs et pas seulement de sa balise, sa classe ou de son ID. C'est là que le sélecteur de requêtes entre en jeu. Disons que nous avons cette balise de paragraphe Hello World ici. Donnons-lui une classe de bonjour. Ensuite, nous aurons une autre balise de paragraphe qui a également une classe de bonjour, mais elle a aussi un identifiant, disons des crêpes. Nous pouvons dire quelque chose ici. crêpes sont incroyables. Si nous sortons, voyons si nous obtenons des éléments par nom de balise et nous en sortons. Voyons quoi, ce qui arrive. Ok, donc nous avons cette matrice. Encore une fois, il y a deux éléments. Maintenant, même si nous disons obtenir des éléments par ClassName, nous disons bonjour. Il va renvoyer deux objets. Nous pouvons donc préciser un peu plus loin ce que nous voulons. Si je veux qu'il ait une classe de bonjour et un identifiant de crêpes, c'est là que je peux utiliser le sélecteur de requêtes. Ce que nous voudrions faire, c'est passer à app.js. Disons que le sélecteur de requêtes de points de document. Sélecteur de requêtes. Fondamentalement, vous pouvez lui attribuer plusieurs attributs différents d' un objet et il les trouvera plutôt que de spécifier un identifiant, une classe ou un nom de balise. Disons que nous voulons une balise de paragraphe et que nous savons qu'elle a une classe de bonjour. Nous avons mis un point bonjour. La raison pour laquelle nous avons mis un point est que c' la syntaxe que nous utiliserions dans notre feuille de style. Par exemple, si nous voulions accéder à la classe Hello, nous dirions un oreiller à points, puis nous lui donnerions des styles. C'est la même chose que nous faisons ici. Maintenant, les identifiants sont sélectionnés à l'aide du signe dièse. Je vais vous le montrer dans une minute. Sortons ceci et voyons ce qui se passe. Lorsque nous avons sélectionné la classe Hello, il a choisi le premier objet que j'ai pu trouver. Et c'est en quelque sorte la façon dont fonctionne le sélecteur de requête, est-ce qu'il lie le premier objet correspondant à vos paramètres. Mais ce n'est pas ce que nous voulions. Nous voulions que les crêpes soient incroyables. Nous pouvons préciser plus loin et dire livre des crêpes. Si vous vous en souvenez, nous avons eu l'idée de crêpes ici. Maintenant, si nous sortons cela, il a obtenu l'élément que nous voulions. Cependant, parce que les crêpes ont une pièce d'identité qui la rend unique et que nous n'avons pas vraiment besoin de tout cela. Nous pouvons nous débarrasser de la plupart de ces choses et simplement dire une carte d'identité de crêpes qui a le même effet. C'est suffisamment précis pour qu'il sache ce que nous voulons. Vous pouvez donc voir que nous avons une syntaxe similaire pour faire la même chose. Il y a différentes façons de le faire. Si je dis le paragraphe deux. C'est donc une syntaxe assez similaire ici , nous avons un sélecteur de requêtes qui obtient la première chose avec une idée de crêpes. Ici, on a tout ce qui a une idée des crêpes. Vous pouvez donc voir qu'il existe différentes façons de faire les mêmes choses. Maintenant, disons que lorsque nous regardions le p dot bonjour, il est apparu avec juste la première chose que j'ai trouvée, est ce que fait QuerySelector. Et si je veux tout ce qui correspond maintenant ? Eh bien, ce que je peux faire, c'est que je peux utiliser quelque chose appelé QuerySelector. Tout ce que nous mettrons dans la même chose. Nous allons dire bonjour à p dot. Cela nous a donné ce tableau de liste de nœuds des deux attributs. Pourquoi avoir des sélecteurs de requêtes si nous avons les autres ? Eh bien, QuerySelector est que vous devez faire beaucoup de ce genre de sélection d'éléments différents. sélecteur de requête peut être agréable car vous n' avez pas à vous souvenir. Obtenir élément par ID, élément par classe. Vous n'avez pas à taper tout ça. Vous dites simplement sélecteur de requête, puis spécifiez, oh, celle-ci est une classe, celle-ci est un ID. Celui-ci n'est qu'une étiquette. Donc, si nous voulions juste la balise, nous pourrions nous débarrasser du point bonjour et simplement dire sélecteur de requête tout p. et ça va trouver tout ce qui est un élément p. Ce sont les différentes façons de sélectionner des éléments et cela sera très utile lorsque nous commencerons à manipuler CSS et à utiliser des boutons et des choses comme ça. Je vous verrai dans le prochain. 4. Créer des éléments: Nous allons maintenant en apprendre davantage sur la création d'éléments. Fondamentalement, nous allons créer diverses balises par programmation, y ajouter des classes et des identifiants, styles, toutes ces sortes de choses. Et nous allons les insérer dans la page. Commençons par notre fichier app.js. Je vais supprimer tout ça. Supposons que nous voulions créer un bouton en dessous de cela. Je vais aussi me débarrasser des crêpes incroyables. Supposons que nous voulions créer un bouton en dessous de cela qui, plus tard, nous le ferons changer la couleur d'arrière-plan de la page. Mais pour l'instant, nous allons simplement le créer et le mettre dans la page. Ce que nous voulons faire, c'est créer un élément. Nous appellerons ce bouton, serons très créatifs et le définirons comme élément de création de points de document. Comme pour les sélecteurs que nous utilisons, vous allez faire des guillemets simples, puis le nom de la balise, qui est le bouton. S'il s'agissait d'une balise de paragraphe, vous direz p. Si c'était une balise div, il suffit de dire div. C'est très simple. Nous avons créé un bouton. Maintenant, cela n'a rien fait sur la page, car tout que nous avons fait est de la définir comme une variable. Allons console.log ceci et voyons ce que nous avons. Nous avons juste une étiquette de bouton vide. Ajoutons-y du texte. Pour ce faire, nous devons créer ce qu'on appelle un nœud de texte. Disons, noeud de texte égal à point de document créer un nœud de texte. Disons maintenant que nous voulons qu'il dise changer d'arrière-plan, de couleur. Nous changeons simplement la couleur pour être simple. Maintenant, si nous revenons en arrière et que nous regardons, nous avons créé le manuel, mais nous ne l'avons pas mis dans le bouton. Donc, ce que nous devons faire, c'est dire bouton point ajouter. En fait, nous allons ajouter un enfant dira nœud de texte. Cela signifie maintenant que le bouton ou le texte est un enfant ou qu'il se trouve à l'intérieur de la balise bouton. Si nous disons Enregistrer, cela nous montre que nous avons ce bouton ici. Et il possède tous ces attributs. Nous avons notre bouton. Nous voulons le mettre sur la page. Supposons que nous voulions l'insérer juste après cette balise HelloWorld. Passons à un identifiant pour faciliter la sélection. Ce que nous devons faire, c'est sélectionner la balise HelloWorld, puis mettre le bouton « mettre notre bouton » juste après, y ajouter. Ce que nous allons faire, c'est dire Bonjour, World document égal point QuerySelector. Et nous allons dire bonjour. Après cela, nous voulons dire bonjour point ajouter le bouton. Maintenant, vous pouvez voir que nous avons mis le bouton juste après. Il ne fait rien, c'est juste du texte et on peut cliquer dessus. Mais c'est plutôt cool, non ? Voyons voir. Nous l'avons eu juste après le texte. Pour le rendre un peu plus joli, peu plus facile à regarder. Nous allons modifier certains styles dans style.css. Allez dans Button. Styles pour le bouton, Toutes les balises de boutons. Techniquement, nous voulons dire bloc d'affichage car actuellement boutons sont affichés en ligne par défaut, ce qui signifie qu'ils peuvent s'afficher juste à côté du texte ou d'autres objets. Un écran en bloc. Nous allons le mettre en dessous, il affichera des blocs. Si nous disons bloc d'affichage, cela sera en dessous, nous voulons lui donner un peu d'espace entre Hello World et lui-même. Faisons donc, faisons une marge. En fait, il ne fera qu'une marge. Cinq pixels supérieurs, peut-être dix pixels. Super. Nous avons notre bouton, nous l'avons créé. Que pouvons-nous faire d'autre avec ce bouton pendant que nous le créons ? Ce qui est intéressant, c'est qu'il est presque plus facile de créer le bouton et de tout mettre à l'intérieur avant de le jeter sur la page. Bien sûr, vous pouvez le sélectionner plus tard et faire des choses avec. Mais si vous savez que vous êtes une classe, si vous savez que vous voulez des styles avec elle, il est plus facile de le placer dans un seul paquet avant de l'envoyer sur la page. Je vais vous montrer ce que je veux dire. Nous avons notre nœud de texte. Disons. Nous voulons également changer le style. Maintenant, dans la vidéo suivante, je vais m'intéresser davantage manipulation de style et à ce genre de choses. Mais très brièvement, disons que nous le voulons. Mais faisons un style de point de bouton. Maintenant, on peut dire couleur. En fait, la couleur d'arrière-plan serait, la couleur serait juste le texte. Mais si nous disons couleur de fond , nous pourrions dire bleu clair. Vous remarquerez que cette syntaxe est différente de celle du CSS, et je vais juste vous dire comment cela fonctionne brièvement avant la prochaine vidéo. Normalement en CSS, si nous voulions que le bouton soit bleu, bleu clair ou autre, on dirait l'arrière-plan, couleur du tiret, le bleu clair, comme ça. La différence ici en JavaScript est que la couleur d'arrière-plan est un seul mot utilisant CamelCase, sorte que la première lettre est minuscule et que les mots suivants sont majuscules. Couleur de fond, bleu clair. Sauvons cela et débarrassons de cela. Allons voir ça. Il ne semble pas avoir fonctionné. Voyons voir, nous avons un bouton d'erreur point style point couleur d'arrière-plan n' est pas une fonction. Donc ce qu'il dit, c' est qu'il est dit : Hé, vous ne pouvez pas mettre de paramètre là-dedans parce que techniquement, cela traite ça comme une fonction et vous ne pouvez pas le faire. On dirait que ce n'est pas ce que nous sommes censés faire ici. Au lieu de l' utiliser comme fonction, nous allons dire qu' il est bleu clair. Essayons ça. C'est un peu difficile à dire, mais c'est vraiment différent. Il n'est plus blanc maintenant. Voyons si nous pouvons faire une couleur plus distincte. On va juste dire Blue. Vous pouvez certainement le voir, d'accord, mais que se passe-t-il si nous voulons changer la couleur du texte ? On peut dire le style de point de bouton, couleur des points est égale au blanc. Super. C'est donc en quelque sorte la façon dont nous ajoutons ces différents objets. Nous devons créer. Imaginez que c'est comme une pyramide. Nous devons le faire au niveau de base, nous avons besoin de notre élément, de notre bouton. Et puis un niveau au-dessus de cela, notre texte ou tout autre élément qui pourrait se trouver à l'intérieur de l'objet, nous créons. Un niveau au-dessus, c'est en quelque sorte nos styles et tout le reste. Vous pouvez le faire avec n'importe quel élément. Il n'est pas nécessaire que ce soit un bouton. Il peut s'agir d'une div, il peut s'agir d'une balise d'en-tête. Vous pourriez vraiment faire ce que vous voulez. Nous avons inséré ce bouton dans quelques vidéos. Je vais vous montrer comment faire changer couleur de l' arrière-plan ici, mais ce n'est qu'un aperçu rapide de la création d'éléments. Très bien, je vous verrai dans le prochain. 5. Éléments de maniulation (en particulier avec CSS): Très bien, dans cette vidéo, nous allons parler manipuler des éléments dans le DOM. Actuellement, nous avons notre bouton ici, nous avons notre Hello World. Nous avons notre couleur de fond. Voyons ce que nous pouvons faire avec ces éléments, commençant par cette couleur d'arrière-plan. Ce n'est pas très joli à mon avis. Passons à une couleur plus belle. Dans notre app.js, je vais juste créer un peu d'espace et venir ici un peu. Supposons donc que nous voulions sélectionner le corps parce que le corps est ce que nous avons utilisé pour créer une couleur d'arrière-plan verte. Ici, nous pouvons dire la couleur de fond. Oups, désolé. Nous pouvons le faire. Il faut d'abord sélectionner le corps. Disons que le corps est égal au point de document, obtenez élément par nom de balise. Vous pouvez également utiliser QuerySelector. Je dirai corps. Je crois que vous devez capitaliser celle-ci entièrement parce que c'est une étiquette spéciale. Voyons si cela fonctionne correctement. D'accord. D'accord. Oui. D'accord. Désolé, je me suis trompé. Cela n'a pas besoin d'être mis en majuscule. Ce qui s'est passé, c'est que lorsque j'ai tapé le corps ici et que je l'ai enregistré, cela nous a donné cette collection HTML, essentiellement un tableau d' éléments. C'est ce que c'est. Et il est dit, d'accord, au premier index, index 0, nous avons une balise de corps. C'est un peu idiot, car le mode de fonctionnement du sélecteur de balises est qu'il crée un tableau car nous pouvons avoir plusieurs balises. Si nous disons obtenir des éléments par nom de balise P, il y aura toutes les balises de paragraphe. Maintenant, il a fait la même chose avec le corps, mais nous ne pouvons avoir qu'une seule étiquette corporelle. Ce que nous allons faire ici, c'est sélectionner l'élément 0 qui nous a donné notre corps. Et vous pouvez voir qu'il est sélectionné lorsque nous surlignons notre curseur dessus, il sélectionne toute la page. Et si vous ouvrez cela, vous pouvez tout voir. Tout est en bas à l'intérieur. Bon, donc maintenant, nous avons le corps. Changeons sa couleur d'arrière-plan. Disons donc le style corporel. Le style est la façon dont nous accédons à la propriété de style. Disons donc que la couleur d'arrière-plan est égale. Donnons ça. Voyons si le rose clair est une couleur. Je n'en ai aucune idée. Essayons ça. On y va. Oui, j'aime bien ça. C'est une belle couleur. Permettez-moi de vous montrer la différence entre les fonctions que nous avons utilisées précédemment et ces signes égaux. Dans la dernière vidéo. J'ai découvert que j'avais commis une erreur lorsque j'ai essayé d'utiliser la couleur de fond. Faites quelque chose comme ça où j'ai dit comme couleur de fond, les parenthèses, le rose clair. Mais le fait est que ce n'est pas une fonction. Créer un nœud de texte est une fonction. C'est lire quelque chose de texte. Créer un élément est une fonction. Queryselector est une fonction, mais il s'agit des propriétés des éléments. Laissez-moi vous montrer ce que je veux dire. Nous allons sélectionner le, nous allons bien sélectionner, nous pouvons sélectionner la balise body. Nous avons déjà sélectionné l'étiquette corporelle. Nous allons le consigner. Cliquons là-dessus. Qu'est-ce que nous obtenons ? En fait, le corps n'est peut-être pas le meilleur exemple. Essayons, essayons le bouton. Voyons voir. Désolé pour ça. Étiquette corporelle. L'étiquette corporelle est un peu bizarre, nous allons donc sélectionner notre étiquette de paragraphe qui indique Hello World. Juste pour cet exemple. Disons p pour un paragraphe égal. Document, sélecteur de requête, livre, bonjour. Ensuite, juste en dessous, nous allons enregistrer P. Nous avons enregistré P ici. Nous avons sélectionné cette balise de paragraphe. Mais ce que nous voulons faire, c'est d'obtenir un peu plus de détails, c'est que nous allons mettre le p.ball avant la livre juste ici dans le QuerySelector. De cette façon, nous pouvons accéder à plus d'informations à ce sujet. C'est un peu déroutant. Mais quand nous le consignerons, vous verrez que nous avons ce P lb bonjour. Si nous cliquons là-dessus, vous verrez qu'il y a toutes ces choses. Ce sont les propriétés de notre balise de paragraphe. Ici, cette balise de paragraphe a des tonnes de propriétés. La plupart d'entre eux disent nul. Nous ne les utilisons pas. Mais certains d'entre eux nous sommes, par exemple, du style. Si vous cliquez sur Style, vous verrez une liste de chaque style, essentiellement tous les styles possibles pour cet objet. Encore une fois, dont la plupart n' utilisaient pas. Mais disons que nous voulons changer la couleur de ce monde bonjour. Eh bien, on peut venir voir ici et trouver de la couleur. Je veux vous montrer que c'est de vous montrer pourquoi ce n'est pas une fonction. Y. Lorsque nous essayons de changer la couleur d' arrière-plan du corps, nous avons dit fond de point de style body dot, couleur est égale au rose clair. Nous l'avons fait parce que ce rose clair, désolé, la couleur était une propriété sous la propriété style de cet élément. Si c'était un peu déroutant, c'est bon. Vous n'avez pas à vous inquiéter à ce sujet. Sachez simplement que lorsque vous modifiez une partie d'un élément, son CSS, c'est ce qui se passe lorsque vous cliquez dessus, toutes ces choses. Il s'agit de propriétés que vous définissez égales à une valeur différente de ces fonctions ici. Maintenant, en cas de doute, si vous recherchez changer de style, couleur d' arrière-plan pour un élément en ligne, vous pourrez voir la syntaxe pour cela si vous oubliez ou si vous recherchez créer un nœud de texte, vous pourrez voir la syntaxe à partir d'un site Web tel que Mozilla ou W3 schools. Il existe de nombreux sites Web qui vous indiqueront la syntaxe exacte de ces éléments. Mais en revenant à ce que nous faisions, nous changions la couleur de fond ici. Voyons quelles autres propriétés nous pouvons modifier lorsque nous sélectionnons notre balise p. Si nous cliquons sur P et que nous appuyons sur la période, nous pouvons voir toutes sortes de choses. Nous voudrions peut-être modifier le texte et cliquer ici sur le contenu du texte. Nous savons précédemment que le contenu du texte est helloworld. Que se passe-t-il si je veux changer cela ? Je peux définir cette propriété comme j'aime Pi. Maintenant, vous pouvez voir que le JavaScript a manipulé cet élément, il a changé. Il s'agit de la propriété TextContent. Si vous le souhaitez, je vous encourage à examiner les propriétés de chaque élément. Vous pouvez le faire en code VS simplement en appuyant sur les points après quelque chose et en faisant défiler cette liste, cela vous indiquera toutes sortes de choses auxquelles vous pouvez accéder. Par exemple, le prochain frère, qui vous indiquera quel élément se trouve juste à côté. Ou nous pourrions rechercher du HTML interne qui vous montrera ce qu' il contient. Vous pouvez demander s'il possède un certain attribut. Tout ce genre de choses en fait, essayons que l'on ait un attribut. Disons. Je vais vous montrer un peu plus de logique. Le code contenant ce code possède des attributs. Je vais m'en débarrasser. Voyons voir, faisons une déclaration si. Nous dirons que si P a la couleur de l'attribut, qu'il y a une couleur attributaire , nous ferons quelque chose. Je suis désolé, pas l'attribut de couleur, l'attribut de couleur de point de style. Je ne sais pas si cette syntaxe exacte fonctionnera, mais nous allons consoler le succès. Voyons ce qui se passe. On dirait que nous n'avons rien eu. Et si on disait simplement style ? Vous n'avez toujours rien ? Peut-être devrions-nous ajouter une couleur. Essayons donc p dot style dot couleur égale au bleu. Bon, alors regardez ça. Il a enregistré le succès parce qu'il a remarqué qu'il avait l'attribut de style. Voyons ce qui se passe si nous coiffons la couleur des points. Cela ne fonctionne pas pour cela. attributs des éléments HTML sont donc ces éléments que vous mettez entre guillemets que vous mettez dans l'élément. Je pourrais donc voir si Hello World a une idée de Hello en venant ici et en disant, si, voyons voir, faisons du point. Nous pouvons faire p dot get attribut. Disons que nous voulons la couleur. Nous allons définir cela comme bleu. Qu'est-ce que cela fait ? Il est dit, obtenez l' attribut de couleur. Oh, désolé. Ce n'est pas ce que nous faisons. Je me suis juste un peu écarté. Nous voulions connaître la pièce d'identité. Si c'était bonjour. Nous avons obtenu l'ID de l'attribut, qui se trouve ici. Nous voulons dire si ces attributs sont égaux bonjour, alors consoler un succès. Ce qu'il fait. Si nous devions dire si cela équivaut au revoir, pas de succès. Vous pouvez voir comment cela fonctionne du point de vue des frais généraux et voir qu'il y a beaucoup de possibilités avec la logique JavaScript où vous pouvez utiliser des instructions if. Vous pouvez utiliser des boucles. Par exemple, vous pouvez utiliser une boucle for et dire, pour les numéros un à dix, créer ces éléments ou modifier leurs couleurs. Faites toutes sortes de choses. Les possibilités sont essentiellement infinies. Je vous ai donc montré beaucoup de choses ici. Je vous recommande d' essayer de regarder à nouveau la vidéo en cas de confusion . Il suffit de passer étape par étape et d'apprendre ce que vous pouvez faire pour manipuler ces objets. Mais sachez simplement qu' un récapitulatif de base, chaque élément a des propriétés, il a des centaines ou 800 propriétés. Et certaines de ces propriétés ont des propriétés en leur sein. Par exemple, le style a de la couleur, de l'arrière-plan, couleur, de la marge, toutes ces sortes de choses. Vous pouvez accéder à ceux qui utilisent ces différentes fonctions. Hors des éléments. Vous saisissez le nom de votre variable et vous saisissez période. Et ça vous donne toutes sortes de choses. Je les explorerais. Si vous ne savez pas ce que c'est, recherchez-le en ligne et il vous indiquera la syntaxe. Il vous indiquera comment l'utiliser et toutes les choses que vous pouvez en faire. Mais je vous verrai dans la vidéo suivante quand nous aurons créé ce bouton, faites des choses. Très bien. 6. Créer des boutons interactifs: Dans cette vidéo, nous allons faire en sorte que notre bouton fasse des choses intéressantes. Nous allons le faire changer couleur et peut-être produire quelque chose dans la console. Commençons. Pour rendre les choses un peu plus simples pour l'instant, je vais commenter cela et je vais créer notre bouton. Je vais coder en dur dans le HTML juste pour le rendre un peu plus facile à manipuler. Très bien, nous avons notre bouton de changement de couleur. Disons que si je clique sur ce bouton, je veux qu'il change la couleur en bleu. Ce que nous allons faire c'est que je dois créer une fonction qui, lorsqu'elle sera exécutée, changera cette couleur. Écrivons la fonction. Je vais appeler ça changer de couleur. Pour l'instant, faisons simplement console.log, en changeant de couleur. OK. Maintenant, dans notre HTML, nous devons déclencher cela d'une manière ou d'une autre. Dans notre balise bouton. Nous allons mettre un attribut appelé OnClick. Vous pouvez donc tirer de ça. Mais quand on clique dessus, il va faire quelque chose. Et nous allons taper cette fonction, changer de couleur, nous assurer que vous avez la parenthèse. Très important. Lorsque je clique sur ce bouton, nous voulons qu'il change de couleur. Si j'ouvre la console et que je clique dessus, en changeant de couleur, vous pouvez voir plus je clique dessus, plus elle répète ce message. Alors maintenant, faisons quelque chose de cool avec ça. Ce que nous voulons faire, c'est choisir le corps et changer sa couleur. On va donc dire que le corps est égal au point de document. Obtenir les éléments par nom de balise, enregistrer le corps. Et n'oubliez pas que nous devons sélectionner les éléments 0 pour accéder au corps. Et nous le faisons parce que lorsque nous sélectionnons des balises, il obtient un tableau de chaque balise de ce type. Et body le fait aussi, même si nous n' utilisons qu'une seule étiquette corporelle. Nous sélectionnons le corps. Et puis nous disons que le style de point du corps, couleur d'arrière-plan du point est égale au bleu. Maintenant, lorsque nous cliquons sur notre bouton, nous venons de changer la couleur en bleu. Mais si vous cliquez à nouveau dessus, il ne reviendra pas. Pourquoi est-ce que c'est ? Eh bien, si nous regardons le code, nous lui demandons seulement de le changer en bleu. Si nous actualisons la page, elle redeviendra verte. Mais dès que nous cliquons sur ce bouton, bleu. Je vais donc vous montrer comment créer une logique pour le changer de l' un à l'autre. Supposons donc que nous ayons sélectionné cette étiquette ici. Je vais m'en débarrasser. Créons une instruction if. Nous dirons que si la couleur d'arrière-plan des points de style de corps est égale, assurez-vous que vous avez ce double ou triple égal afin que vous n'êtes pas égal à un seul définisse comme une variable, définissez une valeur sur une variable. Nous voulons qu'un double ou un triple soit égal pour nous assurer que nous comparons une qualité. Vous pouvez rechercher la différence entre les signes égaux doubles et triples sur la ligne. Si la couleur est égale au vert, car je pense que c'est ce que nous avons choisi plus tôt. S'il est égal au vert, remplacez-le en bleu. Sinon, ce qui signifie que la couleur d' arrière-plan est déjà bleue ou autre chose. Sinon, remplacez-le en vert. Ce que cela dit, c'est qu'il obtient l'élément du corps et dit : OK, si la couleur de fond est verte, remplacez-le en bleu. S'il est bleu, remplacez-le en vert car nous avons cette autre déclaration. Donc, s'il n'est pas vert, remplacez-le en vert. Nous allons le regarder. On y va. Nous changeons entre le bleu et le vert. Et chaque fois que nous cliquons dessus. Maintenant, comme vous pouvez le voir, il y a beaucoup de textes qui se passent ici dans cette déclaration, et ici même, cela a été le cas. La tendance tout au long de ce cours. Si vous regardez tous ces éléments que nous avons créés, il y a beaucoup de texte en jeu. C'est en quelque sorte la nature du JavaScript vanillé ou simplement du JavaScript simple. Une façon de réduire cela est que si nous allons utiliser quelque chose plusieurs fois, par exemple, cette couleur d' arrière-plan, nous pouvons définir la couleur d'arrière-plan égale à une variable. Nous pourrions dire que couleur d'arrière-plan est égale à la arrière-plan de points de style de point. De cette façon. Nous pouvons simplement conserver cette partie de couleur d' arrière-plan qui réduit considérablement la quantité de code dont nous avons besoin. Mais est-ce que ça a fonctionné ? Voyons voir. Cela n'a pas fonctionné. Voyons s'il y a des erreurs. Aucune erreur. Je me suis rendu compte que le problème est une bonne petite leçon de codage pour nous deux. Voyez ici, je définit la couleur d' arrière-plan égale à la couleur d' arrière-plan actuelle. Mais ici, je ne faisais que changer la couleur de cette variable. Maintenant, cette variable, une fois qu'on l'a dit, est détachée de l'élément du corps lui-même. Nous changeons cela, mais pas ce que nous voulons changer. Je m'excuse donc, j'ai fait une petite erreur en vous expliquant cela. Ces deux choses devraient encore être la couleur d' arrière-plan de points de style body dot. Parce que nous voulons modifier cette couleur d' arrière-plan d'origine, mais nous pouvons toujours vérifier la couleur d' arrière-plan comme celle-ci. Utiliser cette variable, ce qui améliore la lisibilité dans l'instruction if. On y va. Maintenant, nous l' avons fait fonctionner à nouveau. Il y a peut-être des moyens de contourner ce problème si nous prenions plus de temps et nous y plongeons. Mais vous vous demandez peut-être, eh bien, quel est l'avantage de le déclarer ici ? Et puis ça, en bas. Dans cette situation, il n'y a pas beaucoup d'avantages. Nous pourrions certainement écrire la couleur de fond de points de style body dot ici. Mais supposons que nous voulions utiliser cette couleur d'arrière-plan ailleurs. Et disons, eh bien, si la couleur d'arrière-plan blob, blob, c'est bien de l' avoir en raccourci et très lisible car il est important d'avoir du code lisible. Vous voulez pouvoir le regarder et voir ce que vous faites. C'est un petit indice de ce que nous pouvons faire avec la couleur d'arrière-plan. Maintenant, nous allons aller plus loin et faire un petit console.log. Disons que ce sera bleu et celui-ci. Alors que la folie, tu y vas. Console Dot Log vert. Maintenant, si on ouvre le terminal, on y va. Bleu, vert, bleu, vert. C'est plutôt cool. Vous pouvez imaginer toutes sortes de choses que vous faites avec ça. Alors que l' application du monde réel, tous les sites Web sur lesquels vous accédez ont essentiellement des boutons. Et quand vous cliquez sur JavaScript, cela fait toutes sortes de choses sympas. Fonctions d'appel qui obtiennent des données d'Internet qui, vous le savez, envoient des messages. Vous pouvez vraiment faire des choses illimitées avec cette fonctionnalité. s'agit donc que d'un regard très basique. Et c'est quelque chose que je voulais partager avec vous plus tôt lorsque je parlais de raccourcir votre code à l'aide de variables, c'est qu'il existe une variété de frameworks JavaScript, qui sont essentiellement quelqu'un a pris JavaScript et en a fait une version qui a des fonctionnalités supplémentaires ou une syntaxe plus facile dans le code. C'est ce qu'on appelle un cadre. Et vous avez peut-être entendu parler de ceux-ci, certains de notre jQuery Angular React View, sont tous des frameworks JavaScript. Ce ne sont que des façons différentes d'écrire le code. Ils ont chacun une syntaxe différente, des fonctionnalités différentes. Et donc si vous avez ce code raccourci est vraiment important pour vous, alors je vous suggérerais d' examiner un cadre. Il faut du temps pour apprendre, mais cela peut être une expérience très gratifiante. Souvent, lorsque vous avez un grand site Web d'applications complexe lequel vous essayez de faire des choses, avec la manipulation DOM. Il peut rapidement devenir désordonné. Je veux dire, vous pouvez imaginer avoir toutes ces fonctions et tout ce code écrit ici. C'est beaucoup. Et c'est juste la nature du JavaScript vanillé ou du JavaScript simple. Mais cette fonction de changement de couleur. Si je devais le faire dans Angular, par exemple, cela ne prendra que trois lignes de code. Qui sait ? Il peut être beaucoup plus facile de faire les choses plus rapidement. Mais c'est qu'il important de connaître ces choses car beaucoup de ces principes de manipulation DOM que nous utilisons avec JavaScript simple sont utilisés dans ces autres frameworks. Je sais que je vous ai montré un exemple très simple changement de couleur d'arrière-plan à l' aide de ce bouton. Dans la vidéo suivante, je vais parler du projet que je veux que vous fassiez. Cela peut être vraiment gratifiant, cela peut vraiment vous apprendre beaucoup. Parce que le meilleur professeur, je pense, c'est de le faire vous-même. Il ne fait que creuser , essayer des choses. Je vais en parler un peu, mais c'est tout pour cette vidéo. C'est juste un récapitulatif rapide. Nous avons parlé de faire en sorte que notre bouton fasse les choses. Nous avons donc utilisé l'attribut onclick et l' avons défini comme égal à une fonction. Et cette fonction est importante. Nous avons dû le déclarer à l'intérieur. Nous pouvions faire tout ce que nous voulions. Vous savez, vous n' avez même pas besoin de manipuler le code HTML. Vous n'avez pas besoin de manipuler la page. Dans cette fonction, il pourrait faire quelque chose de totalement différent. Il pourrait calculer les mathématiques. Ça pourrait, il y a un certain nombre de choses. Mais fondamentalement, nous avons sélectionné les éléments et avons fait une instruction if pour changer la couleur en fonction de la couleur d'arrière-plan. OK. Je vous verrai dans la prochaine vidéo. 7. Projet / Conclusion: Très bien, vous êtes arrivé à la dernière vidéo de ce cours de manipulation DOM. Vous devriez être fier de vous. Les compétences que vous avez acquises ici seront très importantes dans tout développement Web que vous effectuez. Et vraiment, améliorez simplement vos connaissances en codage dans l'ensemble. Ce sont des choses qui me fascinent vraiment et j'espère que ça vous a plu aussi. Pour vous aider à en profiter un peu plus loin, pour vous aider à en savoir plus. Je vais parler un peu du projet en ce moment. Pour ce projet, c'est très simple. Je veux juste que vous exploitiez, exploitiez toutes les fonctions que vous pouvez trouver tout ce qui vous semble intéressant. Je veux que vous l'essayiez. Si vous avez une idée de quelque chose de simple que vous voulez faire, Hé, si je clique sur ce bouton, je veux changer le texte de la page en quelque chose. Ou je vais calculer quelques maths. Vous pouvez créer une calculatrice de base ou vraiment ce que vous voulez. Je veux que vous alliez l' essayer, explorer les fonctions, utiliser les fonctionnalités du code VS que je vous ai enseignées ainsi que les outils de développement Chrome pour afficher les attributs, sélectionner les éléments que vous souhaitez modifier. Il y a tellement de choses que vous pouvez faire. Vous pourriez même essayer de créer une page Web complètement en m'échappant complètement avec des éléments créés par JavaScript sans code HTML ou CSS codé en dur. C'est peut-être un défi génial. Mais je veux juste que tu t'amuses. Je veux que vous exploitiez et partagiez vos créations avec d'autres personnes. Si vous apprenez quelque chose, montrez-le à quelqu'un d'autre. Je pense que prendre le temps de creuser tout cela et que je ne l'ai pas appris vous-même et que je partage votre succès avec les autres va aller, ça va juste se sentir vraiment bien. J'espère que vous avez apprécié ce cours. J'espère que vous me prendrez part à ce projet et que vous allez l' essayer pendant 15 minutes. Essayez de manipuler des objets, essayez de faire quelque chose de cool avec JavaScript et la manipulation DOM. Si vous avez apprécié ce cours, veuillez consulter mes autres cours sur Skillshare. J'en ai un sur Angular et les composants, services, toutes sortes de choses, le routage. Il y a un excellent parcours Angular là. Je recommande d'aller le vérifier et je publierai d'autres cours, espérons-le bientôt. Alors, s'il vous plaît , jetez-les également et partagez-les avec vos amis. Cela pourrait vraiment bénéficier de ces connaissances. Mais jusque-là, je m'appelle Taylor et ce fut un plaisir d'être votre instructeur. Et je vous souhaite bonne chance.