演習: JavaScript を使用してオブジェクトを作成する

JavaScript を使用してオブジェクトを作成する方法には、何通りかの方法があります。以下の演習では、それらの方法を用いてオブジェクトを作成する方法と、プロパティーとメソッドを追加する方法を学びます。

Kris Hadlock, Web Developer/Designer, Studio Sedition

Photo of Kris HadlockKris Hadlock は、1996年から契約 Web 開発者および設計者として、SPIN Magazine、IKEA、United Airlines、JP Morgan Chase、GoDaddy Software、Fire Mountain Gems などの企業のプロジェクトを手掛けてきました。著書には『Ajax for Web Application Developers』(Sams)、『The ActionScript Migration Guide』(New Riders) があります。また、コラムニストおよびライターとしても、Peachpit.com、InformIT.com、Practical Web Design magazine などの数々の Web サイトや設計関連の雑誌で活躍しています。彼は、フォームと関数の融合を専門とする Web 設計およびソフトウェア開発会社、www.studiosedition.com の創始者でもあります。



2011年 12月 02日

この連載について

これらの演習と解答は、developerWorks のナレッジ・パス「A comprehensive guide to JavaScript」の一部として公開された記事「オブジェクト指向の JavaScript コードを作成する」を補完するものです。以下の演習に取りかかる前に、「オブジェクト指向の JavaScript コードを作成する」を読んでおくことをお勧めします。

この記事の演習では以下の内容を取り上げます。

  • Object 関数を使用してオブジェクトを作成する
  • リテラル表記を使用してオブジェクトを作成する
  • オブジェクト・コンストラクターとプロトタイプを使用してオブジェクトを作成する
  • 各オブジェクト・タイプにプロパティーを追加する
  • 各オブジェクト・タイプにメソッドを追加する

この記事で説明する演習を実際に行うためには、HTML エディターと、作成した JavaScript をテストするためのインターネット接続または localhost 環境が必要です。

演習 1: Object 関数を使用してオブジェクトを作成する

Object 関数を使用すると、オブジェクトの新しいインスタンスを簡単に作成することができます。オブジェクトを作成した後は、同じように容易に新しいプロパティーやメソッドを定義することができます。そこで、以下のタスクを実行してください。

  1. Object 関数を使用してオブジェクトを作成する
  2. 新しいオブジェクトにプロパティーを追加する
  3. 新しいオブジェクトにメソッドを追加する

演習 2: リテラル表記を使用してオブジェクトを作成する

リテラル表記は連想配列と呼ばれることもあり、JavaScript を使用してオブジェクトを作成するための手軽な方法です。以下のタスクを実行してください。

  1. リテラル表記を使用してオブジェクトを作成する
  2. 新しいオブジェクトにプロパティーを追加する
  3. 新しいオブジェクトにメソッドを追加する

演習 3: オブジェクト・コンストラクターとプロトタイプを使用してオブジェクトを作成する

JavaScript でオブジェクトを作成する方法として最も再利用が容易な方法は、オブジェクト・コンストラクターとプロトタイプを使用する方法です。この方法では非常に柔軟にオブジェクトを作成することができ、オブジェクトのインスタンスを 1 つのみならず、いくつでも作成することができます。以下のタスクを実行してください。

  1. オブジェクト・コンストラクターとプロトタイプを使用してオブジェクトを作成する
  2. 各オブジェクト・タイプにプロパティーを追加する
  3. 各オブジェクト・タイプにメソッドを追加する
  4. オブジェクトをインスタンス化する

演習の解答

このリンク先の解答を見ながら皆さんの演習の結果をチェックしてください。

参考文献

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=776900
ArticleTitle=演習: JavaScript を使用してオブジェクトを作成する
publish-date=12022011