09 | 2017/10 |  11

  1. 無料サーバー

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

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

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 

jQueryに学ぶJavascriptの基礎(2) this 活用──jQuery解読(17)

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

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

thisとは何か?

「this」──Javascriptを始めたばかりの素人は、直ぐに「thisって何?」と躓きます。しかも度々、あちこちで登場するので、どうも役割がいくつかあるらしいと気がつくと共に、混乱は深まります。

半可通のままでは駄目なことを自覚させられ、やむを得ず学習を深めると

  1. タグ属性に this と記述して(記述しなくても)そこから起動した関数内で this と記述すると当該タグを指し示すこと
  2. メソッドの場合に当該関数内で当該関数の起動元オブジェクトを指し示すこと
  3. new 演算子とコンストラクタ関数によって生成された所謂インスタンスの場合、当該コンストラクタ関数内(入れ子関数含む)や、プロトタイププロパティで設定するインスタンス関数内において、this が当該インスタンスを指し示すこと

などが次第に分かってきます。

▲ToTop

jQuery.jsで多用される this

この「this」が jQuery.js では多用されています。「これでもか!」というくらいあちこちに登場します。従って this をきちんと理解しないと、jQuery は殆ど理解出来ません。しかしそれは決して難解なことではありません。this の定義さえしっかり踏まえれば容易なことです。

jQuery.js コード内において、第一に、インスタンスメソッド内の、つまりプロトタイプオブジェクトのプロパティ内における this は、上の3番目の定義からインスタンスを指し示すことになります。第二に、クラスメソッド内の this は上の 2番目の定義からクラスを指し示します。

jQuery.jsにおけるクラスとは、そう機能するように定義された グローバル変数 jQuery(及びそのコピーである 変数 $ ) に他なりません。

第三に、そして興味深いことは、ユーザーによる jQuery() 実行指示時においても、this を効果的に使用することが出来ることです。例えば、jQuery for JavaScript programmers から引用すれば、

//引用ブロックのテキストコンテンツを順に alert する
jQuery('blockquote').each(function(el) { alert(jQuery(this).text()) }); 

//マウスオーバー時とマウスアウト時の背景色をそれぞれ変更する
jQuery('a').hover(
  function() {
    jQuery(this).css('background-color', 'orange');
  },
  function() {
    jQuery(this).css('background-color', 'white');
  }
);
のように利用出来ます。

そしてどの様な場合においても、「this とはそれが指し示すオブジェクトへの参照である」ことをきちんと踏まえていれば、コードを解読する場合や記述する場合においては、this をそれが指し示すところのオブジェクトそのものであると「思いこむ」ことが手っ取り早い、現実的なthisの利用方法であると思います。

それにしても上のコードにおける jQuery(this) ってどういうこと?───と一瞬思いました。これについてはこのエントリイの末尾で触れたいと思います。

▲ToTop

jQuery()インスタンスオブジェクトを「視覚化」する

それにしても、ユーザーが入力した jQuery(・・・) に返されるインスタンスオブジェクトは、具体的にはどんな内容のものなのでしょうか? それを知ることは決して意味のないことではありません。

なお、FireBugを使用すれば使いながら(on the fly)インスタンスオブジェクトの内容を見ることが出来ますから、敢えて表示することもない───と言うことも出来ます。しかし、ここでは敢えて学習のためにも、何はともあれインスタンスオブジェクトを表示してみたいと思い、それを行ってみました。

その方法は例えば、強引ではありますが、jQuery.js がインクルードされているサイト(勿論このエントリイでも構わない)を開いてから、FireBug を起動し、そのコンソールに次のコードを入力すれば、当該サイトの末尾に当該サイトのリンクタグ一覧を取得したばかりの、jQueryインスタンスオブジェクトのプロパティ一覧が追加されます。

また下のボタンをクリックすると下の関数を実行し、この頁の末尾に一覧を追加します。

(function($){
  var obj =$("a"), tmp="";
 for (var i in obj)
    tmp += "<div>" +i +" : "+ obj[i]+"</div>";
  $(document.body).append(tmp); //bodyに tmp 要素を追加する
})(jQuery);

指定した要素(上の例ではリンク要素)を取得したインスタンスオブジェクトのプロパティ一覧を見れば、当該要素が確かに「1つの配列のように」そのプロパティとして格納されていることが分かります。上の例で言えば、それは「 0 : http://・0・・改行、1 : http://・1・・改行、・・・・」のように表示されますから、 インスタンスオブジェクトに、それぞれプロパティとして格納されていることが分かります。勿論その他に 60 を越える数の、プロトタイプを利用して設定されたインスタンスメソッドやインスタンスプロパティが存在していることが、改めて分かります。

jQuery()インスタンスオブジェクトから指定した要素を取り出す

インスタンスオブジェクトの内容が分かったところで、次にそこから指定した要素ノードを抽出する方法を考えてみます。

それはたやすいことです。指定した要素オブジェクトは、単純な配列のように格納されているのですから、上の例で言えば $("a")[0]、あるいは $('a')['2'] とすれば目的を達します。実際 FireBug のコンソールに $("a")[0] を入力して実行すると、当該サイトの最初のリンク要素が <a href="・・・"> と表示されます。

序でに触れれば、プロトタイプを利用して作成されたインスタンスメソッドも連想配列を利用して自在に表示出来ます。

$("a")["index"]、$()["init"]、・・・・

この件については、jQueryに学ぶJavascriptの基礎(4) インスタンスオブジェクトからの値の取得について──jQuery解読(20) で再考しました。よろしければご覧ください。

▲ToTop

jQuery(・・).meth(・・・) の meth(・・・)内で this を利用する

次に、jQuery()のインスタンスメソッドである meth()において this をどのように使うのか、その方法を考えてみます。

メソッド内の this はその定義から、そのメソッドが実行されているオブジェクト、つまり jQuery(・・) を指し示すことになります。ところで、jQuery(・・) は init() メソッドによって、「 指定した要素ノードを要素とする配列を、そのプロパティの一部に内包しているインスタンスオブジェクト 」を返値として受け取っています。つまり meth()内の this はこの jQuery インスタンスオブジェクトを指し示すことになります。

jQuery(InsObj) を実行すると InsObj が返される

いきなりですが、jQuery(InsObj) を指示すると、init()メソッドによる初期化を経て、当該の InsObj が返値として返されます。init()を読めばそうなることは直ぐに分かりますが、次のコードを実行すればそれが視覚化されます。

※ InsObj はインスタントオブジェクトを意味します。

(function($){
 var InsObj = $(); //インスタンスオブジェクトを取得、引数はなくても問題なし
 InsObj = $(InsObj); //それを引数として $() を実行し結果を InsObj に代入
 for (var i in InsObj) 
  document.write ( i +" : "+ InsObj[i] + "<br />");
 document.close();
})(jQuery);

具体的な meth() 内の this 利用

改めて jQuery for JavaScript programmers から引用したコードを見てみます。(このエントリイのずっと上に表示)

jQuery('blockquote') または jQuery('a') 関数 が実行を終了した時点では、このオブジェクトは返値であるインスタンスオブジェクトを受け取っています。

そして直上の jQuery(insObj) の解明を踏まえれば、ずっと上の例におけるそれぞれの jQuery(this) は jQuery('blockquote') または jQuery('a') が受け取っているインスタンスオブジェクトをその返値として受け取っています。だからこそ jQuery のインスタンスメソッドである each() や hover() メソッド内において jQuery(this) を利用してjQueryインスタンスメソッドである text() や css() が使用出来る訳です。

 

■ コメントの投稿 ■

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

●トラックバック●

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

●参照元一覧●

<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が開きます。

----------
200711300058
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。