Exercícios JavaScript (Parte 1) - Curso JavaScript

A importância do exercício e conteúdo novo durante a resolução dos exercícios

Visão geral da seção: Nesta seção, o professor destaca a importância do exercício como conteúdo e introduz a ideia de que haverá conteúdo novo durante a resolução dos exercícios.

Exercício como conteúdo importante

• O exercício é um dos conteúdos mais importantes.

• Não é necessário convencer os alunos sobre isso agora.

• Muitos alunos têm uma atitude negativa em relação aos exercícios.

• Durante a resolução dos exercícios, haverá conteúdo novo.

Site com interatividade e mudança dinâmica de horas

Visão geral da seção: Nesta seção, o professor apresenta um site com interatividade e demonstra como as horas podem ser alteradas dinamicamente no site.

Site com interatividade

• O site possui uma foto representando diferentes momentos do dia.

• A cor de fundo e a imagem mudam de acordo com as horas do sistema.

• Demonstra-se que o site não tem interatividade com o usuário, mas sim com o sistema.

Verificador de idade e cálculo dinâmico da idade atual

Visão geral da seção: Nesta seção, o professor mostra um verificador de idade que calcula a idade atual com base no ano de nascimento fornecido pelo usuário.

Verificador de idade

• É possível inserir o ano de nascimento e selecionar o gênero (masculino ou feminino).

• Com base nas informações fornecidas, o verificador calcula a idade atual.

• Se uma data inválida for inserida, uma mensagem de erro é exibida.

Carregamento dinâmico de imagem e layout bonito em HTML5 e CSS3

Visão geral da seção: Nesta seção, o professor explica que o programa carrega imagens de forma dinâmica usando JavaScript. Além disso, destaca a criação de um layout bonito em HTML5 e CSS3.

Carregamento dinâmico de imagem

• O programa carrega imagens com base na hora do relógio do sistema.

• As cores e as imagens de fundo mudam dependendo da hora do dia.

Layout bonito em HTML5 e CSS3

• O site terá um layout bonito criado com HTML5 e CSS3.

• O processo será explicado passo a passo para facilitar o aprendizado dos alunos.

A importância do exercício e aplicação dos conhecimentos em JavaScript

Visão geral da seção: Nesta seção, o professor reforça a importância do exercício como forma de aplicar os conhecimentos adquiridos no curso de JavaScript.

Importância do exercício

• O exercício é fundamental para consolidar os conhecimentos adquiridos.

• Serão ensinadas várias coisas novas durante a resolução dos exercícios.

Estrutura básica do site em HTML5

Visão geral da seção: Nesta seção, o professor propõe uma estrutura básica para o site em HTML5 antes de começar a trabalhar com JavaScript.

Estrutura básica do site

• O site terá uma área azul como fundo.

• Haverá um título no topo e um rodapé com informações de copyright.

• A área central será reservada para a resolução dos exercícios.

Estrutura do site em HTML5 e criação das seções

Visão geral da seção: Nesta seção, o professor detalha a estrutura do site em HTML5 e explica como criar as seções necessárias.

Criação das seções

• O corpo do site será dividido em três partes principais: cabeçalho, conteúdo e rodapé.

• O cabeçalho será criado usando a tag <header>.

• O rodapé será criado usando a tag <footer>.

• A área de conteúdo será criada usando a tag <section>.

Essas são as principais informações abordadas no vídeo. Recomenda-se assistir ao vídeo completo para obter todos os detalhes e instruções passo a passo.

Criando um modelo de exercício

Visão geral da seção: Nesta seção, o instrutor demonstra como criar um modelo de exercício em HTML usando o Visual Studio. Ele cria a estrutura básica do documento, incluindo um cabeçalho, uma seção e um rodapé.

• Crie um novo arquivo chamado "modelo.html".

• Defina a estrutura básica do documento com as tags html5.

• Adicione um cabeçalho, uma seção e um rodapé.

• Dentro do cabeçalho, adicione um título.

• No rodapé, adicione um parágrafo com o texto "Curso em Vídeo" e o símbolo "©" para representar direitos autorais.

Estilizando o documento

Visão geral da seção: Nesta seção, o instrutor adiciona estilos ao documento HTML criado anteriormente. Ele cria um arquivo separado para os estilos e vincula-o ao documento principal.

• Crie um arquivo externo chamado "estilo.css" para os estilos.

• Vincule o arquivo de estilo ao documento HTML usando a tag <link>.

• Defina as configurações visuais para o corpo (body), a seção (section), o cabeçalho (header) e o rodapé (footer).

• Por exemplo, defina uma cor de fundo azul para o corpo e uma cor branca para a seção.

• Ajuste outras propriedades visuais conforme necessário, como fonte e bordas arredondadas.

Visualizando o resultado no navegador

Visão geral da seção: Nesta seção, o instrutor mostra como visualizar o documento HTML no navegador e fazer alterações nos estilos para obter o resultado desejado.

• Salve todos os arquivos.

• Abra o arquivo HTML no navegador usando um plugin chamado "Watch in Chrome".

• Faça ajustes nos estilos conforme necessário, salvando e atualizando a página para ver as mudanças em tempo real.

Ajustando estilos adicionais

Visão geral da seção: Nesta seção, o instrutor continua a ajustar os estilos do documento HTML. Ele define espaçamento interno, largura fixa e centralização dos elementos.

• Adicione um espaçamento interno de 15 pixels dentro da seção usando a propriedade padding.

• Defina uma largura fixa de 500 pixels para a seção.

• Centralize a seção na tela usando a propriedade margin com valor auto.

• Ajuste outros estilos conforme necessário, como cor da fonte e alinhamento de texto.

Finalizando os estilos

Visão geral da seção: Nesta seção final, o instrutor faz os últimos ajustes nos estilos do documento HTML. Ele define cores de fonte diferentes para o cabeçalho e rodapé, adiciona sombra à seção e ajusta sua transparência.

• Defina a cor branca para a fonte do cabeçalho (header) e rodapé (footer).

• Centralize o texto no cabeçalho e rodapé.

• Adicione uma sombra à seção usando a propriedade box-shadow, com deslocamento lateral e vertical de 5 pixels, espalhamento de 10 pixels e cor preta.

• Ajuste a transparência da sombra para obter o resultado desejado.

Essas são as principais etapas para criar um modelo de exercício em HTML e estilizá-lo usando CSS.

Modelo de Exercício Criado

Visão Geral da Seção: Nesta seção, o palestrante mostra o modelo de exercício já criado e explica como cada exercício conterá um conteúdo específico.

Criação do Modelo e Estilo

• O código do modelo de exercício já foi criado.

• O estilo está sendo chamado pelo arquivo "estilo.css".

• Um script chamado "script.js" também foi criado para os JavaScripts separados.

• Ao criar o arquivo "script.js", é possível escolher a opção "create" quando solicitada.

• Um alerta com a mensagem 'olá' foi adicionado ao script.js.

Chamada de CSS e JavaScript Externos

Visão Geral da Seção: Nesta seção, é explicado que o HTML possui chamadas externas para o CSS e JavaScript, utilizando arquivos separados. Esses arquivos são importantes para estilizar e adicionar funcionalidades ao site.

Arquivos Externos

• O HTML possui uma chamada externa para o arquivo CSS.

• O HTML também possui uma chamada externa para o arquivo JavaScript.

• Existem dois arquivos: um arquivo de estilo e um arquivo de script.

Importância do Modelo Criado

Visão Geral da Seção: Nesta seção, é ressaltada a importância do modelo criado, pois ele será utilizado em todos os exercícios futuros. Além disso, é mencionado que esse modelo permite visualizar os exercícios funcionando corretamente.

Utilização do Modelo

• O modelo criado será utilizado em todos os exercícios futuros.

• É importante criar o arquivo modelo, pois ele define o estilo do site.

• Um site sem estilo pode não ser atrativo para os visitantes.

Conclusão e Chamada à Ação

Visão Geral da Seção: Nesta seção final, o palestrante conclui o vídeo e faz uma chamada à ação para que os espectadores se inscrevam no canal, compartilhem com colegas e interajam nas redes sociais.

Encerramento

• O próximo vídeo abordará a resolução dos exercícios apresentados anteriormente.

• É recomendado criar o arquivo modelo para utilizar nos exercícios futuros.

• Incentivo para inscrição no canal, ativação das notificações e compartilhamento nas redes sociais.

Canal do YouTube

• O canal possui diversos vídeos e playlists relacionadas ao desenvolvimento web.

• Link: youtube.com/cursoemvideo

Encerramento Final

• O palestrante se despede e encoraja boas práticas na criação do modelo de exercício.