ワクガンス　|　JavaScriptの覚書

JSクラス内のコールバック関数内で、自分のメンバやメソッドにアクセスする | コールバックにあらかじめ引数を渡す

Demo


	$(()=>{
		let ahiru = new Ahiru();
		let torikago = new Torikago();
		
		var func1 = ahiru.bark.bind(ahiru); // ← コールバックにする関数にAhiruのオブジェクトを引数として渡す
		torikago.setCallback(func1);
		
		// テスト実行
		torikago.move();
		
	});
	
	
	class Ahiru{
		bark(){
			this.barkDetail(); // thisはbindで渡されたAhiruオブジェクトを指している。
		}
		
		barkDetail(){
			$('#res').html("ガーガー");
		}
	}
	
	class Torikago{
		
		setCallback(callback){
			this.callback = callback;
		}
		
		move(){
			this.callback();
		}
	}

出力

ガーガー

方法（旧式）

新しい方法を確認。
「JavaScriptでクラスを実現する」のソースコードを参考。 2016-4-5

方法（旧）

JSクラスのコールバック関数内ではthisを使って、自分のメンバやメソッドにアクセスすることができない。
スマートなやり方でないが、以下の代替案で、自分のメンバにアクセスしてみた。

ソースコード

	function test(){
		var c1=new Class1();
		c1.init(c1);
		c1.execution();
	}

クラス

	var class1;//自分自身のインスタンス。コールバック関数内で使用する。
	var Class1 =function(){
	
		this.m_test='hello world';
		
		this.init=function(instanse){
			class1=instanse;
		}
		
		this.execution=function(){
			//一秒後に関数をコールバックする。
			setTimeout(function(){
				//コールバック関数内
				
				// 自分自身のインスタンスを通して、メンバの値を取得する。  × this.m_testを指定すると値が取れない。
				var test=class1.m_test;
				alert(test);
			}, 1000);
		};
	};

サンプル

方法（旧式2）：引数に自分自身のインスタンスを渡す方法

こちらのやり方がスマートである。

ソースコード

	function test(){
		var c1=new Class1();
		c1.execution(c1);
	}

クラス

	var Class1 =function(){
		
		//★引数に自分自身の
		this.execution=function(myself){
			//一秒後に関数をコールバックする。
			setTimeout(function(){
				//コールバック関数内
				
				// 自分自身のインスタンスを通して、メンバの値を取得する。  × this.m_testを指定すると値が取れない。
				var test=myself.m_test;
				alert(test);
			}, 1000);
		};
	};

2015-10-22 | 2019-5-20

ワーカーログクラス | LogForWorker

最初の数十件のログと最後の数十件のログを蓄積しておき、必要な時にまとめて出力するクラス。
最初と最後の数十件のみ保存するので、メモリの節約になる。

LogForWorker.js

インクルード

	<script src="LogForWorker.js"></script>

ソースコード

	$( function() {
		var logW=new LogForWorker();
		for(var i=0;i<32;i++){
			logW.log(i);
		}
		var fLogs=logW.getFirstLogs();
		$('#res_f').html(fLogs.join(','));
		var lLogs=logW.getLastLogs();
		$('#res_l').html(lLogs.join(','));

	});

出力

	0,1,2,3,4,5,6,7,8,9
	22,23,24,25,26,27,28,29,30,31

サンプル

文字列から記号を取り除く

ソースコード

str=str.replace(/[!"#$%&'()\*\+\-\.,\/:;<=>?@\[\\\]^_`{|}~]/g, '');

「-」、「:」、「_」は取り除かない

str=str.replace(/[!"#$%&'()\*\+\.,\/;<>?@\[\\\]^`{|}~]/g, '');

参照

URLからホスト・ドメインを取得する

取得方法その1 | 正規表現を使う方法

ソースコード

		var url="http://www.example.com:8080/animals/";//例
		var host_domain = url.match(/^[httpsfile]+:\/{2,3}([0-9a-z\.\-:]+?):?[0-9]*?\//i)[1];

正規表現を使った方法の検証
URL	抽出ホスト・ドメイン
http://user_name99:pass_word99@www.example.com:8080/animals/neko?id=99&xx=88#kani	false
http://www.example.com:8080/animals/neko?id=99&xx=88#kani	www.example.com
http://example.com:8080/animals/neko?id=99&xx=88#kani	example.com
https://example.com:8080/animals/neko?id=99&xx=88#kani	example.com
ws://example.com:8080/animals/neko?id=99&xx=88#kani	false
http://example.com/animals/neko?id=99&xx=88#kani	example.com
http://example.com	false
	false

参照元

取得方法その2 | URLからホスト・ドメインを取得する関数

extractHostDomain関数

	
		/**
		 * URLからホスト・ドメインを取得する。
		 * @param url URL
		 * @returns ホスト・ドメイン（例：www.example.com）
		 * @link http://stackoverflow.com/questions/8498592/extract-root-domain-name-from-string
		 */
		function extractHostDomain(url) {
		    var host_domain;
		    
		    if (url.indexOf("://") > -1) {
		        host_domain = url.split('/')[2];
		    }
		    else {
		        host_domain = url.split('/')[0];
		    }
	
		    host_domain = host_domain.split(':')[0];
	
		    return host_domain;
		}

extractHostDomain関数の検証
URL	抽出ホスト・ドメイン
http://user_name99:pass_word99@www.example.com:8080/animals/neko?id=99&xx=88#kani	user_name99
http://www.example.com:8080/animals/neko?id=99&xx=88#kani	www.example.com
http://example.com:8080/animals/neko?id=99&xx=88#kani	example.com
https://example.com:8080/animals/neko?id=99&xx=88#kani	example.com
ws://example.com:8080/animals/neko?id=99&xx=88#kani	example.com
http://example.com/animals/neko?id=99&xx=88#kani	example.com
http://example.com	example.com

参照元

サンプル

JavaScriptでサブミットする

html source

	<form action="/neko/reg/"  id="neko_form" method="post" >
	・・・
	</form>

js source

	$("#neko_form").submit();

テキストエリアに貼り付けたExcelデータをJSONコード化する

タブ区切りの複数行からなるデータを、行列配列に変換し、さらにJSON化する。

html source

	<textarea id="pasting_csv" placeholder="CSVを貼り付けてください"></textarea>
	<input type="button" value="行列データ（JSON)に変換" onclick="execution1()"  />
	<div id="res"></div>

js source

	function execution1(){
		var text = $('#pasting_csv').val();
		var ary = text.split(/\r\n|\r|\n/);
		var data=[];
		for (var i=0;i<ary.length;i++){
			var row=ary[i];
			var dd=row.split(/\t/);
			data.push(dd);
		}
		var jsonStr = JSON.stringify(data);
		$('#res').html(jsonStr);
	}

サンプル

数値範囲入力のUI noUiSlider

必要なファイル

	<link href="nouislider.min.css" rel="stylesheet">
	<script src="jquery-1.11.1.min.js"></script>
	<script src="nouislider.min.js"></script>

html source

	<div id="slider" style="width:350px;"></div>
	<input id="test_v1" type="number" value="0" />
	<input id="test_v2" type="number" value="0" />

js source

	$( function() {
		//～読込イベント処理～
		
		var slider = $('#slider').get(0);

		//noUiSliderスライダーの生成と設定をする。
		noUiSlider.create(slider, {
			start: [20, 80],//初期値
			step:10,//ステップ：スライダー一切りの間隔値
			connect: true,
			tooltips: false,// true:スライダーにツールチップを表示
			range: {//入力できる数値の範囲
				'min': 0,
				'max': 100
			}
		});
		
		//スライダーを動かしたときのイベント
		slider.noUiSlider.on('update', function ( values, handle ) {
			var v1=values[0];
			var v1=Math.round(v1);
			$('#test_v1').val(v1);
		
			var v2=values[1];
			var v2=Math.round(v2);
			$('#test_v2').val(v2);
		});
		
		//テキストボックスの値を変更したときに、スライダーにも反映させる。
		$('#test_v1').blur(function(e){
			var v1=$('#test_v1').val();
			var v2=$('#test_v2').val();
			
			slider.noUiSlider.set([v1,v2]);
		});
		
		//テキストボックスの値を変更したときに、スライダーにも反映させる。（右の値）
		$('#test_v2').blur(function(e){
			var v1=$('#test_v1').val();
			var v2=$('#test_v2').val();
			
			slider.noUiSlider.set([v1,v2]);
		});
		

	});

公式サイト・ダウンロード先
サンプル

livipage.js | ページ内リンク先プレビュー

livipage.jsは、リンクにカーソルを合わせたとき、リンク先をプレビュー表示させることができる。
ただしページ内リンク限定で、別ファイルのページリンクしている要素には対応していない。
livipage.jsのダウンロード

使い方

プレビュー表示させたいリンクのclass属性にlivipageを指定するだけ。

インクルード

	<script src="jquery.js"></script>
	<script src="livipage.js"></script>

例

	<div style="width:100px;height:400px">
	<a href="#sample1" class="livipage" >いろは歌</a><br><br>
	</div>
	
	<div id="sample1" >
		いろはにほへとちりぬるをわかよたれそつねならむ<br>
		うゐのおくやまけふこえてあさきゆめみしゑひもせす<br>
	</div>

サンプル

URLエンコード | encodeURIComponent

URLエンコードの基本

	var str = 'あ'
	var str2 = encodeURIComponent(str);
	console.log(str2);
	//あ → %E3%81%82

URLエンコードの種類

URLエンコードは下記の3種類存在する。違いはエンコードできる記号がそれぞれ異なっている。
またそれぞれに対応するデコード関数も存在する。

エンコード	デコード	エンコード対象外	注意
encodeURI	decodeURI	;/?:@&=+$-_!~*.,()a#'
encodeURIComponent	decodeURIComponent	-_!~*.()a'
escape	unescape	*+-_./	非推奨。ブラウザごとに挙動が異なるようである。

参考サイト
参考サイト2

印文字から左側および右側の文字を切り出す

印文字から左側の文字を切り出す

source code

	function stringLeft(s,mark){
		if (s==null || s==""){
			return s;
		}
		var a=s.indexOf(mark);
		var s2=s.substring(0,a);
		return s2;
	}

使用例

	var str = 'ネズミを捕る老いたネコが布団の上で寝ている';
	var res = stringLeft(str,'ネコ');
	console.log(res);// → res = 'ネズミを捕る老いた'

印文字から右側の文字を切り出す

source code

	function stringRight(s,mark){
		if (s==null || s==""){
			return s;
		}
		
		var a=s.indexOf(mark);
		var s2=s.substring(a+mark.length,s.length);
		return s2;

	}

使用例

	var str = 'ネズミを捕る老いたネコが布団の上で寝ている';
	var res = stringRight(str,'ネコ');
	console.log(res);// → res = 'が布団の上で寝ている'

xxx

参考サイト