Tecnologia Internet - Erudito FEA-USP

Propaganda

FEA/USP
EAD-5881 – Tecnologia de Informática
Tecnologia Internet
Processamento no Cliente
HTML, DHTML e
Linguagens Script
Prof.Dr. Antonio Geraldo da Rocha Vidal
1
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
– ...
2
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
3
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.
4
Tecnologias Internet
Arquitetura WWW
PC/Mac/Unix
+ Browser
Cliente
Request:
http://www.msn.com/default.asp
Rede
TCP/IP
Response:
<html>…</html>
Servidor
Web Server
5
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.
6
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
7
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
8
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
9
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.
10
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.
11
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>
12
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.
13
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.
14
Tecnologias Internet
Hypertext 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
15
Tecnologias Internet
HTTP Request
Método
Arquivo
HTTP versão
Cabeçalhos
GET /default.asp HTTP/1.0
Accept: image/gif, image/x-bitmap, image/jpeg, */*
Accept-Language: en
User-Agent: Mozilla/1.22 (compatible; MSIE 2.0; Windows 95)
Connection: Keep-Alive
If-Modified-Since: Sunday, 17-Apr-96 04:32:58 GMT
Linha em branco
Dados – nenhum para GET
16
Tecnologias Internet
HTTP Response
HTTP versão
Status
Frase de razão
Cabeçalhos
HTTP/1.0 200 OK
Date: Sun, 21 Apr 1996 02:20:42 GMT
Server: Microsoft-Internet-Information-Server/5.0
Connection: keep-alive
Content-Type: text/html
Last-Modified: Thu, 18 Apr 1996 17:39:05 GMT
Content-Length: 2543
Dados
<HTML> Alguma informação... blá, blá, blá </HTML>
17
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.
18
Tecnologias Internet
Pilha de Protocolos de Rede
HTTP
HTTP
TCP
TCP
IP
IP
Ethernet
Ethernet
19
Tecnologias Internet
Cookies
• 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
20
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:




.com
.net
.gov
.edu




.org
.mil
.jp
.de
• Servidores DNS mapeiam automaticamente nomes de
domínios para endereços IP.
21
Tecnologias Internet
HTTPS
• 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)
22
Ferramentas para
Desenvolvimento 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)
23
Tecnologias Internet
Browsers
• 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
24
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
25
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>

Hello, World!
</BODY>
</HTML>
26
Tags Básicas
Característica
Cabeçalho
Quebra de linha
Artigo de lista
Texto enfatizado
Imagem
Texto de Pré-formatado
Texto em Negrito
Parágrafo
TAG Exemplo
<H1>...</H1>
<BR>
<LI>...</LI>
<EM>...</EM>
<IMG>
<PRE>...</PRE>
<B>...</B>
<P>
27
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>
28
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>
29
Tipos Básicos de Hyperlinks
•
•
•
•
URL
Documento não HTML
Marcador de páginas (bookmark)
E-mail
30
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>
31
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>
32
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.
33
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>
34
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>.
35
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>
36
Atributos de Tabelas
•
•
•
•
•
•
•
Largura e Altura
Colunas e Linhas
Cabeçalhos
Bordas
Título
Agrupamento de colunas
Aninhamento de Tabelas (tabelas intercaladas)
37
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
38
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.
39
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.
40
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).
41
Formulários
Exemplo
<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>
42
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.
43
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)
44
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>
45
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">
46
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>
47
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
48
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
49
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=hdnName
VALUE="Informações você não quer que o
usuário veja">
50
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>
51
Tecnologia Internet
Páginas Ativas no Cliente
Programação com Linguagens Script
JavaScript, VBScript e DHTML
52
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.
53
Programação para a Web
Baseada em Objetos do DHTML
• O DHTML Document Object Model (DOM)
window
event
navigator
history
document
location
screen
frames
all
location
children
forms
selection
body
links
radio
button
text
password
file
checkbox
submit
textarea
select
option
reset
54
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.
55
Programação para a Web
Có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
56
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)
57
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.
58
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.
59
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.
60
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.
61
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.
62
Usando VBScript
<SCRIPT LANGUAGE="VBScript">
<!-Sub btnHello_OnClick()
MsgBox "Oi, mundo!"
End Sub
-->
</SCRIPT>
<INPUT TYPE=BUTTOM NAME=btnHello
VALUE=“Clique Me">
63
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();">
64
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
65
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.
66
Controles ActiveX
67
Controles ActiveX
68
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.
69
Java Applets
70
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
71
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
72
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
73
visuais.
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.
74
Programação para a Web
DHTML
• O DHTML Document Object Model (DOM)
window
event
navigator
history
document
location
screen
frames
all
location
children
forms
selection
body
links
radio
button
text
password
file
checkbox
submit
textarea
select
option
reset
75
Modelo de Objetos
do 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.
76
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">
77
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>
78
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"
79
Principais Objetos DHTML
Tag
Objeto
Descrição
<A>
A
Designa o começo ou destino de um
hyperlink. O elemento de âncora exige que
você especifique o HREF.
Embute uma imagem ou um clipe de vídeo
no documento.
<IMG>
IMG
<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.
80
Principais Eventos do DHTML
Evento
Ação
onclick
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.
81