{"id":1056,"date":"2024-05-25T19:01:20","date_gmt":"2024-05-25T22:01:20","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=1056"},"modified":"2024-05-30T20:10:47","modified_gmt":"2024-05-30T23:10:47","slug":"manipulando-json-e-criando-elementos-html-com-javascript-parte-2-com-query-string","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=1056","title":{"rendered":"Manipulando JSON e Criando Elementos HTML com JavaScript &#8211; Parte 2 com Query String"},"content":{"rendered":"\n<p>Quando navegamos na internet, frequentemente encontramos URLs que cont\u00eam um ponto de interroga\u00e7\u00e3o seguido de uma s\u00e9rie de pares chave-valor. Isso \u00e9 conhecido como uma query string. As query strings s\u00e3o uma maneira poderosa de passar informa\u00e7\u00f5es entre p\u00e1ginas da web, e entender como manipul\u00e1-las com JavaScript pode abrir diversas possibilidades para a cria\u00e7\u00e3o de aplica\u00e7\u00f5es web din\u00e2micas e interativas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">O Que \u00e9 uma Query String?<\/h2>\n\n\n\n<p>Uma query string \u00e9 a parte da URL que vem ap\u00f3s o s\u00edmbolo ?. Ela \u00e9 composta por um ou mais pares chave-valor separados por &amp;. Por exemplo, na URL https:\/\/example.com?name=Joao&amp;age=25, a query string \u00e9 name=Joao&amp;age=25, onde name e age s\u00e3o as chaves e Joao e 25 s\u00e3o os respectivos valores.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Extraindo Par\u00e2metros da Query String<\/h2>\n\n\n\n<p>Manipular query strings em JavaScript \u00e9 simples e direto. O objeto URLSearchParams \u00e9 uma ferramenta \u00fatil para trabalhar com query strings. Ele permite que voc\u00ea extraia e manipule os par\u00e2metros de forma eficiente.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Exemplo<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"627\" height=\"539\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/05\/image-20.png\" alt=\"\" class=\"wp-image-1057\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/05\/image-20.png 627w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/05\/image-20-300x258.png 300w\" sizes=\"(max-width: 627px) 100vw, 627px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Neste exemplo, o c\u00f3digo HTML e JavaScript extrai os par\u00e2metros name e age da query string e exibe uma mensagem personalizada na p\u00e1gina. Abra este arquivo no navegador com a URL file:\/\/\/caminho\/para\/seu\/arquivo.html?name=Joao&amp;age=25 para ver o resultado.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"492\" height=\"177\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/05\/image-21.png\" alt=\"\" class=\"wp-image-1058\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/05\/image-21.png 492w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/05\/image-21-300x108.png 300w\" sizes=\"(max-width: 492px) 100vw, 492px\" \/><\/figure>\n\n\n\n<p><span style=\"color: rgb(13, 13, 13); font-family: ui-sans-serif, -apple-system, system-ui, &quot;Segoe UI&quot;, Roboto, Ubuntu, Cantarell, &quot;Noto Sans&quot;, sans-serif, Helvetica, &quot;Apple Color Emoji&quot;, Arial, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-size: 16px;\">Al\u00e9m de exibir mensagens simples, podemos usar query strings para filtrar dados, personalizar conte\u00fado e muito mais.<\/span><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Exemplo pr\u00e1tico<\/h2>\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=\"Manipulando JSON e Criando Elementos HTML com JavaScript - Parte 2 com Query String\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/bAzbKqKKLhE?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<pre class=\"wp-block-code\"><code><strong>CARROS.JSON\n<\/strong>\n\n   &#91;\n\n{\n    \"nome\": \"CARRO1\",\n    \"imagem\": \"img\/carro1.jpg\",\n    \"marca\": \"marca1\",\n    \"ano\": \"1990\"  \n},\n{\n    \"nome\": \"CARRO2\",\n    \"imagem\": \"img\/carro2.jpg\",\n    \"marca\": \"marca2\",\n    \"ano\": \"1991\"  \n},\n{\n    \"nome\": \"CARRO3\",\n    \"imagem\": \"img\/carro3.jpg\",\n    \"marca\": \"marca3\",\n    \"ano\": \"1992\"  \n},\n{\n    \"nome\": \"CARRO4\",\n    \"imagem\": \"img\/carro4.jpg\",\n    \"marca\": \"marca4\",\n    \"ano\": \"1993\"  \n},\n{\n    \"nome\": \"CARRO5\",\n    \"imagem\": \"img\/carro5.jpg\",\n    \"marca\": \"marca5\",\n    \"ano\": \"1994\"  \n}\n\n\n    ]\n\n<strong>INDEX.HTML\n<\/strong>\n&lt;!DOCTYPE html>\n&lt;html lang=\"pt-br\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>Json com JavaScript e HTML&lt;\/title>\n&lt;\/head>\n&lt;style>\n    .container{\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: space-around;\n    }\n\n    .card{\n        border:1px solid #ccc;\n        border-radius: 8px;\n        padding: 16px;\n        margin: 10px;\n        width: 200px;\n        text-align: center;\n        box-sizing: border-box;\n    }\n    .card img{\n        max-width: 100%;\n        width: 150px;\n        height: 200px;\n        border-radius: 8px;\n    }\n    .card h3{\n        margin-top: 8px;\n    }\n    \n    .details{\n        margin-top: 20px;\n        padding: 16px;\n        border:1px solid #ccc;\n        border-radius: 8px;\n        text-align: center;\n    }\n\n    .details img{\n        max-width: 100%;\n        width: 150px;\n        height: 200px;\n        border-radius: 8px;\n    }\n\n&lt;\/style>\n&lt;body>\n\n    &lt;div class=\"container\" id=\"carros-container\">&lt;\/div>\n\n    &lt;div class=\"details\" id=\"details\" style=\"visibility: hidden;\">\n    &lt;h3>Detalhes do Carro&lt;\/h3>\n    &lt;img id=\"carro-img\">\n    &lt;p id=\"carro-nome\">&lt;\/p>\n    &lt;p id=\"carro-marca\">&lt;\/p>\n    &lt;p id=\"carro-ano\">&lt;\/p>\n\n    \n    &lt;\/div>\n\n    &lt;script>\n        function carregar(){\n            fetch('carros.json')\n                .then(response => response.json())\n                .then(carros =>{\n                    const container = document.querySelector('#carros-container');\n\n                    \n                    const detailsImg = document.querySelector(\"#carro-img\");\n                    const detailsNome = document.querySelector(\"#carro-nome\");\n                    const detailsMarca = document.querySelector(\"#carro-marca\");\n                    const detailsAno = document.querySelector(\"#carro-ano\");\n\n                    carros.map(carro=>{\n\n                        const card = document.createElement(\"div\");\n                        card.classList.add(\"card\");\n\n                        const img = document.createElement(\"img\");\n\n                        img.src =carro.imagem;\n\n                        img.alt = carro.nome;\n\n                        const titulo = document.createElement(\"h3\");\n                        titulo.textContent = carro.nome;\n\n                        card.appendChild(img);\n                        card.appendChild(titulo);\n                        container.appendChild(card); \n                        \n                        \/\/ card.addEventListener('click', ()=>{\n                        \/\/     alert(`Nome: ${carro.nome}\\nMarca: ${carro.marca}`)\n                        \/\/ });\n\n                        card.addEventListener('click', ()=>{\n                            document.querySelector(\"#details\").style.visibility = 'visible';\n                            detailsImg.src = carro.imagem;\n                            detailsImg.alt = carro.nome;\n                            detailsNome.textContent = `Nome: ${carro.nome} `;\n                            detailsMarca.textContent = `Marca: ${carro.marca} `;\n                            detailsAno.textContent = `Ano: ${carro.ano} `;                            \n\n                        })\n                        \n\n                    })\n                   \n                })\n\n                \n        }\n        carregar();\n               \n    &lt;\/script>\n\n    \n    \n&lt;\/body>\n&lt;\/html>\n\n<strong>INDEX2.HTML\n<\/strong>\n&lt;!DOCTYPE html>\n&lt;html lang=\"pt-br\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>Json com JavaScript e HTML&lt;\/title>\n&lt;\/head>\n&lt;style>\n    .container{\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: space-around;\n    }\n\n    .card{\n        border:1px solid #ccc;\n        border-radius: 8px;\n        padding: 16px;\n        margin: 10px;\n        width: 200px;\n        text-align: center;\n        box-sizing: border-box;\n    }\n    .card img{\n        max-width: 100%;\n        width: 150px;\n        height: 200px;\n        border-radius: 8px;\n    }\n    .card h3{\n        margin-top: 8px;\n    }\n    \n&lt;\/style>\n&lt;body>\n\n    &lt;div class=\"container\" id=\"carros-container\">\n      \n             \n    &lt;\/div>\n\n    &lt;script>\n        function carregar(){\n            fetch('carros.json')\n                .then(response => response.json())\n                .then(carros =>{\n                    const container = document.querySelector('#carros-container');\n\n                    carros.map(carro=>{\n\n                        const card = document.createElement(\"div\");\n                        card.classList.add(\"card\");\n\n                        const img = document.createElement(\"img\");\n\n                        img.src =carro.imagem;\n\n                        img.alt = carro.nome;\n\n                        const titulo = document.createElement(\"h3\");\n                        titulo.textContent = carro.nome;\n\n                        card.appendChild(img);\n                        card.appendChild(titulo);\n                        container.appendChild(card);\n\n                        card.addEventListener('click', ()=>{\n                            const url = ` detalhes.html?nome= ${encodeURIComponent(carro.nome)                                \n                            }&amp;marca=${encodeURIComponent(carro.marca)\n                            }&amp;ano=${encodeURIComponent(carro.ano)\n                            }&amp;imagem=${encodeURIComponent(carro.imagem)}`\n\n                            window.location.href = url;\n                        })\n                    })\n                   \n                })\n\n                \n        }\n        carregar();\n               \n    &lt;\/script>\n\n    \n    \n&lt;\/body>\n&lt;\/html>\n\n<strong>DETALHES.HTML\n<\/strong>\n&lt;!DOCTYPE html>\r\n&lt;html lang=\"pt-br\">\r\n&lt;head>\r\n    &lt;meta charset=\"UTF-8\">\r\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    &lt;title>Detalhes do Carro&lt;\/title>\r\n&lt;\/head>\r\n&lt;style>\r\n    .details{\r\n    margin-top: 20px;\r\n    padding: 16px;\r\n    border:1px solid #ccc;\r\n    border-radius: 8px;\r\n    text-align: center;\r\n}\r\n\r\n.details img{\r\n    max-width: 100%;\r\n    width: 150px;\r\n    height: 200px;\r\n    border-radius: 8px;\r\n}\r\n&lt;\/style>\r\n\r\n&lt;body>\r\n    \r\n    &lt;div class=\"details\">\r\n        &lt;h3>Detalhes do Carro&lt;\/h3>\r\n        &lt;img id=\"carro-img\">\r\n        &lt;p id=\"carro-nome\">&lt;\/p>\r\n        &lt;p id=\"carro-marca\">&lt;\/p>\r\n        &lt;p id=\"carro-ano\">&lt;\/p>\r\n    &lt;\/div>\r\n&lt;\/body>\r\n\r\n&lt;script>\r\n    window.onload = function(){\r\n       const urlParams = new URLSearchParams(window.location.search);\r\n\r\n       const nome = urlParams.get('nome');\r\n       const marca = urlParams.get('marca');\r\n       const ano = urlParams.get('ano');\r\n       const imagem = urlParams.get('imagem');\r\n\r\n       document.getElementById('carro-img').src = imagem;\r\n       document.getElementById('carro-img').alt = nome;\r\n       document.getElementById('carro-nome').textContent = `Nome: ${nome}`;\r\n       document.getElementById('carro-marca').textContent = `Marca: ${marca}`;\r\n       document.getElementById('carro-ano').textContent = `Ano: ${ano}`;      \r\n\r\n\r\n    }\r\n&lt;\/script>\r\n&lt;\/html><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n\n<p><br>As query strings s\u00e3o uma ferramenta essencial para passar informa\u00e7\u00f5es entre p\u00e1ginas da web. Com o URLSearchParams, manipular query strings em JavaScript se torna uma tarefa simples e eficaz. Seja para personalizar mensagens, filtrar dados ou criar experi\u00eancias de usu\u00e1rio din\u00e2micas, entender e utilizar query strings abre um vasto leque de possibilidades no desenvolvimento web. Aproveite essa poderosa funcionalidade para tornar suas aplica\u00e7\u00f5es web mais interativas e responsivas \u00e0s necessidades dos usu\u00e1rios.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quando navegamos na internet, frequentemente encontramos URLs que cont\u00eam um ponto de interroga\u00e7\u00e3o seguido de uma s\u00e9rie de pares chave-valor. Isso \u00e9 conhecido como uma query string. As query strings s\u00e3o uma maneira poderosa de passar informa\u00e7\u00f5es entre p\u00e1ginas da web, e entender como manipul\u00e1-las com JavaScript pode abrir diversas possibilidades para a cria\u00e7\u00e3o de aplica\u00e7\u00f5es web din\u00e2micas e interativas. O Que \u00e9 uma Query String? Uma query string \u00e9 a parte da URL que vem ap\u00f3s o s\u00edmbolo ?. Ela \u00e9 composta por um ou mais pares chave-valor separados por &amp;. Por exemplo, na URL https:\/\/example.com?name=Joao&amp;age=25, a query string \u00e9 name=Joao&amp;age=25, onde name e age s\u00e3o as chaves e Joao e 25 s\u00e3o os respectivos valores. Extraindo Par\u00e2metros da Query String Manipular query strings em JavaScript \u00e9 simples e direto. O objeto URLSearchParams \u00e9 uma ferramenta \u00fatil para trabalhar com query strings. Ele permite que voc\u00ea extraia e manipule os par\u00e2metros de forma eficiente. Exemplo Neste exemplo, o c\u00f3digo HTML e JavaScript extrai os par\u00e2metros name e age da query string e exibe uma mensagem personalizada na p\u00e1gina. Abra este arquivo no navegador com a URL file:\/\/\/caminho\/para\/seu\/arquivo.html?name=Joao&amp;age=25 para ver o resultado. Al\u00e9m de exibir mensagens simples, podemos usar query strings para filtrar dados, personalizar conte\u00fado e muito mais. Exemplo pr\u00e1tico Conclus\u00e3o As query strings s\u00e3o uma ferramenta essencial para passar informa\u00e7\u00f5es entre p\u00e1ginas da web. Com o URLSearchParams, manipular query strings em JavaScript se torna uma tarefa simples e eficaz. Seja para personalizar mensagens, filtrar dados ou criar experi\u00eancias de usu\u00e1rio din\u00e2micas, entender e utilizar query strings abre um vasto leque de possibilidades no desenvolvimento web. Aproveite essa poderosa funcionalidade para tornar suas aplica\u00e7\u00f5es web mais interativas e responsivas \u00e0s necessidades dos usu\u00e1rios.<\/p>\n","protected":false},"author":1,"featured_media":1063,"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\/1056"}],"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=1056"}],"version-history":[{"count":6,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/1056\/revisions"}],"predecessor-version":[{"id":1066,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/1056\/revisions\/1066"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/1063"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1056"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1056"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}