spacer
spacer

Week Two Workbook Suggested Answers

My suggested answers to our workbook exercises follow:

Comments grey (606060)
HTML black (000000)
CSS magenta (F030C0)
Function declaration/use light blue (0060F0)
Object dark green (006000)
Property brown (300000)
Member (field) dark blue (0000C0)
Method red (FF0000)
Operator orange (F06000)
Control structure purple (603090)
Statement black (000000)

<script language="javascript" type="text/javascript" >
<!-- hide
function jumpto(x) {
    if (document.form1.jumpmenu.value != "null") {
        document.location.href = x;
    }
}
// end hide -->
</script>

<form name="form1"> <select name="jumpmenu" onChange="jumpto(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)"> <option>Jump to...</option> <option value=http://www.quackit.com>Quackit Homepage</option> <option value=http://www.quackit.com/javascript/>JavaScript</option> <option value=http://www.quackit.com/html/>HTML</option> <option value=http://www.quackit.com/css/>CSS</option> <option value=http://www.quackit.com/sql/tutorial/>SQL</option> <option value=http://www.quackit.com/database/tutorial/>Database Tutorial</option> <option value=http://www.quackit.com/web_hosting/>Web Hosting Tutorial</option> </select> </form>

My suggested answer to our workbook exercise two follows:

<!-- STEP ONE: Place the following script into a separate JavaScript file called: calendar.js -->

var day_of_week = new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat');
var month_of_year = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
var Calendar = new Date(); // Date("May 10, 2055 08:00:00")

var year = Calendar.getYear();
var month = Calendar.getMonth();
var today = Calendar.getDate();
var weekday = Calendar.getDay();

var DAYS_OF_WEEK = 7;
var DAYS_OF_MONTH = 31;
var cal; // Used for printing

Calendar.setDate(1);
Calendar.setMonth(month);

var TR_start = '<TR>';
var TR_end = '</TR>';
var highlight_start = '<TD WIDTH="30"><TABLE CELLSPACING=0 BORDER=1 BGCOLOR=DEDEFF BORDERCOLOR=CCCCCC><TR><TD WIDTH=20><B><CENTER>';
var highlight_end = '</CENTER></TD></TR></TABLE></B>';
var TD_start = '<TD WIDTH="30"><CENTER>';
var TD_end = '</CENTER></TD>';

cal = '<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0 BORDERCOLOR=BBBBBB><TR><TD>';
cal += '<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=2>' + TR_start;
cal += '<TD COLSPAN="' + DAYS_OF_WEEK + '" BGCOLOR="#EFEFEF"><CENTER><B>';
cal += month_of_year[month] + ' ' + (1900+year) + '</B>' + TD_end + TR_end;
cal += TR_start;

for(index=0; index < DAYS_OF_WEEK; index++) {
    if(weekday == index) { cal += TD_start + '<B>' + day_of_week[index] + '</B>' + TD_end; }
    else { cal += TD_start + day_of_week[index] + TD_end; }
}

cal += TD_end + TR_end;
cal += TR_start;

for(index=0; index < Calendar.getDay(); index++) {
    cal += TD_start + ' ' + TD_end;
}

for(index=0; index < DAYS_OF_MONTH; index++) { //START FOR LOOP BLOCK
    if( Calendar.getDate() > index ) {
        week_day = Calendar.getDay();

        if(week_day == 0) {
            cal += TR_start;
        }

        if(week_day != DAYS_OF_WEEK) {
            var day = Calendar.getDate();

            if( today==Calendar.getDate() ) {
                cal += highlight_start + day + highlight_end + TD_end;
            } else {
                cal += TD_start + day + TD_end;
            }

            if(week_day == DAYS_OF_WEEK) {
                cal += TR_end;
            }

            Calendar.setDate(Calendar.getDate()+1);
        } 
    }
} //END FOR LOOP BLOCK

cal += '</TD></TR></TABLE></TABLE>';

document.write(cal);

<!-- STEP TWO: Place this into the BODY of the HTML document where you want the Calendar -->
<!-- Make sure the '.js' and '.html' files are in the same directory. -->

<SCRIPT SRC="Calendar.js"></SCRIPT>
 
Welcome to Class

File Size: 37 kb
Posted: Sun, May 30, 2009

Class Project Discussion

File Size: 24 kb
Posted: Fri, Jun 26, 2009