TweetFacebookShareThis

JavaScript Basics Part 4

Previous Page    Computer Studies

JavaScript Clock

JavaScript code used to create the clock at the top right of the page

window.onload = updateClock;
setInterval('updateClock()', 1000 );
function updateClock ( )
{
   var currentTime = new Date ( );

   var currentHours = currentTime.getHours ( );
   var currentMinutes = currentTime.getMinutes ( );
   var currentSeconds = currentTime.getSeconds ( );
   var currentDay = currentTime.getDate( );
   var currentMonth = (currentTime.getMonth ( ) + 1);
   var currentYear = currentTime.getFullYear ( );

   currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
   currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
   currentDay = ( currentDay < 10 ? "0" : "" ) + currentDay;
   currentMonth = ( currentMonth < 10 ? "0" : "" ) + currentMonth;

   var timeOfDay = ( currentHours < 12 ) ? "am" : "pm";
   currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
   currentHours = ( currentHours == 0 ) ? 12 : currentHours;

   var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay + ' - ' + currentDay + '/' + currentMonth + '/' + currentYear;
   document.getElementById("SiteClock").innerHTML = currentTimeString;
}

Objects

Computer Studies javascript_logo

The browser creates most objects, loading them into memory when the document loads in the browser, the JavaScript enhanced browser loads HTML elements and creates a hierarchy of objects whether the script calls for them or not, the property defines the particular settings of a object, the method is a command that control's the objects behaviour and the event handlers are how the object reacts to user events.

The window object is the master container, the root of the document object models hierarchy, it contains the documents content and chrome (toolbars, scroll bars, status bar, menu bars), the windows object can display modal dialog boxes (alerts), text in the status bar and create sub-windows, the windows object's events are handled by referencing with properties and methods.

Properties Methods Event Handlers
closed Alert() onLoad
defautStatus Blur() onUnload
frames Close() onFocus
name Confirm() onBlur
opener Focus() onError
parent moveBy() onResize
self moveTo() onClick
status Open()  
top Print()  
window Prompt()  
  resizeBy()  
  resizeTo()  
  scrollBy()  
  scrollTo()  
  setInterval()  
  clearInterval()  
  setTimeout()  
  clearTimeout()  

Some JavaScript Tutorials
www.w3schools.com
www.javascriptkit.com

Previous Page    Computer Studies