1 00:00:00,330 --> 00:00:05,310 OK, então existe um último lugar onde podemos usar a função de reinicialização que está no início do nosso código. 2 00:00:05,550 --> 00:00:11,000 Quando a página carrega a primeira vez o que precisamos acontecer, precisamos escolher cores 3 00:00:11,010 --> 00:00:17,220 aleatórias que você fez, então precisamos escolher uma cor dessas novas cores aleatórias que já temos aqui. 4 00:00:17,820 --> 00:00:24,570 E então precisamos atribuir uma cor a cada quadrado na página para que possamos usar nossa função de reinicialização porque é 5 00:00:24,570 --> 00:00:26,290 basicamente o que ela faz. 6 00:00:26,490 --> 00:00:31,960 E eu vou limpar as coisas, na verdade, apenas executando uma função no início chamada init e 7 00:00:32,340 --> 00:00:33,430 isso não existe. 8 00:00:33,600 --> 00:00:38,610 E dentro de nossa função init, vamos colocar tudo o que precisa ser executado quando a página carregar. 9 00:00:39,000 --> 00:00:41,490 Então, teremos init da função. 10 00:00:41,790 --> 00:00:47,970 E então, dentro da nossa função de rede, a primeira coisa que podemos fazer é avançar e adicionar nossos ouvintes 11 00:00:47,970 --> 00:00:49,070 de botão de modo. 12 00:00:50,250 --> 00:00:52,200 E isso é realmente apenas para limpar as coisas. 13 00:00:52,230 --> 00:00:55,110 Então não é apenas flutuando no meio do nada. 14 00:00:55,320 --> 00:00:56,850 Então, ele irá recuar isso corretamente. 15 00:00:57,000 --> 00:01:05,260 Então, este é o nosso modo de botões de ouvintes de eventos e eu vou pegar esse código aqui. 16 00:01:05,400 --> 00:01:10,420 E o que isso faz é que muda a cor de cada quadrado do qual podemos simplesmente nos livrar. 17 00:01:10,560 --> 00:01:16,410 Nós não precisamos mais fazer isso porque usaremos esse reset e, em seguida, também adiciona ouvintes klick a 18 00:01:16,410 --> 00:01:21,780 cada quadrado para que, ao clicar, ainda precisamos de toda essa lógica, pode limpar isso um pouco. 19 00:01:22,620 --> 00:01:26,980 Estamos mudando a exibição da mensagem, estamos mudando o botão de reinicialização mudando de cores. 20 00:01:27,030 --> 00:01:33,780 Então, eu apenas vou copiar isso para a nossa função init porque também queremos que seja executado 21 00:01:33,900 --> 00:01:38,560 no início, quando a página carrega tão bem e feito isso também. 22 00:01:38,820 --> 00:01:44,970 uma vez que configuramos os manipuladores de eventos aqui para os botões de botões e para os 23 00:01:45,060 --> 00:01:52,080 quadrados, queremos apenas redefinir a tela, o que significa executar a função de reinicialização e o que o reset 24 00:01:52,080 --> 00:01:59,610 fará é que ele realmente gerará nossas cores então podemos simplesmente ter cores indefinidas ou uma matriz vazia no início. 25 00:01:59,610 --> 00:02:01,260 E então o último último, 26 00:02:01,260 --> 00:02:02,230 Vou começar com isso. 27 00:02:02,280 --> 00:02:04,040 Bem, nós daremos uma matriz vazia primeiro. 28 00:02:04,350 --> 00:02:11,910 E então, o que podemos fazer é definir a cor escolhida apenas para ser uma variável sem valor e salvar isso e tornar 29 00:02:11,910 --> 00:02:13,920 as coisas um pouco mais limpas. 30 00:02:14,010 --> 00:02:19,980 Eu vou mover meus seletores para baixo aqui, de modo que no topo, temos três variáveis ​​que não estão 31 00:02:19,980 --> 00:02:20,760 selecionando coisas. 32 00:02:20,760 --> 00:02:25,620 E então, temos variáveis ​​que estão selecionando os diferentes elementos na página. 33 00:02:26,100 --> 00:02:26,620 ESTÁ BEM. 34 00:02:26,790 --> 00:02:29,360 Então, novamente, o que acontece no começo. 35 00:02:29,550 --> 00:02:34,600 Executamos a função init que irá executar todo esse código aqui. 36 00:02:35,010 --> 00:02:42,160 E esse código vai configurar nossos ouvintes de botão de modo e vai configurar nossos ouvintes quadrados e depois executamos 37 00:02:42,600 --> 00:02:49,050 o reset, que escolhe as cores, ele escolhe uma cor aleatória dessas cores, ele escolhe isso, altera o 38 00:02:49,050 --> 00:02:50,980 conteúdo do texto e tudo isso. 39 00:02:51,150 --> 00:02:56,400 E podemos livrar-se desta linha porque estamos fazendo isso agora dentro da função init que 40 00:02:56,520 --> 00:02:57,730 está chamando de redefinição. 41 00:02:57,780 --> 00:03:01,720 Então, vamos nos certificar de que isso funciona antes de seguir em frente. 42 00:03:02,610 --> 00:03:04,860 Nós abrimos o con. Sem erros. 43 00:03:04,890 --> 00:03:05,860 E você pode ver atualizar a página e todo esse código está sendo executado na função init. 44 00:03:06,180 --> 00:03:11,370 E dentro de lá está reestablecendo tudo o que vemos. 45 00:03:11,370 --> 00:03:15,270 Então nossos ouvintes estão configurados corretamente. 46 00:03:15,270 --> 00:03:17,190 Recebemos a mensagem correta. 47 00:03:17,460 --> 00:03:19,140 Vamos jogar de novo. 48 00:03:19,140 --> 00:03:20,160 Tudo está funcionando bem. 49 00:03:20,370 --> 00:03:21,890 Vamos jogar de modo fácil. 50 00:03:22,170 --> 00:03:24,440 Aqui vamos nós. 51 00:03:25,680 --> 00:03:26,340 Vamos mais uma vez. 52 00:03:26,340 --> 00:03:31,430 Ótimo. 53 00:03:31,530 --> 00:03:32,000 Então, funciona bem. 54 00:03:32,100 --> 00:03:35,880 Há mais uma mudança que podemos fazer, que é essa 55 00:03:35,910 --> 00:03:40,890 função aqui e agora é um pouco longo e algumas pessoas com quem 56 00:03:40,890 --> 00:03:45,750 trabalhei têm regras realmente rígidas sobre o tempo que a função deve ser. 57 00:03:45,750 --> 00:03:46,290 Algumas pessoas dirão se o seu código é maior do que 10 linhas, você precisa dividi-lo em sua própria função. 58 00:03:46,290 --> 00:03:51,900 Então, podemos fazer isso aqui. 59 00:03:52,230 --> 00:03:53,500 Esta poderia ser uma 60 00:03:53,700 --> 00:03:59,370 função própria, tudo o que faz é configurar um modo de ouvintes do botão para que possamos fazer isso aqui. 61 00:03:59,370 --> 00:04:00,000 Ou apenas 62 00:04:00,040 --> 00:04:09,690 botão de modo de escrita, vamos chamá-lo de botões de modo de configuração e então declararemos essa função para baixo aqui botões de modo de configuração de função. 63 00:04:09,690 --> 00:04:15,010 E aqui dentro, vamos colar esse código, 64 00:04:15,960 --> 00:04:24,900 que então executará um recuo corretamente uma vez, apenas no início. 65 00:04:24,900 --> 00:04:25,470 Configuramos os ouvintes do botão de modo e podemos fazer o mesmo aqui. 66 00:04:25,470 --> 00:04:29,450 Copie este código e damos a este um nome 67 00:04:29,460 --> 00:04:38,100 de configuração de ouvintes quadrados ou vamos chamá-lo de configurar quadrados assim e depois escreveremos uma função configurada. 68 00:04:38,100 --> 00:04:45,120 E percebo que não usei uma capital, você está lá. 69 00:04:45,120 --> 00:04:48,240 Então eu preciso prestar atenção a esse 70 00:04:48,300 --> 00:04:55,740 conjunto de quadrados aqui e nós teremos certeza de que nosso código funciona da mesma maneira. 71 00:04:55,740 --> 00:04:56,340 Então, agora, nossa init é realmente agradável e limpa. 72 00:04:56,340 --> 00:04:59,130 Ele configura os botões de modo que configura os quadrados e reafirma tudo o que vemos. 73 00:04:59,250 --> 00:05:04,610 Vamos tentar atualizar. 74 00:05:04,680 --> 00:05:06,850 Parece que funcionou, nossa Praça ainda funciona bem. 75 00:05:07,170 --> 00:05:10,970 Se os atualizarmos mais, nossos botões de modo ainda funcionam bem. 76 00:05:11,100 --> 00:05:15,510 Então tudo bem e parece que tudo está funcionando bem. 77 00:05:15,510 --> 00:05:19,040 Isso é o que vamos tomar para refatorar por enquanto. 78 00:05:19,430 --> 00:05:21,600 Mas vou mostrar-lhe algumas coisas que gostaríamos de melhorar nos futuros vídeos. 79 00:05:21,600 --> 00:05:26,360 Uma vez que aprendemos um pouco mais sobre o javascript e nos encorajamos com isso, falaremos sobre alguns padrões de 80 00:05:26,610 --> 00:05:31,020 design e padrões de design são basicamente formas de estruturar seu código para que possamos ter esse código. 81 00:05:31,020 --> 00:05:36,690 Funciona da mesma maneira que a mesma lógica para fazer o mesmo jogo e 10 pessoas diferentes podem escrevê-lo 82 00:05:36,690 --> 00:05:42,030 de 10 maneiras diferentes e não é apenas sobre as funções que usamos ou os nomes das variáveis. 83 00:05:42,030 --> 00:05:47,690 É também sobre como estruturamos as coisas em geral e a mais simples 84 00:05:47,820 --> 00:05:53,100 ou uma das mais comuns é chamada de padrão de projeto do módulo. 85 00:05:53,460 --> 00:05:55,650 E o que isso significa é que podemos adicionar 86 00:05:55,890 --> 00:06:01,860 um monte de propriedades em objetos, por isso não temos nenhuma variável como essa flutuando em torno de que não estão dentro de um objeto. 87 00:06:01,860 --> 00:06:05,460 Não temos quaisquer funções que estejam apenas por conta própria, assim, no objeto da janela. 88 00:06:05,550 --> 00:06:10,000 Em vez disso, nós os adicionamos ao nosso próprio objeto. 89 00:06:10,080 --> 00:06:12,790 Então, seria algo assim, você poderia ter um objeto de jogo. 90 00:06:12,870 --> 00:06:16,840 E então podemos escrever o Game Point e nós faremos apenas uma parte disso. 91 00:06:17,280 --> 00:06:21,840 Game dot init é uma função e nós apenas copiamos esse 92 00:06:21,870 --> 00:06:30,690 código lá e faria isso por cada função única, cada variável de propriedade e, no final, simplesmente executávamos o jogo. 93 00:06:30,690 --> 00:06:36,590 E o raciocínio por trás disso é um pouco mais complicado. 94 00:06:36,620 --> 00:06:41,130 A versão curta é que nos ajuda a manter as coisas estruturadas e organizadas. 95 00:06:41,130 --> 00:06:44,720 E também ajuda a evitar colisões de espaço para nome que mencionei anteriormente em um dos vídeos de objeto. 96 00:06:44,940 --> 00:06:50,290 Então não vou passar por esse refator inteiro. 97 00:06:50,460 --> 00:06:52,620 O que temos é bom o suficiente. 98 00:06:52,620 --> 00:06:53,730 Isso funciona bem. 99 00:06:53,730 --> 00:06:54,880 Mas como você continua 100 00:06:54,990 --> 00:06:59,100 a crescer como desenvolvedor e você aprenderá mais e mais uma das coisas que você 101 00:06:59,100 --> 00:07:04,590 prestará uma vez que você se encolhe com mais facilidade, os padrões de design javascript e livros escritos sobre isso. 102 00:07:04,590 --> 00:07:05,010 Existem 103 00:07:05,010 --> 00:07:10,740 ensaios e blogs e tantos vídeos e há cursos inteiros realmente online apenas sobre a estruturação do seu javascript. 104 00:07:10,740 --> 00:07:11,670 Então esse não é o foco. 105 00:07:11,790 --> 00:07:12,940 E eu ainda realmente quero 106 00:07:12,970 --> 00:07:18,390 apenas focar no conteúdo o código do HTML o javascript que o C avalia a lógica e a estrutura pode vir mais tarde. 107 00:07:18,450 --> 00:07:20,910 Mas eu só quero que você esteja ciente de que existem outras formas de estruturar isso 108 00:07:21,210 --> 00:07:24,260