JavaScript Objects

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

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

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)

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

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

Slacker Definition • An object is • a bunch methods and a bunch of variables attached to a name

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

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

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");

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

Object Methods • Some return data • Date.gethours( ) returns the number of hours • Some just perform a function • Array.sort( ) sorts an array in place

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)

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

The length Property • The number of characters in a stringvar 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"

Array Objects • Properties • length • Methods • sort • reverse • push • pop

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.

Declare an Array • var members = new Array( ); • Then populate the list… • members[0] = "Steve";members[1] = "Jane"; • Or… • var members = new Array("Steve", "Jane");

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];

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 indexnames.sort( );for (i = 0; i < names.length, i++){ document.write(names[ i ] + "<BR>)";}

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

Math Objects • Covered in Last Lesson • Properties • PI • Methods • round • random

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)"

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

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)

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

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

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!

Date Calculation • var nowDate = new Date( );var currentDay = nowDate.getDate( );nowDate.setDate(currentDay + 28);Adds 28 days to the date

Getting/Setting Time Values • getHours( ) setHours( ) • getMinutes( ) setMinutes( ) • getSeconds( ) setSeconds( ) • getMilliseconds( ) setMilliseconds( )

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"

End

JavaScript Objects