• Introdução

• Operadores lógicos
• Operadores matemáticos
• Controles especiais
• Controles condicionais
• Eventos
• Criando variáveis
• Escrevendo no documento
• Mensagens
• Criando funções
• Funções intrinsecas
• Criando novas instâncias
• Manipulando arrays matr!"es#
• Manipulando strings
• Manipulando datas
• Interagindo com o usuário
• $sando %ime e &ate
• '(rindo novas )anelas
INTRODUÇÃO
*ava+cript , uma linguagem -ue permite in)etar lógica em páginas escritas em .%M/
.iper%e0t Mar12up /anguage#3 's páginas .%M/ podem ser escritas utili"ando2se editores de
te0to4 como
o 5ote6ad4 7rite4 etc3 6or,m4 e0istem editores próprios para gerar .%M/4 tais como .ot&og e
mais recomendado# Microsoft Front6age3
Os parágrafos de lógica do )ava+cript podem estar 8soltos8 ou atrelados a ocorr9ncia de eventos3
Os parágrafos soltos são e0ecutados na se-u9ncia em -ue aparecem na página documento# e os
atrelados a eventos são e0ecutados apenas -uando o evento ocorre3
6ara inserir parágrafos de programação dentro do .%M/ , necessário identificar o in!cio e o
fim do set de *ava+cript4 da seguinte forma:
;+C<I6%=
+et de instruções
;>+C<I6%=
Este procedimento pode ser adotado em -ual-uer local da página3 Entretanto4 para mel?or
visuali"ação e facilidade de manutenção4 recomenda2se -ue toda a lógica se)a escrita no in!cio
do documento4 atrav,s da criação de funções a serem invocadas -uando se fi"er necessário
normalmente atreladas a eventos#3
+e a lógica , escrita a partir de um determinado evento4 não , necessário o uso dos comandos
;+C<I6%= e ;>+C<I6%=3
Os comandos *ava+cript são sens!veis ao tipo de letra mai@sculas e min@sculas# em sua sinta0e3
6ortanto4 , necessário -ue se)a o(edecida a forma de escrever os comandos4 de acordo com
a forma apresentada ao longo deste manual3 Caso se)a cometido algum erro de sinta0e -uando
da escrita de um comando4 o *ava+cript interpretará4 o -ue seria um comando4 como sendo o
nome de uma variável3 Andice
OPERADORES LÓGICOS
+ão operadores a serem utili"ados em comandos condicionais4 tais como: IF 4 FO< e 7.I/E3
Os comandos condicionais serão vistos mais a frente3
B B Igual
CB &iferente
= Maior
=B Maior ou Igual
; Menor
;B Menor ou Igual
DD E
EE Ou Andice
OPERADORES MATEMÁTICOS
+ão operadores a serem utili"ados em cálculos4 refer9ncias de inde0adores e manuseio de strings3
'o longo do manual estes operadores serão largamente utili"ados4 dando4 assim4 uma noção mais
precisa do seu potencial3
F adição de valor e concatenação de strings
2 su(tração de valores
G multiplicação de valores
> divisão de valores
H o(tem o resto de uma divisão:
E0: IJK H IL retornará M
M H L retornará I
FB concatena >adiciona ao string>valor )á e0istente3 Ou se)a:
0 FB y , o mesmo -ue 0 B 0 F y
da mesma forma podem ser utili"ados: 2B 4 GB 4 >B ou HB
$m contador pode ser simplificado utili"ando2se : NFF ou N22 o -ue e-uivale as e0pressões:
N B N F I ou N B N 2 I respectivamente3
6ara inverter sinal: N B 2N negativo para positivo ou positivo para negativo3 Andice
CONTROLES ESPECIAIS
O( 2 (ac1space
Of 2 form feed
On 2 neP line caracters
Or 2 carriage return
Ot 2 ta( c?aracters
>> 2 /in?a de comentário
>G3333G> 2 &elimitadores para inserir um te0to com mais de uma lin?a como comentário3
Os delimitadores naturais para uma string são 8 ou Q 3 Caso se)a necessário a utili"ação destes
caracteres como parte da string4 utili"e O precedendo 8 ou Q3
E03 alert 8Cuidado com o uso de O8 ou OQ em uma string8# Andice
COMANDOS CONDICIONAIS
+ão comandos -ue condicionam a e0ecução de uma certa tarefa R veracidade ou não de uma
determinada condição4 ou en-uanto determinada condição for verdadeira3
+ão eles:
Comando IF
if condição#
S ação para condição satisfeita T
U else
S ação para condição não satisfeita T V
E03
if Idade ; IW#
SCategoria B 8Menor8 T
else
SCategoria B 8Maior8T
Comando FO<
for Uiniciali"ação>criação de variável de controle XV
Ucondição XV
Uincremento da variável de controleV #
S ação T
E03
for 0 B K X 0 ;B IK X 0FF#
Salert 8N igual a 8 F 0# T
Comando7.I/E
E0ecuta uma ação en-uanto determinada condição for verdadeira3
P?ile condição#
S ação T
E03
var contador B IK
P?ile contador = I#
S contador22 T
Move condicional
receptor B condição# Y verdadeiro : falso#
E03
5ome+e0o B Zar+e0o BB 8M8# Y 8Masculino8 : 8Feminino8#
O[+:
5os comandos FO< e 7.I/E a diretiva 8(rea18 pode ser utili"ada para interromper a
condição principal e sair do loop3 &a mesma forma4 a diretiva 8continue8 interrompe uma
ação se determinada condição ocorrer# mas volta para o loop3
&iretivas>condições entre U V significam -ue são opcionais3 Andice
EVENTOS
+ão fatos -ue ocorrem durante a e0ecução do sistema4 a partir dos -uais o programador pode
definir ações a serem reali"adas pelo programa3
'(ai0o apresentamos a lista dos eventos poss!veis4 indicando os momentos em -ue os mesmos
podem ocorrer4 (em como4 os o()etos pass!veis de sua ocorr9ncia3
onload 2 Ocorre na carga do documento3 Ou se)a4 só ocorre no [O&\ do documento3
onunload 2 Ocorre na descarga sa!da# do documento3 %am(,m só ocorre no [O&
onc?ange 2 Ocorre -uando o o()eto perde o focus e ?ouve mudança de conte@do3
válido para os o()etos %e0t4 +elect e %e0tarea3
on(lur 2 Ocorre -uando o o()eto perde o focus4 independente de ter ?avido mudança3
válido para os o()etos %e0t4 +elect e %e0tarea3
onfocus 2 Ocorre -uando o o()eto rece(e o focus3
válido para os o()etos %e0t4 +elect e %e0tarea3
onclic1 2 Ocorre -uando o o()eto rece(e um Clic1 do Mouse3
válido para os o()etos [uton4 C?ec1(o04 <adio4 /in14 <eset e +u(mit3
onmouseover 2 Ocorre -uando o ponteiro do mouse passa por so(re o o()eto3
válido apenas para /in13
onselect 2 Ocorre -uando o o()eto , selecionado3
válido para os o()etos %e0t e %e0tarea3
onsu(mit 2 Ocorre -uando um (otão tipo +u(mit rece(e um clic1 do mouse3
válido apenas para o Form3 Andice
CRIANDO VARIÁVEIS
' variável , criada automaticamente4 pela simples associação de valores a mesma3
E03 5ovaZariavel B 8*ose8
Foi criada a variável de nome 5ovaZariavel -ue4 passou a conter a string *ose3
's variáveis podem ser /ocais ou ]lo(ais3 's variáveis -ue são criadas dentro de uma função
são /ocais e referenciáveis apenas dentro da função3 's variáveis criadas fora de funções são
]lo(ais4 podendo serem referenciadas em -ual-uer parte do documento3
&esta forma4 variáveis -ue precisam ser referenciadas por várias funções ou em outra parte do
documento4 precisam ser definidas como glo(ais3
Em(ora não se)a recomendável4 em uma função4 pode ser definida uma variável local com o
mesmo nome de uma variável glo(al3 6ara isso utili"a2se o m,todo de definição var3
E03 Zariável ]lo(al : Min?aZariavel B 88
Zariável /ocal : var Min?aZariavel B 88 Andice
ESCREVENDO NO DOCUMENTO
O *ava+cript permite -ue o programador escreva lin?as dentro de uma página documento#4
atrav,s do m,todo Prite3 's lin?as escritas desta forma4 podem conter te0tos4 e0pressões
*ava+cript e comandos .tml3 's lin?as escritas atrav,s deste m,todo aparecerão no ponto
da tela onde o comando for inserido3
E0:
;script=
valor B LK
document3Prite 8Min?a primeira lin?a8#
document3Prite 85esta lin?a aparecerá o resultado de : 8 F IK G IK F valor##
;>script=
' id,ia do e0emplo acima , escrever duas lin?as3 Entretanto o m,todo Prite não insere mudança
de lin?a4 o -ue provocará o aparecimento de apenas uma lin?a com os dois te0tos emendados3
6ara evitar este tipo de ocorr9ncia4 e0iste o m,todo Priteln -ue escreve uma lin?a e espace)a para
a seguinte3 Entretanto4 em nossos testes4 este comando não surtiu efeito4o(tendo2se o mesmo
resultado do m,todo Prite3 ' solução encontrada para esta situação foi a utili"ação do comando
de mudança de parágrafo da linguagem .tml3
E0:
;script=
valor B LK
document3Prite 8;p=Min?a primeira lin?a;>p=8#
document3Prite 8;p=5esta lin?a aparecerá o resultado de : 8 F IK G IK F valor# F 8;>p=8#
;>script=
Isto resolve a -uestão da mudança de lin?a4 por,m4 vai gerar uma lin?a em (ranco4 entre cada
lin?a4 por se tratar de mudança de parágrafo3 Caso não se)a dese)ado a e0ist9ncia da lin?a em
(ranco4 a alternativa , utili"ar o comando .tml ;(r= -ue apenas muda de lin?a3
E0:
;script=
valor B LK
document3Prite 8;(r=Min?a primeira lin?a8#
document3Prite 8;(r=5esta lin?a aparecerá o resultado de : 8 F IK G IK F valor# #
;>script= Andice
MENSAGENS
E0istem tr9s formas de comunicação com o usuário atrav,s de mensagens3
'penas O(servação3
alert mensagem #
E03
alert 8Certifi-ue2se de -ue as informações estão corretas8#
Mensagem -ue retorna confirmação de O^ ou C'5CE/'<
confirm mensagem#
E03
if confirm 8'lgo está errado333devo continuarYY8##
S alert8Continuando8# T
else
S alert86arando8# T
<ece(e mensagem via cai0a de te0to Input
<eceptor B prompt 8Min?a mensagem84 8Meu te0to8#
Onde:
<eceptor , o campo -ue vai rece(er a informação digitada pelo usuário
Min?a mensagem , a mensagem -ue vai aparecer como /a(el da cai0a de input
Meu te0to , um te0to4 opcional4 -ue aparecerá na lin?a de digitação do usuário
E03
Entrada B prompt8Informe uma e0pressão matemática84 88#
<esultado B evalEntrada#
document3Prite8O resultado , B 8 F <esultado# Andice
CRIANDO FUNÇÕES
$ma função , um set de instruções4 -ue só devem ser e0ecutadas -uando a função for acionada3
' sinta0e geral , a seguinte:
function 5omeFunção 6arâmetros#
S 'ção T
+upon?a uma função -ue ten?a como o()etivo informar se uma pessoa , maior ou menor de
idade4 rece(endo como parâmetro a sua idade3
function Idade 'nos# S
if 'nos = IM#
S alert 8Maior de Idade8# T
else
S alert 8menor de Idade8# T
T
6ara acionar esta função4 supon?a uma cai0a de te0to4 em um formulário4 na -ual se)a informada
a idade e4 a cada informação4 a função se)a acionada3
;form=
;input typeBte0t si"eB_ ma0lengt?B_ nameB8%empo8
onc?angeB8Idade%empo3value#8=
;>form=
O(serve2se -ue o parâmetro passado -uando ocorre o evento 8onc?ange8#
foi o conte@do da cai0a de te0to 8%empo8 propriedade 8value8# e -ue4
na função4 c?amamos de 8'nos83 Ou se)a4 não e0iste co2relação entre o
nome da variável passada e a variável de recepção na função3 'penas o
conte@do , passado3 Andice
FUNÇÕES INTRÍNSECAS
+ão funções em(utidas na própria linguagem3 ' sinta0e geral , a seguinte:
<esult B função informação a ser processada#
2 eval B Calcula o conte@do da string
2 parseInt 2 %ransforma string em inteiro
2 parseFloat 2 %ransforma string em n@mero com ponto flutuante
2 date# 2 <etorna a data e a ?ora ve)a o cap!tulo manipulando datas#
e0I: <esult B eval 8 IK G _K# F _ 2 W8#
e0_: <esult B eval string#
5o primeiro e0emplo <esult seria igual a I`a3 5o segundo4 depende do conte@do da string4 -ue
tam(,m pode ser o conte@do value# de uma cai0a de te0to3
2 Funções tipicamente Matemáticas:
Mat?3a(sn@mero# 2 retorna o valor a(soluto do n@mero ponto flutuante#
Mat?3ceiln@mero# 2 retorna o pró0imo valor inteiro maior -ue o n@mero
Mat?3floorn@mero# 2 retorna o pró0imo valor inteiro menor -ue o n@mero
Mat?3roundn@mero# 2 retorna o valor inteiro4 arredondado4 do n@mero
Mat?3poP(ase4 e0poente# 2 retorna o cálculo do e0ponencial
Mat?3ma0n@meroI4 n@mero_# 2 retorna o maior n@mero dos dois fornecidos
Mat?3minn@meroI4 n@mero_# 2 retorna o menor n@mero dos dois fornecidos
Mat?3s-rtn@mero# 2 retorna a rai" -uadrada do n@mero
Mat?3+b<%_ 2 retorna a rai" -uadrada de _ apro0imadamente I3aIa#
Mat?3+b<%c_ 2 retorna a rai" -uadrada de I>_ apro0imadamente K3MKM#
Mat?3sinn@mero# 2 retorna o seno de um n@mero anglo em radianos#
Mat?3asinn@mero# 2 retorna o arco seno de um n@mero em radianos#
Mat?3cosn@mero# 2 retorna o cosseno de um n@mero anglo em radianos#
Mat?3acosn@mero# 2 retorna o arco cosseno de um n@mero em radianos#
Mat?3tann@mero# 2 retorna a tangente de um n@mero anglo em radianos#
Mat?3atann@mero# 2 retorna o arco tangente de um n@mero em radianos#
Mat?3pi retorna o valor de 6I apro0imadamente L3IaIJ`#
Mat?3logn@mero# 2 retorna o logar!tmo de um n@mero
Mat?3E 2 retorna a (ase dos logar!tmos naturais apro0imadamente _3MIW#
Mat?3/5_ 2 retorna o valor do logar!tmo de _ apro0imadamente K3d`L#
Mat?3/O]_E 2 retorna a (ase do logar!tmo de _ apro0imadamente I3aa_#
Mat?3/5IK retorna o valor do logar!tmo de IK apro0imadamente _3LK_#
Mat?3/O]IKE 2 retorna a (ase do logar!tmo de IK apro0imadamente K3aLa#
O(servação:
Em todas as funções4 -uando apresentamos a e0pressão 8n@mero#84 na verdade -ueremos
nos referir a um argumento -ue será processado pela função e -ue poderá ser: um n@mero4
uma variável ou o conte@do de um o()eto propriedade value#3 Andice
CRIANDO NOVAS INSTÂNCIAS
'trav,s do operador neP podem ser criadas novas instâncias a o()etos )á e0istentes4 mudando o
seu conte@do4 por,m4 mantendo suas propriedades3
' sinta0e geral , a seguinte:
5ovoO()eto B neP O()etoE0istente parâmetros#
E0I3
Min?a&ata B neP &ate #
Min?a&ata passou a ser um o()eto tipo &ate4 com o mesmo conte@do e0istente em &ate
data e ?ora atual#
E0_:
Min?a&ata B neP &ateI``d4 KJ4 _M#
Min?a&ata passou a ser um o()eto tipo &ate4 por,m4 com o conte@do de uma nova data3
E0L:
+upon?a a e0ist9ncia do seguinte o()eto c?amado Empresas
function Empresas Emp4 5func4 6rod#
S t?is3Emp B Emp
t?is35func B 5func
t?is36rod B 6rod T
6odemos criar novas instâncias4 usando a mesma estrutura4 da seguinte forma:
Elogica B neP Empresas8Elogica84 8I_K84 8+erviços8#
6itaco B neP Empresas86itaco84 8LJ84 8+oftPare8#
Corisco B neP Empresas8Corisco84 8a_84 8Conectividade8#
'ssim4 a variável Elogica35func terá o seu conte@do igual a I_K Andice
MANIPULANDO ARRAYS
O *ava+cript não tem um tipo de dado ou o()eto para manipular arrays3 6or isso4 para tra(al?ar
com arrays , necessário a criação de um o()eto com a propriedade de criação de um array3
5o e0emplo a(ai0o4 criaremos um o()eto tipo array de taman?o variável e com a função de
8limpar8 o conte@do das variáveis cada ve" -ue uma nova instância se)a criada a partir dele3
function Cria'rray n# S
t?is3lengt? B n
for var i B I X i ;B n X iFF#
S t?isUiV B 88 T T
'gora podemos criar novas instâncias do o()eto 8Cria'rray8 e alimentá2los com os dados
necessários3
5ome&ia B neP Cria'rrayM#
5ome&iaUKV B 8&omingo8
5ome&iaUIV B 8+egunda8
5ome&ia U_V B 8%erça8
5ome&iaULV B 8buarta8
5ome&iaUaV B 8buinta8
5ome&iaUJV B 8+e0ta8
5ome&iaUdV B 8+á(ado8
'tividade B neP Cria'rrayJ#
'tividadeUKV B 8'nalista8
'tividadeUIV B 86rogramador8
'tividadeU_V B 8Operador8
'tividadeULV B 8Conferente8
'tividadeUaV B 8&igitador8
'gora poderemos o(ter os dados diretamente dos arrays3
&ia+emana B 5ome&iaUaV
Ocupação B 'tividadeUIV
&ia+emana passaria a conter buinta e Ocupação conteria 6rogramador3
Outra forma de se tra(al?ar com arrays , criar novas instâncias dentro do próprio o()eto do
array4 o -ue proporciona o mesmo efeito de se tra(al?ar com matri"3 Isso pode ser feito da
seguinte forma:
function Empresas Emp4 5func4 6rod# S
t?is3Emp B Emp
t?is35func B 5func
t?is36rod B 6rod T
%a(Emp B neP EmpresasL#
%a(EmpUIV B neP Empresas8Elogica84 8I_K84 8+erviços8#
%a(EmpU_V B neP Empresas86itaco84 8LJ84 8+oftPare8#
%a(EmpULV B neP Empresas8Corisco84 8a_84 8Conectividade8#
'ssim4 poderemos o(ter a atividade da empresa n@mero L4 cu)a resposta seria Conectividade4 da
seguinte forma:
'tividade B %a(EmpULV36rod
O(s:
e importante lem(rar -ue4 em(ora os e0emplos este)am com inde0adores fi0os4 os inde0adores
podem ser refer9ncias ao conte@do de variáveis3 Andice
MANIPULANDO STRING's
O *ava+cript , (astante poderoso no manuseio de +tringfs4 fornecendo ao programador uma total
fle0i(ilidade em seu manuseio3
'(ai0o apresentamos os m,todos dispon!veis para manuseio de stringfs3
string3lengt? 2 retorna o taman?o da string -uantidade de (ytes#
string3c?ar'tposição# 2 retorna o caracter da posição especificada inicia em K#
string3inde0Of8string8# 2 retorna o n@mero da posição onde começa a primeira 8string8
string3lastinde0Of8string8# 2 retorna o n@mero da posição onde começa a @ltima 8string8
string3su(stringinde0I4 inde0_# 2 retorna o conte@do da string -ue corresponde ao intervalo
especificado3 Começando no caracter posicionado em inde0I e terminando no caracter
imediatamente anterior ao valor especificado em inde0_3
E03
%odo B 8Elogica8
6arte B %odo3su(stringI4 a#
' variável 6arte rece(erá a palavra log#
string3to$pperCase# 2 %ransforma o conte@do da string para mai@sculo Cai0a 'lta#
string3to/oPerCase# 2 %ransforma o conte@do da string para min@sculo Cai0a [ai0a#
escape 8string8# 2 retorna o valor '+CII da string vem precedido de H#
unscape8string8# 2 retorna o caracter a partir de um valor '+CII precedido de H# Andice
MANIPULANDO DATAS
E0iste apenas uma função para -ue se possa o(ter a data e a ?ora3 e a função &ate#3 Esta função
devolve data e ?ora no formato:&ia da semana4 5ome do m9s4 &ia do m9s4
.ora:Minuto:+egundo e 'no
E03
Fri May _a Id:JW:K_ I``d
6ara se o(ter os dados separadamente4 e0istem os seguintes m,todos:
get&ate# 2 O(t,m o dia do m9s num,rico de I a LI#
get&ay# 2 O(t,m o dia da semana K a d#
getMont?# 2 O(t,m o m9s num,rico de K a II#
get\ear# 2 O(t,m o ano
get.ours# 2 O(t,m a ?ora num,rico de K a _L#
getMinutes# 2 O(t,m os minutos num,rico de K a J`#
get+econds# 2 O(t,m os segundos num,rico de K a J`#
5o e0emplo a(ai0o o(teremos o dia da semana3 6ara tal4 utili"aremos a variável &ata%oda
para arma"enar data>?ora e a variável &ia.o)e para arma"enar o n@mero do dia da semana3
&ata%oda B neP &ate#
&ia.o)e B &ata%oda3get&ay#
6ara o(ter o dia da semana alfa4 teremos -ue construir uma ta(ela com os dias da semana e
utili"ar a variável &ia.o)e como inde0ador3
function Cria%a( n# S
t?is3lengt? B n
for var 0 B I X 0;B n X 0FF#
S t?isU0V B 88 T T
5ome&ia B neP Cria%a(M#
5ome&iaUKV B 8&omingo8
5ome&iaUIV B 8+egunda8
5ome&ia U_V B 8%erça8
5ome&iaULV B 8buarta8
5ome&iaUaV B 8buinta8
5ome&iaUJV B 8+e0ta8
5ome&iaUdV B 8+á(ado8
&ia+emana B 5ome&iaU&ia.o)eV
6ara criar uma variável tipo &ate com o conte@do informado pela aplicação4 e0iste o m,todo
set3 'ssim4 temos os seguintes m,todos: set&ate4 set&ay4 setMont?4 set\ear4 set.ours4
setMinutes e set+econds3
+eguindo o e0emplo acima4 para mudar o m9s para novem(ro4 ter!amos:
&ata%oda3setMont?IK#
E0emplos adicionais serão encontrados no cap!tulo 8$sando %imer e &ate Andice
INTERAGINDO COM O USUÁRIO
' interação com o usuário se dá atrav,s de o()etos para entrada de dados te0tos#4 marcação de
opções radio4 c?ec1(o0 e com(o#4 (otões e lin1Qs para outras páginas3
Conceitualmente4 os o()etos são divididos em: Input4 %e0tarea e +elect3
O o()eto Input divide2se propriedade %ype# em:
g6assPord g%e0t g.idden gC?ec1(o0 g<adio g[utton g<eset g+u(mit
' construção destes o()etos , feita pela linguagem .%M/ .iper%e0t Mar12up /anguage#3
6ortanto4 , aconsel?ável -ue se)am criados utili"ando2se ferramentas de geração de páginas
.%M/4 como o .ot&og ou4 mais recomendado4 Front6age3
O()eto Input %EN%
e o principal o()eto para entrada de dados3
+uas principais propriedades são: type4 si"e4 ma0lengt?4 name e value3
typeBte0t : Especifica um campo para entrada de dados normal
si"e : Especifica o taman?o do campo na tela3
ma0lengt? : Especifica a -uantidade má0ima de caracteres permitidos3
name : Especifica o nome do o()eto
value : 'rma"ena o conte@do do campo3
Os eventos associados a este o()eto são: onc?ange4 on(lur4 onfocus e onselect3
E0:
;form nameB8%%e0t8=
;p=Entrada de %e0to ;input typeBte0t si"eB_K ma0lengt?BLK nameB8C0%e0to8 valueB88
onc?angeB8alert QZoce digitou Q F C0%e0to3value#8=
;>p=
;>form=
O()eto Input 6'++7O<&
e o o()eto para entrada de +en?as de acesso passPord#3 Os dados digitados neste o()eto são
criptografados e4 só são interpretados vistos# pelo 8server84 por ra"ões de segurança3
+uas principais propriedades são: type4 si"e4 ma0lengt?4 name e value3
typeBpassPord : Especifica um campo para entrada de sen?a3 Os dados digitados são
su(stituidos na tela# por 8G83
si"e : Especifica o taman?o do campo na tela3
ma0lengt? : Especifica a -uantidade má0ima de caracteres permitidos3
name : Especifica o nome do o()eto
value : 'rma"ena o conte@do digitado no campo3
Os eventos associados a este o()eto são: onc?ange4 on(lur4 onfocus e onselect3
E0:
;form nameB8%6assPord8=
;p=Entrada de +en?a;input typeBpassPord si"eBIK ma0lengt?BIK nameB8+en?a8 valueB88=
;>p=
;>form=
O()eto Input .I&&E5
e um o()eto semel?ante ao input te0t4 por,m4 invis!vel para o usuário3 Este o()eto deve ser
utili"ado para passar informações ao 8server8 -uando o formulário for su(metido# sem -ue o
usuário tome con?ecimento3 +uas propriedades são: name e value3
name : Especifica o nome do o()eto3
value : 'rma"ena o conte@do do o()eto
E0:
;form nameB8%.idden8=
;input typeB?idden si"eB_K ma0lengt?BLK nameB8.d%e0to8 valueB88 =
;>form=
;>p=
O()eto Input C.EC^[ON
+ão o()etos -ue permitem ao usuário ligar ou desligar uma determinada opção3
+uas principais propriedades são: name4 value e c?ec1ed3
name : Especifica o nome do o()eto
value : Especifica o valor -ue será enviado ao 8server8 se o o()eto estiver ligado c?ec1ed#3
Caso se)a omitido4 será enviado o valor default 8on8 3
Esta propriedade tam(,m serve para ativar comandos lógicos4 testando2se a condição
de 8c?ec1ed83
c?ec1ed : Especifica -ue o o()eto inicialmente estará ligado
O @nico evento associado a este o()eto , onclic13
E0:
5o e0emplo a(ai0o4 criaremos um o()eto input3te0t e tr9s o()etos c?ec1(o03 O primeiro
c?ec1(o04 -uando ativado4 transformará o te0to em caracteres min@sculos3 O segundo c?ec1(o04
-uando ativado4 transformará o te0to em caracteres mai@sculos3 O terceiro c?ec1(o04 -uando
ativado4 dará um aviso do conte@do -ue será rece(ido pelo 8server8 caso o formulário se)a
su(metido para este3
;+C<I6%=
function 'ltMaiusc # S
document3%C?ec13Muda3value B document3%C?ec13Muda3value3to$pperCase#
document3%C?ec13OptI3c?ec1ed B false
T
function 'ltMinusc # S
document3%C?ec13Muda3value B document3%C?ec13Muda3value3to/oPerCase#
document3%C?ec13Opt_3c?ec1ed B false
T
;>+C<I6%=
;p=
;form nameB8%C?ec18=
Muda Case ;input typeBte0t si"eB_K ma0lengt?B_K nameB8Muda8= ;>p=
;p=
Minusculo;input typeBc?ec1(o0 nameB8OptI8 valueB8I8 c?ec1ed
onclic1B8if t?is3c?ec1ed#
S 'ltMinusc# T 8=
Maiusculo;input typeBc?ec1(o0 nameB8Opt_8 valueB8_8
onclic1B8if t?is3c?ec1ed#
S 'ltMaiusc# T 8=
&emo valor;input typeBc?ec1(o0 nameB8OptL8
onclic1B8if OptL3c?ec1ed#
Salert Q+erver rece(era B Q F OptL3value# T 8=
;>p=
;>form=
E0iste ainda uma outra forma de manipular este o()eto4 em forma de array4 -ue , a seguinte:
form3elementsUinde0V3propriedade3 Esta não , uma (oa forma por-ue o inde0 , @nico dentro de
um formulário4 e0igindo muito cuidado -uando se acrescenta ou se deleta um o()eto4 pois4 neste
caso4 ?averá um natural deslocamento do inde04 podendo comprometer a lógica3
O()eto Input <'&IO
+ão o()etos -ue permitem ao usuário a escol?a de apenas uma alternativa4 diante de uma s,rie de
opções3
+uas principais propriedades são: name4 value e c?ec1ed3
name : Especifica o nome do o()eto3 6ara caracteri"ar uma mesma s,rie de opções4 todos os
o()etos desta s,rie t9m -ue ter o mesmo 8name83
value : Especifica o valor -ue será enviado ao 8server8 se o o()eto estiver ligado c?ec1ed#3 Caso
se)a omitido4 será enviado o valor default 8on8 3 Esta propriedade tam(,m serve para
ativar comandos lógicos4 testando2se a condição de 8c?ec1ed83
c?ec1ed : Especifica -ue o o()eto inicialmente estará ligado
6ara utili"ação deste o()eto , importante o con?ecimento de outras propriedades associadas:
O()eto3lengt? : <etorna a -uantidade de opções e0istentes na lista
O()eto3Uinde0V3value : retorna o te0to value# associado a cada opção
O()eto3Uinde0V3c?ec1ed : retorna verdadeiro ou falso
O @nico evento associado a este o()eto , onclic13
E03 5o e0emplo a(ai0o temos dois setQs de o()etos radio3 O primeiro tem o o()etivo de mudar a
cor de fundo do documento atual3 O segundo tem o o()etivo levar informações ao 8server83
;p=<adio;>p=
;p= ;input typeBradio nameB8<ad8 valueB8I8
onclic1B8document3(gColorBQgreenQ8= Fundo Zerde
;input typeBradio nameB8<ad8 valueB8_8
onclic1B8document3(gColorBQ(luevioletQ8= Fundo Zioleta
;input typeBradio nameB8<ad8 valueB8L8
onclic1B8document3(gColorBQhFFFFKKQ8= Fundo 'marelo
;>p=
O()eto Input [$%%O5
Este o()eto tem por finalidade criar um (otão ao -ual se possa atrelar operações lógicas4 a serem
e0ecutadas -uando o mesmo rece(er um clic13
+uas propriedades são: name e value3
name : Especifica o nome do o()eto3
value : Especifica o nome -ue aparecerá so(re o (otão
O @nico evento associado a este o()eto , onclic13
E03
;p=
;form met?odB86O+%8 nameB8%st[utton8=
&igite um %e0to ;input typeBte0t si"eBLK ma0lengt?BLK nameB8%este8 valueB88=
;>p=;p=
Clic1 no [otao ;input typeB(utton nameB8[teste8 valueB8[otao de teste8
onclic1B8alert QZoce digitou: Q F %st[utton3%este3value#8=
;>p=
;>form=
O()eto Input <E+E%
Este o()eto , um (otão -ue tem por finalidade4 @nica4 limpar os campos digitados pelo usuário4
restaurando o conte@do do formulário para os valores iniciais3
e recomendável a utili"ação deste o()eto4 para facilitar o usuário a limpar suas informações4 uma
ve" -ue a utili"ação da opção 8reload8 do 8(roPser8 -ue seria uma forma# não perde as
infromações digitadas3
+uas propriedades são: name e value3
name : Especifica o nome do o()eto3
value : Especifica o nome -ue aparecerá so(re o (otão
O @nico evento associado a este o()eto , onclic13
E03
;p=
;form met?odB86O+%8 nameB8%este<es8=
&igite um %e0to;input typeBte0t si"eBIK ma0lengt?B_K nameB8%este8 valueB88=
'pague o %e0to ;input typeBreset nameB8[res8 valueB8<eset8=
;>form=
;>p=
O()eto Input +$[MI%
Este o()eto , um (otão -ue tem por finalidade su(meter enviar# o conte@do dos o()etos do
formulário ao 8server83 O formulário será su(metido R $</ especificada na propriedade 8action8
do formulário3
+uas propriedades são: name e value3
name : Especifica o nome do o()eto3
value : Especifica o nome -ue aparecerá so(re o (otão
O @nico evento associado a este o()eto , onclic13 Em(ora se possa atrelar lógica a este evento4
não se pode evitar -ue o formulário se)a su(metido4 portanto4 não , aconsel?avel o seu uso3 Mais
seguro e mais @til , a utili"ação da propriedade on+u(mit do formulário3 Este permite -ue se
atrele lógica e decida2se pela su(missão ou não3
E03
;script=
function %estaZal# S
if document3%este+u(3%este3value BB 88# S
alert 8Campo nao 6reenc?ido333Form nao +u(metido8#
return false T
else S
alert 8%udo O13333Form +u(metido8#
return true T T
;>script=
;p=
;form met?odB86O+%8 nameB8%este+u(8
on+u(mitB8return %estaZal#8
actionB8?ttp:>>IK3K3J3_>scripts>isapielo3dll>v(lo)a3lo)a3action8=
&igite um %e0to ;input typeBte0t si"eBIK ma0lengt?BIK nameB8%este8 valueB88=
[otao +u(mit ;input typeBsu(mit nameB8[su(8 valueB8Manda p>+erver8=
;>p=
;>form=
5o e0emplo acima4 o formulário está sendo su(metido a $</ 8IK3K3J3_8 -ue , o endereço I6
de um 8+erver8#3 Este servidor está rodando o 8Microsoft Internet Information +erver83 Estamos
enviando os dados a um 8O/E84 -ue está no su(diretório 8scripts84 c?amado 8isapielo3dll84 -ue
tem
por o()etivo fa"er a conecção com aplicações escritas em Z[3 ' aplicação Z[ -ue está sendo
c?amada4 , um O/E de nome 8v(lo)a8 no -ual estamos acionando a classe 8lo)a8 e o m,todo
8action83
' aplicação Z[4 deste e0emplo4 fará apenas a devolução dos dados rece(idos pelo +erver3
O()eto %EN%'<E'
e um o()eto para entrada de dados em um campo de m@ltiplas lin?as3 +uas principais
propriedades são: name4 roPs e cols3
name : Especifica o nome do o()eto
roPs : Especifica a -uantidade de lin?as -ue aparecerão na tela
cols : Especifica a -uantidade de caracteres -ue aparecerão em cada lin?a
value : 'cessa o conte@do do campo via programação3
Os eventos associados a este o()eto são: onc?ange4 on(lur4 onfocus e onselect3
E0:
;form nameB8%este%e0tarea8=
;p=
%e0to de M@ltiplas /in?as ;te0tarea nameB8Mult%e0t8 roPsB_ colsBaK=
6rimeira lin?a do te0to inicial
segunda lin?a do te0to inicial
;>te0tarea=
;>p=
O()eto +E/EC%
e um o()eto para entrada de opções4 onde o usuário4 a partir de uma lista de alternativas4
seleciona uma ou mais opções3
+uas principais propriedades são: name4 si"e4 value e multiple3
name : Especifica o nome do o()eto
si"e : Especifica a -uantidade de opções -ue aparecerão na tela simultaneamente
value : 'ssocia um valor ou string para cada opção opcional#
multiple : Especifica a condição de m@ltipla escol?a usando2se a tecla Ctrl#
6ara utili"ação deste o()eto , importante o con?ecimento de outras propriedades associadas:
O()eto3lengt? : <etorna a -uantidade de opções e0istentes na lista
O()eto3selectedinde0 : <etorna o 8inde08 do o()eto selecionado primeiro B K#
O()eto3optionsUinde0V3te0t : retorna o te0to e0terno associado a cada opção
O()eto3optionsUinde0V3value : retorna o te0to interno value# associado a cada opção
O()eto3optionsUinde0V3selected : retorna verdadeiro ou falso
Os eventos associados a este o()eto são: onc?ange4 on(lur e onfocus3
E0I:
5este e0emplo , importante o(servar os seguintes aspectos:
a# ' lista permite apenas uma seleção
(# ' -uarta opção aparecerá inicialmente selecionada propriedade 8selected8#
c# 5ão utili"amos a propriedade 8value83 'ssim4 a propriedade 8te0t8 e a propriedade 8value8
passam a ter o mesmo valor4 ou se)a4 o valor e0terno -ue aparece na tela3
;script=
function ZerselectCampo# S
Icom(o B Campo3selectedInde0
alert 8Zoce escol?eu 8 F Campo3optionsUIcom(oV3te0t# T
;>script=
;p=
O()eto +elect ;select nameB8Com(oI8 si"eBI onc?angeB8ZerselectCom(oI#8=
;option=Opcao I
;option=Opcao _
;option=Opcao L
;option selected=Opcao a recomendada#
;option=Opcao J
;option=Opcao d
;>select=
;>p=
E0_:
5este e0emplo , importante o(servar os seguintes aspectos:
a# ' lista permite m@ltiplas seleções
(# $tili"amos a propriedade 8value83 'ssim as propriedades 8te0t8 e 8value8
t9m valores diferentes: te0t retornará Escol?a I a Escol?a a e value
retornará /istI a /ista3
c# O parâmetro passado4 -uando da ocorr9ncia do evento on(lur4 foi t?is3
Esta diretiva significa -ue estamos passando este o()eto3
;script=
function Zermult/ista# S
var opcoes B 88
for i B K X i ; /ista3lengt? X iFF# S
if /ista3optionsUiV3selected# S
opcoes FB /ista3optionsUiV3value F 84 8# T
T
alert 8's opcoes escol?idas foram : 8 F opcoes# T
;>script=
;p=
O()eto +elect_ ;select nameB8Com(o_8 si"eBa multiple on(lurB8Zermultt?is#8=
;option valueB8/istI8=Escol?a I ;>option=
;option valueB8/ist_8=Escol?a _ ;>option=
;option valueB8/istL8=Escol?a L ;>option=
;option valueB8/ista8=Escol?a a ;>option=
;>select=
;>p=
Focando um O()eto
Este m,todo permite -ue o cursor se)a ativado em um determinado o()eto focado#3 Isso pode ser
feito na carga do documento4 a partir da ocorr9ncia de um evento ou mesmo dentro de uma
função3
O(serve -ue at, agora o usuário tin?a -ue dar um 8Clic18 para focar o o()eto dese)ado3
&e forma semel?ante e0iste o m,todo 8+elect83 Este m,todo marca o conte@do do o()eto com
uma tar)a ro0a4 permitindo ao usuário4 em caso de su(stituição do conte@do do campo4 não ter
-ue deletar o conte@do anterior4 pois4 com este m,todo4 a deleção se dá de forma automática
-uando da digitação do novo conte@do3
Os m,todos 8Focus8 e 8+elect8 podem ser utili"ados nos seguintes o()etos:
passPord4 select4 te0t e te0tarea
5o e0emplo a(ai0o4 utili"aremos o evento onload para setar o focus para o primeiro o()eto do
formulário e os m,todos focus e select para4 na rotina de cr!tica dos dados4 focar o o()eto -ue
contiver erro de preenc?imento3
E03
;(ody onloadB8document3%stFocus35ome3focus#8=
;script=
&dosO1 B true
function Criticar# S
&adosO1 B false
&ata'tual B neP &ate#
Mes'tual B &ata'tual3getMont?# F I
'no'tual B &ata'tual3get\ear# F I`KK
5ome B document3%stFocus35ome3value
Mes B parseIntdocument3%stFocus3Mes3value#
'no B parseInt document3%stFocus3'no3value#
>>
if 'no ; I`KK#
S'no B 'no F I`KK T
if 5ome BB 88#
S alert 8Informe o seu 5ome4 5ão dei0e em (ranco8#
document3%stFocus35ome3focus#
return T
if Mes ; I EE Mes = I_#
S alert 8O M9s informado não , válido4 informe corretamente8# document3%stFocus3Mes3focus#
document3%stFocus3Mes3select#
return T
if 'no BB 'no'tual DD Mes = Mes'tual#
S alert 8O per!odo informado , superior a data atual8#
document3%stFocus3Mes3focus#
document3%stFocus3Mes3select#
return T
if 'no ; I``d EE 'no = 'no'tual#
S alert 8O 'no informado não , válido4 informe corretamente8# document3%stFocus3'no3focus#
document3%stFocus3'no3select#
return T
&adosO1 B true
T
;>script=
;form nameB8%stFocus8 met?odB86O+%8=
;p=
Informe o seu 5ome ;input typeBte0t si"eBLK ma0lengt?BLK nameB85ome8=
;>p=
;p= Informe o m9s dese)ado ;input typeBte0t si"eB_ ma0lengt?B_ nameB8Mes8=
;>p=
;p= Informe o ano dese)ado ;input typeBte0t si"eBa ma0lengt?Ba nameB8'no8 =
;>p=
;p= ;input typeB(utton nameB8%esta8 valueB8%estar Zalidade8
onclic1B8Criticar#
if &adosO1#
Salert Q%odos os &ados estão CorretosQ# T 8=
;>p=
;>form=
;>(ody= Andice
USANDO TIMER e DATE
e um m,todo -ue permite a programação para -ue uma determinada ação só ocorra após o
transcurso de um determinado tempo3
Zariável B set%imeout 8ação84 tempo#
Onde:
Zariável , uma variável apenas para controle do timer
ação , a ação -ue se -uer reali"ar3
tempo , o tempo de espera para -ue a ação ocorra4 em milisegundos3
O(s:
e importante o(servar -ue a ação só ocorrerá uma ve"3 6ara -ue a ação volte a ocorrer4 será
necessário repetir o comando dentro da ação4 o(tendo2se4 assim4 um /OO63
6ara interromper um /OO64 provocado pela forma acima4 deve2se utili"ar o seguinte m,todo:
clear%imeout Zariável#
Onde:
Zariável , o nome da variável de controle do timer3
'(ai0o encontra2se um e0emplo de um formulário -ue apresenta a data e ?ora atual4 atuali"ando
os dados a cada um segundo4 tendo dois (otões de rádio -ue tem a função de ativar e desativar a
atuali"ação dos dados3 'presenta tam(,m4 fora do formulário4 a data contendo dia e m9s por
e0tenso3
;script=
function .o)e# S
Contr<elogio B set%imeout 8.o)e#84 IKKK#
.r B neP &ate#
dd B .r3get&ate#
mm B .r3getMont?# F I
aa B .r3get\ear#
?? B .r3get.ours#
min B .r3getMinutes#
seg B .r3get+econds#
&ata'tual B dd ; IK# Y 8K8 F dd F 8>8 : dd F 8>8#
&ata'tual FB mm ; IK# Y 8K8 F mm F 8>8 F aa : mm F 8>8 F aa#
.ora'tual B ?? ; IK# Y 8K8 F ?? F 8:8 : ?? F 8:8#
.ora'tual FB min ; IK# Y 8K8 F min F 8:8 : min F 8:8#
.ora'tual FB seg ; IK# Y 8K8 F seg : seg#
document3&ata.ora3&ata3valueB&ata'tual
document3&ata.ora3.ora3valueB.ora'tual
T
>>
function Cria'rray n# S
t?is3lengt? B n T
>>
5ome&ia B neP Cria'rrayM#
5ome&iaUKV B 8&omingo8
5ome&iaUIV B 8+egunda8
5ome&iaU_V B 8%erça8
5ome&iaULV B 8buarta8
5ome&iaUaV B 8buinta8
5ome&iaUJV B 8+e0ta8
5ome&iaUdV B 8+á(ado8
>>
5omeMes B neP Cria'rrayI_#
5omeMesUKV B 8*aneiro8
5omeMesUIV B 8Fevereiro8
5omeMesU_V B 8Março8
5omeMesULV B 8'(ril8
5omeMesUaV B 8Maio8
5omeMesUJV B 8*un?o8
5omeMesUdV B 8*ul?o8
5omeMesUMV B 8'gosto8
5omeMesUWV B 8+etem(ro8
5omeMesU`V B 8Outu(ro8
5omeMesUIKV B 85ovem(ro8
5omeMesUIIV B 8&e"em(ro8
>>
&ataI B neP &ate#
dia B &ataI3get&ate#
dias B &ataI3get&ay#
mes B &ataI3getMont?#
ano B &ataI3get\ear#
document3Prite 8<ecife4 8 F 5ome&iaUdiasV F 8 8 F dia F 8 de 8 F
5omeMesUmesV F 8 de 8 F ano F I`KK # #
;>script=
;form nameB8&ata.ora8=
&ata : ;input typeBte0t si"eBIK ma0lengt?BIK nameB8&ata8=
.ora : ;input typeBte0t si"eBIK ma0lengt?BIK nameB8.ora8=
;input typeBradio nameB8[otao8 valueB86ara <elogio8 c?ec1ed
onclic1B8clear%imeoutContr<elogio#8=&esativa
;input typeBradio nameB8[otao8 valueB8'tiva <elogio8
onclic1B8Contr<elogio B set%imeoutQ.o)e#Q4 IKKK#8='tiva
;>form= Andice
ABRINDO NOVAS JANELAS
5este cap!tulo mostraremos como podem ser a(ertas novas )anelas so(re uma )anela contendo o
documento principal3
e importante não confundir esta forma de a(rir )anelas com a divisão da tela em várias partes4 ou
mesmo com a c?amada de outras páginas3 6ara -ue não e0istam d@vidas4 e0plicaremos um pouco
so(re estes dois outros m,todos3
' divisão de uma tela em várias )anelas contendo documentos diferentes , feita atrav,s do o()eto
F<'ME do .tml3 5este caso4 a tela inteira , considerada como um Frame+et e cada parte em
-ue ela for dividida , considerada como um Frame3 Cada Frame , definido dentro do Frame+et
atrav,s da especificação dos parâmetros: H da tela na vertical cols#4 H da tela na ?ori"ontal
roPs# e nome de cada frame3 $ma ve" criado o Frame+et poderemos a(rir documentos distintos
em cada Frame3 6ara fa"er isto4 acrescente ao lin1 do documento a diretiva targetBnome do
frame3
E03
;?refB8Eventos3?tm8 targetB86rincipal8=
Isto fará com -ue o ar-uivo ?tml Eventos3?tm se)a a(erto dentro do frame de nome 6rincipal
' simples c?amade de outras telas documentos# , feita atrav,s do lin1 para o documento
dese)ado3
E03
;?refB8Eventos3?tm8 =
Isto fará com -ue o ar-uivo ?tml Eventos3?tm se)a a(erto em su(stituição a tela e0istente3
[em4 voltemos ao nosso caso -ue , a a(ertura de )anelas so(re um documento3 Isto , feito
atrav,s de comandos *ava+cript4 -ue permitem: '(rir uma )anela4 '(rir um documento dentro
desta )anela4 Escrever o conte@do da )anela4 Fec?ar a )anela e Fec?ar o documento3
'(rindo a *anela
' sinta0e geral deste m,todo , a seguinte:
Zariavel B PindoP3open 8$rl84 85ome da )anela84 8Opções8#
Onde:
Zariavel 2 5ome -ue será atri(uido como propriedade da )anela3
$rl 2 Endereço Internet onde a )anela será a(erta3 5ormalmente voce estará utili"ando a sua
própria $rl4 neste caso4 preenc?a com 883
5ome da *anela 2 e o nome -ue aparecerá no top da )anela %!tulo#
Opções 2 +ão as opções -ue definem as caracter!sticas da )anela4 -uais se)am:
gtool(ar 2 Cria uma (arra de ferramentas tipo 8[ac184 8ForPard84 etc3
glocation 2 '(re a (arra de location do (roPse
gdirectories 2 '(re a (arra de ferramentas tipo 87?atQs 5eP84 8.and(oo184 etc3
gstatus 2 '(re uma (arra de status no rodap, da )anela
gscroll(ars 2 '(re (arras de rolamento vertical e ?ori"ontal
gmenu(ar 2 Cria uma (arra de menu tipo 8File84 8Edit84 etc3
gresi"a(le 2 6ermite ao usuário redimencionar a )anela
gPidt? 2 Especifica a largura da )anela4 em pi0els
g?eig?t 2 Especifica a altura da )anela4 em pi0els
%odas as opções e0ceto Pidt? e ?eig?t# são (oleanas e podem ser setadas de duas formas3
E0emplo: 8tool(ar8 ou 8tool(arBI8# são a mesma coisa3 +e nada for especificado4 entende2se -ue
todas as opções estão ligadasX Caso se)a especificada -ual-uer opção4 será entendido -ue estão
ligadas apenas as opções informadas3
's opções devem ser informadas separadas por v!rgula4 sem espaço entre elas3
'(rindo um &ocumento
6ara a(rir um documento dentro da )anela4 deve ser utili"ado o seguinte m,todo:
Zariavel3document3open#
Onde 8Zariavel8 , o nome da variável associada ao m,todo PindoP3open
Escrevendo no &ocumento
6ara escrever a tela no documento4 deve ser utili"ado o seguinte m,todo:
Zariavel3document3Prite 8Comandos ?tml4 Comandos *ava+cript4 %e0tos4 etc38#
Fec?ando a *anela
6ara fec?ar a )anela4 utili"e o seguinte m,todo:
Zariavel3document3Prite 8PindoP3close#8#
Fec?ando o &ocumento
6ara fec?ar o documento4 utili"e o seguinte m,todo:
Zariavel3document3close #
' seguir4 apresentamos um e0emplo no -ual estamos a(rindo um documento onde o usuário
escol?erá uma opção Elógica ou <ecife# e dará um Clic1 em um (otão 5ova *anela#3 5este
momento será a(erta uma nova )anela -ue conterá a foto escol?ida pelo usuário e um (otão -ue4
ao rece(er o Clic14 fec?ará a )anela3
5ormalmente4 -ual-uer ?ref ou src dentro de uma página4 por padrão4 acessa o ar-uivo ou a
imagem no mesmo diretório onde está a página atual4 a menos -ue se)a especificado um novo
camin?o 6at?#3
5o caso de a(ertura de uma nova )anela4 atrav,s do m,todo PindoP3open4 as versões mais
antigas dos (roPses não conseguem 8ver8 o 6at?4 sendo necessária a completa informação do
camin?o pat?# onde o ar-uivo ou imagem estão arma"enados4 em todas as c?amadas dos
comandos .tml ?ref ou src3
O(serve -ue na função estamos utili"ando dois novos m,todos:
navigator3appZersion para verificarmos a versão do (roPse -ue esta sendo utili"ado
document3location3 para o(termos o 6at? da locali"ação do ar-uivo .tml -ue está correntemente
em uso3
5o e0emplo a(ai0o estamos4 inicialmente4 identificando a versão do (roPse3Caso se)a antiga4
para não escrevermos todo o camin?o a cada c?amada e ainda4 considerando -ue os ar-uivos
c?amados estão no mesmo diretório da página atual4 estamos o(tendo o 6at? do ar-uivo atual e
eliminando o nome do ar-uivo -ue está na @ltima referencia do 6at?3 buando fi"ermos a
c?amada das imagens comando src# só será necessário a concatenação do nome do ar-uivo
c?amado com a rai" do pat? -ue4 no e0emplo4 arma"enamos na variável de nome /ocal3
;script=
function '(re)anelaOpcao# S
Zersao B navigator3appZersion
Zersao B Zersao3su(stringK4 I#
/ocal B 88
if Zersao ; L# S
/ocal B document3location
$lt/oc B /ocal3lastInde0Of8>8#
/ocal B /ocal3su(stringK4 $lt/oc F I#
T
>>
5ova*anela B PindoP3open 884 8Outra*anela84 8Pidt?BLKK4?eig?tBaKK8#
5ova*anela3document3open#
5ova*anela3document3Prite 8;?tml=;?ead=;title=5ova *anela8#
5ova*anela3document3Prite 8;>title=;>?ead=;(ody (gcolorBQP?iteQ=8#
5ova*anela3document3Prite 8;form=8#
if Opcao BB I#
S 5ova*anela3document3Prite 8;(r=/ogomarca Elogica;?r=;(r=8#
5ova*anela3document3Prite
8;img Pidt?B_KK ?eig?tB_KK srcB8 F /ocal F 8Marcaelo3gif=8# T
else
S 5ova*anela3document3Prite 8;(r=<ecife 'lto 'stral;?r=;(r=8#
5ova*anela3document3Prite
8;img Pidt?BIJK ?eig?tB_KK srcB8 F /ocal F 8<ecife3gif=8# T
>>
5ova*anela3document3Prite 8;(r=;?r=;p=;>p=;>form=8#
5ova*anela3document3Prite 8;form=;input typeBQ(uttonQ nameBQFec?aQ8 F
8valueBQFec?a *anelaQ8 F 8onclic1BQPindoP3close#Q=8#
5ova*anela3document3Prite 8;>form=;>(ody=;>?tml=8#
5ova*anela3document3close# T
;>script=
;(ody=
;p=;>p=
;p=Escol?a a foto a ser apresentada na nova )anela:;>p=
;form met?odB86O+%8 nameB8FormI8=
;p=
;input typeBradio nameB8Opcao8 valueB8I8 c?ec1ed=Elogica
;input typeBradio nameB8Opcao8 valueB8_8=<ecife
;>p= ;p=
;input typeB8(utton8 nameB8Envia8 valueB85ova *anela8
onclic1B8if FormI3OpcaoUKV3c?ec1ed BB true#
S'(re)anelaFormI3OpcaoUKV3value# T
else
S'(re)anelaFormI3OpcaoUIV3value# T 8=
;>p=
;>form=
;>(ody=