01 | 2017/03 |  03

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

jQueryに学ぶJavascriptの基礎(4) インスタンスオブジェクトからの値の取得について upon ver 1.3.2──jQuery解読(20)

このエントリイの改訂履歴
  • 初稿:2007/12/3
  • インスタンスオブジェクトについての記述を大幅改訂:2009/3/5

jQuery解読作業を進めるにつれ、Javascriptの基礎が如何に分かっていないか、ほぼ毎日のように痛感させられます。その意味ではjQuery解読は無謀なチャレンジであった訳ですが、それでも誤謬を犯すマイナスを埋め合わせて遙かに余りあるプラスがあることも毎日自覚されるので、恥を忍んで引き続きjQuery解読を進めるつもりでいます。

しかし、基礎の基礎が余りに分かってない自分に嫌気が指してきてしまい、匙を投げ出すような醜態は演じたくありません。そこで、自戒を込めて敢えて誤解していたこと、理解していなかったこと、不十分な理解に留まっていたことなどについて、つらつらと記述していきたい、と思います。

for in object loop と継承プロパティ及び固有プロパティ

先に( this 活用──jQuery解読(17) )、for in loop でインスタンスオブジェクトのプロパティを総覧しました。ここでその総覧について考えてみます。

この loop ではオブジェクトが持つ全てのプロパティを列挙出来る訳ではありません(※)が、プロトタイプオブジェクトからの継承プロパティが列挙対象となることを再確認出来ました。しかしそれさえも ECMAScript による仕様ではプロトタイプチェーンは for in loop の調査対象外、とされているようですから、いずれはこの loop でプロトタイプから継承されたプロパティも取得できなくなるかも知れません。偶々 FireFox2 や IE7 では取得できますが・・・。

※ コードによって追加されたプロパティは列挙対象となるが、組み込みオブジェクトにあらかじめ定義されたプロパティ(例えば配列のメソッドなど)は通常は列挙できない。───Javascriptクィックリファランスp.101)。

さて、ここで何が問題かというと、$("a").size() あるいは $("a").length を実行すると当該サイトのリンクタグの個数が取得できますが、この場合の要素数に何故、プロトタイププロパティ=継承プロパティが含まれないのだろうか、とふと疑問に思ったのです。しかし、継承プロパティは配列として、あるいは配列のようなプロパティとして格納されている訳ではないから、当然数えられないはずだ、と直ぐに納得しました。

そして、そもそも継承プロパティは、恰もインスタンスオブジェクトのプロパティであるかのように見えているだけ(『Javascript第5版p.154』)で、決してコピーされている訳ではないことを、改めて思い起こしました。継承プロパティはインスタンスオブジェクトの固有のプロパティではないことを、期せずして再確認した次第です。

jQuery.js は何故「配列のような」形式で取得値をインスタンスオブジェクトに返すのか?

次に、 jQuery.js が処理値をインスタンスオブジェクトに「配列のような」形式で返すことの意味を考えてみました。

そしてその理由は、逆の場合を想定して直ぐに明らかになりました。つまり、配列のようにしないで通常のオブジェクトのプロパティとして返すと仮定すると、length で数を数えることが出来ませんし、 script によって、prototype オブジェクトからの継承プロパティと、返値であるプロパティを区別することも出来ないと思われます。

つまり、スクリプトによって取得したノード(値を含む)をスクリプトで自在に扱うためには、それを配列のようなプロパティで取り込むことが必要不可欠である、ということになります。

ここに 「 配列のようなプロパティ 」 とは、0:DOMNode1, 1:DOMNode2, 3:DOMNode3, ・・・・・, N:DOMNodeN のように、0から始まる整数値をプロパティ名とし、DOMノードをプロパティ値とするプロパティのことです。

愚問のお陰で、改めて配列のようなプロパティの重要性に思いを馳せました。

jQuery()関数を呼び出した直後のインスタンスオブジェクトの状態

さて、主題です。「インスタンスオブジェクトからどの様にしてその値を取り出すか」ですが、ユーザーから呼び出された直後のインスタンスオブジェクトの状態は下図のようになっています。インスタンス=this は空の配列オブジェクトとして「出発」します。

jQuery()呼び出し直後の「 this 」

左図は $("p") によって jQuery() 関数を呼び出した直後の、init() メソッド内の変数の状態を示しています。

this(つまりインスタンスオブジェクト)はオブジェクトとして定義され、変数 selector には文字 p が、その他の変数にはまだ値が付与されていません。

jQuery()呼び出し直後の「 this 」その詳細

左図は 当該 this のプロパティを見たものです。

this=インスタンスオブジェクトは、既に prototype オブジェクトから継承された沢山のプロパティをもっていることが分かります。

この後の jQuery.js 内における処理の結果、ユーザーが指示し目的とした要素ノードが配列のようなプロパティとしてインスタンスオブジェクトに返され、これが return 連鎖を通じて最終的にユーザーが入力したAPIに返されます。その最終結果を変数 t = jQuery("p") で受け取り、その t を Firebug で表示した内容は以下の画像となります。

なお、ここに表示した一連の画像は Firebug 1.3.3 で表示された情報です。

var t = window.t = jQuery('p') の結果詳細

直上の画像でよく分かるように、jQuery("p") の結果、目的のノード( テスト用に使用したローカルサイトの p タグの一覧 )が、配列のようなプロパティ { 0:p#top, 1:p#top2, ..... 9:p } として取得されています。

インスタンスオブジェクトの値を取り出す方法

以上のように、jQuery("・・・") の返値であるインスタンスオブジェクトは、配列のようなプロパティも有するオブジェクトですから、オブジェクトからプロパティを取り出す一般的方法によって、DOM Nodes を取り出すことが出来ます。

さて、jQuery,js のコード実行過程においては、 this[num] ( num は 0,1,2,・・・であり、コード進行過程の当該段階における DOM Node 取得要素数マイナス 1 まで有効 ) によって、インスタンスから DOM ノードが取り出されるシーンがいくつもあります。

つまり、jQuery("・・・")[n-1}とすれば、目的のノード群の中から n 番目のそれを取得できます。

ところで、配列のようなプロパティに格納されているプロパティ値が DOM ノードであることに注意を払う必要があります。

例えば、配列要素を文字列表示で一覧する jQuery("element'sName").join() メソッドではエラーとなります。DOMノードは直接文字列に変換できないからでしょう。また $("p").toString()では"[object Object]"しか返されません。

$("p") を例に取れば、$("p")[num] で、オブジェクトに格納されている取得対象ノードが取得出来ますが、この場合、例えば FireFox では [object HTMLParagraphElement]と、FireBugでは <p> と表示されます。

具体的にノードの「値」を表示させたい場合には、まずオーソドックスに行うならば、

$("p")[0].nodeName、$("p")[0].firstChild

等の DOM プロパティを利用することにより、タグ名や内容等を取得することになります。

しかしこれでは折角 jQuery を使ってコードを簡略化する意味がありません。そこで、jQuery() ではインスタンスオブジェクトを取り出す様々な方法が提供されています。まず単純に DOM Nodes を取り出すメソッドは get() です。

例えば $("p").get() によって jQuery("p") インスタンスを取り出すことが出来ます。但し配列として、と言う制限付きであり、かつその要素は String ではないので alert("$('p').get()") などで表示させることは出来ません。

その場合でノードの内容を見ようとすれば、例えば $("p").eq(n-1).text() により、n 番目の p タグ内の文字情報を取得することが出来ます。

 

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/592-3531e737

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

200712031806