Linguagem Javascript João Sérgio S. Assis Núcleo de Computação Eletrônica da UFRJ Tel. (021) 2598-3214 Fax. (021) 2 270-8554 e-mail: joao@nce.ufrj.br Slides originais: Maurício Bomfim 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 2 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 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 3 Formação de Webmaster NCE/UFRJ 4 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 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 5 Formação de Webmaster NCE/UFRJ 6
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> 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 7 Formação de Webmaster NCE/UFRJ 8 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 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 9 Formação de Webmaster NCE/UFRJ 10 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> ); Meu primeiro Javascript <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 11 Formação de Webmaster NCE/UFRJ 12
Meu segundo javascript <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> 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 13 Formação de Webmaster NCE/UFRJ 14 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 15 Formação de Webmaster NCE/UFRJ 16 Conversão explícita de tipos parseint (str) ou parseint (str,base) Converte uma string num número inteiro num = 3A ; x = parseint(num); // x 3 y = parseint(num,16); // x 58 parsefloat (str) Converte uma string num número real 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 17 Formação de Webmaster NCE/UFRJ 18
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 19 Formação de Webmaster NCE/UFRJ 20 Funções Predefinidas isnan (valor) Retorna true se o valor não for numérico 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 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 21 Formação de Webmaster NCE/UFRJ 22 Laços While Permite repetir um comando ou bloco enquanto uma condição for verdadeira Forma geral: while ( condição ) comandos; var i = 1; while ( i <= 10 ) document.write(i, <br> ); i++; 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 var i = 0; do document.write (i, <br> ); i++; while ( i <= 10 ); Formação de Webmaster NCE/UFRJ 23 Formação de Webmaster NCE/UFRJ 24
Laços For Separador de comandos no For 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 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 25 Formação de Webmaster NCE/UFRJ 26 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! 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: function nomedafuncao() comandos; Invocação: nomedafuncao(); Formação de Webmaster NCE/UFRJ 27 Formação de Webmaster NCE/UFRJ 28 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> ); 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 29 Formação de Webmaster NCE/UFRJ 30
Usando links para executar código É possível associar uma função à seleção de um link <script> function clicou() window.alert ( Ei, você clicou!!! ); </script> <a href= javascript:clicou() >Não clique aqui</a> Comando return Interrompe a execução da função e retorna para o local onde a função foi chamada. 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 31 Formação de Webmaster NCE/UFRJ 32 Retorno de valores Variáveis locais 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 Variáveis locais: Só existem dentro da função, enquanto ela estiver sendo executada. Precisam ser declaradas com var. 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 33 Formação de Webmaster NCE/UFRJ 34 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. 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 35 Formação de Webmaster NCE/UFRJ 36
Classes e Objetos 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 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 37 Formação de Webmaster NCE/UFRJ 38 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. 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; 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 39 Formação de Webmaster NCE/UFRJ 40 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; 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 Formação de Webmaster NCE/UFRJ 41 Formação de Webmaster NCE/UFRJ 42
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; Métodos e tamanho do Array Consultando o tamanho: Métodos tamanho = valores.length; 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. Formação de Webmaster NCE/UFRJ 43 Formação de Webmaster NCE/UFRJ 44 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 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 45 Formação de Webmaster NCE/UFRJ 46 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 tambemos métodos set para alterar a data armazenada no objeto Formação de Webmaster NCE/UFRJ 47 Formação de Webmaster NCE/UFRJ 48
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 49 Formação de Webmaster NCE/UFRJ 50 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 51 Formação de Webmaster NCE/UFRJ 52 Objeto navigator Objeto navigator Permite configurar as aplicações para navegadores diferentes appcodename appname appversion platform language (no explorer userlanguage e systemlanguage) Identificando o browser 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 53 Formação de Webmaster NCE/UFRJ 54
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 55 Formação de Webmaster NCE/UFRJ 56 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 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 57 Formação de Webmaster NCE/UFRJ 58 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 <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 59 Formação de Webmaster NCE/UFRJ 60
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 61 Formação de Webmaster NCE/UFRJ 62 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] ); 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 63 Formação de Webmaster NCE/UFRJ 64 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 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 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 65 Formação de Webmaster NCE/UFRJ 66
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? ); 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 67 Formação de Webmaster NCE/UFRJ 68 Campos de texto name, type, form, value, defaultvalue Métodos: focus (), blur(), select() Eventos: onfocus, onblur, onchange, onselect Exemplo Botões name, type, form, value Métodos: focus(), blur(), click() Eventos: onfocus, onblur, onclick, onmousedown, onmouseup Formação de Webmaster NCE/UFRJ 69 Formação de Webmaster NCE/UFRJ 70 CheckBox name, type, form, value, checked, defaultchecked Métodos: focus (), blur(), click() Eventos: onfocus, onblur, onclick Exemplo Radio 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 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 71 Formação de Webmaster NCE/UFRJ 72
Listas drop-down (select) name, type, form, length, options [ ], selectedindex Métodos: focus(), blur() Eventos: onfocus, onblur, onchange Listas drop-down (option) value, length, text, selected, defaultselected, index Construtor: Option ([text [, value [, defaultselected [, selected]]]]) Exemplo Formação de Webmaster NCE/UFRJ 73 Formação de Webmaster NCE/UFRJ 74 Crítica de formulário Três formas: captura do evento onsubmit do form captura do evento onsubmit 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 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 75 Formação de Webmaster NCE/UFRJ 76 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> Propriedades de window Objeto central a todo o ambiente de execução Ao referenciar a própria janela, o objeto pode ser omitido 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 77 Formação de Webmaster NCE/UFRJ 78
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 79 Formação de Webmaster NCE/UFRJ 80 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 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 81 Formação de Webmaster NCE/UFRJ 82 Top e parent Vários níveis de layout 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 3 0 Top B == A Parent B == A Top D == A Parent D == C Arq. Layout A Frameset Frame B Frameset Arq. Layout C Frame Frame Frameset Frame D Frame Formação de Webmaster NCE/UFRJ 83 Formação de Webmaster NCE/UFRJ 84