Sending Output to a Web Page

JavaScript provides two commands to display text on a Web page: the document.write("text"); and document.writeln("text"); commands, where text is a text string that you want sent to the Web page. Note that each JavaScript command line ends with a semicolon to distinguish it from the next command in the program.

Now you must specify the text the program will use to determine the current date and then display that information (using a test date) on the page. To do this, you have to create a JavaScript variable. A variable is a named element in a program, used to store and retrieve information. Variables are given values through assignment operators, the most common being the equals sign. To assign the variable "Year," you would enter the following JavaScript command:

Year=2002

With the Year variable assigned a value, you can use the document.write() method to display this value on the Web page, as follows:

document.write(Year);

This code would cause the text "2002" to be displayed on the Web page. Before you can use a variable in your program, you have to create it. You declare a variable in JavaScript either by assigning it a value in a JavaScript command or by using the var command to to create it without assigning it a value.

Now that you've learned a little about the document.write() method, you'll add it to the JavaScript program you just created.

Below the line "!-- Hide from non-JavaScript browsers," insert the following two comments replacing the text JavaScript commands(indented to make your code easier to read):

document.write("Today is 10/15/02<BR>");

document.write("Only 71 days until Christmas");

In your program for Just Plain Stupid, you'll be working with dates as you try to calculate the number of days remaining until December 25th.

To learn more about dates in a JavaScript program, refer to pages 7.14-7.16 in your textbook. For now, we will use a specific date, October 15th, to test your program. You will eventually set up the program to use the current date. You'll create the following five variables:

  • Today, which will contain complete date and time information. For this activity we will use the test date October 15th.
  • ThisDay, which will contain the day of the month, extracted from the Today variable.
  • ThisMonth, which will contain the value of the month, extracted from the Today variable.
  • ThisYear, which will contain the year value extracted from the Today variable.
  • DaysLeft, which will contain the number of days left until Christmas. Because you haven't calculated this value yet, you'll set this variable equal to 999 as a placeholder until you calculate the actual value.

Now you'll use these variables with commands based on variable values. Return to your program file and insert the following below the line "<!--Hide this script from browsers that don't support JavaScripts">:

var Today = new Date("October, 15, 2002");

var ThisDay = Today.getDate();

var ThisMonth = Today.getMonth() +1;

var ThisYear = Today.getYear();

 

Edit the line that reads document.write("Today is 10/03/01<BR>"); to read:

document.write("Today is "+ThisMonth+"/"+ThisDay+"/"+ThisYear+"<BR>");

 

Continue to key in the following lines directly below the last line entered above:

//Get number of days until Christmas

var DaysLeft = 999;

Edit the line that reads document.write("Only 71 days until Christmas"); to read:

document.write("Only " + DaysLeft + " days until Christmas");

Save you changes and view them in your browser. The text not only is hard to see, but it needs to aligned to the center.

Change the text to have a H2 heading and is aligned to the center. Place the H3 command above the JavaScript tags where the statement will appear. Remember to end the H2 tag at the end of the JavaScript.

Save your changes and then view them in your browser. The heading and center alignment commands should appear above the beginning script tag. Don't forget to place a closing H2 tag at the end of the script tag.

Just Plain Stupid