"Faça um script que verifique se uma letra digitada num campo de input é vogal ou consoante."
De nossa lista de exercícios de IF e ELSE.
Vogal ou Consoante em JS
Nosso alfabeto possui 26 letras:A – B – C – D – E – F – G – H – I – J – K – L – M – N – O – P – Q – R – S – T – U – V – W – X – Y – Z
Onde temos 5 vogais: A E I O U
E 21 consoantes.
O que vamos fazer é, basicamente, pegar o que o usuário digitou e comparar com tais letras.
"Aff...fazer 26 comparações vai ser bem cansativo!"
Claro que não, paladino das artes JavaScriptianas.
Não precisamos comparar tudo, vamos comparar só com as 5 vogais.
Se der certo, ok é vogal. Senão (else), é consoante!
Formulário de input e o botão:
Quando clicar no botão, será chamada a função checar().
Nesta função do JavaScript, vamos armazenar o caractere digitado pelo usuário na variável letra.
Agora, vem um 'pulo do gato'.
O caractere 'a' é diferente do 'A'.
O caractere 'e' é diferente do 'E', e o mesmo pras outras vogais.
Ou seja, em vez de fazermos 5 comparações (com cada vogal), temos que fazer 10, ok?
Não!
Vamos usar uma função chamada toLowerCase() que passa tudo pra minúsculo, usamos ela assim:
letra = letra.toLowerCase();
Prontinho, tudo em minúsculo agora!
Em seguida testamos a variável letra com 'a', 'e', 'i', 'o' e com 'u':
if(letra=='a' || letra=='e' || letra=='i' || letra=='o' || letra=='u')Se for verdade, cai no IF e dizemos que é vogal.
Se for falso, cai no ELSE e dizemos que é consoante.
Resultado
Digite apenas UM caractere:Código HTML + JavaScript
<!DOCTYPE html> <html> <head> <title>Curso JavaScript Progressivo</title> Digite apenas UM caractere: <input id="char" type="text"> <br /> <button onclick="check()">Checar</button> <script type="text/javascript"> function check(){ var letra = document.getElementById("char").value; letra = letra.toLowerCase(); if(letra=='a' || letra=='e' || letra=='i' || letra=='o' || letra=='u') alert("Vogal"); else alert("Consoante"); } </script> </head> </html>
Exercício hacker
Existem, de cara, duas maneiras de 'quebrar' esse script, ou seja, de hackear ele.Você consegui descobrir?
A resposta está aqui embaixo, escrita em branco, para ler basta selecionar.
Porém, só veja depois de pensar bastante como burlar esse script, ok?
1. Digitar um número
2. Digitar mais de um caractere
onkeypress="if (isNaN(String.fromCharCode(window.event.keyCode))) return true; else return false;"
ResponderExcluirAcredito que exista uma forma menos custosa de criar uma solução para esse problema. Mas, como ainda estou começando, foi assim que consegui criar uma solução para o problema em questão e ainda solucionar o problema de quebra de código:
ResponderExcluirfunction verificar() {
var letra = document.querySelector('input').value;
letra = letra.toLowerCase();
if (letra == 'a' || letra == 'e' || letra == 'i' || letra == 'o' || letra == 'u') {
document.querySelector('p').innerHTML = `A letra "${letra}" é vogal.`;
} else if (letra == 'b' || letra == 'c' || letra == 'd' || letra == 'f' || letra == 'g' || letra == 'h' || letra == 'j' || letra == 'k' || letra == 'l' || letra == 'm' || letra == 'n' || letra == 'p' || letra == 'q' || letra == 'r' || letra == 's' || letra == 't' || letra == 'v' || letra == 'w' || letra == 'x' || letra == 'y' || letra == 'z') {
document.querySelector('p').innerHTML = `A letra "${letra}" é consoante.`;
} else {
document.querySelector('p').innerHTML = `O caractere inserido, "${letra}", não é uma letra.`
}
}
Tem solução mais simples sim, Ricardo, sem dúvidas, que você vai usando ferramentas prontas, da própria linguagem!
ExcluirMas calma, vamos aos poucos...é super mega importante fazer as coisas na mão, 'na raça', pra se tornar um ótimo programador JavaScript!
Só assim você entende como as coisas funcionam 'por debaixo dos panos'.
Parabéns pela solução.
so acheii que o codigo dele ficou grande tipo o do cara que fez o post ta melhor , pq tudo que nao é vogal , ja poderia imprimir a mensagem que nao é volgal e sim consoante , creio que nao a nessecidade de criar uma estruturac com todas as consuantes foi perda de templo
ExcluirA minha lógica na época foi a de deixar o programa o mais flexível possível. Afinal, se o usuário digitasse um espaço ou número, o programa iria imprimir "Consoante", o que não faria sentido.
Excluir// foi dificil
Excluirlet letras = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
let vogais = ['a', 'e', 'i', 'o', 'u'];
let array =[];
//function overwitfn() {
for (let i = 0; i <= vogais.length - 1; i +=1) {
for ( b = 0; b <= letras.length - 1; b += 1) {
if (letras[b] == vogais[i]) {
array.push(letras[b]);
}
} console.log(array);
}
Resolvi usando um for percorrendo o array vogais e comparando com o valor inserido no input no HTML.
Excluirvar vogais = ["a","e","i","o","u"];
function verifica(){
let input = document.getElementById("text-input").value.toLowerCase();
for ( var i in vogais){
if (input == vogais[i]){
document.write("É uma vogal")
break;
}else
{document.write("É uma consoante")
break;
}
}
}
Exercício hacker
ResponderExcluirfunction check(){
var char = document.getElementById("letra").value;
char = char.toLowerCase();
if (char.length > 1)
alert("Digite apenas uma caractere");
else
if (parseFloat(char) == "NaN")
if (char=="a" ||char=="e" ||char=="i" ||char=="o" ||char=="u")
alert(char + " eh uma vogal");
else
alert(char + " eh uma consoante");
else
alert("Digite uma letra do alfabeto")
}
Infelizmente esse código não roda...
Excluirfunction testar(){
Excluirvar letra = document.querySelector('input#testeLetra').value//o .value ja define um valor para a variavel letra
var res = document.querySelector('div#res')
var resultado = ''
//letra = String(letra.value)//como usamos o .value, nao precisamos declarar o tipo da variavel aqui
letra = letra.toLowerCase()//transforma todas as letras digitadas em letras minúsculas, fazendo com que não precisemos colocar na condição as letras maiusculas
//testando caso o valor digitado seja um número ou tenha mais de uma letra
if (letra == Number(letra) || letra.length > 1) {
res.innerHTML = 'Você digitou um número ou não digitou nada, tente novamente digitando uma letra.'
}else{
if( letra == 'a' || letra == 'e' || letra == 'i' || letra == 'o' || letra == 'u'){
resultado = 'vogal'
}else{
resultado = 'consoante'
}
res.innerHTML =`Você digitou a letra (${letra}) e ela é ${resultado}`
}
}
espero ter ajudado!
Fiz desta forma:
Excluirfunction testar(){
var letra = document.querySelector('input#testeLetra').value//o .value ja define um valor para a variavel letra
var res = document.querySelector('div#res')
var resultado = ''
//letra = String(letra.value)//como usamos o .value, nao precisamos declarar o tipo da variavel aqui
letra = letra.toLowerCase()//transforma todas as letras digitadas em letras minúsculas, fazendo com que não precisemos colocar na condição as letras maiusculas
//testando caso o valor digitado seja um número ou tenha mais de uma letra
if (letra == Number(letra) || letra.length > 1) {
res.innerHTML = 'Você digitou um número ou não digitou nada, tente novamente digitando uma letra.'
}else{
if( letra == 'a' || letra == 'e' || letra == 'i' || letra == 'o' || letra == 'u'){
resultado = 'vogal'
}else{
resultado = 'consoante'
}
res.innerHTML =`Você digitou a letra (${letra}) e ela é ${resultado}`
}
}
let letra = prompt("Digite uma letra para saber se é vogal ou consoante: ");
ResponderExcluirif(letra === "a" || letra === "e" || letra === "i" || letra === "o" || letra === "u"){
alert("Você digitou a Vogal : " + letra);
}else{
alert("você digitou uma Consoante : "+letra);
}
claro que o usuário pode digitar numero ou mais de uma letra e não apresentara nem um erro, como estou iniciando não me preocupei com isso, apenas com a logica do exercício.
Nossa, apanhei um pouco feio logo nesse primeiro. Não consegui passar para o if
ResponderExcluirFala mano beleza? Utilizei event listners para facilitar:
ResponderExcluirlet bt = document.querySelector('input#bt')
bt.addEventListener('click',check)
function check(){
let letra = document.querySelector('input#txt').value
letra = letra.toLowerCase()
if(letra == 'a' || letra == 'e' || letra == 'i' || letra =='o' || letra == 'u'){
alert('Vogal')
}else{
alert('Consoante')
}
}
E se o usuário digitar um número ao invés de uma letra, como faz pro script entender o erro?
ResponderExcluirTbm dá erro se digitar vogal acentuada
ResponderExcluirValeu pela explicação, serviu muito bem! =)
ResponderExcluirMinha tarefa era criar uma página em html.
Obs.: Ainda estou aprendendo, comecei tem 1 semana e fiquei muito feliz em conseguir terminar esse código, pois tem coisas que ainda não estudei.
Segue abaixo a minha solução.
//var res = window.document.getElementById('campoLetra').value
function confirmar() {
var letra = window.document.getElementById('campoLetra').value
var res = window.document.getElementById('res')
//window.alert(`Você digitou ${letra}.`)
if (letra == 'a' || letra == 'A' || letra == 'e' || letra == 'E' || letra == 'i' || letra == 'I' || letra == 'o' || letra == 'O' || letra == 'u' || letra == 'U') {
res.innerText = `A letra "${letra}" é uma VOGAL!`
} else {
res.innerText = `A letra "${letra}" é uma CONSOANTE!"`
}
}
quero vê hackea agora
ResponderExcluirhttps://github.com/mvmdchagas/github/blob/adf6c2588a57e64b720ca91aeb09226771546db6/inicio/estudos/javascript/exercicios-fixacao/exercicio001/ex001.html
function verificar(){
var ftxt = document.querySelector('input#txt').value;
ftxt = ftxt.toLowerCase();
ftxt = Number();
if(ftxt.length == 0 || ftxt == 0 ){
window.alert ('digite algo e não use números.')
}else if(ftxt == 'a' || ftxt == 'e' || ftxt == 'i' || ftxt == 'o' || ftxt == 'u'){
window.alert ('vogal')
}else {
window.alert ('consoante')
}
}
agora quero vê hasckers
ResponderExcluirhttps://github.com/mvmdchagas/github/blob/adf6c2588a57e64b720ca91aeb09226771546db6/inicio/estudos/javascript/exercicios-fixacao/exercicio001/ex001.html#L66-L76
function verificar(){
var ftxt = document.querySelector('input#txt').value;
ftxt = ftxt.toLowerCase();
if(ftxt.length == 0 || ftxt == 0 || ftxt == 1 || ftxt == 2 || ftxt == 3 || ftxt == 4 || ftxt == 5 || ftxt == 6 || ftxt == 7 || ftxt == 8 ||ftxt == 9){
window.alert ('digite algo e não use números.')
}else if(ftxt == 'a' || ftxt == 'e' || ftxt == 'i' || ftxt == 'o' || ftxt == 'u'){
window.alert ('vogal')
}else {
window.alert ('consoante')
}
}
Respondi da seguinte forma.
ResponderExcluirconst frm = document.querySelector("form");
const resp = document.querySelector("h3");
frm.addEventListener("submit", (e) => {
e.preventDefault();
var letra = frm.inLetra.value;
letra = letra.toLowerCase();
if (letra != 'a' && letra != 'e' && letra != 'i' && letra != 'o' && letra != 'u') {
resp.innerText = `A letra '${letra}' é consoante !!!`
} else {
resp.innerText = `A letra '${letra}' é vogal !!!`
}
})
ResponderExcluirvar nome = prompt('digita uma letra');
if(nome == 'a' || nome == 'e' || nome == 'i' || nome == 'o' || nome == 'u'){
alert('vogal')
}else{
alert('consoante')
}
var nome = prompt('digita uma letra');
ResponderExcluirif(nome == 'a' || nome == 'e' || nome == 'i' || nome == 'o' || nome == 'u'){
alert('vogal')
}else{
alert('consoante')
}
var nome = prompt('digita uma letra');
ResponderExcluirif(nome == 'a' || nome == 'e' || nome == 'i' || nome == 'o' || nome == 'u'){
alert('vogal')
}else{
alert('consoante')
}
Exercício Hacker:
ResponderExcluirfunction check() {
let letra = document.getElementById("char").value;
letra = letra.toLowerCase();
if (letra.length !== 1 || !(letra >= 'a' && letra <= 'z')) {
alert("Digite apenas uma LETRA por vez.");
} else if(letra=='a' || letra=='e' || letra=='i' || letra=='o' || letra=='u') {
alert("Vogal");;
} else
alert("Consoante");
}
Explicação para que eu possa memorizar melhor e também ajudar outras pessoas caso usem meu código:
Primeiro, é criada a função check() para pegar o que o usuário digitar no input que está no arquivo HTML. Utiliza-se toLowerCase() para transformar letras maiúsculas (caso o usuário digite) em minúsculas, evitando conflitos na verificação.
Após isso, uso uma condicional if, passando a condição: if(letra.length !== 1 || !(letra >= 'a' && letra <= 'z')). Ou seja, se o tamanho da letra for diferente de 1 OU se o caractere não estiver entre "a" e "z", o código exibirá a mensagem "Digite apenas uma LETRA por vez."
Se essa condição não for verdadeira (ou seja, o usuário digitou apenas uma letra válida), o código entra no else if, que verifica se a letra é uma vogal (a, e, i, o, u). Se for uma vogal, o código exibe "Vogal".
Se não for uma vogal, a execução cai no else, que identifica a letra como consoante e exibe "Consoante".
Abraços,
dok!