Javascript para iniciantes: um guia prático para dominar o básico com projetos

1. Introdução ao curso: Oi, aí. Bem-vindo às pontuações em JavaScript para Absolute Bigners E estou entusiasmado em guiá-lo na jornada pelo mundo do JavaScript, que é uma das linguagens de programação mais essenciais e populares quando se trata de desenvolvimento web Agora, falando sobre JavaScript, o JavaScript está em toda parte. Ele alimenta sites dinâmicos, aplicativos interativos e até mesmo back-end hoje Se você é novato em programação ou está procurando aprimorar suas habilidades, ou está procurando aprimorar suas habilidades, este curso foi desenvolvido para fornecer uma experiência prática de aprendizado muito amigável para ajudá-lo a dominar o Javascript do zero Quem sou eu? Sou facil, uma empreendedora experiente e educadora que está disposta a compartilhar com você o conhecimento que adquiri em todas as minhas carreiras Então, vamos começar a falar sobre o que abordaremos. Então, abordaremos primeiro os fundamentos do JavaScript, onde entenderemos o que é o Jscript, onde ele é usado, como você pode usá-lo e configurar o ambiente e Em seguida, descobriremos os fundamentos do JavaScript, onde falaremos sobre variáveis, operadores, expressões, matrizes, objetos Então é aqui que aprenderemos sobre os blocos de construção do JavaScript. Em seguida, faremos projetos práticos nos quais reforçaremos todos os aprendizados que tivemos até agora e criaremos alguns projetos para entender como as coisas funcionam quando você passa do ambiente de aprendizado para o ambiente baseado projetos Ao final deste curso, você terá uma base sólida de JavaScript, permitindo criar aplicativos e páginas da Web interativos com confiança e continuar sua jornada de codificação Agora, esse curso é perfeito para desenvolvedores de todos os níveis. Então, se você é um iniciante, que quer apenas explorar o JavaScript e quer aprendê-lo de uma forma muito estruturada, passo a passo, também é para desenvolvedores de nível intermediário e avançado que desejam se atualizar sobre alguns dos conceitos básicos do Então você pode seguir este curso porque não usamos muito os slides neste curso. Adoro ensinar sobre o ID em si e acredito que os engenheiros de software adoram trabalhar em IDEs e fazer as coisas que estão aprendendo. Então, você está pronto para dar o primeiro passo no mundo do JavaScript? Eu sou. Vamos mergulhar e começar a programar juntos, e nos vemos dentro do curso 2. JavaScript em ação: Então, agora o que vamos fazer é ver o JavaScript em ação. Então, o que eu recomendaria é abrir o navegador de sua escolha. Estou aqui no Google Chrome. Você pode até mesmo usar o Firefox, se desejar. Basta clicar com o botão direito do mouse e ir para inspecionar. E aqui você terá a opção de abrir o console. Está bem? Você pode redimensionar isso da maneira que quiser Agora, esse console é o console do navegador, que está embutido, e aqui é onde podemos executar nossas instruções JavaScript. Então, é claro, a primeira instrução que vamos executar aqui é console dot log. Você pode ver a sugestão automática e eu vou dizer olá, mundo. Ok. Algo parecido com isso. Ok, eu vou fazer caps W e aqui, eu vou apertar Endo Você pode ver que o Hello World está sendo impresso no console. Está bem? Então, se você quiser imprimir qualquer coisa no console, você pode usar essa instrução console dot log, que faz parte do Ja Script. Podemos até imprimir mais aqui. Então eu posso dizer Console dot Log, e eu posso dizer, eu amo o Jascript Ok, algo parecido com isso. Então, isso vai me dar essa saída, que eu adoro. Ok. Eu deveria tê-lo fechado com um único código e você verá a saída. Eu adoro JavaScript, ok? Então eu o abri com um único código e tentei fechá-lo com código duplo. É por isso que o erro, ok? Mas o tratamento funciona perfeitamente bem. Eu adoro jar script. Está bem? Você pode até mesmo usar esse console como calculadora. Então você pode dizer dois mais quatro e você verá seis saídas ST 16 mais 16. Você verá a saída 32 SE. Portanto, ele pode ser usado como uma calculadora. Você pode até mesmo usar o console para mostrar caixas de alerta ou caixas pop-up. E você deve ter visto muitas caixas pop-up de alerta ao usar esses aplicativos da web. Então, deixe-me mostrar como você pode acionar isso. Primeiro, limparei o console do meu navegador usando essa função de limpeza. Está bem? Tudo está limpo, ou você pode até clicar com o botão direito do mouse e dizer limpar Console Ok, isso também deve funcionar. Agora, aqui, vou trazer uma caixa de alerta. Então, eu posso dizer alerta aqui. Ok. E posso dizer que isso é uma caixa de alerta. Ok. Agora eu preciso fechar isso e se eu pressionar Enter, você verá que esta é uma caixa de alerta. Agora, qualquer mensagem que você digitar ou qualquer mensagem que você adicionar aqui. Essa é uma nova caixa de alerta. Deixe-me ver. Ok, deixe-me fazer novas capas. Ok. Você verá isso chegar como. Aqui no Pop. Então, qualquer mensagem que você está passando aqui está chegando aqui. Então, sim, é assim que você pode executar alguns códigos do Jscript em seu navegador, e essas foram algumas das declarações do Jscript que temos 3. Obtendo as ferramentas de software: Olá, pessoal. Então, para executar o JavaScript, vamos fazer algumas configurações em nossa máquina local, certo? Agora, é claro, você pode executar o JavaScript clicando com o botão direito do mouse assim no navegador , indo até o console e escrevendo tratamentos de JavaScript aqui. Mas isso não é ideal se você quiser escrever scripts longos e grandes para aplicativos web de nível de produção. Agora, é aqui que você precisa de uma configuração em sua máquina local. Então, o que vamos fazer é usar um IDE. Se você não conhece esse termo IDE, ele significa ambiente de desenvolvimento integrado, que fornece o conjunto de ferramentas para escrever código e executá-lo. Então, vou pesquisar o código do Visual Studio porque é isso que vamos usar. Agora, se você já tem um código do Visual Studio instalado em seu sistema ou sabe como instalá-lo, tudo bem. Mas vou supor que você não o tenha instalado em seu sistema para beneficiar os alunos que não estão cientes desse processo. Então, vou acessar esse site específico, code.visualstudio.com Está bem? Um pouco de Zoom in. Agora, aqui, a captura de tela que você vê é aparência do código do Visual Studio, ok? E você pode ver, há um destaque de sintaxe que você pode Portanto, a interface está sendo destacada em uma cor diferente. Os adereços dos botões estão sendo destacados em uma cor diferente. Então, esses são todos os benefícios do IDE, ok? Você pode ver a bela estrutura de pastas no lado esquerdo. Há um terminal abaixo com todo o código de cores e tudo Ele oferece muitos benefícios para o desenvolvedor. Portanto, se você rolar para baixo, poderá ver os suportes de código do Visual Studio. Enquanto estou gravando este vídeo, ele suporta muitas linguagens de programação, ok? Você pode até mesmo adicionar extensões. Agora, o que são extensões? As extensões basicamente estendem ou ampliam a capacidade que o código do Visual Studio tem por padrão. Está bem? Então, se você quiser adicionar algum suporte para Python, ok Então, mais suporte para Python. Então você pode adicionar essa extensão. Se você quiser adicionar suporte ao GeuCpiloto e usar a IA durante a programação, você pode adicionar o Get up Copilot CC Você pode ver que existem inúmeras extensões e há um mercado de extensões de onde você pode baixar e instalar tudo isso, e é gratuito. Você pode ver o copiloto do Git up, um pouco de. Então, tudo está destacando recursos diferentes. Você pode personalizar os temas de cores, configurações e perfis. Há muitas coisas, ok? Tem uma integração muito boa com o sistema de controle de movimento e tudo Está bem? Assim, você pode dar uma olhada neste site e ver o que ele tem a oferecer. Mas se você rolar para cima, aqui você verá esse botão de download para Windows, ok? Agora, se você estiver no Mac ou Linux, verá a opção de download para o sistema operacional apropriado. Ou, se você não estiver vendo por algum motivo, você pode acessar outras plataformas e ver quais plataformas são suportadas aqui. Está bem? Então, eu já tenho o código do Visual Studio instalado no meu sistema, então não vou instalá-lo, mas a instalação é muito simples É como qualquer aplicativo que você instala no sistema. Não há nenhuma configuração complexa que você precise mesmo para Mac, é mais fácil, e você pode ver aqui que existem várias versões, como se você estivesse usando o chip Intel, você pode instalar este. Apple Silicon, você tem esse aqui. E também para sistemas baseados em Linux Ubuntu aqui, você tem a opção de baixar e instalar. Está bem? Agora eu definitivamente tenho isso instalado no meu sistema, ok? Então, aqui, eu o instalei, como você pode ver. Está bem? Então, se você instalá-lo e abri-lo pela primeira vez, é isso que você vai ver. É assim que isso vai mostrar você. Sua visão pode ser um pouco diferente porque eu já sou usuário do Visual Studio Code, então estou vendo os projetos recentes que usei. Então eu vou fechar isso, ok? E aqui está me perguntando que, Ei, você ainda não abriu nenhuma pasta. Sim, você pode abrir pastas aqui na barra lateral esquerda e ela mostrará a estrutura da árvore. Você pode criar arquivos e gerenciá-los aqui mesmo, ou pode até mesmo clonar um repositório E, como eu disse, ele tem uma integração muito boa com os sistemas de controle Git of Ocean Então você também pode fazer uso disso. Tudo bem? Agora, o que eu pediria que todos vocês fizessem é acessar sua estrutura de pastas e criar uma pasta, quando forem praticar o Jscript Está bem? Então esta é a minha pasta onde vou praticar o Ja Script, ok? E basta abrir essa pasta aqui no código do Visual Studio. Abra a pasta, você pode dizer abrir pasta e navegar até a pasta que acabou de criar. Ou, alternativamente, você está no Windows, você tem uma opção. Você pode clicar com o botão direito do mouse. Você pode dizer mostrar mais opções e pode dizer abrir com o código do Visual Studio aqui. Abra com o código aqui. Isso é o que é. Então, isso é o Visual Studio, que não é o código do Visual Studio, é diferente. Então você tem que dar uma olhada nesse logotipo. Está bem? Essa. Está bem? E se você disser abrir, você verá a pasta aberta aqui. Ok. Maximize isso. Está bem? Você pode ver. Agora eu tenho duas instâncias ou duas janelas ou código do Visual Studio aqui. Está bem? Esta é minha pasta que eu criei chamada JavaScript. E é aqui que vou criar todos os meus arquivos relacionados ao Ja script e tudo que vou aprender. Então é só isso. Espero que você também tenha conseguido fazer essa configuração com sucesso em seu sistema. 4. Nosso primeiro programa JavaScript: Então, agora é hora de começarmos a escrever algum código no JAScript Então, espero que no Visual Studio code open você tenha conseguido abrir essa pasta de sua escolha, ok, onde quiser escrever os programas Ja Script. Então, eu tenho essa pasta aberta e, ao lado do nome dessa pasta, você verá esse ícone chamado Novo arquivo. O primeiro arquivo que vamos criar seria um arquivo HTML. Está bem? Então, vou chamar isso de HTML de ponto de índice. Agora, por que estou criando um arquivo HTML? É porque usaremos HTML para carregar o Ja Script e executá-lo no navegador. Sim, vamos executar o Ja Script no navegador e ver a saída. OK. Então, aqui você pode ver esse HTML de ponto de índice e também observar que aqui no código do Visual Studio, você também vê essa tag apa, esse ícone de tag, que representa o tipo de arquivo que você está criando. Está bem? Agora, esse arquivo foi criado. O que eu vou fazer é dizer exclamação. Está bem? Então, no momento em que você diz uma exclamação, código do Visual Studio tem um bom suporte para HTML, certo Eu tenho visto isso constantemente. Então, isso nos ajudará a gerar um código padronizado e, para isso, você precisa pressionar a exclamação e pressionar Enter e Então, você verá alguns códigos padronizados sendo gerados. Você pode ver isso, ok. Então, vou simplesmente fechar isso clicando neste ícone. E aqui você pode personalizar isso. Então, vou chamar esse título aqui de Curso Jascript aqui, algo assim E aqui, eu posso escrever algum código. Agora, esse arquivo não está salvo. Como você sabe disso? Então aqui você pode ver esse ponto aparecer. Se você acabou com isso, uma cruz aparecerá, mas você pode ver esse ponto branco aparecer ao lado da faixa do arquivo. Isso significa que o arquivo não foi salvo Certifique-se de salvar todas as alterações que você estiver fazendo no código do Visual Studio. Se você estiver vendo esse ícone, significa que ele não está salvo e que você não verá as alterações feitas no arquivo Continue atualizando e vendo por que não está obtendo a saída desejada Mas, na verdade, você não salvou o código. Tudo bem? Então isso acontece algumas vezes, então você tem que dizer Controle e você verá que eu posso ir embora, agora, o que eu faria é dentro do corpo, eu vou adicionar H um, ok? E eu vou dizer JavaScript. É um curso por aqui. OK. Também vou adicionar o log do console aqui. Está bem? Agora, o log do console é um tratamento de JavaScript. Então, como vou fazer isso? Então eu não posso escrever isso na tag HTML, ok? Então, para isso, terei que usar uma tag especial chamada tag de script. Está bem? Então, aqui, depois do corpo, vou dizer roteiro. OK. E aqui, vou dizer log de pontos do console. E aqui, eu vou dizer olá mundo, algo assim. Está bem? Então esse é o Ja Script, e eu o salvei. Então, basicamente, como você escreve JavaScript em HTML é com a ajuda de tags de script, certo? Agora, o que precisamos fazer é ver a saída, se somos capazes de executar isso corretamente. Então, vou clicar com o botão direito do mouse aqui e vou dizer Revelar no Explorador de Arquivos. Ok, então isso abrirá o Explorador de arquivos. No Mac, você verá o Reveal no Finder. Então isso abre o Explorador de Arquivos. Você pode ver esse HTML de ponto de índice criado. O que você pode fazer é abrir isso no navegador. Portanto, certifique-se de ter um navegador, seu navegador favorito ou o navegador preferido de sua escolha, aberto aqui e a pasta também aberta. E o que você pode fazer é arrastar e soltar esse arquivo aqui no navegador. OK. Então, o que isso vai fazer é abrir esse arquivo aqui. Você pode ver que esse é o caminho do arquivo e você pode ver o curso Ja Script sendo mostrado aqui. Agora, por que está vindo aqui? É porque você adicionou isso no headrotax. Você pode clicar com o botão direito do mouse, dizer inspecionar acessar o Console e ver Hello world uppe, Então esse é o registro do console que mostramos aqui, ok? Vou minimizar isso aqui, e o que eu faria é realmente ter essa visão lado a lado, ok, que é algo que eu prefiro sempre que estou programando ou fazendo desenvolvimento web, ok? Então, essa visão lado a lado é o que vou usar, e você também terá uma boa clareza sobre qual saída está obtendo e quais mudanças estamos fazendo e por que está vendo essa saída? OK. Portanto, qualquer alteração que você fizer, se adicionar mais algumas exclamações, clicar em salvar e atualizar aqui, verá a saída Está bem? Mas não se esqueça de salvar o arquivo. Está bem? Não deve ser como se você não o tivesse salvado e não visse a saída, você apenas continuaria atualizando e dirá: por que não estou recebendo a saída Está bem? Além disso, certifique-se de usar a sintaxe exata em que estou escrevendo aqui Você pode ver o console. Tudo está pequeno. Além disso, tudo está pequeno. Se você tentar escrever em maiúsculas aqui, se eu salvar isso e se você atualizar, verá que não está definido Isso não está definido. Não vai funcionar. Também está te dizendo onde está o erro, ok? Então, eu também vou mostrar como você pode ler erros aqui. Você pode ver o erro de referência, console não está definido e o erro está em 12. Está bem? Então esta é a linha número 12, aqui, certo? E é a quinta posição é o que está lhe dizendo. A quinta posição. Se eu mudar isso para C pequeno, e se eu disser refrescar, ele deve me mostrar a saída OK. Além disso, estamos adicionando ponto e vírgula no final porque isso marca o fim da instrução de script Ja. Tudo bem. Então, sim, esse é o primeiro programa Jascript que você escreveu e o carregou com a ajuda do HTML Então, espero que isso tenha sido útil. 5. Estrutura do arquivo JavaScript: Então, deixe-me falar um pouco mais sobre o Ja Script aqui. Então, aqui, se você der uma olhada neste arquivo em particular, este é um arquivo TReML que contém o script Ja, certo? Agora, essas coisas aqui são conhecidas como tags e, para JavaScript, isso é conhecido como declaração. O Jascript não tem algo chamado tags. As tags existem em HTML, mas o Jascript terá algo chamado de declarações, e Statement é apenas uma única linha de código que pode ser executada Agora também, você notará que o código Jscript está escrito na tag do script Nós adicionamos isso no final do arquivo. Agora, eu gostaria de destacar uma coisa aqui. Você pode se livrar disso aqui e também pode adicioná-lo na parte superior da cabeça. Isso também é possível se você salvar isso e executar isso aqui. OK. Se você vê-lo em execução, verá que a saída é a mesma. Está bem? Se eu tentar fazer algum tipo de alteração, ok, assim e se eu atualizar, você verá a saída chegar assim Está bem? Portanto, não há nenhum problema, mas é sempre uma boa prática ter essa tag de script no final, o que significa que você deve carregar o Jscript no final após o carregamento de todos os elementos HTML Agora, há razões para isso. O motivo número um é evitar qualquer tipo de erro desconhecido. Então, o script Ja, como sabemos, adiciona comportamento às nossas páginas da web, que significa que ele funciona com os elementos definidos na página HTML. Agora, existe a possibilidade de o script Ja tentar alterar os elementos dependendo do estado, certo? Se você clicar em um botão, talvez ele queira mostrar algumas informações ou fazer algo com os elementos da página. Agora, se você adicionar esse script no cabeçalho, aqui dentro das tags de cabeçalho. O problema é que esse script pode ser executado antes mesmo de todas as tags do HTML serem carregadas. Portanto, existe a possibilidade de o Ja Script não conseguir encontrar as tags que deseja, e isso pode ocorrer por meio de um erro. Portanto, isso pode levar a um erro, e é por isso que sempre é recomendável que a tag de script esteja no final do arquivo HTML. E o motivo é bem claro para que todas as tags HTML tenham sido carregadas. Está bem? O único motivo. Outro motivo é acelerar o site. Então, se a tag de script for adicionada no topo da seção principal, o que aconteceria é que, se houvesse muito script, agora, temos apenas uma linha de código, certo? Então está tudo bem. Mas se houver muitos scripts escritos, talvez o script demore um pouco para ser executado ou carregado. Está bem? E os elementos HTML abaixo do script ou após a tag principal seriam carregados somente quando o script estivesse totalmente carregado, que poderia levar a um tempo de resposta lento na página da web. E isso não é bom do ponto de vista da experiência do usuário, e é por isso que é sempre uma boa prática carregar o script Ja no final da página para evitar esses problemas Os programas Ja Script também podem ter várias declarações, é claro. Posso adicionar mais uma linha de código aqui e posso dizer atualizar, e você verá a saída aqui Tudo bem. Então, sim, são mais informações sobre o programa Jascript 6. Aprimorando seu ambiente de desenvolvimento: Então, agora vamos falar sobre como você pode aprimorar seu ambiente de desenvolvimento. Tudo bem? Agora, o que está acontecendo a partir de agora é que temos esse arquivo HTML. Dentro disso, estamos carregando o Jascript e temos esse código Jscript disponível no navegador Agora, o que fizemos foi abrir esse arquivo HTML para ver a saída aqui no console do navegador, certo? Agora, existem maneiras melhores. Agora, o que acontece é se você estiver fazendo algum tipo de mudança aqui. Por exemplo, estou adicionando mais um ponto final aqui. Está bem? Se eu salvar o arquivo, essa alteração não será refletida aqui. Eu tenho que fazer uma atualização para ver a mudança, ok? Se você está constantemente fazendo mudanças e testando constantemente, isso pode ser um pouco complicado, e se você estiver trabalhando em grandes projetos, isso pode irritar, Portanto, as coisas podem ser muito mais simples, e há alguns bons tipos de ferramentas que você pode configurar no código do Visual Studio que podem facilitar sua vida como desenvolvedor ou programador Agora, deixe-me mostrar algumas etapas aqui que você pode seguir para aprimorar seu ambiente de desenvolvimento. Então, aqui na barra lateral esquerda, você verá essa opção chamada extensões. Agora, no código do Visual Studio, você pode adicionar ou instalar algo chamado extensões que pode estender a capacidade padrão que o código do Visual Studio tem. Está bem? Então, eu já tenho muitas extensões instaladas. Está bem? Vou falar sobre os que eu recomendo para Ja Script HTML ou desenvolvimento web, certo? Agora, você pode ver aqui, eu tenho essa extensão para contêineres de desenvolvimento, ok? Então, eu também trabalho muito com o Docker. Está bem? Então eu tenho essa extensão instalada, mas isso não é necessário para desenvolvimento web, ok? Então, vou falar apenas sobre os que são. Então, essa primeira extensão que você está vendo é a tag de renomeação automática aqui Está bem? Agora, se você ver esse arquivo TML, ele consiste em tag, ok? Uma é a tag de abertura, outra é a tag de fechamento. Então, se você quiser renomear a tag. Então, digamos que se esse H um, eu quero que seja H dois. Então, se eu fizer H dois aqui, você pode ver que a tag de fechamento também foi renomeada automaticamente. Como isso está sendo tratado Isso está sendo tratado por causa dessa extensão. Então, se eu desativar isso aqui, ok? E se eu vier aqui, agora, se eu renomear, deixe-me reduzir isso um pouco Se eu renomear isso para H um aqui agora, ainda está funcionando, acredito que as alterações não entraram em vigor OK. Mas deixe-me renomear esse H two. OK. Então, agora, depois de reiniciar as extensões, se você ver, se eu renomear isso para H dois, isso não está sendo Está bem? Portanto, se você estiver trabalhando em um arquivo HTML grande e, digamos, se você renomeou essa tag, precisará renomear a tag correspondente também, caso contrário, ocorrerá um erro Então, se eu atualizar isso, tudo bem. Não há nenhum erro sendo gerado, ok, mas a saída não é a que você deseja. OK. Então, provavelmente isso pode ser mostrado em H dois ou H um. Está bem? Então, isso não é o que você desejaria. Idealmente, uma etiqueta de abertura também deve ter uma etiqueta de fechamento. Então é isso que essa tag de renomeação automática ajuda você. Ok, percebi que não salvei o arquivo, então vou salvar o arquivo e fazer uma atualização OK. Então é isso que essa tag de renomeação automática permite que você faça Então, eu tenho isso instalado para maior comodidade aqui. Ok, então eu habilitei isso agora, e se eu renomear isso para H one, vou apenas salvá-lo Está bem? É com isso que essa tag autor nim ajuda você Está bem? Há uma descrição aqui que você pode ler. Está bem? Portanto, esta é uma etiqueta, colorização de pares de colchetes Então, o que essa extensão faz? Então, se você está trabalhando em um arquivo grande, tudo bem, então você pode usar essas chaves para segregar um bloco de Agora, talvez você queira ver o código de cores. Portanto, isso ajuda você a fornecer o código de cores do par de abertura e fechamento Você pode ver aqui no próprio ícone . Então é isso que isso faz. Está bem? Eu tenho algumas outras extensões como DV container, jango, talker, algumas relacionadas ao Python, Jupiter notebooks, tudo Jupiter Depois, há essa outra extensão , chamada de Live Server. Isso também está instalado no meu sistema. Portanto, você pode pesquisar a extensão aqui. Então, todas essas extensões que eu esqueci de mencionar , se você não tiver alguma extensão, pode pesquisar aqui no mercado Você pode selecioná-los e dizer instalar. É isso mesmo. É bem simples. Está bem? Portanto, o servidor ativo é uma extensão que permite que um servidor pequeno ou leve em seu ambiente de desenvolvimento. OK. Então, ao instalar essa extensão, você tem essa coisa aqui. Você pode ver isso na parte inferior, acesse este botão. Se eu desativar isso e reiniciar, esse botão desaparecerá. Ok, se eu habilitar isso, você verá esse botão aqui em cima. Então, se eu disser vá ao ar, o que aconteceria é que isso me daria um servidor ativo. Você pode ver a porta 50 50. Então, isso me deu um servidor leve no 5500. Não é 50 50. É 5500. Ok, isso é um porto. E se você puder executar isso em sua máquina local, se tentar acessá-lo, o arquivo que você tem estará sendo executado no servidor local. Você pode ver isso.This agora em execução no servidor local. E agora, se eu tentar fazer qualquer tipo de mudança aqui, ok? Então, se eu adicionar, digamos, ponto de interrogação, dois ou quatro pontos de interrogação. OK. E vou abrir o console antes de salvar o arquivo para que todos possam ver o que está acontecendo. Ok, está falhando em um tecido rude. Se eu salvar isso, você verá que, logo após salvar as alterações, você verá as alterações sendo refletidas ao vivo. Portanto, é muito útil. É muito conveniente. Assim, você não precisa pressionar o botão de atualização repetidamente. Ele se encarregará de mostrar a saída sem que você precise fazer uma atualização. Portanto, ele recarrega automaticamente as alterações que você faz. Está bem? Então, é muito útil essa extensão de servidor ativo, sim, eu a uso o tempo todo. Mais bonita. Portanto, esse é um formato de código que ajudará você a formatar seu código. Então é isso que ele faz. Eu o tenho instalado aqui. Então é isso. Isso é tudo para código HTML e JAScript. Essas são as extensões. Eu tenho muito mais outras extensões, como tailwind, Python Ok, então eu faço todo tipo de programação. Então, você encontrará muitas extensões no meu código do Visual Studio, e eu continuo excluindo, reinstalando ou instalando as novas, experimentando novas, tudo o que eu faço. Tudo bem. Então, sim, trata-se das extensões que podem ajudar você a melhorar seu ambiente de desenvolvimento. Portanto, eu recomendo que você mude para um servidor ativo se estiver usando um arquivo HTML para ver seu código Jascript pois isso pode ajudá-lo a ver suas alterações em tempo real 7. JS no mesmo arquivo vs um separado: Então, agora é hora de entendermos como você pode escrever JavaScript de forma escalável Agora, o que quero dizer com forma escalável é que, agora, o que estamos fazendo é escrever JavaScript dentro das tags do script, certo? Agora, sempre que você estiver trabalhando em um cenário do mundo real ou em aplicativos de nível de produção, você não terá JavaScript de duas linhas, certo? Seria que os arquivos são muito longos, como se houvesse muito Javascript envolvido em alguns projetos Então, nesse caso, não é bom escrever seu JavaScript dessa forma. É melhor se você pudesse separar o código JavaScript do HTML. Então é isso que eu vou te mostrar. Então, o que você pode fazer é o que vamos fazer aqui é criar um novo arquivo Ja Script, e vou chamá-lo de ponto de índice Gs. Assim, você pode ver o momento em que eu digitei o ponto JS, você pode ver o ícone do arquivo aqui Isto é Este é um arquivo JS, e este é um arquivo HTML. Portanto, essa é uma representação pelo código do Visual Studio que ajuda a identificar qual é o tipo de arquivo. Está bem? Então, o que vou fazer é cortar essas duas linhas de código. Vou movê-lo para cá. OK. E agora, se eu salvar isso, você não verá nenhuma saída. Ok, porque não há nenhum script Ja aqui que esteja escrito no arquivo ESTiml ou nem mesmo vinculado aqui Portanto, se você não estiver escrevendo JavaScript no arquivo ESTiml, você pode vinculá-lo e gravá-lo em um arquivo externo, que é um arquivo E tot JS, que significa Ja script Então, o que eu posso fazer é basicamente pegar isso na mesma linha e adicionar aqui um atributo. Portanto, há um atributo chamado SRC para a tag do script, que permite especificar o nome do arquivo Está bem? Então, eu posso dizer índice, e você pode ver a sugestão automática aqui, ponto de índice Q. Então, isso é sugestão automática do código do Visual Studio E eu posso dizer Salvar. E no momento em que você diz Salvar, você pode ver aqui, olá, velho, e está vindo do índice JS E você pode realmente fazer alterações aqui se quiser e ver as mudanças sendo refletidas aqui. Está bem? Então, sim, é só isso. Agora, uma coisa que eu quero mencionar aqui é sobre o servidor ativo. Então, se você quiser fechar o servidor, você precisa clicar nesse botão. Então, isso vai descartar esse servidor. E se você atualizá-lo, tudo bem, ele simplesmente não recarregará. Você pode ver. E se você quiser voltar ao ar, pode iniciá-lo e ele o abrirá. Certo? Então, sim, é assim que você pode separar o código JS do HTML. 8. Comentários em JavaScript: Agora vamos falar sobre bens comuns. O que são bens comuns? Portanto, os comentários são como nós em seu código Agora, esses são o conjunto de instruções que não são executadas e são ignoradas, e são apenas uma referência para você. Então, se você vem de qualquer outra linguagem de programação como Java, Python, é provável que esteja ciente desse conceito de bens comuns e saiba o que Agora, em JavaScript, há dois tipos de comentários que são suportados. Um é um comentário de uma única linha e o outro é um comentário de várias linhas Então eu posso ter duas barras para frente aqui e eu posso dizer, este é um comentário de uma única linha, algo assim Está bem? Agora, se eu salvar isso, literalmente não haverá impacto na saída porque isso nunca será executado. Posso até comentar essa linha de código. E se eu salvar isso, aquela linha é comentada e não é executada. Então, sim, é assim que você pode usar o comentário de uma única linha. Além disso, você pode vir aqui no código do Visual Studio em Editar aqui. Você verá o comentário da linha de alternância. Então, esse é um atalho aqui. Então, o atalho para mim é Control plus forward slash. OK. Como estou no Windows, posso manter meu cursor nesta linha, e posso dizer Controlar e barra, e você pode ver, posso alternar entre o comentário de uma única Ok, eu posso até selecionar todo esse bloco de código e ver Controle e barra frontal Agora, se você estiver no Mac ou Linux, esse atalho pode ser diferente, mas estou apenas mostrando como você pode obter o atalho para si mesmo. Tudo bem. Além disso, há algo chamado bloco de comentário, como você pode ver aqui. Agora, eu lhe disse que isso é um comentário de linha única ou também é conhecido como comentário de linha. Agora, existe algo chamado comentário em bloco ou também conhecido como comentário em várias linhas Está bem? Assim, você pode comentar várias linhas de código dessa forma , colocando essas duas barras em cada linha Mas haveria situações em que você gostaria de seguir esse caminho. Então é aí que você pode usar o comentário de várias linhas. Então, para fazer um comentário em várias linhas, daremos uma olhada na captura de tela ou, desculpe, não na captura de tela, não na captura Então você pode ver shift lt e A, ou você pode até mesmo selecionar essa opção aqui. Então, você pode ver que essas duas linhas de código que eu selecionei agora estão nessa sintaxe, que é para comentários de várias linhas, e elas não serão Então, se eu salvar esse arquivo, você não verá literalmente nenhuma saída no console. Está bem? Portanto, este é um comentário de várias linhas Ok, e eu posso alternar isso. Então eram Control Shift e E aqui. Opa, eu cometi um erro. O que foi um atalho? Então foi Shift Old e E. Desculpe. Ok, então eu posso selecionar isso e dizer shift old e E para o meu sistema. Opa. Ok, não está funcionando para mim. Shift old and A. Eu deveria trabalhar idealmente. Mas sim, eu não sei. O atalho não está funcionando por algum motivo. Deixe-me tentar mais uma vez, mudar o velho e A. Ok, funcionou. Provavelmente eu não estava fazendo isso da maneira certa no teclado. Está bem? Funcionou. E vou guardar isso para que você possa ver que as linhas estão cheias. Está bem? Então, este é um comentário de uma única linha, e se eu levar isso para uma nova linha e ver algo assim aqui, ok? Isso é um comentário de várias linhas. Então, vou adicionar essa linha aqui. Está bem? Portanto, este é um comentário de várias linhas OK. Agora, há mais uma forma de aprimorar a forma como você comenta, que é conhecida como comentários de documentos, ok? Por isso, também é chamado comentários de documentação ou comentários de e consiste em anotações Está bem? Agora, o que acontece normalmente é que você teria muitos códigos, como funções, classes, objetos criados no código, e gostaria de ter uma classes, objetos criados no código, descrição de quais tipos de parâmetros qualquer pessoa usando essa função específica deve passar e por que esses parâmetros são necessários e tudo mais. Está bem? Então, basicamente, com a ajuda dos comentários do documento, você pode usar as anotações e especificar todas essas informações Então, vou adicionar um exemplo simples de comentários de palestra aqui, ok? Então, aqui, você pode ver que temos uma função, ok? Se você não conhece esse conceito de função, métodos, não se estresse. Mas se você vem de qualquer outra linguagem de programação, deve estar ciente de coisas como funções, métodos e tudo mais, certo? Então, eu estou usando isso apenas para mostrar este exemplo. Agora, aqui você pode ver que isso é fazer um comentário. Essa é a sintaxe, ok? E você pode ver aqui, o que essa função faz essencialmente é adicionar dois números, e eu também especifiquei o parâmetro. Então, estou usando a anotação at the rate para aqui A anotação é algo que começa com uma redução. Está bem? Então é isso que é a anotação. E eu estou especificando que isso é um número e o nome é A, e esse é o primeiro número E, novamente, estou descrevendo o segundo parâmetro e, em seguida, qual é o tipo de retorno dessa função. Agora, se você passar o mouse sobre isso, se você passar o mouse sobre essa função, verá que essa documentação está realmente sendo mostrada, você pode ver neste pop-up Portanto, qualquer pessoa que esteja tentando usar essa função em algum outro arquivo, poderá ver tudo o que você escreveu ou muito mais informações sobre essa função específica. Isso é o que significa, ok? Agora a questão é: se você estiver observando a sintaxe, ficará um pouco preocupado dirá: Ei, eu tenho que adicionar essas marcas de asterisco em cada linha. Então, a resposta é não. Isso é gerado automaticamente para você. Então, o que você pode fazer é colocar uma barra para frente e ter duas vezes o asterisco aqui Então, se você adicionar duas vezes asterix, o IDE sabe que você deseja adicionar os comentários no estilo doc e você pode realmente adicionar o que precisa. Está bem? E você pode fazer uso de Você pode usar a anotação aqui Você pode ver. Está bem? Agora, sempre que você pressiona Enter, um novo asterisco é adicionado Ok, então você não precisa se preocupar em adicioná-lo em todas as linhas. OK. Então essa é a razão pela qual as pessoas usam o ID. Esse é outro motivo. OK. Você também pode fazer tudo isso que estamos fazendo no Bloco de Notas, mas não terá acesso a todos esses recursos, sabe, essas sugestões e geração automática de asteriscos e tudo isso não acontecerá no bloco de notas, e é por isso que as pessoas usam Portanto, outro caso de uso de documentar código dessa forma é amanhã, se você quiser gerar uma documentação do EPA Então, digamos que você tenha escrito um EPI em JavaScript ou alguma biblioteca em JavaScript e queira gerar uma documentação para o mesmo Assim, você pode fazer uso das ferramentas disponíveis. Existem ferramentas externas, como uma ferramenta é o Jstok three. Está bem? E você pode fazer uso disso e gerar a documentação. E a documentação é gerada usando isso. Então, se você adicionou isso, como todas as funções e todos os EPIs, o que quer que você precise encontrar, ele fornecerá a documentação que você pode compartilhar com seus desenvolvedores de front-end ou com quem quiser , ok Agora, eu também perguntaria se você está interessado em saber mais sobre esse estilo de documentar coisas Eu solicitaria que você consultasse este site jsto dot app OK. E isso é essencialmente, eu diria, ou estilo padrão para documentar seu código Jascrit. E aqui, se você ver, você verá uma lista de várias anotações ou várias tags aqui Você pode ver que estávamos usando o Param , que você deveria ver em algum lugar aqui. Está bem? Você pode ver param. Tudo bem. E há muitas coisas que você pode usar. Se você clicar neles, terá acesso a mais detalhes sobre como eles podem ser usados. Está bem? E, sim, isso é o que é. Você pode clicar aqui no lado direito, no topo, e também pode acessar o repositório Github para saber Está bem? Então, sim, isso é sobre ações da GS que você pode explorar mais se estiver interessado nisso, ok? Mas sim, isso é sobre comentários, e vou me livrar disso aqui por enquanto. Tudo bem. Então, espero que você tenha conseguido acompanhar e espero que tenha sido útil. 9. JavaScript usando Nodejs: Ei, tudo bem, pessoal. Então, deixe-me mostrar como você pode usar node Gus para executar seu código Jar Script Até agora, o que temos feito é executar nosso script Jar diretamente do próprio navegador, e aqui estou usando o código VS com extensão de servidor ativo, e na verdade não preciso de extensão, e na verdade não preciso exceto para recargas ao vivo, mas sim, recargas ao vivo apenas tornam minha vida conveniente, você sabe, como desenvolvedor, você pode até mesmo abrir esse arquivo de estimativa diretamente no navegue e veja a saída no console. Mas você terá que se atualizar para cada alteração que fizer todas as vezes, o que não é conveniente na minha opinião Então, o que é o NodeJS, o NodeJS fornece um ambiente de execução para Então, se você apenas pesquisar no Google NodeJS, você virá ou verá este link nogs.org, que é o link do Agora, como o NodeJS entrou em cena. Então, o que aconteceu foi que um engenheiro chamado Ryan Dahl, o que ele fez foi pegar o motor V oito Do Google, que permite que o Ja Script seja executado no Google Chrome. Então, no Google Chrome, você vê que o Ja Script está sendo executado, como está sendo executado com a ajuda do oito motores. Então Ryan acabou de pegar esse motor Vet e criou o NodeJS. Portanto, o NodeJS é essencialmente esse mecanismo oito que permite executar o Ja Script em qualquer lugar. Tudo bem? Agora, para obter isso ou executar o NodeJS sem a ajuda do Oh, desculpe, Nod Então, se você quiser executar o Ja Script sem a ajuda de navegadores, você precisa instalar o Nojs em seu sistema Certo. E você pode simplesmente acessar este site. Você pode ir para Download ou você verá este link de download aqui na página inicial Está bem? Basta clicar neste botão de download e ele será baixado para o seu sistema. Ou, alternativamente, você pode ir para Download e selecionar a versão. Certifique-se de selecionar o mais recente. Em qual sistema operacional você está, ok, basta colocá-lo no seu sistema. Então você pode até mesmo instalá-lo usando esses utilitários de linha de comando, certo? Ou você também pode ter um instalador pré-construído. Ok, então existem diferentes opções de instalação. Eu recomendaria o instalador. Você deve usar o instalador, então basta baixá-lo e executá-lo. Portanto, é muito simples de instalar. É como qualquer outro software que você normalmente instalaria em seu sistema. Tudo bem? Agora, depois de terminar a instalação, não vou mostrar as etapas de instalação. É bastante normal. Portanto, basta acessar o terminal ou qualquer terminal fora do código do Visual Studio se desejar preferir o terminal nativo do sistema operacional. Você também pode fazer isso. Mas como estou usando o código do Visual Studio, ele tem uma funcionalidade de terminal embutida, que me ajudará a abrir esse terminal aqui. Está bem? Agora, no terminal, você pode executar esse hífen de nó de comando, que na verdade será impresso na versão do nó que você tem em seu sistema Portanto, é muito provável que você veja um número de filho diferente sendo impresso aqui, dependendo de quando estiver assistindo a este vídeo. Mas se você tem algum número de filho sendo impresso, tudo bem, desde que esteja sendo impresso. Ok, deve ser impresso. Caso contrário, há algum problema com a instalação do nodejs em seu sistema Ou não foi instalado corretamente ou não está instalado de todo. Está bem? Portanto, antes da instalação ou antes de fazer o download, eu também recomendo que você execute este comando e verifique se o nó existe no seu sistema, certo? Então, ele existe no meu sistema. Eu sei que instalei desde o início. Agora, uma vez que o nó exista, o que eu faria é esclarecer isso, vou dizer NP ou vou dizer nó aqui Então isso é um comando, e eu passaria nome do arquivo para o arquivo Ja Script. Este ponto de índice chg. Mas antes de executar esse comando, verifique se você está no diretório correto. Então, vou verificar meu diretório aqui. Então, agora eu estou neste diretório, e este é um diretório onde meu arquivo Ja Script também reside Está bem? Então, eu vou dizer nodo aqui. E eu vou dizer o ponto índice Gs. E se eu disser Enter, você verá a saída vindo aqui, ok? Então, com essa abordagem, você pode usar o terminal e não precisa do console do navegador aqui, ok? E você nem precisa do servidor ativo, certo? Então, basicamente, você escreve algum código aqui, que é JavaScript puro, e você o vê sendo executado no console desta forma. Está bem? Não há necessidade de nenhum arquivo TML, nenhum servidor ativo ou nenhum dos dois O navegador também, ok? Porque agora você está executando o Ja Script fora do navegador Expliquei o que é o node JS e como ele surgiu. Está bem? Então você está usando o NodeJS aqui Mas eu só quero mostrar essa metodologia para todos vocês, ok? Eu não vou usar isso pessoalmente, ok, porque eu quero te mostrar como o Ja Script funciona com HTML. Então, vamos seguir esse método. Mas, sim, eu gostaria que você conhecesse os outros métodos também E é por isso que decidi mostrá-lo para você. Tudo bem, espero que você tenha conseguido acompanhar e espero que tenha sido útil 10. Manipulação do DOM usando JavaScript: Vamos falar sobre a manipulação de Dom. Agora, o que você quer dizer com manipulação do destino? Agora, se você está falando sobre JavaScript, você deve ter ouvido falar sobre esse termo chamado Dom. Agora, Dom significa modelo de objeto de documento. Agora, sempre que você exibe uma página da web no navegador, ela é convertida em uma estrutura, certo, que a página da web exibe. E essa estrutura é conhecida como modelo de objeto de documento ou fazer certo? Agora, o JavaScript pode interagir com esse Dom e até mesmo alterá-lo. Esse é o poder do JavaScript. Quando dizemos que o Ja Script adiciona comportamentos às páginas da web, essa é a habilidade que ele traz para a mesa Assim, ele pode interagir com o Dom e até mesmo alterá-lo. Agora, vou mostrar alguns recursos como ele pode alterar as coisas do próprio Ja Script, ok? Então, aqui temos esse título do curso JAScript, ok? Aqui, você está vendo H one Jascript Cure. Então, o que vou fazer é adicionar provavelmente um PTAC aqui Ok, digamos que seja uma etiqueta P. Não vou acrescentar nada. Vou adicionar uma identificação, ok? E eu vou dizer que esse é o nome aqui, ok? Então, adicionei uma tag P, e eu dei a ela um atributo chamado ID, que tem um valor de nome. Está bem? Agora, por que eu dei a identificação? Como queremos acessar essa tag P do Ja Script e acessar qualquer tag do HTML, ela deve ser selecionada pelo Jscript usando um identificador E ID é esse identificador exclusivo. Então, se você passar o mouse sobre isso, verá que define um identificador exclusivo, que deve ser exclusivo em todo o documento Portanto, este é o documento inteiro, e isso deve ser exclusivo para o Ja Script selecioná-lo da maneira certa. Está bem? Agora, o que vou fazer é primeiro, se você atualizar isso, verá que não há saída aqui porque literalmente não adicionamos nada, certo? Essa é uma tag MTP. Então, aqui, posso dizer que o ponto do documento obtém o elemento por ID. Está bem? Então, estamos vendo no documento, obter esse elemento por ID. Agora, qual elemento estamos pedindo? Está bem? Então, estamos perguntando o nome. Esse é o nome do nosso elemento aqui. Está bem? Agora, usando a partir daqui, posso acessar sua propriedade. Então, eu posso dizer que o texto interno é igual a, eu posso adicionar olá aqui, algo assim. OK. E eu adicionarei um ponto e vírgula e salvarei isso Agora você verá olá aqui em cima. Está bem? Então, esse olá está sendo adicionado ao documento HTML ou ao código HTML com a ajuda do ChavScript. Você pode ver que essa é a linha de código que faz isso Está bem? E também é bem simples Estamos dizendo documento, ou a partir do documento, obtenha esse elemento por ID, que é o elemento. Então você tem que digitar o nome aqui. Ok, e você pode ver aqui. Esse elemento get by ID retorna ou faz referência ao primeiro objeto com o valor especificado do atributo ID. Isso é o que passa. E então estamos vendo o texto interno, ok? Então, estamos modificando o texto interno aqui e adicionando olá ali Está bem? Então é isso que estamos fazendo, tudo bem. Agora, vou te mostrar mais alguns exemplos. Então, o que eu vou fazer é aqui, então dentro desse HTML, o que eu posso fazer é vir aqui. Eu tenho essa etiqueta P. Eu posso mudar essa tag P para H one, para que fique mais visível. Está bem? O tamanho é maior. Agora aqui, o que eu vou fazer é mostrar olá aqui. OK. Posso dizer novamente que documento ponto obtém elemento por ID, ok? Vou pegar esse elemento, que é o nome aqui, ok? E então eu posso dizer tot On click ou posso dizer tout interno, ok tot On click ou posso dizer tout interno, ok? Ou 1 segundo. Deixe-me também adicionar um botão aqui. Está bem? Esqueci de adicionar um botão, então vou adicionar um botão aqui. Então, o que vamos fazer é que o que eu estou tentando mostrar é clicar nesse botão, eu vou mudar o texto, mudar o texto Botão. OK. E isso é apenas um botão com a mudança de texto aqui. Você pode ver. Vou minimizar isso um pouco. OK. Então, em vez do nome, vou pegar o troco. Então, qual era o ID, é o botão de alteração de texto. Vou entregá-lo aqui. Está bem? E então aqui, eu vou dizer ponto a ponto, clique neste botão. OK. Você pode ver isso clicando aqui. Ao clicar nesse botão, o que eu preciso fazer é ter uma função. Está bem? Isso é uma função e o estado da função. Opa. Ok, então eu esclareci isso e aqui, dentro de um par de elogios encaracolados, Ok, eu vou dizer o que deve acontecer com o clique deste botão Está bem? Então, ao clicar nesse botão, esse texto deve mudar. Então eu vou copiar essa linha aqui porque essa é a linha que nos ajuda a mudar o texto, e eu posso dizer, olá, eu posso dizer olá novamente aqui, algo assim. OK. Então, espero que isso esteja fazendo sentido. O que estamos tentando fazer aqui. Tudo bem. Na verdade, estamos dizendo que o ponto do documento obtém o elemento por ID. Estamos recebendo esse elemento. Isso é um botão. E ao clicar neste botão, estamos dizendo executar esta função. O que são funções, caso você não saiba, as funções nada mais são do que um bloco de código projetado para realizar uma tarefa específica. E a tarefa que estamos tentando fazer aqui é apenas alterar o texto desse elemento específico aqui, e esse elemento específico é uma tag H one, ok? Então, estamos recebendo aquela tag H one e estamos alterando o texto interno para hello novamente. Alinhe isso com um ponto e vírgula. Vou guardar isso. E agora, se você disser mudança, verá olá novamente. Está bem? Então esse é o poder do JavaScript, ok? Você pode ver o quão poderoso é. Acabamos de adicionar um ouvinte onclick e, com a ajuda da função, podemos realmente atualizar o nome Ou, essencialmente, devo dizer que simplesmente não estamos atualizando o nome. Na verdade, estamos alterando um elemento preexistente ou uma tag na página. Está bem? Então, esse é um poder do JavaScript aqui que você pode sentir. Portanto, não se trata apenas de alterar o texto, mas você pode até mesmo atualizar os estilos rapidamente. Está bem? E para demonstrar isso, digamos que, se eu clicar em alterar, eu, ao clicar em alterar, desejo mudar a cor de fundo de um elemento para outra coisa, posso até mesmo fazer isso com JavaScript. Então, vou apenas duplicar essa linha aqui. E aqui, digamos que eu queira mudar o estilo desse elemento em particular para vermelho, digamos, por exemplo. Então, posso dizer que, depois de obter esse elemento em particular, em vez do texto interno, posso ver estilo, tout, posso ver o plano de fundo Você pode ver que há tantas propriedades você tem acesso, ok? Você também tem acesso à cor do texto aqui. OK. Sem cor de texto. Desculpe por isso. É só a cor. Está bem? Então, estamos falando sobre a cor de fundo, então vou colocar a cor de fundo aqui, e aqui posso dizer vermelho. E vou ver se é isso. Agora, ao clicar em alterar, você verá que o texto também mudou e a cor de fundo agora é vermelha. Se quiser, você pode até mesmo alterar a cor, a cor do texto para a cor branca. Posso simplesmente duplicar essa linha e posso dizer que cor pode ser branca. OK. E você pode dizer, aqui, certo? Tão branco porque no vermelho, preto não parecia muito bom para mim. Ok, minha preferência. Mas isso é algo que é possível com o JavaScript. Você pode ver como isso pode adicionar muitos comportamentos aos elementos HTML, e uma página HTML estática agora tem comportamentos e coisas que são atualizadas dinamicamente nos eventos que você está realizando na página da web, ok Então, espero que você tenha conseguido acompanhar e espero que tenha sido útil. 11. Variáveis em JavaScript: Vamos começar falando sobre o que é uma variável. Agora, se você vem de alguma outra linguagem de programação, é muito provável que esteja ciente das variáveis como um conceito. Uma variável é como uma caixa de armazenamento onde você pode guardar uma informação para usar mais tarde. Agora, o que isso significa? Agora, se você estiver criando alguns programas grandes em qualquer tipo de linguagem de programação, é muito provável que queira armazenar algum tipo de informação. Por exemplo, se você estiver criando uma calculadora, talvez queira armazenar os números e o resultado para que você possa exibi-los para o usuário. Talvez você também queira armazenar números. O motivo é que você quer fazer cálculos com esses números, certo? Então, talvez você queira armazená-lo em algum lugar, e esses números precisam estar acessíveis, certo? Então é aí que entra o conceito de variável. Ele permite que você armazene as informações durante a execução do programa. Então é isso que a definição diz. Uma variável é como uma caixa de armazenamento. Uma caixa de armazenamento porque permite armazenar informações, certo? Então, a próxima parte diz onde você pode guardar a informação para eles usarem mais tarde, certo? Você pode pensar nisso como um rótulo que você cola em algo que deseja lembrar. Então imagine essa caixa aqui e digamos que você tenha uma caixa com o nome ou o nome rotulado aqui Em vez de rótulo, você está vendo o nome aqui. E dentro da caixa, você coloca o nome Alice. Agora, sempre que quiser usar o nome Alice, basta consultar a caixa de nome e usá-la em vez de digitar Alice todas Agora, esse é um exemplo muito simples. Obviamente, as variáveis também podem armazenar muitas coisas complexas, como frases e tudo mais, o que você pode usar durante a execução do programa, certo? Agora, criar uma variável em JavaScript é bem simples Então, vamos criar nossa primeira variável, ok, e veremos como podemos usá-la agora, vamos começar a criar uma primeira variável. Eu vou dizer que é como você cria variáveis em JavaScript e adiciona o nome da variável que você deseja ter. Digamos que eu queira armazenar a contagem para contar algo. Eu criei essa variável chamada count. Agora, depois dessa declaração, se eu salvar o programa, na verdade criei uma variável, mas não a estou usando. É por isso que não vejo nada na saída, certo? Agora, posso dizer ponto do console, fazer login aqui e posso imediatamente imprimir ou usar a Então, eu estou usando isso significa que estou simplesmente imprimindo agora. Ok, eu não estou realizando nenhum tipo de operação nas variáveis. Então, vou salvar isso e você verá indefinido sendo impresso aqui Portanto, essa variável não tem nada nela. Então você pode pensar que a caixa que você tem com a etiqueta não tem nenhum tipo de informação. Por quê? Porque você não atribuiu nenhuma informação a ele. Então você pode atribuir informações dessa forma, então você pode dizer que a contagem é igual a zero aqui. E se você salvar isso, verá zero sendo impresso no console, certo? Você pode tornar esse código muito mais conciso combinando essas duas declarações Então essa é a declaração, e essa é a parte de inicialização da criação de variáveis Então, o que eu posso fazer é realmente combinar esses dois, ok? Então, deixe-me pressionar Backspace e combinar isso, ok, algo assim Agora, se eu salvar isso, a saída será a mesma. Eu não vou mudar. Mas agora, em vez de três linhas de código, eu tenho duas linhas. Então é assim que você pode criar e fazer uso da variável. Obviamente, o uso que mostrei aqui é bem básico. Estou apenas imprimindo a variável. Está bem? E você pode usá-lo quantas vezes quiser durante a execução do programa. Depende totalmente de você. Então você pode ver aqui, certo? E você pode até mesmo usá-lo em operações aritméticas. Então eu posso dizer o log de pontos do console aqui, e eu posso dizer contar mais dez aqui. Você pode ver uma saída de dez bases. Ok. Agora, se a contagem for dez, você verá 1010, depois sendo impresso e poderá ver uma saída de 20 bases Você pode até mesmo alterar o valor da variável. Então, aqui em algum lugar no meio dos testes, posso dizer que a contagem é igual a 40, por exemplo Ok. E eu posso salvar isso e você pode ver por três vezes que a contagem é dez aqui, e então a contagem é 40, 40, 50, certo? 50 porque eu estou adicionando dez a ele. Portanto, essa é a explicação mais simples para as variáveis. Então, para tirar alguns pontos, uma variável é como uma caixa de armazenamento onde você pode guardar ou armazenar a informação que deseja usar posteriormente. Você pode pensar nisso como um rótulo que você está colando em algo que deseja lembrar, certo? Então aqui estou eu lembrando a contagem. Estou armazenando o valor da contagem e, na verdade, estou fazendo uso dele durante a execução do programa. A criação de variáveis envolve duas etapas. Primeiro é a parte da declaração e depois a parte da inicialização, certo? Agora, aqui, eu estou combinando inicialização e declaração em uma, ok? E você pode usar variáveis quantas vezes quiser durante a execução do programa, você quiser durante a execução do programa, pode até mesmo reatribuir o valor a uma variável quantas vezes quiser Então, eu posso até mesmo reatribuir isso novamente. Em vez de 40, posso fazer isso, digamos, 80 e posso salvá-lo. Você verá a mudança na saída. Está bem? Então, essas são variáveis para você, e espero que tenha sido bem clara e a explicação mais simples possível. 12. Nomes de variáveis: Agora, não é como se você pudesse criar apenas uma variável em um programa. Você pode criar quantas variáveis quiser em um programa. Então, se eu quiser, digamos, armazenar um contador aqui, contador é cinco, eu posso fazer isso e posso usá-lo em qualquer lugar do programa. No final do programa, posso dizer log de pontos do console e posso imprimir o valor. Opa. Me desculpe. Você pode imprimir o valor do contador aqui. OK. E você verá cinco sendo impressos. Agora, se há algo que permite criar muitas variáveis, você pode criar muitas nos programas quantas quiser, ok? Então, se existe algo assim, é essencial que a criação dessas coisas seja governada por regras, certo? Da mesma forma, para variáveis, você tem um conjunto de regras que precisa seguir ao criar e nomear variáveis Portanto, agora existem algumas regras, não muitas, mas algumas regras que você deve ter em mente ao usar variáveis. Agora, você não deve memorizar essas regras, mas geralmente com a prática, você vai se apossar delas, certo? E os IDs, se você estiver usando qualquer ID moderna, como o código do Visual Studio, os IDs também garantem que eles apontem qualquer tipo de erro que você esteja cometendo ou se desviando da regra Está bem? Portanto, se você está tentando nomear uma variável que não é permitida , o ID também ajuda a destacar o problema. Tudo bem? Então, falaremos sobre as regras uma por uma. Portanto, a regra número um que tenho aqui na tela é que os nomes das variáveis devem começar com uma letra, um dólar ou um sublinhado OK. Assim, você pode ter um nome de variável. Então, deixe-me esclarecer isso um pouco, ok. Então eu vou me livrar de tudo isso, ok? Vou apenas manter as coisas limpas. Então, aqui, essa variável está na verdade começando com uma letra, ok? Você pode ter variáveis começando com algo assim. Está bem? Esse é um nome de variável válido. Está bem? Você pode ter uma variável chamada nome de sublinhado aqui igual a, você pode dizer alto OK. Isso também é válido. Então, todos esses são nomes de variáveis válidos. Agora, você não pode ter um nome de variável começando com uma letra. Então você pode dizer um nome aqui. Isso não é válido, ok? Se você tentar fazer isso, você receberá um erro. Você pode ver, como eu destaquei, que os IDs ajudam você. Você pode ver que é como dizer “ identifique” que não é capaz de conseguir o que você está tentando fazer. Está bem? Agora, por que você gostaria de nomear a variável dessa forma? Um nome não faz nenhum sentido, certo? Então isso não é permitido. Vou apenas comentar isso, ok? Portanto, essa é uma das regras que você deve ter em mente. E, claro, se você não se lembrar disso, não se preocupe porque os IDs modernos, como eu disse, se você estiver usando qualquer tipo de ID moderno, os IDs o ajudarão a identificar qualquer tipo de desvio das regras, Então essa é a regra número um. Agora, a regra número dois diz que ela pode conter letras, dígitos, dólar e sublinhado após o primeiro caractere. Está bem? Então você pode ter variáveis. Portanto, você não pode ter uma variável chamada usuário. Isso não é permitido. Opa. Então, ele pegou a ativação do usuário. OK. Você não pode ter uma variável chamada usuário, algo assim, certo? Isso não é permitido porque começa com um número. Mas você pode ter uma variável chamada usuário um. Isso é permitido porque aqui o número está chegando no final ou depois do primeiro caractere. Você também pode ter um número após o primeiro caractere. Está bem? Isso também é permitido. Agora você pode até ter um dólar, então você pode ter um dólar aqui ou também pode ter um sublinhado Agora, o sublinhado é útil se você quiser separar duas palavras Então, se eu quiser ter o primeiro nome de sublinhado, é aqui que o sublinhado pode ser usado Está bem? Então, sim, essa é a segunda regra que menciona que os nomes das variáveis, não você, podem conter letras, dígitos, dólar e sublinhado após o primeiro caractere Agora, a terceira regra diz que os nomes das variáveis são sensíveis à chave, ok? Então, o que isso significa é que, se você tem dois nomes de variáveis, então deixe-me dizer que se o nome está aqui, ok, o nome é, digamos, Alice aqui Opa. Se for Alice aqui, digamos que você tenha mais um nome de variável que é o nome aqui Ok, e é o Tom, digamos. Então, esses são dois nomes de variáveis diferentes, e eu posso mostrá-los para você. Então você pode dizer Console dot log e imprimir o nome aqui. OK. E você pode dizer Console, log de pontos, e você pode dizer o nome aqui, algo assim. OK. Se você ver a saída, verá Alice e Tom como a saída Ok, então essa é a regra número três em que os nomes das variáveis diferenciam maiúsculas de minúsculas A próxima regra diz que os nomes das variáveis não podem usar uma palavra-chave reservada. Agora, o que são palavras-chave reservadas? Agora, em linguagens de programação, geralmente, existem palavras com um significado predefinido Por exemplo, let é uma palavra-chave. Tem um significado predefinido e é usado para criar variáveis, certo? Então, se você tentar criar uma variável com o nome deixado aqui, ok, isso não é permitido. Você pode ver. Então, se você passar o mouse sobre isso, dirá que let não pode ser usado em um nome nas declarações let ou cons Ok, então isso não é permitido, ok, então vou apenas comentar isso. Portanto, você não pode usar palavras-chave reservadas. Está bem? Agora, você dirá: Ah, eu tenho que memorizar todas as palavras-chave reservadas, de jeito nenhum, porque com a prática, começar a criar programas, você saberá o que são palavras-chave reservadas Ok, try é uma palavra-chave reservada, catch é uma palavra-chave reservada. Você saberá tudo isso à medida que aprende novos conceitos e, na verdade, isso vem com a prática. Nem eu tenho de cor a lista de palavras-chave reservadas. Está bem? Ao continuar praticando, você aprenderá que essas são todas as palavras-chave reservadas e, em lugares onde você esquece ou não lembra, os IDs ajudarão você, certo? Mas essa é uma regra a ter em mente. A próxima regra diz que os nomes das variáveis não devem ter espécies. Se você tentar adicionar um espaço entre o nome da variável, isso não é permitido. Se eu tentar adicionar um nome de variável, pois primeiro nome é igual a, digamos, dez, você pode ver que isso não é permitido. Isso não é permitido. Você tem que combiná-los. É uma única palavra. Você tem que combiná-lo dessa maneira. Primeiro nome. Essa convenção aqui, em que você tem duas palavras em um único nome de variável e a segunda palavra letra maiúscula, é conhecida como caixa de camelo OK. Então, aqui estamos transformando N em capital, colocando N como capital aqui para que seja legível. Há duas palavras. É isso que estamos destacando. O primeiro é uma palavra e o nome é uma palavra. Essa é uma boa prática de nomenclatura por aqui. Você não deve ter espaço no nome de uma variável. Portanto, não são permitidos espaços. A última coisa aqui é usar nomes descritivos. Na verdade, isso não é uma regra, mas, na verdade, é uma boa prática ter nomes de variáveis como descritivos Por exemplo, digamos que se eu tiver um nome de variável, se eu quiser armazenar, digamos H aqui. E se eu criar uma variável chamada A aqui e eu estiver armazenando H como, digamos, 22. Não tenho 22 anos, mas estou apenas dando um exemplo Está bem? Então, digamos que eu esteja tentando armazenar H e tenha criado esse nome de variável. Agora, para quem está lendo esse código, não sabe a que valor A está mantendo. Claro, tem 22, mas o que é? Na verdade, é um H, certo? Portanto, uma prática melhor aqui é ter um nome de variável adequado, em que o próprio nome da variável transmita o tipo de valor que a variável está mantendo Então, aqui está bem claro que essa variável foi criada para armazenar a idade de um usuário. Certo? Então, se você está construindo um projeto de gerenciamento de funcionários ou algo parecido, ok? E se alguém lendo seu código se deparar com essa idade variável , sabe que, ei, isso representa a idade do funcionário, ok? Então, é sempre melhor ter variáveis, nomes de variáveis descritivos, eu diria que, diferentemente, e é uma prática melhor ter descritivos, porque ter nomes de variáveis como X, nomes descritivos, porque ter nomes de variáveis como X, A, B, C, X um, X dois, isso não é uma boa prática, ok Sou totalmente contra isso. Então, sim, essa é a regra aqui ou não é realmente uma regra. Você não receberá nenhum tipo de erro se declará-lo como A ou X, mas essa é uma boa prática a ser seguida. Tudo bem. Mais algumas coisas que eu gostaria de destacar sobre a criação de variáveis aqui são que você também pode declarar várias variáveis em uma única linha Então eu posso ter um. OK. Um dois, e eu posso ter um três. Então, essas são três variáveis sendo criadas em uma única linha, ok? E você os separou por vírgulas. Você pode até mesmo inicializá-los aqui. Portanto, posso inicializá-los com valores diferentes, cinco, dez, e não inicializei A três aqui Eu posso até inicializar A três como 15, ok? E eu posso adicionar o log do console aqui. Então, deixe-me adicionar rapidamente log do console e mostrar a saída. Está bem? Este é um. OK. Isso é um dois, e isso é para um três. OK. E se eu salvar isso, você verá cinco, dez e 15. Agora, se eu me livrar do valor A dois aqui. Está bem? E se eu salvar isso, A dois é indefinido, ok? Então, estou trazendo de volta o valor A dois, que é dez aqui. Assim, você pode absolutamente ter várias variáveis criadas, declaradas e inicializadas em uma única linha Mas normalmente, não é assim que as pessoas fazem, ok? Com o JavaScript, a convenção geral é fazer isso. Então você gostaria de ter A 1, algo assim. Está bem? E então tenha A dois em uma linha separada e , em seguida, tenha A três em uma linha separada, algo assim. Então isso é o que é preferível a esse tipo de sintaxe porque é muito mais claro e fácil de ler, ok? Agora, você está vendo todas as marcas vermelhas aqui. Por quê? Porque os nomes das variáveis em um único programa precisam ser exclusivos ou, pelo menos, em um escopo. OK. Portanto, dentro de um escopo, o nome da variável precisa ser exclusivo. Então você pode ver aqui, eu estou tentando criar uma variável chamada A one, e você pode ver aqui A one já existe, certo? Então, se eu adicionar A 11 ou e22e3, tenho permissão para criar. OK. Então, sim, certifique-se de ter nomes de variáveis exclusivos. E isso também é uma convenção ou uma coisa, uma regra, que devo dizer que você deve conhecer sobre as variáveis. Você pode até mesmo encadear atribuições, para que eu possa criar variáveis como X, Y e Zt aqui Ok, e eu posso ter X igual a Y igual a Z é igual a 30, por exemplo. OK. E todos eles terão o valor de 30. Então, se você quiser, eu posso mostrar para você. Está bem? Então é X. Ok. E então aqui está Y, e aqui está s. Ok, eu salvar isso, você verá 30, 30, 30. Está bem? Todos eles têm o mesmo valor. Está bem? Então, sim, isso é sobre variáveis e como você pode nomeá-las e as regras que você deve ter em mente. Portanto, lembre-se dessas regras gerais, como tal, você não precisa exagerar com elas. Está completamente bem. Não se estresse com isso. Mas quando você começa a programar, ok, não quero me surpreender que, ei, isso não esteja me permitindo criar variáveis com esse nome. Claro que não, porque essa é uma regra que você deve conhecer. Tudo bem? E os IDs modernos, como eu disse, sempre ajudam você e estão lá para fornecer mensagens de erro detalhadas Então, espero que isso tenha sido útil. 13. var vs let vs const: Então, agora é hora de falarmos sobre diferentes formas de criar variáveis em JavaScript. Então, em JavaScript, você pode criar variáveis usando essas palavras-chave. Você deixou Const e estamos aqui, ok? Ou também é pronunciado como Guerra. Então, a guerra aqui é uma forma antiga de criar variáveis, ok? Então você pode usar o War e dizer que o contador é igual a 100 e você pode dizer Console ou Log aqui e você pode ver o contador aqui. Ok, vou adicionar ponto e vírgula. Agora você pode ver isso sendo impresso. Mas essa é uma forma antiga de criar variáveis. Normalmente, a partir de hoje, agora só usamos o que resta aqui. Então, se você quiser usar contador se quiser armazenar aqui, você pode dizer 100 e você pode dizer Console, log de pontos e um novo contador. Está bem? Então é assim que você cria variáveis hoje. Agora, o que é const Portanto, se você vem de alguma linguagem de programação diferente, estará ciente das constantes Portanto, const é a palavra-chave que permite declarar ou criar constantes Agora, constante é algo cujo valor nunca muda. Por exemplo, aqui, para um novo contador, posso reatribuir um valor, certo? Posso dizer que o contador é igual a 200. Está bem? E se eu imprimir o contador novamente, vou ver 200 como saída. Você pode ver aqui. OK. Mas haverá momentos ou cenários que você enfrentará quando não quiser que o valor de uma variável mude. Está bem? E nesse caso específico, você pode usar const. Então você pode dizer const aqui e digamos um valor de Pi Então você pode dizer 3,14. Esse é o valor de Pi, certo? Agora, vou copiar isso. E você pode imprimir o valor de Pi. Você pode ver 3.14. Agora, se eu tentar mudar esse valor aqui, se eu disser que Pi é igual a 400. OK. E se eu tentar salvar isso, você verá um erro de que a atribuição a uma variável constante não é permitida, ok? E você não vê a saída. E você também está vendo. Então, aqui você também pode ver como depurar seu erro. Então você está vendo que o ponto índice tem a linha número 17. E essa é a linha número 17, você pode ver no código do Visual Studio, que está destacando o número da linha Como alternativa, você pode até clicar aqui, então você pode clicar em Este é um link. Se você clicar aqui, você será direcionado para o código aqui. Você pode ver que esta é a linha onde está o erro. E se você passar o mouse sobre isso, verá que essa é uma linha que está causando o erro Atribuição de erro de tipo não detectado a uma variável constante . Tudo bem. Então, de volta ao console aqui. Então, se você se livrar dessa linha, sim. E se você salvar, obterá a saída conforme o esperado. Tudo bem. Então, constante é quando você não quer que o valor da variável seja alterado. E há muitos cenários nos quais você precisará criar constantes Por exemplo, se você estiver trabalhando em um aplicativo bancário, talvez queira criar uma variável ou armazenar um valor da taxa de juros. Agora, a taxa de juros não muda, certo? Está consertado. Portanto, desde que seja fixo para seu banco, para todo o projeto em que você está trabalhando. Se for fixo, talvez você queira ter uma constante porque não quer que você mesmo ou altere acidentalmente o valor da taxa de juros no programa posteriormente Além disso, se você estiver trabalhando em equipe, não quer que ninguém modifique esse valor. É por isso que você está mencionando explicitamente const ali E isso diz a todos que, ei, isso é constante e não deve ser modificado. Além disso, uma convenção aqui é que sempre que você estiver declarando uma constante, normalmente você verá constantes sendo declaradas em letras maiúsculas OK. Então, por exemplo, Pi aqui está em letras maiúsculas. Está bem? Então, sim, isso é sobre let const e where Está bem? Portanto, lembre-se de que você pode criar variáveis usando todas essas três palavras-chave. Você deve usar let quando quiser criar uma variável normal cujo valor pode ser alterado. R é uma forma antiga de criar variáveis. Não é usado hoje. Está bem? Eu não vi desenvolvedores usando-os perto de mim, certo? É uma forma antiga. Então, esqueça isso. Mas é bom saber, porque se você está trabalhando em base de código antiga, se você se junta a uma empresa, se você está trabalhando em um bit de código legado, é melhor saber, ok, que você possa atualizar, certo? Const, é claro, se você não quiser que o valor a ser alterado permaneça o mesmo, quero dizer, ok, você deve usar esse guardião Então, espero que isso tenha sido útil. 14. Tipos de dados: Ei, bem-vindo, e agora é hora de começarmos a falar sobre tipos de dados em JavaScript Portanto, o tipo de dados nada mais é do que os tipos de dados definem o tipo de valor que uma determinada variável está mantendo. Agora, se você vem de alguma outra experiência em programação como Java, Python ou algo parecido, então você deve estar ciente de quais são os tipos de dados, E para quem não sabe, isso é uma definição. Ele simplesmente define o tipo de valor que uma variável está mantendo. Agora, os tipos de dados em JavaScript são amplamente classificados em dois tipos Um são os tipos primitivos e, em seguida, temos os tipos de referência Então, vamos começar falando sobre tipos primitivos. Agora, esses são os tipos primitivos de tipos de dados em JavaScript. Então você tem um número, você tem uma string, booleana, indefinida. Sim, indefinido também é um tipo de dados e você tem nulo. Então, o número, como diz, representa números inteiros e números de ponto flutuante Está bem? Então, se você quiser números, somos todos eles, um, dois, três e até números de ponto flutuante, os números com pontos decimais como 1,1, 1,2, todos eles se enquadram na categoria de número Então você tem cordas. Agora, string nada mais é do que a sequência de caracteres como seu nome e todo o nome da cidade, nome do país, tudo isso vem em string. Booleano, que tem apenas dois valores, verdadeiro ou falso, então temos indefinido, que significa que nenhum valor foi atribuído, e então você tem Agora, null representa que o valor está ausente intencionalmente Agora, deixe-me demonstrar o número aqui. Então, aqui, o que eu posso fazer é criar uma variável chamada H. Eu posso atribuir-lhe um número. Está bem? Digamos que H seja ou digamos que H seja 70 aqui, qualquer tipo de número. E você pode fazer o log do console aqui, o, e você pode imprimir em cada um. OK. E você verá a saída aqui. Você pode ver que 70 é a saída. Está bem? Agora, se você quiser imprimir em que tipo de variável isso é , você pode usar type off. Então eu posso dizer que digite fora. Você pode ver a sugestão. E adicione um espaço e, em seguida, clique em Salvar. Então você pode ver que o tipo dessa variável é um número. Está bem? Agora, se eu mudar isso para decimal, então se eu disser 70,5 aqui, é claro, H não pode entrar em decimal, mas eu ainda vou fazer isso para fins de demonstração, você verá que o tipo de H ainda é um número Portanto, ao contrário de outras linguagens de programação como Java, em Java, você tem tipos de dados separados para valores de ponto flutuante e valores inteiros Mas em JavaScript, isso não existe, ok? Dependendo do tipo de valor que está mantendo, tudo bem, pode ser um número, não um número pode ser um valor decimal ou até mesmo um número inteiro Então, aqui, esse número inteiro, esse também será um número como vimos. Está bem? Então esse é o número. E então temos cordas. Então, aqui, se você rolar para baixo, eu vou te mostrar o que são strings. Então você pode dizer let name aqui e você pode adicionar, digamos, John ou Alice, qualquer coisa, e então você pode dizer Console, Tot og aqui, e eu posso dizer nome aqui OK. Agora, é claro, isso vai ser impresso em John, mas você pode dizer tipo de e salvar isso e verá uma string sendo impressa. E isso porque o tipo de John nada mais é do que uma corda. Está bem? Agora, vou criar mais uma variável aqui. OK. Eu posso criar uma cidade aqui e você também pode atribuir ou até mesmo criar uma string usando um único código. Então, aqui estou usando o double de, você verá. Você pode até mesmo usar um único código aqui. Agora, a cidade está dizendo que Jose está aqui, ok. E vou copiar isso aqui, essa parte. E em vez de nome, você pode ter uma cidade e salvá-la, você ainda verá que está criando uma string. Está bem? Então, a string pode ser criada de várias maneiras, ok? Você pode ver usando códigos duplos e também usando código único. Agora você pode até mesmo concatenar uma string, ok? Então você pode dizer Console. Desculpe, confirme o registro de pontos do console aqui, e você pode dizer que pode dizer o nome, ok. E eu vou dizer mais, e você pode ver muito espaço no meio, e você pode dizer uma cidade como esta. Você verá John San Jose. Está bem? Agora, John Sin Jose não faz sentido, mas se você tiver variáveis separadas para nome e sobrenome, é claro que pode concatená-las dessa forma para obter um Agora, vejo que muitos desenvolvedores preferem códigos únicos para criar strings ao trabalhar com JavaScript. O próximo tipo de dados que temos é booleano. Está bem? Agora, o booleano simplesmente representa dois valores, verdadeiro ou falso Então, eu posso criar um booleano aqui ou posso dizer que se graduou aqui, e pode ser verdade aqui e eu posso dizer Console, ponto, registro, e eu posso dizer digitar e posso dizer graduado Agora, você verá Boolean como a saída aqui, ok? Você também pode digitar como graduado e verá a verdadeira saída de AE. Tudo bem? Agora, os tipos de dados booleanos são, na verdade, muito usados quando você está tomando decisões, ok? decisão significa que, se um aluno se formou , provavelmente você pode emitir um certificado para ele, certo? Ou você pode parar de calcular a frequência. Se o usuário for administrador, você poderá ter um booleano chamado I Admin Se um usuário for administrador, conceda a ele acesso a determinados recursos do aplicativo. Se ele não for administrador, restrinja-o de todas essas coisas. Então, dependendo do valor da variável em que o administrador graduou, as decisões são tomadas e isso está sendo muito usado na tomada de decisões. Tudo bem? Então, esse é um caso de uso para boolean. Simplesmente representa verdadeiro ou falso. Então você tem indefinido. Então, indefinido significa que a variável foi declarada , mas ainda não recebeu um valor, ok? Então você pode dizer log de pontos do console aqui. E deixe-me criar uma variável primeiro. OK. Então, eu vou ter uma variável, área esquerda. E digamos que eu não tenha nenhum valor para isso. Está bem? Vou adicionar uma área aqui, ok, e você verá indefinido sendo impresso Está bem? Agora, se eu disser tipo de , você verá indefinido sendo impresso Está bem? Portanto, isso é indefinido, em que nenhum valor é realmente atribuído à variável que foi criada Agora, o próximo que temos é nulo, que representa a ausência intencional de um Então, digamos que você tenha uma variável criada e ainda não queira atribuir um valor a ela. Então eu posso criar uma variável chamada valor vazio. Vamos chamá-lo de valor vazio em si. OK. E eu terei null atribuído a ele. Agora, se eu disser log de pontos do console e se eu disser valor vazio, vou ver null sendo impresso no console Está bem? Agora, posso dizer tipo de e salvar isso e você verá que tipo disso é objeto. Então null é na verdade do tipo objeto, ok? Mas isso é, na verdade, um tipo de dados de tipo em JavaScript. Está bem? Então, sim, isso é sobre Null aqui. Está bem? Vou me livrar disso e faremos com que isso seja impresso. Agora, antes de passar para o tipo de referência, eu só quero destacar uma pequena coisa aqui. Quando dissemos o tipo de valor vazio aqui, que é nulo, vimos o objeto sendo impresso Mas, na verdade, essa coisa tem um valor nulo dentro dela, certo? Portanto, o ideal é imprimir nulo se nulo for um tipo de dados OK. Agora, quero destacar um artigo sobre stack overflow aqui, que diz: Por que o tipo de objeto é nulo, Agora, aqui, isso foi proposto idealmente. Então, se você acessar este link aqui, essa foi proposta. A alteração demorou 1 segundo, não essa, mas essa é a única. OK. Então, isso foi proposto para alterá-lo para nulo aqui Está bem? Então, esse é o artigo inteiro aqui, e esse é o stack overflow OK. Então, isso foi proposto para mudar, mas na verdade foi rejeitado. Então, se você executar esse código aqui, ainda verá o objeto o, como saída. Mas isso não importa, ok? Lembre-se de que você pode ter valores nulos em JavaScript. Você pode ter variáveis com valores nulos. Isso é o que importa. Agora vamos passar para os tipos de referência. Então, falaremos sobre dois. Um é objeto, e então temos algo chamado Rs. Agora, o que é um objeto? Agora, o objeto é realmente usado para armazenar dados complexos na forma de pares de valores-chave. Está bem? Agora, por que precisamos armazenar dados complexos? Digamos que eu esteja criando um aplicativo e, no meu aplicativo, deseje acompanhar um usuário. Tudo bem. Agora, vou dizer deixe o usuário. Então, digamos que eu queira acompanhar os usuários H. Digamos que os usuários H tenham 22 anos, e eu também queira acompanhar o nome do usuário aqui. Está bem? E digamos que o nome seja John, digamos, por exemplo, tudo bem. Agora eu tenho duas variáveis que representam um único usuário. Agora, digamos que se meu aplicativo dimensionado e eu tivesse centenas e milhares de usuários, o que você faria nesse caso? Você criaria essas muitas variáveis? Absolutamente não. Está bem? Então, uma coisa boa é agrupar isso. Então, essas duas propriedades ou essas duas variáveis pertencem a um único usuário, certo? Então, por que não agrupá-los e armazená-los como objeto? Então, o que você pode fazer aqui é uma abordagem melhor é ter pessoa, porque em vez de pessoa, eu vou ter usuário porque estamos falando sobre usuário aqui, ok? Eu vou ter o mesmo que agora aqui, o que eu vou fazer é ter um par de lugares encaracolados, algo assim E dentro disso, terei pares de valores-chave, que serão os atributos desse usuário em particular. Está bem? Então eu posso dizer o primeiro nome, ok. O nome é John aqui. OK. E então eu posso ter H e H é, digamos, 22. Tudo bem. Agora, o que posso fazer é se você rolar para baixo, posso dizer que posso realmente acessar propriedades individuais. Está bem? Eu posso dizer ponto do usuário, e você pode ver o nome e H. Eu tenho acesso ao nome e H, então eu posso acessá-lo desta forma. Está bem? Um erro que cometi aqui, eu disse que é um par de valores-chave, mas na verdade estou me igualando a ser usado lá. Isso não está certo. Então, vou mudar isso para Colin e você verá aqui, ok, Console Eu também perdi o DotLog. O que eu estou fazendo? Então agora você pode ver 22 sendo impresso no console, certo? Ponto do usuário H. Você também pode imprimir e acessar o nome aqui. Isso é nome, certo? Se desejar alterar o nome, você pode alterá-lo como nome do ponto de usuário e alterá-lo para, digamos, Alice OK. E então, se você tentar acessar isso novamente, verá Alice como um novo nome Você pode ver aqui, certo? Agora, isso é o que você pode fazer com o objeto. Você pode agrupar atributos relacionados. Agora, isso é um pouco diferente de linguagens de programação como Java. Em Java, você não pode criar um objeto diretamente. Primeiro você precisa ter uma aula, certo? Então, primeiro você define uma classe que age como um modelo e, em seguida, instancia a classe e cria um objeto, e então você pode ter variáveis ou membros de classe dentro dessa classe específica Mas não é assim que funciona no Ja Script. Em Javascript, você pode criar objetos como esses diretamente , e eles podem ter pares de valores-chave, e isso é muito conveniente. Certo? Agora, vamos ver o que acontece se você tentar imprimir , então eu farei o controle. E vou tentar imprimir no usuário aqui. OK. Agora, se você tentar imprimir no usuário, verá que está vendo o objeto inteiro sendo impresso. O nome é Alice, 22 anos. Está bem? E você pode até mesmo acessar as propriedades individuais. Agora, mais uma coisa que eu gostaria de destacar aqui é, eu disse, você pode acessar propriedades individuais como essa, certo? Isso é o que vimos. Agora, essa forma de acessar propriedades individuais é conhecida como notação de ponto porque você está usando o ponto aqui, um ponto aqui, o símbolo, ok? E você o está usando com o objeto e está tentando acessar seu atributo. Então é isso que você está tentando fazer, certo? E essa sintaxe é conhecida apenas como notação de pontos. Tudo bem. Portanto, há algo que você pode ter em mente, certo. Mas sim, o ponto crucial é que você pode criar objetos como esses no Ja Script Você também pode ter mais atributos, como eu posso ter atributos como cidade aqui, posso dizer São Francisco. Ok, algo assim. OK. E você pode ver aqui, isso sendo impresso. E eu posso acessar a cidade também usando a notação de pontos. Tudo bem? Então, esses são objetos em JavaScript. Vamos continuar falando sobre matrizes. Agora em matrizes. Agora, matrizes são um tipo de referência em JavaScript usado para armazenar vários valores Então, digamos que você esteja criando um programa e queira armazenar uma lista de valores, ou vários valores, digamos. Agora, se você estiver disposto a armazenar uma lista de frutas, por exemplo, estou apenas dando um exemplo. Então, como você faz isso com variáveis? Você terá uma variável, uma fruta. E você vai atribuí-lo ao valor aqui, certo? Se você quiser armazenar dez frutas, você criará dez variáveis. Mas não é assim que deveria ser. Isso não é conveniente, certo? Gerenciando dez variáveis. Em vez disso, se você quiser armazenar dez valores ou vários valores, mais de um, poderá criar uma única variável. Você pode chamá-lo de matriz. Você pode chamá-la do que quiser, fruta, e ela será do tipo matriz. Então, aqui, vou usar colchetes aqui. E dentro dos colchetes, terei a lista de valores um por um Então, a primeira é, digamos que maçã, eu posso comer oops Eu posso comer banana aqui. Ok, e eu posso comer, digamos, morango Ok, algo assim Então isso é uma matriz aqui, ok? E posso dizer que o log de pontos do console está aqui. Eu posso dizer fruta. E se eu imprimir isso, você verá maçã, banana, morango OK. E vamos dar uma olhada no tipo de fruta. OK. Você verá que é um objeto aqui. Está bem? Então, sim, veja como você pode criar e usar matrizes em JavaScript. 15. Digitação estática ou dinâmica: Agora vamos falar sobre a linguagem de programação de tipagem estática e tipada dinamicamente Agora, primeiro, falaremos sobre a digitação estática. Então, o que é linguagem de programação de tipagem estática? Então, nesse tipo de linguagem de programação, você precisa declarar o tipo de cada variável explicitamente E depois de declarar o tipo da variável, o tipo da variável não pode ser alterado durante a execução do programa. E um bom exemplo disso é o Java. Então, se você programou em Java, você saberá ou mesmo se você não programou, vou te dar um exemplo muito simples Digamos que você queira armazenar cada usuário. Está bem? Então, aos 30 anos, esse é um código Java que estou tentando escrever, ok? Agora, aqui, você não pode simplesmente declarar variáveis dessa forma Você precisa especificar o tipo aqui. Está bem? Então você dirá inteiro, cada um é igual a 30 Agora, você não pode atribuir uma string a essa variável específica. Tudo bem. Isso simplesmente não é aceitável em Java. Está bem? Imediatamente , você receberá um erro de que, Ei, H foi declarado como inteiro e está esperando um número inteiro Portanto, durante a execução do programa, você não pode alterar o tipo. Isso não é permitido. Mesmo que seja qualquer tipo de string, ok, se você adicionar Java aqui dessa forma, isso não é permitido porque ainda é uma string. Portanto, este é um exemplo de como as linguagens de programação de tipagem estática Se você tentar fazer algo assim, eles apresentarão um erro de tempo compilado. Tudo bem? Agora, quando você fala sobre JavaScript, o JavaScript é uma linguagem de programação digitada dinamicamente Agora, o que isso significa? Portanto, em JavaScript, as variáveis podem alterar o tipo durante a execução do programa. Tudo bem? Agora, primeiro de tudo, vamos reconhecer que, em JavaScript, você não precisa declarar o tipo da variável que está criando Então, digamos que se eu tiver uma variável chamada minha variável e deixe-me dizer, ok, direi que agora não atribuí nenhum tipo de valor a ela, ok? Então, vou dizer que o log de pontos do console está aqui. Vou dizer que minha variável, podemos vê-la impressa. É indefinido, certo? Agora, se eu usar o tipo de operador e tentar imprimir o tipo dessa variável, você verá que o tipo é indefinido. Tudo bem? Agora, deixe-me atribuir essa variável em particular. Então espere um minuto. Vou apenas duplicar isso, o. Agora, deixe-me atribuir a essa variável em particular um número inteiro Está bem? Então, vou rolar até aqui para melhor visibilidade e, digamos, atribuir a ela um, agora o tipo dessa variável é número porque ela contém um número, certo? Então, o tipo mudou para número. Agora deixe-me te mostrar mais uma mágica. Se eu mudar isso aqui, o, e se eu modificar isso para ser uma string, você verá que o tipo agora é string, que significa que agora está contendo uma sequência de caracteres. E a corda pode ser qualquer coisa. Pode ser uma string como o Jascript aqui. OK. E você verá isso. E se eu duplicar essa linha, deixe-me duplicar isso também OK. Então, se eu me livrar disso, tudo bem. E se eu salvar isso, você verá o Ja Script sendo impresso. OK. E também imprimirá o número, como uma coisa normal. Está bem? Então você pode ver como o tipo da minha variável, que é uma variável que criamos, está mudando dinamicamente durante o curso da execução do programa, certo? E esse é um recurso da linguagem digitada dinamicamente, certo E o JavaScript é classificado como linguagem de tipagem dinâmica E esse é o exemplo ou uma evidência de como ele se comporta. Agora, deixe-me dar mais um exemplo em vez de string e número, se eu tentar atribuir a ele um booleano, digamos, ok? Se eu salvá-lo, você verá que é booleano e é verdadeiro. Agora, um ponto a ser observado aqui é que não estou criando novas variáveis. É a mesma variável, que foi criada uma vez, e está sendo reutilizada e atribuída a diferentes tipos de valores, certo? Então, está mudando rapidamente durante o curso da execução. Então isso é Javascript. Então você precisa lembrar que em JavaScript as variáveis podem mudar o tipo durante a execução do programa, ok? E ao declarar uma variável em JavaScript, você não precisa especificar o tipo Portanto, é uma linguagem digitada dinamicamente. Agora, usamos esse tipo de operador. É um operador, em primeiro lugar. Ok, nós usamos esse tipo de palavra-chave, eu diria, algumas vezes. E o uso do tipo de palavra-chave, você sabe, como é usado para obter o tipo de uma variável aqui. É para isso que o estamos usando, certo? Uma coisa que eu gostaria de destacar aqui, esse tipo de operador. Dentro do script de Ja, ok? Então, é um operador. Eu usei esse termo como se usássemos o tipo de operador e tudo mais. Não quero que os alunos se confundam. É por isso que estou mencionando explicitamente que esse é um operador em JavaScript, certo E espero que este exemplo seja bem claro sobre como o Ja Script é uma linguagem de programação de tipagem dinâmica, e espero que isso seja útil 16. Expressões e operadores: Agora é hora de falarmos sobre mais alguns conceitos, como expressões, literais e operadores em JavaScript. Agora, o que são expressões? Agora, expressão é qualquer unidade de código válida que produz um único valor. Por exemplo, aqui, se eu escrever no console, se eu disser três mais três, obtenho a saída como seis. Agora, isso é uma expressão, por causa dessa afirmação, ela produziu um único valor, certo? Então, isso é uma expressão. O que é literal? Um literal é um valor fixo que você está escrevendo diretamente no código Então, aqui, três é um literal. Está bem? Então, quando eu digo que A é igual a 30, por exemplo, 30 aqui é um literal, e tudo isso é uma expressão, certo? Porque isso é uma tarefa por aqui. Está bem? Então, o que está acontecendo aqui é que o valor no lado direito está sendo atribuído à variável no lado esquerdo. Está bem? Então isso é o que é um literal Agora, existem vários tipos de literais. Por exemplo, há algo chamado como eu posso dizer, há algo chamado como se eu ampliasse aqui. Há um literal numérico, então esse é um literal numérico Há um literal baseado em string, então eu posso dizer JavaScript aqui Isso é uma corda aqui, certo? Você pode até ter literais booleanos. Está bem? Então, eu posso dizer verdade aqui. Isso é um literal booleano OK. Portanto, os literais podem ser de vários tipos, literais numéricos, literais, literais booleanos, e isso depende do tipo do valor que você está adicionando no Agora, estou adicionando isso no console, mas na verdade, você estaria usando isso no código. Então, se você disser que A é igual a verdadeiro, então verdadeiro aqui é um literal booleano Espero que isso esteja fazendo sentido, certo? Então é isso que A literal é. Agora, temos clareza sobre expressão, expressão é qualquer coisa que seja avaliada como um único valor Por exemplo, se você estiver fazendo algum tipo de cálculo aritmético ou se estiver inicializando algo, qualquer tipo de cálculo ou inicialização que forneça um valor, isso é o que é uma que é Agora, o que são operadores? Agora, os operadores em JavaScript são símbolos que executariam operações nas operações. OK. Então, algumas terminologias aqui Então, além disso, há uma operadora aqui, ok? A divisão é um operador menos é um operador. A multiplicação, que é representada dessa forma como um símbolo de asterisco, também é um operador Então, esses são todos os operadores que também estamos usando na vida real para fazer adições, abstrações, divisões e multiplicações, Então, esses também são operadores em linguagens de programação como JavaScript. Agora, sempre que você quiser usar esses operadores, o que você faria seria dizer três mais três, certo? Ou você pode usar variáveis, certo? Então você pode dizer A mais B, onde A e B têm alguns valores, respectivamente. OK. Então, aqui, o que está acontecendo é que você está usando esse operador, então sua vantagem é o operador. Mas esses dois valores nos quais a operação está sendo executada são conhecidos como Opernt. Ok, eu repito aqui. Então, aqui, mais está um operador. É um símbolo. falando sobre o tipo de operação que você deseja fazer. Você quer adicionar duas coisas, certo? Agora, as duas coisas que você está adicionando três aqui, três, três e aqui, A e B, são impressões porque a operação de adição está sendo executada nesses dois valores Espero que isso esteja fazendo sentido. Tudo bem. Então, aqui, se você ver três mais três produzidos seis. Então, três e três são impressões e mais é um operador. Certo? Então é isso que isso diz. Operadores em JavaScript são símbolos que realizam operações. Qual é a operação que está sendo executada? Adição. Ele executa a operação em operns Quais são os operns? Três aqui neste caso, e A e B neste caso, certo? E eles são símbolos, diz. Portanto, é um símbolo mais divisão menos multiplicação. Esses são todos símbolos, certo? Agora, isso é o que os operadores são, certo? E dependendo da linguagem de programação que você está aprendendo, os operadores terão classificação. Portanto, existem tipos de operadores em JavaScript. Está bem? O primeiro tipo são operadores aritméticos Agora, é claro, operador, os operadores basicamente são usados para realizar cálculos aritméticos Como adição, subtração, multiplicação, divisão, você tem módulo, você tem incremento, decréscimo divisão, você tem módulo, você tem incremento, decréscimo. Todos esses são operadores aritméticos, ok? Operadores de atribuição, ok? Portanto, os operadores de atribuição são iguais a. Se você está atribuindo algo, você está fazendo uma tarefa de adição, você está fazendo uma tarefa de subtração, tarefa de multiplicação ou tarefa multiplicação Agora, depois dos operadores de atribuição, vêm os operadores de comparação, certo? Agora, o que são operadores de comparação. Operadores de comparação, como o nome sugere, são usados para comparar duas coisas, certo? Ou compare operons. Então você tem igualdade, igualdade estrita, desigualdade e, em seguida, desigualdade estrita, maior que menor que, maior que igual a, menor que igual Está bem? Esses são os poucos operadores de comparação que existem, certo? Operadores lógicos. Agora, eles são usados para realizar operações lógicas, e/ou fazer um nó, certo? Você tem operadores unitários, que são incremento, tipo de nó lógico de decréscimo E então você tem operadores ternários, o, que tem esse tipo de Está bem? Então, se você vem de alguma outra linguagem de programação como Java, você sabe o que é um operador ternário, e você tem um similar no Ja Mas se você não conhece nenhuma outra linguagem de programação, tudo bem. Vamos cobrir tudo isso. Tudo bem. Agora, essas são as classificações, certo, e esse é o conceito de expressão, literal e operadores Então, espero que você tenha conseguido acompanhar até agora, e espero que tenha sido útil. 17. Operadores aritméticos: Então, agora é hora de examinarmos os operadores aritméticos Portanto, esta é uma lista de operadores que são classificados como operadores aritméticos Obviamente, você deve estar familiarizado com alguns deles: gradação, subtração, multiplicação, divisão Como se também estivéssemos usando isso em nossa vida real. Então, vou colar um exemplo aqui, ok, que nos dará uma ideia de como adição, subtração, multiplicação e divisão podem dar Então, se eu salvar isso, você verá aqui. Ok, deixe-me diminuir um pouco o zoom. Ok, então você pode ver o resultado corretamente. Assim, você pode ver que o resultado da adição é o resultado da subtração sete, multiplicação 24 e a divisão é cinco. Está bem? Agora, se eu mudar isso para, é claro, isso fica claro, resultado da adição, cinco mais três. Ok, dez menos três, é dar sete. Está bem? Se eu mudar isso para 13, você verá a saída ficar negativa. Então isso também é possível. Está bem? Se você rolar até aqui, resultado da multiplicação é simples, ok, será um número positivo, a menos e até que você esteja tentando multiplicar por zero, a saída será zero Está bem? Se você rolar para baixo o resultado da divisão, você receberá um número aqui, ok? B 20 é divisível por quatro. Agora, se eu mudar isso para sete, digamos que o resultado da divisão aqui está em decimais. Tudo bem Portanto, se não for um número inteiro, você obterá um resultado decimal como resultado da divisão. Tudo bem Agora, isso é sobre multiplicação, subtração, adição. Essas são as operações aritméticas padrão que também fazemos no nosso dia a dia. O que é módulo Portanto, se você vem de uma linguagem de programação como Java, deve estar ciente do módulo Mas caso você não saiba o que é módulo, vou te dar uma demonstração, ok, então vou ter o módulo aqui. Ok. E o operador do módulo é representado com a ajuda de um símbolo de porcentagem aqui Ok. E aqui, eu vou escrever o módulo Ok, algo parecido com isso. Agora, vamos ver o que é módulo, ok? Então, o módulo está aqui e eu imprimirei a saída como resultado do módulo Agora, em vez de dividir, vou mudar isso para porcentagem. Ok, porque estamos usando o operador de módulo aqui Eu também às vezes algumas pessoas o pronunciam como módulo módulo, o Existem diferentes maneiras de dizer isso Assim, você pode ver que o resultado do módulo é zero agora. Está bem? Então, o que o módulo fará é fornecer o restante após realizar a divisão A divisão faz isso, ela divide e dá o resultado. Mas o módulo executará a divisão e fornecerá o restante. É isso que ele faz. Então, digamos que se você disser que 20 é claramente divisível por quatro, a saída será zero Também é divisível por cinco, então a saída será zero, você pode ver Mas com seis, você obterá a saída como duas, ok? Porque 18 é divisível por seis, certo? Seis três são 18 e dois são o restante. Então você está obtendo o restante como resultado, dois aqui Está bem? Se você tentar dividir isso por sete, deverá obter seis como saída. Você pode ver seis porque 14 é divisível por 772 14, certo? E então seis é o restante, certo? Então, seis é o que você está recebendo como saída. Então, basicamente, o que o Modulus faz é fornecer o restante depois de realizar a divisão. Tudo bem Agora, você me perguntaria, por que você quer tal operadora. Por exemplo, por que você quer um resto depois de realizar o di Okay, existem vários casos de uso cenários ou requisitos nos quais você gostaria de realizar ou obter o restante do resultado Um exemplo que posso dar aqui é identificar o número par e ímpar Está bem? Então, digamos que você esteja escrevendo algum código ou programa em que queira identificar se o número fornecido é par ou ímpar O que você faria normalmente é usar esse operador restante aqui, módulo, ok Então, sete módulos e você fará isso com dois. Ok. Então, você obterá a saída como uma. Então esse é um número ímpar Está bem? Seis módulo dois, você obterá zero como o restante Ok. Então, o que isso significa é que seis é um número par. Está bem? Então, dessa forma, você pode usar o módulo e obter o resultado Então, isso é sobre módulo. Você também tem algo chamado incremento, ok? Então eu vou me livrar disso. Está bem? Isso está incorreto agora. Ok. Agora vou te mostrar algo chamado incremento. Agora, o operador de incremento é usado ou representado mais ou menos assim Está bem? Então, deixe-me rolar para baixo. E digamos que, se você tem um valor, digamos que eu tenha uma variável X igual a cinco, ok? E eu posso dizer que o log de pontos do console aqui, eu posso imprimir a saída de X, ou o valor de X. Você verá cinco como saída Está bem? Agora, deixe-me também trazer isso aqui. Está bem? Eu vou entender isso e posso dizer em um resultado incrementado. Está bem? Agora, isso ainda não foi incrementado. Você está atribuindo cinco e está recebendo cinco como saída Está bem? Mas o que você pode fazer é aumentar o valor de, digamos, se quiser aumentar o valor de X em um. Portanto, há duas abordagens: você pode dizer que X é igual a X mais um. Está bem? Isso é factível. Se você salvar isso, você obterá a saída como seis, ok? Mas há uma maneira alternativa em que você pode simplesmente usar esse operador de incremento e obter o mesmo resultado de forma abreviada Portanto, esta é uma versão abreviada desta declaração aqui Você está dizendo que X é igual a X mais um, mas na verdade você está apenas incrementando o valor de X. Então, por que não fazer dessa forma? Tudo bem E você pode incrementá-lo quantas vezes quiser. Então eu posso incrementá-lo mais uma vez, e você verá a saída como sete. Tudo bem Então isso é o que é o operador de incremento. É uma versão abreviada de incrementar o valor Tudo bem? Isso é sobre incremento, então você tem algo chamado de decréscimo Agora o decréscimo também funciona de forma semelhante, ok? Então, aqui, se eu me deixar simplesmente copiar isso. Ok. Então, em vez de X, o que eu vou fazer é pegar um exemplo de Y aqui. Está bem? E deixe-me dar a você a versão longa disso. Está bem? Então, o que eu faria é me livrar disso e dizer: Y é igual a Y menos um Está bem? Então essa não é uma versão abreviada, ok E aqui, eu vou dizer resultado diminuído. Ok, e eu estou imprimindo o valor como Y. Tudo bem. Agora, se eu salvar isso, você verá que o resultado diminuído é quatro, certo? Agora, eu posso usar o operador de decréscimo aqui. Ok, e eu posso dizer aqui, y menos menos. Isso me dará o mesmo resultado. Eu posso fazer isso duas vezes ou quantas vezes eu quiser, ok. Então, essencialmente, é semelhante ao operador de incremento, ok, mas é usado para diminuir o valor. Tudo bem Agora, o operador de incremento é usado para incrementar o valor de forma abreviada, como vimos, e o operador de decremento é usado para diminuir o valor de forma abreviada o valor de forma abreviada, como vimos, e o operador de decremento é usado para diminuir o valor de forma abreviada, como estamos vendo aqui. Tudo bem Então, esses são os operadores aritméticos que existem Tudo bem Espero que isso esteja claro, e é importante que, a partir de tudo isso, você entenda. Portanto, o resto dos operadores são simples, mas eu diria é importante que você entenda como esse modelo funciona. E eu recomendaria que você também experimentasse alguns exemplos no console do navegador. Você pode digitar diretamente. Você não precisa do Visual Studio Code para isso. Assim, você pode digitar diretamente aqui e ver como esse operador se comporta com diferentes conjuntos de valores Está bem? Então, espero que isso seja útil e que você tenha conseguido acompanhar. 18. Operadores de atribuição: Esses são os operadores de atribuição que temos no Ja Script, e vamos começar a falar sobre cada um deles. Então, esse primeiro é algo que vimos algumas vezes até agora. É usado para atribuir o valor do lado direito à variável do lado esquerdo. Agora eu adicionei um exemplo muito simples que ilustra o que é essa tarefa. Ok, deve ser muito fácil e nem um pouco difícil para você entender. Está bem? Então, estou atribuindo um valor de cinco a essa variável A, e estamos apenas imprimindo esse valor Tudo bem? Então, temos a atribuição de adição. Está bem? Então, o que isso faz é também realizar a adição junto com a tarefa. Então, deixe-me dar um exemplo disso. Então, vou adicionar um pouco de código aqui. Você pode ver a tarefa de adição aqui na prática. Eu criei uma nova variável, chamando-a de B. E o que estou fazendo aqui é adicionar três a B. Então, uma maneira é fazer algo assim. Está bem? Então, deixe-me mostrar isso primeiro. OK. E eu vou comentar isso. Agora, se eu salvar isso, você verá a saída como 13. Foi inicializado para dez, mas a saída agora é 13. Tudo bem. Agora, se eu comentar isso, e se eu descomentar isso, isso é o mesmo que escrever isso. A saída seria a mesma. Então, o que isso faz é que é equivalente a B é igual a B mais três. Certo? Então, ele adiciona três a B primeiro e depois atribui o valor total ou o resultado à variável B. Está bem? E então estamos imprimindo para ver a saída. Então é assim que a adição e a atribuição funcionam juntas. Essa é essencialmente uma forma abreviada ou conveniente, devo dizer, realizar a adição ou adição um número em uma variável específica Agora, assim como temos a atribuição de adição, também temos a atribuição de subtração O que isso faz é essencialmente fazer o mesmo trabalho que a atribuição de adição fez. Digamos que temos essa variável 15 e se você quiser subtrair cinco dela Você pode ter uma roupa como essa, tudo bem. Vou salvar isso e você verá dez aqui, ok, ou você pode comentar isso, e você verá a mesma saída aqui usando essa atribuição de subtração abreviada Então, ele está basicamente realizando a subtração primeiro da variável e depois atribuindo o valor à variável, e então estamos imprimindo, certo Então é isso que é a atribuição de subtração. Em seguida, vem a atribuição de multiplicação. OK. como uma versão abreviada da multiplicação de um valor em Também é uma versão similar, como uma versão abreviada da multiplicação de um valor em si mesmo, ok? Ou não em si mesma. Essencialmente, você está na verdade multiplicando um valor uma variável e, em seguida, atribuindo esse valor à mesma Está bem? Agora, isso é equivalente a, como você pode ver aqui nos comentários que escrevi, D é igual a D em dois, então vou demonstrar isso primeiro. OK. Você verá que a resposta é 12. Está bem? Mas se eu comentar isso e se eu descomentar isso, você verá a saída novamente como 12 em si Então, o que isso está fazendo é expandir para D igual a D em dois OK. E essa é apenas outra versão abreviada de fazer a mesma coisa, mas de uma forma curta e concisa Você tem algo chamado de designação de divisão, se você ver aqui Está bem? É uma forma semelhante à qual permite dividir uma variável ou valor em uma variável por algo e, em seguida, atribuir o resultado à própria variável. Está bem? Então, se eu salvar isso, você verá a saída como cinco, ok? Então, esses são todos os operadores de atribuição que existem em JavaScript. 19. Operadores de comparação: Agora é hora de falarmos sobre os operadores de comparação em JavaScript e vermos o que cada operador significa. Então, examinaremos a lista e veremos alguns exemplos. Então, primeiro, falaremos sobre o operador de igualdade. Agora, o que é operador de igualdade? Obviamente, o operador de igualdade compara dois operns e retorna uma saída Pollan Agora, uma coisa que eu gostaria de destacar aqui: todos os operadores de comparação fornecerão booleanos como resultado, porque eles são usados para fazer comparações, certo? É o que diz a categoria, operadores de comparação. Então, se a comparação é verdadeira ou falsa. Isso é o que a saída será. Agora, como exemplo, posso dizer log de pontos do console aqui, ok? E eu posso dizer que cinco é igual a cinco aqui. Você pode ver que o valor é verdadeiro. Agora, se eu fizer isso com seis, é claro, isso vai me dar uma falsa. Agora, isso pode até funcionar com variáveis. Então, digamos que se temos A e se temos B aqui, e P tem seis. Está bem? E se eu duplicar essa linha, isso também pode funcionar com as variáveis aqui Então eu posso dizer P aqui, e isso pode ser A. Então você verá que a saída é falsa. Está bem? Mas se eu mudar isso para Pi, é claro, a saída será verdadeira. Está bem? Agora, é assim que um operador de comparação funciona. Agora, o que acontece se você tiver uma string em comparação? Digamos que, se eu estiver fazendo o log de pontos do console, cinco é igual a seis. Se eu converter isso em uma string, digamos que não seja um número inteiro, mas na verdade é uma string, certo? Agora, deixe-me mostrar também que também é uma corda. Então, o log de pontos do console está aqui. Eu vou fazer uso do tipo dela. Você pode ver que isso é uma corda, certo? Então, se eu fizer uma comparação dessa forma, você verá que eu tenho quedas aqui. Ok. Agora, o que acontece se eu converter isso essencialmente em cinco assim? Isso vai me dar verdade. Está bem? Vou levar isso até o final. Então, isso é mais fácil de ver no console. Portanto, a saída é verdadeira aqui. Agora, por que isso é verdade? Porque aqui você está usando o número Oops. Aqui você está usando o número, e aqui está uma string. Por que isso é verdade? Porque o que acontece internamente é que há uma conversão que está acontecendo de uma string para um número, e é assim que essa coisa está sendo tratada. Tudo bem? Então essa seria a saída, certo? Espero que isso esteja fazendo sentido. Então, isso é sobre igualdade, ok. Agora você tem algo chamado igualdade estrita. Agora, isso é diferente de outras linguagens de programação como Java. Se você está vindo depois de aprender Java, há algo que será novo para você. Está bem? Então, o que acontece é dissemos que se Phi é igual à versão em cadeia de cinco, está sendo impresso como verdadeiro, certo? Agora, o que acontece se eu fizer uso do operador de igualdade estrita, o que significa igual a três vezes. Tudo bem? Agora, se eu salvar isso, você obterá uma saída SE falsa. Ok. Então, o que acontece é que a igualdade estrita funciona ela também verifica se compara o valor e também verifica o tipo, que significa que não há conversão de tipo executada. E se os valores forem de tipos diferentes, a comparação retornará imediatamente falsa. Está bem? Porque mesmo que os valores sejam iguais, o tipo é diferente. Então isso vai falhar. Tudo bem? Agora, se isso for seis, por algum motivo, isso também vai te dar uma falsa. Para que isso seja verdade, se for, para que seja verdade, isso tem que ser do mesmo tipo, e é aí que você fica verdadeiro aqui. Tudo bem Agora, tenha isso em mente, tudo bem, essa igualdade, igualdade estrita como essa coisa aqui, a conversão implícita aqui ou a conversão automática aqui de string para número Ok, tenha essas coisas em mente, porque quando estiver escrevendo programas Jscript reais, código JaScript real , você estará usando muito esses operadores de comparação dentro das condições, e é aí que isso importaria, certo? Então, isso é igualdade estrita. Lembre-se de que a igualdade estrita é estrita. Tudo bem? O nome diz que é estrito e verifica o tipo e o valor. Então, se o tipo for o mesmo aqui porque ambos são string, se eu alterar o valor, veja que isso é falso agora. Está bem? Então, espero que isso esteja fazendo sentido. Ok, o que é igualdade estrita? E a igualdade não é rígida, ok? Porque não há nada estrito em seu nome. Então, na verdade, ele vai ver o valor. E se os valores forem de um tipo diferente, ele será convertido. Eu farei uma conversão e, em seguida, ele exibirá o resultado, certo? Então essa é a diferença entre dois. Então você tem desigualdade. Agora, a desigualdade é bem simples. Ok. Então, eu vou te dar um exemplo. Está bem? Não vou criar variáveis, mas vou imediatamente dar um exemplo aqui Então, cinco é igual a três? O que você acha que seria a saída? Cinco é igual a três. A saída seria falsa, é claro, você vê quedas aqui. Cinco não é igual a três. Não é igual a três, não três. Me desculpe Então, se você converter isso em desigualdade aqui, o e se você salvar isso, você obterá dois como saída porque isso é exatamente o inverso da igualdade Está bem? Então, aqui estamos verificando se os valores não são iguais entre si. Se eles forem iguais um ao outro, isso resultará em quedas aqui. Certo. Espero que isso esteja fazendo sentido agora, ok? Então isso é desigualdade. Então você tem algo chamado de desigualdade estrita. Agora, o que é desigualdade estrita? Claro, vimos uma versão estrita da igualdade. Essa é uma aversão estrita à desigualdade. Simples Ok. Então aqui, se você ver, ok, deixe-me duplicar essa linha, ok? Então, se eu duplicar essa linha, agora, isso vai nos dar um falso, é claro Ok. Mas se isso for uma string, então também, isso nos dará um falso. Está bem? Porque os dois não são iguais um ao outro. Está bem? Agora, o que acontece se eu mudar para a desigualdade estrita, ok? Se eu fizer algo assim, você verá que isso retorna verdadeiro. Tudo bem Agora, aqui, é claro, quando estávamos fazendo da maneira normal de desigualdade, sem usar strict Ok. Então, aqui o que estava acontecendo é apenas o valor estava sendo comparado e não o tipo. Mas aqui, o tipo também está sendo comparado. Portanto, o valor é o mesmo, mas o tipo não é igual, por isso está retornando verdadeiro. É assim que funciona. Espero que isso esteja fazendo sentido, não é? E se eu duplicar isso aqui, então você vai ver se eu mudo isso para cinco, é claro Ok, você verá a verdade novamente, ok? Mas se isso for cinco agora, ok, se eu mudar isso para cinco, algo assim, você verá quedas aqui. Ok. Então isso é uma desigualdade estrita, ok? Esta é a versão estrita, e esta é uma versão solta. Então, normalmente, na Internet, você verá termos diferentes usados com isso: perder igualdade, perder desigualdade, igualdade estrita, desigualdade estrita. Tudo bem? Então você tem mais do que menos. Está bem? Portanto, mais do que uma lição é bem simples Deixe-me copiar esses lúpulos. Deixe-me copiar esses dois. Ok. Eu vou vir aqui e vou adicionar um, vou converter isso em comentários, ok? Agora, vamos dar uma olhada nisso, ok? Portanto, esse é um registro de pontos do console bastante simples. Ok. Eu cinco é maior do que três. É isso? Então, após a comparação, o que esse operador maior que fará é retornar resultados booleanos Então, cinco é maior do que três, sim. Então, voltaria a ser verdade, certo? Você pode ver a verdade aqui. Ok. Agora, se eu adicionar um número maior no lado direito. Está bem? Então, digamos que aqui temos sete. E se eu salvar isso, ele retornará dobras porque cinco não é mais do que sete Isso é maior do que. Claro, menos do que é exatamente o contrário disso, ok? E vou adicionar menos e aqui. Ok, você pode ver que a condição agora está revertida. Portanto, a condição anterior é falsa e, em seguida, é verdadeira porque sete é maior que cinco. Três é maior que cinco? Não. Desculpe, eu sou três maior que cinco? Sim, então não é, na verdade, certo? Então, é menos do que de fato. É por isso que ele está fornecendo uma saída SE falsa. Tudo bem Então, espero que isso esteja fazendo sentido. Agora, aqui, essa é uma versão de maior que e menor que, ok? Então, na verdade, isso é ter um símbolo igual. Também vou comparar a igualdade de ção. Se você pegar este exemplo aqui, se tiver cinco em ambos os lados. Está bem? Qual é a saída que você pode esperar? Você pode ver aqui que está recebendo saída falsa aqui. Está bem? Falso porque ambos são, na verdade, iguais. Portanto, essa condição não coincide. Mas se você atualizar isso igual a aqui, não menor ou igual a. Isso vai voltar a ser verdade. Você pode ver. Ok. Você pode até mesmo fazer uso disso aqui, você pode ver que isso está voltando à realidade. Ok. Então, espero que isso faça sentido em relação à forma como essa coisa funciona e espero que você tenha clareza sobre os operadores de comparação. Portanto, lembre-se de que os operadores de comparação retornarão um valor booleano após realizar a comparação dos operantes Agora, existem vários operadores de comparação como igualdade, desigualdade Temos versões mais rígidas delas, que também levam em consideração o tipo porque a versão normal não leva o tipo em consideração, certo? Então você tem maior que menos que maior que igual a ou menor que igual a. Tudo bem? Então, espero que isso tenha feito sentido e espero que tenha sido útil. 20. Operadores lógicos: Então, agora é hora de começarmos a falar sobre os operadores lógicos. Agora, existem três operadores lógicos, e é isso que vamos explorar. Então, o que são operadores lógicos, em primeiro lugar? Portanto, operadores lógicos são usados para trabalhar com valores Pollan, que são verdadeiros e falsos, e permitem combinar ou invocar esses valores, Então, há três deles. Você pode ver o lógico e o que é representado usando esse símbolo específico. Você tem o lógico ou, que é representado dessa forma, o zero lógico, que é representado por meio de uma exclamação Tudo bem Então, vamos falar sobre lógica e operador. Agora, o que é lógico e operador? Nove comentários, eu adicionei alguns pontos sobre lógica e, portanto, a lógica e o operador verificam se ambas as condições são verdadeiras. Está bem? Em primeiro lugar, funciona em duas condições, então é isso que você deve observar aqui. Ambas as condições, o que significa que está funcionando em duas condições, e se ambas forem verdadeiras, a saída será verdadeira. Está bem? Assim, você pode ver que ela retorna verdadeira somente se ambas forem verdadeiras. Caso contrário, ele retornará falso. Está bem? Agora, se eu tiver que demonstrar isso na forma de exemplo, vou dizer log de pontos do console aqui. Está bem? Verdadeiro. E você pode usar a lógica e aqui e simplesmente codificar os valores booleanos Ok. Eu posso ver a verdade como resultado. Está bem? Agora, se eu duplicar essa linha e se uma for falsa aqui, nesse caso, você verá false como saída Então, para se tornar realidade, ambas têm que ser verdadeiras. Está bem? Agora, qualquer um deles é falso, resultará em, tipo, falso como saída. Está bem? Então, se eu disser falso aqui, você verá que fica falso porque ambos são falsos, certo? Agora, se o primeiro for falso, mesmo que você obtenha uma saída SA falsa. Portanto, estamos nos tornando verdadeiros apenas em um caso em que ambos são verdadeiros. Está bem? Agora, isso é muito útil se você quiser avaliar duas condições, ok? Agora, esses dois valores ou dois operantes nos quais estamos operando podem ser qualquer tipo de expressão que seja avaliada como um valor booleano Está bem? Agora, deixe-me dar um exemplo. Digamos que você esteja criando um programa e digamos que seja um site para gerenciar um show. Está bem? Então, imagine que, para fazer login no show, você precisa ter seus ingressos e o ID. Está bem? Então, o que vou fazer é aqui, vou ter um exemplo escrito aqui. Ok. Exemplo. Ok. Agora, digamos que temos tickets como uma das variáveis booleanas Ok. Digamos que seu valor inicial seja verdadeiro. Ok. E digamos que eu tenha mais uma variável que tem ID. Então, se o usuário tem ID ou não, e se o usuário tem ingressos ou não, é isso que isso está nos ajudando a acompanhar, certo? Agora, vou dizer que o log de pontos do console está aqui. Ok. Eu quero ter um mandato para que o usuário tenha os dois. Portanto, se houver um mandato, ambas as condições devem ser verdadeiras ou se as duas coisas devem existir para que a expressão seja valorizada como verdadeira, é quando você usa e opera aqui Então, eu vou dizer que tem ingressos e tem identidade. E eu vou guardar isso. Agora você verá true como saída C aqui porque ambas são verdadeiras. Agora, se algum deles for falso, deixe-me atualizar seu ID para o de Falls aqui. Está bem? Vou dizer que não tem ID, digamos, e vou imprimir o resultado novamente. Então você verá quedas por aqui. Está bem? Então é assim que funciona. Agora, aqui estamos fazendo uso de variáveis, ok? Agora, isso pode ser qualquer tipo de expressão aqui. Está bem? Isso pode ser qualquer tipo de expressão que seja avaliada, é claro, como um valor de A Pollan. Está bem? Se eu tiver que dar um exemplo, ok, digamos que aqui, em vez de ter ingressos, digamos que eu tenha cinco, mais que três. Ok. Cinco é maior que três? Sim Ok. E digamos que se eu tiver mais um exemplo aqui ou mais uma expressão aqui, cinco maiores que seis. Cinco é maior que seis? Absolutamente não. Está bem? Então, isso vai dar false como saída A porque essa segunda expressão está retornando false. E se eu salvar isso, você verá false como saída A. Está bem? Então é assim que a lógica pode ser usada em expressões e tomadas de decisões complexas. Tudo bem Agora, quando você começar a escrever programas complexos , é claro, você usará muito esses operadores lógicos. Está bem? Portanto, é melhor entender o conceito. Lógico e pronto, o que é lógico e, para resumir, lógico , verificaremos se ambas as condições são verdadeiras Ela opera em dois valores booleanos enquanto opera, e esses valores booleanos também podem ser derivados das expressões Está bem? Agora, isso é sobre uma lógica. Agora, vamos falar sobre lógica. Agora, o que é lógico ou? Vou adicionar alguns comentários aqui como a definição de lógico ou então o operador lógico ou operador, ok, o lógico ou operador diz que vai verificar se pelo menos uma condição é verdadeira, ok? Portanto, o operano em que está trabalhando, pelo menos um, deve ser verdadeiro para que ele retorne verdadeiro Então, e foi muito rigoroso, ok, e disse que ambos deveriam ser verdadeiros. Mas eu sou um pouco tolerante. Diz que pelo menos uma condição deve ser verdadeira, e eu estou bem com isso, ok? Portanto, ele retorna verdadeiro se pelo menos uma das condições for verdadeira. Se ambos forem falsos, ele retornará falso. Tudo bem Agora, para demonstrar isso, vou copiar esse exemplo aqui, essa digitação que eu fiz Ok, e vamos substituir tudo por ou por aqui. Agora, são essencialmente dois símbolos de tubos. Você pode ver esses símbolos de tubo. Vou adicionar isso Ops Ok, e isso está feito. Agora, essa primeira coisa, isso será verdade. Isso também será verdadeiro. Isso também será verdadeiro. Agora, essas três afirmações nos darão verdade porque pelo menos uma das impressões é verdadeira aqui neste caso E isso vai nos dar falsas porque ambas são falsas. Está bem? Então, se eu salvar isso, você verá, verdadeiro, verdadeiro, verdadeiro, e então isso nos dará falso. Agora, como isso pode ser usado? Então imagine que você está criando um programa que está ajudando você a decidir se você deve jogar ao ar livre ou não. Está bem? E digamos que você vá brincar ao ar livre se estiver ensolarado ou se tiver uma capa de chuva. Um exemplo muito simples. Está bem? Agora, estamos usando ou operando aqui porque esta declaração diz que eu posso brincar lá fora se estiver ensolarado ou se eu tiver uma capa de chuva, certo? Não está dizendo se o tempo está ensolarado e eu tenho uma capa de chuva Se disser “e”, só então usaremos um operador. Mas agora está dizendo que também. Então, é claro, a escolha é o operador lógico. Então, eu vou dizer que aqui está ensolarado. Ok. Está ensolarado lá fora? Vou dizer falso, e desculpe, não tem capa de chuva Ok. Então eu vou dizer a verdade aqui, algo assim. Ok. E eu vou fazer um registro de pontos do console aqui. Ok. E eu vou dizer que é ensolarado e como capa de chuva Ok, bem simples. Qual seria a saída? A saída deve ser verdadeira. Eu posso ir jogar porque a condição era que estivesse ensolarado ou eu precisasse usar a capa de chuva Portanto, a saída é verdadeira. Ok, aqui, eu posso ver se eu altero o valor de tem capa de chuva , digamos, para falso Então, agora eu não tenho, não há capa de chuva e nem está ensolarado Nesse caso, ele retornará falso. Está bem? Então, no caso de tomada de decisão, isso vai ser muito usado, certo? Espero que isso seja divertido. O terceiro operador lógico sobre o qual devemos falar é o zero lógico Agora, o operador lógico zero inverte o valor de um booleano de um booleano Então, se for verdade, mudará para falso e, se for falso, mudará para verdadeiro, como diz a declaração. Está bem? Vamos testar isso. Então, se eu disser console dot log aqui. Ok. Agora, se eu disser verdadeiro aqui, ele vai ser impresso em verdade, como você pode ver, certo? Vai ser impresso com veracidade. Mas digamos que eu queira imprimir quero inverter isso usando um operador lógico, então isso vai dizer falso aqui, ok? Outra questão é por que você gostaria de usar esse nenhum operador? Quais são os casos de uso? Vou te dar um exemplo, certo? Há muitos cenários nos quais esse operador pode ser usado. Então, digamos que você queira ficar dentro de casa se não estiver chovendo, ou queira sair se estiver chovendo Digamos que há algo que é uma decisão que você quer tomar, ok? E vou deixar chover porque tudo depende da chuva, certo? Minha decisão. Então, vou criar uma variável. Vou atribuí-lo ao valor booleano. Está bem? E eu vou dizer que devemos ficar dentro de casa. Ok, algo parecido com isso. Agora, o valor disso seria não estar chovendo. Algo parecido com isso. Ok. E eu posso ter um registro de pontos no console, e eu deveria ficar dentro de casa. Está bem? Então, está chovendo Não, não é porque esse valor é falso. Então, devo ficar dentro de casa? Sim, você deveria. Você pode ver. Agora, se estiver chovendo por aqui. Você deveria ficar dentro de casa? Não. Você pode ver. Então é assim que booleano zero é um nó lógico, devo dizer operador de nó lógico funciona, certo, e funciona de uma forma que ajuda a reverter uma condição específica Isso também é muito usado na tomada de decisões e, ao começar a escrever o código Ja Script, você verá vários casos de uso disso. Tudo bem? Agora, isso é sobre o operador de nó Eu também quero destacar mais um conceito aqui. Agora, o conceito é sobre expressões booleanas. Então, o que são expressões booleanas? Uma expressão booleana é uma expressão que é avaliada como um valor booleano Está bem? Então, se você rolar até aqui. Ok, essa é uma expressão booleana. Ok. Você tem isso como uma expressão booleana, como uma expressão booleana Essa coisa toda é uma expressão booleana porque está sendo avaliada em um único valor booleano Então, todas essas são expressões booleanas que são construídas usando operadores lógicos e/ou não Tudo bem Então, espero que você tenha conseguido acompanhar e espero que tenha sido útil. 21. Operadores ternários: Então, agora é hora de começarmos a falar sobre o operador ternário. Agora, o que é operador ternário? Então você pode ver aqui o operador condicional. Portanto, é uma forma muito abreviada de tomar decisões rápidas ou escolher entre dois valores, ok E aqui você pode ver que essa é a sintaxe. Então, deixe-me demonstrar isso com a ajuda de um exemplo, ok? Então, digamos que eu tenha uma variável. Digamos, vamos chamá-lo de X, tudo bem. Então X tem um valor de dez. Está bem? E digamos que eu tenha uma expressão de Pullen. Está bem? Então, eu posso dizer pólen aqui e não vou criar uma expressão de Pollan Vou receber imediatamente uma mensagem aqui. Está bem? Então, digamos se X for maior que cinco, eu quero imprimir, X é maior que cinco, se, eu quero imprimir X não é maior que cinco, certo? Então, o que eu faria é ter uma condição aqui, ok? Seguiremos a mesma sintaxe. Está bem? Vou copiar isso. Ok, qual é a condição? A condição é X maior que cinco. É isso que estamos verificando, certo? Então, se X for maior que cinco, essa parte diz que, se essa condição for verdadeira, isso será avaliado ou será usado. Se essa condição for falsa, isso será resolvido. Ou isso será usado. Está bem? O que quer que esteja lá por aqui. Está bem? Portanto, condição é algo que adicionamos aqui. A condição é adicionada. O que é valor um? Se X for maior que cinco, eu queria imprimir uma mensagem. X é maior que cinco, tudo bem por enquanto. E se for falso, terei X menor que cinco, algo assim. Opa. Então, sim. OK. E o que vou fazer é dizer log de pontos do console e imprimir uma mensagem aqui. OK. Agora, qual você acha que seria a saída? X é dez, então deve ser X maior que cinco. Se eu salvar isso, você verá que X é maior que cinco. Está bem? Agora, se o valor de X for reduzido para quatro, você verá que X é menor que cinco. Está bem? Então, estamos tomando decisões aqui, ok? Somos o Altstspace aqui. Estamos tomando decisões aqui com a ajuda do operador ternário. OK. Agora, aqui, em toda essa expressão, eu não preciso que isso seja colocado dentro de um par de chaves redondas Então você pode ver aqui, isso também está bem. Mas normalmente é uma boa prática ter a condição de que você esteja escrevendo entre parênteses ou, devo dizer, colchetes redondos Está bem? Se você salvar isso, verá que essa é a saída e a saída não é afetada. Tudo bem. Agora, aqui, em vez de uma expressão, uma expressão booleana, você pode até ter um valor booleano OK. Então, eu posso simplesmente digitar true aqui e você pode ver que X é maior que cinco. E se eu disser falso aqui, você verá que X é menor que cinco. Está bem? Vou apenas fazer o Control Set e traremos de volta nossa expressão de pólen que tínhamos Está bem? Então isso é o que é um operador ternário Portanto, se a condição for verdadeira, o valor verdadeiro será retornado. Esse é o verdadeiro valor. E se a condição for falsa, ela será retornada. Está bem? E tudo isso reside entre um ponto de interrogação e dois pontos Você pode ver a sintaxe aqui. OK. Então, sim, isso é o que é um operador ternário Agora, deixe-me dar um exemplo. OK. Vamos escrever um programa simples que verificará se o valor é booleano ou não ou, desculpe, não é booleano O valor é par ou não, ou um número é par ou não. Tudo bem. Então é aí que podemos usar o operador ternário. Então, digamos que eu tenha esse número quatro. OK. E o que eu faria é ter resultados aqui. Agora, o que é resultado? Ok, então o resultado, na verdade, terá o restante após a divisão por dois Está bem? Então, o que é um número par? O número par é um número que é divisível por dois, certo? Então, eu vou simplesmente dizer o número aqui. Está bem? A porcentagem dois é igual a zero. E estou fazendo uso da igualdade estrita. Está bem? Então isso agora se torna um booleano aqui. Está bem? Não estou armazenando o restante aqui agora Estou apenas armazenando um valor booleano, que é o resultado dessa expressão Está bem? E 1 segundo. Então, aqui, eu posso dizer que deixe EX P aqui. Está bem? Isso é o que é. OK. E agora, o que eu posso fazer é dizer que se EXP é verdadeira, então você pode dar a saída como par, ou você pode dar a saída como ímpar, algo assim E você pode salvar isso e ele deve retornar. Ok, não estamos imprimindo o resultado aqui, então eu preciso imprimir o resultado também. Opa, eu preciso encarar isso em uma nova linha, certo, e eu preciso trazer o resultado Agora, a saída é par, e se forem cinco aqui, por exemplo, a saída seria ímpar. Está bem? Agora, em vez de ter EXP como variável, você pode cortar toda essa expressão aqui e trazê-la aqui Ok, isso também é factível. Vou me livrar disso. OK. Agora isso é factível. Tudo bem. Você pode ver como essa saída de saída está funcionando bem. Está bem? Então, sim, é isso que o programa é. Na verdade, estamos avaliando se o número é verdadeiro ou não Está bem? Portanto, a tomada de decisões é parte muito importante do programa. Você sabe, digamos que você esteja construindo uma loja de comércio eletrônico e queira que um desconto seja aplicável apenas a alguns membros privilegiados Então você pode ter esse tipo de tomada de decisão. Se um membro for privilegiado, esse é um valor de desconto Se não for, esse é um valor de desconto. Então, todo esse tipo de tomada de decisão forma uma grande parte da programação do Jascript, e não apenas do jaw script, de qualquer Ok, a tomada de decisão tem tudo a ver com isso, ok? Então, espero que você tenha certeza sobre condicional ou operador ternário, devo dizer que também é conhecido como operador condicional , aliás, ok, em alguns lugares, ok, em alguns lugares, mas eu prefiro Tudo bem? Agora, mais uma coisa que eu quero falar aqui sobre ternário é que você pode até mesmo ter um operador ternário aninhado, ok Então, o que é operador ternário aninhado, ok? Então, vou adicionar um exemplo aqui. Então, digamos que estamos criando um aplicativo e queremos avaliar a idade em vários níveis. Está bem? Então, se a idade for menor que 13 anos, tudo bem, dizemos que a pessoa é uma criança. Está bem? Se a idade for menor que 20, ok, então dizemos que a pessoa é adolescente, o. E se a idade for menor que você pode dizer ou maior que 20. Ok, dizemos que ele é adulto. OK. Então, aqui, na verdade, isso não será menor que 20, mas isso será 13-20. Está bem? Então, se a idade for de 13 a 20 anos, ele é um adolescente, e se a idade for maior que 20, ele é um adulto Como você faria isso com a ajuda do operador Turnary? Deixe-me te mostrar. Está bem? Então, primeiro, vou dizer que se a idade for igual a, terei um valor de idade. Digamos que seja 16. Está bem? Agora, qual é a sintaxe do operador ternário Isso é uma sintaxe. Vou pegar a sintaxe, ok? E eu vou ter, então vamos chamar isso de categorização, criança, adolescente, adulto Está bem? Então, eu vou dizer que a categoria aqui é igual a, e isso é sintaxe Então, a primeira condição é ter menos de 13 anos, certo? Portanto, a idade é menor que 13 anos, é melhor ter isso entre colchetes redondos. Eu vou fazer isso. Se a idade for menor que 13 anos, o que dizemos? Chamamos isso quando criança por aqui. OK. Então isso é uma criança, certo? Agora, vou virar essas lacunas e aqui é T. Ok? Agora, o que é valor dois? Está bem? Valor dois, em vez do valor dois, você pode realmente iniciar outro operador ternário aqui OK. Deixe-me te mostrar como. Então, aqui, você pode dizer, outra condição aqui, eu tenho menos de 20 anos. Então, uma coisa é confirmada se você estiver executando essa parte do código, ele não tem menos de 13 anos, certo? Essa parte está confirmada, correto? Se essa parte for executada, então ele tem menos de 13 anos, certo? Então, o que você faria é vir aqui, cair se a idade dele for maior que 13, você verificaria se é menor que 20. É menos de 20? Se for menos de 20, então você diz que ele é um adolescente. Algo parecido com isso. E se não for, você diria que ele é adulto. Entendido. Isso está fazendo sentido, deixe-me ver se consigo trazer isso para uma nova linha. Portanto, agora isso pode ser lido em um único co. Deixe-me mostrar a categoria aqui. OK. Ok, então vou adicionar a categoria aqui. Está bem? Agora, a idade é 16, então você pode ver que ele é um adolescente. OK. Deixe-me calcular a idade de dez anos. Ele é uma criança. Deixe-me completar 22 anos. Ele é adulto. Como isso está funcionando? Então, primeiro vamos verificar a idade aqui. Se a idade for menor que 13 anos, ok? Ele é uma criança. Está bem? E se isso for falso, se a idade for maior que 13, então estamos verificando se a idade é menor que 20 ou maior que 20? Está bem? Porque agora essa condição está pronta, certo? Isso é falso. Então, se estiver na faixa de quedas, estamos verificando se ele é maior que 20 ou menor que 20 Se ele tem menos de 20 anos, dizemos adolescente, se não é, estamos dizendo que é adulto. É assim que funciona. E esse exemplo aqui é um exemplo de operador ternário aninhado Você pode continuar fazendo ninhos aqui também. Ele também pode adicionar mais um operador ternário e continuar fazendo isso da maneira certa Mas não é uma boa prática agrupar muitos operadores ternários. Um ou dois está bem, ok? Um está bom. Na verdade, eu diria que está tudo bem. Tudo bem. Mas, além disso, eu diria que não é legível e não é uma boa prática Tudo bem. Mas sim, isso é sobre operadores ternários ou operadores condicionais, e espero que você esteja Os operadores ternários nos ajudam a avaliar as condições e realizar algumas ações em nosso código Então, espero que você tenha conseguido acompanhar e espero que tenha sido útil. 22. Matrizes em JavaScript: Tudo bem. Então, agora é hora de falarmos sobre um dos tópicos interessantes chamados matrizes Agora, haverá cenários quando você estiver escrevendo programas em que você simplesmente não deseja armazenar um único valor, mas, em vez disso, deseja armazenar vários valores de algo semelhante, ok? Agora, deixe-me dar um exemplo. Você pode criar uma variável para armazenar as informações de um aluno. Por exemplo, você pode criar uma variável chamada número da lista para armazenar o número da função de um aluno. E se você quiser armazenar o número da função de mil estudantes? Você vai criar 1.000 variáveis? Absolutamente não. E é aí que você pode criar matrizes Então, as matrizes permitem que você armazene vários valores em uma única variável, ok? E você pode criar matrizes com a ajuda de colchetes como esse Então, vamos falar muito mais sobre matrizes. Então, deixe-me criar uma matriz para você. Vou criar uma matriz chamada número. Números aqui e eu vou ter um, dois, três e quatro aqui. Ok. E você pode imprimi-lo dessa forma. Ok. Você pode dizer números. Ok. Isso lhe dará a saída como um, dois, três, quatro. Agora, você pode até mesmo criar matrizes diretamente no console. Este é um console JavaScript. Então você pode dizer que num é igual a eu posso adicionar isso. Ok. E você pode imprimir em Num aqui, algo assim, você pode ver, certo? Então, essa também é uma maneira de fazer isso, ok, mas vamos nos ater ao código do Visual Studio. Agora, é assim que você pode criar números Ok, matriz de números. E você pode até mesmo criar uma matriz de strings. Então eu posso dizer que deixe frutas. Vamos dar um exemplo de frutas, e você pode comer maçãs ou uma banana. Você pode comer laranja. Tudo bem. E você pode escolher o Console Lock aqui. Ok. Então eu vou fazer o Console Log e vou imprimir frutas. Opa. E eu vou salvar isso, você pode ver, como a saída aqui. Agora, o problema é que você criou matrizes, e criar matrizes é relativamente simples, certo Agora, como você acessa elementos em uma matriz? Tudo bem? Agora, se você tem esses muitos elementos, ok? Essa é uma lista de elementos na matriz. Agora, quero mencionar aqui que os elementos em matrizes podem ser acessados com a ajuda de algo chamado índice Está bem? Então, índice, ou seja, a posição do elemento. Então, um está na posição zero, porque os índices estão sempre começando do zero Está bem? Então você tem zero, um, dois e, em seguida, você tem três na matriz. Está bem? Agora, como você pode usar esses índices ou posições Na verdade, é a posição, certo, que começa do zero Ok, eles são zero, segue zero . A indexação do Beast é o que eles chamam, Mas a questão é, ok, essa é a posição, esse é o índice que eu tenho, certo? Como faço para usá-lo? Então você pode dizer Console dot log aqui. Está bem? E digamos que se eu quiser acessar números e quiser acessar o número na posição ou índice três, ok? Então você pode ver quatro sendo impressos. Está bem? Eu posso comer frutas. Eu posso salvá-lo. Ok, então não há frutas na posição número três porque 01 e dois. Ok, então é por isso que estamos ficando indefinidos, mas você pode ter um aqui e você verá panana aqui Está bem? Portanto, o JavaScript tem uma indexação baseada em zero, e isso é comum em muitas linguagens de programação existentes Se você está vindo de Java, você estará ciente da indexação aqui Ok. Você pode até mesmo modificar os elementos da matriz usando índices. Está bem? Então, por exemplo, como mostrei, você pode acessar os elementos na matriz usando índices. Então você pode dizer frutas e, digamos , a fruta no índice um, eu gostaria de comer em vez de banana, eu gostaria de comer cereja, digamos, por exemplo. Ok. E então, se você tentar imprimi-lo aqui, verá cereja como saída. Você pode ver. Então, modificamos o elemento no primeiro índice aqui, que é a segunda posição na matriz. Está bem? Então, isso é sobre matriz. Você pode até ter uma matriz dentro de uma matriz. Então você pode criar uma espécie de matriz aqui. Então eu posso dizer matriz. Vamos chamá-la de matriz em si. Você cria uma matriz com a ponta dos colchetes, certo. Agora, dentro disso, você terá colchetes novamente e poderá dizer um, dois, três Você pode ter mais um, quatro, desculpe , quatro, cinco, seis, ok. E você pode ter seis ou sete, desculpe, não seis. Deve ser sete, oito e nove. Ok. E você pode imprimir isso. Ok, estamos recebendo um erro, não consigo ler, ok? Ok, provavelmente é porque eu perdi uma vírgula, então ela deve ser separada por vírgula, e você pode ver que o problema desapareceu Portanto, não esqueça a vírgula se estiver tentando criar uma matriz inestd e puder imprimir em matriz aqui, algo assim E você verá a saída aqui. Está bem? Então você pode ver, é uma matriz de matrizes Então você pode imprimi-lo dessa forma, zero. E você verá, como a matriz no primeiro índice sendo impresso. Você pode até mesmo imprimir o primeiro elemento. Então você pode usar algo assim, indexação dupla, e você pode obter uma aqui. Ok. Se você disser um, opa, não Q um, você verá dois sendo impressos Está bem? Então isso é 00, zero vírgula um, zero vírgula dois Está bem? Então, esse zero primeiro representa a linha e esse representa a coluna. Tudo bem. Então, serão duas vírgulas e dois Tudo bem. Espero que isso esteja fazendo sentido. Tudo bem Portanto, é assim que você pode usar aninhadas ou também conhecidas como matrizes multidimensionais Agora, vamos falar sobre alguns métodos que nos são fornecidos quando trabalhamos com matrizes Agora, vamos falar sobre alguns dos métodos que estão disponíveis para desenvolvedores como nós fazerem melhor uso de matrizes em JavaScript, certo? Portanto, você pode ver que existem vários métodos , como push usado para adicionar um elemento no final da matriz, pop, usado para remover o último elemento, shift, usado para remover o elemento forçado, e shift, que pode ser usado para adicionar elementos ao início da matriz. Fatia que copia uma parte de uma matriz e, em seguida, temos uma fatia que pode adicionar ou remover os elementos no índice específico Então, vamos dar uma olhada em cada um deles individualmente, certo? Então, vamos começar empurrando aqui. Ok, então empurre. Ok. Agora, o que é push? Diz que adiciona um elemento ao final. Tudo bem Agora, antes de falarmos sobre push, deixe-me também lembrá-lo de uma propriedade interessante aqui que essa matriz tem, que é de comprimento. Está bem? Assim, você pode obter um tamanho da matriz e do script Ja aqui, assim. Você pode ver três sendo impressos, o que significa que as frutas têm três elementos. Está bem? Você pode ver que tem três elementos. Tudo bem. Então, agora, se você quiser colocar um elemento em uma matriz, o que você pode fazer é dizer frutas, pontuar, empurrar, Ok, eu posso empurrar qualquer elemento aqui. Ok, eu posso dizer laranja, provavelmente. Ok, assim. Ok. E eu posso dizer console dot log aqui, e eu posso dizer frutas. Ok. Agora, se você imprimir isso, você verá maçã, cereja, laranja, laranja. Laranja foi adicionada duas vezes aqui. Está bem? Se eu adicionar banana aqui, você verá maçã, cereja, laranja, banana. Isso é o que é. Ok. Então você está empurrando um elemento para o final da matriz E se você pegar o comprimento aqui da matriz, depois de pressionar o elemento, o comprimento agora é quatro Mais cedo, eram três. Tudo bem Então isso nos diz que as matrizes em JavaScript são dinâmicas, certo? Você pode adicionar e remover elementos e tamanho da matriz pode mudar dinamicamente Está bem? E o comprimento é uma propriedade incrível que pode nos ajudar a obter o comprimento da matriz. Está bem? Então, isso é sobre empurrar. É bem simples. Ele é usado para empurrar um elemento para o final da matriz. Tudo bem? Isso é o que isso diz. Então temos pop. Agora, o que é pop? Tudo bem Então, a definição diz que remove o último elemento, certo. Então, agora vamos ver como isso nos ajuda a remover o último elemento. Está bem? Então, posso dizer que vou copiar esse registro de pontos do console aqui. E antes do registro de pontos do console, vou dizer frutas, ponto, posso dizer pop aqui. Ok. E antes, tinha quatro elementos. Agora terá três. Assim, você pode ver maçã, cereja e laranja. Está bem? Você pode até mesmo obter esse elemento que é inserido em uma variável, para que você possa dizer a última fruta, por exemplo. Ok. E você pode até imprimir a última fruta que tiver, ok? Isso também é possível. Portanto, é possível capturar o último elemento. Você pode ver maçã, cereja, laranja e você tem banana como a última fruta aqui. Você pode ver a definição aqui, remover o último elemento da matriz e devolvê-lo. Está bem? Então, também está voltando. Se a matriz estiver vazia, indefinido será retornado e a matriz não será modificada Está bem? Então, isso é sobre pop, e a próxima coisa que você tem é o shift. Agora, o que é mudança? Tudo bem? Então, a mudança remove o elemento forçado. Está bem? Assim como o pop remove o último elemento, ele remove o elemento forçado. Então, vou trazer isso aqui. Ok, ou eu vou colocar essa parte aqui. Ok. E essa coisa eu vou comentar por enquanto e você pode dizer, mude aqui. Agora, se você executar isso, verá que a Apple foi a primeira. Agora você tem apenas duas cerejas e laranjas. Está bem? Você pode até pegar a primeira fruta aqui. Como se tivéssemos a última fruta, deixe a primeira fruta vir aqui. Ok, algo assim. E deixe-me imprimir a primeira fruta, ok, aqui. Veja que a maçã é a primeira fruta. Tudo bem Assim como pop retorna, o último elemento, shift, se você passar o mouse sobre ele, ele remove o primeiro elemento e também o retorna É isso que o shift faz. Tudo bem. Então você tem algo chamado unshift away, que é usado para adicionar um elemento no início Está bem? Então, deixe-me pegar esse método aqui. OK. Vamos mudar. Você vem aqui e nos deixa experimentar unhefto aqui. Está bem? Então, o que eu posso fazer é dizer que eu tenho frutas. Agora, isso é o que as frutas contêm, ok? O que eu posso fazer é dizer frutas pontilhadas e deslocadas, e eu posso adicionar, digamos, eu posso adicionar maçã. Apple novamente, algo parecido. OK. E vamos imprimir. Vamos fazer um registro do console. Você pode ver a maçã sendo adicionada novamente. Está bem? Então, mais cedo, tivemos uma maçã que foi removida, ok? E então temos a Apple novamente. Você pode ver? Por aqui. Está bem? Então, isso é adicionado sem mudança, adicionou esse elemento específico no início aqui, ok? E você pode ver que insere um novo elemento no início da matriz e retorna o novo comprimento da matriz Então, na verdade, ele está retornando o novo comprimento da matriz. Está bem? Se quiser, você pode dizer o novo tamanho aqui. OK. E você pode dizer Console, registro de pontos aqui, e você pode imprimir em um novo tamanho, algo assim. OK. Você verá o novo comprimento da matriz. Ok, por aqui. Anteriormente, era um comprimento de dois. Agora tem comprimento de três. Tudo bem Então, isso é ininterrupto. Agora, a próxima coisa que temos é fatiar. Agora, slice copia uma parte da matriz. Vamos dar uma olhada no que isso significa, ok? Então isso é uma fatia para nós, tudo bem. Agora, digamos que temos uma matriz. Ok, então essa é a matriz de quatro elementos. Tudo bem Deixe-me cortar isso, ok? Então, digamos que se eu quiser cortar os elementos do índice um para dois, então da cereja para a laranja, ok? Porque há três elementos, não quatro, ok? Então, deixe-me obter uma matriz de quatro elementos aqui. Está bem? Então, eu posso realmente declarar novamente essa matriz aqui, recriar ou deixar eu ver. Ok, sua laranja, eu posso ver cereja ou morango, algo assim OK. Então, agora temos elementos uma matriz com quatro elementos. Tudo bem O que eu posso fazer é realmente deixar, cortar uma variedade e dizer frutas pontilhadas e dizer frutas pontilhadas Eu posso dizer, então aqui você pode ver, S. Se você digitar S, você tem slice Vamos usar a fatia uma vírgula três. OK. E você pode dizer console dot log aqui e você pode dizer matriz fatiada. Opa. Então está dizendo: Ok, isso já foi declarado e não podemos usá-lo novamente. Então, eu posso dizer novas frutas aqui. OK. Eu deveria ter usado o novo nome, tudo bem. Frutas novas, frutas novas, e eu vou guardar isso e você poderá ver a banana laranja. Tudo bem. Então esse é o índice um, e então esse é o índice dois, e você pode ver como ele é cortado a partir daqui Está bem? Então, isso é copiar o elemento do índice um para dois. É isso que está acontecendo. Está bem? Então, estamos vendo uma vírgula três Então, o que está fazendo é 1-2 aqui, ok? Esses dois estão sendo cortados em fatias. Tudo bem E se você passar o mouse sobre isso, verá que ele retorna uma cópia de uma seção de uma matriz tanto para o início quanto para o final E o índice negativo pode ser usado para indicar um deslocamento do final da matriz Então menos dois, se você disser menos dois, se refere ao segundo ao último elemento da matriz. Está bem? O que significa penúltimo. Então menos dois será laranja aqui. Está bem? É o penúltimo. Tudo bem. Então é assim que a fatia pode ser usada Ele é usado essencialmente para cortar uma matriz. E então você tem uma fatia aqui, que pode ser usada para remover ou adicionar um elemento em um índice específico Está bem? Então, deixe-me experimentar essa fatia aqui. OK. Agora você tem frutas aqui. Então, o que vou fazer é dizer frutas pontilhadas, emendas aqui OK. E o que vamos fazer é remover um elemento no índice um. Está bem? Então você pode dizer um elemento. Está bem? Então, se você passar o mouse sobre isso, verá alguma documentação. Ok. Portanto, ele aceita alguns parâmetros. Comece quantos valores você deseja excluir, OK, e coloque aqui. Assim, você pode ver que início significa a localização base zero em uma matriz da qual você deseja começar a remover elementos. As contagens de exclusão significam quantos elementos você deseja remover desse número. Então, se você disser da posição um, eu quero remover dois, então você precisa adicionar uma vírgula dois aqui, algo assim Vou remover dois elementos da posição um, ok? E a terceira coisa, ele retorna um elemento contendo isso que está retornando. Ele retorna a matriz contendo os elementos que foram excluídos. Está bem? Então, vamos tentar isso aqui. Então, o que eu faria é aqui, eu diria que o console colocaria pontos aqui primeiro, e eu imprimiria em frutas. Está bem? Agora, estamos removendo dois elementos, começando da posição um, ok? Então, se eu salvar isso, você verá a Apple novamente sendo impressa. Está bem? Então essa é a matriz que tínhamos. Então, estamos removendo dois elementos, começando da posição um. Ok, então você pode ver que tinha maçã novamente, cereja e laranja. Portanto, só resta a Apple novamente, porque dois elementos da posição um significam que os dois elementos foram removidos no final. Está bem? Agora, a documentação dizia que ela retorna uma matriz contendo os elementos que foram excluídos. Está bem? Então você pode realmente obtê-los. Você pode dizer deixe os itens excluídos aqui. OK. E eu posso imprimir itens excluídos, essencialmente aqui. Está bem? Então, posso dizer itens excluídos. Opa aqui, e eu posso salvar isso e você pode ver, esses foram os itens que foram excluídos aqui. Está bem? Agora, qual é a mágica após exclusão, usamos a fatia para excluir o elemento OK. Agora, isso também pode ser usado para excluir e adicionar elementos ao mesmo tempo. Agora, se eu especificar um elemento aqui. Ok, você pode ver os itens. Portanto, esses são elementos a serem inseridos na matriz no lugar dos itens excluídos. Você pode ver isso aparecer automaticamente. Então, você começou com a contagem de exclusões e agora tem uma lista de itens. Então, posso dizer novo item aqui, posso salvá-lo e você verá um novo item adicionado. Ok. Deixe-me adicionar mais um item aqui. OK. Posso adicionar um novo item novamente. E você verá que, no lugar dos itens excluídos, você pode até mesmo adicionar novos itens com a ajuda do slice. Você pode ver. É assim que funciona, basicamente, e é útil essencialmente modificar a matriz de acordo com seus requisitos Tudo bem? Esses são alguns dos métodos aos quais você tem acesso. Espero que você tenha conseguido acompanhar e espero que tenha sido útil. 23. Objetos em JavaScript: Agora é hora de começarmos a falar sobre objetos. Agora, o que são objetos? Portanto, objetos em JavaScript permitem que você agrupe dados relacionados e até mesmo funções. Sim, estamos chegando à parte de funções. Mas, por enquanto, falaremos sobre a parte de dados. Portanto, os objetos permitem que você agrupe dados e funções relacionados. Um objeto é criado usando um par de brisas encaracoladas. Então, se você tiver que criar um objeto, você criaria algo assim. Você diria, digamos, se eu quiser armazenar alguns dados relacionados a uma pessoa, certo? Então, eu posso dizer que, pessoa aqui, eu posso ter um par de brisas onduladas como essa, e então eu poderia ter pares de valores-chave nela, onde cada chave também é conhecida como propriedade e tem um valor associado Tudo bem. Então eu posso dizer o que uma pessoa teria? Então, uma pessoa pode ter muita informação, ok? Então, digamos que eu esteja criando um programa e queira armazenar as informações da pessoa. Então, ou eu posso criar várias variáveis, como eu posso dizer deixe uma pessoa, e eu posso dizer idade, pessoa, um nome. Então, para a pessoa dois, posso dizer pessoa dois, cada um, e assim por diante, mas essa não é a maneira ideal de fazer isso, certo? Então, em vez disso, o que você gostaria de fazer é ter um objeto onde você possa agrupar dados relacionados a uma pessoa específica. Então, para a pessoa um, eu poderia dizer nome, e eu poderia ter o nome de Alice, por exemplo, o, eu poderia ter H e cada uma pode ser 25 Está bem? Agora, faça uma anotação aqui. Isso é uma corda aqui, certo? Isso é uma string. Isso não é um número. Este é um número aqui, e eu também posso ter um booleano aqui Então, posso dizer que uma pessoa é estudante e posso dizer que a verdade cai aqui. OK. Portanto, anote que você pode ter dados de vários tipos aqui. OK. Então, voltando aqui, um objeto é criado usando um par de frases de consulta, como estamos fazendo aqui, ele contém pares de valores-chave. Então isso é uma chave, e isso é um valor. Está bem? Cada chave de nós também é chamada de propriedade. Então, isso também é uma propriedade do objeto. Então, a pessoa tem três propriedades, que é o nome. Você pode ver se você passar o mouse sobre isso, diz propriedade aqui, ok? E é chamado de nome e o tipo de dados é string. Se você passar o mouse sobre isso, se eu passar o mouse sobre isso, é a propriedade H e o tipo é número Se você passar o mouse aqui, a propriedade é estudantil e é booleana E se você passar o mouse sobre isso, poderá ver toda a definição de pessoa, certo? E você veria o tipo de dados aqui em vez dos valores. Tudo bem. Então, cada chave é chamada de propriedade e tem um valor associado a ela, certo? Então, isso é o que fizemos ao criar uma pessoa. E, claro, para imprimi-lo aqui, você também pode imprimi-lo algo assim. Tudo bem? E você verá isso sendo impresso no console. Tudo bem? Agora, há várias maneiras pelas quais você pode acessar as propriedades do objeto. Tudo bem. Então, aqui estamos imprimindo o objeto inteiro aqui, certo? Mas se você quiser acessar uma propriedade específica, você pode até mesmo fazer isso, e há várias maneiras de fazer isso. Digamos que eu possa dizer log de pontos do console. Agora você pode usar algo chamado notação de pontos. Então, a pessoa não envelhece aqui. Então, estamos imprimindo H como 25. Essa é uma maneira de fazer as coisas. Outra forma é duplicar isso. Outra forma é você usar esse tipo de sintaxe Como se você tivesse colchetes e, dentro disso, você tivesse o nome da propriedade Você pode ver. E então você pode até mesmo acessá-lo dessa forma e ver a saída no console. Tudo bem. Então, essas são as duas maneiras pelas quais você pode acessar propriedades de objetos em JavaScript. Agora, se você der uma olhada no código-fonte on-line, verá que, na maioria das vezes, é isso que está sendo usado, ok? Como em qualquer lugar em seu aplicativo de nível de produção, em seu local de trabalho ou qualquer tipo de código-fonte sobre o qual você leia on-line, você verá que essa é a convenção que está sendo usada em vários lugares. Isso é muito raro, e a razão óbvia para isso é que não é tão fácil de olhar e nem de digitar, certo? Portanto, é muito mais fácil do que a notação de pontos, e é por isso que está sendo usada com frequência. Tudo bem? Agora, falamos sobre a criação de um objeto. Falamos sobre o acesso às propriedades. Você pode até mesmo adicionar ou atualizar as propriedades. Está bem? Agora, vamos falar primeiro sobre a atualização. Então, primeiro, atualizaremos a idade. Então você pode ver que o ponto H da pessoa é igual a, digamos, 66 aqui. Está bem? E então, se você imprimir isso aqui e salvar, verá que idade da pessoa está sendo atualizada para 66. E mesmo que eu imprima o objeto inteiro, você verá que ele tem 66 como valor que está mantendo. Tudo bem? Agora, isso é sobre atualização. É assim que você atualiza. É bem simples. Você usa a notação de pontos ou pode até mesmo usar esse tipo de sintaxe aqui com os colchetes e pode atualizar a propriedade atribuindo-a em um e pode atualizar a propriedade atribuindo-a atribuindo-a Agora, como você adicionaria uma nova propriedade? Digamos que eu queira adicionar uma nova propriedade na qual eu deseje armazenar o emprego da pessoa Então eu posso dizer trabalho pessoal aqui, e eu posso dizer engenheiro. Algo parecido com isso. Tudo bem. E eu posso imprimir neste objeto aqui. E agora, se você imprimir , verá que há uma nova propriedade chamada JOB. Então, essa propriedade, em primeiro lugar, não existia quando criamos a pessoa, você pode ver. Não existia. Tinha apenas três propriedades, nome, idade e aluno, você pode ver, certo? Mas, mais tarde, o que fizemos foi adicionar uma propriedade que dizia person dot JOB. E atribuímos a ele um valor chamado engenheiro. Adicionar uma nova propriedade é tão fácil quanto acessar essa nova propriedade usando a notação de pontos Portanto, se você adicionar qualquer novo nome de propriedade usando a notação de pontos, poderá atribuí-lo ao valor e isso será adicionado ao objeto aqui Está bem? Você pode até mesmo acessá-lo usando a notação de ponto, se quiser, por aqui, como se estivesse acessando as outras propriedades Você pode ver o motor aqui. Tudo bem. Então, tudo isso é possível aqui com ou quando você quiser criar ou quando quiser adicionar ou atualizar as propriedades. Tudo bem? Agora, você pode adicionar uma propriedade em um objeto. Você pode até mesmo excluir uma propriedade. Como você faria isso? Então, vamos dar uma olhada na exclusão de propriedades. Está bem? Digamos que eu queira deletar, eu quero deletar seu aluno aqui. Está bem? Então, agora, eu posso usar a palavra-chave Dell, excluir a palavra-chave, desculpe, não dizer. É deletar palavra-chave. Você pode ver, em ordem, sugerir, ver uma pessoa ensinada e você terá a lista de propriedades aqui. Qual deles você deseja excluir? Eu quero deletar seu aluno? OK. E então, se você tentar acessar o aluno aqui e salvá-lo, verá que ele fica indefinido Tudo bem. E se você simplesmente imprimir a pessoa, você não verá o aluno como parte disso. Você pode ver mais cedo se o aluno estava lá nesse objeto em particular, mas depois, você não tem a pessoa dele aqui. Então, essa propriedade está realmente sendo excluída com a ajuda da palavra-chave delete. Tudo bem. Portanto, é possível adicionar propriedades dinamicamente após a criação do objeto, e você também pode excluir as propriedades após a criação do objeto Então, tudo é possível, certo? Agora, também é possível verificar se uma determinada propriedade realmente existe em um determinado objeto, certo? Agora, haverá cenários, é claro, em que talvez você queira atualizar uma propriedade, se essa propriedade existir Então, digamos que se o emprego existe nessa pessoa, talvez você queira atualizar o trabalho. Se você não adicionar essa verificação , o que aconteceria é que, se o trabalho não existisse pessoalmente, ele fosse adicionado, fosse recém-criado e você não quisesse que isso acontecesse. Você deseja atualizar somente se ela existir. Está bem? Então, a primeira coisa, o que podemos fazer é, ok, verificar 1 segundo. Verificaremos se a propriedade existe. Está bem? Como você faz isso? Então, vou rolar para baixo até aqui. OK. E eu diria, registro de pontos do console, e eu posso ver o nome pessoalmente. Está bem? Agora, isso resultará em um valor booleano Você pode ver a verdade aqui. Por que isso é verdade? Porque o nome realmente existe pessoalmente. Você pode ver que adicionamos um nome aqui. Se você der uma olhada nas instruções anteriores do log de pontos do console, verá que o nome está presente. Está bem? Essa é uma maneira de verificar isso. Há mais uma maneira, então você pode dizer log de pontos do console aqui. OK. E você pode dizer pessoa, ponto e você pode dizer que tem propriedade própria, algo assim, e então você pode dizer idade aqui. OK. Você voltará a ser verdadeiro aqui, ok? Então, essa propriedade própria determina, você pode ver a documentação aqui, determina se um objeto tem uma propriedade com o nome especificado, certo? Agora, se eu mudar isso para uma idade, se eu mudar isso para o nome de uma aqui. Claro, esses dois não existem. Então, se eu salvar isso, você vai ficar falso aqui, certo? Porque esses dois não existem. Vou fazer o Control Z aqui e salvá-lo para que eu seja impresso de forma verdadeira no console. Tudo bem? Agora, isso é muito útil. Como eu disse, se você quiser realizar uma atualização de propriedades, dependendo se a propriedade existe ou não em um objeto, você pode fazer uso de qualquer uma dessas sintaxes, ok E você normalmente usa isso com declarações condicionais e, se for verdade, provavelmente atualizaria a propriedade Certo? E essa coisa aqui que você está vendo é um operador aqui. Está bem? E com a ajuda disso, ele permite que você verifique, essencialmente, se você está vendo qual é o caso de uso de in aqui. Tudo bem. Então, sim, trata-se de verificar se a propriedade existe. Agora, há algo chamado objetos aninhados, ok? O que significa que um objeto também pode conter outro objeto ou outros objetos. Agora, aqui, na definição de objeto que vimos, objeto tem pares de valores-chave, certo? Não tem nada aninhado nele. Portanto, haverá cenários em que você talvez queira armazenar algum tipo de dado complexo, em que talvez queira ter um objeto dentro de um objeto, Agora, deixe-me dar um exemplo. Digamos que você esteja criando objetos para acompanhar os alunos e digamos que você tenha uma academia on-line que está construindo na qual um aluno se matricula em Então, o que você faria é ter um aluno aqui. Está bem? Eu teria um objeto para armazenar informações do aluno e teria o nome do aluno. Qual é o nome? O nome é, digamos, apareça aqui. OK. Agora eu quero ter uma lista dos cursos em que o aluno se matriculou Então, eu posso dizer cursos por aqui. OK. E dentro disso, esse curso é um objeto porque vai ser uma lista, certo? Então você pode comer um tapete aqui. OK. Agora, aqui você pode dizer a verdade Ok. Você pode ter sinais. Você pode ter caído aqui e assim por diante. Tudo bem. Agora, se você quiser imprimir isso, você pode dizer Console dot Log, e você pode ver o aluno aqui. Algo parecido com isso. Assim, você pode ver o nome e , em seguida, os cursos são novamente aninhados aqui, onde você pode expandir o nome e assinar Desculpe, matemática e ciências estão aqui. Tudo bem. Agora a questão é: você tem um objeto dentro de um objeto. É um objeto aninhado, certo? Como você acessaria a matemática da propriedade? Então, deixe-me mostrar isso para você também. Tudo bem. Então, aqui, você tem um estudante. Você pode dizer ponto de estudante e ver a sugestão. Então, diga se você quiser acessar a idade, é claro, você pode usar o ponto aqui. Ok, a idade não existe. Então, eu posso usar o nome aqui e você terá acesso ao pop. OK. Agora, se você quiser acessar os cursos, você pode dizer cursos aqui, imediatamente, e você terá acesso a esse Jason, que é o objeto aninhado aqui. Você pode ver matemática, é verdade. A ciência é falsa. Tudo bem. E se você quiser ter acesso a qualquer uma dessas propriedades, você pode usar ainda mais a notação de pontos e dizer matemática aqui e você se tornará ainda mais a notação de pontos e dizer matemática verdadeiro Está bem? Portanto, você pode encadear essas notações de pontos dessa maneira Você pode dizer que os cursos de estudantes pontuam a matemática. Está bem? Então você está dizendo que estudantes pontuam cursos, pontuam matemática aqui. Tudo bem. E está dando a você a saída como verdadeira. Tudo bem? Agora, assim como o objeto externo, objeto interno também pode ter propriedades com diferentes tipos de dados. No momento, estamos usando o Boolean. Claro, você pode armazenar sequências de caracteres. Você pode ter números. Tudo bem. Depende totalmente de você o que você deseja armazenar e também é totalmente baseado em suas necessidades . Tudo bem. Então, espero que isso esteja fazendo sentido. Então, isso é sobre objetos. E antes de encerrar, quero mostrar uma coisa interessante quando você está trabalhando com objetos, que é conhecida como estruturação de objeto D. Estruturação. Tudo bem. Então, o que é a estruturação do objeto D? Agora, a estruturação do objeto D é um conceito ou uma maneira conveniente, devo dizer, de extrair várias propriedades de um objeto e atribuí-las a variáveis. Agora, dê uma olhada nesse objeto aqui. Tem várias propriedades, certo? Qualquer objeto que você criar em JavaScript terá várias propriedades. Portanto, haverá momentos em que você poderá querer extrair essas propriedades e atribuí-las a variáveis individuais Agora, isso é possível usando a desestruturação de objetos. Então, temos um objeto aqui. Vamos experimentá-lo com isso. Portanto, você tem duas propriedades, como nome e cursos. Tudo bem. O que eu vou fazer é eu quero nome Eu quero ter uma variável chamada nome aqui, que terá o valor do nome aqui para esse objeto, e os cursos terão o valor dos cursos. Está bem? Então, o que eu vou fazer é dizer deixe. Eu vou fazer uso desse tipo de sintaxe aqui. Vou dizer o nome e os cursos aqui. Está bem? E então eu vou designá-lo como aluno. Tudo bem. O que você acha que aconteceria? Isso é absolutamente válido aqui. OK. Mas o que realmente está acontecendo aqui é esse objeto está realmente quebrado e as propriedades estão sendo atribuídas. O valor das propriedades está sendo atribuído a essas variáveis. Tudo bem. Então, se eu quiser imprimir no console, faça o log de pontos aqui e posso dizer o nome. Você verá o nome sendo impresso como Bob aqui. Ok, que na verdade é o nome que você atribuiu, e então você pode ter em vez do nome, você pode ter cursos e salvar isso, você verá o resultado aqui. OK. Então, espero que isso esteja fazendo sentido. Agora, se você alterar o nome da variável de nome para nome dois aqui, digamos que, por exemplo, se você salvar isso, verá que o nome é indefinido Agora. Por que é indefinido Porque para que a desestruturação funcione perfeitamente, nome deve ser atribuído ao nome aqui, então esse nome deve corresponder realmente ao nome do nome dentro dessa propriedade dentro desse objeto, desculpe OK. Então, por exemplo, se eu mudar o nome dos cursos para cursos também, por exemplo, você verá que é indefinido Ok, então o nome tem que ser semelhante ao da propriedade. O nome da variável deve ser o mesmo da propriedade para que a desestruturação funcione Se você pular qualquer uma das variáveis aqui, se eu pular os cursos, você verá que os cursos não estão desestruturados. Tudo bem. Então, sim, isso é o que é a desestruturação de objetos. E isso é tudo sobre objetos no Jascript. E espero que este vídeo ajude você a entender qualquer código que você veja, que esteja usando objetos Jascript no futuro. Boa sorte 24. Conversão de tipos: Então, agora é hora de falarmos sobre conversão de tipos em JavaScript. Agora, o que é conversão de tipo, em primeiro lugar? Então, sempre que você cria uma variável, você armazena valores nela. A variável tem um tipo, certo? Então, você pode armazenar uma string, um booleano ou um número, certo? Agora, a conversão de tipo é um processo em que você converte um valor de um tipo para outro Está bem? Então, se você estiver convertendo string em números, números em string, isso é conhecido como conversão de tipo Agora, uma coisa que você precisa saber é que você já sabe, é claro, o JavaScript é uma linguagem de digitação livre, o que significa que você não precisa declarar o tipo de uma variável E o tipo da variável pode mudar dinamicamente, dependendo dos valores que você está armazenando OK. Outra coisa é que o JavaScript suporta conversões implícitas e explícitas. Então, o que significa implícito é conversão implícita é um tipo em que o próprio JavaScript converte automaticamente o valor de um tipo para outro Um explícito é quando você, como programador está instruindo a converter um valor de um tipo para outro Tudo bem? Então, vamos dar uma olhada na conversão de tipos. Agora, deixe-me dar um exemplo aqui. Então, digamos que eu tenha X, o e digamos que eu tenha cinco mais um. OK. Agora vou fazer o log de pontos do console aqui. OK. E eu vou imprimir o valor de X. Tudo bem Eu também vou fazer o log de pontos do console aqui. Ok, e eu vou dizer, digite fora. Eu vou dizer X aqui. Se eu salvar isso, você verá que a saída é seis, é claro, e a saída também é um número porque contém o valor do tipo número. Agora, deixe-me experimentar um pouco, certo? Agora, digamos que eu converta esse valor cinco no valor de uma string adicionando um único código. Você pode até mesmo adicionar códigos duplos. Está tudo bem. O que você acha que será o resultado? Serão seis? E se você acha que são seis, então o que você acha que isso nos dará uma saída? Qual será a saída do tipo de operador aqui? Se eu salvar isso, você verá que a saída é 51 e, em seguida, você tem uma string aqui. Está bem? Então, o que está acontecendo aqui é que você tem cinco, que é uma string, você tem mais um operador. Você está usando o operador plus em dois opernts. Portanto, um operante é uma string e o outro operante está em número Então, o que acontece é que essa não é uma adição válida, certo? Então, o que o JavaScript faz implícita ou internamente é converter um em uma string Está bem? Então, torna-se que essa equação se torna p, essencialmente. Eu tenho cinco aqui mais um aqui neste formulário. Está bem? Então, quanto é cinco mais um aqui? Nesse caso? Torna-se 51 porque os dois são cordas, certo? E uma concatenação de strings está sendo executada. Então, se você deixou ou eu disser console, faça o log de pontos aqui, e se eu disser oi, tudo bem aqui, mais olá. Então, vou receber a saída como high hello porque uma concatenação de strings está sendo executada Está bem? É assim que o operador plus se comporta com strings. E com relação aos números, ele adicionará esses dois números. Está bem? Portanto, este é um exemplo de conversão de tipo implícita Tudo bem? Vou apenas comentar isso. Está bem? Agora, deixe-me dar outro exemplo, ok? Então, digamos que eu tenha o exemplo dois aqui, ok? E deixe-me chamar isso de exemplo um aqui, ok? Então, algo assim. Está bem? Opa, alguma coisa Ok, então essa declaração ainda não está completa. É por isso que estou recebendo um erro. Está bem? Então, digamos o exemplo dois. O que é o exemplo dois, em vez de ter cinco como string mais um. Está bem? Então, deixe-me ter isso como um número inteiro primeiro Então eu vou ter menos cinco menos um. OK. Vou copiar essas duas linhas de declaração. Vou dividi-las aqui. E isso se torna o segundo exemplo, é claro. Está bem? Isso também é dois. Agora, se eu salvar isso, você verá que a saída é quatro porque cinco menos um é, obviamente, quatro, e a saída é um número aqui, como resultado do tipo de operador Está bem? Isso é o que você vê. Então, agora deixe-me mudar esses dois. Uma corda. Agora, o que você acha que seria a saída? Está bem? Porque aqui, se você mudar essa string, se torna 51, certo? Você pode ver que está imprimindo 51. Qual você acha que será a saída por aqui, ok? Alguma suposição? Então, se eu salvar isso, a saída ainda será quatro e o tipo de exemplo dois ainda será um número. Agora, por que isso acontece? Então, aqui, se você estiver usando o operador plus, ok, isso foi convertido. Isso era ASIS, e isso foi convertido em uma string, na verdade, e a saída como resultado foi uma string. Você pode ver a saída aqui. Mas em caso de menos, isso mudou, certo? Não é assim que se comporta quando você usa plus com o mar ou prins Então, o comportamento, a resposta para isso é que o comportamento dos operadores de mais e menos com cadeias de caracteres e números são diferentes, e é por isso que você está vendo uma mudança de comportamento na saída. Então, deixe-me explicar isso. Quando você usa operadores plus com strings, tudo bem? Com strings, há uma opção para o JavaScript fazer concatenação Está bem? O JavaScript pode fazer concatenação com strings e o JavaScript pode fazer adição quando operador plus é Está bem? Então, se você está usando isso com números, ele sabe, ok, eu tenho que fazer uma adição. Se você estiver usando isso com strings, ele sabe que eu tenho que realizar uma concatenação Mas quando você estiver usando o tipo misto, o que ele fará é converter o número em string. Está bem? Agora, nesse caso, minus não tem uma função ou comportamento quando usado com strings Você pode imprimir em alto menos olá? Está bem? Isso não faz nenhum sentido, certo? Então, aqui, como essa conversão de um em string não fazia nenhum sentido, o que o Ja Script fez foi converter cinco em número, certo? E deu a você a operação aritmética como resultado, que é quatro, e o tipo de saída final também era quatro a OK. E isso é algo parecido. E é assim que funcionará se você também estiver usando a multiplicação , certo? Então, deixe-me mostrar isso para você também. Está bem? Então, vou apenas duplicar isso aqui. Este é nosso exemplo três, exemplo três e exemplo três, e eu tenho cinco em um. O que você acha que será o resultado? string como cinco em uma string multiplicada por um em uma string faz sentido Não. Então, é claro, isso vai ser um número. OK. Então, sim, é assim que as coisas funcionam. E, como você pode imaginar, internamente, o JavaScript está fazendo uma conversão implícita aqui neste caso, em que está convertendo automaticamente o valor de cinco aqui, que é uma representação de string em um número o JavaScript está fazendo uma conversão implícita aqui neste caso, em que está convertendo automaticamente o valor de cinco aqui, que é uma representação de string em um número aqui. Está bem? E, como você pode ver, você está recebendo uma saída aqui. Agora, é claro, se você duplicar isso, deixe-me duplicar isso e deixe-me mostrar mais um exemplo Se eu rolar para baixo, se eu mudar isso para o exemplo quatro, desculpe, não cinco. Isso é quatro. Isso também é quatro, e isso também é quatro. OK. Agora, em vez de cinco aqui, digamos que você tenha, deixe-me me livrar disso. Digamos que você tenha uma verdade. OK. E você pode dizer verdadeiro mais um. OK. O que você acha que será o resultado? Portanto, a saída seria duas aqui porque verdadeiro é considerado como um. Então, se eu salvar isso, você verá dois e a saída será número. Está bem? Se eu disser que isso é falso, você verá que a saída é um porque falso é zero. OK. Então, vou me ater à verdade aqui. Ok, e você pode ver a saída. Ok, então é assim que as coisas funcionam, e você pode muito bem ver como a conversão implícita está se comportando aqui Tudo bem. Agora, vamos falar sobre conversões explícitas Tudo bem. Então eu vou vir aqui. OK. E falaremos sobre a conversão de valores de forma explícita Tudo bem. Agora, primeiro de tudo, haverá cenários, ok. Haverá cenários em que a conversão implícita não será suficiente e você desejará fazer as coisas de forma explícita Então, digamos que você esteja pedindo ao usuário que insira um H, por exemplo, ou insira marcas. Agora, essas coisas são sempre inseridas como números, certo? E seu programa de script de trabalho está obtendo isso do HTML. Está bem? Então, o que você faria usar isso para determinados cálculos. Agora, digamos que se você tem NUM aqui, ok? Um, dois, três, ok? Então, no meu exemplo sobre o qual eu estava falando, onde você aceita coisas como idade e marcas, então, você pode querer fazer uma conversão explícita em que, você sabe, o número que está sendo inserido é um número na verdade, mas pode ser fornecido como uma entrada para o seu programa como uma string Então, talvez você queira convertê-lo explicitamente, certo? Então, deixe-me dar um exemplo. Digamos que você tenha um número aqui e digamos que você tenha uma piscina aqui. Isso. Eu tenho duas variáveis. OK. Agora, para fazer alguma conversão de tipo explicitamente, Ja Script oferece um conjunto de funções aqui que você pode ver Então, quando você está trabalhando com strings, essas são as funções Você tem duas cordas e uma corda aqui. Você também tem number, parsent e parse float se estiver trabalhando E se você quiser trabalhar com o tipo de dados booleano, poderá usar o booleano aqui Então, vamos explorar como você pode usá-los individualmente. Então, primeiro, vamos falar sobre cordas aqui, ok? Agora, eu já tenho algumas sequências de caracteres criadas. Então, o que eu faria é simplesmente movê-los para dentro desse bloco aqui, não bloquear após os comentários. Está bem? Agora, deixe-me converter ou mostrar como usar a função string. Então eu posso dizer let num to string aqui, e eu posso dizer string assim, e eu posso dizer Num. Está bem? Então, basta passar o parâmetro aqui, ok? E posso dizer que o log de pontos do console está aqui. Pode ver dormência em uma string. Eu posso adicionar um coma. E então aqui eu posso dizer tipo de e vamos imprimir o tipo de número em string. OK. Se eu salvar isso, você verá um, dois, três e uma string como saída. Está bem? Então, sim, isso realmente está em número e está sendo convertido em uma string. Agora, o valor é o mesmo, um, dois, três, mas está no formato de string no momento. Está bem? Agora, isso é uma coisa. Como você pode usar o booleano aqui? Então, booleano você também pode converter, ok? Então, deixe-me criar uma nova variável aqui. Digamos Bool para string aqui, e eu posso dizer string Ok, eu posso dizer bool aqui, algo assim. E deixe-me copiar isso. E você pode dizer bool para string e pull to string do tipo Você pode ver true e agora está sendo representado como string. Então é assim que essa string funciona aqui. Você pode ver, certo? Então, isso é sobre string. Agora você também tem duas cordas que está vendo aqui. Então você pode realmente dizer “deixe”. Então, deixe-me dizer numb to string ou deixe-me copiar isso, na verdade Tudo bem. Na verdade, vou copiar tudo isso. OK. E por aqui, vou chamar isso de um. Isso também tem um aqui. Isso também tem um. Vou acrescentar um no final. OK. E em vez de uma corda aqui, eu posso dizer numb, tot, to OK. Assim. E para Bool também, vou dizer bool, tot, to string E vou ver se é isso. Então você pode ver que a saída é a mesma. OK. Então, você pode usar duas cordas aqui ou apenas uma corda dessa forma. Tudo bem? Agora, vamos falar sobre números, ok? Então, se você tiver um valor em string, digamos, SDR num Ok, você não pode usá-lo para cálculos. Então, digamos que você tenha quatro, cinco, seis aqui. Está bem? Você não pode usar isso para cálculos. Talvez você queira converter isso explicitamente em número para poder usá-lo Tudo bem. E digamos que você também tenha oito valores de torta decimais Eu vou dizer que o SDR flutua por aqui. Ok, ou você pode dizer, chame decimal, o que quiser E digamos que seja 12,55, por exemplo. Tudo bem. Você pode pegar qualquer número aleatório. OK. Então, vamos dar uma olhada no número primeiro. Está bem? Então você pode dizer que deixe o SDR soar aqui. Está bem? Você pode dizer o número. Você pode ver o número e passar SDR num Sorry, not float, STR, OK. Assim. OK. Agora, deixe-me imprimir o valor aqui e também o tipo. OK. Então, vou copiar isso e colar aqui. E se eu salvar isso, você verá que 456 é a saída, e isso é do tipo número agora. Tudo bem. Então, isso foi convertido em um número, como você pode ver. Está bem? Agora, eu posso duplicar essa linha, vamos duplicar essa linha e vamos ver um exemplo com parse int Então, se eu usar parse int, você pode dizer int aqui, ok, STR para int e eu vou substituir isso por parsint e vou Agora você pode ver que isso é novamente um número, ok? Então, isso é, na verdade , converter a string em um inteiro. Está bem? Agora, o que acontece se você adicionar SDR e flutuar aqui OK. Se você adicionar STR float, verá que está truncando essa Você pode ver que apenas 12 estão sendo impressos. 12.55 não está sendo impresso. Está bem? Então, isso é útil se você quiser um número inteiro, certo? Mas como seriam as coisas se você também quisesse manter os decimais e também quisesse fazer a conversão em número e também quisesse manter os decimais para Está bem? Porque há uma perda de dados, certo? O valor decimal é perdido. Então é aí que a bóia esparsa entra em cena. Então, o que você pode fazer é deixar eu duplicar isso aqui, STR para Por aqui. E vou colocar isso aqui, e vou ver se é isso. Em vez de analisar o final, direi analisar, Se eu salvar isso, você verá 12.55. Portanto, o valor decimal também está sendo preservado e impresso como um número Está bem? Portanto, há três coisas para lembrar: número, que é usado para converter uma string em número, análise int, que é usado para converter qualquer valor que você tenha em um número inteiro Depois, você tem parse float, que pode ajudá-lo a obter o valor inteiro ou armazenar o valor inteiro junto com o OK. Agora, uma coisa que eu quero mencionar aqui, se você tentar converter uma string em um número, isso não funcionará. Assim, você pode dizer SDR ou inválido ou num inválido. Inválido, num. Digamos que, porque isso vai ser inválido, eu sei Digamos que eu diga número. Não vou criar uma variável aqui, mas vou ter um número direto e posso dizer olá. OK. Agora, isso não é válido de jeito nenhum, ok? Então você pode pegar isso e imprimi-lo aqui. Mas isso não é válido, ok? Se eu salvar isso, você verá que não é um número, NN significa que não é um número, NN, e o tipo é número, ok? Mas o valor está perdido. É NAN. Tudo bem. Então, sim, se você estiver fazendo um typecasting ou uma conversão de tipo em número, certifique-se de que a fonte realmente tenha um número válido Está bem? Se eu adicionar caracteres a isso em quatro, cinco, seis, eu digo quatro, cinco, seis, então seria NN novamente porque não é um número válido, certo? Espero que isso esteja fazendo sentido. Está bem? Agora, vamos falar sobre booleano aqui. Então, vamos criar zero Ok. E também terei que deixar uma string booleana não vazia aqui ou remover o booleano daqui . Está ficando mais longo. OK. E então eu vou dar um olá. OK. E vamos ver como você pode usar o Boolean Você pode dizer deixe zero para booleano. Então, vamos converter zero em booleano primeiro. Vou dizer booleano aqui e vou dizer zero. OK. O que você acha que será o resultado? Deixe-me ver essa declaração aqui, Console Lock. Vou substituir, vou substituir esse número inválido por zero booleano, e você verá false Portanto, zero está realmente se traduzindo falso quando convertido em booleano E agora tudo bem, eu adicionei zero acidentalmente, isso deve ser zero Está bem? A saída será a mesma. Mas se você converter o zero em um , isso lhe dará verdade. Está bem? Se você disser um, cinco, seis, qualquer número aleatório, ele permanecerá verdadeiro. Então, caem apenas 40 por aqui. OK. Espero que isso esteja fazendo sentido. Tudo bem. Agora, se você tem essa string aqui, o que acontece se você tentar converter isso para Poulin, ok? Então, deixe-me copiar isso aqui. OK. Eu vou para a próxima linha. E em vez de zero para booleano, vou dizer string to boolean string to boolean E aqui, eu vou ter uma string não vazia. OK. E copiarei a string para boolean e a adicionarei aqui Vamos ver qual é a saída. Você verá a verdade. Está bem? Portanto, qualquer string não vazia que você tenha e, se tentar convertê-la em um booleano, verá true como saída Está bem? Portanto, valores como zero ou string vazia, null, undefined e NN são falsos, que significa que são Portanto, mesmo no lugar de zero, se você tiver uma string vazia, string vazia. Ok , será falso. Você pode ver. Se for um fim, digamos, um fim. E se eu salvar isso, será falso. Está bem? Se for nulo, será falso novamente. OK. Mas vou ficar com zero. OK. E todo o resto, exceto zero, string vazia, NN nulo e indefinido, todos esses são valores falsos Se eles forem convertidos, eles serão traduzidos para falsos em Bolin, e tudo o mais, exceto isso, é verdade, certo? Então, espero que isso tenha feito sentido sobre como as conversões de tipo funcionam explicitamente no Jscript OK. OK. Isso foi um erro aqui. Espero que isso seja útil. 25. Projeto: crie um gerador de cores: Então, vamos criar um gerador de cores usando JavaScript em HTML, certo? Então, aqui estou eu no ponto de índice HTML, então eu tenho esse arquivo de ponto de índice HTML e ponto de índice Hs. Este é um arquivo JavaScript no qual nosso código Ja Script residirá. Vou adicionar mais um arquivo e chamarei isso de astyles dot CSS Então, faremos um pouco de embelezamento, não muito, mas faremos com que nossa página da web pareça um pouco decente, certo Agora, aqui no HTML com pontos de índice, o que vou fazer é digitar a exclamação e obter o código padrão de uma página HTML uma Tudo bem. Agora, você pode ver que eu tenho o dispositivo e tudo mais aqui, ok. E aqui, vou adicionar o título do documento ou o título da página da web, certo? E esse título será um gerador aleatório de cores. Algo parecido com isso. Tudo bem. Agora, aqui embaixo do corpo, eu vou ter H uma tag porque é aqui que eu vou começar a escrever o código. Então, eu vou dizer gerador de cores aleatório. E, na verdade, em vez de digitar, posso obter isso diretamente OK. Isso é feito e, como esse aplicativo funcionará, teremos um botão que gerará cores aleatórias toda vez que você clicar no botão. Tudo bem. Então, precisamos desse botão. Então, vou adicionar um botão aqui. Você pode ver esse elemento de botão. Tudo bem. Vou fechar isso e vou chamar esse botão de gerar cor. OK. OK. Isso está feito. E então precisamos também exibir os códigos de cores, certo. Agora, a cor que está sendo gerada estará no código xassimol Esse será um código Exad assimil que podemos exibir também para o usuário. Tudo bem. Então, exibiremos o código de cores. Vou dizer Ptag aqui. OK. E teremos alguns códigos de cores impressos aqui. Isso está feito, certo? Agora, precisamos carregar o JavaScript também. Então, o que eu posso fazer aqui é carregar o arquivo JavaScript. Portanto, temos o arquivo Ja Script criado como index dot qs. Então, vou sair da tag body aqui e vou dizer script SRC, e vou dizer ponto de índice s aqui E eu vou fechar a pilha. Tudo bem. Ainda não fizemos nenhum link para CSS, mas veremos isso em breve Tudo bem. Vou fechar esse console. Não precisamos mais ver o console, certo? Agora, aqui, se eu ver isso, ok, isso deve realmente exibir esse HTML específico aqui. Você pode ver o gerador de cores aleatórias e gerar cores. Tudo bem. Agora, vamos para o ponto de índice JS, certo. E é aqui que vamos escrever o script Java que funcionará com esses elementos HTML e dará vida a eles. Portanto, se você clicar em Gerar cor, como eu disse, ele deverá gerar um novo código de cores e o plano de fundo de toda a página da web deverá ser definido para esse código de cores específico, e também devemos exibir o código de cores aqui para o usuário. Tudo bem. Então, o que eu vou fazer está aqui se você vier. Aqui temos esse PTAC. Temos alguns elementos e também precisamos exibir o código de cores aqui, então o que vou fazer é atribuir um ID a isso, porque preciso referenciar isso a partir do JavaScript. Está bem? Então, vou codificar isso como código de cores aqui. Algo parecido com isso. Ok, e eu vou guardá-lo. OK. E deixe-me remover esse código daqui. Está bem? Só quero cores. Eu virei até aqui. OK. E o que eu vou fazer é dizer documento. Então eu preciso colocar essa tag P onde queremos exibir a cor. Então, eu vou dizer que o ponto do documento obtém o elemento por ID. Então, estou obtendo o elemento por ID do documento. Agora, aqui, vou mencionar a ideia do elemento. Portanto, a ideia do elemento é cor ou código de hífen colorido, o que quer que você tenha adicionado lá Está bem? E podemos atribuir isso a uma variável, ok? Então eu posso dizer cor e eu posso dizer parágrafo, ok, para. E eu vou guardar isso. Está bem? Então agora temos acesso à etiqueta P, ok? E se quiser, você pode escolher o log de pontos do console aqui. Ou, em vez de fazer o registro de pontos do console, o que eu diria é que você pode dizer conteúdo de texto Color para Tot e adicionar um teste aqui. OK. E se você salvar isso, você deve ver teste sendo adicionado aqui, ok? que significa que você pode acessar a tag de parágrafo, que é uma tag P usando esse ID, ok? E se você passar o mouse sobre este documento dot get element by ID, poderá ver a referência retornada ao primeiro objeto com o valor especificado do atributo ID Portanto, o atributo ID é cor nesse caso. Está bem? E somos capazes de acessar o elemento D. Agora, você pode ter um código de cores padrão também sendo exibido aqui. Está bem? Assim, posso adicionar um código de cores como hash Então, os códigos de cores começam com hash, e eu posso dizer FF FF, FF OK. Assim, você pode adicionar um código de cor padrão que é realmente exibido quando a página é carregada. Tudo bem. Agora, depois de fazer isso, o que você precisa fazer é clicar nesse botão. Então, ao clicar nesse botão, o que deve acontecer é que o código de cores deve ser gerado, e a forma como vamos gerá-lo é que teremos uma geração aleatória. Tudo bem. Então, o que vou fazer é vir aqui e precisamos ter acesso ao botão porque, ao clicar nesse botão, algum código deve ser executado, certo? Então, o que vou fazer aqui é dizer que vou atribuir a isso um ID aqui, e o ID pode ser gerado. OK. E não estaremos lá. OK. Isso está aí e aqui eu vou. Vou copiar isso e ver ponto do documento Get element by ID ser gerado aqui. OK. Agora, quando tivermos acesso ao botão, direi ao clicar nesse botão. OK. Então, precisamos instruir ao clicar neste botão Preciso adicionar uma função aqui. OK. Agora, essa é a sintaxe para definir uma função em JavaScript. OK. E vamos definir uma função. Agora, dentro disso, o que acontece é esse bloco de código. O que essa função significa é esse bloco de código que estamos definindo aqui é executado quando o botão é clicado Está bem? Bem simples. Vou dizer let e terei uma cor aleatória sendo gerada. Agora, como vamos gerar uma cor aleatória? Porque essa é uma cor aleatória que também estaríamos exibindo. Agora, para gerar essa cor aleatória, vamos usar uma fórmula. Agora, sempre que você estiver representando códigos de cores, ele começa com hash e, em seguida, você tem um valor hexadecimal como FF, CC, FF , Está bem? Então, precisamos obter esse valor hexadeimal Aleatoriamente, hash, você pode acrescentar manualmente, certo? Então, o que eu faria é vir aqui. Nós vamos fazer uso da fórmula, ok? E vamos fazer uso de algo chamado objeto matemático. Está bem? Então, vou dizer matemática aqui e vou dizer que o ponto agora em matemática ou objeto matemático em JavaScript dá acesso a muitas funções em JavaScript. Uma das funções é aleatória. Agora, usando essa função, você pode gerar números aleatórios. Está bem? Então, se você passar o mouse sobre isso, verá retornar um número pseudo-aleatório 0-1 Está bem? Agora, toda vez que isso é executado, ele gera um número aleatório. Então, deixe-me mostrar isso para você aqui. Está bem? Então, Alco to Console, você pode ver matemática tensa, aleatória aqui Opa, Mt taut, random, algo assim, e você pode gerar um número aleatório Então, toda vez que você executar isso, ele gerará um número aleatório. Está bem? Agora, o que vamos fazer é fazer uso disso e gerar um número hexadecimal Como? Então eu vou gerar esse número aleatório gerado, ok? Então, deixe-me copiar esse número aleatório que está sendo gerado. Então, esse é um número aleatório que está sendo gerado. Vou limpar o console e multiplicar esse número aleatório por um número Agora, esse número é de 1627 a 15. Agora, por que estou multiplicando por esse número? A razão pela qual estou multiplicando por esse número é porque esse é o valor máximo Está bem? Esse número representa o valor mais alto ou máximo possível para uma cor de 24 bits, ou em hexadecimal Então é com isso que vou multiplicá-lo. OK. E então, quando terminamos a multiplicação, obtemos um resultado Então eu vou começar a usar o piso matemático de pontos. Agora, o que é math dot floor? Então, eu copiei esse valor após a multiplicação. O que é o piso matemático? Matt floor é uma função de piso que indica que, se eu tiver um valor decimal de um, quatro, cinco, seis, a saída seria um Está bem? Agora, se você tiver um, qualquer número que você tenha, ele lhe dará o menor valor no decimal Está bem? Então, se você tiver 1,4 4636, ele erradicará ou ignorará esse valor aqui. Então, uma é a saída. Agora, se eu colar isso aqui, é claro que vou me dar oito duplos dois, 8937 aqui Está bem? E então eu vou pegar esse valor, esse valor aqui e vou convertê-lo em representação hexadecimal Para uma string hexadecimal é o que posso dizer. Tudo bem. Então, eu vou dizer esse número, ponto dois, e vou passar 16 como argumento, o que significa que eu preciso de um valor exa decimal Está bem? Então, isso me deu um erro aqui. OK. Deixe-me ver. Ok, então isso tem que ser para que isso funcione, tem que estar na forma de string. Então, vou copiar isso novamente. Vou dizer haxixe aqui. Vou colocar isso em pedaços. OK. E então eu vou dizer para a string e deixe-me tentar esse 16 aqui. Vamos ver. Ok, token inválido ou inesperado 1 segundo. Deixe-me tentar novamente. Portanto, isso deve funcionar de forma ideal. Ok, então isso funciona. Você pode ver que, por algum motivo , não está funcionando no console, tudo bem. Mas deixe-me mostrar isso para você na própria identidade, certo? Então, aqui dissemos que vamos obter um número aleatório. Vou multiplicá-lo por 16777, OK, para um, cinco Opa, isso tem que ser cinco. Tudo bem. E essa coisa toda, essa coisa toda tem que estar em um par de chaves redondas, e então eu vou passar essa coisa para o chão aqui. OK. Então, obtemos o valor fluído. Tudo bem. Agora deixe-me acessar o log de pontos do console aqui. Em vez do registro do console, o que podemos realmente fazer é exibir em coal para. A cor do conteúdo do texto é igual à cor aleatória. Está bem? Então, podemos ver a saída aqui em si. Tudo bem. Agora, se eu atualizar, deixe-me ver o que está acontecendo aqui Portanto, ele será acionado se você clicar em Gerar cor. Então você pode ver que esses números estão sendo gerados. OK. Mas agora, essa não é a representação exadimal Então, o que eu faria aqui é vir aqui. Eu diria que ensinei a encadear aqui, e eu diria um valor de 16, algo assim. E eu guardaria isso. Está bem? Eu diria que gera cores. Agora você pode ver que esses valores estão sendo gerados. Você pode ver esses valores do exame. Está bem? Você precisa prefixar isso com hash Está bem? Então eu vou dizer que tem aqui, algo assim, e eu vou dizer mais Ok. Então agora você tem códigos de cores sendo gerados aqui. Não tenho certeza se o branco não está funcionando no console. Se você sabe, por favor me avise. Tudo bem. Mas está funcionando perfeitamente bem aqui , como você pode ver, tudo bem. Agora isso está feito, ok? E o que precisamos fazer é realmente exibir a cor aleatória. O que também precisamos fazer é mudar o plano de fundo para a cor que está sendo gerada. Então eu posso dizer documento, corpo pequeno, e eu posso dizer estilo tot , tot, e eu posso obter a Opa. Cor de fundo aqui. E a cor de fundo será aleatória. E se eu salvar isso, você pode ver Fun, certo? Então, com JavaScript simples, como quantas linhas de script Java você escreveu? Nem mesmo uma, duas, três, quatro, cinco, cinco, seis linhas de código, você é capaz de gerar tanta magia. Tudo bem, você pode ver. Então, com essa fórmula, estamos gerando um código de cores que estamos exibindo para o usuário e também o definindo como uma cor de fundo. Agora vem o dstyle dot CSS, certo? Então, o que eu vou fazer é virmos até aqui. Ok, e comece a estilizar aqui. OK. Então, vou dizer família de fontes aqui. E vou adicionar afond familia como Aerial. OK. E podemos dizer alinhamento de texto Vou alinhar o texto ao centro. Ok, margem aqui, margem, podemos definir como zero. Opa. E então, aqui, eu vou ter estofamento. Vou ter preenchimento de até 20 pixels. Ok, e eu tenho a cor de fundo. Eu posso ter a cor de fundo para fazer o hash aqui e no iFifi, algo assim OK. Então, sim, esse é o primeiro CSS. Ok, mas também precisamos vincular o CSS ao arquivo HTML. Só então isso refletirá, certo, o que não fizemos. Então, o que eu posso fazer é dizer o link aqui. RL é igual às folhas de estilo. OK. Folha de estilo aqui, e eu posso ter HRF. E isso será styles dot css, e eu vou fechá-lo. Algo parecido com isso. Está bem? Então agora você verá o CSS sendo aplicado aqui, ok? Agora, o corpo está pronto, tudo bem. Podemos estilizá-lo um pouco mais. OK. Ele tem uma etiqueta. O que eu posso fazer é adicionar cor aqui. A cor pode ser, ok, em vez disso, eu posso adicionar 333 aqui OK. Em seguida, precisamos estilizar o botão. Então, que estilo podemos dar ao botão? OK. Então, vamos dar uma cor azulada Então, eu tenho um código de cores em mente, então posso dizer que posso ter azul aqui, tipo de cor azul, você pode ver. OK. Agora, role para baixo. Color Oops. A cor é branca, 55. OK. E fronteira, não posso dizer nada por aqui. Ok, Boter se foi. Podemos adicionar preenchimento agora para que pareça decente, então posso dizer dez px e 20 px, salve-o. Está bem? Parecendo decente. Ou você pode reduzir o preenchimento, se quiser. OK. Margem. Eu posso ter dez pixels de margem. OK. E eu posso ter um tamanho de fonte como o de, digamos, 16. OK. Ou podemos ter Cursor, ponteiro aqui. Ok, raio da fronteira. Ok, o raio da borda pode ser de cinco pixels aqui. OK. E então eu posso fazer a transição aqui, transição da cor de fundo. 0,3 segundos. OK. OK. Então é isso. Você pode ver o CSS sendo aplicado, ok? E se você ampliar um pouco. Então você vai ter que ampliar um pouco, ok. Então, esse é o botão CSS. Ou você também pode passar o botão para passar o mouse, ok? Então, botão. Ok, H. Ok. E aqui você pode dizer a cor de fundo e adicionar azul escuro. OK. Você pode ver que o CS está em ação. Tudo bem. Então isso está feito. Você pode até mesmo ter a tela em que está exibindo o código de cores, certo? Assim, você também pode obter esse estilo. Então, eu acidentalmente pressiono outra coisa. Ok, então estamos exibindo isso aqui, em cores. OK. Então, o que eu faria seria vir até aqui. Cor Asta. Vou entender, vou me referir a esse ID e vou dizer que o tamanho da fonte de você pode dizer 24 aqui. Ok, o peso da fonte está em negrito aqui. Você tem acesso ao negrito. OK. E você pode dizer cor aqui. Cor, você pode adicionar, OK. Você pode simplesmente manter 333. Você pode ver aqui. OK. E então você pode ter margem e margem de 20 pixels e 100. OK. Isso está feito. Agora, sim, isso é o que é. Eu não acho que devemos acrescentar: Ok, então isso está feito, e podemos ter mais se você quiser. Mas, por enquanto, vamos parar por aqui, ok? É basicamente isso, certo. E é um gerador de cores muito simples. Você pode ver como, com a ajuda de um JavaScript simples, com apenas cinco , seis linhas de código, conseguimos adicionar muita vida à nossa página web estática, certo? Então, sim, você pode até optar por usar o vento de cauda, se desejar Mas sim, eu escolhi escrever um pouco de CSS bruto, tudo bem Então, espero que isso lhe dê algumas dicas sobre como você pode usar os seletores aqui E como você pode adicionar ouvintes aos botões e como executar um trecho de código depois de adicionar ouvinte ao seu código JavaScript. Tudo bem. Então, sim, espero que isso seja útil e espero que você tenha conseguido acompanhar. 26. Projeto: crie um conversor de temperatura: Então, vamos dar uma olhada em como você pode criar um aplicativo conversor de moeda. Tudo bem. Então, vamos contornar três arquivos aqui, como index dot has, index dot HTML e style dot CSS. Tudo bem. Então, começaremos a escrever o código no arquivo HTML. Agora, o que todo esse aplicativo terá é um menu suspenso, que ajudará os usuários a selecionar onde ele deseja ou em qual unidade ele deseja converter a temperatura, certo E então também teremos uma caixa de texto onde o usuário pode inserir a temperatura que deseja converter. Além disso, teremos um botão de conversão, no qual o usuário pode clicar e converter a temperatura. Então, vamos embora. Vou apenas fazer uma exclamação aqui e preparar um código padronizado Tudo bem. Agora, quando tivermos o código padronizado, atualizarei o título, então direi temperatura Conversor aqui. OK. E então, dentro do corpo, terei novamente a etiqueta H one. Então, vou copiar isso inteiramente e renomear isso para H one Tudo bem. Então você tem conversor de temperatura. OK. Sim, você pode ver. Então, agora o que precisamos fazer é adicionar uma entrada. Está bem? Portanto, a entrada é do tipo texto aqui. Ok, então digite o texto e eu também terei um espaço reservado Eu direi que insira a temperatura. OK. E vamos fechar isso. Vamos adicionar um elemento de ID também aqui. Então, o ID para isso pode ser Opa aqui, então isso é para que o ID para isso possa ser temperatura ou temperatura, o que você quiser Vou manter a temperatura curta. OK. Se você perceber que tem esse campo de texto entre temperaturas aqui Tudo bem. Agora isso está feito. Agora precisamos selecionar, que é uma lista suspensa. Vou chamar isso. Vou atribuir esse ID da unidade. E dentro disso, eu vou ter uma opção. Por aqui. OK. Agora a opção será do tipo valor e o valor será C. Agora a exibição é Celsius. Algo parecido com isso. E se você vier aqui, você vai ver Celsius aqui em cima Eu vou gostar de duplicar isso aqui. Em vez de C, vou ter F aqui e vou ter farin Fahrenheit Está bem? verá graus Celsius e Fahrenheit, Então, se você vier aqui agora, verá graus Celsius e Fahrenheit, o que é bom o suficiente. Tudo bem. Agora, dependendo da seleção, C e F serão passados para o aplicativo ou qualquer seletor ou onde quer que você esteja passando o valor Agora, aqui, você pode ter um botão. OK. Vou adicionar o botão como converter aqui, o ID é converter e adicionar texto como conversão aqui Está bem? E então também precisamos exibir o valor convertido, então vou dizer temperatura convertida aqui. Então, qual é a temperatura convertida? Vou adicionar um intervalo para exibir a temperatura. Está bem? Então, vou dizer que vamos passar por aqui e inicialmente teremos zero, e posso adicionar uma conversão de ID mais ou menos assim. OK. Isso está feito, então você pode ver aqui. É assim que a interface se parece agora. Tudo bem. Agora podemos vinculá-lo rapidamente ao nosso aplicativo, então vou dizer script aqui. Vou dizer SRC e vou dizer índice s, e vou fechá-lo. Também vincularemos a parte CSS. Então eu vou dizer Link RL e eu vou dizer folha de estilo. OK. E eu vou dizer que vou adicionar HRF aqui como estilos de pontos CSS e LCLloss. Está bem? Então, isso foi feito até agora, tudo bem, você pode ver o aplicativo. Agora precisamos começar com a parte do JavaScript, certo. Então, agora o que precisamos fazer é primeiro, então, primeiro, ao clicar nisso, o código deve ser executado, certo? Então, precisamos pegar esse botão. Está bem? Então, podemos dizer que o ponto do documento obtém elemento por ID porque estamos usando o ID aqui. Está bem? E eu posso dizer converta aqui, certo? E o que deveria acontecer? Então, ao clicar nisso, queremos executar algo. Então eu vou dizer que clique aqui e eu vou executar uma função. Uma função não tem nome, não tem nenhum tipo de parâmetro, e eu primeiro alinho isso com um ponto e vírgula E agora, dentro dessa função, podemos adicionar o que quisermos ou qualquer código que quisermos exibir ou qualquer código que queiramos executar basicamente com o clique do botão. Então, primeiro criarei algumas variáveis aqui, temperatura, e também obterei a unidade. Agora, primeiro precisamos obter a temperatura e a unidade. OK. Então, vou dizer document, taut, get element by ID, e precisamos obter o valor temp taut Agora, por que o valor do ponto temporário. Então aqui, isso é Temp. Então, estamos obtendo primeiro o valor que o usuário inseriu. E então também precisamos obter a unidade que o usuário selecionou, certo? Então, o que eu faria é copiar isso aqui ou esperar um minuto, precisamos concluir isso. O valor que estamos obtendo aqui estará no formato de string. Não quero usar string, então também precisamos preservar os valores decimais Então, qual é a escolha certa aqui? Sim, como você pode ver, estou usando parse float. Por que estou usando parse float? Porque o usuário pode inserir um valor decimal. Também preciso obter o valor decimal. Para maior precisão. Tudo bem. Vou pegar este ponto do documento Get Element ID aqui, e vou pegar a unidade aqui. Ok, então isso tem que estar em Isso tem que ser como uma string. Então eu vou dizer unidade, algo assim. OK. Isso está feito, até agora tudo bem. OK. E uma vez que temos a unidade e a temperatura, o que podemos fazer é escrever algum código com base no qual a conversão acontecerá, certo? Agora, qual deveria ser esse código? Então, teremos que fazer uso da tomada de decisão aqui, certo? Então, se o usuário selecionar farenhight. Uma fórmula é aplicada. Se o usuário selecionar Celsius e clicar em converter, outra fórmula Então, dependendo do que está selecionado aqui, a aplicação da fórmula muda. Tudo bem. Então, deixe-me mostrar a fórmula primeiro, ok? Então, a fórmula é converter Celsius em Fahrenheit, vamos dizer temperatura em 9/5 Esta é uma fórmula que vamos usar para converter C em F. E então, para converter Fahrenheit em Celsius, vamos dizer temperatura -32, e vamos dizer em 9/5 . Tudo bem. Essas duas são as fórmulas. Deixe-me também mencionar isso aqui. Isso converterá F em C. Tudo bem? Agora, como sabemos qual fórmula queremos executar, certo? Então eu vou dizer. Então, o que eu vou fazer é dizer se a unidade é igual a C. Então eu unidade é C, certo? Então, se o usuário selecionou Celsius aqui no topo para baixo, o que deve acontecer é que devemos converter C em F, certo? Porque então devemos executar isso, certo? Ou, se não for verdade, podemos executar isso. Tudo bem. E podemos ter essa parte no par de chaves redondas e até mesmo essa parte no par de chaves redondas para maior clareza. Tudo bem? Algo parecido com isso. OK. E então eu posso atribuir a saída disso para converter. A temperatura aqui, que é uma variável. OK. E se eu vier aqui. Opa. Então, se eu vier aqui, posso fazer com que tenhamos essa temperatura convertida. Podemos exibir essa temperatura convertida. Então, como vou exibi-lo? Vou copiar esse texto e precisamos exibi-lo no ID convertido, certo? É esse o documento de identidade que damos? Ok, então o ID é convertido, sim, precisamos exibi-lo no intervalo, certo? Então, ponto convertido. Vou dizer conteúdo de texto e vou dizer ponto temporário convertido Eu posso apenas exibir a temperatura convertida. Vamos ver qual é o valor que vemos. Então, digamos que a temperatura seja 100, eu seleciono Celsius. Isso é Celsius, certo? Então eu preciso convertê-lo em Fahrenit. Então isso é 21, dois. OK. Agora, se você quiser verificar isso, basta pesquisar no Google Celsius até fahrenit e você encontrará essa calculadora no próprio Google, a pesquisa do Google Assim, você pode inserir 100 e ver a saída como um, dois. Tudo bem. Podemos fazer o mesmo se você selecionar fahrenit A temperatura em graus Celsius é 122,4, e você pode verificar isso aqui Agora tenho o Google em graus Celsius. Então, isso é Celsius a Fahrenit. Isso está longe de Celsius. Então, se eu disser 100, eu obtenho, ok, então há algo em 1 segundo. Então, há 100 fahrenit e eu estou convertendo Ok, então minha conversão parece errada, então deveria ser na verdade 37 graus Celsius Mas estou recebendo 122. Então, se você vier aqui, talvez algo esteja errado na fórmula. Ok, então isso não pode ser. Ok, então isso não deve ser nove por cinco, isso deve ser cinco por nove aqui. Agora, se você vier, encontrará um conversor de 100 Fahrenheit, poderá OK. Então, agora está correto. Tudo bem. Houve um erro na fórmula, então não deixe de usar essa fórmula, certo? Então, agora, isso não parece bom, certo? É 7777, um lote de sete e depois oito. Então, eu gostaria de movê-lo para decimais fixos ou posição fixa de duas Então, o que posso fazer aqui é converter uma temperatura, firme, em fixa, e posso dizer duas Você pode ver, número de dígitos. Portanto, isso permite que você mencione o número de dígitos após o ponto decimal e deve estar na faixa de 020 a 20, desculpe, Então, se eu guardar isso, e se você vier aqui, se eu inserir 100 graus Celsius, tudo bem OK. Eu vou dar zero, zero. Se você adicionar Fahrenheit, verá 37,78. Tudo bem. Então é assim que o conversor de temperatura está funcionando de forma muito simples, tudo bem. Mas com a ajuda do JavaScript, somos capazes de fazer muita coisa, certo? Agora, vamos dar uma olhada no estilo aqui. OK. Vamos manter o estilo muito simples aqui. Vou digitar alguns. Vou digitar alguns estilos, ok, exemplo, vou digitar alguns elementos de estilo. Então, vou adicionar alguns elementos de estilo aqui. Então, para a família, digamos que seja como esta aqui. Ok, linha de texto. Vou manter o centro e a margem como zero. E eu vou dizer que o preenchimento é 20. Provavelmente. OK. E, provavelmente, adicionarei a cor de fundo. Podemos adicionar plano de fundo como, digamos, Azure. Vamos ver o que parece. OK. Parece bom? Está tudo bem O Azure parece decente. Courier também parece decente, ok? Ou você pode atualizar a família de fontes se não estiver gostando disso, ok? Portanto, a família de fontes pode ser que você possa selecionar o sensor aéreo Alvita Você pode ver. Isso também está bem. Dependendo da sua escolha, você pode escolher a família da fonte. Venha até o H one aqui. OK. Agora, para H one, vou ver a cor. Qual é a cor? Você pode selecionar provavelmente ir para baixo e pode ficar enegrecido Eu também posso atualizá-lo, para que você possa atualizá-lo para algo assim. Depende totalmente de você ou você pode ficar preto aqui. Vou me livrar disso. Vou manter o preto simples. OK. OK. Isso está feito. Agora, aqui, podemos ver a seleção e a entrada. Então, posso dizer entrada para digitar como texto. OK. E para selecionar aqui. Isso é um CSS. Agora, aqui, posso dizer preenchimento de zero pixel. OK. Posso dizer que o tamanho da fonte aqui é 16. OK. Então você pode ter uma margem aqui para dez pixels, certo? Você pode ter um raio de potência de cinco pixels. Tudo bem. Você pode ter pó aqui de um pixel, sólido, e eu vou dizer hashtag então você pode ter uma largura aqui de 200 Vamos salvar e ver, você pode ver. Isso mudou um pouco, certo? Parece bastante decente, certo? Você pode adicionar mais preenchimento, se desejar. OK. Posso aumentar o preenchimento para, digamos, dez. OK. O acolchoamento não parecia muito bom, mas agora parece decente, você pode ver OK. E agora vamos continuar com isso, o próximo é o padrão aqui. Então, vamos dar uma olhada no padrão, tudo o que podemos adicionar. Está bem? Então, para o botão, vou dizer padrão aqui e rolar um pouco para baixo. OK. Então, para o botão, podemos dizer a cor de fundo de, uh, deixe-me adicionar azul. OK. Eu posso dizer cor de branco, e a borda é nenhuma. E eu posso adicionar preenchimento aqui, dez pixels, 20 pixels, algo assim E você pode dizer fonte, ok, não fonte, tamanho da fonte. O tamanho da fonte pode ser 16 e deve parecer decente. Vamos modificar isso se isso não acontecer. Ok, ponteiro do cursor aqui Posso dizer que o raio do pó é de cinco pixels, algo assim E sim, acho que é isso. Se você vier aqui, tudo bem, parece bem decente. Você pode adicionar um efeito de foco se quiser, ok? Então eu posso dizer: passe o mouse sobre o botão. Ok, então o mouse do botão pode ser da cor de fundo, e eu posso dizer azul escuro Venha aqui. Você pode ver esse efeito, certo? Praticamente isso. Tudo bem. E agora você pode adicionar um estilo para o PTAC. Está bem? Posso dizer que o tamanho da fonte e os pixels são um pouco maiores que o botão. E o peso da fonte está em negrito. E então a cor é 333. Margem de, posso dizer, 20 pixels e zero. Se você vier aqui, tudo bem? Agora, vamos adicionar então essa coisa que temos, que é convertida, vamos adicionar algo a isso. OK. Eu vou vir aqui e aqui, convertê-lo. Então, para isso, vou dizer cor. Cor de, podemos dizer que eu posso, um pouco azul. OK. Dependendo da sua preferência, você pode dizer tamanho da fonte. Eu vou dizer que é grande e achado, em negrito. Vamos ver como fica. Então você pode ver que é muito decente, certo, se destacando. Você pode convertê-lo. OK. Então, esse é o nosso conversor de temperatura, e como funcionou, construímos ou escrevemos algum HTML, HTML simples, tags simples que usamos, vinculamos como JavaScript e CSS. No JavaScript, obtemos o botão de conversão e o adicionamos ao clicar Lissner, que é acionado quando você clica nele, e então você obtém esses valores porque , com base nisso, você realizará a Certifique-se disso, obtenha o valor da temperatura como flutuador Oito. Então estamos convertendo a temperatura com a ajuda do que você pode ver aqui com a ajuda do operador ternário Então você está verificando primeiro. Isso é uma condição. Ok, primeiro você está verificando se a unidade é igual a Celsius. Se for igual a Celsius, você precisará converter Celsius Se a unidade atual não for Celsius, se for ferrenita, você precisará converter de ferrenita em Celsius, e essas são as fórmulas E então você está exibindo o resultado convertido ao multiplicar as casas decimais para até E então você tem um estilo básico adicionado para embelezamento adicionado para embelezamento Então, espero que você tenha conseguido acompanhar e espero que tenha sido útil. 27. Modelos literais: Agora é hora de começarmos a falar sobre modelos literais e entender o que são Então, sempre que você trabalha com strings, ok, como você cria uma string, certo? Desculpe pelos bonés. Você pode criar uma string dessa forma para dizer: et name é igual a W, códigos duplos, você pode atribuir um nome aqui. Está bem? Agora, em vez de códigos duplos, você pode até mesmo usar um código único. Ok, posso selecionar o texto e digitar um único código. Então essa também é uma string válida aqui, ok? Agora, essa é uma maneira de criar strings e outra é com a ajuda de modelos literais Agora, o que são modelos literais? Assim, eles permitem que você trabalhe com cordas de uma forma mais flexível e legível Agora, o que significa mais flexível e mais legível? Isso também é flexível, certo? Mas isso é bom com casos de uso simples. Agora, haverá casos de uso em que talvez você queira criar, digamos, mais uma variável Está bem? Quero criar mais uma variável e quero dizer olá. Está bem? E eu gostaria de ter um nome aqui, certo? Então, eu vou ter que dizer algo assim. Ok. Ok. Agora, se eu fizer o log de pontos do console aqui, posso dizer uma saudação Ok. Então você verá Hello Alice aqui. Tudo bem Então, se você quiser concatenar duas strings, você usará o plus aqui Agora, essa é uma maneira, mas se você quiser fazer vários tipos, se quiser criar uma string em tempo real e se quiser usar várias variáveis ao construir uma string, porque aqui estamos usando apenas uma variável, certo? Não estamos fazendo uso de várias variáveis. Então, isso ainda está bem. Mas se você tem várias variáveis em que está usando várias variáveis para construir uma string dinamicamente , essa abordagem não é nada fácil e nem um pouco flexível ou legível Tudo bem Então, nesse caso, você pode usar o modelo literal Então, vou mostrar o que são modelos de ninhada. Então, aqui estamos fazendo uso de aspas simples, ok? E estávamos usando o sinal de mais aqui para adicionar a variável no final. Mas aqui, quando você usa sintaxe literal do modelo, você pode dizer olá, e eu vou usar o mais alto aqui porque quero adicionar um nome aqui E eu vou dizer o nome. Ok. Portanto, o template literal é essencialmente uma sintaxe que você está usando para criar strings em Tudo bem? Agora, isso não vai funcionar. Eu não salvei o arquivo. Isso não funcionará porque ainda está em códigos únicos. Então, para fazer o modelo literal funcionar. Ok, deixe-me fazer o conjunto de controle. Deixe-me ter essa mesma sintaxe. Está bem? Se eu salvar isso, você verá hello dollar name. Portanto, esse valor não está sendo substituído. Para substituir esse valor, terei que adicionar Bates em vez de usar um único código Você pode ver os carrapatos. Agora você tem algum tipo de realce de sintaxe aqui, e você pode ver o nome aqui Está bem? Agora, isso funciona com qualquer tipo de variável. Se eu tiver uma variável chamada nome do aluno, ok, eu posso ter o nome do aluno aqui, e aqui eu posso dizer que cada um é igual a 17. Digamos, por exemplo. Olá estudante, tudo bem? E eu posso dizer que você é. Eu posso usar o So I want to print in age agora, certo? Então eu posso dizer dólar, idade. Ok. E você é Você é velho. Ok. Então, aqui você verá. Olá, Alice, você tem 17 anos. Consegue ver isso? Ok. Se eu afastar um pouco do editor, você verá isso sendo impresso. Tudo bem Então é assim que os literais de modelo podem ser úteis. Agora imagine fazer isso com a ajuda do operador de concatenação, o operador positivo que estávamos usando Tudo bem? Não é bom se a string for um pouco complexa. É construído de uma forma um pouco complexa. Está bem? E não é simples Se você estiver usando várias variáveis , criar strings sem a ajuda de literais de modelo não é conveniente Está bem? Assim, você pode ver como a sintaxe é conveniente Também é legível. Então, a definição aqui diz que é legível, certo? E é legível. Assim, qualquer pessoa lendo seu código saberá o que você está tentando fazer aqui. Está bem? E o ID também faz um ótimo trabalho destacando a sintaxe aqui Então, no momento em que você adiciona dólar e essas chaves, isso é destacado em uma sintaxe diferente Tudo bem? Então, modelo, o que são literais de modelo Template literals é uma sintaxe com a qual você pode construir strings e trabalhar com elas de uma forma mais flexível e, eu diria, mais E o que é uma sintaxe? Então, normalmente, você pode criar uma string usando códigos simples ou aspas duplas, certo? E você pode concatenar usando o operador plus, certo? Mas aqui, você está fazendo uso de morcegos. Então, quando você usa textos anteriores, você está dizendo ao Jascript que, Ei, eu estou querendo fazer uso de modelos literais e essa string pode ter expressões nela Certo? Agora, esta é uma expressão em que o valor está sendo substituído aqui. Tudo bem? Portanto, essa é uma string de linha única. Agora, também haverá cenários em que você deseja criar uma string com várias linhas Ok. Então, deixe-me dar outro exemplo. Ok. Vou adicionar um comentário aqui. Vamos dar uma olhada na multilinha. Seqüencie aqui. Está bem? Então, eu vou ter várias linhas e tudo bem, 1 segundo Vou ter uma sequência de várias linhas, assim. Ok. E posso dizer que isso é uma string de várias linhas. Ok. Agora, no momento em que você fizer isso, você receberá erros. Isso não está certo. Está bem? Porque você não pode criar uma string como essa no script Ja. Mesmo se você adicionar códigos únicos, isso não funcionará. Agora, como você cria uma sequência de caracteres de várias linhas, certo ? No script Ja. Assim, você pode usar modelos literais, como eu disse, e usar acentos cravos. Então, isso não vai dar nenhum tipo de erro, certo? E você pode simplesmente dizer Console dot log e imprimir em uma string de várias linhas Então você pode ver que isso é uma string de várias linhas, certo? Agora, ok, agora eu posso até mesmo pegar cada palavra em uma nova linha que também é possível aqui Se eu salvar isso, você pode ver que é uma string de várias linhas, certo? Então, esse é o poder de, dos literais de modelo. E a sintaxe basicamente é que você terá acentos cravos aqui, ok, algo assim, e você terá uma string normal, e ela pode ter expressões Ok, então você pode dizer uma expressão como essa. Então esta é uma sintaxe, ok, e deixe-me digitar É a sintaxe aqui. Ok. Então é assim que podemos fazer uso dela. Agora, deixe-me mostrar vários casos de uso, certo. Então, agora estamos apenas substituindo variáveis, certo? Mas você pode até ter expressões, ok? Assim, você pode dizer expressões e fazer uso de expressões dentro dos literais do modelo Oito. Deixe-me ver. Digamos que eu tenha E igual a cinco aqui. Se B for igual a dez, por exemplo, vou dizer deixe o resultado aqui. Ok. Agora eu vou ter cravos. Eu vou dizer a soma de tudo bem, e eu vou dizer A, e eu vou dizer que B é. Agora, qual é a soma? Ok, temos que imprimir a soma, certo? Então eu vou dizer A mais P. Tudo bem. E então eu vou dizer Console dot log, e eu vou dizer resultado. Então você verá que a soma de cinco e dez é 15. Está bem? Então, agora estamos incorporando expressões no literal do modelo, ok Então, isso está funcionando perfeitamente bem, e você pode ver como as expressões também são avaliadas em tempo real e a string é construída. Tudo bem? Então, isso também é possível. Podemos até mesmo usar modelos literais com objetos de script Ja Digamos que se eu tiver um objeto de usuário aqui, que tenha o primeiro nome, eu terei John como primeiro nome. Ok. Vou ter apenas duas propriedades e um sobrenome. Ok. Desculpe, em vez de igual a, serão pares de valores-chave. Tudo bem, então John e eu diremos dois aqui. Agora, isso é um objeto JavaScript, certo? Então, o que eu posso fazer é dizer deixe as informações do usuário aqui. Deixe que as informações do usuário sejam informações do usuário e passarei para a próxima linha. Eu vou dizer que o nome é. Agora, qual é o nome? Vou dizer mais alto e vou dizer usuário Tt, primeiro nome. Ok. E eu vou dizer mais alto, pequeno usuário, sobrenome, algo assim E então eu posso dizer log de pontos do console. Você pode dizer informações do usuário. Algo parecido com isso. Tudo bem E você verá as informações do usuário, Colin, o nome é John Doe Agora, se você tiver mais informações do usuário, por exemplo, você pode dizer a idade aqui. Ok. Digamos que seja 33, por exemplo, certo? Você ainda pode adicionar mais uma linha aqui. Você pode dizer que a idade é maior e a idade do usuário, algo assim Você pode ver que a idade é 33. Ok. Então, sim, isso também pode funcionar com coisas como objetos. Tudo bem Agora, o problema é que, se você tivesse, como você trabalharia com strings que já têm B Está bem? Então, deixe-me criar uma string. Então, digamos que você tenha uma string E, que diz, tipo, isso é um craque. Ok. Ok, eu gosto que esteja apenas imprimindo uma mensagem, e diz, isso é um craque, ok? Agora você verá que essa marca está sendo impressa aqui. Ok. Mas agora, assim que eu converter isso em uma string literal ou, desculpe, modelo literal, você verá que há um problema Está bem? Então, está pensando que essa é a chave de encerramento. Como você trabalharia com esse tipo de string? Então, nesse caso, você precisa escapar do significado disso. Então, para escapar, você pode adicionar uma barra invertida aqui. Está bem? E depois de salvar isso, você verá que é um craque. Certo? Portanto, essa barra invertida não é considerada, mas anula o significado da E essa coisa aqui é conhecida como fuga. Está bem? Então, na verdade, você está escapando do backtick aqui, o que significa que você está realmente escapando do significado de Bac tick e fazendo com que ele faça parte da string. Tudo bem? Portanto, essa marca traseira é considerada e não essa ao fechar a lateral do modelo aqui. Tudo bem Então, sim, isso é sobre literais de modelo Se você estiver trabalhando com JavaScript, verá muitos modelos literais no código Se você estiver lendo ou criando seus próprios projetos, você usará muito esse conceito. Tudo bem, se você está trabalhando com strings em JavaScript, certo? Então, sim, esse é um modelo literal para você. 28. Fazendo mais com o console.log: Oi, aí. Então, agora é hora de começarmos a falar sobre o log de pontos do console. Tudo bem. Agora, usamos ou se você viu algum tipo de código JavaScript, você já deve ter visto ou deve estar ciente do que é o log de pontos do console. Tudo bem, então é usado para imprimir coisas no console. Então, se eu disser olá mundo, e se eu salvar isso, eu vou ver Hello world aqui como saída. Então, o que quer que eu forneça aqui entre esses dois códigos ou um único código, eu também posso usar um único código. Vou ver essa coisa como uma saída aqui, ok? E eu também posso, então se eu disser log de pontos do console, um, dois, três, e se eu salvar esse RC 123 sendo impresso. Está bem? Portanto, essa é a forma básica de registro que você está fazendo e log é um dos métodos ou funções que você pode ver disponíveis nesse objeto de console. Então, o console é um objeto, na verdade, ok? E você está usando o log para obter valores e imprimi-los no console. Tudo bem. Agora, o que estamos vendo aqui é um registro básico, certo? É claro que você pode registrar vários valores. Então, como você registraria vários valores? Ok, então vamos pegar vários valores. Então você pode dizer log de pontos do console aqui. OK. E eu posso imprimir o nome. OK. E eu posso dizer aqui, eu posso adicionar Alice, e então eu posso ter cada uma, algo assim e eu posso dizer 25 OK. Agora, isso também pode ser substituído por variáveis Ok, você pode ver o nome Ale de 25 anos. OK. E estou separando tudo com a ajuda da vírgula Eu posso até mesmo fazer uso do plus aqui. Então, se eu copiar isso, ok, você pode adicionar um sinal positivo. Então, em vez disso, você pode dizer mais. Ok, ele vai dar uma saída semelhante. Você pode ver. Então, sim, essa é uma forma de imprimir vários valores. E, claro, esses valores também podem ser substituídos com a ajuda de variáveis, certo? Então você pode fazer uso de variáveis, como eu disse, OK, então você pode dizer que X é igual a dez aqui e deixe Y ser igual a 20. OK. E se eu tiver que imprimir, posso dizer que o log de pontos do console aqui, valor D de X é, e eu posso adicionar X. Ok. Você pode ver que é variável chegando aqui. Tudo bem. Você pode até ter expressões. Então você pode dizer que a soma é OK, X mais Y. Você verá 30. Você pode ver. É assim que coisas diferentes funcionam. Você também pode usar os modelos literais aqui. Ok, então eu posso literalmente vir aqui. Em vez de usar códigos duplos, posso tornar isso muito mais legível aqui, e posso dizer mais alto, algo assim, e posso ter isso. Você pode ver. A soma é 30. Ok, então você está usando literais de modelo e está obtendo os valores. Tudo bem. Agora, se você tiver um objeto criado, também poderá registrá-lo. Deixe-me mostrar isso para você. Está bem? Então, registrar objetos, certo? Agora, deixe-me criar um objeto chamado pessoa aqui. Está bem? E eu vou dizer nome. Eu vou dizer Charlie. OK. E eu direi que a idade é , digamos, 28, e posso dizer que a profissão está desenvolvida. OK. OK. Então, uma pessoa chamada Charlie tem 28 anos e a profissão é desenvolvedor. OK. Agora posso simplesmente dizer log de pontos do console. Ok, eu posso dizer nome, desculpe, nome do ponto da pessoa. E isso será impresso no nome, certo? Você pode ver Charlie. Agora eu posso simplesmente me livrar do nome aqui e simplesmente imprimir o objeto da pessoa inteira. Isso também é possível com o Console Log, certo? Você pode até ter o estilo C ou até mesmo ter uma saída formatada Está bem? Então, esse tipo de saída formatada, você deve ter visto se está familiarizado com a programação C, ok? Então, se eu disser log de pontos do console, ok, deixe-me ver isso. OK. Então, se eu disser valor do valor de X aqui. X é porcentagem D. Ok? E se eu salvar isso, você verá que o valor do valor é que a declaração está incorretamente enquadrada, então o valor deve ser a porcentagem D, ou você pode ter o valor de X aqui, porcentagem D. Você está usando a porcentagem D, que está atuando como um espaço reservado para substituir os Certo? Agora, se você estiver usando esse espaço reservado, apenas um espaço reservado E se você adicionar vários valores de substituição aqui, ok? E se você executar isso, verá que está apenas sendo anexado no final, ok? E, sim, é assim que funciona. Agora, você também pode ter vários espaços reservados aqui Ok, então você pode dizer log de pontos do console. E eu posso dizer olá, porcentagem S. Agora, porcentagem S é para string. A porcentagem D é para valores decimais. Porcentagem D porque H é porcentagem D e eu direi anos. Você pode ver a porcentagem Hello S, porcentagem D de anos. Agora eu posso ter Ale aqui, e eu posso ter 22 aqui. Se eu salvar isso, você verá Olá Alice, você tem 22 anos Tudo bem? Então é assim que o log do console pode ser usado de várias maneiras. Isso é log é um método ou uma função, eu te disse, certo? É um método disponível com o Console Object. Agora, existem vários outros métodos, ok? Então, métodos de console. Está bem? Agora, existem vários outros métodos. O que eles são? Portanto, temos o Console Log, que vimos. Você tem um erro de ponto do console aqui, você pode ver que o erro também é um método, e eu posso ver que isso é um erro. Você pode passar qualquer tipo de mensagem de erro e verá que isso é um erro. Você pode ver como está chegando, certo? Posso copiar isso e, em vez de errar, posso ter um aviso aqui. Isso é um aviso. E se eu salvar isso, você verá que isso é um aviso, certo? E se eu duplicar isso, você também pode ter uma mensagem informativa aqui, para que eu possa dizer Então, isso é informação. Isso é informativo. E se eu salvar isso, você verá que isso é informativo, certo? Portanto, o aviso está sendo exibido dessa forma. As mensagens informativas estão sendo exibidas dessa forma e os erros estão sendo exibidos dessa forma, certo? Então, sim, essas são várias maneiras pelas quais você pode usar os métodos do console. Agora, você também pode usar a tabela Console. Está bem? Então, essa é outra coisa incrível. Tudo bem. Agora, digamos que eu tenha esse objeto chamado pessoa, ok? E se eu disser, ok, deixe-me dizer log de pontos do console. Se eu usar o Console Log e disser pessoa, você verá que a tela não é muito boa. Ele está exibindo no formato JCN, pares de valores-chave, que são expansíveis Eu quero ter isso como uma saída na forma de tabela. Eu posso ver o console, a mesa aqui e eu posso passar pessoalmente por aqui e eu posso ter um ponto e vírgula Se eu salvar isso, você verá que índice é nome, valor é Charlie. Índice H, valor é 28, índice é profissão, valor é desenvolvedor. Você também pode classificá-lo. OK. Então, um pouco de funcionalidade também aqui, e este é o objeto, caso você queira vê-lo na forma Json ou na forma de objeto Certo? Então, essa é a funcionalidade da tabela que ajuda você a imprimir coisas complexas, como estrutura de dados objeto ou variável do objeto, no console. Tudo bem. E você pode ver que é assim que parece. Tudo bem. Então, de fato, o console é muito valioso. Você pode usar o log. Você o usará com muita frequência. Você pode usá-lo para imprimir objetos, modelar literais, substituir valores, criar cadeias em tempo real para exibir como saída Você pode usar o formato de saída formatado se estiver vindo de um plano de fundo de programação como C, C plus, certo? Você também pode. Essa saída formatada também é uma coisa em Java Está bem? Você também pode obter esse tipo de saída formatada em Java, certo? E então você pode ter diferentes métodos de console para imprimir mensagens de erro, mensagens aviso e mensagens informativas. E no final, você tem uma tabela, para ter coisas como objetos sendo exibidos no formato de tabela, certo? Então, espero que isso seja útil e espero que você tenha gostado de explorar o Console Object. 29. Conclusão do curso: E isso nos leva ao fim dessa incrível jornada no mundo do JavaScript. Ao longo deste curso, você construiu uma base sólida em JavaScript enquanto aprendia sobre os fundamentos do JavaScript, como matrizes, operadores, objetos e diferentes tipos de dados Você também entendeu como o JavaScript funciona em ambientes do mundo real. Também falamos sobre algumas das aplicações práticas e alguns projetos que fizemos dentro da aula. Espero que este curso tenha ajudado você a pensar sobre o Jascript de uma perspectiva completamente diferente Mas lembre-se de que aprender Jascript não deve e não termina aqui A melhor maneira de crescer como programador é continuar praticando, construindo coisas e até mesmo experimentando Porque, ao criar projetos, você aplicaria todos os conceitos que aprendeu e também o ajudaria a ter um pouco de confiança antes de passar para projetos da vida real. Agora, eu gostaria de solicitar que você continue praticando, explorando e experimentando Com este curso específico, você encontrará um projeto de classe na seção de projetos, que eu o encorajaria a concluir e compartilhá-lo com toda a turma. Obrigado por se juntar a mim nessa jornada. Espero que este curso tenha ajudado você a ganhar confiança no JavaScript e inspirado você a continuar aprendendo Boa programação e tudo de bom.