Programacao-Estruturada-Aula11-Transcricao-Videoaula01

•

Humanas / Sociais

0

Estude com artigos

08/05/2023

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Trabalho de Conclusão de Curso - TCC

95.971 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

Material Didático do Instituto Metrópole Digital - IMD 
Versão 5.3 - Todos os Direitos reservados
Programação Estruturada
Aula 11 - Arrays: Introdução, Acesso e Métodos
Videoaula 01: Introdução aos arrays
Videoaula 01: Introdução aos arrays
Olá! Vimos muitas coisas ao longo das últimas aulas e você já deve ter aprendido
que há situações em que os tipos de dados básicos não são su�cientes para resolver os
problemas encontrados na prática. Por exemplo, imagine que você queira escrever um
programa que solicite ao usuário a entrada das notas de dez alunos de uma turma de
sua escola. Como você faria isso?
Uma possibilidade seria escrever essa função que está no slide (Código 1). Neste
código, criamos uma variável para cada nota e elas recebem o valor inserido pelo
usuário no prompt.
Código 1 - 11_1 Notas.html e 11_1 Notas.js
<html >
 <head>
 <meta charset="UTF-8" />
 <title>Programação Estruturada - Aula 11</title>
 </head>
 <body>
 <noscript>Seu navegador não suporta JavaScript ou ele está desabilitado.</noscript>
 <h1>Notas</h1>
 <button onclick="ler_notas()">INICIAR</button>
 <p id="resultado"></p>
 <script src="script.js"></script>
 </body>
</html>
 
function ler_notas() {
 var nota_01 = prompt("Entre com a 1a nota:");
 var nota_02 = prompt("Entre com a 2a nota:");
 var nota_03 = prompt("Entre com a 3a nota:");
 var nota_04 = prompt("Entre com a 4a nota:");
 var nota_05 = prompt("Entre com a 5a nota:");
 var nota_06 = prompt("Entre com a 6a nota:");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
Esse código, apesar de simples, é repetitivo, pois temos claramente duplicação de
código, deixando-o muito extenso. Imagine declarar variáveis para turmas de cinquenta
alunos!!! E o pior de tudo é que, na prática, teremos turmas com quantidade de alunos
diferentes. Dessa forma, não sabemos previamente a quantidade de variáveis que
precisaríamos declarar.
Para evitar a duplicação de código, você já viu em aulas anteriores que é possível
usar comandos de iteração, reduzindo assim o tamanho do código. Veja uma versão
desse mesmo programa usando laços. Observe o Código 2 e veri�que se ele está
correto. Nesse código temos um contador que iniciamos com 1 e, enquanto esse
contador não chega a 11, lemos uma nota inserida pelo usuário e incrementamos o
contador.
Código 2 - 11_2 Notas Laços.html e 11_2 Notas Laços.js
 var nota_07 = prompt("Entre com a 7a nota:");
 var nota_08 = prompt("Entre com a 8a nota:");
 var nota_09 = prompt("Entre com a 9a nota:");
 var nota_10 = prompt("Entre com a 10a nota:");
 
 // Processar notas...
}
 
<html >
 <head>
 <meta charset="UTF-8" />
 <title>Programação Estruturada - Aula 11</title>
 </head>
 <body>
 <noscript>Seu navegador não suporta JavaScript ou ele está desabilitado.</noscript>
 <h1>Notas com Laços</h1>
 <button onclick="ler_notas()">INICIAR</button>
 <p id="resultado"></p>
 <script src="script.js"></script>
 </body>
</html>
 
function ler_notas() {
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
Você conseguiu detectar algum problema neste código? Ele está bem enxuto, mas o
problema é que temos apenas uma única variável. Toda vez que uma nota é lida, é
armazenada nessa mesma variável. Como a variável só consegue armazenar um valor
por vez, a nota anteriormente lida é perdida. Para resolver esse problema, fazemos uso
de uma estrutura de dados chamada de array, a qual pode ser utilizada para armazenar
múltiplos valores que geralmente têm alguma relação entre si.
Atenção
Uma informação importante: Várias linguagens de programação, como Java,
por exemplo, de�nem essas estruturas como estruturas homogêneas, ou seja, elas
podem armazenar diversos valores de um mesmo tipo de dado. No entanto, em
JavaScript, não há essa exigência. Mesmo assim, nesta aula, faremos o uso
homogêneo dos arrays. Ou seja, em todos os nossos exemplos, os elementos do
array terão o mesmo tipo. Mas lembre-se: em JavaScript arrays podem ter
elementos de tipos diferentes.
Por ser uma estrutura de dados muito importante e que abrange um conteúdo
relativamente longo, vou dividir este conteúdo em duas aulas. Ao longo desta aula, você
aprenderá a criar arrays, acessar elementos de um array, alterar elementos de um
array e iteragir através de um array usando o laço for. Além disso, apresentarei
também métodos nativos de JavaScript que são bastante úteis para trabalhar com
arrays, como, por exemplo, métodos para inserir e remover elementos e métodos para
concatenar, ou seja, unir dois arrays.
 var contador = 1;
 var nota;
 do {
 nota = prompt("Entre com a "+contador+"a nota:");
 contador++;
 } while (contador <= 10);
 
 // Processar notas...
}
 
2
3
4
5
6
7
8
9
10
11
Na próxima aula, você aprenderá como ordenar arrays e como utilizar métodos
muito úteis de iteração sobre os arrays que permitem, por exemplo, �ltrar um array
retornando apenas elementos que satisfazem uma determinada condição. Além disso,
na próxima aula, você ainda aprenderá sobre arrays bidimensionais, também
chamados de matrizes.
Vamos lá!!!
Array é uma estrutura de dados indexada que nos permite armazenar diversos
valores em uma única variável e você pode acessar esses valores individualmente
fazendo referência ao seu índice. A maneira mais fácil de criar um array é declarando os
seus elementos explicitamente, como vemos no slide (Figura 1).
Figura 1 - De�nindo Arrays
Chamamos essa forma de de�nição de arrays de notação literal. No slide (Figura
1) vemos também que é possível atribuir o valor do array a uma variável. O nome da
variável, também considerado como o nome do array, pode ser usado para acessar os
elementos do array, você verá como fazer isso logo mais.
Em JavaScript, os índices dos arrays são números naturais, ou seja, números
inteiros maiores ou iguais a 0. Dessa forma, 0 é o índice do primeiro elemento, 1 é o
índice do segundo elemento, e assim por diante, até o índice do último elemento, que
terá sempre o valor igual ao tamanho do array menos um. No exemplo do slide (Figura
1), temos um array com 10 elementos. Assim sendo, o último elemento tem 9 como
índice. De uma maneira geral, se você quiser acessar o n-ésimo elemento de um array,
é só usar o índice (n - 1). É fácil, mas exige atenção!!!
Atenção
Algumas linguagens de programação suportam arrays com índices não
numéricos, os quais são chamados de arrays associativos (ou hashes), que são
estruturas de dados diferentes compostas de um conjunto não ordenado de pares
formados por uma chave e um valor.
O JavaScript não suporta arrays associativos. Em JavaScript, arrays usam índices
numerados. Se você utilizar um índice nomeado, ao acessar um array, o JavaScript
rede�nirá o array para um objeto padrão. Após essa rede�nição automática, métodos e
propriedades do array produzirão resultados inde�nidos ou incorretos. Portanto, como
nesta disciplina não estamos trabalhando com orientação a objetos, não utilize índices
que não sejam números naturais, ou seja, números maiores ou iguais a zero.
Neste outro slide (Ver Código 3), temos um exemplo mais concreto, com a de�nição
de um array chamado dias que contém os nomes dos dias da semana em português.
Note que espaços e quebras de linha não são importantes. Uma declaração, como a
que temos no slide (Ver Código 3), pode abranger várias linhas.
Código 3 - 11_3 Dias da Semana.html e 11_3 Dias da Semana.js
<html >
 <head>
 <meta charset="UTF-8" />
 <title>Programação Estruturada - Aula 11</title>
 </head>
 <body>
 <noscript>Seu navegador não suporta JavaScript ou ele está desabilitado.</noscript>
 <h1>Dias da Semana</h1>
 <button onclick="dia_da_semana()">INICIAR</button>
1
2
3
4
5
6
7
8
9
10
11
Para acessar uma posição do array, é só usar o nome da variável e indicaro índice
da posição a ser acessada entre colchetes. Por exemplo, o elemento dias[0] é o texto
"domingo" e o elemento dias[6] é o texto "sábado".
Você lembra do método getDay() de uma data? Ele retorna um número entre 0 e
6 que representa o dia da semana da data. Em JavaScript, o 0 corresponde ao domingo,
o 1 corresponde à segunda-feira e assim por diante até o 6, que corresponde ao
sábado. Veja que temos uma relação direta entre o resultado desse método e os
índices de nosso array.
Ou seja, utilizando esse método e o nosso array, podemos agora facilmente atribuir
a uma variável o nome do dia atual. Para isso, como vemos no slide (Figura 2), basta
atribuirmos a data atual à variável hoje, e acessarmos o elemento do array dias cujo
índice é o resultado da expressão hoje.getDay(). Dessa forma, se estivermos em um
domingo, a expressão hoje.getDay() retornará 0 e, por esse motivo, a variável texto
receberá o valor "domingo", pois esse é o valor do elemento de índice 0 no array dias.
 <p id="resultado"></p>
 <script src="script.js"></script>
 </body>
</html>
 
function dia_da_semana() {
 var dias = [
 "domingo",
 "segunda-feira",
 "terça-feira",
 "quarta-feira",
 "quinta-feira",
 "sexta-feira",
 "sábado"
 ];
 var hoje = new Date();
 var texto = dias[hoje.getDay()];
 document.getElementById("resultado").innerHTML = texto;
}
 
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Figura 2 - Acessando os Elementos de um Array
Você também pode criar arrays usando a palavra-chave new, como podemos ver no
slide (Código 4), onde criamos o mesmo array dias, que de�nimos anteriormente.
Porém, note que dessa vez usamos a palavra-chave new seguida do construtor Array.
Na prática, não existe necessidade de utilizar essa forma de construir um array. Por
simplicidade, legibilidade e velocidade de execução, use a primeira forma, ou seja,
usando a notação literal de de�nição de arrays.
Código 4 - 11_4 Dias da Semana New.html e 11_4 Dias da Semana New.js
<html >
 <head>
 <meta charset="UTF-8" />
 <title>Programação Estruturada - Aula 11</title>
 </head>
 <body>
 <noscript>Seu navegador não suporta JavaScript ou ele está desabilitado.</noscript>
 <h1>Dias da Semana</h1>
 <button onclick="dia_da_semana()">INICIAR</button>
 <p id="resultado"></p>
 <script src="script.js"></script>
 </body>
</html>
 
function dia_da_semana() {
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
Caso necessite criar um array vazio, você pode simplesmente escrever os colchetes
sem nenhum elemento entre eles, como vemos na de�nição da variável vazio do slide
(Figura 3). Outra razão para não utilizar a palavra-chave new é que ela complica o
código, podendo gerar resultados inesperados. Por exemplo, a variável teste1
apresentada no slide (Figura 3), está sendo inicializada com um array de dois
elementos, 1 e 10. No entanto, a variável teste2 está sendo inicializada com um array
com apenas um elemento, o valor undefined.
Figura 3 - De�nindo Arrays Vazios
Outra característica importante dos arrays em JavaScript é que eles são um tipo
especial de objeto. O operador typeof em JavaScript retorna object para arrays.
Porém, arrays em JavaScript são melhor descritos como arrays mesmo.
Bom, encerro esta videoaula de introdução aos arrays por aqui. Na próxima
videoaula, você aprenderá mais sobre essa estrutura de dados tão importante. Até lá!!!
 var dias = new Array(
 "domingo",
 "segunda-feira",
 "terça-feira",
 "quarta-feira",
 "quinta-feira",
 "sexta-feira",
 "sábado"
 );
 var hoje = new Date();
 var texto = dias[hoje.getDay()];
 document.getElementById("resultado").innerHTML = texto;
}
 
2
3
4
5
6
7
8
9
10
11
12
13
14
15