入力されたテキストを、スクリプトとして実行し得られた結果の値を、表示する。
スクリプトのテストや、窓の中の状態を知るためなどに用いる。
● 使い方
□展開 にチェックが付いていたら、その値のメンバーも、列挙する。
( 展開については、チェック付け、とりあえず、window とか document などと入力し、
[実行] してみれば、何しているものか分かると思う。)
[複行欄▽] を押すと、複数行の入力欄を表示し、もう一度押すと隠す。
[実行]ボタン または、[Enter] で実行。複行欄では、[Ctrl]+[Enter]
入力されたスクリプトの、その最後に評価された所が、値として得られるので、
それについて表示することになる。例えば、変数の値が知りたいなら、
最後にその名前を書いて [実行] で得られる。
結果表示
上段は、値の型、コンストラクターと、length プロパティあれば、その値を示す。
次の段に、(文字列化された) 値。
展開時の表、
メンバー数は、列挙されたメンバーの数であり、全てではない。
( メンバー数 0 でも、列挙されないメンバーがある。)
各行の左端が メンバー名、次に 値の型、次に 値。
値 の表示は、設定により、文字数を制限し途中で切り落としている。
エラーある時は、値の列か、その次の列に示す。(背景色を変えてある。)
値の型の列
ここに付け加えている、括弧の数字は、このメンバーに length プロパティある
時の、その値である。
object の場合、値の型の列には、値の型(object)でなく、コンストラクターの
名前を(得る事が出来たら)、書き入れている。
また、分類時に、その範疇が、値の型である所では、値の型の列を省略している。
括弧囲みの length は残している。
object のコンストラクターは、その文字列化が [] 囲みで、値の方も [] 囲み
で表されているようなら、省略している。
メンバーの名前部分を、ダブルクリックすると、その名前に . (ドット)を付けて、
入力欄の末尾に付け加える。
□展開チェック時の設定
□分類 チェック、値の種類により、メンバーを分類する。
□並替 チェック、値の名前順に並べる。
□並替2 チェック、分類時に、一部の値(objct)は、コンストラクタ名順に並べる。
( 非分類時は、ただ、値の名前順になる。)
字数制限の入力欄、メンバーの値表示の文字数の制限。負数なら制限無し。
窓[~] の行
このファイルが、open() や、showModalDialog() で開かれた時に、この行あり。
その欄には、開き元の窓の名前を入れてあり、実行のコンテキスト(文脈)が、
その窓である事を示している。
この時には、下の入力欄に、例えば、開き元の中の変数の名前を入れて実行すれば、
その値が出る。また、window と入れたら、それは、こちらでなく、元の窓である。
但し、this は、with 文使用の時は、こちら側のままである。
ブラウザによっては、セキュリティの制限で、無効の場合がある。
Firefox では、開き元のフォルダの中に、こちらが存在しないとならず、
Chrome は、起動オプション -allow-file-access-from-files が必要。
( これは、開き元もこちらもローカルファイルの場合のことで、Web 上の
ファイルには、多分どのブラウザでも、ドメイン間に、またローカル側との
間に、仕切りがある。)
そうでないと、以下に述べる [with(窓)] で実行している場合、window 以外は、
Firefox では、権限がない等のエラーになり、Chrome では、開き元の窓でなく、
自身の窓の方の情報を出してしまう。[with(窓)] 以外のモードは、元の窓の
メソッドを使おうとしているので全く不可(エラーになる)。
IE 9 では、他の窓の DOM オブジェクトなどの参照で一部、障害(制限)?
が起き、constructor を参照するとエラーになったり、typeof で、DOM オブ
ジェクトのメソッドや、JavaScriptのグローバルメソッド等が、function
でなく、object になる。
拡張メニュー(MenuExt)から開くと、この障害はない。HTA でもならない。
窓の名前欄に名前を入力し、[変更]で、この文脈を変更できる。
開き元に、子window や、親window がある時に、そちらに移るために用いる。
例えば、子window あれば、元の窓の名前[0] など、とする。
[戻] は、開き元の窓に、コンテキスト(文脈)を戻す。
選択欄(select、ドロップダウンリスト)
[with(窓)] は、with 文を使用して実行。
入力テキストは、"with( 元の窓 ){ テキスト }" と直して実行する。
この時は、こちら側の利便的(ショートカット)関数が使える。
[窓.eval] は、元の窓の eval メソッドを使用する。
this は、元の窓となり、こちら側は、見えなくなる。
[窓内で] は、元の窓の中に、関数を挿入し、その中で実行する。
こちら側を、その関数中の変数から参照できる。その名前は、こちらで
使っている名前(デフォルトは $)と同じだが、$.setInsideName(名) と
すると変更可能。( 挿入した関数を作り変えないとならないので、
この変更時に [窓内で] で実行中なら、一旦離れる=他のモードに切替え
る必要がある。)
左端[窓] の文字部分をクリックすると、このコンテキスト(文脈)の 有効/無効 を
切り替える。無効時は、対象(開き元)の窓は使わず、自身で実行する。
この無効時、開き元の窓は、こちらから見たその名前 opener や、dialogArguments
からアクセス出来る。
□一時外し。このチェックは、対象の窓を使わないようにするが、
一部のショートカットメソッドでは、その対象(開き元)の窓を使うままとする。
この一時外しは、使っている名前($)が、元の窓と衝突するなどしたときに必要と
思ったのだが、一旦 対象の窓を無効にし、xxx = $ と実行すれば、
別の名前 xxx で、呼べるようになる。
その他
複数行入力欄の下の、width:[ ] height:[ ] の入力欄は、
複数行欄のサイズ変更用で、入力して [Enter] 押すと設定する。
IE と Opera の時に、表示している。
□クリップボードへ チェック。
付けると、結果を クリップボードへ送る。
展開の時、行の 名前 型 値は、タブで区切っている。
メンバー数などの付随情報の行は、先頭に # を付けた。
IE 以外はこの時、Flash(SWF) による[実行]ボタンに取り替えている。
これから実行する事で、クリップボードへコピーする。
この SWF は、./setcbtx.swf だが、詳細は ../RplCBTxt/flcb/ にあり、
それのコピーである。
この為、IE 以外は、入力欄のキー操作から実行しても、コピーは出来ず、
HTML 上で結果を表示する。
1行入力欄では、入力補助として、先頭に、. (ドット)1つを書いて[実行]すると、
window に、2つ連続を window.document 、3つを window.document.body に
置き換えて調べる。
入力した関数や変数を、その場限りでなく、入力欄をクリアした後も使いたい時には、
function 名前(){ } や、 var 名前; といった宣言ではなく、
名前 = function(){ }、 名前 = 値; のように定義する必要がある。
● ショートカットメソッド
名前 $ は、設定による。(→設定用ファイル dlgValDetail.js)
( 以下、[窓.eval] のモードでは、使えない。)
$( "id" )
その idを持つ要素(object)を返す。(getElementById)
$.n( "name" )
その name を持つ要素の配列様の集合(getElementsByNameの結果)を返す。
$.t( "tagName", 要素 )
そのタグ名である要素の配列様の集合(getElementsByTagNameの結果)を返す。
タグ名に "*" は全てのタグ。
後ろの要素は検索場所となる要素、省略時は document。
$.c( "className", "tagName", 要素 )
その className(クラス名)を持つ要素の配列を返す。
"tagName" は、そのタグ名の要素に限定する。(空でもいい)
要素は検索場所の要素。後ろの引数 "tagName", 要素 は、省略可能。
$.cs( 要素 )
その要素の実際のスタイル(のオブジェクト)を返す。
( IEの currentStyle、他の getComputedStyle() の戻り値。)
$.text( 要素 )
要素のテキストを返す。( .innerHTML ではなく、テキストのみ。)
$.text( 要素, "テキスト" ) で、テキストを設定する。
$.esc( "文字列" )
HTML の & や、< をエスケープして返す。
$.unesc( "文字列" )
上のようなエスケープされた文字を戻して、返す。
$.sss( "スタイルシート" )
新しいスタイルシートを作成し、スタイルを設定する。戻り値は、シート(object)。
"セレクタ { 名前: 値; } ..." といったスタイルシート内容の文字列を与える。
$.S( "セレクタ", "名前: 値; ...", スタイルシート )
スタイルを追加する。シートの指定なければ、新しいシートを作成する。
シートに数値指定も可、-1 なら最後のシートの指定。戻り値は、シート。
1つ目または2つ目引数が、空であると、ただ、シートを返す。
$.addEv( 要素など, "イベント名", 関数 )
$.rmEv( 要素など, "イベント名", 関数 )
addEventListener または、attachEvent の呼び出し。.rmEv は、削除の方。
その他、( eval_detail.js 参照 )
これらのメソッド中、要素を探すものなどで、どの window で、それを行うかは、
窓[~] の行の設定による。( 要素などの object を引数に渡すメソッドに、
これは関係ない。が、スタイルの設定メソッドには window は関係あり。)
また「一時外し」にチェック付けた時も、その対象の window は、これらの
メソッド中では、維持するようにしている。
引数の最後に、対象の窓の指定を追加する事も可能で、窓[~] の行を無効にした
時も、この方法で目的の窓から検索できる。
但し、[窓.eval] のモードでは、これらのメソッドは、使えない。
( 対象窓.eval として実行するので、こちら側が、見えなくなるため。)
$.test( 値 )
渡された値を調べて表示する。
イベントオブジェクトを調べたい時、イベントリスナーの中から、呼び出すように
書いて、[実行]する。例えば、
document.onkeypress = function(evt){ $.test( evt || window.event ) }
とすると、キーイベントが起きる度に、それについて表示する。
( この時、対象の窓と、こちらの窓をキー操作で移動すると、その時の
[Alt]キーか何かのイベントしか得られない。)
( 止めるには、 document.onkeypress = null 等と[実行]する。)
この $.test は実は、[実行]ボタンからの関数と同じものであり、
上のイベントのように後で実行されるものは別として、直接呼ぶように
書いた場合は、実行の最中に、再びこの関数が呼ばれる事になる。
その実行最中に再び呼ばれる場合は、結果表示の前の方が、中の呼び出しの
結果で、後ろの方が、[実行]のものとしている。
中の呼び出しは、1つしか対応できず、複数だと前の表示は消される。
普通、そのようにこの .test() を直接呼ぶ事は意味がない (ただ裸で値を
書けば済む事なので) が、ブロックの途中にあるものについて知りたい
といった場合に、使えるかも知れない。
● 他の窓から開くには、
例えば、作成中などで調べたいファイルに、
<input type="button" value="open"
onclick="open('パス/dlgValDetail.html')">
などと書き足し、このボタンを押して、こちらを出すようにする。
リンクなら、<A href="javascript: void open('パス/dlgValDetail.html')">open</A>
と書き足す。
ファイルを書き換えなくても、ブラウザのアドレス欄で、
javascript: void open("パス/dlgValDetail.html") としても可能。
アドレス欄では出来ない場合でも、ブックマークにすれば多分、可能。
( Safari(Windows版)ブックマークで、日本語名含むパスあると、encode が
変になり開けない。2バイト文字は、\uXXXX と書いたら解決した。
アドレス欄では問題ない。)
Chrome は、起動オプション -allow-file-access-from-files を使って開かないと、
開き元の窓(opener)にアクセス出来ないようである。
Firefox は、対象のファイルと同じフォルダの中に、こちらが存在しないと、元の窓に
アクセス出来ないようで、例えばこちらをフォルダごと移すなどの操作が必要。
IE 9 は、拡張メニュー(MenuExt)から開かないと、一部障害あり。
IE 8, Opera, Safari は、特に問題ないようである。( Web ページに対して使うことは、
出来ない。)
ModalDialog も使うことができるが、元の窓に触れなくなる。( Chrome は別?)
showModalDialog( パス, window, "resizable: 1; scroll: 1;" )
Firefox, Chrome の制限は、open と変わらないようだ。
IE には、showModelessDialog() もあるが、どちらも、文字のコピーが(入力欄を除き)
出来なかったり不便がある。(文字のコピーは、[Shift]+クリックで、選択状態が、
作られ、[Ctrl]+[C] でコピーできるようだが、選択状態の作り方が、始点を一度
クリックし、終点を [Shift]+クリック などのようにはうまくいかない。)
※ IE の Dialog の時は、入力欄以外の右クリックで、その場所を選択状態にする
ようにした。右メニューはないが、キー操作でコピーできる。
( [Ctrl]などのキーを伴って右クリックした時は、除外。)
IE の拡張メニュー(MenuExt)の ModalDialog でも使用可能。これは、Webページの
スクリプトではないので、ブラウザのセキュリティなど関わるスクリプトの制約は
なく、Web ページに対しても有効。
( resizable にする方法は判らないが、external.dialogWidth / dialogHeight
に、"px" 付きの数字(文字列)をセットして変更できる。)
↓レジストリの設定例、( contexts は普通は、1 でいい。)
[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\MenuExt\値の見分(&i)]
@="X:/~~~/ValDetail/dlgValDetail.html"
"contexts"=dword:0000007f
"flags"=dword:00000001
● ファイル
設定用ファイル
dlgValDetail.js スクリプトの変数設定用。
dlgValDetail.css スタイル設定用。
dlgValDetail_ie.css IE 用スタイル
dlgValDetail_chrome.css Chrome 用スタイル
( monospace のフォントサイズが小さい為、専用のファイルを使う事にした。)
スクリプトファイル
eval_detail.js 中心となるスクリプトのファイル。
変更履歴
2012年2月25日
IE の Modal/ModelessDialog で、BODY の幅が、変更されない異常が起きないように、
onload 以降に、スタイルシートを変更しないようにした。
テキストエリアで、[Ctrl]+[Enter]で実行するようにするはずが、括弧を忘れた為、
(ブラウザにより)改行の度に実行してしまうバグを修正。
eval_detail.js で、展開、分類時 object の type 列の表示などを修正。
2012年2月28日
展開表の名前の列のダブルクリック、IEのダイアログの時の右クリックの処理、
1行欄の先頭ドットによる入力補助、など追加。
$.test(値) メソッドの追加と、eval_detail.js で 値を調べるメソッドに、文字列を
与えても eval しない様にするフラグを加えた。
「コピー文の置換」のフォルダの中にあったのを、別物として独立させた。
2012年3月3日
evalする所の周りを修正。ショートカットメソッドの一部を変更。
Chrome 用の css ファイルを追加。
set_eval_detail.js を廃止し、eval_detail.js の取り込み方を変更。
2012年3月7日
IE 9 の場合の説明などを書き足した。
2012年3月16日
IE 以外でのコピー用に、SWF を追加。
2012年3月23日
説明に少し加筆。
2012年3月29日
IE 以外で、コピーに使う swf が有効かを確認する為に、最初これを表示すると、
例えば opener へのアクセス禁止などの問題がある時、この要素の表示を隠す
事まで出来なくなるらしく、初期時の確認を止めた。
2012年4月6日
eval_detail.js、バグ修正( 配列のsort用関数の1つで、0 を返してなかった)。
2013年5月6日
eval_detail.js、バグ修正($.c)、追加($.ev,$.q)。