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

  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.


  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.


  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>


  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


  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; }


  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...


<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");


  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


  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");' />


Relação dos eventos possíveis e os

Momentos em que os mesmos ocorrem

E ainda

Objetos que possibilitam a sua ocorrência.


  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.


  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.


  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.


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


<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


<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()


<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)){


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.


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.


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.


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 }


// 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" //


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" //


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>


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


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


•  += 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 + -‐).


  \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")


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"}


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) }


ComandoWHILE Executa uma ação enquanto determinada condição for verdadeira.

while (condição)

{ ação }

Ex.

var contador = 10

while (contador > 1)

{ contador-‐-‐ }


Move condicional receptor = ( (condição) ? verdadeiro : falso)

Ex.

NomeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino")


  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.


  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.


 Obs: A variável deverá ser definida como global se for referenciada:

-‐ por várias funções ou

-‐ ou em uma parte do documento


Ex.Variável Global :

MinhaVariavel = ""

Variável Local :

var MinhaVariavel = ""


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

Curso&Superior&de&Tecnologia&em&Redes& de&Computadores · Antonio&Lobato&J&2012/2& 13 EVENTOS))...

Documents

Transcript of Curso&Superior&de&Tecnologia&em&Redes& de&Computadores · Antonio&Lobato&J&2012/2& 13 EVENTOS))...