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

Nenhum comentário:

Postar um comentário