ECEN 1200 - Telecommunications 1

Peter Mathys, Fall 2006, 11/17/06


Homework/Computer Lab 11: Dynamic Web Pages, Introduction to JavaScript, and Cryptography Basics


How to Submit Solutions for this Homework/Computer Lab
Due Date: Friday 12-01-06
E-mail To: no-spam e-mail
Subject Line: HWCL 11
1'st Line: Your name and student number

This computer lab is written for Windows 9x/2000/NT/XT based PCs, with a Mozilla/Firefox Browser or an Internet Explorer. Those portions of the lab that are not platform-specific can also be run on a Mac.

Quick Links


Goals of this Lab

The goals of this computer lab are:


Programs to Download

You may need some or all of the following programs for this computer lab. Download them and, if necessary, unzip and install them on the computer that you use to run this lab.

7-Zip Icon 7-Zip is a file archiver with high compression ratio. It supports the 7z, ZIP, GZIP, BZIP2 and TAR formats for both packing and unpacking. Unpacking only is supported for the RAR, CAB, ISO, ARJ, LZH, CHM, Z, CPIO, RPM, DEB, and NSIS formats. The home page of 7-Zip is at http://www.7-zip.org.

Edit Plus 2.21 Icon EditPlus V2.21 is an Internet-ready, 32-bit text editor for Windows. It offers many powerful features for Web page authors and programmers and has powerful syntax highlighting for HTML, JavaScript, Perl, Java, C/C++ and any other programming language, based on the default syntax files or user-defined syntax files, for both the screen display and the printing. A spell checker (US version) is also available. The home page for EditPlus is at http://www.editplus.com.
Note: If you cannot install EditPlus because you have no administrator privileges, then you should use the files in epp221run.7z after unpacking (with the 7-Zip program) to a directory of your choice.

Image Analyzer Icon Image Analyzer 1.26 is an image editing, enhancement and analysis program. It can read/write and convert between BMP, ICO, CUR, WMF, EMF, JPEG, PNG, PCX, JPEG2000, GIF, and TIF image formats. The home page of Image Analyzer is at http://meesoft.logicnet.dk.

LViewPro Icon LViewPro 1.D/32 is a very compact image viewer, editor, and file format converter. The home page of LViewPro is at http://www.lview.com.


Introduction

HTML documents are essentially static objects which contain formatted information. The only interaction with the user occurs in the form of hypertext links that lead to other documents. One exception are forms that can be included in an HTML document, filled out by the user, and then processed by a CGI (common gateway interface) program at the server. This allows for more dynamic interaction with a user, since the server can deliver more specific information based on the feedback it receives from the user. But there are two potential drawbacks with this method. The first is that the author of a Web page must have direct access to the server and its programs to implement this interaction, and the second one is that all user input must be sent to the server first for processing, and then a response must be sent back, before any interaction with the user can occur.

Another way to make Web pages and other network-based applications more interactive is to send a program to the user, either embedded in an HTML document or as a standalone entity, which can then be executed on the user's computer and provide much of the interaction capability locally. In practice, however, this is not quite as trivial as it sounds initially. One major problem is the security issue that arises if an arbitrary program can be downloaded via a computer network and then executed at the user's computer. In JavaScript this problem is mostly solved by allowing the script to execute only a very limited set of functions. Most notably, JavaScript cannot access the hard disk of the computer on which it is running (except for placing and retrieving "cookies" in a special predefined text file).

One misconception that is still quite widespread is that JavaScript is somehow similar or related to Java. This is not true. The reality of it is that Netscape started out with the name LiveScript in 1995. At the same time Sun Microsystems was bringing out Java, which is a full-fledged programming language that is much more powerful than JavaScript, but also much more difficult to learn. It was then realized by Netscape and Sun that LiveScript could be used to launch Java applets from HTML documents. Thus, the two companies formed an alliance and Netscape renamed LiveScript to JavaScript.


Objects, Properties, Methods, and Event Handlers

JavaScript is an object-oriented language. Roughly speaking, this means that the language supports a structured and hierarchical description of the entities such as text strings, numbers, images, etc, that it is supposed to process under program control. Objects in the real world are cars, dogs, fruits, etc. In JavaScript objects are windows, documents, images, links, etc. Objects can have sub-objects and sub-sub-objects, etc. For example, the wheels of a car are sub-objects of the car, and the tires ar sub-objects of the wheel and therefore sub-sub-objects of the car. In JavaScript a (browser) window contains a document as a sub-object and the document may in turn contain images and links as sub-objects. A convenient way to build and describe such hierarchically organized objects is the so-called dot syntax. It creates names for objects by starting out at the top of the hierarchy, separating each hierarchical level by a dot, and using as many levels as necessary to arrive at a unique object description. Here are some examples:

  car
  car.wheel
  car.wheel.tire
  animal.domestic.dog
  fruit.tropical.mango
  window
  window.document
  window.document.images
  window.document.links
  window.document.forms.elements

A physical object has properties that define the object. For example, the car has a color, a model year, the tire has a pressure value, the dog has an age, the fruit has a taste, etc. Using the dot syntax, we could name those properties as:

  car.color
  car.modelYear
  car.wheel.tire.pressureValue
  animal.domestic.dog.age
  fruit.domestic.apple.taste

Objects in JavaScript similarly have properties. For example, a window has a name and a status(bar), a document has a foreground and a background color, a form has text, a text has length, an image has a source, etc. In dot syntax we would specify these properties as:

  window.name
  window.status
  window.document.fgColor
  window.document.bgColor
  window.document.forms.text
  window.document.forms.text.length
  window.document.images.src

A (partial) view of the JavaScript object hierarchy is shown in the following graph.

(Partial) JavaScript Object Model

The most frequently used objects in JavaScript are documents, and within documents images, e.g., to create "image rollovers" or animations, and forms to obtain user input via text, buttons and radio buttons. Note that the "navigator" and "screen" objects are shown as sub-objects of the "window" object, but with a dashed rather than a solid line. This reflects the fact that not all browsers (and the companies behind them) regard the JavaScript object hierarchy in exactly the same way. Netscape Navigator thinks of the "navigator" and "screen" objects as separate free-standing objects, whereas Microsoft's Internet Explorer thinks of them as being sub-objects of the "window" object.

In addition to defining objects which have properties, JavaScript also defines methods that are associated with objects. A method can do something to the object or with the object. For example, referring back to the "car" object, car.doors.open() would be the method called to open the doors. Note that method names are like property names, except that they end with a pair of parentheses. The reason for the parentheses is that methods often require that additional information in the form of arguments or parameters be sent along. Thus, the statement or command car.doors.open(slowly) would mean that the open() method has to use the speed parameter slowly. Other examples of methods and parameters for some of the real world objects that we considered earlier are:

  car.wash()
  car.wheel.stop(gradually)
  car.engine.accelerate()
  animal.domestic.dog.fur.pet(frontToBack, slowly)
  animal.domestic.dog.wash()
  fruit.tropical.mango.slice()
  fruit.tropical.mango.squeeze()
  fruit.tropical.mango.wash()

Note that a method can have several parameters, as shown in the example of petting the dog. The same method, like wash() in the above examples, can also be applied to several different objects. But since the wash() method is associated with a particular object, car.wash() and dog.wash() can be implemented differently and according to the specific shapes and needs of each object. In JavaScript an object can have any number of methods associated with it (including no method at all). Typical examples are:

  subWindow = window.open("newURL", "windowName")
  subWindow.close()
  window.document.write("Hello World!")
  window.document.close()
  window.alert("Your browser has cookies disabled")
  window.setTimeout("animate()",msecDelay)

The first method opens a new browser sub-window with name "windowName", and pointing to the URL "newURL". The second method closes the sub-window "subWindow". It is also possible to use the method window.close(), but it is not very advisable since it closes the current (main) window. The method window.alert("text") brings up a small window to inform the user with the "text" message. The last method calls the "animate()" function (i.e., a procedure written for a specific Web page and not part of the JavaScript language) after a delay specified by msecDelay (in milliseconds).

Another characteristic associated with many objects in JavaScript are event handlers. The majority of events occur as the result of a user activity. Typical event names are:

  onClick
  onMouseOver
  onFocus
  onBlur
  onLoad
  onChange

Most of these relate to mouse acvtivities, onClick and on onMouseOver are quite self explanatory. The onFocus event for an object generally occurs when the mouse is pointing at that object, and the onBlur event occurs when the mouse moves away again. The onLoad event is usually associated with a window and triggered by the loading of an HTML document in that window. The onChange event applies mostly to text fields in forms that can be filled in by the user. How an object responds to an event is specified in an extra attribute that is part of the object's HTML tag. The attribute consists of the event name, an equal (=) sign, and, in double quotes ("), the instructions of what to do when the particular event is triggered. An example is the following anchor tag:

  <a href="forbidden.html" onClick="window.alert('This is off bounds!')">Don't click me!</a>

It points to the document forbidden.html and if somebody clicks on the associated link text, an alert box pops up saying "This is off bounds!" (note the use of single quotes in the above HTML tag, since double quotes are already used to enclose the instructions of what to do when the onClick event is triggered).


JavaScript Basics

A JavaScript script is a program that is embedded in an HTML document. To tell the browser where a script starts and ends, the <script> and </script> tags are used to enclose all scripting statements. To specify the scripting language (JavaScript is not the only such language), an attribute is added to the opening tag so that it becomes <script language="JavaScript">. Scripts are very often placed inside the <head> section of an HTML document, but they can also appear inside the <body> section as shown in the following simple JavaScript statement that generates an HTML page with a single line of text, saying "It is now" followed by the current date and time.

A Simple JavaScript Statement
<script language="JavaScript">
  document.write("It is now " + Date())
</script>

This is an extremely simple example, but it shows the potential of a scripting language to convert an otherwise static HTML document into something more dynamic by including the current time and date.

Sometimes you want to add comments to your script so that you later remember again why you wrote something in a particular way, or to explain to others what your script does. The following example shows how to insert one-line comments (everything on the same line after // is considered to be a comment), or multi-line comments (start with /* and end with */).

A Simple JavaScript Statement and Comments
<script language="JavaScript">
  // This is a one-line comment in JavaScript
  /* This is how you make
       a multi-line comment */
  document.write("It is now " + Date())
</script>

What happens if someone has an old browser that doesn't understand JavaScript. Obviously, such a browser will not be able to execute any of the JavaScript statements. But, it will think of the JavaScript instructions as HTML text that needs to be displayed (by convention, it should not display the unknown tags <script> and </script>, though). To avoid this, JavaScript statements are often placed inside an HTML comment tag as shown in the next example.

Hiding JavaScript from Old Browsers
<script language="JavaScript">
  <!-- Hide script from old browsers
  document.write("It is now " + Date())
  // End hiding script from old browsers -->
</script>

Note that the HTML comment (starting with <!--) is inside the <script> container. The last line before the </script> tag is made into a comment for JavaScript (starting with //) so that it doesn't get confused by the "end of the HTML comment" tag (i.e., by -->). In the following examples we will generally omit this construction for the sake of simplicity. If you are concerned about the appearance of an HTML page with JavaScript on an old browser, just simply add the two lines highlighted above.

Let's now look at the first complete example of an HTML file with JavaScript embedded. One of the first problems that most people run into when they start learning JavaScript is how to name and access the different predefined objects, such as images, forms, links, etc, that exist in a browser window. Thus, it is useful to have a simple and straightforward method to display the value of an object property in JavaScript. The HTML file example1.html shown below does that for navigator.appName, navigator.appVersion, document.lastModified, document.images.length, and document.images[0].src properties.

JavaScript Example 1
<html>
<head>
<title>JavaScript - Example 1</title>
</head>
 
<body bgcolor="#E0E8F0" text="#800080">
<img src="crowcoks.jpg" align="right" border="0" alt="A Coke Graphic">
<h2>
<script language="JavaScript">
  document.write("It is now " + Date() + ", Welcome to JavaScript")
</script>
</h2>
<img src="lemming.gif" border="0" alt="Divider Line">
<p>
<script language="JavaScript">
  document.write("<b>navigator.appName:</b> <i>" + navigator.appName + "</i><br>")
  document.write("<b>navigator.appVersion:</b> <i>" + navigator.appVersion + "</i><br>")
  document.write("<b>document.lastModified:</b> <i>" + document.lastModified + "</i><br>")
  document.write("<b>document.images.length:</b> <i>" + document.images.length + "</i><br>")
  document.write("<b>document.images[0].src:</b> <i>" + document.images[0].src + "</i><br>")
</script>
</p>
</body>
</html>

Note that the text inside the parentheses of the document.write() method consists of HTML statements (enclosed in quotes ") such as "<B>navigator.appName:</B> <I>" and the actual value (not enclosed in quotes ") of the property of interest, e.g., navigator.appName. The different text elements are concatenated using the + symbol to form a single text string that is passed on as an argument to the document.write() method.


Functions and Variables

One of the advantages of a programing environment like JavaScript over a plain document description language such as HTML is that the former includes mechanisms to structure and simplify repetitive tasks. The key to achieving this is the possibility to create user-defined functions and variables. A JavaScript function is a user-defined collection of JavaScript statements that carry out some action(s) and optionally return a result. Examples of such actions are replacing one image in an HTML document by another image, testing a text string that was input by a user for consistency, or multiplying two numbers and returning the result as shown in the following script statements.

A Simple JavaScript Function
<script language="JavaScript">
  function multiplyNumbers(a,b) {
    return a*b
  }
</script>

Thus, the JavaScript statement multiplyNumbers(3,7) would return the value 21. Every function must have a name, like multiplyNumbers in the above example, and the collection of statements that make up the function must be enclosed in curly brackets ("{}"). The definition of the function must be preceded by the keyword function, but to call the function later on, only the funtion name is used. Optionally, parameters like a and b in the above example can be passed on to a function. However, the pair of parenthesis ("()") at the end of the function name is required in any case, whether the function uses parameters or not. The name of a function has to satisfy some requirements. It must be one contiguous string without spaces and start with a letter. Also, function names are case sensitive and multiplyNumbers(a,b) is thus considered to be different from multiplynumbers(a,b).

Let us now see how we can use a function to simplify the JavaScript statements in the HTML document example1.html that was introduced in the previous section. As you may have noticed, the document.write(...) statements in example1.html contain a lot of repetitive text. The name of each property is shown twice, once as an HTML text string, and once as a JavaScript object property name. In addition, each of the text strings contains a number of HTML formatting tags. In each case the tags in front of the property name and after it are the same. Thus, using a JavaScript function, two very convenient simplifications can be obtained in that the HTML formatting tags only need to be placed and written once in the function definition, and the name of the object property that we wish to observe also only needs to be given once in the form of a parameter that is passed along when the function is called. The implementation and use of this showProperty() function are shown in the following example2.html file.

JavaScript Example 2
<html>
<head>
<title>JavaScript - Example 2</title>
<script language="JavaScript">
  function showProperty(propertyName) {     // Show object property
    document.write("<b>"+propertyName+":</b> <i>"+eval(propertyName)+"</i><br>")
  }
</script>
</head>
 
<body bgcolor="#E0E8F0" text="#800080">
<img src="crowcoks.jpg" align="right" border="0" alt="A Coke Graphic">
<h2>
<script language="JavaScript">
  document.write("It is now " + Date() + ", Welcome to JavaScript")
</script>
</h2>
<img src="lemming.gif" border="0" alt="Divider Line">
<p>
<script language="JavaScript">
  showProperty("navigator.appName")
  showProperty("navigator.appVersion")
  showProperty("document.lastModified")
  showProperty("document.images.length")
  showProperty("document.images[0].src")
</script>
</p>
</body>
</html>

As you can see, it is customary to place JavaScript functions inside the <head> section of an HTML document. This section is not displayed, even by older browsers, and it loads first, so that the JavaScript functions are available early on during the download process. A comparison of the example1.html and the example2.html files also illustrates very well how much work can be saved using functions, not to mention the much reduced potential for introducing errors through misprints, etc.

We mentioned earlier that JavaScript can be used to make Web pages more dynamic. This generally requires interaction with the user and, in particular, that a user's responses can be received and processed. In JavaScript this is primarily achieved using HTML tags of the form <input type="inputType"> inside the HTML container <form> ... </form>. The most common values for inputType are text for a single line text entry/display field, button for an input button, and radio for a radio button (only one of several such radio buttons with the same name attribute can be selected at any given time). The following example3.html file demonstrates the use of a text field and a button to select the background color of an HTML document, by entering a string of the form "#RRGGBB" where "RR" is the amount of red in hexadecimal, and "GG" and "BB" are the amounts of green and blue, also in hexadecimal.

JavaScript Example 3
<html>
<head>
<title>JavaScript - Example 3</title>
<script language="JavaScript">
  function showProperty(propertyName) {     // Show object property
    document.write("<b>"+propertyName+":</b> <i>"+eval(propertyName)+"</i><br>")
  }
</script>
</head>
 
<body bgcolor="#E0E8F0" text="#800080">
<img src="crowcoks.jpg" align="right" border="0" alt="A Coke Graphic">
<h2>
<script language="JavaScript">
  document.write("It is now " + Date() + ", Welcome to JavaScript")
</script>
</h2>
<img src="lemming.gif" border="0" alt="Divider Line">
<p>
<form>
  <input type="text" name="newBgColor">
  <input type="button" balue="Set bgColor"
      onClick="document.bgColor=document.forms[0].newBgColor.value">

</form>
</p>
<p>
<script language="JavaScript">
  document.forms[0].newBgColor.value = document.bgColor
  showProperty("navigator.appName")
  showProperty("navigator.appVersion")
  showProperty("document.lastModified")
  showProperty("document.images.length")
  showProperty("document.images[0].src")
</script>
</p>
</body>
</html>

Forms, as well as images, links and anchors in an HTML document are stored in arrays and can be referred to in JavaScript using object names such as document.forms[i] or document.images[i], etc, where the index i=0,1,2,.. refers to the first item (i=0), the second item (i=1), the third item (i=2), and so on, of a particular type of object in the order in which each individual item was listed in the HTML file. Thus, in the above example, document.forms[0].newBgColor.value refers to the value of the text field named newBgColor (defined by the name="newBgColor" attribute in the input tag) of the first (and in this case only) form, and the statement document.forms[0].newBgColor.value = document.bgColor sets this to the current value of the background color as a starting point. The attribute onClick="document.bgColor=document.forms[0].newBgColor.value in the second input tag is an event handler which assigns the value entered by the user in the text window of document.forms[0] as the new value for the document.bgColor property.

Up to this point we had no explicit need for intermediate data storage. In example2.html we asked for the values of some object properties, but we immediately passed these values on to the document.write(...) method. In example3.html, we obtained a user input, but we again immediately passed it on to the document.bgColor property. More complicated scripts will in general require the use of variables for the intermediate storage of data. To create a variable in JavaScript you can use the keyword var, followed by the name of the variable, which must satisfy the same requirements as a function name (single contiguous string without spaces and starting with a letter, case sensitive). A JavaScript variable can hold any value type, e.g., a number, a string, or even a whole image. The following example is an HTML document with three images, named up.gif, side.gif, and down.gif. Upon clicking a button, two of the images are interchanged. This requires that one image be stored temporarily, because only one image object can be moved at any given time. In the JavaScript portion of the file, as part of the swap() function, a (local) variable aux is first defined and then used for this purpose.

JavaScript Example Using Image Variable for Swapping
<html>
<head>
<title>JavaScript Example - Swapping Images</title>
<script language="JavaScript">
  function swap() {
    var aux
    aux = document.images[0].src    // Intermediate storage
    document.images[0].src = document.images[2].src
    document.images[2].src = aux
  }
</script>
</head>
 
<body bgcolor="#FCF566">
<center>
<h2>What's the Difference?</h2> <p>
<form>
<table bgcolor="#B0D8E0" border="0" cellspacing="0" cellpadding="4">
<tr>
  <td><img src="up.gif" width="108" height="42" border="0"></td>
  <td><img src="side.gif" width="108" height="42" border="0"></td>
  <td><img src="down.gif" width="108" height="42" border="0"></td>
</tr>
<tr>
  <td colspan="3" align="center">
    <input type="button" value="Click to Swap Images" onClick="swap()">
  </td>
</tr>
</table>
</form>
</center>
</body>
</html>

If several items of the same type need to be stored, then it is often advantageous to create an array variable, e.g., using the statement var img = new Array(17) as in the file fknot.html where img[0], img[1], img[2], ... img[17] are used to store images for an animation.


Control Structures

One of the most interesting and useful tools in a programming environment are the statements which control the flow of program statement executions. Repetitive tasks, such as showing a sequence of images for an animation, can be handled elegantly and efficiently by a "for loop" as shown in the following example.

A "For Loop" Control Structure in JavaScript
<script language="JavaScript">
  var img = new Array(17)   // Array to store images for animation
  for (var i=0; i<img.length; i++) {
    img[i] = new Image
    img[i].src = "myimage" + i + ".gif"
  }
</script>

A "for loop" starts with the keyword for, followed by the specification of a counter in parentheses ("()"), and then followed by the instructions that need to be executed repetitively for a specified number of times, enclosed in curly brackets ("{}"). The counter uses a variable, often named i, j, or k, whose start value is specified first (i=0;), followed by a specification of the end value (i<img.length;), and a specification of how the counting variable is updated for each execution of the loop (i++ means "increment i", i-- means "decrement i").

A second important control structure is the "if, then, else" structure that allows certain program statements to be executed conditionally. An example is shown in the following script:

A "If, Then, Else" Control Structure in JavaScript
<script language="JavaScript">
  function findSign(a) {   // Determine sign of number a
    if (a > 0) {
      return "positive"
    } else if (a == 0) {
      return "zero"
    } else {
      return "negative"
    }
  }
</script>

The function findSign(a) determines whether a number a is "positive", "zero", or "negative", and returns a corresponding text string. The "if condition" is specified in parentheses ("()"), e.g., as (a > 0) to test if a is positive, or as (a == 0) to test if a is equal to zero. The statements that need to be executed when the "if condition" is true follow immediately after the condition and are enclosed in curly brackets ("{}"). After the keyword else, all those statements follow that need to be executed when the "if condition" is false, again enclosed in curly brackets ("{}"). When there are no statements that need to be executed when the "if condition" is false, then the "else" part can be omitted. When there are further conditions to be tested, then the keyword combination "else if" is used, which leads to a nested "if, then, else" control structure, as the one used in the above example.


JavaScript Examples

Places where you can find more material about JavaScript:


Basics of Cryptography

Definition of encryption

Definition of decryption

Overall blockdiagram

Kerckhoffs principle

Symmetric and asymmetric algorithms

Transposition ciphers

Transposition using rectangular array

Rectangular array transposition with column permutation

Number of general transpositions

Casear alphabet for substitution cipher

Blockdiagram of shift cipher

Caesar cipher example

Simple substitution example

Simple substitution with keyphrase

Different types of cryptanalysis

Use of statistics for cryptanalysis

Single letter frequency distribution for English

Click here to see some examples of cryptanalysis.


JavaScripts for Interactive Cryptography


Questions you Have to Answer

To obtain credit for this homework/computer lab you need to answer the questions stated below. Send your solution to no-spam e-mail.

Rules for the Submission of Homework/Computerlab Solutions

Format: E-mail your solution as a plain text (ASCII) file. Do not use word processor files like Microsoft Word or "rich-text" HTML files.

Corrections: If you need to make corrections after you submitted your solution, resubmit all your answers (not only the ones that changed) since only your last submission of each homework/computer lab will be graded.

Teamwork: Teamwork is fine for the homework/computer labs, but the solutions must be turned in individually. In particular, copy and paste of entire solutions from other students is not acceptable.

Questions:

  1. Use the file example2.html as a starting point to determine the values of the following object properties: What is the interpretation of each of these quantities? Note: Download example2.html to your computer and modify the JavaScript statements as needed. To obtain the correct values for the last three items you also have to download (to the same directory as example2.html) the two images that are used in example2.html .
  2. In the file swap.html, how would you have to modify the script so that you can swap between the texts up -side down and up down -side?
  3. In the file fknot.html what is the HTML and/or JavaScript code that was used to implement the radio buttons that allow the animation to be played either forward or reverse?
  4. What exact mechanism is used in color.html to change the colors in the pop-up window according to the hexadecimal number entered by the user? What is the color corresponding to FF80FF? What is its complementary color? How is the pop-up window made to disappear upon leaving the Color Test HTML document?
  5. What special effect can you obtain in curious.html if you click the mouse in the right place? How many images are used altogether in curious.html? How many are used for the special effect?
  6. In the Trip to Italy photo album, what is the name of the file that contains the texts that are displayed beneath the pictures? Hint: The filename extension is .js (for JavaScript), and the file is read from within one of the <script> containers.
  7. To familiarize yourself with the JavaScript files for encryption and decryption use the plaintext
    People believe that witches travel on brooms because they fear horses, and that any reminder of a horse, like the iron horseshoe, wards off witches.
    as follows:
    1. In textAnalyze.html to see how the plaintext is converted to uppercase and everything except the letters A...Z are discarded, to see the length of the plaintext (should be 120 characters), and to see the relative frequencies of the single letters.
    2. In encryptCaesar.html to make a ciphertext using a Casear cipher. Try any key you like. Then use decryptCaesar.html with the same key to verify that decryption works correctly. Look at how the single letter frequencies are shifted if different keys are used.
    3. In encryptSubst1.html to generate a ciphertext using a simple substitution of the A...Z alphabet. You can use a key phrase, e.g., "sunshine today" in the ciphertext letter box and press "Complete Key" to simplify the process of key generation. Then use decryptSubst1.html to check that decryption works correctly. Try to replace some letters in the ciphertext letter box by "-" (hyphen) to see the effect on the decrypted text.
    4. In transpose.html to make a ciphertext using transposition. Use any number for the rows (key) that divides the length (120) of the plaintext. Look at the single letter frequencies of the ciphertext (using textAnalyze.html). Use the same JavaScript file for decryption, using the number of columns (rather than the number of rows) as key. Verify that you get the original plaintext back.
  8. The following table contains 5 ciphertexts (corresponding to different plaintexts). One is a Caesar cipher, one is a simple substitution cipher, one is a transposition cipher, one is a product cipher made by Caesar encryption followed by transposition, and one is a completely arbitrary text string with no meaning.

    Ciphertexts to Analyze
    Text 1
    IIROD TMLND BMTIA ETDAT HONSH LRHEN NLEEI ECSEE DAANI ORAAG NOVFS SYETR
    ITWTS SRTLH ECOWI HIERO FHBRZ SENTE EAEOP CHNSI DUEEE BFDNT ORMAR EAHPN
    Text 2
    QORWO GBRHG MDQGF TKYHQ GLKIH OYMPS RRHMD LQORH BIMDQ RXQID ESRYP RTKRQ
    FKGCR IVRPE KGHHR KPWMQ OTGCH BRQRI TTRPP QGQOR TGCCU DMTIQ MGDTO IDDRB
    Text 3
    VJFWO VUUUH KLREO KJDQG HQPHH DHQLD KVPLQ OWFQO DKHQW OKHJP VRQJZ QHLVR
    QUGDD HUQKV RWKQO YDWHW WWHHN HSKOZ KRUAH USHRL LUEFU IHPRO QHXHL RDRNG
    Text 4
    DIAHW JAWPL RKBUS CZFJO HTERR OYBNE CUFKE EOJMT FOEWT BPFEV SKNLP IJLUO
    DGVYI AMGZL JMXGX ZDRKX ITXHY UQDNP VYASM YQBQC UFVVW ZHQJN TCXYP WCGZI
    Text 5
    SPYCJ GTTTN WLTXP OHTEN SNCLQ EECLA APOST XTYEZ LXLCC TLRPH TESLY YPMZW
    PJYAP EPCES PRCPL EDFQQ PCPOL ALESZ WZRTN LWEPC CZCZQ NCZDD TYRMC TORPD

    Determine which text corresponds to which encryption (and which is a fake, containing only random letters). Try to decrypt as many of the ciphertexts as possible. Hint: Start from a single letter frequency analysis using textAnalyze.html. To see some cryptanalysis examples, click here.