CURSO DE JAVASCRIPT DO ZERO | parte 1 - variáveis, onClick, funções e interação com HTML

JavaScript uma das linguagens mais utilizadas no mercado da área de tecnologia na programação e em diversas área seja você uma pessoa que quer trabalhar com front-end com backend com mobile automação e testes aplicativos desktop Inteligência Artificial IOT o JavaScript tá em todas e nesse vídeo nós vamos iniciar os nossos estudos dessa linguagem obviamente nós vamos começar com lógica de programação então eu vou ensinar gente os conceitos desde o início de como programar de fato porque esse aprendizado de lógica de programação não vai servir apenas pra linguagem JavaScript a gente vai usar ela como ferramenta mas essa lógica toda ela é usada em diversas linguagens Java C Python a que você quiser mas nesse momento eu escolhi JavaScript Porque aqui no canal eu sempre mostro para vocês HTML CSS Então a gente vai fechar a trilogia aí do front end então sim eu vou utilizar aí a construção de sites para poder explicar toda essa lógica de programação o que eu acho interessante porque a gente não vai ficar apenas vendo código código e conceito conceito teoria teoria a gente vai de fato ter essa resposta na prática a gente vai receber visualmente tudo que a gente tá desenvolvendo E também porque JavaScript hoje é uma das linguagens mais procuradas aí por empregadores então eu tenho certeza que para você vai ser muito positivo aí esse aprendizado todo fica comigo a gente vai fazer aí uma playlist eu vou ensinar muita coisa para vocês a gente vai desenvolver projeto prático então é hoje o dia que você você vai começar a entender JavaScript e programação e vai mudar a sua [Música] vida algumas observações que eu preciso que você ouça com cuidado pra gente realmente começar ali a Pôr a mão na massa Pode ser que você esteja aqui para ver JavaScript como lógica de programação para poder criar e aplicativos desktop direto pro backend mas nos projetinhos aí que a gente vai fazer ao longo dos próximos vídeos a gente vai utilizar HTML e CSS não vai ser o foco a ter um momento ali que a gente só vai copiar e colar eu vou desenvolver aqui na minha casa para vocês vou deixar disponível aqui na descrição vocês podem só copiar e colar nos arquivos eu vou explicar né bonitinho como que faz isso mas eu aconselho que você aprenda HTML CSS se você ainda não foi atrás disso tem muito conteúdo aqui no canal vou deixar aqui para vocês poderem dar uma olhada Talvez uma playlist ou um vídeo aí para começar não sei ao certo agora o que que eu vou pôr E por que é importante porque essas duas tecnologias são as que estruturam o nosso nosso site elas estilizamos também o nosso site pra gente poder agora chegar com o JavaScript e já usar a linguagem de programação para poder fazer toda a lógica aí do que tem por trás outra indicação que eu tenho para vocês é ir atrás já de plataforma de hospedagem e de registro de domínio também quando a gente desenvolve um site com HTML CSS e JavaScript a gente tá fazendo isso aqui localmente no nosso computador é o que a gente vai fazer no vídeo depois a gente precisa subir nesse serviço aí de hospedagem pro nosso site ficar no no ar qualquer pessoa poder acessar e a gente também precisa registrar um domínio que é o tal do e sei lá Rafael balerini comom google. com youtube. com Esse daí é o domínio que vai ser o que as pessoas precisam digitar aí no Campo da URL para poder acessar o seu site tô falando de uma forma resumida mas tem vídeo meu aqui no canal explicando o que que é hospedagem o que que é domínio tudo bonitinho gente de forma muito didática para você que ainda não tem esse conhecimento eu vou deixar ele linkado aqui também e lógico que a plataforma que eu mais indico desde o início aqui do canal é a hostinger é lá que basicamente eu tenho todos os sites que eu mostro aqui para vocês É nos vídeos hospedado também os Bots que eu já desenvolvi trabalhos que eu fiz por fora eles têm muitos serviços de hospedagem a plataforma é muito intuitiva então você que tá começando agora é só seguir todo o passo a passo ali que a plataforma vai mostrando para você colocar o seu site no ar Inclusive tem vídeo meu fazendo isso né esse daí que eu deixei acho que já linkado agora alguns minutos atrás e ali mesmo você registra seu domínio Aos Pé da site faz tudo que você precisar eu tenho também este cupom de desconto que eu vou deixar na tela Vou deixar na descrição junto com o link da hostinger para vocês poderem conhecer e já pegarem aí a sua plataforma de hospedagem domínio e tudo mais que vocês precisarem bora então começar a entender JavaScript como uma receita de bolo a gente precisa mencionar e quais vão ser os ingredientes que a gente vai precisar para poder cozinhar o nosso primeiro código e neste momento gente a única coisa que precisamos é de de um editor de código assim como a gente usa um editor de texto tipo Word para poder escrever os nossos trabalhos na escola a gente também precisa de um editor de código para poder escrever código linguagens de programação e um dos mais utilizados no mundo e que eu gosto demais é o vs code vai ser por ele que a gente vai começar ele é um software que você precisa instalar na sua máquina no seu computador seja Windows seja Linux seja e macos também Você pode achar ele colocando vs code no Google vai ser o primeiro link E aí você já clica aqui em download for macos ou né dependendo de qual vai ser o seu sistema operacional também você pode escolher é bem simples vai ser depois next next next next e ele vai est instalado aí na sua máquina qualquer dúvida que vocês também venham a ter aí sobre esse editor de código sobre o vs code também tem vídeo meu no canal eu acho que vale muito a pena assistir de qualquer forma sabe aqui a gente vai já fazer o passo a passo Mas talvez depois desse vídeo você pode já já conhecer um pouco melhor esse editor de código vê coisa que você pode mudar ou não Por exemplo meu vs code Olha só como ele tá ele já tá marronzinho porque eu baixei uma extensão que é a balerine theme inclusive né aqui na parte de extensions isso tudo eu mostrei aí nesse vídeo como deixar bonitinho aumentar a letra e várias outras ferramentas para te ajudar aí na parte do desenvolvimento vamos começar o nosso projetinho então pra gente conseguir visualizar o JavaScript no nosso navegador né em dentro de uma página a gente vai precisar como eu falei estruturar essa página usando HTML e CSS eu vou mostrar o básico a gente vai apenas criar uma estrutura básica para poder aprender o JavaScript Então vamos começar criando aqui um arquivo deixa eu até aumentar um pouco talvez a tela que pode estar pequeno que vai ser index P HTML e o que que a gente vai fazer aqui dentro eu vou criar a estrutura básica do HTML apenas colocando aquele ponto de exclamação vou dar enter e ele criou aqui para mim o head O B qualquer dúvida pessoal PR nem dhtml CSS tem vídeo aqui como título eu vou colocar apenas olá mundo do nosso site pra gente conseguir visualizar no navegador como tá ficando a nossa página HTML tem uma extensão que eu gosto muito que se chama Live server a gente pode pesquisar aqui nesse extensions que vai ser esse primeiro mesmo se você ainda não tem baixado pode baixar depois que você instalar você vai ter esse go Live aqui no canto inferior direito você pode clicar nele depois que a gente já escreveu ali o nosso HTML e ele vai abriu o navegador com a página que a gente tá desenvolvendo aqui ele já colocou o título na na Tab olá mundo que foi o que a gente acabou de inserir eu vou criar então um título pra nossa página um título visual mesmo né o title é pra aba agora pro visual no corpo da nossa página a gente cria um H1 eu vou dar enter né para ele poder já criar a tag o menor q com maior q e aqui no meio a gente vai colocar o conteúdo do nosso título e eu vou escrever olá mundo só pra gente ver como que tá ficando isso isso daqui é o primeiro código HTML da vida de uma pessoa né o tal do hello world também o Hola mundo eu tô colocando aqui em português mas a gente tá escrevendo em HTML o meu foco aqui nessa aula é JavaScript Então como que a gente consegue ao invés de escrever esse olá mundo com HTML escrever com JavaScript nessa nossa página a gente já tá com a estrutura do site aqui com o corpo aqui né esse B mas a gente quer usar linguagem JavaScript para isso a gente vai adicionar uma tag dentro do HTML chamada script e eu vou dar enter e ela já abriu aqui eu vou dar um enter né pra gente poder escrever o nosso código JavaScript dentro dela e tudo que a gente escrever aqui dentro vai ser na linguagem JavaScript e vai interagir com a nossa página HTML que tá aqui nesse documento um detalhe importante é eu coloquei essa tag script aqui no final eu não coloquei ela no R do html eu não coloquei ela em cima do H1 ela sempre vai ficar logo antes da gente fechar a nossa tag B como eu falei para vocês a gente vai utilizar a linguagem JavaScript para interagir com o HTML da nossa página eu quero neste momento escrevesse olá mundo com o JavaScript mas eu vou precisar de algum elemento que já tenha na minha página para eu poder escrever então eu vou usar esse H1 mesmo mas eu não quero ele já escrito de forma estática aqui no html eu quero escrever com o JavaScript pra gente poder interagir o JavaScript com algum elemento HTML a gente tem que adicionar um ID para esse elemento e esse D ele vai ser um atributo dentro aqui da nossa tag Então dentro aqui do H1 eu vou colocar o atributo id vou colocar um igual ele já vai completar aí com as aspas né porque vai ser um nome eu vou escolher um nome para esse ID que é o identificador e nesse caso eu vou colocar o nome do ID como Olá eu salvo né Sempre que eu Quero visualizar no navegador eu dou um contrl s para poder salvar e ele atualizar eu salvo Então vou no navegador ainda não aconteceu nada não escrevemos nada com JavaScript como que a gente consegue então escrever o tal do ham mundo este comandinho aqui ele vai parecer um pouco difícil na hora que a gente olhar mas eu vou bem devagar com vocês para vocês realmente compreenderem passo a passo o que que tá acontecendo e isso é muito doido né gente porque a gente tá escrevendo o código JavaScript dentro de um arquivo HTML só porque a gente colocou essa tag script Bom vamos lá primeiro a gente precisa escrever a palavra document o que que é esse document Por que que tem que ser document não documento a gente não pode escrever qualquer coisa que a gente queira é uma palavra realmente é um é um comandinho do JavaScript específico ele representa a estrutura da minha página HTML então ele Tá acessando aqui o nosso document quando a gente escreve document a gente tá referenciando a toda essa nossa página HTML em seguida a gente vai escrever o comando que vai pegar qual elemento eu quero escrever alguma coisa e gente JavaScript é tudo em inglês então o comando também vai ser assim como o document Esse comando também vai ser mas a gente não vai escrever simplesmente Esse comando logo depois do document a gente coloca o ponto e aí olha só ele já traz até várias opções de coisa pra gente escrever mas o comando que vai buscar esse ID Olá que na verdade vai referenciar o nosso elemento H1 do HTML vai ser o seguinte get Element e aqui o get começa com letra minúscula o e com letra maiúscula E aí em seguida a gente coloca get Element by idid então no comando inteiro só a primeira letra da primeira palavra fica minúscula as seguintes todas vão começando com letra maiúscula então o que que escrevemos até o momento dentro do meu document que é todo esse código HTML pegue o elemento pelo id e agora a gente vai precisar falar qual o ID que a gente quer pegar para isso a gente coloca aqui os parênteses as aspas também porque vai ser o nome do id e a gente coloca o ID que a gente quer buscar então ele vai pegar o elemento pelo id ele vai buscar no meu documento qual elemento tem o ID Olá que no caso vai ser o H1 E aí o que que a gente quer fazer a gente quer Inserir a frase olá mundo que a gente tirou daqui do H1 lembra que tava estática e o comandinho pra gente poder colocar um texto Dentro de um elemento que vai ser aqui dentro do H1 né a gente tinha escrito de forma estática com no HTML o h mundo agora a gente apagou Não tem nada aqui de conteúdo textual dentro dele o comando no JavaScript a gente vai colocar o ponto e vai colocar text content E qual vai ser a frase que a gente quer adicionar a gente vai colocar aqui depois do igual olá mundo e o entre aspas também então eu sei que é difícil gente de olhar esse comando em primeiro momento mas eu acho que dá para entender passo a passo o que que está acontecendo temos a tag script dentro dela a gente adiciona código JavaScript não tá escrito em HTML vocês vem que não tem tag não tem nada e aqui a gente tá colocando o comando pega o documento HTML que a gente tem ponto pegue o elemento que tem o ID Olá que no caso é o H1 E aí a gente vai inserir um conteúdo de texto que vai ser esse há eu vou salvar e vamos ver o que que vai acontecer na nossa página tchã a gente conseguiu inserir uma frase usando JavaScript no nosso elemento HTML H1 mas porém Todavia que que mudou né Tipo a gente teve que escrever esse Ola Mundo de forma estática aqui também seria muito mais fácil a gente só escrever aqui olá mundo no HTML o JavaScript ele surge para resolver esse problema a gente não ter que ficar escrevendo de forma estática aqui nas nossas linhas dos comandinho Então a gente vai ter que aprender agora nessa aula já um conceito importantíssimo do JavaScript que surgiu pra gente não precisar mais ficar escrevendo toda a frase que a gente quer usar ou frase ou número que são as variáveis as variáveis elas são espaços dentro da memória do nosso programa que a gente vai dar um nome para poder guardar alguma informação e essa informação vai poder ser acessada e manipulada ao longo do código inteiro beleza vamos entender isso na prática porque na teoria ficou mais ou menos vamos supor que ao invés de só Escrever olá mundo eu quero escrever o nome da pessoa que está acessando a minha página como que a gente faz isso por mais que o olá mundo seja algo estático para todo mundo o nome da pessoa é variável Então a gente vai ter que criar uma variável para receber esse valor Dependendo de quem Tá acessando nesse momento a gente vai também Eh escrever o nome da pessoa aqui no nosso programa né porque a gente não ainda não tá vendo a parte de interação do usuário com a página mas isso daí eu acho que vai ficar pro próximo vídeo já mas vamos entender como que a gente declara D valor e d nome para uma variável Então antes do nosso comando que vai ser onde a gente vai escrever o nome da pessoa né que a gente vai usar a variável a gente vai declará-la então para isso a gente vai escrever let é a primeira palavra quando a gente quer declarar uma variável quando a gente quer criar uma variável aí no nosso programa em seguida a gente coloca o nome que a gente quer dar para essa variável o nome que a gente quer dar para esse espaço na memória onde a gente vai guardar a informação do nome da pessoa então eu vou colocar nome né o nome da minha variável vai ser nome e aí eu vou dar o valor para essa variável para isso eu coloco o sinal de igual que vai ser um sinal que a gente chama de atribuição nesse momento a gente está atribuindo um valor pra variável a gente coloca entre aspas e o nome da pessoa no meu caso eu vou colocar aqui o Rafaela recapitulando então o que que tá acontecendo estamos criando uma variável isso diz pelo nome let ali no começo a gente tá dando um nome nome para essa variável e o valor dela é Rafaela a gente então criou um espacinho na memória do nosso programa chamado nome dentro desse espacinho na memória a gente colocou o valor Rafaela em texto Então sempre que a gente quiser usar a palavra Rafaela que agora a gente já sabe que é o nome da pessoa a gente pode acessar essa variável usando o nome da variável que é nome então a gente não precisa vir aqui e colocar Olá Rafaela de forma estática a gente vai poder colocar Olá nome e aí o nome vai dizer qual é o nome da pessoa que tá acessando a página entendeu é por isso que o JavaScript é tão poderoso porque agora a gente não precisa mais ficar preso a textos estáticos a gente pode usar valores completamente variáveis vamos testar então eu vou salvar aqui vamos lá para o nosso navegador ué tá escrito Olá nome né porque foi na verdade o que eu escrevi mas poxa eu escrevi nome o nome não é o nome da variável e para usar o valor da variável a gente não coloca o nome dela sim mas tem um porém quando a gente coloca entre aspas ele vai interpretar isso tudo como um texto ele não vai achar que o que tá escrito aqui dentro é uma variável a gente precisa tirar desses dessas aspas a nossa variável para ele entender que é uma variável mesmo então eu vou tirar as aspas daqui vou tirar o nome e o que que eu vou fazer eu vou deixar o Olá porque o olá ele ainda é um texto estático e aí eu vou colocar o sinal de mais e eu vou colocar o nome da variável sem aspas sem nada porque agora como a gente declarou essa variável ela virou uma palavra dentro do meu programa importante que nem let aqui a gente não precisa colocar aspas que nem documente a gente não põe aspas não coloca nada agora o nome também já tá sendo acessado Sem essas aspas e esse Mais é para juntar esse texto com o valor dessa variável Vou salvar e vamos ver o que vai acontecer olha só ele já voltou para mim Olá Rafaela mas tá tudo junto que que eu posso fazer aqui para arrumar isso eu posso colocar um espaço aqui antes de fechar as aspas do olar aí ele vai acionar esse espaço antes de colocar o nome Rafaela e olha só agora tá tudo certo e uma coisa interessante gente de variáveis é que elas podem variar o valor então se agora eu quiser dar olá para outra pessoa né vamos supor outra pessoa entra na minha página ela interage com a minha página coloca o nome dela de alguma forma tal e agora eu quero colocar que o nome da pessoa para quem eu quero dar oi agora vai ser Giovana que que eu faço eu crio de novo let nome igual Giovana não a variável a gente só declara uma vez Então a gente só escreve uma vez esse let e aqui coloca o nome da variável a partir de agora quando a gente quiser mudar o valor de uma variável a gente vai apenas colocar o nome da variável que a gente quer mudar e o novo valor então vou colocar Giovana Aqui vou salvar vem pro navegador e olha só ele já mudou Olá Giovana beleza tá aqui pessoal vamos então exercitar mais um uma vez agora com um projetinho ainda mais interessante de página Web dessa vez eu já vou dar pronto o HTML e o CSS a gente vai apenas escrever o código JavaScript para poder treinar assim a gente não vai perder tempo aí com essas e outras tecnologias que a gente já aprendeu Em outro momento Vocês ainda vão aprender e Lógico eu vou deixar os códigos aqui na descrição para vocês já poderem também acompanhar a aula então pode pausar o vídeo pode clicar aqui embaixo copiar o código e colar aí no seu arquivo index.

html. gz Vou salvar vou clicar aqui em go Live novamente vamos ver como que tá olha só tem o título boas-vindas O title da página página inicial aqui também aparecendo deixa eu dar um zoom aqui né para ficar um pouco mais claro Aí temos o parágrafo vamos personalizar sua saudação usando JavaScript e aqui a div olá visitante vamos adicionar o CSS para ficar um pouquinho mais bonita essa página vou criar um novo arquivo vou colocar style. css como nome e vou colar os estilos também que vão estar aqui na descrição então vou chegar vou colar tem bastante coisa aqui não precisa focar nisso agora se você quer depois de estudar CSS dá uma olhada ver se você entende também com as aulas que já tem aqui no canal Mas o que eu posso dizer é que a gente precisa para interagir com o CSS criar algumas classes né então a gente vê aqui no CSS que a gente tem tag B tag H1 tag P mas tem algumas classes tem essa aqui ponto container e tem essa aqui ponto saudação também então vamos lá no nosso HTML essa ponto container ela é adicionada aqui na nossa div vocês viram que tem uma div que é um contêiner de todos os outros elementos dos outros conteúdos Então como que a gente Adiciona uma classe ela é um atributo que nem o ID então a gente coloca aqui Class em inglês e vai colocar o nome contêiner sem o ponto aqui dentro das aspas a gente também tinha aqui a outra classe que é a saudação e essa saudação vai ser aqui uma classe dentro da div container que vai ser aqui a classe saudação Vou salvar vamos ver como que tá Opa ainda não mudou por quê Porque a gente escreveu o HTML escreveu CSS tá tudo bonitinho mas a gente não linkou o nosso CSS no HTML eu vou colocar então aqui esse link dentro do R né Sempre que a gente quer linkar o CSS de uma página com HTML de outra a gente coloca dentro do Red o link e eu escrevi link aqui ele já veio o emet com esse essa opção de 2.

CSS vai ser essa que eu vou querer eu vou clicar aqui e ele já autocompleta como o nome do meu arquivo de CSS style.