CPSC 124: Lab 1
Introduction to Java, CodeWarrior, and the Web

THIS FIRST LAB FOR COMPUTER SCIENCE 124, Introductory Programming, serves as an introduction to various aspects of computing as you'll experience it in this course. The lab will begin to teach you about the World Wide Web and how to publish your own information on the Web. It will demonstrate the basics of the CodeWarrior programming system, which you will use for all the programming you do in this course. And it will introduce you to the Java programming language, which is the main topic of the course.

For one part of this lab, you will need to know your user name and password on the VAX computer (the same computer that you use for e-mail). If you don't know your user name and password at this time, please work with a lab partner who does.

At the end of the lab, you'll find a set of exercises. These are the exercises that you should turn in to be graded. You and your lab partner have the option of turning in separate reports, or turning in one report with both your names. If you turn in one report, you'll both get the same grade. For this first lab, the report you hand in will be quite short (even though the lab is a lot of work). Note that you are not required to stay with the same lab partner for the whole term.

Outline of the Lab:

CodeWarrior

Programs are generally written in high-level languages, such as Java. The programs must then be translated into machine language before they can be run. In the case of Java, the program is actually translated into Java bytecode, which is a kind of machine-independent machine language. Then, an interpreter is run to execute the Java bytecode program. (For information on machine language, see Section 1.1 of the online course notes. For more on Java bytecode, see Section 1.3.)

Programming is often done using an Integrated Development Environment, or IDE. An IDE is a single program that lets you do all the steps in producing a program. That is, it allows you to type in a program, compile it, and run the resulting compiled program. In this course, you will be using the CodeWarrior IDE, from Metrowerks. CodeWarrior supports programming in the languages Pascal, C, C++, and Java. It's support for Java is new and not quite complete; you'll have to go outside the IDE in order to run your programs. (But this is not a significant problem.)

The computer you are using should include a copy of CodeWarior IDE 1.6. Ordinarily, you won't start up the IDE program directly. Instead, you'll start CodeWarrior by double-clicking on a CodeWarrior project file. The purpose of a project file is to organize all the information relevant to a particular programming project. (As you'll see later, most programs are actually spread out across a number of files and all those files are part of the project.) To avoid confusion, all the files for a particular project should be stored inside a single project folder. It is possible to create such a folder from scratch, but I have made a number of "starter folders" that can be used as starting points for projects of different types. My advice is that you should always begin a new programming project by copying one of these folders and renaming the copy.

The starter folders can be found on the file server, Math/CS Server. A file server is a computer on a network that holds files that can be shared by other computers on the network. You should find Math/CS Server listed as a command under the Apple Menu; selecting that command will open the file server. (If you can't find the command, ask for help or -- if you know how to do it -- use the Chooser to connect to Math/CS Server.) In the file server window, you'll see a folder labeled "CPSC 124". Double-click on that folder to open it. Inside, you'll find all the CodeWarrior starter folders as well as other material for the course.

So, let's begin... Open Math/CS Server and then open the CPSC 124 folder. Make a copy of "Java Basic Ap Starter" by dragging it onto your computer's desktop. Rename the copy, for example to "Lab 1 Assignment". (To rename something, click on the old name, wait a few seconds until the name is hilited, and then type the new name.) Open the copied folder by double-clicking on it. Inside, you'll see two files named javaAp.proj and Application.java. The file named javaAp.proj is the project file. Double-click on the project file to open the CodeWarrior IDE. You'll see a "project window" which looks like this:

This project window is the control center for the whole programming project. It lists all the files involved in the project. In this case, it lists Application.java, which contains the Java source code for the program. (It also lists classes.zip, which contains the predefined Java classes that you can use in your program; this file is required for your project, but it's provided by the CodeWarrior system, so you don't have to worry about it or do anything with it.) You'll learn more about this window in later labs.

The project already includes a very short program in the file named Application.java. To read or edit this file, you should open it by double-clicking on its name in the project window. (You could also just double-click on the file's icon in the Java Basic Ap Starter window, but remember this: when you want to compile your program you need to have the project file, javaAp.proj, open, not just the program file.)

Open the file Application.java now. I assume that you are familiar with the basics of text editing. (Click the mouse at the place you want to type, and start typing! Drag the mouse over some text to hilite that text; then delete the text by pressing the delete key or use "Cut" or "Copy" from the Edit menu to put the text into the Clipboard. Use the "Paste" command from the Edit menu to copy the contents of the Clipboard to the position of the blinking cursor. If you don't know how to do all these things, practice them!)

The program in Application.java simply prints out the message "Hello World!". Modify the program so that it prints out something else, like "Hello CS124!" -- or something more original. Better yet, make it print out a few lines of output. (I hope it is obvious how to do this; if not, ask.)

To compile your program, use the Make command from the Project menu. (You could also do this by clicking on one of the little icons in the toolbar at the top of the screen.) If there are no errors in the program, the computer will create a Java bytecode program called JavaApplication. You'll find it in the project folder. (If there are errors in the program, you'll get a list of them. Try to fix them and then compile the program again. If you continue to have problems, ask for help.)

Once you have the compiled program, you can run the program by double-clicking on the file named JavaApplication. Since this is a Java bytecode program, what actually happens when you double-click on JavaApplication is that a Java interpreter is started, and the interpreter then executes the program. The interpreter opens a window that looks something like this after the program runs:

The actual output of the program is the line that reads "Hello CS124!". The other stuff is messages from the interpreter.

A Simple Program

The basic type of Java output you saw in the previous example is not very satisfactory. So instead, you'll be using an input/output window called a console. This is not a standard part of Java; it is something I've written myself. (You'll learn more about this in Section 2.4 of the notes.)

The console is built into a starter folder called "Java Console Ap Starter". The starter project includes a program that simply writes "Hello World" on the console and then waits for the user to press return before the program ends. You might want to compile and run this program before proceeding. Let's review the steps for doing this:

  1. Open the CPSC 124 folder on Math/CS server, if it is not already open
  2. Drag a copy of Java Console Ap Starter onto your computer's desktop, and rename the copy
  3. Open the folder you have just created and double-click on the project file, javaConsoleAp.proj
  4. In the project window that appears, double-click on the name of the program file, Application.java, to open and view the file (This is not really necessary if you don't want to change the program.)
  5. Use the Make command from the Project file to compile the program
  6. To run the program, double-click on the file named JavaApplication.

As one of the exercises that you will turn in for grading, I would like you to modify this program so that instead of saying "Hello World", it will ask you your name and then say hello to you personally. To do this, you should open the file Application.java and replace the line

               console.putln("Hello World!");

with something like the following:

               String name;
               console.put("Hi!  What is your name? ");
               name = console.getln();
               console.putln("Nice to meet you, "  +  name);

The word "name" here is a variable. Variable are used to hold values input by the user or computed by the program. The line "name = console.getln();" lets the user type in a response and stores that response in the variable, name. You don't have to understand exactly how this works for now.

Make sure that your program can be correctly compiled and run. You should also put an appropriate comment at the top of the program giving your name or names and describing the program. Use the Print command in the File menu to make a printout of the program. Turn in the printout as part of your lab report.

The Web

The World Wide Web, also called the Web or the WWW, consists of millions of interlinked pages of information on computers all around the world. It's already a useful source of information and entertainment, and it is growing all the time. Part of the excitement over Java is that it is designed to work as an integral part of the Web. You are presumably using the Web right now, since I've written the labs and notes for CPSC 124 in the form of Web pages.

It's fun just to explore the Web. One way to do this is to find a starting page and to follow links from one page to another. One of the best starting places is Yahoo, which has a large number of pages grouped by subject. (Or, for starters, you might want to look at my page of Links from HWS.) An even better way to find information on a particular topic, though, is to use one of the Web search pages. These pages let you type in a word or words, and then return a list of links to pages on the Web that include the words you've listed. For example, you should try the Alta Vista search page. (After following the link, click in the box next to the "Submit" button, type the words you want to search for, and then click on the "Submit" button. A list of links for you to try will be appended to the page. There is lots of help available from the Alta Vista page, if you want to learn more about it.)

Every page on the Web is identified by a URL, or Uniform Resource Locator. In Netscape, the URL of the current page is listed in the box labeled "Location" at the top of the Netscape window. If you know the URL of a page you want to go to, you can just type that URL into the "Location" box and press return. (Or use Netscape's Open Location command from the File menu, and type the URL into the dialog box that pops up.)

As one of the exercises for this lab, you are asked to use Alta Vista to find an interesting Web page and to submit the URL of that page.

Applets and HTML

Pages of information on the Web are written in a mark-up language called HTML (HyperText Markup Language). HTML is something like a limited-purpose programming language that is interpreted by a Web browser to produce the pages you see. An HTML document contains text to be displayed, along with special mark-up commands that tell the computer how to display the text and what other items -- such as images and Java applets -- to add to the page. HTML isn't pretty to look at, but it is relatively easy to use.

To give you an idea of how HTML works, I'd like you to take an existing HTML document and modify it slightly. The document you end up with can be used as a starting point for your own home page on the Web. Start this part of the lab by dragging a copy of the folder named "Home Page Starter" from the Math/CS Server onto your computer's desk top. Open the folder and double-click on the file named index.html. You will be using a free text-editing program called BBEdit Lite (from Bare Bones Software). Here's what you'll see:

           <HTML>

           <HEAD>
           <TITLE>******'s Home Page</TITLE>
           </HEAD>

           <BODY>

           <H1 align=center>******'s Home Page</H1>

           <p>Welcome to my home page on the Web! ******</p>

           <HR>

           <p>Here are some nice links:</p>

           <UL>
           <LI><A HREF="http://www.altavista.digital.com">Alta Vista search page</A>
           <LI><A HREF="http://www.yahoo.com">Yahoo</A>
           <LI><A HREF="http://www.hws.edu">HWS Home Page</A>
           <LI>******
           </UL>

           <HR>
           <center>
           <applet code="ColoredWords.class" width=350 height=100>
                 <param name="words" value="******">
           </applet>
           </center>

           </BODY>

           </HTML>

The HTML commands are enclosed between < and >. Most commands come in pairs such as <p> and </p>. This pair of commands mark the beginning and end of a paragraph. Similarly, <H1> and </H1> mark the beginning and end of a heading that should be set in large type. Commands can have modifiers, such as "align=center" in the command <H1 align=center>. As you can probably guess, this modifier means that the heading is to be set in the center of the page. The commands <UL> and </UL> mark the beginning and end of an unordered list; the list items are marked with <LI>. The command <HR> draws a line across the page. (Such a line is called a " horizontal rule" by typesetters.)

You can see what the resulting page looks like in Netscape. I suggest that you do this by using the New Web Browser command in Netscape's File menu, then using the Open File command from the file menu. Use the file dialog that pops up on the screen to locate and open your copy of the index.html file. If you don't know how to do this, ask for help.

You don't have to understand everything in the document. Your assignment is to replace each of the ******'s in the file with something appropriate for your own home page. (You can make more changes if you want.) In the title and the heading, you can replace the ****** with your name. You can do the same in the applet at the end of the file. In the paragraph at the beginning of the page, you can replace the ****** with whatever you like.

The <applet> command is used to add a Java applet to the page. The <param> command provides information for the use of the applet. In this case, the param specifies a string to be displayed by the applet. If you change the "******" in the <param> command to "Hello World!", here is what the applet will look like:


(Your browser doesn't support Java;
if it did, this would be animated.)

You should change this ****** to your name or some other string that you want to display.

The most interesting change you have to make is to add a link to the list of links that currently includes Alta Vista, Yahoo, and the HWS Home Page. I'd like you to link your page to the CS124 Information Page. To do this:

  1. Replace the ****** between <UL> and </UL> with "CS124 Information Page". This is the text that will actually appear in Netscape.
  2. Hilite the text you just typed by dragging the mouse across it. This selects the text to which the next step will apply.
  3. From BBEdit's Extensions menu, select the HTML Link command. This command lets you make a link from the page you are editing to another page.
  4. In the dialog box that pops up, enter the URL of the CS124 Information page. The URL is: http://math.hws.edu/eck/cs124
  5. Press return, or click on the OK button in the dialog box.

BBEdit will then insert the HTML command that is required to create the link. You'll notice that BBEdit has a large number of HTML extensions to help with writing HTML documents.

You should save the changes you've made using the Save command from BBEdit's file menu. You can then go back to Netscape and use its Reload command to view the effect of the changes you've made.

So, you have your own little home page. Now, you need to put that page on the Web, where the rest of the world will be able to get at it. You'll do that later in the lab.

Your VAX Account and E-mail

The main computer at HWS is a Digital Equipment VAX. This is the computer where you have an account for sending and receiving e-mail. You can also use this account for publishing on the Web.

In one of the exercises for this lab, I ask you to send me an e-mail. One way to do this is to connect to your e-mail account using a program called "NCSA Telnet" on a Macintosh computer. You can use telnet to log into your account on the VAX. Here is the procedure for logging on:

  1. Start up the program, NCSA Telnet. (You should find a command in the Apple menu for doing this.)
  2. Select the Open Connection command from NCSA Telnet's Open menu.
  3. A dialog box pops up, which should contain the string "hws3.hws.edu" in a box labeled "Host/Session name". If it doesn't, type that string into the box. (Hws3.hws.edu is the name for the VAX on the Internet.)
  4. Click on the Connect button. After a short delay, a window should open on your screen. This window is your connection to the VAX.
  5. In the window, you will be prompted for a "Username". Type in the username for your account on the VAX.
  6. Next, you will be prompted for a "Password". Type in the password for your VAX account. (You won't see anything as you type.) If you get an error message, press Return to go back to the username prompt and try again.
  7. The computer prints some stuff and eventually prints a $ to prompt you for a command. Whenever you see this $, you can type in a command that the VAX understands. For now, just enter the command logout, which will disconnect you from the VAX. The window will disappear.

When using NCSA Telnet, it really doesn't matter if you forget to log out. You'll be disconnected automatically if you close the window or quit the program. However, if you use some other type of connection to the VAX, you should remember to log out or risk giving access to your account to the next person who uses the same terminal.

One thing you can do at the $ prompt is send and receive e-mail. To try this, open another connection to the VAX and log onto your account. Then follow these steps:

  1. At the $ prompt, enter the command mail and press return. You'll see a new prompt, MAIL>.
  2. If you have mail waiting to read, you'll see a notice of that fact. To read new mail, just keep pressing return until you've read it all.
  3. To send an e-mail message, enter the command send at the MAIL> prompt.
  4. You'll be prompted with "To:". Enter the e-mail address of the person you want to write to. To send a message to me, enter eck as the address.
  5. You'll be prompted with "Subject:". Enter a short subject line describing the note you are going to send.
  6. Then you can type in your message. You will be using a "full-screen editor." That means you can use the arrow keys to move around in the message, so you can go back and correct errors. (There are actually a lot more editing commands you can use if you want to learn about them.)
  7. When you finish typing, type Control-Z by holding down the Control key and pressing the Z key. You will get a * as a prompt at the bottom of the screen. At this point you have three options: Type exit and press return, if you want to send the message. If you've had second thoughts and would like to abort the message, type quit and press return. If you decide you want to go back and make changes to the message before sending it, type change and press return. If you say exit or quit, you'll get back to the MAIL> prompt.
  8. To get out of MAIL and back to the $ prompt, enter the command exit at the MAIL> prompt.

Those are the basics of using e-mail on the VAX. (As you might already know, there is an easier interface to your e-mail on the computers in Gulick Hall.) Here are a few more things you can do at the MAIL> prompt:

Publishing on the Web

You can use your account on the VAX to publish information on the Web. Before you can do this, there is one thing that you must take to set up your account. You should:

  1. Log into your account on the VAX using NCSA Telnet, as described above
  2. At the $ prompt, enter the command: @[http]setup
    (There are no spaces in this command.)

That's all there is to it. You now have a page on the Web. The URL for your page is of the form: http://www.hws.edu/~username, except that you should substitute the username for your own VAX account. You can try viewing this page using Netscape. Right now, there's nothing much on it!

You should move the page you created above to the VAX to replace the simple page that is there now. You need a way to move files from the Macintosh computer you are using onto the VAX. You can do this with a program called Fetch. Fetch is a program for moving files from one computer to another over the Internet. Here are the steps for moving your page onto the VAX.

  1. Start up the program, Fetch.
  2. You should see a dialog box labeled "New Connection". If you don't see it, then choose the New Connection command from Fetch's File menu.
  3. The New Connection box has four boxes. Fill them in with the following information:
    • Host: hws3.hws.edu
    • User ID: The username for your VAX account
    • Password: The password for your VAX account
    • Directory: www
  4. Click on the OK button. Your connection to the VAX will be established and a window will open showing the contents of your WWW directory on the VAX.
  5. Click on the Put File button.
  6. In the file dialog box that pops, locate and select the index.html file that you modified to make your home page. The file will be copied to the VAX.
  7. You also need to send the Java applet file that is used on your page. Click on the Put File button again, and select the file ColoredWords.class to copy that file to the VAX.

That's it. If you did everything right, you should now have a fancier home page on the Web. In the future, the easiest way to modify your page is to make the changes on a Macintosh (or Windows computer) and then use Fetch to transfer the changed file to the VAX. Later in the course, when you start writing applets of your own, I'll ask you to post some of your work on your home page.

Exercises to Turn in

Exercise 1. Use the Alta Vista search facility to find an interesting Web page on a topic that interests you. Report the complete URL for that page. I should be able to get to the page by typing the URL you give me into Netscape's Location box.

Exercise 2. Create your own home page on the Web, as described above. Move your page to your VAX account, as described above, so that it becomes accessible over the Web. Give me the URL for your page.

Exercise 3. Send me an e-mail. In your e-mail, describe your background in computer science, if any, and discuss briefly what you expect to get out of the course. Be sure to include your name or names. I will e-mail you a reply to your note, to confirm that I got it. The procedure for sending an e-mail is described above.

Exercise 4. Turn in a printout of the Java program that you were asked to write above (the one that asks you your name and then says hello to you).

[ Lab Index | Online Notes ]