JAVASCRIPT- PARTE  9

 

Objetivos:

Na oitava parte do tutorial você aprendeu como a utilizar a instrução if e outros recursos do JavaScript para testar os valores de variáveis, incluindo strings e arrays.
Nesta próxima parte você aprenderá outras ferramentas de programação do JavaScript, que faz com que o JavaScript desempenhe tarefas repetitivas sem precisar repetir o código varias vezes.

 

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

 

Introdução

 

Durante as primeiras partes do tutorial de JavaScript você  aprendeu  métodos e propriedades que os auxiliam quando desejam executar alguma coisa no JavaScript. Agora chegamos  a ultima parte para terminar os princípios básicos de programação de JavaScript. E nesta ultima parte vou mostrar como sua pagina na Web pode  desempenhar tarefas repetitivas , simplesmente utilizando loops em seu script.

 

Utilizando loops for

 

A palavra-chave for é a primeira ferramenta a considerar para criar loops. Um loop for utiliza basicamente uma variável denominada contador ou índice, muito parecido com outras linguagem de programação como C, C++, Java, etc. , para monitorar quantas vezes o loop executou e ele pára quando o contador alcança um certo numero.

 

Uma instrução for básica se parece com isso:

 

for( var=1;var<10; var++) { .... }

 

Como pode perceber o loop for apresenta três parâmetros separados por ponto-e-virgula.

 

O primeiro parâmetro ( var =1 ) especifica uma variável e atribui uma valor inicial a ela, isso é chamado de expressão inicial, porque  configura o estado inicial do loop.

 

O segundo parâmetro ( var < 10 ) é uma condição que deve permanecer verdadeira para manter o loop executado, isso é chamado de condição do loop.

 

O terceiro parâmetro ( var++) é uma instrução que executa a cada iteração do loop, isso é chamado de expressão de incremento, porque é normalmente utilizada para incrementa o contador.

 

Depois que os três parâmetros foram especificados, uma chave de abertura ( { ) é utilizada para sinalizar o começo de um bloco com instruções a serem executadas, depois  uma chave de fechamento  ( } ) é utilizada para indicar o termino do bloco. Todas as instruções entre as chaves serão executadas a cada iteração do loop. O exemplo abaixo mostra bem o tipo de loop utilizando a palavra-chave for.

 

for( i=1; i< 10; i++) { document.write (“Essa é a linha “, i, “\n”) ; }

 

Esse exemplo exibe uma mensagem com o contador do loop durante cada iteração. O resultado desse exemplo é parecido com isso:

 

Essa é a linha 1

Essa é a linha 2

Essa é a linha 3

Essa é a linha 4

Essa é a linha 5

Essa é a linha 6

Essa é a linha 7

Essa é a linha 8

Essa é a linha 9

 

Agora você deve estar se perguntado : Por que o loop foi executado só  9 vezes e não 10? Essa duvida sempre aparece nesse casos que envolve loop, mais se você prestar bem atenção vai sabe a resposta. É só você observar os parâmetros do contador e a condição definida por eles. Você pode observar bem  que o condicional é o seguinte i < 10, por isso que o loop é executado 9 vezes pois quando o contador é incrementado para 10 , a expressão não é mais verdadeira . Agora se precisar que o loop conte até 10, você pode alterar a condicional  para i<= 10 ou i < 11.

 

A estrutura do loop for no JavaScript é baseado em Java, que por sua vez é baseado em C. Embora seja muito utilizada para contar de um numero a outro, você pode utilizar quase qualquer instruções para a inicialização, condição e incremento. Entretanto, normalmente há uma maneira melhor de fazer outros tipos de loops como por exemplo a palavra-chave while.

 

Utilizado loops while

 

Outra palavra-chave para loops no JavaScript  é while. Diferente do loops for, os loops while  não necessariamente utilizam uma variável para contar. Em vez disso, eles executam uma condição contanto que seja verdadeira. De fato, se a condição inicia como falsa, as instruções podem simplesmente não executar.

 

A instrução while inclui a condição entre parênteses e é seguida por um bloco de instruções dentro de chaves, exatamente como um loop for. O exemplo abaixo mostra um loop while.

 

while( total< 10) {

n++;

total+= values[n] ; }

 

Neste exemplo o loop utiliza um contador n, para iterar pelo array values. Em vez de parar em uma certa contagem, entretanto, ele pára quando o total dos valores alcançar a 10.

Você talvez tenha notado que poderia ter feito a mesma coisa com um loop for:

 

for ( n=0; total<10; n++) {

total+= values[n]); }

 

Como pode ver  o loop for não é nada mais que um tipo especial de loop while que trata uma inicialização e um incremento para você. Você geralmente pode utilizar while para qualquer loop. Entretanto, é melhor escolher qualquer tipo de loop que faça mais sentido para o trabalho ou exija menos digitação.

 

Utilizando loops do... while

 

O JavaScript 1.2, introduziu um terceiro tipo de loop: o loop do...while. Esse tipo de loop é semelhante a um loop while comum, com uma diferença: a condição é testada no final do loop em vez do inicio. Como mostrado no exemplo abaixo:

 

do {

n++;

total+= values[n] ; }

while( total< 10) ;

 

Como você provavelmente notou, isso é basicamente uma versão de ponta cabeça do exemplo while visto anteriormente. Há diferença é que com o loop do, a condiçao é testada no final do loop, isso significa que as instruções no loop sempre serão executadas pelo menos uma vez, mesmo se a condição nunca for verdadeira.

 

Nota : Como com os loops for e while, o loop do pode incluir uma única instrução sem chaves ou um numero de instruções incluído entre chaves.

 

Trabalhando com loops

 

Embora você possa utilizar simples loop dor e while para tarefas simples e diretas, há algumas considerações que você deve fazer quando utilizar loops mais complicados. Nas próximas seções, veremos loops infinitos e as instruções break e continue, que oferecem mais controles  sobre os loops.

 

Loops infinitos

 

Os loops while dão a você bastante controle sobre o loop. Em alguns casos, isso pode causar problemas se você não for cuidadoso. Por exemplo veja o exemplo abaixo:

 

while( j< 10) {

n++;

values[n] ; }

 

Se entendeu a os exemplos anteriores sobre os loops, deve perceber que existe um erro nesse exemplo. Como pode ver a condição do loop while refere-se à variável j, mas essa variável realmente não se altera durante o loop. Isso cria um loop infinito. O loop continuará executando ate que sela interrompido pelo usuário ou ate gerar algum tipo de erro.

 

Os loops infinitos nem sempre podem ser interrompido pelo usuário, exceto fechando o navegador, em alguns casos os loops infinitos podem até mesmo impedir que o navegador feche ou provocar uma pane no sistema.

 

Eles também podem ser difíceis de serem identificados, porque o JavaScript não lhe mostrará um erro dizendo q você que há um loop  infinito. Mais não se preocupe, pois esse tipo de loop pode ser evitado , o que tem que fazer é:  toda vez que for criar um loop em um script, você deve ter cuidado de certificar-se de que há uma saída.

 

Nota: Dependendo da versão do navegador em utilização, o loop infinito pode ate mesmo fazer o navegador parar de responder ao usuário. Certifique-se de fornecer uma rota de escape de loops infinitos e salvar seu script antes de testá-lo, em qualquer eventualidade.

 

Ocasionalmente, você pode querer criar um loop infinito. Isso talvez inclua situações em que você quer que seu programa execute até o usuário interrompê-lo ou em você quer fornecer uma rota de escape com a instrução break. Uma maneira de criar um loop infinito  é o seguinte:

 

while ( true)  {...}

 

Como o valor true é condicional, esse loop sempre encontrará sua condição como sendo verdadeira.

 

Escapando de um loop infinito utilizando a instrução break

 

Há uma maneira de escapar de um loop infinito. Você pode utilizar a instrução break (significa pára ) durante um loop para  sair dele imediatamente e continuar a primeira instrução depois do loop. O exemplo abaixo mostra  o uso dessa instrução.

 

while ( true)  {

n++;

if( values[n]==1 break; }

 

Embora a instrução while esteja configurada como um loop infinito, a instrução if verifica o valor correspondente de um array. Se encontrar um 1, sai do loop.

 

Quando o interpretado do JavaScript encontra  uma instrução break, ele pula o resto do loop e continua o script com a primeira instrução depois da chave de fechamento no final do loop. Você pode utilizar a instrução break em qualquer tipo de loop, seja infinito ou não. Isso fornece uma maneira fácil de sair se um erro ocorrer ou se você encontrou o que estava procurando.

 

Escapando de um loop infinito utilizando a instrução continue

 

A instrução continue é mais uma escape que está disponível para ajuda-lo a controlar a execução de instruções em um loop. A instrução continue pula o resto do loop, mas  continua com a próxima iteração do loop, diferente de break. O exemplo abaixo mostra como é utilizado a instrução continue para pular parte do loop.

 

for( i=1; i<21; i++ ) {

if( pontos[i]==0 )continue;

documente.write( O estudante de numero “,i,”Pontos:”, score[i], “\n”);

}

 

Nesse exemplo utiliza o loop for para imprimir notas de 20 alunos, armazenado no array pontos. A instrução if é utilizada para verificar as notas com um valor 0. O script assume que uma nota 0 significa que o aluno não fez o teste, então ele continua o loop sem imprimir essa contagem.

 

Utilizando loops for... in

 

Um terceiro tipo de loop disponível pelo JavaScript. O loop for...in não é tão flexível quando um loop for ou while comum. Em vez disso, é especificamente projetado para desempenhar uma operação em cada propriedade de um objeto.

 

Por exemplo , o objeto navigator contém propriedade que descrevem o navegador do usuário, como você aprenderá mais para frente. Você utiliza for...in para exibir essa propriedade do objeto:

 

for( i in navigator ) {

document.write(“Propriedade: “+i )

document.write( “Valor :”+navigator[i]); }

 

Como um loop for comum, esse tipo de loop utiliza uma variável de índice( i no exemplo). Para cada iteração do loop, a variável é configurada como a próxima propriedade do objeto. Isso torna fácil quando você precisa verificar ou modificar cada uma das propriedades do objeto. Mas você não precisa se preocupar com isso agora , pois aprenderá isso mais detalhadamente nos próximos tutoriais.

 

Trabalhando com arrays e loops

 

Para aplicar seu conhecimento de loops, você agora criará um script que lida com arrays utilizando loops. Esse script simples solicitará ao usuário uma serie de nomes. Depois que todos os nomes foram inseridos, ele exibirá a lista de nomes em uma lista numerada. Para começar o script, inicializa algumas variáveis:

 

nomes=new Array( );

i=0;

 

O array nomes armazenará os nomes que o usuário insere. Você não sabe quantos nomes serão inseridos, então você não especificou uma dimensão para o array. A variável i será utilizada como contador nos loops.

 

A seguir, utilize a instrução window.prompt para solicitar ao usuário uma serie de nomes. Utilize um loop para repetir o prompt para cada nome. Você quer que o usuário insira pelo menos um nome, então um loop do seria o ideal:

 

do {

next=window.prompt (“ Digite o próximo nome:”);

if( next > “ “ ) nomes[i] =next;

i=i+1;

} while( next > “ “);

 

Nota: Se você estiver interessado em fazer seus scripts o mais curto possível, lembra-se de que você pode utilizar o operador de incremento (++) para combinar a instrução i=i+1 , da seguinte maneira i++.

 

Esse loop solicita uma string chamada next. Se um nome for inserido e se for maior que um espaço, ele é armazenado como a próxima entrada no array nomes. O contador i então é incrementado. O loop se repete até que o usuário não insira um nome ou de um clique em Cancel na Caixa de dialogo do Prompt.

 

A seguir, apenas para mostrar, seu script pode exibir o número de nomes que foram inseridos:

 

document.write ( “<h2>”+(nomes.length)+ “Nomes listados.</h2>”);

 

Essa instrução exibe a propriedade length do array nomes, cercada pelas tags de título 2 da linguagem html  para ênfase.

 

A seguir, o script deve exibir todos os nomes na ordem em que forma inseridos. Como os nomes estão em array, o loop for...in é uma boa escolha:

 

document.write(“<OL>”);

for( i in  nomes)

{ document.write(“<LI> + nomes[i] +”<BR> );

}

document.write<”</OL>”);

 

Nesse script você tem o loop for...in que faz o loop pelo array nomes, atribuindo o contador i a um índice de cada vez. O script então imprime o nome com uma tag <LI> como um item em uma lista de pedidos. Antes e depois do loop, o script imprime as tags <OL> de abertura e de fechamento.

 

Agora você tem tudo de que precisa para um script funcional. O exemplo abaixo mostra a versão completa do script, incluído o HTML normal  as tags<SCRIPT> . Que tal executa-lo?

 

<HTML>

<HEAD>

<TITLE> EXEMPLO DE LOOP</TITLE>

</HEAD>

<BODY>

<H1>EXEMPLO DE LOOP</H1>

<P> ENTRADA DE UMA SERIE DE NOMES.</P>

<SCRIPT>

nomes=new Array();

i=0;

do {

next=window.prompt(" Digite o próximo nome:");

if(next > " " && next != "undefined") nomes[i] = next;

i=i+1;

} while(next > " " && next != "undefined");

document.write("<h2>"+(nomes.length)+ "Nomes listados.</h2>");

document.write("<OL>");

for( i in  nomes)

{ document.write("<LI>+ nomes[i] +"<BR> );

}

document.write<"</OL>");

</SCRIPT>

</BODY>

</HTML>

 

Quando carregar esse documento em um navegador, você será solicitado a digitar um nome. Insira vários nomes e depois dê um clique em Cancel para indicar que você terminou. Depois disso você terá como resultado todos os nomes inseridos em ordem.

 

Conclusão

 

Parabéns!!! Você alcançou a ultima parte do tutorial de JavaScript básico que abordou alguns blocos básicos de construções de JavaScript. Nesta parte você aprendeu a utilizar o for, while e as instruções do para fazer vários tipos de loops, também aprendeu sobre o loop for...in para arrays e objetos e criou um aplicativo simples utilizando seu conhecimento sobre loop e arrays. Assim você otimizou seu código, tornando seu script fácil de ser manipulado.  No próximo tutorial de JavaScript você irá aprender alguns recursos mais avançados do JavaScript, por isso é importante que você tenha entendido e compreendido bem  as primeiras partes desse Tutorial , pois vou abordar assuntos como objetos e handler de evento, que vai de dar uma visão maior do que o JavaScript pode fazer.