Aprenda Javascript em 1 video ( projeto prático)

Será que você consegue aprender toda a base do JavaScript todo o fundamento do JavaScript e ainda criar um projeto em um vídeo só assim você não sabe nada de JavaScript você vai começar do zero vou te ensinar desde os primeiros passos do JavaScript eu vou ensinar o que que é o JavaScript e também vou ensinar toda a base da língua da da programação e a gente vai criar um projeto juntos você vai sair desse vídeo com um projeto Juntinho comigo então Tá fim do desafio tá Aceito o desafio então bom vamos lá então deixa eu

ir pra minha tela aqui para eu explicar um pouquinho pra gente começar já meter a mão na massa agora mesmo vamos lá ó tô com a minha tela aqui e olha só basicamente agora aqui na descrição do vídeo você vai ah ter um arquiv Minho para você baixar um arquivo zip que basicamente ele vai ter uma estrutura de um projeto já com HTML CSS montado porque aí a gente consegue focar No JavaScript né então Ó o projetinho É esse aqui basicamente é um conversor de Dólar para real e de real para dólar Então o que

é legal desse projeto é o seguinte se você digitar aqui 1000 por exemplo E aí ele não tá funcionando tá ele não tem JavaScript ele não tem nada vou te explicar inclusive o que que é o JavaScript o que que ele faz já já Então esse é o projetinho que a gente vai criar quando você digitar o valor em dólar ele automaticamente vai aparecer Em baixo o valor em reais e mesma coisa o inverso quando você digitar o valor em reais automaticamente ele vai mostrar para você quanto é que é isso em dólares tudo bem

bem legalzinho esse projeto vai usar vários recursos do JavaScript que a gente vai aprender nessa aula ainda tá então vamos lá antes da gente começar a nossa aula de JavaScript de fato como eu falei aqui embaixo tem o arquivo HTML CSS do nosso projeto então se você tá querendo aprender JavaScript Isso quer Dizer que você pelo menos menos tem uma noção ou deveria ter né uma noção de html CSS Tá mesmo que você tenha uma noção básica de html CSS eu vou as coisas que precisarem de explicação para HTML CSS eu vou mostrar para você

aqui tudo bem então eu tô usando um editor de código chamado VS code não vou te ensinar como instala ele nada dessas coisas mas ah pelo menos não nesse vídeo né mas você consegue achar facilmente na internet tá então qual é o objetivo Principal desse vídeo é te passar toda a base da linguagem todo o fundamento da linguagem por com esse fundamento você consegue decidir duas coisas basicamente a primeira coisa você vai consegue decidir se você gosta da linguagem se você quer se aprofundar mais nela por quê assim o nível de aprofundamento que você consegue

ir em uma linguagem ele basicamente é infinito tá então cada conceito que eu te ensinar nessa essa aula aqui agora a gente vai começar do Básico Você nunca viu JavaScript Não se preocupa então cada conceito que a gente te ensinar aqui você consegue aprofundar nele em Milhões de níveis Tudo bem então esse vídeo basicamente vai servir para você aprender o que interessa do JavaScript para você começar você vai conseguir decidir se você gosta ou não da linguagem por exemplo você vai decidir caminhos a tomar a partir de agora tá e um detalhe importante também eh

todo esse conteúdo que eu vou passar Aqui obviamente ele vai ser de forma resumida mas eu vou tentar ser o mais didático possível para você que não sabe nada conseguir entender o que eu tô falando e conseguir ah compreender o o o o CNE da questão e botar em prática principalmente Então essa essa aula esse vídeo ele vai ser muito prático tudo bem Tanto que no final a gente vai sair com um projeto prontinho pra gente né então seguinte no nosso curso completo A gente te ensina a gente tem lá um curso de JavaScript que

nesse curso em vez de um vídeo por exemplo são centenas de vídeos que vai te ensinar cada conceito não só os que eu vou te ensinar aqui mas vários outros de forma muito mais aprofundada porque eu tenho uma aula para cada um então eu tenho uma aula que eu vou te explicar bonitinho vou aprofundar mais vou te explicar vários porquês que por exemplo nessa aula nesse vídeo aqui eu não vou te explicar vou te explicar o suficiente Claro claro para você Entender tudo bem então beleza chega de explicações Vamos agora pro que interessa mesmo tá

então ó quando eu abro aqui o meu arquivo HTML primeira coisa que a gente se pergunta é o seguinte o que é que é o JavaScript para que que serve esse negócio onde que eu ponho os meus códigos JavaScript como é que ele funciona então vamos fazer uma um recapitula entre aspas história do JavaScript então o JavaScript ele quando Foi criado ele foi popularizado por assim dizer como sendo um uma linguagem que você consegue fazer interação dentro do navegador certo então por exemplo eu tenho aqui o meu projetinho eu quero que quando eu clique em

determinado lugar faça alguma coisa eu quero que quando eu digite o valor em dólar ele converta e Apareça o valor em reais no campinho em baixo tudo isso são interações que eu vou fazendo com a minha Ah no meu projeto né com o meu site com a minha Tela isso acontece dentro do navegador dentro do ambiente do navegador certo então o JavaScript Originalmente foi popularizado como sendo uma linguagem de programação que você roda no navegador mas hoje em dia ele já evoluiu para algo bem maior então a gente consegue por exemplo criar servidores com o

JavaScript a gente consegue criar aplicativos com o JavaScript também então tudo isso são são coisas que você consegue usando o JavaScript não só ele Tá você vai usar o JavaScript a linguagem JavaScript em conjunto com diversas bibliotecas para por exemplo criar um aplicativo para celular para criar um servidor completo então existem sistemas altamente complexos altamente gigantes Com milhões de acessos feitos em JavaScript legal então o JavaScript não é uma linguagem para você brincar é uma linguagem altamente profissional na verdade é uma das linguagens mais requisitadas em vagas para programadores Legal então voltando para cá entendido

o que aqui é o JavaScript agora a gente vai aprender o fundamento dele que vai se aplicar se você quiser aprender a criar aplicativos servidores a rodar navegador por exemplo não importa essa base esse fundamento ele é o mesmo tudo bem então vamos lá onde que eu ponho aqui por exemplo no meu código JavaScript o meu ou no meu código HTML onde que eu ponho o JavaScript ou seja como é que eu Carrego meu código aqui na minha na minha página Vamos lá primeira coisa que a gente tem que fazer é criar um arquivo para

eu colocar meu código JavaScript nele então eu vou vir aqui na pasta assets desse projeto e vou criar um arquivo novo dentro dessa pasta eu vou chamar ele de script.js posso chamar do que eu quiser tá e o ponto JS é extensão que significa JavaScript então criei o meu arquivo tá aqui ele sem absolutamente nada seguinte Onde que eu ponho onde é que eu carrego esse arquivo JavaScript eu vou vir aqui no finalzinho do b e vou criar um carinha chamado ó uma tag chamada script src aqui eu ponho Onde tá o meu arquivo Então

tá na pasta assets dentro dela eu ten um arquivo chamado script.js eu abro a tag script e eu fecho a tag script então por exemplo ao contrário de quando eu carrego um arquivo CSS então por exemplo aqui eu tô carregando um arquivo CSS na minha página eu simplesmente uso A tag link eu abro e fecho ela nela mesma e defino onde é que tá o meu arquivo CSS e já era aqui embaixo não eu abro a tag script e eu fecho ela mesmo que eu não ponha nada aqui dentro eu preciso fazer dessa forma Tudo

bem salvei se eu vim aqui e dar um control F5 ou atualizar a tela enfim não importa pronto meu arquivo JavaScript já tá sendo carregado dentro dessa página só que Claro ele não tá fazendo nada né então minha página não vai fazer nada Tudo bem agora pode ser pode estar se perguntando eu já vou responder assumindo porque vários alunos têm esse tipo de dúvida e ela é uma dúvida básica e importante de ser esclarecida nesse vídeo tá Por que que eu coloquei o arquivo JavaScript sendo carregado no finalzinho da tag b e não por exemplo

junto aqui da tag ah link que carrega o meu CSS por um simples motivo tá E aí a gente já vai tratar sobre boas práticas antes Inclusive a gente aprender a Programar vamos já aprender como programar de forma correta Tá bom então olha só quando eu carrego uma página o que eu colocar dentro da tag head E aí se você sabe HTML CSS ã muita gente inclusive sabe HTML CSS e não sabia desse desse conceito que eu vou falar agora tá quando você carrega uma página tudo que tá dentro do Head é a primeira coisa

que vai ser carregada antes inclusive da página aparecer na tela tá bom então quando eu ponho por exemplo Para carregar o meu arquivo CSS aqui ele vai carregar o navegador vai carregar o arquivo do CSS Antes de mostrar a tela depois que carregar aí ele mostra a tela tudo bem Por que que a gente coloca o CSS aqui dentro por Se eu colocar ele dentro do bo por exemplo isso vai fazer o seguinte vai fazer com que a minha tela apareça só que o CSS não foi carregado ainda então vai aparecer a tela horrível de

feia Claro dependendo do arquivo enfim isso pode durar Milisegundos então usuário às vezes só vem um um pisca né Mas isso acontece se for arquivos maiores estruturas maiores páginas maiores Pode ser que o que o usuário veja de fato a tela carregando horrível toda feia quebrada e depois que o CSS carrega aí ela magicamente fica bonitinha que não é legal tá então a gente carrega o arquivo CSS ele já fica carregado bonitinho lá quando eu mostro a tela ela já mostra a tela bonitinha então quando eu atualizo aqui ó já Mostra a minha tela bonitinha

não mostra tudo quebrado depois fica tudo lindo tudo bem no caso de arquivo JavaScript eu posso colocar aqui dentro do Head posso mas isso vai apenas entre aspas fazer com que o meu site carregue mais lento porque quando eu ponho aqui arquivo JavaScript basicamente eu tô fazendo interações com o que já tá na tela concorda Então se já tá na tela quer dizer que já carregou então se eu coloco o arquivo JavaScript Lá no Head ele vai carregar o arquivo JavaScript para depois Mostrar a tela sem necessidade ele poderia já ter mostrado a tela para

usuário e ele não precisaria ficar esperando o arquivo JavaScript carregar claro eu falo esperando dá entender que o cara passou 2 minutos lá esperando né isso acontece em milissegundos mas quando um sistema ele vai crescendo ele vai tendo mais arquivos ele vai tendo mais código ele vai tendo mais estrutura ele tende a Ficar mais pesado então esses milissegundos eles podem ir se acumulando e transformarem em um tempo maior que o usuário vai ser prejudicado em termos de da experiência de carregamento para ele então quando eu coloco aqui embaixo o que que o que eu tô

falando ó carrega tudo mostra tudo da no finalzinho aí você carrega o arquivo JavaScript por quê esse carrega tudo e mostra tudo o usuário já vai est vendo o site E aí em alguns milissegundos depois O arquivo JavaScript é carregado E aí pronto o site tá pronto pro usuário mexer não é que o usuário vai carregar e ele vai clicar no negócio e não vai fazer ação nenhuma porque não não dá tempo né nem dele fazer uma ação e já carregou já mostrou a tela Já carregou já tá tudo lindo maravilhoso então resumindo o seu

site fica mais rápido quando você põe o arquivo JavaScript para carregar no final porque ele não é um item que ele precisa tá carregado pra Sua página aparecer Deu para entender a lógica do negócio né Beleza carregou aqui agora beleza vamos aqui para nosso arquivo JavaScript e vamos focar na linguagem de fato Tudo bem então vamos lá antes da gente falar da linguagem eu preciso falar da linguagem também tá mas em como a gente testa o que a gente vai aprender agora Então olha só se eu clicar aqui com o botão direito e aí Independente

se você tá no Chrome se você tem Firefox OS navegadores Principais todos eles têm esse recurso que é um carinha ó chamado inspecionar quando eu clico nesse cara ele vai abrir um negocinho aqui que a gente chama de no caso aqui como é o Chrome vai ser um Chrome Dev Tools Mas ele tem para todos os navegadores e é quase igual para todos eles tá E ele tem ó várias abinhas aqui a gente vai se concentrar numa abinha chamada console console basicamente ele tem aqui uma linha de comando entre aspas que nessa linha de Comando

eu consigo rodar código JavaScript e eu consigo ver ah código JavaScript sendo rodado e qual foi o retorno desse código JavaScript ou seja qual a resposta depois que rodou o código tá então aqui é bom pra gente testar mas claro vamos criar o nosso código aqui dentro do meu site eu venho para cá eu rodo ele e aí no máximo eu vejo aqui o resultado desse desse código rodado Tudo bem então pode deixar esse carinha aberto a gente vai usar ele a Gente vai brincar com ele mas não precisa rodar código aqui diretamente tudo bem

apesar de você pode rodar então vamos lá seguinte Vamos começar agora a aprender JavaScript e programação do começo eu vou te explicar tudo o passo a passo Então vamos começar do básico do básico do básico que são as variáveis seguinte na sua aula de matemática lá no ensino médio ou na verdade no fundamental na escola como um todo você com certeza viu lá o professor fazendo ó X = 10 Aí depois ele faz 10 + x = 20 aí você descobre né o valor enfim e tudo mais isso é o quê uma variável certo então

lá na matemática você põe uma letrinha no caso um x um Y enfim e você atribui um valor para essa variável certo na conha você substitui aquela letrinha pelo valor que tá armazenado dentro dela concorda então na programação esse processo ele é muito similar e variáveis você vai usar a partir de agora para todo o sempre na Sua jornada enquanto programador Tudo bem então ó no JavaScript a gente trabalha com variáveis do mesmo jeito e aí o que que como é que funciona o processo a gente vai definir uma variável x a gente vai criar

uma variável e a gente usa ela em qualquer lugar do meu sistema Tudo bem então por exemplo eu quero aqui a variável chamada idade e eu vou armazenar por exemplo a idade 90 então no JavaScript eu consigo criar uma variável como eu ponho aqui Let dou um espacinho ponho o nome me dá variável um igual esse igual quer dizer que eu vou atribuir um valor para essa variável E aí eu ponho por exemplo 90 Ah o que que é esse let esse let é pra gente definir uma variável existem três nomezinho principais que são usados

aqui o let você pode usar também var ou você pode usar const tanto faz tá na verdade não tanto faz cada um tem uma uma um propósito para ser usado mas não interessa por enquanto para você Iniciante que tá come agora então usa let confia no pai e vamos dar prosseguimento depois eu claro eu vou explicando alguns conceitos mais avançados para você tá então let idade igual a 90 então Acabei de armazenar agora a idade 90 então em qualquer lugar que eu quiser Ah quer não sei o que idade ele vai o JavaScript vai pegar

o 90 Tudo bem então o seguinte ó já vamos aprender um recurso legal antes da gente continuar nas variáveis quando eu digito O nome console pon log E aí eu abro e fecho esse carinha aqui eu consigo aqui dentro ã colocar qualquer valor que eu queira e esse valor ele vai aparecer lá na minha console lá no navegador então por exemplo ó se eu ponho um 100 aqui salvei meu código JavaScript vou vim para cá quando eu atualizo minha tela olha o que apareceu aqui embaixo 100 legal então ah coloquei esse 100 aqui embaixo eu

dei um console pon log novamente e coloquei 200 salvei Atualizei ó lá 100 depois 200 ele executa o código na sequência né então ele executou esse mostrou 100 lá executou esse mostrou 200 lá agora o que que eu faço ó console. log eu quero mostrar quem idade Ou seja eu quero mostrar a variável idade que que vai acontecer atualizei Olha o 90 aparecendo aqui show de bola né então já estamos aprendendo aqui a usar uma variável legal beleza então tirando isso daqui vamos agora Voltar para o assunto variáveis então eu crio uma variável e eu

atribuo um valor para ela esse valor existem vários tipos de dados que eu posso atribuir para ele então por exemplo aqui eu coloquei o número 90 Mas eu posso ter também uma variável que eu armazeno uma palavra que eu armazeno um texto que eu armazeno um sinal se é verdadeiro ou falso enfim Existem várias coisas vários tipos de dados que eu consigo armazenar em uma Variável então por exemplo aqui é a idade se eu criar uma outra variável chamada nome eu quero armazenar aqui meu nome por exemplo bonc como é que eu faço um valor

numérico eu simplesmente ponho o número como eu coloquei aqui quando eu vou armazenar um texto que é esse texto Quando eu digo texto pode ser uma letra pode ser uma palavra pode ser uma frase pode ser uma Bíblia completa é texto tudo bem E na programação a gente chama esse cara de string tá então toda string Ela fica entre aspas então por exemplo bonc o próprio navegador o próprio navegador não o editor de código né ele vai dando umas corzinha coisas para facilitar a gente entender então sempre que eu ver por exemplo algo entre e

Aspas eu vou saber que aquilo ali é uma string ou seja aquilo ali é um texto quer seja apenas a letra q quer seja um nome quer seja uma frase ou como eu falei uma Bíblia completa aqui um texto gigantescos não importa tudo isso é uma String tudo bem agora que vem um detalhezinho olha só se eu ponho isso daqui eu ponho um 90 entre aspas isso daqui é um número ou isso daqui é uma string isso aqui é um string então como eu falei tudo que tá entre aspas é um string então não importa

ah 90 aqui esse é um 90 um número 90 não isso aqui é um string com um 9ve e um zero mais pra frente a gente vai fazer cálculos matemáticos então por exemplo olha só console. log para você ver lá no Navegador tá Vou botar aqui um 10 + 5 vamos ver aqui como é que funciona atualizei Olha lá aparece um 15 no resultado muito bom agora se eu coloco por exemplo um 10 mais idade idade é uma variável então eu posso usar né então Ó lá aparece 100 como é que deu 100 porque 10

mais idade tem quanto tem o número 90 armazenado dentro dele Certo Então vai ser 10 + 90 que vai dar 100 perfeito agora se eu ponho 10 mais nome o que que será que Acontece não tem 90 aqui dentro também olha só vai aparecer 1090 1090 ele pegou o número 10 e ele não mais somou isso aqui não é mais uma operação matemática então quando eu tenho uma string aqui no meio não é mais uma Opera matemática é um negócio que a gente chama de concatenação concatenar é eu juntar dois itens basicamente então aqui eu

não tenho 1090 eu tenho o 10 concatenado ou seja junto com a string 90 com um 9 e um zer por exemplo tá então eu tenho aqui ó 1 0 90 eu não tenho 1090 Deu para entender né a diferença do raciocínio então se eu ponho aqui bonique por exemplo o que que vai aparecer 10 bonque ele pegou o número 10 e ele juntou com a palavra bonque pronto acabou e apareceu 10 bonque já era ele não somou entendeu então quando eu tenho um número de fato aí ele soma beleza ele é um número ele

é considerado pelo JavaScript como um Número quando eu tenho uma string ele é considerado como um texto independente de eu ter por exemplo um 90 aqui ele é um texto com um e um zero somente não é o número 90 Então acho que deu para entender né o raciocínio Beleza então vamos botar aqui bonque eu tenho também um outro tipo são assim são três os principais tipos utilizados e a gente vai ver alguns detalhezinhos depois disso tá o terceiro tipo mais utilizado É um tipo chamado Boolean boolean basicamente a gente vai armazenar se algo é

verdadeiro ou falso se algo tá ligado ou desligado se algo é positivo ou negativo não no sentido de mais e menos mas sim no sentido de assim tipo energia né ligado desligado positivo e e negativo Deu para entender né então ó vamos botar aqui por exemplo uma variável que ela vai armazenar se o usuário tá logado ou não Por Exemplo né então vamos botar aqui o nome logado E aí ela vai armazenar se o cara tá logado Ou não então eu vou colocar aqui por exemplo o nome true perceba eu não coloquei entre parênteses eu

coloquei o nome true só sem parênteses então o true significa traduzindo né significa verdadeiro o contrário disso é falso né então se eu colocar aqui false basicamente é um buan de falso ou seja o usuário tá logado false não então se eu verificar essa vari aqui ah eu quero mostrar determinada coisa no meu site se o usuário tiver logado Então se logado é Igual a true por exemplo exibe determinada coisa caso contrário não exibe nada entendeu então buan basicamente é um sinal de True ou false só tem esses dois valores né ou é um ou

é zero ou é ligado ou é desligado ou é verdadeiro ou é falso basicamente isso tá Então essas são as três principais os três principais tipos de variáveis que eu ã armazeno aqui no meu código tá existem Claro várias outras coisas que a gente vai aprender mais dois iten zinhos Relacionados a variáveis que são importantes da gente saber tá um terceiro item agora pra gente conseguir brincar um pouco mais e até entender um pouco mais também é o conceito de comentários então sempre no meu código JavaScript quer seja em uma linha ou depois de um

código por exemplo na mesma linha eu colocar duas Barrinhas viradas paraa direita seguidas eu tô criando aqui um comentário então basicamente agora esse código a partir daqui nessa Linha né essa linha toda ela vai ser ignorada pelo JavaScript e ela serve para que então ela serve apenas para eu ser humano dizer para outro programador ou para mim mesmo quando eu for olhar meu código para que que serve aquele código lá que eu tô fazendo então por exemplo ó posso vir aqui no na primeira linha e eu coloco aqui tipos de variáveis e aí aqui embaixo

eu coloco os tipos de variáveis então fica mais fácil de um usuário de um programador Conseguir entender o que é que tá acontecendo ali perto né daquele código então eu posso colocar em uma linha específica ou eu posso colocar no final de um código então quero explicar aqui tipo Number que é um número né aqui tipo string e aqui tipo boolean legal então apenas para comentar Exatamente isso comentário é para eu comentar e eu saber se o negócio e orientar né um programador Ou até eu mesmo daqui a três meses eu vou olhar esse código

não Entendo nada pelo menos os comentários eu vou estar entendendo eles vão estar me explicando alguma coisa tudo bem então beleza não coloca comentário no meio do código por quê ó vamos porque que eu tá aqui tô sem nada eu quero colocar um comentário aqui que que eu faço barra barra tudo que vim depois dessa barra barra vai ser ignorado então vai ficar o negócio errado aqui certo então se quer colocar um comentário numa linha que já tem código põe no final Dela então vai no final dela põe um barra barra tipo bullan tudo certo

ou então põe em uma linha específica para ela que aí onde a partir do Barra Barra pra direita tudo vai ser ignorado tudo bem Então nesse caso aqui o editor de código ele pinta de verde então tudo que tiver de verde vai ser ignorado pelo JavaScript tudo bem Beleza agora que a gente viu onde coloca os arquivos vimos as variáveis e os tipos principais vamos Ver agora dois carinhas ó um carinha cham arrei e outro carinha chamado objeto tá ou objetos no plural Então vamos lá ó Isso são também tipos de variáveis só que são

um tipo de variável um pouquinho diferente então por exemplo ó eu quero criar aqui uma variável chamada ingredientes quero fazer um bolo e aí eu vou salvar a lista de ingredientes Ou seja eu posso salvar o ingrediente um posso botar aqui ingrediente um E aí eu Ponho aqui sei lá ah água depois eu ponho ingrediente dois e eu ponho alguma outra coisa então sei lá massa ingrediente de ingrediente três e eu ponho aqui um corante Zinho bacana pro meu bolo Beleza então os alunos costumam tirar sarro com a minha cara porque eu dou esses exemplos

assim mas por exemplo do bolo eu não sei fazer um bolo então eu invento o os ingredientes eu sempre Ponho corante eu coloquei em um uma aula só que meio que assim inventando na hora né E aí pegou essa essa piada com os alunos e aí todo mundo agora sabe que quando eu vou fazer um bolo eu ponho corante naquele bolo tá então eu gosto de usar somente para para fazer a graça tá então eu posso criar desse jeito aqui mas eu não não não fica organizado né eu posso criar uma variável específica ingredientes no

plural por exemplo que nela eu vou armazenar todo os Ingredientes Como assim eu vou criar uma lista basicamente que traduzindo em termos técnicos seria um arrei tá como é que eu crio um arrei vamos lá eu ponho esses dois simbolozinho aqui e entre eles eu coloco os dados que eu quero separado por vírgula então que dados são esses pode ser um número pode ser um string pode ser um boolean enfim qualquer tipo de dado que eu quiser armazenar inclusive outro Array se eu quiser Tá mas não vamos complicar sua Cabeça por enquanto então vamos colocar

aqui a lista de ingredientes Então eu tenho farinha eu tenho água e eu tenho ã corante pronto tenho aqui três ingredientes para o meu bolo o bolo vai ficar perfeito aqui com esses ingredientes e sal também né Vamos botar um salzinho para ficar bem legal então show de bola perceba eu coloquei Strings toda string sempre em qualquer lugar do seu código tem que tá entre aspas tudo Bem eu coloquei uma vírgula dei um espacinho só para organizar não precisa desse espaço não tá eu dei só para organizar para ficar mais organizado bonitinho então dei uma

Botei uma vírgula próximo item vírgula próximo item vírgula próximo item ou seja literalmente eu tô criando aqui uma lista de itens tá eu poderia colocar aqui um 90 por exemplo no meio apado que não faz muito sentido né mas eu posso colocar um número Sem problema nenhum eu Poderia colocar aqui um false também no meio não faz sentido mas eu posso colocar também tá é uma lista então eu posso colocar uma lista de dados quaisquer que sejam esses dados Tudo bem então tá aqui ó o meu Array Então beleza como é que a gente faz

então para exibir esse Array então por exemplo quando eu dou um console. Log em nome que eu atualizo aqui aparecer o nome bonc Beleza quando eu dou um console P Log em ingredientes quem que Vai aparecer se eu tenho vários itens vamos ver atualiz ó lá eu tenho quatro itens el mostra que eu tenho quatro itens e mostra quais são esses caras tá beleza mas eu quero um item só como é que eu faço para pegar um item dessa lista eu ponho assim e eu ponho por exemplo zero ou um ou dois ou três a

posição do item que eu quero pegar e aí uma dicazinha básica Quando você vai contar um ser humano normal né quando ele vai contar alguma coisa ele fala 1 2 3 4 certo um programador não porque no arrei a contagem ela começa pelo zero então o primeiro item por exemplo a farinha aqui é o zero a água o segundo item na verdade é o um por qu porque começa do zero então o segundo item é o um então um programador Ele conta 0 1 2 3 uma pessoa normal 1 2 3 4 Beleza então apenas

uma dicazinha de programação ó se eu coloco um zero aqui que eu atualizo minha tela Ó lá ele aparece o nome farinha que é o primeiro item Ah eu Quero esse o sal Qual é o sal é o terceiro item então eu ponho que número aqui dois legal né ó sal dois Ah e se eu colocar um número que não existe Vamos colocar um nove aqui será que não vai quebrar vai explodir meu computador não um Um item inclusive uma uma dica interessante de programação Não tenha medo dos erros tá então tá aprendendo a programar

cara digita o que você quiser executa vê o que acontece não vai Explodir seu PC não vai acontecer nada não vai você não vai levar um muro do computador relaxa No máximo o PC vai dizer não funcionou só então colocamos por exemplo aqui ó um nove salvei vou atualizar minha tela ele aparece um nomezinho chamado undefined que traduzindo é Indefinido ou não definido Ou seja é um valor que não existe basicamente isso tá então ó ah e se eu colocar o nome de uma variável que não existe que eu não criei Então vou dar um

Tapa no teclado aqui ó pá tá para um teclado salvei atualizei ó lá não explodiu meu PC ele somente disse ó essa esse tapa no teclado cdu não está definido basicamente em outras palavras traduzindo essa variável não existe somente tá então perca o medo de ah errar na programação perca o medo de fazer digitar coisas erradas porque não tem problema no máxximo você vai ver uma mensagem de erro tudo bem Beleza então Criamos um arrei Agora vamos fazer um objeto o que que é um objeto um objeto basicamente Olha só eu tenho um cabo aqui

para dar um exemplo claríssimo para você eu tenho um cabo aqui esse cabo aqui ó não sei se você consegue ver no no no no monitor aí na câmera ó é um cabo que de um lado eu tenho um USB do outro lado eu tenho um usbc né aquele menorzinho então isso daqui esse cabo né como um todo ele é um objeto eu tenho aqui um descansa copo isso aqui é um Objeto eu tenho aqui sei lá esse bagulhinho aqui da lente da câmera isso daqui é um objeto eu tenho o meu celular isso daqui

é um objeto Então tudo todos esses itens são objetos e objetos eles T naturalmente características certo então esse porta Copa aqui sei lá e qual é a característica dele qual é o formato dele é redondo Qual é a cor dele é preto qual é enfim características né de um objeto Então o meu cabo o cabo aqui ah numa ponta ele é USB na outra ponta é Usbc a cor dele é preta a o tamanho dele é sei lá 40 cm alguma coisa do tipo Enfim então objetos T características na programação você vai fazer vários objetos

esses objetos eles vão ter características também na programação esse nomezinho características a gente chama de propriedades tá então por exemplo tô criando um jogo nesse jogo Eu tenho um personagem então eu vou criar aqui uma variável personagem que vai armazenar esse personagem para mim eu Crio um objeto então objeto eu crio assim ó eu ponho basicamente esse simbolozinho aqui eu posso criar um objeto definir minhas propriedades em uma linha só ou eu posso dar um enter colocar numa linha separada e entre a abertura e o fechamento desse objeto aqui eu coloco as características ou utizando

termo técnico né as propriedades desse objeto Como assim nome dois pontos e eu ponho aqui agora o nome desse personagem não um string Então venho aqui e ponho bonque por exemplo vou até botar outro personagem né pulando põe uma vírgula porque eu vou pra próxima característica certo então o arrei armazena apenas valores eu não sei o que que é aqueles valores então geralmente é utilizado para listas né aqui não aqui Eu Tenho Um item tipo uma caixinha e nessa caixinha eu tô armazenando propriedades dessa caixinha é uma lista também mas é uma Lista de propriedades

então é uma lista que eu sei o que é cada coisa que eu tô colocando tudo bem então nome por exemplo Fulano aí eu vou botar aqui o nível desse cara tá no nível 10 então coloquei um um número né número inteiro eu vou colocar aqui a força aqui eu venho uma dica de ouro força tem um cdil né mas nomes de propriedades de um objeto não se usa caracteres especiais então você não põe exclamação você não põe um cedilha você não põe assento você Não põe um espaço também tá regra de ouro sempre ponha

as suas propriedades minúsculo e sem caracteres especiais sem espaço sem nada tá bom então preferencialmente minúsculo tá então ao in vez de colocar força eu vou colocar forca tá então força 800 eu tenho agora sei lá magia 200 eu tenho a vida né numerozinho de vida né daquele personagem 1000 e eu tenho a mana dele sei lá 200 por exemplo então tenho aqui várias características desse ou várias Propriedades né Desse personagem então um personagem ele tem vários itens salvo a respeito desse personagem Beleza então trazendo para o mundo da programação de fato não não falando

simplesmente de por exemplo um jogo mas trazendo para o mundo da programação mesmo vamos supor que eu tô criando um sistema de stoque nesse sistema de stoque eu tenho lá vários produtos certo então cada produto ele vai ter um título ele vai ter o preço ele vai ter a quantidade em Estoque por exemplo né daquele produto Então tudo isso são o quê propriedades de um produto então eu tenho uma lista uma Array de produtos Ou seja eu tenho uma arrei dentro desse arreio eu vou ter o quê objetos em vez de um string por exemplo

farinha eu vou ter um objeto aqui dentro então esse objeto eu vou ter o título do produto quantidade do produto ah preço do produto etc tá E aí eu crio com base nisso eu crio o meu sistema de stoque tá claro a gente tá Começando a ver programação agora então não se preocupa se você Ah não consigo criar um sistema de stoque cara você tá estudando aqui a meia hora programação Relaxa daqui a pouco você consegue Tudo bem então criamos um objeto como é que eu faço agora para acessar as propriedades desse objeto como é

que eu exibo essas coisas por exemplo quero exibir o nome do personagem como é que eu faço ó vamos jogar lá no console console. log eu ponho personagem e no Arrei eu especifico por exemplo o número né na ordem né o número que eu quero pegar aqui Eu não tenho uma ordem especificamente né mas eu tenho o nome da propriedade então eu ponho o personagem eu ponho um ponto e eu ponho o nome da propriedade que eu quero inclusive o navegador o navegador não o editor de código né ele já dá um atalho Zinho para

mim ó ele já mostra as opções que eu tenho de propriedades para esse objeto personagem por exemplo tá então é Uma ajuda né Isso aqui é se chama autocomplete então ele tá autocompleta você então dando dicas né em outras palavras então eu quero ah mostrar o nome do personagem então personagem ponto nome agora vamos para cá atualizando Fulano legal ah Quero mostrar a magia dele beleza personagem pon magia atualizando 200 Maravilha beleza Ah como é que eu faço Então como é que eu faço para mostrar na tela eu quero Mostrar na tela e não no

console muita calma a gente vai chegar lá vamos aprender primeiro o o básico do básico depois a gente aprende a mostrar na tela a interagir com a tela Relaxa nesse vídeo ainda você vai aprender isso tá beleza então aprendemos aqui ah variáveis os tipos de variáveis arrei objeto tudo bem Beleza agora vamos aprender um carinha que ele é hum essencial pra gente usar na programação e a gente vai usar a todo a todo todo Todo todo momento que são as funções Beleza então o que que é uma função basicamente uma função é um bloco de

código que eu crio e ele fica lá quietinho sem fazer nada ele inclusive ele não vai nem rodar eu simplesmente Crio e deixo lá Prontinho tipo assim criei uma bomba criei a bomba P criei a bombinha E aí deixei ela lá no cantinho ela vai fazer alguma coisa Não ela só vai fazer alguma coisa quando usar ela ou Ou seja quando eu tocar fogo quando Eu Enfim fazer alguma coisa que aí ela vai ser utilizada tudo bem mesma coisa eu criei o celular por exemplo beleza ele tá lá quietinho enquanto eu não usar ele ele

não serve para nada ele tá só criado lá então funções na programação é a mesma coisa eu vou criar um bloquinho de código que faz o quê determinada coisa por exemplo mostrar algo na tela fazer uma soma por exemplo eu tenho o número a e o número B eu quero somar os dois eu posso criar Uma função inha que qual é a utilidade dela ela vai pegar o número a o b e vai somar e ela vai devolver um um resultado por exemplo Beleza então ela fica lá quietinha em qualquer lugar do código eu posso

usar essa função Para quê Para fazer uma soma por exemplo Beleza então ah vou criar uma função que ela vai por exemplo o que a gente vai fazer daqui a pouco né converter dólar para real então eu vou ter uma função um bloquinho de código que faz Essa conversão do valor em dólar para um valor em real então ela vai ficar quietinha lá quando eu usar ela aí ela faz a conversão eu faço o seguinte ó função é interessante esse função porque ela tem basicamente três etapas né Para eu criar uma função ela tem o

que a gente chama de input input é o quê são os dados que eu vou dar para ela eu vou pegar os dados iniciais e eu vou mandar para essa função Ok podem eu não posso mandar nada se eu quiser tá alguma Função que faz alguma coisa específica e eu não necessariamente preciso mandar um dado para ela mas a teoria basicamente é essa eu posso mandar dados para ela ela faz o quê processa esses dados e ela dá o que a gente chama de output ou seja ela dá entrega um resultado ela entrega um retorno

então criei uma função para fazer uma soma Qual é o input o número a e o número B O processo é o quê eu vou pegar o a mais o b certo e o output é o quê eu pego esse resultado e eu devolvo Ó tá aqui o resultado Esse é o output Esse é o retorno da minha função Tá bom agora vamos criar na prática na prática vamos fazer exatamente essa função de somar ó eu ponho o nome function para eu dizer pro JavaScript que eu tô criando uma função e eu dou um nome

para essa função Então vamos botar aqui em português por exemplo somar então o seguinte nesse vídeo aqui como ele tem o intuito de ser mais didático mais comprimido e mais Informativo eu tô usando as os nomes em português no nosso curso eu utilizo os nomes em inglês e eu explico para você cada coisa determinados nomes eu traduzo para você você não se preocupa tá então aqui ao invés de somar por exemplo no curso nas aulas de funções por exemplo eu ponho Sam que seria somar tá então função somar agora eu vou abrir aqui esses carinhas

e aqui eu basicamente vou colocar os valores que eu vou eu vou receber os inputs né basicamente da Minha função então função somar ela vai receber A e B uma virginha né para separar claro o que ela vai receber tudo bem Depois eu abro uma linha de processamento ó aqui não é tipo um objeto não vou criar um objeto aqui não esse carinha aqui basicamente é o que a gente chama Tecnicamente o nome disso é uma expressão mas esquece essa palavra por enquanto não se preocupa com isso tá Então aqui eu t coloco o nome

função coloco o nome da função que eu quero é o bloquinho de código né basicamente eu coloco o que é que eu posso receber de dados e aqui dentro eu vou fazer o processamento então eu crio uma caixinha chamada somar ela vai receber a e b e aqui dentro eu coloco o que é que eu quiser fazer com esse A e B e ao final Eu vou fazer o quê devolver alguma coisa essa coisa no caso nessa função somar vai ser o resultado né dessa soma então Ó aqui dentro Eu vou pegar criar uma variável

chamada resultado Ah vou criar uma variável dentro de uma função sim é um bloco de código nesse código você põe o que você quiser aqui dentro tá ele vai ficar lá quietinho esperando ser usado então ó resultado vai ser igual a a + b Beleza depois que eu fiz isso aqui eu tenho agora uma variável chamada resultado que ela tem o que armazenado valor de A mais B OK Agora eu preciso resultar mandar o resultado então return Que significa retorne né resultado então ponho aqui resultado ele vai retornar a variável resultado Ou melhor o que

tem dentro dessa variável resultado então criei minha função Zinha agora ela vai fazer o quê se eu rodar o meu código aqui ela não vai fazer absolutamente nada porque exatamente como eu falei eu criei a função eu criei a caixinha que ela vai fazer o qu receber a b somar e devolver o resultado Beleza mas ela não tá sendo usada eu só criei ela eu não tô usando ela em canto nenhum agora vamos utilizar então criei ela aqui tá aqui criada bonitinha Beleza linda maravilhosa vamos usar ela então então vamos botar aqui um X ser

igual a usar somar E aí somar eu abro aqui esse símbolo eu ponho os dois números no caso o a e o b né que eu quero ah enviar então ponho aqui por exemplo Vamos botar 15 vírgula E aí o segundo número eu Ponho 5 e aí lembrando não é 15,5 Tá então não é uma decimal eu tô mandando o número 15 Tô dando uma virginha tô mandando o número C Beleza então para eu criar uma função eu faço assim para eu usar uma função eu simplesmente ponho o nome dela abro os símbolos e mando

os inputs que eu quiser mandar tudo bem mandei os inputs o que que vai acontecer Ela vai rodar a função aqui ela roda internamente tá ela roda essa função roda o código dela né e o resultado ele Vai armazenar onde em x E aí depois o que que eu faço conso P log x eu vou exibir o que tá em x vamos ver o que que vai acontecer atualizei 20 Olha só eu mandei um 15 e mandei um 5 pra função somar e ela me devolveu o número 20 perfeito Então ela fez o que ela

tinha que fazer se eu fizer uma outra variável aqui e utilizar somar Agora vou mandar aqui o número 2 e o número 8 tá então console. log Y então ele vai Mostrar o x e logo abaixo ele vai mostrar o y certo então salvei atualizei ó lá o 20 e o 10 ou seja eu criei minha função uma vez só e eu usei ela duas vezes é para isso que serve uma função para eu ter um bloco de código e eu reutilizar esse bloco de código em vários locais por quê se eu for usar uma

vez só para que que eu vou criar uma função Eu no lugar de executar aquela função eu poderia simplesmente botar o código lá e acabou né mas se eu For usar mais de uma vez eu teria que repetir esse código mais de uma vez então para isso eu pego esse código englobo em uma função e aí eu executo essa função onde eu quiser beleza esses conceitos você vai ah assim na programação nunca nunca nunca tente decorar as coisas não tente decorar porque não não decorar não faz parte do vocabulário de programação tá Ah mas eu

tenho aqui o nome Number o nome string o nome bullan eu tenho várias coisas que a Gente já viu aqui como é que eu vou decorar essas coisas você não vai você vai aos poucos você vai se acostumando com elas então a palavra Eu por exemplo você não decorou ela você se acostumou com ela e E aí aos poucos você vai entendendo o que que é a palavra eu e você lembra dela simplesmente assim tá então programação é a mesma coisa não fica forçando decorar as coisas simplesmente dá o tempo ao tempo você vai esquecer

algumas coisas Eita como é Que é o mesmo nome quando eu tenho uma palavra entre aspas é não lembro como é aquele nome string Então você vai esquecer não tem problema não depois você revisa novamente as aulas você aprende novamente e você vai aos poucos se acostumando com aquele nome tudo bem é importante Ah fazer as coisas dessa forma tá sem tentar decorar porque aí é a receita para você ficar se frustrando e ficando com raiva de si mesmo porque não tá conseguindo decorar o negócio Beleza então tá vamos continuar aqui ó o próximo recurso

que a gente vai aprender se chama Arrow function ou função seta o nome não tem não explica nada né mas é o seguinte é a mesma coisa de uma função tá Ah a única diferença é que uma Arrow function uma função seta é uma função que ela é feita de uma forma diferente mas inclusive o uso dela é igual tá Então olha só eu tenho aqui a função somar que a gente criou logo abaixo dela eu vou criar a mesma função Só que eu vou criar ah utilizando um recurso um uma uma uma técnica chamada

Arrow function tudo bem seguinte ó vamos criar aqui um let somar vou chamar de somar dois tá Ah isso aqui é uma variável não por quê dentro dessa variável em vez de eu armazenar um número ou um string ou um bullan ou o que for eu vou armazenar uma função aqui dentro Então essa variável ela entre aspas se torna uma função tudo bem Então olha só Eu abro aqui ponho um a e o b eu ponho um igual ponho uma setinha pra direita então tipo eu crio uma Arrow uma seta né e eu abro do

mesmo jeito como eu faria em uma função então eu vou até copiar o código aqui que a gente criou vou colar aqui e basicamente Agora eu tenho uma Arrow function Ela faz o quê a mesma coisa só que eu criei basicamente em vez de eu criar com o nome function o nomezinho e tal tal tal eu criei de forma diferente tipo uma variável só que Dentro Eu coloquei uma função e como é que é o uso dela ao invés de somar eu vou botar somar dois aqui por exemplo nessa outra então uma vai usar a

função somar E outra vai usar a função somar dois que é uma Arrow function uma função Z basicamente Mas não deixa de ser uma função então ó atualizei tá aqui ó 10 funcionou do mesmo jeito tá então para que que tenha os dois tipos porque em alguns momentos mais pra frente você vai aprender que eu consigo mandar uma Função para um lugar sem necessariamente dar um nome para ela entendeu não relaxa você vai aprender mais na frente quando a gente tiver criando o nosso projeto a gente vai precisar usar uma Arrow function por exemplo E

aí você vai aprender para que que serve ela qual a utilidade prática né de uma Arrow function Beleza então vamos lá aprendemos aqui o que que é uma Arrow function vou até excluir ela aqui por enquanto tá para não ficar e voltar essa Para somar aqui para não ficar muita coisa aqui dentro da nossa do nosso código Tá bom Vamos agora pro próximo item extremamente importante inclusive esse próximo item tá na verdade vou fazer o seguinte eu vou excluir essa galera aqui vou deixar só o comecinho que aí eu fico com essas variáveis aqui a

gente consegue brincar com elas e fica mais fácil da gente trabalhar tá bom então o seguinte ó na programação sempre não ah sempre não né na programação Retire essa palavra sempre ela basicamente não é uma sequência ah de cima para baixo somente Tá então não é uma série de comandos e já era executa isso depois isso depois isso depois isso depois isso e acabou fez o programa não é assim que funciona tá então sim na programação por exemplo aqui nesse código ele vai pra linha um ver o que tem Ah só tem um comentário ignora

linha dois define a variável linha três define variável linha quatro Define a variável cinco não tem nada seis não tem nada acabou a execução beleza tudo lindo mas programação não é como eu falei apenas comando um comando do comando tr e já era não existe um outro conceito que é condicional Como assim eu só ligo a lâmpada se eu tiver energia concorda Então beleza eu tenho lá o interruptor vamos supor que ele é uma função quando eu clicar nele ele vai Executar a função Que vai ligar a energia Ok mas se não tiver energia então

não tiver energia eu não Lio se tiver energia eu ligo deu PR entender então existe algumas condições para que determinadas coisas funcionem concorda então eu posso por exemplo aptar no botão específic mas ele não executar nada por porque eu apertei num botão que ele tinha uma condição ser executado deu entend Então a gente vai aprend agora como é que a gente cri essas Condicionais de execução tá então seguinte ó vamos ah executar determinada função ou então a gente vai por exemplo exibir alguma coisa no console apenas para pessoas que são maiores de idade Então como

é que eu sei se alguém é maior de idade primeiro preciso ter a idade dela óbvio né Depois eu simplesmente faço uma verificação para ver se aquele número da idade dela é maior menor igual a 18 por exemplo aí eu vou saber se o cara é Maior ou menor de idade por exemplo tudo bem Como é que eu faço isso na programação Mais especificamente no JavaScript Olha só eu uso um carinha que a gente chama de condicional então eu uso um if if traduzindo é se tá então se determinada coisa for verdadeira executa isso Bas

A lógica é essa tá então se aí eu ponho aqui a condição que eu quero que é aquele determinada coisa é verdadeira tá então que condição vai ser essa se a variável idade por exemplo for Maior do que 18 então executa um bloco de código é parecido muito parecido com função né que a gente acabou de criar então que bloco de código vai ser esse console. log E aí eu ponho aqui por exemplo você é maior de idade certo então vamos executar e apareceu você é maior de idade perfeito show de bola então vamos supor

que idade agora eu tô com quatro número quatro então atualizei ó não apareceu nada mas Não tá com o código aqui na linha sete por que que esse código não foi executado porque ele tá dentro de uma condicional ou seja ele só vai ser executado quando essa condição for satisfeita quando essa condição der true quando essa condição for verdadeira Tudo bem então sempre eu vou fazer uma verificação aqui ó idade é maior do que 18 a gente tem um probleminha com essa condicional eu não sei se você já conseguiu assim apurar a sua cabeça para

Ver alguns tipos de detalhes que com o passar do tempo você vai se tornando um programador né basicamente Então você vai conseguindo ver alguns detalhes que uma pessoa normal não veria então nessa condicional aqui por exemplo idade é maior do que 18 Ela tá errada por qu E se o cara tiver 18 anos 18 anos num já é de maior sim concorda então 18 anos é maior do que 18 não então se o cara tiver por exemplo ó 18 anos Atualizei não rodou nada mas o cara já é de maior Então tá errada ess essa

condicional aqui concorda Então eu tenho que fazer outra verificação se essa idade ela é maior ou igual tem esse simbolozinho aqui maior ou igual e aí lembrando não é igual ou maior é maior ou igual tem que ser nessa ordem que senão não funciona tá agora ele vai incluir o 18 também E aí aparece ó você é maior de idade Deu para entender então Existem algumas condicionais tá que a Gente vai aprender existe igual então por exemplo eu quero saber Quero mostrar uma mensagem quando o cara tiver 18 anos então parabéns agora você pode ser

preso show de bola então só vai aparecer essa frase se o cara tiver exatamente 18 tá então ó igual igual a 18 Ah por que que não é só um igual porque um igual é eu atribuir valor que o que a gente fez aqui ó eu atribuir um valor idade é igual a tanto quando eu ponho igual igual o JavaScript ele vai saber que Agora não eu quero comparar alguma coisa então eu quero comparar o valor que tem na variável idade com esse outro valor que tá aqui do outro lado que no caso pode ser

um outra variável ou pode ser um número um string ou o que que seja tudo bem então se a idade foi igual a 18 aí ele mostra Parabéns agora você pode ser preso então salvando atualizei mostrou a frase se por exemplo a idade do cara era 20 se eu atualizar já não mostra essa Frase legal então agora eu acabei de aprender a fazer condicional Então eu tenho como eu falei alguns tipos de condicionais eu tenho igual eu tenho diferente eu tenho maior eu tenho menor e aí esse é parecido com a da matemática né o

maior e menor Eu tenho maior ou igual eu tenho menor ou igual certo e aí sempre quando eu tenho duas verificações assim tipo maior ou igual eu ponho o igual depois tá eu não ponho igual ou maior eu ponho maior ou igual tá eu não Ponho igual ou menor eu ponho menor ou igual Esses são os símbolos que a gente vai ter de de comparação basicamente tá então ah Eu quero fazer uma verificação aqui por exemplo para quando o meu nome for bonique eu quero mostrar uma mensagenzinha especial então ó se nome é igual a

[Música] bonque mensagenzinha mensagem especial atualizei ó lá mensagem Especial beleza eu posso colocar também nessa condicional um código para ser executado quando a condição não for satisfeita Então se ela for satisfeita eu executo alguma coisa se ela não for satisfeita eu executo outra coisa então como é que eu faço isso eu ponho um else E aí abro um outro bloquinho de código E aí põe ó console pon log nesse exemplo aqui mensagem normal ou seja ele vai fazer uma condicional aqui ó se o nome foi igual a bonque mensagem especial Caso contrário mensagem normal então

ó salvei atualizei ele aparece mensagem especial se o meu nome for João por exemplo atualizei mensagem normal não apareceu a mensagem especial apareceu a normal por quê nome né João João é igual a bonque não então ele já vem aqui para o else que é o quando não for satisfeita aquela condição Tudo bem então aprendemos a fazer não só uma condicional como também aprendemos a fazer quando ela não dá certo a gente Faz alguma coisa tudo bem Beleza então aprendemos aí esses conceito zinhos de condicionais a partir disso aqui o nosso sistema ele já vai

ficando um pouquinho mais maleável né já vai ficando um pouquinho mais dinâmico né A gente já vai conseguindo mostrar e fazendo algumas coisas dependendo determinados comportamentos então a gente já vai aprendendo um pouquinho a já vai entrando um pouquinho mais no no universo da programação tudo bem e da Lógica de programação por exemplo Tá bom então ok aprendemos a fazer condicionais agora vamos aprender a fazer um carinha chamado loop loop é o quê é algo que fica rodando né então um Loop Infinito é algo que fica rodando infinitamente um loop de 10 vez é algo

que roda 10 vezes certo então Ah você precisa errou o caminho você precisa dar o loop agora no carro por exemplo então eu vou o caminho agora você precisa dar a volta precisa ir em Outra rua dar a volta Enfim fazer o loop basicamente tá então na programação um loop basicamente é um trechinho de código que eu vou executar ele x vezes então ele vai ser executado executa de novo de novo de novo de novo x vezes tudo bem então eu posso Executar a determinado código quantas vezes eu quiser ou dependendo de alguma situação específica

por exemplo um uso muito corriqueiro por exemplo de um loop é quando eu tenho uma lista e eu quero Por exemplo exibir determinada lista Então olha só vamos criar aqui uma lista de números Então vamos botar aqui o número 10 Vamos botar tá aqui o número 20 o número 30 e o número 40 tenho aqui uma lista agora o que que eu vou fazer eu vou fazer um loop nessa lista para executar um código específico em quando eu tiver em cada um desses números Então como é que é um loop na programação eu vou dar

um for for significa para né let eu vou criar Uma variável que ela vai armazenar temporariamente apenas o valor daquele item específico dentro da lista tá então primeiro ele vai rodar com o 10 depois ele roda o mesmo código com o 20 depois com o 30 depois com o 40 isso eu coloquei números Se eu colocar letras ou Strings por exemplo ele vai rodar primeiro com a primeira string depois com a segunda string depois com a terceira string e assim sucessivamente Tudo bem então vamos lá ó eu vou colocar Aqui por exemplo let item vamos

chamar de item cada um dos itens tá off lista então que que eu tô fazendo aqui agora ele vai dar um loop em lista e ele vai fazer o seguinte cada vez que ele D esse loop ou seja para cada volta ele vai armazenar o item dentro de da variável chamada item então na primeira volta item vai ter que valor 10 na segunda volta 20 na terceira volta 30 e assim sucessivamente até acabar né a Quantidade de itens por exemplo no caso aqui eu tenho quatro itens né então Teoricamente ele vai rodar quatro vezes Então

olha só console.log e eu vou colocar item só para ele exibir para você tá Então olha só atualizei olha lá o que ele aparece 10 20 30 40 Ah eu tenho a lista de bolo então ao invés de uma lista de números eu tenho agora a minha lista de ingredientes né dos Bolos Beleza então vamos botar aqui o a massa Vamos botar a massa não né farinha a Farinha água sal e corante então salvei atualizei ó lá farinha água sal e corante então quando eu tenho por exemplo uma aplicação prática disso daqui quando eu tenho

uma um uma uma lixa de ingredientes de bolo por exemplo Tô fazendo um site aquele site tudo gostoso né que tem receitas enfim e aí uma área do site lá eu tenho a lista de ingredientes Então essa lista de ingredientes ela tá salva em um Array E aí eu pego esse arrei e basicamente o que que eu faço com ele eu vou fazer um loop para eu exibir cada um dos itens desse meu arrei então aqui eu tô mostrando só o nome mas eu posso botar aqui por exemplo ó para concatenar aqui um tracinho um

espaço e eu concatena com o item então ele vai juntar a string tracinho espaço com o valor que tiver em item Qual é o resultado disso ó lá tracinho farinha tracinho água tracinho sal tracinho corante enfim não importa Tá então posso botar aqui ingrediente dois pontos e aí o nome do ingrediente atualizei e ó lá ingrediente farinha ingrediente água sal corante e etc tudo bem beleza aprendi a fazer um loop existem ah na programação e principalmente no JavaScript vários tipos de loop tá aqui eu peguei um loop em que eu pego um Array eu pego

o item daquele arrei e eu executo um código nesse cara eu poderia pegar um o número Daquele item específico por exemplo farinha que número é farinha qual é a chave de identificação de farinha zero né qual é a chave de identificação de sal é dois né que é o terceiro item como começa do zero é o dois que vai identificar o sal eu posso fazer um loop pegando esse numerozinho de identificação para eu fazer alguma coisa com ele por exemplo então existem vários tipos de loop Ah eu posso fazer um loop em que eu crio

a quantidade de Repetições que eu quero e não baseado numa lista posso também fazer então existem vários e vários tipos de Loops diferentes Tudo bem então se eu for dá para fazer uma aula de 2 horas só dos tipos de loop que existem tá aqui claro eu tô mostrando para você hoje em dia o mais comum na programação na maioria dos tipos de sistemas que você vai fazer e eu quero ensinar como falei né a base para você o fundamento geral Então esse tipo de loop é um dos mais utilizados Quando a gente vai fazer

sistemas ã com JavaScript por exemplo tudo bem inclusive nós vamos usar uma espécie de loop também quando a gente for fazer o nosso sistema de conversão de dólar você vai ver quando a gente for criar aqui quando a gente ver esse básico a gente vai pegar todo esse conhecimento e vai aplicar criando o nosso sistema de conversão do dólar beleza tá agora sim que a gente vai começar a fazer o que você provavelmente queria que é Interagir com a minha tela isso agora sim vamos começar a brincar seguinte ó existe um comandinho eu vou eu

vou apagar tudo aqui tá pra gente começar a a mexer com um pouquinho mais com interações Então existe um comandinho chamado Alert então Alert basicamente é uma função mas é uma função que não foi eu que criei é é uma função que já tá disponível para mim no navegador para eu Executar tudo bem então Existem várias funções que já estão disponíveis para eu Utilizar aqui então eu não preciso criar todas elas tá então tem funções de manipulação matemática tem ões de manipulação de string por exemplo Ah eu quero um string Eu quero fazer uma conta

aqui com ela ou eu quero pegar um string eu quero dividir ela no meio por exemplo eu tenho o nome bonque Lacerda em uma string só eu quero dividir ela em duas Strings uma com bonque uma com Lacerda por exemplo eu posso fazer tem funções que já fazem isso automaticamente para Mim tá então com o tempo você vai aprendendo elas tá então o seguinte a função Alert eu ponho aqui ó Opa aqui está um aviso então coloquei um avisinho aqui nessa função Alert Olha só quando eu atualizo minha tela ele vai aparecer essa janelinha aqui

com Opa aqui está um aviso eu dou um OK ela fecha tá então isso aqui é um Alert basicamente é uma frasezinha que ela exibe no navegador Tudo bem então que que nós vamos fazer aqui agora vamos vir aqui no meu html Eu vou colocar um botão em algum lugar aqui tá Então vamos vir aqui depois desse M colocar um boton clique clique aqui então deixa eu salvar aqui atualizei Deixa eu tirar só o alerte aqui do do código atualizando ó lá tem um botãozinho feuso aqui clique aqui que não fazia parte do layout tudo

bem Beleza não tem problema não tá por qu eu quero que a gente aprenda a a fazer o Que a gente chama de event handling Ou seja a gente vai gerenciar eventos basicamente tá eu vou fechar por enquanto aqui o meu Dev Tools porque a gente como a gente vai interagir agora com a tela então ah vamos começar a mexer um pouquinho mais na própria tela Tá bom então que que eu vou fazer agora eu quero que quando eu clique nesse botão ele exiba para mim um Alert Tudo bem então como é que que eu

faço eu tenho duas opções de formas de eu criar Essa esse gerenciamento de um evento E aí antes disso eu preciso falar para você o que que é um evento um evento basicamente Como o próprio nome já fala né um evento vai acontecer então é algo que vai ser disparado pelo sistema tudo bem então quando eu digo um evento de clique É o quê É quando acontecer um clique tudo bem então ah coloquei uma função para ser executada no evento de clique do botão que que vai acontecer eu tenho uma função Você já sabe o

que é né Um bloquinho de código que vai ser executado quando quando alguém clicar naquele elemento específico Deu para entender né então eu tenho basicamente duas formas de definir esse evento eu posso vir aqui no próprio HTML eu venho aqui no botão e eu coloco aqui ó um on Click espaço e aqui eu coloco o nome de uma função ou melhor coloco um código né para ser executado então por exemplo ó vamos vir aqui vamos criar uma função essa função vai ser vai chamar Avisar então eu não vou mandar nada para ela então só abre

e fecho aqui não ponho nada eu vou mandar e dentro dela eu vou executar um Alert com um Opa disparei em outras executei essa função basicamente tá criei a função avisar eu venho aqui no HTML e eu digo o seguinte ó on ele vai Executar a função avisar botei ela aqui então significa o on traduzindo significa a clicar então a clicar Execute isso então vamos lá nosso Navegador atualizei cliquei e olha lá ele executou minha função que fez o quê exibiu um Alert então agora a gente já tá começando a usar o JavaScript para fazer

a integração com a minha página Tudo bem então eu já tenho uma função com um botão que eu clico e ele executa essa função perfeito então voltando para cá essa é a forma número um de fazer essa definição de evento eu vou apagar aqui E ao invés de eu jogar código já jav Script aqui eu vou definir um ID por exemplo para esse botão Então vamos chamar ele de Botão bem criativo né botão eu vou vir aqui no meu código JavaScript Deixa essa função definida aqui e eu vou fazer o seguinte ó eu vou no

documento o documento é o quê é a página tá e eu vou executar uma funin chamada add event listener E aí Perceba o tá maiúsculo e o l tá maiúsculo Então eu tenho que digitar exatamente desse jeito aqui tá Add event listener Isso é uma função ela recebe dois inputs que a gente chama de parâmetros né ela recebe dois parâmetros O primeiro é que tipo de evento é esse clique e o segundo é quando houver o clique eu faço o qu Então você roda a função avisar eu simples diga o nome da função que ele

quer executar eu posso fazer isso ou eu posso criar uma Arrow function então ó cria uma Arrow function eu não preciso dar um nome para ela e aqui dentro eu coloco o código que eu Quero que ele Execute quando o qu quando houver um clique em algum lugar do meu documento então ó execute a função avisar por exemplo tudo bem só que aqui tem um detalhezinho extra tá eu eu não vou colocar um evento de clique na página inteira não teria o menor sentido isso né eu tenho que colocar um evento de clique onde no

botão específico tá então o que que eu vou fazer agora ó eu posso armazenar aqui uma variável chamada botão e nela Eu vou selecionar o botão então ó document pon Carry selector com o S maiúsculo tá aqui é uma função também e eu ponho o seguinte eu ponho a seleção tipo como eu faço no CSS para o elemento que eu quero selecionar então por exemplo como é um ID jogo da velha botão se fosse uma Class através de uma Class por exemplo é um ponto mesma coisa do CSS tá então Acabei de selecionar um objeto

um elemento lá do HTML com o ID botão eu armazenei esse elemento onde na variável botão aí eu venho aqui ó e ponho botão e executo dentro dele a função add event listener add significa adicione event um evento listener é o qu é quem escuta é o escutador Né basicamente então event listener é um escutador de evento é um olheiro né o olheiro vai ficar lá só observando o elemento eu tô adicionando esse cara tá tô adicionando um olheiro ele vai ficar só observando esse Elemento esse botão aí pô ele vai procurar pelo qu pelo

um clique então quando tiver um evento chamado Click aí ele executa essa função Tudo bem então se eu passei o mouse no botão é evento de clique não é se eu cliquei se eu apertei é um evento de clique Sim então ele executa essa função aqui então Ó salvei atualizei clico aqui olha el apareceu o Alert Tudo bem então recapitulando o passo a passo que a gente fez aqui Criamos a função lindo até aí tudo bem tem nada a ver com com esse o evento aqui né E aí o que foi que eu fiz eu

selecionei o elemento ou seja o botão armazenei em uma variável depois eu fiz o quê peguei essa variável adicionei um olheiro para o evento de clique que quando houver o evento de clique eu faço o quê executo uma função essa função simplesmente executou a função avisar Beleza então ao invés de eu vir aqui no HTML e definir botar a função o JavaScript etc eu faço tudo aqui eu simplesmente Botei uma identificação pro botão para eu conseguir com o JavaScript identificar esse botão e aqui eu faço tudo seleciono o botão e adiciono um evento para ele

de clique por exemplo tudo bem então Ah isso daqui é começou a ficar complicado Relaxa isso daqui Quando você começar a botar em prática e criar os seus projetinhos com isso daqui você vai se acostumar com isso daqui ó fácil fácil por isso que eu tô ensinando Nessa parte de fundamentos então não se preocupa que na programação quando a gente vai vendo conceitos novos a gente tende a se assustar eita caramba como é que eu vou decorar isso e esses nomes e essas coisas aqui depois Isso aqui vai ficar ó fácil fácil para você tudo

bem É só você ter paciência então assim a gente tem mais de 40.000 alunos no nosso curso completo por exemplo então a gente sabe as dificuldades que o aluno Passa ao longo desse processo então quando eu Dou uma dica para você por exemplo como eu tô dando agora é porque já aconteceu com outros alunos e eu sei que isso é recorrente eu sei que isso pode passar pela cabeça da maioria das pessoas por isso que eu já dou a dica para você para você já se ligar nisso e já evitar disso acontecer então você não

vai passar pelos erros que outras milhares de pessoas passaram porque eu já tô pegando essa experiência e passando para você para você não passar pelo que por Exemplo eu passei quando eu aprendi a programar tudo bem Então essa é a a a o grande Tchan né que a gente passa para você que são as dicas para você não passar pelos problemas e evitar ou melhor é evitar de passar por esses problemas tudoo bem então vamos lá adicionamos aqui um evento de clique existem vários tipos de evento tá então como eu falei para você e se

eu passar o mouse em um botão isso dispara um evento sim dispara um evento Chamado Mouse over Mouse over significa Mouse em cima né em outras palavras então eu mudei o nome do evento de clique para Mouse over que que vai acontecer ó atualizei quando o meu mouse tá aqui ó quando eu passar o mouse pelo botão ele já vai disparar o evento Olha só tô passando passei ele já disparou eu nem cliquei nem nada ele já disparou o evento Então só para você ter uma noção quando eu tô aqui com essa página aberta Ele

tá a todo momento disparando uma série de eventos quando eu vou mexendo o meu mouse aqui também tá disparando uma série de eventos Então quando você entra em um site em determinado site por exemplo tudo que você faz Naquele site ou que você não faz Naquele site tá disparando eventos e o programador por exemplo ele consegue captar esses eventos e fazer o que ele quiser com esse com esses eventos por exemplo Então eu não sei se você não provavelmente não Sabe mas vários sites eles utilizam bibliotecas que a gente chama de Hit map em outras

palavras é uma é um mapa do mapa de calor basicamente tá que significa o quê o o dono do site ele quer saber quais os locais do site em que a galera mais passa o mouse Olha que legal né então existem códigos em JavaScript inclusive que ficam monitorando esses eventos então ficam monitorando onde o mouse dos usuários estão ele salva essas informações e ele Passa asas informações pro dono do site por exemplo tá então ele faz comunicação que enfim a gente vai aprender no futuro né em aulas mais avançadas então ele faz comunicação com o

dono do do site por exemplo el armazena em algum banco de dados em algum local enfim e aí junta esses todos esses dados de vários usuários que passaram pela aquela página por exemplo e a gente consegue saber por exemplo quais os locais da página em que os usuários estão mais passando o mouse Por exemplo Isso se chama Hit Map ou seja mapa do calor né basicamente tá então Ah eu sei que essa logoz minhas ela com quando tá verde usuário passa o mouse mais nela se ela tiver mais no cantinho o usuário passa menos o

mouse então Enfim tudo isso é analisado para fins de de enfim marketing também também né mas para fins de funcionamento do sistema Ah esse campinho aqui quando eu ponho ele menorzinho o pessoal clica menos quando eu aumento ele o pessoal Clica mais ou então quando eu aumento esse o pessoal clica menos naquele Então tudo isso são formas de você analisar o sistema para você trazer uma melhor experiência para o usuário final né que é o objetivo final obviamente né de todo o sistema é fazer com que os usuários utilizem aquele sistema de forma mais efetiva

possível tá então só um um detalhezinho né aqui no JavaScript tem eventos acontecendo a todo momento aqui e aí você consegue tar esses eventos Tudo bem então coloquei aqui um evento para quando eu passar o mouse em cima do botão então ó passei em cima do botão ele automaticamente já disparou para mim o evento que eu configurei Ah vou trocar para clique então ele fica monitorando evento de clique então ó passei o mouse ele rodou esse evento de mouse over mas eu não ATR lei nenhuma ação a esse evento Então ele simplesmente rodou o evento

acabou não não não executou nada mas quando eu clico aí eu tenho um Olheiro para esse evento de clique então ele executa uma função quando eu faço esse evento de clique tudo bem beleza vamos agora sair de botão e vamos falar um pouquinho mais sobre Campos de digitar então a gente vai trabalhar ao invés de trabalhar com o mouse Vamos trabalhar agora com o teclado Olha só deixa eu tirar até esse botão daqui a gente tem aqui no nosso sistema dois Campos né Eu tenho um campo aqui do dólar e um campo do Real tá

aqui esses Campos essas tachinhas verdes né então isso aqui é um é um elemento input do HTML então eu posso fazer com que quando eu digitar alguma coisa nesse elemento eu quero captar o que tá sendo digitado em outras palavras Então olha só vamos vir aqui inspecionar vou abrir o console por que que eu vou abrir o console porque eu vou fazer agora um evento para que tudo que o usuário digite no campo eu mostre aqui avisando que eu peguei o que ele digitou por exemplo tá Ou então avisando que ei eu sei que você

digitou alguma coisa entendeu então vamos lá ó aqui ó os campos aqui no HTML eu tenho aqui ó o input eu tenho outro input perceba que eles estão com o id o id USD de dólar né e o ID BRL de real brazilian real Enfim então tá os dois idez para os dois inputs então o que que a gente vai fazer vamos vir aqui deixa eu tirar todo o código aqui e a primeira coisa que eu vou fazer é armazenar em uma variável cada um desses inputs então Por exemplo ó SD input vamos vir para

cá document Carry selector e eu venho para cá ponho o id o sd que é esse carinha aqui depois eu vou vir para cá let BRL input document PC selector e eu ponho agora o ID BRL Pronto acabei de armazenar agora os dois inputs em duas variáveis agora eu consigo por exemplo adicionar ações nessas variáveis Então olha só SD input addd event listener Qual é o Evento que eu vou monitorar então de teclado Eu não tenho um clique né então eu não tenho um clique no teclado O Clique eu tenho no mouse no declado eu

tenho vários eventozinho legais como por exemplo ó quando eu aperto uma tecla e aí lembra existe quando eu tô num teclado por exemplo existe o ato de eu apertar a tecla existe o ato de eu soltar a tecla certo então a gente chama de Key Down ou seja Key Down é quando eu aperto a tecla e que up é quando eu Solto certo então quando eu quero saber que usuário de fato apertou determinada tecla é quando ele aperta e solta né então Ó que up ou seja ele apertou uma tecla e soltou quando ele soltou

aí eu disparo esse evento aqui então vamos vi para cá tá aqui disparei o evento E aí nesse evento aqui eu vou dar um console pon log e vou mostrar a frasezinha apertou no campo USD no campo no caso do dólar Tudo bem eu vou vir para cá vou Copiar e colar essa mesma função só que eu vou trocar aqui de USD input para BRL input então apertou no campo BRL por exemplo E aí o evento é key up Então adicionei um Key up para o input do dólar e adicionei um keup para o input

do Real tá vamos executar agora atualizei vindo para cá vou apertar agora algum botão qualquer então apertar o botão dois tá então Ó dois ele mostrou aqui embaixo ó apertou no campo USD vou digitar outro número 3 3 Ó lá ele Mostrou a frase novamente quando é a frase repetida ele só mostra o numerozinho aqui o contador né basicamente então ó vou dar um tapa no teclado aqui nos números tapa no teclado ó lá ele mostrou a mensagem 12 vezes agora eu vou pra do Real vou digitar o número um um ó lá apertou no

campo BRL agora vou voltar aqui no campo de do dólar e vou apertar outro número S ó lá apertou no campo do dólar vou voltar pro do BR vou digitar a tecla f f ó lá Apertou no campo BRL tudo bem Isso inclui teclas como shift control também do mesmo jeito tá então por exemplo ó vou vi pro dólar e vou apertar só o shift apertei shift ó lá apertou no campo USD o shift não vai mostrar nada aqui certo mas ainda assim é uma tecla do teclado então ele capta do mesmo jeito eu tava

no input com ele ativado né e eu apertei em alguma tecla por exemplo então ele sabe que eu apertei alguma tecla então automaticamente eu Consegui pegar esse evento que ele apertou Beleza então com isso eu consigo agora monitorar o que tá sendo apertado por exemplo então ah como é que eu sei o que que eu quero fazer agora eu quero que quando o cara digite alguma coisa no input de dólar enquanto ele tá digitando eu quero mostrar no console o que ele tá digitando como é que eu faço isso olha só que legal eu criei

uma função para que quando o cara solte uma tecla eu Execute alguma coisa OK como é que eu Faço para pegar o que tá digitado naquele campo específico eu faço o seguinte ó console. log console P log é para mostrar tá então o sd input ponto value o value significa valor né é o valor que tá naquele campo de texto por exemplo então o sd input ele vai pegar o campo de dólar e vai pegar o que tá digitado nele e ele vai mostrar no console salvei vamos testar atualizei vou vim para cá digitei um

ó lá mostrou o um digitei um Seis mostrou ó 16 que é o que tá digitado zer 170 160 depois um aí apaguei por exemplo quando eu digitei o shift eu digitei na verdade um control a né ele executou mais outras vezes né depois eu apaguei aí ele mostrou aqui uma linha em branco ou seja não tem nada digitado vou digitar a letra g ele mostra aqui tudo bem então Ó vou apagar com backspace e vou digitar agora uma palavra bonc por exemplo então bonc Ó lá b o b o n i b bonc bonc

completo legal Então cada letra que eu digitei ele automaticamente ó backspace limpou tudo se eu apertar nesse carinha aqui nesse botão ele vai limpar o meu console para não ficar muito lixo né então ó b o n i e k y e ele pega constrói a piramide Zinha né montando em cada letra que eu digitei ele pegou o valor que eu digitei que tá digitado no campo e pronto É assim que eu vou fazer para pegar os valores que o cara tá digitando aqui então cara tá digitando 1000 ele digita Primeiro um né um aí

eu peguei o um eu já mostro Quanto é em reais 10 eu já mostro Quanto é em reais 100 já mostro Quanto é em Reais 1000 já mostra quanto é em reais então enquanto o cara tá digitando eu já vou convertendo o que ele tá digitando e mostrando em Reais mesma coisa se ele digitar em Reis já vou convertendo e mostrando em dólar é assim que o meu sistema vai funcionar tudo bem então sem mais delongas Olha só ah durante essa aula agora deixa eu Apagar aqui Tod o código eu vou até voltar aqui pro

meu pra minha webcam tá olha só agora durante essa aula você aprendeu o fundamento do JavaScript Então você aprendeu Olha só variáveis tipos de dados você aprendeu arrs e objetos você aprendeu funções a criar funções você aprendeu errow function também né que é não deixa de ser funções também você aprendeu a fazer condicionais você aprendeu a fazer Loops e você aprendeu a fazer a integração com Eventos na tela Então olha só você aprendeu toda a base que a gente vai usar para fazer basicamente qualquer sistema que a gente for fazer a partir de agora você

vai usar essa base Então são conceitos chave mas são conceitos chave fundamentais pra gente fazer basicamente qualquer coisa que a gente queira fazer tudo bem Então olha só vamos desenhar a lógica deix eu fechar aqui o console vamos desenhar a lógica de funcionamento Desse sistema que a gente vai criar agora a gente vai fazer ele funcionar agora tá então basicamente a gente vai ter que identificar quando o usuário digitar alguma coisa em um desses Campos concorda uma vez que ele digitou alguma coisa que que a gente faz pega o que ele digitou por exemplo se

ele digitou no dólar a gente pega o que ele digitou no dólar a gente pega o número que ele digitou né então primeiro a gente faz algumas verificações de segurança então A gente formata o número que ele digitou então por exemplo se o cara botou um d a gente vai formatar esse ID ele vai sumir porque a gente só quer números certo então formatando esse cara a gente pega os números que o cara digitou uma vez que a gente pegou os números que que a gente faz a gente agora pega o valor do dólar que

vai estar salvo em uma variável e a gente multiplica ou divide enfim dependendo de como vai ser a conversa E a gente pega o valor da outra moeda pegado o valor dessa outra moeda O que que a gente vai fazer a gente vai jogar ela no campo daquela moeda específica legal então essa é a lógica Então a gente vai fazer uso de quê De event handling Então a gente vai mexer bastante com eventos a gente vai criar variáveis a gente vai criar condicionais né para fazer as diversas condições que a gente vai fazer a gente

vai usar funções para fazer esses blocos uma Função para formatar uma função para converter uma função para exibir na tela enfim a gente vai fazer vários uso de todos esses conceitos que a gente aprendeu até agora na aula Beleza então sem mais delongas vamos voltar aqui paraa minha tela Deixa eu voltar pra tela pronto voltamos pra tela e agora a gente vai focar em criar o meu projeto o meu sistema tá e a gente vai sair daqui com o sistema funcionando B Bom vamos lá agora criar o meu sistema Vamos lá ó que que a

gente vai precisar agora primeira coisa Vamos definir as variáveis que a gente vai utilizar Tá eu vou fazer o seguinte eu vou só tirar minha webcam aqui para ela não atrapalhar enfim a gente exibir alguma coisa eu posso Às vezes tem aulas que eu comento alguma coisa E aí a webcam tava em cima eu não consegui ver porque aqui eu só tô vendo minha tela não tô vendo a webcam em si Então vou só remover por questão de segurança tá se eu for fazer Algum comentário eu volto com ela para comentar explicar alguma coisa eu

volto com ela aí eu explico para você tudo bonitinho tá então ó só telinha aqui agora pra gente focar na nossa aula Tá bom então vamos criar agora o sistema eu vou explicar toda a lógica passo a passo enquanto a gente tá criando tudo bem Vamos botar em prática agora tudo que a gente aprendeu em aula então vamos lá primeira coisa que a gente precisa é o valor do dólar né então dólar eu vou Botar aqui 5 pon né que seria 5 e 10 né em outras palavras que aí a gente vai usar esse valor

como base pra gente atualizar os valores quando eu digitar em dólar para real ou de real para dólar do mesmo jeito a gente vai usar esse valor como base um detalhe importante já voltando minu webcam Ó você pode estar se perguntando tá beleza mas o valor do dólar ele muda ele é variável Então eu tenho que pegar esse valor de forma Variável né olha só você vai sim você pode fazer esse sistema para ele pegar o valor de forma ã variável ou seja ele pegar a cotação atual do dólar por exemplo só que para isso

você vai ter que fazer um negócio chamado requisição Então você vai ter que o seu sistema ele vai acessar determinado outro sistema que tá na internet para pegar o valor do dólar e vim para cá e armazenar na variável você tem como fazer isso sem tem tem sim como fazer isso é fácil Fazer é fácil fazer mas isso não faz parte dos fundamentos do JavaScript Tudo bem então isso é um conteúdo um pouco mais avançado não é considerado avançado mas ele é um pouco mais avançado do que base base mesmo Tudo bem então por exemplo

no nosso curso completo de JavaScript a gente ensina sim aí sim nele você vai aprender a fazer requisições sem problema nenhum então Você vai aprender ao seu código acessar determinada página pegar determinada do Valor e armazenar no seu código então sim você consegue fazer isso sem problema nenhum Tá mas nas aulas base agora na nas aulas não nesse vídeo base agora não é interessante eu te ensinar esse tipo de conceito um pouco mais avançado então para isso a gente vai usar o valor fixo do dólar tudo bem beleza voltando aqui pra minha tela então valor

do dólar tá aqui vamos como eu falei vamos botar aqui 5.1 tá agora o que a gente vai fazer vamos já Selecionar os elementos ou os inputs né que a gente vai manipular ao longo das aulas Então já vamos pegar aqui o USD input vou fazer igual a gente tinha feito daqui a há pouco tempo atrás né Carry selector e aí eu vou selecionar aqui o campo com o ID USD depois vou pegar aqui o BRL input document.on Carry selector e vou pegar aqui o BRL tudo bem Beleza agora o que que nós vamos fazer

vamos fazer um evento de Keyup para esses dois inputs para quando a gente digita alguma coisa em um Execute alguma coisa quando eu digite alguma cois em outro ele Execute alguma coisa também tá então ó vamos pegar aqui o sd input P event listener que evento vai ser esse keup ele vai executar aqui uma Arrow function tá essa Arrow function vai executar alguma coisa já já a gente põe o que que ela vai executar tá vindo para cá fazer A mesma coisa para o BRL input pronto executei aqui criei né as duas os dois eventos

de keup para os dois inputs então quando o cara digitar alguma coisa no de dólar eu já tenho aqui a função já tenho o que vai ser executado quando eu quero executar alguma coisa no de real mesma coisa já tenho aqui o olheiro bonitinho para executar alguma coisa que eu queira tá bom show de bola agora que que nós vamos fazer vamos artificialmente Preencher inicialmente ah os campos Tudo bem então ó no campo USD input pon value a gente vai atribuir um valor específico para ele que vai ser de 1000,00 tudo bem então basicamente ele

vai pegar aqui ó o campo USD input ou seja o campo de dólar ele vai pegar o valor desse cara ele vai definir o valor desse cara como essa string aqui então Ó atualizei automaticamente ó o campo fica preenchido com 000 tudo bem agora o que que nós temos que fazer a gente vai Preencher com $1.000 E aí depois a gente vai converter esses 1000 em reais e já exibir também o valor em reais que aí o usuário pode vir para cá ele simplesmente muda pro valor que ele quiser aí ele vem para cá apaga

e põe 200 não tem problema aí automaticamente já vai fazer a conversão Tudo bem então a gente precisa aqui embaixo criar uma função para fazer essa conversão e aí uma observação tá que inclusive eu não comentei quando eu tava Explicando as funções quando eu crio uma função essa função não importa onde eu crio ela eu posso usar ela em qualquer lugar então por exemplo ó a gente vai criar uma função para converter então ó vamos chamar de converte por exemplo como é um projeto real eu vou usar os nomes em inglês aí eu traduzo para

você não tem problema nenhum tá então aqui a gente vai usar vai criar uma função chamada convert E aí eu vou mandar o tipo de conversão Como assim o tipo se Vai ser de Dólar para real ou se vai ser de real para dólar aí eu mando um string pra gente identificar Tudo bem então ó tá aqui a função de converter eu criei essa função aqui mas eu posso usar ela aqui não tem problema nenhum tá onde quer que eu crie essa minha função no meu código ela vai ser inserida na memória automaticamente não é

em ordem de execução não tá ela não vai executar isso aqui isso aqui isso aqui isso aqui depois aqui ela cria a função não o JavaScript ele dá uma visão geral no código inteiro vê as funções que tem cria todas elas depois ele executa começa a Executar a partir da linha um Tudo bem então posso vir para aqui Executar a função converte Sem problema nenhum mesmo que eu criei ela só aqui embaixo Tudo bem não tem problema nenhum então não importa onde eu criei minha função ela vai ser criada ela vai ser disponibilizada em todo

o meu código tá bom Por que que eu vou criar aqui Embaixo então só por questão de organização nada mais apenas para deixar mais organizado somente Tudo bem então vou até botar aqui um comentário com funções aqui embaixo a gente cria as funções que a gente precisa tudo bem então vamos lá eu vou setar o valor do dólar como 1000 isso para iniciar o sistema tá E depois eu vou Executar a função de converter e eu vou passar aqui para ele converter de USD to BRL então eu passo aqui essa Stringz inha USD to BRL

para eu entender que é o que eu tô convertendo de Dólar para real em outras palavras tudo bem Então olha só aqui dentro da função converte eu faço um um uma condicional se Type for igual a USD to BRL eu executo determinada coisa se Type for igual a BRL to USD eu executo outra coisa então eu criei aqui duas condicionais Tudo bem então como essas duas condicionais elas estão envolvendo a mesma Variável se essa tiver verdadeira automaticamente essa daqui não vai dar né então em outras palavras eu tô só criando aqui duas condicionais Ah esse

cara aqui não poderia ser um else sim mas eu posso ter no futuro outros tipos de conversões mas não só duas tá quando eu tenho só duas ou é uma ou é outra né então se não for uma vai ser outra a outra automaticamente se eu tenho três tipos Então eu tenho ou é uma ou é outra ou é outra então eu já tenho aí que Fazer uma verificação individual para cada uma da dos tipos Tudo bem então beleza só explicando esse detalhezinho básico para você entender porque que eu não coloquei um else aqui por

exemplo tá eu posso ligar essas duas condicionais mas como eu não te ensinei como fazer essa liga a não vamos usar ela por enquanto tudo bem então a gente vai avançando no conhecimento e eu vou te dando dicas de como você melhorar o seu código ainda mais né com o passar do Tempo tá bom então vamos lá eu vou setar como 1000 o campo de dólar depois eu mando converter de Dólar para real e aí ele vai entrar nesse izinho aqui ó Nessa condicional e ele vai executar o código que eu quero que ele Execute

aqui tudo bem Que código vai ser esse são basicamente três etapas né eu vou já botar aqui o o descritivo né dessas etapas e a gente transforma essas etapas em código tá então primeiro ele vai ajustar o valor por que que vai ajustar O valor O que que significa ajustar o valor Olha só no Brasil a gente usa Ah o símbolo para dividir o número da casa decimal como a vírgula certo na Europa em alguns países da Europa também a usam a a vírgula mas nos Estados Unidos se usa ponto então não existe 100 1000,00

Isso não é um número que existe nos Estados Unidos então consequentemente na convenção internacional de linguagem de programação não existe um número com uma Vírgula tudo bem então se eu tenho 1000 e eu tenho 0 zer por exemplo então 150 1,50 internacionalmente a gente usa 1000.50 legal então eu tô colocando a vírgula aqui porque o sistema é feito para o Brasil logo a os números T que ser formatados para o Brasil mesmo que isso dê um pouco mais de trabalho Tudo bem por quê Porque eu vou ter que pegar esse número eu vou ter que

substituir a vírgula por um ponto para que ele funcione Tudo bem então ajusta o valor Em outras palavras pega a vírgula troca pelo ponto né traduzindo para você depois que que a gente faz a gente vai converter o valor né recém ajustado a gente converte esse valor de dólar nesse caso aí de Dólar para real né Ou seja a gente vai multiplicar o valor pelo valor do dólar né ele vai me dar o resultado final e aí o que que a gente faz com esse resultado mostra no campo de real né É exatamente esse esses

três passos né que a gente vai fazer aqui Para converter esse mesma coisa eu vou fazer aqui só que aqui eu vou mostrar no campo de dólar tudo bem agora que a gente fez a lógica de funcionamento vamos fazer agora cada uma dessas etapas funcionar bonitinho tudo bem então que que nós vamos fazer agora vamos fazer primeira coisa que a gente vai fazer o processo de formatar quando o usuário tiver digitando tudo bem então quando o usuário tiver digitando um valor eu quero formatar esse valor certinho Isso Inclui também ajustar ele tá então você vai

a gente vai fazer Rem matar dois coelhos com uma cajadada só então vamos lá vamos vir para cá vamos criar uma função e vamos chamar essa função de Format currency currency significa moeda tá então formatar a moeda eu vou passar aqui o valor e aí o que que a gente faz com esse valor primeira coisa que a gente vai fazer vou até também fazer o mesmo esquema aqui de descrever a lógica para Você pra gente A partir dessa L lógica descrita a gente cria o sistema tá Então olha só a lógica aqui vai ser o

seguinte pra gente formatar uma uma moeda tá a gente vai primeiro ajustar o valor então vou criar a função para ajustar o valor já que ela repete em três lugares do Meu sistema tá vendo Então ajustar o valor depois a gente vai utilizar função de formatar e por fim a gente retorna eh torna o valor formatado o valor formatado Tudo bem então vamos lá vamos Primeiro ajustar o valor para ajustar como a gente tá usando em três cantos diferentes para não repetir código eu vou criar uma função Então function vamos chamar de Fix value que

ele vai consertar o valor basicamente tá beleza então seguinte que que nós vamos fazer aqui agora a gente vai pegar o valor que eu mandar por exemplo o 1000,00 ou 1000,50 ou enfim Qualquer que seja o número com a vírgula e eu vou criar uma Variável chamada fixed value ou seja o valor corrigido e eu vou pegar o value eu vou executar uma função Zinha chamada replace é uma função que já existe no próprio JavaScript tá uma função do próprio JavaScript essa função replace significa trocar trocar o quê troca a vírgula a string vírgula procura

uma string vírgula e troca por um string ponto em outras palavras troca vírgula pelo ponto né basicamente então eu vou no valor que eu mandei executo a função Replace que vai trocar a vírgula pelo ponto vai procurar onde tiver a vírgula e vai trocar por um pontinho tudo bem beleza a partir de agora eu vou ter o quê nesse fixed value eu vou ter uma string com aquele valor por qu quando eu pego esse cara aqui e eu troco a vírgula um string vírgula pela string ponto é tipo assim eu tenho isso daqui isso aquii

é um número não não é um número isso daqui é um string com um um um zero um zero um zero uma vírgula um zero e um Zero então é um um texto tá se parece com um número sim é tipo aquele entre aspas 90 que eu coloquei lembra então ele é um string isso aquii também é um string tá eu troquei a vírgula por pelo ponto então ficou apenas ó 1000.00 por exemplo tá isso aquii ainda é um string Então tá tipo assim tá que que eu vou fazer agora eu vou transformar esse cara

em um número tem como transformar esse cara em um número Tem existe uma função do próprio JavaScript que transforma esse cara em um número então ó let vou chamar aqui esse cara de float Val então o valor FL ante Por que valor flutuante porque o nome da função é parce float com F maiúsculo Tá eu mando aqui o meu fixed value então basicamente essa função aqui pass float ela vai fazer o seguinte ela vai mandar eu mando um string que tem um número dentro dela e ela vai transformar esse cara em um número de fato

então é Tipo assim é tipo eu mandar um 90 e o resultado final vai ser um 90 então ele pega um string com o número 90 e transforma em um número 90 Tudo bem então no caso aqui ele vai pegar um string com o número 1000 ví 1000.00 né porque eu já troquei a vírgula e vai transformar no número mesmo 1000 Tá bom agora o que que a gente faz uma verificação de segurança como assim se float value esse float value ele pode ser um número como ele pode ser também Que a gente chama deef

Como assim ó se eu abrir aqui o inspecionar no console eu posso fazer testes aqui também então ó se eu usar a função pass flo e eu mandar aqui um 90 o resultado ó 90 o número 90 mas se eu mandar aqui um ABC O resultado é significa not a Number ou seja não é um número em out palavras tá então eu posso fazer uma verificação aqui que é o seguinte ó se esse float Value Ele é igual a não ou seja ele não é um número eu pego o float value e ponho como zero

então apenas uma verificação de segurança ou seja se o cara digitar alguma coisa que não foi um número então põe zero simples assim o sistema não vai quebrar porque o cara digitou alguma outra coisa digitou uma coisa errada que não era para digitar põe zero Acabou então ajusta o valor para ser zero agora o próximo passo é o quê retorna O float value já formatado Já corrigido já bonitinho então Acabei de criar a função que vai consertar que vai ajustar o valor então ela faz basicamente três coisas né ela troca a vírgula pelo ponto ela

transforma em um número de fato e depois ela verifica se deu errado essa transformação põe zero se deu certo retorna esse valor que deu certo tudo bem então o 1000,00 vai se transformar em 1000.00 depois vai se transformar em 1000 fechado né 1000 número mesmo e Depois retorna esse número mesmo perfeito Beleza então ó vamos aqui para o meu Format currency que é o que a gente tá fazendo aqui para formatar o número certo então primeiro passo aqui ajustar o valor a gente já tem o já tem como fazer isso daqui como let vamos chamar

de fixed value vamos usar a função Fix value e a gente manda o meu value Pronto ele vai ajustar fazer todo o processo de ajuste e aqui no meu fixed Val eu vou ter o Valor ajustado certo beleza então apagar aqui o comentário do Passo um o passo dois é utilizar a função de formatar Então vamos vir para e vamos começar então o seguinte ó existe uma função de uma é meio que uma biblioteca interna do JavaScript que já vem com ela tá é uma biblioteca de internacionalização então com ela eu consigo formatar números por

exemplo tá então para formatar esses números o que que eu vou fazer eu vou vir para cá eu Vou criar um objeto com umas umas opções né então ó eu vou abrir um objeto aqui e use grouping tem que ser esses nomes aqui tá fse por quando eu usar essa biblioteca Eu vou passar para ela algumas ah coisas que ela tem que fazer ou não uma delas é use grouping false ou seja ela não vai colocar um ponto na milhar na centena ou em qualquer outro local tá vai ficar sem ponto nenhum então 1000 por

exemplo não vai ser 1.000 ou 00 vai ser só um 00 certo sem Agrupar tá o os itens e depois eu quero que depois do do do ponto no caso eu tenha dois dígitos sempre Então se o cara digitar 100 vai ficar 100.00 ou 100,00 por exemplo tá então ó mínimo fraction digits ou seja o fraction não fraction então o número mínimo de frações no dgito em outras palavras decimal depois tá são dois então tem que ter dois beleza Criei um Objeto com essas esses deseres aqui essas propriedades né agora vamos criar o meu formatador

então ó formater formatador New min bibliotec de internacionalização chamada int L tá ponto existe uma função dentro dela chamada Number Format eu passo aqui o primeiro parâmetro é qual é a linguagem então PT tracinho BR então é para português né que a gente vai traduzir formatar esse número e eu mando as minhas opções que Eu acabei de criar o obtin ali então criei o meu formatador Então a partir de agora utilizar a função para formatar beleza criei agora eu vou retornar o valor formatado então return pegar o meu Opa Meu Format meu formatador ponto vou

usar a função de formatar e eu vou mandar o meu número para formatar que é o fixed value é o número depois de consertado né de ajustado Pronto tô retornando aqui o Número formatado então basicamente agora essa função Format currency ela vai ajeitar o número formatar o número e retornar o número formatado bonitinho tudo bem então eu posso usar já essa função aqui em cima ó quando usuário digitar qualquer número aqui nesse por exemplo aqui no dólar no campo do dólar eu vou fazer o seguinte ó eu vou pegar o campo do dólar no value

e eu vou formatar o que ele digitou então Format currency eu vou Pegar campo do dólar e o valor dele então eu pego o campo do dólar o valor dele formato e devolvo ao próprio campo do dólar mesma coisa eu vou fazer com o campo do Real tá então aqui embaixo ó BRL input pon value Format currency BRL input pon value peguei o valor digitado joguei na função Format currency peguei o resultado dela e joguei no próprio campo então eu tô formatando o que o usuário tá digitando em outras palavras tudo bem Vamos testar agora

se tá Funcionando vamos voltar pro sistema vamos atualizar aqui deixa eu fechar esse cara aqui tá 1000 por exemplo eu vou selecionar tudo e vou digitar um um um Olha só digitei o número 1 ele automaticamente já botou 1 v00 eu formatei já para o formato Brasileiro né então eu pego usuário digitou transformo pro Internacional forma bonitinho devolvo formatado pro brasileiro então ó usuário Ah vai digitar o número 10 Então tá aqui ó 10 150 150 então 150 e 75 então 75 Opa 75 não cadê 75 705 teclado deu um bug aqui foi mal 150

75 Beleza então tá formatando aqui bonitinho Ah quero digitar 200 então 200 ou 20 ou 200 teclado tá pronto 200 beleza então formatei aqui agora o que que nós vamos fazer Ah vamos terminar o sistema né para ele funcionar de forma correta né bonitinho aqui agora já estamos formatando se eu fizer a mesma Coisa aqui também então botei o um ele já formata aqui bonitinho para mim então coloquei um 15 também do mesmo jeito 15 e 20 também do mesmo jeito Tá agora que que nós precisamos fazer para o negócio funcionar corretamente a gente precisa

agora fazer o processo de converter Então vamos lá para baixo pra função de converter que a gente já tem basicamente tudo que a gente precisa para conseguir converter tá Então olha só ajustar o valor a gente já tem certo então vamos Lá fix vamos chamar até de fixed value vamos usar o mesmo nome né fixed value que que a gente pega aqui nesse cara o o sd input P value então eu tô transformando de Dólar para real então eu pego o valor do dólar que tá digitado no campo lá ajusto ele né para ficar ajustado

bonitinho e virar um número próximo passo eu vou converter o valor então pegar aqui o resultado vamos chamar de result vou pegar o fixed value que é o valor corrigido multiplicar pelo Valor do dólar então ele vai ter aqui agora o valor do dólar certinho às vezes ele pode multiplicar Dependendo do valor enfim vai ficar um 15.666 6 6 7 7 7 7 enfim um número bem quebradão né que que eu vou fazer eu vou pegar esse quebradão e eu vou garantir que ele só vai ter dois ã decimais Tudo bem então como é que

eu faço isso result vai ser igual Vou definir a o próprio result eu vou executar uma função chamada to fixed 2 então vá pegue e Basicamente os decimais desse valor e fixe ele em dois decimais então se tiver um 667 por exemplo são três né 1.667 ele vai trazer tirar esse S vai ficar 1.66 ou então 1.67 Talvez ele dependendo do caso ele vai arredondar um pouquinho Tudo bem então beleza formatamos aqui o valor ajustamos o valor digitado transferimos para dólar só garantimos que tá bonitinho aqui ele agora a gente Vai formatar e exibir no

campo então BRL input que é o campo do Real P value Format currency e eu mando o valor que eu tenho pronto Acabei de fazer todo o processo de conversão de Dólar para real Ajuste o valor converto para dólar mando pro campo formatado pro campo de real no caso né formatado bonitinho tudo bem mesma coisa vamos fazer aqui do real para o dólar Então vamos lá ó let fixed value do mesmo jeito Fix value nesse caso aqui a gente pega o Valor em real certo depois peg o resultado fixed value dividido pelo dólar certo no

caso aqui de real para dólar tenho que dividir né de Dólar para real eu multiplico e de real para dólar eu divido pelo valor do dólar depois faço a mesma coisa result to Pixel 2 perfeito e depois eu pego o campo de dólar e exibo o valor formatado para a moeda então result Beleza então agora a gente tem Todas as funções que fazem todos os processos bonitinho e a gente vamos testar para ver se tá funcionando ó lá no próprio item que começa já funcionou né porque ele põe o dólar como 1000 depois ele manda

converter aí já converteu aqui ó já apareceu 5000 5100 tá porque o dólar tá 5.1 no caso a gente definiu né o dólar como 5.1 Ah eu quero saber quanto é 900 Tudo bem então vamos botar aqui 50 Ele só não tá funcionando quando eu Tô digitando aqui né por que que não tá funcionando esse cara aqui ke up Ele só tá formatando aur em ele não tá convertendo É de fato ele não tá Convert Entendo ele tá só formatando por a gente não era para formatar aqui a gente era para converter aqui então pera

aí quando o cara digitar um valor em dólar eu vou converter não vou formatar nada então US SD para BRL Eu que digitei errado aqui fiz o bagulho errado aqui e aqui quando o cara digitar alguma coisa no do BR BRL To USD Ah por isso que tava dando erro aqui no meu teclado ele não Tava formatando o negócio direito aqui Então vamos lá agora sim então 100 beleza agora sim tá o 100 que eu digitei né ele já transforma aqui ó para 510 perfeito se eu quiser Ah quero saber Ó 510 quero saber 50

700 e não sei quantos reais ah vamos para outro agora aqui deixa eu atualizar vamos PR real quero agora r000 em dólar dá quanto dá 196 08 Nossa nada né 00 tá aqui ah 5100 ou R 5100 né dá 000 Beleza agora o que que nós temos que fazer umzinho um detalhezinho extra para ficar bonitinho que é o seguinte enquanto eu tô digitando beleza ele pode ficar do jeito que eu tô digitando tá se por exemplo Ah quero agora 150 aí beleza ele formata aqui dá $171 Ok quando eu saio Ou seja eu clico fora

eu quero agora que ele formate o que eu digitei então por exemplo ó Digitei só 100 e sair ele ficou o 100 que eu digitei não ficou com o v00 e o interessante é que ele fique com v00 então que que nós vamos fazer vamos adicionar aqui agora outro eventozinho no campo um eventozinho chamado Blur Blur é o seguinte quando eu clico num campo que fica pisca né piscando para digitar alguma coisa é um evento chamado foc quando eu saio do campo é um evento chamado BL Ou seja eu saí do foco daquele Campo basicamente

tá Então quando eu sair do foco daquele Campo quer dizer que eu não t digitando mais né Aí eu formato o valor que tá digitado lá certo então ó USD input add Event listener BL ele vai executar alguma coisa que que ele vai executar Agora sim ele formata Agora sim o value Format curen USD input Val Agora sim ele vai formatar bonitinho e depois mesma coisa pro BRL input add event BL BRL input Format Cadê currency BRL input.on Val tudo bem agora vamos testar atualizei aqui ó $1 dá 510 cliquei fora Ó lá ele formata

para ficar bonitinho Ah beleza não quero mais 100$ quero 150 150 formata bonitinho Ah não formatei assim só digitei de novo tudo bem quando eu sair ele formata novamente para ficar emum formato bonitinho ai quero R Reis agora 2000 dá quanto dá $92 então tanto faz eu digitar aqui ele Vai calcular embaixo como se eu digitar embaixo ele vai calcular em cima então tô com o meu conversor agora funcionando perfeitamente legal olha só vou voltar aqui pra minha câmera seguinte a gente fez aqui um sistema que ah assim eu confesso para você é um sistema

que não é dos mais básicos eu poderia fazer um calculadora simples que você põe um aperta no botão mais aperta no botão um E aí ele soma e fica lindo maravilhoso beleza eu escolhi de propósito fazer um Sistema que ele não é tão simples ele precisa de um pouco mais de lógica tá então por exemplo eu comentei aqui coisas com você ou funções que eu não expliquei que elas existiam antes certo por quê Porque eu expliquei o conceito de funções mas eu não expliquei todas as funções que existem por exemplo então eu não comentei com

você do pass float Mas você sabe que isso aqui é a execução de uma função por exemplo tá Por quê Porque é um vídeo só e eu quero passar a base Da base da base para você pegar o conceito geral e conseguir construir alguma coisa com isso mas no nosso curso por exemplo aí eu ensino a formatar números então eu falo sobre o passe float tem o passe int também tem o replace também que eu não comentei aqui mas é uma função do mesmo jeito tem o to fixed enfim essas funçõe inhas esses detalhezinhos eu

explico em detalhes no nosso curso completo por exemplo tá então construímos aqui agora um sistema De converter dólar em real e real em dólar também por consequência tá um sistema que não foi tão simples não é tão simples de fazer detalhe tá então se você por exemplo ah tive dificuldade para entender a lógica ou para tentei fazer sozinho por exemplo e não consegui não tem problema primeiro é o primeiro sistema que você faz em JavaScript com uma aula só uma aula que eu busquei pegar os conceitos relevantes e fundamentais mas apenas o conceitos Conceitos básicos

por exemplo tá e de forma resumida então só de você ter conseguido terminar junto comigo entendendo as explicações enquanto eu tava explicando já considere você um a a assim um aluno eu eu diria para você que você é um aluno prodígio basicamente tá é um aluno que tem grandes chances de ser um ótimo programador se se esforçar e se continuar programando a partir daqui tá um vídeo só não vai resolver sua vida obviamente Tudo bem então Espero que você tenha gostado Espero que você tenha aprendido com essa aula e eu te vejo nas próximas aulas

nos próximos vídeos e se você claro né quiser se inscrever no nosso curso e aprender não só de forma resumida mas sim de forma mais aprofundada com muitos exercícios com muitos projetos projetos simples projetos complexos projetos médios enfim com uma gama de coisas diferentes e com equipe de suporte para te ajudar também então link tá aqui embaixo na descrição Caso você queira se inscrever no nosso curso Beleza então Maravilha valeu e até o próximo vídeo tchau tchau