Aula de JavaScript 05/03/10

Transcrição

1 Objetos Sabe-se que variável são contêiners que podem armazenar um número, uma string de texto ou outro valor. O JavaScript também suporta objetos. Objetos são contêiners que podem armazenar dados e inclusive armazenar dois ou mais itens ao mesmo tempo. O JavaScript é uma linguagem baseada em objetos. Isso que dizer, de uma forma bem simples, que ele trata todos os elementos de uma página Web como um objeto. Os objetos normalmente são agrupados de acordo com o seu tipo ou finalidade. A linguagem JavaScript possui objetos que são automaticamente criados e permite que você crie novos objetos de acordo com sua conveniência. Quando um documento é carregado no browser, ele cria um certo número de objetos JavaScript, com propriedades e valores, os quais são ajustados pelo conteúdo do próprio documento. Um objeto armazena normalmente uma série de informações que podem ser acessadas e utilizadas para processamento ou alteradas pelo programador. Uma janela que exibe uma home page possui diversos objetos intrínsecos. Document = Este objeto contém informações sobre a página ou documento HTML como um todo, incluindo dados sobre os elementos de formulários, links e âncoras, além de uma série de funções que permitem mudar as características da página; Form = Este objeto guarda informações específicas sobre os formulários da página atual, tais como o seu método URL e dados sobre seus elementos ou campos; History = Este objeto mantém uma lista de todos os sites visitados na sessão de uso atual do browser; Location = Este objeto possui informações sobre o local da página e informações relacionadas. Propriedades Um objeto possui características próprias que o tornam único dentro de um grupo. Algumas dessas características, ou propriedades, são comuns a muitos objetos, enquanto outras são específicas de cada um. As propriedades podem ser vistas como variáveis que armazenam uma informação relacionada com um determinado objeto. As propriedades de um objeto são acessadas por meio de uma sintaxe bastante simples e que consiste no nome do objeto, um ponto e no nome da propriedade. Por exemplo, o objeto document (que diz respeito a página HTML) possui uma propriedade que é a cor do fundo. Para se referir a essa propriedade, devemos usar a seguinte sintaxe: document.bgcolor Exemplos: i) document.write ( A cor de fundo do documento é : +document.bgcolor+ <br> ); ii) document.bgcolor = red ; E Nemer 1

2 Métodos Além das propriedades, um objeto possui funções especiais chamadas métodos que realizam alguma operação relacionada com o objeto. Os métodos são usados normalmente para alterar o valor de um propriedade do objeto ou então para executar uma tarefa específica. A sintaxe básica de um método é composta da seguinte forma: objeto.nome_do_método( argumento ) Por exemplo, o objeto document possui um método chamado write cuja finalidade é a de inserir linhas no programa HTML durante sua execução. document.write ( <h1> Exemplo do método write </h1> ); O objeto window possui um método chamado alert que exibe uma mensagem de aviso em uma caixa de diálogo. window.alert ( Operação inválida ); O JavaScript suporta três tipos de objetos: Objetos embutidos ou predefinidos (built-in) são objetos construídos dentro da linguagem JavaScript. Já foram usados dois; Date e Math. Objetos browser são objetos que representam vários componentes do navegador e o documento atual de HTML. Por exemplo, a função alert( ) é um método do objeto window ; Objetos personalizados são objetos que você mesmo cria. Utilizando objetos string As strings armazenam grupo de caracteres de texto e são identificadas de forma semelhante para outras variáveis. Como um exemplo simples, essa instrução atribui a string Este é um teste a uma variável de string denominada varteste. varteste = Este é um teste ; Criando um objeto string JavaScript armazena strings como objetos string. Você normalmente não precisa se preocupar com isso, mas isso explicará algumas técnicas para trabalhar com strings, que utilizam métodos (funções embutidas) do objeto string.há duas maneiras de criar um novo objeto string : i. varteste = Este é um teste ; ii. varteste = New String ( Este é um teste ); A segunda instrução faz uso da palavra-chave New, que você utiliza para criar objetos. Isso diz ao navegador para criar um novo objeto string contendo o texto Este é um teste e o atribui à variável varteste. Embora você possa criar uma string utilizando a sintaxe orientada a objetos, a sintaxe padrão de JavaScript é mais simples e não há nenhuma diferença nas strings criadas por esses dois métodos. E Nemer 2

3 Atribuindo um valor Pode-se atribuir um valor a uma string da mesma maneira como qualquer outra variável. varteste = Este é um teste ; Pode-se atribuir um valor depois que a string já foi criada. varteste = Este é um outro teste ; A operação anterior substitui o conteúdo da variável varteste com uma nova string. O exemplo abaixo mostra um exemplo que utiliza os operadores de concatenação (+) e (+=) para combinar os valores de duas strings. <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft FrontPage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title> Teste de strings </title> </head> <body> <h1> Teste de strings </h1> <script language = "JavaScript">; //Nas duas instruções a seguir você cria duas variáveis strings da forma simples. teste1 = "Este é um teste. "; teste2 = "Este é somente um teste. "; /* Na instrução a seguir é criada uma variável string mas usando-se a sintaxe oficial para criação de objetos; utiliza-se a palavra-chave new */ teste3 = new String("Este é um outro teste. "); //Abaixo é utilizado o operador de concatenação + para unir todas as strings. todas = teste1 + teste2; //Abaixo utiliza-se o operador += para adicionar strings. todas += teste3; alert(todas); </script> </body> </html> A tela de saída é a seguinte: E Nemer 3

4 Calculando o comprimento da string Pode-se determinar a quantidade de caracteres que uma variável de string armazena através da propriedade length dos objetos string; que podem ser utilizados com qualquer string. Para acessar esta propriedade, use o nome da variável de string seguido por.length, conforme mostrado abaixo: teste1 = "Este é um teste."; document.write (teste1.length); A primeira instrução atribui a string Este é um teste. à variável teste1. A segunda instrução exibe o comprimento da string nesse caso, 16 caracteres. É importante observar que, embora a variável teste1 refira-se a uma variável de string, o valor de teste1.length é um número e pode ser utilizado em qualquer expressão numérica. Convertendo a caixa da string Dois métodos do objeto string permitem converter todo o conteúdo de uma string em letras maiúsculas ou em letras minúsculas: i. touppercase( ) => converte todos os caracteres na string em letras maiúsculas; ii. tolowercase( ) => converte todos os caracteres na string em letras minúsculas. Um exemplo de aplicação dos métodos acima é mostrado abaixo: document.write (teste1.tolowercase( )); Para alterar o valor da variável de string, pode-se utilizar uma instrução do tipo abaixo: teste1=teste1.tolowercase( ); Trabalhando com substrings Método substring( ): retorna uma string consistindo em uma parte da string original entre dois valores de índice, que você deve especificar entre parênteses. Um exemplo de sua aplicação é apresentado abaixo: teste1 = Este é um teste ; document.write (teste1.substring(0,2)); A saída para o trecho de script acima será Es e será exibido no vídeo. Existem três pontos importantes a se destacar com relação aos parâmetros de índice, como mostrado abaixo: i) A indexação inicia com 0 para o primeiro caractere da string ; ii) O segundo índice é não inclusivo. Um segundo índice de 2 inclui até o índice 1 (o segundo caractere); iii) Você poderia especificar os dois índices em qualquer ordem. O menor seria assumido como o primeiro índice (naturalmente, não há razão para isto). iv) Alguns exemplos de aplicação do método substring( ). a. teste1.substring(0,2) é equivalente a teste1.substring(2, 0) b. teste1.substring(2,3) = retorna o caractere t c. teste1.substring(0,15) retorna Este é um teste d. teste1.substring(6,6) retorna o valor nulo, uma string vazia. E Nemer 4

5 Método charat( ): retorna um único caractere de uma string. O índice do caractere é especificado entre parênteses, como mostrado nos exemplos abaixo: i) teste1.charat(0) retorna o caractere E; ii) teste1.charat(14) retorna o caractere e; iii) teste1.charat(15) retorna uma string vazia porque não há nenhum caractere nessa posição; Localizando uma substring Método indexof( ): localiza uma string dentro de outra string. O valor retornado na variável é o índice da substring na string maior, conforme exemplo abaixo: posicao =teste1.indexof( um ); A instrução anterior exibiria no vídeo o número 7 que é o índice da substring um na string original. Você pode especificar um segundo parâmetro opcional para indicar o valor de índice em que começa a pesquisa, conforme mostrado nos exemplos abaixo: i) posicao = teste1.indexof( st,0) retorna o número 1; ii) posicao = teste1.indexof( st,4) retorna o número 12; Uma utilização para o segundo parâmetro é a de procurar por múltiplas ocorrências de uma string. Método LastindexOf( ): localiza uma string dentro de outra string, mas iniciando de trás para a frente (a busca começa pelo último caractere). Você também pode especificar uma posição inicial para começar a busca (como no método indexof( )) como segundo parâmetro. Abaixo temos um exemplo onde são aplicados os métodos estudados anteriormente. <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft FrontPage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title> Teste de strings </title> </head> <body> <h1> Teste de funções de strings </h1> <script language = "JavaScript">; //Abaixo temos um exemplo de utilização da propriedade.length test = "Este É Um Teste."; document.write("numero de caracteres da variavel test = " + test.length); document.write(test.substring(1,2)); //Abaixo temos um exemplo do método 'tolowercase()' que converte os caracteres para minúsculos document.write("<br>"+ test.tolowercase()+"<br>"); //Abaixo temos um exemplo do método 'touppercase()' que converte os caracteres para maiúsculos document.write(test.touppercase()); //Até agora, a variável test não foi alterada. document.write("<br>a variável 'test' continua a ter: "+test); E Nemer 5

6 //Para alterá-la, fazemos, por exemplo: test = test.touppercase(); document.write("<br>o novo valor de test, após ter sido alterada, é: "+test); //Exemplo do método 'substring( )' que extrai parte de uma string document.write("<br>"+test.substring(1,10)); //Exemplo do método 'charat( )' que extraia apenas um único caracter. document.write("<br>"+test.charat(0)); document.write("<br>"+test.charat(1)); document.write("<br>"+test.charat(2)); document.write("<br>"+test.charat(3)); document.write("<br>"+test.charat(4)); //Exemplo do método 'indexof( )' para localização de uma string dentro de outra document.write("<br>a posição da string 'TEST' na variável 'test' é :"+test.indexof("test")); //Você pode especificar a partir de que posição a busca pela string vai começar da seguinte forma: document.write("<br>a posição da string 'EST' na variável 'test', a partir da posição5, é :"+test.indexof("est",5)); //Exemplo do método 'lastindexof( )'que localiza a última ocorrência da string document.write("<br>a última posição da string 'EST' na variável 'test' é :"+test.lastindexof("est")); //Você pode especificar a partir de que posição a busca pela última string vai começar da seguinte forma: document.write("<br>a penúltima posição da string 'EST' na variável 'test' é :"+test.lastindexof("est",9));</script> </body> </html> A tela para a aplicação acima é a apresentada abaixo: E Nemer 6

7 Utilizando arrays numéricos Um array é um grupo numerado de item de dados que você pode tratar como uma única unidade. Os arrays podem conter strings, números, objetos ou outros tipos de dados. Criando um array numérico Diferente de outros tipos de variáveis de JavaScript, você deve declarar um array antes de utilizalo. Isto é feito da seguinte forma: numitens =new Array (30); A instrução acima cria um array com 30 elementos (o índice do primeiro caractere é 0). Para atribuir valores para o array utilize parênteses e um índice da seguinte forma: numitens =39; numitens =40; numitens =100; numitens =49; Os arrays também têm uma propriedade length que informa o número de elementos do array (o mesmo número que você utilizou ao criar o array, não os itens já preenchidos), como mostrado abaixo: document.write (numitens.length); Neste caso, a instrução acima exibiria o número 30 no vídeo, que é a quantidade de elementos do array. Acessando os elementos do array Para acessar o conteúdo de um array utiliza-se a seguinte notação: numitens[1] retorna o número 40 O trecho de script abaixo mostra um exemplo de aplicação de array: numitenstodos = itens: + numitens[0] +, + numitens[1]; document.write (numitens); O trecho de script acima exibiria itens: 39,40 no vídeo. Utilizando arrays de strings O JavaScript também permite que se tenha arrays de strings, permitindo que se trabalhe com várias strings ao mesmo tempo. E Nemer 7

8 Criando um array de strings A definição de um array de strings é feita da mesma forma que para um array numérico (o JavaScript não faz distinção entre eles). nomes =new Array (30); Para atribuir strings aos elementos do array, usa-se a seguinte notação: nomes[0]="alberto de Souza"; nomes[1]="marcos Pereira"; Você utiliza um elemento de array de string em qualquer lugar que você use uma string e da mesma forma, podendo até utilizar os mesmos métodos das strings, como mostrado abaixo: document.write (nomes[0].substring(0,5)); A instrução acima exibe os cinco primeiros caracteres do primeiro elemento do array nomes; logo, exibe Alber. Dividindo uma string O JavaScript inclui um método de string chamado split( ) cuja função é dividir uma string em suas partes componentes. Para utilizar este método é necessário especificar a string a ser dividida e o caractere que será usado para separar as partes, como mostrado abaixo: teste="alberto de Souza"; partes = teste.split( ); No exemplo acima, a variável teste manteria seu valor que é a string Alberto de Souza. Mas o método split( ) na segunda instrução divide a string teste em três outras strings, usando o caractere de espaço como separador, e as carrega em um novo array de strings chamado partes, como mostrado abaixo: partes[0] = Alberto ; partes[1] = de ; partes[2] = Souza ; O JavaScript também inclui um método de array, join, que desempenha a função oposta. Esta instrução remonta o array partes em uma string: nomecompleto = partes.join( ); O valor contido nos parênteses especifica o caractere que será usado como separador entre cada uma das partes da string, depois que a string completa for montada. No nosso caso, o caractere de espaço foi utilizado, resultando na string final Alberto de Souza. Se você não especificar um caractere, o interpretador utilizará vírgulas para montar a string final (que ficaria Alberto,de,Souza). Classificando um array O JavaScript inclui o método sort para classificação (usando códigos ASCII) de arrays (alfabeticamente ou numericamente). E Nemer 8

9 Abaixo temos um exemplo com aplicação de arrays e de seus métodos. <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft FrontPage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title> Teste de strings </title> </head> <body> <h1> Teste com arrays de strings </h1> <script language = "JavaScript">; //Você também deve declarar um array de strings antes de usá-lo nomes = new Array(10); //cria um array de strings com 10 elementos //Para atribuir valores de string ao array, fazemos o seguinte: nomes[0]="alberto de Souza"; nomes[1]="marcos Pereira"; //Para imprimir os cinco primeiros caracteres do primeiro elemento do array 'nomes', fazemos o seguinte: document.write("o primeiro elemento do array de strings 'nomes' é : "+nomes[0]+"<br>"); document.write("os primeiros cinco caracteres de nomes[0] são : "+nomes[0].substring(0,5)+"<br>"); //Exemplo de utilização do método de string 'split' teste="paulo Roberto da Silva Gomes" partes=teste.split(" "); //As partes quebradas ficarão em partes[0], partes[1], partes[2], partes[3] e partes[4], como mostrado abaixo: document.write("<br>partes[0] = " + partes[0]); document.write("<br>partes[1] = " + partes[1]); document.write("<br>partes[2] = " + partes[2]); document.write("<br>partes[3] = " + partes[3]); document.write("<br>partes[4] = " + partes[4]); //Para juntar tudo novamente utiliza-se o método 'join' como mostrado abaixo nomecompleto=partes.join(" "); document.write("<br>o nome completo fica da seguinte forma: " + nomecompleto); /* Caso eu troque os valores de cada elemento do array partes, e aplico o método 'join', o resultado fica da seguinte forma: */ rascunho=partes[0]; partes[0]=partes[2]; partes[2]=partes[4]; partes[4]=rascunho; //Para juntar tudo novamente utiliza-se o método 'join' como mostrado abaixo novonomecompleto=partes.join(" "); document.write("<br>o nome completo fica da seguinte forma: " + novonomecompleto); //Para classificar um array, utiliza-se o método 'sort' nomes[2]="paulo Almeida"; nomes[3]="marcos Araújo"; nomes[4]="alberto Rodrigues"; E Nemer 9

10 nomesorted = nomes.sort( ); document.write("<br>"+nomesorted); numeros = new Array(5); numeros[0]=234; numeros[1]=56.78; numeros[2]=1234; numeros[3]=3; numeros[4]=1; total=numeros[0]+numeros[1]+numeros[2]+numeros[3]+numeros[4]; document.write("<br>"+ total); document.write("<br>"+numeros[0]+numeros[1]+numeros[2]+numeros[3]+numeros[4]); document.write("<br>"+numeros.sort( )); numeros[0]=parseint(234); numeros[1]=parsefloat(56.78); numeros[2]=parseint(1234); numeros[3]=parseint(3); numeros[4]=parseint(1); total=numeros[0]+numeros[1]+numeros[2]+numeros[3]+numeros[4]; document.write("<br>"+ total); document.write("<br>"+numeros[0]+numeros[1]+numeros[2]+numeros[3]+numeros[4]); document.write("<br>"+numeros.sort( )); </script> </body> </html> A tela de saída do exemplo acima é a mostrada abaixo: E Nemer 10

11 Mensagens que rolam na tela Com o conhecimento de strings já podemos criar um programa de mensagem que rola na tela. Este programa solicita ao usuário que entre com uma mensagem. Após o usuário entrar com a mensagem, a mesma é exibida de volta, somente para informação, através do método alert( ). Quando o usuário aperta o botão de OK, a função ScrollMessage( ) é chamada e começa a execução do script. O código completo é exibido abaixo: <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft FrontPage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title> Exemplo de scrolling de uma mensagem </title> <script language = "JavaScript"> msg="esta é uma demonstração de scrolling de uma mensagem"; espaco="......"; pos=0; function ScrollMessage( ) { window.status = msg.substring(pos, msg.length) + espaco + msg.substring(0,pos); pos++; if (pos > msg.length) pos=0; window.settimeout("scrollmessage( )",200); } </script> </head> <body> <h1> Teste com scrolling de mensagem </h1> Olhe na barra de status no fundo desta página. <script> msg=prompt("<br> Entre com uma mensagem"); alert("a mensagem que será exibida e "+msg); ScrollMessage( ); </script> </body> </html> E Nemer 11