OK dus er is nog een laatste plaats kunnen we de reset-functie die aan het begin van onze code gebruiken.
Wanneer de pagina laadt de allereerste keer wat we moeten gebeuren is dat we nodig hebben om willekeurige kleuren die u vervolgens hebt gedaan die we nodig hebben om een ​​kleur te kiezen uit die nieuwe willekeurige kleuren die we hier al hebben plukken.
En dan moeten we een kleur aan elk vierkant te wijzen op de pagina, zodat we onze reset-functie kunt gebruiken, want dat is eigenlijk wat het doet.
En ik ga om dingen te ruimen door eigenlijk gewoon het uitvoeren van een functie aan het begin genoemd init en dat niet bestaat.
En de binnenkant van onze init functie gaan we alles dat moet worden uitgevoerd wanneer de pagina wordt geladen zetten.
Dus we zullen functie init hebben.
En dan de binnenkant van onze netto-functie het eerste wat we kunnen doen is ga je gang en aan onze modusknop luisteraars.
En dit is echt alleen maar om dingen te ruimen.
Dus het is niet alleen rondzweven in de middle of nowhere.
Zo zal het dit goed te laten inspringen.
Dus dit is onze modusknoppen event luisteraars en ik ga deze code in te grijpen.
En wat dit doet is het verandert de kleur van elk vierkant waarvan we kunnen gewoon te ontdoen van.
We hoeven niet meer te doen, omdat we dat reset gaat gebruiken en dan het voegt ook klick luisteraars elk vierkant, zodat wanneer u klikt we nog steeds alles van deze logica kan deze schoon te maken een beetje.
We veranderen de boodschap beeldscherm we het veranderen van de reset-knop veranderende kleuren.
Dus ik ga gewoon om dit op te kopiëren naar onze init functie, omdat we ook willen dat om te draaien in het begin, wanneer de pagina wordt geladen zo goed en gedaan dat goed ook.
En dan is het laatste wat als we eenmaal het opzetten van de event handlers hier voor de knoppen mode knoppen en de pleinen dan willen we gewoon opnieuw in te stellen op het scherm wat betekent dat het uitvoeren van de reset-functie en wat reset zal doen, is hij in feite zal onze kleuren te genereren dus we kunnen alleen maar kleuren zijn undefined of een lege array aan de start.
Ik ga gewoon beginnen met het.
Nou we zullen het eerst geven een lege array.
En dan wat we kunnen doen is geplukt kleur enkel om een ​​variabele zonder waarde te zijn en op te slaan die en om dingen te maken een beetje schoner.
Ik ga mijn kiezers hier beneden, zodat up top we hebben zijn drie variabelen die niet dingen te selecteren bewegen.
En dan hebben we variabelen selecteert de verschillende elementen op de pagina.
OK.
Dus nogmaals wat er gebeurt met het allereerste begin.
Lopen we het init functie die gaat dit alles code in te voeren.
En die code gaat om het opzetten van onze modusknop luisteraars en het gaat om het opzetten van onze vierkante luisteraars en dan lopen we reset welke kleuren pakt het kiest een willekeurige kleur uit deze kleuren pikt het verandert de inhoud van de tekst en dat alles.
En we kunnen ontdoen van deze lijn te krijgen, omdat we dit nu aan het doen zijn de binnenkant van de init functie die roept reset.
Dus laten we ervoor zorgen dat dit werkt, voordat we verder gaan.
We vernieuwen het openstellen van de con ..
Geen fouten.
En je kunt zien dat ik Vernieuw de pagina en al die code wordt uitgevoerd in dat init-functie.
En de binnenkant van daar is het resetten van alles wat we zien.
Dus onze luisteraars zijn correct ingesteld.
We krijgen de juiste boodschap.
Laten we opnieuw spelen.
alles werkt prima.
Laten we spelen het makkelijk stand.
Daar gaan we.
Laten we spelen weer een keer.
Grote.
Dus het werkt prima.
Er is nog een verandering die we konden maken en dat is dat deze functie hier en nu is het een beetje lang en sommige mensen die ik heb gewerkt met echt strikte regels over hoe lang de functie zou moeten zijn.
Sommige mensen zullen zeggen als je code is langer dan 10 lijnen die u nodig hebt om het te splitsen in zijn eigen functie.
Zo konden we dat hier doen.
Dit kan een eigen functie alles wat het doet is het opzetten van een modusknop luisteraars dus konden we dat doen hier te zijn.
Of gewoon schrijven modusknop laten we noemen het op te zetten modusknoppen en dan zullen we verklaren dat de functie hier down functie opgezet mode knoppen.
En binnen hier zijn we zullen gewoon plak de code die vervolgens een streepje één keer zal lopen behoorlijk maar aan het begin.
We zetten de modusknop luisteraars en we kunnen hetzelfde doen hier.
Kopieer deze code en we zullen deze een naam opgezet vierkante luisteraars te geven of te laten we noemen het opzetten pleinen als dat en dan zullen we een functie opgezet schrijven.
En ik merkte ik een kapitaal gebruiken ben je daar.
Dus ik moet hier aandacht te besteden aan dat het opzetten van pleinen en we zullen ervoor zorgen dat onze code werkt op dezelfde manier.
Dus nu onze init is erg mooi en schoon.
Het zet de modusknoppen het zet de pleinen en reset alles wat we zien.
Laten we proberen op te frissen.
Het lijkt erop dat het werkte onze plein nog steeds werken prima.
Als we ze vernieuwen meer onze mode knoppen werken nog steeds prima ook.
Dus dat is allemaal geweldig en het lijkt erop dat alles werkt prima.
Dat is voor zover wij zullen nemen om refactoren voor nu.
Maar ik zal u een paar dingen die we zouden willen verbeteren in de toekomst video's.
Zodra we leren een beetje meer over javascript en meer comfortabel met het zullen we praten over een aantal design patterns en Design Patterns zijn in principe manieren van het structureren van uw code, zodat we deze code kan hebben.
Het werkt op dezelfde manier dezelfde logica om hetzelfde spel te maken en 10 verschillende mensen konden schrijven in 10 verschillende manieren en het gaat niet alleen over welke functies we rijden of de namen van de variabelen.
Het gaat ook over de manier waarop we de dingen in het algemeen en de eenvoudigste één of één van de meest voorkomende is de module ontwerp patroon genoemd structureren.
En wat dat betekent is dat we een heleboel eigenschappen toe te voegen in objecten, zodat we geen variabelen zoals dit rondzweven die niet binnen van een object te hebben.
We hebben geen enkele functie die gewoon op hun eigen als dit op het raam object te hebben.
Eerder we ze toe te voegen aan onze eigen object.
Dus het zou iets als dit je een spel object zou kunnen hebben kijken.
En dan zouden we schrijven Game stip en we zullen gewoon doen een deel ervan.
Game dot init is een functie en we zouden alleen deze code te kopiëren daar en we zouden dit doen voor elke functie ieder afzonderlijk object variabele en vervolgens aan het eind we zouden alleen rennen spel.
En de redenering achter dit is een beetje ingewikkelder.
De korte versie is dat het helpt ons de dingen gestructureerd en georganiseerd te houden.
En het helpt ook voorkomen dat namespace botsingen die ik eerder genoemd in een van de video's object.
Dus ik zal niet gaan door dit hele refactor.
Wat wij hebben is goed genoeg.
Het werkt prima.
Maar als u doorgaat met groeien als een ontwikkelaar en je leert meer en meer één van de dingen die je aandacht te besteden aan als je eenmaal comfortabeler is javascript design patterns en er zijn boeken geschreven over dit.
Er is essays en blogs en zo veel video's en er is volledige cursussen eigenlijk online alleen over het structureren van uw javascript.
Dus dat is niet de focus.
En ik nog echt alleen willen richten op de inhoud van de code van de HTML het javascript de C beoordelen van de logica en de structuur kan later komen.