{"id":2347,"date":"2026-08-21T13:08:58","date_gmt":"2026-08-21T16:08:58","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=2347"},"modified":"2026-08-21T13:10:28","modified_gmt":"2026-08-21T16:10:28","slug":"json-na-pratica-com-javascript-cadastro-de-alunos-com-html-css-e-localstorage","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=2347","title":{"rendered":"JSON na Pr\u00e1tica com JavaScript: Cadastro de Alunos com HTML, CSS e localStorage"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Se voc\u00ea est\u00e1 come\u00e7ando a estudar <strong>JavaScript<\/strong> e j\u00e1 encontrou termos como <strong>JSON, JSON.stringify(), JSON.parse() e localStorage<\/strong>, talvez tenha surgido uma d\u00favida:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Para que tudo isso serve na pr\u00e1tica?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Uma das melhores maneiras de entender JSON \u00e9 acompanhar o caminho percorrido pelos dados dentro de uma aplica\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Neste projeto, vamos construir um <strong>Cadastro de Alunos utilizando HTML, CSS e JavaScript<\/strong>. Os dados preenchidos no formul\u00e1rio ser\u00e3o transformados em um objeto JavaScript, convertidos para JSON e armazenados no navegador utilizando o <strong>localStorage<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Depois, vamos fazer o caminho contr\u00e1rio: recuperar os dados armazenados, converter o JSON novamente para um objeto JavaScript e apresentar as informa\u00e7\u00f5es na interface.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O fluxo principal ser\u00e1:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Formul\u00e1rio \u2192 Objeto JavaScript \u2192 JSON \u2192 localStorage \u2192 JSON.parse() \u2192 Objeto \u2192 Interface<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 justamente acompanhando esse caminho que conceitos que parecem isolados come\u00e7am a fazer sentido.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83c\udfa5 Aula completa: JSON para Iniciantes na Pr\u00e1tica<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Este artigo acompanha a aula completa do canal <strong>Desvendando o C\u00f3digo<\/strong>, na qual desenvolvemos o projeto passo a passo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>JSON para Iniciantes na Pr\u00e1tica | Crie um Cadastro com HTML, CSS, JavaScript e localStorage<\/strong><\/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=\"JSON para Iniciantes na Pr\u00e1tica | Crie um Cadastro com HTML, CSS, JavaScript e localStorage\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/KmVlYr2b7CU?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\n\n\n<p class=\"wp-block-paragraph\">Durante a aula, voc\u00ea poder\u00e1 acompanhar a constru\u00e7\u00e3o do projeto e entender n\u00e3o apenas <strong>como escrever o c\u00f3digo<\/strong>, mas principalmente <strong>por que cada etapa \u00e9 necess\u00e1ria<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">O que voc\u00ea vai aprender<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Durante o desenvolvimento do projeto, trabalharemos conceitos importantes do JavaScript e do desenvolvimento Web:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>cria\u00e7\u00e3o de formul\u00e1rios com HTML;<\/li>\n\n\n\n<li>captura de elementos utilizando o DOM;<\/li>\n\n\n\n<li>eventos com <code>addEventListener()<\/code>;<\/li>\n\n\n\n<li>evento <code>submit<\/code>;<\/li>\n\n\n\n<li><code>preventDefault()<\/code>;<\/li>\n\n\n\n<li>captura e valida\u00e7\u00e3o dos dados;<\/li>\n\n\n\n<li>objetos JavaScript;<\/li>\n\n\n\n<li>propriedades de objetos;<\/li>\n\n\n\n<li>JSON;<\/li>\n\n\n\n<li><code>JSON.stringify()<\/code>;<\/li>\n\n\n\n<li><code>JSON.parse()<\/code>;<\/li>\n\n\n\n<li><code>localStorage<\/code>;<\/li>\n\n\n\n<li><code>setItem()<\/code>;<\/li>\n\n\n\n<li><code>getItem()<\/code>;<\/li>\n\n\n\n<li><code>removeItem()<\/code>;<\/li>\n\n\n\n<li>persist\u00eancia de dados no navegador;<\/li>\n\n\n\n<li>manipula\u00e7\u00e3o da interface com JavaScript;<\/li>\n\n\n\n<li>organiza\u00e7\u00e3o e testes durante o desenvolvimento.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">O objetivo n\u00e3o \u00e9 simplesmente fazer um cadastro funcionar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A ideia \u00e9 entender <strong>como os dados percorrem a aplica\u00e7\u00e3o<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">O que \u00e9 JSON?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">JSON significa:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>JavaScript Object Notation<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Apesar do nome possuir JavaScript, o JSON <strong>n\u00e3o \u00e9 exclusivo do JavaScript<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ele \u00e9 um formato textual utilizado para representar e transportar dados e aparece constantemente no desenvolvimento de aplica\u00e7\u00f5es Web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Um JSON pode ter uma estrutura semelhante a esta:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"nome\": \"Ana Souza\",\n  \"idade\": 15,\n  \"curso\": \"DS\",\n  \"email\": \"ana@email.com\"\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Observe que temos informa\u00e7\u00f5es organizadas utilizando pares de <strong>chave e valor<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Temos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>nome  \u2192 Ana Souza\nidade \u2192 15\ncurso \u2192 DS\nemail \u2192 ana@email.com\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Essa organiza\u00e7\u00e3o facilita o transporte e o armazenamento das informa\u00e7\u00f5es.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">JSON e objeto JavaScript s\u00e3o a mesma coisa?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Essa \u00e9 uma d\u00favida extremamente comum para quem est\u00e1 come\u00e7ando.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eles podem parecer muito semelhantes visualmente, mas precisamos entender a diferen\u00e7a.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Um objeto JavaScript poderia ser:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const aluno = {\n    nome: \"Ana Souza\",\n    idade: 15,\n    curso: \"DS\",\n    email: \"ana@email.com\"\n};\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Podemos acessar uma propriedade:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>console.log(aluno.nome);\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Resultado:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Ana Souza\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">J\u00e1 quando transformamos essas informa\u00e7\u00f5es em JSON, estamos trabalhando com uma representa\u00e7\u00e3o textual desses dados.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"nome\": \"Ana Souza\",\n  \"idade\": 15,\n  \"curso\": \"DS\",\n  \"email\": \"ana@email.com\"\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Essa diferen\u00e7a ser\u00e1 importante daqui a pouco.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Por que transformar um objeto em JSON?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine que nossa aplica\u00e7\u00e3o possui este objeto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const aluno = {\n    nome: \"Ana Souza\",\n    idade: 15,\n    curso: \"DS\",\n    email: \"ana@email.com\"\n};\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Enquanto estamos trabalhando dentro do JavaScript, conseguimos acessar tranquilamente:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>aluno.nome\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">ou:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>aluno.email\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Mas existem situa\u00e7\u00f5es em que precisamos <strong>transportar ou armazenar esses dados<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 a\u00ed que o JSON come\u00e7a a fazer sentido.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No projeto da aula, utilizaremos JSON para armazenar os dados no <strong>localStorage<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Em aplica\u00e7\u00f5es maiores, voc\u00ea encontrar\u00e1 JSON frequentemente na comunica\u00e7\u00e3o entre:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Front-end \u2192 API \u2192 Back-end<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">e:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Back-end \u2192 API \u2192 Front-end<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por isso entender JSON \u00e9 fundamental para quem pretende avan\u00e7ar posteriormente para <strong>APIs REST, Node.js, Express, React e desenvolvimento Full Stack<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Criando o formul\u00e1rio de cadastro<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Nosso projeto come\u00e7a com um formul\u00e1rio contendo informa\u00e7\u00f5es do aluno.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Teremos dados como:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>nome;<\/li>\n\n\n\n<li>idade;<\/li>\n\n\n\n<li>curso;<\/li>\n\n\n\n<li>e-mail.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">O usu\u00e1rio preenche essas informa\u00e7\u00f5es na interface.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nesse momento, os dados ainda est\u00e3o nos elementos HTML.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Precisamos fazer o JavaScript captur\u00e1-los.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Capturando elementos do HTML com JavaScript<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Uma das maneiras de acessar elementos da p\u00e1gina \u00e9 utilizando:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>document.querySelector()\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const formCadastro = document.querySelector(\"#formCadastro\");\nconst inputNome = document.querySelector(\"#nome\");\nconst inputIdade = document.querySelector(\"#idade\");\nconst inputCurso = document.querySelector(\"#curso\");\nconst inputEmail = document.querySelector(\"#email\");\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Agora o JavaScript possui refer\u00eancias para os elementos que existem no HTML.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Isso permitir\u00e1 ler os valores digitados pelo usu\u00e1rio e manipular posteriormente a interface.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Trabalhando com o evento submit<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Quando temos um formul\u00e1rio HTML, normalmente existe um bot\u00e3o respons\u00e1vel pelo envio das informa\u00e7\u00f5es.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Podemos monitorar esse evento:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>formCadastro.addEventListener(\"submit\", (event) =&gt; {\n\n});\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Quando o usu\u00e1rio enviar o formul\u00e1rio, a fun\u00e7\u00e3o ser\u00e1 executada.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por\u00e9m, existe um detalhe importante.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O comportamento padr\u00e3o do formul\u00e1rio pode provocar o recarregamento da p\u00e1gina.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Neste projeto n\u00e3o queremos isso.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Para que serve preventDefault()?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Utilizamos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>event.preventDefault();\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Assim:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>formCadastro.addEventListener(\"submit\", (event) =&gt; {\n\n    event.preventDefault();\n\n});\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O <code>preventDefault()<\/code> impede o comportamento padr\u00e3o daquele evento.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Agora conseguimos capturar e manipular os dados antes que o formul\u00e1rio tente realizar seu comportamento convencional.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Capturando os valores dos inputs<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Depois disso, podemos recuperar aquilo que foi digitado:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const nome = inputNome.value.trim();\nconst idade = Number(inputIdade.value);\nconst curso = inputCurso.value.trim();\nconst email = inputEmail.value.trim();\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Observe alguns detalhes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Utilizamos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.trim()\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">para remover espa\u00e7os desnecess\u00e1rios das extremidades.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para idade:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Number(inputIdade.value)\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">fazemos a convers\u00e3o para n\u00famero.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00e3o pequenos tratamentos, mas fazem parte da prepara\u00e7\u00e3o dos dados antes de continuarmos.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Valide os dados antes de continuar<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Antes de criar nosso objeto, precisamos verificar se as informa\u00e7\u00f5es necess\u00e1rias realmente existem.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Podemos fazer algo semelhante a:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if (!nome || !idade || !curso || !email) {\n    exibirMensagem(\"Preencha todos os campos corretamente.\", \"erro\");\n    return;\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O <code>return<\/code> \u00e9 muito importante.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se os dados forem inv\u00e1lidos, n\u00e3o queremos que o algoritmo continue executando as pr\u00f3ximas etapas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O fluxo deve parar naquele ponto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Isso evita que outras partes do c\u00f3digo tentem trabalhar com informa\u00e7\u00f5es incompletas.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Valida\u00e7\u00e3o tamb\u00e9m faz parte da seguran\u00e7a<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Existe uma li\u00e7\u00e3o importante aqui.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mesmo em um projeto simples, precisamos come\u00e7ar a pensar em <strong>valida\u00e7\u00e3o de dados e seguran\u00e7a da aplica\u00e7\u00e3o<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O HTML pode realizar algumas valida\u00e7\u00f5es.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O JavaScript pode realizar outras.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Em uma aplica\u00e7\u00e3o Full Stack, o Back-end tamb\u00e9m precisa validar aquilo que recebe.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e3o devemos construir uma aplica\u00e7\u00e3o pensando:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">\u201cO Front-end j\u00e1 validou, ent\u00e3o n\u00e3o preciso me preocupar.\u201d<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">Cada camada deve cuidar de sua responsabilidade.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Essa mentalidade come\u00e7a em projetos pequenos e acompanha o desenvolvedor quando ele passa a trabalhar com aplica\u00e7\u00f5es maiores.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Criando um objeto JavaScript<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Depois de capturar e validar os dados, podemos criar nosso objeto.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const alunoAtual = {\n    nome: nome,\n    idade: idade,\n    curso: curso,\n    email: email\n};\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ou utilizando a sintaxe reduzida:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const alunoAtual = {\n    nome,\n    idade,\n    curso,\n    email\n};\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Agora aqueles dados que anteriormente estavam separados nos campos do formul\u00e1rio est\u00e3o organizados dentro de uma \u00fanica estrutura.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Temos um <strong>objeto JavaScript<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Transformando objeto JavaScript em JSON<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Chegamos a uma das partes mais importantes da aula.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para converter nosso objeto para JSON, utilizamos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>JSON.stringify()\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const alunoEmJSON = JSON.stringify(alunoAtual);\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Podemos tamb\u00e9m formatar a apresenta\u00e7\u00e3o:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const alunoEmJSON = JSON.stringify(alunoAtual, null, 2);\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Agora temos uma representa\u00e7\u00e3o textual das informa\u00e7\u00f5es.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Visualmente teremos algo semelhante a:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"nome\": \"Ana Souza\",\n  \"idade\": 15,\n  \"curso\": \"DS\",\n  \"email\": \"ana@email.com\"\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 aqui que conseguimos visualizar claramente a transforma\u00e7\u00e3o:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>OBJETO JAVASCRIPT\n        \u2193\nJSON.stringify()\n        \u2193\nJSON\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Para que serve JSON.stringify()?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Guarde esta ideia:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><code>JSON.stringify()<\/code> transforma um valor JavaScript em uma string JSON.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No nosso projeto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>JSON.stringify(alunoAtual)\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">est\u00e1 preparando os dados para que possam ser armazenados no <code>localStorage<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Essa mesma ideia aparecer\u00e1 novamente quando voc\u00ea estudar comunica\u00e7\u00e3o entre diferentes partes de uma aplica\u00e7\u00e3o.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Exibindo o JSON na p\u00e1gina<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Para deixar o projeto mais visual, podemos apresentar o JSON gerado diretamente na interface.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>resultadoJSON.textContent = alunoEmJSON;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Assim, o aluno consegue enxergar:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>os dados digitados no formul\u00e1rio;<\/li>\n\n\n\n<li>o objeto criado pelo JavaScript;<\/li>\n\n\n\n<li>o JSON resultante.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Essa compara\u00e7\u00e3o visual ajuda muito a entender o conceito.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">O que \u00e9 localStorage?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">O <code>localStorage<\/code> \u00e9 um recurso do navegador que permite armazenar informa\u00e7\u00f5es localmente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Isso significa que podemos salvar dados e recuper\u00e1-los posteriormente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Podemos visualizar essas informa\u00e7\u00f5es utilizando as ferramentas do desenvolvedor do navegador.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No Chrome e navegadores semelhantes:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>F12\n\u2192 Application\n\u2192 Local Storage\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ali conseguimos visualizar as chaves e valores armazenados pela aplica\u00e7\u00e3o.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Salvando JSON no localStorage<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Para salvar uma informa\u00e7\u00e3o utilizamos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>localStorage.setItem()\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>localStorage.setItem(\"alunoCadastrado\", alunoEmJSON);\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Temos dois elementos importantes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A chave:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>alunoCadastrado\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">e o valor:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>alunoEmJSON\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Podemos imaginar:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>alunoCadastrado \u2192 dados do aluno em JSON\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Por que usamos JSON no localStorage?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Agora a liga\u00e7\u00e3o entre os assuntos come\u00e7a a aparecer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Temos um objeto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const alunoAtual = {\n    nome,\n    idade,\n    curso,\n    email\n};\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Fazemos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const alunoEmJSON = JSON.stringify(alunoAtual);\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">E depois:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>localStorage.setItem(\"alunoCadastrado\", alunoEmJSON);\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Nosso fluxo ficou:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>FORMUL\u00c1RIO\n    \u2193\nOBJETO JAVASCRIPT\n    \u2193\nJSON.stringify()\n    \u2193\nJSON\n    \u2193\nlocalStorage\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Agora os dados est\u00e3o armazenados no navegador.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Persist\u00eancia de dados no navegador<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Aqui acontece algo interessante.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Depois de salvar as informa\u00e7\u00f5es no <code>localStorage<\/code>, podemos atualizar a p\u00e1gina.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Os campos visuais podem desaparecer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mas isso n\u00e3o significa necessariamente que perdemos os dados.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eles continuam armazenados no navegador.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Isso \u00e9 <strong>persist\u00eancia<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nosso pr\u00f3ximo desafio ser\u00e1 recuperar essas informa\u00e7\u00f5es.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Recuperando dados do localStorage<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Para recuperar uma informa\u00e7\u00e3o utilizamos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>localStorage.getItem()\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const alunoJSON = localStorage.getItem(\"alunoCadastrado\");\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Agora recuperamos aquilo que estava armazenado.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mas existe um problema.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00f3s salvamos uma representa\u00e7\u00e3o em JSON.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Precisamos voltar a trabalhar com um objeto JavaScript.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Para que serve JSON.parse()?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 aqui que entra:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>JSON.parse()\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Podemos fazer:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const aluno = JSON.parse(alunoJSON);\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Agora conseguimos novamente acessar:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>aluno.nome\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>aluno.idade\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>aluno.curso\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>aluno.email\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Portanto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>JSON.stringify()\nObjeto \u2192 JSON\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">e:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>JSON.parse()\nJSON \u2192 valor JavaScript\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Essa rela\u00e7\u00e3o \u00e9 fundamental.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">JSON.stringify() x JSON.parse()<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Uma maneira simples de memorizar \u00e9:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>M\u00e9todo<\/th><th>Fun\u00e7\u00e3o<\/th><\/tr><\/thead><tbody><tr><td><code>JSON.stringify()<\/code><\/td><td>transforma o valor JavaScript em JSON textual<\/td><\/tr><tr><td><code>JSON.parse()<\/code><\/td><td>interpreta o JSON e recupera um valor JavaScript<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">O fluxo completo fica:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Objeto JavaScript\n      \u2193\nJSON.stringify()\n      \u2193\nJSON\n      \u2193\narmazenamento\/transporte\n      \u2193\nJSON.parse()\n      \u2193\nObjeto JavaScript\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Entender esse caminho \u00e9 muito mais importante do que simplesmente decorar os nomes das fun\u00e7\u00f5es.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Exibindo novamente os dados do aluno<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Depois do <code>JSON.parse()<\/code>, podemos utilizar normalmente as propriedades recuperadas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>nomeAluno.textContent = aluno.nome;\ncursoAluno.textContent = aluno.curso;\nemailAluno.textContent = aluno.email;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Agora fechamos o ciclo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Os dados:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>nasceram no formul\u00e1rio;<\/li>\n\n\n\n<li>foram capturados pelo JavaScript;<\/li>\n\n\n\n<li>formaram um objeto;<\/li>\n\n\n\n<li>foram transformados em JSON;<\/li>\n\n\n\n<li>foram armazenados;<\/li>\n\n\n\n<li>foram recuperados;<\/li>\n\n\n\n<li>voltaram a ser utilizados pelo JavaScript;<\/li>\n\n\n\n<li>apareceram novamente na interface.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Esse \u00e9 o verdadeiro aprendizado do projeto.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Removendo dados do localStorage<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Tamb\u00e9m podemos apagar uma informa\u00e7\u00e3o espec\u00edfica:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>localStorage.removeItem(\"alunoCadastrado\");\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Depois disso, podemos limpar a interface:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>formCadastro.reset();\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">e preparar novamente o formul\u00e1rio para uma nova utiliza\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Assim, nosso projeto possui um pequeno ciclo de gerenciamento das informa\u00e7\u00f5es:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>CRIAR\n\u2193\nSALVAR\n\u2193\nRECUPERAR\n\u2193\nEXIBIR\n\u2193\nREMOVER\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Teste cada etapa do projeto<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Uma pr\u00e1tica importante utilizada durante a aula \u00e9 n\u00e3o construir dezenas de linhas para somente depois descobrir se alguma coisa funciona.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Fa\u00e7a uma pequena parte.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Teste.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Funcionou?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Continue.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Capturou os dados?\n\u2193\nTESTE\n\nCriou o objeto?\n\u2193\nTESTE\n\nConverteu para JSON?\n\u2193\nTESTE\n\nSalvou no localStorage?\n\u2193\nTESTE\n\nRecuperou?\n\u2193\nTESTE\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Durante o pr\u00f3prio desenvolvimento da aula encontramos um pequeno problema relacionado ao nome de uma propriedade e conseguimos identific\u00e1-lo rapidamente justamente porque o projeto estava sendo testado por etapas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se deix\u00e1ssemos tudo para o final, ter\u00edamos muito mais c\u00f3digo para investigar.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Use o DevTools durante o desenvolvimento<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">As ferramentas do desenvolvedor n\u00e3o servem apenas para usu\u00e1rios avan\u00e7ados.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Elas devem come\u00e7ar a fazer parte da rotina de quem est\u00e1 aprendendo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Voc\u00ea pode utilizar:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>F12\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">e acompanhar diferentes partes da aplica\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O <strong>Console<\/strong> ajuda a identificar erros e testar informa\u00e7\u00f5es.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A \u00e1rea <strong>Application \u2192 Local Storage<\/strong> permite visualizar exatamente aquilo que sua aplica\u00e7\u00e3o armazenou.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e3o fique apenas olhando para o c\u00f3digo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Observe tamb\u00e9m <strong>o que o navegador est\u00e1 fazendo com esse c\u00f3digo<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">O que este projeto ensina al\u00e9m de JSON?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Apesar de o assunto principal ser JSON, o projeto conecta v\u00e1rios conhecimentos importantes:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>HTML\n \u2193\nDOM\n \u2193\nEventos\n \u2193\nJavaScript\n \u2193\nObjetos\n \u2193\nJSON\n \u2193\nlocalStorage\n \u2193\nPersist\u00eancia\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 justamente essa conex\u00e3o que faz um projeto ser t\u00e3o importante para quem est\u00e1 come\u00e7ando.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando estudamos cada assunto completamente separado, pode parecer que estamos acumulando comandos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando desenvolvemos uma aplica\u00e7\u00e3o, come\u00e7amos a perceber <strong>onde cada conhecimento entra<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">JSON aparece somente no localStorage?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O <code>localStorage<\/code> foi escolhido neste projeto porque permite visualizar o conceito de forma simples, sem precisar criar imediatamente um Back-end ou banco de dados.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mas JSON aparecer\u00e1 novamente quando voc\u00ea avan\u00e7ar para desenvolvimento de APIs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Um exemplo simplificado:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>FRONT-END\n   \u2193\nJSON\n   \u2193\nAPI REST\n   \u2193\nBACK-END\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">E na resposta:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>BACK-END\n   \u2193\nJSON\n   \u2193\nFRONT-END\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Por isso esse projeto funciona muito bem como prepara\u00e7\u00e3o para assuntos posteriores como:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>consumo de APIs;<\/li>\n\n\n\n<li><code>fetch()<\/code>;<\/li>\n\n\n\n<li>API REST;<\/li>\n\n\n\n<li>Node.js;<\/li>\n\n\n\n<li>Express;<\/li>\n\n\n\n<li>React;<\/li>\n\n\n\n<li>bancos de dados;<\/li>\n\n\n\n<li>desenvolvimento Full Stack.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">localStorage substitui banco de dados?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O <code>localStorage<\/code> \u00e9 um armazenamento dispon\u00edvel no navegador e \u00e9 extremamente \u00fatil em determinados cen\u00e1rios, estudos e aplica\u00e7\u00f5es.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por\u00e9m, ele n\u00e3o deve ser confundido com um banco de dados de uma aplica\u00e7\u00e3o completa.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Neste projeto, seu papel \u00e9 excelente para entendermos <strong>persist\u00eancia e transforma\u00e7\u00e3o dos dados<\/strong> sem introduzir imediatamente toda a complexidade de Back-end e banco de dados.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Depois de dominar esse fluxo, podemos evoluir o mesmo racioc\u00ednio.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Pr\u00f3ximos passos para evoluir o projeto<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Depois de concluir a vers\u00e3o apresentada na aula, voc\u00ea pode transformar o projeto em algo maior.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Alguns desafios interessantes s\u00e3o:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Cadastrar v\u00e1rios alunos<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Em vez de armazenar apenas um objeto, crie um array:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const alunos = &#91;];\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Adicione v\u00e1rios registros e salve a lista completa.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Criar uma tabela de alunos<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Percorra os dados e gere dinamicamente uma tabela no HTML.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Adicionar edi\u00e7\u00e3o<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Permita selecionar um aluno e alterar suas informa\u00e7\u00f5es.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Adicionar exclus\u00e3o<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Crie um bot\u00e3o para remover somente um aluno.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Criar busca<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Permita procurar alunos pelo nome ou curso.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. Substituir localStorage por uma API<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Depois que o projeto estiver funcionando no navegador, crie um Back-end com <strong>Node.js e Express<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nesse momento voc\u00ea perceber\u00e1 que o conhecimento de JSON continuar\u00e1 sendo utilizado.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Resumindo o que aprendemos<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Se voc\u00ea guardar apenas uma imagem mental desta aula, guarde esta:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>FORMUL\u00c1RIO\n     \u2193\nOBJETO JAVASCRIPT\n     \u2193\nJSON.stringify()\n     \u2193\nJSON\n     \u2193\nlocalStorage\n     \u2193\nJSON.parse()\n     \u2193\nOBJETO JAVASCRIPT\n     \u2193\nINTERFACE\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">JSON deixa de parecer apenas uma estrutura cheia de chaves, aspas e dois-pontos quando entendemos <strong>por que os dados precisam assumir aquele formato e para onde eles est\u00e3o indo<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Conclus\u00e3o<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Aprender <strong>JSON com JavaScript<\/strong> fica muito mais simples quando conseguimos acompanhar dados reais percorrendo uma aplica\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Neste projeto, come\u00e7amos com informa\u00e7\u00f5es digitadas em um formul\u00e1rio e percorremos todas as etapas necess\u00e1rias para:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>capturar \u2192 organizar \u2192 converter \u2192 armazenar \u2192 recuperar \u2192 converter novamente \u2192 exibir.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Durante esse caminho utilizamos conceitos fundamentais como <strong>DOM, eventos, objetos JavaScript, JSON.stringify(), JSON.parse() e localStorage<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esses conhecimentos n\u00e3o ficam presos a este Cadastro de Alunos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eles criam uma base importante para posteriormente entender como aplica\u00e7\u00f5es Front-end conversam com APIs e Back-ends.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se voc\u00ea est\u00e1 come\u00e7ando, n\u00e3o tente apenas decorar:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>JSON.stringify()\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">ou:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>JSON.parse()\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Pergunte sempre:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>De onde esses dados vieram?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Em que formato eles est\u00e3o agora?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Para onde eles precisam ir?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando voc\u00ea consegue responder essas tr\u00eas perguntas, o c\u00f3digo come\u00e7a a fazer muito mais sentido.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83c\udfa5 Assista \u00e0 aula completa<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>JSON para Iniciantes na Pr\u00e1tica | Crie um Cadastro com HTML, CSS, JavaScript e localStorage<\/strong><\/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=\"JSON para Iniciantes na Pr\u00e1tica | Crie um Cadastro com HTML, CSS, JavaScript e localStorage\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/KmVlYr2b7CU?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\n\n\n<p class=\"wp-block-paragraph\">No v\u00eddeo voc\u00ea acompanha todo o desenvolvimento, os testes e a explica\u00e7\u00e3o de cada etapa do projeto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Desvendando o C\u00f3digo \u2014 Prof. Marcos<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Programa\u00e7\u00e3o fica muito mais f\u00e1cil quando voc\u00ea entende o que est\u00e1 acontecendo por tr\u00e1s do c\u00f3digo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se voc\u00ea est\u00e1 come\u00e7ando a estudar JavaScript e j\u00e1 encontrou termos como JSON, JSON.stringify(), JSON.parse() e localStorage, talvez tenha surgido uma d\u00favida: Para que tudo isso serve na pr\u00e1tica? Uma das melhores maneiras de entender JSON \u00e9 acompanhar o caminho percorrido pelos dados dentro de uma aplica\u00e7\u00e3o. Neste projeto, vamos construir um Cadastro de Alunos utilizando HTML, CSS e JavaScript. Os dados preenchidos no formul\u00e1rio ser\u00e3o transformados em um objeto JavaScript, convertidos para JSON e armazenados no navegador utilizando o localStorage. Depois, vamos fazer o caminho contr\u00e1rio: recuperar os dados armazenados, converter o JSON novamente para um objeto JavaScript e apresentar as informa\u00e7\u00f5es na interface. O fluxo principal ser\u00e1: Formul\u00e1rio \u2192 Objeto JavaScript \u2192 JSON \u2192 localStorage \u2192 JSON.parse() \u2192 Objeto \u2192 Interface \u00c9 justamente acompanhando esse caminho que conceitos que parecem isolados come\u00e7am a fazer sentido. \ud83c\udfa5 Aula completa: JSON para Iniciantes na Pr\u00e1tica Este artigo acompanha a aula completa do canal Desvendando o C\u00f3digo, na qual desenvolvemos o projeto passo a passo. JSON para Iniciantes na Pr\u00e1tica | Crie um Cadastro com HTML, CSS, JavaScript e localStorage Durante a aula, voc\u00ea poder\u00e1 acompanhar a constru\u00e7\u00e3o do projeto e entender n\u00e3o apenas como escrever o c\u00f3digo, mas principalmente por que cada etapa \u00e9 necess\u00e1ria. O que voc\u00ea vai aprender Durante o desenvolvimento do projeto, trabalharemos conceitos importantes do JavaScript e do desenvolvimento Web: O objetivo n\u00e3o \u00e9 simplesmente fazer um cadastro funcionar. A ideia \u00e9 entender como os dados percorrem a aplica\u00e7\u00e3o. O que \u00e9 JSON? JSON significa: JavaScript Object Notation Apesar do nome possuir JavaScript, o JSON n\u00e3o \u00e9 exclusivo do JavaScript. Ele \u00e9 um formato textual utilizado para representar e transportar dados e aparece constantemente no desenvolvimento de aplica\u00e7\u00f5es Web. Um JSON pode ter uma estrutura semelhante a esta: Observe que temos informa\u00e7\u00f5es organizadas utilizando pares de chave e valor. Temos: Essa organiza\u00e7\u00e3o facilita o transporte e o armazenamento das informa\u00e7\u00f5es. JSON e objeto JavaScript s\u00e3o a mesma coisa? Essa \u00e9 uma d\u00favida extremamente comum para quem est\u00e1 come\u00e7ando. Eles podem parecer muito semelhantes visualmente, mas precisamos entender a diferen\u00e7a. Um objeto JavaScript poderia ser: Podemos acessar uma propriedade: Resultado: J\u00e1 quando transformamos essas informa\u00e7\u00f5es em JSON, estamos trabalhando com uma representa\u00e7\u00e3o textual desses dados. Por exemplo: Essa diferen\u00e7a ser\u00e1 importante daqui a pouco. Por que transformar um objeto em JSON? Imagine que nossa aplica\u00e7\u00e3o possui este objeto: Enquanto estamos trabalhando dentro do JavaScript, conseguimos acessar tranquilamente: ou: Mas existem situa\u00e7\u00f5es em que precisamos transportar ou armazenar esses dados. \u00c9 a\u00ed que o JSON come\u00e7a a fazer sentido. No projeto da aula, utilizaremos JSON para armazenar os dados no localStorage. Em aplica\u00e7\u00f5es maiores, voc\u00ea encontrar\u00e1 JSON frequentemente na comunica\u00e7\u00e3o entre: Front-end \u2192 API \u2192 Back-end e: Back-end \u2192 API \u2192 Front-end Por isso entender JSON \u00e9 fundamental para quem pretende avan\u00e7ar posteriormente para APIs REST, Node.js, Express, React e desenvolvimento Full Stack. Criando o formul\u00e1rio de cadastro Nosso projeto come\u00e7a com um formul\u00e1rio contendo informa\u00e7\u00f5es do aluno. Teremos dados como: O usu\u00e1rio preenche essas informa\u00e7\u00f5es na interface. Nesse momento, os dados ainda est\u00e3o nos elementos HTML. Precisamos fazer o JavaScript captur\u00e1-los. Capturando elementos do HTML com JavaScript Uma das maneiras de acessar elementos da p\u00e1gina \u00e9 utilizando: Por exemplo: Agora o JavaScript possui refer\u00eancias para os elementos que existem no HTML. Isso permitir\u00e1 ler os valores digitados pelo usu\u00e1rio e manipular posteriormente a interface. Trabalhando com o evento submit Quando temos um formul\u00e1rio HTML, normalmente existe um bot\u00e3o respons\u00e1vel pelo envio das informa\u00e7\u00f5es. Podemos monitorar esse evento: Quando o usu\u00e1rio enviar o formul\u00e1rio, a fun\u00e7\u00e3o ser\u00e1 executada. Por\u00e9m, existe um detalhe importante. O comportamento padr\u00e3o do formul\u00e1rio pode provocar o recarregamento da p\u00e1gina. Neste projeto n\u00e3o queremos isso. Para que serve preventDefault()? Utilizamos: Assim: O preventDefault() impede o comportamento padr\u00e3o daquele evento. Agora conseguimos capturar e manipular os dados antes que o formul\u00e1rio tente realizar seu comportamento convencional. Capturando os valores dos inputs Depois disso, podemos recuperar aquilo que foi digitado: Observe alguns detalhes. Utilizamos: para remover espa\u00e7os desnecess\u00e1rios das extremidades. Para idade: fazemos a convers\u00e3o para n\u00famero. S\u00e3o pequenos tratamentos, mas fazem parte da prepara\u00e7\u00e3o dos dados antes de continuarmos. Valide os dados antes de continuar Antes de criar nosso objeto, precisamos verificar se as informa\u00e7\u00f5es necess\u00e1rias realmente existem. Podemos fazer algo semelhante a: O return \u00e9 muito importante. Se os dados forem inv\u00e1lidos, n\u00e3o queremos que o algoritmo continue executando as pr\u00f3ximas etapas. O fluxo deve parar naquele ponto. Isso evita que outras partes do c\u00f3digo tentem trabalhar com informa\u00e7\u00f5es incompletas. Valida\u00e7\u00e3o tamb\u00e9m faz parte da seguran\u00e7a Existe uma li\u00e7\u00e3o importante aqui. Mesmo em um projeto simples, precisamos come\u00e7ar a pensar em valida\u00e7\u00e3o de dados e seguran\u00e7a da aplica\u00e7\u00e3o. O HTML pode realizar algumas valida\u00e7\u00f5es. O JavaScript pode realizar outras. Em uma aplica\u00e7\u00e3o Full Stack, o Back-end tamb\u00e9m precisa validar aquilo que recebe. N\u00e3o devemos construir uma aplica\u00e7\u00e3o pensando: \u201cO Front-end j\u00e1 validou, ent\u00e3o n\u00e3o preciso me preocupar.\u201d Cada camada deve cuidar de sua responsabilidade. Essa mentalidade come\u00e7a em projetos pequenos e acompanha o desenvolvedor quando ele passa a trabalhar com aplica\u00e7\u00f5es maiores. Criando um objeto JavaScript Depois de capturar e validar os dados, podemos criar nosso objeto. Ou utilizando a sintaxe reduzida: Agora aqueles dados que anteriormente estavam separados nos campos do formul\u00e1rio est\u00e3o organizados dentro de uma \u00fanica estrutura. Temos um objeto JavaScript. Transformando objeto JavaScript em JSON Chegamos a uma das partes mais importantes da aula. Para converter nosso objeto para JSON, utilizamos: Exemplo: Podemos tamb\u00e9m formatar a apresenta\u00e7\u00e3o: Agora temos uma representa\u00e7\u00e3o textual das informa\u00e7\u00f5es. Visualmente teremos algo semelhante a: \u00c9 aqui que conseguimos visualizar claramente a transforma\u00e7\u00e3o: Para que serve JSON.stringify()? Guarde esta ideia: JSON.stringify() transforma um valor JavaScript em uma string JSON. No nosso projeto: est\u00e1 preparando os dados para que possam ser armazenados no localStorage. Essa mesma ideia aparecer\u00e1 novamente quando voc\u00ea estudar comunica\u00e7\u00e3o entre diferentes partes de uma aplica\u00e7\u00e3o. Exibindo o JSON na p\u00e1gina Para deixar o projeto mais visual, podemos apresentar o JSON gerado diretamente na interface. Por exemplo: Assim, o aluno consegue enxergar: Essa compara\u00e7\u00e3o visual ajuda muito a entender o conceito. O que \u00e9 localStorage? O localStorage \u00e9 um recurso do navegador que permite armazenar informa\u00e7\u00f5es localmente. Isso significa que podemos salvar dados e recuper\u00e1-los posteriormente. Podemos visualizar essas informa\u00e7\u00f5es utilizando as ferramentas do desenvolvedor do navegador. No Chrome e navegadores semelhantes: Ali conseguimos visualizar as chaves e valores armazenados pela aplica\u00e7\u00e3o. Salvando JSON no localStorage Para salvar uma informa\u00e7\u00e3o utilizamos: Exemplo: Temos dois elementos importantes. A chave: e o valor: Podemos imaginar: Por que usamos JSON no localStorage? Agora a liga\u00e7\u00e3o entre os assuntos come\u00e7a a aparecer. Temos um objeto: Fazemos: E depois: Nosso fluxo ficou: Agora os dados est\u00e3o armazenados no navegador. Persist\u00eancia de dados no navegador Aqui acontece algo interessante. Depois de salvar as informa\u00e7\u00f5es no localStorage, podemos atualizar a p\u00e1gina. Os campos visuais podem desaparecer. Mas isso n\u00e3o significa necessariamente que perdemos os dados. Eles continuam armazenados no navegador. Isso \u00e9 persist\u00eancia. Nosso pr\u00f3ximo desafio ser\u00e1 recuperar essas informa\u00e7\u00f5es. Recuperando dados do localStorage Para recuperar uma informa\u00e7\u00e3o utilizamos: Por exemplo: Agora recuperamos aquilo que estava armazenado. Mas existe um problema. N\u00f3s salvamos uma representa\u00e7\u00e3o em JSON. Precisamos voltar a trabalhar com um objeto JavaScript. Para que serve JSON.parse()? \u00c9 aqui que entra: Podemos fazer: Agora conseguimos novamente acessar: Portanto: e: Essa rela\u00e7\u00e3o \u00e9 fundamental. JSON.stringify() x JSON.parse() Uma maneira simples de memorizar \u00e9: M\u00e9todo Fun\u00e7\u00e3o JSON.stringify() transforma o valor JavaScript em JSON textual JSON.parse() interpreta o JSON e recupera um valor JavaScript O fluxo completo fica: Entender esse caminho \u00e9 muito mais importante do que simplesmente decorar os nomes das fun\u00e7\u00f5es. Exibindo novamente os dados do aluno Depois do JSON.parse(), podemos utilizar normalmente as propriedades recuperadas. Por exemplo: Agora fechamos o ciclo. Os dados: Esse \u00e9 o verdadeiro aprendizado do projeto. Removendo dados do localStorage Tamb\u00e9m podemos apagar uma informa\u00e7\u00e3o espec\u00edfica: Depois disso, podemos limpar a interface: e preparar novamente o formul\u00e1rio para uma nova utiliza\u00e7\u00e3o. Assim, nosso projeto possui um pequeno ciclo de gerenciamento das informa\u00e7\u00f5es: Teste cada etapa do projeto Uma pr\u00e1tica importante utilizada durante a aula \u00e9 n\u00e3o construir dezenas de linhas para somente depois descobrir se alguma coisa funciona. Fa\u00e7a uma pequena parte. Teste. Funcionou? Continue. Por exemplo: Durante o pr\u00f3prio desenvolvimento da aula encontramos um pequeno problema relacionado ao nome de uma propriedade e conseguimos identific\u00e1-lo rapidamente justamente porque o projeto estava sendo testado por etapas. Se deix\u00e1ssemos tudo para o final, ter\u00edamos muito mais c\u00f3digo para investigar. Use o DevTools durante o desenvolvimento As ferramentas do desenvolvedor n\u00e3o servem apenas para usu\u00e1rios avan\u00e7ados. Elas devem come\u00e7ar a fazer parte da rotina de quem est\u00e1 aprendendo. Voc\u00ea pode utilizar: e acompanhar diferentes partes da aplica\u00e7\u00e3o. O Console ajuda a identificar erros e testar informa\u00e7\u00f5es. A \u00e1rea Application \u2192 Local Storage permite visualizar exatamente aquilo que sua aplica\u00e7\u00e3o armazenou. N\u00e3o fique apenas olhando para o c\u00f3digo. Observe tamb\u00e9m o que o navegador est\u00e1 fazendo com esse c\u00f3digo. O que este projeto ensina al\u00e9m de JSON? Apesar de o assunto principal ser JSON, o projeto conecta v\u00e1rios conhecimentos importantes: \u00c9 justamente essa conex\u00e3o que faz um projeto ser t\u00e3o importante para quem est\u00e1 come\u00e7ando. Quando estudamos cada assunto completamente separado, pode parecer que estamos acumulando comandos. Quando desenvolvemos uma aplica\u00e7\u00e3o, come\u00e7amos a perceber onde cada conhecimento entra. JSON aparece somente no localStorage? N\u00e3o. O localStorage foi escolhido neste projeto porque permite visualizar o conceito de forma simples, sem precisar criar imediatamente um Back-end ou banco de dados. Mas JSON aparecer\u00e1 novamente quando voc\u00ea avan\u00e7ar para desenvolvimento de APIs. Um exemplo simplificado: E na resposta: Por isso esse projeto funciona muito bem como prepara\u00e7\u00e3o para assuntos posteriores como: localStorage substitui banco de dados? N\u00e3o. O localStorage \u00e9 um armazenamento dispon\u00edvel no navegador e \u00e9 extremamente \u00fatil em determinados cen\u00e1rios, estudos e aplica\u00e7\u00f5es. Por\u00e9m, ele n\u00e3o deve ser confundido com um banco de dados de uma aplica\u00e7\u00e3o completa. Neste projeto, seu papel \u00e9 excelente para entendermos persist\u00eancia e transforma\u00e7\u00e3o dos dados sem introduzir imediatamente toda a complexidade de Back-end e banco de dados. Depois de dominar esse fluxo, podemos evoluir o mesmo racioc\u00ednio. Pr\u00f3ximos passos para evoluir o projeto Depois de concluir a vers\u00e3o apresentada na aula, voc\u00ea pode transformar o projeto em algo maior. Alguns desafios interessantes s\u00e3o: 1. Cadastrar v\u00e1rios alunos Em vez de armazenar apenas um objeto, crie um array: Adicione v\u00e1rios registros e salve a lista completa. 2. Criar uma tabela de alunos Percorra os dados e gere dinamicamente uma tabela no HTML. 3. Adicionar edi\u00e7\u00e3o Permita selecionar um aluno e alterar suas informa\u00e7\u00f5es. 4. Adicionar exclus\u00e3o Crie um bot\u00e3o para remover somente um aluno. 5. Criar busca Permita procurar alunos pelo nome ou curso. 6. Substituir localStorage por uma API Depois que o projeto estiver funcionando no navegador, crie um Back-end com Node.js e Express. Nesse momento voc\u00ea perceber\u00e1 que o conhecimento de JSON continuar\u00e1 sendo utilizado. Resumindo o que aprendemos Se voc\u00ea guardar apenas uma imagem mental desta aula, guarde esta: JSON deixa de parecer apenas uma estrutura cheia de chaves, aspas e dois-pontos quando entendemos por que os dados precisam assumir aquele formato e para onde eles est\u00e3o indo. Conclus\u00e3o Aprender JSON com JavaScript fica muito mais simples quando conseguimos acompanhar dados reais percorrendo uma aplica\u00e7\u00e3o. Neste projeto, come\u00e7amos com informa\u00e7\u00f5es digitadas em um formul\u00e1rio e percorremos todas as etapas necess\u00e1rias para: capturar \u2192 organizar \u2192 converter \u2192 armazenar \u2192 recuperar \u2192 converter novamente \u2192 exibir. Durante esse caminho utilizamos conceitos fundamentais como DOM, eventos, objetos JavaScript, JSON.stringify(), JSON.parse() e localStorage. Esses conhecimentos n\u00e3o ficam presos a este Cadastro de Alunos. Eles criam uma base importante para posteriormente entender como aplica\u00e7\u00f5es Front-end conversam com APIs e Back-ends. Se voc\u00ea est\u00e1 come\u00e7ando, n\u00e3o tente apenas decorar: ou: Pergunte sempre: De onde esses dados vieram? Em que formato eles est\u00e3o agora? Para onde eles precisam ir? Quando voc\u00ea consegue responder essas tr\u00eas perguntas, o c\u00f3digo come\u00e7a a fazer muito mais sentido. \ud83c\udfa5 Assista \u00e0 aula completa JSON para Iniciantes na Pr\u00e1tica | Crie um Cadastro com HTML, CSS, JavaScript e localStorage No v\u00eddeo voc\u00ea&#8230;<\/p>\n","protected":false},"author":1,"featured_media":2348,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[21],"tags":[],"class_list":["post-2347","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2347","targetHints":{"allow":["GET"]}}],"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=2347"}],"version-history":[{"count":2,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2347\/revisions"}],"predecessor-version":[{"id":2350,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2347\/revisions\/2350"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/2348"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}