An Object Lesson In JavaScript - A Hot Date (Page 9 of 9 )
And finally, here's another example of just how useful JavaScript objects can be. I've put together a Calendar object, which displays a neat monthly calendar for any month you care to name - simply specify the month and year as object properties, and let the constructor take care of the rest.
<script language="JavaScript">
/* Calendar object, calendar.js
Usage:
obj = new Calendar(mm, yyyy);
created 15.Mar.2001
copyright Melonfire, 2001. all rights reserved.
http://www.melonfire.com/community/columns/trog/
demonstration only - not meant for production enviroments!!
*/
// constructor
function Calendar(month, year)
{
// array of day names
this.days = new Array("Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday");
// array of month names
this.months = new Array("January", "February", "March", "April", "May",
"June", "July", "August", "September", "October", "November", "December");
// array of total days in each month
this.totalDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
// object properties - month and year
// correction for zero-based array index
this.month = month-1;
this.year = year;
// leap year correction
if (this.year % 4 == 0)
{
this.totalDays[1] = 29;
}
// temporary variable - used later
this.rowCount = 0;
// object method
this.display = display;
// automatically run method display() once object is initialized
this.display();
}
// function to display calendar
function display()
{
// create a Date object
// required to obtain basic date information
// get the first and last day of the month - boundary values for calendar
obj = new Date(this.year, this.month, 1);
this.firstDayOfMonth = obj.getDay();
obj.setDate(31);
this.lastDayOfMonth = obj.getDay();
// start table
document.write("<table border=0 cellpadding=2 cellspacing=5>");
// month display
document.write("<tr><td colspan=7 align=center><font face=Arial
size=-1><b>" + this.months[this.month] + " " + this.year +
"</b></font></td></tr>");
// day names
document.write("<tr>");
for (x=0; x<7; x++)
{
document.write("<td><font face=Arial size=-2>" +
this.days[x].substring(0,3) + "</font></td>") ;
}
document.write("</tr>");
// start displaying dates
// display blank spaces until the first day of the month
document.write("<tr>");
for (x=1; x<=this.firstDayOfMonth; x++)
{
// this comes in handy to find the end of each 7-day block
this.rowCount++;
document.write("<td><font face=Arial size=-2> </font></td>");
}
// counter to track the current date
this.dayCount=1;
while (this.dayCount <= this.totalDays[this.month])
{
// use this to find out when the 7-day block is complete and display a new
row
if (this.rowCount % 7 == 0)
{
document.write("</tr>\n<tr>");
}
// print date
document.write("<td align=center><font face=Arial size=-1>" + this.dayCount
+ "</font></td>");
this.dayCount++;
this.rowCount++;
}
// end table
document.write("</tr></table>");
}
// eof
</script>
Here's a brief explanation of what this does, and how it
does it.
The first few lines set up the arrays containing month and day names, and the total number of days in each month. A simple equation is used to find out whether the year in question is a leap year, and appropriate modification made to the total number of days for February if so. Control then passes to the object method display(), which is responsible for actually writing the calendar to the page.
With a little help from the Date object and a couple of temporary variables, a table is created and filled with the days of the month. The document.write() method takes care of setting up the <table>, <tr> and <td> tags, and printing date information into the table cells.
Here's an example of how you could use this object.
<html>
<head>
<script language="JavaScript" src="calendar.js"></script>
</head>
<body bgcolor="white">
<script> obj1 = new Calendar(2, 2005); </script>
<script> obj2 = new Calendar(7, 2001); </script>
</body>
</html>
And here's what you'd see:
And that's about it. I hope the examples in this article gave you a better appreciation for the usefulness of JavaScript objects, and perhaps even sparked a few ideas on how you can use them in your development activities. If you have questions, comments or large amounts of money for me, send me some email - and come back next time for more!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 21 
