Memo/JavaScript

http://dexlab.net/pukiwiki/index.php?Memo/JavaScript
 

MenuBar

JavaScript?


非同期処理:async/await


JSON形式から他形式への変換


構文チェック

HTML ValidatorのようにJavaScript?の構文が正しいか、非推奨の書き方がされていないかをチェックしてくれるツール


ベンチマーク


テスト

ライブラリ


グラフ

JSON

暗号化

順列生成

Permutation

2次元連想配列

  1. foo = {};
  2. foo['hoge'] = {fuga : 'aaa'};
  3. alert(foo['hoge']['fuga']);
  1. foo = {};
  2. foo['hoge'] = {};
  3. foo['hoge']['fuga'] = 'aaa'
  4. alert(foo['hoge']['fuga']);

ajax記事

ajaxで郵便番号から住所変換

最適化/高速化

IE6でAタグでsubmitできない場合

  • jquery使用
  • ダメな例
    1. <a href="javascript:void(0);" onclick="$('#form1').submit();">送信</a>
  • return false;を付けると動作する。
    1. <a href="javascript:void(0);" onclick="$('#form1').submit(); return false;">送信</a>

prototype.js

セレクトリストから入力補完

エフェクトを追加

  • script.aculo.us Ajaxライブラリ。エフェクト,オートコンプリート,ドラッグショップ,パズル等あり。prototype.jsに依存。特定バージョンが必要。

入力値チェック

JSONP

動的にscript要素を追加してやることによってクロス・ドメインのJavaScript?ファイルを読み込むというテクニック。

prototypeと文字コード

IEのみの問題だが、ソース中に日本語が含まれていた場合、ソースの文字コードによって「識別子、文字列または数がありません。」エラーが出たり出なかったりする。

  • 対応状況
    IE6.0SP2Firefox2.0Opera9.02
    EUC-JP
    UTF-8(BOM有り)
    UTF-8N(BOM無し)×

エラートラップ

  • IEとFirefoxのみ onerror イベントが使用可能
    window.onerror = function(mes,file,num){
        alert([
            "file    : " + file,
            "line    : " + num,
            "message : " + mes
        ].join("\n"));
        return true;
    }

デバックとデバッガ

  • Venkman
    Firefoxのプラグインとして動作するデバッガ。Firefox 0.9〜1.1のみ。2.0では使用できなかった。
  • Exadel Studio
    Exadel Studioプラグインに付属しているJavaScript? Editor。JavaScript?の入力補完してくれる。
    Pro版は有料。
  • Rhino
    Rhino: Java による JavaScript?実装

配列形式のフォーム値を取得する

通常の値とselectとでは取得方法が異なるので注意。

  • get_value();
    <input type="hidden" />
  • get_select_value(), get_select_text()
    <select> 〜 </select>
  • filephp_array.js

JavaScript?の整形

テーブルの列単位での操作

  • もっと良い案を模索中。(item名不要、可変列数対応等)
  • filerow_unlock.htm

イベントのオーバーライド

以下の用に、デフォルトのイベントハンドラの替わりにユーザ関数を実行する事ができます。

変数名 = オブジェクト名.イベントハンドラ名;
オブジェクト名.イベントハンドラ名 = ユーザ関数名;
  • 例:submit()
    <script type="text/javascript">
    <!--
    var g_submit = null;
    function load(){
    	// submit()のオーバーライド
    	g_submit = document.form1.submit;
    	document.form1.submit = pre_submit;
    }
     
    function pre_submit(){
    	// 送信前にしたい処理 ...
    	// オーバーライドしたイベントを元に戻す
    	document.form1.submit = g_submit;
    	document.form1.submit();
    }
    -->
    </script>
    <body onLoad="load();">
    <form name="form1">
    </form>

オブジェクトのシリアライズとアンシリアライズ

  • シリアライズのtoSource()は、Mozzila系ブラウザでしか使えないようですが、アンシリアライズは他ブラウザで可能なようです。
  • よって、Firefox等でオブジェクトをシリアライズして記録し、結果のみを変数に入れるようにすれば、他ブラウザでもアンシリアライズが可能です。
  • シリアライズ
    function HOGE()
    {
    	this.type = "select";
    	this.label= "オブジェクト1";
    	this.options = new Array("要素1","要素2");
    	this.func1 = function(){return "func1";}
    }
    
    var ary = new Object();
    ary["obj_name1"] = new HOGE();
    ary["obj_name2"] = new HOGE();
    alert(ary.toSource()); // Mozzila系のみで有効
  • アンシリアライズ(IE6,Firefox1.5,Opera8.51で確認)
    var properties={obj_name1:{type:"select",label:"オブジェクト1",options:[]},obj_name2:{type:"text",label:"オブジェクト2",options:["要素1", "要素2"],func1:(function () {return "func1";})}};
    alert(properties["obj_name1"]);			// オブジェクト
    alert(properties["obj_name1"].type);	// 要素取り出し
    alert(properties["obj_name2"].options[0]); // 配列要素取り出し
    alert(properties["obj_name2"].func1()); // 関数実行

ツールチップを表示する。

  • Dreamweaverの機能で挿入可能だが、以下の点をカスタマイズ。
    filetooltip.js
    • フォントサイズ"-1"に変更。(IEで文字が小さすぎるため)
    • デフォルトの文字色を"#000000"に変更(見づらいため)
    • 使用法
      <head>
      <script type="text/javascript" charset="EUC-JP" src="tooltip.js"></script>
      </head>
      <body>
      <div id="toolTipLayer" style="position:absolute; visibility: hidden"></div>
      <script language="JavaScript"><!--
      initToolTips(); //--></script>
      
      <a href="javascript:void(0);" onMouseOver="toolTip('ほげほげ')" onMouseOut="toolTip()">VIEW</a></td>
      </body>

正規表現のパターンに変数を使用する

Stringクラスのreplace()関数は、正規表現が使えて便利ですが、パターンに変数が使用できません。

var str = "hogehoge";
var rep = " ";
str = str.replace(/^/mg, rep); // 行頭に空白を追加(○正常動作)
str = str.replace("/^\\" + rep + "/mg", ""); // 行頭の空白を削除(×正常に動作しない)

eval()を使うと動作します。

str = eval('str.replace(/^\\' + rep + '/mg, "");');

alert()デバッグの変わりに変数をダンプする

alert();で変数名を表示してるようなデバックだと、関数、オブジェクト等が表示されない。
alert()デバックの変わりに使える手法。

以下のリンクから、debug.jsを落としてきて導入する。

debug.p(変数名);

とすると、別ウインドウでその変数の中身を表示してくれる。

	<html>
	<meta>
	<script language="JavaScript" src="debug.js"></script>
	<SCRIPT language="JavaScript">
	var type_str = "任意の文字列";
	var type_int = 0;
	var type_function = function(){};
	var type_object = new Object();
	debug.p(type_str);
	debug.p(type_int);
	debug.p(type_function);
	debug.p(type_object);
	</SCRIPT>
	</meta>
	<body>
	</body>
	</html>

項目移動型セレクトボックスを実装する

左側のセレクトボックスから右側のセレクトボックスへ項目を移動できる。
多数の項目から一部分を選択させる際に、マウスのみで操作させたい時に使う。

対応ブラウザIE6.0、Opera7.0、Firefox1.0

filemove_selectbox.html



添付ファイル: filetooltip.js 885件 [詳細] filemove_selectbox.html 1143件 [詳細] filephp_array.js 944件 [詳細] filerow_unlock.htm 1156件 [詳細] fileserialize.html 1160件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2018-08-17 (金) 14:26:05 (4d)