Referências 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 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 2 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 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 3 Formação de Webmaster NCE/UFRJ 4 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 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 Formação de Webmaster NCE/UFRJ 5 Formação de Webmaster NCE/UFRJ 6 1
Versões de Javascript Incluindo javascript numa página 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 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 7 Formação de Webmaster NCE/UFRJ 8 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> 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 9 Formação de Webmaster NCE/UFRJ 10 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 ; 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> ); Formação de Webmaster NCE/UFRJ 11 Formação de Webmaster NCE/UFRJ 12 2
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> 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 13 Formação de Webmaster NCE/UFRJ 14 Aula 2 Operadores Operadores Conversão de tipos Desvio condicional 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 15 Formação de Webmaster NCE/UFRJ 16 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 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 Formação de Webmaster NCE/UFRJ 17 Formação de Webmaster NCE/UFRJ 18 3
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 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 19 Formação de Webmaster NCE/UFRJ 20 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; 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 21 Formação de Webmaster NCE/UFRJ 22 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! ); Operador condicional ternário Em situações como: if (x == 20) y = 50; else y = 70; Substitui o if: y = (x == 20)? 50 : 70; Formação de Webmaster NCE/UFRJ 23 Formação de Webmaster NCE/UFRJ 24 4
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 Laços While Permite repetir um comando ou bloco enquanto uma condição for verdadeira Forma geral: while ( condição ) comandos; Exemplo: var i = 1; while ( i <= 10 ) document.write(i, <br> ); i++; Formação de Webmaster NCE/UFRJ 25 Formação de Webmaster NCE/UFRJ 26 Laços do - while Laços For 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 ); Repete um comando ou bloco controlado por uma variável. Forma geral: for (atribuição; condição; incremento) comandos; Seguinte; Atribuição F condição V Comandos seguinte incremento Formação de Webmaster NCE/UFRJ 27 Formação de Webmaster NCE/UFRJ 28 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> ); 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! Formação de Webmaster NCE/UFRJ 29 Formação de Webmaster NCE/UFRJ 30 5
Funções (sintaxe mínima) 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 Sintaxe mínima: Invocação: function nomedafuncao() comandos; nomedafuncao(); Funções com parâmetros Passagem de parâmetros É feita dentro do ( ) que se segue ao nome da função Feita por valor para tipos simples e strings. 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> ); Formação de Webmaster NCE/UFRJ 31 Formação de Webmaster NCE/UFRJ 32 Funções com parâmetros Exemplos: function abretabela (cor, borda) document.writeln ( <table bgcolor=, cor, border=, borda, > ); Chamada: abretabela ( white, 2); 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 33 Formação de Webmaster NCE/UFRJ 34 Aula 4 Entendendo objetos Tipos de objeto Objeto String Objeto Array Objeto Math 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. Formação de Webmaster NCE/UFRJ 35 Formação de Webmaster NCE/UFRJ 36 6
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). Classes e Objetos Exemplo: Classe Aluno nome nota trabalho nota prova nota_final() Objeto A nome = joao nota trabalho = 10 nota prova = 8 Objeto B nome = sergio nota trabalho = 7 nota prova = 9 Formação de Webmaster NCE/UFRJ 37 Formação de Webmaster NCE/UFRJ 38 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 (); 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 39 Formação de Webmaster NCE/UFRJ 40 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. 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; Formação de Webmaster NCE/UFRJ 41 Formação de Webmaster NCE/UFRJ 42 7
Alguns métodos de String tolowercase() touppercase() charat (n) indexof (str, p) substring (pi, pf) Converte para minúsculas. Converte para maiúsculas. Retorna o n-ésimo caracter (o primeiro caracter está em zero). Procura str a partir da posição p, se não achar retorna 1. 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 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 43 Formação de Webmaster NCE/UFRJ 44 Métodos e tamanho do Array Consultando o tamanho: tamanho = valores.length; Métodos sort () reverse () Arrays x Strings string.split (sep) array.join (sep) Ordena o vetor. Inverte a ordem dos elementos. Divide uma string num Array, elementos delimitados por sep. Junta elementos de um array numa string, intercalando sep. 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 45 Formação de Webmaster NCE/UFRJ 46 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); 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 Formação de Webmaster NCE/UFRJ 47 Formação de Webmaster NCE/UFRJ 48 8
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); 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 ) ); if ( quadrado(x) > 100 ) y = 3 * quadrado (x) + 5; // Como parâmetro // Numa comparação // Numa expressão Formação de Webmaster NCE/UFRJ 49 Formação de Webmaster NCE/UFRJ 50 Variáveis locais Criando objetos personalizados Variáveis locais: Só existem dentro da 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; 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. a = 10; y = quadrado(5); document.write( a =, a); Criação de uma ocorrência (instância) do objeto com o operador new Formação de Webmaster NCE/UFRJ 51 Formação de Webmaster NCE/UFRJ 52 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; 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; Formação de Webmaster NCE/UFRJ 53 Formação de Webmaster NCE/UFRJ 54 9
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; 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 55 Formação de Webmaster NCE/UFRJ 56 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); 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 57 Formação de Webmaster NCE/UFRJ 58 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] ); 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 Formação de Webmaster NCE/UFRJ 59 Formação de Webmaster NCE/UFRJ 60 10
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); 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 61 Formação de Webmaster NCE/UFRJ 62 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; 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 63 Formação de Webmaster NCE/UFRJ 64 Hierarquia de Objetos JavaScript Página exemplo Navigator Window frames [ ] document forms [ ] elements [ ] : button, checkbox, radio, text, textarea... options [ ] (quando o elemento é um select) links [ ] anchors [ ] images [ ] history location images[0] forms[0] images[1] links[0] links[1] elements[0] elements[1] elements[2] Formação de Webmaster NCE/UFRJ 65 Formação de Webmaster NCE/UFRJ 66 11
Objeto navigator Objeto navigator Permite configurar as aplicações para navegadores diferentes Propriedades: appcodename appname appversion platform language (no explorer userlanguage e systemlanguage) 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 67 Formação de Webmaster NCE/UFRJ 68 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> 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 69 Formação de Webmaster NCE/UFRJ 70 Comando with Economiza digitação quando se deseja referenciar várias propriedades de um mesmo objeto Exemplo: with (document) fgcolor = #000000 ; bgcolor = #FFFFFF ; Aula 7 Eventos básico O que são eventos Captura e tratamento de eventos Tipos de eventos Formação de Webmaster NCE/UFRJ 71 Formação de Webmaster NCE/UFRJ 72 12
Eventos Objetos que podem sofrer 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 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 73 Formação de Webmaster NCE/UFRJ 74 Associando código a Eventos Nome dos 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> 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 75 Formação de Webmaster NCE/UFRJ 76 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 Evitando o Comportamento 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(); > Evento Rotina do Usuário Tratamento Padrão Evento Rotina do Usuário return true Tratamento Padrão return false Formação de Webmaster NCE/UFRJ 77 Formação de Webmaster NCE/UFRJ 78 13
Referenciando um objeto A palavra-chave this 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] ); 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 79 Formação de Webmaster NCE/UFRJ 80 Aula 8 Formulário em Javascript Crítica de Campo Crítica de formulário window.document.forms[] Obtendo dados de formulários 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 81 Formação de Webmaster NCE/UFRJ 82 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[ ] Métodos submit() reset() Acesso individual aos elementos Envia o formulário ao servidor Limpa os campos do formulário 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? ); Formação de Webmaster NCE/UFRJ 83 Formação de Webmaster NCE/UFRJ 84 14
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 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 85 Formação de Webmaster NCE/UFRJ 86 Botões Propriedades: name, type, form, value Métodos: focus(), blur(), click() Eventos: onfocus, onblur, onclick, onmousedown, onmouseup CheckBox Propriedades: name, type, form, value, checked, defaultchecked Métodos: focus(), blur(), click() Eventos: onfocus, onblur, onclick Exemplo Formação de Webmaster NCE/UFRJ 87 Formação de Webmaster NCE/UFRJ 88 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 ); Listas drop-down (select) Propriedades: name, type, form, length, options [ ], selectedindex Métodos: focus(), blur() Eventos: onfocus, onblur, onchange Formação de Webmaster NCE/UFRJ 89 Formação de Webmaster NCE/UFRJ 90 15
Listas drop-down (option) Propriedades: value, length, text, selected, defaultselected, index Construtor: Option ([text [, value [, defaultselected [, selected]]]]) Exemplo 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 91 Formação de Webmaster NCE/UFRJ 92 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> 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 93 Formação de Webmaster NCE/UFRJ 94 Aula 9 Propriedades de window 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 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 () Formação de Webmaster NCE/UFRJ 95 Formação de Webmaster NCE/UFRJ 96 16
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! Referenciando outras janelas Fechando janelas window.close(); jan.close( ); if ( jan.closed ) // Fecha a própria janela // Fecha uma janela filha // 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 97 Formação de Webmaster NCE/UFRJ 98 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 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 99 Formação de Webmaster NCE/UFRJ 100 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. 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] top.centro // frame inferior central // através do nome 0 1 2 0 3 Formação de Webmaster NCE/UFRJ 101 Formação de Webmaster NCE/UFRJ 102 17
Vários níveis de layout Propriedades do vídeo Exemplo: Arq. Layout A Objeto screen Top B == A Parent B == A Frame Frameset Frameset Resolução: screen.width screen.height Top D == A Parent D == C Frame B Arq. Layout C Frame Area útil: screen.availwidth screen.availheight Frameset Profundidade de cor: Frame D Frame screen.colordepth Formação de Webmaster NCE/UFRJ 103 Formação de Webmaster NCE/UFRJ 104 Principios de Shopping Cart Exemplo 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 105 Formação de Webmaster NCE/UFRJ 106 Aula 10 O que é um cookie Propriedade document.cookie Escrevendo um cookie Lendo um cookie escape e unescape 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 Formação de Webmaster NCE/UFRJ 107 Formação de Webmaster NCE/UFRJ 108 18
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. 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 109 Formação de Webmaster NCE/UFRJ 110 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. 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 111 Formação de Webmaster NCE/UFRJ 112 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. 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 ; Formação de Webmaster NCE/UFRJ 113 Formação de Webmaster NCE/UFRJ 114 19
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; 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 ; Formação de Webmaster NCE/UFRJ 115 Formação de Webmaster NCE/UFRJ 116 20