Cifrario di Cesare online

Sviluppiamo in questa lezione il cifrario di Cesare online utilizzando JavaScript.

Fate la prova ad inserire un testo nella casella di input testo in chiaro e scegliete anche una chiave numerica, dopo cliccate sul pulsante cifra per ottenere il testo cifrato.

Se ad esempio provate ad inserire CODINGCREATIVO con chiave 5 otterrete il testo cifrato HTINSLHWJFYNAT.

Se poi in testo in chiaro inserite HTINSLHWJFYNAT con chiave -5 otterrete il testo decifrato CODINGCREATIVO.

Abbiamo già spiegato il cifrario di Cesare nei seguenti tutorial:

Tutorial sul cifrario di Cesare in C

Cifrario di Cesare da file

Ecco di seguito il semplice codice per sviluppare il cifrario di Cesare online in JavaScript.


Cifrario di Cesare online in JavaScript

Creiamo una variabile alfabeto con le lettere del nostro alfabeto:

alfabeto='ABCDEFGHIJKLMNOPQRSTUVWXYZ';

Le lettere sono 26 quindi la chiave può assumere 26 possibili valori. Questo come già abbiamo detto nei precedenti tutorial rende il cifrario molto debole.

Ricordiamo inoltre che il cifrario di Cesare si realizza in modo circolare, dunque quando si arriva alla Z si riparte dalla A.

Consideriamo per comodità solo le parole scritte in maiuscolo, dunque trasformiamo in maiuscolo il testo eventualmente scritto nella casella di input testo in chiaro. Utilizziamo per questo scopo la funzione toUpperCase() che converte una stringa in caratteri maiuscoli.

testo.value=testo.value.toUpperCase();
//trasforma in maiuscolo il testo inserito

Azzeriamo eventuali valori presenti in testoCifrato:

testoCifrato.value="";
//poniamo a stringa vuota il testo cifrato

Ricaviamo il valore della chiave inserita (di default ho inserito il valore 5) che serve a determinare di quanto spostarci. Utilizziamo a questo scopo la funzione parseInt che analizza un argomento e restituisce un numero intero. Se la chiave è minore di zero allora aggiungiamo 26. Ciò serve per decifrare nuovamente il testo come visto nell'esempio sopra.

c=parseInt(chiave.value);
while (c<0) c+=26;

Calcoliamo adesso la lunghezza del testo inserito:

len=testo.value.length;

Quindi con un ciclo for leggiamo tutti i caratteri e li spostiamo seguendo questa formula:

pos=(pos + c)%26;

In questo modo a pos (cioè alla posizione della lettera nell'alfabeto) aggiungiamo c e dopo calcoliamo il resto della divisione per 26. Così se la somma sfiora il limite massimo si parte nuovamente dall'inizio.

Utilizziamo la funzione charAt che in questo caso ritorna il carattere della stringa specificato dall'indice i.

Utilizziamo anche la funzione indexOf che restituisce l'indice all'interno dell'oggetto String.

for(var i=0; i<len; i++){

ch=testo.value.charAt(i);
if (ch>='A' & ch<='Z') {

pos=alfabeto.indexOf(ch);

pos=(pos + c)%26;
testoCifrato.value += alfabeto.charAt(pos);
}

}

}

La funzione Cancella è molto semplice in quanto annulla semplicemente i valori contenuti nei campi testo in chiaro e testo cifrato.

Ecco dunque il codice JavaScript completo sul cifrario di Cesare:
<script type="text/javascript">
function Cifrato(testo, testoCifrato, chiave){
	alfabeto='ABCDEFGHIJKLMNOPQRSTUVWXYZ';
	testo.value=testo.value.toUpperCase();
	
	testoCifrato.value="";
	
	c=parseInt(chiave.value);
	while (c<0) c+=26;

       len=testo.value.length;

	for(var i=0; i<len; i++){
		ch=testo.value.charAt(i);
		
		if (ch>='A' & ch<='Z') {
			pos=alfabeto.indexOf(ch); 
                        //trova la posizione della lettera nell'alfabeto
			pos=(pos + c)%26; 
/*aggiunge c e calcola il resto della divisione per 26, così se la somma sfiora il limite massimo si parte nuovamente dall'inizio*/ 
			testoCifrato.value += alfabeto.charAt(pos);
                       //mostriamo la lettera nella nuova posizione
		}
	}
}

function Cancella(testo, testoCifrato, chiave){
	testo.value = "";
	testoCifrato.value = "";
	chiave.value = "5"
}
</script>

Ecco infine il codice HTML per creare i campi di testo e i pulsanti:

<form>
<label>Testo in chiaro</label><input name="t"><br>
<label>Chiave numerica</label><input name="c" value=5><br>
<label>Testo cifrato</label><input name="tc"><br>
<input type="button" value="Cifra" onclick="Cifrato(t,tc,c)">
<input type="button" value="Cancella" onclick="Cancella(t,tc,c)">
</form>

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 *