Exercícios JavaScript (Parte 1) - Curso JavaScript

Se você viu o título desse vídeo e nesse exato momento você pensou: "ah mais a aula é só de exercício, não vai ter conteúdo". Na verdade exercício um dos conteúdos mais importantes mas eu não preciso te convencer disso agora não e pensando nesse tipo de atitude que muitos alunos têm, eu estou dizendo exatamente no início do vídeo, vai ter conteúdo novo durante a resolução dos exercícios justamente para acabar com essa idéia de que o exercício é só exercício, vamos colocar pra funcionar as duas atividades que a gente vai fazer a partir de agora. A primeira atividade é a seguinte: um site bonitinho com interatividade, na verdade esse aqui não tem interatividade com o usuário e sim com o sistema, porque no momento são 9:51 da manhã e ele está mostrando que são 9 horas, você vê que a gente colocou aqui uma foto do amanhecer, a cor está mais ou menos pro dia, vou simular a passagem de horas, vou colocar 14 horas da tarde, então atualizando aqui se por 14 horas da tarde você já vê que está numa outra cor, uma outra imagem de entardecer, agora são 14 horas e se tiver de noite por exemplo, chegou à 21 horas da noite, são 21 horas a foto está mais noturna, a cor de fundo já está mais escura e isso tudo, essa configuração vai depender da hora do relógio que tiver no sistema, vou te ensinar como fazer isso, inclusive mudando cores dinamicamente como você viu acabando de acontecer, só que não é só esse exercício não, a gente tem o verificador de idade, vou colocar o ano de nascimento, nasceu no ano 2000 e é mulher, nasceu em 2000 e é mulher, é uma mulher de 19 anos, se for por exemplo em 1995, masculino, é um homem com 24 anos, se foi em 1960 feminino, é uma mulher com 59 anos e por aí vai e se eu colocar uma data invalida, por exemplo 2050, 2050 ainda nem chegou, olha lá," verifique os dados e tente novamente", se por acaso eu apagar o ano e tentar calcular, masculino, mas não digitei o ano, deu erro de novo, "verifique os dados e tente novamente", então esse nosso programa além de calcular a idade baseado no ano atual do sistema (do relógio), também vai carregar essa imagem de forma dinâmica utilizando JavaScript e outra coisa que a gente vai fazer, é esse layout bonitinho em HTML5 e CSS3, tudo passo a passo, tudo coordenado para que você tenha o melhor aprendizado possível e testando a maioria das coisas que a gente aprendeu até aqui no seu curso de JavaScript.

E por favor hora de achar que vídeo de exercício é "só exercício", eu vou provar isso pra você a partir de agora. Legendas: Tainá Bandeira Olá pequeno Gafanhoto, seja bem vindo a mais uma aula aqui do seu Curso em Vídeo de JavaScript totalmente patrocinado pelo Google! O meu nome é Gustavo Guanabara, eu sou professor e como você acabou de ver ali no início do vídeo, nós chegamos a uma parte muito importante que é a parte de colocar em prática aquilo que a gente aprendeu até o momento, a hora de praticar, ela é muito importante para todo mundo na hora de aprender qualquer coisa, eu arrisco dizer ela é até mais importante do que só assiste a aula, se você está nesse momento pensando assim: "ah não mas esse vídeo é só exercício, eu vou pular ele", não pula, vai por mim e não pula, até porque eu vou te ensinar um monte de coisa nova, já que muita gente pensa que aula de exercício não vai aprender nada, então assiste até o final esse momento de exercício, faz aí na sua casa, não adianta nada também você só assistir, afinal, está escrito aqui do lado, não está escrito "Hora de assistir", está dizendo aqui "Hora de praticar".

Então você assiste mas vai colocando em prática no seu computador e antes de começar a parte de JavaScript, eu vou propor um modelo de site, já que a gente vai fazer em forma de site e esse curso é pra isso, vou montar um modelo de site, dá uma olhada aqui, a gente vai ter uma área que eu vou pintar de azul, o site inteiro vai ficar azul, logo no topo eu vou ter um título, na parte de baixo a gente vai ter um rodapé que vai colocar só copyright, alguma coisa assim e no meio a gente vai colocar uma área onde a gente vai colocar o exercício para funcionar, você viu isso funcionando e é muito importante você planejar a estrutura do seu site antes de começar a fazer, então nós vamos colocar assim: essa área de fora é o corpo do nosso site, talvez se você não tenha feito o curso de HTML 5 com a gente, talvez você tenha uma pequena dificuldade com isso mas é só seguir os passos que a gente vai fazer aqui e no momento oportuno quando estiver mais liberado de estudo, dá uma assistida, clica aqui em cima, a 2º playlist é sempre o curso de HTML5 com CSS, são duas tecnologias muito importantes para você aprender. Então dentro do body eu vou ter o meu título como acabei de falar, meu título vai estar dentro de uma área de cabeçalho, que é um header, então vou colocar ali um header para fazer a área de cabeçalho, a parte de baixo como um rodapé a gente vai fazer um footer essa tag existe também no HTML5, se você não sabe relaxa, você vai prendendo momento oportuno e essa área do meio aqui onde a gente vai trabalhar vou criar uma section, eu poderia criar uma section ou um article (um artigo), mas achei mais coerente e colocar umas section e pra finalizar, dentro dessas sections a gente vai criar as <div> que são pequenas divisões que vão conter o nosso conteúdo, a do exercício vai ter uma quantidade já pré-definida de <div>, beleza? Então nesse vídeo a gente vai montar essa estrutura que está representada aqui do lado, inclusive vou pedir pros nossos queridos editores deixarem essa parte daqui pra gente ir montando o código e depois a gente vê o resultado por inteiro.

♫ Beleza, já estou com o Visual Studio aberto, o navegador aqui do lado provavelmente você não tá vendo porque tem a parte visual do planejamento do nosso site e nós temos dá aula 4 até aula 12, vou criar uma pasta nova, então vou vir aqui, "new folder", vou criar uma "aula12ex" vai ser a parte de exercícios e nessa pasta, eu vou criar um modelo, então eu vou criar aqui, "new file" e vou chamar de "modelo. html", já criei e nós vamos criar o nosso documento. E vamos criar: html5, o próprio Visual Studio já facilita a minha vida, vou colocar aqui pt-BR e vou "Modelo de Exercício", vai fazendo na sua casa tá, então eu tenho o corpo, você tá vendo lá no início da página, então tem um corpo, esse corpo eu vou ter a parte de header que é o cabeçalho, eu vou ter uma section e eu vou ter um footer.

Então eu criei um header, uma section e um footer, dentro do header eu vou criar um título, aqui embaixo no footer vou colocar um parágrafo chamado "Curso em Vídeo", posso colocar aquele sinal de copyright, apesar de não ser copyright. Vamos chamar de "copy", você vai colocar assim: "&coy;", tudo em minúsculas, tudo junto, então vai ficar aquele sinalzinho e aqui dentro dessa section eu vou ter <div>, vou fazer exatamente como está ali do lado duas <div>, só para a gente montar a nossa parte estrutural, então essa daqui da minha parte estrutural, o código está aparecendo e a estrutura aparecendo, você está vendo tudo bonitinho aqui. Outra coisa que vou fazer aqui em cima é criar o estilo, só que dessa vez, pra ter novidade eu vou criar o estilo em outro arquivo, vai ser um arquivo separado, para eu fazer isso é só eu fazer assim: link e escolher aqui o link:css, no link css vou chamar de: "estilo:css", então ele vai ser um arquivo externo, estilo.

css, se você segurar a tecla CTRL do seu teclado e clicar em estilo ele vai dar uma mensagem de erro, porque esse arquivo não existe e você tem uma opção de criar arquivo, está aqui embaixo, quando você criar o arquivo, ele já cria pra você, olha o macete, olha que coisa legal. Aqui eu consigo fazer as configurações, por exemplo do body, vou fazer também do section, vou colocar aqui em cima o header, do section e do footer, já vou fazer as configurações visuais de todos esses componentes, lembrando que CSS também tudo em letras minúsculas, aqui no body vamos colocar um background e vou colocar um blue, depois a gente configura o tom de azul, não gostei desse tom de azul, vou parar o mouse aqui em cima e escolher um tom de azul que seja mais bonitinho, vai ser esse azul aqui, ele já montou o código pra mim, outra coisa que configurar é a fonte global do meu documento vai ficar: normal 15pt arial, lembrando tem que colocar ponto e vírgula. Eu vou mostrar esse código que está sendo construído aqui diretamente no navegador, vou abrir o arquivo HTML, salvar tudo aqui, "File", "Save All" que é o CTRL+KS, então salvei todo mundo, no HTML você vai dar CTRL+Shifit+P e vai escolher "Watch in Chrome" que é um plug-in que a gente instalou a gente está usando direto.

Então está lá, ele já abriu, esse azul ficou meio roxo, vou dar uma modificada aqui, agora sim, ficou um azul mais bonito, como o arquivo está separado, você vai ter que dar CTRL+S para salvar ou "File", "Save" e vai ter que atualizar porque o arquivo separado e vai ter uma característica diferente. Então vou colocar aqui dentro da <div>,vou colocar aqui "testando" só pra aparecer alguma coisa, apareceu testando aqui, essa minha section, ela vai ser da cor branca, então vou ter que fazer o seguinte: a minha section vai ter um background branco, então vou colocar aqui "white" tem que salvar e atualizar, e ele ficou ali, "testando", vou colocar também pra ele ficar com as bodas arredondadas: "border-radius", que é o raio da borda, vou colocar 10px, você vai ver que quando eu atualizar ficou redondinho. Para dar espaço aqui dentro, vamos fazer um: "padding: 15px", ele já ficou aqui, na sua casa provavelmente você vai ter que ficar salvando e atualizando já que estamos trabalhando com arquivo externo, vou colocar largura fixa de 500px e vou centralizar ele na tela, se eu puxar aqui ele está exatamente com 500px, vamos salvar, a largura ficou com 500px, só que eu quero tudo no meio da tela, para eu centralizar aqui, eu vou colocar um "margin: auto", já centralizou, vou fazer o título e o rodapé ficar em brancos só então: header, vou fazer na verdade a cor da fonte ficar branco, não, não dá porque se eu colocar a cor branca aqui ele vai ficar branco, inclusive o testando está branco, então não dá pra colocar "color: white" aqui, só vai me dar mais trabalho e vai resolver menos, vou colocar aqui no section: "color: white" e vai ficar mais bonitinho.

Não, na section não, no header e no footer também, salvou, então ficou lá, também quero os dois centralizados, então: "text-aling: center"e aqui também "text-aling: center", já ficou centralizado,aqui eu vou querer itálico no footer então vou colocar aqui: "font-style: italic" e já ficou em itálico lá, outra coisa que eu vou fazer aqui no meio, no section é colocar uma sombrinha aqui embaixo, vamos fazer um box-shadow, vou colocar preto, vou colocar ele em 5px de deslocamento lateral, 5px deslocamento vertical, 10px de espalhamento (isso tudo eu explico no curso de HTML) e black que a cor. Então olha só qual é o resultado, vamos atualizar, está vendo? Ele ficou, só que ele ficou muito escuro porque ele está preto, uma dica que eu dou é: para o mouse em cima do black, vem aqui e arrastar essa barriga para baixo que é a transparência, coloca aproximadamente um pouco abaixo da metade, então agora ele vai fazer um rgba, uma transparência.

Vamos ver o resultado agora, olha como ficou bem mais discretinho, se você quiser menos sombra em vez de 5, vamos colocar 3 e 3, vai ficar um pouco mais discreto e você configura da maneira que você achar melhor. Então essa área é a configuração de estilo que está em outro arquivo para facilitar a nossa vida, então estou aqui com o modelo de exercício já criado, o testando está dentro da <div>, aqui eu tenho outra <div>, "olá", então ele vai fazer várias <div> e cada <div> vai conter um conteúdo pra mim, beleza? Então já está criado aqui do lado o modelo, vou diminuir pro código fica em evidência, então está aqui o meu código é esse daqui que está do lado da minha cabeça, tenho também o meu estilo esse estilo está sendo chamado por esse "estilo.

css" e agora por fim antes de terminar o código, antes do "/body" eu vou criar um script, só que eu vou começar a escrever o script e não vou escolher a primeira, vou escolhe "script: src" para os nossos JavaScript também estarem em arquivos separados. Então eu vou colocar: script: src e vou chamar de "script. js", da mesma maneira se você quiser criar esse script.

js, segura o CTRL, clica e ele vai dizer "não achei o arquivo script. js, você quer que eu crie? " e você dá "create" e ele já criou também o script, vamos colocar um alert aqui: ('olá').

Então eu vou salvar todo mundo, atualizei e ele já me deu o alert "olá", então vou atualizar de novo, olha ali, "olá" e vai me mostrar o conteúdo no site e esse "olá" veio desse arquivo aqui e dentro do HTML eu tenho a chamada do meu CSS externo e eu tenho a minha chamada do meu JavaScript externo e eu tenho dois arquivos o meu arquivo de estilo e meu arquivo de script, esse modelo aqui é o que a gente vai utilizar em todos os exercícios que a gente vai fazer a partir de agora, aqueles exercícios que você viu funcionando. ♫ Então esse vídeo ele serviu pra isso, pra você montar o modelo, no próximo vídeo a gente vai começar a resolução dos nossos exercícios que você viu funcionando no início desse vídeo, mas não deixa de criar esse arquivo que ele é muito importante pra você, já que sem ele a gente não tem estilo nosso site e convenhamos um site feio ninguém quer visitar. A gente se vê então no próximo vídeo, monta o seu modelo que a gente vai utilizar ele pra todos os exercícios a partir de agora e como sempre eu gostaria de sempre de pedir, aqui embaixo você se inscreve no canal, habilita as notificações, compartilha com o seu grupo da faculdade, no seu grupo do Facebook de desenvolvedores fala assim: "olhá só, dá uma olhada aqui, o cara está fazendo um curso de JavaScript com exercícios práticos está ficando bem legal, assiste também", não esquece também de dar um like para mostrar pro algoritmo do YouTube que você está gostando, habilita a sinetinha para você ser avisado sempre que sair um vídeo novo, porque esse canal não é só de curso JavaScript, tem um monte de vídeos, tem um monte de playlists, aqui em cima você vê algumas mas é só você visitar o nosso canal que é youtube.

com/cursoemvideo, acessar nossa área de playlists e você vai ver que tem muita coisa que a gente está produzindo há muitos anos. A gente se vê então no próximo vídeo pra colocar em prática tudo aquilo que você viu funcionando. Um grande abraço, boas práticas monta o seu modelo e até a próxima!