Week Two JavaScripting Notes

Here we are going to deconstruct some simple JavaScript examples, diagram them, and then look into our first JavaScript library (JQuery). For diagraming purposes, let's use the following color scheme (please use your own color choices that provide intuition):

Comments grey (606060)
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)
HTML and other statements black (000000)

Let's start with some examples from a previous group of students' suggestions:

Start with a new HTML document (with HTML and nested HEAD, and BODY elements).

/* This script and many more are available free online at the JavaScript source :: http://javascript.internet.com
Created by: Sandeep Gangadharan :: http://www.sivamdesign.com/scripts/ */

function formatTime() {
    now = new Date();
    hour = now.getHours();
    min = now.getMinutes();
    sec = now.getSeconds();
    if (document.clock.sivamtime[0].checked) {
       if (min <= 9) {
          min = "0" + min;
       }
       if (sec <= 9) {
          sec = "0" + sec;
       }
       if (hour > 12) {
          hour = hour - 12;
          add = " p.m.";
       } else {
          hour = hour;
          add = " a.m.";
       }
       if (hour == 12) {
          add = " p.m.";
       }
       if (hour == 00) {
          hour = "12";
       }       
       document.clock.sivam.value = 
           ((hour<=9) ? "0" + hour : hour) + ":" + min + ":" + sec + add;
    }
	
    if (document.clock.sivamtime[1].checked) {
       if (min <= 9) {
          min = "0" + min; 
       }
       if (sec <= 9) {
          sec = "0" + sec;
       }
       if (hour < 10) {
          hour = "0" + hour;
       }
       document.clock.sivam.value = hour + ':' + min + ':' + sec;
   }
   setTimeout("formatTime()", 1000);
}
window.onload = formatTime;

<!-- Paste this code into the HEAD section of your HTML document.
You may need to change the path of the file. -->

<script type="text/javascript" src="timeFormat.js"></script>

<!-- Paste this code into the BODY section of your HTML document -->

<form name="clock">
<table class="clock" width="135">
<tr>
<td class="clock2">
Local Time
</td>
</tr>
<tr>
<td>
<input class="clock2" type="text" name="sivam" size="12"><br>
</td>
</tr>
<tr>
<td>
<label class="clock3" for="1">
    <input type="radio" id="1" name="sivamtime" checked>12 Hour Format
</label><br/>
<label class="clock3" for="2">
    <input type="radio" id="2" name="sivamtime">
    24 Hour Format
</label>
</td>
</tr>
</table>
</form>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div><p>

Now, you get to do some diagraming after we look at these examples in class:

AN EXAMPLE FOR YOU TO DIAGRAM:



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();

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);