javascript ref

8/6/2019 Javascript Ref

1/25

1997 Luis Carlos de Andrade Rodrigues - [email protected] - Todos direitos reservados.

JavaScript: Referncia Bsica e Rpida Nota Importante: Para utilizar esta referncia necessrio j ter os conhecimentos bsicos de

JavaScript sobre os temas abordados. Este material serve para consulta rpida e/ou reviso geral deconceitos, no necessariamente para estudo de JavaScript.

Operadores Matemticos

So operadores a serem utilizados em clculos, referncias de indexadores e manuseio destrings.Ao longo do manual estes operadores sero largamente utilizados, dando, assim, uma noomaisprecisa do seu potencial.

+ adio de valor e concatenao de strings- subtrao de valores

* multiplicao de valores/ diviso de valores% obtem o resto de uma diviso:

Ex: 150 % 13 retornar 77 % 3 retornar 1

+= concatena /adiciona ao string/valor j existente. Ou seja:x += y o mesmo que x = x + yda mesma forma podem ser utilizados: -= , *= , /= ou %=

Um contador pode ser simplificado utilizando-se : X++ ou X-- o que equivale as

expresses:X = X + 1 ou X = X - 1 respectivamente.Para inverter sinal: X = -X negativo para positivo ou positivo para negativo.

Operadores Lgicos

So 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

&n0bsp; < Menor


2/25

Controles Especiais

\b - backspace\f - form feed\n - new line caracters\r - carriage return\t - tab characters

// - Linha de comentrio /*....*/ - Delimitadores para inserir um texto com mais de uma linha como comentrio.

Os delimitadores naturais para uma string so " ou ' . Caso seja necessrio a utilizao destescaracteres como parte da string, utilize \ precedendo " ou '.

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

Comandos Condicionais

So comandos que condicionam a execuo de uma certa tarefa veracidade ou no de umadeterminada condio, ou enquanto determinada condio for verdadeira.So eles:

Comando IF

if (condio)

{ ao para condio satisfeita }[ else{ ao para condio no satisfeita } ]

Ex.if (Idade < 18){Categoria = "Menor" }

else{Categoria = "Maior"}

Comando FOR

for ( [inicializao/criao de varivel de controle ;][condio ;][incremento da varivel de controle] ){ ao }

Ex.for (x = 0 ; x


3/25

Ex.var contador = 10

while (contador > 1){ contador-- }

Move condicional

receptor = ( (condio) ? verdadeiro : falso)

Ex.NomeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino")

OBS:Nos comandos FOR e WHILE a diretiva "break" pode ser utilizada para interromper acondio 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.

Eventos

So fatos que ocorrem durante a execuo do sistema, a partir dos quais o programador podedefinir aes a serem realizadas pelo programa.Abaixo apresentamos a lista dos eventos possveis, indicando os momentos em que os mesmos

podem ocorrer, bem como, os objetos passveis de sua ocorrncia.

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

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

onchange - Ocorre quando o objeto perde o focus e houve mudana de contedo.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.vlido para os objetos Text e Textarea.

onsubmit - Ocorre quando um boto tipo Submit recebe um click do mouse.

vlido apenas para o Form.

Pgina 3 de 25JavaScript - Referncia Rpida - Fornecido por Mep Sites

A web sua! - http://www.mepsites.cjb.net - http://www.mep.rg3.net


4/25

Criando Variveis

A varivel criada 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 = ""

Escrevendo no Documento

O JavaScript permite que o programador escreva linhas dentro de uma pgina (documento),atravs do mtodo write. As linhas escritas desta forma, podem conter textos, expressesJavaScript e comandos Html. As linhas escritas atravs deste mtodo aparecero no pontoda tela onde o comando for inserido.

Ex:valor = 30document.write ("Minha primeira linha")document.write ("Nesta linha aparecer o resultado de : " + (10 * 10 + valor))

A idia do exemplo acima escrever duas linhas. Entretanto o mtodo write no inseremudana de linha, o que provocar o aparecimento de apenas uma linha com os dois textosemendados.Para evitar este tipo de ocorrncia, existe o mtodo writeln que escreve uma linha e espacejapara a seguinte. Entretanto, em nossos testes, este comando no surtiu efeito,obtendo-se omesmo resultado do mtodo write. A soluo encontrada para esta situao foi a utilizao docomando de mudana de pargrafo da linguagem Html.

Ex:valor = 30document.write ("

Minha primeira linha
")document.write ("
Nesta linha aparecer o resultado de : " + (10 * 10 + valor) + "
")



5/25

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

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 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 informao digitada pelo usurioMinha mensagem a mensagem que vai aparecer como Label da caixa de inputMeu texto um texto, opcional, que aparecer na linha de digitao do usurio

Ex.Entrada = prompt("Informe uma expresso matemtica", "")Resultado = eval(Entrada)document.write("O resultado = " + Resultado)




6/25

Criando Funes

Uma funo um set de instrues, que s devem ser executadas quando a funo foracionada.

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 formulrio, na qual sejainformada a 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 o nome da varivel passada e avarivel de recepo na funo. Apenas o contedo passado.

Funes Intrnsecas

So 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, quetambm 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 nmeroMath.floor(nmero) - retorna o prximo valor inteiro menor que o nmero




7/25

Math.round(nmero) - retorna o valor inteiro, arredondado, do nmeroMath.pow(base, expoente) - retorna o clculo do exponencialMath.max(nmero1, nmero2) - retorna o maior nmero dos dois fornecidosMath.min(nmero1, nmero2) - retorna o menor nmero dos dois fornecidosMath.sqrt(nmero) - retorna a raiz quadrada do nmeroMath.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(nmero) - retorna o seno de um nmero (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 nmeroMath.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 ser processado pela funo e que poder ser: um nmero,uma varivel ou o contedo de um objeto (propriedade value).

Criando Novas Instncias

Atravs do operador new podem ser criadas novas instncias a objetos j existentes, mudandooseu 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 contedo 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 Empresas

function Empresas (Emp, Nfunc, Prod){ this.Emp = Emp

this.Nfunc = Nfunc




8/25

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

Assim, a varivel Elogica.Nfunc ter o seu contedo igual a 120

Manipulando Arrays

O JavaScript no tem um tipo de dado ou objeto para manipular arrays. Por isso, para trabalharcom arrays necessrio 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 = nfor (var i = 1 ; i


9/25

function Empresas (Emp, Nfunc, Prod) {this.Emp = Empthis.Nfunc = Nfuncthis.Prod = Prod }

TabEmp = new Empresas(3)TabEmp[1] = new Empresas("Elogica", "120", "Servios")TabEmp[2] = new Empresas("Pitaco", "35", "Software")TabEmp[3] = new Empresas("Corisco", "42", "Conectividade")

Assim, poderemos obter a atividade da empresa nmero 3, cuja resposta seria Conectividade,da seguinte forma:

Atividade = TabEmp[3].Prod

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

Manipulando String's

O JavaScript bastante poderoso no manuseio de Strings, fornecendo ao programador umatotalflexibilidade 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 intervaloespecificado. 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 receber a 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 %)




10/25

Manipulando Datas

Existe apenas uma funo para que se possa obter a data e a hora. a funo Date(). Estafuno devolve 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 anogetHours() - 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 eutilizar a varivel DiaHoje como indexador.

function CriaTab (n) {this.length = nfor (var x = 1 ; x


11/25


12/25

Objeto Input PASSWORD

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

criptografados e, s so 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 sosubstituidos (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, porm, invisvel para o usurio. Este objeto deve serutilizado para passar informaes ao "server" (quando o formulrio for submetido) sem que ousurio tome conhecimento. Suas propriedades so: name e value.

name : Especifica o nome do objeto.value : Armazena o contedo do objeto

Ex:

Objeto Input CHECKBOX




13/25

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 objetovalue : 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 tambm serve para ativar comandos lgicos, testando-se a condiode "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 trs objetos checkbox. O primeirocheckbox, quando ativado, transformar o texto em caracteres minsculos. O segundocheckbox, quando ativado, transformar o texto em caracteres maisculos. O terceirocheckbox, quando ativado, dar um aviso do contedo que ser recebido pelo "server" caso oformulrio seja submetido para este.

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

}

Muda Case

Minusculo

MaiusculoDemo 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 deum formulrio, exigindo muito cuidado quando se acrescenta ou se deleta um objeto, pois,neste caso, haver um natural deslocamento do index, podendo comprometer a lgica.

Objeto Input RADIO




14/25


15/25

Click no Botao

Objeto Input RESET

Este 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,uma vez 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 aparecer sobre o boto

O nico evento associado a este objeto onclick.

Ex.

Digite um TextoApague o Texto

Objeto Input SUBMIT

Este objeto um boto que tem por finalidade submeter (enviar) o contedo dos objetos doformulrio ao "server". O formulrio ser submetido URL especificada na propriedade "action"do formulrio.Suas propriedades so: name e value.

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

O nico evento associado a este objeto onclick. Embora se possa atrelar lgica a este evento,




16/25

no se pode evitar que o formulrio seja submetido, portanto, no aconselhavel o seu uso.Mais seguro e mais til a utilizao da propriedade onSubmit do formulrio. Este permite quese atrele 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 est sendo submetido a URL "10.0.5.2" (que o endereo IPde um "Server"). Este servidor est rodando o "Microsoft Internet Information Server". Estamos enviando os dados a um "OLE", que est no subdiretrio "scripts", chamado "isapielo.dll", quetempor objetivo fazer a coneco com aplicaes escritas em VB. A aplicao VB que est sendochamada, um OLE de nome "vbloja" no qual estamos acionando a classe "loja" e o mtodo"action".A aplicao VB, deste exemplo, far apenas a devoluo dos dados recebidos pelo Server.

Objeto TEXTAREA

um objeto para entrada de dados em um campo de mltiplas linhas. Suas principaispropriedades so: name, rows e cols.

name : Especifica o nome do objetorows : Especifica a quantidade de linhas que aparecero na telacols : Especifica a quantidade de caracteres que aparecero em cada linhavalue : 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




17/25


18/25

a) A lista permite mltiplas seleesb) Utilizamos a propriedade "value". Assim as propriedades "text" e "value"tm valores diferentes: text retornar Escolha 1 a Escolha 4 e valueretornar List1 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 = ""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 Objeto

Este mtodo permite que o cursor seja ativado em um determinado objeto (focado). Isso podeser feito na carga do documento, a partir da ocorrncia de um evento ou mesmo dentro de umafuno.Observe que at agora 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 comuma 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 d de forma automtica

quando da digitao do novo contedo. Os mtodos "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 doformulrio e os mtodos focus e select para, na rotina de crtica dos dados, focar o objeto quecontiver erro de preenchimento.

Ex.DdosOk = truefunction Criticar() {

DadosOk = false




19/25

DataAtual = new Date()MesAtual = DataAtual.getMonth() + 1AnoAtual = DataAtual.getYear() + 1900Nome = 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()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

Usando Timer e Date

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




20/25

Varivel = setTimeout ("ao", tempo)

Onde:Varivel uma varivel apenas para controle do timerao a ao que se quer realizar.tempo o tempo de espera para que a ao ocorra, em milisegundos.

Obs: importante observar que a ao s ocorrer uma 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:

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 deativar e desativar a atualizao dos dados. Apresenta tambm, fora do formulrio, a datacontendo dia e ms por extenso..function Hoje() {ContrRelogio = setTimeout ("Hoje()", 1000)Hr = new Date()dd = Hr.getDate()mm = Hr.getMonth() + 1aa = 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=DataAtualdocument.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"




21/25

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 ) )Data : Hora :

DesativaAtiva

Escrevendo Textos Rolantes

Observe o rodap desta pgina.... existe uma mensagem que est sempre rolando.Na verdade, o texto no est rolando como d a impresso. O que ocorre a troca do contedo

a cada um segundo. Para fazer isto escrevemos uma funo que, a cada segundo, desloca otextoem um caracter. Ou seja: elimina o primeiro caracter, deslocando o texto, e insere um novocaracter no final do texto. Quando o novo texto exibido obtemos o efeito apresentado.

No exemplo abaixo apresentamos o cdigo necessrio para criar textos rolantes. Os textosseroapresentados na rea de status (rodap) da pgina bem como em uma caixa de texto de umformulrio.Inicialmente definimos as variveis a serem utilizadas pela funo e preenchemos com"brancos"a varivel que conter o texto a ser exibido, para que o texto comece a ser exibido a partir docanto direito da caixa.No momento em que o documento carregado, utilizamos o evento onload para ativar a funo que far a apresentao dos textos.

Ex:

/* ----- Apresenta uma caixa de texto rolante no rodap da pgina*/var Texto = "Grupo Elgica - Manual Java Script - Principais Comandos............"




22/25

var Tamanho = Texto.lengthvar Trab = Texto.lengthvar Trab1=0var Temp = ""var Mensagem=""var CtrTime=""for (x=0 ; x


23/25

Bem, voltemos ao nosso caso que a abertura de janelas sobre um documento. Isto feitoatravs 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 ser atribuido como propriedade da janela.Url - Endereo Internet onde a janela ser aberta. Normalmente voce estar utilizando a sua

prpria Url, neste caso, preencha com "".Nome da Janela - o nome que aparecer no 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 browsedirectories - Abre a barra de ferramentas tipo "What's New", "Handbook", etc.

status - Abre uma barra de status no rodap da janela scrollbar - Abre barras de rolamento vertical e horizontal menubar - 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 pixels

Todas 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-seque todas as opes esto ligadas; Caso seja especificada qualquer opo, ser entendido queesto ligadas 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 mtodo:Variavel.document.open()

Onde "Variavel" o nome da varivel associada ao mtodo window.open

Escrevendo no Documento

Para escrever a tela no documento, deve ser utilizado o seguinte mtodo: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 usurioescolher uma opo (Elgica ou Recife) e dar um Click em um boto (Nova Janela). Nestemomento ser aberta uma nova janela que conter a foto escolhida pelo usurio e um boto




24/25

que,ao receber o Click, fechar a janela.

Normalmente, qualquer href ou src dentro de uma pgina, por padro, acessa o arquivo ou aimagem no mesmo diretrio onde est a pgina atual, a menos que seja especificado um novocaminho (Path).No caso de abertura de uma nova janela, atravs do mtodo window.open, as verses maisantigas 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 doscomandos Html href ou src.Observe que na funo estamos utilizando dois novos mtodos:

navigator.appVersion para verificarmos a verso do browse que esta sendo utilizadodocument.location. para obtermos o Path da localizao do arquivo Html que est

correntemente em 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 arquivoschamados esto no mesmo diretrio da pgina atual, estamos obtendo o Path do arquivo atuale eliminando o nome do arquivo que est na ltima referencia do Path. Quando fizermos achamada das imagens (comando src) s ser necessrio 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.write ("")NovaJanela.document.write ("")NovaJanela.document.close() }
Escolha a foto a ser apresentada na nova janela:

ElogicaRecife




25/25

Autor: Luis Carlos de Andrade Rodrigues - Mep Sites - A web sua! - http://www.mepsites.cjb.net


javascript ref

Documents