Você está na página 1de 193

Especializao em Cincia da Computao

Internet: Construo de pginas e programao Mdulo 1 - JavaScript

Prof. Rafael Robson Negro

UEL Universidade Estadual de Londrina DC Depto. de Computao

INTRODUO

JavaScript
Linguagem de programao interpretada (scripting), baseada em objetos e sem declarao de tipos. Permite injetar lgica em pginas escritas em HTML (HiperText Mark-up Language). As pginas HTML podem ser escritas utilizando-se editores de texto, como: NotePad; Write, etc. Porm, existem editores prprios para gerar HTML
UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

Os browsers mais divulgados (Internet Explorer, Netscape, etc.) so interpretadores de cdigo JavaScript inserido em pginas HTML.
A linguagem JavaScript foi inicialmente desenvolvida pela Netscape

Verses da Netscape: verso inicial 1.0, seguiu-se a 1.1, 1.2, 1.3 , 1.4 e 1.5, ... cujos lanamentos foram coincidido com as vrias verses do browser.

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

A verso standard (ECMAScript) foi definida pela ECMA (European Computer Manufacturers Association) e aprovada pela ISO. A Microsoft definiu a linguagem JScript que uma extenso da ECMAScript, s reconhecida em ambiente Window

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

Os pargrafos de lgica do javaScript podem estar "soltos" ou atrelados a ocorrncia de eventos. Os pargrafos soltos so executados na seqncia em que aparecem na pgina (documento) e os atrelados a eventos so executados apenas quando o evento ocorrer.

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

Para inserir pargrafos de programao dentro do HTML necessrio identificar o incio e o fim do set de JavaScript, da seguinte forma:

<SCRIPT> Set de instrues </SCRIPT>

Procedimento a ser adotado em qualquer local da pgina.


UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

Para melhor visualizao e facilidade de manuteno, recomenda-se que toda a lgica seja escrita no incio do documento. Funes devem ser invocadas quando se fizer necessrio (normalmente atreladas a eventos).

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

Se a lgica escrita a partir de um determinado evento, no necessrio o uso dos comandos <SCRIPT> e </SCRIPT>.

Os comandos JavaScript so sensveis ao tipo de letra (maisculas e minsculas) em sua sintaxe sensitive case.

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

Observao importante: Se houver erro de sintaxe no comando, o o JavaScript interpretar, o comando, como

sendo o nome de uma varivel.

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

OPERADORES LGICOS
So operadores a serem utilizados em comandos condicionais (IF , FOR e WHILE), So eles:

== != > >= < <= && ||

Igual Diferente Maior Maior ou Igual Menor Menor ou Igual E Ou

UEL Universidade Estadual de Londrina DC Depto. de Computao

Operadores Lgios

10

OPERADORES MATEMTICOS
Operadores a serem utilizados em: So eles:

+ * / %

adio de valor e concatenao de strings subtrao de valores multiplicao de valores diviso de valores obtm o resto de uma diviso:

Ex:

150 % 13 retornar 7 7 % 3 retornar 1

UEL Universidade Estadual de Londrina DC Depto. de Computao

Operadores Matemticos

11

OPERADORES MATEMTICOS

+=

concatena/adiciona string/valor j existente.

Ex:

x += y o mesmo que x = x + y da mesma forma podem ser utilizados: -= , *= , /= ou %=. Um contador pode ser simplificado utilizando-se : X++ ou X o que equivale as expresses: X = X + 1 ou X = X - 1 respectivamente. Para inverter sinal: X = -X ( - + ou + -).
UEL Universidade Estadual de Londrina DC Depto. de Computao

Operadores Matemticos

12

CONTROLES ESPECIAIS

\b - backspace \f - form feed \n - new line caracters \r - carriage return \t - tab characters // - Linha de comentrio /*....*/ - Delimitadores para inserir um texto com mais de uma linha como comentrio.

Os delimitadores naturais para uma string so: " ou ' . Para utilizar estes caracteres como parte da string, utilize: \ precedendo " ou '. Ex. alert (Experimente o uso de \" ou \' em uma string")
UEL Universidade Estadual de Londrina DC Depto. de Computao

Controles espericais

13

COMANDOS CONDICIONAIS
Tarefas a serem executadas ou no, dependendo da veracidade ou no de uma condio, ou enquanto esta for verdadeira. Comando IF if (condio) { ao para condio satisfeita } [ else { ao para condio no satisfeita } ] Ex. if (Idade < 18) {Categoria = "Menor" } else {Categoria = "Maior"}
UEL Universidade Estadual de Londrina DC Depto. de Computao

Comandos Condicionais

14

COMANDOS CONDICIONAIS
Comando FOR for ( [inicializao/criao de varivel de controle ;] [condio ;] [incremento da varivel de controle] ) { ao } Ex. for (x = 0 ; x <= 10 ; x++) {alert ("X igual a " + x) }
Comandos Condicionais

UEL Universidade Estadual de Londrina DC Depto. de Computao

15

COMANDOS CONDICIONAIS
ComandoWHILE Executa uma ao enquanto determinada condio for verdadeira. while (condio) { ao } Ex. var contador = 10 while (contador > 1) { contador-- }
UEL Universidade Estadual de Londrina DC Depto. de Computao

Comandos Condicionais

16

COMANDOS CONDICIONAIS
Move condicional receptor = ( (condio) ? verdadeiro : falso) Ex. NomeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino")

UEL Universidade Estadual de Londrina DC Depto. de Computao

Comandos Condicionais

17

IMPORTANTE SABER

Em FOR e WHILE: pode-se usar a diretiva "break" para interromper a condio principal e sair do loop; e a diretiva "continue para interromper uma ao (se determinada condio ocorrer) e voltar para o loop. Diretivas/condies entre [ ] so opcionais.
UEL Universidade Estadual de Londrina DC Depto. de Computao

Comandos Condicionais

18

EVENTOS

So fatos que ocorrem durante a execuo do sistema, a partir dos quais o programador pode definir aes a serem realizadas pelo programa. Segue exemplo...

UEL Universidade Estadual de Londrina DC Depto. de Computao

Eventos

19

Associando cdigo JavaScript ao clique no boto <html> <head>


<title>Clicar no boto</title> </head> <body> <input type="button" value="Clique aqui" onclick='alert("Ola");' /> </body> </html>

Quando for dado um clique no boto executado o cdigo (em JavaScript), neste caso:
alert("Ola");

UEL Universidade Estadual de Londrina DC Depto. de Computao

Eventos

20

Eventos

Um evento gerado como resultado de uma ao: Um clique, Um movimento do mouse, Uma seleo de texto, O abandono da pgina etc.
O tratamento de eventos feito por partes de cdigo associadas a eventos especficos

UEL Universidade Estadual de Londrina DC Depto. de Computao

Eventos

21

A associao realizada em HTML nos elementos que suportam eventos do tipo Event atravs dos atributos: onEvent

Exemplo:
<input type = "button" onclick = 'alert("Ola");' />

UEL Universidade Estadual de Londrina DC Depto. de Computao

Eventos

22

Eventos Relao dos eventos possveis e os Momentos em que os mesmos ocorrem

E ainda
Objetos que possibilitam a sua ocorrncia.

UEL Universidade Estadual de Londrina DC Depto. de Computao

Eventos

23

onload - Ocorre na carga do documento. Ou seja, s ocorre no BODY do documento. onunload - Ocorre na descarga (sada) do documento. Tambm s ocorre no BODY. onchange - Ocorre quando o objeto perde o focus e houve mudana de contedo. Vlido para os objetos Text, Select e Textarea.

UEL Universidade Estadual de Londrina DC Depto. de Computao

Eventos

24

onblur - Ocorre quando o objeto perde o focus, independente de ter havido mudana. Vlido para os objetos Text, Select e Textarea.

onfocus - Ocorre quando o objeto recebe o focus. Vlido para os objetos Text, Select e Textarea.
onclick - Ocorre quando o objeto recebe um Click do Mouse. Vlido para os objetos Buton, Checkbox, Radio, Link, Reset e Submit.
UEL Universidade Estadual de Londrina DC Depto. de Computao

Eventos

25

onmouseover - Ocorre quando o ponteiro do mouse passa por sobre o objeto. Vlido apenas para Link. onselect - Ocorre quando o objeto selecionado. Vlido para os objetos Text e Textarea. onsubmit- Ocorre quando um boto tipo Submit recebe um click do mouse. Vlido apenas para o Form.
UEL Universidade Estadual de Londrina DC Depto. de Computao

Eventos

26

Eventos dos objetos HTML


Objetos com representao visual
Todos exceto: <br>, <head>, <html>, <script>, <style>, <title>

onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmouseup onmouseover onmousemove

Clique no boto mouse Duplo clique no mouse Tecla pressionada Tecla pressionada e liberada Tecla liberada

Boto do mouse pressionado


Boto do mouse libertado Mouse sobre o objeto Mouse movido do objeto

onmouseout

Mouse saiu do objeto


Eventos
27

UEL Universidade Estadual de Londrina DC Depto. de Computao

Eventos dos objetos HTML


<a>,<input>,<select>,<textarea>

onfocus onblur
<body> -

Ganha o foco Perde o foco

onload
onunload

Na carga do documento
Na descarga do documento (sada)

<input>, <select>, <textarea>

onchange
onselect

O contedo foi alterado


Texto foi selecionado Eventos

UEL Universidade Estadual de Londrina DC Depto. de Computao

28

Associando cdigo JavaScript ao <html> carregamento <head>


Quando o documento for carregado (a pgina estiver visvel) chamada a funo load()
<title>Clicar no boto</title> </head> <body onload = 'load()' > <input type="button" value="Clique aqui" onclick= 'touch()' /> </body> </html>

UEL Universidade Estadual de Londrina DC Depto. de Computao

Eventos

29

Variveis
Pode-se armazenar valores de qualquer tipo, por exemplo: strings ou valores numricos Enquanto no forem iniciadas (1 atribuio) armazenam o valor especial: undefined <html>
Definio da varivel
var nome [ = expresso ] ; <head> <title>Clicar no boto</title> <script> var mensage; //Para guardar o nome function load() { mensage = prompt(Seu nome?"); } function touch() { alert(mensage); } </script> </head>

Afetar a varivel Consultar a varivel

UEL Universidade Estadual de Londrina DC Depto. de Computao

Variveis

30

<html> <head> <title>Clicar no boto</title> <script> var mensage; //Para guardar o nome function load() { mensage = prompt("Seu nome?"); } function touch() { alert(mensage); } </script> </head> <body onload ='load()' > <input type="button" value="Clique aqui" onclick='touch()' /> </body> </html>

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

31

CRIANDO VARIVEIS

Varivel criada automaticamente, pela simples associao de valores a mesma. Ex. NovaVariavel = "Jose" Foi criada a varivel de nome NovaVariavel que, passou a conter a string Jose.

As variveis podem ser Locais ou Globais. Locais - variveis que so criadas dentro de uma funo e referenciveis apenas dentro da funo. Globais - variveis criadas fora de funes, podendo ser referenciadas em qualquer parte do documento.
Variveis
32

UEL Universidade Estadual de Londrina DC Depto. de Computao

CRIANDO VARIVEIS

Obs: A varivel dever ser definida como global se for referenciada: - por vrias funes ou - ou em uma parte do documento

UEL Universidade Estadual de Londrina DC Depto. de Computao

Variveis

33

CRIANDO VARIVEIS
Ex.Varivel Global : MinhaVariavel = "" Varivel Local : var MinhaVariavel = "" (no recomendvel).

UEL Universidade Estadual de Londrina DC Depto. de Computao

Variveis

34

Palavras reservadas
break case catch continue debugger default
abstract
boolean byte char class const

delete do else false finally for


double
enum export extends final float

function if in instanceof new null


goto
implements import int interface long

return switch this throw true try


native
package private protected public short

typeof var void while with

static
super synchronize d throws transient volatile

UEL Universidade Estadual de Londrina DC Depto. de Computao

Variveis

35

Objetos em JavaScript
Um objeto uma coleo de propriedades Cada propriedade tem um nome
As propriedades armazenam valores que podem ser lidos ou escritos. As propriedades que armazenam funes denominam-se mtodos, que podem ser chamados.
obj.prop obj.method (argumentos)
UEL Universidade Estadual de Londrina DC Depto. de Computao

Nome da propriedade Nome do objeto

Nome do mtodo

Orientado a Objeto

36

Acessando o objeto document


O documento HTML representado pelo objeto document
O objeto document tem vrias propriedades, por exemplo:
Nome Descrio title Ttulo do documento url Endereo da pgina
Comentrio de fim de ... // comentrio linha
<html> <head> <title>Clicar no boto</title> <script> // Escreve o titulo function touch() { alert( document.title ); } </script> </head> ...

Acesso a propriedade
objeto.propriedade
UEL Universidade Estadual de Londrina DC Depto. de Computao

Orientado a Objeto

37

Objetos predefinidos
Existem trs tipos de objetos: Intrnsecos da linguagem (ex: String, Math) Fornecidos pelo browser (ex: window, navigator) Criados pelo cdigo em JavaScript. O objeto window usado quando nenhum objeto for explicitamente indicado. Por exemplo: alert um mtodo de window alert("ola") equivalente a window.alert("ola") document uma propriedade de window document.title equivalente a window.document.title
UEL Universidade Estadual de Londrina DC Depto. de Computao

Orientado a Objeto

38

ESCREVENDO NO DOCUMENTO
O JavaScript permite que o programador escreva linhas dentro de uma pgina (documento), atravs do mtodo write. As linhas escritas desta forma, podem conter: textos, expresses JavaScript e comandos Html. As linhas escritas atravs deste mtodo aparecero no ponto da tela onde o comando for inserido. Ex: <script> valor = 30 document.write ("Minha primeira linha") document.write ("Nesta linha aparecer o resultado de : " + (10 * 10 + valor)) </script>

UEL Universidade Estadual de Londrina DC Depto. de Computao

Orientado a Objeto

39

Estudando o caso: Mtodo write no insere mudana de linha:

Surgir apenas uma linha com os dois textos emendados.

Para evitar isto, utiliza-se o mtodo writeln que escreve uma linha e espaceja para a seguinte.
Orientado a Objeto

UEL Universidade Estadual de Londrina DC Depto. de Computao

40

Este comando no causa efeito,obtendo-se o mesmo resultado do mtodo write no HTML. A soluo utilizar o comando de mudana de pargrafo da linguagem Html. Ex: <script> valor = 30 document.write ("<p>Minha primeira linha</p>") document.write ("<p>Nesta linha aparecer o resultado de : " + (10 * 10 + valor) + "</p>") </script>
UEL Universidade Estadual de Londrina DC Depto. de Computao

Orientado a Objeto

41

Resolve-se a questo da mudana de linha, porm, gera-se uma linha em branco, entre cada linha, por se tratar de mudana de pargrafo.

A alternativa utilizar o comando Html <br> que apenas muda de linha. Ex: <script> valor = 30 document.write ("<br>Minha primeira linha") document.write ("<br>Nesta linha aparecer o resultado de : " + (10 * 10 + valor) ) </script>

UEL Universidade Estadual de Londrina DC Depto. de Computao

Orientado a Objeto

42

MENSAGENS

Formas de comunicao com o usurio:

1. Apenas Observao. alert ( mensagem ) Ex. alert ("Certifique-se de que as informaes esto corretas") 2. Mensagem que retorna confirmao de OK ou CANCELAR confirm (mensagem) Ex. if (confirm ("Algo est errado...devo continuar??")) { alert("Continuando") } else { alert("Parando") }
UEL Universidade Estadual de Londrina DC Depto. de Computao

Mensagens

43

3. Recebe mensagem via caixa de texto Input Receptor = prompt ("Minha mensagem", "Meu texto") Onde: Receptor o campo que vai receber a informao digitada pelo usurio Minha mensagem a mensagem que vai aparecer como Label da caixa de input Meu texto um texto, opcional, que aparecer na linha de digitao do usurio Ex. Entrada = prompt("Informe uma expresso matemtica", "") Resultado = eval(Entrada) document.write("O resultado = " + Resultado)
UEL Universidade Estadual de Londrina DC Depto. de Computao

Mensagens

44

FUNES
Uma funo uma seqncia de instrues, que s deve ser executada quando a funo for acionada. A sintaxe geral a seguinte:

UEL Universidade Estadual de Londrina DC Depto. de Computao

Funes

45

Funes
function nome(argumentos) { sequncia de instrues } <html> <head> <title>Clicar no boto</title> <script type="text/javascript" > function touch() { alert("Ola"); } </script> </head> <body> <input type="button" value="Clique aqui" onclick='touch();' /> </body> </html>

rea de definio de cdigo (em JavaScript)

A funo touch no tem argumentos e contm uma s instruo Chamada a funo


nome(argumentos)

A funo alert tem um argumento: string com o texto a apresentar


UEL Universidade Estadual de Londrina DC Depto. de Computao

Funes

46

Suponha uma funo que tenha como objetivo informar se uma pessoa maior ou menor de idade, recebendo como parmetro a sua idade. function Idade (Anos) { if (Anos > 17) { alert ("Maior de Idade") } else { alert (Menor de Idade") } }

UEL Universidade Estadual de Londrina DC Depto. de Computao

Funes

47

Para acionar esta funo, suponha uma caixa de texto, em um formulrio, na qual seja informada a idade e, a cada informao, a funo seja acionada. <form> <input type=text size=2 maxlength=2 name="Tempo" onchange="Idade(Tempo.value)"> </form>

UEL Universidade Estadual de Londrina DC Depto. de Computao

Funes

48

<html> <head> <script> function Idade (Anos) { if (Anos > 17) { alert ("Maior de Idade") } else { alert ("Menor de Idade") } } </script> </head>

<body> <form> <input type=text size=2 maxlength=2 name="Tempo" onchange="Idade(Tempo.value)"> </form> </body> </html>

No existe co-relao entre o nome da varivel passada e a varivel de recepo na funo. Apenas o contedo passado.
UEL Universidade Estadual de Londrina DC Depto. de Computao

O parmetro passado (no evento "onchange") o contedo da caixa de texto "Tempo" (propriedade "value") que na funo foi chamado de "Anos".
Introduo
49

<html>
<head> <script> function Idade (Anos) { if (Anos > 17) { alert ("Maior de Idade") } else { alert ("Menor de Idade") } } </script> </head> <body> <form> <input type=text size=2 maxlength=2 name="Tempo" onchange="Idade(Tempo.value)"> </form> </body> </html>

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

50

FUNES INTRNSECAS
So funes embutidas na prpria linguagem. A sintaxe geral a seguinte: Result = funo (informao a ser processada)

- eval - parseInt - parseFloat -

Calcula o contedo da string Transforma string em inteiro Transforma string em nmero com ponto flutuante
Funes
51

UEL Universidade Estadual de Londrina DC Depto. de Computao

FUNES INTRNSECAS
- date() Retorna a data e a hora

ex1: Result = eval ( " (10 * 20) + 2 - 8") Result = 194 ex2: Result = eval (string) Depende do contedo da string, que tambm pode ser o contedo (value) de uma caixa de texto.

UEL Universidade Estadual de Londrina DC Depto. de Computao

Funes

52

Funes tipicamente Matemticas


Math.abs(nmero) - retorna o valor absoluto do nmero (ponto flutuante) Math.ceil(nmero) - retorna o prximo valor inteiro maior que o nmero Math.floor(nmero) - retorna o prximo valor inteiro menor que o nmero Math.round(nmero) - retorna o valor inteiro, arredondado, do nmero Math.pow(base, expoente) - retorna o clculo do exponencial Math.max(nmero1, nmero2) - retorna o maior nmero dos dois fornecidos Math.min(nmero1, nmero2) - retorna o menor nmero dos dois fornecidos
UEL Universidade Estadual de Londrina DC Depto. de Computao

Funes

53

Funes tipicamente Matemticas


Math.sqrt(nmero) - retorna a raiz quadrada do nmero Math.SQRT2 - retorna a raiz quadrada de 2 (aproximadamente 1.414) Math.SQRT_2 - retorna a raiz quadrada de 1/2 (aproximadamente 0.707) Math.sin(nmero) - retorna o seno de um nmero (anglo em radianos) Math.asin(nmero) - retorna o arco seno de um nmero (em radianos) Math.cos(nmero) - retorna o cosseno de um nmero (anglo em radianos)
UEL Universidade Estadual de Londrina DC Depto. de Computao

Funes

54

Funes tipicamente Matemticas

Math.acos(nmero) - retorna o arco cosseno de um nmero (em radianos) Math.tan(nmero) - retorna a tangente de um nmero (anglo em radianos) Math.atan(nmero) - retorna o arco tangente de um nmero (em radianos) Math.pi - retorna o valor de PI (aproximadamente 3.14159) Math.log(nmero) - retorna o logartmo de um nmero Math.E - retorna a base dos logartmos naturais aproximadamente 2.718)
UEL Universidade Estadual de Londrina DC Depto. de Computao

Funes

55

Funes tipicamente Matemticas


Math.LN2 - retorna o valor do logartmo de 2 (aproximadamente 0.693) Math.LOG2E - retorna a base do logartmo de 2 (aproximadamente 1.442) Math.LN10 - retorna o valor do logartmo de 10 (aproximadamente 2.302) Math.LOG10E - retorna a base do logartmo de 10 (aproximadamente 0.434) Observao: Nas funes, "(nmero)", refere-se a um argumento que ser processado pela funo e que pode ser: um nmero,uma varivel ou o contedo de um objeto (propriedade value).

UEL Universidade Estadual de Londrina DC Depto. de Computao

Funes

56

CRIANDO NOVAS INSTNCIAS


Atravs do operador new podem ser criadas novas instncias a objetos j existentes, mudando o seu contedo, porm, mantendo suas propriedades. A sintaxe geral a seguinte: NovoObjeto = new ObjetoExistente (parmetros) Ex1. MinhaData = new Date ()

MinhaData passou a ser um objeto tipo Date, com o mesmo contedo existente em Date (data e hora atual)
Instanciao

UEL Universidade Estadual de Londrina DC Depto. de Computao

57

Ex2: MinhaData = new Date(1996, 05, 27) MinhaData passou a ser um objeto tipo Date, porm, com o contedo de uma nova data.
Ex3: Registro Suponha a existncia do seguinte objeto chamado Empresas function Empresas (Emp, Nfunc, Prod) { this.Emp = Emp this.Nfunc = Nfunc this.Prod = Prod }
UEL Universidade Estadual de Londrina DC Depto. de Computao

Instanciao

58

CRIANDO NOVAS INSTNCIAS


Podemos criar novas instncias, usando a mesma estrutura, da seguinte forma: Elogica = new Empresas("Elogica", "120", "Servios") Pitaco = new Empresas("Pitaco", "35", "Software") Corisco = new Empresas("Corisco", "42", "Conectividade")

A varivel Elogica.Nfunc tem o contedo igual a120

UEL Universidade Estadual de Londrina DC Depto. de Computao

Instanciao

59

MANIPULANDO ARRAYS ?????


O JavaScript no tem um tipo de dado ou objeto para manipular arrays. necessrio criar um objeto com a propriedade de criao de array.
Exemplo: Objeto tipo array de tamanho varivel e com a funo de "limpar" o contedo das variveis cada vez que uma nova instncia seja criada a partir dele.
UEL Universidade Estadual de Londrina DC Depto. de Computao

Arrays

60

MANIPULANDO ARRAYS ?????


function CriaArray (n) { this.length = n for (var i = 1 ; i <= n ; i++) { this[i] = "" } }

UEL Universidade Estadual de Londrina DC Depto. de Computao

Arrays

61

Criando novas instncias do objeto "CriaArray" e alimentando-os com novos dados.

1.
NomeDia = new CriaArray(7) NomeDia[0] = "Domingo" NomeDia[1] = "Segunda" NomeDia [2] = "Tera" NomeDia[3] = "Quarta" NomeDia[4] = "Quinta" NomeDia[5] = "Sexta" NomeDia[6] = "Sbado"
UEL Universidade Estadual de Londrina DC Depto. de Computao

Arrays

62

2. Atividade = new CriaArray(5) Atividade[0] = "Analista" Atividade[1] = "Programador" Atividade[2] = "Operador" Atividade[3] = "Conferente" Atividade[4] = "Digitador"

UEL Universidade Estadual de Londrina DC Depto. de Computao

Arrays

63

Para obter dados diretamente dos arrays. DiaSemana = NomeDia[4] Ocupao = Atividade[1] DiaSemana passaria a conter Quinta e Ocupao conteria Programador. Outra forma: Criar novas instncias dentro do prprio objeto do array, o que proporciona o mesmo efeito de se trabalhar com matriz. Isso pode ser feito da seguinte forma:
UEL Universidade Estadual de Londrina DC Depto. de Computao

Arrays

64

function Empresas (Emp, Nfunc, Prod) { this.Emp = Emp this.Nfunc = Nfunc this.Prod = Prod } TabEmp = new Empresas(3) TabEmp[1] = new Empresas("Elogica", "120", "Servios") TabEmp[2] = new Empresas("Pitaco", "35", "Software") TabEmp[3] = new Empresas("Corisco", "42", "Conectividade")
UEL Universidade Estadual de Londrina DC Depto. de Computao

Arrays

65

Ento:

Atividade = TabEmp[3].Prod

Obtm a atividade da empresa nmero 3, cuja resposta Conectividade: Obs: importante lembrar que, embora os exemplos estejam com indexadores fixos, os indexadores podem ser referncias ao contedo de variveis (value).
UEL Universidade Estadual de Londrina DC Depto. de Computao

Arrays

66

MANIPULANDO STRING's
O JavaScript bastante poderoso no manuseio de Strings, fornecendo ao programador uma total flexibilidade em seu manuseio. Mtodos disponveis para manuseio de strings: string.length - retorna o tamanho da string (quantidade de bytes) string.charAt(posio) - retorna o caracter da posio especificada (inicia em 0) string.indexOf("string") - retorna o nmero da posio onde comea a primeira "string"

UEL Universidade Estadual de Londrina DC Depto. de Computao

Strings

67

string.lastindexOf("string") - retorna o nmero da posio onde comea a ltima "string" string.substring(index1, index2) - retorna o contedo da string que corresponde ao intervalo especificado. Comeando no caracter posicionado em index1 e terminando no caracter imediatamente anterior ao valor especificado em index2.

UEL Universidade Estadual de Londrina DC Depto. de Computao

Strings

68

Ex. Todo = "Elogica" Parte = Todo.substring(1, 4) (A varivel Parte receber a palavra log)

string.toUpperCase() - Transforma o contedo da string para maisculo (Caixa Alta) string.toLowerCase() - Transforma o contedo da string para minsculo (Caixa Baixa) escape ("string") - retorna o valor ASCII da string (vem precedido de %) unscape("string") - retorna o caracter a partir de um valor ASCII (precedido de %)
UEL Universidade Estadual de Londrina DC Depto. de Computao

Strings

69

MANIPULANDO DATAS
Existe apenas uma funo para se obter a data e a hora. a funo Date(). Esta funo devolve data e hora no formato: Dia da semana, Nome do ms, Dia do ms, Hora:Minuto:Segundo e Ano Ex. Fri May 24 16:58:02 1996

UEL Universidade Estadual de Londrina DC Depto. de Computao

Datas

70

Para se obter os dados separadamente, usa-se o

mtodo get: getDate() - Obtm o dia do ms (numrico de 1 a 31) getDay() - Obtm o dia da semana (0 a 6) getMonth() - Obtm o ms (numrico de 0 a 11) getYear() - Obtm o ano getHours() - Obtm a hora (numrico de 0 a 23) getMinutes() - Obtm os minutos (numrico de 0 a 59) getSeconds() - Obtm os segundos (numrico de 0 a 59)
Datas

UEL Universidade Estadual de Londrina DC Depto. de Computao

71

Exemplo: Obter o dia da semana. Para tal, utilizar a varivel DataToda para armazenar data/hora e a varivel DiaHoje para armazenar o nmero do dia da semana. DataToda = new Date() DiaHoje = DataToda.getDay()

UEL Universidade Estadual de Londrina DC Depto. de Computao

Datas

72

Gerando uma tabela com os dias da semana e utilizando a varivel DiaHoje como indexador, para obter o dia da semana. function CriaTab (n) { this.length = n for (var x = 1 ; x<= n ; x++) { this[x] = "" } } NomeDia = new CriaTab(7)

UEL Universidade Estadual de Londrina DC Depto. de Computao

Datas

73

NomeDia[0] = "Domingo" NomeDia[1] = "Segunda" NomeDia[2] = "Tera" NomeDia[3] = "Quarta" NomeDia[4] = "Quinta" NomeDia[5] = "Sexta" NomeDia[6] = "Sbado" DiaSemana = NomeDia[DiaHoje]

UEL Universidade Estadual de Londrina DC Depto. de Computao

Datas

74

mtodo set Cria uma varivel tipo Date com o contedo informado pela aplicao. So eles: setDate, setDay, setMonth, setYear, setHours, setMinutes e setSeconds.

Mudar o ms para novembro: DataToda.setMonth(10)


UEL Universidade Estadual de Londrina DC Depto. de Computao

Datas

75

INTERAGINDO COM O USURIO


A interao com o usurio se d atravs de:
- objetos para entrada de dados (textos); - marcao de opes (radio, checkbox e combo); - botes e link's para outras pginas.

Conceitualmente, os objetos so divididos em:


Input, Textarea e Select.
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

76

O objeto Input divide-se em (propriedade Type) Text Password Hidden Checkbox Radio Button Reset Submit
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

77

A construo destes objetos feita pela linguagem HTML. E aconselha-se que sejam criados utilizando-se algum tipo de ferramenta de gerao de pginas HTML.
Objeto Input TEXT
o principal objeto para entrada de dados.

UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

78

Suas principais propriedades so: type, size, maxlength, name e value.


type=text : Especifica um campo para entrada de dados normal size : Especifica o tamanho do campo na tela. maxlength : Especifica a quantidade mxima de caracteres permitidos. name : Especifica o nome do objeto value : Armazena o contedo do campo.
Interao com o Usurio

UEL Universidade Estadual de Londrina DC Depto. de Computao

79

Os eventos associados a este objeto so: onchange, onblur, onfocus e onselect. Ex: <form name="TText"> <p>Entrada de Texto <input type=text size=20 maxlength=30 name="CxTexto" value="" onchange="alert ('Voce digitou ' + CxTexto.value)"> </p> </form>
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

80

Objeto Input PASSWORD o objeto para entrada de Senhas de acesso (password). Os dados digitados neste objeto so criptografados e, s so interpretados (vistos) pelo "server", por razes de segurana.

UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

81

Suas principais propriedades so: type, size, maxlength, name e value. type=password : Especifica um campo para entrada de senha. Os dados digitados so substituidos (na tela) por "*". size : Especifica o tamanho do campo na tela. maxlength : Especifica a quantidade mxima de caracteres permitidos. name : Especifica o nome do objeto value : Armazena o contedo digitado no campo.

UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

82

Os eventos associados a este objeto so: onchange, onblur, onfocus e onselect. Ex: <form name="TPassword"> <p>Entrada de Senha<input type=password size=10 maxlength=10 name="Senha" value=""> </p> </form>

UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

83

Objeto Input HIDDEN um objeto semelhante ao input text, mas, invisvel ao usurio. Este objeto deve ser utilizado para passar informaes ao "server" (quando o formulrio for submetido) sem que o usurio tome conhecimento. Suas propriedades so: name e value. name : Especifica o nome do objeto. value : Armazena o contedo do objeto
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

84

Ex:

<p> <form name="THidden"> <input type=hidden size=20 maxlength=30 name="HdTexto" value="" > </form> </p>

UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

85

Objeto Input CHECKBOX So objetos que permitem ao usurio ligar ou desligar uma determinada opo. Suas principais propriedades so: name, value e checked. name : Especifica o nome do objeto value : Especifica o valor que ser enviado ao "server" se o objeto estiver ligado (checked).

Se omitido, ser enviado o valor default "on" .


UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

86

Esta propriedade tambm serve para ativar comandos lgicos, testando-se a condio de "checked".
checked : Especifica que o objeto inicialmente estar ligado O nico evento associado a este objeto onclick. Ex: Criando um objeto input.text e trs objetos checkbox. O 1 checkbox: quando ativado, transforma o texto em caracteres minsculos. O 2 checkbox: quando ativado, transforma o texto em caracteres maisculos. O 3 checkbox: quando ativado, da um aviso do contedo que recebido pelo "server" caso o formulrio seja submetido.
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

87

<SCRIPT> function AltMaiusc () { document.TCheck.Muda.value = document.TCheck.Muda.value.toUpperCase() document.TCheck.Opt1.checked = false } function AltMinusc () { document.TCheck.Muda.value = document.TCheck.Muda.value.toLowerCase() document.TCheck.Opt2.checked = false } </SCRIPT>
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

88

<p> <form name="TCheck"> Muda Case <input type=text size=20 maxlength=20 name="Muda"> </p> <p> Minusculo<input type=checkbox name="Opt1" value="1" checked onclick="if (this.checked) { AltMinusc() } "> Maiusculo<input type=checkbox name="Opt2" value="2" onclick="if (this.checked) { AltMaiusc() } "> Demo valor<input type=checkbox name="Opt3" onclick="if (Opt3.checked) {alert ('Server recebera = ' + Opt3.value) } "> </p> </form>
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

89

Objeto Input RADIO So objetos que permitem ao usurio a escolha de apenas uma alternativa, diante de uma srie de opes. Suas principais propriedades so: name, value e checked. name : Especifica o nome do objeto. Para caracterizar uma mesma srie de opes, todos os objetos desta srie tm que ter o mesmo "name". value : Especifica o valor que ser enviado ao "server" se o objeto estiver ligado (checked). Caso seja omitido, ser enviado o valor default "on" . Esta propriedade tambm serve para ativar comandos lgicos, testando-se a condio de "checked".

UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

90

checked : Especifica que o objeto inicialmente estar ligado


Para utilizao deste objeto importante o conhecimento de outras propriedades associadas: Objeto.length : Retorna a quantidade de opes existentes na lista Objeto.[index].value : retorna o texto (value) associado a cada opo Objeto.[index].checked: retorna verdadeiro ou falso O nico evento associado a este objeto : onclick.
Interao com o Usurio

UEL Universidade Estadual de Londrina DC Depto. de Computao

91

Ex. Dois set's de objetos radio. O 1 muda a cor de fundo do documento atual O 2 leva informaes ao "server". <p>Radio</p> <p> <input type=radio name="Rad" value="1" onclick="document.bgColor='green'"> Fundo Verde <input type=radio name="Rad" value="2" onclick="document.bgColor='blueviolet'"> Fundo Violeta <input type=radio name="Rad" value="3" onclick="document.bgColor='#FFFF00'"> Fundo Amarelo </p>
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

92

Objeto Input BUTTON Este objeto tem por finalidade criar um boto ao qual se possa atrelar operaes lgicas, a serem executadas quando o mesmo receber um click. Suas propriedades so: name e value. name : Especifica o nome do objeto. value : Especifica o nome que aparecer sobre o boto O nico evento associado a este objeto : onclick.
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

93

Ex. <p> <form method="POST" name="TstButton"> Digite um Texto <input type=text size=30 maxlength=30 name="Teste" value=""> </p><p> Click no Botao <input type=button name="Bteste" value="Botao de teste" onclick="alert ('Voce digitou: ' + TstButton.Teste.value)"> </p> </form>
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

94

Objeto Input RESET Este objeto um boto que tem por finalidade, nica, limpar os campos digitados pelo usurio, restaurando o contedo do formulrio para os valores iniciais.

recomendvel a utilizao deste objeto, para facilitar ao usurio limpar suas informaes, uma vez que a utilizao da opo "reload" do "browser" (que seria uma forma) no perde as infromaes digitadas. Suas propriedades so: name e value. name : Especifica o nome do objeto. value : Especifica o nome que aparecer sobre o boto O nico evento associado a este objeto : onclick.
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

95

Ex. <p> <form method="POST" name="TesteRes"> Digite um Texto<input type=text size=10 maxlength=20 name="Teste" value=""> Apague o Texto <input type=reset name="Bres" value="Reset"> </form> </p>

UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

96

Objeto Input SUBMIT Este objeto um boto que tem por finalidade submeter (enviar) o contedo dos objetos do formulrio ao "server". O formulrio ser submetido URL especificada na propriedade "action" do formulrio.

Suas propriedades so: name e value. name : Especifica o nome do objeto. value : Especifica o nome que aparecer sobre o boto
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

97

O nico evento associado a este objeto : onclick.


Embora se possa atrelar lgica a este evento, no se pode evitar que o formulrio seja submetido, portanto, no aconselhvel o seu uso.

Utilizar a propriedade onSubmit do formulrio, mais seguro e mais til.


Esta permite que se atrele lgica e decida-se pela submisso ou no.
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

98

Ex. <script> function TestaVal() { if (document.TesteSub.Teste.value == "") { alert ("Campo nao Preenchido...Form nao Submetido") return false } else { alert ("Tudo Ok....Form Submetido") return true } } </script>
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

99

<p> <form method="POST" name="TesteSub" onSubmit="return TestaVal()" action="http://200.250.4.200/scripts/lombardi.dll/ vbloja.loja.action"> Digite um Texto <input type=text size=10 maxlength=10 name="Teste" value=""> Botao Submit <input type=submit name="Bsub" value="Manda p/Server"> </p> </form>
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

100

No exemplo o formulrio est sendo submetido a URL 200.250.4.200" (que o endereo IP de um "Server"). Estamos enviando os dados a um "OLE", que est no subdiretrio "scripts", chamado lombardi.dll", que tem por objetivo fazer a conexo com aplicaes escritas em VB.
A aplicao VB que est sendo chamada, um OLE de nome "vbloja" no qual estamos acionando a classe "loja" e o mtodo "action". A aplicao VB, deste exemplo, far apenas a devoluo dos dados recebidos pelo Server.
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

101

Enviando um e_mail ao submeter

<form action = http://www.uel.br/scripts/java/enviamailpadrao.asp Method="post">


<input type = "hidden" name="Var_Pagina_Proprietaria" value = "Endereo da pagina que esta enviando o email"> <input type = "hidden" name = "Var_Url_Erro" value ="Endereo de uma pagina informando que houve erro no envio dos dados">

UEL Universidade Estadual de Londrina DC Depto. de Computao

<input type="hidden" name="Var_Url_Ok" value="Endereo de uma pagina que informe que houve sucesso no envio dos dados"> <input type="hidden" name="Var_Endereco_Destinatario" value="O email da pessoa que recebera os dados do formulario"> <input type="hidden" name="Var_Nome_Destinatario" value="O nome da pessoa que recebera os dados do email">

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

103

Objeto TEXTAREA um objeto para entrada de dados em um campo de mltiplas linhas. Suas principais propriedades so: name, rows e cols. name : Especifica o nome do objeto rows : Especifica a quantidade de linhas que aparecero na tela cols : Especifica a quantidade de caracteres que aparecero em cada linha value : Acessa o contedo do campo via programao. Os eventos associados a este objeto so: onchange, onblur, onfocus e onselect.
Interao com o Usurio

UEL Universidade Estadual de Londrina DC Depto. de Computao

104

Ex: <form name="TesteTextarea"> <p> Texto de Mltiplas Linhas <textarea name="MultText" rows=2 cols=40> Primeira linha do texto inicial segunda linha do texto inicial </textarea> </p>

UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

105

Objeto SELECT um objeto para entrada de opes, onde o usurio, a partir de uma lista de alternativas, seleciona uma ou mais opes. Suas principais propriedades so: name, size, value e multiple name : Especifica o nome do objeto size : Especifica a quantidade de opes que aparecero na tela simultaneamente value : Associa um valor ou string para cada opo (opcional) multiple : Especifica a condio de mltipla escolha (usando-se a tecla Ctrl)
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

106

Para utilizao deste objeto importante o conhecimento de outras propriedades associadas: Objeto.length : Retorna a quantidade de opes existentes na lista Objeto.selectedindex : Retorna o "index" do objeto selecionado (primeiro = 0) Objeto.options[index].text : retorna o texto externo associado a cada opo Objeto.options[index].value : retorna o texto interno (value) associado a cada opo Objeto.options[index].selected : retorna verdadeiro ou falso Os eventos associados a este objeto so: onchange, onblur e onfocus.
Interao com o Usurio

UEL Universidade Estadual de Londrina DC Depto. de Computao

107

Ex1: Neste exemplo importante observar os seguintes aspectos: a) A lista permite apenas uma seleo b) A quarta opo aparecer inicialmente selecionada (propriedade "selected") c) No foi utilizado a propriedade "value". Logo, a propriedade "text" e a propriedade "value" teram o mesmo valor igual ao valor externo que aparece na tela.
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

108

<script> function Verselect(Campo) { Icombo = Campo.selectedIndex alert ("Voce escolheu " + Campo.options[Icombo].text) } </script>

UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

109

<p> Objeto Select <select name="Combo1" size=1 onchange="Verselect(Combo1)"> <option>Opcao 1 <option>Opcao 2 <option>Opcao 3 <option selected>Opcao 4 (recomendada) <option>Opcao 5 <option>Opcao 6 </select> </p>
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

110

Ex2: Neste exemplo importante observar os seguintes aspectos:


a) A lista permite mltiplas selees b) Utilizou-se a propriedade "value". Assim as propriedades "text" e "value" tm valores diferentes: text retornar Escolha1 a Escolha4 e value retornar List1 a List4. c) O parmetro passado, quando da ocorrncia do evento onblur, foi this. Esta diretiva significa que estamos passando este objeto.
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

111

<script> function Vermult(Lista) { var opcoes = "" for (i = 0 ; i < Lista.length ; i++) { if (Lista.options[i].selected) { opcoes += (Lista.options[i].value + ", ") } } alert ("As opcoes escolhidas foram : " + opcoes) } </script>
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

112

<p> Objeto Select2 <select name="Combo2" size=4 multiple onblur="Vermult(this)"> <option value="List1">Escolha1 </option> <option value="List2">Escolha2 </option> <option value="List3">Escolha3 </option> <option value="List4">Escolha4 </option> </select> </p>

UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

113

Focando um Objeto O mtodo Focus permite que o cursor seja ativado em um determinado objeto (focado).
Isso pode ser feito: na carga do documento, a partir da ocorrncia de um evento ou mesmo dentro de uma funo.

Lembrando que at agora o usurio tinha que dar um "Click" para focar o objeto desejado.
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

114

O mtodo "Select"
Usado para marcar o contedo do objeto com uma tarja roxa, permitindo ao usurio, em caso de substituio do contedo do campo, no ter que deletar o contedo anterior. Com este mtodo, a deleo se d de forma automtica quando da digitao do novo contedo.

UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

115

Os mtodos "Focus" e "Select" podem ser utilizados nos seguintes objetos: password, select, text e textarea
Exemplo, utilizando o evento onload para setar o focus para o primeiro objeto do formulrio e os mtodos focus e select para, na rotina de crtica dos dados, focar o objeto que contiver erro de preenchimento.

UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

116

Ex. <body onload="document.TstFocus.Nome.focus()"> <script> DdosOk = true function Criticar() { DadosOk = false DataAtual = new Date() MesAtual = DataAtual.getMonth() + 1 AnoAtual = DataAtual.getYear() + 1900 Nome = document.TstFocus.Nome.value Mes = parseInt(document.TstFocus.Mes.value) Ano = parseInt (document.TstFocus.Ano.value)

UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

117

// if (Ano < 1900) {Ano = Ano + 1900 } if (Nome == "") { alert ("Informe o seu Nome, No deixe em branco") document.TstFocus.Nome.focus() return } if (Mes < 1 || Mes > 12) { alert ("O Ms informado no vlido, informe corretamente") document.TstFocus.Mes.focus() document.TstFocus.Mes.select() return }
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

118

if (Ano == AnoAtual && Mes > MesAtual) { alert ("O perodo informado superior a data atual") document.TstFocus.Mes.focus() document.TstFocus.Mes.select() return } if (Ano < 1996 || Ano > AnoAtual) { alert ("O Ano informado no vlido, informe corretamente") document.TstFocus.Ano.focus() document.TstFocus.Ano.select() return } DadosOk = true } </script>
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

119

<form name="TstFocus" method="POST"> <p> Informe o seu Nome <input type=text size=30 maxlength=30 name="Nome"> </p> <p> Informe o ms desejado <input type=text size=2 maxlength=2 name="Mes"> </p> <p> Informe o ano desejado <input type=text size=4 maxlength=4 name="Ano" > </p>
UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

120

<p> <input type=button name="Testa" value="Testar Validade" onclick="Criticar() if (DadosOk) {alert ('Todos os Dados esto Corretos') } "> </p> </form> </body>

UEL Universidade Estadual de Londrina DC Depto. de Computao

Interao com o Usurio

121

TIMER e DATE
Mtodo para programar uma determinada ao aps o transcurso de um determinado tempo. Varivel = setTimeout ("ao", tempo) Onde: Varivel uma varivel apenas para controle do timer ao a ao que se quer realizar. tempo o tempo de espera para que a ao ocorra, em milisegundos.
UEL Universidade Estadual de Londrina DC Depto. de Computao

Timer e date

122

Obs: A ao s ocorrer uma vez. Para que a ao volte a ocorrer, ser necessrio repetir o comando dentro da ao, obtendo-se, assim, um LOOP. Para interromper o LOOP provocado deve-se utilizar o seguinte mtodo: clearTimeout (Varivel) Onde: Varivel o nome da varivel de controle do timer.
UEL Universidade Estadual de Londrina DC Depto. de Computao

Timer e date

123

Exemplo de um formulrio apresentando a data e hora atual, atualizando os dados a cada segundo: Tendo dois botes de rdio que tem a funo de: ativar e desativar a atualizao dos dados. Apresentando tambm, fora do formulrio, a data contendo dia e ms por extenso.

UEL Universidade Estadual de Londrina DC Depto. de Computao

Timer e date

124

<script> function Hoje() { ContrRelogio = setTimeout ("Hoje()", 1000) Hr = new Date() dd = Hr.getDate() mm = Hr.getMonth() + 1 aa = Hr.getYear() hh = Hr.getHours()

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

125

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 }
UEL Universidade Estadual de Londrina DC Depto. de Computao

Timer e date

126

// function CriaArray (n) { this.length = n } // NomeDia = new CriaArray(7) NomeDia[0] = "Domingo" NomeDia[1] = "Segunda" NomeDia[2] = "Tera" NomeDia[3] = "Quarta" NomeDia[4] = "Quinta" NomeDia[5] = "Sexta" NomeDia[6] = "Sbado" //
UEL Universidade Estadual de Londrina DC Depto. de Computao

Timer e date

127

NomeMes = new CriaArray(12) NomeMes[0] = "Janeiro" NomeMes[1] = "Fevereiro" NomeMes[2] = "Maro" 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" //
UEL Universidade Estadual de Londrina DC Depto. de Computao

Timer e date

128

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>

UEL Universidade Estadual de Londrina DC Depto. de Computao

Timer e date

129

<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)">Desativa <input type=radio name="Botao" value="Ativa Relogio" onclick="ContrRelogio = setTimeout('Hoje()', 1000)">Ativa </form>
UEL Universidade Estadual de Londrina DC Depto. de Computao

Timer e date

130

JANELAS
Como abrir novas janelas sobre uma janela contendo o documento principal? No confundir esta forma de abrir janelas com a diviso da tela em vrias partes, ou mesmo com a chamada de outras pginas. Para que no existam dvidas, vamos ver os dois mtodos.
UEL Universidade Estadual de Londrina DC Depto. de Computao

Abrindo novas Janelas

131

FRAME Tela divida em vrias janelas contendo documentos diferentes. A tela inteira = um FrameSet Cada parte = um Frame. Cada Frame definido dentro do FrameSet atravs da especificao dos parmetros: % da tela na vertical (cols), % da tela na horizontal (rows) e o nome de cada frame.
UEL Universidade Estadual de Londrina DC Depto. de Computao

Abrindo novas Janelas

132

Criado o FrameSet podemos ento abrir documentos distintos em cada Frame acrescentando ao link do documento a diretiva: target=nome do frame. Ex. <href="Eventos.htm" target="Principal">
O arquivo Eventos.htm ser aberto dentro do frame de nome Principal As chamadas de outras telas (documentos) feita atravs do link para o documento desejado.
UEL Universidade Estadual de Londrina DC Depto. de Computao

Abrindo novas Janelas

133

Ex.

<href="Eventos.htm" > O arquivo Eventos.htm ser aberto em substituio a tela existente.


Os comandos JavaScript, podem: 1. Abrir uma janela 2. Abrir um documento dentro desta janela 3. Escrever o contedo da janela 4. Fechar a janela e 5. Fechar o documento.
UEL Universidade Estadual de Londrina DC Depto. de Computao

Abrindo novas Janelas

134

Abrindo uma Janela


A sintaxe geral deste mtodo a seguinte: Variavel = window.open ("Url", "Nome da janela", "Opes") Onde: Variavel - Nome que ser atribudo como propriedade da janela. Url - Endereo Internet onde a janela ser aberta. Normalmente voc estar utilizando a sua prpria Url, neste caso, preencha com "".
UEL Universidade Estadual de Londrina DC Depto. de Computao

Abrindo novas Janelas

135

Nome da Janela - o nome que aparecer no top da janela (Ttulo) Opes - So as opes que definem as caractersticas da janela, que so: toolbar - Cria uma barra de ferramentas tipo "Back", "Forward", etc. location - Abre a barra de location do browse directories - Abre a barra de ferramentas tipo "What's New", "Handbook", etc. status - Abre uma barra de status no rodap da janela scrollbars - Abre barras de rolamento vertical e horizontal menubar - Cria uma barra de menu tipo "File", "Edit", etc. resizable - Permite ao usurio redimensionar a janela
UEL Universidade Estadual de Londrina DC Depto. de Computao

Abrindo novas Janelas

136

width - Especifica a largura da janela, em pixels height - Especifica a altura da janela, em pixels
Todas as opes (exceto width e height) so boleanas e podem ser setadas de duas formas. Exemplo: "toolbar" ou "toolbar=1") so a mesma coisa. Se nada for especificado, entende-se que todas as opes esto ligadas; Se especificada qualquer opo, ser entendido que esto ligadas apenas as opes informadas. As opes devem ser informadas separadas por vrgula, sem espao entre elas.
UEL Universidade Estadual de Londrina DC Depto. de Computao

Abrindo novas Janelas

137

Abrindo um documento dentro da janela


Para abrir um documento dentro da janela, deve ser utilizado o seguinte mtodo: Variavel.document.open() Onde: "Variavel" o nome da varivel associada ao mtodo window.open

UEL Universidade Estadual de Londrina DC Depto. de Computao

Abrindo novas Janelas

138

Escrevendo no Documento
Para escrever a tela no documento, deve ser utilizado o seguinte mtodo: Variavel.document.write ("Comandos html, Comandos JavaScript, Textos, etc.")

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

139

Fechando a Janela
Para fechar a janela, utilize o seguinte mtodo: Variavel.document.write ("window.close()") Fechando o Documento Para fechar o documento, utilize o seguinte mtodo: Variavel.document.close ()

UEL Universidade Estadual de Londrina DC Depto. de Computao

Abrindo novas Janelas

140

Atividades Diversas Variveis <html>

<head> <title>Clicar no boto</title> <script> var mensage; //Para guardar o nome function load() { mensage = prompt(Seu nome?"); } function touch() { alert(mensage); } </script> </head>

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

141

Dois botes (Execuo)

click

2 seg

click

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

142

Dois botes (body)


Quando o documento for carregado (a pgina estiver visvel) chamada a funo load()
<body onload ='load();'> <p> O boto pressionado foi: <input type ="text" id ="press" readonly ="X" /> </p> <input type ="button" onclick ='set("Primeiro");' value ="Primeiro boto" /> <input type ="button" onclick ='set("Segundo");' value ="Segundo boto" /> </body>

Identificao do elemento HTML. Forma de obter o objeto que representa o elemento HTML.

No permite a edio

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

143

Mtodo de document para obter o objeto que representa o elemento com id = "press" Recebe um argumento com a mensagem a escrever no elemento com id = "press" Chama a funo erase passados 2 segundos A propriedade value contem o texto de um elemento <input>

Dois botes (script)


<script> var pressObj;

function load() { pressObj =


document.getElementById("press"); erase(); alert(document.title); } function set(message) { pressObj.value = message; setTimeout("erase();",2000); } function erase() { pressObj.value = nenhum boto; } </script>

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

144

Concatenao (body)
Quando o documento for carregado e quando for descarregado

<body onload = 'load();' onunload = 'exit();' > <p> Texto a acrescentar: <input type="text" id="add" /> </p> <input type="button" onclick='concat();' value="Acrescentar" /> <input type="button" onclick='erase();' value="Apagar" /> <textarea id="txt" rows="4" cols="30"> texto inicial </textarea> </body>

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

145

Concatenao

A expresso A+B tem como resultado a concatenao do texto de A com B. Sendo A ou B uma string.

A expresso A+=B equivalente a A=A+B

<script> var userName, txtObj, addObj; function load() { userName = prompt("Seu nome?"); addObj = document.getElementById("add"); txtObj = document.getElementById("txt"); var msg = "Bem vindo " + userName + " pgina \"" + document.title + "\""; alert(msg); } function exit() { alert("Adeus " + userName); } function concat() { txtObj.value += addObj.value; addObj.value = ""; } function erase() { txtObj.value= ""; } </script>

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

146

Valores numricos
2

1.3333333333333332
1 2 6 0

<script> function f() { var a = 4 ; var x = a * 0.5 ; alert( x ); alert( a / 3 ); alert( a % 3 );

Valor inteiro

Valor real

alert( a x ); alert( a + x );
x = 2e-3 alert( 0 alert( x alert( 0 } </script> ; / x ); / 0 ); / 0 );

Infinity
NaN
UEL Universidade Estadual de Londrina DC Depto. de Computao

Valor real em notao cientfica

Introduo

147

Tabuada
<style> #tabval { width:2em } </style> <body onload='load()'> Tabuada dos <input type="text" id="tabVal" onkeyup='genTab();' value="1" maxLength="2" /> <br /> <textarea id="tab" rows="10" cols="15" readonly="" /> </body>

Inserir no mximo 2 caracteres


var tabVal, tab; function load( ) { tabVal = document.getElementById("tabVal"); tab = document.getElementById("tab"); genTab(); }
UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

148

Repetio (for)
Instruo de repetio
for (expresso1; condio; expresso2) instruo

Acrescentar as primeiras 9 linhas


function genTab() { tab.value = ""; var val = Number(tabVal.value), line; for ( var i=1; i <= 9 ){ line= val + " X " + " = " + ( val tab.value += line + } line= val+ " X 10 = (val*10); tab.value += line; }

equivalente a
expresso1; while ( condio ) { instruo expresso2; }

; ++i
i + * i ); "\n"; +

A expresso1 avaliada uma nica vez. A condio avaliada antes da execuo de cada ciclo. A expresso2 executada no final de cada iterao.
UEL Universidade Estadual de Londrina DC Depto. de Computao

Acrescentar a ltima

Introduo

149

Visualizar sequncia de imagens


<style type="text/css"> .figure {text-align:center; width: 200px; height: 150px; } img { height: 80% } </style>

<body onload='load()'> <div class= "figure"> <span id= "legend">legenda</span><br /> <img id= "image" src= "" alt= "" /> </div> <input type= "button" value= "seguinte" onclick='next()' /> </body>
UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

150

Arrays
O array uma sequncia de elementos. Os elementos do array so identificados pela sua posio (ndice).
<script type="text/javascript"> var imagens= new Array("por do sol.jpg", "vulcao.jpg", "flores.jpg", "berlindes.jpg"), current = 0, // Imagem visualizada image, legend; function load() { image=document.getElementById("image"); legend=document.getElementById("legend"); change(); } ... </script>

Um array em JavaScript um objecto, que tem como propriedades: Os ndices, que armazenam os elementos; O length, que armazena o nmero de elementos.

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

151

Criar e iniciar Arrays


Um array pode ser criado atravs : Do operador new (como qualquer objecto) Exemplos: // array com 10 elementos iniciados a undefined var a = new Array(10) ; // a.length = 10
// array com 3 elementos iniciados 1, 2 e 3 respectivamente var a = new Array(1, 2, 3); Da descrio literal (literally) [item0, item1, ...] var a = [1, 2, 3]; que equivalente: var a = new Array(1, 2, 3); Da funo Array. var a = Array(item0, ...); que equivalente: var a = new Array(item0, ...);
UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

152

Arrays
Os elementos dos arrays so indexados de 0 a length-1. A notao a[n] refere o elemento do array a cujo ndice n, em que n um valor numrico positivo.
<script> ... function change() { image.src = imagens[current]; image.alt= imagens[current]; legend.firstChild.data = imagens[current]; } function next() { if (++current == imagens.length) current = 0; change(); } Note-se que o operador ++ prefixo devolve </script>

o valor depois de incrementado.


UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

153

Visualizar e/ou acrescentar imagens


click

<body onload='load()'> <div class= figure"> <span id= "legend">legenda</span> <br/> <img id= "image" src= "" alt= "" /> </div> <input type="button" value="seguinte" onclick='next()' /> <input type="button" value="anterior" onclick='prev()' /> <input type="button" value="mostrar" onclick='show()' /> <input type="text" id= "file" value= ""/> </body>
UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

154

Visualizar e/ou acrescentar imagens (cont.)


function load() { image = document.getElementById("image"); legend = document.getElementById("legend"); file = document.getElementById("file"); change(); } function next() { if (++current == imagens.length) current = 0; change(); } function prev() { if (current-- == 0) current = imagens.length - 1; change(); } Note-se que o operador sufixo

devolve o valor a decrementar.


UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

155

Visualizar a imagem
Coloca como imagem corrente a imagem Procura file.value no com o nome indicado. Se este no existir array imagens, devolve o ndice onde se encontra, no array imagens acrescenta-a.
function show() { if ( isValid(file.value) ) { current = find( file.value); if (current == imagens.length) imagens[imagens.length] = file.value; change(); Acrescentar um elemento } no fim do array imagens } function isValid(str) { return Number(str)!=0 || !isNaN( parseInt(str) ); }

ou imagens.length caso no encontre.

Uma string convertida no valor numrico 0, se estiver vazia ou s contiver separadores


UEL Universidade Estadual de Londrina DC Depto. de Computao

Devolve um NaN se a string estiver vazia


156

Introduo

Converso implcita: Quando numa operao estiverem envolvidos valores de tipos diferentes, os valores dos operandos so automaticamente convertidos para valores de um mesmo tipo dependendo da operao. Exemplos:
O resultado da operao 2 + 1 a string 21 O resultado da operao 2 * 1 o valor numrico 2

Converses

Existem operaes onde ocorre a converso automtica de todos os operandos. Exemplos:


O resultado da operao 2 * 1 o valor numrico 2 O resultado da operao 2 && 1 o valor Boolean true

Converso explcita : Alm da converso implcita, pode-se aplicar converso explcita atravs de funes com o nome do tipo (Number, Boolean, etc.). A seguir apresenta-se as tabelas de converso dos valores entre tipos.
UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

157

A converso para Number de um valor feita de acordo com a tabela: Tipo do valor Resultado da converso Undefined Null Boolean Number String NaN 0 1 se true, 0 false Igual ao argumento (no existe converso) O valor numrico interpretado depois de retirados os separadores iniciais e finais string. 0 (zero) se depois de retirados os separadores a string for vazia (dimenso 0). NaN se no conseguir interpretar como valor numrico.

Converses para Number

Exemplo de caracteres separadores so: tab, espao e mudana de linha.


UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

158

Number
Propriedades de Number
Number.MAX_VALUE, Number.MIN_VALUE Number.NaN Number.NEGATIVE_INFINITY, Number.POSITIVE_INFINITY

Descrio
Maior e menor valor positivo NaN - e +

Mtodos de qualquer Number valueOf()

Descrio
Retorna o valor numrico primitivo.

toString(base) Retorna uma string que corresponde ao valor na base indicada. Caso a base no seja indicada considerada 10. toFixed(digit) Retorna uma string com o valor em virgula fixa, com digit casas decimais. toExponential( Retorna uma string com o valor em notao ) exponencial. Introduo UEL Universidade Estadual de Londrina 159
DC Depto. de Computao

Boolean
A converso para Boolean de um valor feita de acordo com a tabela:

Tipo do valor Undefined, Null


Boolean Number

Resultado da converso false


Igual ao argumento (no existe converso) false se +0,-0,NaN; true caso contrrio

String

false se a dimenso zero; true caso contrrio Descrio Retorna o valor Boolean primitivo.
Retorna true ou false conforme o valor seja true ou false respectivamente Introduo
160

Mtodos de qualquer Boolean:

Mtodo valueOf()
toString()

UEL Universidade Estadual de Londrina DC Depto. de Computao

Converses para String


A converso para String de um valor feita de acordo com a tabela:

Tipo do valor Undefined Null


Boolean

Resultado da converso
undefined

null
true ou false conforme o valor seja true ou false respectivamente

Number

Se o valor for: NaN resulta NaN +0 ou -0 resulta 0


+ ou - resulta Infinity ou a string que representa o valor numrico

String

Igual ao argumento (no existe converso) Introduo


161

UEL Universidade Estadual de Londrina DC Depto. de Computao

String
Mtodo de String
String.fromCharCode(car0,..)

Descrio
Retorna a string contendo tantos caracteres quantos os argumentos. Cada argumento especifica o cdigo dos caracteres da string.

Mtodo de qualquer String charAt(pos) charCodeAt(pos) indexOf(s, pos) lastIndexOf(s,pos)

Descrio Retorna uma string contendo o carcter situado no ndice pos Retorna o valor numrico do carcter situado no ndice pos Retorna o ndice maior ou igual a pos onde se encontra a substring s, ou -1 se no encontrar Retorna o ndice menor ou igual a pos onde se encontra a substring s, ou -1 se no encontrar

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

162

String (cont.)
Mtodo valueOf() concat(s1, s2, ...) slice(start, end) split(sep) Descrio Retorna o valor da string Retorna uma string contendo os caracteres da prpria concatenados com os de s1, s2, ... Retorna a substring de start a end no incluindo o elemento o elemento end. Retorna um objecto Array de substrings. As substring so determinadas pela ocorrncia da esquerda para a direita da string sep. Estas ocorrncias no so includas nas substrings. toLowerCase() toUpperCase() Retorna uma string com os caracteres todos em minsculas. Retorna uma string com os caracteres todos em maisculas.

Quando se refere string ou substring um valor e no um objecto String


UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

163

Objecto Global
Mtodo eval(v) parseInt(s,radix) Descrio Se v no uma string retorna v. Caso contrrio interpreta como se fosse um programa e avalia-o. Retorna o valor numrico que resulta da interpretao da string s na base radix. Ignora os separadores iniciais e os caracteres a partir do primeiro carcter que no possa ser interpretado como fazendo parte da notao dum inteiro na base radix. Retorna NaN se radix<2 ou radix>36, ou se a string depois de retirados os caracteres a ignorar for vazia. Igual anterior s que interpreta os caracteres que fazem parte dum valor numrico na base decimal.

parseFloat(s)

isNaN(v)
isFinite(v)

Retorna true se Number(v) for NaN.


Retorna false se Number(v) NaN, + ou -.

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

164

Pesquisa sequencial em array


Instruo return
return expresso;

Se encontrar retorna o ndice, caso contrrio retorna o nmero de elementos no array.


function find( fileName) { for (var i=0;i < imagens.length; ++i){ if ( imagens[i] == fileName ) return i; return imagens.length; }

o mecanismo usado pelas funes para retornar um valor para quem a chamou, provocando que a funo termine a execuo imediatamente. A funo que a chamou pode no entanto ignorar o valor retornado.

No caso de uma funo no retornar valor, pode constar no corpo de uma funo return; com o objectivo de provocar o trmino imediato da funo

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

165

Arrays ordenados
Inicialmente ordena os elementos do array
function load() {imagens.sort(); ... }

Se a imagem no existir no array imagens acrescenta-a ordenadamente.

function show() { if ( isValid(file.value) ) { var res = find( file.value ); if (!res.found ) insert(res.index, file.value); current = res.index; change(); } } function insert(i, fileName) { for (var j=imagens.length-1; j>=i; --j) imagens[j+1] = imagens[j]; Inserir no ndice imagens[i] = fileName; res.index do array o }

Devolve um objecto, que tem as propriedades: found, valor Boolean; index, valor numrico. Se found for true index contem o ndice onde se encontra , caso contrrio o ndice onde se deveria encontrar.

valor file.value

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

166

Inserir um elemento no array


Inserir no ndice i do array imagens o valor fileName.
function insert(i, fileName)

imagens 0: a.gif 1: c.gif 2: d.gif 3: e.gif

i fileName 1 b.gif
Deslocar para o ndice seguinte os elementos do array imagens cujo ndice maior ou igual a i.
for (var j =imagens.length-1; j >= i; --j) imagens[j+1] = imagens[j];

imagens Colocar fileName como valor do elemento imagens 0: a.gif ndice i do array. imagens[i] = fileName; 0: a.gif 1: c.gif 1: b.gif 2: c.gif 2: c.gif 3: d.gif 3: d.gif 4: e.gif 4: e.gif
UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

167

Mtodos dos objectos Array


Mtodo sort() concat(a1,a2,...) Descrio Ordena o array. Retorna um array contendo o prprio concatenado com a1, a2, ...

slice(start,end)
reverse() join(separator) toString() push(v1,v2, ...) pop() splice(start,count )

Retorna um array contendo os elementos de start a end, no incluindo o elemento end.


Inverte o array. Retorna uma string contendo os elementos separados por separator O mesmo que join , o separador a virgula Acrescenta v1, v2, ... no fim Remove o ltimo elemento Retorna um array contendo os count elementos a partir de start, e remove-os do array.

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

168

Inserir um elemento no array


A funo insert poderia ser definida usando os mtodos disponibilizados pelos objectos Array.
function insert(i, fileName) { var last=imagens.splice(i, imagens.length-i); imagens[i] = fileName; imagens = imagens.concat(last); Obter do array imagens o } array com os elementos que

Acrescentar ao array imagens o elemento fileName.

se situam a partir do ndice i, e remove-los do array imagens. Acrescentar ao array imagens os elementos do array last.

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

169

Inserir um elemento no array


Inserir no ndice i do array imagens o valor fileName.
function insert(i, fileName)

imagens i fileName 0: a.gif 1 b.gif 1: c.gif Obter do array imagens o array com os elementos que se 2: d.gif situam a partir do ndice i, e remove-los do array imagens. var last=imagens.splice(i, imagens.length-i); 3: e.gif imagens last 0: a.gif 0: c.gif Acrescentar ao array imagens o 1: d.gif imagens elemento fileName. 2: e.gif 0: a.gif
imagens[i] = fileName;

imagens 0: a.gif 1: b.gif

Acrescentar ao array imagens os elementos do array last.


imagens.concat(last);

1: b.gif 2: c.gif 3: d.gif 4: e.gif


170

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

Pesquisa sequencial em array ordenado


Se encontrar retorna um objeto cuja propriedade found tem o valor true e a propriedade index o ndice onde se encontra. Se no encontrar a propriedade found tem o valor false e a propriedade index o ndice onde se deveria encontrar. Cria o objeto resultado.

function find(fileName){ var i, res = new Object(); Acrescenta a propriedade res.found = false; found com valor false ao for (i = 0; i < imagens.length; objeto res. ++i) if (imagens[i] >= fileName ) { Modifica o valor da if (imagens[i]==fileName) propriedade found. res.found = true; break; Acrescenta a propriedade } index com valor i ao res.index = i; return res; objeto res. } A instruo break usada numa instruo de repetio termina o ciclo.
UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

171

Pesquisa dicotmica em arrays ordenados


O algoritmo para pesquisar num array ordenado, pode ser descrito na forma seguinte: 1. Definir o alcance de pesquisa [begin,end]: begin=0; end=length-1. 2. Terminar se no existe alcance de pesquisa (end < begin). O elemento devia encontrar-se em begin. 3. Determinar ponto mdio: middle = (begin+end)/2. 4. Terminar se o valor a procurar for o do ponto mdio. O elemento encontra-se em middle. 5. Se o valor a procurar for menor que o do ponto mdio, o alcance de pesquisa reduz-se para [begin, middle -1]. Voltar ao ponto 2. 6. Se o valor a procurar for maior que o do ponto mdio, o alcance de pesquisa reduz-se para [middle +1, end]. Voltar ao ponto 2.

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

172

Pesquisa dicotmica em arrays ordenados


function find(fileName){ // Definir o alcance de pesquisa (ponto 1) var begin = 0, end = imagens.length-1, middle, res = new Object(); // Se no existir alcance de pesquisa (ponto 2) while( begin <= end) { // Determinar o ponto mdio (ponto 3) middle = Math.floor((begin + end)/2); // Valor foi encontrado (ponto 4) if ( fileName == imagens[middle] ) { res.found= true; res.index= middle; return res; } if ( fileName < imagens[middle]) end = middle-1; // Reduzir o alcance (ponto 5) else begin = middle+1;// Reduzir o alcance (ponto 6) } res.found= false; res.index= begin; return res; }
UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

173

Operador + (Concatenao ou soma)


var a = "Java"; // a - string var b = "Script"; // b - string

JavaScript
alert( a + b ); // concatenao // b nmero // concatenao // concatenao

Java2.1 2.1Java

b = 2.1; alert( a + b ); alert( b + a );

A+B

9.1

a = 7; alert( a + b );

// a nmero // soma numrica

Se A e B so strings, faz a concatenao Se A string, converte B em string e faz a concatenao Se B string, converte A em string e faz a concatenao Seno realiza a soma dos valores A e B
UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

174

Reforo em operadores numricos


Equivalncia
X+= A X-= A X= X+A X= X-A

X*= A
X/= A X%= A

X= X*A
X= X/A X= X%A

Valor de X Valor de A
X= ++A

Excetuando o operador soma:


Caso A ou B no seja um valor numrico, este ser convertido em valor numrico. Se no for possvel a converso, resulta o valor NaN.
Introduo
175

A+1

A+1

X= A++
X= --A X= A--

A
A-1 A

A+1
A-1 A-1

UEL Universidade Estadual de Londrina DC Depto. de Computao

eval()
Avalia o cdigo contido na string passada como parmetro 9

var exp = 4 + 5"; var b = eval(exp); alert( b );

<script type="text/javascript"> var exp, val; function load() { exp = document.getElementById("exp"); val = document.getElementById("val"); } function doEval() { val.value = eval(exp.value); } </script> <body onload='load();'> <input type="text" id="exp" /> <input type="button" value="eval" onclick='doEval();' /> <input type="text" id="val" readonly="" /> </body>

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

176

Mtodos e propriedades de Math


Math
round(v) ceil(v) floor(v) max(a,b) min(a,b) abs(v) random() sin(v) cos(v) tan(v) asin(v) acos(v)

Valor inteiro mais prximo de v Valor inteiro maior ou igual a v Valor inteiro menor ou igual a v O maior dos valores a e b O menor dos valores a e b O valor absoluto de v Pseudo-aleatrio entre 0 e 1 Seno de v Coseno de v Tangente de v Arco-seno de v Arco-coseno de v Arco-tangente de v

atan(v)

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

177

Math
atan2(x,y) pow(b,p) exp(p) log(v) sqrt(v) E LN2 LN10 LOG2E LOG10E PI SQRT1_2 SQRT2

ngulo entre eixo X e (x,y) b elevado a p E elevado a p Logaritmo natural de v Raiz quadrada de v Constante de Euler ( 2.718) Logaritmo natural de 2 Logaritmo natural de 10 Logaritmo de E na base 2 Logaritmo de E na base 10 Valor de ( 3.14159) Raiz quadrada de Raiz quadrada de 2

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

178

Valores lgicos
Os valores lgicos so apenas dois: true e false. Das comparao (operadores relacionais) resultam valores lgicos

Operadores lgicos
Resultado true se:
A&&B A||B !A

A e B tm valor lgico true A ou B tem valor lgico true A tem valor lgico false

A e B so convertidos para valores lgicos, caso no sejam: Qualquer objecto true String false se estiver vazia Nmero true se for diferente de 0 null e undefined so false
UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

179

Operadores relacionais
Resultado true se:
A==B A!=B

O valor de A igual a B A diferente de B

A===B
A!==B A<B A<=B A>=B A>B

A igual a B (sem converso)


A diferente de B (sem conv.) A menor que B A menor ou igual a B A maior ou igual a B A maior que B

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

180

Converses operadores relacionais

Os operadores <, >, >= e <= Se ambos os operandos so strings, realiza a comparao lexicogrfica. Se no, os operandos so convertidos para valores numricos: Caso algum operando seja NaN o resultado false + maior que qualquer coisa (mesmo +), - menor que qualquer coisa (mesmo -)

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

181

Os operadores == e !=

Se os operandos so do mesmo tipo, realiza a comparao dos contedos. Se no, tenta converter os operandos em string, em valor numrico ou valor lgico. Caso no consiga nenhum, so considerados diferentes. O valor NaN no igual a nada (mesmo NaN), null considerado igual a null ou undefined. S considera os operandos iguais se forem do mesmo tipo e tiverem contedo igual.

Os operadores === e !==

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

182

Prioridades dos operadores


Descrio

. [] () ++ -- - ! * / % + < <= > >= == != === !== && || ?: = ,


operator=

Acesso a propriedade, indexao em array, chamada a funo e agrupamento de expresses Incremento, decremento, simtrico, negao lgica Multiplicao, diviso, resto Soma e concatenao, subtraco Menor, menor ou igual, maior, maior ou igual Igual, diferente, igual estrito, diferente estrito

E lgico Ou lgico Deciso binria com operador ternrio Atribuio, atribuio com operao Avaliao mltipla

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

183

Exerccio
Testar os comandos de java Script explicitados neste mdulo. Relao de testes.. Gerar grupos de dois e cada grupo montar uma home page utilizando o mximo possvel de comandos em java script. Sugestes: (pgina pessoal, laser, trabalho, jogos, etc.)

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

184

Escrita no documento

<SCRIPT language="JavaScript"> <!-valor = 25 document.write ("<p>Ex: escrita no documento</p>") document.write ("<p>Resultado de uma conta : " + (2* valor) + "</p>") //--> </SCRIPT> Tags do HTML define pargrafo pode-se utilizar <br> para mudana de linha Teste1.html
UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

185

EX: expre = prompt("Digite uma expresso matemtica", "1+5*3") Resultado = eval(expre) document.write("O resultado da expresso " + Resultado)
Teste2.html

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

186

Utilizao de mensagens
ex: if (confirm ("Detectado um virus...\ndevo prosseguir ???")) { alert("O risco seu") } else { alert("Sabia deciso") }

Teste3.html

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

187

<SCRIPT language="JavaScript"> <!-- hide from old browsers function Aposentadoria(Anos) { if (Anos > 35) // aposentadoria com 35 anos { alert ("Voc j pode aposentar") } else { alert ("faltam " + (35 - parseInt(Anos))+" anos para se aposentar") } } //--> </SCRIPT> <p>Digite a quantidade de anos trabalhados</p> <form> <input type=text size=2 maxlength=2 name="Tempo" onchange="Aposentadoria(Tempo.value)"> </form>

Teste4.html
188

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

Registro
function Departamento (Derp, func, cargo) { this. Derp = Derp this. func = func this. cargo = cargo}

Teste5.html

dcop = new Departamento ("Computao", Rafael", Professor") alert (dc.Derp+ " "+ dc.func+ " "+dc.cargo)

Arrays
function Array (n) { this.length = n for (var i = 1 ; i <= n ; i++) { this[i] = "" } }
UEL Universidade Estadual de Londrina DC Depto. de Computao

Dia = new Array(3) Dia[0] = "Domingo" Teste6.html Dia[1] = "Segunda" Dia[2] = "Tera" alert (Dia[0]+ "/"+Dia[1]+ "/"+Dia[2])
Introduo
189

Strings
string.length - tamanho da string em caracteres string.charAt(posio) - retorna o caracter da posio (inicia em 0) string.substring(index1, index2) retorna o contedo da string que corresponde ao intervalo especificado. Ex: palavra = Extraordinario" Result = palavra.substring(4, 14) // Result = " Ordinario " alert (palavra.toUpperCase()+ " pode ser algo "+Result)

Teste7.html
string.toUpperCase() - Caixa Alta string.toLowerCase() - Caixa Baixa
UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

190

Datas
getDate() - dia (1 a 31) getDay() - dia da semana (0 a 6) getMonth() - ms (0 a 11) getYear() - Obtm o ano getHours() - hora (0 a 23) getMinutes() - minutos (0 a 59) getSeconds() - segundos (0 a 59) EX: corrente = new Date() Dia = corrente.getDate() alert (Dia+" "+ (corrente.getMonth()+1)) Teste8.html
UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

191

Exemplos Prticos
Teste9.html Teste10.html Teste11.html Teste12.html

Teste13.html-captura o nome e verso do Browser

Teste14.html- Abre uma nova janela


Teste15.html - carrega uma nova pgina (no execute)

Teste16.html- Abre uma nova janela Teste17.html- Manipulao com imagens e link

UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

192

Links e Referncia
http://ec.mvc.dcccd.edu/web1/resources.htm Tutoriais de Java Script
http://www.echoecho.com/html.htm Tutoriais de html e Java Script http://www.icmsc.sc.usp.br/manuals/HTML/ Tutoriai de html Tanenbaum, Andrew S. Redes de Computadores. Traduo da 3a edio, Editora Campus, 1997.
UEL Universidade Estadual de Londrina DC Depto. de Computao

Introduo

193