1 tecnologia internet processamento no cliente html, dhtml e linguagens script prof.dr. antonio...
TRANSCRIPT
![Page 1: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/1.jpg)
1
Tecnologia Internet
Processamento no ClienteHTML, DHTML e
Linguagens Script
Prof.Dr. Antonio Geraldo da Rocha Vidal
FEA/USPEAD-5881 – Tecnologia de Informática
![Page 2: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/2.jpg)
2
Tecnologias Internet A World Wide Web
• Um caminho para acessar e compartilhar informações:– Documentos técnicos, materiais de marketing, receitas, ...
• Uma rede enorme de computadores: a Internet• Gráfica, não só textual• As informações são ligadas a outras informações• Plataforma para desenvolvimento de aplicativos:
– Faça compras a partir da sua casa– Forneça aplicativos a clientes e parceiros de negócio– ...
![Page 3: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/3.jpg)
3
Qual a diferença entre Internet e Web?
• Internet– Todos os computadores
conectados em rede TCP/IP– Todos os serviços disponíveis:
• e-mail• FTP• Newsgroups• Páginas Web• Etc.
• Web– Páginas de hipertexto
conectadas:• Hyperlinks• Textos• Imagens• Animações
– Aplicações• Sistemas de informação
![Page 4: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/4.jpg)
4
Como funciona a Web
• É um grande exemplo de um sistema Cliente/Servidor.• Tudo o que está na Web pode ser dividido em cliente e
servidor.• Um servidor Web responde às solicitações de um
cliente por páginas Web nele contidas.• Os servidores são localizados na rede por meio de uma
URL – Uniform Resource Locator, ou endereço Web.• Uma URL aponta para um servidor e para uma página
Web que está sendo solicitada.
![Page 5: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/5.jpg)
5
Tecnologias Internet Arquitetura WWW
Web Server
PC/Mac/Unix + BrowserCliente
Servidor
Request:http://www.msn.com/default.asp
Response:<html>…</html>
Rede TCP/IP
![Page 6: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/6.jpg)
6
Como Funciona a Web
• Todos os servidores da Web possuem um endereço IP (Internet Protocol) exclusivo, por meio do qual são identificados.
• Um endereço IP é formado por uma seqüência de 4 números de 0 a 255: 143.107.92.46.
• Porém, servidores especiais de DNS (Domain Name Service) fazem automaticamente a tradução entre a URL e o endereço IP.
![Page 7: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/7.jpg)
7
Como Funciona a Web• No servidor funciona um software aplicativo (web
server) que responde às solicitações de páginas Web.• No cliente funciona um software aplicativo (browser)
que solicita páginas Web e as apresenta ao usuário.• O HTTP (HyperText Transfer Protocol) é o protocolo
que permite que os servidores e clientes web se comuniquem e passem dados uns para os outros.
• Tipos básicos de mensagens HTTP:– HTTP GET: solicita dados do servidor– HTTP RESPONSE: envia dados para o cliente– HTTP POST: envia dados para o servidor
![Page 8: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/8.jpg)
8
Tecnologias Internet Arquitetura WWW
• Arquitetutra Cliente/Servidor e de Requisição/Resposta– Você requisita uma página Web
• e.g. http://www.fia.com.br/default.htm• HTTP request
– O servidor Web responde com dados na forma de uma página Web• HTTP response• A página web é expressa em HTML
– As páginas são identificadas com o Uniform Resource Locator (URL)• Protocolo: http• Servidor Web: www.fia.com.br• Página Web: default.htm• Pode fornecer também parâmetros: ? nome=MBA
![Page 9: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/9.jpg)
9
Tecnologias Internet Padrões Web
• Internet Engineering Task Force (IETF)– http://www.ietf.org/ – Fundado em 1986– Request For Comments (RFC) em http://www.ietf.org/rfc.html
• World Wide Web Consortium (W3C)– http://www.w3c.org – Fundado em 1994 por Tim Berners-Lee– Publica relatórios e recomendações técnicas
![Page 10: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/10.jpg)
10
Tecnologias Internet Web Design
• Interoperabilidade: linguagens Web e os protocolos devem ser compatíveis entre si e independentes de hardware e software.
• Evolução: a Web deve ser capaz de incorporar tecnologias futuras. Direciona para a simplicidade, modularidade e extensibilidade.
• Descentralização: facilita a escalabilidade e a robustez.
![Page 11: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/11.jpg)
11
Linguagem HTML
• Hypertext Markup Language (HTML) é a linguagem usada para criar e exibir páginas de hipertexto na Web.
• Utiliza um conjunto de marcadores (tags) para identificar as partes do documento ou página e definir como o conteúdo (texto ou imagem) aparecerá quando visto em um navegador (browser) Web.
![Page 12: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/12.jpg)
12
Exemplo de Página HTML<HTML><HEAD><TITLE>Exemplo de página HTML</TITLE></HEAD><BODY> <H1>Comércio Eletrônico na Internet!</H1> <P>Este é um documento HTML simples.</P></BODY></HTML>
![Page 13: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/13.jpg)
13
Páginas HTML
• As páginas Web podem ser ou estáticas ou dinâmicas (ativas).
• Páginas estáticas podem ter hyperlinks para outras páginas e arquivos, mas não atualizam dados no servidor e não são atualizadas pelas ações ou informações do usuário sobre o servidor.
• A maioria das páginas Web são estáticas.
![Page 14: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/14.jpg)
14
Páginas HTML
• Uma página dinâmica ou ativa fornece meios para o usuário interagir com o servidor Web, atualizando ou alterando dados no servidor.
• Uma página ativa pode conter também controles ativos (componentes) ou programas em linguagem de scripting, o que fornece à página capacidades de processamento de informações.
![Page 15: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/15.jpg)
15
Tecnologias InternetHypertext Transport Protocol (HTTP)
• O protocolo de alto nível usado para requisitar e retornar dados (páginas Web, imagens, documentos etc.)
• Protocolo de Requisição/Resposta (Request/Response)
• Métodos: GET, POST, HEAD• HTTP 1.0: simples • HTTP 1.1: mais complexo
![Page 16: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/16.jpg)
16
GET /default.asp HTTP/1.0Accept: image/gif, image/x-bitmap, image/jpeg, */*Accept-Language: enUser-Agent: Mozilla/1.22 (compatible; MSIE 2.0; Windows 95)Connection: Keep-AliveIf-Modified-Since: Sunday, 17-Apr-96 04:32:58 GMT
Tecnologias InternetHTTP Request
Método Arquivo HTTP versão Cabeçalhos
Dados – nenhum para GETLinha em branco
![Page 17: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/17.jpg)
17
HTTP/1.0 200 OKDate: Sun, 21 Apr 1996 02:20:42 GMTServer: Microsoft-Internet-Information-Server/5.0 Connection: keep-aliveContent-Type: text/htmlLast-Modified: Thu, 18 Apr 1996 17:39:05 GMTContent-Length: 2543 <HTML> Alguma informação... blá, blá, blá </HTML>
Tecnologias InternetHTTP Response
HTTP versão Status Frase de razão Cabeçalhos
Dados
![Page 18: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/18.jpg)
18
Tecnologias Internet HTTP
• HTTP é um protocolo sem dono.• Cada requisição HTTP é independente de
requisições prévias e subseqüentes.• HTTP 1.1 introduziu keep-alive para
aumentar eficiência em aplicações.
![Page 19: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/19.jpg)
19
Tecnologias Internet Pilha de Protocolos de Rede
HTTP
TCP
IP
Ethernet
HTTP
TCP
IP
Ethernet
![Page 20: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/20.jpg)
20
Tecnologias InternetCookies
• Um mecanismo para armazenar uma quantidade pequena de informações (até 4KB) no cliente
• Um cookie é associado a um web site específico• O cookie é enviado no cabeçalho do HTTP• O cookie é enviado com cada requisição do HTTP• Pode durar uma só sessão (até que o browser seja
fechado) ou pode persistir através de sessões• Pode expirar em algum tempo no futuro
![Page 21: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/21.jpg)
21
Tecnologias Internet Redes - Domain Name System (DNS)
• Fornece nomes de domínio amigáveis e fáceis de memorizar, p.ex. www.usp.br
• Estrutura hierárquica de nomes com um limitado conjunto de extensões:
• Servidores DNS mapeiam automaticamente nomes de domínios para endereços IP.
.com .net .gov .edu
.org .mil .jp .de
![Page 22: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/22.jpg)
22
Tecnologias InternetHTTPS
• Uma versão segura do HTTP • Permite o cliente e o servidor troquem dados
com a certeza de que os dados não possam ser modificados ou interceptados
• Usa Secure Sockets Layer (SSL)/Transport Layer Security (TLS)
![Page 23: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/23.jpg)
23
Ferramentas paraDesenvolvimento de páginas Web
• Editores para criação de conteúdo HTML• Editores gráficos• Geradores de animação• Ambientes/Linguagens de programação• Gerenciadores de banco de dados• Administradores de Web Sites• Servidores Web • Navegadores (browser)
![Page 24: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/24.jpg)
24
Tecnologias InternetBrowsers
• Aplicativo Cliente• Requisita páginas HTML do servidor Web e a processa
para apresentação ao usuário• Navegadores mais populares:
– Netscape– Internet Explorer– Opera– Eudora
• Também conhecido como um Agente do Usuário
![Page 25: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/25.jpg)
25
O Código das Páginas Web
• HTML: textos, gráficos estáticos e hyperlinks.• DHTML: textos, gráficos e hyperlinks dinâmicos e
interativos.• Automação através de linguagens script:
– Java Script (JavaScript) ou JScript (variação da Microsoft)– Visual Basic Script (VBScript)
• Automação através de componentes:– ActiveX– Java Applets
![Page 26: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/26.jpg)
26
Tags Básicas
• <HTML> • <HEAD> • <TITLE> • <BODY>
<HTML><HEAD><meta name="GENERATOR" content="Microsoft
FrontPage 4.0"><TITLE>ABC Company Home Page</TITLE></HEAD> <BODY><!-- Comentário: Esta seção contém as tags e o
texto que formam o corpo da página Web -->Hello, World!</BODY></HTML>
![Page 27: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/27.jpg)
27
Tags Básicas
Característica TAG Exemplo Cabeçalho <H1>...</H1> Quebra de linha <BR>Artigo de lista <LI>...</LI> Texto enfatizado <EM>...</EM> Imagem <IMG> Texto de Pré-formatado <PRE>...</PRE> Texto em Negrito <B>...</B> Parágrafo <P>
![Page 28: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/28.jpg)
28
Atributos das Tags
• Os atributos personalizam uma tag mudando o modo como cada elemento aparece.
• <FONT FACE="Arial" SIZE="2">text in 10pt Arial font.</FONT>
![Page 29: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/29.jpg)
29
Hyperlinks
• Para criar um hyperlink é utilizada a tag <A>, que funciona como uma âncora.
• <A HREF="Endereço_Destino">texto ou gráfico do hyperlink</A>
• Endereço_Destino é um URL para o hyperlink• Texto ou Gráfico do hyperlink é o que o
usuário clica para ir para o destino apontado.• <A HREF="fia.htm">FIA</A>
![Page 30: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/30.jpg)
30
Tipos Básicos de Hyperlinks
• URL• Documento não HTML• Marcador de páginas (bookmark)• E-mail
![Page 31: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/31.jpg)
31
Link Relativo vs. Link Absoluto
• Links relativos descrevem o destino relativamente à localização do documento a partir do qual o usuário está.<A HREF="../minha_pasta/Meu_Arquivo.htm">Texto do Link</A>
• Links absolutos fornecem um endereço completo para o hyperlink.
<A HREF="http://Servidor/Diretorio/Arquivo.htm">Texto do Link</A>
![Page 32: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/32.jpg)
32
Imagens
• Podem ser simplesmente inseridas e apresentadas em páginas Web.
<IMG SRC="file:///C|/figuras/Amostra.jpg" width="283" height="212" border="0">
• Podem ser também ser utilizadas como ferramentas de navegação.– Hotspots– Mapas de imagem
• No servidor• No cliente
<A HREF="/diretorio1/diretorio1/nome.map"><IMG SRC="/diretorio1/diretorio2/nome.gif" ISMAP></A>
![Page 33: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/33.jpg)
33
Tabelas
• Tabelas servem para muitos propósitos nas páginas HTML.
• Não só são usadas da maneira convencional para exibir informações em um formato tabular.
• Mas principalmente são usadas para fazer com que imagens, texto e controles apareçam exatamente na localização desejada na página.
![Page 34: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/34.jpg)
34
Tabelas
• Uma tabela é criada com a tag <TABLE> e </TABLE>.
Quaisquer atributos que se aplicam para a tabela como um todo são definidos na tag <TABLE>:
<TABLE ALIGN=LEFT BORDER=1 WIDTH=20%> </TABLE>
![Page 35: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/35.jpg)
35
Tabelas
• Cada linha na tabela é criada usando a tag <TR> e </TR>.
• Cada coluna é criada com a tag <TD> e </TD>. • Qualquer elemento de HTML pode ser
colocado dentro das tags <TD> e </TD>.
![Page 36: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/36.jpg)
36
Tabelas
Tabela de três linhas x três colunas<TABLE ALIGN=LEFT BORDER=1 LARGURA=20%><TR><TD>R1 C1</TD><TD>R1 C2</TD><TD>R1 C3</TD></TR><TR><TD>R2 C1</TD><TD>R2 C2</TD><TD>R2 C3</TD></TR><TR><TD>R3 C1</TD><TD>R3 C2</TD><TD>R3 C3</TD></TR></TABLE>
![Page 37: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/37.jpg)
37
Atributos de Tabelas
• Largura e Altura• Colunas e Linhas• Cabeçalhos• Bordas• Título• Agrupamento de colunas• Aninhamento de Tabelas (tabelas intercaladas)
![Page 38: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/38.jpg)
38
Frames
• Uma página com frames divide janela de um navegador em seções ou quadros conhecidos como frames.
• Cada frame exibe uma página Web separada. • O uso de frames permite criar efeitos visuais
interessantes em uma página Web.• As páginas web que usam frames possuem dois
elementos principais: – O arquivo HTML que define o conjunto de frames– Os arquivos de HTML com o conteúdo de cada frame
![Page 39: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/39.jpg)
39
Sugestões para o Uso de Frames
• Utilize frames para exibir informações que devam permanecer estáticas em uma área da página enquanto nas outras áreas as informações mudam.
• Utilize frames sem bordas sempre que possível.• Forneça bastante espaço em branco nas páginas que
exibem as frames.
![Page 40: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/40.jpg)
40
Tags para Frames
• O par <FRAMESET> e </FRAMESET> define várias frames.– Atributo ROWS (linhas - horizontal)– Atributo COLS (colunas - vertical)
• O par <FRAME> e </FRAME> define uma única frame.
![Page 41: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/41.jpg)
41
Formulários
• Fornecem um mecanismo através do qual usuários do seu Web Site podem se comunicar com o servidor Web.
• Um formulário contém tipicamente:– Vários campos de formulário.– Botões Submeter (Submit)
e Limpar (Reset).
![Page 42: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/42.jpg)
42
FormuláriosExemplo
<FORM ACTION="/scripts/meuexemplo.asp" METHOD=POST>Nome de E-mail: <INPUT TYPE=TEXT NAME="txt" VALUE="Meu Nome"><P>Confira tudo que se aplica:<INPUT TYPE=CHECKBOX NAME="chkUsoProfissional">Uso Profissional<INPUT TYPE=CHECKBOX NAME="chkUsoDomestico">Uso Doméstico<P><INPUT TYPE=SUBMIT VALUE="Submeter"><INPUT TYPE=RESET VALUE="Limpar">
</FORM>
![Page 43: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/43.jpg)
43
Atributos da Tag <FORM>
• ACTION– Define a rotina para manipulação do formulário.
• METHOD– GET: formulário para ler dados.– POST: formulário para gravar dados.
• TARGET:– Define o frame no qual a resposta do formulário
será apresentada.
![Page 44: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/44.jpg)
44
Controles de Formulários<INPUT TYPE=tipo_controle NAME=nome_controle
VALOR=valor_controle>
• Caixas de Texto• Áreas de Texto• Botões• Menu em Cascata• Botão de Rádio• Caixa de Verificação
(Check Box)• Controle Escondido
(armazenador de dados temporário)
![Page 45: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/45.jpg)
45
Caixas de Texto
• Existem dois tipos de caixas de texto que podem ser criadas com tags HTML diferentes.
<INPUT TYPE=TEXT NAME=txtUserName VALUE="[email protected]">
<TEXTAREA ROWS="2" NAME="txtComments">Algum texto na caixa
</TEXTAREA>
![Page 46: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/46.jpg)
46
Botões
• Existem três tipos de botões: Normais, Limpar e Submeter. Para inserir estes controles, você usa a tag <INPUT> e configura o atributo TYPE. O atributo VALUE é o texto exibido na face do botão.
<INPUT TYPE=BUTTON NAME=btnClickMe VALUE="Me clique">
<INPUT TYPE=RESET VALUE="Limpar">
![Page 47: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/47.jpg)
47
Menu
• Para adicionar um menu em cascata em um formulário, use as tags <SELECT> e </SELECT>.
• Para adicionar itens para as opções do menu, use a tag <OPTION>.
• Para fazer um dos itens aparecer quando um usuário acessar o menu na página Web, adicione o atributo SELECTED para a tag <OPTION> da opção padrão.
<SELECT NAME=lstPreferencia><OPTION SELECTED VALUE="1">Correio<OPTION VALUE="2">Fax<OPTION VALUE="3">On-line</SELECT>
![Page 48: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/48.jpg)
48
Botão de Rádio
• Para adicionar um botão de rádio em um formulário, utilize a tag <INPUT> e configure o atributo TYPE para RADIO. Use uma tag <INPUT> separada para cada botão de rádio a ser inserido no formulário.
• Para criar um grupo de botões de rádio, designe o mesmo atributo NAME para todos os botões de rádio.
<INPUT TYPE=RADIO CHECKED NAME=optQuestao VALUE="Sim">Sim
<INPUT TYPE=RADIO NAME=optQuestao VALUE="Não">Não<INPUT TYPE=RADIO NAME=optQuestao
VALUE="Talvez">Talvez
![Page 49: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/49.jpg)
49
Caixa de Verificação
• Para adicionar uma caixa de verificação em um formulário, use a tag <INPUT> e configure o atributo de TYPE para CHECKBOX.
• Para fazer a caixa de verificação aparecer selecionada, adicione o atributo CHEKED para a tag <INPUT>.
• Para adicionar um texto descritivo, inclua o texto depois da tag <INPUT>.
<INPUT TYPE=CHECKBOX NAME=chkUsoProfissional VALUE="Profissional" CHEKED>Uso Profissional
<INPUT TYPE=CHECKBOX NAME=chkUsoPessoal VALUE="Pessoal">Uso Pessoal
![Page 50: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/50.jpg)
50
Controle Escondido
• Para adicionar um controle escondido em um formulário, use a tag <INPUT> e configure o atributo de TYPE para HIDDEN.
• Configure o atributo VALUE para o texto que você deseja que seja enviado com o controle escondido.
<INPUT TYPE=HIDDEN NAME=hdnNameVALUE="Informações você não quer que o usuário veja">
![Page 51: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/51.jpg)
51
Ordem de Tabulação
• Para definir a ordem de tabulação dos controles do formulário, configure o atributo TABINDEX de cada controle.
• Designe "1" para o controle que estará selecionado o usuário abrir a página; designe "2" para o próximo controle que receberá o foco quando o usuário apertar a tecla de tabulação, e assim por diante.
<INPUT TYPE=TEXT NAME=txtName TABINDEX=2>
![Page 52: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/52.jpg)
52
Páginas Ativas no ClienteProgramação com Linguagens Script
JavaScript, VBScript e DHTML
Tecnologia Internet
![Page 53: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/53.jpg)
53
Programação com Linguagens Script
• O desenvolvimento de scripts é baseado no modelo de programação orientada para objetos (que veremos mais adiante).
• A programação orientada para objetos permite escrever códigos associados a objetos específicos em de um aplicativo.
• Um objeto é uma combinação de operações e dados que podem ser tratados como uma unidade.
• Um objeto pode ser um pedaço de uma página de aplicativo Web ou uma página inteira.
![Page 54: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/54.jpg)
54
Programação para a WebBaseada em Objetos do DHTML
• O DHTML Document Object Model (DOM)window
history document location screen
all location children selectionforms body links
text buttonradio textarea select
password
file
checkbox submit
resetoption
navigator framesevent
![Page 55: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/55.jpg)
55
Programação com Linguagens Script
• A programação no cliente através de linguagens script desempenha um papel importante na criação de páginas Web com conteúdo ativo.
• Usando uma linguagem script, pode-se criar páginas Web ativas e dinâmicas que fornecem respostas para perguntas e questões do usuário:– Validam dados do usuário.– Calculam expressões.– Forneçam Links para outros aplicativos.– Manipulem controles embutidos: ActiveX e Java Applets.– Acessam bancos de dados.
![Page 56: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/56.jpg)
56
Programação para a WebCódigo no Cliente
• O que é código no cliente (client-side code)?– O software que é descarregado do servidor Web para o
browser e então executado no cliente.• Por que código no cliente?
– Melhor escalabilidade: menos trabalho feito no servidor– Melhor desempenho/atendimento ao usuário– Criar elementos de interface em HTML
• Menus drop-down e pull-out• Diálogos paginados
– Efeitos especiais, p.ex. animação– Validação de dados
![Page 57: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/57.jpg)
57
Cliente x Servidor
• Pode-se escrever scripts que são executados no cliente (navegador) ou no servidor Web.
• Dependendo das necessidades do Web Site, pode-se usar scripts no cliente, no servidor ou em ambos.
• Existem atualmente duas linguagens de scripts suportadas pelos principais navegadores:– JavaScript ou JScript (versão Microsoft). – VBScript (Visual Basic Scripting Edition)
![Page 58: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/58.jpg)
58
Scripts no Servidor
• Quando há scripts no servidor, suas instruções (código-fonte) são executados pelo próprio servidor Web antes da página ser retornada ao usuário.
• Um script no servidor cria uma página HTML normal de retorno, portanto, o usuário nunca vê o código-fonte do script executado no servidor.
• Para usar scripts no servidor, seu servidor Web precisa suportar páginas de servidor ativas (Active Server Pages ou ASP, JSP, PHP ou Perl), conforme veremos mais adiante.
![Page 59: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/59.jpg)
59
VBScript
• O Visual Basic Scripting Edition é um subconjunto da linguagem Microsoft Visual Basic para Aplicativos.
• O VBScript é suportado apenas pelo navegador Microsoft Internet Explorer versão 3.0 ou posteriores.
![Page 60: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/60.jpg)
60
JavaScript
• O JavaScript é um a linguagem C-like, baseada em Java.
• Desenvolvida pela Sun Microsystems Inc. e pela NetScape Communication Corporation.
• JavaScript é suportada pelo NetScape Navigator versão 2.0 ou posterior e pelo Microsoft Internet Explorer versão 3.0 ou posterior.
![Page 61: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/61.jpg)
61
JScript
• É uma variação de JavaScript desenvolvida pela Microsoft.
• É suportada pelo navegador Microsoft Internet Explorer versão 4.0 ou superior.
• Possui mais recursos e um modelo de objetos um pouco diferente de JavaScript padronizada pela Sun e NetScape.
![Page 62: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/62.jpg)
62
A Tag <SCRIPT>
• Qualquer código de script sempre deve estar contido dentro das tags <SCRIPT> e </SCRIPT>.
• O atributo LANGUAGE diz ao navegador que interpretador de scripts deve ser utilizado quando o código for executado: JavaScript, JScript ou VBScript.
![Page 63: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/63.jpg)
63
Usando VBScript<SCRIPT LANGUAGE="VBScript"><!--Sub btnHello_OnClick() MsgBox "Oi, mundo!"End Sub--></SCRIPT><INPUT TYPE=BUTTOM NAME=btnHello VALUE=“Clique Me">
![Page 64: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/64.jpg)
64
Usando JavaScript <SCRIPT LANGUAGE=JavaScript>var iD function getid () {id = prompt ("Enter seu número de identificação");
}</SCRIPT> <INPUT TYPE=buttom NAME=cmdTest OnClick="getid();">
![Page 65: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/65.jpg)
65
Executando Scripts
• A localização de um script dentro da seção <SCRIPT> de uma página Web determina quando o script deve ser executado. Em geral, você pode adicionar scripts nas seguintes áreas:– Nas linhas de código– Procedimentos ou funções– Procedimento ou funções associados a eventos
![Page 66: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/66.jpg)
66
Componentes Ativos
• Java Applets – tag <APPLET>– São programas pequenos, reutilizáveis que expõem
uma interface padrão e são executados em um recipiente como um navegador Web.
• Controles ActiveX – tag <OBJECT>– São objetos ou componentes (.dll ou .ocx) que você
pode inserir em uma página Web ou outras aplicações que podem se tornar recipientes ActiveX.
![Page 67: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/67.jpg)
67
Controles ActiveX
![Page 68: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/68.jpg)
68
Controles ActiveX
![Page 69: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/69.jpg)
69
Java Applets
• Quando arquivos-fonte em Java (.java) são compilados, o compilador Java cria arquivos Java bytecode (.class).
• Quando estes arquivos de classe são carregados para o computador de um usuário, eles são localmente interpretados pela Máquina Virtual de Java Virtual (JVM - Java Virtual Machine).
• Você pode instalar o JVM como parte de um navegador Web, ou carrega-lo da Internet.
![Page 70: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/70.jpg)
70
Java Applets
![Page 71: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/71.jpg)
71
Controles ActiveX vs. Java Applets
• Ao usar controles ActiveX, você deve considerar os seguintes aspectos:– Maior desempenho – Familiaridade para o desenvolvedor– Disponibilidade – Suporte do navegador – Plataforma específica – Menor segurança
![Page 72: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/72.jpg)
72
Controles ActiveX vs. Java Applets
• Ao utilizar Java Applets, você deve considerar os seguintes aspectos:– Desempenho – Tamanho reduzido – Independência de navegador – Independência de plataforma – Maior segurança
![Page 73: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/73.jpg)
73
HTML Dinâmico - DHTML
• É um novo conjunto de recursos, baseados em um modelo de objetos, suportado pelos modernos navegadores (a partir do Internet Explorer 4.0 e NetScape 4.7), que permite a criação de páginas Web altamente interativas e intuitivas, incluindo:– Gráficos e textos animados. – Tratar conjuntos de elementos da página como um grupo.– Fazer aparecer ou substituir textos a partir de ações do
usuário.– Chamar métodos em controles ActiveX e Java Applets.– Adicionar transições entre as páginas e obter diversos efeitos
visuais.
![Page 74: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/74.jpg)
74
HTML Dinâmico
• O HTML Dinâmico alcança seus efeitos modificando o conteúdo do documento original, re-formatando automaticamente e reapresentando o documento para mostrar estas mudanças.
• Não é necessário recarregar o documento, carregar um novo documento, ou depender do servidor Web para gerar um novo conteúdo.
• O HTML Dinâmico calcula e executa as mudanças no computador do usuário utilizando os recursos disponíveis nas novas versões dos navegadores modernos.
![Page 75: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/75.jpg)
75
Programação para a WebDHTML
• O DHTML Document Object Model (DOM)window
history document location screen
all location children selectionforms body links
text buttonradio textarea select
password
file
checkbox submit
resetoption
navigator framesevent
![Page 76: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/76.jpg)
76
Modelo de Objetosdo HTML Dinâmico
• Os elementos dinâmicos são tags HTML que o modelo de objetos do HTML Dinâmico define e utiliza.
• Usando essas tags, você pode acessar e manipular todos elementos HTML em um documento.
• Os elementos estão disponíveis como objetos individuais, portanto é possível examinar e modificar um elemento e seus atributos, lendo e modificando suas propriedades, além de chamar seus métodos.
• Você pode manipular ou até mudar o texto dentro de um elemento através das propriedades e métodos que podem ser configuradas para os elementos.
![Page 77: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/77.jpg)
77
DHTML
• O exemplo a seguir, em VBScript, torna uma porção definida de texto verde, quando o evento que invoca o procedimento changeMe for disparado:
<script language="VBScript">Sub ChangeMe()
window.document.body.style.color = "green"End Sub
</script>
<body onclick="ChangeMe">
![Page 78: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/78.jpg)
78
Identificando Objetos
• Existem muitos meios para acessar elementos em um documento.
• Você pode selecionar cabeçalhos, parágrafos, divisões e outros elementos de um documento para controlar efeitos dinâmicos.
• O caminho mais fácil para controlar elementos em um documento é designar um identificador (ID) para cada elemento.
<H3 ID="MyHeading">HTML Dinâmico!</H3>
![Page 79: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/79.jpg)
79
Manipulando Objetos
• Você pode se referir a um objeto usando o seu identificador ou ID que você previamente designou.
• Você pode acessar todos os elementos em um documento através de uma coleção de objetos.
• O código exemplificado a seguir muda a cor do elemento para verde:
window.document.all.MyHeading.style.color = "green"
![Page 80: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/80.jpg)
80
Principais Objetos DHTMLTag Objeto Descrição
<A> A Designa o começo ou destino de um hyperlink. O elemento de âncora exige que você especifique o HREF.
<IMG> IMG Embute uma imagem ou um clipe de vídeo no documento.
<BODY> BODY Especifica o início e fim do corpo de um documento.
<P> P Denota um parágrafo.
<H1>, <H2>, etc.
H1, H2, etc.
Formata texto como um estilo de cabeçalho.
![Page 81: 1 Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP EAD-5881 – Tecnologia de](https://reader036.vdocuments.site/reader036/viewer/2022062818/5706384f1a28abb8238f7fd5/html5/thumbnails/81.jpg)
81
Principais Eventos do DHTML
Evento Açãoonclick Pressionar e largar o botão do mouse, ou pressionar
teclas ENTER e ESC, em um formulário.ondblclick Clicar duas vezes um objeto.ondragstart Começar a arrastar uma seleção ou selecionar um
elemento.onmousedown Pressionar um botão em um dispositivo de
apontamento, como o mouse.onmousemove Mover o mouse.onmouseout Mover o mouse para fora de um elemento.onmouseover Mover o apontador do mouse para um elemento.onmouseup Soltar o botão de mouse.