Using Javascript

2013-02-07T13:38:31+00:00

Javascript is a free programming language that already exists in your browser. You can use it right away! For solving cryptograms it is considerably faster than Python, some 20 times in my experience. On the downside it is a bit more complicated language to program.

Javascript runs inside your browser. The program code must be written in a web page, and then when the browser loads the page it sees the program lines and executes them. So we have two parts to the program: the webpage itself which is programmed in HTML and then the javascript code within the page.

The HTML program.

Let’s look at a simple example of the HTML program that makes the webpage. We want a green page that reads “Hello World” when we load it. First of all, type the code below into a Text Editor (I use TextWrangler):

<body bgcolor="green" >
<FONT FACE= "Verdana">
<h1>Hello World!</h1>
</body>
</html>

Now save it as Test.html and double-click it. A web page will open in your browser like this:

For cryptogram solving the HTML program needs to ask for the ciphertext and display the solved plaintext and the key. Here is the HTML program:

<html>
<head>
<script type="text/javascript">
</script>
</head>
<body bgcolor="green" >
<h3>Cryptogram Solver</h3> (paste ciphertext into Input Area. Press button to solve and display plaintext & key in Output Area)<br><br>
Input Area:<br>
<textarea id="input_area" cols=80 rows = 5>
</textarea><br>
Output Area:<br>
<textarea id="output_area" cols=80 rows = 8>
</textarea><br>
Button:<br>
<input type="button" value="Solve" onclick=do_solve();>
</body>
</html>

Save this as Test1, double-click it to get:

You will see there is an Input area for the ciphertext and an Output area where the solution will be displayed. Also a button to click to get things going.

The javascript program.

The javascript code which solves the cryptogram can be included in the HTML program but I prefer to make a separate program called a Web Worker. The HTML program contains enough javascript to send the ciphertext to the Web Worker and tell it to get started. The Worker carries out its programmed duties, reporting back results to the HTML program which then displays on your browser in the Output area.

The javascript code that communicates with the Worker is put in the 'head' of the HTML program between the <script> and </script>. Here is the code:

var hclimber;

function do_solve()

{
var str;
hclimber = new Worker('AP_worker.js');
str = document.getElementById('input_area').value;
hclimber.postMessage(str);
hclimber.onmessage = function (event)
{
str = event.data;
document.getElementById('output_area').value = str;
}
}

On clicking the button, the function do_solve() is called. This makes the Worker 'hclimber', sends it the ciphertext and displays any data that comes back in the Output area.

The main javascript program is in the Worker -- click here to view it. It solves monoalphabetic substitution ciphers. Because this is not a tutorial I am not going to go through it in detail. If you have read my Python tutorial you will have been through what this program is doing.

You can run the program here. Paste the ciphertext below into the Input Area, press the button and the prtogram will put the plaintext in the Output area:

OJNPZ FDWXJ UHDNI JGKFD QDPDQ JODHI XIFJK DSBZW NBQZH HBIZD VIDFF DHQIJ HSBQB JHHJF JHMDN NDLRB NDSUB ODEHJ UPDTD NXQAB HM.

Many of the commands are different in the two languages and to help those who are interested I have summarised these below.

python | javascript

x=randrange(26) | x=Math.floor(Math.random()*26);

alpha = "OJNPZ" | var alpha = "OJNPZ";
value = [0,1,2,3,4] | var value = {0,1,2,3,4 };
len = len(alpha) | len = alpha.length;
t=0 | var t=0;

index = [0]*26 | var index=new Array(26);

cipher=['A']*200 | var cipher=new Array(200);

x = ord(alpha[j])-65 | x = alpha.charCodeAt(j)-65;
pt =chr(x+97) | pt = String.fromCharCode(x+97);

ch = alpha[j] | ch = alpha.charAt(x);
alpha = alpha + ch; | alpha = alpha + ch;

for j in range(10): | for(j=0;j<10;j++)
do this | { do this; }

if(score>10): | if(score>10)

do this | { do this; }

else: | else
do that | {do that }

print ("K2=", display) | postMessage("K2=" + display);

InFile = open("Tetras.bin","rb") | importScripts('Tettable.js');
temp_string = InFile.read()
InFile.close()