modern javascript develop and design instructor’s notes chapter 6 - complex variable types modern...
TRANSCRIPT
![Page 1: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/1.jpg)
Modern JavaScriptDevelop And Design
Instructor’s NotesChapter 6 - Complex Variable Types
Modern JavaScript Design And DevelopCopyright © 2012 by Larry Ullman
![Page 2: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/2.jpg)
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
![Page 3: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/3.jpg)
More Objectives
• Work with different time zones• Change the represented date
and/or time• Perform date arithmetic• Create arrays• Access individual array elements
![Page 4: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/4.jpg)
More Objectives
• Invoke array methods for adding and removing elements
• Convert between arrays and strings
• Create objects• Create objects with properties• Access object properties
![Page 5: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/5.jpg)
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();
![Page 6: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/6.jpg)
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');
![Page 7: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/7.jpg)
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!
![Page 8: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/8.jpg)
Using Timestamps
// 10 days after the epoch:var thatDate = new Date(86400000 * 10);
![Page 9: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/9.jpg)
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
![Page 10: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/10.jpg)
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
![Page 11: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/11.jpg)
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)
![Page 12: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/12.jpg)
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.
![Page 13: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/13.jpg)
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)
![Page 14: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/14.jpg)
Date Arithmetic
• Perform math using timestamps• Use setX() and getX()• Subtract one Date object from
another to calculate the interval
![Page 15: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/15.jpg)
Arrays
![Page 16: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/16.jpg)
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];
![Page 17: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/17.jpg)
Accessing Elements
var people = ['Fred', 'Daphne', 'Velma', 'Shaggy'];people.length; // 4people[0]; // Fred
![Page 18: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/18.jpg)
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';
![Page 19: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/19.jpg)
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]. }}
![Page 20: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/20.jpg)
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]
![Page 21: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/21.jpg)
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]
![Page 22: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/22.jpg)
ArraysStrings
var gang = 'Fred,Daphne,Velma,Shaggy';var people = gang.split(',');
![Page 23: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/23.jpg)
Objects
![Page 24: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/24.jpg)
Creating Objects
var myObj = new Object();s
var myObj = {};
![Page 25: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/25.jpg)
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'};
![Page 26: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/26.jpg)
Accessing Properties
var chapter = { num: 6, title: 'Complex Data Types'};chapter.num; // 6
![Page 27: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/27.jpg)
Accessing All Properties
for (var p in myObj) { // Use myObj[p].}
![Page 28: Modern JavaScript Develop And Design Instructor’s Notes Chapter 6 - Complex Variable Types Modern JavaScript Design And Develop Copyright © 2012 by Larry](https://reader030.vdocument.in/reader030/viewer/2022032517/56649cae5503460f94971002/html5/thumbnails/28.jpg)
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.