Instituto Vianna Júnior

Faculdades Integradas Vianna Júnior

1
Profª. Lúcia Helena de Magalhães

JavaScript

maio
2007

1
Prof.a Lúcia Helena de Magalhães
Especialista em Desenvolvimento e Aplicações para Web
Especialista em Matemática e Estatística
Mestranda em Computação de Alto Desempenho / Sistemas computacionais
 1

INDICE

1 Introdução............................................................................................................................ 2
1.1 O que é JavaScript? .......................................................................................................... 2
1.2 JavaScript e Java............................................................................................................... 2
1.3 Considerações iniciais ...................................................................................................... 2
1.4 Browser não suporta JavaScript?..................................................................................... 3
1.5 Comentários em JavaScript? ........................................................................................... 4
1.7 Objetos - Entendendo a Hierarquia de Objetos ............................................................... 4
1.8 Escrevendo no Documento............................................................................................... 7
1.10 Janelas de alerta .............................................................................................................. 8
1.11 Exibindo caixa de diálogo de confirmação.................................................................... 8
1.12 Exibindo caixa de diálogo de entrada de dados.............................................................. 9
2 Conceitos Básicos – Elementos da Linguagem................................................................. 12
2.1 Operadores Matemáticos ................................................................................................ 12
2.2 Operadores Lógicos........................................................................................................ 12
2.3 Concatenação.................................................................................................................. 13
2.4 Estruturas de Controle e Laços de Repetição ........................................................... 13
2.4.1 Comandos Condicionais .............................................................................................. 13
3 Variáveis.............................................................................................................................. 9
3.1 Criando Variáveis ........................................................................................................... 10
3.2 Tipos de dados ................................................................................................................ 11
3.3 Convertendo tipos de dados............................................................................................ 15
4 Manipulando strings .......................................................................................................... 17
4.1 Convertendo caixas de texto........................................................................................... 18
4.2 Descobrindo o comprimento de uma string.................................................................... 19
4.3 Substrings ....................................................................................................................... 19
5 Matrizes ............................................................................................................................ 20
5.1 Manipulando Datas........................................................................................................ 20
5.2 Criando Novas Instâncias ............................................................................................... 21
5.3 Trabalhando com matrizes de uma dimensão................................................................. 21
6 Eventos .............................................................................................................................. 25
7 Funções............................................................................................................................. 29
7.1 Escrevendo Textos Rolantes............................................ Erro! Indicador não definido.
8 Trabalhando com janelas ................................................................................................... 29
8.1 Como abrir uma nova janela........................................................................................... 29
9 Formulários....................................................................................................................... 31
Bibliografia........................................................................................................................... 36
 2

1 Introdução

1.1 O que é JavaScript?

JavaScript é uma nova linguagem para criação de Home-Pages. Funções escritas em

JavaScript podem ser embutidas dentro do documento HTML. O JavaScript pode
"incrementar" o documento HTML com elementos interessantes. Por exemplo, responder
facilmente a eventos iniciados pelo usuário.

1.2 JavaScript e Java

Java não é o mesmo que JavaScript! Estas são duas técnicas diferentes de programação na
Internet. Java é uma linguagem de programação. JavaScript é uma linguagem de hipertexto. A
diferença é que realmente pode criar programas em Java. Mas muitas vezes precisamos
apenas criar um efeito bonito sem ter que se incomodar com programação. A solução então é
JavaScript pois é fácil de entender e usar. Podemos dizer que JavaScript é mais uma extensão
do HTML do que uma linguagem de programação propriamente dita.

1.3 Considerações iniciais

Em documentos HTML, a utilização da linguagem JavaScript, se dá sob a forma de funções

(applets), as quais são chamadas em determinadas situações ou em resposta a determinados
eventos, estas funções podem estar localizadas em qualquer parte do código HTML, a única
restrição é que devem começar e terminar com a declaração de Scripts. Por convenção
costuma-se colocar todas as funções no início do documento (entre as TAGs <HEAD> e
</HEAD>, isso para garantir que o código JavaScript seja carregado antes que o usuário
interaja com a Home Page), ou seja, antes do <BODY>.
Sintaxe:
.<html>
. <head>
. <script language="Javascript">
. //declarações
. </script>
. </head>
. <body>
. <!-- código html -->
 3

. </body>
.</html>
Na página anterior temos um documento HTML com uma inserção de código Javascript. A
tag script possui a propriedade language, que permite especificar qual a linguagem e
respectiva versão que está sendo utilizada no documento.

Exemplo:
<html>
<head>
<title>exemplo</title> …
<script language= “javascript” >document.write (“aqui já
é javaScript");
</script>
Voltamos para o html
</head>
<body>
esta linha está escrita em html
</body>
</html>
Este exemplo mostraria o seguinte:
Esta é uma linha escrita em HTML
Aqui já é JavaScript
Voltamos para o HTML

Estes exemplos realmente não são dos mais úteis - poderia ter sido escrito mais facilmente em
HTML puro. O objetivo foi apenas demonstrar o uso das TAGs <SCRIPT> e </SCRIPT>,
tudo que está entre essas TAGs é encarado como JavaScript.
É importante ressaltar, que como no C++, as linhas sejam terminadas com; (ponto e virgula)
a menos que a próxima instrução seja um ELSE e se você precisar escrever mais de uma linha
para executar uma condição seja ela em uma estrutura For, If ou While, este bloco de
instruções deve estar entre { } (chaves). Inclusive a definição de funções segue este modelo, ou
seja, todo o código da função deve estar limitado por {(no início) e } (no final).
EX: Comando IF
if (condição)
{ ação para condição satisfeita }
Else
{ação para condição não satisfeita };

1.4 Browser não suporta JavaScript?

Um browser que não suporta JavaScript, não conhece a TAG <SCRIPT>. Ele ignora a TAG e
todo o código que estiver sendo limitado por ela, mostrando todo o código na tela como se
fosse um simples texto HTML. Deste modo o usuário veria o código JavaScript do seu
 4

programa dentro do documento HTML e como certamente essa não deve ser sua intenção,
existe um meio de esconder o código JavaScript dos browsers que não conhecem esta
linguagem, basta utilizar os comentários HTML <!-- e -->. O código do nosso exemplo
anterior ficaria assim:
<script>
<!--
document.write (“Aqui já é JavaScript"); -->
</script>

Se o browser não suportar JavaScript e não inserirmos o comentário HTML, apareceria na

tela:
document.write (“Aqui já é JavaScript");

Note que esse artifício não esconde completamente o código JavaScript, o que ele faz é
prevenir que o código seja mostrado por browsers mais antigos, porém o usuário tem acesso a
todas as informações do código fonte de sua Home Page (tanto HTML, quanto JavaScript),
para isso ele só precisa escolher a opção Document Source, no menu View.

1.5 Comentários em JavaScript?

Comentários de apenas uma linha são feitos através da inclusão de "//" no início da linha.
/* Comentários de múltiplas linhas são feitos através da inclusão dos limitadores , no início e
fim do bloco como neste exemplo. */

1.6 Objetos - Entendendo a Hierarquia de Objetos

A linguagem Javascript é baseada em objetos. Isto nada mais significa, do que, interpretar
todos os elementos HTML como objetos. Além destes, temos outros, tais como a janela do
navegador, o próprio navegador, objetos core do Javascript e, nossos próprios objetos.
Utilizando seus métodos e suas propriedades em favor de nossa aplicação. Mas antes é
necessário compreender como estes objetos estão organizados.
Fala-se muito em métodos e propriedades e objetos. Mas o que é isso tudo?
Quando falamos a respeito de objetos, queremos dizer que, eles são a representação de algum
elemento do mundo real. Pessoas, carros, computadores. Tudo isso pode ser representado
através de objetos. E da mesma forma que esses elementos possuem características que os
identificam, os objetos também as têm. As propriedades dos objetos podem ser acessadas e
manipuladas através da seguinte sintaxe:
 5

objeto.propriedade
Supondo que temos um Palio 2007 Prata, vamos tentar fazer uma analogia ao mundo dos
objetos. Observem que caracterizamos nosso carro da forma como o vemos e conhecemos. No
mundo dos objetos, a essas características, damos o nome de propriedades. Vamos
transformar nosso Celta em um objeto genérico chamado carro. A partir daí, queremos
acessar suas propriedades. Como já conhecemos a sintaxe necessária, vamos então visualizá-
la:
//imprimindo as propriedades do objeto carro
document.write(carro.modelo, '<br>');
document.write(carro.ano, '<br>');
document.write(carro.cor, '<br>');
/*
Resultado:
. Palio
. 2007
. prata
*/
Ainda de posse de nosso exemplo, sabemos que um carro pode buzinar, andar, quebrar. Essas
ações que o carro pode fazer, são chamadas de métodos. É muito simples identificar um
método. Vejam que todos as nossas ações são verbos no infinitivo. Outra forma de identificar
um método, são os parênteses que o acompanham. Como executam alguma coisa, é normal
que o façam de acordo com a nossa vontade. E podemos expressar nossa vontade, enviando
parâmetros de execução para um método. Vejam a sintaxe:
objeto.metodo()
É idêntico ao acesso de uma propriedade, exceto pelos parênteses. Agora, fazendo a mesma
analogia com o nosso carro:
//executando os métodos do objeto carro
carro.buzinar('vaca');
carro.andar();
carro.quebrar();
/* Imaginem uma dessas buzinas onde escolhemos qual som deve ser emitido quando a
acionarmos. Os parâmetros dos métodos existem para que possamos dizer, como queremos
que ele atue. Para cada valor passado, o método buzinar() terá uma forma de agir. */
 6

Agora já estamos aptos a entender o comando document.write(), que vimos no capítulo

anterior. Na verdade, trata-se do método write do objeto document, ou seja, representa a
capacidade que o objeto document tem de escrever na tela.
Vejam no exercício abaixo, algumas características e métodos do principal objeto com o qual
iremos trabalhar: document. É o principal porque é a representação visual da sua página. A
manipulação que você fizer neste objeto, será imediatamente refletida na visualização da
página. Podemos dizer que ele é a tag body do HTML representada por um objeto.
01. <html>
02. <head>
03. <title>Visualizando propriedades e métodos</title>
04. <script language="Javascript">
05. //imprime o texto na tela com a formatação de titulo <h3>
06. document.write("<h3>Conhecendo propriedades e
métodos!!!</h3>");
07.
08. //alterando a cor de fundo do documento
09. document.bgColor = 'red';
10.
11. //alterando o título da página
12. document.title = 'O título foi alterado.';
13.
14. //alterando a cor do link
15. document.linkColor = '#00FF00';
16.
17. //alterando a cor do link quando ativo
18. document.alinkColor = '#00FF00';
19.
20. //alterando a cor do link que foi visitado
21. document.vlinkColor = '#00FF00';
22.
23. /* imprimindo a data e hora da última atualização da
página.
24. Observem que um texto foi concatenado com a propriedade
25. lastModified do objeto document.
26. */
27. document.write( 'Atualizado em: ' + document.lastModified);
28. </script>
29. </head>
30. <body>
31. <hr>
32. <!-- Esta tag href foi colocada apenas para visualizarmos as
propriedades dos links
33. que alteramos com o Javascript acima.
34. -->
35. <a href="http://www.fsd.edu.br">Faculdade</a>
36. </body>
37. </html>

Acima estão algumas das propriedades e métodos do objeto

document. É claro que existem um pouco mais, inclusive,
objetos que pertencem ao document e que necessitam ser
referenciados através da hierarquia, tal como o objeto forms. Na
 7

seqüência dos próximos capítulos vamos nos familiarizar melhor com isso.
Um outro objeto muito importante do Javascript, e que nos permite trabalhar com a janela e
seus objetos internos é o window. Com este objeto, conseguimos interagir com o usuário e
algumas características da máquina cliente, como resolução de tela e definição de cores. A
seguir, veremos alguns exemplos da utilização deste objeto.

1.7 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.
Exemplo 1.7.1: Escrevendo o primeiro script em JavaScript
<html>
<head>
<title>bem vindo ao javascript</title>
</head>
<body>
<script language = “javascript”>
document.write ("este é o meu primeiro script escrito em
javascript.");
</script>
</body>
</html>
Visualização no navegador do exemplo 1.7.1

Nota: O JavaScript é uma linguagem case-sensitive, ou seja, sensível a letras maiúsculas e

minúsculas, sendo que “A” (maiúsculo) é diferente de “a” (minúsculo).

Eemplo1.7.2: AloMundo.htm
01. <html>
02. <head>
03. <title>Aplicação Alô Mundo!!!</title>
04. <script language="Javascript">
05. document.write( "<center><font color=\"#FF0000\">Alô
Mundo!!! </font></center>" );
06. </script>
07. </head>
08. <body>
09. </body>
10. </html>
 8

1.8 Janelas de alerta

As janelas de alerta são usadas para dar ao usuário informações importantes relativas à
página que ele está visitando, ou sobre ações por ele praticadas.
Sintaxe:
alert (“ mensagem” )
Exemplo 1.8 : Inserindo Janelas de alerta em uma página
1. <html>
2. <head>
3. <title>usando janelas de alerta</title>
4. <script language = “javascript”>
5. alert (“seja bem vindo. esta página foi escrita
utilizando javascript.”);
6. </script>
7. </head>
8. <body>

9. </body>
10. </html>
Janela de alerta do exemplo 1.8

1.9 Exibindo caixa de diálogo de confirmação

Agora iremos interagir com o usuário, solicitando deste, uma confirmação para que seja
executada ou não uma determinada ação. Para isso vamos utilizar o método confirm() do
mesmo objeto window.

Exemplo 1.9 - Caixa de Confirmação

 9

Resultado do exemplo 1.9

O método confirm() retorna um valor booleano. True se o usuário clicar em "OK" e false se o
botão clicado for "Cancel". Dessa forma, o programa entrará no if se a condição for
satisfeita(clique no botão "OK"), ou no else, se o retorno do teste for falso(clique no botão
"Cancel").

1.10 Exibindo caixa de diálogo de entrada de dados

Neste exemplo, vamos solicitar que o usuário informe um número. Então o cubo desse
número será calculado. Vamos utilizar a função cubo(a) que exercitamos nas primeiras aulas.
 10

3 Variáveis

3.1 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.
Sintaxe:
Var <nome da variável>
Podemos declarar mais de uma variável em uma mesma instrução var, separando-as com
vírgula.
Exemplo:
var titulo;
var titulo, nome, autor;
Embora possamos usar toda imaginação para nomear as variáveis a serem usadas nos
programas, algumas regras devem ser seguidas:
Nunca inicie o nome de uma variável com um número. As variáveis somente podem
ser iniciadas com uma letra ou um underscore (_).
Exemplo: titulo, _autor, etc. Não pode usar: 1titulo, 4autor, etc.
Procure usar variáveis de nomes curtos e que lembrem seu significado. Isto vai
facilitar bastante a interpretação dos programas.
Os nomes das variáveis não podem conter espaços em branco ou caracteres de pontuação.
Exemplo: Titulo Livro, Nome.Autor, etc. O correto é Titulo_Livro, TituloLivro.

Exemplo 3.1 Trabalhando com variáveis

1. <script language = “javascript”>

2. var a, b;
3. a = 5;
4. b= “meu valor é 6 alfanumérico, e não numérico, pois estou
contido entre aspas”;
5. document.write ("o valor da variável a é: “ + a");
document.write (“<p>” + "o valor da variável b é: " + b +
“</p>”);
6. document.write (“<p>” + "o valor da variável b impresso em
negrito e na cor vermelha é: “+ “<b><font color=’red’>" + b +
“</b></p>”);
7. </script>
8. <p>página usando variáveis</p>
 11

Visualização da página do exemplo 3.1

Exemplo 3.1.1 Exibindo variáveis em janelas de alerta

1. <body>
2. Página usando variáveis para serem exibidas em janelas de
alerta.
<script language = “javascript”>
3. var a, b;
4. a = 5;
5. b= “eu sou o string 6”;
6. alert (a);
7. alert(“o valor da variável b é: ” + b);
8. </script>
9. </body>

Visualização da página do exemplo 3.1.1

Nota: Ao apertar o botão Ok da janela de diálogo, surgirá na tela uma outra janela de diálogo,
contendo o valor da variável b

3.2 Tipos de dados

As variáveis em Javascript podem assumir alguns tipos de dados. São eles:
• String: utilizado para representar seqüências de caracteres. Devem estar sempre
envoltas por "".
var nome = "José";
var cpf = "123456789-00";
var idade = "25";
 12

• Inteiros: é a representação dos números inteiros positivos e negativos.

var ano = 2004;
var zero = 0;
var erro = -1;

• Double ou ponto flutuante: são os números que apresentam uma segunda precisão,
com indicação de maior exatidão.
var peso = 58.9;

2 Conceitos Básicos – Elementos da Linguagem

2.1 Operadores Matemáticos

São operadores utilizados em cálculos, referências de indexadores e manuseio de strings.
+ adição de valor e concatenação de strings
- subtração de valores
* multiplicação de valores
/ 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 as
expressões:
X = X + 1 ou X = X - 1 respectivamente.
Para inverter sinal: X = -X negativo para positivo ou positivo para negativo.

2.2 Operadores Lógicos

São operadores utilizados em comandos condicionais, tais como: IF , FOR e WHILE.
Os comandos condicionais serão vistos mais à frente.
== Igual
!= Diferente
> Maior
>= Maior ou Igual
< Menor
 13

<= Menor ou Igual

&& E
|| Ou
! O pto de exclamação nega uma comparação (not). Exemplo a!=b, se a não for igual a
b...

2.3 Concatenação
O operador, representado pelo sinal (+), concatena variáveis, sejam elas numéricas ou
simplesmente texto. Pergunta: mas se utilizarmos o sinal de (+) relacionando dois números?
Não seria uma adição? Teoricamente sim, mas no Javascript, veremos que, em determinados
casos, ao "somarmos" valores numéricos advindos de campos textos, estes não serão
adicionados e sim concatenados. Em uma operação de inteiros teríamos uma soma. Mas se
um dos operandos for uma string, teremos uma concatenação. Observem os exemplos abaixo:
var a = "Curso de";
var b = "Javascript";

document.write( a + b );//imprime: Curso de Javascript

var c = 5;
var d = "8";

document.write( c + d );//imprime: 58; c é um inteiro, mas d uma string,

por isso não há a adição.

var e = 5;
var f = 8;

document.write( e + f );//agora sim irá imprimir 13, pois ambas as

variáveis são inteiras.

2.4 Estruturas de Controle e Laços de Repetição

2.4.1 Comandos Condicionais
São comandos que condicionam a execução de uma 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 }
Ex1.
if (Idade < 18)
{Categoria = "Menor" }
 14

else
{Categoria = "Maior"}
Exemplo de uma instrução condicional:
Sintaxe:
If (...condição...) {...ação...}
If (DiaSemana = = “Segunda”) {document.write(“Hoje é dia de
preguiça”)}
Observe que uma ação em JavaScript deve estar entre chaves “{}”. A instrução then
foi substituída pelas chaves de abertura e fechamento.
OBS.: Em JavaScript é usado um duplo sinal de igualdade “= =” para testar se uma
determinada coisa é igual à outra. O sinal de “=” deve ser usado apenas para armazenar
valores em variáveis.

Exemplo 2.4.1 - Testando valores com if

<body>
Página usando a instrução if
<script language = “javascript”>
var valor;
valor = 5;
if (valor = = 5) {document.write(“<p>” + “a variável
valor é: “ + valor + “</p>”)};
</script>
</body>
Visualização da página do exemplo 2.4.1

Exemplo 2.4.2 - Testando valores com if e else

Este exemplo tem como objetivo mostrar como funciona a instrução else, uma cláusula que
completa o If, cuja finalidade é executar uma outra tarefa se a condição testada não for
verdadeira.
<body>
Página usando a instrução if ... else
<script language = “javascript”>
var a, b;
a = 5;
b = 10;
if (a == b) {document.write(“<p>” + “o valor da variável
a é igual ao valor da variável b” + “</p>”)}
else {document.write(“<p>” + “o valor da variável a é
diferente do valor da variável b” + “</p>”)};
</script>
</body>
Visualização da página do exemplo 2.4.2
 15

Comando FOR
for ( [inicialização;]
[condição ;]
[incremento da variável de controle] )
{ ação }
EX1
for (x = 0 ; x <= 10 ; x++)
{alert ("X igual a " + x) }

ComandoWHILE
Executa uma ação enquanto determinada condição for verdadeira.
while (condição)
{ ação }
Ex.
<script>
var contador = 10;//esta variável fará o controle da execução do laço
while( contador > 1 ) {
document.write( contador ); "<P>"
contador--;
}
/*
Resultado:
0 1 2
*/
</script>
<BODY>
<P>
Exemplo com While
</BODY>

3.3 Convertendo tipos de dados

O JavaScript possui algumas funções que nos permitem converter um determinado tipo de
dado armazenado em uma variável em um outro tipo de dado, como converter caracteres em
números.
No exemplo 3.1, foi usado a instrução:
Document.write(“o valor da variável A é : ” + a)
Esta instrução imprime a frase (String) o valor da variável A é: 5 (lembre-se que o
número 5 foi armazenado na variável a).
O JavaScript converteu automaticamente o valor numérico 5 no caractere 5, uma vez que a
instrução document.write somente exibe valores alfanuméricos.
No exemplo anterior tudo funcionou perfeitamente. No entanto, existem casos que isto
não acontece, veja o exemplo seguinte para melhor compreensão:
 16

Exemplo na página seguinte:

Exemplo 3.2 Imprimindo valores de variáveis

1. <script language = “javascript”>
2. var a, b;
3. a =”5”;
4. b= “10 kg de arroz”;
5. document.write ("o valor da variável a é: “ + a");
document.write (“<p>” + "o valor da variável b é: " + b
+ “</p>”);
6. document.write (“<p>” + "o valor da variável a dividido
por 2 é: “ + a/2 + “</p>”);
7. document.write (“<p>” + "o valor da variável b dividido
por 2 é: “ + b/2 + “</p>”);
8. </script>

Visualização da página do Exemplo 3.2

Nota: O JavaScript não foi capaz de efetuar a operação (B/2), pois o conteúdo de B, além de
possuir um número, possui também uma frase, o que gerou o erro de impressão: o valor da
variável B divido por 2 é: NaN.
Para contornar esta situação, o JavaScript dispõe de duas funções para conversão de
valores alfanuméricos em valores numéricos:
parseInt( ) – converte um valor alfanumérico em um valor numérico inteiro;
parseFloat( ) – converte um valor alfanumérico em um valor numérico de ponto flutuante.
Exemplo 3.2.1 - Usando funções parseInt( ) e parseFloat( )
 17

Visualização da página do exemplo 3.2.1

4 Manipulando strings
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 strings.
string.length - retorna o tamanho da string (quantidade de bytes)
string.charAt(posição) - retorna o caráter 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. Exemplo:
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 %)
Armazenamento de strings
Os strings são armazenados em variáveis de memória, sendo que seu conteúdo deve estar
obrigatoriamente entre aspas. Exemplo:
A = “Olá pessoal!”
B = “Sejam bem vindos ao JavaScript”
 18

Pode também, usar o sinal mais (+) para concatenar valores de duas ou mais strings.
Exemplo: C=A+B
Em que C será igual a: Olá pessoal! Sejam bem-vindos ao JavaScript
Exemplo 4 - Armazenando strings
1. <script language = “javascript”>
2. var a, b, c;
3. a =”olá pessoal ! ”;
4. b = “sejam bem vindos ao javascript”;
5. c = a + b;
6. alert (c);
7. </script>
Visualização da página do exemplo 4

Nota: O mesmo resultado pode ser obtido por intermédio do seguinte script:
1. <script language = “javascript”>
2. var a, b;
3. a =”olá pessoal ! ”;
4. b = “sejam bem vindos ao javascript”;
5. alert = (a + b);
6. </script>

4.1 Convertendo caixas de texto

A conversão de caixas de uma string permite-nos converter todo o seu conteúdo em
letras maiúsculas ou minúsculas. Isto é feito por intermédio de dois métodos do objeto strings.
toUpperCase( ): Converte todos os caracteres contidos em uma string em letras maiúsculas.
ToLowerCase( ): Converte todos os caracteres contidos em uma string em letras minúsculas.
Exemplo 4.1 - Convertendo caixas de texto
1. <script language = “javascript”>
2. var a, b;
3. a =”olá pessoal ! ”;
4. b = “sejam bem vindos ao javascript”;
5. document.write (“<p><b>” + "usando o método touppercase”
+“</p></b>”);
6. document.write (a.toUpperCase( ));
7. document.write (b.toUpperCase( ));
8. document.write (“<p><b>” + "usando o método toLowerCase”
+“</p></b>”);
9. document.write (a.toLowerCase( ));
10. document.write (b.toLowerCase( ));
11. document.write (“<p><b>” + "você também poderá usar:”
+“</p></b>”);
12. document.write (“<p>” + a.toLowerCase( ) + b. toLowerCase( ) +
“</p>”);
13. </script>
 19

Visualização da página do exemplo 4.1

4.2 Descobrindo o comprimento de uma string

O objeto string possui uma propriedade que lhe permite calcular o comprimento, em
número de caracteres, de uma variável alfanumérica. Ao escrever os escripts, verá que em
muitos casos esta propriedade pode ser útil. Ela é definida ela paralvra-chave length usada
logo após o nome do objeto script. Exemplo: txtCGC.length
Exemplo 4.2 - Usando a propriedade length

1. <script language = “javascript”>

2. var cgc;
3. cgc = (“00111222000144”);
4. document.write (“<p><b>” + "o cgc possui: ” + cgc.length + “
números” + “</p></b>”);
5. </script>
Visualização da página de exercício 3.5

4.3 Substrings

Podemos definir uma substring como sendo parte de uma string. No JavaScript, uma
suvstring é manipulada pelo método substring( ).
Sintaxe:
Substring (PosiçãoInicial, NúmerodeCaracteres)
A PosiçãoInicial especifica a posição do primeiro caractere contido na string, a partir da qual
a seqüência de caracteres é retornada. Em uma string, a posição do primeiro caractere recebe
 20

o número 0. NúmerodeCaracteres especifica o número de caracteres contido na string a ser

retornado. Exemplo:
Pais = “BRASIL”
Pais.substring(0,2) – retorna BR.
Pais.substring(2,2) – retorna AS.
Pais.substrings(3,1) – retorna S.
Dica: Para retornar um único caractere, indique apenas a PosiçãoInicial na string.
Exemplo: Pais.substring(1) – retorna R.
Exemplo 4.3 - Trabalhando com substrings
Este exemplo usa substrings para formatar a impressão de um número de CGC, seguindo o
modelo: XX.XXX.XXX/XXXX-XX.
1. <script language = “javascript”>
2. var cgc;
3. cgc = (“00111222000144”);
4. document.write (“<p><b>” + "o número do cgc é: ” +
“</p></b>”);
5. document.write (“<p>” + "cgc + “</p>”);
6. document.write (“<p><b>” + "o número do cgc formatado é: ” +
“</p></b>”);
7. document.write (“<p>” + "cgc.substr(0,2) + “.” +
cgc.substr(2,3) + “.” + cgc.substr(5,3) + “/” +
cgc.substr(8,4) + “-” + cgc.substr(12,2) + “</p></b>”);
8. </script>
Visualização da Página do exemplo 4.3

5 Matrizes
Antes de começarmos matrizes, veremos o item manipulando datas para explicarmos
melhor o item matriz através de alguns exemplos.

5.1 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,
 21

Hora:Minuto:Segundo e Ano . Exemplo:

Fri May 24 16:58:02 1996
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)
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)

5.2 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)
MinhaData passou a ser um objeto tipo Date, porém, com o conteúdo de uma nova data.
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()

5.3 Trabalhando com matrizes de uma dimensão

Já foi visto que uma variável pode armazenar somente um valor de cada vez. Agora,
será mostrado que é possível armazenar mais de um valor em uma única variável, usando para
este fim o conceito de matrizes.
Uma matriz é composta de um conjunto de valores armazenado em uma única variável.
Seguindo este raciocínio, pode ser armazenado os nomes dos dias da semana, “Domingo”,
“Segunda-feira”, “terça-feira”, “quarta-feira”, “quinta-feira”, “sexta-feira” e “sábado”. Em
uma matriz denominada diaSemana.
 22

Cada valor do conjunto é chamado de elemento da matriz. Os elementos de uma matriz são
diferenciados entre si por meio de um índice.
Veja os elementos da matriz diaSemana do exemplo anterior em uma tabela:
Índice Valor
0 Domingo
1 segunda-feira
2 terça-feira
3 quarta-feira
4 quinta-feira
5 sexta-feira
6 Sábado

Nota: Em javaScript, o primeiro elemento de uma matriz é definido pelo índice de número 0.
Para se usar uma matriz em JavaScript é necessário declarar o número máximo de
elementos que ela conterá, conforme a seguinte sintaxe:
Sintaxe:
Nome da matriz = new Array (número máximo de elementos)
Exemplo:
DiaSemana = new Array (7)
Ao ler esta instrução, o computador cria uma matriz de nome diaSemana com sete “espaços”
de memória, conforme descrito:
DiaSemana[ 0 ] = “Domingo”
DiaSemana[ 1 ] = “segunda-feira”
DiaSemana[ 2 ] = “terça-feira”
DiaSemana[ 3 ] = “quarta-feira”
DiaSemana[ 4 ] = “quinta-feira”
DiaSemana[ 5 ] = “sexta-feira”
DiaSemana[ 6 ] = “Sábado”

Exemplo 5.3: Usando matrizes para construir a página que exibe o dia da semana

O primeiro passo a ser dado consiste na declaração da matriz diaSemana com sete
posições. Este procedimento fará com que o computador reserve sete “espaços de memória”
na matriz diaSemana.
Nota: O JavaScript possui um objeto denominado Date com uma série de métodos que
manipulam datas. No momento, apenas se preocupe em saber que o método getDay( ) retorna
um número entre 0 e 6 correspondente aos dias da semana.
Agora podemos criar novas instâncias do objeto "CriaArray" e alimentá-los com os dados
necessários.
 23

1. <script language = “javascript”>

2. hoje = new Date ( );
3. xdia = hoje.getDay ( );
4. nomedia = new Array(7)
nomedia[0] = "domingo"
nomedia[1] = "segunda"
nomedia [2] = "terça"
nomedia[3] = "quarta"
nomedia[4] = "quinta"
nomedia[5] = "sexta"
nomedia[6] = "sábado"
5. document.write (“a variável xdia contém o número: “ + xdia);
6. document.write (“<p><br>” + “hoje é: “ + nomedia [xdia] +
“</b</p>”);
7. </script>
Visualização do exemplo 5.3

Agora podemos criar novas instâncias do objeto "Array" e alimentá-los com os dados
necessários.
Exemplo 5.4 Usando matriz para construir a página atividade do dia
1. <script language = "javascript">
2. Hoje = new Date ( );
3. xDia = Hoje.getDay ( );
4. NomeDia = new Array(7)
5. NomeDia[0] = "Domingo"
6. NomeDia[1] = "Segunda"
7. NomeDia[2] = "Terça"
8. NomeDia[3] = "Quarta"
9. NomeDia[4] = "Quinta"
10. NomeDia[5] = "Sexta"
11. NomeDia[6] = "Sábado"
12. Atividade = new Array(7)
13. Atividade[0] = "Dia de descanso"
14. Atividade[1] = "Analista"
15. Atividade[2] = "Programador"
16. Atividade[3] = "Operador"
17. Atividade[4] = "Conferente"
18. Atividade[5] = "Digitador"
19. Atividade[6] = "Web Master"
20. document.write ("<p><br>" + "Hoje é: " + NomeDia [xDia] +
"</b</p>");
 24

21. document.write ("<p><br>" + "A ocupação hoje é de: " +

Atividade[xDia] + "</b</p>");
22. </script>

Visualização da página do exemplo 5.4

Exemplo 5.5 com IF

Construindo uma página para exibir a data de abertura e uma mensagem de saudação.

1. <script language = "javascript">

2. var dataHora, xHora, xDia, dia, mês, ano, txtSaudacao;
3. dataHora= new Date( );
4. xHora = dataHora.getHours( );
5. if (xHora >=0 && xHora <12) {txtSaudacao = "Bom Dia!"}
6. if (xHora >=12 && xHora <18) {txtSaudacao = "Bom Tarde!"}
7. if (xHora >=18 && xHora <=24) {txtSaudacao = "Bom Noite!"}
8. xDia = dataHora.getDay ( );
9. diaSemana = new Array(7) ;
10. diaSemana [0] = "Domingo";
11. diaSemana [1] = "Segunda" ;
12. diaSemana [2] = "Terça" ;
13. diaSemana [3] = "Quarta";
14. diaSemana [4] = "Quinta" ;
15. diaSemana [5] = "Sexta" ;
16. diaSemana [6] = "Sábado";
17. dia = dataHora.getDate( );
18. mes = dataHora.getMonth( );
19. mesDoAno = new Array(12);
20. mesDoAno[0] = "janeiro";
21. mesDoAno[1] = "fevereiro";
22. mesDoAno[2] = "março";
23. mesDoAno[3] = "abril";
24. mesDoAno[4] = "maio";
25. mesDoAno[5] = "junho";
26. mesDoAno[6] = "julho";
27. mesDoAno[7] = "agosto";
28. mesDoAno[8] = "setembro";
29. mesDoAno[9] = "outubro";
30. mesDoAno[10] = "novembro";
31. mesDoAno[11] = "dezembro";
32. ano = dataHora.getYear( );
33. document.write ("<p>" + txtSaudacao + " " + diaSemana[xDia] +
"," + dia + " de " + mesDoAno[mes] + " de " + ano + "</p>");
34. </script>
Visualização da página do exemplo 5.5
 25

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.
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.

EX: onBlur
Este evento acontece quando um objeto perde o foco. Parece bastante interessante, que, uma
validação de campo possa ser feita neste momento. Imaginem que, se o campo não estiver de
acordo com o objetivo da aplicação, uma mensagem possa ser enviada para o usuário,
 26

alertando-o da inconsistência. Bom, nosso exemplo fará basicamente o que foi falado acima,
porém, o fará no exato momento que o objeto a ser tratado, perder o foco.

O exemplo abaixo solicita para o usuário preencher os campos usuário e senha. A aplicação
determina que a senha não poderá ter menos do que 6 caracteres. Se o usuário tentar deixar o
campo senha, com menos do que 6 caracteres preenchidos, uma mensagem deverá alertá-lo, e
o foco do campo, ser restabelecido para a correção. Observem:
01. <html>
02. <head>
03. <title>onBlur</title>
04. <script language="Javascript">
05. function checaTamanho() {
06. if( document.f1.senha.value.length < 6 ) {
07. alert('*** Senha deve possuir no mínimo 6 caracteres.');
08. document.f1.senha.focus();//remete o foco para o campo senha
09. }
10. }
11. </script>
12. </head>
13. <body>
14. <form name="f1" method="get">
15. <h3>Formulário de Login</h3><hr>
16. Usuário:<br>
17. <input type="text" name="user"><br>
18. Senha:<br>
19. <input type="password" name="senha" maxlength="10"
onBlur="checaTamanho();">
20. (mínimo de 6 caracteres)<br>
21. <input type="submit" name="enviar" value="Login">
22. </form>
23. </body>
24. </html>

Caso a senha seja preenchida com menos de 6 dígitos surgirá a mensagem:

O exemplo acima possui um formulário com dois campos: usuário e senha. Se queremos
verificar o tamanho de senha, concluímos que o evento onBlur deve estar contido dentro
 27

desse objeto. Sendo assim, quando acontecer a perda de foco, seja ela provocada por um tab
ou clique fora do campo, a função checaTamanho() será chamada.

Esta função, testa se, o tamanho(propriedade length) do valor(value) da caixa de texto

senha, que pertence ao formulário f1, que está declarado na página(document), for menor do
que 6, então a mensagem será enviada através do método alert(). Logo após a mensagem, o
foco é retornado para o campo através do evento focus(), do objeto de destino.

EX: onChange
O evento onChange será disparado sempre que houver uma alteração de valor no objeto em
que ele for declarado. Nosso próximo exemplo, irá monitorar uma caixa de seleção, e de
acordo com o valor escolhido, a página terá sua cor de fundo alterada.
01. <html>
02. <head>
03. <title>onChange</title>
04. </head>
05. <body>
06. <h3>O evento <b>onChange</b></h3><hr>
07. Escolha uma cor de fundo para sua página:<br>
08. <select name="cores" onChange="document.bgColor = this.value;">
09. <option selected value="white">Escolha sua cor</option>
10. <option value="red">Vermelha</option>
11. <option value="green">Verde</option>
12. <option value="blue">Azul</option>
13. <option value="yellow">Amarela</option>
14. </select>
15. </body>
16. </html>

Observem que o evento onChange está dentro da tag select. Cada vez que uma cor é
escolhida, o valor da select é mudado. Neste momento, a propriedade bgColor do objeto
document, recebe o valor escolhido e executa a operação.

EX: onClick
O evento onClick é bem intuitivo, e irá acontecer sempre que um objeto receber o clique do
mouse. Basicamente, todos os objetos estão sujeitos a ação deste evento. Imagens, botões e o
próprio document são exemplos comuns. A seguir, vamos reproduzir o exemplo visto acima,
 28

no qual, utilizamos o evento onChange. Vamos modificá-lo para trabalhar da mesma forma,
mas agora, operando com o evento onClick.
01. <html>
02. <head>
03. <title>onClick</title>
04. </head>
05. <body>
06. <h3>O evento <b>onClick</b></h3><hr>
07. Escolha uma cor de fundo para sua página:<br>
08. <input type="button" name="cor1" value="Vermelha"
onClick="document.bgColor = '#FF0000';">
09. <input type="button" name="cor2" value="Verde"
onClick="document.bgColor = '#00FF00';">
10. <input type="button" name="cor3" value="Azul"
onClick="document.bgColor = '#0000FF';">
11. <input type="button" name="cor4" value="Preta"
onClick="document.bgColor = '#000000';">
12. </body>
13. </html>
 29

7 Funções
Pode-se definir função como um grupo de instruções que executa uma determinada tarefa.
01. <html>
02. <head>
03. <title>O método prompt</title>
04. <script language="Javascript">
05. function cubo( a )
06. {
07. return a * a * a;
08. }
09. var numero = prompt( 'Informe o número a ser calculado:', '' );
10. document.write( 'O cubo de ' + numero + ' é ' + cubo( numero ) );
11. </script>
12. </head>
13. <body>
14. <center><h3>Calculando o cubo de um número!!!</h3></center>
15. </body>
16. </html>

Nas linhas 5, 6 e 7, declaramos a função cubo(), que recebe um parâmetro a e retorna este
valor multiplicado por ele mesmo por três vezes(cubo matemático). Na linha 9, criamos uma
variável número quer irá receber o resultado do método prompt. Este método possui dois
parâmetros, sendo que o segundo é opcional. O primeiro é a mensagem de interação com o
usuário. O segundo, é o valor inicial da caixa de texto que será aberta na janela de diálogo.
Embora seja opcional, é interessante que se coloque pelo menos uma string vazia( '' ), como
fizemos. Assim evitamos que apareça o texto undefined quando a caixa de diálogo for
carregada. Na linha 11, imprimimos o resultado, que é composto por um texto concatenado,
com os valores originais de numero e o resultado da função cubo().

8 Trabalhando com janelas

8.1 Como abrir uma nova janela

Ao navegar na Internet, determinados sites exibem uma janela secundária ao carregar a

página que normalmente são usadas para exibir informações promocionais ou
complementares ao site visitado.
 30

Por intermédio do JavaScript, pode se criar janelas com grande flexibilidade,

definindo sua posição, seu tamanho, ocultando algumas de suas partes, etc.
Para abrir uma nova janela, você deve usar o método window.open() com seguinte
sintaxe: Contém o endereço da
página

ObjJanea1=Window.open (“URL”, “nome da janela”, “características”)

Nome da variável que contém o novo objeto window.

As principais propriedades para especificar as características de uma janela são:

menubar: Usado para exibir a barra de menu da janela. Para habilitar a barra use
menubar=yes ou menubar=1. Para desabilitar usa menubar=no ou menubar=0.
toolbar: Usado para exibir a barra de ferramentas da janela.
Para habilitar a barra use toolbar=yes ou toolbar=1. Para desabilitar usa toolbar=no ou
toolbar=0.
scrollbars: Usado para exibir a barra de rolagem da janela. Para habilitar a barra use
scrollbars=yes ou scrollbars =1. Para desabilitar usa scrollbars =no ou scrollbars =0.
status: Usado para exibir a barra de status da janela. Para habilitar a barra use status =yes ou
status =1. Para desabilitar usa status =no ou status =0.
location: Usado para exibir a barra de endereço da janela. Para habilitar a barra use
location=yes ou location =1. Para desabilitar usa location =no ou location =0.
height: Usado para definir a altura, em pixels, da janela.
width: Usado para definir a largura, em pixels, da janela.
top: Ajusta a posição da janela para o topo da tela em pixels.
left: Ajusta a posição da janela para esquerda da tela em pixels.

Exemplo 8.1 - Abrindo automaticamente uma nova janela ao carregar uma página.
1. <HTML>
2. <HEAD>
3. <TITLE>testando janelas</TITLE>
4. <SCRIPT LANGUAGE= "JAVASCRIPT">
5. function minhaJanela()
6. {
7. janelaVazia = window.open('','teste',
8. 'height=100,width=200,menubar=yes,toolbar=yes,location=yes,scro
llbars=yes,status=yes,left=500,top=200')
9. }
 31

10. </SCRIPT>
11. </HEAD>
12. <BODY onLoad = "minhaJanela()">
13. <P><font color="#ff0000">Uma nova janela foi aberta
ao carregar esta página!</font></P>
14. </BODY>
15. </HTML>

9 Formulários
9.1 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:
1. Password
2. Text
3. Hidden
4. Checkbox
5. Radio
6. Button
7. Reset
8. Submit
A construção destes objetos é feita pela linguagem HTML (HiperText Mark-up Language).
Portanto, é aconselhável que sejam criados utilizando-se ferramentas de geração de páginas
HTML, como o HotDog ou, mais recomendado, FrontPage.

9.1.1Objeto 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.
 32

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.
9.1.2 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="TPassword">
<p>Entrada de Senha<input type=password size=10 maxlength=10
name="Senha" value="">
</p>
</form>

9.1.3 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.

9.1.4 Objeto Input RADIO

 33

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.
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 dois set's de objetos radio. O primeiro tem o objetivo de mudar
a cor de fundo do documento atual. O segundo tem o objetivo levar informações ao "server".

9.1.5 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.
É 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.

9.1.6 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
 34

"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 é aconselhável 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.

9.1.7 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">
<p>
Texto de Múltiplas Linhas <textarea name="MultText" rows=2 cols=40>
Primeira linha do texto inicial
segunda linha do texto inicial
</textarea>
</p>

9.1.8 Objeto SELECT

 35

É 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.

Exemplo 9 - Validando campos de um Formulário

1. <HTML>
2. <HEAD>
3. <TITLE>Validação de Formulários</TITLE>
4. <SCRIPT LANGUAGE= "JAVASCRIPT">
5. function validaForm() {
6. if (document.form1.nome.value.length <=1)
7. {
8. alert("Digite o nome.");
9. form1.nome.focus();
10. return false;
11. }
12. if (document.form1.email.value.length <=1)
13. {
14. alert("Digite o e-mail.");
15. form1.email.focus();
16. return false;
17. }
18. if (document.form1.fone.value.length <=1)
19. {
20. alert("Digite o telefone.");
21. form1.fone.focus();
22. return false;
23. }
24. return true;
25. }
26. </SCRIPT>
27. </HEAD>
28. <BODY>
29. <form name="form1" action="mailto:email@fsd.edu.br"
enctype="text/plain" onSubmit="return validaForm(this);">
30. <p>(*)Nome:<input type="text" name="nome"></p>
31. <p>(*)E-mail:<input type="text" name="email"></p>
32. <p>(*)Telefone:<input type="text" name="fone"></p>
33. <input type="submit" value="Enviar">
 36

34. </p></form>
35. </BODY>
36. </HTML>

A seguir visualização da página do exemplo 9, neste exemplo o usuário deixou de preencher o

campo TELEFONE

Bibliografia

• NEGRINO, Tom. Java script para World Wide Web – 4 ed. Editora Campus -2001

• NUCLEO TÉCNICO, Makrom Books. Java Script passo a passo lite... Editora Makrom
Books LTDA. São Paulo – 2001

• RAMALHO, José Antônio Alves. Java Script – prático e rápido. São Paulo – Editora
Berkeley 2000.

• SILVA, Osmar J. Java Script – Guia Prático do Webmaster. Editora Erica –2001.

• OLIVEIRO, Carlos A. J. – Faça um Site Java Script- Orientado por projeto. Scripts
baseados em Objetos. 2 ed. Ed. Érica, São Paulo – 2001.