07 – Javascript – Instrução Switch Case em Javascript

07 – Javascript – Instrução Switch Case em Javascript

Switch Case em Javascript

Switch Case em Javascript

Voltar para página principal do blog

Todas as aulas desse curso

Aula 06

Aula 08

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:

Hostinger

Digital Ocean

One.com

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.

Voltar para página principal do blog

Todas as aulas desse curso

Aula 06

Aula 08

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:

Hostinger

Digital Ocean

One.com

Obrigado, até a próxima e bons estudos. 😉

About The Author
-

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>