Desenvolvimento Web Com Ajax

Desenvolvimento Web
com AJAX

Rennan José – LBADIS (Santarém-PA)

Santarém, 04 de dezembro de 2006.

III Semana de Informática e I Semana de Geotecnologias em Santarém
www.lbasantarem.com.br/semanadeinformatica

Pauta do dia
 Introdução
 HTML
 CSS
 JavaScript
 DOM

Desenvolvimento Web com AJAX
Rennan José – LBADIS (Santarém – PA)

Introdução
 O que é AJAX?
 Princípios
O navegador hospeda uma aplicação, e não
conteúdo
 O servidor fornece dados, e não conteúdo
 A interação do usuário com a aplicação pode ser
flexível e contínua
 Real codificação requer disciplina


Arquitetura Web Clássica


Arquitetura Web com AJAX


HTML – HiperText Markup Language
 Documento Básico
<HTML>
<HEAD>
<TITLE>Titulo do Documento</TITLE>
<STYLE> folha de estilos </STYLE>
<SCRIPT LANGUAGE=”JAVASCRIPT></SCRIPT>
</HEAD>
<BODY>
texto,
imagem,
links,
...
</BODY>
</HTML>


Elementos HTML
 Cabeçalhos (H1, H2, H3, H4, etc).
 Quebra de Linha e Parágrafos (BR, P).
 Links (A).
 Tabelas (TABLE).
 Atributos das Tags.


CSS - Cascading Style Sheets
 O que é?
 Sintaxe básica
p { font-size: 12px; }

 Agrupamento de Seletores
 Seletor Classe
 Seletor Id
 Comentários


JavaScript
 O que é?
 Sintaxe Básica
<script>
alert(quot;Minha primeira mensagem!quot;)
</script>
 Variáveis
 Condicionais (if, else)
 Loops (for, while e do while)
 Array


XML - eXtensible Markup Language

 O que é?
 Objetivo


XML – Sintaxe básica
<doc>
<clientes>
<nome>Pâmela Pereira</nome>
<telefone>(11) 5555-1234</telefone>
<idade>2</idade>
</clientes>
<clientes>
<nome>Giovana T. O. Pereira</nome>
<telefone>(11) 5555-6789</telefone>
<idade>25</idade>
</clientes>
</doc>


DOM - Document Object Model

 O que é?
 Objetivo


Estrutura de uma página
<table>
<tr>
<td>Produto 1</td>
<td>Coca-cola</td>
</tr>
<tr>
<td>Produto 2</td>
<td>Maquina Fotográfica</td>
</tr>
</table>


Estrutura de uma página

Table

tr tr

td td td td


DOM – Exemplo
<html>
<head>
<title>DOM - Exemplo</title>
<style>
P {
color:#009900;
}
.novo {
background-color:#FFFF00;
color:#000000;
font-weight:bold;
}
</style>


DOM - Exemplo
<script>
var contador = 0;
function adicionar() {
contador++;
var e = document.getElementById(quot;listaquot;);
var no = document.createElement(quot;DIVquot;);
var t = document.createTextNode(quot;Item quot; + contador + quot; da
listaquot;);
e.appendChild(no);
no.appendChild(t);
no.className = quot;novoquot;;
}
</script>
</head>


DOM – Exemplo
<body>
<p> Exemplo de utilização da API DOM </p>
<div id=quot;listaquot;></div>
<a href=quot;JavaScript: adicionar();quot;>Incluir novo Elemento</a>
</body>
</html>


DOM - Propriedades
 childNodes;
 firstChild;
 lastChild;
 nodeValue;
 parentNode;
 nextSibling;
 previousSibing;


DOM - Métodos
 getElementById;
 getElementsByTagName;
 hasChildNodes;
 createElement;
 createTextNode;
 appendChild;
 removeChild;
 replaceChild;
 insertBefore;
 getAttribute;
 setAttribute;
 removeAttribute;


Desenvolvimento Web Com Ajax

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Desenvolvimento Web Com Ajax

Semelhante a Desenvolvimento Web Com Ajax (20)

Mais de elliando dias

Mais de elliando dias (20)

Desenvolvimento Web Com Ajax