Programação em JavaScript: Criar e Manipular Arrays

Programação em JavaScript: Criar e Manipular
Arrays

Transcript

1. Programação para Internet I Programação em JavaScript: Criar e Manipular Arrays Prof. Alcione R Morais
2. Programação em JavaScript IFSUL – Sapiranga | Linguagem JavaScript 2 Aula 20/05 Variáveis; Conceitos; Declaração Aula 27/05 Criar e Manipular Arrays Aula 03/06 Criar e Manipular Objetos Aula 10/05 Atividade Prática Supervisionada Avaliativo (APS
3. Roteiro IFSUL – Sapiranga | Linguagem JavaScript 3 • Relembrando aula passada. • Variáveis; • Conceitos; • Declaração. • Arrays. • Preparando o ambiente; • Adicionar e Remover Elementos; • Manipulação de Acesso; • Métodos de Iteração. • Exercícios
4. Preparando o ambiente • Antes “codar”: • Vamos deixar tudo configurado. • Instalar o node.js: • Site oficial: https://nodejs.org/en/download • Link de ajuda postado no Moodle • Instalar Visual Studio Code Code(VSCode): • Site oficial: https://code.visualstudio.com/ • Link de ajuda postado no Moodle 4 IFSUL – Sapiranga | Linguagem JavaScript
5. Preparando o ambiente • Como testar: • Nossos testes no VSCode: • Digitando “node nome do arquivo.js” • Vamos usar NodeJS para testar nossas códigos JavaScript no console: IFSUL – Sapiranga | Linguagem JavaScript 5
6. Variáveis • Conceitos "Uma variável é basicamente um contêiner que armazena um valor. Este valor pode ser alterado conforme o código é executado, daí o nome 'variável'." (BATTISTI, 2023, p. 22). "As variáveis não têm nenhum tipo predeterminado. Em vez disso, o seu tipo foi definido pelo seu valor." (PINHO, 2017, p. 53). 6 IFSUL – Sapiranga | Linguagem JavaScript
7. Variáveis • Declaração: • “var”, “let” e “cosnt” • “var”: forma antiga, devemos evitar usar; • “let”: deseja mudar mais tarde; • “const”: não vai mudar ; • “let” e “const” foram introduzidas em ES6 (ECMAScript 2015). 7 IFSUL – Sapiranga | Linguagem JavaScript
8. Variáveis • Exemplos: “let” e “cosnt” • Valor não pode ser alterado uma vez atribuído. • Respeita o escopo de bloco. 8 IFSUL – Sapiranga | Linguagem JavaScript
9. Dúvidas? 9 IFSUL – Sapiranga | Linguagem JavaScript
10. Arrays [ ] • Arrays • Declarado entre colchetes [] e separamos cada valor por vírgula , . • Também conhecidos como listas • Serve para guarda diferentes valores em uma única variável • Podemos ter itens de qualquer tipo de dado também; • Porém não por chave e valor, e sim por índice; 10 IFSUL – Sapiranga | Linguagem JavaScript
11. Arrays [ ] • Vamos fazer alguns testes! 11 IFSUL – Sapiranga | Linguagem JavaScript
12. Arrays [ ] • Adicionar e Remover Elementos. • push(): adiciona um novo elemento ao final do array. • pop(): remove o último elemento do array. • unshift(): adiciona um novo elemento ao início do array. • shift(): remove o primeiro elemento do array. 12 IFSUL – Sapiranga | Linguagem JavaScript
13. Arrays [ ] • Adicionar e Remover Elementos • push(): adiciona um ou mais elementos ao final de um array e retorna o novo comprimento do array. 13 IFSUL – Sapiranga | Linguagem JavaScript let times = ['Grêmio', 'Inter']; times.push('Juventude');
14. Arrays [ ] • Adicionar e Remover Elementos • pop(): remove o último elemento de um array e retorna esse elemento. 14 IFSUL – Sapiranga | Linguagem JavaScript let times = ['Grêmio', 'Inter’ , 'Juventude']; times.pop();
15. Arrays [ ] • Adicionar e Remover Elementos • unshift(): adiciona um ou mais elementos no início de um array e retorna o novo comprimento do array. 15 IFSUL – Sapiranga | Linguagem JavaScript let times = ['Grêmio', 'Inter’]; times.unshift('Caxias');
16. Arrays [ ] • Adicionar e Remover Elementos. • shift():remove o primeiro elemento de um array e retorna esse elemento. 16 IFSUL – Sapiranga | Linguagem JavaScript let times = ['Caxias','Grêmio', 'Inter’]; times.shift();
17. Dúvidas? 17 IFSUL – Sapiranga | Linguagem JavaScript
18. Arrays [ ] • Manipulação e Acesso • concat(): retorna um novo array que é a junção do array original com outros valores ou arrays passados como parâmetros. • slice(): cria um novo array a partir de uma parte do array existente. • join(): une todos os elementos do array em uma única string 18 IFSUL – Sapiranga | Linguagem JavaScript
19. Arrays [ ] • Manipulação e Acesso • concat(): retorna um novo array que é a junção do array original com outros valores ou arrays passados como parâmetros. 19 IFSUL – Sapiranga | Linguagem JavaScript let timesPoa = ['Grêmio', 'Inter']; let timesCaxias = ['Caxias', 'Juventude']; let todosTimes = timesPoa.concat(timesCaxias);
20. Arrays [ ] • Manipulação e Acesso • Join(): une todos os elementos de um array em uma string e retorna essa string. Podemos especificar um separador; caso contrário, será usada uma vírgula. 20 IFSUL – Sapiranga | Linguagem JavaScript let todosTimes = ['Grêmio','Inter','Caxias','Juventude']; let todosTimesString = todosTimes.join(" * "); let todosTimesTexto = todosTimes.join(" -> ");
21. Arrays [ ] • Manipulação e Acesso • slice():retorna uma cópia de parte de um array, delimitado por índice de início e fim. 21 IFSUL – Sapiranga | Linguagem JavaScript let todosTimes = ['Grêmio', 'Inter', 'Caxias', 'Juventude']; let ultimoTime = todosTimes.slice(3); let parteTimes= todosTimes.slice(1,3);
22. Dúvidas? 22 IFSUL – Sapiranga | Linguagem JavaScript
23. Arrays [ ] • Métodos de Iteração • forEach(): executa uma função para cada elemento do array. • map: cria um novo array com o resultado da chamada de uma função para cada elemento do array. • filter(): cria um novo array com todos os elementos que passam no teste implementado pela função fornecida. 23 IFSUL – Sapiranga | Linguagem JavaScript
24. Arrays [ ] • Métodos de Iteração • forEach(): executa uma função para cada elemento do array. 24 IFSUL – Sapiranga | Linguagem JavaScript let todosTimes = ['Grêmio', 'Inter', 'Caxias', 'Juventude']; todosTimes.forEach(function(time){ console.log(time); });
25. Arrays [ ] • Métodos de Iteração • map: cria um novo array com o resultado da chamada de uma função para cada elemento do array. 25 IFSUL – Sapiranga | Linguagem JavaScript let numeros =[0,1,2,3,4,5,6,7,8,9]; let multplica = numeros.map( function(numero){ return numero * numero });
26. Arrays [ ] • Métodos de Iteração • filter(): cria um novo array com todos os elementos que passam no teste implementado pela função fornecida. 26 IFSUL – Sapiranga | Linguagem JavaScript let numeros =[0,1,2,3,4,5,6,7,8,9]; let nPares = numeros.filter( function(numero){ return numero % 2 === 0; });
27. Dúvidas? 27 IFSUL – Sapiranga | Linguagem JavaScript
28. Exercícios 1. Realizar e quiz no noodle para fixação do conteúdo 2. Crie um array chamado times e adicione três times a ele. Use o método push para adicionar uma quarto time, depois use o método shift para remover a primeira fruta do array. 3. Crie um array chamado numeros com cinco números diferentes. Use o método map para criar um novo array onde cada número seja multiplicado por si mesmo. Postar os exercícios no Moodle IFSUL – Sapiranga | Linguagem JavaScript 28
29. Retomando a aula de hoje IFSUL – Sapiranga | Linguagem JavaScript 29 • Relembrando aula passada. • Variáveis • Conceitos • Declaração • Arrays. • Preparando o ambiente • push e pop • unshift e shift • concat, join e slice • forEach, map e filter • Exercícios
30. Programação em JavaScript IFSUL – Sapiranga | Linguagem JavaScript 30 Aula 27/05 Aula 03/06 Criar e Manipular Objetos Aula 10/05 Funções em JavaScript Criar e Manipular Arrays Aula 10/05 Atividade Prática Supervisionada Avaliativo (APS
31. Referências DE PINHO, D. M. ECMA. Script 6: Entre de cabeça no futuro do JavaScript. 1. ed. São Paulo, SP: Casa do Código, 2017 BATTISTI, Matheus. JavaScript para Iniciantes. 1. ed. [Local de publicação]: [Editora], 2023. OLIVEIRA, Cláudio Luís Vieira; ZANETTI, Humberto Augusto Piovesana. Node.js: programe de forma rápida e prática. São Paulo: Expressa, 2021. 1 recurso online. ISBN 9786558110217. JAVASCRIPT. Brief History of JavaScript. Disponível em https://sakthi98.hashnode.dev/brief-history-of- Javascript Acessado em 18 de março de 2025. MOZILLA. JavaScript. MDN Web Docs, [s.d.]. Disponível em: https://developer.mozilla.org/pt- BR/docs/Web/JavaScript. Acesso em: 25 março. 2025. IFSUL – Sapiranga | Linguagem JavaScript 31
32. Dúvidas? IFSUL – Sapiranga | Linguagem JavaScript 32