Por que usar?
Visual & Lógico
Use blocos estilo LEGO para criar lógica complexa. Ideal para ensinar e aprender a estrutura do Javascript.
DOM Real
Não é só console.log! Crie Divs, Botões, Inputs e manipule o CSS da página em tempo real.
Código Limpo
O compilador gera HTML5 e Javascript Moderno (Async/Await) pronto para publicar.
Como criar sua página (O Segredo)
Diferente de escrever HTML, aqui nós programamos a criação dos elementos. Siga esta receita para ver seus elementos na tela:
Criar Variável e Elemento
Vá em Variáveis, crie um nome (ex: meuBotao). Use o bloco definir [meuBotao] para [Criar novo elemento Button].
Configurar e Estilizar
Use os blocos de Web HTML para mudar o texto interno, a cor, tamanho, etc.
Ex: Definir texto de [meuBotao] para "Clique Aqui".
⚠️ Adicionar ao Corpo (Importante!)
O elemento fica na memória até você colocá-lo na página. Use o bloco:
Adicionar ao Corpo da página.
Criar Interação
Use o bloco Ao Clicar em [meuBotao] para definir o que acontece. Você pode checar inputs, mostrar alertas ou mudar cores!
O Poder e a Facilidade do Código Gerado
Veja abaixo um exemplo real criado com o editor (Sistema de botão).
var btn;
async function main() {
try {
// 1. Criação dos Elementos
botao = document.createElement('button');
//2. estilização
if(botao) botao.innerHTML = 'Clique em mim!';
//3. funcionalidade
if(button) { button.onclick = async function() {alert('você clicou em mim!')
}; }
//4. envio
if(botao) document.body.appendChild(botao);
} catch(e) {
console.error(e);
alert(e);
}
}Tudo isso que você vê pode ser feito simplesmente com isso:
