Mudanças entre as edições de "Javascript: elementos dinâmicos"
De Aulas
| (Uma revisão intermediária pelo mesmo usuário não está sendo mostrada) | |||
| Linha 1: | Linha 1: | ||
| − | Afluentes: [[Desenvolvimento Front-end I | + | Afluentes: [[Desenvolvimento Front-end I]], [[Usabilidade, desenvolvimento web, mobile e jogos]]. |
= Elementos Dinâmicos = | = Elementos Dinâmicos = | ||
| Linha 115: | Linha 115: | ||
* crie uma lista (bullets) vazia | * crie uma lista (bullets) vazia | ||
* Ao clicar no botão ENVIAR, adiciona um ítem na lista com o conteúdo do campo texto e apague o conteúdo do campo texto | * Ao clicar no botão ENVIAR, adiciona um ítem na lista com o conteúdo do campo texto e apague o conteúdo do campo texto | ||
| + | |||
| + | == Atividade 3 == | ||
| + | |||
| + | * Crie um código HTML | ||
| + | * Crie três campos de entrada (nome, telefone, e-mail) | ||
| + | * Crie dois botões (adicionar, limpar) | ||
| + | * Crie uma tabela com três colunas e com os títulos Nome, Telefone e E-mai | ||
| + | * Ao entrar com informações nos campos texto e clicar no botão adicionar, é criada uma linha na tabela e são adicionados os dados que estavam nos campos de texto e os campos de texto são limpos | ||
| + | * Ao clicar no botão limpar, exclui todas as linhas da tabela, menos a linha de título | ||
Edição atual tal como às 09h55min de 22 de abril de 2024
Afluentes: Desenvolvimento Front-end I, Usabilidade, desenvolvimento web, mobile e jogos.
Elementos Dinâmicos
É possível, com o uso de Javascript, adicionar e remover qualquer tipo de elemento HTML de uma página.
Adicionando Elementos
<!DOCTYPE html>
<html>
<head><title>Elementos Dinâmicos</title></head>
<body id="corpo">
<h1>Adicionar Elementos</h1>
<p>
Digite o texto:
<input type="text" id="texto">
</p>
<p>
<button onclick="adicionar()">Adicionar</button>
</p>
<script>
function adicionar() {
var texto = document.getElementById("texto");
var para = document.createElement("p");
para.innerHTML = texto.value;
var corpo = document.getElementById("corpo");
corpo.appendChild(para);
texto.value = "";
}
</script>
</body>
</html>
Removendo Elementos
O exemplo a seguir remove um elemento da página html.
<!DOCTYPE html>
<html>
<head><title>Elementos Dinâmicos</title></head>
<body id="corpo">
<h1>Remover Elemento</h1>
<button onclick="remover()">Remover</button></p>
<p id="texto">Texto que será removido...</p>
<script>
function remover() {
var pai = document.getElementById("corpo");
var filho = document.getElementById("texto");
pai.removeChild(filho);
}
</script>
</body>
</html>
Adicionando e Removendo Dinamicamente
<!DOCTYPE html>
<html>
<head>
<title>Elementos Dinâmicos</title>
</head>
<body id="corpo">
<h1>Adicionar Elementos</h1>
<p>
Digite o texto:
<input type="text" id="texto" />
</p>
<p>
<button onclick="adicionar()">Adicionar</button>
</p>
<script>
var id = 0;
function adicionar() {
var texto = document.getElementById("texto");
var para = document.createElement("p");
para.id = "para_" + id++;
para.innerHTML = texto.value + " " + para.id;
var button = document.createElement("button");
button.setAttribute("onclick", "remover('" + para.id + "');");
button.innerHTML = "X";
para.appendChild(button);
var corpo = document.getElementById("corpo");
corpo.appendChild(para);
texto.value = "";
}
function remover(id) {
var pai = document.getElementById("corpo");
var filho = document.getElementById(id);
pai.removeChild(filho);
}
</script>
</body>
</html>
Atividades
Atividade 1
- Crie um documento HTML
- Adicione um título H1 na página com texto vazio
- Adicione um campo texto de entrada com label Nome
- Altere dinâmicamente o título H1 sempre que o usuário digitar qualquer coisa no campo texto
Atividade 2
- Crie um código HTML
- Crie um campo texto e um botão ENVIAR
- crie uma lista (bullets) vazia
- Ao clicar no botão ENVIAR, adiciona um ítem na lista com o conteúdo do campo texto e apague o conteúdo do campo texto
Atividade 3
- Crie um código HTML
- Crie três campos de entrada (nome, telefone, e-mail)
- Crie dois botões (adicionar, limpar)
- Crie uma tabela com três colunas e com os títulos Nome, Telefone e E-mai
- Ao entrar com informações nos campos texto e clicar no botão adicionar, é criada uma linha na tabela e são adicionados os dados que estavam nos campos de texto e os campos de texto são limpos
- Ao clicar no botão limpar, exclui todas as linhas da tabela, menos a linha de título
