Aprenda JavaScript: do iniciante às técnicas avançadas de codificação

1. Introdução: Javascript, vamos falar sobre JavaScript. Ao contrário do HTML e do CSS, que são linguagens de marcação e folha de estilo, respectivamente, o JavaScript é uma linguagem de programação semelhante a Python, Java e O que o JavaScript nos permite fazer é introduzir lógica em nossos sites atualmente estáticos ou imutáveis Por exemplo, se você tivesse um formulário que permitisse que um usuário se inscrevesse em seu site, não seria ótimo se, depois de fazer login, ele fosse saudado pelo nome em fosse saudado pelo nome vez de receber um olá genérico Isso é algo que o JavaScript nos permitirá fazer. Alto. Zoe Davidson, engenheira de software e professora engenheira de software e Vamos mergulhar nos meandros do JavaScript e das linguagens de programação em geral 2. PROJETO DO CURSO : Vamos usar esse pequeno formulário que criamos aqui e, na verdade, vamos usá-lo para dar aos nossos usuários nossa resposta quando eles enviarem suas informações 3. Linguagens de programação: Linguagens de programação. Então, como já discutimos, o JavaScript é uma linguagem de script que permite que você introduza lógica e funcionalidade em suas páginas da web Mas como ele faz isso? Como também mencionamos, o JavaScript é uma linguagem de programação. Há várias coisas que a maioria, se não todas as linguagens de programação, têm em comum. Assim como outros tipos de linguagens baseadas em computador, as linguagens de programação são, em suas formas mais simples, apenas formas de falarmos com o Javascript, em particular, nos permite, como programadores interagir com a Web por meio do DOM ou do modelo de objeto do documento O DOM é uma interface de programação para documentos da web e atua como uma representação dessa página para que ela possa ser interagida, atualizada e modificada com base na entrada e interação do usuário Javascript, em particular, é a linguagem que usamos para interagir com o DOM. E 98% de todos os sites usam JavaScript no lado do cliente. As linguagens de programação também têm sua própria sintaxe exclusiva Assim como em outros idiomas, como inglês e francês, existe uma sintaxe que define e explica as maneiras pelas quais as palavras se juntam para formar frases, parágrafos, linguagens de programação da mesma forma, cada uma tem sua própria sintaxe para determinar o que constitui uma linha completa de código Por exemplo, assim como na aula de gramática da escola, passaremos uma boa quantidade de tempo aprendendo e discutindo sintaxe para que possamos garantir que estamos falando o idioma corretamente Afinal, pense importância das vírgulas no idioma inglês Você já deve ter ouvido falar de outras linguagens de programação como Python, C, Ruby, java e Dependendo do tipo de aplicativo que você deseja criar, uma dessas linguagens de programação pode ser mais adequada para a tarefa do que outras. Todas as linguagens de programação têm seu próprio caso de uso e propósito exclusivos. O objetivo deste curso é aprender como interagir e criar aplicativos para a web. A melhor linguagem de programação que podemos aprender é o JavaScript. Há várias outras coisas que todas as linguagens de programação têm em comum, incluindo variáveis, estruturas de controle e estruturas de dados. Entraremos em cada um deles em tempo hábil. Agora que você sabe um pouco mais sobre o que é JavaScript e como ele se relaciona com o desenvolvimento web Vamos começar a escrevê-lo 4. Configuração: Há dois lugares onde o JavaScript pode ser escrito em arquivos HTML ou em seu próprio arquivo JavaScript dedicado. Se quisermos escrever JavaScript em um arquivo HTML, basta adicionar a tag de script à seção principal do documento. Essa tag de script é reservada para todas as linguagens de script, que são linguagens nas quais você pode executar comandos com largura, e é aqui que nosso JavaScript poderia teoricamente viver Tudo o que você escrever entre essas tags será compilado e interpretado como JavaScript. Bem, isso é bom para aplicativos muito pequenos. Isso pode ficar um pouco complicado quando começarmos a criar sites cada vez mais complexos. Nesse caso, podemos utilizar o segundo lugar em que o JavaScript pode ser escrito em seu próprio arquivo e apenas utilizar uma tag de script como referência, criar um arquivo JavaScript separado, App.js, e conectar os dois. Como você mencionou, há dois lugares em que o JavaScript pode ser escrito em um elemento de script na página HTML entre duas tags de script ou em seu próprio arquivo. Se fôssemos escrevê-lo dentro do arquivo HTML, escreveríamos assim. Criamos nossa tag de script na cabeça e depois escrevemos nosso JavaScript. Então, escrevemos como console.log, Hello, World, salve. E então, se acessássemos nossa página da web, veríamos no console que registramos o Agora, isso não é uma má ideia quando você está fazendo projetos muito menores, mas, como você pode ver, não é necessariamente uma coisa prática de se fazer. Se você tiver vários componentes e várias camadas. Você pode imaginar que seu arquivo HTML começaria a ficar muito longo. Como uma boa regra de prática, uma boa ideia é manter em mente que você realmente não quer arquivos mais de 100 linhas , a menos que seja um componente particularmente complexo que precisa de toda a lógica para estar tudo junto. Idealmente, você deseja dividir as coisas em pedaços e integrá-las conforme necessário. Para isso, você deseja colocar seu JavaScript em um arquivo separado. Então, vamos nos livrar disso. E isso é, na verdade, criar um novo arquivo, e vamos chamá-lo de app.js. Como o JavaScript é uma linguagem de script, o elemento script nos permite conectar coisas que são scripts Assim, podemos fazer o script e, em seguida, podemos fazer exatamente como fizemos com a folha de estilo, barra de ponto e selecionar app.js e ter nossa tag de script fechada Tudo bem, lá vamos nós. Pronto para ir. Tudo bem, minha tag de script agora está conectada 5. Escrevendo JavaScript: Escrevendo JavaScript. Agora que sabemos onde o JavaScript é usado e como ele funciona teoricamente, é hora de aprender a escrever Se você é iniciante na programação de JavaScript, levaremos um pouco mais de tempo para aprender do que HTML e CSS. E isso é completamente normal. É porque você não está apenas aprendendo outra linguagem nova, mas também está aprendendo uma linguagem de programação e alguns dos principais conceitos por trás da programação em geral. Mas não se preocupe, se você continuar com isso em breve, será tão fácil quanto qualquer outro idioma. Primeiro, vamos entrar nesse arquivo app.js vazio. Tudo bem, então vamos testar nosso link para ter certeza de que está funcionando Então, vamos fazer um console.log e digitar hello world, salvá-lo e vê-lo em um console. Incrível. Você já está escrevendo JavaScript. Agora, o que você acabou de fazer lá? Você simplesmente instruiu o console, que é aquela janela na guia do Chrome, a registrar ou exibir, o que você colocou dentro desses dois colchetes O Console.log é um método essencial que até mesmo engenheiros de software avançados usam, pois é uma ótima maneira descobrir onde você pode ter cometido um erro em seu código. Um processo conhecido como depuração. Por enquanto, não precisamos desse código, então vamos comentá-lo. Para comentar algo. Em JavaScript, você mantém pressionado o botão Comando e pressiona a barra para frente e, na verdade, ele apenas comentará. Então, comentar significa que você não precisa usar esse código Não está mais funcionando ativamente. Você sempre pode inusitá-lo e trazê-lo de volta para sua página Mas você não precisa necessariamente de comentários, é outra ótima maneira de deixar notas mais amigáveis para outros desenvolvedores Então, você pode dizer que isso é um comentário e apenas dizer às pessoas o que você está tentando fazer. O trabalho delas poderia dizer que este é um registro de pontos do console de teste. Assim, você pode informar as pessoas como “Ei, esse registro do console não é importante” Os comentários são realmente ótimos. Acho que mais pessoas deveriam colocar mais comentários no código para que outros desenvolvedores, quando estiverem trabalhando juntos, possam entender por que alguém fez uma escolha simples. Você não quer colocar muitas linhas com um comentário, mas apenas uma linha curta, um trecho rápido só para dizer: Ei, isso é o que eu fiz isso, por que fiz isso? Acho que é uma prática muito boa. 6. Variáveis: Variáveis em ciência da computação, dados são qualquer coisa que seja significativa para o computador. O Javascript fornece oito tipos de dados diferentes que são indefinido, nulo, booleano, string, número, objeto, big, objeto, big, Neste curso, vamos nos concentrar apenas nos seis primeiros, pois, como engenheiro novato, um computador a você raramente encontrará esses últimos tipos de dados para ajudar entender o que ele pode não fazer com um dado Por exemplo, 12 pode ser um tipo de número ou um tipo de string. Se for um tipo de número, o computador o trata como tal. E pode ser usado em todos os tipos de operações matemáticas, como adição e subtração Por exemplo, se for uma string, por outro lado, ela será tratada como uma linha de caracteres, como uma frase ou outro grupo de letras. As cadeias de caracteres são grupos de caracteres usados para armazenar linhas básicas de dados que não são números As sequências de caracteres sempre têm aspas, enquanto os números não, e também são sempre números Todos os dados não precisam apenas de um tipo, mas também de um local para armazená-los para que possam ser acessados repetidamente. Seria uma experiência terrível se você digitasse um monte de informações em uma página da web e simplesmente desaparecessem quando você saísse da É aqui que as variáveis entram em jogo. As variáveis atuam como locais de armazenamento para cada valor específico. Você pode ter se deparado com variáveis como X e Y e suas aulas de matemática do ensino médio As variáveis de programação seguem o mesmo conceito. Eles são uma representação dos dados que estamos armazenando. A única diferença é que, com o JavaScript, essas variáveis podem ser qualquer um dos oito tipos que mencionamos no início desta lição. Por exemplo, se estivéssemos codificando um site com um formulário que solicita aos usuários seu primeiro nome Armazenaríamos os dados que eles nos forneciam em uma variável. Vamos marcar isso como um exemplo para entendê-lo melhor. Tudo bem, então eu criei a pasta chamada learn JS Vou criar um novo arquivo. Vou chamá-lo de app.js. Vamos continuar falando sobre as diferentes partes do JavaScript e como elas funcionam. Então, como acabamos de falar, as variáveis são uma forma de armazenarmos dados em JavaScript. Então, por exemplo, se tivéssemos um formulário de um site com um formulário que perguntasse o nome dos usuários. Provavelmente gostaríamos de ter alguma maneira de obter essas informações. Então, vamos criar um arquivo HTML rápido e criar esse formulário que possamos usar Tudo bem, então, neste formulário, será um pouco semelhante a outro formulário, com algumas diferenças importantes Então, vou criar uma entrada de tipo, texto número de texto. E colocaremos isso como idade, faremos com que seja perfeito. Então, esse é um formulário muito simples, que simplesmente pediremos ao usuário seu primeiro nome, sobrenome e idade. Você deve ter um botão de envio. Portanto, o tipo de entrada é igual ao botão. E vamos focar apenas no botão. E diremos Enviar. Vamos conectar nosso app.js ao nosso HTML, como fizemos antes com uma tag de script. E a fonte será dot slash app.js. Feche isso, guarde isso, e estaremos prontos para ir. Então, se voltarmos para o local, localhost 50, 50, você sabe, eu acho que é isso A terceira é que, tudo bem, nós temos, somos uma forma muito, muito básica Tudo bem, então temos nosso nome, sobrenome ou idade e nosso botão de envio Então, queremos ir em frente e preencher esses dados , certo? Digamos que você queira que um novo usuário acesse seu site e preencha essas informações. Hum, você dirá como John Brown e sua idade de 45 anos, certo? E ele enviará essas informações. Legal. No entanto, nada acontece quando você envia as informações. As informações não vão a lugar nenhum. O que queremos fazer agora é salvar essas informações em uma variável para que pelo menos possamos usá-las Então, se formos inspecionar aqui, conferir nosso console, uma coisa que podemos fazer é realmente enviar essas informações para uma variável Então, quando o usuário pressiona enviar, podemos ter nosso Formulário, enviar os dados para algum lugar O que vamos fazer aqui é criar uma variável. Portanto, existem dois tipos de variáveis. Existem variáveis constantes e variáveis que podem mudar, conhecidas como variáveis let, variáveis constantes Uma vez que você atribui um valor a elas, o valor não pode mudar As variáveis Let, por outro lado, podem mudar. Então, queremos decidir qual tipo de variável queremos usar para a situação. Pessoalmente, eu recomendaria usar uma variável principal porque na verdade não sabemos o valor da variável antes de o usuário enviar seus dados Podemos deixar o usuário e fazer que agora a variável user não esteja configurada para nada. Ainda não significa nada, mas, eventualmente, podemos atribuir um valor a ele É uma boa prática inicializar uma variável com um valor, mas isso não é obrigatório Quando você não inicializa uma variável com um valor, ela obtém o valor padrão de undefined O terceiro tipo de dados discutirá Todos os meios indefinidos são que ainda não foram definidos quanto ao que são Portanto, a variável ainda não existe. Isso não significa que ele tenha um valor de nada, no entanto, esse é o tipo de dados de nulo Nulo e indefinido são dois tipos de dados muito semelhantes, mas com diferenças sutis, mas com diferenças sutis, você pode atribuir uma variável ao valor de nulo e ela ainda existirá de É como dizer ao computador que você tem uma caixa em sua unidade de armazenamento, mas sabe que ela está vazia. Se você atribuir essa mesma variável ao valor de undefined, agora você está dizendo ao seu computador que a caixa não existe de fato Saiba, intencionalmente não é nada enquanto indefinido não existe Se quiséssemos criar um valor constante de variável, podemos fazer o usuário CONST e depois fornecê-lo, poderíamos, bem, vamos chamar isso Você não pode, você também não pode ter variáveis com exatamente o mesmo nome. Então, podemos chamar isso de idade constante. E então poderíamos configurá-lo para um número específico ou uma string. Então, podemos configurá-lo para isso, ou podemos defini-lo para 45, certo? Seja como for, o que quer que queiramos definir, usamos os iguais para realmente atribuir um valor a uma variável Então, ao contrário da matemática, somos iguais a I1 mais um, é Não é um operador matemático nesse sentido, é na verdade uma tarefa. Um operador de atribuição sobre o qual falará o sinal de igualdade. Falaremos um pouco mais tarde sobre as outras maneiras pelas quais podemos usar iguais para realmente significar que isso é igual a isso Mas, por enquanto, o que precisamos saber é que o único sinal de igual no singular é a atribuição Então, a idade é 45. Podemos pensar nisso assim. Como coloquei o valor aqui, é uma boa ideia inicializar uma variável com um valor Portanto, podemos realmente deixar o usuário igualar essas aspas vazias Aspas ou a forma de identificar uma sequência de caracteres. Se você colocar, seja igual a, deixe o usuário ser igual às aspas, está apenas dizendo ao computador que isso provavelmente será um valor de string Mais tarde, podemos realmente exigir que seja uma string ou um número ou o que quer que seja Mas isso é algo que podemos fazer com o TypeScript. Mas e se não inicializássemos esse valor, certo? Tipo, e se tivéssemos isso assim, que valor você acha que teria? Já falamos sobre os diferentes tipos de dados, então há um número de string, mas provavelmente não seria nenhum deles se não dermos um tipo a ele. Bem, se você não tiver certeza sobre algo, podemos simplesmente Então, se usarmos o log de pontos do console, usuário verá que o usuário está realmente indefinido E se você se lembrar, indefinido significa que algo não existe. Nulo significa que é essencialmente zero porque é indefinido. Eu sou, isso significa que ele ainda não existe. Depois de atribuirmos um valor a ele, ele então existirá Por outro lado, se registrarmos a idade do console, devemos obter 45. E é para isso que o atribuímos. Outra coisa legal que podemos fazer é registrar no console o tipo de uma variável específica e ele realmente nos fornecerá o tipo. Então, nesse caso, o tipo de idade é um número porque atribuímos um número a ele. Você também pode, como falamos antes, usar, podemos conversar, podemos atribuir a uma variável um valor nulo, certo Então, CONST, nada. Poderíamos defini-lo como nulo e salvá-lo. E então, se não fôssemos nada em Console.log , deveríamos saber. Como você pode ver aqui, temos null no console. Então, dissemos especificamente ao computador que ele é nulo, não é nada, não foi feito para ser lido Porém, uma coisa que realmente deve ser lembrada, especialmente em ciência da computação e com variáveis, é a ortografia Com o JavaScript, na verdade, é possível ter dois tipos diferentes para variáveis diferentes com a mesma grafia Então eu poderia realmente fazer CONST, idade. Eu posso fazer idade com letras minúsculas. Eu poderia envelhecer com letras maiúsculas. E isso não vai me dar um erro. No entanto, no futuro, se eu escrever incorretamente onde eu uso a idade, como se eu colocasse a idade em maiúsculas em vez de minúsculas no console , eu poderia como se eu colocasse a idade em maiúsculas em vez de minúsculas no console errar a idade eu Portanto, a melhor prática é não fazer isso e, na verdade, usar apenas uma forma de ortografia e capitalização para suas variáveis Falando em ortografia e capitalização em JavaScript, verdade usamos um método especial de capitalização Camelcase é onde você tem a primeira letra. A primeira letra da primeira palavra é minúscula, e a primeira letra todas as palavras seguintes é Então, CamelCase, é como um camelo. Então, quando você precisa criar mais de uma variável, você sempre pode usar camelCase ou talvez queira ser um pouco mais descritivo Então você poderia dizer CONST, o sobrenome do usuário é igual a marrom. E aí está. É assim que você escreveria isso com maiúsculas e minúsculas, o último é maiúsculo e o nome também é maiúsculo Tudo bem, então vamos nos aprofundar um pouco mais para ver o que mais podemos fazer com variáveis, certo? Portanto, temos nosso sobrenome de usuário. Vamos criar um nome de usuário para John. Vamos supor que isso é o que o usuário inseriu em nosso formulário E então queremos escrever uma frase, talvez queiramos cumprimentar nosso usuário quando ele clicar em Enviar, queremos dizer oi Portanto, existem diferentes maneiras fazer isso. Mas uma coisa interessante que podemos fazer com variáveis é, na verdade, concatená-las Assim, podemos juntar variáveis diferentes para criar uma frase ou alguma outra sequência que seja significativa ou útil para nós ou para nossos usuários. Então use concatenação, o que você simplesmente faria, e diria que provavelmente salvou isso em outra variável, provavelmente salvou isso em outra variável Então você poderia dizer CONST, saudação. E então você não pegaria o nome real do usuário, mas a variável que representa nome deles e os colocaria juntos em uma frase. Então, poderíamos dizer, oi. E então usamos o símbolo de mais para basicamente simbolizar o que queremos que essas duas coisas sejam somadas Agora, como em matemática, mas como conectado, high user, user, FirstName e LastName Então, pode até terminar com um ponto de exclamação, porque estamos ansiosos para falar com essa pessoa E então temos nossa saudação. Saudação é igual a oi mais qualquer nome de usuário, mais qualquer que seja o sobrenome E você sabe o que? Para uma boa prática, deixe-me colocar um pouco de espaço aqui apenas para ter certeza de que está formatado corretamente. Tudo bem, vamos continuar e registrar a saudação do console e ver o que recebemos. Lá vamos nós. Oi John Brown, plano de estudos. Está muito animado. Vamos tirar o primeiro. Diz: Oi John Brown. E é basicamente assim que a concatenação funciona. Você pode pegar sequências de caracteres, você pode pegar variáveis e conectá-las para criar envios que sejam significativos para as pessoas ou outro uso significativo seja assim Outra coisa interessante que você pode fazer com variáveis, especificamente com cadeias de caracteres, é descobrir quantas letras estão nelas. Porque cadeias de caracteres são na verdade apenas um conjunto de letras, é a lista de letras Na verdade, eles também se enquadram tecnicamente em outro tipo de dados, que é uma matriz, sobre a qual falaremos um Mas um dos métodos disponíveis ou dos recursos que você obtém como resultado do uso de matrizes é que você pode saber quanto tempo elas duram Então, se eu quisesse ver quantas letras estão na string de saudação, eu posso basicamente fazer a criação de console.log e, em seguida, colocarei um ponto depois dela para especificar que há um método nessa variável que eu quero acessar Dot basicamente é como uma forma de entrar em algo. Então, se eu tenho uma caixa e sei que há um garfo lá dentro. Posso pressionar como o garfo Box dot para colocar o garfo dentro da caixa e atingir o comprimento do ponto de saudação E como o comprimento é uma propriedade que está na saudação, ela deve nos dizer quantos caracteres estão na saudação Então, vamos continuar e registrar isso no console. 14. Quero dizer, se você calcular, é como o espaço HI J0 H BR OWN, e então há outro espaço E o ponto de exclamação final, é 14. Então, ele nos diz exatamente o tamanho de uma string ou de uma matriz. Portanto, é uma propriedade muito legal de acessar se você precisar saber o tamanho de algo, que será mais útil à medida que trabalharmos com conjuntos de dados cada vez maiores 7. Matrizes: As matrizes dizem que queremos armazenar vários nomes juntos para que possamos acessá-los mais tarde Nesse caso, usaríamos outro tipo de dados chamado matriz. Uma matriz é criada encapsulando os dados individuais dentro dela usando colchetes e vírgulas para separar cada Você pode ter qualquer número de elementos em uma matriz, mas é uma boa ideia usá-los somente quando tiver mais de um dado para armazenar. As matrizes podem até mesmo conter outras matrizes. Eles podem armazenar dados de qualquer tipo. Vamos tentar adicionar uma matriz à nossa página. Tudo bem, então outro fato interessante sobre linguagens de codificação e, em geral, é que a maioria das linguagens de codificação não começa a contar Eles começam a contar em zero. Isso é chamado de indexação baseada em zero e é exatamente a forma como aprendemos a contar Você encontrará muitas linguagens que fazem isso em JavaScript, é uma delas. Vai levar algum tempo para se acostumar, mas tenho certeza que você pode fazer isso. Tudo bem, então podemos usar a indexação baseada em zero, para realmente nos ajudar a entender o funcionamento interno de diferentes partes de dados, como matrizes e cadeias de caracteres para realmente nos ajudar a entender o funcionamento interno de diferentes partes de dados, como matrizes e cadeias de caracteres. Então, se pegarmos esse elemento de saudação aqui, pegamos essa saudação, a sequência de seleção Na verdade, podemos usar a indexação baseada em zero para obter uma letra específica de saudação O que faremos é usar algo chamado notação de colchetes. Portanto, há dois tipos de nova notação. Há notação de colchetes e notação de pontos. Na verdade, você já usou a notação de ponto usando a propriedade de comprimento do ponto de saudação Basicamente, o que a notação de pontos diz é: Ei, eu sei que você tem essa coisa e há algo dentro dela Se meu nome é Zoe, a notação do ponto pode ser: “ Ei, eu quero saber que Zoe é, Zoe é o sobrenome ou você sabe, é Essas são as coisas que você poderia marcar em mim se eu fosse um objeto JavaScript. Mas em termos do que temos aqui, temos uma saudação que é uma sequência de letras, uma frase E poderíamos acessar , na verdade, apenas uma letra dessa frase, se quiséssemos. Isso pode ser muito útil quando você tem talvez uma lista de dados, listas de nomes. E você só quer tirar o nome ou o sobrenome dessa lista ou algo parecido Mas podemos praticá-lo usando nossa sequência de saudações. A notação de ponto kiva para é que você precisa saber o nome da propriedade Então, se você está procurando a idade de qualquer que seja o seu objeto, você precisa saber que a idade existe. Caso contrário, ele retornará indefinido. Se eu disser balão de pontos de saudação, ele deve retornar indefinido porque não há nenhuma propriedade de balão em No entanto, se fizermos a notação entre colchetes, podemos acessar esses primeiros caracteres ou menos caracteres ou qualquer que seja o caso Então, eu menciono tudo isso com uma lata de índice baseada em zero, porque vamos colocar dois colchetes ao lado da Então, dentro desses colchetes, indicaremos qual personagem queremos acessar E se for o primeiro personagem, não vamos colocar um. Vamos colocar zero porque começamos a contar em zero quando passamos para a saudação colocamos zero e depois vamos salvá-lo E devemos obter um H maiúsculo. Vamos ver o que obtemos. Incrível letra maiúscula H. É assim que sabemos que está funcionando. Estamos recebendo a primeira carta. Se fizermos um para obter o eu, se fizermos para obter, devemos obter esse espaço, que pareceria nada. Mas na verdade é um pouco, então há pouco espaço lá. E então podemos fazer tudo isso até o fim. Agora, se quisermos obter a última letra da sequência de saudação, uma coisa que podemos fazer é acessar o comprimento e, em seguida, fazer o comprimento menos Então, podemos fazer uma saudação, podemos fazer uma saudação, e então podemos fazer dentro desse colchete fazer a saudação novamente, ponto Portanto, com a indexação baseada em zero, você sempre precisa subtrair um de qualquer número de valores para acessar esse último Então, se você tem cerca de 12344 peças de elementos pobres e sabe que você é, você é, você é uma sequência de quatro caracteres No comprimento, haverá quatro, mas quando você contar, na verdade será 0123 Então, a razão pela qual subtraímos um é para acessar esse último. Se subtrairmos, se colocarmos para, ele realmente tentará acessar algo que não existe. Portanto, queremos ter certeza de que subtraímos um quando procuramos o último elemento e uma string, faremos uma saudação com o comprimento do ponto menos E esse será, na verdade , o índice que estamos procurando acessar. Então, isso basicamente será computado em um número, o número correto do índice Então, se a saudação mudar de comprimento, talvez John mude seu nome para Stephen E agora a saudação não tem mais 14 caracteres. Talvez seja 17. Em vez de codificar 14 como essa saudação, o número da saudação ou Se já fizermos as contas, podemos simplesmente dizer, ei, qualquer que seja o tamanho do gradiente, não importa qual seja o nome da pessoa, só queremos obter o comprimento e o último caractere não é um ponto de exclamação É um período, seja o que for. Se clicarmos em Salvar, devemos receber um ponto de exclamação. Vamos lá, aqui mesmo no console. Ponto de exclamação. Tudo bem, então fomos apresentados ao conceito de matrizes Essas peças, esses conjuntos de dados em que podemos manter várias variáveis juntas, várias cadeias de caracteres juntas, talvez várias informações juntas Isso é incrível. Essa é uma maneira muito mais fácil de reunir todos os nossos dados em uma única peça. Então, o que podemos fazer agora é realmente usar essas matrizes a nosso favor Então, em vez de termos idade, usamos nosso primeiro nome, use seu sobrenome e saudação Na verdade, podemos manter tudo isso em uma matriz Podemos dizer CONST, usuário, primeiro usuário, primeiro usuário E em vez de ter tudo isso separadamente, podemos dizer que o primeiro usuário é igual Ou podemos dizer, em vez de, bem, vamos nos livrar desse usuário aqui. E podemos dizer usuário do CONST porque as matrizes são, na verdade Então, como dissemos que você não pode mutar, mude uma constante. Na verdade, você pode alterar as matrizes independentemente de elas serem declaradas com CONST constante ou com O que é realmente interessante sobre eles. Então, se quiséssemos criar uma string que represente nosso usuário, poderíamos criar a matriz com nossos colchetes e então dizer que o usuário é o primeiro nome do usuário Faremos o sobrenome do usuário do aplicativo do usuário. E então faremos que o usuário faça a idade, ou seja, R. Agora, nossa matriz de usuários. Essa matriz deve ter todas as informações sobre nosso usuário. Então, se eu for usuário do console.log, devo obter todas essas informações, sim, separadas por vírgulas Então temos John Brown com 45. Então isso é muito legal. Existe uma maneira de mantermos todos os nossos dados pessoais juntos, por exemplo, organizar nossos dados não precisa estar em todo lugar É uma maneira muito mais fácil de juntar as coisas. Então, como falamos antes, assim como com cadeias de caracteres, podemos acessar números diferentes dentro de nossa matriz, certo? Então, digamos que tivéssemos um monte de usuários diferentes, certo? Então, digamos que tivéssemos user1 FirstName e tivéssemos outro usuário, certo Então, digamos que tivéssemos, vou mudar isso para usar ou uma idade. E vou mudar esses dois para usuário para Const, usuário para idade é igual Tudo bem? Portanto, agora temos dois usuários. Temos o usuário um e o usuário final. Esse é um ótimo lugar para usar comentários, então podemos usar apenas R1 Podemos ser muito específicos o que estamos falando e fazer com que as coisas pareçam um pouco menos confusas do que ótimas que Então, digamos que esses dois usuários escrevam e digamos que queríamos armazenar apenas o primeiro nome desses dois usuários Poderíamos fazer com que o nome do usuário CONST fosse igual ao nome do usuário 1 e do usuário ao primeiro nome, certo Essa seria uma matriz que continha os dois primeiros nomes. O que é muito legal. Temos isso a nosso favor. Agora, digamos que quiséssemos acessar apenas o primeiro nome dessa matriz Então, o FirstName do primeiro usuário, poderíamos realmente acessá-lo usando a notação de colchetes. Então, poderíamos fazer console.log via console.log it. E poderíamos dizer o primeiro nome do usuário entre parênteses zero. E isso deve nos dar primeiro nome do nosso primeiro usuário, que é John. Fizemos isso corretamente. Recebemos o primeiro nome do usuário. Então, essa é uma forma muito útil, como quando talvez queiramos chamá-la a primeira pessoa que chega à festa e é encolhida no Queremos dizer, Hey John, e queremos recebê-los. Primeiro. Podemos repeti-las até chegarmos ao final da lista Porque esse é um recurso muito interessante sobre Arrays. Você vai manter todos esses dados juntos e acessá-los usando a notação de colchetes Mas digamos que você não necessariamente saiba o índice do que está procurando, certo? Digamos que você saiba que, você sabe, John deu a festa, mas você não sabe se ele é o primeiro, o último, o do meio. Preciso encontrar o nome. Bem, na verdade existe outro método. Assim como tínhamos o método de comprimento, existe o método find que podemos usar em uma matriz para encontrar um dado específico que estamos procurando, podemos usar o primeiro nome do usuário. Devemos usar nomes, nomes usuário, nomes. E podemos chamar ponto, tudo bem. E podemos ver que aqui estamos com nossa documentação. Na verdade, há algumas informações sobre isso. Portanto, é um método para matrizes de strings encontrarem uma string específica E então, basicamente, diz como escrevê-lo. Isso pode ser um pouco confuso, então vamos ver se podemos pesquisar no MTN Então, vamos voltar ao MTN e procuraremos encontrar. Tudo bem, array dot prototype dot, Fine, Cool. Portanto, o método find retorna o primeiro elemento na matriz fornecida. Esse lado satisfaz a função de teste fornecida. Se nenhum valor satisfizer a função de teste, undefined será Bem simples. Então, pegamos qualquer que seja nossa matriz de matriz, eles a salvaram, a resposta em uma variável aqui, então encontrada, e então a chamamos na matriz. Então, array dot quer que array1 dot encontre qualquer que seja o elemento Se o elemento for maior que dez. E então eles devem encontrar, eles devem obter, eu acho que pega o primeiro, o primeiro que é encontrado. Isso é muito legal. Então, vamos ver se podemos encontrar, então pegamos qualquer coisa. Então, basicamente, o que está acontecendo aqui é pegar elemento por elemento. É examinar a lista e tentar encontrar a primeira que atenda aos critérios. Então é preciso, está procurando por um elemento. Se esse elemento for maior que dez, ele salvará a resposta e a devolverá para dizer: Ei, encontramos a resposta. Então, vamos ver se podemos fazer a mesma coisa. Faremos valores constantes em libras iguais e elas não precisam ser encontradas em nada além de nomes de usuário constantes, Vamos procurar um nome. Se o nome for igual, será igual a não. Como falamos antes, existem dois tipos de iguais, certo Existem os iguais simples, os iguais duplos e os iguais triplos Essa é uma situação em que usaríamos dois iguais para dizer: Ei, eu quero que isso corresponda a isso Então, se o nome é igual a John, se o nome é John, então eu quero que você o encontre e o devolva para mim Então, se o console.log for encontrado, devemos pegar John. Então temos John, mas e se John não estivesse na lista? E se fosse Harry? Salvar isso ficará indefinido, assim como a função disse que faríamos Agora, e se quiséssemos encontrar algo um pouco mais interessante? E se quiséssemos encontrar um nome? Encontre um nome em que nome, o nome seja maior que, digamos cinco. Ambos se chamam John, devemos mudar isso. Então, vamos mudar isso para Stephen, como mencionamos. Portanto, se o comprimento do nome for maior que cinco, ele deverá retornar o nome. Portanto, não deveria devolver John, deveria devolver Steven Vamos ver. Incrível. Então, recuperamos Steven. Você pode ver como esses diferentes métodos começam a se somar e a trabalhar juntos para criar o que precisamos encontrar Esse é o básico da ciência da computação. Você está começando a trabalhar com algoritmos que já existem no computador Então você está no caminho certo para realmente aprender JavaScript. E, novamente, você pode estar se perguntando como eu conheço todos esses diferentes tipos de dados e métodos. Não é porque eu tenho a memorização. Como você pode ver, literalmente pesquisamos no Google tudo o que precisamos e tudo o que precisamos realmente não temos em nossas cabeças. Então, usei o método de comprimento sem muita dificuldade. Isso porque é algo que eu usei muito mas tudo bem é algo que eu não usei tanto. Então, pesquisei para ter certeza de que tenho a implementação correta. E eu não estava apenas tentando implementá-lo do nada, estava fazendo a coisa errada e recebendo erros porque foi apenas um erro tolo na minha implementação Antes de terminarmos falando sobre matrizes, vamos examinar mais alguns desses tipos essenciais de métodos que talvez queiramos usar Mais um mapa de codificação basicamente itera sobre a, uma matriz e retorna os resultados, incluindo essa iteração uma matriz e retorna os resultados, incluindo essa Portanto, geralmente é feito para fazer algo com a matriz. Então, se eu usar o primeiro mapa de pontos, quero pegar o nome e concatenar o nome, talvez nome mais sol os nomeie Johnson e Stevenson E eu quero que ele devolva o mapa. Então, vamos mudar isso para mapeado. Em teoria, eu deveria pegar Johnson e Stevenson quando os mapeasse Então, vamos ver. Agora temos uma matriz com Johnson e Stevenson. Assim, você pode usar IMAP sobre itens individuais na matriz e fazer alterações Então, usando o mapa, o próximo, vamos falar sobre cada um, pois cada um é muito semelhante ao mapa, exceto por uma diferença fundamental. Na verdade, não retorna nada. Então, como conseguimos salvar o mapa em uma função, em uma variável e em um log de console com os quais , na verdade, não retornamos nada para cada um. Então, é para mudar como a coisa real em si. Então, se eu quisesse mudar o primeiro nome de John, ou se eu quisesse criar uma nova matriz, talvez eu tenha criado uma matriz vazia Então, conc, matriz vazia. E não tinha nada nele. Como você se lembra, eu disse antes que as matrizes são mutáveis. Isso significa que você pode adicionar e retirar coisas delas mesmo depois de terem sido criadas com uma constante. Então, digamos que eu queira adicionar coisas, adicionar nomes a essa matriz vazia. Então, talvez eu tenha escolhido os nomes dos usuários e em vez de matemática I para cada um, fiz um para cada um. Então, para cada nome, não vou salvá-lo em uma variável desta vez, vamos apenas usá-lo como está. Vamos, para cada nome, usar um método chamado push. Vamos pegar nossa matriz vazia e vamos pressionar, vamos empurrar o nome. Então isso significa que estamos literalmente usando esse nome. Estamos empurrando-o para a matriz. Portanto, deve haver um Johnson ou deve haver um John e um Steven em nossa matriz vazia Vamos configurar isso e usar o array vazio console.log. Na verdade, vamos esvaziar a matriz console.log duas vezes. Isso é console.log antes e depois. Portanto, devemos ver apenas colchetes vazios, colchetes e, em seguida, devemos ver John e Stephen Perfeito exatamente o que temos. Colchetes vazios e icterícia, mesmo sabendo que está sendo chamada , estão realmente Ótimo. Vamos conferir outro método. Fatia. Tudo bem, então quando você está trabalhando com slice, você pode basicamente decidir qual seção da matriz você gostaria de trabalhar É muito interessante fazer isso quando você está realmente trabalhando com nomes, por exemplo. Então, se eu pegasse Const, sliced, se eu estivesse criando uma variável chamada sliced, e eu pegasse E então eu fiz uma fatia nela. Onde eu comecei talvez com a segunda letra e terminei com a quarta letra, eu deveria pegar uma fatia do nome de Stevens E se eu consolar um registro de pontos fatiado recebo uma dica, que está no meio do nome Stevens entre os entre É assim que você cortaria, você cortaria como. É isso para mim. Essa é a melhor maneira de usar slice em uma string ou algo parecido, onde eu só preciso de um subconjunto Tudo bem, o próximo método que vamos finalizar a compra é emendar Splice é muito semelhante ao Splice, mas na verdade muda a própria matriz Então eu chamo de splice em uma matriz. Isso me trará de volta uma nova matriz. Isso mudará essa matriz desde o início, dividirá um pouco diferente da fatia necessária. Na verdade, vamos chamar splice nos nomes dos usuários Então, o que vamos fazer é colocá-lo com um número inicial. Então, começaremos talvez no índice um, que é o usuário dos primeiros nomes. Então vamos, vamos deletar um. Vamos deletar o nome de Justice Stevens e, em seguida, adicionaremos um novo nome e adicionaremos o nome de Harry Então, vamos salvar isso e depois usar o nome do usuário console.log. Desculpe. Então, o que isso deveria ter feito era pegar isso, modificá-lo e retorná-lo como uma matriz mutada. Vamos ver se funcionou. Incrível. Agora temos 0 e vamos nos livrar desse console.log. Incrível. Então agora temos John e Harriet em vez de John e Então foi assim que você juntou basicamente e colocou algo novo lá dentro Mas você não precisa colocar algo novo e pode simplesmente retirá-lo e deixá-lo assim. Tudo bem, então o próximo que vamos dar uma olhada é o shift Shift é outro método que também modifica uma matriz. Quando você chama shift em uma matriz, ela realmente remove o primeiro elemento. Agora você pode salvar esse primeiro elemento ou retornar a matriz modificada. A escolha é sua. Vamos dar uma olhada em como usaríamos isso em nossa matriz de nomes de usuário. Poderíamos chamar o nome de um usuário de dot shift. E não precisamos passar nenhum parâmetro. Vamos chamá-lo assim. Então, se usarmos o primeiro nome de usuário do console , devemos saber quem deve receber o nome de Stevens? Então, sim, há apenas infiltração. Mas se usarmos o console.log, deveríamos realmente obter o nome de John. John, lá vamos nós. Portanto, depende do que você está tentando obter. Você está tentando obter o primeiro nome? Estamos tentando obter a lista inteira sem o primeiro elemento, ou você está tentando obter a lista inteira sem o primeiro elemento. Qual dessas duas maneiras você acessará esses dados, mas a escolha é sua novamente, a última que vamos finalizar a compra hoje é unshift Então, como mencionamos, unshift adiciona elementos ao início de uma matriz Então, digamos que temos seu primeiro nome, mas o que adiciona um novo nome à frente da matriz. Faremos os nomes dos usuários, desativaremos o ponto. E adicionaremos Harry, nome de Harry ali mesmo. Se usarmos o console.log firstName, novamente, devemos obter a matriz com o novo nome nela E lá vamos nós, Harry, John e Steven. E aí está. Esses são vários dos métodos essenciais você pode usar em matrizes que, tenho certeza serão úteis à medida avança em sua jornada com o JavaScript. 8. Funções: Funções, eu quero até agora, temos feito tudo forma bastante manual. Quero dizer, com certeza. O computador está fazendo a maior parte do trabalho, mas há uma maneira de tornar as coisas ainda mais fáceis para nós Em vez de nos repetirmos repetidamente quando estamos organizando nossos dados ou solicitando dados ao computador, podemos usar algo chamado função Uma função é um trecho de código reutilizável que nos permite acessar a mesma lógica repetidamente sem reescrevê-la Também é possível nomear funções para que possamos acessá-las em qualquer lugar em nosso arquivo ou programa. Vamos refatorar nosso código para criar algumas funções básicas para facilitar nossa vida Tudo bem, então a próxima coisa sobre a qual vamos querer falar são as funções Acabei de mencionar antes. As funções nos permitem parar de fazer tudo manualmente e realmente aproveitar o fato de estarmos fazendo programação de computadores. E podemos permitir que o computador faça muito desse trabalho por nós. Então, vamos dar uma olhada em como escreveríamos uma função. Portanto, em nosso arquivo app.js, a maneira pela qual realmente começaríamos a escrever uma função, existem duas maneiras, mas a maneira mais comum de fazer isso agora é usar um Const, assim como vimos antes, para inicializar o nome da Então, se fôssemos nomear uma função, vamos chamá-la, por exemplo, de minha função. E então, em vez de fazer igual e colocar apenas o valor aqui, na verdade colocaríamos iguais e depois os parênteses e outro igual e depois os parênteses e outro Na verdade, isso é chamado de sintaxe da função de seta. E é um tipo particular de forma de escrever funções, mas é uma das mais sucintas Então, é muito comumente adotado. Depois da nossa flecha. Depois da nossa flecha, na verdade usamos os colchetes encaracolados e pronto É assim que você escreve o formato básico para uma função. Mas o que uma função faz? Ele pega uma parte da lógica e basicamente a implementa para nós. Então, na minha função, poderíamos simplesmente dar a ela algo realmente simples fazer, como console.log. E então, como vimos antes, Hello World. Então, cada vez que essa função for chamada, ela será console.log. Ele será conectado ao console HelloWorld. Mas como podemos realmente fazer isso funcionar? Bem, quando você tem uma função, você não pode simplesmente escrever a função e esperar que ela seja chamada, esperada para ser executada. Você realmente tem que ligar para ele. Então, chamar uma função é muito simples. Tudo o que você faz é digitar o nome da função, como você já nos viu fazer antes, e colocar os parênteses atrás dela. E depois de salvá-lo, ele chamará a função. Então, se acessarmos nosso navegador e conferirmos o console, veremos que diz helloworld mais uma vez É muito legal trabalhar com funções. Você pode imaginar o nível de complexidade que pode colocar nessas funções e chamá-las repetidamente para qualquer número de problemas. Portanto, há coisas realmente boas com as quais trabalhar. Outra coisa que você deve saber é que as funções podem receber argumentos da mesma forma que mencionei antes, o log de pontos do console é um tipo de função. Helloworld é na verdade um argumento abordado por console.log Então, apenas em nossa função aqui, poderíamos realmente mudar isso um pouco. Nós poderíamos dar, nós poderíamos fazer isso. Podemos fazer disso uma função que realmente imprime no console. Podemos criar nosso próprio console.log se você quiser. Então, digamos que chamamos isso de nosso próprio registro do console. Tudo bem, e isso é só para praticar. Na verdade, você não faria isso na vida real, mas diria que forneceria seu próprio registro do console e, em seguida, nomearia um tipo de parâmetro. Você pode fazer isso simplesmente chamando-o de R1, R1 ou R2, dependendo de quantos argumentos Mas, na verdade, você pode chamá-lo do que quiser. Então você poderia simplesmente dizer valor. E então, em vez de colocar o console de codificação, o código rígido e o código rígido no console, registre o HelloWorld. Na verdade, podemos simplesmente passar a propriedade de valor e usá-la em vez disso Agora, tudo o que eu digitei como parâmetro em nossa própria função de registro do console, quando eu a chamo, ela imprimirá isso no console Se eu dissesse: Olá a todos. Em vez de hello world, quando eu voltar para o console, ele realmente imprimirá Olá a todos em vez de HelloWorld ou valor Todos os tipos de funções podem receber parâmetros, desde que tenham essa capacidade e algo a ver com esse parâmetro, que é outra parte realmente incrível das funções, certo? Podemos usar isso de várias maneiras. Também podemos retornar um valor de uma função e depois salvar esse valor em uma variável. Essa variável pode então ser usada como qualquer outra. Essa é uma maneira muito útil de obter dados. Se sua função não tiver uma instrução de retorno, ela retornará indefinida Você pode usar esses tipos de funções para atualizar uma variável fora de si mesma sem precisar que os dados sejam retornados diretamente pela função Também podemos retornar um valor de uma função e depois salvar esse valor em uma nova variável. Então, por exemplo, se tivéssemos, digamos, que quiséssemos obter a soma de vários números, certo? Então, que tal fazermos CONST, soma é igual. E então alguns aceitarão, e serão necessários três argumentos. Vai levar R1, Argh Vai pegar o número um porque vamos pegar Eu faço o melhor para ser descritivo quando você está fazendo parâmetros, basta ver as pessoas que voltam e usam sua função, saber o que você queria que elas colocassem nela Então, vamos fazer m1, m2 e m3. E então, alguns retornarão apenas num1 mais num2 mais número três Então é isso. São necessários apenas três números e alguns deles no total Mas o que podemos fazer, na verdade, em vez de apenas chamar essa função, podemos conceituar. Podemos criar um, podemos criar uma variável chamada resultado e, em seguida, podemos salvar os resultados dessa função nos resultados dessa variável. Então, podemos fazer alguns dos números 12.3. E então, se registrarmos no console a resposta que registramos no console, ela deve somar seis. Então, vamos dar uma olhada. Se você vê aqui, somou seis e temos seis ou em seis é a soma da nossa função aqui. Então, essa também é uma maneira muito útil se você quiser ligar para algo e quiser salvar esse resultado e talvez usá-lo em outro lugar. Essa também é uma ótima maneira de fazer isso. Às vezes, você pode apenas querer saber se uma função está funcionando ou não. Você não precisa necessariamente de um valor específico retornado a partir dele. Nesse caso, usaríamos outro tipo de dados chamado booleano. Os booleanos são um tipo de dados especial que só pode ter um de dois valores, Essas palavras não estão escritas entre aspas e servem simplesmente para serem usadas como indicadores de se algo foi bem-sucedido ou não. Por exemplo, se você quiser saber se sua função foi executada conforme o esperado, você pode retornar true no caso de funcionar e false no caso de não funcionar. Às vezes, porém, você só quer saber se uma função está funcionando ou não. Talvez você queira apenas saber se um aspecto específico do seu aplicativo está funcionando ou não e queira que essa função seja executada se estiver funcionando, ou queira que essa função retorne true se estiver funcionando ou retorne false se não estiver. É aqui que entraremos nesses booleanos. Vamos usar as declarações if para nos ajudar a descobrir se alguém tem ou não idade para dirigir. Então, vamos fazer uma lista de idades. Vamos obter uma variedade de idades. E vamos fazer, vamos ver, 12 para 2.557,70. Então, queremos obter o número retornado de idades que são, de, que têm mais de 16 anos, certo? Hum, então podemos realmente criar uma função para filtrar isso para nós, certo? Então, vamos calcular o custo da idade de condução. Isso é o que chamaremos de nossa função. E basicamente o faremos. Agora vamos escrever nossa declaração if. A estrutura da declaração if é assim. Você escreve se, então essas são suas condições. Então, se, vamos ver, aceitar uma idade, se a idade for maior que 16, 16. Queremos que a função retorne verdadeira. Caso contrário, queremos que a função retorne false, certo? Se salvarmos o resultado. Se salvarmos o resultado em uma variável que chamamos de idade de condução com idades. E usaremos o primeiro ou o número e indexaremos um e depois usaremos o resultado console.log. Vamos ver. Vamos ver o que obtemos. Portanto, se a idade for maior de 16 anos, retorne verdadeiro, caso contrário, retorne falso. Falso. Então isso está correto porque a idade, o índice de agente um é na verdade quatro, o que não está acima de 16. Mas se mudarmos para um índice de quatro, por exemplo, ele retornará verdadeiro porque é uma nota, ou seja, 70 anos. Então, essa é outra maneira muito interessante de usá-la e provavelmente poderíamos implementá-la em algum tipo de verificação de motoristas, certo? Então, em vez de calcularmos uma variedade de idades, podemos concluir que a idade pode ser de um site em que se pergunta às pessoas se há ou não idade para dirigir, se você gostaria de perguntar se alguém quer comprar um carro. Portanto, verifique se há idade para dirigir. Você também pode usar algo assim em aplicações práticas. Operadores ternários, existem maneiras mais concisas de escrever declarações de if else usando algo chamado operador ternário Um operador ternário é apenas uma notação abreviada para ele. If else, declarações que podem condensá-lo em uma única linha de código Vamos dar uma olhada em como um exemplo disso poderia ser. Como você escreveria isso é dizer que apenas daria seu valor. Então você diria isso. Então, de dirigir por anos, idade por anos, você diria. E poderíamos até passar um número para ser honesto, se passássemos como 25. E então diríamos que se isso for verdade, se isso for verdade, queremos que volte a ser verdade. Caso contrário, queremos que ele retorne falso. E é assim que escreveríamos que, como isso funciona, a primeira peça é nossa condição. Seja qual for a comparação que estamos tentando fazer ou a situação que estamos tentando determinar. A primeira e depois perguntaremos: isso é verdade? Então, o que dissemos aqui é verdade? Se for verdade, na verdade trará esse primeiro valor, certo? Se for verdade, esse será o resultado ou os dois pontos aqui retornarão Falso, é falso. Se for verdadeiro, ele retornará essa primeira Condição ou falso, será o resultado, como já discutimos, ao contrário da matemática, equals é o operador de atribuição, não o operador não o O operador de igualdade é bastante semelhante. É apenas uma versão duplicada, dois sinais iguais. Você pode usar o operador de igualdade para determinar se uma coisa é igual à outra. O resultado de uma comparação usando o operador de igualdade sempre retornará um booleano, verdadeiro se a comparação for válida ou falso se não for Vamos dar uma olhada em alguns exemplos disso. Nós console.log. Um é igual a um. Veremos que basicamente isso retornará verdadeiro. Mas então, se fizéssemos um igual a dois, deveria ser falso Isso ocorre porque não necessariamente, bem, isso ocorre porque 1,2 são números diferentes, certo? Mas 1.1 são iguais. Mas quando fazemos um é igual a um, é igual a um na string, pensamos que ela retornará false, mas na verdade retornará mas Agora, esse último é interessante. Por que o número um coincide com a corda um? Isso porque o operador de igualdade de dois iguais não é o que você chamaria Isso permitirá que partes de dados que podem ser convertidas entre si retornem verdadeiras. No entanto, se você quiser ter certeza de que somente os dados do mesmo tipo retornam verdadeiros, você pode usar seu irmão mais velho, o operador de igualdade estrito, três sinais iguais. Vamos tentar. Agora, se quiséssemos comparar se o número um era realmente igual à string um. Queremos ter certeza, como saber os números da string. Nós usaríamos três sinais de igualdade, a igualdade estrita. E vemos aqui que, quando executamos isso, na verdade, ele nos dá o resultado de falso porque um, o número não é igual à string, mas temos que usar a igualdade estrita, que é o sinal triplo de igual para obter esse resultado, existem muitos tipos diferentes de operadores e JavaScript. Vamos dar uma olhada em mais algumas delas e ver como elas funcionam. Exclamação igual é um operador de comparação usado para testar se dois valores Ele compara dois valores e retorna verdadeiro se não forem iguais e falso se forem iguais Isso é usado para testar se um valor é menor ou igual a outro valor. Ele retornará verdadeiro se o primeiro valor for menor ou igual ao segundo valor e falso se o primeiro valor for maior que o segundo valor. Assim como em matemática, você também pode usar apenas o design menos que para comparar se o primeiro valor é menor que o segundo valor sem o sinal de igual maior que N igual Isso é usado para testar se um valor é maior ou igual a outro valor. Retorna verdadeiro se o primeiro valor for maior ou igual ao segundo valor e falso se o primeiro valor for menor que o segundo valor. Novamente, assim como na matemática, basta usar o símbolo maior que para comparar se o primeiro valor é maior que o segundo, omitindo a extremidade dupla do sinal de igual Esse é o operador lógico AND. É usado para testar se duas condições são verdadeiras e retorna verdadeiro se ambas as condições forem verdadeiras e falsas. Se uma das condições for falsa, esse é um operador OR lógico. Ela é usada para testar se pelo menos uma das duas condições é verdadeira e retorna verdadeira se pelo menos uma das condições for verdadeira e falsa se ambas as condições forem falsas. Quatro voltas. For-loop é um tipo de declaração de fluxo de controle, muito parecido com uma declaração if else. A diferença com os for-loops, no entanto, é que eles, como o nome indica, repetirão como o nome indica, repetidamente até que uma condição específica seja atingida por um determinado período A sintaxe básica de um for-loop é para condição de inicialização e, em seguida, incremento ou diminuição e, em seguida, qualquer código que você Vamos experimentá-los e ver como eles são usados na prática. Como mencionamos, o for-loop é um tipo de declaração de fluxo de controle, certo Então, basicamente, nos permite iterar sobre algo por um certo número de iterações até atingir o número determinado Então, como escreveríamos isso, digitamos quatro. Nós diríamos que para qualquer número seria inicializador. Há um inicializador como for, digamos que eu seja igual Executaríamos isso, isso, isso, isso em um loop até eu ser igual Então, digamos que o executemos até I ser maior que dez ou menor que dez. Executaríamos isso até que, até atingir essa condição, esse loop fosse executado. E então, toda vez que executamos o loop, cada iteração do loop, vamos realmente adicionar uma a ele para que realmente cheguemos ao final do loop Se não tivéssemos essa iteração real, ela funcionaria para sempre e isso terminaria, resultando em um loop infinito Então, para cada vez que eu correr, vamos fazer I mais mais, o que basicamente significa que eu serei eu mais ela mesma, eu mais eu mais um. Então, o que quer que eu seja no momento, acrescente um a ele. E, à medida que executamos essa função, vamos registrar o que eu sou no console. Então, vamos registrar o console I e depois ver quantas vezes eu recebo. Eu apareço. Eu acho que isso realmente deveria ser sim, eu menos de dez. Então, desde que eu tenha menos de dez anos, vou executá-lo. E então, quando eu tiver dez anos ou mais, ele parará de funcionar. Uma vez que vemos isso, é, uma vez que vemos que é executado e nos dá os números de zero a nove. Tudo bem, incrível. Enquanto faz ciclos. Agora que você pegou o jeito dos for-loops, vamos falar sobre Eles são realmente semelhantes aos for-loops, no sentido de que continuam a repetir repetidamente até que uma condição específica que eles diferem, no entanto, é que eles só têm a condição, então eles são executados enquanto essa condição é verdadeira. Embora os loops sejam um pouco complicados, porque em algum momento você precisa ter certeza de que essa condição será falsa Caso contrário, eles resultarão no que é chamado de loop infinito, o que não é bom. Isso pode travar seu navegador porque seu código nunca para de ser executado. Escopo. Um dos tópicos mais importantes para entender o JavaScript agora que começamos a falar sobre Funções é o escopo. E eu não estou falando sobre o enxaguante bucal. escopo se refere a quão acessíveis são visíveis, várias variáveis, funções e outros dados estão em seu código durante o tempo de execução. Há dois tipos de escopo em JavaScript, global e local. O escopo global é qualquer variável, função ou objeto que está bem fora de uma função e pode ser acessado por qualquer código no programa. O escopo local, por outro lado, é qualquer variável, função ou objeto que foi definido em uma função e, portanto, só pode ser acessado dentro dos limites dessa função Vamos dar uma olhada em como isso funciona na prática. Para mostrar basicamente como isso funciona, vamos criar um que diga VAR global, variável global. Devo dizer que sou global. E então teremos uma que criará uma função e, em seguida, aninharemos uma variável local dentro dela. Então, para dar uma ideia de como isso realmente parece na prática. Então, criaremos uma variável chamada barra local e ela dirá que sou local. E a partir desse ponto retornará , basta retornar a função. Portanto, quando tentarmos usar o VAR local do Console.log, se tentarmos fazer o login do console fora da função, como faremos aqui, log do console leucovorin verá que, na verdade, não conseguimos acessá-la Diz área de referência, barra local não está definida. E isso porque o console não consegue ver, certo? O resto do código não sabe que o local existe porque está preso dentro dessa função No entanto, se tentarmos registrá-la na função, você notará que ela meio que acendeu como nós e você notará que ela meio que acendeu como nós , na verdade, ela será adicionada quando chamarmos a função, é claro, ela na verdade registrará o console Barnes local Diz que sou local. Isso porque essa variável está basicamente presa dentro da própria função. Mas você verá que, se fizermos isso com a variável global, independentemente console registrá-la fora da função, ou se o console fizer login dentro da função porque é uma variável global, ela estará acessível nos dois lugares. 9. Objetos: Objetos. Um objeto é uma coleção de pares de valores-chave que podem representar um objeto do mundo real ou uma estrutura de dados complexa Os objetos são um dos elementos fundamentais do JavaScript. Na verdade, eles abrangem a maioria dos outros tipos de dados, desde estruturas de dados simples, como matrizes até cadeias de caracteres, e outras mais complexas, como classes, funções e Um objeto pode ser criado usando a notação literal do objeto, que usa chaves. As chaves em um objeto são sempre cadeias de caracteres, mas os valores podem ser de qualquer tipo de dados, incluindo Vamos escrever alguns objetos para ver um exemplo de como tudo isso funciona. Portanto, os objetos são uma das melhores partes do JavaScript. Basicamente, tudo o que sou JavaScript é construído sobre esses objetos. E assim como na vida real, objetos podem ser qualquer coisa. Vamos dar uma olhada em como realmente escrevemos nossos objetos. Então, se você quiser criar nossa primeira constante de objeto, meu objeto, e você escreve o nome dele da mesma forma que escreveria o nome de uma variável. Mas em vez disso, você coloca um sinal de igual e depois coloca aqueles colchetes ondulados E é assim que você sabe que é um objeto. Então, dentro de um objeto, eu disse que você pode colocar praticamente qualquer coisa. Mas a forma como estruturamos nossos dados dentro de objetos é que temos uma chave, que é basicamente o identificador, e depois um valor que corresponde a essa chave, que é basicamente o valor dela Isso é conhecido como um par de valores-chave. Eles funcionam em pares porque a chave é o identificador e o valor é o valor real Podemos acessar o valor da chave acessando a chave. Então, a maneira de fazer isso seria lembrar que falamos sobre notação de pontos antes Podemos usar a notação de pontos para acessar o valor da chave Então, a maneira de fazer isso, na verdade, é registrar meu objeto no console com a tecla de ponto e, em seguida, poderemos acessar qualquer que seja o valor. Então, o console registra minha chave de ponto de objeto e , em seguida, os resultados devem ser um valor. É assim que você acessa valores em objetos em JavaScript, da maneira que puder. E então, se você registrar o objeto em si no console, ele realmente fornecerá a coisa toda, a chave e o valor dentro dessas chaves No entanto, você pode fazer mais do que apenas objetos de valor-chave realmente simples. Os objetos podem, na verdade, conter outros objetos, como dissemos, eles podem conter matrizes, contêm cadeias Eles podem conter basicamente dados de qualquer tipo. A chave pode ser qualquer coisa. Não precisa ser a palavra-chave. Pode ser como Apple, pode ser qualquer palavra. Então você também pode, como eu disse, eu tinha objetos dentro de objetos. E, na verdade, esse objeto pode ser sua casa. Você pode fazer qualquer coisa, dizer casa e talvez falar sobre os diferentes aparelhos que você tem em sua casa, na sua cozinha, talvez tenha um fogão e um microondas e , eu não sei, como se não fosse um forno. Você pode ter fogão de microondas e talvez ter seu fogão, seu microondas e você está doente, certo? Isso é uma lista. Essa é a sua casa, esse é um quarto em sua casa, a cozinha. E então essa é uma lista dos eletrodomésticos na cozinha, certo? Ou listas dos objetos na pia da cozinha do tamanho de um eletrodoméstico. Mas vamos pegar essa ideia e ir um pouco mais longe. Vamos criar um objeto chamado minha casa. E vamos começar a preenchê-lo e ver como podemos ir longe com esses objetos. Então, vamos em frente e dar minha casa e endereço. Talvez vivamos, acrescente uma a três ruas principais. E então vamos dar a ela uma cidade. Talvez moremos em Nova York. Então vamos em frente e nós daremos. O que mais devemos dar a ele? Vamos dar alguns quartos, talvez um certo número de quartos. Moramos em Nova York, talvez apenas três quartos. É uma casa bem pequena em que moramos. Então vamos também dar, vamos dar alguns eletrodomésticos. Escreva este outono sobre essa tendência. Vamos dar uma lista de, uma lista de aparelhos. Então nós temos, vamos ver o que mais. Então, novamente, temos um microondas. O que mais? Temos um fogão, temos um microondas e, desta vez, temos lava-louças , troque da mesma. Ótimo. Vamos ver o que mais eu poderia fazer. Vamos fazer ocupantes, vamos fazer menos do que o número de ocupantes que temos em nossos residentes Então, vamos seguir em frente e listar. Mas vamos usar uma lista de objetos. Então, em vez de usar apenas um objeto singular, vamos fazer uma lista de objetos Então, vamos criar o primeiro. Will, dê um nome a ele. Vamos dizer que mãe, ela vai ter, digamos que vai fazer 29 anos novamente. E vamos dar a ela a ocupação de, vamos pegar esse padeiro e professor E aí vamos nós. Nós temos o ocupante. nome do primeiro ocupante é mãe, 29 anos, e a ocupação do ocupante é professora Incrível. Então, como eu estava dizendo, não podemos simplesmente gostar de ter mais de um ocupante, precisamos tê-lo em formato de lista Então, vamos colocar dentro desses colchetes, o que indica que é uma lista ou uma matriz E então vamos criar nosso segundo ocupante. Então, vamos preencher isso Faremos com que se chame pai, 35 anos, engenheiro de software. E vamos passar por isso muito rapidamente. Então agora podemos ir em frente e acessar as propriedades desse objeto, certo? Podemos acessar as propriedades aninhadas. Podemos registrar no console sua casa, minha casa, e então podemos registrar o ocupante no console E como você vê, ele realmente o pré-preenche aqui, o que é muito legal Esse é um recurso de JavaScript muito legal. O recurso Vs Code, devo dizer, onde uma vez que você tem um objeto, ele é automático É como um intellisense, eu acredito, mas diz quais propriedades existem nesses objetos. Muito legal. Assim, você pode acessar apenas imóveis. Então, vamos até os ocupantes e depois para os ocupantes porque é uma lista, lembre-se de que somos listas, não podemos simplesmente notação de pontos em Temos que usar índices. Vamos pegar o ocupante no primeiro índice que acessará o pai e, em seguida, nomearemos a ocupação do pai. Então, iremos para o primeiro índice e depois acessaremos a ocupação. E oh, aqui está um erro interessante, temos que referenciar o erro aqui. Isso porque o JavaScript é um pouco diferente do TypeScript, que funcionará em uma lição posterior Mas o JavaScript não necessariamente chama um erro quando algo é do tipo incorreto ou tem um valor incorreto dentro do próprio código ele o chamará quando você tentar executar esse código. Não é ideal para aplicativos maiores, porque você receberá muitos erros ao escrever o código e não saberá de onde eles vieram. Mas se você detectar o erro antes de executar o código, ao tentar salvá-lo, acho que é muito mais útil. Então, aqui, a razão pela qual recebemos esse erro é porque, na matriz, os valores um e dois não são reais. Eles não são chaves e, na verdade, não são cordas. Então, eles dizem que não há, não há nenhum valor de nome de variável um ou dois enquanto você escreve assim. Então, o que precisamos fazer é realmente transformá-los em cordas. Depois de transformá-los em strings, tudo o que precisamos fazer é executá-los novamente. E como você pode ver aqui, conseguimos acessar a ocupação do nosso pai Então, minha casa ou ocupantes acessando o ocupante no índice número um, engenheiro de software, esses são nossos pais Ocupações, funciona muito bem, como você pode imaginar o quão útil isso pode ser em um cenário em que você realmente gosta de talvez ter um objeto de usuário, como talvez você esteja construindo um tipo de site do Facebook e você tenha um usuário e ele tenha um endereço de e-mail , ele tenha uma senha , tenha amigos, tenha fotos, tenha todas essas partes diferentes dados associados a eles. Talvez você queira armazená-los em um objeto e, assim como nomear o objeto ou fornecer o objeto como um ID de usuário, pode fornecer a eles um ID dentro do objeto e, basicamente, armazenar todos esses dados complexos nesse conjunto de dados maior e mantê-los uniformes entre seus usuários Para que, se você tivesse um site com cerca de 500 usuários, abrisse a página de perfil deles pudesse acessar os dados de forma uniforme. Essa é outra grande coisa sobre objetos. Ele permite que você acesse os dados de uma forma muito, muito uniforme. E você não precisa necessariamente se preocupar se um dado não existe, então você pode fazer com que ele retorne um valor específico. Mas nove em cada dez vezes, supondo que os dados existam, simplesmente retornarão esse valor e você estará pronto para prosseguir 10. Formulário básico: Tudo bem, agora que terminamos aprender tudo sobre JavaScript, vamos colocá-lo em prática usando alguns dos elementos que criamos antes Em primeiro lugar, vamos usar esse pequeno formulário que criamos aqui e, na verdade, vamos usá-lo para dar a nossos usuários nossa resposta quando eles enviarem suas informações em nosso arquivo HTML de índice , como falamos anteriormente. Não seria muito legal se nossos usuários enviassem seu nome, sobrenome e idade? Talvez eles tenham recebido algum tipo de saudação personalizada, certo? Então, em vez de muito usuário ou apenas alto, talvez seja Oi John. Oi Stephen. Oi Harry. Então, vamos continuar e adicionar essa funcionalidade específica. Mas o que vamos fazer aqui é criar uma pequena tag P. E nós vamos, vamos dar uma identificação. Então, lembre-se de como falamos sobre IDs e como eles podem ser usados para direcionar elementos especificamente usando CSS. Eles também são muito úteis quando você está trabalhando com JavaScript. Então, uma coisa para a qual podemos usar IDs aqui é realmente direcionar um elemento específico. Então, vamos usar o parâmetro ID aqui e dar a essa tag P uma ID de saudação E é com isso que vamos trabalhar quando criarmos nossos usuários. Também vamos dar essa entrada de FirstName Também daremos a isso um IV do primeiro nome, apenas para sabermos de qual entrada precisamos direcionar o valor Então, para que tudo funcione, vamos escrever uma função JavaScript que é chamada quando o botão de envio é pressionado. Então, vamos criar uma função ao clicar. Então, conceitos ao clicar, vamos chamá-los em Enviar. Enviar. Queremos, queremos basicamente obter a informação que está nessa primeira entrada, queremos obter o valor dessa entrada. Então, como fazer isso é direcionar a janela, que é o objeto maior que contém todas as informações na página Então, vamos mirar na janela. Como também falamos, poderíamos fazer isso usando o documento. Porque, como dissemos, o JavaScript funciona com o Document Object Model. Você pode usar janela ou documento e digitar window dot get. Na verdade, vamos usar o documento. Vamos fazer o documento, obtendo elemento por ID, que é um método disponível no documento. E vamos passar esse ID que demos à primeira entrada chamado primeiro nome. Vamos salvar isso. E vamos apenas registrar o resultado disso no console. E vamos ver, vamos retornar o que quer que seja, certo, então, ao enviar, vamos retornar isso e somos esses loops de console.log que serão apenas console dot log On Eu só quero ver o que acontece quando chamamos isso. A última coisa que realmente precisaremos fazer aqui é chamá-lo a partir do próprio arquivo HTML , porque precisamos conectar os dois. Então, como temos nosso botão de tipo de entrada aqui, daremos a ele um atributo onclick E o que esse atributo é apenas uma conexão com nossas funções de JavaScript. Então, a função definitiva que vamos usar, na verdade, vamos simplesmente alterá-la para “Enviar”. Tudo bem, então vamos realmente devolver o documento, sair. Não conversamos sobre os valores. Vamos fazer o ponto do documento, obter elemento por valor do ponto de ID porque queremos o valor real disso. Tudo bem, vamos realmente fazer algo aqui. Digamos o primeiro nome de Const. E vamos definir isso com esse valor. Então pegue isso e eu coloco isso lá. E agora FirstName é o valor. Vamos retornar FirstName, mas antes de retorná-lo, na verdade também vamos acessá-lo em console.log Primeiro. Tudo bem, e vamos guardar isso. Então, quando digitamos John e clicamos em Enviar, lá vamos. Está funcionando. Estamos pegando John, quando clicamos no botão Enviar. Perfeito, é exatamente o que pretendíamos. Agora que temos essa variável com a qual podemos trabalhar, o que precisamos fazer agora é usá-la, certo? Então, podemos salvar isso em uma variável específica? É claro que podemos, como falamos antes, salvar o resultado de uma função em uma variável. Tudo bem, então nós, Como são as variáveis de primeiro nome aqui? O que mais queremos fazer? Queremos devolver esse nome específico em uma espécie de saudação ao nosso usuário, certo? Então, o que vamos fazer aqui é realmente considerar o valor do primeiro nome, Serena Pegue os resultados disso e nós realmente os colocaremos em uma função de saudação Então, vamos criar uma saudação como uma função. E vamos dizer que a função de saudação deve retornar Ou você sabe qual será a saudação. Uma função de efeito colateral. O que ele vai fazer é direcionar o documento, obter um elemento diferente por ID. Lembre-se de que demos uma identificação à etiqueta P. Eu posso trazê-lo aqui na lateral para que você possa vê-los. Então, demos a essa etiqueta P um ID de saudações. Então, vamos obter elemento por ID do ID de saudação. Depois, há essa outra propriedade chamada innerHTML Então você segmentou um elemento, agora você quer colocar algo dentro de seu HTML interno. Portanto, queremos então direcionar o HTML interno do ponto. E queremos essencialmente colocar o nome do usuário nisso, nessa frase. Então, vamos dizer, se nossa saudação vai ser bem simples Então, vamos dizer oi, oi. E depois mais o nome de qualquer pessoa. Além disso, usaremos um parâmetro para essa função chamado usuário. Em seguida, passaremos isso para a pequena função que temos aqui. Então, quando a saudação é chamada, ela pega o, vai até o documento, pega o elemento com a ideia de saudação Então essa é a nossa etiqueta P aqui. Ele vai obter o HTML interno, que é esse pequeno espaço entre as tags P aqui. E vai inserir essa altura mais o nome do usuário. Bem simples. Então, vamos mover essa função que está acima da função de envio Porque outra coisa importante a saber sobre JavaScript é que, às vezes, as funções não podem ser acessadas até serem criadas. Então, se eu fosse, se eu chamasse saudação, se eu dissesse saudação, nessa função, eu poderia receber um erro dizendo que ela está sendo usada antes de ser criada Às vezes, isso causa erros, às vezes não, mas a melhor prática é colocá-los na ordem em que você os está usando. Então, vamos criar uma saudação. E então vamos pegar o valor do primeiro nome e vamos passar isso para saudações Vamos transformar o primeiro nome em saudação. E isso vai ser, essa será a nossa função realmente precisa fazer é adicioná-la. Portanto, precisamos, em vez de chamá-lo, precisamos adicioná-lo para usar HTML interno. E vamos usar mais e iguais para ter um igual a Então, se fizermos isso de novo, deve funcionar. Nós clicamos em Enviar. Lá vamos nós. Oi, John. Não está totalmente formatado, certo, mas vamos corrigir isso Perfeito. Então, vamos dar uma olhada no que fizemos aqui. Nós direcionamos o documento. Obtivemos o elemento pela saudação de ID, que é essa tag P. Nós direcionamos seu HTML interno e usamos isso mais um sinal de igual. Então, estamos adicionando algo a isso. E adicionamos oi mais o nome do usuário. Muito simples, certo? E então, para curtir uma saudação amigável que podemos fazer, essa é apenas uma maneira tirar proveito de todas as coisas que fizemos com nosso JavaScript até agora Uma pequena função super simples de fazer. Mas é um exemplo muito legal de como podemos realmente trabalhar com os valores que nos foram dados. Como você pode imaginar, podemos configurar isso para fazer coisas diferentes, como pegar o sobrenome e a idade deles. Poderíamos dizer: Ei, você tem idade para dirigir, pegue sua carteira de motorista ou algo parecido, ou qualquer resposta que ou qualquer resposta você queira obter com base na idade deles. Como você pode ver, isso pode ser usado de várias maneiras diferentes. 11. Formulário avançado: Vamos dar uma olhada agora em nosso projeto anterior, nosso projeto HTML e CSS, e ver como podemos adicionar um pouco de JavaScript a eles. Então, como você se lembra, temos nosso site aqui. E basicamente o que queremos fazer agora é provavelmente adicionar um pouco de interatividade interativa usando JavaScript, agora que somos profissionais de JavaScript. Então, se você se lembra, havia uma pequena imagem aqui chamada estados ativos. Então, na verdade, isso nos dá um monte de estados ativos diferentes que eles gostariam que adicionássemos à própria forma real. Como você pode ver, muito disso é basicamente dizer ao usuário que algo não pode estar vazio quando ele clica em Enviar Portanto, também há um pequeno validador de e-mail aqui. Então, vamos tentar implementar algumas dessas coisas. Vamos fazer assim. Se o usuário tentar enviar e o valor for nulo, queremos retornar alguma mensagem de erro Então, vamos ver como isso poderia parecer. Digamos que podemos segmentar, podemos usar a função HTML interna, a propriedade HTML interna sobre a qual acabamos de falar, bem como o ID, para realmente entender o que estamos tentando alcançar aqui. Então, vamos ver. Se você também notar o, as cores ao redor da borda são vermelhas aqui. Então, provavelmente queremos fazer algo com o CSS e o estilete Então, essas são algumas coisas que queremos fazer. Então, vamos adicionar um onsubmit onclick. Vamos adicionar uma função onsubmit. E está marrom agora porque na verdade ainda não o fizemos. Então, vamos fazer isso no Submit. Ótimo Função básica. E ao clicar, eu escrevi errado aqui também. Eles são reais ao clicar. Faça um onsubmit. Incrível. Tudo bem, então nesta função onsubmit, queremos basicamente direcionar todos os valores da entrada Portanto, há algumas maneiras diferentes de fazer isso. Poderíamos obtê-los, vamos pegá-los, vamos fazer isso um pouco mais manualmente por enquanto, vamos fazer ID FirstName Vamos fazer o id do LastName. E vamos fazer o ID da cor do e-mail. Provavelmente também quero fazer algo diferente com alguns deles. E então, na semana passada, sim, vamos fazer uma identificação de senha. Tudo bem? Portanto, temos nossas quatro entradas com IDs. Então, o que queremos fazer agora é obter todos esses elementos por ID. E podemos fazer isso dentro da função onsubmit ou fora dela. Então, se quiséssemos apenas criar essas variáveis aqui, poderíamos usar firstname Incrível. Então, agora temos como alvo todos esses elementos. Então, ao enviar, queremos dizer se, se o valor do ponto de entrada for igual, igual a não igual, for igual a nulo, então queremos pegar isso, que receberá se o valor do ponto de entrada for igual, igual a não igual, for igual a nulo, então queremos pegar isso, essa entrada e daremos a ela um nome de classe . Então, é chamado de lista de classes. Adicionar ponto adicionará, adicionará o, chamará isso de erro. Vamos fazer mais uma coisa aqui. Adicionaremos um estilo chamado erro. Erro. E isso mudará a borda para um pixel, um pixel. Vermelho sólido. Isso é o que faremos por enquanto. Então, se estiver vazio, ele adicionará essa borda vermelha. Vamos ver se isso funciona. Não é possível ler propriedades do valor de leitura nulo. Ok, então está nos dando um erro aqui porque não há valor para cada um deles. Tudo bem, então depois de algumas pesquisas, descobri qual era o O que realmente precisávamos fazer era mover todos esses elementos dentro da função porque, basicamente eles não existem, do lado de fora. Você não existe, não há nada que a função realmente agarre. Então, ao colocá-los dentro da função, paramos de tratar isso, acionando esse ar Então, o que basicamente queremos fazer é isso. Queremos pegar o elemento add, verifique se o valor é igual a essa string vazia Se for igual a essa string vazia, então queremos pegar esse elemento para entrar em sua lista de classes e, em seguida, adicionar um erro. Como você se lembra, adicionamos um erro clássico na parte inferior aqui, que fornecerá a borda, mudará a borda para um pixel, borda sólida em vez de pontilhada ou tracejada, e a tornará uma borda vermelha Então, em teoria, se tivermos feito isso corretamente, quando clicarmos no primeiro nome, nenhum valor vai somar isso Ele adicionará essa classe de erro e ficará vermelho. Então, vamos clicar nele e então temos, está funcionando corretamente. Está nos dizendo que, ei, há um erro aqui. Incrível. Então, o que agora queremos fazer é apostar em todos eles. Então, vamos adicionar rapidamente todas essas outras opções. Então, basicamente pegamos todas as entradas. Criamos uma matriz para que possamos repeti-la muito mais rapidamente. E então dissemos que para cada entrada, se o valor de entrada não for nada, queremos adicionar o erro de classes. Foi tudo o que fizemos para criar esse ar para nós. Tudo bem, aí está. Vimos como podemos usar o JavaScript para realmente interagir com este formulário em um nível muito básico Eu encorajo você a levar isso até o fim e adicionar pequenos pontos de exclamação e também adicionar pequenos textos de espaço reservado para ver até onde você pode realmente ir