Vamos a programar #45 - Código Bacon (ver. Javascript).
Hola de nuevo a todos, el día de hoy vamos a ver cómo crear una aplicación en javascript que sirva para aplicar el código Bacon en un texto.
En el post anterior hicimos una versión en C# para escritorio, el día de hoy vamos a realizar una versión para la Web.
En el post anterior hicimos una versión en C# para escritorio, el día de hoy vamos a realizar una versión para la Web.
El código.
El codigo en javascript que sirve para cifrar una frase usando el código Bacon es el siguiente:
<html>
<head>
<title>Bacon Cipher</title>
<style type="text/css">
.FormBacon{
font: 95% Arial, Helvetica, sans-serif;
max-width: 600px;
margin: 10px auto;
padding: 16px;
background: #F9F9F9;
}
.FormBacon h1{
font-size: 140%;
text-align: center;
}
.h1c
{
font-size: 16px;
}
.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 #26c6da;
border-radius: 4px;
resize: none;
}
.TextV
{
width: 100%;
box-sizing: border-box;
border: 2px solid #999;
border-radius: 4px;
}
.ButtonV
{
width: 100%;
background-color: #26c6da;
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: #30e0e0;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
}
</style>
<script type="text/javascript">
var Values =["AAAAA", "AAAAB", "AAABA",
"AAABB", "AABAA", "AABAB", "AABBA", "AABBB", "ABAAA", "ABAAA",
"ABAAB", "ABABA", "ABABB", "ABBAA", "ABBAB", "ABBBA", "ABBBB",
"BAAAA", "BAAAB", "BAABA", "BAABB", "BAABB", "BABAA", "BABAB",
"BABBA", "BABBB"];
function PhraseToArray(Text){
var Out = [];
for(var i = 0; i < Text.length; i++){
var CodeChar = Text.charCodeAt(i);
Out.push(CodeChar);
}
return Out;
}
function CharToBaconianCode(){
//debugger;
Input = document.getElementById('InputText').value;
Input = Input.toUpperCase();
var Letras = PhraseToArray(Input);
var OutValue = "";
for (var X = 0; X < Letras.length; X++)
{
if (Letras[X] < 91 && Letras[X] > 64)
{
OutValue += Values[Letras[X] - 65];// + " ";
}
}
document.getElementById('PreResult').value = OutValue;
return OutValue;
}
function IsLower(Code)
{
if (Code > 96 && Code < 123)
return true;
else
return false;
}
function FinalCipher()
{
//debugger;
var PreCipher = document.getElementById('PreResult').value;
var Phrase = document.getElementById('Phrase2').value;
if (PreCipher.length != Phrase.length)
{
alert("Las longitudes del pre-cifrado y la frase para insertarlo no coinciden");
return "Error";
}
var PreCipherChars = PhraseToArray(PreCipher);
var PhraseChars = PhraseToArray(Phrase);
var FinalResult = "";//string
for (var Y = 0; Y < PhraseChars.length; Y++)
{
if (PreCipherChars[Y] == 65)
{
if (IsLower(PhraseChars[Y]))
FinalResult += String.fromCharCode(PhraseChars[Y]);
else
FinalResult += String.fromCharCode(PhraseChars[Y] + 32);
}
else
{
if (!IsLower(PhraseChars[Y]))
FinalResult += String.fromCharCode(PhraseChars[Y]);
else
FinalResult += String.fromCharCode(PhraseChars[Y] - 32);
}
}
document.getElementById('Result').value = FinalResult;
}
</script>
</head>
<body>
<div class="FormBacon">
<br />
<h1>Código Bacon</h1><br />
<br />
<form>
<span class="h1c">Frase a encriptar:</span>
<br />
<input class="TextV" id="InputText" type="text"></input><br />
<br />
<input class="ButtonV" id="Encrypt" onclick="CharToBaconianCode()" type="button" value="Pre-cifrar" /><br />
<br/>
<span class"h1c">Resultado del Pre-cifrado</span><br/>
<br/>
<textarea class="textareaV" id="PreResult" rows="5"></textarea><br/>
<br/>
<span class="h1c">Frase para insertar</span><br /><br/>
<input class="TextV" id="Phrase2" type="text" /><br />
<br />
<input class="ButtonV" id="UnEncrypt" onclick="FinalCipher()" type="button" value="Cifrar" /><br />
<br />
<span class="h1c">Resultado</span>
<textarea class="textareaV" id="Result" rows="5"></textarea><br/><br/>
</form>
</div>
</body>
</html>
La aplicación consiste de cinco partes; de las cuales cuatro son funciones y una más, es una variable que se usará para almacenar las constantes del cifrado
Primero definimos una nueva variable, será una matriz (que ya dije para que se usa). Luego creamos una funcion que reemplazará a la función de C# "string.toArray()", esta función es "PhraseToArray()"; recibe un parámetro que será el texto que queremos convertir a una matriz de números, hay que recordar que en el caso de la función en C#, cuando la llamamos, esta devuelve una matriz del tipo "char", en este caso, cómo vamos a usar el valor ASCII de esa letra, directamente guardamos en la matriz el valor resultante de llamar a la función "charCodeAt()", si hacemos memoria, está función, lo que hace es obtener el código ASCII de la letra (o símbolo) que se le pasa cómo argumento, entonces, solamente hacemos un ciclo "for" que recorra cada letra desde el inicio al final del texto que se ingreso cómo parámetro en la función "PhraseToArray()". Finalmente, está función devuelve una matriz con números que representa el código ASCII de cada letra.
La siguiente función es "CharToBaconianCode()", cómo su nombre lo dice, está función lo que hace, es convertir cada letra en su equivalente en el código Bacon. La única diferencia con la función de C#, es que esta no recibe parámetros, lo que hace para obtener el texto sobre el cual trabajara, es usar la función "document.getElementById('')" y obtener el valor de la caja de texto. El resto del proceso es similar, solamente que no hace conversiones de "char" a "byte", porque hay que recordar que los valores de la función "PhraseToArray()" ya están en un valor numérico.
La función "IsLower()" no sufre ningún cambio.
Finalmente la función FinalCipher() al igual que la función "CharToBaconianCode()" no sufre mayor cambio con respecto a la función de C#.
Y bien, por ahora es todo, cómo te habrás dado cuenta, todo funciona perfecto cuando vamos al derecho, pero no al revés, por absurdo que parezca, olvide escribir el código para realizar el proceso contrario, pero no te preocupes, en breve agregaré las partes faltantes en esta versión y en la versión de C#, además, la siguiente semana, la versión para android vendrá con la función para hacer el proceso inverso. Cómo siempre, la descarga del código la puedes hacer desde mi dropbox.
Por ahora es todo, los leo luego.
Primero definimos una nueva variable, será una matriz (que ya dije para que se usa). Luego creamos una funcion que reemplazará a la función de C# "string.toArray()", esta función es "PhraseToArray()"; recibe un parámetro que será el texto que queremos convertir a una matriz de números, hay que recordar que en el caso de la función en C#, cuando la llamamos, esta devuelve una matriz del tipo "char", en este caso, cómo vamos a usar el valor ASCII de esa letra, directamente guardamos en la matriz el valor resultante de llamar a la función "charCodeAt()", si hacemos memoria, está función, lo que hace es obtener el código ASCII de la letra (o símbolo) que se le pasa cómo argumento, entonces, solamente hacemos un ciclo "for" que recorra cada letra desde el inicio al final del texto que se ingreso cómo parámetro en la función "PhraseToArray()". Finalmente, está función devuelve una matriz con números que representa el código ASCII de cada letra.
La siguiente función es "CharToBaconianCode()", cómo su nombre lo dice, está función lo que hace, es convertir cada letra en su equivalente en el código Bacon. La única diferencia con la función de C#, es que esta no recibe parámetros, lo que hace para obtener el texto sobre el cual trabajara, es usar la función "document.getElementById('')" y obtener el valor de la caja de texto. El resto del proceso es similar, solamente que no hace conversiones de "char" a "byte", porque hay que recordar que los valores de la función "PhraseToArray()" ya están en un valor numérico.
La función "IsLower()" no sufre ningún cambio.
Finalmente la función FinalCipher() al igual que la función "CharToBaconianCode()" no sufre mayor cambio con respecto a la función de C#.
Y bien, por ahora es todo, cómo te habrás dado cuenta, todo funciona perfecto cuando vamos al derecho, pero no al revés, por absurdo que parezca, olvide escribir el código para realizar el proceso contrario, pero no te preocupes, en breve agregaré las partes faltantes en esta versión y en la versión de C#, además, la siguiente semana, la versión para android vendrá con la función para hacer el proceso inverso. Cómo siempre, la descarga del código la puedes hacer desde mi dropbox.
Por ahora es todo, los leo luego.
No hay comentarios.