Codigo Tecnologias Internet

<deck name="Código TI"><fields><rich-text name='Frente' sides='11' ></rich-
text><rich-text name='Verso' sides='01'

></rich-text></fields><cards><card><field name='Frente'><h1>adopt.js</h1>
// GeneratePetInfo.js
// Get the pet's name from the URL let pathArray =
window.location.pathname.split('/'); let currentPetName =
pathArray[pathArray.length - 1].replace('.html', '');
// Fetch the XML
data fetch('/src/xml/pets/pets.xml') .then(response =>
response.text()) .then(data => { let parser = new
DOMParser(); let xmlDoc = parser.parseFromString(data,
"text/xml");
 // Find the pet in the XML document let pets =
xmlDoc.getElementsByTagName('pet'); let currentPet; 
for(let pet of pets) { let lname =
pet.getElementsByTagName('lname')[0].textContent; 
if(lname === currentPetName) { currentPet =
pet; break; } 
}
 // Extract the pet's info let lname =
currentPet.getElementsByTagName('lname')[0].textContent; let
name = currentPet.getElementsByTagName('name')[0].textContent; 
let type = currentPet.getElementsByTagName('type')[0].textContent; 
let gender = currentPet.getElementsByTagName('gender')
[0].textContent; let dob =
currentPet.getElementsByTagName('dob')[0].textContent; let age
= currentPet.getElementsByTagName('age')[0].textContent; let
size = currentPet.getElementsByTagName('size')[0].textContent; 
let location = currentPet.getElementsByTagName('location')
[0].textContent; let info =
currentPet.getElementsByTagName('info')[0].textContent;
 // Generate the HTML let html = ` 
<section id="adopt"> <div
class="adopt-pet"> <div id="pet-
gallery"> <div class="big-
image"> <img id="big"
src="/src/img/pets/${lname}1.png"> 
</div> <div
class="small-images"> 
<img class="small active" src="/src/img/pets/${lname}1.png"> 
<img class="small"
src="/src/img/pets/${lname}2.png"> 
<img class="small" src="/src/img/pets/$
{lname}3.png"> 
</div> </div> 
<div class="adopt-info"> 
Hi! I am... 
<hr> 
<h1>${name}</h1> 
<h2>${type} | ${gender}</h2> 
<hr> 
<h3>Location</h3> 
${location} 
<h3>Date of Birth</h3> 
${dob} 
<h3>Age</h3> $
{age} 
<h3>Size</h3> 
${size} </div> 
</div> <div
class="adopt-story"> <a
href="/src/pages/nav/contact.html#form""><button class="float-
right">Adopt me!</button></a> 
<h1>My Story</h1> 
${info} </div> 
</section> <div class="ask-
share"> <div class="ask"> 
<a
href="/src/pages/nav/contact.html#form"> 
<h1>Ask About
${name}</h1> 
</a> </div> 
<div id="share-button" class="share"> 
<img src="/src/img/ui/share.png"
alt="Share"> </div> 
</div> <div class="pets-
container">  </div> 
`;
 // Get a reference to the main element let
mainElement = document.querySelector('main');
 // Add the generated HTML to the main element 
mainElement.innerHTML += html; });</field><field
name='Verso'>Este código JavaScript é usado para gerar dinamicamente uma
página web de adoção de animais a partir de dados obtidos de um arquivo XML.
Aqui está o que cada parte do código faz:
1. `let pathArray = window.location.pathname.split('/');`
 O código obtém o caminho atual da URL e divide-o em várias
partes com base no separador '/'. Ele armazena as partes resultantes no array
`pathArray`.
2. `let currentPetName = pathArray[pathArray.length - 1].replace('.html',
'');`
 Ele extrai o nome do animal de estimação da última parte do
caminho, removendo a extensão '.html'. Este nome será usado para encontrar as
informações corretas do animal de estimação no arquivo XML.
3. `fetch('/src/xml/pets/pets.xml').then(response =>
response.text()).then(data => {...});`
 Ele recupera o arquivo XML do servidor e o converte em texto. O
código dentro do bloco `.then(data => {...})` é executado uma vez que os
dados são recebidos e convertidos em texto.
4. `let parser = new DOMParser(); let xmlDoc = parser.parseFromString(data,
"text/xml");`
 Ele usa um DOMParser para transformar o texto XML em um
documento XML que pode ser manipulado.
5. O loop `for` percorre todos os elementos 'pet' no documento XML. Ele
verifica cada um para ver se o texto do elemento 'lname' corresponde ao
`currentPetName`. Se encontrar uma correspondência, ele armazena esse elemento
'pet' na variável `currentPet` e termina o loop.
6. Em seguida, ele extrai várias informações do elemento `currentPet` (como
nome, tipo, gênero, data de nascimento, idade, tamanho, localização e outras
informações) e as armazena em variáveis separadas.
7. O código então gera uma string HTML que contém todas essas informações no
formato desejado. A string HTML também contém várias imagens do animal de
estimação (cujo caminho é baseado no 'lname') e um botão para adotar o animal de
estimação.
8. `let mainElement = document.querySelector('main');`
 Ele seleciona o elemento 'main' na página HTML.
9. `mainElement.innerHTML += html;`
 Finalmente, ele adiciona a string HTML gerada ao 'innerHTML' do
elemento 'main', efetivamente adicionando todas as informações e imagens do
animal de estimação à página web.</field></card><card><field
name='Frente'><h1>share.js</h1>
document.addEventListener('click', function(event) { let
target = event.target; while (target != null) { 
if (target.classList.contains('share')) { 
var textToCopy = window.location.href; 
navigator.clipboard.writeText(textToCopy) 
.then(function() { 
alert("Link copied to clipboard!"); 
}) .catch(function(error)
{ console.error("Something went
wrong", error); }); 
break; } target =
target.parentElement; } 
}); </field><field name='Verso'>Este código JavaScript
está criando um ouvinte de eventos que responde quando ocorre um clique em algum
lugar do documento. Aqui está o que cada parte do código está fazendo:
1. `document.addEventListener('click', function(event) {...});`
 Esta linha está adicionando um ouvinte de evento de clique ao
documento inteiro. Sempre que um clique ocorrer em algum lugar do documento, a
função fornecida será chamada. Essa função recebe um objeto de evento como
argumento, que contém informações sobre o evento de clique.
2. `let target = event.target;`
 Aqui, estamos pegando o elemento exato que foi clicado.
èvent.target` é o elemento que disparou o evento, neste caso, o elemento que
foi clicado.
3. `while (target != null) {...}`
 Este é um loop que continuará a ser executado enquanto `target`
for diferente de `null`. Este loop é útil para verificar não apenas o elemento
que foi clicado diretamente, mas também seus elementos ancestrais (pai, avô,
etc.).
4. ìf (target.classList.contains('share')) {...}`
 Aqui, estamos verificando se o elemento clicado (ou um dos seus
ancestrais) tem a classe CSS 'share'. Se tiver, o código dentro do bloco ìf`
será executado.
5. `var textToCopy = window.location.href;`
 Se o elemento clicado tiver a classe 'share', esta linha pegará
a URL da página atual (usando `window.location.href`) e armazenará na variável
`textToCopy`.
6. `navigator.clipboard.writeText(textToCopy) {...}`
 Aqui, o código está tentando copiar o conteúdo de `textToCopy`
(que é a URL da página atual) para a área de transferência do usuário.
7. `.then(function() { alert("Link copied to clipboard!"); })`
 Se a cópia para a área de transferência for bem-sucedida, uma
caixa de alerta será exibida dizendo "Link copied to clipboard!".
8. `.catch(function(error) { console.error("Something went wrong",
error); });`
 Se houver um erro ao tentar copiar para a área de transferência,
a mensagem de erro será exibida no console do navegador.
9. `break;`
 Isso termina o loop `while`. É necessário porque, uma vez que o
texto foi copiado com sucesso para a área de transferência (ou um erro foi
encontrado), não há necessidade de continuar verificando os elementos
ancestrais.
10. `target = target.parentElement;`
 Se o elemento clicado (ou um de seus ancestrais) não tiver a
classe 'share', então a referência do `target` é atualizada para o elemento pai
do `target` atual. Isso significa que o loop `while` irá verificar o elemento
pai em seguida. Se o elemento pai também não tiver a classe 'share', então o seu
pai será verificado, e assim por diante, até que um elemento com a classe
'share' seja encontrado ou todos os elementos ancestrais tenham sido
verificados.</field></card><card><field name='Frente'><h1>pet.js</h1>
fetch('/src/xml/pets/pets.xml') .then(response =>
response.text()) .then(data => { // Now 'data' is
the XML file as a string let parser = new
"text/xml");
 // Get all the <pet> elements let pets =
xmlDoc.getElementsByTagName('pet');
 // For each <pet>, create the corresponding
HTML for (let pet of pets) { let lname
= pet.getElementsByTagName('lname')[0].textContent; let
name = pet.getElementsByTagName('name')[0].textContent; 
let type = pet.getElementsByTagName('type')[0].textContent; 
let location = pet.getElementsByTagName('location')
[0].textContent; let image = `/src/img/pets/$
{lname}1.png`; // Create the
HTML let html = ` <div
class="pet"> <div class="pet-
image"> <img src="$
{image}" /> </div> 
<div class="info-pet"> 
meet 
<h1><a href="/src/pages/pets/${lname}.html">$
{name}</a></h1> 
<h3>${type}</h3> 
<div class="location"> 
 location_on
 <h2>$
{location}</h2> 
</div> <div
class="learn"> 
<h4><a href="/src/pages/pets/${lname}.html">learn
more</a></h4> 
 
arrow_forward_ios 
 
</div> `; 
 // Add the HTML to your container 
document.querySelector('.pets-container').innerHTML +=
html; } });</field><field name='Verso'>Este
código JavaScript usa a API Fetch para buscar um arquivo XML localizado em
'/src/xml/pets/pets.xml'. A informação deste arquivo é então usada para criar
elementos HTML dinamicamente. Aqui está o que o código faz em detalhes:
1. `fetch('/src/xml/pets/pets.xml')`: Busca o arquivo XML localizado em
'/src/xml/pets/pets.xml'.
2. `.then(response => response.text())`: Transforma a resposta da fetch em
texto.
3. `.then(data => {...})`: Em seguida, lida com o texto como `data`.
Dentro deste bloco de código, o texto é tratado como um arquivo XML.
"text/xml");`: Cria um novo DOMParser e usa isso para transformar a string
`data` (que é o arquivo XML) em um objeto XML que o JavaScript pode
trabalhar.
5. `let pets = xmlDoc.getElementsByTagName('pet');`: Seleciona todos os
elementos 'pet' do arquivo XML e os coloca na variável `pets`.
6. Em seguida, para cada `pet` em `pets`, extrai as informações desejadas
(como `lname`, `name`, `type`, `location`) de cada elemento 'pet'. Usa essas
informações para criar uma URL para uma imagem e para criar um bloco de
HTML.
7. Este bloco de HTML é então anexado ao final do conteúdo do elemento com a
classe `.pets-container`.
Em resumo, o código está pegando um arquivo XML, lendo as informações dele, e
então usando essas informações para criar elementos HTML
dinamicamente.</field></card><card><field
name='Frente'><h1>adoptAnotherPet.js</h1>
 
fetch('/src/xml/pets/pets.xml') .then(response =>
response.text()) .then(data => { let parser = new
"text/xml");
 let pets =
Array.from(xmlDoc.getElementsByTagName('pet')); let
selectedPets = [];
 // Get the current pet from the URL let
pathArray = window.location.pathname.split('/'); let currentPet
= pathArray[pathArray.length - 1].replace('.html', '');
 // Filter out the current pet pets =
pets.filter(pet => pet.getElementsByTagName('lname')[0].textContent !==
currentPet);
 // Generate 4 random pets for(let i = 0; i
< 3; i++) { let randomIndex =
Math.floor(Math.random() * pets.length); 
selectedPets.push(pets[randomIndex]); 
pets.splice(randomIndex, 1); // remove selected pet from the pets
array }
 // Generate the HTML for each selected pet 
for(let pet of selectedPets) { let lname =
pet.getElementsByTagName('lname')[0].textContent; let
name = pet.getElementsByTagName('name')[0].textContent; 
let type = pet.getElementsByTagName('type')[0].textContent; 
let location = pet.getElementsByTagName('location')
[0].textContent; let image = `/src/img/pets/$
{lname}1.png`;
 let html = ` <div
class="pet"> <div class="pet-
image"> <img src="$
{image}" /> </div> 
<div class="info-pet"> 
meet 
<h1><a href="/src/pages/pets/${lname}.html">$
{name}</a></h1> 
<h3>${type}</h3> 
<div class="location"> 
 location_on
 <h2>$
{location}</h2> 
</div> <div
class="learn"> 
<h4><a href="/src/pages/pets/${lname}.html">learn
more</a></h4> 
 
arrow_forward_ios 
 
</div> `; 
 document.querySelector('.pets-
container').innerHTML += html; } 
});</field><field name='Verso'>Este código em JavaScript está buscando
dados de um arquivo XML, selecionando aleatoriamente 3 'pets' desses dados e
gerando HTML para exibir informações sobre cada 'pet'. Aqui está o que cada
parte do código está fazendo:
1. `fetch('/src/xml/pets/pets.xml')`
 Este comando está usando a função `fetch` para buscar o arquivo
XML dos pets localizado em '/src/xml/pets/pets.xml'.
2. `.then(response => response.text())`
 Após a obtenção bem sucedida do arquivo XML, este comando está
transformando a resposta em texto.
"text/xml");`
 Aqui, está sendo criado um novo objeto `DOMParser` e usado para
transformar a string de dados do XML em um documento XML que o JavaScript possa
manipular.
4. `let pets = Array.from(xmlDoc.getElementsByTagName('pet'));`
 Esta linha está criando uma lista de todos os elementos 'pet' no
documento XML.
5. `let selectedPets = [];`
 Este comando cria um array vazio chamado `selectedPets`, que
será usado para armazenar os 3 pets selecionados.
6. O bloco de código seguinte está obtendo o 'pet' atual da URL e removendo-o
da lista de pets, para que ele não seja selecionado novamente.
7. O próximo bloco de código está selecionando aleatoriamente 3 pets da lista
e os adicionando ao array `selectedPets`. Ele também remove o 'pet' selecionado
da lista de 'pets' para que não possa ser selecionado novamente.
8. Finalmente, o último bloco de código está gerando HTML para cada 'pet'
selecionado e adicionando esse HTML a um elemento com a classe 'pets-container'.
Para cada 'pet', ele cria um div com a imagem do 'pet', o nome, o tipo e a
localização. Ele também cria um link para a página do 'pet' e um botão "learn
more".</field></card><card><field name='Frente'><h1>pet-images.js</h1>
 document.body.addEventListener('click', function(e) { 
var smallImage = e.target; if
(smallImage.matches('.small')) { var bigImage =
document.getElementById('big'); 
bigImage.src = smallImage.src; 
document.querySelector('.active').classList.remove('active'); 
smallImage.classList.add('active'); 
} });</field><field name='Verso'>Este código JavaScript está a
utilizar a delegação de eventos para adicionar um ouvinte de eventos de clique
ao elemento `body` do documento HTML. É utilizado para uma funcionalidade
frequentemente vista em galerias de imagens onde, ao clicar numa miniatura, a
imagem grande actualmente exibida é alterada.
Aqui está uma decomposição do que o código faz:
1. Configura um ouvinte de eventos de clique em todo o corpo do documento:
`document.body.addEventListener('click', function(e) {...})`. Qualquer clique no
corpo do documento irá desencadear esta função.
2. Quando ocorre um evento de clique, o `target` do evento (o elemento que
foi realmente clicado) é guardado na variável `smallImage`.
3. Verifica se o elemento clicado (`smallImage`) tem a classe `small` com o
método `matches`. Se tiver, o código dentro da declaração ìf` é executado.
4. Dentro da declaração ìf`, encontra o elemento com o ID `big` e atribui-o
à variável `bigImage`.
5. Define o atributo `src` de `bigImage` para o atributo `src` de
`smallImage`. Isto faz com que a imagem grande mostre a mesma imagem que a
pequena que foi clicada.
6. Encontra o elemento com a classe àctive`, remove essa classe dele usando
`classList.remove`.
7. Finalmente, adiciona a classe àctive` à `smallImage` (a que foi clicada)
com `classList.add`.
Este comportamento sugere que a classe "active" pode ser usada para destacar
a miniatura que está a ser exibida como a imagem
grande.</field></card><card><field name='Frente'><h1>faq.js</h1>
document.getElementById('faq').addEventListener('click', function()
{ let resultDiv = document.getElementById('result'); 
 // If the resultDiv is not empty, clear it and
return if (resultDiv.innerHTML.trim() !== "") { 
resultDiv.innerHTML = ""; 
return; } // If the
resultDiv is empty, fetch the data and populate it 
fetch('/src/xml/faq/faq.xml') .then(response
=> response.text()) .then(data =>
{ let parser = new
DOMParser(); let xml =
parser.parseFromString(data, "application/xml"); 
 let faqis =
xml.getElementsByTagName('faqi'); 
let result = '';
 for(let i = 0; i < faqis.length;
i++) { let pergunta =
faqis[i].getElementsByTagName('pergunta')[0].textContent; 
let resposta =
faqis[i].getElementsByTagName('resposta')[0].textContent;
 result += `<dt
class="faq-item">Q.
${pergunta}</dt><dd>A. $
{resposta}</dd>`; }
 resultDiv.innerHTML = `<dl>$
{result}</dl>`;
 let questions =
resultDiv.getElementsByTagName('dt'); 
for (let i = 0; i < questions.length; i++) { 
questions[i].addEventListener('click',
function() { 
let answer = this.nextElementSibling; 
if (answer.style.display === 'none')
{ 
answer.style.display = 'block'; 
} else { 

answer.style.display = 'none'; 
} 
});
 setTimeout(function()
{ 
questions[i].style.opacity = '1'; 
}, i * 200); 
} }) 
.catch((error) => { 
console.error('Error:', error); 
}); });</field><field name='Verso'>Este código JavaScript é um exemplo
de como se pode implementar uma seção de Perguntas Frequentes (FAQ) em um site,
pegando perguntas e respostas de um arquivo XML e exibindo-as de forma dinâmica
no navegador. Vou detalhar cada parte:
1. `document.getElementById('faq').addEventListener('click', function()
{...}`
 Este é um ouvinte de evento que aciona a função anônima quando o
elemento com o ID 'faq' é clicado.
2. `let resultDiv = document.getElementById('result');`
 Aqui, está buscando o elemento com o ID 'result' e o armazenando
na variável `resultDiv`.
3. O bloco de código ìf...else...` verifica se `resultDiv` está vazio. Se
não estiver, o código limpa `resultDiv` e retorna; se estiver, ele segue para a
próxima parte do código.
4. `fetch('/src/xml/faq/faq.xml')` 
 Esta linha busca o arquivo `faq.xml` do servidor. O método
`fetch` retorna uma promessa que resolve para o objeto de resposta.
5. `.then(response => response.text())`
 Aqui, estamos convertendo a resposta obtida em texto.
6. `.then(data => {...}` 
 Este bloco de código é acionado após a conversão da resposta em
texto ser bem-sucedida. Aqui, o texto da resposta é analisado como um documento
XML e usado para criar elementos de perguntas e respostas.
7. `let parser = new DOMParser();`
 `let xml = parser.parseFromString(data, "application/xml");`
 Esta parte está criando um novo DOMParser e utilizando-o para
converter o texto XML em um objeto de documento XML.
8. O loop `for` seguinte percorre todos os elementos 'faqi' no documento XML.
Para cada 'faqi', extrai o texto das perguntas e respostas e os concatena em uma
string HTML.
9. Após o loop, a string HTML é usada para preencher o ìnnerHTML` de
`resultDiv`.
10. O próximo loop `for` adiciona um ouvinte de clique a cada pergunta.
Quando uma pergunta é clicada, a resposta correspondente é exibida ou
ocultada.
11. O `setTimeout` é utilizado para gradualmente aumentar a opacidade de cada
pergunta, dando um efeito de "fade-in".
12. `.catch((error) => { console.error('Error:', error); });`
 Esta é a parte de tratamento de erro da promessa. Se houver
algum erro ao buscar ou processar o arquivo XML, ele será registrado no
console.</field></card></cards></deck>

Codigo Tecnologias Internet

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Codigo Tecnologias Internet

Uploaded by

Copyright:

Available Formats

<deck name="Código TI"><fields><rich-text name='Frente' sides='11' ></rich-

text><rich-text name='Verso' sides='01'

You might also like