SEのほら何だっけアレBlog

SEのほら何だっけアレを書き留めておくブログです。今まで書き溜めた技術メモを掘り返して検証したりもします。あと、調べたことも忘れないうちに書き溜めておきます。

タグ:javascript

ほんと何を考えて書いていたのかわかりませんが私のメモです。

画面内のチェックボックスをON/OFFにするブックマークレットです。

画面内の全チェックボックスをON/OFFするブックマークレッ
JavaScript, Bookmarklet

はじめに
画面内の全てチェックボックスを、ONまたはOFFにするブックマークレットを保管する。

解説
JavaScriptでチェックボックスのcheckedプロパティを変更しても、clickイベントが発生しない。そのため、単純にcheckedプロパティの変更のみを行っても、clickイベントで何らかの処理を行っているシステムなどではGUIでの操作をエミュレートできていないことになる。(結果、変なJavaScriptエラーが発生して悩んだりすることになる。)

下記のコードでは、if (d.createEvent) から始まるブロック部分で、JavaScriptからイベントを
発生させている。比較的新しいブラウザであれば、うまく動作するだろう。このような処理は、jQueryなどの各種JavaScriptライブラリで、triggerといったメソッド名で実装されている。

動作確認済ブラウザ
以下のブラウザでうまく動作した。*1
IE 6.0
Firefox 3.0.6
Safari 3.1

元のコード
javascript: (function() {
    var d = document,
    a = d.getElementsByTagName("input"),
    c,
    e,
    b = confirm("check?");
    for (var i = 0; i < a.length; i++) {
        c = a[i];
        if ((c.type == "checkbox") && (c.checked != b)) {
            c.checked = b;
            if (d.createEvent) {
                e = d.createEvent("HTMLEvents");
                e.initEvent("click", true, true);
                c.dispatchEvent(e);
            } else if (d.createEventObject) {
                e = d.createEventObject();
                e.element = function() {
                    return e.srcElement;
                };
                c.fireEvent("onclick", e);
            }
        }
    }
})();

ブックマークレット化したコード
javascript:(function(){var d=document,a=d.getElementsByTagName("input"),c,e,b=confirm("check?");for(var
i=0;i<a.length;i++){c=a[i];if((c.type=="checkbox")&&(c.checked!=b)){c.checked=b;if(d.createEvent){e=d.createEvent("HTMLEvents");e.initEvent("click",true,true);c.dispatchEvent(e);}else
if(d.createEventObject){e=d.createEventObject();e.element=function(){return e.srcElement;};c.fireEvent("onclick",e);}}}})();


うーん。Webアプリケーションのテストで使っていたのかなぁ…。
それくらいしか思いつきません。


<私の好きなサイ本>

JavaScript 第6版




    このエントリーをはてなブックマークに追加 mixiチェック Share on Tumblr Clip to Evernote

ページ遷移前に確認ダイアログを表示するjavascriptコードを書いたメモを発掘。




ページ遷移前に確認をする、
onbeforeunloadCommentsAdd Star

JavaScript


windowのonbeforeunloadハンドラで、
Event#returnValueに値を入れると、ページ遷移直前にユーザーに確認ダイアログを表示することができる(んだって)。

以下コードの正常動作を、Firefox 2.0とIE 7で確認した。


Operaでは実行されなかった。


window.onbeforeunload = function(event){
  event = event || window.event;
  event.returnValue = 'SEのほら何だっけアレBlog';
}

以下は、IEとFirefoxの確認ダイアログのキャプチャ。

MochiKitでは、Event#confirmUnloadで確認ダイアログを出せる。

connect(window, 'onbeforeunload', function(event){
  event.confirmUnload('SEのほら何だっけアレBlog');
});




うわぁ…Firefox 2.0 と IE7 って…。
8年半前のメモです。

idou

Chromeも動作しました。

でも、Event#confirmUnloadの方はどちらもダメでした。

そういえば、ライブドアブログもそんなダイアログ良く出てくるよね。
これつかってるのかな?



<私の好きなサイ本>

JavaScript 第6版




    このエントリーをはてなブックマークに追加 mixiチェック Share on Tumblr Clip to Evernote

Firefoxにてabout:configを実行

Firefox の JavaScript にはコードを厳格に解釈する strict モードがある。

[about:config] - [javascript.options.strict = true]

この状態で、疑わしいコードを実行するとエラーコンソールに警告が出る(ロギングにつられてパフォーマンスも大きく落ちる)。

例えば、if 内での代入や、関数からの戻り値が有ったり無かったりするケースなど。

function() {
  if (a = 1) { return 1; }
  // return
}
if 内での代入は、()で囲むことで警告を抑止できるし、

if ( (a = 1) ) {} // 警告が出なくなる
return し忘れは適切に補完することで回避できる。

function() {
  if (a) { return 1; }
  return 0;
}
警告付きのコードを公開し続けると、ちょっとまずいことになる。

YUI compressor を使うと、strict モードでは検出されない

未定義変数の参照
未使用変数の検出
変数の再定義
varの乱用
などの問題を発見できる。

<私の好きなサイ本>

JavaScript 第6版




    このエントリーをはてなブックマークに追加 mixiチェック Share on Tumblr Clip to Evernote

テーブル名とカラム名をリアルタイムに検索したくて作ったソースだったと思う。(2009年)



<center>
<table width="100%"><tr><td width="250px"><td>
<table border="0" height="100%" width="100%" style="color:white">
 <tr height="40px">
  <td align="top" width="50%">
   <B>テーブル検索</B>:<input type="text" name="tableName" value="テーブル名" onfocus="if(this.value=='テーブル名'){this.value='';}" onblur="search(this,titles,'answer-a')" onKeyDown="search(this,titles,'answer-a')" />
  <td align="top" width="50%">
   <B>カラム検索</B>:<input type="text" name="columName" value="カラム名" onfocus="if(this.value=='カラム名'){this.value='';}" onblur="search(this,colums,'answer-b')" onKeyUp="search(this,colums,'answer-b')" />
 </tr>
 <tr>
  <td>
   <div id="answer-a" style="font-size:12px;"></div>
  <td>
   <div id="answer-b" style="font-size:12px;"></div>
 </tr>
</table>
 </td>
 </tr>
</table>
</center>

<script>
function search(el,searchTable,id) { if (el) {
 var val = el.value; if (val) {
 var ret = new Array();
 var size = 0;
 var len = searchTable.length; if(len<=0) {clear(id);return;}
 for(var i=0; i<len ;i++){
  var word = searchTable[i];
  if (word.match(val)){
    ret[size] = word;
    size++;
  }
 }
 a = document.getElementById(id);
 a.innerHTML = ret.join('<br>')
} else { clear(id); }
}//else {alert("エレメントNull");}
}

function clear(id){a = document.getElementById(id); a.innerHTML = '';}

var titles = new Array(
"account_tbl,ACCOUNT_TBL,ACCOUNT_TBL",
"m_shipusrlst,M_SHIPUSRLST,お届け先マスタ",
"m_item,M_ITEM,アイテム区分マスタ",
"アクセスログt,アクセスログT,アクセスログT",
"m_category,M_CATEGORY,カテゴリーマスタ",
"t_log,T_LOG,ログテーブル",
"t_order_d,T_ORDER_D,受注テーブル明細",
"t_order_h,T_ORDER_H,受注ヘッダテーブル",
"m_prd,M_PRD,商品マスタ",
"m_storelist,M_STORELIST,店舗リストマスタ",
"m_section,M_SECTION,部署マスタ",
"t_repay_h,T_REPAY_H,返金ヘッダテーブル",
"t_repay_d,T_REPAY_D,返金明細テーブル",
"m_meisho,M_MEISHO,名称マスタ",
"m_postcode,M_POSTCODE,郵便番号",
"m_ymstpost,M_YMSTPOST,郵便番号対応仕分マスタ",
"t_reservation_h,T_RESERVATION_H,予約商品ヘッダテーブル",
"t_reservation_d,T_RESERVATION_D,予約商品明細テーブル"
);

var colums = new Array(
"mgpartnum,商品マスタ(完),MG品番,MGPARTNUM,VARCHAR2,9",
"emplcode,社員マスタ(完),社員コード,EMPLCODE,VARCHAR2,10",
"mgpartnum,工程管理テーブル(キャプション)(完),MG品番,MGPARTNUM,VARCHAR2,9",
"mgpartnum,素材テーブル(完),MG品番,MGPARTNUM,VARCHAR2,9",
"sitecode,企画別商品マスタ(完),ドメインサイトコード,SITECODE,VARCHAR2,10",
"updtermid,名称マスタ(完),更新端末ID,UPDTERMID,VARCHAR2,50",
"delflg,名称マスタ(完),削除フラグ,DELFLG,NUMBER,1",
"slipnum,予約商品(ヘッダ)(完),伝票番号,SLIPNUM,VARCHAR2,10",
"updtermid,予約商品(明細)(完),更新端末ID,UPDTERMID,VARCHAR2,50"
);
</script>

テーブル名とカラム名はテキトーです。

ついこの間までのプロジェクト、エクセルで管理してたけど、いちいち激重たいエクセルファイル開いてたリアルタイムに検索しづらかったな。これ使えば良かった…。

<私の好きなサイ本>

JavaScript 第6版




    このエントリーをはてなブックマークに追加 mixiチェック Share on Tumblr Clip to Evernote

onmousedown属性,onmouseup属性は、マウスやトラックパッドの左右ボタンの動作を問いませんが、
左ボタンに限定された動作によりイベント
を発生させる属性に、onclick属性とondblclick属性があります。

これらの属性を同じ要素に
併せて指定している場合、左ボタンを2回連続で押す動作を行うと、Netscape, Firefox, Opera, Safari
では、onmousedown→onmouseup→onclick→onmousedown→onmouseup→ondblclickの順にイベントが発生します。

Netscapeってネスケだね。懐かしすぎ 笑

Internet Explorer
のみイベント発生順序が異なり、onmousedown→onmouseup→onclick→onmousedown→ondblclick→onmouseup
の不規則な順でイベントが発生します。 このようにどのブラウザも 2回連続でボタンを押した時の 2回目のonclick属性のイベントは無効になるようです。

<私の好きなサイ本>

JavaScript 第6版




    このエントリーをはてなブックマークに追加 mixiチェック Share on Tumblr Clip to Evernote

このページのトップヘ