Aplicativo XML

Aplicativo XML

Este capítulo demonstra alguns pequenos aplicativos XML construídos em XML, HTML, XML DOM e JavaScript.

Exemplo de documento XML

Nesta aplicação, utilizaremos o arquivo “cd_catalog.xml”.

Mostrar o primeiro CD no elemento HTML div

O exemplo a seguir obtém os dados XML do primeiro elemento CD e depois exibe os dados no elemento HTML com id="showCD". A função displayCD() é chamada quando a página é carregada:

Exemplo

 x=xmlDoc.getElementsByTagName("CD");
eu=0;

função displayCD()
{
artista=(x[i].getElementsByTagName("ARTISTA")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TÍTULO")[0].childNodes[0].nodeValue);
ano=(x[i].getElementsByTagName("ANO")[0].childNodes[0].nodeValue);
txt="Artista: " + artista + "<br />Título: " + título + "<br />Ano: "+ ano;
document.getElementById("showCD").innerHTML=txt;
}

Experimente »

Adicionar script de navegação

Para adicionar navegação (funcionalidade) ao exemplo acima, duas funções precisam ser criadas: next() e previous():

Exemplo

 função próxima()
{ // exibe o próximo CD, a menos que você esteja no último CD
se (i<x.comprimento-1)
{
eu++;
displayCD();
}
}

função anterior()
{ // exibe o CD anterior, a menos que você esteja no primeiro CD
se (eu>0)
{
eu--;
displayCD();
}
}

Experimente »

Exibir informações do álbum ao clicar no CD

O exemplo final mostra como exibir informações do álbum quando o usuário clica em um item do CD:

Experimente.

Para saber mais sobre como usar JavaScript e XML DOM, visite nosso tutorial XML DOM.