Curso&Superior&de&Tecnologia&em&Redes& de&Computadores · Antonio&Lobato&J&2012/2& 13 EVENTOS))...
Transcript of Curso&Superior&de&Tecnologia&em&Redes& de&Computadores · Antonio&Lobato&J&2012/2& 13 EVENTOS))...
Curso Superior de Tecnologia em Redes de Computadores
Disciplina: Programação WEB JavaScript
Prof. Antonio Lobato
Linguagem de programação interpretada (scrip&ng), baseada em objetos e sem declaração de 9pos.
Permite injetar lógica em páginas escritas em HTML (HiperText Mark-‐up Language).
As páginas HTML podem ser escritas u9lizando-‐se editores de texto, como: NotePad; Write, etc.
Porém, existem editores próprios para gerar HTML
Introdução
Introdução
Introdução
Introdução
JavaScript é baseada em objetos Estruturas básicas, propriedades dos browser e os elementos de uma página HTML são tratados como objetos
Os objetos são manipulados através de eventos
O que se pode fazer com JavaScript
Com JavaScriptpode-‐se fazer diversas coisas que não é possível com HTML Realizar operações matemá9cas e computação. Abrir janelas do browser, trocar informações entre janelas, manipular propriedades do browser como o histórico, barra de estado, plug-‐ins e applets.
Interagir com o conteúdo do documento, alterando propriedades da página, dos elementos HTML e tratando toda a página como uma estrutura de objetos.
Interagir com o usuário através do tratamento de eventos
Formas de usar JavaScript
Há três maneiras de incluir JavaScriptem uma página Web Dentro de blocos HTML <script> ... </script >em várias partes da página.
Em um arquivo externo, importado pela página: para definir funções que serão usadas por várias páginas de um site.
Dentro de descritores HTML sensíveis a eventos: para tratar eventos do usuário em links, botões e componentes de entrada de dados, durante a exibição da página.
Formas de usar JavaScript
A forma mais prá9ca de usar JavaScript é embu9ndo o código na página dentro de um bloco delimitado pelos descritores HTML <script> e </script>.
Pode haver vários blocos <script> em qualquer lugar da página.
Formas de usar JavaScript
O descritor <script> possui um atributo languageque informa o 9po e versão da linguagem u9lizada.
O atributo language é necessário para incluir blocos em outras linguagens como VBScript. É opcional para JavaScript:
<script language="vbscript"> ...códigoemvbscript... </script> <script language="javascript"> ...código javascript... </script> <script> ... código javascript... </script>
Formas de usar JavaScript
Muitas vezes é necessário realizar um mesmo 9po de tarefa mais de uma vez. Para esse 9po de problema JavaScript permite que o programador crie funções que podem ser chamadas de outras partes da página várias vezes
Se várias páginas usam as mesmas funções JavaScript definidas pelo autor da página, uma boa opção é colocá-‐las em um arquivo externo e importá-‐lo nas páginas que precisarem delas
Formas de usar JavaScript
Este arquivo deve ter a extensão “.js” e conter apenas código JavaScript(não deve ter descritores HTML, como <script>). Por exemplo, suponha que o arquivo exemplo.js possua o seguinte código JavaScript:
function soma(a, b) { return a + b; }
Formas de usar JavaScript
Para carregar esta função e permi9r que seja usada em outra página, usa-‐se o atributo src do descritor <script>:
<script LANGUAGE=JavaScriptSRC=“exemplo.js”> resultado = soma(5, 6); document.write(‘<P>A soma de 5 e 6 é ‘ + resultado); </script>
Antonio Lobato -‐ 2012/2 13
EVENTOS São fatos que ocorrem durante a execução do sistema, a par9r dos quais o programador pode definir ações a serem realizadas pelo programa.
Segue exemplo...
Antonio Lobato -‐ 2012/2 14
<html> <head> <title>Clicar no botão</title> </head> <body> <input type="button" value="Clique aqui" onclick='alert("Ola");' /> </body> </html>
Quando for dado um clique no botão é executado o código (em
JavaScript), neste caso: alert("Ola");
Antonio Lobato -‐ 2012/2 15
Um evento é gerado como resultado de uma ação:
Um clique, Um movimento do mouse, Uma seleção de texto,
O abandono da página etc.
O tratamento de eventos é feito por partes de código associadas a eventos específicos
Antonio Lobato -‐ 2012/2 16
A associação é realizada em HTML nos elementos que suportam eventos do 9po Event através dos atributos: onEvent
Exemplo:
<input type = "button" onclick = 'alert("Ola");' />
Antonio Lobato -‐ 2012/2 17
Relação dos eventos possíveis e os
Momentos em que os mesmos ocorrem
E ainda
Objetos que possibilitam a sua ocorrência.
Antonio Lobato -‐ 2012/2 18
onload -‐ Ocorre na carga do documento. Ou seja, só ocorre no BODY do documento.
onunload -‐ Ocorre na descarga (saída) do documento. Também só ocorre no BODY.
onchange -‐ Ocorre quando o objeto perde o focus e houve mudança de
conteúdo. Válido para os objetos Text, Select e Textarea.
Antonio Lobato -‐ 2012/2 19
onblur -‐ Ocorre quando o objeto perde o focus, independente de ter havido mudança.
Válido para os objetos Text, Select e Textarea.
onfocus -‐ Ocorre quando o objeto recebe o focus.
Válido para os objetos Text, Select e Textarea.
onclick -‐ Ocorre quando o objeto recebe um Click do Mouse.
Válido para os objetos Buton, Checkbox, Radio, Link, Reset e Submit.
Antonio Lobato -‐ 2012/2 20
onmouseover -‐ Ocorre quando o ponteiro do mouse passa por sobre o
objeto. Válido apenas para Link.
onselect -‐ Ocorre quando o objeto é selecionado.
Válido para os objetos Text e Textarea.
onsubmit-‐ Ocorre quando um botão 9po Submit recebe um click do mouse.
Válido apenas para o Form.
Antonio Lobato -‐ 2012/2 21
Objetos com representação visual Todos exceto: <br>, <head>, <html>, <script>, <style>, <title>
onclick Clique no botão mouse ondblclick Duplo clique no mouse onkeydown Tecla pressionada onkeypress Tecla pressionada e liberada onkeyup Tecla liberada onmousedown Botão do mouse pressionado onmouseup Botão do mouse libertado onmouseover Mouse sobre o objeto onmousemove Mouse movido do objeto onmouseout Mouse saiu do objeto
Antonio Lobato -‐ 2012/2 22
<a>,<input>,<select>,<textarea>
onfocus Ganha o foco onblur Perde o foco
<body> -
onload Na carga do documento
onunload Na descarga do documento (saída) <input>, <select>, <textarea>
onchange O conteúdo foi alterado
onselect Texto foi selecionado
Antonio Lobato -‐ 2012/2 23
<html> <head> <title>Clicar no botão</title> </head>
<body onload = 'load()' > <input type="button" value="Clique aqui" onclick= 'touch()' /> </body> </html>
Quando o documento for carregado (a página estiver visível) é chamada a função
load()
Antonio Lobato -‐ 2012/2 24
<html> <head> <title>Clicar no botão</title> <script>
var mensage; //Para guardar o nome function load() { mensage = prompt(“Seu nome?"); } function touch() { alert(mensage); } </script> </head>
Definição da variável var nome [ = expressão ] ;
Afetar a variável
Consultar a variável
Pode-se armazenar valores de qualquer tipo, por exemplo: strings ou valores numéricos
Enquanto não forem iniciadas (1ª atribuição) armazenam o valor especial: undefined
<html> <head> <Qtle>Clicar no botão</Qtle> <script> var mensage; //Para guardar o nome funcQon load() { mensage = prompt("Seu nome?"); } funcQon touch() { alert(mensage); } </script> </head> <body onload ='load()' >
<form name=“form1” acQon=“resultado.html”> <input type="bu^on" value="Clique aqui" onclick='touch()' /></form> </body> </html>
Exemplo 1
Exemplo 2
Construir uma aplicação semelhante a imagem
Exemplo 2
Requisito 1: Quando o usuário apertar no botão “Digitar Nome”, deve aparecer uma janela de diálogo como mostrada na figura para que ele possa digitar um nome
Apertando no botão “Digitar Email”, uma janela semelhante deverá aparecer, para digitar o e-‐mail
Exemplo 2
Requisito 2: Apertando o botão “Cadastrar”, os dados digitados mais recentemente devem ser “armazenados” no campo de texto no formato
O número deve ser incrementado cada vez que um novo usuário for cadastrado
Requisito 3: A data de hoje deve ser mostrada na página no formato ilustrado na figura
Exemplo 2 1º Passo: Construir o código HTML
<html> <head><title> Exemplo 2 Javascript </title> </head> <body> <form> <h2 align=center>Cadastro</h2> <div align=center> <p><input type=button value="Digitar Nome"> <input type=button value="DigitarE-mail"> <input type=button value="Cadastrar"> <p> <textarea rows=10 cols=40 name=Area></textarea> </div> </form> </body> </html>
Exemplo 2 A primeira alteração, para cumprir o Requisito 1 consiste na programação dos eventos onclickdos dois primeiros botões.
É preciso coletar uma linha de texto do usuário e armazená-‐la em uma variável global.
Para declarar uma variável accessível em JavaScript, usamos a palavra-‐chave var antes do nome escolhido.
As declarações devem estar em um bloco <script> que seja interpretado antes que um botão seja interpretado
Exemplo 2 Declaração das variáveis globais
<script> var nome var email </script>
Exemplo 2
O próximo passo é programar o evento. A instrução abaixo é um método JavaScript que abre uma janela de diálogo contendo um campo de entrada de dados
O usuário pode digitar texto no campo disponível e este será devolvido como valor de retorno, caso o OK seja apertado. Para colocar o valor na variável nome, podemos fazer
Exemplo 2
O segundo requisito requer instruções para o atributo onclick do terceiro botão. Mas é necessário realizar diversas operações incrementar um número (outra variável global)
construir uma linha de texto (string) com os dados lidos
imprimir os dados em um campo de textos
Exemplo 2
Para resolver o problema do slide anterior usaremos uma função que realize as operações e ela será chamada a par9r do atributo onclickdo terceiro botão
Acrescentamos a função no bloco <script> do início da página e construímos o string concatenando as variáveis
A função receberá como argumento, uma referência ao campo de textos (quadro), que será passado na chamada da função
Exemplo 2
Função:
function escrever(quadro) { info= "usuário número " + (++num) + "\n"; info+= "nome: " + nome + "\n"; info+= "e-mail: " + email + "\n\n"; quadro.value+= info; }
Exemplo 2
O “+”, como vimos antes, concatena strings. O valor da variável num é incrementado com “++num”, que é equivalente à expressão “num = num + 1”.
A atribuição “+=” acrescenta o texto do lado direito à variável info, sem apagar o texto existente.
“\n” representa uma quebra de linha. São armazenadas em info quatro linhas de informação, sendo a úl9ma em branco
Exemplo 2
Uma referência para o campo de textos (<textarea>) pode ser ob9do a par9r do formulário no qual está con9do, através de seu nome.
Os nomes dos componentes de um formulário são propriedades do formulário. Dentro de qualquer componente, pode-‐se obter uma referência ao formulário em que está con9do usando this.form. A expressão: this.form.Area
Exemplo 2
Assim, podemos chamar a função escrever() de dentro do botão e passar como argumento o campo de textos, que é representado pelo objeto de nome Arealocalizado neste formulário: <input type=bu^on value="Cadastrar” onclick="escreve
r(this.form.Area)">
Exemplo 2
O úl9mo requisito pede para que a página exiba a data de hoje na página. A exibição não depende de eventos do usuário.
Deve ser uma transformação realizada somente na carga e exibição da página, portanto, incluímos o código em um segundo bloco <script> no corpo da página.
U9lizamos a instrução newDate() para obter a data de hoje e passamos para uma variável hoje, que criamos. Não é preciso usar a palavra var para definir variáveis. hoje = new Date();
Exemplo 2
A instrução “new” é um operador u9lizado para criar novos objetos. Date() é uma função especial, chamada de construtora.
Ela constrói o novo objeto e define métodos e propriedades que podem ser invocados a par9r do objeto.
Uma data é um 9po de dados abstrato que possui várias propriedades. Só precisamos de três: dia, mês e ano. A única forma de obtê-‐las em JavaScript é invocando métodos sobre hoje
Exemplo 2
Função <div align=“center”> <script> hoje = new Date() dia = hoje.getDate() mes = hoje.getMonth() + 1 ano = hoje.getYear() + 1900 document.write("<h3>Hoje: " + dia + "/" + mes + "/" + ano + "</h3>") </script> </div>
Leitura dos Objetos HTML
Página de cadastro
_ window |_ document |_ [nome formulário] |_ [nome objeto] |_ [atributo]
Hierarquia de objetos
Exemplo <script type=“text/javascript”> func9on fn_teste(){ document.form1.nome.value=“Fulano”; alert(document.form1.nome.value); } </script> <body onload = “fn_teste();”>
Envio do formulário
Existem várias formas de enviar formulário
Com o botão submit devemos usar o evento onsubmit na tag <FORM> para executar função
Nos outros dois casos podemos executar a função a par9r do próprio clique no objeto
Outra solução é criar um botão simples e colocar a função de validação no evento onclick dele
Envio do formulário
Envio com evento onsubmit <script type=“text/javascript”> func9on fn_envia(){ return true; } <\script> <Form Ac9on=“resultado.asp” method=“post” name=“form1” onsubmit=“retur
n(fn_envia());”> <Input name=“enviar” type=“submit” value=“Enviar”>
Envio com evento onclick <script type=“text/javascript”> func9on fn_envia(){ document.form1.submit } <\script> <Input name=“enviar” type=“bu�on” value=“Enviar” onclick=“fn_envia();”>
Garan9a de integridade do formulário
Validar se os campos obrigatórios foram preenchidos Nome, Endereço, Cidade e Estado
Verificar se estão vazios; caso estejam, deve-‐se alertar o usuário
Depois os campos numéricos nascimento, telefone, número do endereço e Cep Garan9ndo que o usuário só pode digitar números Verificando se não foram digitadas valores inválidos como telefone
“123” Finalmente deve-‐se cons9tuir a data como válida e o e-‐mail
como correto, os quais são um pouco mais trabalhosos
Funções de validação
Arquivo validacao.js
//verifica se o campo esta vazio function fn_obrigatorio(campo){ return campo.value != “”; } //verifica se o campo possui apenas números function fn_numero(campo){ if (campo.value != “”){ return !isNaN(campo.value); } else { return false; } }
Funções de validação
Arquivo validacao.js
//verifica se a data foi digitada corretamente function fn_data (cDia, cMes, cAno){ if (isNaN(cDia.value) || isNaN(cMes.value) || isNaN(cAno.value)) { return false; } if ( (cDia.value <= 31) && (cMes.value <=12) && (cAno.value > 1900)) { return true; }else { return false; } }
Chamada das Funções
Na página do formulário, deve-‐se fazer referência ao arquivo de validação e u9lizar as funções corretas para validar cada 9po de campo. Pode ser feito de várias formas Validando um campo por mensagem Validando um único campo por vez Validando todos os campos em uma única mensagem
Validando todos os campos em uma única mensagem <script type=“text/javascript” src=“script/validacao.js”> </script> <script type=“text/javascript”> func9on fn_envia(){ var mensagem = “”; if (!fn_obrigatorio(document.form1.nome)){ mensagem = mensagem +”\n\tNome;” } if (!fn_data(document.form1.nasc_dia, document.form1.nasc_mes,
document.form1.nasc_ano) {mensagem = mensagem +”\n\t\Data de nascimento”; }
if(!fn_numero(document.form1.telefone)){
Antonio Lobato -‐ 2012/2 50
Método para programar uma determinada ação após o transcurso de um determinado tempo.
Variável = setTimeout ("ação", tempo) Onde: Variável é uma variável apenas para controle do 9mer ação é a ação que se quer realizar. tempo é o tempo de espera para que a
ação ocorra, em milisegundos.
Antonio Lobato -‐ 2012/2 51
Obs: A ação só ocorrerá uma vez.
Para que a ação volte a ocorrer, será necessário repe9r o comando dentro da ação, obtendo-‐se, assim, um LOOP. Para interromper o LOOP provocado deve-‐se u9lizar o seguinte método:
clearTimeout (Variável)
Onde:
Variável é o nome da variável de controle do 9mer.
Antonio Lobato -‐ 2012/2 52
Exemplo de um formulário apresentando a data e hora atual, atualizando os dados a cada segundo:
Tendo dois botões de rádio que tem a função de: aQvar e desaQvar a atualização dos dados.
Apresentando também, fora do formulário, a data contendo dia e mês por extenso.
<script>
func9on Hoje() {
ContrRelogio = setTimeout ("Hoje()", 1000) Hr = new Date()
dd = Hr.getDate()
mm = Hr.getMonth() + 1 aa = Hr.getYear()
hh = Hr.getHours()
Antonio Lobato -‐ 2012/2 54
min = Hr.getMinutes()
seg = Hr.getSeconds()
DataAtual = ((dd < 10) ? "0" + dd + "/" : dd + "/") DataAtual += ((mm < 10) ? "0" + mm + "/" + aa : mm + "/" + aa)
HoraAtual = ((hh < 10) ? "0" + hh + ":" : hh + ":")
HoraAtual += ((min < 10) ? "0" + min + ":" : min + ":")
HoraAtual += ((seg < 10) ? "0" + seg : seg)
document.DataHora.Data.value=DataAtual
document.DataHora.Hora.value=HoraAtual }
Antonio Lobato -‐ 2012/2 55
// func9on CriaArray (n) { this.length = n } // NomeDia = new CriaArray(7) NomeDia[0] = "Domingo" NomeDia[1] = "Segunda" NomeDia[2] = "Terça" NomeDia[3] = "Quarta" NomeDia[4] = "Quinta" NomeDia[5] = "Sexta" NomeDia[6] = "Sábado" //
Antonio Lobato -‐ 2012/2 56
NomeMes = new CriaArray(12) NomeMes[0] = "Janeiro" NomeMes[1] = "Fevereiro" NomeMes[2] = "Março" NomeMes[3] = "Abril" NomeMes[4] = "Maio" NomeMes[5] = "Junho" NomeMes[6] = "Julho" NomeMes[7] = "Agosto" NomeMes[8] = "Setembro" NomeMes[9] = "Outubro" NomeMes[10] = "Novembro" NomeMes[11] = "Dezembro" //
Antonio Lobato -‐ 2012/2 57
Data1 = new Date() dia = Data1.getDate()
dias = Data1.getDay()
mes = Data1.getMonth()
ano = Data1.getYear()
document.write ("Recife, " + NomeDia[dias] + " " + dia + " de " + NomeMes[mes] + " de " + (ano + 1900 ) )
</script>
Antonio Lobato -‐ 2012/2 58
<form name="DataHora"> Data : <input type=text size=10 maxlength=10 name="Data"> Hora : <input type=text size=10 maxlength=10 name="Hora"> <input type=radio name="Botao" value="Para Relogio" checked onclick="clearTimeout(ContrRelogio)">Desa9va <input type=radio name="Botao" value="A9va Relogio" onclick="ContrRelogio = setTimeout('Hoje()', 1000)">A9va </form>
Antonio Lobato -‐ 2012/2 59
São operadores a serem u9lizados em comandos condicionais (IF , FOR e WHILE), São eles:
• = = Igual • != Diferente • > Maior • >= Maior ou Igual • < Menor • <= Menor ou Igual • && E • || Ou
Operadores Lógicos
Antonio Lobato -‐ 2012/2 60
Operadores a serem u9lizados em: São eles:
• + adição de valor e concatenação de strings
• -‐ subtração de valores • * mul9plicação de valores • / divisão de valores
• % obtém o resto de uma divisão:
Ex: 150 % 13 retornará 7
7 % 3 retornará 1
Antonio Lobato -‐ 2012/2 61
• += concatena/adiciona à string/valor já existente.
Ex: x += y é o mesmo que x = x + y da mesma forma podem ser u9lizados: -‐= , *= , /= ou %=.
Um contador pode ser simplificado u9lizando-‐se : X++ ou X– o que equivale as expressões:
X = X + 1 ou X = X -‐ 1 respec9vamente. Para inverter sinal: X = -‐X ( -‐ + ou + -‐).
Antonio Lobato -‐ 2012/2 62
\b -‐ backspace
\f -‐ form feed \n -‐ new line caracters
\r -‐ carriage return \t -‐ tab characters
// -‐ Linha de comentário
/*....*/ -‐ Delimitadores para inserir um texto com mais de uma linha como comentário.
Os delimitadores naturais para uma string são: " ou ' . Para u9lizar estes caracteres como parte da string, u9lize: \ precedendo " ou '. Ex. alert (“Experimente o uso de \" ou \' em uma string")
Antonio Lobato -‐ 2012/2 63
Tarefas a serem executadas ou não, dependendo da veracidade ou não de uma condição, ou enquanto esta for verdadeira. Comando IF
if (condição) { ação para condição saQsfeita } [ else { ação para condição não saQsfeita } ]
Ex. if (Idade < 18) {Categoria = "Menor" } else {Categoria = "Maior"}
Antonio Lobato -‐ 2012/2 64
Comando FOR for ( [inicialização/criação de variável de controle ;] [condição ;] [incremento da variável de controle] ) { ação }
Ex. for (x = 0 ; x <= 10 ; x++) {alert ("X igual a " + x) }
Antonio Lobato -‐ 2012/2 65
ComandoWHILE Executa uma ação enquanto determinada condição for verdadeira.
while (condição)
{ ação }
Ex.
var contador = 10
while (contador > 1)
{ contador-‐-‐ }
Antonio Lobato -‐ 2012/2 66
Move condicional receptor = ( (condição) ? verdadeiro : falso)
Ex.
NomeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino")
Antonio Lobato -‐ 2012/2 67
Em FOR e WHILE: pode-‐se usar a dire9va "break" para interromper a condição principal e sair do loop; e a dire9va "con9nue“ para interromper uma ação (se determinada condição ocorrer) e voltar para o loop. Dire9vas/condições entre [ ] são opcionais.
Antonio Lobato -‐ 2012/2 68
Variável é criada automa9camente, pela simples associação de valores a mesma. Ex. NovaVariavel = "Jose"
Foi criada a variável de nome NovaVariavel que, passou a conter a string Jose.
As variáveis podem ser Locais ou Globais. Locais -‐ variáveis que são criadas dentro de uma função e referenciáveis apenas dentro da função. Globais -‐ variáveis criadas fora de funções, podendo ser referenciadas em qualquer parte do documento.
Antonio Lobato -‐ 2012/2 69
Obs: A variável deverá ser definida como global se for referenciada:
-‐ por várias funções ou
-‐ ou em uma parte do documento
Antonio Lobato -‐ 2012/2 70
Ex.Variável Global :
MinhaVariavel = ""
Variável Local :
var MinhaVariavel = ""
Antonio Lobato -‐ 2012/2 71
break delete function return typeof case do if switch var catch else in this void continue false instanceof throw while debugger finally new true with default for null try
abstract double goto native static
boolean enum implements package super
byte export import private synchronized char extends int protected throws
class final interface public transient
const float long short volatile