1. Using Object-Oriented JavaScript CST 200- JavaScript 4 – 7 - 13

2. 2 Objectives In this chapter, you will: Study object-oriented programming Work with the Date, Number, and Math objects

3. 3 Object Oriented Programming Object-Oriented Programs model the world as a collection of objects –Each object has properties and methods Object-oriented programming (OOP) allows programmers to reuse code without having to copy or recreate it

4. Classes and Objects In Object-Oriented Programming, the code, methods and attributes that make up an object are organized into a class –A class is a static piece of code – stored in a text file An object is an instance of a class –An object exists within memory of a computer –A class can have many instances (objects) at the same time –Creating an object from a class is called instantiating an object 4

5. Browser Objects Objects in the browser object model ( window, document ) are automatically created by the Web browser –We don't have to instantiate them to use them 5

6. Array Object We have already worked with the Array JavaScript object Example: var friends = new Array( "sam", "bob" ); var colors = new Array( "red", "green", "aqua" ); Here, we create two Array objects (two instances of the Array class) one named friends, and another named colors 6 Note the new keyword, tells the JavaScript interpreter we are creating a new object

7. 7 Using Built-In JavaScript Classes

8. 8 Using the Date, Number, and Math Classes Three most commonly used JavaScript classes: – Date, Number, and Math

9. 9 Manipulating the Date and Time with the Date Class Date class –Contains methods and properties for manipulating the date and time –Allows us to use a specific date or time element in JavaScript programs

10. 10 Date Class (cont) We can create a Date object using one of the following constructors: A constructor is a special function used to create an object Table 6-2 Date class constructors

11. 11 Date Class (cont’d.) Example Date Objects: var today = new Date(); var independenceDay = new Date(1776, 6, 4); store the current date and time store the specific date 7 / 4 / 1776

12. 12 Date Class (cont’d.) The date and time in a Date object is not updated over time like a clock –Date object contains the static (unchanging) date and time –Set at the moment the JavaScript code instantiates the object We can manipulate the date and time using the Date class methods

13. 13 Table 6-3 Commonly used methods of the Date class (continues) Date Class (cont’d.)

14. 14 Table 6-3 Commonly used methods of the Date class Date Class (cont’d.)

15. Web Console Exercise #1 Enter the following statements in Web Console: (not including comments) var today = new Date() today.getDay() // numeric value of day [0-6] today.getMonth() // numeric value of month [0-11] today.getFullYear() today.toString() var mill = new Date(2000,0,1) // Jan 1, 2000 mill.toString() 15 Question: Create a new Date object called bday that contains your birthday

16. 16 var today = new Date(); var curDay = today.getDay(); if (curDay == 0) document.write("Today is Sunday."); else if (curDay == 1) document.write("Today is Monday."); else if (curDay == 2) document.write("Today is Tuesday."); else if (curDay == 3) document.write("Today is Wednesday."); else if (curDay == 4) document.write("Today is Thursday."); else if (curDay == 5) document.write("Today is Friday."); else if (curDay == 6) document.write("Today is Saturday."); Date Class Example 1

17. 17 var today = new Date(); var months = new Array(); months[0] = "January"; months[1] = "February"; months[2] = "March"; months[3] = "April"; months[4] = "May"; months[5] = "June"; months[6] = "July"; months[7] = "August"; months[8] = "September"; months[9] = "October"; months[10] = "November"; months[11] = "December"; var m = today.getMonth(); var monthName = months[ m ]; document.write(" The current month is " + monthName + ". "); Date Class Example 2 include an array named months containing 12 elements assigned full text names of the months

18. 18 var today = new Date(); var mins = today.getMinutes(); var secs = today.getSeconds(); document.write(" It is " + mins + " minutes and " + secs + " seconds passed the hour. "); Date Class Example 3 Print out the minutes and seconds passed the hour:

19. In Class Exercise (A) Create a new JavaScript scriplet that performs the following tasks:  Create a Date object containing the current date and time  Display one of the following images based on the day of the week 19 0d0.jpg4d4.jpg 1d1.jpg5d5.jpg 2d2.jpg6d6.jpg 3d3.jpg

20. In Class Exercise (B) Create a new HTML form that allows the user to select a date value 20 Create a function createDate() that gets the input from the user and creates a Date object Display the Date object in a popup window Save this page as dateForm.html

21. Date Arithmetic We can find determine the difference between two dates by subtracting one date from another Result will be represented in milliseconds To convert the result into days, months or years, we must perform division to get the desired value type (months, years, days) 21 var x = new Date( 1990, 0, 1); var y = new Date( 1992, 3, 10); var diff = y - x; var days = Math.floor( diff / ( 1000 * 60 * 60 * 24 ) ); var years = Math.floor( days / 365 ); document.write(" Difference " + days + " days. "); document.write(" Difference " + years + " years. ");

22. 22 Manipulating Numbers with the Number Class Number class –Contains methods for manipulating numbers and properties containing static values –Can append the name of any Number class method or property to the name of an existing variable containing a numeric value

23. 23 Number Class (cont’d.) Using Number class methods Table 6-4 Number class methods

24. 24 Manipulating Numbers with the Number Class (cont’d.) The primary reason for using any of the “to” methods is to convert a number to a string value with a specific number of decimal places –toFixed() method Converts a number to a string with a specified number of decimal places Most useful Number class method Example: var total = salesTotal.toFixed(2);

25. Web Console Exercise #2 Enter the following statements in Web Console: (not including comments) var x = 525.225 x x.toFixed(3) // convert to string with fixed # of decimals x.toFixed(1) x.toFixed(0) x (5.888).toFixed(1) (8.75 + 5).toFixed(0) 25

26. 26 Performing Math Functions with the Math Class Math class –Methods and properties for mathematical calculations Cannot instantiate a Math object using a statement such as: var mathCalc = new Math() –Instead, use the Math object and one of its methods or properties directly in the code Example: var curNumber = 144; squareRoot = Math.sqrt(curNumber); // returns '12' document.write("The square root of " + curNumber + " is " + squareRoot);

27. 27 Math Class (cont’d.)

28. 28 Table 6-7 Math class properties Math Class (cont’d.)

29. 29 Math Class (cont’d.) Example: –Use the Math.PI property to calculate the area of a circle based on its radius –Also use the Math.round() method to round the value returned to the nearest whole number var radius = 25; var area = Math.round( Math.PI * radius * radius ); // return 1963 document.write("A circle with a radius of " + radius + " has an area of " + area);

30. Web Console Exercise #3 Enter the following statements in Web Console: (not including comments) Math.abs( -20 ) var z = -25; Math.abs( z ) Math.ceil( 10.2 ); Math.floor(10.7 ); Math.max(20, 5) Math.min(12, 6) Math.random() Math.round(582.56) // round to nearest integer var x = 70; Math.max( z, x ) 30

31. Math Class Example 31 var x = Math.ceil( Math.random() * 6 ); document.write("random num between 1 and 6: "); document.write( x ); Generate a random number between 1 and 6

32. Review Exercise #1 Generate a page with one button element that rolls a die and displays a popup message 32

33. Review Exercise #2 Update the webpage (dateForm.html) created earlier as below: 33 1.Add the following labels and textboxes for Age In Days and Age In Years 2.Update the createDate() function to calculate the Age In Days and Age in Years 3.Output the values to the corresponding textbox