DOM Events - JavaScript Course #10
HTML-код
- Опубликовано: 1 янв 2025
- Have you understood how the DOM works with JavaScript? Can you create functions in JavaScript? Can I bind a function to an event in an HTML5 form using JavaScript? Do you know how to get values inside text boxes and make calculations with them?
Well, to answer these and many other questions, watch this Beginner JavaScript Course lesson until the end. And do not forget to practice all the activities we do during the video on your own computer.
JavaScript Course Course and ECMAScript for Beginners, created by Professor Gustavo Guanabara for the channel CursoemVideo.
Video Course
Be a supporter: cursoemvideo.co...
Website: www.cursoemvide...
RUclips: / cursoemvideo
Facebook: / cursosemvideo
Twitter: / cursosemvideo
Twitter: / guanabara
Instagram: / cursoemvideo
Instagram: / gustavoguanabara
Sponsorship
Google: www.google.com
#CursoemVideo #JavaScript #EcmaScript #ModuleC #Lesson10
Dica: se você digitar div#area e apertar tab ele cria automático . Isso funciona tbm para classes e para tags personalizadas!
Valeu men!
É incrível como quase todo dia eu descubro uma feature nova do VS Code rsrsrs.
Pesquisem vídeos sobre como utilizar o Emmet (extensão embutida no VS Code) e vão se surpreender ainda mais!
assim como se criar div.classe , sendo que classe = nome que você queira ele cria o elemento com a classe já, e serve pra qualquer marcador.
Valeu pela dia, mano
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!!!
vlw brother, as vezes só precisamos de um incentivo
Lucio, não tem idade para fazer nada, com um pouco de pratica, sem cérebro se adapta á fazer qualquer coisa, independente da idade.
Siga em frente que você consegue. Abraço.
só falto falar seu ip
E eu 65, firme e forte, eh, eh
É isso ai, vamos lá. Fé, foco e determinação.
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
Estamos on
deus abençoe
tamo junto em 2k22
melhor comunidade q eu já vi
Ok obg
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.
obrigado pela dica,vai ser de grande valia amigo!
É só segurar o Alt e jogar pra baixo.
@@leroperih3369 segura o Alt e jogar pra baixo vc move a linha inteira pra baixo. O que o Gabriel explicou é uma forma de duplicar a linha, utilizando o shift+alt+seta pra baixo.
@@leroperih3369 Caraí kkkk essa não sabia, vai ajudar muito
Nesse caso eu duplico com ctrl+d
Estou adorando este curso. {deixe o seu like aqui se está assistindo em 2024}
Tambémmmmmmmmm
Tbm estou, e tô começando do zero esse é meu primeiro curso na área. Gostando mt
28/06/2024
Podiam criar um servidor no discord pra quem ta aprendendo a programar em 2024 trocar ideias e duvidas
Fazendo o curso em 2023, maravilha, a didática do Gustavo é única, parabéns pelo conteúdo!!
Eu tbmm
@@brendaiochem3234 eu tambem. Vamos estudar juntos... quem quer?
Iniciando do zero esse ano também...acho que estamos um pouco atrasados 😅
@@michaelsousa3476 realmente kkkk mas bora la que da tempo
Eu tbm fazendo o curso de JS em 2023.
Sucesso galera, vqv!!!
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.
Pois é, de primeira fiz esse curso de JS, sem ter base nenhuma de HTML e CSS, e tive muita dificuldade, aí fui lá, fiz até o módulo 4 (estou esperando o 5 kkk), e agora voltando aqui no de JS, estou entendendo bem mais.
Digo o mesmo. Comecei por aqui e fiquei em choque kkj. Pensei melhor e fiz os 4 modulos de HTML e CSS. Acabei aproveitando e fazendo o de Algoritmos e Lógica de programação também. Agora as coisas aqui estão até mais previsiveis. Faço a mesma recomendação.
simm, na real o recomendado e estudar html e css primeiro. se nao fosse o curso de html e css ia ter que aprende 3 coisas ao mesmo tempo
Olha só quem tá aqui
@@Renanzeetos tá me perseguindo
Tem gente que nasceu com um DOM, esse cara nasceu com o DOM de ensinar... Muuuuitooooo Obrigadaaaa!!!
Realmente um DOM kkkkkkk
kkkkkkk
É que os pais dele souberam criar uma boa árvore de DOM😌😌
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}!`
A famosa crase, lembrou da crase, não esquece mais este comando kkk, pra mim funcionou k
meu código não faz a soma ja procurei todo tipo de erro apenas não soma
mano boa noite muito obrigado pela dica, perdi 2 exercício por não saber disso dava erro...
@@toquesderestaurante689 iqualmente..
pedi ajuda ao chat gpt e funcionou, meu erro foi "Typo em "onclick": A palavra "onclick" está escrita como "onclik"." por causa de um C o codigo nao estava funcionando ksksk
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.
Thank you boy
Gustavo Guanabara tem que ser tombado como patrimônio historico cultural do Brasil. Melhor professor.
Assisto um ou dois vídeos por vez para não forçar a barra. Anoto tudo, faço e refaço os códigos para poder fixar.
Os conteudos são de extrema relevância e só tenho a agradecer por tanta dedicação professor.
Fiz o curso de HTML e CSS antes de começar JS, confesso que chegar no curso de JS já sabendo algumas coisas é muito melhor.
eu ja estou nbessa aula, estou indo do JS ai vou pra html e css depois rsrs m, um pouco mais trabalhosso, mais sei que vou iir pro html um pouco mais sagas, afinal, sou ZERO dev e sobre o assunto.
Eu comecei e quando cheguei na aula 5 eu já consegui fazer uma calculadora de imc, ficou feia, aí estudei html e CSS e deixei ela menos feia, chegando nesta aula eu já tenho em mente projetos maiores que já estão em andamento, eu aconselho a qualquer um a assiirr e fazer algo que queira, tipo um projeto, só que tu vai pegar e dividir ele em pequenas partes e pondo aos poucos o conhecimento adquirido em prática, melhora muito o aprendizado.
Cara to amando a programação, fiz uma calculadora inteira sozinho só utilizando os conhecimentos adquiridos aqui, top de mais Gustavo, espero um dia chegar ao seu nivel de conhecimento
DICA:
o comando onmouseenter foi trocado por onmouseover nas atualizacoes atuais
VALEUUU !!!!
VLW
vlw!
Verdade! Não achei onmouseenter no dropdown e o mais próximo era o onmouseover e realmente funcionou. Tks!
Alguém me ajuda o meu Eventlistener não funciona ele está assim:
a.addEventListner('click'. clicar)
a.addEventListner('mouseenter'. entrar)
a.addEventListner('mouseout'.sair)
cara eu fico impressionado como esse tipo de material é disponibilizado gratuitamente pelo canal do Curso em Video, so merece cada vez mais admiração!!!
assistindo em 20/02/2024 e gostando muito, vamos nessa!!!
Assistindo cada aula pelo menos 2 vezes, mas não avanço enquanto não entendo e consigo colocar na prática.
Eu também . Sabe quando você deixa o video de lado e tem que apenas acessar a sua mente ? . Então , é nessa hora que eu vejo se eu entendi ou não . Se eu tenho um raciocínio do que fazer passo a pass ou não . Eu volto e assisto de novo . Uso o notion pra fazer todas anotações e ainda estou colocando imagens , pois consigo aprender melhor assim . Acho que consigo aprender essa parada . É complexo no começo pra tudo , mas com prática acredito que dá sim !
"Se você pensou em colocar um monte de ta errado"
ta lendo meus pensamentos Guanabara? kkk que professor...
toda vez que estou programando e coloco o lembro disso,e fico rindo sozinha e as pessoas acha q eu sou louca.. ruclips.net/video/CV_73XiVfOw/видео.html
Estava penando no curso que eu comprei da EBAC, que promete do zero ao pro, mas o professor é tão sem didatica que eu tive que procurar ajuda e que felicidade encontrar essa playlist gratuita. Nesse aqui eu pagaria os quase 5 mil reais que ta indo pro lixo. Para voces terem noção, eu quase desisti, pensei que não era pra mim, so continuei pq vi a quantidade de aluno que reclama e eles não fazem nada.
Ué, esse cursos da ebac não são bons? vejo um carinha aqui do youtube só fazendo propaganda kkkk
aconteceu o msm comigo, comprei um curso de dois devs que diziam ensinar do zero (até que são bons), daí já tinha feito todo o curso de HTML5 e CCS3 do Guanabara antes. Pois bem, comecei o curso que comprei e fui assistir as aulas de HTML e CSS pois algo poderia ter atualizado, percebi rapidamente a diferença na didática deles e na didática do Guanabara. Algumas coisas eles explicam muito superficialmente (eu mesma não entenderia se já não tivesse aprendido com o mestre). Resumindo, vale muito mais a pena assistir as aulas do Guanabara pq ele explica tudo com tanto detalhe e perfeição que vc REALMENTE aprende.
Mano esse curso tem dois anos que foi upado e estou aqui aprendendo muito com ele, sério achei que seria bem complicado mas a forma que o Guanabara ensina simplifica tudo, é impressionante quando vou fazer a revisão no outro dia e consigo explicar tudo pra mim mesmo, gratidão Guanabara e Google por disponibilizar isso pra nós. Continuem no foco vocês conseguem tudo
tive um problema com esse ultimo exercício, mas to aprendendo muito também
Gente, pra quem está fazendo esse curso maravilhoso agora, assim como eu, eu tenho uma dica: Escrevam o código sem pressa, meu código não funcionava de jeito nenhum, passei muito tempo procurando o erro, não mostrava no Dev tool do chrome e nem em lugar nenhum, até eu descobrir que eu havia escrito "docment" uma letra me deixou louco nessa linda quarta-feira de manhã.
Mano, passei por coisa igual kkkkk fiquei 10 minutos lendo o código e tentando entender porque não mudava de cor quando o mouse saia da div... ai fui vê e tinha escrito background faltando o "n" ali nele.
@@gabrielvinicius3119 mano kkkkkkkkkkkkk, te falar q aconteceu a mesma coisa cmg, e foi esse tal de background q me pegou esqueci do "n" fiquei meia hora olhando vei tentando entender. mas ao mesmo tempo é legal esse processo.
Acho que disparado esse é um 'erro' que TODO programador tem kkkkskskkkk Quando tá tudo certinho no código mas ele não funciona, é a hora de começar a ver se está tudo digitado corretamente, ódio 💀
caramba guanabara esse final para quem esta iniciando ficou muita informação !! vc simplesmente criou e encerrou a aula!
Vim do curso de python, então achei q ia ser tranquilo por ja está "acostumado' em programar , mas esse final me pegou demais kkkkkkk, ele fez tudo ainda rapidão
caraaaaaa, to muito feliz! com base nesse video consegui fazer um sistema simples de calculadora que usa todas as operaçoes básicas. somar, subtrair, multiplicar e dividir. Tentei dar uma arranhada no meu CSS também pra deixar um pouco mais bonito.. basicamente surgiu meu primeiro projeto! mesmo após 4 anos de video lançado, tem ajudado muito! Abraço.
o codigo funciona normal, porem, tem um pequeno erro nesse codigo. o desafio é alguem saber onde é? já serve como exercicio para quem quiser aprender.. haha.
Vendo esse curso em 2024, que baita curso👏👏👏🏆🙌
Salve Mestre Guanabara e todos que estão acompanhando o curso, sobre o exercício de somar números: Uma coisa que descobri pesquisando é uma forma mais direta de pegar o valor do Input: Em vez de criar uma variável para ligar com o input, e outra variável pra pegar o valor do input, já da pra fazer direto dessa forma:
function calc() {
var n1 = Number(document.getElementById('txtn1').value)
var n2 = Number(document.getElementById('txtn2').value)
var res = n1 + n2
window.alert(res)
}
Grande abraço a todos, e bons estudos!
estava me perguntando se existia uma forma de fazer isso enquanto assistia o video, obrigada.
Testei assim e não funcionou. Mas não sei se é algum outro erro no meu codigo rs, só pra deixar registrado mesmo.
@@alexandresl ei amigo, tenta desta forma
function clicar(){
var tn1 = Number(window.document.getElementById('txtn1').value)
var tn2 = Number(window.document.getElementById('txtn2').value)
let soma = tn1 + tn2
let res = window.document.getElementById('res')
res.innerHTML = `${tn1} + ${tn2} = ${soma}`
}
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
valeu ai parsa
Obrigado cara!
Precisa baixar a extensão no navegador? Não tá funcionando aqui.
Acho que isso é ruim para quem está aprendendo pois tira um pouco do aprendizado, se a extensão perdesse o suporte muitos não saberiam programar, acredito que vale mais aprender no tentativa-erro e quando dominar, usar as ferramentas para ser mais produtivo.
Tem pra celular?
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.
30min depois leio esse comentário e me salvou kkkkk... valeuu!!!
Voçê tem o watch chrome instalado? Eu estava usando o Live server pois vi nos comentarios que era a alternativa...mas acontece que não consigo interajir com o "site" que criei...agredeciria imenso uma ajuda
Olá, criei uma discord sobre programação!
discord.gg/pmeNaksB
Cara o meu nao aparece o resultado final, ja to cabrero aki kakakaka
Kkk fiquei uma cara tentando ver oque eu tinha digitado errado, cheguei a apagar tudo e refazer e nada... Só depois de umas 2 ou 3 hrs que eu tinha desistido e ido descansar achei esse comentário kkk eu tentei trocar tudo pra window.document.querySelector() mas não funcionou
Me empolguei tanto com as aulas, que antes mesmo de começar essa eu já fui tentar fazer um jogo de adivinhação, onde o jogador escolhe um número entre 1 e 50 e a outra pessoa precisa adivinhar; embaralhei duas frases entre os números 1 e 50 para deixar o jogo mais engraçado. Como é um joguinho para quem está bebendo cerveja, uma dessas frases apareceria "Você bebe agora!"
Foi muita coisa para compreender, mas não saí do vídeo até entender direitinho. Para quem está estudando agora, recomendo muito lê os comentários dos vídeos, o pessoal sempre deixa dicas e atualizações relevantes, tem me ajudado bastante. Obrigada, Guanabara, pelo excelente conteúdo que disponibiliza gratuitamente.
Tive a oportunidade de conhecer o canal em 2020. E por burrice minha não foquei, queria resultados rápidos e não tinha paciência para assistir achava muito longo os vídeos. E em pleno 2024 estou eu admirando a didática desse professor top! Já comprei cursos que não chega aos pés do que ele ensina de graça. Que Deus te abençoe sempre!
Assisitindo em 2023, nunca é tarde para começar tudo esta fazendo sentido muito mais facil do que qualquer material que ja vi!!! Parabens
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
Quando eu estudei HTML com o prof. Guanabara eu botava na velocidade 1,25, e agora tem horas que eu tenho que por 0,75 pra acompanhar e fazer. Parece o Mario quando pega a estrela kkkk. Gostaria de agradecer ao Professor Guanabara e ao Google pela imensa contribuição aos meus estudos.
hahahaha e eu que tenho zero conhecimento em java, mentira agora tenho 10 aulas de conhecimento kkkk, mas cada aula levo uma média de 1 a uma 1:30, porque volto, monto arquivos com resumo de cada aula, mas estou curtindo muito, esse professor é muito fera.
Guanabara é o guru dos programadores iniciantes, indico para todo mundo!
A aula é 28 minutos , porém eu demoro ao menos umas uma hora e pouco em cada aula, pois eu façoa anotações, me destraio com alguma coisa e preciso voltar, erro coisa simples no código kk, mas estou aprendendo muito bem todo o conteúdo
KKKKKKKKKKKKKKKKKK to na mesma amigão, comecei a estudar 10:30 e só acabei 12:20, em apenas uma aula, as vezes me pergunto se é bom ou ruim
Tamo junto amigo. Comecei 08:45, são 09:57 e estou na metade da aula. KKKKKKKKKKKKKKKKKKKKKKK
Edit: Acabei oficialmente as 11:10😎😎
curti em mano, tá afim de estudar junto?@@LoopIng-cw6cm
Curso desenvolvimento de sistemas estou no 3º módulo na Etec, nunca cheguei a ver esse tipo de conteúdo, é impressionante o tanto de conhecimento que é adquirido em apenas uma aula do Guanabara!
caramba, serio mano? uma amiga minha vai copmeçar na etec o msm curso q o seu, eu estou estudando por conta, quando ela falou do curso eu imaginei q tbm poderia ter me inscrevido.
@@clickshorts2872 Sendo sincero com vc, acho que é um curso que pode agregar bem no currículo, mas falando de conhecimento, vai depender muito de qual unidade vc entrar, tem muitos professores que estão prontos para entregar o melhor deles para vc, mas tem uns que é difícil kkkkk. Ex: No início, um professor me ensinava a passar um estilo diretamente pelo HTML, invés de ser pelo CSS, isso era feito apenas até o HTML4, e atualmente estamos no HTML5 né.
Eu gosto de dar espaço nos códigos, então fiz assim:
Somando Valores
+
Resultado
function somar()
{
var tn1 = window.document.querySelector('input#txtn1')
var tn2 = window.document.querySelector('input#txtn2')
var res = window.document.querySelector('div#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 ${s}`
}
Seus curso são ótimo.. cria depois um curso de react e react native e nodes
Boaa!!!
Ele não faz curso de frameworks
@@MrMatheus195 me disseram que o react não é um framework, pq é uma biblioteca :v
tbm quero
Kkkkkks acho difícil ele fazer. O intuito do curso video é mostrar o básico pra gente poder se aprofundar. É tipo uma injeção de ânimo pra quem tá começando. 🖖
Melhor coisa que eu fiz foi reassistir essa aula
Cara, que professor sensacional, muitos vedendo curso a preço de ouro, esse cara passa o conhecimento de graça.
Obrigado Gustavo obrigado Google eu queria muito saber isso
Fiz um código com as 4 operações básicas com as coisas q eu aprendi com essa aula. Testem e vejam😊
Calculadora
h1{
font:bolder 25pt Arial;
}
h2{
font: bolder 25pt Arial;
}
input{
font: normal 18pt Arial;
width: 87pt;
text-align: center;
}
input#btop{
font: normal 18pt Arial;
width: 199pt;
margin-top: 2px;
}
div.res{
font: normal 16pt Arial;
margin-top: 3px;
}
Calculadora de Soma
+
Resultado
Calculadora de subtração
-
Resultado
Calculadora de Multiplicação
X
Resultado
Calculadora de Divisão
:
Resultado
function somar(){
var tx1= window.document.querySelector('input#cx1')
var tx2= window.document.querySelector('input#cx2')
var res= window.document.querySelector('div#ress')
var s1= Number(tx1.value)
var s2= Number(tx2.value)
var st= s1 + s2
res.innerHTML= `O resultado da Operação entre ${s1} e ${s2} é: ${st}`
}
function sub(){
var tx3= window.document.querySelector('input#cx3')
var tx4= window.document.querySelector('input#cx4')
var res= window.document.querySelector('div#resm')
var m1= Number(tx3.value)
var m2= Number(tx4.value)
var st= m1 - m2
res.innerHTML= `O resultado da operação entre ${m1} e ${m2} é ${st} `
}
function mult(){
var tx5= window.document.querySelector('input#cx5')
var tx6= window.document.querySelector('input#cx6')
var resv= window.document.querySelector('div#resv')
var v1= Number(tx5.value)
var v2= Number(tx6.value)
var mt= v1 * v2
resv.innerHTML= `O resultado entre a multiplicação de ${v1} e ${v2} é: ${mt} `
}
function divi(){
var tx7= window.document.querySelector('input#cx7')
var tx8= window.document.querySelector('input#cx8')
var resd= window.document.querySelector('div#resd')
var d1= Number(tx7.value)
var d2= Number(tx8.value)
var dt= d1 / d2
resd.innerHTML= `O resultado da divisão entre os números ${d1} e ${d2} é: ${dt} `
}
@@denilsonpitadeandrade7272 pow ty escreveu um mini livro
@@fabiorodrigues2644 um mini não. Um inteiro kkkk
Fiz esse outro código que resolver equações de Bhaskara, passo a passo. Unica coisa que usei fora das aulas foi um metodo/função (não sei o nome, usava no Python) pra Raiz Quadrada.
Recomendo vcs darem uma olhada usando o Live Server.
Depois vou testar mais pra ver se tem erros matematicos com números espeficos, ainda não tive tempo pra isso.
Bhaskara
input {
padding:5px 10px;
}
div#a {
font: normal 18pt Arial;
}
div#b {
font: normal 18pt Arial;
}
div#c {
font: normal 18pt Arial;
}
div#passo1 {
margin-top: 10px;
}
div#linha1 {
margin-top: 10px;
}
div#passo2 {
margin-top: 10px;
}
div#linha5 {
margin-top: 10px;
margin-block-end: 10px;
}
div#linha9 {
margin-block-end: 10px;
}
div#resultado {
margin-top: 10px;
}
Bhaskara
Formula: ax² + bx + c = 0
a:
b:
c:
RES:
var txtb = document.querySelector('input#valor_b')
var txtc = document.querySelector('input#valor_c')
var txta = document.getElementById('valor_a')
function calcular() {
var a = Number(txta.value)
var b = Number(txtb.value)
var c = Number(txtc.value)
delta = (b**2)-4*(a*c)
//'Δ = b2 - 4.a.c'
delta >= 0?bhaskara():delta_menor0()
}
function delta_menor0() {
resultado.innerHTML = 'RES: Δ < 0'
linhas_delta()
}
function bhaskara() {
resultado.innerHTML = 'RES: BHASKARA'
linhas_delta()
}
function linhas_delta() {
var a = Number(txta.value)
var b = Number(txtb.value)
var c = Number(txtc.value)
delta = ((b)**2)-4*((a)*(c))
raiz_delta = Math.sqrt(delta)
passo1.innerHTML = `1) Calculando o Δ da equação completa:`
linha1.innerHTML = `Δ = b2 - 4.a.c`
linha2.innerHTML = `Δ = ${b}² - 4 . ${a} . ${c}`
linha3.innerHTML = `Δ = ${b**2} - 4 . ${a} . ${c}`
linha4.innerHTML = delta
delta < 0?"":passo2.innerHTML = `2) Aplicando Bhaskara:`
delta < 0?"":linha5.innerHTML = `X = (-b +- √Δ)/2a`
//Calculando X'
delta < 0?"":linha6.innerHTML = `X' = (-${b} + √${delta})/2.${a}`
delta < 0?"":linha7.innerHTML = `X' = (${-b} + ${raiz_delta})/${2*a}`
delta < 0?"":linha8.innerHTML = `X' = (${-b + raiz_delta})/${2*a}`
delta < 0?"":linha9.innerHTML = `X' = ${(-b + raiz_delta) / (2*a)}`
//Calculando X"
delta < 0?"":linha10.innerHTML = `X" = (-${b} - √${delta})/2.${a}`
delta < 0?"":linha11.innerHTML = `X" = (${-b} - ${raiz_delta})/${2*a}`
delta < 0?"":linha12.innerHTML = `X" = (${-b - raiz_delta})/${2*a}`
delta < 0?"":linha13.innerHTML = `X" = ${(-b - raiz_delta) / (2*a)}`
}
Minha mente ta explodindo com esse curso!
melhor canal de ensino de linguagem de programação de todos os tempos !! (4x "de" )
Essa aula foi muito boa, ate agora melhor video :)
Vendo esse curso eu percebo como aquele monte de exercíco em Pythopn ajudou #praticar e corrigir
Parabéns para toda equipe do Curso em Vídeo!! Excelente curso
Nessas 2 aulas aprendi mais que nas 8 anteriores, mas tbm tive que assistis esses 2 ultimos vídeos umas 10x
Só tenho uma coisa a dizer sobre esse professor e suas aulas : Sensacional , ele está salvando minha vida com JS , estava em outro curso de JS não consegui assimilar nem 20% com esse professor estou assimilando 100%. Está de parabéns
Meu Deus se não aprender com esse cara não aprende com ninguem que didática de ensinamento, saca demais do assunto tem carisma nos puxa pra dentro das aulas não dá nem vontade de parar (mas é necessário...rsrsrsrsr pois precisa se treinar o aprendido na aula) já vi videos de alguns aqui no youtube e esse cara á o melhor... parabens gustavo guanabara vc é top das galáxias.
Como que ele adivinhou que eu pensei em dar um espaço com ? kkkkkk !! Aula top esse professor é Monstrão mano !!! TEM O DOM DE ENSINAR !!! Valeu Professor !!!
Parabéns Gustavo Guanabara. Ri um bocado em 26:27 no lance do kkkkkk
" TA PENSANDO UM POUCO ERRADO, MEU QUERIDO " kkkk
Nem se usa mais margin e padding, agora é só no Bootstrap com a colunas responsivas rsrsrsrs
Dica: para as suas alterações aparecerem na hora no seu navegador, usando o Live Server, habilite a opção de salvamento automático no VSC!
arquivo>salvamento automático
cara, finalmente, consegui fazer sozinho e entender o que eu estava fazendo, pqp q felicidade
Depois de terminar a aula, comecei a mexer com essas operações.
Fui fazendo a subtração, divisão, módulo, multiplicação, potenciação e porcentagem!
Onde que curte duas vezes???? Muito show, parabéns!!!
Criando duas contas
@@rafaelmarques3579 palhaço kkkk
@@rafaelmarques3579 kkkkkkk
A única dúvida que ficou foi:
Como pode alguém dar deslike em um vídeo desse? Jamais entenderei... (Em um curso desse)
tem pessoa que acha que se aprende por osmose :S
É que tem gente que não sabe nada de nada e não tem nada para ensinar, isso causa uma inveja que corroe o sujeito por dentro. rs
A explicação é simples: Vontade de aparecer!
@@salatvieira Com certeza! Deve ser MUITA vontade de aparecer!
Tem gente que acha que sabe muito e faz isso.... Lamentável.
Aula top!! Muito bom. É maravilhoso ver o negocio acontecer e certo ainda uashauhsuh. Valeu mais uma vez Guanabara!
Vdd linda
faço análise e desenvolvimento de sistemas na Metodista. Quem me dera os professores de lá tivessem metade da didática do Guanabara. Sensacional
O Melhor Curso de #JavaScript do Brasil, #Guanabara formando mais de 1 milhão de #novos_Programadores.
Uma dica pra quem ta no Live Server, para abrir rápido a página do Chrome é só apertar Alt + L + O
o problema é que agora ñ faz a atualização quando tento abrir com o LiveServer! porque?
eu usei a mesma que ele usou pra abrir o watch in chrome, o ctrl + shift + P
Para quem ta com problema na hora de somar (ultimo exemplo) eu tirei o number na hora de converter e deu certo. Usei apenas o parseInt(n.value)
o meu tbm n tava dando certo. dps ví q tinha colocado o N de Number minúsculo
Rapaz, não consegui.. está do mesmo jeito descrito na tela, minúscula e maiusculas, mas está dando erro.
@@lucasfreitas7351 sem vê o código fica difícil ajudar, mas se tivesse realmente igual, funcionária, tenta refazer do zero.
@@ojhonx1906 alterei alepenas os dados do script, funcionou. Obrigado!
@@lucasfreitas7351 olá como vc fez? . Estou com essa mesma dificuldade
Curso de Angular por favor.... Great Teacher , Congratulationssss.....
top demais... Aproveitando o exercicio dessa aula, acrescentei outras operações aritimeticas. Aqui vai o código completo:
Somando Valores - Parte 3
body {
background-color: blue;
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
input {
display: block;
margin: auto;
}
div.inputs {
margin-bottom: 10px;
}
button {
margin-top: 10px;
background-color: #00005c;
color: white;
width: 100px;
height: 30px;
border: 1px solid gray;
font-size: 1em;
}
button:hover {
cursor: pointer;
background-color: #0000be;
}
Calculando Valores
Informe o 1° número:
Informe o 2°° número:
Calcular
function calc() {
let n1 = Number(document.querySelector('input#n1').value) // Pega o valor que foi inserido no input e já converte para number
let n2 = Number(document.querySelector('input#n2').value) // Pega o valor que foi inserido no input e já converte para number
let soma = n1+n2
let subtra = n1-n2
let mult = n1*n2
let divisao = n1/n2
let pot = n1**n2
let rdd = n1%n2
document.querySelector('p#soma').innerHTML = `Resultado da soma é: ${soma}`
document.querySelector('p#subtra').innerHTML = `Resultado da subtração é: ${subtra}`
document.querySelector('p#mult').innerHTML = `Resultado da multiplicação é: ${mult}`
document.querySelector('p#divisao').innerHTML = `Resultado da divisão é: ${divisao}`
document.querySelector('p#pot').innerHTML = `Resultado da potenciação é: ${pot}`
document.querySelector('p#rdd').innerHTML = `Resultado do resto de divisão é: ${rdd}`
}
Estou me divertindo muito aprendendo javascript. Muito bom os vídeos. Vc explica como se eu tivesse algum tipo de deficiência mental, justamente o jeito que eu preciso que me ensine.
Cara esse Curso e o Curso de Python são demais !! Obrigado Profº Guanabara,essa aula ficou foda, vc tem mesmo o DOM de ensinar kkkkkk✌💻
caso alguém esteja com dúvidas envolvendo com o function sair() e o entrar() : utilize no lugar de innerText :InnerHTML em um , e outro mantém o text .
fiz e não está dando
Passei...1 dia inteiro, pq mesmo eu copiando idêntico não estava funcionando...
Até eu ver que na linja 11 o nome do id eu coloquei "txtn12".
Agora posso dormir em paz.
Num é que eu tô aprendendo mesmo, um crime uma aula dessa tão boa aqui grátis no youtube...... Obrigado, Deus Abençoe......
O cara é brabo, tô assistindo as aulas revendo tudo o que já aprendi, de vez em quando surge uma explicação que simplifica o que eu já sabia, ou surge alguma coisa complementar, muito bom.
Muito boa a aula!
- CURIOSIDADE-
No exemplo do professor, ele usou uma variável para capturar o valor e passar esse valor para number.
Porém isso pode ser feito durante a captura dos dados:
Ex.
function somar_valores()
{
n1 = Number.parseFloat(window.document.getElementById('txt1').value)
n2 = Number.parseFloat(window.document.querySelector('input#txt2').value)
res = document.querySelector('div#soma')
soma = n1+n2
res.innerText=`A soma entre ${n1} e ${n2} é igual a ${soma}`
}
Além disso podemos fazer dessa forma:
function somar_valores()
{
n1 = Number.parseFloat(window.document.getElementById('txt1').value)
n2 = Number.parseFloat(window.document.querySelector('input#txt2').value)
res = document.querySelector('div#soma')
res.innerText=`A soma entre ${n1} e ${n2} é igual é: `+ Number(n1+n2)
}
boa! fiz assim também, só que simplificado sem o .parseFloat apenas Number().value
Boa, Iury.
Fiquei aqui pensando para que serviria a linha 20:
var res = document.getElementById ('res')
Retirei ela e funciona na mesma... Para que serve mesmo?? É fundamental??
@@adrianoaragaomassa pelo oq eu vi a variável res só é util no primeiro exemplo do mano aí
no segundo não, porque ele nao precisa criar uma variavel pro resultado, já que ele soma os valores concatenando no res.innerText
Ia perguntar isso kkk pq usar outra variável? Só transformar a string
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 ), 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
______________________________
A tag serve para especificar uma ÁREA onde o usuário poderá SUBMETER DADOS. Assim como o método window.prompt(), a tag 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.
Válido? Pretende me pagar um capuccino?
1 - DECODIFIQUE esta "chav piks" com a Cifra de César passo 10:
1olp3po9-1k47-48oo-k34p-n8955m8k3417
nss vc escreveu bastante
agradecido meu nobre
Estou em transição de carreira ,comecei a estudar programação ,estava bem dificil pra mim mas depois que encontrei suas aulas ,tudo se tornou mais facil de aprender , você é muito bom ,Parabens !!
ESSA DICA PRA DEDECTAR ERROS FOI UMA MÃOZOOONA NA RODA ♥
Para quem nao achou o watch in chrome, usa o liveserver. Pois o anterior ficou obsoleto
Uso esse tb
Eu podia ta matando, podia ta roubando e to mesmo. Por favor Guanabara faz um curso de react.js que eu saio dessa vida!
Podem trocar onmouseenter="entrar()" por onmouseover="entrar()" caso não funcione o de vocês
Vlw mano, vim nos comentários pra ver se alguém tinha falado nisso.
Vlw cara
O meu não funcionou nenhuma
up
Up, eu ia falar a msm coisa
29/11/2023 aqui. assistam todos os videos desse canal o cara e insano
A primeira vez que vi DOM fiquei perdidinha, mas com essa explicação ficou bem claro e me deixou bem mais animada a aprender JS. Valeu por disponibilizar esse curso gratuito.
**SE ESTIVEREM COM PROBLEMA NA PARTE DE ${n1} ${n2} e etc... Isso se chama interpolação de variáveis que é trazer os valores dela para dentro da string e nao escrever de forma literal o ${n1} por exemplo. E pra resolver você ao invés de usar aspas simples ou duplas, use as aspas invertidas.
A última linha da Function "res.innerHTML = `A soma entre ${n1} e ${n2} é igual a ${s}.`"
Este "res" praticamente é onde você deseja exibir o resultado. Até no title você pode jogar uma id e trocar esse "res"
Ex.: Página 1
Se você declarar isto no final da function("go.innerHTML = `A soma entre ${n1} e ${n2} é igual a ${s}.`"), o resultado irá aparecer no title.
o meu código roda normal, mas na hora de aparecer o resultado ele não aparece formatado no navegador ele aparece assim: a soma entre ${1} e ${2} é igual á ${3}. Alguém pode ajudar?
@@elvinribas6721 no meu tbm n aparece
Tenho a impressão de que essa aula maravilhosa foi algo difícil para aqueles que estão tendo o seu primeiro contato com a linguagem javascript.
te falar que difícil foi não, o problema foi só processar toda a informação que foi dada.
Todas as aulas do curso são excelentes.
Mas para mim até agora essa é a melhor.
Professor, como aluno do curso de Sistemas para Internet e quase formado em Segurança da Informação, o curso do senhor de JavaScript VALE MAIS QUE OURO! MUITO OBRIGADO!!!!!!!!
Vale apena fazer curso / faculdade nessas áreas? A aprendizagem é boa?
@@reicariri1 Falando por mim. Vale sim! Aprendi HTML e CSS no 1º semestre. Fiquei com uma base boa. Tipo, você não precisa de faculdade para se tornar um desenvolvedor/programador. Hoje, estou aprendendo linguangens de programação como o JavaScript aqui pelo curso do professor, e também Python, por um curso que comprei na Udemy... Porém, ajuda bastente a te direcionar. Sem contar que dependendo do curso, você verá mais assuntos do que programação, como redes, segurança computacional, etc.
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 ( ͡° ͜ʖ ͡°)
KKKK Complicado em amigo
Que desnecessário. Afff
No meu deu NaN, ai depois de 40 min vi que era o 'v' maiusculo nas variaveis: var n1 = Number(tn1.Value) ai deixei var n1 = Number(tn1.value) e foi.
Estava com o mesmo problema, obrigado ajudou muito... Abraços
Muitíssimo obrigado namoral
Salvou pacas
salvo d+ kkkk eu fiquei pensando como pode e ja refiz esse cod umas 3x e nao vai
Mesmo problema aqui , o VisualSC terminou a frase pra mim e colocou maiúsculas, agr funcionou , valeu ai
Questão 01
Resposta: DOM significa Document Object Model
Questão 02
Resposta: Sim consigo, infelizmente não consigo mostrar aqui nos comentários, mas basicamente no topo de todo existe o elemento window depois do window ou melhor os children do window alguns deles são: document, history, location. E assim a arvore vai indo.
Questão 03
Resposta: Parents são aqueles que dão origem aos elementos Child e os elementos Child também podem ser Parents de outros elementos!
Questão 04
Resposta: Por Nome, Por Id, Por Classe, Por Seletor, Por Marca.
Obg
E também a questão 1* - O DOM é um conjunto de objetos dentro do navegador, que vai dar acessos aos componentes internos do website.
Boa noite Professor Gustavo, ontem graças ao seu curso eu e minha esposa conseguimos nosso primeiro certificado de JavaScript, deu para perceber que o curso era para programador que já vinha de outras linguagens, e nós nunca programamos nada e conseguimos por sua causa e forma didática que o senhor ensina.
Obrigada Professor Gustavo Guanabara. Se não fossem suas aulas, sinceramente eu já teria jogado a toalha!
O que usa para colocar o place holder de uma vez só? Vi que isso foi feito no vídeo porém eu preciso digitar ${ } manualmente para só então ele ser reconhecido.
UP
A partir daqui a parada complicou um pouco pra mim, ainda estou cursando CSS e HTML na escola, algumas paradas eu não aprendi ainda.
Não pare! Você já é diferenciado somente por buscar conhecimento aqui no RUclips (plataforma de entretenimento, não de estudos). Boa sorte em sua carreira!
GOOGLE... PLEASE, PATROCINE O PRÓXIMO CURSO AEE!!!
papo reto
Agradeço demais por toda a dedicação e bondade, professor! Que Deus te abençoe, ilumine e proteja sempre! Muito obrigado mesmo! 😀🙌
Sempre gostei de linguagem de computação. Um grande número de conteúdo na internet, devemos observá-lo sem perder do foco, o professor Gustavo Guanabara é o eleito, sem tirar o mérito de outros bons e eticamente não citado neste espaço.
Olá 🦗!
Que legal saber que você sempre gostou de linguagem de computação! Realmente, a internet oferece um vasto número de conteúdos relacionados, e é importante saber filtrar e focar naqueles que são mais relevantes para o seu aprendizado.
Continue seguindo sua paixão e buscando conhecimento. Estamos aqui para te apoiar nessa jornada incrível!
Considere se tornar Estudonauta ou Aluno Apoiador em nosso site para ajudar no seu aprendizado. Com sua dedicação, você vai alcançar resultados surpreendentes! 🌟🖖
O onclick não está funcionando, o que fazer ?
15:50 entrou, saiu, entrou, saiu...
eu fui obrigado a deixar o script assim pq n tenho maturidade
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'
}
Eu meu innerHTML ou Text não altera nada vey. Fiz igualzinho, mas não tem alteração. ALguém com o mesmo problema?
O meu deu um problema semelhante, quando eu vi eu escrevi textn1 ao invés de txtn1
No comando você deve estar usando 'aspas simples' e o correto é utilizar a `crase` para o código funcionar.
eu estava do mesmo jeito *tenta mudar o getSelector pra getElementById* pois esse foi meu "erro"
meu tava tudo em minúsculo e é innerText
Fiquei bastante tempo procurando erro tbm, no meu caso foi os parenteses do evento onclick="somar()"...
deixei de ser teimoso e achar que sabia de tudo e coloquei o window, do jeito que o professor ensinou. eu nao tinha colocado, achando que sabia de tudo. Deu certo.
Guanabara você é um dels, sou seu fã!