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

More videos
Views
   

Instrução Switch Case em Javascript

Switch Case em Javascript

Switch Case em Javascript

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.

Curta a página do Código Fluente no Facebook
https://www.facebook.com/Codigofluente-338485370069035/

Vou deixar meu link de referidos na digitalocean pra vocês.

Quem se cadastrar por esse link, ganha $100.00 dólares de crédito na digitalocean:

Digital Ocean

Esse outro link é da one.com:

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>