CPSC 120: Principles of Computer Science
Spring 2001

Lab 1: Applets, Data Representation, and HTML


IN THIS FIRST LAB, you will be introduced to the first of several "Java applets" that you will be using throughout the term. Each applet is meant to help you learn about some aspect of computing or computer science. The applet for this lab is pretty simple, but it illustrates some important ideas about the representation of data in a computer. Links to the applets, as well as to a complete set of labs based on them, can be found at http://math.hws.edu/TMCM/java. (Some of the labs for this course will be taken directly from this page. Others, like this one, will be new or revised for this course.)

In addition to working with applets, you will spend parts of several labs learning about how Web pages are written and programmed. This lab introduces some of the most basic ideas of Web page authoring. When you finish the lab exercises, you will have a simple home page on the World-Wide Web.

Data Representation

Java is a fairly new programming language that is becoming increasingly popular. Among other things, Java can be used to write "Java applets", which are small programs that can appear on Web pages. Applets are one of the ways in which a Web page can become an interactive experience for the user, rather than just a static document for reading. (Some applets, though, are really just decorative, rather than interactive.)

In this lab, you will use a fairly simple applet called "DataReps". You will use this applet to learn how the same binary number can be used to represent different types of data. To launch the applet, click on this button. When you do, the applet will open as a separate window:

(Sorry, your browser doesn't do Java!)

You'll be using this "DataReps" applet in some of the exercises at the end of the lab. First, you should read about it and experiment with it to see what it does. Then you might want to look at Exercises 1 and 2, below.

The DataReps applet lets you type in a data value. You can select the type of data you want to enter by clicking on one of the five radio buttons. Just type your data into the input box at the top of the applet, and press return. You can also click on the 8-by-4 grid of "big pixels" at the center of the applet. The applet takes the data you enter, and it converts that data into a 32-bit binary number. (It has to do this in order to store it!) It then takes that same binary number and interprets it in six different ways. The six interpretations are: a binary number, an integer, a hexadecimal number, a real number, a string of four characters, and an eight-by-four grid of pixels. You should remember that you see the same string of thirty-two bits interpreted in different ways. You should also remember that the same bit-patterns could also be interpreted in an endless variety of additional ways: as a bar of music, or the chemical ingredients in a bar of soap, or your tab at your favorite bar, or....)

Here is a short explanation of each of the six data displays. You should try entering various types of values in the applet to see how they are represented as binary numbers.

Binary
This is the most direct display of the 32 bit binary number, showing a zero or one to represent each individual bit. The displayed binary number shows the full 32 bits, including any leading zeros. The computer stores the zeros, even though you don't ordinarily include leading zeros when you write a number.
Base-ten Integer
A binary number can be interpreted as a normal positive integer (0, 1, 2, 3, 4,...) written in the "base ten". Base ten is the usual way of writing numbers, using the digits 0 through 9. See Section 1.1 of The Most Complex Machine. With 32 bits, you can represent 232 different numbers. Usually, you want to use both positive and negative numbers. The scheme for representing negative numbers is a bit strange. It is explained in Subsection 2.2.3 of the text. Using 32 bits, the integers from -2147483648 to 2147483647 can be represented.
Hexadecimal
It is difficult (for humans) to read long strings of zeros and ones. Hexadecimal numbers are a kind of shorthand for writing such strings. A hexadecimal number is written using the sixteen "hexadecimal digits" 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F. Each hexadecimal digit stands for four bits. So 0 represents 0000, 1 represents 0001, 2 represents 0010, ..., E represents 1110, and F represents 1111. We could also say that the hexadecimal digit A stands for the base-ten number 10 (ten), B stands for 11 (eleven), C stands for 12, D for 13, E for 14, and F for 15. A hexadecimal number is really just a number written in the base sixteen, just as ordinary integers are in the base ten and binary numbers are in the base two. You should be able to translate between hexadecimal and binary by hand. (But of course, you could use the applet instead.)
Real Number
Real numbers are numbers that can contain decimal points, like 3.14159 or -234.5, or 12.0. They can also be written using "scientific notation." For example, 2.15e12 is a way of writing 2.15 times 1012. The representation used in computers for real numbers is very complicated. And it allows some strange possibilities, such as INF and -INF, which stand for infinity and minus infinity. There are also NAN's. NAN stands for "not a number." NAN's are used to represent the results of illegal operations such as taking a square root of a negative number. Note that the integer 17 and the real number 17 have completely different representations in the computer, even though they are the same number mathematically. All-in-all, it's probably best not to worry about the internal representation of real numbers. I include this data type here for completeness, since real numbers are so important.
ASCII Text
Characters can be encoded using ASCII code, as explained in Section 1.1 of the text. Each possible character is assigned a code that is one byte (that is, eight bits) long. With 32 bits, you can represents 4 characters in ASCII code. Not every possible byte represents an ordinary, printable character. The applet shows other bytes in the form <#n>, where n is the base-ten number corresponding to the byte. For example, the byte 00000111, which is equivalent to 7 in base ten, is shown as <#7>.
Pixels
At the center of the applet, you will see an 8-by-4 grid of little squares. Each of these thirty-two squares corresponds to one bit in the binary number. You should think of these squares as being very big pixels. Each pixel can be either black or white. One bit specifies the color of one pixel -- 0 for white or 1 for black. This is how two-color graphical images can be represented by binary numbers. Again, see Section 1.1 of the text. In the applet, you can change the color of a pixel by clicking on it.

Your Account on math.hws.edu

While you are taking CPSC 120, you have an account on the computer network used by the Department of Mathematics and Computer Science. You will use this account to publish your web page on the World-Wide Web. Your page will be at the Web address

http://math.hws.edu/user/username/

where username represents your user name on the system.

You can access your account using a program called X-Win32 on any of the Windows computers in the Colleges' public computer labs. When you start up this program, you will see a list of computers that are available. You want one of the computers named cslab1, cslab2, and so on. Double-click on any of these computers. You will get a new log-in screen where you can sign on to the Math/CS Department's system. Sign in using the password you were assigned.

Click on the icon at the bottom of the screen that looks like a computer screen with a sea-shell in front of it. This will open a window where you can type in commands. (In this window, you are using what is called a "command shell," which explains the picture of the sea-shell.) The first thing you might want to do is change your password. Do this by entering the command

passwd

You will be asked to enter your old password then your new password.

You will start your web page by copying some files into your account. They need to go in a directory called "www". Anything you put in this directory is accessible on the World Wide Web. To get the starter files, enter the command:

cp  /home/cs120/lab1/*  www

Don't leave out the "*"! You should now be able to go back to netscape and see a simple, generic web page at your Web address, as given above.

To change your web page, you will have to edit it. To do this, change into your www directory with the command

cd  www

and then edit the file index.html, which is your main web page, with the command:

nedit  index.html

This opens a window where you can edit your web page. The file is written in HTML (HyperText Markup Language), a language for describing Web pages. Basic information about HTML can be found in Section 6.2 of my on-line Java textbook, which you should read (except for the Java programming code at the very end). Here, though, is a summary of the most basic information:

A HTML file for a Web page contains all the text on that appears on the page. It also contains commands called "tags" that specify the layout and style of the text. Tags are also used to add things like images and applets to the page and to specify links to other pages. You can recognize tags because they are enclosed between "<" and ">". For example, <HR> is a tag that tells the Web browser to draw a horizontal line across the page. Some tags occur in pairs. For example, <P> marks the beginning of a paragraph and the matching tag </P> marks the end of the paragraph. Some tags can have modifiers to give more information. For example, the tag

<IMG SRC="coxe.jpg" WIDTH=288 HEIGHT=192>

specifies that an image is to be added to the page. It has modifiers named SRC, WIDTH, and HEIGHT. The SRC modifier gives the name of a file that contains the image. The WIDTH and HEIGHT modifiers specify the size of the rectangle on the page that will be occupied by the image.

The APPLET tag for adding an applet to a page is similar. It has a CODE modifier to specify the file that contains the applet program, and it has WIDTH and HEIGHT modifiers to specify the size of the rectangular area that the applet will occupy on the page. But it also has a closing tag. Between the applet tag and the matching closing tag, you can have PARAM tags. These tags provide information that can be used by the applet to customize its behavior. You can see an example of this on the starter web page that is provided for you.

The exercises at the end of the lab ask you to make a few changes to your web page in order to personalize it. You might already have enough information to get started on the exercises, but you should definitely read the material mentioned above and use the information in it to complete the lab exercises. You will do more work on your web page in future labs.

(I should note that there is a lot more that you can use in your Math/CS account if you want to try it. For example, check the menu that you get by clicking the "K" icon at the bottom left of the screen.)

Exercises

Exercise 1: Use the "DataReps" applet to find the following. In each case, indicate briefly what you did with the applet to answer the question.

Exercise 2: Enter the following base-10 integers into the "DataReps" applet: 1, 2, 4, 8, 16, 32, 64, 128, 256. Describe the corresponding pixel representation of these numbers. (The pixel representation is displayed in the center of the applet). What pattern do you see? Why does this pattern occur? What can you say about the binary representation of these numbers?

Exercise 3: This exercise is meant to be a longer essay question. You should try to show your understanding of the way data is represented in a computer, and an appreciation for the fact that meaning depends on context and convention. Answer in a few paragraphs, rather than one or two sentences!

It would be legal to input 1000 into the Data Representation Applet as either a binary number, a base-ten integer, a hexadecimal number, a real number, or as ASCII text. In each case, the input is represented differently -- as a different binary number. How is it possible that five different binary numbers can all represent "1000"? What is going on here? How can the computer keep all the different meanings straight?

Exercise 4: One of the links on the generic Web page that you copied into your account is a link to the Google search engine. One of the nice things about this search engine is that you can search for a phrase by enclosing it in quotes. (If you don't use the quotes, it will search for Web pages that contain the words you specify, but not necessarily together or in the same order.) Here are pieces of three famous quotes that have often been adapted (or mis-adapted). Search for each of these phrases using the Google search engine:

Report on what you find. Can you figure out what the original quote was and where it came from? What are some of the more interesting or unusual adaptations of the quote that you found?

Exercise 5: Personalize your web page by changing the title, using different colors, adding some information about yourself, and adding some links to things you are interested in. You have a file called "tmcm.gif" in your www directory. This is a 100-by-152 pixel image of the cover of our textbook. Add this image to your web page, along with some information about the course.

Exercise 6: Your www directory contains another applet besides Moire1.class. The applet in Maze.class draws a random maze and then solves it. Add it to your web page (or replace the Moire1 applet with it).

The maze applet can be configured with a number of different "params". Applet params make it possible to customize the appearance or behavior of an applet. You can read about the different params that can be used at the top of the Java source code for the Maze applet, which you can find at http://math.hws.edu/xJava/other/Maze.java. Customize the Maze applet on your web page using two or more applet params.

--David Eck (eck@hws.edu), January 2001