Eventos DOM - Curso JavaScript #10

Você já entendeu como funciona o DOM com JavaScript? Sabe criar funções em JavaScript? Consegue ligar uma função a um evento em um formulário HTML5 usando JavaScript? Sabe como pegar valores dentro de caixas de texto e fazer cálculos com eles?

Pois, para responder a essas e muitas outras perguntas, assista essa aula do Curso de JavaScript para Iniciantes até o final. E não se esqueça sempre de praticar todas as atividades que fizermos durante o vídeo no seu próprio computador.

Aula do Curso de JavaScript e ECMAScript para Iniciantes, criado pelo professor Gustavo Guanabara para o canal CursoemVideo.

Curso em Vídeo

Patrocínio

#CursoemVideo #JavaScript #EcmaScript #MóduloC #Aula10

[levizerad]

Dica: se você digitar div#area e apertar tab ele cria automático <div id="area"></div>. Isso funciona tbm para classes e para tags personalizadas!

[lucioferraz]

Ola, tenho 58 anos. Sempre desejei saber fazer algo nesta área. Meu sonho, desde adolescente, é aprender a "programar".
Iniciei o curso sem muita pretensão. Pensei que não iria dar conta. Mas estava enganado. Com um pouquinho de paciência, pois nosso mestre, as vezes, vai muito rápido, estou conseguindo lograr êxito.
Lembrando que sou professor de educação física de formação acadêmica.
Moro em Gotemburgo na Suécia e sou formado e treinado para ser um ministro do evangelho e atuo aqui como pastor da Igreja Verbo da Vida.
Estou aproveitando o período de quarentena para realizar esse sonho.
Estou extremamente feliz pois estou conseguindo.
Não existe limitação, quando não entender, pare o vídeo, pense, medite nas funções ensinadas que você vai conseguir.
Não desista, não pare pois quando eu era adolescente nem havia internet como existe hoje!!! Avance!!!

[gabrielcamargo]

Uma dica: sempre quando vocês forem copiar uma linha de cima para baixo, ao invés de escrever tudo de novo ou dar ctrl+c e v, dá pra usar shift+alt+seta pra baixo, ele copia automaticamente pra baixo.

[eduardofps]

Estou adorando este curso. {deixe o seu like aqui se está assistindo em 2024}

[Torvating]

DICA:
o comando onmouseenter foi trocado por onmouseover nas atualizacoes atuais

[_terminal]

Para o pessoal que está assistindo em 2022, leia bastante os comentários do curso, a comunidade do canal é maravilhosa e sempre ajuda os novatos

[sarahmktt]

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

ATUALIZANDO VCS!! COPIEM OU ANOTEM, BONS ESTUDOS

[arthursantos]

RECOMENDO USAR A EXTENSÃO ESLint PARA VS CODE, POIS DETECTA O ERRO A LINHA E MUITO MAIS NO PROPRIO VS CODE SEM PRECISAR USAR O DEVTOOLS DO SEU NAVEGADOR

[bigbossbr_]

Dica 1: no visual code se você mantiver o cursor em uma linha e apertar SHIFT + SETA + BAIXO pra baixo você faz uma cópia da linha, agora se você apertar só o ALT + SETA PRA BAIXO OU PRA CIMA você movimenta a linha.

Dica 2: Se você digitar "!" se aspas e apertar ENTER automaticamente você gera o cabeçalho do html5.

[LuuuKz]

NOVIDADES:

O que é um EVENTO?

Um EVENTO é uma CONDIÇÃO que, quando verdadeira, fará a CHAMADA de uma FUNÇÃO.

Exemplos de EVENTOS:

O Evento onmouseenter="" serve para executar alguma FUNÇÃO no momento em que o cliente *ENTRAR COM O CURSOR DENTRO* do elemento.

O Evento onmousemove="" serve para executar alguma FUNÇÃO no momento em que o cliente *MOVER O CURSOR DENTRO* do elemento.

O Evento onmousedown="" serve para executar alguma FUNÇÃO no momento em que o cliente *PRESSIONAR O CLICK DENTRO* do elemento.

O Evento onmouseup="" serve para executar alguma FUNÇÃO no momento em que o cliente *SOLTAR O CLICK DENTRO* do elemento.

O Evento onclick="" serve para executar alguma FUNÇÃO no momento em que o cliente *CLICAR DENTRO* do elemento.

O Evento onmouseout="" serve para executar alguma FUNÇÃO no momento em que o cliente *SAIR COM O CURSOR DE DENTRO* do elemento.

O Evento onmouseover="" serve para executar alguma FUNÇÃO enquanto o cliente *MANTER O CURSOR SOBRE* o elemento.


O que é uma FUNÇÃO?

Funções são subprogramas que podem RECEBER PARÂMETROS e RETORNAR um RESULTADO. São AÇÕES executadas assim que são CHAMADAS ou em decorrência de algum EVENTO. É um BLOCO de CÓDIGOS projetado para EXECUTAR uma TAREFA ou CALCULAR um VALOR. Syntax:
function nomeDaFunção (parâmetro1, parâmetro2, parâmetro3...) {bloco de códigos}


O método addEventListener() serve para "PLANTAR" uma "ESCUTA" em um ELEMENTO. Esta "escuta" CHAMARÁ uma FUNÇÃO no momento em que o EVENTO, definido como PARÂMETRO, seja VERDADEIRO. Syntax:
element.addEventListener(event, function, useCapture)
*atenção:* no parâmetro EVENT não usa-se o prefixo "on". Use: "click" ao invés de: "onclick".

Como você pôde ver, a definição DESTE MÉTODO e a definição de EVENTO são a MESMA COISA. Da mesma forma que o Operador Ternário faz a MESMA COISA que a estrutura condicional IF/ELSE, só que de maneira mais simplificada, o método addEventListener() também faz a MESMA COISA que a primeira forma mostrada por Guanabara (onde os EVENTOS são inseridos na abertura da tag <div>), só que de maneira MENOS POLUÍDA VISUALMENTE, tornando o código mais LIMPO e ORGANIZADO. Desta forma os EVENTOS não ficam mais ESPALHADOS na parte estrutural da página (HTML5), reservando-se ORGANIZADAMENTE dentro da seção <script>


A tag <input> serve para especificar uma ÁREA onde o usuário poderá SUBMETER DADOS. Assim como o método window.prompt(), a tag <input> também retorna um valor do tipo STRING. Então, para fazer a soma de 2 NUMBERS, é necessário converter o dado padrão de STRING para NUMBER.

A propriedade .value serve para DEFINIR ou RETORNAR o valor de um atributo.


Diferença entre PARÂMETRO e ARGUMENTO:

Parâmetros, ou PARÂMETROS FORMAIS, são VARIÁVEIS LOCAIS de uma FUNÇÃO. O VALOR DESTAS é definido na PASSAGEM dos ARGUMENTOS, na CHAMADA da FUNÇÃO.
*Você pode NOMEAR os PARÂMETROS por questões ORGANIZACIONAIS, caso queira.

Argumentos, ou PARÂMETROS REAIS, são os REAIS VALORES que serão PASSADOS como PARÂMETROS de uma FUNÇÃO.
Ex:
function Boletim (nomeDoAluno, notaDoAluno) {bloco de códigos qualquer}

CHAMADA da FUNÇÃO e PASSAGEM dos ARGUMENTOS:
Boletim("Rodolfo", 6.5)
Passou-se o ARGUMENTO "Rodolfo" para o PARÂMETRO nomeDoAluno.
Passou-se o ARGUMENTO 6.5 para o PARÂMETRO notaDoAluno.

Parâmetro é o NOME do LOCAL que RECEBE os ARGUMENTOS.
Argumentos são os REAIS VALORES que serão PASSADOS para este LOCAL.


O que é um MÉTODO?

Um MÉTODO é uma FUNÇÃO que é ARMAZENADA como PROPRIEDADE de um OBJETO. Ou seja, MÉTODOS são AÇÕES que podem ser EXECUTADAS em OBJETOS.

O que é um OBJETO?

Um OBJETO é um CONTAINER de PROPRIEDADES e MÉTODOS.

[Henrique]

Dica galera: lá no final na resposta, não é aspas e sim o acento agudo invertido, daí fica tipo assim;
res.innerHTML = `A soma dos valores de ${n1} + ${n2} é igual à ${s}!`

[yuhoppe]

Gente sério, se eu n visse 3 módulos do curso de CSS dele (o atual) eu n ia entender nem metade das coisas q ele fez, recomendo d+ pra quem ta tendo mt dificuldade.

[filipecorrea]

Fazendo o curso em 2023, maravilha, a didática do Gustavo é única, parabéns pelo conteúdo!!

[rafaelpardinholacerdaarcur]

Podem trocar onmouseenter="entrar()" por onmouseover="entrar()" caso não funcione o de vocês

[felipebtts]

Assistindo cada aula pelo menos 2 vezes, mas não avanço enquanto não entendo e consigo colocar na prática.

[mundoaleatorio]

O onclick não está funcionando, o que fazer ?

[Thallesmg]

Galera vocês que não estão conseguindo fazer a calculadora funcionar mesmo fazendo igual esta no vídeo pode ser por estar usando o getElementById junto com o querySelector usa só um dos dois eu fiquei umas duas horas pra descobrir isso acho que nas novas atualizações só funciona usar um sem misturar com o outro.

[ThyMc.Oficial]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font: normal 18pt arial;
}
input {
font: normal 18pt Arial;
width: 100px;
}
div#res {
margin: top 20px;
}
</style>
</head>
<body>
<h1>Somando valores</h1>
<input type="number" name="txtn1" id="txtn1">
<input type="number" name="txtn2" id="txtn2">
<input type="button" name="somar" id="somar" value="Somar">
<div id="res"> Resultado </div>
<script>
// Função para somar os valores
function somar() {
var tn1 =
var tn2 =
var res =
var n1 = Number(tn1.value);
var n2 = Number(tn2.value);
var s = n1 + n2;
res.innerHTML = `A soma entre ${n1} e ${n2} é igual a <Strong>${s}</strong`;
}

// Adiciona o evento de clique ao botão
document.getElementById('somar').addEventListener('click', somar);
</script>
</body>
</html>

[oglei]

Alguém fazendo em 2022? Eu não consigo fazer a calculadora. Já revi todo o código considerando os cometários e mesmo assim não vai.

[gamestz]

Fiz uma calculadora com css tbm, não fico a melhor coisa mas esta parecendo um pouco uma calculadora
<style>
input{
width: 150px;
border: 2px solid #4953B8;
margin: 1px;
}
#numero1{
color: #0C1EDD;
}
#numero2{
color: #AB51AE;
}
div{
color: #000;
width: 190px;
font-size: 17px;
border: 2px solid #000;
border-radius: 10px;
background: #fff;
margin-top: 40px;
box-shadow: 5px 5px
}
#cal{
width: 200px;
height: 200px;
border: 2px solid #000;
background: #4E9C55;
border-radius: 10px;
box-shadow: 5px 5px
}
#u{
color: #fff;
font-size: 16px;
background: #000;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 10px;
}
a{
margin: 15px;
}
</style>
<body>
<div id="cal">
<h1 id="u">calculando os numeros</h1>
<a> <input type="numberpar" name="numero1" id="numero1"><br>
<a><input type="number" name="numero2" id="numero2"><br>
<a> <input type="button"
<div id="res">resultado</div>
</div>
<script src="main.js">
</script>
function somar(){
var
var
var
var n1=Number(tn1.value)
var n2=Number(tn2.value)
soma=n1+n2
res.innerText=(`a soma de ${n1} + ${n2} é ${soma}`)
}