07 - Javascript - Instrução Switch Case em Javascript
Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook
Link do código fluente no Pinterest
Novamente deixo meus link de afiliados:
Switch Case
A instrução
switch é usada para executar diferentes ações com base em diferentes condições.
Use a instrução
switch case para selecionar um dos muitos blocos de código a serem executados.
Sintaxe:
switch (expressão) {
case valor1:
//Instruções executadas quando o resultado da expressão for igual ao valor1
[break;]
case valor2:
//Instruções executadas quando o resultado da expressão for igual ao valor2
[break;]
...
case valueN:
//Instruções executadas quando o resultado da expressão for igual ao valorN
[break;]
default:
//Instruções executadas quando o valor da expressão é diferente de todos os cases
[break;]
}
É assim que funciona:
A expressão
switch é avaliada.
O valor da expressão é comparado com os valores de cada
case.
Se houver uma correspondência, o bloco de código associado será executado.
Exemplo:
O método
getDay() retorna o dia da semana como um número entre
0 e
6.
(Domingo = 0, segunda-feira = 1, terça-feira = 2 ..)
Este exemplo usa o número do dia da semana para retornar a string com o nome do dia da semana.
Insira o código abaixo em javascript_codes/exemplo07/script07.js
/********************************
*Instrução Switch Case
*/
var day;
switch (new Date().getDay()) {
case 0:
day = "domingo";
break;
case 1:
day = "segunda-feira";
break;
case 2:
day = "terça-feira";
break;
case 3:
day = "quarta-feira";
break;
case 4:
day = "quinte-feira";
break;
case 5:
day = "sexta-feira";
break;
case 6:
day = "sábado";
}
document.getElementById("diaDaSemana").innerHTML = "Hoje é " + day;
E esse conteúdo abaixo em javascript_codes/exemplo07/index07.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aula 7: Fundamentos da Linguagem JavaScript - Código Fluente</title>
</head>
<body>
<h1>Aula 7: Fundamentos da Linguagem JavaScript - Código Fluente - Instrução Switch</h1>
<br>
<br>
<h1 id="diaDaSemana" align="center"></h1>
</body>
<script src="script07.js"></script>
</html>
Como funciona o break no switch case?
Quando o JavaScript encontra a instrução
break, ele sai do bloco
switch.
Ou seja, vai parar a execução dentro do bloco.
Não é necessário colocar um
break no último case em um
switch, já que o bloco termina depois dele.
Nota: Se você omitir a instrução break, o próximo case será executado mesmo se a avaliação não corresponder ao case.
Crie um outro script, o javascript_codes/exemplo07/script.js
var x = "0";
switch (x) {
case 0:
text = "Off";
break;
case 1:
text = "On";
break;
default:
text = "Nenhum valor encontrado";
}
document.getElementById("onOff").innerHTML = text;
E modifique o javascript_codes/exemplo07/index07.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aula 7: Fundamentos da Linguagem JavaScript - Código Fluente</title>
</head>
<body>
<h1>Aula 7: Fundamentos da Linguagem JavaScript - Código Fluente - Instrução Switch</h1>
<br>
<br>
<h1 id="diaDaSemana" align="center"></h1>
<br>
<br>
<h1 id="onOff" align="center"></h1>
</body>
<script src="script07.js"></script>
<script src="script.js"></script>
</html>
Se vários cases corresponderem a um valor de case, o primeiro encontrado é o que será executado.
Se nenhum case correspondente for encontrado, será executado o
default.
Se nenhum
default for encontrado, o programa continuará com a(s) instrução(ões) após o switch.
Comparação Estrita (Strict Comparison)
Switch cases usam Strict Comparison (===).
A variável deve ter o mesmo valor e ser do mesmo tipo para corresponder.
Uma comparação estrita só pode ser verdadeira se os operandos forem do mesmo tipo e o valor igual.
Neste exemplo, não haverá correspondência para x já que x guarda a string "0" (zero) não o valor zero numérico.
Blocos de Código Comuns
Algumas vezes você vai querer cases switch diferentes usando o mesmo código.
Neste exemplo, os casos "lobo" e "cachorro" em rosa, compartilham o mesmo bloco de código e "burro", "cavalo", e "zebra" em azul compartilham outro bloco de código:
var animal = "lobo"
switch (animal) {
case "lobo":
case "cachorro":
text = "ladra";
break;
case "burro":
case "cavalo":
case "zebra":
text = "relincha";
break;
default:
text = "Não classificado";
}
Na próxima aula veremos quais valores são considerados falsos em javascript.
Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook
Link do código fluente no Pinterest
Novamente deixo meus link de afiliados:
Obrigado, até a próxima e bons estudos. ;)
