ワクガンス　|　JavaScriptの覚書

空判定関数

undefined,null,0,空文字,空配列,空オブジェクトなど様々な空値を判定する関数。

	// 空判定
	function _empty(v){
		if(v == null || v == '' || v=='0'){
			return true;
		}else{
			if(typeof v == 'object'){
				if(Object.keys(v).length == 0){
					return true;
				}
			}
			return false;
		}
	}

検証

2014-5-6 | 2017-2-7

数値チェックの検証 | 数字チェック

文字列が数字であるかチェックするには!isNaNとisFiniteが使いやすい。undefinedはnullなど異なる判定なので注意。
計算する前のデータチェックには、文字列型の数字をはじいてくれるNumber.isFiniteが便利。
もし文字列型の数字なら下記関数で数値型にすることができる。

	let f_num = Number.parseFloat('-123.456');
	let i_num = Number.parseInt('12345');

NaNとは"Not a Number" 、つまり数値ではないという意味がある。

Number型について Mozilla

数値チェックの検証

Demo

ノート	値	isNaN	!isNaN	isFinite	Number.isNaN	Number.isFinite	Number.isInteger
自然数	1000	false	true	true	false	true	true
文字列型の数字	900	false	true	true	false	false	false
小数値	0.01	false	true	true	false	true	false
文字列型の小数値	0.01	false	true	true	false	false	false
負の自然数	-900	false	true	true	false	true	true
文字列型の負の小数値	-0.01	false	true	true	false	false	false
数値型の0	0	false	true	true	false	true	true
文字列型の0	0	false	true	true	false	false	false
空文字		false	true	true	false	false	false
undefined	undefined	true	false	false	false	false	false
null	null	false	true	true	false	false	false
数字ではない	abcd	true	false	false	false	false	false
半角スペース		false	true	true	false	false	false
bool型のtrue	true	false	true	true	false	false	false
bool型のfale	false	false	true	true	false	false	false
NaN	NaN	true	false	false	true	false	false

2022-11-10

汎用的な数値変換関数空文字やNaNにも対応


    /**
     * 数値変換
     * 
     * @param any value 値
     * @return float 数値
     */ 
    function numConv(value){
        if(value == null) value = 0;
        if(isNaN(value)){
            value = 0;
        }else{
            value = value * 1;
        };

        return value;
    }

2022-11-27

デバッグ方法

FireFoxのfirebugとChromeで利用できる。

関数	説明
console.log(hoge);	コンソール画面に出力する
console.dir(obj);	オブジェクトのダンプを出力する
console.trace();	トレースを出力。呼び出し元がわかる。

メモリ解放の方法

「delete」を使う。

	delete obj;

「void 0;」をセットする方法もある。メモリ上に確保されていない値にも有効。

	ary.a=void 0;

参考サイト

チェックボックスにチェックを入れる方法

チェックボックスにチェックを入れたり外し利する方法。


	$(".chk_sel").prop({'checked':true}); // チェックを入れる。
	$(".chk_sel").prop({'checked':false}); // チェックをはずす。

以下の方法も可


	$(".chk_sel").prop({'checked':1}); // チェックを入れる。
	$(".chk_sel").prop({'checked':0}); // チェックをはずす。

2014-6-24 | 2016-11-16

数値を文字列化する

	var num=12345.6789;
	var str=num.toString();

文字列を数値化する

	var str="12345.6789";
	var num=str * 1;

文字列を検索し、その位置を取得

「indexOf」関数を使う。
位置 = 対象文字列.indexOf( "検索文字"[, 検索位置・省略可] )

見つからなかった場合、 -1 が取得される。
先頭が一致した場合、0 が取得される。

参考サイト

2014-6-24 | 2016-10-12

極小値と極大値（Number.MIN_VALUE、Number.MAX_VALUE）

JavaScriptで扱える極大値と極小値は定数で用意されている。

極小値の定数。
Number.MIN_VALUE
値は5e-324

極大値の定数。
Number.MAX_VALUE
値は1.7976931348623157e+308
※Number.MAX_VALUEより大きい値は'Infinity'となる。

覚書：連想配列（オブジェクト）に要素を追加

Javascriptの連想配列は通常の配列とは、全く別物であるので混同しないように注意。
また連想配列とオブジェクトは全く同じものである。

連想配列（オブジェクト）に値を追加する方法は2通りある。
キーを指定して値をセットする方法と、プロパティのようにセットする方法であり、意味するところは全く同じである。

連想配列（オブジェクト）にキーを指定して値をセット

	var obj={};
	obj['x']=20;
	obj['y']=21;
	console.dir(obj);

プロパティのようにセットしているが、上と全く同じ。

	var obj={};
	obj.x=20;
	obj.y=21;
	console.dir(obj);

配列のように値をセットすることもできる。

	var obj={};
	obj[0]=20;
	obj[1]=21;
	console.dir(obj);

半角英数字チェック

	function is_alpha_numeric(str)
	{
		return /^[a-zA-Z0-9]+$/.test(str);
	}

※空値はfalseと判定

半角英数字チェック。ハイフンやアンダースコア記号もOK


	function is_alpha_numeric2(str)
	{
		return /^[a-zA-Z0-9_\-]+$/.test(str);
	}

サンプル

filter（フィルター）の使い方

filterメソッドを使うと配列への絞り込みが容易になる。

	var ary=[1,2,3,4,5,6,7,8,9,10];

	//★5以上を抽出するフィルター
	var ary2=ary.filter(function(value, index, ar){
		return (value >= 5);//条件に一致するのみ値のみ新しい配列にセット。条件外は除外。
	});

サンプル

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<meta name="google" content="notranslate" />
		<title>filter（フィルター）の使い方</title>
		<link rel="stylesheet" type="text/css" href="common1.css"  />
		<script src="jquery-1.11.1.min.js"></script>
		<script>


			$(document).ready(function(){

				var ary=[1,2,3,4,5,6,7,8,9,10];

				//★5以上を抽出するフィルター
				var ary2=ary.filter(function(value, index, ar){
					return (value >= 5);
				});


				$("#a1").html(ary.join(","));
				$("#a2").html(ary2.join(","));

			});


		</script>

		<style type="text/css">

		</style>

	</head>
	<body>
		<div id="page1">
		<h1 id="header">filter（フィルター）の使い方</h1>
		<div class="container" >

			<div class="sec1">

				<div>フィルター前</div>
				<div id="sec1-1"></div>
				<hr>
				<div>フィルター後(5以上でフィルターをかける)</div>
				<div id="sec1-2"></div>

			</div><!-- sec1 -->

		</div><!-- content -->
		<div id="footer">(C) kenji uehara 2014/08/05</div>
		</div><!-- page1 -->
	</body>
</html>

サンプル
参考サイト

SELECTのオプション要素にリストの値をセットする


	/**
	 * SELECTのオプション要素にリストの値をセットする
	 * @param selElm SELECT要素
	 * @param list  リスト。 リストの構造→ [キー] = テキスト
	 * @param value 始めの選択値【省略可】
	 * @param empty_text 空選択肢のテキスト【省略可】
	 */
	function setSelectOption(selElm,list,value,empty_text){
		
		var ops_str='';
		
		if(!_empty(empty_text)){
			ops_str = "<option value=''>" + empty_text + "</option>"
		}
		
		for(var i in list){
			var text = list[i];
			
			var selected = '';
			if(i == value){
				selected = 'selected';
			}
			ops_str += "<option value='" + i + "' " + selected + ">" + 
				text + "</option>";
		}
		
		selElm.html(ops_str);
		
	}

2017-4-4 | 2018-4-23

動的にセレクトボックスの選択肢を変更する | SELECTの動的変更

Demo

HTML


	<select  id="select1" onchange="selectChange()" ></select><br>
	<button type="button" class="btn btn-primary" onclick="dynamicChange(1)">選択肢変更1</button>
	<button type="button" class="btn btn-primary" onclick="dynamicChange(2)">選択肢変更2</button>
	<div id="res"></div>

JavaScript


	let g_value;
	
	function dynamicChange(no){
		
		let options = getOptions(no);
		
		let options_str = '';
		for(let key in options){
			let name = options[key];
			options_str += `<option value='${key}'>${name}</option>`;
		}
		
		$('#select1').html(options_str);
		
		$('#select1').val(g_value);
		
	}
	
	function getOptions(no){
		let options = null;
		if(no==1){
			options = {
				'kani':'カニ',
				'neko':'ネコ',
				'buta':'ブタ',
				'sika':'シカ',
				'wani':'ワニ',
			};
			
		}else if(no==2){
			options = {
				'hiratakuwagata':'ヒラタクワガタ',
				'miyamakuwagata':'ミヤマクワガタ',
				'neko':'ネコ',
			};
			
		}
		
		return options;
		
	}
	
	function selectChange(){
		let value = $("#select1").val();
		$('#res').html(value);
		g_value = value;
	}

2022-2-25

JavaScriptの覚書

動的にセレクトボックスの選択肢を変更する | SELECTの動的変更

xxx