{"id":2585,"date":"2026-09-28T14:36:09","date_gmt":"2026-09-28T17:36:09","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?page_id=2585"},"modified":"2026-09-28T14:39:11","modified_gmt":"2026-09-28T17:39:11","slug":"javascript-na-pratica-listas-json-e-localstorage","status":"publish","type":"page","link":"https:\/\/desvendandoocodigo.com.br\/?page_id=2585","title":{"rendered":"JavaScript na Pr\u00e1tica: Listas, JSON e LocalStorage"},"content":{"rendered":"\n<!--\nP\u00c1GINA DO CURSO JAVASCRIPT NA PR\u00c1TICA\nCole este conte\u00fado em UM bloco HTML personalizado de uma nova p\u00e1gina WordPress.\nAntes de publicar, substitua TODAS as ocorr\u00eancias de https:\/\/pay.hotmart.com\/R107801961E pelo link oficial deste curso.\nO banner geral j\u00e1 \u00e9 exibido pelo tema Ashe; n\u00e3o o insira neste bloco.\n-->\n<style>\n.dcp{--navy:#0c1225;--ink:#161c2c;--gold:#ffcc16;--blue:#5964ee;--paper:#f5f4f0;color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.55;max-width:1120px;margin:auto}\n.dcp *{box-sizing:border-box}.dcp h1,.dcp h2,.dcp h3,.dcp p{margin:0}.dcp h1,.dcp h2,.dcp h3{font-family:Arial,Helvetica,sans-serif;font-weight:800;line-height:1.13;letter-spacing:-.035em}.dcp h1{font-size:clamp(2.45rem,5vw,4.4rem)}.dcp h2{font-size:clamp(1.8rem,3vw,2.65rem)}.dcp h3{font-size:1.33rem}.dcp p{margin-top:14px}.dcp img{display:block;max-width:100%;height:auto}.dcp a{text-decoration:none}.dcp .section{padding:clamp(42px,6vw,75px) clamp(22px,5vw,65px)}.dcp .eyebrow{display:block;margin-bottom:13px;color:#a27600;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em}.dcp .button{display:inline-flex;justify-content:center;align-items:center;background:var(--gold)!important;color:#17130a!important;border-radius:10px;padding:15px 22px;margin-top:24px;font-weight:800;box-shadow:0 9px 22px #0002}.dcp .button:hover{filter:brightness(1.06);transform:translateY(-1px)}.dcp .button:focus-visible,.dcp a:focus-visible,.dcp summary:focus-visible{outline:3px solid #4f75fd;outline-offset:3px}\n.dcp .hero{display:grid;grid-template-columns:minmax(0,1.07fr) minmax(0,.93fr);gap:35px;align-items:center;background:radial-gradient(circle at 85% 18%,#253257,transparent 37%),linear-gradient(130deg,#090d18,#142039);border-radius:20px 20px 0 0;color:#fff}.dcp .hero h1 span{color:var(--gold)}.dcp .hero .eyebrow,.dcp .dark .eyebrow,.dcp .final .eyebrow{color:var(--gold)}.dcp .lead{font-size:clamp(1.05rem,1.6vw,1.24rem);color:#e8ecf4}.dcp .badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}.dcp .badges span{border:1px solid #62708a;border-radius:999px;padding:7px 12px;font-size:.82rem;font-weight:700;color:#fff}.dcp .hero-visual{padding:12px;background:#0b1022;border:1px solid #465575;border-radius:16px;box-shadow:0 25px 60px #0008}.dcp .hero-visual img{width:100%;border-radius:9px}.dcp .caption{margin-top:8px!important;text-align:center;font-size:.8rem;color:#c8d0e1!important}\n.dcp .intro,.dcp .path,.dcp .faq{background:#fff!important;color:var(--ink)!important}.dcp .intro{text-align:center}.dcp .intro>p{max-width:760px;margin:15px auto 0}.dcp .benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;text-align:left;margin-top:30px}.dcp .benefits div{background:#fffaf0;border:1px solid #e8dfc9;border-radius:13px;padding:22px}.dcp .benefits b{color:#171b25}.dcp .benefits p{font-size:.92rem;color:#5c6270}\n.dcp .projects{background:#f4f2ec!important;color:var(--ink)!important}.dcp .projects .heading{max-width:760px;margin-bottom:30px}.dcp .projects .heading p{color:#545d6a}.dcp .project{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid #e3e2df;border-radius:17px;overflow:hidden;box-shadow:0 12px 35px #101c3212;margin-top:23px;align-items:center}.dcp .project.reverse .visual{order:2}.dcp .project .visual{background:#11172c;padding:20px;min-height:315px;display:flex;align-items:center;justify-content:center}.dcp .project .visual img{width:100%;max-height:470px;object-fit:contain;border-radius:8px}.dcp .project .copy{padding:clamp(24px,4vw,44px)}.dcp .chip{display:inline-block;background:#ffe580!important;color:#201800!important;border-radius:5px;padding:6px 9px;margin-bottom:14px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.dcp .project .copy p{color:#565d68}.dcp .scope{padding:16px 20px;margin-top:23px!important;border-left:4px solid #daa800;border-radius:7px;background:#fff!important;color:#39404a!important}\n.dcp .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:29px}.dcp .step{border-top:2px solid #d9dde6;padding-top:17px}.dcp .step b{display:grid;place-items:center;width:35px;height:35px;margin-top:-36px;margin-bottom:19px;background:var(--gold);color:#17130a;border-radius:50%}.dcp .step h3{font-size:1.05rem}.dcp .step p{font-size:.87rem;color:#606878;margin-top:8px}\n.dcp .dark{background:#101724!important;color:#fff!important;display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center}.dcp .dark p{color:#d9e0eb!important}.dcp .checklist{padding:0;margin:0;list-style:none;display:grid;gap:11px}.dcp .checklist li{padding:12px 15px;border:1px solid #465265;background:#ffffff08;border-radius:9px;color:#fff}.dcp .checklist li:before{content:'\u2713';color:var(--gold);font-weight:900;margin-right:10px}\n.dcp details{border:1px solid #e0e3e9;background:#fff!important;border-radius:10px;margin-top:10px}.dcp summary{padding:15px 18px;cursor:pointer;font-weight:750;color:#171b25!important}.dcp details p{padding:0 18px 17px;margin:0;color:#535c69!important}.dcp .final{background:linear-gradient(130deg,#080d17,#1a2844)!important;color:#fff!important;text-align:center;border-radius:0 0 20px 20px}.dcp .final p{max-width:650px;margin:14px auto 0;color:#e3e9f4!important}.dcp .price{display:block;margin-top:19px;color:var(--gold)!important;font-size:2.45rem;line-height:1.1}.dcp .fine{font-size:.83rem!important}\n\/* Cores locais leg\u00edveis com o modo escuro do tema. *\/\n.dcp .intro h2,.dcp .path h2,.dcp .path h3,.dcp .faq h2,.dcp .projects h2,.dcp .project h3{color:#171b25!important}.dcp .intro p,.dcp .path p,.dcp .faq p,.dcp .projects p,.dcp .project p{color:#535c69!important}.dcp .hero h1,.dcp .dark h2,.dcp .final h2{color:#fff!important}.dcp .hero h1 span{color:#ffcc16!important}.dcp .hero p{color:#e8ecf4!important}.dcp .hero .eyebrow,.dcp .dark .eyebrow,.dcp .final .eyebrow{color:#ffcc16!important}\n@media(max-width:900px){.dcp .hero,.dcp .dark{grid-template-columns:1fr}.dcp .steps{grid-template-columns:repeat(2,1fr);row-gap:34px}}\n@media(max-width:650px){.dcp .section{padding:38px 19px}.dcp .benefits,.dcp .project{grid-template-columns:1fr}.dcp .project.reverse .visual{order:0}.dcp .project .visual{min-height:0;padding:12px}.dcp .button{width:100%}.dcp .step h3{font-size:1rem}}\n<\/style>\n\n<div class=\"dcp\">\n  <section class=\"section hero\" aria-labelledby=\"dcp-title\">\n    <div>\n      <span class=\"eyebrow\">Curso pr\u00e1tico de JavaScript<\/span>\n      <h1 id=\"dcp-title\"><span>JavaScript<\/span> na Pr\u00e1tica<\/h1>\n      <p class=\"lead\">Saia dos exemplos isolados: transforme dados em uma lista de produtos e construa um gerenciador de tarefas que salva informa\u00e7\u00f5es no navegador.<\/p>\n      <div class=\"badges\" aria-label=\"Resumo do curso\"><span>4 m\u00f3dulos<\/span><span>17 v\u00eddeos<\/span><span>2 projetos<\/span><span>Acesso imediato<\/span><\/div>\n      <a class=\"button\" href=\"#dcp-projetos\">Conhe\u00e7a os projetos \u2193<\/a>\n    <\/div>\n    <div class=\"hero-visual\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2026\/09\/CRUD-DE-TAREFAS.png\" alt=\"Tela real do CRUD de tarefas com campos para salvar, editar e excluir itens\" width=\"1065\" height=\"874\"><p class=\"caption\">Projeto desenvolvido nas aulas: CRUD de tarefas<\/p><\/div>\n  <\/section>\n\n  <section class=\"section intro\" aria-labelledby=\"dcp-intro\">\n    <span class=\"eyebrow\">Aprenda construindo<\/span><h2 id=\"dcp-intro\">Entenda os dados. Veja o resultado na tela.<\/h2>\n    <p>Este curso foi feito para quem j\u00e1 conhece o b\u00e1sico de HTML, CSS e JavaScript e quer ganhar confian\u00e7a criando projetos. Voc\u00ea come\u00e7a transformando listas e termina controlando tarefas com persist\u00eancia no navegador.<\/p>\n    <div class=\"benefits\"><div><b>01 \u2022 Transforme<\/b><p>Use <code>map()<\/code> com n\u00fameros, textos e objetos para gerar novos resultados.<\/p><\/div><div><b>02 \u2022 Exiba<\/b><p>Leia um arquivo JSON e apresente os dados dinamicamente no HTML.<\/p><\/div><div><b>03 \u2022 Persista<\/b><p>Cadastre, edite e exclua tarefas, mantendo os dados no <code>localStorage<\/code>.<\/p><\/div><\/div>\n  <\/section>\n\n  <section class=\"section projects\" id=\"dcp-projetos\" aria-labelledby=\"dcp-projects\">\n    <div class=\"heading\"><span class=\"eyebrow\">Veja o que voc\u00ea vai fazer<\/span><h2 id=\"dcp-projects\">Dois resultados vis\u00edveis, passo a passo<\/h2><p>As telas abaixo s\u00e3o dos projetos mostrados nas aulas.<\/p><\/div>\n    <article class=\"project reverse\"><div class=\"visual\"><img decoding=\"async\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2026\/09\/LISTA-DE-PRODUTOS.png\" alt=\"Lista de produtos exibida dinamicamente a partir de dados JSON\" width=\"830\" height=\"660\" loading=\"lazy\"><\/div><div class=\"copy\"><span class=\"chip\">Projeto 1 \u00b7 Dados em tela<\/span><h3>Lista de Produtos<\/h3><p>Trabalhe com <code>map()<\/code>, objetos e JSON para criar uma lista que acompanha os dados dispon\u00edveis, sem escrever cada item manualmente no HTML.<\/p><\/div><\/article>\n    <article class=\"project\"><div class=\"visual\"><img decoding=\"async\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2026\/09\/CRUD-DE-TAREFAS.png\" alt=\"Projeto de tarefas com formul\u00e1rio e bot\u00f5es Editar e Excluir\" width=\"1065\" height=\"874\" loading=\"lazy\"><\/div><div class=\"copy\"><span class=\"chip\">Projeto 2 \u00b7 Persist\u00eancia<\/span><h3>CRUD de Tarefas<\/h3><p>Crie tarefas pelo formul\u00e1rio, altere ou remova itens e use <code>localStorage<\/code> para manter a lista ao atualizar a p\u00e1gina.<\/p><\/div><\/article>\n    <p class=\"scope\"><strong>Para quem \u00e9:<\/strong> quem j\u00e1 teve contato com JavaScript b\u00e1sico e quer aplicar arrays, objetos, DOM e eventos em projetos pr\u00e1ticos. O armazenamento acontece no navegador, sem banco de dados ou login.<\/p>\n  <\/section>\n\n  <section class=\"section path\" aria-labelledby=\"dcp-path\"><span class=\"eyebrow\">Sequ\u00eancia do curso<\/span><h2 id=\"dcp-path\">Quatro m\u00f3dulos. Um objetivo claro.<\/h2><p>17 v\u00eddeos curtos organizados para voc\u00ea avan\u00e7ar dos dados ao projeto funcionando.<\/p><div class=\"steps\"><div class=\"step\"><b>1<\/b><h3>Transformando listas com JavaScript<\/h3><p>Exemplos progressivos com <code>map()<\/code> e arrays de objetos.<\/p><\/div><div class=\"step\"><b>2<\/b><h3>Do JSON \u00e0 p\u00e1gina din\u00e2mica<\/h3><p>Leitura dos dados e exibi\u00e7\u00e3o dos produtos no HTML.<\/p><\/div><div class=\"step\"><b>3<\/b><h3>Construindo uma lista de tarefas<\/h3><p>Formul\u00e1rio, cart\u00f5es din\u00e2micos e renderiza\u00e7\u00e3o dos itens.<\/p><\/div><div class=\"step\"><b>4<\/b><h3>Salvando e gerenciando tarefas<\/h3><p>Valida\u00e7\u00e3o, edi\u00e7\u00e3o, exclus\u00e3o e persist\u00eancia no navegador.<\/p><\/div><\/div><\/section>\n\n  <section class=\"section dark\" aria-labelledby=\"dcp-included\"><div><span class=\"eyebrow\">Pr\u00e1tica do come\u00e7o ao fim<\/span><h2 id=\"dcp-included\">Aprenda o conceito e use no projeto.<\/h2><p>Voc\u00ea acompanha os exemplos no c\u00f3digo e v\u00ea cada decis\u00e3o produzir um resultado real na tela. Todas as aulas s\u00e3o liberadas ao entrar no curso.<\/p><a class=\"button\" href=\"https:\/\/pay.hotmart.com\/R107801961E\" target=\"_blank\" rel=\"noopener noreferrer\">Quero aprender na pr\u00e1tica \u2192<\/a><\/div><ul class=\"checklist\"><li>4 m\u00f3dulos e 17 v\u00eddeos<\/li><li>Exemplos de <code>map()<\/code> com diferentes tipos de dados<\/li><li>Projeto Lista de Produtos com JSON<\/li><li>Projeto CRUD de Tarefas com <code>localStorage<\/code><\/li><li>Conte\u00fado dispon\u00edvel imediatamente<\/li><\/ul><\/section>\n\n  <section class=\"section faq\" aria-labelledby=\"dcp-faq\"><span class=\"eyebrow\">D\u00favidas frequentes<\/span><h2 id=\"dcp-faq\">Antes de come\u00e7ar<\/h2><details><summary>Preciso come\u00e7ar do zero?<\/summary><p>Este curso \u00e9 indicado para quem j\u00e1 conhece os primeiros conceitos de HTML, CSS e JavaScript. Se voc\u00ea ainda est\u00e1 come\u00e7ando, veja antes o curso JavaScript do Zero.<\/p><\/details><details><summary>Os projetos usam banco de dados?<\/summary><p>N\u00e3o. A Lista de Produtos l\u00ea dados de um arquivo JSON; o CRUD de Tarefas salva os dados no <code>localStorage<\/code> do navegador.<\/p><\/details><details><summary>Quando as aulas s\u00e3o liberadas?<\/summary><p>Os quatro m\u00f3dulos ficam dispon\u00edveis assim que voc\u00ea entra no curso.<\/p><\/details><details><summary>H\u00e1 React neste curso?<\/summary><p>N\u00e3o. O foco \u00e9 usar JavaScript no navegador para transformar, exibir e armazenar dados em projetos pr\u00e1ticos.<\/p><\/details><\/section>\n\n  <section class=\"section final\" aria-labelledby=\"dcp-final\"><span class=\"eyebrow\">Seu pr\u00f3ximo projeto come\u00e7a aqui<\/span><h2 id=\"dcp-final\">Da lista de dados ao CRUD de tarefas.<\/h2><p>Coloque o JavaScript em pr\u00e1tica com dois projetos e uma sequ\u00eancia direta para estudar no seu ritmo.<\/p><strong class=\"price\">R$ 87<\/strong><p class=\"fine\">Valor apresentado para pagamento \u00e0 vista. Confira o pre\u00e7o e as formas de pagamento na Hotmart.<\/p><a class=\"button\" href=\"https:\/\/pay.hotmart.com\/R107801961E\" target=\"_blank\" rel=\"noopener noreferrer\">Inscrever-se no curso \u2192<\/a><\/section>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Curso pr\u00e1tico de JavaScript JavaScript na Pr\u00e1tica Saia dos exemplos isolados: transforme dados em uma lista de produtos e construa um gerenciador de tarefas que salva informa\u00e7\u00f5es no navegador. 4 m\u00f3dulos17 v\u00eddeos2 projetosAcesso imediato Conhe\u00e7a os projetos \u2193 Projeto desenvolvido nas aulas: CRUD de tarefas Aprenda construindo Entenda os dados. Veja o resultado na tela. Este curso foi feito para quem j\u00e1 conhece o b\u00e1sico de HTML, CSS e JavaScript e quer ganhar confian\u00e7a criando projetos. Voc\u00ea come\u00e7a transformando listas e termina controlando tarefas com persist\u00eancia no navegador. 01 \u2022 Transforme Use map() com n\u00fameros, textos e objetos para gerar novos resultados. 02 \u2022 Exiba Leia um arquivo JSON e apresente os dados dinamicamente no HTML. 03 \u2022 Persista Cadastre, edite e exclua tarefas, mantendo os dados no localStorage. Veja o que voc\u00ea vai fazer Dois resultados vis\u00edveis, passo a passo As telas abaixo s\u00e3o dos projetos mostrados nas aulas. Projeto 1 \u00b7 Dados em tela Lista de Produtos Trabalhe com map(), objetos e JSON para criar uma lista que acompanha os dados dispon\u00edveis, sem escrever cada item manualmente no HTML. Projeto 2 \u00b7 Persist\u00eancia CRUD de Tarefas Crie tarefas pelo formul\u00e1rio, altere ou remova itens e use localStorage para manter a lista ao atualizar a p\u00e1gina. Para quem \u00e9: quem j\u00e1 teve contato com JavaScript b\u00e1sico e quer aplicar arrays, objetos, DOM e eventos em projetos pr\u00e1ticos. O armazenamento acontece no navegador, sem banco de dados ou login. Sequ\u00eancia do curso Quatro m\u00f3dulos. Um objetivo claro. 17 v\u00eddeos curtos organizados para voc\u00ea avan\u00e7ar dos dados ao projeto funcionando. 1 Transformando listas com JavaScript Exemplos progressivos com map() e arrays de objetos. 2 Do JSON \u00e0 p\u00e1gina din\u00e2mica Leitura dos dados e exibi\u00e7\u00e3o dos produtos no HTML. 3 Construindo uma lista de tarefas Formul\u00e1rio, cart\u00f5es din\u00e2micos e renderiza\u00e7\u00e3o dos itens. 4 Salvando e gerenciando tarefas Valida\u00e7\u00e3o, edi\u00e7\u00e3o, exclus\u00e3o e persist\u00eancia no navegador. Pr\u00e1tica do come\u00e7o ao fim Aprenda o conceito e use no projeto. Voc\u00ea acompanha os exemplos no c\u00f3digo e v\u00ea cada decis\u00e3o produzir um resultado real na tela. Todas as aulas s\u00e3o liberadas ao entrar no curso. Quero aprender na pr\u00e1tica \u2192 4 m\u00f3dulos e 17 v\u00eddeos Exemplos de map() com diferentes tipos de dados Projeto Lista de Produtos com JSON Projeto CRUD de Tarefas com localStorage Conte\u00fado dispon\u00edvel imediatamente D\u00favidas frequentes Antes de come\u00e7ar Preciso come\u00e7ar do zero? Este curso \u00e9 indicado para quem j\u00e1 conhece os primeiros conceitos de HTML, CSS e JavaScript. Se voc\u00ea ainda est\u00e1 come\u00e7ando, veja antes o curso JavaScript do Zero. Os projetos usam banco de dados? N\u00e3o. A Lista de Produtos l\u00ea dados de um arquivo JSON; o CRUD de Tarefas salva os dados no localStorage do navegador. Quando as aulas s\u00e3o liberadas? Os quatro m\u00f3dulos ficam dispon\u00edveis assim que voc\u00ea entra no curso. H\u00e1 React neste curso? N\u00e3o. O foco \u00e9 usar JavaScript no navegador para transformar, exibir e armazenar dados em projetos pr\u00e1ticos. Seu pr\u00f3ximo projeto come\u00e7a aqui Da lista de dados ao CRUD de tarefas. Coloque o JavaScript em pr\u00e1tica com dois projetos e uma sequ\u00eancia direta para estudar no seu ritmo. R$ 87 Valor apresentado para pagamento \u00e0 vista. Confira o pre\u00e7o e as formas de pagamento na Hotmart. Inscrever-se no curso \u2192<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-2585","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/pages\/2585","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/types\/page"}],"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=2585"}],"version-history":[{"count":2,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/pages\/2585\/revisions"}],"predecessor-version":[{"id":2587,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/pages\/2585\/revisions\/2587"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}