Mudanças entre as edições de "Javascript: elementos dinâmicos"

De Aulas
(Criou página com 'Afluentes: Desenvolvimento Front-end I, Desenvolvimento Front-end II, Usabilidade, desenvolvimento web, mobile e jogos = Elementos Dinâmicos = É possível, com...')
 
 
(4 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
−
Afluentes: [[Desenvolvimento Front-end I]], [[Desenvolvimento Front-end II]], [[Usabilidade, desenvolvimento web, mobile e jogos]]
+
 
 +
 
 +
Afluentes: [[Desenvolvimento Front-end I]], [[Usabilidade, desenvolvimento web, mobile e jogos]].
  
 
= Elementos Dinâmicos =
 
= Elementos Dinâmicos =
Linha 7: Linha 9:
 
= Adicionando Elementos =
 
= Adicionando Elementos =
  
−
<syntaxhighlight lang=html>
+
<syntaxhighlight lang="html">
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html>
 
<html>
−
<head><title>Elementos Dinâmicos</title></head>
+
<head><title> Elementos Dinâmicos </title></head>
−
<body id="corpo">
+
<body>
−
     <h1>Adicionar Elementos</h1>
+
     <h1>Adicionar texto</h1>
 
     <p>
 
     <p>
 
         Digite o texto:
 
         Digite o texto:
−
         <input type="text" id="texto">
+
         <input type="text" id="input">
−
    </p>
+
         <button onclick="adicionar();">Adicionar</button>
−
    <p>
 
−
         <button onclick="adicionar()">Adicionar</button>
 
 
     </p>
 
     </p>
 +
    <div id="conteudo"></div>
 
     <script>
 
     <script>
 
         function adicionar() {
 
         function adicionar() {
−
             var texto = document.getElementById("texto");
+
             const input = document.getElementById("input");
−
             var para = document.createElement("p");
+
             const p = document.createElement("p");
−
             para.innerHTML = texto.value;
+
             p.appendChild(document.createTextNode(input.value));
−
             var corpo = document.getElementById("corpo");
+
             const conteudo = document.getElementById("conteudo");
−
             corpo.appendChild(para);
+
             conteudo.appendChild(p);
−
             texto.value = "";
+
             input.value = "";
 
         }
 
         }
 
     </script>
 
     </script>
 
</body>
 
</body>
 
</html>
 
</html>
−
</syntaxhighlight>
+
</syntaxhighlight>Veja que cria um parágrafo e adicionamos o texto usando um método chamado <code>createTextNode</code> ao invés do <code>p.innerHTML</code>. Isso porque esse método de entrada é mais apropriado e seguro para o caso de entradas dinâmicas.
  
 
= Removendo Elementos =
 
= Removendo Elementos =
Linha 38: Linha 39:
 
O exemplo a seguir remove um elemento da página html.
 
O exemplo a seguir remove um elemento da página html.
  
−
<syntaxhighlight lang=html>
+
<syntaxhighlight lang="html">
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html>
 
<html>
−
<head><title>Elementos Dinâmicos</title></head>
+
<head><title> Elementos Dinâmicos </title></head>
−
<body id="corpo">
+
<body>
−
     <h1>Remover Elemento</h1>
+
     <h1>Remover Elementos</h1>
−
     <button onclick="remover()">Remover</button></p>
+
     <button onclick="remover();">Remover</button>
−
    <p id="texto">Texto que será removido...</p>
+
    <div id="conteudo">
 +
        <p id="texto">Texto que será removido....</p>
 +
    </div>
 +
 
 
     <script>
 
     <script>
 
         function remover() {
 
         function remover() {
−
             var pai = document.getElementById("corpo");
+
             const pai = document.getElementById("conteudo");
−
             var filho = document.getElementById("texto");
+
             const filho = document.getElementById("texto");
 
             pai.removeChild(filho);
 
             pai.removeChild(filho);
 
         }
 
         }
Linha 59: Linha 63:
 
= Adicionando e Removendo Dinamicamente =
 
= Adicionando e Removendo Dinamicamente =
  
−
<syntaxhighlight lang=html>
+
<syntaxhighlight lang="html">
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html>
 
<html>
−
    <head>
+
<head><title>Incluindo e Excluindo Elementos</title></head>
−
        <title>Elementos Dinâmicos</title>
+
<body>
−
    </head>
+
    <h1>Cadastro de Itens</h1>
−
    <body id="corpo">
+
    Texto: <input type="text" id="texto">
−
        <h1>Adicionar Elementos</h1>
+
    <button onclick="adicionar();">Adicionar</button>
−
        <p>
+
    <ul id="lista"></ul>
−
            Digite o texto:
+
    <script>
−
            <input type="text" id="texto" />
+
        var id = 0; // Variável global para controle de IDs
−
        </p>
+
        function adicionar() {
−
        <p>
+
            const texto = document.getElementById("texto");
−
            <button onclick="adicionar()">Adicionar</button>
+
            const lista = document.getElementById("lista");
−
        </p>
+
            const item = document.createElement("li");
−
        <script>
+
            // Adiciona um ID único ao item e incrementa o contador
−
            var id = 0;
+
            item.id = `item_${id++}`;
−
            function adicionar() {
+
            item.appendChild(document.createTextNode(texto.value + " "));
−
                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) {
+
             // Cria o botão de remover e o adiciona ao item
−
                var pai = document.getElementById("corpo");
+
            const button = document.createElement("button");
−
                var filho = document.getElementById(id);
+
            button.innerHTML = "X";
−
                pai.removeChild(filho);
+
            button.setAttribute("onclick", `remover("${item.id}");`);
−
            }
+
            item.appendChild(button);
−
        </script>
+
            lista.appendChild(item);
−
    </body>
+
            texto.value = ""; // Limpa o campo de texto
 +
            texto.focus(); // Foca no campo de texto
 +
        }
 +
 
 +
        function remover(id) {
 +
            const lista = document.getElementById("lista");
 +
            const item = document.getElementById(id);
 +
            lista.removeChild(item);
 +
        }
 +
    </script>
 +
</body>
 
</html>
 
</html>
−
</syntaxhighlight>
+
</syntaxhighlight>Veja que para colocarmos um texto no botão usamos o <code>innerHTML</code> e não o <code>createTextNode</code>. Não que não podemos usar o <code>createTextMode</code> como fizemos no exemplo anterior, mas é que como o texto do botão não é dinâmico, fica mais tranquilo usar o <code>innerHTML</code>.
 +
 
 +
= 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

Edição atual tal como às 14h47min de 6 de maio de 2025


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>
    <h1>Adicionar texto</h1>
    <p>
        Digite o texto:
        <input type="text" id="input">
        <button onclick="adicionar();">Adicionar</button>
    </p>
    <div id="conteudo"></div>
    <script>
        function adicionar() {
            const input = document.getElementById("input");
            const p = document.createElement("p");
            p.appendChild(document.createTextNode(input.value));
            const conteudo = document.getElementById("conteudo");
            conteudo.appendChild(p);
            input.value = "";
        }
    </script>
</body>
</html>

Veja que cria um parágrafo e adicionamos o texto usando um método chamado createTextNode ao invés do p.innerHTML. Isso porque esse método de entrada é mais apropriado e seguro para o caso de entradas dinâmicas.

Removendo Elementos

O exemplo a seguir remove um elemento da página html. 

<!DOCTYPE html>
<html>
<head><title> Elementos Dinâmicos </title></head>
<body>
    <h1>Remover Elementos</h1>
    <button onclick="remover();">Remover</button>
    <div id="conteudo">
        <p id="texto">Texto que será removido....</p>
    </div>

    <script>
        function remover() {
            const pai = document.getElementById("conteudo");
            const filho = document.getElementById("texto");
            pai.removeChild(filho);
        }
    </script>
</body>
</html>

Adicionando e Removendo Dinamicamente

<!DOCTYPE html>
<html>
<head><title>Incluindo e Excluindo Elementos</title></head>
<body>
    <h1>Cadastro de Itens</h1>
    Texto: <input type="text" id="texto">
    <button onclick="adicionar();">Adicionar</button>
    <ul id="lista"></ul>
    <script>
        var id = 0; // Variável global para controle de IDs
        function adicionar() {
            const texto = document.getElementById("texto");
            const lista = document.getElementById("lista");
            const item = document.createElement("li");
            // Adiciona um ID único ao item e incrementa o contador
            item.id = `item_${id++}`;
            item.appendChild(document.createTextNode(texto.value + " "));

            // Cria o botão de remover e o adiciona ao item
            const button = document.createElement("button");
            button.innerHTML = "X";
            button.setAttribute("onclick", `remover("${item.id}");`);
            item.appendChild(button);
            lista.appendChild(item);
            texto.value = ""; // Limpa o campo de texto
            texto.focus(); // Foca no campo de texto
        }

        function remover(id) {
            const lista = document.getElementById("lista");
            const item = document.getElementById(id);
            lista.removeChild(item);
        }
    </script>
</body>
</html>

Veja que para colocarmos um texto no botão usamos o innerHTML e não o createTextNode. Não que não podemos usar o createTextMode como fizemos no exemplo anterior, mas é que como o texto do botão não é dinâmico, fica mais tranquilo usar o innerHTML.

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
Disponível em “https://saulo.arisa.com.br/wiki/index.php?title=Javascript:_elementos_dinâmicos&oldid=9866”