File API | ファイル名、サイズ、MIME、更新日時を取得

File APIはHTML5の機能である。
選択したファイルからファイル名、ファイルサイズ、MINEタイプ、更新日時を取得する。
これらのファイル情報はJavaScriptのみで取得でき、サーバーサイド(PHPなど)で何もする必要はない。
複数のファイルを選択することも可能である。

html

	<!DOCTYPE html>
	<html lang="ja">
		<head>
			<meta charset="utf-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<meta name="viewport" content="width=device-width, initial-scale=1">
			<script src="jquery-1.11.1.min.js"></script>
			<script src="file_api1.js"></script>
		</head>
	<body>
		<input id="file1" type="file" multiple>
		<div id="res"></div>
	</body>
	</html>
	

javascript(file_api1.js)

	$( function() {
		//ファイルアップロードイベント
		$('#file1').change(function(e) {
			//ファイルオブジェクト配列を取得(配列要素数は選択したファイル数を表す)
			var files = e.target.files;
			//ファイルオブジェクトからファイル名、ファイルサイズ、MIMEタイプ、更新日時を取得する。
			var fileInfo = "none";
			for(var i = 0; i < files.length; i++){
				var fileObj = files[i];
				fileInfo +=
					'ファイル名:' + fileObj.name + '<br>' +
					'ファイルサイズ:' + fileObj.size + ' Byte<br>' +
					'MIME:' + fileObj.type + '<br>' +
					'更新日時:' + fileObj.lastModifiedDate + '<hr>';
				}
			$('#res').append(fileInfo);
		});
	});
	

サンプル
参考サイト

File API | テキストファイルからテキスト文字列を取得

選択したファイルからテキストを読み込み表示する。
JavaScriptのみでテキスト読み込みを行っており、サーバーサイド(PHPなど)で何もする必要はない。

html
	<!DOCTYPE html>
	<html lang="ja">
		<head>
			<meta charset="utf-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<meta name="viewport" content="width=device-width, initial-scale=1">
			<script src="jquery-1.11.1.min.js"></script>
			<script src="file_api2.js"></script>
		</head>
	<body>
		<input id="file1" type="file" multiple>
		<div id="res"></div>
	</body>
	</html>
	

javascript(file_api2.js)
	$( function() {
	
		//ファイルアップロードイベント
		$('#file1').change(function(e) {
		
			//ファイルオブジェクト配列を取得(配列要素数は選択したファイル数を表す)
			var files = e.target.files;
			var fileObj = files[0];
			
			//ファイルリーダーにファイルオブジェクトを渡すと、ファイル読込完了イベントなどをセットする。
			var reader = new FileReader();
			reader.readAsText(fileObj, "Shift_JIS"); // ← テキストファイルの文字コードがshift-jisである場合
			//reader.readAsText(fileObj); // ← utf-8の場合(BOMの有無は問題ない)
			
			//ファイル読込完了イベント
			reader.onload = function(evt) {
			
				//テキストデータを取得する
				var text_data = evt.target.result;
				
				//XSSサニタイズ
				text_data = xssSanitaizeEncode(text_data);
				
				//出力
				$("#res").html(text_data);
			}
		});
	});
	
	
	 
	//XSSサニタイズエンコード
	function xssSanitaizeEncode(str){
		return str.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
	}	
	

サンプル

関連サンプル
File API | ファイル名、サイズ、MIME、更新日時を取得
File API | ファイル読込の進捗
File API | 複数ファイルアップロード

選択状態のテキストを取得 | jQuery.selection

jQuery.selection ライブラリを利用すると、選択状態のテキストを容易に取得可能である。
基本的な使用方法は「jquery.selection.js」を読込、「$.selection()」を呼び出すだけである。

ソースコード
	~略~
	<script src="jquery.selection.js"></script>
	~略~
	<script>
	var res = $.selection();//選択範囲の文字列を取得する。
	~略~
	</script>
	

公式サイト サンプル

テキストエリア内にて選択状態のテキストを取得 | jQuery.selection

jQuery.selection を利用して、テキストエリア内で選択しているテキストを取得できる。
また、選択テキストの前後に文字を挿入、選択テキストを別の文字に置き換えることもできる。

htmlソース

	~略~
	<script src="jquery.js"></script>
	<script src="jquery.selection.js"></script>
	~略~
	<textarea id="test1" >
	いろはにほへとちりぬるをわかよたれそつねならむ
	うゐのおくやまけふこえてあさきゆめみしゑひもせす
	</textarea>
	

選択中のテキストを取得する

	var res = $('#test1').selection();

選択テキストの前後に文字を挿入

	$('#test1')
		.selection('insert', {text: 'Neko', mode: 'before'}) //選択テキストの前に挿入
		.selection('insert', {text: 'Yagi', mode: 'after'}); //選択テキストの後に挿入
	

選択テキストを別文字に置換する

	$('#test1').selection('replace', {text: '置き換え文字A'});
公式サイト サンプル

テキストエリアにアンドゥ機能とリドゥ機能を組み込むundo_a.js | Undo,Redo

テキストエリアにアンドゥ機能とリドゥ機能を組み込みます。

undo_a.jsのダウンロード

ソースソード
	<html lang="ja">
		<head>
			<script src="jquery"></script>
			<script src="undo_a.js"></script>
			<script>
			$( function() {
				var params = {
					'ta_slt':'#ta1',
					'undo_btn_slt':'#undo1',
					'redo_btn_slt':'#redo1',
				};
				var undoA = new UndoA(params);
			});
			</script>
		</head>
	
	<body>
		<button type="button" id="undo1">UNDO</button>
		<button type="button" id="redo1">REDO</button><br>
		<textarea id="ta1" style="width:500px;height:200px">いろは</textarea>
	</body>
	</html>
	
サンプル

JavaScriptでクラスを実現する

JavaScriptでもクラスを実現することができる。

Publicメソッドだけでなく、コンストラクタやPrivateメソッドも実現可能である。
コールバック関数やPrivateメソッドからメンバにアクセスする場合、thisではなくmyselfを介すること。

継承も実現可能である。

実装ソースコード

	<script src="jquery.js"></script>
	<script src="Animal.js"></script>
	~省略~
	<script>
	var animal;//動物クラス
	
	$( function() {
		// 初期値を渡しながら、Animalクラスを作成する。
		var param ={
			'res_slt':'#res',
			'animal_name':'ヤンバルクイナ'};
			
		animal = new Animal(param);
	});

	function test1(){
		// タイトルを表示する
		animal.showTitle();
		
		// 数秒後に動物名を表示する
		animal.showAnimalName('国頭村');
	}
	</script>
	~省略~
	<input type="button" value="テスト実行" onclick="test1()" />
	<div id="res"></div>
	

Animalクラスのソースコード

	var Animal =function(p_params){
		
		// 出力要素
		this.res_slt = p_params.res_slt;
		
		// 動物名
		this.animal_name = p_params.animal_name;
	
		// 自分自身のインスタンス。  プライベートメソッドやコールバック関数で利用するときに使う。
		var myself=this;
	
		/**
		 * コンストラクタ
		 */
		this.constract=function(){
			var str = "コンストラクタが呼び出されました。<br>";
			$(this.res_slt).append(str);
		};
		
		/**
		 * 当クラスのインスタンスを取得する
		 */
		this.getInstance = function(){
			return this;
		};
		
		/**
		 * タイトルを表示する
		 */
		this.showTitle = function(){
			var str = '動物のタイトル<br>';
			$(this.res_slt).append(str);
		};
	
		/**
		 * 動物名を表示させる。
		 * 
		 * コールバック系の関数であるsetTimeoutを使い、2秒後に動物名を表示させる。
		 * @param string place 場所
		 */
		this.showAnimalName=function(place){
		    setTimeout(function(){
		    	var str = place + 'の' + myself.animal_name + 'について。【2秒後に表示】<br>';
		    	$(myself.res_slt).append(str);
	
				privateName();//プライベートメソッドを呼び出せる
		    	
		    },2000);
		};
		
		
		/**
		 * プライベートなメソッド
		 * メンバにアクセスするときはthisではなくmyselfを使ってアクセスすること。
		 */
		function privateName(){
			var str = 'プライベートな' + myself.animal_name;;
			$(myself.res_slt).append(str);
		};
		
		//コンストラクタ呼出し(クラス末尾にて定義すること)
		this.constract();
	};
	

出力

コンストラクタが呼び出されました。
動物のタイトル
国頭村のヤンバルクイナについて。【2秒後に表示】
プライベートなヤンバルクイナ

サンプル

JavaScriptのクラス | その2


	/**
	 * Class of JavaScript
	 * 
	 * @param param
	 * - flg
	 */
	var Animal =function(param){
		
		
		this.param = param;
		
		var self=this; // Instance of myself.
	
		/**
		 * initialized.
		 */
		this.constract=function(){
			
			// If Param property is empty, set a value.
			this.param = _setParamIfEmpty(this.param);
			
		}
		
		// If Param property is empty, set a value.
		function _setParamIfEmpty(param){
			
			if(param == undefined){
				param = {};
			}
			
			if(param['flg'] == undefined){
				param['flg'] = 0;
			}
			
			return param;
		}
		
		
		
		this.execute = function(){
			console.log('execute');
		}
	
		// call constractor method.
		this.constract();
	}
	


JavaScriptのクラス | その3

JavaScriptのクラスのひな形。
パラメータをローカルストレージに保存する機能を備えている。
現在、フレームワーク化を検討中・・・2017-3-24


	/**
	 * Class of JavaScript
	 * 
	 * @param param
	 * - flg
	 */
	var Animal =function(param){
		
		
		this.param = param;
		
		this.saveKeys = ['flg','xxx']; // ローカルストレージへ保存と読込を行うparamのキー。
		
		this.ls_key = "Animal"; // ローカルストレージにparamを保存するときのキー。
		
		var self=this; // Instance of myself.
	
		/**
		 * initialized.
		 */
		this.constract=function(){
			
			// If Param property is empty, set a value.
			this.param = _setParamIfEmpty(this.param);
			
		}
		
		// If Param property is empty, set a value.
		function _setParamIfEmpty(param){
			
			if(param == undefined){
				param = {};
			}
		
			// ローカルストレージで保存していたパラメータをセットする
			var param_json = localStorage.getItem(self.ls_key);
			if(!_empty(param_json)){
				var lsParam = JSON.parse(param_json);
				if(lsParam){
					for(var i in self.saveKeys){
						var s_key = self.saveKeys[i];
						param[s_key] = lsParam[s_key];
					}
				}
			}
			
			if(param['flg'] == undefined){
				param['flg'] = 0;
			}
			
			return param;
		}
		
		
		function execute(){
			console.log('TEST');
		}
		
		this.execute = function(){
			return execute();
		}
		
		
	
	
		/**
		 * ローカルストレージにパラメータを保存する
		 */
		 
		function saveParam(){
			var lsParam = {};
			for(var i in self.saveKeys){
				var s_key = self.saveKeys[i];
				lsParam[s_key] = self.param[s_key];
			}
			var param_json = JSON.stringify(lsParam);
			localStorage.setItem(self.ls_key,param_json);
		}
		
		this.saveParam = function(){
			saveParam();
		}
		
		
		
		/**
		 * ローカルストレージで保存しているパラメータをクリアする
		 */
		function clear(){
			localStorage.removeItem(self.ls_key);
		}
		
		this.clear = function(){
			clear();
		}
		
		
		
		/**
		 * Get value by the field.
		 * 
		 * @note
		 * Find the element that matches the field from the parent element and get its value.
		 * The field is class attribute or name attribute.
		 * 
		 * @param parElm : parent element.
		 * @param field 
		 * @returns
		 */
		function _getValueByField(parElm,field){
			var v = undefined;
			var elm = _findInParentEx(parElm,field);
			if(elm[0]){
				v = _getValueEx(elm);
			}
			return v;
		}
		
		
		/**
		 * Get value from elements regardless of tag type.
		 * @param elm : Value element.
		 * @returns Value from value element.
		 */
		function _getValueEx(elm){
			
			var v = undefined;
			var tagName = elm.prop("tagName"); 
			
			if(tagName == 'INPUT' || tagName == 'SELECT' || tagName=='TEXTAREA'){
				
				var typ = elm.attr('type');
	
				if(typ=='checkbox'){
					
					v = 0;
					if(elm.prop('checked')){
						v = 1;
					}
					
				}
				
				else if(typ=='radio'){
					var opElm = form.find("[name='" + f + "']:checked");
					v = 0;
					if(opElm[0]){
						v = opElm.val();
					}
		
				}
				
				else{
					v = elm.val();
	
				}
				
			}else{
				v = elm.html();
			}
			return v;
		}
		
		
		
		/**
		 * Search for matched elements from the parent element regardless of class attribute, name attribute, id attribute.
		 * @param parElm : parent element.
		 * @param field : class, or name attribute
		 * @returns element.
		 */
		function _findInParentEx(parElm,field){
			var elm = parElm.find('.' + field);
			if(!elm[0]){
				elm = parElm.find("[name='" + field + "']");
			}else if(!elm[0]){
				elm = parElm.find('#' + field);
			}
			return elm;
		}
		
		
		// Check empty.
		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;
			}
		}
		
		
	
		// call constractor method.
		this.constract();
	}
	


基本クラスの継承

基本クラスを作成し、サブクラスに継承をさせることをJavaScriptでも実現できる。
メソッドのオーバーライドも可能である。

以下のサンプルはCatクラスの挙動を確かめている。
Catクラスは基本クラスであるAnimalクラスを継承している。

サンプル

実装のソースコード

	<script src="jquery.js"></script>
	<script src="Animal.js"></script>
	<script src="Cat.js"></script>
	~省略~
	<script>
	$( function() {
		// 初期値を渡しながら、Catクラスを作成する。CatはAnimalクラスを継承している。
		var param ={'res_slt':'#res'};
		var cat = new Cat(param);
		
		// 基本クラス(Animal)から継承したshowTitleメソッドを呼び出す。showTitleはCatクラスでは未定義。
		cat.showTitle();
		
		// 基本クラスのrunメソッドをオーバーライドしたrunメソッドを呼び出す。
		cat.run('東村');
		
		// 基本クラスのrunメソッドを呼び出す。
		cat.base.run('沖縄県');
	});
	</script>
	~省略~
	<div id="res"></div>
	

基本クラスであるAnimalクラスのソースコード

	var Animal =function(p_params){
		this.res_slt = p_params.res_slt;//出力要素
		
		this.showTitle = function(){
			var str = '動物のタイトル<br>';
			$(this.res_slt).append(str);
		};
	
		this.run=function(place){
			var str = place + 'を動物が走る<br>';
			$(this.res_slt).append(str);
			return str;
		};
	};
	

Catクラスのソースコード

	var Cat =function(p_params){
		// ★動物クラス継承
		this.base = new Animal(p_params);
		for(key in this.base){
			this[key] = this.base[key];
		}
		
		this.res_slt = p_params.res_slt;//出力要素
	
		// Animalのrunメソッドをオーバーライドしている
		this.run=function(place){
			var str = place + 'を猫が走る<br>';
			$(this.res_slt).append(str);
			return str;
		};
	};
	

出力

動物のタイトル
東村を猫が走る
沖縄県を動物が走る

サンプル

JavaScriptのクラスその5 | ES6版

JavaScript


	/**
	 * Class of JavaScript for ES6
	 * 
	 * @date 2017-10-10
	 * @version 1.0.0
	 * 
	 */
	class Animal{
		
		
		/**
		 * コンストラクタ
		 * 
		 * @param param
		 * - flg
		 */
		constructor(param){
			
			this.saveKeys = ['flg','xxx']; // ローカルストレージへ保存と読込を行うparamのキー。
			this.ls_key = "Animal"; // ローカルストレージにparamを保存するときのキー。
			this.param = this._setParamIfEmpty(param);
		}

		
		/**
		 * If Param property is empty, set a value.
		 */
		_setParamIfEmpty(param){
			
			if(param == null){
				param = {};
			}
		
			// ローカルストレージで保存していたパラメータをセットする
			var param_json = localStorage.getItem(self.ls_key);
			if(!this._empty(param_json)){
				var lsParam = JSON.parse(param_json);
				if(lsParam){
					for(var i in self.saveKeys){
						var s_key = self.saveKeys[i];
						param[s_key] = lsParam[s_key];
					}
				}
			}
			
			if(param['flg'] == null){
				param['flg'] = 0;
			}
			
			return param;
		}
		
		
		
		
		/**
		 * テストAJAX
		 */
		execute(){
			var data={'neko':'ネコ','same':{'hojiro':'ホオジロザメ','shumoku':'シュモクザメ'},'xxx':111};
	
			data = this._escapeForAjax(data); // Ajax送信データ用エスケープ。実体参照(&lt; &gt; &amp; &)を記号に戻す。
			var json_str = JSON.stringify(data);//データをJSON文字列にする。
	
			// AJAX
			$.ajax({
				type: "POST",
				url: "test.php",
				data: "key1="+json_str,
				cache: false,
				dataType: "text",
			})
			.done((str_json, type) => {
				var ent;
				try{
					ent =jQuery.parseJSON(str_json);//パース
					jQuery("#res").html(str_json);
					
				}catch(e){
					alert('エラー');
					jQuery("#err").html(str_json);
					return;
				}
				
				this.test1();
			})
			.fail((jqXHR, statusText, errorThrown) => {
				jQuery('#err').html(jqXHR.responseText);
				alert(statusText);
			});
		}
		
		
		
		test1(){
			console.log('TEST');
		}
		
		
		
		
		/**
		 * Ajax送信データ用エスケープ。実体参照(&lt; &gt; &amp; &)を記号に戻す。
		 * 
		 * @param any data エスケープ対象 :文字列、オブジェクト、配列を指定可
		 * @returns エスケープ後
		 */
		_escapeForAjax(data){
			if (typeof data == 'string'){
				if ( data.indexOf('&') != -1) {
					data = data.replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&amp;/g,'&');
					return encodeURIComponent(data);
				}else{
					return data;
				}
			}else if (typeof data == 'object'){
				for(var i in data){
					data[i] = this._escapeForAjax(data[i]);
				}
				return data;
			}else{
				return data;
			}
		}
		
		
	
	
		/**
		 * ローカルストレージにパラメータを保存する
		 */
		saveParam(){
			var lsParam = {};
			for(var i in self.saveKeys){
				var s_key = self.saveKeys[i];
				lsParam[s_key] = self.param[s_key];
			}
			var param_json = JSON.stringify(lsParam);
			localStorage.setItem(self.ls_key,param_json);
		}
		
		
		/**
		 * ローカルストレージで保存しているパラメータをクリアする
		 */
		clear(){
			localStorage.removeItem(self.ls_key);
		}
	
	
	
	
		// Check empty.
		_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;
			}
		}
		
		
	}
	

PHP

	<?php
	$json_param = $_POST['key1'];
	$param = json_decode($json_param,true);//JSON文字を配列に戻す
	
	//データ加工や取得
	$data=array('neko'=>'猫','yagi'=>'山羊','kani'=>'蟹','same'=>'鮫');
	$json_data=json_encode($data);//JSONに変換
	echo $json_data;
	

クラス存在チェック

「type of」でクラスの存在確認ができる。
存在しているなら「function]、存在しないなら「undefined」になる。

$(() => {
	
	console.log(typeof Neko); // → function
	console.log(typeof Inu); // → undefined
	
	var neko = new Neko();
	neko.bark();
});


class Neko{
	bark(){
		console.log('ナゴー');
	}
}

クラスその6 機能テンプレート


/**
 * アニマル機能クラス
 * @date 2019-5-27
 * @license MIT
 * @version 1.0.0
 */
class Animal{
	
	/**
	 * 初期化
	 * 
	 * @param param
	 * - div_xid 当機能埋込先区分のid属性
	 */
	init(param){
		
		this.param = this._setParamIfEmpty(param);
		this.tDiv = jQuery('#' + this.param.div_xid); //  This division
		
		// 当機能のHTMLを作成および埋込
		let html = this._createHtml(); 
		this.tDiv.html(html);
		
		this.fShowBtn = this.tDiv.find('.anm_f_show_btn'); // 機能表示ボタン要素
		this.funcDiv = this.tDiv.find('.anm_func_div'); // 機能区分
		this.resDiv = this.tDiv.find('.anm_res'); // 結果区分
		this.errDiv = this.tDiv.find('.anm_err'); // エラー区分
		this.startBtn = this.tDiv.find('.anm_start_btn'); // スタートボタン要素
		
		this._addClickFShowBtn(this.fShowBtn); // 機能表示ボタンのクリックイベント
		
	}

	
	/**
	 * If Param property is empty, set a value.
	 */
	_setParamIfEmpty(param){
		
		if(param == null) param = {};

		if(param['div_xid'] == null) param['div_xid'] = 'animal';
		
		let lsParam = this._getLsParam(); // ローカルストレージパラメータを取得する
		
		param['test_flg'] = this._getProperty('test_flg', 1, param, lsParam);

		this.lsParam = lsParam;

		return param;
	}
	
	
	/**
	 * プロパティ値を取得する
	 * @param string key プロパティのキー
	 * @param mixed init_value 初期値
	 * @param object param
	 * @param object lsParam ローカルストレージから取得したパラメータ
	 * @return プロパティ値
	 */
	_getProperty(key, init_value, param, lsParam){

		// ローカルストレージ、引数、デフォルトを優先順にプロパティ値を取得する。
		let prop_v = null; // プロパティ値
		if(lsParam[key] != null){
			prop_v = lsParam[key];
		}else if(param[key] != null){
			prop_v = param[key];
		}else{
			prop_v = init_value;
		}
		return prop_v;
	}
	
	
	/**
	 * 当機能のHTMLを作成および埋込
	 */
	_createHtml(){
		let html = `
	<input class='anm_f_show_btn btn btn-primary btn-xs' type="button" value='アニマル機能' />
	<div class='anm_func_div' style="display:none">
		<div style="display:inline-block;padding:10px;border:solid 4px #5bd59e;border-radius:5px;margin-bottom:10px">
			<p>アニマル機能</p>
			<input class="anm_start_btn btn btn-success" type='button' value="スタート" />
			<div class="anm_res text-success"></div>
			<div class="anm_err text-danger"></div>
		</div>
	</div>
		`;
		return html;
	}
	
	
	/**
	 * ローカルストレージパラメータを取得する
	 */
	_getLsParam(){
		
		let ls_key = this._getLsKey(); // ローカルストレージキーを取得する
		let param_json = localStorage.getItem(ls_key);
		let lsParam = JSON.parse(param_json);
		if(lsParam == null) lsParam = {};
		return lsParam;
		
	}
	
	/**
	 * ローカルストレージで保存しているパラメータをクリアする
	 */
	clearlocalStorage(){
		let ls_key = this._getLsKey(); // ローカルストレージキーを取得する
		localStorage.removeItem(ls_key);
	}
	
	
	/**
	 * ローカルストレージにプロパティを保存
	 */
	_saveLsProp(key, val){
		this.lsParam[key] = val;
		let ls_key = this._getLsKey(); // ローカルストレージキーを取得する
		var param_json = JSON.stringify(this.lsParam);
		localStorage.setItem(ls_key, param_json);
	}
	
	
	/**
	 * ローカルストレージキーを取得する
	 */
	_getLsKey(){
		// ローカルストレージキーを取得する
		let ls_key = location.href; // 現在ページのURLを取得
		ls_key = ls_key.split(/[?#]/)[0]; // クエリ部分を除去
		ls_key += '_Animal';
		return ls_key;
	}
	
	
	/**
	 * メッセージを表示
	 * @param string err_msg エラーメッセージ
	 */
	_showMsg(msg){
		this.resDiv.html(msg);
	}
	
	
	/**
	 * エラーを表示
	 * @param string err_msg エラーメッセージ
	 */
	_showErr(err_msg){
		this.errDiv.append(err_msg + '<br>');
	}
	
	
	/**
	 * 機能表示ボタンのクリックイベント
	 * @param jQuery fShowBtn 機能表示ボタン
	 */
	_addClickFShowBtn(fShowBtn){
		
		fShowBtn.click((evt)=>{
			
			var d = this.funcDiv.css('display');
			if(d==null | d=='none'){
				let f_show_btn_name = this._getFShowBtnName(0);
				this.fShowBtn.val(f_show_btn_name);
				this.tDiv.css('display','block');
				this.funcDiv.show(300);
				
			}else{
				let f_show_btn_name = this._getFShowBtnName(1);
				this.fShowBtn.val(f_show_btn_name);
				this.tDiv.css('display','inline-block');
				this.funcDiv.hide(300);
				
			}

		});
	}
	
	
	/**
	 * 機能表示ボタン名に「閉じる」の文字を付け足したり、削ったりする。
	 * @param string show_flg 表示フラグ 0:閉, 1:表示
	 * @return string 機能表示ボタン名
	 */
	_getFShowBtnName(show_flg){
		let close_name = ' (閉じる)';
		let btn_name = this.fShowBtn.val();
		if(show_flg == 1){
			btn_name = btn_name.replace(close_name, '');
		}else{
			btn_name += close_name;
		}
		return btn_name;
	}

	
	// Check empty.
	_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;
		}
	}
	
}

	

クラスその7


/**
 * テンプレート
 * @since 2022-2-2
 * @version 1.0.0
*/
class AutoReload{
	
	/**
	* コンストラクタ
	* @param {}
	*  - ls_key ローカルストレージキー(省略可) 当クラスを一つの画面で複数生成する場合は必ずセットすること。
	*/
	constructor(param){
		param = this._setParam(param);

	}

	
	/**
	 * デフォルトパラメータを取得する
	 */
	_getDefParam(){
		let defParam = {
			'neko_name':'ていもう', 
			'neko_value':17, 
		};
		return defParam;
	}
	
	_setParam(pParam){
		
		// ローカルストレージキーの取得。
		this.ls_key = null;
		if(pParam){
			if(pParam.ls_key){
				this.ls_key = pParam.ls_key;
			}else{
				this._createLsKey();
			}
		}
		
		let lsParam = this._getLsParam(); // ローカルストレージ由来パラメータ
		let defParam = this._getDefParam(); // デフォルトパラメータ
		
		// クローンを作成してメンバにセット(パラメータの値がobject型である場合、参照にあるため干渉が起きてしまうのを避ける)
		this.lsParam = $.extend(true, {}, lsParam);
		this.pParam = $.extend(true, {}, pParam);
		this.defParam = $.extend(true, {}, defParam);
		
		let param = {};
		if(!this._empty(lsParam)){
			param = this._merge(param, lsParam);
		}

		if(!this._empty(pParam)){
			param = this._merge(param, pParam);
		}
		
		param = this._merge(param, defParam);
		this.param = param;
		
		return param;

	}
	
	/**
	 * 引数1のパラメータに引数2のパラメータをマージする。
	 * マージルール→未セット(undefined)ならセットする。
	 */
	_merge(param, param2){
		for(let key in param2){
			if(param[key] === undefined){
				param[key] = param2[key];
			}
		}
		return param;
	}
	

	
	/**
	 * ローカルストレージパラメータを取得する
	 */
	_getLsParam(){
		
		let ls_key = this._getLsKey(); // ローカルストレージキーを取得する
		let param_json = localStorage.getItem(ls_key);
		let lsParam = JSON.parse(param_json);
		if(lsParam == null) lsParam = {};
		return lsParam;
		
	}
	
	/**
	 * ローカルストレージで保存しているパラメータをクリアする
	 */
	clearlocalStorage(){
		let ls_key = this._getLsKey(); // ローカルストレージキーを取得する
		localStorage.removeItem(ls_key);
	}
	
	
	/**
	 * ローカルストレージにパラメータを保存
	 */
	_saveLs(){
		let ls_key = this._getLsKey(); // ローカルストレージキーを取得する
		let param_json = JSON.stringify(this.param);
		localStorage.setItem(ls_key, param_json);
	}
	
	
	/**
	 * ローカルストレージキーを取得する
	 */
	_getLsKey(){
		if(this.ls_key == null){
			this.ls_key = this._createLsKey();
		}
		
		return this.ls_key;
		
	}
	
	/**
	 * ローカルストレージキーを自動生成する。
	 */
	_createLsKey(){
		// ローカルストレージキーを取得する
		let ls_key = location.href; // 現在ページのURLを取得
		ls_key = ls_key.split(/[?#]/)[0]; // クエリ部分を除去
		ls_key += this.constructor.name; // 自分自身のクラス名を付け足す
		return ls_key;
	}
	
	
		// Check empty.
	_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;
		}
	}
	
	/* パラメータをデフォルトに戻す。
	*/
	_resetParam(){
		
		for(let key in this.defParam){
			this.param[key] = this.defParam[key];
		}
		
		this._saveLs();
		
		return this.param;
	}
	
	
}
	

HTMLファイル(自身)の更新日を取得

以下のコードで自身ファイルの最終更新日時を取得できる。
document.lastModified;
外部JSファイルで「document.lastModified」を実行した場合、外部JSファイルでなくhtmlファイル側の最終更新日時を取得する。

「y/m/d」形式で最終更新日を取得する場合

var modified_date=new Date(document.lastModified).toLocaleDateString();// 例→ modified_date=2016/4/7


サンプル

ソースコード

	<script>
	$(function(){
		var modified_dt=document.lastModified;
		$('#res1').html(modified_dt);
		
		var modified_date=new Date(document.lastModified).toLocaleDateString();
		$('#res2').html(modified_date);
	});
	</script>
	~略~
	最終更新日時:<span id="res1"></span><br>
	最終更新日:<span id="res2"></span><br>
	

出力

最終更新日時:04/07/2016 10:47:00
最終更新日:2016/4/7
サンプル

テキストエリアの全選択

テキストエリア内のテキストを全選択する。
js
$('#ta1').select();
html
<textarea id="ta1"></textarea>

テキストエリア内をフォーカスする場合
$('#ta1').focus();

サンプル
参考:usklog:【javascript】テキストエリアの文字列を選択状態にする