Série modèle d'objet de document 2023 - Partie 4 : Événements DOM (création, écoute et réaction aux événements)

1. Introduction du cours - Événements DOM: Woo hoo, mes chers étudiants. Bienvenue, Bienvenue de retour à une autre classe passionnante dans toute une série tout au sujet du dom. Je suis Clyde, je vais être votre instructeur et j'espère que vous avez suivi parce que chaque classe s'appuie sur elle-même. Mais cette classe peut prendre indépendamment ou iCloud, ce qui est possible dans cette classe est tout au sujet des événements. Maintenant, si les veines sont cruciales pour comprendre quand il s'agit de travailler, parce que souvent vous ne voulez pas seulement affecter le DOM. Vous ne voulez pas commencer à jouer avec une application Web jusqu'à ce qu'un événement se produise. Qu' est-ce que je veux dire par événement ? Eh bien, il existe de nombreux types d'événements différents et chaque type d'événement a ses propres propriétés et méthodes attachées à celui-ci. Événements tels que les événements de keyup. Lorsque l'utilisateur appuie sur le clavier, qu'en est-il d'un événement de clic ? C' est une chose courante lorsqu'un utilisateur clique sur un bouton, parfois vous voulez que quelque chose soit affiché, parfois une veine de défilement, parfois un événement de chargement de page, la liste continue, ils en sont des tonnes. Mais avant même d'entrer sur les différents types de veines, vous devez comprendre les événements apportés juste les événements. Vous devez comprendre la différence entre les écouteurs d'événements et les gestionnaires d'événements. Vous devez comprendre comment ceux à la page. Et nous avons une variété de façons de le faire. Nous pouvons utiliser des écouteurs d'événements en ligne, des propriétés d'événement en ligne, et nous pouvons utiliser la méthode addEventListener. Donc je vais discuter de tout ça. Je vais discuter des avantages et des inconvénients de l'utilisation de l'un par rapport à l'autre. Je vais recommander ce que je pense être la meilleure approche qui va vraiment être amusant. Donc, sans plus tarder mes étudiants idée, entrons dans la toute première conférence sur les événements DOM, poids icône, audios. 2. Qu'est-ce qu'un événement: On y va. Super, super excité. Je suis super ampé et tout un Po2. Ce sera un cours vraiment génial sur les techniques avancées en matière de manipulation DOM. Et pourquoi ce cours est-il si excitant ? Eh bien, pour la simple raison que jusqu'à présent, lorsque vous apprenez les fondamentaux DOM, vous avez presque seulement vu comment modifier le DOM dans la console. Et ça veut dire que c'est temporaire. En d'autres termes, chaque fois que la page a été actualisée, nos modifications ont été perdues. L' objectif de ce cours est de combiner ce que nous avons appris jusqu' à présent pour créer des pages dynamiques. Et pour ce faire, nous devons comprendre un mot simple qui a un sujet très compliqué, les événements. Ok, mur mince, que sont les événements ? Laisse-moi prendre ce rocher et le jeter à l'écran. Ok, c'est la question, qu'est-ce qu'un événement ? Eh bien, j'aime toujours commencer à accoler simplistiquement aux fissures mêmes et événement est juste une action qu'un utilisateur ou un navigateur a prise. Et les nombreux types d'événements différents comme quand un utilisateur passe la souris sur un élément, quand un utilisateur clique sur un élément, soumet un formulaire, le navigateur peut même soumettre les veines lorsque la page termine le chargement. Qu' en est-il quand un utilisateur appuie sur une touche ? Ce ne sont que quelques exemples de différents types d'événements, mais ils sont nombreux, beaucoup plus. Donc, nous savons qu'un événement est une action que le navigateur de l'utilisateur prend. Mais surtout, un événement a toujours lieu dans le navigateur. Ok, cool. À un niveau très élevé, nous savons ce qu'est un événement. On sait que c'est bizarre. Mais comment utiliser les événements pour se concentrer sur ce mot ? Comment accéder à ces événements ? Comment interagissons-nous avec eux ? Comment écoutons-nous ces événements ? Et la réponse est la batterie. Javascript. C'est vrai. Javascript dans l'événement est lié à JavaScript. Et en codant les réponses JavaScript qui s'exécutent sur un événement. Comme les développeurs peuvent afficher des messages à nos utilisateurs, nous pouvons valider fille, clic sur le bouton du réacteur, et bien d'autres choses. Il est très, très excitant qu'il y ait une mise en garde. Je veux juste dire, oui, veines de webby ne font pas partie du langage JavaScript de base. Conduisez mal cette distinction à l'esprit. Donc, ce que j'essaie de dire, c'est que les veines elles-mêmes nous sont données par l'API DOM. Rappelez-vous les API DOM intégrées au navigateur. Javascript n'est qu'une des nombreuses langues que nous utilisons généralement pour accéder à ces événements et interagir avec eux. Est-ce que ça a du sens ? Je l'espère. Et ne vous inquiétez pas si vous êtes un peu perdu. Tout ce que nous allons entrer dans des tonnes de détails dans ce cours sur les événements. Tu vas vraiment devenir un grand maître et les événements que je suis super, super excité. Alors restez motivé, continuez. Et je te verrai à la prochaine conférence. 3. Deux choses plus importantes à savoir: N' oubliez pas que les événements sont cruciaux pour comprendre et maîtriser le développement frontal. Et c'est pourquoi je vais passer beaucoup de temps dans cette première section du cours à expliquer les événements dans les veines ne sont que des actions prises par l'utilisateur ou le navigateur. Bien que vous puissiez exécuter une fonction lorsque votre page se charge, la plupart du temps, vous voudrez exécuter du code lorsque l'utilisateur fait quelque chose comme lorsqu'un utilisateur clique sur un lien dans le formulaire défile déplace sa souris sur un objet ou fait autre chose. Et rappelez-vous, toutes ces actions sont appelées événements. Et comme je l'ai mentionné dans la conférence précédente, de nombreux types différents d'événements. Et ils ont chacun leur propre nom. Par exemple, lorsqu'un utilisateur clique sur un bouton, surprise, surprise que l'événement click est déclenché. Lorsque l'utilisateur appuie sur une touche. Un événement de presse de touche est déclenché lorsque votre navigateur dispose et charge toutes les données du serveur, un événement de chargement est déclenché. Rappelez-vous, tout comme dans votre vie personnelle, vous avez beaucoup d'événements différents, comme une fête d'anniversaire, un mariage, et cetera, et cetera. La même chose se produit dans votre navigateur. Ce sont des événements qui se passent tout le temps. D' accord ? Ok, tu l'as maintenant. Allons passer à autre chose. Vous devez comprendre deux choses pour maîtriser les événements et ils ne sont pas si difficiles. Qu' est-ce qu'ils sont ? Tout d'abord, nous devons comprendre n'importe quel écouteur d'événement. Qu' est-ce qu'un écouteur d'événement ? C' est assez intuitif. En fait. Un écouteur d'événement attache une interface responsive à un élément. Des têtes fraîches, un peu d'eau boucheuse. Je veux dire, pense à ça comme ça. Lorsque nous attachons un écouteur à un élément, nous permettons à cet élément particulier d'attendre et d'écouter qu'un événement donné se déclenche. Deuxièmement, prenez du sens. Ne vous inquiétez pas si vous ne comprenez pas encore tout à fait ça. Nous allons voir beaucoup, beaucoup d'exemples dans ce cours. Pour l'instant, comprenez simplement que nous devons mettre un écouteur sur un élément afin d'écouter un événement particulier. Et il n'y a pas qu'un seul type d'écoute. Il s'agit de trois façons d'affecter des écouteurs d'événements aux éléments. Nous avons des écouteurs d'événements en ligne dans les propriétés de ligne, ou nous pouvons utiliser des écouteurs d'événements. Et nous allons passer en revue ces trois méthodes pour assurer que vous êtes familier avec chaque façon et événement peut être déclenché. Et puis, bien sûr, nous allons discuter des avantages et des inconvénients de chaque méthode. Ok, donc nous avons parlé de l'auditeur de l'événement. Que pensez-vous que la deuxième chose la plus importante est quand il s'agit de l'événement ? Pensez-y. Peux-tu deviner ? Nous avons un élément qui écoute un événement et dit maintenant qu'un événement se produit réellement. Que se passe-t-il ensuite ? Je suis sûr que tu l'as deviné. Nous avons besoin d'un gestionnaire, nous avons besoin d'une sorte d'exécution. On doit dire au navigateur, OK, Cool, qu'est-ce que tu fais ? Et cela nous amène aux gestionnaires d'événements. Le point important à noter est que chaque événement disponible, un événement click, un événement keypress, cetera excentrique, doit avoir un gestionnaire d'événements. Et un gestionnaire d'événements juste un bloc de code. Habituellement, une fonction JavaScript que vous et moi écrivons en tant que programmeur s'exécute lorsque l'événement se produit. Et quand un événement se produit en tant que programme est comme utiliser des mots fantaisistes, donc nous utilisons simplement le mot combats. Lorsqu' un événement se déclenche. Nous exécutons cette fonction de gestionnaire. Et un peu de FYI, beaucoup de gens, et quand vous commencez à googler ces choses, beaucoup de développeurs souvent référé à EventHandlers en tant qu'auditeurs d'événements. Et bien qu'ils soient assez proches, ils, strictement parlant sur pas la même chose. Bien qu'ils travaillent toujours en tandem, ils travaillent ensemble. Rappelez-vous juste que l'auditeur écoute l'événement qui se passe. Et le gestionnaire est le code qui s'exécute en réponse à cet événement qui se produit. ce moment, je veux juste faire une pause ici. Vous avez pris en compte des choses très, très importantes quand il s'agit de l'événement. Et je veux que vous fassiez une pause. Je veux que tu le fasses juste, je veux que ça trempe dedans. Et dans la prochaine conférence, je veux que nous examinions ces méthodes d'écoute un peu plus en détail. 4. auditeurs d'événements en ligne: Bon, reprenons là où on s'est arrêté. Rappelez-vous, nous parlions de, euh, veines et nous avions besoin de comprendre les deux choses les plus importantes pour événements de Moscou et ce étaient des auditeurs d'événements et des gestionnaires d'événements. Pour l'instant, je veux qu'on se concentre sur l'auditeur. Et en particulier, je veux regarder les différentes façons dont nous pouvons ajouter des auditeurs à un élément. Et pour remuer votre mémoire. Il y avait trois façons d'ajouter des auditeurs aux éléments avec trois façons différentes. Écouteurs d'événements en ligne dans les propriétés de ligne et les écouteurs d'événement. Bizarre, ce n'est pas très intuitif, mais je veux qu'on en discute chacun. Et ce faisant, vous aurez une idée beaucoup plus intuitive de la façon dont ils fonctionnent. Donc, j'invité n'est pas meilleur endroit pour commencer alors avec la toute première méthode, les écouteurs d'événements en ligne. Maintenant, ce que je veux que nous fassions, c'est que nous supposons que nous avons un bouton sur notre page et que lorsque ce bouton est cliqué, tout ce que nous avons fait c'est alerter, boom, à l'utilisateur. Une page très simple. Rien de fantaisie. Alors, comment pourrions-nous écrire ça ? Tout d'abord, nous avons besoin de notre HTML. Notre HTML se compose d'un élément bouton. Dans l'élément bouton, c'est là que la magie se produit. Comme vous pouvez le voir, nous écrivons onclick, nous assignons cela à une fonction appelée boom. Ne vous inquiétez pas trop de la façon dont tout cela fonctionne et où nous obtenons ce onclick. Pour l'instant, réalisez simplement que cet événement onclick ou ce mot onclick nous est fourni par l'API DOM. Nous l'attribuons ensuite à la valeur de boom. Et cette brûlure dans notre cas, va être JavaScript. Ce sera une fonction JavaScript que nous exécutons. Ce qui signifie que oui, nous devons écrire JavaScript. Nous pouvons mettre ces balises inline et script ou il peut être dans un fichier externe. Mais on y va. Nous avons notre JavaScript. Nous définissons une fonction appelée boom. Et oui, nous alertons juste graver à l'écran. Ce mes chers étudiants est un EventListener en ligne. Mais laissez-moi vous montrer comment ça marche. Laissez-moi simplement sauter à notre éditeur de codage et nous allons le voir en action. Ok, Voyons comment fonctionne un écouteur d'événement en ligne. Et dans ce cours, vous allez me voir utiliser beaucoup de code Visual Studio. Tout d'abord, c'est gratuit. Deuxièmement, c'est génial. Et troisièmement, nous devons utiliser un éditeur de texte, et c'est juste celui que j'ai choisi. Maintenant, lorsque j'utilise Visual Studio Code, utilisent également Live Server et que vous voulez vivre le serveur fait à son cœur très basique car il me permet d'exécuter mon ordinateur en tant que serveur. Donc, ce que je peux faire est quand je change les choses dans le HTML serait automatiquement et rafraîchir le navigateur. Si vous voulez en savoir plus, s'il vous plaît me demander dans Q&R. Sinon, c'est super, super simple à dominante visuelle Studio Code. Regardez l'onglet Extensions, puis téléchargez Live Server. Mais assez dit, regardons un écouteur d'événement en ligne et comment cela fonctionne. Le point de départ est d'écrire notre HTML. Vous pouvez voir ici, j'ai mis une page blanche. Donc, nous allons juste asseoir un modèle HTML très vide. Ensuite, je veux créer une balise body dans une balise body, insérons ce bouton. Et bien sûr, appelons-le Click Me. Et qu'est-ce qu'on a à faire ? C' est vrai. Nous devons ajouter cette propriété EventListener en ligne et elle s'appelle onclick. Encore une fois, cela nous est donné par l'API DOM. Ce n'est pas un mot que j'ai choisi. Nous devons utiliser ce mot sur clic. Si nous voulons écouter l'événement click, alors la prochaine chose que nous devons faire est que nous devons ensuite définir un gestionnaire d'événements. On l'appellera chaque fois que cet événement est déclenché. Et dans ce cas, je veux définir une fonction appelée boom, nous avons traversé cela, nous avons vu ça. Alors on y va. C' est comme ça que HTML. Mais maintenant, si nous sauvegardons ceci et vous savez quoi, laissez-moi juste me supprimer en cliquant sur ce bouton que nous voyons dans le coin inférieur droit, c'est-à-dire de Live Server. Et cela me permet d'afficher cela dans une vie de navigateur. Cliquez sur ce bouton. Et nous y voilà. Ce sont Click Me bouton que nous avons défini dans notre HTML. Mais si je clique dessus, rien ne se passe, non ? Et si nous inspectons ce document, nous devrions voir une sorte d'erreur dans la console. Donc oui, la console actualise et cliquez sur le bouton. Boom, n'est pas défini. C' est tout à fait logique, droits. Et c'est pourquoi nous devons inclure notre JavaScript parce que nous avons deux définit la fonction de boom. Revenons à notre code. Il est maintenant inclure des balises de script. Et je sais que ce n'est pas idéal d'avoir du JavaScript en ligne, mais vous savez quoi ? C' est un exemple si simple. Il y aura bien pour nos besoins. Tout ce que nous avons à faire maintenant est de définir une fonction appelée Bu. Bien sûr, nous devons utiliser le mot-clé de fonction en JavaScript dans définir un nom de fonction, qui dans ce cas est appelé boom. Et dans les accolades, c'est que nous pouvons définir la viande de notre fonction. Dans ce cas, nous voulons juste alerter boom, à l'écran. Donc, si nous sauvegardons cela, retournez à notre navigateur. Supprimons ça maintenant. Et si on clique sur ce bouton, boum, on a cette alerte. C' était cool ? Et ceci est un écouteur d'événement en ligne. Impressionnant. Je suis sûr que vous pouvez voir à quel point c'est facile et intuitif. Et si, Pourquoi saviez-vous que cet EventListener en ligne est la première méthode d'enregistrement des gestionnaires d'événements trouvés sur le web. Plutôt intéressant. Donc c'est un peu comme le point de départ. C' était le point d'entrée dans les écouteurs d'événements. Comme c'est cool. Et cela peut sembler facile à utiliser comme attributs de gestionnaire d'événements. Si vous faites quelque chose de très rapide, ils deviendront rapidement ingérables et inefficaces. Mais de toute façon, on en discutera plus tard. Permettez-moi de ne pas vous donner d'alerte. 5. Propriétés en ligne: Avant de passer à autre chose, je voulais juste libérer énergique entre les écouteurs d'événements et les gestionnaires d'événements. Cette propriété onclick est la propriété d'écoute faible utilisée dans cette situation. C' est essentiellement comme toute autre propriété que nous utilisions sur un bouton, comme le contenu de texte par exemple, ou le style. Mais dans ce cas, nous savons que c'est un type spécial de propriété parce que lorsque nous le définissons égal à un code, nous savons que caillé doit être exécuté chaque fois que l'événement se déclenche sur le bouton. Donc gardez juste à l'esprit que onclick est l'auditeur. Ce boom, bien sûr, est le gestionnaire d'événements réel. Ok, Ok, tu nous as, passons à autre chose. Nous avons vu dans les écouteurs d'événements de ligne, il est maintenant temps de regarder dans les propriétés de ligne. Et encore une fois avec les propriétés intérieures, nous allons avoir besoin de notre HTML et nous allons avoir besoin de JavaScript. Mais comme vous le verrez, notre code est écrit légèrement différemment. Avec le HTML, nous avons littéralement juste un élément bouton. Comment facile et intuitif est que nous n'avons pas de code supplémentaire. Ce n'est pas aussi désordonné parce que nous avons juste un élément bouton avec Click Me, goûter entre les balises, un peu de flou. Je vais JavaScript doit alors être un peu plus compliqué, mais au moins cela ensemble et en un seul endroit. Donc la première chose que nous avons à faire, et nous l'avons vu dans la première partie de notre série. On le sait. La première chose est que nous devons saisir ce bouton et ici nous commençons au document, la page Web par défaut. Nous accédons à une propriété appelée QuerySelector. Et bien sûr, on attrape le bouton. Maintenant, dans notre JavaScript, nous pouvons ajouter une propriété en ligne appelée, vous l'avez deviné en cliquant. Et rappelez-vous que dans les propriétés de ligne très spéciales parce que lorsque cet événement se déclenche, il exécute automatiquement le code auquel nous attribuons cette propriété. Oui, on attribue l'alerte de code. Boom, vérifions ça dans notre éditeur de codage. Maintenant, nous voulons regarder dans les propriétés en ligne et comment elles fonctionnent. Supprimons donc notre code de l'exemple précédent ici. Et commençons avec notre bouton. Et bien sûr, notre HTML maintenant est encore plus simple, non ? Nous avons un bus et mis en commun cliquez sur moi. Mais à ce stade, nous n'avons attaché aucun écouteur, aucun écouteur d'événement à cet élément tous les soirs. Et c'est pourquoi notre JavaScript obtient des vaccins un peu plus compliqués. Mais alors au moins tout notre code est dans un bloc qui n'est pas divisé entre HTML et JavaScript. Donc, la première étape consiste à créer notre balise de script, comme nous l'avons vu dans l'exemple. Et raide. Un. Lisez vos éléments. Nous voulons saisir le bouton parce que c'est ce à quoi nous voulons attacher. Appelons ça le bouton btn. Et bien sûr, nous sommes très familiers avec cela de la partie 1. Nous devons commencer dans notre objet de document. On ne l'a pas fait. Xy est une propriété appelée QuerySelector. Aussi, nous pouvons le faire d'une autre façon est que c'est la façon dont je veux utiliser et nous voulons voir quelqu'un des animaux. Alors on y va. En fait, on est partis. Deuxième étape. Tu te rappelles ? Écrivons. Nous devons ajouter les veines et le code à exécuter. Donc, c'est assez simple. On prend juste notre bouton à l'intérieur, veut ajouter une propriété à tout cela, n'est-ce pas ? Et encore une fois, ce mot onclick nous est donné par l'API DOM et reste. Mais que se passe-t-il lorsque cet événement click est déclenché ? Le code que nous attribuons cette propriété onclick sera automatiquement exécuté. C' est ce qu'on doit faire maintenant. On doit signer un bloc de code. Ici. Je vais utiliser la nouvelle ère. Si vous ne savez pas ce que c'est, ne faites pas de stress. Je t'ai couvert. J' ai fait tout un cours sur JavaScript. On parle de choses comme ça. C' est en fait appelé les cercles de grand-mère JavaScript complets, la paix. Vous ne pouvez pas le laisser, si vous le savez déjà. Allons passer à autre chose. On y va. Alors on y va. Et bien sûr, à l'intérieur de ces accolades, c'est là que appartient le bœuf, le cœur de notre code. Et oui, je sais que les cas de terre ne sont pas très pénibles parce que tout ce que nous faisons c'est que nous alertons aubaine à l'écran. Alors, tu l'as ? Il s'agit d'une propriété en ligne. Et ça s'appelle une propriété en ligne parce que nous y réfléchirons de cette façon. Notre HTML est tout simplement standard. On ne fait rien de spécial. Dans notre JavaScript. Nous ajoutons cette propriété en ligne appelée onclick, et elle n'a pas toujours besoin d'être décliquée. Toute leur pléthore de choses qu'on peut ajouter ici. On regarde juste l'événement Onclick. Nous devons ajouter cela en tant que propriété à notre bouton. Et puis bien sûr, nous définissons le code qui est exécuté. Nous avons compensé VTE malgré. Si nous revenons à notre navigateur, actualisez, cliquez sur ce bouton, et nous y allons. Mission de bombe terminée. 6. La méthode addEventListener(): Bien fait près de l'hélium, venir le long du chemin, nous venons de voir dans les propriétés en ligne, espoir devient plus intuitif et j'espère que vous vous amusez. Alors on y va. Nous avons examiné les écouteurs d'événements en ligne. Nous avons examiné les propriétés en ligne. La troisième et dernière chose que nous devons discuter est maintenant les auditeurs d'événements. Encore une fois, nous avons besoin de HTML et JavaScript. Comment HTML peut être très simple, tout comme quand nous avons utilisé dans les propriétés de ligne. Et tout comme quand nous regardions les propriétés en ligne, nous devons inclure toute notre magie dans le JavaScript lui-même. La première étape, c'est qu'on doit saisir le bouton. Nous savons déjà comment le faire. Je vais juste utiliser un sélecteur de requête pour adapter ce modèle. C' est maintenant que nous avons cela, mais une fin JavaScript, ce que je veux faire maintenant, c'est que je veux utiliser un écouteur d'événement. Donc, ce que nous faisons est que nous accédons à notre bouton et nous ajoutons cette propriété appelée add event listener. Encore une fois, c'est un mot-clé fourni par l'API DOM. Il faut deux arguments et nous allons aborder cela beaucoup plus en détail plus tard. Ne vous inquiétez pas, maintenant, réalisez que ça prend deux arguments. Le premier argument est ce que l'événement est que nous voulons écouter, et le second argument est le gestionnaire d'événements. Ici, nous voulons écouter l'événement click et nous voulons exécuter un gestionnaire d'événements appelé boom. En d'autres termes, nous voulons définir une fonction appelée boom et exécution de la dette, qui est la dernière étape. Nous définissons une fonction appelée boom, qui sera exécutée lorsque cet événement est déclenché. Cette méthode, addEventListener, cette troisième solution a quelques avantages. Tout d'abord, il s'agit de la dernière norme permettant l'affectation ou plus d'une fonction en tant qu'écouteurs d'événements à un événement. C' est vraiment ce qu'il y a de cool. Et bien sûr, il est également livré avec une pléthore d'autres options utiles. Encore une fois, ne vous inquiétez pas pour le détail. Nous regardons juste le niveau élevé ici, Allons à l'éditeur de codage et voyons comment cela fonctionne en action. Nous sommes presque, presque fait plaisir et ils le font, si bien. Maintenant, nous allons parler de la méthode la plus récente, et c'est la méthode addEventListener. Comment ça marche ? Eh bien, nous commençons par ça, supprimez tout. Nous commençons pour ce bouton, ce bouton Cliquez sur moi. Encore une fois. Notre HTML est très, très propre. Ce n'est pas désordonné. Et tout ce que nous faisons maintenant doit être écrit en JavaScript, ce qui, vous savez, vous pouvez argumenter, rend le JavaScript plus compliqué. contre-argument à cela, c'est qu'au moins tout est en un seul endroit. Donc, cela rend votre code beaucoup plus maintenable. Une fois que votre site Web commence à devenir de plus en plus complexe, j'espère que cela a du sens. Mais regardons un exemple. L' étape 1, c'est quoi ? C' est vrai. C' est la même chose que la méthode précédente. Nous devons trouver l'élément auquel nous voulons attacher un écouteur d'événement. Dans ce cas, c'est le bâton. Trouvez donc les éléments auxquels nous voulons ajouter un écouteur d'événement. Et oui, enrôlé l'a mis dans une variable appelée bouton. Bien sûr, nous accédons à notre document, nous accédons à la propriété appelée QuerySelector avec sur le document et nous saisissons notre bouton. Donc, si aussi un bon, Maintenant nous avons notre bouton. Tu sais comment ça marche alors que c'est la prochaine étape ? L' étape suivante est que nous devons ajouter cette méthode, ajouter l'écouteur d'événement à ce bouton. Coller pour ajouter l'écouteur d'événement add à notre bouton. Donc tout ce que nous avons à faire pour cela en accédant à notre bouton. Nous ajoutons ensuite cette propriété add event listener à notre bouton. Et cette propriété addEventListener est une méthode plus récente. C' est génial. C'est vraiment, vraiment bon et vous verrez pourquoi plus tard dans ce cours. Et comme je l'ai mentionné, il faut deux arguments. Le premier argument est l'événement que nous voulons écouter, qui a un clic. Et le deuxième élément, ou le deuxième argument, est la fonction que nous voulons exécuter, qui dans ce cas, appelons simplement boom, ce qui nous amène à la troisième étape. Et c'est pour définir cette fonction de boom. La troisième étape mène bien. Fonction de flèche. Et nous y voilà. Utilisons simplement le mot-clé fonction qui nous est donné par JavaScript. Nous définissons ensuite une fonction appelée boom. Et bien sûr, notre boom, ça va être une alerte de boom très ennuyeux. On y va. Et si nous sauvegardons cela et nous allons à notre navigateur et nous cliquons sur ce bouton. Boum, fini et saupoudré. 7. Résumé: Qui tu dois avoir une quantité incroyable de Walden. Nous avons donc examiné l'aventure en ligne dans les propriétés en ligne et maintenant nous venons de voir les auditeurs d'événements en action. Mais la seule chose que je tiens à souligner ici est que peu importe la méthode que nous avons utilisée, que vous remarquez tous les trois produisent exactement le même résultat. Donc, quand il s'agit d'exemples très simples comme celui que nous utilisons maintenant, où c'est juste un simple événement de clic de bouton. Peu importe la méthode que vous utilisez. Vous savez, ces choses ont cessé de devenir vraiment importantes quand vous arrêtez d'intimider. Une science beaucoup plus compliquée. Mais de toute façon, Assez dit que vous comprenez sont tous les trois travaux que nous allons discuter maintenant de ces méthodes plus en détail au fur et à mesure que nous continuons. Et si vous êtes quelque chose comme moi, vous avez envie de commencer à entrer dans des exemples plus concrets et solides. Et crois-moi, on va accrocher le nom. Nous allons entrer dans des choses cool et cool dans ce cours. Rendez-vous à la prochaine conférence. 8. Audience d'événement en ligne - Aperçu détaillé: Avant de commencer à progresser, je veux juste récapituler un peu plus en détail. Chacune des trois méthodes que nous venons de discuter sur la façon d'ajouter des écouteurs d'événement à un élément. Et le tout premier dont nous avons discuté était cet écouteur d'événement en ligne. Et comme vous le savez, c'est le moyen le plus simple. C' est la façon la plus simple de commencer à comprendre les événements. Mais comme vous le verrez bientôt, ils ne devraient généralement pas être utilisés au-delà des tests et des fins éducatives, mais c'est un bon endroit pour commencer et c'est pourquoi nous l'avons examiné. Et vous vous souvenez de la syntaxe, vous vous souvenez de la saleté plus dure, malveillante, refroidir cet exemple ici d'un bouton. C' est notre HTML et nous savons qu'un écouteur d'événement en ligne est un peu plus désordonné. Ce n'est pas seulement du HTML droit comme ça, n'est-ce pas. Nous devons ajouter un attribut, nous devons ajouter une propriété à ce bouton. Et dans cet exemple, disons que nous voulons écouter l' événement click. Comment pourrions-nous le faire ? Eh bien, comme je suis sûr que vous l'avez deviné, et comme vous vous en souvenez, nous devons ajouter cette valeur de propriété appelée onclick à ce bouton. Et comme je l'ai mentionné, cet onclick est un mot-clé API DOM. Nous devons utiliser cette orthographe spécifique et donc le mot. Si nous l'épelons mal, ça ne marchera pas. Nous ajoutons donc cet attribut au bouton. Qu'est-ce qu'on fait ? On doit lui attribuer une valeur, n'est-ce pas ? Et nous le faisons avec le signe égal. Et la dernière chose que nous devons faire est que nous devons définir la fonction qui est appelée quand jamais cet événement onclick est déclenché. Et dans notre exemple, nous avons défini une fonction appelée boom. Et nous avions cette fonction définie dans un script séparé que nous n'avons pas besoin d'avoir un script. En fait, nous pouvons écrire notre JavaScript directement en ligne également. Par exemple, nous allons juste alerter bonjour à l'écran. Là, nous l'avons. Nous avons un EventListener en ligne valide sur l'écran en ce moment. Et comme vous pouvez le voir, c'est un peu intuitif en économie puisque nous savons que cette fonction d'alerte sera exécutée automatiquement chaque fois qu'un événement de clic est déclenché sur ce modèle. Pour récapituler, nous écrivons notre écouteur de clic, AKA sur clic. Et dans ce cas, nous écrivons également notre gestionnaire AKA cette fonction d'alerte en ligne dans notre fichier HTML. Tout est bon et bien, mais cette méthode n'est pas grande. Pourquoi ce n'est pas génial ? Comme je l'ai dit, il peut sembler facile d'utiliser un attribut Event Handler si vous faites simplement quelque chose de très rapide, qu'il peut rapidement devenir ingérable, inefficace et non convivial pour les moteurs de recherche. Généralement, ce n'est pas une bonne idée de mélanger votre HTML et JavaScript car il devient difficile à transmettre. Garder votre JavaScript en un seul endroit est une bien meilleure approche. Et si c'est dans un fichier séparé, vous pouvez appliquer à plusieurs documents HTML, même dans un seul fichier, gestionnaires d'événements en ligne sur pas une bonne idée. Par exemple, un bouton serait correct. Mais que se passe-t-il si vous aviez un 100 boutons ? Vous devrez ajouter un 100 attributs à un fichier. Il se transformerait rapidement en un cauchemar d'entretien. Et juste au cas où tu n'en aurais pas encore marre de ma voix, je veux juste ramener ce point à la maison une fois de plus. Vous pouvez comparer un écouteur d'événement en ligne à l'écriture CSS en ligne sur un élément HTML. Ce n'est pas une bonne idée. Il est beaucoup plus pratique de maintenir une feuille de style séparée de classes puis de créer des styles en ligne sur chaque élément de votre page. De même, il est tout simplement plus possible de maintenir notre JavaScript dans un fichier de script entièrement séparé. Ensuite, ajoutez des gestionnaires d'événements JavaScript et des écouteurs à chaque élément de notre HTML inline. Ça n'a pas de sens. Je suis sûr qu'on l'a fait. Mais de toute façon, avant de passer à discuter de la méthode suivante, je veux que nous regardions maintenant un exemple pratique, cool, amusant d'utiliser un EventListener en ligne. Et je sais que ce n'est pas la meilleure pratique. Mais croyez-moi, l'apprentissage de cette base et des points extraterrestres. Je suis maintenant, nous espérons que vous pouvez vous le permettre. Je te verrai à la prochaine conférence. Disons trouver bon votre ordinateur, préparez-vous à coder avec moi. Voir maintenant. 9. Défi pour les auditeurs d'événements en ligne - Introduction: Premier exemple pratique, super, super excité. J' ai mon café, ça me fait continuer. J' adore le nouveau. Juste sympa. Ça me garde dehors de toute façon. Vous pouvez voir sur le fond ici de l'écran, je pensais un site très simple. En fait, c'est un site vraiment amusant. Et tout ce que je veux faire, c'est que je veux changer de couleur et ça ne peut pas, mais je veux asseoir notre code d'une manière très pratique sauf pour une chose. Et c'est que nous allons utiliser un écouteur d'événement en ligne. Je sais, et je continue de dire que ce n'est pas la meilleure approche, mais ce sont les fondamentaux que je veux traverser et vous devez comprendre les bases avant de commencer à progresser. Comprenez aussi pourquoi les choses ont été faites d'une certaine manière. Vous comprenez pourquoi le Code a progressé d'une certaine manière. Seulement si vous comprenez que d'où il vient, vous savez comment il est originaire. Donc, ça va être une conférence vraiment amusante. Je vais coder ça avec toi. Si vous ne voulez pas coder le type de configuration, Ne vous inquiétez pas, je vais le fournir dans un fichier séparé, mais je vous encourage fortement à coder avec lui. Une fois que vous l'aurez codé, ce sera un peu le point de départ. Ensuite, je vais te le remettre et je veux que tu essaies de résoudre le JavaScript. Je veux que vous essayiez d'accéder au DOM et Ed, cet EventListener en ligne. Vous devriez savoir comment le faire a été et que voulons-nous arriver ? Eh bien, nous avons deux boutons ici. Le bouton d'un. Que diriez-vous de tout faire bon ? Et comme vous l'avez deviné, tout devient bleu. Et puis on a le même bouton. Mais il s'avère que nous pouvons lire un exemple très simple. Si c'est amusant, qu'est-ce qu'on attend ? Nous allons sauter dans les prises comme il a cessé de couper. Et je vais d'abord construire cette page, le code complet, la solution avec vous. Donc, je vous encourage fortement à coder avec moi. Si vous ne voulez pas, c'est bon aussi et fourni l'affectation basée sur le modèle, et je vous verrai dans l'image. 10. Défi pour les auditeurs d'événements en ligne - Créer notre HTML: Ok, maintenant, commençons. Et comme vous pouvez le voir, j'ai un fichier de code Visual Studio vide devant moi. Je n'ai rien inclus, alors nous allons tirer la base de notre site. Ouvrons cette structure de dossiers et créons un fichier appelé index.html. On peut l'utiliser, on peut le cacher maintenant. Et puis commençons par un modèle de fichier HTML de base et un titre. On peut avoir des couleurs changeantes. Assez explicatif est explicatif est un métal dans notre corps. C' est que nous sommes des sit-ups HTML vont être, incluons une balise H1. Et bien sûr, nous pouvons dire que c'est un site vraiment amusant. Donnons à notre tag H1 un ID de je ne sais pas, titre. Avant d'aller plus loin, ce qui est vraiment cool, c'est qu'on peut utiliser Live Server et on peut voir comment il a audité cette page à la volée en temps réel. Alors faisons ça. On y va. Donc il y a nos images H1, mettez-les à l'ascenseur et ils considèrent, comment est-ce ? Et nous pouvons réellement voir notre code à gauche et le résultat de notre code à droite. C'est assez pratique. Il est maintenant en train de créer un paragraphe avec un ID du premier paragraphe. Et dans le paragraphe, nous pouvons simplement dire Wall-E. L' eau est un grand animal de compagnie. On y va. Nous pouvons avoir un autre paragraphe bien sûr, avec l'identifiant du second graphique. Et ici, nous pouvons juste écrire quelques mots. Vali mange beaucoup de graphiques. Enregistrez cela, et vous pouvez le voir mis à jour sur notre navigateur. Et tu te souviens qu'on avait deux boutons, non ? Cela va être avec Inline EventListener entre en jeu. Donc, lisons cela dans un div avec une classe de wrapper. Et on peut avoir deux boutons. Le premier bouton peut dire que diriez-vous de tout rendre bleu ? Et le second bouton peut dire que diriez-vous de tout rendre rouge ? Et si je l'enregistre, nous devrions avoir nos boutons dans notre navigateur. On y va. Laissez le style semble terrible. Donc, nous allons juste pour des raisons d'exhaustivité, Modifier le tableau de style dans notre section de tête. Et c'est juste pimenter un peu. Je sais que ça ne va pas être génial. Ce n'est pas un site de cloches et de sifflets de fantaisie, mais nous allons juste l'améliorer un peu. La première chose que nous pouvons faire, c'est que nous pouvons tout aligner sur le centre. Donc, nous pouvons prendre notre H1 et notre paragraphe et nous pouvons juste prendre la ligne au centre. On y va. liste commence à venir, à droite. Commençons maintenant nos boutons. Tout d'abord, nous pouvons les afficher sous forme de blocs. Donc, chaque bouton est son propre bloc. Ajoutons une marge. Ça commence déjà à paraître mieux. Et la prochaine chose que je veux faire maintenant est que je veux paraître à ces boutons avec notre goût. Donc on peut juste aller marge. A gauche, l'eau. Et bien sûr, nous pouvons aller droits de marge est modifié. Et ça devrait sembler à tout. Cool. Est-ce que Bashar a supprimé ? Je pense que c'est assez bon pour commencer, non ? Laissez-moi juste augmenter cet éditeur de texte ici. Alors on y va. Voici notre document de base, notre squelette. Je veux mettre la vidéo en pause à ce stade. Je veux que vous pensiez à deux choses. Premièrement, je veux que vous réfléchissiez à la façon dont vous pouvez ajouter un écouteur d'événement en ligne à chacun de ces équilibres. Et dans, je veux que vous réfléchissiez à la façon dont nous devrions écrire notre enzyme. Et j'aimerais que vous incluiez un fichier JavaScript séparé afin d'écrire votre document. Alors réfléchis à la façon dont on peut faire ça. Et dans la prochaine conférence, je vais passer par la solution avec vous. Je vais te montrer comment je le ferais. Voir maintenant. 11. Défi pour l'auditoire d'événements en ligne - Solution: Comment êtes-vous allé ? J' espère que vous l'avez fait et peu importe que vous vous soyez trompé ou bien. L' important, c'est que tu as essayé et c'est comme ça que tu apprends et c'est pour ça que je suis là pour t'aider si tu te coincées. Alors, on va se fissurer. Regardons la solution ensemble. Tout d'abord, laissez-moi me retirer juste pour que vous puissiez voir l'écran en pleine taille. On y va. Et ça ne coupe pas la solution. Alors, on y va. On a nos boutons, mais rien ne se passerait, non ? Si nous revenons à notre navigateur ici. Et rendons ça plus grand. Si je clique sur ce bouton, rien ne se passe. C' est logique, non ? Parce que nous n'avons pas dit au navigateur de faire quoi que ce soit lorsque le bouton est cliqué. Et c'est pourquoi nous devons ajouter notre EventListener en ligne. Et tu te souviens comment le faire ? Quelle est la première étape ? Essayons. Nous devons ajouter les attributs à chaque bouton. Quel est l'événement que nous voulons écouter ? Ça s'appelle Onclick, non ? Bien que nous ayons cet attribut onclick en ce moment, rien ne se passera parce que nous avons réellement attaché un écouteur, mais nous n'avons pas défini de gestionnaire. Donc, si on clique sur ce bouton, encore une fois, rien ne se passera. Pour que nous puissions faire quelque chose arriver, nous devons nous assigner et le gestionnaire d'événements. Alors faisons ça. Affectons un gestionnaire d'événements dans yes, nous pourrions inclure tout notre JavaScript si mince encore, mais nous ne voulons pas le faire. Ça devient désordonné. Et comme je l'ai dit dans la conférence précédente, je veux que nous écrivions notre JavaScript dans un fichier séparé. Alors exécutons maintenant une fonction. Et appelons cette fonction parce que nous tournons tout a explosé. Cela appelle simplement cette fonction bleue et nous allons exécuter cette fonction. Sur le deuxième bouton. On peut faire exactement la même chose. Nous pouvons ajouter un écouteur de clic. Et dans ce cas, nous pouvons exécuter une fonction appelée lecture. Très simples chauves-souris si on va dans notre navigateur, ok, ce que je veux faire, c'est que je veux juste inspecter ce document et que je veux aller sur la console. Que va-t-il se passer si je clique sur, disons, que diriez-vous de tout ce qui est bleu ? Que va-t-il se passer quand je cliquerai sur ce bouton ? On devrait avoir une erreur. Lwe n'est pas défini parce que nous essayons d'exécuter une fonction JavaScript appelée bleu, mais nous n'avons pas encore écrit le code, qui est ce que nous allons faire maintenant. Dans notre code HTML, nous pouvons inclure une balise de script. Et bien sûr, notre script peut référencer notre propre fichier. Appelons simplement App.js. Et dans notre structure de dossiers, nous pouvons créer un nouveau fichier appelé app.js. C' est vraiment, vraiment simple et comment nous pouvons inclure notre JavaScript. Laisse-moi minimiser ça, donc on a un écran plus grand. Et quelle est la première étape ? Tu fais un pas en arrière. Nous avons défini tout notre HTML avec ce que nos boutons. Nous avons attaché un écouteur d'événement à ce bouton. Et maintenant, nous avons dit 50 handler. Nous voulons que l'analyseur exécute une fonction appelée loop et une fonction appelée read pour ce bouton. Donc c'est là que nous en sommes maintenant. Le point de vente va se rendre au HTML. Cela va déclencher cet événement lorsque l'utilisateur clique. Il va alors être à la recherche de cette fonction dans un nouveau fichier JavaScript et comment nous sommes. Alors, que voulons-nous qu'il se passe ? Eh bien, il y a plusieurs façons de faire cette solution. On peut le faire d'une manière très rapide et méchante. Dans ce cas, nous pouvons saisir notre corps d'une page entière et changer le goût d'un corps entier pour lire tout bleu. C' est l'approche paresseuse. Et dans de nombreux cas, lorsque vos pages très difficiles et dynamiques, aspirant et je veux changer les couleurs de certains éléments. Ce que je veux faire, c'est que je veux saisir les éléments que nous voulons réaliser. Ce sera la première étape dans notre JavaScript. Et si nous allons à notre fichier d'index ici, nous voulons changer le H1 frappant en bleu, et nous voulons changer ces deux paragraphes en bleu. C' est tout ce qu'on voulait faire. Donc, la première étape sera de saisir ces éléments. La deuxième étape consiste à changer les attributs de ces éléments en bleu ou en rouge. La théorie est aussi simple que ça. Alors nous allons rester coincés dedans. La première étape, en saisissant les éléments, nous voulons changer. Et bien sûr, nous voulons changer trois choses directement. Donc, je vais définir une variable JavaScript appelée title. Nous allons accéder à l'objet document. Cet objet document, comme vous le savez, est la racine de notre page Web et de notre document honnête. Nous avons beaucoup de propriétés. Celui que je veux utiliser cet élément get par ID. Et bien sûr, nous lui avons donné une pièce d'identité. Ensuite, nous retournons à notre page d'index. On peut voir qu'on lui a donné un ID de titre. Nos paragraphes ont alors une idée du premier paragraphe et du deuxième paragraphe. Donc nous pouvons aller ici et nous pouvons définir maintenant parallèle. Nous pouvons utiliser la même fonction. Mais oui, on a le premier paragraphe. Et bien sûr, nous pouvons dupliquer ça. On peut dire à ce parent. Et ce ne sera pas le premier paragraphe, ce sera le deuxième paragraphe. Aujourd'hui, nous allons, Nous avons littéralement terminé notre premier pas. La deuxième étape consiste à définir nos fonctions bleues et rouges. Commençons donc par la colle de fonction bleue. La viande de notre code est dans ces accolades bouclés. Maintenant, je veux que nous définissions une variable appelée couleur. Et nous allons attribuer la valeur de surprise, surprise bleu parce que c'est la couleur que nous voulons tout changer. Quelle est la prochaine chose que je veux faire ? Nous allons maintenant avoir accès à notre titre et nos deux paragraphes et changer la couleur en bleu. C' est vraiment aussi simple que ça. Et ce n'est pas un cours sur CSS, mais je suppose que vous avez une certaine connaissance de CSS et HTML. Et les nombreuses façons à nouveau d'écorcher un chat, je vais utiliser la méthode d'attribut SEC. Le premier argument de cette méthode est ce que nous voulons affecter ou ce que nous voulons accéder. Et bien sûr, nous voulons accéder à l'attribut de style de cet élément. Et bien sûr, le deuxième argument est la valeur que nous voulons donner. Dans ce cas, nous voulons changer la couleur, ne vous inquiétez pas. Donc on peut le faire de cette façon. On peut aller à la couleur. Et bien sûr, nous pouvons simplement ajouter nos covariables. On y va. Cela devrait fonctionner correctement ? Et si nous allons à notre navigateur, effacons simplement la console et cliquez sur ce bouton tout en bleu. Et boum, c'est un site vraiment amusant, mais en ce moment on n'a changé que le H. Nous n'avons pas changé les deux paragraphes. Alors faisons-le vite. On peut en excès une paire. On peut s'asseoir Il attribue à nouveau le style. Et maintenant, nous voulons changer la couleur. Mais cette fois, je veux utiliser des littéraux de modèle est une syntaxe plus récente. Et si vous n'êtes pas sûr qu'ils le sont, s'il vous plaît consulter mon cours de grand maître complet JavaScript. Si tu sais ce qu'ils sont, super, tu pourras suivre. Donc, ici, nous voulons affecter notre attribut de couleur et nous voulons que cela soit réglé sur la valeur. Bonjour. On y va. Et si je sauvegarde cela et retourne à notre navigateur, Cliquons sur ce bouton. Nous avons littéralement changé le H1 et nous avons changé le premier paragraphe. Oui. Et bien sûr, celui-ci va penser à faire, et c'est changer le paragraphe 2. Donc, nous allons faire est de dupliquer cette ligne et de la changer en parent pour laisser définir. Et si nous revenons à notre navigateur, cliquez sur le bouton, tout est changé en bleu comme nous nous y attendions, mission complète tous Diana, C'est tellement génial. Maintenant, revenons ici et faisons la même chose pour le rouge. En fait, tout ce que nous avons à faire est de copier cette fonction, coller cette fonction et de changer de bleu. À lire. C' est tout ce qu'on a à faire. N comme cette finale, c'est tout à coup que tu es d'accord avec moi. Et c'est si facile une fois que vous relâchez chien faisant ces choses. Et une chose que je veux mentionner est que nous pouvons dupliquer les fonctions comme celle-ci et définir deux variables appelées couleur dans chaque fonction parce qu'elles ont une portée locale ou une portée de bloc. Si vous n'êtes pas sûr de ce que je veux dire, encore une fois, s'il vous plaît vérifier mon cours de grand maître complet JavaScript. Mais ça devrait marcher maintenant, nous devrions être finis. Si on a notre navigateur, on a deux boutons. Laisse-moi juste enlever cette console. Si vous cliquez sur la première chose devient bleu, si nous cliquons sur la lecture, tout devient rouge. Vous auriez littéralement Janet et il nous a dit quelques minutes utiles si nous allons mieux, code fichier JavaScript comme notre fichier d'index. Voici donc un exemple pratique d'utilisation d'un écouteur d'événement en ligne pour attacher réellement un écouteur d'événement au bouton, l'événement onclick. Et puis nous avons également implémenté un gestionnaire d'événements dans un fichier JavaScript séparé sont si bien fait. Je suis super, super impressionné de m'amuser beaucoup. Mais maintenant, je veux revenir sur les autres méthodes que nous avons discutées et examiner des exemples de celles-ci. Rendez-vous à la prochaine conférence. 12. Propriétés en ligne - aperçu détaillé: Très bien, Nous avons donc discuté des gestionnaires d'événements en ligne. L' étape suivante consiste à discuter de l'autre type, et c'est ce qu'on appelle la méthode de propriété inline. C' est une façon très similaire d'ajouter un écouteur à un élément, à l'écouteur d'événement en ligne. Sauf ici, nous sommes assis la propriété d'un élément en utilisant JavaScript. Au lieu d'utiliser l'attribut en HTML, fait des scènes économiques. Donc, la configuration sera très similaire. Par exemple, nous avons toujours besoin de bouton Up élément HTML, mais maintenant nous n'avons plus besoin d'inclure la fonction onclick blue , par exemple, dans la maquette HTML elle-même. Mais nous avons encore besoin de définir un gestionnaire, n'est-ce pas ? Ce vrai document, cette fonction. Il restera assez similaire aussi. Mais maintenant, nous devons simplement accéder à l'élément bouton en JavaScript avant d'écrire la fonction en JavaScript. Donc, la première étape sera comme avoir deux axes. Ce bouton en JavaScript, oui, nous pouvons simplement utiliser la requête sélectionner un bouton. Bien sûr que nous pouvons y accéder très bien. Id, nom de classe, tag, nom, citrique, cetera. Oui, on vient d'utiliser le sélecteur de requête. Laisse-moi retourner cette page. Rappelez-vous, sous les deux approches et par les deux approches sont dénuées de sens. Approche de propriété en ligne par rapport à un EventListener en ligne, celui que nous avons vu dans la conférence précédente. Et ces deux approches que nous attachons finalement un écouteur d'événement est une propriété sur notre élément HTML. Les deux réussissent la même chose. Mais utiliser une propriété en ligne est légèrement mieux que d'écrire directement notre écouteur d'événement dans notre fichier HTML. Pourquoi est-ce mieux ? Eh bien, au moins maintenant votre maquette HTML est très bon marché et nous avons toute notre viande dans un fichier JavaScript. C' est juste plus facile, c'est plus maintenable. Mais en disant que ce n'est toujours pas la meilleure approche et qu'il souffre de certains des mêmes obstacles. Et une autre chose intéressante dans une autre chose très ennuyeux qui se passe est quand vous essayez asseoir plusieurs propriétés d'objet séparées au même élément, cela provoquera tout sauf le dernier à être écrasé. Donc, cela peut être assez ennuyeux. Chauves-souris, je suppose que tu sais quel est le prochain DEJ, toi, c'est vrai. Je veux regarder un autre exemple pratique vraiment cool. Rendez-vous à la prochaine conférence. 13. Défi pour les propriétés en ligne - Introduction: D' accord, tu me connais, j'adore les exemples pratiques et celui-ci est vraiment, vraiment amusant. Alors regardons l'écran derrière moi. Vous pouvez voir que nous avons juste un texte Lorem Ipsum avec un bouton disant appuyer sur le genou et montrer plus. C' était à propos de ça ? Eh bien, nous allons grand-mère souris. Et nous allons cliquer sur ce bouton. Vous pouvez remarquer quelques choses. Premièrement, nous avons élargi cette boîte. Alors maintenant, vous pouvez lire plus de texte. Et le texte sur le bouton n'a pas changé pour dire un effondrement de maintenant. Je peux cliquer, nous allons maintenant bien sûr il notre boîte et le mot maintenant sur ce bouton change pour développer dessus. Exemple cool. Et vous pouvez commencer à voir que nous sommes de plus en plus avancés ici. Mais ouais, encore une fois, je ne veux pas que nous utilisions la nouvelle méthode addEventListener. Je veux que nous construisions ça. Donc, vous avez vu dans le test précédent, nous avons utilisé le gestionnaire d'événements en ligne. Ici, je veux que nous utilisions la méthode de propriété inline d'ajouter des écouteurs d'événements. Et rappelez-vous, les deux approches sont très similaires. Tout ce que nous faisons est d'ajouter une propriété au bouton HTML ici. Mais nous le faisons trouver différentes façons dans ce cas sur ceux de le faire via JavaScript. Donc, c'est le goût d'introduction. Ça va être vraiment amusant, semblable à la précédente. Je vais écrire notre code ensemble. Très, très bon pour vous de coder avec moi. Mais encore une fois, vous n'avez pas à fournir la couleur du document squelette, document HTML pour vous comme une ressource à la prochaine conférence qui s'il vous plaît, je ne vous encourage fortement à coder avec moi. Et puis dans la prochaine conférence, nous allons évidemment étudier la solution ensemble. J' espère que vous vous amusez pourrait être et rester motivé. Et je te verrai à la prochaine conférence. 14. Défi pour les propriétés en ligne - Créer notre HTML: Alors on y va. Encore une fois. Je commence avec un modèle vide ici dans le code Visual Studio. Alors, on va se fissurer. Commençons à coder ceci. Il suffit d'aller dans notre dossier ici et créons un fichier appelé index.html. Et bien sûr, nous pouvons simplement commencer avec un modèle HTML5. Le titre peut être des propriétés en ligne. Débarrassez-vous de ça pour que vous puissiez voir ce qui se passe. Et c'est auparavant, Ouvrons le serveur en direct juste pour que nous puissions commencer à coder et voir ce que nous faisons en même temps. On y va dans un va me choquer, juste se débarrasser de moi pour que tu puisses voir ce qui se passe. Des audios. Alors on y va. Commençons à coder. Maintenant, je vais juste avoir un div avec un ID de contenu parce que c'est de cette façon que notre contenu va tous être une bonne pratique. Et puis je veux des balises de paragraphe et je veux lorem ipsum texte dans chacun d'eux. Donc on peut juste faire ça et Lorem Ipsum, on peut sauver. Et maintenant, vous pouvez voir sur un écran nous avons juste deux paragraphes avec le vieux texte Lorem Ipsum ennuyeux. Rien de spécial. C' est donc notre contenu principal. L' autre chose que je veux faire est que je veux ajouter ces petits droits de bouton, mais je veux juste vous montrer de nouvelles façons de faire les choses dans votre code. n'y a jamais une seule façon d'écorcher un chat. Donc ici au lieu d'utiliser un bouton, je vais juste utiliser une balise d'ancrage. Et je vais avoir une carte d'identité de spectacle plus. Passons à travers le HREF. Alors on y va. Et cela peut juste être précis moi et montrer plus. Et si on sauve ça, on dirait qu'un trou s'ennuie, n'est-ce pas ? Mais ne vous inquiétez pas, nous allons le coiffer sous peu. En fait, nous allons le styliser maintenant. Allons-y dans notre section de tête. Et encore une fois, au lieu d'écrire CSS en ligne, ce qui n'est pas une bonne idée, LET référence dans un fichier externe. Donc, incluons une balise de lien ici et nos oreillettes, si nous pouvons juste l'appeler, je ne sais pas, styles.css. Allons à notre structure de dossiers ici. Et c'est un fichier intuitif appelé styles.css. Alors on y va. Débarrassez-vous de cela et faisons juste notre site un peu plus funky. Ce que je veux faire, c'est que je veux accéder à notre élément corporel. Et nous allons juste changer l'arrière-plan pour toute la page. Triple E, manque de phares, gris doux. Ça a l'air sympa. Et puis ce que je veux faire, c'est que je veux accéder au contenu. Revenez à notre HTML. Tu te souviens de ça ? C'est cette balise div avec l'ID du contenu. Et cela ne contient que des paragraphes. Donc, dans une fonctionnalité, nous stylisons nos deux paragraphes. La première chose que nous pouvons faire est que nous pouvons changer la largeur pour dire 400 pixels. On y va. Donc vous pouvez voir que nous l'avons condensé à une taille plus petite. Et nous pouvons changer cet arrière-plan juste pour le différencier de l'arrière-plan réel de la page restante pour tripler F. Donc c'est blanc, c'est sympa. Nous pouvons bien sûr nous donner un peu de rembourrage. Je ne veux pas de rembourrage en haut. Supprimons ça. Ouais, c'est mieux. Et devrions-nous changer cette police ? Et je suppose qu'on peut. Prenons un cygne ici, Gill Sans ou moins. Ouais, allez, joliment, funky. Tu dois admettre, qu'est-ce qu'on peut faire d'autre ? Nous pouvons changer la couleur du texte réel. Vous pouvez voir que j'utilise des chiffres très faciles. Oui. C'est comme un gris plus foncé. Ce que nous pouvons faire maintenant, c'est que je veux déplacer tout ce qui prend tout ce div de contenu, au milieu de notre page. Donc, bien sûr, nous pouvons utiliser le genou de marge et la gauche et la droite peuvent être modifiés pour amener cette chose au centre. On y va, ça a l'air bien. Et maintenant, je veux ajouter une hauteur maximale de 100. Et soit ils sont juste un nombre aléatoire a 148 pixels. On y va. Et le débordement peut être caché. On y va. Donc vous pouvez voir que nos Takes sont coupés maintenant, ce qui est logique, non ? Le seul but de l'exercice. Et comme je l'ai mentionné, ce n'est pas un cours sur CSS, ok ? Mais je veux juste ajouter une propriété CSS de transition ici. Rechercher une sorte de transition en douceur quand elle s'ouvre à la hauteur maximale. Ok, donc je veux ajouter une transition. Je veux évidemment que cela s'applique lorsque nous affectons la propriété max height. Et disons juste 0,7 seconde. Alors on y va. C' est notre div cool. Maintenant, je veux juste styler cette étiquette d'ancrage que nous avons là, mais coiffer ça et faire ressembler à un bouton. Premièrement, comment y accéder ? Eh bien, si nous allons à notre page d'index ou si nous l'appelons, nous avions un identifiant de show plus. Allons aux styles. Et regardons ça ici. Montrer plus. On y va. Changons d'abord ce contexte pour dire 36, a2 et 167. C' est une belle couleur bleue. J' aime ça. Et puis on peut changer ce texte en blanc parce qu'on a attrapé que je peux à peine le lire maintenant. On y va. Ça a l'air mieux. Il a changé la famille de polices pour qu'elle corresponde à celle ci-dessus. Famille de polices. Ouais, ça devrait avoir mieux. Maintenant, bien sûr, nous pouvons ajouter du rembourrage pour le rendre juste meilleur. Nous pouvons également définir une largeur de 100 et 40 pixels. Rendons la police un peu plus grande. Donc nous pouvons aller 18 pixels. Et juste pour être pédant, je veux mettre le texte dans le bouton au centre. Alors, prenons une ligne jusqu'au Siento. Vous ne remarquerez probablement pas beaucoup de différence. Oui, je n'avais pas remarqué quelque chose de différent. Et puis ajoutons des marges pour mettre cette chose au centre. Donc, je veux ajouter aussi une marge au sommet. Et puis bien sûr, nous allons voir à cette chose. Et puis le curseur, je voulais souligner, hmm, pourquoi ce bouton ne se fritt-il pas lui-même ? Oh, tu sais ce que je n'ai pas fait ? Je n'ai pas défini cela comme un élément de bloc. Ok, on doit afficher le bloc. Et ça devrait marcher. Encore une fois. Heureusement que je m'inquiétais un peu là-bas pendant une seconde. Ok, cool. Voici notre équipe de squelettes. Bien que c'était très, très cool, nous avons notre configuration. Mais évidemment que se passe-t-il maintenant si je clique sur ce bouton, balise d'ancrage ? Rien ne se passe. Et c'est ce que je veux que tu essaies de résoudre maintenant. Et alors rappelez-vous ce que nous voulons faire, voulant utiliser des propriétés en ligne, aka vouloir réellement mettre tout dans notre fichier JavaScript et ajouter une propriété appelée onclick à cette balise d'ancrage dans notre JavaScript. Et puis bien sûr, nous voulons tout ouvrir et tout ça. Alors donne-le un coup d'envoi. Si vous ne connaissez pas la réponse, ne vous inquiétez pas, c'est pour ça que je suis là. Et dans la section suivante, amusez-vous et faisons la solution pour l'obtenir. Je ne peux pas attendre. 15. Défi pour les propriétés en ligne - Solution: Ok, donc nous y voilà. C' est là qu'on s'est arrêté la dernière fois. Et si tu vois si j'appuie sur ce bouton, rien ne se passe. Quelles sont donc les mesures que nous devons prendre pour que cela fonctionne ? Eh bien, d'abord, nous devons obtenir les choses de notre DOM. Nous devons saisir ce contenu div. Pourquoi devons-nous récupérer leur contenu ? Div se souviendra maintenant que nous avons limité sa hauteur. On l'a coupée. Si nous inspectons cet élément. Et nous regardons en fait cette div elle-même. Vous pouvez voir dans le coin inférieur droit que nous avons limité la hauteur de cette div à un 148 pixels. Et oui, nous avons édité un remplissage de 20, ce qui nous donne un peu HDL, qui est sauvagement planer dessus. Nous pouvons voir que la hauteur est un 168, c'est un 148 plus le rembourrage. Et si nous revenons à notre code, c'est exactement ce que nous avons spécifié dans ce contenu. Div, hauteur maximale, un 148 pixels et un rembourrage de 20. Et si nous allons à notre HTML, cette idée de contenu est enveloppée dans notre balise div. Et nous avons limité à haute température. Donc si on retourne ici, c'est la première chose qu'on doit faire. Nous devons saisir cette boîte de contenu et changer sa hauteur lorsque le bouton est cliqué. Ce qui m'amène à la deuxième chose dont nous avons besoin pour avoir un filet, c'est ce bouton. Et nous devons accéder à ce bouton pour deux raisons. Premièrement, lorsque nous cliquons sur ce bouton, nous voulons changer le style de ce div. Et deuxièmement, nous voulons aussi changer le texte de ce bouton sale. Donc commencer à avoir du sens. Je l'espère. Mais si ce n'est pas le cas, ne vous inquiétez pas, nous allons y entrer maintenant. Alors, quelle est la première chose qu'on devrait faire ? Eh bien, la première chose que je veux faire est quand on clique sur ce bouton, je suis allé appliquer une certaine clause, cette div entière. Et puis la clause doit l'ouvrir. Il doit rendre cette hauteur maximale plus grande. Donc la première chose que je veux faire dans notre éditeur de texte ici est que je veux aller à nos styles et un 12 définir un style qui ne va s'appliquer que lorsque la boîte est fermée et que nous cliquons dessus pour ouvrir. C' est un peu logique. Ne vous inquiétez pas si ça ne dépend pas exactement de ce que je veux dire sous peu. Donc tout ce que je veux faire, c'est que je veux récupérer notre boîte de contenu parce que c'est ce que nous voulons affecter. Et nous allons ajouter ce cours, et je vais juste appeler ça un cours ouvert pour l'instant. Et quand leurs cours sont activés, ce que nous voulons faire, c'est de vouloir coller l'armée de la hauteur maximale. Et nous voulons que cette boîte passe de 148 pixels à beaucoup plus grand, beaucoup plus haut. C' est pourquoi j'utilise juste un nombre arbitraire, 1000 pixels. Et bien sûr, je voulais être une belle transition en douceur. Lorsque la propriété max height est modifiée, disons que cela prend deux secondes. Comment ça a l'air ? Donc nous avons tous nos CSS. Maintenant, nous devons réellement ajouter nos écouteurs d'événements et nous le faisons avec JavaScript. Donc, tout ce que nous devons faire ici, c'est que nous devons ajouter une balise de script. Et encore une fois, cela appelle simplement un fichier ab.js application. Nous pouvons accéder à notre structure de dossiers ici. Vous pouvez voir que je n'ai que deux fichiers ici, index et CSS. Nous allons devoir faire maintenant est juste d'ajouter notre fichier app.js et moi fermer ceci. Et comment nous pouvons commencer à écrire le bœuf au cœur de notre site. Et l'étape 1 pour se souvenir de ce que c'était. C' est vrai. On doit prendre l'élément div et le bâton. Donc, je vais définir une variable dans les appels JavaScript. Je ne sais pas, appelons-le contenu parce que c'est là que se trouve notre contenu principal et qu'il a un identifiant de contenu. Nous accédons à notre objet document. Sur cet objet, nous accédons à sa propriété, obtenez élément par ID. Et bien sûr, l'ID que nous avons spécifié était appelé contenu. Alors on y va. Voilà notre contenu. Maintenant, je veux saisir notre bouton et je sais que nous n'avons pas vraiment rapide des éléments de bouton End. Nous l'avons enveloppé dans une étiquette d'ancre. Je l'ai fait juste pour vous montrer différentes façons de faire la même chose. Mais dans ce cas, je veux quand même appeler ça un bouton. Encore une fois. Nous accédons à notre document. Nous accédons à cette propriété, obtenons élément par ID. Et comment l'appelons-nous encore ? Allons à notre HTML. L' idée de montrer plus. Ici, nous avons IoT Show. Aujourd'hui, nous allons, nous pouvons prendre nos deux objets. Et mes chers amis, c'est le cœur de cette étape. Et c'est ajouter un événement, écouteur et un gestionnaire via l'approche de propriété en ligne. Rappelez-vous comment le faire. Tout d'abord, comment voulons-nous ajouter notre écouteur d'événement sur le bouton ? Nous voulons qu'un accord soit déclenché chaque fois qu'un utilisateur clique sur ce bouton. Le point de départ est d'accéder à notre bouton. Maintenant, nous avons notre bouton. Ce que nous devons faire maintenant, c'est que nous devons ajouter cela en non-propriété. L' écouteur d'événement. Comment on fait ça ? Nous allons utiliser la notation par points et nous voulons ajouter un écouteur de clic sur ce bouton, ne vous inquiétez pas. Et puis je vais utiliser la nouvelle syntaxe de flèche pour définir une fonction qui va être déclenchée automatiquement lorsque l'événement est engagé. Donc toute la viande de notre code est dans ce bloc. À ce stade, le bouton a été coché. Et maintenant, on a deux fourches dans l'année de la route. La boîte est déjà ouverte et les boutons ont déjà été découpés et vous la reprenez pour la réduire. Tout. La zone est déjà réduite et vous cliquez sur le bouton pour la première fois pour la développer. Et chaque fois que vous obtenez ces fourches dans la route, chaque fois que vous obtenez ce genre de boîtes ouvertes ou si les boîtes se sont effondrées. C' est vrai, tu l'as deviné. Nous devons utiliser les déclarations if. Comment écrire ces déclarations if ? Tout il y a quelques façons de le faire. Comme toujours, continuez à dire les nombreuses façons d'écorcher un chat quand il s'agit de programmer. Je vais juste garder ça très simple. Et je vais supposer que la boîte est fermée, que les boutons n'ont jamais été connectés. Et si le bouton n'a jamais été cliqué, nous savons que le nom de classe d'open ne serait pas le. Par exemple, si nous allons au fichier d'index sur la balise div saluée ID du contenu n'a pas de classe, n'est-ce pas ? Nous n'avons pas ajouté de classe. Tu te souviens de la feuille de style ? Nous avons cette classe ouverte qui change la hauteur maximale de cette div. Mais nous n'avons pas ajouté cette classe ouverte. Chaque infirmière que nous connaissons est que la dose de contenu est fermée. Son ClassName va être égal à rien. Ça va être vide. Alors dans ce cas, qu'est-ce qu'on veut faire ? Eh bien, nous voulons élargir la boîte. Ça fait depuis, non ? Et quand nous élargissons la boîte, comment le faire ? Nous devons ajouter le nom de classe ouvert à elle. Donc tout ce qu'on a à faire est d'accéder à cette div. Nous devons ensuite accéder à sa propriété ClassName parce que nous voulons qu'ils modifient le nom de la classe et nous sommes allés affecter cela à la classe d'open. Maintenant, nous savons que la boîte va se développer. La deuxième chose que nous voulons faire, n'oubliez pas, car nous voulons accéder à notre bouton et changer sa propriété HTML interne pour s'effondrer maintenant. Donc, nous l'avons là. C' est si les boîtes se fermaient et maintenant on vient de l'ouvrir. Bien sûr, nous devons faire face à l'autre scénario en ce sens qu' il est ouvert et que vous vouliez qu'il s'effondre. Donc on doit sortir. Et maintenant, bien sûr, nous voulons effondrer la boîte. Et comment on effondre la boîte ? Eh bien, la première chose que nous devons faire est que nous devons accéder à tout le contenu de la balise div. Nous devons ensuite accéder à sa propriété de nom de classe et nous devons lui donner une valeur de rien et cela réduira automatiquement la boîte. Ne vous perdez pas. Tu te souviens pourquoi PR avant la boîte ? Eh bien, nous avons ces styles et notre feuille de style. Lorsque cette balise div a la classe ouverte, nous savons que sa hauteur maximale peut être jusqu'à 1000 pixels. Alors que lorsque nous supprimons cette classe ouverte, elle revient aux styles CSS par défaut, qui a une hauteur maximale de 148 pixels, ce qui signifie qu'elle va rétrécir, le rend. Revenons donc à notre fichier JavaScript. La dernière chose que nous avons à faire, Vous l'avez deviné que nous devons changer la propriété HTML interne sur notre bouton pour développer. Comment un médicament et cette idée d'amis devraient fonctionner ? Allons à notre navigateur. Actualisez et cliquez sur cette vision de bouton. C' est génial ? Tu dois admettre que c'est joli, assez épique. Ceci est rafraîchit ce que je peux faire pour le rendre plus genre d'extrême est que nous pouvons réellement ajouter plus de texte Lorem Ipsum ici et éditer à nouveau. Revenons à notre navigateur et nous allons bouton. Ils se diviseraient plus. Vous pouvez juste le voir un peu plus. Mettez la bêta. C' est génial, n'est-ce pas ? Tout fait ? Sérieusement. Et vous pouvez commencer à voir comment une fois que vous comprenez les bases et les fondamentaux, nous pouvons continuer à grandir et devenir de plus en plus avancés. Et ça fait des scènes au fur et à mesure que nous continuons et ne se perdons pas dans les détails. Souviens-toi de ce qu'on a fait. Nous venons d'attacher un écouteur d'événement à cette expansion, eh bien ce bouton ici. Nous avons ajouté un écouteur d'événement qui écoute un événement de clic lorsque les boîtes ont fermé son état actuel. Maintenant, sur l'écran, nous savons que nous voulions alors ajouter une clause d'ouverture lorsque ce bouton est cliqué et réellement le prouver à vous. Examinons ce document ici. Ouvrons le corps. Et vous pouvez voir ici il y a 0 nom de classe sur pour le moment qui cherchent à rien ou rien. Si nous cliquons sur ce bouton, n'oubliez pas que nous éditons un avantage que le bouton d'aujourd'hui. Lorsque ce bouton est cliqué et que les cases se réduisent, nous allons ajouter un nom de classe appelé Open. C' est génial ? Nous avons juste édité dynamiquement un nom de classe ouvert. Et bien sûr, lorsque cela se produit, nous avons appliqué un ensemble de styles différents pour ensuite faire le contenu qui le rend beaucoup plus élevé. Oui, nous éditons un peu de style CSS. Nous éditons une adoption de transition, donc cela ne s'est pas produit. Alors arrive graduellement. Nous changeons également ce code HTML interne du bouton. Donc, il y a beaucoup de choses que nous avons faites dans cette conférence et nous allons nous appuyer sur elle. Donc je suis super, super excité de continuer. A bientôt. 16. La méthode addEventListener() - Aperçu détaillé: C' est le moment que nous attendions tous, et qui passe à la dernière édition de l'API DOM en ce qui concerne les gestionnaires d'événements et les écouteurs d'événements, c'est la méthode add event listener. C' est ce que l'écouteur d'événement est tout au sujet des fissures et l'écouteur d'événement surveille un événement sur un élément. Nous n'attribuons aucun événement directement sur une propriété de cet élément. Rappelez-vous les deux autres approches dans les gestionnaires d'événements en ligne et les propriétés et approches en ligne que nous attachons une propriété à l'élément. Et une propriété se trouve donc être l'écouteur d'événement que ce n'est pas le cas ici. Au lieu de cela, nous utilisons la méthode addEventListener pour attacher, vous l'avez deviné, un écouteur et un gestionnaire. Et c'est assez intuitif. Cet écouteur d'événement, mur, écoute ou surveille un événement en cours de déclenchement sur l'élément HTML auquel nous avons attaché. n'y a rien de sinistre ou de bizarre là-dedans. Maintenant. Mais à ce stade, vous vous demandez peut-être, est-ce addEventListener de JavaScript, est-ce une partie du langage JavaScript ? Et la réponse courte à cette question est, non. Ce n'est pas de JavaScript. En fait, c'est de l'API DOM. De quoi est-ce que je parle quand je continue de parler de ces API ? Wall, quand nous écrivons du code, il y a tout un tas d'API Web que nous pouvons utiliser dès la sortie de la boîte. Quels sont certains de ces API et de parler quand nous avons h avec ce que l'API d'historique, stockage, WebSockets, API de système de fichiers. Ils sont une tonne d'entre eux. Et ce sont tous des types distincts d'API, des systèmes distincts qui s'exécutent dans le navigateur. Et bien sûr, l'un d'entre eux est l'API DOM et nets façon cet écouteur d'événement add, il vient de. La raison pour laquelle tant de gens peuvent se confondre entre ce qui est JavaScript et ce qu'est l'API DOM, est que les API Web sur la plupart utilisées retirent le script. Mais comme je l'ai mentionné précédemment, nous n'avons pas à utiliser strictement JavaScript pour manipuler et accéder à ses API Web. C' est juste que ça arrive à 99 pour cent du temps. Nous utilisons JavaScript pour ce faire. Et je pense que c'est là que la confusion doit y arriver. Mais gardez à l'esprit que AddeVentListener n'est pas JavaScript, mais ok, Déjà, vous l'avez. Allons passer à autre chose. La question que vous posez probablement maintenant est cool. Comment fonctionne ce gestionnaire d'événements ? Eh bien, le point de départ est d'utiliser la syntaxe réelle pour écrire les mots add event, écouteur. C' est un point de départ. Mais malheureusement, ce n'est pas aussi simple que cela. La méthode addEventListener prend deux paramètres obligatoires. Eh bien, qu'est-ce qu'ils sont ? Le premier paramètre est l'événement, fait un brin de sens et les veines bien sûr, est l'action que nous voulons surveiller. Par exemple, lorsque nous utilisons les exemples d'allée précédemment, nous surveillions l'événement onclick, qu'il s'agit d'une tonne d'autres événements. On va y entrer sous peu. C' est donc le premier paramètre. Quel est le second paramètre ? Dans la communauté de programmation et dans cette méthode, il s'appelle la fonction de rappel. Et je ne veux pas que tu te sentes intimidée par tous ces grands mots fantaisistes. La fonction de rappel est juste notre gestionnaire d'événements. En d'autres termes, ce qui est important, cette fonction de rappel prend automatiquement le périmètre de la veine. Et ce paramètre a une propriété appelée target. Et la cible, alias l'élément qui trouve l'événement, nous sera automatiquement donnée dans cette fonction de rappel. Donc ce que je veux dire par la cible et l'élément qui a déclenché l'événement. Eh bien, si nous nous débarrassons de tout ce qui est à l'écran pour l'instant, vous serez d'accord avec moi qui ajoute l'écouteur d'événement doit être ajouté à quelque chose, non ? Il doit être ajouté à un élément. Et c'est cet élément qui est appelé la cible est un peu logique. Ne vous inquiétez pas, on va entrer beaucoup plus en détail dans ce cours. Et je veux regarder des exemples évidemment. Mais avant, je veux juste parler un peu plus de ce sac. Qu' est-ce qu'une fonction de rappel ? Eh bien, passons à la prochaine conférence pour le savoir. 17. Qu'est-ce que une fonction de rappel: Avant d'aller de l'avant et de commencer à relever des défis et à examiner des choses nouvelles, améliorées et plus avancées. Comme je l'ai dit, OK, je veux juste prendre du recul et discuter de ce rappel un peu plus en détail. Souviens-toi que ne sois pas intimidé. Un rappel est juste une fonction qui est annulée à quelque chose d'autre s'est passé. C' est tout ce qu'une fonction de rappel est. Et nous savons que le premier argument de la méthode add event listener était l'événement que nous voulons écouter, par exemple, un événement onclick. Le deuxième argument était le gestionnaire d'événements, qui dans notre cas, nous savons qu'il s'agit d'une fonction de rappel. Cette fonction de rappel sera automatiquement exécutée lorsque l'événement se déclenche. Rappelez-vous que la définition d'un rappel est une fonction qui est appelée après que quelque chose s'est passé avec quelque chose dans notre cas est que l'événement se déclenche. Et ce qui est vraiment cool à propos de ce rappel spécifique lorsque nous utilisons la méthode addEventListener, c'est que nous obtenons automatiquement beaucoup de données sur cet événement, ce qui peut être vraiment, vraiment utile. Quel genre d'information obtenons-nous ? Des choses comme la cible où l'événement s'est produit, le type d'événement qui s'est produit , etc. Au lieu de simplement regarder les mots à l'écran, passons à Visual Studio Code. Cordons rapidement un rappel, et voyons ce qui nous est réellement retourné. Voyons cela en action. Très bien, Voyons cette fonction de rappel en action. Très, très simplement. J' ai commencé ici avec un fichier index.html vide. Et nous allons coder un écouteur d'événement très rapide. Et voyons ce qui est en fait transformer les baptêmes dans un sac d'école. Nous allons vouloir s'asseoir une page HTML très simple dans le corps. Prenons juste une balise H1. Et le frapper peut juste être des rappels sont possibles. Voilà, c'est tout ce que je veux que notre HTML contienne. Et ajoutons simplement un écouteur d'événement sur cette balise 81. Et voyons ce qui nous est remis. Donc, bien sûr, nous devons ajouter notre script. Oui, la première étape est bien sûr, cette étiquette H1. Donc, définissons un comme des documents et une mauvaise utilisation du sélecteur de requête. Et attrapons notre H1. La prochaine chose que nous voulons faire est que nous voulons attacher la méthode add event listener sur cet élément H1. Donc, nous commençons par accéder à notre élément H1 et automatiquement, et nous rappelons que ces API parlent, il a automatiquement cette méthode add event listener disponible pour nous tout de suite sur cet élément. Très, très cool. Rappelez-vous qu'il faut deux arguments. Le premier argument est l'événement, et l'événement ici est l'événement click. Et quel est le deuxième argument ? C' est vrai, c'est la fonction de rappel. Donc, je vais juste utiliser la syntaxe d'erreur une fois de plus. Voici notre fonction flèche. Ce deuxième argument est notre rappel. Ne te fais pas intimider. C' est tout ce que c'est. Juste la fonction va être exécutée lorsque cet événement se produit. Et rappelez-vous ce que nous disions que cette fonction de rappel a automatiquement les données d'événement. Laissez-moi vous montrer ce que je veux dire. Nous pouvons simplement passer dans le cas où une école de données. Et bien sûr, ce que nous pouvons faire, c'est que nous pouvons simplement consoles déconnecter ces données. Cette variable que je mets pourtant ces données nous sont données automatiquement. Tu peux l'appeler comme tu veux. Vous pouvez l'appeler a, vous pouvez l'appeler B, vous pouvez l'appeler c. Nous avons juste l'appeler points ou n'importe quelle variable nous définissons un nom qui nous est donné automatiquement par la fonction de rappel lorsque cet événement va bien. Laissez-moi vous montrer ce que je veux dire. Sauvons ça. Allons à notre navigateur. Inspectons ça. Rafraîchissons. On y va. Nous avons nos rappels de page sont également net, notre balise H1. Il y a une console. Si je clique sur celui-ci, qu'est-ce que tu penses qu'il va se passer ? Nous allons tout d'abord, l'événement click sera déclenché. Et puis deuxièmement, nous avons un journal de démarrage pour console les données que nous obtenons à partir du rappel. On devrait voir le journal de la console de leur fille. Je clique dessus. Le nous y allons. Vous pouvez voir ici que la fille que nous obtenons est cet événement de souris. Nous savons que l'événement click se produit à partir de la souris. Et vous pouvez ouvrir ça et nous avons beaucoup de propriétés et de méthodes. C' est génial ? Et dans ces veines de Mousey, nous avons cette propriété appelée cible. Rappelez-vous que la cible était l'élément réel qui trouve l'événement lui-même. Dans ce cas, la cible est la balise H1. Alors on y va. C' est cool ? Et rappelez-vous juste quand nous utilisons cette fonction de rappel, nous recevons beaucoup de fille sur l'événement réel lui-même automatiquement. Donc, cela nous donne beaucoup de puissance, beaucoup de flexibilité en tant que programmeurs, parce que nous avons plus d'informations. J' espère que ça commence à avoir du sens. C' est assez dit, passons à autre chose. 18. Défi pour les auditeurs d'événements - Introduction: Vous savez que j'aime les exemples , c'est pourquoi je dois en faire un autre. Et nous avons vraiment vu quelques exemples vraiment cool dans ce cours que vous pouvez appliquer pratiquement à vos propres sites Web. Ce n'est pas une exception et c'est très utile parce que vous allez apprendre différents types de techniques. Ouais, ça va être une conférence amusante et amusante. Qu' est-ce que tu ne veux pas que tu fasses ? Eh bien, vous pouvez voir que c'est le cercle cliquez sur le site Challenge. Et comme je suis sûr que vous l'avez deviné, nous devons cliquer sur le cercle. Lorsque l'utilisateur clique sur le cercle, les couleurs changent. Plutôt nifty. Les chauves-souris. Il y a peu de choses que je veux que vous fassiez sur le site. Tout d'abord, je veux que vous ajoutiez que prend en dessous du cercle. C' est une manipulation DOM pure, dynamique. Je ne veux pas que vous arrêtiez qui prend dans votre HTML. Deuxièmement, je veux que vous ajoutiez cette dynamique de cercle. Troisièmement, je veux que vous ajoutiez un auditeur au cercle, particulier un événement d'écoute critique à ce cercle. Et je veux que vous utilisiez la méthode AED est huit écouteurs. Et enfin, nous devons ajouter un gestionnaire, non ? Et qu'est-ce qu'on veut que ce gestionnaire fasse ? Nous voulons que le gestionnaire change la couleur du cercle. Mais je veux que tu le fasses au hasard. Je serai honnête avec toi. Je ne m'attends pas à ce que vous sachiez comment faire ça, mais donnez un coup de pouce, essayez d'aller aussi loin que vous le pouvez. Et puis, comme mes exemples précédents, je suis sûr que vous êtes très familier avec le processus. La prochaine conférence, je vais coder la structure générale du scientifique. Ensuite, le lien suivant, John va passer par la solution avec vous. Donc ça va être très amusant. Nous allons devoir excès d' objet JavaScript juste pour créer une sorte de nombre aléatoire ici parce que nous voulons des couleurs aléatoires. Donc ça va être génial plus tard. Je suis vraiment, vraiment excité. 19. Défi pour les auditeurs d'événements - Créer notre HTML: Comme toujours, nous commençons par rien. Désolé, Faisons craquer et créons juste un dossier ici appelé index.html. Peut faire ce petit. Et on va se fissurer. Et cela commence juste avec un modèle HTML5. Le titre du document peut être un défi de cercle. La première chose que je veux faire, c'est que je veux créer, on sait quoi, laisse-moi ouvrir le navigateur. Alors commençons le serveur en direct. On a pour voir ce qu'on fait. C' est toujours, toujours utile. Donc, la première chose que je veux faire est que je veux créer un div avec un ID de main. Et ce div peut juste dire, bienvenue à cercle, cliquez et enregistrer cela et ils iraient, vous pouvez voir le résultat dans notre navigateur. Et puis je veux un autre div décrivant juste à l'utilisateur ce que nous voulons qu'ils fassent. Et nous pouvons juste dire, cliquez sur la balle ronde pour changer sa couleur au hasard. On y va, tout a du sens. Et maintenant, je veux qu'on crée notre véritable cercle. Et je me souviens de ce que j'ai dit dans la conférence précédente. Je veux que tu fasses ça dynamiquement. Donc tout ce que je veux faire, c'est que je veux avoir un div avec un ID de wrapper. Et c'est là que je veux qu'on mette notre cercle. En fait, nous pouvons avoir un commentaire ici disant insérer le cercle ici. Et nous pouvons peut-être le mettre dans un div appelé cercle avec une idée de cercle. On y va. Cela peut être un div vide parce que comme je l'ai mentionné, nous voulons le faire dynamiquement. Stats notre div qui va contenir un cercle et tout ce que nous devons faire pour réellement insérer le cercle ici est d'appliquer des styles à lui, styles CSS, nous le ferons bientôt. La dernière chose est que nous devons insérer le texte sous le cercle, ne vous inquiétez pas. Et encore une fois, je vais juste mettre cette note en bas dans une balise div et cette balise div et avoir un ID de notes. Et encore une fois, nous pouvons avoir une balise div vide pour notre livre est que je veux que nous ajoutions ceci, cette fois via JavaScript dynamiquement. Donc, nous y allons, Voici notre HTML. Vous pouvez voir à quel point c'est simple. Nous ne sommes pas trop compliqués ici, mais c'est un exercice très, très précieux. Ce que je veux que nous fassions maintenant avant que j'arrête cette conférence, c'est que je veux que nous ajoutions juste un site de possession parce qu'il semble assez mélange. Donc, dans l'élément head, Lions à un fichier CSS externe, et nommez-le sous styles.css. Donc, si nous allons juste à notre projet Groot, Ouais, et nous incluons un autre fichier appelé styles.css. Nous devrions être en mesure de le styliser assez bien. La première chose que je veux faire est que je veux avoir un fond vraiment cool, presque une sorte de dégradé de look et de sensation. Donc, ce style notre HTML. Et c'est une propriété fictive de fond. Et je veux accéder à un style appelé gradients radiaux. Et il faut ici divers arguments. On va passer ça, suffit de le rendre gris et noir. Tellement simple. Sauvegardez ça. Et on y va. Je sais que c'est mieux maintenant que ça va aller mieux. Je te le promets. Post nous pouvons à peine lire prend délicieux marque, Je vais prendre large. On y va. Au moins, on peut lire ça prend mieux. Ajoutons un peu de rembourrage au sommet de la perspective du tuyau. Oui. Et il devient plus grand et passons maintenant ou ne prend pas au centre afin que nous puissions aller au centre de texte-aligner le centre. On y va. Ça m'attrapera. On n'est toujours pas tout à fait David, on l'a compris. Je veux maintenant styler notre div avec l'ID principal. Revenons à notre HTML. C' est là. Bienvenue dans le cercle. Cliquez sur. Je veux annoncer le style que nous voulons l'identité du Maine. Et comment savoir que nous pouvons polir le poids, nous pouvons le rendre audacieux. Et peut-être que nous pouvons augmenter un peu la taille de la police. J' essaie juste de faire des choses qui le rendent un peu meilleur. On y va. Et maintenant, je veux coiffer le représentant. Donc si on va à l'index, je te rappellerai ce que c'est. Nous avons cette div avec l'ID de wrapper, qui va tenir notre cercle. Appelons ça. Donc, nous avons besoin de l'ID de. Et encore une fois, nous voulons que cela soit placé au centre. Donc, nous allons faire des marges et modifier pour gauche et droite. Et cela vient de spécifier la hauteur et la largeur. La hauteur est juste faire, je ne sais pas, 12 lui et la largeur. Et faisons-le un peu moins. Faisons un adolescent lui. D' accord. Donc vous pouvez voir qu'il commence à épargner Abbas. L' acte commence à paraître beaucoup mieux. Et bien sûr, la prochaine étape est de faire notre cercle, de réellement l'afficher. Oui, faisons-le. Rappelez-vous que la div avait un cercle idéal. La première chose que je veux faire sur le cercle, et cela va devenir très important, surtout dans la prochaine conférence est sur 12, changer sa couleur, sa couleur de fond. Et D sont différentes façons de le faire. Je vais avoir une conférence bonus sur la façon dont tout cela fonctionne. Pour l'instant, réalisez simplement que je vais utiliser le format de couleur hexadécimale. C' est ce que je vais faire. Changeons la couleur d'arrière-plan et la valeur insérée non-élites. Vous devez toujours commencer par le hashtag quand il s'agit de valeurs Higgs. Et maintenant, il se compose de caractères séparés. La couleur que je vais faire est comme une couleur orangée pour commencer. Ça va être si 63 et puis 47. On sauve ça. Nous avons notre couleur d'arrière-plan, mais gardez à l'esprit cette colombe, pourquoi nous ne voyons pas une couleur d'arrière-plan maintenant est que ce div lui-même n'a pas de hauteur ou de largeur. C' est donc à une hauteur de 200 pixels et une largeur de 200 pixels. Comment ça a l'air ? On y va. C' est un carré, c'est ce qui se passe. Ne vous inquiétez pas, nous allons en faire un cercle maintenant. Tu sais comment en faire un cercle. On doit juste simuler le rayon de la frontière, n'est-ce pas ? Rayon de bordure. Et cela a été fait à 100 pour cent. On y va. C' est maintenant le cercle. Et pouvez-vous voir les cercles presque toucher il est toucher le goût clic sur son bord change de couleur. Je n'aime pas ça. Alors ajoutons juste une marge aux 20 pixels du haut. On y va. Puis historien pour avoir l'air bien. Et la dernière chose que je veux faire, c'est qu'on a nos notes en bas à droite. Je veux juste que nous le stylisions même si nous n'avons pas édité le texte. Donc ce que je veux faire, c'est que je veux prendre ce mot et que je ne veux pas qu'il soit collé au cercle, je suis allé pousser vers le bas. Encore une fois, on va juste falsifier le haut de la marge. Ça devrait avoir l'air bien. Si ce n'est pas le cas, on le changera plus tard, mais on y va. C' est là que je veux tout laisser à toi. Je veux te donner l'argent. Ça va être génial en ce moment. Évidemment, quand je clique sur ce cercle, ne fait rien. Je veux que tu fasses ça. Et je veux que vous incluiez votre code de gestionnaire d'événements dans un fichier JavaScript séparé. Nous devons commencer à nous habituer aux bonnes pratiques. Et pensez à ce que vous avez à faire. Voulant attacher un écouteur d'événement à ce cercle div avec l'id du serveur. Vous voulez ensuite attendre pour quel événement et essayer l'événement click. Et puis nous allons devoir générer une couleur aléatoire. Et si vous allez à notre feuille de style ici et vous regardez notre cercle, couleur de fond, cette valeur x. Il doit être généré au hasard. Et ça pourrait être un peu délicat pour toi. Ne vous inquiétez pas, je vais le faire avec vous à la prochaine conférence. Je vais avoir deux parties n'avoir jamais de conférence bonus sur exactement comment notre code va fonctionner. Parce que c'est vraiment fascinant et qu'il s'améliore. 20. Défi pour les auditeurs d'événements - Solution: Woo hoo, j'espère que tu t'es amusé et j'espère t'en aller. Je dis toujours que ça n'a pas d'importance si tu l'as bien ou mal. Le fait est que vous avez essayé. Donc, nous y voilà. Je n'ai rien fait depuis la dernière conférence. Et commençons à couper et ça ne fait pas la solution ensemble. Tout d'abord, laissez-moi me débarrasser de moi pour que vous puissiez mieux voir l'écran. Qu' est-ce qu'on fait ? Quel est le point de départ ? Will ? Tout d'abord, ajoutons cette note dans cette balise div avec l'ID de note de l'étudiant dynamiquement en premier. Et rappelez-vous ce que j'ai dit sur un test pour inclure code du gestionnaire de lois dans un fichier JavaScript séparé. Donc, tout ce que nous avons à faire ici, c'est que nous devons insérer une balise de script. Oui, nous devons trouver un autre fichier. Appelons simplement app.js. On peut aller à notre structure racine ici. Nous pouvons ajouter un fichier appelé app.js. On y va. Fin à ajouter. Cela prend dynamiquement en bas, est le plus simple, et c'est pourquoi je veux que nous commencions par cela. Tu sais comment on ferait ? Il a un fichier HTML d'index. Premièrement, où voulons-nous ajouter ce texte ? C' est vrai, nous voulons éditer dans une balise div avec un identifiant de note. Donc la première chose que nous devons faire est de prendre ça au DOM. Ne vous inquiétez pas. Allons ici. Étape 1 prend dynamiquement à la div. Et ici, je vais juste faire une façon rapide et méchante de le faire que d'attraper l'objet document parce que c'est le point de départ. C' est la racine de notre page Web. Là, nous avons une méthode appelée getElementById. Nous savons que la carte d'identité est une note. Et quelle propriété voulons-nous accéder à cet élément ? Nous voulons y accéder. Nous pouvons faire du contenu de ticks, par exemple, nous pouvons le faire en HTML, cela n'a pas d'importance. Et nous voulons changer le contenu, non. Et on peut dire tout ce qu'on veut. C' est de la pure manipulation DOM. Comment ça a l'air ? Et si je sauvegarde, il apparaît dans notre navigateur. C' est cool ? J' espère que vous serez excité. C' est vraiment, vraiment incroyable. Mais c'était le plus facile. Maintenant, R1 doit être avancé. Je veux que nous passions maintenant à l'étape 2, et c'est changer la couleur d'arrière-plan du cercle sur un événement de clic. Comment ferons-nous ça ? Prendra à nouveau une banque d'État. Quelle est la première étape ? La première étape est que nous devons saisir le cercle d'une manière ou d'une autre, ne vous inquiétez pas, parce que c'est à cela que nous voulons attacher l'auditeur. Donc, définissons une variable JavaScript, initie l'appeler cercle par manque d'un meilleur mot. Et nous allons l'assigner à la valeur de cette div entière qui a cerclé. Donc, bien sûr, nous commençons par notre élément racine de notre page, qui est le document que nous accédons à une propriété appelée getElementById et l'ID que nous appelons était cercle. Souviens-toi si je pouvais notre fichier d'index. Nous voulons accéder à la propriété d'arrière-plan de cette div avec l'id de cercle. Pour le premier APR, nous avons ce cercle maintenant. Génial, c'est un super boulot. La deuxième étape est de faire quoi ? Nous devons joindre l'écouteur d'événement. Alors on accède à notre cercle. Rappelez-vous que chaque élément a accès à la méthode add event listener. Et la méthode addEventListener a deux arguments. Il a en fait plus, mais ne vous inquiétez pas pour l'instant, il a deux arguments obligatoires. Le premier est le type d'événement réel. Dans ce cas, nous voulons écouter le clicker a été traité. Et le deuxième argument est notre fonction de gestionnaire. Et appelons notre fonction changecolor. Assez intuitif jusqu'à présent. Et cela nous amène à la dernière partie de cette solution. C' est là que les compteurs, c'est là que le code le plus avancé va être. Et puis est-ce que nous devons définir notre fonction de gestionnaire. ce moment, nous avons attaché un écouteur d'événement au cercle. Nous avons dit que nous voulions exécuter une fonction appelée changer de couleur quand il est cliqué. Mais bien sûr, nous n'avons pas réellement défini cette fonction de changement de couleur. Faisons ça maintenant. Donc, bien sûr, utilisons le mot-clé de fonction de JavaScript. Et on l'a appelé changer de couleur, n'est-ce pas ? Et comment nous avons eu la viande de notre code va être dans ces deux crochets bouclés. Qui s'en occupe ? Alors, par où commençons-nous ? Et ça va devenir un peu déroutant peut-être, mais croyez-moi, dans la prochaine conférence, je vais expliquer exactement comment ce code fonctionne. La première étape que je veux faire est que je veux générer une couleur aléatoire. Une fois que j'ai généré à la couleur aléatoire au format hexadécimal, je suis ensuite allé attribuer une couleur de fond de ce div, sera ce cercle à cette couleur aléatoire que nous avons généré au sens économique. Donc, le premier conseil est sur un pour générer une couleur aléatoire. Donc, définissons une variable JavaScript appelée couleur aléatoire. Maintenant, ce que je veux que nous fassions, c'est que je veux que nous accédions à l'objet mathématique de JavaScript. Et ne vous inquiétez pas, nous avons accès à cela automatiquement dès la sortie de la boîte dans chaque navigateur. Chaque navigateur dispose de ces fonctions. C' est un objet mathématique. C' est vraiment, vraiment génial. Et sur cet objet de carte, il y a une méthode appelée aléatoire. Et comme vous vous y attendez, cette méthode aléatoire renvoie un nombre aléatoire. Mais comme vous le voyez ici sur mon IDE, ça me donne un indice. Il dit qu'il retourne un nombre compris entre 01. Ce qu'il ne vous dit cependant pas, est qu'il inclut le nombre 0, mais il n'inclura jamais le nombre 1. En d'autres termes, il produira un nombre supérieur ou égal à 0, mais inférieur à un. Cool, donc c'est ce que fait la fonction Math.random. Mais vous seriez d'accord avec moi à ce stade, si je faisais ça, nous allons avoir un numéro entre 01, ce qui ne nous aide pas beaucoup. Cela ne va nous donner qu'une gamme très limitée. En fait, ça va nous donner, une fois que nous aurons arrondi comme tout, nous donner un numéro. Pas assez bien pour nous. Nous devons donc le multiplier par un nombre. Eh bien, quel nombre le multiplions-nous ? Dans ce cas, le nombre va être 1600000777 à 16. Ne vous inquiétez pas. Je vais vous expliquer comment j'arrive à ce numéro. Mais pour l'instant, c'est la gamme de couleurs à notre disposition. C' est la quantité de différentes couleurs que nous pouvons générer au hasard. Alors, c'est cool ? Oh mec, je suis désolé, je continue à apparaître. Oui, mais c'est important. Si on s'arrêtait ici, ce ne serait pas assez. Laisse-moi te montrer pourquoi. Moi juste consoles enregistrer cette couleur aléatoire. Ok, et ça ouvre la console et notre navigateur. Si nous cliquons maintenant sur le cercle, mannitol pour cliquer sur le cercle, mais nous pouvons regarder ce nombre. Donc oui, nous produisons des nombres aléatoires, ce qui est génial. Pouvez-vous voir comment ça crée toutes ces décimales, ces nombres à virgule flottante. On ne veut pas ça. Nous voulons arrondir ces chiffres. D' accord ? Donc ça ne coupe pas tout à fait pour nous. C' est pourquoi dans ce code, ce que je veux faire maintenant, c'est que je veux arrondir ceci à l'entier le plus proche. Donc, nous pouvons envelopper la quantité entière entre parenthèses et nous pouvons accéder à une autre méthode de tableau JavaScript appelée floor. Donc, nous saisissons l'interface mat et nous exécutons une méthode appelée plancher. Voilà, tu y vas. Et cela devrait arrondir les chiffres. Donc, si nous ouvrons à nouveau notre console, console, et nous allons cliquer sur le cercle. Maintenant, vous pouvez voir qu'on se prépare. Superbes chiffres ronds. Oui. Mais vous pourriez penser à vous-même à ce stade, Clyde, ce n'est pas la même chose que les valeurs hexadécimales que nous avons écrites dans notre feuille de style, sa principale. Mais si je retourne à notre feuille de style, nous comme la couleur de fond de notre cercle, nous y allons. Vous pouvez voir qu'on a des portées là-dedans. Et c'est le point avec tout ce système hexadécimal. Il comprend en fait 16 caractères. Il va de 0 à 9, mais n'avons-nous pas les lettres a, b, c, d, e et f. Alors, comment pouvons-nous obtenir ces caractères aléatoires ? Comment obtenir ces nombres au format hexadécimal ? Will heureusement pour nous, il y a une autre fonction appelée chaîne. Et encore une fois, je vais élargir ce que c'est exactement dans la conférence bonus à venir. Pour l'instant, comprenez simplement qu'il prend le nombre et convertit en n'importe quelle base que vous spécifiez l'argument. Ouais, ça va être la base 16 parce que nous savons que les valeurs hexadécimales, encore une fois, peuvent prendre 16 valeurs aléatoires différentes. Je vais l'expliquer dans la prochaine conférence. Ne vous inquiétez pas, remonte alors revenons maintenant à notre fichier JavaScript. Et la seule autre chose que je veux faire là-dessus est que je veux implémenter une fonction appelée toString, comme je viens de le mentionner, et cela prend un argument. Et c'est la base que vous voulez utiliser. Et nous voulons utiliser la base 16. Ooh, je sais que c'est une longue ligne, mais ne vous inquiétez pas, si nous gardons ça et que nous y accédons, notre console devrait fonctionner. Et nous cliquons sur le cercle. C' est génial ? Il produit littéralement des valeurs hexadécimales. Oui, on n'a pas le hachage devant, ce qu'on va faire maintenant. Mais nous avons produit une valeur hexadécimale aléatoire vers le haut. Impressionnant. J' espère que tu t'amuses vraiment. Nous l'avons fait jusqu'à présent et nous avons presque fait le jour, nous l'avons presque fait. Donc la dernière chose que nous avons à faire maintenant est que nous avons produit une couleur aléatoire. Nous devons maintenant affecter la couleur de fond de cette div, et nous devons la toucher à la couleur aléatoire. Alors faisons-le vite. Nous pouvons supprimer cette console maintenant parce que nous savons que nous obtenons les bonnes valeurs. L' étape suivante est d'accéder à notre cercle. Souviens-toi qu'on a déjà le cercle. Nous existons pour obtenir l'élément par la méthode ID. Et nous avons toute cette div disponible pour nous en ce moment. Donc, tout ce que nous avons à faire, c'est que nous voulons affecter sa propriété de style. Ne vous inquiétez pas. Et avec sur le style, nous voulons affecter la couleur de fond. C' est celui qu'on veut changer. Et nous voulons l'assigner à une valeur. Et je vais utiliser des littéraux de modèle ici. Si vous ne savez pas ce qu'ils sont, s'il vous plaît consulter mon cours de grand maître complet JavaScript. Si vous savez ce qu'ils sont plus grands que vous pourriez suivre. Quelle est la première chose que nous voulons mettre dans nos littéraux de modèle ? C' est vrai. Nous devons mettre notre hashtag. Rappelez-vous, c'est la seule chose qui nous manque quand nous avons généré notre couleur aléatoire. Puis tout droit sur le que nous voulons insérer notre couleur aléatoire. Et mes chers étudiants, c'est tout. Tu viens de finir. C' est une chose assez avancée, n'est-ce pas ? Et ne vous inquiétez pas, je vais m'étendre à la prochaine conférence, conférence bonus sur le fonctionnement de tout ce hasard mathématique et comment nous sommes arrivés à 16,7 millions d'ambre. Mais pour l'instant, tu l'as fait. Allons élargir ça. Cliquez dessus et je n'ai même pas testé cela, j'espère que cela fonctionne, mais laissez-moi cocher. Mission terminée. Comme ce truc génial m'excite vraiment. J' espère que tu t'es bien amusé. J'espère que vous avez beaucoup appris grâce à cette conférence, qui commence vraiment à être beaucoup plus avancé. Maintenant, nous attachons des éléments d'écoute. Nous ajoutons des prises dynamiquement dans l'écoute de l'événement click via la nouvelle méthode d'écoute d'événement add. Et puis bien sûr, nous avons notre code de gestionnaire dans un fichier JavaScript séparé. Si bien joué. Je suis vraiment impressionné. Et laissez-moi juste inclure quelques feuilles de bonus. Juste de ne pas me laisser expliquer tout ce travail hexadécimal et comment les couleurs fonctionnent quand il s'agit de CSS et le navigateur. Je te verrai à la prochaine conférence. 21. Différentes façons pour définir une couleur: Mec, qu'est-ce qui vient de se passer ? On va voir la conférence précédente. Rappelez-vous, nous devions produire une couleur aléatoire chaque fois que le cercle était cliqué. Et comment on a fait ça ? Rappelez-vous que nous avons d'abord dû saisir ce cercle en utilisant la méthode get element by ID. Et une fois que nous avons eu cela, nous avons dû générer un nombre aléatoire chaque fois que ce cercle a été cliqué au nombre aléatoire devait commencer à 0 entité pour passer par tout le chemin à seize millions, sept cent sept à 15. Oui. Je ne me suis pas trompé. C' est un cinq à la fin. Remarquez, comme si on avait mis un code R. Mais ne vous inquiétez pas, je vais vous expliquer ça dans cette conférence. Donc, comme je l'ai dit, et pourquoi avons-nous utilisé ces chiffres ? Eh bien, nous allons nous débarrasser de cela dans son début en regardant comment nous sommes en fait assis les couleurs dans notre code. La couleur peut être définie de l'une des trois façons suivantes. Utilisation d'un mot-clé. En utilisant les hs sont tous le système de coordonnées cylindriques. Et en utilisant le système de coordonnées cubiques RVB. Ce n'est pas un cours sur l'ASC, donc je vais être très rapide et bref à ce sujet. Regardons d'abord la méthode du mot-clé. Il s'agit d'identifiants insensibles à la casse qui représentent une couleur spécifique. Par exemple, on utilise le mot-clé rouge, bleu, tomate, light see green, et cetera, et ainsi de suite, et FYI. Ils sont environ 140 noms de colonnes au total, donner-and-take. Et ce sont les plus intuitifs, qu'il ne nous donne pas autant de flexibilité. Ok, Cool. Qu'est-ce que ce système de coordonnées cylindriques HSL ? Comment ça marche ? Eh bien, cela définit une couleur en fonction de sa teinte, de sa saturation et de sa légèreté. Et il y a un composant alpha supplémentaire qui représente la transparence des couleurs. Et enfin, regardons ce système de coordonnées cubiques RVB. Comment ça marche ? Tout d'abord, rappelez-vous que c'est celui que nous avons utilisé dans notre scénario de dégustateurs. Et peut-être très intuitivement, le modèle RVB définit une couleur en fonction de ses composants rouges, verts et bleus. Et ce qui est super intéressant, c'est que les couleurs RVB peuvent être définies par deux méthodes. Grâce à la méthode hexadécimale, qui est celle que nous avons utilisée. Et grâce à des notations fonctionnelles, telles que l'utilisation de la méthode fonctionnelle RVB. Mais comme je l'ai mentionné, nous utilisons le format hexadécimal. Avant de passer à l'autre avec ces couleurs, laissez-moi simplement sauter sur la console. Laissez-moi vous montrer ce que je veux dire par ces trois méthodes. Nous allons l'appeler slash quatre méthodes parce que vous avez certaines méthodes dans le système RVB. Les images vous montrent ce que je veux dire. Sautons maintenant. Et vous pouvez voir dans ce que les tests de méthode addEventListener que nous avons traversés, nous utilisons le format hexadécimal, mais il y a d'autres façons qui nous donneront exactement le même résultat. Et ça se résume à des préférences personnelles. n'y a pas de mauvaise ou de bonne façon. Laissez-moi vous montrer d'autres façons de le faire. Alors commentons cette couleur d'arrière-plan. Donc maintenant, il n'y a pas de couleur de fond. Ce que nous pouvons faire, c'est que nous pouvons utiliser le RVB, qui se compose juste de valeurs rouges, vertes et bleues comprises entre 0 et 255. Si nous mettons maintenant 255, 1909 et 71, et nous économisons, nous obtenons exactement les mêmes couleurs que nous avions avant. Mais ce n'est pas le seul moyen, n'est-ce pas ? Non, on a une autre méthode. Donc, nous allons maintenant utiliser la méthode de saturation et de légèreté de teinte. Et si nous mettons des valeurs neuf et un 100 pour cent et 64 pour cent et nous économisons cela et nous allons commenter ceci. C' est exactement la même couleur, mais ce ne sont pas les seuls moyens qu'il y a ? Non ? Sur le dessus de ma tête, je peux penser à utiliser aussi le nom de la couleur comme goût. Donc ce que je veux dire par ça, eh bien, prenons la propriété de couleur de fond, et ça s'appelle tomate. Et si nous sauvegardons cela et nous commentons cela, c'est exactement la même couleur. Et vous pouvez voir ici si je décommente tous ces, mon IDE vous donne des indices sur la couleur qu'ils sont et maintenant tout de même. Donc, c'est mon point de vue. Il existe de nombreuses façons d'éplucher un chat. Si sauter à nouveau dans la conférence. 22. Bit vs Hexadecimal: Ok, super, donc j'espère que ça commence à avoir du sens. Mais passons à autre chose. On n'a pas la micelle, on va se débarrasser de tout ça. Et discutons de ce système RVB. En particulier, je veux que nous discutions de ce format hexadécimal. Tu penses peut-être, Clyde, pourquoi utilise-t-il l'hexadécimal ? La raison pour moi juste, c'est intuitif et ces nombres hexadécimaux sont très naturels pour les ordinateurs. Pourquoi ils sont naturels pour les ordinateurs le sera, parce que les ordinateurs stockent et gèrent les chiffres binaires. Et comme nous le verrons bientôt, quatre chiffres binaires forment un chiffre hexadécimal. Ne vous inquiétez pas si vous vous grattez la tête. Nous allons entrer dans bientôt. Donc la première chose que nous devons discuter est que nous devons discuter de ce concept de chiffre binaire. Et dans le monde de l'informatique, le mot chiffre binaire est souvent raccourci au mot mais BIT. Tu vois ces litres verts, ils, ok, eh bien, qu'est-ce qu'un chiffre binaire ? Un chiffre binaire ne peut être que 0 ou un, et à cause de cela aussi est un nombre magique 2. La plupart des geeks informatiques là-bas, tous les signaux à l'intérieur d'un ordinateur ont deux et seulement deux jours différents pour les valeurs binaires. 01. Donc, vous pouvez penser à ça comme étant 01, être sur, ou 0 peut être faux et un peut être vrai. Dans la terminologie informatique, un élément d'information qui peut stocker un 0 ou un est appelé un pari. Donc, en d'autres termes, un bit représente des valeurs de 0 à un, IE il peut représenter deux valeurs. Mettez deux bits ensemble, et vous pouvez représenter 012 ou trois. Aka vous pouvez représenter quatre valeurs, trois, mais peut représenter Sarah à sept valeurs ou huit valeurs au total. Quatre bits signifie que vous pouvez représenter deux à la puissance de quatre, qui est 16 lieux différents. Je suppose qu'on peut continuer à l'infini, mais la formule est simple. X bits peuvent représenter deux à la puissance des valeurs x. Et c'est pourquoi deux est un numéro très important pour les jeux informatiques. Ceux-ci sont appelés les numéros de base 2. Tout comme les chiffres de base 10 sont très importants pour nous. Humains, Fino Teen, doigts sur notre main. Tina, cent dix cents, et cetra, et cetera. Ce sont des chiffres très importants pour les humains. Alors que beaucoup de geeks informatiques connaissent les nombres 2, 4, 8, 16, 32, 64, 128, 256, six cetra citrique. Et tu verras l'intérêt de tout ça dans une seconde. D' accord ? Donc, c'est un peu, un peu devient finalement un octet. À un moment donné, les premiers ingénieurs informatiques sont venus avec la morsure comme l'unité suivante au-dessus d'un peu. Un octet est juste défini comme huit bits. Et cela signifie qu'un octet peut représenter deux à la puissance de huit nombres ou 256 valeurs différentes. Et si l'une ou l'autre valeur minimale d'un octet est 0 et la valeur maximale d'un octet est 255. Ou si nous voulons le regarder sous forme binaire, ce sera juste les huit bits qui seront tous ceux. Qui a appliqué cette théorie est géniale, mais j'en ai marre de la théorie. Pourquoi cela devient-il important pour nous ? Pratiquement ? Bonne question. Revenons à notre nombre hexadécimal. Rappelez-vous que nous avons commencé avec un hashtag et qu'il a été suivi de six chiffres pour se souvenir de cela. Et gardez également à l'esprit, comme nous l'avons mentionné précédemment, le système RVB définit des nombres basés sur des valeurs rouges, vertes et bleues. Et dans le système hexadécimal, les deux premiers chiffres sont liés à la lecture. Les deux autres verts et les deux derniers sont liés au bleu. Stack a un peu de sens. Mais jetons un oeil à l'une de ces valeurs. Les valeurs hexadécimales peuvent être de 0 jusqu'au caractère. Si, en d'autres termes, un chiffre hexadécimal peut avoir 16 valeurs différentes. Un client qui est cool, mais il n'y a pas seulement un chiffre pour chaque couleur. Je vois que les deux chiffres disent, et c'est une bonne question. Maintenant, nous avons deux chiffres, chacun peut avoir 16 valeurs différentes. Cela signifie que deux chiffres hexadécimaux combinés ensemble comme ceci peuvent faire 16 fois 16 est 256 couleurs différentes. C' est une sorte de commencer à avoir du sens. Donc, nous savons que le taux peut prendre 256 couleurs différentes. Le vert peut prendre 256, et le bleu, ce qui signifie qu'ils sont 16777216, différentes nuances de couleur qui peuvent être produites par le format hexadécimal. Woo hoo. J' espère que ça te souffle l'esprit. C' est vraiment fascinant. Donc, pour revenir à ma logique, oui, ma déclaration que les nombres hexadécimaux sur les ordinateurs naturels. Pourquoi est-il naturel pour les ordinateurs ? Le plus simplement parce que chaque chiffre hexadécimal, donc vous savez, le rouge et le vert et le bleu. Ceux-ci peuvent être stockés comme un octet et octets de très, très pratique quand il s'agit du monde de l'ordinateur qui peut contenir un caractère ascii. Et tout aussi important, un octet est la taille fille minimale standard de facto pour le stockage de mémoire. Et si je, je, c'est aussi la taille minimale du CPU et d'autres registres périphériques. Prend cela également stocké sous forme d'octets. campus ou scripts Unicode sont généralement codés en octets via UTF8. Le point que j'essaie de faire est que les morsures sont très, très utiles quand il s'agit d'ordinateurs. Et c'est pourquoi le type hexadécimal de format ou de système, pour moi a le sens le plus intuitif. Et vous pourriez penser, cool, nous pouvons produire 16,77 millions de couleurs. Est-ce suffisant ? Et oui, c'est suffisant. L' œil humain ne peut distinguer que jusqu'à 10 millions de couleurs. Donc, avoir 16,7 millions est bien plus que suffisant. Mais vous avez posé une bonne question et pour être véridique, il y a d'autres normes là-bas, par exemple, vous avez peut-être vu apprivoisé, mais HDR, est-ce que cela concerne la profondeur de couleur, avec chaque valeur RVB étant de 30 bits, donc, dix bits par canal plutôt que nos huit bits. Mais encore une fois, c'est une sorte de pointeurs parce que l'œil humain ne peut distinguer qu'après une certaine quantité de couleurs. Tu connais le vieux dicton pourquoi réparer quelque chose s'il n'est pas cassé. Mais pour revenir à notre code, c'est exactement pourquoi nous avons écrit la fonction. Nous voulons produire un nombre aléatoire. Et nous voulions produire un nombre aléatoire jusqu'à 16777216. Rappelez-vous, la fonction mathématique aléatoire, qui provient de JavaScript qui génère un nombre compris entre 0, ce qui est inclusif et un qui est exclusif. Ainsi, les valeurs ci-dessus ou produire entre 0 et 16, triple 7.999215. Et puis nous utilisons la méthode de plancher mathématique pour arrondir au nombre entier le plus proche. Et je l'ai fait très délibérément parce que maintenant si nous arrondissons au nombre entier, vous êtes d'accord avec moi, nous allons obtenir des valeurs comprises entre 0 inclusivement et 16777215 inclusivement. Et le cou est exactement ce que je voulais. Cette valeur, 16, triple sept à 15 sera convertie en valeur hexadécimale. Si FF, FF, FF, qu'est-ce que j'ai fait trop de f, ils veulent juste être six F. Par conséquent, c'est le nombre le plus élevé que nous voulons pour la conversion hexadécimale. Et si vous incluez cela avec le nombre 0, il produit 161717, 16 valeurs uniques. Qui ? J'espère que cela a du sens. Mais rappelez-vous, nous ne nous sommes pas arrêtés. Ouais, nous avons ajouté la fonction de plancher et ensuite nous avons aussi dû ajouter la méthode toString. Donc, dans la prochaine conférence, parce que cela devient assez long maintenant, je veux juste mentionner brièvement la méthode toString à la façon dont cela fonctionne. J' espère que tu apprends une tonne, j'espère que tu t'amuses, et je te verrai, je te verrai à la prochaine conférence. 23. Comment fonctionne la méthode ToString(): Nous avons presque fini et nous avons parcouru un chemin si loin. Alors accroche-toi là. Ce sera la dernière conférence sur nous. Donc nous ne le ferons que, nous avons maintenant un nombre hexadécimal généré au hasard. Et avant d'aller plus loin, je veux juste vous rappeler ce qu'est cet objet mathématique. Il s'agit d'un objet JavaScript disponible automatiquement dans chaque navigateur. Donc, c'est assez simple. Nous utilisons simplement les méthodes Math.random et Math.floor. Et en utilisant ces deux méthodes, nous avons maintenant un nombre de résultats dans la gamme de 0 et 1, six, triple sept à 15. Rappelez-vous notre format hexadécimal, il peut aller de 0, deux Fs. Donc, avoir des chiffres ne suffit pas. Et c'est exactement pourquoi nous devons accéder à la méthode toString. Cette méthode convertit un objet ou un nombre, dans notre cas, vous l'avez deviné en une chaîne. Et la bonne nouvelle pour nous est que chaque objet a une méthode toString. Et à peu près tout en JavaScript est un objet, y compris ce que nous venons de produire. Oui, je vais numéroter. Et cette fonction ToString accepte une seule base de paramètres optionnels. La base spécifie simplement comment l'entier doit être représenté dans une chaîne. Donc, disons que nous avons défini une variable appelée num. Et nous allons juste pour les arguments, supposons que ce nombre est 1, 2, 3. Que dire si nous accédons à cette méthode ToString, mais nous l'avons fait en tant que base 2, se souviendra que la base deux est binaire, c'est-à-dire que nous n'avons que deux chiffres, 01. Donc, si nous accédons à la méthode ToString en tant que base 2 sur ce nombre, nous obtiendrions le résultat sous forme binaire, qui est pour 1011. Mais dans notre cas, nous n'avons pas utilisé la base de deux degrés, vous seriez utilisé basé sur 16. Rappelez-vous, l'hexadécimal est la base 16. Il est composé de 16 symboles différents. Ainsi, la méthode toString ci-dessus convertira le 123 en forme hexadécimale. Il retournera dans l'exemple ci-dessus, avec notre numéro 1, 2, 3, la valeur sept. Et c'est pourquoi nous utilisons la méthode toString sur notre nombre pour le convertir au format hexadécimal. J' espère que ça a du sens. J' espère que vous êtes beaucoup plus à l'aise avec ce qu'on vient de faire. Et comme toujours, nous n'avons pas fini. Nous avons une tonne de plus à apprendre. Donc assez de sauts sur ça. Maintenant, passons à autre chose. 24. Types de l'événement - souris et clavier: Nous avons appris à propos des gestionnaires d'événements en ligne, propriétés de gestionnaire d'événements et des écouteurs d'événements. Et dans la plupart de ces cas, nous avons toujours regardé l'événement click. Mais comme je continuais à faire allusion à l'OEM, beaucoup plus d'événements dans le DOM. Et cela m'amène à cette conférence. Et c'est que je veux que nous discutions d'événements communs. Et par les événements communs sont juste des événements moyens que vous rencontrerez le plus. Mais d'abord, faisons un pas en arrière. Les veines factices sont des choses qui se sont produites. Le plus souvent, un événement est déclenché par une action de l'utilisateur. Par exemple, cliquez sur un bouton de la souris ou appuyez sur un clavier. Et nous savons qu'à chaque événement, qu'il s'agisse d'un événement click ou d'un événement clavier, chaque événement est unique. C' est un objet avec ses propres propriétés et méthodes. C' est un point important que je veux aborder et nous en verrons des exemples sous peu. Et surtout, tous les événements héritent de l'objet événement. C' est une interface qui représente chaque événement qui a lieu dans le DOM. Et oui, chaque événement, quel que soit son type, hérite de cet objet d'événement. Cela aurait pu être une IV intrusion par une action de l'utilisateur ou aurait pu être généré par une API. Par exemple, pour représenter la progression d'une tâche asynchrone. L' événement aurait pu être déclenché par programme. Vous auriez pu définir l'événement et l'envoyer à cible spécifiée en utilisant la cible veine et la méthode d'envoi dans l'impression. Ne vous inquiétez pas, un ERD pourrait être un phénomène un peu déroutant. Gardez juste à l'esprit le point que j'essaie de faire est qu'ils sont de nombreux types de Vivienne, dont certains utilisent d'autres interfaces basées sur l'objet d'événement principal, cette interface faible ici. Et ce qui est vraiment cool, c'est que l'objet C faible contient l'ensemble standard de propriétés et de méthodes qui sont communes à tous les événements. Je ne cesse de mentionner qu'il y a des tonnes de veines différentes, mais qu'est-ce que c'est ? Eh bien, nous avons littéralement une pléthore de différents types. Vous pouvez voir certains d'entre eux ici sur l'écran. Mais comme je l'ai mentionné, je veux seulement que nous regardions les événements communs ici, aka les veines que nous allons rencontrer le plus de développeurs S-wave. Alors débarrassons-nous de tous les autres bruits. Et regardons d'autres événements communs qui sont disponibles pour nous. Et je sais que vous pourriez regarder ces grogneux ou ils seulement cinq types communs d'événements et de réponses. Oui. Comme la plupart des veines que nous allons écouter tomberont dans l'une de ces cinq catégories. Les événements de souris, comme vous le savez, sont parmi les événements les plus fréquemment utilisés. Et ils se réfèrent simplement à des événements qui impliquent un clic sur les boutons de la souris ou le survol sur le déplacement du pointeur de la souris. Ce que je veux dire par planer et plus large voit un événement de vol stationnaire. Eh bien, rappelez-vous, quand nous utilisons la souris dans et le congé de la souris en tandem, nous créons à peu près un effet de survol qui dure aussi longtemps que le pointeur de la souris est sur l'élément. Et nous savons qu'un événement click est un événement composé composé d' une combinaison de souris vers le bas et de souris vers le haut. Donc, il y a vraiment beaucoup de choses que nous pouvons faire avec cette catégorie de souris. Mais nous n'avons pas seulement des événements de souris, Dewey. Nous avons aussi beaucoup d'événements de clavier. Et comme son nom l'indique, les événements clavier sont utilisés pour gérer les actions du clavier, comme appuyer sur une touche, lever une touche, maintenir une touche enfoncée, etc. Vous remarquerez peut-être sur l'écran que nous avons un événement clé vers le bas et un événement keypress le jour un peu la même chose. Oui, ils sont similaires, mais ils ne sont pas exactement les mêmes. Clé. Dom reconnaîtra chaque touche qui est pressée, tandis que la touche appuyez sur la touche émettra des touches, aka elle exclura les touches qui ne produisent pas de caractère. Par exemple, les touches Maj out , delete, etc. Et rappelez-vous comment j'ai dit que chaque type d'événement a son propre ensemble de propriétés et de méthodes. Eh bien, le clavier ne fait pas exception. Ils ont un ensemble spécifique de propriétés pour accéder à nous donner des informations sur les clés individuelles puis ont adopté. Laissez-moi vous montrer un exemple rapide. 25. Exemple d'événement Keydown: Rappelez-vous ce que j'ai dit que chaque événement a ses propres propriétés et méthodes uniques à sa disposition. Eh bien maintenant, je veux regarder l'événement key down parce que nous regardons les événements clavier. J' ai donc pensé que c'était le bon moment pour arrêter et jeter un coup d'oeil à un exemple. Donc, comme toujours, je commence avec un fichier très vide parce que je veux que nous codions ensemble. Je veux créer une page HTML très simple avec un corps. Et dans le corps, je veux juste une balise de script. Je ne veux même pas inclure de HTML. Ça va être mort simple. Et ce que je veux faire, c'est que je veux écouter un événement clé sur tout le document. Donc, nous accédons à notre objet document, et sur cela nous ajoutons l'addEventListener. L' événement que nous voulons écouter maintenant est appelé clé vers le bas. Ça n'a pas d'importance. Et je veux utiliser la syntaxe de flèche pour saisir l'événement. Et pour obtenir les données. C' est vrai, nous avons besoin d'une variable et je vais juste appeler cet événement variable. Et sur cet objet d'événement qui nous est retourné, il y a une propriété appelée key. Cette touche nous dira quelle touche a été pressée sur notre clavier. Et c'est ce que je veux dire. Et la menthe en disant que chaque type d'événement a son propre ensemble unique de propriétés. L' événement click, il n'a pas du tout de propriété clé, je veux dire par lui. Donc, pour vous le prouver, nous allons consigner la veine à la clé. Donc nous allons le faire, Allons maintenant dans notre navigateur et témoignons. Donc, bien sûr, nous devrions obtenir une page blanche est ce que nous attendons. L' inspecter ce document. Allons à la console, actualisons. Et maintenant, laissez-moi appuyer sur la touche a de mon clavier. Regardez que la console enregistre toutes les valeurs sur lesquelles j'appuie sur mon clavier. Bonjour le monde. À quel point nous sommes cool ? Aujourd'hui, on y va. Ce n'est qu'un exemple. Si vous voulez voir quelles méthodes et propriétés sont disponibles sur l'ensemble de l'événement, tout ce que nous pourrions faire est d'accéder à une propriété sur l'événement, nous pouvons simplement consigner l'événement entier lui-même. Alors nous allons rafraîchir et laissez-moi appuyer sur n'importe quelle touche, juste ma barre d'espace par exemple. Et on y va. On a un événement clavier. Et dans cet événement, vous pouvez voir ses propriétés et ses méthodes. Et il y avait la clé au fait. C' était ainsi et comme je savais qu'il y avait une propriété clé sur l'espoir sévère que cela a du sens. Retournons à la conférence. 26. Types de l'événement - Formulaires: Herbert faire des scènes et j'espère que vous vous amusez. Nous avons donc parlé des événements du clavier. Regardons les quatre réunions. Et vous pouvez juste imaginer à quel point c'est important. Pour moi. Les veines sont des actions qui se rapportent à des formulaires, comme des éléments d'entrée sélectionnés ou non sélectionnés, et bien sûr, des formulaires soumis. Il y a beaucoup d'événements à notre disposition que nous pouvons surveiller sur un thème formel, assez intéressant. point est obtenue lorsqu'un élément est sélectionné, par exemple par un clic de souris ou lorsque l'utilisateur navigue dans une forme de feu, la touche Tab. Et ce qui super duper intéressant est que JavaScript est souvent utilisé pour soumettre des formulaires et vu les vallées jusqu'à un langage back-end. Et l'avantage de l'utilisation de JavaScript pour les formulaires de couture est qu'il ne nécessite pas de rechargement de page pour soumettre le formel et JavaScript bien sûr, peut également être utilisé pour valider les champs d'entrée répondu. Et tu me connais maintenant, j'adore les exemples. Alors regardons un exemple de formulaire maintenant. Comment nous pouvons écouter les veines et comment nous pouvons extraire des données d'un formulaire et les afficher sur un écran. Jetons un coup d'oeil. 27. Type d'événement de forme - Exemple: On a parlé des formulaires et de la façon dont on peut interagir avec les formulaires. Ceci est en train de regarder un exemple très simple et rapide. Ici, sur l'écran, vous pouvez voir qu'il ne semble pas si agréable. Les images zooment pour que vous puissiez le voir un peu mieux. Ce formulaire demande simplement le nom de l'utilisateur et ils savent quel est son animal préféré. Donc on peut juste écrire mon nom. Et mon animal préféré, comme vous le savez, est une eau. Donnez-nous le soumettre. Je veux juste afficher un message disant Salut Clyde, j'aimerais que vos togas portent, s'il vous plaît. Donc, cela a ramassé dynamiquement ce que l'animal est que j'ai choisi et aussi mon nom. Comment pourrions-nous faire ça ? Eh bien, c'est de ça que cette conférence est tout. Donc, je vais mettre en gras la corrélation de la page du squelette ici. Et puis dans la prochaine conférence, je vais vous montrer la solution. Alors donnons-le un coup d'envoi. Ça a commencé. Et voilà, mettre une page blanche ou vous savez ce que je vais faire, laissez-moi mettre en place un navigateur vierge sur la droite. Et je vais le dire à gauche juste pour que nous puissions le mettre ensemble et que nous puissions voir le processus étape par étape. La première étape est de créer un très simple modèles HTML. Et bien sûr, nous avons notre corps dans notre corps. Commençons à construire notre formulaire. La première chose que je veux faire, c'est que je veux avoir une étiquette. Et on peut juste dire le nom s'il vous plaît. Et bien sûr, nous pouvons avoir une entrée de texte de type. Cela a juste un identifiant de nom. Si nous sauvegardons cela et nous allons à un jour de navigateur, nous avons le nom s'il vous plaît. Et nous pouvons entrer notre nom basé sur la peur, simple, et vous rendre cela un peu plus grand. Et puis cela nous pouvons réduire un peu juste pour que tout soit sur une seule ligne. Et les mystères ont une pause et un code. Et puis nous pouvons commencer à implémenter notre liste déroulante et gagner. On peut l'envelopper dans une étiquette. Laisse-moi enlever cet automne. Et nous pouvons vous poser la question, quel est votre animal préféré ? Et bien sûr, nous pouvons avoir une étiquette select ici. La carte d'identité peut être un animal. Alors oui, on peut avoir nos options. Et nous avons un chien qui parlera , et bien sûr, les valeurs doivent être le discours de guerre et le marché. Et si je sauvegarde cela, supprimons simplement cette main de nom. On n'en a pas besoin. Je vais sauver ce jour. Regatta est une boîte d'oscillation avec chien, chien et chat soda. Loin si bon. De quoi avons-nous besoin ensuite ? Eh bien, nous avons besoin du bouton de soumission, non ? Une autre rupture du modèle intuitif maintenant, avec un ID de bouton. Et le bouton peut dire « soumettre », comment ça va ? Maintenant, la dernière chose que je veux ajouter est quand l'utilisateur clique admis, nous affichons ce message juste en bas, nous avons besoin d'un élément HTML à insérer qui prend dans. Donc, je veux ajouter un élément div avec l'ID du message. Et en ce moment, cette balise div peut être vide. C' est tout à fait correct. Et puis quelle est la prochaine étape ? Eh bien, la prochaine étape est la batterie. Pour accéder au DOM en utilisant JavaScript. C' est là que le plaisir entre en elle. Donc, tout ce que nous avons à faire maintenant, c'est que nous devons ajouter notre balise de script. Et c'est un peu comme ça que je veux te laisser. Mais avant de garder à l'esprit, quand nous commençons à accéder aux choses à partir d'une boîte de saisie, souvent ce que nous recevons est un objet qui est un peu un indice. Et pensez à cela lorsque vous essayez d'accéder au nom de l'utilisateur sans vous dire quelle est la solution, pensez simplement à la scène que vous devez prendre. Eh bien d'abord, vous devez attacher un écouteur d'événement à quelque chose. Qu'est-ce que tu veux ? Un texte qui avait été testé deux. C' est vrai. Nous l'attachons au bouton Soumettre. Et quel événement écoutez-vous ? Vous pensez simplement à l'événement click. Parce que lorsque l'utilisateur clique sur ce bouton, vous voulez que quelque chose se produise. Et puis vous avez à peu près juste besoin de définir votre gestionnaire d'événements, cette fonction de rappel. Vous devez définir toutes les choses que vous voulez arriver. C' est tout ce qu'il y a. Donne-lui un coup d'envoi. Et dans la prochaine conférence, je passerai à travers la solution avec vous. 28. Type d'événement de formulaire - Ajouter JavaScript: D' accord. Tu lui as donné un coup d'envoi ? J' espère, monsieur. Alors commençons à s'attaquer aux moustiques. Ce qui est offert bâton. Eh bien, la première étape est là. Permettez-moi de faire un commentaire. Maintenant, accédons au DOM via JavaScript EBITDA, et c'est pourquoi nous insérons ces balises de script. Quelle est la première étape ? Lorsque l'utilisateur clique sur Soumettre, nous voulons qu'un événement soit déclenché. Et ensuite, quand nous voulons que notre code de gestionnaire s'exécute, n'est-ce pas ? Alors, première étape, prenez le bouton, et maintenant nous savons exactement comment le faire. Nous définissons une variable appelée bouton. Nous accédons à notre objet document avec notre cou, nous accédons à une méthode appelée get element by ID. Et qu'est-ce que l'ID du bouton ? Pourtant, très intuitivement, nous l'appelons bouton. On y va. Voilà notre bouton. Laisse-moi juste agrandir ça. Vous n'avez pas besoin de regarder le navigateur pour l'instant. Alors on y va. C' est la première étape. Deuxième étape. La deuxième étape consiste à ajouter notre écouteur d'événement au bouton. Et oui, on va saisir ce bouton. Nous allons accéder à la méthode add event listener. L' événement que nous voulons écouter, l'événement click. Et le deuxième argument est la définition de notre fonction de gestionnaire. Dans ce cas, appelons-le simplement sur le bouton clic par manque d'un meilleur mot. Et c'était du bâton aussi, n'est-ce pas ? Ajoutez l'écouteur d'événement. On y va. Et la troisième et dernière étape est quoi ? 3, 2, 1, bien sûr que vous l'avez déjà deviné. Il définit notre fonction de gestionnaire. Et bien sûr, nous commençons par utiliser le mot-clé de fonction de JavaScript, nous l'avons appelé sur le bouton clic. Et tout le chaud et le bœuf de notre code va être dans ces accolades bouclées. Alors on y va. Que voulons-nous arriver maintenant ? Eh bien, si je fais défiler vers le haut, ouais, souviens-toi qu'on a cette div avec l'ID du message. En ce moment, c'est juste une balise div vide. Mettez ce que nous voulons faire est que nous courons pour saisir toutes les entrées du formulaire et les insérer avec inactif. Donc la première chose que nous devons faire est que nous devons accéder à cette div. Il faut qu'on y fasse référence. Nous pouvons changer ses prises contiennent propriété. Définissons une variable JavaScript appelée message si deux. Donc, nous savons ce que c'est et nous savons que nous pouvons y accéder en utilisant l'objet document. Nous pouvons ensuite accéder à l'élément get par ID et l'ID de celui-ci est message. Et maintenant, nous voulons saisir le nom de l'utilisateur et le formulaire qui s'attaque à ce problème en premier, vous pourriez penser que nous le faisons en définissant un nom. Nous accédons au document, nous obtenons l'élément par ID et l'ID est le nom. Vous pourriez penser que c'est comme ça qu'on le fait. Nous défilons vers le haut. Vous pouvez voir que nous avons donné ce champ d'entrée et l'identifiant du nom. Mais si nous faisons cela, cette console se déconnecte simplement, nom du journal de la console. Qu' est-ce que vous attendiez à voir ? Rappelez-vous que je vous ai donné un indice dans la conférence précédente. Eh bien, c'est ouvrir la console ici. Rendez ça un peu plus grand. Si notre nom, il a de l'argent. Et nous allons sur notre console et cliquez sur Soumettre, que pensez-vous qu'il va se passer ? Comme vous pouvez le voir, ce qui nous est retourné n'est pas la valeur réelle, mais c'est à nouveau un objet. Et ce que nous devons faire maintenant, c'est que nous devons réellement accéder à une propriété appelée valeur sur ce ticket, la valeur de ce texte d'entrée. Ce que nous faisons ici avec le journal principal de la console, nous ne voulons pas un journal de console le nom, nous voulons que ce soit la valeur réelle. Et si j'écris quelque chose là-dedans et que je vais soumettre, on y va, on obtient la valeur réelle. Alors est-ce que ça a un peu de sens ? Alors fermons ça maintenant. Retournons à notre éditeur de texte. Donc, ce que je veux faire est que nous ne voulons pas accéder au nom lui-même parce que cela nous renvoie l'objet entier que nous voulons accéder à cette propriété appelée valeur. Et bien sûr, l'étape suivante est de choisir l'animal que l'utilisateur a choisi, n'est-ce pas ? Donc document animal tardif obtenir élément par ID. Encore une fois. Nous l'avons défini avec un identifiant d'animal. Et encore une fois, nous voulons accéder à la propriété value de cet objet. Si nous faisons défiler vers le haut, vous pouvez voir que nous avons donné à cet élément de sélection un ID d'animaux. C' est comme ça que j'ai choisi le mot animal ici, qui a été arrêté de façon incorrecte. Et donc on y va. À ce stade, nous avons toutes les informations dont nous avons besoin. La dernière et dernière étape consiste à ajouter cette information sous forme de texte à cette div. Donc maintenant, nous pouvons aller message de sortie LED. Faites défiler ici. Tout ce que nous avons à faire est d'accéder à notre message div. Nous voulons changer le contenu du texte, et ici je peux utiliser des littéraux de modèle. Qu' est-ce qu'on veut dire ? Ce serait impoli si on ne lui disait pas bonjour et le saluait par son nom. Et puis on veut juste dire, j'adorerais avoir ton animal, s'il te plaît. Et si nous sauvegardons cela et nous allons à notre navigateur, tout devrait fonctionner. Si notre nom est Wally et que l'animal préféré est un chat, et que vous allez soumettre, Holly, j'aimerais avoir votre morceau de chat. Et on y va. Nous avons littéralement utilisé genre de formulaires, ouais, avec des valeurs de sortie dans les formulaires. Et nous avons affiché dans l'écran très intuitif, très facile. J' espère que ça a du sens et que je m'amuse. Allons passer à autre chose. 29. Types de l'événement - Toucher et fenêtre: Qui on croise à travers ce génial. Ne parlons pas de ces événements tactiles. Qu' est-ce que c'est ? C' est à propos de quoi ? Eh bien, tout d'abord, je veux mettre un été sensible si seulement déclenché sur les appareils tactiles comme les smartphones et les ordinateurs portables à écran tactile. Alors que ces ravins de toucher avaient besoin de bien, pensons-y. Les veines de la souris comme sur le clic et le mouvement de la souris. Ils sont déclenchés sur la majorité des navigateurs et appareils. Cependant, pour les téléphones intelligents, les iPads et autres, le déplacement de la souris n'est même pas déclenché parce que le contenu prend le doigt en survolant le téléphone, par exemple, certains téléphones intelligents ou en ajoutant des coutures, cela va ajouter un peu plus téléphones intelligents, ne devraient pas prendre des mouvements de souris à l'avenir. Mais dans les cas où vous ne voulez pas utiliser la souris et les haricots. On a ces événements tactiles. Et la dernière chose que je veux discuter maintenant sont ces fenêtres, il gagne chose Android vaut la peine de sauter trop longtemps sur agréable parce qu'ils sont tout à fait explicatif. Vous pouvez écouter lorsque l'utilisateur fait défiler une page pour redimensionner la page à partir de la page est chargée, et cetera, et cetera. Très, très utile. Chante. Cool. Mais de toute façon, nous l'avons fait en quantités incroyables. Nous sommes venus très, très loin. Si bien joué. Série D, je pense que vous devez prendre toutes ces choses que vous avez apprises jusqu'à présent, prendre une pause, prendre un café, et juste être fier de vous-même. Les dents de Sears arrivent par une chute. Avant de passer à la section suivante, je veux juste que nous essayions notre main à quelques défis. Je suis super excité. J' espère que tu l'es aussi. Je te vois maintenant. 30. Projet de cours - Introduction: Ou étrange, cela va être un vraiment, vraiment amusant quelques conférences parler très brièvement des formes et comment ils fonctionnent. Donc, ce que je veux que nous construisions ensemble, c' est exactement ce que vous voyez sur l'écran en face de vous en ce moment. Et je vais coder le HTML et CSS à partir de zéro dans ce que je veux que vous fassiez ? Bien sûr, les utilisateurs devraient pouvoir taper le nom. Vous pouvez voir maintenant quand j'ai cliqué sur cette zone de texte d'entrée, le style de cette bordure inférieure vient de changer. Et disons que l'utilisateur tape, Bob, Luka, cool. Autrement dit, je veux que vous l'affichiez, dessous, en prenant cette valeur de cette boîte de saisie et en l'affichant ci-dessous. Et vous pouvez voir que cela se produit en temps réel. Donc ça va être très intéressant. Nous allons écouter l'événement d'entrée. Au fait, qu'en est-il du signe de NLM ? Will, si l'utilisateur clique dessus, je suis allé vous afficher qu'un événement submit a été déclenché. Et je veux que vous affichiez l'horodatage. Et donne-moi juste une seconde. Permettez-moi de rafraîchir rapidement cette page. Laissez-moi manquer rapidement un peu de code. Donne-moi deux secondes. Ok, je suis de retour maintenant. Ce que je veux que vous fassiez aussi, c'est que je veux que vous commenciez à jouer avec cet événement focus sur les formulaires. Donc, ce que je veux dire par là, eh bien, si l'utilisateur clique sur cette zone de texte d'entrée, voulez changer sa couleur d'arrière-plan et le texte d'ailleurs, parce que maintenant, quand l'utilisateur tape Bob, cette entrée de Bob prend comme plus blanc, c'est noir. Et nous pouvons faire une tonne d'autres choses sur les formulaires. Ce n'est pas un cours sur les formulaires. Je vais être relativement rapide. Mais tu ne peux vraiment pas faire grand-chose. Par exemple, si nous copions Bob, si je le mets en surbrillance et appuyez simplement sur le contrôle C sur mon clavier. Tout en regardant ça, nous recevons une alerte disant que vous avez copié le goût. Donc, ce sont vraiment beaucoup d'événements que nous pouvons écouter quand il s'agit de formes de ces scènes de fabrication. Donc je m'amuse. Et je te verrai dans les prochaines conférences. 31. Projet de cours - Créer notre HTML: Bienvenue à la conférence de l'École. Ok, cool. Sur la gauche, nous avons notre éditeur de code Visual Studio. Sur la droite, nous avons notre navigateur. Et dans l'intérêt du temps, je vais aller très vite. Ouais, je vais juste couper rapidement le HTML. Je vais partager les ASC en temps réel avec vous. Mais ce n'est pas un cours sur CSS ou HTML. Donc, je vais y aller relativement vite. Si vous ne voulez pas suivre, c'est tout à fait correct. J' ai fourni les fichiers HTML et CSS ci-dessous dans les ressources. Donc, sans plus tarder, allons coder. D' accord, alors laissez-moi commencer à coder notre HTML. Nous allons juste mettre en place un très, très simples modèles. Tout ce que je vais faire maintenant est de créer un élément d'en-tête. Et bien sûr, nous devons lier à notre style, fichier style.css. Donc ce que nous allons faire encore, et en passant, vous pouvez voir en haut de mon éditeur, j'ai trois fichiers, mon index, fichier HTML, styles.css, et un fichier d'application, et rien d'autre dans mon répertoire qui a tout ce que j'ai créé mur. J' ai créé ce fichier texte ici sans raison. Laisse-moi supprimer ça. On y va. Donc vous pouvez voir que je n'ai que trois fichiers, surtout quand je l'ai et qu'ils sont tous vides. Alors on y va. Nous avons fait notre section de tête et il pourrit maintenant notre corps. Et c'est ce à quoi je veux faire face, non ? Nous voulons traiter des formulaires. Et cela crée juste une clause ici et l'appelle une forme cool. Nous n'avons pas besoin d'une action dans ce cas. Nous ne soumettrons pas de requête GET et de demande de poste à un serveur, donc vous pouvez ignorer cela. Et on y va. Voilà notre formulaire. On peut tout finir pour l'instant. Et créons une étiquette. Et cela peut être le nom de l'utilisateur. On y va. Et avec l'Inde, nous pouvons avoir une balise de span dans votre nom, les capitales de l'État dans votre nom. Et puis bien sûr, si nous sauvegardons cela et nous actualisons, notre navigateur va juste être des prises étrangères. Ce qu'il nous faut maintenant, c'est cette boîte de saisie, ne vous inquiétez pas. type d'entrée est égal au texte est correct. Juste un lent souci d'exhaustivité, même si nous n'allons pas utiliser un chèque. Cela dit simplement que c'est le nom, le nom de l'utilisateur. Et si nous sauvegardons cela, ce sont la boîte de saisie. Alors on y va. On a le nom de l'utilisateur. La seule autre chose que je suis allé comme un bouton de soumission. Créons un autre élément d'étiquette. Supprimons cette étiquette. Et ici, nous pouvons juste avoir une boîte de saisie, mais de type soumettre. Nous allons types de MIT. La valeur peut être inscription. Maintenant, à titre d'exemple, nous allons juste avoir un U majuscule, sauvegardez cela et genou comme notre bouton d'inscription maintenant. Alors on y va. C' est littéralement tout ce que je veux que nous fassions. Ici, en bas, je veux inclure une balise de script et référençons notre fichier app.js. Donc là, vous l'avez. Une forme très, très simple qui n'a pas besoin d'une année complète. Nous allons apprendre des choses très intéressantes. Et en tant que développeur, vous allez courir sur les formulaires tout le temps. Donc, avant de continuer, je viens de finir de coiffer le CSS et nous allons prendre le simple ennuyeux vieux prend que vous voyez sur l'écran maintenant. Et on peut le convertir en quelque chose de très cool. Allons maintenant à notre fichier styles.css. Et il commence à coder notre CSS. Et encore une fois, je vais rester très simple. C' est accéder à notre formulaire. Rappelez-vous que nous l'avons enveloppé dans une classe de forme cool de nous obtenons notre fichier d'index. Vous pouvez voir notre formulaire est enveloppé dans une classe appelée cool pour le fichier CSS Skoda. Nous allons tout d'abord définir sa largeur comme 70 pour cent, juste pour qu'elle ne s'étire pas sur tout l'écran. Et donnons à cela un fond cool. Contexte. Et l'arrière-plan peut être RGB 6791117. C' est la couleur que j'ai choisie. Tu sais quoi, si je commente cette largeur, tu peux voir pourquoi je l'ai fait. Si je ne spécifie pas de largeur, le bloc entier s'étend sur tout l'écran. Je ne veux pas ça. C' est pour ça que je me suis limité à 70%. Espérait qu'il fait des saints et la taille de la police. On n'a pas vraiment besoin de faire ça. Je suppose. Nous pouvons simplement le définir comme un objectif qu'il est déjà. Donc, laissez-moi juste supprimer cette perte de temps ou à quoi d'autre peut-on ajouter ici ? rembourrage sera-t-il agréable effet le rembourrage supérieur, le rembourrage droit et inférieur peut être différent et bien sûr l' ascenseur en attente peut être deux à cet égard, il commence vraiment à regarder mieux OT, ajoutons une bordure autour de tout ça. Peut être solide de cinq pixels. Et maintenant, nous allons juste choisir un CALEA aléatoire, 5368 e. Comment ça ressemble ? C'est une bordure cool. Maintenant ce que je veux faire, c'est que je veux pousser ça au centre de l'écran. Parce que vous pouvez voir qu'il est poussé vers la gauche. Et il y a un moyen très facile de le faire. Et je peux juste affecter sa marge et dire alter basée sur une requête simple. Maintenant, je veux simuler le style de la boîte d'entrée réelle. Donc tout ce que nous avons à faire ici, c'est que je veux accéder à notre forme cool et que je veux affecter l'entrée. Maintenant, si vous avez beaucoup d'entrées, parfois vous voulez spécifier plus en détail ce que nous voulons. Ici, nous savons que ce type est du texte. C' est la seule chose qu'on veut simuler. Et ce qu'on veut faire, c'est qu'on ait accès à la forme alkyle à nouveau, et on veut adapter l'étiquette. Je tiens à remercier ces deux en même temps. Tout d'abord, ce que je veux faire, c'est que je voulais trouver une autre famille de polices. ce moment, c'est juste un peu ennuyeux. Et disons que c'est Colibri. C' est en fait se débarrasser de tout le reste. Comment ça a l'air ? En fait ? Pensez à l'équilibre de ce type. Ouais, c'est mieux. Et puis définissons juste une couleur, AAA. S' ils sont, on va commencer à aller mieux. Maintenant, faisons simplement défiler un peu vers le bas. Je veux qu'on fausse l'étiquette maintenant. Et je veux que la propriété display soit définie pour bloquer. Bien mieux parce qu'alors au moins maintenant, nous pouvons briser le dossier de soumission. Ça a du sens. La prochaine chose que je veux faire maintenant est que je veux juste ajouter une certaine marge au bas. Juste parce que les boutons de soumission pour fermer cela, vous dites 10 pixels. Comment c'est ? Ouais, ils se sont améliorés. Maintenant, je veux vous montrer une autre technique. Nous n'avons pas à le faire dans ce cas, mais ça va juste vous aider à apprendre. Je sais que ce n'est pas un cours en CSS, mais que vous pouvez même apprendre quelques choses de cela. Oui, disons juste que nous voulons sélectionner tous les éléments de span. La façon dont les éléments parents sont un élément d'étiquette. Juste commenté, installez-vous. Mais c'est ce que je veux faire. Et si vous voulez le faire, si j'obtiens 0 fichier d'index, nous pouvons voir que nous voulons obtenir cet élément de span et son parent est une étiquette. C' est ce qu'on veut faire ici. Tout ce que nous aurions à faire pour cela, c'est que nous accédons à notre forme cool. Nous voulons que l'étiquette soit le parent. Et nous voulons accéder à l'élément span qui a un parent d'étiquette, comme la façon géniale cool de le faire, je veux définir sa largeur de malveillant, disons un 150 pixels. Et je veux flotter cette travée vers la gauche. Et ça va le rendre bien meilleur. Regarde ça. C' est cool ? Maintenant, ce que je veux faire est quand l'utilisateur tape dans cette boîte de saisie, c'est juste l'ancien style par défaut ennuyeux appliqué à un navigateur. Et je n'aime pas au début, vous pouvez voir les tiques aussi larges donc vous ne pouvez même pas le voir. Il a cette laide petite boîte de saisie grise, ce que je n'aime pas. Il y a des frontières que je n'aime pas. Solicitous faire preuve de créativité. Ou nous devons faire ici est que nous avons besoin d'accéder à notre formulaire de COO. Rappelez-vous, nous voulons accéder à notre balise d'entrée et si vous voulez être plus spécifique, vous pouvez, en spécifiant le temps d'entrée, pouvons-nous savoir que son type d'entrée est du texte ? Tout d'abord, ce que je veux faire, c'est que je veux changer ce contexte transparent et vraiment commencer à regarder mieux. Je veux aussi enlever la frontière à la elle dira frontière aucun. Voyez à quel point on est bons. C' est très, très cool. Je veux avoir une bordure cool et funky en bas. Ça finit juste. Cela devrait dire frontière pointillée. Nous pouvons spécifier sa couleur est de 15 à 19 pour 235. Comment ça marche ? Je pense que ça a l'air cool. Maintenant, une fois un aperçu de aucun, eh bien, en fait avant seulement moi érotique, contour de aucun, mais laissez-moi commenté. Qu' est-ce que je veux dire par cette esquisse ? Où vous pouvez voir lorsque l'utilisateur clique sur cette zone de texte d'entrée, cette bordure bleue, qui décrit cette photo. Je ne veux pas ça. Donc, si nous passons à zéro et que l'utilisateur clique sur sa zone de texte de saisie, il n'y a pas de contour. C' est tout ce que j'ai fait là-bas. Maintenant, je veux que la bordure inférieure soit légèrement plus large. Suspicious spécifie une largeur de 300 pixels. Donc, c'est vraiment mieux. Et changez simplement le style de police en italique. Je vais mettre. Je pense que c'est très cool. Wow, c'est cool. Maintenant, ce que je veux faire, c'est quand l'utilisateur commence à taper dans cette zone de saisie, nous voulons montrer à l'utilisateur qu'il est dans la zone de texte actuelle. Surtout si vous aviez plus d'un an, vous savez, nom, prénom, excentrique, cetera. Donc, nous voulons maintenant accéder à la propriété focus. Donc tout ce qu'on a à faire ici, ces xs sont cool. Téléphone. Spécifiez l'entrée. Vous n'avez pas besoin de spécifier ce haut. Je vous montre juste que c'est une façon de le faire. Et bien sûr, nous voulons appliquer tous les styles lorsque le focus est activé dans cette zone de texte de saisie. Et tout ce que je veux changer ici, nous pouvons faire beaucoup de choses que tout ce que je veux changer comme le style du bas à un pixel pointillé. Et passons en RVB à 17, 255 et 169. Comment ça ressemble à une couleur jaunie ? Ainsi, lorsque l'utilisateur se concentre sur cette zone de texte, cette bordure inférieure change de couleur. Laisse-moi zoomer. Tu peux le voir là-bas ? Qui nous sommes presque, presque fini. La dernière chose que je veux faire est de résoudre la mise à jour de style, inscrivez-vous. Et maintenant ça a l'air assez ennuyeux. Encore une fois, c'est un excès. Forme fraîche. Spécifions ensuite l'élément d'entrée que nous voulons. Mais dans ce cas, le type n'a pas de goût est que le type est un bouton Soumettre. On y va. Que pouvons-nous faire ? Nous pouvons changer la famille de polices en Calibri. Famille de polices à Calibri. Comment ça a l'air ? Aimé ? Je pense que ça a l'air cool. Les polices sont devenues un peu plus petites. Donc, je veux faire une taille de police d'un m, la même que ci-dessus. Définir la marge vers le haut. Identique off déplacer l'obscurité. Assez calme. Ouais, c'est mieux. Changeons sa couleur de fond à 57686 heures. C'est de mieux en mieux. Je ne veux pas de frontière, alors enlevons ça. Avait maintenant des bordures légèrement arrondies. Donc, le rayon de bordereau, nous allons juste avoir comme cinq pixels. Maintenant, je commence à regarder mieux. C' est un rembourrage pour les cheveux. Huit pixels, deux pixels, huit pixels, deux pixels. Comment ça a l'air ? Stein a pris la masse en commençant à ressembler à un vrai bouton. Et enfin, vous pouvez à peine lire qui prend tout ce que je veux faire maintenant c'est changer de couleur. Simple. 202 et sur 19. Comment ça ressemble à ceux et tout le week-end RBG, je vais GB. On y va. Beaucoup, beaucoup mieux équipe maintenant, quand l'utilisateur survole, il ne fait rien et je voulais, donc encore une fois, nous accédons à notre forme cool. Nous x est notre boîte de saisie. Celui que nous connaissons est un type d'entrée Soumettre. Et nous voulons affecter le style. Bien sûr, lorsque l'utilisateur survole. Et tout ce que je veux faire ici, parce que je veux juste changer l'arrière-plan à 39, 40, 60, un seul veut faire. Ainsi, lorsque l'utilisateur survole, vous pouvez voir qu'il fait sombre. Alors on y va. Je vous ai dit que ça allait être une conférence très, très simple ici. Nous venons de faire le HTML et le CSS. Et maintenant, je veux que nous commencions à ajouter du JavaScript. Je veux que nous commencions à travailler avec ce formulaire juste que vous puissiez avoir un peu de champ sur le fonctionnement des formulaires. Ce n'est pas un cours sur les formulaires qui me prendrait littéralement des heures pour parcourir tout pour faire des formulaires. Mais je vais vous donner des informations très précieuses dans un court laps de temps. Alors restez motivé et je vous verrai à la prochaine conférence. 32. Projet de cours - Comportement et tims, des modes par défaut: On y va ? Nous commençons exactement là où nous nous sommes arrêtés lors de la conférence précédente. Nous venons de commencer notre HTML et notre CSS. A droite, nous avons notre sortie. Mais bien sûr, rien ne se passe en ce moment. Qu' est-ce que je veux te montrer en premier ? Ce qui est juste regarder notre forme. Alors laissez-moi développer ce navigateur. Laisse-moi zoomer jusqu'à 100 %. Eh bien, en fait les formes, mais c'est long, n'est-ce pas ? Donc elle a un cookie opcode. Défilons vers le haut. Ouais, je pense que le pourcentage sunnite est trop délicieux plat serait 50%. Et ça a l'air beaucoup mieux. Je ne veux pas me moquer plus avec ça. D'accord. Premier jour, je veux vous montrer que nous pouvons accéder à nos formulaires directement depuis la console très, très facilement, très facilement en fait. Et l'une des façons dont nous pouvons accéder à tous les formulaires de notre page entière, ceci pour accéder à l'objet document. Sur cet objet document, il existe une propriété appelée forms. Il est littéralement mort facile et ce qui nous est retourné est une HTMLCollection. Nous connaissons déjà les collisions HTML dans la série 1 de cette série en deux parties. Que fondamentalement, il va nous retourner une HTMLCollection avec toutes nos formes, dans ce cas les chiots de longueur un parce que nous n'avons qu'une seule forme. Et bien sûr, ceux-ci sont formés avec classe de forme fraîche. C' est ainsi que nous pouvons accéder aux formulaires dans notre document. C' est la première chose que je voulais te montrer. La deuxième chose que je veux faire est pourquoi ne pas demander à l'utilisateur de taper le nom sur une dette à afficher. Ci-dessous est une sorte de faire des scènes. Comment ferons-nous ça ? Eh bien, tout d'abord, je veux que nous créions un élément de paragraphe. Et puis avec JavaScript, je veux que nous ajoutions dynamiquement tout ce que l'utilisateur tapé dans cette zone de saisie à leur élément de paragraphe. Laissez-moi vous montrer ce que je veux dire. Alors allons à notre fichier d'index et je veux éditer avec maintenant plein. Donc, ici, nous pouvons juste avoir un élément de paragraphe et donnons-lui un ID de sortie. Bien sûr que c'est vide en ce moment. Et puis dans nos styles, nous pouvons commencer à le coiffer. Et je vais appliquer juste un style très, très simple parce que je ne veux pas harceler là-dessus. Et je vais juste donner du rembourrage au sommet d'un nom. Planche sur le dessus. Je vais lui donner une bordure de masse supérieure d'un pixel, RGBA solide de l'AD1, 174 à 28, et un point zéro pendant 45 ans pour réduire cette transparence. Et avec ça, je voulais insister sur toute la boîte. Taille de la police. Nous pouvons avoir un but et la couleur peut juste être triple feuille. Ok, on y va. Nous avons donc défini à quoi devrait ressembler notre sortie. Nous lui avons donné une bordure supérieure, c'est pourquoi nous la voyons, mais rien n'est encore affiché. Comme je l'ai mentionné, quand l'utilisateur tape son nom, Bob, je voulais qu'il soit affiché ci-dessous. Comment ferons-nous ça ? Eh bien, c'est très simple. Un gars, très, très simple. Tout ce que nous avons à faire est de commencer à coder JavaScript pour accéder au DOM et nous savons comment le faire. Nous avons déjà fait beaucoup d'exemples. Tout d'abord, accédons à notre objet document sur le cou. Nous pouvons accéder à un sélecteur de requête et nous sommes pleins. Et sur ce formulaire, nous voulons ajouter un écouteur d'événement. Et l'auditeur d'événement que nous voulons écouter est ce que cela va très intéressant avec les formes. C' est l'un des points que je veux faire qui est chaque fois qu'un bouton est cliqué dans un formulaire, un événement submit est déclenché sur le formulaire lui-même, pas sur le bouton sur le formulaire lui-même. C' est l'une des choses que vous devez vraiment envelopper votre tête parce que cela va être très important pour vous en tant que développeur. Tu l'as eu ? Super. Alors c'est tout. Il sait probablement déjà que nous allons écouter un événement de soumission sur ce formulaire. Alors bien sûr, nous pouvons définir notre main et je vais juste le faire directement dans ce code ici. Qu' est-ce qu'on va faire ? Je veux prendre notre sortie. Lorsque l'utilisateur tape Bob, nous sommes allés saisir ce texte et nous voulons l'afficher dans ce paragraphe avec l'ID de sortie. Donc, en haut de notre fichier lui, pourquoi ne pas prendre notre élément de paragraphe de sortie. Je ne tape pas très bien aujourd'hui. Et c'est juste dire que nous définissons que comme une variable appelée sortie, qu'elle va être document obtenir élément par ID. Et l'ID que nous lui avons donné était sorti. On y va, donc on a notre sortie. Tout ce que nous voulons faire maintenant, c'est que nous voulons saisir notre sortie sur nos sorties, ce paragraphe, nous voulons affecter sa propriété de contenu de texte. Et oui, je vais utiliser des modèles, des littéraux. Si vous ne savez pas ce qui semblait fermer, s'il vous plaît consulter mon cours de grand maître complet JavaScript. Un très, très cool. Mais je veux juste dire ici qu'un événement de soumission a été tiré sur. Et il a utilisé les crochets bouclés du signe du dollar pour juste afficher notre horodatage. Pour afficher l'horodatage, nous devons accéder à notre événement lui-même. Et pour cela, nous devons donner cette fonction de rappel, une variable dans laquelle nous la mettons. Et comme je l'ai déjà mentionné, nous l'avons mis dans une variable appelée e. donc nous y allons. On a une variable appelée e, et on a un horodatage. Alors on y va. C' est tout ce que je veux faire est d'étendre le code ici. Ensuite, revenons à notre navigateur et commençons à taper le mot baba. Donc nous avons Bob et quand je clique sur S'inscrire, maintenant, qu'est-ce qui vient de se passer là-bas ? Ce qui vient de se passer, mais affiché brièvement et puis il a disparu. Laisse-moi te montrer à nouveau. Parlons. Cliquez sur l'inscription maintenant. Il s'affiche, puis disparaît. Que se passe-t-il ? D' accord. Laissez-moi prendre du recul. Rappelez-vous la première chose que je voulais que vous compreniez les formulaires est qu' un événement submit est déclenché chaque fois qu'un bouton est cliqué dans un formulaire. Souvenez-vous que cela me permettra de développer là-dessus. En fait, ce n'est pas seulement un bouton parce que, comme vous le savez déjà, l'inscription n'était plus un élément de bouton. Nous l'avons enveloppé dans un élément d'entrée avec le type de submit. Donc, permettez-moi de corriger ma déclaration vient de dire précédemment, un événement submit est déclenché sur un formulaire quand Eva au bouton est cliqué ou un élément d'entrée qui a le type soumettre, Zack Hanna, ce qui a du sens. C' est la première chose que je voulais traverser. La deuxième chose quand il s'agit de formulaires est que c'est un défaut ? Scènes la forme fille à votre propre site Web d'urine URL. Et quand il fait cela, il provoque une actualisation de la page. C' est le comportement par défaut. Donc, laissez-moi même pas taper quoi que ce soit dans la zone de saisie et cliquez sur Inscription. Maintenant, regardez dans le coin supérieur gauche se passait. Lève-toi. Ça provoque un rafraîchissement. Mais ne vous inquiétez pas, nous avons émis appelé prévenir par défaut. Je vais entrer dans le projet final de ce cours. Ne vous inquiétez pas trop maintenant, je vais en parler plus tard. Pour l'instant, comprenez simplement que nous pouvons arrêter ce comportement par défaut. Alors voilà, Hope fait des scènes, mais revenons dans notre code. Donc, afin d'empêcher le comportement, et encore une fois, je vais entrer plus en détail plus tard dans le cours sur nous Sedona, tourner à longhand ou faible ANA faire maintenant est que je veux accéder à notre objet d'événement que nous mettons dans une variable appelée e. Et sur cet objet, nous avons une méthode appelée prevent default. Si nous sauvegardons ceci maintenant et revenons à notre site, l'utilisateur tape Bob et cliquez sur S'inscrire. Maintenant, on y va. Oui, on a empêché la page de se rafraîchir. Et maintenant bien sûr, notre élément paragraphe avec ID de sortie obtient ce texte, affichez-le. C'est cool ? Et nous savons que lorsque cette entrée est cliquée, un événement submit est déclenché. Qui ? Ok, donc c'est un peu travailler avec des formes, habitudes, faire un peu de scènes, mais je ne veux pas m'arrêter. Oui, je veux jouer avec quelques autres événements. Donc, dans la prochaine conférence, je veux commencer à regarder des choses comme, vous savez, un événement d'entrée et l'événement focus. Je veux commencer à regarder comment on peut les utiliser. Saw espère que vous êtes comme la conception d'ampli. Je te verrai à la prochaine conférence. 33. Projet de cours - Utiliser l'événement d'entrée, l'événement de concentration et l'é: Comme je l'ai mentionné, je veux jouer avec quelques types plus uniformes. A, parce que c'est amusant et B, parce que c'est très, très précieux pour vous. Vous allez les utiliser tout le temps dans votre carrière de codage. Alors, on va se fissurer. Je veux saisir notre entrée, saisir notre boîte de texte d'entrée. Parce que nous allons utiliser ça beaucoup. Et pour ce faire, Définissons une variable JavaScript appelée texte de nom. Et saisons-le en accédant au sélecteur de requête sur notre document. Et que voulons-nous rechercher tout ce que nous voulons pour obtenir notre boîte de saisie, mais pas la soumettre. On peut donc être plus précis. Oui. On peut dire qu'il doit être de type texte. Est-ce que ça a du sens ? Et on y va. On a littéralement le nom de la boîte prend. Ok, la prochaine chose que je veux faire, c'est que je veux écouter un événement d'entrée. Et l'événement sera déclenché chaque fois que la valeur de l'entrée dans cette zone de texte change. Comment écoutons-nous cet événement ? Tout d'abord, je veux faire un commentaire juste en disant, jouons avec différents types. Défilons vers le bas. C' est le codage de la pensée. La première chose que je veux faire est que je veux attraper, je vais nommer la variable prend avec juste définir le reste, c'est cette boîte de saisie. Je veux ensuite ajouter un écouteur d'événement appelé input. Et puis je veux exécuter notre fonction de gestionnaire juste ici. Tout ce que je veux faire, c'est que je veux accéder à notre variable de sortie. Rappelez-vous, faites défiler l'application, c'est notre élément paragraphe. Et tout ce que je veux faire, c'est que je me demande adapter à la propriété de contenu de texte. Et encore une fois, je vais utiliser des littéraux de modèle. La valeur saisie est. Et ce qui est très cool ici, c'est que chaque élément d'entrée dans votre page, l'API DOM nous donne accès à une tonne de propriétés sur cette boîte de saisie. Et l'un d'eux est appelé comme propriété de valeur. Et ça nous donne la surprise, la surprise. La valeur qui a été saisie dans cette zone de saisie. Donc, tout ce que nous avons à faire est de saisir la boîte de saisie, que nous avons définie dans une variable appelée texte de nom et d'accéder à sa propriété de valeur. C' est vraiment le simple. Et si nous allons sur notre page maintenant et que nous tapons Bob B, B, vous pouvez voir qu'il met à jour le texte ci-dessous en temps réel. Connaissez aussi baba, baba, baba, baba, baba. Alors on y va. Vous pouvez voir à quel point il est facile de travailler avec des formulaires. Et si nous revenons à notre code, oui, vous pourriez penser à Clyde, cet événement d'entrée, pas spécifique formé et vous seriez correct à 100%. Ce n'est pas seulement lié aux formes que je vous montre différentes façons d'écouter les événements avec la forme intérieure. Et mentionné dans la conférence précédente que nous avons l'événement focus. Alors pourquoi ne pas jouer avec ça ? Et bien que cela puisse ne pas paraître joli si l'utilisateur tape ou se concentre sur cette boîte de saisie. Pourquoi ne pas changer cette couleur d'arrière-plan ? Alors je vais juste te montrer comment ça marche. Donc, pour ce faire, encore une fois, Accédez à notre élément d'entrée, que nous mettons dans une variable appelée texte de nom. Je veux ajouter un écouteur d'événement. Et cette fois écoutons un événement focus. Et maintenant, je veux saisir notre événement lui-même et le mettre dans une variable appelée e. et nous allons aborder cela plus tard dans le cours. Ne vous inquiétez pas si vous ne comprenez pas tout à fait maintenant. Mais tout ce que je veux faire ici, c'est que je veux saisir notre événement lui-même. Je veux avoir cette cible, aka ce sera cette entrée elle-même qui combattra l'événement. Nous voulons affecter cette propriété de style sur moi. Nous voulons changer l'arrière-plan et nous pouvons changer l'arrière-plan en bleu clair. Alors revenons ici. Cliquez maintenant et cette boîte de saisie. Et on y va. Le est le fond bleu clair. Et bien sûr que c'est horrible. Donc, vous pouvez aussi y aller. Nous avons bien fait et changé vos connaissances de base. Voulons-nous changer la couleur et la couleur que nous pouvons simplement changer en noir. Je te montre ce que tu peux faire. Évidemment. A mon avis, ça n'a pas l'air aussi beau qu'avant. Ce n'est qu'un exemple d'utilisation de cette entrée. O de par inadvertance avait coché l'inscription. Maintenant, on y va. Laissez-moi rafraîchir la page. Revenons à notre code et c'est ainsi que nous pouvons utiliser l'événement focus comme j'ai un peu de sens. J' espère que oui et oui, j'essaie juste de vous donner une idée de ce que vous pouvez faire avec certaines de ces choses. Nous avons également une copie des veines, événements de collage lorsque l'utilisateur copie et colle des choses, un grains de café, coupe, prend, et ombre pour vous montrer un limiteur, vous montrer. Donc les listes, xs sont nommés texte. Encore une fois, vous faites défiler vers le bas. Ouais, je n'allais pas entrer dans ça, mais maintenant que j'ai mentionné ça, laisse-moi te montrer rapidement. Ajoutons un écouteur d'événement appelé copy. Et encore une fois, c'est juste exécuter notre gestionnaire directement dans cette fonction ici. Et cela juste alerter quelque chose à l'écran. Vous avez, vous avez copié du texte. Je veux dire, tu peux être vraiment créatif avec tout ça. Oh, on y va. Revenons à notre navigateur. Tapons Bob et Bob, et laissez-moi le mettre en surbrillance et aller Control C sur mon clavier. Copier. Et voilà, nous recevons une alerte disant que vous avez copié du texte. La même chose s'appliquerait. Bien sûr, si nous mettons de la pâte ici, retournez à notre navigateur. Vous n'avez pas copié, vous avez collé du texte. Si nous retournons à notre navigateur, nous avons parlé de nous copier, désolé, Bob, nous le copions. Nous supprimons tout assez. Je colle. Nous pouvons vous avertir de coller le texte. Je suppose que vous commencez à avoir des formes moléculaires. Maintenant, vous commencez à voir à quel point il est facile de travailler avec les veines dans les formes et ne prenez pas toutes ces connaissances pour acquises. Vous avez vraiment beaucoup appris en très peu de temps. Vous savez qu'un formulaire envoie un événement de soumission chaque fois qu'un bouton de soumission est cliqué. Ou si un élément d'entrée est cliqué qui a le type d'envoi. Et vous savez qu'un formulaire a actualisé la page par défaut, que nous l'empêchons d'ailleurs, et vous savez comment travailler avec les événements maintenant si dans un formulaire. Donc je sais que ce sont des exemples très basiques, mais sérieusement, ça va vous aider beaucoup à l'avenir. Nous ne faisons que commencer dans ce cours. Alors ne nous arrêtons pas ici. Continuons à voir maintenant. 34. Cours Outro: Oh bien, et les murs impitoyables si loin dans tout le cours. Et pour avoir terminé ce cours, vous êtes vraiment Scholar Walden. Je me suis beaucoup amusé. Et dans cette classe, vous connaissez maintenant VTS. Vous connaissez les différents types d'écouteurs d'événements que nous pouvons joindre à la page. Vous savez ce qu'est un écouteur d'événement, ce qu'est un gestionnaire d'événements. Que dans la prochaine perte, il y a toujours un homme de Butters. Mais dans la classe suivante, nous allons discuter d' un concept très avancé quand il s'agit de choses. Et c'est, nous allons regarder la hiérarchie des nœuds et ensuite nous allons discuter en tant que INK, public et événement, capture, deux concepts très importants quand il s'agit de travailler avec le DOM. Donc, je ne peux vraiment pas attendre. Donc, nous n'avons pas encore tout à fait fini avec les médias HOT, juste une ou deux classes plus tard. J' espère que tu t'amuses autant que moi, mais tu verras certains prendre une pause. Profiter de la vue est magnifique et je vous verrai étudiant medea dans la toute, toute prochaine perte. Merci.