1 / 33

Using Object-Oriented JavaScript

Using Object-Oriented JavaScript. CST 200- JavaScript 4 – 7 - 13. Objectives. In this chapter, you will: Study object-oriented programming Work with the Date , Number , and Math objects. Object Oriented Programming. Object-Oriented Programs model the world as a collection of objects

zachery-ramos
Télécharger la présentation

Using Object-Oriented JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Using Object-Oriented JavaScript CST 200- JavaScript 4 – 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

  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

  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

  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 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(); varindependenceDay = 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. Date Class (cont’d.) Table 6-3 Commonly used methods of the Date class (continues)

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

  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() Question: Create a new Date object called bday that contains your birthday

  16. Date Class Example 1 • <script type="text/javascript"> • var today = new Date(); • varcurDay = 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>

  17. Date Class Example 2 • include an array named months containing 12 elements assigned full text names of the months • <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(); • varmonthName = months[ m ]; • document.write("<p>The current month is " • + monthName + ".</p>"); • </script>

  18. Date Class Example 3 • Print out the minutes and seconds passed the hour: • <script type="text/javascript"> • var today = new Date(); • varmins = today.getMinutes(); • varsecs = today.getSeconds(); • document.write("<p>It is " + mins + " minutes and " • + secs + " seconds passed the hour.</p>"); • </script>

  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

  20. In Class Exercise (B) • Create a new HTML form that allows the user to select a date value 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) • <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);

  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)

  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: varcurNumber = 144; squareRoot = Math.sqrt(curNumber); // returns '12' document.write("The square root of " + curNumber + " is " + squareRoot);

  27. Math Class (cont’d.)

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

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

  31. Math Class Example <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

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

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

More Related