Tradutor de Texto ASCII para Binário em JavaScript

Olá! Em mais um dia chuvoso resolvi criar uma utilidade, uma ferramenta que faz a tradução de Binário para Texto ASCII, e vice-versa, e irei ensinar vocês!

Certo vamos lá, antes de mais nada, devo relatar que essa incrível ferramenta é feita utilizando HTML e JavaScript.

Vamos por partes, faremos dois arquivos, um contendo o JavaScript, na qual fará todo o serviço, e outro com o HTML para interface com usuário.

/*
Função para verificar se a tradução Ascii x Binário é em tempo real.
*/
function verificaTReal() {
    // Variável tReal recebe conteúdo do checkbox.
    var tReal = document.getElementById("tReal").checked;

    // Se for verdadeiro chama a função mostraBinario.
    if (tReal) mostraBinario();
}

function decimalBinario(entraDec) {
    // Variável binarioNumerico recebe texto e transforma em string.
    var binarioNumerico = "00000000"+entraDec.toString(2);

    // binarioNumerico recebe valor filtrando tamanho-8.
    binarioNumerico = binarioNumerico.substr(binarioNumerico.length-8,8);
    
    // Retorna binarioNumerico para função mostraBinario.
    return binarioNumerico; 
}

/*
Função para mostrar binário, de texto(ascii) para binário.
*/
function mostraBinario() {
    // Declaração de variáveis
    var binarioChar, binarioResultado="", texto, rEspaco;

    // Variável texto recebe o conteúdo da textarea "texto".
    texto = document.getElementById("texto").value;
    
    /* Variável rEspaco recebe conteúdo do checkbox, para verificar se
    exibe espaço no binário. */
    rEspaco = document.getElementById("rEspaco").checked;

    // Laço de repetição, de 0 até a quantidade de caracteres da variável texto.
    for (i = 0; i < texto.length; i++) {
        /* Retorna um inteiro, representando unicode na posição "i" da string texto,
        após passar pela função decimalBinario. */
        binarioChar = decimalBinario(texto.charCodeAt(i));
        
        // Se variável rEspaco NÃO for verdadeira adiciona espaço.
        if (!rEspaco) binarioChar += " ";
        
        // Adiciona o resultado.
        binarioResultado += binarioChar;
    }

    // Textarea "binario" recebe o resultado em binário.
    document.getElementById("binario").value = binarioResultado;
}

/*
Função para mostrar texto, de binário para texto (ascii).
*/
function mostraAscii() {
    // Declaração de variáveis
    var binarioTexto, textoResultado="", binarioTamanho;

    /* Variável binarioTexto recebe tudo que tem na textarea "binario",
    desde que não seja 0 ou 1. */
    binarioTexto = document.getElementById("binario").value.replace(/[^01]/g, "");
    
    // Variável binarioTamanho recebe o tamanho de caracteres em binarioTexto%8.
    binarioTamanho = binarioTexto.length-(binarioTexto.length%8);

    // Laço de repetição, de 0 até o tamanho binário com incremento 8.
    for (z=0; z< binarioTamanho; z=z+8) {
        //Retorna uma string a partir de valores de caracteres Unicode.
        textoResultado += String.fromCharCode(parseInt(binarioTexto.substr(z,8),2));
    }

    // Textarea "texto" recebe o resultado em texto (ascii).
    document.getElementById("texto").value = textoResultado;
}

<script src="js/binario.js"></script>
<form action="" method="post">
    <p>
        <label for="tReal">
            <input type="checkbox" name="tReal" id="tReal" checked="checked" />
            Traduzir em tempo real. <em>(com JavaScript)</em>
        </label>
        <br />
        <label for="rEspaco">
            <input type="checkbox" name="rEspaco" id="rEspaco" />
                Remover espaços.
        </label>
    </p>
    <h4>
        <label for="texto">
            Texto normal ASCII:
        </label>
    </h4>
    <p>
        <textarea name="texto" rows="5" cols="67" id="texto" 
                  onkeyup="verificaTReal();" onkeypress="verificaTReal();">
        </textarea>
        <br />
        <input type="submit" value="Ver em Binário" 
               onclick="mostraBinario(); return false;" />
    </p>
</form>

<form action="" method="post">
    <h4>
        <label for="binario">
            Binário:
        </label>
    </h4>
    <p>
        <textarea name="binario" rows="5" cols="67" id="binario">
        </textarea>
        <br />
        <input type="submit" value="Ver em Ascii" 
               onclick="mostraAscii(); return false;" />
    </p>
</form>

charCodeAt(), Obtém o código Unicode do caractere, toString(2), Converte para binário, Padding zeros, Adiciona zeros à esquerda para completar 8 bits e Concatenação, Junta todos os valores binários.

Replace regex, Remove caracteres que não são 0 ou 1, Divisão em grupos, Separa em blocos de 8 bits, parseInt(x, 2), Converte binário para decimal e String.fromCharCode(), Converte código para caractere.

A ferramenta oferece tradução em tempo real (converte automaticamente enquanto digita), opção de remoção de espaços para formato compacto, e conversão bidirecional entre ASCII e binário.

Exemplo: A palavra Hello fica 01001000 01100101 01101100 01101100 01101111 em binário.

Cada caractere é representado por 8 bits (1 byte), seguindo a tabela ASCII padrão. Esta ferramenta demonstra de forma prática como os computadores armazenam e processam texto, convertendo caracteres legíveis em sua representação binária fundamental.