Aula 15: Mini Projeto em JavaScript com Funções e Switch Case – Iniciante

Revisão de conteúdo

O switch-case é uma estrutura de controle de fluxo em JavaScript que oferece uma maneira eficiente de lidar com múltiplas condições. É frequentemente usado quando você tem várias condições para testar contra uma única variável. Neste artigo, faremos uma revisão do conceito de switch-case e função em JavaScript, para que possamos entender melhor nosso exercício de hoje.

A estrutura básica de um `switch-case` em JavaScript é a seguinte:

A palavra-chave switch indica o início da estrutura de controle de fluxo.
A expressão (expressao) é avaliada uma vez e seu resultado é comparado com os valores dos casos (valor1, valor2, etc.).
Se o valor da expressão coincidir com o valor de um caso, o bloco de código correspondente a esse caso é executado.
A palavra-chave break é usada para sair do switch após a execução de um caso. Se omitida, a execução continuará para o próximo caso, resultando em comportamento inesperado.
O bloco de código dentro da cláusula default é executado se nenhum dos casos corresponder ao valor da expressão.

O switch-case é uma ferramenta útil em JavaScript para lidar com múltiplas condições com base em um único valor. Compreender sua sintaxe e uso prático é fundamental para qualquer desenvolvedor JavaScript. Ao aplicar corretamente o switch-case, você pode escrever código mais limpo e eficiente, tornando seus programas mais fáceis de entender e manter.

Funções

As funções são um dos pilares fundamentais da programação em JavaScript. Elas nos permitem agrupar um conjunto de instruções em um único bloco, que pode ser executado repetidamente com diferentes entradas.

No exercício de hoje vamos criar uma estrutura case e depois vamos colocar toda essa estrutura dentro de um função.

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aula 15 Projeto Frete</title>
    <script src="script.js"></script>
    <style>
        body{
            background-color: rgb(122, 122, 213);
        }
        h1{
            font-size: 40pt;
            color: rgb(136, 13, 243);
        }
        p{
            font-size: 25pt;
        }
        div{
            background-color: rgb(199, 199, 232);
            width: 500px;
            height: 300px;
            text-align: center;
            margin: auto;
        }       
        select{
            width: 200px;
            height:20px;
        }
    </style>
</head>
<body>
    <div id="conteudo">
        <h1>Cálculo de Frete</h1>

        <p id="res">Valor do frete:  </p>   
        
        <button id="btapertar" onclick="calcular()">Calcular Frete</button>


        <select  id="setor">

            <option value="Jardins"> Jardins</option>             
            <option value="Morumbi"> Morumbi</option>
            <option value="Penha"> Penha </option> 
            <option value="Jaraguá"> Jaraguá</option>
            <option value="Pirituba"> Pirituba</option>
            <option value="Sem Cadastro"> Sem Cadastro</option>
                
        </select>

    </div>

    
</body>
</html>

JAVASCRIPT



        function calcular(){
        var bairro = document.getElementById('setor').value // tag select
        var entrega
        var resultado = document.getElementById('res') // tag p

        switch (bairro) {
            case 'Jardins':
            entrega = 25.00;    
           // resultado.innerHTML = 'Sua entrega para o bairro: '+ bairro + ' custará ' + entrega;   
            resultado.innerHTML = `Sua entrega para o bairro: ${bairro}  custará ${entrega}`;          
                         
            break;

            case 'Morumbi':
            entrega = 35.00;
            resultado.innerHTML = `Sua entrega para o bairro: ${bairro}  custará ${entrega}`;               
            break;

            case 'Penha':
            entrega = 15.00;
            resultado.innerHTML = `Sua entrega para o bairro: ${bairro}  custará ${entrega}`;              
            break;
            
            case 'Jaraguá':
            entrega = 50.00;
            resultado.innerHTML = `Sua entrega para o bairro: ${bairro}  custará ${entrega}`;                  
            break;

            case 'Pirituba': 
            entrega = 100.00;
            resultado.innerHTML = `Sua entrega para o bairro: ${bairro}  custará ${entrega}`;                
            break;   
        
            default: 
            entrega = 200.00;
            resultado.innerHTML = `Sua entrega para o bairro: ${bairro}  custará ${entrega}`;          
            break;
        }
    }