Classificação
0 %
Popularidade
Opine
Descrição:
Vamos fazer alguns exercícios de JavaScript? Chegou a hora de provar a si mesmo que todo o seu esforço está valendo a pena…
function comparador() {
let ano = document.getElementById("ano");
let anoNumerico = Number(ano.value);
const anoPC = new Date();
let anoAtual = anoPC.getFullYear();
let idade = anoAtual – anoNumerico;
let genero = document.getElementsByName("gender");
const foto = document.getElementById("imagem");
const paragrafo = document.getElementById("paragraph");
const paragrafo1 = document.getElementById("paragrafo1");
if (genero[0].checked && idade <= 17) {
paragrafo1.innerHTML = `Detectamos um menino de ${idade} anos`;
foto.style.display = "block";
foto.src = "img/menino.jpg";
paragrafo.style.display = "none";
} else if (genero[1].checked && idade <= 17) {
paragrafo1.innerHTML = `Detectamos uma menina de ${idade} anos`;
foto.style.display = "block";
foto.src = "img/menina.jpg";
paragrafo.style.display = "none";
} else if (
genero[0].checked &&
idade >= 18 &&
genero[0].checked &&
idade <= 58
) {
paragrafo1.innerHTML = `Detectamos um homem adulto de ${idade} anos`;
foto.style.display = "block";
foto.src = "img/homem-jovem.jpg";
paragrafo.style.display = "none";
} else if (
genero[1].checked &&
idade >= 18 &&
genero[1].checked &&
idade <= 58
) {
paragrafo1.innerHTML = `Detectamos uma mulher adulta de ${idade} anos`;
foto.style.display = "block";
foto.src = "img/mulher-jovem.jpg";
paragrafo.style.display = "none";
} else if (genero[0].checked && idade > 58) {
paragrafo1.innerHTML = `Detectamos um Senhor de ${idade} anos`;
foto.style.display = "block";
foto.src = "img/idoso.jpg";
paragrafo.style.display = "none";
} else if (genero[1].checked && idade > 58) {
paragrafo1.innerHTML = `Detectamos uma Senhora de ${idade} anos`;
foto.style.display = "block";
foto.src = "img/idosa.jpg";
paragrafo.style.display = "none";
} else if (anoNumerico === 0 || anoNumerico > anoAtual)
alert("Verifique a informação!");
}
NOVIDADES:
*Não comentei no último vídeo do ex014 porque o YT bloqueou o comentário por algum motivo :/
Utilizando o DOM para CRIAR um ELEMENT:
Para CRIAR um NOVO ELEMENT e ADICIONÁ-LO no HTML utilizando o DOM você deve:
1° – Criar um ELEMENT NODE.
2° – Definir ATRIBUTOS a ESTE.
3° – ANEXAR ESTE (ELEMENT NODE + ATRIBUTOS) a um HTML ELEMENT já existente.
Diferença entre ELEMENT e ELEMENT NODE:
ELEMENT é um TIPO ESPECÍFICO de NODE. Dentre os 12 tipos de NODES existentes, o ELEMENT é o tipo: 1.
ELEMENT NODE é QUALQUER OBJETO dentro de uma árvore DOM. Pode ser QUALQUER um dos 12 tipos de NODES existentes, como: um Element(1), um Attribute(2), um Text(3), um Comment(8), etc…
Na aula usou-se estes 3 métodos:
O método .createElement() serve para CRIAR um ELEMENT NODE. Syntax:
document.createElement(type)
*Como PARÂMETRO, insere-se o NOME do ELEMENT desejado.
*O NODE TYPE é DETERMINADO AUTOMATICAMENTE de acordo com o NOME inserido.
*Para saber mais, Google: "node types w3schools"
O método .setAttribute() serve para CRIAR/ALTERAR um ATRIBUTO e DEFINIR um VALOR à ele. Syntax:
element.setAttribute(name, value)
*Como PARÂMETRO, primeiro insere-se o NOME do ATRIBUTO que você deseja CRIAR (ou alterar, caso ele já exista).
E depois insere-se o VALOR desejado para este ATRIBUTO.
O método .appendChild() serve para ANEXAR um NODE ELEMENT como FILHO de um ELEMENT já existente. Syntax:
element.appendChild(node) OR node.appendChild(node)
*Como parâmetro, insere-se o NODE que será ANEXADO como FILHO.
Ex da aula:
var img = document.createElement('img')
*Criou-se um ELEMENT <img> . Este foi guardado dentro de var img .
Temos um ELEMENT <img> , ENTRETANTO:
*Este NÃO TEM ATRIBUTO ALGUM ainda.
*Este NÃO TEM CONTEÚDO ALGUM ainda.
*Este NÃO ESTÁ em LUGAR ALGUM ainda.
img.setAttribute('id', 'foto')
*Criou-se o ATRIBUTO id="foto" para var img .
Temos um ELEMENT <img id="foto"> , ENTRETANTO:
*Este NÃO TEM CONTEÚDO ALGUM ainda.
*Este NÃO ESTÁ em LUGAR ALGUM ainda.
img.setAttribute('src', '**diretórioDeCadaFoto**')
*Criou-se o ATRIBUTO src="diretórioDeCadaFoto" para var img .
Temos um ELEMENT <img id="foto" src="diretórioDeCadaFoto"> , ENTRETANTO:
*Este NÃO ESTÁ em LUGAR ALGUM ainda.
res.appendChild(img)
*Anexou-se o ELEMENT <img>, junto de TODOS os seus ATRIBUTOS, como FILHO da div#res.
Algumas modificações que fiz:
Para acrescentar um botão de "REINICIAR" ao lado do "VERIFICAR":
Dentro de modelo.html , criei este input LOGO ABAIXO do BOTÃO de VERIFICAR:
<input type="button" value="Reiniciar" onclick="reiniciar()">
Dentro de script.js , criei esta função LOGO ABAIXO da function verificar () :
function reiniciar() {
var Fano = document.querySelector('input#txtano')
var res = document.querySelector('div#res')
Fano.value = '' // o input do ANO ficará VAZIO.
Fano.focus() // o input do ANO receberá FOCO, ou seja, será SELECIONADO automaticamente.
res.innerHTML = 'Preencha os dados acima para ver o resultado!' // a imagem será substituída pelo texto padrão.
}
Para o texto "Preencha os dados acima para ver o resultado!" também ficar CENTRALIZADO, coloquei dentro de estilo.css :
div#res {
text-align: center;
}
Para a FOTO não ficar GRUDADA com o texto `Detectamos um(a) ${gênero} com ${idade} anos de idade`, coloquei dentro de script.js :
img.style.paddingTop = '15px'
E se o gênero da pessoa for MENINE?
Com as aulas eu aprendi a LER o código como se estivesse lendo um livro, com os exercicios estou aprendendo a realmente a programar… Pra galera que ta começando agora, façam tudo e complementem pesquisando no YT: Desenvolvendo Calculadora com JS + HTML + CSS, Desenvolvendo site com JS etc… Existem diversos videos que você pode assistir e ao mesmo tempo ir copiando, isso ajuda MUITO!
essa de
var img = document.createElement('img')
img.setAttribute('id', 'foto')
me quebrou todo kkkk jesus amado, tentei fazer do jeito q tava no video anterior mas n consegui, ai tive q refazer do jeito q ta nesse video
ainda deu uma travada nas condiçoes aninhadas mas no fim deu tudo certo
o meu res.appendChild(img) e o res.stle.textAlign = 'center' não funcionaram aqui no meu
Por algum motivo o meu não ta aparecendo a imagem só aquele icone de quando a imagem não carrega
O meu não identifica números, sempre dá NaN, não importa o quanto altero, e o inspetor do Google n mostra erro
Quebrei cabeça um monte na hora da foto, até perceber que tinha digitado 'sre' ao invés de 'src'
Otimo exercicio de coisas assim q eu preciso para melhor aprender!
Muito bom prof. Guanabara!!! E obrigado pelos conselhos!! To seguindo!!!
Recomendo que vocês peguem imagens diferentes pra editar e mudar o tamanho e treinar.
As primeiras imagens demorei um pouco pra editar, mas agora.. até brinquei. Editei uma em 30 segundos e agora a outra em 24.
Salva imagem, seleciona em uma proporção próxima, ctrl c, ctrl n, enter, clica no plano de fundo, aperta delete, aperta alt ctrl i, digita 250, tab tab, 250 e aperta enter, arquivo, salvar para web em png24 e salva.
To orgulhoso de conseguir editar a imagem em 24 segundos 🤣🤣
No meu codigo estava dando um erro porque eu estava usando && em vez de || , so uma dica pra quem der erro, quebrei a cabeça ate achar isso!
17:22 ( ͡° ͜ʖ ͡°)
Eu não estava conseguindo nem a pau colocar a var "Genero" no InnerHTML, só a var "idade" estava aparecendo, fiquei fazendo e refazendo até que decidi não colocar o "else if" na função, somente o else, e deu certo, nn sei pq, mas deu ksksksk
function verificar(){
var data = new Date()
var ano = data.getFullYear()
var fano = document.getElementById("txtano")
var res = document.getElementById("res")
if(fano.value.length == 0 || fano.value > ano){
window.alert("[ERRO] Verifique os dados e tente novamente")
} else{
var fsex = document.getElementsByName("radsex")
var idade = ano – Number(fano.value)
var genero = " "
if(fsex[0].checked){
genero = "Homen"
} else{ /*Somente tirei o "if" daqui*/
genero = "Mulher"
}
res.innerHTML=(`Detectamos ${genero} com idade ${idade} anos.`)
}
}
👏👏👏👏👏👏👏👏👏👏
como tem gente que acha que essas aulas de exercicios nao são importantes???? é um SUPER complemento dos estudos
Alguem poderia me ajudar quando vou transormar 'res' em variavel da o seguinte [erro]é declarado, mas seu valor nunca é lido. [6133] ja procurei na net refiz o codigo varias vezes e nao consegui encontrar o Erro!
👏👏👏 muito bom!
Uma dúvida: o site criado (esse "Verificador de Idade") só funciona com o Visual Stúdio Code aberto?
Obrigado.
graças a Deus pai funcionou tudo de primeira, RECEBA!!
vídeo incrível, junto da galera dos comentários ajudaram de mais <3 valeuzão
Alguém também teve problemas em deixar o texto "Detectamos GENERO com IDADE anos" aparecer em cima da foto? O meu ta ficando do lado e so vai pra cima quando a idade fica com 3 caracteres, exemplo : 110 anos
Não estou conseguindo inserir as imagens na condição das idades, alguma dica/ ajuda?
Top demais
Alguém pode me ajudar!? minhas imagens estão aparecendo ao lado da template string invés de aparecer abaixo dela!
testei em alguns navegadores, e apenas o firefox puxa o código correto, no chrome fica uma caixinha pequena, isso em modo tela cheia no desktop. seria algo com ecmaScript?
Thanks from 2022.
Aprendi demais nesses dois exercícios, prof!! Valeu demais!
Eu não consegui resolver totalmente o exercício mas estou feliz por ter tentado. Estou estudando e aprendendo com os vídeos do canal e vou continuar me esforçando!
guanabara parece que tá doidão quando ouvimos na velocidade 0.5x kkkkkkkkkkkkkkk
eu escuto nessa velocidade
Muito bom, so faltou definir a data completa de nascimento, visto que o código não está considerando o mes de nascimento para saber se a pessoa ja fez aniversário no ano. De qualquer forma ficou claro o objetivo.
Ficou top !! mas, não coloquei o texto ao centro com javaSctipt e, sim, com CSS.
Aos 13:08 ele colocou Ano Nascimento = 0
Não deveria chamar o ALERT com o ERRO VERIFIQUE OS DADOS E TENTE NOVAMENTE!
passei 10 horas nessa aula, o codigo funcionava mais a imgs davam erro, entao fiquei ate conseguir, o domingo foi produtivo!
Estou tendo um problema, o inspecionar acusa que a funcao verificar nao esta definida,embora o codigo esteja igual : /
img{
padding: 10px;
margin: auto;
display: flex;
text-align: center;
width: 150px;
height: 150px;
border-radius: 70px;
}
quem quiser copiar, fica mais bonitinho.
Top!!!!!! aula…
Hello! Alguem mais teve problemas "bug" com o comando checked? Eu tentei diversas vezes, olhei todo o código exatamente e não está executando o checked.
A parte do codigo:
if (fano.value.length == 0|| Number(fano.value) > ano) {
window.alert('[ERRO] Verifique os dados e tente novamente!')
Não funcinona, a variavel recebe um numero, e o lenght é só pra arrays e strings, ou eu to enganado?
To tentando colocar as imagens colocando um id img no html, mas quando chamo no js nao muda a imagem, alguem sabe me dizer pq ?
😔😔Dois dias quebrando a cabeça, por causa de uma letra errada kkkkkkk. Agora tá rodando 👋👋👋👋, não desista🚀
Minha function não funciona….
Estou adorando esses cursos. Tou aprendendo mto, nesse exercicios eu até mudei a forma que aparece. o JS detecta qnd é Criança, Adolescente, Jovem, Adulto e Idoso ^^