Practice: Creating objects with JavaScript

There are several methods for creating objects using JavaScript. These exercises teach you how to create objects using those methods as well as how to add properties and methods.

Kris Hadlock, Web Developer/Designer, Studio Sedition

Photo of Kris HadlockKris Hadlock has been a contract web developer and designer since 1996. He has worked on projects for companies such as SPIN Magazine, IKEA, United Airlines, JP Morgan Chase, GoDaddy Software, and Fire Mountain Gems. He is the author of Ajax for Web Application Developers (Sams) and The ActionScript Migration Guide (New Riders) as well as a featured columnist and writer for numerous websites and design magazines, including Peachpit.com, InformIT.com, and Practical Web Design magazine. Kris is also the founder of www.studiosedition.com, a web design and software development studio specializing in fusion of form and function.



01 November 2011

Also available in Japanese

About this article

These exercises and solutions supplement the developerWorks article "Get started with object-oriented JavaScript code," which is part of the developerWorks knowledge path "A comprehensive guide to JavaScript." You may want to read the "Get started with object-oriented JavaScript code" article before working through these exercises.

These exercises give you practice in:

  • Creating objects using the Object function
  • Creating objects using literal notation
  • Creating objects using the object constructor and prototypes
  • Adding properties to each object type
  • Adding methods to each object type

To work through the exercises in this article, you should have an HTML editor and a working Internet connection or localhost environment in which to test your JavaScript.

Exercise 1: Create objects using the Object function

The Object function provides a simple way to create a new instance of an object. After an object is created, it's just as easy to define new properties and methods. To do so, perform these tasks:

  1. Create an object using the Object function.
  2. Add a property to the new object.
  3. Add a method to the new object.

Exercise 2: Create objects using literal notation

Literal notation, sometimes called associative arrays, provides a shorthand way to create objects using JavaScript. Perform these steps:

  1. Create an object using literal notation.
  2. Add a property to the new object.
  3. Add a method to the new object.

Exercise 3: Create objects using the object constructor and prototypes

The most reusable way to create objects in JavaScript is by using the object constructor paired with prototypes. This method of creating objects is completely flexible, allowing you to create unlimited instances of an object rather than only one. Perform these steps:

  1. Create an object using the object constructor and prototypes.
  2. Add a property to the new object.
  3. Add a method to the new object.
  4. Instantiate the object.

Exercise solutions

Follow these solution steps to check your work.

Resources

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Web development on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Web development
ArticleID=768094
ArticleTitle=Practice: Creating objects with JavaScript
publish-date=11012011