1 00:00:00,380 --> 00:00:02,130 OK we zullen terugkomen. 2 00:00:02,130 --> 00:00:05,070 Dus ik denk dat het tijd is voor u om een ​​deel van deze een schot op uw eigen geven. 3 00:00:05,400 --> 00:00:07,310 Dus ik heb een snelle oefening. 4 00:00:07,560 --> 00:00:15,620 Het enige dat u hoeft te doen is het creëren van een nieuw tijdperk of een nieuwe JavaScript-bestand bestand en voeg een enkele knop om de leeftijd om mijn dossier. 5 00:00:15,630 --> 00:00:16,920 Dat is het. 6 00:00:16,920 --> 00:00:24,780 En toen ik op die knop alles wat je hoeft te doen is de achtergrondkleur van het lichaam van wit tot paars. 7 00:00:24,780 --> 00:00:25,600 Hoe doe je dat. 8 00:00:25,600 --> 00:00:27,190 Ik laat het aan jou. 9 00:00:27,240 --> 00:00:41,280 Er zijn een paar verschillende manieren waarop je zou kunnen doen het, gezien de verschillende dingen die we hebben gesproken over zo ver, maar je moet wat code uit te voeren wanneer u klikt op de knop en de code moet de achtergrondkleur te veranderen tussen twee kleuren of het paars en wit of kies je wat betere kleuren. 10 00:00:41,280 --> 00:00:42,220 Helemaal aan jou. 11 00:00:42,510 --> 00:00:44,010 Dus Pasic video op dit moment. 12 00:00:44,190 --> 00:00:45,560 Geef dat een schot op uw eigen. 13 00:00:45,580 --> 00:00:52,460 Dat is echt belangrijk dat je dat doet en dan terug te komen wanneer je er klaar voor bent en we zullen dan samen een oplossing te gaan. 14 00:00:54,620 --> 00:00:55,280 OK. 15 00:00:55,350 --> 00:00:58,110 Dus laten we praten over hoe we dit werk kunnen maken. 16 00:00:58,110 --> 00:01:04,870 First things first we een oude vrouw bestand dat ik hier moet toevoegen in mijn HMO nodig. 17 00:01:05,310 --> 00:01:16,590 Laten we noemen deze kleur toggle en alles wat we nodig hebben is een enkele knop en we zullen gewoon toe te voegen klik me net als dat. 18 00:01:16,650 --> 00:01:27,260 Nu moeten we onze javascript-bestand en we konden gemakkelijk iets waar we hier en slechts een script tag toe te voegen aan onze javascript daar doen, maar het is niet een grote praktijk. 19 00:01:27,270 --> 00:01:34,170 Dus gewoon om je in de juiste gewoonte en maak een nieuw bestand dat we zullen gewoon toggle noemen. 20 00:01:34,190 --> 00:01:57,450 J.S. in dezelfde map en de binnenkant zoals ik altijd graag doe ik een waarschuwing toe te voegen om ervoor te zorgen dat ze aangesloten op OK en we moeten gaan en een link naar het script en dat moet de bron zijn gelijk toggle dot Jay Ja gewoon zoals dat. 21 00:01:57,510 --> 00:02:02,880 Dus laten we gaan door en opent dit bestand in de browser en zien wat we krijgen. 22 00:02:02,880 --> 00:02:04,640 Eerste ding dat ik hier zal wijzen. 23 00:02:04,800 --> 00:02:10,770 Merk op dat we de waarschuwing die zegt dat dingen worden aangesloten, maar de knop is niet op de pagina nog niet. 24 00:02:11,220 --> 00:02:14,710 Zodat we niet echt zien op de knop totdat ik te ontdoen van de signalering. 25 00:02:15,030 --> 00:02:17,450 En dat is heel belangrijk en we willen dat op te lossen. 26 00:02:17,490 --> 00:02:30,060 Wat dat ons vertelt is dat onze code dan eerst hier wordt uitgevoerd voordat de knop op de pagina bij allen en de code die we gaan schrijven gaat te vertrouwen op het feit dat de knop op de pagina. 27 00:02:30,150 --> 00:02:39,100 We kunnen niet toevoegen een snelle luisteraar anders wordt de gebeurtenislistener is alleen maar om te werken en events toevoegen aan items die op de pagina op het moment dat het wordt gerund. 28 00:02:39,450 --> 00:02:41,290 Dus hebben we een paar manieren om de vaststelling van dit. 29 00:02:41,310 --> 00:02:49,710 De eenvoudigste een voor nu is het alleen maar om ons script omlaag te verplaatsen naar het einde van het lichaam, zodat we zeker weten OK deze knop is geladen. 30 00:02:49,710 --> 00:02:55,680 We zullen leren over een andere manier om dit te doen als we in Jay vraag, maar dit werkt prima voor nu. 31 00:02:55,980 --> 00:02:59,440 Dus als we nu vernieuwen je de knoppen zien er al. 32 00:02:59,610 --> 00:03:03,140 En dan krijgen we de waarschuwing die zegt aansluiten. 33 00:03:03,210 --> 00:03:05,470 Dus nu laten we praten over de logica. 34 00:03:05,490 --> 00:03:09,460 Laten we naar onze toggle J.S. en selecteert u de knop. 35 00:03:09,660 --> 00:03:20,620 Dus var knop gelijk document queries selectieknop en dat is gewoon een manier om het natuurlijk te selecteren. 36 00:03:20,970 --> 00:03:36,650 En dan willen we onze event listener toe te voegen zodat de knop die toe te voegen event listener klikken en dan is onze functie die de callback functie, net als dat zal lopen. 37 00:03:37,290 --> 00:03:46,450 En ik vind het altijd leuk om opnieuw te beginnen met een waarschuwing dat alleen maar zegt klikte gewoon om ervoor te zorgen dat we selecteren van de juiste ding en dat deze functie wordt uitgevoerd. 38 00:03:46,470 --> 00:03:51,910 Als we dat doen dus klik vernieuwen laten klikken en we geklikt. 39 00:03:51,960 --> 00:03:52,860 Dus dat is geweldig. 40 00:03:52,860 --> 00:03:59,280 Dingen zijn aangesloten correct nu alles wat we moeten doen is de achtergrondkleur van het lichaam. 41 00:03:59,700 --> 00:04:04,920 Dus ik zou beginnen door gewoon te doen document dump lichaam en laten we stellen het gewoon paars te zijn. 42 00:04:05,100 --> 00:04:14,980 Dus documenteren up lichaam stijl die achtergrond is gelijk aan paars en je zult zien dat ik gebruikte document dot lichaam. 43 00:04:15,150 --> 00:04:35,510 Wij konden ook document dat selector vraagt ​​te doen en geven het lichaam tag naam of iets dergelijks document bedijkt krijgen elementen op tag naam lichaam nul, maar het is veel gemakkelijker gewoon document gebruiken dot lichaam. 44 00:04:35,670 --> 00:04:38,730 Het is gewoon een snelkoppeling die is ingebouwd in het document. 45 00:04:38,730 --> 00:04:42,970 Dus ik doen, opdat ik het veranderen in paars en we moeten goed zijn om hier te gaan. 46 00:04:43,110 --> 00:04:50,770 Als ik klik krijgen we een paarse lichaam, maar uiteraard een deel van dit probleem werd heen en weer schakelen. 47 00:04:50,940 --> 00:04:57,870 Dus als ik klik hier gaat het terug naar wit en klik vervolgens ik weer en gaat terug naar paars en het houdt het schakelen tussen de twee. 48 00:04:58,290 --> 00:05:16,040 Dus wat we moeten doen is voeg wat logica en onze logica gaat iets uitzien als White anders paars kan krijgen te maken met iets dergelijks. 49 00:05:16,350 --> 00:05:29,930 Dus de manier waarop ik ga om dit te verwerken Ik ga een boolean waarde genaamd te creëren is paars Savar is paars en het gaat als vals te beginnen, want toen ik de pagina te vernieuwen is het niet zo paars paars is vals. 50 00:05:29,970 --> 00:05:37,950 En wat we moeten doen is de binnenkant van onze javascript we gaan om te controleren of is paars. 51 00:05:38,910 --> 00:05:50,370 Dus als het paars dan gaan we willen de achtergrondkleur wit net als dit te maken. 52 00:05:50,520 --> 00:06:02,020 En verandering moet wit zijn en dan Anders zullen we hetzelfde doen, behalve wij het paars zal maken. 53 00:06:02,040 --> 00:06:06,930 Het enige probleem is natuurlijk dat paars is op dit moment is altijd vals. 54 00:06:06,930 --> 00:06:08,610 We gaan willen dat veranderen. 55 00:06:08,880 --> 00:06:27,610 Dus als paars als het paarse document up lichaam stijl, maar de achtergrond is gelijk aan wit en dan zouden we zeggen is paars heet nu de valse, omdat we het gewoon veranderen in wit en toen we zeiden dat het tot paars zouden we zeggen is zijn paars gelijk waar. 56 00:06:27,840 --> 00:06:35,130 En dit moet een boolean waarde van natuurlijk niet de string waar of de snaar vals zijn. 57 00:06:35,160 --> 00:06:38,280 Dus wat we hier doen is het creëren van ons eigen doel tracker. 58 00:06:38,280 --> 00:06:41,020 Deze boolean is paars start is vals. 59 00:06:41,070 --> 00:06:43,590 De eerste keer door het paars. 60 00:06:43,590 --> 00:06:44,510 Dat gebeurt niet. 61 00:06:44,610 --> 00:06:49,990 Dus gaan we naar de andere we veranderen de achtergrond van paars zijn en dan is paars is nu waar. 62 00:06:50,190 --> 00:06:54,460 Dus de volgende keer dat de gebruiker erop klikt paars dat is nu waar. 63 00:06:54,480 --> 00:06:59,930 Dus als we de achtergrond wit zijn te veranderen en dan is paars is ingesteld op false en we blijven heen en weer schakelen. 64 00:06:59,970 --> 00:07:03,640 Dus refresh checker gemeente zorgt ervoor dat we geen fouten. 65 00:07:03,900 --> 00:07:08,910 En nu laten we proberen te klikken paars wit paars en wit. 66 00:07:09,450 --> 00:07:18,180 Dus er is een kleine re factor die we kunnen doen wat we niet hoeven te stellen is paars vals te zijn en is paars om waar te zijn in de if-statement. 67 00:07:18,180 --> 00:07:21,110 We hebben een kortere manier van doen dat alleen maar door te schrijven. 68 00:07:21,150 --> 00:07:25,360 Is paars evenaart niet paars. 69 00:07:25,770 --> 00:07:31,280 Dus dat is gewoon gaan om het te maken tussen ware en valse of valse en ware gewoon ontkent te schakelen. 70 00:07:31,440 --> 00:07:33,660 Dus dat is een mooie shortcut. 71 00:07:34,200 --> 00:07:46,000 U kunt hier zien dat het nu is het Heigl's en het is een beetje korter, maar er is zelfs een kortere manier van doen kantoor dat hopelijk sommigen van u dacht toen we hoorden van de klasse lijst. 72 00:07:46,110 --> 00:07:48,230 Er was een methode genaamd toggle. 73 00:07:48,240 --> 00:08:01,590 Dus als we definiëren een CSA als klasse en laten we ga je gang en doe dat in plaats van mijn stijl Ik ga gewoon naar een stijl tag te maken voor je aan en voeg een klasse met de naam Dot. 74 00:08:01,590 --> 00:08:04,650 En laten we noemen het paars of gewoon paars. 75 00:08:04,650 --> 00:08:16,680 Dat is de naam van een klasse en we zullen gewoon zeggen dat de achtergrond is paars en dat is alles wat we moeten doen wat we gaan doen is te schakelen deze klasse aan en uit op het lichaam. 76 00:08:16,680 --> 00:08:31,720 Dus ga hier terug en ik ga om alleen deze voor nu kopiëren en telde en alles wat we moeten doen is wanneer u klikt op de knop en ze commentaar this out of zich te ontdoen van deze te ontdoen van dit zo goed. 77 00:08:31,740 --> 00:08:37,820 Dit alles alles wat we willen doen is documenteren up lichaam. 78 00:08:38,230 --> 00:08:41,900 Classless toggle. 79 00:08:42,210 --> 00:08:46,390 En dan de naam van de klasse die we zojuist werd genoemd een paars. 80 00:08:46,470 --> 00:08:53,000 Dus onthoud wat dit zal doen, is als het lichaam niet de klasse paarse noemde het zal toevoegen. 81 00:08:53,400 --> 00:08:56,510 Maar controleert als het heeft wel de naam van de klasse paarse al. 82 00:08:56,580 --> 00:08:57,660 Het zal het te verwijderen. 83 00:08:57,660 --> 00:09:00,630 Dus we hoeven niet bij te houden als het paars of wit te houden. 84 00:09:00,630 --> 00:09:05,850 Op dit moment als de klas wordt toegepast of als het niet hoeven we niet dit is paars Boullion meer. 85 00:09:06,270 --> 00:09:09,660 Dat is in principe alles is verpakt in plaats van klassenloze toggle. 86 00:09:09,930 --> 00:09:11,390 Dus ik vernieuwen. 87 00:09:12,000 --> 00:09:15,980 Ik klik en je ziet het ziet er hetzelfde. 88 00:09:16,110 --> 00:09:19,890 Maar als we inspecteren en we kijken naar het lichaam. 89 00:09:19,890 --> 00:09:20,670 Daar gaan we. 90 00:09:20,790 --> 00:09:22,930 Kennisgeving klasse evenaart paars. 91 00:09:22,980 --> 00:09:26,310 En toen ik op en nu hebben we niet de klassieke paars meer. 92 00:09:26,310 --> 00:09:27,570 Het gaat weg. 93 00:09:27,990 --> 00:09:29,830 Dat is documenteren up lichaam. 94 00:09:29,910 --> 00:09:32,760 Klasse lijst toggle dat is echt heel handig. 95 00:09:32,760 --> 00:09:35,490 Het is een stuk korter dan deze logica hier. 96 00:09:35,490 --> 00:09:37,030 Oké dus dat is mijn oplossing.