Convertitore decimale binario

In questa lezione impareremo a realizzare un convertitore decimale binario online in JavaScript. Anzi faremo in modo di convertire il numero decimale in binario, in ottale ed esadecimale.

Fate la prova ad inserire un numero decimale nella casella di input. Vedrete che in automatico nelle altre caselle comparirà la conversione negli altri sistemi di numerazione.

Binario:

Ottale:

Esadecimale:


Convertitore decimale binario online in JavaScript

Per realizzare questo semplice convertitore in JavaScript procediamo con l’implementazione delle varie funzioni per effettuare la conversione.

Innanzitutto sviluppiamo la funzione dec_bin che si occupa di convertire da decimale a binario considerando i resti della divisione per 2. La funzione ritorna il numero binario così convertito.

Dopo sviluppiamo la funzione dec_ott che si occupa di convertire da decimale a ottale considerando i resti della divisione per 8. La funzione ritorna il numero ottale così convertito.

Poi implementiamo la funzione dec_esa che si occupa di convertire da decimale a esadecimale considerando i resti della divisione per 16. Se il resto è maggiore di 9 si prende la lettera corrispondente dall’array. La funzione ritorna quindi il numero esadecimale così convertito. 

Infine inseriamo la funzione change che fa attivare il cambiamento in automatico quando inseriremo il valore nel campo decimale.

Ecco dunque il codice JavaScript completo per la conversione da decimale a binario, ottale ed esadecimale:

<script> 
function dec_bin(num){
	n = document.getElementById("decimale").value; 
	binario = "";

	while(n!=0) {
		resto = n%2; 
		n = (n-resto)/2; 
		binario = resto + binario;
	}
	
	return binario;
}


function dec_ott(num){
	n = document.getElementById("decimale").value; 
	ottale = "";

	while(n!=0) {
		resto = n%8; 
		n = (n-resto)/8;
		ottale = resto + ottale;
	}
	
	return ottale;
}

function dec_esa(num){
	n = document.getElementById("decimale").value; 
	esa = ""; 
	while(n!=0) { 
		resto = n%16; 
		n = (n-resto)/16; 
		ar = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');
		if (resto > 9) 
			resto = ar[resto]; 
		esa = resto + esa;
	}
	
	return esa;
}


function change(name)
{
		n = document.getElementById("decimale").value;
                result = dec_bin(n);
		result2 = dec_ott(n);
		result3 = dec_esa(n);
		risultato.value=result;
		risultato2.value=result2;
		risultato3.value=result3;
}
</script>

Nel campo dove inserisco in input il numero decimale aggiungo l’evento onkeyup, in modo che gli altri campi si aggiornino in automatico richiamando la funzione change sviluppata in JavaScript.

<p><label>Numero da decimale a binario, ottale ed esadecimale</label>
<input type="text" id="decimale" onkeyup="change(this)"></p>
<p>Numero in binario: <input type="text" id="risultato" readonly></p>
<p>Numero in ottale: <input type="text" id="risultato2" readonly></p>
<p>Numero in esadecimale: <input type="text" id="risultato3" readonly></p>

Chiaramente questo è solo un semplice modo per implementare un sistema di conversione da decimale a binario, ottale ed esadecimale. Proponete pure la vostra soluzione nei commenti sotto.

Alcuni link utili

Indice argomenti tutorial JavaScript

Template responsive con html

Come creare un css responsive

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web

Autore dell'articolo: cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *