D4mations.com

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
Seja um apoiador: http://cursoemvideo.com/apoie
Site: http://www.cursoemvideo.com
YouTube: http://www.youtube.com/cursoemvideo
Facebook: http://www.facebook.com/cursosemvideo
Twitter: http://twitter.com/cursosemvideo
Twitter: http://twitter.com/guanabara
Instagram: https://www.instagram.com/cursoemvideo/
Instagram: https://www.instagram.com/gustavoguanabara/

Patrocínio
Google: http://www.google.com.br

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

Original source

d4mer

, , , , , , ,

31 responses to “Eventos DOM – Curso JavaScript #10”

  2. O curso ia ficar bem melhor se ele fosse programado para pessoas que já entendem o básico de algoritmos e linguagem de programação. Do jeito que foi feito, tanto as pessoas que não tem esse básico não conseguem entender tudo, quanto as pessoas que já entendem ficam um pouquinho ficam entediadas

  4. Na tentativa de botar em pratica criei um codigo para calcular o salario apartir do preco da hora trabalhada.
    segui o codigo:
    <!DOCTYPE html>

    <html lang="pt-BR">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    </head>

    <body>

    <h1>Calculo do Sálario por horas trabalhadas</h1>

    preço da hora: <input type="number" id="precohora"><br/><br/>

    horas trabalhadas por dia: <input type="number" id="dia"><br/><br/>

    dias trabalhadas por mes: <input type="number" id="mes"><br/><br/>

    <input type="button" value="Calcular" onclick="somar()"><br><br/>

    <div id="res">o resultado é</div>

    <script>

    function somar() {

    var precohora = window.document.getElementById('precohora')

    var dia = window.document.getElementById('dia')

    var mes = window.document.getElementById('mes')

    var n1 = Number(precohora.value)

    var n2 = Number(dia.value)

    var n3 = Number(mes.value)

    var x = n1*n2*n3

    res.innerHTML = `O sálario é ${x}`

    }

    </script>

    </body>

    </html>

  5. Acho que o ultimo exercício eu exagerei um pouco, mas ficou legal rs' 😉

    Código:

    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ex.07 – Curso – Js – Somando Numeros</title>
    <style>
    body {
    background-color: #3d3d3d;
    }

    div#somador {
    position: relative;
    margin-left: 90px;
    width: 300px;
    height: 300px;
    background-color: honeydew;
    }

    div#somador h1 {
    text-align: center;
    }

    div#somador input#txtn1, input#txtn2 {
    position: relative;
    padding: 3px;
    margin: -6px;
    margin-left: 55px;
    }

    div#somador p {
    position: relative;
    text-align: center;
    }

    div#somador div#res {
    position: relative;
    text-align: center;
    text-decoration: none;
    }

    div#somador input#soma {
    position: relative;
    margin: 20px;
    margin-left: 120px;
    }

    </style>
    </head>
    <body>
    <div id="somador">
    <h1>Somando Valores</h1>
    <input type="number" name="txt" id="txtn1">
    <p>+</p>
    <input type="number" name="txt1" id="txtn2">
    <input type="button" value="Somar" id="soma" onclick="somar()">
    <div id="res">
    <p>O resultado é: </p>
    </div>
    </div>
    <script>
    function somar() {
    var cn1 = window.document.getElementById('txtn1')
    var cn2 = window.document.getElementById('txtn2')
    var res = window.document.getElementById('res')
    var n1 = Number(cn1.value)
    var n2 = Number(cn2.value)
    var s = n1 + n2
    res.innerText = `A soma entre ${n1} e ${n2} é igual a: ${s}`
    }
    </script>
    </body>
    </html>

  6. alguem sabe me responder se o comando

    addEventListener

    só consegue monitorar a ação se as variáveis estiverem fora da função ou de alguma forma eu consigo colocar a variável na função e pedir para ele monitorar e ela vai funcionar por que tentei fazer isso mas não deu certo.

    segue o código abaixo:

    a.addEventListener('click', clicar)

    function clicar() {
    var f = window.document.getElementById('area')
    var a = window.document.getElementById('int')

    a.innerText = 'Clicou!'
    f.style.background = 'red'
    }

  7. /* Galera eu queria deixar aqui o código, e deixar uma dica.
    muito cuidado quando estiver fazendo a aula e quando for montar uma DIV dentro de outra DIV…
    assim como no código abaixo pois acertar o nome da DIV correta para interação e o id correto…*/

    /* Outra coisa. quando for trabalhar com as funções para cada função como mudar de cor e mudar o texto e necessário uma variável. como no exemplo do carro so da pra executar uma tarefa por variável. */

  8. <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ex.06 – Curso – JS – Eventos DOM</title>
    <style>
    body {
    background-color:rgb(111, 153, 146);
    color: white;
    }
    div#conteudo {
    position: absolute;
    margin: -10px;
    left: 70px;
    top: 70px;
    background-color: #3d3d3d;
    width: 400px;
    height: 400px;
    }
    div#conteudo h1 {
    font: 15pt;
    box-shadow: 2px, 2px, 1px, 2px whitesmoke ;
    position: relative;
    text-align: center;
    }
    div#conteudo div#area {
    background-color: green;
    position: relative;
    width: 200px;
    height: 200px;
    left: 100px;
    }
    div#conteudo div#area p#int {
    font: verdana;
    position: relative;
    text-align: center;
    top: 90px;
    }
    </style>
    </head>
    <body>
    <div id="conteudo">
    <h1>Hello World</h1>
    <div id="area" onclick="clicar()" onmouseenter="entrar()" onmouseout="sair()" onmouseout="saiu()">
    <p id="int">Interaja</p>
    </div>
    </div>
    <script>
    function entrar() {
    var m = window.document.getElementById('int')
    m.innerText = "Entrou!"
    }
    function sair() {
    var m = window.document.getElementById('int')
    m.innerText = "Saiu!"

    var y = window.document.getElementById('area')
    y.style.background = "green"
    }
    function clicar() {
    var m = window.document.getElementById('int')
    m.innerText = "Clicou!"

    var x = window.document.getElementById('area')
    x.style.background = "red"
    }
    </script>
    </body>
    </html>

  11. Galera, alguem pode me ajudar? meu arquivo está apresentando esses dois erros:
    Uncaught ReferenceError: Entrar is not defined at HTMLDivElement.onmouseenter
    Uncaught ReferenceError: Sair is not defined at HTMLDivElement.onmouseout

  18. Eu fui colocar o <input typer="button" value="Somar" onclick=somar()> e não tava o desenho de um boão, eu pesquisei e achei que se colocar <button onclick=somar()>Somar</button> pegaria, eu coloquei e deu certo.

  19. Para treinar… Testei retirando a chamada de evento do HTML (deixando-o limpo), e utilizando Listener do JavaScript. Além disso, para exemplificar, declarei as variáveis numéricas diretamente a fim de criar 2 vars para capturar os nºs digitados pelo usuário ao invés das 4 declaradas no exercício. Vejam como o código ficou após as alterações:

    <!– Retiro onclick="somar()" do HTML –>
    linha 25 <input type="button" value="Somar">

    <script>
    var botaoSomar = window.document.getElementsByTagName('input')[2]
    botaoSomar.addEventListener('click', somar)

    function somar() {
    var n1 = Number(window.document.querySelector('input#txtn1').value)
    var n2 = Number(window.document.getElementById('txtn2').value) // escrevi as duas alternativas para capturar o id
    var res = window.document.getElementById('res')
    var soma = n1 + n2

    res.innerHTML = `A soma entre ${n1} e ${n2} é igual a <strong>${soma}</strong>`
    }
    </script>

  21. 15:50 entrou, saiu, entrou, saiu…

    eu fui obrigado a deixar o script assim pq n tenho maturidade

    <script>

    var a = window.document.querySelector('div#area');

    function clicar() {

    a.innerText = 'Clicou!';

    }

    function entrar() {

    a.innerText = 'Entrou rsrs';

    }

    function sair() {

    a.innerText = 'Saiu oniichan :3'

    }

    </script>

  22. O segundo exercício para mim não deu certo, mesmo eu tendo copiado ele.
    se alguém puder ver oque tem de errado no meu código ficarei muto agradecido

    <!DOCTYPE html>

    <html lang="pt-BR">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    </head>

    <body>

    <h1>Somando Valores</h1>

    <input type="number" name="txtn1" id="txtn1">

    <input type="number" name="txtn2" id="txtn2">

    <input type="button" value="Somar" onclick="somar">

    <div id="res">Resultado</div>

    <script>

    function somar() {

    var tn1 = document.getElementById('txtn1')

    var tn2 = document.querySelector('input#txtn2')

    var res = document.getElementById('res')

    var n1 = Number(tn1.value)

    var n2 = Number(tn2.value)

    var s = n1 + n2

    res.innerHTML = s

    }

    </script>

    </body>

    </html><!DOCTYPE html>

    <html lang="pt-BR">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    </head>

    <body>

    <h1>Somando Valores</h1>

    <input type="number" name="txtn1" id="txtn1">

    <input type="number" name="txtn2" id="txtn2">

    <input type="button" value="Somar" onclick="somar">

    <div id="res">Resultado</div>

    <script>

    function somar() {

    var tn1 = document.getElementById('txtn1')

    var tn2 = document.querySelector('input#txtn2')

    var res = document.getElementById('res')

    var n1 = Number(tn1.value)

    var n2 = Number(tn2.value)

    var s = n1 + n2

    res.innerHTML = s

    }

    </script>

    </body>

    </html>

  23. Em plena quarentena vendo esse curso e vc me faz um projeto desse: Entrou, saiu, entrou, saiu… Da até uma depressão 🙁
    OBS: Estou falando desse entrou e saiu em todos os sentidos da frase rsrs ( ͡° ͜ʖ ͡°)

  27. Olá, acho fantástica sua didática para o curso, porém alguns comandos não estão funcionando.

    Para complememtar o comentário, segue o código que está funcionando!

    <body>

    <h1>Iniciando estudos em DOM em JavaScript</h1>

    <p>Paragrafo1: Aqui vai o resultado</p>

    <p name="PAR2">Parágrafo <strong>2</strong></p>

    <div name="DIV1">Clique em mim</div>

    <script>

    var p1 = document.getElementsByName("PAR2")

    var x2 = document.getElementsByName("DIV1")

    window.document.write(p1[0].textContent)

    p1[0].style.background = 'green'

    p1[0].innerText = 'Primeiro parágrafo '

    x2[0].style.background = 'red'

    window.document.getElementsByName('PAR2')[0].innerText = "Paragrafo 1"

    window.document.getElementsByName('DIV1')[0].innerText = "Teste DIV"

    </script>

    </body>

  29. Primeiramente quero parabenizar ao professor Guanabara por todos os projetos desenvolvido pelo Curso em Vídeo! E aproveito para deixar uma perguntinha técnica: Como poderia imprimir uma mensagem usando place holders onde a variável númerica mostrará além do seu valor, um número com valor fixo de casas decimais e trocando o ponto por virgula, ou seja, algo parecido a isto:

    var numero = document.getElementById(´num´)
    document.write(`${numero.value.toFixed(3).replace(´.´,´,´)}, é o resultado da operação`)

    Um trechinho para exemplificar o que quero dizer. Embora sei que ele não funciona, mas serve apenas para transmitir a ideia. Agradeço se alguém puder me ajudar com a questão.

Leave a Reply