javascript objects
Post on 22-Feb-2016
37 Views
Preview:
DESCRIPTION
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
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
top related