0_que_e_javascript.pdf

7/24/2019 0_que_e_JavaScript.pdf

1/44

JavaScript

INTRODUO

vaScript uma linguagem que permite injetar lgica em pginas escritas em HTML (HyperTep Language). As pginas HTML podem ser escritas utilizando-se editores de texto, como o No

Write, etc. Porm, existem editores prprios para gerar HTML, tais como HotDog e (mais recomicrosoft FrontPage.

s pargrafos de lgica do javaScript podem estar "soltos" ou atrelados a ocorrncia de eventos

s pargrafos soltos so executados na sequncia em que aparecem na pgina (documento) e osrelados a eventos so executados apenas quando o evento ocorre.

ara inserir pargrafos de programao dentro do HTML necessrio identificar o incio e o fime JavaScript, da seguinte forma:

SCRIPT>

et de instrues

SCRIPT>

ste procedimento pode ser adotado em qualquer local da pgina. Entretanto, para melhor visuacilidade de manuteno, recomenda-se que toda a lgica seja escrita no incio do documento,

a criao de funes a serem invocadas quando se fizer necessrio (normalmente atreladas a ev

e a lgica escrita a partir de um determinado evento, no necessrio o uso dos comandosSCRIPT> e .

s comandos JavaScript so sensveis ao tipo de letra (maisculas e minsculas) em sua sintaxeortanto, necessrio que seja obedecida a forma de escrever os comandos, de acordo com a fopresentada ao longo deste manual. Caso seja cometido algum erro de sintaxe quando da escritaomando, o JavaScript interpretar, o que seria um comando, como sendo o nome de uma variv

dice
http://i%7C/INFO/09Setembro/26_WebDev_2/Apostilas/js/index.htm#indicehttp://i%7C/INFO/09Setembro/26_WebDev_2/Apostilas/js/index.htm#indice


2/44

OPERADORES LGICOS

o operadores a serem utilizados em comandos condicionais, tais como: IF , FOR e WHILE.

s comandos condicionais sero vistos mais a frente.

= = Igual

!= Diferente

> Maior

>= Maior ou Igual

< Menor


3/44

/ diviso de valores

% obtem o resto de uma diviso:

Ex: 150 % 13 retornar 7

+= 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 expresses:

X = X + 1 ou X = X - 1 respectivamente.

Para inverter sinal: X = -X negativo para positivo ou positivo para negativo.

dice

CONTROLES ESPECIAIS

- backspace

- form feed

- new line caracters

- carriage return

- tab characters

- Linha de comentrio

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

s delimitadores naturais para uma string so " ou ' . Caso seja necessrio a utilizao destes caomo parte da string, utilize \ precedendo " ou '.


4/44

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

dice

COMANDOS CONDICIONAIS

o comandos que condicionam a execuo de uma certa tarefa veracidade ou no de umaeterminada condio, ou enquanto determinada condio for verdadeira.

o eles:

omando IF

(condio)

{ ao para condio satisfeita }

else

{ ao para condio no satisfeita } ]

x.

(Idade < 18)

Categoria = "Menor" }

se

Categoria = "Maior"}

omando FOR

r ( [inicializao/criao de varivel de controle ;]

[condio ;]

[incremento da varivel de controle] )


5/44

{ ao }

x.

r (x = 0 ; x 1)

{ contador-- }

ove condicional

ceptor = ( (condio) ? verdadeiro : falso)

x.

omeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino")

BS:

os comandos FOR e WHILE a diretiva "break" pode ser utilizada para interromper a condioincipal e sair do loop. Da mesma forma, a diretiva "continue" interrompe uma ao (se determ

ondio ocorrer) mas volta para o loop.

iretivas/condies entre [ ] significam que so opcionais.


6/44

dice

EVENTOS

o fatos que ocorrem durante a execuo do sistema, a partir dos quais o programador pode dees a serem realizadas pelo programa.

baixo apresentamos a lista dos eventos possveis, indicando os momentos em que os mesmos pcorrer, bem como, os objetos passveis de sua ocorrncia.

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

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

nchange - Ocorre quando o objeto perde o focus e houve mudana de contedo.

vlido para os objetos Text, Select e Textarea.

nblur - Ocorre quando o objeto perde o focus, independente de ter havido mudana.


nfocus - Ocorre quando o objeto recebe o focus.


nclick - Ocorre quando o objeto recebe um Click do Mouse.

vlido para os objetos Buton, Checkbox, Radio, Link, Reset e Submit.

nmouseover - Ocorre quando o ponteiro do mouse passa por sobre o objeto.

vlido apenas para Link.

nselect - Ocorre quando o objeto selecionado.

vlido para os objetos Text e Textarea.


7/44

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

vlido apenas para o Form.

dice

CRIANDO VARIVEIS

varivel criada automaticamente, pela simples associao de valores a mesma.

x. NovaVariavel = "Jose"

oi criada a varivel de nome NovaVariavel que, passou a conter a string Jose.

s variveis podem ser Locais ou Globais. As variveis que so criadas dentro de uma funo socais e referenciveis apenas dentro da funo. As variveis criadas fora de funes so Globaodendo serem referenciadas em qualquer parte do documento.

esta forma, variveis que precisam ser referenciadas por vrias funes ou em outra parte doocumento, precisam ser definidas como globais.

mbora no seja recomendvel, em uma funo, pode ser definida uma varivel local com o meome de uma varivel global. Para isso utiliza-se o mtodo de definio var.

x. Varivel Global: MinhaVariavel = ""

Varivel Local: var MinhaVariavel = ""

dice

ESCREVENDO NO DOCUMENTO

JavaScript permite que o programador escreva linhas dentro de uma pgina (documento), atratodo write. As linhas escritas desta forma, podem conter textos, expresses JavaScript e comtml. As linhas escritas atravs deste mtodo aparecero no ponto da tela onde o comando for i
http://i%7C/INFO/09Setembro/26_WebDev_2/Apostilas/js/index.htm#indicehttp://i%7C/INFO/09Setembro/26_WebDev_2/Apostilas/js/index.htm#indicehttp://i%7C/INFO/09Setembro/26_WebDev_2/Apostilas/js/index.htm#indicehttp://i%7C/INFO/09Setembro/26_WebDev_2/Apostilas/js/index.htm#indice


8/44

x:

script>

alor = 30

ocument.write ("Minha primeira linha")

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

script>

idia do exemplo acima escrever duas linhas. Entretanto o mtodo write no insere mudannha, o que provocar o aparecimento de apenas uma linha com os dois textos emendados.

ara evitar este tipo de ocorrncia, existe o mtodo writeln que escreve uma linha e espaceja par

guinte. Entretanto, em nossos testes, este comando no surtiu efeito,obtendo-se o mesmo resutodo write. A soluo encontrada para esta situao foi a utilizao do comando de mudanaargrafo da linguagem Html.

x:

script>

alor = 30

ocument.write ("

Minha primeira linha
")
ocument.write ("

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

to resolve a questo da mudana de linha, porm, vai gerar uma linha em branco, entre cada litratar de mudana de pargrafo. Caso no seja desejado a existncia da linha em branco, a alt

utilizar o comando Html
que apenas muda de linha.

x:

script>

alor = 30


9/44

ocument.write ("
Minha primeira linha")

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

script>

dice

MENSAGENS

xistem trs formas de comunicao com o usurio atravs de mensagens.

penas Observao.

ert ( mensagem )

x.

ert ("Certifique-se de que as informaes esto corretas")

ensagem que retorna confirmao de OK ou CANCELAR

onfirm (mensagem)

x.

(confirm ("Algo est errado...devo continuar??"))

{ alert("Continuando") }

se

{ alert("Parando") }

ecebe mensagem via caixa de texto Input

eceptor = prompt ("Minha mensagem", "Meu texto")


10/44

nde:

eceptor o campo que vai receber a informao digitada pelo usurio

inha mensagem a mensagem que vai aparecer como Label da caixa de input

eu texto um texto, opcional, que aparecer na linha de digitao do usurio

x.

ntrada = prompt("Informe uma expresso matemtica", "")

esultado = eval(Entrada)

ocument.write("O resultado = " + Resultado)

dice

CRIANDO FUNES

ma funo um set de instrues, que s devem ser executadas quando a funo for acionada

sintaxe geral a seguinte:

nction NomeFuno (Parmetros)

{ Ao }

uponha uma funo que tenha como objetivo informar se uma pessoa maior ou menor de idacebendo como parmetro a sua idade.

nction Idade (Anos) {

if (Anos > 17)

{ alert ("Maior de Idade") }

else


11/44

{ alert ("menor de Idade") }

}

ara acionar esta funo, suponha uma caixa de texto, em um formulrio, na qual seja informada cada informao, a funo seja acionada.

form>

nput type=text size=2 maxlength=2 name="Tempo"

onchange="Idade(Tempo.value)">

form>

bserve-se que o parmetro passado (quando ocorre o evento "onchange") foi o contedo da caxto "Tempo" (propriedade "value") e que, na funo, chamamos de "Anos". Ou seja, no existlao entre o nome da varivel passada e a varivel de recepo na funo. Apenas o contedo

assado.

dice

FUNES INTRNSECAS

o funes embutidas na prpria linguagem. A sintaxe geral a seguinte:

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

x1: Result = eval ( " (10 * 20) + 2 - 8")


12/44

x2: Result = eval (string)

o primeiro exemplo Result seria igual a 194. No segundo, depende do contedo da string, queode ser o contedo (value) de uma caixa de texto.

Funes tipicamente Matemticas:

ath.abs(nmero) - retorna o valor absoluto do nmero (ponto flutuante)

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

ath.floor(nmero) - retorna o prximo valor inteiro menor que o nmero

ath.round(nmero) - retorna o valor inteiro, arredondado, do nmero

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

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

ath.min(nmero1, nmero2) - retorna o menor nmero dos dois fornecidos

ath.sqrt(nmero) - retorna a raiz quadrada do nmero

ath.SQRT2 - retorna a raiz quadrada de 2 (aproximadamente 1.414)

ath.SQRT_2 - retorna a raiz quadrada de 1/2 (aproximadamente 0.707)

ath.sin(nmero) - retorna o seno de um nmero (anglo em radianos)

ath.asin(nmero) - retorna o arco seno de um nmero (em radianos)

ath.cos(nmero) - retorna o cosseno de um nmero (anglo em radianos)

ath.acos(nmero) - retorna o arco cosseno de um nmero (em radianos)

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

ath.atan(nmero) - retorna o arco tangente de um nmero (em radianos)

ath.pi retorna o valor de PI (aproximadamente 3.14159)


13/44

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

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

ath.LN2 - retorna o valor do logartmo de 2 (aproximadamente 0.693)

ath.LOG2E - retorna a base do logartmo de 2 (aproximadamente 1.442)

ath.LN10 retorna o valor do logartmo de 10 (aproximadamente 2.302)

ath.LOG10E - retorna a base do logartmo de 10 (aproximadamente 0.434)

bservao:

m todas as funes, quando apresentamos a expresso "(nmero)", na verdade queremos nos rm argumento que ser processado pela funo e que poder ser: um nmero, uma varivel ou o

ontedo de um objeto (propriedade value).

dice

CRIANDO NOVAS INSTNCIAS

travs do operador new podem ser criadas novas instncias a objetos j existentes, mudando oontedo, porm, mantendo suas propriedades.

sintaxe geral a seguinte:

ovoObjeto = new ObjetoExistente (parmetros)

x1.

inhaData = new Date ()

inhaData passou a ser um objeto tipo Date, com o mesmo contedo existente em Date

ata e hora atual)

x2:


14/44

inhaData = new Date(1996, 05, 27)

inhaData passou a ser um objeto tipo Date, porm, com o contedo de uma nova data.

x3:

uponha a existncia do seguinte objeto chamado Empresas

nction Empresas (Emp, Nfunc, Prod)

{ this.Emp = Emp

this.Nfunc = Nfunc

this.Prod = Prod }

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

ogica = new Empresas("Elogica", "120", "Servios")

taco = new Empresas("Pitaco", "35", "Software")

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

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

dice

MANIPULANDO ARRAYS

JavaScript no tem um tipo de dado ou objeto para manipular arrays. Por isso, para trabalhar rays necessrio a criao de um objeto com a propriedade de criao de um array.

o exemplo abaixo, criaremos um objeto tipo array de tamanho varivel e com a funo de "limontedo das variveis cada vez que uma nova instncia seja criada a partir dele.

nction CriaArray (n) {


15/44

this.length = n

for (var i = 1 ; i


16/44

iaSemana passaria a conter Quinta e Ocupao conteria Programador.

utra forma de se trabalhar com arrays criar novas instncias dentro do prprio objeto do

ray, o que proporciona o mesmo efeito de se trabalhar com matriz. Isso pode ser feito da

guinte forma:

nction Empresas (Emp, Nfunc, Prod) {

this.Emp = Emp

this.Nfunc = Nfunc

this.Prod = Prod }

abEmp = new Empresas(3)

abEmp[1] = new Empresas("Elogica", "120", "Servios")

abEmp[2] = new Empresas("Pitaco", "35", "Software")

abEmp[3] = new Empresas("Corisco", "42", "Conectividade")

ssim, poderemos obter a atividade da empresa nmero 3, cuja resposta seria Conectividade, daguinte forma:

tividade = TabEmp[3].Prod

bs:

importante lembrar que, embora os exemplos estejam com indexadores fixos, os indexadores

r referncias ao contedo de variveis.

dice

MANIPULANDO STRING's


17/44

JavaScript bastante poderoso no manuseio de Strings, fornecendo ao programador uma tota

exibilidade em seu manuseio.

baixo apresentamos os mtodos disponveis para manuseio de strings.

ring.length - retorna o tamanho da string (quantidade de bytes)

ring.charAt(posio) - retorna o caracter da posio especificada (inicia em 0)

ring.indexOf("string") - retorna o nmero da posio onde comea a primeira "string"

ring.lastindexOf("string") - retorna o nmero da posio onde comea a ltima "string"

ring.substring(index1, index2) - retorna o contedo da string que corresponde ao intervaloespecificado. Comeando no caracter posicionado em index1 e terminando no caracter

imediatamente anterior ao valor especificado em index2.

x.

odo = "Elogica"

arte = Todo.substring(1, 4)

A varivel Parte receber a palavra log)

ring.toUpperCase() - Transforma o contedo da string para maisculo (Caixa Alta)

ring.toLowerCase() - Transforma o contedo da string para minsculo (Caixa Baixa)

cape ("string") - retorna o valor ASCII da string (vem precedido de %)

nscape("string") - retorna o caracter a partir de um valor ASCII (precedido de %)

dice

MANIPULANDO DATAS


18/44

xiste apenas uma funo para que se possa obter a data e a hora. a funo Date(). Esta funevolve data e hora no formato:Dia da semana, Nome do ms, Dia do ms, Hora:Minuto:Segun

x.

ri May 24 16:58:02 1996

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

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

etDay() - Obtm o dia da semana (0 a 6)

etMonth() - Obtm o ms (numrico de 0 a 11)

etYear() - Obtm o ano

etHours() - Obtm a hora (numrico de 0 a 23)

etMinutes() - Obtm os minutos (numrico de 0 a 59)

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

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

ara armazenar data/hora e a varivel DiaHoje para armazenar o nmero do dia da semana.

ataToda = new Date()

iaHoje = DataToda.getDay()

ara obter o dia da semana alfa, teremos que construir uma tabela com os dias da semana e

ilizar a varivel DiaHoje como indexador.

nction CriaTab (n) {

this.length = n

for (var x = 1 ; x


19/44

{ this[x] = "" } }

omeDia = new CriaTab(7)

omeDia[0] = "Domingo"

omeDia[1] = "Segunda"

omeDia [2] = "Tera"

omeDia[3] = "Quarta"

omeDia[4] = "Quinta"

omeDia[5] = "Sexta"

omeDia[6] = "Sbado"

iaSemana = NomeDia[DiaHoje]

ara criar uma varivel tipo Date com o contedo informado pela aplicao, existe o mtodo setmos os seguintes mtodos: setDate, setDay, setMonth, setYear, setHours, setMinutes e setSec

eguindo o exemplo acima, para mudar o ms para novembro, teramos:

ataToda.setMonth(10)

xemplos adicionais sero encontrados no captulo "Usando Timer e Date

dice

INTERAGINDO COM O USURIO

interao com o usurio se d atravs de objetos para entrada de dados (textos), marcao de adio, checkbox e combo), botes e link's para outras pginas.

onceitualmente, os objetos so divididos em: Input, Textarea e Select.


20/44

objeto Input divide-se (propriedade Type) em:

Password Text Hidden Checkbox Radio Button Reset Submit

construo destes objetos feita pela linguagem HTML (HiperText Mark-up Language). Poronselhvel que sejam criados utilizando-se ferramentas de gerao de pginas HTML, como ootDog ou, mais recomendado, FrontPage.

bjeto Input TEXT

o principal objeto para entrada de dados.

uas principais propriedades so: type, size, maxlength, name e value.

pe=text : Especifica um campo para entrada de dados normal

ze : Especifica o tamanho do campo na tela.

axlength : Especifica a quantidade mxima de caracteres permitidos.

ame : Especifica o nome do objeto

alue : Armazena o contedo do campo.

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

x:

form name="TText">

p>Entrada de Texto

p>

form>

bjeto Input PASSWORD

o objeto para entrada de Senhas de acesso (password). Os dados digitados neste objeto soiptografados e, s so interpretados (vistos) pelo "server", por razes de segurana.


21/44

uas principais propriedades so: type, size, maxlength, name e value.

pe=password : Especifica um campo para entrada de senha. Os dados digitados so substituid(na tela) por "*".

ze : Especifica o tamanho do campo na tela.

axlength : Especifica a quantidade mxima de caracteres permitidos.


alue : Armazena o contedo digitado no campo.


x:

form name="TPassword">

p>Entrada de Senha

p>

form>

bjeto Input HIDDEN

um objeto semelhante ao input text, porm, invisvel para o usurio. Este objeto deve ser utiliara passar informaes ao "server" (quando o formulrio for submetido) sem que o usurio tomonhecimento. Suas propriedades so: name e value.

ame : Especifica o nome do objeto.

alue : Armazena o contedo do objeto

x:

form name="THidden">

nput type=hidden size=20 maxlength=30 name="HdTexto" value="" >


22/44

form>

p>

bjeto Input CHECKBOX

o objetos que permitem ao usurio ligar ou desligar uma determinada opo.

uas principais propriedades so: name, value e checked.


alue : 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 condio

de "checked".

hecked : Especifica que o objeto inicialmente estar ligado

nico evento associado a este objeto onclick.

x:

o exemplo abaixo, criaremos um objeto input.text e trs objetos checkbox. O primeiro checkbuando ativado, transformar o texto em caracteres minsculos. O segundo checkbox, quando aansformar o texto em caracteres maisculos. O terceiro checkbox, quando ativado, dar um aontedo que ser recebido pelo "server" caso o formulrio seja submetido para este.

SCRIPT>

nction AltMaiusc () {

document.TCheck.Muda.value = document.TCheck.Muda.value.toUpperCase() documentpt1.checked = false


23/44

nction AltMinusc () {

document.TCheck.Muda.value = document.TCheck.Muda.value.toLowerCase() document.Tpt2.checked = false

SCRIPT>

p>

form name="TCheck">

uda Case

p>

inusculo

aiusculo

emo valor

p>

form>

xiste ainda uma outra forma de manipular este objeto, em forma de array, que a seguinte: forements[index].propriedade. Esta no uma boa forma porque o index nico dentro de um


24/44

rmulrio, exigindo muito cuidado quando se acrescenta ou se deleta um objeto, pois, neste casaver um natural deslocamento do index, podendo comprometer a lgica.

bjeto Input RADIO

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

uas principais propriedades so: name, value e checked.

ame : Especifica o nome do objeto. Para caracterizar uma mesma srie de opes, todos osobjetos desta srie tm que ter o mesmo "name".

alue : Especifica o valor que ser enviado ao "server" se o objeto estiver ligado (checked). Casseja omitido, ser enviado o valor default "on" . Esta propriedade tambm serve para

ativar comandos lgicos, testando-se a condio de "checked".

hecked : Especifica que o objeto inicialmente estar ligado

ara utilizao deste objeto importante o conhecimento de outras propriedades associadas:

bjeto.length : Retorna a quantidade de opes existentes na lista

bjeto.[index].value : retorna o texto (value) associado a cada opo

bjeto.[index].checked : retorna verdadeiro ou falso


x. No exemplo abaixo temos dois set's de objetos radio. O primeiro tem o objetivo de mudar a ndo do documento atual. O segundo tem o objetivo levar informaes ao "server".

p>Radio

p> Fundo Verde

Fundo Violeta


25/44

Fundo Amarelo

p>

bjeto Input BUTTON

ste objeto tem por finalidade criar um boto ao qual se possa atrelar operaes lgicas, a seremxecutadas quando o mesmo receber um click.

uas propriedades so: name e value.


alue : Especifica o nome que aparecer sobre o boto


x.

p>

form method="POST" name="TstButton">

igite um Texto

p>

lick no Botao

p>

form>

bjeto Input RESET

ste objeto um boto que tem por finalidade, nica, limpar os campos digitados pelo usurio,


26/44

staurando o contedo do formulrio para os valores iniciais.

recomendvel a utilizao deste objeto, para facilitar o usurio a limpar suas informaes, umue a utilizao da opo "reload" do "browser" (que seria uma forma) no perde as infromaegitadas.





x.

p>

form method="POST" name="TesteRes">

igite um Texto

pague o Texto

form>

p>

bjeto Input SUBMIT

ste objeto um boto que tem por finalidade submeter (enviar) o contedo dos objetos do formo "server". O formulrio ser submetido URL especificada na propriedade "action" do formu




nico evento associado a este objeto onclick. Embora se possa atrelar lgica a este evento, node evitar que o formulrio seja submetido, portanto, no aconselhavel o seu uso. Mais segur


27/44

il a utilizao da propriedade onSubmit do formulrio. Este permite que se atrele lgica e deela submisso ou no.

x.

script>

nction TestaVal() {

(document.TesteSub.Teste.value == "") {

alert ("Campo nao Preenchido...Form nao Submetido")

return false }

se {

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

return true } }

script>

p>

form method="POST" name="TesteSub"

onSubmit="return TestaVal()"

action="http://10.0.5.2/scripts/isapielo.dll/vbloja.loja.action">

igite um Texto

otao Submit

p>

form>

o exemplo acima, o formulrio est sendo submetido a URL "10.0.5.2" (que o endereo IP


28/44

e um "Server"). Este servidor est rodando o "Microsoft Internet Information Server". Estamos

nviando os dados a um "OLE", que est no subdiretrio "scripts", chamado "isapielo.dll", que t

or objetivo fazer a coneco com aplicaes escritas em VB. A aplicao VB que est sendo

hamada, um OLE de nome "vbloja" no qual estamos acionando a classe "loja" e o mtodo

ction".

aplicao VB, deste exemplo, far apenas a devoluo dos dados recebidos pelo Server.

bjeto TEXTAREA

um objeto para entrada de dados em um campo de mltiplas linhas. Suas principais propriedaame, rows e cols.


ws : Especifica a quantidade de linhas que aparecero na tela

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

alue : Acessa o contedo do campo via programao.


x:

form name="TesteTextarea">

p>

exto de Mltiplas Linhas

rimeira linha do texto inicial

gunda linha do texto inicial

textarea>


29/44

p>

bjeto SELECT

um objeto para entrada de opes, onde o usurio, a partir de uma lista de alternativas, seleciou mais opes.

uas principais propriedades so: name, size, value e multiple.


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

alue : Associa um valor ou string para cada opo (opcional)

ultiple : Especifica a condio de mltipla escolha (usando-se a tecla Ctrl)

ara utilizao deste objeto importante o conhecimento de outras propriedades associadas:

bjeto.length : Retorna a quantidade de opes existentes na lista

bjeto.selectedindex : Retorna o "index" do objeto selecionado (primeiro = 0) Objeto.options[inxt : retorna o texto externo associado a cada opo Objeto.options[index].value : retorna o texterno (value) associado a cada opo Objeto.options[index].selected : retorna verdadeiro ou fa

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

x1:

este exemplo importante observar os seguintes aspectos:

A lista permite apenas uma seleo

A quarta opo aparecer inicialmente selecionada (propriedade "selected")

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.

script>


30/44

nction Verselect(Campo) {

ombo = Campo.selectedIndex

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

script>

p>

bjeto Select

option>Opcao 1

option>Opcao 2

option>Opcao 3

option selected>Opcao 4 (recomendada)

option>Opcao 5

option>Opcao 6

select>

p>

x2:

este exemplo importante observar os seguintes aspectos:

A lista permite mltiplas selees

Utilizamos a propriedade "value". Assim as propriedades "text" e "value"

m valores diferentes: text retornar Escolha 1 a Escolha 4 e value

tornar List1 a List4.


31/44

O parmetro passado, quando da ocorrncia do evento onblur, foi this.

sta diretiva significa que estamos passando este objeto.

script>

nction Vermult(Lista) {

ar opcoes = ""

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

(Lista.options[i].selected) {

pcoes += (Lista.options[i].value + ", ") }

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

script>

p>

bjeto Select2

option value="List1">Escolha 1




select>

p>

ocando um Objeto

ste mtodo permite que o cursor seja ativado em um determinado objeto (focado). Isso pode se


32/44

a carga do documento, a partir da ocorrncia de um evento ou mesmo dentro de uma funo.

bserve que at agora o usurio tinha que dar um "Click" para focar o objeto desejado.

e forma semelhante existe o mtodo "Select". Este mtodo marca o contedo do objeto com uxa, permitindo ao usurio, em caso de substituio do contedo do campo, no ter que deletar

ontedo anterior, pois, com este mtodo, a deleo se d de forma automtica quando da digitaovo contedo.

s mtodos "Focus" e "Select" podem ser utilizados nos seguintes objetos:

assword, select, text e textarea

o exemplo abaixo, utilizaremos o evento onload para setar o focus para o primeiro objeto dormulrio e os mtodos focus e select para, na rotina de crtica dos dados, focar o objeto que coro de preenchimento.

x.

body onload="document.TstFocus.Nome.focus()">

script>

dosOk = true

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


33/44

f (Ano < 1900)

{Ano = Ano + 1900 }

f (Nome == "")

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

document.TstFocus.Nome.focus()

return }

f (Mes < 1 || Mes > 12)

{ alert ("O Ms informado no vlido, informe corretamente") document.TstFocus.Mes

document.TstFocus.Mes.select()

return }

f (Ano == AnoAtual && Mes > MesAtual)

{ alert ("O perodo informado superior a data atual")

document.TstFocus.Mes.focus()

document.TstFocus.Mes.select()

return }

f (Ano < 1996 || Ano > AnoAtual)

{ alert ("O Ano informado no vlido, informe corretamente") document.TstFocus.Ano

document.TstFocus.Ano.select()

return }


34/44

DadosOk = true

script>

form name="TstFocus" method="POST">

p>

forme o seu Nome

p>

p> Informe o ms desejado

p>

p> Informe o ano desejado

p>

p>

p>

form>

body>

dice


35/44

USANDO TIME e DATE

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

arivel = setTimeout ("ao", tempo)

nde:

arivel uma varivel apenas para controle do timer

o a ao que se quer realizar.

mpo o tempo de espera para que a ao ocorra, em milisegundos.

bs:

importante observar que a ao s ocorrer uma vez. Para que a ao volte a ocorrer, ser necpetir o comando dentro da ao, obtendo-se, assim, um LOOP.

ara interromper um LOOP, provocado pela forma acima, deve-se utilizar o seguinte mtodo:

earTimeout (Varivel)

nde:

arivel o nome da varivel de controle do timer.

baixo encontra-se um exemplo de um formulrio que apresenta a data e hora atual, atualizandoados a cada um segundo, tendo dois botes de rdio que tem a funo de ativar e desativar aualizao dos dados. Apresenta tambm, fora do formulrio, a data contendo dia e ms por ex

script>

nction Hoje() {

ontrRelogio = setTimeout ("Hoje()", 1000)

r = new Date()

d = Hr.getDate()


36/44

m = Hr.getMonth() + 1

a = Hr.getYear()

h = Hr.getHours()

in = Hr.getMinutes()

g = Hr.getSeconds()

ataAtual = ((dd < 10) ? "0" + dd + "/" : dd + "/")

ataAtual += ((mm < 10) ? "0" + mm + "/" + aa : mm + "/" + aa)

oraAtual = ((hh < 10) ? "0" + hh + ":" : hh + ":")

oraAtual += ((min < 10) ? "0" + min + ":" : min + ":")

oraAtual += ((seg < 10) ? "0" + seg : seg)

ocument.DataHora.Data.value=DataAtual

ocument.DataHora.Hora.value=HoraAtual

nction CriaArray (n) {

is.length = n }

omeDia = new CriaArray(7)

omeDia[0] = "Domingo"

omeDia[1] = "Segunda"


37/44

omeDia[2] = "Tera"

omeDia[3] = "Quarta"

omeDia[4] = "Quinta"

omeDia[5] = "Sexta"

omeDia[6] = "Sbado"

omeMes = new CriaArray(12)

omeMes[0] = "Janeiro"

omeMes[1] = "Fevereiro"

omeMes[2] = "Maro"

omeMes[3] = "Abril"

omeMes[4] = "Maio"

omeMes[5] = "Junho"

omeMes[6] = "Julho"

omeMes[7] = "Agosto"

omeMes[8] = "Setembro"

omeMes[9] = "Outubro"

omeMes[10] = "Novembro"

omeMes[11] = "Dezembro"


38/44

ata1 = new Date()

a = Data1.getDate()

as = Data1.getDay()

es = Data1.getMonth()

no = Data1.getYear()

ocument.write ("Recife, " + NomeDia[dias] + " " + dia + " de " +

omeMes[mes] + " de " + (ano + 1900 ) )

script>

form name="DataHora">

ata :

ora :

Desativa

Ativa

form>

dice

ABRINDO NOVAS JANELAS

este captulo mostraremos como podem ser abertas novas janelas sobre uma janela contendo oocumento principal.


39/44

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

diviso de uma tela em vrias janelas contendo documentos diferentes feita atravs do objetRAME do Html. Neste caso, a tela inteira considerada como um FrameSet e cada parte em qr dividida considerada como um Frame. Cada Frame definido dentro do FrameSet atravs pecificao dos parmetros: % da tela na vertical (cols), % da tela na horizontal (rows) e nomame. Uma vez criado o FrameSet poderemos abrir documentos distintos em cada Frame. Para to, acrescente ao link do documento a diretiva target=nome do frame.

x.

href="Eventos.htm" target="Principal">

to far com que o arquivo html Eventos.htm seja aberto dentro do frame de nome Principal

simples chamade de outras telas (documentos) feita atravs do link para o documento deseja

x.

href="Eventos.htm" >

to far com que o arquivo html Eventos.htm seja aberto em substituio a tela existente.

em, voltemos ao nosso caso que a abertura de janelas sobre um documento. Isto feito atravomandos JavaScript, que permitem: Abrir uma janela, Abrir um documento dentro desta janelascrever o contedo da janela, Fechar a janela e Fechar o documento.

brindo a Janela

sintaxe geral deste mtodo a seguinte:

ariavel = window.open ("Url", "Nome da janela", "Opes")

nde:

ariavel - Nome que ser atribuido como propriedade da janela.

rl - Endereo Internet onde a janela ser aberta. Normalmente voce estar utilizando a sua


40/44

prpria Url, neste caso, preencha com "".

ome da Janela - o nome que aparecer no top da janela (Ttulo)

pes - So as opes que definem as caractersticas da janela, quais sejam:

oolbar - Cria uma barra de ferramentas tipo "Back", "Forward", etc.

ocation - Abre a barra de location do browse

irectories - Abre a barra de ferramentas tipo "What's New", "Handbook", etc.

tatus - Abre uma barra de status no rodap da janela

crollbars - Abre barras de rolamento vertical e horizontal

menubar - Cria uma barra de menu tipo "File", "Edit", etc.

esizable - Permite ao usurio redimencionar a janela

width - Especifica a largura da janela, em pixels

eight - Especifica a altura da janela, em pixels

odas as opes (exceto width e height) so boleanas e podem ser setadas de duas formas. Exemoolbar" ou "toolbar=1") so a mesma coisa. Se nada for especificado, entende-se que todas as to ligadas; Caso seja especificada qualquer opo, ser entendido que esto ligadas apenas asformadas.

s opes devem ser informadas separadas por vrgula, sem espao entre elas.

brindo um Documento

ara abrir um documento dentro da janela, deve ser utilizado o seguinte mtodo:

ariavel.document.open()

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

screvendo no Documento


41/44

ara escrever a tela no documento, deve ser utilizado o seguinte mtodo:

ariavel.document.write ("Comandos html, Comandos JavaScript, Textos, etc.")

echando a Janela

ara fechar a janela, utilize o seguinte mtodo:

ariavel.document.write ("window.close()")

echando o Documento

ara fechar o documento, utilize o seguinte mtodo:

ariavel.document.close ()

seguir, apresentamos um exemplo no qual estamos abrindo um documento onde o usurio escma opo (Elgica ou Recife) e dar um Click em um boto (Nova Janela). Neste momento sema nova janela que conter a foto escolhida pelo usurio e um boto que,

o receber o Click, fechar a janela.

ormalmente, qualquer href ou src dentro de uma pgina, por padro, acessa o arquivo ou a imaesmo diretrio onde est a pgina atual, a menos que seja especificado um novo caminho (Pat

o caso de abertura de uma nova janela, atravs do mtodo window.open, as verses mais antigowses no conseguem "ver" o Path, sendo necessria a completa informao do caminho (patquivo ou imagem esto armazenados, em todas as chamadas dos comandos Html href ou src.

bserve que na funo estamos utilizando dois novos mtodos:

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

orrentemente em uso.

o exemplo abaixo estamos, inicialmente, identificando a verso do browse.Caso seja antiga, pcrevermos todo o caminho a cada chamada e ainda, considerando que os arquivos chamados eesmo diretrio da pgina atual, estamos obtendo o Path do arquivo atual e eliminando o nomequivo que est na ltima referencia do Path. Quando fizermos a chamada das imagens (coman ser necessrio a concatenao do nome do arquivo chamado com a raiz do path que, no exemmazenamos na varivel de nome Local.


42/44

script>

nction Abrejanela(Opcao) {

Versao = navigator.appVersion

Versao = Versao.substring(0, 1)

Local = ""

if (Versao < 3) {

Local = document.location

UltLoc = Local.lastIndexOf("/")

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

}

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

NovaJanela.document.write ("Nova Janela")

NovaJanela.document.write ("") NovaJanela.docurite ("")

if (Opcao == 1)

{ NovaJanela.document.write ("
Logomarca Elogica
")

NovaJanela.document.write

("") }

else


43/44

{ NovaJanela.document.write ("
Recife Alto Astral
")

NovaJanela.document.write

("") }

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

NovaJanela.document.write ("")

NovaJanela.document.close() }

script>

body>

p>

p>Escolha a foto a ser apresentada na nova janela:

form method="POST" name="Form1">

p>

nput type=radio name="Opcao" value="1" checked>Elogica

nput type=radio name="Opcao" value="2">Recife

p>

nput type="button" name="Envia" value="Nova Janela"

onclick="if (Form1.Opcao[0].checked == true)

{Abrejanela(Form1.Opcao[0].value) }


44/44

else

{Abrejanela(Form1.Opcao[1].value) } ">

p>

form>

body>

0_que_e_javascript.pdf

Documents