Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Linguagem __Javascript
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
1
Linguagem
Javascript
João Sérgio S. Assis
Núcleo de Computação Eletrônica da UFRJ
Tel. (021) 2598-3214 Fax. (021) 2270-8554
e-mail: joao@nce.ufrj.br
Slides originais: Maurício Bomfim
Formação de Webmaster – NCE/UFRJ 2
Referências
Bibliográficas:
Aprenda em 24 horas JavaScript 1.3
Editora Campus
Javascript, a Bíblia
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
Formação de Webmaster – NCE/UFRJ 3
Aula 1
Entendendo Javascript
O que é possível fazer com Javascript ?
Embutindo código Javascript numa página
Utilizando e armazenando valores
Alguns scripts simples
Formação de Webmaster – NCE/UFRJ 4
O que é JavaScript ?
Linguagem de script (interpretada) criada pela Netscape-Sun
O código fonte é incluído na página HTML
Interpretador embutido nos navegadores
Sintaxe parecida com C, C++ e Java
Características rudimentares de OO
Programação dirigida por eventos
Javascript não é Java !!!
Linguagem de programação completa
Linguagem Orientada a objetos
Compilada
Formação de Webmaster – NCE/UFRJ 5
Capacidades de Javascript
Interação com o usuário
Validação de formulários
Manipular o conteúdo da página
Manipulação de imagens e animação
Detectar versão do navegador
Detectar necessidade de instalação de plug-ins
Abrir e fechar janelas
Ler e escrever o estado do cliente em Cookies
Formação de Webmaster – NCE/UFRJ 6
Tipos de JavaScript
Client-Side JavaScript (Web browser)
código é 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
Formação de Webmaster – NCE/UFRJ 7
Versões 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
Formação de Webmaster – NCE/UFRJ 8
Incluindo javascript numa página
Há 3 formas de incluir código numa página
Dentro da tag <SCRIPT> ... </SCRIPT>
No atributo HREF da tag <A> ... </A>
Num atributo associado a um evento
A tag <SCRIPT>
Código na página
<script language=“Javascript”>
<!--
/* Comandos da Linguagem */
//-->
</script>
Código num arquivo à parte
<script language=“Javascript” src=“arquivo.js”></script>
Formação de Webmaster – NCE/UFRJ 9
Código incluído na tag <SCRIPT>
A tag <SCRIPT> pode ser colocada em qualquer
lugar do documento
O código é executado na ordem em que aparece na
página
Quando a tag é incluída na seção <HEAD>, é
executado antes da página ser exibida
Não é possível fazer referência a elementos HTML
ainda não criados
Tag <noscript> … </noscript>
Formação de Webmaster – NCE/UFRJ 10
Estrutura da linguagem
Letras maiúsculas ≠ letras minúsculas
Espaços, tabs e newlines são ignorados
Comentários
// ignora todo o texto até o fim da linha
/* ignora todo o texto até a seqüência */
Valores constantes
“João Sérgio” 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 Números de ponto flutuante
true, false Valores booleanos
Formação de Webmaster – NCE/UFRJ 11
Declaração e uso de variáveis
Nomes de variáveis:
Letras, números, ‘_’ e ‘$’
Não pode começar com número
Não pode ser igual a palavra reservada. Ex: true, var, if, etc.
Exemplos válidos:
var i; // Cria a variável 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 princípio
Tipos assumidos dinamicamente
i = 11;
i = “onze”;
Formação de Webmaster – NCE/UFRJ 12
Entrada e Saída
window.prompt
Abre uma janela para pedir uma string ao usuário
nome = window.prompt(“Qual o seu nome”, “”);
window.alert
Abre uma janela para exibir um aviso ao usuário
window.alert (“Senha incorreta: Acesso negado”);
document.write
document.writeln
Escreve alguma coisa na página
document.write(“<H1>Minha Página</H1>”);
3
Formação 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>
Formação 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 página.<hr></h2>
<script language="javascript">
document.write (“<h3>seja bemvindo a minha página, ”);
document.write (nome, “</h3><p><hr>”);
</script>
</body></html>
Formação de Webmaster – NCE/UFRJ 15
Aula 2
Operadores
Conversão de tipos
Desvio condicional
Formação de Webmaster – NCE/UFRJ 16
Operadores
Similares a C, C++, Java
Aritméticos
+ - Soma / Subtração
* / Multiplicação / Divisão
% Resto da divisão
++ Incremento
- - Decremento
Atribuição
= Simples
+= /= %= Composta
Relacionais
== Igualdade
!= Desigualdade
< <= Menor / Menor igual
> >= Maior / Maior igual
Lógicos
! NOT
&& AND
|| OR
Formação de Webmaster – NCE/UFRJ 17
Operadores
Concatenação de strings (+):
nome = “joão”; sobrenome = “sérgio”;
nomeCompleto = nome + “ ” + sobrenome;
Atribuição Composta:
a += b; é o mesmo que a = a + b;
x *= y; é o mesmo que x = x * y;
Notação pré-fixa e pós-fixa
x = 10; a = ++x * 2; // x ← 11 a ← 22
y = 10; b = y++ * 2; // y ← 11 b ← 20
Formação de Webmaster – NCE/UFRJ 18
Conversão implícita de tipos
Números, strings e booleanos comparados por valor:
3 == “3” // Resultado true
1 && true // Resultado true
Concatenação
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
Formação de Webmaster – NCE/UFRJ 19
Conversão explícita de tipos
parseInt (str) ou parseInt (str,base)
Converte uma string num número inteiro
Exemplo:
num = “3A”;
x = parseInt(num); // x ← 3
y = parseInt(num,16); // y ← 58
parseFloat (str)
Converte uma string num número real
Exemplo:
z = parseFloat(“3.15”); // z ← 3.15
Formação de Webmaster – NCE/UFRJ 20
Comando if - else
Permite executar comandos de acordo com
uma condição.
Sintaxe:
if ( condição )
comando;
if ( condição )
comando;
else
comando;
Formação de Webmaster – NCE/UFRJ 21
Bloco de comandos
Forma de colocar mais de um comando sujeito a
condição do if.
Um conjunto de comandos delimitado por chaves.
Sintaxe:
{
comando;
comando;
...
comando;
}
Formação 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!”);
}
Formação de Webmaster – NCE/UFRJ 23
Funções Predefinidas
isNaN (valor)
Retorna “true” se o valor não for numérico
Exemplo:
x = window.prompt(“Entre um numero:”, “ ”);
if (isNaN(x))
window.alert(“Valor não é numérico !”);
window.confirm (pergunta)
Abre uma janela para pedir uma string ao usuário
Exemplo:
if (window.confirm(“Quer realmente sair da página ?”))
window.alert(“Então adeus !”);
Formação de Webmaster – NCE/UFRJ 24
Operador condicional ternário
Em situações como:
if (x == 20)
y = 50;
else
y = 70;
Substitui o if:
y = (x == 20) ? 50 : 70;
5
Formação de Webmaster – NCE/UFRJ 25
Aula 3
Laço while
Laço for
Comando break
Comando continue
Sintaxe mínima de funções
Funções com parâmetros
Usando links para executar funções
Formação de Webmaster – NCE/UFRJ 26
Laços While
Forma geral:
while ( condição )
{
comandos;
}
Exemplo:
var i = 1;
while ( i <= 10 )
{document.write(i,“<br>”);
i++;
}
Permite repetir um comando ou bloco enquanto uma
condição for verdadeira
Formação de Webmaster – NCE/UFRJ 27
Laços do - while
Repete um bloco de comandos enquanto uma condição
for verdadeira.
Teste da condição é realizado no final da iteração.
Comandos são executados pelo menos uma vez
Exemplo:
var i = 0;
do {
document.write (i, “<br>”);
i++;
} while ( i <= 10 );
Formação de Webmaster – NCE/UFRJ 28
Laços For
Repete um comando ou
bloco controlado por uma
variável.
Forma geral:
for (atribuição;
condição;
incremento)
{
comandos;
}
Seguinte;
Atribuição
condição
Comandos
V
incremento
seguinte
F
Formação de Webmaster – NCE/UFRJ 29
Separador de comandos no For
Vírgula funciona como separador de comandos na
atribuição 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>”);
Formação de Webmaster – NCE/UFRJ 30
Comandos Break e Continue
Permitem um controle adicional sobre os laços
de repetição
Break:
Pare a repetição já!
Continue:
Passe para a próxima iteração do laço!
6
Formação de Webmaster – NCE/UFRJ 31
Funções (sintaxe mínima)
Sintaxe mínima:
function nomeDaFuncao()
{
comandos;
}
Invocação:
nomeDaFuncao();
Funções em Javascript
São identificadas por um NOME
Podem ou não receber PARÂMETROS
Podem ou não retornar um VALOR
Parênteses são obrigatórios mesmo sem parâmetros.
Declaração x Invocação
Formação de Webmaster – NCE/UFRJ 32
Funções com parâmetros
Definição:
function junta (a, b, r)
{
r = a + b;
document.write(“r = “, r,
“<br>”);
}
Utilização:
x = 100;
junta ( “João ”, 23, x);
document.write(“x = ”, x, “<br>”);
junta ( 123, 45, x);
document.write(“x = ”, x, “<br>”);
Passagem de parâmetros
É feita dentro do ( ) que se segue ao nome da função
Feita por valor para tipos simples e strings.
Formação de Webmaster – NCE/UFRJ 33
Funções com parâmetros
Exemplos:
function abreTabela (cor, borda)
{
document.writeln (“<table bgcolor=“, cor,
“ border=“, borda, “>”);
}
Chamada:
abreTabela (“white”, 2);
Formação de Webmaster – NCE/UFRJ 34
Usando links para executar código
É possível associar uma função à seleção de um link
Exemplo:
<script>
function clicou()
{
window.alert (“Ei, você clicou !!!”);
}
</script>
<a href=“javascript:clicou()”>Não clique aqui</a>
Formação de Webmaster – NCE/UFRJ 35
Aula 4
Entendendo objetos
Tipos de objeto
Objeto String
Objeto Array
Objeto Math
Formação de Webmaster – NCE/UFRJ 36
Entendendo objetos
Programação Orientada a Objetos
Modelo de programação que busca refletir o
problema de uma forma mais próxima da realidade.
Javascript NÃO É considerada uma linguagem
orientada a objetos.
O que é um objeto ?
Forma de agrupar dados para representar estruturas
mais complexas.
Vinculação entre os dados e as operações neles
relizadas.
7
Formação de Webmaster – NCE/UFRJ 37
Métodos, atributos e classes
Os dados que compõem um objeto são chamados de
atributos ou propriedades.
As funções que manipulam estes dados são chamados
de métodos.
Objetos com os mesmos atributos e operações
pertencem a mesma classe.
Uma classe funciona como um tipo de dado da
linguagem e é possível criar variáveis com estes tipos
(chamadas objetos ou instâncias).
Formação 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
Formação de Webmaster – NCE/UFRJ 39
Propriedades e Métodos
Propriedades são como variáveis da linguagem, podem
ser de qualquer tipo (inclusive um objeto).
É possível acessar o valor do nome do aluno através
da sintaxe:
document.write(“Nome = ”, a.nome);
a.nome = “João Sérgio”;
É possível calcular a nota final através da sintaxe:
a.nota_final ();
Formação de Webmaster – NCE/UFRJ 40
Criação de uma instância
Os objetos são criados através de uma função especial
chamada construtor.
O construtor é executado através do operador new.
Exemplo:
O código abaixo cria duas variáveis do tipo Aluno.
a = new Aluno( “João” );
b = new Aluno( “Sérgio” );
a.nota_trabalho = 10;
a.nota_prova = 8;
b.nota_trabalho = 7;
Formação 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.
Formação de Webmaster – NCE/UFRJ 42
Objetos String
São implementadas em Javascript como objetos
embutidos.
Atribuindo:
nome = ‘Maria de Fátima Rodrigues’;
telefone = “2341-1234”;
nce = new String(“Núcleo de Computação Eletrônica”);
Concatenando:
dados = nome + “:” + telefone;
Calculando o comprimento da string:
tamanho = dados.length;
8
Formação de Webmaster – NCE/UFRJ 43
Alguns métodos de String
toLowerCase() Converte para minúsculas.
toUpperCase() Converte para maiúsculas.
charAt (n) Retorna o n-ésimo caracter (o primeiro caracter
está em zero).
indexOf (str, p) Procura str a partir da posição p, se não achar
retorna –1.
substring (pi, pf) Retorna a string começada 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”
Formação de Webmaster – NCE/UFRJ 44
Objeto Array
Variável 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;
Formação de Webmaster – NCE/UFRJ 45
Métodos e tamanho do Array
Consultando o tamanho:
tamanho = valores.length;
Métodos
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.
Formação de Webmaster – NCE/UFRJ 46
Objeto Math
Usado para efetuar cálculos matemáticos
Algumas propriedades
PI Valor de PI
SQRT2 Raiz quadrada de 2
Alguns Métodos
abs(), max(), min() Valor absoluto, máximo e mínimo
cos(), sin(), tan() Funções trigonométricas
exp(), log() Exponencial e logaritmo
round(), ceil(), floor() Truncamento e arredondamento
pow(), sqrt() Potência e raiz quadrada
random() Gerador de números aleatórios
Formação de Webmaster – NCE/UFRJ 47
Utilização do Math
Este objeto não precisa ser instanciado.
Já existe uma instancia criada: Math.
Exemplos:
Conversão de Graus para radianos
radianos = graus * Math.PI / 180;
Número aleatório entre 1 e 100
num = Math.floor (Math.random() * 100) + 1;
Delta da equação do segundo grau
x= -b + Math.sqrt(Math.pow(b,2) - 4*a*c);
Formação de Webmaster – NCE/UFRJ 48
Aula 5
Retornando valores de funções
Variáveis locais
Definindo objetos personalizados
Criando uma hierarquia de objetos
Criando e utilizando métodos
Propriedades como métodos
9
Formação de Webmaster – NCE/UFRJ 49
Comando return
Interrompe a execução da função e retorna para o local onde a
função foi chamada.
Exemplo:
function montaLista()
{
while ( true )
{
num = window.prompt(“Digite um número:”, “ ”);
if ( parseInt(num) == 0 )
return;
document.write(“<li>”, num);
}
}
Formação de Webmaster – NCE/UFRJ 50
Retorno de valores
Comando “return” seguido de uma expressão.
Valor é enviado para onde a função foi chamada.
Definindo uma função:
function quadrado(x)
{
return x * x;
}
Utilização:
k = quadrado( quadrado( x ) ); // Como parâmetro
if ( quadrado(x) > 100 ) // Numa comparação
y = 3 * quadrado (x) + 5; // Numa expressão
Formação de Webmaster – NCE/UFRJ 51
Variáveis locais
Variáveis locais:
Só existem dentroda
função, 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);
Formação de Webmaster – NCE/UFRJ 52
Criando objetos personalizados
Permite criar estruturas de dados mais
sofisticadas
A criação é feita em duas etapas:
Definição da classe, através da definição de sua
função construtora.
Criação de uma ocorrência (instância) do objeto com
o operador new
Formação 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 instância (variável da classe)
var a = new Aluno(“João”);
var b = new Aluno(“Sérgio”);
// Referenciando as propriedades
a.nota_trabalho = 10; a.nota_prova = 8;
b.nota_trabalho = 7; b.nota_prova = 9;
Formação 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 instâncias (variáveis da classe)
d = new Data(11, 2, 1969); a = new Aluno(“João”, d);
// Referenciando às propriedades
a.aniversario.dia = 10; a.aniversario.mes = 3;
10
Formação de Webmaster – NCE/UFRJ 55
Criando um método
// 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 função à classe
this.nota_final = media;
}
Formação de Webmaster – NCE/UFRJ 56
Utilizando o método
// Criando instâncias (variáveis da classe)
var a = new Aluno(“João”, 11, 2, 1969);
a.nota_trabalho = 10;
a.nota_prova = 8;
// Referenciando as propriedades e métodos
document.write(“Aluno: ”, a.nome);
document.write(“Nascimento: ”,
a.aniversario.dia, “ / ”,
a.aniversario.mes, “ / ”,
a.aniversario.ano);
document.write(“Nota final: ”, a.nota_final() );
Formação de Webmaster – NCE/UFRJ 57
Criando um Array de objetos
Exemplo:
turma = new Array();
turma[0] = new Aluno(“João”, 11, 2, 1969);
turma[0].nota_trabalho = 10;
turma[0].nota_prova = 8;
turma[1] = new Aluno(“Sérgio”, 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);
Formação 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”;
Formação de Webmaster – NCE/UFRJ 59
Comando for…in
Forma de percorrer as propriedades de um objeto
Em cada iteração a variável de controle assume o valor
do nome de uma propriedade
Exemplo:
for (prop in document)
document.write(prop + “ = ” + document[prop] );
Formação de Webmaster – NCE/UFRJ 60
Aula 6
Objeto Date
Hierarquia de objetos do browser
Objeto navigator
Identificando o navegador do usuário
Criando scripts independentes do navegador
Objeto window.document
Comando with
11
Formação de Webmaster – NCE/UFRJ 61
Objeto Date
Permite trabalhar com datas e horários
O objeto date precisa ser instanciado
Criando um objeto date:
// Pega data atual no sistema
DataHoje = new Date() ;
// Define uma data específica
Data1 = new Date(“February 15, 1997 12:02:00");
Data2 = new Date(1997, 1, 15);
Data3 = new Date(1997, 1, 15, 14, 02, 12);
Formação de Webmaster – NCE/UFRJ 62
Métodos do objeto Date
Obtendo partes da data:
getDate() dia do mês
getDay() dia da semana
getHours() horas
getMinutes() minutos
getMonth() mês
getSeconds() segundos
getTime() nº miliseg. desde 01/01/70
getYear() ano
getFullYear() ano com 4 dígitos
Existem tambem os métodos set para alterar a data armazenada
no objeto
Formação de Webmaster – NCE/UFRJ 63
Comparação entre datas
Utilização da função 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 não chegou !” );
É possível calcular o número de dias entre duas datas
utilizando o número de ms de um dia:
msperday = 24 * 60 * 60 * 1000;
ndias = (data.getTime() - hoje.getTime()) / msperday;
Formação de Webmaster – NCE/UFRJ 64
Objetos do browser
O navegador cria automaticamente uma hierarquia de
objetos refletindo alguns elementos inseridos na
página.
Os atributos da tag viram propriedades do objeto.
Algumas propriedades podem ter seu valor modificado.
O navegador mantém a coerência entre o valor da
propriedade e o que está sendo visualizado pelo
usuário.
Formação 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
Formação de Webmaster – NCE/UFRJ 66
Página exemplo
images[0]
forms[0]
images[1]
elements[0]
elements[1]
elements[2]
links[0]
links[1]
12
Formação de Webmaster – NCE/UFRJ 67
Objeto navigator
Objeto navigator
Permite configurar as aplicações para navegadores
diferentes
Propriedades:
appCodeName
appName
appVersion
platform
language (no explorer userLanguage e systemLanguage)
Formação 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”
Formação de Webmaster – NCE/UFRJ 69
Características do browser
Escrevendo as informações 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>
Formação de Webmaster – NCE/UFRJ 70
Objeto Document
Serve para definir/consultar características 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)
Formação de Webmaster – NCE/UFRJ 71
Comando with
Economiza digitação quando se deseja
referenciar várias propriedades de um mesmo
objeto
Exemplo:
with (document)
{
fgColor = “#000000”;
bgColor = “#FFFFFF”;
}
Formação de Webmaster – NCE/UFRJ 72
Aula 7
Eventos básico
O que são eventos
Captura e tratamento de eventos
Tipos de eventos
13
Formação de Webmaster – NCE/UFRJ 73
Eventos
Um evento é um acontecimento envolvendo:
Alguma atitude do usuário
o movimentar do mouse
o pressionar de uma tecla
o envio de um formulário, etc
O funcionamento do navegador
o carregamento de uma página para a exibição
não conseguir carregar uma imagem, etc.
O evento é associado àquele objeto da página HTML onde
ocorreu
Três modelos de tratamento de evento:
Explorer
Netscape 4.x
Netscape 6.x
Formação de Webmaster – NCE/UFRJ 74
Objetos que podem sofrer eventos
No Explorer e Netscape 6.x qualquer objeto
No Netscape 4.x
imagens
links
formulários
elementos de formulários
input
select
textarea
window
document
layer
Formação de Webmaster – NCE/UFRJ 75
Associando código 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 minúsculas
nome da função sem os parênteses
Exemplo:
<SCRIPT>
document.f.calcula.onclick = calculaRaiz;
</SCRIPT>
Formação de Webmaster – NCE/UFRJ 76
Nome dos eventos
Mouse
onMouseOver
onMouseOut
onMouseMove
onClick
onMouseDown
onMouseUp
Página (window)
onLoad
onUnload
onFocus
onBlur
Teclado
onKeyPress
onKeyDown
onKeyUp
Formulário
onSubmit
onReset
Elementos de formulários
eventos de mouse
onFocus
onBlur
onSelect
onChange
Formação de Webmaster – NCE/UFRJ 77
Comportamento Padrão
Comportamento padrão associado:
Submit do form
Click do botão SUBMIT
Click em links
O comportamento padrão é executado após a
rotina de tratamento de evento do usuário
Evento Rotina do
Usuário
Tratamento
Padrão
Formação de Webmaster – NCE/UFRJ 78
Evitando o Comportamento Padrão
Evento Rotina do
Usuário
Tratamento
Padrão
O comportamento padrão 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
Formação de Webmaster – NCE/UFRJ 79
Referenciando um objeto
Atribuir um objeto a uma variável cria uma referência para o
objeto.
Modificações em uma propriedade da variável modifica a propriedade
correspondente do objeto.
obj = document.links[1];
obj.href = “http://www.nce.ufrj.br”;
Objetos passados como parâmetros para funções são passados
por REFERÊNCIA:
function ApagaCampo( campo )
{
campo.value = “”;
}
ApagaCampo( document.forms[0].elements[2] );
Formação 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 código:
<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] )”>
Formação de Webmaster – NCE/UFRJ 81
Aula 8
Formulário em Javascript
Crítica de Campo
Crítica de formulário
window.document.forms[]
Obtendo dados de formulários
Formação de Webmaster – NCE/UFRJ 82
Formulários e Javascript
Uma das principais aplicações de Javascript é a
possibilidade de criticar dados fornecidos pelo
usuário através de formulários HTML
O conteúdo dos formulários pode ser acessado
pelo script através do objeto FORM
Formação de Webmaster – NCE/UFRJ 83
Acessando o formulário
<form name=“meuform” … > … </form>
Acessando um formulário
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
Métodos
submit() Envia o formulário ao servidor
reset() Limpa os campos do formulário
Formação de Webmaster – NCE/UFRJ 84
Captura de eventos
onSubmit
Dispara a rotina se o usuário clicar no botão submit.
Se a função de tratamento do evento retornar false, o
formulário não será submetido.
onSubmit=“return criticaFormulario();”
onReset
Dispara a rotina se o usuário clicar no botão reset.
Se a função de tratamento do evento retornar false, o
formulário não será apagado.
onReset=“return confirm(‘Quer mesmo apagar tudo?’);”
15
Formação de Webmaster – NCE/UFRJ 85
Elementos de um Formulário
Cada elementos de interação do formulário vira um
elemento do vetor elements.
O tipo do objeto de cada posição do vetor elements
depende do elemento do formulário que ele representa.
Um elemento pode ser um dos seguintes objetos:
Campos de texto: text, hidden, password, file
Áreas de texto: textarea
Botões: button, reset, submit
Caixas de seleção: checkbox
Botões de opção: radio
Listas drop-down: select
Formação de Webmaster – NCE/UFRJ 86
Campos de texto
Propriedades:
name, type, form, value, defaultValue
Métodos:
focus(), blur(), select()
Eventos:
onFocus, onBlur, onChange, onSelect
Exemplo
Formação de Webmaster – NCE/UFRJ 87
Botões
Propriedades:
name, type, form, value
Métodos:
focus(), blur(), click()
Eventos:
onFocus, onBlur, onClick, onMouseDown,
onMouseUp
Formação de Webmaster – NCE/UFRJ 88
CheckBox
Propriedades:
name, type, form, value, checked, defaultChecked
Métodos:
focus(), blur(), click()
Eventos:
onFocus, onBlur, onClick
Exemplo
Formação de Webmaster – NCE/UFRJ 89
Radio
Propriedades:
name, type, form, value, checked, defaultChecked
Métodos:
focus(), blur(), click()
Eventos:
onFocus, onBlur, onClick
Botões 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”);
Formação de Webmaster – NCE/UFRJ 90
Listas drop-down (select)
Propriedades:
name, type, form, length, options [ ], selectedIndex
Métodos:
focus(), blur()
Eventos:
onFocus, onBlur, onChange
16
Formação de Webmaster – NCE/UFRJ 91
Listas drop-down (option)
Propriedades:
value, length, text, selected , defaultSelected, index
Construtor:
Option ([text [, value [, defaultSelected [, selected]]]])
Exemplo
Formação de Webmaster – NCE/UFRJ 92
Crítica de formulário
Três formas:
captura do evento onSubmit do form
captura do evento onClick de um botão SUBMIT
captura do evento onClick de um botão comum
Botão submit tem a funcionalidade predefinida de enviar o
formulário
Para evitar a ação padrão de envio do formulário a função
deve retornar false
O envio do formulário no terceiro caso deve ser feito pelo
método submit() do form
Formação de Webmaster – NCE/UFRJ 93
Critica no evento submit
function criticar(formulario)
{
if ( formulario.nome.value == “” ) // verifica se há erro no formulário
{
alert (”Erro: campo nome não 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>
Formação de Webmaster – NCE/UFRJ 94
Critica no evento click
function criticar(formulario)
{
if ( isNaN(formulario.telefone.value) ) // verifica se há erro no formulário
{
alert (”Erro: telefone não numérico.");
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>
Formação de Webmaster – NCE/UFRJ 95
Aula 9
Propriedades de window
Criando uma nova janela
Agendando execução de comando
Redimensionando, rolando e imprimindo
Acessando outros frames
Propriedades do vídeo
Shopping cart
Formação de Webmaster – NCE/UFRJ 96
Propriedades de window
Objeto central a todo o ambiente de execução
Ao referenciar a própria janela, o objeto pode ser omitido
Propriedades:
location método reload()
history método go(-1)
defaultStatus, status
name, opener, self, top, parent
Métodos:
alert (), confirm (), prompt ()
open (), close ()
blur (), focus ()
setTimeout (), clearTimeout ()
17
Formação de Webmaster – NCE/UFRJ 97
Abrindo novas janelas
Método open()
Abrindo janelas secundárias
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 espaços entre as vírgulas !
Formação de Webmaster – NCE/UFRJ 98
Referenciando outras janelas
Fechando janelas
window.close(); // Fecha a própria janela
jan.close( ); // Fecha uma janela filha
if ( jan.closed ) // Informa se a janela está fechada
Escrevendo na janela
jan.document.write(“<h2>Janela secundária</h2>”);
jan.focus(); // Traz a janela para o primeiro plano
Acessando um método ou variável de outra janela
cost = opener.items[i].price * opener.items[i].quantity;
jan.updatecart();
Formação de Webmaster – NCE/UFRJ 99
Limites de tempo
Os métodos setTimeout e clearTimeout
variavel = setTimeout(“instrucao”,tempo);
Aguarda um intervalo de tempo antes de executar a
instrução
clearTimeout (variavel);
interrompe contagem de tempo do setTimeout
Formação de Webmaster – NCE/UFRJ 100
Outros métodos
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()
Formação 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 através das propriedades de window:
parent – window do arquivo de layout mais próximo.
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.
Formação de Webmaster – NCE/UFRJ 102
Top e parent
combinada às propriedades parent e top, é útil para
fazer referências entre frames
top.frames[0] // sempre o frame superior
parent.frames[0] // depende de quem referencia
top.frames[2] // frame inferior central
top.centro // através do nome
0
01 2 3
18
Formação de Webmaster – NCE/UFRJ 103
Vários níveis de layout
Exemplo:
Top B == A
Parent B == A
Top D == A
Parent D == C
Arq. Layout A
Frameset
FramesetFrame
Frame B Frame
Arq. Layout C
Frameset
FrameFrame D
Formação de Webmaster – NCE/UFRJ 104
Propriedades do vídeo
Objeto screen
Resolução:
screen.width
screen.height
Area útil:
screen.availWidth
screen.availHeight
Profundidade de cor:
screen.colorDepth
Formação de Webmaster – NCE/UFRJ 105
Principios de Shopping Cart
A estrutura de dados deve ficar num documento
que não fecha nunca (no menu, por exemplo).
Variáveis e funções globais podem ser
acessados como propriedades e métodos do
objeto window onde estão definidos.
Utilização de parent, top e opener para acessar
a estruturas e funções que estiverem em outros
frames ou janelas.
Formação de Webmaster – NCE/UFRJ 106
Exemplo de Shopping cart
Formação de Webmaster – NCE/UFRJ 107
Aula 10
O que é um cookie
Propriedade document.cookie
Escrevendo um cookie
Lendo um cookie
escape e unescape
Formação de Webmaster – NCE/UFRJ 108
O que são Cookies ?
Artifício que permite que uma página web salve
temporariamente uma variável na máquina do usuário
Cada cookie é um par: nome=valor
Uso limitado por questões de segurança
arquivo cookies.txt
pouca quantidade de dados
300 cookies por web browser
20 cookies por web server
4K por cookie
múltiplas variáveis são armazenadas em um só cookie
19
Formação de Webmaster – NCE/UFRJ 109
Cookies com Javascript
Propriedade cookie do objeto document
Permite criar, ler e modificar um ou mais cookies
relativos à página corrente.
Nome e valor não podem conter os caracteres ponto e
vírgula, igual, espaço ou caracteres de controle.
Codificação do cookie
escape Troca caracteres proibidos por um código
(%nn – onde nn é o código do caracter).
unescape Inverso da função escape.
Formação 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”;
Formação 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.
São especificados separados por “;” dentro da string
que define o cookie.
Uma vez definidos não podem mais ser acessados pela
aplicação.
Formação de Webmaster – NCE/UFRJ 112
Componentes de um cookie
Nome = Valor
Nome identifica o cookie.
Valor é a informação 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 sessão do browser.
Domain = dominio
Domínio para onde o Cookie deve ser devolvido
Se omitido, assume o nome do servidor a partir do qual o
cookie foi escrito.
Formação de Webmaster – NCE/UFRJ 113
Componentes de um cookie
Path = caminho
Define os caminhos dentro do domínio, 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
através de uma conexão segura.
Formação 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
Formação de Webmaster – NCE/UFRJ 115
Lendo cookies
Basta consultar document.cookie
Retorna todos os cookies previamente gravados, que
devem ser devolvidos para esta página
Se houver mais de um cookie gravado, cabe ao
programa separa-los convenientemente.
Exemplo:
// meucookie recebe “Produto=789;User=Joao”
meucookie = document.cookie;
Formação 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 “”;
}
Continue navegando
Materiais relacionados
Perguntas relacionadas
Compartilhar