JavaScript with Sean Doyle

Lesson 8: Math, Dates and Time

The JavaScript Math Object

The Big 5 Concepts

  1. JavaScript has a special Math object with built in properties and methods for performing mathematical operations.
  2. Think of the buttons on a scientific calculator (sin, cos etc.). They are all methods of the Math object. PI is a property that returns the formula for ℼ to 15 decimal places.
  3. Some of the more useful methods are for rounding values: .round(), .floor(), .ceil().
  4. The Math.random() method is useful for generating a random number, however, it generates a decimal number between zero (inclusive) and one (exclusive), so a little work needs to be done to get a whole number.
  5. The Math object's properties and methods are static, meaning you cannot overwrite them, or use the new keyword with them.

Code Samples

var x = Math.PI; //x is 3.141592653589793

var roundDown = Math.floor(7.99999999); //roundDown is 7

var rando = Math.random(); //Could be 0.2748870400826695 or 0.7036708814312873 or anything from 0 to 0.9999999999999999

For More Information

A Deeper Dive

Date & Time in JavaScript

Today is: (from your browser with JavaScript)


The Big 5 Concepts

  1. JavaScript has a special Date object with properties and methods that let us manage dates and times in our logic.
  2. A new Date object will act as a timestamp with date and time properties that we can get or set.
  3. The Date object timestamp comes from the clock on the client device, and is subject to their timezone. It does not come from the web server.
  4. Watch out! Some of the methods start counting at 0, and some start at 1. The day of the month starts at 1, but January (and Sunday) are 0.
  5. The getTime() method converts the timestamp into an integer, and is useful for mathematical operations. For example, what would September minus June be? Turning these dates into numbers makes math easy. The getTime() method references the UNIX epoch (UTC) and represents the number of milliseconds since January 1st, 1970. The start of the year 2024 will be 1704085200000 milliseconds after January 1st, 1970.

Code Samples

var timestamp = new Date(); //This grabs a timestamp (as a Date object) from the client's browser.  When I ran this code, its value was "Sat Nov 04 2023 14:48:39 GMT-0400 (Eastern Daylight Time)"

//We can set the values of a date object...
var NewYear = new Date("January 1, 2024 00:00:00");


//Many methods for getting and setting time/date specifics...
var x = timestamp.getMonth(); //x is 10
var y = timestamp.setDate(timestamp.getDate() + 7); sets the timestamp date one week (+ 7 days) into the future.

For More Information

A Deeper Dive

JavaScript Timers

The Big 5 Concepts

  1. The browser window object has built in timers that we can use for timing operations.
  2. window.setTimeout() acts like a countdown timer - like a clock stove timer - and will call a function once the specified amount of time as elapsed.
  3. window.setInterval() will continue to call a function with a time gap specified by you.
  4. Both functions take two parameters: the function to execute; and the amount of time to wait.
  5. The window object also has built in methods to cancel timers.

Code Samples

//The function to call after the time elapses...
function myFunction(){
     console.log("Time elapsed!");
}

//Setting a countdown timer. The next line starts the timer. It will call the myFunction function after 3000 milliseconds (3 seconds).
var myTimer = window.setTimeout( myFunction, 3000 );

//Setting an interval timer. The next line starts the timer. It will call the myFunction function EVERY 3000 milliseconds (3 seconds).
var myClock = window.setInterval( myFunction, 3000 );

Cancel the timers by using the variable that references them...
window.clearTimeout( myTimer ); //stops the setTimeout
window.clearInterval( myClock ); //stops the setInterval

For More Information

A Deeper Dive