Curso JavaScript - Aula sobre DOM e Ajax

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

Modificando o HTML 5
Dinamicamente

• 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.

• 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”);

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

Alterando Estilos Dinamicamente

• 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’;
}

Carregando Conteúdos
Dinamicamente

• 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.

Transportando Dados entre Serviços

• 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

• 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.

• 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

{ “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” />
</provas>
</aluno>

• 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 ] }
]
};

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

Curso JavaScript - Aula sobre DOM e Ajax

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a Curso JavaScript - Aula sobre DOM e Ajax (20)

Mais de Tiago Antônio da Silva (20)

Último (7)

Curso JavaScript - Aula sobre DOM e Ajax