Eventos DOM - Curso JavaScript #10

Introdução e Perguntas Iniciais

Visão Geral da Seção: Nesta seção, o professor faz algumas perguntas sobre conceitos importantes relacionados ao DOM e métodos de seleção de elementos no JavaScript.

Significado do DOM e suas Funções

• O DOM significa Document Object Model e é um facilitador presente nos navegadores para permitir o acesso direto aos elementos HTML pelo JavaScript.

• A montagem da árvore DOM é o primeiro passo prático para entender como os elementos são organizados em uma página.

Cinco Métodos de Selecionar Elementos no JavaScript

• TagName: seleciona elementos pelo nome da tag.

• ID: seleciona elementos pelo ID atribuído a eles.

• Nome do Componente: seleciona elementos pelo nome do componente (nome da tag).

• Classe: seleciona elementos pela classe atribuída a eles.

• querySelector: método mais recente que permite a seleção de elementos usando seletores CSS.

Eventos DOM

Visão Geral da Seção: Nesta seção, o professor introduz os eventos DOM e destaca sua importância na criação de interatividade em sites.

Importância dos Conhecimentos Anteriores

• Os conhecimentos adquiridos até agora serão fundamentais para criar sites interativos com JavaScript.

Recapitulação dos Conceitos Anteriores

• O DOM é o Document Object Model, que facilita o acesso aos elementos HTML pelo JavaScript.

• A montagem da árvore DOM é essencial para entender a estrutura dos elementos em uma página.

• Cinco métodos foram apresentados para selecionar elementos usando o JavaScript.

Exemplo Prático

Visão Geral da Seção: Nesta seção, o professor realiza um exemplo prático para demonstrar a interação com elementos usando eventos DOM.

Criação do Arquivo HTML

• É criada uma pasta chamada "aula 10" e dentro dela é criado um arquivo HTML chamado "ex006.html".

• No arquivo HTML, é adicionada uma div com o ID "area" e o texto "interaja".

Estilização da Div

• A div com o ID "area" recebe estilos CSS para definir seu tamanho, cor de fundo, cor do texto e alinhamento.

Conclusão

Visão Geral da Seção: Nesta seção final, o professor conclui a criação da div interativa e incentiva os alunos a seguirem os passos para entender melhor os conceitos apresentados.

Recapitulação do Exemplo Prático

• Foi criada uma div interativa com o texto "interaja" no centro.

• Os estilos CSS foram aplicados para definir a aparência da div.

Lembre-se de assistir à aula anterior (aula 9) antes de prosseguir para garantir um entendimento completo dos conceitos abordados.

Eventos de Mouse

Visão geral da seção: Nesta seção, o palestrante discute os eventos do mouse em JavaScript e como eles podem ser acionados por diferentes ações do mouse.

Eventos Disparados pelo Mouse

• O evento mouseenter é acionado quando o mouse entra em um elemento.

• O evento mousemove é acionado enquanto o mouse está se movendo dentro de um elemento.

• O evento mousedown é acionado quando o botão do mouse é pressionado.

• O evento mouseup é acionado quando o botão do mouse é solto.

• O evento click é acionado ao pressionar e soltar rapidamente o botão do mouse.

• O evento mouseout é acionado quando o mouse sai de um elemento.

Outros Eventos de Mouse

• Existem muitos outros eventos relacionados ao movimento do mouse que podem ser explorados.

• Uma lista completa dos eventos DOM em JavaScript pode ser encontrada na página "Events Reference" da MDN (Mozilla Developer Network).

Funções em JavaScript

Visão geral da seção: Nesta seção, o palestrante explica as funções em JavaScript e como elas são usadas para tratar eventos.

Conceito de Funções

• Uma função em JavaScript consiste em um conjunto de linhas de código que serão executadas apenas quando um determinado evento ocorrer.

• As funções são nomeadas com base na ação que desejamos realizar quando o evento ocorre.

Configurando uma Função para Tratar um Evento

1. Crie um bloco delimitado por chaves `` para conter o código da função.

2. Nomeie a função usando a palavra-chave function seguida pelo nome da ação desejada.

3. Dentro do bloco da função, escreva o código que será executado quando o evento ocorrer.

Configurando um Evento de Clique

Visão geral da seção: Nesta seção, o palestrante demonstra como configurar um evento de clique em HTML e JavaScript.

Configurando no HTML

• Para configurar um evento de clique diretamente no HTML, adicione o atributo onclick ao elemento desejado.

• O valor do atributo onclick deve ser definido como o nome da função que será acionada quando ocorrer o clique.

Configurando no JavaScript

1. No arquivo JavaScript, crie uma função anônima usando a palavra-chave function.

2. Dentro dessa função, escreva o código que deseja executar quando ocorrer o clique.

3. Selecione o elemento desejado usando métodos como getElementById ou querySelector.

4. Execute as ações desejadas dentro do bloco da função.

Introdução à interatividade com JavaScript

Visão geral da seção: Nesta seção, o instrutor introduz a interatividade com JavaScript, mostrando como criar eventos de clique e entrada do mouse em elementos HTML. Ele também explora a detecção de erros e o uso do DevTools para solucionar problemas.

Criando eventos de clique e entrada do mouse

• Ao clicar em um elemento específico, é possível alterar seu conteúdo usando JavaScript.

• O evento "on click" dispara quando o elemento é clicado.

• É possível usar o evento "onmouseenter" para detectar quando o mouse entra no elemento.

• Para acessar um objeto criado fora da função atual, é necessário declará-lo como uma variável global.

Alterando estilos dos elementos

• Além de alterar o conteúdo dos elementos, também é possível modificar seus estilos usando JavaScript.

• Ao clicar em um elemento, pode-se mudar sua cor de fundo para vermelho e restaurá-la ao sair do elemento.

Utilizando listeners para eventos

• Em vez de adicionar os eventos diretamente no HTML, é possível utilizar listeners (ouvidores) em JavaScript.

• Os listeners ficam atentos a determinados eventos e executam as funções correspondentes quando esses eventos ocorrem.

• É recomendado utilizar listeners para manter o código HTML mais limpo.

Detecção de erros e uso do DevTools

• Erros podem ocorrer ao escrever código JavaScript incorretamente.

• O DevTools do Google Chrome pode ser usado para detectar erros no código.

• Ao abrir o DevTools, é possível verificar os erros na guia "Console".

• Corrigir os erros identificados no DevTools é essencial para o bom funcionamento do código.

Criando um exemplo de interação com o usuário

Visão geral da seção: Nesta seção, o instrutor mostra como criar um exemplo prático de interação com o usuário usando eventos DOM. Ele introduz a criação de inputs e a manipulação dos valores inseridos pelo usuário.

Criando inputs para números

• É possível criar inputs do tipo "number" em HTML para receber valores numéricos do usuário.

• Os atributos "name" e "id" são importantes para identificar os inputs.

Conclusão

• A interatividade com JavaScript permite criar elementos dinâmicos e responder às ações do usuário.

• Utilizando eventos, listeners e manipulação de estilos, é possível criar experiências interativas mais ricas em páginas web.

• O uso adequado do DevTools ajuda na detecção e correção de erros no código JavaScript.

Criando a Interface Básica

Visão Geral da Seção: Nesta seção, o instrutor mostra como criar a interface básica para o script.

Criando os Objetos de Entrada

• O instrutor cria dois objetos, tn1 e tn2, que representam as caixas de texto n1 e n2.

• Os objetos são criados usando os métodos getElementsById ou querySelector.

Obtendo os Valores das Caixas de Texto

• É necessário obter os valores digitados nas caixas de texto.

• O instrutor utiliza o método value para obter esses valores.

• Os valores são convertidos em números usando a função Number.

Realizando a Soma

• O resultado da soma dos números é armazenado na variável "s".

• Um elemento <div> com o ID "res" é criado para exibir o resultado.

• O valor da soma é atribuído ao elemento utilizando a propriedade innerHTML.

Estilizando a Interface

• São aplicados estilos CSS para deixar a interface mais bonita.

• A fonte do texto é aumentada e definida como "arial".

• A largura do input é ajustada para 100 pixels.

Exibindo uma Mensagem Formatada

Visão Geral da Seção: Nesta seção, o instrutor mostra como exibir uma mensagem formatada com o resultado da soma.

Utilizando String Interpolada

• O instrutor utiliza string interpolada para exibir uma mensagem formatada com os valores de n1, n2 e s.

• A mensagem é exibida no elemento <div> com o ID "res".

Estilizando a Interface com CSS

Visão Geral da Seção: Nesta seção, o instrutor mostra como estilizar a interface utilizando CSS.

Aplicando Estilos ao Body e Fonte

• São aplicados estilos CSS para alterar a fonte do texto e aumentar seu tamanho.

• O estilo é aplicado ao body utilizando o seletor body.

• A largura do input também pode ser ajustada utilizando o seletor input.

Espaçamento entre Elementos

• É possível adicionar espaçamento entre os elementos utilizando as propriedades margin ou padding.

• O instrutor utiliza a propriedade margin-top para adicionar um espaçamento de 20 pixels acima do elemento <div> com o ID "res".

Finalização e Considerações Finais

Visão Geral da Seção: Nesta seção, o instrutor finaliza o código e faz algumas considerações finais.

Revisão das Partes Criadas

• O instrutor destaca que foram criadas três partes principais no exercício: HTML, CSS e JavaScript.

• Essas partes são integradas para criar uma interface interativa.

Incentivo à Inscrição e Compartilhamento

• O instrutor incentiva os espectadores a se inscreverem no canal, habilitarem as notificações e compartilharem os vídeos nas redes sociais.

• Ele ressalta que isso ajuda na obtenção de patrocinadores para continuar produzindo conteúdo gratuito.

Conclusão do Curso

• O instrutor menciona que todas as aulas do curso estão disponíveis de uma vez e encoraja os espectadores a fazerem o curso completo, mas com intervalos para descanso e prática dos exercícios.

Divulgação do Canal e Cursos Gratuitos

Visão Geral da Seção: Nesta seção, o instrutor divulga o canal e os cursos gratuitos disponíveis.

Canal Curso em Vídeo no YouTube

• O instrutor convida os espectadores a acessarem o canal "Curso em Vídeo" no YouTube.

• Ele destaca que há uma variedade de cursos gratuitos disponíveis na playlist do canal.

Compartilhamento com Amigos e Grupos

• O instrutor incentiva os espectadores a compartilharem os cursos com amigos e grupos de programação nas redes sociais.

• Ele ressalta que isso ajuda na obtenção de patrocinadores para continuar produzindo conteúdo gratuito.

Agradecimento ao Patrocinador

• O instrutor agradece ao Google por patrocinar o curso de JavaScript.

Considerações Finais

Visão Geral da Seção: Nesta seção final, o instrutor faz algumas considerações finais sobre o curso.

Importância dos Intervalos entre Aulas

• O instrutor destaca a importância de fazer intervalos entre as aulas para descansar e praticar os exercícios.

• Ele enfatiza que assistir todas as aulas sem pausa não garantirá um bom conhecimento em JavaScript.