Exercícios JavaScript (Parte 2) - Curso JavaScript

Neste vídeo a gente vai fazer junto o exercício que está rodando aqui do lado, lembra se for 9 horas da manhã vai aparecer agora são 9 horas e o site todo bonitinho, organizadinho, coloridinho, já com a imagem da manhã, agora se for de tarde ele vai mostrar são 14 horas, vai mostrar a hora atual e vai colocar uma cor diferente, outra imagem, tudo personalizado colocado automaticamente assim que eu carrego o site. Agora se foi de noite ele também vai mudar a cor do fundo, vai mudar a imagem para uma imagem mais de noite e tudo também feita automaticamente. E esse código que está aqui ele usou como base o modelo que a gente criou no vídeo anterior, então se por acaso você ainda não fez a prática do vídeo anterior, não vai adiantar nada você assistir esse vídeo, então volta lá faz o seu modelo e volta que depois para botar seu exercício em prática.

Legendas: Tainá Bandeira Olá pequeno Gafanhoto, seja bem vindo a mais uma aula do seu Curso em Vídeo de JavaScript totalmente patrocinado pelo Google! O meu nome é Gustavo Guanabara, eu sou professor e agora a gente vai dar continuidade ao que a gente viu na aula anterior, no vídeo anterior a gente começou a colocar tudo em prática, fizemos o documento modelo agora nós vamos arrumar a casa para a gente poder criar os exercícios que a gente propôs, para você provar para você mesmo que você está aprendendo JavaScript, mas vamos sem delongas vamos arrumar a casa, o que a gente precisa é resolver aquele exercício do bom dia, boa tarde e boa noite com uma roupagem de site para ficar bonitão. Então já abre os arquivos que você criou na aula passada, se organiza e e vamos começar a trabalhar.

♫ A primeira coisa que a gente vai fazer é organizar os nossos arquivos, então abre o seu gerenciador de arquivos, seja ele qual sistema operacional que for, abre a sua pasta do Curso js que é a pasta onde você está guardando os arquivos pra essa aula aqui, dentro da aula 12ex eu tenho os arquivos que a gente criou na aula anterior, o que eu vou fazer aqui é organizar tudo isso dentro de uma pasta, então eu vou criar com o botão direito uma nova pasta e vou chamar de "Modelo", dentro desse modelo eu vou pegar todos esses arquivos, selecionei todos eles segurando o Shift ou pega cada um deles e arrasta pra pasta, já tem aqui o modelo, o que eu vou fazer é: pegar essa pasta e duplicar a ela, você no Windows pode dar CTRL+C e CTRL+V, eu tenho aqui "duplicar", vou renomear essa pasta, na aula 12 eu fiz até o exercício 13, vou chamar esse aqui de: "Exercício 14". Então vou renomear ela "Exercício014", aqui dentro do Exercício014, eu posso mexer com o que eu quiser, então eu tenho um estilo que prontinho e dentro do modelo eu tenho os arquivos em branco, então basicamente o que eu fiz foi duplicar isso tudo o que eu vou fazer aqui: é fazer um banco de imagem, o seu Google Chrome, entra no site do Google e digita: "pexels português", você vai acessar o site pexels. com/pt-br.

Enfim, vem aqui dentro desse site você vai procurar por exemplo "manhã", quero fotos da manhã pra gente poder pegar aqui, eu gostei desse aqui então eu vou abrir quando eu abrir, eu posso o mouse em cima daqui e pode salvar ele em qualquer tamanho, vou pegar aqui do tamanho médio, pode pegar qualquer tamanho, pra mim não faz sentido baixar esse arquivo grande, vou clicar em downloads e o arquivo vai baixar, ele vai baixar os arquivos, também vou vir aqui e digita tarde e vou pegar uma foto de tarde, essa aqui aqui no navio, passa o mouse em cima vou pegar o tamanho grande. Enfim, você vai baixar três fotos: uma da manhã, outra da tarde e outra da noite. Então vou vir aqui e "noite", vou pegar aqui uma foto de noite, essa aqui pra mim tá boa também, você escolhe o que for melhor, é importante dizer o seguinte, na Web nem todas as fotos são gratuitas, quando você faz uma busca no Google Imagens, nem todas as fotos do Google Imagens são gratuitas, na verdade várias delas não são, então o que eu recomendo é banco de imagem gratuita, o pexels é uma ótima opção para isso, olha, pexels.

com/pt-br pra você fazer uma busca em português. Agora o que eu vou fazer é abrir um editor de desenho qualquer, eu vou abrir o Photoshop, lembrando que o Photoshop requer a licença, a gente aqui no Curso em Vídeo tem a licença do Photoshop e vou abrir os meus três arquivos, vou vir aqui e "arquivo", "abrir" e abrir e vou abrir os três arquivos, então já estou com os três arquivos abertos: manhã, tarde e noite. O que eu vou fazer, você viu funcionando no início, eu vou fazer uma seleção redondinha para eu salvar isso aqui mais bonitinho, então fiz uma seleção redonda, vou colocar o enquadramento aqui, vou dar CTRL+C, "arquivo novo" (dei CTRL+N para ele criar um arquivo novo) e vou colar.

Esse aqui vai ser o meu arquivo da manhã, vou fazer a mesma coisa com as outras, esse aqui é o da tarde CTRL+C e CTRL+N e vou criar um arquivo da tarde, também vou pegar o arquivo da noite, bonita essa foto, vou colocar centralizado, CTRL+C e CTRL+N e está lá, então agora eu tenho noite, tarde e manhã tudo quadradinho, vou até fechar as imagens originais para não ficar enchendo de minha memória. Então eu estou com a foto da manhã, a foto da tarde e a foto da noite,outra coisa que eu vou ter que fazer é deixar todas as imagens transparentes, então eu vou apagar o plano de fundo, venho aqui na camada de plano de fundo e deleto pra ele ficar transparente, está vendo? Todas elas eu estou deletando, outra coisa que vou fazer é tornar todas elas do mesmo tamanho e como eu vou usar para Web, eu posso colocar ela de um tamanho pequeno, então eu venho aqui em "Imagem", "Tamanho da imagem" e vou fazer o tamanho da imagem invés de 690 por 690, vou colocar: 250 por 250, todas elas vou fazer a mesma coisa, vou mudar o tamanho dessa pra 250 e vou mudar o tamanho dessa pra 250, é importante que para Web você gere os arquivos pequenos, se não você vai ter grandes problemas pra trabalhar com imagens.

Então estou com as três imagens aqui e vou salvar pra Web, vou no Photoshop: "Arquivo", "Exportar", "Salvar para Web", todas elas eu vou fazer salvar para Web, ele vai perguntar qual o formato eu vou escolher PNG, PNG 24 que é um dos melhores formatos para Web e eu vou mandar salvar e eu vou salvar aonde? Naquela aula, no exercício 14, então vou salvar essa da manhã, então vou chamar de (tudo em minúsculas): "fotomanha" sem espaço, sem assento, sem nada, recomendo que seja tudo em letras minúsculas e sem nada de assento. Esse aqui também já mudei, vou salvar para Web no formato PNG, na mesma pasta, eu tenho foto manhã, essa daqui minha foto tarde então chamar de "fototarde", pode fazer isso com qualquer editor de desenho para não precisa ser o Photoshop e eu tenho o da noite aqui, vamos salvar também salvar para web, "fotonoite".

Beleza, já tenho todas elas vou fechar meu Photoshop porque eu não quero mais usar e na aula do Exercício 14, eu já tenho a foto da manhã, a foto de tarde e a foto de noite, tudo png e tudo em minúsculas. Agora nós vamos começar a trabalhar, vou abrir o meu Visual Studio Code, já estou com a pasta aberta e você vê que já tem um Exercício 14 e o modelo, do modelo vamos deixar guardado aqui, no Exercício 14, vamos abrir o arquivo principal, o arquivo HTML, vamos abrir o arquivo JavaScript e vamos abrir o arquivo CSS, estou com os três arquivos abertos, vou mandar abrir o Google Chrome e aqui vou dar um CTRL+Shifit+P e apertar em "whatch in chrome", já tem o modelo. Vamos organizar aqui, vou deixar aberto e vamos abrir o navegador aqui do lado, vamos dar uma organizada aqui.

Já estou com os arquivos abertos dentro do exercício eu não abri o modelo, eu abri a pasta do exercício 14 que é esse que a gente está fazendo agora, vou dar encolhida aqui para organizar e eu vou tirar esse "testando" e vou tirar o "olá". Aqui no título eu vou colocar "Hora do Dia" e o meu título do site vai ficar "Hora do Dia" só pra gente ficar com exercício bonitinho, vamos fazer o seguinte aqui, vou colocar aqui: "Aqui vai aparecer a mensagem" é só pra gente poder se situar e aqui nessa <div> vamos dar um ID pra ela, vou chamar de "msg" e essa segunda <div> eu vou mudar o ID dela e vou chamar de "foto", dentro dessa <div> da foto, vou criar um img, ele cria o "src" e o "alt", esse src eu vou chamar de "fotomanha. png", ele já te ajudou aqui, só pra ele carregar uma imagem pra gente poder organizar tudo bonitinho, então aqui vai aparecer a mensagem e aqui vai aparecer na foto.

Então vamos lá, então eu tenho a <div> img, no meu img, eu também vou colocar um ID nele, vou chamar de "imagem", então eu tenho msg que é uma <div> e eu tenho imagem que é um img, vou colocar aqui "foto do dia"esse "alt" é para texto alternativo, vamos salvar e vamos rodar, vamos começar a programar meu JavaScript. Eu vou ter que criar um objeto para esse daqui, pro "Aqui vai aparecer essa mensagem" que no caso do meu HTML, ele tem a ID "msg", então vou criar aqui: var (vou até usar o mesmo nome), var msg = window. documents.

getElementsById ('msg') do meu HTML, também vou ter o img = window. documents. getElementsById ('foto').

Então eu tenho o meu ID msg e eu tenho o meu ID imagem, então eu tenho esses meus dois objetos. Vamos fazer o seguinte, vamos colocar esse código dentro de uma function que vai ser chamado carregar, então essa minha function vai carregar, vou jogar esses códigos aqui pra cá pra dentro, só arrastei e ele vem pra cá, então eu tenho o meu código aqui no carregar, para carregar eu vou te fazer o seguinte aqui também, vou ter que pegar a data atual que é o "new date" (nós vimos isso durante a aula) e eu vou pegar a hora atual vai ser a data. getHours, então já tenho a hora atual, no "aqui vai aparecer a mensagem", eu vou colocar: msg.

innerHTML = `Agora são $ (hora) horas" ` vamos ver se vai funcionar, pra eu rodar esse "carregar" aqui quando a página carregar, eu vou vir aqui no meu HTML e no body e vou colocar: onload = ('carregar'), isso é, quando eu carregar eu vou chamar o código carregar. Salvei todos os arquivos, vou atualizar, "Agora são 18 horas", exatamente são 18:25 no momento que eu estou gravando esse vídeo, então agora são 18 horas. Falta agora no JavaScript eu mostrar a imagem certa aqui, pra isso vou fazer um if: if (hora >=0 && hora <12), isso é se ela estiver entre 0 hora e meio dia, é bom dia vou colocar aqui "BOM DIA!

", vou colocar um comentário: else if (hora >= 12 && hora < 18) é "BOA TARDE". Senão se ela estiver acima de 18 e abaixo de 0 (que já está implícito) eu vou mandar um "BOA NOITE! ".

Então beleza, pra eu fazer o "bom dia" eu vou carregar a imagem aqui dentro e eu já tenho o meu objeto img, então é só fazer assim: img. src = e eu tenho o nome do meu arquivo, o meu arquivo padrão é o foto manhã, só que o seguinte, se for de bom dia a minha foto é a "fotomanha. png", se for de tarde, meu img vai ser (tem que colocar o nome que você salvou) "fototarde.

png", se for de noite: img. src = 'fotonoite. png'.

Salvei, atualizei, "Agora são 18 horas" ele mostrou a foto da tarde, vamos fazer o seguinte, vamos fazer um teste, vou colocar esse "hora"como comentário e vou forçar pra 8 horas da manhã, salvei e atualizei, olha são 8 horas, está de manhã, se for 12h, "são 12 horas, boa tarde", se for 22 horas, é de noite, "são 22 horas, boa noite". Aqui ele não está incluindo 18h mas se você quiser incluiu 18h é "<=" que aqui são 18 horas e é "boa tarde", depende do que você vai escolher, outra coisa que a gente vai fazer é mudar a cor do fundo dinamicamente, você viu lá no início como é que muda a cor de fundo e para isso eu vou precisar do Photoshop de novo, então vou abrir aqui a foto manhã, a foto tarde e a foto noite, vou abrir no Photoshop, eu estou com as três fotos aqui, eu vou pegar uma cor que seja legal de cada uma delas e vou usar no fundo, pra eu fazer isso eu vou abrir o Photoshop, vou vir aqui do lado e vou usar esse conta gota, quando eu clico com o conta gota eu escolho uma cor, é só arrastar, eu estou segurando o botão do mouse e arrastando, vou escolher uma cor legal que vá condizer com o "bom dia", vou usar esse amarelo, quando eu solto o amarelo ficou aqui em baixo, vou clicar nele e vou pegar o código, esse código hexadecimal "e2cd9f", vou copiar e vou vir aqui e vou fazer o seguinte: de manhã vou fazer um documents. body.

style. background = '#e2cd9f' Vamos fazer um teste de manhã se for 9 horas da manhã, atualizei e ele já ficou são 9 horas, ficou de uma cor mais para de manhã, vamos fazer a mesma coisa de tarde, na foto da tarde essa aqui, já estou com o conta gota e vou escolher uma cor que esteja aqui na foto e que tenha alguma coisa a ver com de tarde, esse laranja aqui, vou clicar aqui no quadrado e vou copiar o código da cor também, vou voltar e vou fazer a mesma coisa com o de tarde, não copia o código, digita o seu código, body. style.

background = '#b9846f'. E vamos fazer a mesma coisa pra noite vou pegar a lupinha da noite e vou pegar uma cor que fique boa pra noite, acho que esse que está bom, vou copiar o código (CNTRL+C) e vou fazer a mesma coisa pra de noite: documents. body.

style. background = '#515154' salvou de noite vamos fazer os testes aqui, se for de manhã 9 horas está funcionando, se for 13 horas que é de tarde,já vai ficar de tarde, está vendo? Já ficou mais bonitinho, se for de noite 22h, salvei e atualizei de noite também está, então está funcionando para tudo, claro que eu estou forçando, vou retirar e deixar para ele pegar a hora atual, agora são 18 horas ainda está de tarde, está no final da tarde aqui pra mim.

E pra finalizar, você viu funcionando, vamos arrumar essa bagunça que está tudo colado na esquerda, vamos colocar tudo centralizado pra isso olha só: ambos os componentes são <div>, são duas <div>, eu posso vir aqui dentro do meu CSS e colocar aqui um seletor para <div>, a minha <div> vai ter um: text-align; center; salvei, atualizei já está aqui, vou dar um espacinho dentro dessa <div> também, vou colocar aqui: padding: 5px, acredito que esteja de bom tamanho. Atualizei, vou colocar um pouquinho mais, vou colocar 8, atualizei e agora tá direitinho, vamos fazer o teste para todos os horários? Vou vir aqui no JavaScript e vou fazer assim: a hora vai ser 2 horas da manhã, são 2 horas da manhã e está bonitinho, 14 horas, são 14 horas, 20 horas, são 20 horas.

Então o nosso código de Javascript é esse daqui, no caso o estilo CSS eu modifiquei um pouquinho e aqui no modelo eu acrescentei a mensagem que vai aparecer que nem aparece mais esse texto, porque ele puxa no onload, ele puxa o carregar que é o meu código JavaScript para poder fazer o bom dia, o boa tarde e o boa noite que está aqui, na verdade ele nem apareceu a mensagem "bom dia", "boa tarde" e "boa noite", mas tá aqui todo o código necessário para fazer esse site funcionar. ♫ E apenas lembrando caso seu código não esteja funcionando não entrar nessa de falar assim: "Ah Guanabara, eu fiz igualzinho seu e não funcionou", se tivesse igualzinho estaria funcionando acabei de mostrar, às vezes é uma letra maiúscula, é uma letra que fica faltando, pausa o vídeo e faz igualzinho que com certeza vai funcionar, não se esquece que a qualquer momento você pode clicar com o botão direito do mouse no seu Google Chrome, escolher um inspetor e o inspetor vai te dizer quais são os erros que foram encontrados na página, nem sempre o inspetor mostra o erro, mas você pode analisar o seu código e ver em que momento aconteceu a sua falha. E não se engane você vai falhar muito no início, no início é muito comum as falhas, mas se você persistir, se você insistir com certeza você vai aprender a desenvolver em JavaScript.

Eu me despeço por aqui com o primeiro exercício resolvido e no próximo vídeo a gente vai resolver o próximo exercício que é muito parecido com esse, só que você precisa da interatividade do usuário com alguns controles HTML. Um grande abraço, boas práticas e até a próxima!