Olá, na lição 11 estudamos sobre contadores e acumuladores, de modo que os contadores são variáveis que realizam a contagem de ocorrências de um determinado valor, como exemplo ilustrativo, podemos ter diversos pedidos de pizzas, mas quais destas pizzas são de sabores “Moda da Casa”? Em algum determinado momento, gostaríamos de saber o valor total a ser pago apenas das pizzas de sabores “Moda da Casa”, assim, a função do acumulador é realizar a soma total destes pedidos.

Pois bem, agora gostaríamos de inserir mais um item no próprio pedido das pizzas, ou então remover um item desta lista de pedidos, como podemos realizar tal procedimento? E como saber a quantidade e o valor total a ser pago? Ou se o cliente tiver restrições alimentícias e quiser trocar o sabor da pizza, como fazer isso?

Para realizar estas operações que sempre ocorrem em nosso cotidiano, devemos aprender a estruturar e programar os vetores, mais conhecidos como arrays. Os vetores ou arrays são estruturas que permitem alocar uma lista de dados na memória principal do computador. Os vetores são muito úteis para inserir ou remover itens de uma lista de compras ou de alunos de uma turma, por exemplo.

Deste modo, praticamente diversas linguagens de programação têm um tipo de dado de vetor incluído em suas bibliotecas. Na linguagem JavaScript, tem suporte nativo para arrays, sendo que, na primeira versão da linguagem, não suportava este tipo de estruturação (GRONER, 2018).

Nesta lição, vamos abordar a estruturação de listas em formato de vetores (arrays), que são muito utilizados em praticamente todos os sistemas. Os vetores permitem recuperar todos os itens inseridos da lista, conseguimos criar vetores e correlacionar um vetor com o outro, ou até mesmo concatenar os vetores, caso precisarmos em algum momento (LEPSEN, 2018).

Na linguagem de programação JavaScript, temos a opção de trabalhar com os vetores (arrays), mas por que precisamos utilizar arrays? Vamos imaginar que precisamos armazenar a média de turistas que frequentam as praias do litoral em cada mês do ano. De acordo com nossos conhecimentos adquiridos em lições anteriores, poderíamos armazenar estas informações com o seguinte código.

Se fôssemos pensar sobre o que fizemos, essa não é a melhor abordagem a se fazer. Se fôssemos armazenar a média dos turistas que frequentam as praias do litoral durante 10 anos, como ficaria o código? Seria muito código! Teríamos que criar 120 variáveis para representar cada mês durante 10 anos. O código fica inviável e sobrecarrega cada vez que formos acessar para saber um mês específico. Este foi o motivo pelo qual os arrays foram criados!

Pense, agora, que em um dos anos um dos valores foi digitalizado incorretamente. Imaginou o trabalho de procurar em qual mês, e como fazer para corrigir tal situação? É lógico que temos formas avançadas de trabalhar este tipo de problematização, mas vamos por partes. Primeiramente, vamos estudar o que são vetores e como utilizar seus métodos e suas propriedades. Vamos lá?

Como vimos, o array é uma estrutura de dados que consegue armazenar uma lista em forma de dados em sequência na memória do computador.  Os vetores são muito utilizados para inserir ou remover itens (elementos) de uma lista de pedidos, ou de compras, ou de alunos de uma turma, por exemplo. Também podemos recuperar e mostrar todos os itens que estão contidos dentro desta lista (ZAKAS, 2005).

Este é um tópico importante para o desenvolvedor Front-End, pois é a partir do aprendizado em como manipular os vetores (arrays) que conseguimos criar estruturas robustas em nosso código, que facilita a interpretação e codificação dos navegadores web. Ao dominar os conteúdos apresentados nas lições anteriores até aqui, já está apto para atuar como desenvolvedor Front-End no mercado de trabalho.

Uma propriedade importante que é utilizada na manipulação de vetores (arrays) é a propriedade length, que retorna o número de elementos do vetor. Essa propriedade é muito utilizada na lógica de programação, quando queremos percorrer todos os vetores e não sabemos especificamente o tamanho dele. A propriedade “length” exibe o número total de itens (elementos) do vetor.

Para nosso exemplo didático, vamos implementar uma aplicação com vetores, com propriedades de inclusão e exclusão dos elementos do vetor. O programa terá como finalidade gerenciar o atendimento dos pacientes em um consultório odontológico. Neste programa, vamos desenvolver a opção de adicionar o paciente em uma lista de espera, quando o paciente for diagnosticado como urgente, será inserido como o primeiro da lista e também qual o paciente está sendo atendido no consultório odontológico. Para isso, vamos utilizar os vetores para armazenar a quantidade de informações que iremos cadastrar.

Os vetores (arrays) servem para armazenar valores que são todos do mesmo tipo primitivo, de forma sequencialmente. Com a evolução da linguagem JavaScript, é permitido criar vetores com valores de tipos diferentes, lembrando que é sempre bom obedecer às melhores práticas de programação, mas para fins de aprofundamento desta linguagem, vamos estabelecer que não podemos fazer isso, pois se estivermos trabalhando em uma empresa que não adote a mesma linguagem de programação, pode ser que não tenha suporte para criar arrays com tipos de valores distintos. Esta é uma maneira de como a linguagem JavaScript é tão disseminada no mundo, pois ela se atualiza na medida que surge a necessidade do desenvolvedor Front-End (UZAYR, 2022).

Na linguagem JavaScript, além de criarmos vetores (arrays), também conseguimos acessar a posição dos vetores. Por exemplo, ao criar um vetor com o nome “Produtos”, por meio do índice numérico do vetor (que se inicia em 0), podemos acessar qual produto está em primeiro da lista. A Tabela 1 descreve os elementos que estão inseridos no vetor “Produtos”.

Para selecionarmos um elemento do vetor, primeiramente indicamos o nome do vetor, seguido por um número entre colchetes que aponta para o seu índice. É importante notar os detalhes, pois os itens (elementos) de um vetor iniciam-se com o índice “0” (zero). Assim, para obter o primeiro item do vetor “Produtos”, devemos utilizar a seguinte sintaxe: Produtos[0]. Desta forma, podemos também alterar o nome do elemento que está na quarta posição. Em vez de ser micro-ondas, gostaríamos que fosse: Máquina de lavar roupa. Então, o código fica:

Produtos[3] = “Máquina de lavar roupa” (LEPSEN, 2018).

Ao declarar um vetor na linguagem JavaScript, não é necessário indicar o número total de elementos existentes no vetor, podemos criar um vetor do seguinte modo: “var Produtos[ ]”; ou “var Produtos = new array( );”.

Podemos, também, realizar inclusão e/ou exclusão de itens nos vetores. Para adicionar um elemento no final do vetor, usa-se a função: push( ). Para adicionar um elemento no início do vetor e deslocar os itens existentes uma posição abaixo, usa-se: unshift( ). Para remover o primeiro elemento do vetor e deslocar os itens existentes uma posição acima, usa-se: shift( ). Para remover o último elemento do vetor, usa-se: pop( ) (SILVEIRA; ALMEIDA, 2013).

No exemplo proposto, vamos implementar uma lista de pacientes que serão atendidos em um consultório odontológico. Neste programa, utilizaremos os vetores para ilustrar a aplicação dos métodos de inclusão e exclusão de elementos no vetor, assim como funções para adicionar os pacientes na lista de atendimentos, inserir um paciente que esteja na situação de urgência, ou seja, será inserido como primeiro na lista de atendimento, e qual paciente está em atendimento no consultório odontológico.

O código em HTML para a solução do problema dos pacientes que serão atendidos no consultório odontológico pode ser implementado da seguinte forma:

A parte principal do código em HTML está entre as linhas 17 a 21, que cria o formulário para cadastrar os pacientes e inclui os botões de adicionar, urgência e atender. Nas linhas 24 a 25, são codificados quais os pacientes que estão em atendimento no consultório odontológico, lembrando que o paciente que estiver na situação “Em atendimento” não pode estar cadastrado na lista de atendimentos em espera. Assim, na linha 32 são vinculados os elementos “ids” (identificadores) que serão utilizados na linguagem JavaScript, a seguir:

No programa, são implementadas três funções, sendo elas: registrar os pacientes “registrarPacientes()”, pacientes em situação de urgência “urgenciaPacientes()” e pacientes em situações de atendimento “atenderPacientes()”. Na linha 2, declaramos um vetor do tipo escopo global, que será utilizado pelas três funções do sistema. Na função “registrarPacientes()”, iniciamos com os elementos necessários para referenciar os elementos da página, obter o nome do paciente e validar o seu preenchimento. Inserimos o método “push()” que é utilizado para inserir o nome do paciente no final da lista do vetor. Em seguida, o comando for, que percorre todos os itens do vetor, exibindo a lista de pacientes na fila em espera (ZAKAS, 2005).

Para a segunda função “urgenciaPacientes()”, a função “push()” é substituída por “unshift()”, que, em nosso caso, os pacientes devem aparecer em primeiro na lista de atendimentos, pois se trata de uma urgência. Por fim, a função “atenderPacientes()”, que inicia com a verificação do número de elementos que contêm no vetor “pacientes[]”, pois se o vetor estiver vazio, não há atendimentos para realizar. Em seguida, é executado o método “shift()” que retira o primeiro paciente da lista de espera e o armazena na variável “atender”. Se prestarmos bem atenção em nossa codificação, apenas copiamos as funções e alteramos o que realmente é necessário para cada necessidade, como adicionar os pacientes, urgência e qual paciente está em atendimento.

Nesta lição aprendemos o básico de vetores. Vimos como criar, como selecionar os itens (elementos) de um vetor, como incluir na primeira posição do vetor, como incluir na última posição do vetor e como excluir o item do vetor, tudo isto por meio dos métodos disponíveis na biblioteca da linguagem JavaScript. Assim, os vetores facilitam o armazenamento de listas de dados em um programa. Cada vetor contém um nome e um índice, no qual o primeiro item do vetor ocupa a posição zero do vetor.

Em JavaScript, os vetores podem aumentar e diminuir de tamanho dinamicamente, não sendo necessário especificar quantos elementos serão ou estão inseridos em sua lista.

Para praticarmos um pouco, pense como seria elaborar uma página de internet que leia as últimas notícias da sua região e armazene em um vetor. A página deve conter um botão que solicite o número de notícias que o usuário deseja visualizar e, então, listar as notícias em ordem decrescente, ou seja, a partir da última notícia, a mais recente. Não esqueça de validar o número de notícias, pois esse número de notícias tem que ser inferior ou igual à quantidade de notícias cadastradas.

Na próxima lição, vamos aprender um pouco sobre “strings”, ou seja, como fazemos para trabalhar com rotinas de programação que utilizam cadeias de caracteres (strings). Vamos estudar sobre como fatiar as cadeias de “strings” para especificar quais elementos desejamos usar. Na prática, pense em como validamos o preenchimento de um campo específico de um formulário de clientes, ou pedidos. Como validar e-mails e assim sucessivamente. Até lá, pratique e estude sempre. Bons estudos e até a próxima!