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émwww.lbasantarem.com.br/semanadeinformatica

Pauta do dia

Introdução HTML CSS JavaScript DOM

Desenvolvimento Web com AJAXRennan 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

Agrupamento de Seletores Seletor Classe Seletor Id Comentários

p { font-size: 12px; }


JavaScript

O que é? Sintaxe Básica

Variáveis Condicionais (if, else) Loops (for, while e do while) Array

<script>alert("Minha primeira mensagem!")

</script>


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("lista");var no = document.createElement("DIV");var t = document.createTextNode("Item " + contador + "

da lista");e.appendChild(no);no.appendChild(t);no.className = "novo";

}</script></head>


DOM – Exemplo<body><p> Exemplo de utilização da API DOM </p><div id="lista"></div><a href="JavaScript: adicionar();">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

Technology