Você lembra o que são matrizes? Elas são elementos matemáticos que oferecem uma solução simples e poderosa à representação dos dados e das relações existentes entre eles. Por exemplo, quando vemos uma tabela, temos, implicitamente, uma matriz de dados. Vamos usar um exemplo que você já deve ter visto em outra disciplina, Matemática Aplicada.

"Essa tabela é um exemplo de matriz composta por dados simples, as distâncias entre pares de capitais, através dos quais fica fácil obter a distância rodoviária e aérea entre duas capitais quaisquer. Dizemos que uma matriz desse tipo possui duas dimensões, da mesma maneira que a tabela correspondente é chamada de tabela de duas entradas, pois relaciona dois grupos de objetos. No caso do nosso exemplo, temos na realidade o mesmo grupo de objetos (as capitais), sendo considerado nas duas dimensões (como cidades de origem e como cidades de destino).” Assim sendo, temos uma matriz quadrada 6 x 6.

Em JavaScript, podemos definir essa matriz através de um array de arrays. Podemos considerar esse tipo de array como um array bidimensional, pois são necessários dois índices para percorrer seu conteúdo. Se ele for tridimensional, você precisará de três índices e assim por diante. Por simplicidade, nesta aula, trabalharemos apenas com matrizes, ou seja, arrays bidimensionais, mas tenha em mente que podemos ter arrays de várias dimensões.

Quando trabalhamos com matrizes, é comum chamarmos os índices de linhas e colunas. No caso, é comum considerarmos que o primeiro índice indexa as linhas e o segundo índice indexa as colunas. Lembre-se que continuamos trabalhando com arrays. Por esse motivo, os índices variam de 0 ao tamanho da dimensão menos um. Veja o exemplo:

Temos uma matriz com 3 linhas e 4 colunas, ou seja, uma matriz 3x4. Por esse motivo, o índice da primeira dimensão t do array, que representa as linhas, varia entre 0 e 2, e o índice da segunda dimensão i do array, que representa as colunas, varia entre 0 e 3.

Veja agora como fica a declaração dessa matriz em JavaScript.

Você consegue fazer um paralelo entre a imagem e o código fonte? Perceba que temos um array chamado num cujos elementos são arrays. Para facilitar o entendimento, vamos colocar uma indicação dos elementos do array num (Figura 4).

Note que o elemento num[0] é o array contendo 1, 2, 3 e 4. De maneira similar, o elemento num[1] é o array contendo 5, 6, 7 e 8. Por fim, o elemento num[2] é o array contendo 9, 10, 11 e 12.

Agora, você pode acessar cada um dos elementos desses arrays simplesmente usando o índice da coluna. Por exemplo, o elemento 7, marcado em amarelo no slide (Figura 4), é o elemento de índice 2 do array num[1], ou seja, o elemento num[1][2]. Simples, não é?

Para darmos um exemplo de uso prático de matrizes em programação, vamos agora voltar à tabela que apresenta as distâncias entre pares de capitais.

Note que temos novamente linhas e colunas, representadas pelo primeiro e segundo índices, respectivamente. Na linha 0, temos as distâncias de Maceió, na linha 1, as distâncias de Manaus, indo até a linha 5, onde temos as distâncias de Porto Velho. Em todas as linhas, teremos as distâncias na coluna 0 de Maceió, na coluna 1 de Manaus, que segue até a coluna 5, de Porto Velho. Você notou que sempre que a linha i é igual à coluna j, temos a distância 0? Por exemplo, note que o elemento na linha 2 e na coluna 2, corresponde à distância de Natal para Natal, que, obviamente, é de 0 km.

Existe outra peculiaridade em relação a essa tabela. Você consegue ver alguma relação entre as linhas, as colunas e o tipo de distância na tabela? Pois é, sempre que a linha i for menor que a coluna j, temos a distância rodoviária. Assim, o elemento na linha 0 e na coluna 2 corresponde à distância rodoviária entre Maceió e Natal.

E a outra relação é que sempre que a linha i é maior que a coluna j, temos a distância aérea, como ocorre com o elemento da linha 2 e coluna 0, a qual corresponde à distância aérea entre Natal e Maceió.

Resumindo, dados um identificador de linha i e um identificador de coluna j, temos que:

• Se i=j, então a distância é 0;
• Se i<j, então a distância é rodoviária;
• E se i>j, então a distância é aérea.

Agora, veja como podemos definir no código JavaScript a matriz correspondente à tabela de distâncias.

Iremos desenvolver uma página que permitirá ao usuário escolher dois municípios entre os listados na tabela, o tipo de distância (rodoviária ou aérea), e a página retornará o valor da distância. Vamos lá?

Código 1 - 12_12 Distancias.html

Primeiro, vamos conhecer o HTML, nele tem coisas diferentes do que a gente vem usando ao longo da disciplina. Veja que a gente usa duas caixas de seleção, o primeiro select, que tem o id "cidade1" e o outro que tem id "cidade2". E as opções de ambos são iguais, seis opções com valores variando de 0 até 5 com os nomes das cidades. Perceba que a opção 1 da "cidade1" e a opção da "cidade2" são iguais.

Além disso, precisamos de uma terceira caixa de seleção, estão nas linhas 31 a 35, que é a distância que possui valores 0 e 1, 0 para rodoviária e 1 para aérea. E quando eu clicar no botão OK, a gente vai chamar a função calcular, tá bom?

Então, vamos ver agora como funciona a função calcular no JavaScript que estamos utilizando. A primeira coisa que a gente precisa fazer é pegar quais foram as cidades escolhidas. Então, vou pegar o elemento do HTML, "cidade1" que é exatamente aquele elemento que tem o identificador "cidade1" na linha 11 e aí, nas linhas 12 e 13 eu pego, respectivamente, o valor da opção e o texto da opção, como podemos fazer isso?

Basta irmos no array de opções que ele tem e pegarmos o cidade1.selectedIndex, que é o índice selecionado daquele elemento, então ele vai retornar o índice que foi selecionado e a gente pega o campo valor, que é aquele que a gente colocou nas opções.

São esses valores que aparecem nas linhas 23 a 28 do HTML, então se você selecionar "Maceió", de acordo com o que a gente fez lá na página, você vai retornar o valor 0 e o texto vai retornar exatamente "Maceió". Então a gente vai fazer exatamente a mesma coisa para pegar o índice da "cidade2" e o nome da "cidade2". E também para pegar o valor e o texto da distância, então o valorD vai ser 0 ou 1 e o textoD vai ser rodoviária ou aérea.

Agora, a gente vai usar esses valores para identificar a distância e construir aquele texto. Como iremos fazer isso? Na linha 26, eu começo dizendo que a distância é 0, então basicamente o que vou fazer primeiro é saber se eu pego a distância rodoviária ou aérea. A rodoviária é se o valorD é 0, e, caso contrário, é aérea.

Então basta trabalharmos com os índices, lembre-se: se eu colocar o menor índice como primeiro e o maior índice como segundo, vou pegar a distância rodoviária. E se eu fizer o contrário, pego a distância aérea. Olha o que eu fiz nas linhas 23 e 24.

Aqui, eu peguei o maior índice dos dois índices, indice1 e indice2, quem é o maior e o menor índice. Como fiz isso? Usando a função que conhecemos em aulas anteriores, max e min.

A função Math.max vai retornar o maior valor entre os dois passados e a função Math.min vai retornar o menor valor dos dois passados, assim fico sabendo quem é o maior índice e o menor índice. Então agora sei que é para colocar o menor índice como primeiro e o maior índice como segundo, ou vice-versa, dependendo se é a distância rodoviária ou aérea.

Assim, se a distância for rodoviária, sabemos que o i é menor que o j, então coloco na linha 29 o menor_indice como primeiro e o maior_indice como segundo. Caso contrário, inverto e sei que o i é maior que j, então coloco o maior_indice primeiro, o i, e o menor_indice como segundo, o j.

Isso faz com que peguemos exatamente a distância rodoviária ou aérea entre as duas cidades. Agora, é só uma questão de construir o texto, logo eu coloco: "A distância" e o textoD, ou seja, o texto que está na opção "rodoviária" ou "aérea", entre a primeira cidade e a segunda cidade, que é o nome1 e o nome2, "é de" e coloco a distância que a gente calculou entre as linhas 27 e 33.

E o resultado disso, como podemos ver na página HTML ao pegarmos outra distância, por exemplo, Porto Alegre para Natal, a distância aérea daqui para lá, e a gente constrói o texto (Figura 12). Ok?

Massa, né? Pois é, com arrays e matrizes podemos escrever programas muito úteis. Não deixe de praticar bastante a utilização dessas estruturas. Para começar, que tal fazer os exercícios propostos a seguir? Lembre-se: pratique bastante, começando pelos exercícios desta aula, para se acostumar com essa notação.

Até a próxima aula. Tchau, Tchau!!!