1 / 45

Object-Oriented Java Script

Object-Oriented JavaScript. Object-Oriented Java Script. Objectives. Study object-oriented programming Learn about the built-in JavaScript objects Work with the Array, Date, Math, and Number objects Define custom JavaScript objects. Introduction to Object-Oriented Programming.

Download Presentation

Object-Oriented Java Script

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. Object-Oriented JavaScript Object-Oriented Java Script

  2. Objectives • Study object-oriented programming • Learn about the built-in JavaScript objects • Work with the Array, Date, Math, and Number objects • Define custom JavaScript objects JavaScript

  3. Introduction to Object-Oriented Programming • Object-oriented programming allows you to reuse code without having to copy or recreate it • You already have some experience with object-oriented programming after working with browser objects(window, Document, Form objects) JavaScript

  4. Reusable Software • Object-oriented programming (OOP): • Refers to the creation of reusable software objects that can be easily incorporated into multiple programs • Object: • Specifically refers to programming code and data that can be treated as an individual unit or component JavaScript

  5. Reusable Software (Cont.) • Data: • Refers to information contained within variables or other types of storage structures • Objects can range from simple controls such as a button, to entire programs such as a database application • In a retail sales program, you could refer to all the code that calculates the sales total as a single object. • You could reuse the object over and over again in the same program by typing the object name. JavaScript

  6. Reusable Software (Cont.) • Popular object-oriented programming languages include C++, Java, and Visual Basic • Using any of these or other object-oriented languages: • Programmers can create objects themselves or use objects created by other programmers JavaScript

  7. Encapsulation • Objects are encapsulated: • All code and required data are containedwithin the object itself • Encapsulation: • Places code inside what programmers like to call a “black box” • When an object is encapsulated, you cannot see “inside” it—all internal workings are hidden JavaScript

  8. Encapsulation (Cont.) • The code (methods and statements) and data (variables and constants) contained in an encapsulated object are accessed through an interface • Interface: • Represents elements required for a source program to communicate with an object • Interface elements required to access a Payroll object might be a method named calcNetPay() JavaScript

  9. Encapsulation (Cont.) • The principal of information hidingstates that: • Any class members that other programmers do not need to access or know about should be hidden • Think of a calculator as an object, the interface is the keypad. • You do not need to know or see the inner workings of the calculator to operate it JavaScript

  10. Encapsulation (Cont.) • Encapsulation prevents other programmers from: • Accidentally introducing a bug into a program • Stealing the code and claiming it as their own JavaScript

  11. Encapsulation (Cont.) JavaScript

  12. Classes • In object-oriented programming: • Code, methods, attributes, and other information that make up an object are organized into classes • Class: • Template, or blueprint, that serves as the basis for new objects • Instance: • Object that has been created from an existing class • Called instantiatingthe object JavaScript

  13. Classes (Cont.) • A particular instance of an object inherits its methods and properties from a class: • It takes on the characteristics of the class on which it is based • For Example Consider an object called BankAccount that contains methods and properties that you might use to record transactions associated with a checking or savings account • The BankAccount object is created from a BankAccount class • To use the BankAccount class you create an instance of the class • A particular instance of an object inherits its methods and properties from a class • The BankAccout object inherits all its methods and properties from the BankAccout class JavaScript

  14. Classes (Cont.) • Class names in traditional object-oriented programming usually begin with an uppercase letter. This convention is also followed in JavaScript JavaScript

  15. Built-in JavaScript Classes JavaScript

  16. Instantiating an Object • You can use some of the built-in JavaScript objects directly in your code • document.write(“The value of PI is “ + Math.PI); • Other objects require you to instantiate a new object • var studentList = new Array() JavaScript

  17. Garbage Collection • When you instantiate a new object, you are reserving memory • Refers to cleaning up, or reclaiming, memory that is reserved by a program • JavaScript knows when a program no longer needs a variable or object • Automatically cleans up the memory JavaScript

  18. Array Class • The Array classcreates new array objects • When creating an array using the Array() constructor, an object from the Array class is instantiated • In addition to the Array() constructor, the Array class contains: • Methods and properties for manipulating the elements of an array JavaScript

  19. Array Class Methods JavaScript

  20. The Length Property • Returns the number of elements in an array • You append the length property to the name of the array you want to sort using the following syntax: array_name.length; JavaScript

  21. Date Class • Contains methods and properties for manipulating the date and time • The Date object allows you to use the current date and time in your JavaScript programs • You create a new instance of the Date class using the syntax var dateObject = new Date(); JavaScript

  22. Date Class (Cont.) JavaScript

  23. Number Class • Contains methods for manipulating numbers and properties that contain static values representing some of the numeric limitations in the JavaScript language JavaScript

  24. Number Class Methods JavaScript

  25. Number Class Properties JavaScript

  26. Math Class • The Math classcontains methods and properties for performing mathematical calculations in your programs JavaScript

  27. Math Class Methods JavaScript

  28. Math Class Methods (Cont.) JavaScript

  29. Math Class Properties JavaScript

  30. Custom JavaScript Objects • JavaScript is not a true object-oriented programming language: • Base objects in your programs on built-in JavaScript classes such as the Array and Date objects • However, you cannot create your own classes in JavaScript • You can define your own custom objects using a constructor function JavaScript

  31. Custom JavaScript Objects • A Constructor function used as the basis for a custom object • JavaScript objects inherit all the variables and statements of the constructor function on which they are based • Any JavaScript function can serve as a constructor JavaScript

  32. Custom JavaScript Objects • The following code defines a function named candyOrder() with three paramaters that can serve as a construction function. function candyOrder(customer, type, boxes){ …. } var valentinesDay = new candyOrder(); JavaScript

  33. Properties • To add a property to a constructor function: • You must add a statement to the function body that uses the this keyword with the following syntax: • this.property_name = value; • In the case of a custom JavaScript object, the this keyword refers to the object that calls the constructor function JavaScript

  34. Properties <script type="text/javascript"> <!-- function CandyOrder(customer, candy, boxes) { this.customerName = customer; this.candyType = candy; this.numBoxes = boxes; } var valentinesDay = new CandyOrder(); valentinesDay.customerName = "Don"; valentinesDay.candyType = "chocolate"; valentinesDay.numBoxes = 5; document.write("<p>Customer name: " + valentinesDay.customerName); document.write("<br />Candy Type: " + valentinesDay.candyType); document.write("<br />Quantity: " + valentinesDay.numBoxes + " boxes</p>"); //--> </script> JavaScript

  35. Methods • You can create a function that will be used as an object method: • By referring to any object properties using the this reference JavaScript

  36. Methods <script type="text/javascript"> <!-- function CandyOrder(customer, candy, boxes) { this.customerName = customer; this.candyType = candy; this.numBoxes = boxes; this.showOrder = displayCandyOrder; } function displayCandyOrder() { document.write("<p>Customer name: " + this.customerName); document.write("<br />Candy Type: " + this.candyType); document.write("<br />Quantity: " + this.numBoxes + " boxes</p>"); } var valentinesDay = new CandyOrder("Don", "Chocolate", 5); var birthday = new CandyOrder("Ima", "Caramel", 2); valentinesDay.showOrder(); birthday.showOrder(); //--> </script> JavaScript

  37. The prototype Property • The prototype propertyis a built-in property: • Specifies the constructor from which an object was extended • When you instantiate a new object named valentinesDay based on the CandyOrder constructor function the new object includes the • customerName • candyType • numBoxes • Properties Along with the showOrder() method JavaScript

  38. The prototype Property • After instantiating a new object you can assign additional properties to the object, using a period. • var birthday = new CandyOrder(“Don”, “chocolate”, 5); • birthday.orderDate = “June 1, 2005”; • When you add a new property this way, the property is only available to the specific object birthday • The property is not available to the constructor function or other objects instantiated from the same constructor function. JavaScript

  39. The prototype Property • If you use the prototype property with the name of the constructor function, any new properties you create will also be available to the constructor function and any object it extends to • var birthday = new CandyOrder(“Don”, “chocolate”, 5); • CandyOrder.prototype.orderDate = “June 1, 2005”; • In this case, all CandyOrder objects would have an order date of June 1, 2005 • Because not all orders will take place on June 1, 2005 • CandyOrder.prototype.orderDate = “”; // assign empty value • //then assign the order date to each individual CandyOrder object JavaScript

  40. <script type="text/javascript"> <!-- function CandyOrder(customer, candy, boxes) { this.customerName = customer; this.candyType = candy; this.numBoxes = boxes; this.showOrder = displayCandyOrder; } function displayCandyOrder() { document.write("<p>Customer name: " + this.customerName); document.write("<br />Candy Type: " + this.candyType); document.write("<br />Quantity: " + this.numBoxes + " boxes"); document.write("<br />Order date: " + this.orderDate + "</p>" ); } var valentinesDay = new CandyOrder("Don", "Chocolate", 5); var birthday = new CandyOrder("Ima", "Caramel", 2); CandyOrder.prototype.orderDate = ""; // assign empty value valentinesDay.showOrder(); birthday.showOrder(); //--> </script> JavaScript

  41. <script type="text/javascript"> <!-- function CandyOrder(customer, candy, boxes) { this.customerName = customer; this.candyType = candy; this.numBoxes = boxes; this.showOrder = displayCandyOrder; } function displayCandyOrder() { document.write("<p>Customer name: " + this.customerName); document.write("<br />Candy Type: " + this.candyType); document.write("<br />Quantity: " + this.numBoxes + " boxes"); document.write("<br />Order date: " + this.orderDate + "</p>" ); } var valentinesDay = new CandyOrder("Don", "Chocolate", 5); var birthday = new CandyOrder("Ima", "Caramel", 2); CandyOrder.prototype.orderDate = ""; // assign empty value valentinesDay.orderDate = " June 1, 2005 "; valentinesDay.showOrder(); birthday.showOrder(); //--> </script> JavaScript

  42. Chapter Summary • Object-Oriented programming (OOP): • Refers to the creation of reusable software objects that can be easily incorporated into another program • Components: • Reusable software objects • Object: • Programming code and data that can be treated as an individual unit or component JavaScript

  43. Chapter Summary (cont.) • Objects are encapsulated: • All code and required data are contained within the object itself • Interface : • Represents elements required for a source program to communicate with an object • The principal of information hiding: • States that any class members that other programmers do not need to access or know about should be hidden JavaScript

  44. Chapter Summary (cont.) • In object-oriented programming: • Code, methods, attributes, and other information that make up an object are organized using classes • An instance: • Object created from an existing class • An object inherits, or takes on, the characteristics of the class on which it is based • The Date class: • Contains methods and properties for manipulating the date and time JavaScript

  45. Chapter Summary (cont.) • The Number class: • Contains methods for manipulating numbers and properties that • The this keyword: • Refers to the current object • The prototype property: • Built-in property that specifies the constructor from which an object was extended JavaScript

More Related