Exercícios JavaScript (Parte 3) - Curso JavaScript

Verificador de Idade

Visão Geral da Seção: Nesta seção, o professor Gustavo Guanabara introduz um exercício de verificação de idade usando JavaScript. Ele explica que o exercício consiste em detectar a idade e gênero de uma pessoa com base no ano de nascimento fornecido.

Configurando o Exercício

• Exemplo 1: Homem nascido em 1999, resultando em um homem com 20 anos.

• Exemplo 2: Mulher nascida em 1945, resultando em uma mulher com 44 anos.

• Exemplo 3: Homem nascido em 2015, resultando em um menino de 4 anos.

• Legendas por Rayssa Victoria.

Introdução ao Exercício

• O professor incentiva os alunos a criarem suas próprias soluções para os exercícios apresentados.

• Destaca a importância de praticar e não apenas assistir aos vídeos.

• Encoraja os alunos a provar para si mesmos que são capazes de resolver os exercícios.

Preparação do Ambiente

• Abre o Visual Studio Code e copia o modelo do exercício anterior para criar o novo exercício.

• Renomeia o exercício para "ex015" e abre os arquivos HTML, CSS e JavaScript relacionados.

• Explica que o arquivo de estilo não será modificado neste exercício.

Preparação das Imagens

• Abre o site pexels.com/pt-br/ para buscar imagens relacionadas ao exercício.

• Realiza uma busca por "jovem" e seleciona várias fotos de pessoas jovens.

• Mostra as diferentes categorias de fotos disponíveis (adulto, bebê, idoso, jovem).

• Copia as imagens selecionadas para a pasta do exercício 15 e redimensiona-as para 250x250 pixels.

Estrutura do Exercício

• Adiciona um formulário de entrada no topo da página e uma div vazia com ID "res" para exibir o resultado.

• Atualiza o título da página para "Verificador de Idade".

• Inicia a criação do código JavaScript dentro do arquivo correspondente.

Note que alguns trechos foram omitidos por não conterem informações relevantes ou apenas música.

Coleta de Dados

Visão Geral da Seção: Nesta seção, o palestrante discute a coleta de dados em um formulário HTML.

Criação do campo de sexo

• O palestrante cria um campo de seleção de sexo usando o elemento <input type="radio">.

• Ele define o nome do campo como "radsex" e atribui o ID "masc" para a opção masculina.

• Em seguida, ele cria uma label com o texto "masculino" e atribui o ID "mas".

Definindo opções padrão

• Para facilitar a seleção, o palestrante adiciona a propriedade checked à opção masculina, fazendo com que ela apareça marcada por padrão.

• Ele também cria outra opção feminina com o ID "fem" e adiciona uma label correspondente.

Adicionando botão ao formulário

• O palestrante adiciona um botão ao formulário com a mensagem "Verificar".

• Ele define um evento onclick para chamar uma função chamada "verificar".

Estrutura do Formulário HTML

Visão Geral da Seção: Nesta seção, é apresentada a estrutura básica do formulário HTML.

Divisões no formulário

• O palestrante mostra as duas divisões principais do formulário: uma para o ano de nascimento e outra para o sexo.

• Ele destaca que essa estrutura é simples e pode ser aprendida em cursos de HTML5.

Disparando JavaScript no clique do botão

Visão Geral da Seção: Nesta seção, o palestrante explica como disparar uma função JavaScript ao clicar no botão do formulário.

Adicionando evento onclick

• O palestrante adiciona o atributo onclick ao botão para chamar a função "verificar" quando ele for clicado.

• Ele define a função "verificar" no script e adiciona um alerta simples para testar se está funcionando corretamente.

Obtendo dados do formulário

Visão Geral da Seção: Nesta seção, o palestrante mostra como obter os dados inseridos pelo usuário no formulário.

Obtendo o ano atual

• O palestrante cria uma variável chamada "data" e atribui a ela um novo objeto Date().

• Em seguida, ele usa o método getFullYear() para obter o ano atual e armazena na variável "ano".

Acessando elementos do formulário

• O palestrante utiliza o método getElementById() para acessar os elementos do formulário.

• Ele obtém o valor digitado no campo de ano de nascimento usando o ID "txtano" e armazena na variável "Fano".

• Também obtém a div onde será exibido o resultado usando o ID "res" e armazena na variável "res".

Validação dos dados inseridos

Visão Geral da Seção: Nesta seção, é mostrada a validação dos dados inseridos pelo usuário antes de realizar qualquer processamento adicional.

Verificando se o ano é válido

• O palestrante verifica se o campo de ano está vazio ou se o valor digitado é maior que o ano atual.

• Se alguma das condições for verdadeira, ele exibe uma mensagem de erro usando um alerta.

Processamento dos dados

Visão Geral da Seção: Nesta seção, é mostrado o processamento dos dados inseridos pelo usuário após a validação.

Verificação bem-sucedida

• O palestrante adiciona um bloco else para tratar o caso em que os dados são válidos.

• Por enquanto, ele exibe apenas uma mensagem "tudo ok" para indicar que a verificação foi bem-sucedida.

Conclusão da validação dos dados

Visão Geral da Seção: Nesta seção, o palestrante conclui a validação dos dados e faz algumas observações finais.

Avaliação dos dados

• O palestrante explica que a verificação anterior avalia se o campo de ano está vazio ou possui um valor maior que o ano atual.

• Ele menciona que essa parte do código pode ser melhorada para incluir conversões explícitas de tipos, mas no momento funciona corretamente.

Observações finais

• O palestrante destaca a importância de fazer testes passo a passo e não tentar digitar todo o código antes de verificar sua funcionalidade.

• Ele ressalta que criar formulários HTML é fácil, especialmente com ferramentas como Visual Studio Code.

• Ele encerra a seção mencionando que falta adicionar mais funcionalidades ao código JavaScript.

Seleção de gênero e marcação de checkboxes

Visão geral da seção: Nesta parte do vídeo, o instrutor explica como lidar com a seleção de gênero em um formulário. Ele aborda a marcação de checkboxes masculino e feminino e como garantir que apenas uma opção seja selecionada.

Selecionando checkboxes com nomes diferentes

• Se os checkboxes tiverem nomes diferentes, é possível marcar ambos ao mesmo tempo.

• Para resolver esse problema, é necessário atribuir o mesmo nome aos checkboxes masculino e feminino.

Acessando elementos pelo nome

• Utilize document.getElementsByName para acessar os elementos com o mesmo nome.

• No exemplo dado, o nome utilizado é 'radsex'.

Identificando as opções selecionadas

• Ao utilizar document.getElementsByName('radsex'), serão retornados dois elementos: radsex 0 (masculino) e radsex 1 (feminino).

• É possível verificar qual opção foi selecionada através das posições dos elementos no array retornado.

Cálculo da idade

Visão geral da seção: Nesta parte do vídeo, o instrutor demonstra como calcular a idade com base no ano atual e no ano digitado pelo usuário.

Cálculo da idade

• Antes de calcular a idade, verifique se o valor digitado está correto.

• A fórmula utilizada para calcular a idade é: ano atual - ano digitado.

Exibindo a idade calculada

• Utilize res.innerHTML para exibir a idade calculada na página.

• O texto pode ser formatado utilizando crases (`) para inserir variáveis dentro da string.

Tratamento de erros e testes

Visão geral da seção: Nesta parte do vídeo, o instrutor destaca a importância de realizar testes e verificar possíveis erros no código.

Testando o programa aos poucos

• É recomendado testar o programa gradualmente, inserindo os dados passo a passo.

• Isso permite identificar e corrigir erros mais facilmente.

Verificando erros no console do navegador

• Caso o programa não esteja funcionando corretamente, é possível utilizar a opção "Inspect" do navegador para verificar se há algum erro no console.

Identificação do gênero selecionado

Visão geral da seção: Nesta parte do vídeo, o instrutor explica como identificar o gênero selecionado pelo usuário e exibir essa informação na página.

Criando uma variável para armazenar o gênero

• Crie uma variável chamada 'gênero' para armazenar o valor correspondente ao gênero selecionado.

• Inicialize essa variável com uma string vazia.

Verificando a opção selecionada

• Utilize if e else if para verificar qual opção foi selecionada (masculino ou feminino).

• Atribua à variável 'gênero' o valor correspondente ('Homem' ou 'Mulher') de acordo com a opção selecionada.

Exibição do resultado e centralização

Visão geral da seção: Nesta parte do vídeo, o instrutor mostra como exibir o resultado na página e centralizar o texto utilizando JavaScript.

Exibindo resultado na página

• Utilize res.innerHTML para exibir o resultado na página.

• Utilize a sintaxe de template string (entre crases) para inserir variáveis dentro do texto.

Centralizando o texto

• Utilize res.style.textAlign = 'center' para centralizar o texto na página.

Adicionando uma imagem dinamicamente

Visão geral da seção: Nesta parte do vídeo, o instrutor ensina como adicionar uma imagem dinamicamente à página utilizando JavaScript.

Criando um elemento img

• Utilize document.createElement('img') para criar um elemento img.

Definindo atributos do elemento img

• É possível definir atributos para o elemento criado, como id, utilizando setAttribute.

Carregando imagens de acordo com gênero e idade

Visão geral da seção: Nesta parte do vídeo, o instrutor explica como carregar imagens diferentes de acordo com o gênero e a idade selecionados pelo usuário.

Verificando faixas etárias

• Utilize estruturas condicionais (if, else if) para verificar em qual faixa etária a pessoa se encontra.

• Defina as condições de acordo com as faixas desejadas (criança, jovem, adulto, idoso).

Conclusão e finalização

Visão geral da seção: Nesta parte final do vídeo, o instrutor conclui a implementação do formulário e destaca a importância de testar gradualmente e verificar possíveis erros no console. Ele também menciona que é possível estilizar a página utilizando CSS.

Estrutura condicional para verificar a idade

Visão geral da seção: Nesta seção, o instrutor mostra como usar uma estrutura condicional para verificar a idade de uma pessoa e atribuir uma categoria correspondente.

Verificação de idade

• Se a idade for maior ou igual a 0 e menor que 10, a pessoa é um bebê.

• Se a idade estiver entre 10 e 20, a pessoa é jovem.

• Se a idade estiver entre 21 e 50, a pessoa é adulta.

• Caso contrário, se não estiver nas faixas anteriores, a pessoa é idosa.

Copiar e colar código com cuidado

Visão geral da seção: Nesta seção, o instrutor destaca a importância de ter cuidado ao copiar e colar código durante o desenvolvimento.

Cuidados ao copiar e colar código

• Preste atenção ao copiar e colar código.

• Salve todos os arquivos antes de prosseguir.

• Tome cuidado para não introduzir erros acidentais no código.

Adicionando imagens dinamicamente

Visão geral da seção: Nesta seção, o instrutor demonstra como adicionar imagens dinamicamente usando JavaScript.

Adição de imagens dinamicamente

• Use setAttribute para definir o atributo src da imagem.

• Adicione a imagem ao documento usando appendChild.

• Verifique se a imagem está na mesma pasta do arquivo HTML.

Exibindo imagens de acordo com o gênero

Visão geral da seção: Nesta seção, o instrutor mostra como exibir imagens diferentes com base no gênero e idade da pessoa.

Exibição de imagens por gênero

• Verifique o sexo da pessoa e selecione a imagem correspondente.

• Certifique-se de que as imagens estejam corretamente nomeadas e na mesma pasta.

• Atualize a página para ver as imagens sendo exibidas corretamente.

Importância dos exercícios práticos

Visão geral da seção: Nesta seção, o instrutor destaca a importância de realizar exercícios práticos para aprender programação.

Importância dos exercícios práticos

• Realizar exercícios práticos é essencial para aprender programação.

• Apenas assistir vídeos não é suficiente para dominar as habilidades necessárias.

• Os exercícios ensinam na prática conceitos importantes que não são abordados apenas nas aulas teóricas.

Próximos passos: Estruturas de repetição

Visão geral da seção: Nesta seção final, o instrutor menciona que o próximo vídeo abordará estruturas de repetição.

Próximos passos

• O próximo vídeo irá explorar as estruturas de repetição.

• As aulas teóricas não cobrem todos os conceitos, então é importante continuar praticando com exercícios.

Encerramento

Visão geral da seção: Neste trecho, o palestrante faz um encerramento e se despede dos espectadores.

Um grande abraço, boas práticas e a gente se vê na próxima.

• O palestrante finaliza a apresentação com uma mensagem de despedida.

• Ele deseja um "grande abraço" aos espectadores.

• Ele menciona a importância das boas práticas.

• Ele indica que haverá um próximo encontro ou próxima oportunidade de interação.