OK we zullen terugkomen.
Dus ik denk dat het tijd is voor u om een ​​deel van deze een schot op uw eigen geven.
Dus ik heb een snelle oefening.
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.
Dat is het.
En toen ik op die knop alles wat je hoeft te doen is de achtergrondkleur van het lichaam van wit tot paars.
Hoe doe je dat.
Ik laat het aan jou.
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.
Helemaal aan jou.
Dus Pasic video op dit moment.
Geef dat een schot op uw eigen.
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.
OK.
Dus laten we praten over hoe we dit werk kunnen maken.
First things first we een oude vrouw bestand dat ik hier moet toevoegen in mijn HMO nodig.
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.
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.
Dus gewoon om je in de juiste gewoonte en maak een nieuw bestand dat we zullen gewoon toggle noemen.
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.
Dus laten we gaan door en opent dit bestand in de browser en zien wat we krijgen.
Eerste ding dat ik hier zal wijzen.
Merk op dat we de waarschuwing die zegt dat dingen worden aangesloten, maar de knop is niet op de pagina nog niet.
Zodat we niet echt zien op de knop totdat ik te ontdoen van de signalering.
En dat is heel belangrijk en we willen dat op te lossen.
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.
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.
Dus hebben we een paar manieren om de vaststelling van dit.
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.
We zullen leren over een andere manier om dit te doen als we in Jay vraag, maar dit werkt prima voor nu.
Dus als we nu vernieuwen je de knoppen zien er al.
En dan krijgen we de waarschuwing die zegt aansluiten.
Dus nu laten we praten over de logica.
Laten we naar onze toggle J.S. en selecteert u de knop.
Dus var knop gelijk document queries selectieknop en dat is gewoon een manier om het natuurlijk te selecteren.
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.
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.
Als we dat doen dus klik vernieuwen laten klikken en we geklikt.
Dus dat is geweldig.
Dingen zijn aangesloten correct nu alles wat we moeten doen is de achtergrondkleur van het lichaam.
Dus ik zou beginnen door gewoon te doen document dump lichaam en laten we stellen het gewoon paars te zijn.
Dus documenteren up lichaam stijl die achtergrond is gelijk aan paars en je zult zien dat ik gebruikte document dot lichaam.
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.
Het is gewoon een snelkoppeling die is ingebouwd in het document.
Dus ik doen, opdat ik het veranderen in paars en we moeten goed zijn om hier te gaan.
Als ik klik krijgen we een paarse lichaam, maar uiteraard een deel van dit probleem werd heen en weer schakelen.
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.
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.
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.
En wat we moeten doen is de binnenkant van onze javascript we gaan om te controleren of is paars.
Dus als het paars dan gaan we willen de achtergrondkleur wit net als dit te maken.
En verandering moet wit zijn en dan Anders zullen we hetzelfde doen, behalve wij het paars zal maken.
Het enige probleem is natuurlijk dat paars is op dit moment is altijd vals.
We gaan willen dat veranderen.
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.
En dit moet een boolean waarde van natuurlijk niet de string waar of de snaar vals zijn.
Dus wat we hier doen is het creëren van ons eigen doel tracker.
Deze boolean is paars start is vals.
De eerste keer door het paars.
Dat gebeurt niet.
Dus gaan we naar de andere we veranderen de achtergrond van paars zijn en dan is paars is nu waar.
Dus de volgende keer dat de gebruiker erop klikt paars dat is nu waar.
Dus als we de achtergrond wit zijn te veranderen en dan is paars is ingesteld op false en we blijven heen en weer schakelen.
Dus refresh checker gemeente zorgt ervoor dat we geen fouten.
En nu laten we proberen te klikken paars wit paars en wit.
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.
We hebben een kortere manier van doen dat alleen maar door te schrijven.
Is paars evenaart niet paars.
Dus dat is gewoon gaan om het te maken tussen ware en valse of valse en ware gewoon ontkent te schakelen.
Dus dat is een mooie shortcut.
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.
Er was een methode genaamd toggle.
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.
En laten we noemen het paars of gewoon paars.
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.
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.
Dit alles alles wat we willen doen is documenteren up lichaam.
Classless toggle.
En dan de naam van de klasse die we zojuist werd genoemd een paars.
Dus onthoud wat dit zal doen, is als het lichaam niet de klasse paarse noemde het zal toevoegen.
Maar controleert als het heeft wel de naam van de klasse paarse al.
Het zal het te verwijderen.
Dus we hoeven niet bij te houden als het paars of wit te houden.
Op dit moment als de klas wordt toegepast of als het niet hoeven we niet dit is paars Boullion meer.
Dat is in principe alles is verpakt in plaats van klassenloze toggle.
Dus ik vernieuwen.
Ik klik en je ziet het ziet er hetzelfde.
Maar als we inspecteren en we kijken naar het lichaam.
Daar gaan we.
Kennisgeving klasse evenaart paars.
En toen ik op en nu hebben we niet de klassieke paars meer.
Het gaat weg.
Dat is documenteren up lichaam.
Klasse lijst toggle dat is echt heel handig.
Het is een stuk korter dan deze logica hier.
Oké dus dat is mijn oplossing.