Javascript Laboratory 1

Internet Programming I

Assignment 2

Creating a document with Javascript

Due September 26, 2006

HTML (hypertext markup language) web pages are used to display information in web browsers such as Internet Explorer and Firefox. Scripting languages such as Javascript and VBScript are used to provide functionality for these pages. They define computer programs that are included directly on the page along with the rest of the html code. When activated, they perform some function designed by the programmer.

Since the script programs are part of the web page itself, extra time for downloading is not required. This time savings makes them more suitable for server pages that will be downloaded and viewed by many users. Consequently they are more often incorporated into server pages than Java applets, which are downloaded separately from the page.

These notes will help you create some Javascript programs. These programs can be used to change the color of the page or its font, write new information on the page, make calculations, work with radio buttons and list boxes, and even open new windows.

1. Open JCreator, and select New from the file menu. When you get to the blank screen, type in the following web page that contains a simple Javascript program. When done, save it and view it in a browser.

<html>

<head>

<title> Javascript Example 1</title>

<!--

document.write ("<h3>My name is ...</h3>")

//-->

</script>

</head>

<body>

</body>

</html>

2. The line, <script language="Javascript">, tells the browser that what follows is in Javascript. The next line consisting of <!-- starts an html comment. This comment is ended by //-- >. These two lines are used to tell any browser that does not support Javascript to ignore what is written in between. Most browsers can interpret script, but this is a safeguard in case the page happens to be accessed by one that can not.

3. The line that will be interpreted as script comes between the two comments. It starts with the term, document. This refers to the html page that is being created. Next the script says to write something on the document. The text to be written is enclosed by double quotation marks. Anything between double quotes is a string. Strings consist of a sequence of characters such as letters, digits or punctuation marks. (If you want to indicate a quotation mark inside of a string, use a single quote.)

4. The string here is exactly the same as the html that you would write on a web page, including all the html tags. Everything is enclosed in the same quotes. If you add a second line such as

document.write ("<h3>My e-mail address is ...</h3>")

You will have two lines on your web page. You can have as many as desired.

5. Now open a browser and click on File and then Open. After that browse through your disk until you locate the file and open it. It should look like the page below, with your name and e-mail address filled in.

6. After each change you make to your html page, make sure you save it.

7. Next make a mistake on purpose to see what happens. Leave off the ending quotation mark of the string so that the line reads

document.write ("<h3>My name is ...</h3>)

You might notice how hard it is to spot errors like this. But the browser does, and it shows only the line with ‘done’ from the body of the page. Finding these errors can be frustrating, because you are given very little help. So be particularly careful when you type in your scripts.

8. Now create a new document that writes a message on the page. It can be several lines long. Use two or more document.write statements for your message. Since you are writing ordinary html, the browser will format it without breaks unless you include them in the strings. The following example script does just that.

<!—

document.write ("Javascript can be used to write on web pages.")

document.write ("<br>This is used to add messages to pages, ")

document.write ("as well as other text.")

//-->

</script>

The resulting web page looks like the one below.

9. Next write Javascript that creates a web page similar to one you did before. It might show a picture or change the color of the page. You can also change the color of the page using Javascript statements. The following will make the background color cyan.

document.bgColor = "cyan"

There are two things to note. First, bg here stands for background. Second, Javascript is case sensitive. That means that upper case is not considered to be the same as lower case. This is different from html, which doesn’t make any distinction between the cases. But in Javascript, if you leave the c in lower case, the line will be ignored and simply not interpreted at all. The background will remain white.

10. There are a number of standard colors built into Javascript. Some of these are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. You can also specify a color by its RGB (red, green, blue) values. These are values between 0 and 255 written in hexadecimal (base 16). For example, "white" can also be specified as "#FFFFFF". You might have already seen similar strings in other html documents.

11. You can also use these colors to change the foreground color. This is done with

document.fgColor = "red"

The foreground color is the color of the font. This can also be changed with the usual html font tags.

12. This previous JavaScript does not seem to be very useful, and right now, it isn’t. But the next example may show something a little more interesting. It uses a Date object that is built into Javascript. We can get the current date and time from this object. It accesses the clock on your computer and keeps track of a lot of information from it. Type in the following Javascript program and then load it into a browser. You should be able to see the current month, day and year.

<html>

<head> <title>Date Example</title>

<script language="Javascript">



</script>

</head>

<body> </body>

</html>

13. Before discussing what is going on in the program, notice the result. It should have the correct date (day) and year, but the month is off by one. While the days go from 1 to 31, the months go from 0 to 11. Thus January is 0, February 1, etc. Therefore the line,

month = month + 1

should be added to make it conform to standard usage.

14. Javascript has objects, and Date is an object. Therefore we have to get a new instance of it. This is done in the line

date = new Date ().

Objects in programming languages consist of data such as day, month and year along with functions that work with the data. For date, some of these functions are getDay (), getMonth() and getYear (). You can recognize a function because it will always be followed by parentheses. Later on we will add parameters to the parentheses.

15. Along with the month, day and year, a Date object also keeps track of the current time in hours, minutes and seconds. The following lines can be added to your program for that.

var hour = date.getHours ()

var minutes = date.getMinutes ()

var seconds = date.getSeconds ()

document.write ("<br>Time ", hour, ":", minutes, ":", seconds)

Since these values keep changing, we have to get regular updates by refreshing the browser. This is one of the reasons why, in this particular case, we have to get a new instance of the Date object each time it is used. Otherwise we would not have the current values.

16. Also note that we access the functions associated with an object using a period, e.g.

month = date.getMonth () and document.write ("Month ", month). The first uses the getMonth () function of the Date object to return a value to the variable, month. The second uses the write method of the document object to display some information on the document.

17. After trying out the examples above, add some of these features to the web page that you created for the first assignment. As before, zip up your files and send them to me.