D'accord, nous reviendrons.
Je pense donc qu'il est temps pour vous de donner un peu de ceci un coup sur votre propre.
J'ai donc un exercice rapide.
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.
C'est tout.
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.
Comment tu fais ça.
Je vous laisse la parole.
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.
Totalement à vous.
Donc Pasic vidéo en ce moment.
Donnez-lui un coup par vous-même.
C'est vraiment important que vous fassiez cela et que vous reveniez quand vous êtes prêt et nous allons examiner une solution ensemble.
D'ACCORD.
Alors parlons de comment nous pouvons faire ce travail.
Tout d'abord, nous avons besoin d'un fichier femelle âgé que j'ai ici besoin d'ajouter dans mon HMO.
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.
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.
Donc, juste pour vous mettre dans la bonne habitude et de faire un nouveau fichier, nous allons simplement appeler toggle.
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.
Alors allons-y et ouvrez ce fichier dans le navigateur et voyez ce que nous obtenons.
La première chose que je vais souligner ici.
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.
Nous ne voyons donc pas le bouton jusqu'à ce que je me débarrasse de l'alerte.
Et c'est vraiment important et nous voulons y remédier.
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.
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é.
Nous avons donc quelques façons de résoudre ce problème.
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é.
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.
Donc, si nous rafraîchissons maintenant, vous verrez les boutons déjà là.
Et puis nous obtenons l'alerte qui dit le connecter.
Alors maintenant parlons de la logique.
Let's go à notre bascule J.S. Et sélectionnez le bouton.
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.
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.
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.
Lorsque nous cliquons, cliquez sur rafraîchir. Cliquez sur et cliquez sur.
Voilà qui est génial.
Les choses sont branchées correctement maintenant tout ce que nous devons faire est de changer la couleur de fond du corps.
Donc, je commencerais par juste faire le corps du document de vidage et nous allons juste le définir pour être violet.
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.
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.
C'est juste un raccourci intégré dans le document.
Alors je fais que je le change en pourpre et nous devrions être bien d'aller ici.
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.
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.
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.
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.
Et puis ce que nous devons faire est à l'intérieur de notre javascript que nous allons vérifier si est violet.
Donc, si c'est violet, alors nous allons vouloir faire la couleur de fond blanc comme ça.
Et le changement doit être blanc et alors Autrement nous ferons la même chose sauf que nous la rendrons pourpre.
La seule question, bien sûr, c'est que le pourpre est maintenant toujours faux.
Nous allons vouloir changer cela.
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.
Et cela doit être une valeur booléenne bien sûr pas la chaîne true ou la chaîne false.
Donc, ce que nous avons fait ici est de créer notre propre petite cible tracker.
Ce booléen est violet départ est faux.
La première fois à travers elle est pourpre.
Cela ne se produit pas.
Donc, nous allons à l'autre nous changer le fond d'être violet et puis est violet est maintenant vrai.
Donc, la prochaine fois que l'utilisateur clique, il est violet qui est maintenant vrai.
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.
Donc, le conseil vérificateur de rafraîchissements s'assure que nous n'avons pas d'erreurs.
Et maintenant, nous allons essayer de cliquer violet violet blanc et blanc.
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.
Nous avons une façon plus courte de le faire simplement en écrivant.
Est violet égale pas est violet.
Donc, cela va juste pour passer entre vrai et faux ou faux et vrai juste le nie.
C'est donc un bon raccourci.
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.
Il y avait une méthode appelée bascule.
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.
Et appelez-le simplement violet ou simplement pourpre.
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.
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.
Tout ce que nous voulons faire est de documenter le corps.
Commutateur sans classe.
Et puis le nom de la classe que nous venons de faire a été appelé un pourpre.
Rappelez-vous donc ce que cela va faire si le corps n'a pas la classe appelée violet il va l'ajouter.
Mais il vérifie si elle a déjà le nom de la classe violet.
Il va l'enlever.
Donc, nous n'avons pas à suivre si c'est violet ou blanc.
Actuellement, si la classe est appliquée ou si elle n'est pas nous n'avons pas besoin c'est Boullion violet plus.
C'est fondamentalement tout enveloppé au lieu de bascule classless.
Alors je rafraîchis.
Je clique et vous pouvez voir qu'il ressemble le même.
Mais si nous inspectons et nous regardons le corps.
Et c'est parti.
Classe d'avis égale pourpre.
Et puis je clique et maintenant nous n'avons plus de violet classique.
Il s'en va.
C'est le document en haut du corps.
Le basculement de liste de classe qui est vraiment vraiment utile.
C'est beaucoup plus court que cette logique ici.
D'accord, voilà ma solution.