1

Apostila sobre
Java Script

Java Script Bsico................................................................................................... 3

1. Introduo ........................................................................................................ 3
1.1
O que Java Script?................................................................................. 3
1.2
Qual a diferena entre Java e JavaScript? ............................................ 3
1.3
Um pequeno exemplo do uso de scripts ................................................... 4
2. Operadores e Controles Especiais................................................................... 8
2.1
Operadores Matemticos.......................................................................... 8
2.2
Operadores Lgicos.................................................................................. 8
2.3
Caracteres Especiais ................................................................................ 9
3 Comandos Condicionais ................................................................................ 10
4 Eventos .......................................................................................................... 12
5 Criando variveis ........................................................................................... 14
6 Escrevendo no documento............................................................................. 15
7 Mensagens..................................................................................................... 18
8 Funes ......................................................................................................... 19
8.1
Funes intrnsecas ................................................................................ 19
9 Manipulando Strings e Datas ........................................................................ 21
10
Manipulando Arrays.................................................................................... 23
11
Formulrio e elementos do formulrio ........................................................ 25
11.1 O Objeto FORM ...................................................................................... 25
11.2 Objetos relacionados ao texto................................................................. 25
11.3 O Objeto de boto................................................................................... 27
11.4 O Objeto de caixa de seleo ................................................................. 27
11.5 O objeto de boto de opo.................................................................... 28
a) Propriedade length..................................................................................... 28
b) Propriedade checked .............................................................................. 29
11.6 O objeto SELECT.................................................................................... 29
a) Propriedade selectedIndex ..................................................................... 29
b) Propriedade text...................................................................................... 30
c) Propriedade value ................................................................................... 30
12
Passando dados e elementos do formulrio a funes .............................. 31
13
Objetos da janela e do documento ............................................................. 32
13.1 Acessando as propriedades e mtodos da janela .................................. 32
a) Mtodo back ........................................................................................... 32
b) Mtodo close() ........................................................................................ 32
c) Mtodo open()......................................................................................... 33
d) Mtodo print().......................................................................................... 33
14 Exerccios......................................................................................................... 34

Java Script Bsico

1. Introduo
1.1

O que Java Script?

JavaScript uma linguagem que permite injetar lgica em pginas escritas

em HTML (HiperText Mark-up Language).
Os pargrafos de lgica do javaScript podem estar "soltos" ou atrelados a
ocorrncia de eventos.
Os pargrafos soltos so executados na sequncia em que aparecem na
pgina (documento) e os atrelados a eventos so executados apenas quando
o evento ocorre.
Para inserir pargrafos de programao dentro do HTML necessrio
identificar o incio e o fim do set de JavaScript, da seguinte forma:
<SCRIPT>
instrues ...
</SCRIPT>
Este procedimento pode ser adotado em qualquer local da pgina. Os
comandos JavaScript so sensveis ao tipo de letra (maisculas e minsculas)
em sua sintaxe.
Portanto, necessrio que seja obedecida 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
varivel.

1.2

Qual a diferena entre Java e JavaScript?

Ainda que os nomes sejam quase os mesmos, Java no a mesma coisa

que JavaScript! Essas so duas tcnicas diferentes de programao na
Internet. Java uma linguagem de programao. JavaScript uma linguagem
de scripting (tal como diz o nome). A diferena que se pode criar programas
reais com Java. O mais das vezes, porm, voc quer apenas criar um efeito
chamativo, sem se importar com qualquer programa real. Assim, JavaScript foi
pensado como algo fcil de se compreender e de se usar. Os autores de
JavaScript no tm que se importar muito com programao. Ns poderamos
at dizer que JavaScript muito mais uma extenso do HTML do que uma
linguagem de computador separada. Naturalmente essa no uma definio

4
"oficial" mas acho que ela torna mais compreensvel a diferena entre Java e
JavaScript.

1.3

Um pequeno exemplo do uso de scripts

Exemplo 1:
Crie um arquivo HTML chamado Alo.html e coloque o cdigo abaixo:

<html>
<body>
<form>
<input type="button" name="Button1" value="Aperte-me"
onClick="mensagem()">
</form>
</body>
</html>
<script language="JavaScript">
function mensagem() {
alert("Alo!");
}
</script>

Abra o arquivo Alo.html com o seu navegador e clique no boto Aperteme, o resultado ser este:

Ento, o que acontece neste script?

Existe uma coisa nova no tag de <input>. L voc pode ver 'onclick'. Isto diz
ao browser que funo ele tem que chamar quando o boto pressionado (
claro que s quando o browser suporta JavaScript). A funo 'mensagem()'
declarada na pgina. Quando o boto pressionado a funo executada.
Tem uma coisa nova neste script - o mtodo 'alerta'. Este mtodo j
declarado no JavaScript - desse modo voc s tem que cham-lo. Existem
muitos mtodos diferentes que voc pode chamar.

Exemplo 2:
Crie um arquivo HTML chamado Saudacao.html e coloque o cdigo abaixo:
<html>
<head>
<script language="JavaScript">
<!-- hide script from old browsers
function getname(str) {
alert("Oi, "+ str+"!");
}
// end hiding contents -->
</script>
</head>

6
<body>
Coloque o seu nome, por favor:
<form>
<input type="text" name="name"
onBlur="getname(this.value)" value="">
</form>
</body>
</html>
Abra o arquivo Saudacao.html com o seu navegador, digite seu nome na caixa
de texto e clique na parte em branco da pgina, o resultado ser este:

Ns temos alguns elementos novos implementados neste script novamente.

Em primeiro lugar, voc certamente notou o comentrio dentro do script. Dessa
maneira voc pode esconder o script dos browsers antigos que no podem
rodar scripts. Voc tem que manter a ordem daquilo que mostrado! O incio
do comentrio deve estar logo depois do primeiro tag de <script>. O
comentrio termina logo antes do tag de </script>. Neste documento-HTML
voc tem um elemento de formulrio onde o usurio pode colocar o seu nome.
O 'onBlur' no tag de <input> avisa ao cliente que funo que ele tem que
chamar quando alguma coisa colocada dentro do formulrio. A funo
'getname(str)' ser chamada quando voc 'deixa' este elemento de formulrio,
ou pressiona o 'enter' depois de haver colocado alguma coisa. A funo pegar
a seqncia que voc colocou atravs do comando 'getname(this.value)'.
'This.value' significa o valor que voc colocou neste elemento de formulrio.

Exemplo 3:

Vamos implementar uma funo de data dentro do nosso script. Assim, se

voc criou uma pgina-HTML, voc pode fazer o cliente imprimir a ltima
modificao no documento. Voc no precisa, entretanto, escrever a data no
documento. Voc simplesmente escreve um pequeno programa de script.
Quando voc fizer pequenas modificaes no futuro, a data se modificar
automaticamente.
Crie um arquivo HTML chamado DataAntiga.html e coloque o cdigo abaixo:

<html>
<body>
Esta uma pgina-HTML simples.
<br>
ltimas modificaes:
<script language="JavaScript">
<!-- hide script from old browsers
document.write(document.lastModified)
// end hiding contents -->
</script>
</body>
</html>

2. Operadores e Controles Especiais

2.1 Operadores Matemticos
So operadores a serem utilizados em clculos, referncias de indexadores e
manuseio de strings.
Ao longo do manual estes operadores sero largamente utilizados, dando,
assim, uma noo mais precisa do seu potencial.
+
*
/
%

Adio de valor e concatenao de strings

Subtrao de valores
Multiplicao de valores
Diviso de valores
Obtm o resto de uma diviso:

Ex: 150 % 13 retornar 7.

7 % 3 retornar 1.
+= concatena /adiciona a 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 expresses:
X = X + 1 ou X = X - 1 respectivamente.
Para inverter sinal: X = -X negativo para positivo ou positivo para negativo.

2.2 Operadores Lgicos

So operadores a serem utilizados em comandos condicionais, tais como: IF,
FOR e WHILE.
Os comandos condicionais sero vistos mais frente.
==
!=
>
>=

Igual
Diferente
Maior
Maior ou Igual

9
<
<=
&&
||

Menor
Menor ou Igual
E
Ou

2.3 Caracteres Especiais

\b
\f
\n
\r
\t
//
/*....*/

backspace
form feed
new line caracters
carriage return
tab characters
Linha de comentrio
Delimitadores para inserir um texto com mais de uma linha como
comentrio

Os delimitadores naturais para uma string so " ou ' . Caso seja necessrio a
utilizao destes caracteres como parte da string, utilize \ precedendo " ou '.
Ex. alert ("Cuidado com o uso de \" ou \' em uma string")

10

3 Comandos Condicionais
So comandos que condicionam a execuo de uma certa tarefa veracidade ou
no de uma determinada condio, ou enquanto determinada condio for
verdadeira.
So eles:
Comando IF
if (condio) {
ao para condio satisfeita
}
[ else {
ao para condio no satisfeita } ]
Ex.:
if (Idade < 18) {
Categoria = "Menor"
} else {
Categoria = "Maior"
}
Comando FOR
for ( [inicializao/criao de varivel de controle ;]
[condio ;]
[incremento da varivel de controle] )
{ ao }
Ex.:
for (x = 0 ; x == 10 ; x++) {
alert ("X igual a " + x)
}
Comando WHILE
Executa uma ao enquanto determinada condio for verdadeira.
while (condio)
{ ao }

11
Ex.:
var contador = 10
while (contador > 1) {
contador}
Move condicional
receptor = ( (condio) ? verdadeiro : falso)
Ex.:
NomeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino")
OBS:
Nos comandos FOR e WHILE a diretiva "break" pode ser utilizada para
interromper a condio principal e sair do loop. Da mesma forma, a diretiva
"continue" interrompe uma ao (se determinada condio ocorrer), mas volta
para o loop.
Diretivas/condies entre [ ] significam que so opcionais.

12

4 Eventos
So fatos que ocorrem durante a execuo do sistema, a partir dos quais o
programador pode definir aes a serem realizadas pelo programa.
Abaixo apresentamos a lista dos eventos possveis, indicando os momentos em
que os mesmos podem ocorrer, bem como, os objetos passveis de sua
ocorrncia.
onload - Ocorre na carga do documento. Ou seja, s ocorre no BODY do
documento.
onunload - Ocorre na descarga (sada) do documento. Tambm s ocorre no
BODY.
onchange - Ocorre quando o objeto perde o foco e houve mudana de contedo.
Vlido para os objetos Text, Select e Textarea.
onblur - Ocorre quando o objeto perde o foco, independente de ter havido
mudana.
Vlido para os objetos Text, Select e Textarea.
onfocus - Ocorre quando o objeto recebe o foco.
Vlido para os objetos Text, Select e Textarea.
onclick - Ocorre quando o objeto recebe um Click do Mouse.
Vlido para os objetos Buton, Checkbox, Radio, Link, Reset e Submit.
onmouseover - Ocorre quando o ponteiro do mouse passa por sobre o objeto.
Vlido apenas para Link.
onselect - Ocorre quando o objeto selecionado.
Vlido para os objetos Text e Textarea.
onsubmit - Ocorre quando um boto tipo Submit recebe um click do mouse.
Vlido apenas para o Form.
Exemplo:
Crie uma pgina com o nome Eventos.html e insira este cdigo nela:

13
<html>
<body>
<a href="ColegiadoOrgaoManutencao.html"
onMouseOver="window.status='Curso de Java Script'; return
true"> Cadastro do Conselho </a>
</body>
</html>
Abra esta pgina com o seu navegador e veja o resultado. Posicione o mouse sob
o link e olhe para a barra de status na parte de baixo do seu browser.
A nica coisa que voc tem que fazer acrescentar a propriedade onMouseOver
ao seu tag de link <a>. O 'window.status' lhe permitir escrever coisas na barra de
status do seu browser. Como se pode ver, voc tem que alterar as aspas. Voc
no vai poder usar " todo o tempo, porque se no o JavaScript no ser capaz de
identificar a seqncia que voc quer imprimir na barra de status. Depois da
seqncia voc tem que escrever ;return true.

14

5 Criando variveis
A varivel criada automaticamente, pela simples associao de valores a
mesma.
Exemplo:
novaVariavel = "Jose"
Foi criada a varivel de nome novaVariavel que, passou a conter a string Jose.
As variveis podem ser Locais ou Globais. As variveis que so criadas dentro
de uma funo so Locais e referenciveis apenas dentro da funo. As variveis
criadas fora de funes so Globais, podendo ser referenciadas em qualquer parte
do documento.
Desta forma, variveis que precisam ser referenciadas por vrias funes ou em
outra parte do documento, precisam ser definidas como globais.
Embora no seja recomendvel, em uma funo, pode ser definida uma varivel
local com o mesmo nome de uma varivel global. Para isso utiliza-se o mtodo de
definio var.
Exemplo:
Varivel Global J MinhaVariavel = ""
Varivel Local J var MinhaVariavel = ""

15

6 Escrevendo no documento
O JavaScript permite que o programador escreva linhas dentro de uma pgina
(documento), atravs do mtodo write. As linhas escritas desta forma, podem
conter textos, expresses JavaScript e comandos Html. As linhas escritas atravs
deste mtodo aparecero no ponto da tela onde o comando for inserido.
Vamos falar sobre o objeto document.write().

O objeto
Mtodo do objeto documento:
O arquivo HTML que aparece na janela do browser um objeto tipo document.
A cada objeto Javascript, o programador da linguagem previu um conjunto de
mtodos - ou funes dedicadas a este objeto. Para document, o Javascript
dedicou o mtodo 'escrever no documento', conhecido como o mtodo write().
A chamada do mtodo faz-se segundo a notao:
nome_do_objeto.nome_do_mtodo

Para chamar o mtodo write() do documento, escreva-se:

document.write();

Mtodo write()
A sintaxe bastante simples
write("seu texto");
Pode-se tambm escrever uma varivel, seja a varivel resultado,
write(resultado);
Para associar texto (cadeia de caracteres) e variveis, utiliza-se instruo:
write("O resultado " + resultado);

16
Podem-se utilizar os tags Html para incrementar o texto:
write("<B>O resultado </B>" + resultado); ou
write ("<B>" + "O resultado " + "</B>" + resultado)

Exemplos:
<script>
valor = 30
document.write ("Minha primeira linha")
document.write ("Nesta linha aparecer o resultado de : "
+ (10 * 10 + valor))
</script>

A idia do exemplo acima escrever duas linhas. Entretanto o mtodo write no

insere mudana de linha, o que provocar o aparecimento de apenas uma linha
com os dois textos emendados.
Para evitar este tipo de ocorrncia, existe o mtodo writeln que escreve uma
linha e espaceja para a seguinte. Entretanto, em nossos testes, este comando no
surtiu efeito, obtendo-se o mesmo resultado do mtodo write. A soluo
encontrada para esta situao foi a utilizao do comando de mudana de
pargrafo da linguagem Html.

<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 questo da mudana de linha, porm, vai gerar uma linha em
branco, entre cada linha, por se tratar de mudana de pargrafo. Caso no seja
desejada a existncia da linha em branco, a alternativa utilizar o comando Html
<br> que apenas muda de linha.

<script>
valor = 30
document.write ("<br>Minha primeira linha")
document.write ("<br>Nesta linha aparecer o resultado
de : " + (10 * 10 + valor) )
</script>

17
O problema
O objeto 'document.write()' limpa todo o documento antes de imprimir algo na
tela.
Para solucionar este problema utilizaremos o objeto window. Com esse simples
parmetro adicional, 'window-janela' no objeto, ele se torna muito til, alm de
no mais limpar a tela para imprimir.
Exemplo:
<html>
<head>
<script language="Java Script">
window.document.write("Sem limpar...");
</script>
</head>
<body>
o documento...
</body>
</html>

18

7 Mensagens
Existem trs formas de comunicao com o usurio atravs de mensagens.
Apenas Observao.
alert ( mensagem )
Exemplo:
alert ("Certifique-se de que as informaes esto
corretas")
Mensagem que retorna confirmao de OK ou CANCELAR
confirm (mensagem)
Exemplo:
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 informao digitada pelo usurio.
Minha mensagem a mensagem que vai aparecer como Label da caixa de input
Meu texto um texto, opcional, que aparecer na linha de digitao do usurio.
Ex.
Entrada = prompt ("Informe uma expresso matemtica", "")
Resultado = eval (Entrada)
document.write("O resultado = " + Resultado)

19

8 Funes
Uma funo um set de instrues, que s devem ser executadas quando a
funo for acionada.
A sintaxe geral a seguinte:
function NomeFuno (Parmetros){
Ao
}
Suponha uma funo que tenha como objetivo informar se uma pessoa maior ou
menor de idade, recebendo como parmetro a sua idade.
function Idade (Anos) {
if(Anos > 17) {
alert ("Maior de Idade")
}else{
alert ("menor de Idade")
}
}
Para acionar esta funo, suponha uma caixa de texto, em um formulrio, na qual
seja informada a idade e, a cada informao, a funo seja acionada.
<form>
<input type=text size=2 maxlength=2 name="Tempo"
onchange="Idade(Tempo.value)">
</form>
Observe-se que o parmetro passado (quando ocorre o evento "onchange") foi o
contedo da caixa de texto "Tempo" (propriedade "value") e que, na funo,
chamamos de "Anos". Ou seja, no existe co-relao entre o nome da varivel
passada e a varivel de recepo na funo. Apenas o contedo passado.

8.1 Funes intrnsecas

So funes embutidas na prpria linguagem. A sintaxe geral a seguinte:
Result
eval
parseInt
parseFloat

funo (informao a ser processada)

Calcula o contedo da string
Transforma string em inteiro
Transforma string em nmero com ponto flutuante

20
Date()

- date() - Retorna a data e a hora

ex1: Result = eval ( " (10 * 20) + 2 - 8")
ex2: Result = eval (string)
No primeiro exemplo Result seria igual a 194. No segundo, depende
do contedo da string, que tambm pode ser o contedo (value) de
uma caixa de texto.

Funes tipicamente Matemticas:

Math.abs(nmero)
Math.ceil(nmero)
Math.floor(nmero)
Math.round(nmero)
Math.pow(base,
expoente)
Math.max(nmero1,
nmero2)
Math.min(nmero1,
nmero2)
Math.sqrt(nmero)
Math.SQRT2
Math.SQRT_2
Math.sin(nmero)
Math.asin(nmero)
Math.cos(nmero)
Math.acos(nmero)
Math.tan(nmero)
Math.atan(nmero)
Math.pi
Math.log(nmero)
Math.E
Math.LN2
Math.LOG2E
Math.LN10
Math.LOG10E

Retorna o valor absoluto do nmero (ponto flutuante)

Retorna o prximo valor inteiro maior que o nmero
Retorna o prximo valor inteiro menor que o nmero
Retorna o valor inteiro, arredondado, do nmero.
Retorna o clculo do exponencial
Retorna o maior nmero dos dois fornecidos
Retorna o menor nmero dos dois fornecidos
Retorna a raiz quadrada do nmero
Retorna a raiz quadrada de 2 (aproximadamente 1.414)
Retorna a raiz quadrada de 1/2 (aproximadamente
0.707)
Retorna o seno de um nmero (anglo em radianos)
Retorna o arco seno de um nmero (em radianos)
Retorna o cosseno de um nmero (anglo em radianos)
Retorna o arco cosseno de um nmero (em radianos)
Retorna a tangente de um nmero (anglo em radianos)
Retorna o arco tangente de um nmero (em radianos)
Retorna o valor de PI (aproximadamente 3.14159)
Retorna o logartmo de um nmero
Retorna a base dos logartmos naturais
(aproximadamente 2.718)
Retorna o valor do logartmo de 2 (aproximadamente
0.693)
Retorna a base do logartmo de 2 (aproximadamente
1.442)
Retorna o valor do logartmo de 10 (aproximadamente
2.302)
Retorna a base do logartmo de 10 (aproximadamente
0.434)

21

9 Manipulando Strings e Datas

Strings
O JavaScript bastante poderoso no manuseio de Strings, fornecendo ao
programador uma total flexibilidade em seu manuseio.
Abaixo apresentamos os mtodos disponveis para manuseio de strings:
string.length
string.charAt(posio)

Retorna o tamanho da string (quantidade de bytes)

Retorna o caracter da posio especificada (inicia
em 0)
string.indexOf("string")
Retorna o nmero da posio onde comea a
primeira "string
string.lastindexOf("string") Retorna o nmero da posio onde comea a ltima
"string
string.substring(index1,
Retorna o contedo da string que corresponde ao
index2)
intervalo especificado. Comeando 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 varivel Parte receber a palavra log)
string.toUpperCase()
string.toLowerCase()
escape ("string")
unscape("string")

Transforma o contedo da string para maisculo (Caixa

Alta)
Transforma o contedo da string para minsculo (Caixa
Baixa)
Retorna o valor ASCII da string (vem precedido de %)
Retorna o caracter a partir de um valor ASCII (precedido
de %)

Datas
Existe apenas uma funo para que se possa obter a data e a hora. a funo
Date (). Esta funo devolve data e hora no formato: Dia da semana, Nome do
ms, Dia do ms, Hora: Minuto: Segundo e Ano.

Exemplo:

22

Fri May 24 16:58:02 1996

Para se obter os dados separadamente, existem os seguintes mtodos:
getDate()
getDay()
getMonth()
getYear()
getHours()
getMinutes()
getSeconds()

Obtm o dia do ms (numrico de 1 a 31)

Obtm o dia da semana (0 a 6)
Obtm o ms (numrico de 0 a 11)
Obtm o ano
Obtm a hora (numrico de 0 a 23)
Obtm os minutos (numrico de 0 a 59)
Obtm os segundos (numrico de 0 a 59)

No exemplo abaixo obteremos o dia da semana. Para tal, utilizaremos a varivel

DataToda para armazenar data/hora e a varivel DiaHoje para armazenar o
nmero do dia da semana.
Exemplo:
DataToda = new Date()
DiaHoje = DataToda.getDay()

23

10 Manipulando Arrays
Para trabalhar com arrays necessria a criao de um objeto com a propriedade
de criao de um array.
No exemplo abaixo, criaremos um objeto tipo array de tamanho varivel e com a
funo de "limpar" o contedo das variveis cada vez que uma nova instncia seja
criada a partir dele.
function CriaArray (n) {
this.length = n
for (var i = 1 ; i <= n ; i++) {
this[i] = ""
}
}
Agora podemos criar novas instncias do objeto "CriaArray" e aliment-los com os
dados necessrios.
NomeDia = new CriaArray(7)
NomeDia[0] = "Domingo"
NomeDia[1] = "Segunda"
NomeDia[2] = "Tera"
NomeDia[3] = "Quarta"
NomeDia[4] = "Quinta"
NomeDia[5] = "Sexta"
NomeDia[6] = "Sbado"
Atividade = new CriaArray(5)
Atividade[0] = "Analista"
Atividade[1] = "Programador"
Atividade[2] = "Operador"
Atividade[3] = "Conferente"
Atividade[4] = "Digitador"
Agora poderemos obter os dados diretamente dos arrays.
DiaSemana = NomeDia[4]
Ocupao = Atividade[1]
DiaSemana passaria a conter Quinta e Ocupao conteria Programador.
Outra forma de se trabalhar com arrays criar novas instncias dentro do prprio
objeto do array, o que proporciona o mesmo efeito de se trabalhar com matriz.
Isso pode ser feito da seguinte forma:

24
function Empresas (Emp, Nfunc, Prod) {
this.Emp = Emp
this.Nfunc = Nfunc
this.Prod = Prod
}
TabEmp = new Empresas(3)
TabEmp[1] = new Empresas("Elogica", "120", "Servios")
TabEmp[2] = new Empresas("Pitaco", "35", "Software")
TabEmp[3] = new Empresas("Corisco", "42", "Conectividade")
Assim, poderemos obter a atividade da empresa nmero 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 referncias ao contedo de variveis.

25

11 Formulrio e elementos do formulrio

A maior parte da interatividade entre uma pgina da Web e o usurio ocorre
dentro de um formulrio. E a que reside grande parte da HTML interativa para
cada browser: campos de texto, botes, caixas de seleo, listas de opes e
assim por diante. Todo formulrio est contido em um documento, mesmo assim,
o objeto document precisa fazer parte da referncia ao formulrio e seus
elementos.

11.1

O Objeto FORM

Um objeto FORM pode ser referenciado por sua posio no array de

formulrio contidos por um documento ou pelo seu nome (se voc atribuir um
identificador ao atributo NAME dentro da tag <FORM>.) Se apenas um
formulrio aparecer no documento, ele ainda ser um membro de um array
(um array de um elemento), podendo ser referenciado desta forma:
document.forms[0]
Observe que a referncia do array usa a verso no plural da palavra, seguida
por um par de colchetes que contm o nmero de ndice do elemento (zero
sempre o primeiro). Mas, se voc atribuir um nome para o formulrio, basta
informar o nome do formulrio na referncia:
document.nomeFormulario

11.2

Objetos relacionados ao texto

Cada um dos quatro elementos do formulrio HTML relacionados ao texto

texto, senha, oculto e TextArea um elemento na hierarquia de objetos do
documento. Tudo, menos o objeto oculto, aparece na pgina, permitindo que
os usurios insiram informaes.
Para os objetos visveis nessa categoria, os manipuladores de evento so
disparados a partir de aes do usurio, como dar o foco a um campo
(colocando o ponteiro de insero do texto no campo) e alterando o texto
(digitando novo texto e saindo do campo). A maior parte das suas aes de
campo de texto disparada pela mudana do texto (o manipulador de evento
onChange).
a) Propriedade value
A propriedade mais usada de um elemento relacionado a texto a
propriedade value. Essa propriedade representa o contedo atual do

26
elemento de texto. Um script pode apanhar e definir seu contedo a qualquer
momento. O contedo de uma propriedade value sempre uma string.
Poder ser usado os mtodos de manipulao de Strings juntamente com a
propriedade value, verificar captulo 9.
Sintaxe:
var texto;
texto = document.nomeFormulario.nomeCampoTexto.value;

Exemplo usando o mtodo de String toUpperCase():

<script language=JavaScript>
function upperMe(){
var campo = document.form_org.nomeAluno;
var valorUpper = campo.value.toUpperCase();
campo.value = valorUpper;
}
</script>
No exemplo acima a funo upperMe() ir converter para letras maisculas o
valor do campo texto nomeAluno , mas para que esta funo funcione
necessrio que um evento a invoque. Veja o exemplo abaixo da chamada da
funo com a utilizao do evento onChange():
<FORM >
<input type=text name=nomeAluno value=exemplo
onChange = upperMe()>
</FORM>

b) Mtodo blur do objeto Text

Simula o evento de retirada do foco do objeto em questo.
Sintaxe:
document.nomeFormulario.nomeCampoTexto.blur();
c) Mtodo focus do objeto Text
Simula o evento de focalizao do objeto, ou seja, passa o foco para o objeto
em questo.

27
Sintaxe:
document.nomeFormulario.nomeCampoTexto.focus();

11.3

O Objeto de boto

O boto um dos objetos mais simples de se programar. Ele possui apenas

algumas propriedades que raramente so acessadas ou modificadas nos
scripts. O evento mais til do objeto de boto o evento onClick. Ele
disparado sempre que o usurio d um clique no boto.

11.4

O Objeto de caixa de seleo

A propriedade value de uma caixa de seleo qualquer outro texto que

voc deseja associar ao objeto. Esse texto no aparece na pgina de forma
alguma. A propriedade value do objeto de caixa de seleo (checkbox) a
String que ser enviada pelo formulrio caso o checkbox em questo esteja
checado.
a) Propriedade checked
a propriedade principal de um objeto de caixa de seleo, esta
propriedade verifica se a caixa est marcada ou no. A propriedade
checked um valor Booleano: true [verdadeiro] se a caixa estiver marcada,
false [falso] se no estiver.
Toda a propriedade quando for booleano poder ser usado em uma
expresso de condio if ou if...else
Exemplo:
function verificaBox(){
if (document.form_org.campoChecagem.checked){
alert(Esta caixa de seleo est checada.);
}else{
alert(Esta caixa de seleo no est
checada);
}
}

b) Mtodo blur do objeto Checkbox

Simula o evento de retirada do foco do checkbox em questo.

28
Sintaxe:
document.nomeFormulario.campoCheckbox.blur();
c) Mtodo focus do objeto Checkbox
Simula o evento de focalizao do objeto, ou seja, passa o foco para o objeto
em questo.
Sintaxe:
document.nomeFormulario.campoCheckbox.focus();

d) Mtodo click do objeto Checkbox

Simula o evento de clique do mouse.
Sintaxe:
document.nomeFormulario.campoCheckbox.click();

11.5

O objeto de boto de opo

Para deixar que o browser controle a marcao e a desmarcao de um

grupo de botes relacionados, voc precisa atribuir o mesmo nome a cada
um dos botes no grupo. Voc pode ter vrios grupos dentro de um
formulrio, mas cada membro do mesmo grupo precisa ter o mesmo nome.
A atribuio do mesmo nome a um elemento do formulrio fora o browser a
controlar os elementos de forma diferente do que se cada um tivesse um
nome exclusivo. Em vez disso, o browser mantm uma lista dos objetos com
o mesmo nome na forma de um array. O nome atribudo ao grupo torna-se o
nome do array.

a) Propriedade length
Usado para descobrir quantos botes existem em um determinado grupo.
Sintaxe:
document.form_org.nomeGrupo.length;

29

b) Propriedade checked
Para descobrir se um boto especfico est atualmente marcado ter que
acessar o elemento de boto individualmente.
Sintaxe:
document.form_org.nomeGrupo[0].checked;

c) Mtodo blur do objeto Radio

Simula o evento de retirada do foco do Radio em questo.
Sintaxe:
document.nomeFormulario.campoOption[indice].blur();
d) Mtodo focus do objeto Radio
Simula o evento de focalizao do objeto, ou seja, passa o foco para o objeto
em questo.
Sintaxe:
document.nomeFormulario.campoOption[indice].focus();

11.6 O objeto SELECT

O objeto Select um objeto composto: um objeto que contm uma array de
objetos Option. Sua lista pode ser instantnea, que s permite uma nica
seleo, ou ento, uma lista rolvel, que permite aceitar vrias selees pelo
usurio.

a) Propriedade selectedIndex
Retorna o nmero de ndice do item atualmente selecionado. O primeiro
item (no topo da lista) possui um ndice zero. O valor de selectedIndex
fundamental para permitir que voc acesse propriedades da opo
selecionada.
Sintaxe:
document.form_org.nomeSelecao.selectedIndex;

30

b) Propriedade text
A propriedade text a String que aparece na tela, no objeto Select.
Sintaxe:
document.form_org.nomeSelecao.options[n].text;

c) Propriedade value
A propriedade value permite a leitura da string oculta de cada tag Option
definida.
Sintaxe:
document.form_org.nomeSelecao.options[n].value;
Onde:
n = ndice da lista;

31

12 Passando dados e elementos do formulrio a funes

Existem atalhos valiosos para a transferncia de informaes sobre formulrios ou
controle do formulrio diretamente para a funo, sem a necessidade de se lidar
com aquelas referncias normalmente longas que comeam ao nvel do objeto
window ou document.
O JavaScript possui uma palavra-chave this que sempre se refere ao objeto
que contm o script em que a palavra-chave usada. Assim, em um manipulador
de evento onChange para um campo de texto, voc pode passar uma referncia
ao objeto de texto para a funo inserindo a palavra-chave this como parmetro
da funo:
<input type=text name=nomeAluno onChange=upperMe(this)>
No extremo receptor, a funo define uma varivel de parmetro que transforma
essa referncia em uma varivel, que pode ser usada pelo restante da funo:
function upperMe(campo){
instrues
}

32

13 Objetos da janela e do documento

13.1 Acessando as propriedades e mtodos da janela
O objeto window representa uma janela do navegador ou um frame em um
frameset. Toda janela aberta do navegador possui um objeto window, que se
refere a ela prpria isso torna o objeto base na hierarquia do modelo de
objetos do navegador.
Sintaxe:
window.nomePropriedade;
window.nomeMtodo([parmetros])
Um objeto window tambm possui um sinnimo quando o script realizando a
referncia aponta para a janela que abriga o documento. O sinnimo self.
Sintaxe:
self.nomePropriedade;
self.nomeMtodo([parmetros])

a) Mtodo back
Restaura a ltima informao registrada no histrico sobre o contedo
apresentado nos frames de uma janela do navegador. o mesmo que
pressionar o boto Voltar (Back) da barra de ferramentas do navegador.
Sintaxe:
window.back();

b) Mtodo close()
Fecha a janela especificada se ela foi aberta usando o mtodo open ou se
o seu histrico estiver vazio, nenhum aviso ser gerado. Em todos os outros
casos, ser gerada uma mensagem de confirmao de seu fechamento.
Sintaxe:
window.close();

33

c) Mtodo open()
Abre uma nova janela.
Este mtodo contm at trs parmetros que definem a caractersticas da
janela, como o URL do documento a ser carregado, seu nome para fins de
referncia do atributo TARGET em tags HTML e aparncia fsica (tamanho
e etc).
Sintaxe:
var varJanela = window.open(URL, nomeJanela
[,propriedades] );
Exemplo:
var novaJanela = window.open(janelaNova.html,
Minha Janela, height=200, width=300);

Propriedades do mtodo open():

- height: Altura (em pixels) da nova janela.
- menubar: Se yes, criada a barra de menus.
- resizable: Se yes, o usurio poder redimensionar a janela.
- screenX: Distncia (em pixels) do canto esquerdo da tela at o canto
esquerdo da janela.
- screenY: Distncia (em pixels) do topo da tela at o topo da janela.
- scrollbars: Se yes, permite o surgimento das barras de rolagem vertical e
horizontal, quando necessrias.
- status: Se yes, criada a barra de status na base da janela.
- toolbar: Se yes, criada a barra de ferramentas da janela.
- width: Largura (em pixels) da nova janela.

d) Mtodo print()
Imprime o contedo da janela em questo.
Sintaxe:
window.print();

34

14 Exerccios
1) Criar uma nova pgina chamada script1.html que realize as seguintes
tarefas:
a) Fazer uma funo que subtraia dois valores quaisquer e apresent-las
em uma mensagem de alerta com a seguinte frase: A subtrao de ? e
? igual ? .
Substitua o sinal ? dado no exemplo, pelos valores de sua escolha e seu
resultado respectivamente.

b) Na mesma funo, fazer um comando condicional IF para saber se o

primeiro valor maior que o segundo valor, caso a afirmao seja
verdadeira ento se executa a conta e mostra-se o resultado, caso
contrrio ento deve mostrar a mensagem O valor ? menor que o
valor de ?.
Substitua o sinal ? dado no exemplo, pelos valores e seu resultado
respectivamente.

2) Criar uma nova pgina chamada script2.html que realize as seguintes

tarefas:

a) Criar um script que contenha apenas uma mensagem de

Confirmao. A frase desta caixa de mensagem dever ser Voc
est gostando do curso?.
b) Caso o usurio clique em OK dever aparecer a mensagem
Parabns!, escrita no corpo do documento da pgina, caso seja o
contrrio dever aparecer a mensagem Que pena!, tambm escrita
no corpo do documento da pgina.

c) Nesta mesma pgina chame o evento onLoad na tag BODY, este

dever apresentar uma mensagem de alerta exibindo a mensagem
Bem vindo ao curso de Java Script.

d) Criar uma varivel que calcule a soma de 2 nmeros e que exiba o

resultado escrevendo no corpo do documento.

35

3) Criar uma nova pgina chamada script3.html que realize as seguintes

tarefas:
a) Crie um campo do tipo TEXT e um boto.
b) Crie uma funo que leia o valor da TEXT. Esta funo ser
chamada pelo evento onClick do boto que dever imprimir na tela
os seguintes valores a respeito da String que foi digitada no campo
TEXT:
- Tamanho da String;
- String em maisculo;
- String em minsculo;

4) Na mesma pgina do script4.html, faa as seguintes tarefas:

a) Crie um formulrio com 3 campos do tipo TEXT. O campo 1 deve-se
chamar valorA, o segundo valorB e o terceiro valorTotal.
b) Criar um boto no formulrio que possua o evento onClick. Ao se
clicar neste boto dever ser chamada uma funo que realize a
multiplicao dos valores dos campos valorA e valorB, o resultado
dever ser mostrado no campo valorTotal.

5) Na pgina ColegiadoOrgaoManutencao.html, criada anteriormente, realizar

as seguintes tarefas:
a) Criar uma funo para validar todos os campos do formulrio. Esta
funo dever se chamar validaCampo().
b) A funo dever verificar se o campo est preenchido. Caso o
campo esteja em branco dever ser exibida uma caixa de alerta
informando para o usurio, que dever depois retornar o foco para o
campo em questo.
c) Esta funo dever ser chamada pelo boto Salvar da tela no evento
onSubmit() do formulrio.

36
6) Crie uma pgina chamada script6.html e realize as seguintes tarefas:
a) Criar um boto chamado Unesp
b) Este boto dever chamar uma funo que dever abrir uma nova
pgina com o endereo do site da Unesp.
c) A aparncia fsica da janela dever ter barra de rolagem, altura de
400 e largura de 500.