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 )"; } 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( )' 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