Introdução à Linguagem JavaScript Rodolfo Riyoei Goya
1 Índice 1 Índice... 2 2 Introdução... 4 2.1 Pré-requisitos... 4 2.2 Como funciona um script em JavaScript... 4 2.3 Um script simples em JavaScript... 5 3 Tipos de Dados Básicos... 7 3.1 Números (Number)... 7 3.2 String... 7 3.3 Caracteres de Controle Especiais... 7 3.4 Boolean... 7 3.5 Criando Variáveis... 8 4 Comandos... 9 4.1 Operadores Aritméticos... 9 4.2 Atribuição... 9 4.3 Atribuição Aritmética... 9 4.4 Incremento e decremento... 10 4.5 Operador para troca de sinal... 10 4.6 Operadores + e += aplicados a String... 11 4.7 Operadores Relacionais... 12 4.8 Operadores Lógicos... 13 4.9 Precedência de operadores... 14 5 Entrada/Saída em JavaScript... 15 5.1 Função write... 15 5.2 Mensagens... 16 5.2.1 Alert... 16 5.2.2 Confirm... 17 5.2.3 Prompt... 18 6 Comandos de Controle... 19 6.1 Comando if... 20 6.2 Comando if-else... 21 6.3 Comando switch-case... 22 6.4 Atribuição Condicional... 24 6.5 Comando for... 25 6.6 Comando while... 29 6.7 Comando do-while... 30 6.8 Comandos break e continue... 31 7 Funções... 32 7.1 Variáveis em funções... 32 7.2 Funções sem parâmetros... 33 7.3 Funções que retornam valores... 34 7.4 Funções Intrínsecas... 35 7.5 Funções Matemáticas... 36 7.6 Funções de manipulação de Strings... 37 8 Classes, Objetos e Arrays em Javascript... 38 8.1 Criando Objetos... 38 8.2 Criando Funções para Classes... 39 8.3 Criando Atributos Dinamicamente... 40 8.4 Manipulando Arrays... 41 2 de 61
8.5 Objeto para Manipulação de Datas... 43 9 Interface com o Usuário... 45 9.1 Objeto Input: Text... 45 9.2 Objeto Input Password... 46 9.3 Objeto Input: Hidden... 46 9.4 Objeto Input: Checkbox... 47 9.5 Objeto Input: Radio... 48 9.6 Objeto Input: Button... 49 9.7 Objeto Input: Reset... 49 9.8 Objeto Input: Submit... 50 9.9 Objeto TextArea... 51 9.10 Objeto Select... 52 9.11 Objeto Link... 54 10 Eventos... 55 11 Focando um Objeto... 56 12 Classe Timer... 58 13 Abrindo Novas Janelas... 60 13.1 Abrindo a Janela... 60 13.2 Abrindo um Documento... 61 13.3 Escrevendo no Documento... 61 13.4 Fechando a Janela... 61 13.5 Fechando o Documento... 61 13.6 Propriedades de um Documento... 61 3 de 61
2 Introdução Este texto se destina a aqueles que desejam aprender o uso de JavaScript. O JavaScript é uma linguagem criada pela Netscape para introduzir capacidade de processamento dentro da linguagem HTML. Por ser baseado em Java é, em muitos aspectos, uma boa linguagem para o aprendizado inicial de Java. 2.1 Pré-requisitos Nenhum pré-requisito é necessário para acompanhar este texto. É recomendável que o leitor tenha algum conhecimento de HTML. Noções básicas de CGI, particularmente sobre a construção de formulários, e conhecimentos de Programação Orientada a Objetos podem ser habilidades adicionais desejáveis para o melhor proveito deste material. 2.2 Como funciona um script em JavaScript Um script em JavaScript é um programa que pode ser introduzido em uma página HTML, o que permite que seja executado através da Internet. Um script pode ser configurado para ser executado do lado do servidor (no provedor onde a página está neste caso, é dito server-side script ) ou do lado do cliente (no programa navegador browser de quem está acessando a página que contém o script neste caso, é dito client-side script ). Neste texto, serão abordados, apenas, os conceitos ligados a scripts do lado do cliente. Nestes scripts, o programa é transmitido através da Internet, do provedor onde está armazenado para o programa de navegação (por exemplo, o Netscape Communicator ou Microsoft Internet Explorer) do usuário e executado por este programa. Scripts são interpretados, ou seja, são executados diretamente na linguagem em que são escritos (diferente do que ocorre com as linguagens compiladas, em que o programa é traduzido para a linguagem nativa do processador onde será executado linguagem de máquina). Por esta razão, necessita-se apenas de um editor de texto e de um programa de navegação para se aprender e desenvolver programas escritos em JavaScript (como o Notepad e o Internet Explorer existentes em qualquer computador com o Microsoft Windows instalado). Programas são produzidos pela criação de variáveis (definição dos dados) e pela aplicação de comandos sobre elas (produção do algoritmo). Comandos podem ser agrupados estruturados para formar blocos de comandos denominados de funções. A linguagem oferece um conjunto de funções já elaboradas (biblioteca) que simplifica a tarefa de quem está escrevendo programas. 4 de 61
2.3 Um script simples em JavaScript Abaixo, é exibido um script em JavaScript bastante simples: <HTML> <BODY> <SCRIPT LANGUAGE=JAVASCRIPT> /* Primeiro programa em JavaScript. Autor: Rodolfo Goya */ document.write( "Alo Mundo" ); // Escreve alo mundo. </SCRIPT> </BODY> </HTML> Para poder-se descrever o que cada comando faz, vamos numerar as linhas (em um script em JavaScript não se deve numerar as linhas). 1 <HTML> 2 <BODY> 3 <SCRIPT LANGUAGE=JAVASCRIPT> 4 5 /* Primeiro programa em JavaScript. 6 Autor: Rodolfo Goya */ 7 8 document.write( "Alo Mundo" ); // Escreve alo mundo. 9 10 </SCRIPT> 11 </BODY> 12 </HTML> Todo script em JavaScript é um programa inserido em uma página HTML. Por isso, existem os comandos das linhas 1, 2, 11 e 12. O comando <HTML> (linha 1) diz que o arquivo tem conteúdo em HTML e marca o início dos comandos. O comando </HTML> (linha 12) delimita o final dos comandos HTML. Um arquivo HTML tem duas seções, uma denominada HEAD, delimitada entre os comandos <HEAD> e </HEAD> (inexistentes neste exemplo), e uma denominada BODY, delimitada entre os comandos <BODY> (linha 2) e </BODY> (linha 11). O Script deste exemplo está todo na seção BODY. 5 de 61
Um script em JavaScript fica delimitado entre os comandos <SCRIPT> (linha 3) e </SCRIPT> (linha 10). A especificação LANGUAGE=JAVASCRIPT (linha 10) diz qual a linguagem usada no script. Este programa só tem um comando que faz algo, no caso o comando document.write( "Alo Mundo" ); (linha 8) que imprime a mensagem: Alo Mundo Na tela do programa navegador (note-se não foram impressas as aspas). O comando usa a função write do objeto document. A função recebe parâmetros especificados entre parênteses no caso uma cadeia de caracteres entre aspas. Estes conceitos serão abordados detalhadamente mais adiante. O comando é delimitado com um ponto e vírgula no final (;). Este delimitador é opcional em JavaScript, porém é recomendável o seu uso para melhorar a clareza do programa. O programa também contém alguns comentários, ou seja, textos que são ignorados pelo computador inseridos para tornar mais claro para o programador o significado dos comandos usados no programa. Pode-se inserir um comentário de duas maneiras: a) // Linha de comentário até o final da linha. ou b) /* Delimitadores para início de comentário. */ Delimitadores para final de comentário. Pelo primeiro modo, tudo entre o // e o final da linha é ignorado pelo computador. Um exemplo deste tipo de comentário está na linha 8 do programa. No segundo modo, tudo entre o /* e o */ é ignorado pelo computador. Um exemplo deste tipo de comentário está nas linhas 5 e 6 do programa. Arquivos em HTML e JavaScript normalmente não exigem que se coloque um comando em cada linha. Contudo, colocar um comando por linha e incluir linhas em branco separando áreas do programa aumentam bastante a clareza do programa. O programa abaixo faz a mesma coisa que o primeiro exemplo: <HTML><BODY><SCRIPT LANGUAGE=JAVASCRIPT> document.write( "Alo Mundo" ); </SCRIPT></BODY> </HTML> 6 de 61
3 Tipos de Dados Básicos 3.1 Números (Number) Dados de tipo Number se destinam a armazenar valores numéricos. 3.2 String Dados de tipo String se destinam a armazenar cadeias de caracteres (letras maiúsculas e minúsculas, dígitos numéricos, símbolos, sinais de pontuação ou mesmo espaços em branco). Nome Universidade de São Paulo Símbolos como:!@#$% e dígitos como: 13579 podem estar em strings Os delimitadores naturais para strings são " ou '. Caso seja necessária a utilização destes caracteres como parte do string, deve-se utilizar o caracter \ precedendo " ou ', ou seja \ codifica e \ codifica (também deve-se usar \\ para o próprio caracter \). Para colocar \ em um texto deve-se usar o caracter \\ seguido de \. Coloque o arquivo no diretório C:\\tmp 3.3 Caracteres de Controle Especiais \b backspace \n próxima linha (new line) \r retorno de carro (carriage return) \t character de tabulação (tab) \ caracter \ caracter \\ caracter \ 3.4 Boolean Dados de tipo boolean se destinam a armazenar valores que são verdadeiro (true) ou falso (false). 7 de 61
3.5 Criando Variáveis Uma variável pode ser definida com o uso do comando var. var minhavariavel; Cria uma variável de nome minhavariavel. Pode-se inicializar o valor de uma variável no momento de sua criação. Para isso, basta acrescentar o comando = seguido do valor desejado para a variável. Por exemplo: var minhavariavel = "Teste"; Cria uma variável de nome minhavariavel contendo o string Teste. Variáveis podem ser criadas automaticamente, pela simples associação de valores a mesma. Por exemplo, o comando: novavariavel = "Jose"; Cria uma variável de nome novavariavel contendo o string Jose. O tipo de dado armazenado em variáveis pode ser alterado dinamicamente. Por exemplo, os comandos: var novavariavel = "Jose"; novavariavel = 1; Criam uma variável de nome novavariavel contendo o string Jose que depois passa a conter o número 1 (ou seja muda de tipo String para tipo Number). 8 de 61
4 Comandos 4.1 Operadores Aritméticos São operadores a serem utilizados em cálculos aritméticos. Os operadores estão relacionados abaixo: + adição de valores. - subtração de valores. * multiplicação de valores. / divisão de valores. % resto de divisão. 29 + 10 resultará em 39 29-10 resultará em 19 29 * 10 resultará em 290 29 / 10 resultará em 2.9 29 % 10 resultará em 9 4.2 Atribuição O operador = pode ser utilizado para designar valores para variáveis. a = 29; // colocará 29 na variável a. x = a 10; // colocará 19 na variável x. 4.3 Atribuição Aritmética O operador = pode combinado com os operadores aritméticos pra produzir os operadores relacionados abaixo: x += y é o mesmo que x = x + y x -= y é o mesmo que x = x - y x *= y é o mesmo que x = x * y x /= y é o mesmo que x = x / y x %= y é o mesmo que x = x % y a = 29; // colocará 29 na variável a. a += 20; // colocará 49 na variável a. a -= 10; // colocará 39 na variável a. a *= 2; // colocará 78 na variável a. a /= 3; // colocará 26 na variável a. a %= 7; // colocará 5 na variável a. 9 de 61
4.4 Incremento e decremento Pode-se somar um (incrementar) ou subtrair um (decrementar) de uma variável através dos operadores ++ e --.Quando o operador é colocado à esquerda da variável (pré) a operação de incremento/decremento é feita antes de todas as demais na expressão. Quando o operador é colocado à direita da variável (pós) a operação de incremento/decremento é feita depois de todas as demais na expressão. x++ é o mesmo que x = x + 1 (pós-incremento). ++x é o mesmo que x = x + 1 (pré-incremento). x-- é o mesmo que x = x - 1 (pós-decremento). --x é o mesmo que x = x - 1 (pré-decremento). a = 29; // colocará 29 na variável a. a++; // colocará 30 na variável a. a--; // colocará 29 na variável a. b = ++a; // colocará 31 na variável a e 31 na variável b. b = a--; // colocará 30 na variável a e 31 na variável b. b = --a; // colocará 29 na variável a e 29 na variável b. As operações de incremento ou decremento só se aplicam a variáveis. Não faz sentido aplicarem-se a valores ou expressões: 29++; // Não faz sentido! ( a + b )++;// Não faz sentido! 4.5 Operador para troca de sinal Para inverter sinal de um valor numérico, usa-se o operador. a = 29; // colocará 29 na variável a. a = -a; // colocará -29 na variável a. 10 de 61
4.6 Operadores + e += aplicados a String O operador + pode também ser usado para concatenação de string. a = "Bom "; // colocará "Bom " na variável a. b = "Dia"; // colocará "Dia" na variável b. c = a + b; // colocará "Bom Dia" na variável c. Quando se usa o operador + com variáveis de tipos diferentes que incluem strings, tais variáveis são convertidas para strings e concatenadas. a = "abc "; // colocará "abc " na variável a. b = 4; // colocará o valor 4 na variável b. c = a + b; // colocará "abc 4" na variável c. O operador += concatena um string a outro string já existente em uma variável. Ou seja, x += y é o mesmo que x = x + y. a = "Bom "; // colocará "Bom " na variável a. a += "Dia"; // colocará "Bom Dia" na variável a. 11 de 61
4.7 Operadores Relacionais São operadores que expressam relação de ordem entre valores numéricos, resultando em valores verdadeiro ou falso. Os operadores estão relacionados abaixo: == Igual === Igualdade de valor e de tipo!= Diferente > Maior >= Maior ou Igual < Menor <= Menor ou Igual a = 5 > 3; // colocará true na variável a. a = 5 < 3; // colocará false na variável a. a = 5 >= 3; // colocará true na variável a. a = 5 <= 3; // colocará false na variável a. a = 5 == 3; // colocará false na variável a. a = 5!= 3; // colocará true na variável a. a = 5 >= 5; // colocará true na variável a. a = 5 <= 5; // colocará true na variável a. a = 5 == 5; // colocará true na variável a. a = 5!= 5; // colocará false na variável a. No caso do operador ===, uma comparação só resulta em valores verdadeiro se as variáveis comparadas tem o mesmo valor e são do mesmo tipo. a = ( 1 == "1" ); // colocará true na variável a. a = ( 1 === "1" ); // colocará false na variável a. Esta diferença ocorre porque pode haver conversão de tipos no momento de se comparar dados de tipos diferentes. 12 de 61
4.8 Operadores Lógicos São operadores que lidam com valores de tipo boolean (verdadeiro ou falso) e que resultam em valores boolean (verdadeiro ou falso). Os operadores estão relacionados abaixo: && Operação Lógica E Operação Lógica Ou A operação lógica E entre dois valores só resulta verdadeira se os dois valores forem verdadeiros. Caso contrário, o resultado é falso. A operação lógica Ou entre dois valores resulta verdadeira se pelo menos um dos dois valores forem verdadeiros. Caso contrário, o resultado é falso. a = true && true; // colocará true na variável a. b = true && false; // colocará false na variável b. c = false && true; // colocará false na variável c. d = false && false; // colocará false na variável d. a = true true; // colocará true na variável a. b = true false; // colocará true na variável b. c = false true; // colocará true na variável c. d = false false; // colocará false na variável d. 13 de 61
4.9 Precedência de operadores A precedência de operadores é a regra que define qual a ordem com que as operações são realizadas em uma expressão que reuna diversos operadores. Por exemplo, a expressão abaixo: x = 3 + y * 4; Possui dois operadores: + e *. A precedência permite que se resolva qual será avaliado primeiro: se primeiro fazemos a soma e em seguida multiplicamos o resultado por 4 ou se fazemos primeiro o produto e depois somamos 3 ao resultado. Na expressão em questão, a multiplicação será feita primeiro e depois a soma. Caso se quisesse fazer primeiro a soma deve-se usados os parênteses: x = ( 3 + y ) * 4; Deste modo, a ordem de precedência dos operadores na linguagem JavaScript está tabelada abaixo: Operador Associatividade () Esquerda para direita. ++ -- (pré) Esquerda para direita. - (unário) Esquerda para direita. * / % Esquerda para direita. + - (binário) Esquerda para direita. > >= < <= Direita para esquerda. ==!= === Direita para esquerda. && Direita para esquerda. Direita para esquerda. += -= *= /= %= Direita para esquerda. = Direita para esquerda. ++ -- (pós) Esquerda para direita. 14 de 61
5 Entrada/Saída em JavaScript 5.1 Função write A linguagem JavaScript permite que o programador escreva dentro de uma página (documento), através da função write. As linhas escritas desta forma, podem conter textos, expressões JavaScript e comandos HTML. As linhas escritas através desta função aparecerão no ponto da tela onde o comando for inserido. <script> valor = 30; document.write( "Minha primeira linha." ); document.write( "Nesta linha aparecerá o resultado de: " + ( 10 * 10 + valor) ); </script> A execução deste script resultará na saída: Minha primeira linha.nesta linha aparecerá o resultado de: 150 Pode-se notar que, apesar se usar dois comandos para a escrita, a saída foi feita em apenas uma linha. Isto ocorre porque a função write não insere mudança de linha. Contudo, comandos HTML podem ser inseridos na função write. Por exemplo, (usando os comandos HTML <p>e </p>): <script> valor = 30; document.write( "<p>minha primeira linha</p>" ); document.write( "<p>nesta linha aparecerá o resultado de: " + (10 * 10 + valor) + "</p>" ); </script> Cuja execução resultará na saída: Minha primeira linha. Nesta linha aparecerá o resultado de: 150 Ou, por exemplo, (usando o comando HTML <br>): <script> valor = 30; document.write( "<br>minha primeira linha" ); document.write( "<br>nesta linha aparecerá o resultado de : " + (10 * 10 + valor) ); </script> Cuja execução resultará na saída: Minha primeira linha. Nesta linha aparecerá o resultado de: 150 15 de 61
5.2 Mensagens Existem três formas de comunicação com o usuário através de mensagens. 5.2.1 Alert O comando alert() coloca uma janela com uma mensagem na tela e aguarda que o usuário pressione o botão para prosseguir. Formato do comando: alert( mensagem ) Onde: mensagem: String contendo a mensagem a ser exibida. Mensagens de várias linhas podem ser obtidas com o uso de \n no String. alert( "Certifique-se de que as informações estão corretas" ); Figura 1 Mensagem produzida pelo comando alert(). 16 de 61
5.2.2 Confirm O comando confirm() coloca uma janela com uma mensagem na tela e aguarda que o usuário pressione um botão de confirmação para prosseguir. A confirmação pode ser OK ou Cancelar. Formato do comando: confirm( mensagem ) Onde: mensagem: String contendo a mensagem a ser exibida. Mensagens de várias linhas podem ser obtidas com o uso de \n no String. teste = confirm( "Algo está errado...devo continuar??" ); Figura 2 Mensagem produzida pelo comando confirm(). Neste caso, a variável teste, de tipo boolean, receberá o valor true, se o usuário teclar o botão OK e false se teclar o botão Cancelar. 17 de 61
5.2.3 Prompt O comando prompt() coloca uma janela com uma mensagem na tela e aguarda que o usuário pressione um botão para prosseguir. A confirmação pode ser OK ou Cancelar. Formato do comando: receptor = prompt ( mensagem, texto ) Onde: receptor: é uma variável de tipo String que vai receber a informação digitada. mensagem: é a mensagem que vai aparecer na janela. texto: é um texto que aparecerá na linha de digitação do usuário. entrada = prompt( "Qual seu time favorito?", "São Paulo" ); Figura 3 Mensagem produzida pelo comando prompt(). Neste caso, a variável entrada, de tipo String, receberá o valor São Paulo (ou outro String que o usuário digite), se o usuário teclar o botão OK e null se teclar o botão Cancelar. 18 de 61
6 Comandos de Controle São comandos usados para controlar a execução dos comandos do programa, seja condicionando sua execução ao atendimento de uma determinada condição, seja permitindo a formação de estruturas para repetição de comandos. Os comandos de controle são: if if-else switch-case atribuição condicional for while do-while 19 de 61
6.1 Comando if O comando if executa um comando se uma condição dada for verdadeira (true). A. sintaxe do comando if é a seguinte: if( condição ) comando; O comando é executado se a condição for verdadeira. Note que não se usa ; entre o if e o comando (o ; delimita o final do comando. Se houvesse um ; seria interpretado como um comando vazio que não faz nada condicionado ao if). if( idade < 18 ) categoria = "Menor"; Caso se queira condicionar a execução de mais de um comando à condição, deve-se agrupar os comandos com o uso de chaves: if( condição ) { comando1; comando2; comando3; } Os comandos comando1, comando2 e comando3 são executados se a condição for verdadeira. Se não for, nenhum dos comandos é executado. 20 de 61
6.2 Comando if-else O comando if-else executa um comando se uma condição dada for verdadeira (true). Caso a condição seja false um outro comando é executado A. sintaxe do comando if é a seguinte: if( condição ) comando1; else comando2; O comando1 é executado se a condição for verdadeira. O comando2 é executado se a condição for falsa (Note que não se usa ; entre o else e o comando2). if( idade < 18 ) categoria = "Menor"; else categoria = "Maior"; Caso se queira condicionar a execução de mais de um comando à condição, deve-se agrupar os comandos com o uso de chaves: if( condição ) { comando1; comando2; comando3; } else { comando4; comando5; comando6; } Os comandos comando1, comando2 e comando3 são executados se a condição for verdadeira. Se não for, os comandos comando4, comando5 e comando6 são executados. Também são possíveis as construções abaixo: if( condição ) e if( condição ) { comando1; comando1; else comando2; { comando3; comando2; } comando3; else comando4; comando4; } 21 de 61
6.3 Comando switch-case Nos comandos de controle if e if-else a decisão tomada permitia a escolha dentre duas possíveis alternativas. Com o comando de controle switch pode-se escolher um comando a ser executado dentre diversos possíveis valores de uma expressão. A estrutura de um comando de controle switch é descrita abaixo: switch( variável ) { case x1: comando_x1; break; case x2: comando_x2; break; case x3: comando_x3; break; case x4: comando_x4; break; default: comando_x5; } O comando switch mostrado é equivalente ao comando abaixo: if( variável == x1 ) comando_x1; else if( variável == x2 ) comando_x2; else if( variável == x3 ) comando_x3; else if( variável == x4 ) comando_x4; else comando_x5; Se a variável for igual a x1, então comando_x1 é executado. Se a variável for igual a x2, então comando_x2 é executado. Se a variável for igual a x3, então comando_x3 é executado. Se a variável for igual a x4, então comando_x4 é executado. Se a variável for diferente de todos eles, então comando_x5 é executado. Não há limites para o número de cases que podem ser usados em um comando switch. Os valores x1, x2, x3 e x4 usados no comando são constantes, normalmente números inteiros ou Strings. Caso haja valores iguais em dois ou mais diferentes cases será executado o comando ligado ao primeiro case. 22 de 61
Um case em particular recebe o nome de default e é colocado no final do comando switch. O comando associado ao default é executado sempre que nenhum case corresponda ao valor associado à expressão do switch. Um comando adicional associado ao comando de switch é o comando break que determina o término da seqüência de comandos associados ao case. Assim, na ausência de um break, a execução de um case pode prosseguir no case seguinte. switch( letra ) { case 'a': case 'e': case 'i': case 'o': case 'u': document.write( " A letra é uma vogal.<br>" ); break; default: document.write( "A letra é uma consoante. <BR>" ); } 23 de 61
6.4 Atribuição Condicional O operador de atribuição condicional é um modo abreviado para um comando if-else com uso para comando de atribuição. A estrutura para o operador condicional é descrita abaixo: variavel = ( exp1 )? exp2 : exp3; Se a expressão exp1 for verdadeira, a variável recebe o valor da expressão exp2. Se for falso da expressão exp3. A expressão acima é equivalente ao comando abaixo: if( exp1 ) variavel = exp2; else variavel = exp3; Por exemplo, o comando abaixo atribui à variável x o valor absoluto da variável y: x = ( y > 0 )? y : -y; 24 de 61
6.5 Comando for Um loop do tipo for apresenta a estrutura abaixo: for( exp1; exp2; exp3 ) comando; A expressão exp1 é uma inicialização. É executada apenas uma vez, exatamente no momento em que se vai iniciar o processamento do loop. A segunda expressão (exp2) é uma condição de teste. É avaliada antes de cada possível passagem do loop. Quando esta expressão resultar em valor falso o loop é terminado. A terceira expressão é avaliada ao final de cada loop. A cada passagem do loop o comando é executado uma vez. O loop for é próprio para quando se deseja executar o loop um número determinado de vezes. <script> var n; for( n = 0; n < 10; n++ ) document.write( " Impressão número " + n + "<BR>" ); </script> Cuja execução resultará na saída: Impressão número 0 Impressão número 1 Impressão número 2 Impressão número 3 Impressão número 4 Impressão número 5 Impressão número 6 Impressão número 7 Impressão número 8 Impressão número 9 25 de 61
Caso seja executado mais de um comando dentro do loop, estes ficam delimitados por chaves {}: <script> var i, ano; var atual, taxa; document.write( "Estima a populacao nos proximos anos..<br>" ); atual = 170000000; // 170 milhões. taxa = 1.02; // 2% ao ano. ano = 2000; for( i = 1; i <= 10; i++ ) // repete 10 vezes. { ano++; atual *= taxa; document.write( "ano " + ano + " populacao= " + atual + "<BR>" ); } </script> Cuja execução resultará na saída: Estima a populacao nos proximos anos.. ano 2001 populacao= 173400000 ano 2002 populacao= 176868000 ano 2003 populacao= 180405360 ano 2004 populacao= 184013467 ano 2005 populacao= 187693736 ano 2006 populacao= 191447611 ano 2007 populacao= 195276563 ano 2008 populacao= 199182094 ano 2009 populacao= 203165736 ano 2010 populacao= 207229051 Os loops for podem ser aninhados: <script> var i, j; document.write("tabuada do 1 ao 10:<BR>"); for( i = 1; i <= 10; i++ ) { for( j = 1; j <= 10; j++ ) document.write(" " + i * j ); document.write("<br>"); } </script> 26 de 61
Cuja execução resultará na saída: Tabuada do 1 ao 10: 1 2 3 4 5 6 7 8 9 10 2 4 6 8 10 12 14 16 18 20 3 6 9 12 15 18 21 24 27 30 4 8 12 16 20 24 28 32 36 40 5 10 15 20 25 30 35 40 45 50 6 12 18 24 30 36 42 48 54 60 7 14 21 28 35 42 49 56 63 70 8 16 24 32 40 48 56 64 72 80 9 18 27 36 45 54 63 72 81 90 10 20 30 40 50 60 70 80 90 100 O loop for é muito flexível. Pode-se decrementar a contagem ao invés de incrementar: <script> var n; document.write( "Contagem regressiva...<br>" ); for( n = 10; n > 0; n-- ) document.write( n + " segundos<br>" ); </script> Cuja execução resultará na saída: Contagem regressiva... 10 segundos 9 segundos 8 segundos 7 segundos 6 segundos 5 segundos 4 segundos 3 segundos 2 segundos 1 segundos 27 de 61
Pode-se ter a contagem em qualquer passo: <script> var n; for( n = 10; n < 230; n = n + 15 ) document.write( n + "<BR>" ); </script> Cuja execução resultará na saída: 10 25 40 55 70 85 100 115 130 145 160 175 190 205 220 28 de 61
6.6 Comando while Os loops do tipo while apresentam a forma abaixo: while( expresão ) comando; No comando while a expressão é avaliada ao início do loop. Se esta resultar verdadeira, então o comando é efetuado e, então, a expressão é reavaliada reiterando o processo que só terminará quando a expressão for avaliada e se tornar falsa. O loop while é próprio para quando se deseja executar o loop um número indeterminado à priori de vezes. <script> var entrada; var n; n = 1; while( ( entrada = prompt( "Tecle uma frase.", "" ) )!= null ) { document.write("frase " + n + ": " + entrada ); document.write(" (" + entrada.length + " Caracteres. )<br>" ); n++; } </script> 29 de 61
6.7 Comando do-while Os loops do tipo do-while apresentam a forma abaixo: do comando; while (expresão); A principal diferença entre um loop while e um do-while é que, no segundo caso, o comando é sempre executado pelo menos uma vez independentemente da possibilidade da expressão ser avaliada como falsa já ao início do loop. O loop do tipo do-while é próprio para quando se deseja executar o loop um número indeterminado de vezes porém pelo menos uma vez. <script> var entrada; var n; n = 1; do { entrada = prompt( "Tecle uma frase.", "" ); document.write("frase " + n + ": " + entrada ); document.write(" (" + entrada.length + " Caracteres. )<br>" ); n++; } while( entrada!= null ); </script> 30 de 61
6.8 Comandos break e continue Nos comandos for, while e do-while a diretiva break pode ser utilizada para interromper a condição principal e sair do loop. Da mesma forma, a diretiva continue interrompe uma ação (se determinada condição ocorrer) mas volta para o início do loop. 31 de 61
7 Funções Uma função é um conjunto de comandos, que podem ser executadas quando a função for chamada. Sua sintaxe é a seguinte: function nomedafunção( Parâmetros ) { Comandos } function imprimebarra( n ) // Imprime n caracteres =. { var i; } for( i = 0; i < n; i++ ) document.write( = ); Para chamar esta função (supondo o script abaixo na mesma página que a da função), devemos usar o nome da função para que a função seja acionada. var pontos = 10; document.write( "<BR>Alice\t" ); imprimebarra( pontos ); document.write( "<BR>Beatriz\t" ); imprimebarra( pontos + 5 ); document.write( "<BR>Carol\t" ); imprimebarra( 12 ); Resultam na saída descrita abaixo: Alice ========== Beatriz =============== Carol ============ É importante notar que não existe relação entre o nome da variável passada como parâmetro e a variável de recepção na função. Apenas o valor conteúdo é passado para a função. 7.1 Variáveis em funções Variáveis podem ser de dois tipos: locais ou globais.variáveis criadas dentro de uma função são locais e referenciáveis apenas dentro da função. Variáveis criadas fora das funções são globais e podem ser referenciadas em qualquer parte do documento (desta forma, variáveis a serem referenciadas por diferentes funções, devem ser definidas como globais). Em uma função, pode-se definir variáveis locais com o mesmo nome de variáveis globais (a variável local é criada, dentro da função, com o comando var). var x = 0; // Variável global. 32 de 61
function funcaoqualquer() { var x; // Variável local. } x = 1; // A variável afetada é a local (a criada dentro da função). 7.2 Funções sem parâmetros Uma função não precisa, necessariamente, receber parâmetros. A função abaixo não tem: function imprimeseparacao() { var i; for( i = 0; i < 80; i++ ) document.write( '-' ); } document.write( "<br>" ); Contudo, sua chamada exige o uso dos parênteses: imprimeseparacao(); 33 de 61
7.3 Funções que retornam valores Uma função pode retornar um valor (que pode ser de qualquer tipo que possa ser armazenado em uma variável). O valor retornado pela função deve ser enviado através do comando return. A função abaixo exemplifica a idéia: function levogal() { var c; var msg; msg = "Tecle uma vogal"; do { c = prompt( msg, "" ); if( c!= 'a' && c!= 'e' && c!= 'i' && c!= 'o' && c!= 'u' ) msg = "Você não teclou uma vogal.\ntecle uma vogal"; } while( c!= 'a' && c!= 'e' && c!= 'i' && c!= 'o' && c!= 'u' ); } return c; // Comando que faz com que a função retorne valor. Na chamada, é necessário que se coloque o dado retornado em uma variável: var x; x = levogal(); document.write("vogal teclada: " + x + "<br>" ); 34 de 61
7.4 Funções Intrínsecas São funções embutidas na própria linguagem. Sua sintaxe é a seguinte: variavel = função( Parâmetros ) Abaixo, são apresentadas algumas das funções intrínsecas disponíveis. Função eval() parseint() parsefloat() Descrição Calcula o conteúdo da string. Transforma string em inteiro. Transforma string em número com ponto flutuante. Result = eval( "( 10 * 20 ) + 2-8" ); Result = parseint( "1234" ); No primeiro exemplo, Result recebe o valor 194. No segundo, 1234. 35 de 61
7.5 Funções Matemáticas Função Retorna Math.abs( número ) Valor absoluto do número (ponto flutuante). Math.abs( número ) Valor absoluto do número. Math.acos( número ) Arco cosseno de um número (em radianos). Math.asin( número ) Arco seno de um número (em radianos). Math.atan( número ) Arco tangente de um número (em radianos). Math.ceil( número ) Próximo valor inteiro maior que o número. Math.cos( número ) Cosseno de um número (ângulo em radianos). Math.exp( número ) Cálculo do exponencial do número. Math.floor( número ) Próximo valor inteiro menor que o número. Math.log( número ) Logarítmo de um número. Math.max( número1, número2 ) Maior número dos dois fornecidos. Math.min( número1, número2 ) Menor número dos dois fornecidos. Math.pow( base, expoente ) Cálculo do exponencial. Math.random() Número aleatório entre 0 e 1. Math.round( número ) Valor inteiro, arredondado, do número. Math.sin( número ) Seno de um número (ângulo em radianos) Math.sqrt( número ) Raiz quadrada do número. Math.tan( número ) Tangente de um número (ângulo em radianos). Math.SQRT2 Raiz quadrada de 2 (2 1/2 : aprox. 1,4142135624). Math.SQRT_2 Raiz quadrada de ½ (2-1/2 : aprox. 0,7071067812). Math.E Base dos logarítmos naturais (e: aprox. 2,7182818285). Math.PI Valor de PI (π: aprox. 3,1415926536). Math.LN2 Logarítmo neperiano de 2 ( ln(2): aprox. 0,6931471806). Math.LOG2E Logarítmo de e na base 2 (log 2 e: aprox. 1,4426950409). Math.LN10 Logarítmo neperiano de 10 (ln(10): aprox. 2,3025850930). Math.LOG10E Logarítmo de e na base 10 (log 10 (e): aprox. 0,4342944819). 36 de 61
7.6 Funções de manipulação de Strings A linguagem JavaScript é bastante poderosa no manuseio de Strings, fornecendo ao programador uma grande flexibilidade para manuseio. Abaixo, são apresentadas as funções disponíveis para manuseio de strings. Função Descrição String.length Tamanho da string (quantidade de bytes). String.charAt( posição ) Caracter na posição especificada (inicia em 0). String.indexOf( String ) Número da posição onde começa a primeira string. String.lastindexOf( String ) Número da posição onde começa a última string. String.substring( index1, index2 ) Conteúdo da string que corresponde ao intervalo especificado. Começando no caracter posicionado em index1 e terminando no caracter imediatamente anterior ao valor especificado em index2. String.toUpperCase() Transforma o conteúdo da string para maiúsculo. String.toLowerCase() Transforma o conteúdo da string para minúsculo. Escape( String ) Valor ASCII da string (vem precedido de %). Unscape( String ) Caracter a partir de um valor ASCII (precedido de %). todo = "JavaScript"; parte = todo.substring( 0, 4 ); A variável Parte receberá a string Java. 37 de 61
8 Classes, Objetos e Arrays em Javascript Pode-se criar classes em JavaScript com a mesma sintaxe para criar funções. Por exemplo, pode-se criar uma classe para pessoas como no exemplo abaixo: function Pessoa( nome, idade, sexo ) { this.nome = nome; this.idade = idade; this.sexo = sexo; } Neste caso, a classe criada tem, como atributos, nome, idade e sexo. Os atributos são definidos em JavaScript pelo uso da palavra reservada this. 8.1 Criando Objetos Através do operador new pode-se criar novas instâncias de objetos de classes já existentes, mudando o seu conteúdo, porém, mantendo suas propriedades. A sintaxe geral é a seguinte: NovoObjeto = new ObjetoExistente( parâmetros ) professor = new Pessoa( "Goya", 38, M ); presidente = new Pessoa( "Cardoso", 68, M ); De modo que professor é um objeto da classe Pessoa, com os atributos nome, idade e sexo correspondentes a, respectivamente, Goya, 38, M e presidente também é um objeto da classe Pessoa, com os atributos nome, idade e sexo correspondentes a, respectivamente, Cardoso, 68, M. Os atributos de um objeto podem ser acessados e modificados usando-se o nome do objeto junto do atributo (separados por um. ), do seguinte modo: document.write( presidente.nome ); //. entre presidente e nome. professor.idade++; //. entre professor e idade. No primeiro caso, foi impresso na tela o String Cardoso. No segundo caso, o atributo idade foi alterado de 38 para 39. 38 de 61
8.2 Criando Funções para Classes Funções podem ser ligadas a classes. Para tanto, pode-se definir a função e associá-la a classe do mesmo modo que se faz com um atributo. O modo como isto pode ser feito é ilustrado abaixo: function exibedados() { return "Nome: " + nome + "Idade: " + idade + "Sexo: " + sexo; } function Pessoa( nome, idade, sexo ) { this.nome = nome; this.idade = idade; this.sexo = sexo; this.exibedados = exibedados(); // Inclui a função na classe. } Os parênteses são importantes para definir exibedados como uma função (e não um atributo) mesmo que a função a ser criada e chamada não tenha parâmetros.pode-se criar objetos de classe pessoa e usar a função associada a esta classe. Funções podem ser ligadas a classes. O modo como isto pode ser feito é ilustrado abaixo: var p; var s; p = new Pessoa( "Goya", 38, M ); s = p.exibedados(); 39 de 61
8.3 Criando Atributos Dinamicamente Novos atributos para um objeto podem ser criados na medida que o programa é executado. O modo como isto pode ser feito é ilustrado abaixo: function exibedados() { return "Nome: " + nome + "Idade: " + idade + "Sexo: " + sexo; } function Pessoa( nome, idade, sexo ) { this.nome = nome; this.idade = idade; this.sexo = sexo; this.exibedados = exibedados(); // Inclui a função na classe. } var p; p = new Pessoa( "Goya", 38, M ); p.altura = 1.76; Neste exemplo, o objeto p adquiriu o atributo adicional altura. Somente este objeto foi alterado. Todos os demais objetos da classe Pessoa permanecem inalterados. Pode-se incluir um novo atributo para todos os objetos da classe: Pessoa.altura = 1.7; Neste exemplo, todos os objetos da classe Pessoa passam a ter um novo atributo (altura) e todos eles recebem o mesmo valor (1.7). Por permitir definir o conjunto de atributos que a classe tem dinamicamente, pode-se tornar problemático resolver qual objeto tem quais atributos. A linguagem oferece uma construção que permite percorrer todos os atributos do objeto: for-in for( i in p ) document.write( "Atributo: " + i + valor: " + p.i ) + "<BR>" ); Neste exemplo, a variável i recebe todos os valores possíveis de atributos que o objeto p tenha. 40 de 61
8.4 Manipulando Arrays Arrays são conjuntos de variáveis do mesmo tipo e chamados coletivamente de um mesmo nome. A diferenciação entre os elementos de um array é feita através de um índice. Normalmente o primeiro elemento do array tem índice 0. Em JavaScript não há um tipo de dado ou objeto para manipular arrays. Por isso, para trabalhar com arrays, é necessário criar um objeto com a propriedade de criação de um array. No exemplo abaixo, é criado um objeto tipo array de tamanho definido por uma variável e limpando o conteúdo inicial das variáveis cada vez que uma nova instância seja criada a partir dele. function CriaArray( n ) { this.length = n; for( var i = 0 ; i < n; i++ ) this[i] = ""; } Agora, pode-se criar arrays pela criação de novas instâncias do objeto da classe CriaArray. 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"; atividade = new CriaArray( 5 ); atividade[0] = "Analista"; atividade[1] = "Programador"; atividade[2] = "Operador"; atividade[3] = "Conferente"; atividade[4] = "Digitador"; Agora pode-se obter os dados diretamente dos arrays. diasemana = nomedia[4]; ocupacao = atividade[1]; Neste caso, a variável diasemana passaria a conter Quinta e ocupacao conteria Programador. 41 de 61
Pode-se criar arrays de objetos: function Pessoa( nome, idade, sexo ) { this.nome = nome; this.idade = idade; this.sexo = sexo; } turma =new Pessoa[]; turma[0] = new Pessoa( "Alice", 5, F ); turma[1] = new Pessoa( "Beatriz", 7, F ); turma[2] = new Pessoa( "Carol", 5, F ); Assim, pode-se obter o nome do elemento número 2 da turma, cuja resposta seria Carol, da seguinte forma: nome = turma[2].nome; 42 de 61
8.5 Objeto para Manipulação de Datas Existe uma função para que se possa obter a data e a hora. É a função Date(). Esta função devolve data e hora no formato: Dia da semana, Nome do mês, Dia do mês, Hora:Minuto:Segundo e Ano document.write( Date() ); Que resulta na saída (o resultado é sempre em inglês): Fri Sep 08 16:58:02 2000 Para se obter os dados separadamente, existem as seguintes funções: Função Descrição getdate() Obtém o dia do mês (numérico de 1 a 31) getday() Obtém o dia da semana (de 0 a 6) getmonth() Obtém o mês (numérico de 0 a 11) getyear() Obtém o ano gethours() Obtém a hora (numérico de 0 a 23) getminutes() Obtém os minutos (numérico de 0 a 59) getseconds() Obtém os segundos (numérico de 0 a 59) No exemplo abaixo, obtém-se o dia da semana. Para tal, utiliza-se a variável dia para armazenar data/hora e a variável hoje para armazenar o número do dia da semana. dia = new Date(); hoje = DataToda.getDay(); Para se obter o dia da semana na forma de string, deve-se construir uma tabela com os dias da semana e utilizar a variável hoje como indexador. function CriaTab( n ) { this.length = n; for( var x = 1; x <= n; x++ ) this[x] = ""; } nomedia = new CriaTab( 7 ); 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[ hoje ]; 43 de 61
Uma variável da classe Date pode ter seu conteúdo modificado. Para isso, existem as funções: setdate(), setday(), setmonth(), setyear(), sethours(), setminutes() e setseconds(). Por exemplo acima, pode-se mudar o mês do objeto dia para novembro, através do comando: dia.setmonth(10); 44 de 61
9 Interface com o Usuário Um script pode interagir com o usuário através de objetos para entrada de dados (textos), seleção de opções (radio, checkbox e combo), botões ou links. Estes objetos são os mesmos usados pela linguagem HTML para a construção de formulários e são inseridos no script do mesmo modo. Os objetos existentes para interação com o usuário são quatro: Input, Textarea, Select e Link. Os objetos Input são de oito tipos (podem ser identificados pela propriedade type): Text Password Hidden Checkbox Radio Button Reset Submit 9.1 Objeto Input: Text É o principal objeto para entrada de dados. Por este objeto, o usuário pode teclar um string de uma linha. Suas propriedades são: type, size, maxlength, name e value: type=text: Especifica um campo para entrada de dados normal. size: Especifica o tamanho do campo na tela. maxlength: Especifica a quantidade máxima de caracteres permitidos. name: Especifica o nome do objeto. value: Armazena o conteúdo do campo. <form method="post" name="testtext"> <p> Entrada de Texto <input type=text size=20 maxlength=30 name="cxtexto" value=""> </p> </form> O resultado do exemplo aparece na figura abaixo: Figura 4 Objeto Input:Text 45 de 61
9.2 Objeto Input Password É um objeto para entrada usado tipicamente para digitação de senhas (password). São semelhantes ao Text. A diferença é que os dados digitados são exibidos na tela como "*". Suas propriedades são: type, size, maxlength, name e value. type=password: Especifica um campo para entrada de senha. size: Especifica o tamanho do campo na tela. maxlength: Especifica a quantidade máxima de caracteres permitidos. name: Especifica o nome do objeto. value: Armazena o conteúdo digitado no campo. <form method="post" name="tpassword"> <p> Entrada de Senha <input type=password size=10 maxlength=10 name="senha" value=""> </p> </form> O resultado do exemplo aparece na figura abaixo: Figura 5 Objeto Input:Password 9.3 Objeto Input: Hidden É semelhante ao input text, porém, invisível para o usuário. Este objeto deve ser utilizado para passar informações ao "server" (quando o formulário for submetido) sem que o usuário tome conhecimento. Suas propriedades são: name e value.!"name : Especifica o nome do objeto.!"value : Armazena o conteúdo do objeto. <form method="post" name="thidden"> <input type=hidden size=20 maxlength=30 name="hdtexto" value=""> </form> </p> 46 de 61
9.4 Objeto Input: Checkbox São objetos que permitem ao usuário ligar ou desligar uma determinada opção. Suas principais propriedades são: name, value e checked.!"name: Especifica o nome do objeto.!"value: Especifica o valor a ser enviado ao server se o objeto estiver marcado (checked). Caso seja omitido, será enviado o valor default "on". Esta propriedade também serve para ativar comandos lógicos, testando-se a condição de "checked". checked : Especifica que o objeto inicialmente estará ligado No exemplo abaixo, são criados três objetos checkbox. <form method="post" name="tcheck"> Passatempos:<p> Leitura<input type=checkbox name="opt1" value="1" checked> Musica<input type=checkbox name="opt2" value="2"> Cinema<input type=checkbox name="opt3" value="3"> Esportes<input type=checkbox name="opt4" value="4"> </p> </form> O resultado do exemplo aparece na figura abaixo: Figura 6 Objeto Input:Checkbox 47 de 61
9.5 Objeto Input: Radio São objetos que permitem ao usuário a escolha de apenas uma alternativa, diante de uma série de opções. Suas principais propriedades são: name, value e checked.!"name : Especifica o nome do objeto. Para caracterizar o objeto como membro de um mesmo conjunto de opções, todos os objetos de um conjunto têm o mesmo "name".!"value : Especifica o valor que será enviado ao "server" se o objeto estiver ligado (checked). Caso seja omitido, será enviado o valor default "on". Esta propriedade também serve para ativar comandos lógicos, testando-se a condição de "checked".!"checked : Especifica que o objeto inicialmente estará ligado. Para utilização deste objeto é importante o conhecimento de outras propriedades associadas: Objeto.length: Retorna a quantidade de opções existentes na lista. Objeto.[index].value: Retorna o texto (value) associado a cada opção. Objeto.[index].checked: Retorna verdadeiro ou falso. <form method="post" name="testeradio> Time favorito:<br> <input type=radio name="rad" value="1"> Corinthians <input type=radio name="rad" value="2"> Palmeiras <input type=radio name="rad" value="3"> Portuguesa <input type=radio name="rad" value="4"> Santos <input type=radio checked name="rad" value="5"> Sao Paulo </form> O resultado do exemplo aparece na figura abaixo: Figura 7 Objeto Input:Radio 48 de 61
9.6 Objeto Input: Button Este objeto um botão na página que permite criar, quando o mesmo for ativado pelo mouse, programas associados a ele. Suas propriedades são: name e value.!"name: Especifica o nome do objeto.!"value: Especifica o nome que aparecerá sobre o botão. <form method="post" name="tstbutton"> Aperte o Botão <input type=button name="bteste" value="botão de teste"> </form> O resultado do exemplo aparece na figura abaixo: Figura 8 Objeto Input: Button 9.7 Objeto Input: Reset Este objeto é um botão que tem por única finalidade limpar os campos digitados pelo usuário, restaurando o conteúdo do formulário para os valores iniciais. Suas propriedades são: name e value.!"name: Especifica o nome do objeto.!"value: Especifica o nome que aparecerá sobre o botão <p> <form method="post" name="testeres"> Restaura defaults <input type=reset name="bres" value="reset"> </form> </p> O resultado do exemplo aparece na figura abaixo: Figura 9 Objeto Input: Reset 49 de 61
9.8 Objeto Input: Submit Este objeto é um botão que tem por finalidade submeter (enviar) o conteúdo dos objetos do formulário ao "server". O formulário será submetido à URL especificada na propriedade "action" do formulário. Todos os dados do formulário são enviados para que uma aplicação do lado do servidor possa processá-los (isto é feito através do protocolo CGI, que não é abordado neste texto). Suas propriedades são: name e value.!"name: Especifica o nome do objeto.!"value: Especifica o nome que aparecerá sobre o botão. <script> <form method="post" name="testesub"> Envia Formulário <input type=submit name="bsub" value="envia"> </form> O resultado do exemplo aparece na figura abaixo: Figura 10 Objeto Input: Submit 50 de 61
9.9 Objeto TextArea É um objeto para entrada de dados em um campo de múltiplas linhas. Suas principais propriedades são: name, rows e cols.!"name: Especifica o nome do objeto.!"rows: Número de linhas que aparecerão na tela.!"cols: Número de colunas que aparecerão em cada linha.!"value: Acessa o conteúdo do campo via programação. <form name="testetextarea"> <p> Area de Texto <textarea name="multtext" rows=4 cols=40> Primeira linha do texto inicial segunda linha do texto inicial </textarea> </p> O resultado do exemplo aparece na figura abaixo: Figura 11 Objeto TextArea 51 de 61
9.10 Objeto Select É um objeto para entrada de opções, onde o usuário, a partir de uma lista de alternativas, seleciona uma ou mais opções. Suas principais propriedades são: name, size, value e multiple. name: Especifica o nome do objeto. size: Número 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. Para utilização deste objeto é importante o conhecimento de outras propriedades associadas:!"objeto.length : Retorna a quantidade de opções existentes na lista.!"objeto.selectedindex: Retorna o indice do objeto selecionado (primeiro = 0).!"Objeto.options[index].text: retorna o texto externo associado a cada opção.!"objeto.options[index].selected: retorna verdadeiro ou falso.!"objeto.options[index].value: retorna o texto interno (value) associado a cada opção. Exemplo a: Nesta lista: 1. Permite-se apenas uma seleção. 2. A quarta opção aparecerá inicialmente selecionada (propriedade "selected"). 3. Não é utilizada a propriedade "value". Assim, a propriedade "text" e a propriedade "value" passam a ter o mesmo valor, ou seja, o valor externo que aparece na tela. <form> Objeto Select <select name="combo1" size=1> <option>opcao 1 <option>opcao 2 <option>opcao 3 <option selected>opcao 4 (recomendada) <option>opcao 5 <option>opcao 6 </select> </form> Figura 12 Objeto Select 52 de 61
Exemplo b: Nesta lista: 1. Permitem-se múltiplas seleções. Para o usuário escolher mais de uma, deve usar as teclas Shift ou Ctrl ao dar o Click do mouse. 2. Utiliza-se a propriedade "value". Assim as propriedades "text" e "value" têm valores diferentes: text retornará Escolha 1 a Escolha 6 e value retornará List1 a List6. 3. A lista exibe 4 itens de uma lista de 6 seleções possíveis. <p> <form> <select name="combo2" size=4 multiple> <option value="list1">escolha 1</option> <option value="list2" selected >Escolha 2</option> <option value="list3">escolha 3</option> <option value="list4" selected >Escolha 4</option> <option value="list5">escolha 5</option> <option value="list6">escolha 6</option> </select> </form> </p> Figura 13 Objeto Select 53 de 61