Tutorial de Java Script

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

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
��&n0bsp;�< ������Menor
����<= ����Menor ou Igual
����&& ��E
����|| ������Ou

Controles Especiais

\b - backspace
\f - form feed
\n - new line caracters
\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")

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 } ]

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) }

ComandoWHILE

Executa uma a��o enquanto determinada condi��o for verdadeira.

while (condi��o)
���������{ a��o }

Ex.
var contador = 10
���� �while (contador > 1)
��������������{ contador-- }

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

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.

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 = ""

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:

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:

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
que apenas muda de linha.

Ex:

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)

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.

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.

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

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.

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

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

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)

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 %)

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

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

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:

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.

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.

Ex:


Entrada de Texto




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:


Entrada de Senha



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.
value : Armazena o conte�do do objeto

Ex:






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.




Muda Case



Minusculo
������������������onclick="if (this.checked)
�����������������������������������{ AltMinusc() } ">
Maiusculo
������������������onclick="if (this.checked)
�����������������������������������{ AltMaiusc() } ">
Demo valor
��������������������onclick="if (Opt3.checked)
�������������������������������������{alert ('Server recebera = ' + Opt3.value) } ">


Existe ainda uma 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 deleta 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
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".

Radio


��������
������������������onclick="document.bgColor='green'"> Fundo Verde
���������������
����������������� onclick="document.bgColor='blueviolet'"> Fundo Violeta
���������������
����������������� onclick="document.bgColor='#FFFF00'"> Fundo Amarelo



��������������� Solteiro
��������������� Casado
��������������� Tico Tico

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.



Digite um Texto


Click no Botao
�������������������������onclick="alert ('Voce digitou: ' + TstButton.Teste.value)">





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



Digite um Texto
Apague o Texto




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.



��������� onSubmit="return TestaVal()"
��������� action="http://10.0.5.2/scripts/isapielo.dll/vbloja.loja.action">
Digite um Texto
Botao Submit




No exemplo acima, o formul�rio est� sendo submetido a URL "10.0.5.2" (que � o endere�o IP
de um "Server"). Este servidor est� rodando o "Microsoft Internet Information Server". Estamos
enviando os dados a um "OLE", que est� no subdiret�rio "scripts", chamado "isapielo.dll", que tem
por objetivo fazer a conec��o com aplica��es escritas em VB. A aplica��o VB que est� sendo
chamada, � um OLE de nome "vbloja" no qual estamos acionando a classe "loja" e o m�todo
"action".
A aplica��o VB, deste exemplo, far� apenas a devolu��o dos dados recebidos pelo Server.


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:



Texto de M�ltiplas Linhas





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


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


Objeto Select2



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



Informe o seu Nome


Informe o m�s desejado


Informe o ano desejado



��������������������������onclick="Criticar()
�����������������������������������������if (DadosOk)
��������������������������������������������{alert ('Todos os Dados est�o Corretos') } ">





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


Data :
Hora :
����������
��������������������onclick="clearTimeout(ContrRelogio)">Desativa
����������
��������������������onclick="ContrRelogio = setTimeout('Hoje()', 1000)">Ativa



Escrevendo Textos Rolantes

Observe o rodap� desta p�gina.... existe uma mensagem que est� sempre rolando.
Na verdade, o texto n�o est� rolando como d� a impress�o. O que ocorre � a troca do conte�do
a cada um segundo. Para fazer isto escrevemos uma fun��o que, a cada segundo, desloca o texto
em um caracter. Ou seja: elimina o primeiro caracter, deslocando o texto, e insere um novo caracter no final do texto. Quando o novo texto � exibido obtemos o efeito apresentado.

No exemplo abaixo apresentamos o c�digo necess�rio para criar textos rolantes. Os textos ser�o
apresentados na �rea de status (rodap�) da p�gina bem como em uma caixa de texto de um formul�rio.
Inicialmente definimos as vari�veis a serem utilizadas pela fun��o e preenchemos com "brancos"
a vari�vel que conter� o texto a ser exibido, para que o texto comece a ser exibido a partir do
canto direito da caixa.
No momento em que o documento � carregado, utilizamos o evento onload para ativar a fun��o
que far� a apresenta��o dos textos.

Ex:





Apresenta��o de caixa de texto rolante





Abrindo Novas Janelas

Neste cap�tulo mostraremos como podem ser abertas novas janelas sobre uma janela contendo o documento principal.

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

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.

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

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:
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 esta 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. Quando fizermos a chamada das imagens (comando src) s� ser� necess�rio a concatena��o do nome do arquivo chamado com a raiz do path que, no exemplo, armazenamos na vari�vel de nome Local.

") �����NovaJanela.document.write ("

")
�����if (Opcao == 1)
�������{ NovaJanela.document.write ("
Logomarca Elogica

")
����������NovaJanela.document.write
�������������������("") }
�����else
�������{ NovaJanela.document.write ("
Recife Alto Astral

")
���������NovaJanela.document.write
�������������������("") }
//
�����NovaJanela.document.write ("

")
�����NovaJanela.document.write ("
�������������������������������������������������"value='Fecha Janela'" + "onclick='window.close()'>")
�����NovaJanela.document.write ("
Hosted by www.Geocities.ws

")
�����NovaJanela.document.close() }



Escolha a foto a ser apresentada na nova janela:




Elogica
Recife



�������������������onclick="if (Form1.Opcao[0].checked == true)
������������������������������������{Abrejanela(Form1.Opcao[0].value) }
���������������������������������else
�������������������������������������{Abrejanela(Form1.Opcao[1].value) } ">





Este Manual JavaScript foi desenvolvido pelo Grupo El�gica e
adaptado por Luis Carlos de Andrade Rodrigues.


Hosted by www.Geocities.ws


1