JavaScript Objects

• Objects– JavaScript is an object-based language• Has built-in objects we will use

– You can create your own objects• We concentrating on the built-in objects in this class

1

2

JavaScript Objects

• JavaScript is an object-based language• Everything is an object– Objects have methods– Objects have properties (variables)

• In JavaScript you are programming using objects

3

Objects By Example

• Real world Obect: A Ford Explorer• Properties– Car is blue, has 4 wheels, travelling at 75mph

• Methods– gas is delivered to the engine, air is delivered to the

horn• Events – press the gas pedal, beep the horn

• (the author incorrectly identifies these as methods)

4

Methods

• Methods are like functions, they DO something– when called from an event– when called from another method

• Can receive information– shiftingGear( ) method would receive "which gear

to shift to" data• Can return information– howMuchGasLeft( ) might return 9.4 gallons

5

Properties

• Some properties can not be changed– body shape (unless you have an accident!)– number of wheels

• Properties that can change– amount of gas in the tank– speed at which you're travelling

6

Slacker Definition

• An object is– a bunch methods and a bunch of variables

attached to a name

7

Built-in Objects

• Date Object– getTime( ), getHours( ), getMinutes( )

• Array Objects– length( ) method to find out the number of

elements in the array– sort( ) method - sorts elements into alphabetical

order• Math Objects• String Objects

8

Creating a Standard Object

• var myArray = new Array( );– very much like Java itself!

• "new" is the keyword that tells JavaScript to create a new object of a certain "type"

• The "Array( )" part call the "constructor" for an Array object

9

Passing Data to the Constructor

• var myArray = new Arrray( );• var myArray = new Array("Paul", "Paula", "Pauline");

• var myDate = new Date( );• var myDate = new Date("1 Jan 2000");

10

Object Properties

• Write the object name, following by a dot (period), followed by the variable name– e.g. myArray.length• number of elements contained in the array

– could store it in a variable• var myVar = myArray.length

• Some properties can be updated• Some can not

11

Object Methods

• Some return data– Date.gethours( ) returns the number of hours

• Some just perform a function– Array.sort( ) sorts an array in place

12

JavaScript Native Objects

• String, Math, Date, and Array• Example creating an Object– var string1 = new String("Hello");

var string2 = new String(123);

var string1 = "Hello";(JavaScript works it out for you)

13

Just a String

• A string is just a series of individual characters and that each character has a position or index, somewhat like arrays– Unfortunately, the first position is zero, not one

14

The length Property

• The number of characters in a string

var myname = new String("Paul");document.write(myName.length);

Exercise 2.33

• Write a JavaScript program that calls a function that prompts the user for their name and returns the length of their name

• Display …

"Your (name) has (number) characters"

15

Array Objects

– Properties• length

– Methods• sort• reverse• push• pop

16

Arrays Conceptually

• A named list• Instead of naming each variable in a list…– member1, member2, etc.

• Name the list and use a number index…– members(1), members(2), etc.

17

Declare an Array

• var members = new Array( );

• Then populate the list…– members[0] = "Steve";

members[1] = "Jane";

• Or…– var members = new Array("Steve", "Jane");

18

The length Property

• Returns the number of elements in the array– var names = new Array( );

names[0] = "Paul";names[1] = "Catherine";names[2] = "Steve";

document.write("The last name is " + names[names.length - 1];

19

The sort( ) Method• Puts elements in an Array in ASCIIbetical order• Remember JavaScript is case sensitive– var names = new Array ("Paul", "Mary", "Steve");

var i; # Author uses element index

names.sort( );

for (i = 0; i < names.length, i++){

document.write(names[ i ] + "<BR>)";}

20

Exercise 2.7

• Write while-loop that prompts the user to enter their name.

• Add their names to an array• If they enter 'exit', then end the prompting• Sort the array and display the list in sorted

order

21

Math Objects

• Covered in Last Lesson– Properties• PI

– Methods• round• random

22

Exercise 2.34

• Write a JavaScript program that calls a function that returns a random integer between 1 and 100, inclusive, and display that on the webpage like so…

"The number I'm thinking of is (number)"

23

Date Objects

• Handles everything to do with dates, times, and timers in JavaScript – Can find out the date and time now– Can store dates– Do calculations with dates– Convert dates into Strings

24

Creating a Date Object

• Four ways to create a data object– var theDate1 = new Date( );– var theDate2 = new Date(949278000000)'• the number of milliseconds since 1/1/1970

– var theDate3 = new Date("31 January 2000");– var theDate4 = new Date(2000,0,31,15,35,20,20);• 0 is Janurary, 11 is December (...go figure)

25

Date Methods

• getDate( ) The day of the month• getDay( ) The day of the week as an

integer• getMonth( ) The month as an integer• getFullYear( ) The year as a four digit

number

26

Setting Date Values

• setDate( )• setMonth( )• setFullYear( )– example: myDateObject.setFullYear(2000);

myDateObject.setDate(27);myDateObject.setMonth(1);

• Note: There is no setDay( ) method, the day is calculated by the values of the other fields

27

Date Error Example

• var myDate = new Date("1 Jan 2000");myDate.setDate(32);document.write(myDate);

32 is not a valid day in January, so JavaScript calulates 32 days from Jan 1st, hence the date is not Feb 1st!

28

Date Calculation

• var nowDate = new Date( );var currentDay = nowDate.getDate( );nowDate.setDate(currentDay + 28);

Adds 28 days to the date

29

Getting/Setting Time Values

• getHours( ) setHours( )• getMinutes( ) setMinutes( )• getSeconds( ) setSeconds( )• getMilliseconds( ) setMilliseconds( )

30

Exercise 2.35

• Create a JavaScript program that calls the function that displays today's date in the following format…

"This is the 17th day of October in the year of 2009"

31

End

32