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 Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)

Arquitetura Web Clássica Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)

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

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> Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)

Elementos HTML  Cabeçalhos (H1, H2, H3, H4, etc).  Quebra de Linha e Parágrafos (BR, P).  Links (A).  Tabelas (TABLE).  Atributos das Tags. Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)

CSS - Cascading Style Sheets  O que é?  Sintaxe básica p { font-size: 12px; }  Agrupamento de Seletores  Seletor Classe  Seletor Id  Comentários Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)

JavaScript  O que é?  Sintaxe Básica <script> alert(\"Minha primeira mensagem!\") </script>  Variáveis  Condicionais (if, else)  Loops (for, while e do while)  Array Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)

XML - eXtensible Markup Language  O que é?  Objetivo Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)

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> Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)

DOM - Document Object Model  O que é?  Objetivo Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)

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> Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)

Estrutura de uma página Table tr tr td td td td Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)

DOM – Exemplo <html> <head> <title>DOM - Exemplo</title> <style> P { color:#009900; } .novo { background-color:#FFFF00; color:#000000; font-weight:bold; } </style> Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)

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> Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)

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> Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)

DOM - Propriedades  childNodes;  firstChild;  lastChild;  nodeValue;  parentNode;  nextSibling;  previousSibing; Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)

DOM - Métodos  getElementById;  getElementsByTagName;  hasChildNodes;  createElement;  createTextNode;  appendChild;  removeChild;  replaceChild;  insertBefore;  getAttribute;  setAttribute;  removeAttribute; Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)

Desenvolvimento Web Com Ajax

0 comments

Notes on slide 1

Favorites, Groups & Events