L\u00f3gica de Programa\u00e7\u00e3o com JavaScript: Guia Completo para Iniciantes (Do Zero ao Primeiro Projeto) | Desvendando o C\u00f3digo<\/title>\n <meta name=\"description\" content=\"Aprenda l\u00f3gica de programa\u00e7\u00e3o do zero com JavaScript neste guia completo. Entenda algoritmos, condicionais, switch case e crie um projeto de calculadora. Iniciante? Comece aqui!\">\n <style>\n \/* Reset completo de cores para o container do artigo - NADA herda do tema do blog *\/\n .artigo-container, \n .artigo-container * {\n all: revert; \/* Reseta propriedades herdadas do blog (importante para dark mode) *\/\n }\n \n .artigo-container {\n display: block;\n max-width: 1000px;\n margin: 0 auto;\n background: #ffffff !important;\n border-radius: 32px;\n box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n line-height: 1.6;\n color: #1e2a3a !important;\n }\n\n \/* Hero *\/\n .artigo-hero {\n background: linear-gradient(120deg, #0f2027, #203a43, #2c5364) !important;\n color: #ffffff !important;\n padding: 3rem 2rem;\n text-align: center;\n }\n .artigo-hero h1 {\n color: #ffffff !important;\n font-size: 2.2rem;\n margin-bottom: 1rem;\n font-weight: 800;\n }\n .artigo-hero p {\n color: #f0f0f0 !important;\n font-size: 1.2rem;\n opacity: 0.9;\n }\n\n \/* Conte\u00fado principal *\/\n .artigo-content {\n padding: 2rem 2rem 2.5rem;\n background: #ffffff !important;\n }\n\n \/* T\u00edtulos *\/\n .artigo-content h2 {\n font-size: 1.8rem;\n margin-top: 2rem;\n margin-bottom: 1rem;\n color: #0f2027 !important;\n border-left: 6px solid #2c7da0;\n padding-left: 1rem;\n }\n .artigo-content h3 {\n font-size: 1.4rem;\n margin: 1.5rem 0 1rem;\n color: #2c3e50 !important;\n }\n\n \/* Par\u00e1grafos e listas *\/\n .artigo-content p,\n .artigo-content li {\n color: #1e2a3a !important;\n margin-bottom: 1rem;\n }\n .artigo-content ul, \n .artigo-content ol {\n margin-left: 1.5rem;\n margin-bottom: 1.2rem;\n }\n .artigo-content li {\n margin-bottom: 0.5rem;\n }\n\n \/* C\u00f3digo inline *\/\n .artigo-content code {\n background: #1e2a3a !important;\n color: #e2e8f0 !important;\n padding: 0.2rem 0.5rem;\n border-radius: 8px;\n font-family: 'Fira Code', 'Courier New', monospace;\n font-size: 0.9rem;\n }\n \/* Bloco de c\u00f3digo *\/\n .artigo-content pre {\n background: #1e2a3a !important;\n color: #f8f9fa !important;\n padding: 1.2rem;\n border-radius: 16px;\n overflow-x: auto;\n margin: 1.5rem 0;\n font-family: 'Fira Code', monospace;\n font-size: 0.9rem;\n border-left: 4px solid #2c7da0;\n }\n .artigo-content pre code {\n background: none !important;\n padding: 0;\n color: inherit !important;\n }\n\n \/* Blockquote *\/\n .artigo-content blockquote {\n background: #eef2f5 !important;\n border-left: 6px solid #2c7da0;\n padding: 1rem 1.5rem;\n margin: 1.5rem 0;\n font-style: italic;\n border-radius: 20px;\n font-weight: 500;\n color: #1e2a3a !important;\n }\n\n \/* Caixas de nota, dica e projeto *\/\n .artigo-content .note {\n background: #fff7e6 !important;\n border-left: 6px solid #f4b942;\n padding: 1rem 1.5rem;\n border-radius: 20px;\n margin: 1.5rem 0;\n color: #1e2a3a !important;\n }\n .artigo-content .tip {\n background: #e6f7ec !important;\n border-left: 6px solid #2ecc71;\n padding: 1rem 1.5rem;\n border-radius: 20px;\n margin: 1.5rem 0;\n color: #1e2a3a !important;\n }\n .artigo-content .projeto-box {\n background: #f0f4f8 !important;\n padding: 1.5rem;\n border-radius: 24px;\n margin: 2rem 0;\n box-shadow: 0 8px 15px rgba(0,0,0,0.05);\n color: #1e2a3a !important;\n }\n\n \/* Rodap\u00e9 (final CTA) *\/\n .artigo-final-cta {\n background: linear-gradient(120deg, #0f2027, #203a43) !important;\n color: #ffffff !important;\n text-align: center;\n padding: 2rem;\n border-radius: 28px;\n margin-top: 2rem;\n }\n .artigo-final-cta a {\n color: #ffd966 !important;\n text-decoration: none;\n font-weight: bold;\n border-bottom: 2px solid #ffd966;\n padding-bottom: 2px;\n }\n .artigo-final-cta a:hover {\n color: #ffea9e !important;\n }\n .artigo-final-cta small {\n color: #dddddd !important;\n }\n\n \/* Footer do blog *\/\n .artigo-footer {\n margin-top: 2rem;\n text-align: center;\n font-size: 0.9rem;\n color: #5a6e7c !important;\n }\n .artigo-footer hr {\n margin: 2rem 0;\n border: 0;\n height: 2px;\n background: linear-gradient(90deg, #cbd5e0, #2c7da0, #cbd5e0);\n }\n .artigo-footer a {\n color: #2c7da0 !important;\n text-decoration: none;\n }\n .artigo-footer a:hover {\n text-decoration: underline;\n }\n\n \/* Responsivo *\/\n @media (max-width: 700px) {\n .artigo-hero h1 {\n font-size: 1.6rem;\n }\n .artigo-content {\n padding: 1.5rem;\n }\n .artigo-content h2 {\n font-size: 1.5rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"artigo-container\">\n <div class=\"artigo-hero\">\n <h1>\ud83d\udcd8 L\u00f3gica de Programa\u00e7\u00e3o com JavaScript: Guia Completo para Iniciantes (Do Zero ao Primeiro Projeto)<\/h1>\n <p>Do zero ao primeiro projeto \u2022 Algoritmos, condicionais, switch case e muito mais<\/p>\n <\/div>\n <div class=\"artigo-content\">\n\n <p>\ud83c\udfaf <strong>Neste artigo voc\u00ea vai aprender:<\/strong> o que \u00e9 algoritmo, como construir um sistema, usar condicionais (<code>if\/else<\/code> e <code>switch case<\/code>), criar uma calculadora com menu e dar os primeiros passos na programa\u00e7\u00e3o com JavaScript.<\/p>\n\n <h2>1. Introdu\u00e7\u00e3o: Por que a l\u00f3gica de programa\u00e7\u00e3o \u00e9 o seu primeiro passo?<\/h2>\n <p>Voc\u00ea quer aprender a programar, j\u00e1 assistiu a v\u00e1rios v\u00eddeos, mas ainda sente que \u201ctrava\u201d na hora de criar seus pr\u00f3prios c\u00f3digos? O problema quase sempre \u00e9 o mesmo: <strong>falta de base em l\u00f3gica de programa\u00e7\u00e3o<\/strong>.<\/p>\n <p>Neste artigo, vamos construir juntos os fundamentos que usei ao vivo com meus alunos da ETEC e nos meus projetos. Todo o conte\u00fado foi extra\u00eddo de uma live especial onde unimos duas aulas de l\u00f3gica com JavaScript. Voc\u00ea vai entender o que \u00e9 um algoritmo, como transformar uma descri\u00e7\u00e3o narrativa em c\u00f3digo, e ainda vai p\u00f4r a m\u00e3o na massa com exemplos pr\u00e1ticos.<\/p>\n\n <div class=\"tip\">\n \ud83d\udca1 <strong>Quer ver a explica\u00e7\u00e3o completa em v\u00eddeo?<\/strong><br>\n No final deste artigo voc\u00ea encontra o link para a live completa (mais de 2h de conte\u00fado aprofundado). Continue estudando por aqui e depois assista \u00e0 aula pr\u00e1tica!\n <\/div>\n\n <h2>2. O que \u00e9 um Sistema? A analogia que muda tudo<\/h2>\n <p>Antes de falar de c\u00f3digo, precisamos entender o que estamos construindo. Um <strong>sistema<\/strong> \u00e9 um conjunto de elementos interdependentes que formam um todo organizado. Pense no sistema solar: cada planeta tem sua fun\u00e7\u00e3o, mas todos trabalham em conjunto.<\/p>\n <p>No mundo do desenvolvimento, qualquer sistema \u2013 um site, um aplicativo, uma calculadora \u2013 precisa de tr\u00eas partes:<\/p>\n <ul>\n <li><strong>Entrada (input):<\/strong> dados que o usu\u00e1rio fornece (ex: peso e altura).<\/li>\n <li><strong>Processamento:<\/strong> regras, c\u00e1lculos e decis\u00f5es (ex: f\u00f3rmula do IMC).<\/li>\n <li><strong>Sa\u00edda (output):<\/strong> resultado exibido para o usu\u00e1rio (ex: \u201cAbaixo do peso\u201d).<\/li>\n <\/ul>\n <p>Quando voc\u00ea estuda <strong>condicionais<\/strong>, <strong>la\u00e7os de repeti\u00e7\u00e3o<\/strong> e <strong>vari\u00e1veis<\/strong>, est\u00e1 aprendendo as pe\u00e7as que v\u00e3o formar o seu sistema.<\/p>\n\n <h2>3. Algoritmo: a sequ\u00eancia que resolve problemas<\/h2>\n <p><strong>Algoritmo<\/strong> \u00e9 uma sequ\u00eancia finita de passos para resolver um problema. N\u00e3o existe um \u00fanico jeito certo \u2013 dois programadores podem criar algoritmos diferentes que chegam ao mesmo resultado.<\/p>\n <p>\ud83d\udccc <strong>Exemplo do dia a dia:<\/strong> o caminho que voc\u00ea faz de casa at\u00e9 o trabalho (levantar, tomar caf\u00e9, pegar o \u00f4nibus, andar at\u00e9 a empresa) \u00e9 um algoritmo.<\/p>\n <p>Na programa\u00e7\u00e3o, um algoritmo pode ser representado de v\u00e1rias formas:<\/p>\n <ul>\n <li><strong>Descri\u00e7\u00e3o narrativa:<\/strong> texto em linguagem natural (o cliente descreve o que quer).<\/li>\n <li><strong>Fluxograma:<\/strong> diagrama com formas geom\u00e9tricas (in\u00edcio, processo, decis\u00e3o, fim).<\/li>\n <li><strong>Pseudoc\u00f3digo (Portugol):<\/strong> quase c\u00f3digo, mas em portugu\u00eas estruturado.<\/li>\n <li><strong>C\u00f3digo fonte:<\/strong> JavaScript, Python, Java etc.<\/li>\n <\/ul>\n <p>Neste artigo, vamos focar em <strong>descri\u00e7\u00e3o narrativa \u2192 c\u00f3digo JavaScript<\/strong>, que \u00e9 o que voc\u00ea realmente vai usar no dia a dia.<\/p>\n\n <h2>4. Da descri\u00e7\u00e3o narrativa ao c\u00f3digo: Estudo de caso \u2013 C\u00e1lculo de IMC<\/h2>\n <p>Um cliente envia a seguinte mensagem:<\/p>\n <blockquote>\u201cPreciso de um sistema para calcular o IMC de uma pessoa. Depois de calcular, o sistema deve mostrar na tela: abaixo do peso, peso normal, sobrepeso ou obesidade. As informa\u00e7\u00f5es (peso, altura, IMC e classifica\u00e7\u00e3o) devem ser salvas em um documento (opcional).\u201d<\/blockquote>\n <p>Agora vamos <strong>interpretar<\/strong> e transformar isso em requisitos:<\/p>\n <ul>\n <li>Dois campos de entrada: <code>peso<\/code> (kg) e <code>altura<\/code> (m).<\/li>\n <li>Bot\u00e3o \u201cCalcular IMC\u201d \u2013 faz o c\u00e1lculo e exibe a classifica\u00e7\u00e3o.<\/li>\n <li>Bot\u00e3o \u201cSalvar\u201d (opcional) \u2013 guarda os dados em JSON.<\/li>\n <li>F\u00f3rmula: <code>IMC = peso \/ (altura * altura)<\/code>.<\/li>\n <li>Classifica\u00e7\u00e3o (exemplo fict\u00edcio):\n <ul>\n <li>Menor que 18,5 \u2192 \u201cAbaixo do peso\u201d<\/li>\n <li>18,5 a 24,9 \u2192 \u201cPeso normal\u201d<\/li>\n <li>25 a 29,9 \u2192 \u201cSobrepeso\u201d<\/li>\n <li>30 ou mais \u2192 \u201cObesidade\u201d<\/li>\n <\/ul>\n <\/li>\n <\/ul>\n <p>Esse \u00e9 o poder da l\u00f3gica: voc\u00ea pega uma conversa \u201csolta\u201d e organiza em etapas que a m\u00e1quina entende. No c\u00f3digo, isso vira vari\u00e1veis, condicionais e fun\u00e7\u00f5es.<\/p>\n\n <h2>5. Primeiros passos no JavaScript: input, output e vari\u00e1veis<\/h2>\n <p>Para interagir com o usu\u00e1rio em ambiente de estudo, usamos:<\/p>\n <ul>\n <li><code>prompt(\"mensagem\")<\/code> \u2192 entrada de dados (sempre retorna uma <strong>string<\/strong>).<\/li>\n <li><code>alert(\"mensagem\")<\/code> \u2192 janela de alerta.<\/li>\n <li><code>console.log(\"mensagem\")<\/code> \u2192 exibe no console do navegador (F12).<\/li>\n <\/ul>\n <div class=\"note\">\n \u26a0\ufe0f <strong>Aten\u00e7\u00e3o:<\/strong> o valor vindo do <code>prompt<\/code> \u00e9 texto. Para fazer contas, converta para n\u00famero usando <code>Number()<\/code> ou <code>parseFloat()<\/code>.\n <\/div>\n <h3>Exemplo: somando dois n\u00fameros<\/h3>\n <pre><code>let n1 = Number(prompt(\"Digite o primeiro valor:\"));\nlet n2 = Number(prompt(\"Digite o segundo valor:\"));\nlet soma = n1 + n2;\nalert(\"A soma \u00e9: \" + soma);<\/code><\/pre>\n <p>Se voc\u00ea esquecer a convers\u00e3o, o sinal de <code>+<\/code> vai <strong>concatenar<\/strong> os textos (ex: 5 + 5 vira \u201c55\u201d em vez de 10).<\/p>\n <p>Outras formas de sa\u00edda:<\/p>\n <ul>\n <li><code>document.write(\"texto\")<\/code> \u2192 escreve diretamente no HTML.<\/li>\n <li><code>console.log(\"A soma \u00e9:\", soma)<\/code> \u2192 \u00fatil para depura\u00e7\u00e3o.<\/li>\n <\/ul>\n\n <h2>6. Condicionais: o que o algoritmo deve fazer quando\u2026<\/h2>\n <p>As condicionais permitem que o programa siga caminhos diferentes conforme os dados recebidos.<\/p>\n\n <h3>6.1 Estrutura <code>if \/ else<\/code> \u2013 exemplo do bom dia, boa tarde, boa noite<\/h3>\n <pre><code>let hora = 18;\n\nif (hora < 12) {\n console.log(\"Bom dia!\");\n} else if (hora >= 12 && hora < 18) {\n console.log(\"Boa tarde!\");\n} else {\n console.log(\"Boa noite!\");\n}<\/code><\/pre>\n <p><strong>Explica\u00e7\u00e3o:<\/strong> o programa testa a primeira condi\u00e7\u00e3o (<code>hora < 12<\/code>). Se for <code>false<\/code>, vai para o <code>else if<\/code>. Se tamb\u00e9m for <code>false<\/code>, cai no <code>else<\/code>. S\u00f3 um bloco \u00e9 executado.<\/p>\n\n <h3>6.2 Estrutura <code>switch case<\/code> \u2013 quando h\u00e1 muitas op\u00e7\u00f5es fixas<\/h3>\n <p>O <code>switch<\/code> \u00e9 ideal para menus ou situa\u00e7\u00f5es onde uma vari\u00e1vel pode assumir valores espec\u00edficos (1, 2, 3, \u201c+\u201d, \u201c-\u201c, etc.).<\/p>\n <pre><code>let operador = \"+\";\nlet a = 10, b = 5;\n\nswitch (operador) {\n case \"+\":\n console.log(a + b);\n break;\n case \"-\":\n console.log(a - b);\n break;\n default:\n console.log(\"Operador inv\u00e1lido\");\n}<\/code><\/pre>\n <div class=\"note\">\n \u26a1 <strong>Importante:<\/strong> o <code>break<\/code> interrompe a execu\u00e7\u00e3o e sai do <code>switch<\/code>. Sem ele, o c\u00f3digo \u201ccai\u201d no pr\u00f3ximo <code>case<\/code>.\n <\/div>\n\n <h2>7. Projeto pr\u00e1tico: Calculadora com Menu (usando <code>switch case<\/code> + tratamento de erros)<\/h2>\n <p>Vamos construir uma calculadora completa que roda no terminal (Node.js). Usaremos o pacote <code>prompt-sync<\/code> para capturar dados do usu\u00e1rio.<\/p>\n\n <h3>Passo 1: Instalar o pacote<\/h3>\n <pre><code>npm install prompt-sync<\/code><\/pre>\n\n <h3>Passo 2: C\u00f3digo completo (exemplo da live)<\/h3>\n <div class=\"projeto-box\">\n <pre><code>const prompt = require('prompt-sync')();\n\nfunction realizarOperacao(opcao, num1, num2) {\n switch (opcao) {\n case 1:\n return num1 + num2;\n case 2:\n return num1 - num2;\n case 3:\n return num1 * num2;\n case 4:\n if (num2 === 0) {\n return \"Erro: n\u00e3o \u00e9 poss\u00edvel dividir por zero!\";\n }\n return num1 \/ num2;\n default:\n return \"Op\u00e7\u00e3o inv\u00e1lida!\";\n }\n}\n\nconsole.log(\"--- CALCULADORA ---\");\nconsole.log(\"1 - Soma\\n2 - Subtra\u00e7\u00e3o\\n3 - Multiplica\u00e7\u00e3o\\n4 - Divis\u00e3o\");\nlet opcao = parseInt(prompt(\"Escolha uma op\u00e7\u00e3o: \"));\nlet num1 = parseFloat(prompt(\"Digite o primeiro n\u00famero: \"));\nlet num2 = parseFloat(prompt(\"Digite o segundo n\u00famero: \"));\n\nlet resultado = realizarOperacao(opcao, num1, num2);\nconsole.log(`Resultado: ${resultado}`);<\/code><\/pre>\n <\/div>\n\n <p><strong>O que aprendemos aqui?<\/strong><\/p>\n <ul>\n <li>Uso de <code>switch<\/code> com <code>return<\/code> (dispensa o <code>break<\/code>).<\/li>\n <li>Tratamento de divis\u00e3o por zero com <code>if<\/code>.<\/li>\n <li>Convers\u00e3o expl\u00edcita com <code>parseInt<\/code> e <code>parseFloat<\/code>.<\/li>\n <li>Template literal (`` `Resultado: ${resultado}` ``) para strings din\u00e2micas.<\/li>\n <\/ul>\n\n <h2>8. Dicas para voc\u00ea evoluir (e n\u00e3o travar)<\/h2>\n <ul>\n <li><strong>N\u00e3o copie e cole:<\/strong> digite cada linha. O aprendizado est\u00e1 no processo, n\u00e3o no Ctrl+C \/ Ctrl+V.<\/li>\n <li><strong>Use o console (F12) para depurar:<\/strong> insira <code>console.log(variavel)<\/code> para ver se o valor est\u00e1 correto.<\/li>\n <li><strong>Capriche no CSS:<\/strong> mesmo em projetos pequenos, uma interface bonita aumenta sua motiva\u00e7\u00e3o.<\/li>\n <li><strong>Aprenda Git e GitHub desde agora:<\/strong> controle de vers\u00e3o \u00e9 obrigat\u00f3rio para qualquer profissional.<\/li>\n <\/ul>\n <p>\ud83d\udccc <strong>Pr\u00f3ximos passos sugeridos:<\/strong><\/p>\n <ul>\n <li>La\u00e7os de repeti\u00e7\u00e3o (<code>for<\/code>, <code>while<\/code>, <code>do...while<\/code>)<\/li>\n <li>Vetores (arrays) e manipula\u00e7\u00e3o de listas<\/li>\n <li>Fun\u00e7\u00f5es ass\u00edncronas (<code>async\/await<\/code>)<\/li>\n <li>Banco de dados MySQL<\/li>\n <\/ul>\n\n <h2>9. Conclus\u00e3o<\/h2>\n <p>A l\u00f3gica de programa\u00e7\u00e3o \u00e9 a base que sustentar\u00e1 toda a sua carreira. N\u00e3o pule etapas. Se voc\u00ea entendeu os conceitos de algoritmo, entradas, sa\u00eddas, condicionais e praticou com os exemplos, j\u00e1 est\u00e1 \u00e0 frente de muita gente.<\/p>\n <p>E lembre-se: <strong>programar \u00e9 resolver problemas<\/strong>. Quanto mais voc\u00ea praticar com mini projetos, mais natural fica o processo.<\/p>\n\n <hr>\n\n \n <div class=\"artigo-final-cta\">\n \ud83c\udfac <strong>Assista \u00e0 live completa sobre este conte\u00fado no YouTube!<\/strong><br>\n <span style=\"font-size:1.2rem;\"><\/span><br>\n <small>N\u00e3o se esque\u00e7a de se inscrever no canal para mais conte\u00fados gratuitos.<\/small>\n <\/div>\n\n \n <\/div>\n<\/div>\n<\/body>\n<\/html>\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=\"#01 L\u00f3gica de Programa\u00e7\u00e3o com JavaScript do Zero \u2013 Parte 1 (Algoritmos, Condicionais e Mini Projeto)\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/uGUvMdrA3ro?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>L\u00f3gica de Programa\u00e7\u00e3o com JavaScript: Guia Completo para Iniciantes (Do Zero ao Primeiro Projeto) | Desvendando o C\u00f3digo \ud83d\udcd8 L\u00f3gica de Programa\u00e7\u00e3o com JavaScript: Guia Completo para Iniciantes (Do Zero ao Primeiro Projeto) Do zero ao primeiro projeto \u2022 Algoritmos, condicionais, switch case e muito mais \ud83c\udfaf Neste artigo voc\u00ea vai aprender: o que \u00e9 algoritmo, como construir um sistema, usar condicionais (if\/else e switch case), criar uma calculadora com menu e dar os primeiros passos na programa\u00e7\u00e3o com JavaScript. 1. Introdu\u00e7\u00e3o: Por que a l\u00f3gica de programa\u00e7\u00e3o \u00e9 o seu primeiro passo? Voc\u00ea quer aprender a programar, j\u00e1 assistiu a v\u00e1rios v\u00eddeos, mas ainda sente que \u201ctrava\u201d na hora de criar seus pr\u00f3prios c\u00f3digos? O problema quase sempre \u00e9 o mesmo: falta de base em l\u00f3gica de programa\u00e7\u00e3o. Neste artigo, vamos construir juntos os fundamentos que usei ao vivo com meus alunos da ETEC e nos meus projetos. Todo o conte\u00fado foi extra\u00eddo de uma live especial onde unimos duas aulas de l\u00f3gica com JavaScript. Voc\u00ea vai entender o que \u00e9 um algoritmo, como transformar uma descri\u00e7\u00e3o narrativa em c\u00f3digo, e ainda vai p\u00f4r a m\u00e3o na massa com exemplos pr\u00e1ticos. \ud83d\udca1 Quer ver a explica\u00e7\u00e3o completa em v\u00eddeo? No final deste artigo voc\u00ea encontra o link para a live completa (mais de 2h de conte\u00fado aprofundado). Continue estudando por aqui e depois assista \u00e0 aula pr\u00e1tica! 2. O que \u00e9 um Sistema? A analogia que muda tudo Antes de falar de c\u00f3digo, precisamos entender o que estamos construindo. Um sistema \u00e9 um conjunto de elementos interdependentes que formam um todo organizado. Pense no sistema solar: cada planeta tem sua fun\u00e7\u00e3o, mas todos trabalham em conjunto. No mundo do desenvolvimento, qualquer sistema \u2013 um site, um aplicativo, uma calculadora \u2013 precisa de tr\u00eas partes: Entrada (input): dados que o usu\u00e1rio fornece (ex: peso e altura). Processamento: regras, c\u00e1lculos e decis\u00f5es (ex: f\u00f3rmula do IMC). Sa\u00edda (output): resultado exibido para o usu\u00e1rio (ex: \u201cAbaixo do peso\u201d). Quando voc\u00ea estuda condicionais, la\u00e7os de repeti\u00e7\u00e3o e vari\u00e1veis, est\u00e1 aprendendo as pe\u00e7as que v\u00e3o formar o seu sistema. 3. Algoritmo: a sequ\u00eancia que resolve problemas Algoritmo \u00e9 uma sequ\u00eancia finita de passos para resolver um problema. N\u00e3o existe um \u00fanico jeito certo \u2013 dois programadores podem criar algoritmos diferentes que chegam ao mesmo resultado. \ud83d\udccc Exemplo do dia a dia: o caminho que voc\u00ea faz de casa at\u00e9 o trabalho (levantar, tomar caf\u00e9, pegar o \u00f4nibus, andar at\u00e9 a empresa) \u00e9 um algoritmo. Na programa\u00e7\u00e3o, um algoritmo pode ser representado de v\u00e1rias formas: Descri\u00e7\u00e3o narrativa: texto em linguagem natural (o cliente descreve o que quer). Fluxograma: diagrama com formas geom\u00e9tricas (in\u00edcio, processo, decis\u00e3o, fim). Pseudoc\u00f3digo (Portugol): quase c\u00f3digo, mas em portugu\u00eas estruturado. C\u00f3digo fonte: JavaScript, Python, Java etc. Neste artigo, vamos focar em descri\u00e7\u00e3o narrativa \u2192 c\u00f3digo JavaScript, que \u00e9 o que voc\u00ea realmente vai usar no dia a dia. 4. Da descri\u00e7\u00e3o narrativa ao c\u00f3digo: Estudo de caso \u2013 C\u00e1lculo de IMC Um cliente envia a seguinte mensagem: \u201cPreciso de um sistema para calcular o IMC de uma pessoa. Depois de calcular, o sistema deve mostrar na tela: abaixo do peso, peso normal, sobrepeso ou obesidade. As informa\u00e7\u00f5es (peso, altura, IMC e classifica\u00e7\u00e3o) devem ser salvas em um documento (opcional).\u201d Agora vamos interpretar e transformar isso em requisitos: Dois campos de entrada: peso (kg) e altura (m). Bot\u00e3o \u201cCalcular IMC\u201d \u2013 faz o c\u00e1lculo e exibe a classifica\u00e7\u00e3o. Bot\u00e3o \u201cSalvar\u201d (opcional) \u2013 guarda os dados em JSON. F\u00f3rmula: IMC = peso \/ (altura * altura). Classifica\u00e7\u00e3o (exemplo fict\u00edcio): Menor que 18,5 \u2192 \u201cAbaixo do peso\u201d 18,5 a 24,9 \u2192 \u201cPeso normal\u201d 25 a 29,9 \u2192 \u201cSobrepeso\u201d 30 ou mais \u2192 \u201cObesidade\u201d Esse \u00e9 o poder da l\u00f3gica: voc\u00ea pega uma conversa \u201csolta\u201d e organiza em etapas que a m\u00e1quina entende. No c\u00f3digo, isso vira vari\u00e1veis, condicionais e fun\u00e7\u00f5es. 5. Primeiros passos no JavaScript: input, output e vari\u00e1veis Para interagir com o usu\u00e1rio em ambiente de estudo, usamos: prompt(“mensagem”) \u2192 entrada de dados (sempre retorna uma string). alert(“mensagem”) \u2192 janela de alerta. console.log(“mensagem”) \u2192 exibe no console do navegador (F12). \u26a0\ufe0f Aten\u00e7\u00e3o: o valor vindo do prompt \u00e9 texto. Para fazer contas, converta para n\u00famero usando Number() ou parseFloat(). Exemplo: somando dois n\u00fameros let n1 = Number(prompt(“Digite o primeiro valor:”)); let n2 = Number(prompt(“Digite o segundo valor:”)); let soma = n1 + n2; alert(“A soma \u00e9: ” + soma); Se voc\u00ea esquecer a convers\u00e3o, o sinal de + vai concatenar os textos (ex: 5 + 5 vira \u201c55\u201d em vez de 10). Outras formas de sa\u00edda: document.write(“texto”) \u2192 escreve diretamente no HTML. console.log(“A soma \u00e9:”, soma) \u2192 \u00fatil para depura\u00e7\u00e3o. 6. Condicionais: o que o algoritmo deve fazer quando\u2026 As condicionais permitem que o programa siga caminhos diferentes conforme os dados recebidos. 6.1 Estrutura if \/ else \u2013 exemplo do bom dia, boa tarde, boa noite let hora = 18; if (hora < 12) { console.log(\"Bom dia!\"); } else if (hora >= 12 && hora < 18) { console.log(\"Boa tarde!\"); } else { console.log(\"Boa noite!\"); } Explica\u00e7\u00e3o: o programa testa a primeira condi\u00e7\u00e3o (hora < 12). Se for false, vai para o else if. Se tamb\u00e9m for false, cai no else. S\u00f3 um bloco \u00e9 executado. 6.2 Estrutura switch case \u2013 quando h\u00e1 muitas op\u00e7\u00f5es fixas O switch \u00e9 ideal para menus ou situa\u00e7\u00f5es onde uma vari\u00e1vel pode assumir valores espec\u00edficos (1, 2, 3, \u201c+\u201d, \u201c-\u201c, etc.). let operador = \"+\"; let a = 10, b = 5; switch (operador) { case \"+\": console.log(a + b); break; case \"-\": console.log(a - b); break; default: console.log(\"Operador inv\u00e1lido\"); } \u26a1 Importante: o break interrompe a execu\u00e7\u00e3o e sai do switch. Sem ele, o c\u00f3digo \u201ccai\u201d no pr\u00f3ximo case. 7. Projeto pr\u00e1tico: Calculadora com Menu (usando switch case + tratamento de erros) Vamos construir uma calculadora completa que roda no terminal (Node.js). Usaremos o pacote prompt-sync para capturar dados do usu\u00e1rio. Passo 1: Instalar o pacote npm install prompt-sync Passo 2: C\u00f3digo completo (exemplo da live) const prompt = require('prompt-sync')(); function realizarOperacao(opcao, num1, num2) { switch (opcao) { case 1: return num1 + num2; case 2: return num1 - num2; case 3: return num1 * num2; case 4: if (num2 === 0) { return \"Erro: n\u00e3o \u00e9 poss\u00edvel dividir por zero!\"; } return num1 \/ num2; default: return \"Op\u00e7\u00e3o inv\u00e1lida!\"; } } console.log(\"--- CALCULADORA ---\"); console.log(\"1 - Soma\\n2 - Subtra\u00e7\u00e3o\\n3 - Multiplica\u00e7\u00e3o\\n4 - Divis\u00e3o\"); let opcao = parseInt(prompt(\"Escolha uma op\u00e7\u00e3o: \")); let num1 = parseFloat(prompt(\"Digite o primeiro n\u00famero: \")); let num2 = parseFloat(prompt(\"Digite o segundo n\u00famero: \")); let resultado = realizarOperacao(opcao, num1, num2); console.log(`Resultado: ${resultado}`); O que aprendemos aqui? Uso de switch com return (dispensa o break). Tratamento de divis\u00e3o por zero com if. Convers\u00e3o expl\u00edcita com parseInt e parseFloat. Template literal (`` `Resultado: ${resultado}` ``) para strings din\u00e2micas. 8. Dicas para voc\u00ea evoluir (e n\u00e3o travar) N\u00e3o copie e cole: digite cada linha. O aprendizado est\u00e1 no processo, n\u00e3o no Ctrl+C \/ Ctrl+V. Use o console (F12) para depurar: insira console.log(variavel) para ver se o valor est\u00e1 correto. Capriche no CSS: mesmo em projetos pequenos, uma interface bonita aumenta sua motiva\u00e7\u00e3o. Aprenda Git e GitHub desde agora: controle de vers\u00e3o \u00e9 obrigat\u00f3rio para qualquer profissional. \ud83d\udccc Pr\u00f3ximos passos sugeridos: La\u00e7os de repeti\u00e7\u00e3o (for, while, do...while) Vetores (arrays) e manipula\u00e7\u00e3o de listas Fun\u00e7\u00f5es ass\u00edncronas (async\/await) Banco de dados MySQL 9. Conclus\u00e3o A l\u00f3gica de programa\u00e7\u00e3o \u00e9 a base que sustentar\u00e1 toda a sua carreira. N\u00e3o pule etapas. Se voc\u00ea entendeu os conceitos de algoritmo, entradas, sa\u00eddas, condicionais e praticou com os exemplos, j\u00e1 est\u00e1 \u00e0 frente de muita gente. E lembre-se: programar \u00e9 resolver problemas. Quanto mais voc\u00ea praticar com mini projetos, mais natural fica o processo. \ud83c\udfac Assista \u00e0 live completa sobre este conte\u00fado no YouTube! N\u00e3o se esque\u00e7a de se inscrever no canal para mais conte\u00fados gratuitos.\n<\/p>\n","protected":false},"author":1,"featured_media":2009,"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":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2006"}],"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=2006"}],"version-history":[{"count":9,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2006\/revisions"}],"predecessor-version":[{"id":2017,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2006\/revisions\/2017"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/2009"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2006"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2006"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2006,"date":"2026-05-24T20:20:18","date_gmt":"2026-05-24T23:20:18","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=2006"},"modified":"2026-05-24T20:39:30","modified_gmt":"2026-05-24T23:39:30","slug":"logica-de-programacao-com-javascript-guia-completo-para-iniciantes-do-zero-ao-primeiro-projeto","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=2006","title":{"rendered":"L\u00f3gica de Programa\u00e7\u00e3o com JavaScript: Guia Completo para Iniciantes (Do Zero ao Primeiro Projeto)"},"content":{"rendered":"\n\n\n\n \n \n L\u00f3gica de Programa\u00e7\u00e3o com JavaScript: Guia Completo para Iniciantes (Do Zero ao Primeiro Projeto) | Desvendando o C\u00f3digo<\/title>\n <meta name=\"description\" content=\"Aprenda l\u00f3gica de programa\u00e7\u00e3o do zero com JavaScript neste guia completo. Entenda algoritmos, condicionais, switch case e crie um projeto de calculadora. Iniciante? Comece aqui!\">\n <style>\n \/* Reset completo de cores para o container do artigo - NADA herda do tema do blog *\/\n .artigo-container, \n .artigo-container * {\n all: revert; \/* Reseta propriedades herdadas do blog (importante para dark mode) *\/\n }\n \n .artigo-container {\n display: block;\n max-width: 1000px;\n margin: 0 auto;\n background: #ffffff !important;\n border-radius: 32px;\n box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n line-height: 1.6;\n color: #1e2a3a !important;\n }\n\n \/* Hero *\/\n .artigo-hero {\n background: linear-gradient(120deg, #0f2027, #203a43, #2c5364) !important;\n color: #ffffff !important;\n padding: 3rem 2rem;\n text-align: center;\n }\n .artigo-hero h1 {\n color: #ffffff !important;\n font-size: 2.2rem;\n margin-bottom: 1rem;\n font-weight: 800;\n }\n .artigo-hero p {\n color: #f0f0f0 !important;\n font-size: 1.2rem;\n opacity: 0.9;\n }\n\n \/* Conte\u00fado principal *\/\n .artigo-content {\n padding: 2rem 2rem 2.5rem;\n background: #ffffff !important;\n }\n\n \/* T\u00edtulos *\/\n .artigo-content h2 {\n font-size: 1.8rem;\n margin-top: 2rem;\n margin-bottom: 1rem;\n color: #0f2027 !important;\n border-left: 6px solid #2c7da0;\n padding-left: 1rem;\n }\n .artigo-content h3 {\n font-size: 1.4rem;\n margin: 1.5rem 0 1rem;\n color: #2c3e50 !important;\n }\n\n \/* Par\u00e1grafos e listas *\/\n .artigo-content p,\n .artigo-content li {\n color: #1e2a3a !important;\n margin-bottom: 1rem;\n }\n .artigo-content ul, \n .artigo-content ol {\n margin-left: 1.5rem;\n margin-bottom: 1.2rem;\n }\n .artigo-content li {\n margin-bottom: 0.5rem;\n }\n\n \/* C\u00f3digo inline *\/\n .artigo-content code {\n background: #1e2a3a !important;\n color: #e2e8f0 !important;\n padding: 0.2rem 0.5rem;\n border-radius: 8px;\n font-family: 'Fira Code', 'Courier New', monospace;\n font-size: 0.9rem;\n }\n \/* Bloco de c\u00f3digo *\/\n .artigo-content pre {\n background: #1e2a3a !important;\n color: #f8f9fa !important;\n padding: 1.2rem;\n border-radius: 16px;\n overflow-x: auto;\n margin: 1.5rem 0;\n font-family: 'Fira Code', monospace;\n font-size: 0.9rem;\n border-left: 4px solid #2c7da0;\n }\n .artigo-content pre code {\n background: none !important;\n padding: 0;\n color: inherit !important;\n }\n\n \/* Blockquote *\/\n .artigo-content blockquote {\n background: #eef2f5 !important;\n border-left: 6px solid #2c7da0;\n padding: 1rem 1.5rem;\n margin: 1.5rem 0;\n font-style: italic;\n border-radius: 20px;\n font-weight: 500;\n color: #1e2a3a !important;\n }\n\n \/* Caixas de nota, dica e projeto *\/\n .artigo-content .note {\n background: #fff7e6 !important;\n border-left: 6px solid #f4b942;\n padding: 1rem 1.5rem;\n border-radius: 20px;\n margin: 1.5rem 0;\n color: #1e2a3a !important;\n }\n .artigo-content .tip {\n background: #e6f7ec !important;\n border-left: 6px solid #2ecc71;\n padding: 1rem 1.5rem;\n border-radius: 20px;\n margin: 1.5rem 0;\n color: #1e2a3a !important;\n }\n .artigo-content .projeto-box {\n background: #f0f4f8 !important;\n padding: 1.5rem;\n border-radius: 24px;\n margin: 2rem 0;\n box-shadow: 0 8px 15px rgba(0,0,0,0.05);\n color: #1e2a3a !important;\n }\n\n \/* Rodap\u00e9 (final CTA) *\/\n .artigo-final-cta {\n background: linear-gradient(120deg, #0f2027, #203a43) !important;\n color: #ffffff !important;\n text-align: center;\n padding: 2rem;\n border-radius: 28px;\n margin-top: 2rem;\n }\n .artigo-final-cta a {\n color: #ffd966 !important;\n text-decoration: none;\n font-weight: bold;\n border-bottom: 2px solid #ffd966;\n padding-bottom: 2px;\n }\n .artigo-final-cta a:hover {\n color: #ffea9e !important;\n }\n .artigo-final-cta small {\n color: #dddddd !important;\n }\n\n \/* Footer do blog *\/\n .artigo-footer {\n margin-top: 2rem;\n text-align: center;\n font-size: 0.9rem;\n color: #5a6e7c !important;\n }\n .artigo-footer hr {\n margin: 2rem 0;\n border: 0;\n height: 2px;\n background: linear-gradient(90deg, #cbd5e0, #2c7da0, #cbd5e0);\n }\n .artigo-footer a {\n color: #2c7da0 !important;\n text-decoration: none;\n }\n .artigo-footer a:hover {\n text-decoration: underline;\n }\n\n \/* Responsivo *\/\n @media (max-width: 700px) {\n .artigo-hero h1 {\n font-size: 1.6rem;\n }\n .artigo-content {\n padding: 1.5rem;\n }\n .artigo-content h2 {\n font-size: 1.5rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"artigo-container\">\n <div class=\"artigo-hero\">\n <h1>\ud83d\udcd8 L\u00f3gica de Programa\u00e7\u00e3o com JavaScript: Guia Completo para Iniciantes (Do Zero ao Primeiro Projeto)<\/h1>\n <p>Do zero ao primeiro projeto \u2022 Algoritmos, condicionais, switch case e muito mais<\/p>\n <\/div>\n <div class=\"artigo-content\">\n\n <p>\ud83c\udfaf <strong>Neste artigo voc\u00ea vai aprender:<\/strong> o que \u00e9 algoritmo, como construir um sistema, usar condicionais (<code>if\/else<\/code> e <code>switch case<\/code>), criar uma calculadora com menu e dar os primeiros passos na programa\u00e7\u00e3o com JavaScript.<\/p>\n\n <h2>1. Introdu\u00e7\u00e3o: Por que a l\u00f3gica de programa\u00e7\u00e3o \u00e9 o seu primeiro passo?<\/h2>\n <p>Voc\u00ea quer aprender a programar, j\u00e1 assistiu a v\u00e1rios v\u00eddeos, mas ainda sente que \u201ctrava\u201d na hora de criar seus pr\u00f3prios c\u00f3digos? O problema quase sempre \u00e9 o mesmo: <strong>falta de base em l\u00f3gica de programa\u00e7\u00e3o<\/strong>.<\/p>\n <p>Neste artigo, vamos construir juntos os fundamentos que usei ao vivo com meus alunos da ETEC e nos meus projetos. Todo o conte\u00fado foi extra\u00eddo de uma live especial onde unimos duas aulas de l\u00f3gica com JavaScript. Voc\u00ea vai entender o que \u00e9 um algoritmo, como transformar uma descri\u00e7\u00e3o narrativa em c\u00f3digo, e ainda vai p\u00f4r a m\u00e3o na massa com exemplos pr\u00e1ticos.<\/p>\n\n <div class=\"tip\">\n \ud83d\udca1 <strong>Quer ver a explica\u00e7\u00e3o completa em v\u00eddeo?<\/strong><br>\n No final deste artigo voc\u00ea encontra o link para a live completa (mais de 2h de conte\u00fado aprofundado). Continue estudando por aqui e depois assista \u00e0 aula pr\u00e1tica!\n <\/div>\n\n <h2>2. O que \u00e9 um Sistema? A analogia que muda tudo<\/h2>\n <p>Antes de falar de c\u00f3digo, precisamos entender o que estamos construindo. Um <strong>sistema<\/strong> \u00e9 um conjunto de elementos interdependentes que formam um todo organizado. Pense no sistema solar: cada planeta tem sua fun\u00e7\u00e3o, mas todos trabalham em conjunto.<\/p>\n <p>No mundo do desenvolvimento, qualquer sistema \u2013 um site, um aplicativo, uma calculadora \u2013 precisa de tr\u00eas partes:<\/p>\n <ul>\n <li><strong>Entrada (input):<\/strong> dados que o usu\u00e1rio fornece (ex: peso e altura).<\/li>\n <li><strong>Processamento:<\/strong> regras, c\u00e1lculos e decis\u00f5es (ex: f\u00f3rmula do IMC).<\/li>\n <li><strong>Sa\u00edda (output):<\/strong> resultado exibido para o usu\u00e1rio (ex: \u201cAbaixo do peso\u201d).<\/li>\n <\/ul>\n <p>Quando voc\u00ea estuda <strong>condicionais<\/strong>, <strong>la\u00e7os de repeti\u00e7\u00e3o<\/strong> e <strong>vari\u00e1veis<\/strong>, est\u00e1 aprendendo as pe\u00e7as que v\u00e3o formar o seu sistema.<\/p>\n\n <h2>3. Algoritmo: a sequ\u00eancia que resolve problemas<\/h2>\n <p><strong>Algoritmo<\/strong> \u00e9 uma sequ\u00eancia finita de passos para resolver um problema. N\u00e3o existe um \u00fanico jeito certo \u2013 dois programadores podem criar algoritmos diferentes que chegam ao mesmo resultado.<\/p>\n <p>\ud83d\udccc <strong>Exemplo do dia a dia:<\/strong> o caminho que voc\u00ea faz de casa at\u00e9 o trabalho (levantar, tomar caf\u00e9, pegar o \u00f4nibus, andar at\u00e9 a empresa) \u00e9 um algoritmo.<\/p>\n <p>Na programa\u00e7\u00e3o, um algoritmo pode ser representado de v\u00e1rias formas:<\/p>\n <ul>\n <li><strong>Descri\u00e7\u00e3o narrativa:<\/strong> texto em linguagem natural (o cliente descreve o que quer).<\/li>\n <li><strong>Fluxograma:<\/strong> diagrama com formas geom\u00e9tricas (in\u00edcio, processo, decis\u00e3o, fim).<\/li>\n <li><strong>Pseudoc\u00f3digo (Portugol):<\/strong> quase c\u00f3digo, mas em portugu\u00eas estruturado.<\/li>\n <li><strong>C\u00f3digo fonte:<\/strong> JavaScript, Python, Java etc.<\/li>\n <\/ul>\n <p>Neste artigo, vamos focar em <strong>descri\u00e7\u00e3o narrativa \u2192 c\u00f3digo JavaScript<\/strong>, que \u00e9 o que voc\u00ea realmente vai usar no dia a dia.<\/p>\n\n <h2>4. Da descri\u00e7\u00e3o narrativa ao c\u00f3digo: Estudo de caso \u2013 C\u00e1lculo de IMC<\/h2>\n <p>Um cliente envia a seguinte mensagem:<\/p>\n <blockquote>\u201cPreciso de um sistema para calcular o IMC de uma pessoa. Depois de calcular, o sistema deve mostrar na tela: abaixo do peso, peso normal, sobrepeso ou obesidade. As informa\u00e7\u00f5es (peso, altura, IMC e classifica\u00e7\u00e3o) devem ser salvas em um documento (opcional).\u201d<\/blockquote>\n <p>Agora vamos <strong>interpretar<\/strong> e transformar isso em requisitos:<\/p>\n <ul>\n <li>Dois campos de entrada: <code>peso<\/code> (kg) e <code>altura<\/code> (m).<\/li>\n <li>Bot\u00e3o \u201cCalcular IMC\u201d \u2013 faz o c\u00e1lculo e exibe a classifica\u00e7\u00e3o.<\/li>\n <li>Bot\u00e3o \u201cSalvar\u201d (opcional) \u2013 guarda os dados em JSON.<\/li>\n <li>F\u00f3rmula: <code>IMC = peso \/ (altura * altura)<\/code>.<\/li>\n <li>Classifica\u00e7\u00e3o (exemplo fict\u00edcio):\n <ul>\n <li>Menor que 18,5 \u2192 \u201cAbaixo do peso\u201d<\/li>\n <li>18,5 a 24,9 \u2192 \u201cPeso normal\u201d<\/li>\n <li>25 a 29,9 \u2192 \u201cSobrepeso\u201d<\/li>\n <li>30 ou mais \u2192 \u201cObesidade\u201d<\/li>\n <\/ul>\n <\/li>\n <\/ul>\n <p>Esse \u00e9 o poder da l\u00f3gica: voc\u00ea pega uma conversa \u201csolta\u201d e organiza em etapas que a m\u00e1quina entende. No c\u00f3digo, isso vira vari\u00e1veis, condicionais e fun\u00e7\u00f5es.<\/p>\n\n <h2>5. Primeiros passos no JavaScript: input, output e vari\u00e1veis<\/h2>\n <p>Para interagir com o usu\u00e1rio em ambiente de estudo, usamos:<\/p>\n <ul>\n <li><code>prompt(\"mensagem\")<\/code> \u2192 entrada de dados (sempre retorna uma <strong>string<\/strong>).<\/li>\n <li><code>alert(\"mensagem\")<\/code> \u2192 janela de alerta.<\/li>\n <li><code>console.log(\"mensagem\")<\/code> \u2192 exibe no console do navegador (F12).<\/li>\n <\/ul>\n <div class=\"note\">\n \u26a0\ufe0f <strong>Aten\u00e7\u00e3o:<\/strong> o valor vindo do <code>prompt<\/code> \u00e9 texto. Para fazer contas, converta para n\u00famero usando <code>Number()<\/code> ou <code>parseFloat()<\/code>.\n <\/div>\n <h3>Exemplo: somando dois n\u00fameros<\/h3>\n <pre><code>let n1 = Number(prompt(\"Digite o primeiro valor:\"));\nlet n2 = Number(prompt(\"Digite o segundo valor:\"));\nlet soma = n1 + n2;\nalert(\"A soma \u00e9: \" + soma);<\/code><\/pre>\n <p>Se voc\u00ea esquecer a convers\u00e3o, o sinal de <code>+<\/code> vai <strong>concatenar<\/strong> os textos (ex: 5 + 5 vira \u201c55\u201d em vez de 10).<\/p>\n <p>Outras formas de sa\u00edda:<\/p>\n <ul>\n <li><code>document.write(\"texto\")<\/code> \u2192 escreve diretamente no HTML.<\/li>\n <li><code>console.log(\"A soma \u00e9:\", soma)<\/code> \u2192 \u00fatil para depura\u00e7\u00e3o.<\/li>\n <\/ul>\n\n <h2>6. Condicionais: o que o algoritmo deve fazer quando\u2026<\/h2>\n <p>As condicionais permitem que o programa siga caminhos diferentes conforme os dados recebidos.<\/p>\n\n <h3>6.1 Estrutura <code>if \/ else<\/code> \u2013 exemplo do bom dia, boa tarde, boa noite<\/h3>\n <pre><code>let hora = 18;\n\nif (hora < 12) {\n console.log(\"Bom dia!\");\n} else if (hora >= 12 && hora < 18) {\n console.log(\"Boa tarde!\");\n} else {\n console.log(\"Boa noite!\");\n}<\/code><\/pre>\n <p><strong>Explica\u00e7\u00e3o:<\/strong> o programa testa a primeira condi\u00e7\u00e3o (<code>hora < 12<\/code>). Se for <code>false<\/code>, vai para o <code>else if<\/code>. Se tamb\u00e9m for <code>false<\/code>, cai no <code>else<\/code>. S\u00f3 um bloco \u00e9 executado.<\/p>\n\n <h3>6.2 Estrutura <code>switch case<\/code> \u2013 quando h\u00e1 muitas op\u00e7\u00f5es fixas<\/h3>\n <p>O <code>switch<\/code> \u00e9 ideal para menus ou situa\u00e7\u00f5es onde uma vari\u00e1vel pode assumir valores espec\u00edficos (1, 2, 3, \u201c+\u201d, \u201c-\u201c, etc.).<\/p>\n <pre><code>let operador = \"+\";\nlet a = 10, b = 5;\n\nswitch (operador) {\n case \"+\":\n console.log(a + b);\n break;\n case \"-\":\n console.log(a - b);\n break;\n default:\n console.log(\"Operador inv\u00e1lido\");\n}<\/code><\/pre>\n <div class=\"note\">\n \u26a1 <strong>Importante:<\/strong> o <code>break<\/code> interrompe a execu\u00e7\u00e3o e sai do <code>switch<\/code>. Sem ele, o c\u00f3digo \u201ccai\u201d no pr\u00f3ximo <code>case<\/code>.\n <\/div>\n\n <h2>7. Projeto pr\u00e1tico: Calculadora com Menu (usando <code>switch case<\/code> + tratamento de erros)<\/h2>\n <p>Vamos construir uma calculadora completa que roda no terminal (Node.js). Usaremos o pacote <code>prompt-sync<\/code> para capturar dados do usu\u00e1rio.<\/p>\n\n <h3>Passo 1: Instalar o pacote<\/h3>\n <pre><code>npm install prompt-sync<\/code><\/pre>\n\n <h3>Passo 2: C\u00f3digo completo (exemplo da live)<\/h3>\n <div class=\"projeto-box\">\n <pre><code>const prompt = require('prompt-sync')();\n\nfunction realizarOperacao(opcao, num1, num2) {\n switch (opcao) {\n case 1:\n return num1 + num2;\n case 2:\n return num1 - num2;\n case 3:\n return num1 * num2;\n case 4:\n if (num2 === 0) {\n return \"Erro: n\u00e3o \u00e9 poss\u00edvel dividir por zero!\";\n }\n return num1 \/ num2;\n default:\n return \"Op\u00e7\u00e3o inv\u00e1lida!\";\n }\n}\n\nconsole.log(\"--- CALCULADORA ---\");\nconsole.log(\"1 - Soma\\n2 - Subtra\u00e7\u00e3o\\n3 - Multiplica\u00e7\u00e3o\\n4 - Divis\u00e3o\");\nlet opcao = parseInt(prompt(\"Escolha uma op\u00e7\u00e3o: \"));\nlet num1 = parseFloat(prompt(\"Digite o primeiro n\u00famero: \"));\nlet num2 = parseFloat(prompt(\"Digite o segundo n\u00famero: \"));\n\nlet resultado = realizarOperacao(opcao, num1, num2);\nconsole.log(`Resultado: ${resultado}`);<\/code><\/pre>\n <\/div>\n\n <p><strong>O que aprendemos aqui?<\/strong><\/p>\n <ul>\n <li>Uso de <code>switch<\/code> com <code>return<\/code> (dispensa o <code>break<\/code>).<\/li>\n <li>Tratamento de divis\u00e3o por zero com <code>if<\/code>.<\/li>\n <li>Convers\u00e3o expl\u00edcita com <code>parseInt<\/code> e <code>parseFloat<\/code>.<\/li>\n <li>Template literal (`` `Resultado: ${resultado}` ``) para strings din\u00e2micas.<\/li>\n <\/ul>\n\n <h2>8. Dicas para voc\u00ea evoluir (e n\u00e3o travar)<\/h2>\n <ul>\n <li><strong>N\u00e3o copie e cole:<\/strong> digite cada linha. O aprendizado est\u00e1 no processo, n\u00e3o no Ctrl+C \/ Ctrl+V.<\/li>\n <li><strong>Use o console (F12) para depurar:<\/strong> insira <code>console.log(variavel)<\/code> para ver se o valor est\u00e1 correto.<\/li>\n <li><strong>Capriche no CSS:<\/strong> mesmo em projetos pequenos, uma interface bonita aumenta sua motiva\u00e7\u00e3o.<\/li>\n <li><strong>Aprenda Git e GitHub desde agora:<\/strong> controle de vers\u00e3o \u00e9 obrigat\u00f3rio para qualquer profissional.<\/li>\n <\/ul>\n <p>\ud83d\udccc <strong>Pr\u00f3ximos passos sugeridos:<\/strong><\/p>\n <ul>\n <li>La\u00e7os de repeti\u00e7\u00e3o (<code>for<\/code>, <code>while<\/code>, <code>do...while<\/code>)<\/li>\n <li>Vetores (arrays) e manipula\u00e7\u00e3o de listas<\/li>\n <li>Fun\u00e7\u00f5es ass\u00edncronas (<code>async\/await<\/code>)<\/li>\n <li>Banco de dados MySQL<\/li>\n <\/ul>\n\n <h2>9. Conclus\u00e3o<\/h2>\n <p>A l\u00f3gica de programa\u00e7\u00e3o \u00e9 a base que sustentar\u00e1 toda a sua carreira. N\u00e3o pule etapas. Se voc\u00ea entendeu os conceitos de algoritmo, entradas, sa\u00eddas, condicionais e praticou com os exemplos, j\u00e1 est\u00e1 \u00e0 frente de muita gente.<\/p>\n <p>E lembre-se: <strong>programar \u00e9 resolver problemas<\/strong>. Quanto mais voc\u00ea praticar com mini projetos, mais natural fica o processo.<\/p>\n\n <hr>\n\n \n <div class=\"artigo-final-cta\">\n \ud83c\udfac <strong>Assista \u00e0 live completa sobre este conte\u00fado no YouTube!<\/strong><br>\n <span style=\"font-size:1.2rem;\"><\/span><br>\n <small>N\u00e3o se esque\u00e7a de se inscrever no canal para mais conte\u00fados gratuitos.<\/small>\n <\/div>\n\n \n <\/div>\n<\/div>\n<\/body>\n<\/html>\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=\"#01 L\u00f3gica de Programa\u00e7\u00e3o com JavaScript do Zero \u2013 Parte 1 (Algoritmos, Condicionais e Mini Projeto)\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/uGUvMdrA3ro?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>L\u00f3gica de Programa\u00e7\u00e3o com JavaScript: Guia Completo para Iniciantes (Do Zero ao Primeiro Projeto) | Desvendando o C\u00f3digo \ud83d\udcd8 L\u00f3gica de Programa\u00e7\u00e3o com JavaScript: Guia Completo para Iniciantes (Do Zero ao Primeiro Projeto) Do zero ao primeiro projeto \u2022 Algoritmos, condicionais, switch case e muito mais \ud83c\udfaf Neste artigo voc\u00ea vai aprender: o que \u00e9 algoritmo, como construir um sistema, usar condicionais (if\/else e switch case), criar uma calculadora com menu e dar os primeiros passos na programa\u00e7\u00e3o com JavaScript. 1. Introdu\u00e7\u00e3o: Por que a l\u00f3gica de programa\u00e7\u00e3o \u00e9 o seu primeiro passo? Voc\u00ea quer aprender a programar, j\u00e1 assistiu a v\u00e1rios v\u00eddeos, mas ainda sente que \u201ctrava\u201d na hora de criar seus pr\u00f3prios c\u00f3digos? O problema quase sempre \u00e9 o mesmo: falta de base em l\u00f3gica de programa\u00e7\u00e3o. Neste artigo, vamos construir juntos os fundamentos que usei ao vivo com meus alunos da ETEC e nos meus projetos. Todo o conte\u00fado foi extra\u00eddo de uma live especial onde unimos duas aulas de l\u00f3gica com JavaScript. Voc\u00ea vai entender o que \u00e9 um algoritmo, como transformar uma descri\u00e7\u00e3o narrativa em c\u00f3digo, e ainda vai p\u00f4r a m\u00e3o na massa com exemplos pr\u00e1ticos. \ud83d\udca1 Quer ver a explica\u00e7\u00e3o completa em v\u00eddeo? No final deste artigo voc\u00ea encontra o link para a live completa (mais de 2h de conte\u00fado aprofundado). Continue estudando por aqui e depois assista \u00e0 aula pr\u00e1tica! 2. O que \u00e9 um Sistema? A analogia que muda tudo Antes de falar de c\u00f3digo, precisamos entender o que estamos construindo. Um sistema \u00e9 um conjunto de elementos interdependentes que formam um todo organizado. Pense no sistema solar: cada planeta tem sua fun\u00e7\u00e3o, mas todos trabalham em conjunto. No mundo do desenvolvimento, qualquer sistema \u2013 um site, um aplicativo, uma calculadora \u2013 precisa de tr\u00eas partes: Entrada (input): dados que o usu\u00e1rio fornece (ex: peso e altura). Processamento: regras, c\u00e1lculos e decis\u00f5es (ex: f\u00f3rmula do IMC). Sa\u00edda (output): resultado exibido para o usu\u00e1rio (ex: \u201cAbaixo do peso\u201d). Quando voc\u00ea estuda condicionais, la\u00e7os de repeti\u00e7\u00e3o e vari\u00e1veis, est\u00e1 aprendendo as pe\u00e7as que v\u00e3o formar o seu sistema. 3. Algoritmo: a sequ\u00eancia que resolve problemas Algoritmo \u00e9 uma sequ\u00eancia finita de passos para resolver um problema. N\u00e3o existe um \u00fanico jeito certo \u2013 dois programadores podem criar algoritmos diferentes que chegam ao mesmo resultado. \ud83d\udccc Exemplo do dia a dia: o caminho que voc\u00ea faz de casa at\u00e9 o trabalho (levantar, tomar caf\u00e9, pegar o \u00f4nibus, andar at\u00e9 a empresa) \u00e9 um algoritmo. Na programa\u00e7\u00e3o, um algoritmo pode ser representado de v\u00e1rias formas: Descri\u00e7\u00e3o narrativa: texto em linguagem natural (o cliente descreve o que quer). Fluxograma: diagrama com formas geom\u00e9tricas (in\u00edcio, processo, decis\u00e3o, fim). Pseudoc\u00f3digo (Portugol): quase c\u00f3digo, mas em portugu\u00eas estruturado. C\u00f3digo fonte: JavaScript, Python, Java etc. Neste artigo, vamos focar em descri\u00e7\u00e3o narrativa \u2192 c\u00f3digo JavaScript, que \u00e9 o que voc\u00ea realmente vai usar no dia a dia. 4. Da descri\u00e7\u00e3o narrativa ao c\u00f3digo: Estudo de caso \u2013 C\u00e1lculo de IMC Um cliente envia a seguinte mensagem: \u201cPreciso de um sistema para calcular o IMC de uma pessoa. Depois de calcular, o sistema deve mostrar na tela: abaixo do peso, peso normal, sobrepeso ou obesidade. As informa\u00e7\u00f5es (peso, altura, IMC e classifica\u00e7\u00e3o) devem ser salvas em um documento (opcional).\u201d Agora vamos interpretar e transformar isso em requisitos: Dois campos de entrada: peso (kg) e altura (m). Bot\u00e3o \u201cCalcular IMC\u201d \u2013 faz o c\u00e1lculo e exibe a classifica\u00e7\u00e3o. Bot\u00e3o \u201cSalvar\u201d (opcional) \u2013 guarda os dados em JSON. F\u00f3rmula: IMC = peso \/ (altura * altura). Classifica\u00e7\u00e3o (exemplo fict\u00edcio): Menor que 18,5 \u2192 \u201cAbaixo do peso\u201d 18,5 a 24,9 \u2192 \u201cPeso normal\u201d 25 a 29,9 \u2192 \u201cSobrepeso\u201d 30 ou mais \u2192 \u201cObesidade\u201d Esse \u00e9 o poder da l\u00f3gica: voc\u00ea pega uma conversa \u201csolta\u201d e organiza em etapas que a m\u00e1quina entende. No c\u00f3digo, isso vira vari\u00e1veis, condicionais e fun\u00e7\u00f5es. 5. Primeiros passos no JavaScript: input, output e vari\u00e1veis Para interagir com o usu\u00e1rio em ambiente de estudo, usamos: prompt(“mensagem”) \u2192 entrada de dados (sempre retorna uma string). alert(“mensagem”) \u2192 janela de alerta. console.log(“mensagem”) \u2192 exibe no console do navegador (F12). \u26a0\ufe0f Aten\u00e7\u00e3o: o valor vindo do prompt \u00e9 texto. Para fazer contas, converta para n\u00famero usando Number() ou parseFloat(). Exemplo: somando dois n\u00fameros let n1 = Number(prompt(“Digite o primeiro valor:”)); let n2 = Number(prompt(“Digite o segundo valor:”)); let soma = n1 + n2; alert(“A soma \u00e9: ” + soma); Se voc\u00ea esquecer a convers\u00e3o, o sinal de + vai concatenar os textos (ex: 5 + 5 vira \u201c55\u201d em vez de 10). Outras formas de sa\u00edda: document.write(“texto”) \u2192 escreve diretamente no HTML. console.log(“A soma \u00e9:”, soma) \u2192 \u00fatil para depura\u00e7\u00e3o. 6. Condicionais: o que o algoritmo deve fazer quando\u2026 As condicionais permitem que o programa siga caminhos diferentes conforme os dados recebidos. 6.1 Estrutura if \/ else \u2013 exemplo do bom dia, boa tarde, boa noite let hora = 18; if (hora < 12) { console.log(\"Bom dia!\"); } else if (hora >= 12 && hora < 18) { console.log(\"Boa tarde!\"); } else { console.log(\"Boa noite!\"); } Explica\u00e7\u00e3o: o programa testa a primeira condi\u00e7\u00e3o (hora < 12). Se for false, vai para o else if. Se tamb\u00e9m for false, cai no else. S\u00f3 um bloco \u00e9 executado. 6.2 Estrutura switch case \u2013 quando h\u00e1 muitas op\u00e7\u00f5es fixas O switch \u00e9 ideal para menus ou situa\u00e7\u00f5es onde uma vari\u00e1vel pode assumir valores espec\u00edficos (1, 2, 3, \u201c+\u201d, \u201c-\u201c, etc.). let operador = \"+\"; let a = 10, b = 5; switch (operador) { case \"+\": console.log(a + b); break; case \"-\": console.log(a - b); break; default: console.log(\"Operador inv\u00e1lido\"); } \u26a1 Importante: o break interrompe a execu\u00e7\u00e3o e sai do switch. Sem ele, o c\u00f3digo \u201ccai\u201d no pr\u00f3ximo case. 7. Projeto pr\u00e1tico: Calculadora com Menu (usando switch case + tratamento de erros) Vamos construir uma calculadora completa que roda no terminal (Node.js). Usaremos o pacote prompt-sync para capturar dados do usu\u00e1rio. Passo 1: Instalar o pacote npm install prompt-sync Passo 2: C\u00f3digo completo (exemplo da live) const prompt = require('prompt-sync')(); function realizarOperacao(opcao, num1, num2) { switch (opcao) { case 1: return num1 + num2; case 2: return num1 - num2; case 3: return num1 * num2; case 4: if (num2 === 0) { return \"Erro: n\u00e3o \u00e9 poss\u00edvel dividir por zero!\"; } return num1 \/ num2; default: return \"Op\u00e7\u00e3o inv\u00e1lida!\"; } } console.log(\"--- CALCULADORA ---\"); console.log(\"1 - Soma\\n2 - Subtra\u00e7\u00e3o\\n3 - Multiplica\u00e7\u00e3o\\n4 - Divis\u00e3o\"); let opcao = parseInt(prompt(\"Escolha uma op\u00e7\u00e3o: \")); let num1 = parseFloat(prompt(\"Digite o primeiro n\u00famero: \")); let num2 = parseFloat(prompt(\"Digite o segundo n\u00famero: \")); let resultado = realizarOperacao(opcao, num1, num2); console.log(`Resultado: ${resultado}`); O que aprendemos aqui? Uso de switch com return (dispensa o break). Tratamento de divis\u00e3o por zero com if. Convers\u00e3o expl\u00edcita com parseInt e parseFloat. Template literal (`` `Resultado: ${resultado}` ``) para strings din\u00e2micas. 8. Dicas para voc\u00ea evoluir (e n\u00e3o travar) N\u00e3o copie e cole: digite cada linha. O aprendizado est\u00e1 no processo, n\u00e3o no Ctrl+C \/ Ctrl+V. Use o console (F12) para depurar: insira console.log(variavel) para ver se o valor est\u00e1 correto. Capriche no CSS: mesmo em projetos pequenos, uma interface bonita aumenta sua motiva\u00e7\u00e3o. Aprenda Git e GitHub desde agora: controle de vers\u00e3o \u00e9 obrigat\u00f3rio para qualquer profissional. \ud83d\udccc Pr\u00f3ximos passos sugeridos: La\u00e7os de repeti\u00e7\u00e3o (for, while, do...while) Vetores (arrays) e manipula\u00e7\u00e3o de listas Fun\u00e7\u00f5es ass\u00edncronas (async\/await) Banco de dados MySQL 9. Conclus\u00e3o A l\u00f3gica de programa\u00e7\u00e3o \u00e9 a base que sustentar\u00e1 toda a sua carreira. N\u00e3o pule etapas. Se voc\u00ea entendeu os conceitos de algoritmo, entradas, sa\u00eddas, condicionais e praticou com os exemplos, j\u00e1 est\u00e1 \u00e0 frente de muita gente. E lembre-se: programar \u00e9 resolver problemas. Quanto mais voc\u00ea praticar com mini projetos, mais natural fica o processo. \ud83c\udfac Assista \u00e0 live completa sobre este conte\u00fado no YouTube! N\u00e3o se esque\u00e7a de se inscrever no canal para mais conte\u00fados gratuitos.\n<\/p>\n","protected":false},"author":1,"featured_media":2009,"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":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2006"}],"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=2006"}],"version-history":[{"count":9,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2006\/revisions"}],"predecessor-version":[{"id":2017,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2006\/revisions\/2017"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/2009"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2006"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2006"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}