Aprenda JavaScript em 10 min [Iniciantes]

fala impressionador seja bem-vindo a mais um vídeo aqui de JavaScript desenvolvimento web aqui da # programação nesse vídeo eu vou fazer um espécie de desafio e brincadeira aqui com vocês na verdade é um vídeo que tem como intenção apresentar o JavaScript para quem tá iniciando e eu vou fazer isso em 10 minutos Beleza então ó se você quer ver se eu vou conseguir isso aqui se você quer ver se puts Ah pô Será que ele vai realmente conseguir fazer alguma coisa em 10 minutos já deixa aqui o seu like e se inscreve no canal para você você não perder esse tipo de vídeo e também os vários outros vídeos que a gente faz e que eu tenho certeza que você vai gostar muito beleza então bora lá pro [Música] vídeo Então vamos lá galera mas antes uns comentários aqui primeiro de tudo você vai abrir aqui na sua você vai abrir aqui no seu Windows uma pasta que vai organizar os arquivos de código que você vai escrever nessa aula então para isso você vai criar uma página no lugar que você consegue acessar com facilidade beleza isso aqui é só um ponto aqui que é importante e aí você bota um nomezinho que seja descritivo você vai ver que eu coloquei aqui 10 min JS é um nome bem descritivo Você não acha não só isso você vai aqui na pasta depois que ela já tá criada você vai clicar com o botão direito e você vai pressionar shift clicar com o botão direito na página e vai escolher aqui essa opção abrir com code o que ele faz é ele já abre o visual Studio code e abre o visual Studio Code com aquela pasta ali já em Foco aquela pasta ali vai ser a pasta na qual todo arquivo que a gente cria pelo visual Studio code vai ficar guardado beleza Ah Daniel Mas eu ainda não instalei o visual Studio code Sem problema dá uma olhada aqui no canal Eu já subi um vídeo de como você instala visual Studio code que é um processo super simples super fácil visual Studio code é gratuito muito fácil de instalar roda em tudo quanto é computador e ele é muito bom porque ele facilita muito o nosso processo de escrita de código beleza Tá bom um outro comentário aqui é o seguinte deixa eu dar uma contextualizada aqui para você JavaScript ele tá muito intimamente relacionado à internet e por que isso JavaScript foi criado em 95 1995 e quando ele foi criado a finalidade era de criar uma internet mais inteligente uma internet com páginas mais dinâmicas com as quais você poderia interagir clicar e alguma coisa acontecer tudo isso aqui é possível porque a página tem inteligência e a página tem inteligência a inteligência se chama JavaScript sacou nos quase 30 anos dessa linguagem ela evoluiu bastante assim tem teve muitos Progressos já até se dissociou da internet você é capaz de usar JavaScript totalmente fora de qualquer coisa relacionada à Internet mas ainda é muito natural a gente falar de internet e pensar em JavaScript ou falar de JavaScript e pensar em internet beleza e é por isso que nesse momento eu vou te fazer esse desafio só que pensando no contexto da internet Tranquilo então beleza Você tá vendo que eu tenho três janelas aqui abertas uma delas é o visual Studio code a outra é uma página de navegador porque é onde as inteligências é onde toda a programação que a gente vai fazer vai acontecer beleza é onde a gente vai ver tudo funcionando e aqui eu tenho um cronometro Zinho simpático só para ele ficar me olhando aqui para ver se eu vou conseguir bater aí o desafio dos 10 minutos Tranquilo então vamos lá galera sem mais delongas tá na hora de iniciar aqui o desafio pronto pessoal a gente vai clicar aqui nessa opção e escrever aqui ó index HTML Lembrando que HT ML é o tipo de arquivo que corresponde a uma página de internet beleza a página de internet tá associada a um arquivo HTML então a gente criou aqui um arquivo HTML e aí ele tá em branco você vai clicar aqui no visual Studio code e vai pressionar aqui para digitar uma exclamação qu você digitou a exclamação ele já até te dá essas duas opções aqui você escolhe a primeira aperta Enter e olha só isso aqui que ele criou é a base de um arquivo HTML todo arquivo HTML tem essa base aqui então é bom porque já economiza pra gente um grande tempo beleza E aí vamos lá aqui dentro desse elemento desse elemento aqui Body Body que corresponde que significa corpo porque é o corpo da página que vai entrar aqui dentro aqui dentro é tag de abertura tag de fechamento que são esses dois caras aqui ó Isso aqui é uma tag só que a tag de fechamento ela que tem essa Barrinha aqui e o que tá no meio é o conteúdo da tag é o que vai ser exibido aqui na página Beleza a gente vai escrever aqui ó oi tá bom escrev aqui Oi e aí eu vou clicar com o botão direito Open with aqui ó cliquei E aí vou passar aqui para cima só beleza oi tá vendo aqui já aconteceu a gente já tá vendo uma correspondência entre o que a gente digitou e o que tá aparecendo aqui na página bacana não é só que eu vou apagar esse Oi aqui eu vou na verdade botar outra tag porque aqui ó vamos botar tags dentro de tags porque as tags elas organizam melhor aqui a nossa página eu vou botar essa tag H1 aqui que é uma tag que é usada para fazer títulos na página Então vou botar H1 aqui beleza título Meu primeiro desafio com JS salvei aqui olha só apareceu um título aqui na minha página da mesma forma eu poderia botar aqui um texto Então texto eu vou botar com a tag p não com a tag H1 a tag P que é p de parágrafo paragraph Beleza então vamos botar aqui ó esse é um texto da minha página desafio salvei aqui e olha só apareceu beleza só que agora a gente vai fazer uma coisa diferente agora a gente vai vir aqui para depois do bari se o Bari é onde a gente vai ter os elementos que vão aparecer aqui na nossa página HTML aqui a gente vai escrever aqui uma tag script fora e script vai ser uma tag que a gente colocou aqui fora porque a gente não quer que nada porque ela não vai ter nada para aparecer aqui na verdade script como o nome já sugere vai ser onde a gente vai escrever o nosso código JavaScript aqui da página Beleza então vou fazer o seguinte primeiro de tudo eu vou pegar aqui ó document document é um document é uma informação que corresponde aqui à nossa página Beleza então document aqui é essa informação que tá olhando pra nossa página E aí portanto eu consigo fazer ponto e acessar as informações que existem dentro dessa informação e aí ponto Body Body E aí eu tô acessando exatamente as informações desse elemento aqui do bar da nossa página HTML e aí todo elemento da nossa página HTML o bar Inclusive tem aqui esse elemento aqui ó tem essa informação aqui Style que é informação estilo são as informações estéticas da página E aí dentro dessas informações de estilo e são várias informações estéticas diferentes eu tenho uma informação aqui ó background color beleza background color ou seja eu tô acessando a cor de fundo do meu bar do bar aqui da minha página E aí eu vou fazer o seguinte ela vai ser igual a aí eu vou botar aqui Yellow Tá bom o que que isso significa significa que eu peguei essa cor aqui que eu escrevi aqui e aí em texto corrido eu vou botar entre aspas né pode ser aspas simples ou aspas duplas E aí eu vou pegar ela e vou jogar nesse cara aqui e aí esse igual faz isso né Pega o que tá na direita do igual e joga no cara que tá à esquerda do igual Tá bom então eu tô dizendo você deve valer esse valor aqui esse cara aqui deve valer esse valor aqui salvei e olha só a minha página ficou amarela isso aqui já é o nosso primeiro exemplo do JavaScript sendo capaz de alterar dinamicamente uma página de internet sacou a gente pode fazer muito mais do que isso lógico Na verdade eu vou fazer o seguinte vem você vem aqui e escreve let aí agora a gente vai fazer lista cores tá bom lista de cores beleza lista de cores vai ser então uma caixinha que a gente vai guardar informações especificamente uma lista então para criar uma caixinha a gente usa essa palavrinha let aqui é o nome da caixinha que eu vou criar E aí ela vai valer o qu qual vai ser a minha lista abre e fecha colchetes E aí dentro você vai colocar aqui uma lista vou botar yellow blue aí vou botar aqui Red botar aqui Green Opa Green é com n e vou botar aqui depois Pink tá bom botei aqui cinco cores beleza tenho cinco cores aqui a minha lista ficou aqui ó com cinco cores yellow blue red Pink yellow blue red Green Pink aí beleza que que como é que funciona isso aqui agora que eu criei essa caixinha significa que eu não preciso botar aqui ó em texto corrido eu posso vir aqui e acessar o conteúdo dessa minha caixinha dessa que contém a minha lista da seguinte forma eu boto o nome dela e já que é uma lista tem várias informações diferentes eu posso acessar cada uma dessas informações como eu boto aqui colchetes E aí aqui dentro o número de cada uma dessas informações lembrando esse número começa em zero então o Yellow é zero o Blue é um salvei aqui e olha só Blue Azul a página ficou azul Beleza então tá aqui vamos deixar aí el mesmo né então vamos botar aqui zero e aí agora eu vou fazer com você o seguinte eu vou aqui fazer com você uma function tá bom e o que que é uma function uma function é um passo a passo que eu quero que ele seja executado repetidas vezes então eu vou fazer o seguinte eu vou dar um nome para esse passo a passo e aí toda vez que eu quiser executar eu vou simplesmente chamar ele pelo nome sacou ao invés de fazer o passo a passo isso aqui passo a passo eu quer dizer o seguinte Isso aqui é uma instrução Isso aqui é uma outra instrução imagina que eu tenho sei lá cinco instruções que eu quero executar toda vez ao invés de escrever essas cinco instruções toda vez eu só chamo elas de um nome específico E aí toda vez que eu quiser executar Eu só chamo esse nome específico beleza e aí o nome aqui do meu passo a passo dessa minha função vai ser trocar cores beleza trocar cores então para você escrever um passa a passo é isso você escreve function depois o nome que você quer dar pro passa a passo aqui dentro você coloca esse abre e fecha parênteses Beleza você coloca abre e fecha parênteses E aí aqui você bota depois um abre e fecha Chaves o abre e fecha parênteses é só para caso o seu passo a passo precise de alguma informação externa E aí você comunica para ele por dentro dos parênteses não vai ser o caso aqui agora não aqui o que a gente vai fazer é o seguinte abri e fechei Chaves o nosso conteúdo aqui do passo a passo vai ser o que vai est dentro das chaves eu vou fazer o seguinte math P Random math é uma biblioteca da biblioteca de matemática do JavaScript ele tem várias ações e várias funções e várias ele tem várias funcionalidades de matemática já Preparadas para você utilizar e Random é uma delas gera para mim um número aleatório entre 0 e 1 Então ele pode gerar um número como 0. 2 0. 2 3564 0.

97 073 0. 9 isso aqui sacou e o que que acontece o número aleatório entre 0 e 1 Só que se eu pego e multiplico isso por 5 ou seja se eu venho aqui e faço 5 vezes meth Random o resultado então agora é entre 0 e 5 não é mais entre zer e 1 sacou ele vai ser entre zero Ou seja pode ser sei lá um z0 ponto isso aqui e podia ser sei lá um 4. on 9 89 isso aqui sacou ele é um número agora aleatório entre 0 e 5 É isso que eu tô gerando aqui e por que que eu tô fazendo isso eu não disse para você que os números aqui que as cores aqui são acessadas aqui na página acessando aqui a lista de cores né botando aqui esse nome lista de cores e aí depois o índice dessa informação 0 1 2 3 4 beleza o que que eu quero fazer eu quero agora gerar um número aleatório isso aqui tá gerando um número aleatório entre 0 e 5 né Eu quero os números aleatórios 0 1 2 3 e 4 o que que eu vou fazer eu vou pegar eu vou botar outra fo já math math P flor tá bom math P flor e eu vou dizer que ela vai trabalhar com esse resultado aqui o que que tá acontecendo meth P flor ela pega um número decimal desses aqui ó 4.