Les bases de jQuery : apprendre jQuery (avec Javascript) à partir de zéro

1. Introduction du cours: Bienvenue dans jQuery 101, jQuery pour les débutants. Commençons par la grande question. jQuery est-il toujours utilisé ? Et la réponse est absolument oui. Jquery est responsable du JavaScript sur des centaines de millions de sites Web. Je vais répéter ça. Jquery est responsable du JavaScript sur des centaines de millions de sites Web. Jquery a été créé à l'origine pour combler un écart entre les navigateurs avant que JavaScript ne commence à devenir plus standardisé, Internet Explorer et Firefox utilisent JavaScript différemment. Chrome et Safari ont implémenté JavaScript différemment. Et jQuery était comment vous pouviez évaluer une langue qui vient de fonctionner. Écoutez, je sais que beaucoup de gens disent que vous devriez ignorer tout à fait l'apprentissage de jQuery, mais considérez cela s'il est utilisé par plus 100 millions de sites Web et toujours favorisé par organisations comme Django et le framework jangle, alors il y a manifestement une demande du marché pour cette compétence. Si vous entrez dans JavaScript récemment, ce cours est fait pour vous. Si vous êtes un développeur back-end et que vous voulez écrire JavaScript sympa sans avoir besoin d'apprendre un framework entier comme réagir, ce cours est pour vous. Pour tirer le meilleur parti de ce cours. Vous aurez besoin de connaître un peu de HTML. Et si vous connaissez un peu de CSS, cela va être utile, mais ce n'est pas nécessaire. Et pour vraiment tirer le meilleur parti de jQuery, vous devriez connaître un simple vieux JavaScript vanille. Bonjour, je suis Caleb, dites-moi et j'utilise jQuery depuis qu'il a été inventé en 2006. J' ai enseigné plus de 300 000 étudiants et travaillé avec des clients tels que la Nasa, Mozilla, la Arctic Research Foundation, les Samaritains et le National Health Service au Royaume-Uni. Et c'est ma classe jQuery 101. Merci d'avoir regardé cette vidéo d'introduction, et je te verrai à l'intérieur. 2. Qu'est-: Jquery est comment nous écrivons une forme de JavaScript et l'avons exécuté parfaitement sur tous les navigateurs. Ceci est utile car les navigateurs n'implémentent pas JavaScript de la même manière. Certains ont des règles différentes. Certains ne font pas confiance à certaines fonctionnalités que vous faites et, et ils vous font écrire du code différent pour différents navigateurs. Jquery comble cet écart, ce qui signifie que vous pouvez écrire JavaScript pour tous les navigateurs et cela fonctionnera toujours. Vous n'avez pas à faire face à un autre support de navigateur que ce soit. Jquery est également considéré comme une bibliothèque. Ce n'est pas un framework, ce qui signifie que vous êtes autorisé à mélanger votre JavaScript normal avec lui et rien de mal ne pourrait arriver. Et il n'y a pas de façons strictes d'écrire votre JavaScript avec jQuery. Alors qu'avec un framework tel que view WAS OU réagir dot js, il y a certaines règles que vous voulez suivre et il y a beaucoup de magie dans les coulisses que vous ne voyez pas. Ce qui rend l'apprentissage d'autres cadres comme réagir un peu plus difficile. À partir de 2019 environ, a réagi JS et vis.js est devenu très populaire. Et les gens disent maintenant des choses comme, Oh, ne vous embêtez pas à apprendre jQuery, mais il est littéralement utilisé sur des millions, des millions et des millions de sites Web. Alors pourquoi ne pas apprendre une compétence si recherchée ? Et la bonne chose est que vous pouvez apprendre jQuery en une seule journée d'apprentissage réagir dot js ou view dot js va prendre beaucoup de temps parce qu'il y a de tels cadres, ils sont puissants aussi. Mais si vous avez juste besoin d'un peu d'aide avec votre JavaScript ou si vous voulez simplement écrire moins de code que jQuery est 100% pour vous. Et la vérité vraiment du point de vue des développeurs seniors, vous n'avez pas besoin d'apprendre jQuery ou de réagir ou de voir. Vous pouvez tout faire avec de la vanille ou du JavaScript simple, mais ces outils nous aident à faire plus avec moins de code. En outre, et encore une fois, c'est une bombe de vérité utilisant réagir dot js ou view dot js sur environ 95% de tous les sites Web complètement overkill. Vous finirez par passer trop de temps à écrire réagir pour une petite fonctionnalité qui peut être écrite avec jQuery en quelques minutes, parfois quelques secondes. C' est pourquoi je choisis d'écrire du JavaScript vanille ou jQuery sur la plupart de mon site Web. À moins qu'il n'y ait un besoin réel de quelque chose de grand et complexe, alors j'ai tendance à choisir, à réagir ou à voir. Donc, la raison pour laquelle vous devriez apprendre jQuery est parce que simplement la demande du marché, des centaines de millions de sites Web l'utilisent. Vous pourriez aussi bien apprendre ce qui est en demande. 3. Installer jQuery sur votre site Web: Bonjour et bienvenue à notre première leçon sur jQuery. Dans cette leçon, nous allons installer jQuery sur notre site Web. Donc, tout d'abord, nous devons ouvrir un navigateur et aller sur JQuery.com. Maintenant, il y a deux façons d'installer jQuery. Nous pouvons le télécharger et l'utiliser localement sur notre ordinateur. Donc, nous pouvons utiliser un fichier réel sur notre ordinateur, ou nous pouvons utiliser cette chose appelée un réseau de diffusion de contenu. Donc, je clique sur le bouton de téléchargement là-bas et nous pouvons télécharger, télécharger, télécharger. Il y a une autre façon d'utiliser le fil et le PM Bauer, toutes ces autres choses. Ou nous pouvons prendre la meilleure voie et là où il est dit d'autres CDN, nous pouvons utiliser Google CDN, Microsoft CDN JS ou livrer ou jazz livrer. Et je vais juste utiliser JS livré juste pour aucune raison particulière. Et dans ce cours, nous allons utiliser jQuery 3.5.1. Et donc ce que je veux faire ici, c'est obtenir la version minifiée parce que nous n'avons pas besoin de tout le code source supplémentaire. Nous n'avons pas besoin de tout l'espacement supplémentaire ou des commentaires de code. Nous avons juste besoin du JavaScript réel et nous ne nous soucions pas vraiment de ce que cela ressemble parce que nous utilisons jQuery comme bibliothèque. Copions donc le code HTML et ouvrons le code Visual Studio ou tout éditeur de texte que vous souhaitez utiliser. Nous allons créer un nouveau fichier ici. Faisons HTML cinq. Ça ne marchera pas. On va devoir sauver ça d'abord. Donc, je vais enregistrer ceci en tant que index.html. Et puis je peux faire HTML deux-points cinq, appuyez sur onglet et il remplit automatiquement un tas de trucs cool pour nous. Et nous pouvons faire jQuery one-to-one comme titre. Maintenant, lorsque nous utilisons JavaScript, nous voulons généralement mettre JavaScript en bas de notre corps, pas en dehors du corps, mais juste en bas, juste avant la balise de fermeture du corps. Et le code que j'ai copié là-bas, je vais le coller ici. Et nous allons voir que cela vient de CDN ab.js deliver.net slash npm yada, yada, yada. Et donc, ce qu'est un réseau de diffusion de contenu, est essentiellement une série de serveurs à travers le monde. Et lorsque vous essayez de télécharger ce fichier particulier, il va aller au serveur le plus proche, le plus proche de vous. Donc, il va être plus rapide téléchargement. La bonne chose à ce sujet est qu'ils peuvent également fournir une couche de mise en cache. Et quand il y a mise en cache, cela signifie que si quelqu'un a déjà téléchargé cela à partir d'un site Web particulier ailleurs sur Internet, et que vous accédez maintenant au même fichier est déjà téléchargé sur votre ordinateur. Et donc vous n'avez pas à le télécharger à nouveau, ce qui est vraiment, vraiment sympa. Et c'est la raison pour laquelle nous utilisons un réseau de diffusion de contenu ou un CDN, c'est parce que nous voulons cette couche supplémentaire de mise en cache juste pour rendre nos sites Web super rapides. Cela signifie également que nous n'avons pas à maintenir un fichier supplémentaire. Maintenant, quand nous écrivons ceci, nous devons avoir une balise de script et une balise de script de fermeture. Et à l'intérieur d'ici, nous allons attendre que jQuery se charge correctement. Donc, même si ce fichier pourrait techniquement être téléchargé sur votre ordinateur, votre navigateur peut ne pas avoir pleinement reconnu que l'ensemble du fichier est là une fin évaluée ou exécutée encore le code, donc il peut ne pas le savoir complètement. Et donc nous faisons cette chose où nous attendons qu'elle se charge et nous le faisons avec cette petite syntaxe bizarre et nous parlerons de la syntaxe dans sa propre leçon. Mais pour l'instant, nous avons juste besoin de mettre cela en marche pour que nous puissions faire document.ready. Fonction, Console.log. Jquery est chargé. Et donc ce que nous faisons ici, c'est que nous sommes une, encore une fois, nous allons parler de syntaxe et un peu. Mais nous utilisons ceci comme un sélecteur. Nous sélectionnons le document entier, la page entière, et quand elle est prête, lorsque le modèle d'objet de document est chargé, lorsque notre JavaScript est terminé, chargement exécute cette fonction et c'est ce qu'on appelle une fonction de rappel Parlez-en aussi. Et puis une fois que tout est fait, juste le journal de la console jQuery est chargé. Et donc si nous allons à notre navigateur, ouvrez un nouvel onglet et en haut de cela va fichier, c'est juste en dehors de ma zone d'enregistrement, mais je veux juste déposer et ensuite nous pouvons aller à ouvrir le fichier, sélectionnez notre fichier index.html. Et nous allons voir absolument rien ne se passe. Mais si nous faisons un clic droit et allons à Inspecter et aller à la console, et ne conservons pas le journal là. C' est juste un cadre d'un projet sur lequel je travaillais. Rendons ça plus grand. Il dit que jQuery est chargé. Donc, chaque fois que je rafraîchis, il dit que jQuery est chargé et qu'il devrait être presque instantané. Donc, vous ne remarqueriez pas que c'est le cas ou non. Évaluer votre JavaScript, votre bibliothèque jQuery. C' est censé être super rapide, mais c'est une bonne petite méthode juste pour nous assurer que nous pouvons continuer à utiliser jQuery dans notre code. Donc, avant quoi que ce soit, ce que je voudrais que vous fassiez, c'est que vous allez chercher jQuery à partir d'un réseau de diffusion de contenu, créez un tout nouveau fichier d'index comme celui-ci, puis écrivez ce petit script bizarre ici. Et encore une fois, nous allons disséquer ça encore et encore. Donc, vous serez super familier avec ce que c'est réellement, mais vous avez juste besoin d'écrire ceci pour commencer. Et puis nous passerons à la leçon suivante. Donc, une fois que vous avez fait cela et que vous êtes prêt, passons à la leçon suivante où nous parlons correctement de la syntaxe jQuery. 4. syntaxe jQuery: Très bien, quand nous parlons de la syntaxe jQuery, c'est beaucoup comme la syntaxe JavaScript. Il est en fait, c'est juste tout écrit en JavaScript est juste une certaine façon d'écrire notre JavaScript. Et donc, dans notre dernière leçon, nous avons écrit ce document bizarre. Alors disons ça un peu. C' est donc là que nous allons mettre tout notre code dans chaque leçon qui va de l'avant quand nous parlons de jQuery. Mais la syntaxe ici, le style dans lequel il est écrit, ressemble beaucoup à ceci. Donc nous avons un signe de dollar avec parenthèses, et voici notre sélecteur. Et donc si vous venez de JavaScript, c'est beaucoup comme la méthode de sélection de requête de point de document. La seule différence, c'est qu'on n'a plus besoin d'écrire ça. Nous pouvons simplement écrire un div point ici et cela va le sélectionner pour nous. Et donc c'est un joli petit raccourci. Donc ici, nous avons un sélecteur, un sélecteur. Ensuite, nous avons une sorte de fonction ou d'événement ou de méthode ou, ou quelque chose se passe avec ce sélecteur. Et donc nous voyons ici, nous voyons prêts. Donc nous avons sélectionné le document et nous allons dire quand il est prêt ou quand nous avons un bouton, nous pouvons dire onclick ou nous pouvons faire quelque chose. Il y a donc une sorte d'événement qui se passe ici. Et cela en soi est juste une méthode ou une fonction. Et puis il faut cette chose appelée une fonction de rappel. Et la plupart des choses dans jQuery prennent une fonction de rappel. Donc ça va faire quelque chose. Donc, il va sélectionner quelque chose dans votre page. Il va ensuite exécuter ou, ou enregistrer une sorte d'événement. Et puis, quand cet événement se produit, que faisons-nous ? Et c'est là que nous l'enveloppons dans une fonction. Donc, c'est juste une fonction anonyme et cela s'assure juste que tout reste étendu ici. C' est donc un bon moyen de s'assurer que vos variables ne fuient pas hors de cette zone particulière. Maintenant, dans notre corps ici, disons que nous avons un nom de classe personnalisé à un point avec un ID d'ID personnalisé. Et donc vous pouvez voir comment j'ai écrit ça. Si je viens d'annuler cela, vous pouvez voir que j'ai écrit un numéro de nom de classe personnalisé, ID client. Et c'est exactement comme écrire CSS. Donc, si vous connaissez déjà CSS, cela va être incroyablement facile pour vous. C' est CSS régulier et il se trouve que VS Code a cette chose appelée une abréviations Emmett. Ainsi, vous pouvez écrire votre CSS et simplement appuyer sur l'onglet et il va créer votre élément pour vous. Donc on peut dire ici, Bonjour monde. Et maintenant avec notre sélecteur, et allons de l'avant et créons un nouvel exemple ici. Dans la dernière leçon, nous avons fait la fonction document.ready, yada, yada. On peut utiliser des points-virgules. Nous n'avons pas besoin d'utiliser des point-virgules, son JavaScript normal. Donc, les règles JavaScript régulières s'appliquent toujours. Et nous pouvons utiliser un sélecteur ici, pour que nous puissions sélectionner celui-ci comme celui-ci. Et on peut faire quelque chose ici. Et ça va sélectionner celui-là. Nous pouvons également dire le nom de classe personnalisé, et cela va sélectionner ce AS ce H1 avec tout autre élément qui a ce nom de classe. Ou si nous voulions obtenir quelque chose de complètement unique, nous pourrions faire une identification, une identification personnalisée. Et encore une fois, c'est juste CSS régulier. Et donc quand nous écrivons CSS, CSS, c'est exactement comme ça que nous l'écrivons de toute façon. C' est ainsi que nous créons une déclaration personnalisée en utilisant un sélecteur CSS. Et donc dans jQuery, nous faisons exactement la même chose, et dans JavaScript moderne, nous faisons exactement la même chose. Nous avons donc plusieurs façons différentes. Nous pourrions même obtenir vraiment spécifique et dire saisir tous les H 1 avec un nom de classe personnalisé. Et disons que le texte va me changer et qu'on saute un peu l'arme ici. Et nous allons en apprendre davantage sur les textos en bas de la route. Mais je voulais vous montrer que c'est un exemple. Donc, ce que cela va faire est de sélectionner cet élément ici. Et puis il va prendre cette taxe et la changer de Helloworld, nous savons ce qui va rendre bonjour monde en grosses lettres. Et il va dire que j'ai changé ou changeons-le en Ceci a été changé via jQuery. Sauvons ça. Rafraîchissez notre page. Et il dit que cela a été changé via jQuery est. Mais si je me rafraîchis assez vite, vous pouvez voir qu'il scintille. Et donc si je clique avec le bouton droit de la souris et voir ma source, faisons cela juste un petit peu. Nous pouvons voir qu'il dit vraiment bonjour monde. Donc, quand la page le rend en disant bonjour monde ici. Mais une fois que jQuery est chargé, il le change en. Cela a été modifié via jQuery. Maintenant, c'est à peu près toute la syntaxe que nous devons savoir en ce moment il y a un peu plus quand il s'agit d'écouteurs d'événements, mais nous allons nous attaquer à cela quand nous arriverons aux écouteurs d'événements afin que je ne vous submerge pas avec beaucoup d'informations en ce moment. Mais la chose que vous devez savoir maintenant, c'est ceci et ça. Maintenant, ce que je voudrais que vous fassiez, c'est cet exemple exact. Allez-y et créez un H1, sélectionnez-le en quelque sorte en utilisant soit l'ID de classe ou un sélecteur d'élément. Et puis changez le texte avec du texte point et mettez une sorte de nouveau texte dans leur vue sur votre page si elle change correctement. Alors que je, vous avez maintenant écrit un peu de jQuery, c'est aussi facile que ça. Quand tu auras fini, passons à la leçon suivante. Nous parlerons un peu plus de sélecteurs, en particulier. 5. Sélection de jQuery: Bon, bienvenue. Parlons des sélecteurs. Donc, un sélecteur est en grande partie ce que jQuery est construit autour. Et la raison en est que lorsque vous travaillez avec JavaScript, vous travaillez généralement avec votre modèle d'objet de document, qui est tout votre HTML ici. Et la façon dont il est structuré, c'est votre modèle d'objet de document en un mot. Et donc nous pouvons avoir un H1 ici, et ceci pourrait être notre titre personnalisé. Et nous allons juste mettre en place un exemple ici. On peut avoir un bouton ici, et c'est, c'est un bouton personnalisé. Allons de l'avant et sélectionnez Paragraphe. Et allons-y et mettons-y un peu de lorem. Passons d'un modèle Django à un modèle HTML standard. Donc, si je tape Lorem, appuyez sur l'onglet, Je reçois lorem ipsum p. onglet Hit, Je reçois un paragraphe, Lorem hit onglet je reçois un autre paragraphe ipsum lorem. Et ajoutons des choses uniques ici. Donc, nous avons un paragraphe et allons de l'avant et assurez-vous que le paragraphe et le bouton et tout ce que j'ai fait là, c'est que j'ai sélectionné une zone, puis sur un Mac, j'ai cliqué sur Commande. Sous Windows, il est susceptible d'être modifié ou de cliquer sur la touche Ctrl. Donc, je peux taper à deux endroits à la fois. Classe, coutume, classe. Et alors, allons de l'avant et travaillons avec certains de ces sélecteurs maintenant. Et je vais juste faire une touche plus petite ici pour qu'on puisse tout voir sur un seul écran. Alors allons de l'avant et sélectionnez R un et changez ceci. Et en fait, avant de le faire, c' est à quoi ressemble notre page. Nous avons deux paragraphes et je vais le rendre un peu plus petit. Nous avons un titre, nous avons un bouton qui ne fait absolument rien, et nous avons deux paragraphes. Ce paragraphe de ce bouton partage un nom de classe et le H1 et le paragraphe sont seuls. En fait, faisons un en plus. Je vais juste jeter ça ici. Ce n'était pas prévu, mais jetons-le ici de toute façon, ajoutons un ID à ce paragraphe. C' est ce qu'on appelle le numéro du client. Et sélectionnez, sélectionnons chacun d'entre eux. Choisissons notre H1. Pour qu'on puisse dire sélecteur. Et peut-être que je vais faire ce sélecteur plus grand. Un texte de point a été modifié via jQuery. Maintenant, cela va seulement sélectionner celui-ci H1, mais s'il y a plusieurs, chacun va changer les deux. Alors faisons ça. Notre titre personnalisé un, notre titre personnalisé à. Allons de l'avant et rafraîchissons notre page. Et il est dit, vous pouvez vraiment voir qu' il clignote là quand je me rafraîchis encore et encore. Et quand je vois le code source ici, nous voyons notre titre personnalisé, notre titre personnalisé aussi. Et nous les changeons tous les deux pour changer via jQuery avec une seule ligne de code. C' est gentil ? Donc, nous avons sélectionné tous les H 1s sur la page et nous le changeons pour changer via jQuery. Maintenant, en JavaScript régulier et JavaScript vanillé, nous devons parcourir tous ces éléments et les changer un par un. Jquery le fait automatiquement pour nous. Et allons de l'avant et sélectionnez tout notre paragraphe afin que nous puissions faire signe dollar, parenthèses, paragraphe, point Html au lieu du texte. Et faisons une balise en gras ici. Ceci est en gras et remplacé. Et donc nous savons ce que cela va faire. Nous venons de voir cet exemple est qu'un H1 va sélectionner ce paragraphe et ce paragraphe, il ne se soucie pas du nom de la classe ou de l'idée pour le moment, nous ne sélectionnons pas ceux-ci. Nous allons simplement sélectionner les deux paragraphes. Et allons-y. Et quand nous actualisons notre page, vous pouvez voir qu'elle scintille à nouveau rapidement. Si je me rafraîchis assez vite et encore et encore et encore. Et il dit, c'est en gras et remplacer les deux sélectionnés. Maintenant, ce qui est bien, c'est que vous pouvez sélectionner plusieurs choses. Disons qu'on ne voulait pas faire ça. Nous voulions sélectionner tous les H 1 et tous les paragraphes, mais nous ne voulions pas sélectionner notre bouton. Et nous voulions changer les textes internes que vous avez modifiés via jQuery. Allons-y et exécutons ça. Donc, il va sélectionner celui-ci, celui-ci, celui-ci, et celui-ci. Et il va changer ce texte pour changer via jQuery. Faisons en sorte que ça marche, disons, numéro deux. Et il les a tous sélectionnés. Et tout ce que nous avons fait, il y avait un autre sélecteur CSS régulier, nous avons dit h une virgule p. Donc, sélectionnez le H1, sélectionnez également tous les paragraphes. Maintenant, comme c'est toujours JavaScript sous le capot, nous pouvons sélectionner un paragraphe qui ressemble à un paragraphe par son ID client et non pas identifier sa classe. Faisons la classe personnalisée point. Et d'où je tire cela est le taux ici, classe personnalisée point et la classe personnalisée point. Mais cette fois, je sélectionne juste un paragraphe avec une classe personnalisée point dessus. Je ne sélectionne pas encore le bouton. Si je voulais les sélectionner tous les deux, je me débarrasserais de la p. Mais je veux juste p avec une classe personnalisée. Et puis je peux dire que le texte point a changé à nouveau. Et ajoutons un numéro trois ici. Et quand je retourne à mon navigateur ici et actualise ce que cela fait réellement, croyez-le ou non, est-ce qu'il sélectionne ceci, ceci, ceci et ceci et le change pour changer la vue jQuery numéro deux, que nous voyons ici. Et puis parce que encore une fois, c'est JavaScript sous le capot, il va exécuter une ligne à la fois. Donc, il exécute cette ligne, puis il va exécuter cette ligne, et il sélectionne notre paragraphe et le change pour changer la vue jQuery numéro deux. Mais alors il sélectionne également P point classe personnalisée. C' est celui-ci, et l'écrase une deuxième fois. Maintenant, nous pouvons également sélectionner par un ID. Alors allons de l'avant et sélectionnons un ID et nous n'avons pas besoin d'utiliser P ID personnalisé, bien que nous puissions, si nous le voulions, nous n'avons pas réellement besoin de ce sélecteur d'élément. Et là, on pourrait juste utiliser l'identité. La même chose avec notre classe. Mais parce qu'une idée par opposition à être complètement unique dans votre page ou sur votre page, il ne devrait jamais y avoir plus d'un ID client. Où est il peut y avoir plus d'un nom de classe du même nom exact. Il ne devrait jamais y avoir qu'un seul ID client ou un ID particulier par élément. Et nous pouvons donc sélectionner ceci sans avoir à sélectionner ou spécifier un paragraphe. Parce que notre navigateur sait que si nous suivons les règles, il n'y aura jamais qu'un seul ID client ici. Et nous pouvons dire que ce texte point a changé à nouveau, et faisons un numéro quatre là-dedans. Et donc c'est à quoi ressemble le code actuellement. Donc, il va sélectionner tous les h 1 et nos paragraphes. Modifiez-le par celui qui se termine par nombre pour sélectionner le paragraphe avec une modification de classe personnalisée vers celui qui se termine par le numéro trois. Et puis sélectionner se trouve juste être un paragraphe qui est déjà sélectionné ici. Mais nous allons sélectionner l'ID client, qui est le paragraphe. Et on va changer celui-ci pour le changer à nouveau, numéro quatre. Et quand nous rafraîchissons notre page, changé à nouveau numéro quatre. Et maintenant nos pages sont immédiatement plus interactives. Nous pouvons écraser tout ce que HTML a été donné. Donc, si quelqu'un vous donne une page HTML ennuyeuse et que vous voulez changer un tas de choses, mais vous n'êtes pas autorisé à toucher le HTML, ce qui arrive réellement. Parfois, vous pouvez utiliser JavaScript et jQuery pour le changer. Maintenant, je ne vais pas trop parler des sélecteurs à ce stade juste parce que c'est vraiment juste un sélecteur CSS et c'est plus une chose CSS. Lin, C'est une chose JavaScript ou jQuery. Donc, chaque fois que vous voulez sélectionner quelque chose de très spécifique, vous pouvez sélectionner votre corps. Vous pouvez sélectionner un élément, peut-être un paragraphe, puis vous pouvez sélectionner toutes les balises fortes à l'intérieur de celui-ci. C' est juste un sélecteur CSS régulier. Vous sélectionnez donc votre corps, sélectionnez tous les paragraphes à l'intérieur du corps, sélectionnez tous les éléments forts à l'intérieur d'un paragraphe. Et puis on changerait ça. Nous n'avons pas cet exemple de configuration, mais si vous le souhaitez, ce serait une petite chose amusante à mettre en place pour votre projet ou pas votre projet, mais vos devoirs pour cette leçon particulière sont de créer un sélecteur très spécifique, faites le texte par point, puis modifiez le texte dessus. Allez-y et donnez-lui un coup de feu. Lorsque nous avons terminé, nous allons examiner la modification dynamique du code HTML sur la page. 6. Modification dynamique: Jetons un coup d'oeil à la façon dont nous pouvons ajouter dynamiquement du HTML à une page. Et donc pour cela, nous avons besoin d'un exemple. Donnons à notre page un div avec un ID client d'ID personnalisé. Et il n'y aura rien ici, donc ça va être complètement vide. Et nous savons que si nous retournons à notre navigateur et nous actualisons votre page, il n'y aura rien là-dedans. Et si nous regardons notre code source, il dit juste ID personnalisé. Il n'y a rien là-dedans. Allons de l'avant et ajoutons du HTML personnalisé là-dedans. Donc, dans les deux dernières leçons, vous avez vu que nous choisirons cet ID avec un ID personnalisé. Et j'utilise le sélecteur d'identification ici, point txt, texte ici. Et donc nous utilisions taxé et c'est, c'est tout, bien et bien. Mais cela ne va pas réellement ajouter de HTML. Donc, si nous voulions ajouter un H1 et ici nous pouvons dire H1, HelloWorld. Et malheureusement, cela ne va pas faire ce que nous attendons d'elle. Et revenons à notre code ici. Il va en fait imprimer H1, HelloWorld huit slash H1. Ce n'est peut-être pas ce qu'on veut. Peut-être que nous voulons réellement ajouter un peu, du code HTML approprié ici. Donc, si nous inspectons ceci, nous allons dans nos éléments et le visser pour le rendre plus petit. Nous pouvons en fait voir qu'il n'y a pas un seul élément, c'est juste du texte brut. Et ce n'est pas toujours ce que nous voulons. Au lieu de cela, ce que nous voulons est d'utiliser HTML. Et donc, comment cela fonctionne, c'est que vous avez un sélecteur, vous faites des parenthèses d'ouverture HTML, puis vous mettez votre HTML là. Quel que soit ce HTML, il peut s'agir d'une chaîne comme celle-ci, ou il pourrait s'agir d'une variable. Et puis vous le fermez avec vos parenthèses fermées. Et le point-virgule est facultatif. Donc je vais parfois l'utiliser, parfois pas l'utiliser. Allons de l'avant et rafraîchissons notre page. Et maintenant, nous voyons que nous avons réellement un bon HelloWorld H1. Et dans notre modèle d'objet de document dans notre code source ici, ce que notre navigateur le voit comme, nous avons un H1 approprié. Donc, ce qui est cool à ce sujet, c'est que nous pouvons maintenant aller ici et écrire une plage avec une classe de classe personnalisée, span, barre oblique de texte. Donc, cela devient un peu difficile à lire juste parce qu'il va être enveloppé, sur plusieurs lignes ici. Et parce que je suis assez zoomé avec mon éditeur. Mais si on se rafraîchit, on verra qu'il y a une travée. Maintenant, nous pouvons aller de l'avant et sélectionner cette plage. Une fois qu'il est créé, nous pouvons aller de l'avant et sélectionner le texte de la plage modifié. Et on va voir qu'il va du texte de l'échelle à changer. Juste comme ça. Maintenant, l'espacement est un peu désactivé et c'est un exemple assez laid, mais c'est un exemple très fonctionnel. Et jQuery ne vise pas à rendre les pages belles. C' est à quoi sert CSS. Jquery est censé être un moyen plus court d'écrire JavaScript. Il y a donc une différence entre HTML et texte. Nous avons appris à propos du HTML dans la leçon suivante. Allons de l'avant et apprenons à propos du texte par points. Ce que je voudrais que vous fassiez pour cette leçon particulière est d'aller de l'avant et sélectionnez un ID ou un élément ou plutôt n'a pas besoin d'être Beidi pourrait être par nom de classe, pourrait être juste sélectionner tous les divs sur la page, faire le point HTML, puis écrire quelques HTML réel là-dedans. Et prenez note. Vous pouvez toujours cliquer avec le bouton droit de la souris sur inspecter, accédez à l'onglet Et vous pouvez voir qu'il y a des éléments HTML réels ici. Une fois que vous aurez fait ça, passons à la leçon suivante. 7. Modification dynamique: Jetons un coup d'oeil formel à modifier le texte. Et nous avons beaucoup travaillé avec cela jusqu'à présent, beaucoup, beaucoup dans presque toutes les leçons jusqu'à présent, peut-être même toutes les leçons jusqu'à présent. Mais jetons un coup d'oeil formel. Et donc, dans la dernière leçon, nous avons regardé point HTML. Dans celui-ci, nous allons regarder le texte des points. Et donc ce que nous pouvons faire ici, c'est de ne pas faire un div ou un H1. Faisons un élément de section. Et disons de mettre du code HTML ici. Et donc nous pouvons sélectionner cette sélection ou élément de section avec signe dollar, parenthèse, point de section. Et puis nous pouvons soit changer le HTML ou le, ou le texte. Maintenant, si nous voulions réellement mettre du code HTML ici, nous ne pouvons pas utiliser HTML. Donc, si je mets une balise en gras contre en gras. C' est donc une vieille façon de faire audacieux. C' est la nouvelle façon de faire audacieux. Enregistrez ceci et actualisez ma page. En fait, il essaie de se rendre. Donc, si je vais dans la section ici, il a réparé mon B et des éléments forts. Et c'est parce que nous injectons du HTML dans la page. On n'a pas besoin de le faire. Si nous voulions vraiment voir ce code, nous pouvons simplement faire du texte par points. Et c'est la différence entre dot txt index.html est quand je rafraîchis la page, il apparaît en fait donc je peux écrire du HTML ici maintenant, ce qui est vraiment génial pour coder des sites Web, coder des blogs, choses comme ça, chaque fois que vous avez besoin de affiche effectivement une sorte de code. Maintenant, votre tâche pour cette leçon particulière est de sélectionner un élément. Ce n'est pas nécessairement une section, il peut être n'importe quel élément. Et puis à l'intérieur de cet élément avec jQuery, je veux que vous utilisiez dot txt n dot HTML et écriviez du HTML à l'intérieur et voyez quelle est la différence en fait. Maintenant, vous avez vu quelle est la différence sur mon écran, mais ce n'est pas tout à fait la même chose que d'avoir la main sur l'expérience. Alors allez-y et obtenez une expérience pratique. Et lorsque vous avez terminé cela dans la leçon suivante, continuons et parlons d'obtenir formulaire parce que les valeurs de formulaire ne sont pas tout à fait les mêmes. 8. jQuery Obtenir des valeurs de formulaire: Parlons de la façon dont nous pouvons obtenir des valeurs de formulaire maintenant. Donc, dans les deux dernières leçons, nous avons fait cette chose cool où nous avons fait point HTML. Nous avons aussi fait du texte par points. Maintenant, c'est cool et cela fonctionne avec des éléments comme une section qui a du contenu à l'intérieur, contenu à côté de celui-ci. Et c'est très bien. Mais que se passe-t-il si nous travaillons avec un élément qui n'a pas de contenu à l'intérieur de celui-ci. Et si nous travaillons avec un élément d'entrée ? Maintenant, dans l'élément d'entrée n'a pas de balise de fermeture. n'y a pas de texte à l'intérieur. Comment on fait face à ça ? Donc, tout d'abord, gardons ça. Et c'est à ça que ressemble notre page. C' est juste un élément d'entrée. C' est un élément d'entrée très ennuyeux. Mais ce que nous pouvons faire ici, c'est que nous pouvons maintenant aller de l'avant et y mettre le texte. Donnons donc à cela une valeur par défaut. Bonjour monde, juste le genre defacto de textes que chaque programmeur a tendance à utiliser. Et ça dit bonjour monde. Et si nous voulions pouvoir retirer cette valeur ? Eh bien, commençons par le sélectionner d'abord. Nous allons le sélectionner par une entrée est la seule chose sur notre page et nous pouvons simplement le sélectionner par sa seule valeur d'entrée. Et puis on peut faire dot val. Maintenant, il y a deux choses que nous pouvons faire ici, et je vais en fait parler de DOT test.html aussi bien dans un instant. Mais on peut le faire. La valeur constante est égale à la valeur définie console.log. Et tout ce que nous faisons ici, c'est, nous sélectionnons ce point d'entrée. Et puis nous avons utilisé Lotvall, pas la valeur de point, dot va al. Et on ne met rien dans les parenthèses ici, c'est juste vide. Et donc quand je rafraîchis la page et aller sur ma console, il dit bonjour monde. Et c'est tirer cette valeur d'ici pour que nous puissions changer cette valeur en Hello World 1-2-3. Et quand je rafraîchis la page, il est dit Hello 1-2-3 ou helloworld 1-2-3 à l'intérieur de la console. Et si on voulait changer ça ? Eh bien, c'est vraiment facile aussi. On pourrait changer ça. Et nous pourrions dire, cela est changé et toujours simplement faire est d'ajouter une valeur. Maintenant, nous ne voulons plus nécessairement travailler avec ça et nous allons nous débarrasser de ça. Donc nous allons sélectionner cette entrée, dire cette valeur. Celle-là doit être, c'est changé. Alors allons-y et vérifions ça. Et il dit que cela est changé, mais dans notre code source, il dit bonjour monde 1-2-3. Toujours. Il se trouve juste que JavaScript et jQuery ensemble ou en remplaçant cette valeur. Et donc vous pouvez voir quand je rafraîchis assez vite, il scintille un peu. Ce petit truc cool avec Dot Val. Quand il est vide, nous pouvons faire la même chose avec le point HTML et le texte point. Alors allons de l'avant et donnons à cela un petit exemple aussi. Section qui vient de jeter un peu de lorem ici, certains ipsum lorem je tape LO REM frappé onglet sur VS Code et il le remplit automatiquement avec Lorem Ipsum pour moi. Donc, je n'ai pas à penser à une sorte de texte fictif parce que parfois il est difficile de trouver des exemples comme ça. Donc, ce que nous pouvons faire ici, c'est maintenant que nous pouvons sélectionner cette section et nous pouvons saisir ce texte. Et nous pouvons mettre cela dans une variable aussi. Donc, le texte const est égal au texte console.log. Et quand je rafraîchis cette page, nous avons tout ce texte ici, et nous avons aussi tout ce texte ici. Maintenant, notez qu'il a également l'espace. Et cet espace blanc, si je rafraîchis un code source vient du rouge ici jusqu'à cette nouvelle ligne là-dedans. Et il y a aussi de l'espace blanc supplémentaire à la fin. À la fin de la section. Nous pouvons faire la même chose avec le point HTML, et faisons cela en gras. Donc on va juste auditer le mot REM. Et on peut voir que c'est audacieux ici. Et c'est audacieux ici. Voilà la différence. Quand nous faisons le texte point. Notez que celui-ci est en gras ici, mais REM ici dans notre console, il a le HTML retiré de celui-ci. Alors fais attention là. C' est donc une leçon amusante de trois en une. Mais ce que je veux que tu fasses, c'est juste ignorer ça pour l'instant. Range-le dans ta poche arrière. Et je veux que vous créez un élément d'entrée et utilisez dot val pour définir la valeur de l'élément d'entrée. Lorsque vous avez terminé cela, allons de l'avant et parlons de la façon dont nous pouvons ajouter dynamiquement du HTML à une certaine partie d'une page, comme à l'intérieur d'un élément à l'avant ou à l'arrière de celui-ci. 9. Préparer et ajouter: Ok, parlons de l'ajout et du HTML en préattente. Et donc ce que nous allons faire, c'est de sélectionner un élément. Et puis nous allons ajouter un peu, un autre élément ou un autre texte à l'arrière de celui-ci et l'avant de celui-ci à l'intérieur de cet élément particulier. Donc, ce que nous avons vu avant, c'est que nous pourrions avoir comme un H1 avec du texte ici. Et nous avons été en mesure de sélectionner celui-ci, puis d'utiliser le point HTML pour y mettre plus de HTML. Mais disons que nous voulions ajouter une travée à la fin ou que nous voulions ajouter une travée au début. Eh bien, nous devrions extraire tout cela stocké dans une variable, écraser cette variable avec du HTML à l'intérieur de celle-ci. Il y a en fait une meilleure façon de le faire. Donc, tout d'abord, allons de l'avant et faisons une fonction de point de document prêt. Et cela nous permet juste de mettre notre code jQuery ici en toute sécurité. Allons de l'avant et sélectionnons ce h un. K un est sélectionné. Maintenant, je peux utiliser append, APP END OU prepend. Append va à l'arrière, prepend va à l'avant. Alors ajoutons, et ajoutons du HTML ici. Ajoutons fort. C'est audacieux. Et c'est, encore une fois, ça va sélectionner ce H1, et ça va juste ajouter des choses ici. Alors allons de l'avant et sauvegardons notre page et actualisons. Et vous pouvez effectivement voir que lorsque nous inspectons ici h un, à la fin de celui-ci, nous avons HTML, nous avons fort, c'est audacieux. Et en fait, c'était un mauvais exemple parce que c'est difficile à voir. Soulignons. On y va. C' est Bolden est souligné. Faisons en sorte que ce soit cohérent. Rédaction cohérente là-bas. Donc, il y a du texte ici. Ceci est souligné. Nous pourrions également sélectionner ce même H1 et nous pourrions faire prepend. Et faisons un comptage six. C' est en italique. Et ce que cela va faire est de mettre du code au tout début. Code ici. Et c'est exactement ce qu'il fait. Il dit que c'est en italique dans notre H1, nous avons un texte vous, mais dans notre code source, nous n'avons rien de tout ça. Et donc maintenant, nous marquons dynamiquement notre page en utilisant simplement JavaScript et jQuery. Une petite chose amusante ici, c'est que si on le voulait, on pourrait les enchaîner ensemble. Alors allons de l'avant et mettons ceci sur une nouvelle ligne parce que JavaScript ne se soucie pas des nouvelles lignes. Et allons-y et débarrassons-nous de celui-ci. Et donc nous allons sélectionner celui-ci, et ensuite nous allons ajouter, puis nous allons préparer. Et à quoi cela ressemble essentiellement, c'est juste ceci. On le change ensemble. Mais nous pouvons les mettre sur de nouvelles lignes. Donc ça a l'air un peu plus agréable. Et cela s'appliquera tous les deux ensemble. Donc, nous allons juste ici et ici, numéro deux, pour que nous sachions que cela fonctionne réellement, que ce n'est pas seulement l'exécution du même code du dernier exemple. Donc, actualisons notre code source et nous voyons que rien n'a changé ici. Notre jQuery a changé, mais le dom réel n'a pas changé le modèle d'objet de document. Allons de l'avant et actualisons le modèle d'objet de document. Nous allons voir que c'est en italique numéro deux et ceci est souligné numéro deux. Et ça a marché. Et tout ce que nous avons fait, c'est au lieu de les sélectionner tous les deux, nous en avons choisi un. Nous utilisons un sélecteur et nous le réutilisons. Donc, nous avons annexé et nous avons précédé. Maintenant, ce qui est cool à propos de chaîner ici, c'est que nous pourrions aussi faire 2.txt. Ceci est changé. Texte, puis ajouter, puis faire précéder. Et donc un texte ici va dire, c' est changer de texte et ça a tout changé pour moi. Donc celui-ci n'a plus aucun des contenus qui étaient originaux de ma page. Jquery a maintenant écrasé tout cela et il a ajouté et ajouté du HTML. Ce que je voudrais que vous fassiez comme petite tâche amusante, c'est d'aller de l'avant et de donner un coup de feu. Vous n'avez pas à vous soucier de la partie texte. Mais allez-y et ajoutez du HTML, préparez un HTML2, n'importe quel sélecteur de votre choix. Et quand tu auras fini ça, enchaînez-les comme ce que j'ai fait. Lorsque vous avez terminé cela, nous allons examiner la sélection d' un élément, puis ajouter du HTML en dehors de celui-ci, mais avant et après. Donc, certains ici et d'autres ici, car en ce moment prépend et ajoute seulement du travail à l'intérieur. Nous voulons maintenant travailler à l'extérieur. 10. Avant et après: Dans notre dernière leçon, nous avons ajouté et ajouté du HTML à notre page dans cette leçon, continuons et ajoutons du HTML avant et après un élément. Alors donnons ceci un div avec un identifiant de cible. Et il n'y aura rien ici. Maintenant, j'aimerais, mettons quelque chose ici. Ajoutez du code HTML avant et après cela. Et donc allons de l'avant et parce que tout dans jQuery est fondamentalement sélectionné ou base, sélectionnons cette cible. Nous pouvons même faire div ID cible. Alors on peut faire point avant. Et c'est juste littéralement point avant. Et mettons un h3 ici. Helloworld, C'est un titre. Et refaisons-le. Sélectionnez un Div sélectionné par son ID, puis faisons après. Et faisons un paragraphe ici. Il s'agit d'un paragraphe. Et donc ce que nos pages maintenant nous allons faire, c'est qu'il va sélectionner cet élément. Et avant cet élément, juste avant. Juste ici. Si je pouvais épeler des mots correctement, juste ici va dire, ça va dire bonjour monde, ça a un titre. Et après ça va dire avec une sorte de paragraphe ici. C' est un paragraphe et celui-ci va en fait être un h3. Donc ça va ressembler à ça. Allons-y et débarrassons-nous de ça pour que nous n'ayons pas ça ici. Et supprimer, supprimer, supprimer, enregistrer. Voyons d'abord notre code source. Assurez-vous que ce n'est pas vraiment ajouter quoi que ce soit là-dedans. Et nous allons de l'avant et rafraîchissons ce Hello World. Il s'agit d'un titre en HTML avant et après cela, et il s'agit d'un paragraphe. Et si votre console n'est pas ouverte ou vos outils de développement, vous pouvez cliquer avec le bouton droit de la souris. Vous pouvez aller à Inspecter, ouvrir l'onglet éléments, et vous pouvez voir qu'il y a maintenant un H3. Il y a le même div que nous avons ciblé à l'origine, et il y a un paragraphe après. Maintenant, comme dans la dernière leçon, nous pouvons, si nous voulions les enchaîner ensemble. Et donc nous n'avons besoin de sélectionner cela qu'une fois et ensuite nous pourrions dire avant et après et faire ces choses. Allons de l'avant et sauvegardons cela en fait, allons-y et assurez-vous que la mise en cache ne se produit pas. Et nous allons juste mettre un numéro deux là-dedans pour que nous sachions que cela fonctionne comme nous nous attendons à ce qu'il fonctionne. Alors allez-y et rafraîchissez. Bonjour le monde. C' est le titre numéro deux. Il s'agit d'un paragraphe numéro deux. Et c'est ainsi que nous ajoutons du HTML avant et après un élément. Ce que j'aimerais que vous fassiez, c'est la même chose. Juste imiter ce que j'ai fait dans ces vidéos juste pour avoir une expérience pratique. Et encore une fois, je ne peux pas dire que c'est quand vous apprenez à coder, vous pouvez regarder autant de vidéos que vous le souhaitez. Mais rien ne va se comparer à la mise en pratique de l'expérience et pouvoir l'écrire et être capable de créer de la mémoire musculaire. Alors allez-y et donnez un coup de feu. Lorsque vous avez terminé cela, passons à la leçon suivante, où nous sélectionnons effectivement un élément de la page et complètement supprimé. 11. Supprimer des éléments: Jetons un coup d'oeil à la façon dont nous pouvons supprimer un élément d'une page. Donc, pour cela, créons un exemple plus complexe. Créons un div. Et il va y avoir un paragraphe ici. Et ça va les abaisser ici. Et il va y avoir un autre paragraphe ici, peu plus de Lorem, et un autre paragraphe ici avec un peu plus de Lorem. Nous avons donc trois paragraphes ici. Et disons que nous voulions sélectionner cette classe moyenne, paragraphe du milieu. Et quand nous page Viewer, oui, c'est ennuyeux, mais ce sera un bon exemple. Donc, nous avons trois paragraphes ici, à l'intérieur d'un div, et un a une classe. Alors allons de l'avant et créons un sélecteur intéressant ici. Mais avant de le faire, nous allons nous assurer que notre jQuery peut être chargé. Fonction document.ready. L' épeler correctement pour la troisième fonction de temps. Et puis nous pouvons mettre notre jQuery ici. Allons de l'avant et sélectionnons ceci. Maintenant, il y a plusieurs façons de sélectionner ce paragraphe particulier, mais allons de l'avant et sélectionnons-en un. une manière intéressante, une façon que nous n'avons pas encore vraiment vue. Donc, sélectionnons tous les divs sur la page. Ensuite, sélectionnons tous les paragraphes à l'intérieur de la div. Et puis nous assurons que nous ne sélectionnons que les paragraphes qui ont le paragraphe central de la classe, paragraphe central. Donc maintenant, nous entrons dans un sélecteur intéressant ici. Et pour supprimer cela, tout ce que nous avons à faire est de taper point, supprimer les parenthèses. Et cela sera littéralement supprimé de notre modèle d'objet de document. Donc, si nous voyons notre code source ici, nous avons trois paragraphes. Cela apparaît toujours. Mais si je rafraîchis la page, vous pouvez voir qu'elle n'apparaît pas. Et si j'aborde mes éléments ici, nous n'avons que deux paragraphes. Aucun d'entre eux n'a le paragraphe du milieu de la classe. Maintenant, ce qui est cool à ce sujet, c'est parce que c'est un sélecteur de classe. On peut dire le paragraphe intermédiaire. Ce n'est plus le paragraphe du milieu, mais faisons semblant que c'est le cas. Nous pouvons sélectionner les deux en même temps et les supprimer exactement en même temps. Donc maintenant, il va sélectionner notre div, sélectionner tous les paragraphes avec une classe de paragraphe milieu. Eh bien, regardez, deux d'entre eux sont mis en évidence là-bas. C'est deux d'entre eux. Et nous allons supprimer les deux. Donc, si nous réaffichons notre code source, il apparaît toujours comme normal. Il y a encore trois paragraphes là-dedans, mais JavaScript remplace notre page et il se débarrasse des deux autres. Et ici, nous avons un div et un seul paragraphe. Nous n'avons plus trois paragraphes. Maintenant, c'est complètement sûr à faire. Cela ne va jamais supprimer ou supprimer quoi que ce soit de votre ordinateur. Il ne fonctionnera jamais qu'avec le code à l'intérieur de votre page en fonction du sélecteur que vous lui donnez. Maintenant, si vous voulez le faire, et vous pouvez aussi juste dire, hey, sélectionnez chaque paragraphe, supprimez-le. Mais parce que tous nos paragraphes sont dans un div, nous pourrions sélectionner ce div et nous pouvons le supprimer aussi. Et nous pouvons voir dans votre modèle d'objet de document que div n'existe pas. Notre code source n'a pas changé, mais JavaScript le remplace. Donc, ce que je voudrais que vous fassiez comme une petite tâche amusante, allez-y et créez n'importe quelle sorte d'exemple avec HTML. Sélectionnez un élément particulier, un seul d'entre eux, puis supprimez-le. Vérifiez qu'il a été supprimé ici. Vérifiez qu'il a été supprimé ici. Et une fois que vous avez fait cela, passons à la leçon suivante où nous sélectionnons un élément et nous débarrassons de tous ses éléments enfants. Donc on va le vider. 12. Supprimer des éléments d'enfant: Il y aura un moment où vous devez sélectionner un élément et tous ses éléments enfants doivent être supprimés. Et donc nous pourrions écrire un sélecteur de fantaisie pour sélectionner à peu près tout. Donc, nous pourrions dire, par exemple, div sélectionné, et c'est comme tout à l'intérieur de ce point div remove. Mais il y a une meilleure façon de le faire. Et alors, allons de l'avant et mettons en place un exemple ici. Nous pouvons dire div, et cela va être notre élément parent. Donc élément parent, et ceci est un commentaire HTML ici. Juste là. Écrivons un mot fort en gras ici. Italique, it, mot en italique ici. Et nous allons également sélectionner ou non le Créer un paragraphe avec un certain lorem ipsum dedans. Et donc si on voit notre page, d'accord, pas grand-chose. Nous avons encore cette div. Et si nous voulions sélectionner cette div ? Et donnons à ceci un ID de parent. Et si nous voulions sélectionner cette div d'ID parent et se débarrasser de tous ces trucs ici. C' est vraiment, vraiment facile à faire. Et rendons ça un peu plus compliqué. Donc, tout d'abord, commençons par div, sélectionnez l'ID parent. Et puis on pourrait juste faire des points vides. Et ce que cela va faire est de sélectionner cet ID, sélectionner ce div, et juste se débarrasser de tout ce qu'il contient. Maintenant, nous pouvons enchaîner ensemble point HTML et nous pourrions dire quelque chose comme bonjour monde. Et cela s'est débarrassé de tous les éléments à l'intérieur de cette div et le remplacer par bonjour monde. Maintenant, si nous regardons notre code source, tout notre code source régulier est toujours là. Cela ne changera pas tout au long de ce cours. Tout notre code source va être exactement comme nous l'écrivons. Javascript continuera à l'écraser. Donc, ce sera exactement ce que nous écrivons et JavaScript va le changer. Donc, à partir de là, je ne vais probablement plus vous montrer le code source trop souvent juste parce que, eh bien, ça va fonctionner de la même façon encore et encore et encore. Maintenant, allons de l'avant et sorte de changements dans JavaScript approprié. Pour que nous puissions faire const. Parent est égal à deux. Et lorsque vous écrivez jQuery et que vous voyez un signe dollar devant un nom de variable. Ça veut dire qu'il y a une sorte de sélecteur. Et donc nous pouvons aller de l'avant et sélectionner ceci. Et puis si nous le voulions, nous pourrions dire parent.value vide ou parents point HTML trucs ici. Et nous allons à des trucs CSS ici. Maintenant, ce qui est un peu intéressant à ce sujet, c'est parfois que vous avez juste besoin vider un élément juste pour que quelque chose d'autre charge un peu plus tard. Mais si vous avez besoin que cela se produise tout de suite, nous n'avons pas besoin d'utiliser le vide. Nous pouvons sélectionner cet élément parent entier et nous pouvons écraser le HTML entier avec une phrase qui dit des choses ici, Stephan ici, et il n'y a pas d'éléments enfants. Maintenant, si vous venez juste dans le monde des modèles d'objets de documents et que vous êtes comme ce qui est apparent, qu'est-ce qu'un enfant ? C' est une bonne question. Un élément parent contient des éléments enfants. Un élément enfant est à l'intérieur d'un élément parent. C' est tout ce que c'est. Alors allons de l'avant et donnons cet exemple, un coup de feu ici, un petit aperçu. Et nous allons voir ici, nous avons réellement écrasé tout, donc nous n'avons pas besoin d'utiliser le point vide. Nous sommes vraiment entrés est si vous avez un traitement à faire ou si vous avez besoin de récupérer des données à partir d'une API, vous pouvez parent point vide. Supprimons ce point parent vide. Et puis faites une chose pour que vous puissiez récupérer des informations à partir d'une API quelque part. Et peut-être que ça prend trois secondes. Et puis vous pouvez dire point parent HTML et mettre du nouveau HTML dedans. Dans la leçon suivante, commençons à parler des écouteurs d'événement, syntaxe de l'écouteur d' événement et de la façon dont nous pouvons déclencher quelque chose lorsque nous cliquons dessus. 13. Les spectateurs d'événement et l'événement de clic: Bienvenue dans le monde des auditeurs d'événements. auditeurs d'événements sont des choses très, très intéressantes. Donc la première chose que nous devons faire est de regarder la syntaxe, Kay ? Donc, en fait, la première chose que nous devons faire est de parler de ce qu'est un écouteur d'événement. Un écouteur d'événement est. Lorsque vous avez un bouton sur la page et que vous dites qu'il indique Cliquez sur moi à l'intérieur de celui-ci et que vous cliquez sur ce bouton. Qu' est-ce qui est censé se passer ? Ce n'est pas l'écouteur d'événement. Ou si vous avez un élément d'entrée et que vous commencez à taper dedans. Chacune de ces lettres que vous appuyez sur votre clavier est un événement. Chaque fois que vous déplacez votre souris, chaque fois que vous redimensionnez votre écran, chaque fois que vous vous concentrez dans un élément d'entrée ou que vous sortez d'un élément d'entrée ou que vous quittez l'élément d'entrée. Ce sont tous des événements et nous allons aborder un tas de ces événements dans ce cours. Donc, tout d'abord, jetons un coup d'oeil à certaines de la syntaxe ici. Il y a donc deux façons de le faire. Il y a le, il y a la bonne façon que vous allez voir dans les docs jQuery. Et puis il y a sans doute une meilleure façon de le faire, qui sera la preuve future pour Ajax et les appels de modèle d'objet de document. Jetons un coup d'oeil aux deux. Donc, d'abord, nous avons une sorte de sélecteur et donc nous pouvons sélectionner le bouton. Et puis nous pouvons dire dot click. Et cela va prendre une fonction. Et donc sans la fonction, c'est à ça que ça ressemble. C'est un écouteur d'événement. Maintenant, cette fonction que nous transmettons ici est simplement ce que nous voulons faire. Donc, nous pouvons dire console.log. On m'a cliqué. Et parce que nous avons ce bouton ici sur cette page qui dit cliquez sur moi, allons de l'avant et donnons ceci un coup de feu. Il est dit Cliquez sur moi et dans la console ici, chaque fois que je clique dessus, il indique que j'ai cliqué. C' est ça. C' est tout ce qu'il y a aux écouteurs d'événements avec jQuery est un super, super facile. Maintenant, il y a une autre façon de le faire. Je vais le commenter. Et sans doute cette façon est meilleure. Vous pouvez avoir un bouton de point de sélecteur, puis vous dites point sur ce que vous voulez qu'il fasse. Qu' est-ce que tu veux qu'il écoute ? Vous vouliez qu'il écoute un événement click. Et puis vous passez dans une fonction console.log. cliquer sur cette option pour actualiser votre page. Et il dit que c'est cliquable pour maintenant Justin, vraiment rendre la vie folle difficile et difficile à apprendre jQuery. Apprenons une troisième voie. Et c'est en fait la meilleure façon, mais nous ne ferons pas le mieux. Nous allions faire le chemin du milieu en avançant tout au long de ce cours. Mais le meilleur moyen est document point sur clic, puis votre bouton, puis votre fonction, console.log. Et nous allons juste enregistrer 33333. Et cela fonctionne aussi. Il y a donc une raison pour laquelle nous le faisons différemment ici. Et donc nous allons utiliser cette méthode à l' avenir juste parce que c'est le plus facile à écrire à comprendre. Et celui-ci est un peu plus complexe, mais il y a une raison pour laquelle nous faisons l'onde complexe et la manière complexe est parce que si nous ajax ou créé dynamiquement un bouton ? Allons-y et faisons-le et je vais vous montrer un exemple ici. Div ID. Mettez. Bouton ici. Allons de l'avant et sélectionnons ceci. Donc, nous pouvons faire constante. Appelons le parent est égal à ce sélecteur. Non, c'est le sélecteur d'identité. Ensuite, nous pouvons faire parent.value HTML. On peut mettre un bouton ici. Cliquez sur Me barre oblique bouton, bouton, bouton. Et allons-y et débarrassons-nous du Cliquez sur moi en tant que bouton dynamique Click Me. C' est ce que ça va être. Cliquez sur Me bouton dynamique, il apparaît. n'y a pas encore d'auditeurs d'événements. Allons-y. Et disons que cet écouteur d'événement a été créé en premier. Donc, comment JavaScript et jQuery vont fonctionner est de haut en bas. Il va sélectionner tous les boutons sur la page, et il va enregistrer une fonction de clic. Mais actuellement, à ce stade, il n'y a tout simplement pas de boutons sur la page, il n'y a rien à cliquer. Ensuite, nous avons sélectionné ce parent et mis un bouton sur la page. Et quand nous sauvegardons ceci et rafraîchissons, nous voyons que rien ne fonctionne. Maintenant, c'est bon. Si nous pouvons déplacer ce code ci-dessous. Parce que ce bouton va maintenant exister sur la page. Et puis nous pouvons enregistrer l'écouteur d'événement. Et ça va marcher. Ce ne sera pas toujours le cas. Il va y avoir beaucoup de fois où un écouteur d'événement est enregistré. Mais alors vos pages vont changer dynamiquement. Et c'est très, très, très commun dans les sites Web modernes. Alors, qu'est-ce qu'on fait ? Pouvons-nous utiliser cette option ? Déplaçons cela vers le haut et commentons ceci afin que nous sachions que cela ne fonctionnera pas. Donc, nous allons maintenant sélectionner un bouton, puis onclick et nous allons dire quand ce bouton est cliqué, journal de la console, c'est cliquable deux. Maintenant, le même problème va se produire ici. Il va chercher tous les boutons sur la page. Il va essayer d'enregistrer un événement onclick. Ça ne marchera pas pour nous. Actualisons la page et voyons que ce bouton chaque fois que je clique dessus ne le fait pas. Ok, donc ce n'est pas bon. C' est une syntaxe agréable, propre, c'est agréable à écrire. Ce n'est pas suffisant pour le contenu dynamique. Le contenu dynamique arrive ici. Et remontons ça. Et donc ce que cela signifie est de sélectionner le document entier lorsque vous cliquez sur le document et que vous cliquez sur le bouton. Donc, ce pourrait être ce bouton particulier ici ou tout ce que vous voulez lui donner un ID ou une classe ou quelque chose comme ça. C' est votre sélecteur. Ensuite, faites une fonction et cela va rendre vos sites Web preuve dynamique, preuve Ajax. Donc, lorsque les choses se chargent dynamiquement sur votre page en utilisant d'autres JavaScript, cela va toujours fonctionner. Et alors, allons de l'avant et rafraîchissons la page. Et nous voyons que cela fonctionne maintenant. Nous avons enregistré un événement de clic sur tous les boutons, mais nous l'attachons au document. Donc, même s'il y a quelque chose de dynamique qui se passe, nous pouvons toujours l'exécuter. Donc c'est vraiment bon à savoir. Rangez ça dans votre poche arrière pour l'instant. Mais nous allons écrire de cette façon pour aller l'avant juste parce que c'est un peu plus propre. Maintenant, ce que je voudrais que vous fassiez est de créer un écouteur d'événement, quelque chose comme ça. Sélectionnez un bouton. Point sur. Votre premier paramètre va être ce que nous recherchons ? Nous sommes à la recherche d'un événement click. Lorsque vous cliquez sur le bouton, que se passe-t-il ? Ensuite, vous écrivez une fonction. C' est ce qu'on appelle une fonction de rappel. Et chaque fois que vous cliquez sur ce bouton, que va-t-il faire ? Allez-y et donnez-lui un coup de feu. Une fois que vous avez terminé avec cela, passons à la leçon suivante où nous parlons déplacer notre souris sur un élément et de sortir d'un élément. Donc on va planer. 14. Événements de surf: Il existe un moyen d'enregistrer un événement lorsque vous placez votre souris sur quelque chose et lorsque vous le déplacez hors de quelque chose. Et pour cela, allons de l'avant et écrire un peu de CSS. Alors ajoutons un peu de style ici, et créons une boîte. Et il va avoir une largeur de 200 pixels, hauteur, 200 pixels. La couleur de fond va être noire. Et mettons au milieu de notre page, faisons marge, 50% ou 50 pixels en haut et en bas et à droite au milieu de la page. Et maintenant, nous devons aller et créer une boîte et, et regarder ce CSS. Ceci est un ID pour un sélecteur de boîte. Boîte. Je peux m0 pour abréger ça. Donc je ne vais pas mettre de SMS là-dedans. Et puis pour sélectionner cette boîte, tout ce que j'ai à faire est d'écrire exactement la même chose. Et maintenant, nous écrivons la même chose dans trois langages de script différents. Nous avons HTML, CSS et JavaScript. Donc maintenant, nous pouvons dire boîte à points sur la souris entrée. Et que faisons-nous quand nous mettons la souris à l'intérieur de cette boîte, c'est le journal des points de console, que vous avez entré. Et dites que votre souris est un planant au-dessus de cette boîte. Et donc quand on rafraîchit la page, on a cette boîte noire. Et chaque fois que je mets ma souris dessus, il dit que votre souris passe au-dessus de cette boîte. Et donc ça ne le fait qu'une seule fois pendant que je suis au-dessus de cette boîte. Et quand je déménage, rien ne se passe. Quand j'emménage, ça se reproduit. Maintenant, si vous vous inscrivez lorsque vous déplacez votre souris, très, très simple. Nous pouvons maintenant enchaîner ces ensemble et nous pouvons dire sur l'entrée de la souris, nous pouvons aussi dire point sur le congé de la souris. Écrivons une fonction ici. Et on peut dire « Console Dot Avertir ». Tu as laissé la boîte. Et donc tout ce que nous faisons ici, c'est entrer la souris et surtout maintenant comme un petit résumé rapide de la dernière leçon, car la dernière leçon était assez intense. Tout ce que nous faisons ici, c'est une sorte de sélecteur, point sur le nom de l'événement. Et puis une fonction, et cette fonction fera tout ce que nous voulions faire ici. Il s'agit de la syntaxe de l'écouteur d'événement. C' est tout ce que c'est. Donc, juste comme un résumé rapide, nous avons un sélecteur parce que tout est basé sur des sélecteurs dans jQuery. Eh bien, presque tout pour enregistrer un événement, quel que soit le nom de l'événement. Dans cette leçon, nous utilisons l'entrée de la souris et le congé de la souris, puis faisons une fonction chaque fois que cet événement est déclenché. D' accord, sauvegardons ça et actualisons la page. Ok, rien ne se passe et enfonce ma souris. Votre souris survole la boîte. Il dit que vous avez quitté la zone de la boîte. Chaque fois que nous entrons et sortons, et sortons. Maintenant, je vais être complètement honnête ici. C' était super populaire il y a un certain nombre d'années, mais les gens n'utilisent plus vraiment les événements de vol stationnaire. Nous essayons d'utiliser des événements de vol stationnaire dans CSS homologue si possible. Parfois, ce n'est tout simplement pas possible. Donc, nous pouvons utiliser jQuery ou nous pouvons utiliser JavaScript vanille aussi pour que cela se produise. Mais généralement, nous essayons de rester avec CSS pour faire n'importe quelle sorte d'événement se produit lorsque vous déplacez votre souris sur quelque chose ou déplacez votre souris hors de quelque chose. Et en CSS, c'est aussi simple que de dire box-hover, et puis ça fait quelque chose. Et lorsque vous déplacez votre boîte, ou lorsque vous déplacez votre souris hors de cette boîte et qu'elle ne survole plus, elle revient à sa valeur par défaut. Donc c'est tout ce qu'il est alors c'est pourquoi nous préférons CSS. Mais encore une fois, parfois ce n'est pas possible. Et parfois, nous devons écrire un peu de JavaScript, un peu de jQuery pour rendre cela possible. Allez-y et donnez un coup de feu. Je veux que vous fassiez deux choses ici. Je veux que vous sélectionniez une sorte d'élément et enregistrez un événement d'entrée de la souris. Et juste la connexion à la console. On n'a pas encore à faire quoi que ce soit de fantaisie. Nous entrerons dans la fantaisie un peu plus tard, mais venons juste enregistrer quelque chose. Et puis, lorsque vous laissez la souris le journal de la console ou la console porté autre chose. Et la deuxième partie, c'est que je veux que vous les enchaîniez ensemble. Donc, actuellement, nous savons que cela peut ressembler à ceci. Doo-Doo-Doo-Doo chambres dans un mou qui bosse vers l'intérieur. Donc, cela fonctionne, cela fonctionnera parfaitement bien. Mais je veux que vous les enchaîniez ensemble pour faire un code jQuery un peu plus agréable. C' est aussi un peu plus de performance. Cela signifie que votre navigateur n'a pas besoin de rechercher ces éléments particuliers ou ce sélecteur particulier plus d'une fois et peut faire une seule fois et l'utiliser encore et encore. Une fois que vous aurez fait cela dans la leçon suivante, nous allons parler de l'écouteur d'événement clé. Alors, que se passe-t-il lorsque vous tapez une sorte d'éléments d'entrée ? Vous tapez quelque chose là-dedans. Comment pouvons-nous tirer cette valeur de là ? Que se passe-t-il chaque fois que vous appuyez sur une touche de votre clavier ? On va en parler dans la prochaine leçon. 15. Événements de keyup: Parlons de l'événement keyup. Dans l'événement keyup, nous avons comme une entrée. Et donnons à cela une classe de me sélectionner et une valeur par défaut de chose ici. Maintenant, bonjour monde, ou ils se sont améliorés. Et donc nous devons sélectionner ceci par sa classe ou, vous savez, nous aimons juste mord attribut. Nous pourrions le sélectionner par son type d'élément. Nous sommes sélectionnés par toutes sortes de choses, mais allons de l'avant et sélectionnons-le par sa classe. Ensuite, nous pouvons dire point sur la touche, fonction, console.log. Tu as appuyé sur KI. Et alors, allons de l'avant et rafraîchissons notre page. Et quand nous entrons ici, faire, faire, faire, faire, faire, faire, faire. Chaque fois que j'appuie sur une touche, il enregistre quelque chose dans mon code afin que vous puissiez les voir spammer ici. Et c'est tout ce qu'il y a. Et donc à ce stade, si tu penses, Wow, Kayla, ça, c'est la même chose encore et encore. Tu as absolument raison. C' est la bonne chose à propos de jQuery est une fois que vous apprenez une chose, c'est très similaire à toutes les autres choses. Et donc cela rend l'apprentissage de jQuery vraiment facile. Cela rend également l'écriture de JavaScript vraiment facile. Maintenant, disons que vous voulez qu'il tire la valeur de cela. Cela va devenir très intéressant, donc il est en fait supprimer cela. Et comment avons-nous obtenu cette valeur ? Nous avons deux façons. On peut obtenir cette valeur. Nous pouvons dire que const, faisons l'entrée est égale au moi sélectionné. Et puis nous pourrions faire console.log et nous pouvons enregistrer ce point d'entrée val. Maintenant, nous savons déjà à propos de Val. Donc ça va marcher pour nous. Allons de l'avant et rafraîchissons ceci. Et cela fonctionne pour nous de la façon dont nous nous attendons à ce qu'il fonctionne. Le problème ici est que vous avez maintenant un sélecteur ici, et chaque fois que vous appuyez sur une touche de votre clavier, il va traverser votre DOM va regarder à travers, disons, 10 mille lignes de HTML et essayer de trouver ceci. Et croyez-le ou non, même si c'est assez rapide, les navigateurs ne sont pas vraiment si rapides. Il y a beaucoup d'informations à parcourir et vous voulez être effectué avec votre code. Et surtout si nous essayons de trouver un emploi en tant que développeur web. Donc, à la place, ce que nous faisons est que nous pouvons, parce que nous utilisons la fonction et si vous venez de JavaScript, chaque fois que vous utilisez la fonction, vous avez accès au, ce mot-clé. On peut utiliser le sélecteur, ce point val. Et ce val se réfère simplement à ce qui est sélectionné ici. Et donc allons-y et console.log ce Console.log, ce dot val. Et quand je rafraîchis bonjour monde. Et cela fonctionne mieux et c'est techniquement plus rapide, techniquement plus performant. Maintenant, que se passe-t-il si nous avons un autre élément d'entrée avec le même nom de classe ? Et celui-ci a juste un texte différent. Est-ce qu'il va sélectionner les deux ? Et puis quand vous faites une clé sur l'un d'eux, est-ce que cela va obtenir la valeur des deux ensemble ou est-ce qu'il va obtenir la valeur de juste celui que vous tapez ? Ce sont des questions que nous devons nous poser. Allons de l'avant et rafraîchissons. Et HelloWorld 123. Et allons dans le type et ici, 123. Donc, il est complètement cloisonné des autres, ce qui est vraiment sympa maintenant dans les coulisses, tout ce qu'il fait est de sélectionner tous ces éléments comme des nœuds. C' est donc un noeud et ce noeud et il enregistre l'événement keyup sur chacun d'eux. Et donc, même si le sélecteur est fantaisie et sélectionne deux choses, notre écouteur d'événement derrière la scène enregistre en fait un écouteur d'événement différent pour chacun d'entre eux. Et donc ils sont complètement séparés les uns des autres. Maintenant, comme un petit résumé rapide, nous avons notre sélecteur, donc nous avons sélectionné un élément d'entrée ici. Nous avons dit point sur le haut, C'est notre EventListener. Ensuite, nous avons une fonction. Et dans cette fonction, il suffit de consigner ce point val. Et c'est la clé à emporter ici. Ceci, nous n'utilisons pas ce dot val parce que dot val n'existe pas sur le mot-clé ce. Nous allons jeter cela dans un, un autre sélecteur jQuery et ensuite utiliser un point valide parce que dot val existe sur le sélecteur dans jQuery, pas en JavaScript vanille, c'est une chose jQuery. Et donc nous devons envelopper cela dans un, dans un sélecteur jQuery. J' aimerais que tu lui donnes un coup de feu. Et je veux que vous bricolez avec le, cette propriété, le, ce mot-clé. Cela ne fonctionne que lorsque vous utilisez une fonction. Donc, si vous écrivez du JavaScript moderne et que vous utilisez une fonction de flèche, cela peut ou non fonctionner. Je vous implore d'essayer ça, de voir ce qui se passe. Mais typiquement, vous voulez cet élément. Et je dis ceci spécifiquement. Donc, cet élément est enregistré dans cette fonction. Et puis nous utilisons ce mot-clé pour tout lier ensemble. Allez-y et donnez-lui un coup de feu. Essayez de créer un écouteur d'événement clé lorsque vous avez terminé, parlons de ce qui se passe lorsque vous cliquez sur n'importe quel événement, pas dans un événement dans une entrée particulière. Donc, quand je clique dessus ou quand je clique dessus, que se passe-t-il ? 16. Focus focaux: Enregistrez un écouteur d'événement chaque fois que nous cliquons sur un élément d'entrée. Et au lieu d'utiliser un élément de saisie, utilisons une zone de texte. Et utilisons un autre type de sélecteur. Donc ça va avoir un nom de ma zone de texte. Et quand je regarde la page, c'est juste une zone de texte. Rien ne se passe. Maintenant, cela va fonctionner avec une zone de saisie, un élément d'entrée, tout comme cela va fonctionner pour un élément de zone de texte. Alors tout d'abord, allons de l'avant et sélectionnons ceci. Maintenant, nous pouvons sélectionner ceci par une zone de texte, mais nous pouvons également le sélectionner par un attribut. Et on peut dire l'attribut et ça commence comme ça. Le nom des crochets est égal à ma zone de texte, et c'est un type différent de sélecteur et cela fonctionne aussi en CSS. Point sur le focus, la fonction, console.log dans lequel vous vous êtes concentré et cette zone de texte. Et donc, lorsque nous actualisons la page, dès que je clique dessus pour taper quelque chose, il dit que vous vous concentrez dans cette zone de texte. Ce n'est pas un vol stationnaire. Remarquez comment cela ne se déclenche pas lorsque je mets ma souris dessus, seulement lorsque je clique dessus. Et c'est donc essentiellement tout ce qu'il y a à se concentrer. Cela va également fonctionner pour une entrée. Donc nous pourrions faire une entrée. Et l'entrée n'a pas de balise de fermeture et elle n'a pas également d'ID de lignes, ou elle pourrait avoir une idée, mais elle n'aura pas de lignes ou de colonnes. Comme les deux et appelons-le et mon entrée. Et maintenant, nous sélectionnons une entrée par son attribut de nom. Nous disons que sur la concentration, vous vous êtes concentré sur cette zone d'entrée. Allons-y et donnons une chance à ça. Et quand je mets ma souris dessus et rien ne se passe quand je clique dessus et il se déclenche. Mais quand je tape, ce n'est pas déclenché. Et donc la seule chose qui se passe ici c'est quand je mets ma souris dessus et que je clique dessus. Donc je suis prêt à taper. Maintenant, si vous vous demandez, où sur terre pourrais-je utiliser cette grande question. Vous savez, lorsque vous êtes sur une application et qu'elle vous demande votre adresse e-mail ou quelque chose et que votre clavier est caché. Eh bien, vous cliquez dans cette section ou vous mettez votre pouce dans cette section, vous appuyez dessus, puis votre clavier est côté vers le haut. C' est un bon, très bon exemple d'un événement sur le focus. S' il vous plaît allez-y et donnez un coup de feu. Créez un événement focus. C' est très, très similaire à l'entrée de la souris, le congé de la souris, le clic, et ainsi de suite. Donc, cela devrait commencer à vous sentir un peu plus familier dans la prochaine leçon lorsque vous êtes prêt. Parlons de ce qui se passe lorsque vous laissez un élément. On a parlé de ce qui se passe quand on se concentre. 17. Événements flou: Dans la dernière leçon, nous avons regardé ce qui se passe lorsque vous avez une entrée et que vous placez votre souris à l'intérieur de celle-ci et que vous aimez cliquer. Et puis toi, ça s'appelle la concentration. Vous vous concentrez sur la zone de texte et vous êtes en mesure de taper ce qui se passe lorsque vous souhaitez ne pas mettre l'accent sur le texte. Donc la valeur ne sera pas concentrée sur moi, sur moi. Et ce que nous allons faire ici est juste de sélectionner ceci en utilisant un sélecteur régulier, point sur. Et ça ne s'appelle pas « non concentré ». Ça s'appelle le flou. Et nous lui donnons une fonction. Console.log. Vous vous êtes éloigné de cette zone d'entrée. Ok, non concentré, c' est une faute de frappe amusante. Changeons aussi. Nous savons maintenant que ce n'est pas appelé flou non concentré de moi. On y va. Flou de moi. Et quand je clique, rien ne se passe parce que c'est l'événement focus. Et quand je clique dessus, pas quand je déplace ma souris hors de lui, mais quand je clique dessus et vous pouvez voir que le contour s'en éloigne. Il est dit, Vous avez floue loin de cette zone d'entrée. Et chaque fois que je le fais, ça va se déclencher encore et encore. Maintenant, si tu penses, hey, quand est-ce que ça va être utile pour moi ? C' est un très bon exemple de chaque fois que vous tapez votre adresse ou quelqu'un tape dans une URL de site Web et que vous voulez travailler avec cette information, nous pouvons obtenir la valeur ici. On pourrait dire « Console dot log », « dot val », « flou » de moi. Doo-Doo-Doo-Doo, 123123123. Et quand un flou s' éteint, ça dit flou de moi, 123123123. Et maintenant, nous pouvons travailler avec cette information. Pas sur toutes les touches, pas quand vous vous concentrez dessus, juste quand vous avez fini de taper, vous pouvez faire quelque chose avec. Et donc, à titre d'exemple, nous pourrions faire quelque chose comme laisser l'URL du site est égale à ce point val. Et puis nous pouvons dire si la sous-chaîne 04 URL du site Web n'est pas égale à HTTP, et nous voulons nous assurer qu'il s'agit d'un site Web. Donc, cela va être une sorte d'URL de site Web, donc comme www.facebook.com. Mais chaque site Web est en fait livré avec HTTP. C' est le protocole HTTP. Et donc nous pouvons maintenant dire que l'URL du site est égale à. Et nous pouvons utiliser un littéral de modèle ici. Donc, nous utilisons JavaScript ES6 et nous pouvons faire HTTPS deux-points slash slash URL du site Web. Et nous utilisons des ticks arrière pour le littéral de modèle. Et puis nous pouvons dire que ce point val est égal à l'URL du site Web. Et donc ce que nous faisons ici, c'est chaque fois que vous estompez de cela, si vous avez une sorte de texte qui ne commence pas par HTTP, il va automatiquement ajouter HTTP. Et puis il va changer cette valeur en URL du site Web. Maintenant que le site vous ou peut-être ne pas changer, il pourrait éventuellement changer qui, qui sait. Cela dépend de ce que l'utilisateur tape. Alors allons de l'avant et, et écrire ceci comme un exemple. Allons sur facebook.com. Et quand je floue d'ici, il ajoute automatiquement la slash deux-points HTTP slash facebook.com. Et la bonne chose à ce sujet est que vous pouvez faire la validation de l'utilisateur pour eux maintenant. Donc, vous savez, quand vous vous inscrivez sur un site Web et c'est comme ce qui est votre site Web sont quelle est votre adresse e-mail ? Et c'est comme si vous mettez mon site web et c'est comme, oh, en fait, vous avez besoin de ce HTTP avant de pouvoir soumettre ce formulaire avant de pouvoir réellement vous inscrire. C' est oui, je comprends. Mais aussi le développeur peut le faire pour nous. Et vous, en tant que développeur, pouvez maintenant le faire pour l'utilisateur, ce qui rend l'expérience utilisateur nettement meilleure. Et que tout se passe avec la fonction flou ou l'écouteur d'événement flou. Maintenant, nous parlons de soumettre un formulaire. Juste maintenant. Allons de l'avant dans la leçon suivante et voyons comment nous pouvons empêcher la soumission d'un formulaire. 18. Formulaire soumet des événements: Il va y avoir un moment dans ta vie où tu as un formulaire et qu'il est censé faire quelque chose, mais tu as vraiment un bouton. Le type est égal à soumettre. Soumettez ce formulaire et vous avez ce bouton. Et quand quelqu'un soumet le formulaire, vous voulez faire quelque chose, peut-être que vous voulez désactiver le bouton. Vous pouvez désactiver totalement ce bouton si vous le souhaitez. Ainsi, les gens ne peuvent pas cliquer sur Soumettre plus d'une fois. C' est une chose très courante. Ou vous pouvez complètement empêcher le formulaire de soumettre entièrement. Faisons une entrée ici, et faisons la valeur est égale à, C'est que je fais une valeur. Faisons un espace réservé, Votre nom. Et quand nous voyons le formulaire, tout cela ressemble à. Donc, il va vous demander votre nom et ensuite vous soumettez ce formulaire. Maintenant, pour cet exemple, nous allons devoir donner un nom à cela. Le nom est égal au nom et cela va apparaître dans votre URL. Donc quand j'appuie sur Submit et qu'on verra que le nom est égal à, mettons mon nom en tant que Bob. Et ça dit index.html. interrogation, le nom est égal à Bob. C' est tout ce que tu mets là-dedans. Il va être rempli automatiquement dans l'URL. Et il dit être rempli automatiquement dans l'URL. Et donc peut-être qu'on ne veut pas que ça arrive. Peut-être qu'on veut qu'il arrive autre chose. Et ce que je vais faire, c'est zoomer ici. Donc, ce que nous pouvons faire, c'est que nous pouvons sélectionner ce formulaire. Et puis on peut dire « On Submit », et c'est là que ça devient intéressant. La fonction peut prendre n'importe quel paramètre d'événement et nous avons en fait ignoré tout ce temps, mais chaque écouteur d'événement a un paramètre d'événement. Et nous pouvons dire que le point d'événement empêche par défaut. Et ce que cela va faire est de dire, hé, oui, un navigateur sait qu'un formulaire est censé envoyer chaque fois que vous cliquez sur le bouton Envoyer. Mais lorsque ce formulaire est soumis, il va d'abord exécuter cette fonction. Et nous allons dire Prenez cet événement, l'événement submit, et empêché de faire son truc par défaut, empêché d'être lui-même. Et donc maintenant, nous pouvons dire que le formulaire console.log n'a pas été soumis. Et je vais nettoyer cette URL parce que nous savons que chaque fois que nous soumettons ce formulaire, qu'il ajoute automatiquement des choses à l'URL et peut-être que nous ne voulons pas cela. Alors allons de l'avant et tapez Kyle comme nom. Soumettez ce formulaire. Vous remarquez comment l'URL n'a pas changé. La page, n'a pas clignotant cette page et rechargé et il indique que le formulaire n'a pas été soumis. Maintenant, honnêtement, à ce stade, cela vous est complètement inutile parce que pourquoi voudriez-vous empêcher un formulaire d'être soumis ? Vous ne voudriez peut-être pas désactiver le bouton, dont on parlera en bas de la route. Peut-être que vous voudrez ajouter une classe différente au bouton afin qu'il semble différent. Donc, il semble que le formulaire est soumis ? Peut-être, oui. On en parlera aussi sur la route. Mais le cas d'utilisation le plus courant est lorsque vous avez un formulaire et que vous voulez l'empêcher. Ce que vous voulez faire, c'est que vous voulez saisir ce formulaire et que vous voulez sérialiser les données. Et puis peut-être que vous voulez faire une sorte de requête ajax. Donc, le formulaire ne devrait pas réellement soumettre à index.html ou partout où vous lui dites de pointer. Javascript peut écraser cela et lui dire de faire une requête Ajax à un autre endroit. Maintenant, nous ne savons pas encore à propos de jQuery ajax, donc nous ne pouvons pas en parler tout de suite. Nous allons en parler vers la fin du cours. Mais pour l'instant, rangez ça dans votre poche arrière parce que vous allez en avoir besoin. Et chaque fois que vous soumettez un formulaire et que vous voulez empêcher une action par défaut, vous devrez ensuite récupérer les valeurs de l' entrée ou des zones de texte ou des champs de sélection. Tu vas vouloir saisir cette information et en faire quelque chose. Et c'est ce que le point d'événement empêche par défaut fait. Maintenant, alors que nous sommes sur le sujet de l'événement dot prevent default, ce que nous pouvons faire est d'aller de l'avant et de sélectionner ce bouton. Nous savons que lorsque, chaque fois que nous appuyons sur ce bouton, chaque fois que nous cliquons sur ce bouton, cela va soumettre ce formulaire. Ça a marché pour nous avant. Sûrement va fonctionner à nouveau une fois que nous désactivons ce JavaScript ici, nous pouvons faire la même chose avec Soumettre. Alors allons de l'avant et sélectionnons ce bouton. Bouton. Mais enseigné. Mais quand on clique sur ce bouton, on va enregistrer une fonction. Et parce que chaque fonction a secrètement un paramètre d'événement, nous pouvons faire événement dot prevent, par défaut. Et tout comme une tête haute, vous verrez souvent l'événement comme e. Donc, chaque fois que vous voyez la fonction e, les chances sont en JavaScript, nous parlons d'événement. Et nous pourrions console.log. Le bouton est rendu inutile. Et nous allons rafraîchir la page et soumettre ce bouton et il dit juste que le bouton est rendu utilise le formulaire ne soumet pas. Je peux le faire. Et quand je soumets le formulaire, s'il le soumet réellement, devrait être rafraîchi ou il devrait être nettoyé. Il ne devrait y avoir rien ici. Mais cela empêche le formulaire de se soumettre. Et pourquoi fait-il ça ? Et c'est parce que nous avons dit, prenez ce bouton, chaque fois que vous cliquez dessus, prenez cet événement, cet événement de clic, et l'empêcher de faire sa chose normale, empêché d'être une fonction normale dans le bouton. Donc, dans cette leçon, ce que je voudrais que vous fassiez est d'écrire un formulaire HTML lorsque vous le soumettez, empêché de faire quoi que ce soit. Et puis commente ça comme je l'ai fait. Et quand vous avez un bouton de soumission et rappelez-vous que le type de bouton ne peut pas être bouton. Il ne peut pas être réinitialisé, il doit être Soumettre. Donc, lorsque vous soumettez ce formulaire en cliquant sur le bouton, empêché de faire sa chose normale aussi bien. Il y a deux façons d'empêcher l'envoi du formulaire. Et rappelez-vous également, lorsque vous soumettez votre formulaire ici, lorsque vous l'empêchez d'être soumis. Typiquement, ce que nous faisons, c'est que nous saisissons cette information comme un champ de texte d'entrée n'importe où ailleurs. Et nous travaillons d'abord avec ces informations et ensuite peut-être que nous les soumettons en utilisant JavaScript ou peut-être que nous ne le faisons pas. Peut-être que nous envoyons ces informations à et ajax ou un point de terminaison API. Peu importe. Si c'est bon de savoir que c'est bon de rentrer dans votre poche arrière. Et l'événement point de prévention par défaut est très, très populaire. Vous allez voir cela partout et c'est en fait honnêtement, c'est juste JavaScript. Ce n'est même pas jQuery. Alors allez-y et donnez ça un coup quand vous avez fini, parlons de cacher des éléments. 19. Teneur d'éléments: Ok, parlons de cacher des éléments. Tout d'abord, je vais devoir vous montrer ce que j'ai sur ma page. J' ai cette boîte sur ma page, et c'est juste une boîte noire 100 par 100. Et c'est le CSS pour la largeur 100, hauteur un, la hauteur 100, couleur de fond est noire. C' est ça. Et puis j'ai un bouton qui dit cliquer sur moi. Et puis je suis en fait juste d'appliquer la boîte en utilisant CSS ici. Et chaque fois que nous cliquons sur ce bouton, faisons en sorte que cette boîte se cache. Et nous avons donc besoin d'un écouteur d'événement pour cela. Allons de l'avant et sélectionnez ce bouton par son ID. Cliquez sur moi. Point sur. Cliquez sur. Fonction. Nous pouvons passer un E ou un événement et faire e point éviter par défaut si nous le voulions, si cela était sous une forme qui serait utile. Actuellement, cela n'est pas utile car il ne se trouve pas à l'intérieur d'un formulaire. Mais si c'était le cas, vous savez, c'est une bonne mesure à prendre. Et puis nous pouvons sélectionner cette boîte. Vous pouvez sélectionner cette case. Et vous pouvez le voir parce que c'est jQuery VS Code ajoute toutes sortes de choses et nous ne allons pas passer par tout cela. Il y a beaucoup ici, mais ce que nous voulons faire, c'est sélectionner cette case et nous voulons cacher cette boîte. Et c'est tout ce qu'on va faire. Donc quand je rafraîchis cette page, boum, la cache, je vais me rafraîchir à nouveau. Et voyons ce qui se passe dans nos éléments ici. Cette boîte juste ici, c'est important de prêter attention au bas ici. Il fait simplement qu'il n'affiche aucun. C' est tout ce qu'il fait. Donc, si vous voulez cacher certaines choses, vous pouvez le faire avec la hauteur du point de sélection. Maintenant, nous enveloppons simplement cela dans un écouteur d'événement, dans un écouteur d'événement de clic. Donc, nous avons dit, chaque fois que vous cliquez sur ce bouton, puis sélectionnez la case et masquez-la. On n'est pas obligés de faire ça. Nous pouvons le faire correctement lorsque la page se charge également. Donc, lorsque nous chargeons la page, vous pouvez voir qu'elle clignote parce que dans notre code source, elle apparaît et nous savons qu'elle va apparaître dans notre code source. Il va clignoter et ensuite jQuery va entrer et ça va dire, oh, en fait, nous allons nous en débarrasser. Cachons ça. Nous ne le supprimerons pas du DOM. Nous nous assurons que nous pourrons encore y accéder plus tard. Donc, il n'est pas supprimé, il n'est pas supprimé, c'est simplement être caché. Ce que j'aimerais que vous fassiez, c'est que vous donniez un coup de feu, mais je veux que vous écriviez un auditeur d'événement avec. Utilisons-nous à écrire des écouteurs d'événements parce que c'est ce que jQuery est tout. Tout est au sujet des écouteurs d'événements. Donc, à droite, un écouteur d'événement sur un bouton, chaque fois que vous cliquez sur ce bouton, masquez la boîte. Quand vous aurez terminé cela, dans la leçon suivante, nous allons aller rendre cette boîte visible à nouveau. 20. Affichage des éléments: D' accord, donc ça ne fait que décoller de la dernière leçon. C' est l'exemple exact de la dernière leçon. Nous avons donc un bouton et une boîte, et quand nous sauvegardons et actualisons la page, c'est ce que nous avons ici. Maintenant, je vais m'assurer que cette boîte est effectivement cachée par défaut, je vais utiliser display non-block, mais n'afficher aucun. Cette boîte ne s'affiche pas. C' est juste, c'est là, c'est dans le DOM, mais c'est juste invisible. Donc, ce que nous pouvons faire est quand nous cliquons sur ce bouton au lieu de cacher, nous pouvons faire des points montrer. Et c'est vraiment important aussi. Gardions un oeil sur ça ici, rafraîchissons cette page. Et ici, nous allons voir le bloc d'affichage. Et donc il a automatiquement supposé qu'il s'agissait d'un élément de bloc et est allé pour le bloc d'affichage. Et donc il a juste montré l'élément. Et en fait, je ne devrais pas dire hauteur ici, donc c'est un élément show. Montrez cet élément. On y va. C' est tout ce qu'il y a. Joli et doux. C'est un peu comme cache-spectacle. Donc nous avons se cacher pour cacher quelque chose et ensuite montrer quelque chose. Maintenant, comme l'exemple complet, nous pourrions sélectionner id. Cliquez sur Me, qui va sélectionner ce bouton. Écrivons le, l'ancienne façon dont nous pourrions fonctionner. Et c'est juste une syntaxe différente et nous utilisons généralement le point sur la syntaxe, mais nous pouvons faire un événement click ici. Ensuite, nous pourrions sélectionner cette boîte et ne pas la cacher, mais nous pourrions la montrer. Et ça marche pour nous à chaque fois. Allez-y et donnez ça un coup quand vous aurez fini, nous allons entrer dans quelque chose d'un peu plus amusant. Nous allons commencer à ajouter des classes CSS à nos éléments. Donc, lorsque vous cliquez sur un bouton, nous pouvons ajouter une classe à l'élément pour le rendre un peu différent. 21. Ajouter des cours CSS: Jetons un coup d'oeil à la façon dont nous pouvons ajouter dynamiquement une classe à un élément existant. Donc j'ai du CSS ici, et nous allons nous débarrasser de cela. J' ai juste une boîte avec un 100 hauteur 100 couleur de fond noir. Allons de l'avant et modifions cette classe ou ajoutons une classe plutôt que de changer cette couleur d'arrière-plan pour être, disons bleu. Donc on pourrait dire qu'il y a une classe appelée bleu, et qu'il va simplement avoir une couleur de fond de bleu. Maintenant, j'ai besoin de ces éléments de boîte pour exister réellement. Et dans mon jQuery ici, je peux simplement dire boîte à points, point ajouter la classe bleue. Et avant que je le fasse, en fait, allons-y et nous allons juste travailler avec les cours un peu. Travaillons avec au lieu d'ID qui a fonctionné avec les classes. Donc nous avons une boîte de classe, boîte, une boîte, une boîte, et changeons ça en boîte à points. Alors maintenant, quand je rafraîchis ma page, ma boîte noire devient bleue et maintenant c'est, vous pouvez voir, qu'elle clignote rapidement. Mais ça change ma boîte pour être bleue. Et nous pouvons réellement voir cela comme un vrai exemple ici est que nous pouvons supprimer ce DOM intérieur. Et c'est à ça que ça ressemble par défaut. Et tout ce que nous faisons c'est d'y ajouter du bleu. Maintenant, allons de l'avant et enveloppons ça dans une sorte de délai d'attente. Donc, nous allons définir le délai d'attente. Et on pourrait lui donner une fonction. Et faisons le délai d'expiration pendant deux secondes. Puis sélectionnez la case et ajoutez la classe bleue. Donc, quand je rafraîchis la page ici, ça va attendre deux secondes, et ensuite ça va devenir bleu. Maintenant, si nous voulons écrire JavaScript moderne, nous n'avons pas besoin d'utiliser une fonction là. Nous pouvons simplement utiliser une fonction de flèche qui va faire exactement la même chose, rafraîchir, attendre deux secondes, il devient bleu. Nous pouvons également envelopper cela dans n'importe quel écouteur d'événement que nous voulons. Donc on pourrait dire quelque chose comme le bouton quand il est cliqué. Fonction. Ou parce que nous n'avons pas besoin du mot-clé ce, nous pouvons faire une fonction de flèche. Et débarrassons-nous de ça et remontons ça. Et parce que nous avons un écouteur d'événement bouton, nous avions besoin de bouton sur la page. Alors allons de l'avant et ajoutons ce bouton. Bouton. Cliquez sur moi. Et quand nous cliquons sur ce bouton, va sélectionner cette boîte et ajouter une classe de bleu. Allons de l'avant et rafraîchissons. Cliquez sur. Et quelque chose n'est pas juste ici. Et c'est parce que je tape cliqué, c'est censé être clic. Alors rafraîchissez. Cliquez sur. On y va. Actualiser, cliquer, il change, actualiser, cliquer, il change. Nous pouvons faire toutes sortes de choses ici et nous pourrions changer la largeur aussi. Donc c'est une largeur 100, et cela va simplement changer la largeur pour être 100%. Et pour que nous puissions ajouter le bleu de classe. Nous pouvons également ajouter la largeur de classe 100 et rafraîchir. Et il change sa largeur pour être de 100%. Je veux que tu lui donnes une chance. Essaie ça. Cela va être très, très important. Vous allez utiliser cela beaucoup en JavaScript vanillé ainsi que jQuery régulier. Donc, vous allez vouloir être en mesure d'ajouter une classe. Vous pouvez ajouter plusieurs classes en ajoutant simplement un espace là-dedans. Et jQuery le comprendra et ajoutera ces classes pour vous. Enveloppez cela dans un écouteur d'événement si vous n'avez pas besoin du, ce mot-clé, je dis ceci comme ceci. Si vous n'avez pas besoin de cela à l'intérieur de votre fonction, vous pouvez simplement écrire une fonction de flèche également. C' est juste un peu plus de performances, un peu plus de JavaScript moderne. Et puis vous pouvez sélectionner votre boîte ou votre élément. Et puis vous pouvez ajouter une classe de toutes vos classes. Donc, vous allez avoir besoin de connaître un peu de CSS pour cela. Si vous ne connaissez pas vraiment CSS, c'est bon. Vous pouvez juste mettre la vidéo en pause ici et copier ce que j'ai sur mon écran. J' ai simplement une boîte, un cours de boîte. J' ai une classe bleue, n'importe quelle largeur 100 classe. Et tout ce qui fait, c'est d'ajouter ces classes. Et encore une fois, lorsque nous inspectons, nous avons maintenant la boîte de classe bleue et la largeur 100. Allez-y et donnez-lui un coup de feu. Et quand nous serons prêts, quand nous serons gentils et prêts. Allons de l'avant et prenons cet exemple exact et faisons exactement le contraire où nous supprimons une classe. 22. Supprimer des cours CSS: Ok, dans cet exemple, allons de l'avant et supprimons la classe bleue et la classe width. Et donc ce que j'ai ici est un élément avec trois classes dessus, boîte bleue et largeur 100%. C' est juste en train de décoller de cette dernière leçon où nous avons ajouté une classe. Et c'est ma boîte de fin bleue avec CSS que nous avons fait ici. Donc maintenant, ce que je veux faire est d'enregistrer deux événements de clic différents. Lorsque vous cliquez sur Supprimer le bleu, supprimez le bleu d'ici. Et lorsque vous supprimez la largeur, supprimez la classe largeur 100. Et pour qu'on puisse avoir un peu de fantaisie avec ça. Donc, au lieu de sélectionner la boîte plusieurs fois, nous pouvons la sélectionner une fois. Donc, nous pouvons dire que la boîte const est égale à, et nous allons juste obtenir la boîte elle-même en tant que classe. Et ce n'est qu'un simple sélecteur. Nous pouvons également faire const, supprimer bleu est égal à supprimer bleu qui va sélectionner ce bouton. Et supprimer la largeur va supprimer la largeur. Et donc ce ne sont que des sélecteurs. J' ai donc sélectionné la boîte supprimée bleue et supprimer la largeur. Maintenant, ce que je voulais faire est lorsque vous cliquez sur Supprimer le bleu, sélectionnez cette case et supprimez cette classe. Et nous pouvons le faire assez facilement. Nous pouvons dire Supprimer le point bleu onclick, fonction, vox point remove classe. C' est tout ce qu'il est, juste le mot supprimer classe. Et puis nous voulons enlever le bleu. C' est aller de l'avant et donner un coup de feu à ça. Et quand on enlève le bleu. Et comme en fait, comme un meilleur exemple ici, ici, nous avons une boîte bleue largeur 100. On pourrait enlever le bleu et il s'en débarrasse pour nous. Ensuite, nous pouvons cliquer sur un autre bouton et supprimer la largeur. Et donc ce que je fais avec ces concepts ici c'est au lieu de sélectionner la boîte plusieurs fois. Donc, au lieu d'avoir à sélectionner cela et à le mettre là, je peux le sélectionner juste une fois parce que je n'ai vraiment besoin de le sélectionner qu'une seule fois. Et puis dans un second écouteur d'événement, nous pouvons faire exactement la même chose. Donc, nous pouvons dire Supprimer la largeur, point sur clic. Et parce que nous n'avons pas besoin du mot clé ce quoi que ce soit, nous pouvons faire une fonction de flèche et nous pouvons dire Box dot remove class width. Et ce ne sera pas le cas, ce sera la largeur 100. Nous voulons supprimer cette classe. Allons de l'avant et rafraîchissons. Lorsque nous enlevons la largeur, ce sera une boîte parfaite. Lorsque nous enlevons le bleu, il est maintenant noir. Et donc c'est vraiment tout ce qu'il y a. La seule chose que nous avons vraiment besoin de retirer de cette leçon particulière est le fermoir retiré. Alors allez-y et donnez-lui un coup de feu. Supprimez la classe, supprimez une classe et essayez simplement de le faire fonctionner pour vous. Ne devrait vous prendre qu'environ une minute ou deux et quand vous êtes prêt, passons à la leçon suivante où nous activons et désactivons les classes, parce que pour le moment, nous ne pouvons pas vraiment détecter facilement si une classe a une classe bleue ou une largeur 100. Nous ne pouvons pas vraiment détecter si un élément a ces classes plutôt. Donc, ce que nous pouvons faire, c'est que nous pouvons les activer et les désactiver avec une fonctionnalité jQuery très simple. 23. Toggling des cours CSS: Dans la dernière leçon, nous avons créé une sorte de boîte et nous lui avons donné une largeur de 100%. Dans celui-ci, nous avons juste un carré parfait. Et ce que nous voulons faire, c'est basculer en bleu. Donc, nous voulons, chaque fois que nous cliquons sur ce bouton, se débarrasser du bleu, puis cliquer à nouveau et le retourner en bleu et cliquer dessus et simplement l'activer et désactiver. Et donc nous pouvons le faire en créant tout d' abord un événement click. Donc, nous voulons sélectionner la classe bleue bascule. Et c'est juste ici. On veut tout parler. Nous voulons sélectionner ce bouton, point sur la fonction de clic. Et parce que nous n'avons pas besoin du mot-clé ce, nous pouvons faire fonction flèche. Ensuite, nous pouvons simplement dire la boîte que nous avons sélectionnée ici, bascule la classe bleue, et c'est tout. Et donc si jQuery reconnaît qu'il y a déjà une classe bleue, il va l'enlever. Et s'il reconnaît qu'il n'y a pas de classe bleue, il va l'ajouter. Et alors allons de l'avant et donnons un coup de feu, rafraîchissons notre page, et regardons ça ici où ça dit des dollars bleus. Chaque fois que je clique sur ce bouton, allumé et éteint, allumé et éteint, juste comme ça. Et c'est tout ce qu'il y a vraiment. C' est ainsi que nous activerons et désactivons la classe. Maintenant, où est-ce que cela s'applique ? Eh bien, si vous avez besoin de cacher et de montrer quelque chose ou si vous voulez faire quelque chose, agissez à cause d'une autre chose. Et en fait, comme un meilleur exemple, allons-y et débarrassons-nous de cela et créons une entrée. Pour une entrée. Et chaque fois que nous avons cette contribution, faisons comme ça. Quand nous l'avons fait, quand nous avons cette entrée et que nous avons la clé, allons de l'avant et vérifions cette valeur. Et puis si cette valeur est un nom particulier, changeons le bascule, la classe en bleu. Sinon, le changer en bleu. Alors allons de l'avant et obtenons cette valeur. Donc const val u est égal à ce point val. Maintenant, vous réalisez que j'utilise le, ce mot-clé ici. Donc maintenant, nous avons besoin d'écrire la fonction. Nous pouvons dire si la valeur est égale à Caleb, Nous pourrions dire Add classe. Sinon, point de boîte, retirez le bleu de classe. Maintenant, nous n'utilisons pas vraiment toggle ici dans le sens où nous n'utilisons pas la fonction toggle, mais nous basculons les classes en supprimant un ajout. Et une chose que nous devons faire est que les fonctions n'ont pas de fonctions fléchées, c'est juste le mot-clé function. Allons de l'avant et rafraîchissons notre page ici. Et si je tape, Jacob ne marche pas, si je tape ravly ne marche pas si je tape, Caleb, boom, devient bleu. Et maintenant, je peux le basculer comme ça et en tapant vraiment n'importe quoi d'autre. C' est donc deux façons de basculer en fonction des écouteurs d'événements différents. Maintenant, ce que j'aimerais que vous fassiez, c'est aller de l'avant et essayer de changer de cours. Vous n'avez pas à faire tout cet exemple ici. Cet exemple est, oui, assez grand et pas super pertinent pour cette classe. Mais assurez-vous d'aller de l'avant et d'utiliser la fonction de classe à bascule ici avec un sélecteur. Donc, vous pourriez faire boîte point Togo classe bleu. Allez-y et donnez cela un coup quand vous avez terminé, continuons et ajoutons du CSS personnalisé, pas une classe, mais ajoutons du CSS personnalisé à un élément. 24. Ajouter des CSS personnalisés: Allons de l'avant et ajoutons CSS personnalisé à un élément particulier. Donc, dans cette leçon, ce que nous allons faire, c'est que nous allons saisir cette boîte et nous allons y ajouter du CSS. Et nous n'allons pas ajouter une classe, nous n'allons pas supprimer une classe. Nous allons ajouter des CSS dynamiques. Donc, nous pouvons en fait correctement. Le style est égal à la largeur 100%, par exemple, nous pouvons faire cela avec JavaScript et jQuery. Tout d'abord, nous devons prendre notre élément de boîte. Alors faisons la boîte à points. Et tout ce que nous avons à faire est de taper point CSS. Et c'est vraiment cool parce que nous pourrions faire la couleur de fond, bleu, et cette syntaxe est un peu intéressante. Donc, ce que nous faisons ici, c'est que nous disons point CSS, la première valeur dans cette fonction va être, que voulons-nous changer ? Quelle propriété CSS voulons-nous changer ? Et puis nous voulons changer la valeur réelle. Donc on peut changer ça en bleu, mais allons-y et changeons ça en orange. Et vous pouvez voir qu'il charge en fait noir, puis change en orange. Et vous pouvez voir ici, la couleur de fond de style est égale à orange. Maintenant, si nous vérifions notre code source, faire, faire, faire, faire, faire, faire. Où sommes-nous ? n'y a pas d'attribut de style sur leur jQuery ajouté dynamiquement pour nous. Maintenant, si nous le voulions, nous pourrions faire des multiples. Nous pourrions faire point CSS, bordure, virgule, dix pixels, noir solide. Et cela a changé dynamiquement pour nous. On pourrait en faire un autre. Nous pourrions faire point CSS, rayon de bordure, virgule 50%. Et maintenant, il le transforme en un cercle orange avec une bordure noire, au lieu d'être juste un carré noir régulier. Et ce genre de nous amène un peu à Animations, dont nous parlerons plus en bas de la route. Maintenant, il y a une meilleure façon de le faire. Nous pourrions commenter cela et nous pourrions faire point CSS. Et on peut lui donner un objet. Maintenant, quand nous donnons à ceci un objet, nous ne tapons pas la couleur d'arrière-plan car les objets ne sont pas censés avoir des tirets dans leur nom. Nous faisons fond, et puis nous CamelCase Il couleur. Alors regardez la différence entre celui-ci et celui-ci. La couleur de fond est pointillée par rapport à la couleur de fond avec un C. majuscule et passons en jaune. Changeons la frontière. 210 pixels, bleu uni. Et changeons le rayon de la frontière. Remarquez la majuscule là et il n'y a pas de rayon de bordure de tirets à dix pixels. Et donc c'est juste un objet JavaScript régulier. Allons de l'avant et sauvegardons cela et rafraîchissons et regardons cela. On peut tous les changer en un seul coup ou on peut les enchaîner si on le voulait. Maintenant, ce que j'aimerais que vous fassiez, c'est essayer les deux méthodes. J' ai essayé de les enchaîner ensemble. Donc, vous avez le premier et ensuite vous avez un second, puis vous avez un troisième, puis commentez les. Et fondamentalement, ne les enchaînez pas ensemble, il suffit de les changer tous en même temps parce que jQuery doit aller ici, changer à, Lire le style aller ici, changer. J' avais lu le style aller ici, lu ce style de genre plutôt que d' entrer dans cette méthode où nous donnons tout ça. On peut juste dire, hé, jQuery, gérer tout cela en même temps. Au lieu de faire trois tâches différentes, faites une grosse tâche. Ensuite, nous allons apprendre comment fondre les choses et évanouir les choses. 25. S'est-: Jetons un coup d'oeil à la façon dont nous pouvons fondre un élément dans et disparaître l'élément. Donc, dans cette leçon, je vais utiliser ma console. Et c'est une petite chose cool parce que dans mon code ici, j'utilise un CDN. J' ai accès à ce petit signe de dollar, cela signifie jQuery, ce petit signe de dollar. Et donc je peux sélectionner cette case, je peux dire const. Oui, faisons const. Box est égal à et donnez-lui un sélecteur. Et quand je tape une boîte de signe dollar, ça me donne l'élément entier à cette boîte. C' est en fait une liste de nœuds techniquement, mais il n'y en a qu'un là-dedans, donc nous pouvons travailler avec un seul. C' est tout à fait bien. Maintenant, pour fondre quelque chose dans une sortie, tout ce que nous avons à faire est Doe Dot Box s'estomper. En fait, il est déjà fané. Les entrées s'estompent et s'estompent. Nous pourrions également faire boîte à points, point fondu dans et il s'estompe. Nous pouvons également lui donner un délai d'attente ou non un délai d'attente mais une minuterie. Combien de temps cela devrait-il prendre pour s'estomper ? Disons que cela va prendre 4,5 secondes. Donc nous faisons 4500 millisecondes, donc ça fait 4,5 secondes s'estomper et ça va ralentir. Le Phaedo. On peut faire la même chose avec fondu. Fondu en avant, s'estompe lentement. Et il y a en fait une autre chose cool que nous pouvons faire est que nous pouvons donner à cela une fonction de rappel, parlerons des fonctions de rappel un peu plus tard, mais nous pouvons lui dire de faire quelque chose quand il est fait de s'estomper, c'est fini de s'évanouir. Donc, ce que je veux que vous fassiez, c'est n'écrivez pas nécessairement votre code dans votre éditeur cette fois. Allez-y et ouvrez simplement votre console. Vous pouvez toujours cliquer avec le bouton droit, inspecter. Cliquez sur l'onglet Console. Sélectionnez votre boîte comme nous l'avons fait. On a des boîtes identiques à cette boîte. Et puis on a fait la boîte de ce fade-out, box dot fade-in. Donnez cela une fois que cela fonctionne pour vous, passons à la leçon suivante, où nous apprenons à basculer un fondu et à basculer un affichage. 26. Vous allez trouver des fades et des affichages: Allons de l'avant et basculez un fondu, un effet de fondu et un effet d'affichage. Donc nous devons faire deux choses différentes ici. Avant tout, nous avons besoin d'une sorte d'écouteur d'événement. Cliquez sur Moi, et ce n'est qu'un simple bouton. Alors allons de l'avant et inscrivons ce bouton comme un événement de clic. Bouton. Fonction Point sur clic. Et c'est ainsi que nous enregistrons l'écouteur d'événement click. Ensuite, nous devons sélectionner cette boîte. Et on peut faire basculer. Et on peut faire fondu bascule. Et cela va soit s'estomper, soit s'estomper selon la façon dont il est visible. Allons-y et donnons une chance à ça. Lorsque nous cliquons sur ceci, s' estompe, s'estompe comme ça. Et nous pouvons voir ici il y a un attribut de style et le regarder. Quand je clique sur ce bouton, il va s'estomper. Et il change l'opacité à 0, puis il change l'affichage à zéro. Et quand il s'estompe, il change l'UPC. Il fait défiler cette sauvegarde à un ou un 100% et rend bloc d'affichage ou en fait simplement se débarrasser de la propriété d'affichage complètement. On peut voir qu'il n'affiche aucun. Et ce sera ce que je lui ai dit d'être avant. Donc, si c'est inline-block, ce sera inline-block. Si c'est affiché bloc ou flexbox, ce sera flexbox, ce sera tout ce que nous définissons pour être en CSS. Pour qu'on puisse fonder le bascule. L' autre chose que nous pouvons faire est simplement de basculer. Cela va basculer pour afficher ou ne pas afficher. Donc simplement, juste comme ça, c'est tout ce qu'on fait. On clique dessus. Et chaque fois que nous cliquons dessus, il le rend visible ou invisible. C' est tout ce qu'il fait. Juste comme un résumé, bascule va essentiellement utiliser hide and show. Alors que le bascule fondu va utiliser fondu dans et fondu out. Allez-y et donnez-lui un coup de feu. Essayez le bascule fondu et essayez le bascule régulier. Ceux-ci seront utiles lorsque vous créez des sites Web interactifs pour les personnes. Quand quelqu'un clique sur quelque chose, est-ce qu'il devient visible ? S'ils cliquent dessus ? devient-il pas visible comme un système de menu, comme un système de menu déroulant ? Lorsque vous cliquez sur la petite icône qui suggère que vous pouvez avoir un menu et il descend. Peut-être que tu veux basculer. Il y a donc, il y a beaucoup de différentes façons dont nous utiliserions cela. Non, honnêtement fondu dans et fondu out n'est plus utilisé trop souvent. Juste parce que ça a l'air un peu ringard, mais peut-être dans quelques années que tout le web, tout Internet décide de s'évanouir et de s' évanouir est une chose que nous voulions refaire. Dans la leçon suivante, allons de l'avant et parlons de glisser haut et de glisser vers le bas comme une autre forme d'animation. 27. Faites des glissements et descendes: Ok, parlons de glisser vers le haut et de glisser vers le bas. Vraiment facile ici, c'est beaucoup comme fondu et fondu. Donc, j'ai un bouton ici est enregistré comme un événement de clic. Et je veux faire glisser cette boîte vers le haut et la glisser vers le bas. Donc, comme une question FAQ, une section de questions fréquemment posées sur un site Web et FAQ. Ainsi, nous pouvons sélectionner cette case chaque fois que le bouton est cliqué. Et on pourrait dire glisser vers le bas ou dire glisser vers le haut. Donc, tout d'abord, SlideUp, glisser vers le haut va le cacher. Actualiser. Ça, le glisse vers le haut. Plutôt soigné, non ? Nous pourrions également faire glisser vers le bas, ce qui va juste le faire glisser vers le bas et le rendre visible. Ou nous pouvons glisser bascule et cela va basculer pour glisser vers le haut et glisser vers le bas. Alors allons de l'avant et rafraîchissons. En haut, en bas, en haut, en bas. C' est donc une courte leçon. Honnêtement, à ce stade, vous n'avez probablement plus besoin de pratiquer ça. Gardez ça dans votre poche arrière. Slide bascule. Vous pouvez glisser vers le haut et vous pouvez glisser vers le bas. Vous allez utiliser celui-ci plus qu'un fondu et disparaître à coup sûr. Donc, si vous voulez un peu d'expérience, oui, allez certainement créer un exemple comme celui-ci. Vous pouvez même voler mon exemple ici. Sinon, je vais passer à la leçon suivante où nous parlons des fonctions de rappel. 28. Fonctions de Callback: D' accord, parlons des fonctions de rappel. Dans une fonction de rappel. Vraiment tout une fonction de rappel est, est une fonction d'un petit morceau de code qui devrait s'exécuter après que quelque chose est fait en cours d'exécution. Donc, par exemple, nous avons un sélecteur ici et nous avons dit Enregistrer un écouteur d'événement click. Et à chaque fois que c'est censé s' exécuter, exécutez cette fonction, c'est une fonction de rappel. Donc, une fois qu'un clic arrive, faites une chose. Nous pouvons également sélectionner notre boîte de notre leçon précédente. Et on pourrait dire quelque chose comme s'estomper. Et nous pourrions donner ce paramètre, disons que cela va prendre 1,5 seconde. Et puis nous pourrions donner à cela une fonction aussi. Et c'est une fonction de rappel. Et donc nous lui avons donné un paramètre, combien de temps cela devrait prendre une fonction virgule, puis juste une fonction régulière ici. Et puis nous pouvons dire le journal des points de console. Fade-out est terminé. Allons de l'avant et donnons un coup de feu et allons à notre console ici. Ça va s'estomper. Fade out est terminé. Et nous pouvons le faire avec beaucoup de choses différentes que nous pourrions faire disparaître et nous pourrions faire glisser vers le haut. Comme, comme fatal, il est complet. Cela aurait dû dire que diapositive est le bouton complet indépendamment, la fonction de rappel fonctionne toujours. Et donc vraiment tout ce que nous faisons ici, c'est si nous simplifions un peu cela, nous disons de sélectionner la boîte, de glisser vers le haut, de prendre 1,5 seconde lorsque vous avez terminé que l'ODE du journal de la console est terminée ou que SlideUp est terminé. Nous pouvons le faire avec beaucoup d'animation différente. Donc on a une diapositive, on pourrait s'estomper. On pourrait l'utiliser avec des togas aussi. Donc, lorsque vous basculez, fondu va prendre 1,5 seconde pour s'estomper ou s'estomper. Et l'effet de fondu est terminé. Et alors, allons de l'avant et cliquez sur ceci. Oh, quelque chose n'est pas là. Il n'est pas basculé, fondu, c'est fondu bascule. Je reçois ça à chaque fois et de temps en temps. Et donc tout ce qui a été fait s'estompait automatiquement parce qu'il était déjà visible. Maintenant, nous allons envelopper cela dans un écouteur d'événement. Sélectionnez ce bouton, point sur la fonction clic. En raison de, en raison, et vous les voyez aller assez vite ici, il devient beaucoup plus facile au fil du temps. Et vous pouvez voir que cela commence à être un modèle dans jQuery, nous avons un sélecteur, faire une chose, un sélecteur de fonction, faire une chose, faire une chose juste là. Un sélecteur de fonction, faire une chose, une fonction. Et allons-y et débarrassons-nous de ça. 1500 millisecondes ou 1,52, fondu avant, fondu. Et nous allons juste donner un coup de feu pour cliquer dessus. S' estompe. L' effet de fondu est terminé. Vous pouvez le voir en bas. Parfait. Regarde ça. Cela fonctionne exactement comme nous le voulons. Maintenant, une fonction de rappel est vraiment utile si quelque chose est fané, peut-être que vous voulez ensuite le supprimer. Alors faisons ça, on va s'estomper. Et nous pouvons faire ce point supprimer. Et donc une fois que cela est fané, parce que maintenant vous pouvez voir que si nous cliquons dessus, il va disparaître. C' est toujours dans notre DOM. Peut-être qu'on veut qu'il soit complètement retiré pour quelque raison que ce soit. On pourrait cliquer dessus. Et vous remarquez qu'il se retire complètement du modèle d'objet de document. Alors voyez ça ici. Regardez qu'il disparaît, il devient complètement enlevé. Et maintenant, nous ne pouvons pas cliquer dessus si elle est rendue inutile. Donc, si vous avez besoin d'un événement ponctuel, c'est une bonne façon de le faire. Maintenant, vous n'avez pas besoin de pratiquer quoi que ce soit avec des fonctions de rappel. Nous avons écrit des fonctions de rappel tout ce temps. Donc petit peu de surprise qui sont des fonctions de rappel, vous êtes à peu près un assistant de grand maître aux fonctions de rappel à ce stade dans le temps. Dans la leçon suivante, parlons d'ajouter nos propres animations. 29. Animations jQuery jQuery de jQuery: D' accord, parlons d'animations. Dans jQuery. Nous pouvons animer certaines choses et nous ne pouvons pas animer certaines choses. Donc tout ce qui a une valeur numérique que nous pouvons animer. Donc, une largeur de 500 et par exemple, est une valeur de nombre. Et nous pouvons ajouter le détenu à quatre cent trois cents dix cents si nous le voulions. Une couleur n'est pas nécessairement un numéroté est un mélange de chiffres et de lettres. C' est comme si le noir était 000000 ou F, F, F, F, F, F, et c'est blanc. On pourrait faire un blanc cassé F5, F5, F5. Et un ordinateur ne sait tout simplement pas vraiment, vous savez, nativement comment faire défiler cela jusqu'à F, F, F, F, F, F, ou jusqu'à 000000. Mais si vous avez une largeur de 500, eh bien, c'est simplement décrémenter le vous pourriez le changer de 500 à 400 en allant à 499, puis 498487 pour 9645, et cetera, et cetera, et cetera. Il y a un ordre linéaire des opérations ici. Alors allons de l'avant et animons notre boîte. Donc, lorsque nous cliquons sur ce bouton, nous avons un bouton ici qui indique Click Me, enregistré, click event. Sélectionnez cette boîte et animons-la. Donc on pourrait faire quelque chose comme la boîte à points animés. Et cela va prendre un objet. Et donc ici, nous pouvons dire que l'opacité est actuellement c'est une que nous pourrions changer que pour Lake est 0.5. la largeur est actuellement définie à 100 pixels. Et ce n'est pas parce qu'il dit pixels que cela ne signifie pas qu'il ne sait comment travailler avec un nombre et sait comment diviser ceci et dire, ok, la largeur est actuellement un 100, et c'est aussi des pixels. Alors passons ça à cinq cents, cinq cents pixels parce que nous avons besoin de la mesure là-dedans. Allons de l'avant et rafraîchissons. Et il s'anime bien. C' est agréable et lisse et fonctionne parfaitement pour nous. Et si nous le voulions, nous pourrions ralentir cela aussi. On pourrait dire animer cela sur quatre secondes ou 4 mille millisecondes. Et ça prend son temps, juste comme ça. Maintenant, ce qui ne va pas fonctionner, c'est si nous voulions changer cette couleur d'arrière-plan, la couleur d'arrière-plan. Si nous voulions changer ma couleur d'arrière-plan en bleu, il ne sait tout simplement pas comment passer du noir au bleu lien. Quelle est la définition ou quelle est la fonction ou quelle est la logique linéaire derrière le changement d'une couleur à une autre couleur ? faire paraître animé. Comme il va du noir au rouge au bleu ou du noir au violet au bleu ou du noir au blanc au bleu. Comme si un ordinateur ne le savait pas. Mais un ordinateur sait comment travailler avec des nombres durs assez facilement. Donc, nous allons voir que changer la couleur de fond ici en bleu ne va tout simplement pas fonctionner. Ça va s'estomper. Ça va être un gris. Ce n'est absolument pas bleu. Votre tâche pour cette leçon est de sélectionner un élément et de l'animer. On peut s'en débarrasser. Vous pouvez lui donner un objet avec ce que vous voulez changer à la valeur d'Ed. Donc largeur, hauteur, capacité, quelque chose comme ça. Même votre taille de police si vous le souhaitez. Et puis donnez-lui une sorte de durée. Combien de temps cela devrait-il prendre ? Pour moi ? J' ai dit que ça devrait prendre 4 secondes pour toi. Peut-être que vous vouliez prendre 1 seconde ou 20 secondes, ou peut-être que vous voulez que ça change pour être complètement visible. le temps, il vous obtient un 100% et cela devrait prendre cinq secondes, vous donnera quelque chose comme ça, c'est l'un de ces moments où il est bon d' avoir du plaisir juste pour bricoler avec elle. Et tu sais, tu n'as rien à faire en particulier. Vous avez juste besoin de vous assurer qu'il change quelque chose avec une valeur numérique. Et encore une fois, nous utilisons CSS ici. Javascript, CSS et HTML fonctionnent tous très bien ensemble. Ils sont tous conçus pour travailler les uns avec les autres. Et gardez également à l'esprit, vous ne pouvez travailler qu'avec des nombres durs réels. 100% est un nombre, le bleu n'est pas un nombre. Allez-y et amusez-vous avec cela dans les prochaines leçons, parlons des dimensions de la largeur et des dimensions de la hauteur. 30. Dimensions de largeur: Parlons des dimensions de hauteur. Nous avons donc cette chose appelée un modèle d'objet de document. Et quand on fait un clic droit sur cette boîte et qu'on la sélectionne ici, on descend. Nous pouvons voir que nous avons la marge, rembourrage de bordure et la taille réelle de l'élément lui-même. On peut vérifier ce que c'est. Pour que nous puissions sélectionner cette case. Faisons const des boîtes égales à la boîte à points. Et puis on pourrait faire un point de boîte. On a eu des choses différentes. Nous avons une largeur et une largeur extérieures. Donc, si nous regardons la largeur ici, qui est en fait une fonction. Donc, chaque fois que vous voyez ce petit bouclé f ici, cela signifie généralement que c'est une fonction. Cela signifie généralement que vous avez simplement oublié vos parenthèses. Donc, ma largeur de boîte est actuellement de 100. Et allons-y et voyons si je peux sortir ça. On y va. Nous pouvons aussi faire la boîte. La hauteur est également un 100. On peut faire la boîte. La largeur extérieure est un 100. Nous pouvons également faire la largeur intérieure de la boîte est un 100. Et nous allons voir que ces trois choses sont identiques, mais elles sont en fait différentes. Et cela dépend du modèle de la boîte. Et si on retourne ici et ce que je veux faire, c'est ajouter du rembourrage. A 100 pixels. Non, ne faisons pas 100. C' est beaucoup. Faisons 20. Et faisons aussi une marge de 20 pixels. Et on va voir que ça bosse l'élément et fait paraître l'élément un peu plus grand. Donc maintenant, si je remonte, sélectionnez ma boîte, et je pourrais faire la largeur des points de la boîte. C' est maintenant une centaine. C'est l'intérieur. L'intérieur est un 100. Et nous allons voir si nous passons à des éléments qui sont à l'intérieur ici 100. Maintenant, faisons la boîte point, largeur intérieure. C' est 140. Eh bien, d'où on obtient un quart ? Si nous revenons aux éléments, nous pouvons voir qu'il y a un rembourrage ici. C' est la boîte entière elle-même, la largeur intérieure de la boîte. Donc on en a 100 et ensuite on en a 20 de chaque côté. Donc 100101140. C' est de là qu'on a eu un 140. Maintenant, nous pouvons faire la largeur extérieure aussi bien, largeur de l'odeur de point de boîte. Maintenant, nous regardons la largeur extérieure ici. Et puis la largeur extérieure a deux options ici. Donc nous avons une largeur extérieure régulière, une largeur d'odeur, et c'est l'extérieur ici. Ou nous pouvons faire la largeur extérieure, vrai. Et ce que ça va faire, c'est prendre tout ça, y compris la marge. Donc nous avons eu cent vingt et un quarante, soixante, un quatre-vingts, et c'est de là que nous obtenons un 180. Maintenant, ce que j'aimerais que vous fassiez pour cette leçon particulière, c'est de ne pas vous inquiéter de la largeur, largeur intérieure ou de la largeur extérieure. Ce que je veux que tu fasses, c'est la même chose avec la hauteur. Alors prenez votre élément Box, puis faites la hauteur intérieure, ou juste la hauteur ou la hauteur extérieure, et essayez-le avec vrai là-dedans. Donne-lui un coup de feu. Et essayez avec différentes tailles. Faites votre boîte de différentes tailles. Ça n'a pas besoin d'être un carré parfait non plus. Et puis ce que je veux que vous fassiez, c'est que je veux que vous sélectionniez toute votre fenêtre, c'est-à-dire votre fenêtre entière, puis que vous fassiez la largeur et la hauteur. Maintenant, juste comme une tête haute, ma hauteur est très basse juste parce que je suis super zoomé ici. Si je n'étais pas zoomé, ce serait significativement plus élevé que 289. Allez-y et donnez un coup de feu. Ceux-ci sont importants lorsque vous travaillez avec positionnement de choses sur votre page à l'aide de JavaScript. Donc, vous allez avoir besoin de savoir comment cela fonctionne lorsque vous avez fait cela, passons à la leçon suivante où nous parlons d'un nouvel écouteur d'événement où il vérifie si nous redimensionnons notre page du tout. 31. Redimensionner l'événement de fenêtre: Parlons de redimensionnement de la fenêtre. À ce stade, nous avons toujours eu une sorte de sélecteur dans un ensemble de citations comme notre boîte. Mais nous pouvons également définir un sélecteur pour être votre fenêtre ou votre document. Et donc pour cela, nous voulons voir la fenêtre changer. Maintenant, cette fenêtre est toute cette zone blanche. Quelle est la taille exactement ? Et nous avons en quelque sorte regardé cela dans la dernière leçon quand nous avons fait box dot ainder avec Box dot, largeur intérieure et la hauteur de la fenêtre, point de fenêtre avec des choses comme ça. Que se passe-t-il lorsque nous redimensionnons notre page ? Eh bien, nous pouvons prendre différentes mesures en fonction de différentes tailles de fenêtre. Alors allons de l'avant et faire le point de fenêtre sur, redimensionner la fonction, console.log. Et puis nous voulons console.log la largeur de la fenêtre. Et c'est pour ça que je t'ai fait faire ça dans la dernière leçon. Largeur du point de la fenêtre par hauteur du point de la fenêtre. Et alors ouvrons nos outils ici et c'est redox ceci et rafraîchir la page. Et chaque fois que je bouge ça, vous pouvez voir que ces chiffres changent. Et la hauteur ne change pas, mais la largeur change, la largeur devient de plus en plus de plus en plus petite. Et donc non, on peut faire quelque chose en se basant sur ça. Nous pouvons dire que si la largeur de la page est inférieure à, disons que 230 a changé la couleur de fond en noir. Maintenant, ce n'est pas un exemple très laid, mais c'est un bon exemple de pratique. Allons-y et débarrassons-nous de ça. Et nous pouvons dire si la largeur de la fenêtre est inférieure ou égale à 230. Nous savons maintenant que nous pouvons changer la couleur de fond CSS point corps pour être noir ou autre, nous pouvons faire la même chose et changer la couleur de fond en blanc. D' accord, donc ça va rester noir ou blanc plutôt, qui implique descend à deux cent trente. Deux trente. On y va. Et ça va basculer comme ça. Maintenant, nous pouvons faire la même chose en fonction de la hauteur aussi. Et je vais juste remettre ce journal de console ici, où nous allons enregistrer la largeur et la hauteur. Et je vais changer où cela est ancré, changer en bas ici et rafraîchir la page. Rafraîchir. Et maintenant, quand je redimensionnerai, on va voir que la largeur ne change pas, mais la hauteur change. Et nous pourrions prendre une sorte d'action si la page de quelqu'un est, par exemple, sur les 87 pixels de haut, faire autre chose, vous pourriez leur donner un avertissement. Vous pouvez, vous pouvez littéralement supprimer tout de votre modèle d'objet de document et simplement dire, hey, votre navigateur est un moyen de petit pour ce site Web. En fait, votre navigateur, s'il mesure 87 pixels, est beaucoup trop petit pour n'importe quel site Web. Et c'est ainsi que nous redimensionnons la fenêtre. Maintenant, ce n'est pas vraiment super utile à ce stade. Et je n'ai pas utilisé ça depuis un certain nombre d'années. Mais il est bon de savoir parce que parfois je rencontre un vieux code qui fait cela, puis je le convertis en la requête multimédia CSS pour le rendre réactif. Et c'est une sorte d'endroit où CSS commence à prendre le relais pour JavaScript. Mais parfois, vous devez le savoir aussi en JavaScript. Surtout si vous allez créer un jeu en quelque sorte. Si vous voulez créer un jeu, vous allez vouloir savoir quelles sont les dimensions du jeu, la affichage, le portail de jeu ici, toute cette section blanche, vous allez vouloir savoir quelle est cette taille et travailler avec elle. 32. jQuery chaque boules: Bon, bienvenue. Parlons de la boucle à travers les éléments. Et donc, quand nous avons un sélecteur d'une sorte, une sorte d'élément, cela pourrait être un élément ou cela pourrait être plusieurs éléments. Et un bon exemple de cela est si nous avons comme une liste non ordonnée avec un allié ici, premier élément, le deuxième élément, le troisième élément. Et nous sélectionnons tous ces alliés. Et si nous voulions faire quelque chose de différent avec tous ces alliés ? Mais nous voulons toujours les sélectionner tous. Nous voulons sélectionner chacun de ces trois éléments de liste. Eh bien, si on a fait du texte de point LI, ça va le changer sur les trois d'entre eux. Et bien sûr, ça l'a fait. Ce n'est pas ce que nous recherchons. Peut-être que nous voulons faire quelque chose de différent pour chacun d'eux, mais nous voulons utiliser un sélecteur. Donc on pourrait soit faire LI et prendre le premier. On peut faire un sélecteur comme ça. Nous faisons d'abord, nous pourrions faire la dernière, ou nous pouvons parcourir toutes ces choses et faire quelque chose de différent basé sur un sélecteur. Et parfois faire des bouclages est la bonne façon de faire les choses. C' est juste un moyen plus rapide de faire les choses. Donc on peut dire points chacun. Et cela va prendre un index de fonction. Et l'élément. Et cet élément lui-même va être tout cet élément ici. Et cet index va être, est-ce la première itération, la deuxième itération, la troisième itération. Donc, nous pouvons maintenant sauver l'élément lui-même, qui est beaucoup comme dire ceci que nous avons utilisé auparavant. Mais cela fait simplement référence à cet élément particulier dans cette boucle. Le texte de point va être index nouvel élément ici. Et donc quand je rafraîchis la page, vous pouvez voir qu'il est dit 0 nouvel élément ici, un nouvel élément ici à nouvel élément ici. Maintenant, si vous êtes un peu nouveau en JavaScript et que vous êtes comme, eh bien pourquoi est-ce dire 0 ? C' est parce que les ordinateurs commencent techniquement à compter à 0 au lieu du numéro un. Nous pourrions toujours faire un index plus un juste pour compenser cela. Ils sont Rio, nouvel article ici, nouvel article ici, nouvel article ici, 1-2-3. Si on regarde notre source, c'est juste les vieux trucs qu'on avait. Ce n'est pas le nouveau truc. Maintenant, nous pouvons dire quelque chose comme si l'index est égal à deux, sélectionnez cet élément. Changez au CSS pour avoir une couleur de fond noir. Et puis on pourra les enchaîner ensemble. Et nous l'avons déjà fait avant. Je change la couleur pour être blanche, donc je vais juste inverser les couleurs. Et c'est comme celui-là. Souvenez-vous du 012. Maintenant, nous n'avons pas à voir avec des mensonges non plus. Nous pouvons le faire avec des dibs et allons de l'avant et changer ces deux divs va saisir chaque div sur la page va les parcourir. Dit le premier élément, le deuxième élément, le troisième élément, quelque chose s'est mal passé là. Oh, parce que je n'ai pas changé mon sélecteur. On y va. Un nouvel article ici pour un nouvel article ici, trois nouveaux éléments ici. Nous pourrions même devenir plus fantaisistes avec ça et nous pourrions garder son texte original. Donc, nous pouvons dire quelque chose comme le texte original de Kahn est égal à cet élément 2.txt. Et nous allons le jeter ici en tant que variable, texte original. Et maintenant, nous n'avons pas numéroté le premier élément, le deuxième élément, troisième élément avec un numéro dynamique là-dedans. Maintenant, si on le voulait, on pourrait faire quelque chose de ridicule avec ça. On peut le multiplier par 303. On y va. Donc on a 036. On pourrait faire tout ce qu'on veut. Cela fonctionne juste avec l'index, l'élément lui-même. Vous pouvez faire n'importe quoi avec cet élément et c'est juste un sélecteur régulier. Donc, rappelez-vous juste quand vous utilisez point h, Il faut deux éléments ne sont pas des éléments mais des paramètres. Votre premier sera l'index, où dans l' itération de boucle est, est-ce la première itération, la deuxième itération, la troisième itération, et cetera, et cetera. Et le deuxième paramètre est votre élément. Et ton élément. Vous pouvez ensuite utiliser le sélecteur, qui ressemble beaucoup à dire ceci, mais nous ne sommes pas vraiment à l'intérieur de la, la fonction. Nous ne voulons pas que cela fasse partie de la fonction. Nous voulons l'élément lui-même. Donc, nous sélectionnons cet élément et ensuite nous pouvons travailler avec. Et il va le faire pour chaque div qu'il peut mettre la main sur, ou chaque LI ou chaque sélecteur de classe, n'importe quoi. Ce que j'aimerais que vous fassiez ici, c'est aller de l'avant et donner un coup de feu à ça. Je veux que vous sélectionniez un élément qui n'a pas plusieurs éléments sur la page. Faites pointer chaque élément d'index de fonction. Et puis je veux que vous modifiez le texte ou travaillez avec l'index ou sélectionnez cet élément au moins et changez une partie du CSS afin que vous sachiez que cela fonctionne. 33. Changer des attributs: Parlons de la modification des attributs d'élément. Et j'ai un très bon exemple ici. Donc, disons que nous avons un élément d'entrée et que nous voulons changer cela du texte au mot de passe. Et donc l'idée ici est que nous pouvons écrire quelque chose comme ça, mais si nous voulions qu'il ressemble plus à ceci, comme mot de passe, mot de passe, mot de passe et autres choses. Nous pouvons le faire assez facilement. Alors allons de l'avant et sélectionnez cette entrée. Faisons const. L'entrée est égale à, puis juste l'entrée est la seule sur la page. Donc, je n'ai pas à m'inquiéter d'être spécifique avec ça. Et avec le sélecteur. Ensuite, je peux dire le point d'entrée ATTR, qui signifie attribut ATTR. Ne tapez pas de texte. Et donc, nous allons consigner ce journal de points de console ce type. Et cela devrait dire si nous faisons le bon texte. Et évoquons ça. Il est là. Erreur de texte si nous avons fait 123123123. Oui, même chose. Coucou, coucou, cool, cool. Mais si on voulait le changer ? Donc, c'est beaucoup comme Val ou texte ou HTML. Et ce que je dis ici est dot val, dot text, dot HTML. Il fait l'une des deux choses. Soit vous lui donnez un paramètre, soit vous avez défini un paramètre. Et donc nous disons simplement obtenir l'attribut type. C' est notre paramètre. C' est juste obtenir le type qui correspond à ça. Maintenant, si nous voulions changer cela, nous pourrions, nous pourrions dire le type ATTR puis le changer en mot de passe. Et ça va arriver si vite et on dirait que ça va se produire dans les coulisses. Mais quand je tape comme ça, après avoir actualisé la page, cela ressemblera à un champ de mot de passe comme celui-ci. Maintenant, ce qui est plutôt cool, c'est que si vous voulez voir mon mot de passe, je peux simplement sélectionner le type ATTR de point d'entrée, et passons d'un champ de mot de passe à un champ de texte. Et vous pouvez voir mon mot de passe est en texte brut maintenant, mon mot de passe est aussi. C' est ainsi que nous obtenons un attribut et c'est ainsi que nous définissons un attribut. Et juste comme un petit rappel rapide, pour obtenir un attribut prend juste un paramètre juste comme ça. Et si elle a un deuxième paramètre va essayer de définir cet attribut. Dans la leçon suivante, allons de l'avant et commençons à travailler avec des trucs Ajax. Ajax est vraiment, vraiment amusant. Il fonctionne avec les API. Nous entrons dans un bon JavaScript ici, quelques trucs vraiment amusants, plus de choses de niveau de production, genre plus professionnel de JavaScript que vous allez écrire en utilisant jQuery. 34. Demandes Ajax GET: D' accord, regardons Ajax et quelques données avec un petit rappel. Maintenant, nous avons besoin d'un endroit où obtenir des données. Et l'un de mes favoris personnels est le développement de point marécageux est comme une API Star Wars. Et si vous allez à échanger e dot dev slash api slash gens slash un, vous allez voir cette information sur Luke Skywalker. Et donc nous pouvons réellement y aller permutant dot.gov slash API slash gens slash un. Et nous voyons toutes ces informations. Mais Luke Skywalker, maintenant c'est l'URL. Nous voulons qu'il s'agisse d'un point de terminaison API. Nous voulons être en mesure d'obtenir ces informations, ces informations JSON, et d'y accéder assez facilement. Donc, ce que nous pouvons faire ici, c'est si je déplace juste cela et en fait non, dévalons c'est que nous avons accès à jQuery ici avec un signe de dollar. Vous pouvez voir que nous pouvons utiliser dot get, puis cette URL. Maintenant, si nous faisons juste cela, nous allons voir que c'est juste une requête Ajax régulière. Mais si je l'efface et lui donne une fonction de rappel, nous connaissons les rappels, nous connaissons les fonctions. Faisons consigner les données par point de console. Et nous allons voir que c'est la demande Ajax ici et ce sont nos données. Et donc nous faisons une demande get ici. Nous demandons simplement des données. Et donc en utilisant le signe dollar point get, il n'y a pas de sélecteur ici parce que nous ne sélectionnons rien. Et parce qu'il n'y a pas de sélecteur, nous n'avons pas de secteur, c'est juste un signe dollar point get. Et donc maintenant nous avons toutes ces informations chargées sur notre page ou dans notre console au moins qui était disponible ici, nommé Luke Skywalker hauteur 172 masse 77. 172, masse 77, nom Luke Skywalker. C' est la même information. Et c'est ainsi que nous faisons une simple requête ajax dans jQuery. Savoir bois sauvage à ce sujet est ce est si incroyablement simple. On peut faire dot get. Et je viens de coller cette URL là, les données. Et puis nous pouvons consoles dot log nom de données. C' était ce qu'on cherchait, bon nom. Alors allons-y et sauvegardons ça. Et actualisons cette page. Et il va et l'obtient. Luke Skywalker, on pourrait avoir sa taille. On pourrait prendre son poids si on le voulait. Luke Skywalker 172. Attends, n'était pas là. Ça s'appelle la messe. C' est pour ça que sa masse a 77 ans. Et maintenant, nous n'avons pas à nous soucier comme une requête d'API de récupération. Nous n'avons pas à nous soucier de prendre ces données et d' analyser fondamentalement le JSON et de le transformer en un objet JSON ou JavaScript. Nous n'avons pas à nous inquiéter de tout cela parce que jQuery fait tout cela dans les coulisses et il le fait avec une seule ligne de code avec la fonction dot get que vous allez avoir besoin de savoir cela pour votre projet final. Donc, je vous recommande fortement de donner un coup de feu pour l'essayer. 35. Demandes Ajax Ajax: Très bien, dans la dernière leçon, nous avons regardé une requête jQuery GET. Et dans cette leçon, nous allons regarder une requête de post jQuery. Et c'est ainsi que nous envoyons des données à un serveur et lui demandons de mettre à jour des données ou de créer de nouvelles données. Et c'est vraiment, vraiment simple à, c'est juste point post et puis quelques URL ici, quelques données ici, et une fonction de rappel avec les données qui vont être retournées. C' est littéralement tout ce que c'est. Vos données devraient donc être un objet quelconque. Donc on se dit, Bonjour monde. Et cette URL nous avons besoin d'un endroit où poster. Et c'est vraiment, vraiment difficile de trouver un endroit pour poster en toute sécurité, mais j'en ai trouvé un appelé bin HTTP. Donc, nous faisons cela comme une URL, HTTPS deux-points barre oblique HTTP bin.org slash post. Et si nous le voulons, nous pouvons les mettre sur des lignes séparées juste pour rendre ça un peu plus agréable. Et puis nous pouvons dire que console.log post était complet avec ces données. message de données Console.log était complet avec ces données. Et jetons un oeil. C' est toutes les données que nous avons récupérées. Un HTTP bin.org a tendance à nous donner toutes nos données sous forme de propriété ici. Donc ça dit bonjour monde, on peut y mettre n'importe quoi. Nous obtenons dire, Instagram est égal au point de codage pour point tout le monde. Qui si vous voulez des conseils et astuces de codage gratuits viennent certainement vérifier cela. Et formez le codage Instagram pour tout le monde. Et donc nous savons que cela fonctionne réellement. Maintenant, si on veut s'assurer que ça ne marche pas, on pourrait toujours essayer d'obtenir. Nous allons faire dot get et le faire, va créer une requête get à l'URL de la barre oblique. Et vous pouvez voir quatre ou cinq, cela signifie que non autorisé. Tu n'as pas le droit de faire ça. Il doit s'agir d'une demande de poste. Alors allez-y et donnez un coup de feu. Utilisez HTTP bin.org. N' oubliez pas que vous avez besoin du protocole HTTPS. Vous pouvez rencontrer cette erreur si elle provient d'un emplacement non sécurisé vers un emplacement sécurisé, assurez-vous simplement que vous avez ce S et là. C' est ce qu'on appelle votre charge utile. Ce sont les données que vous allez leur envoyer. Et puis vous avez une fonction de rappel quand c'est fait, que faites-vous avec ces données ? Tout ce que nous faisons ici, c'est que nous faisons des données console.log. Maintenant, cela est vraiment, vraiment utile lorsque vous créez une application de page unique ou une application web progressive où vous avez besoin de quelqu'un pour inscrire ou vous connecter et que vous ne voulez pas les amener à une autre page, ou vous avez un point de terminaison API, ou ils doivent se connecter via un autre site Web, quelque chose comme ça. Vous pouvez envoyer ces données ailleurs pour le traitement. Et ces données peuvent revenir généralement sous la forme de JSON. Et puis jQuery peut le gérer très gracieusement. Dans la leçon suivante, allons de l'avant et créons un générateur de personnages Star Wars aléatoire basé sur presque tout ce que nous avons fait dans ce cours. 36. Projet final: Ok, bienvenue à votre projet final. Nous allons créer un personnage aléatoire Star Wars, un générateur utilisant jQuery et JavaScript. Donc ce que je veux que vous fassiez ici, c'est aller à cette URL ici, je vais zoomer pour que vous puissiez voir ceci. Et nous devons aller à cette URL ici. Et nous pouvons voir toutes sortes de choses que nous ne voulons pas de routes tout ce que nous voulons une carte d'identité. Alors passons à l'identification. Et nous pouvons aller à, par exemple, slash API slash slash slash ID un point JSON. Et nous avons Luke Skywalker, et nous avons aussi une image et un Wiki et toutes sortes d'autres choses là-dedans. On pourrait aller au personnage. Je pense qu'il n'y en a que 83 ici. Oui. Celui-ci n'a pas autant d'informations, mais au moins il a un nom et une image, qui est vraiment tout ce que nous voulons pour le moment. Allons à 84. Il y en a une, il y a un tas de nouvelles informations ici, je crois. Mais il n'y a pas 100 caractères, il n'y en a pas 100. Et voyons s'il y en a 90. Voyons s'il y a quatre-vingts sept, quatre-vingts huit, quatre-vingts neuf. C' est important que nous fassions cela. Ok, il y a 88 caractères, donc nous devons obtenir au hasard un nombre entre 088 et aller à cette URL et remplacer 88 par un nombre aléatoire. Et puis sur notre page, je veux que vous puissiez montrer le nom de la personne et son image. Et donc nous allons devoir travailler avec du texte intérieur. Nous allons devoir travailler avec la modification d'un attribut. Nous allons avoir besoin de travailler avec une demande get et quelques nombres aléatoires. Maintenant, je veux que vous, si vous le pouvez, si vous en savez assez, JavaScript a essayé de faire tout cela par vous-même à ce stade dans temps sans me regarder faire ma solution. Maintenant, si vous êtes vraiment, vraiment coincé, tout d'abord, certainement aller et google, la moitié du développement web est des trucs Googling. Mais si vous êtes coincé sur Google et que vous ne savez pas où aller, vous pouvez toujours venir au groupe d'apprentissage pour coder Facebook ou simplement reprendre cette vidéo une fois que je fondu et fondu au noir. Et puis tu me regarderas faire ma solution. Alors je veux que vous alliez et que vous nous donniez une chance, ça peut ressembler à tout ce que vous voulez. Au fait, c'est tout à fait à vous de décider. Faites en sorte que ça soit incroyable. Si tu veux, fais en sorte que ça ait l'air terrible. Si vous voulez, c'est à 100% à vous de décider. Allez-y et créez un générateur de personnages Star Wars aléatoire basé sur les très peu d'informations que je vous ai données. Et je vous ai volontairement donné très peu d'informations ici parce que ce sera une très bonne pratique. En tant que développeur web professionnel. Les gens vont vous donner très peu d'informations et vous allez devoir travailler avec ça d'une manière ou d'une autre. Donc, je vais disparaître, puis je vais m' estomper et vous pourrez regarder ma solution plus tard. Assurez-vous donc juste de faire une pause lorsque l'écran devient noir. Ok, allons de l'avant et créons un générateur de personnages Star Wars aléatoire. Donc, la première chose que je fais ici est que je regarde mes points de terminaison API et que je le lis. Et c'est très important de le lire. Ne prends pas juste quelqu'un d'autre où comme ma parole d'un peu plus tôt. En fait, lisez à travers si vous le pouvez. Nous avons donc une URL de base ou une URL CDN mise en cache. Allons de l'avant et utilisez cette URL CDN de cache. Et nous avons deux routes. Nous pouvons donc utiliser cette barre oblique d'URL, tout point JSON ou ID barre oblique. Alors allons de l'avant et faisons une barre oblique. Un. Ça va marcher pour moi ? Non, ça ne marchera pas pour moi. Il doit être slash un problème ab.js IN pour probablement, non ? Non, ça ne marchera pas non plus. Donc ça ne marchait pas. Donc, nous lisons ceci et nous voyons que cela dit ID, mais il devrait en fait dire id, puis le nombre point JSON. Et donc la documentation pourrait être un peu meilleure ici, mais nous en voyons un exemple ici. Alors allons de l'avant et mettons cette URL ici et faisons barre oblique ID, barre oblique 1 point JSON. Et on a Luke Skywalker. Combien y a-t-il de personnages ? Quel est notre nombre maximum ou notre nombre maximum sera 89. Non, ça ne va pas être juste. Il va être slash ID slash 88 points JSON. Voilà, capitaine Plasmas, le dernier personnage que nous avons, donc nous avons des numéros un à huit, avec lesquels nous pouvons travailler. Alors allons à notre code ici et créons un bouton. Et il dit générer du caractère. Et nous devons, lorsque ce bouton est cliqué, point sur clic, faire une fonction de chose. Donc, c'est juste l'enregistrement d'un clic régulier événements. Maintenant, nous devons faire une sorte de requêtes GET. Nous pouvons faire dot get et puis cette URL. Et donc j'ai cette URL ici, et je vais rendre cela juste une touche plus petite que juste 88 points JSON, peu importe ce qui va être retourné que c'est bien. On pourra changer ça plus tard. Et puis nous voulons obtenir ces données et console.log les données. Nous voulons nous assurer que cela va fonctionner pour nous sur notre navigateur. Donc, revenons à notre navigateur et rafraîchissons notre page, générer du caractère. Et il l'a fait, il a fasciné Dieu, nos informations ici, c'est parfait. Mais maintenant, nous devons le randomiser parce que si nous cliquons à nouveau, il va juste continuer à obtenir un plasma. Alors allons de l'avant et randomisons ce nombre. Nous savons que nous devons créer un nombre aléatoire et ce n'est pas jQuery, c'est juste JavaScript. Donc, nous pouvons faire constante. Le nombre aléatoire est égal au point mathématique aléatoire. Et ça va nous donner un numéro entre 01 fois 88, et ça va nous donner un numéro entre 188. Et puis nous voulons faire le sceau mathématique. Et donc ce qui va faire au hasard, c'est que ça va nous donner un chiffre bizarre. Ça va être 0, 1-2-3, 4-5-6. Ça va avoir un tas de décimales et on ne veut pas ça. Ce que nous voulons à la place, c'est quel que ce nombre soit multiplié par 88, puis le faire passer au nombre le plus proche. Donc, si c'est comme 74.1, ce sera maintenant 75. Et allons de l'avant et changeons cela en un littéral de modèle. C' est juste normal, simple vieux JavaScript à ce stade. Et on va mettre un nombre aléatoire ici. Allons de l'avant et sauvegardons cela et actualisons notre page. Générer un caractère 0 nombre aléatoire n'est pas à une faute de frappe quelque part juste là. Ok, essayons encore ça. Ici, nous obtenons un Chewbacca id 13. ID, ID 21. Ce sont tous des chiffres faibles. Étrangement, ID 64. On y va. Maintenant, nous avons besoin de leur nom et de leur image. Donc on a toutes sortes de trucs. On a comme quand ils sont nés, lieu de naissance yada, yada. Nous voulons leur nom comme palpation et une image. Donc, on va juste faire tomber ça juste un petit peu. Et allons de l'avant et mettons un nom ici. Alors faisons le nom H1. Laissons-le vide et sélectionnons une image. Src ne sera rien aussi bien. S' il vous plaît donner une classe de caractère I mg. Et allons de l'avant et travaillons avec une partie de cela. Donc maintenant, nous savons que nous pouvons remplir le nom avec le nom de données, le nom de données, et c'est accessible. Et quand je clique ici, c'est toutes les données d'un objet. Je peux faire défiler jusqu'au nom. Alors maintenant, je peux sélectionner ce nom. Je peux faire le nom de point H1. 2.txt va être le nom de données. Et donc on ne voit rien. Boum, boum, boum, regarde ça. Il fonctionne si bien en ce moment. Allons de l'avant et ajoutons une image aussi. Et c'est aussi, nous allons faire un zoom arrière parce que nous sommes à environ 250% qui s'habille pour être trop. Maintenant, nous pouvons sélectionner cette image, nous pouvons sélectionner le caractère IMG. Nous pouvons sélectionner cet attribut de SRC et le définir comme ce que nous avons, quoi ici. Si nous le regardons, il est juste appelé image. Donc on fait des données, IMG. Ok, voyons si ça marche. D' accord. Je n'ai aucune idée de qui c'est, mais cool. Coucou, coucou. D'accord. D' accord. D'accord, ouais, ça a l'air plutôt bien. Donc, fondamentalement, nous avons cela fonctionne maintenant. Maintenant, nous pouvons rendre cela un peu plus agréable si nous voulions en ajoutant un peu de style. Pour que nous puissions faire quelque chose comme le style. Nous pouvons sélectionner notre H1, texte aligner, centre, text-décoration, soulignement, famille de polices. Faisons une police San Serif. Peu importe la police, juste une police Sans Serif. Et générons un nom de caractère en dessous de cela. Bouton Faisons. L' affichage va être Bloc, la marge va être automatique, et cela devrait être centré. On y va. Ça a l'air un peu mieux. Allons de l'avant et stylisons un peu cette image. Et nous faisons IMG. La largeur va être, disons 200 pixels. La hauteur va être automatique. Ombre de Bach. Dix pixels, dix pixels. Donnons-lui un peu flou. Et faisons-le noir. Voyons maintenant à quoi ça ressemble. Oh, cette image n'est pas apparue et n'a probablement pas d'image. Ok, pas mal, pas mal. Allons de l'avant et centrons ça aussi. Faisons afficher, bloc, marge, auto, générateur de caractères, Greedo, générateur de caractères, pêne dormant, générateur de caractères, toutes sortes de personnes ici, regardez-les. Et c'est donc notre générateur aléatoire et de caractère. C' est une photo terrifiante. Et nous l'avons fait techniquement en sept lignes de code. Oui, c'est quelque part là-dedans. Donc, nous avons cartographié run 12345678 lignes de code. Nous avons donc notre auditeur d'événements. Chaque fois que vous cliquez sur le bouton obtenir aléatoirement un caractère. Créer au hasard un caractère ou un nombre, plutôt louer aléatoirement créer un nombre, obtenir. Et puis juste l'URL, c'est cette URL API. Et au lieu d'obtenir comme 88 points JSON ou un point JSON, et nous venons de dire, chaque fois que vous cliquez sur ce bouton, créez un nouveau nombre aléatoire et mettez-le ici. Ensuite, quand c'est fait, nous avons une fonction de rappel et nous obtenons simplement le nom et l'image, et nous définissons ce nom H1 et l'attribut image de caractère, le SRC. C' est tout ce qu'il y a. Maintenant, le mien est assez moche. Si vous vouliez prendre mon code et le rendre nettement plus agréable à regarder, s'il vous plaît soyez ma supposition que j'adorerais si vous pouviez le faire. N' oubliez pas de partager votre projet. Il est très important que vous partagiez votre projet avec le reste de la classe. Il est à la fois inspirant et utile pour d'autres personnes voir votre code et de voir ce que vous avez travaillé. Une dernière chose, si vous êtes comme, eh bien, ce qui est Math.Sqrt, math point aléatoire. Ceux-ci ont été couverts en JavaScript one-to-one et JavaScript à un aussi, où nous avons fait un projet très, très similaire en utilisant juste du JavaScript vanille. De cette façon est juste un peu moins de code en utilisant juste jQuery droit plutôt que juste droit. 37. Résumé: Merci d'avoir pris jQuery one-to-one avec moi, Caleb, en disant, j'espère que vous apprendrez à aimer à quel point jQuery est facile à travailler avec. N' oubliez pas, vous pouvez également me suivre sur les réseaux sociaux à Caleb tall lean sur Twitter. Ou pour des petits extraits de code impressionnants et des mises à jour sur de nouveaux cours. Vous pouvez toujours suivre le point de codage pour point tout le monde sur Instagram. Enfin, si vous êtes à la recherche d'une communauté de revêtement, venez vous joindre à apprendre à coder sur Facebook. C' est un groupe totalement gratuit et vous pouvez poser n'importe quelle question de développement web que ce soit. Merci encore d'avoir pris jQuery 101 et j'espère vous voir dans un autre cours. Happy codage.