Javascript tutorial

Ultima actualização: 18-10-2011 Técnico de Multimédia – Nível IV EFJ - TIPO 7 JAVASCRIPT FORMADOR: JOSÉ BATISTA

Ultima actualização: 18-10-2011 Papel do JavaScript na Internet:  Linguagem de programação JavaScript: • Desenvolvida pela Netscape para uso nos seus browsers • Objectivo: tornar as páginas Web (documentos) mais dinâmicos e interactivos. • Alterar o conteúdo de um documento, permitir formulários e opções de controlo, animação, etc.  Linguagem de scripting  Orientada ao objecto.  Interpretada pelo browser.  Os scripts são executados sem serem compilados.  Os scripts ocupam pouco espaço (poucos kbit).  Linguagem mais popular na Internet.  Utilizado na forma de scripts embebidos no código HTML ou em ficheiros com a extensão .js  JavaScript é suportado pelos browsers mais famosos, como o Netscape, o Internet Explorer , Firefox, chrome e o Opera.

Ultima actualização: 18-10-2011  O que é que o JavaScript pode fazer ?  Geração de HTML de forma dinâmica: • Inserção de texto, imagens e elementos num página.  Reacção a eventos: • Quando ocorre um evento, código JavaScript pode ser executado.  O JavaScript pode ler e escrever elementos HTML: • Consulta e mudança de atributos de um elemento:  Imagens, links, forms, texto, etc.  Validação de campos nos formulários: • Pode ser útil para validar os dados antes de estes serem submetidos ao servidor. • Poupa trabalho no servidor !!!! • Minimiza o tráfego !!!

Ultima actualização: 18-10-2011  Vantagens:  Fácil de aprender.  Desenvolvimento rápido.  Independente da plataforma.  Peso relativamente pequeno.  Desvantagens:  Gama limitada de métodos incorporados.  Não se pode esconder o código.  Faltam ferramentas de desenvolvimento.  Instável, compatibilidade ?

Ultima actualização: 18-10-2011  Existem três formas de incluir JavaScript em páginas HTML: 1. Associando código a atributos designadores de handlers de eventos 1. Como conteúdo do elemento script. 1. Especificando um ficheiro de código através do atributo src do elemento script. Esta solução é vantajosa quando pretende usar o mesmo código em vários documentos HTML.  Neste caso,qualquer código dentro do elemento script é ignorado!  O atributo src pode especificar qualquer URL, relativo ou absoluto Incluir código JavaScript em páginas HTML <script type="text/javascript" > alert("Executando o código"); </script> <script src="common.js"> </script> Ex: <SCRIPT SRC="http://home.netscape.com/functions/jsfuncs.js"> <input type="button" value="clickMe" onClick=‘alert("thanks to click me!");’ />

Ultima actualização: 18-10-2011 O primeiro programa em JavaScript <HTML> <HEAD> <TITLE> O meu primeiro programa em JavaScript </TITLE> <script type="text/javascript" > alert("Hello World!"); </script> </HEAD> <BODY> </BODY> </HTML>

Ultima actualização: 18-10-2011  Comentários  Valores,Variáveis  Expressões e Operadores  Funções  Instruções  Arrays  Eventos  Objectos Conceitos nucleares

Ultima actualização: 18-10-2011 Comentários  Comentários são anotações que servem para clarificar certos aspectos do código ou explicar determinadas opções. Os comentários são ignorados pelo interpretador de JavaScript.  O JavaScript suporta dois estilos de comentários:  de uma só linha • // This is a single-line comment.  com múltiplas linhas • /* This is a multiple-line comment. It can be of any length, and you can put whatever you want here. */

Ultima actualização: 18-10-2011  Variáveis permitem identificar valores (valores primitivos, arrays ou objectos) através de um nome. O valor diz-se o conteúdo da variável.  Declaração de variáveis  Exemplos  Em JavaScript as variáveis não têm tipo (isto é, um conjunto de valores possíveis) definido a priori. Assim, qualquer variável pode conter qualquer valor.  Exemplo • var notInicialized; // a variável fica com o valor undefined • var euro=200.482; • var codigo_postal="1900 LISBOA"; • var var1=2, var2=3, var3; Variáveis codigo_postal=1900; // A variável foi iniciada com uma string e agora // passou a ter como conteúdo um valor numérico! var nome_variável [ = expressão_iniciação ] [, ... ] ; Os parêntesis rectos indicam que a expressão é opcional. Na sua inexistência a variável fica com o valor undefined

Ultima actualização: 18-10-2011  Os identificadores em JavaScript têm de respeitar as seguintes regras:  Começar por uma letra ou o carácter ´_´  Os caracteres seguintes podem ser qualquer combinação de letras, ‘_’ e dígitos.  Distinguem-se letras minúsculas e maiúsculas.  Exemplos  var _window2 = window.open();  var name = "joão"; name e Name são variáveis diferentes!  var Name = "Carlos";  var 3values = [ 1, 2, 3]; // nome de variável inválido (começa por um dígito) Regras para os identificadores (nomes de variáveis e funções)

Ultima actualização: 18-10-2011 O JavaScript permite trabalhar com os seguintes valores primitivos:  Valores númericos (inteiros e reais) • Exs: 42 3.1415 50.0 NaN (lê-se not a number e é o resultado de uma expressão com um operando que não pode ser convertido em valor numérico)  Valores lógicos (booleanos). • true e false  Cadeias de caracteres (strings) • Ex: "Isto é uma string!"  undefined  representa o conteúdo de variáveis não iniciadas  null  representa o não valor, ou seja a inexistência de valor associado a uma variável Ex: varA= null; // varA passou a não ter valor, ou melhor, // passou a valer null! Valores Primitivos

Ultima actualização: 18-10-2011 Expressões e Operadores  Expressões são quaisquer sequências válidas de operadores e operandos (lvariáveis e subexpressões - expressões parentesiadas) que, depois de avaliadas, geram um  valor primitivo (número, string, valor lógico), ou um objecto.  Na linguagem JavaScript existem expressões:  Aritméticas: a avaliação dá um número (Ex: 2/4  0.5 )  String: a avaliação dá uma string (Ex: "Fred" +1  "Fred1")  Lógicas: a avaliação dá um valor lógico (Ex: 3 > 4  false)  Especiais: têm operadores especiais que, por exemplo, podem retornar (ou gerar) objectos

Ultima actualização: 18-10-2011  Existem operadores unários (só com um operando), binários (com 2 operandos), e um operador ternário (com três operandos)  O JavaScript tem os seguintes operadores: Operadores Aritméticos (de) Strings Afectação Comparação Lógicos (booleanos) Operadores  A prioridade relativa dos operadores está definida no slide tabela de operadores eprecedências

Ultima actualização: 18-10-2011 Operadores aritméticos + soma - subtracção * multiplicação / divisão Comportam-se como os seus equivalentes matemáticos. Ex: 1 / 2 retorna 0.5 % módulo retorna o resto da divisão inteira entre dois operandos . Os operandos são convertidos para valores inteiros Ex: 12 % 5 retorna 2 Operadores aritméticos operam sobre valores numéricos (literal ou variável) e retornam um valor numérico.  Os 4 operadores básicos:  Os operadores incremento e decremento  O operador Módulo var1++ var1 -- incrementam ou decrementam var1. Retornam o valor original de var1 ++ var1 -- var1 incremento ou decremento de var1. retornam o valor após a operação  Menos Unário - Menos unário Nega o operando que o segue Ex: y = -x (se x=3, y=-3) Operandos não numéricos são convertidos em números usando as regras definidas em Number, com excepção das situações indicadas em operadores de String

Ultima actualização: 18-10-2011 Operadores de Strings  Se pelo menos um dos operandos do operador + for uma string, aquele passa a funcionar como operador de concatenação , retornando outra string, concatenação léxica dos dois operandos  "my " + "string" retorna "my string".  23 + "a" retorna "23a"  var a = "2"; var val = a + 3; // o valor de val é a string "23"  O facto dos operador + ter comportamento diferente em strings e números pode gerar confusão.  Para converter explícitamente uma string (ou outro valor) em número pode fazer: var num = Number(valor); // num=Number("23")  num = 23

Ultima actualização: 18-10-2011 Operadores de afectação  Um operador de afectação afecta o operando à esquerda com o valor do operando à direita e retorna o valor com que ficou o operando afectado. Ex: a+= 3  a = a+ 3 retorna 7 se a valer 4 Operador Equivalência x += y x = x + y x -= y x = x - y x *= y x = x * y x /= y x = x / y x %= y x = x % y x ^= y x = x ^ y

Ultima actualização: 18-10-2011 Operadores de comparação II Operador Descrição Examplos que retornam true IGUAL == Retorna true se os dois operandos forem iguais de acordo com as regras acima. Se os dois operados não forem do mesmo tipo, é feita uma conversão de tipos conveniente (típicamente os operandos são convertidos em string) 3 == var1 s1 == ’a" DIFERENTE != Retorna true se os dois operandos forem diferentes, de acordo com as regras acima. Se os dois operados não forem do mesmo tipo, é feita uma conversão de tipos conveniente (típicamente os operandos são convertidos em string) var1 != 4 s2 != "B" MAIOR QUE > true se o operando esquerdo for maior que o direito. var2 > var1 MAIOR OU IGUAL >= true se o operando esquerdo for maior ou igual que o direito. var2 >= var1 var1 >= 3 MENOR QUE < true se o operando esquerdo for menor que o direito. var1 < var2 MENOR OU IGUAL <= true se o operando esquerdo for menor ou igual que o direito. var1 <= var2 s1 <= s2 Assumindo var1=3 var2=4 s1="a" s2="b"

Ultima actualização: 18-10-2011 Operadores lógicos (booleanos)  Operadores Lógicos são normalmente usados com valores booleanos. Nesse caso geram valores booleanos. Os operadores && e || podem ter como operandos valores não booleanos e nesse caso retornam um dos operandos  Em geral, qualquer valor não booleano é convertível para true, à excepção de 0, a string vazia (""), null e undefined, que são convertíveis para false.  As expressões lógicas são avaliadas o mínimo necessário para obter o resultado, de acordo com as regras:  exp1 && exp2 é imediatamente avaliada para exp1 (se Boolean(exp1)== false), sem necessidade de avaliar exp2  exp1 || exp2 é imediatamente avaliada para exp1 (se Boolean(exp1) == true), sem necessidade de avaliar exp2 Operador Uso Descrição && exp1 && exp2 (Logical AND) Retorna exp1 se este poder ser convertido para false. Caso contrário, retorna exp2. Na situação normal de exp1 e exp2 serem expressões booleanas, retorna true se ambas forem true || exp1 || exp2 (Logical OR) Retorna exp1 se este poder ser convertido para true. Caso contrário, retorna exp2. Na situação normal de exp1 e exp2 serem expressões booleanas, retorna true se pelo menos uma for true ! ! exp (Logical NOT) Retorna false se exp poder ser convertido para true. Caso contrário retorna true

Ultima actualização: 18-10-2011 Tabela de operadores e precedências Prioridade + _ Operador Descrição . [] () Accesso a propriedades, índexação, chamadas a funções e sub- expressões ++ — - ~ ! new Operadores unários e criação de objectos * / % Multiplication, division, modulo division + - Addition, subtraction, string concatenation < <= > >= Less than, less than or equal, greater than, greater than or equal, == != Equality, inequality, && Logical AND || Logical OR

Ultima actualização: 18-10-2011  As funções em JavaScript são semelhantes às suas congéneres na matemática. Têm um nome e, em geral, têm argumentos e geram um valor. No entanto, ao contrário daquelas, podem não ter argumentos e/ou não gerar ( retornar) um valor. De qualquer modo, podem sempre alterar o estado do programa através de efeitos laterais (side-effets), por exemplo, modificando o valor de variáveis globais.  As variáveis declaradas dentro de uma função, ao contrário das variáveis globais, só podem ser acedidas dentro da função onde são declaradas.  A definição de uma função consiste na palavra-chave function, seguida pelo seu nome, uma lista de argumentos - dentro de parêntesis e separados por vírgulas - e as respectivas instruções, dentro de chavetas.  Exemplo - O quadrado de um número function nome_de_função ( parametro1, parametro2, ... ) { declarações de variáveis e instruções... } Funções (definição) function square( x) { return x * x; }

Ultima actualização: 18-10-2011 Funções (invocação)  Uma função só é executada quando invocada. A sua definição não implica a execução de qualquer código.  Exemplo: a função square definida no slide anterior, poderia ser invocada com o argumento 5, da seguinte maneira: • var i = square(5);  Uma função é invocada colocando o seu nome, seguido dos argumentos de invocação entre parêntesis. A chamada da função pode ser feita em qualquer ponto do programa onde possa aparecer uma expressão • var i = square(5) ; // i vale ?....

Ultima actualização: 18-10-2011 Entrada/saída de dados (a função alert)  Quando se utiliza o JavaScript em páginas HTML, existem funções pré-definidas que permitem a interacção simples com o utilizador Para mostrar informação pode-se usar a função alert Uso alert( mensagem) Parâmetros mensagem – String com a mensagem a afixar Retorno A função não retorna nada alert("Ganhou!");

Ultima actualização: 18-10-2011 Entrada/saída de dados ( a função prompt) Para recolhar dados pode-se usar a função prompt Uso var stringLida = prompt( mensagem, valorInicial ); Parâmetros mensagem (opcional). String que especifica a mensagem a mostrar na dialogBox de recolha do valor. Por omissao é ‘’’’. valorInicial (opcional). String que especifica o valor inicial a ser colocado no campo de recolha. Por omissao é "". var idade = prompt("Quantos anos tem?", "");

Ultima actualização: 18-10-2011 Entrada/saída de dados ( a função confirm) No caso particular da recolha de um valor booleano, é útil usar a função confirm Uso var res=confirm(mensagem); Parâmetros mensagem – string com a mensagem a afixar Retorno se o utilizador premiu OK res é true. Se o utilizador premiu Cancel res é false. var answer =confirm("Continuar a execução?"); if (answer == true) { ... // É para continuar! } else { ... //É para Cancelar! }

Ultima actualização: 18-10-2011 strings • Uma string consiste em 0 ou mais caracteres delimitados por plicas ‘ ou aspas ". Os delimitadores têm de ser do mesmo tipo- ambos aspas ou ambos plicas. Exemplos: "blah" ‟blah‟ "1234" "one line n another line" • A um valor do tipo string podem ser aplicados as propriedades e métodos dos objectos String • Exemplos: var s="abc"; alert(s.length); // 3 Caracteres especiais que se podem incluír dentro de strings Caracteres Meaning b Backspace f Form feed n New line r Carriage return t Tab ’ Apostrophe or single quote " Double quote Backslash character () XXX The character with the Latin-1 encoding specified by up to three octal digits XXX between 0 and 377. For example, 251 is the octal sequence for © (copyright) symbol. xXX The character with the Latin-1 encoding specified by the two hexadecimal digits XX between 00 and FF. For example, xA9 is the hexadecimal sequence © (copyright) symbol. uXXXX The Unicode character specified by the four hexadecimal digitsXXXX. For example, u00A9 is the Unicode sequence for © (copyright) symbol.

Ultima actualização: 18-10-2011  array é uma sequência de valores (elementos). Um array de strings é uma sequência de zero ou mais expressões dentro de parêntesis rectos A variável diasDaSemana passa a ser uma referência para o array de comprimento 7 (isto é, com sete elementos). O comprimento de um array pode ser obtido através da propriedade length.  Os elementos de um array são acedidos através do seu índice (posição) . O primeiro elemento ocupa o índice 0, o último ocupa o índice length-1. Ex: diasDaSemana[2] acede ao terceiro elemento do array (a string "terça").  Um array pode ser criado pela forma alternativa new Array(size) em que size indica o número de elementos do array. Nesse caso todos os elementos ficam iniciados a null Ex: var tab=new Array(5); // tab fica a referenciar um array de 5 elementos, todos com o valor null Arrays var dias=""; for (var i=0; i < diasDaSemana.length; ++i) dias += diasDaSemana[i] + "n"; alert(dias); alert("Numero de dias da semana= " + diasDaSemana.length); var diasDaSemana= [ "domingo","segunda","terça", "quarta","quinta","sexta","sábado" ];

Ultima actualização: 18-10-2011 • As expressões são instruções quando terminadas por ; • É possível usar mais que uma instrução sempre que aparecer a palavra instrução nas descrições dos slides seguintes, usando a instrução composta: instrução composta  { instruções ... }  A linguagem JavaScript tem um conjunto compacto mas completo de instruções. Nesta secção são apresentadas as instruções do JavaScript, separadas do seguinte modo:  As instruções de manipulação de objectos (a instrução for..in e a instrução with) e as instruções de tratamento de excepções (instruções try...catch e throw) serão analisadas mais tarde  Notas: • Instruções condicionais: a instrução if ... else e a instrução switch • Instruções de ciclo: as instruções while, for, do while e continue • Instrução return • Instrução break: usada na instrução switch e em casos excepcionais associada a ciclos • Instrução expressão • Instrução composta Instruções

Ultima actualização: 18-10-2011 • A parte das instruções que aparece dentro dos parêntesis rectos é opcional • Se for necessário colocar mais que uma instrução nos ramos da instrução if pode-se usar a instrução composta  { instruções ... } Instrução if function maiorDeTres( val1,val2,val3) { if (val1 > val2) { if (val1 > val3) return val1; else return val3; } else { if (val2 > val3) return val2; else return val3; } } if ( condição) instrução [ else instrução ] A utilização da instrução composta não é necessária neste exemplo, mas torna o código mais legível

Ultima actualização: 18-10-2011 A instrução switch switch (expression) { case label1: case label2: instruções [ break; ] case label3: instruções[ break; ] ... default : instruções; } var d = new Date(); // devolve um objecto com a data corrente switch( d.getDay()) { case 1: case 2: // segunda e terça-feiras alert("um início de semana com muita energia!"); break; case 3: // quarta alert("anime! Deve ter um joguito de futebol na televisão"); break; case 4: case 5: // quinta, sexta alert("O fim de semana está quase..."); break; case 6: case 0: // sábado, domingo alert("Com saudades do trabalho?..."); break; default: // nunca pode acontecer (se o getDay não tiver erros...) alert("Mas que raio? Em que dia da semana é que estamos?"); } A instrução switch, quando todos os seus ramos terminam pela instrução break, é semelhante a uma cadeia de instruções if -- else if -- else

Ultima actualização: 18-10-2011 *A instrução switch (II) var teste = prompt("digite um valor de 1 até 5"); switch(teste){ case '1': alert('seu valor foi 1'); case '2': alert('seu valor foi 2'); case '3': alert('seu valor foi 3'); case '4': alert('seu valor foi 4'); case '5': alert('seu valor foi 5'); default: alert('seu valor nao foi nenhum valor entre 1 e 5'); } Se algum ou alguns ramos da instrução swaitch não terminam por break, todas as intruções do switch a partir do ramo inicial são executadas, o que pode ter resultados interessantes

Ultima actualização: 18-10-2011 A instrução while  Executa instrução enquanto condição for verdadeira. A instrução é executada zero ou mais vezes.  Exemplos var n=0; var x=0; while( n < 10 ) { n ++; x += n; } while ( condição) instrução var i=1; while(i <= 10) { document.write(i++ +’<br>’); //escrevendo e ao mesmo tempo adicionando um para a variável i } O comando while é semelhante ao comando for, porém na maioria das vezes o while é aplicado quando não podemos determinar a quantidade de voltas que nosso ciclo vai ter Obter a soma dos 10 primeiros inteiros

Ultima actualização: 18-10-2011 for ( [ expressaoInicial] ; [ condição] ; [ expressaoFimCiclo] ) instrução A instrução for  Descrição  Executa instrução enquanto a avaliação de condição der true  Avalia expressaoInicial antes da primeira avaliação de condição e expressaoFimCiclo no final de cada ciclo var notas0a20 = new Array(5,12,16); function quantasPositivas(notas0a20) { total=0 for (var i=0; i < notas0a20.length; i++) { if (notas0a20[i] >= 10) total++; } return total; }

Ultima actualização: 18-10-2011 A instrução do...while  A instrução do..while executa a instrução associada até que expressão_de_condição seja avaliada como false function getIntValue(min,max) { var i, lido; do { lido=prompt("Introduza um valor inteiro entre "+ min + "e" + max, min); i= Number(lido); } while ( isNaN(i) || i < min || i > max); return i; } do instrução while ( expressão_de_condição) Ler um valor inteiro (através da função prompt), dentro do intervalo [min, max]

Ultima actualização: 18-10-2011 var i = 0; var n = 0; while (i++ < 5) { if (i == 3) continue; n += i; } *A instrução continue  A instrução continue é usada para reiniciar um ciclo . Numa instrução while é reavaliada a condição associada. Numa instrução for o ciclo termina sendo avaliada a expressão de final de ciclo e começa um novo ciclo na avaliação da expressão de condição  Exemplo  o exemplo seguinte mostra um ciclo while com uma instrução continue que executa quando o valor de i for 3. Assim, n toma, sucessivamente, os valores 1, 3, 7 e 12. continue [label]

Ultima actualização: 18-10-2011 A instrução return  A instrução return só pode ser usada dentro de funções. Termina de imediato a execução da função onde está inserida. A expressão associada (opcional) é o valor retornado pela função return [ expressão ] var tab =["0l2","121","16"]; var val=12 var i=0 function findValue(tab,val) { for ( i=0 ; i < tab.length; ++i) if (tab[i] == val) return i; return "nenhum é igual"; }

Ultima actualização: 18-10-2011 break [label] A instrução break A instrução break é usada para terminar um ciclo ou a instrução switch for (i = 1;;i++) { if (i > 10) { break; } document.write(i); } Utilização da instrução break para sair de um ciclo

Ultima actualização: 18-10-2011 var matriz = [ [ 1, 0, 3, 4, 5, 6, 7, 8, 9, 10], [ 2, 3, 4, 7, 8, 9, 0, 7, 12, 6], [10, 9, 8, 7, 6, 5, 4, 3, 2, 1] ]; var encontrou=false; for (var i=0; i < matriz.length; ++i) { for (var j=0; j < matriz[i].length; ++j) { if ( matriz[i][j] ==0) { document.write( "O valor 0 achado na posicão [" + i +"," + j + "] da matriz<br>"); encontrou= true; } } } if (encontrou==false) document.write("O valor não foi encontrado"); *A instrução break (II)  A instrução break pode ser associada à instrução label para permitir o abandono de mais que um ciclo, como mostrado no exemplo seguinte: procurar um mento de uma riz (array mensional) de ros com o r 0

Ultima actualização: 18-10-2011 Eventos em JavaScript  As aplicações JavaScript em ambiente de browser são típicamente orientadas por eventos (event- driven). Eventos ocorrem geralmente como resultado (directo ou indirecto) da interacção com o utilizador.  Premir um elemento botão, modificar um elemento texto, ou mover o rato por cima de elemento âncora são exemplos de eventos. Para o programa reagir a um evento, terão de ser definidos event handlers, com onClick ou onChange <a href="http://www.viseu.tv" onMouseOver="javascript:window.status=„Ir para o site da televisão de viseu';return false;" onMouseOut="javascript:window.status='';return false;" > VISEU TV </a> O elemento âncora mostra a associação de código HTML a handlers de eventos (onMouseOver, onMouseOut). a instrução "return false;" garante que o evento não é tratado por nenhum outro handler, o que poderia comprometer o comportamento pretendido (Nota: este processo de terminar a propagação de um evento só funciona no Internet Explorer).

Ultima actualização: 18-10-2011 Tabela de eventos nome de Handler Elementos a que se aplica Descrição onblur A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA the element lost the focus onchange INPUT, SELECT, TEXTAREA the element value was changed onclick Todos com visual a pointer button was clicked ondblclick Todos com visual a pointer button was double clicked onfocus A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA the element got the focus onkeydown Todos com visual a key was pressed down onkeypress Todos com visual a key was pressed and released onkeyup Todos com visual a key was released onload BODY the document has been loaded onmousedown Todos com visual a pointer button was pressed down onmousemove Todos com visual a pointer was moved within onmouseout Todos com visual a pointer was moved away onmouseover Todos com visual a pointer was moved onto onmouseup Todos com visual a pointer button was released onreset FORM the form was reset onselect INPUT, TEXTAREA some text was selected onunload BODY the document has been removed

Ultima actualização: 18-10-2011 Eventos – exemplo (HTML) <HTML> <HEAD> <TITLE> Quadrados e Raízes </TITLE> <script type"text/javascript" > </script> </HEAD> <BODY onload="init();"> <label for="valor" > x </label> <input type="text" id="valor" onkeyup="changedValue();" value="" /> <label for="vSquare" > x ² </label> <input type="text" id="vSquare" readonly="true" > <label for="vSquareRoot" > √ x </label> <input type="text" id="vSquareRoot" readonly="true" > </BODY> </HTML> O código está no slide seguinte código Unicode do símbolo ² código Unicode do símbolo √

Ultima actualização: 18-10-2011 Eventos – exemplo (JavaScript) var valEdit; var squareEdit; var squareRootEdit; function square(number) { return number * number; } function squareRoot( x) { var srx = 1; while (square(srx) < x) ++srx; return square(srx) > x ? srx-1 : srx; } function changedValue() { var value = valEdit.value; squareEdit.value= square(value); squareRootEdit.value=squareRoot(value); } function init() { valEdit = document.getElementById("valor"); squareEdit = document.getElementById("vSquare"); squareRootEdit= document.getElementById("vSquareRoot"); }

Ultima actualização: 18-10-2011 • Objectos nativos (Math, Date, String, Array) • Novos objectos criados pelo programa, para representar entidades • Objectos providenciados pelo ambiente de execução do JavaScript. No caso de um browser temos, como exemplos, o objecto window e o objecto document. Nota: No Internet Explorer existe um quarto tipo de objectos, denominados objectos ActiveX, que permitem o acesso a recursos externos ao browser • Atributo é um valor identificado por um nome. O conjunto de atributos de um objecto define o seu estado Ex: document.body; // body é atributo do objecto document •Método é uma propriedade que representa uma função associada ao objecto. O conjunto de métodos de um objecto caracteriza o seu comportamento Ex: document. getElementById(...); // getElementById é metodo do objecto document  A linguagem JavaScript suporta três espécies de objectos: Introdução aos objectos Objectos são colecções de propriedades, que podem atributos e métodos

Ultima actualização: 18-10-2011 Por exemplo, imagine que pretende criar objectos para representar carros. Para definir carro, crie uma função que especifique as propriedades (atributos e/ou métodos) que quer associar a um carro. Tal função denomina-se uma função construtora. function Carro(fabricante, modelo, ano){ this.fabricante = fabricante; this.modelo = modelo; this.ano= ano; } Criação de novos objectos  É possível criar objectos com propriedades e métodos definidos pelo programador. Para isso define-se uma função construtora e usa-se a instrução new para a criação dos objectos Carro é função construtora A seguir, pode criar novos carros usando a instrução de criação de objectos (new): var mycar = new Carro("Rover", "414 Si", 1997);

Ultima actualização: 18-10-2011 A palavra chave this  A palavra-chave this só pode ser usada dentro de um método ou de uma função construtora. this refere o objecto sobre o qual se invocou o método ou o objecto que está a ser construído, no caso de uma função construtora.  Syntaxe this[. propriedade] ou this[.metodo( parametros...) ]  Exemplo: Seja o objecto Ponto com três propriedades - atributos (x,y) que representam as coordenadas do ponto e método (dist) para calcular a distância a outro Ponto function Ponto_dist( p1) { var distx= this.x - p1.x var disty= this.y - p1.y; return Math.sqrt(distx*distx + disty*disty); } function Ponto(x,y) { this.x=x; this.y = y; this.dist= Ponto_dist; } var p1= new Ponto(2,3), p2= new Ponto(6,6); alert("distancia de p1 a p2 = " + p1.dist(p2));

Ultima actualização: 18-10-2011 Exemplo de criação de objectos - objecto Counter Pretende-se criar objectos contadores como os mostrados no jogo de ping-pong. Deve ser possível definir o módulo de contagem, o número de digitos que se pretende afixar (com zeros à esquerda), a dimensão de cada dígito e o elemento onde o contador é inserido new Counter(table, //elemento pai 0, // valor inicial 22, // módulo de contagem 30, // comprimento dígitos 60); // altura dígitos Nome Descrição value valor corrente do contador nDigs número de dígitos da afixação do valor maxValue módulo de contagem viewer elemento HTML onde o contador se mostra show mostra o contador na página dec decrementa módulo maxValue e mostra inc incrementa módulo maxValue e mostra Atributos Métodos

Ultima actualização: 18-10-2011 utilização do objecto Counter <BODY onload="init();"> <div id="counterWrapper" > </div> <input style="clear : both" type="button" value="Increment" onmousedown="startInc();" onmouseup="stop();" /> <input type="button" value="Decrement" onmousedown="startDec();" onmouseup="stop();" /> </BODY> <style type="text/css"> body { background-color : blue } #counterWrapper { margin-left: 20%; margin-bottom: 10%; width: 125px; height: 60px; } background-color : rgb(0,0,0); padding: 5px; border-style=inset; } </style>

Ultima actualização: 18-10-2011 utilização do objecto Counter (script)  <script type="text/javascript" src="../javascript/counter.js"> </script> <script type="text/javascript" > var counter; var counterWrapper; var interval; function init() { counterWrapper= document.getElementById("counterWrapper"); counter = new Counter(counterWrapper,0,100,20,40); counter.show(); } function startInc() { interval=window.setInterval("counter.inc()", 50); } function stop() { interval=window.clearInterval(interval); } function startDec() { interval=window.setInterval("counter.dec()", 50); } </script> A instrução invoca o método show do objecto counter. Dentro do método show, this corresponde ao objecto counter sobre o qual foi invocado o método O código do objecto Counter está no ficheiro counter.js

Ultima actualização: 18-10-2011 objecto Counter (implementação I) function Counter_show() { var aux = this.value; var images= this.viewer.childNodes; for (i= images.length-1; i >=0; --i) { var dig = aux %10; aux= Math.floor( aux /10); // gerar o nome do ficheiro com o gif correspondente var gifName = "images/digits/" + dig + "7SEG.GIF"; images[i].src= gifName; } this.viewer.style.visibility="visible"; } function Counter_increment() { this.value++; if (this.value == this.maxValue+1) this.value=0; this.show(); } function Counter_decrement() { this.value--; if (this.value < 0) this.value=this.maxValue; this.show(); } métodos de Counter afixar o valor corrente na página decrementa o valor módulo maxValue e mostra o novo valor incrementa o valor módulo maxValue e mostra o novo valor

Ultima actualização: 18-10-2011 classe Counter (implementação II) function Counter(viewer, value, module, w,h) { // atributos this.value=value; this.nDigs = numberOfDigits(module-1); this.module = module; this.viewer = viewer; // metodos this.show = Counter_show; this.inc = Counter_increment; this.dec = Counter_decrement; // construir os elementos imagem para os digitos e inseri-los em viewer for(i=0; i < this.nDigs; ++i) { var newImg = document.createElement("img"); newImg.style.width=w; newImg.style.height=h; this.viewer.appendChild(newImg); } this.viewer.style.visibility="hidden"; } A função construtora de Counter Parâmetros: viewer : elemento html que vai conter os digitos do contador value: valor inicial module: módulo de contagem w,h: comprimento e largura de cada digito função que retorna o total de dígitos de um número

Ultima actualização: 18-10-2011  Object objecto genérico  Math Contém propriedades e métodos utéis em cálculos matemáticos  Date para trabalhar com datas  String propriedades e métodos utéis para manipular strings  Array propriedades e métodos utéis para manipular arrays Objectos nativos Em JavaScript existem os seguintes objectos nativos:

Ultima actualização: 18-10-2011 métodos genéricos para todos os objectos Método Descrição toString Retorna uma representação textual do objecto valueOf Returna o valor primitivo (caso exista) do objecto corrente Se p for um ponto definido no slide anterior, então: alert("p.toString()=" + p.toString()",p.valueOf()=" + p.valueOf() ); Todos os objectos em JavaScript possuem os métodos indicados na tabela abaixo. O resultado da chamada dos métodos depende, no entanto, do tipo do objecto. Exemplos: var s= new String("abc"); alert("s.toString()=" + s.toString() + ",s.valueOf()=" + s.valueOf() );

Ultima actualização: 18-10-2011 objectos Date  objectos Date facilitam o tratamento de datas  existem variadas formas de criar novos objectos Date:  var date = new Date( [ parâmetros ] );  Exemplos var today= new Date(); // criar um objecto Date com a data corrente var natal95 = new Date("December 25, 1995 00:00:00"). • A string representing a date in the following form: "Month day, year hours:minutes:seconds. if you omit hours, minutes, or seconds, the value will be set to zero  O alcance de datas é de -100,000,000 dias até 100,000,000 days relativos a 1 de Janeiro de 1970

Ultima actualização: 18-10-2011 objectos Date (II) Método Descrição getDate Returns the day of the month (0..31) getDay Returns the day of the week (0..6) getFullYear Returns the full year (in 4 digits) getHours Returns the hour (0..23) getMilliseconds Returns the milliseconds (0..999) getMinutes Returns the minutes (0..59) getMonth Returns the month in the specified date according to local time. getSeconds Returns the seconds (0..59) setDate Sets the day of the month setFullYear Sets the full year setHours Sets the setMilliseconds setMinutes Sets the minutes setMonth Sets the month setSeconds Sets the seconds toGMTString Converts a date to a string, using the Internet GMT conventions

Ultima actualização: 18-10-2011 O objecto Math Propriedade Descrição E Euler’s constant and the base of natural logarithms, approximately 2.718. LN10 Natural logarithm of 10, approximately 2.302. LN2 Natural logarithm of 2, approximately 0.693. LOG10E Base 10 logarithm of E (approximately 0.434). LOG2E Base 2 logarithm of E (approximately 1.442). PI Ratio of the circumference of a circle to its diameter, approximately 3.14159. SQRT1_2 equivalently, 1 over the square root of 2 - approximately 0.707. SQRT2 Square root of 2, approximately 1.414. Método Descrição abs Returns the absolute value of a number. acos Returns the arccosine (in radians) of a number. asin Returns the arcsine (in radians) of a number. atan Returns the arctangent (in radians) of a number. atan2 Returns the arctangent of the quotient of its arguments. ceil Returns the smallest integer greater than or equal to a number. cos Returns the cosine of a number. exp Returns Enumber, where number is the argument, and E is Euler’s, constant, the base of the natural logarithms. floor Returns the largest integer less than or equal to a number. log Returns the natural logarithm (base E) of a number. max Returns the greater of two numbers. min Returns the lesser of two numbers. pow Returns base to the exponent power, that is, baseexponent. random Returns a pseudo-random number between 0 and 1. round Returns the value of a number rounded to the nearest integer. sin Returns the sine of a number. sqrt Returns the square root of a number. tan Returns the tangent of a number.

Ultima actualização: 18-10-2011 objectos String Método Descrição charAt(index) Returns the character at the specified index charCodeAt(index) Returns a number indicating the Unicode value of the character at the given index concat(s1,s2,...) Combines the text of two strings and returns a new string indexOf(str [, firstIdx]) Returns the index within the calling String object of the first occurrence of the specified value, or -1 if not found lastIndexOf(str [, firstIdx]) Returns the index within the calling String object of the last occurrence of the specified value, or -1 if not found slice(idxStart [, idxEnd]) Extracts a section of a string and returns a new string split( separator[nSplits]) Splits a String object into an array of strings by separating the string into substrings substr(idxStart, nChars) Returns the characters in a string beginning at the specified location through the specified number of characters substringIidxStart,idxEnd) Returns the characters in a string between two indexes into the string toLowerCase() Returns the calling string value converted tolowercase toSource() Returns an object literal representing the specified object. You can use this value to create a new object toString() Returns a string representing the specified object toUpperCase() Returns the calling string value converted to uppercase valueOf() Returns the primitive value of the specified object Atributo Tipo Descrição ReadOnly length Number Reflects the length of the string. S

Ultima actualização: 18-10-2011 var a, x, y; var r=10; a = Math.PI * r * r; x = r * Math.cos(Math.PI); y = r * Math.sin(Math.PI/2);  A instrução with define o objecto onde são procurados por omissão os nomes referidos no programa  Se um nome existe como propriedade do objecto referido na instrução with englobante então esse objecto é usado.  Senão, o nome é entendido como o de uma variável local, ou global  Exemplo: A instrução é especialmente útil com objectos usados em expressões, como o objecto Math *A instrução with with ( object) { instruções } var a, x, y; var r=10; with (Math) { a = PI * r * r; x = r * cos(PI); y = r * sin(PI/2); }

Ultima actualização: 18-10-2011 Hierarquia de Objectos do Browser  O browser instancia um conjunto de objectos que permitem a manipulação em javascript dos vários elementos das páginas carregadas.  Os atributos e métodos do objecto window podem ser acedidos sem referir explicitamente o objecto • Exs: window.document  document window.alert("viva!")  alert("viva!")  Nos slides seguintes apresentam-se as Atributos e métodos mais relevantes dos objectos: • window • document • location • navigator Excerto da hierarquia de objectos representantes dos documentos html acedidos numa sessão do browser checkbox anchorsdocument locationwindow forms images links history buttons radio navigator

Ultima actualização: 18-10-2011 O objecto window (Atributos e handlers de eventos) Atributo Descrição screenLeft Retrieves the x-coordinate of the upper left-hand corner of the browser's client area, relative to the upper left- hand corner of the screen. screenTop Retrieves the y-coordinate of the top corner of the browser's client area, relative to the top corner of the screen. status Sets or retrieves the message in the status bar at the bottom of the window. document Represents the HTML document in a given browser window. history Contains information about the URLs visited by the client. location Contains information about the current URL. navigator Contains information about the Web browser. screen Contains information about the client's screen and rendering capabilities. handler Descrição onblur Fires when the object loses the input focus. onfocus Fires when the object receives the focus. onload Fires immediately after the browser loads the object. onresize Fires when the size of the object is about to change. onunload Fires immediately before the object is unloaded. Handlers de eventos Atributos

Ultima actualização: 18-10-2011 O objecto window (métodos) Método Descrição Exemplo alert(msgStr) Displays a dialog box containing an application- defined message. setInterval(codigo, timeVal) Executa repetidamente o código Javascript presente na string codigo de cada vez vez que deccorer o tempo (em miliseg.) definido em timeVal var timer= setInterval(“tick()”,1000); // invoca a função tick todos os // segundos clearInterval(intervalId) Cancels the interval previously started using the setInterval method. var idInt=setInterval(f,10); clearInterval(idInt); close() Closes the current browser window confirm(msgStr) Displays a confirmation dialog box that contains an optional message as well as OK and Cancel buttons. navigate(urlStr) Loads the specified URL to the current window. open(urlStr) Opens a new window and loads the document specified by a given URL. prompt(msgStr, valStr) Displays a dialog box that prompts the user with a message and an input field. setTimeout(codigo, timeVal) Executa o código Javascript presente na string codigo de quando deccorer o tempo (em miliseg.) definido em timeVal var timer= setTimeout(“fim();”, 2000); //invoca a função fim após 2 segundos clearTimeout(timerId) Cancels a time-out that was set with the setTimeout method. var idTimer=setTimeout(f,10); clearTimeout(idTimer); O objecto window oferece um conjunto de serviços úteis para a criação de aplicações interactivas e a possibilidade de navegar nas páginas acedidas durante a sessão.

Ultima actualização: 18-10-2011 * Objecto navigator Atributo Tipo Descrição R/O appCodeName String Retrieves the code name of the browser. S appMinorVersion String Retrieves the application's minor version value. S appName String Retrieves the name of the browser. S appVersion String Retrieves the platform and version of the browser. S browserLanguage String Retrieves the current browser language. S cookieEnabled String Retrieves whether client-side persistent cookies are enabled in the browser. Persistent cookies are those that are stored on the client-side computer. S cpuClass String Retrieves a string denoting the CPU class. S online String Retrieves a value indicating whether the system is in global offline mode. S platform String Retrieves the name of the user's operating system. S systemLanguage String Retrieves the default language used by the operating system. S userLanguage String Retrieves the operating system's natural language setting. S O objecto Navigator permite obter informações acerca do browser

Ultima actualização: 18-10-2011 * Objecto location  O objecto location permite aceder às características do URL da página corrente. Atributo Tipo Descrição hostname String Sets or retrieves the host name part of the location or URL. href String Sets or retrieves the entire URL as a string. pathname String Sets or retrieves the file name or path specified by the object. protocol String Sets or retrieves the protocol portion of a URL. Método Descrição reload() Reloads the current page. replace(urlStr) Replaces the current document by loading another document at the specified URL. Propriedades

Ultima actualização: 18-10-2011 <TABLE> <TBODY> <TR> <TD>Shady Grove</TD> <TD>Aeolian</TD> </TR> <TR> <TD>Over the River, Charlie</TD> <TD>Dorian</TD> </TR> </TBODY> </TABLE> DOM (Document Object Model) O DOM é um standard do W3C que especifica as propriedades dos objectos que representam os elementos existentes em documentos HTML (e noutras linguagens baseadas em marcas). Tanto o Internet Explorer como o NetScape respeitam, de forma geral, o standard DOM. Nesta secção são descritos as interfaces DOM mais utilizados. Nós DOM que representam o excerto de documento HTML à esquerda Elementos Nós de texto

Ultima actualização: 18-10-2011 DOM (genérico) A ligação entre os nós representa uma associação "é um": por exemplo, a interface Document também é uma interface Node, ou seja, possui todas os atributos e métodos descritas em Node O diagrama mostra as interfaces DOM genéricas, isto é, aquelas que existem em qualquer documento baseado em marcas, mesmo que não seja HTML. Neste contexto, chamamos interface à descrição de um conjunto de atributos e métodos. Um objecto que respeita a interface Node é um Node porque contém todas as propriedades descritas em Node. A maior parte dos objectos DOM são Nodes. As excepções são objectos que representam sequências de Nodes, como NameNodeMap e NodeList

Ultima actualização: 18-10-2011 Atributos de Node Propriedade Tipo Descrição Read/Only nodeName String. O nome do nó S nodeType Number. O tipo do nó (elemento, texto, comentário...) S parentNode Node O elemento pai S childNodes NodeList A coleccção de nós filhos S firstChild Node O primeiro filho. null se não existir S lastChild Node O último filho. null se não existir S previousSibling Node O irmão anterior S nextSibling Node O irmão seguinte S attributes NamedNodeMap A colecção de atributos S ownerDocument Document O documento a que pertence o nó S A tabela mostra as propriedades comuns a todos os objectos que representam elementos e texto em documentos HTMLPropriedades

Ultima actualização: 18-10-2011 Tipos de Nodes (valores do campo NodeType) Nome Valor ELEMENT_NODE 1 ATTRIBUTE_NODE 2 TEXT_NODE 3 CDATA_SECTION_NODE 4 PROCESSING_INSTRUCTION_NODE 7 DOCUMENT_NODE 9 COMMENT_NODE 8

Ultima actualização: 18-10-2011 métodos de Node Método Parâmetros Retorna Descrição insertBefore(newChild, refChild) newChild : Node refChild: Node Node Insere o novo nó filho newChild antes do nó filho refChild. Retorna newChild replaceChild(newChild, oldChild) newChild : Node oldChild : Node Node Substitui o nó filho oldChild por newChild. Retorna oldChild removeChild(oldChild) oldChild : Node Node Retira o nó filho oldChild. Retorna oldChild. appendChild(newChild) newChild : Node Node Acrescenta newChild como ultimo filho. Retorna newChild hasChildNodes() Não tem Boolean true se o elemento tiver filhos cloneNode(deep) deep : Boolean a true indica que os nós filhos também são copiados Node Cria um nó idêntico ao nó corrente. Retorna o novo nó Métodos A tabela mostra os métodos que são comuns a todos os objectos que representam elementos e texto em documentos HTML

Ultima actualização: 18-10-2011 Propriedades de NamedNodeMap Nome Tipo Descrição R/O length Number indica o número de nós do NodeMap S Método Descrição getNamedItem(name) retorna o valor (Node) associado ao nó name. Se nodeMap for uma variável que referencia um NodeMap então: nodeMap.getNamedItem ("item1")  nodeMap["item1"] setNamedItem(arg) acrescenta ao NodeMap o nó indicado removeNamedItem(name) remove do NodeMap o nó name item(index) retorna o nó na posição index. Se nodeMap for uma variável que referencia um NodeMap então: nodeMap.item(2)  nodeMap[2] Certas propriedades de objectos que representam elementos HTML referenciam objectos NamedNodeMap, que não são mais que colecções de pares nome- valor, em que nome é uma string. São usados, por exemplo, para representar os atributos de um elemento Atributos Métodos

Ultima actualização: 18-10-2011 Propriedades de NodeList Nome Tipo Descrição R/O length Number indica o número de nós na sequência S Método Descrição item(index) retorna o nó na posição index. Se nodeList for uma variável que referencia um NodeList então: nodeList.item(2)  nodeList[2] Certas propriedades de objectos que representam elementos HTML referenciam objectos NodeList, que não são mais do que uma sequência de nós. São usados, por exemplo, para representar os elementos filhos de um elemento Atributos Métodos Um NodeList pode ser visto com um Array de nós

Ultima actualização: 18-10-2011 Propriedades de Text e Comment Nome Tipo Descrição Readonly data String. representa o texto N length Number Número de caracteres do texto S Método Parâmetros Retorna Descrição substringData(offset, count) offset : Number. count : Number String retorna a substring do texto com dimesão count a partir de offset appendData(arg) arg: String Nada acrescenta a string arg ao texto insertData(offset, arg) offset : Number arg : String Nada insere a string arg a partir de offset deleteData(offset, count) offset : Number count : Number Nada apaga count caracteres do texto a partir de offset replaceData(offset, count, arg) offset : Number count : Number arg : String Nada substitui count caracteres a partir de offset pela string arg Atributos Métodos

Ultima actualização: 18-10-2011 Attr (atributo) Nome Tipo Descrição Readonly name String nome do atributo S specified Boolean indica se o atributo está especificado no elemento S value String valor do atributo N Attr tem todas as propriedades de Node bem como as propriedades da tabela abaixo Propriedades

Ultima actualização: 18-10-2011 DOM (excerto da hierarquia de objectos para documentos HTML) A maior parte dos objectos para representar documentos HTML são Nodes. HTMLCollection é a excepção

Ultima actualização: 18-10-2011 propriedades de HTMLCollection Propriedade Tipo Descrição ReadOnly length Number Total de Nós da colecção S Método Parâmetros Retorno Descrição item(index) Number index Node devolve o nó da colecção de índice index. Em caso de falha retorna null namedItem(name) String name Node Devolve o nó da colecção com id name. Em caso de falha retorna null Atributos Métodos Uma HTMLCollection pode ser vista com um Array de nós, isto é, se col for uma HTMLCollection, então col.item(i)  col[i]

Ultima actualização: 18-10-2011 attributos do objecto document Atributos Tipo Descrição R/O title String. O valor do elemento TITLE N referrer String. O URL da página que permitiu a negação a este documento S URL String. O URL completo do documento S body HTMLElement O objecto que representa o elemento body N images HTMLCollection Colecção das imagens do documento S links HTMLCollection Colecção das imagens do documento S forms HTMLCollection Colecção das forms do documento S anchors HTMLCollection Colecção dos elementos âncora do documento S cookie String lista de coockies na forma nome1=valor1;nome2=valor;... N

Ultima actualização: 18-10-2011 métodos do objecto document Método Parâmetros Retorna Descrição createAttribute(atrName) atrName: String Attr cria um atributo com o nome especificado e valor null createComment(strComment) strComment: String Comment cria um objecto comentário com a string strComment. createElement(elemName) elemName: String Element cria um elemento de nome elemName Ex: document.createElement("img") cria um objecto img. createTextNode(strText) strText: String Text cria um nó de texto com os caracteres indicados em strText getElementById(strId) strId: String Element retorna o objecto de id strId. getElementsByName(strName) strName: String NodeList retorna a sequência de objectos de nome strName open() Não tem Nada abrir o documento para injectar HTML close() Não tem Nada fechar o documento préviamente aberto e forçar a visualização das alterações write(msg) msg : String Nada escreve texto HTML no documento, desde que este esteja aberto writeln(msgr) msg : String Nada escreve texto HTML no documento, seguido de uma mudança de linha,desde que o documento esteja aberto

Ultima actualização: 18-10-2011 propriedades de um elemento genérico HTML (HTMLElement) Attr tem todas as propriedades de Element bem como as propriedades da tabela abaixo Propriedade Tipo Descrição Readonly id String. O valor do atributo id N title String. O valor do atributo title N lang String. O valor do atributo lang N dir String. O valor do atributo dir N className String. O valor do atributo class. Denomina-se className porque class é palavra resevada em JavaSCript N Propriedades

Ultima actualização: 18-10-2011 Propriedades de HTMLInputElement HTMLInputElement tem todas as propriedades de HTMLElement bem como as propriedades da tabela ao lado Nome Tipo Descrição Readonly defaultValue String O valor inicial no caso de input tipo text ou password N defaultChecked Boolean o estado inicial no caso de input tipo radio ou checkbox N alt String o texto alternativo caso o browser não possa mostrar o elemento N checked Boolean o estado corrente no caso de input tipo radio ou checkbox N maxLength Number máximo de caracteres do input caso seja text ou password N name String identificador de grupo para radio buttons N readOnly Boolean a true se não poder ser alterado (text ou password) N type String o tipo de elemento input N value String o valor associado ao elemento N Método Descrição blur() retira o foco do elemento focus() coloca o foco no elemento select() simula uma selecção no elemento click() simula um click no elemento Atributos Métodos

Ultima actualização: 18-10-2011 Propriedades de HTMLSelectElement HTMLSelectElement tem todas as propriedades de HTMLElement bem como as propriedades das tabelas ao lado Propriedade Tipo Descrição Readonly type String a string "select-multiple" ou "select- one", dependendo do atributo multiple S selectedIndex Number o índice do elemento seleccionado, a começar em 0. Se nenhum elemento está selccionado, vale -1 S value String o valor do atributo value do elemento seleccionado N length Number o número de opções S options HTMLCollection uma colecção com as opções S multiple Boolean true se for de selecção múltipla N size Number o total de linhas visíveis N tabIndex Number A tecla tab permite navegar dentro dos elementos de um form(taborder). tabIndex define índice no taborder. N Método Parâmetros Retorna Descrição add(element, before) element : HTMLElement before :HTMLElement acrescenta uma opção remove(index) index : long Nada remove a opção de índice index blur() Não Tem Nada retira o foco focus() Não Tem Nada pôe o foco Atributos Métodos

Ultima actualização: 18-10-2011 Propriedades de HTMLOptionElement HTMLOptionElement tem todas as propriedades de HTMLElement bem como as propriedades da tabela abaixo Nome Tipo Descrição Readonly defaultSelected Boolean valor da opção seleccionada à priori S text String o texto contido na opção S index Number o índice (a começar em 0) da opção no elemento select a que pertence S selected Boolean true se a opção for a seleccionada N value String o valor do atributo HTML value N Propriedades

Ultima actualização: 18-10-2011 Propriedades de HTMLTextAreaElement HTMLTextAreaElement tem todas as propriedades de HTMLElement bem como as propriedades das tabelas abaixo Nome Tipo Descrição R/O defaultValue String o valor inicial N cols Number comprimento do elemento em caracteres N name String o nome do elemento se está dentro de um form N readOnly Boolean true se for só de leitura N rows Number o número de linhas vísiveis do elemento N type String a string "textarea" S value String o texto associado ao elemento N Método Descrição blur() retira o foco do elemento focus() poe o foco no elemento select() seleccionado o texto do elemento Atributos Métodos

Ultima actualização: 18-10-2011 Propriedades e métodos de HTMLTableElement Propriedade Tipo R/ O caption HTMLTableCaptionElement N tHead HTMLTableSectionElement N tFoot HTMLTableSectionElement N rows HTMLCollection N tBodies HTMLCollection N Método Parâmetros Retorno createTHead() Não tem HTMLTHeadElement deleteTHead() Não tem Não tem createTFoot() HTMLTFootElement Não tem deleteTFoot() Não tem Não tem createCaption() Não tem HTMLCaptionElement deleteCaption() Não tem Não tem insertRow(index) Number index HTMLRowElement deleteRow(index) Number index Não tem HTMLTableElement tem todas as propriedades de HTMLElement bem como as propriedades das tabelas abaixo Propriedades Métodos

Ultima actualização: 18-10-2011 Propriedades de HTMLTableRowElement HTMLTableRowElement tem todas as propriedades de HTMLElement bem como as propriedades definidas aqui Propriedade Tipo R/O rowIndex Number S sectionRowIndex Number S cells HTMLCollection S Método Parâmetros Retorno insertCell(index) index :Number HTMLTableCellElement deleteCell(index) index : Number Não tem Atributos Métodos

Ultima actualização: 18-10-2011 propriedades de HTMLTableCellElement HTMLTableCellElement tem todas as propriedades de HTMLElement bem como as propriedades definidas aqui Propriedade Tipo Descrição R/O cellIndex Number índice da célula (a começar em zero) na linha a que pertence S abbr String abreviatura da célula N colSpan Number total de colunas ocupadas pela célula N height String altura da célula N noWrap Boolean true se não houver mudançda automática de linha no texto da célula N rowSpan Number total de linhas ocupadas pela célula N Propriedades

Ultima actualização: 18-10-2011 Objecto que representa um evento de mouse Nome Descrição screenX This read-only property is a number. screenY This read-only property is a number. clientX This read-only property is a number. clientYr This read-only property is a number. ctrlKey This read-only property is of type Boolean. shiftKey This read-only property is of type Boolean. altKey This read-only property is of type Boolean. metaKey This read-only property is of type Boolean. button This read-only property is of type Number. Apenas o NetScape 6.0 ou superior suportam os objectos evento apresentados! Propriedades

Ultima actualização: 18-10-2011 Objecto que representa um evento de tecla Nome Descrição outputString This property is of type String. keyVal This property is of type int. virtKeyVal This property is of type int. inputGenerated This property is of type boolean. numPad This property is of type boolean. Propriedades Apenas o NetScape 6.0 ou superior suportam os objectos evento apresentados!

Ultima actualização: 18-10-2011 Anexos  Elementos HTML de interacção  Acesso a estilos em JavaScript  Palavras Reservadas  Bibliografia  Índice

Ultima actualização: 18-10-2011 Password <input type="password" id="txtPassword" /> <input type="radio" name="ages" /> 1-10 years old <input type="radio" name="ages"checked="true" /> 11 years old <input type="radio" name="ages" /> 12-120 years old <input type="button" id="emergencyBtn" value="push me!" onClick="alert('Aggggghh!!!!');" /> Elementos HTML de interação (inputs) input button input password input radio

Ultima actualização: 18-10-2011 Elementos HTML de interação (inputs) <input type="text "value="para inserir texto" id="textbox" size=15 /> input text Uncheck this check box for some free advice. < input type="checkbox" checked="true" id="chk1" onclick="choosebox1()" /> input checkbox

Ultima actualização: 18-10-2011 <textarea STYLE="overflow:hidden" id=txtComments> The patient is in stable condition </textarea> Elementos HTML de interacção (select e textarea) <select id="cars" name="Cars" multiple> <option value="1" selected>BMW <option value="2">Porsche <option value="3" selected>Mercedes </select> <select name="Cats" size="1"> <option value="1">Calico <option value="2">Tortie <option value="3" selected>Siamese </select> multiple select single select textarea

Ultima actualização: 18-10-2011 Elementos HTML de interação (exemplo ) <div class="dialogBox" > <div> <span> Nome: </span> <input id="name" type="text" value="Your Name" /> </div> <div> <span> Password: </span><input type="password" id="passwdBox" /> </div> <div> Nível: <div class="levels"> <div> <span> Básico </span> <input type="radio" id="basico" name="level" value="0" checked /> </div> <div> <span> Intermédio </span> <input type="radio" id="intermedio" name="level" value ="1" /> </div> <div> <span> Avançado </span> <input type="radio" id="avancado" name="level" value ="2" /> </div> </div> </div> <div> Mudanças Automáticas: <input id="autoChanger" type="checkbox" checked="true" /> </div> <div> Imagens por seg.: <select id="imagesPerSec" > <option value="15" > Quinze </option> <option value="20" selected="true"> Vinte </option> <option value="25" > Vinte e Cinco </option> <option value="30" > Trinta </option> </select> </div> </div> No slide seguinte está o aspecto do formulário gerado pelo HTML, depois de aplicada a style sheet também apresentada

Ultima actualização: 18-10-2011 Elementos HTML de interação (exemplo) .dialogBox { position : absolute ; top : 20%; left: 20% } .dialogBox { background-color : blue ; padding: 20px; } .dialogBox { font-family : "Arial"; font-size: 14px; color : yellow} .dialogBox span { width: 5em } .dialogBox .levels { margin-left : 3 em } style sheet associada ao excerto HTML do slide anterior para obter o aspecto mostrado na figura à direita

Ultima actualização: 18-10-2011 <HTML> <HEAD <TITLE> Acesso a estilos em JavaScript</TITLE> <script type="text/javascript" > var showed=true; var digit; var toggle; function mostraEsc() { if (showed) { digit.style.visibility="hidden"; toggle.value="Mostra"; } else { digit.style.visibility="visible"; toggle.value="Esconder"; } showed = !showed; } function init() { digit = document.getElementById("digit"); toggle= document.getElementById( alert(digit.style.visibility); } </script> </HEAD> <BODY onload="init();" > <input type="button" value="Esconder" onclick="mostraEsc();" id="toggle"/> <img src="c:imagesdigits9.gif" id="digit" /> </BODY> </HTML> Acesso a estilos em JavaScript  todos os objectos DOM que representam elementos HTML possibilitam o acesso ao atributo style (inline style) através de uma propriedade com o mesmo nome (style). A propriedade style é um objecto com propriedades com os mesmos nomes dos atributos de estilo existentes, excepto quando se usam hiphens nos nomes dos atributos de estilo. Nesse caso, o hiphen é omitido e a letra a seguir é colocada em maíuscula (por exemplo, background-color chama-se em JavaScript backgroundColor) Embora o estilo por omissão de visibility seja "inherit", o estilo mostrado é uma string vazia! Isto acontece porque a propriedade style não representa o estilo "corrente", mas apenas as regras de estilo definidas inline.

Ultima actualização: 18-10-2011 Palavras Reservadas break with function return typeof case do if switch var catch else in this void continue false instanceof throw while default for null try delete finally new true abstract double goto native static boolean enum implements package super byte export import private synchronized char extends int protected throws class final interface public transient const float long short volatile Palavras reservadas Palavras reservadas mas não utilizadas

Ultima actualização: 18-10-2011 * Conceitos avançados  Recursividade  Excepções Esta matéria não faz parte do programa da disciplina, estando aqui presente como informação para os alunos mais interessados

Ultima actualização: 18-10-2011  A recursividade é um instrumento de programação poderoso, pois permite resolver muitos problemas de forma mais natural. Em JavaScript a recursividade exprime-se através de uma função que se invoca, directa ou indirectamente, a ela própria.  Exemplo  a função factorial  Qualquer algoritmo recursivo segue o esquema geral da função factorial acima, isto é:  Caso tenha sido atingida a situação em que o resultado é imediato (no caso do factorial quando n=0, n! é 1 por definição) é retornado o valor correspondente. A esta situação limite chama-se a condição terminal da recursividade.  Se a condição não tiver sido atingida, aplica-se a expressão que exprime a recursividade (no caso do factorial n! = n*(n-1)! ). Note-se que é fundamental que cada invocação recursiva esteja mais perto da condição terminal (convirja), pois é importante que o algoritmo termine! No caso do factorial isso é óbvio. Em cada chamada, n diminui de uma unidade, logo chega a zero! Recursividade function factorial(n) { if (n==0) return 1; return n*factorial(n-1); } n>0  n*(n-1)! n! n=0  1

Ultima actualização: 18-10-2011 Recursividade (II) Imagine que se pretende colocar os digitos de um número num array de inteiros, do dígito de maior peso para o dígito de menor peso. O dígito de menor peso é fácil de arranjar - se n for o número, n % 10 (resto da divisão inteira) é o dígito de menor peso. O número sem o dígito de menor peso também se obtém facilmente- se n é o número , Math.floor(n /10) é o número ao qual se retirou o dígito de menor peso. Podemos assim pensar num algoritmo para obter os sucessivos dígitos de um número: O problema é que os dígitos ficam no array por ordem inversa à pretendida. Como é que a recursividade nos ajuda a resolver o problema? var n = ...; // o número var digits=new Array(); // array onde ficam os dígitos de n var i=0; do { digits[i++] = n % 10; n = Math.floor(n/10); } while (n> 0);

Ultima actualização: 18-10-2011 function arrayFromValue(numero, ndigits, digits) { if (value < 10) { // colocar tantos zeros quantos os necessários para ocupar ndigits casas for (i=1; i < ndigs; ++i) { digits[digits.length] = 0; } // agora escrever o caracter correspondente digits[digits.length] = value; } else { arrayFromValue(Math.floor(value/10), ndigits-1, digits); digits[digits.length] = value%10; } }  A seguir mostra-se uma uma função recursiva que coloca os dígitos na ordem certa e que além disso coloca zeros necessários no array para ocupar no mínimo ndigits caracteres  Se o número for inferior a 10 então o objectivo está praticamente cumprido: basta colocar ndigits-1 a zero e de seguida o número. Está encontrada a condição terminal da recursividade.  Senão, temos de encontrar uma definição recursiva que se pode enunciar como: 1. Colocar no array o número sem o algarismo das unidades. 2. Colocar o algarismo das unidades Recursividade (III) Colocar no array o número sem o algarismo da unidades (chamada recursiva) Colocar o algarismo das unidades

Ultima actualização: 18-10-2011 Navegar na hierarquia de elementos do documento <BODY onunload="closeWindows();" > <input type="button" value="Show Nodes Tree" onclick="showTree();"/> <div id="teste"> Teste </div> </BODY> Pretende-se fazer um programa em JavaScript que tenha a capacidade de mostrar, numa textarea de nova janela de browser criada para o efeito, a hierarquia de elementos de qualquer página. Aplicado ao body de documento HTML definido acima, teria o resultado mostrado na figura ao lado <HTML> <BODY> <textarea id="screen" rows="20" cols="80"> </textarea> </BODY> </HTML> página que é usada para mostrar a hierarquia de elementos da página corrente

Ultima actualização: 18-10-2011 Navegar na hierarquia de elementos do documento // usada para fechar a janela auxiliar que mostra // a hierarquia function closeWindowScreen() { if (newWindow != undefined) newWindow.close(); } // função utilitária para indentar o inicio de cada // linha de acordo com a posicao do elemento na // hierarquia function indent(page,level) { for (i=0; i < level; ++i) page.value +=" "; } // função principal. Abre a janela auxiliar e invoca // a função recursiva sTree que escreve na textArea screen // a hierarquia existente no elemento body corrente function showTree() { closeWindowScreen(); newWin = window.open("screen.html"); var screen; screen=newWin.document.getElementById("screen"); sTree(document.body, screen, 0); } var newWindow; var ELEMENT_NODE=1; var nodeTypes= [ "EMPTY_NODE", "ELEMENT_NODE", "ATTRIBUTE_NODE", "TEXT_NODE", "CDATA_SECTION_NODE", "ENTITY_REFERENCE_NODE", "ENTITY_NODE", "PROCESSING_INSTRUCTION_NODE", "COMMENT_NODE", "DOCUMENT_NODE", "DOCUMENT_TYPE_NODE", "DOCUMENT_FRAGMENT_NODE", "NOTATION_NODE" ]; a propriedade nodeType de qualquer elemento tem um valor inteiro cujo significado é dado pelas strings da tabela nodeTypes

Ultima actualização: 18-10-2011 function sTree(elem, page, level) { indent(page,level); page.value += nodeTypes[elem.nodeType] + ", nome=" + elem.nodeName; if (elem.data != null) page.value += ", texto=" + elem.data; page.value += "n"; if (elem.nodeType != ELEMENT_NODE) return; indent(page,level); page.value += "atributos:n"; indent(page,level+1); var atribs= elem.attributes; if (atribs != undefined) { var nUnspec=0, first=true; for (var i=0; i < atribs.length;++i) { if (atribs[i].specified) { if (!first) page.value+=","; else first=false; page.value += atribs[i].name + "="" + atribs[i].value + """; } else nUnspec++; } if (!first) page.value+="n"; if (nUnspec != 0) { indent(page,level+1); page.value += nUnspec + " atributos não especificados!n"; } } indent(page,level); page.value += "filhos:n"; if (!elem.hasChildNodes()) { indent(page,level+1); page.value += "Não tem!n"; } else { for (var i=0; i < elem.childNodes.length; ++i) sTree(elem.childNodes[i],page , level+1); } } Navegar na hierarquia de elementos do documento A função que percorre recursivamente a hierarquia de nós. Para cada nó mostra o tipo e o nome e o valor. Se o nó for um elemento, mostra os atributos e os nós filhos, invocando- se a si própria.

Ultima actualização: 18-10-2011 throw expressão  Excepções sinalizam situações de falha e são iniciadas pela instrução throw. Uma excepção modifica o fluxo normal de execução do programa, que continua no primeiro bloco catch que for encontrado no encadeamento de funções em que a excepção foi iniciada.  Caso não exista nenhum bloco de tratamento de excepções o script termina, típicamente com uma janela indicativa de erro  Exemplos: throw "Erro de conversão"; throw 42; Tratamento de excepções – a instrução throw

Ultima actualização: 18-10-2011  The try...catch statement marks a block of statements to try, and specifies a response should an exception be thrown. If an exception is thrown, the try...catch statement catches it.  The try...catch statement consists of a try block, which contains one or more statements, and a catch block, containing statements that specify what to do if an exception is thrown in the try block. That is, you want the try block to succeed, and if it does not succeed, you want control to pass to the catch block. If any statement within the try block (or in a function called from within the try block) throws an exception, control immediately shifts to the catch block. If no exception is thrown in the try block succeed, the catch block is skipped. The finally block executes after the try and catch blocks execute but before the statements following the try...catch statement. A instrução try var undef; try { …… } catch(e) { alert("excepção: " + e); } try { instruções… } [catch ( catchVar) { instruções…} ] [finally { instruções…} ]

Ultima actualização: 18-10-2011 Os blocos catch, finally  The following example uses a try...catch statement. The example calls a function that retrieves a month name from an array based on the value passed to the function. If the value does not correspond to a month number (1-12), an exception is thrown with the value "InvalidMonthNo". function getMonthName (mo) { // Adjust month number for array index (1=Jan, 12=Dec) mo=mo-1; var months= [ "Jan","Feb","Mar","Apr","May","Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; if (months[mo] != null) return months[mo]; else throw "InvalidMonthNumber"; }

Ultima actualização: 18-10-2011 Bibliografia

Javascript tutorial

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Javascript tutorial

Mais de Jose De Almeida Batista

Javascript tutorial