The first time you sign into developerWorks, a profile is created for you. Select information in your developerWorks profile is displayed to the public, but you may edit the information at any time. Your first name, last name (unless you choose to hide them), and display name will accompany the content that you post.

All information submitted is secure.

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.

All information submitted is secure.

My developerWorks:

My notifications:

Sign out

Select a language:

Practice: Creating objects with JavaScript

Kris Hadlock (kris@krishadlock.com), Web Developer/Designer, Studio Sedition

Kris 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.

Summary: 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.

Tag this!

Date: 01 Nov 2011
Level: Intermediate
PDF: A4 and Letter (122KB | 21 pages)Get Adobe® Reader®
Also available in: Japanese

Activity: 19353 views
Comments:

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:

Create an object using the Object function.
Add a property to the new object.
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:

Create an object using literal notation.
Add a property to the new object.
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:

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

Exercise solutions

Follow these solution steps to check your work.

Resources

To learn more about creating custom objects with JavaScript, read "Get started with object-oriented JavaScript code" (developerWorks, April 2011).
To learn about JavaScript's existing built-in objects, read "Understanding built-in objects in JavaScript" (developerWorks, August 2011).
To learn more about the fundamentals of the JavaScript language, check out "Get started with the JavaScript language, Part 1: JavaScript language fundamentals" (developerWorks, April 2011) and "Get started with the JavaScript language, Part 2: Events, cookies, timing, and more" (developerWorks, August 2011).
Stay current with developerWorks technical events and webcasts focused on a variety of IBM products and IT industry topics.
Follow developerWorks on Twitter.

About the author

Close [x]

Report abuse help

Report abuse

Thank you. This entry has been flagged for moderator attention.

Close [x]

Report abuse help

Report abuse

Report abuse submission failed. Please try again later.

Close [x]

developerWorks: Sign in

The first time you sign into developerWorks, a profile is created for you. Select information in your developerWorks profile is displayed to the public, but you may edit the information at any time. Your first name, last name (unless you choose to hide them), and display name will accompany the content that you post.

All information submitted is secure.

Close [x]

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.

All information submitted is secure.

Rate this article

Comments

Close [x]

Help: Update or add to My dW interests

What's this?

This little timesaver lets you update your My developerWorks profile with just one click! The general subject of this content (AIX and UNIX, Information Management, Lotus, Rational, Tivoli, WebSphere, Java, Linux, Open source, SOA and Web services, Web development, or XML) will be added to the interests section of your profile, if it's not there already. You only need to be logged in to My developerWorks.

And what's the point of adding your interests to your profile? That's how you find other users with the same interests as yours, and see what they're reading and contributing to the community. Your interests also help us recommend relevant developerWorks content to you.

View your My developerWorks profile

Return from help

Close [x]

Help: Remove from My dW interests

What's this?

Removing this interest does not alter your profile, but rather removes this piece of content from a list of all content for which you've indicated interest. In a future enhancement to My developerWorks, you'll be able to see a record of that content.

View your My developerWorks profile

Return from help

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