IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
1
FERRAMENTAS DA WEB
HTML Tiago Lopes Telecken
JavaScript
Derlain Monteiro de Lemos
1ª edição
Rio Grande, RS
Instituto Federal de Educação, Ciência e Tecnologia
do Rio Grande do Sul - Campus Rio Grande
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
2
Presidência da República Federativa do Brasil
Ministério da Educação
Secretaria de Educação a Distância
Instituto Federal de Educação, Ciência e Tecnologia
do Rio Grande do Sul - Campus Rio Grande
Professores - autores
Tiago Lopes Telecken
Derlain Monteiro de Lemos
Supervisão de Projeto
Ella Soares Pereira
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
3
Sumário
Apresentação ...........................................................................................................................5
Proposta da disciplina..............................................................................................................7
Plano de Ensino .......................................................................................................................9
UNIDADE 1 .........................................................................................................................11
HTML....................................................................................................................................13
1.1 Etiquetas (tags) HTML....................................................................................................13
1.2 Documentos HTML e Páginas Web................................................................................13
1.3 Primeiro Programa – Editando Documentos HTML ......................................................13
2. Elementos HTML .................................................................................................................15
3. Atributos HTML ...................................................................................................................18
4. Comentários HTML ..............................................................................................................19
5. HTML Readings ...................................................................................................................19
6. Linhas HTML .......................................................................................................................15
7. Formatação de textos HTML ................................................................................................20
8. Links HTML .........................................................................................................................21
9. Imagens HTML .....................................................................................................................24
10. Tabelas HTML ....................................................................................................................25
11. Listas HTML .......................................................................................................................27
12. Formulários HTML .............................................................................................................28
13. Frames HTML ....................................................................................................................31
UNIDADE 2 .........................................................................................................................33
JavaScript ..............................................................................................................................35
1. Introdução .............................................................................................................................35
2. Operadores Lógicos ..............................................................................................................36
3. Operadores Matemáticos ......................................................................................................36
4. Controles Especiais ...............................................................................................................37
5. Comandos Condicionais .......................................................................................................38
6. Eventos ..................................................................................................................................39
7. Criando variáveis ..................................................................................................................40
8. Escrevendo no Documento ...................................................................................................41
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
4
9. Mensagens.............................................................................................................................42
10. Criando Funções .................................................................................................................43
11. Funções Intrísecas ...............................................................................................................43
12. Criando Novas Instâncias ...................................................................................................45
13. Manipulando Arrays ...........................................................................................................46
14. Manipulando String's ..........................................................................................................47
15. Manipulando Datas .............................................................................................................48
16. Interagindo Com O Usuário ................................................................................................50
17. Usando Timer e Date ..........................................................................................................60
18. Manipulando Janelas E Documentos ..................................................................................62
Referências ............................................................................................................................69
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
5
Apresentação
Você está diante do livro didático preparado especialmente para a disciplina de
FERRAMENTAS DA WEB modalidade a distância.
Em julho de 2008 a Divisão de Ensino de Informática do Campus Rio Grande (na
época ainda sob a denominação de Colégio Técnico Industrial Prof. Mário Alquati –
CTI – vinculado a Universidade Federal do Rio Grande – FURG) aceitou o desafio de
propor o curso de Informática na modalidade EAD no âmbito do programa Escola
Técnica Aberta do Brasil - E-Tec Brasil - a ser ofertado para os pólos de apoio
presencial dos municípios de Canguçu, São Lourenço do Sul e Santo Antônio da
Patrulha.
De lá pra cá não foram poucos os esforços para esse desafio. Este material didático é
um produto deste esforço. Ele foi preparado de modo a permitir um melhor
acompanhamento dos conteúdos programáticos elaborados pelo professor e pelo tutor.
Utilize-o como a principal referência para seus estudos.
Sua jornada de estudo e seu sucesso dependerão, fundamentalmente, de seu esforço, de
sua dedicação, de seu empenho neste curso a distância. E você não está sozinho nesta
caminhada. Você poderá contar com a ajuda dos profissionais dos pólos da
coordenação, tutoria e monitoria e dos profissionais da equipe do Campus Rio Grande
de professores, tutores, técnicos e pedagogos. Estamos aqui para ajudá-lo a diminuir a
distância física que nos separa.
Um bom estudo!
Equipe Campus Rio Grande
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
7
Proposta da disciplina
A proposta desta disciplina é apresentar métodos, técnicas e ferramentas para a criação de
interfaces Web com foco na elaboração de interfaces através de HTML e Javascript
.
O HTML foi inventado em 1990 por Tim Berners-Lee. A finalidade inicial era a de tornar
possível o acesso e a troca de informações entre integrantes de diferentes universidades. O
projeto inicial tornou-se um sucesso jamais imaginado e o HTML tornou-se um dos pilares da
Internet tal como a conhecemos atualmente.
Através do HTML pode-se publicar informações e difundi-las pela da rede mundial de
computadores a World-Wide Web (WWW). Tal forma de publicar informações expandiu-se
em uma velocidade impressionante e hoje bilhões de páginas HTML estão a disposição de
seus usuários espalhados pelo mundo.
Tal expansão também trouxe a necessidade de expandir os recursos e possibilidades do
HTML. O próprio HTML evoluiu, hoje está em sua versão 4 e com sua versão 5 a caminho.
Entretanto um grande salto de qualidade e número de recursos ocorreu com a combinação
entre o HTML e o Javascript.
O Javascript possibilitou a adição de conteúdo dinâmico e interativo em páginas Web. As
possibilidades vão desde a adição de animações, verificação de preenchimento de formulários,
verificação das ações do usuário até a transformação de páginas web em aplicativos tais como
jogos, planilhas eletrônicas, editores de texto e editores gráficos on-line.
Neste contexto, esperamos que este livro didático juntamente com as demais matérias do
curso auxilie na compreensão e uso de métodos, técnicas e ferramentas para se disponibilizar
conteúdo e aplicações Web.
Prof. Dr. Tiago Lopes Telecken
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
9
Plano de Ensino
Disciplina:
FERRAMENTAS DA WEB
Objetivos:
Apresentação de métodos, técnicas e ferramentas para a criação de interfaces Web,
com foco na elaboração de interfaces através de HTML, CSS e Javascript.
Carga horária:
30h
Conteúdo programático:
UNIDADE 1 - HTML
Conceitos básicos de aplicações Web, conceitos básicos de HTML, Textos, Imagens,
Links, Listas, Tabelas, Formulários e Frames
UNIDADE 2 – Javascript
Conceitos básicos, Integração com o HTML e o navegador, Variáveis, Operadores,
Estruturas condicionais, Estruturas de repetição, Funções, Objetos, Eventos
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
11
UNIDADE 1
Introdução ao HTML
Elementos HTML
Atributos HTML
Comentários HTML
HTML Headings
Linhas HTML
Formatação de Textos HTML
Links HTML
Imagens HTML
Tabelas HTML
Listas HTML
Formulários HTML
Frames HTML
1
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
13
HTML
Objetivos desta Unidade:
• Apresentar os conceitos iniciais sobre páginas HTML e a Web
• Apresentar a estrutura das páginas Web
• Apresentar e propor exercícios sobre os principais comandos HTML
1. Introdução
• HTML é uma linguagem para descrever páginas web.
• HTML significa: Hyper Text Markup Language
• HTML não é uma linguagem de programação, é uma linguagem de marcação
• Uma linguagem de marcação é um conjunto de etiquetas (tags) de marcação
• Etiquetas (tags) de marcação descrevem páginas web
• Um documento HTML pode ser criado usando um editor de textos qualquer.
1.1 Etiquetas (tags) HTML
• Etiquetas (tags) HTML são palavras-chaves rodeadas por sinal de menor e maior
como em <html>
• Etiquetas (tags) HTML normalmente vêm em pares iguais a <i> e </i>
1.2 Documentos HTML e Páginas Web
• Documentos HTML descrevem páginas Web
• Documentos HTML contêm etiquetas HTML e texto comum
• Documentos HTML são também chamados de páginas Web
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
14
O propósito dos navegadores web é ler documentos HTML e mostrá-los como páginas web.
O navegador não mostra as etiquetas, mas usa as etiquetas para interpretar o conteúdo da
página.
1.3 Primeiro Programa – Editando documentos HTML
Pode-se editar arquivos HTML usando um editor WYSIWYG (What You See Is What You
Get - O que você vê é o que você tem) como FrontPage ou Dreamwaver, em vez de escrever
seus códigos em um editor de texto.
Porém, didaticamente falando, é altamente recomendado que seja usado um editor comum
(Bloco de notas, Notepad, NotePad ++) para aprender HTML.
Portanto, abra o Notepad (ou o Notepad ++ ou o editor de texto de sua preferência) e insira o
seguinte código:
<html>
<head>
<title>Alo!</title>
</head>
<body>
Alo mundo!!!!!
</body>
</html>
Salve como "alo.htm".
Nota: Quando você salva um documento HTML, você deve usar a extenção .htm ou a .html.
Abra o Internet Explorer (Mozilla ou o navegador de sua preferência). Selecione "Abrir" no
menu “Arquivo”(ou outra opção equivalente como “File”) do seu navegador. Uma caixa de
dialogo será mostrada. Selecione e/ou procure o documento HTML criado a pouco
("alo.htm"). Este documento será aberto e o seu conteúdo será mostrado pelo navegador.
Neste processo você criou, editou e acessou a sua primeira página HTML.
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
15
Explicando o exemplo
Agora será visto alguns detalhes sobre o código que gerou a visualização da página HTML
“alo.htm”.
A tag <html> é a primeira tag do documento. Essa tag diz ao navegador que está sendo
inicializado um documento HTML. A última tag da página é </html>. Ela informa que é o
fim do documento HTML.
O texto entre a tag <head> e </head> é a informação do cabeçalho. Estas informações não
são mostradas na janela do navegador. O texto entre as tags <title> e </title> é o título da
página. O título da página (“Alo” no caso da página alo.htm) é mostrado no título do
navegador.
O texto entre as tags <body> e </body> são os textos e demais conteúdos que são mostrados
na janela do navegador. No caso deste exemplo a janela do navegador vai mostrar a frase
“Alo mundo!!!!”.
Exemplos da W3 Schools
Ao longo deste tutorial serão dados links para páginas da W3 Schools. Onde os alunos podem
testar os novos conteúdos. Nestas páginas o aluno vê de um lado o código fonte de uma
página e do outro o resultado deste código. O código fonte pode ser alterado e quando o
usuário clicar no botão “Edit and Click Me” verá o resultado no lado direito da página. No
link abaixo é mostrado um exercício parecido com a página ola1.html que fizemos a pouco
(teste a ferramenta, pois ela será utilizada durante todo o curso).
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
2. Elementos HTML
Documentos HTML são definidos por elementos HTML. Um elemento HTML é sempre
formado por uma tag de inicio e uma tag de fim. A tag também pode ser chamada de
etiqueta.
<h1>Este é um título </h1>
<a href="principal.htm" >Este é um link</a>
<hr/>
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
16
Tag inicial Conteúdo do elemento Tag final
<h1> Este é um título </h1>
<a href="principal.htm" > Este é um link </a>
<hr/>
Sintaxe de elementos HTML
Um elemento HTML começa com uma tag inicial
Um elemento HTML termina com uma tag final
O conteúdo de um elemento é tudo que está entre as tags inicial e final
Alguns elementos HTML têm um conteúdo vazio
Elementos vazios são fechados na tag inicial que neste caso é final e inicial. (é o caso
do elemento <hr/> mostrado na tabela anterior)
Muitos elementos HTML podem ter atributos (mais tarde serão dados detalhes sobre
atributos). Os atributos são especificados na tag inicial.
Os elementos html podem ser escritos em letras maiúsculas ou minúsculas. Os dois
tipos de letras têm o mesmo efeito.
Elementos HTML aninhados
Muitos elementos HTML podem conter outros elementos (elementos aninhados).
Exemplo de documento HTML com elementos aninhados:
<html>
<body>
<p>Este é meu primeiro parágrafo</p>
</body>
</html>
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
17
Exemplo Explicado
O exemplo acima contém 3 elementos HTML aninhados. Tais elementos são descritos a
seguir.
O elemento <p>:
<p> Este é meu primeiro parágrafo </p>
O elemento <p> define um parágrafo no documento HTML.
O elemento tem a tag de inicio <p> e a tag de fim </p>.
O conteúdo do elemento é: Este é meu primeiro parágrafo.
O elemento <body>:
<body>
<p> Este é meu primeiro parágrafo </p>
</body>
O elemento <body> define o que será mostrado em uma janela do navegador.
O elemento tem a tag de inicio <body> e a tag de fim </body>.
O conteúdo do elemento é: <p> Este é meu primeiro parágrafo </p>. (o conteúdo é outro
elemento HTML).
O elemento <html>:
<html>
<body>
<p> Este é meu primeiro parágrafo </p>
</body>
</html>
O elemento <html> define um documento HTML.
O elemento tem a tag de inicio <html> e a tag de fim </html>.
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
18
O conteúdo do elemento é o elemento <body> e seu conteúdo.
Colocar as tags finais e flexibilidade dos navegadores
Em muitos casos os navegadores irão mostrar o documento corretamente mesmo que as tags
finais sejam esquecidas. De fato os navegadores podem suportar muitos erros e ainda
mostrar as páginas corretamente. Entretanto não conte com isso pois os efeitos de erros
podem ser imprevisíveis (no seu navegador, do seu computador pode dar certo, mas e no
navegador dos usuários? E o comportamento destes erros em scripts Java Script e PHP por
exemplo?). Para garantir páginas corretas siga a sintaxe HTML.
Exemplo de código com erro:
<p> Este é meu primeiro parágrafo
<p> Este é meu segundo parágrafo
Elementos vazios
Elementos HTML sem conteúdo são chamados de vazios. Eles podem ser fechados já na tag
inicial.
</br> é um exemplo de tag vazia. Ela define uma linha nova no documento.
Alternativamente pode-se escrever apenas <br>.
3. Atributos HTML
Atributos provêem informações adicionais sobre os elementos HTML.
Os atributos são especificados na tag inicial.
Os atributos são definidos pelo par nome/valor como, por exemplo: nome=”valor”
• Sempre coloque aspas nos valores dos atributos (simples ou duplas).
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
19
Exemplo
O elemento body contém um atributo chamado bgcolor. Este atributo especifica a cor de
fundo da janela do navegador. No exemplo abaixo o atributo bgcolor determina que o fundo
será azul.
<body bgcolor=”blue”> Ola Mundo Azul!</body>
4. Comentários HTML
Comentários podem ser inseridos em códigos html entre os símbolos <!-- -->. Os
comentários aparecem no código html mas não são vistos na visualização da página html.
Exemplo
<!—Estou adicionando este comentário -->
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_comment
5. HTML Headings
Headings são usados para se definir títulos e subtítulos em uma página html. Eles são
definidos com as tags <h1>, <h2>,...<h6>, sendo que, <h1> é o maior e <h6> é o menor.
Exemplo
<h1>Este é um heading</h1>
<h2> Este é um heading</h2>
<h3> Este é um heading</h3>
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_headers
6. Linhas HTML
A tag <hr/> cria uma linha horizontal.
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
20
Exemplo
<p> Este é um parágrafo </p>
<hr/>
<p> Este é outro parágrafo </p>
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_hr
7. Formatação de textos HTML
Negrito
Tamanho grande
itálico
Letra diferente
Normal subscript e superscript
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_formatting
O HTML usa tags como <b> and <i> para formatar texto, como Negrito ou italico.
Abaixo há vários exemplos de textos formatados. Observe e altere os códigos dos exemplos.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_formattingch
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pre
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_computeroutput
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_address
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_bdo
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_q
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
21
HTML Styles
Quase todos os elementos HTML podem conter um atributo chamado style. O valor do style
pode ser qualquer comando CSS. Entre outras coisas, o CSS pode estilizar elementos HTML,
como por exemplo, estilizar textos. Detalhes do CSS serão dados em outra etapa deste curso.
Por enquanto, pode-se ter uma prévia das possibilidades dos estilos no exemplo abaixo:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_styles
8. Links HTML
Link é uma referência a um recurso na web. Links podem apontar para qualquer recurso na
web: uma pagina HTML, uma imagem, um documento, um arquivo de som, um filme, um
aplicativo, etc.
Âncora é o termo usado para definir um destino de link dentro de uma página. Links podem
apontar para documentos ou para âncoras dentro de documentos.
O elemento HTML <a>, é usado para definir links e âncoras.
Link HTML
Sintaxe:
<a href="destino">Texto com link</a>
A tag de inicio contém atributos sobre o link.
O conteúdo do elemento define o que o usuário vê e pode clicar para ir ao destino do link. O
conteúdo não precisa ser apenas texto. Uma imagem ou qualquer outro elemento HTML pode
estar no conteúdo e ser um link.
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
22
O atributo href
O atributo href define o “endereço” ou destino do link.
Mais formalmente é dito que o valor do href é uma URL. URL é o endereço de um recurso na
internet. Detalhes sobre URLs podem ser vistos em: http://pt.wikipedia.org/wiki/URL
O elemento <a> abaixo define um link para o Colégio Técnico Industrial Prof. Mário Alquati
(CTI):
<a href="http://www.cti.furg.br/">Página do CTI!</a>
O texto abaixo será mostrado ao usuário no navegador.
Página do CTI!
Em resumo quando o usuário clica no conteúdo do link (“Página do CTI!” neste exemplo) o
navegador chama a página informada no atributo href ("http://www.cti.furg.br/" neste
exemplo).
O atributo target
O atributo target define informações adicionais sobre como será aberto o destino do link
dentro do documento apontado. As alternativas disponíveis são as seguintes:
• _blank - Abre uma página em uma nova janela.
• _self - Abre uma página na atual janela. É o comportamento padrão, ou seja, se o
atributo target não for informado o navegador abre a página na janela atual.
• _parent e _top: são utilizados com frames, mais detalhes sobre estas opções serão
dadas no capítulo sobre frames.
O exemplo abaixo abre um link em uma nova janela ao invés de abrir na mesma janela.
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
23
Exemplo
<a href="http://www.cti.furg.br/"
target="_blank">Página do CTI!</a>
O atributo name
O atributo name define uma âncora em um documento. Posteriormente links podem apontar
para esta âncora.
Sintaxe de uma âncora:
<a name="ponto">Um conteúdo</a>
Sintaxe de um link que aponta para a âncora anterior
<a href="#ponto"> Um conteúdo </a>
Exemplo:
Uma âncora:
<a name="importante">Ponto importante da página</a>
Um link no mesmo documento para esta âncora:
<a href="#importante">
Ir para o ponto importante da página </a>
Um link em outro documento para esta âncora:
<a href="http://www.cti.furg.br/principal.htm#importante">
Ir para o Ponto importante da outra página </a>
Destinos dos Links
Os links podem apontar para diferentes recursos, localizados em diferentes lugares e de
diferentes maneiras. Abaixo algumas das possibilidades de valores que podem ser colocados
nos atributos href (que irão definir diferentes destinos dos links).
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
24
href="#nome_da_ancora" – Link para uma âncora na atual página.
href="../pics/picturefile.jpg" – Link para uma figura localizada no mesmo servidor da atual
página (utiliza caminhos relativos)
href="../aluno/index.htm#nome_da_ancora" – Link para uma âncora em uma página
localizada no mesmo servidor da atual página (utiliza caminhos relativos)
href="http://www.google.com/" - Link para uma página que está em um servidor em
alguma parte do mundo com acesso a internet
href="mailto:[email protected]” – Link para um serviço de email. Ao clicar no link um
programa de email será chamado para que o usuário envie um email para [email protected]
Exemplos da W3Schools
Uma imagem como link
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_imglink
Link para locais na mesma página
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_link_locations
Link para mandar email. http://www.w3schools.com/html/tryit.asp?filename=tryhtml_mailto
9. Imagens HTML
A tag <img> é utilizada para colocar imagens em documentos HTML. A tag <img> é vazia,
ou seja, ela possui atributos na tag inicial e não tem tag final.
Para disparar uma imagem em uma página deve-se usar o atributo src. O valor do src é uma
URL que aponta para um arquivo que contém uma imagem (gif, jpg, etc)
<img src="http://www.cti.furg.br/imagens/colegio.gif " />
Olhe e altere os exemplos a seguir para conhecer diferenstes possibilidades de se adicionar
imagens em páginas HTML.
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
25
Exemplos
Imagem de fundo
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_bodybgimg
Imagens alinhadas a textos
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_image_align
Mais alinhamentos
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_image_float
Ajuste no tamanho das imagens
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_adj
Usando uma imagem como link
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_imglink
10. Tabelas HTML
As tabelas são úteis para organizar conteúdos em linhas e colunas. As tabelas
podem abrigar textos, imagens ou outras tabelas. Abaixo as tags utilizadas na
composição das tabelas:
• <TABLE> iniciar e fechar a tabela;
• <th> iniciar e fechar a primeira linha e <tr> iniciar e fechar as demais
linhas. A diferença entre <th> e <td> é que o texto de <th> é apresentado
em negrito e centralizado.
• <td> iniciar e fechar uma célula;
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
26
Os seguintes atributos podem alterar a aparência das tabelas:
width e height - largura e altura da tabela ( em pixels ou em porcentagem em
relação ao tamanho da janela);
border - espessura da borda da tabela;
bordercolor - cor das bordas da tabela;
bgcolor - cor do fundo da tabela;
align – alinhamento (pode ter os valores left, right ou center);
rowspan - quantidade de linhas ocupadas pela célula;
colspan - quantidade de colunas ocupadas pela célula;
Teste as possibilidades das tabelas através dos exemplos a seguir.
Exemplos
Tabela com caption.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables2
Tabela com colunas expandidas.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_span
Elementos dentro das tabelas.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_elements
Espaço entre textos e bordas.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellpadding
Cor de fundo.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_background
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
27
11. Listas HTML
HTML aceita listas que podem ser numeradas ou não numeradas.
Pode-se usar as tags <ul> fechadas com </ul> para iniciar listas não numeradas. Por
exemplo,
Lista não numerada
<ul>
<li> Primeiro
<li> Segundo
<li> Terceiro
</ul>
Terá como resultado:
Lista não numerada
Primeiro
Segundo
Terceiro
Pode-se usar as tags <ol> fechadas com </ol> para iniciar listas numeradas. Por exemplo:
<ol>
<li> Primeiro item
<li> Segundo item
<li> Terceiro item
</ol>
Terá como resultado:
1. Primeiro item
2. Segundo item
3. Terceiro item
Consulte os seguintes exemplos para conhecer as possibilidades das listas HTML
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
28
Exemplos
Diferentes Tipos de listas ordenadas.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_ordered
Diferentes Tipos de listas não-ordenadas.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_unordered
Listas encadeadas.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_nestedlists2
12. Formulários HTML
Um formulário é uma área de uma web page que pode conter elementos de formulários.
Elementos de formulários (como por exemplo, campos texto, checkboxes, áreas de texto, etc)
permitem que o usuário envie informações para ser processada por aplicações. Através de
formulários é possível, por exemplo, enviar dados para uma página PHP em um servidor.
Estes dados podem então ser utilizados para gerar páginas HTML ou armazenar dados em um
banco de dados, entre outras possibilidades.
A tag <form> é utilizada para definir um formulário.
<form>
.
elementos do formulario
.
</form>
É importante salientar que o formulário não é visto pelo usuário, ele vê apenas os elementos
do formulário.
Alguns elementos que podem ser inseridos em um formulário são descritos a seguir.
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
29
Text Fields
Text fields são usados quando você quer que os usuários digitem palavras ou números em um
campo texto.
<form>
Primeiro Nome:
<input type="text" name="primeiroNome" />
<br />
Último nome:
<input type="text" name="ultimoNome" />
</form>
O código acima é mostrado da seguinte maneira para o usuário:
Primeiro nome:
Último nome:
Radio Buttons
Radio Buttons são usados quando você quer que os usuários selecionem uma entre várias
opções.
<form>
<input type="radio" name="sexo" value="masculino" /> Masculino
<br />
<input type="radio" name="sexo" value="feminino" /> Feminino
</form>
O código acima é mostrado da seguinte maneira para o usuário:
Masculino
Feminino
Entre todos os check boxes que tem, o mesmo valor no atributo “name”, o usuário só pode
escolher 1.
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
30
Checkboxes
Checkboxes são usados quando você quer que os usuários selecionem uma ou várias opções.
<form>
Eu tenho uma moto:
<input type="checkbox" name="veiculo" value="moto" checked/>
<br />
Eu tenho um carro:
<input type="checkbox" name="veiculo" value="carro" />
<br />
Eu tenho um skate:
<input type="checkbox" name="veiculo" value="skate" />
</form>
O código acima é mostrado da seguinte maneira para o usuário:
Eu tenho uma moto:
Eu tenho um carro:
Eu tenho um skate:
O atributo action do formulário e o botão submit
Quando o usuário clica no botão "Submit", o conteúdo do formulário é enviado para o
servidor. O atributo action do formulário define o nome do arquivo no servidor que irá
receber estes dados (por exemplo: recebe.php, inscricao.php, etc) . Normalmente os arquivos
(arquivos php, por exemplo) que recebem os dados realizam algum tipo de processamento
com os mesmos (como por exemplo adicionar os dados em um banco de dados).
<form name="input" action="submit.php" method="get">
Nome:
<input type="text" name="primeiroNome" />
<input type="submit" value="Enviar" />
</form>
O código acima é mostrado da seguinte maneira para o usuário:
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
31
Primeiro nome: Enviar
Se você digitar alguma palavra no campo texto acima e clicar no botão Enviar, o navegador
enviará seus dados para uma página no servidor chamada "submit.php". Observe que o valor
colocado no atributo value do botão é o texto que irá aparecer no botão.
Explore outras possibilidades dos formulários através dos exemplos abaixo.
Exemplos
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_checkbox
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_radio
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_mail
13. Frames HTML
As tags <frameset> ... </frameset> dividem a janela do browser em duas ou mais partes,
chamadas de frames. Cada frame poderá conter arquivos distintos e independentes uns dos
outros. Para carregar esses arquivos, usa-se o comando <frame> que, por sua vez, contém
dois atributos importantes:
src: define o arquivo que será carregado no frame;
name define o nome do frame. O name possibilita o aparecimento do destino um link que
está em um frame apareça em outro.
É preciso criar os documentos e inserir os comandos necessários para carregá-los na região
apropriada do frame.
Exemplo: Salvar o código abaixo com o nome frame.htm no mesmo diretório que contém as
páginas HTML “um.htm” e “dois.htm”.
<HTML>
<head><title>Frames</title></head>
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
32
<BODY>
<FRAMESET COLS = "300,100% " >
<FRAME SRC="um.htm" NAME="um">
<FRAME SRC="dois.htm" NAME="dois">
</FRAMESET>
</BODY>
</HTML>
Como resultado a tela aparece dividida em duas colunas. Numa coluna é mostrado o
conteúdo da página um.htm e em outra o conteúdo da página dois.htm. Pode-se, também,
determinar a divisão da janela em linhas (rows) criando, assim, frames horizontais.
Exercite mais sobre frames com os exemplos abaixo:
Exemplos
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_noframes
Este exemplo mostra como usar as tags <noframe>. Se o navegador do usuário não suporta
frames, no lugar dos frames é mostrada a mensagem que está na tag noframe.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_frame_mix
Frames verticais e horizontais
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_frame_noresize
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
33
UNIDADE 2
Introdução ao JavaScript
Operadores Lógicos
Operadores Matemáticos
Controles Especiais
Comandos Condicionais
Eventos
Criando Variáveis
Escrevendo no Documento
Mensagens
Criando Funções
Funções Intrísecas
Criando novas Instâncias
Manipulando Arrays
Manipulando STRING’S
Manipulando Datas
Interagindo com o Usuário
Usando Time e Date
Manipulando Janelas e Documentos
2
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
35
Javascript
Objetivos desta Unidade:
• Apresentar os principais conceitos e características da linguagem Javascript
• Apresentar os principais operadores, comandos e recursos do Javascript
1. Introdução
JavaScript é uma linguagem que permite injetar lógica em páginas escritas em HTML
(HiperText Mark-up Language). As páginas HTML podem ser escritas utilizando-se editores
de texto, como o Notepad, NotePad++, KWrite, Kate, etc. Porém, existem editores próprios
para gerar HTML, tais como Adobe Dreamweaver e Microsoft FrontPage.
Os parágrafos de lógica do JavaScript podem estar "soltos" ou atrelados a ocorrência de
eventos.
Os parágrafos soltos são executados na seqüência em que aparecem na página (documento) e
os atrelados a eventos são executados apenas quando o evento ocorre.
Para inserir parágrafos de programação dentro do HTML é necessário identificar o início e o
fim do set de JavaScript, da seguinte forma:
<SCRIPT>
Conjunto de instruções
</SCRIPT>
Este procedimento pode ser adotado em qualquer local da página. Entretanto, para melhor
visualização e facilidade de manutenção, recomenda-se que toda a lógica seja escrita no
início do documento, através da criação de funções a serem invocadas quando se fizer
necessário (normalmente atreladas a eventos).
Se a lógica é escrita a partir de um determinado evento, não é necessário o uso dos comandos
<SCRIPT> e </SCRIPT>.
Os comandos JavaScript são sensíveis ao tipo de letra (maiúsculas e minúsculas) em sua
sintaxe.
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
36
Portanto, é necessário que seja obedecido a forma de escrever os comandos, de acordo com a
forma apresentada ao longo deste manual. Caso seja cometido algum erro de sintaxe quando
da escrita de um comando, o JavaScript interpretará, o que seria um comando, como sendo o
nome de uma variável.
2. OPERADORES LÓGICOS
São operadores a serem utilizados em comandos condicionais, tais como: IF , FOR e WHILE.
Os comandos condicionais serão vistos mais a frente.
= = Igual
!= Diferente
> Maior
>= Maior ou Igual
< Menor
<= Menor ou Igual
&& E
|| Ou
3. OPERADORES MATEMÁTICOS
São operadores a serem utilizados em cálculos, referências de indexadores e manuseio de
strings.
Ao longo do manual estes operadores serão largamente utilizados, dando, assim, uma noção
mais precisa do seu potencial.
+ adição de valor e concatenação de strings
- subtração de valores
* multiplicação de valores
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
37
/ divisão de valores
% obtem o resto de uma divisão:
Ex: 150 % 13 retornará 7
7 % 3 retornará 1
+= concatena /adiciona ao string/valor já existente. Ou seja:
x += y é o mesmo que x = x + y
Da mesma forma podem ser utilizados: -= , *= , /= ou %=
Um contador pode ser simplificado utilizando-se: X++ ou X-- o que equivale às expressões:
X = X + 1 ou X = X - 1 respectivamente.
Para inverter sinal: X = -X negativo para positivo ou positivo para negativo.
4. CONTROLES ESPECIAIS
\b - backspace
\f - form feed
\n - new line characters
\r - carriage return
\t - tab characters
// - Linha de comentário
/*....*/ - Delimitadores para inserir um texto com mais de uma linha como comentário.
Os delimitadores naturais para uma string são " ou ' . Caso seja necessário a utilização destes
caracteres como parte da string, utilize \ precedendo " ou '.
Ex. alert ("Cuidado com o uso de \" ou \' em uma string")
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
38
5. COMANDOS CONDICIONAIS
São comandos que condicionam a execução de certa tarefa à veracidade ou não de uma
determinada condição, ou enquanto determinada condição for verdadeira.
São eles:
Comando IF
if (condição)
{ ação para condição satisfeita }
[ else
{ ação para condição não satisfeita } ]
Ex.
if (Idade < 18)
{Categoria = "Menor" }
else
{Categoria = "Maior"}
Comando FOR
for ( [inicialização/criação de variável de controle ;]
[condição ;]
[incremento da variável de controle] )
{ ação }
Ex.
for (x = 0 ; x <= 10 ; x++)
{alert ("X igual a " + x) }
Comando WHILE
Executa uma ação enquanto determinada condição for verdadeira.
while (condição)
{ ação }
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
39
Ex.
var contador = 10
while (contador > 1)
{ contador-- }
Condicional
receptor = ( (condição) ? verdadeiro : falso)
Ex.
NomeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino")
OBS:
Nos comandos FOR e WHILE a diretiva "break" pode ser utilizada para interromper a
condição principal e sair do loop. Da mesma forma, a diretiva "continue" interrompe uma
ação (se determinada condição ocorrer) mas volta para o loop.
Diretivas/condições entre [ ] significam que são opcionais.
6. EVENTOS
São fatos que ocorrem durante a execução do sistema, a partir dos quais o programador pode
definir ações a serem realizadas pelo programa.
Abaixo apresentamos a lista dos eventos possíveis, indicando os momentos em que os
mesmos podem ocorrer, bem como, os objetos passíveis de sua ocorrência.
• onload - Ocorre na carga do documento. Ou seja, só ocorre no BODY do documento.
• onunload - Ocorre na descarga (saída) do documento. Também só ocorre no BODY.
• onchange - Ocorre quando o objeto perde o focus e houve mudança de conteúdo.
• válido para os objetos Text, Select e Textarea.
• onblur - Ocorre quando o objeto perde o focus, independente de ter havido mudança.
• válido para os objetos Text, Select e Textarea.
• onfocus - Ocorre quando o objeto recebe o focus.
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
40
• válido para os objetos Text, Select e Textarea.
• onclick - Ocorre quando o objeto recebe um Click do Mouse.
• válido para os objetos Buton, Checkbox, Radio, Link, Reset e Submit.
• onmouseover - Ocorre quando o ponteiro do mouse passa por sobre o objeto.
• válido apenas para Link.
• onselect - Ocorre quando o objeto é selecionado.
• válido para os objetos Text e Textarea.
• onsubmit - Ocorre quando um botão tipo Submit recebe um click do mouse.
• válido apenas para o Form.
7. CRIANDO VARIÁVEIS
A variável é criada automaticamente, pela simples associação de valores a mesma.
Ex. NovaVariavel = "Jose"
Foi criada a variável de nome NovaVariavel que, passou a conter a string Jose.
As variáveis podem ser Locais ou Globais. As variáveis que são criadas dentro de uma
função são Locais e referenciáveis apenas dentro da função. As variáveis criadas fora de
funções são Globais, podendo serem referenciadas em qualquer parte do documento.
Desta forma, variáveis que precisam ser referenciadas por várias funções ou em outra parte
do documento, precisam ser definidas como globais.
Embora não seja recomendável, em uma função, pode ser definida uma variável local com o
mesmo nome de uma variável global. Para isso utiliza-se o método de definição var.
Ex. Variável Global : MinhaVariavel = ""
Variável Local : var MinhaVariavel = ""
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
41
8. ESCREVENDO NO DOCUMENTO
O JavaScript permite que o programador escreva linhas dentro de uma página (documento),
através do método write. As linhas escritas desta forma, podem conter textos, expressões
JavaScript e comandos Html. As linhas escritas através deste método aparecerão no ponto da
tela onde o comando for inserido.
Ex:
<script>
valor = 30
document.write ("Minha primeira linha")
document.write ("Nesta linha aparecerá o resultado de : " +
(10 * 10 + valor))
</script>
A idéia do exemplo acima é escrever duas linhas. Entretanto o método write não insere
mudança de linha, o que provocará o aparecimento de apenas uma linha com os dois textos
emendados.
Para evitar este tipo de ocorrência, existe o método writeln que escreve uma linha e espaceja
para a seguinte. Entretanto, em nossos testes, este comando não surtiu efeito, obtendo-se o
mesmo resultado do método write. A solução encontrada para esta situação foi a utilização do
comando de mudança de parágrafo da linguagem Html.
Ex:
<script>
valor = 30
document.write ("<p>Minha primeira linha</p>")
document.write ("<p>Nesta linha aparecerá o resultado de : " +
(10 * 10 + valor) + "</p>")
</script>
Isto resolve a questão da mudança de linha, porém, vai gerar uma linha em branco, entre cada
linha, por se tratar de mudança de parágrafo. Caso não seja desejado a existência da linha em
branco, a alternativa é utilizar o comando Html <br> que apenas muda de linha.
Ex:
<script>
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
42
valor = 30
document.write ("<br>Minha primeira linha")
document.write ("<br>Nesta linha aparecerá o resultado de : "
+ (10 * 10 + valor) )
</script>
9. MENSAGENS
Existem três formas de comunicação com o usuário através de mensagens.
Apenas Observação.
alert ( mensagem )
Ex.
alert ("Certifique-se de que as informações estão corretas")
Mensagem que retorna confirmação de OK ou CANCELAR
confirm (mensagem)
Ex.
if (confirm ("Algo está errado...devo continuar??"))
{ alert("Continuando") }
else
{ alert("Parando") }
Recebe mensagem via caixa de texto Input
Receptor = prompt ("Minha mensagem", "Meu texto")
Onde:
Receptor é o campo que vai receber a informação digitada pelo usuário
Minha mensagem é a mensagem que vai aparecer como Label da caixa de input
Meu texto é um texto, opcional, que aparecerá na linha de digitação do usuário
Ex.
Entrada = prompt("Informe uma expressão matemática", "")
Resultado = eval(Entrada)
document.write("O resultado é = " + Resultado)
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
43
10. CRIANDO FUNÇÕES
Uma função é um set de instruções, que só devem ser executadas quando a função for
acionada.
A sintaxe geral é a seguinte:
function NomeFunção (Parâmetros)
{ Ação }
Suponha uma função que tenha como objetivo informar se uma pessoa é maior ou menor de
idade, recebendo como parâmetro a sua idade.
function Idade (Anos) {
if (Anos > 17)
{ alert ("Maior de Idade") }
else
{ alert ("menor de Idade") }
}
Para acionar esta função, suponha uma caixa de texto, em um formulário, na qual seja
informada a idade e, a cada informação, a função seja acionada.
<form>
<input type=text size=2 maxlength=2 name="Tempo"
onchange="Idade(Tempo.value)">
</form>
Observe-se que o parâmetro passado (quando ocorre o evento "onchange") foi o conteúdo da
caixa de texto "Tempo" (propriedade "value") e que, na função, chamamos de "Anos". Ou
seja, não existe co-relação entre o nome da variável passada e a variável de recepção na
função. Apenas o conteúdo é passado.
11. FUNÇÕES INTRÍNSECAS
São funções embutidas na própria linguagem. A sintaxe geral é a seguinte:
Result = função (informação a ser processada)
- eval = Calcula o conteúdo da string
- parseInt - Transforma string em inteiro
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
44
- parseFloat - Transforma string em número com ponto flutuante
- date() - Retorna a data e a hora (veja o capítulo manipulando datas)
Ex1: Result = eval ( " (10 * 20) + 2 - 8")
Ex2: Result = eval (string)
No primeiro exemplo Result seria igual a 194. No segundo, depende do conteúdo da string,
que também pode ser o conteúdo (value) de uma caixa de texto.
- Funções tipicamente Matemáticas:
Math.abs(número) - retorna o valor absoluto do número (ponto flutuante)
Math.ceil(número) - retorna o próximo valor inteiro maior que o número
Math.floor(número) - retorna o próximo valor inteiro menor que o número
Math.round(número) - retorna o valor inteiro, arredondado, do número
Math.pow(base, expoente) - retorna o cálculo do exponencial
Math.max(número1, número2) - retorna o maior número dos dois fornecidos
Math.min(número1, número2) - retorna o menor número dos dois fornecidos
Math.sqrt(número) - retorna a raiz quadrada do número
Math.SQRT2 - retorna a raiz quadrada de 2 (aproximadamente 1.414)
Math.SQRT_2 - retorna a raiz quadrada de 1/2 (aproximadamente 0.707)
Math.sin(número) - retorna o seno de um número (anglo em radianos)
Math.asin(número) - retorna o arco seno de um número (em radianos)
Math.cos(número) - retorna o cosseno de um número (anglo em radianos)
Math.acos(número) - retorna o arco cosseno de um número (em radianos)
Math.tan(número) - retorna a tangente de um número (anglo em radianos)
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
45
Math.atan(número) - retorna o arco tangente de um número (em radianos)
Math.pi retorna o valor de PI (aproximadamente 3.14159)
Math.log(número) - retorna o logarítmo de um número
Math.E - retorna a base dos logarítmos naturais (aproximadamente 2.718)
Math.LN2 - retorna o valor do logarítmo de 2 (aproximadamente 0.693)
Math.LOG2E - retorna a base do logarítmo de 2 (aproximadamente 1.442)
Math.LN10 retorna o valor do logarítmo de 10 (aproximadamente 2.302)
Math.LOG10E - retorna a base do logarítmo de 10 (aproximadamente 0.434)
Observação:
Em todas as funções, quando apresentamos a expressão "(número)", na verdade queremos
nos referir a um argumento que será processado pela função e que poderá ser: um número,
uma variável ou o conteúdo de um objeto (propriedade value).
12. CRIANDO NOVAS INSTÂNCIAS
Através do operador new podem ser criadas novas instâncias a objetos já existentes, mudando
o seu conteúdo, porém, mantendo suas propriedades.
A sintaxe geral é a seguinte:
NovoObjeto = new ObjetoExistente (parâmetros)
Ex1:
MinhaData = new Date ()
MinhaData passou a ser um objeto tipo Date, com o mesmo conteúdo existente em Date(data
e hora atual)
Ex2:
MinhaData = new Date(1996, 05, 27)
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
46
MinhaData passou a ser um objeto tipo Date, porém, com o conteúdo de uma nova data.
Ex3:
Suponha a existência do seguinte objeto chamado Empresas
function Empresas (Emp, Nfunc, Prod)
{ this.Emp = Emp
this.Nfunc = Nfunc
this.Prod = Prod }
Podemos criar novas instâncias, usando a mesma estrutura, da seguinte forma:
Elogica = new Empresas("Elogica", "120", "Serviços")
Pitaco = new Empresas("Pitaco", "35", "Software")
Corisco = new Empresas("Corisco", "42", "Conectividade")
Assim, a variável Elogica.Nfunc terá o seu conteúdo igual a 120
13. MANIPULANDO ARRAYS
O JavaScript não tem um tipo de dado ou objeto para manipular arrays. Por isso, para
trabalhar com arrays é necessário a criação de um objeto com a propriedade de criação de um
array.
No exemplo abaixo, criaremos um objeto tipo array de tamanho variável e com a função de
"limpar" o conteúdo das variáveis cada vez que uma nova instância seja criada a partir dele.
function CriaArray (n) {
this.length = n
for (var i = 1 ; i <= n ; i++)
{ this[i] = "" } }
Agora podemos criar novas instâncias do objeto "CriaArray" e alimentá-los com os dados
necessários.
NomeDia = new CriaArray(7)
NomeDia[0] = "Domingo"
NomeDia[1] = "Segunda"
NomeDia [2] = "Terça"
NomeDia[3] = "Quarta"
NomeDia[4] = "Quinta"
NomeDia[5] = "Sexta"
NomeDia[6] = "Sábado"
Atividade = new CriaArray(5)
Atividade[0] = "Analista"
Atividade[1] = "Programador"
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
47
Atividade[2] = "Operador"
Atividade[3] = "Conferente"
Atividade[4] = "Digitador"
Agora poderemos obter os dados diretamente dos arrays.
DiaSemana = NomeDia[4]
Ocupação = Atividade[1]
DiaSemana passaria a conter Quinta e Ocupação conteria Programador.
Outra forma de se trabalhar com arrays é criar novas instâncias dentro do próprio objeto do
array, o que proporciona o mesmo efeito de se trabalhar com matriz. Isso pode ser feito da
seguinte forma:
function Empresas (Emp, Nfunc, Prod) {
this.Emp = Emp
this.Nfunc = Nfunc
this.Prod = Prod }
TabEmp = new Empresas(3)
TabEmp[1] = new Empresas("Elogica", "120", "Serviços")
TabEmp[2] = new Empresas("Pitaco", "35", "Software")
TabEmp[3] = new Empresas("Corisco", "42", "Conectividade")
Assim, poderemos obter a atividade da empresa número 3, cuja resposta seria Conectividade,
da seguinte forma:
Atividade = TabEmp[3].Prod
Obs:
É importante lembrar que, embora os exemplos estejam com indexadores fixos, os
indexadores podem ser referências ao conteúdo de variáveis.
14. MANIPULANDO STRING's
O JavaScript é bastante poderoso no manuseio de String´s, fornecendo ao programador uma
total flexibilidade em seu manuseio.
Abaixo apresentamos os métodos disponíveis para manuseio de string´s.
string.length - retorna o tamanho da string (quantidade de bytes)
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
48
string.charAt(posição) - retorna o caracter da posição especificada (inicia em 0)
string.indexOf("string") - retorna o número da posição onde começa a primeira "string"
string.lastindexOf("string") - retorna o número da posição onde começa a última "string"
string.substring(index1, index2) - retorna o conteúdo da string que corresponde ao intervalo
especificado. Começando no caracter posicionado em index1 e terminando no caracter
imediatamente anterior ao valor especificado em index2.
Ex.
Todo = "Elogica"
Parte = Todo.substring(1, 4)
(A variável Parte receberá a palavra log)
string.toUpperCase() - Transforma o conteúdo da string para maiúsculo (Caixa Alta)
string.toLowerCase() - Transforma o conteúdo da string para minúsculo (Caixa Baixa)
escape ("string") - retorna o valor ASCII da string (vem precedido de %)
unscape("string") - retorna o caracter a partir de um valor ASCII (precedido de %)
15. MANIPULANDO DATAS
Existe apenas uma função para que se possa obter a data e a hora. É a função Date(). Esta
função devolve data e hora no formato: Dia da semana, Nome do mês, Dia do mês,
Hora:Minuto:Segundo e Ano
Ex.
Fri May 24 16:58:02 2009
Para se obter os dados separadamente, existem os seguintes métodos:
getDate() - Obtém o dia do mês (numérico de 1 a 31)
getDay() - Obtém o dia da semana (0 a 6)
getMonth() - Obtém o mês (numérico de 0 a 11)
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
49
getYear() - Obtém o ano
getHours() - Obtém a hora (numérico de 0 a 23)
getMinutes() - Obtém os minutos (numérico de 0 a 59)
getSeconds() - Obtém os segundos (numérico de 0 a 59)
No exemplo abaixo obteremos o dia da semana. Para tal, utilizaremos a variável DataToda
para armazenar data/hora e a variável DiaHoje para armazenar o número do dia da semana.
DataToda = new Date()
DiaHoje = DataToda.getDay()
Para obter o dia da semana alfa, teremos que construir uma tabela com os dias da semana e
utilizar a variável DiaHoje como indexador.
function CriaTab (n) {
this.length = n
for (var x = 1 ; x<= n ; x++)
{ this[x] = "" } }
NomeDia = new CriaTab(7)
NomeDia[0] = "Domingo"
NomeDia[1] = "Segunda"
NomeDia [2] = "Terça"
NomeDia[3] = "Quarta"
NomeDia[4] = "Quinta"
NomeDia[5] = "Sexta"
NomeDia[6] = "Sábado"
DiaSemana = NomeDia[DiaHoje]
Para criar uma variável tipo Date com o conteúdo informado pela aplicação, existe o método
set. Assim, temos os seguintes métodos: setDate, setDay, setMonth, setYear, setHours,
setMinutes e setSeconds.
Seguindo o exemplo acima, para mudar o mês para novembro, teríamos:
DataToda.setMonth(10)
Exemplos adicionais serão encontrados no capítulo "Usando Timer e Date
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
50
16. INTERAGINDO COM O USUÁRIO
A interação com o usuário se dá através de objetos para entrada de dados (textos), marcação
de opções (radio, checkbox e combo), botões e link's para outras páginas.
Conceitualmente, os objetos são divididos em: Input, Textarea e Select.
O objeto Input divide-se (propriedade Type) em:
• Password
• Text
• Hidden
• Checkbox
• Radio
• Button
• Reset
• Submit
A construção destes objetos é feita pela linguagem HTML (HiperText Mark-up Language).
Objeto Input TEXT
• É o principal objeto para entrada de dados.
• Suas principais propriedades são: type, size, maxlength, name e value.
type=text : Especifica um campo para entrada de dados normal
size : Especifica o tamanho do campo na tela.
maxlength : Especifica a quantidade máxima de caracteres permitidos.
name : Especifica o nome do objeto
value : Armazena o conteúdo do campo.
Os eventos associados a este objeto são: onchange, onblur, onfocus e onselect.
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
51
Ex:
<form name="Text">
Entrada de Texto <input type=text size=20 maxlength=30
name="CxTexto" value="" onchange="alert ('Voce digitou ' +
CxTexto.value)">
</form>
Objeto Input PASSWORD
É o objeto para entrada de Senhas de acesso (password). Os dados digitados neste objeto são
criptografados e, só são interpretados (vistos) pelo "server", por razões de segurança.
Suas principais propriedades são: type, size, maxlength, name e value.
type=password : Especifica um campo para entrada de senha. Os dados digitados são
substituidos (na tela) por "*".
size : Especifica o tamanho do campo na tela.
maxlength : Especifica a quantidade máxima de caracteres permitidos.
name : Especifica o nome do objeto
value : Armazena o conteúdo digitado no campo.
Os eventos associados a este objeto são: onchange, onblur, onfocus e onselect.
Ex:
<form name="Password">
Entrada de Senha<input type=password size=10 maxlength=10
name="Senha" value="">
</form>
Objeto Input HIDDEN
É um objeto semelhante ao input text, porém, invisível para o usuário. Este objeto deve ser
utilizado para passar informações ao "server" (quando o formulário for submetido) sem que o
usuário tome conhecimento. Suas propriedades são: name e value.
name : Especifica o nome do objeto.
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
52
value : Armazena o conteúdo do objeto
Ex:
<form name="Hidden">
<input type=hidden size=20 maxlength=30 name="HdTexto"
value="" >
</form>
Objeto Input CHECKBOX
São objetos que permitem ao usuário ligar ou desligar uma determinada opção.
Suas principais propriedades são: name, value e checked.
name : Especifica o nome do objeto
value : Especifica o valor que será enviado ao "server" se o objeto estiver ligado (checked).
Caso seja omitido, será enviado o valor default "on" .
Esta propriedade também serve para ativar comandos lógicos, testando-se a condição
de "checked".
checked : Especifica que o objeto inicialmente estará ligado
O único evento associado a este objeto é onclick.
Ex:
No exemplo abaixo, criaremos um objeto input.text e três objetos checkbox. O primeiro
checkbox, quando ativado, transformará o texto em caracteres minúsculos. O segundo
checkbox, quando ativado, transformará o texto em caracteres maiúsculos. O terceiro
checkbox, quando ativado, dará um aviso do conteúdo que será recebido pelo "server" caso o
formulário seja submetido para este.
<SCRIPT>
function AltMaiusc () {
document.TCheck.Muda.value =
document.TCheck.Muda.value.toUpperCase()
document.TCheck.Opt1.checked = false
}
function AltMinusc () {
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
53
document.TCheck.Muda.value =
document.TCheck.Muda.value.toLowerCase()
document.TCheck.Opt2.checked = false
}
</SCRIPT>
<form name="TCheck">
Muda Case <input type=text size=20 maxlength=20 name="Muda">
Minusculo<input type=checkbox name="Opt1" value="1" checked
onclick="if (this.checked)
{ AltMinusc() } ">
Maiusculo<input type=checkbox name="Opt2" value="2"
onclick="if (this.checked)
{ AltMaiusc() } ">
Demo valor<input type=checkbox name="Opt3"
onclick="if (Opt3.checked)
{alert ('Server recebera = ' + Opt3.value) } ">
</form>
Existe ainda outra forma de manipular este objeto, em forma de array, que é a seguinte:
form.elements[index].propriedade. Esta não é uma boa forma porque o index é único dentro
de um formulário, exigindo muito cuidado quando se acrescenta ou se apaga um objeto, pois,
neste caso, haverá um natural deslocamento do index, podendo comprometer a lógica.
Objeto Input RADIO
São objetos que permitem ao usuário a escolha de apenas uma alternativa, diante de uma série
de opções.
Suas principais propriedades são: name, value e checked.
name : Especifica o nome do objeto. Para caracterizar uma mesma série de opções, todos os
objetos desta série têm que ter o mesmo "name".
value : Especifica o valor que será enviado ao "server" se o objeto estiver ligado (checked).
Caso seja omitido, será enviado o valor default "on" . Esta propriedade também serve
para ativar comandos lógicos, testando-se a condição de "checked".
checked : Especifica que o objeto inicialmente estará ligado
Para utilização deste objeto é importante o conhecimento de outras propriedades associadas:
Objeto.length : Retorna a quantidade de opções existentes na lista
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
54
Objeto.[index].value : retorna o texto (value) associado a cada opção
Objeto.[index].checked : retorna verdadeiro ou falso
O único evento associado a este objeto é onclick.
Ex: No exemplo abaixo temos um conjunto de objetos radio com o objetivo de mudar a cor
de fundo do documento atual.
<p>Radio</p>
<p> <input type=radio name="Rad" value="1"
onclick="document.bgColor='green'"> Fundo Verde
<input type=radio name="Rad" value="2"
onclick="document.bgColor='blueviolet'"> Fundo Violeta
<input type=radio name="Rad" value="3"
onclick="document.bgColor='#FFFF00'"> Fundo Amarelo
</p>
Objeto Input BUTTON
Este objeto tem por finalidade criar um botão ao qual se possa atrelar operações lógicas, a
serem executadas quando o mesmo receber um click.
Suas propriedades são: name e value.
name : Especifica o nome do objeto.
value : Especifica o nome que aparecerá sobre o botão
O único evento associado a este objeto é onclick.
Ex.
<form method="POST" name="TstButton">
Digite um Texto <input type=text size=30 maxlength=30
name="Teste" value="">
Click no Botao <input type=button name="Bteste" value="Botao
de teste"
onclick="alert ('Voce digitou: ' + TstButton.Teste.value)">
</form>
Objeto Input RESET
Este objeto é um botão que tem por finalidade, única, limpar os campos digitados pelo
usuário, restaurando o conteúdo do formulário para os valores iniciais.
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
55
É recomendável a utilização deste objeto, para facilitar o usuário a limpar suas informações,
uma vez que a utilização da opção "reload" do "browser" (que seria uma forma) não perde as
informações digitadas.
Suas propriedades são: name e value.
name : Especifica o nome do objeto.
value : Especifica o nome que aparecerá sobre o botão
O único evento associado a este objeto é onclick.
Ex.
<form method="POST" name="TesteRes">
Digite um Texto<input type=text size=10 maxlength=20
name="Teste" value="">
Apague o Texto <input type=reset name="Bres" value="Reset">
</form>
Objeto Input SUBMIT
Este objeto é um botão que tem por finalidade submeter (enviar) o conteúdo dos objetos do
formulário ao "server". O formulário será submetido à URL especificada na propriedade
"action" do formulário.
Suas propriedades são: name e value.
name : Especifica o nome do objeto.
value : Especifica o nome que aparecerá sobre o botão
O único evento associado a este objeto é onclick. Embora se possa atrelar lógica a este
evento, não se pode evitar que o formulário seja submetido, portanto, não é aconselhavel o
seu uso. Mais seguro e mais útil é a utilização da propriedade onSubmit do formulário. Este
permite que se atrele lógica e decida-se pela submissão ou não.
Ex:
<script>
function TestaVal() {
if (document.TesteSub.Teste.value == "") {
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
56
alert ("Campo nao Preenchido...Form nao Submetido")
return false }
else {
alert ("Tudo Ok....Form Submetido")
return true } }
</script>
<form method="POST" name="TesteSub"
onSubmit="return TestaVal()"
action="localhost/local.php">
Digite um Texto <input type=text size=10 maxlength=10
name="Teste" value="">
Botao Submit <input type=submit name="Bsub" value="Manda
p/Server">
</form>
No exemplo acima, o formulário está sendo submetido a URL "localhost" (que é o endereço
da nossa máquina local). Este servidor está rodando o "Apache Server". Estamos enviando os
dados a uma página PHP.
Objeto TEXTAREA
É um objeto para entrada de dados em um campo de múltiplas linhas. Suas principais
propriedades são: name, rows e cols.
name : Especifica o nome do objeto
rows : Especifica a quantidade de linhas que aparecerão na tela
cols : Especifica a quantidade de caracteres que aparecerão em cada linha
value : Acessa o conteúdo do campo via programação.
Os eventos associados a este objeto são: onchange, onblur, onfocus e onselect.
Ex:
<form name="TesteTextarea">
Texto de Múltiplas Linhas <textarea name="MultText" rows=2
cols=40>
Primeira linha do texto inicial
segunda linha do texto inicial
</textarea>
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
57
Objeto SELECT
É um objeto para entrada de opções, onde o usuário, a partir de uma lista de alternativas,
seleciona uma ou mais opções.
Suas principais propriedades são: name, size, value e multiple.
name : Especifica o nome do objeto
size : Especifica a quantidade de opções que aparecerão na tela simultaneamente
value : Associa um valor ou string para cada opção (opcional)
multiple : Especifica a condição de múltipla escolha (usando-se a tecla Ctrl)
Para utilização deste objeto é importante o conhecimento de outras propriedades associadas:
Objeto.length : Retorna a quantidade de opções existentes na lista
Objeto.selectedindex : Retorna o "index" do objeto selecionado (primeiro = 0)
Objeto.options[index].text : retorna o texto externo associado a cada opção
Objeto.options[index].value : retorna o texto interno (value) associado a cada opção
Objeto.options[index].selected : retorna verdadeiro ou falso.
Os eventos associados a este objeto são: onchange, onblur e onfocus.
Ex1:
Neste exemplo é importante observar os seguintes aspectos:
a) A lista permite apenas uma seleção
b) A quarta opção aparecerá inicialmente selecionada (propriedade "selected")
c) Não utilizamos a propriedade "value". Assim, a propriedade "text" e a propriedade "value"
passam a ter o mesmo valor, ou seja, o valor externo que aparece na tela.
<script>
function Verselect(Campo) {
Icombo = Campo.selectedIndex
alert ("Voce escolheu " + Campo.options[Icombo].text) }
</script>
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
58
Objeto Select <select name="Combo1" size=1
onchange="Verselect(Combo1)">
<option>Opcao 1
<option>Opcao 2
<option>Opcao 3
<option selected>Opcao 4 (recomendada)
<option>Opcao 5
</select>
Ex2:
Neste exemplo é importante observar os seguintes aspectos:
a) A lista permite múltiplas seleções
b) Utilizamos a propriedade "value". Assim as propriedades "text" e "value"
têm valores diferentes: text retornará Escolha 1 a Escolha 4 e value
retornará List1 a List4.
c) O parâmetro passado, quando da ocorrência do evento onblur, foi this.
Esta diretiva significa que estamos passando este objeto.
<script>
function Vermult(Lista) {
var opcoes = ""
for (i = 0 ; i < Lista.length ; i++) {
if (Lista.options[i].selected) {
opcoes += (Lista.options[i].value + ", ") }
}
alert ("As opcoes escolhidas foram : " + opcoes) }
</script>
Objeto Select2 <select name="Combo2" size=4 multiple
onblur="Vermult(this)">
<option value="List1">Escolha 1 </option>
<option value="List2">Escolha 2 </option>
<option value="List3">Escolha 3 </option>
<option value="List4">Escolha 4 </option>
</select>
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
59
Focando um Objeto
Este método permite que o cursor seja ativado em um determinado objeto (focado). Isso pode
ser feito na carga do documento, a partir da ocorrência de um evento ou mesmo dentro de
uma função.
Observe que até agora o usuário tinha que dar um "Click" para focar o objeto desejado.
De forma semelhante existe o método "Select". Este método marca o conteúdo do objeto com
uma tarja roxa, permitindo ao usuário, em caso de substituição do conteúdo do campo, não ter
que apagar o conteúdo anterior, pois, com este método, a deleção se dá de forma automática
quando da digitação do novo conteúdo.
Os métodos "Focus" e "Select" podem ser utilizados nos seguintes objetos:
password, select, text e textarea
No exemplo abaixo, utilizaremos o evento onload para setar o focus para o primeiro objeto do
formulário e os métodos focus e select para, na rotina de crítica dos dados, focar o objeto que
contiver erro de preenchimento.
Ex:
<body onload="document.TstFocus.Nome.focus()">
<script>
DdosOk = true;
function Criticar(){
DadosOk = false
DataAtual = new Date()
MesAtual = DataAtual.getMonth() + 1
AnoAtual = DataAtual.getYear() + 1900
Nome = document.TstFocus.Nome.value
Mes = parseInt(document.TstFocus.Mes.value)
Ano = parseInt (document.TstFocus.Ano.value)
if(Ano < 1900){Ano = Ano + 1900 }
if(Nome == ""){
alert ("Informe o seu Nome, Não deixe em branco")
document.TstFocus.Nome.focus()
return
}
if(Mes < 1 || Mes > 12){
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
60
alert ("O Mês informado não é válido, informe
corretamente") document.TstFocus.Mes.focus()
document.TstFocus.Mes.select()
return
}
if(Ano == AnoAtual && Mes > MesAtual){
alert("O período informado é superior a data atual")
document.TstFocus.Mes.focus()
document.TstFocus.Mes.select()
return
}
if(Ano < 1996 || Ano > AnoAtual){
alert("O Ano informado não é válido, informe
corretamente") document.TstFocus.Ano.focus()
document.TstFocus.Ano.select()
return
}
DadosOk = true
}
</script>
<form name="TstFocus" method="POST">
Informe o seu Nome <input type=text size=30 maxlength=30
name="Nome">
Informe o mês desejado <input type=text size=2 maxlength=2
name="Mes">
Informe o ano desejado <input type=text size=4 maxlength=4
name="Ano" >
<input type=button name="Testa" value="Testar Validade"
onclick="Criticar()if (DadosOk){alert ('Todos os Dados estão
Corretos') } ">
</form>
</body>
17. USANDO TIMER e DATE
É um método que permite a programação para que uma determinada ação só ocorra após o
transcurso de um determinado tempo.
Variável = setTimeout ("ação", tempo)
Onde:
• Variável é uma variável apenas para controle do timer
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
61
• ação é a ação que se quer realizar.
• tempo é o tempo de espera para que a ação ocorra, em milisegundos.
Obs:
É importante observar que a ação só ocorrerá uma vez. Para que a ação volte a ocorrer, será
necessário repetir o comando dentro da ação, obtendo-se, assim, um LOOP.
Para interromper um LOOP, provocado pela forma acima, deve-se utilizar o seguinte método:
clearTimeout (Variável)
Onde:
• Variável é o nome da variável de controle do timer.
Abaixo se encontra um exemplo de um formulário que apresenta a data e hora atual,
atualizando os dados a cada um segundo, tendo dois botões de rádio que tem a função de
ativar e desativar a atualização dos dados. Apresenta também, fora do formulário, a data
contendo dia e mês por extenso.
<script>
function Hoje() {
ContrRelogio = setTimeout ("Hoje()", 1000)
Hr = new Date()
dd = Hr.getDate()
mm = Hr.getMonth() + 1
aa = Hr.getYear()
hh = Hr.getHours()
min = Hr.getMinutes()
seg = Hr.getSeconds()
DataAtual = ((dd < 10) ? "0" + dd + "/" : dd + "/")
DataAtual += ((mm < 10) ? "0" + mm + "/" + aa : mm + "/" + aa)
HoraAtual = ((hh < 10) ? "0" + hh + ":" : hh + ":")
HoraAtual += ((min < 10) ? "0" + min + ":" : min + ":")
HoraAtual += ((seg < 10) ? "0" + seg : seg)
document.DataHora.Data.value=DataAtual
document.DataHora.Hora.value=HoraAtual
}
function CriaArray (n) {
this.length = n }
NomeDia = new CriaArray(7)
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
62
NomeDia[0] = "Domingo"
NomeDia[1] = "Segunda"
NomeDia[2] = "Terça"
NomeDia[3] = "Quarta"
NomeDia[4] = "Quinta"
NomeDia[5] = "Sexta"
NomeDia[6] = "Sábado"
NomeMes = new CriaArray(12)
NomeMes[0] = "Janeiro"
NomeMes[1] = "Fevereiro"
NomeMes[2] = "Março"
NomeMes[3] = "Abril"
NomeMes[4] = "Maio"
NomeMes[5] = "Junho"
NomeMes[6] = "Julho"
NomeMes[7] = "Agosto"
NomeMes[8] = "Setembro"
NomeMes[9] = "Outubro"
NomeMes[10] = "Novembro"
NomeMes[11] = "Dezembro"
Data1 = new Date()
dia = Data1.getDate()
dias = Data1.getDay()
mes = Data1.getMonth()
ano = Data1.getYear()
document.write ("Recife, " + NomeDia[dias] + " " + dia + " de
" +
NomeMes[mes] + " de " + (ano + 1900 ) )
</script>
<form name="DataHora">
Data : <input type=text size=10 maxlength=10 name="Data">
Hora : <input type=text size=10 maxlength=10 name="Hora">
<input type=radio name="Botao" value="Para Relogio" checked
onclick="clearTimeout(ContrRelogio)">Desativa
<input type=radio name="Botao" value="Ativa Relogio"
onclick="ContrRelogio = setTimeout('Hoje()', 1000)">Ativa
</form>
18. MANIPULANDO JANELAS E DOCUMENTOS
Neste capítulo mostraremos como podem ser abertas novas janelas sobre uma janela
contendo o documento principal.
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
63
É importante não confundir esta forma de abrir janelas com a divisão da tela em várias partes,
ou mesmo com a chamada de outras páginas. Para que não existam dúvidas, explicaremos um
pouco sobre estes dois outros métodos.
A divisão de uma tela em várias janelas contendo documentos diferentes é feita através do
objeto FRAME do Html. Neste caso, a tela inteira é considerada como um FrameSet e cada
parte em que ela for dividida é considerada como um Frame. Cada Frame é definido dentro
do FrameSet através da especificação dos parâmetros: % da tela na vertical (cols), % da tela
na horizontal (rows) e nome de cada frame. Uma vez criado o FrameSet poderemos abrir
documentos distintos em cada Frame. Para fazer isto, acrescente ao link do documento a
diretiva target=nome do frame.
Ex:
<href="Eventos.htm" target="Principal">
Isto fará com que o arquivo html Eventos.htm seja aberto dentro do frame de nome Principal.
A simples chamade de outras telas (documentos) é feita através do link para o documento
desejado.
Ex:
<href="Eventos.htm" >
Isto fará com que o arquivo html Eventos.htm seja aberto em substituição a tela existente.
Bem, voltemos ao nosso caso que é a abertura de janelas sobre um documento. Isto é feito
através de comandos JavaScript, que permitem: Abrir uma janela, Abrir um documento
dentro desta janela, Escrever o conteúdo da janela, Fechar a janela e Fechar o documento.
Abrindo a Janela
A sintaxe geral deste método é a seguinte:
Variavel = window.open ("Url", "Nome da janela", "Opções")
Onde:
Variavel - Nome que será atribuido como propriedade da janela.
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
64
Url - Endereço Internet onde a janela será aberta. Normalmente voce estará utilizando a sua
própria Url, neste caso, preencha com "".
Nome da Janela - É o nome que aparecerá no top da janela (Título)
Opções - São as opções que definem as características da janela, quais sejam:
• toolbar - Cria uma barra de ferramentas tipo "Back", "Forward", etc.
• location - Abre a barra de location do browse
• directories - Abre a barra de ferramentas tipo "What's New", "Handbook", etc.
• status - Abre uma barra de status no rodapé da janela
• scrollbars - Abre barras de rolamento vertical e horizontal
• menubar - Cria uma barra de menu tipo "File", "Edit", etc.
• resizable - Permite ao usuário redimencionar a janela
• width - Especifica a largura da janela, em pixels
• height - Especifica a altura da janela, em pixels
Todas as opções (exceto width e height) são boleanas e podem ser setadas de duas formas.
Exemplo: "toolbar" ou "toolbar=1") são a mesma coisa. Se nada for especificado, entende-se
que todas as opções estão ligadas; Caso seja especificada qualquer opção, será entendido que
estão ligadas apenas as opções informadas.
As opções devem ser informadas separadas por vírgula, sem espaço entre elas.
Abrindo um Documento
Para abrir um documento dentro da janela, deve ser utilizado o seguinte método:
Variavel.document.open()
Onde "Variavel" é o nome da variável associada ao método window.open
Escrevendo no Documento
Para escrever a tela no documento, deve ser utilizado o seguinte método:
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
65
Variavel.document.write ("Comandos html, Comandos JavaScript, Textos, etc.")
Fechando a Janela
Para fechar a janela, utilize o seguinte método:
Variavel.document.write ("window.close()")
Fechando o Documento
Para fechar o documento, utilize o seguinte método:
Variavel.document.close ()
A seguir, apresentamos um exemplo no qual estamos abrindo um documento onde o usuário
escolherá uma opção (Elógica ou Recife) e dará um Click em um botão (Nova Janela). Neste
momento será aberta uma nova janela que conterá a foto escolhida pelo usuário e um botão
que, ao receber o Click, fechará a janela.
Normalmente, qualquer href ou src dentro de uma página, por padrão, acessa o arquivo ou a
imagem no mesmo diretório onde está a página atual, a menos que seja especificado um novo
caminho (Path).
No caso de abertura de uma nova janela, através do método window.open, as versões mais
antigas dos browses não conseguem "ver" o Path, sendo necessária a completa informação do
caminho (path) onde o arquivo ou imagem estão armazenados, em todas as chamadas dos
comandos Html href ou src.
Observe que na função estamos utilizando dois novos métodos:
navigator.appVersion para verificarmos a versão do browse que está sendo utilizado
document.location. para obtermos o Path da localização do arquivo Html que está
correntemente em uso.
No exemplo abaixo estamos, inicialmente, identificando a versão do browse.Caso seja antiga,
para não escrevermos todo o caminho a cada chamada e ainda, considerando que os arquivos
chamados estão no mesmo diretório da página atual, estamos obtendo o Path do arquivo atual
e eliminando o nome do arquivo que está na última referencia do Path.
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
66
Quando fizermos a chamada das imagens (comando src) só será necessária a concatenação do
nome do arquivo chamado com a raiz do path que, no exemplo, armazenamos na variável de
nome Local.
Ex.
<script>
function Abrejanela(Opcao) {
Versao = navigator.appVersion
Versao = Versao.substring(0, 1)
Local = ""
if(Versao < 3){
Local = document.location
UltLoc = Local.lastIndexOf("/")
Local = Local.substring(0, UltLoc + 1)
}
NovaJanela = window.open ("", "OutraJanela",
"width=300,height=400") NovaJanela.document.open()
NovaJanela.document.write ("<html><head><title>Nova
Janela")
NovaJanela.document.write ("</title></head><body
bgcolor='white'>") NovaJanela.document.write ("<form>")
if(Opcao == 1){
NovaJanela.document.write ("<br>Logomarca
Elogica<hr><br>")
NovaJanela.document.write
("<img width=200 height=200 src=" + Local +
"Marcaelo.gif>")
}
else{
NovaJanela.document.write ("<br>Recife Alto
Astral<hr><br>")
NovaJanela.document.write
("<img width=150 height=200 src=" + Local +
"Recife.gif>")
}
NovaJanela.document.write ("<br><hr><p></p></form>")
NovaJanela.document.write ("<form><input type='button'
name='Fecha'" + "value='Fecha Janela'" +
"onclick='window.close()'>")
NovaJanela.document.write ("</form></body></html>")
NovaJanela.document.close()
}
</script>
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
67
<body>
Escolha a foto a ser apresentada na nova janela:
<form method="POST" name="Form1">
<input type=radio name="Opcao" value="1" checked>Elogica
<input type=radio name="Opcao" value="2">Recife
<input type="button" name="Envia" value="Nova Janela"
onclick="if(Form1.Opcao[0].checked ==
true){Abrejanela(Form1.Opcao[0].value)}
else
{Abrejanela(Form1.Opcao[1].value) } ">
</form>
</body>
IFRS - Campus Rio Grande - Técnico em Informática – Modalidade a Distância
Ferramentas da WEB
69
Referências
DAMIANI, Edgard. JavaScript: guia de consulta rápida. 3.ed. São Paulo: Novatec, 2008.
FEATHER, Stephen; CASSADY-DORION, Luke (Col.). JavaScript em exemplos. São
Paulo: Makron Books, 1997.
FLANAGAN, David. JavaScript: o guia definitivo. 4.ed. Porto Alegre: Bookman, 2004.
MANZANO, J. A. N. G.; TOLEDO, S. A. Guia de Orientação e Desenvolvimento de Sites -
HTML, XHTML, CSS e JavaScript/JScript. 1. Ed. São Paulo: Érica, 2008.
MARCONDES, C. A. HTML 4.0 Fundamental - A base da programação para WEB. 2. Ed.
São Paulo: Érica, 2005.
SILVA, M. S. Construindo Sites Com CSS E (X)HTML. 1. Ed. São Paulo: Novatec, 2007.
Diversos Tutoriais - http://www.w3schools.com/js/default.asp
http://www.icmc.usp.br/ensino/material/html/
Wiki de HTML (português) - http://pt.wikipedia.org/wiki/HTML
World Wide Web Consortium - http://www.w3c.org
http://www.w3.org/html/
http://www.w3schools.com/html/