| Lesson 20: Time Today we will discuss time and how we can use JavaScript to manipulate our page's interaction with the user based upon time's passage. There are three primary objects and methods JavaScript provides for programming timed events: setInterval(), setTimeout(), and Date() . 1) setInterval('CODES',delay_in_milliseconds); Use setInterval() whenever you have a block of code you want to execute over and over again with a specified delay (in milliseconds). To stop a setInterval from firing, set a variable to the setInterval when declaring it, and then clearInterval(variable). myInterval=setInterval('Do_This()',1000); // fires Do_This() once every second clearInterval(myInterval); // stops the myInterval loop from firing again Perhaps the simplest JavaScript clock is a setInterval() initiated by the body tag's onLoad event handler which writes the time and date in the status bar, Example: If you wanted a message to appear for a while in the status bar, you could disable the clock by using: clearInterval(clock); 2) setTimeout('CODES',delay_in_milliseconds); Use setTimeout whenever you have code that you want to execute after a specified delay (in milliseconds). To prevent a setTimeout from firing, set a variable to the setTimeout when declaring it, and then clearTimeout(variable). myTimeout=setTimeout('Do_This()',1000); // fires Do_This() once after 1 second clearTimeout(myTimeout); // stops the myTimeout timer from firing Notice that while setInterval will continue to fire after the specified delay over and over untill clearInterval is called, setTimeout only fires once unless clearTimeout is called prior to the end of it's specified dealy. You can place a setTimeout in an if statement inside a function which it calls at the end of it's delay to have it continue fire just as setInterval so long as the if's comparison is valid. Here is the same clock from above but using a setTimeout within a function, Example: 3) Date() The Date() object is a special data type in JavaScript. Unlike most objects, it's contents are never defined statically, since it is referring to the time and date which are constantly changing. So to be able to use the Date() object, we must create an instance of it, like pressing the button on a stopwatch. We do this with the "new" constructuor, example: var now=new Date(); which places a string containing all the information necessary for parsing the date in the variable "now". Once we have created an instance of the Date() object, we can use various "get" syntax to get the various values for time and date: now.getDate(); the day of the month (1-31) now.getDay(); the day of the week (0-6) now.getFullYear(); 2001 instead of 01 now.getHours(); the hour of the day (0-23) [Note- 0 is 12am midnight, 13-23 is 1pm-11pm] now.getMilliseconds(); (no WebTv2.5 support) now.getMinutes(); minutes of the hour (0-59) now.getMonth(); the month of the year (0-11) now.getSeconds(); seconds of the min (0-59) now.getTime(); milliseconds since 12am1/1/70 now.getTimezoneOffset(); the difference from Greenwich Mean Time (GMT) now.getYear(); last two digits of the year [Note times can be extracted in UTC format] We can use the Date() object to create a clock with any syntax/format we desire thanks to the getMethods. Example: non military time: The great advantage to the date being an object is you can set it's values using the set methods just as you get them with the get methods above. Setting the time or date is helpful when setting cookie expirations or testing against data logs. now.setDate(day_of_month); now.setFullYear(year); now.setHours(hours); now.setMilliseconds(milliseconds); now.setMinutes(minutes); now.setMonth(month); now.setSeconds(seconds); now.setTime(milliseconds); now.setYear(year); So, to set the year ahead one year, maybe for a cookie storage script, you would "get" the year and "set" the year based upon it's current value, Example: now=new Date(); now.setFullYear(now.getFullYear+1); There are also several special methods that allow you to use time and date in special syntax now.toLocaleString(); local time zone now.toGMTString(); uses GMT time zones now.toString(); a plain text date format now.toUTCString(); a Universal Time Code now.valueOf(); milliseconds since 12am 1-1-70 |