PARA QUEM QUISER ANOTAR: onclick => disparado quando recebe um click ondblclick => disparado quando click duplo onmouseover => disparado quando o mouse está sobre onmouseout => disparado quando o mouse sai do objeto onmousemove => disparado quando o mouse é movido no elemento onmousedown => disparado quando o click do botão for pressionado onmouseup = > disparado quando o click do mouse é solto onfocus => disparado quando o elemento recebe o foco. Válido para input onchange => disparado quando há uma mudança no conteúdo. "Ao mudar" onblur => disparado quando o elemento perde o foco onkeydown => disparado quando uma tecla é pressionada onkeypress => disparado quando uma tecla é pressionada e solta onkeyup => disparado quando uma tecla é solta sobre o elemento onload => disparado quando a página terminou de ser carregada. Body onresize => disparado quando há um redimencionamento da janela
Professor quero agradecer demais por estes conteúdos sensacionais e parabeniza-ló pela maravilhosa didática que tem. Eu estudo Javascript a 1 ano e só depois de conhecer seu canal que estou conseguindo entender tudo perfeitamente. Você é sensacional! Que Deus o abençoe sempre. Quero muito e vou me tornar seu aluno no curso completo. Grande abraço!
Estou adorando sua didática Prof. Dimitri. O conceito de todos os elementos do Java script ficou muito mais fácil para mim agora. Muito Obrigado por compartilhar seu conhecimento! Aguardo a próxima aula!😉
Muito bom, sei também que se quiser deixar todo o código no javascript, daria para usar o addEventListener em uma variável que capture o id e chamar uma função de acordo com o evento do mouse, mas acho que do seu jeito ficou mais prático.
Olá professor! Fiquei com uma dúvida no uso do: document.getElementById("campoTexto").value = ""; Você disse que quando trabalhamos com elementos de texto devemos utilizar o value, e não o innerHTML, porém quando trabalhamos com o a partir da aula 02, utilizamos o inner: document.getElementById('texto-inner').innerHTML="Texto escrito com inner.html! O parágrafo também não usa texto? Quando sei quando usar o .value ou o .innerHTMl? Se ambos tem texto inseridos nele? Fiquei com essa dúvida...
Oi, tudo bom? O único que usa .value são campos INPUT de texto. Campo input são aqueles campinhos de formulário. Todos os outros elementos HTML que contenham texto, como títulos etc.. tudo é innerHTML. Abraço!
Olá Miojjin. Nem sempre elas ficam vazias. Uma função pode receber nenhum, um ou vários parâmetros, que são valores passados para a função quando ela é chamada. Esses parâmetros são especificados entre parênteses na definição da função e separados por vírgulas. Os parâmetros podem ser de qualquer tipo de dado em JavaScript, incluindo strings, números, booleanos, objetos e até mesmo outras funções. Aqui está um exemplo: function cumprimentar(nome, idade) { console.log("Olá, " + nome + "! Você tem " + idade + " anos."); } Ao chamar essa função e passar dois argumentos para ela, a função irá exibir uma mensagem personalizada: cumprimentar("Dimitri", 30); // Saída no Console: Olá, Dimitri! Você tem 30 anos. Espero que tenha dado para entender, abraço!
Oi Mateus. É diferente. No CSS o hover só pode alterar propriedades CSS daquele elemento selecionado. Um evento JavaScript pode fazer o que você quiser programar, não só modificar CSS, mas qualquer coisa, por exemplo manipular a página, eliminar ou adicionar elementos, começar alguma contagem de tempo, enfim, o que você quiser fazer. Muito mais abrangente. Espero que tenha dado para entender. Grande abraço!
Marco 0 da minha jornada de aprender definitivamente JavaScript! # Day002 Aula 10/20 - Concluída! ✅ Adorei essa aula de EVENTOS e isso já fez a mente ferver para alguns projetinhos futuros!! Aula nota 1000! Impecável Professor Dimitri! Partiu Aula 11? Sim ou Claro? =)
Oie. Os cursos de HTML, CSS e JS que estão aqui no TH-cam são os mesmos módulos do meu curso pago, disponibilizados gratuitamente para dar a base para quem não pode pagar. No curso completo você vai ter todo restante necessário para ser um programador completo: jQuery, Bootstrap 5, React, PHP, PHP Orientado a Objetos, Node JS e principalmente projetos práticos feitos do zero, como projetos de front-end da Netflix, Apple, Mercado Livre, Airbnb, projetos de back-end e muito mais. Resumindo, o básico eu disponibilizei de graça aqui. Para quem quer ser um programador completo dai tem o curso 👉 curso.programacaoweb.com.br . Abraço!
Acabei de adquirir pela metade do preço aproveitando a Black November, se o que temos aqui grátis é só o princípio e já é disparado a melhor didática que já vi, imagina o curso completo, sem pensar duas vezes já fui lá e adquiri, detalhes que o preço original já é muito barato, ainda consegui pela metade do preço, estou hiper mega feliz, aproveitem e parabéns professor pela didática impecável 👏🏼👏🏼👏🏼
Professor, é correto fazer a alteração de estilo direto no arquivo JS? não teria como deixar a lógica no JS e o estilo no arquivo CSS pra ficar melhor organizado?
Oi Teylor. O estilo sempre fica no CSS. Ele é responsável por isso. Você só vai fazer alteração de estilo pelo JS se precisar manipular de alguma forma a sua página. Por exemplo, num disparo de evento você quer trocar a cor de alguma coisa, ai o JS pode fazer isso. Geralmente nós criamos classes no CSS com um conjunto de propriedades que definem o estilo, depois no JS a gente apenas remove e adiciona essas classes, para tudo ficar mais organizado. Espero que tenha dado para entender. Abraço!
Olá professor! Estava aqui revisando e queria saber se o senhor pode me ajudar, eu queria disparar um evento relacionado a apertar a tecla enter depois de um campo input e um botão específico de enviar o formulário, vi no curso de jquery que o senhor já ensinou, mas queria fazer em javascript puro, poderia me explicar como seria mais ou menos? por favor
Professor na parte document.body.style.backgroundColor="yellow"; eu entendi o que o senhor fez so não entendi o pq de colocar document.body, entendo que o body é pra atacar toda a tela, mas pq o senhor colocou o document antes?
Oi Iran. Em JavaScript, o objeto "document" representa o documento HTML carregado no navegador. Ele possui várias propriedades e métodos que permitem manipular o conteúdo e a aparência da página. Ao utilizar "document.body", estamos acessando a propriedade body do objeto document, que representa o elemento do documento HTML. O elemento é o contêiner principal do conteúdo da página e é o lugar onde a maioria dos elementos HTML são adicionados. No meu código, document.body.style.backgroundColor="yellow"; está definindo a cor de fundo (background) do elemento para amarelo (yellow), o que faz com que toda a página tenha uma cor de fundo amarela. Não é possível acessar o elemento body diretamente sem o objeto document. Então, para resumir, a utilização de document.body está acessando o elemento do documento HTML, permitindo que possamos modificar suas propriedades, como a cor de fundo neste caso. Forte abraço!
quando eu escrevo function red() { let div = document.getElementById("texto") div.style.backgroundColor = "red"; o meu () depois do getelementbyid ta ficando rosa, assim n funcionando, pq ta assim?
Na função do click da pra min da que a função ou variável não existe aí tive que colocar código javascript dentro do HTML pra funcionar alguém sabe dizer como eu resolvo isso ?
Oi Fernando. Se o arquivo estiver referenciado no seu html de forma correta, mesmo que esteja em outro arquivo a função vai funcionar. Sem ver o teu código fica difícil de dizer o que tem de errado. Abraço!
Tudo bom João! Se fizer igualzinho vai funcionar. É algum detalhe que você não está percebendo, provavelmente erro de sintaxe (escrito errado). Abraço!
Agora você já tem capacidade de disparar eventos!
Compartilha com seus amigos e conhecidos nosso canal!
Forte abraço!
PARA QUEM QUISER ANOTAR:
onclick => disparado quando recebe um click
ondblclick => disparado quando click duplo
onmouseover => disparado quando o mouse está sobre
onmouseout => disparado quando o mouse sai do objeto
onmousemove => disparado quando o mouse é movido no elemento
onmousedown => disparado quando o click do botão for pressionado
onmouseup = > disparado quando o click do mouse é solto
onfocus => disparado quando o elemento recebe o foco. Válido para input
onchange => disparado quando há uma mudança no conteúdo. "Ao mudar"
onblur => disparado quando o elemento perde o foco
onkeydown => disparado quando uma tecla é pressionada
onkeypress => disparado quando uma tecla é pressionada e solta
onkeyup => disparado quando uma tecla é solta sobre o elemento
onload => disparado quando a página terminou de ser carregada. Body
onresize => disparado quando há um redimencionamento da janela
obrigado meu nobre.
Noooohhhhhsss vlw demais
voce e um heroi
alert("Obrigado ajudou muito");
Nunca vi um conteudo grátis tão bom quanto esse..parabens pela disposição
Professor quero agradecer demais por estes conteúdos sensacionais e parabeniza-ló pela maravilhosa didática que tem.
Eu estudo Javascript a 1 ano e só depois de conhecer seu canal que estou conseguindo entender tudo perfeitamente.
Você é sensacional!
Que Deus o abençoe sempre.
Quero muito e vou me tornar seu aluno no curso completo.
Grande abraço!
Estou adorando sua didática Prof. Dimitri. O conceito de todos os elementos do Java script ficou muito mais fácil para mim agora.
Muito Obrigado por compartilhar seu conhecimento!
Aguardo a próxima aula!😉
Valeu Brito. Muito grato pelos seus comentários motivadores! Um grande abraço
Aula top . Estava curioso para aprender essa parte do curso para ver como que era a interção com as páginas através o JS.
Concerteza essa foi a aula em que mais fiquei ansioso para botar em pratica!
Muito bom vídeo!😁😁
Excelente conteúdo sobre eventos, obrigado por compartilhar de seu conhecimento é contribuir para o nosso desenvolvimento em TI.
Eu que agradeço Everaldo por sempre dar essa força nos comentários! Um grande abraço!
Você é muito bom professor, estou impressionado. Parabens!
Obrigado Breno! Abraço
Valeu Dimitri, esclareceu muitas dúvidas, estou gostando D+
Muito conteúdo prático e importantíssimo pra quem esta aprendendo parabéns...
Obrigado Marcelo. Forte abraço!
Valeu Dimitri suas aulas são incríveis !!
Muito obrigado José. Que bom que está gostando. Forte abraço!
Suas aulas são top professor.
Muito obrigado Wilton. Grande abraço!
Parabéns muito bom o método de ensino obg ❤
assisti essas aulas esperando por esse momento HAHAHAHA
Não entendi nada ksksks mas vc é muito muito bom. Gosto de suas aulas!
Eita kkk assiste novamente essa aula pq é uma das mais importantes. Fundamental entender. Obrigado pelo elogio. Grande abraço!
muito boa aula sobre Eventos Javascript, obgado!
Valeu Cezar! 👨💻👍
Que curso FODA, em breve vou comprar o seu curso!
Vai ser muito bem-vindo na turma! Grande abraço!
Valew, um forte abraço kk, show de aula!!
Muito bom eu no onmouseout coloquei a cor verde e usei um onclick para ficar azul denovo.
Muito bom, sei também que se quiser deixar todo o código no javascript, daria para usar o addEventListener em uma variável que capture o id e chamar uma função de acordo com o evento do mouse, mas acho que do seu jeito ficou mais prático.
Sim, pode usar addEventListener também. Forte abraço!
E já estou aqui estudando com o cafezinho do lado e chuva lá fora.
nessa aula consegui fazer aquele esquema de tema Dark , mó massaaaaa kkkkk
Show Kaique! Grande abraço!
Aula sensacionalll...
Aula incrível!!
Mas uma concluída. Muito obrigado pelo conteudo.
Valeu Squad! Forte abraço!
Ótima aula. Obrigado
Opa, valeu. Grande abraço!
Valeu mesmo! Muito boa a explicação!
Olá professor!
Fiquei com uma dúvida no uso do:
document.getElementById("campoTexto").value = "";
Você disse que quando trabalhamos com elementos de texto devemos utilizar o value, e não o innerHTML, porém quando trabalhamos com o a partir da aula 02, utilizamos o inner:
document.getElementById('texto-inner').innerHTML="Texto escrito com inner.html!
O parágrafo também não usa texto? Quando sei quando usar o .value ou o .innerHTMl? Se ambos tem texto inseridos nele? Fiquei com essa dúvida...
Oi, tudo bom? O único que usa .value são campos INPUT de texto. Campo input são aqueles campinhos de formulário. Todos os outros elementos HTML que contenham texto, como títulos etc.. tudo é innerHTML. Abraço!
@@programacaoweb Entendi! Muito obrigado professor! Estou adorando o curso!
@@LucasSilva-tn5ki Show! Um abraço!
conteudo muito importante!
Que vídeo fantástico ✌️🙂 obrigado!
Valeu Icaro! Abraço!
@@programacaoweb amém 🙏
Professor, ótima aula está me ajudando muito!
Depois de terminar o curso de JavaScript deveria assistir o de JQuery ou BootStrap?
Oi Max, recomendo fazer jQuery depois Bootstrap. Abraço!
Excelente!
19:35
Bom dia professor,, poderia me dizer pq as functions ficam sempre com os "( )" vazios? Que tipo de valor podemos botar dentro deles?
Olá Miojjin. Nem sempre elas ficam vazias. Uma função pode receber nenhum, um ou vários parâmetros, que são valores passados para a função quando ela é chamada. Esses parâmetros são especificados entre parênteses na definição da função e separados por vírgulas. Os parâmetros podem ser de qualquer tipo de dado em JavaScript, incluindo strings, números, booleanos, objetos e até mesmo outras funções. Aqui está um exemplo:
function cumprimentar(nome, idade) {
console.log("Olá, " + nome + "! Você tem " + idade + " anos.");
}
Ao chamar essa função e passar dois argumentos para ela, a função irá exibir uma mensagem personalizada:
cumprimentar("Dimitri", 30);
// Saída no Console: Olá, Dimitri! Você tem 30 anos.
Espero que tenha dado para entender, abraço!
Dúvida, nesses eventos de onmouseout e onmouseover, eles tem a mesma função do hover do css?
Quando sei quando devo usar um ou outro?
Oi Mateus. É diferente. No CSS o hover só pode alterar propriedades CSS daquele elemento selecionado. Um evento JavaScript pode fazer o que você quiser programar, não só modificar CSS, mas qualquer coisa, por exemplo manipular a página, eliminar ou adicionar elementos, começar alguma contagem de tempo, enfim, o que você quiser fazer. Muito mais abrangente. Espero que tenha dado para entender. Grande abraço!
@@programacaoweb muito obrigado, esclareceu bastante minha duvida
Marco 0 da minha jornada de aprender definitivamente JavaScript! # Day002
Aula 10/20 - Concluída! ✅
Adorei essa aula de EVENTOS e isso já fez a mente ferver para alguns projetinhos futuros!!
Aula nota 1000! Impecável Professor Dimitri!
Partiu Aula 11? Sim ou Claro? =)
Professor qual é a diferença desse curso que você disponibiliza gratuitamente para o curso que você tem pago?
Oie. Os cursos de HTML, CSS e JS que estão aqui no TH-cam são os mesmos módulos do meu curso pago, disponibilizados gratuitamente para dar a base para quem não pode pagar. No curso completo você vai ter todo restante necessário para ser um programador completo: jQuery, Bootstrap 5, React, PHP, PHP Orientado a Objetos, Node JS e principalmente projetos práticos feitos do zero, como projetos de front-end da Netflix, Apple, Mercado Livre, Airbnb, projetos de back-end e muito mais. Resumindo, o básico eu disponibilizei de graça aqui. Para quem quer ser um programador completo dai tem o curso 👉 curso.programacaoweb.com.br . Abraço!
@@programacaoweb Deus te abençoe professor, graça a você eu aprendi bastante coisas! Gratidão! ✌️👏😃🙏
Acabei de adquirir pela metade do preço aproveitando a Black November, se o que temos aqui grátis é só o princípio e já é disparado a melhor didática que já vi, imagina o curso completo, sem pensar duas vezes já fui lá e adquiri, detalhes que o preço original já é muito barato, ainda consegui pela metade do preço, estou hiper mega feliz, aproveitem e parabéns professor pela didática impecável 👏🏼👏🏼👏🏼
Professor, é correto fazer a alteração de estilo direto no arquivo JS? não teria como deixar a lógica no JS e o estilo no arquivo CSS pra ficar melhor organizado?
Oi Teylor. O estilo sempre fica no CSS. Ele é responsável por isso. Você só vai fazer alteração de estilo pelo JS se precisar manipular de alguma forma a sua página. Por exemplo, num disparo de evento você quer trocar a cor de alguma coisa, ai o JS pode fazer isso. Geralmente nós criamos classes no CSS com um conjunto de propriedades que definem o estilo, depois no JS a gente apenas remove e adiciona essas classes, para tudo ficar mais organizado. Espero que tenha dado para entender. Abraço!
@@programacaoweb Deu sim, vlw prof
Olá professor! Estava aqui revisando e queria saber se o senhor pode me ajudar, eu queria disparar um evento relacionado a apertar a tecla enter depois de um campo input e um botão específico de enviar o formulário, vi no curso de jquery que o senhor já ensinou, mas queria fazer em javascript puro, poderia me explicar como seria mais ou menos? por favor
Oi Vitor. Você pode usar um EventListener. Veja esse link 👉 bit.ly/3bzxTq7
Professor na parte
document.body.style.backgroundColor="yellow"; eu entendi o que o senhor fez
so não entendi o pq de colocar document.body, entendo que o body é pra atacar toda a tela, mas pq o senhor colocou o document antes?
Oi Iran. Em JavaScript, o objeto "document" representa o documento HTML carregado no navegador. Ele possui várias propriedades e métodos que permitem manipular o conteúdo e a aparência da página.
Ao utilizar "document.body", estamos acessando a propriedade body do objeto document, que representa o elemento do documento HTML. O elemento é o contêiner principal do conteúdo da página e é o lugar onde a maioria dos elementos HTML são adicionados.
No meu código, document.body.style.backgroundColor="yellow"; está definindo a cor de fundo (background) do elemento para amarelo (yellow), o que faz com que toda a página tenha uma cor de fundo amarela. Não é possível acessar o elemento body diretamente sem o objeto document.
Então, para resumir, a utilização de document.body está acessando o elemento do documento HTML, permitindo que possamos modificar suas propriedades, como a cor de fundo neste caso. Forte abraço!
@@programacaoweb Ficou bem mais claro agora, muito obrigado!
não estou conseguindo alterar o background de vermelho para azul no ONMOUSEOUT. Alguem pode me ajudar
Da uma olhada 👉 chat.openai.com/share/93053e94-506b-49d2-8e1d-492292940b96 .Abraço!
quando eu escrevo function red() {
let div = document.getElementById("texto")
div.style.backgroundColor = "red"; o meu () depois do getelementbyid ta ficando rosa, assim n funcionando, pq ta assim?
Oi veja se nao faltou ponto e vírgula no final e se esse ID existe na tag HTML com esse nome. Abraço!
15:00
13:30
Na função do click da pra min da que a função ou variável não existe aí tive que colocar código javascript dentro do HTML pra funcionar alguém sabe dizer como eu resolvo isso ?
Oi Fernando. Se o arquivo estiver referenciado no seu html de forma correta, mesmo que esteja em outro arquivo a função vai funcionar. Sem ver o teu código fica difícil de dizer o que tem de errado. Abraço!
7:22
não ta dando certo fiz igualzinho, alguem pode ajudar?
Tudo bom João! Se fizer igualzinho vai funcionar. É algum detalhe que você não está percebendo, provavelmente erro de sintaxe (escrito errado). Abraço!
Professor está dando bug na pagina de compra do curso
Oi Marlon. Deve ter sido alguma instabilidade temporária. Tá funcionando direitinho lá. Abraço!
9:08
os elementos do Java script ficou muito mais fácil
Essa parte do onmousemover parece até um virus srsr
Esse barulho da vinheta é Irritante quando vc começa a assistir os vídeos na sequencia
24:30
21:06