Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

Vogal ou Consoante em JavaScript - Exercício Resolvido

Neste tutorial de JavaScript, vamos resolver o seguinte exercício:
"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

24 comentários:

  1. onkeypress="if (isNaN(String.fromCharCode(window.event.keyCode))) return true; else return false;"

    ResponderExcluir
  2. Acredito 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:

    function 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.`
    }
    }

    ResponderExcluir
    Respostas
    1. Tem solução mais simples sim, Ricardo, sem dúvidas, que você vai usando ferramentas prontas, da própria linguagem!

      Mas 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.

      Excluir
    2. 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

      Excluir
    3. A 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
    4. // foi dificil
      let 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);
      }

      Excluir
    5. Resolvi usando um for percorrendo o array vogais e comparando com o valor inserido no input no HTML.

      var 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;
      }

      }


      }

      Excluir
  3. Exercício hacker

    function 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")
    }

    ResponderExcluir
    Respostas
    1. Infelizmente esse código não roda...

      Excluir
    2. function 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}`
      }
      }
      espero ter ajudado!

      Excluir
    3. Fiz desta forma:
      function 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}`
      }
      }

      Excluir
  4. let letra = prompt("Digite uma letra para saber se é vogal ou consoante: ");
    if(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.

    ResponderExcluir
  5. Nossa, apanhei um pouco feio logo nesse primeiro. Não consegui passar para o if

    ResponderExcluir
  6. Fala mano beleza? Utilizei event listners para facilitar:

    let 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')
    }
    }


    ResponderExcluir
  7. E se o usuário digitar um número ao invés de uma letra, como faz pro script entender o erro?

    ResponderExcluir
  8. Valeu pela explicação, serviu muito bem! =)
    Minha 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!"`
    }
    }

    ResponderExcluir
  9. quero vê hackea agora
    https://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')
    }
    }

    ResponderExcluir
  10. agora quero vê hasckers
    https://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')
    }
    }

    ResponderExcluir
  11. Respondi da seguinte forma.


    const 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 !!!`
    }

    })

    ResponderExcluir

  12. var nome = prompt('digita uma letra');

    if(nome == 'a' || nome == 'e' || nome == 'i' || nome == 'o' || nome == 'u'){
    alert('vogal')
    }else{
    alert('consoante')
    }

    ResponderExcluir
  13. var nome = prompt('digita uma letra');

    if(nome == 'a' || nome == 'e' || nome == 'i' || nome == 'o' || nome == 'u'){
    alert('vogal')
    }else{
    alert('consoante')
    }

    ResponderExcluir
  14. var nome = prompt('digita uma letra');

    if(nome == 'a' || nome == 'e' || nome == 'i' || nome == 'o' || nome == 'u'){
    alert('vogal')
    }else{
    alert('consoante')
    }

    ResponderExcluir
  15. Exercício Hacker:

    function 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!

    ResponderExcluir