Escolar Documentos
Profissional Documentos
Cultura Documentos
Apostila
Prof.a Elisabete da Silva Santos
Apostila
Prof.a Elisabete da Silva Santos
Javascript
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.
3.
4.
5.
Variveis ................................................................................................................................................ 9
5.1 Globais e Locais .............................................................................................................................................................. 9
5.2. Nomes de Variveis ...................................................................................................................................................... 10
6.
7.
8.
6.1. Bsicos.......................................................................................................................................................................... 10
6.2. Especias ........................................................................................................................................................................ 10
Operadores........................................................................................................................................... 12
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
Javascript
11.
12.
Array .................................................................................................................................................... 22
13.
Loops .................................................................................................................................................... 25
14.
15.
16.
17.
Objetos Personalizados........................................................................................................................ 40
18.
19.
20.
21.
Bibliografia .......................................................................................................................................... 73
22.
Javascript
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
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!
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?
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!
Em um Arquivo Externo
No Cabealho do Documento
Dentro de Tags, utilizando Tratadores de Eventos
No Corpo do Documento
Javascript
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>
<title> Javascript2 </title>
<script language=javascript src=arquivo_externo.js>
// Chamando um Arquivo Externo contendo JavaScript.
</script>
</head> ...
3.
<html>
<head>
<title> Javascript3 </title>
</head>
<body>
<input type=button value=Mensagem onclick=alert(Ola!);>
<!-- JavaScript em uma tag HTML atravs de um Tratador de Eventos.
-->
</body>
4.
<html>
<head>
<title> Javascript4 </title>
</head>
<body>
<script language=javascript>
document.write(Iniciando em JavaScript);
// JavaScript no Corpo de uma pgina HTML.
</script>
</body> ...
/*
Comentando
vrias linhas... */
Faculdade de Tecnologia de So de Paulo
Prof Elisabete da Silva Santos
Javascript
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:
<script language=javascript>
alert(Seja muito bem-vindo(a)!);
</script>
Javascript
2. <script language=javascript>
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.
4. Caracteres de Escape
Os caracteres de escape so usados em Strings para:
Caracter
\b
\t
\f
\n
\r
\
\
\\
Descrio
Backspace
Tabulao Horizontal
Avano de Formulrio (form feed)
Nova Linha (line feed)
Retorno de Carro
Aspas Duplas
Apstrofe
Barra invertida
Javascript
Exemplos:
1. <script language=javascript>
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.
Exemplos:
<script language=javascript>
num = 1234;
// Criando e atribuindo um valor uma varivel.
var msg1;
var msg2;
Javascript
10
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.
Number
String
6.2. Especias
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:
Undefined - Indefinido. Na maioria das vezes o mesmo que null. Sua presena indica que algo
saiu errado em seu JavaScript.
parseInt(string)
ParseFloat(string)
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.
String
Number
Boolean
Javascript
12
Exemplo:
1. a = 2;
b = String(a);
alert(typeof(b));
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;
c = a + b;
document.write(<br>+c);
Substrao (-)
a = 3 , b = 1;
c = a b;
document.write(<br>+c);
// o valor de c ser 2
Diviso (/)
a = 8 , b = 2;
c = a / b;
document.write(<br>+c);
// o valor de c ser 4
Multiplicao (*)
a = 2 , b = 3;
c = a * b;
document.write(<br>+c);
// o valor de c ser 6
Javascript
// o valor de c ser 1
8.2. Relacionais
Os operadores relacionais so usados em comparaes (binrios):
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));
Ou (||)
a = 6 , b = 3, c = 1;
alert((a > b) || (b == c));
Negao (!)
a = 6 , b = 3, c = 1;
alert(a != b);
// ( a no igual a b)
13
Javascript
14
Unrio (-)
1. a = 2;
b = -a;
2. c = -3;
d = -c;
Unrio (+)
+a
//Muda o operando para o tipo nmero (por exemplo, era uma string).
Compostos:
x =+ 3;
x =- 3;
x =* 3;
x =/ 3;
// o mesmo que x = x + 3;
// o mesmo que x = x - 3;
// o mesmo que x = x * 3;
// o mesmo que x = x / 3;
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;
Javascript
15
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>
<script language=javascript>
function nome_da_funo(){
sentena1;
// Linhas de instrues da funo.
sentena2;
...
}
</script>
</head>
<body>
Corpo da pgina...
<script>
nome_da_funo();
</script>
</body>
</html>
Javascript
16
</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:
<script language=javascript>
function mens(quem1 , quem2){
// Definio da funo e das variveis quem1 e quem2.
alert(Ola + quem1 + ,ol + quem2);
}
</script>
Chamando a funo:
<script language=javascript>
nome1 = Pedro;
nome2 = Paulo;
//Chamada da funo mens() passando os parmetros nome1 e nome2.
mens(nome1,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
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 =+ !;
Javascript
18
2.
alert(frase1.toLowerCase( ));
Exibe: ouvindo voc esquece. lendo voc aprende. fazendo, voc sabe!
document.write(frase2.substring(3,7);
19
Javascript
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.
Voc pode especificar um segundo parmetro (opcional) para indicar o ndice inicial da procura, a partir
do qual comear a pesquisa. Exemplo:
frase3 = Brasil, meu Brasil brasileiro...;
document.write(frase3.indexOf(Brasil,1));
//Imprime ndice:12.
//Imprime ndice:12.
Neste caso, tambm podemos especificar um segundo parmetro (opcional) para indicar o ndice inicial
da prxima procura. Exemplo:
frase3 = Brasil, meu Brasil brasileiro...;
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
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) {
alert(a maior que 2);
a = 0;
}
else
alert(a menor ou igual a 2);
x = 2, y = 3;
if (x == 2 && y == 3) z = x + y;
Javascript
2.
x = 2, y = 4;
if (x == 2 || y == 4) w = x + y;
21
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.
Faculdade de Tecnologia de So de Paulo
Prof Elisabete da Silva Santos
22
Javascript
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
0
Segunda-feira
Tera-feira
Quarta-feira
3
Quinta-feira
4
Sexta-feira Sbado
5
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;
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;
...
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]);
23
Javascript
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.
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!
Javascript
24
// Imprime Guilherme
// Imprime Henrique
// Imprime Santos
Voc pode utilizar a propriedade length neste caso para verificar a quantidade de elementos do Array partes.
Exemplo:
// Exibir 3.
alert(partes.length);
// Exibir Joo
Javascript
13.
25
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
Esta
Esta
Esta
a linha 1
a linha 2
a linha 3
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 (+).
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.
Javascript
26
//Resultado: Total = 10
A condio da instruo while deve estar entre parnteses, ela testada no incio do loop;
Bloco de instrues fica entre chaves.
//Resultado: Total = 23
O bloco de instrues deve estar inserido entre chaves aps o comando do (faa);
Javascript
27
Resultado:
1. Jonas
2. Ana
3. Ruth
4. Tiago
5. Marcos
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.
Faculdade de Tecnologia de So de Paulo
Prof Elisabete da Silva Santos
Javascript
28
Javascript
29
2. calculo1 = ("3*6+2");
resultado = eval (calculo1);
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.
Descrio
Javascript
Exemplo:
val_pi = Math.PI;
// Exibe 3.141592653589793
alert(val_pi);
Mtodos
Math.abs(nmero)
Descrio
Math.pow(base, expoente)
Math.max(nmero1, nmero2)
Math.min(nmero1, nmero2)
Math.sqrt(nmero)
Math.sin(nmero)
Math.asin(nmero)
Math.cos(nmero)
Math.acos(nmero)
Math.tan(nmero)
Math.atan(nmero)
Math.log(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.
Descrio
30
31
Javascript
Exemplo:
x = 3.46;
document.write(Math.ceil(x)+<br>");
document.write(Math.floor(x)+<br>");
document.write(Math.round(x)+<br>");
// Imprime 4.
// Imprime 3.
// Imprime 3.
Descrio
Exemplos:
1. alert(Math.random());
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
Descrio
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);
Descrio
num = "a23.45";
(isNaN(num))?alert(num+"-True, no nmero"):alert(num +"-False, nmero");
32
Javascript
14.2.3. Fixando o Nmero de Algarismos aps a Casa Decimal
Mtodos
Number.toFixed(algarismos)
Descrio
Exemplo:
x = 3.4656;
document.write(x.toFixed(2));
Descrio
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
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 1o de Janeiro de 1970.
=
=
=
=
new
new
new
new
Date( );
Date(December 25, 2020 00:00:00);
Date(12, 25, 2020);
Date(12, 25, 2020, 0, 0, 0);
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
Descrio
Exemplo:
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:
//Resultado: 1587767807656
alert(hoje.setYear(2020));
Descrio
Obtm
Obtm
Obtm
Obtm
Obtm
Obtm
Obtm
Obtm
Obtm
o dia do Ms.
o Ms. (Valores de 0 11; Janeiro = 0).
o dia da Semana ( Valores de 0 6; Domingo = 0).
o Ano. (2 dgitos)
o Ano. (4 dgitos)
a Hora (e a data) em milissegundos.
a Hora.
os Minutos.
os Segundos.
Exemplo:
hoje = new Date(Apr 24 2020);
dia = hoje.getDate( );
alert(dia);
//Exibir: 24.
Javascript
34
Descrio
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)
Descrio
Exemplo:
document.write(Date.parse("Apr 20, 1996")); //Imprime: 829969200000
Javascript
35
Exemplo o with:
n1 = prompt("Entre com 0 nmero 1","");
n2 = prompt("Entre com 0 nmero 2","");
n3 = prompt("Entre com 0 nmero 3","");
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.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?);
event.returnValue = false;
}
</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!);
event.returnValue = false;
}
</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.
Faculdade de Tecnologia de So de Paulo
Prof Elisabete da Silva Santos
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
target
which
modifiers
data
x e y
screenX
screenY
keyCode
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
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
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.
//Utilizando o mtodo.
Javascript
42
Formatao de fonte:
String.big()
String.small()
String.blink()
String.bold()
String.fixed()
String.italics()
String.fontcolor(cor)
String.fontsize(n)
String.strike()
String.sub()
String.sup()
String.anchor(nome)
Exemplo:
<script>
nome = Jos Maria;
document.write(nome.bold());
document.write(Ana Paula.italics());
</script>
Propriedades
Formatao de pgina:
document.bgColor
document.fgColor
document.linkColor
document.alinkColor
document.vlinkColor
Altera
Altera
Altera
Altera
Altera
a
a
a
a
a
cor
cor
cor
cor
cor
Javascript
43
Exemplo:
<script>
document.bgColor=green;
</script>
//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>
browser.
Os objetos browser esto organizados em uma hierarquia de objeto pai seguido pelo nome ou nomes do
objeto filho, separado por pontos.
Faculdade de Tecnologia de So de Paulo
Prof Elisabete da Silva Santos
44
Javascript
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.
window
history
location
links[ ]
anchors[ ]
document
images[ ]
forms
elements
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.
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:
Faculdade de Tecnologia de So de Paulo
Prof Elisabete da Silva Santos
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
pag1.html
barra de ferramentas
barra de endereo
diretrios
linha de status
barra de menu
barras de rolagem
redimensinamento
tela cheia
altura
largura
disposio da janela a partir da margem superior da pgina
disposio da janela a partir da margem esquerda da pgina
Faculdade de Tecnologia de So de Paulo
Prof Elisabete da Silva Santos
Javascript
47
18.1.8. window.close()
Fecha janelas:
<body>
<input type=button value=Fecha Janela Principal onclick=window.close();>
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.
Array
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:
<html><head><title> Frames </title></head>
<frameset rows=17%,*>
<frame name=cabecalho src=pagCab.html>
<frameset cols=22%,*>
<frame name=ladoesquerdo src=pagEsq.html>
<frame name=ladodireito src=pagDir.html>
</frameset>
</frameset>
</html>
Ao clicarmos no link Carrega pginas, que se encontra no quadro do lado esquerdo, sero carregadas
trs novas pginas, uma em cada quadro.
Faculdade de Tecnologia de So de Paulo
Prof Elisabete da Silva Santos
Javascript
49
Propriedades
18.1.2.1. window.location.href
A propriedade href armazena o URL da pgina atual:
<script>
document.write(window.location.href);
</script>
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:
Faculdade de Tecnologia de So de Paulo
Prof Elisabete da Silva Santos
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.
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>
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>
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>
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);
document.title=Novo Ttulo;
</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
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.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>
Javascript
55
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];
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>
Javascript
56
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];
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.
//Ser impresso:3
Javascript
57
//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);
</script>
Javascript
<script>
alert(document.images[0].lowsrc);
</script>
58
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>
Javascript
59
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
Javascript
61
<body onLoad="carregaImagem();">
<img name="imagem1" src="" align="center" width="400" height="250">
<script language="javascript">
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[
forms[
forms[
forms[
forms[
forms[
].name
].action
].method
].target
].encoding
].length
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( )
forms[ ].reset( )
Array
.forms[ ]
Tratadores de Eventos
OnSubmit
OnReset
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
Array
.elements[ ]
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>...).
Propriedades
.name
.defaultValue
.value
Tratadores de Eventos
onFocus
onBlur
onChange
onSelect
acionado quando
acionado quando
acionado quando
acionado quando
o
o
o
o
usurio
usurio
usurio
usurio
Propriedades
.name
.value
.checked
.defaultChecked
Armazena
Armazena
Armazena
Armazena
o
o
o
o
nome do elemento.
valor do elemento que ser enviado ao servidor.
valor true ou false, de acordo com a situao inicial do campo.
valor true ou false, de acordo com a manipulao do usurio.
Mtodo
.click( )
D um clique em um elemento.
Faculdade de Tecnologia de So de Paulo
Prof Elisabete da Silva Santos
Javascript
Tratador de Evento
onClick
D um clique em um elemento.
Tratador de Evento
onClick
Mtodo
.click( )
Array
.Nome[]
Nome deve ser o nome do elemento definido no atributo name, que ser
utilizado como o nome do Array.
Armazena
Armazena
Armazena
Armazena
Armazena
Armazena
o ndice da opo.
o valor true ou false inicial do elemento.
o valor true ou false atual do elemento.
o nome da opo.
o texto contido no boto da opo.
o valor da opo que ser enviado ao servidor.
63
Javascript
Mtodos
.focus( )
.blur( )
Tratador de Evento
onFocus( )
onBlur( )
onChange( )
64
Array
.options[]
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 {
Faculdade de Tecnologia de So de Paulo
Prof Elisabete da Silva Santos
Javascript
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 Email"><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>
<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();
}
else
if (document.form1.email_usuario.value.indexOf("@")<0){
alert("Email Invlido!");
document.form1.email_usuario.select();
document.form1.email_usuario.focus();
}
Faculdade de Tecnologia de So de Paulo
Prof Elisabete da Silva Santos
65
Javascript
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 Email"><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
66
Javascript
Exemplo 2: (Menu utilizando o tratador de eventos onClick em um boto genrico)
<html>
<head>
<title>formulrio</title>
<script language="Javascript">
function carrega_pagina(){
i = document.form1.paginas.selectedIndex;
pag = document.form1.paginas.options[i].value;
window.location = pag;
}
</script>
</head>
<body bgcolor="#6666BB" marginwidth="333" leftmargin="333">
<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">
Faculdade de Tecnologia de So de Paulo
Prof Elisabete da Silva Santos
67
Javascript
68
<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>
Javascript
69
Propriedades:
navigator. appCodeName
navigator.appName
navigator.appVersion
navigator.userAgent
navigator.systemLanguage
navigator.platform
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>
<script language="javascript">
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>
<script language="javascript">
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.
Faculdade de Tecnologia de So de Paulo
Prof Elisabete da Silva Santos
Javascript
70
Propriedade:
document.cookie
Exemplo:
Parte 1 - Enviando Dados para o Cookie
<html>
<head>
<title>Pgina armazenando um cookie</title>
<script language="javascript">
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
Parte 2 Exibindo os Dados da Pgina Anterior Armazenados no Cookie
<html>
<head>
<title> Pgina exibindo cookie </title>
<script language="javascript">
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>
<script language="javascript">
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>
Texto..<br> texto....<br> texto....<br>
Texto..<br> texto....<br> texto....<br>
Texto..<br> texto....<br> texto....<br>
Texto..<br> texto....<br> texto....<br>
Texto..<br> texto....<br> texto....<br>
Faculdade de Tecnologia de So de Paulo
Prof Elisabete da Silva Santos
71
72
Javascript
Texto..<br>
Texto..<br>
Texto..<br>
Texto..<br>
Texto..<br>
Texto..<br>
</body>
</html>
texto....<br>
texto....<br>
texto....<br>
texto....<br>
texto....<br>
texto....<br>
texto....<br>
texto....<br>
texto....<br>
texto....<br>
texto....<br>
texto....<br>
// Seta esquerda
// Instruo para o I.E.
// Seta para cima
// Instruo para o I.E.
// Seta direita
// Seta para baixo
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>
21. Bibliografia