Embed Size (px)
Citation preview
1
Tecnologia Internet
Processamento no ClienteHTML, DHTML e
Linguagens Script
Prof.Dr. Antonio Geraldo da Rocha Vidal
FEA/USPEAD-5881 – Tecnologia de Informática
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– ...
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
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.
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
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.
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
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
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
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.
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.
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>
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.
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.
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
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
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
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.
19
Tecnologias Internet Pilha de Protocolos de Rede
HTTP
TCP
IP
Ethernet
HTTP
TCP
IP
Ethernet
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
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
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)
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)
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
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
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>
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>
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>
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>
30
Tipos Básicos de Hyperlinks
• URL• Documento não HTML• Marcador de páginas (bookmark)• E-mail
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>
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>
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.
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>
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>.
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>
37
Atributos de Tabelas
• Largura e Altura• Colunas e Linhas• Cabeçalhos• Bordas• Título• Agrupamento de colunas• Aninhamento de Tabelas (tabelas intercaladas)
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
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.
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.
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).
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>
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.
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)
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>
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">
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>
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
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
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">
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>
52
Páginas Ativas no ClienteProgramação com Linguagens Script
JavaScript, VBScript e DHTML
Tecnologia Internet
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.
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
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.
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
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)
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.
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.
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.
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.
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.
63
Usando VBScript<SCRIPT LANGUAGE="VBScript"><!--Sub btnHello_OnClick() MsgBox "Oi, mundo!"End Sub--></SCRIPT><INPUT TYPE=BUTTOM NAME=btnHello VALUE=“Clique Me">
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();">
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
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.
67
Controles ActiveX
68
Controles ActiveX
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.
70
Java Applets
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
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
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.
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.
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
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.
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">
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>
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"
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.
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.
