11 | 2007/12 |  01

  1. 無料サーバー

search phpbb-phpbb-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

anything from here

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


The Beatles

　いちいちHTMLで書くのはめんどくさいので、日記的文章は時々平文で書いている。
　さて、昨晩はX'masだった。それに因んだ行動は何もしていないし、する気もないが、別途書いたようにChristmasソングは大好きである。


　そこで改めてJohn Lennonの Happy Christmas を youtube で検索してみた。
　もちろん、それはあった。
　あったどころか素晴らしい映像と共にその歴史的と言って良い楽曲は奏でられた。


　そこで序でに、この際だからビートルズのyoutubeに投稿されている全曲を観てみた。
　たった30曲しか投稿されていないが、その中で気に入っている曲を全てダウンロードしたことは言うまでもない。
　youtubeの効能はまさに絶大である！


　それでも欲しかった曲のいくつかはゲットできなかったが、BEATLESの主だった曲の一部は投稿されていたこともまた、言うまでもない。


　BeatlesのOld Numbersを 当時の画像と共に改めて観てみると、「Allways 三丁目の夕日」と同感覚の「昭和」がよみがえることは間違いない。


　それにしてもHappy newYear の背景に流れる動画はあまりにも悲しい！　そしてそれは余りにも真実である！
　An eye for an eye will make us all blind.──「目には目を」では、我々は皆盲いてしまうだろう。
　この日本の平和の意味、世界における日本の地位、日本の僭越、傲慢に思いを馳せざるを得ない。


　他国民、他民族の犠牲の上に成り立つ文明は、いずれは崩壊する！！───（正確な引用ではないが・・・）誰かの言葉を改めてかみしめた夜であった。
FC2ブックマークに追加

jQueryのイベントメソッドを解明してみたい。

　popup Tips が一応の完成をみたので、次には jQuery がイベントをどのように処理しているのかを解明してみたい。
　それは一般的に「 Javascript でイベントをどの様に処理するのか 」、必ずやその学習になるだろう。
　だから、イベント処理の全体像把握から始めて次第に細部を解明することになるだろう。


　また、イベント関連各種メソッドの中で多用されている jQuery().data() メソッドについて、イベント処理を理解するためにも解明しなければならないだろう。


　かくして一朝一夕では出来ないだろうが、年末年始休暇を前にして時間はたっぷりある。
　この年末年始休暇には、jQueryにおけるイベント処理と長らく懸案となっている find() メソッドの2つについて解明を試みてみようと思う。
FC2ブックマークに追加

Xmas Songs について　

　またその「季節」になった。
　街にはあちこちに飾り灯が灯り、X-masに因んだmusicが喧噪の中に流れている。


　私はこの宗教上の祭りが好きである。 正確に言えばこの祭りにまつわる音楽が好きである。
　無宗教・無神論者であり、キリスト教には微塵も関心を持ってないが、歴史と文明が築いたこのお祭りに係る音楽は好きである。


　特に、音楽的な意味において、Christmasはその文化圏においてのみならず、西欧文明に浸っている世界では大きな意味を持っていると思われる。


　何故ならば、「そのための」曲が無数に作られ、概してそれは神聖さを追求しているからである。
　「宗教はアヘンである」とある著名な故人は言った。ある意味ではその通りであると思う。時の支配者への反抗ツールであった時代には、その固有の存在意義を有していたのだろうが、権力と共存･共栄関係が築かれてしまうと、それは権力への抵抗を逸らす社会的ツールになりかねない、と思う。


　しかし、それにも拘わらず、宗教が持つ神聖さ、聖なるものへの憧憬には共感を覚える。
　そしてクリスマスソングの多くはその神聖さを追求している。あるいは家族という社会の基礎単位への思いやりや愛を希求している。

　だからXmas Songsには清冽さ、神聖さ、透明性等々の特性があるのだ。

--------------------------------------------------------
▼　My Favorite Xmas　Songs


　Happy Cristmas、　O Holly Night、　AveMaria、
　o.little town of bethrehem、　we three kings
　it came upon the midnight clear
　

FC2ブックマークに追加

jQueryに学ぶJavascriptの基礎(5) 論理演算子の使い方──jQuery解読(23)

別に難しいことではない・・・と最初は思いこむ

論理演算子（ && 、 || 、! ）は Javascript 初心者でも特に理解に苦しむ演算子ではありません。その機能は「 及び、又は、そして否定 」と直ぐに理解できてしまいます。

さて、入門書 や著名な Web Site には例えば次のように書いてあります。

「 論理演算子は右側と左側の条件式を評価して、・・・。複数の条件式を評価するために良く用いられます。」（ 出典：『JAVASCRIPT HANDBOOK 4th EDITION』p.32 ）

「exp1 が真、かつ、exp2 が真であれば真を、さもなければ偽を返します。」

「 exp1 が真、または、exp2 が真であれば真を返します。」（ 出典：とほほのJavascript入門･･･演算子 ）

※　ここに exp とは expression の略であり、expression が「数式」を意味することは、改めて説明するまでもないでしょう。

初心者は、このような文章を読んで学習する訳ですが、誰しも「 条件式や数式 」から、＝　や ！＝　が含まれる式を左右のオペランドにするのだ、と理解します。そして以下のような「 数式 」が例示されるのを見て、論理積演算子と論理和演算子を理解し、十分に納得したと錯覚してしまうのです。

  • (a > b) || (c != d)　、　(a = 3) && (b => 3)
  • (xx == "ABC") || (xx == "abc")

そもそも「式とは何か？」──このことをきちんと説明してから「条件式」なり exp なりの単語を使ってくれていれば、以下に述べるように「 四則演算のような算術式だけが論理演算子の対象となるのではない 」ということを、誤解なく理解するのです。

しかし Javascript でいう「式」とは何か、これについて上述の２つの文章では触れていません。このことが初心者に謝った認識を与えてしまうのだと思います。

特に「 条件式 」という表現は全く戴けません。この言葉では「 オペランドは条件を定めた式である 」と完璧に誤解されます。比較式や等式が左右に来るのだと錯覚してしまいます。

▲ToTop

見たこともない論理演算子の使い方の出現

さて、jQuery.js の各行に目を凝らすと、これまで見たこともない論理演算子の使い方に遭遇し、俄に戸惑います。── && が「及び」であり、|| が「又は」である、あるいはオペランドは条件式──、というそれまでの認識だけでは、全く理解できない論理演算子の使い方が多数あるからです。

その例を jQuery.1.2.1.js からいくつか抽出してみます。行頭の数字はjsファイルにおける行数です。

  1. 36 selector = selector || document;
  2. 72 return this.setArray(
74   selector.constructor == Array && selector ||
78   (selector.jquery || selector.length && selector != window &&
       !selector.nodeType && selector[0] != undefined && selector[0].nodeType) &&
        jQuery.makeArray( selector ) ||
81   [ selector ] )
  3. 132 return this.length && jQuery[ type || "attr" ]( this[0], key ) || undefined;
  4. 284 t.constructor == String ?
285 　jQuery(t).get() :
286 　t.length != undefined && (!t.nodeName || jQuery.nodeName(t, "form")) ?
287 　t : [t] )

以上のそれぞれについて説明するのは長大な文章が必要となるのでやめます。

大切なことは、「式」の意味と 上の例のような論理演算子の使い方の基礎となる 論理演算子の定義づけです。

なお、以降に記すことは全て David Flanagan著、村上列訳の『Javascript 第５版』を読んで学んだことです。

▲ToTop

式　とは何か？

それは「Javascriptインタプリタが評価して値を生成できるもの」──『Javascript第５版』にはそう書いてあります。そして極めて簡潔・明瞭・網羅的に例示があります。それを見て初めて、式とは何かが理解できました。

その結果、論理演算子の左右のオペランドに置くことの出来る式とは、四則演算的な算術式だけではなく、数値、文字列、論理値、オブジェクトリテラル、配列リテラル、変数、関数リテラルなど、まさに値を生成できるオブジュクトならば何でもござれ、であることが十分かつ確実に理解できました。

以上の理解を経て、jQuery.js で多用されている 「 オブジェクトを左右のオペランドとする 」 論理演算子の使い方と意味が、やっと判読できるようになったのです。

演算子の優先順位（抜粋）

論理演算子を利用する上で、演算子の優先順位をきちんと理解しておかないと、意図と異なる結果となってしまいます。自戒を込めて強調しなければならない、と思います。

そこで、優先順位を間違いやすい演算子の正しい優先順位を、今後のためにも記しておきます。

左側ほど優先順位が高い演算子となります。つまりより左側の演算子が先にインタプリタに処理されることになります。

++　--　算術演算子　==　!=　===　!==　&&　||　 ?:　=　,

論理演算子の使い方をオーソドックスなコードに置き換えて理解する

そうすることで理解を確実なものに出来ると思います。

以下において obj はオブジェクトの、v は変数の意です。

  1. v = obj1 && obj2; ─→ if (obj1) v = obj2; else v = undefined;
  2. v = obj1 == obj2 && obj3 || obj4;
─→ if (obj1 == obj2) { if (obj3) v = obj3; else v = obj4; }
　　 else v = false;
  3. v = obj1 || obj2 || obj3; 
─→ if (obj1) v = obj1;
　　　else if (obj2) v = obj2;
　　　else if (obj3) v = obj3;
　　　else v = undefined;
FC2ブックマークに追加

jQuery（）活用（2) Popup Tips を自作する──jQuery解読(22)

  • 初稿：2007/12/13
  • 改訂：2007/12/23 Window下部へのpopup飛び出し補正対策を実装。
  • 再改訂：2007/12/24 popupボックスの「採寸」が各起動要素毎に、一度だけで済むように工夫
  • 再改訂：2007/12/31 popupされる文字列取得も一度だけで済むように工夫

なにはともあれ実例を！

以下の画像がここでいう popup を表示させた例です。濃い緑色のボックスとその中の白い文字が popup です。黄緑色のボックス内にマウスカーソルをオーバーさせ、 popupが表示 されるようにして、その状態のスクリーンショットを画像化したものです。マウスカーソルの右下にpopupボックスが表示されていることが分かります。

popup Sample Image

最初にあることをお断りしなければなりません。

当初、 $(function(){}); を使い、この頁が開き終えた直後にこのページ内に書かれたコード全体を、自動的に有効にしようと考えていました。そして FireFox や Opera では全く問題なくそうできることを確認しました。「さて完成」と思って念のために IE で試したところ、全く駄目！。それも単なるエラーではなくこの頁を開くことすら出来ないのです。

この問題の発生直後から原因は $(function(){});ではないか、と推測しました。そして確認してみたところ、案の定このエントリイ内に記述した jQuery(document).ready(function()); が、IE では、否 IE でだけ円滑に作動しないことが分かりました。

但し、IE の全てのシーンで $(function(){}); が働かない、というのではありません。このブログでは HTML テンプレート内にも append や window.onload が埋め込まれているため、IE に限ってそれらと $(function(){}); が干渉し合ってしまうのだと思われます。

しかし、対策は諦めました。ready を load にする方法もありますが、既にこのブログでは myscript 内で window.onload 時にいくつかの関数の自動起動を設定済みであるため、これに屋上屋を重ねて、この頁のためだけに、 window.onload 時の関数を増やすことは労多く益少なしと判断しました。

そんな訳で余りやりたくなかったのですが、popupコードを有効にするためのボタンをこの下に設けました。これをクリックして初めて、このページ上で今回作成した popup が使えるようにしたのです。

それにしても、否やはり 「恨めしや IE！！」

なお、暫くしてから、このページ内に記述した popup 用コードをインクルードされるCSS 及び Javascript ファイルに組込むつもりです。その際には干渉はなくなるので、 $function(){} メソッドは問題なく動くはずです。

（ツールチップスとしての）Popup、あるいは 吹き出し

考えていることを実例を示して提示します。

下の色つきボックス内にマウスカーソルを移動すると、文字列の入った popup ボックスがマウスカーソルの右下に表示されます。これがここでいう popup、あるいは「吹き出し」です。

TEST テスト

TEST2 test2

そもそもこのブログサイトでは、開設した数ヶ月後から随所に popup を利用しています。その後、微調整や透明easingの追加などの修正を行ってきたこの popup は、実は、「古典的なイベントハンドル手法」、つまり HTML タグの属性として onmouseover/onmouseout を記述する方式で実装しています。

しかし、いかに Microsoft 社が抵抗あるいは無視しようとも DOM Level2 で規定されたイベントハンドリング手法が王道として定着しつつある中で、あるいはこれから王道となるであろう、と推測される中にあって、改めて、これに準拠している jQuery() を使って popup コードを記述してみようと思い立ち、それを作成しました。jQuery()を利用してどのようにそれを実現するのか、という点で、何らかの参考になれば幸いです。

なお、公開されているプラグインを検索したのですが、ここに言う popup に相当するものは見つけられませんでした。

▲ToTop

popup 表示を実現したコードは次の通りです。

HTML
<p style="text-align:right;line-height:1.1">
　<button id="button600" onclick="setPopup()">
　<em>popupプログラムスタート</em></button>
</p>

<div class="popuped" style="margin:0 auto; width:400px; height:100px;
　background-color: text-align:right; lightgreen;
　border:2px solid green outset; color:black">
　　<p title="これはjQuery()を使った「 吹き出し 」のテストです。
	mouseover mouseout の２つのイベントを、jQuery()を使ってこの div タグに
	設定してあります。">TEST テスト</p>
</div>

<div class="popuped" style="margin:0 auto;width:200px;height:100px;
　text-align:right;margin-top:1em;background-color:gray;
　border:2px solid  black outset;color:white;">
　<p title="これもjQuery()を使った「 吹き出し 」のテストです。
　div タグ内の p タグの title 属性値が popup ボックス内の表示文字列と
　なっていることに留意を！">TEST2 test2</p>
</div>
StyleSheet
/* popup される要素のスタイル設定 */
　#popup {
　　position: absolute; z-index:1000;
　　color: #eee; background-color: darkgreen;
　　margin: 0;
　　padding : 4px ;
　　line-height : 1.1; text-align: left;
　　border: 2px outset #aeb ;
　　display: none;
  }
Javascript
//�� block---------------------------------------------------------------
　//▼ドキュメント読込み完了前のマウスイベントによる
　//ブラウザの反応を抑制する。これはFireFox対策です。
window.loaded = false;
if (!window.loaded) { //window.loaded は独自に設定したプロパティでHTML文の最後に
　//script タグを設け、式：window.loaded = true を記述して初期値を設定しています。
　//つまり、ブラウザがその行を読み込むまでは window.loaded = false となります。
　document.onmousemove = document.onmouseout = document.onclick = document.onmouseover=
　document.onmousedown = document.onmouseup = document.ondblclick = null;
}

//�� block---------------------------------------------------------------
　//▼最も普及してしまったIEの場合、 $(function(){･･･}); がうまく
　//作動しないので、涙を飲んで古典的な名前付き関数を使いました。(×_×;）ｼｭﾝ
function setPopup(){
　//コード呼び出し後に popup スタートボタンを加工
　$("#button")
　　.removeAttr('onclick')　//clickが二度以上押されても無効に
　　.addClass("popuped")　　//class名追加
　　.attr("title", "これも popup 発生要素としました。")　//title属性追加
　　.css("background-color","pink")　//背景色替え
　　//ボタン文字列の差し替え
　　.children().text('クリックありがとうございます。popupコードが有効になりました。');

//�� block---------------------------------------------------------------
　//▼変数初期化
$.extend({　　//変数の替わりに $ のプロパティを追加設定する
　popup :{},　//popup要素格納
　popuped : $(".popuped"),　//popup 発生要素格納
　pos:{},　　//座標値格納
　elem:{}　　 //title文字列待避のために
});

//�� block---------------------------------------------------------------
　//▼popupタグの用意とマウス位置監視メソッドの設定
$(document.body)
　.append("<div id='popup'></div>")　//popupされる要素の作成
　.mousemove(function(e){　//mouseが動いた時のマウスの絶対位置取得
　　var evt = e ? e : window.event;　//IE対策
　　//IE対策
　　if ( evt.pageX == null && evt.clientX != null ) {
　　　var e = document.documentElement, b = document.body;
　　　evt.pageX = evt.clientX + (e && e.scrollLeft || b.scrollLeft || 0);
　　　evt.pageY = evt.clientY + (e && e.scrollTop || b.scrollTop || 0);
　　}
　　//絶対座標値とClient座標値をプロパティに格納。
　　//※エラーが出ないよう三項演算子を使って安全策を講じました。
　　$.pos = $.pos ? {
　　　X: evt.pageX, Y: evt.pageY, cX:evt.clientX, cY:evt.clientY } : null;
　});

//�� block---------------------------------------------------------------
　//▼２つのノードを取得、記憶
$.popup = document.getElementById("popup");　//popupされる要素をプロパティに格納
$.popuped = $(".popuped");　//popupが発生する要素をプロパティに格納

//�� block---------------------------------------------------------------
　//popup要素の透明度設定自作関数
var setOpacity = function(num){
　if (!num || (num > 1) || (num <0)) return;
　!!this.style.filter ?
　　( this.style.filter = 'alpha(opacity=' + num / 100 + ')' ):
　　( this.style.opacity = num );
}

//�� block---------------------------------------------------------------
　//現在の Window InnerSize の計測
var scrWidth="",scrHeight="";
var winSize = function(){
　scrWidth = window.InnerWidth ? (window.InnerWidth -18)
　　　: (document.documentElement.clientWidth || document.body.clientWidth);
　scrHeight = window.InnerHeight ? window.InnerHeight
　　　: (document.documentElement.clientHeight || document.body.clientHeight);
}
winSize();　//サイズ取得関数実行
document.body.onresize=winSize;　//windowサイズが変わったら、改めてサイズ取得関数を実行する

//�� block---------------------------------------------------------------
　//▼hover()メソッド
$.popuped.hover(　//jQuery()で用意されている hover() トグルメソッド
　function (){
//��-1 block-------------------------------------------------------------
　　var num = $.popuped.index(this);　//今 mouseover している popuped の順番を取得
//��-2 block-------------------------------------------------------------
　　if (!$.popuped[num].ttl) {　//num番目のtitleが未取得ならば
　　　//popupedノードが title 属性を持っていれば
　　　if ( this.getAttribute("title") ) $.elem = this ;　//それを対象とし
　　　//popupedノードが title 属性を持っていなれば
　　　else {
　　　  if (this.childNodes) {　//子ノードがあれば
　　　　　var i=0;
　　　　　//要素ノードではないかtitle属性を有していなければ
　　　　　while ( this.childNodes[i] && (this.childNodes[i].nodeType != 1 ||
　　　　　　!this.childNodes[i].getAttribute("title") ) ) i++;　//次の子ノードをチェック
　　　    $.elem = this.childNodes[i] || null;　//該当する子ノードを取得
　　　  }
　　　  if (!$.elem) return;
　　　}
　　　//そのtitle値をnum番目のpopupedノードのタイトル値として保存
　　　$.popuped[num].ttl= $.elem.title;
　　　$.elem.title="";　//ブラウザ既定の表示を消すために空欄とする
　　}
　　//取得したtitle文字列をpopupボックスに挿入
　　var str = $.popup.innerHTML = $.popuped[num].ttl || "No Comment";

//��-3 block-------------------------------------------------------------
　　//位置決めのための変数を設定
　　var offset={x:8,y:16} , oWidth , oHeight;

//��-4 block-------------------------------------------------------------
　　//既に当該要素のpopup外高さが取得されていれば
　　if ($.popuped._num.outerHeight) {
　　　oWidth = $.popuped._num.outerWidth; //採寸はせずに取得値を利用
　　　oHeight = $.popuped._num.outerHeight;　//同上
　　　with ($.popup.style) {
　　　　width = $.popuped[num].width;　//既定の width 値を利用
　  　　display = "block";　//popup ボックスを表示
　  　}
　　} else {
//��-5 block-------------------------------------------------------------
　　　setOpacity.call($.popup,0);　//高さ測定のためにpopupを完全透明化
　　　//popupのwidthを定め、その外高さ測定のために既に完全透明化したpopupをブラウザに描かせる
　　　with ($.popup.style) {
　　  　width = ( (str.length < 70) && 300  || 400 ) + 'px';
　　  　top = left = 0 + 'px';
　　  　display = "block";
　　　}
//��-6 block-------------------------------------------------------------
　　　//上で取得したpopupの内幅記憶並びにpopupの外幅及び外高さを測定し、同時に記憶
　　　$.popuped[num].width = $.popup.style.width;
　　　oWidth = $.popuped._num.outerWidth = $.popup.offsetWidth;
　　　oHeight = $.popuped._num.outerHeight = $.popup.offsetHeight;
　　}

//��-7 block-------------------------------------------------------------
　　//popupボックスの位置・横幅の設定
　　with ($.popup.style) {
　　　//popupの window 右辺からの飛び出し防止　→ popup横位置補正
　　  left = ($.pos.cX + offset.x + oWidth > scrWidth) ?
　　　　($.pos.X - $.pos.cX + scrWidth - oWidth +'px') :
　　　 　$.pos.X + offset.x + 'px';
　　　//popupの window 下辺からの飛び出し防止　→ popup縦位置補正
　　  top = ($.pos.cY + offset.y + oHeight > scrHeight) ?
　　　　 ($.pos.Y - $.pos.cY + scrHeight - oHeight +'px') :
　　　 　$.pos.Y + offset.y + 'px';
　　}
　　//popupの表示位置が決まったので完全不透明化する
　　setOpacity.call($.popup,1);
　},
//��-8 block-------------------------------------------------------------
　function (){　//popup発生要素からマウスカーソルが離れたら・・・
　　$.popup.style.display = "none";　　//popupボックスを隠蔽する
　}
);
}

▲ToTop

上のコードの説明と留意点

構成

  1. jQuery()利用は最小限に

    まず jQuery() の利用は最小限としました。多用するとそれだけ popup 表示に時間を要してしまい、 popup が遅れて表示されるのは、いらいらさせられるだけですから。特に特定のクラスを取得するコードは時間を要するため、一度の起動で済むように取得結果を変数に代入しました。また $("#idName") よりも document.getElementById("idName") の方が、当然要素ノードの取得時間は短いので、$("#idName") は使いませんでした。

  2. コードの構成

    コードは８つの部分で構成しました。順番にコメントします。

    なお、アンダーライン部には class="popuped" を設定し、popup ボックスが表示されるようにしてあります。

    第一は FireFox 対策です。このブラウザの場合、当該頁の起動中にマウスイベント（out、over、moveなど）を発生させると、呼び出してもいない関数内のプロパティを未定義と判断してしまい、エラーが生じてしまうのです。これを避けるためのコードとして、HTMLが文末迄読み込まれない限りマウスイベントを無効にしました。

    上述のように IE 対策でボタンを作成せざるを得なかったのですが、コードの第二はそのボタンがクリックされた後のボタンの属性を様々に変更するコードです。popup 関数の二重呼び出し防止、あるいはクリックしたことが視覚的に分かるように、等々の必要から、コード全体を完成させる最後のタイミングで作りました。この部分は上の jQuery() 最小利用方針に拘わらず、jQuery() のメソッド連鎖だけで作りました。

    第三は、変数の初期化コードです。JSON形式で定義しました。

    第四は popup のためのタグ要素の追加と、document 内でマウスが動いたときに、その頁における絶対座標を取得するためのコードです。ここでは簡単なjQuery()メソッドを２つ（ append() 及び mousemove() ）使っています。当然メソッド連鎖も利用しました。

    第五は、popup する要素と popup が発生する要素を変数に代入するためのコードです。ここでは jQuery(".className") メソッドを利用しました。

    第六は、popup要素の高さを所得するために使用する完全透明化関数です。this を多用して作成し、この this を活用するためにこの関数の呼び出しには apply() メソッドを使用しました。

    第七は、Windowのインナーサイズを取得するための関数です。-18は FireFox や Opera においてスクロールバーの幅が innerWidth に含まれてしまうために、これを差し引く減数です。また、ここでは window の幅や高さが頁読み込み五に変えられた場合に対応するために、window の resize イベントにインナーサイズを計測する関数をハンドルしました。

    第八は、popup が発生する要素にマウスオーバーした時、及びマウスアウトした時の、それぞれの挙動を規定したコードです。hover() メソッドは onmouseover と onmouseout の２つのイベントを目的の要素ノードにセットすると同時に、その２つのイベントをトグルさせるjQuery()インスタンスメソッドです。ここではそれをフル活用しました。

    最も苦労したのが mouseover 時の挙動を規定した関数なのですが、マウスオーバー時の挙動は唯一の例外（今まさに mouseover されている要素の jQuery.js が付けた index 暗号の取得）以外は jQuery() を使わず、基本的に DOM のメソッド/プロパティを利用して作りました。

▲ToTop

留意点

  1. popupを発生させる要素は、title 属性を持ち得る要素ならば、何でも構わないようにしました。しかも title 属性という一般的な属性値を popup される文字列とし、汎用化を追求しました。

    なお、既述のように具体例をアンダライン箇所に設置しました。

  2. popup を表示させたい要素に求められる要件は僅か２つです。(1) その要素の class属性を class="popuped" とすること、(2) その要素またはその子要素に title 属性を設けて popup したい文字列を記述すること。

  3. popup を発生させる要素自身、あるいはその子要素のいずれからでも、popupが表示されるように工夫しました。A: 必要な class 属性を記述する要素ノードと、B: title 属性を持つノード（title値はpopupさせたい文字列）において、A と B は同一ノードでも良いし、子ノード B に title 属性を設定しても良い、ということです。（但しその逆には対応していません。また、切りがないので孫要素以深にも対応しませんでした。）

  4. 但し、子ノードに複数の title 属性が設定されている場合には、最初の title 属性値が popup されます。複数の title 属性値を popup させたい場合には、親ノードを別々にすれば良いわけです。

  5. popup ボックスの背景色、文字色、フォント、枠等々はスタイルシートで設定しました。またその id 名は popup とし、このタグを jQuery() で append するようにしました。

  6. 変数は全て $ の独自プロパティに記憶させるようにしました。目的は複数のメソッドで利用するためで、別に var による変数でも良かったのですが、敢えて extend() の練習を兼ねてこうしました。

  7. タグ内の title 属性の値を popup 内の文字列としているため、title 属性に係るブラウザ既定の動きを消さなければなりません。 title 値が二重に popup されてしまうからです。そのために、title = " " を利用しました。

    なお、return false や event.preventDefault では、ブラウザ既定である title 属性への mouseover イベントによる popup 動作を抑制出来ませんでした。

    同時に、そのままでは次回の popup 時に文字列を表示できませんので、title 属性値を復活させるべく popup 隠蔽前に削除した文字列を title 属性に代入するようにしました。

  8. popupが window から右横にはみ出して、横スクロールバーを生じさせてしまう現象を防止する対策は、既にこのブログ全体に設定されているポップアップ表示のコード内で自作したものを転用しました。

  9. 高さ方向、つまり window 下方向へのはみ出し防止策は、一筋縄では出来ません。popup 要素はフォントサイズや文字数に応じてその都度高さが変わります。ですから popup 要素の高さを事前に知ることは出来ません。特殊な方法を採用しないと対応出来ません。それについては別途作成する予定ですが、既にこのブログ全体で利用している ポップアップで採用している手法なので、さほど時間は掛からないでしょう。

  10. （ 12/23追記 ）window 下辺からのはみ出し防止策を実装しました。当該要素を透明化する関数を用意して、完全透明化したpopupをブラウザに描かせて そのoffsetHeight値を取得し、その後高さ調整を行うと言う方法を採用しました。

  11. （ 12/24追記 ）offsetHeight は毎回取得させるのは効率的ではありませんから、一工夫しました。jQuery.js は取得したDOMノード集合にindex番号を振ります。これを利用して popup を表示し得る要素に一度 mouseover したら、以後はリロードされるまでは二度と offsetHeight を計算しなくても済むようにしたのです。popuped 要素毎に title 属性値の文字数に応じて popup 要素の高さは変化しますが、各々の popuped 要素毎に見れば、当該の popup が何度表示されても、その popup の高さは変わらない訳ですから、計測は一度だけ行えば良い訳です。

  12. （ 12/31追記 ）popupボックス内の文字列も一つの発生要素から起動するpopupにおいては、当該頁がリロードされるまではそれが何度表示/非表示になっても、幅や高さ同様に変わりません。そこでpopupボックス内の文字列も一度だけの取得で済むように工夫しました。二度目以降のmouseover時には、取得済みの値を利用することとし、一々DOM内を走査しないようにしたのです。

FC2ブックマークに追加

jQuery()を使って吹き出し（popupWindow）を作ってみたい。

　jQueryをふんだんに使って簡潔明瞭に、しかもタグ属性には一切のJavascriptを記述することなく、マウスオーバー／アウトのイベント駆動を実現しようと思っている。

こちらに完成品があります。↓

jQuery() 活用（2) Popup Tips──jQuery解読(22)


1.　mouseover時に表示させるノードをbody文末にappendする。
2.　mouseoverさせるタグにあるtitle属性に書いた文字をpopupさせるものとする。
　その際には、title属性がある場合の既定の動きを抑制する。
3.　popupするwindowの幅を何らかの形で指定する。但し当該タグのwidthではないのでど
　うするか・・・・。
　　それは、class="popup500"等にしよう。幅のパターンは決して無尽蔵ではなく、それ
　どころか数パターンあれば良いのだから・・・。300、400、500、600　の４つで十分だろう。
4.　以上で要素ノードでの作業はお仕舞い。後はCSSの出番だ。popup表示のスタイル設
　定である。
　　padding、border、background、line-height、そしてwidthを設定すればよいだろう。
5.　最後に動きをまとめるコードを書く。
　(1) class名検索でpopup500等のタグをリストアップする。これはその頁が再描画または
　　非表示になるまで、何度も検索を掛けたくないから、jQueryのプロパティに取得ノードを
　　記憶させるべきだろう。
　(2) 抽出されたタグにmouseover ,mouseoutのToggle イベントを設定する関数を作る。
　　　その中に、mouseover時のpopup表示、mouseout時のそれの隠蔽のためのコードを
　　書く。
　(3) この関数を当該サイトオープン時に実行させる。
--------------------------------------------------------
　数年ぶりに平文で、つまりhtmlタグを使わないで書いてみました。
FC2ブックマークに追加

FC2ブログ管理画面問題──12月10日から新管理画面に完全移行だそうだ

関連エントリイリスト in this Blog

本当に大丈夫？

新管理画面の様々な問題点は phpbb で散々論議されていた。そして私も上記のようにこのブログ上で何度か発信した。

全ての問題が解決した、と Fc2 ブログ管理者が判断したのだろう。ついに旧管理画面は明日をもって廃止され、10日移行は新管理画面だけの利用となるようだ。

「日時：12月10日月曜日の13時より移行開始。当日の上記の日時以後、管理画面へアクセスいたしますと、移行が完了したアカウントより新管理画面へログインされます。」→引用先　ブログ管理者用お知らせ

本当に大丈夫なのだろうか？───使い勝手、速度等々に問題はないのだろうか？

これまでの経緯を踏まえると一抹の疑念と不安を抱かざるを得ない。

携帯版管理画面も新管理画面に移行！

一方、「この度、blog1サーバーをご利用のユーザー様のアカウント限定で、携帯管理画面リニューアル版のテスト公開を致します。」とのメールが 2007/12/6 に届いた。

ここには、PC 版だけではなく携帯版をも、新管理画面に移行しようとする Fc2 の強い意志を感じる。
意見･要望の申し出先 Web サイト一覧（Fc2からの情報による）

◎ユーザーフォーラム

○帯管理画面【不具合報告スレッド】

○帯管理画面【意見・要望スレッド】

「現在はblog1サーバーのみの公開ですが、正式公開の目処が立ち次第、全サーバーに適用となります。」とのことなので、いつころ正式公開の目処が立つかは全く不明であるとしても、近い将来携帯版も新管理画面に移行することになることは間違いない。

といっても、携帯版は全く利用してないので個人的には関係ないのであるが・・・。

FC2ブックマークに追加

Microsoft Office 2003 SP3を導入すると、入力した文字が見えなくなったり、黒く反転して表示される問題について

関連 Web 情報 in WWW

まさに表題の現象が私のワード、エクセルでも起きていた。原因が分からずネットサーフィンして解決したが、これは Microsoft 社による ジャストシステムへの嫌がらせと思えて仕方ない。

私は、ATOK の変換性能や日本語入力・変換に関わる性能のあれこれは、MSIMEよりも数段優れていると確信しているし、一太郎Ver３の時点から、松茸に乗り換えたり、VJE 等も使ったりしつつ、最終的にATOKにたどり着いた。Windows 全盛時代となってからも、MSIME が決して ATOK には追いついていないと、実際に使ってみて確信を得ている。

日本語変換は日本語を十分に研究してきたジャストシステム社に委ねるべきだ、などと言うつもりはないが、OSもアプリもそして言語入力システムも、その全てを押さえんとするかのマイクロソフト社の姿勢そのものに納得がいかない。あれにもこれにも手を出し、市場を席巻・制覇しようとする一企業の行動そのものが、社会全体の視点で見れば極めて由々しき戦略であると思う。

そんな中で今回の「事件」である。

それは嫌がらせ以外の何物でもない。

ますます MSIME を使いたくない気持ちが高まってきたことは言うまでもない。

FC2ブックマークに追加

新管理画面は不都合が多く、動作も遅い。敢えて旧管理画面を使う！

新管理画面の使用をやめる！

一昨日のエントリイで書いたとおり、新管理画面から行ったテンプレートの更新作業は成功しない。しかもファイルアップロードにしても、過去の記事の管理にしても、新管理画面はとにかく反応が遅い!

phpbbを覗くと、Fc2は新管理画面に拘泥しているようなので、一部には旧管理画面に戻れ、との声もあるが、これは通りそうもない。社是として新管理画面への移行を推し進めているのであろう。

ユーザーから相当の反発があると思われるのに、何故にそれほどまでに新管理画面に拘るのか解せないが、とにかくストレスが溜まる管理画面はゴメン被りたい。

そんな訳で本日から旧管理画面の利用に戻ることとした。

こちらの方が動作が速くストレスが溜まらないからである。

新管理画面の利便性にある程度慣れてしまったから、旧画面は使いにくい面が多々ある。しかし、テンプレートの変更が新管理画面では出来ないのだから、新に拘泥する理由は一厘もない。

近い将来最上部に設置したショートカットも全て旧管理画面へのそれに戻すことになるだろう。

FC2ブックマークに追加

jQuery()の挙動を解読する。(12) pushStack()解読──jQuery解読(21)

pushStack()再考

以前こちら（ 簡単なインスタンスメソッドいくつか──jQuery解読(19) ）で pushStack() について次のように触れました。

この pushStack() は大変興味深いメソッドです。新しいインスタンスオブジェクトの その名も prevObject プロパティに、直前の this が指し示すオブジェクトが格納されるようにコーディングされています。このメソッドは jQuery.js で７箇所利用されています。

このことの意味をもう少し掘り下げてみたいと思います。この pushStack() メソッドはどの様な場合に利用するのか、と言う点を明らかにしたいのです。そうしないとこのメソッドを本当に分かったことにはならないと思うからです。

jQuery(obj) 再登場

改めて pushStack() メソッドのコードを見てみます。

102: pushStack: function(a) {　//所与の第一引数を受け取り、
103: 　var ret = jQuery(a); //それを第一引数とするjQuery(a)を起動して
    　　　　　　//新規 InsObj を作成し、それを ret 変数に代入する。
104: 　ret.prevObject = this;　//その時の this を
　　　　　　　　//retのプロパティに代入し、thisの内容 をプロパティ
105: 　return ret;　//として持つ新規 InsObj を呼出し元に返す。
106: },

jQuery(obj) というコードによって そのインスタンスにobj が代入されることは以前に触れました。（ this 活用──jQuery解読(17) ） このコードが pushStack() で利用されています。（103行）

ここで注目するのは引数の a です。具体例で見てみます。

225: find: function(t) {
226: 　var data = jQuery.map(this, function(a){ return jQuery.find(t,a); });
227: 　　return this.pushStack( /[^+>] [^+>]/.test( t ) || t.indexOf("..") > -1 ?
228: 　　　jQuery.unique( data ) : data );
229: },

例えば、上の find() インスタンスメソッドを見てみると、最初の this は、find() が呼び出される経緯から、インスタンスオブジェクトを指しています。そして、ユーザーによって context が指定されていなければ、この場合のインスタンスオブジェクトにはドキュメントノードが代入されています。何故ならば、この find() メソッドの呼び出し元は new jQuery(context) であり、このインスタンスには、ユーザーが context を指定しない場合には document が代入されるからです。（ init()メソッドでそう定義されています。 ）

ところで、jQueryクラスメソッドである map() メソッドが起動されると this はクラス、つまり jQuery() 関数を指しますが、その実行が終わって data に結果を代入したその後に this.pushStack(data) メソッドが起動されるときには、ここの this も find() メソッド内にありますから、その関数の起動元であるインスタンスオブジェクトに格納されているドキュメントノードを指すことになります。

さてコードの目的に戻ると、data に格納されているノードオブジェクトをインスタンスに返すためにコードが書かれています。そこで jQuery(data) を実行させて変数 ret に目的とするノードオブジェクトを代入し（102行）、そのプロパティである preObject に、この pushStack() メソッドを起動させたときのインスタンスオブジェクト＝this であるドキュメントノードを代入した上で（104行）、ret がインスタンスに返され、最終的にユーザーが入力した jQuery(a,c) に返されます。こうして selector で指定した要素ノードの配列が取得出来るわけです。

▲ToTop

pushStack()は new jQuery(context).find(selector) 起動時において、目的の要素ノードを確実に取得するために機能している

new jQuery(context).find(selector) が起動すると、ユーザーが目的とする要素名などは find(selector) としてその引数となると共に、このコンストラクタが生成するインスタンスには context が代入されます。

そもそも jQuery.js はインスタンスの内容を return させながら、最終的にユーザーが入力した jQuery(selector,context).method(・・) にその内容を返していくように設計されています。

だから、return されるインスタンスには context ではなく、selector による結果が入っていなければなりません。そこでここで取り上げたjQuery().pushStack() メソッドによって、インスタンスの内容を context から selector に入れ替えることになります。

▲ToTop

以上の解読を行った際の検討過程を以下に示します。

下図は次のような過程を FireBug で追跡し、pushStack()メソッドを今まさに終わらんとしている段階でのスナップショットです。

$tmp=$("p")[0]を実行し
→　int("p")　→ 65 return new jQuery().find( "p" );　→　find()メソッドに入り、
　226 var data = jQuery.map(this, function(a){ return jQuery.find(t,a); });
を経て↓
　227 return this.pushStack( /[^+>] [^+>]/.test( t ) || t.indexOf("..") > -1 ?
　228 jQuery.unique( data ) : data );
と辿り、pushStack()メソッドに入った後の最終段階での一こまです。

this がドキュメントノードになっていること、変数 ret にp要素ノードのリストが１つの配列として格納されていること、及び ret.prevObject にドキュメントノードが代入されていること等が分かります。

FC2ブックマークに追加

数日前からテンプレートの更新が全く出来ない！！

初稿：2007/12/3

改訂：2007/12/4

2007/12/3

それは数日前から始まった。テンプレートの更新が html 文も CSS 文も出来ないのである。

広告タグ<%ad> <%ad2>もきちんと入っているのに、更新ボタンを押すと「既にその名前のテンプレートが存在しているため名前を変更できません」と表示されるばかり。

挙げ句の果てには HTML も CSS も空白表示となり、更新ボタンを押すと表示されるが、それは先ほど更新したはずの内容ではなく、更新前のものしか表示されない。

で、今度は名前を変えてみるとやはり真っ白。そして更新ボタンを押すと、更新前のコンテンツが表示されるが、今度もエラー表示が出る。そのエラー表示とは削ってもいないのに、「広告タグ[<%ad>][<%ad2>]は削除できません。」である。

数日前までは問題なく更新できていたのに、一体どうしたことか？───同じような現象に悩んでいる人がいるのではないか、と検索を掛けてみたが皆目引っかからないし、phpbbを見てもそれらしいコンテンツはない。

つまりお手上げなのである。

2007/12/4

昨日更新できなかった、HTMLやCSSの更新したはずの箇所が、何と今日になって更新されていることに気がついた。

それでは、と他に修正したくて昨日諦めていた箇所も弄ってみた。

するとまたしても更新できないのである。

しかも何と旧管理画面に移行して、そこでブログデザインの変更を選択して修正すると、こちらでは直せるのである。修正後に更新ボタンをクリックすればそれはアップロードされ、テンプレートに反映されるのだ。

ところが、それを行えるには１つ条件がある。その条件とは別途、新管理画面が開いていると駄目なのだ。旧管理画面オンリイで作業をしなければいけないのだ。例えば、或るエントリイの修正作業を新管理画面で行いつつ、同時並行で旧管理画面でブログデザインの変更を行っていたら、その場合には旧管理画面からのブログデザイン変更は行えず、蹴られてしまうのである。

実は昨日も同じように旧管理画面を開いてそこで修正を施してアップロードしていたのだが、結果が反映されなかったのだ。

この原因は？

以上から推察するに、原因は新管理画面におけるテンプレート変更画面の仕様上の欠陥にあると思われる。

<%ad><%ad2>を厳しくチェックするようにしたこと、あるいは名称変更に係る仕様、このいずれかが原因となって、新管理画面におけるテンプレート変更が適切に作動しないものと思われる。

新管理画面の是非にまで話が及ぶ

phpbbを見ても新管理画面に関する苦情や質問はかなり沢山あるようだ。新管理画面上でテンプレートの変更が出来ない、との投稿もいくつかあった。中には旧管理画面に戻して欲しいとの要望もあったが、これは FC2 から明確な否定回答がなされていた。

phpbbにざっと目を通した印象として、FC2が新管理画面を撤回する気がないのであれば、その改良にもっと力を入れても良いのではないか、と感じた。いくら無料ブログとはいえ、ユーザーの負担や苛つきを土台に改善を進めていく、という手法は余りにおかしいと思われる。

FC2ブックマークに追加

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

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

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

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

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

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

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

さて、ここで何が問題かというと、$("a").size() あるいは $("a").length を実行すると当該サイトのリンクタグの個数が取得できますが、この場合の要素数に何故、プロトタイププロパティ＝継承プロパティが含まれないのだろうか、とふと疑問に思ったのです。しかし、継承プロパティは配列として格納されている訳ではないから、当然数えられないはずだ、と直ぐに納得しました。そして、そもそも継承プロパティは、恰もインスタンスオブジェクトのプロパティであるかのように見えているだけ（『Javascript第５版p.154』）で、決してコピーされている訳ではないことを、改めて思い起こしました。継承プロパティはインスタンスオブジェクトの固有のプロパティではないことを、期せずして再確認しました。

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

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

そしてその理由は、逆の場合を想定して直ぐに明らかになりました。つまり、配列にしないでノードのまま（テキストノードの場合を含む）で返すとすると、length で数を数えることが出来ません。また script によって、継承プロパティと返値であるプロパティを区別することも出来ないと思われます。

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

愚問のお陰で、改めて配列の重要性に思いを馳せました。

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

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

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

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

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

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

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

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

その後 jQuery.js 内の処理の結果、ユーザーが指示し目的とした要素ノードがインスタンスオブジェクトに返され、これがreturn連鎖を通じて最終的にユーザーが入力したAPIに返されます。

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

以上を踏まえれば、返値であるインスタンスオブジェクトは配列オブジェクトなのですから、一般的な配列要素の取り出し方法によって、インスタンスオブジェクトの値を取り出すことが出来ます。

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

一方、ユーザーがインスタンスオブジェクトから値を取り出すには、配列に格納されている要素が DOM ノードであることをきちんと踏まえないといけません。

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

$("p")を例に取れば、コード進行過程と同様に、$("p")[num] で、配列に格納されているノードが取得出来ることは言うまでもありません。

この場合、例えば FireFox では [object HTMLParagraphElement]と、FireBugでは <p> と表示されます。

しかし、これでは具体性がありません。具体的に値を表示させたい場合には、
$("p")[0].nodeName、$("p")[0].firstChild 等の DOM プロパティを利用することにより、タグ名や内容等を取得することになります。

他方、jQuery()においてインスタンスオブジェクトを取り出す方法が提供されています。それはget()インスタンスメソッドです。

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

FC2ブックマークに追加

jQuery()の挙動を解読する。(11) 簡単なインスタンスメソッドいくつか──jQuery解読(19)

this の何たるかが一応分かったことを踏まえて・・・

直前のエントリイでthisを分析しました。これを踏まえて早速jQuery()インスタンスメソッド内で、縦横無尽に活用されている this に注目して、挙動解読を行いたいと思います。

ここでは get()、pushStack()、 setArray()、index() を順に取り上げてみようと思います。とりあえず内容が簡単ですから（苦笑）。

なお、以下において共通して InsObj とはインスタンスオブジェクトの意味です。

また、以下のコードリストでは jQuery UI の resizable を利用していますので、サイズは縦横自由に変更できます。W3C の仕様を守らない IE 以外では、このブログに設定されているコンテナ幅を飛び出すリサイズは出来ないので、pre タグの overflow スタイルを auto に設定し、W3C仕様の場合でも全文が見えるようにしました。

get()……取得した要素から num番目を抽出取得する、あるいは取得した要素ノードを配列に格納する。

95: get: function( num ) {　// 目的とする num 番目の n を引数とし
93: 　return num == undefined ?　//numが未定義ならば
94:
95: 　　// Return a 'clean' array
96: 　　jQuery.makeArray( this ) :　//InsObj の中の対象要素ノードの全体を配列
97: 　　　　　　　　　　　　　　　 //に変換して返値とし
98: 　　// Return just the object
99: 　　this[num];　//num が与えられていれば InsObj 配列から num 番目を
　　　　　　　　　　//抽出して返値とする。
100: },

この get() は２つの役割を担っています。まず、取得したノード配列を、まさに配列として取り出す為に機能します。引数を与えずにget()メソッドを実行すればよい訳です。但し、返される配列の要素はノードですから、そのまま alert しても [Object HTMLPagraphElement] のように表示されるだけです。nodeNameなどのDOMメソッドで展開しないと意味のある結果は表示されません。

例えば次のボタンをクリックすると、このサイト上で alert($("p").get();) が実行されます。このページ上にある p タグの一覧を取得する訳ですが、どの様な結果が表示されるのか試すことが出来ます。

他方、整数値を引数としてget(num)を実行すれば、取得したノード配列から num 番目を抽出した結果が返されます。

pushStack()……対象オブジェクトの変更とバックアップ

102: pushStack: function(a) {　//所与の第一引数を受け取り、
103: 　var ret = jQuery(a); //それを第一引数とするjQuery(a)を起動して
    　　　　　　//別のInsObjを作成して、それを ret 変数に代入する。
104: 　ret.prevObject = this;　//その時の this を
　　　　　　　　//retのプロパティに代入し、this をプロパティとして
105: 　return ret;　//持つ新規 InsObj を呼出し元に返す。
106: },

この pushStack() は大変興味深いメソッドです。新しいインスタンスオブジェクトの その名も prevObject プロパティに、直前のthisオブジェクトが格納されるようにコーディングされています。このメソッドは jQuery.js で７箇所利用されています。なお、 pushStack()解読──jQuery解読(21) にて pushStack() の必要性、役割について考えてみました。よろしければご覧ください。

setArray() ……インスタンスデータの初期化と更新

108: setArray: function( a ) {
109: 　this.length = 0;　//InsObjに代入されている値を全て削除して空にする。
110: 　Array.prototype.push.apply( this, a );　//空のInsObjに a 配列の要素を挿入
111: 　return this;　// a の各要素が代入された InsObj 配列を呼出し元にreturnする。
112: },

index()……取得したノード内でobjが何番目にあるか？

118: index: function( obj ) {　//目的のオブジェクトを引数とする
119: 　var pos = -1;　//pos変数を初期化する。
120: 　this.each(function(i){　//InsObj からeach()メソッドを起動
121: 　　if ( this == obj ) pos = i;　//定義からthis＝InsObjであり、
122: 　});　　//その各要素をobjと比較して、objと一致すればその位置を
　　　　　　　//示す i を pos 変数に代入する。
123: 　return pos;　//合致した位置が代入された pos の値を呼出し元に return する。
124: },
FC2ブックマークに追加

jQueryに学ぶJavascriptの基礎(3) 正規表現──jQuery解読(18)

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

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

jQuery.js は正規表現の勉強にも最適である

正規表現文字列の奇々怪々、何がなにやらさっぱり訳が分からない記号の羅列を見れば、this の難解さなど赤子の手をひねるに等しい水準だと言えるでしょう（苦笑）。その奇々怪々な文字列が、jQuery では、様々なシーンで活用されています。

jQuery.js に登場する20箇所以上の正規表現について、ここに論じても余り意味がないでしょうが、普段余り見かけない利用方法について学習を深めることは意義深いと思います。

話題にするのは、３つ。参照対象とする部分文字列と非参照対象の部分文字列、そして非貪欲な繰り返し、です。

部分文字列

それは () で括られた一塊の文字列のことですが、塊として位置づける意味は、後でその文字列を参照したい場合、及び参照はしないが一塊の文字列として認識させたい場合とに分かれるようです。

これらの参照/非参照の部分文字列を指定しているケースについて

その端的な例は次の２例です。（左の数字はjQuery.jsにおける行数です）

　31: var quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#(\w+)$/;
1202: /^(\[) *@?([\w-]+) *([!*$^~=]*) *('?"?)(.*?)\4 *\]/,

色別で部分文字列の区別を分かりやすく表示しましたが、jQuery.js ではこれらの部分指定を活用してその部分を随意に取りだして利用しているのです。

31行の場合の部分文字列の活用内容は既に言及しましたので（　インスタンスの初期化：init()──jQuery解読(5)、ここでは1202行について解読しようと思います。

1202行は jQuery.parse プロパティを定義する箇所の一部です。コード本体の説明にあるように、 Match: [@value='test'], [@foo] を探すための正規表現文字列です。なおこのparseプロパティが使用されている箇所はjQuery.filer() メソッドの 1433行１箇所だけです。

さてこの正規表現文字列は、連想配列のキー文字として @value='test' や @foo の形式の文字列を探すために一般化されて定義されたものです。

  1. ^(\[)……先頭文字が [ の意。これは部分文字列１に指定されている。
  2. @?([\w-]+) ……@があるかなくて、その後に単語文字かマイナスが１以上。この1以上の単語文字が部分文字列２に指定されている。
  3. ([!*$^~=]*)……部分文字列３。！、*、$、^、~、又は = がゼロ個以上
  4. ('?"?)……部分文字列４。' がゼロ個以上で、 " がゼロ個以上続く文字列
  5. (.*?)……非参照部分文字列。何らかの文字がゼロ個以上。なおこの ? は後述する「非貪欲な繰り返し」指定のため。
  6. \4……部分文字列４を参照する。

▲ToTop

非貪欲な繰り返しについて

これはむしろ吝嗇な繰り返しとか、貧弱な繰り返しと言った方が分かりやすいのではないかと思いますが、『Javascript 第５版』に倣って「非貪欲な」繰り返しと表現しておきます。

この用法もjQuery.jsで初めて遭遇したもので、Javascript1.5以