Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern...

Modern JavaScriptDevelop And Design

Instructor’s NotesChapter 6 - Complex Variable Types

Modern JavaScript Design And DevelopCopyright © 2012 by Larry Ullman

Objectives

• Use the Date object• Create a Date object representing a

specific date and time using three different approaches

• Invoke Date methods to fetch parts of a represented date and time

• Invoke Date methods to fetch the date and time in different formats

More Objectives

• Work with different time zones• Change the represented date

and/or time• Perform date arithmetic• Create arrays• Access individual array elements

More Objectives

• Invoke array methods for adding and removing elements

• Convert between arrays and strings

• Create objects• Create objects with properties• Access object properties

The Date Object

• Able to represent any date and time 100 million days before or after the epoch

• Epoch = Midnight on January 1, 1970

var today = new Date();

Creating Specific Dates

var someday = new Date(milliseconds);

var someday = new Date(year, month, day, hour, minute, second, milliseconds);

var someday = new Date('date string');

Using Atomic Values

var thatDate = new Date(2012, 6, 5); // July is 6, not 7!var thatDate = new Date(2012, 6, 5, 13, 30); // July is 6, not 7!

Using Timestamps

// 10 days after the epoch:var thatDate = new Date(86400000 * 10);

Using a String

• July 5, 2012• Jul 5, 2012• 5 July 2012• 07/05/2012• 07/05/2012 13:30• Thu, 05 Jul 2012 13:30:00 GMT-

0500

Date Methods

Method Returns

getDate() Day of the month

getDay() Day of the week, with 0 = Sunday

getFullYear() Year as four digits

getHours() Hours, from 0 to 23

getMilliseconds() Milliseconds

getMinutes() Minutes

getMonth() Month number, with 0 = January

getSeconds() Seconds

getTime() Milliseconds from the epoch

More Date Methods

Method Example

toDateString() Thu Jul 05 2012

toISOString() 2012-07-05T17:30:05.000Z

toJSON() 2012-07-05T17:30:05.000Z

toLocaleDateString() July 5, 2012

toLocaleString() July 5, 2012 1:30:05 PM EDT

toLocaleTimeString() 1:30:05 PM EDT

toString() Sun Aug 05 2012 13:30:05 GMT-0400 (EDT)

toTimeString() 13:30:00 GMT-0400 (EDT)

Working with Time Zones

• Set dates using timestamps or strings.

• Fetch local date and time using any method.

• Or, use getTimeZoneOffset() and do the math.

Changing Dates

Method Sets

setDate() Day of the month

setFullYear() Year

setHours() Hours

setMilliseconds() Milliseconds

setMinutes() Minutes

setMonth() Month (staring at 0 for January)

setSeconds() Seconds

setTime() Date and time (using a timestamp)

Date Arithmetic

• Perform math using timestamps• Use setX() and getX()• Subtract one Date object from

another to calculate the interval

Arrays

Creating Arrays

var myVar = new Array();var myList = new Array(1, 2, 3);var people = new Array('Fred', 'Daphne', 'Velma', 'Shaggy');var options = new Array(true, false);

var myVar = [];var myList = [1, 2, 3];var people = ['Fred', 'Daphne', 'Velma', 'Shaggy'];

var collection = [1, 'Fred', 'Daphne', 2, false];

Accessing Elements

var people = ['Fred', 'Daphne', 'Velma', 'Shaggy'];people.length; // 4people[0]; // Fred

Array Indexes

var people = ['Fred', 'Daphne', 'Velma', 'Shaggy'];people[4] = 'Charlie';people[0] = 'Mac';// People now stores 'Mac', 'Daphne', 'Velma', 'Shaggy', 'Charlie'people.length; // 5people[10] = 'Dennis';people.length; // 11!people[people.length] = 'Dee';

Accessing All Elements

for (var i = 0; i < myList.length; i++) { // Do something with myList[i].}

for (var i = 0, count = myList.length; i < count; i++) { // Do something with myList[i].}

for (var i = 0, count = myList.length; i < count; i++) { if (myList[i] !== undefined) { // Do something with myList[i]. }}

Adding Elements

var primes = [];primes.push(1); // [1]primes.push(3, 5, 7); // [1, 3, 5, 7]

var primes = [3, 5, 7]; // [3, 5, 7]primes.unshift(1); // [1, 3, 5, 7]

var primes = [];primes.concat(1, [3, 5, 7]); // [1, 3, 5, 7]

Removing Elements

var primes = [1, 3, 5, 7]; // [1, 3, 5, 7]primes.pop(); // [1, 3, 5]

var primes = [3, 5, 7]; // [3, 5, 7]primes.shift(); // [5, 7]

ArraysStrings

var gang = 'Fred,Daphne,Velma,Shaggy';var people = gang.split(',');

Objects

Creating Objects

var myObj = new Object();s

var myObj = {};

Creating Properties

var me = { name: 'Larry Ullman', age: 42, car: { make: 'Honda', model: 'Fit', year: 2008 }, favoriteColors: ['Black', 'Blue', 'Gray'], tired: true};

var chapter = {num: 6, title: 'Complex Data Types'};

Accessing Properties

var chapter = { num: 6, title: 'Complex Data Types'};chapter.num; // 6

Accessing All Properties

for (var p in myObj) { // Use myObj[p].}

Arrays vs. Objects

• Always use a simple type, if you can.• Use Date when using dates and times.• Use arrays when:

– The order of the stored values is important.

– The values can be numerically indexed.– You may need to quickly know how many

values are stored.

• For all other complex data, use objects.