String Processing
Objectives

After successfully completing this lab, students will be able to:
  1. Understand that text is represented as a sequence of characters.
  2. Understand and write JavaScript code that uses the following string processing techniques:
    1. concatenation
    2. obtain the length
    3. equality checking
    4. name binding
    5. indexing
Introduction

While much of the information stored on computers involves numbers, the majority of data is textual rather than numeric. For example, your name, social security number, address, and Facebook status are all textual in nature. In this lab exercise we will explore how computers can be used to create, process and reason about textual information.

Step 1. Understand Strings as Indexed Sequences of Characters

Consider the string shown in the table below. The top row shows the index of each letter in the string while the second row shows the sequence of letters. It is interesting to note that this string is a pangram since it contains every letter of the alphabet at least once. This string also contains some spaces and a period.

In the table below, you can enter a number between 0 and 39 into each text field of the top row and the corresponding letter of the pangram above will be displayed in the bottom row. You must spell out your full first name, followed by a space, followed by your full last name. As an example, the name "agnes" can be spelled by using the sequence of indices [1, 37, 26, 20, 38].
Step 2. Understand Strings as Indexed Sequences of Characters

Consider the pangram shown below. Once again, every letter of the alphabet occurs at least once in this string.

You must enter the letters of the pangram that correspond to the indices [17,29,1,27,36,19,0,19,31,40,5,2,7,34,19,20,31,5,37,4,5,6]. Entering incorrect data will result in cells with a red background while entering correct data will result in cells having a green background.
Step 3. Make String variables in JavaScript

In JavaScript, a name binding us denoted by using an equal sign. For example, a name binding will have the form VARIABLE_NAME = VALUE;. (DON'T FORGET THE SEMI-COLON AT THE END!)

You must create four variables named firstName, middleName, lastName and initials. The values of these four variables should be your own first name, middle name, last name, and the initials of your three names. Since these values are all strings, the values will all be enclosed in double-quotes. For example, if your first name is Jemimah, the first line you should type into the box below would be firstName = "Jemimah";. There should only be one statement per line.

Once you have written JavaScript code to create the four variables described above, click the Run button below. This will cause your JavaScript code to be executed and print a table showing each variable you created and the value of that variable at the end of your code. If your code correctly creates four variables, then your code will be approved, otherwise your code will be disapproved. Make sure to keep editing your JavaScript code and hitting the Run button until your code is approved! DON'T FORGET THE SEMI-COLONS!

Step 4. Make Strings using Concatenation

Consider the JavaScript code below that creates two string variables x and y and concatenates them to form a new string named z. In this example z is the string "ElvisPresley" while x is still "Elvis" and y is still "Presley". A computational thinker would say that z is the concatenation of string variables x and y.

x = "Elvis";
y = "Presley";
z = x + y;

You can even write statements such as:

z = "Elvis" + " " + "Presley";

This statement creates the string Elvis Presley and names that string z. In this case, we would say that z is the concatenation of the three string literals "Elvis", " ", and "Presley".

For this part of the lab, you should first copy your code from the previous step into the box below. This will create four string variables named firstName, middleName, lastName and initials. You should now create three more string variables by concatenating string variables and string literals.
  1. Create a string variable named cat1 that is your last name followed by a comma followed by your first name. There should be no spaces in this string.
  2. Create a string variable named cat2 that is your first name followed by a space followed by your middle name followed by a space followed by your last name.
  3. Create a string variable named cat3 that is your initials surrounded by parenthesis

For example, if your name is Elvis Aaron Presley, variable cat1 would end up being "Presley, Elvis". When writing programs it is never good to enter the same data two times. Therefore it would be incorrect to write something like cat1="Presley, Elvis"; since you have already entered your first name and last name elsewhere. Just as before, make sure to keep editing your JavaScript code and hitting the Run button until your code is approved by the Better Programming Bureau!

Step 5. String Indexing Techniques

JavaScript allows programmers to access the elements in a string by their index. Given a string variable str_variable we can access the first letter of the string by typing str_variable[0]. This expression produces a string containing one letter; the first letter of the str_variable. JavaScript also allows programmers to obtain the length of a string by typing str_variable.length. Of course, if the index used in the bracket notation is not valid with respect to the string, the resulting value will be undefined. For example, "abc"[15] produces an undefined result since the only valid indices are 0, 1 and 2. To illustrate these ideas, consider the JavaScript code below. Once this code has executed, the variable len has an integer value of 33; the variable a has a string value of "H" and the variable b has a string value of "r".

quote = "Honor your father and your mother";
len = quote.length;
a = quote[0];
b = quote[len-1];
Dates are usually written by following a conventional notation that includes the year, the month of the year, and the day of the month. We usually write a date by using notation such as 12/25/2003 which means the 25th day of the 12th month of the year 2003. For this part of the lab, you must write JavaScript code that process a date in this format. The first line you should enter into the text field below is date = enterDate();. This statement, when executed, will prompt the user to enter a date which will then be named date within your program. You must then create string variables named year, month, and day. These variables must be constructed using only string indexing and concatenation. Once you have been approved by the Better Programming Bureau, you should experiment with your code by entering a variety of different dates.
Step 6. Substrings

While indexing allows you to copy a single letter of a string, programmers often want to copy longer parts of a string. The ability to copy a part of a string is expressed as a function named substring. This function accepts two inputs that indicate the start and the end indices that should be copied. Oddly enough, the letter at the end index is not included in the copy although the letter at the start index is included in the copy. The substring function is associated with any string and it is called by typing an expression of the form STRING.substring(FROM,TO). FROM and TO are indices into STRING. Consider, for example, the string literal "A man, a plan, a canal, Panama." This string is a well known palindrome, which is a word that reads the same way backward as it does forward. This string and it's indices are shown below.

Parts of this string can be copied by using the substring function as shown in the JavaScript program below. This code makes copies of the string literal using different combinations of FROM and TO indices. After this code is executed, the string variable sub1 is "man", the string variable sub2 is "an", the string variable sub3 is "Pan" and the string variable sub4 is undefined since the FROM and TO indices is invalid with respect to the string on which they are applied.

sub1 = "A man, a plan, a canal, Panama.".substring(2,5);
sub2 = "A man, a plan, a canal, Panama.".substring(25,27);
sub3 = "A man, a plan, a canal, Panama.".substring(24,27);
sub4 = "A man, a plan, a canal, Panama.".substring(32,45);

Of course we know that it is not a good idea to enter the same data more than once. Hence, we could accomplish the same functionality as above by first defining a string variable named txt1 that represents the palindrome and then make substrings from that single entry as shown in the code below.

txt1 = "A man, a plan, a canal, Panama.";
sub1 = txt1.substring(2,5);
sub2 = txt1.substring(25,27);
sub3 = txt1.substring(24,27);
sub4 = txt1.substring(32,45);
Charles Hodge was one of the most famous presidents of Princeton University who was quoted as having said "That the apostolic office is temporary, is a plain historical fact." For this part of the lab, you must create three string variables by concatenating substrings of this quote.
  1. Create a string variable named quote that is the Hodge quote given above.
  2. Create a string variable named word1 that has the string value 'plastic' which is formed only by using substring and concatenation.
  3. Create a string variable named word2 that has the string value 'police' which is formed only by using substring and concatenation.
Step 7. Putting it all together

A function (or module) is a named piece of code that takes input and produces some output that is based on the input. A JavaScript function must be expressed as function FUNCTIONNAME(P1,P2,...) { STMTS } The word function just tells the computer that we are defining a function. The FUNCTIONNAME is the name of the function and this name should describe what the function does. For example, if you are writing a function to take the square root of some number, the function should probably be named squareRoot or something similar. Inside the parenthesis following the name are the names of the inputs. Of course the names of the inputs should also describe their purpose if possible. Inside of the curly braces is a set of statements that represent the code that is executed when the function is used. Since a function must produce output, a programmer indicates the output by writing a return statement. Whenever a return statement is executed, the meaning is to stop executing the function and produce the associated value as the functions output. As an example, consider the following valid function.

function rectangleArea(width,height) {
  area = width * height;
  return area;
}
You must write a function named pigLatinize(word) that takes a string value as input, translates this word into pig-latin, and then outputs that translation. For this exercise, you must pig-latinize by applying the following rule.
  1. Remove the first letter of the word. Append a hyphen to the end of this word, followed by the removed letter, followed by the string "ay". For example, if the word is robot, the pig-latin translation is obot-ray and if the word is car, the pig-latin translation is ar-cay.
Once you have written your function, hitting the run button will prompt you to enter a sentence. Your pig-latinize function will be applied to every word in the sentence and the translation will be displayed. If your function doesn't work on some word, it will be displayed as a black box in the translated output.