Escolar Documentos
Profissional Documentos
Cultura Documentos
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.
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:
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
Introduo
OPERADORES LGICOS
So operadores a serem utilizados em comandos condicionais (IF , FOR e WHILE), So eles:
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:
Operadores Matemticos
11
OPERADORES MATEMTICOS
+=
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
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")
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...
Eventos
19
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
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.
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
Clique no boto mouse Duplo clique no mouse Tecla pressionada Tecla pressionada e liberada Tecla liberada
onmouseout
onfocus onblur
<body> -
onload
onunload
Na carga do documento
Na descarga do documento (sada)
onchange
onselect
28
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>
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
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)
UEL Universidade Estadual de Londrina DC Depto. de Computao
Nome do mtodo
Orientado a Objeto
36
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>
Orientado a Objeto
39
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>
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>
Orientado a Objeto
42
MENSAGENS
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:
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>
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.
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>
Introduo
50
FUNES INTRNSECAS
So funes embutidas na prpria linguagem. A sintaxe geral a seguinte: Result = funo (informao a ser processada)
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
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
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
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
56
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 }
UEL Universidade Estadual de Londrina DC Depto. de Computao
Instanciao
58
Instanciao
59
Arrays
60
Arrays
61
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"
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"
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 %)
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
Datas
70
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.
Datas
75
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
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
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
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
UEL Universidade Estadual de Londrina DC Depto. de Computao
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).
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
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
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
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
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
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
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
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
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
UEL Universidade Estadual de Londrina DC Depto. de Computao
97
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
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
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
101
<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.
Interao com o Usurio
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)
UEL Universidade Estadual de Londrina DC Depto. de Computao
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
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
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>
UEL Universidade Estadual de Londrina DC Depto. de Computao
110
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
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.
UEL Universidade Estadual de Londrina DC Depto. de Computao
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 }
UEL Universidade Estadual de Londrina DC Depto. de Computao
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
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
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.
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.
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 }
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>
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
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
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
133
Ex.
134
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
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
137
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
<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
click
2 seg
click
Introduo
142
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>
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.
<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
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
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>
Introduo
148
Repetio (for)
Instruo de repetio
for (expresso1; condio; expresso2) instruo
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
<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.
Introduo
151
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>
Introduo
153
<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
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) ); }
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
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.
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 +
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:
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
Mtodo valueOf()
toString()
Resultado da converso
undefined
null
true ou false conforme o valor seja true ou false respectivamente
Number
String
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.
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.
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)
Introduo
164
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(); ... }
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
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
slice(start,end)
reverse() join(separator) toString() push(v1,v2, ...) pop() splice(start,count )
Introduo
168
se situam a partir do ndice i, e remove-los do array imagens. Acrescentar ao array imagens os elementos do array last.
Introduo
169
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;
Introduo
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
Introduo
172
Introduo
173
JavaScript
alert( a + b ); // concatenao // b nmero // concatenao // concatenao
Java2.1 2.1Java
A+B
9.1
a = 7; alert( a + b );
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
X*= A
X/= A X%= A
X= X*A
X= X/A X= X%A
Valor de X Valor de A
X= ++A
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
<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
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
UEL Universidade Estadual de Londrina DC Depto. de Computao
Introduo
179
Operadores relacionais
Resultado true se:
A==B A!=B
A===B
A!==B A<B A<=B A>=B A>B
Introduo
180
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.
Introduo
182
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
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
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"> <!-- 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
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
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.
UEL Universidade Estadual de Londrina DC Depto. de Computao
Introduo
193