Você está na página 1de 20

1

Linguagem
Javascript
Joo Srgio S. Assis
Ncleo de Computao Eletrnica da UFRJ
Tel. (021) 2598-3214 Fax. (021) 2270-8554
e-mail: joao@nce.ufrj.br
Slides originais: Maurcio Bomfim
Formao de Webmaster NCE/UFRJ 2
Referncias
Bibliogrficas:
Aprenda em 24 horas JavaScript 1.3
Editora Campus
Javascript, a Bblia
Danny Goodman
Editora Campus
Na Internet:
http://developer.netscape.com/docs/manuals/communicator/jsref/index.htm
http://msdn.microsoft.com/workshop/author/dhtml/dhtml_node_entry.asp
http://www.microsoft.com/jscript
http://www.w3schools.com/js/default.asp
Formao de Webmaster NCE/UFRJ 3
Aula 1
Entendendo Javascript
O que possvel fazer com Javascript ?
Embutindo cdigo Javascript numa pgina
Utilizando e armazenando valores
Alguns scripts simples
Formao de Webmaster NCE/UFRJ 4
O que JavaScript ?
Linguagem de script (interpretada) criada pela Netscape-Sun
O cdigo fonte includo na pgina HTML
Interpretador embutido nos navegadores
Sintaxe parecida com C, C++ e Java
Caractersticas rudimentares de OO
Programao dirigida por eventos
Javascript no Java !!!
Linguagem de programao completa
Linguagem Orientada a objetos
Compilada
Formao de Webmaster NCE/UFRJ 5
Capacidades de Javascript
Interao com o usurio
Validao de formulrios
Manipular o contedo da pgina
Manipulao de imagens e animao
Detectar verso do navegador
Detectar necessidade de instalao de plug-ins
Abrir e fechar janelas
Ler e escrever o estado do cliente em Cookies
Formao de Webmaster NCE/UFRJ 6
Tipos de JavaScript
Client-Side JavaScript (Web browser)
cdigo embutido no HTML
precisa ser interpretado pelo browser
Server-Side JavaScript: LiveWire
pode ser usado com Netscape Server
alternativa para scripts CGI
permite ler e escrever arquivos e bancos de dados
no servidor
2
Formao de Webmaster NCE/UFRJ 7
Verses de Javascript
Netscape 2.0 Javascript 1.0
Netscape 3.0 Javascript 1.1
Netscape 4.0 Javascript 1.2
Netscape 4.5 Javascript 1.3
Netscape 6.0 Javascript 1.5
I.Explorer 3.0 JScript 1.0
I.Explorer 4.0 JScript 3.0
I.Explorer 5.0 JScript 5.0
Formao de Webmaster NCE/UFRJ 8
Incluindo javascript numa pgina
H 3 formas de incluir cdigo numa pgina
Dentro da tag <SCRIPT> ... </SCRIPT>
No atributo HREF da tag <A> ... </A>
Num atributo associado a um evento
A tag <SCRIPT>
Cdigo na pgina
<script language=Javascript>
<!--
/* Comandos da Linguagem */
//-->
</script>
Cdigo num arquivo parte
<script language=Javascript src=arquivo.js></script>
Formao de Webmaster NCE/UFRJ 9
Cdigo includo na tag <SCRIPT>
A tag <SCRIPT> pode ser colocada em qualquer
lugar do documento
O cdigo executado na ordem em que aparece na
pgina
Quando a tag includa na seo <HEAD>,
executado antes da pgina ser exibida
No possvel fazer referncia a elementos HTML
ainda no criados
Tag <noscript> </noscript>
Formao de Webmaster NCE/UFRJ 10
Estrutura da linguagem
Letras maisculas letras minsculas
Espaos, tabs e newlines so ignorados
Comentrios
// ignora todo o texto at o fim da linha
/* ignora todo o texto at a seqncia */
Valores constantes
Joo Srgio String delimitada por aspas
Linguagem Javascript String delimitada por plicas
8, -12 Inteiros na base 10
047, -0123 Inteiros na base 8
0x5F, -0x10 Inteiros na base 16
3.1415 Nmeros de ponto flutuante
true, false Valores booleanos
Formao de Webmaster NCE/UFRJ 11
Declarao e uso de variveis
Nomes de variveis:
Letras, nmeros, _ e $
No pode comear com nmero
No pode ser igual a palavra reservada. Ex: true, var, if, etc.
Exemplos vlidos:
var i; // Cria a varivel i
i = 10; // Guarda o valor 10 dentro de i
var i = 2; // Faz as duas coisas ao mesmo tempo
i = 11; // A palavra var opcional a princpio
Tipos assumidos dinamicamente
i = 11;
i = onze;
Formao de Webmaster NCE/UFRJ 12
Entrada e Sada
window.prompt
Abre uma janela para pedir uma string ao usurio
nome = window.prompt(Qual o seu nome, );
window.alert
Abre uma janela para exibir um aviso ao usurio
window.alert (Senha incorreta: Acesso negado);
document.write
document.writeln
Escreve alguma coisa na pgina
document.write(<H1>Minha Pgina</H1>);
3
Formao de Webmaster NCE/UFRJ 13
Meu primeiro Javascript
Exemplo:
<html>
<head><title>Meu primeiro Javascript</title></head>
<body>
<h1>Meu primeiro Javascript</h1>
<script language=javascript>
document.write(<h3>alo mundo !!!</h3>);
</script>
<font size=4>acabou o script volta ao html</font>
</body>
</html>
Formao de Webmaster NCE/UFRJ 14
Meu segundo javascript
Exemplo:
<html><head><title>Meu segundo Javascript</title>
<script language="javascript">
var nome = window.prompt (qual o seu nome ?, );
</script>
</head>
<body bgcolor=white>
<h2 align=center>Esta a minha pgina.<hr></h2>
<script language="javascript">
document.write (<h3>seja bemvindo a minha pgina, );
document.write (nome, </h3><p><hr>);
</script>
</body></html>
Formao de Webmaster NCE/UFRJ 15
Aula 2
Operadores
Converso de tipos
Desvio condicional
Formao de Webmaster NCE/UFRJ 16
Operadores
Similares a C, C++, Java
Aritmticos
+ - Soma / Subtrao
* / Multiplicao / Diviso
% Resto da diviso
++ Incremento
- - Decremento
Atribuio
= Simples
+= /= %= Composta
Relacionais
== Igualdade
!= Desigualdade
< <= Menor / Menor igual
> >= Maior / Maior igual
Lgicos
! NOT
&& AND
|| OR
Formao de Webmaster NCE/UFRJ 17
Operadores
Concatenao de strings (+):
nome = joo; sobrenome = srgio;
nomeCompleto = nome + + sobrenome;
Atribuio Composta:
a += b; o mesmo que a = a + b;
x *= y; o mesmo que x = x * y;
Notao pr-fixa e ps-fixa
x = 10; a = ++x * 2; // x 11 a 22
y = 10; b = y++ * 2; // y 11 b 20
Formao de Webmaster NCE/UFRJ 18
Converso implcita de tipos
Nmeros, strings e booleanos comparados por valor:
3 == 3 // Resultado true
1 && true // Resultado true
Concatenao
dia = 15;
mes = agosto;
data = dia + de + mes; // data 15 de agosto
x = 555;
a = x + 10; // a 55510
b = x - 10; // b 545
4
Formao de Webmaster NCE/UFRJ 19
Converso explcita de tipos
parseInt (str) ou parseInt (str,base)
Converte uma string num nmero inteiro
Exemplo:
num = 3A;
x = parseInt(num); // x 3
y = parseInt(num,16); // y 58
parseFloat (str)
Converte uma string num nmero real
Exemplo:
z = parseFloat(3.15); // z 3.15
Formao de Webmaster NCE/UFRJ 20
Comando if - else
Permite executar comandos de acordo com
uma condio.
Sintaxe:
if ( condio )
comando;
if ( condio )
comando;
else
comando;
Formao de Webmaster NCE/UFRJ 21
Bloco de comandos
Forma de colocar mais de um comando sujeito a
condio do if.
Um conjunto de comandos delimitado por chaves.
Sintaxe:
{
comando;
comando;
...
comando;
}
Formao de Webmaster NCE/UFRJ 22
Exemplos de if-else
Exemplos:
if (estado==RJ)
cidade = Rio de Janeiro;
if ( hora < 12 ) {
manha = true;
document.write (bom dia!);
}
else {
manha = false;
document.write (boa tarde!);
}
Formao de Webmaster NCE/UFRJ 23
Funes Predefinidas
isNaN (valor)
Retorna true se o valor no for numrico
Exemplo:
x = window.prompt(Entre um numero:, );
if (isNaN(x))
window.alert(Valor no numrico !);
window.confirm (pergunta)
Abre uma janela para pedir uma string ao usurio
Exemplo:
if (window.confirm(Quer realmente sair da pgina ?))
window.alert(Ento adeus !);
Formao de Webmaster NCE/UFRJ 24
Operador condicional ternrio
Em situaes como:
if (x == 20)
y = 50;
else
y = 70;
Substitui o if:
y = (x == 20) ? 50 : 70;
5
Formao de Webmaster NCE/UFRJ 25
Aula 3
Lao while
Lao for
Comando break
Comando continue
Sintaxe mnima de funes
Funes com parmetros
Usando links para executar funes
Formao de Webmaster NCE/UFRJ 26
Laos While
Forma geral:
while ( condio )
{
comandos;
}
Exemplo:
var i = 1;
while ( i <= 10 )
{
document.write(i,<br>);
i++;
}
Permite repetir um comando ou bloco enquanto uma
condio for verdadeira
Formao de Webmaster NCE/UFRJ 27
Laos do - while
Repete um bloco de comandos enquanto uma condio
for verdadeira.
Teste da condio realizado no final da iterao.
Comandos so executados pelo menos uma vez
Exemplo:
var i = 0;
do {
document.write (i, <br>);
i++;
} while ( i <= 10 );
Formao de Webmaster NCE/UFRJ 28
Laos For
Repete um comando ou
bloco controlado por uma
varivel.
Forma geral:
for (atribuio;
condio;
incremento)
{
comandos;
}
Seguinte;
Atribuio
condio
Comandos
V
incremento
seguinte
F
Formao de Webmaster NCE/UFRJ 29
Separador de comandos no For
Vrgula funciona como separador de comandos na
atribuio e no incremento.
Exemplos:
for ( i = 0; i < 5; i++ )
document.write (i, <br>);
document.write (<h3>Tabela de Fatoriais</h3>);
for ( i = 1, fat = 1;
i < 6;
i++, fat *= i )
document.write(i, != , fat, <br>);
Formao de Webmaster NCE/UFRJ 30
Comandos Break e Continue
Permitem um controle adicional sobre os laos
de repetio
Break:
Pare a repetio j!
Continue:
Passe para a prxima iterao do lao!
6
Formao de Webmaster NCE/UFRJ 31
Funes (sintaxe mnima)
Sintaxe mnima:
function nomeDaFuncao()
{
comandos;
}
Invocao:
nomeDaFuncao();
Funes em Javascript
So identificadas por um NOME
Podem ou no receber PARMETROS
Podem ou no retornar um VALOR
Parnteses so obrigatrios mesmo sem parmetros.
Declarao x Invocao
Formao de Webmaster NCE/UFRJ 32
Funes com parmetros
Definio:
function junta (a, b, r)
{
r = a + b;
document.write(r = , r,
<br>);
}
Utilizao:
x = 100;
junta ( Joo , 23, x);
document.write(x = , x, <br>);
junta ( 123, 45, x);
document.write(x = , x, <br>);
Passagem de parmetros
feita dentro do ( ) que se segue ao nome da funo
Feita por valor para tipos simples e strings.
Formao de Webmaster NCE/UFRJ 33
Funes com parmetros
Exemplos:
function abreTabela (cor, borda)
{
document.writeln (<table bgcolor=, cor,
border=, borda, >);
}
Chamada:
abreTabela (white, 2);
Formao de Webmaster NCE/UFRJ 34
Usando links para executar cdigo
possvel associar uma funo seleo de um link
Exemplo:
<script>
function clicou()
{
window.alert (Ei, voc clicou !!!);
}
</script>
<a href=javascript:clicou()>No clique aqui</a>
Formao de Webmaster NCE/UFRJ 35
Aula 4
Entendendo objetos
Tipos de objeto
Objeto String
Objeto Array
Objeto Math
Formao de Webmaster NCE/UFRJ 36
Entendendo objetos
Programao Orientada a Objetos
Modelo de programao que busca refletir o
problema de uma forma mais prxima da realidade.
Javascript NO considerada uma linguagem
orientada a objetos.
O que um objeto ?
Forma de agrupar dados para representar estruturas
mais complexas.
Vinculao entre os dados e as operaes neles
relizadas.
7
Formao de Webmaster NCE/UFRJ 37
Mtodos, atributos e classes
Os dados que compem um objeto so chamados de
atributos ou propriedades.
As funes que manipulam estes dados so chamados
de mtodos.
Objetos com os mesmos atributos e operaes
pertencem a mesma classe.
Uma classe funciona como um tipo de dado da
linguagem e possvel criar variveis com estes tipos
(chamadas objetos ou instncias).
Formao de Webmaster NCE/UFRJ 38
Classes e Objetos
Exemplo:
Aluno
nome
nota trabalho
nota prova
nota_Final()
nome = joao
nota trabalho = 10
nota prova = 8
nome = sergio
nota trabalho = 7
nota prova = 9
Objeto A
Objeto B
Classe
Formao de Webmaster NCE/UFRJ 39
Propriedades e Mtodos
Propriedades so como variveis da linguagem, podem
ser de qualquer tipo (inclusive um objeto).
possvel acessar o valor do nome do aluno atravs
da sintaxe:
document.write(Nome = , a.nome);
a.nome = Joo Srgio;
possvel calcular a nota final atravs da sintaxe:
a.nota_final ();
Formao de Webmaster NCE/UFRJ 40
Criao de uma instncia
Os objetos so criados atravs de uma funo especial
chamada construtor.
O construtor executado atravs do operador new.
Exemplo:
O cdigo abaixo cria duas variveis do tipo Aluno.
a = new Aluno( Joo );
b = new Aluno( Srgio );
a.nota_trabalho = 10;
a.nota_prova = 8;
b.nota_trabalho = 7;
Formao de Webmaster NCE/UFRJ 41
Tipos de objeto
Embutidos ou predefinidos
Definem alguns tipos de dados compostos teis.
Date, Array, String , Math
Do browser
Refletem o documento e o navegador
Window, Document, Navigator, etc
Personalizados
Criados pelo programador para representar os dados
de seus problema.
Formao de Webmaster NCE/UFRJ 42
Objetos String
So implementadas em Javascript como objetos
embutidos.
Atribuindo:
nome = Maria de Ftima Rodrigues;
telefone = 2341-1234;
nce = new String(Ncleo de Computao Eletrnica);
Concatenando:
dados = nome + : + telefone;
Calculando o comprimento da string:
tamanho = dados.length;
8
Formao de Webmaster NCE/UFRJ 43
Alguns mtodos de String
toLowerCase() Converte para minsculas.
toUpperCase() Converte para maisculas.
charAt (n) Retorna o n-simo caracter (o primeiro caracter
est em zero).
indexOf (str, p) Procura str a partir da posio p, se no achar
retorna 1.
substring (pi, pf) Retorna a string comeada em pi e terminada
em pf 1.
Exemplos:
frase = O rato roeu a roupa do rei de roma;
x = frase.indexOf (ro); // x 7
y = frase.indexOf (ro, 8); // y 14
s = frase. substring (2, 6); // s rato
Formao de Webmaster NCE/UFRJ 44
Objeto Array
Varivel indexada capaz de armazenar um conjunto de
valores.
Tamanho pode ser alterado dinamicamente.
Acessando os elementos: operador [ ]
Inicializando:
va = new Array();
vb = new Array(39, 40, 100, 49);
vc = new Array(30);
vc[0] = 39; vc[1] = 40; vc[2] = 100; vc[3] = 49;
Formao de Webmaster NCE/UFRJ 45
Mtodos e tamanho do Array
Consultando o tamanho:
tamanho = valores.length;
Mtodos
sort () Ordena o vetor.
reverse () Inverte a ordem dos elementos.
Arrays x Strings
string.split (sep) Divide uma string num Array,
elementos delimitados por sep.
array.join (sep) Junta elementos de um array numa
string, intercalando sep.
Formao de Webmaster NCE/UFRJ 46
Objeto Math
Usado para efetuar clculos matemticos
Algumas propriedades
PI Valor de PI
SQRT2 Raiz quadrada de 2
Alguns Mtodos
abs(), max(), min() Valor absoluto, mximo e mnimo
cos(), sin(), tan() Funes trigonomtricas
exp(), log() Exponencial e logaritmo
round(), ceil(), floor() Truncamento e arredondamento
pow(), sqrt() Potncia e raiz quadrada
random() Gerador de nmeros aleatrios
Formao de Webmaster NCE/UFRJ 47
Utilizao do Math
Este objeto no precisa ser instanciado.
J existe uma instancia criada: Math.
Exemplos:
Converso de Graus para radianos
radianos = graus * Math.PI / 180;
Nmero aleatrio entre 1 e 100
num = Math.floor (Math.random() * 100) + 1;
Delta da equao do segundo grau
x= -b + Math.sqrt(Math.pow(b,2) - 4*a*c);
Formao de Webmaster NCE/UFRJ 48
Aula 5
Retornando valores de funes
Variveis locais
Definindo objetos personalizados
Criando uma hierarquia de objetos
Criando e utilizando mtodos
Propriedades como mtodos
9
Formao de Webmaster NCE/UFRJ 49
Comando return
Interrompe a execuo da funo e retorna para o local onde a
funo foi chamada.
Exemplo:
function montaLista()
{
while ( true )
{
num = window.prompt(Digite um nmero:, );
if ( parseInt(num) == 0 )
return;
document.write(<li>, num);
}
}
Formao de Webmaster NCE/UFRJ 50
Retorno de valores
Comando return seguido de uma expresso.
Valor enviado para onde a funo foi chamada.
Definindo uma funo:
function quadrado(x)
{
return x * x;
}
Utilizao:
k = quadrado( quadrado( x ) ); // Como parmetro
if ( quadrado(x) > 100 ) // Numa comparao
y = 3 * quadrado (x) + 5; // Numa expresso
Formao de Webmaster NCE/UFRJ 51
Variveis locais
Variveis locais:
S existem dentro da
funo, enquanto ela
estiver sendo executada.
Precisam ser declaradas
com var.
Exemplo:
function quadrado(x)
{
var a = x * x;
document.write(a = , a);
return a;
}
a = 10;
y = quadrado(5);
document.write(a = , a);
Formao de Webmaster NCE/UFRJ 52
Criando objetos personalizados
Permite criar estruturas de dados mais
sofisticadas
A criao feita em duas etapas:
Definio da classe, atravs da definio de sua
funo construtora.
Criao de uma ocorrncia (instncia) do objeto com
o operador new
Formao de Webmaster NCE/UFRJ 53
Definindo o construtor
// Definindo a classe Aluno
function Aluno(n)
{
this.nome = n;
this.nota_trabalho = this.nota_prova = 0;
}
// Criando uma instncia (varivel da classe)
var a = new Aluno(Joo);
var b = new Aluno(Srgio);
// Referenciando as propriedades
a.nota_trabalho = 10; a.nota_prova = 8;
b.nota_trabalho = 7; b.nota_prova = 9;
Formao de Webmaster NCE/UFRJ 54
Criando uma hierarquia de objetos
// Definindo as classes Data e Aluno
function Data(d, m, a) {
this.dia = d; this.mes = m; this.ano = a;
}
function Aluno(nom, aniv) {
this.nome = n; this.aniversario = aniv;
this.nota_trabalho = this.nota_prova = 0;
}
// Criando instncias (variveis da classe)
d = new Data(11, 2, 1969); a = new Aluno(Joo, d);
// Referenciando s propriedades
a.aniversario.dia = 10; a.aniversario.mes = 3;
10
Formao de Webmaster NCE/UFRJ 55
Criando um mtodo
// Definindo a classe Aluno
function media ( )
{
return (this.nota_trabalho + this.nota_prova) / 2;
}
function Aluno (nom, d, m, a)
{
this.nome = nom;
this.aniversario = new Data(d, m, a);
this.nota_trabalho = this.nota_prova = 0;
// Associando a funo classe
this.nota_final = media;
}
Formao de Webmaster NCE/UFRJ 56
Utilizando o mtodo
// Criando instncias (variveis da classe)
var a = new Aluno(Joo, 11, 2, 1969);
a.nota_trabalho = 10;
a.nota_prova = 8;
// Referenciando as propriedades e mtodos
document.write(Aluno: , a.nome);
document.write(Nascimento: ,
a.aniversario.dia, / ,
a.aniversario.mes, / ,
a.aniversario.ano);
document.write(Nota final: , a.nota_final() );
Formao de Webmaster NCE/UFRJ 57
Criando um Array de objetos
Exemplo:
turma = new Array();
turma[0] = new Aluno(Joo, 11, 2, 1969);
turma[0].nota_trabalho = 10;
turma[0].nota_prova = 8;
turma[1] = new Aluno(Srgio, 20, 1, 1972);
turma[1].nota_trabalho = 7;
turma[1].nota_prova = 9;
for ( i = 0; i < turma.length; i++ )
document.write(turma[i].nome, - , turma[i].nota_trabalho,
- , turma[i].nota_prova);
Formao de Webmaster NCE/UFRJ 58
Propriedades como Array
Como alternativa a sintaxe:
objeto.prop
Pode-se usar a sintaxe:
objeto [ prop ]
Exemplo:
document.bgColor = red;
// ==
document[bgColor] = red;
Formao de Webmaster NCE/UFRJ 59
Comando forin
Forma de percorrer as propriedades de um objeto
Em cada iterao a varivel de controle assume o valor
do nome de uma propriedade
Exemplo:
for (prop in document)
document.write(prop + = + document[prop] );
Formao de Webmaster NCE/UFRJ 60
Aula 6
Objeto Date
Hierarquia de objetos do browser
Objeto navigator
Identificando o navegador do usurio
Criando scripts independentes do navegador
Objeto window.document
Comando with
11
Formao de Webmaster NCE/UFRJ 61
Objeto Date
Permite trabalhar com datas e horrios
O objeto date precisa ser instanciado
Criando um objeto date:
// Pega data atual no sistema
DataHoje = new Date() ;
// Define uma data especfica
Data1 = new Date(February 15, 1997 12:02:00");
Data2 = new Date(1997, 1, 15);
Data3 = new Date(1997, 1, 15, 14, 02, 12);
Formao de Webmaster NCE/UFRJ 62
Mtodos do objeto Date
Obtendo partes da data:
getDate() dia do ms
getDay() dia da semana
getHours() horas
getMinutes() minutos
getMonth() ms
getSeconds() segundos
getTime() n miliseg. desde 01/01/70
getYear() ano
getFullYear() ano com 4 dgitos
Existem tambem os mtodos set para alterar a data armazenada
no objeto
Formao de Webmaster NCE/UFRJ 63
Comparao entre datas
Utilizao da funo getTime a forma mais eficiente
de comparar datas.
A data com o maior getTime a mais recente.
if ( data.getTime() > hoje.geTime() )
document.write( data ainda no chegou ! );
possvel calcular o nmero de dias entre duas datas
utilizando o nmero de ms de um dia:
msperday = 24 * 60 * 60 * 1000;
ndias = (data.getTime() - hoje.getTime()) / msperday;
Formao de Webmaster NCE/UFRJ 64
Objetos do browser
O navegador cria automaticamente uma hierarquia de
objetos refletindo alguns elementos inseridos na
pgina.
Os atributos da tag viram propriedades do objeto.
Algumas propriedades podem ter seu valor modificado.
O navegador mantm a coerncia entre o valor da
propriedade e o que est sendo visualizado pelo
usurio.
Formao de Webmaster NCE/UFRJ 65
Hierarquia de Objetos JavaScript
Navigator
Window
frames [ ]
document
forms [ ]
elements [ ] : button, checkbox, radio, text, textarea...
options [ ] (quando o elemento um select)
links [ ]
anchors [ ]
images [ ]
history
location
Formao de Webmaster NCE/UFRJ 66
Pgina exemplo
images[0]
forms[0]
images[1]
elements[0]
elements[1]
elements[2]
links[0]
links[1]
12
Formao de Webmaster NCE/UFRJ 67
Objeto navigator
Objeto navigator
Permite configurar as aplicaes para navegadores
diferentes
Propriedades:
appCodeName
appName
appVersion
platform
language (no explorer userLanguage e systemLanguage)
Formao de Webmaster NCE/UFRJ 68
Identificando o browser
Exemplo:
if (navigator.appName == Netscape)
document.write(Navegador Netscape !);
else if (navigator.appName.indexOf(Explorer) != -1)
document.write(Navegador Explorer !);
else
document.write(Navegador desconhecido !);
valor de appName
Netscape Netscape
Explorer Microsoft Internet Explorer
Formao de Webmaster NCE/UFRJ 69
Caractersticas do browser
Escrevendo as informaes do navegador:
<SCRIPT LANGUAGE="JavaScript">
document.write("<LI><B>Code Name:</B> ,
navigator.appCodeName);
document.write("<LI><B>App Name:</B> , navigator.appName);
document.write("<LI><B>App Version:</B> ,
navigator.appVersion);
document.write("<LI><B>User Agent:</B> , navigator.userAgent);
document.write("<LI><B>Language:</B> , navigator.language);
document.write("<LI><B>Platform:</B> , navigator.platform);
</SCRIPT>
Formao de Webmaster NCE/UFRJ 70
Objeto Document
Serve para definir/consultar caractersticas do
documento corrente
Algumas Propriedades:
bgcolor, fgcolor, linkcolor, vlinkcolor, alinkcolor
lastModified, referrer, title, etc
Objetos contidos num documento
links[ ]; anchors[ ]; forms [ ]; images[ ]; etc
Escrevendo texto num documento:
write (valor1, valor2, , valorN)
writeln (valor1, valor2, , valorN)
Formao de Webmaster NCE/UFRJ 71
Comando with
Economiza digitao quando se deseja
referenciar vrias propriedades de um mesmo
objeto
Exemplo:
with (document)
{
fgColor = #000000;
bgColor = #FFFFFF;
}
Formao de Webmaster NCE/UFRJ 72
Aula 7
Eventos bsico
O que so eventos
Captura e tratamento de eventos
Tipos de eventos
13
Formao de Webmaster NCE/UFRJ 73
Eventos
Um evento um acontecimento envolvendo:
Alguma atitude do usurio
o movimentar do mouse
o pressionar de uma tecla
o envio de um formulrio, etc
O funcionamento do navegador
o carregamento de uma pgina para a exibio
no conseguir carregar uma imagem, etc.
O evento associado quele objeto da pgina HTML onde
ocorreu
Trs modelos de tratamento de evento:
Explorer
Netscape 4.x
Netscape 6.x
Formao de Webmaster NCE/UFRJ 74
Objetos que podem sofrer eventos
No Explorer e Netscape 6.x qualquer objeto
No Netscape 4.x
imagens
links
formulrios
elementos de formulrios
input
select
textarea
window
document
layer
Formao de Webmaster NCE/UFRJ 75
Associando cdigo a Eventos
Atributos de tags HTML
<FORM NAME=f>
<INPUT TYPE=button VALUE=Calcula Raiz Quadrada
NAME=calcula onClick=calculaRaiz()>
</FORM>
Propriedades do objeto
nome do evento todo em minsculas
nome da funo sem os parnteses
Exemplo:
<SCRIPT>
document.f.calcula.onclick = calculaRaiz;
</SCRIPT>
Formao de Webmaster NCE/UFRJ 76
Nome dos eventos
Mouse
onMouseOver
onMouseOut
onMouseMove
onClick
onMouseDown
onMouseUp
Pgina (window)
onLoad
onUnload
onFocus
onBlur
Teclado
onKeyPress
onKeyDown
onKeyUp
Formulrio
onSubmit
onReset
Elementos de formulrios
eventos de mouse
onFocus
onBlur
onSelect
onChange
Formao de Webmaster NCE/UFRJ 77
Comportamento Padro
Comportamento padro associado:
Submit do form
Click do boto SUBMIT
Click em links
O comportamento padro executado aps a
rotina de tratamento de evento do usurio
Evento
Rotina do
Usurio
Tratamento
Padro
Formao de Webmaster NCE/UFRJ 78
Evitando o Comportamento Padro
Evento
Rotina do
Usurio
Tratamento
Padro
O comportamento padro pode ser evitado se a
rotina de tratamento de evento terminar com
return false
Forma de invocar a rotina do evento (Exemplo):
<form onsubmit=return criticaFormulario();>
return true
return false
14
Formao de Webmaster NCE/UFRJ 79
Referenciando um objeto
Atribuir um objeto a uma varivel cria uma referncia para o
objeto.
Modificaes em uma propriedade da varivel modifica a propriedade
correspondente do objeto.
obj = document.links[1];
obj.href = http://www.nce.ufrj.br;
Objetos passados como parmetros para funes so passados
por REFERNCIA:
function ApagaCampo( campo )
{
campo.value = ;
}
ApagaCampo( document.forms[0].elements[2] );
Formao de Webmaster NCE/UFRJ 80
A palavra-chave this
Serve para referenciar o objeto corrente.
O seu significado depende do contexto de onde ela usada.
O cdigo:
<form onsubmit=envia(this)>
<INPUT TYPE=TEXT onChange=critica(this)>
</form>
<a href=inicio.htm onmouseover=message(this)>
o mesmo que:
<form onsubmit=envia( document.forms[0] )>
<input type=text onChange=critica( document.forms[0].elements[0] )>
</form>
<a href=inicio.htm onmouseover=message( document.links[0] )>
Formao de Webmaster NCE/UFRJ 81
Aula 8
Formulrio em Javascript
Crtica de Campo
Crtica de formulrio
window.document.forms[]
Obtendo dados de formulrios
Formao de Webmaster NCE/UFRJ 82
Formulrios e Javascript
Uma das principais aplicaes de Javascript a
possibilidade de criticar dados fornecidos pelo
usurio atravs de formulrios HTML
O contedo dos formulrios pode ser acessado
pelo script atravs do objeto FORM
Formao de Webmaster NCE/UFRJ 83
Acessando o formulrio
<form name=meuform > </form>
Acessando um formulrio
document.forms [0] Pelo ndice
document.meuform Nome como propriedade
document.forms [meuform] Nome como ndice
Propriedades:
action, length, method
elements[ ] Acesso individual aos elementos
Mtodos
submit() Envia o formulrio ao servidor
reset() Limpa os campos do formulrio
Formao de Webmaster NCE/UFRJ 84
Captura de eventos
onSubmit
Dispara a rotina se o usurio clicar no boto submit.
Se a funo de tratamento do evento retornar false, o
formulrio no ser submetido.
onSubmit=return criticaFormulario();
onReset
Dispara a rotina se o usurio clicar no boto reset.
Se a funo de tratamento do evento retornar false, o
formulrio no ser apagado.
onReset=return confirm(Quer mesmo apagar tudo?);
15
Formao de Webmaster NCE/UFRJ 85
Elementos de um Formulrio
Cada elementos de interao do formulrio vira um
elemento do vetor elements.
O tipo do objeto de cada posio do vetor elements
depende do elemento do formulrio que ele representa.
Um elemento pode ser um dos seguintes objetos:
Campos de texto: text, hidden, password, file
reas de texto: textarea
Botes: button, reset, submit
Caixas de seleo: checkbox
Botes de opo: radio
Listas drop-down: select
Formao de Webmaster NCE/UFRJ 86
Campos de texto
Propriedades:
name, type, form, value, defaultValue
Mtodos:
focus(), blur(), select()
Eventos:
onFocus, onBlur, onChange, onSelect
Exemplo
Formao de Webmaster NCE/UFRJ 87
Botes
Propriedades:
name, type, form, value
Mtodos:
focus(), blur(), click()
Eventos:
onFocus, onBlur, onClick, onMouseDown,
onMouseUp
Formao de Webmaster NCE/UFRJ 88
CheckBox
Propriedades:
name, type, form, value, checked, defaultChecked
Mtodos:
focus(), blur(), click()
Eventos:
onFocus, onBlur, onClick
Exemplo
Formao de Webmaster NCE/UFRJ 89
Radio
Propriedades:
name, type, form, value, checked, defaultChecked
Mtodos:
focus(), blur(), click()
Eventos:
onFocus, onBlur, onClick
Botes que tem o mesmo name formam um vetor
Exemplo:
If (document.forms[0].sexo[0].checked) document.write(Masculino);
else if (document.forms[0].sexo[1].checked) document.write(Feminino);
Formao de Webmaster NCE/UFRJ 90
Listas drop-down (select)
Propriedades:
name, type, form, length, options [ ], selectedIndex
Mtodos:
focus(), blur()
Eventos:
onFocus, onBlur, onChange
16
Formao de Webmaster NCE/UFRJ 91
Listas drop-down (option)
Propriedades:
value, length, text, selected , defaultSelected, index
Construtor:
Option ([text [, value [, defaultSelected [, selected]]]])
Exemplo
Formao de Webmaster NCE/UFRJ 92
Crtica de formulrio
Trs formas:
captura do evento onSubmit do form
captura do evento onClick de um boto SUBMIT
captura do evento onClick de um boto comum
Boto submit tem a funcionalidade predefinida de enviar o
formulrio
Para evitar a ao padro de envio do formulrio a funo
deve retornar false
O envio do formulrio no terceiro caso deve ser feito pelo
mtodo submit() do form
Formao de Webmaster NCE/UFRJ 93
Critica no evento submit
function criticar(formulario)
{
if ( formulario.nome.value == ) // verifica se h erro no formulrio
{
alert (Erro: campo nome no preenchido.");
return false;
}
return true; // Est ok, pode ser enviado
}

<form action="/cgi-bin/x" onSubmit=return criticar(this)">


Nome: <input type=text name=nome>
</form>
Formao de Webmaster NCE/UFRJ 94
Critica no evento click
function criticar(formulario)
{
if ( isNaN(formulario.telefone.value) ) // verifica se h erro no formulrio
{
alert (Erro: telefone no numrico.");
return false;
}
formulario.submit(); // Est ok, pode ser enviado
}

<form action="/cgi-bin/x">
Telefone: <input type=text name=telefone><br>
<input type=button value=Enviar onClick= criticar(this.form)>
</form>
Formao de Webmaster NCE/UFRJ 95
Aula 9
Propriedades de window
Criando uma nova janela
Agendando execuo de comando
Redimensionando, rolando e imprimindo
Acessando outros frames
Propriedades do vdeo
Shopping cart
Formao de Webmaster NCE/UFRJ 96
Propriedades de window
Objeto central a todo o ambiente de execuo
Ao referenciar a prpria janela, o objeto pode ser omitido
Propriedades:
location mtodo reload()
history mtodo go(-1)
defaultStatus, status
name, opener, self, top, parent
Mtodos:
alert (), confirm (), prompt ()
open (), close ()
blur (), focus ()
setTimeout (), clearTimeout ()
17
Formao de Webmaster NCE/UFRJ 97
Abrindo novas janelas
Mtodo open()
Abrindo janelas secundrias
var jan = open(outraPag.html, janelaNova);
Configurando a janela
var jan = open(outraPag.html, janelaNova,
toolbar=no,location=no,directories=no,status=no,
menubar=no,scrollbars=yes,resizable=no,width=400,
height=350); // sem espaos entre as vrgulas !
Formao de Webmaster NCE/UFRJ 98
Referenciando outras janelas
Fechando janelas
window.close(); // Fecha a prpria janela
jan.close( ); // Fecha uma janela filha
if ( jan.closed ) // Informa se a janela est fechada
Escrevendo na janela
jan.document.write(<h2>Janela secundria</h2>);
jan.focus(); // Traz a janela para o primeiro plano
Acessando um mtodo ou varivel de outra janela
cost = opener.items[i].price * opener.items[i].quantity;
jan.updatecart();
Formao de Webmaster NCE/UFRJ 99
Limites de tempo
Os mtodos setTimeout e clearTimeout
variavel = setTimeout(instrucao, tempo);
Aguarda um intervalo de tempo antes de executar a
instruo
clearTimeout (variavel);
interrompe contagem de tempo do setTimeout
Formao de Webmaster NCE/UFRJ 100
Outros mtodos
Redimensionando
resizeBy(dx,dy) Relativo
resizeTo(tamx, tamy) Absoluto
Rolando
scrollBy(dx, dy) Relativo
scrollTo(posx, posy) Absoluto
Imprimindo (Netscape 6.x e Explorer 5.x)
print()
Formao de Webmaster NCE/UFRJ 101
Frames
Cada tag frame gera um objeto no array frames da
window do arquivo de layout.
Documentos exibidos em um frame podem acessar
este vetor atravs das propriedades de window:
parent window do arquivo de layout mais prximo.
top window do arquivo de layout topo da hierarquia.
O objeto frame equivalente a um objeto window.
Os frames podem ser acessados:
Pelo ndice de frames[ ] .
Pelo seu nome definido no atributo name do HTML.
Formao de Webmaster NCE/UFRJ 102
Top e parent
combinada s propriedades parent e top, til para
fazer referncias entre frames
top.frames[0] // sempre o frame superior
parent.frames[0] // depende de quem referencia
top.frames[2] // frame inferior central
top.centro // atravs do nome
0
0
1 2 3
18
Formao de Webmaster NCE/UFRJ 103
Vrios nveis de layout
Exemplo:
Top B == A
Parent B == A
Top D == A
Parent D == C
Arq. Layout A
Frameset
Frameset Frame
Frame B Frame
Arq. Layout C
Frameset
Frame Frame D
Formao de Webmaster NCE/UFRJ 104
Propriedades do vdeo
Objeto screen
Resoluo:
screen.width
screen.height
Area til:
screen.availWidth
screen.availHeight
Profundidade de cor:
screen.colorDepth
Formao de Webmaster NCE/UFRJ 105
Principios de Shopping Cart
A estrutura de dados deve ficar num documento
que no fecha nunca (no menu, por exemplo).
Variveis e funes globais podem ser
acessados como propriedades e mtodos do
objeto window onde esto definidos.
Utilizao de parent, top e opener para acessar
a estruturas e funes que estiverem em outros
frames ou janelas.
Formao de Webmaster NCE/UFRJ 106
Exemplo de Shopping cart
Formao de Webmaster NCE/UFRJ 107
Aula 10
O que um cookie
Propriedade document.cookie
Escrevendo um cookie
Lendo um cookie
escape e unescape
Formao de Webmaster NCE/UFRJ 108
O que so Cookies ?
Artifcio que permite que uma pgina web salve
temporariamente uma varivel na mquina do usurio
Cada cookie um par: nome=valor
Uso limitado por questes de segurana
arquivo cookies.txt
pouca quantidade de dados
300 cookies por web browser
20 cookies por web server
4K por cookie
mltiplas variveis so armazenadas em um s cookie
19
Formao de Webmaster NCE/UFRJ 109
Cookies com Javascript
Propriedade cookie do objeto document
Permite criar, ler e modificar um ou mais cookies
relativos pgina corrente.
Nome e valor no podem conter os caracteres ponto e
vrgula, igual, espao ou caracteres de controle.
Codificao do cookie
escape Troca caracteres proibidos por um cdigo
(%nn onde nn o cdigo do caracter).
unescape Inverso da funo escape.
Formao de Webmaster NCE/UFRJ 110
Escrevendo cookies
Atribuir um valor a document.cookie cria novo cookie.
Cookies com o mesmo nome, valor sobreescrito.
Exemplos:
// cria um cookie chamado Produto com valor 123
document.cookie = Produto=123;
// cria um novo cookie chamado User
document.cookie = User=Joao;
// redefine o cookie chamado Produto, que agora vale 789
document.cookie = Produto=789;
Formao de Webmaster NCE/UFRJ 111
Componentes de um cookie
Podem ser especificados quando um cookie criado.
Servem para definir a funcionalidade do cookie de uma
maneira geral.
So especificados separados por ; dentro da string
que define o cookie.
Uma vez definidos no podem mais ser acessados pela
aplicao.
Formao de Webmaster NCE/UFRJ 112
Componentes de um cookie
Nome = Valor
Nome identifica o cookie.
Valor a informao propriamente dita.
Expires = Wdy, DD-Mon-YYYY HH:MM:SS GMT
Define data de validade do Cookie (formato GMT).
Se omitido, o cookie vale s durante a sesso do browser.
Domain = dominio
Domnio para onde o Cookie deve ser devolvido
Se omitido, assume o nome do servidor a partir do qual o
cookie foi escrito.
Formao de Webmaster NCE/UFRJ 113
Componentes de um cookie
Path = caminho
Define os caminhos dentro do domnio, para onde o Cookie
deve ser devolvido.
Se omitido, assume o mesmo caminho do documento que
escreveu o cookie.
Secure
Se especificado, indica que o cookie s pode ser devolvido
atravs de uma conexo segura.
Formao de Webmaster NCE/UFRJ 114
Definindo componentes
document.cookie = Codigo= + escape(codigo) +
;expires=Sun, 25-Jul-1999 01:00:00 GMT;
document.cookie = User= + escape(usuario) +
;expires= + data.toGMTString() +
;domain=www.nce.ufrj.br +
;path=/ +
;secure;
20
Formao de Webmaster NCE/UFRJ 115
Lendo cookies
Basta consultar document.cookie
Retorna todos os cookies previamente gravados, que
devem ser devolvidos para esta pgina
Se houver mais de um cookie gravado, cabe ao
programa separa-los convenientemente.
Exemplo:
// meucookie recebe Produto=789;User=Joao
meucookie = document.cookie;
Formao de Webmaster NCE/UFRJ 116
Separando os cookies
function getCookie(nome)
{
var cookieVet = document.cookie.split(;);
for (c = 0; c < cookieVet.length; c++)
{
cv = cookieVet[c].split(=);
if ( cv[0] == nome)
return unescape( cv[1] );
}
return ;
}