0
Desenvolvimento Web
                    com AJAX

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

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




Desenvolvimento Web com AJAX
Rennan...
Introdução
      O que é AJAX?
      Princípios
            O   navegador hospeda uma aplicação, e não
              co...
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>
                    <T...
Elementos HTML
      Cabeçalhos (H1, H2, H3, H4, etc).
      Quebra de Linha e Parágrafos (BR, P).
      Links (A).
   ...
CSS - Cascading Style Sheets
      O que é?
      Sintaxe básica
             p {       font-size: 12px; }

      Agrup...
JavaScript
         O que é?
         Sintaxe Básica
             <script>
                    alert(quot;Minha primeira...
XML - eXtensible Markup Language

      O que é?
      Objetivo




Desenvolvimento Web com AJAX
Rennan José – LBADIS (S...
XML – Sintaxe básica
             <doc>
                           <clientes>
                                  <nome>Pâme...
DOM - Document Object Model

      O que é?
      Objetivo




Desenvolvimento Web com AJAX
Rennan José – LBADIS (Santar...
Estrutura de uma página
             <table>
                <tr>
                  <td>Produto 1</td>
                  <...
Estrutura de uma página

                                                 Table

                                       tr...
DOM – Exemplo
  <html>
  <head>
  <title>DOM - Exemplo</title>
  <style>
     P {
       color:#009900;
     }
     .novo ...
DOM - Exemplo
  <script>
     var contador = 0;
     function adicionar() {
       contador++;
       var e = document.get...
DOM – Exemplo
  <body>
  <p> Exemplo de utilização da API DOM </p>
  <div id=quot;listaquot;></div>
  <a href=quot;JavaScr...
DOM - Propriedades
      childNodes;
      firstChild;
      lastChild;
      nodeValue;
      parentNode;
      nex...
DOM - Métodos
         getElementById;
         getElementsByTagName;
         hasChildNodes;
         createElement;
...
Upcoming SlideShare
Loading in...5
×

Desenvolvimento Web Com Ajax

1,607

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,607
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
38
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Desenvolvimento Web Com Ajax"

  1. 1. 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
  2. 2. Pauta do dia  Introdução  HTML  CSS  JavaScript  DOM Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)
  3. 3. 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)
  4. 4. Arquitetura Web Clássica Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)
  5. 5. Arquitetura Web com AJAX Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)
  6. 6. 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)
  7. 7. 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)
  8. 8. 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)
  9. 9. 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 Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)
  10. 10. XML - eXtensible Markup Language  O que é?  Objetivo Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)
  11. 11. 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)
  12. 12. DOM - Document Object Model  O que é?  Objetivo Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)
  13. 13. 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)
  14. 14. Estrutura de uma página Table tr tr td td td td Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)
  15. 15. 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)
  16. 16. 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> Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)
  17. 17. 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> Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)
  18. 18. DOM - Propriedades  childNodes;  firstChild;  lastChild;  nodeValue;  parentNode;  nextSibling;  previousSibing; Desenvolvimento Web com AJAX Rennan José – LBADIS (Santarém – PA)
  19. 19. 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)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×