JAVASCRIPT- PARTE 7

 

Objetivos:

 

Essa é a sétima parte de uma série de tutoriais sobre JavaScript básico. Na sexta parte deste tutorial você aprendeu sobre as variáveis e como o JavaScript as trata. Aprendeu como atribuir nomes a variáveis utilizando certas regras, como declara-las e as diferenças entre variáveis globais e locais, também aprendeu como armazenar dados do usuário, tanto inicio a construção de uma home page.

 

Pré-requisitos: Para acompanhar a lição você deve estudar as primeiras partes desse tutorial.

 

Introdução

 

Nessa tutorial você ira ver como criar e manipular mais dois de tipos de variáveis muito utilizada no JavaScript.

 

Utilizando objetos String

 

Você já utilizou varias strings durante as primeiras partes desse tutorial. As strings armazenam grupos de caracteres de textos identificadas de forma semelhante para outras variáveis.

 

Como por exemplo :

 

Teste = “Isso é um teste”

 

Essa instrução atribui a string Isso é um teste a uma variável de string denominada Teste.

 

Criando um Objeto String

 

O JavaScript é bastante poderoso no manuseio de Strings, fornecendo ao programador uma total flexibilidade em seu manuseio. O JavaScript armazena strings como objetos strings. Objetos string armazenam uma seqüência de caracteres, sua forma geral é a seguinte:

stringObject.propriedade
stringObject.metodo

 

Mais você não precisa se preocupar com isso agora, mais é importante saber a forma geral porque ela explica varias técnicas utilizadas para trabalhar com strings, que utilizam métodos ou seja funções embutidas do objeto string.

 

Existe duas maneiras de criar um novo objeto string . A primeira já utilizamos, a segunda utiliza a sintaxe oficial de objetos.

 

Como por exemplo :

 

Teste=”Isso é um teste”;

Teste= new string(“Isso é um teste”);

 

A segunda instrução utiliza a palavra-chave new, que você utiliza para criar objetos. Isso diz ao navegador para criar um novo objeto string contendo o texto Isso é um teste e o atribui a variável Teste.

 

Nota: Embora possa criar uma string utilizando 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.

 

Propriedades das Strings

 

lenght : Determina o tamanho da string, em número de caracteres.

 

Ex: stringObject.lenght

 

charAt: retorna o caracter da posição especificada (inicia em 0).

 

Ex: string.charAt(posição)

 

indexOf : retorna o número da posição onde começa a primeira "string".

 

Ex: string.indexOf("string")

 

lastindexOf: retorna o número da posição onde começa a última "string".

 

Ex: string.lastindexOf("string")

 

substring: retorna o 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.

 

Ex:string.substring(index1, index2)

 

Métodos das Strings

 

anchor: Cria uma âncora na página HTML, que se refere a stringObject. Eqüivale a TAG <A NAME="nome da ancora">stringObject</A>.

 

Ex: document.write(stringObject.anchor("nome da ancora"))

 

big : Mostra stringObject com tamanho grande. Equivale a TAG <BIG></BIG>.

 

Ex: document.write(stringObject.big())

 

blink : Mostra stringObject piscando na tela. Equivale a TAG <BLINK></BLINK>.

 

Ex: document.write(stringObject.blink())

 

bold :Mostra stringObject em negrito. Equivale a TAG <B></B>.

 

Ex: document.write(stringObject.bold())

 

charAt :Obtém o caracter que estiver na posição "x" de stringObject.

 

Ex: document.write(stringObject.charAt(x))

 

fixed :Mostra stringObject com fonte de tamanho fixo. Equivale a TAG <TT></TT>.

 

Ex: document.write(stringObject.fixed())

 

fontcolor : Determina a cor que stringObject será mostrada. Equivale a TAG <FONT COLOR=#RGB></FONT>.

 

Ex: document.write(stringObject.fontcolor(#FF0000))

 

fontsize : Mostra stringObject no tamanho definido por "x". Equivale a TAG <FONT SIZE="tamanho"></FONT>.

 

Ex: document.write(stringObject.fontsize(x))

 

indexOf :Procura a ocorrência de uma substring dentro de stringObject. A busca começa na posição inicio. Este método retorna a posição inicial da substring dentro de stringObject.

 

Ex: PosiçãoRelativa=stringObject(substring [, inicio])

 

italics :Mostra stringObject no formato itálico. Equivale a TAG <I></I>.

 

Ex: document.write(stringObject.italics())

 

lastIndexOf : Método bem semelhante a indexOf, a única diferença é que a busca começa da posição fim para o início da string.

 

Ex: PosiçãoRelativa=stringObject(substring [, fim])

 

link : Cria um link, onde stringObject é o texto que aparece em destaque.

 

Ex: document.write(stringObject.link("URL"))

 

small : Mostra stringObject em fonte pequena. Equivale a TAG <SMALL></SMALL>.

 

Ex: document.write(stringObject.small())

 

strike : Mostra stringObject com um traço no meio. Equivale a TAG <STRIKE></STRIKE>.

 

Ex: document.write(stringObject.strike())

 

sub :Mostra stringObject no formato subscript. Equivale a TAG <SUB></SUB>.

 

Ex: document.write(stringObject.sub())

 

substring : Obtém uma substring delimitada por pos_1 e pos_2 em stringObject.

 

Ex: document.write(stringObject.substring(pos_1,Pos_2))

 

sup : Mostra stringObject no formato sobrescrito. Equivale a TAG <SUP> </SUP>.

 

Ex: document.write(stringObject.sup())

 

toLowerCase : Converte stringObject para minúscula.

 

Ex: document.write(stringObject.toLowerCase())

 

toUpperCase : Converte stringObject para maiúscula.

 

Ex: document.write(stringObject.toUpperCase())

 

Atribuindo valores para Strings

 

Pode-se atribuir um valor a uma string da mesma maneira como qualquer outra variável. Os dois exemplos anteriores atribuíram um valor inicial à string. Também pode atribuir um valor depois que a string já foi criada. Por exemplo, a seguinte instrução substitui o conteúdo da variável Teste com uma nova string:

 

Teste=” É somente um teste”;

 

Você também pode utilizar o operador de concatenação ( +) para combinar os valores de duas strings. O exemplo abaixo mostra um exemplo simples de atribuição e combinação dos valores de strings.

 

<HTML>

<HEAD>

<TITLE> Teste da String</TITLE>

</HEAD>

<BODY>

<H1> Teste da String</H1>

<SCRIPT>

Teste1= "Isso é um teste!";

Teste2= "É somente um teste";

Valor= Teste1+Teste2;

alert(Valor);

</SCRIPT>

</BODY>

</HTML>

 

Esse script atribui valores a duas variáveis de string, Teste1 e Teste2 depois exibe um alerta com seu valor combinado. Se você executar esse script , sua saída deverá se semelhante a da Figura abaixo:

 

Além de utilizar o operador + para concatenar duas strings, você pode utilizar o operador += para adicionar em um string. Por exemplo, essa instrução adiciona um ponto ao conteúdo atual da string sentencia:

 

sentencia+=”.”;

 

Nota: O sinal de adição (+) é também utilizado para adicionar números em JavaScript. O navegador sabe se utiliza adição ou concatenação baseado nos tipos de dados que você utiliza com o sinal de adição. Se você o utiliza entre um numero e uma string, o numero é convertido em um string e concatenado.

 

Calculando o comprimento da string

 

De vez em quando, você pode achar útil saber quantos caracteres uma variável de string armazena. Você pode fazer isso usando a propriedade length dos objetos string, como já visto anteriormente. Esta propriedade pode ser utilizada com qualquer string, para isso basta digitar o nome da string seguindo por .length.

Por exemplo, Teste.length refere-se ao comprimento da string Teste. Como pode ser visto abaixo:

 

Teste=”Isso é um teste”;

document.write(Teste.length);

 

A primeira instrução atribui a string Isso é um teste à variável Teste. A Segunda instrução exibe o comprimento da string.

 

Nota: Lembre-se de que embora Teste refira-se a uma variável de string, o valor de Teste.length é um número e pode ser utilizado em qualquer expressão numérico.

 

Convertendo a caixa da string

 

Dois métodos do objeto string, já visto anteriormente, permitem converter todo o conteúdo de um string em letras maiúsculas ou em letras minúsculas:  

• toUpperCase( ) : Converte todos os caracteres na string em letras maiúsculas.

• toLowerCase( ) : Converte todos os caracteres na string em letras minúsculas.

Por exemplo, a seguinte instrução exibe o valor da variável de string Teste em letras minúsculas.

 

Teste=”Isso é um teste”;

document.write(Teste. toLowerCase( ) );

 

Assumindo que essa variável continha o texto Isso é um teste, o resultado seria a seguinte string : isso é um teste.

 

Note que a instrução não altera o valor da variável Teste. Esses métodos retornam a versão de letras maiúsculas ou minúsculas da string, mas eles não alteram a própria string. Se quiser alterar o valor da string, você pode utilizar um instrução como essa:

 

Teste=Teste.toLowerCase( )

 

Nota: Note que a sintaxe para esses métodos é semelhante à propriedade length introduzida anteriormente. A diferença é que os métodos sempre utilizam parênteses, enquanto propriedades não. Os métodos toUpperCase e toLowerCase não contém nenhum parâmetro, mas você ainda precisa utilizar os parênteses.

 

Trabalhando com Substrings

 

Até agora, trabalhamos com strings inteiras. O JavaScript também permite trabalhar com substrings ou partes de uma string. Pode-se utilizar o método substring para recuperar uma parte de uma string ou o método chartAt para obter um único caractere.

 

Utilizando parte de uma string

 

O método substring( ) retorna uma string consistindo em uma parte da string original entre dois valores de índices, que você deve especificar entre parênteses. Por exemplo , a seguinte instrução exibe o quarto, o quinto e o sexto caracteres da string Teste.

 

document.write(Teste. substring( 3,6) );

 

Agora você teve esta se perguntado: de onde vêm o 3 e o 6 ? . Bom, existe três coisas que você precisa entender sobre os parâmetros de índice:

 

» A indexação inicia com 0 para o primeiro caractere da string, então o quarto caractere é realmente o índice 3.

 

» O segundo índice é não inclusivo. Um segundo índice de 6 inclui até o índice 5 ( o sexto caractere).

 

» Você pode especificar os dois índices em qualquer ordem. O menor será assumido como sendo o primeiro índice. No exemplo anterior, ( 6,3) teria produzido o mesmo resultado. Naturalmente, raramente há uma razão para utilizar a ordem inversa.

 

Como outro exemplo, suponha que você definiu uma string, chamada Letra para armazenar o alfabeto:

 

Letra=”ABCDEFGHIJKLMNOPQRSTUVWXYZ”;

 

Agora vamos utilizar o método substring para retornar os caracteres desejados:

 

» Letra.substring(0,4) : Isso retorna ABCD;

 

» Letra.substring(10,12) : Isso retorna KL;

 

» Letra.substring(12,10) : Também retorna KL. Porque é menor, 10 é utilizado como o primeiro índice;

 

» Letra.substring(6,7) : Isso retorna G;

 

» Letra.substring(24,26) : Isso retorna YZ;

 

» Letra.substring(0,26) : Isso retorna o alfabeto inteiro;

 

» Letra.substring(6,6) : Isso retorna o valor nulo, uma string vazia. Isso é verdadeiro sempre que os dois valores de índice são os mesmos;

 

Obtendo um único caractere

 

O método charAt é uma maneira simples de pegar um único caractere de uma string. Você especifica o índice do caractere ou posição, entre parênteses. Os índices iniciam em 0 para o primeiro caractere. Eis alguns exemplos que utilizam a string Letra:

 

» Letra.charAt(0) : Retorna A;

 

» Letra.charAt(12) : Retorna M;

Manipulando Arrays

 

O JavaScript não tem um tipo de dado ou objeto para manipular arrays. Por isso, para trabalhar com arrays é necessário a criação de um objeto com a propriedade de criação de um array.

 

Criando um array numérico

 

Diferente da maioria de outros tipos de variáveis de JavaScript, você deve declarar um array antes de utiliza-lo. O seguinte exemplo cria um array com 30 elementos:

 

scores= new Array(30);

 

Para atribuir valores para o array, utiliza parênteses e um índice. Os índices iniciam com 0, enato os elementos do array nesse exemplo seria numerado de 0 a 29. Essas instruções atribuem valores para os primeiros quatros elementos do array :

 

scores[0]=39;

scores[1]=40;

scores[2]=100;

scores[3]=49;

 

Como as strings, os array têm uma propriedade length. Esta informa o número de elementos no array, normalmente o mesmo número que voc6e utilizou ao criar o array. Por exemplo, essa instrução imprimira o número 30:

 

document.write(scores.length);

 

Acessando os elementos do array

 

Você pode ler o conteúdo de um array utilizando a mesma notação que utilizou quando atribuiu valores. Por exemplo, as seguintes instruções exibiram os valores dos primeiros 4 elementos do array scores:

 

Scoredips=” Scores: “+ scores[0] +”,”+ scores[1] + “,”+ scores[2]+”,” +scores[3] ;

document.write(scoredisp);

 

Nota: Olhando esse exemplo, você pode imaginar que seria inconveniente exibir todos os 30 elementos do array scores- e trabalhar com um array maior seria ainda mais difícil. Esse é um trabalho ideal para loops, que permite desempenhar as mesmas instruções varias vezes com valores diferentes. Mais não se preocupe com isso agora, pois você aprenderá tudo sobre loops em outra parte desse tutorial.

 

Utilizando arrays de string

 

Até agora, você utilizou arrays de números. O JavaScript também permite utilizar arrays de strings. Esse é um recurso poderoso que permite trabalhar com um grande numero de strings ao mesmo tempo

 

Criando um array de strings

 

Você define um array de string da mesma forma que um arry numérico , de fato, o JavaScript não faz distinção entre eles.

 

Por exemplo :

 

nomes=new Array(30);

 

Você pode atribuir valores de string aos elementos do array:

 

nomes[0]=”Fernanda Gomes da Silveira “;

nomes[1]=”Leticia Vieira Santos”;

 

Você pode utilizar esses elementos de array em qualquer lugar que utilizaria uma string. Você pode até utilizar os métodos de string vistas anteriormente . Por exemplo, a seguinte instrução imprime os primeiros oitos caracteres do primeiro elemento do array nomes, resultando em Fernanda :

 

document.write(nomes[0].substring(0,8));

 

Dividindo uma string

 

O JavaScript inclui um método de string chamado split, que divide uma string em suas partes componentes. Para utilizar esse método, especifique a string a dividir e um caractere para dividir as partes :

 

Teste=” Fernanda Gomes da Silveira”

Partes=Teste.split(“ “);

 

Nesse exemplo, a string Teste mantém o nome Fernanda Gomes da Silveira. O método split na Segunda instrução divide a string nome em cada espaço, resultado em quatro strings. Estas são armazenadas em um array de strings chamado Partes. Depois que as inruções de exemplo executam, os elementos de partes contêm o seguinte :

 

Partes[0]= “Fernanda”

Partes[1]= “Gomes”

Partes[2]=”da”

Parte[3]=”Silveira”

 

O JavaScript também inclui um método de array, join, que desempenha a função oposta. Esta instrução remonta a array Partes em uma string:

 

Fullname=Partes.join(“ “);

 

O valor nos parenteses especifica um caractere para separar as partes do array. Nesse caso, um espaço é utilizado, resultando na string final Fernanda Gomes da Silveira. Se você não especificar um caractere, as virgulas são utilizadas.

 

Classificando um array

 

O JavaScript também inclui o método sort para arrays, que retorna uma versão classificada do array ( alfabeticamente ou numericamente). Por exemplo, as seguintes instruções inicializam um array de quatro nomes e o classifica :

 

nomes[0]=”Fernanda Gomes da Silveira “

nomes[1]=”Leticia Vieira Santos”;

nomes[2]=” Felipe Silva “;

nomes[3]=” Marcos Cardoso”;

sortednames=nomes.sort();

 

A ultima instrução atribui o array sortednames à verão classificada de nomes utilizando o método join.

 

Exibindo mensagens que rolam na tela

 

Nos tutoriais anteriores você aprendeu que o JavaScript pode ser utilizado para criar uma mensagem que rola na linha de status de uma página da Web e agora com seus conhecimentos de strings, você pode criar o programa de mensagem que rolam na tela a partir do zero.

 

Para começar, você precisará definir a mensagem a ser rolada. Você utilizará uma variável chamada msn para armazenar a mensagem. No script, inicialize a variável, sinta-se livre para escolher seu próprio texto para a mensagem :

 

msn= “Este é um exemplo de mensagens que rolam na tela. Não é legal ? “;

 

A seguir, defina uma segunda string chamada esp. Essa string será exibida entre as cópias da mensagem para tornar claro onde uma termina e a outra começa. Por exemplo :

 

esp =”... ...”;

 

Você precisara de mais variável: uma variável numérica para armazenar a posição atual da string. Chame-a de pós e inicialize-a com 0:

 

pos=0;

 

A rolagem real será feita por uma função chamada rolamensagem, como mostrada a abaixo:

 

1: function rolamensagem () {

 

2: window.status=msn.subtring(pos,msn.legth)+esp+msn.substring(0,pos);

 

3: pos++;

 

4: if(pos>msn.length) pos =0;

 

5: windows.setTimeout(“rolamensagem( )”, 200);

 

6: }

 

Aqui esta uma descrição linha a linha da função rolamensagem :

 

» Linha 1: A palavra-chave function é utilizada para começar a função.

 

» Linha 2: Essa instrução exibe uma string na linha de status. A string é composta da parte de msn de pos para o fim, seguida pelo espaço, seguido pela parte de msn desde o inicio de pos.

 

» Linha 3: A variável pos é incrementada.

 

» Linha 4: Essa instrução verifica se pos é maior que o comprimento de msn. Se for, redefine-o para 0. Você aprenderá mais sobre a instrução if nas próximas partes do tutorial.

 

» Linha 5: Essa instrução utiliza o método window.setTimeout, que permite configurar uma instrução a ser executada depois de um demora de tempo. Nesse caso, execute a função rolamensagem depois do 0,2 segundo.

 

» Linha 6: O parêntese final termina a função.

 

Para completar o exemplo, adicione as tags < SCRIPT> e as tags de HTML que compõem um documento de Web. O exemplo abaixo mostra o script completo da mensagem que rola na tela.

 

<HTML>

<HEAD>

<TITLE> EXEMPLO DE MENSAGEM QUE ROLA NA TELA</TITLE>

<SCRIPT>

msn="Este é um exemplo de mensagens que rolam na tela.Não é legal?";

esp="... ...";

pos=0;

function rolamensagem () {

window.status= msn.substring(pos, msn.length)+esp+msn.substring(0,pos);

pos++;

if(pos > msn.length) pos =0;

windows.setTimeout("rolamensagem( )",200);

}

 

rolamensagem();

</SCRIPT>

</HEAD>

<BODY>

<H1> EXEMPLO DE MENSAGEM QUE ROLA NA TELA</H1>

OLHE A LINHA DE STATUS DA SUA PAGINA .

</BODY>

</HTML>

 

A figura abaixo apresenta o resultado do programa.

 

Conclusão

 

Nesta parte do tutorial sobre JavaScript mostrei como armazenar strings em JavaScript e a trabalhar com partes de strings. Também mostrei a utilizar arrays e a armazenar números ou strings neles.

 

Vocês aprenderam métodos e propriedades que os auxiliam quando desejam executar algum no JavaScript como transforma letras em maiúscula e minúsculas, exemplos que podem parece “bobos” mais que causam efeitos notáveis. E através desses efeitos e os conhecimentos que você aprendeu, criamos uma mensagem que rolam na tela, como essa mensagens que você deve já Ter vistos em muitos sites e como você pode perceber foi muito fácil faze-la. Na próxima parte desse tutorial você aprenderá a utilizar a instrução if e outros recursos do JavaScript para testar os valores de variáveis, incluindo strings e arrays.