>> JavaScript <<

>>voltar<<

- Esse Guia foi elaborado para pessoas que querem aprender a contruir páginas em HTML, aconselho a primeiro ler a introdução para ter uma base sobre HTML, depois de ter essa Base a primeira coisa que a pessoa que está aprendendo quer é descobrir novos comandos, aqui neste Guia, eles estão dividos em categorias para facilitar ainda mais.
- Este Guia foi elaborado por Victor Barros Halla. Este Guia está liberada para copia (obvio) em formato eletronico, mas se trechos forem usados em outras publicações, por favor incluam de onde tiraram e quem escreveu. DISTRIBUICAO LIBERADA PARA TODOS, desde que mantido o copyright e a gratuidade. O Guia gratis e nao pode ser vendido (senao vou querer minha parte, hehehehehe).

Introdução

Operadores L�gicos

S�o operadores a serem utilizados em comandos condicionais, tais como: IF , FOR e WHILE.
Os comandos condicionais ser�o vistos mais a frente. ����

����== ����Igual
����!= �����Diferente
����> ������Maior
����>= ����Maior ou Igual
����< ������Menor
����<= ����Menor ou Igual
����&& ��E
����|| ������Ou

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.

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

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:
<script>
valor = 30
document.write ("Minha primeira linha")
document.write ("Nesta linha aparecer� o resultado de : " + (10 * 10 + valor))
</script>

A id�ia do exemplo acima � escrever duas linhas. Entretanto o m�todo write n�o insere mudan�a de linha, o que provocar� o aparecimento de apenas uma linha com os dois textos emendados.
Para evitar este tipo de ocorr�ncia, existe o m�todo writeln que escreve uma linha e espaceja para a seguinte. Entretanto, em nossos testes, este comando n�o surtiu efeito,obtendo-se o mesmo resultado do m�todo write. A solu��o encontrada para esta situa��o foi a utiliza��o do comando de mudan�a de par�grafo da linguagem Html.

Ex:
<script>
valor = 30
document.write ("

Minha primeira linha

Nesta linha aparecer� o resultado de : " + (10 * 10 + valor) + "

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.

<form>
<input type=text size=2 maxlength=2 name="Tempo"�onchange="Idade(Tempo.value)">
</form>>

Observe-se que o par�metro passado (quando ocorre o evento "onchange") foi o conte�do da caixa de texto "Tempo" (propriedade "value") e que, na fun��o, chamamos de "Anos". Ou seja, n�o existe co-rela��o entre o nome da vari�vel passada e a vari�vel de recep��o na fun��o. Apenas o conte�do � passado.

Fun��es Intr�secas

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:

Regra = new Empresas("Regra", "120", "Servi�os")
Pitaco = new Empresas("Pitaco", "35", "Software")
Corisco = new Empresas("Corisco", "42", "Conectividade")

Assim, a vari�vel Regra.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 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 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 = "Regra"
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:

• Password
• Text
• Hidden
• Checkbox
• Radio
• Button
• Reset
• Submit

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>

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:
<form name="TText">
<p>Entrada de Texto <input type=text size=20 maxlength=30 name="CxTexto" value="" onchange="alert ('Voce digitou ' + xTexto.value)">
</p>
</form>

Objeto Input HIDDEN

� um objeto semelhante ao input text, por�m, invis�vel para o usu�rio. Este objeto deve ser utilizado para passar informa��es ao "server" (quando o formul�rio for submetido) sem que o usu�rio tome conhecimento. Suas propriedades s�o: name e value.

name : Especifica o nome do objeto.
value : Armazena o conte�do do objeto

Ex:
<form name="THidden">
<input type=hidden size=20 maxlength=30 name="HdTexto" value="" >
</form>
</p>

Objeto Input CHECKBOX

S�o objetos que permitem ao usu�rio ligar ou desligar uma determinada op��o.

Suas principais propriedades s�o: name, value e checked.

name : Especifica o nome do objeto
value : Especifica o valor que ser� enviado ao "server" se o objeto estiver ligado (checked).
������������Caso�seja omitido, ser� enviado o valor default "on" .
������������Esta propriedade tamb�m serve para ativar comandos l�gicos, testando-se a condi��o de "checked".
checked : Especifica que o objeto inicialmente estar� ligado

O �nico evento associado a este objeto � onclick.

Ex:
No exemplo abaixo, criaremos um objeto input.text e tr�s objetos checkbox. O primeiro checkbox, quando ativado, transformar� o texto em caracteres min�sculos. O segundo checkbox, quando ativado, transformar� o texto em caracteres mai�sculos. O terceiro checkbox, quando ativado, dar� um aviso do conte�do que ser� recebido pelo "server" caso o formul�rio seja submetido para este.

<SCRIPT>
function AltMaiusc () {
����document.TCheck.Muda.value = document.TCheck.Muda.value.toUpperCase() ����document.TCheck.Opt1.checked = false
}
function AltMinusc () {
���document.TCheck.Muda.value = document.TCheck.Muda.value.toLowerCase() ���document.TCheck.Opt2.checked = false
}
</SCRIPT>
<p>
<form name="TCheck">
Muda Case <input type=text size=20 maxlength=20 name="Muda"> </p>
<p>
Minusculo<input type=checkbox name="Opt1" value="1" checked��onclick="if (this.checked) { AltMinusc() } ">
Maiusculo<input type=checkbox name="Opt2" value="2" onclick="if (this.checked) { AltMaiusc() } ">
Demo valor<input type=checkbox name="Opt3" onclick="if (Opt3.checked) {alert ('Server recebera = ' + Opt3.value) } ">
</p>
</form>

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
<input type=radio name="Rad" value="1" onclick="document.bgColor='green'"> Fundo Verde
���������������<input type=radio name="Rad" value="2" onclick="document.bgColor='blueviolet'"> Fundo Violeta
���������������<input type=radio name="Rad" value="3" onclick="document.bgColor='#FFFF00'"> Fundo Amarelo

���������������<input type=radio name="Rad2" value="1"> Solteiro
���������������<input type=radio name="Rad2" value="2"> Casado
���������������<input type=radio checked name="Rad2" value="3"> 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.
<p>
<form method="POST" name="TstButton">
Digite um Texto <input type=text size=30 maxlength=30 name="Teste" value="">
</p><p>
Click no Botao <input type=button name="Bteste" value="Botao de teste" onclick="alert ('Voce digitou: ' + TstButton.Teste.value)">
</p>
</form>

Objeto Input RESET

Este objeto � um bot�o que tem por finalidade, �nica, limpar os campos digitados pelo usu�rio, restaurando o conte�do do formul�rio para os valores iniciais.
� 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.

<form method="POST" name="TesteRes">
Digite um Texto<input type=text size=10 maxlength=20 name="Teste" value="">
Apague o Texto <input type=reset name="Bres" value="Reset">
</form>
</p>

Objeto Input SUBMIT

Este objeto � um bot�o que tem por finalidade submeter (enviar) o conte�do dos objetos do formul�rio ao "server". O formul�rio ser� submetido � URL especificada na propriedade "action" do formul�rio.
Suas propriedades s�o: name e value.

name : Especifica o nome do objeto.
value : Especifica o nome que aparecer� sobre o bot�o

O �nico evento associado a este objeto � onclick. Embora se possa atrelar l�gica a este evento, n�o se pode evitar que o formul�rio seja submetido, portanto, n�o � aconselhavel o seu uso. Mais seguro e mais �til � a utiliza��o da propriedade onSubmit do formul�rio. Este permite que se atrele l�gica e decida-se pela submiss�o ou n�o.

Ex.
<script>
function TestaVal() {
if (document.TesteSub.Teste.value == "") {
��� alert ("Campo nao Preenchido...Form nao Submetido")
��� return false }
else {
��� alert ("Tudo Ok....Form Submetido")
��� return true } }
</script>

<form method="POST" name="TesteSub" onSubmit="return TestaVal()" ���� action="http://10.0.5.2/scripts/isapielo.dll/vbloja.loja.action">
Digite um Texto <input type=text size=10 maxlength=10 name="Teste" value="">
Botao Submit <input type=submit name="Bsub" value="Manda p/Server">
</form>

No exemplo acima, o formul�rio est� sendo submetido a URL "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:
<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>

Objeto SELECT

� um objeto para entrada de op��es, onde o usu�rio, a partir de uma lista de alternativas, seleciona uma ou mais op��es. Suas principais propriedades s�o: name, size, value e multiple.

name : Especifica o nome do objeto
size : Especifica a quantidade de op��es que aparecer�o na tela simultaneamente
value : Associa um valor ou string para cada op��o (opcional)
multiple : Especifica a condi��o de m�ltipla escolha (usando-se a tecla Ctrl)

Para utiliza��o deste objeto � importante o conhecimento de outras propriedades associadas:

Objeto.length : Retorna a quantidade de op��es existentes na lista
Objeto.selectedindex : Retorna o "index" do objeto selecionado (primeiro = 0) Objeto.options[index].text : retorna o texto externo associado a cada op��o Objeto.options[index].value : retorna o texto interno (value) associado a cada op��o Objeto.options[index].selected : retorna verdadeiro ou falso

Os eventos associados a este objeto s�o: onchange, onblur e onfocus.

Ex1:
Neste exemplo � importante observar os seguintes aspectos:
a) A lista permite apenas uma sele��o
b) A quarta op��o aparecer� inicialmente selecionada (propriedade "selected")
c) N�o utilizamos a propriedade "value". Assim, a propriedade "text" e a propriedade "value" passam a ter o mesmo valor, ou seja, o valor externo que aparece na tela.

<script>
function Verselect(Campo) {
Icombo = Campo.selectedIndex
alert ("Voce escolheu " + Campo.options[Icombo].text) }
</script>
<p>
Objeto Select <option>Opcao 1
<option>Opcao 2
<option>Opcao 3
<option selected>Opcao 4 (recomendada)
<option>Opcao 5
<option>Opcao 6
</select>
</p>

Ex2:
Neste exemplo � importante observar os seguintes aspectos:
a) A lista permite m�ltiplas sele��es
b) Utilizamos a propriedade "value". Assim as propriedades "text" e "value" t�m valores diferentes: text retornar� Escolha 1 a Escolha 4 e value retornar� List1 a List4.
c) O par�metro passado, quando da ocorr�ncia do evento onblur, foi this. Esta diretiva significa que estamos passando este objeto.

<script>
function Vermult(Lista) {
var opcoes = ""
for (i = 0 ; i < Lista.length ; i++) {
if (Lista.options[i].selected) {
opcoes += (Lista.options[i].value + ", ") }
}
alert ("As opcoes escolhidas foram : " + opcoes) }
</script>
<p>
Objeto Select2 <select name="Combo2" size=4 multiple onblur="Vermult(this)">
<option value="List1">Escolha 1 </option>
<option value="List2">Escolha 2 </option>
<option value="List3">Escolha 3 </option>
<option value="List4">Escolha 4 </option>
</select>
</p>

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.
<body onload="document.TstFocus.Nome.focus()">
<script>
DdosOk = true
function Criticar() {
��DadosOk = false
��DataAtual = new Date()
��MesAtual = DataAtual.getMonth() + 1
��AnoAtual = DataAtual.getYear() + 1900
��Nome = document.TstFocus.Nome.value
��Mes = parseInt(document.TstFocus.Mes.value)
��Ano = parseInt (document.TstFocus.Ano.value)
//
��if (Ano < 1900)
�����{Ano = Ano + 1900 }
��if (Nome == "")
����{ alert ("Informe o seu Nome, N�o deixe em branco")
������document.TstFocus.Nome.focus()
������return }
��if (Mes < 1 || Mes > 12)
����{ alert ("O M�s informado n�o � v�lido, informe corretamente") ������document.TstFocus.Mes.focus()
������document.TstFocus.Mes.select()
������return }
��if (Ano == AnoAtual && Mes > MesAtual)
����{ alert ("O per�odo informado � superior a data atual")
������document.TstFocus.Mes.focus()
������document.TstFocus.Mes.select()
������return }
��if (Ano < 1996 || Ano > AnoAtual)
����{ alert ("O Ano informado n�o � v�lido, informe corretamente") ������document.TstFocus.Ano.focus()
������document.TstFocus.Ano.select()
������return }
��DadosOk = true
}
</script>

<form name="TstFocus" method="POST">
<p>
Informe o seu Nome <input type=text size=30 maxlength=30 name="Nome">
</p>
<p> Informe o m�s desejado <input type=text size=2 maxlength=2 name="Mes">
</p>
<p> Informe o ano desejado <input type=text size=4 maxlength=4 name="Ano">
</p>
<p<input type=button name="Testa" value="Testar Validade" onclick="Criticar() if (DadosOk) {alert ('Todos os Dados est�o Corretos') } ">
</p>
</form>
</body>

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.

<script>
function Hoje() {
ContrRelogio = setTimeout ("Hoje()", 1000)
Hr = new Date()
dd = Hr.getDate()
mm = Hr.getMonth() + 1
aa = Hr.getYear()
hh = Hr.getHours()
min = Hr.getMinutes()
seg = Hr.getSeconds()
DataAtual = ((dd < 10) ? "0" + dd + "/" : dd + "/")
DataAtual += ((mm < 10) ? "0" + mm + "/" + aa : mm + "/" + aa)
HoraAtual = ((hh < 10) ? "0" + hh + ":" : hh + ":")
HoraAtual += ((min < 10) ? "0" + min + ":" : min + ":")
HoraAtual += ((seg < 10) ? "0" + seg : seg)
document.DataHora.Data.value=DataAtual
document.DataHora.Hora.value=HoraAtual
}
//
function CriaArray (n) {
this.length = n }
//
NomeDia = new CriaArray(7)
NomeDia[0] = "Domingo"
NomeDia[1] = "Segunda"
NomeDia[2] = "Ter�a"
NomeDia[3] = "Quarta"
NomeDia[4] = "Quinta"
NomeDia[5] = "Sexta"
NomeDia[6] = "S�bado"
//
NomeMes = new CriaArray(12)
NomeMes[0] = "Janeiro"
NomeMes[1] = "Fevereiro"
NomeMes[2] = "Mar�o"
NomeMes[3] = "Abril"
NomeMes[4] = "Maio"
NomeMes[5] = "Junho"
NomeMes[6] = "Julho"
NomeMes[7] = "Agosto"
NomeMes[8] = "Setembro"
NomeMes[9] = "Outubro"
NomeMes[10] = "Novembro"
NomeMes[11] = "Dezembro"
//
Data1 = new Date()
dia = Data1.getDate()
dias = Data1.getDay()
mes = Data1.getMonth()
ano = Data1.getYear()
document.write ("Recife, " + NomeDia[dias] + " " + dia + " de " + NomeMes[mes] + " de " + (ano + 1900 ) )
</script>
<form name="DataHora">
Data : <input type=text size=10 maxlength=10 name="Data">
Hora : <input type=text size=10 maxlength=10 name="Hora">
����������<input type=radio name="Botao" value="Para Relogio" checked��onclick="clearTimeout(ContrRelogio)">Desativa
����������<input type=radio name="Botao" value="Ativa Relogio" onclick="ContrRelogio = setTimeout('Hoje()', 1000)">Ativa
</form>

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:�
<html>
<script>
/* ----- Apresenta uma caixa de texto rolante no rodap� da p�gina
� */�
var Texto = "Victor Barros Halla - Manual Java Script - Principais Comandos............"
� var Tamanho = Texto.length�
var Trab = Texto.length�
var Trab1=0�
var Temp = ""�
var Mensagem=""�
var CtrTime=""�
for (x=0 ; x <= 200 ; x++) {
� ����� Mensagem += " " }�
//�
function Mostra() {
� �� if (Trab <= Tamanho && Trab> 0) {
� ������ Temp = Mensagem.substring(1, Mensagem.length)�
������ Mensagem = Temp + Texto.substring(Trab1,Trab1 + 1)�
������ Trab--�
������ Trab1++ }�
� else {�
������ Trab = Texto.length
� ������ Trab1 = 0 }�
� window.status = Mensagem�
� document.Form1.Letreiro.value = Mensagem.substring(150, Mensagem.length)
� � CtrTime = setTimeout("Mostra()", 100)�
}�
</script>
� <body onload="CtrTime = setTimeout('Mostra()', 100)">
� <form method="POST" name=Form1>�
<p>
<font color="#008000">
<font size=4>�
Apresenta��o de caixa de texto rolante
</font> </p>�
<p><input type=text size=50 maxlength=100 name="Letreiro"></p>�
</form>�
</body>�
</html>�

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.�
<href="Eventos.htm" target="Principal">
� Isto far� com que o arquivo html Eventos.htm seja aberto dentro do frame de nome Principal

A simples chamade de outras telas (documentos) � feita atrav�s do link para o documento desejado.

Ex.�

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

• toolbar - Cria uma barra de ferramentas tipo "Back", "Forward", etc.
• location - Abre a barra de location do browse�
• directories - Abre a barra de ferramentas tipo "What's New", "Handbook", etc.
• status - Abre uma barra de status no rodap� da janela
• scrollbars - Abre barras de rolamento vertical e horizontal
• menubar - Cria uma barra de menu tipo "File", "Edit", etc.
• resizable - Permite ao usu�rio redimencionar a janela
• width - Especifica a largura da janela, em pixels
• height - Especifica a altura da janela, em pixels

Fim
Espero que este tutorial ajude a muitas pessoas que necessitam aprender Java Script, ou simplesmente pessoas que querem ir um pouco mais loge na constru��o de p�ginas HTML.

>>voltar<<