Scribd
Carregar
0 visualizações4 páginas

Conectando HTML e Arrays no JS Final

O documento descreve como conectar uma interface HTML com arrays em JavaScript, permitindo capturar entradas do usuário e atualizar a tela em tempo real. Ele detalha comandos e lógicas do JavaScript, como a declaração de arrays, captura de conteúdo e injeção de texto. Além disso, sugere uma atividade prática para criar um sistema web personalizado com base na estrutura apresentada.

Enviado por

kalitaalmeidaferreiraa
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
0 visualizações4 páginas

Conectando HTML e Arrays no JS Final

O documento descreve como conectar uma interface HTML com arrays em JavaScript, permitindo capturar entradas do usuário e atualizar a tela em tempo real. Ele detalha comandos e lógicas do JavaScript, como a declaração de arrays, captura de conteúdo e injeção de texto. Além disso, sugere uma atividade prática para criar um sistema web personalizado com base na estrutura apresentada.

Enviado por

kalitaalmeidaferreiraa
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd

Conectando a Interface (HTML) com

Arrays (JavaScript)

Nesta etapa, saímos da exibição exclusiva pelo Console (F12) e passamos a capturar as
entradas digitadas pelo usuário no navegador, armazená-las na memória (Array) e atualizar os
elementos da tela em tempo real.

1. Comandos e Lógicas do JavaScript (JS)


Código / Sintaxe Para que serve?
let listaDeFilmes = []; Declaração de Array Global: Cria a lista vazia
no escopo global (fora das funções). Isso
impede que a memória seja apagada a cada
clique no botão.
[Link]("id") Localiza e captura uma tag HTML dentro da
página utilizando o atributo id como endereço
único.
.value Captura de Conteúdo: Lê o texto que o
usuário digitou dentro de uma caixa de entrada
(<input>).
.push Inserção no Array: Método que adiciona o
novo elemento automaticamente no final da
última posição (gaveta) disponível do Array.
.innerText Injeção de Texto no HTML: Modifica apenas o
texto visível contido dentro de uma tag (como
um parágrafo <p>).
.join(" - ") Conversão de Array para Texto: Pega todos
os elementos da lista e junta em uma única
linha de texto, separando cada item pelo
caractere escolhido (no caso, o traço " - ").
.length Contador de Elementos: Propriedade que
retorna o número total de elementos
armazenados dentro do Array no momento.
${variável} Interpolação de Texto: Permite misturar texto
fixo com variáveis dentro de crases (` `) sem a
necessidade de usar o operador de soma (+).
[Link] = ""; Reset de Campo: Limpa o texto da caixa de
entrada logo após a leitura.
​
2. Elementos e Atributos do HTML
●​ <input type="text" id="campoFilme">: Caixa onde o usuário digita. O atributo
id="campoFilme" serve de ponte para o JS encontrar este campo.​

●​ <button onclick="adicionarFilme()">: O atributo onclick define qual função do JavaScript


será executada quando o usuário clicar no botão.​

●​ <p id="...">: Parágrafos com IDs específicos que servem de "marcadores de posição"
para o JavaScript injetar os resultados calculados.​

●​ <script src="[Link]"></script>: Tag responsável por carregar e executar o arquivo de


lógica JavaScript na página.

HTML:​
JS:

​
​

Resultado:​
​
Atividade Prática:

Utilize a estrutura do projeto acima e adapte para criar um sistema Web próprio sobre um tema
de sua escolha, ajustando o código HTML, a lógica do JavaScript e o visual com CSS de
acordo com o tema escolhido.

Exemplos de temas:

- Lista de Compras de Supermercado

- Inventário de Jogos / Personagens

- Playlist de Músicas

- Escalação de Time de Futebol

- Cardápio de Sabores de Pizza

Você também pode gostar