Manual do Javascript

7/25/2019 Manual do Javascript

1/22

www.nossositenaweb.cjb.net 1

Introduo Operadores lgicos

Operadores matemticos

Controles especiais

Controles condicionais Eventos

Criando variveis

Escrevendo no documento

Mensagens

Criando funes Funes intrinsecas Criando novas instncias

Manipulando arrays (matrzes)

Manipulando strings

Manipulando datas Interagindo com o usurio

Usando Time e Date

Abrindo novas janelas

INTRODUOJavaScript uma linguagem que permite injetar lgica em pginas escritas em HTML

(HiperText Mark-up Language). As pginas HTML podem ser escritas utilizando-se editores detexto, como

o NotePad, Write, etc. Porm, existem editores prprios para gerar HTML, tais como HotDog e

(mais recomendado) Microsoft FrontPage.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 ofim do set de JavaScript, da seguinte forma:

Set de instrues

Este procedimento pode ser adotado em qualquer local da pgina. Entretanto, para melhor

visualizao e facilidade de manuteno, recomenda-se que toda a lgica seja escrita no incio

do documento, atravs da criao de funes a serem invocadas quando se fizer necessrio(normalmente atreladas a eventos).Se a lgica escrita a partir de um determinado evento, no necessrio o uso dos comandos e .

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 coma forma apresentada ao longo deste manual. Caso seja cometido algum erro de sintaxe quando
http://www.supertrafego.com/clique.asp?clique=50http://www.supertrafego.com/clique.asp?clique=48http://www.supertrafego.com/clique.asp?clique=47http://www.supertrafego.com/clique.asp?clique=49http://www.supertrafego.com/apostilas_tutoriais.asphttp://www.nossositenaweb.cjb.net/


2/22

2

da escrita de um comando, o JavaScript interpretar, o que seria um comando, como sendo o

nome de uma varivel.ndice

OPERADORES LGICOS

S

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

= = Igual!= Diferente

> Maior

>= Maior ou Igual< Menor


3/22


Ex. alert ("Cuidado com o uso de \" ou \' em uma string") ndice

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 IFif (condio){ ao para condio satisfeita }[ else{ ao para condio no satisfeita } ]Ex.

if (Idade < 18)

{Categoria = "Menor" }else

{Categoria = "Maior"}Comando FORfor ( [inicializao/criao de varivel de controle ;][condio ;][incremento da varivel de controle] ){ ao }Ex.

for (x = 0 ; x 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 umaao (se determinada condio ocorrer) mas volta para o loop.

Diretivas/condies entre [ ] significam que so opcionais.ndice

EVENTOS

So fatos que ocorrem durante a execuo do sistema, a partir dos quais o programador pode


4/22

4

definir aes a serem realizadas pelo programa.Abaixo apresentamos a lista dos eventos possveis, indicando os momentos em que os mesmospodem ocorrer, bem como, os objetos passveis de sua ocorrncia.

onload - Ocorre na carga do documento. Ou seja, socorre no BODY do documento.

onunload - Ocorre na descarga (sada) do documento. Tambm socorre no BODY.

onchange - Ocorre quando o objeto perde o focus e houve mudana de conte

do.vlido para os objetos Text, Select e Textarea.

onblur - Ocorre quando o objeto perde o focus, independente de ter havido mudana.vlido para os objetos Text, Select e Textarea.

onfocus - Ocorre quando o objeto recebe o focus.

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.

v

lido para os objetos Text e Textarea.onsubmit - Ocorre quando um boto tipo Submit recebe um click do mouse.vlido apenas para o Form. ndice

CRIANDO VARIVEISA varivelcriada automaticamente, pela simples associao de valores a mesma.Ex. 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 funoso Locais e referenciveis apenas dentro da funo. As variveis criadas fora de funes soGlobais, podendo serem referenciadas em qualquer parte do documento.Desta forma, variveis que precisam ser referenciadas por vrias funes ou em outra parte dodocumento, precisam ser definidas como globais.

Embora no seja recomendvel, em uma funo, pode ser definida uma varivel local com omesmo nome de uma varivel global. Para isso utiliza-se o mtodo de definio var.Ex. Varivel Global : MinhaVariavel = ""

Varivel Local : var MinhaVariavel = ""ndice

ESCREVENDONODOCUMENTO

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

valor = 30document.write ("Minha primeira linha")

document.write ("Nesta linha aparecero resultado de : " + (10 * 10 + valor))
http://www.supertrafego.com/clique.asp?clique=50http://www.supertrafego.com/clique.asp?clique=48http://www.supertrafego.com/clique.asp?clique=47http://www.supertrafego.com/clique.asp?clique=49http://www.supertrafego.com/apostilas_tutoriais.asp


5/22


A idia do exemplo acima escrever duas linhas. Entretanto o mtodo write no insere mudanade linha, o que provocaro 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 m

todo write. A soluo encontrada para esta situao foi a utilizao do comandode mudana de pargrafo da linguagem Html.Ex:

valor = 30

document.write ("

Minha primeira linha
")document.write ("
Nesta linha aparecero resultado de : " + (10 * 10 + valor) + "
")
Isto resolve a questo da mudana de linha, porm, vai gerar uma linha em branco, entre cadalinha, por se tratar de mudana de pargrafo. Caso no seja desejado a existncia da linha embranco, a alternativa utilizar o comando Html
que apenas muda de linha.

Ex:valor = 30

document.write ("
Minha primeira linha")

document.write ("
Nesta linha aparecero resultado de : " + (10 * 10 + valor) )ndice

MENSAGENS

Existem trs formas de comunicao com o usurio atravs de mensagens.Apenas Observao.alert ( mensagem )Ex.

alert ("Certifique-se de que as informaes esto corretas")Mensagem que retorna confirmao de OK ou CANCELARconfirm (mensagem)

Ex.

if (confirm ("Algo esterrado...devo continuar??"))

{ alert("Continuando") }else

{ alert("Parando") }

Recebe mensagem via caixa de texto InputReceptor = prompt ("Minha mensagem", "Meu texto")

Onde:

Receptor o campo que vai receber a informao digitada pelo usurioMinha mensagema mensagem que vai aparecer como Label da caixa de input

Meu texto um texto, opcional, que aparecerna linha de digitao do usurioEx.Entrada = prompt("Informe uma expresso matemtica", "")

Resultado = eval(Entrada)


6/22

6

document.write("O resultado = " + Resultado)ndice

CRIANDO FUNESUma funo um set de instrues, que sdevem 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 deidade, 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 formul

rio, na qual seja informadaa idade e, a cada informao, a funo seja acionada.

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 onome da varivel passada e a varivel de recepo na funo. Apenas o

contedopassado.ndice

FUNES INTRNSECASSo funes embutidas na prpria linguagem. A sintaxe geral a seguinte:Result = funo (informao a ser processada)- eval = Calcula o contedo da string

- parseInt - Transforma string em inteiro

- parseFloat - Transforma string em nmero com ponto flutuante- date() - Retorna a data e a hora (veja o captulo 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 contedo da string, que

tambm pode ser o contedo (value) de uma caixa de texto.

- Funes tipicamente Matemticas:Math.abs(nmero) - retorna o valor absoluto do nmero (ponto flutuante)

Math.ceil(nmero) - retorna o prximo valor inteiro maior que o nmero

Math.floor(nmero) - retorna o prximo valor inteiro menor que o nmeroMath.round(nmero) - retorna o valor inteiro, arredondado, do nmero

Math.pow(base, expoente) - retorna o clculo do exponencial


7/22


Math.max(nmero1, nmero2) - retorna o maior nmero dos dois fornecidos

Math.min(nmero1, nmero2) - retorna o menor nmero dos dois fornecidosMath.sqrt(nmero) - retorna a raiz quadrada do nmero

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(nmero) - retorna o arco seno de um nmero (em radianos)

Math.cos(nmero) - retorna o cosseno de um nmero (anglo em radianos)Math.acos(nmero) - retorna o arco cosseno de um nmero (em radianos)

Math.tan(nmero) - retorna a tangente de um nmero (anglo em radianos)

Math.atan(nmero) - retorna o arco tangente de um nmero (em radianos)Math.pi retorna o valor de PI (aproximadamente 3.14159)

Math.log(nmero) - retorna o logartmo de um nmero

Math.E - retorna a base dos logartmos naturais (aproximadamente 2.718)

Math.LN2 - retorna o valor do logartmo de 2 (aproximadamente 0.693)Math.LOG2E - retorna a base do logartmo de 2 (aproximadamente 1.442)

Math.LN10 retorna o valor do logartmo de 10 (aproximadamente 2.302)Math.LOG10E - retorna a base do logartmo de 10 (aproximadamente 0.434)

Observao:Em todas as funes, quando apresentamos a expresso "(nmero)", na verdade queremosnos referir a um argumento que serprocessado pela funo e que poderser: um nmero,

uma varivel ou o contedo de um objeto (propriedade value).ndice

CRIANDONOVAS INSTNCIAS

Atravs do operador new podem ser criadas novas instncias a objetos jexistentes, mudando o

seu contedo, porm, mantendo suas propriedades.

A sintaxe geral a seguinte:NovoObjeto = new ObjetoExistente (parmetros)

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, porm, com o contedo de uma nova data.

Ex3:

Suponha a existncia do seguinte objeto chamado Empresasfunction Empresas (Emp, Nfunc, Prod)

{ this.Emp = Emp

this.Nfunc = Nfuncthis.Prod = Prod }

Podemos criar novas instncias, usando a mesma estrutura, da seguinte forma:

Elogica = new Empresas("Elogica", "120", "Servios")Pitaco = new Empresas("Pitaco", "35", "Software")

Corisco = new Empresas("Corisco", "42", "Conectividade")


8/22

8

Assim, a varivel Elogica.Nfunc tero seu contedo igual a 120ndice

MANIPULANDOARRAYS

O JavaScript no tem um tipo de dado ou objeto para manipular arrays. Por isso, para trabalhar

com arrays

necess

rio 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


9/22


Obs:

importante lembrar que, embora os exemplos estejam com indexadores fixos, os indexadorespodem ser referncias ao contedo de variveis.ndice

MANIPULANDO STRING's

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 - retorna o tamanho da string (quantidade de bytes)

string.charAt(posio) - 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, index2) - retorna o contedo da string que corresponde ao intervalo

especificado. Comeando no caracter posicionado em index1 e terminando no caracterimediatamente anterior ao valor especificado em index2.

Ex.Todo = "Elogica"Parte = Todo.substring(1, 4)

(A varivel Parte recebera palavra log)

string.toUpperCase() - Transforma o contedo da string para maisculo (Caixa Alta)string.toLowerCase() - Transforma o contedo da string para minsculo (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 %) ndice

MANIPULANDODATAS

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

Hora:Minuto:Segundo e Ano

Ex.Fri May 24 16:58:02 1996

Para se obter os dados separadamente, existem os seguintes mtodos:

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

getDay() - Obtm o dia da semana (0 a 6)getMonth() - Obtm o ms (numrico de 0 a 11)

getYear() - Obtm o ano

getHours() - Obtm a hora (numrico de 0 a 23)getMinutes() - Obtm os minutos (numrico de 0 a 59)

getSeconds() - Obtm os segundos (numrico de 0 a 59)

No exemplo abaixo obteremos o dia da semana. Para tal, utilizaremos a varivel DataTodapara armazenar data/hora e a varivel DiaHoje para armazenar o nmero 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 varivel DiaHoje como indexador.


10/22

10

function CriaTab (n) {

this.length = nfor (var x = 1 ; x


11/22


o objeto para entrada de Senhas de acesso (password). Os dados digitados neste objeto so

criptografados e, sso interpretados (vistos) pelo "server", por razes de segurana.Suas principais propriedades so: type, size, maxlength, name e value.

type=password : Especifica um campo para entrada de senha. Os dados digitados so

substituidos (na tela) por "*".

size : Especifica o tamanho do campo na tela.maxlength : Especifica a quantidade mxima de caracteres permitidos.

name : Especifica o nome do objetovalue : Armazena o contedo digitado no campo.

Os eventos associados a este objeto so: 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 serutilizado para passar informaes ao "server" (quando o formulrio for submetido) sem que o

usurio tome conhecimento. Suas propriedades so: name e value.

name : Especifica o nome do objeto.

value : Armazena o contedo do objetoEx:

Objeto Input CHECKBOX

So objetos que permitem ao usurio ligar ou desligar uma determinada opo.Suas principais propriedades so: name, value e checked.

name : Especifica o nome do objeto

value : Especifica o valor que serenviado ao "server" se o objeto estiver ligado (checked).Caso seja omitido, serenviado o valor default "on" .

Esta propriedade tambm serve para ativar comandos lgicos, testando-se a condiode "checked".

checked : Especifica que o objeto inicialmente estarligadoO nico evento associado a este objeto onclick.

Ex:

No exemplo abaixo, criaremos um objeto input.text e trs objetos checkbox. O primeirocheckbox, quando ativado, transformaro texto em caracteres minsculos. O segundo checkbox,

quando ativado, transformaro texto em caracteres maisculos. O terceiro checkbox, quando

ativado, darum aviso do contedo que serrecebido pelo "server" caso o formulrio sejasubmetido para este.

function AltMaiusc () {document.TCheck.Muda.value = document.TCheck.Muda.value.toUpperCase()

document.TCheck.Opt1.checked = false


12/22

12

}

function AltMinusc () {document.TCheck.Muda.value = document.TCheck.Muda.value.toLowerCase()

document.TCheck.Opt2.checked = false

}

Muda Case

Minusculo

Maiusculo

Demo valor

Existe ainda uma outra forma de manipular este objeto, em forma de array, que a seguinte:

form.elements[index].propriedade. Esta no uma boa forma porque o index nico dentro de

um formulrio, exigindo muito cuidado quando se acrescenta ou se deleta um objeto, pois, neste

caso, haverum natural deslocamento do index, podendo comprometer a lgica.Objeto Input RADIO

So objetos que permitem ao usurio a escolha de apenas uma alternativa, diante de uma srie de

opes.Suas principais propriedades so: name, value e checked.

name : Especifica o nome do objeto. Para caracterizar uma mesma srie de opes, todos osobjetos desta srie tm que ter o mesmo "name".value : Especifica o valor que serenviado ao "server" se o objeto estiver ligado (checked). Caso

seja omitido, serenviado o valor default "on" . Esta propriedade tambm serve para

ativar comandos lgicos, testando-se a condio de "checked".checked : Especifica que o objeto inicialmente estarligadoPara utilizao deste objeto importante o conhecimento de outras propriedades associadas:Objeto.length : Retorna a quantidade de opes existentes na listaObjeto.[index].value : retorna o texto (value) associado a cada opoObjeto.[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 acor de fundo do documento atual. O segundo tem o objetivo levar informaes ao "server".

Radio

Fundo Verde


13/22


onclick="document.bgColor='blueviolet'"> Fundo Violeta

Fundo Amarelo

Objeto Input BUTTON

Este objeto tem por finalidade criar um bot

o ao qual se possa atrelar operaes l

gicas, a seremexecutadas quando o mesmo receber um click.

Suas propriedades so: name e value.name : Especifica o nome do objeto.

value : Especifica o nome que aparecersobre o boto

O nico evento associado a este objeto onclick.Ex.

Digite um Texto

Click no Botao

Objeto Input RESETEste objeto um boto que tem por finalidade, nica, limpar os campos digitados pelo usurio,

restaurando o contedo do formulrio para os valores iniciais.

recomendvel a utilizao deste objeto, para facilitar o usurio a limpar suas informaes, umavez que a utilizao da opo "reload" do "browser" (que seria uma forma) no perde asinfromaes digitadas.Suas propriedades so: name e value.

name : Especifica o nome do objeto.value : Especifica o nome que aparecersobre o boto

O nico evento associado a este objeto onclick.

Ex.

Digite um Texto

Apague o Texto

Objeto Input SUBMITEste objeto um boto que tem por finalidade submeter (enviar) o contedo dos objetos do

formulrio ao "server". O formulrio sersubmetido URL especificada na propriedade "action"

do formulrio.Suas propriedades so: name e value.

name : Especifica o nome do objeto.

value : Especifica o nome que aparecersobre o botoO nico evento associado a este objeto onclick. Embora se possa atrelar lgica a este evento,

no se pode evitar que o formulrio seja submetido, portanto, no aconselhavel o seu uso. Mais


14/22

14

seguro e mais til a utilizao da propriedade onSubmit do formulrio. Este permite que seatrele lgica e decida-se pela submisso ou no.Ex.

function TestaVal() {

if (document.TesteSub.Teste.value == "") {alert ("Campo nao Preenchido...Form nao Submetido")

return false }else {

alert ("Tudo Ok....Form Submetido")

return true } }

Digite um Texto Botao Submit

No exemplo acima, o formulrio estsendo submetido a URL "10.0.5.2" (que o endereo IPde um "Server"). Este servidor estrodando o "Microsoft Internet Information Server". Estamos

enviando os dados a um "OLE", que estno subdiretrio "scripts", chamado "isapielo.dll", que

tem

por objetivo fazer a coneco com aplicaes escritas em VB. A aplicao VB que estsendochamada, um OLE de nome "vbloja" no qual estamos acionando a classe "loja" e o mtodo

"action".

A aplicao VB, deste exemplo, farapenas a devoluo dos dados recebidos pelo Server.Objeto TEXTAREA

um objeto para entrada de dados em um campo de mltiplas linhas. Suas principais

propriedades so: name, rows e cols.name : Especifica o nome do objeto

rows : Especifica a quantidade de linhas que aparecero na tela

cols : Especifica a quantidade de caracteres que aparecero em cada linha

value : Acessa o contedo do campo via programao.Os eventos associados a este objeto so: onchange, onblur, onfocus e onselect.

Ex:

Texto de Mltiplas Linhas

Primeira linha do texto inicialsegunda linha do texto inicial
Objeto SELECThttp://www.supertrafego.com/clique.asp?clique=50http://www.supertrafego.com/clique.asp?clique=48http://www.supertrafego.com/clique.asp?clique=47http://www.supertrafego.com/clique.asp?clique=49http://www.supertrafego.com/apostilas_tutoriais.asp


15/22


um objeto para entrada de opes, onde o usurio, a partir de uma lista de alternativas,seleciona uma ou mais opes.Suas principais propriedades so: name, size, value e multiple.

name : Especifica o nome do objeto

size : Especifica a quantidade de opes que aparecero na tela simultaneamente

value : Associa um valor ou string para cada opo (opcional)multiple : Especifica a condio de mltipla escolha (usando-se a tecla Ctrl)Para utilizao deste objeto importante o conhecimento de outras propriedades associadas:Objeto.length : Retorna a quantidade de opes existentes na listaObjeto.selectedindex : Retorna o "index" do objeto selecionado (primeiro = 0)

Objeto.options[index].text : retorna o texto externo associado a cada opoObjeto.options[index].value : retorna o texto interno (value) associado a cada opoObjeto.options[index].selected : retorna verdadeiro ou falso

Os eventos associados a este objeto so: onchange, onblur e onfocus.

Ex1:Neste exemplo importante observar os seguintes aspectos:

a) A lista permite apenas uma seleob) A quarta opo aparecerinicialmente selecionada (propriedade "selected")c) No 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.

function Verselect(Campo) {

Icombo = Campo.selectedIndex

alert ("Voce escolheu " + Campo.options[Icombo].text) }

Objeto Select

Opcao 1Opcao 2

Opcao 3

Opcao 4 (recomendada)Opcao 5

Opcao 6
Ex2:
Neste exemplo importante observar os seguintes aspectos:

a) A lista permite mltiplas seleesb) Utilizamos a propriedade "value". Assim as propriedades "text" e "value"

tm valores diferentes: text retornarEscolha 1 a Escolha 4 e value

retornarList1 a List4.c) O parmetro passado, quando da ocorrncia do evento onblur, foi this.

Esta diretiva significa que estamos passando este objeto.

function Vermult(Lista) {

var opcoes = ""


16/22

16

for (i = 0 ; i < Lista.length ; i++) {

if (Lista.options[i].selected) {opcoes += (Lista.options[i].value + ", ") }

}

alert ("As opcoes escolhidas foram : " + opcoes) }

Objeto Select2 Escolha 1

Escolha 2

Escolha 3 Escolha 4

Focando um ObjetoEste mtodo 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 umafuno.Observe que atagora o usurio tinha que dar um "Click" para focar o objeto desejado.

De forma semelhante existe o mtodo "Select". Este mtodo marca o contedo do objeto com

uma tarja roxa, permitindo ao usurio, em caso de substituio do contedo do campo, no terque deletar o contedo anterior, pois, com este mtodo, a deleo se dde forma automticaquando da digitao do novo contedo.Os mtodos "Focus" e "Select" podem ser utilizados nos seguintes objetos:

password, select, text e textareaNo exemplo abaixo, utilizaremos o evento onload para setar o focus para o primeiro objeto do

formulrio e os mtodos focus e select para, na rotina de crtica dos dados, focar o objeto que

contiver erro de preenchimento.Ex.

DdosOk = true

function Criticar() {

DadosOk = false

DataAtual = new Date()MesAtual = DataAtual.getMonth() + 1

AnoAtual = DataAtual.getYear() + 1900

Nome = document.TstFocus.Nome.valueMes = parseInt(document.TstFocus.Mes.value)

Ano = parseInt (document.TstFocus.Ano.value)

//if (Ano < 1900)

{Ano = Ano + 1900 }

if (Nome == ""){ alert ("Informe o seu Nome, No deixe em branco")

document.TstFocus.Nome.focus()


17/22


return }

if (Mes < 1 || Mes > 12){ alert ("O Ms informado no vlido, informe corretamente") document.TstFocus.Mes.focus()

document.TstFocus.Mes.select()

return }

if (Ano == AnoAtual && Mes > MesAtual){ alert ("O perodo informado superior a data atual")

document.TstFocus.Mes.focus()document.TstFocus.Mes.select()

return }

if (Ano < 1996 || Ano > AnoAtual){ alert ("O Ano informado no vlido, informe corretamente") document.TstFocus.Ano.focus()

document.TstFocus.Ano.select()

return }

DadosOk = true}

Informe o seu Nome

Informe o ms desejado

Informe o ano desejado

ndice

USANDOTIMER e DATE

um mtodo que permite a programao para que uma determinada ao socorra aps otranscurso de um determinado tempo.

Varivel = setTimeout ("ao", tempo)Onde:

Varivel uma varivel apenas para controle do timer

ao a ao que se quer realizar.tempo o tempo de espera para que a ao ocorra, em milisegundos.Obs:

importante observar que a ao socorreruma vez. Para que a ao volte a ocorrer, sernecessrio repetir o comando dentro da ao, obtendo-se, assim, um LOOP.Para interromper um LOOP, provocado pela forma acima, deve-se utilizar o seguinte mtodo:


18/22

18

clearTimeout (Varivel)

Onde:Varivel o nome da varivel de controle do timer.

Abaixo encontra-se um exemplo de um formulrio que apresenta a data e hora atual, atualizando

os dados a cada um segundo, tendo dois botes de rdio que tem a funo de ativar e desativar a

atualizao dos dados. Apresenta tamb

m, fora do formul

rio, a data contendo dia e m

s porextenso.

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] = "Tera"NomeDia[3] = "Quarta"

NomeDia[4] = "Quinta"NomeDia[5] = "Sexta"

NomeDia[6] = "Sbado"

//NomeMes = new CriaArray(12)

NomeMes[0] = "Janeiro"

NomeMes[1] = "Fevereiro"NomeMes[2] = "Maro"NomeMes[3] = "Abril"

NomeMes[4] = "Maio"NomeMes[5] = "Junho"

NomeMes[6] = "Julho"


19/22


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

Data :

Hora : Desativa

Ativandice

ABRINDO NOVAS JANELAS

Neste captulo mostraremos como podem ser abertas novas janelas sobre uma janela contendo o

documento principal.

importante no confundir esta forma de abrir janelas com a diviso da tela em vrias partes, oumesmo com a chamada de outras pginas. Para que no existam dvidas, explicaremos um pouco

sobre estes dois outros mtodos.

A diviso de uma tela em vrias janelas contendo documentos diferentes feita atravs do objetoFRAME 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

atravs da especificao dos parmetros: % da tela na vertical (cols), % da tela na horizontal(rows) e nome de cada frame. Uma vez criado o FrameSet poderemos abrir documentos distintosem cada Frame. Para fazer isto, acrescente ao link do documento a diretiva target=nome do

frame.

Ex.

Isto farcom que o arquivo html Eventos.htm seja aberto dentro do frame de nome Principal

A simples chamade de outras telas (documentos) feita atravs do link para o documentodesejado.

Ex.

Isto farcom que o arquivo html Eventos.htm seja aberto em substituio a tela existente.


20/22

20

Bem, voltemos ao nosso caso que a abertura de janelas sobre um documento. Isto feito

atravs de comandos JavaScript, que permitem: Abrir uma janela, Abrir um documento dentrodesta janela, Escrever o contedo da janela, Fechar a janela e Fechar o documento.

Abrindo a Janela

A sintaxe geral deste mtodo a seguinte:

Variavel = window.open ("Url", "Nome da janela", "Opes")Onde:Variavel - Nome que seratribuido como propriedade da janela.Url - Endereo Internet onde a janela seraberta. Normalmente voce estarutilizando a suaprpria Url, neste caso, preencha com "".

Nome da Janela - o nome que aparecerno top da janela (Ttulo)Opes - So as opes que definem as caractersticas 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 rodapda janela

scrollbars - Abre barras de rolamento vertical e horizontalmenubar - Cria uma barra de menu tipo "File", "Edit", etc.

resizable - Permite ao usurio redimencionar a janela

width - Especifica a largura da janela, em pixels

height - Especifica a altura da janela, em pixelsTodas as opes (exceto width e height) so boleanas e podem ser setadas de duas formas.Exemplo: "toolbar" ou "toolbar=1") so a mesma coisa. Se nada for especificado, entende-se que

todas as opes esto ligadas; Caso seja especificada qualquer opo, serentendido que estoligadas apenas as opes informadas.As opes devem ser informadas separadas por vrgula, sem espao 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 varivel associada ao mtodo window.open

Escrevendo no DocumentoPara 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 mtodo:Variavel.document.write ("window.close()")

Fechando o Documento

Para fechar o documento, utilize o seguinte mtodo:Variavel.document.close ()

A seguir, apresentamos um exemplo no qual estamos abrindo um documento onde o usurio

escolheruma opo (Elgica ou Recife) e darum Click em um boto (Nova Janela). Nestemomento seraberta uma nova janela que contera foto escolhida pelo usurio e um boto que,

ao receber o Click, fechara janela.

Normalmente, qualquer href ou src dentro de uma pgina, por padro, acessa o arquivo ou aimagem no mesmo diretrio onde esta pgina atual, a menos que seja especificado um novo

caminho (Path).


21/22


No caso de abertura de uma nova janela, atrav s do mtodo window.open, as verses mais

antigas dos browses no conseguem "ver" o Path, sendo necessria a completa informao docaminho (path) onde o arquivo ou imagem esto armazenados, em todas as chamadas dos

comandos Html href ou src.

Observe que na funo estamos utilizando dois novos mtodos:

navigator.appVersion para verificarmos a vers

o do browse que esta sendo utilizadodocument.location. para obtermos o Path da localizao do arquivo Html que estcorrentementeem uso.No exemplo abaixo estamos, inicialmente, identificando a verso do browse.Caso seja antiga,

para no escrevermos todo o caminho a cada chamada e ainda, considerando que os arquivos

chamados esto no mesmo diretrio da pgina atual, estamos obtendo o Path do arquivo atual eeliminando o nome do arquivo que estna ltima referencia do Path. Quando fizermos a

chamada das imagens (comando src) ssernecessrio a concatenao do nome do arquivochamado com a raiz do path que, no exemplo, armazenamos na varivel de nome Local.

function Abrejanela(Opcao) {

Versao = navigator.appVersionVersao = Versao.substring(0, 1)Local = ""

if (Versao < 3) {

Local = document.locationUltLoc = Local.lastIndexOf("/")

Local = Local.substring(0, UltLoc + 1)

}

//NovaJanela = window.open ("", "OutraJanela", "width=300,height=400")

NovaJanela.document.open()

NovaJanela.document.write ("Nova Janela")NovaJanela.document.write ("")

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.close() }


22/22

22

Escolha a foto a ser apresentada na nova janela:

Elogica

Recife

Documents

Manual do Javascript