How to Use JavaScript++ WebReference.com- How to Create A JavaScript Web Page Screen Saver | 2 | WebReference

How to Use JavaScript++ WebReference.com- How to Create A JavaScript Web Page Screen Saver | 2

To page 1current pageTo page 3
[previous][next]

How to Use JavaScript++

The first thing this code does (before declaring the functions) is to test the existence of the push and pop functions in the Array prototype. If they are already present, it's unnecessary to replace them when the native implementation is bound to be faster than any implemented in script. If they are missing from the Array prototype, the script implementations are assigned. Either way, the Array prototype will end up with an implementation.

 

The array functions push and pop work together, one appending elements to the end of the array, the other removing them one by one. The functions use the highest numerical index to base where to append and remove; this adds some complexity to the algorithm since JavaScript arrays can be sparsely populated. When there is no highest numerical index, push will start at zero and pop will do nothing and return undefined.

 

In contrast to push and pop, shift and unshift work at the front of the array. At first glance, it might seem logical to merge the push and pop code with the shift and unshift but it's not that easy. Push and pop add and remove from the highest numerical index leaving all other items as they were, shift and unshift insert and remove items from the beginning at the index position, zero shifting all other items up or down as needed. Note that while JavaScript arrays may be sparsely populated, the shift and unshift methods treat the array as if it were not. All items are shifted, regardless of whether there are gaps that could accommodate the insertions and deletions.

 

Array.prototype.moveItems = function(start, delta)

{

   // for all numeric indexes, copy to a separate array

   var b = new Array;

   for ( var i in this )

   {

      var n = this.toNumber(i);

      if ( (n != undefined) && (n >= start) )

      {

         b[n] = this[n];

         delete this[n];

      }

   }

   // and back again with change to index

   for ( i in b )

   {

      var n = this.toNumber(i);

      if ( n != undefined )

      {

         this[n + delta] = b[n];

      }

   }

}

 

Moving items around in an array is not just a case of modifying the indexes of items (although this may in fact be how the native implementation works). In the script, items must be removed from the array and then reinserted again under the new index. The method moveItems() above demonstrates how this might be done. Using this method, the shift and unshift methods are relatively easy to implement…

 

if ( !Array.prototype.shift) Array.prototype.shift = function()

{

   var v = this[0];

   delete this[0];

   this.moveItems(0,-1);

   return v;

}

if ( !Array.prototype.unshift ) Array.prototype.unshift = function()

{

   // if nothing to unshift, do nothing

   if ( arguments.length == 0 ) return;

  

   // all numeric elements in the array are shifted up

   this.moveItems(0,arguments.length);

 

   // add the new elements.

   for ( i = 0; i < arguments.length; i++ )

   {

      this[i] = arguments[i];

   }

}

 

The last Array method necessary is called splice. This method removes a number of items from a given start position and inserts a new set of items in their place, shifting or unshifting the remainder of the items in the array appropriately. The following script shows how this can be done:

 

if ( !Array.prototype.splice ) Array.prototype.splice = function(start, deletecount)

{

   // remove elements from the start position

   var b = new Array;

   for ( var i = 0; i < deletecount; i++ )

   {

      if ( this[i+start] != undefined ) b[i] = this[i+start];

      delete this[i+start];

   }

   //shift elements up or down depending on delete count and arguments

   this.moveItems(start, arguments.length - 2 - deletecount);

  

   // insert new elements

   for ( i = 2; i < arguments.length; i++ )

   {

      this[start + i - 2] = arguments[i];

   }

}

New Date Methods

The JavaScript Date class takes care of calendar and time calculations including such details as which years are leap years, etc. It has been packaged with JavaScript since the earliest versions. Recently, there have been a few additions, all of which involve formatting to a string.

The following code will patch older JavaScript engines in the same manner as with Arrays above…

 

// some useful constants

Date.prototype.aDays =

   ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];

Date.prototype.aMonths =

   ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

Date.prototype.aLongMonths =

   ['January','February','March','April','May','June',

   'July','August','September','October','November','December'];

 

// some useful function for dates

Date.prototype.nDigits = function(x,n)

{

   var s = '' + x;

   while ( s.length < n ) s = '0' + s;

   return s;

}

Date.prototype.formatTime = function(h,m,s)

{

   return nDigits(h,2) + ':' + nDigits(m,2) + ':' + nDigits(s,2);

}

 

if ( !Date.prototype.toDateString ) Date.prototype.toDateString = function()

{

   return this.aDays[this.getDay()] + ' ' +

      this.aMonths[this.getMonth()] + ' ' +

      this.getDate() + ' ' +

      this.getFullYear();

}

if ( !Date.prototype.toUTCString ) Date.prototype.toUTCString = function()

{

   var dt = this.aDays[this.getUTCDay()] + ', ' +

      this.getUTCDate() + ' ' +

      this.aMonths[this.getUTCMonth()] + ' ' +

      this.getUTCFullYear();

   var tm = this.formatTime(

      this.getUTCHours(),

      this.getUTCMinutes(),

      this.getUTCSeconds());

   return dt + ' ' + tm + 'UTC';

}

if ( !Date.prototype.toTimeString ) Date.prototype.toTimeString = function()

{

   var tm = this.formatTime(

      this.getHours(),

      this.getMinutes(),

      this.getSeconds());

   var delta = -this.getTimezoneOffset() * 10 / 6;

   return tm + ' UTC' + ((delta>=0)?'+':'') + this.nDigits(delta,4);

}

if ( !Date.prototype.toLocaleTimeString ) Date.prototype.toLocaleTimeString = function()

{

   return this.formatTime(

      this.getHours(),

      this.getMinutes(),

      this.getSeconds());

}

if ( !Date.prototype.toLocaleDateString ) Date.prototype.toLocaleDateString = function()

{

   return this.getDate() + ' ' +

      this.aLongMonths[this.getMonth()] + ' ' +

      this.getFullYear();

}

 

 

To page 1current pageTo page 3
[previous][next]

Created: March 27, 2003
Revised: September 29, 2004

URL: http://webreference.com/programming/javascript/gr/column9/1