Skip to content

2 Segunda Etapa

Jump to bottom
Pedro Garibaldi Santos edited this page Feb 16, 2023 · 1 revision

Interações entre HTML e JS

Objetivos

Nesta aula, iremos aprender mais formas de interação entre o HTML e o JS. Ao fim deste documento, você tera visto sobre:

  1. Tags <p>, <div> e <textarea> do HTML
  2. Concatenação de texto
  3. Edição de elementos HTML através do JS

Ao final desta etapa nosso projeto estará pronto para, de uma forma simples, adicionar novas notas na tela baseado no o que foi escrito em uma caixa de texto.

Tag textarea

Utilizaremos uma nova tag, chamada textarea:

<textarea></textarea>

Insira esta tag dentro do <body> de index.html. Para isso, localize a linha com o código <body>, crie uma nova linha abaixo desta, e adicione o código da nova tag textarea acima. O que acontece com a sua página?

O elemento <textarea> serve para criar uma caixa capaz de receber o texto de um usuário.

Função para Adicionar Nota

Agora que temos um elemento próprio para receber o texto de uma nota, vamos editar nossa função dizOi e chamá-la de adicionarNota:

function adicionarNota() {
  
}

Lembre-se de também renomear a função dentro de addEventListener:

botaoAddNota.addEventListener('click', () => adicionarNota())

Dentro dessa função queremos acessar o elemento que criamos no passo anterior. Para isso, precisamos adicionar um id ao elemento textarea. No arquivo index.html:

<textarea id="area-de-texto"></textarea>

Agora podemos fazer o mesmo processo da aula anterior. Usando document.getElementById fora de nossa função adicionarNota:

const novaNota = document.getElementById('area-de-texto')
function adicionarNota() {
  
}

Propriedades do elemento <textarea>

Na aula anterior, vimos uma das propriedades do elemento button, o addEventListener.

O elemento <textarea> também tem propriedades que podemos acessar de forma similar. A propriedade que nos interessa aqui, é a propriedade value.

Essa propriedade nos diz qual o valor do elemento <textarea>. Em outras palavras, o que foi escrito dentro do elemento:

const novaNota = document.getElementById('area-de-texto')
function adicionarNota() {
  const textoNovaNota = novaNota.value
}

Vamos experimentar usando o console.log:

const novaNota = document.getElementById('area-de-texto')
function adicionarNota() {
  const textoNovaNota = novaNota.value
  console.log(textoNovaNota)
}

Escreva na caixa de texto e aperte o botão. O que acontece no console?

Nosso próximo objetivo é conectar este valor que recebemos no JS com o HTML para que ele possa ser exibido na página, e não somente no console.log.

A seguir, vamos aprender sobre as tags <div> e <p>, necessárias para o próximo passo.

Tags <div> e <p>

Agora que já estamos capiturando o valor do campo de texto, o próximo passo é entender como exibir este valor na nossa página.

Antes de ir para o código, vamos aprender sobre as tags <div> e <p>.

Tag <p>

Significa parágrafo. Esta tag cria um parágrafo de texto no site. Para nós, cada Nota será um parágrafo novo. Exemplo:

<p>Minha primeira nota</p>

Tag <div>

Significa divisão de elementos no site. É uma tag utilizada para organizar nosso HTML.

Quando temos elementos que se repetem (como as nossas notas) é comum estes elementos ficarem dentro de uma tag div. Exemplo:

<div>
  <p>Minha primeira nota</p>
  <p>Minha segunda nova</p>
</div>

Adicione uma lista de notas no seu HTML

Vá no seu arquivo index.html e, abaixo da tag <button> adicione o seguinte código:

<div>
  <p>Anotação 1</p>
  <p>Anotação 2</p>
</div>

Analise o resultado deste código ao executar o projeto.

Nosso próximo objetivo é tornar esta lista dinâmica em vez de manualmente adicionar novas notas no HTML. Queremos utilizar o valor recebido da caixa de texto de alterar o HTML com aquele dado.

A seguir vamos aprender sobre Concatenação de textos, um conceito importante para criar tags HTML de dentro do JavaScript.

Concatenação de Textos

Outro conceito importante para continuarmos é o de concatenação de textos no JavaScript. Concatenar significa "unir" dois ou mais pedaços de textos em uma única variável.

Existem algumas formas diferentes para se unir textos no JS.

Aqui iremos utilizar o operador +. Quando usado com números, o + executa a soma, como esperado. Mas quando utilizado com textos no meio da operação, se torna um operador de união ou concatenação:

console.log(2 + 2) // Resultado: 4
console.log('a' + 'b') // Resultado:  'ab'
console.log(2 + 'a') // Qual o resultado desta operação?

Exemplo mais completo:

const texto1 = 'ola, '
const texto2 = 'meu nome é '
const nome = 'João'
console.log(texto1 + texto2 + nome) 
// Resultado: 'ola, meu nome é João'

Agora que sabemos como juntar diferentes partes de um texto, vamos voltar ao nosso script.js para finalmente gerar nossa lista dinâmica.

Gerando a lista de Notas no HTML através do JS

Nesta etapa, vamos alterar nossa div no HTML, removendo as anotações adicionadas manualmente. Também vamos adicionar um id para que possamos encontrar o elemento no JS.

No index.html, a div deve ficar assim:

<div id="lista-notas">
</div>

No script.js vamos voltar alterar nossa função adicionarNota(). Nela, vmoasPerceba como a concatenação de textos é utilizada para criar uma tag <p> direto do JS:

function adicionarNota() {
  // 1a etapa: monta código HTML que será adicionado à página
  const notas = document.getElementById('notas')
  const textoNovaNota = elementoNovaNota.value
  const novaNotaHTML = '<p>' + textoNovaNota + '</p>'

  console.log(novaNotaHTML)
}

Execute o código e teste: ao digitar uma nota e clicar no botão, devemos ver, no console.log, o código HTML que devemos exibir na página.

O próximo agora passo é pegar este código e colocar dentro da tag div que criamos no index.html.

Propriedade innerHTML (HTML Interno)

No JavaScript, podemos acessar ou alterar todo o HTML interno de um dado element usando elemento.innerHTML. No nosso caso, queremos alterar o conteúdo HTML da nossa div para incluir as novas notas.

A propriedade innerHTML é utilizada para isto. Exemplo:

meuElemento.innerHTML // recupera o código HTML de dentro do elemento
meuElemento.innerHTML = '' // sobrescreve HTML interno. Neste caso apagando

Alterando o HTML da lista de Notas com o innerHTML

Utilizando o novo conceito de "HTML interno" apresentado acima, nossa função adicionarNota ficará assim:

function adicionarNota() {
  // 1a etapa: monta código HTML que será adicionado à página
  const notas = document.getElementById('notas')
  const textoNovaNota = elementoNovaNota.value
  const novaNotaHTML = '<p>' + textoNovaNota + '</p>'

  // 2a etapa: adiciona a nova Nota como um parágrafo no site
  const notasAtuais = notas.innerHTML
  const notasFinais = notasAtuais + novaNotaHTML
  notas.innerHTML = notasFinais
}

Execute este código e brinque um pouco com o resultado. Após isto, retorne ao código e busque entendê-lo 100%. Este conceitos novos vão aparecer bastante no dia-a-dia trabalhando com programação.

Parabéns! Seu projeto agora consegue receber e exibir uma lista simples de anotações!. E tudo isto com poucas linhas de JavaScript e HTML 😄

Leitura Complementar:

Clone this wiki locally