Desenvolvimento - Javascript

Array em Javascript

Veja neste artigo como trabalhar com arrays em Javascript, compreendendo desde sua declaração e inicialização até aplicações mais detalhadas dessa estrutura.

por Diego Cesar Ribeiro



O que é um Array em Javascript ?

Arrays são bibliotecas compactas onde colocamos conteúdos que serão usados de forma sequencial. Pode parecer um pouco difícil, mas na verdade, é extremamente fácil usar arrays em JavaScript. Esse artigo será composto pelos seguintes tópicos:

  • Como criar um array;
  • Fazendo referência ao array;
  • Fazendo referência ao array por outro objeto.

Como criar um array

Listagem 1: Código para criar um array.

<html>
<head>
<script language=javascript type="text/javascript">
array1 = new Array ("imagem1.bmp", "imagem2.bmp", "imagem3.bmp");
</script>
</head>
<body>
</body>
</html>

Nesse código logo acima, eu criei um array chamado “array1”. Logo após o sinal de igualdade, você deverá defini-lo como um array realmente através do método “new Array”. Os objetos que irão compor essa biblioteca ficarão dentro dos parênteses, diferindo uma da outra pelas vírgulas.

Fazendo referência ao array

Em JavaScript, a maioria das contagens começam em 0, ao invés de 1. Logo, em um array de três objetos, o primeiro será representado como 0, e o último como 2. O código logo abaixo, mostra como usar um array para dar nomes a dias da semana.

Listagem 2: Fazendo referência a um array para dar nome ao dia da semana

<html>
<head>
<script language=javascript type="text/javascript">
array1 = new Array ("domingo", "segunda", "terça", "quarta", "quinta", "sexta", "sábado");
var now = new Date;
</script>
</head>
<body>
<script language=javascript type="text/javascript">
document.write("Hoje, o dia da semana é " + array1[0] );
document.write("Hoje, o dia da semana é " + array1[1] );
document.write("Hoje, o dia da semana é " + array1[ now.getDay() ] );
</script>
</body>
</html>

Como eu já disse, o JavaScript, na maioria das suas contagens, começa em 0, logo, domingo é 0 e sábado é 6.

Quando fazemos referência a esse array, nós classificaremos o objeto da biblioteca array que queremos usar em forma de número, dentro de colchetes. No primeiro exemplo, através de document.write, o JavaScript irá exibir uma mensagem afirmando que é domingo, independente de ser ou não, já como domingo, em forma de zero, está sendo referenciado. A mesma coisa acontece com o segundo exemplo, que irá mostrar uma mensagem afirmando que é segunda, independentemente de ser ou não, já como segunda-feira, ou um, esta sendo referenciado. Já no terceiro exemplo, será onde ele realmente mostrará qual o dia da semana. Ainda nesse último código, eu juntei o now.getDay, código que diz o dia da semana de 0 a 6 ao array1. Logo, o dia zero equivale ao item zero do array, e assim sucessivamente.

Fazendo referência ao array por outro objeto

Nesse tópico do artigo, será ensinado como fazer referência a um array através de outro objeto, nesse caso, uma barra de texto. O código abaixo irá ter um array com três imagens, uma barra de texto e um botão. Ao clicar no botão, será exibida uma imagem correspondente ao array, que será referenciado na caixa de texto. Por exemplo, ao digitar zero no campo de texto e clicar no botão será exibido o primeiro array, e assim sucessivamente.

Listagem 3: Código para se fazer referência a um array através de uma barra de texto.

<html>
<head>
<script type="text/javascript">

array1 = new Array ("1.bmp", "2.bmp", "3.bmp")

function regular()
{
document.getElementById('imgId').src = array1[document.form.texto.value];
}

</script>
<body onLoad="comeco()">
<img id="imgId">
</br>
<form name="form">
<input type=text name="texto">
<input type=button onClick="regular()">
</form>
</body>
</html>

Primeiramente, criamos um array, que terá na sua biblioteca as três imagens. Logo depois, na função regular(), definiremos que a imagem que queremos será uma das três que estiverem no array, e esse, por sua vez, será representado pela caixa de texto. Logo depois, já no body, basta criar o campo de texto e o botão, dando a esse último, pelo evento onClick, a funcionalidade de execução da função regular().

Esse artigo termina por aqui, espero que você tenha aprendido a usar arrays, e também sua importância. Como você viu, é facílimo usa-las, boa sorte.

Diego Cesar Ribeiro

Diego Cesar Ribeiro - Natural de Natal/RN, sou um grande entusiasta sobre tudo relacionado à tecnologia e desenvolvimento. Tenho 4 anos de experiêcia na área de desenvolvimento webstandart (html, css, tableless). Para contatos profissionais me mandem um e-mail.