javascript objects objects – javascript is an object-based language has built-in objects we will...
TRANSCRIPT
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
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
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
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