spacer
spacer

Week Two JavaScripting Notes

Tonight 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 (we can agree to change it in class if you don't like it):

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)

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

<!-- Paste this code into a CSS STYLE element within the HEAD element of your HTML document -->

<style>
table.clock {
text-align: center;
border: thin dotted blue;
padding: 5px;
margin: auto;
}

td, input.clock2 {
text-align: center;
border: none;
font: bold .9em verdana, helvetica, arial, sans-serif;
padding-bottom: .5em;
}

.clock3 {
text-align: center;
font: .7em verdana, arial, helvetica, ms sans serif;
}
</style>

<!-- Paste this code into an external JavaScript file named: timeFormat.js -->

/* 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>

Here we look at an example suggested by a student named Sarun:

Paste the following code before the closing </BODY> tag of the example you've been building above.

<!-- JavaScript examples by Quackit.com --> 

<script type="text/JavaScript">
<!--
function timedRedirect(redirectTo, timeoutPeriod) {
    setTimeout("location.href = redirectTo;",timeoutPeriod);
}
//   -->
</script>
<a href="JavaScript:void(0);" onclick="JavaScript:timedRedirect(redirectTo='http://www.quackit.com/html/examples/',
timeoutPeriod='2000')">Redirect in 2 seconds...</a>

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

FIRST EXAMPLE FOR YOU TO DIAGRAM
 (just paste the following code before the closing </BODY> tag of the example you've been building above.) 

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

SECOND EXAMPLE FOR YOU TO DIAGRAM:

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

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>