1 00:00:00,380 --> 00:00:02,130 D'accord, nous reviendrons. 2 00:00:02,130 --> 00:00:05,070 Je pense donc qu'il est temps pour vous de donner un peu de ceci un coup sur votre propre. 3 00:00:05,400 --> 00:00:07,310 J'ai donc un exercice rapide. 4 00:00:07,560 --> 00:00:15,620 Tout ce que vous devez faire est de créer un nouvel âge ou de déposer un nouveau fichier javascript et d'ajouter un seul bouton à l'âge de mon fichier. 5 00:00:15,630 --> 00:00:16,920 C'est tout. 6 00:00:16,920 --> 00:00:24,780 Et puis quand je clique sur ce bouton tout ce que vous devez faire est de changer la couleur d'arrière-plan du corps du blanc au violet. 7 00:00:24,780 --> 00:00:25,600 Comment tu fais ça. 8 00:00:25,600 --> 00:00:27,190 Je vous laisse la parole. 9 00:00:27,240 --> 00:00:41,280 Il ya quelques façons différentes que vous pourriez le faire étant donné les différentes choses dont nous avons parlé jusqu'à présent, mais vous devez exécuter du code lorsque vous cliquez sur le bouton et que le code doit changer la couleur de fond entre deux couleurs si c'est violet et Blanc ou vous choisissez de meilleures couleurs. 10 00:00:41,280 --> 00:00:42,220 Totalement à vous. 11 00:00:42,510 --> 00:00:44,010 Donc Pasic vidéo en ce moment. 12 00:00:44,190 --> 00:00:45,560 Donnez-lui un coup par vous-même. 13 00:00:45,580 --> 00:00:52,460 C'est vraiment important que vous fassiez cela et que vous reveniez quand vous êtes prêt et nous allons examiner une solution ensemble. 14 00:00:54,620 --> 00:00:55,280 D'ACCORD. 15 00:00:55,350 --> 00:00:58,110 Alors parlons de comment nous pouvons faire ce travail. 16 00:00:58,110 --> 00:01:04,870 Tout d'abord, nous avons besoin d'un fichier femelle âgé que j'ai ici besoin d'ajouter dans mon HMO. 17 00:01:05,310 --> 00:01:16,590 Appelons cette bascule de couleur et tout que nous avons besoin est un bouton simple et nous allons juste ajouter le clic moi juste comme cela. 18 00:01:16,650 --> 00:01:27,260 Maintenant, nous avons besoin de notre fichier javascript et nous pourrions facilement faire quelque chose où nous ajoutons juste une balise script ici et à notre javascript là-bas, mais ce n'est pas une bonne pratique. 19 00:01:27,270 --> 00:01:34,170 Donc, juste pour vous mettre dans la bonne habitude et de faire un nouveau fichier, nous allons simplement appeler toggle. 20 00:01:34,190 --> 00:01:57,450 J.S. Dans le même répertoire et à l'intérieur comme je l'aime toujours faire, je vais ajouter une alerte juste pour s'assurer qu'ils sont connectés OK et puis nous devons aller et de lien vers ce script et qui doit être source égale toggle dot Jay Oui, juste comme ça. 21 00:01:57,510 --> 00:02:02,880 Alors allons-y et ouvrez ce fichier dans le navigateur et voyez ce que nous obtenons. 22 00:02:02,880 --> 00:02:04,640 La première chose que je vais souligner ici. 23 00:02:04,800 --> 00:02:10,770 Notez que nous avons obtenu l'alerte qui dit que les choses sont connectées, mais le bouton n'est pas encore sur la page. 24 00:02:11,220 --> 00:02:14,710 Nous ne voyons donc pas le bouton jusqu'à ce que je me débarrasse de l'alerte. 25 00:02:15,030 --> 00:02:17,450 Et c'est vraiment important et nous voulons y remédier. 26 00:02:17,490 --> 00:02:30,060 Ce qui nous dit est que notre code ici est en cours d'exécution d'abord avant le bouton est sur la page à tous et le code que nous allons écrire va s'appuyer sur le fait que le bouton est sur la page. 27 00:02:30,150 --> 00:02:39,100 Nous ne pouvons pas ajouter un écouteur rapide autrement l'écouteur d'événement va seulement travailler et ajouter des événements aux articles qui sont sur la page au moment où il est exécuté. 28 00:02:39,450 --> 00:02:41,290 Nous avons donc quelques façons de résoudre ce problème. 29 00:02:41,310 --> 00:02:49,710 Le plus simple pour l'instant est juste de déplacer notre script jusqu'à la fin du corps afin que nous sachions à coup sûr que ce bouton a été chargé. 30 00:02:49,710 --> 00:02:55,680 Nous allons apprendre une autre façon de le faire lorsque nous arrivons à la requête Jay, mais cela fonctionne parfaitement bien pour l'instant. 31 00:02:55,980 --> 00:02:59,440 Donc, si nous rafraîchissons maintenant, vous verrez les boutons déjà là. 32 00:02:59,610 --> 00:03:03,140 Et puis nous obtenons l'alerte qui dit le connecter. 33 00:03:03,210 --> 00:03:05,470 Alors maintenant parlons de la logique. 34 00:03:05,490 --> 00:03:09,460 Let's go à notre bascule J.S. Et sélectionnez le bouton. 35 00:03:09,660 --> 00:03:20,620 Ainsi, le bouton var est égal au bouton de sélection des requêtes de document et c'est juste une façon de le sélectionner bien sûr. 36 00:03:20,970 --> 00:03:36,650 Et puis nous voulons ajouter notre écouteur d'événement afin que le bouton qui ajoutent l'écouteur d'événement cliquent et alors notre fonction qui exécutera la fonction de rappel juste comme cela. 37 00:03:37,290 --> 00:03:46,450 Et j'aime toujours recommencer avec une alerte qui dit juste cliqué juste pour s'assurer que nous choisissons la bonne chose et que cette fonction est exécutée. 38 00:03:46,470 --> 00:03:51,910 Lorsque nous cliquons, cliquez sur rafraîchir. Cliquez sur et cliquez sur. 39 00:03:51,960 --> 00:03:52,860 Voilà qui est génial. 40 00:03:52,860 --> 00:03:59,280 Les choses sont branchées correctement maintenant tout ce que nous devons faire est de changer la couleur de fond du corps. 41 00:03:59,700 --> 00:04:04,920 Donc, je commencerais par juste faire le corps du document de vidage et nous allons juste le définir pour être violet. 42 00:04:05,100 --> 00:04:14,980 Donc, documenter le style de carrosserie que l'arrière-plan est égal au violet et vous verrez que j'ai utilisé le corps du document. 43 00:04:15,150 --> 00:04:35,510 Nous pourrions aussi documenter ce sélecteur de requêtes et donner le nom de balise corporelle ou quelque chose comme document diked obtenir des éléments par nom de balise corps zéro, mais il est beaucoup plus facile d'utiliser le corps de document point. 44 00:04:35,670 --> 00:04:38,730 C'est juste un raccourci intégré dans le document. 45 00:04:38,730 --> 00:04:42,970 Alors je fais que je le change en pourpre et nous devrions être bien d'aller ici. 46 00:04:43,110 --> 00:04:50,770 Si je clique, nous obtenons un corps violet, mais bien sûr une partie de ce problème a été basculer d'avant en arrière. 47 00:04:50,940 --> 00:04:57,870 Donc, quand je clique ici, il retourne au blanc, puis je clique de nouveau et retourne au violet et il continue à basculer entre les deux. 48 00:04:58,290 --> 00:05:16,040 Donc, ce que nous aurons besoin de faire est d'ajouter une logique et notre logique va ressembler à quelque chose comme ceci si le blanc peut obtenir pourpre autre le faire avec quelque chose comme ça. 49 00:05:16,350 --> 00:05:29,930 Donc, la façon dont je vais gérer ce que je vais créer une valeur booléenne appelée est violet Savar est violet et il va commencer comme faux parce que lorsque je rafraîchir la page n'est pas violet pour que le pourpre est faux. 50 00:05:29,970 --> 00:05:37,950 Et puis ce que nous devons faire est à l'intérieur de notre javascript que nous allons vérifier si est violet. 51 00:05:38,910 --> 00:05:50,370 Donc, si c'est violet, alors nous allons vouloir faire la couleur de fond blanc comme ça. 52 00:05:50,520 --> 00:06:02,020 Et le changement doit être blanc et alors Autrement nous ferons la même chose sauf que nous la rendrons pourpre. 53 00:06:02,040 --> 00:06:06,930 La seule question, bien sûr, c'est que le pourpre est maintenant toujours faux. 54 00:06:06,930 --> 00:06:08,610 Nous allons vouloir changer cela. 55 00:06:08,880 --> 00:06:27,610 Donc, si est violet si elle est le document pourpre style du corps, mais l'arrière-plan est égal au blanc et puis nous dirais est violet est maintenant appelé le faux parce que nous avons juste le changer en blanc et puis quand nous l'avons dit violet, nous dirions est Le pourpre est égal à vrai. 56 00:06:27,840 --> 00:06:35,130 Et cela doit être une valeur booléenne bien sûr pas la chaîne true ou la chaîne false. 57 00:06:35,160 --> 00:06:38,280 Donc, ce que nous avons fait ici est de créer notre propre petite cible tracker. 58 00:06:38,280 --> 00:06:41,020 Ce booléen est violet départ est faux. 59 00:06:41,070 --> 00:06:43,590 La première fois à travers elle est pourpre. 60 00:06:43,590 --> 00:06:44,510 Cela ne se produit pas. 61 00:06:44,610 --> 00:06:49,990 Donc, nous allons à l'autre nous changer le fond d'être violet et puis est violet est maintenant vrai. 62 00:06:50,190 --> 00:06:54,460 Donc, la prochaine fois que l'utilisateur clique, il est violet qui est maintenant vrai. 63 00:06:54,480 --> 00:06:59,930 Donc, si nous changeons l'arrière-plan pour être blanc et puis est violet est mis à faux et nous continuons à basculer d'avant en arrière. 64 00:06:59,970 --> 00:07:03,640 Donc, le conseil vérificateur de rafraîchissements s'assure que nous n'avons pas d'erreurs. 65 00:07:03,900 --> 00:07:08,910 Et maintenant, nous allons essayer de cliquer violet violet blanc et blanc. 66 00:07:09,450 --> 00:07:18,180 Donc, il ya un petit facteur que nous pouvons faire ce qui est que nous n'avons pas à définir est violet pour être faux et est violet pour être vrai dans l'instruction if. 67 00:07:18,180 --> 00:07:21,110 Nous avons une façon plus courte de le faire simplement en écrivant. 68 00:07:21,150 --> 00:07:25,360 Est violet égale pas est violet. 69 00:07:25,770 --> 00:07:31,280 Donc, cela va juste pour passer entre vrai et faux ou faux et vrai juste le nie. 70 00:07:31,440 --> 00:07:33,660 C'est donc un bon raccourci. 71 00:07:34,200 --> 00:07:46,000 Vous pouvez le voir ici maintenant c'est Heigl's et c'est un peu plus court, mais il ya une façon encore plus courte de faire le bureau que nous l'espérons certains d'entre vous pensé quand nous avons appris sur la liste de classe. 72 00:07:46,110 --> 00:07:48,230 Il y avait une méthode appelée bascule. 73 00:07:48,240 --> 00:08:01,590 Donc, si nous définissons un CSA comme classe et nous allons aller de l'avant et faire cela au lieu de mon style, je vais juste faire une balise de style pour l'instant et ajouter une classe appelée Dot. 74 00:08:01,590 --> 00:08:04,650 Et appelez-le simplement violet ou simplement pourpre. 75 00:08:04,650 --> 00:08:16,680 C'est un nom de classe et nous allons simplement dire arrière-plan est violet et c'est tout ce que nous devons faire ce que nous allons faire est de basculer cette classe sur et hors du corps. 76 00:08:16,680 --> 00:08:31,720 Donc, revenir ici et je vais simplement copier ce pour l'instant et compté et tout ce que nous avons besoin de faire est quand vous cliquez sur le bouton et ils commenter cela ou de se débarrasser de cela se débarrasser de cela ainsi. 77 00:08:31,740 --> 00:08:37,820 Tout ce que nous voulons faire est de documenter le corps. 78 00:08:38,230 --> 00:08:41,900 Commutateur sans classe. 79 00:08:42,210 --> 00:08:46,390 Et puis le nom de la classe que nous venons de faire a été appelé un pourpre. 80 00:08:46,470 --> 00:08:53,000 Rappelez-vous donc ce que cela va faire si le corps n'a pas la classe appelée violet il va l'ajouter. 81 00:08:53,400 --> 00:08:56,510 Mais il vérifie si elle a déjà le nom de la classe violet. 82 00:08:56,580 --> 00:08:57,660 Il va l'enlever. 83 00:08:57,660 --> 00:09:00,630 Donc, nous n'avons pas à suivre si c'est violet ou blanc. 84 00:09:00,630 --> 00:09:05,850 Actuellement, si la classe est appliquée ou si elle n'est pas nous n'avons pas besoin c'est Boullion violet plus. 85 00:09:06,270 --> 00:09:09,660 C'est fondamentalement tout enveloppé au lieu de bascule classless. 86 00:09:09,930 --> 00:09:11,390 Alors je rafraîchis. 87 00:09:12,000 --> 00:09:15,980 Je clique et vous pouvez voir qu'il ressemble le même. 88 00:09:16,110 --> 00:09:19,890 Mais si nous inspectons et nous regardons le corps. 89 00:09:19,890 --> 00:09:20,670 Et c'est parti. 90 00:09:20,790 --> 00:09:22,930 Classe d'avis égale pourpre. 91 00:09:22,980 --> 00:09:26,310 Et puis je clique et maintenant nous n'avons plus de violet classique. 92 00:09:26,310 --> 00:09:27,570 Il s'en va. 93 00:09:27,990 --> 00:09:29,830 C'est le document en haut du corps. 94 00:09:29,910 --> 00:09:32,760 Le basculement de liste de classe qui est vraiment vraiment utile. 95 00:09:32,760 --> 00:09:35,490 C'est beaucoup plus court que cette logique ici. 96 00:09:35,490 --> 00:09:37,030 D'accord, voilà ma solution.