O documento discute conceitos como DOM, JavaScript, CSS, Ajax e JSON para modificar dinamicamente páginas HTML 5. Inclui explicações sobre como manipular e alterar elementos HTML, capturar eventos, estilos e carregar conteúdo sem recarregar a página usando Ajax. Também apresenta a sintaxe e uso de JSON para transporte de dados.

2. • Estudar e compreender os conceitos e inter-
relacionar as tecnologias:
– DOM
– JavaScript e CSS
– Ajax
– JSON

3. Modificando o HTML 5
Dinamicamente

4. • Document Object Model:
– Desenvolvida pela W3C nos anos 90.
– Especificação para manipular documentos: HTML
e XML.
• Acessar e criar novos elementos dentro de
documentos.
– Independente de linguagem:
• Qualquer linguagem pode implementar a API DOM.
• Conjunto de métodos e propriedades.

7. • Pode-se manipular o HTML:
– JavaScript com DOM:
– Métodos e Propriedades:
<header id=“cabeca”>
<img scr=“logo.jpg” />
<p>Site da Empresa...
</header>
var x =
document.getElementById(“cabeca”);
x.getElementsByTagName(“img”);

8. • Pode-se capturar eventos que acontecem no
documento com o DOM:
document.getElementById(“cabeca”).onclick = function()
{
alert(‘Você clicou em mim!’);
}

9. Alterando Estilos Dinamicamente

10. • Usa-se em conjunto com o DOM:
– Modificação da propriedade style do elemento.
– Alteração das propriedades CSS via JavaScript
var x = document.getElementById(“cabeca”);
x.style.background = ‘#CCC’;
x.style.color = ‘#000’;
}

11. Carregando Conteúdos
Dinamicamente

12. • Objeto do navegador:
– XmlHTTPResquest
• Permite carregar conteúdos de forma
assíncrona:
– Sem reload do documento.
– Com o conteúdo carregado, usa-se o DOM para
manipular o documento.
– As resposta do servidor podem ser em HTML,
XML, JSON ou String Simples.

13. function abreAjax() {
var obj_xml_http_resquest;
try {
obj_xml_http_resques = new XMLHttpRequest();
} catch(ee) {
try {
obj_xml_http_resques = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
obj_xml_http_resques = new
ActiveXObject("Microsoft.XMLHTTP");
} catch(E) {
obj_xml_http_resques = false;
}
}
}
return obj_xml_http_resques;
}

14. var ajax_obj = abreAjax();
ajax_obj.open('POST', 'categoria.php?ajax=true&cmd=cadastrar', true);
ajax_obj.setRequestHeader('Content-Type', 'application/x-www-form-
urlencoded');
ajax_obj.onreadystatechange = function ()
{
if(ajax_obj.readyState == 1)
{
// Carregando solicitação
}
if(ajax_obj.readyState == 4)
{
if(ajax_obj.status == 200)
{
// Solicitação concluída
}
}
};
ajax_obj.send(dataPost);

15. Transportando Dados entre Serviços

16. • JavaScript Object Notation:
– Desenvolvida por Douglas Crockford (1999).
– Não é uma tecnologia nova: RFC: 4687.
– É uma Estrutura de Dados em JavaScript:
• Especificamente: Notação de Objetos.
– Estes objetos podem ser armazenados em
arquivos:
• Extensão: .json
• Mime-Type: application/json

17. • Utilização Prática do JSON:
– WebServices, por exemplo: Google e Yahoo
• Seu uso não necessita do interpretador
JavaScript instalado:
– Linguagens como, por exemplo, PHP e Java tem
seus interpretadores JSON.
• Muito utilizado em detrimento do XML, mas
as duas tecnologias podem ser utilizadas
juntas.

18. • A sintaxe do JSON é simples: par:valor
• Pode-se validar a sintaxe em:
– http://jsonlint.com
• Onde par é uma propriedade do objeto, que seu
valor pode ser:
– String
– Number
– Object { // objeto vazio em Js }
– Array [‘João’, ‘Maria’, ‘Pedro’]
– Boleana (true ou false)
– Null

19. { “aluno" : [
{ "nome": "João", "notas": [ 8, 9, 7 ] },
{ "nome": "Maria", "notas": [ 8, 10, 7 ] },
{ "nome": "Pedro", "notas": [ 10, 10, 9 ] }
]
}
<?xml version='1.0' encoding='utf-8'?>
<aluno nome=“João”>
<provas>
<prova nota=“8” />
<prova nota=“9” />
<prova nota=“7” />
</provas>
</aluno>

20. • Trabalhando com JSON em JavaScript:
var dados_alunos = eval(json_alunos);
alert(dados_alunos.aluno[0].nome); // Exibe “João”
alert(dados_alunos.aluno[0].notas[0]); // Exite “8”
var json_alunos = {
“aluno" : [
{ "nome": "João", "notas": [ 8, 9, 7 ] },
{ "nome": "Maria", "notas": [ 8, 10, 7 ] },
{ "nome": "Pedro", "notas": [ 10, 10, 9 ] }
]
};

21. www.tiago.blog.br
tiago@tiago.blog.br