INSTITUTO FEDERAL DE CINCIAS E TECNOLOGIA DO TRINGULO MINEIRO CAMPUS PATROCNIO

- APOSTILA -

PATROCNIO 2013

INSTITUTO FEDERAL DE CINCIAS E TECNOLOGIA DO TRINGULO MINEIRO CAMPUS PATROCNIO

APOSTILA DE JAVASCRIPT

O material apresentado nesta apostila foi retirado do site http://www.w3schools.com/.

PATROCNIO 2013 i

ii

Contedo
1 INTRODUO 2 NOES BSICAS
2.1 DECLARAO EM JAVASCRIPT . . . . . . . . . . . . . . . . . . . . . . 2.2 PONTO E VIRGULA(;) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.3 ESPAO EM BRANCO . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.4 QUEBRA DE LINHA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.5 COMENTRIOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.6 VARIVEIS EM JAVASCRIPT . . . . . . . . . . . . . . . . . . . . . . . . 2.6.1 2.6.2 Declarando Variveis . . . . . . . . . . . . . . . . . . . . . . . . . . Uma instruo, Muitas Variveis . . . . . . . . . . . . . . . . . . .

1 3
3 3 3 4 4 4 5 6 6 7 7 7 8 9 9

2.7 ARITMTICA EM JAVASCRIPT . . . . . . . . . . . . . . . . . . . . . . 2.8 TIPOS DE DADOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.8.1 2.8.2 2.8.3 2.8.4 2.8.5 2.8.6 2.8.7 2.8.8 Tipos Dinmicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Nmeros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Boolenas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Indenido e Null . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Declarando os Tipos de Variveis . . . . . . . . . . . . . . . . . . . 11 iii

3 OBJETOS
3.1.1 3.1.2 3.1.3

13
Criando Objetos em JavaScript . . . . . . . . . . . . . . . . . . . . 14 Acessando os Atributos dos Objetos . . . . . . . . . . . . . . . . . . 14 Acessando os Mtodos dos Objetos . . . . . . . . . . . . . . . . . . 15

3.1 OBJETOS EM JAVASCRIPT . . . . . . . . . . . . . . . . . . . . . . . . . 13

4 FUNES
4.1.1 4.1.2

17

4.1 FUNES NO JAVASCRIPT . . . . . . . . . . . . . . . . . . . . . . . . . 17 Chamando Funes com Argumentos . . . . . . . . . . . . . . . . . 17 Funes com Valores de Retorno . . . . . . . . . . . . . . . . . . . . 19

5 VARIVEIS E OPERADORES

21

5.1 VARIVEIS LOCAIS NO JAVASCRIPT . . . . . . . . . . . . . . . . . . . 21 5.2 VARIVEIS GLOBAIS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 5.3 O TEMPO DE VIDA DE UMA VARIVEL . . . . . . . . . . . . . . . . . 21 5.4 ATRIBUIO DE VALORES A VARIVEIS NO DECLARADAS . . . 22 5.5.1 5.5.2 5.5.3 5.5.4 5.5.5 5.5.6 5.5.7 5.5.8 5.5.9 Operadores de Atribuio . . . . . . . . . . . . . . . . . . . . . . . 22 Operador + Utilizado em string . . . . . . . . . . . . . . . . . . . . 23 Adio(soma) Strings e Numeros . . . . . . . . . . . . . . . . . . . 24 Operadores de Comparao . . . . . . . . . . . . . . . . . . . . . . 24 Operadores Lgicos . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Operador Condicional . . . . . . . . . . . . . . . . . . . . . . . . . 25 IF ... ELSE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 IF ... ELSE IF ... ELSE . . . . . . . . . . . . . . . . . . . . . . . . 28 A INSTRUO SWITCH . . . . . . . . . . . . . . . . . . . . . . . 28 5.5 OPERADORES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

5.5.10 A PALAVRA-CHAVE DEFAULT . . . . . . . . . . . . . . . . . . . 30

6 LAOS DE REPETIO

31

6.0.11 LOOP WHILE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 iv

6.0.12 O LOOP DO/WHILE . . . . . . . . . . . . . . . . . . . . . . . . . 33

7 BREAK / CONTINUE

35

7.1 BREAKS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 7.2 CONTINUE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

8 ERROS

37

8.1 ERRORS- THROW e TRY TO CATCH . . . . . . . . . . . . . . . . . . . 37 8.2 OS ERROS PODEM OCORRER . . . . . . . . . . . . . . . . . . . . . . . 37 8.3 O JAVASCRIPT TRY AND CATCH . . . . . . . . . . . . . . . . . . . . . 37 8.4 UTILIZANDO THROW . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

9 VALIDAO DE FORMS

41

vi

Captulo 1 INTRODUO
Os exemplos vistos at agora s executavam comando diretamente na sada da pgina. Mas com frequncia desejamos executar comandos ou aes quando algum evento ocorre, como o clicar de um boto. Se colocarmos o JavaScript dentro de uma funo, ns podemos chama-la somente quando um evento ocorrer. Podemos inserir inmeros cdigos javascript dentro de um documento HTML. Os scripts HTML podem ser inseridos em trs locais, so eles: <head>, <body> e um arquivo externo com a extenso .js . comum se colocar os scripts java na <head> ou no nal do documento html. Desta forma todos os cdigos JavaScrip esto em um s lugar e no atrapalham nos contedos do documento.

Captulo 2 NOES BSICAS

2.1 DECLARAO EM JAVASCRIPT

As instrues em javascript so "comandos"para o navegador(browser). O propsito das instrues dizer ao navegador o que fazer. No exemplo de a seguir a instruo diz ao navegador para escrever "Ola mundo"dentro

de um elemento HTML com o id="demo":

"demo" ) . innerHTML="Hello Dolly" ;

document . g e t E l e m e n t B y I d (

2.2

PONTO E VIRGULA(;)

O ponto e vrgula destinado para separar as instrues em JavaScript. Normalmente se coloca um ponto e vrgula ao nal de cada instruo.

2.3

ESPAO EM BRANCO

O javascript ignora espaos extra. Voc pode adicionar espaos extras pra facilitar o entendimento de seu cdigo, porem estes espaos sero ignorados. 3

1 2

Var var

p e r s o n= person

"Hege" ; "Hege" ;

2.4

QUEBRA DE LINHA

Voc pode quebrar uma linha de cdigo dentro de uma string de texto com barra invertida(\).
1 2
document . w r i t e (

World!" ) ;

"Hello \

Mas no se pode quebrar uma linha de cdigo desta forma.

1 2
document . w r i t e ( \

"Hello World!" ) ;

2.5

COMENTRIOS

Para comentrios de linha voc deve utilizar "//", este comentrio tambm pode ser utilizado aps uma linha de comando. Os Comentrios de trecho utilizam "/*... */". Os comentrios podem ser utilizados para se evitar que uma linha de comando seja executada.

2.6

VARIVEIS EM JAVASCRIPT

As variveis so "conteiners"para armazenar informao. Veja o exemplo a seguir:

1 2 3 4 5 6 7 8 9 10
document . w r i t e ( x + document . w r i t e ( y + < <

<

html> body> script>

var var var x =5; y =6; z=x+y ;

"<br >" ) ; "<br >" ) ;

11 12 13 14 15
</

document . w r i t e ( z </

script>

"<br >" ) ;

</

body> html>

Assim como na matemtica utilizamos as letras x, y e z para armazenar as variveis para clculo, estas variveis esto armazenando informao. As variveis podem armazenar nmeros(x=5), assim como expresses(z=x+y). As variveis podem ter nomes curtos como "x"ou "y"ou nomes mais explicativos como "nome", "idade", "valorTotal".
Os nomes das variveis devem comear por letras. Os nomes das variveis so case sensitive (y e Y so variveis diferentes).

2.6.1 Declarando Variveis

Criando uma varivel usualmente referida como "declarando"uma varivel. Voc declara variveis no javascript utilizando a palavra var:
1
var nomeDaVariavel ;

Aps a declarao, a varivel est vazia(no possui valor). Para atribuir um valor utilize o sinal igual(=).
1
nomeDeCarro=

"Volvo" ;

Voc tambm pode declarar e atribuir um valor para a varivel em uma s linha de cdigo.
1
var nomeDeCarro=

"Volvo" ;

No exemplo a seguir estamos criando uma varvel chamada de nomeDeCarro, atribumos o valor "Volvo"e colocamos este valor dentro de uma componente HTML com a id="demo": 5

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<

<

html> body>
< >C l i c k

the

button

to

create

variable ,

and

display

the

r e s u l t .</ >

<

button onclick=" myFunction ()">Try

i t </

button>

<

p id="demo"></p> script>
function { var c a r n a m e= myFunction ( )

<

"Volvo" ;

document . g e t E l e m e n t B y I d ( } </

"demo" ) . innerHTML=c a r n a m e ;

script>

</ </

body> html>

2.6.2 Uma instruo, Muitas Variveis

Voc pode declarar muitas variveis utilizando somente uma instruo. Para isto basta utilizar a instruo var e separar as variveis por virgula.
1
var s o b r e n o m e=

"Garcia" ,

i d a d e =40 ,

t r a b a l h o=

" motorista " ;

Sua declarao tambm pode utilizar mltiplas linhas:

1 2 3
var S o b r e n o m e=

"Garcia" ,

i d a d e =40 , t a b a l h o=

" motorista " ;

2.7

ARITMTICA EM JAVASCRIPT

Assim como na lgebra voc pode realizar clculos utilizando as variveis do javascript, utilizando operadores como = e + . Veja o exemplo a seguir:
1 2 3 4 5 6 7 8 9
< <

<

html> body>
< >S e n d o <

p y =5 , c a l c u l e x=y +2 , e m o s t r e o r e s u l t a d o .</ p > button onclick=" myFunction ()">R e s p o s t a</ button> p id="demo"></p> script>

<

10 11 12 13 14 15 16 17 18 19 20
</

function { var var var y =5;

myFunction ( )

x=y + 2 ; demoP=d o c u m e n t . g e t E l e m e n t B y I d (

demoP . innerHTML= } </

"x="

"demo" )

+ x;

script>

</

body> html>

2.8

TIPOS DE DADOS

O JavaScript possui os seguintes tipos de dados, String, Boolean, Array, Object, Null, Indenido. A seguir vamos explicar cada um deles.

2.8.1 Tipos Dinmicos

O JavaScript possui tipos dinmicos, isto quer dizer que uma mesma varivel pode ser utilizada de diferentes formas. O exemplo a seguir mostra isto.
1 2 3
var var var x; x = x = 5; // // // Agora Agora Agora x x x indefinido um Nmero uma String

" Eurivaldo " ;

2.8.2 Strings
Uma String uma varivel que armazena uma srie de caracteres como "Matheus Garcia". Uma string qualquer texto entre aspas. Voc pode utilizar aspas simples ou aspas duplas.
1 2
var var c a r r o n o m e=

"Volvo XC60" ;
XC60 ' ;

// a s p a s // a s p a s

duplas simples

carronome =' Volvo

Voc pode utilizar as aspas dentro da string, de forma que estas sapas no atrapalhem as aspas que denem a string. 7

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<

html> <head > </ head >

<

body>
< var var var var var

script>

n o m e c a r r o 1=

"Volvo XC60" ;
XC60 ' ;

nomecarro2 =' Volvo r e s p o s t a 1=

"It 's alright" ; r e s p o s t a 2="O nome dele 'Johnny '" ; r e s p o s t a 3 = 'O nome d e l e "Johnny" ' ;
+ +

document . w r i t e ( n o m e c a r r o 1 document . w r i t e ( n o m e c a r r o 2 document . w r i t e ( r e s p o s t a 1 document . w r i t e ( r e s p o s t a 2 document . w r i t e ( r e s p o a t a 3 </

+ + +

script>

"<br >" ) "<br >" ) "<br >" ) "<br >" ) "<br >" )

</ </

body> html>

2.8.3 Nmeros
Os nmeros podem ser escritos no formato inteiro ou decimal.
1 2
var var x1 = 3 4 . 0 0 ; x2 =34; // e s c r i t o s // e s c r i t o s com sem duas casas casas decimais

decimais

Nmeros muito grandes podem ser escritos com uma notao exponencial especca. O exeplo a seguir ilustra uma situo onde pode-se ver como so representados quatro nmeros com notaes diferentes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
document . w r i t e ( x1 document . w r i t e ( x2 var var var var x1 = 3 4 . 0 0 ; x2 =34; y =123 e 5 ; z =123 e < <

<

html> body> script>

5;
+ +

document . w r i t e ( y + document . w r i t e ( z +

"<br >" ) "<br >" ) "<br >" ) "<br >" )

16 17 18 19

</

script>

</ </

body> html>

2.8.4 Boolenas
Variveis do tipo booleanas podem receber apenas dois tipos de valores: verdadeiro ou falso.
1 2
var var x=t r u e ; y= f a l s e ;

As variveis do tipo booleanas so normalmente utilizadas em teste condicionais.

2.8.5 Arrays
O prximo cdigo mostra um exemplo de array.
1 2 3 4
var c a r s=new Array ( ) ;

"Saab" ; c a r s [ 1 ] = "Volvo" ; c a r s [ 2 ] = "BMW" ;

cars [0]=

ou (forma compacta)
1
var c a r s=new Array (

"Saab" , "Volvo" , "BMW" ) ;

ou
1 2 3 4 5 6 7 8 9 10 11 12 13 14
} for { document . w r i t e ( c a r s [ ( i = 0 ; i< c a r s . l e n g t h ; < <

html> <body > script>

var var i ; cars = new = = = Array ( ) ; cars [ 0 ] cars [ 1 ] cars [ 2 ]

"Saab" ; "Volvo" ; "BMW" ;

i ++)
+

i]

"<br >" ) ;

15 16 17 18
</

</

script>

</

body> html>

A indexao dos arrays so baseadas em zero, sendo assim, o primeiro elemento possui ndice [0] e o segundo possui ndice [1] e assim por diante.

2.8.6 Objetos
Um objeto delimitado por chaves. Dentro das chaves as propriedades do objeto so denidas em pares, este pares so o nome e o valor da propriedade (nome:valor). As propriedades so separadas por virgulas.
1
var p e s s o a ={ p r i m e i r o n o m e :

"John" ,

sobrenome :

"Doe" ,

id :5566};

O objeto (pessoa) no exemplo acima possui trs propriedades: primeironome, sobrenome e id. Espaos e linhas em branco no importam, sua denio de um objeto pode ser declarada da seguinte forma:
1 2 3 4 5 6
}; var { firstname lastname id : : : p e r s o n=

"John" , "Doe" ,
5566

O exemplo a seguir mostra duas maneiras diferentes de se chamar o objeto.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
</ document . w r i t e ( p e r s o n . l a s t n a m e document . w r i t e ( p e r s o n [ </ + < <

html> <body > script>

var { firstname lastname id }; : : : p e r s o n=

"John" , "Doe" ,
5566

script>

"lastname" ]

"<br >" ) ; + "<br >" ) ;

body>

10

17

</

html>

2.8.7 Indenido e Null

Indenida a varivel que no possui nenhum valor. As variveis podem ser esvaziadas atribuindo-se o valor null para elas.
1 2
c a r s= n u l l ; p e r s o n= n u l l ;

2.8.8 Declarando os Tipos de Variveis

Caso necessrio pode-se declarar o tipo da varivel utilizando-se do comando "new". O exemplo a seguir mostra a sua utilizao.
1 2 3 4 5
var var var var var c a r n a m e=new x= y= c a r s= new new new String ; Number ; Boolean ; Array ; Object ;

p e r s o n= new

Todas as variveis criadas no JAVASCRIP j so objetos, sendo assim quando declarar uma nova varivel voc est criando um novo objeto.

11

12

Captulo 3 OBJETOS
3.1 OBJETOS EM JAVASCRIPT

"Tudo"no JavaScript so objetos: strings, nmeros, array... Em javascript, um objeto um dado com propriedades e mtodos. Propriedades(atributos) so valores associados ao objeto. Mtodos so aes que podem ser exercidas pelo objeto. Um exemplo real de objeto. Tomemos como exemplo um carro.

Figura 3.1: Objeto Carro. As propriedades de um carro incluem nome, modelo, peso, cor, etc. Todos os carros possuem estas propriedades, porem os seus valores diferem de carro para carro. Os mtodos que os carros possuem podem ser start(), drive(), brake(), etc. Todos os carros possuem estes mtodos mas eles so executados em momentos diferentes. 13

Como foi dito anteriormente em javascript, os objetos so dados(variveis) com mtodos e propriedades(atributos). Quando declarar uma varivel como:
1
var txt =

"Ola" ;

Voc est criando um objeto string. O objeto string possui uma propriedade nativa chamada length. Para a string a cima possui o valor de length igual a 5. O objeto string possui alguns mtodos nativos.

Figura 3.2: Exemplo de objeto.

3.1.1 Criando Objetos em JavaScript

O exemplo a seguir mostra como criar um objeto em javascript. Neste exemplo um objeto chamado de "person" criado, e so adicionados quatro atributos para este objetos.
1 2 3 4 5 6 7 8 9 10 11 12 13 14
</ < <

html> <body > script>

var p e r s o n=new Object ( ) ; p e r s o n . f i r s t n a m e= p e r s o n . l a s t n a m e= p e r s o n . age =50; p e r s o n . e y e c o l o r=

"John" ; "Doe" ; "blue" ;

+

document . w r i t e ( p e r s o n . f i r s t n a m e </

script>

" is "

person . age

" years old." ) ;

</

body> html>

3.1.2 Acessando os Atributos dos Objetos

A sintaxe para acessar os atributos dos objetos : 14

nomeDoObjeto . n o m e D o A t r i b u t o

O exemplio a seguir utiliza o atributo length do objeto string para encontrar o tamanho(nmero de caracteres) da string.
1 2
var var m e s s a g e=

"Hello World!" ;

x=m e s s a g e . l e n g t h ;

O valor de x aps a execuo do cdigo ser 12.

3.1.3 Acessando os Mtodos dos Objetos

A sintaxe para acessar os mtodos dos objetos : nomeDoObjeto.nomeDoMetodo O exemplo a seguir utiliza o mtodo toUpperCase() do string para converter o texto para letras maisculas.
1 2
var var m e s s a g e=

"Hello world!" ;

x=m e s s a g e . t o U p p e r C a s e ( ) ;

O valor de x aps a execuo do cdigo ser "HELLO WORLD!". OBS: comum encontrar em linguagem orientadas a objeto a utilizao da notao camel-case para dar nome as funes.

15

16

Captulo 4 FUNES
4.1 FUNES NO JAVASCRIPT

Uma funo um bloco de cdigo que ser executado quando algum chama-la. A funo o bloco de cdigo escrito dentro de chaves , precedida pela palavra function.
1 2 3 4
} function { cdigo que ser executado . nomedafuno ( )

A funo pode ser chamada diretamente quando um evento ocorrer(como o clicar do mouse) , e pode ser chamada de qualquer lugar dentro do cdigo javascript. Nota: O javascript case sensitive, sendo assim quando chamar a funo necessrio que se utilize o nome da funo da mesma maneira na qual ela foi criada.

4.1.1 Chamando Funes com Argumentos

Quando uma funo chamada, possvel passar alguns valores a ela, estes valores so argumentos ou parmetros da funo. Estes argumentos podem ser utilizados dentro da funo. Voc pode mandar quantos argumentos desejar, tendo somente que separa-los por virgula(,).
1
myFunction ( argument1 , argument2 )

17

Declare o argumento, as variveis quando declarar a funo.

1 2 3 4
function { some } code myFunction ( var1 , v a r 2 )

As variveis e os argumentos devem estar na mesma ordem. A primeira varivel corresponde ao primeiro argumento declarado na funo. O exemplo a seguir mostra isto.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
</ } </ < <

html> <body >

< >C l i c k

the

button

to

call

function

with

a r g u m e n t s</ >

<

button onclick=" myFunction ('Harry Potter ','Wizard ')">Try script>

function { alert ( m y F u n c t i o n ( name , j o b )

i t </

button>

"Welcome "

+ name +

", the "

job ) ;

script>

</

body> html>

A funo do exemplo acima mostrar um alerta com a seguinte frase "Welcome Harry Potter, the wizard "quando o boto for clicado. A funo exvel, voc pode chamar a funo utilizando diferentes argumentos e mensagens de boas vindas diferentes sero apresentadas.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
</ } </ < <

<

html> body>
< >C l i c k

one

of

the

buttons

to

call

function

with

a r g u m e n t s</ >

button onclick=" myFunction ('Harry Potter ','Wizard ')"> C l i c k f o r H a r r y P o t t e r</ button> <button onclick=" myFunction ('Bob ','Builder ')"> C l i c k f o r Bob</ button>
<

script>
function m y F u n c t i o n ( name , j o b ) alert (

"Welcome "

+ name +

", the "

job ) ;

script>

body>

18

17

</

html>

No exemplo acima um alerta diferente ser apresentado dependendo do boto clicado pelo usurio.

4.1.2 Funes com Valores de Retorno

Algumas vezes necessrio que a funo retorne algum valor do local onde ela foi chamada. Isto possvel atravs da utilizao do comando return. Quando o comando return for utilizado, a funo ir parar sua execuo e ir retornar o valor desejado. Note a sintaxe no exemplo abaixo.
1 2 3 4 5
function { var x =5; x; myFunction ( )

return }

A funo ir retornar o valor 5. Nota: No todo o javascript que ir parar a sua execuo, somente a funo que ter sua execuo parada. O javascript ir continuar a sua execuo do ponto onde a chamada da funo foi realizada. A chamada da funo ser substituda pelo valor retornado pela funo.
1
var myVar=m y F u n c t i o n ( ) ;

A varivel myVar ter o valor 5 atribudo a ela, que o valor retornado pela funo myFunction(). Voc pode retornar um valor baseado em argumentos passados para a funo.
1 2 3 4 5 6 7 8 9
< <

html> <body >

< >T h i s

example the

calls

function

returns

r e s u l t :</ >

which

performs

calculation ,

and

<

p id="demo"></p> script>
function myFunction ( a , b )

19

10 11 12 13 14 15 16 17 18
</

{ return } a

b ;

document . g e t E l e m e n t B y I d ( </

script>

"demo" ) . innerHTML=m y F u n c t i o n ( 4 , 3 ) ;

</

body> html>

A utilizao do comando return pode ser utilizado para sair da funo. O valor a ser retornado opcional.
1 2 3 4 5 6 7 8
} function { if { return ; } x=a+b ( a>b ) myFunction ( a , b )

A funo acima ir sair da funo caso a>b e no ir calcular a soma de a + b.

20

Captulo 5 VARIVEIS E OPERADORES

5.1 VARIVEIS LOCAIS NO JAVASCRIPT

Uma varivel declarada (utilizando var) com uma funo javascript se tornar LOCAL e s pode ser acessada de dentro desta funo (a varivel tem um escopo local). Voc tem variveis locais com o mesmo nome em funes diferentes, porque variveis locais somente so reconhecidas pela funo na qual elas foram declaradas. As variveis locais so deletadas assim que a funo completada.

5.2

VARIVEIS GLOBAIS

Variveis declaradas fora de uma funo se tornam GLOBAIS, e todas as funes na pgina podem acessa-las.

5.3

O TEMPO DE VIDA DE UMA VARIVEL

O tempo de vida de uma varivel comea quando ela declarada. Variveis LOCAIS so deletadas quando a funo for encerrada. As variveis GLOBAIS so deletadas quando a pgina for fechada(cliente). 21

5.4

ATRIBUIO DE VALORES A VARIVEIS NO DECLARADAS

Se voc atribuir um valor para uma varivel que ainda no foi declarada, a varivel ser declarada automaticamente como uma varivel GLOBAL. Veja o exemplo.
1
c a r n a m e=

"Volvo" ;

Neste exemplo a varivel carname ser uma varivel global, mesmo que executada dentro de uma funo.

5.5

OPERADORES

Os operadores aritmticos so utilizados para realizar operaes entre variveis e valores. Sendo y= 5, a tabela a seguir explica cada um dos operadores aritmticos.

Operador Descrio Exemplo Valor de X Valor de Y + Adio x=y+2 7 5 Subtrao x=y-2 3 5 * Multiplicao x=y*2 10 5 / Diviso x=y/2 2.5 5 % Resto da diviso x=y%2 1 5 ++ Incremento x=++y 6 6 x=y++ 5 6 -Decremento x=- -y 4 4 x=y- 5 4
5.5.1 Operadores de Atribuio
Sendo x=10 e y=5, a tabela a seguir explica cada um dos operadores.

Tabela I: Operadores

22

Operador = += -= *= /= %=

Tabela II: Operadores de Atribuio

Exemplo Mesmo que X Resultado x=y  x=5 x+=y x=x+y x=15 x-=y x=x-y x=5 x*=y x=x*y x=50 x/=y x=x/y x=2 x%=y x=x%y x=0

5.5.2 Operador + Utilizado em string

O operador + pode tambm ser utilizado para somar variveis string ou textos. Veja o exemplo abaixo.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
</ } < < <

html> <body >

< >C l i c k <

p the button to c r e a t e and add s t r i n g v a r i a b l e s .</ p > button onclick=" myFunction ()">Try i t </ button> p id="demo"></p> script>
function { t x t 1= t x t 2= myFunction ( )

<

"What a very" ; "nice day" ; "demo" ) . innerHTML=t x t 3 ;

t x t 3=t x t 1+t x t 2 ; document . g e t E l e m e n t B y I d (

script>

</

body> html>

O espao em branco pode ser adicionado dentro de cada uma das strings.
1 2 3
t x t 1= t x t 2=

"What a very " ; "nice day" ;

t x t 3=t x t 1+t x t 2 ;

Outra possibilidade de se inserir o espao em branco coloc-lo entre as expresses na varivel txt3.
1
t x t 1=

"What a very" ;

23

2 3

t x t 2=

t x t 3=t x t 1+

"nice day" ; " "+t x t 2 ;

5.5.3 Adio(soma) Strings e Numeros

Somando dois nmeros, resulta na soma deste dois nmeros, mas somando um numero e uma string, resultar em uma string. Veja o exemplo.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
</ } </ var demoP . innerHTML=x + < <

html> <body >

< >C l i c k <

p t h e b u t t o n t o add n u m b e r s button onclick=" myFunction ()">Try p id="demo"></p> script>

function { var var var x =5+5; y= z= myFunction ( )

and i t </

button>

s t r i n g s .</ >

<

"5" + 5 ; "Hello" + 5 ; "<br >" "demo" ) ; "<br >" + z ;

demoP=d o c u m e n t . g e t E l e m e n t B y I d ( + y +

script>

</

body> html>

A regra : Se somar um nmero e uma string o resultado ser uma string.

5.5.4 Operadores de Comparao

Sendo x=5, a tabela a seguir ir explicar os operadores de comparao.

Como Utilizar a Comparao

A comparao entre resultados e elementos pode ser utilizada a tomada de decises dependendo se a comparao for verdadeira ou falsa.
1
if ( a g e<1 8 ) x=

"Too young" ;

24

Operadores Descrio Comparao Resultado == igual a x==8 false X==5 true === exatamente igual a (valor e tipo) x==="5" false x===5 true != Diferente x!=8 true !== Diferente (nem valor nem tipo) x!=="5" true x!==5 false > Maior que x>8 false < Menor que x<8 true >= Maior igual a x>=8 false <= Menor igual a X<=8 true
5.5.5 Operadores Lgicos
Os operadores lgicos so utilizados para estabelecer a lgica entre variveis e valores. Sendo x=6 e y=3, a tabela a seguir mostrar a utilizao destes operadores.

Tabela III: Operadores de Atribuio

Operador && || !

Tabela IV: Operadores de Atribuio

Descrio Exemplo And(e) (x<10 && y >1) verdadeiro Or(ou) (x==5 || y==5) falso Not(no) !(x==y)

5.5.6 Operador Condicional

O javaScript tambm contem um operador condicional que atribui um valor a uma varivel dependendo de uma condio. O exemplo a seguir mostra isto com detalhes. Obs: Neste exemplo vamos utilizar um campo de input, lembrando que um elemento de input deve estar dentro das tags <form></form>.
1 2 3 4 5 6 7 8 9 10
<

html> <body >

< >C l i c k

the

button

to

check

the

a g e .</ >

input id="age" value="18" /> p e n o u g h t o v o t e ?</ p > <button onclick=" myFunction ()">Try
Age :< < >Old <

i t </

button>

p id="demo"></p>

25

11 12 13 14 15 16 17 18 19 20 21 22 23
</ <

script>
function myFunction ( ) var age , v o t e a b l e ;

"age" ) . v a l u e ; "Too young" : "Old enough" ; d o c u m e n t . g e t E l e m e n t B y I d ( "demo" ) . innerHTML=v o t e a b l e ;

a g e=d o c u m e n t . g e t E l e m e n t B y I d ( v o t e a b l e =( a g e<1 8 ) ? } </

script>

</

body> html>

Instrues Condicionais
As instrues condicionais so utilizadas para se executar diferentes aes se baseando em algumas condies. No javaScript possumos as seguintes instrues condicionais:
IF IF ... ELSE IF ... IF ELSE .... ELSE SWITCH

IF
A instruo IF executa um trecho de cdigo caso alguma condio em especco seja verdadeira.
1 2 3 4
if { code } to be executed if condition is true ( condition )

ATENO: o if escrito com letras minsculas, caso for esvrito com letras maisculas(IF) ir gerar um erro. 26

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<

html> <body >

< >C l i c k than

the

button

2 0 : 0 0 .</ >

to

get

"Good day"

greeting

if

the

time

is

less

<

button onclick=" myFunction ()">Try

i t </

button>

<

p id="demo"></p> script>
function { var var if { x= } document . g e t E l e m e n t B y I d ( } x= myFunction ( )

<

"" ;
Date ( ) . g e t H o u r s ( ) ;

t i m e=new ( t i m e<2 0 )

"Good day" ; "demo" ) . innerHTML=x ;

</

script>

</ </

body> html>

5.5.7 IF ... ELSE

Utilizando estas instrues possvel se executar um trecho de cdigo caso uma condio for verdadeira e um outro trecho se a condio for falsa. A sintaxe da ca da seguinte forma.
1 2 3 4 5 6 7 8
if { code } else { code } to be executed if condition is not true to be executed if condition is true ( condition )

Adicione estas linhas de cdigo no exemplo anterior

1 2 3 4
else { x= }

"Good evening" ;

27

5.5.8 IF ... ELSE IF ... ELSE

Estas instrues so utilizadas para se executar um determinado bloco de cdigo dependendo de suas condies. A sintaxe da destes intruo :
1 2 3 4 5 6 7 8 9 10 11 12
if { code } else { code } else { code } to be executed if neither condition1 nor condition2 is true to be executed if condition2 is true if ( condition2 ) to be executed if condition1 is true ( condition1 )

Mude o cdigo dentro da funo "myFunction"com o seguinte trecho de cdigo.

1 2 3 4 5 6 7 8 9 10 11 12
if { x= } else { x= } else { x= } if ( t i m e <20) ( t i m e<1 0 )

"Good morning" ;

"Good day" ;

"Good evening" ;

5.5.9 A INSTRUO SWITCH

A instruo switch executa um bloco de cdigo dentre vrios. Sua sintaxe a seguinte.
1 2 3 4 5 6 7 8 9 10
switch (n) { case 1: code block 1

execute break ; case 2:

execute break ; default : code to

code

block

be

executed

if

is

different

from

case

and

28

11

Como isto funciona: Primeiro temos uma nica expresso n(frequentemente uma varivel) avaliada uma vez. O valor da expresso comparado com os valores de cada caso "case"na estrutura switch. Caso combinem, o bloco de cdigo associado aquele "case" executado. A utilizao de break previne que o cdigo entre na prxima estrutura "case".
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
</ } </ } document . g e t E l e m e n t B y I d ( < <

html> <body >

< >C l i c k

the

button

to

display

what

day

it

is

t o d a y .</ >

<

button onclick=" myFunction ()">Try

i t </

button>

<

p id="demo"></p> script>
function { var var x; d=new (d) Date ( ) . getDay ( ) ; myFunction ( )

switch { case x=

0:

"Today it 's Sunday" ;

1:

break ; case x=

"Today it 's Monday" ;

2:

break ; case x=

"Today it 's Tuesday" ;

3:

break ; case x=

"Today it 's Wednesday " ;

4:

break ; case x=

"Today it 's Thursday" ;

5:

break ; case x=

"Today it 's Friday" ;

6:

break ; case x=

"Today it 's Saturday" ; "demo" ) . innerHTML=x ;

break ;

script>

</

body> html>

29

5.5.10 A PALAVRA-CHAVE DEFAULT

Utilize a palavra-chave default para dar uma instruo do que fazer caso nenhuma condio seja satisfeita. Utilize o seguinte trecho de cdigo no exemplo anterior para vericar o efeito. O trecho de cdigo ser inserido dentro instruo switch.
1 2 3 4 5 6 7 8
case 6: x=

"Today it 's Saturday" ;

0:

break ; case x=

"Today it 's Sunday" ; "Looking forward to the Weekend" ;

break ; default : x=

30

Captulo 6 LAOS DE REPETIO

Dentro do JavaScript os laos de repetio(LOOPS) so utilizados para se executar um trecho de cdigo inmeras vezes contendo valores diferentes a cada interao. A sintaxe do for a seguinte:
1 2 3 4
for { the } code block to be executed ( statement 1; statement 2; statement 3)

O loop FOR possui 3 declaraes, elas so os statement de 1 a 3. Statement 1: executando antes do loop. Statement 2: dene as condies para a execuo do loop. Statement 3: executado uma vez a cada iterao do cdigo.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
} document . g e t E l e m e n t B y I d ( < <

html> <body > p the button to loop through a block of button onclick=" myFunction ()">Try i t </ button> <p id="demo"> </ p >
< >C l i c k < code five t i m e s .</ >

script>
function myFunction ( ) var for { x=x + x=

"" ;
i = 0 ; i< 5 ;

( var

i ++)
+

"The number is "

"<br >" ;

"demo" ) . innerHTML=x ;

31

17 18 19 20 21
</

} </

script>

</

body> html>

A declarao 1 (statement 1), normalmente a utilizamos esta declarao para iniciar a varivel que ser utilizada no loop. Voc pode omitir a declarao 1 caso deseje, porm necessrio declarar esta varivel antes do loop. O javaScript tambm possibilita a declarao de mais de uma varivel dentro do espao da declarao 1. A declarao 2 (statement 2) utilizada para se vericar o valor da varivel inicial. Caso a declarao 2 retorne um valor verdadeiro (true) o loop ser executado mais uma vez e caso esta declarao retorne um valor falso (false) o loop ser terminado. Existe a possibilidade de se omitir o valor da declarao 2 porem ser necessria a insero da instruo break dentro do loop, caso contrrio o loop nunca mais ir parar a sua execuo. A instruo break ser abordada com mais detalhes. A declarao 3 (statment 3) utilizada para se incrementar o valor da varivel inicial. possvel se omitir a declarao 3, porem uma linha de cdigo equivalente a esta declarao deve ser inserida dentro do loop.

6.0.11 LOOP WHILE

O loop while executa um bloco de cdigo at que uma condio estipulada seja verdadeira. O loop while utiliza a seguinte sintaxe:
1 2 3 4
while { code } block to be executed ( condition )

O cdigo a seguir mostra a execuo do loop while. Enquanto o valor de i for menor que 5 o lao de repetio continuar a ser executado.
1 2 3
<

html> <body >

32

4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
</

< >C l i c k less

the than

button 5 .</ >

< <

button onclick=" myFunction ()">Try p id="demo"></p> script>

function { var x= myFunction ( )

to

loop

through

block

of

as

long

as

<

em> i</em>

is

i t </

button>

<

"" , i = 0 ;
( i<5 )

while { x=x +

i ++;

"The number is "

"<br >" ;

} document . g e t E l e m e n t B y I d ( } </

"demo" ) . innerHTML=x ;

script>

</

body> html>

Caso esquea a condio de parada do loop while o bloco de cdigo ser executado innitamente.

6.0.12 O LOOP DO/WHILE

O lao do/while uma variao do lao while. O cdigo do lao executado uma vez antes da vericao da condio ser feita. Caso a condio for verdadeira o lao continuar a ser executada, caso contrrio o lao ser repetido. Sua sintaxe a seguinte:
1 2 3 4 5
do { code } while ( condition ) ; block to be executed

O exemplo a seguir mostra a utilizao do lao do/while. O lao ser executado pelo menos uma vez. Nunca se esquea de utilizar a condio de parada, caso contrrio o lao ser repetido innitamente.
1 2 3 4 5
<

html> <body >

< >C l i c k less

the than

button 5 .</ >

<

button onclick=" myFunction ()">Try

to

loop

through

block

of

as

long

as

<

em> i</em>

is

i t </

button>

33

6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
</

<

p id="demo"></p> script>
function { var do { x=x + i ++; } while ( i<5 ) x= myFunction ( )

<

"" , i = 0 ; "The number is " "<br >" ;

document . g e t E l e m e n t B y I d ( } </

"demo" ) . innerHTML=x ;

script>

</

body> html>

Mude a condio do while para vericar que o lao executado pelo menos uma vez.

34

Captulo 7 BREAK / CONTINUE

7.1 BREAKS

O break utilizado anteriormente nesta apostila estava sendo utilizada para "pular fora"de um switch(). Um break tambm pode ser utilizado para fora de um loop. No exemplo a seguir o break "pula fora"do lao e continua a execuo do cdigo javaScript.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
</ } </ } document . g e t E l e m e n t B y I d ( } x=x + < <

html> <body > p t h e b u t t o n t o do a l o o p w i t h a b r e a k .</ p > button onclick=" myFunction ()">Try i t </ button> <p id="demo"> </ p >
< >C l i c k <

script>
function myFunction ( ) var for { if { break ; ( x=

"" , i = 0 ;

( i = 0 ; i< 1 0 ;

i ++)

i ==4)

"The number is "

"<br >" ;

"demo" ) . innerHTML=x ;

script>

body>

35

25

</

html>

7.2

CONTINUE

O continue para(break) uma iterao do loop(dentro do loop), caso uma condio especca ocorra e continua a execuo do loop. No exemplo a seguir o valor 3 pulado.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
</ } </ } document . g e t E l e m e n t B y I d ( } x=x + < <

<

html> body> p t h e b u t t o n t o do a l o o p w h i c h will skip button onclick=" myFunction ()">Try i t </ button> <p id="demo"> </ p >
< >C l i c k < the step where i = 3 .</ >

script>
function myFunction ( ) var for { if { continue ; ( x=

"" , i = 0 ;

( i = 0 ; i< 1 0 ;

i ++)

i ==3)

"The number is "

"<br >" ;

"demo" ) . innerHTML=x ;

script>

</

body> html>

36

Captulo 8 ERROS
8.1 ERRORS- THROW e TRY TO CATCH

O try permite que voc teste um bloco de cdigos para vericar erros. O catch permite manipular o erro. O Throw permite a criao de um tipo de erro

8.2

OS ERROS PODEM OCORRER

Quando o JavaScript est executando um cdigo JavaScript, alguns tipos de erros podem ocorrer. Estes erros podem ser de sintaxe, erros por falta de termos ou palavras, erros por tipos de navegadores, por utilizao de termos em momentos errados e erros por servidores.

8.3

O JAVASCRIPT TRY AND CATCH

O try permite que um trecho ou bloco de cdigo seja testado para vericao de erros enquanto est sendo executado. O catch permite voc executar um bloco de cdigo caso um erro ocorra dentro da instruo try. 37

As declaraes em javascript do try and catch ocorrem em pares. Sua sintaxe a seguinte:
1 2 3 4 5 6 7 8
try { / /Run } catch ( err ) { // Handle } errors here some code here

Um exemplo disto voc pode ver no exemplo a seguir.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
</ </ } </ } } catch ( err ) { <

<

html> head> < script>

var function { try {

t x t=

"" ;
message ( )

adddlert (

"Welcome guest!" ) ;

"There was an error on this page .\n\n" ; "Error description : " + e r r . m e s s a g e + "\n\n" ; t x t+ ="Click OK to continue .\n\n" ;
t x t= t x t+ = a l e r t ( txt ) ;

script> head>
/>

body> input type="button" value="View message" onclick="message ()" </ body >
< <

html>

8.4

UTILIZANDO THROW

A utilizao da funo throw permite a criao de um erro especco. Se voc utilizar o throw em conjunto com o try e o catch possvel criar mensagens de erros customizveis. A sintaxe a seguinte: 38

throw

exception

Essa "exception"pode ser qualquer tipo de dado do javaScript como uma string, um numero, um dado booleano ou at um objeto. O exemplo a seguir examina a entrada dentro de uma input. Caso o valor estiver errado o thrown ser acionado. O erro ser capturado pela instruo catch e uma mensagen de erro customizada ser mostrada dependendo do tipo de erro.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
</ } } </ { < <

<

html> body> script>

function { try { var x=d o c u m e n t . g e t E l e m e n t B y I d ( myFunction ( )

i f ( x= =

"" )

throw throw throw throw

i f ( isNaN ( x ) ) i f ( x >10) i f ( x<5 ) } catch ( err )

"demo" ) . v a l u e ; "empty" ; "not a number" ; "too high" ; "too low" ;

var

y=d o c u m e n t . g e t E l e m e n t B y I d (

y . innerHTML=

"Error: "

err

"mess" ) ; "." ;

script>

h1>My F i r s t J a v a S c r i p t</ h1> p i n p u t a number b e t w e e n 5 and 1 0 :</ p > <input id="demo" type="text"> <button type="button" onclick=" myFunction ()">T e s t <p id="mess"> </ p >
< < >P l e a s e </

I n p u t</

button>

body> html>

39

40

Captulo 9 VALIDAO DE FORMS

O JavaScript pode ser utilizado para se validar um dado ou informao antes que seja enviado para o servidor. Os dados que so tipicamente vericados no javascript so:
O usurio deixou campos em vazio ? O usurio digitou um e-mail vlido ? O usurio entrou com uma data vlida ? O usurio entrou com um texto em um campo numrico ?

O exemplo a seguir verica se um determinado campo foi deixado em vazio. Se um campo foi deixado vazio uma mensagem de alerta exibida, a funo retornar falso e os dados no sero enviados.
1 2 3 4 5 6 7 8 9
} function { var if { alert ( return } x=d o c u m e n t . f o r m s [ ( x= =n u l l || x= = validateForm ( )

"" )

"myForm" ] [ "fname" ] .

value ;

"First name must be filled out" ) ;

false ;

Esta funo pode ser vista no exemplo a seguir: 41

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<

<

html> head> < script>

function { var if { alert ( return } x=d o c u m e n t . f o r m s [ ( x= =n u l l || x= = validateForm ( )

"" )

"myForm" ] [ "fname" ] .

value ;

"First name must be filled out" ) ;

false ;

</ </

script> head>

body> form name="myForm" action=" demo_form .asp" o n s u b m i t="return validateForm ()" method="post"> F i r s t name : <input type="text" name ="fname"> <input type="submit" value="Submit"> </ form> </ body >
< < </

html>

Um outro exemplo para apresentar a validao de campos a vericao de e-mail. Neste exemplo a funo verica a sintaxe geral de um e-mail. Isto signica que o dado de entrada deve conter um smbolo de @ e pelo menos um ponto(.). O smbolo @ no pode ser o primeiro caractere do endereo de e-mail, e o ltimo ponto deve estar aps o sinal de @, e antes de no mnimo dois caracteres nais.
1 2 3 4 5 6 7 8 9 10 11
} function { var var var if { alert ( return } x=d o c u m e n t . f o r m s [ a t p o s=x . i n d e x O f ( validateForm ( )

"myForm" ] [ "email" ] . "@" ) ; d o t p o s=x . l a s t I n d e x O f ( "." ) ;

|| d o t p o s <a t p o s +2 ||

value ;

( a t p o s<1

d o t p o s +2 > =x . l e n g t h )

"Not a valid e-mail address" ) ;

false ;

O exemplo a seguir mostra a utilizao desta funo dentro de um documento HTML.

1 2 3 4
<

<

html> head> < script>

function validateForm ( )

42

5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
</ </

{ var var var if { alert ( return } x=d o c u m e n t . f o r m s [ a t p o s=x . i n d e x O f (

"myForm" ] [ "email" ] . "@" ) ; d o t p o s=x . l a s t I n d e x O f ( "." ) ;

|| d o t p o s <a t p o s +2 ||

value ;

( a t p o s<1

d o t p o s +2 > =x . l e n g t h )

"Not a valid e-mail address" ) ;

false ;

</

script> head>
o n s u b m i t=

body> form name="myForm" action=" demo_form .asp" ();" method="post"> E m a i l : <input type="text" name ="email"> <input type="submit" value="Submit"> </ form> </ body >
< <

"return validateForm

html>

43