Jump to content

JavaScript Programming/Objects

Add links
From Wikiversity
JavaScript Programming
  1. Introduction
  2. Variables and Expressions
  3. Functions
  4. Events
  5. Conditions
  6. While Loops
  7. For Loops
  8. Arrays
  9. Date and Time
  10. Objects
  11. DOM and BOM
  12. Dynamic HTML
  13. Forms and Security
  14. AJAX and JSON
  15. Libraries and Frameworks
  16. Node.js REST API
Download Learning Guide

This lesson introduces JavaScript objects.

Objectives and Skills

[edit | edit source]

Objectives and skills for this lesson include:[1]

  • Complete and debug code that uses objects
    • Properties; methods; instantiation; Date object; retrieve date and time parts; localize date format (MM/DD vs DD/MM); add and subtract dates

Readings

[edit | edit source]
  1. Wikipedia: Associative array
  2. Wikibooks: JavaScript/Objects

Multimedia

[edit | edit source]
  1. YouTube: JavaScript Tutorial for Beginners - 18 - Objects
  2. YouTube: JavaScript Tutorial for Beginners - 19 - Objects Part 2
  3. YouTube: JavaScript Tutorial for Beginners - 20 - Objects Part 3
  4. YouTube: JavaScript Tutorial for Beginners - 21 - Objects Part 4
  5. YouTube: JavaScript Tutorial for Beginners - 22 - String Object
  6. YouTube: JavaScript Tutorial for Beginners - 51 - More on Objects
  7. YouTube: JavaScript this Keyword
  8. Javascript Objects Explained | Javascript Objects Tutorial

Examples

[edit | edit source]

Activities

[edit | edit source]

Complete the following activities using external JavaScript code. Apply JavaScript best practices, including comments, indentations, naming conventions, and constants. Use input elements for input and respond to input or change events, add buttons and respond to click events, or set a timer interval and respond to interval events. Use HTML elements for output. Use separate functions for each type of processing. Avoid global variables by passing parameters and returning results. Create test data to validate the accuracy of each program. Add comments at the top of the program and include references to any resources used.

  1. Create a web page that allows the user to enter book information for a bibliography. Include properties for title, author, year, publisher, city, and state. Respond to one or more user interface events to create an instance of a Book object and then display the book properties in APA format:[2]
         Last, F. M. (Year) Title. City, State: Publisher.
  2. Extend the program above by adding an APA method to your object that automatically formats the book for display. Use the APA method to format output, replacing the display code above.
  3. Extend the program above by adding an MLA method to your Book object that automatically formats the book for display. Display both APA and MLA formats for the book:[3]
        APA: Last, F. M. (Year) Title. City, State: Publisher.
        MLA: Last, First M. Title. Publisher, Year.
  4. Extend the program above, allowing the user to enter multiple book titles, one at a time. Add each book to an array of books. Display the full array in APA and MLA format after each object is added to the array.
  5. Extend the program above, allowing the user to choose either APA or MLA format, and display the selected format for each book. List the books in alphabetical order.

Lesson Summary

[edit | edit source]
  • An object is a set of properties or methods.[4] Each object holds related data.[5]
  • Objects are written in the name:value pair format.[4] Each pair must be separated by a comma. [5]
  • Object properties may be accessed using the dot notation or the bracket notation. [6]
  • Object properties can be a wide array of data types, such as arrays or even other objects.
  • In JavaScript, almost everything is an object. Only primitive date types, such as number, string, and Boolean, are not objects.[7]

Key Terms

[edit | edit source]
method
An action that an object can perform. A method is a function stored as a property, specific to that object. [8]
object
In JavaScript, almost "everything" is an object. Booleans, numbers, strings, dates, maths, regular expressions, arrays functions, and objects. All values, except primitive values, are objects.[9]
property
A property is a value associated with a JavaScript object.[10]

constructor

A constructor is a function that creates an object using the given inputs.

this
Refers to the owner of a function.[11]

See Also

[edit | edit source]

References

[edit | edit source]
  1. ↑ Microsoft: Exam 98-382 Introduction to Programming Using JavaScript
  2. ↑ EasyBib:APA Book Reference
  3. ↑ EasyBib:MLA Book Reference
  4. ↑ 4.0 4.1 W3Schoolsː JavaScript Objects
  5. ↑ 5.0 5.1 MDNː JavaScript object basics
  6. ↑ MDNː Property accessors
  7. ↑ https://www.w3schools.com/js/js_object_definition.asp
  8. ↑ https://www.w3schools.com/js/js_objects.asp
  9. ↑ https://www.w3schools.com/js/js_object_definition.asp
  10. ↑ https://www.geeksforgeeks.org/javascript-object-properties
  11. ↑ https://www.w3schools.com/js/js_objects.asp
Retrieved from "https://en.wikiversity.org/w/index.php?title=JavaScript_Programming/Objects&oldid=2627694"