![DS - Web design Avancado [2022] (1)](https://files.passeidireto.com/Thumbnail/2cf79a9a-8bc5-4a8d-a61d-9927ce1f8179/105/1.jpg)
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Prévia do material em texto
Rotinas de Programação (Arrays)
APRESENTAR OS CONCEITOS DE ARRAY COM EXEMPLOS PRÁTICOS EM JAVASCRIPT
AUTOR(A): PROF. DANIEL FERREIRA DE BARROS JUNIOR
Array
O elemento array, ou vetor, é uma variável sequencial de dados, enumerados por um índice. A praticidade
de se utilizar um array se dá pela simplificação do código, o que torna o seu uso uma grande vantagem, em
relação da utilização de diversas variáveis diferentes.
Ainda, além do array “tradicional” de uma dimensão, podemos ter arrays multidimensionais,
representando elementos matemáticos como as matrizes.
Array unidimensional
Um array unidimensional pode ser inicializado de maneiras diferentes. Vejamos:
1. <script type="text/javascript">
2. var x [];
3. var x1 = [1,2,3,4,5];
4. var x2 = new Array(1,2,3,4,5);
5. var x3 = Array = [1,2,3,4,5];
6. </script>
Neste fragmento de código podemos verificar três maneiras de se criar e inicializar os arrays. No primeiro
exemplo é possível criar o array, sem inicializa-lo.
Para se utilizar o array ou exibir os seus valores armazenados, devemos informar o valor do índice
corretamente. Vamos analisar o código a seguir:
O AVA se comporta melhor no navegador Chrome.
AVA UNINOVE https://ava.uninove.br/seu/AVA/topico/container_impressao.php
1 of 14 14/05/2022 13:21
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Tópico 7</title>
5. <meta charset="UTF-8">
6. </head>
7. <body>
8. <div>Programação de Interfaces (aula 7)</div>
9. <script type="text/javascript">
10. var x1 = [1,2,3,4,5];
11. var x2 = new Array(1,2,3,4,5);
12. var x3 = Array = [1,2,3,4,5];
13.
14. for (var i = 0; i < 5; i++){
15. document.write("<br>x1 = " + x1[i]);
16. document.write("  x2 = " + x2[i]);
17. document.write("  x3 = " + x3[i]);
18. }
19. </script>
20. </body>
21. </html>
Neste exemplo, utilizamos uma estrutura de repetição for() para “varrer”, ou percorrer os valores
armazenados, em cada uma das suas posições de índice.
O AVA se comporta melhor no navegador Chrome.
AVA UNINOVE https://ava.uninove.br/seu/AVA/topico/container_impressao.php
2 of 14 14/05/2022 13:21
DICA:
O primeiro índice de um array é o valor zero, array[0]. Tenha muita atenção para não se esquecer
deste padrão, pois caso você inicie de uma forma [0] e utilize os valores de um array de outra
maneira [1], os dados não faram sentido, pois apontariam para valores diferentes. Muito cuidado!
Uma vantagem dos arrays em Javascript é que os tipos de dados podem ser alternados, em um mesmo vetor,
ou array, por exemplo.
1. <script type="text/javascript">
2. var valor = [1, "dois", 3.1, "4", 5.55];
3. </script>
Esta vantagem deve ser utilizada com cautela e muita atenção, afim de se evitar erros enquanto estes dados
estiverem sendo manipulados.
Outra forma de inicializar os valores é utilizando uma estrutura de repetição, veja o exemplo:
O AVA se comporta melhor no navegador Chrome.
AVA UNINOVE https://ava.uninove.br/seu/AVA/topico/container_impressao.php
3 of 14 14/05/2022 13:21
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Tópico 7</title>
5. <meta charset="UTF-8">
6. </head>
7. <body>
8. <div>Programação de Interfaces (aula 7)</div>
9. <script type="text/javascript">
10. var x = [];
11. for (var i = 0; i < 10; i++){
12. x[i] = i+1;
13. }
14.
15. for (var i = 0; i < 10; i++){
16. document.write("<br>x = " + x[i]);
17. }
18. </script>
19. </body>
20. </html>
Observe que no primeiro laço o array x[i] foi inicializado, enquanto que no segundo laço, os valores com os
respectivos índices foram impressos no arquivo html.
Veremos um exemplo de utilização de array com tipos String:
O AVA se comporta melhor no navegador Chrome.
AVA UNINOVE https://ava.uninove.br/seu/AVA/topico/container_impressao.php
4 of 14 14/05/2022 13:21
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Tópico 7</title>
5. <meta charset="UTF-8">
6. </head>
7. <body>
8. <div>Programação de Interfaces (aula 7)</div>
9. <script type="text/javascript">
10. var x = ["DOMINGO", "SEGUNDA", "TERÇA", "QUARTA", "QUINTA", "SEXTA",
11. for (var i = 0; i < 7; i++){
12. document.write(x[i] + " é o " + (i+1) + "º dia da semana!<br>");
13. }
14. </script>
15. </body>
16. </html>
Funções
Em alguns casos, obter informações sobre o array pode ser muito trabalhoso. Para facilitar este trabalho,
diversas funções ou propriedades estão disponíveis para nos auxiliar. Vamos verificar algumas delas:
Propriedade length()
Informa o tamanho de um array, de acordo com a quantidade de elementos existentes.
1. <script type="text/javascript">
2. var x = ["DOMINGO", "SEGUNDA", "TERÇA", "QUARTA", "QUINTA", "SEXTA", "SÁBADO"
3. document.write("O array x possui " + x.length + " valores de índices")
4. // Resultado: O array possui 7 valores de índices
5. </script>
Ou ser utilizado em um for( ), como determinar o fim do elemento array:
O AVA se comporta melhor no navegador Chrome.
AVA UNINOVE https://ava.uninove.br/seu/AVA/topico/container_impressao.php
5 of 14 14/05/2022 13:21
1. <script type="text/javascript">
2. var x = ["DOMINGO", "SEGUNDA", "TERÇA", "QUARTA", "QUINTA", "SEXTA", "SÁBADO"
3. for (var i = 0; i < x.length; i++){
4. document.write(x[i] + ". ");
5. }
6. </script>
Metodo push()
O método push adiciona um elemento, ou valor, ao final do array. Veja o exemplo:
1. <script type="text/javascript">
2. var x = [1,2,3];
3. x.push(4);
4. for (var i = 0; i < x.length; i++){
5. document.write(x[i] + " ");
6. // Resultado: 1 2 3 4
7. }
8. </script>
Método join()
O método Join adiciona uma String entre os elementos de um array, compondo um novo array com os
elementos adicionais. Veja o exemplo:
1. <script type="text/javascript">
2. var x = [1,2,3];
3. var novaLista = x.join(' / ');
4. document.write(novaLista);
5. //Resultado: 1 / 2 / 3
6. </script>
Método pop( )
O método pop retira o último elemento de um determinado array. Veja o exemplo:
O AVA se comporta melhor no navegador Chrome.
AVA UNINOVE https://ava.uninove.br/seu/AVA/topico/container_impressao.php
6 of 14 14/05/2022 13:21
1. <script type="text/javascript">
2. var x = [1,2,3];
3. x.pop();
4. for (var i = 0; i < x.length; i++){
5. document.write(x[i] + " ");
6. // Resultado: 1 2
7. }
8. </script>
Método shift( )
O método shift retira o primeiro elemento de um array. Veja o exemplo:
1. <script type="text/javascript">
2. var x = [1,2,3];
3. x.shift();
4. for (var i = 0; i < x.length; i++){
5. document.write(x[i] + " ");
6. // Resultado: 2 3
7. }
8. </script>
Método unshift()
O método unshift() adiciona elementos ao início de um array. Veja o exemplo:
1. <script type="text/javascript">
2. var x = [1,2,3];
3. x.unshift(7,8);
4. for (var i = 0; i < x.length; i++){
5. document.write(x[i] + " ");
6. // Resultado: 7 8 1 2 3
7. }
8. </script>
Método splice()
O método splice() seleciona um intervalo onde os valores irão compor um novo array, indicando o índice
inicial e final ao novo array. Observe que em um array o índice se inicia em zero. Veja o exemplo:
O AVA se comporta melhor no navegador Chrome.
AVA UNINOVE https://ava.uninove.br/seu/AVA/topico/container_impressao.php
7 of 14 14/05/2022 13:21
1. <script type="text/javascript">
2. var x = ['a','b','c','d','e','f','g'];
3. //indice: 0 , 1, 2, 3, 4, 5, 6
4. x = x.slice(1,5);
5. for (var i = 0; i < x.length; i++){
6. document.write(x[i] + " ");
7. // Resultado: b c d e
8. }
9. </script>
Método sort( )
O método sort() ordena os valores de um array. Tenha cuidado com os valores a serem ordenados, pois são
analisados os primeiros caracteres ou dígitos de cada elemento. Veja o exemplo:
1. <script type="text/javascript">
2. var x = ['3','7','4','10','6','2','5'];3. x=x.sort();
4. for (var i = 0; i < x.length; i++){
5. document.write(x[i] + " - ");
6. // Resultado: 10 - 2 - 3 - 4 - 5 - 6 - 7 -
7. }
8. </script>
Neste exemplo o valor 10 surge antes do valor 2, devido ao primeiro caracter de 10, valor 1, ser “menor” do
que o primeiro caracter do próximo valor, valor 2.
Método concat( )
O método concat() concatena, ou adiciona, uma nova sequência a um array. Veja o exemplo:
1. <script type="text/javascript">
2. var x = [1,2,3,4];
3. x = x.concat('um', 'dois', 'três', 'quatro');
4. for (var i = 0; i < x.length; i++){
5. document.write(x[i] + ", ");
6. // Resultado: 1, 2, 3, 4, um, dois, três, quatro,
7. }
8. </script>
O AVA se comporta melhor no navegador Chrome.
AVA UNINOVE https://ava.uninove.br/seu/AVA/topico/container_impressao.php
8 of 14 14/05/2022 13:21
Método reverse( )
O método reserve() inverte a ordem dos elementos de um array. Veja o exemplo:
1. <script type="text/javascript">
2. var x = [1,2,3,4];
3. x.reverse();
4. for (var i = 0; i < x.length; i++){
5. document.write(x[i] + " ");
6. // Resultado: 4 3 2 1
7. }
8. </script>
Array multidimensional
A utilização de array multidimensionais se dá com a criação de um array “dentro” de outro array. A ideia é a
mesma da utilização de uma matriz, onde possuímos linhas e colunas.
Veja este exemplo:
1. <script type="text/javascript">
2.
3. var m = new Array(3); // Criar um array de 3 elementos
4. for (var L = 0; L < 3; L++){
5. m[L] = new Array(3); // Cria um novo array de 3 elementos
6. for (var C = 0; C < 3; C++){
7. m[L][C] = (L + C + 1); // Atribui valores a cada posição do array
8. }
9. }
10.
11. //Exibi os valores da matriz
12. for (var L = 0; L < 3; L++){
13. for (var C = 0; C < 3; C++){
14. document.write("[" + m[L][C] + "] ");
15. }
16. document.write("<br>");
17. }
18. </script>
O AVA se comporta melhor no navegador Chrome.
AVA UNINOVE https://ava.uninove.br/seu/AVA/topico/container_impressao.php
9 of 14 14/05/2022 13:21
A imagem a seguir apresenta o resultado do array multidimensional:
No exemplo a seguir, temos um array já inicializado, e a exibição de apenas os elementos da coluna 0. Veja
o código de exemplo:
1. <script type="text/javascript">
2. var m = [
3. [1,2,3],
4. [4,5,6],
5. [7,8,9]
6. ];
7. for (L = 0; L < 3; L++){
8. document.write(m[L][0] + " ");
9. // Resultado: 1 4 7
10. }
11. </script>
O AVA se comporta melhor no navegador Chrome.
AVA UNINOVE https://ava.uninove.br/seu/AVA/topico/container_impressao.php
10 of 14 14/05/2022 13:21
DICA:
Para saber mais sobre arrays, veja em:
https://www.w3schools.com/js/js_arrays.asp (https://www.w3schools.com/js/js_arrays.asp)
https://www.w3schools.com/js/js_array_sort.asp (https://www.w3schools.com/js/js_array_sort.asp)
https://www.w3schools.com/js/js_array_methods.asp (https://www.w3schools.com
/js/js_array_methods.asp)
O AVA se comporta melhor no navegador Chrome.
AVA UNINOVE https://ava.uninove.br/seu/AVA/topico/container_impressao.php
11 of 14 14/05/2022 13:21
https://www.w3schools.com/js/js_arrays.asp
https://www.w3schools.com/js/js_arrays.asp
https://www.w3schools.com/js/js_arrays.asp
https://www.w3schools.com/js/js_arrays.asp
https://www.w3schools.com/js/js_arrays.asp
https://www.w3schools.com/js/js_arrays.asp
https://www.w3schools.com/js/js_array_sort.asp
https://www.w3schools.com/js/js_array_sort.asp
https://www.w3schools.com/js/js_array_sort.asp
https://www.w3schools.com/js/js_array_sort.asp
https://www.w3schools.com/js/js_array_sort.asp
https://www.w3schools.com/js/js_array_sort.asp
https://www.w3schools.com/js/js_array_methods.asp
https://www.w3schools.com/js/js_array_methods.asp
https://www.w3schools.com/js/js_array_methods.asp
https://www.w3schools.com/js/js_array_methods.asp
https://www.w3schools.com/js/js_array_methods.asp
https://www.w3schools.com/js/js_array_methods.asp
https://www.w3schools.com/js/js_array_methods.asp
https://www.w3schools.com/js/js_array_methods.asp
https://www.w3schools.com/js/js_array_methods.asp
IMPORTANTE:
Neste tópico apresentamos:
• Criação e uso de arrays.
• Utilização de propriedades e métodos aos arrays.
• Criação e uso de array multidimensionais.
Conclusão
Nesta aula abordamos o uso de arrays e suas propriedades e métodos. Utilizar array pode ser muito útil e
em dados momentos, será a única opção de se trabalhar com determinados dados.
ATIVIDADE
Escolha a alternativa que apresente o resultado do seguinte código:
<script type="text/javascript">
var x = [1,2,3];
var novaLista = x.join(' - ');
document.write(novaLista);
</script>
A. 1 - 2 - 3 -
B. 1 - 2 - 3
C. 1 / 2 / 3
D. 1 - 2 3
ATIVIDADE
Escolha a opção correta ao seguinte código:
<script type="text/javascript">
O AVA se comporta melhor no navegador Chrome.
AVA UNINOVE https://ava.uninove.br/seu/AVA/topico/container_impressao.php
12 of 14 14/05/2022 13:21
var x = [1,2,3];
x.unshift(4,5);
for (var i = 0; i < x.length; i++){
document.write(x[i] + " ");
}
</script>
A. 5 1 2 3 4
B. 5 4 3 2 1
C. 1 2 3 4 5
D. 4 5 1 2 3
ATIVIDADE
Escolha a alternativa correta ao seguinte código:
<script type="text/javascript">
var x = [1,2,3];
x.push(4);
for (var i = 0; i < x.length; i++){
document.write(x[i] + " ");
}
</script>
A. 4 1 2 3
B. 1 2 3 4
C. 4 3 2 1
D. 4 3 1 2
REFERÊNCIA
O AVA se comporta melhor no navegador Chrome.
AVA UNINOVE https://ava.uninove.br/seu/AVA/topico/container_impressao.php
13 of 14 14/05/2022 13:21
MORRISON, M. Use a cabeça JavaScript. 5º Ed. Rio de Janeiro: Alta Books, 2012. 606 p.
OLIVIERO. C. A. J. Faça um site JavaScript orientado por projeto. 6º ed. São Paulo: Érica, 2010. 266 p.
ZAKAS, Nicholas C. JavaScript de alto desempenho. 8º Ed. São Paulo: Novatec, 2010. 245 p.
O AVA se comporta melhor no navegador Chrome.
AVA UNINOVE https://ava.uninove.br/seu/AVA/topico/container_impressao.php
14 of 14 14/05/2022 13:21Mais conteúdos dessa disciplina
75029-Article Text-751375316070-1-10-20250812- Funções Recursivas na Computação
- TUDO o que você precisa saber - Business Challenge FGV Jogos de Empresas LDP Simulação de Estratégia - Resumo
- Captura de tela 2025-11-07 201229
- Captura de tela 2025-11-07 201155
- Captura de tela 2025-11-07 201114
- Captura de tela 2025-11-07 201036
- Captura de tela 2025-11-07 200948
- Captura de tela 2025-11-07 200851
- Questão 07 Três estruturas lógicas podem compor um algoritmo: (1) Estrutura sequencial, (2) Estrutura de seleção e (3) Estrutura de repetição. As...
- Questão 08 Analise a alternativa que apresenta a função correta que verifica se o ano passado como parâmetro é um ano bissexto ou não, caso seja r...
- uestao 5 Considere o vetor a seguir : Conteúdo 4 3 2 5 3 2 1 1 Índice 1 2 3 4 5 6 7 8 considere o algoritmo a seguir Algoritmo "semnome" Var ...
- Questao 5 Considere o vetor a seguir : Conteúdo 4 3 5 2 3 1 2 1 Índice 1 2 3 4 5 6 7 8 considere o algoritmo a seguir Algoritmo "semnome" Var...
- ode Algoritmo "exerc" Var i: inteiro nros: vetor[1..5] de inteiro Inicio para i de 1 até 5 faça escreva("Digite um valor") leia(nros...
- Sobre as leis 10.639 de 9 de janeiro de 2003 e 11.645 de 10 de março de 2008 é CORRETO afirmar que: Questão 6Resposta a. apenas a 10.639 de 9 de j...
- Questão 04 Analise o algoritmo a seguir: Code Algoritmo "exerc" Var i: inteiro nros: vetor[1..5] de inteiro Inicio para i de 1 até 5 faça ...
- Questão 03 Considere a seguinte fórmula para o cálculo do peso ideal de uma pessoa: Do sexo masculino: peso ideal = (72.7 × altura) − 58 Do sexo fe...
- 7.0 que caracteriza um loop aninhado? A. É a execução de dois ou mais loops em paralelo. B.É quando um loop está dentro de outro loop. C.É quando um l
- 5. Qual é O comportamento do else em um loop no Python? A. É executado sempre que O loop não é interrompido por um break. B.É executado no início do l
- Benjamin Mendelsohn classifica as vítimas de forma a compreender o crime, seu desenrolar e uma possível prevenção. Sobre a vítima de culpabilidade men
- Quando é utilizado as estruturas de repetição, precisamos contar quantas vezes uma instrução irá executar.Do que estamos falando? A) Gerador. B) Loopi
- É como é chamada a pseudolinguagem utilizada para a construção de algoritmos.Do que estamos falando? A) Portunhol. B) Portugol. C) Algol. D) Portu-alg
- Avaliação On-Line 5 (AOL 5) - Questionário
- Quais são os dois tipos de sistemas que trabalham com o foco na exploração dos dados: