<!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>
$( 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);
});
});
<!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>
$( 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, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''');
}
～略～ <script src="jquery.selection.js"></script> ～略～ <script> var res = $.selection();//選択範囲の文字列を取得する。 ～略～ </script>
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'});
公式サイト
サンプル
<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>
サンプル
実装ソースコード
<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();
};
/**
* 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();
}
/**
* 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();
}
実装のソースコード
<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
/**
* 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送信データ用エスケープ。実体参照（< > & &）を記号に戻す。
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送信データ用エスケープ。実体参照（< > & &）を記号に戻す。
*
* @param any data エスケープ対象 :文字列、オブジェクト、配列を指定可
* @returns エスケープ後
*/
_escapeForAjax(data){
if (typeof data == 'string'){
if ( data.indexOf('&') != -1) {
data = data.replace(/</g,'<').replace(/>/g,'>').replace(/&/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;
$(() => {
console.log(typeof Neko); // → function
console.log(typeof Inu); // → undefined
var neko = new Neko();
neko.bark();
});
class Neko{
bark(){
console.log('ナゴー');
}
}
/**
* アニマル機能クラス
* @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;
}
}
}
/**
* テンプレート
* @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;
}
}
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>
出力
$('#ta1').select();
html<textarea id="ta1"></textarea>
$('#ta1').focus();