Modifying a Web Page Calendar
(Page 1 of 4 )
Welcome to the seventh part of an eight-part series that shows you how to construct a web page calendar that will display the current month, the current year, any specified month, or any specified year. In this part of the series, I explain how the user can display the calendar of any year. To avoid writing too much code, you will have to do some modification of the previous code.
The Show any Year's Calendar Button
When the Show any Year's Calendar Button is clicked, a prompt (dialog) box appears. You type in the year you want to display in the box. When you click the OK button of the prompt box, the calendar for the year you typed in should appear. When you click outside the calendar of the year, on the body element, the calendar disappears. The tag for this button is:
<button type="button" onclick="CalJustClicked = true; receiveYear()">Show any Year's Calendar</button>
The value (string) for the onclick attribute begins with
CalJustClicked = true;
This statement serves the same purpose as we saw before. The next statement in the value (string) is:
receiveYear()
This calls a new function, receiveYear(), which I now describe.
The receiveYear() Function
The main aim of the function, receiveYear() is to display a prompt box in which you type in the year of your choice. The function will finally call the showYear(year) function, passing the year you type in the prompt box as the argument. You should then see the calendar for the year of your choice. This is the function:
function receiveYear()
{
var yourYear = false;
var year = prompt("Please enter the year.","")
//check if the year is valid
if ((year >= 1900)&&(year.length == 4))
{
yourYear = true;
}
else
{
alert('Year must be made up of 4 digits and greater than or equal to 1900')
yourYear = false;
}
if (yourYear == true)
{
showYear(year);
}
}
The first line of the function declares a Boolean variable named yourYear and assigns the value of false to it. This variable will be used to check if the user has typed in a year that is realistic. The next statement prompts the user for the year and assigns the value typed to the year variable.
The next statement is an if-statement. It checks to see if the year typed is greater than or equal to 1900, and if it is made up of four digits. If it passes the test, it sets the yourYear variable to true; otherwise, it issues an error message and sets the yourYear variable to false.
The next statement is an if-statement. This one uses the value of the yourYear variable. If yourYear is true, it means the year the user typed in is realistic. It then calls the showYear(year) function, passing in the value of the year as an argument. Remember that the showYear(year) function calls the showMonth() function 12 times to display the twelve months of the year. If yourYear is false, the receiveYear() function does not call the showYear() function, which does not call the showMonth() function.
Next: Modification of Some Code Segments >>
More HTML Articles
More By Chrysanthus Forcha
