Using Object-Oriented JavaScript

CST 200- JavaScript4 – 7 - 13

2

Objectives

In this chapter, you will:

• Study object-oriented programming

• Work with the Date, Number, and Math objects

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

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

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

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

Using Built-In JavaScript Classes

8

Using the Date, Number, and Math Classes

• Three most commonly used JavaScript classes:– Date, Number, and Math

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

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

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

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

Table 6-3 Commonly used methods of the Date class (continues)

Date Class (cont’d.)

14

Table 6-3 Commonly used methods of the Date class

Date Class (cont’d.)

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

<script type="text/javascript">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.");</script>

Date Class Example 1

17

<script type="text/javascript">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("<p>The current month is "+ monthName + ".</p>");

</script>

Date Class Example 2• include an array named months containing 12

elements assigned full text names of the months

18

<script type="text/javascript">var today = new Date();var mins = today.getMinutes();var secs = today.getSeconds();

document.write("<p>It is " + mins + " minutes and " + secs + " seconds passed the hour.</p>");

</script>

Date Class Example 3

• Print out the minutes and seconds passed the hour:

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

0 d0.jpg 4 d4.jpg

1 d1.jpg 5 d5.jpg

2 d2.jpg 6 d6.jpg

3 d3.jpg

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

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

<script type="text/javascript">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("<p>Difference " + days + " days.</p>");document.write("<p>Difference " + years + " years.</p>");

</script>

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

Number Class (cont’d.)

• Using Number class methods

Table 6-4 Number class methods

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

Web Console Exercise #2

• Enter the following statements in Web Console: (not including comments)

var x = 525.225xx.toFixed(3) // convert to string with fixed # of decimalsx.toFixed(1)x.toFixed(0)x(5.888).toFixed(1)(8.75 + 5).toFixed(0)

25

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

Math Class (cont’d.)

28

Table 6-7 Math class properties

Math Class (cont’d.)

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 1963document.write("A circle with a radius of " + radius

+ " has an area of " + area);

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.random()Math.round(582.56) // round to nearest integervar x = 70;Math.max( z , x )

30

Math Class Example

31

<script type="text/javascript" > var x = Math.ceil( Math.random() * 6 ); document.write("random num between 1 and 6: "); document.write( x );

</script>

Generate a random number between 1 and 6

Review Exercise #1

Generate a page with one button element that rolls a die and displays a popup message

32

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