You are on page 1of 193

Especialização em Ciência da Computação

Internet: Construção de páginas e programação Módulo 1 - JavaScript

Prof. Rafael Robson Negrão

UEL – Universidade Estadual de Londrina DC – Depto. de Computação

INTRODUÇÂO

JavaScript
Linguagem de programação interpretada (scripting), baseada em objetos e sem declaração de tipos. Permite injetar lógica em páginas escritas em HTML (HiperText Mark-up Language). As páginas HTML podem ser escritas utilizando-se editores de texto, como:  NotePad; Write, etc. Porém, existem editores próprios para gerar HTML
UEL – Universidade Estadual de Londrina DC – Depto. de Computação

Introdução

2

Os browsers mais divulgados (Internet Explorer, Netscape, etc.) são interpretadores de código JavaScript inserido em páginas HTML.
A linguagem JavaScript foi inicialmente desenvolvida pela Netscape

Versões da Netscape: versão inicial 1.0, seguiu-se a 1.1, 1.2, 1.3 , 1.4 e 1.5, ... cujos lançamentos foram coincidido com as várias versões do browser.

UEL – Universidade Estadual de Londrina DC – Depto. de Computação

Introdução

3

de Computação Introdução 4 . A versão standard (ECMAScript) foi definida pela ECMA (European Computer Manufacturers Association) e aprovada pela ISO. só reconhecida em ambiente Window  UEL – Universidade Estadual de Londrina DC – Depto. A Microsoft definiu a linguagem JScript que é uma extensão da ECMAScript.

de Computação Introdução 5 . Os parágrafos soltos são executados na seqüência em que aparecem na página (documento) e os atrelados a eventos são executados apenas quando o evento ocorrer.  Os parágrafos de lógica do javaScript podem estar "soltos" ou atrelados a ocorrência de eventos. UEL – Universidade Estadual de Londrina DC – Depto.

 Para inserir parágrafos de programação dentro do HTML é necessário identificar o início e o fim do set de JavaScript. da seguinte forma:    <SCRIPT> Set de instruções </SCRIPT> Procedimento a ser adotado em qualquer local da página. de Computação Introdução 6 . UEL – Universidade Estadual de Londrina DC – Depto.

de Computação Introdução 7 . Funções devem ser invocadas quando se fizer necessário (normalmente atreladas a eventos).  UEL – Universidade Estadual de Londrina DC – Depto. Para melhor visualização e facilidade de manutenção. recomenda-se que toda a lógica seja escrita no início do documento.

de Computação Introdução 8 . UEL – Universidade Estadual de Londrina DC – Depto. não é necessário o uso dos comandos <SCRIPT> e </SCRIPT>. Se a lógica é escrita a partir de um determinado evento.  Os comandos JavaScript são sensíveis ao tipo de letra (maiúsculas e minúsculas) em sua sintaxe – sensitive case.

de Computação Introdução 9 . o comando. UEL – Universidade Estadual de Londrina DC – Depto. o o JavaScript interpretará. Observação importante: Se houver erro de sintaxe no comando. como sendo o nome de uma variável.

de Computação Operadores Lógios 10 . FOR e WHILE). São eles: • • • • • • • • == != > >= < <= && || Igual Diferente Maior Maior ou Igual Menor Menor ou Igual E Ou UEL – Universidade Estadual de Londrina DC – Depto.OPERADORES LÓGICOS São operadores a serem utilizados em comandos condicionais (IF .

OPERADORES MATEMÁTICOS Operadores a serem utilizados em: São eles: • • • • • + * / % adição de valor e concatenação de strings subtração de valores multiplicação de valores divisão de valores obtém o resto de uma divisão: Ex: 150 % 13 retornará 7 7 % 3 retornará 1 UEL – Universidade Estadual de Londrina DC – Depto. de Computação Operadores Matemáticos 11 .

 + ou +  -). Um contador pode ser simplificado utilizando-se : X++ ou X– o que equivale as expressões: X = X + 1 ou X = X .1 respectivamente. *= . /= ou %=. de Computação Operadores Matemáticos 12 . UEL – Universidade Estadual de Londrina DC – Depto.OPERADORES MATEMÁTICOS • += concatena/adiciona à string/valor já existente. Para inverter sinal: X = -X ( . Ex: x += y é o mesmo que x = x + y da mesma forma podem ser utilizados: -= .

tab characters // .. Ex.new line caracters \r ..Delimitadores para inserir um texto com mais de uma linha como comentário. alert (“Experimente o uso de \" ou \' em uma string") UEL – Universidade Estadual de Londrina DC – Depto.CONTROLES ESPECIAIS        \b . de Computação Controles espericais 13 .backspace \f . Os delimitadores naturais para uma string são: " ou ' . utilize: \ precedendo " ou '. Para utilizar estes caracteres como parte da string..Linha de comentário /*.carriage return \t .form feed \n .*/ .

de Computação Comandos Condicionais 14 . Comando IF if (condição) { ação para condição satisfeita } [ else { ação para condição não satisfeita } ] Ex. if (Idade < 18) {Categoria = "Menor" } else {Categoria = "Maior"} UEL – Universidade Estadual de Londrina DC – Depto.COMANDOS CONDICIONAIS Tarefas a serem executadas ou não. ou enquanto esta for verdadeira. dependendo da veracidade ou não de uma condição.

x++) {alert ("X igual a " + x) } Comandos Condicionais UEL – Universidade Estadual de Londrina DC – Depto.] [incremento da variável de controle] ) { ação } Ex. x <= 10 . de Computação 15 . for (x = 0 .COMANDOS CONDICIONAIS Comando FOR for ( [inicialização/criação de variável de controle .] [condição .

} UEL – Universidade Estadual de Londrina DC – Depto.COMANDOS CONDICIONAIS ComandoWHILE Executa uma ação enquanto determinada condição for verdadeira. while (condição) { ação } Ex. var contador = 10 while (contador > 1) { contador-. de Computação Comandos Condicionais 16 .

de Computação Comandos Condicionais 17 .COMANDOS CONDICIONAIS Move condicional receptor = ( (condição) ? verdadeiro : falso) Ex. NomeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino") UEL – Universidade Estadual de Londrina DC – Depto.

UEL – Universidade Estadual de Londrina DC – Depto.IMPORTANTE SABER  Em FOR e WHILE: pode-se usar a diretiva "break" para interromper a condição principal e sair do loop. Diretivas/condições entre [ ] são opcionais. de Computação Comandos Condicionais 18 . e a diretiva "continue“ para interromper uma ação (se determinada condição ocorrer) e voltar para o loop.

a partir dos quais o programador pode definir ações a serem realizadas pelo programa.EVENTOS  São fatos que ocorrem durante a execução do sistema. de Computação Eventos 19 .. UEL – Universidade Estadual de Londrina DC – Depto. Segue exemplo..

Associando código JavaScript ao clique no botão <html> <head> <title>Clicar no botão</title> </head> <body> <input type="button" value="Clique aqui" onclick='alert("Ola"). de Computação Eventos 20 . UEL – Universidade Estadual de Londrina DC – Depto. neste caso: alert("Ola").' /> </body> </html> Quando for dado um clique no botão é executado o código (em JavaScript).

O tratamento de eventos é feito por partes de código associadas a eventos específicos  UEL – Universidade Estadual de Londrina DC – Depto. de Computação Eventos 21 .  O abandono da página  etc.Eventos  Um evento é gerado como resultado de uma ação:  Um clique.  Uma seleção de texto.  Um movimento do mouse.

 A associação é realizada em HTML nos elementos que suportam eventos do tipo Event através dos atributos: onEvent  Exemplo: <input type = "button" onclick = 'alert("Ola").' /> UEL – Universidade Estadual de Londrina DC – Depto. de Computação Eventos 22 .

Eventos Relação dos eventos possíveis e os Momentos em que os mesmos ocorrem E ainda Objetos que possibilitam a sua ocorrência. UEL – Universidade Estadual de Londrina DC – Depto. de Computação Eventos 23 .

Ocorre na descarga (saída) do documento. Select e Textarea.  onunload .Ocorre quando o objeto perde o focus e houve mudança de conteúdo.onload . Também só ocorre no BODY.  onchange . Válido para os objetos Text. de Computação Eventos 24 . Ou seja. só ocorre no BODY do documento.Ocorre na carga do documento.  UEL – Universidade Estadual de Londrina DC – Depto.

Checkbox.Ocorre quando o objeto recebe o focus.Ocorre quando o objeto recebe um Click do Mouse. Radio. Válido para os objetos Text. Select e Textarea. Válido para os objetos Buton. Link. de Computação  Eventos 25 . onblur .Ocorre quando o objeto perde o focus. Select e Textarea. Válido para os objetos Text.  onfocus . Reset e Submit. independente de ter havido mudança. onclick . UEL – Universidade Estadual de Londrina DC – Depto.

 onmouseover . onsubmit. Válido apenas para Link. de Computação   Eventos 26 .Ocorre quando o ponteiro do mouse passa por sobre o objeto. Válido para os objetos Text e Textarea. onselect . UEL – Universidade Estadual de Londrina DC – Depto.Ocorre quando um botão tipo Submit recebe um click do mouse. Válido apenas para o Form.Ocorre quando o objeto é selecionado.

<script>.Eventos dos objetos HTML Objetos com representação visual Todos exceto: <br>. <title> onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmouseup onmouseover onmousemove Clique no botão mouse Duplo clique no mouse Tecla pressionada Tecla pressionada e liberada Tecla liberada Botão do mouse pressionado Botão do mouse libertado Mouse sobre o objeto Mouse movido do objeto onmouseout Mouse saiu do objeto Eventos 27 UEL – Universidade Estadual de Londrina DC – Depto. de Computação . <html>. <head>. <style>.

<textarea> onfocus onblur <body> - Ganha o foco Perde o foco onload onunload Na carga do documento Na descarga do documento (saída) <input>. de Computação 28 . <select>.<select>.<input>. <textarea> onchange onselect O conteúdo foi alterado Texto foi selecionado Eventos UEL – Universidade Estadual de Londrina DC – Depto.Eventos dos objetos HTML <a>.

de Computação Eventos 29 .Associando código JavaScript ao <html> carregamento <head> Quando o documento for carregado (a página estiver visível) é chamada a função load() <title>Clicar no botão</title> </head> <body onload = 'load()' > <input type="button" value="Clique aqui" onclick= 'touch()' /> </body> </html> UEL – Universidade Estadual de Londrina DC – Depto.

<head> <title>Clicar no botão</title> <script> var mensage. } function touch() { alert(mensage). de Computação Variáveis 30 .Variáveis Pode-se armazenar valores de qualquer tipo. } </script> </head> Afetar a variável Consultar a variável UEL – Universidade Estadual de Londrina DC – Depto. por exemplo: strings ou valores numéricos Enquanto não forem iniciadas (1ª atribuição) armazenam o valor especial: undefined <html> Definição da variável var nome [ = expressão ] . //Para guardar o nome function load() { mensage = prompt(“Seu nome?").

} function touch() { alert(mensage).<html> <head> <title>Clicar no botão</title> <script> var mensage. //Para guardar o nome function load() { mensage = prompt("Seu nome?"). de Computação Introdução 31 . } </script> </head> <body onload ='load()' > <input type="button" value="Clique aqui" onclick='touch()' /> </body> </html> UEL – Universidade Estadual de Londrina DC – Depto.

CRIANDO VARIÁVEIS  Variável é criada automaticamente. pela simples associação de valores a mesma. Ex. Locais . podendo ser referenciadas em qualquer parte do documento. Variáveis 32 UEL – Universidade Estadual de Londrina DC – Depto. de Computação .  As variáveis podem ser Locais ou Globais.variáveis que são criadas dentro de uma função e referenciáveis apenas dentro da função.variáveis criadas fora de funções. passou a conter a string Jose. Globais . NovaVariavel = "Jose" Foi criada a variável de nome NovaVariavel que.

de Computação Variáveis 33 .por várias funções ou .ou em uma parte do documento UEL – Universidade Estadual de Londrina DC – Depto.CRIANDO VARIÁVEIS  Obs: A variável deverá ser definida como global se for referenciada: .

UEL – Universidade Estadual de Londrina DC – Depto. de Computação Variáveis 34 .CRIANDO VARIÁVEIS Ex.Variável Global : MinhaVariavel = "" Variável Local : var MinhaVariavel = "" (não recomendável).

de Computação Variáveis 35 .Palavras reservadas break case catch continue debugger default abstract boolean byte char class const delete do else false finally for double enum export extends final float function if in instanceof new null goto implements import int interface long return switch this throw true try native package private protected public short typeof var void while with static super synchronize d throws transient volatile UEL – Universidade Estadual de Londrina DC – Depto.

Objetos em JavaScript Um objeto é uma coleção de propriedades Cada propriedade tem um nome • As propriedades armazenam valores que podem ser lidos ou escritos.method (argumentos) UEL – Universidade Estadual de Londrina DC – Depto.prop obj. • As propriedades que armazenam funções denominam-se métodos. que podem ser chamados. de Computação Nome da propriedade Nome do objeto Nome do método Orientado a Objeto 36 . obj.

por exemplo: Nome Descrição title Título do documento url Endereço da página Comentário de fim de .title ). // comentário linha <html> <head> <title>Clicar no botão</title> <script> // Escreve o titulo function touch() { alert( document.. de Computação Orientado a Objeto 37 . Acesso a propriedade objeto... } </script> </head> .propriedade UEL – Universidade Estadual de Londrina DC – Depto.Acessando o objeto document O documento HTML é representado pelo objeto document O objeto document tem várias propriedades..

Objetos predefinidos Existem três tipos de objetos: • Intrínsecos da linguagem (ex: String. Math) • Fornecidos pelo browser (ex: window.title é equivalente a window. O objeto window é usado quando nenhum objeto for explicitamente indicado. de Computação Orientado a Objeto 38 . Por exemplo: • alert é um método de window alert("ola") é equivalente a window.alert("ola") • document é uma propriedade de window document. navigator) • Criados pelo código em JavaScript.title UEL – Universidade Estadual de Londrina DC – Depto.document.

através do método write.ESCREVENDO NO DOCUMENTO O JavaScript permite que o programador escreva linhas dentro de uma página (documento). de Computação Orientado a Objeto 39 .  As linhas escritas através deste método aparecerão no ponto da tela onde o comando for inserido.write ("Minha primeira linha")  document.  As linhas escritas desta forma. podem conter: textos. Ex:  <script>  valor = 30  document. expressões JavaScript e comandos Html.write ("Nesta linha aparecerá o resultado de : " + (10 * 10 + valor))  </script>  UEL – Universidade Estadual de Londrina DC – Depto.

de Computação 40 . Estudando o caso: Método write não insere mudança de linha:  Surgirá apenas uma linha com os dois textos emendados.  Para evitar isto. Orientado a Objeto UEL – Universidade Estadual de Londrina DC – Depto. utiliza-se o método writeln que escreve uma linha e espaceja para a seguinte.

   Este comando não causa efeito. A solução é utilizar o comando de mudança de parágrafo da linguagem Html. Ex: <script> valor = 30 document.write ("<p>Nesta linha aparecerá o resultado de : " + (10 * 10 + valor) + "</p>") </script> UEL – Universidade Estadual de Londrina DC – Depto.write ("<p>Minha primeira linha</p>") document. de Computação Orientado a Objeto 41 .obtendo-se o mesmo resultado do método write no HTML.

entre cada linha.write ("<br>Nesta linha aparecerá o resultado de : " + (10 * 10 + valor) ) </script>  UEL – Universidade Estadual de Londrina DC – Depto.write ("<br>Minha primeira linha") document. Ex: <script> valor = 30 document. de Computação Orientado a Objeto 42 . porém. por se tratar de mudança de parágrafo. Resolve-se a questão da mudança de linha. gera-se uma linha em branco. A alternativa é utilizar o comando Html <br> que apenas muda de linha.

Mensagem que retorna confirmação de OK ou CANCELAR confirm (mensagem) Ex. alert ("Certifique-se de que as informações estão corretas") 2. de Computação Mensagens 43 .. if (confirm ("Algo está errado. alert ( mensagem ) Ex.devo continuar??")) { alert("Continuando") } else { alert("Parando") } UEL – Universidade Estadual de Londrina DC – Depto..MENSAGENS   Formas de comunicação com o usuário: 1. Apenas Observação.

Recebe mensagem via caixa de texto Input Receptor = prompt ("Minha mensagem". "") Resultado = eval(Entrada) document. Entrada = prompt("Informe uma expressão matemática". de Computação Mensagens 44 .write("O resultado é = " + Resultado) UEL – Universidade Estadual de Londrina DC – Depto. opcional. que aparecerá na linha de digitação do usuário Ex. "Meu texto") Onde: Receptor é o campo que vai receber a informação digitada pelo usuário Minha mensagem é a mensagem que vai aparecer como Label da caixa de input Meu texto é um texto.3.

que só deve ser executada quando a função for acionada.FUNÇÕES Uma função é uma seqüência de instruções. A sintaxe geral é a seguinte: UEL – Universidade Estadual de Londrina DC – Depto. de Computação Funções 45 .

} </script> </head> <body> <input type="button" value="Clique aqui" onclick='touch(). de Computação Funções 46 .' /> </body> </html> Área de definição de código (em JavaScript) A função touch não tem argumentos e contém uma só instrução Chamada a função nome(argumentos) A função alert tem um argumento: string com o texto a apresentar UEL – Universidade Estadual de Londrina DC – Depto.Funções function nome(argumentos) { sequência de instruções } <html> <head> <title>Clicar no botão</title> <script type="text/javascript" > function touch() { alert("Ola").

Suponha uma função que tenha como objetivo informar se uma pessoa é maior ou menor de idade. recebendo como parâmetro a sua idade. function Idade (Anos) { if (Anos > 17) { alert ("Maior de Idade") } else { alert (“Menor de Idade") } } UEL – Universidade Estadual de Londrina DC – Depto. de Computação Funções 47 .

em um formulário. de Computação Funções 48 . <form> <input type=text size=2 maxlength=2 name="Tempo" onchange="Idade(Tempo. suponha uma caixa de texto. a função seja acionada. a cada informação.Para acionar esta função. na qual seja informada a idade e.value)"> </form> UEL – Universidade Estadual de Londrina DC – Depto.

UEL – Universidade Estadual de Londrina DC – Depto. Introdução 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. Apenas o conteúdo é passado. de Computação O parâmetro passado (no evento "onchange") é o conteúdo da caixa de texto "Tempo" (propriedade "value") que na função foi chamado de "Anos".value)"> </form> </body> </html> Não existe co-relação entre o nome da variável passada e a variável de recepção na função.

<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. de Computação Introdução 50 .value)"> </form> </body> </html> UEL – Universidade Estadual de Londrina DC – Depto.

parseFloat - Calcula o conteúdo da string Transforma string em inteiro Transforma string em número com ponto flutuante Funções 51 UEL – Universidade Estadual de Londrina DC – Depto. A sintaxe geral é a seguinte: Result = função (informação a ser processada) .FUNÇÕES INTRÍNSECAS São funções embutidas na própria linguagem.eval .parseInt . de Computação .

de Computação Funções 52 .8") Result = 194 ex2: Result = eval (string) Depende do conteúdo da string. que também pode ser o conteúdo (value) de uma caixa de texto.FUNÇÕES INTRÍNSECAS .date() Retorna a data e a hora ex1: Result = eval ( " (10 * 20) + 2 . UEL – Universidade Estadual de Londrina DC – Depto.

Funções tipicamente Matemáticas        Math.ceil(número) . de Computação Funções 53 .max(número1. arredondado. expoente) .abs(número) .retorna o cálculo do exponencial Math. número2) .retorna o valor inteiro.retorna o menor número dos dois fornecidos UEL – Universidade Estadual de Londrina DC – Depto.round(número) .floor(número) .retorna o maior número dos dois fornecidos Math. do número Math.pow(base.retorna o próximo valor inteiro menor que o número Math.retorna o próximo valor inteiro maior que o número Math. número2) .retorna o valor absoluto do número (ponto flutuante) Math.min(número1.

retorna a raiz quadrada de 1/2 (aproximadamente 0.asin(número) .SQRT_2 .Funções tipicamente Matemáticas       Math.retorna a raiz quadrada do número Math.retorna a raiz quadrada de 2 (aproximadamente 1.SQRT2 . de Computação Funções 54 .sin(número) .cos(número) .retorna o cosseno de um número (anglo em radianos) UEL – Universidade Estadual de Londrina DC – Depto.retorna o arco seno de um número (em radianos) Math.sqrt(número) .414) Math.retorna o seno de um número (anglo em radianos) Math.707) Math.

de Computação Funções 55 .retorna o valor de PI (aproximadamente 3.E .retorna o logarítmo de um número Math.718) UEL – Universidade Estadual de Londrina DC – Depto.pi .retorna a base dos logarítmos naturais aproximadamente 2.retorna o arco tangente de um número (em radianos) Math.acos(número) .atan(número) .Funções tipicamente Matemáticas       Math.log(número) .retorna a tangente de um número (anglo em radianos) Math.retorna o arco cosseno de um número (em radianos) Math.tan(número) .14159) Math.

"(número)".retorna o valor do logarítmo de 10 (aproximadamente 2. de Computação Funções 56 .LN10 .  UEL – Universidade Estadual de Londrina DC – Depto.uma variável ou o conteúdo de um objeto (propriedade value).693)  Math. refere-se a um argumento que será processado pela função e que pode ser: um número.retorna o valor do logarítmo de 2 (aproximadamente 0.LN2 .302)  Math.LOG10E .442)  Math.retorna a base do logarítmo de 2 (aproximadamente 1.retorna a base do logarítmo de 10 (aproximadamente 0.Funções tipicamente Matemáticas Math.434) Observação: Nas funções.LOG2E .

CRIANDO NOVAS INSTÂNCIAS Através do operador new podem ser criadas novas instâncias a objetos já existentes. porém. mudando o seu conteúdo. A sintaxe geral é a seguinte: NovoObjeto = new ObjetoExistente (parâmetros) Ex1. com o mesmo conteúdo existente em Date (data e hora atual) Instanciação UEL – Universidade Estadual de Londrina DC – Depto. mantendo suas propriedades. MinhaData = new Date () MinhaData passou a ser um objeto tipo Date. de Computação 57 .

Emp = Emp this.Ex2: MinhaData = new Date(1996.Prod = Prod } UEL – Universidade Estadual de Londrina DC – Depto. com o conteúdo de uma nova data. de Computação Instanciação 58 . Nfunc. Prod) { this. 27) MinhaData passou a ser um objeto tipo Date.Nfunc = Nfunc this. porém. 05. Ex3: Registro Suponha a existência do seguinte objeto chamado Empresas function Empresas (Emp.

"Serviços") Pitaco = new Empresas("Pitaco".CRIANDO NOVAS INSTÂNCIAS Podemos criar novas instâncias. "120". "Software") Corisco = new Empresas("Corisco".Nfunc tem o conteúdo igual a120 UEL – Universidade Estadual de Londrina DC – Depto. "Conectividade") A variável Elogica. "35". usando a mesma estrutura. de Computação Instanciação 59 . da seguinte forma: Elogica = new Empresas("Elogica". "42".

de Computação Arrays 60 .MANIPULANDO ARRAYS ????? O JavaScript não tem um tipo de dado ou objeto para manipular arrays. UEL – Universidade Estadual de Londrina DC – Depto. Exemplo: Objeto tipo array de tamanho variável e com a função de "limpar" o conteúdo das variáveis cada vez que uma nova instância seja criada a partir dele. É necessário criar um objeto com a propriedade de criação de array.

MANIPULANDO ARRAYS ????? function CriaArray (n) { this. i <= n . i++) { this[i] = "" } } UEL – Universidade Estadual de Londrina DC – Depto. de Computação Arrays 61 .length = n for (var i = 1 .

de Computação Arrays 62 .Criando novas instâncias do objeto "CriaArray" e alimentando-os com novos dados. 1. NomeDia = new CriaArray(7) NomeDia[0] = "Domingo" NomeDia[1] = "Segunda" NomeDia [2] = "Terça" NomeDia[3] = "Quarta" NomeDia[4] = "Quinta" NomeDia[5] = "Sexta" NomeDia[6] = "Sábado" UEL – Universidade Estadual de Londrina DC – Depto.

Atividade = new CriaArray(5) Atividade[0] = "Analista" Atividade[1] = "Programador" Atividade[2] = "Operador" Atividade[3] = "Conferente" Atividade[4] = "Digitador" UEL – Universidade Estadual de Londrina DC – Depto. de Computação Arrays 63 .2.

Para obter dados diretamente dos arrays. o que proporciona o mesmo efeito de se trabalhar com matriz. de Computação Arrays 64 . Outra forma: Criar novas instâncias dentro do próprio objeto do array. Isso pode ser feito da seguinte forma: UEL – Universidade Estadual de Londrina DC – Depto. DiaSemana = NomeDia[4] Ocupação = Atividade[1] DiaSemana passaria a conter Quinta e Ocupação conteria Programador.

"35". de Computação Arrays 65 . Nfunc. "Conectividade") UEL – Universidade Estadual de Londrina DC – Depto.Prod = Prod } TabEmp = new Empresas(3) TabEmp[1] = new Empresas("Elogica". "120". Prod) { this. "Serviços") TabEmp[2] = new Empresas("Pitaco". "Software") TabEmp[3] = new Empresas("Corisco".Emp = Emp this.Nfunc = Nfunc this.function Empresas (Emp. "42".

Então: Atividade = TabEmp[3]. embora os exemplos estejam com indexadores fixos.Prod Obtém a atividade da empresa número 3. cuja resposta é Conectividade: Obs: É importante lembrar que. UEL – Universidade Estadual de Londrina DC – Depto. de Computação Arrays 66 . os indexadores podem ser referências ao conteúdo de variáveis (value).

de Computação Strings 67 . fornecendo ao programador uma total flexibilidade em seu manuseio.retorna o caracter da posição especificada (inicia em 0) string. Métodos disponíveis para manuseio de string´s: string.retorna o tamanho da string (quantidade de bytes) string.MANIPULANDO STRING's O JavaScript é bastante poderoso no manuseio de String´s.charAt(posição) .retorna o número da posição onde começa a primeira "string"    UEL – Universidade Estadual de Londrina DC – Depto.indexOf("string") .length .

  string. index2) . UEL – Universidade Estadual de Londrina DC – Depto. Começando no caracter posicionado em index1 e terminando no caracter imediatamente anterior ao valor especificado em index2.substring(index1.retorna o conteúdo da string que corresponde ao intervalo especificado.retorna o número da posição onde começa a última "string" string.lastindexOf("string") . de Computação Strings 68 .

substring(1. de Computação Strings 69 .Transforma o conteúdo da string para minúsculo (Caixa Baixa) escape ("string") .toLowerCase() .retorna o valor ASCII da string (vem precedido de %) unscape("string") . Todo = "Elogica" Parte = Todo.toUpperCase() .Ex.retorna o caracter a partir de um valor ASCII (precedido de %) UEL – Universidade Estadual de Londrina DC – Depto. 4) (A variável Parte receberá a palavra log)     string.Transforma o conteúdo da string para maiúsculo (Caixa Alta) string.

Hora:Minuto:Segundo e Ano Ex. Nome do mês. Dia do mês. Esta função devolve data e hora no formato: Dia da semana.MANIPULANDO DATAS Existe apenas uma função para se obter a data e a hora. É a função Date(). Fri May 24 16:58:02 1996 UEL – Universidade Estadual de Londrina DC – Depto. de Computação Datas 70 .

Obtém o dia do mês (numérico de 1 a 31) getDay() . de Computação 71 .Obtém o dia da semana (0 a 6) getMonth() .Obtém o ano getHours() .Para se obter os dados separadamente.Obtém os segundos (numérico de 0 a 59) Datas UEL – Universidade Estadual de Londrina DC – Depto.Obtém os minutos (numérico de 0 a 59) getSeconds() .Obtém a hora (numérico de 0 a 23) getMinutes() . usa-se o método get: getDate() .Obtém o mês (numérico de 0 a 11) getYear() .

Exemplo: Obter o dia da semana. de Computação Datas 72 . Para tal. DataToda = new Date() DiaHoje = DataToda. utilizar a variável DataToda para armazenar data/hora e a variável DiaHoje para armazenar o número do dia da semana.getDay() UEL – Universidade Estadual de Londrina DC – Depto.

length = n for (var x = 1 . x<= n . de Computação Datas 73 .Gerando uma tabela com os dias da semana e utilizando a variável DiaHoje como indexador. function CriaTab (n) { this. x++) { this[x] = "" } } NomeDia = new CriaTab(7) UEL – Universidade Estadual de Londrina DC – Depto. para obter o dia da semana.

NomeDia[0] = "Domingo" NomeDia[1] = "Segunda" NomeDia[2] = "Terça" NomeDia[3] = "Quarta" NomeDia[4] = "Quinta" NomeDia[5] = "Sexta" NomeDia[6] = "Sábado" DiaSemana = NomeDia[DiaHoje] UEL – Universidade Estadual de Londrina DC – Depto. de Computação Datas 74 .

método set Cria uma variável tipo Date com o conteúdo informado pela aplicação. setHours. setDay. de Computação Datas 75 .setMonth(10) UEL – Universidade Estadual de Londrina DC – Depto. setMinutes e setSeconds. São eles: setDate. Mudar o mês para novembro: DataToda. setMonth. setYear.

UEL – Universidade Estadual de Londrina DC – Depto. checkbox e combo). Textarea e Select. Conceitualmente. os objetos são divididos em: Input.marcação de opções (radio.botões e link's para outras páginas.objetos para entrada de dados (textos). . . de Computação Interação com o Usuário 76 .INTERAGINDO COM O USUÁRIO A interação com o usuário se dá através de: .

O objeto Input divide-se em (propriedade Type) •Text •Password •Hidden •Checkbox •Radio •Button •Reset •Submit UEL – Universidade Estadual de Londrina DC – Depto. de Computação Interação com o Usuário 77 .

Objeto Input TEXT É o principal objeto para entrada de dados. de Computação Interação com o Usuário 78 . UEL – Universidade Estadual de Londrina DC – Depto. E aconselha-se que sejam criados utilizando-se algum tipo de ferramenta de geração de páginas HTML.A construção destes objetos é feita pela linguagem HTML.

size. type=text : Especifica um campo para entrada de dados normal size : Especifica o tamanho do campo na tela. name e value. maxlength : Especifica a quantidade máxima de caracteres permitidos. maxlength. de Computação 79 . Interação com o Usuário UEL – Universidade Estadual de Londrina DC – Depto. name : Especifica o nome do objeto value : Armazena o conteúdo do campo.Suas principais propriedades são: type.

Ex: <form name="TText"> <p>Entrada de Texto <input type=text size=20 maxlength=30 name="CxTexto" value="" onchange="alert ('Voce digitou ' + CxTexto.Os eventos associados a este objeto são: onchange. onblur. de Computação Interação com o Usuário 80 .value)"> </p> </form> UEL – Universidade Estadual de Londrina DC – Depto. onfocus e onselect.

por razões de segurança. UEL – Universidade Estadual de Londrina DC – Depto.Objeto Input PASSWORD É o objeto para entrada de Senhas de acesso (password). de Computação Interação com o Usuário 81 . só são interpretados (vistos) pelo "server". Os dados digitados neste objeto são criptografados e.

type=password : Especifica um campo para entrada de senha. maxlength : Especifica a quantidade máxima de caracteres permitidos. maxlength. name e value.Suas principais propriedades são: type. de Computação Interação com o Usuário 82 . name : Especifica o nome do objeto value : Armazena o conteúdo digitado no campo. size : Especifica o tamanho do campo na tela. size. UEL – Universidade Estadual de Londrina DC – Depto. Os dados digitados são substituidos (na tela) por "*".

Ex: <form name="TPassword"> <p>Entrada de Senha<input type=password size=10 maxlength=10 name="Senha" value=""> </p> </form> UEL – Universidade Estadual de Londrina DC – Depto. onblur.Os eventos associados a este objeto são: onchange. onfocus e onselect. de Computação Interação com o Usuário 83 .

name : Especifica o nome do objeto. mas. Suas propriedades são: name e value. invisível ao usuário. value : Armazena o conteúdo do objeto UEL – Universidade Estadual de Londrina DC – Depto.Objeto Input HIDDEN É um objeto semelhante ao input text. Este objeto deve ser utilizado para passar informações ao "server" (quando o formulário for submetido) sem que o usuário tome conhecimento. de Computação Interação com o Usuário 84 .

Ex: <p> <form name="THidden"> <input type=hidden size=20 maxlength=30 name="HdTexto" value="" > </form> </p> UEL – Universidade Estadual de Londrina DC – Depto. de Computação Interação com o Usuário 85 .

UEL – Universidade Estadual de Londrina DC – Depto.Objeto Input CHECKBOX São objetos que permitem ao usuário ligar ou desligar uma determinada opção. será enviado o valor default "on" . de Computação Introdução 86 . Suas principais propriedades são: 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.

UEL – Universidade Estadual de Londrina DC – Depto. checked : Especifica que o objeto inicialmente estará ligado O único evento associado a este objeto é onclick.Esta propriedade também serve para ativar comandos lógicos. Ex: Criando um objeto input. testando-se a condição de "checked".text e três objetos checkbox. de Computação Interação com o Usuário 87 . O 3º checkbox: quando ativado. O 2º checkbox: quando ativado. O 1º checkbox: quando ativado. transforma o texto em caracteres maiúsculos. transforma o texto em caracteres minúsculos. da um aviso do conteúdo que é recebido pelo "server" caso o formulário seja submetido.

Muda.Muda.Opt2.<SCRIPT> function AltMaiusc () { document.TCheck.checked = false } function AltMinusc () { document. de Computação Interação com o Usuário 88 .value.TCheck.TCheck.value = document.Opt1.TCheck.Muda.value = document.toLowerCase() document.toUpperCase() document.Muda.TCheck.checked = false } </SCRIPT> UEL – Universidade Estadual de Londrina DC – Depto.value.TCheck.

checked) { AltMaiusc() } "> Demo valor<input type=checkbox name="Opt3" onclick="if (Opt3. de Computação Interação com o Usuário 89 .checked) { AltMinusc() } "> Maiusculo<input type=checkbox name="Opt2" value="2" onclick="if (this.<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.value) } "> </p> </form> UEL – Universidade Estadual de Londrina DC – Depto.checked) {alert ('Server recebera = ' + Opt3.

será enviado o valor default "on" . testando-se a condição de "checked". Caso seja omitido. Suas principais propriedades são: name.Objeto Input RADIO São objetos que permitem ao usuário a escolha de apenas uma alternativa. Para caracterizar uma mesma série de opções. UEL – Universidade Estadual de Londrina DC – Depto. todos os objetos desta série têm que ter o mesmo "name". de Computação Interação com o Usuário 90 . value e checked. value : Especifica o valor que será enviado ao "server" se o objeto estiver ligado (checked). diante de uma série de opções. Esta propriedade também serve para ativar comandos lógicos. name : Especifica o nome do objeto.

length : Retorna a quantidade de opções existentes na lista Objeto. de Computação 91 .checked: retorna verdadeiro ou falso O único evento associado a este objeto é: onclick.value : retorna o texto (value) associado a cada opção Objeto.checked : Especifica que o objeto inicialmente estará ligado Para utilização deste objeto é importante o conhecimento de outras propriedades associadas: Objeto.[index]. Interação com o Usuário UEL – Universidade Estadual de Londrina DC – Depto.[index].

bgColor='blueviolet'"> Fundo Violeta <input type=radio name="Rad" value="3" onclick="document.Ex. de Computação Interação com o Usuário 92 . <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. O 1º muda a cor de fundo do documento atual O 2º leva informações ao "server".bgColor='#FFFF00'"> Fundo Amarelo </p> UEL – Universidade Estadual de Londrina DC – Depto. Dois set's de objetos radio.

value : Especifica o nome que aparecerá sobre o botão O único evento associado a este objeto é: onclick. a serem executadas quando o mesmo receber um click. de Computação Interação com o Usuário 93 . Suas propriedades são: name e value. name : Especifica o nome do objeto. UEL – Universidade Estadual de Londrina DC – Depto.Objeto Input BUTTON Este objeto tem por finalidade criar um botão ao qual se possa atrelar operações lógicas.

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.value)"> </p> </form> UEL – Universidade Estadual de Londrina DC – Depto.Teste. de Computação Interação com o Usuário 94 .

UEL – Universidade Estadual de Londrina DC – Depto. para facilitar ao usuário limpar suas informações. name : Especifica o nome do objeto. restaurando o conteúdo do formulário para os valores iniciais. Suas propriedades são: name e value. única. value : Especifica o nome que aparecerá sobre o botão O único evento associado a este objeto é: onclick. É recomendável a utilização deste objeto. de Computação Interação com o Usuário 95 . limpar os campos digitados pelo usuário. uma vez que a utilização da opção "reload" do "browser" (que seria uma forma) não perde as infromações digitadas.Objeto Input RESET Este objeto é um botão que tem por finalidade.

de Computação Interação com o Usuário 96 .Ex. <p> <form method="POST" name="TesteRes"> Digite um Texto<input type=text size=10 maxlength=20 name="Teste" value=""> Apague o Texto <input type=reset name="Bres" value="Reset"> </form> </p> UEL – Universidade Estadual de Londrina DC – Depto.

Suas propriedades são: name e value. name : Especifica o nome do objeto.Objeto Input SUBMIT Este objeto é um botão que tem por finalidade submeter (enviar) o conteúdo dos objetos do formulário ao "server". de Computação Interação com o Usuário 97 . O formulário será submetido à URL especificada na propriedade "action" do formulário. value : Especifica o nome que aparecerá sobre o botão UEL – Universidade Estadual de Londrina DC – Depto.

UEL – Universidade Estadual de Londrina DC – Depto. não se pode evitar que o formulário seja submetido. Embora se possa atrelar lógica a este evento. de Computação Interação com o Usuário 98 . é mais seguro e mais útil. portanto.O único evento associado a este objeto é: onclick. Esta permite que se atrele lógica e decida-se pela submissão ou não. Utilizar a propriedade onSubmit do formulário. não é aconselhável o seu uso.

Teste. de Computação Interação com o Usuário 99 ....TesteSub.Ex.Form Submetido") return true } } </script> UEL – Universidade Estadual de Londrina DC – Depto.value == "") { alert ("Campo nao Preenchido.. <script> function TestaVal() { if (document.Form nao Submetido") return false } else { alert ("Tudo Ok..

4.loja.200/scripts/lombardi.250.dll/ vbloja. de Computação Interação com o Usuário 100 .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.<p> <form method="POST" name="TesteSub" onSubmit="return TestaVal()" action="http://200.

dll".No exemplo o formulário está sendo submetido a URL “200. chamado “lombardi. de Computação Interação com o Usuário 101 . UEL – Universidade Estadual de Londrina DC – Depto.250. que está no subdiretório "scripts". A aplicação VB. Estamos enviando os dados a um "OLE". fará apenas a devolução dos dados recebidos pelo Server.200" (que é o endereço IP de um "Server"). que tem por objetivo fazer a conexão com aplicações escritas em VB. A aplicação VB que está sendo chamada. é um OLE de nome "vbloja" no qual estamos acionando a classe "loja" e o método "action".4. deste exemplo.

asp “ Method="post"> <input type = "hidden" name="Var_Pagina_Proprietaria" value = "Endereço da pagina que esta enviando o email"> <input type = "hidden" name = "Var_Url_Erro" value ="Endereço de uma pagina informando que houve erro no envio dos dados"> UEL – Universidade Estadual de Londrina DC – Depto.uel.Enviando um e_mail ao submeter <form action = “http://www. de Computação .br/scripts/java/enviamailpadrao.

 <input type="hidden" name="Var_Url_Ok" value="Endereço de uma pagina que informe que houve sucesso no envio dos dados"> <input type="hidden" name="Var_Endereco_Destinatario" value="O email da pessoa que recebera os dados do formulario"> <input type="hidden" name="Var_Nome_Destinatario" value="O nome da pessoa que recebera os dados do email">   UEL – Universidade Estadual de Londrina DC – Depto. de Computação Introdução 103 .

rows e cols. Os eventos associados a este objeto são: onchange. name : Especifica o nome do objeto rows : Especifica a quantidade de linhas que aparecerão na tela cols : Especifica a quantidade de caracteres que aparecerão em cada linha value : Acessa o conteúdo do campo via programação. de Computação 104 . onblur. Suas principais propriedades são: name. Interação com o Usuário UEL – Universidade Estadual de Londrina DC – Depto. onfocus e onselect.Objeto TEXTAREA É um objeto para entrada de dados em um campo de múltiplas linhas.

de Computação Interação com o Usuário 105 .Ex: <form name="TesteTextarea"> <p> Texto de Múltiplas Linhas <textarea name="MultText" rows=2 cols=40> Primeira linha do texto inicial segunda linha do texto inicial </textarea> </p> UEL – Universidade Estadual de Londrina DC – Depto.

Objeto SELECT É um objeto para entrada de opções. Suas principais propriedades são: name. value e multiple name : Especifica o nome do objeto size : Especifica a quantidade de opções que aparecerão na tela simultaneamente value : Associa um valor ou string para cada opção (opcional) multiple : Especifica a condição de múltipla escolha (usando-se a tecla Ctrl) UEL – Universidade Estadual de Londrina DC – Depto. a partir de uma lista de alternativas. de Computação Interação com o Usuário 106 . onde o usuário. size. seleciona uma ou mais opções.

options[index]. Interação com o Usuário UEL – Universidade Estadual de Londrina DC – Depto.selectedindex : Retorna o "index" do objeto selecionado (primeiro = 0) Objeto.options[index].selected : retorna verdadeiro ou falso Os eventos associados a este objeto são: onchange.Para utilização deste objeto é importante o conhecimento de outras propriedades associadas: Objeto.length : Retorna a quantidade de opções existentes na lista Objeto.value : retorna o texto interno (value) associado a cada opção Objeto.text : retorna o texto externo associado a cada opção Objeto. de Computação 107 .options[index]. onblur e onfocus.

Logo. UEL – Universidade Estadual de Londrina DC – Depto.Ex1: Neste exemplo é importante observar os seguintes aspectos: a) A lista permite apenas uma seleção b) A quarta opção aparecerá inicialmente selecionada (propriedade "selected") c) Não foi utilizado a propriedade "value". a propriedade "text" e a propriedade "value" teram o mesmo valor igual ao valor externo que aparece na tela. de Computação Interação com o Usuário 108 .

text) } </script> UEL – Universidade Estadual de Londrina DC – Depto. de Computação Interação com o Usuário 109 .selectedIndex alert ("Voce escolheu " + Campo.<script> function Verselect(Campo) { Icombo = Campo.options[Icombo].

<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 Computação Interação com o Usuário 110 .

c) O parâmetro passado. Assim as propriedades "text" e "value" têm valores diferentes: text retornará Escolha1 a Escolha4 e value retornará List1 a List4. quando da ocorrência do evento onblur. Esta diretiva significa que estamos passando este objeto. de Computação Interação com o Usuário 111 . UEL – Universidade Estadual de Londrina DC – Depto.Ex2: Neste exemplo é importante observar os seguintes aspectos: a) A lista permite múltiplas seleções b) Utilizou-se a propriedade "value". foi this.

i++) { if (Lista.options[i].<script> function Vermult(Lista) { var opcoes = "" for (i = 0 . de Computação Interação com o Usuário 112 .selected) { opcoes += (Lista. i < Lista.length .options[i].value + ". ") } } alert ("As opcoes escolhidas foram : " + opcoes) } </script> UEL – Universidade Estadual de Londrina DC – Depto.

de Computação Interação com o Usuário 113 .<p> Objeto Select2 <select name="Combo2" size=4 multiple onblur="Vermult(this)"> <option value="List1">Escolha1 </option> <option value="List2">Escolha2 </option> <option value="List3">Escolha3 </option> <option value="List4">Escolha4 </option> </select> </p> UEL – Universidade Estadual de Londrina DC – Depto.

a partir da ocorrência de um evento ou mesmo dentro de uma função. Isso pode ser feito: na carga do documento.Focando um Objeto O método “Focus” permite que o cursor seja ativado em um determinado objeto (focado). de Computação Interação com o Usuário 114 . UEL – Universidade Estadual de Londrina DC – Depto. Lembrando que até agora o usuário tinha que dar um "Click" para focar o objeto desejado.

não ter que deletar o conteúdo anterior. Com este método. a deleção se dá de forma automática quando da digitação do novo conteúdo. de Computação Interação com o Usuário 115 . UEL – Universidade Estadual de Londrina DC – Depto. em caso de substituição do conteúdo do campo. permitindo ao usuário.O método "Select" Usado para marcar o conteúdo do objeto com uma tarja roxa.

de Computação Interação com o Usuário 116 . UEL – Universidade Estadual de Londrina DC – Depto. utilizando o evento onload para setar o focus para o primeiro objeto do formulário e os métodos focus e select para. na rotina de crítica dos dados. text e textarea Exemplo. select. focar o objeto que contiver erro de preenchimento.Os métodos "Focus" e "Select" podem ser utilizados nos seguintes objetos: password.

getMonth() + 1 AnoAtual = DataAtual.Nome.TstFocus.Ex.value Mes = parseInt(document.getYear() + 1900 Nome = document.TstFocus.value) Ano = parseInt (document. <body onload="document.focus()"> <script> DdosOk = true function Criticar() { DadosOk = false DataAtual = new Date() MesAtual = DataAtual.Mes.Ano.Nome.TstFocus.TstFocus.value) UEL – Universidade Estadual de Londrina DC – Depto. de Computação Interação com o Usuário 117 .

select() return } UEL – Universidade Estadual de Londrina DC – Depto.TstFocus.Mes.// if (Ano < 1900) {Ano = Ano + 1900 } if (Nome == "") { alert ("Informe o seu Nome. de Computação Interação com o Usuário 118 . Não deixe em branco") document.focus() document.focus() return } if (Mes < 1 || Mes > 12) { alert ("O Mês informado não é válido.TstFocus. informe corretamente") document.TstFocus.Mes.Nome.

informe corretamente") document.TstFocus.focus() document.Ano.Mes.TstFocus.TstFocus.Ano.Mes.TstFocus.select() return } DadosOk = true } </script> UEL – Universidade Estadual de Londrina DC – Depto.select() return } if (Ano < 1996 || Ano > AnoAtual) { alert ("O Ano informado não é válido.focus() document. de Computação Interação com o Usuário 119 .if (Ano == AnoAtual && Mes > MesAtual) { alert ("O período informado é superior a data atual") document.

de Computação Interação com o Usuário 120 .<form name="TstFocus" method="POST"> <p> Informe o seu Nome <input type=text size=30 maxlength=30 name="Nome"> </p> <p> Informe o mês 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 Computação Interação com o Usuário 121 .<p> <input type=button name="Testa" value="Testar Validade" onclick="Criticar() if (DadosOk) {alert ('Todos os Dados estão Corretos') } "> </p> </form> </body> UEL – Universidade Estadual de Londrina DC – Depto.

Variável = setTimeout ("ação". de Computação Timer e date 122 . tempo é o tempo de espera para que a ação ocorra. UEL – Universidade Estadual de Londrina DC – Depto.TIMER e DATE Método para programar uma determinada ação após o transcurso de um determinado tempo. em milisegundos. tempo) Onde: Variável é uma variável apenas para controle do timer ação é a ação que se quer realizar.

Para que a ação volte a ocorrer. Para interromper o LOOP provocado deve-se utilizar o seguinte método: clearTimeout (Variável) Onde: Variável é o nome da variável de controle do timer. um LOOP. obtendo-se.Obs: A ação só ocorrerá uma vez. UEL – Universidade Estadual de Londrina DC – Depto. assim. será necessário repetir o comando dentro da ação. de Computação Timer e date 123 .

UEL – Universidade Estadual de Londrina DC – Depto. de Computação Timer e date 124 . Apresentando também. fora do formulário. atualizando os dados a cada segundo: Tendo dois botões de rádio que tem a função de: ativar e desativar a atualização dos dados. a data contendo dia e mês por extenso.Exemplo de um formulário apresentando a data e hora atual.

getDate() mm = Hr.getHours() UEL – Universidade Estadual de Londrina DC – Depto.<script> function Hoje() { ContrRelogio = setTimeout ("Hoje()". 1000) Hr = new Date() dd = Hr.getMonth() + 1 aa = Hr. de Computação Introdução 125 .getYear() hh = 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.value=DataAtual document.Data.DataHora.min = Hr.DataHora.Hora. de Computação Timer e date 126 .value=HoraAtual } UEL – Universidade Estadual de Londrina DC – Depto.getMinutes() seg = Hr.

// function CriaArray (n) { this.length = n } // NomeDia = new CriaArray(7) NomeDia[0] = "Domingo" NomeDia[1] = "Segunda" NomeDia[2] = "Terça" NomeDia[3] = "Quarta" NomeDia[4] = "Quinta" NomeDia[5] = "Sexta" NomeDia[6] = "Sábado" // UEL – Universidade Estadual de Londrina DC – Depto. de Computação Timer e date 127 .

de Computação Timer e date 128 .NomeMes = new CriaArray(12) NomeMes[0] = "Janeiro" NomeMes[1] = "Fevereiro" NomeMes[2] = "Março" NomeMes[3] = "Abril" NomeMes[4] = "Maio" NomeMes[5] = "Junho" NomeMes[6] = "Julho" NomeMes[7] = "Agosto" NomeMes[8] = "Setembro" NomeMes[9] = "Outubro" NomeMes[10] = "Novembro" NomeMes[11] = "Dezembro" // UEL – Universidade Estadual de Londrina DC – Depto.

getMonth() ano = Data1.Data1 = new Date() dia = Data1. " + NomeDia[dias] + " " + dia + " de " + NomeMes[mes] + " de " + (ano + 1900 ) ) </script> UEL – Universidade Estadual de Londrina DC – Depto.getYear() document. de Computação Timer e date 129 .getDay() mes = Data1.getDate() dias = Data1.write ("Recife.

<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 Computação

Timer e date

130

JANELAS
Como abrir novas janelas sobre uma janela contendo o documento principal? Não confundir esta forma de abrir janelas com a divisão da tela em várias partes, ou mesmo com a chamada de outras páginas. Para que não existam dúvidas, vamos ver os dois métodos.
UEL – Universidade Estadual de Londrina DC – Depto. de Computação

Abrindo novas Janelas

131

FRAME Tela divida em várias janelas contendo documentos diferentes. A tela inteira = um FrameSet Cada parte = um Frame. Cada Frame é definido dentro do FrameSet através da especificação dos parâmetros: % da tela na vertical (cols), % da tela na horizontal (rows) e o nome de cada frame.
UEL – Universidade Estadual de Londrina DC – Depto. de Computação

Abrindo novas Janelas

132

de Computação Abrindo novas Janelas 133 . UEL – Universidade Estadual de Londrina DC – Depto.htm será aberto dentro do frame de nome Principal As chamadas de outras telas (documentos) é feita através do link para o documento desejado. Ex. <href="Eventos.Criado o FrameSet podemos então abrir documentos distintos em cada Frame acrescentando ao link do documento a diretiva: target=nome do frame.htm" target="Principal"> O arquivo Eventos.

UEL – Universidade Estadual de Londrina DC – Depto. Escrever o conteúdo da janela 4. podem: 1. Fechar a janela e 5.htm será aberto em substituição a tela existente. de Computação Abrindo novas Janelas 134 .Ex. <href="Eventos. Abrir uma janela 2.htm" > O arquivo Eventos. Abrir um documento dentro desta janela 3. Fechar o documento. Os comandos JavaScript.

neste caso. preencha com "". Url .Abrindo uma Janela A sintaxe geral deste método é a seguinte: Variavel = window. Normalmente você estará utilizando a sua própria Url.Endereço Internet onde a janela será aberta.Nome que será atribuído como propriedade da janela. "Opções") Onde: Variavel . de Computação Abrindo novas Janelas 135 .open ("Url". UEL – Universidade Estadual de Londrina DC – Depto. "Nome da janela".

"Edit". "Handbook". de Computação Abrindo novas Janelas 136 . •status . etc.Cria uma barra de ferramentas tipo "Back". que são: •toolbar .Abre uma barra de status no rodapé da janela •scrollbars .São as opções que definem as características da janela. etc. •location .Cria uma barra de menu tipo "File". •resizable . "Forward".Permite ao usuário redimensionar a janela UEL – Universidade Estadual de Londrina DC – Depto.Abre a barra de ferramentas tipo "What's New".Abre a barra de location do browse •directories .Nome da Janela . etc.É o nome que aparecerá no top da janela (Título) Opções .Abre barras de rolamento vertical e horizontal •menubar .

Se nada for especificado. Exemplo: "toolbar" ou "toolbar=1") são a mesma coisa. em pixels •height . UEL – Universidade Estadual de Londrina DC – Depto. Se especificada qualquer opção. em pixels Todas as opções (exceto width e height) são boleanas e podem ser setadas de duas formas.Especifica a largura da janela. As opções devem ser informadas separadas por vírgula. sem espaço entre elas. de Computação Abrindo novas Janelas 137 .•width . será entendido que estão ligadas apenas as opções informadas. entende-se que todas as opções estão ligadas.Especifica a altura da janela.

open() Onde: "Variavel" é o nome da variável associada ao método window.document. deve ser utilizado o seguinte método: Variavel.Abrindo um documento dentro da janela Para abrir um documento dentro da janela. de Computação Abrindo novas Janelas 138 .open UEL – Universidade Estadual de Londrina DC – Depto.

Escrevendo no Documento Para escrever a tela no documento.write ("Comandos html.") UEL – Universidade Estadual de Londrina DC – Depto.document. Textos. de Computação Introdução 139 . deve ser utilizado o seguinte método: Variavel. etc. Comandos JavaScript.

close () UEL – Universidade Estadual de Londrina DC – Depto. utilize o seguinte método: Variavel. utilize o seguinte método: Variavel.Fechando a Janela Para fechar a janela.write ("window.document. de Computação Abrindo novas Janelas 140 .document.close()") Fechando o Documento Para fechar o documento.

} </script> </head> UEL – Universidade Estadual de Londrina DC – Depto. de Computação Introdução 141 .Atividades Diversas Variáveis <html> <head> <title>Clicar no botão</title> <script> var mensage. //Para guardar o nome function load() { mensage = prompt(“Seu nome?"). } function touch() { alert(mensage).

Dois botões (Execução) click 2 seg click UEL – Universidade Estadual de Londrina DC – Depto. de Computação Introdução 142 .

Dois botões (body) Quando o documento for carregado (a página estiver visível) é chamada a função load() <body onload ='load().' value ="Primeiro botão" /> <input type ="button" onclick ='set("Segundo"). de Computação Introdução 143 .' value ="Segundo botão" /> </body> Identificação do elemento HTML. Não permite a edição UEL – Universidade Estadual de Londrina DC – Depto. Forma de obter o objeto que representa o elemento HTML.'> <p> O botão pressionado foi: <input type ="text" id ="press" readonly ="X" /> </p> <input type ="button" onclick ='set("Primeiro").

". setTimeout("erase(). } function erase() { pressObj.value = message. alert(document.Método 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 função erase passados 2 segundos A propriedade value contem o texto de um elemento <input> Dois botões (script) <script> var pressObj. function load() { pressObj = document.title). erase().value = “nenhum botão”. } function set(message) { pressObj. } </script> UEL – Universidade Estadual de Londrina DC – Depto.getElementById("press").2000). de Computação Introdução 144 .

' onunload = 'exit(). de Computação Introdução 145 .' > <p> Texto a acrescentar: <input type="text" id="add" /> </p> <input type="button" onclick='concat().Concatenação (body) Quando o documento for carregado e quando for descarregado <body onload = 'load().' value="Acrescentar" /> <input type="button" onclick='erase().' value="Apagar" /> <textarea id="txt" rows="4" cols="30"> texto inicial </textarea> </body> UEL – Universidade Estadual de Londrina DC – Depto.

value = "". addObj.Concatenação A expressão A+B tem como resultado a concatenação do texto de A com B. Sendo A ou B uma string. alert(msg). } function erase() { txtObj. addObj.value. } </script> UEL – Universidade Estadual de Londrina DC – Depto. var msg = "Bem vindo " + userName + " à página \"" + document. txtObj = document.title + "\"". addObj = document. function load() { userName = prompt("Seu nome?").getElementById("add"). } function concat() { txtObj.value= "". txtObj. A expressão A+=B é equivalente a A=A+B <script> var userName.value += addObj. } function exit() { alert("Adeus " + userName).getElementById("txt"). de Computação Introdução 146 .

alert( a + x ). Infinity NaN UEL – Universidade Estadual de Londrina DC – Depto. alert( a % 3 ). alert( x ). alert( a / 3 ).3333333333333332 1 2 6 0 <script> function f() { var a = 4 . / 0 ).Valores numéricos 2 1. var x = a * 0. de Computação Valor real em notação científica Introdução 147 .5 . / 0 ). Valor inteiro Valor real alert( a – x ). x = 2e-3 alert( 0 alert( x alert( 0 } </script> . / x ).

de Computação Introdução 148 .getElementById("tabVal"). genTab().Tabuada <style> #tabval { width:2em } </style> <body onload='load()'> Tabuada dos <input type="text" id="tabVal" onkeyup='genTab(). } UEL – Universidade Estadual de Londrina DC – Depto.getElementById("tab"). tab. tab = document.' value="1" maxLength="2" /> <br /> <textarea id="tab" rows="10" cols="15" readonly="" /> </body> Inserir no máximo 2 caracteres var tabVal. function load( ) { tabVal = document.

+ A expressão1 é avaliada uma única vez. ++i i + * i ). condição.Repetição (for) Instrução de repetição for (expressão1. for ( var i=1. } . de Computação Acrescentar a última Introdução 149 . tab. i <= 9 ){ line= val + " X " + " = " + ( val tab.value += line + } line= val+ " X 10 = “ (val*10).value). var val = Number(tabVal. line. "\n". } é equivalente a expressão1. A expressão2 é executada no final de cada iteração. A condição é avaliada antes da execução de cada ciclo. expressão2) instrução Acrescentar as primeiras 9 linhas function genTab() { tab. while ( condição ) { instrução expressão2.value += line.value = "". UEL – Universidade Estadual de Londrina DC – Depto.

} img { height: 80% } </style> <body onload='load()'> <div class= "figure"> <span id= "legend">legenda</span><br /> <img id= "image" src= "" alt= "" /> </div> <input type= "button" value= "seguinte" onclick='next()' /> </body> UEL – Universidade Estadual de Londrina DC – Depto.Visualizar sequência de imagens <style type="text/css"> .figure {text-align:center. height: 150px. width: 200px. de Computação Introdução 150 .

} . legend=document. de Computação Introdução 151 . Os elementos do array são identificados pela sua posição (índice). change(). • O length. que armazena o número de elementos.jpg". function load() { image=document. <script type="text/javascript"> var imagens= new Array("por do sol. "flores.jpg").Arrays O array é uma sequência de elementos. // Imagem visualizada image. current = 0..getElementById("legend").jpg". UEL – Universidade Estadual de Londrina DC – Depto. legend. que armazenam os elementos. </script> Um array em JavaScript é um objecto.. que tem como propriedades: • Os índices.getElementById("image"). "vulcao. "berlindes.jpg".

UEL – Universidade Estadual de Londrina DC – Depto.. . // a.length = 10 // array com 3 elementos iniciados 1. que é equivalente: var a = new Array(item0. 2. 3].] var a = [1.). 2.. . .).Criar e iniciar Arrays Um array pode ser criado através :  Do operador new (como qualquer objecto) Exemplos: // array com 10 elementos iniciados a undefined var a = new Array(10) .. que é equivalente: var a = new Array(1.. de Computação Introdução 152 . 3). 2 e 3 respectivamente var a = new Array(1. var a = Array(item0.  Da função Array. 2..  Da descrição literal (literally) [item0.. item1. 3).

function change() { image.firstChild. image. change().length) current = 0.. A notação a[n] refere o elemento do array a cujo índice é n. em que n é um valor numérico positivo. } Note-se que o operador ++ prefixo devolve </script> o valor depois de incrementado.alt= imagens[current]. de Computação Introdução 153 .data = imagens[current]. legend. <script> .src = imagens[current].Arrays Os elementos dos arrays são indexados de 0 a length-1. } function next() { if (++current == imagens.. UEL – Universidade Estadual de Londrina DC – Depto.

Visualizar e/ou acrescentar imagens
click

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

Introdução

154

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

devolve o valor a decrementar.
UEL – Universidade Estadual de Londrina DC – Depto. de Computação

Introdução

155

Visualizar a imagem
Coloca como imagem corrente a imagem Procura file.value no com o nome indicado. Se este não 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 não encontre.

Uma string é convertida no valor numérico 0, se estiver vazia ou só contiver “separadores”
UEL – Universidade Estadual de Londrina DC – Depto. de Computação

Devolve um NaN se a string estiver vazia
156

Introdução

Conversão implícita: •Quando numa operação estiverem envolvidos valores de tipos diferentes, os valores dos operandos são automaticamente convertidos para valores de um mesmo tipo dependendo da operação. Exemplos:
O resultado da operação “2” + 1 é a string “21” O resultado da operação “2” * 1 é o valor numérico 2

Conversões

• Existem operações onde ocorre a conversão automática de todos os operandos. Exemplos:
O resultado da operação “2” * “1” é o valor numérico 2 O resultado da operação “2” && 1 é o valor Boolean true

Conversão explícita : Além da conversão implícita, pode-se aplicar conversão explícita através de funções com o nome do tipo (Number, Boolean, etc.). A seguir apresenta-se as tabelas de conversão dos valores entre tipos.
UEL – Universidade Estadual de Londrina DC – Depto. de Computação

Introdução

157

A conversão para Number de um valor é feita de acordo com a tabela: Tipo do valor Resultado da conversão Undefined Null Boolean Number String NaN 0 1 se true, 0 false Igual ao argumento (não existe conversão) O valor numérico interpretado depois de retirados os separadores iniciais e finais à string. • 0 (zero) se depois de retirados os separadores a string for vazia (dimensão 0). • NaN se não conseguir interpretar como valor numérico.

Conversões para Number

Exemplo de caracteres separadores são: tab, espaço e mudança de linha.
UEL – Universidade Estadual de Londrina DC – Depto. de Computação

Introdução

158

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

Descrição
Maior e menor valor positivo NaN - e +

Métodos de qualquer Number valueOf()

Descrição
Retorna o valor numérico primitivo.

toString(base) Retorna uma string que corresponde ao valor na base indicada. Caso a base não 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 notação ) exponencial. Introdução UEL – Universidade Estadual de Londrina 159
DC – Depto. de Computação

Null Boolean Number Resultado da conversão false Igual ao argumento (não existe conversão) false se +0.Boolean A conversão para Boolean de um valor é feita de acordo com a tabela: Tipo do valor Undefined. true caso contrário Descrição Retorna o valor Boolean primitivo. de Computação . true caso contrário String false se a dimensão é zero.NaN. Retorna “true” ou “false” conforme o valor seja true ou false respectivamente Introdução 160 Métodos de qualquer Boolean: Método valueOf() toString() UEL – Universidade Estadual de Londrina DC – Depto.-0.

Conversões para String A conversão para String de um valor é feita de acordo com a tabela: Tipo do valor Undefined Null Boolean Resultado da conversão “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 numérico String Igual ao argumento (não existe conversão) Introdução 161 UEL – Universidade Estadual de Londrina DC – Depto. de Computação .

pos) Descrição Retorna uma string contendo o carácter situado no índice pos Retorna o valor numérico do carácter situado no índice pos Retorna o índice maior ou igual a pos onde se encontra a substring s. pos) lastIndexOf(s.String Método de String String. ou -1 se não encontrar Retorna o índice menor ou igual a pos onde se encontra a substring s.. Cada argumento especifica o código dos caracteres da string. Método de qualquer String charAt(pos) charCodeAt(pos) indexOf(s.) Descrição Retorna a string contendo tantos caracteres quantos os argumentos. ou -1 se não encontrar UEL – Universidade Estadual de Londrina DC – Depto.fromCharCode(car0.. de Computação Introdução 162 .

toLowerCase() toUpperCase() Retorna uma string com os caracteres todos em minúsculas. s2.String (cont. .) slice(start. Retorna uma string com os caracteres todos em maiúsculas. Retorna um objecto Array de substrings. . Quando se refere string ou substring é um valor e não um objecto String UEL – Universidade Estadual de Londrina DC – Depto. Retorna a substring de start a end não incluindo o elemento o elemento end.) Método valueOf() concat(s1... s2. Estas ocorrências não são incluídas nas substrings. de Computação Introdução 163 .. As substring são determinadas pela ocorrência da esquerda para a direita da string sep. end) split(sep) Descrição Retorna o valor da string Retorna uma string contendo os caracteres da própria concatenados com os de s1..

parseFloat(s) isNaN(v) isFinite(v) Retorna true se Number(v) for NaN. Ignora os separadores iniciais e os caracteres a partir do primeiro carácter que não possa ser interpretado como fazendo parte da notação dum inteiro na base radix. Retorna NaN se radix<2 ou radix>36. Retorna o valor numérico que resulta da interpretação da string s na base radix. Caso contrário interpreta como se fosse um programa e avalia-o. Retorna false se Number(v) é NaN. UEL – Universidade Estadual de Londrina DC – Depto. Igual à anterior só que interpreta os caracteres que fazem parte dum valor numérico na base decimal. + ou -. de Computação Introdução 164 .Objecto Global Método eval(v) parseInt(s. ou se a string depois de retirados os caracteres a ignorar for vazia.radix) Descrição Se v não é uma string retorna v.

caso contrário retorna o número de elementos no array. } É o mecanismo usado pelas funções para retornar um valor para quem a chamou. return imagens. function find( fileName) { for (var i=0.Pesquisa sequencial em array Instrução return return expressão. de Computação Introdução 165 . provocando que a função termine a execução imediatamente.i < imagens. Se encontrar retorna o índice.length. No caso de uma função não retornar valor. ++i){ if ( imagens[i] == fileName ) return i. A função que a chamou pode no entanto ignorar o valor retornado. com o objectivo de provocar o término imediato da função UEL – Universidade Estadual de Londrina DC – Depto.length. pode constar no corpo de uma função return.

Se found for true index contem o índice onde se encontra . file.index. • index. current = res. res.found ) insert(res. } } function insert(i.index do array o } Devolve um objecto.. valor Boolean. change(). j>=i. } Se a imagem não existir no array imagens acrescenta-a ordenadamente.value UEL – Universidade Estadual de Londrina DC – Depto. caso contrário o índice onde se deveria encontrar.Arrays ordenados Inicialmente ordena os elementos do array function load() {imagens.index. que tem as propriedades: • found. function show() { if ( isValid(file. valor file. .value). valor numérico. --j) imagens[j+1] = imagens[j].sort(). if (!res. fileName) { for (var j=imagens. de Computação Introdução 166 ..value ).length-1. Inserir no índice imagens[i] = fileName.value) ) { var res = find( file.

gif” i fileName 1 “b. function insert(i. j >= i.gif” 2: “d.gif” 2: “c.gif” 1: “c.gif” Deslocar para o índice seguinte os elementos do array imagens cujo índice é maior ou igual a i.gif” UEL – Universidade Estadual de Londrina DC – Depto.gif” 4: “e.gif” 3: “d.length-1. --j) imagens[j+1] = imagens[j].gif” 2: “c. de Computação Introdução 167 . for (var j =imagens.gif” 3: “e. fileName) imagens 0: “a.gif” 4: “e. imagens[i] = fileName.gif” 3: “d.gif” índice i do array.gif” 1: “c. imagens Colocar fileName como valor do elemento imagens 0: “a.Inserir um elemento no array Inserir no índice i do array imagens o valor fileName. 0: “a.gif” 1: “b.

Retorna uma string contendo os elementos separados por separator O mesmo que join ..a2. e remove-os do array. v2.. ..count ) Retorna um array contendo os elementos de start a end. ... Retorna um array contendo o próprio concatenado com a1. UEL – Universidade Estadual de Londrina DC – Depto.end) reverse() join(separator) toString() push(v1.) pop() splice(start.. slice(start. o separador é a virgula Acrescenta v1. no fim Remove o último elemento Retorna um array contendo os count elementos a partir de start. Inverte o array.v2. não incluindo o elemento end. a2. de Computação Introdução 168 .) Descrição Ordena o array. .Métodos dos objectos Array Método sort() concat(a1....

imagens = imagens. de Computação Introdução 169 . imagens[i] = fileName. UEL – Universidade Estadual de Londrina DC – Depto.Inserir um elemento no array A função insert poderia ser definida usando os métodos disponibilizados pelos objectos Array.concat(last).length-i).splice(i. function insert(i. e remove-los do array imagens. Obter do array imagens o } array com os elementos que Acrescentar ao array imagens o elemento fileName. imagens. fileName) { var last=imagens. se situam a partir do índice i. Acrescentar ao array imagens os elementos do array last.

2: “e.gif” imagens elemento fileName. fileName) imagens i fileName 0: “a. imagens 0: “a. 1: “b.gif” Obter do array imagens o array com os elementos que se 2: “d.gif” 2: “c.gif” 170 UEL – Universidade Estadual de Londrina DC – Depto. imagens. var last=imagens.gif” imagens last 0: “a.gif” Acrescentar ao array imagens os elementos do array last. 3: “e. e remove-los do array imagens. imagens.gif” 4: “e. de Computação Introdução .gif” 3: “d.Inserir um elemento no array Inserir no índice i do array imagens o valor fileName.concat(last).gif” 1 “b.splice(i.gif” 0: “c.gif” Acrescentar ao array imagens o 1: “d.gif” 1: “b.gif” situam a partir do índice i.gif” 0: “a. function insert(i.gif” imagens[i] = fileName.length-i).gif” 1: “c.

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. found com valor false ao for (i = 0. ++i) if (imagens[i] >= fileName ) { Modifica o valor da if (imagens[i]==fileName) propriedade found.index = i. objeto res.found = true. objeto res. Acrescenta a propriedade res. res. function find(fileName){ var i. i < imagens. return res. Acrescenta a propriedade } index com valor i ao res. res = new Object(). UEL – Universidade Estadual de Londrina DC – Depto. Se não encontrar a propriedade found tem o valor false e a propriedade index o índice onde se deveria encontrar.length. de Computação Introdução 171 . } A instrução break usada numa instrução de repetição termina o ciclo. Cria o objeto resultado.found = false. break.

Pesquisa dicotómica 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 não existe alcance de pesquisa (end < begin). O elemento devia encontrar-se em begin. 3. Determinar ponto médio: middle = (begin+end)/2. 4. Terminar se o valor a procurar for o do ponto médio. O elemento encontra-se em middle. 5. Se o valor a procurar for menor que o do ponto médio, 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 médio, o alcance de pesquisa reduz-se para [middle +1, end]. Voltar ao ponto 2.

UEL – Universidade Estadual de Londrina DC – Depto. de Computação

Introdução

172

Pesquisa dicotómica 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 não existir alcance de pesquisa (ponto 2) while( begin <= end) { // Determinar o ponto médio (ponto 3) middle = Math.floor((begin + end)/2); // Valor foi encontrado (ponto 4) if ( fileName == imagens[middle] ) { res.found= true; res.index= middle; return res; } if ( fileName < imagens[middle]) end = middle-1; // Reduzir o alcance (ponto 5) else begin = middle+1;// Reduzir o alcance (ponto 6) } res.found= false; res.index= begin; return res; }
UEL – Universidade Estadual de Londrina DC – Depto. de Computação

Introdução

173

Operador + (Concatenação ou soma)
var a = "Java"; // a - string var b = "Script"; // b - string

JavaScript
alert( a + b ); // concatenação // b – número // concatenação // concatenação

Java2.1 2.1Java

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

A+B
• • • •

9.1

a = 7; alert( a + b );

// a – número // soma numérica

Se A e B são strings, faz a concatenação Se A é string, converte B em string e faz a concatenação Se B é string, converte A em string e faz a concatenação Senão realiza a soma dos valores A e B
UEL – Universidade Estadual de Londrina DC – Depto. de Computação

Introdução

174

Introdução 175 A+1 A+1 X= A++ X= --A X= A-- A A-1 A A+1 A-1 A-1 UEL – Universidade Estadual de Londrina DC – Depto.Reforço em operadores numéricos Equivalência 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 não seja um valor numérico. este será convertido em valor numérico. de Computação . resulta o valor NaN. • Se não for possível a conversão.

var b = eval(exp). function load() { exp = document. val = document.getElementById("exp").'> <input type="text" id="exp" /> <input type="button" value="eval" onclick='doEval(). } </script> <body onload='load(). de Computação Introdução 176 .value = eval(exp.' /> <input type="text" id="val" readonly="" /> </body> UEL – Universidade Estadual de Londrina DC – Depto. alert( b ). } function doEval() { val.getElementById("val"). <script type="text/javascript"> var exp. val.value).eval() Avalia o código contido na string passada como parâmetro 9 var exp = “4 + 5".

de Computação Introdução 177 .b) abs(v) random() sin(v) cos(v) tan(v) asin(v) acos(v) Valor inteiro mais próximo 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-aleatório entre 0 e 1 Seno de v Coseno de v Tangente de v Arco-seno de v Arco-coseno de v Arco-tangente de v atan(v) UEL – Universidade Estadual de Londrina DC – Depto.Métodos e propriedades de Math Math round(v) ceil(v) floor(v) max(a.b) min(a.

718) Logaritmo natural de 2 Logaritmo natural de 10 Logaritmo de E na base 2 Logaritmo de E na base 10 Valor de Π ( 3.p) exp(p) log(v) sqrt(v) E LN2 LN10 LOG2E LOG10E PI SQRT1_2 SQRT2 Ângulo entre eixo X e (x.y) pow(b. de Computação Introdução 178 .Math atan2(x.14159) Raiz quadrada de ½ Raiz quadrada de 2 UEL – Universidade Estadual de Londrina DC – Depto.y) b elevado a p E elevado a p Logaritmo natural de v Raiz quadrada de v Constante de Euler ( 2.

• Das comparação (operadores relacionais) resultam valores lógicos Operadores lógicos Resultado é true se: A&&B A||B !A A e B têm valor lógico true A ou B tem valor lógico true A tem valor lógico false A e B são convertidos para valores lógicos. de Computação Introdução 179 . caso não sejam: Qualquer objecto é true String é false se estiver vazia Número é true se for diferente de 0 null e undefined são false UEL – Universidade Estadual de Londrina DC – Depto.Valores lógicos • Os valores lógicos são apenas dois: true e false.

) A é menor que B A é menor ou igual a B A é maior ou igual a B A é maior que B UEL – Universidade Estadual de Londrina DC – Depto. de Computação Introdução 180 .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 conversão) A diferente de B (sem conv.

>= e <= • Se ambos os operandos são strings. realiza a comparação lexicográfica. • Se não. >. os operandos são convertidos para valores numéricos:  Caso algum operando seja NaN o resultado é false  + é maior que qualquer coisa (mesmo +). - é menor que qualquer coisa (mesmo -) UEL – Universidade Estadual de Londrina DC – Depto.Conversões operadores relacionais • Os operadores <. de Computação Introdução 181 .

O valor NaN não é igual a nada (mesmo NaN). tenta converter os operandos em string.• Os operadores == e != • • • Se os operandos são do mesmo tipo. null é considerado igual a null ou undefined. Caso não consiga nenhum. • Os operadores === e !== • UEL – Universidade Estadual de Londrina DC – Depto. Se não. de Computação Introdução 182 . são considerados diferentes. Só considera os operandos iguais se forem do mesmo tipo e tiverem conteúdo igual. realiza a comparação dos conteúdos. em valor numérico ou valor lógico.

menor ou igual. divisão. operator= Acesso a propriedade. [] () ++ -. atribuição com operação Avaliação múltipla - UEL – Universidade Estadual de Londrina DC – Depto. diferente. maior ou igual Igual.Prioridades dos operadores Descrição + . indexação em array. resto Soma e concatenação. decremento. chamada a função e agrupamento de expressões Incremento. maior.. igual estrito. subtracção Menor.! * / % + < <= > >= == != === !== && || ?: = . diferente estrito E lógico Ou lógico Decisão binária com operador ternário Atribuição. simétrico. negação lógica Multiplicação. de Computação Introdução 183 .

Exercício Testar os comandos de java Script explicitados neste módulo. jogos. Gerar grupos de dois e cada grupo montar uma home page utilizando o máximo possível de comandos em java script. de Computação Introdução 184 .. Sugestões: (página pessoal.) UEL – Universidade Estadual de Londrina DC – Depto. etc. laser. trabalho. Relação de testes.

write ("<p>Ex: escrita no documento</p>") document.Escrita no documento <SCRIPT language="JavaScript"> <!-valor = 25 document. de Computação Introdução 185 .write ("<p>Resultado de uma conta : " + (2* valor) + "</p>") //--> </SCRIPT> Tags do HTML define parágrafo pode-se utilizar <br> para mudança de linha Teste1.html UEL – Universidade Estadual de Londrina DC – Depto.

write("O resultado da expressão é " + Resultado) Teste2. de Computação Introdução 186 . "1+5*3") Resultado = eval(expre) document.    EX: expre = prompt("Digite uma expressão matemática".html UEL – Universidade Estadual de Londrina DC – Depto.

\ndevo prosseguir ???")) { alert("O risco é seu") } else { alert("Sabia decisão") } Teste3..html UEL – Universidade Estadual de Londrina DC – Depto..Utilização de mensagens ex: if (confirm ("Detectado um virus. de Computação Introdução 187 .

html 188 UEL – Universidade Estadual de Londrina DC – Depto. de Computação Introdução .value)"> </form> Teste4.<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.

Derp = Derp this. de Computação Dia = new Array(3) Dia[0] = "Domingo" Teste6. “Rafael". ”Professor") alert (dc.func+ " "+dc.html Dia[1] = "Segunda" Dia[2] = "Terça" alert (Dia[0]+ "/"+Dia[1]+ "/"+Dia[2]) Introdução 189 .html dcop = new Departamento ("Computação".Registro function Departamento (Derp.Derp+ " "+ dc. func. func = func this. i <= n .cargo) Arrays function Array (n) { this. cargo = cargo} Teste5. cargo) { this. i++) { this[i] = "" } } UEL – Universidade Estadual de Londrina DC – Depto.length = n for (var i = 1 .

length .html string.toUpperCase()+ " pode ser algo "+Result) Teste7.substring(4.Caixa Alta string.tamanho da string em caracteres string.toLowerCase() . Ex: palavra = “Extraordinario" Result = palavra.substring(index1.charAt(posição) .Strings string.retorna o caracter da posição (inicia em 0) string.Caixa Baixa UEL – Universidade Estadual de Londrina DC – Depto. index2) retorna o conteúdo da string que corresponde ao intervalo especificado.toUpperCase() . 14) // Result = " Ordinario " alert (palavra. de Computação Introdução 190 .

mês (0 a 11) getYear() .dia (1 a 31) getDay() .minutos (0 a 59) getSeconds() .getMonth()+1)) Teste8.Obtém o ano getHours() . de Computação Introdução 191 .hora (0 a 23) getMinutes() .dia da semana (0 a 6) getMonth() .segundos (0 a 59) EX: corrente = new Date() Dia = corrente.Datas getDate() .html UEL – Universidade Estadual de Londrina DC – Depto.getDate() alert (Dia+" "+ (corrente.

html.html Teste12.Exemplos Práticos Teste9.html Teste10.html-captura o nome e versão do Browser Teste14.html.html .html.html Teste13.html Teste11. de Computação Introdução 192 .Abre uma nova janela Teste17.Manipulação com imagens e link UEL – Universidade Estadual de Londrina DC – Depto.Abre uma nova janela Teste15.carrega uma nova página (não execute) Teste16.

Andrew S. UEL – Universidade Estadual de Londrina DC – Depto.Links e Referência http://ec.edu/web1/resources.htm Tutoriais de html e Java Script http://www.echoecho.usp.sc.mvc. 1997. Redes de Computadores.dcccd. Tradução da 3a edição. de Computação Introdução 193 . Editora Campus.htm Tutoriais de Java Script http://www.icmsc.com/html.br/manuals/HTML/ Tutoriai de html Tanenbaum.