Tabla de contenido
Una vez más aquí. Hoy vengo a dejar un pequeño artículo sobre algo que un usuario que está haciendo un curso de programación web me ha preguntado (hace ya una o dos semanas), y sobre lo cual el profesor que tengo en otro curso que estoy haciendo yo, mencionó algo esta misma semana. Este usuario me decía que no tenía muy claro como podía pasar números de decimal a hexadecimal utilizando JavaScript. Por esa razón me decidí a publicar este artículo en el que vamos a ver cómo crear un conversor de números a diferentes sistemas (decimal, binario, hexadecimal u octal), utilizando algunas funciones creadas con JavaScrip.
En el mundo de la programación y las matemáticas, puede ser habitual encontramos con la necesidad de convertir números entre diferentes sistemas numéricos. Para facilitar esta tarea, siempre es recomendable tener a mano un programa como este (y aun que en internet hay cientos, nunca está de más ver cómo se hace). Por este motivo, me he puesto manos en el teclado para desarrollar esta aplicación web que nos va a permitir realizar la conversión de números en decimal a binario, octal y hexadecimal, y viceversa. – Aun que solo funciona con decimales enteros, creo que a este usuario puede resultarle útil para hacerse una idea, y modificarlo según sus necesidades -.
Como decía, este conversor de números a diferentes sistemas, es una herramienta web que solo necesita del navegador web para ser ejecutado, y está diseñada para convertir valores numéricos entre los sistemas decimal, binario, octal y hexadecimal. Para desarrollar este programa basta con utilizar HTML, CSS y JavaScript, y para ponerlo un poco más bonito, utiliza la biblioteca Metro UI, aun que al final poco la he utilizado.
Crea un conversor de números a diferentes sistemas (decimal, binario, octal o hexadecimal)
Cuando se ejecute, el conversor ofrece una interfaz intuitiva y fácil de usar. Al abrir el programa en el navegador, nos encontramos con cuatro campos de entrada, cada uno correspondiente a un sistema numérico: decimal, binario, octal y hexadecimal. Tan solo será necesario escribir un número en el campo que nos interese, y pulsar el botón de conversión que queramos, para que el resultado de la conversión se muestre en el campo correspondiente.
El conversor proporciona botones específicos para cada tipo de conversión, lo que facilita la selección del sistema numérico deseado. Por ejemplo, si queremos convertir un número decimal a binario, solo será necesario escribir el valor decimal y hacemos clic en el botón «Decimal a Binario«. El resultado se mostrará de inmediato en el campo de entrada correspondiente al sistema binario.
Del mismo modo, podemos realizar conversiones entre los otros sistemas numéricos utilizando los botones correspondientes.
Además, el programa nos va a ofrecer la opción de limpiar todos los campos de entrada con un solo clic, lo que facilita la realización de múltiples conversiones de manera eficiente.
El código para crear tu conversor de números
Para realizar este pequeño proyecto, como decía líneas más arriba, basta con utilizar HTML, JavaScript y CSS. Por ello, solo será necesario utilizar tres archivos, los cuales veremos a continuación.
Archivo index.html
El primero de los archivos necesarios será el index.html. Aquí vamos a encontrar una plantilla de una página HTML que contiene la estructura del conversor de números entre diferentes sistemas numéricos.
En este archivo vamos a definir dos campos (con sus correspondientes botones) por línea, y justos debajo del todo tendremos el botón limpiar. Cada uno de los campos cuenta con un input, el cual será el lugar en el que vamos a escribir los números, y será también el sitio en el que se muestren las conversiones. Hay que decir que esto se consigue gracias a las id de cada uno de estos campos, las cuales trabajan con las id de los botones, para llamar a las funciones correspondientes JavaScript.
Conversor de Decimal - Binario - Octal - Hexadecimal
Archivo style.css
Dentro del archivo style.css bastará con escribir el siguiente código para darle un aspecto limpio a este pequeño proyecto. Esto es bastante corto, pero para este ejemplo creo que es más que suficiente.
.container { margin: 50px auto; max-width: 800px; } h1 { font-size: 36px; font-weight: bold; text-align: center; margin-bottom: 50px; } label { font-size: 18px; font-weight: bold; display: block; margin-bottom: 10px; } input { font-size: 18px; padding: 10px; border: none; border-bottom: 2px solid #ccc; width: 100%; box-sizing: border-box; margin-bottom: 30px; } button { font-size: 18px; padding: 10px 20px; border: none; background-color: #4caf50; color: #fff; cursor: pointer; margin-right: 10px; margin-bottom: 30px; } .container{ max-width: 90% !important; } /*Título*/ .titulo { box-sizing: border-box; padding: 10px; border: none; font: normal 38px / normal "Warnes", Helvetica, sans-serif; color: rgba(255, 255, 255, 1); text-align: center; white-space: pre; text-shadow: 0 0 10px rgb(255, 0, 0), 0 0 20px rgba(255, 0, 0), 0 0 30px rgba(255, 0, 0), 0 0 40px #727272, 0 0 70px #727272, 0 0 80px #4e4e4e, 0 0 100px #2b2b2b; -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); width: 100%; margin-top: 10px; margin-bottom: 10px; } /* Estilo para el título cuando se le hace hover */ .titulo:hover { text-shadow: 0 0 10px rgb(73, 73, 73), 0 0 20px rgb(56, 56, 56), 0 0 30px rgb(48, 48, 48), 0 0 40px #5c5c5c, 0 0 70px #000000, 0 0 80px #000000, 0 0 100px #000000; } /* Texto del título */ .titulo::after { content: "Conversor de Decimal, Binario, Octal y Hexadecimal"; }
Archivo script.js
Dentro del archivo script.js, veremos una colección de funciones que permiten realizar las conversiones entre los diferentes sistemas numéricos. A continuación, veremos una breve explicación de qué hace cada función:
decimalToBinary(decimal)
: Convierte un número decimal a su equivalente en binario.decimalToHex(decimal)
: Convierte un número decimal a su equivalente en hexadecimal.decimalToOctal(decimal)
: Convierte un número decimal a su equivalente en octal.binaryToDecimal(binary)
: Convierte un número binario a su equivalente en decimal.binaryToHex(binary)
: Convierte un número binario a su equivalente en hexadecimal.binaryToOctal(binary)
: Convierte un número binario a su equivalente en octal.hexToDecimal(hex)
: Convierte un número hexadecimal a su equivalente en decimal.hexToBinary(hex)
: Convierte un número hexadecimal a su equivalente en binario.hexToOctal(hex)
: Convierte un número hexadecimal a su equivalente en octal.octalToDecimal(octal)
: Convierte un número octal a su equivalente en decimal.octalToHexadecimal(octal)
: Convierte un número octal a su equivalente en hexadecimal.octalToBinary(octal)
: Convierte un número octal a su equivalente en binario.
Además de las funciones de conversión, el código también incluye una función updateFields()
que actualiza los campos de entrada y salida en la interfaz gráfica de usuario. Esta función se encarga de detectar los cambios en los campos de entrada (decimal, binario, hexadecimal u octal) y actualizar automáticamente los campos de salida con las conversiones correspondientes.
En el código que veremos a continuación, también incluye una serie de eventos de clic para los botones de conversión, donde se llaman a las funciones adecuadas para realizar las conversiones y actualizar los campos de entrada y salida según sea necesario.
Por último, se proporciona la función limpiar()
para borrar el contenido de todos los campos de entrada y salida.
Dentro de este archivo, bastará con guardar el siguiente código:
// Función para convertir de decimal a binario function decimalToBinary(decimal) { let binary = ""; while (decimal > 0) { binary = (decimal % 2) + binary; decimal = Math.floor(decimal / 2); } // Eliminar ceros no significativos a la izquierda binary = binary.replace(/^0+/, ''); return binary; } // Función para convertir decimal a hexadecimal function decimalToHex(decimal) { let hex = ""; const hexDigits = "0123456789ABCDEF"; while (decimal > 0) { const remainder = decimal % 16; hex = hexDigits[remainder] + hex; decimal = Math.floor(decimal / 16); } return hex; } // Función para pasar de decimal a octal function decimalToOctal(decimal) { let octal = ""; while (decimal > 0) { const remainder = decimal % 8; octal = remainder + octal; decimal = Math.floor(decimal / 8); } return octal; } // Función para convertir binario a decimal function binaryToDecimal(binary) { let decimal = 0; const binaryLength = binary.length; for (let i = 0; i < binaryLength; i++) { const digit = parseInt(binary.charAt(binaryLength - 1 - i)); decimal += digit * Math.pow(2, i); } return decimal; } // Función para convertir binario a hexadecimal function binaryToHex(binary) { while (binary.length % 4 !== 0) { binary = '0' + binary; } let hex = ''; for (let i = 0; i < binary.length; i += 4) { const chunk = binary.substr(i, 4); const decimal = parseInt(chunk, 2); const hexDigit = decimal.toString(16).toUpperCase(); hex += hexDigit; } return hex; } // Función para convertir binario a octal function binaryToOctal(binary) { while (binary.length % 3 !== 0) { binary = '0' + binary; } let octal = ''; for (let i = 0; i < binary.length; i += 3) { const chunk = binary.substr(i, 3); const decimal = parseInt(chunk, 2); octal += decimal.toString(8); } return octal; } // Función para convertir hexadecimal a decimal function hexToDecimal(hex) { const decimal = parseInt(hex, 16); return decimal; } // Función para convertir hexadecimal a binario function hexToBinary(hex) { let binary = ''; for (let i = 0; i < hex.length; i++) { const decimal = parseInt(hex.charAt(i), 16); const binaryChunk = decimal.toString(2).padStart(4, '0'); binary += binaryChunk; } // Eliminar ceros no significativos a la izquierda binary = binary.replace(/^0+/, ''); return binary; } // Función para pasar de hexadecimal a octal function hexToOctal(hex) { // Convierte el número hexadecimal a decimal const decimal = parseInt(hex, 16); // Convierte el número decimal a octal const octal = decimal.toString(8); return octal; } // Pasar de octal a decimal. function octalToDecimal(octal) { const decimal = parseInt(octal, 8); return decimal; } // pasar de octal a hexadecimal function octalToHexadecimal(octal) { // Convierte el número octal a decimal const decimal = parseInt(octal, 8); // Convierte el número decimal a hexadecimal const hexadecimal = decimal.toString(16).toUpperCase(); return hexadecimal; } // Pasar de octal a binario function octalToBinary(octal) { let binary = ''; for (let i = 0; i < octal.length; i++) { const decimal = parseInt(octal.charAt(i), 8); const binaryChunk = decimal.toString(2).padStart(3, '0'); binary += binaryChunk; } // Eliminar ceros no significativos a la izquierda binary = binary.replace(/^0+/, ''); return binary; } // Esta función se encarga de actualizar los campos de entrada y salida en la interfaz gráfica de usuario. function updateFields() { let textInput = $("#text-input").val(); let binaryInput = $("#binary-input").val(); let hexInput = $("#hex-input").val(); let octInput = $("#oct-input").val(); // Si se escribe un número decimal if (textInput) { $("#binary-input").val(decimalToBinary(textInput)); $("#hex-input").val(decimalToHex(textInput)); $("#oct-input").val(decimalToOctal(textInput)); } // Si se escribe un número binario if (binaryInput) { $("#text-input").val(binaryToDecimal(binaryInput)); $("#hex-input").val(binaryToHex(binaryInput)); $("#oct-input").val(binaryToOctal(binaryInput)); } // Si se escribe un número hexadecimal if (hexInput) { $("#text-input").val(hexToDecimal(hexInput)); $("#binary-input").val(hexToBinary(hexInput)); $("#oct-input").val(hexToOctal(hexInput)); } // Si se escribe un número octal if (octInput) { $("#text-input").val(octalToDecimal(octInput)); $("#binary-input").val(octalToBinary(octInput)); $("#hex-input").val(octalToHexadecimal(octInput)); } } // Actualizar los campos de entrada y salida cuando se hace clic en un botón de conversión // Evento clic para botón "Decimal a binario" $("#to-binary-btn").click(function() { let text = $("#text-input").val(); let binary = decimalToBinary(text); $("#binary-input").val(binary); }); // Evento clic para botón "Decimal a hexadecimal" $("#to-hex-btn").click(function() { let text = $("#text-input").val(); let hex = decimalToHex(text); $("#hex-input").val(hex); }); // Evento clic para botón "Decimal a octal" $("#from-text-oct-btn").click(function() { let text = $("#text-input").val(); let octal = decimalToOctal(text); $("#oct-input").val(octal); }); // Evento clic para botón "Binario a decimal" $("#to-text-btn").click(function() { let binary = $("#binary-input").val(); let text = binaryToDecimal(binary); $("#text-input").val(text); }); // Evento clic para botón "Binario a hexadecimal" $("#from-binary-btn").click(function() { let binary = $("#binary-input").val(); let hex = binaryToHex(binary); $("#hex-input").val(hex); }); // Evento clic para botón "Binario a octal" $("#from-oct-binary-btn").click(function() { let binary = $("#binary-input").val(); let octal = binaryToOctal(binary); $("#oct-input").val(octal); }); // Evento clic para botón "Hexadecimal a decimal" $("#from-hex-btn").click(function() { let hex = $("#hex-input").val(); let text = hexToDecimal(hex); $("#text-input").val(text); }); // Evento clic para botón "Hexadecimal a binario" $("#from-text-btn").click(function() { let hex = $("#hex-input").val(); let binary = hexToBinary(hex); $("#binary-input").val(binary); }); // Evento clic para botón "Hexadecimal a octal" $("#from-oct-btn").click(function() { let hex = $("#hex-input").val(); let octal = hexToOctal(hex); $("#oct-input").val(octal); }); // Evento clic para botón "Octal a decimal" $("#from-oct-text-btn").click(function() { let octal = $("#oct-input").val(); let text = octalToDecimal(octal); $("#text-input").val(text); }); // Evento clic para botón "Octal a binario" $("#from-oct-bin-btn").click(function() { let octal = $("#oct-input").val(); let binary = octalToBinary(octal); $("#binary-input").val(binary); }); // Evento clic para botón "Octal a hexadecimal" $("#from-oct-hex-btn").click(function() { let octal = $("#oct-input").val(); let hex = octalToHexadecimal(octal); $("#hex-input").val(hex); }); // Esta función se encarga de borrar los campos function limpiar() { // Obtener los elementos de texto por su ID y borrar su contenido $('#text-input').val(''); $('#binary-input').val(''); $('#hex-input').val(''); $('#oct-input').val(''); }
En resumen, este código es el que hará de esta una herramienta para realizar conversiones entre diferentes sistemas numéricos, proporcionando una funcionalidad interactiva para actualizar los campos de entrada y salida de manera dinámica.
Repositorio en GitHub
Al crear un conversor de números a diferentes sitemas de esta forma, te encontrarás una herramienta útil y práctica para aquellos que trabajan con programación, matemáticas o cualquier otro campo en el que sea necesario realizar conversiones entre sistemas numéricos. Su interfaz sencilla, se combina con su capacidad de realizar conversiones en tiempo real. Por este motivo, creo que al usuario que le interesaba convertir números decimales a hexadecimales, le puede venir bien para ver cómo hacerlo con JavaScript.
Además de ver aquí el código publicado, este se puede descargar al completo desde el repositorio en GitHub en el que lo he alojado. También puedes ver funcionando este pequeño proyecto en la sección de ejemplos de esta web.