CISC103, Fall 2007

lab06: more about JavaScript

Review of lab02 and lab04

In lab02 you learned some basics of JavaScript. We saw the concepts of

• expressions, e.g. 2+4, 5*x
  • if you type an expression at the JavaScript prompt (js>), the JavaScript interpreter evaluates the expression (it does the math and gives you result)
• order of operations, e.g. that you do multiplication before addition, so 2+3*4 is 14, not 20.
  • order of operations
• assignment statements, e.g. x=5; which makes x have the value 5
• variables—places in memory with a name, a value and a type—e.g. if we assign x=5, then:
  • x is the name of the variable
  • 5 is the value of the variable
  • number is the type of the variable
• operators and operands (e.g. in 2+x, + is an operator, and 2 and x are the operands)
• dot syntax, objects, methods and properties
  • variables with a dot after them are called objects
  • objects can have methods (names with () after them), and properties (no () afterwards). For example:
  • in myName.toUpperCase(); the method is toUpperCase(), and it is a method of the myName object.
  • in myName.length, the property is length, and it is a property of the myName object.

In lab04, we saw

• how JavaScript could be included in a web page as an event handler, allowing us to see Fireworks when a page loads.
• how JavaScript can be extended by loading new function definitions (e.g. the new function dayOfWeek())

If you need a refresher on any of these concepts, review lab02 and lab04.

Goals for lab06

In this lab, we'll:

• show how to incorporate JavaScript into a web page.
• show how to write a function definition

Before doing this lab, you should have completed the following:

• Finished lab02, lab04
• Read Chapter 1 in your JavaScript and AJAX, 6th Edition textbook.

Detailed Instructions

Step 1: Create directories and copy files

In this step, you'll create two new subdirectories:

You'll also copy some files:

For this lab, I'll still "walk you through" the commands do to this—see steps 1a and 1b below.

Note: This is the last time I'll explain these steps in detail!

From next week on, I'll just give you instructions similar to the ones given above, and you'll be expected to know the Unix commands to accomplish these tasks.

So this week, don't just type the commands, learn the commands.

You'll also be expected to be able to specify the Unix commands, exactly as you would type them at the Unix prompt to accomplish these tasks on the first midterm exam (and every subsequent exam in this course.)

In fact, exam questions related to this material may take different forms:

Step 1a: Creating the directories

In this step, you'll create two new subdirectories:

The quickest way to do this is with the following Unix commands:

> mkdir -p ~/public_html/cisc103/lab06
> mkdir -p ~/cisc103/lab06
>

As a reminder (review from previous labs):

• mkdir is the Unix command to create a directory (a folder)
• -p means "create all directories along the entire path if they don't exist—and if any or all do already exist, don't complain about it."
• ~/ means "the home directory of the person currently logged in"

Another equally valid way to accomplish this is the following:

Assuming that:

• you are starting in the home directory
• the directories ~/public_html/cisc103 and ~/cisc103 already exist:

You could type the commands in the box below.

• Note: If you've already created the directories, don't type this—it won't hurt anything, but you'll just get error messages saying the files already exist.
• But, trace through these commands and try to understand them. You might open this map of files and directories in a new window (right click on the link) and try to follow along with what is happening. The purpose of doing so is to be ready for the exam!

> cd public_html/cisc103
> mkdir lab06
> cd ../..
> pwd
/home/usra/d9/55560
> cd cisc103
> mkdir lab06
> 

Step 1b: Copying files

To be able to do this successfully, you need to remember four Unix concepts:

• cp is the copy command
• cp always copies from somewhere, to somewhere.
• * (the asterisk, or "star"), when it is part of a filename, means the wildcard—it stands for "all files"
• . (the period by itself) means "the current directory"

It is also helpful to remember the following:

• pwd is the print working directory command—it tells us what directory we are in right now
• cd is used to change from one directory to another

A typical way to copy files is like this:

In each case, we first change directory into the directory we want to copy the files into, and then we copy the files (using a wildcard) to . (the "dot" that stands for current directory). See the box below for the commands.

Type these commands, but don't just type them.

As you type these commands, follow along on the map of directories and files with what you are doing. Make sure you understand every command and what's its purpose is. If you aren't sure, find out! Read the Unix textbook, ask a classmate, ask your TA, or come to the professor's office hours, use a search engine—there are many ways before the next exam!

> cd
> pwd
/home/usra/d9/55560
> cd public_html/cisc103/lab06
> cp /www/htdocs/CIS/103/pconrad/07F/labs/lab06/* .
> ls
... this files you copied are listed here ...

Another way to do it

The most straightforward way to copy the files is with the following two Unix commands. Note that since both of these commands use absolute pathnames, it does not matter what the current directory is—these commands will work from anywhere. (Be sure you know the difference between an absolute pathname and a relative pathname before the exam!)

> cp /www/htdocs/CIS/103/pconrad/07F/labs/lab06/* ~/public_html/cisc103/lab06
> 

Step 2: Using JavaScript to put the day of the week on a web page

In lab04, we worked with a file containing a function definition, namely the file dayOfWeek.js.

That file makes a repeat appearance this week. In step 1, you copied that files into your ~/public_html/cisc103/lab06 directory.

Our next step is to create a web page that will use that file.

Step 2a: Go to your lab06 directory on the web

Use the proper Unix command to change your working directory to ~/public_html/cisc103/lab06

Step 2b: Edit the file called lab06.html

You should already have a file called lab06.html in your directory (from the files you copied in Step 1). Type the Unix command that brings up emacs so that you can make changes to this file.

Step 2c: Add some new lines into this file

The box below shows the contents of this file, with some lines in bold that you need to add. Add these lines at the appropriate spots.

Also, in bold, are some places where you should change the name Phill or Phill Conrad to your name.

<html>
  <!-- lab06.html  Phill Conrad for CISC103, 07F, 10/02/2007 -->
  <!-- Illustrate <script> element in head for function definitions -->
  <!-- and <script> element in body for function calls -->

<head>
<title>CISC103 lab06 exercise</title>
<script type="text/javascript" src="dayOfWeek.js"></script>
</head>
<body>
  <h1>Welcome to Phill's Web Page</h1>
  <h2>Today is <script type="text/javascript">document.write(dayOfWeek());</script></h2>
  <p>Have a great day!</p>
  </body>
</html>

Once you've made the changes, save the file.

Step 2d: Make the file readable on the web

As with several other steps in this lab, this is the last time I'll describe this step in detail. From this point forward, you should be able to manage the details of this step yourself—I'll just say: make the file readable on the web, or bring up this file in a web browser, and you'll be expected to know what to do.

To make this file readable, we can do this:

> chmod -R 755 ~/public_html/cisc103/lab06
> 

Explanation:

• the chmod part means change the permission modes
• the -R part stands for recursive, which in this case, means: apply the change to this directory, and all files and directories inside it, and all files and directories inside those directories, and so on until you "hit the bottom"
• 755 is the octal number that stands for rwxr-xr-x (in binary: 111 101 101), which indicates the permissions needed for this file

For more information on file permissions, see

• pp. 106-107 in your Unix, Visual Quickstart Guide
• this article by Dru Lavigne or
• the Wikipedia article on file system permissions

Another way to do it

For the exam, also be sure you know this technique (and it is handy in practice too).

If you want to make the current directory, and all the files in and under it readable, you can type this:

> chmod -R 755 .
>  

Step 2e: Look at the result

You should know by now where to look on the web for a file called ~/public_html/cisc103/lab06/lab06.html. I should not have to tell you.

But, one last time, I'll tell you where to look. From next week, you are on your own here also! (And you need to know for the exam)

Look at http://copland.udel.edu/~youruserid/cisc103/lab06/lab06.html

You should see that the greeting produced by the line:

<h2>Today is <script type="text/javascript">document.write(dayOfWeek());</script></h2> 

shows up your your web page like this:

Today is

Step 2f: The most important part: Understanding what is going on

Note that the word for the actual day of the week does not appear in your HTML file. Instead, it is generated by the JavaScript!

• In place of the word Tuesday or Thursday or whatever, we have a <script> element.
• Inside the <script> element, there is function call, namely dayOfWeek().
• The dayOfWeek() function call is passed as the actual parameter to another function call
  • In this case, it is a function call that is also a method—namely, document.write()
  • Here, write() is a method of the document object

The <script> element nested inside the <h2> element—which in turn is nested inside the <body> element, makes a function call to dayOfWeek(). This actually calculates the day of the week, and puts it on the web page.

However, you cannot have a function call without a function definition.

So where is the function definition?

The function definition is inside the file dayOfWeek.js. This file contains all the details that tell JavaScript how to access today's day of the week.

Inside the <head> element, we have a <script> element that pulls this function definition into our web page. We write this, and put it inside the <head> element:

<script type="text/javascript" src="dayOfWeek.js"></script>

But, we could also have written this, and put it inside the <head> element:

<script type="text/javascript">

// function dayOfWeek
// consumes: nothing
// produces: a string representing the current day of the week (e.g. "Tuesday")

function dayOfWeek()
{
  // set up an array with all the days of the week, spelled out
  var daysOfWeek= ["Sunday","Monday","Tuesday","Wednesday",
	"Thursday","Friday","Saturday"];

  // create an object representing today's date
  var today = new Date();

  // use the "getDay()" method to get the index of today's date
  var index = today.getDay(); // returns 0 for Sunday, 1 for Monday, etc.

  // return that element of the array
  return daysOfWeek[index];	
}
</script>

So, what is the advantage of putting the JavaScript into a separate file?

There are several—here are just a few.

• We can test the JavaScript function separately from any web page, by going to the js> prompt and typing first load("dayOfWeek.js"); then dayOfWeek();—in fact that is exactly what we did near the end of lab04!
• We can use the JavaScript on multiple web pages
• It helps us keep content (HTML), formatting (CSS), and programming (JavaScript) separated. In a real world web development, this increase the efficiency of a team, because three different people can all be working at the same time on three different aspects of a web page.

So wait, now I can put the "day of the week" into any web page?

Yes! Because the file dayOfWeek.js contains the function definition for dayOfWeek(), you can call that function from any web page that has access to that function defintions.

To make the "current day of the week" show up on a web page, do just what you did in Step 2 above:

• Copy the file dayOfWeek.js into the same directory on the server as the .html file for the web page
• Put a <script> element into the head that pulls in the function definition, like this: <script type="text/javascript" src="dayOfWeek.js"></script>
• Put a <script> element anywhere inside the body—inside an <h2> or an <h1>, or a <p>, or any element you like—exactly where you want the day to show up, and inside that <script> element, put the function call inside a document.write() method call, like this:

<h2>Today is <script type="text/javascript">document.write(dayOfWeek());</script></h2> 

Now that we see how useful a function definition can be, we are going to write another one. That's what we'll do in Step 3 of this week's lab:

Step 3: Working with JavaScript functions

As you can see, JavaScript functions can be very useful. Once you have a function definition you can do interesting things with it—first at the js> prompt, and later inside a web page.

In the rest of this lab, we are going to work with some function definitions just at the js> prompt. We'll incorporate those definitions into a web pages in later labs.

Step 3a: cd into your ~/cisc103/lab06 directory

Now change your working directory to your ~/cisc103/lab06 directory—not the one under public_html, but the other one.

I'm not giving you the command—on purpose! You need to come up with it on your own. By now, that should not be a problem.

After you type your cd command, use a pwd command to be sure you are in the right place.

Step 3b: Understanding the problem

We are going to write a JavaScript function to solve the following problem:

Determine how much pizza (in square inches) you get if you order two regular pizzas (12 inch round) vs. 1 x-large pizza (16 inch round).

Understand the problem statement before continuing.

What we need to do is to calculate the "area" of two regular pizzas (both circles) and one large pizza (also a circle). So, we are going to use the formula for area of a circle, which is area = πr² , where r is the radius of the circle.

However, area of a circle is based on the radius, and pizza is normally described by the diameter—a 12-inch pizza has a diameter of 12 inches, not a radius of 12 inches. So, we need to divide the diameter in half before calculating the area.

So, we will write the definition of a JavaScript function called areaOfPizza() that will

• take a diameter as input
• cut that diameter in half to get the radius
• calculate the area
• return that area

That takes us to our next step.

Step 3c: Creating a JavaScript function definition for areaOfPizza()

To create our function definition, we will edit a file called areaOfPizza.js

Use emacs to open up areaOfPizza.js for editing.

Inside the file, type the JavaScript code shown below.

• You could copy and paste—but I don't recommend it!
• You'll learn more if you retype it—your "muscle memory" will help you learn JavaScript.

// areaOfPizza.js  compute area of pizza, given diameter
// P.Conrad for CISC103  10/02/2007
 
// consumes: 
//     diameter: number, diameter of the pizza in inches
// produces:
//     area: number, area of the pizza in square inches
//     
// examples
//     js> areaOfPizza(12);
//     113.10
//     js> areaOfPizza(16);
//     201.06

function areaOfPizza(diameter) { 
   radius = diameter / 2;
   area = Math.PI * radius * radius;
   return area;
} // end function areaOfPizza

Then, save the file, and continue with the next step

Step 3d: Testing the file

Inside the code, there are several lines that start with //. These lines are "comments".

A few of the comments contain examples of using the function—what you type at the js> prompt, and what is supposed to come back. We can use these examples to test the function.

Bring up the JavaScript prompt by typing js at the Unix prompt (if you completed lab04, that should work—if not, go back to lab04 and get the long version of the command to access the JavaScript prompt.)

At the JavaScript prompt, type the command to load areaOfPizza.js into the JavaScript interpreter:

js> load ("areaOfPizza.js");
js> 

Then, type the following (taken from the comments inside the file). See if the output you get agrees with that shown below:

js> areaOfPizza(12)
113.09733552923255
js> areaOfPizza(16) 
201.06192982974676
js> 

You will note that the answers given are approximately equal to the answers in the examples from the comments. That is because the answers in the comments were calculated by hand, while the answers from JavaScript are much more precise. However, these answers are close enough that we consider that the script appears to be working!

Type the command that takes you out of JavaScript. If you don't remember it, look back at lab04.

Step 4: Creating a script

Following the example from step 11 of lab04, create a script of your work.

Call your script lab06.txt. You should be in the directory ~/cisc103/lab06 before you type the command script lab06.txt

In your script:

1. Use the pwd command to show you are in ~/cisc103/lab06
2. Use the ls -l command to list your files
3. Type cat areaOfPizza.js to list the contents of that file
4. Type js to go into JavaScript
5. Type the command that loads areaOfPizza.js into JavaScript
6. Type two function calls that show that the areaOfPizza() correctly calculates the value for a 12 inch and a 16 inch pizza
7. Type the JavaScript command that takes you out of JavaScript and back to the Unix prompt
8. At the Unix prompt, type exit to end the script

Step 5: Submit your work on WebCT

Upload both the file areaOfPizza.js and the file lab06.txt to WebCT, and submit.

Remember that you will have to transfer these files to your hard drive before you can submit them (refer back to Step 12 of lab04 if you are not clear on how to do this.)

And you are finished!

Grading: 100 pts

• - 5 points for not submitting areaOfPizza.js
• - 5 points for not naming lab06.txt with the .txt extension

Due Date: Thu, Oct 11, 11:55pm

Copyright 2007, Phillip T. Conrad, CIS Dept., University of Delaware. Permission to copy for non-commercial, non-profit, educational purposes granted, provided appropriate credit is given; all other rights reserved.