Comando SWITCH - O que é ? Para que serve?
- Ei, JavaScript, esse número é par ou ímpar?
- JS, o cliente escolheu que opção?
- Cliente, você é homem, mulher ou outro?
E testes são essenciais, em todo e qualquer projeto, de toda e qualquer linguagem de programação. É algo essencial no mundo da computação.
Porém, dependendo do projeto que você vai fazer, pode ser necessário fazer muitos e muitos testes, e aí teremos códigos do tipo:
if (teste1) código; else if(teste2) código; else código; if (teste3) código; if (teste4) código else código; if (teste5) código ...
Deu pra notar o drama?
Vários if's e elses'...depois mais if dentre de else, e dentro desse novo else outro if, e outro if e outro if...
É aí onde vai atuar o comando switch, pra botar ordem nessa bagunça.
Ele é, na verdade, uma sequência de comparações, mas de maneira muito mais bonitinha e organizada.
Como usar o switch em JavaScript: case
A declaração e uso do switch é assim:switch(variavel){ case valor1: codigo1; case valor2: codigo2; case valor3: codigo3; ... }
Vamos lá explicar.
Primeiro, escrevemos o comando switch, em seguida, temos fornecer algum valor, como uma variável que armazena um número ou uma string.
Depois, o JS vai comparar variavel com valor1, se for igual, executa o código que vem no primeiro case.
Depois, o JS testa variavel com valor2, se for igual, executa o segundo case.
E assim, sucessivamente.
Ou seja, cada case desse é como se fosse um teste condicional IF.
Vamos comparar o que tem lá dentro do parêntesis do switch, com o que o valor que tem em cada case.
Exemplo de uso do comando SWITCH em JavaScript
Ok, chega de teoria! Vamos aprender a usar esse danado do switch.Exercício de JavaScript
Escreva uma página que pede ao usuário um número de 1 até 12, e mostra o mês correspondente a este número. Por exemplo, 1 é Janeiro, 2 é Fevereiro etc.Exibimos um formulário, de id=numero, do tipo numérico e pedimos o número para o usuário.
Em seguida, um botão chama a função exibir() do JavaScript, ao ser acionado (clicado).
Vamos para o JS.
Pegamos o que foi digitado no campo numero pelo usuário, passamos para inteiro (parseInt) e armazenamos na variável mes, dentro de nosso código JavaScript.
Depois, jogamos essa variável no switch.
E fazemos:
case 1: alert("Janeiro")
case 2: alert("Fevereiro")
etc
Ou seja, se o mes digitado for 1, vai aparecer uma janela dizendo que o mês é Janeiro.
Se o usuário tiver digitado 2, a janela vai mostrar Fevereiro, e assim sucessivamente.
O código fica:
<!DOCTYPE html> <html> <head> <title>Curso JavaScript Progressivo</title> Digite um mês de 1 até 12:<input id="numero" type="number"> <br /> <button onclick="exibir()">Exibir mês</button> <script type="text/javascript"> function exibir(){ var mes = parseInt(document.getElementById("numero").value); switch(mes){ case 1: alert("Janeiro"); case 2: alert("Fevereiro"); case 3: alert("Março"); case 4: alert("Abril"); case 5: alert("Maio"); case 6: alert("Junho"); case 7: alert("Julho"); case 8: alert("Agosto"); case 9: alert("Setembro"); case 10: alert("Outubro"); case 11: alert("Novembro"); case 12: alert("Dezembro"); } } </script> </head> </html>
Sério, testem o código JS acima e vejam o resultado.
A instrução break no JavaScript
Se você digitar 1, vai aparecer "Janeiro". Ok, perfeito.Mas depois aparece Fevereiro, Março....
Se digitar 2, aparece "Fevereiro", tudo correto.
Mas depois aparece Março, Abril...
Obviamente, tem algum problema aí!
É a falta do break,
Propositalmente, deixamos de te falar uma coisa no funcionamento da instrução switch.
Quando ela encontra algum case correto, ela executa o código dele...e de tudo que está abaixo!
Por isso que aparece inicialmente o mês correto...e depois todos os meses em seguida.
Para solucionar isso, basta escrever break dentro dos case, fica assim agora:
<!DOCTYPE html> <html> <head> <title>Curso JavaScript Progressivo</title> Digite um mês de 1 até 12:<input id="numero" type="number"> <br /> <button onclick="exibir()">Exibir mês</button> <script type="text/javascript"> function exibir(){ var mes = parseInt(document.getElementById("numero").value); switch(mes){ case 1: alert("Janeiro"); break; case 2: alert("Fevereiro"); break; case 3: alert("Mar�o"); break; case 4: alert("Abril"); break; case 5: alert("Maio"); break; case 6: alert("Junho"); break; case 7: alert("Julho"); break; case 8: alert("Agosto"); break; case 9: alert("Setembro"); break; case 10: alert("Outubro"); break; case 11: alert("Novembro"); break; case 12: alert("Dezembro"); } } </script> </head> </html>
Agora sim, tudo perfeito!A propósito, meu mês de nascimento é 5:
Agora uma dúvida: por que não colocamos break no último case?
Respondam nos comentários.
A instrução default em JavaScript
Digite 0 e clique no botão pra ver o que acontece.
Nada. Por que? Porque não tem um case 0 pra tratar esse caso.
Digite -1...13...não vai aparecer nunca nada.
Imagina que o cliente ia digitar 11 e sem querer digitou 112, não percebeu que digitou um número a mais.
Vai apertar milhões de vezes o botão e não vai aparecer nada, o site não faz nada.
Obviamente, vai ligar na sua empresa reclamando, xingando seu sistema e tudo mais.
Conselho de amigo: nunca duvide de um usuário. Fazem muuuuuita m.... coisas erradas.
Então, como resolvemos isso?
Para tratarmos todos os outros casos que não estão nos cases, usamos a instrução default.
Tudo que não cair em algum case, vai de imediato pro default.
Nosso código fica assim:
<!DOCTYPE html> <html> <head> <title>Curso JavaScript Progressivo</title> Digite um mês de 1 até 12:<input id="numero" type="number"> <br /> <button onclick="exibir()">Exibir mês</button> <script type="text/javascript"> function exibir(){ var mes = parseInt(document.getElementById("numero").value); switch(mes){ case 1: alert("Janeiro"); break; case 2: alert("Fevereiro"); break; case 3: alert("Março"); break; case 4: alert("Abril"); break; case 5: alert("Maio"); break; case 6: alert("Junho"); break; case 7: alert("Julho"); break; case 8: alert("Agosto"); break; case 9: alert("Setembro"); break; case 10: alert("Outubro"); break; case 11: alert("Novembro"); break; case 12: alert("Dezembro"); break; default: alert("Voce nao digitou um mes valido"); } } </script> </head> </html>
E por fim, nosso código bonitinho, certinho, bem tratado, anti-usuário-de-dedo-gordo:
Digite um mês de 1 até 12:
O último "case" não precisa de "break" por que ele é último "case", logo, o código mostra o valor dele e para por ali. Uma vez que ele é o último e não há mais nenhum case a ser lido.
ResponderExcluirPrecisa sim. Se não num faz sentido kkkk.
Excluir