Funções do JavaScript: funções principais, funções de seta com projetos

1. Introdução ao curso: Oi, aí. Bem-vindo às pontuações das funções de JavaScript ao criar projetos reais. Meu nome é Wessel e estou entusiasmado em guiá-lo nessa empolgante jornada pelo mundo das funções de JavaScript. As funções são a espinha dorsal do JavaScript ou de qualquer linguagem de programação que você aprenda Ele permite um código eficiente e modular que os desenvolvedores podem escrever. E neste curso, mergulharemos nesse conceito de funções, desde o básico da definição e chamada de funções até a compreensão de parâmetros e argumentos Também falaremos sobre o básico, como chamar funções, para tópicos avançados, como expressões, funções de seta e até métodos em objetos e matrizes. Agora, aqui está o que abordaremos. Falaremos sobre funções em JavaScript. Também falaremos sobre parâmetros e argumentos. O que são parâmetros e como esses dois termos se diferenciam Como você pode retornar valores de uma função ? Aqui, falaremos sobre como função processa dados e retorna os valores. Falaremos sobre expressões de funções e funções de seta. Esse é um dos tópicos cruciais em que os alunos geralmente enfrentam dificuldades Também falaremos sobre funções dentro objetos e métodos de matriz. Então, isso é tudo sobre o curso, e este curso também tem projetos práticos nos quais aplicaremos tudo o que aprendemos nesse curso específico para criar algo significativo No final, você terá uma compreensão robusta do que são funções, e esse conhecimento o capacitará a criar interativos e incríveis de jaw Script Este curso é adequado para desenvolvedores de todos os níveis. Portanto, se você é um aluno iniciante, intermediário ou alguém avançado que deseja aprimorar suas habilidades em Jascript, este curso pode equipá-lo com conhecimentos incríveis e algumas práticas que você nunca ouviu Dito isso, você está pronto para dominar a arte das funções do Ja Script e transformar a maneira como você escreve Vamos começar juntos. Te vejo do outro lado. 2. Como desbloquear funções do JavaScript: os fundamentos: Olá, agora é hora de começarmos a falar sobre funções em JavaScript. Agora, o que é uma função em primeiro lugar? Agora, uma função é essencialmente um bloco de código. Portanto, são várias linhas de código agrupadas e projetadas para executar uma tarefa específica A melhor parte da função é que ela pode ser reutilizada várias vezes no programa Agora, deixe-me mostrar como você escreveria funções e por que escreveria, então. Está bem? Então, digamos que temos uma tarefa muito simples de cumprimentar um usuário Está bem? Então, vou dizer olá e digamos que estou cumprimentando um usuário nome de usuário é Alice Awa. Está bem? Estou fazendo isso. Agora, digamos que eu queira fazer essa saudação três vezes. Está bem? Então, é claro, copiarei P três vezes. Então, vou cumprimentá-lo três vezes, certo? Cumprimentando o usuário três vezes. Agora, digamos que eu queira mudar uma mensagem aqui na saudação, certo? E isso deve ser refletido em todas as mensagens. Então, digamos que a mudança que eu gostaria de fazer é adicionar mais uma exclamação Está bem? Agora eu tenho que me certificar de atualizar isso em todos os lugares onde quer que eu esteja usando essa grade E se eu salvar isso, vou ver a saída aqui. Tudo bem Mas agora está tudo bem se o grupo de declarações como aqui, a tarefa é apenas cumprimentar, certo? É apenas uma única declaração, e qualquer alteração aqui é gerenciável porque a base de código não é tão grande Agora, o que eu gostaria de fazer é optar pela conveniência, certo? E podemos facilitar isso com a ajuda da função. Agora, deixe-me mostrar como as funções podem facilitar sua vida. Então, primeiro de tudo, eu preciso criar uma função aqui para que possamos usá-la. Então, eu posso usar essa palavra-chave de função. Você pode ver. E você tem duas opções, declaração de função e função aqui. Se você selecionar a função, ela trará a função para você, a palavra-chave. Mas eu gostaria de ter a declaração da função. Então você pode ver que isso apareceu. Agora, ele adiciona automaticamente um espaço reservado para parâmetros de nome e adicionou essas chaves , certo Então, vou atualizar o nome aqui para cumprimentar, ok? E no lugar dos parâmetros, vou remover isso por enquanto e vou entrar no corpo Então, essa cinta encaracolada, ok? Dentro desses aparelhos ondulados, você pode ter o corpo funcional, certo Eu uso esse termo corpo funcional. Agora, o que é corpo funcional? corpo da função é o bloco de código que pode ser executado quando essa função é chamada, ok? Então, digamos que eu mova esse código para cá. Ok. E agora não preciso chamar a saudação dessa maneira ou cumprimentar o usuário dessa Ok. Em vez disso, o que eu posso fazer é chamar essa função, certo? Então agora eu tenho essa função greet, ok? O nome da função é greet. Então, cada função que você cria deve ter um nome, ok? E você está atribuindo um nome a ela porque precisa chamar essa função mais tarde, certo? Então, agora, se eu quiser chamar essa função, direi greet e terei colchetes redondos abrindo e Agora, se eu salvar isso, você verá que Hello Alice está sendo impressa aqui, ok? Se eu quiser cumprimentar o usuário três vezes, como meu requisito original, posso fazer com que isso seja chamado três vezes e você verá que aparece Agora, se eu quiser mudar a mensagem, digamos que se eu quiser me livrar dessa exclamação extra que foi adicionada, eu tenho que fazer essa alteração em apenas um lugar, certo E isso se reflete em todos os lugares, e é refletido em todos os lugares, essencialmente, onde quer que essa função esteja sendo chamada, ou porque é o único bloco de código que está sendo reutilizado e chamado várias vezes Aqui, nessa abordagem, o que você está fazendo é duplicar o código Você está duplicando o log de pontos do console três vezes para que essa tarefa aconteça três vezes, certo Mas aqui, você não está duplicando o código. Você está gravando o log de pontos do console uma vez. Mas se você quiser fazer essa tarefa três vezes, você está chamando a função duas vezes porque essa instrução dot log do console está dentro de uma função agora. Tudo bem? Então, vamos voltar à definição. Uma função é um bloco de código. Você pode ver que isso é um bloco de código. Agora você pode ter várias declarações aqui. Digamos que eu também queira cumprimentar o usuário e dizer que agora você está logado Ok, algo parecido com isso. Estou exibindo esse tipo de mensagem. Está bem? Você pode ver Olá Alice, agora você está logado Olá Alice, agora você está logado. Olá Alice, agora você está trancada. Está chegando três vezes em cada mensagem. Está bem? Portanto, é um bloco de código. Agora, dentro das chaves Curly, você pode ter várias linhas de instrução, várias linhas de código JavaScript, que fazem parte dessa função e são invocadas ou chamadas sempre que essa função está sendo chamada sempre que essa função está sendo E a próxima parte diz que ele foi projetado para realizar uma tarefa específica. Basicamente, você está agrupando várias instruções e as nomeando como função, e isso foi projetado para executar uma tarefa específica Por exemplo, aqui, ele foi projetado para cumprimentar o usuário, certo? E você está usando essa palavra-chave de função aqui. Isso é algo que você não pode perder se você estiver criando funções dessa forma, certo? E ele pode ser reutilizado várias vezes. Agora você está chamando esse bloco de código três vezes aqui, certo? Nem uma, duas vezes. E você pode ligar para ele várias vezes, como o número de vezes que deseja ligar ou se o requisito é. Certo? Então essa é uma função para você em JavaScript. Agora, se você vem de qualquer outra linguagem de programação como Python ou Java, você deve estar ciente desse conceito de função ou método, certo Então, funciona da mesma forma em JavaScript, mas a sintaxe é um pouco diferente Tudo bem? Então, espero que isso tenha sido útil. 3. Fluxo de dados dinâmico: dominando parâmetros e argumentos: No momento, eu tenho uma função chamada GET, que é usada para cumprimentar os usuários E aqui neste bloco de código, estou tendo toda a operação de cumprimentar os usuários E a operação é que há algumas instruções de impressão, como instruções de log do console que imprimem duas mensagens, duas mensagens distintas no console. Estou chamando essa função três vezes. E, como resultado, você está vendo seis mensagens sendo impressas no console, certo? Agora, aqui, a mensagem que você está vendo é bastante estática. E se, no futuro, eu quiser personalizar a mensagem para cada usuário e se eu quiser chamar cada usuário pelo nome? Porque essa função no momento está sendo usada apenas para cumprimentar Alice e não qualquer outro usuário Então, nesse caso, o JavaScript permite que você passe parâmetros de função como qualquer outra linguagem de programação. Então, digamos que eu queira ter um nome dinâmico, ok? Então eu posso aceitar o nome aqui. Tudo bem. Não estou especificando o tipo de dados, faça uma anotação aqui E aqui, em vez de Alice, o que estou fazendo é ganhar $1, então vou ter que adicionar $1 e vou dizer Desculpe, não Alice, eu vou ter um nome. E então isso será um modelo lateral, como este. Tudo bem. E então, se eu salvar isso, vou receber um erro dizendo indefinido, porque esse nome ainda não está sendo inicializado, certo Então, faremos isso em breve. Mas o ponto que eu quero mencionar aqui é essa coisa que você está passando aqui, nome é um parâmetro de função. Está bem? Agora, para chamar a função da maneira correta com parâmetros, você precisa passar algo chamado de argumentos, certo? Então, aqui, agora teremos que passar os argumentos da função porque o nome está sendo indefinido. Você pode ver indefinido Está imprimindo três vezes, e todas as três vezes, é indefinido, certo Então eu vou passar o nome aqui, para que eu possa dizer Alice uma vez, então eu posso dizer John, e então eu posso dizer Lucy, certo E se eu salvar isso, você verá Olá Alice, Olá John e Olá Lucy, certo Então essa coisa aqui é uma discussão, ok? Esses são argumentos de função que estou passando para os parâmetros da função. Então, por que estamos apresentando os argumentos? Porque a função está aceitando parâmetros. E aqui você pode ver que nome é o nome do parâmetro que desejamos inicializar aqui, ok? E então isso está sendo usado dentro da função qualquer forma que a função deseje fazer uso dela Então, eu quero que todos vocês se lembrem da diferença entre parâmetros e argumentos. Ambos não são iguais, certo. Então, a maioria dos programadores fica confusa e eu não sei qual é a diferença entre um parâmetro e o argumento Eles acham que são iguais, certo? Então, essa coisa aqui é um parâmetro. Se você passar o mouse sobre isso, ele dirá o nome do parâmetro. E essa coisa aqui é um argumento porque esse é um valor que você está passando e usando esse valor, o parâmetro é realmente inicializado Então isso é uma discussão. Tudo bem. Então, esse argumento de função está em uso, e esses são os parâmetros da função que estão sendo declarados. Tudo bem? Agora, essa é uma função com um parâmetro. Haverá cenários em que você deseja passar vários valores, vários argumentos para uma função, certo? Então, nesse caso, é claro que você pode ter vários parâmetros. Aqui, eu posso adicionar H aqui, e eu posso adicionar mais um log do console aqui. OK. Você é de ou, eu diria, vamos imprimir o Ho. Ok, algo assim, e eu vou me livrar das vírgulas invertidas aqui e vou adicionar carrapatos Bac. Tudo bem. Agora eu posso salvá-los. OK. Depois de salvar isso, você verá indefinido sendo impresso Agora, essa função aceita dois parâmetros, mas estamos passando apenas um, certo? Então, precisamos passar o segundo parâmetro também. Então eu posso dizer 22 aqui. Isso pode ser como 21, e você pode passar de qualquer idade por aqui. Isso pode ser 29, algo assim. Se você salvar isso, você verá, Olá Alice, você tem 22 anos de idade Agora você está trancado. Olá, John, você tem 21 anos. Agora você está trancado. Olá, Lucy, você tem 29 anos e agora está presa Então, o que isso nos diz que a função pode ter vários parâmetros para definir uma função. Está bem? Assim, você pode definir uma função com vários parâmetros e, se tiver uma função com vários parâmetros, precisará passar vários argumentos para também precisará passar vários argumentos para que ela possa inicializá-la muito bem Tudo bem. Agora, uma coisa aqui que eu quero anotar, quero que todos vocês anotem é essa parte do parâmetro, o primeiro parâmetro aqui, nome é uma string e isso é um número. Está bem? Agora, no final, o que eu posso fazer é adicionar um tipo aqui, tipo de e eu posso simplesmente dizer idade aqui. OK. E eu também posso fazer o mesmo com o nome. Tudo bem. Então, vamos fazer o nome, digitar e eu salvarei o nome. E uma vez que eu o salve, você verá, Hello Alice String, você tem 22 anos Está bem? Então, um parâmetro de função aqui é um número e o outro é uma string. Tudo bem. Agora, e se eu mudar isso para string? Deixe-me salvar isso. Opa. Então deixe-me salvar isso. Agora você verá Lousy. Olá, Lucy. Então Lucy é uma corda, e uma garota de 29 anos também é uma OK. Mas quanto ao resto, o primeiro parâmetro é uma string e o segundo parâmetro é um número aqui. Está bem? Então, o que estou fazendo é obter o tipo de cada uma sendo alterada para cada chamada de função aqui. Tudo bem, você pode ver aqui, e isso é possível porque o Ja Script é digitado dinamicamente Portanto, você não precisa ter um tipo de dados declarado ou definido ao criar variáveis. E esses parâmetros são essencialmente variáveis, certo? Essas são variáveis que só existem dentro do bloco de funções. Então esse é um bloco de funções aqui, ok? Essas chaves curvas que você está vendo são duas chaves CRY, isso é o que é um bloco de funções, e esse nome e idade só existem dentro Então, se você tentar usar o nome aqui, ok? Desculpe, não é isso. Então, eu posso dizer log de pontos do console e deixar eu dizer o nome aqui. Se eu tentar fazer isso, não verei nenhuma saída. Mesmo para H, não verei nenhuma saída. Você pode ver tudo bem? Então, nome e idade só existem dentro do bloco de funções e não fora dele, certo? E essas duas são variáveis que são parâmetros para essa função, ok? E você pode alterar dinamicamente o tipo dos parâmetros é o que você pode ver aqui, certo? Então, sim, isso é digitado de forma totalmente dinâmica. Agora, outra coisa que eu quero destacar aqui é a ordem. Se os parâmetros e os argumentos importam. Está bem? Então, por exemplo, se eu mudar essa idade aqui e se eu mudar o nome aqui. Está bem? Então, idade que eu fiz primeiro. Se eu salvar isso, você verá, olá, número 22, você tem anos de idade, o que é absolutamente errado, certo? Porque trocamos, trocamos o pedido aqui, certo? Então, se eu fizer o lado de controle aqui, você pode ver que está tudo correto agora. Está bem? E também, isso deve ser aprovado na ordem. Ok, então ele é inicializado em ordem. Portanto, esse primeiro parâmetro será inicializado com Ale, 22 serão inicializados com Portanto, a ordem é muito importante. Está bem? Então, se você tem dez parâmetros, você pode ter como número você pode ter vários parâmetros. Aqui estou apenas dando um exemplo de um e dois, mas você pode ter três, quatro, cinco, dez parâmetros. Está tudo bem, certo? Mas se você tiver tantos parâmetros, certifique-se de que está passando os valores em ordem e não está bagunçando a ordem porque a saída que você obterá ficará totalmente confusa Então, espero que até agora esteja tudo bem. Tudo bem. Então, agora eu quero falar sobre parâmetros padrão e, para isso, o que vou fazer é simplesmente duplicar essa função Vou apenas copiar e colar, ok? E você pode ver, vou renomear essa função, ok? Vou cumprimentar a pessoa aqui, e vou ter apenas um parâmetro aqui apenas para fins de demonstração Tudo bem, vou me livrar de todas as outras declarações aqui Vamos manter as coisas simples. Tudo bem? Então essa é minha função, que é a função de saudação Desculpe, cumprimente pessoa, se chama , certo, não é uma ótima função Então, outra coisa aqui que você pode notar é um único programa de script de mandíbula pode ter várias funções definidas para diferentes propósitos, é claro, certo? Então, aqui estou criando outro tipo de saudação, certo. Agora, deixe-me chamar isso aqui. Está bem? Se eu salvar isso, você não verá nenhum erro. Está bem? Agora, deixe-me chamar essa pessoa de saudação, e eu chamei essa função Está bem? Agora, no momento em que você chama essa função sem nenhum argumento você vê que está vendo hello undefined Por que você está vendo hello undefined? Como esse nome ainda não está definido, ele não tem nenhum valor porque você não passou o argumento, certo? Agora, haverá cenários em que você desejará definir algum tipo de valor ou parâmetro padrão, porque a coleira ou quem está chamando a função pode nem sempre transmitir os valores parâmetro padrão, porque a coleira ou quem está chamando a função pode nem sempre transmitir os E nesse caso, talvez você queira ter um conjunto de valores padrão com os quais o parâmetro seja inicializado Agora, uma maneira é ter um valor padrão aqui, ok? Mas isso não é bom. Tudo bem. Eu posso ter um valor padrão, como convidado aqui. OK. E eu posso salvar esse olá convidado. Mas essa não é uma boa maneira de fazer as coisas. Se eu realmente passar um valor, esse valor será substituído E se eu não quiser que isso seja anulado, preciso adicionar verificações desnecessárias aqui Está bem? Mas o script Ja fornece uma maneira simples de fazer isso. Tudo bem. O que você pode fazer é ao declarar o parâmetro aqui, inicializar o parâmetro com um valor padrão, assim Ok, algo assim. Se você salvá-lo, você verá hello guest sendo impresso aqui. Tudo bem. Agora, se você não está passando nenhum parâmetro, você está vendo essa saída. Se você passar algum tipo de parâmetro. Então, se eu disser olá Ron, tudo bem, se eu salvar isso, você verá Olá Ron sendo impresso. Está bem? Então, se você estiver passando qualquer tipo de parâmetro, verá que esse parâmetro é, desculpe, se você estiver passando qualquer tipo de argumento, não parâmetro, se estiver passando algum tipo de argumento, você verá esse argumento sendo usado. Mas se você não estiver passando nenhum tipo de argumento , o valor padrão será usado, desde que você tenha definido um valor padrão aqui, ok? Portanto, este é um exemplo de função com parâmetro padrão. Valor, certo? Então é por isso que isso é muito útil, pessoas. Haverá cenários. Tipo, por exemplo, essa é uma pessoa que cumprimenta, certo? Então, se você não tem o nome do usuário aqui, ok? Podemos ter o nome sendo inicializado para o convidado aqui, certo? E então o que pode acontecer é que o convidado esteja sendo usado. Se o nome não estiver disponível, convide, se você não quiser usar guest , será necessário inserir o nome, nome real do usuário. Está bem? Portanto, independentemente disso, o usuário verá uma saída decente Ele não verá olá indefinido. Certo. Então, será uma produção decente, certo? Agora, essa é uma função com valor de parâmetro padrão. Tudo bem. Eu quero falar sobre a função com o parâmetro rest. Está bem? Então, funcione com o parâmetro rest. Tudo bem. Agora, o que significa uma função com o parâmetro de repouso? Tudo bem. Então, digamos que eu tenha uma função chamada calcular soma. Tudo bem, digamos. E aqui, no lugar do parâmetro, eu tenho dois parâmetros A P, certo. E o que essa função faz é dizer log de pontos do console. Só vai fazer A mais B aqui. Tudo bem. Agora, o problema é que eu gostaria de chamar essa função, certo? Então, o que vou fazer é calcular a soma. Vou passar em 1020. Muito simples. Portanto, ele imprimirá 30 como saída conforme o esperado, certo? Agora, o cenário ou a declaração do problema é que isso funcionará bem ou funcionará se você souber quantos argumentos vai passar, certo? Agora, se você não tem certeza do número de argumentos que vai passar para a função, nesse caso, você pode usar o número variável de argumentos, certo? Então você precisa mudar a sintaxe aqui para isso, e você precisa adicionar três pontos assim, e você pode dizer números, certo? Agora, o que isso diz é que números são o nome do parâmetro. OK. Mas é de número variável, certo? A contagem não é fixa. Tudo bem. Agora a questão é: como você vai usar isso dentro da função se a contagem não for fixa? Tudo bem. Então, para isso, teremos que usar quatro loops. Ok, então eu vou dizer que a soma seja igual a zero. E eu vou dizer quatro. Então, se você está vindo de alguma outra linguagem de programação, tudo bem, como Java, C plus ou qualquer tipo de linguagem de programação, então é provável que você deva estar ciente do que são loops, certo? Se você não está ciente, então está tudo bem. Apenas fique comigo. Vamos cobrir tudo à medida que avançamos. Tudo bem. Mas, por enquanto, estou adicionando esse loop de quatro, e vou dizer soma mais igual a, e vou dizer aqui. OK. E então, no final, eu posso fazer o log do console aqui. OK. E eu posso dizer algumas coisas bem. Algo assim, certo? Agora, aqui, eu passei em 1020, o que me dá 30 como resultado Ok, eu posso passar em 1020 e depois em 30. Eu darei 60 como resultado. Eu posso copiar isso de novo, e posso passar em dez, 20, 30 e posso passar em 80. Você pode ver que está dando 140 como resultado, certo. Então isso vai continuar, certo, porque o número de parâmetros que essa função aceita é variável por causa dessa sintaxe, certo? Assim, você pode passar quantos argumentos quiser. Dependendo da sua necessidade, certo? Então, isso é algo que você deve estar ciente. Isso é conhecido como parâmetro rest. Você pode ver aqui, este é o parâmetro de descanso. Tudo bem. Então, sim, isso está feito. Além disso, um exemplo que eu gostaria de mostrar é o de um booleano, certo? Então você pode até mesmo passar parâmetros booleanos, e como você pode usar parâmetros booleanos, ok Agora, digamos, se eu quiser verificar se um membro tem direito a um desconto ou não, certo? E um usuário tem direito a um desconto se for membro. Está bem? Então, posso dizer que funcione aqui, verifique a elegibilidade aqui OK. O parâmetro é, digamos , posso dizer que posso dizer que é membro aqui. OK. Vou manter as coisas simples e vou dizer que o log de pontos do console está aqui. E dentro disso, farei uma verificação ternária do operador. Está bem? Então eu vou dizer, é membro. Se for membro, nesse caso, nesse caso, elegíveis imprimirão o que será impresso? Não elegível. Algo parecido com isso. OK. E sim. Ok, então eu cometi um erro na sintaxe. Seria algo assim, e aqui, seria Colin OK. Então, sim, isso está feito. OK. Então, o que você está fazendo é aqui, deixe-me pegar essas duas novas linhas para que fique muito mais legível, você pode ver, o que eu fiz Na verdade, estou verificando a elegibilidade para desconto com a ajuda dessa variável booleana Então, se ele é um membro, ele é elegível, caso contrário, ele não é. OK. E, muito simplesmente, você pode chamar isso. É um cheque de elegibilidade, você pode dizer, é verdade. OK. Assim, você pode ver que ele é elegível e, se você alterar isso para falso, ele não é elegível. Tudo bem. Então é isso que você vê como saída. Tudo bem. Agora, essas eram funções baseadas em variáveis. Tudo bem. Você pode até mesmo ter funções com objeto. Está bem? Então funciona com objetos como parâmetro. Tudo bem. Então, nesse caso, vou criar uma função aqui. E digamos que desejamos imprimir o endereço. Ok, então o endereço pode ser complicado, certo? E nesse caso, digamos que somos, digamos que desejamos ter uma rua por aqui, eu terei a cidade e terei o SEP. Ok, essas coisas eu vou ter. OK. E eu vou dizer que o log de pontos do console está aqui. E com os cravos, vou dizer endereço. OK. E então eu vou imprimir o endereço. Desculpe, isso será rua, então isso será depois da rua. Há cidade e CEP. Ok, então eu vou dizer cidade. E então isso será ZIP. Tudo bem. Então eu tenho essa função, ok, que é ter três parâmetros ou ter um único objeto com essas três propriedades aqui. OK. Agora, como você esfriaria isso aqui? OK. Então, para coletar isso, posso ligar simplesmente para imprimir o endereço, ok? E eu posso ter deixado o endereço aqui. E eu posso dizer rua rua como rua um, ok, algo assim. Você pode ter qualquer tipo de endereço fictício. Eu posso ter um citadino. Ok, estou adicionando todos os endereços fictícios. Você pode dizer ZIP e você pode dizer aqui, algo assim. OK. Então, sim, isso é o que está aqui. E eu vou fechar, vou ter um ponto e vírgula, e então vou passar o endereço a. Agora, se você ver a saída, você pode ver o endereço Rua um, cidade um, e você pode ver isso sendo impresso aqui Então, na verdade, estou obtendo a saída em várias linhas porque adicionei a separação de linhas. Então, vou voltar e mover tudo para uma única linha, e você pode ver a saída agora, certo? Então é assim que você pode fazer com que os objetos sejam passados. Tudo bem. Você pode até ter um endereço impresso aqui. Essa também é outra sintaxe, e você pode criar diretamente o objeto aqui Então você pode dizer rua Colin ABC. OK. Dessa forma, você também pode entrar. Certo. Você pode ver que a rua está sendo ultrapassada agora e as outras duas estão indefinidas, certo? Portanto, é importante que a chave seja adequada para todos os pares de valores-chave. Tudo bem. Então aqui você pode dizer cidade dois, dois, salvar. Você pode ver a saída, sim. OK. Assim, você pode passar ou criar objetos dinamicamente como este também aqui. Tudo bem. E também, mais uma coisa que eu gostaria de destacar aqui são as matrizes, ok? Portanto, as funções também podem ser usadas com matrizes como parâmetros. Tudo bem. Agora, neste caso, o que faremos é ter uma função. Eu direi números impressos e terei números como parâmetro aqui, e posso dizer log de pontos do console, e posso dizer números, algo assim. Tudo bem. E eu posso chamar essa função. Então, deixe-me chamar isso. Vou dizer números impressos e deixe-me ligar para isso. Eu posso dizer um, dois, três, quatro, cinco, seis. Tudo bem? Se eu salvar isso, você verá a matriz sendo passada para a função. Portanto, este também é um exemplo de função com matriz. Tudo bem. Então, isso é tudo que eu tinha para falar sobre diferentes parâmetros. Quero dizer, os parâmetros da função e os argumentos da função. Tudo bem. Espero que esse conceito esteja claro. A distinção entre parâmetros e argumentos também está clara, e espero que você tenha alguma clareza sobre como criar funções que aceitem argumentos diferentes e possa usá-las em JavaScript. Tudo bem? Então, espero que isso tenha sido útil. 4. Resultados de função revelados: explicação dos valores de retorno: Agora, digamos que eu tenha uma função que pode me ajudar a obter um valor quadrado, ok? Agora, SQUA está bem. E para isso, vou aceitar um número aqui. Tudo bem. E o que é um quadrado? Um quadrado está em número multiplicado por si mesmo. Então eu vou dizer deixe o resultado, e eu vou dizer número em número. OK. Agora isso está feito. Eu posso fazer um log do console aqui. Ok, registro de pontos do console, posso dizer resultado. Tudo bem. Agora vou chamar essa função. Eu vou dizer, pegue o quadrado, e eu vou ligar para quatro. Agora, o que é um quadrado de quatro? É 16. Então você verá 16 como saída. Tudo bem. Agora, o que está acontecendo aqui é que estamos passando esse argumento quatro para esse parâmetro para essa função, e esse parâmetro é inicializado com quatro, e então o cálculo acontece onde o resultado é inicializado com quatro em quatro, que é 16, e então você obtém 16 como resultado, certo Agora, esse 16 ou o resultado não estão acessíveis fora dessa função, certo? Agora, haverá cenários em que você pode querer fazer certo tipo de processamento, tudo bem, certo tipo de operação, certo tipo de operação, que você está processando alguns dados, algumas informações e, em seguida, deseja obter esse valor processado aqui, não estamos recuperando o valor processado de onde ligamos, certo? Então, aqui estamos pedindo que a função obtenha o quadrado de quatro. Mas e se eu quiser usar o quadrado aqui? Eu não posso. Não consigo acessar o resultado aqui. Está bem? Então, se eu simplesmente mover essa declaração daqui para aqui, ela não funcionará, certo? Você pode ver que o resultado não está definido. E a razão é que o resultado é criado dentro desse bloco de funções, então ele existe lá mesmo, certo? Você não pode acessá-lo fora do bloco de funções. Então, como faço para obter os dados do processo? Da função. Agora, é aqui que você pode retornar os valores, certo? Então, aqui, o que estou fazendo é em vez de imprimi-lo aqui, posso simplesmente dizer devolver. Eu posso usar essa palavra-chave de retorno aqui. Você pode ver esse retorno, e eu posso dizer o resultado. Está bem? Agora, o que acontecerá como resultado disso, o resultado será retornado. Está bem? E de onde ele é retornado de onde quer que você chame a função. Então, de qualquer lugar, seja qual for posição em que você esteja chamando a função, esse resultado é Mas o problema é que você não está vendo isso aqui, certo? Então, para obter o resultado, você precisa pegá-lo e como capturá-lo? Você pode dizer quadrado entorpecido aqui. Você pode criar uma variável e capturá-la dessa forma ou imprimir essa variável. Então, agora você verá 16 como saída. Então, o que estamos fazendo essencialmente aqui é criar uma função g quadrado para processar ou obter o quadrado de um número e ele pode ser qualquer número, e estamos obtendo o resultado aqui e o registrando aqui. Certo? Agora, essa maneira de fazer as coisas é conhecida como retornar o valor de uma função. E aqui, estamos obtendo esse valor e fazendo mais alguns processamentos, certo? Então, sim, é assim que você pode retornar e usar os valores de uma função específica. Agora, o problema aqui é que estamos apenas retornando um valor único. Obviamente, você também pode ter funções que retornam vários valores. Como você faria isso? Então eu posso ter a função Ok, aqui e eu posso dizer obter informações do usuário. Está bem? E eu posso dizer nome, vírgula H. Ok. Eu posso dizer “volte”. Posso dizer nome de usuário, nome Colden aqui. OK. E eu posso dizer usuário H e posso dizer g aqui. OK. Então isso está feito, e tudo bem. Então isso está feito, e em vez de adicionar isso, o que eu posso fazer é me livrar e fazer com que isso seja inicializado dessa forma OK. Então, estou fazendo um teste de nome e terei H como teste. OK. Agora, como faço para colocar esse valor no lugar onde quer que eu esteja chamando isso? Está bem? Então, o que eu posso fazer é ver o log de pontos do console. OK. Eu posso imediatamente posso dizer G. Desculpe, Ah, sim, começa com G, na verdade, G, informações do usuário, e eu posso chamá-lo assim. E você verá as informações do usuário sendo impressas aqui, certo? Em vez de imprimi-lo no console, o que você também pode fazer é desempacotá-lo , certo? Então, aqui, há duas propriedades chegando, nome de usuário e usuário H. Então você pode descompactar isso e atribuí-lo a variáveis separadas Como você faz isso? Então você pode dizer deixe aqui. Você pode dizer use um nome. E você pode dizer que o usuário g está aqui. Está bem? É isso, ok, você está criando aqui e está ligando para obter informações do usuário. Tudo bem. E agora, se você fizer o log de pontos do console aqui, nome de usuário, vírgula, usuário H. Você pode ver que o nome é isso e H é isso. Está bem? Agora, o que estamos fazendo é quando estamos obtendo o valor. Portanto, quando o valor é retornado de get user info, ele é retornado na forma de objeto. Então isso é na verdade um objeto aqui, pares de valores-chave, certo? E é assim que você pode retornar vários valores de uma função. E estamos recebendo um objeto como tipo de retorno. Então, o que estamos fazendo é imprimi-lo no console. Ok, não queremos imprimi-lo. Queremos lidar com isso de forma personalizada. Então, o que você pode fazer é descompactar esses valores e atribuí-los a variáveis separadas usando a sintaxe Está bem? Então você tem a lista de variáveis aqui e certifique-se de que elas correspondam ao nome aqui, porque se eu disser o nome de usuário um, e se eu salvá-lo, você verá que nome do usuário não está correto, aqui. Vou adorar o nome de usuário um e vou salvá-lo. Você verá que o nome de usuário um está indefinido agora. Por quê? Porque o nome da propriedade é nome de usuário, e aqui você a está descompactando em uma variável com um nome diferente Está bem? Então, o nome está sendo combinado, você pode ver, certo? Então isso deve funcionar. E essa sintaxe em que estamos criando variáveis dessa forma a partir do objeto é conhecida como desestruturação Está bem? E você frequentemente lerá esse termo desestruturação de objetos Estamos desestruturando os objetos. O que é desestruturação? Em termos simples, estamos desempacotando os objetos, ok? O objeto vem nessa sintaxe, certo? Tem o atributo nome de usuário e o usuário H. Você está descompactando e criando uma variável chamada nome de usuário, você está atribuindo esse valor a ela, certo Esse valor, sim. E então você está criando usuário He e atribuindo a ele esse valor Bem simples. Estamos desempacotando isso, e é isso que é a desestruturação de objetos E aqui, na verdade, em retrospectiva, não em retrospectiva, na verdade, está bem claro que essa sinta específica ou esse conceito específico está sendo usado aqui para desestruturar os objetos Tudo bem. Então é assim que você pode fazer com que função retorne vários valores, como objetos, é claro. Está bem? Agora, é assim que você pode retornar um objeto, certo. E eu também mostrei como você pode fazer uso do objeto do lugar onde você está chamando isso. Agora, outra maneira de fazer as coisas ou retornar vários valores é ter uma função, uma matriz de retorno, certo? Então você também pode fazer isso. Agora, como você faria isso? Então deixe-me mostrar isso para você. Então você pode ver a função e dizer obter dimensão aqui. OK. Não vou aceitar um parâmetro. Então, digamos que estamos criando uma função para obter a dimensão. Vou dizer, volte, e podemos imediatamente ter uma matriz aqui Posso dizer 200, 300, 500. OK. E eu posso simplesmente chamar Console dot log get dimension aqui. OK. E você pode ver a saída aqui. Ok, então isso também é factível, ok? Agora, você pode até mesmo desestruturar a matriz aqui em variáveis individuais Está bem? Como você faria isso? Está bem? A propósito, já sabemos como funciona a desestruturação Então eu vou dizer, aqui estou retornando 200300500, certo? Então eu posso dizer largura OK. Eu posso dizer altura, eu posso dizer profundidade aqui. OK. Vou me livrar disso e vou pegar isso. Eu direi que é igual a obter dimensões. OK. E eu posso dizer Console, dot, logon aqui. Eu vou dizer largura, altura e profundidade, algo assim. OK. Opa. Então, isso é indefinido Deixe-me ver onde está o problema. Portanto, a sintaxe é um pouco diferente aqui. Em vez de colchetes encaracolados, haverá colchetes redondos Está bem? Oh, desculpe, não são colchetes redondos. Me desculpe por isso. OK. Então, se você salvar isso, você pode ver 200300500 Isso funcionou, certo? Então, isso é sobre aumentar aqui. Está bem? Uma coisa sobre a qual eu quero que você fale está aqui nesta função. Está bem? Deixe-me copiar isso aqui. OK. Vou comentar isso. Não estou removendo esse código para que você possa ver quais mudanças estamos fazendo. Então esse é o código, ok? Aqui, o que estou fazendo é, na verdade, criar uma variável. Não precisamos criar essa variável aqui. Eu posso simplesmente cortar isso e retornar o cálculo, algo assim. Isso também é bom. Há outra maneira de fazer as coisas. Você pode ver 16. A forma abreviada é como se chama, Então, sim, é assim que você pode retornar a função. Desculpe. É assim que você pode retornar valores e diferentes tipos de valores, na verdade, da função. Agora você também pode ter uma função sem retorno aqui. Está bem? Então eu posso ter uma função chamada say hello. Isso é algo que você já sabe ou já deve estar ciente, e você pode dizer: eu quero te mostrar como as coisas funcionam se você tentar aceitar o valor de uma função que não está retornando nada. Está bem? Então eu tenho que dizer olá. Isso não está devolvendo nada. Está bem? Eu posso dizer olá aqui. OK. Você verá o olá impresso. Está bem? Agora, se eu disser ponto de console , entre aqui e se eu disser mensagem Ok. E se eu tentar aceitar a mensagem como o retorno dessa função específica. Esta função não está retornando nada, mas ainda estou criando uma mensagem e tentando aceitar o que ela está retornando, você ficará indefinido Não está devolvendo nada, certo? Então, é claro, você ficará indefinido, certo? Então, sim, isso é tudo, certo. Você também pode , então eu quero te mostrar mais um caso aqui. Então, aqui estou retornando número em número, ok? Agora, deixe-me adicionar uma roupa depois disso, ok? Vou dizer oi. Vamos ver o que acontece. Se eu salvar isso, você verá que essa instrução nunca é executada. Você também verá que é uma nota baixa. Consegue ver isso? Isso não é nota baixa, é saída de nota. Se você passar o mouse sobre isso, verá um código inacessível detectado O que significa código inacessível ? Está bem? Então, o que acontece é que, na verdade, se você tiver qualquer tipo de declaração após a declaração de retorno, repito, se você tiver algum tipo de declaração após a declaração de retorno , essa instrução nunca será executada, certo? Como isso será executado? Porque você está realmente voltando daqui. Você disse “volte”. Retornar significa que você está vindo para o lugar de onde você é chamado de função, certo? Você está vindo para o lugar de onde você chama a função. Então, isso nunca será executado. Então, é claro, esse é um código inacessível, certo? Isso nunca será executado, certo? Agora, deixe-me tornar as coisas um pouco interessantes, certo? Então você pode ter uma função. Com vários valores de retorno ou declarações de retorno. Não valores. Devo dizer declarações de retorno porque valores já vimos como você pode retornar vários valores na forma de objetos e matrizes, certo? Então, digamos que eu tenha uma função na qual eu queira verificar cada usuário Estou verificando a idade e estou aceitando a idade aqui. OK. Agora eu posso dizer idade se a idade for maior que 18, ok? Então eu estou fazendo uso do operador ternário. Estou dizendo que está bem, volte como adulto. Algo parecido com isso. Então , é voltar a ser adulto se a idade for realmente acima de 18 anos, ok? E opa, isso não está nos permitindo voltar aqui, operador ternário Vou ter que fazer uso do tratamento por aqui. Ok, então eu vou dizer que a idade é maior que 18, então, nesse caso, ok? Eu vou querer voltar como adulto, certo? Estou voltando como adulto. Está bem? Caso contrário, o que vou devolver é pequeno. Digamos que. OK. Então, sim, isso está feito, e eu vou ter ponto e vírgula OK. Então aqui o que está acontecendo é observar isso com cuidado, pessoal, ok? Estou tendo uma função em que tenho duas declarações de retorno, retorno adulto, retorno menor, ok? Então, isso é absolutamente válido, ok, porque essas duas instruções de retorno não são executadas ao mesmo tempo. Qualquer um deles será executado dependendo da condição, certo? Portanto, se a condição for verdadeira, ela será executada. Se a condição for falsa, isso será executado, certo? E é assim que a declaração if funciona. Então, primeiro verificamos essa condição e depois executamos isso, certo? Assim, você pode ter várias declarações de devolução. Está tudo bem por aqui. Tudo bem. E se eu tentar executar isso aqui, posso dizer log de pontos do console aqui. Ok, e eu posso dizer, cheque, idade, deixe-me passar de 14 por aqui. Ok, vou copiar isso e vou salvar isso. Você verá minor como saída. Se eu fizer isso de novo com 24 anos, você verá um adulto. Tudo bem. Então, aqui estamos fazendo uso de declarações return with if, e isso é absolutamente válido. Não há problema como tal, certo? Então, espero que isso esteja fazendo sentido agora sobre como a função pode retornar valores em vários e diferentes cenários. Tudo bem. Então, espero que isso seja útil. 5. Como criar código: explorando expressões de função em JavaScript: Então, agora é hora de falarmos sobre expressões de função. Digamos que eu tenha uma função muito simples, que é usada para dizer olá, certo? E eu posso chamá-lo assim. Não há nada mágico por aqui. Veremos a saída como hello. Está bem? Agora, outra coisa que quero destacar aqui está na parte superior, se você adicionar uma chamada de função como essa, verá a saída antes mesmo de a função ser declarada. Portanto, mesmo antes da declaração da função, se você tentar adicionar say hello ou chamar a função que você vai declarar , ela ainda funcionará Você não receberá nenhum erro. Tudo bem? Agora, voltando ao tópico de expressões funcionais, o que são expressões funcionais? Então você pode criar uma variável, como essa. Você pode dizer vamos criar aqui. E você pode atribuir uma função a ele, certo? Então isso é algo que você pode fazer. Tudo bem Então, o que vou fazer é cortar isso. Não vou criar uma nova função. Em vez disso, vou cortar isso e adicionar aquela coisa aqui, ok? E a, isso é absolutamente válido aqui. Está bem? Isso é algo que você pode fazer em JavaScript. Está bem? Você pode chamar Greet de algo assim, e você pode ver: Ok, C, olá Ok. Então, isso precisa sumir por aqui. O nome C hello precisa desaparecer, certo? E quando o S hello acabar, você precisa curtir e comentar isso. Ok. E você pode ver, agora você pode chamar essa função específica usando greet. Está bem? Então, o que estamos fazendo aqui é, na verdade ter um tipo de variável que agora está apontando para essa definição de função. E quando você está se referindo a essa variável, você pode chamar a função usando essa variável em si. Está bem? Então, esse é um exemplo de uma expressão de função. Agora, a forma como tudo isso funciona é que o que acontece é que a primeira função anônima é criada. Está bem? Função anônima, ou seja uma função sem nome está sendo criada, porque não estamos adicionando um nome aqui, ok? Então, uma função sem nome é criada e atribuída a essa variável chamada Grit, ok? E então você pode usar a ganância para chamar a função. Agora, se eu copiar essa chamada de função e adicioná-la na parte superior, você verá que o grit ainda não foi inicializado ou o grit não existe Tudo bem Portanto, ao contrário de say hello, em que pudemos chamar a função com o nome da função, não podemos chamar a função com greet porque grit é essencialmente uma referência que criamos que aponta para essa Está bem? Então, isso é algo que você precisa estar ciente, ok? Você não pode chamar grit antes de sua definição no código. Você deve defini-lo antes de usá-lo. Tudo bem? Então, sim, isso é sobre a expressão da função. Agora, essa coisa aqui, o que estamos fazendo quando atribuímos a função dessa forma, estamos na verdade criando uma expressão Está bem? Então, esse é um exemplo de expressão de função. Você pode até adicionar uma função, certo, que retorna alguma coisa. Está bem? Então, deixe-me dizer também: vamos multiplicar Ok. Digamos que queremos ter uma função para multiplicar algo Vou adicionar uma função aqui. O parâmetro é E P aqui, e eu direi que retorne A para B, porque essa função está multiplicando os dois números e retornando. Está bem? Agora você pode dizer multiplicar aqui, dez, 20. Ok. E se eu salvar isso. Ok, então está simplesmente voltando. Precisamos imprimir o valor se quisermos usá-lo ou exibi-lo para os usuários. Ainda não dando a saída por causa dessa linha na parte superior, estamos recebendo um erro aí. Então, se você salvar isso depois de comentar isso, obterá o multiplicador aqui, você pode ver, e você pode ver o resultado da multiplicação Está bem? Então, isso também é possível quando você tem uma função que está retornando algo e você está retornando algo e você está atribuindo essa função a Portanto, essa é uma função anônima ou sem nome que você está atribuindo a uma variável Tudo bem Agora, mais uma coisa que eu quero destacar aqui é que as funções em JavaScript são objetos. Está bem? Então eles são objetos, o que significa que, se você tem uma função, ok, então deixe-me criar uma função aqui. Está bem? Então, aqui, eu vou dizer que as funções são objs Tudo bem E eu vou ter uma definição de função. Vou chamar isso de GET. Ok. Sem parâmetros. Vou dizer log de pontos do console e vou dizer olá rapidamente por aqui. Está bem? Então, sim, isso é uma função. Agora, o que você pode fazer é ter essa função. Está bem? Ok, GET já foi definido, então diga oi ou diga olá. Tudo bem Então, se você ligar para dizer olá, vai funcionar, é claro, nada mágico, certo? Agora, olá novamente. Vou imprimir alguma coisa. Olá de novo, jeito. Para que saibamos que está vindo dessa função. Hello again vem desta função. Tudo bem O que você pode fazer é ter uma variável. Você pode dizer A aqui, e você pode atribuir diga olá aqui. Está bem? Então, o que está acontecendo aqui é essa função ou essa variável, devo dizer. Tudo bem Essa variável também está se referindo a essa função agora, certo? E você pode simplesmente dizer, A, e você verá olá novamente. Tudo bem Assim, você pode ver que está atribuindo uma função essencialmente a uma variável E isso é possível porque as funções são objetos em JavaScript. Ok. E você pode usar A para chamar essa função específica. Tudo bem Espero que isso esteja fazendo sentido, certo? Então, esses são alguns conceitos que eu gostaria de abordar. Espero que isso tenha sido útil. 6. Fundamentos modernos do Javascript: dominando as funções de seta: Então, agora é hora de falarmos sobre as funções das setas. Agora, o que são funções de seta? Agora, as funções de seta são sintaxe, e a sintaxe fornece uma maneira mais concisa de criar e escrever funções Tudo bem? Agora, se você tivesse que criar uma função, o que você faria? Você diria função, diria olá, e eu diria olá aqui. Está bem? Então eu diria Console , log e eu diria olá. Está bem? Isso é uma função. E, claro, se eu tiver que ligar, vou simplesmente chamá-lo assim, dizer olá. Essa é uma forma básica de criar funções em JavaScript. Agora, você pode usar a expressão da função, certo? E você pode dizer, et greet é igual a, e você pode se livrar desse tipo de sintaxe aqui Está bem? Ou deixe-me realmente manter essa sintaxe aqui no topo Ok, para vermos como estamos progredindo e eu vou me livrar disso aqui Tudo bem. E essa também é outra forma de criar funções. Mas aqui estamos fazendo uso da expressão de função em que atribuímos uma função a uma variável. Está bem? Então, agora essa variável está apontando para essa função específica. Agora, em JavaScript, você pode melhorar ou tornar isso ainda mais conciso. Tudo bem. Então, o que você pode fazer é dizer aqui, cret, eu vou dizer greet arrow. Vamos ver o que é a função de seta. Portanto, você pode pular essa palavra-chave de função aqui primeiro Tudo bem, então você pode se livrar dessa palavra-chave de função. E como nossa função tem apenas uma única declaração, posso simplesmente me livrar das frases e posso simplesmente dizer, ou posso simplesmente fazer algo assim. Tudo bem. Então, eu estou usando a seta aqui para definir o corpo da função ou a definição da função. Agora eu posso dizer a seta de saudação aqui. E eu posso salvar isso e você verá olá sendo impresso no console. Tudo bem. Então, essa sintaxe aqui é uma sintaxe da função de seta E você pode ver que isso é uma criação de função de uma forma normal, tudo bem, com apenas a sintaxe normal Essa é uma expressão de função em que você está atribuindo uma função a uma variável E aqui, agora o que você está fazendo é tornar essa expressão de sintaxe ou função ainda mais concisa e usar a seta aqui Então, essas são as funções de seta, à direita, nas quais você pode criar funções dessa maneira Agora, é claro, isso é muito mais conciso, se você está apenas criando uma função para fazer uma linha de operação, por exemplo, qualquer linha de operação, como imprimir algo ou registrar algo ou processar algo em apenas uma linha, dessa forma , dessa forma , a função de seta é muito mais concisa do que fazer as coisas dessa maneira ou dessa maneira, certo se você está apenas criando uma função para fazer uma linha de operação, por exemplo, qualquer linha de operação, como imprimir algo ou registrar algo ou processar algo em apenas uma linha, dessa forma , a função de seta é muito mais concisa do que fazer as coisas dessa maneira ou dessa maneira, certo? É só uma opção. Tudo bem. E você verá muitos códigos que usam funções de seta. Tudo bem? Agora, a questão está aqui, essa função é uma linha, certo? Então, é como se a função de seta fosse usada apenas para uma única linha de declaração? Absolutamente não. Então, se o corpo da função tiver várias declarações. Então, aqui eu posso dizer criar uma seta, múltipla, certo? E eu posso dizer aqui, ok? Então, aqui, vou adicionar um corpo, algo assim, e posso dizer, aqui, vou copiar isso e vou colocar esse olá. H dois. Está bem? Então isso é olá um, e isso é como dois. Tudo bem. E eu só preciso chamar isso para que eu possa dizer criar setas múltiplas e, uh, simplesmente adicionar para que você possa ver olá um, olá dois. Assim, você também pode ter várias linhas de código nas funções de seta. Tudo bem. Agora, vamos criar e ver rapidamente diferentes funções de seta em diferentes cenários, certo? Então, como a função de seta se comportaria se houvesse parâmetros, certo? Então, vimos que é assim que você pode criar sem parâmetros, certo? Então, com os parâmetros, você simplesmente adicionará um parâmetro aqui, tudo bem Então, por exemplo, aqui mesmo, eu posso atualizar esse exemplo aqui. OK. Deixe-me duplicar isso aqui. OK. Agora, aqui, eu posso dizer o parâmetro um. OK. Então, está tendo um parâmetro, então eu posso dizer o nome aqui, certo. E vou simplesmente converter isso em um modelo literal. Ok, porque isso é mais conveniente, e eu posso dizer mais alto e nomear aqui, E agora eu preciso passar o nome aqui. OK. Então eu vou dizer a seta de Creta, e eu vou dizer o parâmetro um OK. E eu posso dizer John. OK. E se eu salvar isso, você verá, olá, um, John, certo? Então é assim que você pode passar os parâmetros, tudo bem. Você pode até mesmo passar vários parâmetros, se desejar. Então eu posso dizer o parâmetro dois. Então, aqui estamos passando dois parâmetros, então eu também posso dizer H aqui, tudo bem E aqui, eu posso simplesmente replicar essa sintaxe, ok? Aqui. Vou fazer uso de modelos literais, e aqui, vou dizer H. Ok. E aqui, vou copiar isso. Então, vamos dizer o parâmetro dois, e eu estou passando John, bem como 34 ou 32. Vou guardar isso e você pode ver olá um, John, olá dois, 32, certo? Então você está passando vários parâmetros e também tem um corpo de função, certo? Você também pode comprar este. Está bem? Então, deixe-me entender isso com uma única declaração aqui. Ok, pegue a flecha, eu vou dizer uma, vou passar o nome aqui. OK. E eu posso adicionar um nome aqui. Algo parecido com isso. Está bem? Agora, se eu chamar essa função, pegue R one ou cumprimente R one, ok Então, ótimo R one e eu não posso deixar passar nada, ok? E se você salvar isso, você pode ver olá Nadar, certo? Então, aqui, esta é uma função de linha única, na verdade. Não está acontecendo como várias linhas. Essa função tem apenas uma linha, e você pode até mesmo passar um parâmetro aqui, certo? Assim, você pode ter parâmetros únicos, vários parâmetros. Você pode até mesmo retornar valores, certo? Então, deixe-me escrever o exemplo aqui. Está bem? Então, o que eu posso fazer é dizer, vamos somar, e eu diria que é igual a, ok. Então, deixe-me primeiro criar usando a sintaxe normal, para que possamos deduzi-la em funções de seta . OK. Então aqui eu posso dizer s e Opa, eu posso dizer s, e aqui eu posso dizer E P, e isso simplesmente retorna, E mais P. Ok. É isso mesmo. Bem simples. E agora aqui eu posso dizer a soma, certo? Eu posso dizer 1020, certo? E vou colocar tudo isso no registro do console. Está bem? Então, porque estamos simplesmente retornando e não estamos imprimindo nada, certo? Portanto, não será exibido no console. Então você pode ver que estamos vendo 30 aqui, certo? Agora, se eu tiver que converter isso em uma expressão de função, posso dizer let e posso dizer algumas aqui. Está bem? Vou manter o mesmo nome. Vamos nos livrar disso. OK. Agora, isso é uma expressão de função. Você pode ver 30. Agora, se eu tivesse que converter isso em função de seta, como eu faria isso? Então, aqui, eu posso me livrar da função antes de tudo, ok. E então eu vou começar a ver marcas vermelhas aqui, certo? Então você pode ver a seta esperada. Então aqui eu posso ver a seta. Ok, e é isso. Você pode ver que esta é a função de seta. E eu nem preciso disso aqui. Ok, porque é só ter uma única linha de código, então você pode ver como isso é. E você nem precisa da palavra-chave return, aliás, se você está retornando e ela tem apenas uma única linha de código, você pode ver, não é Você sabe, é isso. Vou apenas adicionar espaço. Você sabe, é isso. Então, quão limpo é isso? Você está dizendo, vamos resumir. Este é um parâmetro, seta, você está dizendo A mais B. Não há palavra-chave de retorno, então isso está sendo retornado automaticamente. Entende-se que ele será retornado ou esse valor precisa voltar, certo? Então, quão conciso é isso em comparação com fazer as coisas da maneira antiga, certo? É bem simples, muito fácil e torna a sintaxe muito mais legível e concisa, como você pode imaginar aqui Então, valores de retorno são o que vou escrever aqui. Então, espero que você tenha conseguido acompanhar e espero que a explicação das funções das setas tenha sido útil. 7. Empoderando objetos: aproveitando funções dentro: Então, vamos falar sobre como você pode usar funções dentro de objetos. Agora, digamos que eu tenha esse objeto aqui chamado pessoa, ok? E eu vou ter algumas propriedades por aqui. OK. Então, eu vou dizer Alice aqui. OK. E eu posso dizer que go, g é 33. Ok, eu perdi uma vírgula. Ok, posso dizer que o log de pontos do console está aqui. Opa, e posso dizer que essa é a pessoa que pensou H. Ok. Agora, eu posso adicionar práticas aqui. Posso converter isso em um modelo literal e posso dizer: Olá, eu sou OK. E eu posso realmente adicionar uma expressão aqui. OK. Agora, esse será o nome. Tudo bem, porque o nome é o que faz sentido. E se eu salvar isso, você verá, oi, eu sou Alice. Tudo bem. Então, o que estamos fazendo é nos referir às propriedades dentro dos objetos usando a notação de pontos aqui, certo? Agora, você pode ter funções dentro de objetos. Agora, se você está adicionando funções dentro de objetos, elas são conhecidas como métodos, certo? Então, aqui, posso simplesmente continuar adicionando afirmações aqui, posso dizer minha idade aqui, posso imprimir na minha pessoa etária o ponto H aqui. Está bem? Mas isso está fora do objeto. Então, eu posso adicionar essa coisa dentro do objeto com a ajuda da função, como eu disse, então vou cortar isso aqui. Está bem? E primeiro adicionarei uma vírgula porque os métodos que você está adicionando, como eu disse, funcionam dentro um objeto são conhecidos como método, certo? Então, se você está adicionando um método aqui agora, ok, deve ser separado por vírgula porque é um atributo, direito ou uma propriedade, eu diria Então eu vou dizer Grit aqui. Vou dizer uma função assim, e vou adicioná-la aqui. Está bem? Se eu guardar isso, nada acontece porque eu preciso resfriar isso. Então eu vou dizer Oh, eu não vou ser cumprimentado. Eu diria que a pessoa não cumprimentava. Está bem? Não preciso chamar o log de pontos do console aqui porque já estou fazendo o log de pontos do console dentro desse método aqui, certo? Então eu vou dizer pessoa, Greg, e eu vou ver isso, você vai ver oi, eu sou Alice, certo Vou me livrar disso de uma maneira. Está bem? Então isso é factível. Agora vou chamar esse objeto de pessoa de Alice. Vou substituir a pessoa Alice aqui e também aqui. Isso está funcionando bem. Agora vou adicionar mais uma pessoa aqui, que é a réplica desse objeto aqui, e vou dizer uma pessoa John aqui OK. Vou copiar o nome dele, pessoa, John, pessoa, John, e vou duplicar isso aqui, e vou dizer pessoa John Você pode ver? Oi, eu sou Alice Oi, eu sou John. Tudo bem. Então, isso está funcionando bem até agora, tudo bem. Tudo bem. Agora, a forma como criamos funções aqui é com a ajuda da expressão da função, certo? Assim, você pode se livrar da função aqui, a palavra-chave function, e convertê-la em função de seta. Está bem? Então, o que eu posso fazer aqui é simplesmente me livrar disso e adicionar esse tipo de sintaxe aqui OK. Eu posso me livrar disso e posso usar esse tipo de sintaxe aqui Opa. Esse tipo de sintaxe, certo? Então, isso vai funcionar bem. E se você salvar isso, funcionará bem. Nenhuma alteração na saída. Então, esses métodos foram criados. Tudo bem. Agora também posso me livrar da prensa ondulada e fazer com que pareça ainda mais concisa porque estou usando as funções de seta agora, certo Então, vou passar para essa sintaxe. OK. E no final, removerei o ponto e vírgula. OK. Se eu salvar isso, não haverá alteração na saída. Tudo bem? Agora, eu também quero falar sobre uma palavra-chave que existe, que é essa palavra-chave. Agora, aqui, estou vendo personalis que é esse nome de objeto específico, certo? Mas, na verdade, o que estou fazendo é me referir ao atributo do nome ou à propriedade do nome usando esse nome de objeto. Isso não é obrigatório. O que eu posso fazer é simplesmente usar isso aqui. Essa é uma palavra-chave em JavaScript usada para se referir ao objeto atual, certo? Então, se você passar o mouse sobre isso, tudo bem, você verá esse tipo de teste global de palavra-chave Se eu salvar isso, ok? Tudo bem, isso não funciona porque ambas são convertidas em funções de seta. Tudo bem. Então, uma coisa que você precisa lembrar é que se você estiver usando essa palavra-chave, ela não funcionará em funções de seta então você precisa dizer função , então você precisa dizer função aqui e salvá-la. Ok, e eu preciso me livrar disso. Então, terei que reverter um pouco porque essa palavra-chave não funcionará dentro dessa sintaxe específica aqui OK. Então, vou mudar para esse tipo de sintaxe novamente. OK. Então você pode ver, oi, eu sou Alice trabalhando aqui. Então agora você está fazendo uso disso. Se você passar o mouse sobre isso, verá que isso se refere a nome, g e saudação Se você mudar isso aqui, é claro, não funcionará porque você acabou de ver não funcionará dentro das funções de seta. E se você passar o mouse sobre isso, verá que está se referindo a isso global Está bem? Mas este está se referindo a isso aqui, aos outros atributos do objeto. Tudo bem Assim, você pode ver a saída. A saída não está correta. Está bem? Então, vou ficar com a pessoa John aqui. Então, uma coisa que você pode tirar aqui é se você está fazendo uso disso ou se seu método dentro do objeto envolve fazer uso disso, então você não deve usar a função de seta dentro do objeto aqui, certo? A sintaxe não deve ser usada. Você deve usar esse tipo de sintaxe. Tudo bem Então, espero que isso seja útil. Agora, você pode fazer muita coisa com os métodos dentro dos objetos, ok? Então, se você vier aqui, o que eu farei é ter um contra-exemplo aqui. OK. Agora, o que o contador vai fazer? Ele vai te ensinar como você pode passar os parâmetros e como você pode retorná-los do objeto, certo? Então, vou dizer const, ou posso simplesmente dizer let over here, counter OK. E eu vou dizer valor. Portanto, esse contador tem valor inicial de zero. OK. E eu posso dizer incremento aqui. Então, essa é uma função que eu estou criando, função de incremento, e vou dizer valor de retorno Agora, o valor precisa ser incrementado. Assim, você pode ver que esse valor de ponto foi adicionado e pode incrementar o valor aqui Então eu posso dizer esse valor de ponto mais igual, e eu posso dizer um aqui. Está bem? E guarde isso até agora, tudo bem. Agora, se eu rolar para baixo, preciso invocar isso aqui para poder dizer Console, log de pontos aqui, e preciso dizer contador, ponto, preciso dizer incremento Você pode ver isso incrementado em um, eu posso copiar isso. Ok, eu posso incrementar em dois, incrementado em três, incrementado quatro e assim por diante, Agora, este é um exemplo de como você pode retornar valores de um método definido dentro do objeto Eu deveria dizer, certo? Vou te mostrar mais um exemplo em que você pode aceitar o parâmetro e retornar também. Digamos que eu queira incrementar o valor em um determinado valor Então, vou duplicar isso. Vou adicionar uma vírgula Aqui, posso dizer incremento B e vou aceitar um valor como num aqui, e vou adicionar esse valor num aqui Está bem? E eu vou devolver o valor. Agora, aqui, o que eu deveria fazer é aqui, se eu vier, posso dizer incrementar Pi, e eu posso adicionar dez aqui Então, idealmente, a saída deve ser 14. Se eu salvar isso, você pode ver que a saída é 14. Então, você está passando esse parâmetro e está obtendo isso como saída. Tudo bem. Então, é assim que você pode passar os parâmetros e também obter os valores de retorno dos métodos, como as funções dentro dos objetos são conhecidas como métodos. Então, estou me referindo a eles como métodos. OK. Mas se você estiver criando métodos dentro do contador, é assim que eles funcionarão. Tudo bem. Agora, mais um exemplo que eu gostaria de dar aqui é de objetos dinâmicos aqui. Desculpe, não são objetos dinâmicos, mas eu chamaria isso uma forma de definir métodos dinamicamente Está bem? Então, definindo métodos dinamicamente. Tudo bem. Então, digamos que eu tenha um método. Ok, vou chamar esse método dinâmico. OK. É um exemplo de como você pode criar métodos dinâmicos. Então eu tenho isso, e digamos que tenha um atributo, vou adicionar um atributo, assim mesmo. Vou chamá-lo de valor zero. OK. O que você pode fazer é fazer o Console Log e ver o valor do ponto do método dinâmico. Oito. Então, isso lhe dará zero, é claro. Agora, eu não adicionei um método interno. Você pode adicionar o método dinamicamente após a criação do objeto Você pode fazer isso. Sim. Como você faria isso? Então, aqui, você pode vir. Você pode dizer método dinâmico, tot. OK. Deixe-me rolar para cima para que fique visível. Então, método dinâmico, tot, eu posso dizer, digamos, digamos, no alto aqui e eu posso dizer função OK. E eu não preciso de nenhum tipo de parâmetro. Vou dizer log de pontos do console aqui, e vou dizer olá dinâmico, certo? E opa, vou descer e dizer ponto do método dinâmico. Eu vou dizer Chi, algo assim. Você verá a saída hello dynamic aqui. Então, essa função ou método, devo dizer, método foi adicionado dinamicamente ao objeto após a criação do objeto Então, isso é absolutamente possível. Os métodos podem ser adicionados aos objetos em qualquer ponto do programa, não apenas no momento da criação do objeto. Lembre-se disso, tudo bem, você pode ver um código em que as coisas são assim, então não se confunda Ok, isso é normal em JavaScript. Tudo bem Agora, isso é sobre objetos normais. Também quero falar um pouco sobre objetos aninhados, ok, então como as funções funcionariam em objetos aninhados, Para isso, vamos dar um exemplo de carro. OK. Então, vou criar um objeto de carro rapidamente. E digamos que o carro tenha um atributo chamado marca. Tem a marca Toyota, ok? E então o que vou fazer é dizer que tem um objeto aninhado aqui chamado especificações Vou chamar o atributo dentro das especificações de velocidade. E eu vou ter uma função chamada especificações de exibição. Então, isso é um método, na verdade, não uma função. Desculpe. OK. Portanto, terminologias, não mexa com terminologias. Eu tenho o hábito de fazer isso, mas espero que você chame isso de método, sempre, porque eles são chamados de métodos dentro de objetos, certo? Portanto, você pode dizer que a velocidade é ou simplesmente exibir a velocidade aqui. Então, eu posso dizer velocidade e vou acrescentar que você pode dizer isso para velocidade. OK. Agora isso está feito. Agora, como você chamaria isso de especificações deslocadas, certo Então é um objeto dentro de um objeto, certo? Portanto, não preciso fazer o log do console. Vou me livrar disso. Mas posso dizer especificações do carrinho, pequenas, especificações deslocadas. Você pode ver. Então você verá que a velocidade é 120. Então, é assim que você pode se referir a métodos criados em objetos aninhados, objetos dentro de objetos Então é assim que você pode fazer as coisas. Tudo bem Então, espero que isso seja útil e espero que você tenha conseguido acompanhar como as coisas funcionam com métodos dentro dos objetos aninhados Tudo bem Há também uma versão abreviada OK. Agora, deixe-me mostrar isso para você. Um direito? Então, o que eu faria é usar o objeto existente aqui. OK. Vou fazer uso do objeto existente. OK. Então, versão abreviada aqui Então, vou dizer que é uma abreviatura de pessoa. OK. Vou chamar essa pessoa de forma abreviada Tudo bem E agora, aqui, o que podemos fazer é, em vez de ter esse tipo de sintaxe aqui, eu posso simplesmente ter uma função como essa OK. Portanto, não estou usando as funções de seta aqui. Tenha isso em mente, certo. Mas vou adicionar um ponto e vírgula e isso. OK. E sim, é isso. E você pode usar a abreviatura pessoal aqui. Tudo bem E isso deve funcionar perfeitamente bem. Você pode ver. Ok, dizendo oi, eu sou John porque isso se refere à pessoa John. Você pode ver isso aqui. OK. Então você pode ver, oi, eu sou uma abreviatura. Tudo bem. E esta é uma versão abreviada, você também pode ver esse tipo de sintaxe você também pode ver esse tipo de ao trabalhar Está bem? Então, métodos criados dessa maneira. Tudo bem Então, essa é uma maneira, tudo bem. Outra forma é usar funções de seta, e então você também tem uma expressão de função como esse tipo de sintaxe, certo? Então, todos eles são válidos e funcionariam perfeitamente bem. Tudo bem. Então, espero que esteja claro para todos vocês e espero que tenha sido útil. 8. Matrizes de supercarga: métodos avançados em JavaScript: Agora, quando você está trabalhando com matrizes, há muitos métodos embutidos que o Ja Script fornece E você pode usar esses métodos para trabalhar de uma maneira melhor ou para realizar muitas tarefas ao trabalhar com matrizes. Tudo bem Agora, vamos dar uma olhada em alguns métodos que existem e você entenderá melhor quais são esses métodos e como você pode usá-los em sua programação diária. Então, aqui você pode ver essa lista, certo. Uh, então há esse mapa, filtre, reduza a forragem. Vamos examinar cada um deles, certo, e eu vou explicar tudo um por um, certo? Então, primeiro, falaremos sobre o mapa aqui. Tudo bem. Vou simplesmente anotar isso, e vou levar isso para a nova linha. Por aqui e eu vou ampliar um pouco. Tudo bem Agora, o que é mapa? Agora, o método map transforma cada elemento em uma matriz e simplesmente retornará uma nova matriz. Como isso funciona? Agora, essa transformação pode ser qualquer operação ou qualquer transformação que você queira fazer em cada elemento da matriz e coletar todos os elementos transformados novamente em uma matriz. Agora, deixe-me dar um exemplo de como você pode usar o mapa. Agora, digamos que eu tenha uma matriz chamada números. Tudo bem Digamos que seja uma matriz simples, com elementos como um, dois, três, quatro e cinco aqui. Tudo bem Agora, digamos que eu tenha um requisito em que eu queira dobrar cada elemento dessa matriz Está bem? Então, existem muitos elementos e eu quero dobrar cada elemento que existe. Então dois se torna quatro, um fica um ou um se torna dois, na verdade, ok? Torna-se quatro, três se torna seis, quatro se torna oito e cinco se torna dez. Tudo bem Então, o que eu posso fazer é ter uma função aqui, ok? Então eu posso ter uma função chamada double aqui. Ok. E o parâmetro pode ser um número aqui. Ok. E eu posso dizer que retorne um em dois. Agora, essa é uma função que vai me ajudar a dobrar cada elemento. Agora, como vou aplicar essa função a cada elemento da matriz? Está bem? Então, para isso, o que vou fazer é dizer números, que são uma matriz aqui. Eu vou dizer ponto. No momento em que você disser ponto, verá que esses são todos os métodos aos quais você tem acesso, certo? E você tem um método aqui, que é o mapa. Então, vamos dizer mapa aqui. Está bem? Se você passar o mouse sobre isso, verá chamadas da função de retorno de chamada definida em cada elemento de uma matriz e retornará uma matriz que contém o resultado Está bem? Então eu vou dizer mapa, e vou passar a função aqui, ok? Eu vou simplesmente dizer OK. Certo? Agora, o que isso vai fazer é aplicar essa função a cada elemento da matriz. Tudo bem? Agora, o retorno aqui é uma matriz novamente. Então, o que eu preciso fazer é coletar os elementos duplicados de volta em uma matriz Então eu preciso dizer números duplos ou duplos, algo assim Está bem? E então eu posso dizer console dot Log aqui. Ok. Opa, então eu preciso dizer log de pontos do console e preciso dizer double Números, algo assim. Tudo bem E eles deveriam dar o resultado. Agora, você pode ver aqui, dois, quatro, seis, oito, dez, certo? Então, cada elemento foi duplicado. Como isso funcionou? Funcionou com a ajuda da função de mapa, desculpe, método de mapa dentro de matrizes Então, aplicamos essa função específica chamada double que criamos aqui, à direita, a cada elemento da matriz. Está bem? Então você pode até ter um registro do console aqui. Diga log de pontos do console, e você pode dizer aqui, você pode imprimir um número aqui. Ok. Assim, você saberá contra qual número isso está sendo chamado. Então você pode ver que foi chamado em um, dois, três, quatro e cinco. Se eu mudar isso para 14 aqui. E se eu salvar isso, você verá essa virada para 14. Portanto, ele está sendo chamado para cada elemento que existe na matriz. Está bem? Não precisamos desse registro do console. Ok, acabamos de começar isso para obter informações adicionais, mas é assim que funcionará. Tudo bem Então, espero que esteja bem claro como isso está funcionando e como o mapa pode ser útil. Agora, aqui temos uma função separada aqui, certo? Essa é uma função nomeada. Na verdade, você pode converter isso em uma função sem nome ou em uma função anônima Ok, então você não precisa de uma declaração de função separada para isso. Agora, o que estou dizendo sobre como você faria isso? Está bem? Então, eu não vou deletar isso, mas na verdade eu copiaria essa coisa aqui. Está bem? Agora, esse é um exemplo de uso anônimo, certo? Função anônima, bem aqui. Então foi assim que obtivemos os números duplos em que aplicamos essa função a cada elemento na matriz usando o mapa, certo? Então, eu vou dizer duplamente anônimo. Ok. E aqui, em vez de passar essa função aqui, o que eu posso fazer é colocar toda essa definição aqui. Eu posso copiar isso e colar aqui. E em vez de dobrar, isso será função. Ok. Eu serei a palavra-chave da função. Ok. Então, deixe-me rolar um pouco para baixo e diminuir o zoom um pouco. Então você pode ver essa sintaxe aqui. Estou dizendo que deixe o dobro do anonimato. Então, isso pode ser qualquer variável que você tenha, que pode fazer o trabalho de coletar matrizes, ok? Matrizes, como nessa coisa, toda essa operação retornará uma matriz, certo? Então você precisa de algo para coletá-lo, certo? Então, eu estou dizendo mapa de pontos de números. E em vez de passar o nome da função, estou criando diretamente a função aqui. Então, eu estou dizendo função, num, retorne num em dois. Isso é o que estou fazendo imediatamente. Tudo bem E então eu posso simplesmente obter esse registro do console aqui. E eu posso simplesmente dizer duplamente anônimo, e eu posso salvar isso. A saída que você obterá será a mesma. Você pode ver que essa é a saída da parte anterior do código e essa é a saída da parte atual do código. Está bem? Não há alteração na saída, mas há, por exemplo a sintaxe que escrevemos nesta Está bem? Isso é muito conciso. Ok, conciso, então o primeiro. Está bem? Então, sim, este é um exemplo de função anônima em que estamos criando uma função sem nome apenas por causa dessa operação Então, quando você usaria esse tipo de sintaxe e quando usaria esse tipo de sintaxe Portanto, se você quiser que a função seja reutilizada em vários outros lugares além dessa matriz , você deve ter uma função separada e pode usar esse tipo de sintaxe Mas digamos que, se você estiver criando uma função apenas para fins de transformação de matriz, poderá ter essa função assim. Isso é muito mais conciso e muito mais legível. Você pode dar um passo adiante aqui. Vou apenas duplicar tudo isso aqui. Ok. Você pode dar um passo adiante e, em vez de, como aqui, função anônima, eu posso ver a função de seta. Então, aqui, vou mostrar um exemplo usando a função de seta. Está bem? Então aqui, você pode dizer seta, ok, função de mapa, e aqui, estamos vendo um, certo? Portanto, toda essa sintaxe será convertida em função de seta Então essa palavra-chave de função não é necessária, ok? E então isso se torna o tipo de sintaxe da função de seta. Está bem? E então, em vez de imprimir duplamente anônimo, vou imprimir seta dupla. Está bem? Você pode ver que a saída é a mesma, certo? Agora, essa sintaxe pode ser reduzida ainda mais. Está bem? Não precisamos de colchetes ondulados porque há apenas uma afirmação, Só há uma declaração. Então, colchetes encaracolados são necessários Não, não é necessário, certo? Então eu vou até aqui, vou me livrar dos colchetes, e isso vai em uma única linha, O retorno também não é necessário agora. Ok. Então eu vou me livrar do retorno. Você pode ver. E esses parênteses, colchetes redondos também não são necessários Eu vou me livrar deles também. Você pode ver como isso é conciso, certo. Então, você pode ver apenas nesta expressão ou apenas nesta declaração que estamos, na verdade, transformando toda a matriz aqui Se você salvar isso, a saída não será alterada. Você está obtendo a mesma saída, mas veja a sintaxe, pessoal, certo? Essa é a primeira sintaxe. Observe com cuidado. Função separada. Você está passando o nome da função aqui, você está aplicando essa função para cada elemento na matriz, certo? Você pega o elemento transformado e o está imprimindo. Você está usando uma função anônima onde na verdade, está passando essa função aqui. Essa é uma função anônima sem nome. Você está aplicando essa função para cada elemento no DRA. E, finalmente, usando as funções de seta, você pode ver que a sintaxe é muito mais simplificada, concisa e fácil Ok. Então, você verá esse tipo de sintaxe sendo muito usado Ok, e muitas pessoas ficam confusas e não entendem o que está acontecendo aqui, especialmente pessoas que são novas em JavaScript. Tudo bem? Se você tem uma boa experiência em JavaScript, talvez saiba o que é isso. Mas pessoas que são novas em JavaScript e vêm de diferentes linguagens de programação, como Java, C plus plus, Python, ok Muitas vezes é difícil para eles porque, você sabe, essa coisa toda, você sabe, essa coisa toda foi reduzida a uma expressão tão pequena aqui. Certo. Então, espero que isso esteja bem claro. Eu fui propositalmente passo a passo. Eu mostrei como isso está sendo feito primeiro, como você pode passar uma função nomeada aqui. Você pode ver como você pode ter uma função anônima e como você pode ter diretamente a função de seta. A maioria dos tutoriais de assuntos aborda diretamente as funções das setas. Ok. Então, se você aprender sobre o método de mapeamento no RAS, eles abordarão diretamente o uso dessa sintaxe, certo? Mas eu queria que todos vocês entendessem e seguissem passo a passo, certo? Agora, podemos aplicar esse tipo de sintaxe a todos os outros métodos, certo, porque você entendeu um, então achará muito fácil entender o resto, certo? Então, isso é sobre o mapa. Vocês podem fazer qualquer tipo de transformação, pessoas, qualquer tipo de transformação se você quiser fazer esses três X, ou fazer esses dez X, por exemplo, você obterá dez, 20, 30, 40, 50, ok? Qualquer tipo de transformação, certo? Então, isso é sobre o mapa. Agora, o próximo na linha ou o próximo na fila é o filtro Está bem? Agora, o que é filtro? Vou simplesmente anotar isso. Está bem? Portanto, o filtro retornará em uma nova matriz com elementos que passam por uma condição. Agora, haverá cenários em que você deseja filtrar elementos em uma matriz com base em uma determinada condição, certo? Então, nesse caso, talvez você queira filtrar, certo? E é aí que o filtro entra em cena. Agora, o filtro é um método que oferece uma maneira muito concisa de fazer isso Está bem? Então, digamos que temos essa matriz num ok com dois, quatro, desculpe. Esse não é o elemento. É um, dois, três, quatro, cinco. Certo? Isso é o que é a matriz. Digamos que eu queira obter a lista de números pares. Então eu posso dizer números pares constantes aqui, e eu posso dizer números pontos. Eu posso dizer filtro, algo assim. E aqui, eu posso dizer num, eu posso dizer que num módulo dois é igual a zero aqui Ok. E então você pode simplesmente imprimir no Oops Então você pode simplesmente imprimir os números pares aqui. Então, é algo assim. Está bem? Então, recebo um erro informando que N não está definido. Ok, não deveria ser N, é num. Sinto falta da impressão. Sinto falta de digitar Num. Ok. Então você pode ver, esta é uma lista de números pares. Então, o que está acontecendo é que esse é um teste que mencionamos aqui, certo? Isso é um teste. Então, qualquer elemento que esteja passando nesse teste é retornado e adicionado a essa nova matriz ou é filtrado e adicionado a essa nova matriz E você está imprimindo nesta nova matriz, certo? Então, toda a matriz é filtrada e você tem uma matriz filtrada que corresponde a essa condição, certo Agora, digamos que se você tem três aqui, você só obterá números que são divisíveis por três Você pode ver três aqui. Ok. Então é assim que o filtro funciona, ok. O próximo método que tenho é reduzir. Agora, o que é reduzir? Reduce fará o trabalho de reduzir o array a um único valor, certo? Agora, isso acontece aplicando uma função, ok? E pode haver muitos casos de uso se você quiser adicionar, digamos, a soma, se quiser obter a soma de todos os elementos em uma matriz, então você pode usar a redução aqui. Então, vou seguir nosso exemplo de matriz, e digamos que queremos obter a soma de todos os membros da matriz, certo? Então, eu posso dizer números aqui. Isso é o que nossas matrizes, posso dizer, reduzem aqui. Então, eu quero reduzir essa matriz. Ok. Agora, vou ter que passar o acumulador Ok. Então eu vou dizer acumulador Você pode ver a sintaxe aqui. Você pode obter o valor anterior, OK, e você pode obter o número real. Então, vou chamar o acumulador aqui e vou ver o valor atual Ok. Então é isso que eu vou dizer, ok? E você pode ver a documentação da função que aceita até quatro argumentos A meta de soma reduzida chama a função de retorno de chamada uma vez para cada elemento na matriz, certo? Então eu vou dizer acumulador agora, o que é um acumulador? Portanto, o acumulador acumulará o valor de retorno de chamada. Está bem? Então, com cada iteração, ok? A cada iteração, teremos acesso ao valor atual, certo? Então, quando sim, deixe-me rolar para cima. Então, quando a iteração for com uma, tudo bem, ela transformará uma em foto Isso o adicionará à soma. Então, com a próxima iteração, ele adicionará dois à soma E qualquer que seja a soma de cada iteração, ela está sendo mantida pelo acumulador, certo? Por aqui. Então, estamos dizendo acumulador, valor atual, e aqui, vou dizer acumulador mais valor atual Ok, é isso mesmo. E então eu vou dizer que o log do console está aqui. Vou entrar no Console e preciso coletar isso em Preciso coletar esses oops Então eu preciso coletar isso em uma variável, digamos, vamos somar. E eu vou comer alguns aqui. Agora, se eu disser Salvar, você verá 15 saídas SD. Tudo bem Então, espero que isso faça sentido em relação à forma como isso está funcionando, certo? E você tem uma boa clareza aqui. Ok, então eu levei isso para uma nova linha e só para que fosse realmente visível para todos vocês, mas não era. Tudo bem Mas sim, isso é o que todo o método de redução é. Tudo bem Agora, então temos para cada um. Agora é para cada um. Então, para cada um, executará a função fornecida uma vez para cada elemento da matriz. Ok. Então, o que eu posso fazer aqui é ir para a nova linha. Ok. Algo parecido com isso. E agora eu posso dizer o número. Ok, números ensinados para cada um, eu posso dizer. Então, para cada elemento na matriz, o que eu quero fazer é imprimi-lo, digamos. Vou pegar a saída para o console e, aqui, vou imprimir isso. Opa, sinto falta de remover isso, vou guardar isso. Você pode ver um, dois, três, quatro, cinco, então isso é matriz, certo? Então é assim que quatro funcionam cada. Qualquer tipo de função, você pode aplicar a cada elemento na matriz. Tudo bem? Temos algo chamado “ encontrar” aqui. Fine retornará o primeiro elemento que satisfará uma condição específica aqui. Está bem? Então é isso que é encontrar. Está bem? E como você pode fazer uso disso? Então, digamos que queremos obter o primeiro número par na matriz, certo? Digamos que esse é o requisito. Então eu posso dizer números ponto a encontrar aqui, e eu posso dizer número aqui, e será um percentual dois é igual a zero, algo assim. Ok. E eu preciso coletar isso, então eu preciso coletar isso, na verdade, diretamente em uma variável para que eu possa dizer, deixe primeiro par, vou chamar isso de primeiro número de Steven E eu vou dizer log aqui, log do console, e eu vou dizer para Steven Salve isso e você verá que o primeiro par são dois aqui, certo? Então, isso obterá o primeiro elemento que satisfaça uma condição específica. Tudo bem Espero que isso esteja claro. Nós temos alguns aqui. Então, alguns verificarão se pelo menos um elemento passa em um teste específico, certo? Então é isso que ele verificará. E aqui, eu vou apenas fazer uso disso. Agora, a definição de soma diz que verificará se pelo menos um elemento passa em um teste específico. Agora, esses são testes que você precisa definir como a função aqui. E se o teste for aprovado por pelo menos um elemento na matriz, você obterá um booleano verdadeiro, certo? Então, isso retorna booleano. Então eu posso dizer números aqui, ponto, e podemos fazer uso da soma aqui. Ok. E eu vou dizer que não. Ok. E a condição que eu quero verificar é um número menor que zero, digamos, por exemplo. Está bem? Então, isso retornará booleano, então eu posso dizer let e tem negativo Ok, então se for negativo, vai me dar uma linha booleana de quedas Eu posso registrar isso e direi que tem negativo. Se eu salvar isso, você verá quedas. Portanto, essa matriz não tem nenhum tipo de número negativo. Ok. Na verdade, você pode substituir isso para obter uma matriz de números negativos. Então você pode dizer menos um, dois, três, opa, três, quatro e assim por diante, certo Então, isso tem números negativos, certo? Estou cumprimentando uma variedade em tempo real. Se eu salvar isso, você obterá a saída TruSC. Portanto, faz sentido saber como isso pode ser usado para verificar se pelo menos um elemento passa no teste. Agora, isso é útil em cenários Se você quiser executar uma verificação rápida na matriz e obter um booleano, sim ou não, e com base nesse booleano, sim ou não, talvez queira fazer algo no aplicativo Está bem? Então é aí que é útil aqui. Ok. Cada. Agora, tudo é apenas evosão de soma Portanto, alguns verificarão se pelo menos um elemento passa no teste, mas todos verificarão se todos os elementos passaram no teste. Então, eu posso realmente duplicar isso aqui, e eu posso dizer, tem ou vou dizer tudo, tudo bem E vou imprimir isso aqui em todos os lugares. E em vez de uma soma, eu vou ter todos. Então, cada elemento é menor que zero? A saída é falsa? Não, porque um elemento é cada elemento, na verdade. Então, a condição é se cada elemento é menor que zero? Então isso é falso. Desculpe, fiquei um pouco confuso. Então, como temos três elementos que não são menores que zero, um é menor que zero, certo? Então, isso está absolutamente bem. Agora, se eu remover o negativo disso, ok, você verá que a cedência cede aqui E isso porque nem todos os elementos são menores que zero. Então, para ser verdade aqui, terei que tornar todas elas negativas. E se eu salvar, você vai se tornar verdade porque agora todos os elementos são negativos aqui, ok? Assim, você pode executar esse tipo de verificação com a ajuda de cada um. Você tem concat. Tudo bem Então isso é outra coisa interessante, ok? Se você quiser combinar duas matrizes em uma, você pode fazer uso disso Então, digamos que eu tenha mais números aqui. Ok. Mais números são seis, sete e oito aqui, certo? Então, o que eu posso fazer é dizer números ou deixe-me dizer ok, números, eu vou dizer números com pontos concat aqui e eu posso dizer mais números, certo? E eu posso atribuir isso a uma nova matriz, certo? Então, posso dizer let new array, algo assim. Vou imprimir em uma nova matriz. Ok. Vou dizer que o log do console está aqui e vou dizer um novo array. Vou guardar isso e você pode ver, um, dois, três, quatro, cinco, seis, 79. Tudo bem Eu também posso adicionar oito aqui. Não sei por que perdi isso. Então, sim, você tem isso, certo? Então, sim, isso é concat. Ele se conectará a matrizes, fatiará. Então, slice retornará uma parte de uma matriz, tudo bem. Deixe-me mostrar isso para você. Então, posso dizer que vamos deixar as fatias dormentes aqui. Ok. E eu posso dizer números aqui. Uh, números, totais, fatias, e posso especificar aqui que quero que o índice inicial do Índice um indexe três partes da matriz Ok. Agora eu posso registrá-los, registrá-los aqui para que eu possa dizer slice numb. Você pode ver dois e três. Está bem? Então, dois e três aqui. Então você está apenas cortando a matriz. Ok. Emenda agora, o que é fatiar Isso ajudará você a remover ou substituir os elementos. Ok. Agora, como isso funciona? Então, deixe-me mostrar isso para você. Então, digamos que eu tenha ARE de frutas. Tudo bem, então deixe-me rolar para baixo. Então, posso dizer que deixe as frutas aqui. Ok, eu posso dizer maçã. Eu posso comer opa, eu posso comer banana Ok, e eu quero, digamos, laranja. Ok. Ok. Isso está feito. E digamos que eu queira, eu quero remover a banana e adicionar manga Então eu vou dizer frutas, tot, splice. Ok. Eu vou dizer em um índice. Está bem? Então, estou especificando em um índice, exclua um Ok. Você pode ver a contagem de exclusões. Então, iniciando um índice, exclua um elemento e adicione manga Algo parecido com isso. Está bem? E então se você imprimir em frutas, verá a saída como maçã, manga e laranja, você pode ver Então, sim, é assim que funciona. Participe. Agora, o que significa unir-se? Então, às vezes, haverá um requisito em que você deseja unir e obter todos os elementos de uma matriz em uma string Então você pode absolutamente fazer isso. Então, posso dizer que deixe todas as frutas. Ok, eu posso dizer frutas que se juntam e como eu quero participar? Então, esse é um separador que eu quero adicionar aqui. Ok. Então, vou adicionar uma vírgula Quero que todos os nomes das frutas sejam separados, e posso dizer todas as frutas aqui. Você pode ver maçã, manga, laranja. Agora, o que quer que eu adicione aqui, se eu adicionar exclamação, você verá a exclamação sendo adicionada para todos os elementos Então eu vou ficar em coma porque isso é o que parece natural aqui, certo? Reverter. Agora, o inverso é bem simples, muito direto Você pode obter o reverso de um número com a ajuda desse método. Então, eu posso dizer números com pontos invertidos. Algo parecido com isso. Ok. E aqui, eu posso dizer log de pontos do console, e eu posso dizer número reverso. Você receberá 54321. Tudo bem? Em resumo, é claro, como o nome diz, também é muito fácil de identificar e entender. Está bem? Você pode classificar os elementos em uma matriz, certo? Então você pode dizer classifique. E você pode dizer números aqui, T, classificar. Ok. E você pode realmente especificar aqui. Então, vou acabar com isso aqui. Ok. Não adicionarei nenhuma lógica, depois adicionaremos a lógica e veremos quais são os problemas que estamos resolvendo. Está bem? Então, se você usar o tipo dessa maneira. Está bem? Na verdade, a função que criamos já está ordenada, certo? Então, deixe-me atualizar os números aqui. Ok. Então, vou atualizar os números. Vou dizer três, um, e vou adicionar dez aqui e dois, por exemplo. Ok. E eu vou ver isso. Agora você verá que, na verdade, não está classificado na ordem crescente Está bem? Agora, isso ocorre porque, por padrão, é uma string. Então, essa comparação porque o que está acontecendo é que a comparação está acontecendo na forma de string. Portanto, os números não são classificados da maneira correta. Agora, para classificar isso da maneira correta, o que podemos fazer aqui é adicionar dois argumentos, usando as funções de seta, para que eu possa dizer A e B aqui, e usarei dois argumentos, e direi A menos B aqui Ok, por aqui. E se eu salvar isso, você verá um, dois, três e dez. Então, está resolvido aqui agora. Mas que mágica essa lógica fez com essa coisa de classificação aqui? Está bem? E como isso funcionou? Tudo bem Então, o que aconteceu é A e B são os dois elementos das matrizes que serão comparados a qualquer momento, certo? E essa comparação será feita pelo método de classificação aqui. Ok. Então, esses dois argumentos são passados primeiro. Ok, dois argumentos são passados nesses parâmetros. E então o que aconteceu é que A menos B é calculado. Agora, se A menos B, agora vamos dizer se isso está funcionando em três e um, certo? A é três e um é B. Ok? Agora, A menos B é dois. O número é positivo. Certo? Então, B será classificado antes de A porque se o número for positivo, significa que B é menor que A. Então B virá primeiro. Se o número for negativo, o que acontecerá se A for movido antes de B, nesse caso, certo? E se o retorno for zero aqui, os dois serão considerados iguais e serão tratados igualmente. Ok, então isso é tratado pelo SOT aqui. Você só precisa passar isso porque, com a ajuda do sinal de menos aqui, eles são tratados como números e não como sequências de caracteres Tudo bem Então é assim que a classificação funcionará quando você estiver usando o SOT aqui. Tudo bem Então, isso é sobre as funções ou, devo dizer métodos em JavaScript com relação às matrizes, certo? E é assim que você pode usá-lo. Então você pode ver como começamos inicialmente. Começamos com o básico, por exemplo, como você pode passar uma referência de função aqui para o método map E então convertemos isso em anônimo, e então convertemos esse anônimo em mapa aqui. Desculpe, não é mapa, funções de seta, devo dizer, certo? E então vimos todas as funções, todos os métodos que existem com matrizes, certo? Então você pode ver ordenar, reverter. Tudo isso é útil em algum momento quando você está programando e trabalhando com matrizes para economizar tempo e também muito código, tornando seu código muito mais legível, tornando seu código muito mais legível, mas ajudando você a fazer as coisas de uma forma muito mais concisa e legível. Tudo bem Então, espero que você tenha conseguido seguir este guia passo a passo, e espero que tenha sido muito útil. 9. Projeto em destaque: crie seu próprio conversor de unidades: Tudo bem, então como vocês estão? Então é hora de construirmos um conversor de unidades que fará cada trabalho de conversão de um valor em unidades diferentes Então, ele vai se converter de uma unidade para outra. Se, por exemplo, eu inserir 100 aqui ou me deixar 110. E digamos que eu queira converter de metros para pés, eu posso converter isso, e você pode ver que 110 metros são essa quantidade de feeds Agora, posso dizer 150 aqui. Eu posso fazer com que isso seja convertido de quilogramas para libras. Você pode ver que agora está em libras, e eu posso até mesmo convertê-lo de Selsius para Fahrenheit Então você pode ver que um 50 Celsius é 302 Fahrenheit. Portanto, este é um conversor de unidades simples e também uma interface bem simples, nada muito sofisticado ou chassi Tudo bem Então, vamos construir isso. Então, aqui estou rapidamente no código VS, e temos esse arquivo HTML, o arquivo CSS e o arquivo JS de índice dentro de uma pasta. Todos esses três arquivos existem na mesma pasta. Eu tenho esse código HTML aqui e vou começar a modificá-lo aqui O título desta página específica será conversor de unidades aqui. Vou me livrar disso e terei o mesmo texto do conversor de unidades aqui que a tag H one. Tudo bem Agora, o que eu preciso aqui é a primeira coisa, eu preciso de uma entrada. Tudo bem. Então, vou dizer entrada de onde vou inserir o valor que desejo converter. Essa entrada será um número aqui. O tipo é número. ID é o valor de entrada porque eu preciso referenciá-lo do JavaScript para que eu possa obter os valores de entrada que o usuário inseriu. Preciso ter uma identificação aqui. Vou ter um espaço reservado chamado Inserir valor. Opa, algo assim, certo? E eu vou fechar isso. Então, a entrada está pronta. Agora, o que eu preciso fazer é ter oito menus suspensos e, para isso, vou usar a seleção aqui e vou ver o ID como tipo de conversão aqui. Então, que tipo de conversão eu desejo fazer. Dentro disso, eu vou ter a opção Ok. Agora, a opção é caber medidores aqui. O valor, então eu vou ter valor aqui. O valor é M a FT, certo? Então, eu vou ter valores individuais para isso, que eu posso usar. Então, aqui vou dizer metros a pés. Isso vai ser de quilogramas a libras quilo gramas a Ok, isso vai ser KG para LP. Tudo bem. E, uh, então isso vai ser C Celsius. OK. O que quero dizer é Celsius a Fahren de altura Algo parecido com isso. Está bem? Opa. Então, sim, eu corrigi a ortografia, e sim, isso é o que é Então, será de C a F aqui. OK. Isso está feito. Temos esse conversor de unidades, a caixa de texto e essa lista suspensa aqui que você pode ver para seleção de Agora, uma vez feito isso, após seleção e tudo pronto, eu preciso de um padrão aqui, certo? Então, posso dizer que o ID do padrão é converter. Está bem? Esse será o ID. E eu posso ter um texto chamado Converter aqui. Está bem? Então esse é um botão que está sendo exibido. E depois disso, preciso exibir também o valor convertido. Então, eu vou ter uma tag P, que vai dizer, opa, eu vou ter, então eu não preciso de ID aqui, mas posso simplesmente dizer convertê-la valor é o. Vou exibir o valor dentro de um intervalo aqui. Está bem? E eu terei zero inicialmente, e posso ter o ID convertido. Valor, algo assim. OK. Então isso é feito, você pode ver, o valor convertido é zero. Tudo bem. Então é isso no HTML. OK. Não há muita coisa que faremos no HTML. Apenas certifique-se de ter o arquivo Ja Script vinculado desta forma e você também pode ter o arquivo CSS vinculado aqui. Então, eu vou ter apenas o link para CSS, e eu vou fazer isso na parte superior OK. Então, dentro da cabeça, eu vou ter um link aqui. Bem, eu vou dizer folha de estilo. OK. E eu vou dizer href, styles dot css Tudo bem Isso está feito. Ok, sim, é isso. Então, isso é da parte HTML. Agora, vamos para a parte do Jascript e vamos ver como você pode criar um conversor JUnit usando JavaScript e adicionar um pouco de vida a esta página da web Esta página da web está bastante estática no momento. Nada aconteceria se você acabasse com os valores NC convertesse, certo? Porque não há vida. Então, quem vai acrescentar vida? Jascript, é claro Agora, a primeira coisa que preciso aqui são funções diferentes, certo? Então, essas conversões que eu vou fazer, eu preciso ter uma maneira de fazer essas conversões E o que eu posso fazer é que para cada conversão que eu quiser fazer, eu vou ter uma função criada, certo? Então, a primeira conversão que estou tendo aqui é de metros para pés, depois tenho quilogramas para libras, Celsius para Eu tenho três funções, certo, e preciso ter um ouvinte aqui que escute o clique do botão Converter Então isso é algo que precisamos fazer. Tudo bem. Então, eu não vou ter apenas funções normais. Claro, você pode fazer funções normais, mas eu vou ter um objeto, e vou chamá-lo de conversor de unidades, e vou criar os métodos dentro desse objeto, certo? Então eu vou dizer M a F T, não? E eu vou dizer que funciona aqui. OK. E vou me livrar disso aqui, o parâmetro será então, se for metros a pés, então o parâmetro dos parâmetros estará em metros, certo? E eu posso dizer que volte. Eu posso dizer metros de profundidade. E como você converteria um metro em pés? Então você precisa multiplicar um metro por 28084, certo? Então essa é a fórmula padrão. Não há nada chique por aqui. Está bem? Então, sim, isso está feito. Estou entendendo que estou recebendo uma nota de erro correta, é porque perdi uma nota igual a aqui. OK. Então, isso está feito. Este é o primeiro método que eu tenho M, que é de metros a pés. Eu vou ter KG para B aqui. Está bem? Essa será outra função aqui, e ela aceitará quilogramas porque estamos convertendo quilogramas em libras, certo Então, eu vou dizer, volte. Eu vou dizer quilogramas em. E vamos multiplicar esse valor por 2,2 0462. Então, este é o multiplicador padrão. Se você quiser converter quilogramas em libras, basta pesquisar no Google como converter quilogramas libras e você encontrará qualquer número de fórmulas Estou usando esta. Está bem? Então este é um multiplicador que você tem C F. Então isso é de Celsius a Fahrenheit Então isso é de Celsius Vou adicionar uma função. Eu vou dizer Celsius, algo assim, e então aqui, eu vou dizer voltar Existe uma fórmula para converter Celsius em Fahrenit. Vou forçar a multiplicação por nove por cinco aqui e vou dizer mais 32, algo assim OK. Então, essas são todas as funções, devo dizer. Portanto, criamos métodos dentro do objeto e, é claro, você pode ter esses métodos criados externamente, bem como funções. Por que eu criei dentro do objeto é para fins de agrupamento lógico Agora, sempre que você tiver um programa de script de jaw, você pode criar objetos para fins de agrupamento, certo Então, aqui estou agrupando esses métodos, certo? Então, isso está feito. Então, vou começar a definir o ouvinte aqui, então vou dizer documento aqui Opa. Isso foi convertido em documento. OK. Vou dizer ponto e obter elemento por ID aqui. Ok, e eu vou dizer converter. Por que converter? Porque esse é o ID que definimos aqui no botão HTML for, certo? Então é a isso que precisamos nos referir se você estiver se referindo ao botão aqui e eu direi “clique aqui”. Está bem? Então, ao clicar nisso, precisamos usar as funções de seta, e eu terei a lógica do que acontece ao clicar. Está bem? Agora, a lógica pode ser tão simples quanto exibir um alerta. Está bem? Se eu salvar isso e disser converter, ok? Não há nenhuma caixa de alerta sendo exibida. Portanto, não está funcionando porque aqui, o C para clicar não pode ser maiúsculo. Tem que ser pequeno. É uma palavra pequena. Está bem? Tudo é pequeno com um clique. Agora, se eu mudar isso, funcionará. Você pode ver. Agora, precisamos ter a lógica aqui. Está bem? Então, isso está sendo acionado com o clique do botão. OK. Então, qual é a lógica? Como definiremos a lógica? Então, a primeira coisa é que precisamos ver qual opção é selecionada a partir disso. OK. Então, fora dessa lista suspensa, qual opção está selecionada, Então, quando também tivermos isso, precisamos obter o valor do texto de entrada aqui porque esse é um valor que vamos converter. Portanto, o valor do texto de entrada e a opção do menu suspenso. Essas duas coisas que precisamos trazer para cá. OK. Então, eu vou dizer deixe o valor de entrada aqui, e eu posso dizer ponto do documento. Eu posso dizer get element by ID aqui. OK. E eu vou dizer valor de entrada. OK. O que é valor de entrada? O valor de entrada é o ID que você atribuiu aqui. É isso que estamos recebendo aqui. Está bem? Isso está feito, e vamos dizer o valor do ponto aqui. OK. Nós temos isso aqui. Agora, isso estaria em string por padrão, certo? Você precisa fazer uso disso para o cálculo, certo? Porque você passará esse valor para essa função. Então, o que podemos fazer é fazer uma conversão explícita aqui Podemos dizer pass float e opa, você pode vir aqui e aqui, você pode fazer isso, algo assim, certo Portanto, temos um valor flutuante de qualquer usuário inserido no TextFX Tudo bem, isso está feito. Agora eu posso dizer que deixe a conversão. Digite aqui. Qual é o tipo de conversão? Que tipo de conversão você deseja fazer aqui? Então, posso dizer que o ponto do documento obtém o elemento por ID. E vou me referir ao tipo de conversão. OK. Agora, o que eu recomendaria está aqui, você deve copiar. Então aqui você pode ver, esse é o ID. Você pode copiar esse ID e adicioná-lo aqui. Ok, em vez de digitar. Porque se houver um único erro, você não obterá o valor corretamente. E eu posso dizer valor aqui, certo? E aqui, quando tivermos isso, posso exibir isso em alerta. Posso dizer valor de entrada, vírgula, posso dizer tipo Cosion. Algo parecido com isso. Você pode ver NN Eu posso inserir 100. Você está vendo 100 aqui, deixe-me congenar esses dois Então eu posso dizer algo assim. OK. Então, se você adicionar 200, verá 200 e metros em pés, certo? Se eu mudar para quilogramas para libras, você verá KG para LB, certo Porque você está recebendo o valor. Por aqui. Qual é o valor? O valor é algo que você definiu aqui em relação à opção. Cada opção tem um valor e você está se referindo ao valor aqui em HTML. Você pode ver Celsis Fahrenit C F. Então você está obtendo tudo perfeitamente, mesmo se você inserir, digamos, se eu inserir um valor de ponto flutuante, você obterá esse valor você obterá esse Está bem? Até aí tudo bem, então podemos recuperar o que o usuário está inserindo no que chamamos de formulário aqui, certo? Agora, o que vou fazer é adicionar uma variável aqui. Então, eu posso dizer convertê-lo. Valor. Então, por qual é o valor convertido? Está bem? Então, posso dizer valor convertido. Ok, e o valor convertido é igual a, então eu posso usar o tipo de conversão aqui. Agora, terei uma condição se o tipo de conversão for igual a M dois FT. Está bem? Se o tipo de conversão for igual a M para FT, direi conversor de unidades para FT porque essa é uma função ou o nome do método, devo dizer, passarei o valor de entrada. OK. Caso contrário, o que eu faria está aqui. Ok, caso contrário, eu teria outro cheque aqui. Eu direi que o tipo de conversão é igual a. Eu vou dizer KG para LP. Apenas certifique-se de ter essas palavras-chave corretamente. Se quiser, você pode copiá-lo do arquivo HTML. Mas qualquer tipo de erro de digitação errará a condição. Está bem? Então você pode dizer tag do conversor de unidade, você pode dizer KG para LB aqui e você pode passar o valor de entrada Algo parecido com isso. Isso está feito. Vou mandar meu cólon aqui. Agora, aqui, se ambos forem falsos, se não houver correspondência para ambos, farei com que o conversor de unidades C F porque isso é o que resta, certo? Portanto, ele deve ser selecionado de forma distinta. Então essa fórmula está pronta. Essa condição está concluída. O que estamos fazendo aqui é verificar aqui se o tipo de conversão é de metros para caber. Se isso for verdade, com a ajuda do operador ternário, estamos fazendo essa chamada aqui, essa chamada de método Se isso não for verdade, então teremos outro operador ternário aqui Que está aninhado. Então, estamos recebendo outro cheque. Se isso for verdade, se isso for verdade, então isso é executado, caso contrário, isso é executado porque isso é o que resta, certo? Então tem que ser qualquer um desses três, certo? Agora, aqui, o que vou fazer é dizer documento, ponto, obter elemento por ID e, aqui, vou dizer valor convertido. Está bem? Por que converter o valor? Porque temos esse ID para span. Então, vamos obter esse valor convertido. Está bem? Eu vou dizer conteúdo de texto com pontos. Algo parecido com isso. Eu vou dizer valor convertido aqui. Está bem? Porque essa é uma variável que está tendo esse valor criado, certo? Então isso está feito. Agora, o que posso fazer é salvar isso e deixar que testemos isso. Então, se eu disser 100 metros a pés, converta, você pode ver. Há a saída de quilogramas em libras. Aí está a saída. Se você tem Celsius a Fahrenheit, aí está a saída. Você pode ver. Agora, uma melhoria que você pode fazer é que haja três decimais ou haverá número de decimais porque não há restrição Então você pode adicionar tot a fix aqui e você pode dizer aqui, algo assim Então, agora ele será fixado com duas casas decimais aqui, 220,46 Está bem? Algo assim, aqui. Tudo bem Então, sim, é assim que você pode criar uma moeda ou, desculpe, não uma moeda. Este conversor de unidades. Me desculpe Tudo bem. Você pode ter alguma validação aqui para dizer se isso não é igual a não um número. Ok. Desculpe, é AN. Então eu preciso passar o valor de entrada aqui, e então você executaria isso, o. Então você executaria isso, você moveria essa frase final no final para aqui , algo assim. Ok. E vou adicionar algo assim aqui. Ok, isso está feito. E se essa condição falhar, você poderá exibir um alerta. Ok, insira um número válido. Então, uma pequena validação aqui, verificação de validação que garantirá que qualquer usuário esteja inserindo aqui seja um número válido. Está bem? É isso que essa verificação fará. Ok. Então, digamos que se eu inserir 100 aqui, funcionará bem. Mas se eu inserir 100 ou qualquer outra coisa aqui, não consigo digitar nada aqui porque esse tipo é um número. Mas ainda assim eu adicionei esse cheque aqui. Se por acaso, isso não for um número, é uma condição Nian, então ele retorna um valor booleano que indica se o valor é um valor reservado Nian, não um Se for um, isso não é igual a, então, se essa condição for verdadeira, somente isso será executado, caso contrário, você receberá um erro. Por aqui, que é um alerta. Tudo bem. Então, isso foi feito até agora. Agora, vamos mudar para os estilos aqui. Adicionaremos um estilo básico e faremos com que pareça decente aqui Ok. Então, vou começar com Body aqui. Imediatamente, vou dizer família de fontes. Vou selecionar Sinef aqui. Ok. Algo parecido com isso. E então eu tenho o texto alinhado aqui. Eu vou dizer centro. Eu vou dizer margem, a margem será zero. Deixe-me ver se é isso. Você pode ver que tudo está centralizado agora. A margem também é preenchimento zero, vou dizer 20 pixels aqui Eu vou dizer que a cor de fundo é que eu posso ter esse azul Alice. Você pode selecionar o que quiser, ok? Eu tenho um pouco de tema azulado. Se você quiser branco, você pode selecionar fumaça branca. Depende totalmente da sua escolha, certo. Você pode selecionar o que quiser aqui. Ok. Isso está feito. Vou adicionar um espaço. Agora, depois do corpo, eu vou para H one. H one é onde estamos exibindo essa unidade, convertendo um título aqui. Então eu vou dizer cor, e eu posso ter preto. Eu deveria ter preto aqui. Vou ficar com o preto. Você pode personalizar isso se quiser, tudo bem. Agora, para entrada, insira onde o tipo de tipo é número, ok. Então, tudo bem e vou adicionar uma vírgula para selecionar aqui Ok. Para ambos, tipo, eu preciso adicionar, digamos, preenchimento Ok. Portanto, não há acolchoamento. Então, se você digitar 100 aqui, não há preenchimento, então eu vou dizer preenchimento, dois pontos Ok. Você pode ver uma quantidade razoável de preenchimento, você pode adicionar margem aqui Ok, margem de dez pixels. Ok, você pode ver um pouco de espaçamento lá agora. OK. E você pode dizer fronteira aqui. Portanto, a borda é de um pixel, sólida, e posso dizer hTd. Então, esse código de cores que eu uso para borda, você pode ver, está esmaecido, mais ou menos Ok. E eu posso dizer raio de fronteira Então, vou dar uma sensação redonda. Ok, então vou adicionar apenas cinco pixels. Portanto, as bordas serão arredondadas agora um pouco, ligeiramente arredondadas em cinco pixels. Desculpe, ligeiramente arredondado em cinco pixels aqui. Me desculpe. Ok, isso está feito. A largura, vou acrescentar. As larguras podem ser de 200 pixels aqui Ok. Então está feito para os dois, ok? Para botão. Ok, o botão parece cru agora. Então, deixe-me fazer algo para o botão aqui. Opa. Para botão, vou dizer preenchimento primeiro, preenchimento de, vou dizer dez pixels e 20 pixels. OK. Então eu posso ter argolas de cor de fundo. Portanto, isso precisa ser ponto e vírgula, cor de fundo. Ok. A cor de fundo pode ser, eu diria azul. Vou ver se isso é azul, mas as bordas parecem ruins. Ok, eu deveria dizer. Talvez eu tenha Border como freira. Veja se sim. Boda é freira Posso dizer que a cor é branca. Branco onde é branco aqui, você pode ver a conversão de branco. Você pode ter raio de borda, raio de borda, posso dizer fi pixel porque eu dei isso para os outros elementos Ok. Agora, claro, se você passar o mouse sobre isso, eu quero que isso mude, então eu posso dizer ponteiro do cursor Agora, se eu for até aqui, você pode ver cursor girando em direção ao ponteiro Ok. Isso está feito. Também posso adicionar um efeito de foco Então, botão, dois pontos, eu posso dizer *** e posso dizer cor de fundo E eu posso ter azul escuro. Então, se você passar o mouse sobre isso, verá azul escuro. Uma espécie de efeito, certo. Agora isso está feito, e podemos ter um estilo e para a exibição, que é para a tag P. Isso pode ser o tamanho da fonte. Vou apenas aumentar o tamanho da fonte para 18. Vou apenas alterá-lo para 18 e terei uma margem de, digamos, dez pixels. Se você salvar isso, você tem isso. Ok. Agora, eu ampliei um pouco. Está bem? Então, eu ampliei um pouco. Você pode ver aqui para que os alunos possam ver corretamente, mas você pode ver o resultado aqui. Ok, então está parecendo bem decente agora. Também abri o aplicativo no modo de tela cheia, para que você tenha uma visão melhor. Ok, 2.200 e você pode ver as conversões aqui, certo? Então, isso vai funcionar bem. Está bem? Parece muito decente. Você pode personalizar o CSS com base em sua necessidade. Você pode alterar a cor dependendo das suas preferências de cor. Tudo bem? Então, isso é sobre a unidade Coto usando o jaw Script Espero que tenha sido super divertido. 10. Apresentação de projetos: crie um aplicativo de lista de afazeres dinâmico com JavaScript: Tudo bem, então é hora de falarmos sobre como fazer aplicação de listas usando JAScript, HTML e Então, aqui você pode ver esse aplicativo que vamos criar, e você pode ver que há um a ser feito já adicionado às funções do Learn Ja Script. Tudo bem. Posso adicionar mais tarefas a partir desta caixa de entrada aqui. Eu posso dizer, aprenda Spring Boot, e eu posso dizer adicionar tarefa. Eu posso levar mantimentos. OK. Algo parecido com isso. E você pode adicionar as tarefas. Você pode furá-los e marcá-los como concluídos. Tudo bem, então esse é um aplicativo simples que vamos criar. Vamos fazer uso de JavaScript, HTML e CSS. Tudo bem? Animado, vamos começar imediatamente. Então, aqui estou eu no código do Visual Studio, que é o editor que vou usar. Eu também tenho esse navegador aberto na lateral com o Live Server. Eu tenho três arquivos: ponto de índice aberto, estilo HTML , ponto css e ponto de índice Gs. Agora, antes de prosseguir, certifique-se de que esses três arquivos residam na mesma pasta. Tudo bem Agora vou começar com o arquivo HTML. Primeiro, vou adicionar uma exclamação. Opa. Na verdade, estou em um arquivo JavaScript, então vou abordar o arquivo HTML. Vou adicionar uma exclamação e obterei um código padronizado Tudo bem. Então, aqui, eu posso dar o título do documento para fazer a aplicação da lista, ok? Algo parecido com isso. Tudo bem E você pode até mesmo ter uma tag E H aqui como título. Está bem? Então eu posso dizer H um. E você pode pedir para listar aqui. Ok, algo assim. Tudo bem Agora, vamos precisar de duas coisas aqui. Um é entrada e outro é ePaton, ok? Então, primeiro criarei um div e terei uma entrada aqui como esta Vou chamar isso de opa, desculpe, digite como texto aqui. OK. ID é o ID da entrada da tarefa. Preciso atribuir seu ID porque vou me referir a esse elemento diretamente do script Ja para que eu possa obter o que o usuário realmente inseriu aqui. Eu vou dizer insira sua tarefa, algo assim. Tudo bem Agora, na próxima linha após a entrada, vou ter um botão aqui, certo? Então, o botão dirá ID, e eu chamarei isso de adicionar tarefa aqui, algo assim. E então isso será adicionar tarefa, algo como Ok. Isso está feito, e então eu acho que estamos todos bem aqui. OK. Deixe-me ver. Não estamos vendo nenhum tipo de saída aqui. Então eu vejo a saída agora após a atualização, tudo bem. E sim, então essa é a entrada e o botão, vamos manter o HTML muito simples. Ok, eu tenho um botão de entrada e vou criar uma lista não ordenada aqui, que será usada para renderizar a lista de tarefas. OK. Então, vou chamar isso de lista de tarefas, algo assim. Está bem? Aqui, script sob a tag script, vou ter SRC, e vou chamá-lo porque vou vinculá-lo ao Índice Gs aqui E no topo, eu posso ter uma folha de estilo aqui, então eu posso dizer link, RL, eu vou dizer folha de estilo OK. E eu vou fechar isso. Também mencionarei a tag F e direi estilos de pontos CSS. Até agora, tudo bem. Ok, então o HTML está pronto. Nós mantivemos tudo muito, muito simples. Você pode ver, este é o contêiner aqui, que contém o tipo de entrada e o botão. Está bem? Posso atribuir a isso um ID aqui para que possamos usá-lo posteriormente para estilizar Posso dizer contêiner de tarefas aqui. OK. Então, esse é o conteúdo da tarefa aqui, onde eu tenho a entrada e o botão É aqui que toda a ação acontece. E então eu tenho uma lista não ordenada onde estou exibindo a lista de itens ou a lista de tarefas Isso está feito. Agora vou passar para o Index GS. Está bem? Este é um arquivo JavaScript qual escreveremos um código que nos ajudará a dar vida a esse HTML. Ok, então isso literalmente não faz nada a partir de agora, certo? Então, a primeira coisa que precisaremos é uma maneira de armazenar e gerenciar nossa lista de tarefas, certo? E também precisaremos de uma maneira, essencialmente, de ouvir esse evento. Portanto, sempre que o usuário clica em uma tarefa, precisamos garantir que a tarefa seja adicionada ao aplicativo Depois que a tarefa for adicionada ao aplicativo, também teremos que renderizá-la. OK. Então, coisas como renderização, adição de tarefas, ok, marcar a tarefa como concluída, tudo isso será gerenciado dentro do próprio aplicativo Então, o que faremos é ter um objeto, ok? Então, vou começar criando um objeto. Vou dizer para fazer o aplicativo aqui. Ok. E é assim que eu vou criá-lo. Agora, aqui, eu vou ter uma matriz, porque o aplicativo pode ter várias tarefas, certo? Então, eu vou ter uma matriz, que será usada para armazenar tarefas aqui. Agora, vou ter alguns métodos aqui. Um está na tarefa, ok? Então esse é o primeiro método aqui. OK. Então eu vou ter outro método, que é alternar tarefa Isso será usado para alternar. Então, se você disser que esta tarefa está concluída, se você clicar na tarefa, ela será marcada como concluída. Se você clicar novamente, clique nele, ele será marcado como não dez. Está bem? Então, é basicamente alternar aqui E aqui, essa função ou esse método aceitará o índice aqui. Isso está feito. Vou ter que remover as tarefas concluídas, ok? Então, isso também é o que podemos ter , então, posso dizer que remova as tarefas concluídas. OK. E, uh, eu vou comer isso. OK. Então isso vai nos ajudar a remover as tarefas concluídas, ok? E eu vou ter um método para renderizar tarefas aqui Está bem? Então eu vou dizer tarefas de renderização, algo assim, e aqui, é assim que vai ser. Tudo bem Então isso está feito. Está bem? É assim que o objeto será. Esse objeto terá o atributo tarefa para armazenar tarefas e todos os métodos basicamente para gerenciar tarefas, certo? Agora, o que eu vou fazer é dizer documento aqui, pensei Opa, documente tudo pensei Opa, documente Vou dizer get element by ID aqui, e vou dizer at task aqui. O que está em jogo? Na tarefa está o botão aqui. Está bem? Você pode ver que isso é um botão. Então, estamos pegando o botão, e no botão, eu vou dizer “ clique aqui”. OK. Vou usar as funções de seta, assim. E aqui, eu vou ter a lógica do que deve acontecer quando um usuário clica na tarefa aqui Ok, no botão, quero dizer, ok? Então, aqui, em primeiro lugar, posso exibir um alerta. Posso apenas testar se esse ouvinte está funcionando bem. Deveria. Então, se eu disser adicione, OK, não está sendo exibido, é porque isso é maiúsculo. Me desculpe por isso. OK. Então aqui você pode ver, oi. Ok, está funcionando bem. Então, isso está sendo acionado com o clique do botão. Até agora, tudo bem. Agora, quais são as tarefas que precisamos fazer com esse ouvinte Em primeiro lugar, precisamos obter o que está inserido nessa tarefa. Como vamos conseguir isso? Obteremos isso a partir dessa entrada. Temos essa entrada de tarefa de identificação, certo? Então, quando tivermos o texto inserido aqui, chamaremos a tarefa e adicionaremos essa tarefa à matriz de tarefas, certo? E então vamos redefinir essa caixa de entrada para uma string vazia porque ela está limpa porque a tarefa foi adicionada, certo? Então, o que vou fazer é deixar a entrada da tarefa aqui. Ok, eu vou dizer ponto do documento, obter elemento por ID. E deixe-me ver a entrada da tarefa aqui. Está bem? Então, vou dizer entrada de tarefas. Certifique-se de ter essa referência de ID. Essa referência de ID deve ser a mesma que você definiu aqui no HTML. Tudo bem Então isso está feito. Isso é cuidar aqui. Ok. Agora, o que eu preciso fazer aqui é, ok, isso está feito. Eu virei até aqui. Vou dizer para fazer o aplicativo ponto na tarefa, e vou dizer entrada da tarefa, ponto, valor. OK. Então, o que estou fazendo é dizer entrada de tarefas. Então esse é o elemento que eu obtive, e eu estou dizendo o valor do ponto. Sim. OK. E então eu preciso redefinir isso aqui, esse campo aqui, certo? Então, vou adicionar uma string vazia, algo assim. Isso vai limpar o campo de entrada, certo? Então, posso dizer teste na tarefa. Você pode ver que está sendo apagado, mas não está sendo adicionado no momento Por quê? Porque essa função ou esse método não tem literalmente nada. É um método vazio. Está bem? definir tudo isso. Ainda não definimos tudo isso. Tudo bem. Então, agora o que vou fazer é começar com o tratamento do ift aqui OK. Se houver uma tarefa, ou eu posso, se você quiser validar, você pode adicionar uma verificação aqui na qual você verifica se a tarefa Ou o que você pode fazer é dizer imediatamente essa tarefa pontual, desculpe, essa tarefa pontual empurre Então, precisamos empurrar ou adicionar essa tarefa específica a essa tarefa aqui. Está bem? E aqui, eu vou dizer uma mensagem de texto, Colin Ok, então essa é a tarefa, e eu direi concluída Está concluído? Eu vou dizer que cai. Está bem? Algo parecido com isso. OK. E uma vez feito isso, preciso chamar render. Então, essa renderização de pontos. Algo parecido com isso. a interface do usuário precisar ser atualizada, certo? Depois que a tarefa for adicionada, a lista da tarefa deve ser atualizada, e é por isso que estou chamando essa renderização de pontos aqui. Ok, isso está feito. Então, basicamente, pergunte se cada tarefa individual nesta matriz tem duas coisas. Uma é a tarefa em si e se a tarefa está marcada como concluída ou não. Até agora, tudo bem. Agora precisamos alternar as Está bem? Então, o que faremos é dizer essas tarefas pontuais. Vou pegar a tarefa do índice aqui porque temos acesso ao índice. Eu direi que o ponto foi concluído. Ok. Então, isso será o inverso de estar concluído ou não. Vou dizer isso como tarefas de ponto, e vou dizer índice aqui, valor de ponto concluído. Estou apenas invertendo esse valor aqui. Portanto, qualquer que seja o valor armazenado no atributo concluído dessa tarefa específica, é revertido e atribuído novamente. Isso é o que está acontecendo. É isso mesmo. Agora, depois de fazer essa alteração, preciso renderizar a interface, certo? Então, renderize a interface do usuário aqui. Eu vou dizer essas tarefas de renderização de pontos. Algo parecido com isso. Isso está feito. Preciso remover as tarefas concluídas. Ok. Então, o que eu faria é dizer, para que possamos usar o filtro aqui, certo? Então você pode dizer isso para tarefas aqui. Está bem? E você pode dizer isso pontuar tarefas, filtrar aqui, e eu vou dizer tarefa aqui, usar a função de seta, e eu direi se a tarefa foi concluída. Algo parecido com isso. OK. Então, qualquer tarefa concluída será removida e eu direi essas tarefas de renderização de pontos, algo assim Ok. Agora, como você renderizaria a tarefa, certo? Então, para isso, o que faremos é renderizar a tarefa aqui na lista de tarefas, certo? Então, o que eu faria é simplesmente copiar isso para economizar tempo. OK. E aqui, vou dizer lista de tarefas. OK. E o ID aqui é a lista de tarefas, certo? Então, vou adicionar uma lista de tarefas aqui. OK. A lista de tarefas foi adicionada. Agora, o que precisamos fazer é OK. Então, aqui, vou realmente limpar a lista atual. Está bem? Primeiro, primeiro, precisamos limpar a lista atual. Vou te dizer por que estou fazendo isso, ok? Ficará claro para você em pouco tempo. O HTML é igual. Então, estou limpando a lista atual primeiro porque estamos renderizando a tarefa novamente, certo? Então, se você não limpar o HTML interno, se você não limpar a lista de tarefas atual, a lista será duplicada, certo? Espero que isso faça sentido. Agora, o que precisamos fazer é dizer que esse ponto faz isso para cada um aqui. OK. E dentro disso, eu vou ter uma função, e eu vou dizer índice de tarefas. Portanto, a tarefa e o índice aqui são algo que será aprovado. OK. E eu vou ter a função de seta. OK. E dentro disso, vou dizer const Li Okay. E eu vou dizer que o ponto do documento obtém o elemento por ID. Desculpe, não receberei o elemento por ID porque não criamos a LI. Então, dentro da UL, você terá elementos LI, certo? Então, eu vou dizer criar elemento aqui. Eu vou dizer que crie Li aqui. Ok, porque você deseja renderizá-lo como uma lista. E então eu vou dizer conteúdo de texto Litt. E então eu vou dizer o texto do ponto da tarefa aqui. OK. E então eu vou dizer que eu ponto, clique aqui. Ok, também precisamos adicionar um clique à lista aqui porque, ao clicar nisso, a captura de tarefas alterna, então eu vou dizer essa tarefa de alternância de pontos, e vou passar o índice do Isso está feito. OK. Agora, direi que se a tarefa for concluída, estaremos aqui. Ok. Em seguida, você pode adicionar a lista de classes I'll i dot. Então, estou adicionando a classe aqui. Ok, não adicione. Eu direi concluído. Estou adicionando uma classe a esse elemento HTML se a tarefa estiver marcada como concluída. Está bem? Então, aqui você está adicionando uma classe como classe ID aqui para CSS. Isso é o que estou adicionando aqui do Javascript. Então você pode dizer lista de classes de pontos do elemento. Você está adicionando isso à lista de turmas, concluído. E então podemos usar CSS contra isso. Isso está fazendo sentido. E então aqui, você pode dizer lista de tarefas aqui, carregada e criança Algo parecido com isso. Vou acrescentar isso à interface do usuário. OK. Vamos testar isso. Eu vou dizer teste. Você pode ver que o teste está sendo renderizado em 100. Isso também está sendo renderizado. OK. Então, isso está sendo renderizado duas vezes aqui. Aí está, isso foi renderizado duas vezes. Então, há um problema. Está bem? Portanto, o problema é que o HTML não está sendo esclarecido aqui Está bem? Então, espero que você entenda a importância dessa declaração aqui agora. Na verdade, isso não está funcionando. E você pode ver a lista inteira está sendo renderizada novamente. Então, se eu adicionar 200 aqui, você pode ver o teste, 100, 200. Está renderizando tudo novamente. Ok, sempre que você estiver adicionando a tarefa. Portanto, não será isso.in HTML. Serão tarefas com pontos HTML. Se eu salvar isso, posso dizer teste. É um teste adicionado. Se eu ver 100, ele adicionará 100. Você pode ver que está funcionando bem agora. Tudo bem Agora, as tarefas também estão sendo marcadas como concluídas, mas você terá que lidar com a conclusão em CSS porque há uma classe que está sendo adicionada, então aqui. Se você der uma olhada na aula, ok, deixe-me te mostrar. Então aqui você está vendo o Li aqui. É 100, certo? Na verdade, clique nesses 100. OK. A classe ainda não está sendo adicionada aqui. Está bem? Ele deve ser adicionado. Então, na verdade, ao clicar aqui, complete deve ser adicionado dinamicamente como um nome de classe aqui Mas isso não está acontecendo. Vamos ver qual é o problema. clicar, vemos que alternar tarefas e, para cada tarefa concluída, e, para cada tarefa concluída a lista de classes deve ser Está tudo bem. Ok, aqui, eu vejo que isso é maiúsculo C. Isso não está certo. Isso deve ser pequeno. Ok. Agora vamos ver o que acontece. Então aqui não há nenhuma tarefa aqui. Deixe-me adicionar uma tarefa. Vou adicionar o teste. OK. Eu tenho uma tarefa. Se eu clicar nele, você pode ver que a aula foi concluída para isso. Você pode ver. Agora, se você adicionar qualquer CSS para a classe concluída, poderá adicionar o CSS de strike through. Portanto, aparecerá como um rascunho, porque você aplicou esse CSS. Você só precisa dizer classe para elementos, concluindo a classe. Ok, você precisa adicionar esse tipo de efeito completo no CSS. Tudo bem, então será gerenciado. Está bem? Então a inscrição está quase pronta, ok? Terminamos o aplicativo. Você pode ver que tudo está sendo feito. Toda a funcionalidade está funcionando bem. OK. Agora vamos passar para o CSS e adicionar alguns estilos básicos ao nosso aplicativo Tudo bem Agora vamos começar com a etiqueta corporal aqui. Está bem? Claro, família de fontes, e veremos Ariel Helveta, Albatica Se estiver tudo bem, ok, texto ou linha. Eu vou dizer Cena aqui. Vou adicionar Opa, não a resolução máxima, mas a margem aqui Eu vou dizer zero. OK. E deixe-me adicionar preenchimento. Eu vou dizer 20 pixels. OK. Deixe-me ver o que acontece. Ok, um pouco de mudança. Ah, você pode adicionar a cor de fundo ou o que quiser. Vou acrescentar que é azul. OK. Parece um pouco azulado. Se você quiser outra coisa , por exemplo, aqui. Veja. Branco tão antigo. Você também pode adicionar isso. Ok. Dependendo da sua escolha, o que você quiser. Ou a tela, vou manter a tela flexionada aqui. OK. A direção flexível é, digamos, coluna OK. E depois alinhe os itens, direi ao centro. Vou guardar isso. OK. Isso está feito. Cada um. OK. Então, a cada um, vou atribuir explicitamente uma cor Vou chamar essa cor de preto. OK. Isso está feito. Tudo bem. Agora, vamos até aqui. Vou ver isso. Se você vier aqui, há esse contêiner de tarefas. Vou pegar esse ID do contêiner de tarefas aqui. OK. Eu vou dizer haxixe É assim que você se refere a qualquer ID de elemento em CSS com a ajuda do hash OK. Vou dizer display flex, e precisamos acrescentar que precisamos justificar o conteúdo. Eu vou dizer centro. OK. Então isso agora vem em uma única linha, como você pode ver aqui. E eu vou dizer margem inferior. OK. E isso será de 15 pixels. OK. Então, na verdade, isso não é uma exibição em tela cheia, mas se você for até a visualização em tela cheia aqui, se eu atualizar, você verá que é assim que está aparecendo agora, e eu posso simplesmente adicionar uma tarefa Você pode ver. Está bem? Então, sim, é assim que está agora, margem inferior. Ok, isso está feito agora. Posso adicionar um pouco de estilo para entrada aqui. OK. Eu direi que o tipo de texto é igual ao texto, algo assim, e vou dizer aqui , preenchendo dez pixels Veja se isso está bem. Eu vou dizer que a largura aqui é de 200 pixels. OK. Eu vou dizer fronteira. Ok, a borda pode ser de um pixel. Ok, não há fronteira agora, você pode ver. OK. Agora, mais uma coisa é que acho que eu também deveria otimizá-lo para um tamanho de tela menor. OK. O que vou fazer é adicionar media query aqui, media and say aqui. Portanto, será a largura máxima. Ok, algo assim, e terá uma largura máxima de 600 pixels. OK. Então, vou adicionar um pouco de estilo aqui para o mesmo, certo? Então, posso dizer hashtag task container. OK. Eu vou dizer direção flexível. Vou dizer coluna aqui para que fique alinhada verticalmente quando basicamente o tamanho da tela for menor Então, a caixa de entrada do botão está alinhada verticalmente porque não estava com boa aparência, então, horizontalmente, basicamente vista lado a lado Então eu acabei de adicionar isso. Portanto, está alinhado horizontalmente aqui, desculpe, alinhado verticalmente quando o tamanho da tela é pequeno, mas horizontalmente assim se o tamanho mas horizontalmente assim Está bem? Portanto, quando o tamanho da tela é pequeno, esse CSS é aplicável. Está bem? Eu posso até adicionar CSS para isso aqui. OK. Então, vou inserir a largura do texto do tipo preenchimento que eu não preciso Vou pular o preenchimento. A largura é 100% aqui. Margem aqui. Então, eu vou dizer que a margem é cinco pixels e zero. Uh, assim. E eu posso dizer UL. Portanto, a lista não ordenada pode ter largura de 90%. Algo parecido com isso. OK. Então isso está feito. Está bem? Isso é para telas pequenas. Eu vou voltar aqui. OK. Então eu estava dizendo pó de um pixel. OK. Eu vou dizer sólido aqui, e eu vou ter essa borda aqui. Isso parece bom, agora, você pode ver. Está parecendo bom. Está bem? Precisamos adicionar mais algumas coisas, como raio. Ok, raio de cinco pixels, por exemplo. Ok, cinco pixels parecem decentes na minha opinião se você salvar isso, certo? E vou adicionar margem, então margem aqui, margem de, digamos, dez pixels. OK. Isso está feito, eu acho. Tudo bem A entrada está concluída. Agora vamos estilizar o botão aqui. Então, como estilizamos o botão. OK. Então, botão, podemos dizer, uh, preenchimento, vou dizer dez pixels e 15 pixels aqui e cor de fundo azul OK. E depois a cor branca. Se você salvar isso, você pode ver. Mas o corpo não está com boa aparência, então a borda não desativará nenhuma. Ok, a fronteira desapareceu. Eu posso ter um raio de fronteira aqui. Ok, F pixel, assim. E então eu posso ter o ponteiro do cursor. Então, no momento, não está se transformando em um ponteiro. Mas se você passar o mouse agora para ver, esse cursor está se tornando um ponteiro OK. E eu posso até adicionar o efeito Colin hov do botão Ok, então eu vou dizer cor de fundo. É azul escuro. Está bem? Então, se você passar o mouse, ele virá em azul escuro Simples. Agora, vou adicionar um pouco de estilo para a lista permanente. Vou copiar isso. OK. E aqui, teremos uma largura de 50%, e eu direi o tipo de estilo de lista como nenhum aqui. Ok, então eu não quero que esses pontos apareçam. Então, vou dizer tipo de estilo de lista, nenhum. Isso não parece bom. Eu direi que o preenchimento é zero OK. O ajuste é de 50% e a margem é zero. Automático. Ok, isso está feito. E sim, acho que é isso. Só precisamos adicionar um CSS para concluir. OK. Então, eu vou dizer concluído. Item aqui. Vou adicionar essa tarefa e clicar nela para que seja marcada como concluída. Tudo bem, então eu vou dizer concluído. OK. Então, estou me referindo a uma aula concluída como este ponto concluído. É assim que você se refere. Eu vou dizer decoração de texto, então eu preciso raspar, certo? Então, eu vou dizer aqui, fileira. Esse é o nome da propriedade. Ok, então ambos são eliminados, acho que ambos estão marcados como concluídos. Então eu vou dizer teste. Ok, isso não está concluído, e posso dizer concluí-lo. Tarefa ok. Essas são algumas tarefas fictícias que estou adicionando. Se eu clicar aqui, você verá que está concluído. Está bem? Se eu marcar isso como concluído, você verá que está concluído. Está bem? Então, isso está funcionando bem. Decoração de texto concluída. Eu vou dizer cor como cinza. Ok, algo assim, isso deve parecer decente, sim. Ok. Acho que está tudo bem agora, certo? Eu posso adicionar mais. Ok, então a tarefa está sendo adicionada. OK. Você pode ver. Também podemos adicionar um estilo para cada tarefa aqui. Ok. Então, o que eu posso fazer aqui é depois da UL aqui, eu posso adicionar LI. OK. Eu posso ver que o estilo de cada tarefa pode ser preenchido com dez pixels Ok. Eu posso adicionar uma borda aqui, borda de um pixel, sólida, e eu poderia chamar isso de fumaça branca. Você pode ver. Ok, isso realmente não parece muito bom. Então eu tenho um código de cores, TTT. Vou acrescentar isso. Está bem? Mas isso não fica bem no fundo, se você der uma olhada, ok? Então, o que eu posso fazer é rolar até aqui e mudar esse plano de fundo para hash. Posso dizer quatro, quatro, quatro, algo assim Está bem? Tipo de cor branca azulada Isso parece decente agora. OK. Então, aqui, eu preciso adicionar o raio. Não parece muito quadrado para mim, muito quadrado, certo? Então, o que eu posso fazer é adicionar um raio de provavelmente cinco pixels Vamos ver. OK. Raio de cinco pixels. Guarde isso. Ok. E então eu posso dizer margem aqui. Cinco pixels e zero aqui. Isso parece decente agora. Você pode ver. Além disso, se eu passar o mouse sobre isso, o ideal é ter o ponteiro do cursor Eu vou dizer I Cursor. Ponteiro. Você pode ver um ponteiro chegando, certo? Então, está ótimo agora. Está bem? Pelo menos decente, eu diria. Ok. Vou apenas atualizar isso e você também pode adicionar a tarefa padrão aqui, se desejar Então, aqui em JavaScript, o que eu posso fazer é adicionar, posso chamar o método. Ok, então eu posso dizer todo app dot at task aqui. A tarefa padrão é aprender JavaScript. Algo parecido com isso. OK. Você pode ver. Então, está adicionado agora. Sempre que você carrega o aplicativo, essa seria a tarefa padrão adicionada. Está bem? E você pode adicionar tarefas ou aprender C shop, por exemplo, aprender Java. Ok, você pode marcá-los como completos. Então, espero que isso seja útil e espero que você tenha gostado de criar esse aplicativo Studo comigo usando, é claro, Ja Script, HTML e CSS 11. Conclusão do curso: E isso nos leva ao final deste curso incrível, no qual exploramos possibilidades infinitas com as funções do Jascript Ao longo deste curso, nos aprofundamos no cerne das funções de JavaScript, onde exploramos todas as funções desde o básico até tópicos mais avançados, como parâmetros, valores de retorno, expressões de funções e funções de seta Até nos aventuramos no mundo das funções dentro de métodos de objetos e matrizes, garantindo que você tenha uma compreensão abrangente de como escrever código modular e eficiente Mas nossa jornada não parou por aí. Também fizemos alguns projetos práticos em que aplicamos todo o conhecimento ou tudo o que adquirimos neste curso . E esses projetos não apenas reforçaram seu aprendizado, mas também equiparam com conhecimento prático e compreensão. E esses projetos são projetos que você pode até mesmo usá-los em seu portfólio. Lembre-se de que o domínio de qualquer habilidade de programação é apenas o começo O verdadeiro poder do JavaScript está na experimentação e prática contínuas Eu encorajo você a continuar criando, refinando seu código e fazendo uso das coisas que você aprendeu hoje nos projetos que você cria Obrigado por ser um aluno engajado e entusiasmado durante todo o curso Espero que você tenha adquirido confiança suficiente em suas habilidades de roteiro de trabalho e esteja animado para enfrentar projetos ainda mais desafiadores no futuro. Com esta aula, você tem um projeto de classe que encontrará na seção de projetos, que eu o encorajaria a concluir e compartilhá-lo com toda a turma. Então esse é o fim de nossa jornada juntos, boa programação e tudo de bom