Javascript：役に立つオブジェクトの使用例

・　はじめに
　Javascriptを解説した書籍やサイトには必ず「オブジェクト」の項目があります。 Javascriptでのオブジェクト指向、プロパティーやメソッドの意味、プロトタイプ型の説明、コンストラクタやインスタンスの作り方、などが丁寧に書かれています。 その中に使用例として必ず登場するのが「名簿を作る」です。人間クラスを作り、名前をプロパティーにして、「私は〜です。」と言わせるメソッドを作るサンプルです。
　ホームページ作りに興味を持ち、HTML→スタイルシート→Javascriptと勉強を進めてきた方にとって、「ホームページで名簿を作って、何に使うの？」が、率直な感想だと思います。 実は、このサンプルは、貴方の為のものではないんです。 名簿などのデータベースを作るサンプルは、Javascript以外のオブジェクト指向プログラム言語を使ってきた人々には、非常に分かり易い説明なんです。

・　役に立つ使用例
　そこで、ホームページ制作に役に立つ使用例を作りました。 下のサンプルは、tableの中に背景色がグレーのtdが二つあり、その中に色の付いたBOX（divタグ）が入っています。 BOXには「koboBox1」「koboBox2」のIDが付けてあります。 マウスをBOXに重ねると大きさがアニメーションで変化します。マウスを離すと元に戻ります。アニメーションはBOXごとに速さや最終サイズが異なります。また、BOXをクリックすると色が変わり、再度クリックすると元に戻ります。
　ホームページ上の、リンクボタンのアニメーション化、中にリンクを入れてプルダウンメニューを作る、触ると変化する写真、などのボックス要素を別々に変化させる場面で使えると思います。


・　使用例の作り方
　上記サンプルには色々な作り方がありますが、その内の幾つかを取り上げます。 ただし、Javascriptの文法やオブジェクトの記述方法は一切省略します。これらは他のサイトや解説書籍を参照してください。

  1. BOXを引数にした関数で作る
  2. プロパティーとメソッドをBOXに直接設定する
  3. コンストラクタとインスタンスとメソッドチェーン化
  4. jQuery風に$関数を使いメソッドチェーン化する


　以上のページ内のサンプルソースは、自由に改良して、自由にお使い頂いてかまいません。ただし、使用方法や改良に関するご質問に対するお答えは、有料にさせていただきます。




戻る



All Rights Reserved. Copyright (C) 2002- Miyake_kobo.