JavaScriptの覚書 | ワクガンス

参照を切らずに配列を初期化する（配列を再生成せずに初期化）


	var ary1 = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55];
	var ary2 = ary1;
	
	// 配列の参照を切らずに初期化する。
	ary1.length = 0; // 別の方法→ ary1.splice(0, ary1.length);
	
	console.log(ary1);// → []
	console.log(ary2);// → []

2018-2-21

配列の値をすべて0でリセット


	var ary1 = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55];
	var ary2 = ary1;
	
	// 配列の値をすべて0でリセットする
	ary1.fill(0);
	
	console.log(ary1);// → [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
	console.log(ary2);// → [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

2018-2-21

オブジェクトにキーが存在するか判定する | in,hasOwnProperty

オブジェクトに指定したキーが存在するかどうか判定する方法には「in」または「hasOwnProperty」を用いる。
２階層以降の深い場所にあるフィールドは判定できないようである。


	var animal = {'neko':'ネコ','yagi':null,'kani':undefined,
			'musi':{'kuwagata':'クワガタ'}};
	
	animal.prototype = {'wasi':'ワシ'};

	console.log(animal.hasOwnProperty('neko')); // → true
	console.log(animal.hasOwnProperty('yagi')); // → true
	console.log(animal.hasOwnProperty('kani')); // → true
	console.log(animal.hasOwnProperty('tanuki')); // → false
	console.log(animal.hasOwnProperty('kuwagata')); // → false
	console.log(animal.hasOwnProperty('wasi')); // → false

	console.log('neko' in animal);// → true
	console.log('yagi' in animal);// → true
	console.log('kani' in animal);// → true
	console.log('tanuki' in animal);// → false
	console.log('kuwagata' in animal);// → false
	console.log('wasi' in animal);// → false

2018-2-21

DateTimePicker.jsの使い方

公式
公式GitHub
デモ

HTML


	<link href="jquery.datetimepicker.min.css" rel="stylesheet">
	<script src="/note_prg/js/jquery.js"></script>
	<script src="jquery.datetimepicker.full.min.js"></script>
	～略～
	<input id="test_date" type="text" value="2012-12-12 12:12" />

javascript


	$(()=>{
		$.datetimepicker.setLocale('ja');// 日本語化
		$('#test_date').datetimepicker({
			format:'Y-m-d H:i',
		});
	});

2018-3-24

要素を別の処理で書き換えたら、参照先の要素オブジェクトにも反映されるか？

要素から要素オブジェクトを生成した後、別の処理にて要素の中身を書き換える。
書き換えは要素オブジェクトにも反映されているか？
答え：反映されている。

検証

検証

HTML


	<div id="test1">
		<div>猫の要素</div>
	</div>
	<input type="button" value="追加" onclick="addTest()" />
	<input type="button" value="出力" onclick="output()" />
	
	<p>出力</p>
	<div id="res"></div>

JavaScript


	var elmObj1;
	
	$(()=>{
		elmObj = jQuery("#test1");
	})
	
	function addTest(){
		jQuery("#test1").append('<div>犬</div>');
	}
	
	function output(){
		jQuery("#res").html(elmObj.html());
	}

2018-6-18

スリープ関数


	/**
	 * スリープ
	 * @param interval スリープ時間(ミリ秒）
	 * 
	 */
	function sleep(interval){
		var start_u = Math.floor(new Date());
		
		var flg = true;
		while(flg){
			var now_u = Math.floor(new Date());
			if(now_u - start_u > interval){
				flg = false;
			}
		}
	}

2018-6-23

バックグランドの並列処理 | WebWorkerの使い方

JavaScriptにはsetTimeout関数,setInterval関数,XMLHttpRequest(Ajax)などの非同期処理が存在する。
しかし、JavaScriptの非同期処理は並列処理は同じものとは言えない。
JavaScriptの非同期処理は、サーバー側に仕事をさせる場合、並列処理となるが、自スクリプト中の他の処理を非同期処理させようとしても並列処理にはならない。
つまり同期処理では、JavaScriptで書かれた重たい処理を並列実行することができない。

だが Web Workerを使えば、JavaScriptで書かれた重たい処理を並列実行させることができる。
しかし、Web WorkerはDOM操作やjQueryが使えないという弱点が存在する。
また、メイン処理とWeb Workerの並列処理の間でデータをやり取りする場合、文字列か連想配列(Object)でなければならない。クラスのインスタンスや、jQueryオブジェクトのデータやり取りはできない。

並列処理の記述場所は別のJSファイルである。特定の関数を並列処理にすることはできないようである。

検証

HTML


	<input type="button" value="テスト2" onclick="test2()" />
	<input type="button" value="並列処理テスト" onclick="parallelCheck1()" /><br>
	<div id="res1"></div>

JavaScript


	function test2(){
		
			output('Web Workerを使って　重たい初期化を実行中です。(約3秒)');
		
			// キャッシュ読み込み回避ようのUNIXタイムスタンプを取得
			var u = Math.floor(new Date());
			
			//workerオブジェクト
			var worker = new Worker('sub_work.js?u=' + u);
	
			// 並列処理に送信するデータ
			var obj = {'inu':'イヌ'};
	
			// 並列処理にデータを渡す
			worker.postMessage(obj);
			
			// 受信イベント：並列処理が終わったときに受信が行われる。
			worker.addEventListener('message', function(e) {
				output(e.data.bark);
				output('並列処理を終了しました。');
			}, false);
	}
	
	function parallelCheck1(){
		output('別の並列処理を実行しました。');
	}
	
	function output(msg){
		jQuery('#res1').append(msg + '<br>');
		console.log(msg);
	}

sub_work.js（並列処理）


	//web worker
	self.addEventListener('message', function(e) {
	
		var obj = e.data;
		
		obj['bark'] = obj.inu + 'がワインワインとせがむ';
		console.log(obj);
		
		sleep(3000);
	
		//処理結果を送信
		self.postMessage(obj);
	}, false);
	
	
	/**
	 * スリープ
	 * @param interval スリープ時間(ミリ秒）
	 * 
	 */
	function sleep(interval){
		var start_u = Math.floor(new Date());
		
		var flg = true;
		while(flg){
			var now_u = Math.floor(new Date());
			if(now_u - start_u > interval){
				flg = false;
			}
		}
	}

2018-6-23

要素に設定されているすべてのCSSプロパティを取得する

currentStyle かgetComputedStyleを使えば指定要素のCSSのプロパティをすべて取得できるようである。
しかし、プロパティの量が膨大である。なお取得はプロパティのみで、値は取得できていない。

検証

	<script>
	function test1(){
		var elm = document.getElementById('test1');
		var props = elm.currentStyle || document.defaultView.getComputedStyle( elm, '' );
		
		var json_str = JSON.stringify(props);
		$('#res').html(json_str);
	}
	</script>
	
	<style>
	#test1{
		color:red;
		width:300px;
		height:100px;
	}
	</style>
	<div id="test1" style="background-color:Plum">
		うゐのおくやまけふこえてあさきゆめみしゑひもせすん
	</div>
	<input type="button" value="すべてのCSSプロパティを取得する" onclick="test1()"  /><br>
	<p>出力</p>
	<div id="res" style="width:100%;height:auto"></div>

2018-6-25

容量サイズの数値を適切な単位付き数値に変換する（Byte,KB,MB,GB,TB)

デモ

サンプルソースコード


	var res = convSizeUnit(1234);
	console.log(res);// → 1.2KB
	
	/**
	 * 容量サイズの数値を適切な単位表示に変換する（Byte,KB,MB,GB,TB)
	 * @param int value1 入力数値
	 * @param int n 小数点以下の桁（四捨五入）
	 * @returns string 単位表示
	 */
	function convSizeUnit(value1,n){
		
		if(n == null) n=1;
	
		var res = '';
		if(value1 < 1000){
			res = value1 + 'Byte';
		}else if(value1 < Math.pow(10,6)){
			value1 = Math.round( value1  * Math.pow(10,n - 3) ) / Math.pow(10,n); // 四捨五入
			res = value1 + 'KB';
		}else if(value1 < Math.pow(10,9)){
			value1 = Math.round( value1  * Math.pow(10,n - 6) ) / Math.pow(10,n);
			res = value1 + 'MB';
		}else if(value1 < Math.pow(10,12)){
			value1 = Math.round( value1  * Math.pow(10,n - 9) ) / Math.pow(10,n);
			res = value1 + 'GB';
		}else{
			value1 = Math.round( value1  * Math.pow(10,n - 12) ) / Math.pow(10,n);
			res = value1 + 'TB';
		}
		return res;
	}

2018-8-1

数値から桁数を取得する


	var keta = getDigit(12345);
	console.log(keta); // → 5
	
	/**
	 * 数値の桁数を取得する
	 * @note
	 * 0,小数値,負値は、桁数0になる。
	 * 小数点以下の桁数は数えない。
	 * 
	 * @param num 入力数値
	 * @param sinsu 進数（デフォルト:10進数）
	 * @returns 桁数
	 */
	function getDigit(num, sinsu) {
		if (sinsu == null) sinsu = 10;
		return Math.log(num) / Math.log(sinsu) + 1 | 0;
	}

2018-8-1

JavaScriptの覚書 | ワクガンス

参照を切らずに配列を初期化する（配列を再生成せずに初期化）

配列の値をすべて0でリセット

オブジェクトにキーが存在するか判定する | in,hasOwnProperty

DateTimePicker.jsの使い方

要素を別の処理で書き換えたら、参照先の要素オブジェクトにも反映されるか？

スリープ関数

バックグランドの並列処理 | WebWorkerの使い方

要素に設定されているすべてのCSSプロパティを取得する

容量サイズの数値を適切な単位付き数値に変換する（Byte,KB,MB,GB,TB)

数値から桁数を取得する

XXX