Se você já se perguntou como desenvolver uma interface interativa e visualmente envolvente usando JavaScript, este tutorial trará exemplos disso focado no uso do Print div JavaScript.
Neste artigo, exploraremos passo a passo de como criar, modificar e concatenar elementos div dinamicamente em sua página da web, oferecendo uma experiência interativa e única aos seus visitantes.
Não é necessário ser um especialista em programação para acompanhar este guia, pois abordaremos conceitos básicos de HTML, CSS e JavaScript que serão fundamentais para o desenvolvimento de uma funcionalidade dinâmica.
Confira o texto abaixo e veja os conceitos necessários.
Conteúdo
O que é Print div JavaScript?
JavaScript possui a funcionalidade “Print div” que permite criar elementos dinâmicos na web. Com essa funcionalidade, é possível modificar, criar, deletar ou mover elementos, proporcionando uma experiência de usuário mais fluida usando JavaScript.
Uma prática comum no mercado é criar conteúdo dinamicamente com RESTful, e o desenvolvedor precisa saber como manipular esses dados. Antes disso, é necessário aprender a manipular elementos e imprimir novas divs HTML na página.
Assim, vamos avançar e ensinar como construir uma Div Interativa com Flex e Árvore em JavaScript.
Pré-requisitos para usar Print div JavaScript
Conhecimentos básicos de HTML, CSS e JavaScript.
Como usar Print div JavaScript
Passo 1: Preparando o HTML
Primeiramente, crie um novo arquivo com extensão ".html" utilizando um editor de texto ou uma ferramenta de IDE de sua escolha. Esse arquivo servirá como a base da sua página web.
Como ferramenta IDE, recomenda-se usar os populares do mercado de trabalho, é bom se familiarizar com eles para uma boa oportunidade, algumas menções populares são Visual Studio Code (Para desenvolvimento geral), IntelliJ IDEA, Atom, Notepad+ e Sublime Text.
No arquivo HTML, comece definindo a estrutura básica da página, utilizando as tags <html>, <head>, e <body>. No <head>, você pode adicionar metadados, links para folhas de estilo CSS e, o mais importante, incluir o script do seu código JavaScript utilizando a tag <script>.
Você pode fazer isso através de um arquivo externo (usando o atributo src) ou incorporando o código diretamente entre as tags <script></script>.
Para visualizar o resultado do seu código JavaScript em ação, abra o arquivo HTML em um navegador da web. Você pode simplesmente clicar duas vezes no arquivo HTML, e o navegador abrirá a página com o JavaScript em execução.
Para criar, modificar e concatenar elementos <div> com JavaScript
Você pode usar a API DOM (Modelo de Objeto de Documento). Essa API permite que você interaja com a estrutura HTML de uma página e faça manipulações dinâmicas, como criar novos elementos, modificar seus atributos e conteúdo, bem como adicionar e remover elementos.
Acréscimo: através da API DOM, é possível acessar elementos HTML por meio de seletores como getElementById, getElementsByClassName, getElementsByTagName e querySelector, permitindo encontrar elementos específicos na página.
Aqui vem um exemplo simples do que se trata:
<!DOCTYPE html>
<html>
<head>
<title>Manipulação de Divs com JavaScript</title>
</head>
<body>
<button onclick="criarDiv()">Criar Div</button>
<script>
function criarDiv() {
// Criar um novo elemento div
var novaDiv = document.createElement('div');
// Adicionar algum conteúdo na div
novaDiv.textContent = 'Nova Div criada com JavaScript';
// Adicionar a nova div ao final do body (ou outro elemento de sua escolha)
document.body.appendChild(novaDiv);
}
</script>
</body>
</html>
Nesse exemplo, apresentamos um código HTML com um botão simples que dispara a função CriarDiv() em JavaScript, essa função é responsável por criar uma div, adicionar conteúdo a ela e, em seguida, concatená-la ao corpo do HTML. É uma maneira eficiente de gerar conteúdo dinamicamente e melhorar a interatividade da página.
É importante destacar que o uso de botões pré-definidos é apenas uma das muitas possibilidades. Com JavaScript, podemos explorar uma infinidade de gatilhos, condições e eventos para criar e modificar conteúdo dinamicamente.
Isso nos permite personalizar a experiência do usuário de acordo com ações específicas, como cliques, digitações ou até mesmo respostas a formulários.
Passo 2: Criando botão dinamicamente
A seguir um exemplo sem um body na página, apenas JavaScript para criar o conteúdo do body.
<!DOCTYPE html>
<html>
<head>
<title>Manipulação de Divs com JavaScript</title>
</head>
<body>
<script>
// Função para criar as divs e o botão
function criarDivs() {
// Criar o botão dinamicamente
var botao = document.createElement('button');
botao.textContent = 'Criar Divs';
botao.onclick = function() {
// Função para ser executada ao clicar no botão
criarDivsDinamicamente();
};
document.body.appendChild(botao);
}
// Função para criar as divs dinamicamente
function criarDivsDinamicamente() {
// Criar as duas divs
var div1 = document.createElement('div');
div1.textContent = 'Esta é a primeira div criada dinamicamente.';
div1.style.backgroundColor = 'lightblue';
var div2 = document.createElement('div');
div2.textContent = 'Esta é a segunda div criada dinamicamente.';
div2.style.backgroundColor = 'lightgreen';
// Criar um elemento pai (container) para as duas divs
var container = document.createElement('div');
// Adicionar as duas divs ao container
container.appendChild(div1);
container.appendChild(div2);
// Adicionar o container ao body da página
document.body.appendChild(container);
}
// Chamar a função para criar o botão
criarDivs();
</script>
</body>
</html>
A principal diferença neste exemplo é a primeira função que é chamada quando a página é carregada. Assim, essa função cria o botão e o restante do algoritmo é semelhante ao exemplo anterior.
Passo 3: Aprimorando a experiência visual
Agora, vamos a algo que entretenha visualmente:
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de Div Interativa com Flex</title>
<style>
body{
margin: 0px;
}
/* Estilo para a div que ocupa a tela inteira */
#divPrincipal {
display: flex;
width: 100vw;
height: 100vh;
flex-wrap: wrap;
overflow: hidden;
justify-content: space-evenly;
align-content: stretch;
}
/* Estilo para os quadrantes */
.quadrante {
flex: 1 1 50%;
border: 1px solid black;
border-radius: 4px;
box-sizing: border-box;
display: flex;
justify-content: space-evenly;
font-size: 20px;
cursor: pointer;
align-content: stretch;
flex-wrap: wrap;
text-align: center;
box-shadow: 2px 2px 2px inset;
}
</style>
</head>
<body>
<div id="divPrincipal" onclick="criarFilhos(event)">
<div class="quadrante">1</div>
<div class="quadrante">2</div>
<div class="quadrante">3</div>
<div class="quadrante">4</div>
</div>
<script>
function criarFilhos(event) {
var target = event.target;
// Verificar se o clique foi em um dos quadrantes
if (target.classList.contains('quadrante')) {
// Limpar o conteúdo do quadrante clicado
target.innerHTML = '';
// Criar quatro filhos iguais dentro do quadrante
for (var i = 1; i <= 4; i++) {
var filho = document.createElement('div');
filho.classList.add('quadrante');
// Calcular cores com base no nível de profundidade (contador "i")
var r = 255 - i * 20;
var g = 150 + i * 20;
var b = 100 + i * 20;
filho.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
target.appendChild(filho);
}
}
}
</script>
</body>
</html>
Nesse exemplo, a magia acontece quando usamos a propriedade onClick diretamente na div. Ao clicar, uma função JavaScript é acionada, criando quatro novas divs como filhos da div clicada. Esse efeito é gerado recursivamente, permitindo que cada nova div também tenha a mesma funcionalidade.
O CSS entra em cena para proporcionar a aparência desejada. Focamos na criação dinâmica e interativa das divs.
Agora, enfrentemos um desafio maior. A partir do último exemplo, queremos ter mais controle sobre nossas divs dinâmicas. Para isso, utilizaremos uma estrutura de dados chamada “árvore” (também conhecida como tree) para nos auxiliar. Assim, essa abordagem permitirá um controle mais aprofundado da hierarquia das divs, considerando sua profundidade na estrutura.
Criando a estrutura de dados em forma de árvore com Print div JavaScript
Um objeto JavaScript representa a estrutura, contendo uma cor e uma lista de filhos. A árvore será atualizada dinamicamente conforme criamos novos quadrantes.
// Estrutura de dados em forma de árvore
var arvore = {
cor: { r: 255, g: 150, b: 100 },
filhos: []
};Criando a função para gerar os filhos dos quadrantes
Ao criar a função criarFilhos(event, profundidade) que será acionada quando o usuário clicar em um dos quadrantes. Esta função cria os filhos dentro do quadrante clicado, utilizando a estrutura de dados em forma de árvore e aplicando as cores de forma dinâmica.
function criarFilhos(event, profundidade) {
var target = event.target;
// Verificar se o clique foi em um dos quadrantes
if (target.classList.contains('quadrante')) {
// Limpar o conteúdo do quadrante clicado
target.innerHTML = '';
// Gerar a árvore dinamicamente para os filhos
gerarArvore(target, arvore, profundidade);
}
}Função para gerar a Árvore recursivamente
Criando a função gerarArvore(pai, no, profundidade) que irá criar os filhos recursivamente dentro do quadrante pai, ajustando a cor conforme a profundidade na árvore.
function gerarArvore(pai, no, profundidade) {
// Criar quatro filhos iguais dentro do quadrante
for (var i = 0; i < 4; i++) {
var filho = document.createElement('div');
filho.classList.add('quadrante');
var corMaisForte = 255 - profundidade * 20;
filho.style.backgroundColor = `rgb(${corMaisForte}, ${no.cor.g}, ${no.cor.b})`;
pai.appendChild(filho);
// Se o nó tiver filhos, chamar a função recursivamente para cada filho
if (no.filhos.length > 0) {
gerarArvore(filho, no.filhos[i], profundidade + 1);
}
}
}Ao clicar em um quadrante, a função gerarArvore será chamada com a profundidade correta, e essa profundidade será passada corretamente na chamada recursiva para a função gerarArvore.
Dessa forma, ajuste a cor de acordo com a profundidade na árvore. Teste o código novamente para ver os quadrantes coloridos corretamente, criando uma hierarquia de cores mais forte à medida que adentramos a árvore.
O código completo do exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de Div Interativa com Flex</title>
<style>
body{
margin: 0px;
user-select: none;
}
/* Estilo para a div que ocupa a tela inteira */
#divPrincipal {
display: flex;
width: 100vw;
height: 100vh;
flex-wrap: wrap;
overflow: hidden;
justify-content: space-evenly;
align-content: stretch;
}
/* Estilo para os quadrantes */
.quadrante {
flex: 1 1 50%;
border: 1px solid black;
border-radius: 4px;
box-sizing: border-box;
display: flex;
justify-content: space-evenly;
font-size: 20px;
cursor: pointer;
align-content: stretch;
flex-wrap: wrap;
text-align: center;
box-shadow: 2px 2px 17px;
font-size: 90%;
}
</style>
</head>
<body>
<div id="divPrincipal" onclick="criarFilhos(event)">
<div class="quadrante">1</div>
<div class="quadrante">1</div>
<div class="quadrante">1</div>
<div class="quadrante">1</div>
</div>
<script>
// Estrutura de dados em forma de árvore
var arvore = {
cor: { r: 255, g: 150, b: 100 },
filhos: []
};
function criarFilhos(event, profundidade) {
var target = event.target;
// Verificar se o clique foi em um dos quadrantes
if (target.classList.contains('quadrante')) {
// Limpar o conteúdo do quadrante clicado
// Gerar a árvore dinamicamente para os filhos
gerarArvore(target, arvore, profundidade);
}
}
function gerarArvore(pai, no, profundidade) {
if(profundidade == null){
profundidade = pai.textContent*1+1;
if (pai.textContent == ""){
profundidade = 1;
}
}
pai.innerHTML = '';
// Criar quatro filhos iguais dentro do quadrante
for (var i = 0; i < 4; i++) {
var filho = document.createElement('div');
filho.classList.add('quadrante');
var corMaisForte = 255 - profundidade * 20;
filho.style.backgroundColor = `rgb(${corMaisForte}, ${no.cor.g}, ${no.cor.b})`;
filho.textContent = profundidade;
pai.appendChild(filho);
// Se o nó tiver filhos, chamar a função recursivamente para cada filho
if (no.filhos.length > 0) {
gerarArvore(filho, no.filhos[i], profundidade + 1);
}
}
}
</script>
</body>
</html>Alternativas a esse método
Algumas formas comuns de interagir com elementos HTML usando JavaScript:
appendChild():
O método appendChild() é utilizado para adicionar um novo elemento como filho de outro elemento HTML. Ele permite que você insira um elemento no final da lista de filhos de um elemento-pai. Por exemplo:
const parentElement = document.getElementById('parent');
const newChild = document.createElement('div');
parentElement.appendChild(newChild)textContent:
A propriedade textContent é utilizada para definir ou obter o conteúdo de texto de um elemento HTML. Ela permite que você insira ou obtenha o texto dentro de uma tag. Por exemplo:
const element = document.getElementById('myElement');
element.textContent = 'Este é o novo texto.';innerHTML:
A propriedade innerHTML é usada para definir ou obter o conteúdo HTML de um elemento. Ela permite que você insira ou obtenha HTML dentro de uma tag. Por exemplo:
const element = document.getElementById('myElement');
element.innerHTML = '<h2>Novo Título</h2><p>Novo conteúdo</p>';innerText:
A propriedade innerText é semelhante à propriedade textContent, mas ela retorna apenas o texto visível no elemento, excluindo qualquer código HTML. Por exemplo:
const element = document.getElementById('myElement');
const text = element.innerText;insertBefore():
O método insertBefore() é usado para inserir um novo elemento antes de outro elemento já existente, dentro do mesmo elemento-pai. Ele permite que você especifique a posição de inserção do novo elemento. Por exemplo:
const parentElement = document.getElementById('parent');
const newChild = document.createElement('div');
const referenceElement = document.getElementById('reference');
parentElement.insertBefore(newChild, referenceElement);Lista de métodos e propriedades para procurar elementos no DOM
parentElement:
A propriedade parentElement permite acessar o elemento-pai de um elemento. Com ela, você pode navegar na hierarquia do DOM e obter o pai de um elemento. Por exemplo:
const childElement = document.getElementById('child');
const parentElement = childElement.parentElement;previousSibling:
A propriedade previousSibling é usada para acessar o nó irmão anterior (anterior na hierarquia do DOM) de um elemento. Essa propriedade considera qualquer tipo de nó, como elementos, textos ou comentários. Por exemplo:
const element = document.getElementById('myElement');
const previousElement = element.previousSibling;children:
A propriedade children retorna uma coleção de elementos filhos de um elemento. Essa coleção contém apenas os elementos, excluindo qualquer outro tipo de nó que possa existir. Por exemplo:
const parentElement = document.getElementById('parent');
const childrenElements = parentElement.children;Essas são algumas das formas essenciais para interagir com elementos HTML e navegar no DOM usando JavaScript. Ao dominar essas técnicas, você poderá criar manipulações dinâmicas e complexas em suas páginas da web, tornando suas aplicações mais interativas e envolventes.
Para a conveniência de desenvolvimento, o código possui apenas o necessário para o exemplo, a seguir algumas funções que podem facilitar desenvolvimento futuro.
function retornarElementoPai(elemento) {
return elemento.parentElement;
}
function retornarTotalElementos(arvore) {
let totalElementos = 1; // Conta o próprio nó (raiz) da árvore
function contarRecursivamente(no) {
for (const filho of no.filhos) {
totalElementos++;
contarRecursivamente(filho);
}
}
contarRecursivamente(arvore);
return totalElementos;
}
function retornarProfundidadeNo(elemento, profundidade = 0) {
if (elemento.parentElement) {
return retornarProfundidadeNo(elemento.parentElement, profundidade + 1);
}
return profundidade;
}
function deletarElementoNo(elemento) {
if (elemento.parentElement) {
elemento.parentElement.removeChild(elemento);
}
}Conclusão
Aprenda agora a criar uma divisão interativa com quadrantes que se dividem recursivamente, formando uma árvore visualmente atrativa. Aplique cores distintas para cada nível de profundidade na árvore, gerando um gradiente mais intenso à medida que avançamos. Essa técnica torna projetos mais dinâmicos e atraentes.
Essa estrutura em árvore é valiosa para estudantes de Ciência da Computação. A abordagem recursiva utilizada para criar e manipular as divisões é especialmente relevante, pois é um dos fundamentos essenciais no aprendizado da programação.
A recursividade mostra como resolver problemas complexos de forma mais eficiente. Com essa técnica, os alunos aprimoram suas habilidades em pensamento lógico, assim, entendem melhor a estruturação de problemas e aprendem a dividir tarefas maiores em etapas menores e mais gerenciáveis.
Portanto, esse exemplo prático de criação de uma divisão interativa com Flex e Árvore em JavaScript oferece uma experiência envolvente no desenvolvimento web, ao mesmo tempo que promove a compreensão dos conceitos essenciais da Ciência da Computação.
Aprenda mais sobre JavaScript lendo outros de nossos artigos, por exemplo: Formulário HTML: criando forms HTML e enviando dados.
