Vamos a programar #33 - Calculadora de Vigenère ver2.0.

Hola de nuevo a todos, el día de hoy vamos a ver una actualización para la calculadora de Vigenere que previamente ya habíamos hecho.
La primera versión de esta cumplía con su trabajo, pero no estaba totalmente hecha, no era capaz de interpretar símbolos que no fueran letras. El día de hoy vamos a agregar el código necesario para que funcione.

El código.

El código javascript para la calculadora de Vigenere es el siguiente:

function AsciiToA1(Char1)
{
	if (IsLower(Char1)){
	 Char1 -= 32;	
	}
	if (IsEnie(Char1)){
	return 15;
	}else if(Char1-64 < 15){
		return(Char1-64);
	}
	else if(Char1-64 >= 15 && Char1-64 < 28){
		return(Char1-63);
	}
}

function IsLetter(c){
	return IsUpper(c) || IsLower(c);
}

function IsEnie(Char2){
	if(Char2 == 209 || Char2 == 241){
		return true;
	}else{
		return false;
	}

}

function IsUpper(Char3){
	if((Char3 >= 65 && Char3 <= 90) || (Char3 == 209)){
		return true;
	}else{
		return false;
	}
}

function IsLower(Char4){
	if((Char4 >= 97 && Char4 <= 122) || (Char4 == 241)){
		return true;
	}else{
		return false;
	}
}

function IsA1Char(Char5){
	if (Char5 > 27){
		return false;
	}else{
		return true;
	}
}
function Encriptar(ModeEnc)
{
	debugger;
	var GetPhrase = document.getElementById('InputText').value;
	var GetPass = document.getElementById('PassWord').value;
	var Codes = [];
	if(GetPhrase.length < 1 || GetPass.length < 1)
	{
		alert('La frase/contraseña no puede estar en blanco')
		return;
	}
	var PassData = PhraseToArray(GetPass);
	var PhraseData = PhraseToArray(GetPhrase);
	var SpaceCount = 0;
	if (ModeEnc == true){
		for(var i = 0; i < PhraseData.length; i++){
			if(IsA1Char(PhraseData[i]) == false){
				Codes.push(PhraseData[i]);
				SpaceCount += 1;
			}else if(IsA1Char(PhraseData[i]) == true){
				Codes.push((PassData[(i - SpaceCount) % PassData.length] + PhraseData[i]) % 27);
			}
		}
	}else{
		for(var i = 0; i < PhraseData.length; i++)	{
			if(IsA1Char(PhraseData[i]) == false){
				Codes.push(PhraseData[i]);
				SpaceCount += 1;
			}else{
				var Value = PhraseData[i] - PassData[(i - SpaceCount) % PassData.length];
				if (Value < 1){
					Value += 27;
				}
			Codes.push(Value % 27);
			}
		}
	}
	document.getElementById('Result').value = Codes;
	return Codes;
}
function RebuildString(Codigos)
{
	var Salida = ""
	for(var i = 0; i < Codigos.length; i++)
	{
		if (IsA1Char(Codigos[i]) == false){
			Salida += String.fromCharCode(Codigos[i]);
		}else{
			if (Codigos[i] == 15 )
				Salida += String.fromCharCode(209);
			if (Codigos[i] == 0)
				Salida += String.fromCharCode(90);
			if(Codigos[i] < 15 && Codigos [i] > 0)
				Salida += String.fromCharCode(Codigos[i]+64);
			if(Codigos[i] > 15 && Codigos[i] < 28)
				Salida += String.fromCharCode(Codigos[i]+63);
		}
	}
	document.getElementById('Result').value = Salida;
}

function PhraseToArray(Text){
	var Out = [];
	for(var i = 0; i < Text.length; i++){
		var CodeChar = Text.charCodeAt(i);
		if(IsLetter(CodeChar) == true){
			Out.push(AsciiToA1(CodeChar));
		}else{
			Out.push(CodeChar);
		}
	}
	return Out;
}

Cómo verás, se han agregado varias funciones, la primera de ellas es "AsciiToA1". Está cómo su nombre lo indica, servirá para que el carácter que se le pase cómo parámetro, lo convierta a su equivalente A1Z27. la función de vuelve un valor entre 1 y 27 que representa la posición de la letra en el alfabeto.

La función "IsLetter" sirve para determinar si el parámetro usado es una letra, para ello comprobara si al llamar a las funciones "IsUpper" ó "IsLower" devuelven true, si al llamar a esas funciones y cualquiera de las dos devuelve un valor false, podemos asumir que el  numero de caracter que se pasó, es equivalente a una letra.

La función "IsEnie" sirve para determinar si el parámetro usado es la letra Ñ, ya se mayúscula o minuscula. Hay que recordar que en el standar Ascii extendido, la letra Ñ no es continua a la letra N, en cambio esta hasta la posición 209 para la "Ñ" y 241 para "ñ", cuando se pasan esos números cómo parámetro devuelve true, en caso contrario false.

Las funciones "IsUpper" e "IsLower", sirven para determinar si la letra que se pasó cómo parámetro es mayúscula o minúscula (respectivamente), si el parámetro está dentro del rango 65~90 o es 209, la función "IsUpper" devuelve true. Para la función "IsLower", cuando el parámetro está en el rango 97~122 o es 241, devuelve true, en caso contrario devuelve false.

Finalmente la función "IsA1Char" sirve para determinar si el parámetro que se le pasa, esta dentro del rango 1~27, si es así, devuelve true, en caso contrario devuelve false. Todo esto se usa porque cuando se hace el cálculo, los valores se trabajan de la forma A1Z27, entonces, cualquier valor que se encuentre fuera de este rango, será un símbolo y no se debe de tomar en cuenta.

Además los estilos CSS se mejoraron un poco para hacerlo un poco más vistoso.

.h1v
{
    font-size: 16px;
}
.formVigenere{
    font: 95% Arial, Helvetica, sans-serif;
    max-width: 400px;
    margin: 10px auto;
    padding: 16px;
    background: #F9F9F9;
}
.textareaV
{
    width: 100%;
    height: 150px;
    padding: 2px 5px;
    box-sizing: border-box;
    border: 2px solid #999;
    border-radius: 4px;
    resize: none;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.textareaV:focus
{
    width: 100%;
    height: 150px;
    padding: 2px 5px;
    box-sizing: border-box;
    border: 2px solid #00BB00;
    border-radius: 4px;
    resize: none;
}

.TextV
{
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #999;
    border-radius: 4px;
}

.ButtonV
{
width: 100%;
    background-color: #009900;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.ButtonV:hover
{
width: 100%;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

Con el uso de estas funciones, la calculadora se ha vuelto más funcional y con el código CSS se ve mejor. El resultado cómo de costumbre lo puedes bajar de mi dropbox.

Por ahora es todo. Los leo luego.