CIS 89C Client-Side Programming with JavaScript

CIS 89C Client-Side Programming with JavaScript

Unit 20 – Date and Math (week 9)

References:

McDuffie - Chapter 10 Dates and Math

Topics:

Opening statement - McDuffie page 291

The Date object- McDuffie page 292

The Math - McDuffie page 312

Randomizing - McDuffie page 316

Summary - McDuffie page 320

Reference:

JavaScript , The Definitive Guide, Fifth Edition by David Flanagan,

2006, O'Reilly ISBN-13: 978-0-596-10199-2

***********************************************************

Opening statement

The Date constructor, the Math object, and the Number constructor and object are part of the Core JavaScript language, rather than being part of the Document Object Model.

You could use them, even if you were not writing JavaScript in a client web page.

( We are working only in the client web page environment, but JavaScript can be used elsewhere. )

The Date object supports a wide variety of date formats.

The Math object has some common constants and mathematical operations.

We will look at random number generation, which is provided by the Math object.

The Number object is a Wrapper.

That is it is an object that contains a primitive number,

and allows for the use of methods with that number.

***********************************************************

Date

The date and time in JavaScript is the same as the date and time in UNIX.

It is kept as the number of seconds since the beginning of 1970.

This date format should work well until 2032, when it will be necessary to guarantee that the space used to keep the date is larger, so there will not be an overflow.

The Date constructor function uses the current date/time number by default.

( You can also use it with other dates and times that you provide as parameters. )

Example:

var newDateObject = new Date();

There is also a date function, which executes when you do not specify new.

The Date function, without new, takes no parameters.

It returns a string with the current date and time.

When the

Example:

var myString = Date();

A Date object provides a wide variety of presentation formats for the date and time. We will not look at all the Date formatting methods; you can look them up.

Creating a Date object

Default Date constructor

var today = new Date();

By default, the new date object is initialized to the current time on the user's machine, at the time it is created.

Constructing a Date object with various arguments

There are several other ways to set a specific date and time.

// Numeric value of year, month, day

// the year and day begin with 1

// the month begins with month 0 for January

var a_date = new Date(1776, 6, 4);

// String with time components optional

var a_date = new Date("July 4, 1776");

var a_date = new Date("July 4, 1776 13:23:05");

// number of milliseconds since the beginning of 1970

var a_date = new Date(333874800000);

Retrieving the value from a Date object

Here are a couple of methods you can use to get the date from a date object:

getTime()

provides the time in milliseconds since the beginning of 1970.

Example:

output1.value = date1.getTime();

Typical result:

333874800000

where

output1.value is where you want to put the result

date1 is a Date object.

toLocalString()

provides a string showing the date and time in the local time zone and format.

output2.value = date1.toLocaleString();

Typical result:

Thursday, July 31, 1980 12:00:00 AM

where

output2.value is where you want to put the result

date1 is a Date object.

There are many other methods you can use to get or set the value of a Date object, with various formats.

Using the Date() function without new

If the Date() function is used without new, it returns the current date and time as a string. It is a fixed string, with no options to change the format.

// Create a string containing the current date and time

var a_string = Date();

Difference between Dates in milliseconds

You can use the millisecond format of two dates, and subtract to find the difference.

Example, to get the milliseconds from dateA to dateB:

output1.value = dateB.getTime() - dateA.getTime();

where

output1.value is where you want to put the result

dateA and dateB are Date objects.

You could convert this into seconds by dividing by 1000, with some milliseconds as the remainder.

Then divide by 60 to get minutes, with some seconds as the remainder.

Then divide by 60 to get hours, with some minutes as the remainder.

Then divide by 24 to get days, with some hours as the remainder.

Example:

Start with:

1234567890 milliseconds

Divide by 1000 gives:

1234567 seconds with a remainder of 890 milliseconds

Divide by 60 gives:

20576 minutes with a remainder of 7 seconds

Divide by 60 gives:

342 hours with a remainder of 56 minutes

Divide by 24 gives:

14 days with a remainder of 6 hours.

So 1234567890 milliseconds is the same as

14 days, 6 hours, 56 minutes, 7 seconds, and 890 milliseconds

check:

14 * 24 + 6 = 342 hours

342 * 60 + 56 = 20576 minutes

20576 * 60 + 7 = 1234567 seconds

1234567 * 1000 * 890 = 1234567890 milliseconds

***********************************************************

Math

The Date() function could be used with new as a constructor function, or without new as an ordinary function that returns a string.

Math is just an object. It is not a function. It cannot be used to construct other objects.

Math constants

Math is an object that has several useful constants and methods.

Some of the constants are:

Math.E Euler's constant e

Math.PI π

There are several other constant properties of the Math object, but these seemed to be the most interesting ones to me.

Math methods

Because the Math object does not contain any variable properties, you must pass values to the Math methods, and the method returns the result.

There are a number of math functions. You pass them values as arguments, and they return the answer. Here are a few of them.

Function	Argument(s)	Result
Math.sin(angle)	radians	sine
Math.cos(angle)	radians	cosine
Math.tan(angle)	radians	tangent
Math.random()	[ none ]	number between 0.0 and 1.0
Math.round(number)	number	integer

Examples:

Math.sin(Math.PI/2) returns 1.000000

Math.random() might return 0.123456 or

something different next time

Math.round(7.915372) returns 8.000000

There are many more Math methods.

You can use Math functions to get a range of random integers:

var random_fraction = Math.random;

var range = 10;

var random_integer_0_to_9 = range * random_fraction;

You can add an offset if you wish:

var offset = 20;

var random_integer_20_to_29 = random_integer_0_to_9 + offset;

Each time you repeat this sequence, you get a new random integer with the range and offset you specify.

***********************************************************

Number

We saw the Date constructor, which is a constructor, not an object.

We saw the Math object, which is an object, not a constructor

There is a Number object, and there is a Number constructor.

The Number object has properties:

Number.MAX_VALUE

Number.MIN_VALUE

Number.NaN

Number.NEGATIVE_INFINITY

Number.POSITIVE_INFINITY

The Number constructor takes a primitive number, and creates a Number object.

Example:

var my_number = new Number(3.16171819);

Now I can use my_number object with methods:

toString()

toLocalString()

toFixed()

toExponential()

toPrecision()

valueOf()

Two of these are of significant interest:

toFixed() Example:

my_number.toFixed(2)

will round to 2 decimals, procucing

1.17

This is valuable for printing rounded amounts.

toString() Example:

var my_color = new Number(255);

my_color.toString(16);

will convert to base 16, producing the string:

***********************************************************

Summary

Date() is a constructor, that can be used to build a Date object.

The value in a Date object can be retrieved or set with a variety of formats.

There is also a Date() function, not used with new, that returns the current date and time in a fixed string format.

Math is not a constructor. It is just an object. It has useful constant properties.

It also has some interesting methods. Because the Math object contains no variable properties, you must pass argument values to the Math methods.

The Math methods return the result.