Jscript Poscc 300603

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

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).
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.
Introduo
Observao importante: Se houver erro de sintaxe no comando, o o JavaScript interpretar, o comando, como
sendo o nome de uma varivel.
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
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
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 + -).
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")
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"}
Comandos Condicionais
14
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) }
15
ComandoWHILE Executa uma ao enquanto determinada condio for verdadeira. while (condio) { ao } Ex. var contador = 10 while (contador > 1) { contador-- }
16
Move condicional receptor = ( (condio) ? verdadeiro : falso) Ex. NomeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino")
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.
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...
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");
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
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");' />
Eventos
22
Eventos Relao dos eventos possveis e os Momentos em que os mesmos ocorrem
E ainda
Objetos que possibilitam a sua ocorrncia.
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.
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.
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.
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
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
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>
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
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>
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
CRIANDO VARIVEIS
Obs: A varivel dever ser definida como global se for referenciada: - por vrias funes ou - ou em uma parte do documento
Variveis
33
CRIANDO VARIVEIS
Ex.Varivel Global : MinhaVariavel = "" Varivel Local : var MinhaVariavel = "" (no recomendvel).
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
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)
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
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
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>
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
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>
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>
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") }
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)
Mensagens
44
FUNES
Uma funo uma seqncia de instrues, que s deve ser executada quando a funo for acionada. A sintaxe geral a seguinte:
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

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") } }
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>
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.
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>
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
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.
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
Funes
53

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)
Funes
54
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)
Funes
55

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).
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
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 }
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
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.
Arrays
60
MANIPULANDO ARRAYS ?????

function CriaArray (n) { this.length = n for (var i = 1 ; i <= n ; i++) { this[i] = "" } }
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"
Arrays
62
2. Atividade = new CriaArray(5) Atividade[0] = "Analista" Atividade[1] = "Programador" Atividade[2] = "Operador" Atividade[3] = "Conferente" Atividade[4] = "Digitador"
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:
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")
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).
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"
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.
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 %)
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
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
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()
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)
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]
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)

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.
Interao com o Usurio
76
O objeto Input divide-se em (propriedade Type) Text Password Hidden Checkbox Radio Button Reset Submit
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.
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.
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>
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.
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.
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>
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
84
Ex:
<p> <form name="THidden"> <input type=hidden size=20 maxlength=30 name="HdTexto" value="" > </form> </p>
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" .

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.
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>
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>
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".
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.
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>
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.
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>
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.
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>
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
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.
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>
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>
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.
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">
<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">
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.
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>
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)
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.
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.
108
<script> function Verselect(Campo) { Icombo = Campo.selectedIndex alert ("Voce escolheu " + Campo.options[Icombo].text) } </script>
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>
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.
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>
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>
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.
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.
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.
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)
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 }
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>
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>
120
<p> <input type=button name="Testa" value="Testar Validade" onclick="Criticar() if (DadosOk) {alert ('Todos os Dados esto Corretos') } "> </p> </form> </body>
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.
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.
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.
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()
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 }
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" //
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" //
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>
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>
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.
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.
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.
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.
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 "".
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
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.
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
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.")
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 ()
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>
Introduo
141
Dois botes (Execuo)
click
2 seg
click
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
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>
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>
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>
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
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(); }
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.
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>
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.
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, ...);
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.

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

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

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

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

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

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

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
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.
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.
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; }
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
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
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>
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)
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
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
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
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 -)
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 !==
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
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.)
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
Introduo
185
EX: expre = prompt("Digite uma expresso matemtica", "1+5*3") Resultado = eval(expre) document.write("O resultado da expresso " + Resultado)
Teste2.html
Introduo
186
Utilizao de mensagens
ex: if (confirm ("Detectado um virus...\ndevo prosseguir ???")) { alert("O risco seu") } else { alert("Sabia deciso") }
Teste3.html
Introduo
187
<SCRIPT language="JavaScript">  </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
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] = "" } }
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
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
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
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.
Introduo
193

Jscript Poscc 300603

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Jscript Poscc 300603

Uploaded by

Copyright:

Available Formats

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

UEL Universidade Estadual de Londrina DC Depto. de Computao

UEL Universidade Estadual de Londrina DC Depto. de Computao

UEL Universidade Estadual de Londrina DC Depto. de Computao

<SCRIPT> Set de instrues </SCRIPT>

Procedimento a ser adotado em qualquer local da pgina.

UEL Universidade Estadual de Londrina DC Depto. de Computao

UEL Universidade Estadual de Londrina DC Depto. de Computao

sendo o nome de uma varivel.

UEL Universidade Estadual de Londrina DC Depto. de Computao

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

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

UEL Universidade Estadual de Londrina DC Depto. de Computao

150 % 13 retornar 7 7 % 3 retornar 1

UEL Universidade Estadual de Londrina DC Depto. de Computao

concatena/adiciona string/valor j existente.

UEL Universidade Estadual de Londrina DC Depto. de Computao

UEL Universidade Estadual de Londrina DC Depto. de Computao

UEL Universidade Estadual de Londrina DC Depto. de Computao

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

UEL Universidade Estadual de Londrina DC Depto. de Computao

UEL Universidade Estadual de Londrina DC Depto. de Computao

UEL Universidade Estadual de Londrina DC Depto. de Computao

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

UEL Universidade Estadual de Londrina DC Depto. de Computao

UEL Universidade Estadual de Londrina DC Depto. de Computao

Eventos dos objetos HTML

onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmouseup onmouseover onmousemove

Boto do mouse pressionado

Mouse saiu do objeto

UEL Universidade Estadual de Londrina DC Depto. de Computao

Eventos dos objetos HTML

Ganha o foco Perde o foco

<input>, <select>, <textarea>

O contedo foi alterado

UEL Universidade Estadual de Londrina DC Depto. de Computao

Associando cdigo JavaScript ao <html> carregamento <head>

UEL Universidade Estadual de Londrina DC Depto. de Computao

Afetar a varivel Consultar a varivel

UEL Universidade Estadual de Londrina DC Depto. de Computao

UEL Universidade Estadual de Londrina DC Depto. de Computao

UEL Universidade Estadual de Londrina DC Depto. de Computao

UEL Universidade Estadual de Londrina DC Depto. de Computao

UEL Universidade Estadual de Londrina DC Depto. de Computao

delete do else false finally for

function if in instanceof new null

return switch this throw true try

typeof var void while with

UEL Universidade Estadual de Londrina DC Depto. de Computao

Nome da propriedade Nome do objeto

Acessando o objeto document

UEL Universidade Estadual de Londrina DC Depto. de Computao

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

Surgir apenas uma linha com os dois textos emendados.

UEL Universidade Estadual de Londrina DC Depto. de Computao

UEL Universidade Estadual de Londrina DC Depto. de Computao

Formas de comunicao com o usurio:

UEL Universidade Estadual de Londrina DC Depto. de Computao

rea de definio de cdigo (em JavaScript)

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