Skip to content

Terceira Etapa

Jump to bottom
andrario edited this page Feb 9, 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. Planejamento da criação de um elemento
  2. Criação de elementos HTML através do JS
  3. querySelector como método de busca de elementos por classes

Ao final desta etapa nosso projeto estará pronto para adicionar seções com blocos de texto e botões de ação a cada clique de um botão.

Refatorando as tags <p>

A partir do código apresentado na última aula, vamos alterar as tags <p> um elemento mais próximo do nosso objetivo o <textarea>, de modo que a função adicionarNota ficará:

function adicionarNota() {
  const novaNotaHTML = '<textarea></textarea>'
  const notasAtuais = notas.innerHTML
  const notasFinais = notasAtuais + novaNotaHTML
  notas.innerHTML = notasFinais
}

Agora a clique no botão, uma área de texto é criada.

Planejando a Criação do Elemento Bloco de Notas

Agora que a página é capaz de criar diversas áreas de anotação, é preciso planejar como serão construídos cada bloco de notas no HTML.

Observando o objetivo, podemos observar algumas caracteristicas que desejamos do elemento de notas:

O elemento poder ser divido em duas partes:

  • Um cabeçalho, com uma cor distinta e dois botões.
  • Uma área para escrita de texto.

Como vimos antes, para dividir e organizar os elementos HTML podemos usar a tag <div> para encapsular outros elementos. Primeiro serão criadas as divisões:

<div id="cabecalho"> </div>
<div id="nota"> </div>

Em seguida, vamos adicionar os botões usando a tag <button> no cabeçalho:

<div id="cabecalho">
  <button id="editar">🖊️</button>
  <button id="apagar">🗑️</button>
</div>
<div id="nota"> </div>

Basta adicionar inserir uma área de texto para completar o elemento:

<div id="cabecalho">
  <button id="editar">🖊️</button>
  <button id="apagar">🗑️</button>
</div>
<div id="area-nota">
  <textarea id="texto-nota"></textarea>
</div>

Por fim, para tratar este conjunto de duas <div> com um único elemento, podemos encasulá-los em outra <div>:

<div id="bloco-notas">
  <div id="cabecalho">
    <button id="editar">🖊️</button>
    <button id="apagar">🗑️</button>
  </div>
  <div id="area-nota">
    <textarea id="texto-nota"></textarea>
  </div>
</div>

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