Skip to content

5 Quinta Etapa

Jump to bottom
Rodrigo Morais edited this page Mar 3, 2023 · 3 revisions

Listas, Para Cada, Salve

Objetivos

Agora, nós temos um aplicativo que pode criar, editar e apagar notas. Porém, se fecharmos o nosso navegador, acabamos perdendo todas as nossas notas.

Bom mesmo seria se tivessemos a capacidade de salvar o texto nas nossas notas, para que, mesmo fechando o navegador, possamos recuperar o que escrevemos.

Pois esse é o nosso novo objetivo agora: criar um sistema que consiga salvar o texto de nossas notas.

Para isso, nesta aula nos aprofundaremos um pouco mais em certos aspectos do JavaScipt. Aqui, aprenderemos sobre:

  1. Parâmetros de funções
  2. Listas (também chamadas de Arrays)
  3. Ciclos (loops) com for (item of lista)
  4. localStorage (armazenamento local)

Parâmetros de funções

Antes de criar o sistema para salvar nossas notas, precisamos preparar nosso código para que ele possa servir dentro desse novo sistema.

A ideia é modificar nossa função adicionarNota para que possamos usa-lá para recriar uma nota com um texto salvo, ao invés de só conseguir adicionar notas vazias com nosso botão.

Lembra de nossa função adicionarNota? Por enquanto, ela é algo assim:

function adicionarNota() {
  // codigo...
}

Nós temos, na primeira linha, a declaração da função, onde dizemos para o JavaScript que estamos criando uma função (function) chamada adicionarNota. Uma outra parte dessa declaração que ainda não usamos, é a parte dos parêntesis.

Dentro desses parêntesis, podemos escrever o que chamamos de parâmetros. Vamos testar usando uma nova função:

function teste() {
  
}

Como vimos com outras funções que temos usado, podemos "chamar" a nossa função da seguinte forma:

teste()

Se colocarmos uma variavel nos parentesis de nossa função, estaremos dando um parâmetro a ela. Vamos fazer isso e também colocar um console.log (que também é uma função com parametros) para ver o que acontece:

function teste(variavel) {
  console.log(variavel)
}

Se chamarmos nossa função com uma palavra dentro dos parêntesis:

teste('ola')

O que acontece?

Vemos que o console.log usou a palavra que passamos como parâmetro para a função teste. Usar:

function teste(variavel){
  //codigo
}

É parecido com fazer:

function teste() {
  let variavel = 'ola'
}

Porém, quando usamos um parâmetro, temos a vantagem de poder alterar o paramêtro de fora da função.

Antes de prosseguir, uma outra coisa para saber sobre parâmetros é que é possivel definir valores padrões:

function teste(variavel='ola') {
  console.log(variavel)
}

Dessa forma, quando a gente chamar a função sem dar nenhum parâmetro, variavel será igual a 'ola' (seu valor padrão).

Texto da Nota

Vamos integrar esse novo conhecimento na nossa função adicionarNota. Quando criamos a variável textoNota, vamos usar o valor dado como parametro se ele não estiver vazio. Na linha onde criamos o textoNota, ao invés disso:

function adicionarNota(textoParametro='') {
  // codigo...
  
  const textoNota = blocoNota.querySelector('.texto-nota')
  
  // codigo..
}

Faremos o seguinte:

function adicionarNota(textoParametro='') {
  // codigo...
  
  const textoNota = blocoNota.querySelector('.texto-nota')

  if (textoParametro !== '') {
    textoNota.value = textoParametro
  }
  
  // codigo..
}

Listas

Listas, também muito conhecidas como Array, é uma estrutura que organiza dados. É como se fosse uma lista de compras, para nos lembrar do que comprar no mercado, mas no array colocamos vários dados (variáveis, strings, números).

Organizar dados na forma de uma lista (array) nos ajuda muito porque podemos aproveitar seus métodos ou funções, que percorrem todos esses dados e fazem uma manipulação ou readequação no código em cima de cada elemento ali dentro (ver mais em Leitura Complementar)

Para criarmos um Array precisamos fazer o seguinte:

const novoArray = [1, 2, 3, 'abacate', 'ovo']

Declaramos uma nova variável e ela recebe dados, separados por vírgulas, dentro de colchetes. Cada elemento ocupa uma posição dentro do array, essa posição é chamada de índice e contamos ele começando por zero (0). Desse jeito:

------------------0---1--2-----3---------4--
const novoArray = [1, 2, 3, 'abacate', 'ovo']

Ou seja, o array possui valores nos ídices 0, 1, 2, 3 e 4.

Cuidado para não confundir índices com tamanho! Se um array tem seu último valor no índice 4, não quer dizer que o tamanho dele é de 4 elementos. Nesse caso, o array possui tamanho 5, pois contamos o 0 como um espaço que contém um valor armazenado.

É importante, também, sabermos como acessar um elemento específico dentro dessa lista. Fazemos isso da seguinte maneira:

------------------0---1--2-----3---------4--
const novoArray = [1, 2, 3, 'abacate', 'ovo']

console.log(novoArray[3]) // 'abacate'

console.log(novoArray[1]) // 2

Acessamos o valor de um ìndice dentro de um array passando qual a posição que o elemento ocupa dentro de colchetes, logo após o nome da lista.

Para Cada

Agora que sabemos sobre listas, vamos aprender como fazer o que chamamos de 'iteração'. Estaremos usando uma lista para guardar o conteúdo de cada uma das notas, por isso, é util poder passar por cada um dos valores na nossa lista de notas individualmente.

Pra começar, vamos criar uma nova função salvarNotas:

function salvarNotas() {
  
}

Vamos, então, acessar cada um dos elementos textarea usando uma função chamada querySelectorAll. Esta função nos dá uma lista de todos os elementos textArea:

function salvarNotas() {
  const listaDeNotas = document.querySelectorAll('textarea')
}

A variavel listaDeNotas vai conter uma lista de elementos HTML do tipo textarea. Porém, o que precisamos salvar é somente o texto dentro desses elementos. Por isso vamos usar o que chamamos de loop:

function salvarNotas() {
  const listaDeNotas = document.querySelectorAll('textarea')

  const listaDeTextos = [] // lista vazia

  for (nota of listaDeNotas) {
    const texto = nota.value
    listaDeTextos.push(texto)
  }
}

O loop é a linha com for (nota of listaDeNotas), que pode ser lido como "para cada nota da listaDeNotas". O loop vai rodar varias vezes. Em cada uma das vezes que rodar, uma das notas vai estar dentro da variavel nota.

Por exemplo, se temos duas notas, o loop vai fazer o mesmo processo que se tivessemos escrito o seguinte:

listaDeNotas = ['nota 1', 'nota 2']
// primeira rodada do loop:
nota = listaDeNotas[0]
// segunda rodada do loop:
nota = listaDeNotas[1]

O loop facilita bastante o nosso trabalho. Já pensou no caso de criarmos 100 notas se tivessemos que escrever isso 100 vezes?

Dentro do loop for, nós extraímos o texto de dentro do elemento textarea:

const texto = nota.value

Depois inserimos esse texto dentro da nossa lista:

listaDeTextos.push(texto)

LocalStorage

Finalmente, podemos salvar essa lista no armazenamento local:

function salvarNotas() {
  const listaDeNotas = document.querySelectorAll('textarea')

  const listaDeTextos = []

  for (nota of listaDeNotas) {
    const texto = nota.value
    listaDeTextos.push(texto)
  }
  
  localStorage.setItem('textosSalvos', JSON.stringify(listaDeTextos))
}

Isolando essa última parte com o localStorage:

localStorage.setItem('textosSalvos', JSON.stringify(listaDeTextos))

O que acontece nessa linha é:

  1. Pegamos o objeto localStorage (da mesma forma que usamos o document)
  2. Chamamos a função setItem que nos permite definir um item no armazenamento local
  3. Damos um nome para esse item (no caso, 'textosSalvos')
  4. Transformamos a nossa variavel listaDeTextos em um formato que possa ser salvo no armazenamento local Em outras palavras falamos o seguinte:

localStorage, defina um item com este nome: 'textosSalvos', e coloque isso aqui dentro dele: JSON.stringify(listaDeTextos)

Essa última parte de como essa tradução da nossa variável para algo que possa ser armazenado vai um pouco além do escopo dessa aula. O mais importante de entender é que estamos usando a função JSON.stringify para traduzir nossa lista listaDeTextos.

Salvando Notas

Agora que temos nossa função de salvar notas, vamos colocá-la para ser chamada quando uma nota for ou editada ou deletada.

Convenientemente, já temos o código para quando uma nota é deletada dentro da função adicionarNota:

botaoApagar.addEventListener('click', () => {
  console.log('botao de apagar foi clicado')
  blocoNota.remove()

  salvarNotas()
})

Já para a edição de nota, podemos aproveitar o addEventListener do botão de apagar, adicionando o salvarNotas() no final:

botaoApagar.addEventListener('click', () => {
  console.log('botao de apagar foi clicado')
  blocoNota.remove()

  salvarNotas()
})

Recuperando Notas

Agora que salvamos nossas notas, vamos voltar lá pro inicio do nosso código, logo antes de declararmos a função adicionarNota:

function adicionarNota(texto='') {
  // codigo...
}

Aqui, nós vamos pegar as notas salvas no localStorage:

const listaDeTextos = JSON.parse(localStorage.getItem('textosSalvos'))

function adicionarNota(texto='') {
  // codigo...
}

Assim como tinhamos usado o localStorage para salvar, usamos o localStorage.getItem para recuperar nossos 'textosSalvos' do armazenamento. Dessa vez, usamos uma função JSON.parse pra traduzir nossa lista do armazenamento para uma lista de JavaScript.

Podemos usar um loop for combinado com nossa função adicionarNota para recriar nossas notas:

const listaDeTextos = JSON.parse(localStorage.getItem('textosSalvos'))

for (textoRecuperado of listaDeTextos) {
  adicionarNota(textoRecuperado)
}

function adicionarNota(texto='') {
  // codigo...
}

Finalmente, vamos fazer com que esse loop só aconteça se a listaDeTextos existir:

const listaDeTextos = JSON.parse(localStorage.getItem('textosSalvos'))

if (listaDeTextos){
  for (textoRecuperado of listaDeTextos) {
    adicionarNota(textoRecuperado)
  }
}

function adicionarNota(texto='') {
  // codigo...
}

Leitura Complementar:

Clone this wiki locally