Projeto JavaScript para Dummies: verificador de anagrama

1. Introdução ao verificador de anagrama: Este é o segundo projeto que vamos construir em JavaScript, e esse projeto é sobre o verificador de anagramas, e os conceitos que implementaremos nesses projetos são manipulação de Dom, processamento de strings no qual podemos explorar os diferentes métodos de string e, em seguida, usaremos o Event Listener E no último, vamos usar armazenamento local do navegador no qual aprenderemos, como podemos armazenar e obter os dados do armazenamento local do navegador? 2. Como construir o verificador de anagrama: Este projeto é sobre o verificador de anagramas e, se você não sabe o que é o anagrama, é Então, anagramas são simplesmente as palavras ou frases ou a frase que tem os mesmos caracteres na mesma frequência, mas em uma ordem diferente Está bem? E o exemplo simples que podemos ter aqui, temos duas palavras, Ouvir e silenciar Então, se você observar essas duas palavras, teremos os mesmos caracteres aqui e na mesma frequência. Está bem? Mas a ordem é, na verdade, diferente. Então esse é, na verdade, o anagrama. Então, o que estamos fazendo em nosso projeto é bem simples. Vamos adicionar duas palavras aqui, e você também pode escrever frases ou as frases, o que quiser escrever. Então, vou escrever, digamos, em silêncio aqui. E na segunda palavra, vou realmente usar Listen. E quando eu clico no botão aqui, ele basicamente verifica se essas duas palavras são anagramas uma da outra ou não Então, se eu clicar no botão de verificação, você pode ver aqui que essas duas palavras são anagramas Mas se eu for aqui com algo diferente, se eu puder escrever Kate e se eu apenas escrever cachorro aqui e clicar em nosso botão, agora você pode ver aqui, nossas palavras não são anagramas Tudo bem E também temos algumas condições em nosso programa. Se eu deixar de adicionar alguma entrada aqui, ela basicamente me dará uma espécie de mensagem aqui, ok? E se eu também remover a segunda palavra, ela também nos dará um aviso diferente aqui. Então você pode ver aqui. Então é assim que nosso projeto está funcionando. Então, uma coisa que não vimos nosso projeto é, na verdade, o modelo. Portanto, sempre que você acessar o site pela primeira vez, poderá ver a definição do anagrama nesse modelo Mas agora, como eu já visitei nosso site aqui, é por isso que, mesmo que eu reformule a página, você não conseguirá ver nenhum modelo aqui Mas se eu for inspecionar e entrar no depósito, e aqui, entrar no depósito local, você poderá ver a propriedade aqui que é visitada e o valor dela é verdadeiro Está bem? Então, basicamente, sempre que você estiver visitando o site pela primeira vez, essa propriedade e valor serão agregados. E depois disso, você não conseguirá ver esse modelo. Então, se eu remover esse valor daqui, o segundo é Perfeito. E se eu divulgar isso e apenas reformular a página agora, agora você poderá ver uma espécie de mensagem de boas-vindas aqui que temos em nosso projeto Está bem? Então, se eu clicar em Get here, agora você poderá ver nosso projeto. Então isso foi uma demonstração do nosso projeto, e agora vamos entrar em nosso editor de código e começar a construir isso, ok? Então, em nosso projeto, como você pode ver aqui, eu já escrevi nosso código ESTiml e também nosso CSS OK. Então, agora, primeiro de tudo, vou explicar o que temos em nossa estrutura estimada porque isso é importante Então, na estrutura de estimativa é bem simples. Temos aqui as duas entradas para a primeira palavra e o segundo modo que vimos na prévia e, em seguida, temos nosso botão, que é verificar o anagrama E depois disso, temos a estrutura do nosso modelo aqui. Está bem? Portanto, por padrão, a estrutura do modelo é invisível. Mas sempre que estivermos visitando isso pela primeira vez, poderemos ver isso no primeiro lado. Está bem? Tudo bem. Então, agora o que eu precisaria fazer aqui, vou simplesmente clicar com o botão direito do mouse aqui e clicar no servidor Open with Life. E agora você poderá ver apenas nossa estrutura estimada. Então, temos as duas entradas aqui, como você pode ver aqui e o botão, e então temos nossa estrutura de modelo aqui Está bem? Tudo bem, agora vamos voltar ao nosso código VS. E aqui eu precisaria vincular meu CSS, o que eu já fiz, mas tenho que descomentar isso daqui Descomente isso e clique em salvar novamente, e agora vamos voltar ao nosso projeto, e agora você poderá ver nosso projeto aqui Então, no momento, temos apenas a parte EstiML e CSS, e agora começaremos a escrever nossa parte Javascript. Então, como sabemos, nossos projetos são focados exclusivamente no JavaScript. É por isso que eu já adicionei o código Stimul e CSS aqui OK. Então, agora vamos voltar ao nosso navegador. E agora vamos entrar no sorteio do Excel aqui. E quais são os conceitos-chave que aprenderemos neste projeto? Então, a primeira é a manipulação da cúpula. Portanto, já estamos familiarizados com get element by ID e com o conteúdo do texto, pois abordamos isso em nosso primeiro projeto, que na verdade era a calculadora de idade. Mas ainda temos a propriedade de exibição de pontos de estilo que podemos explorar neste projeto. E a principal coisa que temos que explorar aqui é o processamento de strings. Portanto, no processamento de strings, basicamente, abordaremos os diferentes métodos que temos em nossas strings. E também podemos explorar o tratamento de eventos e, por último, também examinaremos a persistência do estado com o armazenamento local Agora, eu vou te dar uma definição rápida sobre esses métodos de string aqui. Então, o primeiro que temos é o método trim. Portanto, o método de corte basicamente remove o espaço em branco das duas pontas de uma corda, como da parte frontal e do bacon E depois disso, temos o método de minúsculas, que simplesmente converte todos os caracteres em uma string em Depois disso, temos o método de substituição. Na verdade, isso nos ajudará a encontrar um padrão em nossa string e fará a substituição ali. E depois disso, temos o método split. Então, qual é a função do método split? Basicamente, ele converterá nossa string nas matrizes do item que temos em nossa string em ordem crescente e, depois disso, temos o método join Portanto, o método de junção realmente colocaria todos os elementos que temos na matriz em uma única string. Está bem? Então, essas são as definições dos métodos que usaremos em nosso projeto. Agora, uma coisa que precisamos fazer antes de entrar em nosso código examinar nossa documentação passo a passo que criamos. Assim como nosso primeiro projeto. Então, basicamente, em nossa documentação, a primeira coisa que fizemos foi adicionar o propósito desse código e, depois disso, escreveremos nossa estrutura estimada, depois o estilo CSS que já foi feito e, em seguida, o código JavaScript Então, no código JavaScript, eu dividi isso em várias etapas diferentes. A primeira etapa seria selecionar os elementos de estimativa com a ajuda do JavaScript e, em seguida, definiremos nossa função e, em seguida, adicionaremos nosso ouvinte de eventos ao botão e, em seguida, teremos a lógica do modelo Em seguida, vamos executar nossa verificação de modelo no carregamento da página. Então, essas são as coisas que temos que fazer em nosso projeto. E também adicionarei essa documentação aos recursos do nosso projeto. Tudo bem. Então, agora vamos entrar em nosso código VS e temos que criar um arquivo JavaScript aqui que será MindTJS. Tudo bem, então agora eu tenho que dar um zoom Perfeito. Então, a primeira coisa que precisamos fazer é acessar os elementos necessários, então vamos anotar os elementos ases. Então, eu tenho que voltar ao nosso arquivo de estimativa e ver quais são os elementos que eu precisaria no meu Javascript. Então, eu precisaria dessas duas entradas. Então, vamos ter a entrada aqui. Então, o ID é a primeira palavra, e então nós também temos a segunda palavra, e então vamos ter o modelo aqui. Então, também precisaremos desse parágrafo com o ID do resultado, também do botão aqui, e então também precisaremos ter os ases desse botão, tudo bem. Então, vamos começar com nossas entradas. Então, vamos voltar ao nosso arquivo JavaScript aqui e eu vou escrever let, então vou nomeá-lo como a primeira palavra. Então, vamos apenas anotar o documento. Obtenha o elemento por ID. E agora eu tenho que adicionar o ID que é na verdade a primeira palavra aqui. Perfeito. Deixe-me verificar novamente. Sim, temos a primeira palavra e, de forma semelhante, teremos o eixo sobre a segunda entrada. Então, vamos copiar isso e simplesmente colar isso aqui, e essa será a última palavra, e precisamos verificar o valor do ID aqui novamente, essa é a segunda palavra. Segue para dentro. Perfeito. E depois disso, precisamos ter o excesso do botão. Então, vou anotar o documento do botão do anagrama, obter o elemento por ID e agora temos que adicionar o ID aqui Portanto, o D do nosso botão é o botão de verificação. Então, agora temos que adicionar isso. Perfeito. Depois disso, temos que acessar o parágrafo com o ID do resultado. Então, deixe-me copiar esse código novamente e colocá-lo aqui. Vamos apenas alterar o valor aqui, e isso será ele mesmo. E depois disso, precisamos ter o excesso dos elementos do nosso modelo. Então, o primeiro seria o modelo. Então, vou anotar document get element e acho que o ID é modelo. Então, vamos verificar isso novamente. Sim, temos esse modelo. E depois disso, precisamos ter o D desse botão. Então, vamos copiar isso daqui. E vamos apenas escrever um modelo próximo. Anote o elemento get por ID. Agora temos que adicionar nosso valor de ID aqui. Perfeito. Portanto, agora temos acesso a todos os elementos que podemos exigir em nosso código JS. Então, primeiro de tudo, agora o que temos que fazer é verificar novamente se estamos obtendo excesso de todos os elementos aqui. Então, o que eu preciso fazer aqui simplesmente fazer o log do console com cada uma dessas variáveis. Então essa será a primeira palavra. Vamos copiar isso e essa será a última palavra ou podemos mudar isso para a segunda palavra. Essa será a melhor nomenclatura. Está bem? E depois disso, o que temos que fazer é ir aqui com o botão de anagrama, depois com o resultado, depois com o modelo, depois com o botão fechado do modelo Então, vamos salvar isso e agora precisamos voltar ao nosso navegador, e temos que voltar ao nosso projeto, abrir a inspeção aqui. Ok, agora eu preciso colocar isso em tela cheia. Vamos clicar em Console agora e agora você poderá ver que estamos tendo o excesso de seis elementos aqui. Então, temos as entradas, temos o botão, temos o resultado, então temos o modelo e o módulo de fechamento também Então, estamos tendo o excesso de Eles com sucesso. Agora, o que temos que fazer é construir nossa função. Então, agora vamos construir nossa função aqui. Então, agora, eu só tenho que anotar nossa função de anagrama de verificação Então, vou fazer isso no formato de função de seta. Então, isso será um anagrama de verificação. E aqui precisamos ter a entrada de dois valores. Então, vou escrever a primeira palavra, texto. Perfeito. Ok, vou mudar isso para a segunda palavra. Tudo bem. Ok, então, na verdade, temos que fazer a mesma coisa no texto da primeira palavra e no texto da segunda palavra. Está bem? Então, como eu já te defini, o que temos que fazer no anagrama aqui? Então, anagramas são basicamente as palavras que têm os mesmos caracteres, então eles têm os mesmos caracteres e também a mesma contagem de números, mas em ordem diferente Tudo bem Então, o exemplo é que se eu estou fazendo o silêncio aqui, então também temos a palavra que é escutar Então, essas duas palavras são na verdade, anagramas uma da outra Mas como eu sei disso? Ou como podemos verificar isso para construir nossa função? OK. Então, temos um truque aqui que é o que podemos fazer aqui. Então, digamos que, se tivermos uma palavra simples, nada de louco aqui. Então, o que vamos fazer aqui é simplesmente mudar a ordem do texto aqui. Então, vamos ordenar isso de forma que eles estejam alfabeticamente em Tudo bem Então, vou simplesmente copiar isso daqui e vou para o navegador e depois vou aqui para o ha GPT. Vou simplesmente pedir para colocar isso em ordem crescente Então eu tenho que adicionar isso com os personagens, ok? Tudo bem Classificamos os caracteres da nossa palavra em ordem alfabética crescente Está bem? Então, vamos voltar agora. Então, a ordem ascendente dessa palavra que silenciamos é, na verdade, essa E se você tentar verificar a ordem crescente desta, teremos os mesmos resultados. Está bem? Mas como vamos fazer isso no Javascript é bem simples. Então, a primeira coisa que precisamos fazer é obter a entrada de nossa palavra. Então, vou escrever a primeira palavra. E como é o valor de entrada, precisaremos anotar a propriedade do valor do ponto aqui. Perfeito. Tudo bem, então primeiro, eu tenho que verificar se isso está funcionando ou não Então, vou entrar no registro do console e anotar primeiro. Texto em Word aqui. E agora o que eu tenho fazer é que sabemos que temos que adicionar o ouvinte do evento. Está bem? Portanto, temos que adicionar o ouvinte do evento em nosso botão, botão de anagrama Então, vou adicionar um botão de anagrama aqui e vamos adicionar o ouvinte do evento Então, vamos adicionar um ouvinte de eventos aqui. Então isso será um evento de clique, e agora o que temos que fazer é passar nossa função. Isso é um anagrama de bate-papo. OK. Então, se você também não está familiarizado com os ouvintes do evento e todas essas coisas, pode conferir meu projeto de calculadora Edge, no qual defini tudo na cúpula a partir do Está bem? Então, agora, vamos simplesmente passar isso e salvar isso e voltaremos ao nosso projeto. E agora temos que abrir a inspeção novamente. Perfeito. Então, se eu escrever alguma coisa aqui, deixe-me escrever em silêncio aqui. Ok, então estamos tendo o registro do console de nossa entrada. Então, se eu adicionar qualquer frase aqui, teremos um gato. Então, também teremos isso em nosso lob do console. OK. Tudo bem. Então, depois do valor, vamos usar o método trim E por que estamos usando o método trim basicamente para remover os espaços em branco antes do pior e depois do pior, se eu tentar adicionar isso. OK. Então, agora, se eu voltar aqui e remover esse método daqui, preciso fazer uma coisa aqui. Também vou anotar o comprimento do ponto. E também adicione a palavra também para copiar isso, e vamos colocar isso aqui. Portanto, também podemos ter a palavra e também seu comprimento. Então, se eu adicionar qualquer palavra aqui, deixe-me adicionar um pouco de espaço aqui antes da palavra, e eu vou adicionar o K, e eu também vou adicionar um pouco de espaço aqui. Está bem? Vou clicar em verificar anagrama E agora você pode ver aqui que temos os 12 personagens aqui. Mas, basicamente, eu já escrevi os quatro personagens aqui. Tudo bem. Portanto, para remover esse sobressalente extra que podemos potencialmente ter ou podemos ter isso por engano em nossa entrada, usaremos o método trim Então, se eu apenas adicionar o método de corte aqui, na verdade eliminaremos esse espaço em branco na parte frontal e também na parte de trás Agora, se eu voltar aqui e clicar no anagrama de verificação com o mesmo tipo de entrada, agora você pode ver que não temos espaço na parte frontal e também na parte de na parte frontal e também na trás e nos caracteres, temos apenas quatro caracteres É por isso que estamos usando o método trim aqui. Então, depois do método trim, temos que fazer mais uma coisa para mudar os valores para minúsculas Está bem? Então, como sabemos, se eu tentar comparar duas coisas aqui , vamos apenas anotar. OK. Também vou adicionar a segunda entrada aqui. Então, vamos copiar isso daqui. E vamos colocar isso na segunda palavra. Tudo bem E vamos colocar o segundo aqui também. Perfeito. E também fazemos o registro do console do nosso texto da segunda palavra, e também faremos uma comparação aqui com nossa primeira palavra, texto e segunda palavra. Então esse será o texto da primeira palavra, é igual ao texto da segunda palavra? Tudo bem. Então, agora o que temos que fazer, vamos voltar ao projeto Word. Vamos apenas escrever a mesma entrada aqui em nossa segunda entrada. Somente a mudança que eu faria aqui, o C em maiúscula. Vamos clicar em verificar anagrama agora. Você pode ver que estamos tendo o valor de queda, embora tenhamos os mesmos personagens aqui. Somente a diferença aqui é a de maiúsculas em minúsculas É por isso que temos que fazer, temos que converter todas as entradas em minúsculas ou maiúsculas, da que você preferir aqui Mas eu vou aqui para as letras minúsculas. Então, para isso, o que faremos aqui, escreveremos depois nosso primeiro método e serão duas letras minúsculas. Tudo bem. E também farei a mesma coisa em nossa segunda entrada. Então, vamos salvar isso. Agora, se eu der o mesmo tipo de entrada aqui, teremos a verdade aqui, e isso está funcionando perfeitamente bem. É por isso que temos que mudar nosso texto para minúsculas para que não tenhamos a resposta negativa apenas por causa das maiúsculas e minúsculas. Tudo bem, então depois das letras minúsculas, temos que adicionar mais um método que realmente dividiria nossa string na matriz. Está bem? Portanto, o nome do método é método dividido. E no método split, temos um argumento que é tratado como um separador Então, significa simplesmente qual caractere você deseja usar como separador nessa string Então, digamos que se eu adicionar um caractere aqui e eu vou adicionar a barra frontal, ok? E eu também farei o mesmo no segundo método. Então, vamos colocar isso aqui e salvar isso e vamos voltar para o nosso navegador. Vou anotar o anagrama de verificação novamente. E agora você pode ver aqui que temos apenas um único caractere em nossa matriz porque não temos nenhum valor separador aqui Então, se eu adicionar o separador que usamos, e se eu adicionar o cachorro aqui, ok, vamos copiar isso, vamos adicionar o cachorro aqui também, e eu vou remover esse espaço em branco daqui Então, vamos remover isso. Tudo bem. Então, agora, basta clicar no anagrama de verificação novamente. Então, como você pode ver aqui, essa barra fov está sendo usada como separador em uma Portanto, tudo o que eu adicionar após a barra foo será considerado um item de matriz separado Então, se eu adicionar, digamos, uma águia aqui. E se eu repetir isso também na segunda entrada, teremos três entradas diferentes aqui Está bem? Então é assim que os métodos de divisão funcionam, e é assim que você pode adicionar o separador aqui Então, você pode basicamente adicionar qualquer separador. Está bem? Então, eu vou voltar aqui. Então, digamos que se eu adicionar o separador como o caractere A. Então, agora, o que vier depois do A será considerado outro item A. Então, se eu salvar isso novamente e voltar e clicar no botão aqui, agora você pode ver aqui que estamos tendo uma divisão em nossa string sempre que temos o valor A aqui. Da mesma forma, se eu tiver que cuspir todos os caracteres da minha string, o que eu realmente usarei, adicionarei uma string vazia aqui sem o espaço Está bem? Então, agora, se eu apenas salvar isso e clicar em verificar o nagrama, agora você pode ver aqui cada caractere que tínhamos na string é considerado um item de matriz separado Então é assim que vamos separar nosso valor aqui. Está bem? Então, agora o que eu tenho que fazer, vou simplesmente anotar. Digamos que eu escreva Ouça aqui e adicionarei silêncio aqui. Se eu clicar em Verificar anagrama, agora você pode ver aqui que dividimos nossa string na área Mas agora você pode ver isso estamos tendo o valor falso aqui. O motivo é que temos os mesmos caracteres na mesma frequência, mas ainda temos uma ordem diferente aqui. Então, o que temos que fazer é mudar a ordem. Então, para alterar a ordem, temos que usar o método aqui, que na verdade é chamado de método de classificação. Mas antes disso, eu tenho que usar mais um método aqui, que será o método conjunto. Então, o método join basicamente une todos os itens que temos em nossa matriz em uma string Está bem? Então, aqui, eu também tenho um argumento que também é um separador Então, se eu quiser separar cada item que tenho na minha matriz por qualquer caractere, posso simplesmente adicionar esse separador Então, digamos que eu queira separar cada item da matriz por vírgula Então, posso simplesmente adicionar a vírgula aqui e ela separará cada valor que temos em nossa matriz em nossa string Então, vamos voltar. E aqui está o que você precisa fazer se eu clicar em nosso botão. Agora você pode ver isso, na verdade está separando tudo com essa vírgula Mas eu não quero ter a vírgula aqui, ok? Então, eu posso simplesmente não escrever nada aqui. Então, essa também será a string vazia. Agora, se eu voltar e clicar novamente, você pode ver que estamos tendo nosso valor de string novamente, mas esquecemos uma coisa aqui, que é classificar nosso valor. Então, como podemos classificar nosso valor? Nós vamos voltar. E antes da junção, após a divisão, adicionaremos mais um método, que será o método de classificação. E isso realmente classificaria nossa área de itens em ordem crescente alfabética Está bem? Então, se eu adicionar o SAR aqui e se eu também adicionar o método Odd aqui, e por padrão, os métodos de classificação funcionam na string, não no número Então, para os números, você precisa adicionar alguma função Colbck a Está bem? Agora, vou salvar isso e agora vamos ordenar nossos personagens Agora você pode ver isso, estamos tendo os mesmos caracteres aqui na mesma ordem e no mesmo número. Então, agora essas duas palavras são na verdade o anagrama. Mas se eu simplesmente mudar o valor aqui para o comido e digamos, o cachorro, será falso. Ok, então mais um método que podemos adicionar aqui. Então, se eu puder voltar para a bruxa BT e eu tiver que copiar uma coisa de, então estávamos usando essas frases, e você pode ver isso, estamos tendo as duas palavras aqui Eu vou aqui com este, e vou simplesmente colocar isso aqui. Também copiarei o segundo. Tudo bem, então eu vou voltar ao nosso projeto. Vamos colocar isso como um segundo valor. Então, agora, se eu clicar no botão, você pode ver isso. Na verdade, estamos tendo os mesmos caracteres nos mesmos números e até mesmo na mesma ordem, mas ainda temos o valor falso aqui. A razão é que estamos tendo esse espaço extra aqui, se você pode ver aqui que estamos tendo esse espaço aqui, e também temos esse espaço aqui por duas vezes, e em primeira palavra, estamos tendo o espaço para uma vez. Então, isso pode criar um problema quando você quiser verificar as frases ou frases. Então, para isso, temos um método chamado replace, ok? Então, vamos adicionar mais um método aqui depois de transformar nossas letras em minúsculas, que é o método replace Portanto, nos métodos de substituição, temos os dois argumentos. primeiro seria o padrão que precisamos combinar para substituir o valor e o segundo seria o valor de substituição. Então, digamos que eu quisesse substituir o espaço que temos uma vírgula ou algo assim ou talvez a barra frontal, algo assim Então eu posso colocar assim, ok? E eu posso fazer a mesma coisa no segundo também. Então, vamos salvar isso e, na verdade, voltaremos. E se eu clicar em nosso botão, agora você pode ver que estamos tendo essa barra frontal OK. Mas, obviamente, isso não vai funcionar. Temos que adicionar algum padrão lá. Agora, para adicionar o padrão, temos um conceito realmente poderoso. Você já deve ter ouvido falar disso, que é uma expressão regular. Então, vou escrever a expressão regular aqui. Então, qual é a expressão regular aqui? Então, se eu puder ampliar, você poderá ver que uma expressão regular é uma sequência de caracteres que forma um padrão de pesquisa. Está bem? Então, podemos basicamente aprender que como podemos adicionar essas expressões regulares em nosso código. Mas agora não precisamos aprender isso. Podemos simplesmente adotar o hábito e perguntarei a ele que quero ter um padrão de expressão regular. Ok, então deixe-me ampliar. Eu quero ter um padrão de expressão regular que corresponda tudo, exceto caracteres minúsculos, Então, eu posso simplesmente executar esse prompt, tudo bem. Portanto, temos nossa expressão regular aqui e também temos o modificador, então não precisamos entrar em detalhes aqui O que podemos fazer, você pode ver aqui, podemos simplesmente copiar isso daqui e vamos colocar isso em nosso código. Tudo bem, então eu preciso remover isso. Perfeito. E eu também preciso colocar isso aqui. Perfeito. Tudo bem, então eu tenho que colocar isso em Ok, então eu cometi um erro aqui. Então, isso será removido daqui e adicionaremos uma divisão. Precisamos adicionar o método replace aqui novamente. E dentro do nosso método de substituição, precisamos colocar isso. Perfeito. E eu não quero substituir isso por nada. Eu quero substituir isso por uma string vazia. Está bem? Então, se você ainda não entendeu o que está acontecendo neste método aqui, você pode simplesmente copiar isso daqui e ir ao Cha JBT novamente e simplesmente perguntar a ele como isso está funcionando, como está funcionando Em JavaScript. E isso realmente lhe dará uma explicação sobre cada etapa disso, ok? Eu posso escrever, colocar passo a passo, explicação. Está bem? Então, acho que cometi um erro de ortografia por lá, mas está tudo bem Tudo bem, então aqui ele pode simplesmente mostrar primeiro que, em nossa primeira resposta, essa expressão é uma chamada de método JavaScript que processa uma string para remover todos os caracteres, exceto os caracteres minúsculos Está bem? Então, basicamente, ele removerá tudo, exceto os caracteres minúsculos Está bem? E como sabemos que em nosso código, temos apenas os caracteres minúsculos Portanto, ele removerá apenas esses espaços que temos e também os caracteres espaciais que podemos ter. Então, se eu adicionar qualquer cifrão aqui, digamos que este e se eu apenas adicionar isso aqui, isso também será excluído. Clique no botão novamente. Tudo bem, então eu tenho que voltar, e acho que cometi algum erro aqui. Tudo bem, então eu tenho que colocar isso antes desse método de placa. Tudo bem Tudo bem, então acho que agora isso está funcionando bem. Então, vamos salvar isso novamente e voltar, clicar em nosso botão. Perfeito. Você pode ver isso, removemos esses espaços que tínhamos e também nossos caracteres especiais. Tudo bem E essa é a lógica que tivemos que construir para verificar se nossas palavras são anagramas ou não Está bem? Então, agora o que temos que fazer, vamos voltar para um código. Vamos mudar o tamanho aqui. Agora, isso está funcionando bem. Está bem? Tudo o que temos em nosso verificador de anagramas está funcionando Agora temos que colocar isso no formato condicional. Está bem? Portanto, temos nossa lógica pronta para nossa função de anagrama de verificação Agora, o que temos que fazer aqui é que, se o primeiro vértice e o segundo vértice forem iguais um ao outro, então o que ele tem que fazer Na verdade, ele adicionará o texto em um parágrafo de resultado de palavras. Vou adicionar a propriedade de conteúdo de texto aqui. Então, o que vai errar aqui é que as palavras são anagramas. Então, vamos salvar isso. E se você voltar ao nosso navegador, se clicar em um botão, agora você pode ver isso, as palavras são anagramas, e estamos tendo nossos resultados aqui Mas também podemos adicionar as condições adicionais aqui. Então, o que quer que precisemos fazer aqui, vou colocar mais uma condição aqui: se a primeira palavra e a segunda palavra não forem iguais uma à outra, basicamente elas farão a mesma coisa. Vou simplesmente copiar isso e colocar isso aqui, isso não será um anagrama Perfeito. Também posso colocar isso se L for o estado significa, e isso funcionaria bem. Acabei de colocar isso aqui. Perfeito. Agora vamos voltar ao nosso projeto e clicar em Verificar nagrama Estamos tendo o anagrama. Mas se eu adicionar, digamos, o gato e o cachorro, as palavras não são anagramas Está funcionando perfeitamente. Tudo bem, então a principal funcionalidade da nossa função está realmente concluída porque ela é verificar se a palavra é um anagrama ou não Mas agora temos que adicionar alguns casos H. Então, vou voltar para o navegador. E aqui, digamos, se eu não der nenhuma entrada aqui, se eu clicar em nosso botão, isso realmente nos dará um tipo de erro. Então, eu tenho que reformular isso primeiro. OK. Então eu tenho que executar o projeto novamente. E vamos colocar isso na especificação, entrar no console e dizer se eu adicionar a palavra na primeira e se eu não adicionar nenhuma palavra na segunda entrada Você pode ver isso, ainda não está me dando um anagrama, mas essa não é a mensagem apropriada para esse tipo de caso Então, eu tenho que adicionar as condições aqui em nosso código que vou voltar para as tarefas principais. Então, a primeira seria se o texto da primeira palavra fosse falso. Significa simplesmente que, se você não tiver nenhum texto de primeira palavra, eu adicionarei o operador final, faremos a mesma coisa com o texto da segunda palavra. E aqui, o que eu posso fazer, podemos simplesmente adicionar o texto ao nosso resultado. Adicione as duas entradas. E eu também posso adicionar uma segunda condição aqui, segura, e vou simplesmente copiar isso. E agora vou simplesmente colocar isso aqui. Mas aqui, vou simplesmente mudar o operador final para o operador ou. Tudo bem E aqui eu vou mudar a mensagem também. Adicione as informações restantes aqui. Então, aqui vou adicionar, e aqui vou adicionar o texto Perfeito. Então, vamos salvar isso agora. E agora, se eu voltar ao nosso navegador e não escrever nada na minha segunda entrada. À direita, você pode ver aqui que ainda não temos um anagrama Há uma razão para isso porque, como está passando por essas condições e também por essas condições, ok? É por isso que não temos um anagrama. Mas o que eu quero fazer aqui é que, sempre que uma dessas condições for verdadeira, minha função saia daí. Então, o que eu posso fazer é simplesmente adicionar a declaração de devolução aqui e também aqui. E agora, se uma das condições que temos aqui for feita, nossa função não lerá essa parte do código. OK. Então, agora vamos voltar e clicar no botão novamente. Agora você pode ver isso. Por favor , adicione o texto restante. Então eu tenho que adicionar o espaço aqui. E se eu não adicionar nenhum texto em ambas as entradas, teremos isso, por favor, adicione as duas entradas Então, agora, essas são as mensagens apropriadas. Então, agora vamos voltar aqui e o que temos que fazer? Vou mudar a condição aqui de que, se o comprimento da palavra de força e o comprimento da segunda palavra não corresponderem, simplesmente, eles não são um anagrama, ok? E então podemos adicionar o mesmo código na condição. Então, vamos copiar isso daqui e colocar isso aqui. Perfeito. Agora isso vai funcionar bem. Então, se eu adicionar o silêncio aqui e adicionar a lição aqui, isso vai funcionar perfeitamente. Então, fizemos nossa funcionalidade em nossa função principal. Então, agora o que temos que fazer. Ok, agora vamos voltar a um documento. Então, vamos ver o que temos que fazer no próximo ano. Então, fizemos os elementos ESTiml. Definimos nossa função aqui. Fizemos do evento ouvir o botão. Agora temos que adicionar a lógica do modelo. Tudo bem? Então, para isso, o que eu tenho que fazer é criar uma função aqui que será o modelo de verificação, e essa também será a função de erro. Então, agora o que vamos usar aqui, na verdade vamos usar nosso armazenamento local. Tudo bem Então, como você vai fazer isso é bem simples. Portanto, no armazenamento local, temos dois métodos. OK. Então, um realmente nos ajuda a ver os valores que temos em nosso armazenamento local, ver valores. Em nosso armazenamento local. E o segundo realmente nos ajuda a definir valores em nosso armazenamento local. Defina valores. Então, o método que usamos aqui para ver os valores ou olhar o valor é, na verdade, obter itens. Está bem? E aqui vamos anotar o nome da propriedade aqui. Está bem? E no método de valores definidos, esse é, na verdade, o método de itens definidos. E aqui, temos que adicionar duas coisas. primeiro é o nome da propriedade e, em seguida, temos o valor aqui. Então você também pode dar um nome a ele aqui, e então temos o valor aqui. Então você pode colocar o nome aqui e o valor aqui. E para acessar isso, basta adicionar o nome aqui. Tudo bem, agora vamos usar nosso primeiro método, que são itens GT Então, vou anotar nossa condição aqui se não encontrarmos. Então, deixe-me anotar o armazenamento local. Agora podemos acessar esses elementos aqui. Então você pode ver aqui que temos esses métodos diferentes e a propriedade. Então, o comprimento é na verdade a propriedade e, além disso, temos esses métodos aqui. Então, agora temos que usar métodos de itens GD, e eu vou usar os parênteses E agora temos que procurar o nome da propriedade. Então, digamos que, se eu quiser ver com isso, tudo bem. Então, significa simplesmente que me devolva o valor da propriedade visitada, no meu armazenamento local. Mas se eu tiver que reverter essa condição, como se eu não quisesse encontrar essa propriedade , posso simplesmente adicionar o operador not aqui. Portanto, essa condição agora significaria simplesmente executar o código. Se você não encontrar o item no histórico local. Então essa será, digamos, a propriedade visitada. Tudo bem, agora temos que adicionar nosso bloco de código aqui. Então, se eu não vejo a propriedade aqui no meu armazenamento local, agora, estou apenas fazendo o log do console aqui, ok? Não temos o item visitado em nosso armazenamento local. Então, vamos salvar isso e vamos voltar ao nosso código. Então, vou simplesmente atualizar esta página. Então, primeiro, eu tenho que voltar aqui para o depósito. Agora, vamos voltar para o armazenamento local. Agora você pode ver isso, estamos tendo esse nome de chave aqui, que é visitado. Portanto, se você tiver essa chave visitada em nosso armazenamento local, essa condição não será verdadeira. Então, vou voltar aqui e simplesmente remover isso daqui agora. Perfeito. Agora vou voltar ao registro do console. Vamos apenas reformular a página. Ok, então eu tenho que executar essa função também. Então, vamos executar essa função. Então, como podemos fazer isso? Tudo bem, então eu tenho que adicionar a palavra-chave cons aqui. E sim, agora o que temos que fazer. Tudo bem, então eu quero executar essa função sempre que eu reformular a página Então, como você pode fazer isso em nosso código? É bem simples. Vamos escrever Window aqui. Agora temos que adicionar nosso evento aqui, que é load. E agora o que eu tenho que fazer, vou simplesmente chamar essa função aqui, que é verificar o modelo. Tudo bem, agora eu adiciono nosso ponto e vírgula aqui e salvo o arquivo Tudo bem, então não está carregando. Então, acho que cometi algum erro no meu código, provavelmente. Então, se eu puder entrar no Google para corrigir isso, acho que cometi algum erro no nome do meu evento. Então eu vou voltar aqui e passar por lá não está funcionando. Tudo bem. OK. OK. Então, acho que cometi um erro em nome disso. Então, basicamente, não é carga. Na verdade, está em carga. Então, eu posso simplesmente anotar o onload aqui. Sim, exatamente. Então, eu cometi um erro aqui de que ele estava realmente carregado. Está bem? Então, agora temos que fazer, vamos reformular isso Agora vamos voltar para o nosso navegador, ir para o nosso projeto. Agora você pode ver isso, estamos carregando nosso console. Está bem? Então, no momento, não temos nossa chave visitada em nosso armazenamento local. Então, se eu puder voltar aqui, clique no armazenamento, clique no armazenamento local. Agora você pode ver aqui que não temos nossa chave visitada. Então