Escolar Documentos
Profissional Documentos
Cultura Documentos
Todas As As Aulas CDW - Cederj
Todas As As Aulas CDW - Cederj
1
A história aqui no independente de sua localização física (que o usuário não tem
Brasil: a mínima necessidade de conhecer).
A Internet surgiu no
Brasil em 1991, num Com a Web, ganhou força a utilização, em larga escala, da
primeiro momento técnica de hipertextos. Um hipertexto é um documento onde
interligando
instituições acadêmicas
é possível incluir referências (em inglês, Links) a outros
por meio da Rede documentos. A seleção de uma destas referências, leva o
Nacional de Pesquisa. usuário ao documento referenciado.
A partir de 1995,
começa a utilização Inicialmente, a informação disponível na Web era encontrada
comercial e a principalmente sob a forma de textos e hipertextos. Aos
popularização da rede. poucos foram sendo incorporados elementos gráficos e
animações aos documentos. Tais recursos ajudaram muito a
Com o surgimento dos
popularizar a Web, aproximando-a mais do cidadão comum.
provedores de acesso, a
Internet chega ao A popularização da Web criou uma série de novas aplicações,
cidadão comum. A fazendo com que ela seja utilizada hoje para: divulgação
exposição e divulgação
da rede através dos
científica, trabalho cooperativo, divulgação de informações
meios de comunicação culturais e livros eletrônicos, promoção de produtos e
de massa dão um serviços, realização de comércio eletrônico e suporte técnico
grande impulso ao seu e vários outros usos que vão sendo inventados a cada
crescimento. instante.
2
Editores de HTML d) o nome do documento.
Atualmente, existe uma Estes dados devem ser informados ao navegador segundo um
grande quantidade de
ferramentas, para formato padronizado que chamamos de URL.
auxiliar o A máquina que contém o documento a ser exibido deve estar
desenvolvimento de
páginas de Web.
executando um programa que se encarrega de receber o
pedido do documento, localizá-lo no disco e enviá-lo para a
máquina que o pediu. Este programa é chamado de Servidor
Há vários níveis de de Web e o navegador que pede o documento é chamado de
ferramentas desde Cliente.
aquelas destinadas a
converter documentos Agora que você já viu como o documento chega até o
de um determinado usuário, após sua solicitação, veja alguns conceitos básicos
formato para HTML,
envolvidos neste processo.
passando por editores
visuais simples, até
ferramentas complexas 2.1. Navegadores (Browsers)
de gerenciamento de
sites. Para navegar pela Web é necessário um programa que
chamamos de navegador (em inglês, Browser). Ele é
Exemplos destas responsável por: solicitar documentos na Internet e interpretá-
ferramen-tas são: los, exibindo-os para o usuário. Exemplos de navegadores:
• Filtros conversores: Netscape, Internet Explorer, Mosaic, Lynx.
rtftohtml, pstohtml.
• Editores de tags:
HTML Assistant,
HotDog, W3e.
• Editores Wysiwyg:
2.2. Servidores (Web Servers)
Netscape Composer, MS
Internet Assistant, MS Para navegar pela Web também é necessário outro tipo de
FrontPage Express. programa, chamado servidor. Os programas deste tipo foram
• Gerenciadores de especialmente elaborados para administrar o acesso às
site: MS FrontPage, páginas HTML. Eles são executados nas máquinas onde estão
AOLPress, Macromedia guardados os documentos HTML. Estes programas são os
Dreamweaver.
responsáveis pelo envio dos documentos para as máquinas
que os solicitam. Exemplos servidores: NCSA, CERN,
Estas ferramentas porém Apache (em ambiente UNIX), PWS, IIS, Netscape, WebSite
não eliminam a (em ambiente windows).
necessidade de conhecer
a linguagem HTML.
Mesmo as ferramentas
mais complexas mantêm
a facilidade de visualizar 2.3. HTML (Hypertext Markup Language)
e editar diretamente o
código HTML, o qual é É a linguagem padrão usada para a escrita de páginas da
muitas vezes a forma Web.
mais fácil de se obter o
efeito desejado na O HTML é uma linguagem de marcação, ou seja, seus
página. comandos (chamados Tags) servem para informar aos
programas de navegação os elementos que serão exibidos na
página: cabeçalhos, textos em itálico, links, imagens etc. O
navegador Web interpreta estes comandos e exibe a página
para o usuário.
3
Um texto HTML não define a forma exata como o
documento vai ser exibido. Isto depende do programa de
navegação usado e das definições feitas pelo usuário.
Onde:
protocolo – Indica a forma como vai ser realizada a
comunicação entre o servidor e o cliente e também o tipo de
serviço que será prestado. No caso de HTML o protocolo é o
http (HyperText Transfer Protocol).
servidor – Endereço do servidor (ou maquina) na Internet.
Pode ser dado na forma nome_da_máquina.domínio (como
no exemplo acima) ou através do endereço IP da máquina
(como em 146.164.2.68).
caminho – Localização do arquivo no disco do servidor
através de um diretório ou de uma lista de diretórios. (por
exemplo: http://www.ic.uff.br/~aconci/curso
/formatos.html, onde ~aconci e curso são
diretórios ou "pastas").
arquivo – Nome do arquivo desejado. Esta informação
pode ser omitida. Neste caso, o servidor assume um nome
padrão, que pode variar de instalação para instalação, mas
normalmente é home.html ou index.html.
Você vai agora conhecer como se constitui um documento
HTML, sua estrutura e seus comandos básicos de formatação.
ASCII é abreviatura de
American Standard
Code for Information
Interchange, e 3. Características Gerais de HTML
identifica uma
convenção amplamente Um documento escrito em HTML é um arquivo ASCII
usada em computação comum, contendo apenas os caracteres ASCII visíveis.
para codificar
caracteres (letras, O navegador ignora qualquer caracter especial, inclusive
números e símbolos aqueles que sugerem algum tipo de formatação ao texto
gráficos).
(como TAB, CR, LF). Qualquer tipo de formatação deve
ser informada através dos comandos conhecidos como tags.
4
As tags, ou marcas, se diferenciam do texto comum por
estarem contidas entre o caracter "<" e o caracter ">".
Algumas tags contêm atributos que permitem configurar
algumas características. E alguns atributos podem ter
valores específicos. Estes atributos são colocados entre os
delimitadores (< e >), após o nome da tag. Os valores vêm
depois de um sinal de "=" colocado junto aos atributos. A
sintaxe genérica de uma tag é :
Nos exemplos ao lado, <nome atributo1=valor atributo2= valor
A e HR são os nomes de ....>
duas tags. HREF,
SIZE e WIDTH são Como por exemplo:
os seus atributos. Os <A HREF="http://faperj.br">
valores podem variar <HR SIZE=8 WIDTH=80%>
muito dependendo do
significado do
atributo! Há dois tipos de tags: container tags (ou emparelhada) e
empty tags.
5
Seria exibido da seguinte forma:
Palavra em italico e negrito ficam realcadas diferentemente.
Um espaco em branco
ou muitos na separacao de palavras tem o
mesmo efeito.<br> Assim como uma linha em
branco ou muitas.<br> Deve-se usar a tag
adequada para mudar de linha.
6
A tag HTML indica a área onde deve estar contido o
Como projetar documento HTML. Isto não quer dizer que o Browser não
bons documentos ?
exiba um texto colocado fora desta tag, mas essa não é uma
Os passos a seguir boa prática. Porque dependendo do navegador que o usuário
dão algumas dicas estiver usando algumas conseqüências não previsíveis podem
dos aspectos que ocorrer. Se você colocar o texto fora desta área, no mínimo
devem ser avaliados você perde o controle sobre como o texto será visto pelo
quando você for
criar uma página na usuário.
Web:
A tag HEAD é o cabeçalho do documento. Nesta área são
• avaliação do colocadas tags com informações relativas ao documento. A
público alvo; mais importante destas informações está contida na tag
TITLE que deve sempre ser incluída em todas as páginas. O
• definição do
conteúdo; texto do TITLE é utilizado pelo navegador para nomear os
links adicionados ao arquivo de "favoritos" (bookmarks) do
• organização da usuário. Normalmente, o texto que aparece no interior da tag
estru-tura da página; TITLE é visualizado na barra de títulos da janela do browser.
• redação do
conteúdo;
A tag BODY contém o documento propriamente dito. Nesta
área, deve ser colocado tudo que representa a página a ser
• programação visualizada. Constitui a maior parte do documento HTML e
visual e inclui geralmente muitas outras tags no seu interior.
implementação da
página.
No final desta aula, o "exemplo atividade" descreve em
detalhes estas partes; que tal ir lá dar uma olhada?
3.4. Comentários
O principal
diferencial é que as Como em outras linguagens de programação, é possível
tags de formatação
lógicas se inserir parte de texto que o usuário não tem acesso. Essas
preocupam em
partes são chamadas comentários.
definir uma idéia e
não em precisar
exatamente como Num texto HTML, todo texto incluído entre <!-- e --> é
essa idéia
aparecerá. ignorado pelo Browser, ou seja é interpretado como um
comentário do programador.
Por exemplo, se
você usar para
ressaltar um texto, a
tag <EM> fará com
que ele seja exibido 3.5. Comandos Básicos de Formatação
em itálico no
Explorer e no A linguagem HTML possui duas classes de elementos
Netscape, mas utilizados para modificar o estilo de apresentação de partes
outro navegador do texto: tags físicas e tags lógicas.
poderá apresentá-lo
em negrito, ou
em um parágrafo à As tags físicas indicam, explicitamente, a forma como o
parte entre "aspas", autor deseja ver exibido o seu texto. Elas são mostradas na
etc. tabela 1.1.
7
Tabela 1.1 -Tags físicas
Elemento Descrição Efeito
<B>…</B> Negrito texto normal
<i>…</i> Itálico texto normal
<U>…</U> Sublinhado texto normal
<TT>…</TT> Letras igualmente texto normal
espaçadas
<SUB> … </SUB> Subescrito normal
texto
texto
<SUP> … </SUP> Sobrescrito normal
<STRIKE> ... Riscado texto normal
</STRIKE>
<BIG> ... Fonte grande texto normal
</BIG>
<SMALL>...</SM Fonte pequena texto normal
NOTA: ALL>
O pouco rigor de
alguns navegadores As fontes (ou tipos de letras usadas para os textos), podem
permite que algumas ser de dois tipos: proporcionais ou mono-espaçadas. As
container tags primeiras determinam um espaço para cada letra
HTML sejam proporcional à sua largura. Nelas por exemplo, um ponto,
representadas como '.', ocupa menos espaço que a letra 'i', e esta ocupa menos
empty tags.
espaço que a letra 'm'.
Uma destas é <P>.
Pode acontecer do seu Já as fontes mono-espaçadas determinam o mesmo espaço
texto ser bem para qualquer que seja o símbolo gráfico a ser escrito, como
interpretado sem ser nas máquinas de escrever antigas. Fontes mono-espaçadas
necessário colocar a
tag de fim de possibilitam que um texto seja exibido respeitando a
parágrafo (</P>). endentação. Para ter um texto escrito deta forma em HTML
No entanto, o World você deve escrevê-lo entre as tags <TT> e </TT>.
Wide Web
Consortium-W3C
recomenda que ela
seja uma container
As tags lógicas expressam uma idéia que deve ser passada ao
tag. usuário e a forma como o texto será exibido depende do
navegador. Algumas delas são descritas na tabela 1.2.
8
isso é apenas por acaso. Nada garante que esta forma de
exibição continue nas próximas versões destes navegadores
ou que os outros façam o mesmo.
4. Formatadores
9
Para incluir um texto pré-formatado com fonte mono-
espaçada utiliza-se a tag <PRE> … </PRE>. Esta tag,
porém, não impede o navegador de interpretar outras tags que
estejam em seu interior, permitindo realizar mudanças de
fonte, estilo e cor do texto.
10
O exemplo abaixo, inclui uma linha de 2 pontos de espessura,
ocupando 50% da janela e sem sombreado:
<HR SIZE=2 WIDTH=50% NOSHADE>
5. Cabeçalhos
11
Tabela 1.4 - Caracteres especiais e para acentuação
Codificação em HTML
á á é é Ç ç & &
ã ã ê ê Ç Ç “ "
â â ó ó < < ® ®
à à ü ü > > © ©
12
Exercícios:
Depois de 1. Utilize, no exemplo atividade, os separadores de quebra de
responder cada
exercício, linha <BR> e parágrafo <P>, separando adequadamente o
salve-o em um texto. Além disso, desenhe linhas horizontais ocupando 25%
editor de texto. da janela, separando os parágrafos que iniciam com as
Logo que ele palavras: Segundo, Terceiro e Quarto dos parágrafos
seja salvo com
anteriores. Visualize o novo aspecto que o exemplo terá
a terminação
.htm, é agora!
importante que
você visualize- 2. Atribua subtítulos aos parágrafos que você separou no
o em um exercício anterior, utilizando <H3> </H3>. Compare como
navegador. fica a página se você agora usar <H5> </H5>.
Resumo:
Nesta aula, você aprendeu: a estrutura básica da linguagem
HTML, a formatar um documento, a incluir títulos, subtítulos
e, a acentuar o texto corretamente, independentemente do
navegador que esteja usando. Fez sua primeira "obra" em
HTML e testou seus novos conhecimentos nos exercícios.
Auto-avaliação:
Se você concluiu com sucesso os exercícios, podemos dizer
que você fixou todos os detalhes desta aula e está pronto para
tornar qualquer texto um hipertexto. Este é o assunto da
próxima aula: Listas e Links.
13
Aula 2: Listas e Links
Objetivos:
- Aprender a utilizar listas numeradas.
- Compreender listas de definição.
- Aprender a referenciar outros documentos.
- Diferenciar caminhos relativos de absolutos.
- Aprender a utilizar âncoras.
- Possibilitar o envio de mensagens via e-mail pela página HTML.
- Referenciar documentos de outros tipos.
Pré-requisito:
Você entendeu bem a aula anterior? Fez com facilidade os exercícios? Se
respondeu afirmativamente estas perguntas está pronto para esta aula! Se não,
tire suas dúvidas e releia a aula anterior!
1. Listas e Enumerações
Uma forma muito comum de organizar a informação é através de listas. A
linguagem HTML oferece 3 formas diferentes de criar uma lista:
• listas não numeradas,
• listas numeradas, e
• listas de definição (tipo verbete de dicionário).
Vamos ver o que cada uma delas representa.
<LI> também
pode ser interpretado
por alguns
navegadores
corretamente se não
1.1. Listas Não Numeradas
for escrita como do
tipo empty, mas a As listas não numeradas são formadas por itens precedidos de um símbolo
W3C recomenda que gráfico. Em HTML utiliza-se a tag <UL> ... </UL> para delimitar a lista,
seja usada como sendo que cada item é indicado pela tag <LI>.
container tag.
Tanto a tag <UL> como a tag <LI> têm o atributo TYPE. Este atributo indica
Default é um termo qual símbolo é colocado antes de cada item: disc (um círculo cheio, é o
muito usado em
default), circle (um círculo vazado) e square (um quadrado cheio).
computação para
indicar o valor que é
assumido na falta de Por exemplo, o código HTML:
qualquer
especificação.
1
<UL>
<LI>Correio Eletronico</LI>
<LI>Telnet</LI>
<LI>FTP</LI>
</UL>
Telnet é o serviço
de conexões remotas
Produz uma saída parecida com:
da WEB. • Correio Eletronico
Esse sistema permite
• Telnet
que sua máquina • FTP
possa ser um
terminal de outra
máquina na 1.2. Listas Numeradas
Internet. Para isso o
usuário deve ter uma As listas numeradas são formadas por itens precedidos de um número
conta (login) na
máquina remota. A indicando a sua ordem. Em HTML utiliza-se a tag <OL> ... </OL> para
utilidade principal delimitar a lista numerada, sendo que cada item é indicado pela tag <LI>.
do Telnet é
possibilitar a Tanto a tag <OL> como a tag <LI> têm o atributo TYPE, que no caso deste
execução de
programas na tipo de lista, indica qual a forma de numeração será usada em cada item. As
máquina remota. formas possíveis são:
• 1 (números arábicos, é o default),
FTP é o protocolo • A (letras maiúsculas),
usado na Internet • a (letras minúsculas),
para transferência de
arquivos entre • I (números romanos com letras maiúsculas) e
computadores. • i (números romanos com letras minúsculas).
O FTP é um dos
recursos mais A tag <OL> tem também o atributo START, que indica qual será o primeiro
importantes da número da lista.
Internet, sendo
responsável por um
grande volume de
A numeração também pode ser modificada através do valor do atributo VALUE
tráfego de dados. da tag <LI>.
Para você se
conectar a uma Por exemplo, o código HTML:
máquina remota <OL TYPE=A>
através do FTP é <LI> Correio Eletronico</LI>
necessário que a sua <LI VALUE=4> Telnet</LI>
máquina e a remota <LI> FTP</LI>
estejam executando
um programa </OL>
servidor de FTP.
Produz uma saída parecida com:
A. Correio Eletronico
D. Telnet
E. FTP
Enquanto que:
<OL TYPE=1 START=5>
<LI> Correio Eletronico</LI>
<LI VALUE=1> Telnet</LI>
<LI> FTP</LI>
</OL>
2
resultaria:
5.Correio Eletronico
1.Telnet
2.FTP
3
Tabela 2.1 - Resumo das Tags de Listas
Elemento Descrição Atributos
<UL> ... </UL> Lista não ordenada TYPE
<LI> ... </LI> Item de lista não TYPE
ordenada
<OL> ... </OL> Lista ordenada TYPE,
START
<LI> ... </LI> Item de lista ordenada TYPE, VALUE
<DL> ... </DL> Lista de definições nenhum
<DT> Termo a ser definido nenhum
<DD> Definição do Termo nenhum
Note que:
Os caminhos de
2. Interligando Documentos
diretórios seguem a
convenção do Uma das principais características do hipertexto é a possibilidade de incluir
sistema operacional referências no documento. As referências são denominadas Links e quando
Unix utilizando o selecionadas levam à exibição do documento referenciado.
caracter / em vez de
usar o caracter \. As referências ou Links podem ser feitas a:
• documentos na mesma máquina,
• documentos em uma máquina completamente diferente (que pode estar até
do outro lado do mundo),e
• um outro ponto do próprio documento.
equipe.nce.ufrj.br/Exemplos/arq.htm
../Exemplos/arq.html
Pois "../ " significa: "a partir do diretório atual" (que no caso é joao),
vá ao diretório anterior (no caso equipe.nce.ufrj.br) e de lá para um
sub-diretório filho chamado Exemplos, onde há o arquivo arq.html.
4
2.1. Referência a Outro Documento
Márcia e
Glaucia: este A forma de inserir referência em arquivo HTML é através da tag <A> ...
Outro é mesmo </A> e de seus atributos.
maiusculo?
O atributo HREF serve para definir a URL que será aberta se o usuário
selecionar, com o mouse, o texto contido entre o <A> e o </A>. Os
Voces falaram
navegadores costumam exibir este texto utilizando caracteres sublinhados e o
que deveria ser
cursor do mouse é modificado ao passar por cima dele.
minuscula, mas
eu acho que não.
No exemplo a seguir, a seleção do texto “Pagina do NCE” faz com que o
Continuo com a navegador abra a página “http://www.nce.ufrj.br”:
dúvida acima,
o outro tem a <A HREF="http://www.nce.ufrj.br">
mesma função do Pagina do NCE
</A>
"Próprio " no
próximo título,
e ai em 2.2 voces É importante lembrar que, apesar da HTML não diferenciar maiúsculas de
mandaram por minúsculas, o mesmo não é válido para as URLs. É necessário indicar
maiuscula! corretamente quais letras estão em minúsculas e quais estão em maiúsculas
Ele tambem não para que o arquivo possa ser encontrado.
é apenas uma
"ligação " entre O arquivo destino não precisa necessariamente ser um documento HTML,
as palavras..... pode ser um arquivo de qualquer tipo: imagens, música, arquivos comprimidos
etc. Caso o navegador não saiba como exibir este arquivo, ele permite ao
usuário receber o mesmo e salvá-lo em um diretório de sua escolha.
Uma âncora colocada no meio do texto não tem efeito algum no aspecto da
página que será visualizada.
<A HREF="#inicio">
Início da Página
</A>
5
As âncoras têm duas utilidades básicas:
• permitir a criação de índices no início da página, e
• permitir ao usuário voltar imediatamente ao início da página.
<A HREF=
"http://www.ic.uff.br/~aconci/II.htm#bibliografia">
Bibliografia
</A>
6
<BODY>
<CENTER>
<P><A NAME="inicio"></A>
<B>Construção de Páginas de Web</B>
Lembrete: as
</P>
tags tanto </CENTER>
podem ser <P>O que já aprendemos:</P>
escritas em <P>Aula 1: Introdução</P>
maiúsculas <ul>
como em <li>Conceitos básicos: URL, Navegadores e
minúsculas,
mas nos links Servidores</li>
esta diferença <li>Estrutura de um documento HTML</li>
é importante <li>Comandos básicos de formatação.</li>
</ul>
<P>Aula 2. Listas e Links</P>
<ul>
<li>Listas numeradas, não numeradas e de
definições</li>
<li>Caminhos relativos e absolutos</li>
<li>Referências a outras páginas</li>
<li>Âncoras</li>
<li>Enviando mensagens</li>
<li>Referencias a outros documentos (<A HREF=
"http://www.ic.uff.br/~aconci/curso/imagem~1.htm">
imagens</A>, som, vídeo)</li>
</ul>
<HR WIDTH="100%">
<p><a href="mailto:aconci@ic.uff.br"> enviar
messagem</a></P>
<P><A HREF="#inicio">voltar inicio</A></P>
<p><A HREF="http://www.faperj.br">conhecer mais
sobre a FAPERJ</A></P>
</BODY>
</HTML>
Agora, faça com que cada item das aulas seja referenciado da seguinte forma:
procure na Internet sites relacionados a estes itens, e crie os links para a partir
deles visualizar os sites encontrados.
Resumo:
Auto-avaliação:
Você concluiu com facilidade os exercícios? Então podemos dizer que você
entendeu bem os detalhes desta aula e está pronto para nossa próxima aula.
Mas se algo não ficou bem fixado, a melhor coisa a fazer é rever esse ponto e
não acumular dúvidas!
7
..
1
Aula 3: Imagens
Objetivos:
- Aprender a incluir imagens nas páginas.
- Definir como as imagens aparecerão na página.
- Escolher o tipo de arquivo de imagens a ser usado.
- Fazer partes de imagens serem links.
Os arquivos de
imagem possíveis de
serem incluídos em Pré-requisitos:
HTML são dos tipos Para essa nossa terceira aula, você deve ter entendido os conceitos de HTML
GIF ou JPEG. Você das aulas anteriores. Em caso de dúvidas, volte e releia a aula 1 e pelo menos a
pode ler mais sobre segunda parte da aula 2: links .
esses formatos em:
http://
ic.uff.br/
~aconci/
curso/ 1. Imagens
jpggif.htm
(tudo em Vamos mostrar-lhe, agora, como trabalhar com imagens em documentos
minúsculas, com o HTML. Neste sentido vamos estudar uma das tags mais importantes: <IMG>.
"til" ao lado do "ä"
mesmo e sem
espaços). Na tag <IMG> o atributo SRC deve sempre estar presente para indicar, através
de sua URL, que arquivo contém a imagem. Exemplificando, as linhas:
Embora não seja fazem com que a imagem nota.gif seja exibida na página, junto com o
muito conveniente,
nada impede que a texto, após a palavra “Imagem, cores” e antes de “e movimento”.
imagem esteja em
outra máquina! Isto
é, a URL indicada
pode ser um Os navegadores usam algum símbolo padrão no caso de não poderem
endereço qualquer
na Internet! "localizar" a imagem. O Netscape, por exemplo, mostraria:
1
..
2
O atributo ALT serve para associar uma descrição à imagem. Essa descrição é
mostrada pelo navegador em duas ocasiões: quando o usuário deixa o cursor do
Denomina-se pixels
a cada um dos
mouse sobre a imagem ou enquanto a página está sendo carregada (mas a
pontos do vídeo que imagem ainda não começou a aparecer). Neste segundo caso, o usuário pode
podem ser acessos, decidir se deseja ou não carregar a imagem. Além disso, caso ela não tenha
ou a cada um dos sido carregada, por algum motivo, o usuário tem como saber que naquele ponto
pontos de uma da página havia uma imagem e o que ela retratava.
imagem que podem
ter sua cor
determinada. O atributo ALIGN define o alinhamento do texto próximo à imagem. Este
alinhamento pode ter o sentido de como a imagem se encontrará
horizontalmente na página HTML, ou pode ter o sentido de como uma linha do
texto próximo à imagem ficará posicionada verticalmente em relação à
imagem.
http://daniweb.com/ Neste caso, uma borda (como a das duas figuras anteriores) aparece em torno
graphics da imagem. A borda da imagem indica que ela é um link, assim como o
sublinhado indica um link textual (como comentado na aula 2). Este efeito é
http://www.clipart.
com
muitas vezes indesejável e aí o atributo BORDER da tag <IMG>, entra em ação!
Pode-se excluir a borda utilizando o atributo BORDER=0 ou simplesmente
(tudo em minúsculas
e sem espaços).
BORDER. Mas o atributo também pode ser usado para definir bordas com
quaisquer número de pixels. O valor default da borda é 1 e ela muda de cor
para assumir a cor do link.
3
..
4
As imagens
entrelaçadas são
carregadas em 2. Quando usar imagens GIF ou JPEG
quatro passos de
preenchimento GIF é abreviação de “Graphics Interchange Format” e foi desenvolvido pela
sucessivo pelo CompuServe. Neste formato, as imagens são comprimidas através da
navegador. A
codificação LZW (Lempel-Ziv and Welsh que é um processo de compressão
primeira passada
preenche a primeira sem perdas) e armazenadas em arquivos de extensão .gif , permitindo que tenha
linha e as linhas um carregamento progressivo ao ser visualizada.
múltiplas de 8 (se
imaginarmos que a O formato GIF usa tabela de até 256 cores e pode apresentar imagens
primeira linha da
entrelaçadas, permitindo que tenha um carregamento progressivo ao ser
imagem tenha
número 0, a segunda visualizada. Existem duas versões do formato: GIF87 e GIF89a. Nesta última
1, a terceira 3 e versão é possível gravar imagens onde uma cor é definida como transparente.
assim por diante,
seriam primeiro Há vários programas freewares (obtidos de graça na internet) que permitem a
preenchidas as linhas
criação de imagens no formato GIFs transparentes e com animação. Tente
0, 8, 16, 24, 32 ...).
A segunda passada achá-los em um site de buscas e você terá ótimas surpresas!!!!
preenche linhas de 8
em 8 a começar pela JPEG é um padrão internacional, proposto pelo comitê ISO “Joint
quinta (linhas de Photographers Expert Group”. As imagens são codificadas por transformações
número 4,12, 20,
matemáticas, o que permite a remoção de um certo nível de informações
28...). A terceira
passada desenha as gráficas sem grande perda de qualidade. Este formato permite vários níveis de
linhas de 4 em 4 a compressão, possibilitando escolher a melhor relação entre o tamanho do
começar da terceira arquivo e a qualidade da imagem.
(linhas de número 2,
6, 10, 14, 18, 22...).
Arquivos de imagens que seguem o padrão JPEG têm extensão .jpeg ou .jpg.
A última passada
escreve as linhas Este formato não usa tabela de cores, sendo o ideal para imagens fotográficas
restantes (de 2 em 2 nas quais a utilização de um byte por cor (técnica chamada de "true-color")
começando da pode ser importante para a qualidade da imagem. Mas, por ser um formato com
segunda: 1, 3, 5, 7, perdas, pode não dar bons resultados em imagens compostas por desenhos
9...). Mas após o
geométricos, textos ou linhas.
primeiro passo já é
possível ter uma
idéia de toda a figura A decisão a respeito de qual formato utilizar depende basicamente do tipo da
(embora de 8 em 8 imagem e da qualidade desejada. De maneira geral, JPEG é mais adequado a
linhas). Muitas vezes imagens de cenas reais digitalizadas ou imagens com grandes variações de
esta primeira
tonalidade, onde a grande variação de cor é mais importante que a perda de
visualização já
permite ao usuário algum detalhe na imagem.
decidir se deseja
continuar a carregar O formato GIF é melhor para imagens que não podem ter perdas de detalhes,
a figura ou não, para desenhos e gráficos com áreas de cores constantes. Para este tipo de
poupando tempo de
imagem, o GIF realiza uma compressão muito maior e de qualidade melhor do
transmissão. Os
passos seguintes vão que o JPEG, já que este sempre apresenta alguma perda de qualidade.
acrescentando linhas
progressivamente na
imagem até ela estar 3. Mapas Clicáveis
completamente
definida. Até agora você viu como é possível ativar um link através da seleção de uma
imagem. Em muitas situações, porém, pode ser interessante associar vários
links a uma única imagem. Desta forma, dependendo da região da imagem que
for selecionada, o navegador exibirá um documento diferente.
4
..
5
Imagens que se Essas figuras são chamada de mapas clicáveis na linguagem HTML. Em geral,
misturam com o é possível definir 3 tipos de região sensíveis nos mapas:
fundo da página, que
dão a impressão de • circulares,
não terem a forma • retangulares e
retangular dos • poligonais.
arquivos de imagens
comuns são
conseguidas graças a Pode-se também implementar os mapas clicáveis de 2 maneiras, que são
este efeito de denominadas:
transparência, que
é possível através da • mapas processados no servidor ou Server Side Maps e
utilização do • mapas processados no cliente ou Client Side Maps .
formato GIF89a.
A escolha entre uma ou outra forma de implementação dos mapas só pode ser
Você já deve ter
feita após entendermos suas características principais. Vejamos então cada uma
reparado que
algumas páginas na delas.
WWW possuem
imagens que não são
só figuras 3.1. Mapas processados no servidor ou Server Side Maps
decorativas e
funcionam como A primeira forma de implementar mapas clicáveis funciona distribuindo, entre
uma plataforma para o cliente e o servidor, a tarefa de interpretar qual documento deve ser carregado
ligação a diversos
links de hypertexto. ao se "clicar" em um ponto da imagem.
São as imagens
sensíveis ou os Neste caso, o cliente deve, primeiro, determinar o ponto exato que foi
mapas clicáveis. O selecionado na figura e enviar a coordenada deste ponto para um programa
exemplo típico de instalado no servidor. Este programa, por sua vez, determina qual URL está
utilização de um
mapa clicável é associada àquele ponto e a envia para o cliente, que finalmente carrega a
quando temos uma página.
barra de navegação.
Outro exemplo seria No servidor há um arquivo associado a cada mapa clicável, onde estão
a figura de um mapa definidas cada uma das regiões do mapa e a URL que deve ser ativada caso o
de um país onde a
seleção de um estado ponto esteja dentro desta região.
específico leva a
uma página Esta forma de selecionar as regiões de uma imagem está caindo em desuso,
descrevendo este pois apresenta várias desvantagens. A primeira delas é que o formato deste
estado. arquivo de definição das áreas é dependente do tipo de servidor. Ao mudar uma
Com certeza você página de um servidor para outro é necessário converter os arquivos. Outra
deve estar achando desvantagem é que costuma ser necessário pedir a intervenção do
que isso é muito administrador do servidor para atualizar o arquivo. Além disso, a cada seleção
complexo, mas está é necessário uma consulta ao servidor para determinar o documento que foi
enganado! E como selecionado (o que implica um maior tempo de resposta). Por fim, o usuário
não queremos que
você saia por aí sem não tem nenhuma indicação, no mesmo documento, de qual URL ele está
saber direito o que selecionando, pois esta informação está no servidor.
está fazendo, que tal
primeiro entender
um pouco melhor 3.2. Mapas processados no cliente ou Client Side Maps
como isso funciona?
Neste tipo de mapa clicável, a definição das regiões de uma figura é feita no
próprio arquivo HTML. É preciso que o navegador seja capaz tanto de
determinar qual ponto da figura foi selecionado quanto descobrir em qual área
está contido este ponto.
5
..
6
O Netscape, a
partir da versão
2.0, e o Explorer,
a partir da versão
3.0, já
implementam
essa possibilitade
de interpretação
no navegador.
Perceber,
claramente, a
diferença entre os
dois métodos é
muito importante. O
server side é uma
combinação de CGI
(Common Gateway
Interface), HTML e
um arquivo que
informa as regiões
sensíveis que
residem no servidor.
Por outro lado,
quando você usa um
client side, todas as
informações estão
dentro do próprio
código HTML da
sua página! Isso gera
menos tráfego na
rede e aumenta a
eficiência do
navegador!
6
..
7
Veja a seguir um "0,50,100,50,50,100,0,50"
exemplo que HREF="HTTP://ALTAVISTA.COM" >
ilustra a criação
de um mapa <AREA SHAPE=RECT COORDS="0,0,100,100"
clicável. A HREF="HTTP://WWW.UFF.BR" >
página criada
pelo exemplo é a </MAP>
mostrada na
figura 3.3 que <IMG SRC="NOTA.GIF" WIDTH="100" HEIGHT="100"
segue. BORDER="1" ALT="BANDEIRA COM NOTA MUSICAL"
USEMAP="#MAPA">
<HTML> </CENTER>
<HEAD> </BODY>
<!-- </HTML>
EXEMPLO DE
MAPAS Como você deve ter observado, surgiram muitas tags novas neste exemplo!
CLICAVEIS Para definir as diferentes regiões da figura e associá-las a diversas URLs são
--> necessárias duas tags: a tag <MAP> ... </MAP> e a tag <AREA>.
<BODY
BGCOLOR="WH
ITE">
<CENTER>
<p>Clique
na
imagem!</p>
<MAP
NAME="MAPA"
>
<AREA
SHAPE=C
IRCLE
COORDS=
"50,50,
25"
HREF="H
TTP://W
WW.CNPQ
.BR" >
<AREA
SHAPE=P
OLYGON
COORDS=
7
..
8
A tag <MAP> ... </MAP> tem apenas o atributo NAME que serve para
À medida que sua definir um nome que será utilizado para associar às regiões a um determinado
imagem tiver áreas
poligonais
arquivo de imagem (incluído através do atributo usemap da tag <IMG>).
complexas, pode ser
mais difícil Mas a tag <MAP> ... </MAP>, como pode ser visto no exemplo anterior,
encontrar as contem uma série de tags que farão a definição de cada uma das áreas sensíveis
coordenadas das da página.
áreas. Existem
diversos programas
disponíveis na Assim, uma ou mais tags <AREA> são colocadas dentro de <MAP> ...
Internet que podem </MAP> para definir cada uma das áreas clicáveis da figura. Há três tipos de
criar estes mapas áreas:
para você. (Use um
site de buscas para • circulares,
localizá-los!) • retangulares e
• poligonais.
Um destes
programas muito
simples é o O valor do atributo SHAPE especifica a forma da área e pode receber os
Mapedit: seguintes valores: CIRCLE, RECT (valor default) e POLYGON (ou
http://www.boutell. POLY).
com/mapedit/
#download
O atributo COORDS fornece um conjunto de coordenadas para definir a área. O
Uma interface significado e o número de coordenadas variam de acordo com a forma
melhor é encontrada escolhida:
no MapThis!:
http://galadriel.
exaetc.ohio- CIRCLE – requer três valores x, y e r, onde (x, y) é o centro do círculo e r o
state/tc/mt/ftp/ raio. No exemplo acima, é definida uma área circular de 25 pontos de raio,
mapthis posicionada no centro da (coordenada 50, 50) da figura.
RECT – requer quatro valores x1, y1, x2, y2, onde (x1, y1) é o vértice
superior esquerdo do retângulo e (x2, y2) é o vértice inferior direito. No
exemplo anterior, é definido um retângulo envolvendo toda a figura.
POLYGON – requer um número par de valores x1, y1, ... xn, yn, onde cada par
(xn, yn) corresponde a um dos vértices do polígono. No exemplo, é definido
um losango com os vértices (50,0), (100, 50), (50, 100) e (0,50).
Nas tags <AREA> o atributo HREF serve para indicar a URL que deve ser
carregada após a seleção da região. É possível também utilizar o atributo ALT
para exibir um texto explicativo quando o cursor do mouse passar sobre a área.
O atributo NOREF na tag AREA pode ser usado para indicar que determinada
área não chama arquivo algum.
8
..
9
http://www.
webutilities.com/ga/
ga_main.htm
Exercícios:
Javascript é o Nesta aula você aprendeu tudo sobre imagens. Viu como incluir imagens e
assunto do segundo formatar sua borda, seu espaçamento, alinhamento, dimensões e texto
módulo deste curso. alternativo. Entendeu a utilização da imagem como link, quais formatos de
imagens podem ser usados e as diferenças entre os formatos. Imagens com
transparência e animações não são mais segredo para você. Conheceu as
formas de implementar mapas clicáveis e como tornar áreas de figuras
sensíveis ao click! Depois desta aula, suas páginas certamente serão muito mais
animadas!!!!
Auto-avaliação:
Com que facilidade você fez os exercícios acima? Não deixe de voltar a ler o
ponto em que sentiu mais dificuldade. Depois disso você estará pronto para
nossa próxima aula , na qual um mundo de cores, sons e movimento estará
esperando por você!
9
02
Objetivos:
- Definir as cores a serem usadas na WWW.
- Aprender a incluir vídeos e som nas páginas.
- Determinar o tipo e a cor das fontes de texto.
- Incluir imagem e cor de fundo.
Pré-requisitos:
Para essa aula, você deve ter entendido os conceitos de HTML das duas aulas
anteriores. Em caso de dúvidas, volte e releia, pelo menos, a primeira parte da
aula 3!
Esta segunda forma permite que você defina qualquer cor, desde que seja
entendido o mecanismo usado para descrever cores a partir das 3 luzes
primárias do sistema RGB.
1
02
Os números mbora esta seja, basicamente, a mesma forma de descrever cores no vídeo de
hexadecimais usam seu computador, em HTML o formato utilizado é #RRGGBB, com 2 dígitos
uma base de 16
símbolos e não 10 para o R, 2 dígitos para o G e 2 dígitos para o B. Para que os valores possam
como os decimais. "caber" em dois dígitos eles são escritos em hexadecimal (base 16).
Os números de 0 a 9,
isto é, os primeiros A menor intensidade possível para cada cor R, G ou B é 00. A intensidade
10, são os mesmos máxima é FF (255). O efeito produzido por cada uma das cores (vermelha,
dos decimais.
verde e azul) é aditivo e influencia na cor resultante. A tabela abaixo mostra
Depois são usadas as algumas cores e seus valores RGB.
letras de A a F (em
maiúsculas ou
minúsculas) para Tabela 4.1- Definição de algumas cores usando o sistema RGB/HTML
compor os 16
símbolos diferentes Nome Definição R G B
da base. Veja a
tabela abaixo: Black #000000 0 0 0
Símbolo Valor White #FFFFFF 255 255 255
0 0 Red #FF0000 255 0 0*
1 1
2 2 Green #00FF00 0 255 0
3 3 Blue #0000FF 0 0 255
4 4 Yellow #FFFF00 255 255 0
5 5 Magenta #FF00FF 255 0 255
6 6 Cyan #00FFFF 0 255 255
7 7
8 8
Gray #C0C0C0 192 192 192
9 9 Coral #FF7F00 255 127 0
A ou a 10 Gold #CD7F32 205 127 50
B ou b 11 Silver #E6E8FA 230 232 235
C ou c 12 Aqua #70DB93 112 206 147
D ou d 13
E ou e 14
Lime #32CD32 50 205 32
F ou f 15 Medium Blue #3232CD 50 50 205
Slate Blue #007FFF 0 127 255
Esses números
hexadecimais são
posicionais como os
decimais. Isso quer
dizer que cada vez 2. Cor ou Imagem de Fundo da Página
que se deslocar um
dígito, uma posição A tag <BODY> ... </BODY> tem uma série de atributos que permitem definir
para à esquerda, seu características gerais do documento HTML. Pode-se, nestes atributos, definir:
valor passa a ser
multiplicado pelo • a imagem de fundo da página (atributo BACKGROUND),
valor da base, que • a cor de fundo da página (atributo BGCOLOR),
neste caso é 16. (A • a cor do texto (atributo TEXT),
menos que seja um
"zero à esquerda",
• a cor de links ainda não visitados (atributo LINK),
como naquele • cor de links enquanto selecionados ou ativos (atributo ALINK) e
trocadilho!! Mas • cor de links já visitados (atributo VLINK).
mesmo assim, a
regra é a mesma,
A tabela 4.2 resume estes atributos.
pois "zero"
multiplicado por
qualquer número é
zero!
2
02
3
02
A tag <BODY> tem ainda alguns atributos adicionais, que permitem controlar o
tamanho das margens do documento (em pontos do vídeo ou pixels). Mas não
existe compatibilidade entre os dois principais navegadores (Netscape e
Explorer) quanto a estes atributos. A tabela 4.3 mostra estes atributos.
Por exemplo: se essa tag tem como atributo em determinado ponto da página o
tamanho do texto SIZE=4. O valor de SIZE=-2 indica que o texto passará a
ser 2. Obviamente respeitando os limites possíveis que são os números de 1
a 7.
O atributo FACE serve para definir o tipo de fonte a ser utilizado. Várias
alternativas de outras fontes podem ser fornecidas para o caso da primeira fonte
não estar disponível. Cada um dos tipos de fonte é separado do outro por
vírgulas. Como no exemplo abaixo:
<font face="New York, Times New Roman, Times"
size="5">
4
02
<BASEFONT SIZE=5>
<FONT SIZE=+1 FACE=Bazzoka COLOR=green>
tudo verde e maior
</FONT>
4. Multimídia
5
02
O atributo LOOP recebe um valor que indica o número de vezes que o som
deve ser repetido (por exemplo LOOP=10 faz com que o som seja tocado 10
vezes). Este atributo não tem nenhum efeito em arquivos de vídeo.
As linhas que seguem mostram a utilização desta tag para reproduzir vídeo e
som.
AVI é sigla de <EMBED SRC="x.avi" AUTOSTART="True" width=200
Audio Video height=200>
Interleave.
<EMBED SRC="/som/greeting.wav" HIDDEN="True" LOOP=2>
6
02
O atributo LOOP tem efeito tanto sobre arquivos de som como de imagem e
basta definir um valor diferente de zero para que o arquivo seja reproduzido
infinitamente.
Exercícios:
2. Depois experimente usar todas as opções de definir cor (por nome em inglês
ou pelo código RGB), mostrando agora cada um dos pequenos textos entre
<P>...</P> do exercício anterior em cores diferentes.
3. No exercício anterior, inclua agora uma imagem e uma cor para o fundo
da página. Se o seu computador permitir, inclua também um som de fundo que
se repita enquanto a página estiver sendo vista.
7
02
Resumo:
Nesta aula você aprendeu tudo sobre Cores e Multimídia. Viu como definir
cores pelo seu nome e conheceu o formato RGB para as cores descritas em
HTML. Estudou a utilização de cores em Tags: cor de fundo, cor de links, cor
de texto. Você ainda aprendeu como mudar as fontes de texto, incluir imagens
como fundo de página e reproduzir áudio e vídeo (movie) nos documentos.
Ufa!!!! Uma aula bem "moviementada", não?
Auto-avaliação:
Foram fáceis para você os exercícios acima? Se não, volte a ler o ponto de
dificuldade. Depois disso você estará pronto para nosso próximo passo. Na
aula que vem conheceremos tudo sobre tabelas em HTML.
8
Aula 5 Tabelas
Objetivos:
- Definir os elementos de uma tabela.
- Usar os atributos gerais de tabelas: borda, largura,
espaçamento.
- Fazer atribuições às células: alinhamento, dimensões,
uniões de linhas e colunas.
- Reconstruir imagens como tabelas.
- Aprender a fornecer informações para os sites de
busca.
-Utilizar as tags <MARQUEE> e <BLINK>
Pré-requisitos:
Você entendeu bem como definir cores e incluir
imagens? Se respondeu afirmativamente estas
perguntas está pronto para esta aula! Se não, tire suas
dúvidas e releia estes itens das aulas 3 e 4!
1.Tabelas
Todas as marcas referentes Nesta aula chegamos a umas das tags mais importantes
a tabelas (título, linhas, do HTML: a tag <TABLE> .... </TABLE>. Ela
células) somente serão permite a definição de tabelas no documento. Mais do
consideradas se incluídas que isso; através das tabelas é possível "forçar" o
entre as tags
<table>...</table> posicionamento dos elementos em uma página
(escrever textos em 2 colunas por exemplo).
<TABLE BORDER>
<TR>
<TD>Coluna 1 Linha 1</TD>
<TD>Coluna 2 Linha 1</TD>
<TD>Coluna 3 Linha 1</TD>
</TR>
<TR>
<TD>Coluna 1 Linha 2</TD>
<TD>Coluna 2 Linha 2</TD>
<TD>Coluna 3 Linha 2</TD>
</TR>
</TABLE>
<TABLE BORDER>
<TR>
<TD ROWSPAN=2>Col 1 Lin 1</TD>
<TD>Col 2 Lin 1</TD>
<TD>Col 3 Lin 1</TD>
</TR>
<TR>
<TD COLSPAN=2>Col 2 Lin 2</TD>
</TR>
</TABLE>
2. A tag <META>
<HEAD>
<TITLE>Minha Home Page</TITLE>
<META NAME=”description”
CONTENT=”Esta é a descrição da
minha página”>
<META NAME=”keywords”
CONTENT=”fotografia,
programação, poesia”>
</HEAD>
Os sites de buscas têm algumas limitações quanto a
No endereço tamanho da descrição e o número de palavras-chaves:
http://www.eons.com
/metatags.htm
você encontrará informa- Tamanho – Normalmente, as informações de descrição
ções acerca de como vários são limitadas em 200 caracteres e as chaves em 1000
sites de busca obtêm caracteres.
informações das páginas e
com que freqüência estas Abuso de chaves – O mecanismo de busca ignora toda
informações são atualizadas.
a lista de palavras-chaves quando uma delas é utilizada
mais de 7 vezes numa tag <META>.
<head>
<title>
Home Page da Ana Lúcia
</title>
</head>
2.3 Informações especiais para o navegador
Cache é uma seção de
memória para acesso rápido.
Neste caso se refere a uma Alguns navegadores reconhecem certas informações
área destinada ao especiais e podem tomar atitudes em função delas. É
armazenamento das páginas possível por exemplo especificar uma data de validade
visitadas. Esse da página (a data deve ser especificada no formato
armazenamento é feito para mostrado no exemplo abaixo), a partir da qual ela deve
acelerar a operação de
acesso às páginas de uso ser retirada do cache e reatualizada (recarregada). O
freqüente. exemplo a seguir ilustra esta utilização da tag <META
HTTP-EQUIV>:
<head>
<title>Minha Home Page</title>
<META HTTP-EQUIV="EXPIRES"
CONTENT="Fri, 31 Dec 2002 00:00:01
Quando uma indicação de GMT">
hora, minuto e segundo,
aparece seguida das letras <META HTTP-EQUIV="CHARSET"
GMT, como: 00:00:01
CONTENT="ISO-8859-1">
GMT (do exemplo ao lado),
significa que ela é em
relação ao horário do <META HTTP-EQUIV="CONTENT-LANGUAGE"
Meridiano de Greenwich CONTENT="Portuguese">
(sigla de: Greenwich
Meridian Time). </head>
Os meridianos são linhas
imaginárias que ligam os
pólos Norte e Sul.
O meridiano que passa pelo 2.4 Troca automática de documento
subúrbio londrino de
Greenwich foi escolhido De todas as utilidades da tag <META> a troca
em 1884 como meridiano automática de documento, possivelmente é a mais
inicial ou de origem (0o de
longitude) a partir do qual interessante de todas.
se contam os fusos
horários. É possível indicar ao navegador que, após alguns
segundos, a página que está sendo exibida deve ser
substituída por uma outra página.
CONTENT="tempo; URL=página"
Onde:
Tempo – indica o tempo, em segundos, após o qual a
nova página deve ser carregada.
<META HTTP-EQUIV="refresh"
CONTENT="10; URL=nova.html">
Por exemplo:
</MARQUEE>
Resumo:
Nesta aula, você aprendeu como usar as tabelas, como
definir seus elementos, e quais são os seus atributos
gerais (borda, largura, espaçamento). Você viu como
usar os atributos das células: alinhamento, dimensões,
uniões de linhas e colunas. Nos exercícios, você usou a
reconstrução de imagens como tabelas. Ainda
aprendeu como usar a tag META para: fornecer
informações aos de programas de busca na Internet,
redirecionar páginas e outros usos. Finalmente, você
conheceu duas outras tags que podem ser usadas no
caso da uniformidade de visualização não ser muito
importante em um site.
Auto-avaliação:
Objetivos:
Nesta aula você:
− Aprenderá os conceitos de frames.
− Compreenderá as formas de dividir uma janela.
− Conhecerá os atributos de frameset e frames.
− Saberá como abrir documentos em um frame.
− Aprenderá o significado dos nomes especiais: _blank, _self,
_parent, e _top.
− Conhecerá os frames inline.
Pré-requisitos:
Os temas das aulas 2 e 5, e a forma como se define cores apresentada na
aula 4, serão muito importantes para frames.
A tradução usual de
layout é de: desenho, 1. Aspectos Gerais dos Frames
plano, ou esquema.
O termo também é Uma forma de posicionar os elementos e dividir o espaço de uma janela é
usado para designar a
através dos frames. Este recurso permite dividir a janela do navegador
disposição de alguma
coisa em determinado em várias áreas independentes (chamadas frames) e em cada uma destas
lugar. Ambos os áreas pode ser carregado e visualizado um arquivo HTML diferente.
significados não Cada frame é totalmente independente dos demais, o que permite que o
definem completamente conteúdo de um possa ser rolado ou trocado sem afetar os outros. Esta
todo seu sentido, neste
independência torna este recurso ideal para a criação de menus.
contexto mais
específico de HTML em
Informática. Layout A construção de uma página dividida em frames envolve, além dos
(que se lê: leiaute) aqui arquivos que serão exibidos em cada frame, a criação de um arquivo
significa mais extra para definir a disposição e o tamanho ocupado por cada área da
precisamente: um janela. Este arquivo extra é chamado de arquivo de layout.
arquivo que estará
mostrando a
distribuição física e o Um arquivo de layout é um documento HTML, onde a tag <BODY> é
tamanho dos elementos substituída pela tag <FRAMESET>. Este arquivo tem o seguinte
independentes de formato:
determinada página. <HTML>
<HEAD><TITLE>Frames
Horizontais</TITLE></HEAD>
<FRAMESET ROWS=”50%, 50%”>
<FRAME SRC=... NAME=...>
<FRAME SRC=... NAME=...>
<NOFRAMES> </NOFRAMES>
</FRAMESET>
</HTML>
1
O arquivo de layout do exemplo fará com que a janela seja dividida
horizontalmente ao meio, como mostrado na figura 6.1 a seguir:
2. Atributos de <FRAMESET>
3
Figura 6.2 - Divisão em 2 colunas e
posterior divisão da coluna direita em duas linhas
<HEAD><TITLE>
Framesets Aninhados
</TITLE></HEAD>
<FRAMESET ROWS=”60,*”>
<FRAME>
<FRAMESET COLS=”150,*”>
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
</HTML>
4. Atributos de FRAME
A tag frame pode aceitar os vários
atributos que são mostrados na tabela
6.2.
4
Tabela 6.2 - Descrição dos atributos de <frame>
Atributos Descrição
SRC Arquivo inicialmente mostrado no frame
NAME Nome associado ao frame
SCROLLING Indica se o frame será rolável (yes ou no)
NORESIZE Indica que o usuário não pode mudar de
tamanho do frame
MARGINHEIGHT Altura da margem do frame
MARGINWIDTH Largura da margem do frame
O nome _blank faz com que o documento HTML seja carregado numa
nova janela do navegador. Isto é particularmente desejável quando se faz
referências a um documento de um outro site. Desta forma, a página
anterior continua sendo visível.
8
6. Frames inline
A linguagem HTML comporta uma outra forma de criar um frame que
apenas na versão 6.0 passou a também ser implementada pela Netscape:
frames inline.
Exercícios:
Resumo:
Auto-avaliação:
Você concluiu com sucesso os exercícios? Então está pronto para utilizar
esse recurso em qualquer página, mas nunca exagere, uma página cheia
de frames fica muito pesada! Se não está bem seguro, já sabe o que deve
fazer, não? Isso mesmo! Leia o texto novamente e refaça os exercícios e
10
aí sim estará pronto para os formulários, que é o assunto da próxima
aula.
11
Aula 7: Formulários
Com certeza você já deve ter preenchido algum formulário em suas "viagens"
pela Internet, pois esta é uma forma cada vez mais comum de interagir com os
visitantes de um site, para obter dados do visitante ou registrar sua opinião. Os
formulários são feitos como qualquer página. Eles são o assunto desta aula.
Objetivos:
Nesta aula você vai aprender tudo sobre construção de formulários e estará se
habilitando a criá-los. Conhecerá:
- as formas de envio pelos métodos POST e GET,
- o envio por e-mail,
- os diversos elementos de interação: campos de entrada de texto, botões de
seleção exclusiva e não-exclusiva e listas de seleção.
Pré-requisitos:
As aulas anteriores de links e tabelas serão importantes para entender bem os
formulários.
Programas CGI A tag <FORM> ... </FORM> delimita a área ocupada pelo formulário. Isto
(Common Gateway é, toda a seqüência de entrada de dados e de formatação do formulário deve ser
Interface) – são delimitada por essa tag.
programas
executados pelo Esta tag possui dois atributos principais que indicam quem vai receber os dados
servidor Web, de
onde recebem seus do formulário (atributo ACTION) e a forma como eles serão enviados pela rede
dados de entrada e (atributo METHOD).
para quem produzem
sua saída (que O atributo ACTION serve para informar a URL do programa CGI que irá
geralmente é uma processar o formulário. É possível utilizar este atributo para informar ao
página Web).
Freqüentemente ,são administrador do site que os dados do formulário serão enviados por e-mail.
escritos em uma Neste caso, o método de envio deve, obrigatoriamente, ser definido como
linguagem de script, POST.
como Perl.
São duas as formas de envio pela rede:
• Get - os dados são anexados à URL.
• Post - os dados são enviados separados da URL.
1
Quando o atributo METHOD recebe o valor GET, o conteúdo do formulário é
enviado para o servidor anexado à URL definida no atributo ACTION. Este
método é adequado a formulários pequenos, com pouca informação. Também
não é conveniente enviar dados sigilosos por este método pois, além deles
serem transmitidos sem nenhuma proteção, estarão visíveis na área de
endereços do navegador.
O outro valor que pode ser atribuído a METHOD é POST. Neste caso, as
informações do formulário são enviadas separadas da URL.
2
Cabo Verde <INPUT TYPE=checkbox NAME ="country"
VALUE ="Cabo Verde">
Angola <INPUT TYPE=checkbox NAME ="country" VALUE
="Angola">
Mocambique <INPUT TYPE=checkbox NAME ="country"
VALUE ="Mocambique">
Timor Leste <INPUT TYPE=checkbox NAME ="country"
VALUE ="Timor Leste"></P>
<p>Seu interesse neste tema se relaciona a:
<SELECT NAME ="interesse">
<OPTION VALUE ="curiosidade"> curiosidade
<OPTION VALUE ="pesquisa">pesquisa
<OPTION VALUE ="programas">programas
<OPTION VALUE ="trabalhos">trabalhos
<OPTION VALUE ="imagens">imagens
<OPTION VALUE ="aplicacao">aplicacao
<OPTION VALUE ="outros">outros</SELECT ></p>
3
2. A tag <INPUT>
A tag <INPUT> é bastante versátil e permite criar:
• campos para entrada de texto
• campos para entrada de senhas
• botões comuns
• botões estilo rádio
• botões de seleção múltipla
4
usuário digite “joao” e envie o formulário, a informação será recebida pelo
programa na forma de “conta=joao”:
Conta:<INPUT TYPE=TEXT NAME=conta>
Para se indicar o número máximo de caracteres que pode ser digitado pelo
usuário deve-se definir o atributo MAXLENGTH.
Para tirar proveito do “sigilo”, este tipo de campo deve ser enviado pelo
método POST.
Estes elementos são criados pela tag <INPUT> com o atributo TYPE=RADIO.
Para indicar ao navegador quais botões são mutuamente exclusivos é preciso
que eles tenham o atributo NAME definido com o mesmo valor.
O atributo VALUE deve ser definido de modo a diferenciar qual dos botões está
selecionado (já que todos têm o mesmo NAME). Através do atributo CHECKED
é possível indicar que uma das alternativas estará previamente selecionada. No
exemplo abaixo, a opção “Superior” está previamente selecionada; se o
usuário selecionar “Analfabeto” a informação enviada ao programa será
“instruc=A”.
Nível de Instrução:<br>
<INPUT TYPE=RADIO NAME=instruc VALUE=A>Analfabeto<br>
<INPUT TYPE=RADIO NAME=instruc VALUE=1>Primeiro grau
<br>
<INPUT TYPE=RADIO NAME=instruc VALUE=2>Segundo grau
<br>
<INPUT TYPE=RADIO NAME=instruc VALUE=S CHECKED>Nivel
superior<br>
Os atributos NAME e VALUE devem ser definidos como nos botões de seleção
exclusiva.
6
2.5. Usando a Tag <INPUT> para Criação de Botões de Ação
A tag <INPUT> também serve para a criação de botões de ação. Estes botões,
diferente dos elementos de interação que vimos até agora, não estão associados
a informações que serão enviadas ao servidor. A seleção de um destes botões
pelo usuário faz com que uma ação seja realizada (pode ser uma ação padrão
do navegador como: enviar o formulário ou apagar o conteúdo de seus campos
ou ainda o resultado da execução de um programa numa linguagem de script).
Estes botões têm a aparência de teclas, como você pode observar na parte
inferior da figura 7.1.
Estes botões são gerados pela atribuição dos valores BUTTON, RESET ou
SUBMIT a TYPE. Os dois últimos valores têm ações especiais associadas. A
definição do atributo TYPE=SUBMIT inclui um botão para fazer o envio do
formulário. A definição do atributo TYPE=RESET inclui um botão que limpa
os campos do formulário, permitindo que o usuário redefina suas escolhas.
Nestes botões, o atributo VALUE define um texto para ser escrito no interior do
botão. A omissão deste atributo faz com que o navegador exiba um texto
default, em língua inglesa.
O atributo NAME deve ser definido para indicar a variável que será associada ao
texto inserido. O tamanho da área de texto é definido pelo número de linhas
(atributo ROWS) e pelo número de colunas (atributo COLS).
7
4. As Tags <SELECT> e <OPTION>: Listas de Seleção
Quando há muitas opções a escolher, pode não ser muito prático utilizar botões
de seleção exclusiva ou botões de seleção múltipla para não ocupar muito
espaço na página. Uma alternativa a eles são as listas de seleção criadas através
da tag <SELECT> ... </SELECT>.
No exemplo do início da aula, esta tag foi usada para apresentar ao usuário as
opções que aparecem após a linha: "Seu interesse neste tema se
relaciona a:". Como você pode ver na figura 7.1, no formulário, ela
criará um "menu suspenso" que aparece na forma de uma janela com lista de
opções. Este tipo de menu é chamado de pull down.
No interior da tag <SELECT> deve ser colocada cada uma das opções da lista
(no interior da tag <OPTION>). O atributo SELECTED pode ser utilizado para
definir qual opção está previamente selecionada. O exemplo a seguir mostra a
utilização deste atributo:
Sexo:
<SELECT NAME=sexo>
<OPTION SELECTED>Masculino
<OPTION>Feminino
</SELECT>
O atributo MULTIPLE indica que mais de uma opção pode ser selecionada,
consequentemente, se ele estiver definido, podemos utilizar o SELECTED em
mais de uma opção.
O atributo NAME deve ser utilizado para definir o nome da variável que será
enviada ao programa. O atributo SIZE indica o número de opções mostradas
de uma só vez pelo navegador, sendo que o valor default é SIZE=1 (como
pode ser visto nas linhas HTML do exemplo inicial). As demais opções podem
ser acessadas através de uma barra de rolagem, que se abre ao ser clicado o
ícone à direita da lista (com aparência de um triângulo apontando para baixo).
A figura 7.1 mostra o exato momento em que a lista de opções está sendo
exibida. Numa lista de SIZE=1 , após o carregamento da página, apenas o
OPTION que estiver com o atributo selected definido é mostrado.
Exercício:
Utilize as novas tags para criar uma página de pesquisa de opinião sobre
"preferências esportivas". Desenhe no formulário campos com botões
exclusivos para identificar o sexo, o estado civil e a faixa etária da pessoa que
responde à pesquisa. Atribua a botões de seleção múltipla diversas
modalidades esportivas, e permita que o usuário que selecionar "outras" inclua
uma nova. Use campo de texto para identificar a cidade onde mora a pessoa.
Através de <select> permita que ela aponte o estado onde mora. Permita
que ela inclua comentários através de um campo de textarea. Inclua os
botões para envio ou redefinição das respostas do formulário. Faça,
finalmente, a página ter um alinhamento de parágrafo agradável e inclua um
título.
8
Resumo:
Nesta aula, você aprendeu novas tags para definição dos elementos de
interação dos formulários na linguagem HTML. Viu como definir a forma
como os elementos de interação apareceram em um documento e o conteúdo
que o formulário, quando preenchido, retornará ao programa que manipulará os
dados enviados pelo usuário. Fez ainda uso destes recursos, testando seus
novos conhecimentos no projeto uma página de pesquisa de opinião (no
exercício sugerido).
Auto-avaliação:
Você construiu a página de pesquisa com facilidade? Então está pronto para
criar páginas com esse recurso poderoso de interação com os visitantes. Se não
está bem seguro, já sabe o que deve fazer. Ou precisamos lembrar? Por certo
que não, afinal estamos no final de uma etapa, a próxima é nossa última aula
do primeiro módulo do nosso curso.
9
Aula 8: Folhas de Estilo
Nesta aula você estará se habilitando a usar Folhas de Estilo, um recurso que
permite separar o estilo do documento da sua estrutura. A introdução das folhas
de estilo representa um passo importante na evolução da Web, útil para facilitar
a atualização e a manutenção do padrão de um conjunto de páginas sob sua
administração.
Objetivos:
- Aprender a sintaxe básica das folhas de estilo.
- Usar seletores, propriedades e valores.
- Incluir seletores contextuais e múltiplos.
- Conhecer as classes de estilo e as pseudo-classes.
- Usar identificadores.
- Fazer definição inline.
- Estilos de divisão e de trecho de parágrafo.
Pré-requisitos:
Todas as aulas anteriores serão usadas nesta última aula, se algo ainda não
estiver bem, especialmente até a aula 4, reveja estes tópicos e tire suas dúvidas.
1. Folhas de Estilo
Até a versão 4 da linguagem HTML, caso se desejasse criar páginas cuja
aparência fosse ligeiramente diferente do comportamento padrão, era
necessário incluir os atributos e tags que definissem essa aparência nos pontos
do documento onde fosse necessário, misturados à própria estrutura do
documento.
Por exemplo, num documento cujo texto fosse de cor preta (definida na tag
<BODY> através do atributo TEXT color=black), caso se desejasse
cabeçalhos de cor azul marinho seria necessário incluir, em cada ocorrência da
tag <H1></H1>, a tag <FONT color=navy> </FONT>. Qualquer
modificação a ser realizada nesta definição tornava necessário buscar por todo
o documento o que deveria ser modificado.
Essa estratégia torna sua página mais flexível e fácil de atualizar. Ela
possibilita separar a tarefa de tornar o site graficamente atraente das tarefas
ligadas à programação. Essa separação é importante pois geralmente é feita por
pessoas com formações e experiências profissionais diferentes. A criação
artística do visual do site é o trabalho de um designer visual, geralmente com
formação na área de Artes. A geração do conteúdo do documento é o trabalho
1
do programador HTML ou de algum especialista em um utilitário de criação de
páginas, ou seja, pessoas que são da área técnica em informática.
Nesta aula veremos em detalhes a sintaxe padrão. O exemplo a seguir faz com
que todos os cabeçalhos do tipo 1 (<H1>...</H1>) sejam escritos
utilizando a fonte Arial e a cor azul; e todos os cabeçalhos do tipo 2
(<H2>...</H2>) e 3 (<H3>...</H3>) sejam escritos utilizando a fonte
Bazzoka e a cor verde:
<STYLE TYPE="text/css">
<!--
H1 {
font-family: Arial;
color: blue;}
H2,H3{
font-family: Bazzoka;
color: green; }
-->
</STYLE>
Ou seja, as folhas de estilo CSS são especificadas como uma lista de nomes de
seletores com diversas propriedades especificadas pelos seus valores separados
2
por ponto-e-vírgulas, onde cada nome de seletor com propriedades e valores
comuns é separado por vírgula.
Os seletores podem ser uma tag ou uma classe de HTML (ou uma única tag
com o identificador especificado), podem-se também fazer diversas atribuições
ao mesmo tempo ou fazer atribuições sensíveis a certo contexto. Você pode
encontrar as especificações completas das CSS no site da W3E:
http://www.w3.org .
4
Tabela 8.3 - Propriedades relacionadas aos espaçamentos
Letter spacing Propriedades Valores Possíveis Browser
define o espaçamento letter-spacing tamanho Explorer
entre as letras do
texto. white-space normal, nowrap, pre Netscape
line-height tamanho, percentual, normal ambos
White space margin-top tamanho, percentual, auto ambos
define o espaçamento
em branco.
margin-bottom tamanho, percentual, auto ambos
margin-right tamanho, percentual, auto ambos
pre se refere à fonte margin-left tamanho, percentual, auto ambos
mono-espaçada. margin tamanho, percentual, auto Explorer
nowrap impede a padding-top tamanho, percentual, auto ambos
quebra de linha do padding-bottom tamanho, percentual, auto ambos
texto dentro da célula. padding-right tamanho, percentual, auto ambos
padding define as
padding-left tamanho, percentual, auto ambos
margens dentro da padding tamanho, percentual, auto Explorer
célula. word-spacing tamanho ambos
word spacing
float none, left, right ambos
refere-se ao clear none, both, left, right ambos
espaçamento entre
cada palavra do texto. Tabela 8.4 - Propriedades relacionadas às listas
Propriedades Valores Possíveis Browser
list-style- URL, none explorer
image
list-style- circle, square, disc, lower- ambos
type alpha, upper-alpha, lower-roman,
upper-roman, decimal, none
list-style image type ambos
5
Tabela 8.6 - Propriedades relacionadas às bordas
Propriedades Valores Possíveis Browser
border-top- tamanho, thin, thick, medium ambos
width
border- tamanho, thin, thick, medium ambos
bottom-width
border-right- tamanho, thin, thick, medium ambos
width
border-left- tamanho, thin, thick, medium ambos
width
border-top cor width style Explorer
border-bottom cor width style Explorer
border-right cor width style Explorer
border-left cor width style Explorer
border-color cor, #RRGGBB ambos
border-width tamanho, thin, thick, medium ambos
border-style none, dashed, dotted, double, ambos
groove, inset, outset, ridge.
solid
border cor width style ambos
Como você deve ter notado nos quadros acima, há 5 formas distintas de
definição dos valores das diferentes propriedades:
• palavras-chave,
• tamanhos,
• percentuais,
• URL's, e
• cores.
Quando na coluna valores possíveis aparece “cor”, esta pode ser descrita por
até 3 formas:
• seu nome em inglês;
• a forma usada em HTML; e
• na forma rgb(valor,valor, valor).
No caso da forma da linguagem HTML, essa definição nas folhas de estilo não
pode estar entre aspas. Os valores de vermelho, verde e azul da última forma
podem aparecer definidos em valores absolutos correspondendo a números de
0 a 255 ou em percentagens. São, portanto, valores válidos de cor: yellow,
#FFFF00, rgb(255, 255, 0) ou ainda rgb(100%, 100%, 0%).
3. Compartilhando Estilos
7
4. Classes de Estilo
Com o que foi visto até o momento, ao definir o estilo de uma tag, sempre que
ela for utilizada no documento terá o aspecto determinado por este estilo.
Muitas vezes porém é desejável que uma tag tenha vários aspectos de acordo
com o local onde é utilizada.
É possível, portanto, criar diferentes estilos para uma tag criando várias
classes. Para criar uma classe basta acrescentar ao nome da tag, no seletor, o
caracter ponto (‘.’) seguido de um nome para a classe.
Para aplicar o estilo (definido numa classe) a uma tag basta utilizar o atributo
class, definindo como valor o nome da classe desejada. No exemplo a seguir, o
primeiro cabeçalho estará sujeito à definição de tamanho e tipo de fonte e será
escrito na cor padrão; o segundo e o quarto cabeçalho também estarão sujeitos
à definição de tamanho e tipo de fonte mas serão escritos na cor vermelha; o
terceiro, por sua vez, estará sujeito à definição de tamanho e tipo de fonte, mas
será escrito na cor verde:
<h1> Cabecalho normal</h1>
<h1 class=vermelho> Cabecalho Vermelho</h1>
<h1 class=verde> Cabecalho Verde</h1>
<h1 class=vermelho> Outro Cabecalho Vermelho</h1>
A tag <A> tem algumas classes com nomes pré-definidos que são associadas a
estados assumidos por esta tag. Estes estados são descritos na tabela 8.7.
5. Identificadores
Da mesma forma que uma classe modifica as definições feitas para uma tag, é
possível redefinir, em um determinado elemento do documento, as definições
de uma classe.
6. Estilos inline
Uma outra forma de redefinir o estilo de uma tag é através do atributo STYLE.
Este atributo pode ser colocado em qualquer tag e tem precedência sobre os
estilos definidos através dos atributos ID e CLASS.
No exemplo a seguir, usa-se esta forma para fazer o segundo cabeçalho herdar
da classe o tipo de fonte, herdar do identificador o tamanho, e assumir a cor
definida no atributo STYLE:
<STYLE>
H1.grande {
font-family: arial;
font-size: xx-large;
color: green;
}
#azul {
font-size: x-large;
color: blue;
}
</STYLE>
...
<H1 class=grande> Muito grande e verde </H1>
<H1 class=grande id=azul STYLE=“color: red;”>
Grande, vermelho e com fonte Arial
</H1>
A única diferença entre estas duas tags é que a tag <DIV> causa,
necessariamente, uma mudança de linha antes e depois de sua utilização, ao
passo que a tag <SPAN> pode ser utilizada no meio de um parágrafo, sem
causar nenhuma quebra de linha.
A tag <DIV> pode ser utilizada para definir o estilo de vários parágrafos, sem
que seja necessário definir um a um o estilo das tags <P> destes parágrafos.
Estas duas tags têm uma grande importância em HTML 4 pois servem para
definir camadas (ou em inglês layers, o que está associado a posicionamento
dinâmico, um assunto importante para DHTML- Dynamic HTML).
Exercícios:
3. As linhas que seguem resumem tudo o que vimos sobre folhas de estilo.
<style type=“text/css”>
H1,H2 { color:blue;font-style:italic}
<--! elementos da classe aviso
tem aparencia especial -->
.aviso{
font-weight:bold;
background-color:yellow;
margin-left:1in;
margin-right:2cm;
border-color:red;
border-width:8px;
border-style:solid
}
<--! os tipos H1 e H2 na classe aviso estarao
centrados -->
.aviso H1, .aviso H2{text-align:center}
11
<--! define um elemento especial
:ID=“P23 -->
#P23 {
text-align:center;
text-transform:uppercase;
}
</style>
<H1>Exemplo de folhas de estilo em cascata
</H1>
<div class=“aviso”>
<H2>Cuidado</H2>
Esteja atento! Note que chamou-se a atencao com um
texto em negrito e cores brilhantes. Note ainda que o
titulo "Cuidado" aparece centrado em italico e azul.
</div>
<p ID=“P23”>
Este paragrafo ficou centrado<br>
e em letras maiusculas.<br>
<span style=“text-transform:none”>
Aqui explicitamente usou-se um estilo inline para se
sobrepor as maiusculas.
</span>
</p>
Resumo:
Nesta aula você aprendeu a usar CSS em HTML, ou seja, aprendeu como
estruturar sua página para ter sua formatação (a forma como ela aparece)
separada do conteúdo do documento. A vantagem desta estratégia é que agora
um artista gráfico pode modificar o arquivo CSS e propiciar uma aparência
melhor, sem tocar em seu código. Pois afinal um layout agradável sempre atrai
mais a atenção dos visitantes, possibilita que eles encontrem facilmente o que
desejam ver em sua página e voltem com mais freqüência ao site! Essa
aparência pode ser associada a um grupo inteiro de páginas e modificada de
tempos em tempos com muita facilidade. Este é um elemento importante para
você reduzir seu tempo de manutenção dos sites. O que abre para você
caminhos para ser um construtor profissional de páginas Web!
Auto-avaliação:
Esta é uma das aulas mais complexas, ela apresentou um conjunto muito
grande de novas informações. Você realmente só ficará à vontade com elas
depois de concluir a execução de um razoável número de atualizações de
páginas usando CSS. Talvez o mais importante neste ponto seja o
conhecimento dos caminhos que ela lhe abre e isso você pode antever
executando bem os exercícios.
12
Bibliografia auxiliar Aula 9: Elementos da Linguagem JavaScript
para o segundo
módulo:
Bem-vindo ao segundo módulo do nosso curso! Nele você aprenderá como incluir
Goodman, Danny programas, ou scripts, em suas páginas Web. Este módulo será todo dedicado à
JavaScript, a Bíblia , linguagem JavaScript. E nessa aula você aprenderá o que é JavaScript, o que pode
Rio de Janeiro:
Editora Campus, fazer com ela, e como inclui-la nas suas páginas HTML.
2001.
Documentação da Apesar da expectativa criada pelo nome, esta linguagem tem muito pouco a ver
Microsoft: com Java. Além de alguma semelhança sintática e do fato de que, tanto Java
http://msdn. quanto JavaScript, podem fornecer um conteúdo executável pelos navegadores
microsoft.com/ Web, a principal relação entre as duas linguagens vem de sua origem comum: as
scripting/JScript/doc/
Jstoc.htm.
linguagens C e C++.
1
• retornar para a página anteriormente visitada;
• abrir/fechar janelas;
“Cookie” é o termo
usado (inicialmente • exibir páginas diferentes de acordo com o browser do usuário;
pelo Netscape) para • controlar o conteúdo de formulários HTML.
descrever uma
pequena quantidade de JavaScript, no entanto, não possibilita escrever ou ler arquivos; não possui
dados armazenados
pelo cliente de forma capacidade de desenho, não suporta estabelecer conexões em rede, nem oferece
temporária ou possibilidades de processamento em segundo plano ou multitarefa
permanente. Cookies (multithreading).
são transmitidos de e
para o servidor e
permitem que a página 2. Tipos e Versões de JavaScript
ou o site “lembre” de
coisas sobre o cliente,
Existem variantes da linguagem dependendo do contexto onde se embute o
como por exemplo:
que o usuário já visitou JavaScript. Algumas destas são as chamadas Client-Side JavaScript ou "no lado
antes o site, já se do cliente" e Server-Side JavaScript ou "no lado do servidor".
registrou ou expressou
anteriormente alguma Em nosso curso abordaremos apenas a forma executada no cliente (client-side).
preferência sobre o
Nesta forma, que é a variante mais comum, quando a maioria das pessoas se
layout da página.
JavaScript permite ler referem à JavaScript está se referindo a esta forma, o interpretador se encontra
e escrever valores nos embutido no navegador Web. A forma no lado do servidor (server-side) é
cookies, podendo gerar utilizada nos servidores Netscape como uma alternativa aos scripts CGI. Nesta
HTML baseado nos forma, diferente da client-side, é possível ler e escrever arquivos e bancos de
valores descritos neles.
dados no servidor.
2
Na primeira forma, a tag <script> pode aparecer em qualquer lugar da página,
inclusive na área de cabeçalho (dentro da tag <HEAD> ... </HEAD>).
Quando incluída na área de cabeçalho, o programa é executado antes que a página
seja totalmente carregada. As linhas abaixo exemplificam esta forma:
<script language=“Javascript”>
<!--
...//codigo Javascript ...
-->
</script>
Quando esta forma de JavaScript for usada é possível utilizar a tag <NOSCRIPT>
... </NOSCRIPT> para exibir uma alternativa ao código JavaScript em
navegadores que não saibam executá-lo.
No exemplo atividade do final da aula, você terá a oportunidade de ver com mais
detalhes estas formas.
A estrutura léxica de JavaScript é uma linguagem case sensitivity (como C e diferente de HTML): as
uma linguagem de letras minúsculas (lowercase) são diferenciadas das maiúsculas (uppercase). Isso
programação é o significa que as palavras-chave da linguagem, as variáveis, os nomes de funções
conjunto de regras ou qualquer outro identificador deve sempre ser escrito da mesma forma. A
elementares que
especificam como palavra-chave break, por exemplo, se for escrita Break ou BREAK representará
você escreve outra coisa e não mais a palavra-chave.
programas com ela.
Definindo coisas Algumas exceções a esta regra são, entretanto, encontradas na forma executada no
como a aparência dos cliente (client-side). No Explorer 3, por exemplo, todos os objetos e propriedades
nomes, as formas
usadas para executados no cliente são case-insensitive. Outro exemplo são as folhas de estilo
comentários, e como JavaScript executadas no cliente no Navigator 4, que permitem a especificação de
os comandos são estilos por tag HTML (projetadas com o propósito de serem case-insensitive).
separados uns dos
outros. Os espaços em branco, as tabulações (tabs) e as mudanças de linha (newlines)
entre os comandos são ignorados. Você pode assim usar os espaços e as mudanças
3
de linha livremente ou de uma maneira consistente em seu programa de modo a
torná-lo fácil de entender.
O caracter ponto e vírgula (;) deve ser usado como limitadores, após cada
comando. Esta é a mesma forma de limitar comandos de C, C++ e Java. Mas em
JavaScript você pode omiti-los se os comandos se encontrarem em linhas
diferentes. Por exemplo, nas linhas abaixo você, poderia tê-los omitido.
a=3;
b=5;
Mas o primeiro ";" não poderia ser omitido se você escrevesse ambas as
atribuições na mesma linhas, como:
a=3;b=5;
Não é um bom hábito deixar por conta da linguagem, onde os comandos devem
ser separados. O melhor é você se acostumar a sempre usá-los. Saber que a
linguagem JavaScript permite que dois comandos sejam separados por linhas,
automaticamente inserindo ponto e vírgula por você, evita alguns mal-entendidos.
As barras duplas, //, em qualquer ponto da linha fazem com que o interpretador
ignore todos os demais caracteres até o fim da linha.
4
5. Tipos de Dados
Os tipos de dados utilizáveis por uma linguagem é um dos seus aspectos mais
fundamentais. JavaScript tem 3 tipos primitivos de dados: números, strings e
booleanos.
Uma variável é um nome associado a um dado ou valor, diz-se que uma variável
"armazena" ou "contém" um valor. Elas permitem que se armazene e manipule
dados no programa, assumindo ou recebendo valores diferentes. Por exemplo, na
linha abaixo se atribui à variável denominada inicio o valor 2, e depois
adiciona-se a inicio o valor 3, e atribui-se o resultado a uma nova variável.
soma:
inicio = 2;
soma = inicio + 2;
Os nomes de variáveis podem conter letras, dígitos (desde que não seja o primeiro
caracter do nome), o caracter ‘_’ e o caracter ‘$’. Algumas palavras não podem
ser usadas como nome de variável, pois são reservadas para comandos e
expressões da linguagem, como por exemplo: true, var, if, while etc.
Se uma variável é criada no momento em que é utilizada pela primeira vez, o seu
tipo é definido pelo tipo do valor que ela recebe. Se uma variável é utilizada sem
que antes tenha um valor atribuído, o seu valor é undefined.
5
Embora não seja muito recomendável, é possível modificar o tipo de uma variável
que já tenha sido criada simplesmente atribuindo um valor de outro tipo. Isso
ocorre porque JavaScript, diferente de C, Java, Pascal e de muitas outras é uma
linguagem não-tipada (untyped). Ela automaticamente converte valores de um
tipo para outro se necessário. Nós veremos mais sobre isso quando falarmos de
Conversão de tipos de dados, na próxima aula. A mudança do tipo de uma
variável é, entretanto, uma fonte potencial de erros de execução e deve ser no
mínimo usada com consciência.
5.1 - Números
Número é o tipo mais básico possível e não requer explicação, a não ser pela
observação de que (diferente de C e Java) JavaScript não faz distinção entre
valores inteiros e reais (pontos flutuantes). Todos os números em JavaScript são
representados como valores de ponto flutuante em 8 bytes.
Um valor literal octal (número na base 8) começa com o dígito zero, seguido por
uma seqüência de números entre 0 e 7. Como em C e C++ , um literal
hexadecimal começa com 0x ou )X, seguido de dígitos de 0 a 9 ou letras a (ou A)
a f (ou F), as quais representam os números 10 a 15.
Os literais de ponto flutuante podem ter um ponto decimal, uma parte inteira do
número e uma parte fracionária (depois do ponto decimal). Também podem ser
representados na notação exponencial: onde a letra e (ou E) seguida de um sinal +
ou - introduz expoentes inteiros que representam potências de 10. De modo que
100.10=1.001e+2, ou 0.01=1E-2.
Outro valor numérico especial aparece quando uma operação matemática resulta
um valor indefinido (por exemplo em uma divisão de zero por zero). Neste caso, o
6
resultado é um valor especial denominado "not-a-number" que é impresso como
NaN. Este valor tem uma propriedade especial: em uma operação de comparação
(veremos estas operações na próxima aula) não é igual a nenhum número nem a
ele próprio. Por este motivo existe uma função especial isNaN() para testar
este valor.
Existem constantes definidas para cada um dos valores numéricos especiais. Estas
são listadas na tabela 9.3. O exemplo atividade no final da aula, mostra como elas
são vistas na página gerada pelo script.
5.2. Strings
7
Como JavaScript é usada para produzir páginas Web, você provavelmente usará
muitas strings literais em seus scripts. Uma das propriedades embutidas na
linguagem é a possibilidade de concatenar strings. Se você usar o símbolo +
(mais) com números, terá como resultado uma operação de adição. Mas se você
usar este símbolo com strings, você as juntará simplesmente acrescentando a
segunda à primeira, o que é chamado de concatenação. Por exemplo:
"2 dividido por " + "0" + " = " + "matematicamente
indefinido !"
5.3. Booleanos
O tipo booleano de dados pode ter apenas 2 valores: true (verdadeiro) ou false
(falso). Valores booleanos são geralmente o resultado de comparações feitas no
programa.
Exemplo Atividade:
<HTML>
<HEAD>
<TITLE>Curso de Construção de
Páginas WEB- Mod. 2
</TITLE>
</HEAD>
<BODY>
<H1 align=center >
Primeiro Exemplo de JavaScript
</H1>
<H2>
Usando os tipos de dados para calcular
potências de 2.
</H2>
<script language=“Javascript”>
8
{
document.write("2 elevado a "+ i + " = "+ pot);
document.write("<br>");
}
document.write("<br><h2>Tipos especiais:</h2>");
document.write(" 2 dividido por 0 = " + 2/0 );
//Infinity
document.write('<br>');
document.write("-2 dividido por "+ 0 +' = '+ -2/0);
//-Infinity
document.write('<br>');
document.write("0 dividido por "+ 0 + ' = '+ 0/0 );
//NaN
</script>
</BODY>
</HTML>
Bata estas linhas e carregue-as em uma página Web. Quando você carregar esta
página em um navegador que interpreta JavaScript verá a tela mostrada a seguir,
na figura 9.1. Neste exemplo, você usou a tag <script> para embutir o código
JavaScript dentro da página. Você certamente ficou sem entender alguns detalhes.
Sublinhe no código acima as linhas em que não entendeu alguma coisa.
Você merece parabéns se a primeira linha que você não entendeu foi:
document.write("2 elevado a "+ i + " = "+ pot);
Ela exemplifica o método document.write( ); . Este método é usado
para escrever textos, dinamicamente, na página HTML, e nós o usaremos muito
ao longo do curso. Falaremos sobre ele detalhadamente nas próximas aulas. Mas
agora, olhando para o resultado obtido na página, e, em todas as vezes que este
método foi usado, tente entender todas as outras linhas em que ele aparece.
Exercícios:
9
Figura 9.1 - Página gerada pelo código do exemplo atividade
Resumo:
Nesta aula, você aprendeu a incluir programas nas páginas HTML. O que é e
como é a estrutura básica da linguagem JavaScript. Fez uso desta ferramenta
escrevendo páginas com “programas embutidos” e testou seus novos
conhecimentos nos exercícios.
Auto-avaliação:
Você concluiu com sucesso os exercícios? Se não entendeu bem apenas os
métodos que apareceram no exemplo atividade e nos exercícios ( isto é:
document.write( ); for(....), onClick="alert('clicaram-
me!')" > ) não se preocupe, estes pontos são para estimular sua curiosidade e
lhe mostrar as potencialidades de JavaScript, e ficarão bem claros nos assuntos
das próximas aulas. Mas se teve outras dúvidas, talvez seja melhor ler novamente
a aula, antes de passar para os Comandos que serão apresentados na próxima.
10
Aula 10: Operadores da Linguagem
JavaScript
Objetivos:
Aprender:
- Operadores: aritméticos, relacionais e lógicos
- Atribuição composta
- Conversão implícita e explícita de tipos, e
- Formas de entrada e saída
Pré-requisito:
A aula 9.
1. Introduzindo Operadores
1
Se os operadores de incremento e de decremento aparecem
no meio de uma expressão, o comportamento destes
operadores depende de sua posição em relação ao operando.
2
Tabela 10.2 - Operadores de Comparação
JavaScript Pascal Significado
> >= > >= Maior que, Maior e igual a
< <= < <= Menor que, Menor e igual a
== = Igual a
!= <> Diferente de
3
dois operandos.
4
caso do operador +, nos demais casos, a string será
convertida para um valor numérico, quando possível (quando
não for possível será convertida para o valor numérico
especial que vimos na aula passada: NaN - não é numérico).
No exemplo abaixo a variável sub recebe o valor 45:
x = “55”;
sub = x - 10; // resulta 45
5
5 % 2 resulta 1, mas 4.3 % 2.1 resulta 0.1. O resultado
da operação resto da divisão, %, em JavaScript pode ser
positivo ou negativo: terá o sinal do primeiro operando.
6
com a ordem alfabética. Se um deles é string e o outro
número, o operador tenta converter a string para número e
fazer a comparação. Caso um deles não puder ser convertido
para número ou string, o resultado da comparação será
sempre false.
Latin-1 é uma forma
de codificação de No entanto, a ordem alfabética usada na comparação de
caracteres que usa 8 strings é a da codificação Unicode (ou dos subconjuntos
bits (1 byte), usada ASCII ou Latin-1 em implementações não
na Europa Ocidental,
e padronizada pela
internacionalizadas). E, nesta codificação, as maiúsculas vêm
ISO 8859-1. antes das minúsculas, o que significa que o código destas é
sempre maior que o daquelas. Assim "Ar" < "ar" será sempre
verdade!
7
Tabela 10.6 - Ordem de avaliação das expressões
1º ! - ++ --
2º * / %
3º + -
4º < <= > >=
5º == !=
6º &&
7º ||
8º ?:
9º = += -= *= /= %=
8
comentamos, detalhadamente, nas seções anteriores desta
aula). Mas, algumas vezes, é importante que esta conversão
seja feita por você na forma que realmente você deseja. A
linguagem lhe oferece algumas funções para isso. A seguir
comentaremos duas funções predefinidas para conversão
explícita de tipos e outras funções auxiliares na avaliação de
expressões.
Exemplos:
num = “3A”;
x = parseInt(num);
y = parseInt(num,16);
Exemplos:
num = “3.4”;
x = parseFloat (num);
Exemplos:
expr = “x*2+5”;
result = eval(expr);
9
2.4. Função isNaN
Exemplos:
x = prompt(“Entre um numero:”,””);
if (isNaN(x)) { ... }
Sintaxe: document.write(string);
Descrição: Escreve uma string na página em exibição pelo
navegador.
Sintaxe: alert(aviso);
Sintaxe: prompt(mensagem);
10
texto, exibindo a mensagem passada como parâmetro. A
função produz como resultado (retorna) o texto digitado pelo
usuário, que deve ser atribuído a uma variável.
Exemplo:
nome = prompt(“Digite o seu nome”);
Sintaxe: confirm(mensagem);
Exemplo Atividade:
11
<BODY>
<H2 align=center >
Segundo Exemplo de JavaScript
</H2>
<script language="Javascript">
document.write("<h3>Bem-vindo"
+nome+"!</h3>");
n=prompt("Digite algo!"," ");
alert("Iremos providenciar a
avaliacao \n\n\n\t Espere um pouco!"+
"\n_______________________________\n\
n\n Paciencia!");
var mensagem='voce digitou: \t'+n;
if(confirm(mensagem))
document.write("<h3>Acertei!</h3>");
</script>
</BODY>
</HTML>
12
Figura 10.2 - Formas de diálogo geradas por:
prompt(), aler()t e confirm()
Bem-vindo Carlos !
Exercícios:
13
2. Misture cada uma das operações que você deve ter feito no
exercício anterior com as formas de interação do exemplo
atividade deste capítulo. Ou seja, use prompt, alert e
confirm, para incluir variáveis fornecidas pelo usuário nas
avaliações das expressões.
Resumo:
Auto-avaliação:
14
Aula 11: Desvios e Laços
Objetivos:
Aprender:
- o desvio condicional if – else;
- o que são blocos de comandos;
- como usar o operador condicional ternário;
- o funcionamento do comando switch;
- os laços while, for e do – while; e
- os comandos break e continue.
Pré-requisitos:
As aulas anteriores deste módulo.
1
{ comando;
comando;
...
comando;
}
2. Desvio Condicional
Um desvio condicional permite escolher qual comando (ou
conjunto de comandos) será ou não executado de acordo com
uma condição.
2.1. O Comando if
if ( (estado==“RJ”) || (estado==“”) )
cidade = “Rio de Janeiro”;
2
manha = true;
document.write (“bom dia!”);
}
else
{
manha = false;
document.write (“boa tarde!”);
}
3
se deseja, deixando as coisas menos ambíguas, e mais
legíveis, a melhor solução é usar chaves!
if (pais=="Brasil") diz="Oi!";
else
if (pais=="Brazil") diz="Oi!";
else
if (pais=="USA") diz="Hi!";
else
diz="Ola!";
Não está havendo nada especial neste caso, a não ser que,
como no exemplo acima, sempre a mesma variável é testada,
o que possivelmente poderia sugerir que o mais eficiente
seria o uso de um comando condicional especial: o switch
(assunto da seção 2.3 a seguir).
4
operandos tem função diferente no comando. O primeiro,
delimitado pelo ponto de interrogação, é uma expressão que
deve ser avaliada. Se a avaliação for true, o operador terá
como resultado o valor do segundo operando, que vai da
interrogação até os dois pontos. Se a avaliação for false, o
operador terá o valor do terceiro operando, que aparece
depois dos dois pontos.
Assim: x>0 ? x : -x
sempre resultará no valor absoluto de x!
5
segue os ":" . Se nenhum valor igual é encontrado, o fluxo
do programa passa a executar a primeira linha de código que
segue ao rótulo default: , ou se não há rótulo default,
sai do switch, passando a executar a linha depois deste.
switch (pais)
{
case "Brazil":
case "Brasil":
diz="Oi!";
break;
case "USA":
diz="Hi!";
break;
default:
diz="Ola!";
}
document.write(diz);
6
constantes, e podem ser expressões compostas, desde que
possam ser avaliadas durante a etapa de interpretação do
código JavaScript (ou usando termos de informática em
tempo de interpretação). Assim, são permitidos para rótulos:
case 0:
case 60*60*24:
case "Alo"+"gente":
case Number.POSITIVE_INFINITY:
3. Laços
Os laços permitem manter o fluxo do programa restrito a uma
região até a ocorrência de alguma condição.
i = 0; i := 0;
while (i < 20) while i < 20 do
{ begin
i++; i := i + 1;
} end;
Forma geral:
while (condição)
{
comandos;
// executados enquanto
// a condição for verdadeira
}
7
Interação. (ou
inter-ação) se
while(true)
refere à document.write("sou o maior");
possibilidade de
cada entrada Usualmente não se deseja que a operação seja exatamente a
provocar uma mesma, de modo que geralmente uma ou mais variáveis
resposta.
permitindo uma
geralmente são modificadas a cada iteração. Como no
comunicação entre exemplo abaixo:
o usuário e o
computador. var i = 0;
while (i < 5) {
Iterativo é um
document.write (i + “<BR>”);
processo que se
repete. O trecho i++;
repetido é }
chamado de
iteração. É importante lembrar, finalmente, que se a expressão
inicialmente não for avaliada como verdade, nunca o laço
Assim interação e
iteração embora será executado.
sejam palavras
muito parecidas
significam coisas 3.2. Comando do/while
bem diferentes!
O comando do/while, que surgiu em JavaScript a partir da
versão 1.2, tem comportamento idêntico ao comando de
mesmo nome das demais linguagens: proporciona uma
execução inicial do bloco de comandos do laço antes da
comparação.
do
{
comandos;
// executados a primeira vez e
// enquanto a condição for verdadeira
} while (condição);
var i = 0;
do {
document.write (i + “<BR>”);
i++;
} while (i < 5);
8
3.3. Comando for
Permite repetir um bloco de comandos enquanto uma
condição for verdadeira. Esta condição é controlada por uma
variável, cuja inicialização e modificação (usualmente um
incremento) estão previstas na própria sintaxe do comando. A
sintaxe geral é mostrada a seguir:
for (atribuição; condição; incremento)
{
comandos;// executados
//enquanto a condição for
// verdadeira
}
Atribuição
F
condição
Comandos incremento
seguint
e
9
Tabela 11.4 - Comparando for
Em Javascript Em Pascal
Cada uma das partes não precisa ser exatamente única, mais
de uma variável pode ser inicializada, comparada, modificada
por vez, desde que separadas por " , " . Também estes
campos não precisam ter estes significados. O importante é
que a atribuição é executada apenas uma vez, antes do início
da execução do laço. A seguir, é feito o teste da condição. Se
esta for falsa, o laço não é executado. Se for verdadeira, os
comandos do interior do laço são executados, seguidos da
execução do modificador e volta-se ao teste da condição.
é equivalente às linhas:
i=1;
j=10;
fat=1;
10
vezes, a menos que o usuário selecione cancelar na janela
aberta pela função confirm:
for (i = 1; i < 10; i++)
{
if ( !confirm(“i = “ + i +
“\nDê um clique em Cancelar”) )
{
break;
}
}
alert(“O laço terminou\n i = “ + i);
var i = 1;
while (i < 10)
{
i++;
if (!confirm(“i = “ + i +
“\n Clique cancelar para executar
um continue”))
{
continue;
}
document.write(“iteração ” + i);
}
alert(“O laço terminou\ni = “ + i);
Exercícios:
11
mudar o fluxo do programa. Visualize em cada caso os
resultados que terá.
Resumo:
Auto-avaliação:
12
Aula 12: Funções
Objetivos:
Aprender:
- Funções sem parâmetros
- Funções com parâmetros
- Comando return
- Funções com retorno de valor
- Ativação de funções a partir de um hiperlink
- Escopo de variáveis (locais x globais)
Pré-requisitos:
Todas as aulas anteriores deste módulo.
1.1. Funções
Uma função é uma seqüência de comandos, realizando uma
tarefa específica, a qual se atribui um nome. Em
m JavaScript,
elas sempre são identificadas por um nome, podem ou não
receber parâmetros e também podem ou não retornar um
valor.
1
A linguagem apresenta diversas funções já predefinidas como
as já vistas em aulas anteriores. Funções feitas pelo
programador, depois de definidas, podem ser usadas
exatamente da mesma maneira que as já disponíveis na
linguagem.
2
Uma função pode receber parâmetros (também chamados
argumentos) que influem na sua execução. A "passagem de
parâmetros" é feita dentro do ( ) que segue ao nome da
função. Quando há mais de um parâmetro ou argumento eles
aparecem separados por vírgulas. Por exemplo, a linha que
segue define uma com 3 argumentos:
function xpto (p1, p2, p3)
{
comandos;
}
3
1.2. Comando return
4
x=2;
y=quadrado(x*2+5); //y=81, x=2
y=quadrado(quadrado(x));
2. Escopo de Variáveis
5
quadrado de uma forma levemente diferente e sua
utilização no cálculo da expressão x = 22 + 3 * 52:
6
document.writeln(escopo);
}
vendoEscopo();
document.writeln(escopo);//usa a global
O uso de </script>
"...." ........
significa que:
para que a Mas se você não tivesse usado var dentro da função, esta
página seja
visualizada,
não seria uma outra variável e, o que você estaria fazendo
outras linhas seria se referir a mesma variável global, de modo que ao
devem ser alterá-la na função estaria alterando a variável global.
incluídas, ou Compare os dois casos:
seja ,indicam <script language="Javascript">
que o document.writeln("entendendo escopo de
exemplo não variaveis:" );
está completo. escopo="global";
document.writeln(escopo);
function vendoEscopo()
{
escopo="local";//agora altera a global
document.writeln(escopo);
}
vendoEscopo();
document.writeln(escopo);
</script>
7
document.writeln("2"+escopo);
interior();
document.writeln("2"+escopo);
}
document.writeln("1"+escopo);
vendoEscopo();
document.writeln("1"+escopo);
</script>
8
Rode depois o mesmo exemplo mais duas vezes tirando em
cada caso uma das palavras var, ou seja, fazendo serem
globais e não variáveis locais. Mas embora caracterizada
como local em toda a função, a variável pode não ter sido
definida, desde que seu valor não tenha sido inicializado. Se
você comentar a linha I=1, ainda neste exemplo, veria no
local correspondente à primeira impressão do loop ser escrito
"undefined".
9
O Netscape exibira após a seleção da função view > Page
Source o seguinte resultado:
<HTML>
<BODY>
Hello,
there.
</BODY>
</HTML>
10
</BODY>
</HTML>
A forma de reportar
os erros de sintaxe
também mudou a
partir da versão 6 do
Netscape. Nesta
versão, o console
JavaScript é
invocado a partir do
menu:
tasks>tools> No caso do Netscape 4.x, o navegador não dá nenhum sinal
Javascript que ocorreu o erro. Só é possível descobrir que alguma coisa
Console
está errada porque não vai acontecer o que esperávamos. Para
fazer com que o navegador "mostre" o erro é necessário
digitar "JavaScript:" (incluindo os pois pontos) na
barra de endereços e teclar <enter>, o que causará a exibição
da janela mostrada na figura 12.2. Com as informações desta
janela deve-se ir na linha e coluna indicada e corrigir o erro.
11
Exercícios:
Resumo:
Auto-avaliação:
12
Aula 13: Introdução a Objetos
Objetivos:
Nesta aula você aprenderá:
- o que são objetos;
- os conceitos de classe e instância;
- o que são propriedades e métodos;
- a criação de uma instância;
- os tipos de objeto em JavaScript: embutidos, do browser e
personalizados; e
- as características e métodos do objeto String.
Pré-requisitos:
As aulas anteriores deste módulo, especialmente a seção que
explica as regras de escopo da aula passada, além de uma
revisão da Aula 1 do módulo 1.
1
Na perspectiva tradicional de resolução de problemas,
primeiro se decide quais as operações (funções) que serão
efetuadas, depois se pensa em quais dados estarão
envolvidos. Numa perspectiva “orientada a objetos”, primeiro
se identifica quais as entidades envolvidas para depois pensar
na interação entre elas.
imagem.largura
imagem.altura
documentos.imagem.largura
document.write("exemplo");
2
representar uma estrutura mais complexa. Os dados que
compõem um objeto são chamados de atributos ou
propriedades. Uma maneira de explicar isso em outras
palavras é dizer que um objeto é uma coleção de
propriedades, cada uma com um nome e valor. Os objetos
também introduzem uma vinculação entre os dados e as
operações ou métodos neles realizadas.
Objeto A
nome=“joao”
Classe
Aluno nota_trabalho=8
nota_prova=9
nome
nota_trabalho
nota_prova
Objeto B
nome="maria”
notaFinal( )
nota_trabalho=7
nota_prova=6
3
Se você somar a esta definição o código necessário para
manipular estes dados (para obter, por exemplo, a nota final),
e der a este conjunto um nome (Aluno, por exemplo), você
acaba de definir uma classe.
a = new Aluno();
b = new Aluno();
a.nome = “joao”;
a.nota_trabalho = 8;
a = new Aluno(“joão”);
b = new Aluno(“Maria”);
a.nota_trabalho = 8;
4
document.write(“Nota final de “,
a.nome,“ é “,a.notaFinal());
circuloPequeno.xcentro = 10;
circuloPequeno.ycentro = 20;
circuloPequeno.raio = 5;
document.write(“Perímetro=”,
2*3.14*circuloPequeno.raio);
circuloPequeno.desenha()
circuloPequeno.verificaSeDentro(15,25);
5
4. Tipos de Objeto de JavaScript
Em JavaScript existem 3 tipos de objetos:
• os embutidos ou predefinidos (Array, Date, Math,
String).
• os do browser (Window, Document,
Navigator).
• os personalizados ou criados pelo programador.
5. O Objeto String
Em computação ou
Em capítulos anteriores já se usou do objeto String. Este
em linguagem de objeto embutido oferece apoio ao uso de textos, diferente de
computador, string é outros, não necessita ser inicializado através do operador
qualquer série de new. Assim, são formas de criá-lo:
caracteres nome="Maria";
alfanuméricos ou telefone= new String("26666666");
palavras consecutivas
que são manipuladas Viu-se também que é possível utilizar o operador + com o
e tratadas como uma
unidade pelo sentido de concatenação de dois objetos String, como já
computador. foi usado em diversas ocorrências anteriores do curso ou
como no exemplo seguinte:
dados = nome + “:” + telefone;
6
13.2 - Propriedade do objeto embutido String
Propriedade Significado
Lenght Número de caracteres ( ou tamanho) da
string.
7
13.4 - Métodos do objeto embutido String - continuação
fromCharCode Cria uma nova string contendo
(c1,c2,c3,...) os caracteres especificados pelos
códigos Unicode c1,c2,...
indexOf (s, i) Retorna a posição da string s
na string, começando a busca
da posição i.
italics() Faz uma cópia da string entre
as tags <i> e </i>.
lastIndexOf(s,i) Retorna a posição da string s
na string, começando a busca
da posição i para o início.
link(href) Faz uma cópia da string entre
as tags <A HREF="href"> e
</A>.
replace(sesp,s) Faz uma busca da substring
sesp e a substitui por s. Aceita
propriedades especiais na busca.
search(s) Retorna a posição na string da
substring s.
slice(i,f) Retorna a substring entre as
posições i e f.
small() Faz uma cópia da string entre
as tags <small> e </small>.
split(s) Retorna um Array com cada
palavra da string usando a
string s como separador.
strike() Faz uma cópia da string entre
as tags <strike> e
</strike>.
sub() Faz uma cópia da string entre
as tags <sub> e </sub>.
substr(i,n) Retorna n caracteres da string a
partir do caracter na posição i.
substring (i,f) Retorna a string entre o i-esimo
e o f-esimo caracter.
sup() Faz uma cópia da string entre
as tags <sup> e </sup>.
toUpperCase() Converte uma string para
imprimi-la em maiúsculas (não
modifica a variável).
toLowerCase() Converte uma string para
imprimi-la em minúsculas (não
modifica a variável).
8
O código que segue exemplifica o uso de cada um destes
métodos .
<HTML>
<HEAD>
<TITLE>Exemplificando os métodos de
anipulação de strings</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="javascript">
texto = "O Ivo viu a uva";
document.write('<h2>Na string "' +
texto + '" tem-se:</h2>');
document.write('Tamanho = ' +
texto.length + '<br>');
document.write('anchor()= ' +
texto.anchor("inicio") + '<br>');
document.write('big()= ' + texto.big()
+ '<br>');
document.write('blink()= ' +
texto.blink() + '<br>');
document.write('bold()= ' +
texto.bold() + '<br>');
document.write('charAt (10) = "' +
texto.charAt(10) + '"<br>');
document.write('charAt (20) = "' +
texto.charAt(20) + '"<br>');
document.write('charCodeAt (10) = "' +
texto.charCodeAt(10) + '"<br>');
document.write('concat(" verde ",
"para"," vinho!") = "' +
texto.concat(" verde"," para",
"vinho!") + '"<br>');
document.write('fixed() = "' +
texto.fixed() + '"<br>');
document.write('fontcolor("red") = "' +
texto.fontcolor("red") + '"<br>');
document.write('fontsize(5) = ' +
texto.fontsize(5) + '"<br>');
var s=String.fromCharCode(101,108,97);
document.write('fromCharCode(101,108,97)="'
+ s + '"<br>');
document.write('indexOf ("viu") = ' +
texto.indexOf("viu") + "<br>");
document.write('italics() = ' +
texto.italics() + "<br>");
document.write('lastIndexOf ("u") = ' +
texto.lastIndexOf("u") + "<br>");
document.write('link()= ' +
texto.link("#inicio") + '<br>');
document.write('replace("uva","Eva")= '
+ texto.replace("uva","Eva") +
'<br>');
document.write('search("uva")= ' +
texto.search("uva") + '<br>');
document.write('slice(3,10)= ' +
9
texto.slice(2,10) + '<br>');
document.write('small() = ' +
texto.small() + "<br>");
document.write('split(" ")= ' +
texto.split(" ") + '<br>');
document.write('strike() = ' +
texto.strike() + "<br>");
document.write('sub() = ' + texto.sub()
+ "<br>");
document.write('substr (6, 5) = "'+
texto.substr(6, 5) + '"<br>');
document.write('substring (6, 11) = "'+
texto.substring(6, 11) + '"<br>');
document.write('sup() = ' + texto.sup()
+ "<br>");
document.write('toLowerCase () = "' +
texto.toLowerCase() + '"<br>');
document.write('toUpperCase () = "' +
texto.toUpperCase() + '"<br>');
document.write('texto = "' + texto +
'"<br></b>');
</SCRIPT>
</BODY>
</HTML>
10
Figura 13.2 - Ilustração do objeto String
11
propriedades do ambiente JavaScript também são
propriedades do objeto global.
12
objeto é encontrada a propriedade de nome x, seu valor é
usado. Se neste nível não há a propriedade x, a variável é
procurada no próximo nível da cadeia, e assim se movendo
dos níveis mais interiores para os exteriores até encontrar a
variável procurada. A variável só é indefinida se não for
achada até a busca chegar ao topo da cadeia, ou seja, ao
objeto global. A figura 13.3 ilustra essas formas de obtenção
do valor de uma variável em um escopo em cadeia.
Exercícios:
Resumo:
Auto-avaliação:
13
Aula 14: Os Objetos Array, Date e Math
Objetivos:
Aprender as características e métodos dos objetos:
- Array,
- Math e
- Date.
Pré-requisitos:
A aula 13 que introduziu os conceitos de objeto e a aula 12,
principalmente os conceitos de funções e variáveis que foram
explicados.
1. O objeto Array
1
um tamanho fixo que é especificado na sua criação. Mas, em
JavaScript, o tamanho do Array pode ser posteriormente
modificado, isto é, pode ser alterado dinamicamente. O
tamanho pode ser alterado a qualquer momento simplesmente
adicionando mais um elemento.
2
apenas para os elementos com valores. Assim, quando você
fornece as linhas de código que seguem , só são armazenadas
as posições 0 e 100, e não são utilizadas as 99 posições de
memória entre eles:
b[0]=1;
b[100]="elemento cem";
3
14.2 - Propriedade do objeto embutido Array
Métodos Significado
concat(v,..) Concatena os v com o array, cria um
novo array não modificando o array
original.
join(s) Retorna uma string através da junção de
cada elemento do array usando a string s
como separador de palavras. Se s for
omitido usará vírgula como separador.
pop() Deleta o último elemento do array e
decrementa a propriedade lenght.
Junto com push() possibilita
implementar o controle de dados como
pilhas.
push(v,...) Adiciona os valores v ao final do array ,
modificando a propriedade lenght.
reverse() Inverte a ordem dos elementos do array
sem criar que um novo array seja criado.
shift() Remove o primeiro elemento do array,
mudando o índice de todos os elementos
subseqüentes. Não cria um novo array.
slice(i,f) Retorna um sub-array contendo do
elemento i ao f, mas sem incluir o
elemento f. Se f não for fixado retorna
todos os elementos de i ao final do array.
O array não é modificado.
sort(funord) Ordena um Array, sem copiá-lo. Se for
usada sem argumento, os elementos são
convertidos para string e arranjados em
ordem alfabética. O argumento deve ser
uma função de ordenação.
splice(i,n,v Remove n elementos de um array, a partir
....) de i, ou insere os v elementos a partir de
i. O array é modificado. Se o valor n não
tiver sido especificado, todos a partir de i
serão removidos.
toString() Converte um array para string, separando
cada elemento por vírgulas
unshift(v..) Insere v valores no início do array,
mudando o índice dos demais.
4
<HTML>
<HEAD>
<TITLE>Métodos de Manipulação de
Arrays</TITLE>
</HEAD>
<BODY>
<H3>
Métodos de Manipulação de Arrays
</H3>
<SCRIPT LANGUAGE="javascript">
//exemplificando a inicializacao
vetor = new Array(6);
vetor[0] = 34;
vetor[1] = 23;
vetor[2] = 1;
vetor[3] = 45;
vetor[4] = 9;
vetor[5] = 10;
Vetor=new Array(34,23,1,45,9,10);
var VetorCopy=[34,23,1,45,9,10];
var base=1024;
var vetorBase=[base, base+1, base+10,
base+100, base/2, base%300];
document.write("vetor original:");
for (i = 0; i < vetor.length; i++)
{document.write(vetor[i]+" " );}
//exemplo do metodo
//array.concat(valores,...)
document.write("<br><br>exemplo de"
+"concat(4,300):");
Vetor=Vetor.concat(4,300);
for (i = 0; i < Vetor.length; i++)
{document.write(Vetor[i]+" " );}
//exemplo de array.join(separador);
document.write("<br><br>exemplo de"+
"join('/'):"+vetor.join(" / "));
5
Vetor.reverse();
document.write("<br><br>exemplo de"
+"reverse:");
for (i = 0; i < Vetor.length; i++)
{ document.write(Vetor[i]+" "); }
Vetor.shift();
document.write("<br><br>exemplo de"+
"shift():");
for (i = 0; i < Vetor.length; i++)
{document.write(Vetor[i]+" "); }
Vetor=Vetor.slice(2);
document.write("<br><br>exemplo de"
+"slice(2):");
for (i = 0; i < Vetor.length; i++)
{ document.write(Vetor[i]+" ");}
Vetor.sort();
document.write("<br><br>exemplo de"
+"sort:");
for (i = 0; i < Vetor.length; i++)
{ document.write(Vetor[i]+" " ); }
function ordemNumerica(a,b)
{return a-b;}//define uma função
Vetor.sort(ordemNumerica);
document.write("<br><br>exemplo de"
+"sort(ordem):");
for (i = 0; i < Vetor.length; i++)
{ document.write(Vetor[i]+" "); }
Vetor.splice(4);
document.write("<br><br>exemplo de"
+"splice(4):");
for (i = 0; i < Vetor.length; i++)
{ document.write(Vetor[i]+" "); }
Vetor.splice(3,0,999,78);
document.write("<br><br>exemplo de"
+"splice(3,0,999,78):");
for (i = 0; i < Vetor.length; i++)
{ document.write(Vetor[i]+" "); }
Vetor.unshift(53,80,7);
document.write("<br><br>exemplo de"
+"unshift(53,80,7):");
for (i = 0; i < Vetor.length; i++)
{ document.write(Vetor[i]+" "); }
Vetor.toString();
document.write("<br><br>exemplo de"
+"toString():"+Vetor);
</SCRIPT>
</BODY>
</HTML>
6
Figura 14.1- Tela gerado usando o código que exemplifica
os elementos da tabela 14.2
2. O Objeto Math
Este objeto é utilizado para armazenar constantes úteis a
operações matemáticas e funções para efetuar diversos tipos
de cálculo. As constantes e funções de Math podem ser
invocadas usando expressões como as dos exemplos abaixo:
Math.floor(1.999)//retorna o valor 1
Math.floor(-1.01)//retorna o valor -2
Math.ceil(1.0001)//retorna 2
Math.ceil(-1.99)//retorna -1
Math.round(2.5)//retorna 3
Math.rount(-2.5)//retorna -2
radianos = graus * Math.PI / 180;
numero = Math.ceil(Math.random()*100)-1;
x= -b + Math.sqrt(Math.pow(b,2) - 4*a*c);
7
14.3 - Constantes do objeto embutido Math.
Constante Significado
E e, base dos logaritmos naturais (≈2.71828..).
LN10 ln10, logaritmo natural de 10 ((≈2.302585...)
LN2 ln2, logaritmo natural de 2 ((≈0.69314718...)
LOG10E log e, logaritmo da constante e na base 10
(≈0.434294...)
LOG2E log2 e, logaritmo na base 2 ca constante e
((≈1.442695...)
PI Valor da constante π (≈3.1415...)
SQRT1_2 Valor do inverso da raiz quadrada de 2: 1/√2
((≈0.707...)
SQRT2 Valor da raiz quadrada de 2: √2 (√1.4142..)
8
14.4 - Funções do objeto embutido Math.(continuação)
Funções Significado
log(n) Logaritmo natural de n: loge n. O parâmetro
deve ser um número maior que zero.
max(a,b) Retorna o maior entre dois números a e b.
min(a,b) Retorna o menor entre dois números a e b.
pow(x,y) Retorna x a potência y: xy. Se o resultado for
um número complexo ou imaginário o
resultado será NaN.
random() Gerador de números pseudo-aleatórios, ou
pseudo-randômicos entre 0.0 e 1.0.
round(n) Arredonda n para o valor inteiro mais
próximo.
sin(a) Seno do ângulo a (em radianos).
sqrt(n) Raiz quadrada de um número n. O parâmetro
n deve ser positivo ou zero. Para valores
negativos o valor de retorno será NaN.
tan(a) Tangente do ângulo a (em radianos).
9
<!--
criaTabela();
text="3";
for (lin = 1; lin < 10; lin++)
{
document.write("<tr align=center>\n");
document.write("<td>",lin," elevado a 3
= ",lin,text.sup(),"</td>");
document.write("<td>", Math.pow(lin,3),
"</td>");
document.write("\n</tr>\n");
}
fechaTabela();
//-->
</script>
</td>
<td>
<h2>Raizes</h2>
<script language="JavaScript">
<!--
criaTabela();
var num;
for (lin = 1; lin <10; lin++)
{
num=Math.pow(lin,3)
document.write("<tr height=100
align=left>\n");
document.write("<td>Raiz 3 de ",num,"
=</td>");
document.write("<td align=center>",
Math.round(Math.pow(num,1/3)),
"</td>");
document.write("\n</tr>\n");
}
fechaTabela();
//-->
</script>
</td>
</tr>
</table>
</body>
</html>
10
Figura 14.2 - Tela gerada usando o código que
exemplifica os elementos da tabela 14.4
3. O Objeto Date
11
dependente do ambiente, devendo ser uma das formas aceitas
para datas no formato IETF. Esta é uma padronização para
uso em e-mails e outras comunicações na Internet. Pode ser
que você já tenha observado esta string de datas, nas quais os
valores se parecem com:
"Wed,15 Feb 2007 17:41:46 - 0400"
"February 15,2007 17: 41:46"
"1 15, 2007 17:41:46"
12
14.5 - Métodos do objeto embutido Date
Métodos Significado
getDate()/ Obtém ou define o dia do
setDate() mês (de 1 a 31).
getDay() Obtém o dia da semana (de
0 a 6).
getFullYear()/ Obtém ou define o ano com
setFullYear() 4 dígitos.
getHours()/ Obtém ou define a hora de
setHours() um objeto Date (de 0 a 23).
getMilliseconds() Obtém ou define o campo
setMilliseconds() milissegundos (hora-local).
getMinutes()/ Obtém ou define o minuto
setMinutes() (entre 0 e 59).
getMonth()/ Obtém ou define o mês (de
setMonth() 0 a 11).
getSeconds()/ Obtém ou define os
setSeconds() segundos (entre 0 e 59).
getTime()/ Obtém ou define o nº de
setTime() milissegundos desde
01/01/70.
getTimezoneOffset() Obtém o fuso horário em
minutos entre a hora local e
GMT.
getUTCDate()/ Obtém ou define o dia do
setUTCDate() mês ( de 1 a 31) quando
Date estiver em UTC
getUTCDay() Obtém o dia da semana (de
0 a 6) quando Date estiver
no tempo universal ou UTC
getUTCFullYear() Obtém ou define o ano com
setUTCFullYear() 4 dígitos quando Date
estiver no tempo em UTC.
getUTCHours()/ Obtém ou define a hora (de
setUTCHours() 0 a 23) de um objeto Date
em UTC.
getUTCMilliseconds() Obtém ou define o campo
setUTCMilliseconds() milissegundos quando
Date estiver em UTC.
getUTCMinutes() Obtém ou define o campo
setUTCMinutes() minutos em UTC.
getUTCMonth() Obtém ou define o campo
setUTCMonth() milissegundos quando
Date estiver em UTC.
13
14.5 - Métodos do objeto embutido Date. (continuação)
Métodos Significado
getUTCSeconds() Obtém ou define o campo
setUTCSeconds() segundos em UTC.
getYear()/ Obtém ou define o ano em 2
setYear(year),year dígitos. Esta em desuso depois
pode ter 2 ou 4
digitos, se tiver 2 do ano 2000, melhor usar as
os primeiros serão versões FullYear.
19
parse(datastring) Calcula o tempo em
milissegundos entre a
datastring fornecida e a
zero hora de 1/1/1970.
toGMTString() Converte uma data para o
formato datastring usando
o horário GMT.
toLocaleString() Converte uma data para o
formato datastring usando
o fuso horário local.
toString() Retorna Date como uma string
legível no fuso local.
toUTCString() Retorna o objeto Date
convertida em uma string
legível em UTC.
UTC(ano,mes,dia,h Converte uma data para
ora,min,seg,ms) milissegundos desde o tempo
zero: 1/jan/1970 0:0:0 .
valueOf() Representação numérica da
data. Mesmo número de
milissegundos de getTime .
14
semana = new Array("domingo",
"segunda", "terça", "quarta",
"quinta", "sexta", "sábado");
var hoje = new Date();
//Obtém a data de hoje
var AnoAtual=hoje.getFullYear();
var MesAtual=hoje.getMonth();
var DiaAtual=hoje.getDate();
document.write("<p>Hoje é " +
semana[hoje.getDay()] + ",<br>" +
DiaAtual+" de " + mes[MesAtual] +
" de " + AnoAtual+"</p><hr>");
// O mes é de 0 a 11
var AnoNatal=AnoAtual;
// vejo se ja passou o Natal no ano
if (MesAtual==11){
if (DiaAtual>25) {AnoNatal++;}};
//dado para o proximo Natal!
var data = new Date(AnoNatal,11,25);
// Número de segundos por dia
var nsPorDia = 24*60*60*1000;
var ndias=(data.getTime()-
hoje.getTime()) / nsPorDia;
ndias = Math.round(ndias);
natal=new String(" dias <br> para o
<br> N A T A L");
document.write("<center><p>Faltam " +
ndias+natal.bold().fontsize("+").
italics().fontcolor("red")+" !
</center> </p> <hr> ");
</SCRIPT>
</BODY>
</HTML>
15
Para entender exatamente o que cada método de Date faz e
como usá-lo, observe sua descrição na tabela 14.5, depois
empregue-o no trecho de código acima e utilize
document.write para observar o resultado obtido com
sua execução. Por exemplo, para ver como é a datastring
gerada pelo método toString(). Inclua as linhas
seguintes no final do código anterior antes de </SCRIPT>:
document.write(" <p> Hoje é: " +
hoje.toString() + "</p> <hr> ");
Exercícios:
16
Resumo:
Auto-avaliação:
17
Aula 15: Os objetos do navegador
Objetivos:
Aprender:
- a hierarquia dos objetos
- os comandos with e for...in
- as características e métodos do objeto location
- as características e métodos do objeto history
Pré-requisitos:
As aulas 1 e 2 são importantes para a seção que estuda o objeto location. A
aula 13, na seção que introduziu os conceitos de objeto. A aula 12, onde são
explicados os conceitos de variáveis globais.
1. Objetos do browser
Os objetos do browser são criados pelo próprio browser de forma a refletir
características do navegador e da página em exibição. Há dois objetos básicos:
navigator e window.
1
Na forma client-side da linguagem, que é o objetivo desse nosso curso, o
objeto window serve como objeto global para todo o código contido na janela
do navegador que ele representa. O objeto window define propriedades e
métodos que permitem manipular a janela do browser. Ele também define
propriedades que referem a outros objetos, como as propriedades document
(do objeto Document). Há ainda duas propriedades que referenciam a si
mesmas (auto-referenciais): window e self. Todas as variáveis globais são
definidas como propriedades do window.
2
complexas";
Como a cadeia de objetos conectados pode ficar bem longa, por uma questão
de simplificação, JavaScript permite referenciar os objetos internos a window
sem citar a própria window. Assim, é possível reescrever as linhas anteriores
como:
history.back();
location = “http://www.cederj.gov.br”;
document.write(“<H1>Seu Site</H1>”);
document.forms[0].text =
"as vezes as coisas podem " +
"ficar bem complexas";
Já deve ter dado para notar que entender a hierarquia e que objetos estão
contidos em outros é crucial para uma programação bem-sucedida. Na figura
anterior mostrou-se só algumas propriedades de alguns objetos. A maioria dos
objetos tem mais propriedades que as mostradas ali.
3
document.forms[0].elements[3].value =
document.images[0].src;
document.write("O nome que aparece “ +
“no campo nome do formulário é " +
document.forms[0].elements[1].value);
texto = prompt("Qual texto deve “ +
“aparecer no botão ? ");
document.forms[0].elements[4].value = texto;
</SCRIPT>
</BODY>
</HTML>
Estas linhas produzem uma página como a mostrada na figura 15.2.
Esta página tem um objeto window com os elementos mostrados na figura 15.3.
4
na página. O formulário por sua vez também pode ter diversos elementos, onde
cada elemento pode ser um dos elementos de interação possíveis de pertencer a
um formulário. No formulário do exemplo das figuras 15.2 e 15.3 tem-se um
array de 5 elementos, todos <input> , 4 do tipo text e o último do tipo
button.
3. Comando with
Neste momento torna-se necessário introduzir um novo elemento que facilita a
manipulação dos objetos, permitindo uma economia de digitação quando se
deseja referenciar várias propriedades e métodos de um mesmo objeto. O
comando with é usado para temporariamente modificar a cadeia de escopo.
Mas é importante dizer que o código usando with roda mais devagar que um
equivalente sem with, além de poder em alguns casos ser de difícil
entendimento e ocasionar má interpretação.
5
elemento.name="Nome";
4. Comando for…in
O comando for tem uma outra sintaxe diferente daquela que vimos em um
capítulo anterior: for(...;...;...). Esta outra sintaxe simplifica a
manipulação e permite percorrer todas as propriedades de um objeto. Esta
sintaxe é:
for ( variável in objeto )
comandos
5. Objeto location
O objeto location contém informações relacionadas a URL corrente. Ele
representa e controla a localização do navegador, sendo armazenado na
propriedade location do objeto window.
6
As propriedades de location são todas do tipo read/write e strings.
Referem-se à string da URL e suas várias partes, que foram vistas nas aulas 1 e
2 e têm o seguinte formato geral:
protocol://hostname:port/pathname?search#hash
7
do seu browser.
6. Objeto history
A propriedade history (histórico) do objeto window se refere ao objeto
history da janela ou frame: window.history ou frame.history. O
objeto history dá acesso (apenas para leitura) à lista de URLs navegadas
por uma janela ou frame. Este objeto contém as 4 propriedades mostradas na
tabela 15.3 e suporta os 3 métodos da tabela 15.4.
Como o histórico das páginas visitadas é uma informação privada, por questões
de segurança, alguns browsers, que não suportam signed scripts , restringem as
formas como as propriedades deste objeto podem ser usadas.
8
onclick="history.back()">
<input type=button value="Prox."
onclick="history.forward()">
<input type=button value="2 -->"
onclick="history.go(2)">
</form>
<script language=JavaScript>
document.write("<br> há " +
history.length +
" páginas visitadas" );
</script>
Exercícios:
1. Digite o código que gerou a página mostrada na figura 15.2 (ele é fornecido
antes da figura). Desative neste código a parte em que é pedido para por um
novo texto no botão, isto é, delete ou transforme em comentário o trecho:
texto=prompt("Qual texto deve aparecer"+
" no botão? ");
Depois crie uma âncora na parte da página onde está o link, com o texto
"outros links". Isto é, inclua o trecho:
<a name="#link">
depois da linha:
<IMG SRC="0.gif" height=6>
9
document.write("<br>A próxima é: "
+ toString(history.next));
dentro das tags <script...></script>
Resumo:
Auto-avaliação:
10
Aula 16: Os Objetos document e navigator
Objetivos:
Aprender:
- as características e métodos do objeto document
- como gerar páginas dinamicamente
- as características e métodos do objeto navigator
- como fazer páginas com código dependente do navegador
Pré-requisitos:
As aulas 13, 14 e 15 são importantes para esta aula.
1. Objeto Document
Além da identificação pelo seu número como elemento no array, se alguma tag
tiver a propriedade NAME, o valor deste atributo pode ser usado como um nome
de uma propriedade do objeto Document. Por exemplo, suponha que uma
página tenha um formulário com o nome f1, definido pelas linhas:
<form name="f1">
1
<input type="button"value="pressione">
</form>
Como você já deve ter concluído, é bastante útil dar nomes adequados para
facilitar a interpretação e a referência a alguns elementos nos códigos
JavaScript.
2
podem ser definidas dinamicamente na seção <head> ou estaticamente como
atributos da tag <body> do documento. A única exceção a esta regra é a
propriedade bgColor, que pode ser definida a qualquer hora. Todas estas
propriedades de cores têm como parâmetro uma das formas possíveis de
predefinir cores já comentadas.
As linhas de código abaixo, por exemplo, usam esta propriedade para alterar a
cor de fundo:
<html>
<head>
<title>Exemplo Propriedades de Document
</title>
<script language=javascript>
function dataModif()
{
document.write("<h3>ultima ",
"atualizacao nesta pagina",
document.Modified, "</h3>");
}
function mudaCor(cor)
{
document.bgColor = cor;
}
</script>
</head>
<body bgcolor=lightpink>
<h1 align=center>Utilizando o Objeto
Document</h1>
<script language =javascript>
dataModif();
</script>
<h2>Mudar a Cor do Fundo</h2>
<a href="javascript:mudaCor('white')">
Branco</a>
<br>
<a href="javascript:mudaCor('green')">
Verde</a>
<br>
<a href="javascript:mudaCor('blue')">
Azul</a>
<br>
<a href="javascript:mudaCor('yellow')">
Amarelo</a>
<br>
<script language=javascript>
if (document.referrer)
document.write("<h3>Referenciada por:",
document.referrer,
"</h3>");
</script>
</body>
</html>
3
Um dos usos possíveis de referrer é armazenar os valores do site que
referiu a sua página para fins estatísticos. Também poderia ser útil para analisar
links não-autorizados que se referem a sua página, ou fazer com que os links
que venham de páginas que não tenham passado antes pela sua página
principal a visitem primeiro.
Como uma última observação repare que ao mês foi adicionado 1, pois os
valores de retorno de getMoth() são entre 0 e 11:
//outra versão da função anterior
function dataModif1()
{ //cria objeto Date
modif=new Date(document.lastModified);
//usa alguns metodos de Date
document.write("<h3>Atualizado em:",
modif.getDate(), "/",
(modif.getMonth()+1),"/",
modif.getUTCFullYear(),"</h3>");
}
4
16.2. Métodos do objeto do browser Document
Método Significado
clear() Apaga o conteúdo todo de um documento.
close() Fecha o documento aberto por open(). Termina de incluir
coisas num documento.
open() Cria um novo documento. Abre um canal para escrever
conteúdos em um documento.
write Insere string ou strings (v1... vn) no documento cujo
(v1, … vn) canal foi aberto por open().
writeln Imprime strings (v1... vn) em uma linha do
(v1, … vn) documento. Idêntico ao anterior, mas adicionando a
mudança de linha na saída.
Quando open() é usado sem argumentos é aberta uma nova página HTML.
Mas os browsers podem mostrar outros tipos de formato de dados além de
HTML. O formato mais comum de dados são textos simples (ou do tipo
plain text). Se você quiser usar write() para saída de um texto deve
usar a string "text/plain" como argumento:
document.open("text/plain");
Com estes métodos, você gera documentos dinamicamente, mas para que um
documento HTML seja realmente dinâmico deve ser interativo, o documento e
os seus elementos devem responder a atitudes (eventos) do usuário. Nós
discutiremos eventos na próxima aula.
2. Objeto navigador
5
navigator. Mas este nome embora mais descritivo e menos relacionado a
um produto não é portável e nem suportado pelo Netscape Navigator.
<html>
<head>
<title>O objeto navigator</title>
</head>
<body bgcolor=lightcyan>
<h2>O objeto navigator</h2>
<hr>
<script language="JavaScript">
<!--
if (navigator.javaEnabled())
{
document.write("browser admite Java);
}
var browser="<br>Todas as propriedades" +
" do browser:<br>";
for(var propriedades in navigator)
{
browser += propriedades + ": " +
navigator[propriedades] +
"<br>";
}
document.write(browser);
//-->
</script>
<hr>
</body>
</html>
6
incompatíveis são principalmente usadas em DHTML. Para usar estas
propriedades é melhor você antes verificar o tipo de navegador usado porque
vai visualizar a página. A forma de fazer isso é usar as técnicas que
discutiremos na próxima seção.
Exercícios:
1. Digite o código que está sendo discutido no Exemplo Propriedades
de Document, na seção 1 desta aula.
Como você poderia fazer para ao invés de apresentar os meses com números
mostrá-los pelos nomes? Faça isso agora, criando uma nova versão deste
mesma função: DataModif2() (Dica: crie um Array com os nomes dos
meses do ano e use o valor de retorno de getMonth para acessar os elementos
deste array)
7
Tente usar agora neste código (como fizemos nos objetos estudados nas aulas
13 e14) todas as demais propriedades do objeto document apresentadas na
tabela 16.1. Verifique o que ocorre com cada uma delas no documento
mostrado pelo seu navegador.
Resumo:
Auto-avaliação:
Quantas propriedades e métodos novos! Se algum ponto não ficou muito claro,
releia-o antes da próxima aula, na qual você continuará a crescer na direção de
ser um criador de páginas WEBs poderosas e repletas de objetivos! Nela você
aprenderá as coisas mais importantes para uma programação dinâmica: como
8
reagir às atitudes de quem usa a página , ou em outras palavras como usar os
eventos.
9
Aula 17: Eventos
Objetivos:
Nesta aula você aprenderá:
- o que são eventos
- quais os modelos de tratamento de eventos
- como fazer a associação de código a eventos
- quais os tipos de evento
- como usar a palavra chave this
- como usar objeto Event
Pré-requisitos:
As aulas 12 a 16 são importantes para esta aula.
1
possível definir trechos de código que serão executados
quando ocorrer um determinado evento. Associar um código
a um evento é chamado de “capturar” um evento. Chamamos
de “tratamento” de um evento à execução do código
associado a ele.
2
gerado pelo carregamento de uma página no browser.
Todos os nomes de
Também pode ocorrer que objetos diferentes gerem eventos
atributos iniciam
com "on". O uso da diferentes sobre as mesmas circunstâncias. Se o usuário
primeira letra depois "clicar" com o mouse em um botão, é gerado o evento
do "on" em onClick, mas o mouse ao ser clicado sobre um texto não
maiúscula é uma gera qualquer evento.
convenção
comumente usada
para a descrição dos Como na forma client-side da linguagem os eventos se
atributos em originam de elementos HTML (como botões, imagens etc.)
arquivos HTML. são definidos como atributos destes elementos. Para permitir
a manipulação de evento nesta forma, as várias tags possíveis
Embora HTML seja
de responderem a eventos passaram a ter atributos específicos
insensível ao uso de
maiúsculas ou (que depois foram incorporados ao padrão HTML 4.0).
minúsculas, o que é
denominado "case- O que distingue o tipo dos eventos é principalmente os
insensitive" , esta atributos que eles "disparam". Cada elemento possível de
convenção auxilia a
incluir em uma página HTML contém um determinado
identificar estes
atributos como um conjunto de eventos associados. Para definir o código de
conjunto tratamento de um evento é necessário definir um atributo na
diferenciado dos tag relativa ao elemento. Para cada tipo de evento há um
demais da atributo específico. Na tabela 17.1 a seguir são mostrados
linguagem, que
alguns destes atributos e o evento a que estão associados.
geralmente seriam
escritos em
maiúsculas ou Tabela 17.1 - Atributos e sua descrição
minúsculas.
Atributo Descrição
Eventos do mouse
onClick Clique do mouse sobre o elemento.
onDblClick Clique duas vezes seguidas na mesma posição.
onMouseMove Mouse se move sobre o elemento.
onMouseOver O cursor do mouse está sobre o elemento.
onMouseOut Mouse não está mais sobre o elemento (saiu).
onMouseDown Botão do mouse pressionado sobre o elemento.
Desseleção, é onMouseUp Botão do mouse é solto sobre o elemento.
um termo usado
aqui no sentido Eventos associados a elementos de formulários
de desfazer a onChange Modificação do conteúdo do elemento.
operação de onSelect Seleção, desseleção ou ativação de um item.
seleção! Eventos da página ou janela
onLoad Acabou de ser carregada, também associado a
imagens.
onFocus Fica ativada, ganha o foco de entrada de dados.
Também associado a elementos de texto.
onBlur Perde o "foco" de entrada, fica desativado,
também associado a elementos de texto.
onUnload Foi descarregado.
onResize A janela foi redimensionada pelo usuário.
Eventos associados a imagens
onError Ocorreu um erro ao carregar imagem.
onAbort Carregamento da imagem foi interrompido.
3
Eventos de formulário
onSubmit Formulário enviado (submetido).
onReset Requisitou o "reset" (limpar o conteúdo).
Eventos do teclado
onKeyDown Ocorre quando uma tecla é apertada pelo
usuário.
onKeyPress Ocorre quando uma tecla é apertada e solta.
onKeyUp Ocorre quando uma tecla é solta pelo usuário.
4
definida em algum lugar do código.
<FORM NAME=formucompras>
<INPUT TYPE=button VALUE="Total"
NAME="calcula"
onClick="calculaTotal()">
</FORM>
5
<IMG SRC="image2.gif" BORDER=0></A>
<A href="javascript:nada()"
onClick="clica()"
onMouseOver="entrei(2)"
onMouseOut="sai()">
<IMG SRC="image3.gif" BORDER=0></A>
<FORM NAME=saida>
<INPUT TYPE=TEXT NAME=texto>
</FORM>
</CENTER>
</BODY>
</HTML>
Mas isto não quer dizer que dentro de funções (que não sejam
métodos) this não tenha valor. Muitas vezes ao invocar
uma função você está invocando um método do objeto
global. Dentro destas funções, a palavra this se refere a este
objeto. Vejamos um exemplo mais concreto. Suponha que os
seguintes trechos tenham substituído os correspondentes no
exemplo da seção anterior.
....
function sai()
{
document.saida.texto.value="sai "+this;
}
6
.....
function clica(n)
{
document.saida.texto.value="clicou "+n;
}...
7
funções a serem usadas como propriedades de objetos
HTML.
8
como IE) e Netscape 6 (referenciada como N6) .
9
propagar para outros objetos que estejam na área afetada. Por
exemplo, ao invés de ter várias funções de manipulação de
eventos, uma para cada elemento de um formulário, pode-se
simplesmente ter uma função genérica em um objeto no topo
de hierarquia como o objeto Document. Um evento que
ocorra dentro de um elemento de um formulário, também
ocorreu no formulário e também ocorreu no documento. É
possível então capturar o evento no documento e depois
propagá-lo para o elemento onde ele também ocorreu ou
capturar o evento no elemento e depois propagá-lo para o
formulário.
10
Document e Layer.
11
<P>
<img src="seuemb.gif" name="fig1" >
<img src="nota.gif" name="fig2"
width=150 height=150>
</P>
<SCRIPT>
function ratImg(ev)
{
alert("na imagem!");
}
function ratDoc(ev)
{
if (ev.target.name=="fig2")
routeEvent(ev);
else
alert("documento!");
}
if((navigator.appName=="Netscape")&&
(navigator.appVersion.charAt(0)=="4"))
{
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=ratDoc;
document.images[0].onmousedown=ratImg;
document.images[1].onmousedown=ratImg;
}
else
alert("para uso no Netscape 4.x");
</SCRIPT>
</BODY>
</HTML>
12
Window. Qualquer uma destas funções pode impedir que o
evento passe para o próximo nível definido a propriedade
cancelBuble do objeto Event (que como já
comentamos é uma variável global) como true.
13
}
if(navigator.appName.indexOf("Explorer")!=-1)
{
document.images[0].onmousedown=ratImg;
document.images[1].onmousedown=ratImg;
document.onmousedown = ratDoc;
}
else
alert("para uso no Explorer");
</SCRIPT>
</BODY>
</HTML>
14
</HEAD>
<BODY bgcolor=lightblue>
<CENTER>
<H1> Netscape - tratado na imagem</H1>
<P> <img src="seuemb.gif" name="fig1"
width="150" height="150"></P>
</CENTER>
<SCRIPT> // Evento sem propagação
function ratImg(ev)
{
alert("rotina da imagem !");
ev.cancelBubble = true;
}
function ratDoc(ev)
{
alert("rotina do documento !");
}
if ((navigator.appName == "Netscape") &&
(navigator.appVersion.charAt(0)>"4"))
{
document.addEventListener
("mousedown", ratDoc, false);
document.images[0].addEventListener
("mousedown", ratImg, true);
}
else
alert("Esta página só funcionará " +
"corretamente no Netscape 6.x");
</script>
</BODY>
</HTML>
Exercícios:
1. Bata o código que está sendo discutido em Diversos
Eventos na seção 1.3 desta aula, usando no lugar de
image1.gif, image2.gif e image3.gif
quaisquer imagens que você queira. Também defina seus
nomes adequadamente no Array nomeImagem do mesmo
código.
Agora faça a página ser carregada na forma original das
funções definidas. Depois modifique o código para:
• incluir 6 imagens;
• alterar o texto da função de saída, para escrever nome da
imagem da qual esta saindo ("saindo de
nomedaimagem"); e
• altere também o texto da função associado ao evento
"click" para também escrever o nome da imagem na qual
está clicando.
Verifique como ficou seu documento em cada alteração.
15
seção 1.4. Verifique o conteúdo de this visualizando
novamente a página e fazendo com que todos os tipos de
evento ocorram.
Resumo:
16
Auto-avaliação:
17
Aula 18: Crítica de Formulários
Objetivos:
Nesta aula você aprenderá:
- as propriedades e métodos do objeto form;
- os vetores de elementos do formulário;
- como fazer crítica de campo e
- crítica de formulário.
Pré-requisitos:
A aula 7 do primeiro módulo e as aulas 12 a 17 do segundo são importantes
para esta aula.
1
Tabela 18.2 - Métodos do objeto Form
Método Descrição
submit() Envia o formulário ao servidor.
reset() Redefine cada campo com os valores default.
2. Elementos de um Formulário
O objeto Form, como já mencionado, contém um array, onde são armazenados
os elementos de interação do formulário. Um elemento pode ser acessado pelo
array elements ou pelo nome definido no HTML. Por exemplo, dado o
formulário:
<FORM NAME=“meuform”>
<INPUT TYPE=TEXT NAME=“endereco”>
</FORM>
document.meuform.endereco
document.forms[0].elements[0]
2
de interação que vimos em HTML, que são:
• Campos de texto: text, password, hidden
• Áreas de texto: textarea
• Botões: button, reset, submit
• Caixas de seleção: checkbox
• Botões de opção: radio
• Listas drop-down: select
3
if (! EhDigito (telef.charAt(i)))
{
alert("Caracter "+telef.charAt(i)+
" inválido:deve ser numero!");
campo.focus();
return false;
}
return true;
}
//-->
</script>
</head>
4
2.3. Botões tipo checkbox
<HTML>
<HEAD>
<TITLE>Exemplo de checkbox</TITLE>
<SCRIPT>
function clicou(campo)
{
if (campo.checked)
alert("O campo está selecionado");
else
alert("Campo desmarcado !");
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR=beige>
<H1>Exemplo de checkbox</H1>
<FORM>
<INPUT TYPE=checkbox onClick=
"clicou(this)">Marque aqui!
</FORM>
</BODY>
</HTML>
5
2.4. Botões tipo radio
6
{
with (document.form1)
if (caseChange=="upper")
{
lastName.value=
lastName.value.toUpperCase();
firstName.value=
firstName.value.toUpperCase();
}
}
</SCRIPT>
<BODY BGCOLOR="lightSteelBlue">
<H1>Exemplo de Radio</H1>
<FORM NAME="form1">
<TABLE>
<TR>
<TH ALIGN=LEFT>:Último nome:</TH>
<TD>
<INPUT TYPE="text" NAME="lastName"
onChange="convertField(this)">
</TD>
</TR>
<TR>
<TH ALIGN=LEFT>Primeiro nome:</TH>
<TD>
<INPUT TYPE="text" NAME="firstName"
onChange="convertField(this)">
</TD>
</TR>
</TABLE>
<P>
<B>Valores convertidos para:</B>
<BR>
<INPUT TYPE="radio" NAME="conversion"
VALUE="upper" onClick="if (this.checked)
convertAllFields('upper');">
Maiúsculas
</FORM>
</BODY>
</HTML>
7
Tabela 18.13 - Propriedades de select
Propriedade Descrição
name Nome associado ao elemento.
length Número de opções da lista.
options Array com as opções.
selectedIndex Índice da opção atualmente selecionada. Se for uma
lista de seleção múltipla é o índice da primeira seleção.
Para criar uma nova opção é preciso criar um novo objeto option através do
operador new. O construtor de option pode receber até 4 parâmetros
(opcionais):
• texto que será exibido
• valor da opção
• defaultSelect
• indicação se estiver selecionada
8
<HTML>
<HEAD>
<TITLE>Alterando Itens</TITLE>
<SCRIPT LANGUAGE="javascript">
function inclui()
{
with (document.formulario)
{
if (novo.value == "")
{
alert("Novo item ruim");
return;
}
var nop = lista.length;
lista.options[nop]=new
Option(novo.value);
}
}
function escreve()
{
with (document.formulario)
{
var ind = lista.selectedIndex;
selecionado.value =
lista.options[ind].text
}
}
function remove()
{
with (document.formulario)
{
var ind = lista.selectedIndex;
lista.options[ind] = null;
}
}
function muda()
{
with (document.formulario)
{
if (novo.value == "")
{
alert("Novo item ruim!");
return;
}
var ind = lista.selectedIndex;
lista.options[ind].text = novo.value;
}
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR=lightsteelblue
onLoad="escreve()">
<H2>Alterando Itens da Lista</H>
<FORM NAME="formulario">
<TABLE>
<TR>
<TD>Item Selecionado:
<TD><INPUT TYPE=text NAME=selecionado
onFocus="this.forms.novo.focus()">
9
<TD><INPUT TYPE=BUTTON
VALUE="Acrescentar"
onClick="inclui()">
<TR>
<TD>Item a Acrescentar, Apagar ou Mudar:
<TD><INPUT TYPE=text NAME=novo>
<TD><INPUT TYPE=BUTTON
VALUE="Apagar Item"
onClick="remove()">
<TR>
<TD>Lista :
<TD>
<SELECT NAME=lista onchange="escreve()">
<OPTION checked>Abacaxi
<OPTION>Banana
<OPTION>Laranja
<OPTION>Goiaba
</SELECT>
<TD><INPUT TYPE=BUTTON
VALUE="Mudar Item "
onClick="muda()">
</TABLE>
</FORM>
</BODY>
</HTML>
10
Tabela 18.16 - Propriedades das áreas de texto
Propriedade Descrição
name Nome associado ao elemento.
value Valor digitado pelo usuário.
defaultValue Valor a ser exibido no elemento após um reset.
3. Crítica do Formulário
Numa página com um formulário, a utilização de JavaScript permite auxiliar o
usuário e evitar que ele cometa erros de preenchimento. Este procedimento é
chamado de crítica do formulário.
11
alert(‘Campo ’ + campo.name +
‘ nao preenchido.’);
}
...
<form ...>
<input type=text name=endereco
onChange=“critica(this)”>
...
</form>
12
<input type=“text” name=“naturalidade”
onChange=“validaNaturalidade(this)”>
<br>
…
</form>
Exercícios:
1. Digite em seu computador o código que foi mostrado na seção 2.1 desta
aula.
Primeiro faça a página ser carregada na forma original. Depois modifique o
código para:
• incluir um campo de texto para ser fornecido à cidade (veja figura 18.3 que
segue);
• usando a idéia de verificação do telefone, faça uma função para verificar se
só letras foram digitadas;
• use esta função para verificar o nome e também o novo campo que você
criou.
13
Figura 18.4 - Tela relacionada com o exercício 3.
Resumo:
Auto-avaliação:
Esta aula, como a anterior, é bastante complexa, não? Mas, como você se saiu
nos exercícios? Retorne aos pontos onde sentiu mais dificuldade, e não se
preocupe muito se ainda não estiver bem seguro mesmo depois disto. Devemos
ser sinceros e lhe dizer que o assunto é bem amplo mesmo. Afinal, já estamos
acabando o curso e só a prática lhe dará a sensação de completa segurança...
14
Aula 19: Manipulação de Janelas e Frames
As formas de programação que vimos até aqui envolviam apenas uma janela ou
frame. Aplicações reais, geralmente, envolvem múltiplas janelas ou frames.
Nesta aula explicaremos como as diversas janelas e frames podem interagir e
cooperar umas com as outras e com os programas que nelas são executados.
Objetivos:
Nesta aula você aprenderá:
- como usar, abrir e fechar janelas;
- como programar com temporizadores;
- a usar o objeto frame;
- como fazer referências entre frames.
Pré-requisitos:
As aulas anteriores.
1. Manipulando Janelas
O principal objeto da hierarquia do JavaScript, como já comentamos diversas
vezes, é o objeto Window e abaixo dele encontram-se todos os elementos de
uma página HTML que podem ser manipulados através da linguagem
JavaScript. Além do objeto representando a janela corrente, cada janela do
browser e cada frame dentro da janela são representados também por um objeto
Window. Nesta aula exploraremos as propriedades e métodos deste objeto e
mostraremos algumas interessantes técnicas de programação com janelas e
frames.
1
Tabela 19.1- Propriedades do objeto Window
Propriedade Descrição
closed Especifica se a window foi fechada.
defaultStatus Texto com a mensagem mostrada na barra de status
do browser.
document Referência ao objeto Document contido na janela
frames[] Array do objeto Window que representa os frames
dentro da janela.
history Referência ao objeto history da janela
location URL da página sendo exibida, definindo essa
propriedade causa o carregamento de um novo
documento.
name Nome da janela.
opener Janela onde foi aberta a janela atual.
parent Se a janela corrente for um frame, refere-se ao frame da
janela que a contém.
screen Referência ao objeto Screen da janela.
self Referência à própria janela, mesmo que window.
status Mensagem temporária na barra de status.
top Referência à janela top-level que contém a janela
atual.
window Referência à própria janela, mesmo que self.
2
Tabela 19.2- Métodos do objeto Window
Método Descrição
alert() Mostra uma mensagem simples em uma caixa de
diálogo com botão Ok.
blur() Retira o foco de uma janela.
clearInterval() Cancela ou determina a execução periódica de um
/ trecho de código f após um período de intervalo t
setInterval(f,t) milissegundos (f pode conter múltiplos comandos
separados por ";").
clearTimeout()/ Desprograma o timer ou programa o timer para
setTimeout(f,t) executar a função f após t milissegundos.
close ( ) Fecha uma janela.
confirm(p) Apresenta em uma caixa de diálogo à pergunta p e
botões Ok (retorna true) e Cancel (retorna
false).
focus ( ) Coloca o foco numa janela, movendo-a para frente
de todas.
moveBy(dx,dy) Move a janela da posição atual dx pixels para a
direita ou dy pixels para baixo.
moveTo(x,y) Move o canto superior esquerdo da janela para a
posição x y .
open Cria e/ou abre uma janela carregando o documento
(s1,s2,s3,sb) s1, tendo como nome s2 e de acordo com as
(mais detalhes na
seção 1.2) propriedades indicadas em s3, na forma sb .
prompt(s,d) Mostra a string s em uma caixa de diálogo com os
botões Ok e Cancel e um campo de entrada de
texto com a string d. Retorna o texto fornecido.
resizeBy Redimensiona a janela aumentando-a de dx pixels
(dx,dy) na horizontal e dy na vertical.
resizeTo(x,y) Redimensiona a janela para x pixels na horizontal e
y na vertical.
scrollBy(dx,dy) Rola o documento interior à janela para a posição
scrollTo(x,y) x,y ou de um valor dx,dy .
3
<!--
function redire()
{
//href e window podem ser omitidos
if (confirm ("A página mudou-se. " +
"\n Clique OK \n " +
"para ver a nova. "))
location = "novo-endereco.html";
}
//-->
</SCRIPT>
</HEAD>
<BODY onload="redire()">
<H2>Redirecionando automaticamente</H2>
<SCRIPT LANGUAGE="JavaScript">
<!--
document["bgColor"]="lightpink";
// -->
</SCRIPT>
</BODY>
</HTML>
4
aparecerem, isso é, forem incluídas na string, sem qualquer valor, é suposto
que seu valor seja yes. Se não aparecer, o valor da característica é suposto ser
no. Para a largura e altura, os valores devem ser sempre especificados e
correspondem ao número de pixels.
5
function Texto()
{
//verifica se pode abrir
if (jan != null && !jan.closed)
{
jan.document.write("<p>Mais texto</p>");
jan.focus();
}
else
Fechada();
}
function Fechada()
{
alert ("Abra antes !");
}
</SCRIPT>
</HEAD>
<BODY bgcolor=lightblue>
<H2>Abrindo nova janela</H2>
<FORM>
<input type="button" value="Abrir Janela"
onclick="Abrir()">
<input type="button" value="Escrever nela"
onclick="Texto()">
<input type="button" value="Fecha-la"
onclick="if (!jan.closed) jan.close()">
</FORM>
</BODY>
</HTML>
6
<HEAD>
<TITLE>Primeira</TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT">
function Muda()
{
location='exeJanelas-a.html'
}
</SCRIPT>
</HEAD>
<BODY
onload="mude=setInterval('Muda()',999)"bgcolor="kh
aki">
<H3>Pagina:<FONT SIZE=+4>1</FONT></H3>
<FORM>
<INPUT TYPE="BUTTON" VALUE="Parar"
onclick="clearInterval(mude)">
<INPUT TYPE="BUTTON" VALUE="Seguir"
onclick="Muda()">
</FORM>
</BODY>
</HTML>
<!--segundo arquivo:'exeJanelas-a.html'-->
<HTML>
<HEAD>
<TITLE>Segunda</TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT">
function Muda()
{
location='exeJanelas.html'
}
</SCRIPT>
</HEAD>
<BODY onload="mude=setInterval('Muda()',999)"
bgcolor="gold">
<H3> Pagina :
<FONT SIZE=+4>2</FONT></H3>
<FORM>
<INPUT TYPE="BUTTON" VALUE="Parar"
onclick="clearInterval(mude)">
<INPUT TYPE="BUTTON" VALUE="Seguir"
onclick="Muda()">
</FORM>
</BODY>
</HTML>
2. Manipulando Frames
Vimos no módulo de HTML que é possível dividir uma janela em várias partes
independentes, chamadas frames. Em JavaScript, um frame se comporta
exatamente como uma janela, tendo as mesmas propriedades e métodos. O
objeto Window tem um array com um objeto para cada frame definido na
janela. Cada frame de uma janela pode se referir a outro usando as
propriedades do objeto Window: frames[], parent e top.(tabela
19.1).
7
documento que cria novos frames. Como os frames são representados por
objetos Window, logo também possuem um array frames[ ], que pode
ser usado para referenciar aos frames deste documento interno. Pode-se assim
simplesmente acumular diversos subníveis de frames.
<HTML>
<HEAD>
<TITLE>Exemplo de frames</TITLE>
</HEAD>
<FRAMESET COLS="75%,25%">
<FRAME NAME=“fra” SRC="pa.htm">
<FRAME NAME=“flay” SRC="lay.htm">
</FRAMESET>
</HTML>
<HTML>
<HEAD>
<TITLE>Arquivo lay.htm</TITLE>
</HEAD>
<FRAMESET ROWS="*,*,*">
<FRAME NAME=“frb” SRC="pb.htm">
<FRAME NAME=“frc” SRC="pc.htm">
<FRAME NAME=“frd” SRC="pd.htm">
</FRAMESET>
</HTML>
frb
frc
fra
frd
8
window.frames[1].frames[0].document.write(“uma frase
!”);
window.frames[1].frb.document.write
(“uma frase !”);
Se um frame está contido dentro de outro frame que é contido por uma janela ,
o frame pode se referir à janela de nível mais elevado por
parent.parent.
Após entender bem as linhas de código abaixo, tente modificá-las para layout
mais complexos, usando para referir-se aos níveis:
• top
• parent.parent
• parent.frames[]
• frames[].frames[].frames[].
9
}
function n2()
{
parent.f3.document.write("texto<BR>");
parent.f2.document.bgColor="tan"
}
function n3()
{
parent.f4.document.write("<p>isso</p>");
parent.f3.document.bgColor="tan"
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<H1>Escrevendo em Frames:</H1>
<I>Em que frame quer escrever?</I>
<FORM>
<INPUT TYPE="BUTTON" VALUE="f2" onclick="n1()">
<INPUT TYPE="BUTTON" VALUE="f3" onclick="n2()">
<INPUT TYPE="BUTTON" VALUE="f4" onclick="n3()">
</FORM>
</BODY>
</HTML>
10
Exercícios:
2. Misture cada uma das formas possíveis de abrir janelas da tabela 19.3 no
exemplo do final da seção 1.2. Teste também sem qualquer recurso e sem
algum dos parâmetros de open para verificar as formas padrão.
Resumo:
Auto-avaliação:
Voltamos a dizer que a complexidade do assunto neste final do curso não deve
assustá-lo. Não desanime e volte sempre a reler os pontos que ficaram um
pouco obscuros.
11
Aula 20: Cookies
Objetivos:
Nesta aula você aprenderá:
- o que são cookies e quais suas limitações;
- como usar, ler e armazenar cookies;
- a usar as funções globais escape e unescape.
Pré-requisitos:
As aulas 4, 13, 14 e 16 são especialmente importantes para o
bom entendimento desta aula.
2. Cookies em JavaScript
A informação contida nos cookies pode ser manipulada
pelas mais variadas tecnologias envolvidas em WEB. A
linguagem JavaScript também fornece aos programadores
este recurso, permitindo a sua manipulação através da
propriedade cookie do objeto Document.
document.cookie = “usuario=Maria”;
document.cookie = “codigo=123”;
document.cookie = “codigo=490”;
// Inclui um valor
document.cookie = "produto=modelo12";
document.writeln('<B>Valor de ',
'document.cookie agora = </B>"',
document.cookie, '"<p>');
http://virtual.com.br/dir/secretario.htm
http://virtual.com.br/dir/finan/index.htm
http://virtual.com.br/index.htm
4. Armazenando Cookies
5. Limitações
6. Lendo Cookies
var pos=todosOsCookies.indexOf("versao=";
//obtem indice do inicio do cookie de
//nome "versao"
//se encontrar o cookie extrai seu valor
if(posicao!=-1)
{
var inicio=posicao+7
//inicio do valor
var fim=todosOsCookies.indexof(";",inicio);
//obtem o indice final do valor
if(fim==-1)fim=todosOsCookies.lenght
//le a string com o conteudo do valor
var valor=todosOsCookies.substring(inicio,fim);
//decodifica o valor
valor=unescape(valor);
//agora é possivel usar o valor do ccokie
}
Exercícios:
Auto-avaliação: