Super Apostila JavaScript

rea Inicial Scripts
www.areainicial.hpg.com.br
Apostila de JavaScripts
7 de August de 201
SUPER APOSTILA JAVASCRIPTS
!ste trabalho n"o visa esgotar todo assunto re#erente a JavaScript$ mas sim$ como o pr%prio
t&tulo sugere$ ser um guia de re#er'ncia para consultas r(pidas. )or este motivo$ assumo *ue
voc' +( possui conhecimentos substanciais sobre programa,"o -a linguagem realmente n"o
. importante/$ e *ue conceitos como la,os e estruturas de decis"o +( s"o de seu
conhecimento.
0 JavaScript utili1a os recursos da programa,"o orientada a ob+etos$ e como a
#inalidade deste trabalho n"o . ensinar voc' a programar$ os #undamentos da )00$ n"o
ser"o abordados pro#undamente$ presumo *ue voc' +( tenha algum conhecimento sobre
esse tipo de programa,"o.
!m resumo$ o *ue *uero #a1er nesta apostila . mostrar2lhe por*ue o JavaScript . t"o
3til e o *ue voc' precisa saber para torn(2lo parte de sua cai4a de #erramentas no
desenvolvimento e 5incrementa,"o5 de suas 6ome2)ages.
)ara #acilitar o aprendi1ado$ este tutorial est( dividido em partes de #orma a
proporcionar uma se*u'ncia l%gica$ *ue deve ser seguida para os *ue sabem 5nada5 sobre o
assunto.
Introduo
0 *ue . JavaScript7
JavaScript . uma nova linguagem para cria,"o de 6ome2)ages. 8un,9es escritas em
JavaScript podem ser embutidas dentro de seu documento 6:;<. =om JavaScript voc'
tem muitas possibilidades para 5incrementar5 seu documento 6:;< com elementos
interessantes. )or e4emplo$ voc' ser( capa1 de responder #acilmente a eventos iniciados
pelo usu(rio. Alguns e#eitos *ue s"o poss&veis agora com JavaScript antes eram poss&veis
apenas com =>I. Assim voc' pode criar na verdade so#isticadas p(ginas com a a+uda do
JavaScript. !4istem atualmente$ muitos e4emplos sobre JavaScript na Internet. )ara ter uma
id.ia do potencial desta linguagem$ melhor voc' dar uma olhada em algumas p(ginas
real,adas com JavaScript. ?oc' pode encontrar muitos lin@s em >amelan AB
httpCDDwww.gamelan.com -na se,"o JavaScript/.
Eual a di#eren,a entre JavaScript e Java7
Apesar dos nomes bem parecidos$ Java n"o . o mesmo *ue JavaScriptF !stas s"o duas
t.cnicas di#erentes de programa,"o na Internet. Java . uma linguagem de programa,"o.
JavaScript . uma linguagem de hiper2te4to. A di#eren,a . *ue voc' realmente pode criar
programas em Java. ;as muitas ve1es voc' precisa apenas criar um e#eito bonito sem ter
*ue se incomodar com programa,"o. A solu,"o ent"o . JavaScript pois . #(cil de entender e
usar. )odemos di1er *ue JavaScript . mais uma e4tens"o do 6:;< do *ue uma linguagem
de programa,"o propriamente dita. G claro *ue esta n"o . uma de#ini,"o o#icial$ pois meu
pensamento . #a1er esta distin,"o entre Java e JavaScript de maneira #(cil para o melhor
entendimento de todos. ?oc' pode encontrar mais in#orma,9es sobre Java e JavaScript em
httpCDDwww.gamelan.com.
rea Inicial Scripts
#ernandodercoliHbol.com.br
1
rea Inicial Scripts
0nde os te4tos JavaScript podem ser e4ecutados7
0 primeiro browser a suportar JavaScript #oi o Ietscape Iavigator 2.0. G claro *ue as
vers9es posteriores tamb.m trabalham com JavaScript. ?oc' deve saber *ue Java n"o
#unciona no Ietscape Iavigator 2.0 ou posterior. ;as isso n"o . verdade para JavaScript 2
ainda *ue e4istam alguns problemas com as di#erentes vers9es di#erentes de JavaScript. A
vers"o para o 5;ac5 parece apresentar muitos bugs.
=onsidera,9es iniciais
!m documentos 6:;<$ a utili1a,"o da linguagem JavaScript$ se d( sob a #orma de #un,9es
-applets/$ as *uais s"o chamadas em determinadas situa,9es ou em resposta a determinados
eventos$ estas #un,9es podem estar locali1adas em *ual*uer parte do c%digo 6:;<$ a 3nica
restri,"o . *ue devem come,ar com a declara,"o JS=KI):B e termina com o respectivo
JDS=KI):B$ por conven,"o costuma2se colocar todas as #un,9es no in&cio do documento
-estre as :A>s J6!ALB e JD6!ALB$ isso para garantir *ue o c%digo JavaScript se+a
carregado antes *ue o usu(rio intera+a com a 6ome )age/$ ou se+a$ antes do JM0LNB.
!4emploC
J6:;<B
J6!ALB
J:I:<!B!4emploJD:I:<!B
...
Se houvesse alguma #un,"o seria bom declar(2la a*uiFFF
...
JD6!ALB
JM0LNB
!sta linha est( escrita em 6:;<
JS=KI):Bdocument.write-5A*ui +( . JavaScript5/OJDS=KI):B
?oltamos para o 6:;<
JDM0LNB
JD6:;<B
!ste e4emplo mostraria o seguinteC
!sta . uma linha escrita em 6:;<
A*ui +( . JavaScript
!ste e4emplo realmente n"o . dos mais 3teis 2 poderia ter sido escrito mais #acilmente em
6:;< puro. 0 ob+etivo #oi apenas demonstrar o uso das :A>s JS=KI):B e JDS=KI):B$
tudo *ue est( entre essas :A>s . encarado como JavaScript.
rea Inicial Scripts
2
rea Inicial Scripts
G importante ressaltar$ *ue como no =PP$ as linhas se+am terminadas comO -ponto e
virgula/ a menos *ue a pr%4ima instru,"o se+a um !<S! e se voc' precisar escrever mais de
uma linha para e4ecutar uma condi,"o se+a ela em uma estrutura 8or$ I# ou Qhile$ este
bloco de instru,9es deve estar entre R S -chaves/. Inclusive a de#ini,"o de #un,9es segue
este modelo$ ou se+a$ todo o c%digo da #un,"o deve estar limitado por R -no in&cio/ e S -no
#inal/.
! se o browser n"o possuir suporte a JavaScript7
Tm browser *ue n"o suporta JavaScript$ ele n"o conhece a :A> JS=KI):B. !le ignora a
:A> e logicamente tudo todo o c%digo *ue estiver sendo limitado por ela$ mostrando todo
o c%digo na tela como se #osse um simples te4to 6:;<. Leste modo o usu(rio veria o
c%digo JavaScript do seu programa dentro do documento 6:;< e como certamente essa
n"o deve ser sua inten,"o$ e4iste um meio de esconder o c%digo JavaScript dos browsers
*ue n"o conhecem esta linguagem$ basta utili1ar os coment(rios 6:;< JF22 e 22B. 0
c%digo do nosso e4emplo anterior #icaria assimC
J6:;<B
J6!ALB
J:I:<!B !4emplo JD:I:<!B
...
Se houvesse alguma #un,"o seria bom declar(2la a*uiFFF
...
JD6!ALB
JM0LNB
!sta linha est( escrita em 6:;<
JS=KI):B
JF22 !sconde o c%digo JavaScript dos browsers mais antigos
document.write-5A*ui +( . JavaScript5/O
DD 22B
JDS=KI):B
JDM0LNB
JD6:;<B
Se o browser n"o suportar JavaScript e n"o inserirmos o coment(rio 6:;<$ o *ue
apareceria na tela seriaC
rea Inicial Scripts
U
rea Inicial Scripts
!sta . uma linha escrita em 6:;<
document.write-5A*ui +( . JavaScript5/O
Iote *ue esse arti#&cio n"o esconde completamente o c%digo JavaScript$ o *ue ele #a1 .
prevenir *ue o c%digo se+a mostrado por browsers mais antigos$ por.m o usu(rio tem
acesso a todas as in#orma,9es do c%digo #onte de sua 6ome )age -tanto 6:;<$ *uanto
JavaScript/$ para isso ele s% precisa escolher a op,"o Locument Source$ no menu ?iew.

rea Inicial Scripts
rea Inicial Scripts

Iniciando
?ari(veis
!m JavaScript$ vari(veis dinVmicas podem ser criadas e iniciali1adas sem declara,9es
#ormais. !4istem dois tipos de abrang'ncia para as vari(veisC
>lobal 2 LeclaradasDcriadas #ora de uma #un,"o. As vari(veis globais podem ser acessadas
em *ual*uer parte do programa.
<ocal 2 LeclaradasDcriadas dentro de uma #un,"o. S% podem ser utili1adas dentro da #un,"o
onde #oram criadas e precisa ser de#inida com a instru,"o ?ar.
=om rela,"o W nomenclatura$ as vari(veis devem come,ar por uma letra ou pelo caractere
sublinhado XYX$ o restante da de#ini,"o do nome pode conter *ual*uer letra ou n3mero.
G importante ressaltar *ue a vari(vel =%digo . di#erente da vari(vel c%digo$ *ue por sua ve1
. di#erente de =0LI>0$ sendo assim$ muito cuidado *uando #or de#inir o nome das
vari(veis$ utili1e sempre um mesmo padr"o para de#ini2las.
)odem e4istir vari(veis globais com o mesmo nome de vari(veis locais$ por.m$ esta pr(tica
n"o . aconselh(vel.
!4istem tr's tipos de vari(veisC Ium.ricas$ Mooleanas e Strings.
=omo +( era de se esperar$ as vari(veis num.ricas s"o assim chamadas$ pois arma1enam
n3meros$ as Mooleanas valores l%gicos -:rueD8alse/ e as Strings$ se*Z'ncia de caracteres.
As strings podem ser delimitadas por aspas simples ou duplas$ a 3nica restri,"o . *ue se a
delimita,"o come,ar com as aspas simples$ deve terminar com aspas simples$ da mesma
#orma para as aspas duplas. )odem ser inclu&dos dentro de uma string alguns caracteres
especiais$ a saberC
[t 2 posiciona o te4to a seguir$ na pr%4ima tabula,"oO
[n 2 passa para outra linhaO
[# 2 #orm #eedO
[b 2 bac@ spaceO
[r 2 carrige return.
0 JavaScript reconhece ainda um outro tipo de contudo em vari(veis$ *ue . o IT<<. Ia
pr(tica isso . utili1ado para a manipula,"o de vari(veis n"o iniciali1adas sem *ue ocorra
um erro no seu programa.
Euando uma vari(vel possui o valor IT<<$ signi#ica di1er *ue ela possui um valor
desconhecido ou nulo$ o null n"o . igual a nada$ nem mesmo ao pr%prio null.
rea Inicial Scripts
\
rea Inicial Scripts
A representa,"o literal para IT<< . a string XnullX sem os delimitadores. Euando
re#erenciado por uma #un,"o ou comando de tela$ ser( assim *ue IT<< ser( representado.
0bserve *ue IT<< . uma palavra reservada.
?oc' pode trabalhar ainda com Arra]s$ mas para isso ser( necess(rio algum conhecimento
sobre )rograma,"o 0rientada a 0b+etos.

0peradores
Junto com #un,9es e vari(veis$ operadores s"o blocos de constru,"o de e4press9es. Tm
operador . semelhante a uma #un,"o no sentido de *ue e4ecuta uma opera,"o espec&#ica e
retorna um valor.
0peradores Tln(rios e bin(rios
:odos os operadores em JavaScript re*uerem um ou dois argumentos$ chamados operandos.
A*ueles *ue re*uerem um operando apenas s"o denominados operadores uln(rios$ e os *ue
re*uerem dois operandos s"o chamados de operadores bin(rios.
0perador de String
P 0perador de concatena,"o
!4emploC
Iome1A5Jos.5
Iome2A5Silva5
Iome A Iome1P5 da 5PIome2 DD 0 resultado .C 5Jos. da Silva5

0peradores ;atem(ticos
P Adi,"o
!4emploC
?01A\
?02A2
?A?01P?02 DD resulta emC 7

rea Inicial Scripts
^
rea Inicial Scripts
2 Subtra,"o
!4emploC
?01A\
?02A2
?A?012?02 DD resulta emC U

_ ;ultiplica,"o
!4emploC
?01A\
?02A2
?A?01_?02 DD resulta emC 10

D Livis"o
!4emploC
?01A\
?02A2
?A?01D?02 DD resulta emC 2.\

` ;%dulo da divis"o -resto/
!4emploC
?01A\
?02A2
?A?01`?02 DD resulta emC 1

PP Incremento. )ode acontecer de duas #ormasC PP?ari(vel ou ?ari(velPP!4emploC
rea Inicial Scripts
7
rea Inicial Scripts
?01 A \
?02 A PP?01 DD Kesulta em ^
?0U A ?01 DD Kesulta em ^
!4emploC
?01 A \
?02 A ?01PP DD Kesulta em \
?0U A ?01 DD Kesulta em ^

22 Lecremento. )ode acontecer de duas #ormasC 22?ari(vel ou ?ari(vel22!4emploC
?01 A \
?02 A 22?01 DD Kesulta em
?0U A ?01 DD Kesulta em
!4emploC
?01 A \
?02 A ?0122 DD Kesulta em \
?0U A ?01 DD Kesulta em

0peradores relacionais
J ;enor *ue

B ;aior *ue

A A Igual

FA Li#erente

rea Inicial Scripts
a
rea Inicial Scripts
BA ;aior ou igual

JA ;enor ou igual

0peradores l%gicos
bb ! l%gico

cc 0u l%gico

0peradores de atribui,"o
A Atribuir

PA Soma ou concatena,"o e atribui,"o. 4PA\ DD . o mesmo *ueC 4A4P\

2A Subtra,"o e atribui,"o. 42A\ DD . o mesmo *ueC 4A42\

_A ;ultiplica,"o e atribui,"o. 4_A\ DD . o mesmo *ueC 4A4_\

DA Livis"o e atribui,"o. 4DA\ DD . o mesmo *ueC 4A4D\

`A ;%dulo e atribui,"o. 4`A\ DD . o mesmo *ueC 4A4`\

0b+etos
Euando lemos um livro sobre 00)$ chegamos a incr&vel conclus"o de *ue o autor tenta nos
convencer de *ue um ob+eto pode ser *ual*uer coisa. 0 mais incr&vel ainda . *ue ele est(
absolutamente certoF
I"o pretendo a*ui discutir a respeito desse assunto$ vou apenas relembrar alguns conceitos
b(sicos.
rea Inicial Scripts
d
rea Inicial Scripts
?ou #a1er uma compara,"o com uma :v. Euando compramos um televisor$ recebemos um
manual$ *ue por mais simples *ue possa ser$ tra1 sempre algumas especi#ica,9es t.cnicas
do aparelho. )or e4emploC )olegadas da tela$ voltagem de trabalho$ entre outras. !ssas
especi#ica,9es t.cnicas trans#erido para o vocabul(rio da 00) s"o as propriedades do
ob+eto -televisor/. !m JavaScript essas propriedades nada mais s"o do *ue vari(veis
internas do ob+eto.
Tm ob+eto est( su+eito a determinados m.todos. Tm m.todo geralmente . uma #un,"o *ue
gera alguma in#orma,"o re#erente ao ob+eto. )or e4emplo ao mudar de canal$ n%s estamos
e4ecutando uma #un,"o do televisor$ o mesmo ocorre *uando aumentamos ou diminu&mos
o volume.
Seguindo nosso e4emplo$ *uando a tens"o da rede sai da #ai4a de trabalho no caso de uma
*ueda de tens"o ou uma sobrecarga$ o sistema de seguran,a da :v$ n"o permite *ue
ocorram danos no aparelho$ *uando muito$ *ueima o #us&vel da #onte de alimenta,"o. !m
aparelhos mais modernos$ *uando uma emissora sai do ar$ a tela #ica a1ul$ sem a*uele
chiado irritante. Sendo assim podemos concluir *ue nosso ob+eto est( su+eito a algumas
situa,9es$ estas situa,9es podem ocorrer a *ual*uer momento$ e s"o chamadas de eventos.
=riando 0b+etos
:rabalhar com ob+etos . a 3nica #orma de manipular com arra]s$ ve+amos comoC Ligamos
*ue *ueremos implementar uma lista de clientes$ nosso ob+eto poderia ser de#inido assimC
8unction =ria=lientes-nome$endereco$tele#one$renda/
R
this.nomeAnomeO
this.enderecoAenderecoO
this.tele#oneAtele#oneO
this.rendaArendaO
S
A propriedade this especi#ica o ob+eto atual como sendo #onte dos valores passados a
#un,"o.
Agora$ basta criar o nosso ob+etoC
;aria A Iew =ria=lientes-X;aria AparecidaX$XKua >uilhotina dos )atos$ SDIX$XUU22
11aX$1U00/
)ara acessar as propriedades do ob+eto ;aria$ basta usar a seguinte sinta4eC
rea Inicial Scripts
10
rea Inicial Scripts
;aria.nome 2 retorna X;aria AparecidaX
;aria.endereco 2 retorna XKua >uilhotina dos )atos$ SDIX
;aria.tele#one 2 retorna XUU2211aX
;aria.renda 2 retorna 1U00
?oc' deve estar se perguntandoC ;as voc' enrolou e n"o disse nada sobre arra]s...
!st( a& o *ue voc' *ueriaF Tma outra #orma de re#erenciar as propriedades do ob+eto ;aria$
.C
;ariae0f$ ;ariae1f$ ;ariae2f$ ;ariaeUf

Tma #orma mais pr(tica de criar arra]s poderia ser a seguinteC
8unction ;atri1-n/
R
this.lengthAn
#or -var contadorA1 O contador JAn O conatdorAcontadorP1/
R
thisecontadorfA55
S
S
)ara criar nossa matri1 usar&amos o seguinte comandoC
;esA;atri1-12/
0 pr%4imo passo seria apenas incluir os dadosC
;ese1f A XJaneiroX
;ese2fAX8evereiroX
rea Inicial Scripts
11
rea Inicial Scripts
...
;ese12fAXLe1embroX

)odemos tamb.m utili1ar os dois m.todos ao mesmo tempoF
=lientesAIew ;atri1-U/
=lientese1fAIew =ria=lientes-5=harlene5$5Kua A$ \15$5UU120U7^5$11\0/
=lientese2fAIew =ria=lientes-5Jos.5$5Kua das Avencas$ SDI5$5UU2227a15$d\0/
=lienteseUfAIew =ria=lientes-5Joa*uim ;anoel5$ 5Kua Amancio )into$ 1715$ $1000/
:er&amos agoraC
=lientese1f.nome A 5=harlene5O
=lientese2f.tele#oneA5UU2227a15
=lienteseUf.tele#oneAnull
rea Inicial Scripts
12
rea Inicial Scripts
Comandos
Al.m das estruturas de controle$ o JavaScript o#erece alguns poucos comandosC
Mrea@
=ontinue
?ar
Qith
8unction
Keturn
=omment
?AK
!m JavaScript$ nem sempre . necess(rio de#inir uma vari(vel antes de utili1(2la$ . o *ue
ocorre com vari(veis globais$ por.m$ . importante ressaltar *ue a utili1a,"o da instru,"o
var$ a n&vel de documenta,"o . muito bem2vinda. J( nas de#ini,9es de vari(veis locais$ .
obrigat%rio a utili1a,"o da instru,"o var.
?oc' pode arma1enar um valor na pr%pria linha de de#ini,"o da vari(vel$ se n"o o #i1er$
para o JavaScript$ esta vari(vel possui um valor desconhecido ou nulo.
I"o . obrigat%ria a utili1a,"o de uma instru,"o var para cada vari(vel declarada$ na medida
do poss&vel$ voc' pode declarar v(rias vari(veis em uma s% instru,"o var.
8orma geralC
?ar IomeLa?ari(vel e A JvalorB fO
!4emploC
?ar =ontador A 0O
?ar InicA55$:ollsA0$IameA5:QK5O
?ar :esteO DD Ieste caso$ :este possui valor null
with
Euando voc' precisa manipular v(rias propriedades de um mesmo ob+eto$ provavelmente
pre#ere n"o ser obrigado a repetir todas as ve1es a digita,"o do nome do ob+eto. A instru,"o
Qith$ permite #a1er isso eliminando a necessidade de digitar o nome do ob+eto todas as
ve1es.
8orma geralC
with -Job+etoB/
R
... Instru,9es
rea Inicial Scripts
1U
rea Inicial Scripts
S
)or e4emplo vamos supor *ue ser( necess(rio e4ecutar uma s.rie de opera,9es
matem(ticasC
with -;ath/
R
aA)IO
bAAbs-4/O
cA!O
S
Mrea@
)ode ser e4ecutado somente dentro de loops 8or... ou Qhile... e tem por ob+etivo o
cancelamento da e4ecu,"o do loop sem *ue ha+a veri#ica,"o na condi,"o de sa&da do loop$
passando a e4ecu,"o a linha imediatamente posterior ao t.rmino do loop.
8orma geralC
Mrea@
!4emploC
Ieste e4emplo$ *uando a vari(vel 4 atinge o valor \ o loop . cancelado$ e . impresso o
n3mero \ na tela.
8or -var 4A1 O 4 J 10 O 4PP/
R
I# -4 A A \/
R
Mrea@
S
S
document.write-4/ DD resultaC \
rea Inicial Scripts
1
rea Inicial Scripts
=ontinue
)ode ser e4ecutado somente dentro de loops 8or... ou Qhile... e tem por ob+etivo o
cancelamento da e4ecu,"o do bloco de comandos passando para o in&cio do loop.
8orma geralC
=ontinue
!4emploC
Ieste e4emplo$ ser"o impressos os n3meros de 1 a 10$ com e4ce,"o do n3mero \$ ou se+a$
*uando a vari(vel 4 atinge o valor \ a e4ecu,"o do bloco de comandos . interrompida e o
controle retorna ao in&cio do loop$ onde a vari(vel 4 ser( incrementada.
8or -var 4A1 O 4 J 10 O 4PP/
R
I# -4 A A \/
R
continue
S
document.write-4/
S

8un,9es
As #un,9es podem ser de#inidas como um con+unto de instru,9es$ agrupadas para e4ecutar
uma determinada tare#a. Lentro de uma #un,"o pode e4istir uma chamada a outra #un,"o.
)ara as #un,9es podem ser passadas in#orma,9es$ as *uais s"o chamadas de parVmetros.
As #un,9es podem ou n"o retornar alguma in#orma,"o$ o *ue . #eito com o comando
Keturn.
A de#ini,"o de uma #un,"o . #eita da seguinte #ormaC
8unction IomeLa8un,"o-e parametro1$ parametro2$ ...$ parametroI f/
R
rea Inicial Scripts
1\
rea Inicial Scripts
...
eKeturn-?alorLeKetorno/f
S
A chamada de #un,9es . #eita da seguite #ormaC
IomeLa8un,"o-eparVmetrosf/

8un,9es s"o melhor declaradas entre as tags JheadB de sua p(gina 6:;<. 8un,9es s"o
#re*uentemente chamadas por eventos acionados pelo usu(rio. Assim parece ra1o(vel
colocar as #un,9es entre as tags JheadB. !las s"o carregadas antes *ue o usu(rio #a,a
alguma coisa *ue possa chamar uma #un,"o.
JhtmlB
JheadB
Jscript languageA5<iveScript5B
8unction hello-/R
alert-5Alg mundoFFF5/O
S
JDscriptB
JDheadB
Jbod]B
...
JscriptBhello-/OJDscriptB
...
JDbod]B
JDhtmlB
IotaC !m JavaScript$ n"o . poss&vel utili1ar2se da recursividade$ ou se+a$ uma #un,"o n"o
pode chamar ela mesma

=oment(rios
=oment(rios podem ser #ormulados de varias maneiras$ dependendo do e#eito *ue voc'
precisa. )ara coment(rios longos de v(rias linhas$ ou blocos de coment(rios$ useC
rea Inicial Scripts
1^
rea Inicial Scripts
D_ 0 barra2asterisco inicia um bloco de coment(rio *ue pode conter *uantas linhas voc'
precisar todo o te4to ap%s o barra asterisco . ignorado$ at. *ue asterisco2barra se+a
encontrado$ terminando assim o bloco de coment(rio _D
)ara coment(rios de uma linha$ use barra dupla -DD/ para introdu1ir o coment(rio. :odo o
te4to seguindo este simbolo at. o pr%4imo carrige2return ser( considerado um coment(rio e
ignorado para #ins de processamento. !4emploC
DD este te4to ser( tratado como coment(rio
0s c%digos JavaScript podem ser colocados em campos de coment(rio de modo *ue
browsers antigos n"o mostrem o pr%prio c%digo JavaScript$ como vemos a seguirC
JhtmlB
JheadB
Jscript languageA5<iveScript5B
JF22 hide script #rom old browsers
8unction hello-/R
alert-5Alg mundoFFF5/O
S
DD end hiding contents 22B
JDscriptB
JDheadB
Jbod]B
...
JscriptBhello-/OJDscriptB
...
JDbod]B
JDhtmlB
rea Inicial Scripts
17
rea Inicial Scripts
!struturas de =ontrole
!4istem algumas estruturas de controle *ue lhe permitem modi#icar o #lu4o de e4ecu,"o de
um programa. !stas estruturas permitem e4ecutar o c%digo baseado em condi,9es l%gicas
ou um n3mero determinado de ve1es.
8or...
8or...In
I#...!lse...
Qhile...
8or...
Kepete uma se,"o do c%digo um determinado n3mero de ve1es. =onsiste de uma declara,"o
*ue de#ine as condi,9es da estrutura e marca seu in&cio. esta declara,"o . seguida por uma
ou mais declara,9es e4ecut(veis$ *ue representam o corpo da estrutura.
!stabelece um contador iniciali1ando uma vari(vel com um valor num.rico. 0 contador .
manipulado atrav.s da Ja,"oB especi#icada no comando toda a ve1 *ue o loop alcan,a seu
#im$ permanecendo nesse loop at. *ue a Jcondi,"oB se+a satis#eita ou a instru,"o Mrea@
se+a e4ecutada.
8orma geralC
8or -Jiniciali1a,"oB O Jcondi,"oB O Ja,"oB/
R =orpo da !strutura S

Io e4emplo abai4o$ o bloco de instru,9es ser( e4ecutado 10 ve1es$ pois a vari(vel
=ontador . iniciali1ada com o valor 1 e o bloco de instru,9es ser( e4ecutado en*uanto
=ontador #or menor *ue 11. A cada e4ecu,"o do bloco de instru,9es =ontador .
incrementado.
8or -var =ontador A 1O =ontador J 11O =ontadorPP/
R document.write-=ontador/O S
8or...In
!ste comando tem por ob+etivo$ procurar a ocorr'ncia de uma vari(vel$ dentro das
propriedades de um ob+eto$ ao encontrar a re#erida vari(vel$ um bloco de comandos pode
ser e4ecutado.
8orma geralC
8or -variavel In ob+eto/
rea Inicial Scripts
1a
rea Inicial Scripts
R
bloco de comandos
S
!4emploC
!sta #un,"o procura por uma propriedade do 0b+eto$ cu+o o nome este+a especi#icado pela
vari(vel )rocura$ onde Iome . uma string correspondendo ao nome do ob+eto.
8unction SearchIn-)rocura$0b+eto$Iome/
R
?ar KesultadoLaMusca A 55
8or -)rocura In 0b+eto/
R
document.write-IomeP5.5P)rocuraP5A5P0b+etoe)rocurafP5JMKB5/O
S
S
I#...!lse...
A estrutura I#... e4ecuta uma por,"o de c%digo se a condi,"o especi#icada #or verdadeira. A
estrutura pode tamb.m ser especi#icada com c%digo alternativo para ser e4ecutado se a
condi,"o #or #alsa.
8unction ?eri#icaIdade-anos/
R
I# anos BA 1^
R
Keturn -XJ( pode votarFX/
S
else
rea Inicial Scripts
1d
rea Inicial Scripts
R
Keturn -X Ainda . muito cedo para votar...X/
S
S
Tma alternativa para economi1ar I#Xs seria a utili1a,"o de uma e4press"o condicional$ *ue
#unciona para situa,9es mais simples$ o e4emplo acima #icaria da seguinte #ormaC
?ariavelLeKetornoA -anosBA1^/ 7 XJ( pode votarFX C XAinda . muito cedo para votar...X
Qhile
0utro tipo de loop . a*uele baseado numa condi,"o ao inv.s de no n3mero de repeti,9es.
)or e4emplo$ suponha *ue voc' necessita *ue um determinado processo se+a repetido at.
*ue um determinado teste d' um resultado verdadeiro ou se+a e4ecutada a instru,"o Mrea@.
8orma geralC
while -Jcondi,"oB/
R =orpo da !strutura S
Io e4emplo abai4o$ o bloco de instru,9es ser( e4ecutado 10 ve1es$ pois a vari(vel
=ontador . iniciali1ada com o valor 1 e o bloco de instru,9es ser( e4ecutado en*uanto
=ontador #or menor *ue 11. A cada e4ecu,"o do bloco de instru,9es =ontador .
incrementado.
?ar =ontadorA1O
Qhile - =ontador J 11 /
R document.write-=ontadorPP/ OS
rea Inicial Scripts
20
rea Inicial Scripts
8un,9es internas
A linguagem JavaScript al.m dos recursos descritos anteriormente$ ainda possui algumas
#un,hes internas$ *ue n"o est"o ligadas diretamente a nenhum ob+eto$ por.m isso n"o
impede *ue essas #un,9es recebam ob+etos como parVmetros. A seguir estas #un,9es ser"o
vistas detalhadamenteC
alert 2 ;ostra uma cai4a de alerta$ seguido de um sinal sonoro e o bot"o de 0i.
!4C alert-X!sta . uma +anela de alertaFX/
con#irm 2 ;ostra uma cai4a de di(logo$ seguida de um sinal sonoro e os bot"o de 0i e
=ancel. Ketorna um valor verdadeiro se o usu(rio escolher 0i.
!4C retornoAcon#irm-XLese+a prosseguir7X/
escape 2 0bt.m o c%digo AS=II de um caracter *ue n"o se+a al#a2num.rico.
!4C document.write-escape-5H5//
eval 2 Avalia uma e4press"o num.rica$ retornando um resultado tamb.m num.rico.
!4C document.write-eval-10_d_a_7_^_\__U_2//
parse8loat 2 =onverte uma string *ue representa um n3mero$ para um n3mero com ponto
#lutuante. =aso a string n"o possa ser avaliada$ a #un,"o retorna 0.
!4C document.write-parse8loat-52U2.^\e125/
parseInt 2 =onverte uma string$ *ue representa um n3mero em uma base prede#inida para
base 10. =aso a string possua um caracter *ue n"o possa ser convertido$ a opera,"o para$
retornando o valor antes do erro.
!4C paseInt-5string5$base/
parseInt-5885$1\/ DD retorna 2\^
parseInt-5UA5$10/ DD retorna U
parseInt-5105$2/ DD retorna 2
prompt 2 ;onta uma cai4a de entrada de dados$ de #orma simpli#icada comparando2se com
o ob+eto te4t.
!4C prompt-label e$valorf/
ondeC
label 2 te4to *ue aparece ao lado da cai4a.
valor 2 . o conte3do inicial da cai4a.
rea Inicial Scripts
21
rea Inicial Scripts
0b+etos JavaScript
0b+etos Javascript 2 uma vis"o geral
JavaScript organi1a todos os elementos de uma 6ome )age dentro de uma hierar*uia. =ada
elemento . visto como um ob+eto. 0s ob+etos podem ter propriedades$ m.todos e responder
a certos eventos. )or isso . muito importante entender a hierar*uia dos ob+etos 6:;<.
?oc' entender( rapidamente como isto #unciona com a a+uda de um e4emplo. 0 e4emplo
seguinte . uma p(gina 6:;< simplesC

Io e4emplo acima$ n%s temos$ um lin@$ duas imagens$ e um #ormul(rio com dois campos
te4to e dois bot9es. Lo ponto de vista do JavaScript a +anela do browser . um ob+eto
window. !ste ob+eto window cont.m certos elementos$ como a barra de status.
Lentro da +anela$ n%s podemos carregar uma p(gina 6:;<. !sta p(gina . um objeto
document. Lesta #orma o ob+eto document representa o documento 6:;< -*ue est(
carregado no momento/. 0 ob+eto document . muito importante$ em JavaScript voc'
rea Inicial Scripts
22
rea Inicial Scripts
sempre o usar( muito. As propriedades e m.todos do ob+eto document ser"o vistas
detalhadamente$ mais adiante.
;as o *ue . mais importante . *ue todos os ob+etos 6:;< s"o propriedades do ob+eto
document. Tm ob+eto 6:;< pode ser por e4emplo um lin@ ou um #ormul(rio.
I%s podemos obter in#orma,9es de diversos ob+etos e ent"o manipul(2los. )ara isso n%s
devemos saber como acessar os di#erentes ob+etos. ?oc' primeiro veri#ica o nome do ob+eto
no diagrama de hierar*uia. Se voc' ent"o precisar saber como re#erenciar a primeira
imagem na p(gina 6:;<$ basta seguir o caminho hier(r*uico$ ve+amos comoC voc' deve
percorrer o diagrama de cima para bai4o$ o primeiro ob+eto . chamado document$ a
primeira imagem . representada por Imagem[0]. Lesta #orma n%s podemos acessar este
ob+eto em JavaScript$ da seguinte #ormaC document.Imageme0f.
Se voc' *uiser saber o *ue o usu(rio digitou dentro do primeiro elemento do #ormul(rio$
voc' primeiro precisa pensar em como acessar esse ob+eto. Iovamente n%s seguiremos o
diagrama de hierar*uia$ de cima para bai4o. Siga o caminho *ue leva at. Elem[0]. :odos os
nomes de ob+eto por onde voc' passou tem *ue constar na re#er'ncia ao primeiro elemento
do #ormul(rio. Lesta #orma voc' pode acessar o primeiro elemento te4to assimC
document.Form[0].Elem[0]
;as como obteremos agora$ o te4to digitado7 !ste elemento te4to possui uma propriedade
chamada value 2 n"o se preocupe agora$ com propriedades$ m.todos ou eventos$ eles ser"o
vistos detalhadamente mais adiante 2 esta propriedade arma1ena o conte3do do ob+eto$ ou
se+a$ o te4to digitado. A seguinte linha de c%digo obt.m o te4to digitadoC
nome A document.#ormse0f.elementse0f.valueO
A string . arma1enada na vari(vel name. I%s podemos agora trabalhar com esta vari(vel.
)or e4emplo$ n%s podemos criar uma +anela popup com aert!"Oi "#name$%. Se a entrada
#or 5Anderson5 o comando aert!"Oi "#name$ abrir( uma +anela popup com o te4to "Oi
Anderson".
Se voc' estiver trabalhando com p(ginas muito grades pode #icar um pouco con#uso
re#erenciar ob+etos diretamente pelo endere,amento do diagrama de hierar*uia$ voc' pode
ter re#er'ncias do tipoC document.#ormseUf.elementse1\f ou document.#ormse2f.elevente21f.
)ara evitar esse problema voc' pode dar nomes di#erentes aos ob+etos$ ve+amos o seguinte
#ragmento de um documento 6:;<C
J#orm IA;!A5clientes5B
IomeC Jinput :N)!A5te4t5 IA;!A5empresa5 valueA5 5B
...
Lessa #orma$ em ve1 de usarmos$ por e4emploC
document.#ormse0f.elementse0f.valueO
rea Inicial Scripts
2U
rea Inicial Scripts
)odemos usarC
document.clientes.empresa.valueO
Isto tra1 muitas #acilidades 2 especialmente com p(ginas grandes e com muitos ob+etos.
0bserve *ue a cai4a das letras #a1 di#eren,a.. ;uitas propriedades dos ob+etos JavaScript
n"o s"o apenas para leitura$ voc' pode atribuir novos valores a algumas propriedades.
0bserve o e4emploC
<ocation
!ste ob+eto cont.m in#orma,9es sobre a TK< da p(gina atual.
8orma geralC
location.propriedade
location.metodo-/
)ropriedadesC
hash 2 !sta propriedade #unciona de #orma semelhante ao #amigerado 5go to5 de algumas
linguagens de programa,"o. Iormalmente . usado em lin@s$ *ue acessam a mesma p(gina.
!4C 0 e4emplo abai4o demonstra a utili1a,"o da propriedade hash$ para criar um lin@ para
outro trecho da mesma p(gina.
J6:;<B
...
JA 6K!8 A 5location.hashAX2X5BItem 1JDAB
...
JA IA;! A 515B JDABItem 1
...
JA IA;! A 525B JDABItem 2
...
JD6:;<B
host 2 Arma1ena uma string com o #ormato 5hostnameCport5 da p(gina 6:;< atual.
!4C alert-XLemostra,"o da propriedade hostC XPlocation.host/
hostname 2 Arma1ena uma string$ com o I) da p(gina 6:;< atual.
!4C alert-XLemostra,"o da propriedade hostnameC XPlocation.hostname/
hre# 2 String identica a mostrada na barra 5location5 do browser.
!4C alert-XA TK< desta p(gina .C XP location.hre#/
pathname 2 =ont.m uma string com o path da p(gina 6:;< atual.
!4C alert-X0 path da TK< desta p(gina .C XP location.pathname/
rea Inicial Scripts
2
rea Inicial Scripts
port 2 Arma1ena a porta por onde est( sendo #eita a cone4"o com o servidor.
!4C alert-XA porta usada para cone4"o com o servidor .C XP location.port/
protocol 2 String *ue arma1ena o protocolo de acesso a um determinado endere,o.
-5httpC5$5#tpC5$5#ileC5/.
!4C alert-X0 protocolo de acesso para esta p(gina .C XP location.protocol/
;.todosC
toString 2 =onverte o conte3do do ob+eto location para uma string.
!4C alert-Xlocation.toString-/ A XPlocation.toString/ DD !ste valor . o mesmo *ue
location.hre#.
Select
=ria uma listMo4$ no mesmo padr"o *ue no Qindows. 0nde o usu(rio pode selecionar uma
ou mais op,9es dispon&veis$ depende da con#igura,"o dese+ada pelo programador.
8orma geralC
JS!<!=:
IA;! A 5selectIame5
eSIj! A tamanhof
e;T<:I)<!f
eonMlur A 5a,"o5f
eon=hange A 5a,"o5f
eon8ocus A 5a,"o5f B
J0):I0I
?A<T! A 5option?alue5
eS!<!=:!Lf B
:e4to
. . .
J0):I0I...B
JDS!<!=:B
ondeC
selectIame 2 Iome dado pelo programador$ para o ob+eto select
rea Inicial Scripts
2\
rea Inicial Scripts
tamanho 2 I3mero de linhas$ da cai4a select.
;T<:I)<! 2 Se de#inido$ permite *ue v(rias op,9es se+am selecionadas.
a,"o 2 Le#ine o *ue #a1er *uando algum evento ocorrer.
option?alue 2 ?alor *ue . enviado as servidor$ *uando o #ormul(rio . submetido.
S!<!=:!L 2 Se de#inido$ in#orma a op,"o *ue ser( inicialmente selecionada.
)ropriedadesC
lenght 2 In#orma o n3mero de op,9es dispon&veis.
!4C selectIame.lenght
name 2 In#orma o nome *ue o programador de#iniu para o ob+eto select.
!4C selectIame.name
options 2 ?etor com todas as op,9es e4istentes no menu select.
!4C selectIame.optionse0..selectIame.lenght21f
selectedInde4 2 In#orma o &ndice do &tem *ue est( selecionado.
!4C selectIame.selectedInde4
de#aultSelected 2 In#orma o &tem *ue det.m a sele,"o inicial. )ode2se alterar este valor$
dede *ue o #ormul(rio ainda n"o tenha sido e4ibido.
!4C selectIame.optionseIndicef.de#aultSelected
inde4 2 0bt.m o n3mero do &ndice de uma op,"o em um menu select.
!4C selectIame.optionseIndicef.inde4
selected 2 ?alor l%gico re#erente a op,"o em *uest"o. Se a op,"o estiver selecionada$
retorna 515$ caso contr(rio$ retorna 505.
!4C selectIame.optionseindicef.selected
te4t 2 Arma1ena o te4to *ue aparece como op,"o do menu select. !ste te4to . de#inido ap%s
a :A> J0):I0IB.
!4C selectIame.optionseindicef.te4t
value 2 Arma1ena o campo ?A<T!$ *ue . enviado ao servidor *uando o #ormul(rio .
submetido -enviado/.
!ventosC
onMlur 2 0corre *uando o ob+eto perde o #oco.
on=hange 2 0corre *uando o ob+eto perde o #oco e seu conte3do #oi alterado.
rea Inicial Scripts
2^
rea Inicial Scripts
on8ocus 2 0corre *uando o ob+eto recebe o #oco.
Mutton
!ste ob+eto mostra um bot"o U2L -no mesmo padr"o do Qindows/. ao ser pressionado$ ele
produ1 um e#eito de pro#undidade e geralmente chama uma #un,"o.
)ode ser utili1ado para in3meras aplica,9es$ dependendo apenas de sua imagina,"o$ a 3nica
precau,"o . de#ini2lo dentro de um #ormul(rio.

8orma geralC
JInput :]peA5button5 IameA5IomeLoMot"o5 ?alueA5K%tulo5
on=lic@A5KespostaAo!vento5B

0ndeC
:]pe 2 de#ine o ob+eto
Iame 2 de#ine o nome do ob+eto para nossa aplica,"o. G por este nome *ue re#erenciamos
alguma propriedade deste ob+eto
?alue 2 de#ine o *ue ser( escrito na #ace do bot"o
on=lic@ 2 G o 3nico evento poss&vel para este ob+eto$ normalmente de#ine uma #un,"o a ser
e4ecutada *uando clicamos no bot"o.

)ropriedadesC
IA;!C In#orma o nome do ob+eto button em #orma de string$ da mesma #orma como
de#inido no campo Iame *ue #oi utili1ado na de#ini,"o do bot"o. G importante n"o
con#undir o campo Iame com a propriedade IA;!$ ve+a a di#eren,aC
Jinput t]peA5button5 nameA50i5 valueA5=on#irma5 on=lic@A5=on#irmaIn#ormacoes-/5B
0i.Iame DD e*uivale a 50i5
?A<T!C In#orma o label do bot"o em #orma de string da mesma #orma como #oi de#inido
no campo ?alue *ue #oi utili1ado na de#ini,"o do bot"o.
0i.?alue DD e*uivale a 5=on#irma5

;.todosC
rea Inicial Scripts
27
rea Inicial Scripts
clic@C !ste m.todo simula um cli*ue do mouse no ob+eto button$ ou se+a$ e4ecuta um
procedimento associado a um bot"o como se o bot"o tivesse sido pressionado mas sem *ue
o usu(rio tenha realmente clicado.
0i.clic@-/ DD e4ecutaria a #un,"o =on#irmaIn#ormacoes

!ventos associadosC
on=lic@C Le#ine o *ue #a1er *uando clicamos no ob+eto button

!4emploC
J80K;B
JII)T: :N)!A5button5 ?A<T!A5=li*ue a*uiFFF5 IA;!A5botao15 on=lic@A5alert-XA
propriedade IA;! deste bot"o .CXPbotao1.namePX[nA propriedade ?A<T! deste bot"o
.CXPbotao1.value/5/B
JD80K;B
Iavigator
Ieste ob+eto #icam arma1enadas as in#orma,9es sobre o browser *ue est( sendo utili1ado.
8orma geralC
Iavigator.propriedade
)ropriedadesC
app=odeIame 2 Arma1ena o codnome do browser.
!4C Iavigator.app=odeIame
appIame 2 Arma1ena o nome do browser.
!4C Iavigator.appIame
app?ersion 2 Arma1ena a vers"o do browser.
!4C Iavigator.app?ersion
userAgent 2 Arma1ena o cabe,alho -user2agent/ *ue . enviado para o servidor$ no protocolo
6::)$ isto serve para *ue o servidor identi#i*ue o so#tware *ue est( sendo usado pelo
cliente.
!4C Iavigator.userAgent
!4emploC
J6:;<B
rea Inicial Scripts
2a
rea Inicial Scripts
J6!ALB
J:I:<!B:orres 6ome )age 2 JavaScript 2 Applet 0^JD:I:<!B
JS=KI):B
JF22

#unction getMrowserIame-/ R
document.#ormse0f.elementse0f.value Anavigator.appIameO
S

#unction getMrowser?ersion-/ R
document.#ormse0f.elementse0f.value A navigator.app?ersionO
S

#unction getMrowser=odeIame-/ R
document.#ormse0f.elementse0f.value A navigator.app=odeIameO
S

#unction getMrowserTserAgent-/ R
document.#ormse0f.elementse0f.value A navigator.userAgentO
S

#unction getMrowserIame?ersion-/ R
document.#ormse0f.elementse0f.value A navigator.appIame P 5 5 P navigator.app?ersionO
S

rea Inicial Scripts
2d
rea Inicial Scripts
DD 22B
JDS=KI):B
JD6!ALB
JM0LN B
J=!I:!KB
J80K; IA;!A5detect5B
JII)T: :N)!A5te4t5 IA;!A5browser5 SIj!A\0 ;Ak<!I>:6A\0 ?A<T!A5 Seus
dados ser"o mostrados nesta +anela F 5B
JMKBJMKBJMKB
JII)T: :N)!A5button5 ?A<T!A5Iome do Iavegador5 on=lic@A5getMrowserIame-/5B
JII)T: :N)!A5button5 ?A<T!A5?ers"o do Iavegador5
on=lic@A5getMrowser?ersion-/5B
JII)T: :N)!A5button5 ?A<T!A5!2mail5 on=lic@A5getMrowser=odeIame-/5B
JMKBJMKB
JII)T: :N)!A5button5 ?A<T!A5!2mail e vers"o5 on=lic@A5getMrowserTserAgent-/5B
JMKB
JMKB
JII)T: :N)!A5button5 ?A<T!A5Iome e ?ers"o5
on=lic@A5getMrowserIame?ersion-/5B
JD80K;B
JDM0LNB
JD6:;<B
8orm
rea Inicial Scripts
U0
rea Inicial Scripts
0s #ormul(rios tem muitas utilidades$ uma das principais seria a trans#er'ncia de dados
dentro da pr%pria p(gina 6:;<$ sem *ue para isso se+a necess(ria a interven,"o de
*ual*uer outro meio e4terno.
Ao se criar um #ormul(rio na p(gina 6:;<$ automaticamente . criada uma re#er'ncia para
este #ormul(rio$ *ue #ica guardada na propriedade #orm do ob+eto document. =omo voc'
deve ter visto na p(gina *ue trata do ob+eto document$ a propriedade #orm . um vetor$ e a
cada #ormul(rio criado tamb.m . criado um novo elemento para este vetor$ o &ndice inicial
deste vetor . 0 -1ero/ e varia at. o n3mero de #ormul(rios do documento 21.
=omo voc' pode notar$ cada #ormul(rio criado em uma p(gina 6:;<$ . considerado um
ob+eto distinto$ tendo suas pr%prias re#er'ncias$ m.todos$ propriedades e eventos
associados. A #orma de acessar2mos di#erenciadamente esses #ormul(rios dentro da p(gina
6:;<$ . utili1ar a propriedade #orm do ob+eto document.

8orma geralC
J80K; IA;!A5Iome5f
eA=:I0IA5TK<5f
e;!:60LA5>!: c )0S:5f
eonSubmitA5evento5fB
0ndeC
Iome A Iome do #ormul(rio$ para #uturas re#er'ncias dentro da p(gina 6:;<.
TK< A !speci#ica o TK< do servidor ao *ual sera enviado o #ormulario.
>!: c )0S: A metodos de trans#erencia de dados do browser para o servidor

)ropriedadesC
action 2 !speci#ica o TK< do servidor ao *ual sera enviado o #ormulario.
!4C document.IomeLo8ormulario.action
documet.>uestMoo@.action A 5esae4Hcanudos.u#ba.br5
elements 2 ?etor *ue arma1ena todos os ob+etos *ue s"o de#inidos dentro de um #ormul(rio
-cai4as de te4to$ bot9es$ cai4as de entrada de dados$ chec@bo4es$ bot9es de r(dio/. 0
n3mero de elementos deste vetor varia de 0 -1ero/ at. o n3mero de ob+etos dentro do
#ormul(rio 21.
rea Inicial Scripts
U1
rea Inicial Scripts
!4C document.IomeLo8ormulario.elementseindicef
method 2 Seleciona um m.todo para acessar o TK< de a,"o. 0s m.todos s"oC >!: e )0S:.
Ambos os metodos trans#erem dados do browser para o servidor$ com a seguinte di#erencaC
;!:60LA>!: 2 os dados de entrada sao acrescentados ao endere,o -TK</ associado$
como se #ossem uma *uer] -pes*uisa a banco de dados/ comumO
;!:60LA)0S: 2 os dados nao s"o acrescentados ao TK<$ mas #a1em parte do corpo da
mensagem enviada ao servidor.
0bs.C 0m.todo mais usual . o )0S:C
!sta propriedade pode ser alterada$ por.m s% surtir( e#eito antes *ue o #ormul(rio se+a
mostrado na tela.
!4C document.IomeLo8ormulario.method A 5post5 - ou 5get5/

;.todosC
submit 2 :rans#ere os dados do #ormul(rio para o endere,o especi#icado em action$ para
serem processados. 8uncionado de maneira an(loga ao bot"o submit em 6:;<.
!4C document.IomeLo8ormulario.submit- /

!ventosC
onSubmit 2 0corre *uando um bot"o do tipo STM;I: recebe o cli*ue do mouse$
trans#erindo os dados de um #ormul(rio para o servidor especi#icado em action.
0s dados s% s"o enviados se o evento receber um valor verdadeiro -true/$ valor este *ue
pode ser conseguido como resultado a chamada de uma #un,"o *ue valida as in#orma,9es
do #ormul(rio.
!4C document.IomeLo8ormulario.onSubmit A5return
?alidaYIn#ormacoes-IomeLo8ormulario/5

!4emploC
rea Inicial Scripts
U2
rea Inicial Scripts
J6:;<B
J6!ALB
J:I:<!B!4emplo 2 0b+eto 8ormJD:I:<!B
J;!:A IA;!A>!I!KA:0K =0I:!I:A5=laris 6ome )age 2.05B
JD6!ALB
JM0LNB
J80K; actionA5mailtoCesae4Hcanudos.u#ba.br5 methodA5)0S:5B

J)BJ::BJMBJ61B!4emploCJD61BJDMBJD::B

J)B!ste e4emplo demonstra a #uncionalidade de um
#ormulbaacuteOrio$ para improvisar um 5>uest Moo@5

J)BbnbspO

Iome$IascimentoC JMKB
JII)T: :N)!A5te4t5 IA;!A5nomidade5 ?A<T!A5 5 SIj!A70BJMKB

!nderebccedilOoC JMKB
JII)T: :N)!A5te4t5 IA;!A5endereco5 ?A<T!A5 5 SIj!A70BJMKB

!2;ailC JMKB
rea Inicial Scripts
UU
rea Inicial Scripts
JII)T: :N)!A5te4t5 IA;!A5email5 ?A<T!A5 5
SIj!A70BJMKB

Sua 6ome2)ageC JMKB
JII)T: :N)!A5te4t5 IA;!A5hp5 ?A<T!A5 5 SIj!A70BJMKB

IK=C JMKB
JII)T: :N)!A5te4t5 IA;!A5irc5
?A<T!A5 5 SIj!A70BJMKB

SugestbotildeOes$ etc.C JMKB
J:!k:AK!A IA;!A5su+estao5 K0QSA7 =0<SA70BJD:!k:AK!AB

J)BJ=!I:!KBJII)T: :N)!A5submit5 IA;!A5Submit5
?A<T!A5!nviar5B JII)T: :N)!A5reset5 ?A<T!A5<impar5BJD=!I:!KB
JD80K;B

J=!I:!KB
J80K;B
JII)T: :N)!A5button5 ?A<T!A5)(gina Anterior5 on=lic@A5histor].go-21/5B
JI;> SK=A5S177.gi#5 QIL:6A\0 6!I>6:A^ A<I>IAbottomBJMKB

rea Inicial Scripts
U
rea Inicial Scripts
J80I: SIj!A5225B)baacuteOgina desenvolvida por JD80I:BJ80I:
SIj!A5225BJA 6K!8A5mailtoCesae4Hcanudos.u#ba.br5BAnderson Marros
:orresJDABJD80I:BJ80I: SIj!A5225B. JulhoDd7JD80I:B
JD80K;B
JD=!I:!KB

JDM0LNB
JD6:;<B
=hec@Mo4
!ste ob+eto como o pr%prio nome sugere$ e4ibe uma cai4a de checagem igual Ws *ue
encontramos no Qindows$ o #uncionamento tamb.m . o mesmoC a condi,"o de selecionada
ou n"o$ . alternada *uando clicamos o mouse sobre o ob+eto$ ou se+a$ se clicarmos sobre um
ob+eto chec@bo4 +( marcado ele ser( automaticamente desmarcado$ ao passo *ue se
clicarmos em um ob+eto chec@bo4 desmarcado ele ser( automaticamente marcado.
8orma geralC
J80K;B
JII)T: :N)!A5chec@bo45 IA;!A5IomeLo0b+eto5 e=6!=i!Lf ?A<T!A5<abel5
on=lic@A5A,"o5B
JD80K;B
Onde&
:]pe 2 Iome do ob+eto
Iame 2 Iome dado pelo programador$ para #uturas re#erencia,9es ao ob+eto.
=6!=i!L 2 Se especi#icado a =hec@Mo4 +( vai aparecer selecionada
?alue 2 Le#ine um r%tulo para a =hec@Mo4. S% n"o consegui descobrir para *ueF
on=lic@ 2 Le#ine o *ue #a1er *uando d(2se um cli*ue na =hec@Mo4$ #a1endo com *ue o
ob+eto =hec@Mo4 #uncione como um ob+eto Mutton.

rea Inicial Scripts
U\
rea Inicial Scripts
)ropriedadesC
name 2 Iome do ob+eto =hec@Mo4 em #orma de string$ da mesma #orma como de#inido no
campo Iame utili1ado na cria,"o da =hec@Mo4.
IomeLo0b+eto.name DD e*uivale a string 5IomeLo0b+eto5
value 2 Arma1ena o conte3do do campo ?A<T!$ de#inido na :A>. Ainda n"o encontrei
utilidade para este campo na =hec@Mo4$ caso voc' saiba...
!4C IomeLo0b+eto.value
chec@ed 2 Ketorna um valor l%gico *ue depende do estado do ob+eto =hec@Mo4
IomeLo0b+eto.chec@ed DD e*uivale a :rue se o ob+eto estiver selecionado e 8alse caso
contr(rio
de#ault=hec@ed 2 In#ormaDAltera o estado de#ault de um ob+eto =hec@Mo4. =om rela,"o a
altera,"o$ somente os ob+etos =hec@Mo4 ainda n"o e4ibidos podem ter seu estado de#ault
alterado. IomeLo0b+eto.de#ault=hec@ed DD sempre e*uivaler( a :rue$ se a cl(usula
=6!=i!L estiver presente e a 8alse caso contr(rio
;.todosC
clic@C !ste m.todo simula um cli*ue do mouse no ob+eto =hec@Mo4$ ou se+a$ e4ecuta um
procedimento associado a uma =hec@Mo4 como se estivessemos clicado na =hec@Mo4 mas
sem *ue o usu(rio tenha realmente clicado.
Select01.clic@-/ DD e4ecutaria a #un,"o =on#irmaIn#ormacoes

!ventos associadosC
on=lic@C Le#ine o *ue #a1er *uando clicamos no ob+eto =hec@Mo4
!4emploC
J6:;<B
J6!ALB
J:I:<!B!4emplo =hec@Mo4JD:I:<!B
JS=KI):B
#unction e4emplo-p1$p2$pU$p/R
alert-X?e+a os conte3dos das propriedadesC
[nIameAXPp1P
X[n?alueAXPp2P
X[n=hec@edAXPpUP
X[nde#ault=hec@edAXPp/O
S
JDS=KI):B
rea Inicial Scripts
U^
rea Inicial Scripts
JD6!ALB
JM0LNB
J=!I:!KB
J6UB!4emplo do ob+eto =hec@Mo4JD6UB
J6KB
J80K;B
JII)T: :N)!A5chec@bo45 IA;!A5chb5 ?A<T!A5EE =0ISA5 =6!=i!L
on=lic@A5e4emplo-chb.name$chb.value$chb.chec@ed$chb.de#ault=hec@ed/5/B
:ecle a*ui...
JD80K;B
JMKB
J6KB
JMKB
:ecle no =hec@Mo4 para observar o #uncionamentoFFF
)ara retornar cli*ue o mouse JA 6K!8A5histor].go-21/5BAETIJDAB
JD=!I:!KB
JDM0LNB
JD6:;<B
'ocument
!ste ob+eto arma1ena todas as caracter&sticas da p(gina 6:;<$ como por e4emploC cor das
letras$ cor de #undo$ #igura *ue aparecer( como papel de parede$ etc
Sempre *ue incluimos alguma declara,"o no JM0LNB do documento$ estamos alterando
-sem perceber/ o ob+eto Locument.

8orma geralC
JM0LN eMA=i>K0TILA5Imagem5f
eM>=0<0KA5l=orLe8undo5f
e8>=0<0KA5l=orLo:e4to5f
e<IIiA5l=orLos<in@s5f
eA<IIiA5l=orLo<in@Ativado5f
e?<IIiA5l=orLo<in@?isitado5f
eon<oadA5#un,"o5f
eonTn<oadA5#uncao5fB
0ndeC
Imagem A #igura no #ormato >I8$ *ue servir( como papel de parede para a 6ome )ageO
rea Inicial Scripts
U7
rea Inicial Scripts
l=or... A n3mero -he4adecimal/$ com seis d&gitos$ *ue corresponde a cor no #ormato K>M$
o 5l5 . obrigat%rio. 0s dois primeiros d&gitos correspondem a K -red/$ os dois do meio a >
-green/ e os dois 3ltimos a M -blue/. A combina,"o dos tr's$ #orma a cor no #ormato K>M.
#un,"o A Iome de uma #un,"o pr.2de#inida$ *ue ser( chamada *uando o evento ocorrer.

Pro(riedades&
alin@=olor 2 Letermina a cor do lin@ en*uanto o bot"o do o mouse estiver pressionado
sobre o lin@.
!4C document.alin@=olorA5l8888885
anchors 2 ?etor *ue arma1ena as Vncoras de#inidas em uma p(gina 6:;< com o comando
JA IA;!A5ancora5B. !sta propriedade . somente para leitura$ n"o pode ser alterada.
!4C document.anchorse&ndicef
bg=olor 2 Letermina a cor de #undo da p(gina 6:;<.
!4C document.bg=olorA5l0000005
coo@ie 2 0s coo@ies s"o pe*uenos ar*uivos *ue alguns sites da Qeb gravam no computador
dos visitantes. A id.ia . identi#icar o usu(rio$ anotar *uais caminhos ele +( percorreu dentro
do site e permitir um controle mais e#ica1 dos espectadores. -In#orm(tica !4ame 2 JT<Dd7/.
!sta propriedade . melhor especi#icada pela pr%pria Ietscape
#g=olor 2 Letermina a cor das letras em uma p(gina 6:;<. !sta propridade n"o altera o
*ue +( est( impresso na p(gina 6:;<.
!4C document.#g=olorA5l0000885
#orms 2 ?etor *ue arma1ena as re#er'ncias aos #ormul(rios e4istentes na p(gina 6:;<.
!sta propriedade . somente para leitura$ n"o pode ser alterada.
!4C document.#ormse&ndicef
last;odi#ied 2 0bt.m a data da 3ltima atuali1a,"o da p(gina 6:;<. !sta propriedade .
somente para leitura$ n"o pode ser alterada.
!4C document.last;odi#ied
lin@=olor 2 Letermina a cor dos lin@s *ue ainda n"o #oram visitados pelo usu(rio.
rea Inicial Scripts
Ua
rea Inicial Scripts
!4C document.lin@=olor A 5l0088005
lin@s 2 ?etor *ue arma1ena os lin@s de#inidos em uma p(gina 6:;<. !sta propriedade .
!4C document.lin@se&ndicef
location 2 Arma1ena o endere,o -TK</ atual em #orma de string. !sta propriedade .
re#errer 2 Arma1ena o endereco -TK</ de *uem chamou a p(gina 6:;< atual. =om essa
propriedade voc' pode saber o usu(rio chegou a sua p(gina. !sta propriedade . somente
para leitura$ n"o pode ser alterada.
!4C document.re#errer
title 2 Arma1ena uma string com o t&tulo da p(gina 6:;< atual. !sta propriedade .
!4C document.title
vlin@=olor 2 Letermina a cor *ue o lin@ aparecer( ap%s ser visitado.
!4C document.vlin@=olor A 5la088a05

;.todosC
clear 2limpa a tela da +anela atual.
!4C document.clear- /
open 2Abre um documento e envia -mas n"o e4ibe/ a sa&da dos m.todos writeDwriteln. 0s
dados enviados s"o e4ibidos$ *uando . encontrado o m.todo close.
!4C document.open- /
close 2 :ermina uma se*u'ncia iniciada com o m.todo open$ e4ibindo o *ue tinha sido
apenas enviado.
!4C document.close- /
write 2 Imprime in#orma,9es na p(gina 6:;<.
!4C document.write-5Eual*uer coisa5 e$vari(velf e$...$ e4press"of/
rea Inicial Scripts
Ud
rea Inicial Scripts
writeln 2 Imprime in#orma,9es na p(gina 6:;< e passa para a pr%4ima linha. !m meus
testes$ esse m.todo n"o apresentou di#eren,a com rela,"o ao m.todo write.
!4C document.writeln-5Eual*uer coisa5 e$vari(velf e$...$ e4press"of/

!ventosC
on<oad 2 0corre assim *ue um browser carrega uma p(gina 6:;< ou #rame.
!4C JM0LN ... on<oadAXalert-50iFFF5/XB
onTnload 2 0corre *uando se abandona uma p(gina 6:;< ou #rame.
!4C JM0LN ... onTnloadAXalert-5:chauFFF5/XB
'ate
0b+eto muito 3til *ue retorna a data e hora do sistema no seguinte #ormatoC Lia da semana$
Iome do m's$ Lia do m's$ 6oraC;inutoCSegundo e Ano.
=omo todo ob+eto$ podem ser criadas novas instVncias para este ob+eto$ o *ue . muito
comum por sinal$ essa pr(tica possibilita a utili1a,"o de *uantos ob+etos data voc' precisar.

8orma geralC
Iovo0b+eto A I!Q date- /
0ndeC
Iovo0b+eto A 0b+eto de#inido pelo usu(rio$ para manipular datas. -este ob+eto #oi de#inido
com o comando I!Q$ *ue criou uma nova instVncia do ob+eto date- //.
;.todosC
get;onth 2 0bt.m o n3mero do m's. Ketornando um valor entre 0 e 11. - +aneiroA0/
!4C ;esAIovo0b+eto.get;onth- /
set;onth 2 !stabelece um novo valor para o m's. 0 valor deve estar entre 0..11
!4C Iovo0b+eto.set;onth-IumeroLo;es/
getLate 2 0bt.m o n3mero do dia$ considerando2se o m's. Ketornando um valor num.rico
entre 1..U1.
!4C dia A Iovo0b+eto.getLate- /
rea Inicial Scripts
0
rea Inicial Scripts
setLate 2 !stabelece um novo valor para o dia do m's. !ste valor deve estar entre 1..U1
!4C Iovo0b+eto.setLate-IumeroLoLia/
getLa] 2 0bt.m o n3mero do dia$ considerando2se a semana. Ketornando um valor
num.rico entre 0..^. <embre2se de *ue a semana come,a no domingo$ logo 0$ corresponde
ao domingo.
!4C LiaLaSemana A Iovo0b+eto.getLa]- /
get6ours 2 0bt.m um n3mero correspondente a hora. Ketornando um valor num.rico entre
0..2U
!4C 6ora A Iovo0b+eto.get6ours- /
set6ours 2 !stabelece um novo valor para a hora. 0 valor deve estar entre 0..2U
!4C Iovo0b+eto.set6ours-Iova6ora/
get;inutes 2 0bt.m um n3mero correspondente aos minutos. Ketornando um valor
num.rico entre 0..\d
!4C ;inutos A Iovo0b+eto.get;inutes- /
set;inutes 2 !stabelece um novo valor para os minutos. 0 valor deve estar entre 0..\d
!4C Iovo0b+eto.set;inutes-;inutos/
getSeconds 2 0bt.m um n3mero correspondente aos segundos. Ketornando um valor
num.rico entre 0..\d
!4C Segundos A Iovo0b+eto.getSeconds- /
setSeconds 2 !stabelece um novo valor para os segundos. 0 valor deve estar entre 0..\d
!4C Iovo0b+eto.setSeconds-Segundos/
get:ime 2 0bt.m o tempo decorrido desde 01D01D70 at. o presente momento. 0 3nico
incoveniente . *ue esta data . dada em milissegundos.
!4C :empoLecorridoAIovo0b+eto.get:ime- /
set:ime 2 !stabelece uma nova data.
!4C LataLeIascimentoAIew Late-5August 2$ 1d705/
uma outra #orma para de#inir a data seriaC
0utra8orma A Iew Late- /
0utra8orma.set:ime-LataLeIascimento.get:ime- //
get:ime1one0##set 2 0bt.m a di#eren,a entre o hor(rio local e o hor(rio do meridiano
central ->reenwich/. !ste tempo . dado em minutos$ logo$ para saber o #uso2hor(rio$ deve2
se dividir o resultado obtido por esta #un,"o por ^0.
!4C 8uso6or(rioAIovo0b+eto.get:ime1one0##set- / D ^0
getNear 2 0bt.m um valor num.rico correspondente ao ano.
rea Inicial Scripts
1
rea Inicial Scripts
!4C AnoAIovo0b+eto.getNear - /
setNear 2 !stabelece um novo valor ao ano. 0 valor deve ser maior ou igual a 1d00.
!4C Iovo0b+eto.setNear-1dd7/
to>;:string 2 =onverte um ob+eto data para uma string seguindo o padr"o Internet >;:.
!4C Iovo0b+eto.to>;:string- /
to<ocaleString 2 =onverte uma data para uma string seguindo o padr"o local.
!4C Iovo0b+eto.to<ocalString- /

!4emploC
J6:;<B
J6!ALB
J:I:<!B!4emplo 2 0b+eto LateJD:I:<!B

JS=KI):B

JF22
var timerIL A nullO
var timerKunning A #alseO
#unction startcloc@ -/
R
stopcloc@-/O
time-/O
S

#unction stopcloc@ -/
R
i#-timerKunning/
clear:imeout-timerIL/O
timerKunning A #alseO
S

#unction time -/
R
var now A new Late-/O
var ]r A now.getNear-/O
var mIame A now.get;onth-/ P 1O
var dIame A now.getLa]-/ P 1O
var da]Ir A --now.getLate-/J10/ 7 505 C 55/P now.getLate-/O
var ampm A -now.get6ours-/ BA 12/ 7 5 ).;.5 C 5 A.;.5
rea Inicial Scripts
2
rea Inicial Scripts
var hours A now.get6ours-/O
hours A --hours B 12/ 7 hours 2 12 C hours/O
var minutes A --now.get;inutes-/ J 10/ 7 5C05 C 5C5/ P now.get;inutes-/O
var seconds A --now.getSeconds-/ J 10/ 7 5C05 C 5C5/ P now.getSeconds-/O

i#-dIameAA1/ La] A 5Lomingo5O
i#-dIameAA2/ La] A 5Segunda5O
i#-dIameAAU/ La] A 5:er,a5O
i#-dIameAA/ La] A 5Euarta5O
i#-dIameAA\/ La] A 5Euinta5O
i#-dIameAA^/ La] A 5Se4ta5O
i#-dIameAA7/ La] A 5Sabado5O

i#-mIameAA1/ ;onthA5Janeiro5O
i#-mIameAA2/ ;onthA58evereiro5O
i#-mIameAAU/ ;onthA5;ar,o5O
i#-mIameAA/ ;onthA5Abril5O
i#-mIameAA\/ ;onthA5;aio5O
i#-mIameAA^/ ;onthA5Junho5O
i#-mIameAA7/ ;onthA5Julho5O
i#-mIameAAa/ ;onthA5Augosto5O
i#-mIameAAd/ ;onthA5Setembro5O
i#-mIameAA10/ ;onthA50utubro5O
i#-mIameAA11/ ;onthA5Iovembro5O
i#-mIameAA12/ ;onthA5Le1embro5O

var La]Late:imeA-5 5
P La]
P 5$ 5
P da]Ir
P 5 de 5
P ;onth
P 5 de 5
P 55
P 51d5
P ]r
P 5. Agora s"oC5
P hours
P minutes
P seconds
P 5 5
P ampm
/O

window.statusALa]Late:imeO
timerIL A set:imeout-5time-/5$1000/O
rea Inicial Scripts
U
rea Inicial Scripts
timerKunning A trueO
S

#unction clearStatus-/
R
i#-timerKunning/
clear:imeout-timerIL/O

timerKunning A #alseO
window.statusA5 5O
S

DD22B

JDS=KI):B
JDheadB

JM0LN MA=i>K0TILA5b1d0.gi#5 on<oadA5startcloc@ -/5B

J61B!4emploCJD61B

Lemonstra,"o do ob+eto Late$ con#orme visto na p(gina anterior. 8uncionamentoC a data e
hora #icam sendo mostradas no rodap. do browser.

J80K;B
J=!I:!KB
JMKB
JD=!I:!KB
JD80K;B
J=!I:!KB
JI;> SK=A5S177.>I85BJMKB
J6^B)(gina desenvolvida por JA 6K!8A5mailtoCwebmaster.Hareainicial.11n.com5B
8ernando Lercoli JDAB. JulhoDd7JD6^B

JD=!I:!KB
JDM0LNB
JD6:;<B
6istor]
!ste ob+eto arma1ena todas as TK< das p(ginas 6:;< por onde o usu(rio passou durante a
sess"o atual do browser. G uma c%pia das in#orma,9es arma1enadas na op,"o >o da barra
de menu do Iavigator.
rea Inicial Scripts
rea Inicial Scripts

8orma geralC
histor].propriedade
histor].m.todo
)ropriedadesC
lenght 2 In#orma a *uantidade de p(ginas visitadas.
!4C histor].lenght
;.todosC
bac@ 2 Ketorna W p(gina anterior$ de acordo com a rela,"o de p(ginas do ob+eto histor].
!*uivale a clicar o bot"o bac@ do browser.
!4C histor].bac@-/
#orward 2 )assa para a pr%4ima p(gina$ de acordo com a rela,"o de p(ginas do ob+eto
histor]. !*uivale a clicar o bot"o #orward do browser.
!4C histor].#orward-/
go 2 )ermite *ue *ual*uer TK< *ue este+a presente na rela,"o de p(ginas visitadas do
ob+eto histor]$ se+a carregada.
!4C histor].go-parVmetro/
!4istem duas possibilidades para 5parVmetro5C
1 2 parVmetro . um n3meroC Ao de#inir um n3mero$ este deve ser inteiro. Se #or positivo$ a
p(gina alvo est( 5parVmetro5p(ginas W #rente. Ao passo *ue se #or negativo$ a p(gina alvo
est( 5parVmetro5 p(ginas para tra1.
2 2 parVmetro . uma stringC Ieste caso$ o alvo . a TK< *ue mais se assemelhe ao valor da
string de#inida por 5parVmetro5.
Qindow
G o ob+eto *ue ocupa o topo do es*uema hier(r*uico em JavaScript.
)ropriedadesC
de#aultStatus 2 Letermina o conte3do padr"o da barra de status do browser$ *uando nada de
importate estiver acontecendo.
!4C widow.de#aultStatusAXEual*uer coisaX
#rames 2 ?etor *ue arma1ena as re#er'ncias para as #rames da +anela atual.
!4C parent.#rames.lenght DD obt.m o n3mero de #rames da +anela principal$ assumindo *ue
estamos em uma #rame.
parent 2 Ke#ere2se a +anela pai da #rame atual.
sel# 2 Ke#ere2se a +anela atual.
!4C sel#.de#aultStatusAXEual*uer coisaX
rea Inicial Scripts
\
rea Inicial Scripts
status 2 Le#ine uma mensagem *ue ir( aparecer no rodap. do browser$ em substitui,"o por
e4emplo$ a TK< de um lin@$ *uando estivermos com o mouse sobre o lin@.
!4C window.statusA5*ual*uer te4to5
top 2 Ke#ere2se a +anela de n&vel mais alto do es*uema hier(r*uico do JavaScript.
!4C top.close-/ DD #echa a +anela principal do browser
window 2 Ke#ere2se a +anela atual. 8unciona de modo an(logo a sel#.
!4C window.statusAXEual*uer coisaX
;.todosC
alert 2 ;ostra uma cai4a de alerta$ seguido de um sinal sonoro e o bot"o de 0i.
!4C alert-X!sta . uma +anela de alertaFX/
close 2 :ermina a sess"o atual do browser.
!4C top.close-/
con#irm 2 ;ostra uma cai4a de di(logo$ seguida de um sinal sonoro e os bot"o de 0i e
=ancel. Ketorna um valor verdadeiro se o usu(rio escolher 0i.
!4C retornoAcon#irm-XLese+a prosseguir7X/
open 2 Abre uma nova sess"o do browser$ como se o usu(rio pressionasse J=:K<BPI
!4C window.open-5TK<5$ 5Iome5 e$5caracter&sticas5f/
0ndeC
TK< 2 endere,o selecionado inicialmente *uando da abertura da nova +anela.
Iome 2 nome da nova +anela$ de#inido pelo programador.
=aracter&sticas 2 s.rie de op,9es de con#igura,"o da nova +anela$ se especi#icados devem
estar na mesma string$ separados por v&rulas e sem conter espa,os.
toolbarA0 ou 1
locationA0 ou 1
directoriesA0 ou 1
statusA0 ou 1
menubarA0 ou 1
scrollbarsA0 ou 1
resi1ableA0 ou 1
widthAvalor inteiro positivo
heightAvalor inteiro positivo
!4C
window.open-5httpCDDwww.geocities.comD=apitol6illD^12^D+avainde.htm5$5IovaJanela5$5to
olbarA1$locationA1$directoriesA0$statusA1$menubarA1$scrollbarsA1$resi1ableA0$widthAU20$
heightA205/
rea Inicial Scripts
^
rea Inicial Scripts
prompt 2 ;onta uma cai4a de entrada de dados$ de #orma simpli#icada comparando2se com
o ob+eto te4t.
!4C prompt-label e$valorf/
ondeC
label 2 te4to *ue aparece ao lado da cai4a.
valor 2 . o conte3do inicial da cai4a.
set:imeout 2 8a1 com *ue uma e4press"o se+a avaliada ap%s um determinado tempo -em
milissegundos/.
!4C ILAset:ime0ut-alert-Xvoc' chegoua a*ui$ a 10 segundosX/$10000/
IL 2 identi#icador utili1ado para o cancelamento de set:ime0ut
clear:imeout 2 =ancela set:ime0ut.
!4C clear:ime0ut-IL/
!ventosC
on<oad 2 0corre assim *ue a p(gina 6:;< termina de ser carregada.
onTnload 2 0corre assim *ue o usu(rio sai da p(gina atual.
Reset
!ste ob+eto restaura os campos de um #ormul(rio$ para seus valores iniciais.
8orma geralC
JII)T: :N)!A5reset5 IA;!A5nome5 ?A<T!A5label5 on=lic@A5a,"o5B
ondeC
reset 2 :ipo do ob+eto.
nome 2 Iome de#inido pelo programador$ para #uturas re#erencia,9es.
label 2 String *ue ser( mostrada na #ace do bot"o.
a,"o 2 Le#ine o *ue #a1er -al.m de sua #un,"o normal/ *uando clicamos no bot"o reset.
)ropriedadesC
name 2 Arma1ena o nome *ue #oi de#inido pelo usu(rio$ no campo IA;!$ para o ob+eto
reset.
!4C document.#orme0f.elemente0f.name
value 2 Arma1ena o te4to *ue aparece na #ace do bot"o reset. Le#inido no campo ?A<T!.
!4C document.#orme0f.elemente0f.value
rea Inicial Scripts
7
rea Inicial Scripts
;.todosC
clic@ 2 simula um cli*ue de mouse no bot"o reset$ e4ecutando todas as #un,9es a ele
associadas$ sem *ue no entanto o usu(rio tenha realmente clicado neste bot"o.
!4C resetIame.clic@-/
!ventosC
on=lic@ 2 0corre *uando clicamos o mouse sobre o bot"o reset. )ermite *ue associemos
outra #un,"o ao bot"o reset.
!4emploC
JF22:his #ile created 20C^ 01D02Dd7 b] =laris 6ome )age version 2.022B
J6:;<B
J6!ALB
J:I:<!B:utorial JavaScript 2 !4emploC KesetMuttonJD:I:<!B
J;!:A IA;!A>!I!KA:0K =0I:!I:A5=laris 6ome )age 2.05B
JD6!ALB
JM0LNB
J)BJ=!I:!KBJ80I: SIj!A5PU5 8A=!A5Mritannic Mold5
=0<0KA5l0000A85BJJD80I:BJ80I: SIj!A5P25 8A=!A5Mritannic Mold5
=0<0KA5l0000A85BavaJD80I:BJ80I: SIj!A5PU5 8A=!A5Mritannic Mold5
=0<0KA5l0000A85BSJD80I:BJ80I: SIj!A5P25 8A=!A5Mritannic Mold5
=0<0KA5l0000A85Bcript 2 JD80I:BJ80I: SIj!A5PU5 8A=!A5Mritannic Mold5
=0<0KA5l0000A85B>JD80I:BJ80I: SIj!A5P25 8A=!A5Mritannic Mold5
=0<0KA5l0000A85Buia de JD80I:BJ80I: SIj!A5PU5 8A=!A5Mritannic Mold5
=0<0KA5l0000A85BKJD80I:BJ80I: SIj!A5P25 8A=!A5Mritannic Mold5
=0<0KA5l0000A85Be#erbecircOnciaJD80I:BJ80I: SIj!A5P25 8A=!A5Mritannic
Mold5BJMKB JD80I:B
J80I: SIj!A5215 8A=!A5Mritannic Mold5 =0<0KA5l0000a05Bbcop]O 1dd7 Anderson
Marros :orresJD80I:BJMKBJMKBJMKB
JMBJIBJ80I: SIj!AP colorAl000000 B!JD80I:BJ80I: SIj!APU colorAl000000
B4emploJD80I:BJDIBJDMB
JD=!I:!KB
JMKBJMKB
J80K; actionA55 methodA5)0S:5B
rea Inicial Scripts
a
rea Inicial Scripts
J)BLigite o seu estilo musicalC
J)BJII)T: :N)!A5te4t5 IA;!A5estilo5 ?A<T!A55 SIj!AU0B JII)T:
:N)!A5K!S!:5 IA;!A5apaga5 ?A<T!A5<impa5 B
JD80K;B
JMKB
JMKB
JMKB
J=!I:!KB
J80K;B
JD80K;B

Lin)
6:;< permite liga,9es de uma regi"o de te4to -ou imagem/ a um outro documento. Iestas
p(ginas$ temos visto e4emplos dessas liga,9esC o browser destaca essas regi9es e imagens
do te4to$ indicando *ue s"o liga,9es de hiperte4to 2 tamb.m chamadas h]perte4t lin@s ou
hiperlin@s ou simplesmente lin@s.
8orma geralC
JA e IA;!A5ancora5 f
6K!8A5TK<5 e:AK>!:A5+anela5f eon=lic@A5a,"o5f eon;ouse0verA5a,"o5fB
:e4to e4plicativoJDAB
ondeC
TK< 2 G o documento destino da ligacao hiperte4toO
Vncora 2 G o te4to ou imagem *ue servira de liga,"o hiperte4to do documento sendo
apresentado para o documento destino.
+anela 2 Iome da +anela onde a p(gina ser( carregada$ para o caso de estarmos trabalhando
com #rames. 0 valor de 5+anela5 causa o seguinte impactoC
5Ytop5 C Se estivermos trabalhando com #rames$ a p(gina re#erenciada pelo lin@$ substituir(
a p(gina *ue criou as #rames$ ou se+a$ a p(gina atual$ com todas as #rames$ dar( lugar a nova
p(gina.
5Ysel#5 C A nova p(gina . carregada na mesma +anela do lin@.
5Yblan@5 C Abre uma nova se,"o do browse para carregar a p(gina.
a,"o 2 =%digo de resposta ao evento.
rea Inicial Scripts
d
rea Inicial Scripts
:e4to e4plicativo 2 :e4to de#inido pelo usu(rio$ *ue aparece na tela de #orma destacada.
!ventosC
on=lic@ 2 0corre *uando clicamos o mouse sobre o lin@.
!4C JA 6K!8A5TK< *ual*uer5 on=lic@A5alert-Xvoc' teclou no lin@FX/5B:e4toJDAB
on;ouse0ver 2 0corre *uando o mouse passa por cima do lin@$ sem ser clicado.
!4C JA 6K!8A5TK< *ual*uer5 on;ouse0verA5sel#.statusAX!ste te4to aparecer( na barra
de status *uando o mouse estiver posicionado sobre o lin@X5B:e4toJDAB
=aminhos para o documento destino
1.=aminho relativo 2 0 caminho relativo pode ser usado sempre *ue *ueremos #a1er
re#er'ncia a um documento *ue este+a no mesmo servidor do documento atual. )ara usar
lin@s com caminhos relativos . preciso$ portanto$ conhecer a estrutura do diret%rio do
servidor no *ual estamos trabalhando. Simpli#icando$ . como acessarmos um ar*uivo *ue
este+a no mesmo diret%rio$ n"o sendo necess(rio acrescentar o path.
!4C ?e+amos a #igura abai4oC

#igura 1
!sta #igura representa a estrutura de diret%rios do servidor >eocities$ e o caminho em
vermelho$ . o endere,o completo de minha p(gina. 0bserve *ue o ar*uivo em desta*ue
5JavaInde.htm5 . a p(gina inicial deste tutorial$ as outras p(ginas *ue completam este
tutorial est"o no mesmo diret%rio *ue a p(gina principal$ portanto$ n"o ha necessidade de
*uando a p(gina principal #or carregar outra *ue este+a no mesmo diret%rio$ incluir todo o
tra+eto para se chegar a ela$ basta re#erenciar JA 6K!8A5parte1.htm5B)AK:! 1JDAB$ ao
em ve1 de JA 6K!8 A 5httpCDDwww.geocities.comD =apitol6illD^12^Dparte1.htm5B)AK:!
1JDAB. Se bem *ue as duas #ormas #uncionam de maneira identica.
2. =aminho absoluto 2 Ttili1amos caminho absoluto *uando dese+amos re#erenciar um
documento *ue este+a em outro servidor. =om a mesma sinta4e$ e poss&vel escrever lin@s
para *ual*uer servidor QQQ no mundo. Seria a aplica,"o do endere,o completo da p(gina
em *uest"o$ como visto no &tem anterior.
U. <iga,9es a trechos de documentos 2 Al.m do atributo hre#$ *ue indica um documento
destino de uma liga,"o hiperte4to$ o elemento A possui um atributo IA;! *ue permite
indicar um trecho de documento como ponto de chegada de uma liga,"o hiperte4to.
8unciona tanto para documentos locais como para os arma1enados em outro servidor. 0
trecho deve ser indicado com o s&mbolo 5l5.
!4C
JavaInde.htm
J6:;<B
...
rea Inicial Scripts
\0
rea Inicial Scripts
JA 6K!8 A 5parte1.html25BLi#eren,a entre Java e JavaScriptJDAB
...
JD6:;<B

parte1.htm
J6:;<B
...
JA IA;!A515BJDAB0 *ue . JavaScript
JavaScript ....
JA IA;!A525BJDABLi#eren,a entre Java e JavaScript
A di#eren,a ....
...
JD6:;<B
Io e4emplo acima$ o lin@ de JavaInde.htm carrega a p(gina 5parte1.htm5 e
automaticamente posiciona o trcho 525 no topo da +anela do browser.
Para termnar...
rea Inicial Scripts
\1
rea Inicial Scripts
Bem, estamos no m deste tutora e se voc chegou at aqu, porque
voc reamente dese|a peo menos conhecer um pouco mas sobre
|avaScrpt, e espero que tenha contrbudo para sso.
Tente ser o mas ob|etvo e prtco possve e reunr em apenas uma
aposta, a gama de conhecmentos adqurdo ao ongo de vras horas
"garmpando" na Internet, pos como sabemos, exste muto xo por a.
Paavras reservadas
Exstem vras paavras que so reservadas para o |avaScrpt as quas
so stadas abaxo. Essas paavras no podem ser utzadas para
dentcar varves ou funces.
abstrac
t
oat pubc
booean for return
break functon short
byte goto statc
case f super
cath
mpemen
ts
swtch
char mport
snchronze
d
cass n ths
const nstanceof throw
contnu
e
nt throws
defaut nterface transent
rea Inicial Scripts
\2
rea Inicial Scripts
do ong true
doube natve try
ese new var
extends nu vod
fase package whe
na prvate wth
nay protected
Tabea de cores
Ao nvs de especcar cdgos hexadecmas para utzar cor em
documentos HTML, voc pode smpesmente utzar um tera, que
especca o nome da cor para obter o mesmo resutado. A segur sero
mostrados os vros teras que voc pode utzar na especcao de
cores:
Seecone a cor de fundo:
!4emplo de utili1a,"oC
Le#inindo Mac@ground JM0LN M>=0<0KA5literal5B
Le#inindo a cor do te4to JM0LN :!k:A5literal5B
Le#inindo a cor de trechos de te4tos J80I: =0<0KA5literal5...JD80I:B
<in@s$ 8ollowed <in@s$ etc. JM0LN A<IIiA5literal5B etc.
rea Inicial Scripts
\U
rea Inicial Scripts
A*ui esto +,- Literais *ue es(eci.icam as cores/ O *uadro est0 em ordem a.ab1tica2 os
nomes maiores a(arecem no .im da ista
3ome da Cor E4em(o 3ome da cor E4em(o 3ome da cor E4em(o
aliceblue aliceblue anti*uewhite anti*uewhite a*ua a*ua
a*uamarine a*uamarine a1ure a1ure beige beige
bis*ue bis*ue blac@ blac@ blanchedalmond blanchedalmond
blue blue blueviolet blueviolet brown brown
burl]wood burl]wood cadetblue cadetblue chartreuse chartreuse
chocolate chocolate coral coral corn#lowerblue corn#lowerblue
cornsil@ cornsil@ crimson crimson c]an c]an
dar@blue dar@blue dar@c]an dar@c]an dar@goldenrod dar@goldenrod
dar@gra] dar@gra] dar@green dar@green dar@@ha@i dar@@ha@i
dar@magenta dar@magenta dar@olivegreen dar@olivegreen dar@orange dar@orange
dar@orchid dar@orchid dar@red dar@red dar@salmon dar@salmon
dar@seagreen dar@seagreen dar@slateblue dar@slateblue dar@slategra] dar@slategra]
dar@tur*uoise dar@tur*uoise dar@violet dar@violet deeppin@ deeppin@
deeps@]blue deeps@]blue dimgra] dimgra] dodgerblue dodgerblue
#irebric@ #irebric@ #loralwhite #loralwhite #orestgreen #orestgreen
#uchsia #uchsia gainsboro gainsboro ghostwhite ghostwhite
gold gold goldenrod goldenrod gra] gra]
green green green]ellow green]ellow hone]dew hone]dew
hotpin@ hotpin@ indianred indianred indigo indigo
ivor] ivor] @ha@i @ha@i lavender lavender
lavenderblush lavenderblush lawngreen lawngreen lemonchi##on lemonchi##on
lightblue lightblue lightcoral lightcoral lightc]an lightc]an
lightgreen lightgreen lightgre] lightgre] lightpin@ lightpin@
lightsalmon lightsalmon lightseagreen lightseagreen lights@]blue lights@]blue
lightslategra] lightslategra] lightsteelblue lightsteelblue light]ellow light]ellow
lime lime limegreen limegreen linen linen
magenta magenta maroon maroon mediumblue mediumblue
rea Inicial Scripts
\
rea Inicial Scripts
midnightblue midnightblue mintcream mintcream mist]rose mist]rose
moccasin moccasin nava+owhite nava+owhite nav] nav]
oldlace oldlace olive olive olivedrab olivedrab
orange orange orangered orangered orchid orchid
palegoldenrod palegoldenrod palegreen palegreen paletur*uoise paletur*uoise
palevioletred palevioletred papa]awhip papa]awhip peachpu## peachpu##
peru peru pin@ pin@ plum plum
powderblue powderblue purple purple red red
ros]brown ros]brown ro]alblue ro]alblue saddlebrown saddlebrown
salmon salmon sand]brown sand]brown seagreen seagreen
seashell seashell sienna sienna silver silver
s@]blue s@]blue slateblue slateblue slategra] slategra]
snow snow springgreen springgreen steelblue steelblue
tan tan teal teal thistle thistle
tomato tomato tur*uoise tur*uoise violet violet
wheat wheat white white whitesmo@e whitesmo@e
]ellow ]ellow ]ellowgreen ]ellowgreen
3ome da Cor E4em(o 3ome da Cor E4em(o
lightgoldenrod]ellow lightgoldenrod]ellow mediuma*uamarine mediuma*uamarine
mediumorchid mediumorchid mediumpurple mediumpurple
mediumseagreen mediumseagreen mediumslateblue mediumslateblue
mediumspringgreen mediumspringgreen mediumtur*uoise mediumtur*uoise
mediumvioletred mediumvioletred
Abaixo
rea Inicial Scripts
\\
rea Inicial Scripts
Abai4o 'ei4arei a5uns in)s (ara 6oc7 consutar2 mas no es*uea de
6isitar nosso site2 1 meio de .undo de *uita2 mas .oi assim *ue comeou a
A((e e a 8icroso.t2 *uem sabe um dia99
Lnks
Favotte |ava Appets
Symantec |ava Centra - Reated Lnks
|ava Zne
|ava and |avascrpt Thngs
Experments n |avaScrpt - uma sta de exempos em |ava;
|avaScrpt Index
|avaScrpt uthorng Gude
Netscape's |avaScrpt Lnks
Netscape |ava Scrpt
|avaScrpt Authorng Gude - documentao sobre |ava Scrpt;
Hot|ava
|ava Repostory Home Page
|avaScrpt Resource Center
|ava Message Centra
Cub |ava
|avaScrpt-Intro by Voodoo - documentao sobre |ava Scrpt;
|avaScrpt & |ava Experments
Smpe Ltte Thngs To Add To Your Pages - ensna a crar |aneas e
botes em |ava;
Payng wth |avaScrpt
|ava - WWW Vrtua Lbrary
Appets Gaore!
Crag Sage's |avaScrpt
|avaScrpt Index - vros nks reaconados ao assunto;
The |avaScrpt Lbrary
Kurts' |avaScrpt Reference
Crag Sage's
|avascrpt demos
The |avascrpt Netscape Scrptng Language
|DK 2.0b Ouck Reference
Forms Processng Engne
|ava Resources Web Page
The Dve
|ames Thee's |avaScrpt stuh
Tmothy Index
|ason's |ava Scrpt Archve
|avaScrpt 411
Gamean: Earthweb's |ava Drectory - uma sta com cerca de 2500 tens.
Gamean: Earthweb's |ava Drectory
Advanced Web Deveopment Lnks
rea Inicial Scripts
\^
rea Inicial Scripts
The |AVA Scrpt Panet
|avaScrpt Book
|avaScrpt Tp of the Week - tmas dcas sobre |ava;
ISN Cut-N-Paste |avaScrpt
Ashey's |avaScrpt Exampes
|ava Appet Ratng Servce
The |ava Centre
The |ava Centre - En|oy your vst
|avaSoft
|avaWord
The |ava Boutque
a tutora on |ava Programmng
|avaScrpt Tutora
|ava - Netspace
|aven
Hot|ava Cafe
Cub Hot |ava
|avaScrpt
SunSoft |ava WorkShop Technca and Support Informaton
Symantec
http://www.The|avapace.com - The best pace on the Web For |ava and
|avaScrpt.
Robert Osson's |avascrpts
|avaScrpt exampes
Yahoo |ava Resources
Rodos |avascrpt Exampes
The |ava(TM) Boutque
|ava Book Lst

rea Inicial Scripts
\7

Super Apostila JavaScript

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Super Apostila JavaScript

Caricato da

Copyright:

Formati disponibili

rea Inicial Scripts

rea Inicial Scripts

rea Inicial Scripts

Potrebbero piacerti anche