ObjectOriented Calendar

1
Object-Oriented Calendar
ltBODY BGCOLOR"FFFFFF"gt ltSCRIPT
LANGUAGE"JavaScript"gt var name prompt("Please
enter your name ", " ") greeting(name) calendar
new Month() document.write("ltHRgt") calendar.p
rintMonth() lt/SCRIPTgt lt/BODYgt
calendar is an instance of the Month object
2
Object-Oriented Calendar
function greeting(name) var today new
Date() var hrs today.getHours()
document.writeln("ltCENTERgtltH1gt")
document.write("Good ") if (hrs lt 6)
document.write("Early Morning ") else if (hrs
lt 12) document.write("Morning ")
else if (hrs lt 18) document.write("Aftern
oon ") else document.write("Evening
") document.write(name)
document.writeln("!lt/H1gt")
Date is a pre-defined object
Choosing from multiple options
document.write("You entered this page on
") dayStr today.toLocaleString() i
dayStr.indexOf(' ') n dayStr.length
document.write(dayStr.substring(i1, n))
document.writeln("lt/CENTERgt")
String object manipulation
3
Object-Oriented Calendar
Defining your own object is just like defining a
function
function Month() var today new Date()
this.thisMonth today.getMonth()
this.thisDate today.getDate() this.thisYear
today.getYear() this.firstDay
findFirst(today) this.monthName
findName(this.thisMonth) this.nDays
findNumDays(this.thisMonth, this.thisYear)
this.printMonth printMonth
Properties
Method
Next Must define findFirst, findName,
findNumDays, printMonth
4
Object-Oriented Calendar
Date object as parameter
function findFirst(d) d.setDate(1)
return d.getDay() // 0 for Sunday, 1 for
Monday, etc.
How a value is sent back from a function
5
Object-Oriented Calendar
function findName(month) switch (month)
case 0 return
"January" break case 1 return
"February" break case 2 return
"March" break
Another way to decide among multiple options
6
Object-Oriented Calendar
function findNumDays(month, year) var daysIn
new Array(12) daysIn0 31 daysIn1
((year 4 0) (year 100 ! 0) (year
400 0)) ? 29 28 daysIn2 31
daysIn10 30 daysIn11 31 return
daysInmonth
Another example of array use
Can you think of other perhaps better
approaches?
7
Object-Oriented Calendar
function printMonth() document.writeln("ltCENT
ERgt") document.write("ltTABLE BORDER5
CELLPADDING5 CELLSPACING4gt")
document.write("ltTRgtltTH COLSPAN7gt")
document.write(this.monthName)
document.write(" ") document.write(this.thisYe
ar) document.write("ltTRgtltTHgtSltTHgtMltTHgtTltTHgtWltT
HgtTltTHgtFltTHgtSlt/TRgt") document.write("ltTRgt")
Properties of the Month object
Note the writing of HTML code to the page
8
Object-Oriented Calendar
for (i0 iltthis.firstDay i)
document.write("ltTDgtlt/TDgt")
First example of a loop.
Can you tell what it is doing?
9
Object-Oriented Calendar
Try it
for (i1 iltthis.nDays i)
document.write("ltTD ALIGNCENTERgt") if (i
this.thisDate) document.write('ltBgt
ltFONT COLOR"FF0000"gt')
document.write(i) document.write("lt/FO
NTgtlt/Bgt") else
document.write(i) document.write("lt/TDgt")
if (((this.firstDay i) 7) 0)
document.write("lt/TRgtltTRgt")
document.writeln("lt/TRgtlt/TABLEgtlt/CENTERgt")
Highlight if today
Print each date
Check for the end of week
Close off the table