Home arrow JavaScript arrow Page 9 - An Object Lesson In JavaScript

A Hot Date - JavaScript

Think JavaScript is only good for image swaps and flying <div>s?Think again - this article takes an in-depth look at some of theobject-oriented constructs available in JavaScript, and demonstrates howJavaScript objects can substantially speed up code development anddeployment.

TABLE OF CONTENTS:
  1. An Object Lesson In JavaScript
  2. Object Lessons
  3. Sumthing New
  4. Alpha Radiation
  5. Add()ing Some More
  6. Turning Up The Heat
  7. Room With A View
  8. Construction Crew
  9. A Hot Date
By: Vikram Vaswani, (c) Melonfire
Rating: starstarstarstarstar / 23
April 02, 2001

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
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!

 
 
>>> More JavaScript Articles          >>> More By Vikram Vaswani, (c) Melonfire
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: