{"id":288,"date":"2024-01-28T18:29:12","date_gmt":"2024-01-28T21:29:12","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=288"},"modified":"2024-02-14T11:01:33","modified_gmt":"2024-02-14T14:01:33","slug":"aula-15-mini-projeto-em-javascript-com-funcoes-e-switch-case-iniciante","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=288","title":{"rendered":"Aula 15: Mini Projeto em JavaScript com Fun\u00e7\u00f5es e Switch Case &#8211; Iniciante"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Revis\u00e3o de conte\u00fado<\/h2>\n\n\n\n<p>O <code>switch-case<\/code> \u00e9 uma estrutura de controle de fluxo em JavaScript que oferece uma maneira eficiente de lidar com m\u00faltiplas condi\u00e7\u00f5es. \u00c9 frequentemente usado quando voc\u00ea tem v\u00e1rias condi\u00e7\u00f5es para testar contra uma \u00fanica vari\u00e1vel. Neste artigo, faremos uma revis\u00e3o do conceito de <code>switch-case<\/code> e fun\u00e7\u00e3o em JavaScript, para que possamos entender melhor nosso exerc\u00edcio de hoje.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">A estrutura b\u00e1sica de um <code>switch-case<\/code> em JavaScript \u00e9 a seguinte:<\/h2>\n\n\n\n<ul>\n<li>A palavra-chave <code>switch<\/code> indica o in\u00edcio da estrutura de controle de fluxo.<\/li>\n\n\n\n<li>A express\u00e3o (<code>expressao<\/code>) \u00e9 avaliada uma vez e seu resultado \u00e9 comparado com os valores dos casos (<code>valor1<\/code>, <code>valor2<\/code>, etc.).<\/li>\n\n\n\n<li>Se o valor da express\u00e3o coincidir com o valor de um caso, o bloco de c\u00f3digo correspondente a esse caso \u00e9 executado.<\/li>\n\n\n\n<li>A palavra-chave <code>break<\/code> \u00e9 usada para sair do <code>switch<\/code> ap\u00f3s a execu\u00e7\u00e3o de um caso. Se omitida, a execu\u00e7\u00e3o continuar\u00e1 para o pr\u00f3ximo caso, resultando em comportamento inesperado.<\/li>\n\n\n\n<li>O bloco de c\u00f3digo dentro da cl\u00e1usula <code>default<\/code> \u00e9 executado se nenhum dos casos corresponder ao valor da express\u00e3o.<\/li>\n<\/ul>\n\n\n\n<p>O <code>switch-case<\/code> \u00e9 uma ferramenta \u00fatil em JavaScript para lidar com m\u00faltiplas condi\u00e7\u00f5es com base em um \u00fanico valor. Compreender sua sintaxe e uso pr\u00e1tico \u00e9 fundamental para qualquer desenvolvedor JavaScript. Ao aplicar corretamente o <code>switch-case<\/code>, voc\u00ea pode escrever c\u00f3digo mais limpo e eficiente, tornando seus programas mais f\u00e1ceis de entender e manter.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fun\u00e7\u00f5es<\/h2>\n\n\n\n<p>As fun\u00e7\u00f5es s\u00e3o um dos pilares fundamentais da programa\u00e7\u00e3o em JavaScript. Elas nos permitem agrupar um conjunto de instru\u00e7\u00f5es em um \u00fanico bloco, que pode ser executado repetidamente com diferentes entradas.<\/p>\n\n\n\n<p>No exerc\u00edcio de hoje vamos criar uma estrutura case e depois vamos colocar toda essa estrutura dentro de um fun\u00e7\u00e3o.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Aula 15: Mini Projeto em JavaScript com Fun\u00e7\u00f5es e  Switch Case - Iniciante\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/l0FwcskMdGA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>HTML<\/strong>\n\n&lt;!DOCTYPE html&gt;\n&lt;html lang=\"pt-br\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Aula 15 Projeto Frete&lt;\/title&gt;\n    &lt;script src=\"script.js\"&gt;&lt;\/script&gt;\n    &lt;style&gt;\n        body{\n            background-color: rgb(122, 122, 213);\n        }\n        h1{\n            font-size: 40pt;\n            color: rgb(136, 13, 243);\n        }\n        p{\n            font-size: 25pt;\n        }\n        div{\n            background-color: rgb(199, 199, 232);\n            width: 500px;\n            height: 300px;\n            text-align: center;\n            margin: auto;\n        }       \n        select{\n            width: 200px;\n            height:20px;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div id=\"conteudo\"&gt;\n        &lt;h1&gt;C\u00e1lculo de Frete&lt;\/h1&gt;\n\n        &lt;p id=\"res\"&gt;Valor do frete:  &lt;\/p&gt;   \n        \n        &lt;button id=\"btapertar\" onclick=\"calcular()\"&gt;Calcular Frete&lt;\/button&gt;\n\n\n        &lt;select  id=\"setor\"&gt;\n\n            &lt;option value=\"Jardins\"&gt; Jardins&lt;\/option&gt;             \n            &lt;option value=\"Morumbi\"&gt; Morumbi&lt;\/option&gt;\n            &lt;option value=\"Penha\"&gt; Penha &lt;\/option&gt; \n            &lt;option value=\"Jaragu\u00e1\"&gt; Jaragu\u00e1&lt;\/option&gt;\n            &lt;option value=\"Pirituba\"&gt; Pirituba&lt;\/option&gt;\n            &lt;option value=\"Sem Cadastro\"&gt; Sem Cadastro&lt;\/option&gt;\n                \n        &lt;\/select&gt;\n\n    &lt;\/div&gt;\n\n    \n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>JAVASCRIPT\n<\/strong>\n\n\n        function calcular(){\n        var bairro = document.getElementById('setor').value \/\/ tag select\n        var entrega\n        var resultado = document.getElementById('res') \/\/ tag p\n\n        switch (bairro) {\n            case 'Jardins':\n            entrega = 25.00;    \n           \/\/ resultado.innerHTML = 'Sua entrega para o bairro: '+ bairro + ' custar\u00e1 ' + entrega;   \n            resultado.innerHTML = `Sua entrega para o bairro: ${bairro}  custar\u00e1 ${entrega}`;          \n                         \n            break;\n\n            case 'Morumbi':\n            entrega = 35.00;\n            resultado.innerHTML = `Sua entrega para o bairro: ${bairro}  custar\u00e1 ${entrega}`;               \n            break;\n\n            case 'Penha':\n            entrega = 15.00;\n            resultado.innerHTML = `Sua entrega para o bairro: ${bairro}  custar\u00e1 ${entrega}`;              \n            break;\n            \n            case 'Jaragu\u00e1':\n            entrega = 50.00;\n            resultado.innerHTML = `Sua entrega para o bairro: ${bairro}  custar\u00e1 ${entrega}`;                  \n            break;\n\n            case 'Pirituba': \n            entrega = 100.00;\n            resultado.innerHTML = `Sua entrega para o bairro: ${bairro}  custar\u00e1 ${entrega}`;                \n            break;   \n        \n            default: \n            entrega = 200.00;\n            resultado.innerHTML = `Sua entrega para o bairro: ${bairro}  custar\u00e1 ${entrega}`;          \n            break;\n        }\n    }\n   <\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Revis\u00e3o de conte\u00fado O switch-case \u00e9 uma estrutura de controle de fluxo em JavaScript que oferece uma maneira eficiente de lidar com m\u00faltiplas condi\u00e7\u00f5es. \u00c9 frequentemente usado quando voc\u00ea tem v\u00e1rias condi\u00e7\u00f5es para testar contra uma \u00fanica vari\u00e1vel. Neste artigo, faremos uma revis\u00e3o do conceito de switch-case e fun\u00e7\u00e3o em JavaScript, para que possamos entender melhor nosso exerc\u00edcio de hoje. A estrutura b\u00e1sica de um switch-case em JavaScript \u00e9 a seguinte: O switch-case \u00e9 uma ferramenta \u00fatil em JavaScript para lidar com m\u00faltiplas condi\u00e7\u00f5es com base em um \u00fanico valor. Compreender sua sintaxe e uso pr\u00e1tico \u00e9 fundamental para qualquer desenvolvedor JavaScript. Ao aplicar corretamente o switch-case, voc\u00ea pode escrever c\u00f3digo mais limpo e eficiente, tornando seus programas mais f\u00e1ceis de entender e manter. Fun\u00e7\u00f5es As fun\u00e7\u00f5es s\u00e3o um dos pilares fundamentais da programa\u00e7\u00e3o em JavaScript. Elas nos permitem agrupar um conjunto de instru\u00e7\u00f5es em um \u00fanico bloco, que pode ser executado repetidamente com diferentes entradas. No exerc\u00edcio de hoje vamos criar uma estrutura case e depois vamos colocar toda essa estrutura dentro de um fun\u00e7\u00e3o.<\/p>\n","protected":false},"author":1,"featured_media":701,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[15],"tags":[],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/288"}],"collection":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=288"}],"version-history":[{"count":6,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/288\/revisions"}],"predecessor-version":[{"id":703,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/288\/revisions\/703"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/701"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=288"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=288"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}