Javascript

_______________________________________________________________________
_
1 INTRODUO......................................................................................................................... 3

2 JAVASCRIPT............................................................................................................................ 3
2.1 O QUE JAVASCRIPT ..........................................................................................................3
2.1.1 CARACTERSTICAS BSICAS................................................................................................3
2.1.2 O QUE JAVASCRIPT NO ..................................................................................................4
2.1.3 PARTICULARIDADES E LIMITAES.....................................................................................5
2.2 ELEMENTO SCRIPT..........................................................................................................5
2.3 EVENTOS EM JAVASCRIPT...................................................................................................8
2.4 MANIPULADORES DE EVENTOS ...........................................................................................8
2.4.1 ONLOAD............................................................................................................................9
2.4.2 ONUNLOAD........................................................................................................................9
2.4.3 ONCLICK.........................................................................................................................10
2.4.4 ONFOCUS.........................................................................................................................10
2.4.5 ONBLUR..........................................................................................................................11
2.4.6 ONCHANGE......................................................................................................................11
2.4.7 ONSELECT.......................................................................................................................12
2.4.8 ONSUBMIT.......................................................................................................................13
2.4.9 ONMOUSEOVER...............................................................................................................15
3 CONSTRUES DE JAVASCRIPT.................................................................................... 16
3.1 CONCEITOS BSICOS DE PROGRAMAO ..........................................................................16
3.1.1 CONSTRUO DE NOMES..................................................................................................16
3.1.2 DECLARAO DE VARIVEIS.............................................................................................16
3.1.3 T IPOS DE VALORES...........................................................................................................17
3.1.4 CARACTERES ESPECIAIS....................................................................................................18
3.1.5 EXPRESSES.....................................................................................................................18
3.1.6 OPERADORES...................................................................................................................18
3.1.7 DECLARAES.................................................................................................................23
3.1.8 FUNES.........................................................................................................................28
3.2 OBJETOS............................................................................................................................29
3.2.1 HIERARQUIA.....................................................................................................................29
3.2.2 A NATUREZA ORIENTADA A OBJETOS DE HTML..............................................................30
3.2.3 OBJETO NAVIGATOR ........................................................................................................31
3.2.4 OBJETO LOCATION...........................................................................................................31
3.2.5 OBJETO CHECKBOX..........................................................................................................32
3.2.6 OBJETO RADIO.................................................................................................................33
3.2.7 OBJETO HIDDEN...............................................................................................................33
3.2.8 OBJETO TEXT...................................................................................................................33
3.2.9 OBJETO RESET.................................................................................................................33
3.2.10 OBJETO SUBMIT.............................................................................................................34
3.2.11 OBJETO BUTTON............................................................................................................34
3.2.12 OBJETO TEXTAREA.........................................................................................................34
3.2.13 OBJETO SELECT..............................................................................................................34
3.3 OBJETOS DO CORE JAVASCRIPT.....................................................................................35
3.3.1 OBJETO ARRAY................................................................................................................35
3.3.2 OBJETO DATE..................................................................................................................36

Javascript

_______________________________________________________________________
_
3.3.3 OBJETO STRING ...............................................................................................................36
3.3.4 OBJETO WINDOW.............................................................................................................37

Javascript

_______________________________________________________________________
_

1 Introduo
O objetivo des t e mat e ri al apre s e n t a r a lingu a g e m Javascript,
muito utilizad a atu al m e n t e , em conjunto com HTML, para cons tr uir
pgin a s din mic a s e interfac e s de aplica e s no ambie n t e Web .
A partir des t e estu d o, esp e r a- se posicion a r a tecnologia Javascript
no cont e x t o do des e n v olvim e n t o Web , a fim de que des e n v olv e d o r e s
conh e a m
o pote n ci al das
lingu a g e n s interpr e t a d a s
pelos
nav e g a d o r e s .

2 Javascript
2.1

O que Javascript

Javascript uma lingu a g e m de script orient a d a a objeto s,

utilizad a par a des e n v olv e r aplica e s client e para Intern e t /Intran e t .
Ela foi criad a pela Netsca p e a fim de exp a n dir a funcion alid a d e de seu
popular brows er : o Navigator .
2. 1 . 1 CARACTERSTICAS

BSICAS

Javascript

uma
lingua g e m
de
script
(scripts
so
miniprogr a m a s interpr e t a d o s e volta d o s par a exec u o de tar ef a s
esp e cfica s) com uma sintax e bas t a n t e similar a C, C+ + , Pasc al e
Delphi.
Os coma n d o s e fun e s de Javascript so inserido s dentro de um
docu m e n t o da Web , junto com tags HTML e texto. Quan d o o
nav e g a d o r de um usu rio ace s s a est e docu m e n t o , ele forma t a a
pgin a, exec u t a n d o o progr a m a nela inserido.
Para aces s a r uma
pgin a que poss ui scripts , o nav e g a d o r dev e ser cap az de interpr e t a r
a lingua g e m .
Javascript uma lingua g e m bas e a d a em objetos . Uma lingua g e m
bas e a d a em objeto s uma lingua g e m orient a d a a objeto s com um
conjunt o de objeto s j emb u tid o s .
Semp r e que algo acont e c e em uma pgin a Web , ocorre um
eve n t o. Evento s pod e m ser qualqu e r coisa um bot o rece b e um
clique, o mou s e arra s t a d o , uma pgin a carre g a d a , um formulrio
envia d o, e assim por diant e. Javascript uma lingua g e m dirigida por
eve n t o s , no sentido de que projet a d a par a rea gir qua n d o um eve n t o
ocorr e.
A lingua g e m Javascript foi projet a d a para ma nip ular e apre s e n t a r
inform a o atrav s de um nav e g a d o r . Ela no cap az de recup e r a r
inform a e s de outro arquivo ou salvar dado s em um servidor da
3

Javascript

_______________________________________________________________________
_
Web , ou no comp u t a d o r do usu rio. Isto significa que no possv el
escr ev e r um progr a m a Javascript que, por exe m pl o, varra os diretrios
de um comp u t a d o r , lendo ou ap a g a n d o arquivos do usu rio.
Javascript uma lingu a g e m inde p e n d e n t e de plat afor m a , ou
seja, o cdigo escrito nes t a lingua g e m no dep e n d e de uma
plat afor m a esp e cfica (Windo w s , Macintos h, UNIX, etc), dep e n d e
ape n a s do nav e g a d o r que a interpr e t a . Dess a forma, quer o usu rio
ten h a um nav e g a d o r par a Windo w s , Macintos h ou UNIX, o cdigo
Javascript ser exec u t a d o se m que nen h u m a
ada p t a o seja
nec e s s ri a.

2. 1 . 2 O

QUE JAVASCRIPT NO

Ainda muito comu m algu m confun dir a lingua g e m Javascript

com a lingua g e m Java, mas , ate n o , Java s c ri p t n o Java . Java
(des e n v olvid a pela Sun Microsy s t e m s ) uma lingu a g e m
de
progr a m a o orient a d a a objetos comple t a , que pod e ser usad a para
projet a r aplica e s isolad a s (que no exige m um brows er par a rodar)
ou mini- aplica e s (applet s ).
Principais difere n a s entr e Javascript e Java:
Javascript bas e a d a em objetos - te m seus prprios objeto s
emb u ti d o s . Java orient a d a a objeto s os objetos so
cons tr udo s a partir de class e s ;
cdigo Javascript emb u tid o dentro de um docu m e n t o HTML
como texto simple s. Applets Java so refer e n ci a d o s a partir de
um docu m e n t o , ma s o cdigo ma n tid o em um arquivo
sep a r a d o (em um form a t o binrio);
Javascript identifica d a em um docu m e n t o HTML atrav s da tag
<SCRIPT>. Applets Java, atrav s da tag <APPLET>;
Javascript pas s a d a ao client e ( brows er ) como texto e
interpr e t a d a . Java compilad a em um tipo esp e ci al de cdigo
(byt ec o d e s ), que so pas s a d o s
ao client e
para ser e m
exec u t a d o s ;
Javascript usa tipag e m fraca - as variv eis no precis a m ser
declar a d a s , e uma variv el ora pod e guard a r strings , ora
n m e r o s . Java usa tipag e m forte as variv eis precis a m ser
declar a d a s e usad a s par a um tipo de dado s esp e cfico;
Javascript us a liga o din mic a refer n ci a s a objetos so
verificad a s e resolvida s em te m p o de exec u o . Java usa liga o
est tic a refer n ci a s a objetos dev e m ser resolvid a s qua n d o o
progr a m a compilad o.
4

Javascript

_______________________________________________________________________
_
2. 1 . 3 P ARTICULARIDADES E LIMITAES
Javascript import a n t e par a des e n v olv e d o r e s de pgin a s Web
que des ej a m est e n d e r a cap a cid a d e de seus docu m e n t o s HTML,
torn a n d o- os din mico s . No ent a n t o , est a lingua g e m apre s e n t a
algu m a s limita e s , que se enc aix a m em trs cat e g o ria s :
Limita e s de Brows er s
Como o cdigo Javascript exec u t a d o no client e ( brows er ), seu
interpr e t a d o r dev e ser imple m e n t a d o dentr o do brows er . A maioria
dos brows er s disponv eis no merc a d o atu al m e n t e (vers e s rece n t e s
do Intern e t Explorer e do Netsca p e ) do suport e Javascript.
Limita e s de Platafor m a s
Embor a Javascript rode em tod a s as plat afor m a s par a as quais
brow s er s comp a tv eis exist e m , ne m tod a s as fun e s de Javascript
rodar o do mes m o modo em plat afor m a s distint a s .

Limita e s de Segur a n a

A lingu a g e m Javascript foi projet a d a par a ser seg ur a com res p eit o
Web . Para isso, ela foi conce bid a com algu m a s restri e s :
Ela no pod e abrir, ler, grav ar ou salvar arquivos no comp u t a d o r
do usu rio. A nica inform a o que ela pod e aces s a r a que
est na pgin a Web ond e resid e (ou em outr a s pgin a s
carr e g a d a s ao me s m o te m p o , como ocorre qua n d o se usa m
fram e s );
Ela no pod e abrir, ler, grav ar ou salvar arquivos no servidor
Web ;
Ela no pod e ser usa d a par a criar vrus que danifiqu e o
comp u t a d o r do usu rio.
Resu mi n d o, Javascript uma lingu a g e m seg ur a e no cons e g u e
inter a gir diret a m e n t e com nad a no comp u t a d o r do usu rio fora da
pgin a Web que est send o exibida no nav e g a d o r .
2.2

Elemento SCRIPT

contain er tag : <SCRIPT>... < / SCRIPT>

atribut o s : LANGUAGE, SRC
5

Javascript

_______________________________________________________________________
_
Dentro de um docu m e n t o HTML, a lingu a g e m Javascript
delimita d a pelo par de tags <SCRIPT> e </SCRIPT>. Voc pod e
posicion ar a tag <SCRIPT> dentro dos ele m e n t o s <HEAD > e
</HEAD >, <BODY> e </BODY>, ou amb o s possvel incorpor a r
mltiplos ele m e n t o s <SCRIPT> dentr o de um docu m e n t o .
Scripts dentr o da tag <HEAD > so carre g a d o s ant e s que o resto
da pgin a seja carre g a d o , torn a n d o- se um excele n t e lugar para
colocar suas fun e s Javascript (par a gar a n tir que elas est ej a m
dispo nv eis para outr a s part e s do docu m e n t o ). Colocar scripts dentr o
da tag <BODY> faz com que seja possvel criar, dina mic a m e n t e ,
part e s de seu docu m e n t o (exibindo, por exe m pl o, a hora).
A sintax e do ele m e n t o <SCRIPT> :
<SCRIPT LANGUAGE=javascript>
cdigo-fonte javascript
</SCRIPT>
A tag <SCRIPT> inform a o interpr e t a d o r Javascript do nav e g a d o r
que um script enco n tr a- se emb u ti do. O atribut o LANGUAGE identifica
a lingua g e m que dev e ser utilizad a par a interpr e t a r o cdigo do script .
Isto nec e s s rio porqu e exist e m outra s lingua g e n s para cons tr u o
de scripts , como, por exe m plo, VBScript (Microsoft).
O atribut o SRC per mit e cha m a r um arquivo de scripts exter n o
(arquivos com exte n s o .js ). A fim de facilitar a ma n u t e n o ,
reco m e n d a - se ar m a z e n a r ar fun e s Javascript de uma pgin a em um
arquivo sep a r a d o , que pod e ser includo no docu m e n t o HTML com a
cons tr u o ab aixo.
<SCRIPT LANGUAGE=javascript SRC=funcoes.js></SCRIPT>

Criando o primeiro script

O exe m pl o ab aixo imprim e

que, ap e s a r de no existire m
e </BODY>, est a fras e
document.write() instrui o
aps trofo s na pgin a.

a fras e Bom dia! na pgin a. Observ e

ele m e n t o s entr e as marc a e s <BODY>
exibid a. Isto ocorre porqu e a fun o
nav e g a d o r a colocar o que estiver entr e

<html>
<head>
<script language="javascript">
document.write("Bom dia!<BR>");
</script>
</head>
<body>
</body>
6

Javascript

_______________________________________________________________________
_
</html>

Criando o segu n d o script

Uma das raz e s de utilizar Javascript a possibilidad e de mont a r um

texto par a ser exibido, incluindo valore s de variv eis que pode m ser
inserido s pelo usu rio.
<html>
<head>
<script language="javascript">
var nome
nome = window.prompt("Digite o seu nome:");
document.write("Bom dia, " + nome + "!<BR>");
</script>
</head>
<body>
</body>
</html>
Neste ponto, import a n t e lembr a r que ne m todos os
nav e g a d o r e s
interpr e t a m
Javascript.
Para
evitar
res ult a d o s
indes ej a d o s (por exe m pl o, listag e m do cdigo da fun o Javascript
que dev eria ser interpr e t a d a ) , usa m- se as marc a e s de come n t rio s
<! e -->, confor m e exe m pl o a seguir.
<html>
<head>
<script language="javascript">
<!-var nome
nome = window.prompt("Digite o seu nome:");
document.write("Bom dia, " + nome + "!<BR>");
//-->
</script>
</head>
<body>
</body>
</html>

Javascript

_______________________________________________________________________
_
2.3

Eventos em Javascript

Javascript uma lingu a g e m dirigida por eve n t o s . Evento s (tais

como, clicar no mo u s e , ou pres sion a r um bot o) so utilizado s par a
controlar a inter a o do usu rio com o aplicativo.
Progra m a s conve n cio n ai s funcion a m de ma n eir a difere n t e . Um
progr a m a conve n cio n al exec u t a seu cdigo seq u e n ci al m e n t e .
function exibe() {
if ( !(confirm(Quer encerrar?) ) {
documento.write (Oi, pessoal da Internet!);
}
}
Um progr a m a que queira que o usu rio confirm e a exibio de
uma fras e pod eria usar a fun o acim a para obt er a entr a d a do
usu rio. Entret a n t o , est e progr a m a ficaria pres o na funo exibe(),
esp e r a n d o por uma res po s t a . Enqu a n t o isso, no possv el ter outr a
oper a o send o exec u t a d a . Quaisqu e r outra s entr a d a s e oper a e s
so sus p e n s a s at que o usu rio resp o n d a pergu n t a .
Uma abord a g e m melhor seria usar um dos ma nip ul a d o r e s
eve n t o s de Javascript para ativar a funo abaixo.

de

function exibe() {
documento.write (Oi, pessoal da Internet!);
}
Manipula d or e s Javascript so repr e s e n t a d o s como atribut o s
esp e ci ais que modifica m o comp o r t a m e n t o de uma tag HTML qual
so an ex a d o s . Atributos de ma nip ula o de eve n t o s com e a m todos
com On e identifica m os divers o s eve n t o s que pod e m ocorrer. O
valor associa d o ao ma nip ul a d o r pod e ser uma seq u n ci a de
declar a e s Javascript, ou uma cha m a d a de funo Javascript.
2.4

Manipuladores de eventos

Manipula d or e s de eve n t o s Javascript serv e m para interfac e a r um

script com ativida d e s do siste m a ou ae s do usu rio. Eles so
divididos em 2 cat e g o ria s : eve n t o s de siste m a e eve n t o s de mou s e .
Os eve n t o s de siste m a dispo nv eis so: OnLoad e OnUnload . Eles
no exige m a inter a o do usu rio para sere m ativa d o s .

Javascript

_______________________________________________________________________
_
Os eve n t o s de mo u s e dispo nv eis so: OnClick , OnFocus , OnBlur ,
OnChan g e , OnSelec t , OnSub m i t e OnMous eO v er . Eles exige m a
inter a o do usu rio (atr av s do mou s e ou no) par a ser e m ativad o s .
2. 4 . 1 O N LOAD
Este eve n t o ativa d o aps a pgin a HTML ser comple t a m e n t e
carre g a d a . Ele pode ser associa d o s tags <BODY> ou <FRAMESET>.
Exe mplo:
<html>
<head>
<script language=Javascript>
function chegada() {
window.alert(Seja bem-vindo ao nosso site!);
}
</script>
</head>
<body OnLoad=chegada()>
Veja que interessante utilizao do evento <I>OnLoad</I>.
</body>
</html>
2. 4 . 2 O N U NLOAD
Este eve n t o ativa d o aps a pgin a HTML ser aba n d o n a d a (seja
atrav s do clique sobr e algu m link, ou sobre os bot e s de
ava n o/r e t r o c e s s o do brows er ). Ele pod e ser associa d o s tags
<BODY> ou <FRAMESET>.
Exe mplo:
<html>
<head>
<script language=Javascript>
function saida() {
window.alert(Volte sempre!);
}
</script>
</head>
<body OnUnload=saida()>
Veja que interessante utilizao do evento <I>OnUnLoad</I>.
</body>
</html>

Javascript

_______________________________________________________________________
_
2. 4 . 3 O N CLICK
O eve n t o mais bsico de mou s e trat a d o pelo ma nip ul a d o r
OnClick . Este eve n t o ativad o se m p r e que se d um clique sobre um
objeto que aceit a eve n t o de clique de mou s e . Objetos que aceit a m um
eve n t o OnClick so links , caixa s de verifica o e bot e s .
Exe mplo:
<html>
<head>
<script language=Javascript>
function mensagem() {
window.alert(Voc clicou neste campo);
}
</script>
</head>
<body>
<a href=exemplo3.html OnClick=mensagem()>
<i>Link</i> comum</a><br>
<form>
<input type=radio OnClick=mensagem()><i>Radio</i>
<br>
<input type=checkbox OnClick=mensagem()><i>Checkbox</i>
<br>
<input type=reset OnClick=mensagem()>
<br>
<input type=submit OnClick=mensagem()>
<br>
</form>
</body>
</html>
2. 4 . 4 O N F OCUS
O foco ocorr e qua n d o um objeto torn a- se o item em foco. Isto
acon t e c e qua n d o o usu rio clicar ou altern a r para um objeto
esp e cfico na pgin a. Este eve n t o pod e ser ass ocia d o aos objetos tex t ,
pass w or d, text ar e a
e select (definidos pelas tags <INPUT>,
<TEXTAREA> e <SELECT>).
Exe mplo:
<html>
<head>
<script language=Javascript>
function foco() {
10

Javascript

_______________________________________________________________________
_
window.alert(O campo EMAIL est em foco);
}
</script>
</head>
<body><form>
Nome: <input name=nome type=text><br>
Email: <input name=email type=text OnFocus=foco()><br>
Telefone: <input name=telefone type=text>
</form></body>
</html>
2. 4 . 5 O N B LUR
Este
qua n d o se
par a outro
associa d o
pelas tags

eve n t o ativa d o qua n d o um objeto torn a- se fora de foco mud a par a outra janela, ou aplicativo, ou qua n d o se pas s a
objeto utilizan d o cliques do mou s e , ou a tecla TAB. Ele
aos objeto s tex t , pass w or d, text ar e a e select (definidos
<INPUT>, <TEXTAREA> e <SELECT>).

Exe mplo:
<html><head><script language=Javascript>
function semfoco() {
window.alert(O campo EMAIL perdeu o foco);
}
</script></head>
<body><form>
Nome: <input name=nome type=text>
<br>
Email:<input name=email type=text OnBlur=semfoco()>
<br>
Telefone: <input name=telefone type=text>
</form></body></html>
2. 4 . 6 O N CHANGE
Este eve n t o ativa d o se m p r e que um objeto perd e o foco e o
seu valor alter a d o . Ele associa d o aos objetos text , pass w or d,
text ar e a e select (definidos pelas tags <INPUT>, <TEXTAREA> e
<SELECT>).
Exe mplo:
<html>
<head>
11

Javascript

_______________________________________________________________________
_
<script language="Javascript">
function mudou1() {
document.form1.completo.value=document.form1.nome.value;
}
function mudou2() {
document.form1.completo.value=document.form1.completo.value
+ " + document.form1.sobrenome.value;
}
</script>
</head>
<body bgcolor=white link=blue vlink=blue alink=blue>
<form name=form1>
<pre>
Nome:
<input name="nome" type="text" OnChange="mudou1()">
Sobrenome:
<input name="sobrenome" type="text" OnChange="mudou2()">
Nome completo:
<input name="completo" type="text">
</pre>
</form>
</body>
</html>

2. 4 . 7 O N S ELECT
Este eve n t o ativa d o qua n d o o usu rio selecion a (deixa em
des t a q u e ) part e do texto em um dos objeto s aos quais est ass ocia d o.
So eles: tex t , pass w or d e text ar e a (definidos pelas tags <INPUT> e
<TEXTAREA>).

12

Javascript

_______________________________________________________________________
_
Exe mplo:
<html>
<head>
<script language="Javascript">
function selecao() {
window.alert("Campo selecionado");
}
</script>
</head>
<body bgcolor=white link=blue vlink=blue alink=blue>
<form>
<pre>
Campo input texto:
<input type="text" OnSelect="selecao()">
Campo input senha:
<input type="password" OnSelect="selecao()">
Campo textarea:
<textarea OnSelect="selecao()"></textarea>
</pre>
</form>
</body>
</html>
2. 4 . 8 O N S UBMIT
Este eve n t o ativa d o no mo m e n t o de enviar os dado s do
formulrio. Ele ass ocia d o ao objeto form (definido pela tag
<FORM >).
Exe mplo:
<html>
<head>
<script language="Javascript">
function submete() {
window.alert("Evento OnSubmit ativado!");
}
</script>
</head>
<body bgcolor=white link=blue vlink=blue alink=blue>
<form name=form1 OnSubmit="submete()">
Campo 1: <input type="text" size=10 name=campo1><br>
Campo 2: <input type="text" size=10 name=campo2><p>
<input type=submit>
</form>
</body>
13

Javascript

_______________________________________________________________________
_
</html>
Muitas vezes , os dado s que so inseridos em um formul rio
precis a m ser sep a r a d o s , analis a d o s , ma nip ul a d o s ou verificado s
qua n t o a erros ant e s de ser e m tran s mi tido s para o servidor. O eve n t o
OnSub m i t per mit e a captur a e, se nec e s s rio, a interru p o do envio
dos dado s de um formul rio. Isto realizad o cha m a n d o - se a fun o a
partir do ma nip ul a d o r OnSub m i t , fazen d o com que ela retorn e
verd a d eir o ou falso. Se a funo ass ocia d a ao ma nip ula d o r retorn a r
falso, os dado s do formul rio no ser o envia d o s . Esta funcion alid a d e
pod e ser verificad a a partir do cdigo a seg uir.
Exe mplo:
<html>
<head>
<script language="Javascript">
function submete() {
if (document.form1.campo1.value == "" ||
document.form1.campo2.value == "") {
return false;
}
else {
return true;
}
}
</script>
</head>
<body bgcolor=white link=blue vlink=blue alink=blue>
<form name=form1 action="exemplo8b.html"
OnSubmit="return submete()">
Campo 1: <input type="text" size=10 name=campo1>
<br>
Campo 2: <input type="text" size=10 name=campo2>
<p>
<input type=submit>
</form>
</body>
</html>

14

Javascript

_______________________________________________________________________
_
2. 4 . 9 O N M OUSE O VER
Este eve n t o ativa d o qua n d o o pont eiro do mou s e pas s a sobr e
um objeto do tipo links ou bot e s .
Exe mplo:
<html>
<head>
<script language="Javascript">
function ativa() {
window.alert("Evento OnMouseOver ativado!");
}
</script>
</head>
<body bgcolor=white link=blue vlink=blue alink=blue>
<a href="exemplo9.html" OnMouseOver="ativa()">
Passe o <i>mouse</i> sobre este <i>link</i></a>
<form>
<input type="reset" value="Boto Reset"
OnMouseOver="ativa()"><P>
<input type="submit" value="Boto Submit"
OnMouseOver="ativa()">
</form>
</body>
</html>

15

Javascript

_______________________________________________________________________
_

3 Construes de Javascript
3.1

Conceitos bsicos de programao

3. 1 . 1 CONSTRUO

DE NOMES

Javascript apre s e n t a
variv eis/fu n e s :

algu m a s

restri e s

qua n t o

ao nom e

de

no per mitido colocar esp a o em branc o em um nom e ;

no per mitido incluir um hfen (-) em um nom e ;
no per mitido colocar os seg uint e s carac t e r e s
em um
nom e : . , ; ?
emb or a seja possvel usar dgitos em um nom e , ele precis a
come a r com uma letra;
no per mitido utilizar, como nom e de uma nova variv el/fun o ,
algu m a das palavr a s res erv a d a s de Javascript.

Segu e a rela o de palavr a s que no pod e m

nom e s de variv eis ou fun e s em Javascript:

ser usad a s

como

abstract, boolea n, break, byt e, cas e, catch, char, class, cons t,

continu e , default, do, double, else, ext e n d s , false, final, finally, float,
for, function, goto, if, imple m e n t s , import, in, instanc e o f, nt, interfac e,
long, nativ e, new, null, packa g e , privat e, prot ec t e d , public, return,
short, static, sup er, switch, sync hroniz e d , this, throw, throws ,
transie n t, true, try, var, void, while, with.

3. 1 . 2 D ECLARAO

DE VARIVEIS

Cada variv el te m que ser declar a d a como global ou local. A

nica difere n a entr e est e s dois tipos em Javascript ond e elas est o
localizad a s dentr o do cdigo. possvel definir variv eis ant e s de
atribuir um valor a elas, ou no mo m e n t o em que fizer a atribui o.

Variveis Locais

So definida s dentr o do corpo de uma fun o. Elas so vlida s

ape n a s dentro do corpo da funo ond e fora m definid a s (escop o
limita d o).
16

Javascript

_______________________________________________________________________
_
Exe mplo:
function adiciona(valor){
var a
a = valor + 10;
...
}
function subtrai(valor){
var b
b = valor - 10;
...
}
Neste exe m pl o, a variv el a vista ap e n a s pela funo adiciona(),
enqu a n t o que a variv el b vista ape n a s por subtrai().

Variveis Globais

So definida s fora de todos os corpos de fun e s de um arquivo

Javascript. Elas so vlida s dentr o de qualqu e r fun o do arquivo.
Exe mplo:
var total = 0;
function adiciona(valor){
var a = valor + 10;
total = total + a;
}
function subtrai(valor){
var b = valor - 10;
total = total - b;
}
Neste exe m plo, a variv el total definida tant o fora da funo
adiciona(), qua n t o fora da funo subtrai(), de form a que est
aces sv el a amb a s .
3. 1 . 3 TIPOS

DE VALORES

17

Javascript

_______________________________________________________________________
_
Existe m 4 (qua tro) tipos de variv eis recon h e cid o s por
Javascript: n m e r o s , valores lgicos (boole a n o s ), strings e nulos. O
tipo esp e cfico de uma variv el dep e n d e dos dado s atribudo s a ela.

Nmer o : qualqu e r n m e r o positivo ou neg a tivo. Este n m e r o pod e

ser inteiro no form a t o decim al, hex a d e ci m al ou octal. Pode ta m b m
ser nm e r o de ponto flutua n t e com/s e m expon e n ci al;
Boolea n o : true ou false (se m asp a s );
String : conjunt o de carac t e r e s limita d o s por asp a s / a p s t r ofo s . Um
string exige um par de asp a s (ou aps trofos) par a identific- lo
como string ;
Nulo : null (palavr a chav e que deno t a o valor nulo).

3. 1 . 4 CARACTERES

ESPECIAIS

Alguns caract e r e s esp e ci ais que so per mitidos em valore s do tipo

string :

\b: retroc e s s o (backs p a c e );

\f: nova pgin a (for m fee d );
\n: nova linha (line fee d );
\r: retor no de carro (carriage return );
\t: caract e r de tabula o (tab ).

3. 1 . 5 EXPRESSES
Expre s s o um conjunto de literais (cons t a n t e s ), variv eis e
oper a d o r e s que, avaliado s , res ult a m em um nico valor (n m e r o,
string ou boole a n o).
Existe m 3 (trs) tipos de expr e s s e s em Javascript:

expr e s s e s aritm tic a s : result a m em um nm e r o;

expr e s s e s de string : result a m em uma sequ n ci a de caract e r e s
(string );
expr e s s e s
lgicas :
res ult a m
em
verd a d eiro
ou
falso,
repr e s e n t a d o s , res p e c tiv a m e n t e , pelas palavr a s res erv a d a s true e
false .

3. 1 . 6 O PERADORES
Oper a d o r e s so smbolos esp e ci ais que controla m como uma
expr e s s o dev e ser avaliad a . Um oper a d o r pod e ser binrio - exige
18

Javascript

_______________________________________________________________________
_
dois oper a n d o s ; ou unrio - exige ape n a s um oper a n d o (ant e s ou
depois do oper a d o r).
Os oper a d o r e s pod e m , aind a, ser classificad o s de acord o com o
tipo dos oper a n d o s
que
ma nip ula m :
oper a d o r e s
aritm tico s ,
oper a d o r e s de comp a r a o , oper a d o r e s de string , oper a d o r e s lgicos ,
oper a d o r e s bit a bit e oper a d o r e s de atribui o .

OPERADORES ARITMTICOS

Oper a d o r e s arit m tico s constr e m

rece b e m e retorn a m n m e r o s .

expr e s s e s

aritm tic a s .

Eles

A tab el a 1 mos tr a os oper a d o r e s arit m tico s bsicos de Javascript.

Op er a d o r
+
*
/

Fun o
Soma
Subtr a o
Multiplica o
Diviso

Tabela 1 Operadore s arit m ti co s bsicos

Existe m outros oper a d o r e s arit m tico s em Javascript. So eles:

-

Mdulo (%)
Retorn a o resto da oper a o
oper a n d o s .
Exe mplo: 22 % 5 => 2

de

diviso

inteira

entr e

Incre m e n t o (+ + )
uma form a abr evia d a de adicion ar 1 a um oper a n d o
oper a n d o dev e ser uma variv el).
Exem plo: operando++ => operando = operando + 1

os

(o

O oper a d o r de incre m e n t o pod e ser escrito como operando++

ou ++operando. O lado em que o oper a d o r est controla qua n d o
1 adicion a d o ao oper a n d o (com res p eito ao resto da
expr e s s o ). Se ele usad o depois do oper a n d o , retor n a o valor
do oper a n d o ant e s de incre m e n t - lo. Por exe m plo, se x=3, a
declar a o y=x++ coloca primeiro o valor 3 em y e, depois,
incre m e n t a x par a 4. Se, por outro lado, o oper a d o r de
incre m e n t o for coloca d o ant e s do oper a n d o , ele retor n a o valor
do oper a n d o depois de o oper a n d o ser incre m e n t a d o . O cdigo
y=++x primeiro incre m e n t a o x par a 4 e, ent o , coloca o valor 4
em y.
-

Decre m e n t o (--)
19

Javascript

_______________________________________________________________________
_
uma form a abr evia d a de subtr air 1 de um oper a n d o (o
oper a n d o dev e ser uma variv el).
Exe mplo: operando-- = > operando = operando 1
De forma se m el h a n t e ao oper a d o r de incre m e n t o , o oper a d o r
de
decr e m e n t o pod e ser escrito como operando-- ou
--operando.
-

Nega o Unria (-)

Este oper a d o r neg a o seu oper a n d o .
Exe mplo: x = 4; y = -x = > y = -4

OPERADORES DE COMPARAO

Um oper a d o r de comp a r a o comp a r a seus oper a n d o s e retorn a

um valor boole a n o . Estes oper a n d o s pod e m ser nm e r o s ou strings .
A tab el a 2 mos tr a os oper a d o r e s de comp a r a o de Javascript.
Op er a d o r
==
!=
>
>=
<
<=

Fun o
Igual a
Diferen t e de
Maior que
Maior ou igual a
Menor que
Menor ou igual a

Tabela 2 Operad or e s de co m p ara o

OPERADORES DE STRING

O oper a d o r de string , +, serv e

rece b e e retor n a strings .
Exe mplo: string1 +

string2 = >

para

conc a t e n a r

strings . Ele

string1string2

OPERADORES LGICOS
Os oper a d o r e s lgicos retorn a m valore s boole a n o s .
A tab el a 3 mos tr a os oper a d o r e s lgicos de Javascript.
Op er a d o r

Fun o
20

Javascript

_______________________________________________________________________
_
&&
E, AND
||
OU, OR
!
NO, NOT
Tabela 3 Operadore s lgicos

OPERADORES BIT A BIT

Os oper a d o r e s bit a bit serv e m para ma nip ular um nm e r o a nvel

de bit .
A tab el a 4 mos tr a os oper a d o r e s lgicos de Javascript.
Op er a d o r
&
|
^
~
<<
>>
>> >

Fun o
E, AND
OU, OR
OU Exclusivo, XOR
NO, NOT
Desloca m e n t o esqu e r d a
Desloca m e n t o direita
Desloca m e n t o direita
pre e n c hi m e n t o de zeros

com

Tabela 4 Operad or e s bit a bit

OPERADORES DE ATRIBUIO

Javascript d suport e a um mt o d o abr evia d o de escr ev e r

oper a e s arit m tic a s padr o e bit a bit . So os oper a d o r e s de
atribui o, apr e s e n t a d o s na tab el a 5.

21

Javascript

_______________________________________________________________________
_
Op er a d o r
x += y
x -= y
x *= y
x /= y
x %= y
x << = y
x >> = y
x >>> = y
x &= y
x ^= y
x |= y

x
x
x
x
x
x
x
x
x
x
x

=
=
=
=
=
=
=
=
=
=
=

x
x
x
x
x
x
x
x
x
x
x

Fun o
+ y
y
*y
/y
% y
<< y
>> y
>>> y
&y
^ y
| y

Tabela 5 Operadore s de atribuio

22

Javascript

_______________________________________________________________________
_
Pre c e d n c i a d e Op er a d o r e s
Em Javascript, os oper a d o r e s t m cert a orde m de prec e d n ci a , ou
que oper a d o r e s so avaliad o s em primeiro lugar e em que orde m. A
orde m de prec e d n ci a, da mais alta (primeir a) mais baixa (ltim a),
a seg uint e :

Cha m a d a s e me m b r o s ( ( ) e [ ] );
Nega o , incre m e n t o e decr e m e n t o (!, ~, -, + + e --);
Multiplica o e diviso (*, / e %);
Adio e subtr a o (+ e -);
Desloc a m e n t o s (< < , > > e > > > ) ;
Relacion ais (<, < = , > e > = ) ;
Iguald a d e (= = e !=);
E bit a bit (&);
OU Exclusivo bit e bit ( ^);
OU bit a bit ( | );
E Lgico (&&);
OU Lgico ( || );
Atribuio.

3. 1 . 7 D ECLARAES
Declar a o uma sequ n ci a de palavr a s- chav e, oper a d o r e s ,
oper a n d o s e/ou expr e s s e s ter min a d o s por um ponto- e- vrgula.
Todas as declar a e s em Javascript pode m ser agrup a d a s em
uma das seg uint e s cat e g o ri a s :

Coma n d o s ;
Declar a e s Condicion ais;
Declar a e s de Lao;
Declar a e s de Manipula o de Objeto s.

COMANDOS
Declar a o de variv eis
A declar a o
var indica que a palavr a imedia t a m e n t e
subs e q u e n t e uma variv el, qual possvel atribuir qualqu e r
valor.
Exe mplo: var i;
var i=10;
23

Javascript

_______________________________________________________________________
_
var x, y, z=1;
Come n t rio em uma nica linha
Para acre s c e n t a r com e n t rio s que ocup a m ape n a s uma linha,
dev e- se colocar a seq u n ci a // ant e s do texto de com e n t rio.
Exe mplo: total = total + 1; //acumula total
Come n t rio em mais de uma linha
Para acre s c e n t a r com e n t rio s que ocup a m mais de uma linha,
dev e- se colocar a sequ n ci a /* na primeir a linha e */ na
ltima linha.
Exe mplo: /*aqui comea o comentrio
aqui termina o comentrio */

DECLARAES CONDICIONAIS

Permit e m
controlar o conjunto de declar a e s
que ser o
exec u t a d a s , com bas e em uma condi o (um a expr e s s o ser
verd a d eir a ou falsa). A declar a o condicion al de Javascript usa as
palavr a s- chav e if e else , e switch .
Sintax e : d e cl a r a o if e else
if (condio ) {
// faz algo se a condio for verdadeira
}
else {
// faz algo se a condio for falsa
}
Sintax e : d e cl a r a o s wi t c h
switch (fruta) {
case Laranja:
XYZ = 1
break
case Banana:
XYZ = 2
break
default:
XYZ = 3
}

24

Javascript

_______________________________________________________________________
_
As chav e s ( { } ) define m um bloco de declar a e s que so
trat a d a s e exec u t a d a s como uma unida d e .

DECLARAES DE LAO

Possibilita m rep e tir a exec u o de um conjunt o de declar a e s

mais de uma vez.
As declar a e s de lao de Javascript usa m as palavr a s - chav e for e
while .
Sintax e : d e cl a r a o for
for (inicializao ; condio ; incre m e n t o ) {
declarao 1 ;
...
declarao n ;
}
De acordo com a sintax e expo s t a ant erior m e n t e :
inicializao uma expr e s s o usad a para inicializar uma
variv el cont a d o r (a variv el utilizad a par a controlar o
n m e r o de vezes que o lao exec u t a d o );
condio uma expr e s s o boole a n a avaliad a a cad a
rep e ti o do lao, ant e s do corpo do lao ser exec u t a d o .
Enqu a n t o a expr e s s o for verd a d eir a , o cont e d o do lao
exec u t a d o ;
incremento uma expr e s s o usad a par a atu alizar (atra v s
de incre m e n t o ou decr e m e n t o ) o cont a d o r.
Exe mplo:
for (i=1; i <=5; i++) {
total = total + 1;
}
Na declar a o for , pode- se omitir as part e s de inicializa o,
condi o e incre m e n t o , cont a n t o que as vrgula s per m a n e a m .
Sintax e : d e cl a r a o w hil e
while (condio ) {
declarao 1 ;
...
25

Javascript

_______________________________________________________________________
_
declarao n ;
}
Dentro do corpo de um lao for e while , possv el controlar at
qua n d o o lao dev e ser exec u t a d o . Isto obtido atr av s das
declar a e s break e continu e :
break : canc el a a exec u o dos laos for e while , pas s a n d o o
controle par a a prxim a instru o fora do lao ;
continu e : em um lao for , ela canc el a a exec u o , pas s a n d o o
controle par a a prxim a itera o ; em um lao while , ela
canc el a a exec u o , volta n d o condi o.

DECLARAES DE MANIPULAO DE OBJETOS

Javascript uma lingu a g e m bas e a d a em objetos . Um objeto uma

entid a d e que cont m comp o n e n t e s ass ocia d o s que pod e m arm a z e n a r
divers o s valore s.
Algum a s vezes pod e ser preciso efetu a r oper a e s em tod a s as
proprie d a d e s de um objeto, ou, at mes m o , listar as proprie d a d e s de
um objeto. Estas tar ef a s so facilme n t e exec u t a d a s atr av s das
declar a e s for...in e with . Existe ta m b m o oper a d o r esp e ci al para
objetos new e uma palavr a- chav e esp e ci al this .
Op er a d o r n e w
Cria uma nova inst n cia de um objeto.
Sintax e :
novaVar = new tipoObjet o (par m e tr o s );
ond e, novaVar a variv el de objeto criad a, tipoObjet o o tipo
do objeto que est send o criado (um dos tipos emb u ti d o s de
Javascript), e par m e tr o s so quais q u e r par m e t r o s de que o
objeto precis a par a ser criado corret a m e n t e .
Pala vr a - ch a v e thi s
Objetos so cons titudo s de proprie d a d e s e mt o d o s . Muitos
dos objeto s emb u tid o s de Javascript cont m , por sua vez, outros
objetos , que pod e m cont er outros objeto s, e assim por diant e . s
veze s, torn a- se difcil sab e r em que ponto se est na rvor e de
objetos . Javascript oferec e um atalho para refer e n ci ar o objeto
corren t e a palavr a- chav e this .
26

Javascript

_______________________________________________________________________
_
Sintax e :
this.propried a d e
Decl ar a o for.. . in
Repe t e uma variv el sobre tod a s as proprie d a d e s de um objeto.
Este um tipo esp e ci al de declar a o de lao que varre tod a s as
proprie d a d e s de um objeto.
Sintax e :
for (proprieda d e in objeto ) {
declara e s
}
ond e, objeto o objeto em que se est trab alh a n d o , e
proprieda d e o nom e da proprie d a d e do objeto. A cad a itera o
do lao, propried a d e rece b e uma proprie d a d e difere n t e do
objeto. O lao se enc err a qua n d o tod a s as proprie d a d e s de um
objeto j fora m visitad a s .
Exe mplo:
<html>
<head><title>Javascript</title></head>
<body>
<h3>Propriedades do Documento</h3>
<hr>
<script language="javascript">
for (propriedade in document)
document.write(propriedade + "<br>");
</script>
</body>
</html>
Decl ar a o wi t h
Indica que, no corpo da declar a o , toda s as refer n ci a s
variv eis so proprie d a d e s do objeto em que s t o .

Sintax e :
with (objeto ) {
declara e s
}
Exe mplo:
27

Javascript

_______________________________________________________________________
_
with (document){
fgColor = #000000;
bgColor = #FFFFFF;
}
O cdigo acima pod e ser usa d o no lugar de:
document.fgColor = #000000;
document.bgColor = #FFFFFF;

3. 1 . 8 F UNES
Uma funo um conjunto de declar a e s que exec u t a m uma
taref a esp e cfica.
Existe m dois tipos de fun e s : fun e s des e n v olvid a s pelo
usu rio e fun e s pr- definida s da lingua g e m .
Em Javascript, uma fun o identificad a pela palavr a- chav e
function , uma palavr a cha m a d a no m eFu n o , e um par de par n t e s e s
( ( ) ), que delimita m zero ou mais par m e t r o s . Todas as
declar a e s dentr o de uma fun o est o dentro de um par de chav e s
( { } ).
Sintax e :
function no m eFu n o ( ) {
declarao 1 ;
...
declarao n ;
}
A declar a o return utilizad a, dentro do corpo de uma funo, par a
retorn a r um valor, ou para canc el ar imedia t a m e n t e a exec u o da
funo.
Exe mplo:
function aoCubo(valor) {
return valor * valor * valor;
}
Algum a s fun e s pr- definida s de Javascript so:

eval (string ), ond e string repr e s e n t a

resolvid a, retorn a n d o um valor nu m rico.

uma

expr e s s o

ser

28

Javascript

_______________________________________________________________________
_
Exe mplo:
x = 4;
eval (3 + x + 8);
Result a d o = 15

parseInt(string, bas e ), onde o primeiro par m e t r o repr e s e n t a uma

string
a ser conver tid a par a a bas e esp e cifica d a no segu n d o
par m e t r o .
Exemplo:
ParseInt(45, 10);
Result a d o = nm e r o 45 na bas e decim al

3.2

isNaN rece b e um argu m e n t o e det er mi n a se ele ou no um

n m e r o . Caso ele seja um n m e r o , retorn a o valor false . Se no for,
retorn a true .

Objetos

3. 2 . 1 H IERARQUIA
O nvel mais alto de objeto s em Javascript consist e naqu el e s
objetos que pert e n c e m a navigat or (nav e g a d o r ). Diret a m e n t e abaixo
des t e nvel, est o os objetos windo w (jan el a). Cada janela te m uma
rvor e de nveis que se ramifica a partir dela. Estas rvor e s consist e m
em location (localiza o), history (histrico) e docu m e n t (docu m e n t o ).
A cad a nvel h outros objeto s e ab aixo da rvor e de docu m e n t o s h
Navegador
outra ra mifica o. Neste nvel,
h trs objeto s arra y form s
(formul rios), anchor (ncor a s ) e links . A figura 1 mos tr a a hierar q ui a
de objeto s de Javascript.
No brows er , os objeto s segu e m a mes m a estru t u r a hierr q uic a
da pgin a HTML: de acordo com Janela
ess a hierar q ui a, os desc e n d e n t e s dos
objetos so proprie d a d e s des s e s objetos .
Quan d o uma pgin a carr e g a d a no brows er , ele cria um
n m e r o de objeto s de acordo com o cont e d o da pgin a. Os seguint e s
Localizao
Documento
Histrico
objetos so se m p r e criados , indep e n d e n t e m e n t e do cont e d o da
pgin a: windo w , location , history e docu m e n t .

Link

ncora

Formulrio

(text, textarea, passwd, checkbox,

radio, select, button, reset, submit)

29

Javascript

_______________________________________________________________________
_

Figura 1 Hierarquia de objet o s

3. 2 . 2 A

NATUREZA

O RIENTADA

O BJETOS

DE

HTML

Javascript consid e r a HTML uma lingu a g e m orient a d a a objeto s,

na qual os divers o s tags HTML corre s p o n d e m a difere n t e s tipos de
objetos Javascript.
Exe mplo:
<html>
<head><title>Minha pagina</title></head>
<body>
<form name=formulario1>
<input type=button name=botao1>
</form>
</body>
</html>
A partir do cdigo acim a, obte m- se os seg uint e s objetos Javascript:
document.title : ttulo da pgin a
document.formulario1 : formulrio da pgin a
document.formulario1.botao1 : bot o do formul rio
Este ape n a s um exe m pl o dos objetos que Javascript cria
auto m a t ic a m e n t e de HTML. Obs erv e que qua s e todo ele m e n t o HTML
pod e ser usad o como um objeto. Alm disso, possvel ler e atribuir
valore s a est e s objetos dina mic a m e n t e .
30

Javascript

_______________________________________________________________________
_
Tenh a em me n t e que me did a em que se estru t u r a uma pgin a,
ta m b m est se definindo objetos e seus valore s para Javascript. As
prxim a s se e s apr e s e n t a m det alh a d a m e n t e o conjunt o de objeto s
da lingu a g e m Javascript.
3. 2 . 3 O BJETO

NAVIGATOR

Este objeto d inform a e s sobr e o nav e g a d o r . Ele apre s e n t a as

seg uint e s
proprie d a d e s :
appNa m e , appVersion , appCod e N a m e ,
userAg e n t .

Proprie d a d e appNa m e : retorn a o nom e do brows er do usu rio.

Exe mplo: navigator.appName = Netscape

Proprie d a d e appV er sion : retorn a a vers o do brows er e a vers o do

siste m a oper a cion al em que ele est roda n d o. [ forma t o : n m e r o
da vers o (plat afor m a ; pas) ]
Exe mplo: navigator.appVersion = 2.0 (Win95; I)

Proprie d a d e
appCod e N a m e : retorn a o nom e do cdigo de
des e n v olvi m e n t o interno do des e n v olv e d o r de um brows er
esp e cfico.
Exe mplo: navigator.appCodeName = Mozilla

Proprie d a d e userAg e n t : usa d a em cab e al h o s HTTP par a fins de

identifica o, a combin a o das proprie d a d e s appCod e N a m e e
appV er sion . Servidor e s Web usa m est a inform a o para identificar
os recurs o s que o nav e g a d o r disp e.
Exe mplo: navigator.userAgent=Mozilla/2.0 (Win95; I)

3. 2 . 4 O BJETO

LOCATION

Este objeto utilizado par a identificar o docu m e n t o corre n t e . Ele

consist e
em
uma
URL
comple t a
no
form a t o
protocolo//s er vid or:porta/ca m i n h o seguido s de ?search ou # h a s h .
Suas proprie d a d e s so: protocol , host n a m e , port , pathn a m e ,
search , hash . Cada uma de suas proprie d a d e s repr e s e n t a uma part e
da URL tot al.

31

Javascript

_______________________________________________________________________
_
Proprie d a d e protocol : retorn a o protocolo de tran s p o r t e do
docu m e n t o .
Exe mplo: location.protocol = http:

Proprie d a d e
hos p e d eir o.

Proprie d a d e port : esp e cifica a port a par a o end e r e o. Esta

inform a o utilizad a ape n a s se uma port a no- padr o estiver
sen d o us ad a .

Proprie d a d e pathn a m e : define o camin h o e o nom e do arquivo.

Proprie d a d e search : retorn a quais q u e r com a n d o s de cons ult a que

poss a m est a r emb u tid o s na URL corre n t e . Valores de search so
sep a r a d o s do resto da URL por um sinal de interro g a o (?).

host n a m e :

identifica

nom e

do

comp u t a d o r

Exe mplo: location.search = nome=Joao

Proprie d a d e has h : retorn a quais q u e r ncor a s que poss a m ter sido

pas s a d a s na URL. Valores de hash so sep a r a d o s do resto da URL
por um sinal de cerq uilha ( #).
Exe mplo: location.hash = capitulo1

3. 2 . 5 O BJETO

CHECKBOX

Utilizado na constru o de caixas de verifica o .

proprie d a d e s so: na m e , value, chec k e d , defaultCh e c k e d .

Proprie d a d e na m e : esp e cifica o nom e da caixa.

Proprie d a d e value : esp e cifica o valor da caixa.

Suas

Exe mplo:
nomeForm.nomeCheckbox.value = 1

Proprie d a d e check e d : valor boole a n o que esp e cifica o est a d o de

sele o da caixa (selecion a d a ou no- selecion a d a ).
Exe mplo:
if ( nomeForm.nomeCheckbox.checked == true ) {
funcao();
}
32

Javascript

_______________________________________________________________________
_

Proprie d a d e defa ultCh e c k e d : valor

est a d o default de sele o da caixa.

3. 2 . 6 O BJETO

boole a n o

que

esp e cifica

RADIO

Corres p o n d e a um array de bot e s , ond e todos os bot e s

comp a r tilh a m a me s m a proprie d a d e na m e . Suas proprie d a d e s so:
na m e , check e d , defa ultCh e c k e d , lengt h.

Proprie d a d e na m e : esp e cifica o nom e do objeto.

Proprie d a d e check e d e defaultCh e c k e d : funcion a m e n t o idntico ao

definido em chec k b o x .

Proprie d a d e lengt h : esp e cifica o compri m e n t o do array .

3. 2 . 7 O BJETO

HIDDEN

Utilizado par a enviar inform a e s qua n d o o formul rio

sub m e ti d o (est e objeto no apar e c e no formul rio). Suas proprie d a d e s
so: na m e , value .

Proprie d a d e na m e : esp e cifica o nom e do objeto.

Proprie d a d e
pas s a d a .

3. 2 . 8 O BJETO

value :

esp e cifica

inform a o

que

est

send o

TEXT

Utilizado para entr a d a / s a d a de dado s. Suas proprie d a d e s so:

na m e , value, defaultValu e.

Proprie d a d e na m e : esp e cifica o nom e do objeto.

Proprie d a d e value : esp e cifica o valor do objeto.

Proprie d a d e defaultValu e : esp e cifica o valor default do objeto.

3. 2 . 9 O BJETO

RESET

33

Javascript

_______________________________________________________________________
_
Utilizado par a limpar dado s de um formul rio. Suas proprie d a d e s
so: na m e , value.

Proprie d a d e na m e : esp e cifica o nom e do bot o.

Proprie d a d e value : esp e cifica o ttulo coloca d o na face do bot o.

Exe mplo: document.form.botao.value=novo titulo

3. 2 . 1 0

O BJETO

SUBMIT

Utilizado par a interfac e a r Javascript e outros scripts /progr a m a s .

Suas proprie d a d e s so: na m e , value.

Proprie d a d e na m e : esp e cifica o nom e do bot o.

Proprie d a d e value : esp e cifica o ttulo coloca d o na face do bot o.

3. 2 . 1 1

O BJETO

Utilizado na
na m e , value .

BUTTON

constru o

de

interfac e s . Suas

proprie d a d e s

so:

Proprie d a d e na m e : esp e cifica o nom e do bot o.

Proprie d a d e value : esp e cifica o ttulo coloca d o na face do bot o.

3. 2 . 1 2

O BJETO

TEXTAREA

Utilizado para entr a d a / s a d a de dado s. Suas proprie d a d e s so:

na m e , value, defaultValu e.

Proprie d a d e na m e : esp e cifica o nom e do objeto.

Proprie d a d e value : esp e cifica o valor do objeto.

Proprie d a d e defaultValu e : esp e cifica o valor default do objeto.

3. 2 . 1 3

O BJETO

SELECT

Utilizado para construir caixas de sele o . Suas proprie d a d e s

so: na m e , options, lengt h.
34

Javascript

_______________________________________________________________________
_

Proprie d a d e na m e : esp e cifica o nom e do objeto.

Proprie d a d e options : array que cont m

op o de uma caixa de sele o.

Proprie d a d e lengt h : esp e cifica o compri m e n t o do array de op e s .

uma entr a d a

para cad a

O exe m plo a seg uir identifica que op e s fora m selecion a d a s na

caixa de sele o.
Exe mplo:
function listSelected(obj) {
for (i=0; i < obj.length; i++) {
document.write( + obj.options[i].name + );
if (!obj.options[i].selected) {
document.write(no est selecionada<BR>);
}
else {
document.write(est selecionada<BR>);
}

3.3

Objetos do CORE Javascript

Os objetos do CORE Javascript so os objeto s instrns e c o s da

lingua g e m , isto exist e m tant o no client e (nav e g a d o r ), qua n t o no
servidor Web .
Os objeto s do Client- Side Javascript e do Serv er- Side Javascript
som e n t e funcion a m , res p e c tiv a m e n t e , em progr a m a s escritos par a o
nav e g a d o r e para o servidor Web .
3. 3 . 1 O BJETO A RRAY
possvel criar um vetor atrav s do objeto Array, pr- definido
no Javascript.
nome_do_array = new Array(10)
Para inserir e cons ult ar ele m e n t o s de um arra y, dev e- se utilizar
a seg uint e sintax e : nome_do_array[x]
A variv el x repr e s e n t a o ndice de um ele m e n t o . O primeiro
ele m e n t o o de nm e r o 0.
35

Javascript

_______________________________________________________________________
_
3. 3 . 2 O BJETO D ATE
O objeto Date lhe ajud a a ma nip ul ar dat a s . Para criar um objeto
do tipo Date, dev e- se utilizar a seg uint e sintax e :
nome_do_objeto = new Date(parmetros)
Se no for indica do nen h u m par m e t r o , ser criado um objeto
com a dat a e a hora atu al do siste m a . possv el pas s a r uma string
repr e s e n t a n d o uma dat a e hora como par m e t r o :
x = new Date(October 01, 2001 08:00:00)
Caso seja m omitidos hora, minut o e seg u n d o , o valor padr o
ser 0. Outra forma de indicar dat a e hora atrav s de uma srie de
par m e t r o s num ricos , repr e s e n t a n d o o ano, m s, dia, hora, minuto s
e seg u n d o s .
A funo Date( ) retor n a a dat a atu al.
3. 3 . 3 O BJETO S TRING
Em Javascript, tod a string um objeto, e, port a n t o , te m m t o d o s
e proprie d a d e s associa d a s .

lengt h (proprie d a d e ) : retorn a o compri m e n t o de um string .

Sintax e: string.length

inde xOf( ) (m t o d o): retorn a a posio da primeir a ocorr n cia do

caract e r procur a d o dentr o de um string esp e cfico. As posi e s
dos carac t e r e s que comp e m um string varia m entr e "0" e
"compri m e n t o do string - 1" (lengt h - 1). Se o caract e r procur a d o
no for enco n tr a d o em nen h u m a posi o, o mt o d o retorn a "-1".
Sintax e: string.indexOf(caracter_procurado,
posio_inicial_de_busca)

charAt( ) (mt o d o ): retorn a o carac t e r enco n tr a d o na posio

indica d a .
Sintax e: string.charAt(posio)

toUpp erCas e ( ) (m t o d o): trad uz todo carac t e r dentr o de uma

string para letra mais c ul a.
Sintax e: string.toUpperCase()
36

Javascript

_______________________________________________________________________
_

toLow erCas e ( ) (m t o d o): trad uz todo carac t e r dentr o de uma

string para letra mins c ul a.
Sintax e: string.toLowerCase()

subs tring( ) (m t o d o): retorn a uma seq u n ci a de carac t e r e s de

uma string maior.
Sintax e: string.substring(ndiceA, ndiceB)

ond e ndiceA e ndiceB so amb o s valores num ricos entr e 0 e

a proprie d a d e de string length.

3. 3 . 4 O BJETO W INDOW
O objeto windo w repr e s e n t a a janela do nav e g a d o r ou um
fram e . criado um objeto windo w se m p r e que o nav e g a d o r enco n tr a
uma tag <BODY> ou <FRAMESET>. Tamb m so criados objetos par a
cad a fram e definido.
Proprie d a d e s mais utilizad a s :

defaultStatus: a me n s a g e m que ser exibid a qua n d o no tiver

nenh u m a outra na statu s bar do nav e g a d o r . Cuidad o para no
confun dir com a proprie d a d e statu s , que reflet e uma s me n s a g e n s
transitria s , ad e q u a d a s par a um certo mo m e n t o ou ao do
usu rio;
Height: est a proprie d a d e cont m a altur a, em pixels, da janela do
nav e g a d o r ;
Width: se m el h a n t e proprie d a d e ant erior, por m trab alh a com a
largur a;
name: repr e s e n t a o nom e da janela;
status: esp e cifica a me n s a g e m a ser exibida na statu s bar do
nav e g a d o r . muito til para comu nic ar ao usu rio peq u e n a s
me n s a g e n s .

37

Javascript

_______________________________________________________________________
_
Mtodos mais utilizado s:

alert( ): exibe uma me n s a g e m par a o usu rio. A string com a

me n s a g e m dev e ser pas s a d a para o m t o d o como par m e t r o ;
back( ): equivale n t e a ap ert a r o bot o back do nav e g a d o r . Ou
seja, volta atr s na ltima nav e g a o feita pelo usu rio;
forward( ): te m o me s m o efeito do bot o forward do nav e g a d o r .
Ou seja, se o usu rio tiver ap ert a d o o bot o back par a voltar
ltima pgin a visitad a , o forward ava n a nova m e n t e para a pgin a
mais rece n t e ;
open( ): abr e uma nova janela. O m t o d o rece b e como
par m e t r o s uma URL (o end e r e o da pgin a que vai ficar na nova
janela), o nom e da janela e uma string com sua s carct e rs tic a s ;
close( ): fecha a janela esp e cifica d a . O Javascript som e n t e pod e
fech ar auto m a t ic a m e n t e janelas aber t a s por ele. Caso contr rio,
apar e c e uma caixa de confirm a o para o usu rio;
confirm( ): exibe uma caixa de me n s a g e m par a o usu rio com
duas op e s : OK e Cancel. Caso o usu rio pres sion e OK, o m t o d o
retorn a true. Caso contr rio, false. Ele rece b e como par m e t r o
uma string com a me n s a g e m a ser exibida para o usu rio;
prompt( ): exibe uma caixa de me n s a g e m e ca mp o para o usu rio
entr a r com uma string . O m t o d o retorn a a string digita d a pelo
usu rio. So aceitos dois par m e t r o s . O primeiro uma string com
a me n s a g e m a ser exibida e o segu n d o o valor padr o da string a
ser digita d a pelo usu rio.

Exe mplo:
<HTML>
<HEAD>
<TITLE>Exemplo</TITLE>
</HEAD>
<BODY>
<SCRIPT>
x = prompt("Qual a sua idade?", "25");
janela = window.open('','',
'innerHeight=100,innerWidth=150,resizable=yes');
janela.document.write("<BR> <B> <CENTER>");
janela.document.write("Voc tem " + x + " anos!");
janela.document.write("</CENTER> </B>");</SCRIPT>
</BODY>
</HTML>

38