Java PDF

Apostila Apostila Apostila Apostila
Prof.a Elisabete da Silva Santos

D DD Departamento de T TT Tecnologia da I II Informao

FATEC FATEC FATEC FATEC- -- -SP SP SP SP

Apostila Apostila Apostila Apostila

Prof.a Elisabete da Silva Santos
Javascript

Faculdade de Tecnologia de So de Paulo
Prof Elisabete da Silva Santos
2
JavaScript
ndice
1. Introduo.............................................................................................................................................. 4
1.1. Histrico ......................................................................................................................................................................... 4
1.2. O qu JavaScript?......................................................................................................................................................... 4
1.3. Java, C++ e JavaScript so a mesma coisa?.................................................................................................................... 4
1.4. O qu posso fazer com JavaScript? ................................................................................................................................ 5
1.5. O qu preciso para programar em JavaScript?................................................................................................................ 5
2. JavaScript em uma Pgina HTML........................................................................................................ 5
2.1. Tags de Comentrio:....................................................................................................................................................... 6
2.2. Ocultando JavaScript de Navegadores mais Antigos...................................................................................................... 7
2.1. Escrevendo em uma Pgina document.write( )............................................................................................................ 7
3. Caixas Pop-up........................................................................................................................................ 7
3.1. Mtodo alert( ) ................................................................................................................................................................ 7
3.2. Mtodo prompt( )............................................................................................................................................................ 8
3.3. Mtodo confirm( )........................................................................................................................................................... 8
4. Caracteres de Escape............................................................................................................................. 8
5. Variveis ................................................................................................................................................ 9
5.1 Globais e Locais .............................................................................................................................................................. 9
5.2. Nomes de Variveis...................................................................................................................................................... 10
6. Tipos de Dados em JavaScript............................................................................................................. 10
6.1. Bsicos.......................................................................................................................................................................... 10
6.2. Especias ........................................................................................................................................................................ 10
7. Converso entre Tipos de Dados ......................................................................................................... 11
7.1. Funes parseInt( ) e parseFloat( )................................................................................................................................ 11
7.2. Outros mtodos de converso de tipos de dados - Number(), String(), Boolean()........................................................ 11
7.3. Fixando e Arredondado o nmero de casas decimais - toFixed( )............................................................................. 12
8. Operadores........................................................................................................................................... 12
8.1. Aritmticos ................................................................................................................................................................... 12
8.2. Relacionais.................................................................................................................................................................... 13
8.3. Lgicos ......................................................................................................................................................................... 13
8.4. Unrios Diversos .......................................................................................................................................................... 14
8.5. Operadores de Atribuio ............................................................................................................................................. 14
8.6. Operadores Diversos..................................................................................................................................................... 14
9. Funes................................................................................................................................................. 15
9.1. Formato......................................................................................................................................................................... 15
9.2. Funo sem Parmetros ................................................................................................................................................ 16
9.3. Funo recebendo Parmetros ...................................................................................................................................... 16
9.4. Funo retornando Valores........................................................................................................................................... 17
10. Strings .................................................................................................................................................. 17
10.1. Objeto Strings ............................................................................................................................................................. 17
10.2. Comprimento de String - length ................................................................................................................................. 18
10.3. Converso de String toUpperCase( ) e toLowerCase( ) ........................................................................................... 18
10.4. Substrings substring( ) ............................................................................................................................................. 18
10.5. Obtendo um nico Caractere - charAt( ).................................................................................................................... 19
10.6. Localizando uma Substring - indexOf( )..................................................................................................................... 19
10.7. Localizando a ltima Ocorrncia de uma Substring lastIndexOf( ) ........................................................................ 19
Javascript

3
11. Teste e Comparao de Valores .......................................................................................................... 20
11.1. Instruo if/else........................................................................................................................................................... 20
11.2. Expresso Condicional ............................................................................................................................................... 21
11.3. Instruo switch( ) ...................................................................................................................................................... 21
12. Array.................................................................................................................................................... 22
12.1. Criando um Array Numrico ...................................................................................................................................... 22
12.2. Acessando os Elementos do Array.............................................................................................................................. 22
12.3. Criando Arrays de Strings........................................................................................................................................... 23
12.4. Criando Arrays Rapidamente...................................................................................................................................... 23
12.5. Verificando a Quantidade de Elementos de um Array................................................................................................ 23
12.6. Dividindo uma String e Armazenando-a em um Array split( )................................................................................ 24
12.7. Remontando um Array em uma String join( ) ......................................................................................................... 24
12.8. Classificando Elementos de um Array........................................................................................................................ 24
13. Loops .................................................................................................................................................... 25
13.1. Loop for ...................................................................................................................................................................... 25
13.2. Loop while.................................................................................................................................................................. 26
13.3. Loop do...while........................................................................................................................................................... 26
13.4. Loop for...in................................................................................................................................................................ 27
13.5. Criando um Loop Infinito........................................................................................................................................... 27
13.6. Escapando de um Loop Infinito.................................................................................................................................. 28
13.7. Desprezando uma Iterao de um Loop...................................................................................................................... 28
14. Objetos Embutidos .............................................................................................................................. 29
14.1. Objeto Math................................................................................................................................................................ 29
14.2. Trabalhando com Nmeros......................................................................................................................................... 31
14.3. Objeto Date................................................................................................................................................................. 32
15. Instruo with...................................................................................................................................... 34
16. Tratadores de Eventos ......................................................................................................................... 35
16.1. Respondendo a Eventos .............................................................................................................................................. 35
16.2. Objeto event................................................................................................................................................................ 39
17. Objetos Personalizados........................................................................................................................ 40
17.1. Conceitos .................................................................................................................................................................... 40
17.2. Criando Objetos Personalizados ................................................................................................................................. 41
17.3. Criando Instncias....................................................................................................................................................... 41
17.4. Criando Instncias Atribuindo Valores....................................................................................................................... 42
17.5. Relao de Mtodos e Propriedades de Formatao................................................................................................... 42
17.6. Prottipos de Objetos.................................................................................................................................................. 43
18. Hierarquia do Objeto Browser............................................................................................................ 43
18.1. Objeto window............................................................................................................................................................ 44
18.1.2. Objeto location......................................................................................................................................................... 49
18.1.3. Objeto history .......................................................................................................................................................... 50
18.1.4. Objeto document...................................................................................................................................................... 52
18.4.5. Objeto link ............................................................................................................................................................... 54
18.4.6. Objeto anchor........................................................................................................................................................... 55
18.4.7. Objeto image............................................................................................................................................................ 56
18.4.8. Objeto form.............................................................................................................................................................. 61
19. Deteco e Diferenas entre Navegadores........................................................................................... 68
20. Outros Scripts ...................................................................................................................................... 70
21. Bibliografia .......................................................................................................................................... 73
22. Sobre Sites... ......................................................................................................................................... 73
Javascript

4
1. Introduo

1.1. Histrico

JavaScript foi desenvolvido por Brendan Eich, da Netscape Communications Corporation. Originalmente
chamado LiveScript e foi introduzido no Netscape Navigator 2.0 em 1995. Mais tarde, foi batizado como
JavaScript para indicar seu relacionamento com Java, termo da Web muito atraente no momento.
JavaScript foi a primeira linguagem de script da Web e de longe a mais popular. Quando a Microsoft
percebeu o quanto podia ser til uma linguagem de script para a Web, lanou sua prpria variante
chamada JScript 1.0 com o navegador Internet Explorer 3.0.
O JScript 1.0 era compatvel com o JavaScript 1.0 do Netscape, o que significava que um JavaScript
escrito para um dos navegadores tinha uma boa chance de funcionar como esperado em um outro
navegador. Aps alguns upgrades de verses tanto da Netscape quanto, principalmente, da Microsoft,
gerou-se o incio de incompatibilidades de navegadores.
Foi criado ento um padro chamado de linguagem ECMAScript em 1997, chamado tambm ECMA-262,
criado pelo grupo suo European Computer Manufacturing Association. A partir da, grande parte do
caos ocorrido foi dando lugar a uma melhor concordncia entre ambas as linguagens e os padres. O
JavaScript1.5 e JScript 5.5 atualmente esto sendo 100% concordantes com o ECMAScript Edio 3,
pelo menos na teoria, se todas as pessoas estiverem usando a ltima verso do navegador...

1.2. O qu JavaScript?

JavaScript uma linguagem de script que lhe possibilita adicionar um novo nvel de interatividade e
funo s pginas Web.
Um script uma seqncia de instrues (ou, at mesmo um programa) que so interpretados ou
executados por um outro programa e no pelo processador do computador. Eles so mais fceis e mais
rpidos de se escrever do que os programas e necessitam no mnimo de um editor de texto simples, que
pode ser gratuito!
Diferentemente de HTML, se houver erros nos scripts o programa interromper a execuo e poder at
travar o computador. Normalmente voc poder visualizar a mensagem de erro gerado em seu
navegador.

1.3. Java, C++ e JavaScript so a mesma coisa?

JavaScript uma linguagem de terceira gerao, o que significa que ela prima do C, Pascal e BASIC.
Existem semelhanas, mas existem tambm diferenas fundamentais:
JavaScript independente de formatao.
JavaScript uma linguagem interpretada.
JavaScript altamente porttil e independente de hardware.
JavaScript se encaixa facilmente em outro software, como os navegadores.

Se voc tiver alguma experincia em C, C++, Pascal, BASIC, Java, FORTRAN ou Perl, voc pode achar
familiares alguns dos aspectos do JavaScript. Mas no se iluda, para escrever JavaScript, voc precisa
usar JavaScript!

Javascript

5
1.4. O qu posso fazer com JavaScript?

Voc pode adicionar mensagens que rolam na tela ou alterar as mensagens da linha de status do
navegador.
Validar contedo de um formulrio.
Fazer clculos;
Trabalhar com datas, horas e fuso horrio;
Exibir mensagens para o usurio tanto como parte de uma pgina da Web como em caixas de
alertas;
Fazer animaes de imagens ou imagens que mudam quando voc move o cursor sobre elas;
Detectar o navegador em utilizao e exibir contedo diferente para navegadores diferentes;
Detectar plug-ins instalados e notificar o usurio se um plug-in foi exigido;
E muito mais, s usar a criatividade!

1.5. O qu preciso para programar em JavaScript?

Um editor de texto (no utilize formatao) ou um bloco de notas.
Um navegador. (Netscape, Internet Explorer, Opera...)
Conhecimentos bsicos em HTML, onde o script ser includo.

Curiosidade: Java uma ilha densamente povoada na Indonsia, produtora de caf. Seu nome foi utilizado para
batizar a linguagem Java quando seus desenvolvedores estavam tomando um cafezinho... J pensou se o
cafezinho fosse brasileiro?

2. JavaScript em uma Pgina HTML

Para incluir JavaScript em uma pgina HTML utilizamos as tags <script> contedo </script>.
Podemos tambm indicar a linguagem de script a ser utilizada e a verso:
<script language=javascript> ... </script> // JavaScript a linguagem padro do navegador.
<script language=javascript1.3> ... </script> // 1.3 a verso JavaScript utilizada.

Ateno:

O script sensvel a letras maisculas e minsculas (sensitive case), portanto, digite em minsculo o
que estiver em minsculo e em maisculo o que estiver em maisculo!
No utilize caracteres especiais (acentos, asteriscos, pontos...), exceto como contedo de variveis!

Podemos incluir as tags de Javascript em vrios lugares do cdigo HTML:

Em um Arquivo Externo
No Cabealho do Documento
Dentro de Tags, utilizando Tratadores de Eventos
No Corpo do Documento

Javascript

6
Exemplos:

1. <html>
<head>
<title> Javascript1 </title>
<script language=javascript>
alert(Seja bem-vindo(a)!);
// JavaScript no Cabealho da pgina HTML.
</script>
</head> ...

2. <html>
<head>
<script language=javascript src=arquivo_externo.js>
// Chamando um Arquivo Externo contendo JavaScript.
</script>
</head> ...

3. <html>
<head>
</head>
<body>
<input type=button value=Mensagem onclick=alert(Ola!);>

</body>

4. <html>
<head>
</head>
<body>
document.write(Iniciando em JavaScript);
// JavaScript no Corpo de uma pgina HTML.
</script>
</body> ...

2.1. Tags de Comentrio:

Ns podemos escrever anotaes dentro do cdigo fonte sem que elas sejam executadas como
comandos do Javascript, para isto, precisamos indicar que as linhas so apenas de comentrios.

Exemplos:

// Comentando uma linha.

/* Comentando
vrias linhas... */
Javascript

7
2.2. Ocultando JavaScript de Navegadores mais Antigos

Navegadores mais antigos, ou que tenham o JavaScript desabilitado, no reconhecem a tag <script>.
Para que o cdigo em JavaScript no seja exibido no meio da pgina, comente-o com tags de HTML:


O navegador que suportar JavaScript ignorar os comentrios em HTML e executar o script.

Exemplo:


</script>

Utilize o comentrio do JavaScript (//) para comentar o final do comentrio de Html!

2.1. Escrevendo em uma Pgina document.write( )

Voc deve ter percebido que utilizamos vrias vezes nos exemplos o comando document.write( ).
Em JavaScritp ns o chamamos de Mtodo, porque ele executa uma funo (ao), ou seja, com ele
voc pode escrever no documento, que o corpo da pgina em HTML.

Exemplo:

document.write(Escrevendo no documento);
</script>

O contedo dos parnteses deve vir entre aspas ou apstrofes, a menos que seja uma varivel.
Todos os comandos em JavaScript terminam com ponto e vrgula (;).

3. Caixas Pop-up

As caixas Pop-up tambm so mtodos em JavaScript. Com elas podemos interagir com o usurio
exibindo mensagens, recebendo dados atravs da caixa de dilogo e confirmaes ou no de
informaes.

3.1. Mtodo alert( )

Exibe uma caixa de mensagem e aguarda um clique do usurio no boto <OK> para fech-la.

Exemplo:

alert(Seja muito bem-vindo(a)!);
</script>

Javascript

8
3.2. Mtodo prompt( )

Abre uma caixa de dilogo para que o usurio possa entrar com dados.

1. <script language=javascript>
prompt(Digite seu nome);
</script>

Neste exemplo, o texto entre parnteses ser exibido na parte superior da caixa pop-up e o campo de resposta
aparecer com a palavra undefined selecionado.

origem = prompt(Informe o seu pas de origem,Brasil);
</script>

Neste outro exemplo, o texto aps a vrgula e dentro dos parnteses, ser exibido no campo de resposta como
resposta padro, se preferir deixar a resposta em branco, no inclua contedo nem espaos entre as aspas.
A resposta poder ser armazenada em uma varivel para ser tratada posteriormente pelo programa.

3.3. Mtodo confirm( )

Exibe uma caixa de confirmao contendo dois botes: <ok> (sim) e <cancel> (no).

Exemplo:

resp = confirm(Ser que vai chover?);
</script>

A resposta tambm poder ser armazenada em uma varivel para ser tratada posteriormente pelo programa.

4. Caracteres de Escape

Os caracteres de escape so usados em Strings para:
Evitar que certos caracteres causem erros dentro do programa;
Adicionar formatao (como retorno de carro) a Strings.

Caracter Descrio
\b Backspace
\t Tabulao Horizontal
\f Avano de Formulrio (form feed)
\n Nova Linha (line feed)
\r Retorno de Carro
\ Aspas Duplas
\ Apstrofe
\\ Barra invertida

Javascript

9
Exemplos:

alert(Um retorno de carro est\rbem no meio desta linha!);
alert(\Isto no saiu como deveria!\ disse ela);
alert(Esta linha tem uma tabulao\taqui.);
</script>

5. Variveis

5.1 Globais e Locais

Criar variveis em JavaScript muito fcil, dar um nome e atribuir um valor a ela e estar criada!

Exemplo:

Nome = Maria;

Esta varivel ser global, ou seja, voc ter acesso a ela a partir de qualquer script relacionado a este
documento.

Voc poder criar variveis desta outra forma tambm, utilizando a palavra chave var:

var Nome1 = Jos;

A varivel Nome1 ser global se estiver fora de uma funo, caso contrrio ser local, ou seja, voc s
poder acess-la dentro da funo onde ela foi criada.

Variveis globais tm o script inteiro como escopo.
Variveis locais tm uma nica funo como escopo.

Exemplos:

num = 1234; // Criando e atribuindo um valor uma varivel.

var msg1; // Criando uma varivel por linha.
var msg2;

var num1, nome1, msg1; // Criando todas as variveis em uma nica linha.

var nome2 = Joo, num2 = 12, msg2 = telefone do Joo: 1234-5678;
// Criando todas as variveis e atribuindo valores, em uma nica linha.

function cliente(){
var nome3=Joo; // Criando uma varivel local dentro de uma funo
}
</script>
Javascript

10
5.2. Nomes de Variveis

Nomes de variveis s podem conter letras maisculas e/ou minsculas, nmeros e sublinhado,
portanto, no podem conter espaos, hfens ou outros caracteres especiais;
O primeiro caractere do nome da varivel deve ser uma letra ou o sublinhado;
Javascript case sensitive, portanto, letras maisculas so diferentes de minsculas. Ateno!!!
No h limite oficial no comprimento de nomes de variveis, portanto, vale o bom senso.
Utilize sempre nomes mnemnicos, ou seja, que traduzam o contedo da varivel.

Exemplos de nomes vlidos:

Total_geral
nome3
_num1
i (que diferente de I)

6. Tipos de Dados em JavaScript

Em JavaScript voc no precisa definir uma varivel especificando o tipo de dados que ela armazenar
(exceto em casos raros), ela se adaptar ao tipo de dados do contedo a ela atribudo.

Tipos de Dados do JavaScript:

6.1. Bsicos

Number - Nmeros Inteiros ou de Ponto Flutuante.
Ex.: 0; 1; -3; 42; 3,1415926535897932384626433832795 ou 3.76e2.
String - Trata-se de uma cadeia de caracteres (entre aspas).
Ex.: Meu nome Guilherme.
Boolean - Booleanos ou Lgicos; possuem dois valores: Verdadeiro ou Falso.
Ex.: true; false.

6.2. Especias

Valores numricos especiais:
Positive infinite Infinito positivo.
Negative infinite Infinito negativo.
0 - zero positivo e negativo.
NaN - Not a Number (No um Nmero). Usualmente gerado como resultado de uma operao
matemtica que no faz sentido, por exemplo, diviso de qualquer nmero por zero.
No h possibilidade de digitar nenhum dos valores acima. Os valores relacionados com infinito resultam quando
se ultrapassa o limite de 10^308 ou 10^ -308. Exemplo, multiplicando 1.0e300 por si mesmo. Eles no so muito
teis para ns.

Javascript

11
Tipos especiais:
Null - Valor nulo, quando no h nada de til disponvel.
Undefined - Indefinido. Na maioria das vezes o mesmo que null. Sua presena indica que algo
saiu errado em seu JavaScript.

7. Converso entre Tipos de Dados

O JavaScript trata converses entre tipos de dados para voc sempre que ele pode. Exemplo:
total= 40;
document.write(O total + total);
A instruo imprimir a mensagem: O total 40.

A funo de document.write() trabalha com Strings, portanto, o interpretador de JavaScript
automaticamente converte quaisquer no-strings na expresso em Strings antes de desempenhar a
funo.

A caixa prompt() tambm trabalha com Strings, portanto, antes de executarmos quaisquer clculos com
valores fornecidos atravs do prompt, devemos converter o tipo de String para nmeros.

s vezes, uma String pode conter um nmero e precisamos convert-la em uma varivel numrica
regular. O JavaScript possui duas funes embutidas para transformar Strings em nmeros:

7.1. Funes parseInt( ) e parseFloat( )

parseInt(string) //Converte uma string em um nmero inteiro.
ParseFloat(string) //Converte uma string em um nmero com ponto flutuante.

A duas funes efetuaro a leitura da string desde o seu incio e retornaro uma verso numrica.

Exemplos:
1. num_b = parseFloat(prompt(Digite um nmero,)); // num_b ser do tipo number.
alert(num_b + do tipo + typeof(num_b));

2. string_a = 45 anos de experincia!;
num_a = parseInt(string_a);
alert(num_a); // A varivel num_a armazenar o valor 45, a parte no numrica ignorada.

O nmero que ser capturado dever estar no incio da String.

Essas funes so utilizadas para converte contedo das caixas de texto.

7.2. Outros mtodos de converso de tipos de dados - Number(), String(), Boolean()

String Converte o tipo de uma varivel em String.
Number Converte o tipo de uma varivel em numrico.
Boolean Converte o tipo de uma varivel em booleano.
Javascript

12
Exemplo:

1. a = 2;
b = String(a); //Converte a varivel numrica "a" em String.
alert(typeof(b));

7.3. Fixando e Arredondado o nmero de casas decimais - toFixed( )

Para fixar e arredondar a quantidade de nmeros aps o valor inteiro, utilizamos o mtodo toFixed().

Exemplo:

1. a = 10/3; // A varivel "a" recebe o resultado de 10 dividido por 3.
document.write(a);
a = a.toFixed(2); // O argumento "2" define o nmero de casas decimais.
document.write("<br>"+ a); // O valor de "a" ser: 3.33

8. Operadores

Os operadores precisam agir sobre alguma coisa para que possam operar. Eles podem funcionar com
um s dado, que os tornam operadores unrios; com dois, binrios ou com trs, ternrio.

Operadores mais comuns:

8.1. Aritmticos

Esses so os operadores matemticos familiares (binrios):

Adio (+)
a = 2 , b = 3; //L-se: a recebe 1 e b recebe 3
c = a + b;
document.write(<br>+c); // o valor de c ser 5

Substrao (-)
a = 3 , b = 1;
c = a b;

Diviso (/)
a = 8 , b = 2;
c = a / b;

Multiplicao (*)
a = 2 , b = 3;
c = a * b;
Javascript

13
Mdulo ou Resto da Diviso(%)
a = 5 , b = 2;
c = a % b;

8.2. Relacionais

Os operadores relacionais so usados em comparaes (binrios):

Menor que (<)
a = 5 , b = 6;
alert(a < b);

Menor ou igual a (<=)
a = 3 , b = 5;
alert(a <= b);

Maior que (>)
a = 4 , b = 6;
alert(b > a);

Maior ou igual a (>=)
a = 5 , b = 7;
alert(b >= a);

Igual a (==)
a = 3 , b = 3;
alert(a = = b);

No igual a (!=)
a = 3 , b = 4;
alert(a != b);

8.3. Lgicos

Eles so utilizados em instrues condicionais. (&& e || so binrios e ! unrio)

E (&&)
a = 6 , b = 3, c = 1;
alert((a > b) && (b > c)); // (a maior que b) e (b maior que c)

Ou (||)
a = 6 , b = 3, c = 1;
alert((a > b) || (b == c)); // (a maior que b) ou (b igual a c)

Negao (!)
a = 6 , b = 3, c = 1;
alert(a != b); // ( a no igual a b)

Javascript

14
8.4. Unrios Diversos

Incremento de prefixo e sufixo (++)
1. a = 5;
alert(++a + 2); // Adiciona 1 varivel a antes de executar a expresso.
alert(a = + a); // O resultado do alert ser 8
2. a = 5;
alert(c++ + 2); // Adiciona 1 varivel a aps a execuo da expresso.
alert(c = + c); // O resultado do alert ser 7

Decremento de prefixo e sufixo (--)
1. a = 5
b = --a + 2; // Subtrai 1 da varivel a antes da execuo da expresso, b receber 6.
2. a = 5
b = a-- + 2; //Subtrai 1 da varivel a aps a execuo da expresso, b receber 7.

Unrio (-)
1. a = 2;
b = -a; //Muda o sinal de positivo para negativo, portanto b receber -2.
2. c = -3;
d = -c; //Muda o sinal de negativo para positivo, d receber 3.

Unrio (+)
+a //Muda o operando para o tipo nmero (por exemplo, era uma string).

8.5. Operadores de Atribuio

Atribuio Plena (=)
a = 3; // A Varivel a recebe o valor 3.
a = b = c = 5; // As variveis a, b e c recebem o valor 5.

Compostos:
x =+ 3; // o mesmo que x = x + 3;
x =- 3; // o mesmo que x = x - 3;
x =* 3; // o mesmo que x = x * 3;
x =/ 3; // o mesmo que x = x / 3;

8.6. Operadores Diversos

Condicional - Ternrio (? :)
1. x = 1, y = 2;
(x > y)? alert(Sim, x Maior que y): alert(No, x Menor que y);
Se a expresso condicional (x > y) for verdadeira, executar a sentena aps a interrogao (?),
caso contrrio, executar a sentena aps os dois pontos (:).

2. resp = (x > y)? Sim : No; //A varivel resp receber No.
A varivel resp opcional; podemos cri-las se precisarmos salvar dados.
Javascript

15
Concatenador de string - Binrio (+)
a = So , b = Paulo;
c = a + b; // O contedo de c ser So Paulo.

Operador de tipo - Unrio (typeof)
1. x = 3;
alert(typeof(x)); // O tipo da varivel ser exibido na caixa de alerta; no caso, number.

2, mens = Ol!;
alert(typeof(mens)); // O tipo string ser exibido na caixa de alerta..

9. Funes

Funes so grupos de instrues em JavaScript que podem ser tratadas como uma unidade.
Elas so executadas apenas quando o programa as solicita, uma ou mais vezes.

Normalmente definimos as funes dentro do cabealho da HTML e podemos cham-las em qualquer
parte do script.

9.1. Formato

Uma funo definida a partir da palavra-chave function, seguida de seu nome e de parnteses. O
contedo da funo (sentenas) deve estar inserido entre chaves.

<html>
<head> <title> Funes </title>
function nome_da_funo(){
sentena1; // Linhas de instrues da funo.
sentena2;
...
}
</script>
</head>

<body>
Corpo da pgina...
<script>
nome_da_funo(); //Chamada da funo para que ela possa ser executada.
</script>
</body>
</html>

Uma funo pode receber parmetros e/ou retornar valores (dados).

Javascript

16
9.2. Funo sem Parmetros

A funo executada sem receber parmetros e/ou retornar valores.

Exemplo:

<head>
function mens(){ // Definio da funo no cabealho da pgina.
alert(Ola!);
}
</script>


mens(); // Chamada da funo a partir do corpo da pgina.
...
mens(); // Chamando a mesma funo novamente...

</script)

9.3. Funo recebendo Parmetros

Uma funo pode receber parmetros. Os dados que sero enviados funo devero estar inseridos
entre os parnteses da chamada da mesma.
A funo receber e armazenar os dados nas variveis contidas entre os parnteses de sua definio,
na respectiva ordem em que foram enviados.

Exemplo:


function mens(quem1 , quem2){ // Definio da funo e das variveis quem1 e quem2.
alert(Ola + quem1 + ,ol + quem2);
}
</script>

Chamando a funo:

nome1 = Pedro;
nome2 = Paulo;
mens(nome1,nome2); //Chamada da funo mens() passando os parmetros nome1 e nome2.
</script)

A funo mens() ser chamada e enviar o contedo das variveis nome1(Pedro) e nome2 (Paulo) para serem
recebidos pelas variveis quem1 e quem2.
A funo ser executada e exibir na caixa de alerta uma saudao para Pedro e Paulo.

Javascript

17
9.4. Funo retornando Valores

As funes podem retornar valores para o ponto de sua chamada.

Exemplo:

function media(a,b,c){ // Funo recebendo parmetros em a, b e c.
calculo =(a+b+c)/3; // Clculo dos valores armazenados nas variveis.
return calculo; // Funo retornando o resultado do clculo.
}
</script>
result = media(3,5,8); // Chamada da funo media() passando os valores (3, 5, e 8).
alert(result); // Exibindo o retorno do clculo que foi atribudo a varivel result.
</script)

O valor contido na varivel calculo foi enviado de volta para a chamada da funo. Na chamada da funo fez-se a
atribuio do valor retornado sobre ela para a varivel result.
10. Strings

JavaScript armazena Strings como objetos do tipo String. Os objetos possuem mtodos e propriedades,
genericamente, tudo o que o objeto pode fazer (ao) e tudo o que o objeto possui (caractersticas).

10.1. Objeto Strings

Podemos criar objetos String de duas formas (vide exemplos a seguir): da primeira forma ns j
criamos, para criarmos de acordo com a segunda forma, vamos utilizar a sintaxe oficial de objetos:

1. teste = Isto um teste;

2. teste = new String(Isto um teste);

Na segunda forma utilizamos a palavra-chave new, solicitando ao navegador que crie um novo objeto do
tipo String contendo o texto Isto um teste e atribua-o varivel teste.

Podemos utilizar o operador de concatenao para combinar valores de duas Strings:

teste1 = Isto um teste. ;
teste2 = Somente um teste;
teste3 = teste1 + teste2;
alert(teste3); // O resultado exibido ser: Isto um teste. Somente um teste

Podemos utilizar tambm o operador =+ para adicionar contedo em uma string:

teste3 =+ !; // Esta instruo adiciona uma exclamao ao contedo atual da string teste3.

Javascript

18
10.2. Comprimento de String - length

Para saber quantos caracteres uma varivel de String armazena podemos utilizar a propriedade length
do objeto String. Digitamos o nome do objeto String seguido por .length:

frase = Este o meu Brasil.;
document.write(frase.length); //A String frase possui 20 caracteres.

Os espaos tambm so includos na contagem de caracteres.

10.3. Converso de String toUpperCase( ) e toLowerCase( )

Existem dois mtodos que convertem o texto de caixa alta para caixa baixa. So eles:
toUpperCase( ) - Converte todos os caracteres em letras maisculas.
toLowerCase( ) - Converte todos os caracteres em letras minsculas.

Exemplos:

1. frase1 = Ouvindo voc esquece. Lendo voc aprende. Fazendo, voc sabe!;
alert(frase1.toUpperCase( ));

Exibe: OUVINDO VOC ESQUECE. LENDO VOC APRENDE. FAZENDO, VOC SABE!

2. alert(frase1.toLowerCase( ));

Exibe: ouvindo voc esquece. lendo voc aprende. fazendo, voc sabe!

10.4. Substrings substring( )

O JavaScript nos permite trabalhar com substrings ou seja, partes de uma String.
O mtodo substring( ) retorna uma parte da string original, formando uma outra String.
A substring localizada a partir de dois ndices, de incio e fim, informados entre os parnteses:

Formato: objeto.substring(ii,if+1); sendo: ii ndice inicial e if ndice final (mais 1).

Exemplo:

frase2 = Os seus olhos;
0 1 2 3 4 5 6 7 8 9 101112
document.write(frase2.substring(3,7); //Imprime a substring: seus.

Cada caractere possui um ndice.
Os ndices so seqenciais e iniciam-se em zero (0).
Espaos em branco tambm possuem ndices.
O primeiro ndice do mtodo indica o incio da substring;
O segundo ndice indica o trmino da substring e exclusive.
Os ndices podem aparecer em qualquer ordem, o menor ser assumido como o inicial.
Sempre que os dois ndices forem iguais o resultado ser uma string vazia.
Javascript

19
10.5. Obtendo um nico Caractere - charAt( )

O mtodo charAt( ) obtm um nico caractere de uma string:
palavra = Crepsculo;
document.write(palavra.charAt(3); //Imprime a letra p.

0 (zero) o ndice inicial da String.
O mtodo charAt() obtm o caractere correspondente ao ndice indicado entre parnteses.

10.6. Localizando uma Substring - indexOf( )

Uma boa utilizao de subtrings localizar uma string dentro de outra String.
Podemos fazer isto atravs do mtodo indexOf( ). Exemplo:

frase3 = Brasil, meu Brasil brasileiro...;
ind = frase3.indexOf(Brasil);
document.write(ind); //Imprime o ndice inicial da substing: 0.

Entre os parnteses indicamos a substring que queremos localizar no texto.
Ateno com as letras maisculas, minsculas e acentos!!
O mtodo retornar o ndice inicial da substring pertencente ao texto.
Se a substring no for localizada, retornar o valor negativo 1.

Voc pode especificar um segundo parmetro (opcional) para indicar o ndice inicial da procura, a partir
do qual comear a pesquisa. Exemplo:

document.write(frase3.indexOf(Brasil,1)); //Imprime ndice:12.

10.7. Localizando a ltima Ocorrncia de uma Substring lastIndexOf( )

O mtodo lastIndexOf() pesquisa uma substring iniciando a busca a partir do ltimo caractere da string:

document.write(frase3.lastIndexOf(Brasil)); //Imprime ndice:12.

Neste caso, tambm podemos especificar um segundo parmetro (opcional) para indicar o ndice inicial
da prxima procura. Exemplo:

document.write(frase3.lastIndexOf(Brasil,11)); //Imprime ndice:0.

Podemos salvar os ndices em variveis para utilizarmos como parmetros na localizao das prximas ocorrncias
da substring, adicionando 1(um) para avanar na varredura da string ou subtraindo 1(um) para retroceder.

Javascript

20
11. Teste e Comparao de Valores

Agora voc poder utilizar melhor as variveis comparando, testando e avaliando seus valores com as
ferramentas fornecidas pelo JavaScript.

11.1. Instruo if/else

O if a instruo condicional principal do JavaScript. Esta instruo tem o mesmo significado da
palavra em ingls: se.

Exemplo:

a = 5;
if (a > 2) alert(a maior que 2); //Exibe a mensagem a maior que 2.

Esta instruo inclui uma condio entre os parnteses (a > 2). Se a condio for verdadeira, a
sentena que se segue: alert(a maior que 2)ser executada; caso contrrio, no faz nada e
o JavaScript pula para o prximo comando aps o ponto e vrgula.
Mltiplas instrues tambm podem ser escritas se includas entre chaves ({ }).

if (a > 2) {
alert(a maior que 2);
b=a;
}

O else (seno) trata o caso contrrio, ou seja, se condio for falsa:
if (a > 2) {
a = 0;
}
else
alert(a menor ou igual a 2); //Ser executada se a no for maior que 2.

No caso de vrias aes no else, inclua as sentenas entre chaves:

if (a > 2) {
a = 0;
}
else {
alert(a menor ou igual a 2);
a=5;
}

Outros operadores podem ser utilizados em comparaes, como os lgicos && (e) e o || (ou):
1. x = 2, y = 3;
if (x == 2 && y == 3) z = x + y; //O valor da varivel z ser 5.
Executar a sentena se as duas condies forem verdadeiras.
Javascript

21
2. x = 2, y = 4;
if (x == 2 || y == 4) w = x + y; //O valor da varivel w ser 5.
Executar a sentena se pelo menos uma das condies for verdadeira.

11.2. Expresso Condicional

Esta uma expresso utilizada para se tomar decises rpidas, tambm encontrada em outras
linguagens como C.

Formato:

Varivel = (condio) ? sentena_verdade : sentena_falso;

Se a condio for verdadeira, a expresso executar a sentena_verdade e, opcionalmente, salvar o
resultado na varivel indicada; caso contrrio, executar a sentena_falso e, opcionalmente, salvar o
resultado na mesma varivel.

11.3. Instruo switch( )

O JavaScript possui a instruo switch que permite combinar vrios testes da mesma varivel ou
expresso em um nico bloco de instrues.

dia_semana = 5;
switch (dia_semana) {
case 0 : document.write(Domingo);
break;
case 1 : document.write(Segunda-feira);
break;
case 2 : document.write(Tera-feira);
break;
case 3 : document.write(Quarta-feira);
break;
case 4 : document.write(Quinta-feira);
break;
case 5 : document.write(Sexta-feira); //Ser impresso Sexta-feira.
Break;
case 6 : document.write(Sbado);
break;
default : alert( Dia da semana invlido!);
}

A varivel que ter o seu valor testado dever estar entre os parentes da instruo switch;
As sentenas do switch devero estar contidas entre as chaves ({ }).
Cada instruo case possui um valor especfico que ser comparado com o valor da varivel. Se o
valor do case corresponder ao da varivel, as instrues aps os dois pontos (:) sero executadas;
caso contrrio, o prximo case ser testado.
A instruo break colocada em cada case. Se um dos casos for satisfeito, ento o switch
poder ser finalizado.
O default opcional. Se nenhuma das instrues case for satisfeita, as instrues do default
sero executadas.
Javascript

22
12. Array

Uma Matriz ou Array permite armazenar vrios dados separadamente dentro de uma nica varivel,
formando um conjunto. Usualmente, todos esses dados possuem um esquema de conexo.
Os Arrays simplificam o seu cdigo porque diminui o nmero de variveis que voc poderia criar, com
nomes similares. (Ex.: dias da semana).

Domingo Segunda-feira Tera-feira Quarta-feira Quinta-feira Sexta-feira Sbado
0 1 2 3 4 5 6
Cada elemento de uma clula chamado de elemento. Por exemplo, o Array dos dias da semana possui
7 (sete) elementos. Cada elemento identificado atravs de um ndice conforme a sua posio.
Podemos acessar os valores de cada elemento atravs dos ndices. O valor do ndice inicial 0 (zero).
Array um Objeto do JavaScript, todo novo objeto do tipo Array dever ser criado a partir deste Objeto
modelo, adquirindo assim a sua estrutura.

12.1. Criando um Array Numrico

Os Arrays podem conter strings, nmeros, objetos ou outros tipos de dados.

Exemplo:
notas = new Array(5);
notas[0] = 8.5;
notas[1] = 5.0;
notas[2] = 10.0;
notas[3] = 9.0;
notas[4] = 4.5;

A palavra-chave new define a varivel notas como um novo objeto do tipo Array, notas agora
possuir todas as propriedades e mtodos do objeto Array;
O nmero entre parnteses indica a quantidade de elementos do Array, no caso 5;
O ndice do primeiro elemento 0 (zero);
Para atribuirmos valores aos elementos, utilizarmos o nome do Array seguido do ndice
correspondente ao elemento, inserido entre colchetes ([ ]):
notas[0] = 8.5;
notas[1] = 5.0;
...

12.2. Acessando os Elementos do Array

Para ler o contedo de um Array s utilizar a mesma notao que se utilizou na atribuio de
valores.

A seguinte instruo exibe os valores dos primeiros trs elementos do Array notas:
document.write(Notas: + notas[0] + , + notas[1] + e + notas[2]);
Javascript

23
12.3. Criando Arrays de Strings

Criamos Arrays de Strings da mesma forma que o Array numrico, apenas atribuindo valores do tipo
String.

Exemplo:

dia_semana = new Array(7);
dia_semana[0] = Domingo;
dia_semana[1] = Segunda-feira;
dia_semana[2] = Tera-feira;
dia_semana[3] = Quarta-feira;
dia_semana[4] = Quinta-feira;
dia_semana[5] = Sexta-feira;
dia_semana[6] = Sbado;

Esses elementos de Array podem ser utilizados em qualquer lugar que se utilizaria uma string. Podendo
at utilizar os mtodos e propriedade do objeto String introduzidos anteriormente.

Exemplo:

nomes = new Array(10);
nomes[0] = Ana Cristina;
nomes[1] = Pedro Jos;
document.write(nomes[1].substring(6,10)); //Imprime Jos.

12.4. Criando Arrays Rapidamente

Eis uma forma muito rpida de criar exatamente o mesmo Array do exemplo anterior:

dia_semana = new Array(Domingo,Segunda-feira,Tera-feira,
Quarta-feira,Quinta-feira,Sexta-feira,Sbado);

O Array foi criado e invs de indicarmos a quantidade de elementos que ele dever possuir,
informamos o contedo de cada elemento na sua respectiva ordem de ndice.
O acesso aos elementos igual ao do Array anterior.

Obs. Importante: Devemos digitar o contedo dos parnteses sem quebra de linha!

12.5. Verificando a Quantidade de Elementos de um Array

Assim como o objeto String, Array tambm possui a propriedade length, s que ela informa o nmero de
elementos pertencentes ao Array (o que til no caso de voc criar um Array sem informar o tamanho e
solicitar ao usurio que entre com a quantidade de dados).

Exemplo:

pontos = new Array(20);
document.write(pontos.length); //Ser impresso 20.
Javascript

24
12.6. Dividindo uma String e Armazenando-a em um Array split( )

O mtodo split( ) divide uma String a partir de um caractere especificado entre os parnteses, gerando
outras Strings que sero armazenadas em um Array.

Exemplo:

nome = Guilherme Henrique Santos;
partes = nome.split( );

O mtodo split( ) dividiu a String nome em substrings a partir dos espaos encontrados.
A varivel partes se tornou um Array contendo as substrings em seus elementos:

document.write(partes[0]); // Imprime Guilherme
document.write(partes[1]); // Imprime Henrique
document.write(partes[2]); // Imprime Santos

Voc pode utilizar a propriedade length neste caso para verificar a quantidade de elementos do Array partes.

Exemplo:

alert(partes.length); // Exibir 3.

Resumindo: O mtodo split() transforma Strings em Arrays.

12.7. Remontando um Array em uma String join( )

O mtodo join( ) remonta um Array gerando uma String, a partir da juno de seus elementos.

As substrings contidas nos elementos do Array partes sero separadas (dentro da String gerada)
pelo caractere contido entre os parnteses do join().
Caso o caractere de separao no seja informado, as vrgulas sero utilizadas.

A instruo abaixo remonta o Array partes atribuindo o resultado gerado a String inteiro.

inteiro = partes.join( );
alert(inteiro); //Exibir: Guilherme Henrique Santos

Resumindo: O mtodo join() transforma Arrays em Strings.

12.8. Classificando Elementos de um Array

O mtodo sort( ) retorna uma verso classificada do Array (alfabtica ou numrica).

Exemplo:

nomes = new Array(Rafael, Joaquim, Joo, Ana);
nomes_classif = nome.sort( );
document.write(nomes_classif); // Imprimir: Ana, Joaquim, Joo, Rafael
Os nomes podero ser acessados separadamente atravs de seus ndices em nomes_classif:
alert(nomes_classif[2]); // Exibir Joo
Javascript

25
13. Loops

O JavaScript possui recursos que fazem o computador desempenhar tarefas repetitivas para voc.

13.1. Loop for

O loop for o primeiro que utilizaremos para criar loops (laos, voltas ou repeties).

Exemplo:

for (i = 1; i < 5; i++){
document.write(Esta a linha ,i, <br>);
}

Resultado: Esta a linha 1
Esta a linha 2
Esta a linha 3
Esta a linha 4

Tags de HTML podem ser inseridas na instruo document.write() (entre aspas) como tambm podem ser
concatenadas com dados em JavaScript.
Vrgulas (,) podem ser utilizadas para concatenar no lugar do caractere mais (+).

Analisando o Exemplo anterior:

A primeira parte da instruo (i = 1) chamada de expresso inicial, porque estabelece o estado
inicial do loop especificando uma varivel e atribuindo um valor inicial a ela.
A expresso executada apenas uma nica vez, no incio do loop.
O segundo parmetro (i < 5) uma condio que deve permanecer verdadeira para manter o loop
executando (l-se: enquanto i for menor que 1).
Esta instruo chamada de condio do loop. Se a condio for falsa, o loop encerrado.
O terceiro parmetro (i++) uma instruo que executada no final de cada iterao (volta) do
loop, aps a execuo do bloco de instrues.
Esta instruo chamada de expresso de incremento, porque normalmente utilizada para
incrementar o contador.
Aps a especificao dos trs parmetros, um conjunto de sentenas envoltas por chaves escrito
para ser executado a cada iterao do loop, no caso da condio for verdadeira.

Comentando o exemplo: inicialmente i recebe o valor 1; a condio testada: se verdade que i
menor que 5, a instruo document.write(Esta a linha ,i,<br>) executada;
adicionado 1 em i; (fim da primeira iterao).
Verifica-se novamente a condio, enquanto i for menor que 5 o loop continua, caso contrrio, o loop
encerrado.

Javascript

26
13.2. Loop while

Diferente do loop for, o loop while no necessita obrigatoriamente de um contador para control-lo, em
vez disso, ele executa enquanto (while) uma condio for verdadeira. Se a condio iniciar como falsa,
as instrues no sero executadas.

Exemplo:

valor = new Array(3,2,4,1,5);
i = 0;
total = 0;
while (total < 10){
total += valor[i];
i++;
}
document.write(Total = + total); //Resultado: Total = 10

A condio da instruo while deve estar entre parnteses, ela testada no incio do loop;
Bloco de instrues fica entre chaves.

Comentando o exemplo: Inicialmente a condio testada; Enquanto o contedo da varivel total
for menor que 10, i ser incrementado em 1 e servir de ndice para o Array valor, que ter seu
contedo acumulado em total. Caso contrrio, se total for maior ou igual a 10, o loop ser
encerrado.

Podemos utilizar contadores para controlar o loop, ele deve ser declarado antes do loop e ser incrementado no
bloco de instrues.

13.3. Loop do...while

O terceiro loop o do...while (faa...enquanto). A diferena em relao ao loop while que no
do...while, a condio testada no final do loop, portanto, as instrues inseridas no do so executadas
pelo menos uma vez.

Exemplo:

valor = new Array(3,2,4,1,5);
cont = 0;
total = 20;
do {
total += valor[cont];
cont++;
}
while (total < 10)

document.write(Total = + total); //Resultado: Total = 23

O bloco de instrues deve estar inserido entre chaves aps o comando do (faa);
A condio, inserida entre parnteses, testada no final do loop.
Javascript

27
13.4. Loop for...in

Este loop especificamente projetado para desempenhar uma operao em cada propriedade de um
objeto. O for...in tambm muito til para trabalhar com Arrays.

Exemplo:

nomes = new Array("Jonas", "Ana", "Ruth", "Tiago", "Marcos");
document.write("<ol>");
for (i in nomes) {
document.write("<li>"+nomes[i]+ "<br>");
}
document.write("</ol>");

Resultado: 1. Jonas
2. Ana
3. Ruth
4. Tiago
5. Marcos

i uma varivel de ndice iniciada em zero e incrementada de 1 em 1 automaticamente;
nomes o Array que ter seus elementos acessados atravs do ndice i;
O loop encerrado quando o ltimo elemento do Array for acessado.

Comentando o exemplo: No incio do exemplo foi criado um Array de nomes e iniciada uma lista
ordenada em HTML; no loop, a instruo for (i in nomes) utilizou o ndice i para acessar os
elementos do Array nomes; a instruo document.write(<li>+nomes[i]+<br>), entre as
chaves, executada a cada iterao do loop, imprimindo um elemento do Array como um item da lista
ordenada; Aps o termino do loop, a lista HTML foi finalizada.

13.5. Criando um Loop Infinito

Os loops for e while permitem bastante controle sobre o loop. Em alguns casos, isso pode causar
problemas se voc no tiver cuidado.

Exemplo:

j=0, n=0;
while (j < 10) {
n++;
document.write(" n = " + n);
}

H um equvoco neste exemplo. A condio do loop while refere-se varivel j, mas essa varivel no
se altera durante o loop, isso cria um loop infinito! O loop continua sendo executado at que seja
interrompido pelo usurio, que gere algum tipo de erro ou at mesmo que provoque uma pane no
sistema.

Loops infinitos no so identificados pelo JavaScript, certifique-se de que h uma sada para o seu loop.
Javascript

28
13.6. Escapando de um Loop Infinito

H uma maneira de escapar de um loop infinito, saindo imediatamente dele e continuando a execuo
do script a partir da primeira instruo aps o loop. Voc pode usar a instruo break associada a uma
condio includa nas sentenas do loop.

Exemplo:

valor = new Array(2,6,5,3,10,22,35);
n=-1;
while (true) {
n++;
if (valor[n]==10) break;
document.write(valor[n]+"<br>");
}

Comentando o exemplo: A instruo while define o loop como infinito, por causa do true
(verdade) especificado na condio do while, portanto, enquanto for verdade, o loop continua sendo
executado.
A instruo condicional if verifica se algum dos valores dos elementos do Array igual a 10, se for, o
loop encerrado.

13.7. Desprezando uma Iterao de um Loop

Uma outra instruo disponvel para controlar a execuo de um loop o continue. Ele despreza as
sentenas que vierem aps ele, continuando a execuo do loop a partir da prxima iterao.

Exemplo:

j=0;
pontos = new Array(5,0,4,2,0,7,0,8,1,6);
for (i = 0; i < 10; i++) {
j=i;
if (pontos[i] == 0) continue;
document.write("Atleta nmero ",++j," - pontos: ",pontos[i],"<br>");
}

Comentando o exemplo: Neste exemplo criamos um Array com os valores dos elementos j
atribudos. No loop, a varivel i iniciada com o valor 0 (zero); a condio estabelece que o loop deve
ser executado enquanto i for menor que 10. A cada iterao, as instrues entre as chaves so
executadas; para os elementos do Array cujos pontos forem iguais a 0 (zero), a instruo continue
faz com que a instruo document.write(...) seja desprezada (no executada) e o loop continue a
partir da prxima volta; para os elementos cujos valores forem diferentes de zero, uma linha com o
nmero do atleta e os pontos obtidos por ele impressa atravs do document.write(); ao final de
cada iterao i acrescido em 1.

Javascript

29
14. Objetos Embutidos

Objetos embutidos so aqueles que existem automaticamente em qualquer programa JavaScript.
Possuem propriedades e mtodos (funes intrnsecas, ou embutidas).
A sintaxe geral para utilizao dessas funes :

resultado = funo(informao a ser processada);

Exemplificaremos utilizando a funo eval() do objeto Math, que calcula o contedo de uma String.

Exemplo:

1. resultado = eval("(10 * 20) + 2 - 8"); // O valor de resultado ser 194.

2. calculo1 = ("3*6+2");
resultado = eval (calculo1); //O valor de resultado ser 20.

A string calculo1 tambm pode ser o contedo de uma caixa de texto.

parseInt() e parseFloat(), assunto que j abordamos anteriormente, tambm fazem parte das funes
intrnsecas (convertem Srings em nmeros e em nmeros com ponto flutuante, respectivamente).

14.1. Objeto Math

O objeto Math traz para o JavaScript toda a funcionalidade e constantes matemticas bsicas que voc
pode utilizar atravs de suas propriedades e mtodos embutidos.

14.1.1. Propriedades e Funes Matemticas

So aquelas tipicamente matemticas:

Propriedades Descrio
Math.E
Retorna a base dos logaritmos naturais
(aproximadamente 2.718).
Math.LN2
Retorna o valor do logaritmo de 2
Math.LOG2E
Retorna a base do logaritmo de 2
Math.LN10
Retorna o valor do logaritmo de 10
Math.LOG10E
Retorna a base do logaritmo de 10
Math.SQRT2
Retorna a raiz quadrada de 2
Math.SQRT_2
Retorna a raiz quadrada de 1/2
Math.PI
retorna o valor de PI
Javascript

30
Exemplo:

val_pi = Math.PI;
alert(val_pi); // Exibe 3.141592653589793

Mtodos Descrio
Math.abs(nmero)
Retorna o valor absoluto do nmero
(ponto flutuante).
Math.pow(base, expoente)
Retorna o clculo do exponencial.

Math.max(nmero1, nmero2)
Retorna o maior nmero entre os fornecidos.

Math.min(nmero1, nmero2)
Retorna o menor nmero entre dos dois
fornecidos.
Math.sqrt(nmero)
Retorna a raiz quadrada do nmero.

Math.sin(nmero)
Retorna o seno de um nmero
(anglo em radianos).
Math.asin(nmero)
Retorna o arco seno de um nmero
(em radianos).
Math.cos(nmero)
Retorna o cosseno de um nmero
Math.acos(nmero)
Retorna o arco cosseno de um nmero
(em radianos).
Math.tan(nmero)
Retorna a tangente de um nmero
Math.atan(nmero)
Retorna o arco tangente de um nmero
(em radianos).
Math.log(nmero)
Retorna o logartmo de um nmero.

Obs.: Em todos os mtodos, a expresso "(nmero)" refere-se a um argumento que ser processado pela
funo e que poder ser um nmero, uma varivel ou o contedo de um objeto (propriedade value).

Exemplo:

base = 3;
expoente = 2;
resultado = Math.pow(base,expoente);
document.write(resultado); //Imprime 9.

14.1.2. Arredondando e Truncando Valores

Mtodos Descrio
Math.ceil(nmero)
Retorna o prximo valor inteiro maior que o
nmero.
Math.floor(nmero)
Retorna o prximo valor inteiro menor que o
nmero.
Math.round(nmero)
Retorna o valor inteiro do nmero, arredondado.

Javascript

31
Exemplo:

x = 3.46;
document.write(Math.ceil(x)+<br>"); // Imprime 4.
document.write(Math.floor(x)+<br>"); // Imprime 3.
document.write(Math.round(x)+<br>"); // Imprime 3.

14.1.3. Criando Nmeros Pseudo-Aleatrios

Mtodos Descrio
Math.random()
Retorna um nmero decimal entre 0 e 1 aleatrio
(no exige nenhum parmetro).

Exemplos:

1. alert(Math.random()); // Vai exibir um nmero aleatrio entre 0 e 1,
// Exemplo: 0.7149896088624416
2. num=5;
valor= Math.floor(Math.random() * num) + 1;
document.write(valor); // Imprime um nmero aleatrio entre 1 e 5.

Comentando o exemplo 2: Esta funo multiplica um nmero aleatrio (Math.random()) pelo valor
que voc passa para ela (num = 5) e depois o converte em um inteiro entre 1 (+1) e o nmero
indicado, utilizando o mtodo Math.floor().

14.2. Trabalhando com Nmeros

14.2.1. Criando um objeto Number

Construtor Descrio
new Number(n)
Construtor de objetos Number
Number(n)
Converte um valor em nmero

Exemplos:

1. num = new Number(23); //A varivel num recebe 23.
document.write("Tipo de objeto: "+ typeof(num)+" = "+num);

2. num = new Number("23"); //Apesar das aspas, num numrico.
document.write("Tipo de objeto: "+ typeof(num)+" = "+num);

14.2.2. Verificando se o contedo de uma varivel numrico

Mtodos Descrio
isNaN(varivel)
Verifica se no um nmero (Not a Number).

num = "a23.45";
(isNaN(num))?alert(num+"-True, no nmero"):alert(num +"-False, nmero");
//Exibe: a23.45 no numrico
Javascript

32
14.2.3. Fixando o Nmero de Algarismos aps a Casa Decimal

Mtodos Descrio
Number.toFixed(algarismos)
Fixa (e arredonda) o nmero de algarismos a
serem exibidos aps a casa decimal.

Exemplo:
x = 3.4656;
document.write(x.toFixed(2)); // Arredonda e imprime com 2 casas: 3.47.

14.2.4. Convertendo um nmero em String

Mtodos Descrio
Number.toString(base)
Converte um nmero em String, utilizando uma
base (opcional) entre 2 e 36.

Exemplos:

a=240;

1. document.write(typeof(a.toString())); //Imprime: string

2. document.write(a.toString(16)); //Imprime: f0

3. document.write(a.toString(2)); //Imprime: 11110000

14.3. Objeto Date

Date um objeto embutido do JavaScript que trabalha convenientemente com datas e horas. O objeto
Date no possui propriedades, s mtodos.

As datas so armazenadas em milsimos de segundos desde a meia-noite de 1
o
de Janeiro de 1970.

14.2.1. Criando um Objeto Date

Um objeto Date criado a partir da palavra-chave new. Opcionalmente podemos especificar a data que
queremos armazenar no objeto quando o criamos. Podemos utilizar qualquer um dos seguintes
formatos:

Hoje = new Date( ); //Armazena a data corrente
natal = new Date(December 25, 2020 00:00:00); //mm, dd, aa, hh, mm e ss
natal = new Date(12, 25, 2020); //mm, dd e aa
natal = new Date(12, 25, 2020, 0, 0, 0); //mm, dd, aa, hh, mm e ss

Se parmetros no forem informados entre os parnteses, como no primeiro exemplo, a data atual
obtida a partir da data do sistema operacional do computador do usurio armazenada no objeto.

Javascript

33
14.3.2. Alterando Valores de Datas

Uma variedade de mtodos .set permite configurar componentes de um objeto Date:

Mtodo Descrio
.setDate( )
Estabelece dia do Ms.
.setMonth( )
Estabelece o Ms. (Valores de 0 11; Janeiro = 0).
.SetDay( )
Estabelece o dia da Semana ( Valores de 0 6; Domingo = 0).
.setYear( )
Estabelece o Ano. (2 dgitos)
.setFullYear( )
Estabelece o Ano. (4 dgitos)
.setTime( )
Estabelece a Hora (e a data) em milsimos de segundos.
.setHours( )
Estabelece a Hora.
.setMinutes( )
Estabelece os Minutos.
.SetSeconds( )
Estabelece os Segundos.

Exemplo:

hoje = new Date( ); //Acessa a data do sistema operacional
hoje.setFullYear(2020); //Altera o ano para 2020
alert(hoje);

A caixa de alerta exibir o resultado no formato String, (e em ingls), exibindo o dia da semana, mes,
dia, horas, fuso horrio e ano. Se o alert() fosse executado no momento da configurao da data, o
resultado seria em milsimos de segundos.

Exemplo:

alert(hoje.setYear(2020)); //Resultado: 1587767807656

14.3.3. Obtendo Valores de Datas

O mtodo .get obtm valores de um objeto Date.

Mtodo Descrio
.getDate( )
Obtm o dia do Ms.
.getMonth( )
Obtm o Ms. (Valores de 0 11; Janeiro = 0).
.getDay( )
Obtm o dia da Semana ( Valores de 0 6; Domingo = 0).
.getYear( )
Obtm o Ano. (2 dgitos)
.getFullYear( )
Obtm o Ano. (4 dgitos)
.getTime( )
Obtm a Hora (e a data) em milissegundos.
.getHours( )
Obtm a Hora.
.getMinutes( )
Obtm os Minutos.
.getSeconds( )
Obtm os Segundos.

Exemplo:

hoje = new Date(Apr 24 2020);
dia = hoje.getDate( );
alert(dia); //Exibir: 24.
Javascript

34
14.3.4. Trabalhando com Fuso Horrio

Algumas funes esto disponveis para ajudar os objetos Date a trabalhar com valores de hora local e
fuso horrio:

Mtodo Descrio
.getTimezoneOffset( )
Fornece a diferena entre o fuso horrio local e o GMT
(Greenwich Mean Time ou UTC), em minutos.
.toGMTString( )
Converte o valor de hora do objeto Date em texto, utilizando o
GMT.
.toLocaleString( )
Converte o valor de hora do objeto Date em texto, utilizando a
hora local.

Exemplo:

hoje = new Date(Apr 24 2020 00:00:00);
alert(hoje.getTimezoneOffset( )); //Exibir: 180. (*)
alert(hoje.toGMTString( )); //Exibir: Fri, 24 Apr 2020 03:00:00 UTC
alert(hoje.toLocaleString( )); //Exibir: Sext-feira, 24 de abril de 2020 00:00:00

* - No horrio de vero, este valor sofre alterao (120 em So Paulo)

14.3.5. Convertendo Formatos de Data

Mtodo Descrio
Date.parse(string)
Converte uma string de data em um objeto Date.
(nmero de milsimos de segundos desde 01/01/1970).
Date.UTC(valor)
Converte um valor de objeto Date (nmero de milsimos de
segundos) em uma hora UTC (GMT).

Exemplo:

document.write(Date.parse("Apr 20, 1996")); //Imprime: 829969200000

15. Instruo with

A instruo with, permite criar uma instruo para um objeto, reduzindo assim a digitao.

Exemplo sem o with:

n1 = prompt( Entre com um nmero,);
alert(O maior nmero digitado foi: + Math.max(n1, n2, n3));
alert(O menor nmero digitado foi: + Math.min(n1, n2, n3));

Javascript

35
Exemplo o with:

n1 = prompt("Entre com 0 nmero 1","");
with (Math){
alert("O maior nmero digitado foi o: " + max(n1, n2, n3));
alert("O menor nmero digitado foi o: " + min(n1, n2, n3));
}

Com a instruo with no precisamos digitar o nome do objeto (Math) para utilizar seus mtodos.
16. Tratadores de Eventos

Neste captulo voc aprender a utilizar uma ampla variedade de handlers (tratadores) de eventos
suportados pelo JavaScript. Em vez de executar na ordem da codificao, os scripts que utilizam
handlers de evento podem ser executados a partir da ao do usurio. Esses eventos so aqueles que o
usurio pode gerar atravs do mouse, teclado e outros eventos especializados. Voc adiciona um
atributo de handler de evento em uma tag de HTML (boto, link, janela, imagem etc.) e insere o script
em Javascript entre aspas, os scripts so executados da ao do evento.

Por conveno, destacamos em maisculo as letras iniciais referentes aos eventos, mas no fazem parte
da sintaxe, portanto, os tratadores de eventos podem ser todos digitados em minsculo.

16.1. Respondendo a Eventos

A seguir, voc conhecer uma lista de tratadores de eventos que podero ser utilizados com
moderao, ou seja, somente se necessrio, visto que muitos tratadores de eventos atrapalham a
navegao, irritando os usurios. Cuidado com o tipo de aspas utilizado ( /)!!!

16.1.1. onClick

O evento ocorre quando o usurio clica no boto esquerdo do mouse sobre algum elemento do
documento:

<body>
<input type="button" value="No clique!" onclick="alert('Voc clicou!!')">
</body>

16.1.2. onDblClick

O evento ocorre quando o usurio d um clique duplo sobre algum elemento do documento.

<body>
<b ondblclick="alert('Voc clicou duas vezes!');>
D um duplo clique aqui!
</b>
</body>

Javascript

36
O tratamento que ser dado como resposta ao evento deve ser digitado entre aspas. Neste exemplo utilizamos
uma caixa de alerta, o seu contedo deve vir entre apstrofes e no aspas para no finalizar incorretamente o
tratador de eventos.

16.1.3. onMouseDown

O evento ocorre quando o usurio pressiona o boto esquerdo do mouse sobre um objeto apropriado. O
handler bsico de evento o onClik.

<body>
<input type="button" value="Boto"
onMouseDown="alert('Boto pressionado!');">
</body>

16.1.4. onMouseUp

O evento ocorre quando o usurio libera o boto do mouse que estava pressionado sobre um objeto.

<body>
<input type="button" value="Boto"
onMouseUp="alert('Boto liberado!');">
</body>

16.1.5. onMouseOver

O evento ocorre quando o usurio passa com o ponteiro do mouse sobre um link, imagem ou outro
objeto que se encontra dentro no documento.

<body>
<a href="#" onMouseOver="alert(Ponteiro sobre o link);"> link1 </a>
</body>

16.1.6. onMouseOut

O evento o oposto do anterior, ocorre quando o ponteiro do mouse movido para fora da borda do
objeto. Geralmente utilizamos o onMouseOut associado ao onMouseOver (podemos criar com eles
efeitos de animao utilizando duas imagens que ocupando o mesmo espao, se alternam ao passarmos
com o ponteiro do mouse sobre elas.

<body>
<a href="#" onMouseOut="alert(Ponteiro fora do link);"> link2 </a>
</body>

16.1.7. onMouseMove

O evento ocorre quando o usurio move o mouse sobre o documento. Geralmente ele vem desabilitado
por controlar o ponteiro do mouse do usurio o tempo todo. O resultado deste exemplo ser exibido na
linha de status do navegador (rodap).

Javascript

37
<head>
<script>
function moveu() {
window.status = "Coordenadas do mouse: X = "+ event.x + "Y = " + event.y;
}
</script>
</head>
<body onMouseMove="moveu();">
</body>

16.1.8. onLoad

O evento ocorre quando todas as imagens da pgina corrente terminam de ser carregadas.

<body onLoad="alert(Que bom que voc veio!);">

16.1.9. onUnLoad

O evento ocorre quando o usurio sai da pgina atual.

<body onUnLoad="alert(No se v!);">

16.1.10. onHelp

O evento ocorre quando o usurio pressiona a tecla F1 para ajuda. Voc pode cancelar o evento padro
usando a propriedade event.returnValue e definindo-a como false.

<head>
<script>
function ajuda( ){
alert(Eu tambm no sei!);
event.returnValue = false;
}
</script>
</head>
<body onHelp = ajuda( );>

16.1.11. onStop

O evento ocorre quando o usurio clica no boto Stop do Navegador.

<head>
<script>
function pare( ){
alert(Porque parou? Parou porque?);
}
</script>
</head>
<body onStop = pare( );>

Javascript

38
16.1.12. onContextMenu

O evento ocorre quando o usurio d um clique no boto direito do mouse na rea do documento para
abrir o menu de contexto. Voc pode cancelar o evento padro usando a propriedade event.returnValue
e definindo-a como false.

<head>
<script>
function menu( ){
alert(Pirataria no!);
}
</script>
</head>
<body onContextMenu = menu( );>

16.1.13. onAbort

O evento ocorre se o usurio abortar a pgina antes da imagem ser carregada.

<body>
<img src="imagem.gif" onAbort="alert('Disse a imagem: -No me aborte!');">
</body>

16.1.14. onError

O evento ocorre quando o arquivo de imagem no encontrado ou est corrompido.

<body>
<img src="imagem.gif" onError="alert('Imagine uma bela imagem aqui...');">
</body>

16.1.15. onKeyDown

O evento ocorre sempre que o usurio pressionar uma tecla.

<head>
<script>
function clique(){
tecla = String.fromCharCode(event.keyCode);
window.status="Voc pressionou a tecla " + tecla;
}
</script>
</head>
<body onKeyDown="clique();">

Neste exemplo, quando a tecla pressionada o caractere capturado alterado em relao ao formato
padro Unicode (nmeros usado para representar caracteres) para caracteres reais, usando
String.fromCharCode(event.keyCode). Ento os caracteres so mostrados na barra de status do
navegador.
Javascript

39
16.1.16. onKeyUp

Ao contrrio do anterior, este evento ocorre quando o usurio solta a tecla.
(Utilizando o script anterior).

<body onKeyUp="clique();">

16.1.17. onKeyPress

O evento ocorre quando o usurio pressiona uma tecla alfanumrica.
(Utilizando o script anterior).

<body onKeyPress="clique();">

16.1.18. onResize

O evento ocorre quando o usurio redimensiona a pgina ou frames (quadros).

<body onResize="alert(Melhor no mexer!);">
</body>

16.2. Objeto event

O event um objeto especial que enviado para um handler de evento cada ocorrncia. O handler de
evento recebe esse objeto como um parmetro. As propriedades do objeto event oferecem mais
informaes sobre o evento que ocorreu. As propriedade disponveis so:

type Tipo de evento que ocorreu, como mouseover.
target Objeto de destino para o evento (como o documento ou um link).
which Valor numrico que especifica o boto do mouse que foi clicado para eventos de
mouse ou a tecla que foi pressionada para eventos de teclado.
modifiers Lista de chaves de modificador que foram pressionadas durante um evento de
teclado ou de mouse (como Alt, Ctrl e Shift).
data Lista de dados arrastados e soltos para eventos de arrastar e soltar.
x e y Posio x e y do mouse quando ocorreu o evento, medida a partir do canto
superior esquerdo da pgina.
screenX Posio X do mouse , medida do canto superior esquerdo da tela.
screenY Posio Y do mouse , medida do canto superior esquerdo da tela.
keyCode Cdigo ASCII da Tecla pressionada.

Exemplo:

<script>
function coord( ){
window.status=Coord. X = + event.x + Coord. Y = + event.y;
// Exibe as coordenadas x, y do mouse na linha de status do navegador.
</script>

<body onMouseMove=coord();> 
Javascript

40
17. Objetos Personalizados

A linguagem Javascript tambm Orientada a Objeto.

17.1. Conceitos

Objetos: So entidades concretas ou abstratas, simples ou complexas, que possuem
atributos que os distinguem uns dos outros e relacionamentos que associam
uns aos outros.
Propriedades: So os atributos do Objeto.
Mtodos: Comportamentos que os objetos so capazes de executar.
Instncia: Um novo objeto criado a partir de uma estrutura de objeto j definida (classe).
Varivel de objeto: Campo de recepo de dados.

Em outras palavras...

Objeto: Tudo o que perceptvel por qualquer dos sentidos (carro, pessoa, conta...).
Propriedade: Tudo o que o objeto possui (caracterstica).
Mtodo: Tudo o que o objeto pode fazer (ao).
Instncia: Clone de um objeto.
Varivel de objeto: Lugar onde os dados inseridos so recebidos.

Exemplo:

Objeto: Carro
Propriedades: Cor, marca, modelo, ano...
Mtodos: Buzinar, acelerar, acender faris...

Se voc quiser criar um Cadastro de Clientes para armazenar as informaes sobre eles (nome, telefone,
e-mail...) e depois executar algumas aes (calcular, imprimir...) voc pode utilizar variveis ou Arrays
para isto; mas, existe um modo muito mais prtico e eficiente de se fazer a mesma coisa utilizando
Objetos:
Voc cria uma estrutura modelo para este cadastro (objeto), contendo campos que armazenaro as
informaes sobre os clientes (propriedades) e desenvolve funes que executaro as aes
pertinentes a eles (mtodos).
Aps a criao desta estrutura, faz uma cpia deste modelo (instncia) para cada cliente do
cadastro, que posteriormente tero suas informaes (dados) inseridas neste novo modelo (atravs
das variveis de objeto) e as aes executadas (mtodos).
Cada Cliente ter desta forma todos os dados e aes inseridas dentro de uma unidade prpria
(objeto).

Javascript

41
17.2. Criando Objetos Personalizados

Os Objetos so criados a partir de funes Construtoras. Exemplo:

Objeto: Cadastro
Propriedades: Nome, Endereo e Telefone.
Mtodo: Impresso dos dados dos clientes.

<head>...
<script language=javascritp>
function Cadastro(v_nome, v_ender,v_tel){ //Criando Objeto Cadastro e suas variveis.
this.nome= v_nome;
this.ender=v_ender; //Criando as propriedades nome, ender e tel.
this.tel=v_tel;
this.impr=f_impr; // Criando o mtodo impr.
}
function f_impr( ){
linha1 = <b>Nome: + this.nome + <br>; //Definindo a funo que ser utilizada
linha2 = Endereo: + this.ender + <br>; //como um mtodo do objeto.
linha3 = Telefone: + this.tel + </b><hr>;
document.write(linha1,linha2,linha3);
}
</script>
</head>

Comentando o exemplo:

O nome da funo construtora o nome do Objeto: Cadastro.
A palavra chave this antes das propriedades nome, ender e tel e do mtodo impr do Objeto
indica o objeto corrente, ou seja, this um nome substituto do objeto que ser instanciado
posteriormente.
As propriedades nome, ender, tel armazenaro o contedo que recebero das variveis de objeto
v_nome, v_ender e v_tel.
impr: um mtodo. Todo mtodo recebe uma funo, neste caso, impr recebe a funf_impr.

17.3. Criando Instncias

A partir do modelo de Objeto Cadastro vamos criar as instncias de objeto, ou seja, cadastrar os
clientes e atribuir valores s suas propriedades.

<body>...
<script>
Maria = new Cadastro( ); //Criando a instncia Maria.
Maria.nome=Maria Jos dos Santos; //Atribuindo valores s propriedades.
Maria.ender=Rua Bela Vista, 100;
Maria.tel=2222-0000;
Maria.impr(); //Utilizando o mtodo.
</script>
</body>
Javascript

42
17.4. Criando Instncias Atribuindo Valores

Neste exemplo, o contedo das propriedades informado no momento da instanciao do objeto, sendo
os dados inseridos na mesma ordem em que foram criados.

<body>...
<script>
Jose = new Cadastro(Jos Pedro dos Santos,Rua Alta, 33,3333-0000);
Jose.impr();
Marcos = new Cadastro(Marcos de Jesus,Rua Paraso, 7,1111-0000);
Marcos.impr();
</script>
</body>

17.5. Relao de Mtodos e Propriedades de Formatao

Mtodos

Formatao de fonte:

String.big() Aumenta o tamanho da fonte.
String.small() Diminui o tamanho da fonte.
String.blink() Altera a fonte para piscante.
String.bold() Altera a fonte para negrito.
String.fixed() Altera o tipo da fonte para mono-tipo.
String.italics() Altera a fonte para itlico.
String.fontcolor(cor) Altera a cor da fonte.
String.fontsize(n) Altera o tamanho da fonte.
String.strike() Altera a fonte para tachado.
String.sub() Altera a fonte para sobrescrito.
String.sup() Altera a fonte para subscrito.
String.anchor(nome) Cria uma ncora no local.

Exemplo:

<script>
nome = Jos Maria;
document.write(nome.bold()); // Imprime Jos Maria em negrito.
document.write(Ana Paula.italics()); // Imprime Ana Paula em itlico.
</script>

Propriedades

Formatao de pgina:

document.bgColor Altera a cor de segundo plano da pgina.
document.fgColor Altera a cor padro da fonte da pgina.
document.linkColor Altera a cor padro dos links da pgina.
document.alinkColor Altera a cor padro dos links ativos da pgina.
document.vlinkColor Altera a cor padro dos links visitados da pgina.
Javascript

43
Exemplo:

<script>
document.bgColor=green; // Altera a cor de segundo plano da pgina para verde.
</script>

17.6. Prottipos de Objetos

Se voc acha que um objeto no atende plenamente s suas necessidades, voc pode estend-lo
adicionando uma nova propriedade ou mtodo.
Prototype (prottipo) outro nome para a definio de um objeto ou uma funo construtora.

Vamos exemplificar adicionando um mtodo que imprima um texto (String) no formato de ttulo,
utilizando a tag de ttulos de HTML, o tamanho da fonte ser passado ao mtodo como parmetro:

<head>...
<script>
function titulo(n){ //Funo recebendo parmetros
tag_inicio = <h + n + >; //Montagem da linha de impresso
texto = this.toString(); //Converso da frase que ser inserida em String
tag_final = </h + n + >; //Montagem da linha de impresso
linha = tag_inicio + texto + tag_final; //Montagem da linha de impresso
return linha; //Retornando a linha de impresso
}
String.prototype.tit=titulo;

//prototype adiciona a funo titulo() como um novo mtodo do objeto String denomidado tit().
</script>
</head>
<body>
<script>
frase=new String( de batalhas que se vive a vida, tente outra vez...);
document.write(frase.tit(2)); //Uso do novo mtodo tit() pela String frase.
</script>
</body>

18. Hierarquia do Objeto Browser

Uma vantagem que o JavaScript tem em relao a linguagens como Java, que os scripts podem
manipular o navegador da Web, como carregar uma nova pgina no navegador, trabalhar com partes da
janela e do documento do navegador e at abrir novas janelas.

A fim de trabalhar com o navegador e os documentos, o JavaScript utiliza um variedade de objetos
browser.

Os objetos browser esto organizados em uma hierarquia de objeto pai seguido pelo nome ou nomes do
objeto filho, separado por pontos.
Javascript

44
Exemplo:

window.document.image1

Neste exemplo, o objeto image1 filho do document, que por sua vez filho do objeto window.
O objeto window est na parte superior da hierarquia de objeto browser.

Diagrama contendo objetos bsicos de um navegador.

18.1. Objeto window

Na parte superior da hierarquia de objeto browser est o objeto window, que representa uma janela de
navegador. O objeto window sempre se refere janela atual (aquela que contm o script). A palavra
self tambm sinnimo para a janela atual, isto importante porque podemos trabalhar com vrias
janelas abertas ao mesmo tempo. Ns j utilizamos alguns mtodos e propriedades deste objeto:

Propriedade:

18.1.1. window.status

Altera o contedo da linha de status do navegador, situada no rodap da janela:

<body>
<a href="pag1.html"
onMouseOver="window.status='Descrio da Pgina 1';return true"
onMouseOut="window.status='';return true"> Pgina 1
</a>
</body>

A frase Descrio da pgina 1 ser mostrada quando o ponteiro do mouse pousar sobre o link e
desaparecer quando o ponteiro for retirado.

window
location history document
links[ ]
anchors[ ] images[ ] forms
elements
Javascript

45
Mtodos:

18.1.2. window.alert()

Exibe uma caixa de mensagem ao usurio:

<script>
window.alert(Bom dia! ou Boa tarde! ou Boa noite?!!);
</script>

Clique no boto <OK> da caixa para fech-la.

18.1.3. window.prompt()

Exibe uma caixa de dilogo para que o usurio entre com informaes:

<script>
v_nome = window.prompt(Qual o seu nome?,Digite o seu nome aqui.);
</script>

A frase Qual o seu nome? ser mostrada no cabealho da caixa de dilogo e Digite o seu nome
aqui., no campo onde o usurio dever digitar o seu nome. A resposta ser atribuda a varivel
v_nome.

18.1.4. window.confirm()

Exibe uma caixa de dilogo pedindo uma confirmao do usurio:

<script>
v_resp=window.confirm(Quer ganhar um milho agora?);
</script>

Uma caixa de dilogo se abrir contendo dois botes: <OK> (true) e <Cancel> (false). O usurio
confirmar ou cancelar a solicitao. A resposta ser atribuda a varivel v_resp.

18.1.5. window.setTimeout()

Permite a execuo de comandos com retardo de tempo (temporizador):

<script>
window.setTimeout(alert(O tempo no pra!),5000);
</script>

Uma caixa de dilogo ser mostrada com a mensagem O tempo no pra! aps 5 segundos.
A primeira parte do comando, antes da vrgula, indica a ao que dever ser executada e a segunda, o
tempo de espera em milsimos de segundos antes da execuo.

18.1.6. window.clearTimeout()

Interrompe a execuo de um temporizador antes do tempo marcado:
Javascript

46
<script>
n = 0;
function atualiza(){
n++;
window.status = "contador = " + n;
temp1 = window.setTimeout("atualiza()",1000);
}
atualiza();
</script>
<body>
<a href="#" onClick="window.clearTimeout(temp1);"> Pra o contador </a>
</body>

No exemplo, foi atribudo um nome ao temporizador (temp1). O temporizador faz a chamada da funo
atualiza( ) a cada 1 segundo, gerando uma repetio recursiva. O mtodo clearTimeout( ) interrompe a
execuo do temporizador temp1, especificado entre parnteses.

18.1.7. window.open()

Abre uma nova janela:

</script>
janelinha=window.open(pag1.html,janela1,width=200,height=100);
</script>

No exemplo:
janelinha - o nome dado a nova janela que ser aberta;
pag1.html - o URL da pgina que ser carregada na nova janela. Pode-se abrir uma nova
janela em branco omitindo o endereo da pgina, no deixando nenhum espao
entre as aspas.
janela1 - o nome da nova janela que ser atribudo propriedade name do objeto window.
width e height - fazem parte de um conjunto de recursos utilizados para configurar a nova janela.

Para habilitar ou desabilitar os recursos a seguir, utilize os valores 1 (yes) ou 0 (no):

toolbar barra de ferramentas
location barra de endereo
directories diretrios
status linha de status
menubar barra de menu
scrollbars barras de rolagem
resizable redimensinamento
fullscreen tela cheia

Para os demais recursos, especifique um valor:
height altura
width largura
top disposio da janela a partir da margem superior da pgina
left disposio da janela a partir da margem esquerda da pgina
Javascript

47
18.1.8. window.close()

Fecha janelas:

<body>
<input type=button value=Fecha Janela Principal onclick=window.close();>
//window.close() fecha a janela principal do navegador, aps a permisso do usurio!
<input type=button value=Fecha Nova Janela onclick=janelinha.close();>
//janelinha.close() fecha a nova janela aberta (janelinha) do exemplo anterior.
</body>

18.1.9. window.print()

Permite a impresso da pgina atual, que se encontra aberta.

<body>
<input type=button value=Imprime esta pgina onclick=print();>
</body>

Clicando no boto Imprime esta pgina, a pgina atual ser impressa.

No necessrio utilizar o nome do objeto (window) antes de propriedades ou mtodos quando existir
apenas uma janela aberta.

18.1.10. Objeto Frames

Frames so divises da janela do navegador em mltiplos quadros ou painis. Cada frame pode conter
uma pgina diferente ou a sada de um script. Cada frame no JavaScript representado por um objeto
equivalente ao objeto window, com o qual trabalhamos. Seu nome o mesmo do atributo name que
voc d a ele na tag <frame>:

<html><head><title> Frames </title></head>
<frameset cols=*,*>
<frame name=ladoesquerdo src=pagEsq.html>
<frame name=ladodireito src=pagDir.html>
</frameset>
</html>

Array

Cada objeto frame em uma janela filho do objeto window pai.

Em vez de referenciar os frames de um documentos pelo nome, voc pode utilizar o Array frames[].
Os frames so indexados, iniciando com zero a partir da primeira tag <frame>.
parent.frames[0] equivalente ao frame name ladoesquerdo do exemplo.
parent.frames[1] equivalente ao frame name ladodireito do exemplo.

O contedo do atributo name sensvel s letras maisculas e minsculas, no utilize caracteres especiais!
Javascript

48
Hierarquia

window e self referem-se janela atual, onde se encontra o seu script JavaScript.
parent, refere-se janela principal.

Se voc utilizar frames aninhadas, muda um pouco:

window ou self ainda representam a janela atual, onde se encontra o script;(frame atual)
parent representa o frameset que contm o frame atual (pai deste frame);
top representa o frameset principal, que contm todos os outros frames. (pai de todos os frames).

Exemplo de frames aninhadas:

<frameset rows=17%,*>
<frame name=cabecalho src=pagCab.html>
<frameset cols=22%,*>
<frame name=ladodireito src=pagDir.html>
</frameset>
</frameset>
</html>

18.1.10.1. Frames de navegao

Atravs de frames de navegao, voc pode controlar o documento em outro frame.
Vamos dividir a janela em trs frames e criar uma pgina para abrir apenas no frame ladoesquerdo,
os demais ficaro em branco.

<frameset cols=*,*,*>
<frame name=meio src=about:blank>
<frame name=ladodireito src=about:blank>
</frameset>
</html>

No cdigo fonte da pgina pagEsq.html vamos criar o seguinte script:

<html><head><title> Frames de Navegao </title></head>
<body>
<a href=parent.meio.location=pagMei.html;
parent.ladodireito.location=pagDir.html;
self.location=pagNova.html;> Carrega pginas </a>
</body> </html>

Ateno com as aspas e apstrofes. Crie as pginas pagMei.html, pagDir.html e pagNova.html para o teste.

Ao clicarmos no link Carrega pginas, que se encontra no quadro do lado esquerdo, sero carregadas
trs novas pginas, uma em cada quadro.
Javascript

49
18.1.2. Objeto location

O objeto location armazena as informaes referentes aos endereamentos de URLs.

Propriedades

18.1.2.1. window.location.href

A propriedade href armazena o URL da pgina atual:

<script>
document.write(window.location.href);
</script>

Este script mostra o endereo da pgina atual onde o script se encontra.

Voc pode carregar uma outra pgina atribuindo um novo endereo:

<script>
window.location.href=pag1.html;
</script>

A pgina pag1.html ser carregada na janela atual.

18.1.2.2. window.location.protocol

A propriedade protocol armazena o protocolo da pgina atual, basicamente http:

<script>
document.write(window.location.protocol);
</script>

Ser impresso o protocolo utilizado pela pgina atual.

Mtodos:

18.1.2.3. window.location.reload()

O mtodo reload() recarrega a pgina atual (atualiza):

<body>
<a href=javascript:window.location.reload();> Atualiza a Pgina </a>
</body>

Ao clicarmos no link Atualiza a Pgina a pgina atual ser recarregada.

18.1.2.4. window.location.replace()

O mtodo replace() substitui a pgina atual por uma outra. O histrico de navegao no
atualizado! Portanto, no d para retornar pgina anterior atravs dos botes de navegao:
Javascript

50
<body>
<input type=button value=Abre a Pgina 2
onclick=window.location.replace(pag2.html);>
</body>

Ao clicarmos no boto Abre a Pgina 2, a pag2.html substituir a pgina atual.

18.1.3. Objeto history

O objeto history armazena o histrico de navegao. URLs visitadas.

Propriedades

18.1.3.1. window.history.length

A propriedade length armazena o comprimento da lista de histrico de navegao, ou seja, a
quantidade de localizaes diferentes que o usurio visitou:

<script>
document.write(history.length);
</script>

Ser impresso um nmero correspondente ao comprimento da lista do histrico.

18.1.3.2. window.history.current

A propriedade current, assim como a window.location.href, contm o endereo da pgina atual.

<script>
document.write(history.current);
</script>

Ser impresso o URL corrente.

18.1.3.3. window.history.next

A propriedade next contm o endereo da prxima pgina, ou seja, aquela para onde o usurio foi e
depois retornou, podendo recarreg-la novamente atravs do boto de navegao Avanar:

<script>
document.write(history.next);
</script>

Ser impresso o prximo URL, que j foi anteriormente visitado.

18.1.3.4. window.history.previous

A propriedade previous armazena o endereo da pgina anterior, ou seja, aquela de onde o usurio,
podendo voltar novamente ela atravs do boto de navegao Retornar:
Javascript

51
<script>
document.write(history.previous);
</script>

Ser impresso o URL anteriormente visitado.

Mtodos

18.1.3.5. window.history.go()

O mtodo go() permite a navegao entre as pginas j vistadas pelo Internauta. Argumento com
valor positivo avana para a prxima pgina j visitada. Equivale ao boto Next do navegador:

<body>
<a href=javascript:history.go(1);> Avanar </a>
</body>

Ao clicarmos no link Avanar, avanaremos para a prxima pgina (a qual j fomos anteriormente).

Argumento com valor negativo retrocede pgina anterior. Equivale ao boto Back do navegador:

<body>
<a href=javascript:history.go(-1);>Retroceder </a>
</body>

Ao clicarmos no link Retroceder, retornaremos pgina anterior.

Utilizando outros valores:

<body>
<a href=javascript:history.go(-2);>Retroceder 2 Pginas </a>
</body>

O argumento -2 faz retornar antepenltima pgina j visitada.

18.1.3.6. window.history.back()

O mtodo back() retorna pgina anterior. Equivale ao boto Back do navegador:

<body>
<a href=javascript:history.back();>Retroceder</a>
</body>

Clicando no link Retroceder retrocederemos pgina anterior. Equivale ao boto Back do navegador.

18.1.3.7. window.history.forward()

O mtodo forward() avana para aprxima pgina. Equivale ao boto Next do navegador:

Javascript

52
<body>
<a href=javascript:history.forward();>Avanar</a>
</body>

18.1.4. Objeto document

O objeto document armazena as informaes referentes pgina.

Propriedades

18.1.4.1. window.document.URL

A propriedade URL assim como a window.location.href e a window.history.current, contm
o endereo da pgina atua:

<script>
document.write(document.URL);
</script>

18.1.4.2. window.document.title

A propriedade title armazena o ttulo da pgina, que exibido na barra de ttulo do navegador:

<script>
document.write(document.title); // Exibe o ttulo atual da pgina.
document.title=Novo Ttulo; // Atribui um novo ttulo pgina.
</script>

18.1.4.3. window.document.referrer

A propriedade referrer armazena o endereo da pgina anterior, aquela que o usurio estava
visualizando anteriormente, antes de clicar no link para carregar a pgina atual:

<script>
document.write(document.referrer);
</script>

18.1.4.4. window.document.lastModified

A propriedade lastModified armazena a data da ltima atualizao efetuada na pgina:

<script>
document.write(document.lastModified);
</script>

Sempre que a pgina for carregada, ser impresso a data da ltima atualizao.

Javascript

53
Mtodos

18.1.4.5. window.document.write()

O mtodo write(), como j percebemos, imprime texto em um documento. Para imprimir um novo
contedo, voc dever recarregar a pgina novamente.

<script>
document.write(Imprimindo um texto...);
</script>

18.1.4.6. window.document.writeln()

O mtodo writeln() tambm imprime texto, mas inclui um caractere de nova linha no final, permitindo
que o seu texto seja a ltima coisa na linha (se funcionasse!).

<script>
document.writeln(Imprimindo linha1...);
document.writeln(Imprimindo linha2...);
</script>

18.1.4.7. window.document.open()

O mtodo open() utilizado para reescrever um documento primeiramente limpando o contedo
anterior. utilizado em novas janelas. Voc abre um novo fluxo, escreve e depois fecha o fluxo.

<script>
janela1=window.open("","janela1","width=200,height=100");
function escreve(){
janela1.document.open();
janela1.document.write("Escrevendo na janela1 <br>");
janela1.document.close();
janela1.focus();
}
</script>

<body>
<input type="button" value="Escrever" onclick="escreve();">
</body>

Neste exemplo, sempre que pressionarmos o boto Escrever, o contedo anterior da janela1 ser
apagado e imprimir novamente a frase Escrevendo na janela1.

O mtodo .focus() foi utilizado para que a janela1 permanecesse em primeiro plano.

Comente (//) as linhas com os mtodos document.open() e document.close() e voc verificar
que o contedo da janela1 no ser mais apagado e sim acumulado.

Javascript

54
18.1.4.8. window.document.close()

O mtodo close() fecha o novo fluxo aberto. Ele utilizado com o mtodo document.open().
(Exemplificado no exemplo anterior).

18.4.5. Objeto link

Os links (ligaes) contidos em uma pgina so tratados como objetos no Javascript. Os scripts devero
ser chamados aps o carregamento da pgina HTML, se forem chamados antes, os links no sero
reconhecidos porque ainda no foram carregados. Se quisermos colocar os scripts no cabealho da
pgina (<head>), devemos coloc-los dentro de funes e cham-los utilizando tratadores de eventos
(onLoad...) para serem executados aps o carregamento completo da pgina.

Array

O Javascript armazena os links do cdigo HTML como elementos de um Array.

18.4.5.1. window.document.links[ ]

Cada link, por definio, faz parte do Array links[]. O endereo do primeiro link da pgina, criado com
HTML, armazenado no primeiro elemento do Array links[] de ndice 0 (zero) e assim sucessivamente.

<body onload="document.write(document.links[0]);">
<a href="pag1.html"> pgina um </a>
</body>

Refere-se ao primeiro link da pgina: file:///E:/pag1.html

Propriedades

18.4.5.2. window.links[ ].href

A propriedade href armazena o endereo do link (idem ao item anterior):

<script>
link1 = document.links[0].href; //O endereo do primeiro link salvo na varivel link1
</script>

O endereo do primeiro link ser armazenado na varivel link1.

18.4.5.3. window.links.length

A propriedade length armazena o nmero links existentes na pgina:

<body onload="alert(document.links.length);">
<a href="pag1.html"> Pgina Um </a>
<a href="pag2.html"> Pgina Dois </a>
</body>

Imprime a quantidade de links existentes na pgina: 2.

Javascript

55
18.4.6. Objeto anchor

As ncoras contidas em uma pgina tambm so tratadas como objetos no Javascript. Os scripts
tambm devero ser chamados aps o carregamento da pgina HTML, se forem chamados antes, as
ncoras no sero reconhecidas porque ainda no foram carregadas. Se quisermos utilizar os scripts no
cabealho da pgina (<head>), devemos coloc-los dentro de funes e cham-los utilizando
tratadores de eventos (onLoad...).

Array

O Javascript armazena as ncoras do cdigo HTML como elementos de um Array.

18.4.6.1. window.document.anchors[ ]

Cada ncora, por definio, faz parte de um Array denominado anchors[]. A primeira ncora da pgina,
criada com HTML, corresponde ao primeiro elemento do Array anchors, de ndice 0 (zero) e assim
sucessivamente:

document.anchors[0];

Refere-se primeira ncora da pgina.

Propriedades

18.4.6.2. window.anchors.name

A propriedade name armazena o nome da ncora contida na pgina:

<body>
<a name="ancora1"> Texto... </a>
<script>
alert(document.anchors[0].name);
</script>
</body>

Imprime o nome da primeira ncora da pgina: ancora1.

18.4.6.3. window.anchors.length

A propriedade length armazena o nmero de ncoras existentes na pgina:

<body>
<a name=texto1> Texto1 texto1 texto1... </a> <br>
<a name=texto2> Texto2 texto2 texto2... </a> <br>
<script>
alert(document.anchors.length);
</script>
</body>

Imprime a quantidade de ncoras existentes na pgina: 2.
Javascript

56
18.4.7. Objeto image

Como os demais elementos contidos em uma pgina HTML, as imagens tambm so tratadas como
objetos no Javascript. Os scripts tambm devero ser chamados aps o carregamento da pgina HTML,
se forem chamados antes, as imagens no sero reconhecidas porque ainda no foram carregadas. Se
quisermos utilizar os scripts no cabealho da pgina (<head>), devemos coloc-los dentro de funes e
cham-los utilizando os tratadores de eventos (onLoad, onClick...).

Array

O Javascript armazena as imagens do cdigo HTML como elementos de um Array.

18.4.7.1. window.document.images[ ]

Cada imagem, por default, faz parte de um array denominado images. A primeira imagem da pgina,
inserida com HTML, corresponde ao primeiro elemento da array images, de ndice 0 (zero); a segunda
imagem, ndice 1 (um) e assim sucessivamente. Ex.:

document.images[0];

Refere-se primeira imagem da pgina.

Propriedades

Para falarmos sobre propriedades, vamos inserir uma imagem na pgina incluindo vrios atributos.

<body>
<img src=imagem1.jpg name=img1 border=3 height=200 width=300
hspace=20 vspace=10 lowsrc=preimagem.gif>
</body>

Inclua os scripts para testes de propriedades no corpo da pgina aps a insero da imagem; ou condicione a
execuo dos scripts tratadores de eventos.

18.4.7.2. window.document.images[ ].name

A propriedade name armazena o nome da imagem includa na pgina:

<script>
alert(document.images[0].name); //Ser impresso : img1
</script>

18.4.7.3. window.document.images[ ].border

A propriedade border armazena o valor da borda da imagem includa na pgina:

<script>
alert(document.images[0].border); //Ser impresso:3
</script>
Javascript

57
18.4.7.4. window.document.images[ ].complete

A propriedade complete armazena os valores true ou false, indicando se a imagem j foi carregada
ou no na pgina:

<script>
alert(document.images[0].complete);
</script>

//Se a primeira imagem da pgina foi carregada com sucesso ser impresso true, caso contrrio, false.

18.4.7.5. window.document.images[ ].height

A propriedade height armazena o valor da altura da imagem includa na pgina:

<script>
alert(document.images[0].height); //Ser impresso: 200.
</script>

18.4.7.6. window.document.images[ ].width

A propriedade width armazena o valor da largura da imagem includa na pgina:

<script>
alert(document.images[0].width); //Ser impresso: 300.
</script>

18.4.7.7. window.document.images[ ].hspace

A propriedade hspace armazena o valor do espaamento horizontal da imagem includa na pgina:

<script>
alert(document.images[0].hspace); //Ser impresso: 20.
</script>

18.4.7.8. window.document.images[ ].vspace

A propriedade vspace armazena o valor do espaamento vertical da imagem na pgina:

<script>
alert(document.images[0].vspace); //Ser impresso: 10.
</script>

18.4.7.9. window.document.images[ ].lowsrc

A propriedade lowsrc armazena o endereo da pr-imagem, carregada antes do carregamento da
imagem definitiva:

Javascript

58
<script>
alert(document.images[0].lowsrc); //Ser impresso: preimagem.gif.
</script>

18.4.7.10. window.document.images[ ].src

A propriedade src armazena o endereo da imagem definitiva:

<script>
alert(document.images[0].src); //Ser impresso: imagem1.jpg.
</script>

Podemos utilizar alm do Array images[ ], o nome do objeto definido atravs dos atributos id ou
name, includos na tag <img> da HTML, para nos referir ao objeto:

<body onload="alert(document.imag1.width); alert(imag1.height);">
<img id="imag1" src="imagem1.gif" width="120" height="200">
</body>

//Ser impresso: 120 (largura) e 200 (altura)

Tratadores de Eventos em Imagens:

onLoad - Quando termina o carregamento das imagens na pgina.
onAbort - Quando o usurio interrompe o carregamento da pgina antes de carregar as imagens.
onError - Quando a imagem est corrompida ou no pode ser localizada (pathname incorreto).

Vide exemplos no captulo 16 Respondendo a Eventos

18.4.7.11. Rollovers

Utilizando o objeto image associado a tratadores de eventos podemos criar animaes com imagens, um
deles o Rollover, onde uma imagem substituda por outra quando o ponteiro do mouse passa sobre
ela. Este efeito muito utilizado em links:

<body>
<a href=# onmouseover=document.images[0].src=imagem2.jpg;
onmouseout=document.images[0].src=imagem1.jpg;>
<img src=imagem1.jpg width=250>
</a>
</body>

Neste exemplo, a primeira imagem da pgina: imagem1.jpg(includa atravs da tag
HTML) substituda pela imagem2.jpg quando o ponteiro do mouse passa sobre ela.
Quando o ponteiro do mouse se deslocada da imagem, a imagem imagem1.jpg retorna.
A largura das duas imagens determinada pelo atributo width da tag <img>.
O link est acessando a prpria pgina (#), mas poderamos acessar um URL qualquer.

Javascript

59
18.4.7.12. Pr-Carregamento de Imagens

As imagens so os ltimos e mais demorados itens a serem carregados em uma pgina, principalmente
se os arquivos forem pesados. Para otimizarmos o carregamento delas, utilizamos o pr-carregamento
de imagens, que consiste em carregar previamente as imagens no cache antes de sua exibio na
pgina.

Para isto, vamos criar uma instncia do objeto Image, que um Array, e armazenar previamente todas
as imagens que sero posteriormente exibidas:

<htmL>
<head>
<script>
imgs = new Image( );
imgs[0]= imagem0.jpg;
imgs[1]= imagem1.jpg;
</script>
</head>

<body>
<img src= name=imag1> <br>
<img src= name=imag2>
<script>
document.images[0].src = imgs[0];
document.imag2.src=imgs[1];
</script>
</body>
<htmL>

Comentando o exemplo: Pr-carregamos duas imagens no objeto Image, que um Array por
definio.
Utilizando HTML, inserimos duas tags de imagens sem os pathnames (endereos) no corpo do
documento.
Atravs do Javascript carregamos no lugar da primeira imagem do documento, que corresponde ao
elemento de ndice 0 (zero) do Array images[], a imagem armazenada no primeiro elemento do objeto
imgs[], que tambm um Array;

Para o carregamento da segunda imagem do documento, utilizamos o nome definido atravs do atributo
name de sua tag <img> e atribumos o segundo elemento do objeto imgs[].
Podemos inserir imagens no documento atravs destes dois modos, utilizando o nome da imagem
inserido no atributo name ou utilizando o Array de imagens images[].

18.4.7.13. Animao

O objeto Image associado ao temporizador setTimeout() permite a criao de animaes atravs da
exibio de uma seqncia de imagens (sobre um mesmo tema, com pequenas variaes entre uma e
outra), que exibidas sucessivamente no mesmo lugar e em um curto intervalo de tempo entre uma e
outra, simular um movimento. (Semelhante tcnica de desenho animado).

Javascript

60
Exemplo 1: (Utilizando nove imagens, simulando um ratinho em movimento):

<html><head><title> Animao 1 </title>
<script language="javascript">
img = new Image(); // Pr-carregamento de imagens atravs de um loop.
for(i=0;i<9;i++){
img[i]="mouse"+i+".gif";
}
i=0;
function mostra(){ //Exibio das imagens utilizando recursividade.
if (i>8) i=0;
document.images[0].src=img[i];
i++;
ID=window.setTimeout("mostra()",150);
}
</script>
<body bgcolor="brown">
<img src="mouse0.gif" border="0">
<br>
<input type="button" value="Start" onclick="mostra();">

<input type="button" value="Stop" Imagem" onclick="window.clearTimeout(ID);">
</body>
</html>

Utilizando propriedades do objeto image podemos alterar dinamicamente o tamanho de uma imagem.

Exemplo 2: (Simulao de um corao batendo)

<html>
<head>
<title> Animao 2 </title>
var vai=0;
function carregaImagem(){
imagem1.src="corao.jpg";
}
function bate(){
if (vai==0){
imagem1.width=imagem1.width+10;
imagem1.height=imagem1.height+5;}
else
{imagem1.width=imagem1.width-10;
imagem1.height=imagem1.height-5;}
if (imagem1.width>480)
vai=1;
if (imagem1.width<400)
vai=0;
setTimeout("bate()", 50);}
</script>
</head>
Javascript

61
<body onLoad="carregaImagem();">
<img name="imagem1" src="" align="center" width="400" height="250">
bate();
</script>
</body>
</html>

18.4.8. Objeto form

Para falarmos com detalhes sobre o objeto form, temos que primeiro criar um formulrio em HTML.
Tanto a tag form como os elementos criados atravs da HTML possuem propriedades, mtodos,
tratadores de eventos e Arrays. Descreveremos a seguir cada atributo destes elementos:

<form name=form1 action=mailto:email@prov.br method=POST enctype=text/plain>
...
</form>

Propriedades

forms[ ].name Armazena o contedo do atributo name da tag form do formulrio.
forms[ ].action Armazena o contedo do atributo action da tag form do formulrio.
forms[ ].method Armazena o contedo do atributo method da tag form do formulrio.
forms[ ].target Armazena o contedo do atributo target da tag form do formulrio.
forms[ ].encoding Armazena o contedo do atributo enctype da tag form do formulrio.
forms[ ].length Armazena a quantidade de elementos (campos) existentes no formulrio.

Para referenciar um formulrio, utilizamos o Array forms[ ] ou o nome do objeto includo no atributo name
da tag <form> da HTML.

Mtodos

forms[ ].submit( ) Envia o formulrio indicado.
forms[ ].reset( ) Limpa o formulrio indicado.

Array

.forms[ ] Conjunto de formulrios dentro de uma pgina.

Tratadores de Eventos

OnSubmit acionado quando o usurio pressiona o boto Submit do formulrio.
OnReset acionado quando o usurio pressiona o boto Reset do formulrio.

Com o tratador de eventos onSubmit, podemos fazer o tratamento dos dados, como verificar se os
campos foram corretamente preenchidos, antes do usurio enviar o formulrio.

Javascript

62
18.4.8.1. Objeto elements

Array

.elements[ ] Conjunto de elementos contidos em um formulrio.

Propriedades

elements[ ].name Armazena o nome do elemento.
elements[ ].length Armazena o comprimento do elemento.

O Array elements est subordinado a um formulrio. Podemos utilizar o nome do objeto, definido
atravs do atributo name includo na tag de cada elemento do formulrio (<textarea>,<button>...).

18.4.8.2. Objetos text e textarea

Propriedades

.name Armazena o nome do elemento.
.defaultValue Armazena o valor inicial (padro) do elemento.
.value Armazena o valor atual do elemento (preenchido pelo usurio).

Mtodos dos objetos text e textarea

.focus( ) Posiciona o cursor sobre um elemento text ou textarea.
.blur( ) Retira o cursor do elemento.
.select( ) Seleciona o contedo inserido no elemento.

Tratadores de Eventos

onFocus acionado quando o usurio posiciona o cursor no elemento.
onBlur acionado quando o usurio retira o cursor do elemento.
onChange acionado quando o usurio altera o valor do elemento e retira o cursor.
onSelect acionado quando o usurio seleciona um elemento.

18.4.8.3. Objeto checkbox

Propriedades

.value Armazena o valor do elemento que ser enviado ao servidor.
.checked Armazena o valor true ou false, de acordo com a situao inicial do campo.
.defaultChecked Armazena o valor true ou false, de acordo com a manipulao do usurio.

Mtodo

.click( ) D um clique em um elemento.
Javascript

63
Tratador de Evento

onClick acionado quando o usurio d um clique em um elemento.

18.4.8.4. Objeto radio

Propriedades de grupo do objeto radio

.length Armazena a quantidade de botes.
.value Armazena o valor do elemento que ser enviado ao servidor.

Propriedades dos botes do objeto radio

.defaultChecked Armazena o valor true ou false inicial do elemento (boto), que ser
enviado ao servidor.
.checked Armazena o valor true ou false atual do elemento, que ser enviado ao
servidor.

Mtodo

.click( ) D um clique em um elemento.

Tratador de Evento

onClick acionado quando o usurio d um clique em um elemento.

Array

.Nome[] Nome deve ser o nome do elemento definido no atributo name, que ser
utilizado como o nome do Array.

18.4.8.5. Objeto select

Propriedades de grupo do objeto select

.length Armazena a quantidade de opes.
.selectedIndex Armazena o ndice da opo selecionada.

Propriedades das opes do objeto select

.index Armazena o ndice da opo.
.defaultSelected Armazena o valor true ou false inicial do elemento.
.selected Armazena o valor true ou false atual do elemento.
.name Armazena o nome da opo.
.text Armazena o texto contido no boto da opo.
.value Armazena o valor da opo que ser enviado ao servidor.
Javascript

64
Mtodos

.focus( ) Posiciona o cursor sobre um elemento.
.blur( ) Retira o cursor do elemento.

Tratador de Evento

onFocus( ) Ocorre quando o cursor posicionado sobre um elemento do objeto select.
onBlur( ) Ocorre quando o cursor retirado do elemento.
onChange( ) Ocorre quando o usurio seleciona uma opo e retira o curso do
elemento.

Array

.options[] Array de opes do objeto select.

18.4.8.6. Exemplos de JavaScript utilizando campos de Formulrios

18.8.6.1. Validao de Formulrios

Exemplo 1: (Consistncia de campos utilizando o tratador de eventos onsubmit para o envio de dados)

<html>
<head> <title>formulrio</title>
<script language="Javascript">
function enviar(){
if (document.form1.nome_usuario.value.length<3){
alert("Nome Incompleto!");
document.form1.nome_usuario.select();
document.form1.nome_usuario.focus();
return false;
}
if (document.form1.email_usuario.value.indexOf("@")<0){
alert("Email Invlido!");
document.form1.email_usuario.select();
document.form1.email_usuario.focus();
return false;
}
if (document.form1.comentario.value.length<3){
alert("Faa s um comentariozinho!!!");
document.form1.comentario.select();
document.form1.comentario.focus();
return false;
}
if (document.form1.pesquisa[0].checked==true)
alert("Legal, pessoas inteligentes sempre gostam da minha pgina!!!");
else {
if (document.form1.pesquisa[1].checked==true)
alert("Poxa, voc no gostou da minha pgina???");
else {
Javascript

65
alert(" para responder a pesquisaaa!");
return false;
}
}
}
</script>
</head>
<body bgcolor="#666688" marginwidth="333" leftmargin="333">
<h1 align="center"><font color="#FFFFFF"> Formulrio </font> </h1>
<hr>
<form name="form1" action="mailto:seuemail@prov.com.br" method="POST"
enctype="text/plain" onSubmit="return enviar();">
<i>Nome:</i><br>
<input type=text name="nome_usuario" size="52" title="Digite seu
nome"><BR><BR>
<i>E-mail:</i><br>
<input type=text name="email_usuario" size="52" title="Digite seu E-
mail"><BR><BR>
<i>Comentrio:</i><br>
<textarea name="comentario" rows="05" cols="40" title="Digite seu
comentrio"></textarea>
<br><br><center>
<h3> Pesquisa: </h3>
<i>Gostou da minha pgina???</i><br><br>
<input type="radio" name="pesquisa" value="s" title="Clique aqui!!!"> Sim

<center>
<input type="radio" name="pesquisa" value="n" title="No clique aqui!">
No<br><br><br>
<input type="submit" value="Enviar">
<input type="reset" value="Limpar">
</center>
</form>
</body> </html>

Exemplo 2: (Consistncia de campos utilizando o mtodo submit() para o envio de dados)

<html>
<head> <title>formulrio</title>
function enviar(){
if (document.form1.nome_usuario.value.length<3){
alert("Nome Incompleto!");
document.form1.nome_usuario.select();
document.form1.nome_usuario.focus();
}
else
if (document.form1.email_usuario.value.indexOf("@")<0){
alert("Email Invlido!");
document.form1.email_usuario.select();
document.form1.email_usuario.focus();
}
Javascript

66
else document.form1.submit();
}
</script>
</head>
<body bgcolor="#6666BB" marginwidth="333" leftmargin="333">
<h1 align="center"><font color="#FFFFFF"> Formulrio </font> </h1>
<hr>
<form name="form1" action="mailto:seuemail@prov.com.br" method="POST"
enctype="text/plain">
<i>Nome:</i><br>
<input type=text name="nome_usuario" size="52" title="Digite seu
nome"><BR><BR>
<i>E-mail:</i><br>
<input type=text name="email_usuario" size="52" title="Digite seu E-
mail"><BR><BR>
<input type="button" value="Enviar" onclick="enviar();">

<input type="reset" value="Limpar">
</center>
</form>
</body>
</html>

18.4.8.6.2. Menu de Navegao

Exemplo 1: (Menu utilizando o tratador de eventos onChange na caixa de seleo)

<html>
<head>
<title>formulrio</title>
function carrega_pagina(){
i = document.form1.paginas.selectedIndex;
pag = document.form1.paginas.options[i].value;
window.location = pag;
}
</script>
</head>
<h1 align="center"><font color="#FFFFFF"> Menu de Navegao </font> </h1>
<hr><center>
<form name="form1">
<select name="paginas" onchange="carrega_pagina()">
<option value="pagina1.html"> Pgina Um </option>
<option value="pagina2.html"> Pgina Dois </option>
<option value="pagina3.html"> Pgina Trs </option>
<option value="pagina4.html"> Pgina Quatro </option>
</select>
</form>
</center>
</body>
</html>
Javascript

67
Exemplo 2: (Menu utilizando o tratador de eventos onClick em um boto genrico)

<html>
<head>
<title>formulrio</title>
function carrega_pagina(){
i = document.form1.paginas.selectedIndex;
pag = document.form1.paginas.options[i].value;
window.location = pag;
}
</script>
</head>
<h1 align="center"><font color="#FFFFFF"> Menu de Navegao </font> </h1>
<hr><center>
<form name="form1">
<select name="paginas">
<option value="pagina1.html"> Pgina Um </option>
<option value="pagina2.html"> Pgina Dois </option>
<option value="pagina3.html"> Pgina Trs </option>
<option value="pagina4.html"> Pgina Quatro </option>
</select>
<input type="button" value="OK" onclick="carrega_pagina();">
</form>
</center>
</body>
</html>

18.4.8.6.3. Relgio

<html>
<script language="JavaScript">
function relogio(){
var hoje = new Date();
var horas = hoje.getHours();
var minutos = hoje.getMinutes();
var segundos = hoje.getSeconds();
var val_horas = ((horas < 10) ? "0":"") + horas;
val_horas += ((minutos < 10) ? ":0":":") + minutos;
val_horas += ((segundos < 10) ? ":0":":") + segundos;
document.relog.visor.value = val_horas;
window.setTimeout("relogio()",500);
}
</script>
<head>
<title>Java Script - Relgio</title>
</head>

<body onLoad="relogio();" bgcolor="FFFFCC">
<center>
<hr size="2">
Javascript

68
<font size=+3 face="Colonna MT,Brush Script MT">Relgio</font>
<hr size="2">
<br>
Relgio:<br>
<form name="relog" onSubmit="0">
<input type="text" name="visor" size="05">
</form>
</center>
</body>
</html>

18.4.8.6.4. Letreiro Digital

<html>
<head>
<title>Marquee comJavaScript</title>

<script>
i=0;
function marquee(){
mens=" Coloque a sua mensagem aqui... ";
document.f1.texto.value = mens.substring(i,mens.length)+mens.substring(0, i-1);

if (i < mens.length){
i++;
}
else {
i=0;
}

window.setTimeout("marquee()",200)
}

</script>
</head>

<body onLoad="marquee()" bgcolor="#546365">
<center>
<form name="f1">
<input type="text" name="texto" size="40">
</form>
</center>
</body>
</html>
19. Deteco e Diferenas entre Navegadores

O Javascript possui um objeto chamado navigator que armazena informaes sobre o navegador do
usurio. O navigator no parte da hierarquia de objetos. Ele contm vrias propriedades que servem
para identificar o navegador do usurio.

Javascript

69
19.1. Informaes sobre o Navegador Atual

Propriedades:

navigator. appCodeName Nome interno do cdigo do navegador, normalmente Mozilla.
navigator.appName Nome do navegador.
navigator.appVersion Verso utilizada pelo navegador.
navigator.userAgent Cabealho do usurio-agente, uma string que o navegador envia
para o servidor Web quando solicita uma pgina da Web. Inclui
informaes completas da verso.
navigator.systemLanguage Idioma. armazenado como um cdigo, como in para ingls,
pt-br para portugus do Brasil...
navigator.platform Plataforma do computador utilizado pelo navegador, como Win32,
MacPPC...

Todas as propriedades do navegador podero ser impresssas atravs do loop for in:

Exemplo 1: (Imprime todas as propriedades do navegador utilizado)

<html>
<head> <title> Navegadores </title>
</head>
<body>
<h1 align="center"> Propriedades do Navegador Atual </h1>
for (i in navigator){
document.write("propriedade: " + i + "<br>") ;
document.write("contedo: " + navigator[i] + "<hr>");
}
</script>
</body>
</html>

Exemplo 2: (Identifica o Navegador Utilizado)

<html>
<head>
if (navigator.appName.indexOf("Netscape") > -1)
alert("Voc esta utilizando o Netscape ou um Navegador Compatvel");
else
if (navigator.appName.indexOf("Microsoft") > -1)
alert("Voc esta utilizando o I. Explorer ou um Navegador Compatvel");
else
alert("Seu navegador no o Internet Explorer nem o Netscape");
</script>
</head>

Alguns navegadores possuem como nome interno o nome de outro navegador para indicar a
compatibilidade. Ex.: O contedo da propriedade appName do Mozilla Firefox Netscape.
Javascript

70
20. Outros Scripts

20.1. Cookies

Um cookie uma informao (uma seqncia de caracteres) que os sites enviam aos navegadores dos
usurios e as mantm na memria do computador.
Ao encerrar a sesso com o navegador, todos os cookies que ainda no expiraram so gravados em um
arquivo (cookie file).
Nas visitas posteriores o navegador reenvia os dados para o servidor dono do cookie (site).
Os sites geralmente usam os cookies para distinguir usurios e memorizar preferncias.

Muitas pessoas julgam que os cookies possam ser usados pelo servidor para obter informaes a seu respeito ou
invadir o seu disco rgido e obter dados a partir de l, o que no verdade. Todas as informaes gravadas em um
cookie so informaes que voc forneceu voluntariamente ao servidor (de uma forma ou de outra).

Propriedade:

document.cookie

Exemplo:

Parte 1 - Enviando Dados para o Cookie

<html>
<head>
<title>Pgina armazenando um cookie</title>

hoje= new Date();
function criaCookie(){
linha1=document.formCookie1.seunome.value;
linha2="*" + document.URL;
linha3="*" + hoje.toGMTString();
document.cookie=linha1+linha2+linha3;
}
</script>
</head>
<body bgcolor="beige">
<h2 align="center"> Carrega dados no Cookie </h2>
<form name="formCookie1">
Seu nome:<br><input type="text" name="seunome" size="50"
onChange="criaCookie()">
</form>
<input type="button" value="L cookie em outra pgina"
onClick="window.location='cookieExibe.html';"><br><br>
<input type="button" value="Limpa Cookie" onClick="document.cookie=''";>
</body>
</html>

Javascript

71
Parte 2 Exibindo os Dados da Pgina Anterior Armazenados no Cookie

<html>
<head>
<title> Pgina exibindo cookie </title>

function exibeCookie(){
meuCookie=document.cookie;
dados=meuCookie.split("*");
document.formCookie2.usuario.value=dados[0];
document.formCookie2.pagina.value=dados[1];
document.formCookie2.dataCookie.value=dados[2];
}
</script>

</head>
<body bgcolor="#6688BB" onLoad="exibeCookie()">

<h2 align="center"> Exibe Cookie </h2>

<form name="formCookie2">
Nome:<br><input type="text" name="usuario" size="50"><br><br>
Pgina anterior:<br><input type="text" name="pagina" size="50"><br><br>
Data da criao do cookie:<br><input type="text" name="dataCookie"
size="50"><br>
</form>
</body>
</html>

20.2. Descendo a Barra de Rolagem Automaticamente

<html>
<head>
<title> Sobe Tela </title>
contador=0;

function sobetela(){
if ((contador+=3)>600)
contador=0;
self.scroll(0,contador);
setTimeout('sobetela()',200);
}
</script>
<body onLoad="sobetela()">
Texto..<br> texto....<br> texto....<br>
Javascript

72
</body>
</html>

20.3. Exibindo a Resoluo da Tela

<html>
<head><title> screen </title>
</head>
document.write("<b> Sua resoluo:<b>");
document.write(screen.width+"x"+screen.height);
</script>
<body bgcolor="beige">
</body>
</html>

20.4. Movimentando uma Imagem atravs das Setas de Direo utilizando DHTML
(DHTML = HTML + CSS + JavaScript)

<html>
<head>
<title> Setas de direo</title>
<script>
function clique() {
tecla = event.keyCode;
window.status="Voc pressionou a tecla " + tecla;

if (tecla==37) // Seta esquerda
img1.style.pixelLeft-=5; // Instruo para o I.E.
else
if (tecla==38) // Seta para cima
img1.style.pixelTop-=5; // Instruo para o I.E.
else
if (tecla==39) // Seta direita
img1.style.pixelLeft+=5;
else
if (tecla==40) // Seta para baixo
img1.style.pixelTop+=5;
else
alert("tecla ivlida!");
}

// Instruo para o Netscape : document.img1.left e document.img1.top
</script>
</head>
Javascript

73
<body onKeyDown="clique();">
<img id="img1" src="imagem1.jpg" width="150"
style="position:absolute; top='100'; left='100';">
</body>
</html>

20.5. Executando um arquivo de Som

<html>
<head>
<script>
function tocar(som){ // som recebe o ndice 0 (zero) que ser utilizado no Array.
document.embeds[som].play();// Instuo para o Nestcape
}
</script>
</head>
<body onKeyDown="tocar(0);">
<embed src="Sinfonia No 9 de Beethoven (scherzo).wma" hidden="true"
autostart="false">
</body>
</html>

// O I.E. utiliza o mtodo .run().

embeds[] um Array de de sons e vdeos. Podemos incluir vrios arquivos de som na
pgina e execut-los aleatoriamente,variando os ndices randomicamente.
21. Bibliografia

Javascript O Guia definitivo
David Flanagan trad. Edson Furmankiewicz
Bookman Companhia Editora
2004

Iniciando em Javascript 1.5
Adrian Kingsley-Hughes e Kathie Kingsley-Hughes
Editora Makron Books
2001

Javascript 1.3. - Aprenda em 24 Horas
Michael Moncur
Editora Campus
1999
22. Sobre Sites...

Pesquise na Internet por javascript e encontrar vrios sites com modelos e exemplos de scripts, como
tambm tutoriais e apostilas. No vou indicar nenhum porque os endereos podem mudar.
Vale a pena procurar. Bom estudo!

Java PDF

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Java PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

Apostila Apostila Apostila Apostila

Prof.a Elisabete da Silva Santos

Anda mungkin juga menyukai