location.hash から値を取り出してオブジェクト型で返す
location.hash から値を取り出してオブジェクト型で返す
Ajaxで使うかもしれない
let obj = hash2obj ("http://hoge.com#label?a=123&b=");
obj = {
hash : '#label',
id : 'label',
value: { a: 123, b: undefined },
query : '?a=123&b='
}function hash2obj (arg = window.location.hash) { const reg0 = /^(#([^\?\;\=]*)?)(\?.*)?/, //hash, id, paramater に切り分ける reg1 = /\??([^\=\&\;\?]+)(?:=?([^\&\;$]*)?(?:\&|\;|$))/g; // name = value if (arg = reg0.exec (arg)) { let [, hash, id, query] = arg, value = { }; for (let r; r = reg1.exec (query); value[r[1]] = r[2]) ; return { id, hash, query, value }; } else return null; }
オブジェクトからHTML要素を構成する
//obj = { tag: '????', attr: { key: value, ... }, text: 'sample text', cildlen: [obj0, obj1, ... ]}
let arg = [
{
tag: 'ol', attr: { id: 'hoge', className: 'abc def', childlen: [
//以下は同じ表示
{ tag: 'li', text: 'ABCDEFG' },
{ tag: 'li:ABCDEFG' },
{ tag: 'li', childlen: ['ABCDEFG']
]
},
{ tag: 'ol#hoge .abc .def' } //上の ol 要素と同じ意味
];
document.body.appendChild (makeElement (arg));
code:
function makeElement (arg, target = document.createDocumentFragment ()) { //tag: str -> tag #id .class : text に切り分ける const reg0 = /^\s*([a-z]+)\s*(?:#([a-z][0-9a-z]*))?\s*(\.[^\s\.]+(?:\s+\.[^\s\.]+)*)?\s*(?::?\s*(.*?)\s*)$/i, reg1 = /^\s+|\s{2,}|\s+$/g,//前後の空白、中間の２文字以上の空白を削除 reg2 = /\./g; switch (Object.prototype.toString.call (arg).slice(8, -1)) { //引数の型で処理 case 'Object' : let { tag = null, attr = { }, childlen = null, text = null } = arg, [ tagName, id, className, text1 ] = reg0.exec (tag), attr1 = { }, e; if (null == tagName) throw new Error ('tagName がありません'); e = target.appendChild (document.createElement (tagName));//要素作成 if (id) attr1.id = id; if (className) attr1.className = className.replace (reg1,'').replace (reg2,' '); Object.assign (e, attr, attr1);//属性上書き (text1 != null)&& ary2Element (text1, e);//文字列 (text != null)&& ary2Element (text, e);//文字列 (childlen)&& ary2Element (childlen, e); //子要素の追加 break; case 'Array' : let fgm = document.createDocumentFragment (); arg.forEach (a=> ary2Element (a, fgm)); target.appendChild (fgm); break; case 'undefined' : case 'Null' : arg = '';//break しない default : target.appendChild (document.createTextNode (String (arg))); break; } return target; }
配列からテーブルを構成する
//配列をテーブルに変換する(テキストの先頭を判別して th/td, colspan, rowspan, class を指定できる) function ary2TBody (ary, tbody = document.createElement ('tbody'), fg_del = false) { const //#[4,2].abc .def AAAA => <th colspan="4" rowspan="2" class="abc def">AAAA</th> reg0 = /^(#)?(?:\[(\d+)?(?:\,(\d+)?)?\])?\s*(\.[^\s\.]+(?:\s+\.[^\s\.]+)*)?\s*(.*?)$/, reg1 = /^\s+|\s{2,}|\s+$/g,//前後の空白、中間の２文字以上の空白を削除 reg2 = /\./g; if (fg_del) [...tbody.childNodes].forEach (e=> e.remove ());//子要素の削除 for (let row of ary) { let tr = tbody.appendChild (document.createElement ('tr')); //tbody.insertRow ();//fgmを許容するため for (let cell of row) { let str = null == cell ? '': String (cell);// null == undefined => true let [, hash, colSpan = 1, rowSpan = 1, className = '', textContent ] = reg0.exec (str); let td = tr.appendChild (document.createElement (hash ? 'th': 'td')); className = className.replace (reg1,'').replace (reg2,' ');//２つ以上のクラスに対応するため Object.assign (td, { colSpan, rowSpan, className, textContent}); } } return tbody; }
配列からテーブルを作成する（単純高速版）
//配列をテーブルに変換する(高速・フラグメントを tbody に指定できない) static ary2QTBody (ary = [ ], tbody = document.createElement ('tbody')) { for (let row of ary) { let tr = tbody.insertRow (); for (let cell of row) { tr.insertCell ().textContent = cell; } } return tbody; //return ary.reduce((a,b)=>(b.reduce((c,d)=>(c.insertCell().textContent=d,c),a.insertRow()),a),tbody); }
？レンタルサーバーで・・・
Smail Sever 解決する課題
- サーバー変数が取得できない
モジュール形式にすることでとりあえず回避
- 元号日付に対応していない
$str = strftime ("%Ex", strtotime ($strDate));
震災後
十年来、行って手を合わせたかった場所にやっと行くことができた。
往復に700ｋｍ。
宮城県の大川小学校だ。
津波で死んだ人たちに会いたかったからだ。
周りは工事中で騒がしい場所ではあったが、近くに慰霊の石碑があった。
足が悪いので雪道は勘弁。車の中から目を閉じて黙祷。
色々な情景が浮かんでは消えたが、とてもとても静かだった。
震災からの10年という月日がなければ、今の僕はその場所に立ち向かえなかった。
震災後２週間目で岩手県山田町に向かった。
教科書の写真でしかみたことのない空襲の跡のような映像がカラーで目の前にあった。
自衛隊のおかげで道があり、目的地まで行くことができた。
その途中金縛りにもあった。
その後、何もくなった河原で手を合わせた夢を見た。
ドライブの途中、現実にその場所が実際にあり、再度手を合わせて帰ってきたこともある。
そしてやっとの今日だ。
遅くなったことに申しわけなく思う。
マウスストーカー
<script> class P2{ constructor(x=0,y=0){this.x=x;this.y=y} get clone(){return new P2(this.x,this.y)}//複写 add({x=0,y=0},{x:X,y:Y}=this){this.x=X+x;this.y=Y+y;return this}//加算 sub({x=0,y=0},{x:X,y:Y}=this){this.x=X-x;this.y=Y-y;return this}//減算 mul({x=0,y=0},{x:X,y:Y}=this){this.x=X*x;this.y=Y*y;return this}//乗算 div({x=0,y=0},{x:X,y:Y}=this){this.x=X/x;this.y=Y/y;return this}//除算 sMul(n=0,{x:X,y:Y}=this){this.x=X*n;this.y=Y*n;return this}//スカラー倍 } //__ //追いかける素となるもの（マウスの座標） class MousePointer extends P2 { constructor (x, y) { super (x, y); } handleEvent (event) { this.x = event.clientX + window.pageXOffset; this.y = event.clientY + window.pageYOffset; } static create (view = document) { let obj = new this (); view.addEventListener ('mousemove', obj, false); return obj; } } //__ //追いかけるもの class Stalker extends P2 { constructor (target, images, pointer, option = {}) { super (pointer.x, pointer.y); this.target = target; this.images = images; this.pointer = pointer; this.option = Object.assign ({}, this.constructor.getDefaultOption (), option); this.disabled = false; this.chase (); } chase () { const { PI, floor:int, atan2 } = Math; if (this.disabled) return; let dp = this.pointer.clone.sub (this), n = 360 / this.images.length, ang = atan2 (dp.x, -dp.y) * 180 / PI; this.add (dp.sMul (this.option.accelerator)); this.locate (); this.target.src = this.images[int ((360 + ang) % 360 / n)].src; requestAnimationFrame (this.chase.bind (this)); } locate () { const int = Math.floor; let p = this.option.offset.clone.add (this); Object.assign (this.target.style, { left: int (p.x) + 'px', top: int (p.y) + 'px'}); return this; } static getDefaultOption () { return { offset: new P2 (0, 0), accelerator: .9 }; } static create (imageList, pointer, option = { }) { let target = new Image, images = imageList.map (src=> Object.assign (new Image, {src})); target.src = images[0].src; Object.assign (target.style, {position: 'absolute', left: '0px', top: '0px'}); document.body.appendChild (target); return new Stalker (target, images, pointer, option); } } //__ const src = [ 'data:image/gif;base64,R0lGODlhIAAgAJEAAPwAAYcAAf///wAAACH5BAEAAAIALAAAAAAgACAAAAJklI+py33gYgsAymsCrVjqzXXMB4YiQpbmmaor1rpvFMvzWFf6bjm1xgv6frYdjhhMKoifpJKWerKiwpOgJRVhq1NStrPlWa9UsTVsPJfT3SZXu9aN0XK19w2O3zz6HvxuNiZYAAA7', 'data:image/gif;base64,R0lGODlhIAAgAJEAAPwAAYcAAf///wAAACH5BAEAAAIALAAAAAAgACAAAAJklI+py+0Po5xUhIuzziDuz3UeuAHmRIYnmppuRbovBcqzVNvrWOr7k/OJgB/hrRE0EnvGnyLZRBabMgbUJsA+p8JDdauJIo6IsFLhLF/Ei+EiwK4YzvKxrt7+4tHpvdcPGChRAAA7', 'data:image/gif;base64,R0lGODlhIAAgAJEAAPwAAYcAAf///wAAACH5BAEAAAIALAAAAAAgACAAAAJXlI+py+0Po2Rh2lBtxFk73nkLGIoIWZoCmh7sC1PwTI70jSn4nuy868MdAMSi8YhMEg3KpnPJfEqNiKk1YZUqss4FV6kaIsNiKjlaPJcB6nJb/B7G56oCADs=', 'data:image/gif;base64,R0lGODlhIAAgAJEAAPwAAYcAAf///wAAACH5BAEAAAIALAAAAAAgACAAAAJjlI+py+0Po5zUhFDhvbnt3SnfFx4AMILheaacx7Csiy1vIsu0eJu57kKQFD9gyjIkFlu0UWPJbPaUS+mUWrRCoKhmhOv9QncS8HFiTpbH6i23e32+o+s5U2yfufOykv8P6FAAADs=', 'data:image/gif;base64,R0lGODlhIAAgAJEAAPwAAYcAAf///wAAACH5BAEAAAIALAAAAAAgACAAAAJnlI+pywkPQZi02QhptQw/PXGdBwbi4kngqaQl65ArfLgzLdgabugb7gvxgqahbGfEvJKRJfD4a6SIpSJiqqwiW9iPVjjCfq1SsZZldp6mVWbm9mxueTk5mN57k/F5FR8l8dchSChQAAA7', 'data:image/gif;base64,R0lGODlhIAAgAJEAAPwAAYcAAf///wAAACH5BAEAAAIALAAAAAAgACAAAAJmlI+py+0PE4j0gFvj3dnt3y3fGCLjGHjN+QXuOins5tYMZ85AzYu4oNvxbDJQcEgsBmnI1G15aTqfS+kDar0emxpdFuLlUmbfLkpcOUmn49aaDWa+4Z7oPKm9DzV6ZOkPGCg4yFAAADs=', 'data:image/gif;base64,R0lGODlhIAAgAJEAAPwAAYcAAf///wAAACH5BAEAAAIALAAAAAAgACAAAAJXlI+py+0PAZwJSErtxU9vzngfWInkIlpnmbbuaLxyqsy2xt4zoutH7xMAg4KA8YhMKpcBBPMJbTqj1KOiWl1go4zts7FcXZPisbWcQKLN63H7+o7L54cCADs=', 'data:image/gif;base64,R0lGODlhIAAgAJEAAPwAAYcAAf///wAAACH5BAEAAAIALAAAAAAgACAAAAJflI+py+0PYwO02nthwDzr3XFSQIZeRJYmIBmp2rXuC8YtDYsjXusfb0LxcpjfMOgYvpAM5TLUcD5tCtoMx0S8tEBoIlXtFsNNcaWZNMu+3XUY517A43IwvXzP6/d8fQEAOw==' ]; let pointer0 = MousePointer.create (), pointer1 = Stalker.create (src, pointer0, {offset: new P2(20,20), accelerator: .1}), pointer2 = Stalker.create (src, pointer1, {offset: new P2(40,40), accelerator: .09}), pointer3 = Stalker.create (src, pointer2, {offset: new P2(60,60), accelerator: .08}); pointer4 = Stalker.create (src, pointer3, {offset: new P2(80,80), accelerator: .07}); pointer5 = Stalker.create (src, pointer4, {offset: new P2(100,100), accelerator: .06}); pointer6 = Stalker.create (src, pointer5, {offset: new P2(120,120), accelerator: .05}); pointer7 = Stalker.create (src, pointer6, {offset: new P2(140,140), accelerator: .04}); </script>
```
```
万年カレンダーJavaScriptで作る
万年カレンダーJavaScriptで作る
<!DOCTYPE html> <meta charset="utf-8"> <title></title> <style> table { margin: 1em 0; } thead td { font-weight: bold; } thead td, tbody td { text-align: center; border: 1px transparent solid; } tbody td:hover:not(.pDay):not(.nDay) { border: 1px #f80 solid; } tr td:first-of-type { color: red; } tr td:last-of-type { color:#099; } thead td { padding: 0 .5ex;} caption label { padding: 0 .5ex; font-size: large; font-weight: bold; } caption button { background: transparent; border-style: none; font-size: large; padding: 0; } caption .hide { display: none; } tbody td.pDay, tbody td.nDay { color: silver; font-size: small; vertical-align: top; } tbody td.nDay { color: silver; font-size: small; vertical-align: bottom; } </style> <table></table> <table></table> <table></table> <script> class Calendar { constructor (table, date, option = { }) { this.table = table; this.date = date; this.option = Object.assign ({ }, this.constructor.defaultOption (), option); this.view (); } view () { const {table, option, constructor: c } = this, {remove, getYMD, setNo, splice, toTBody, append} = c.tools (); let tbody = document.createElement ('tbody'), [y, m] = getYMD (this.current),//日付 [,, pd, pw] = getYMD (new Date (y, m, 0)),//先月末日 [,, nd, nw] = getYMD (new Date (y, m + 1, 0)),//今月末日 pn = (pw + 1) % 7,//先月の繰越す日数 nn = 6 - nw,//来月の取入れ日数 days = [ ...setNo (pn, pd - pn + 1),//連番（先月末） ...setNo (nd),//連番（今月） ...setNo (nn)//連番（翌月） ]; remove (table.children);//子要素を削除 append (table.createCaption (), option.caption);//キャプションをDOMで展開 toTBody (table.createTHead (), option.weekName);//週名を展開 toTBody (table.appendChild (tbody), [...splice (days, 7)]);//7日で区切る [...table.querySelectorAll ('caption label')] .forEach ((e, i)=> e.textContent = [y, option.monthName[m]][i]); let es = [...table.querySelectorAll ('tbody td')]; if (pn) es.slice (0, pn).forEach (e=> e.classList.add ('pDay')); if (nn) es.slice (-nn).forEach (e=> e.classList.add ('nDay')); return this; } offsetMonth (n = 0) { this.current.setMonth (this.current.getMonth () + n); this.view (); return this; } set date (dt) { const {getYMD} = this.constructor.tools (); let [y, m] = getYMD (dt); this.current = new Date (y, m, 1); this._date = dt; } getDate (td) { const {zp, getYMD} = this.constructor.tools (); let [y, m, _, w] = getYMD (this.current), d = Number (td.textContent), ymd = [y, m+1, d], str = ymd.map ((a,b)=>zp(a,[4,2,2][b])).join ('-'); return [new Date (y, m, d), str, ...ymd, w]; } event (td) { if (td) { let cbFunc = this.option.cbFunc, args = this.getDate (td); if ('function' === typeof cbFunc) cbFunc.apply (this, args); if (this.option.clipboard) navigator.clipboard.writeText (args[1]).then(()=> console.log (args)); } } handleEvent (event) { let e = event.target, p; switch (n.nodeName) { case 'BUTTON' : if (p = e.closest ('caption')) { let btNo = [...c.querySelectorAll('button')].indexOf (e); return this.offsetMonth ([-12, -1, 1, 12][btNo]); } break; case 'TD' : if (p = e.closest ('tbody')) return this.event (e); break; } } static tools () { return { zp: (a,b=2)=>String(a).padStart(b,'0'), remove: a=>[...a].map(a=>a.remove()), getYMD: a=>['FullYear','Month','Date','Day'].map(b=>a['get'+b]()), setNo: function*(a,b=1,c=1,d=0){for(;d<a;d+=c)yield b+d}, splice: function*(a,b=1){while(a.length)yield a.splice(0,b)}, append: ((f=(a,b,c,{tag:T,child:C,...O}=b)=>Array.isArray(b)?b.reduce((a,b)=>f(a,b),a):(Object.assign(a.appendChild(c=document.createElement(T)),O),C&&f(c,C),a))=>f)(), toTBody: (a,ary)=>{ const reg = /^(#?)(?:\[(\d+)?(?:\,(\d+)?)?\])?\s*(?:(.+)\s)*\s*(?:([+-]?(?:[1-9][0-9]{0,2}(?:\,?[0-9]{3})*)?(?:0?(?:\.\d*))?)|(.+))?$/, setAttr = (a,b,O=Object)=>O.assign(a,O.fromEntries(O.entries(b).filter(c=>'undefined'!==typeof c[1]))); for (let row of ary) { let tr = a.insertRow (); for (let cell of row) { let [,thd, colSpan, rowSpan, className, num, text] = reg.exec (cell), td = tr.appendChild (document.createElement (thd ? 'th': 'td')), attr = {colSpan, rowSpan, className, textContent: text || num || ''}; if (num != null) className += 'num'; setAttr (td, attr); tr.appendChild (td); } } } }; } static defaultOption () { return { weekName: [['Sun','Mon','Tue','Wed','Thu','Fri','Sat']], monthName: ['January','February','March','April','May','June','July','August','September','October','November','December'], caption: [ { tag: 'button', type: 'button', textContent: '⏪', className: 'hide' }, { tag: 'button', type: 'button', textContent: '<' }, { tag: 'label', className: 'hide' }, { tag: 'label'}, { tag: 'button', type: 'button', textContent: '>'}, { tag: 'button', type: 'button', textContent: '⏩', className: 'hide' } ], cbFunc: null, clipboard: true, }; } static create (table = document.createElement ('table'), date = new Date, option = { }) { const calendar = new this (table, date, option); table.addEventListener ('click', calendar, false); return calendar; } } const TABLE = document.querySelectorAll ('table'), [a, b, c] = Array.from (TABLE, t=> Calendar.create (t)); b.offsetMonth (+1); c.offsetMonth (+2); </script>
アロー関数で再帰
JavaScript アロー関数で再帰
有ろうことか！アロー関数で再帰ができるとは知らなかった。
let func = ((cbFunc = arg=> { ... }) => cbFunc)()
const fibonacci = ((fb= n=> n > 1 ? fb(n-2) + fb(n-1): n)=> fb)(); console.log(fibonacci (9));//-> 34 </script>
アロー関数(n=> n > 1 ? n * fb(n-1): 1)を変数(fb)に代入し、
その代入した関数を即時関数によって関数(fb)として返すように
代入(fibonacci )する
これは思いつかなかった
オブジェクトをDOMにして追加する。（かなり短い）
// append (document.body, {tag: 'h1', textContent: 'Test', child:[{tag:'label', textContent: 'version'}]);
// <h1>Test<label>version</label></h1>
let append = ((f=(a,b,c,{tag:T,child:C,...O}=b)=>Array.isArray(b)?b.reduce((a,b)=>append(a,b),a):(Object.assign(a.appendChild(c=document.createElement(T)),O),C&&append(c,C),a))=>f)();
原形
それにしても document.createDocumentFragment は長い。
function append (e, arg) {
let fgm = document.createDocumentFragment ();
if (Array.isArray (arg)) {
arg.forEach (a=> append (fgm, a));
}
else if (Object === arg.constructor) {
let
{tag, child, ...attr} = arg,
e = Object.assign (fgm.appendChild (document.createElement (tag)), attr);
if (child) append (e, child);
}
e.appendChild (fgm);
return e;
}
時間を遅らせてコールバック関数を起動する
時間を遅らせてコールバック関数を起動する
class DelayCBFunc {
constructor (cbfunc, time = 500 /*ms*/) {
this.cbfunc = cbfunc;
this.time = time;
this.tmid = null;
this.disabled = false;
}
restart (...args) {
this.stop ();
this.tmid = setTimeout (this.cbfunc.bind(this,...args), this.time);
}
stop () {
if (this.tmid)
this.tmid = clearTimeout (this.tmid);
}
}
//--
function delayAlert (e) {
alert (e.value + 'でした');
}
const DA = new DelayCBFunc (delayAlert, 1000);
const TG = document.querySelector ('input[type="serach"]');
function handle (event) {
DA.restart (event.target);
}
TG.addEventListener ('input', handle, false);//１秒間に入力がないとアラートする
change イベントを遅らせて発火させる。(input イベントを監視する)
// input イベントを監視して、変更があったら change イベントを発火させる
// コールバックを指定すると change イベント直前に実行できる
class delayChangeEvent {
constructor (target, delayTime, cbFunc) {
this.target = target;
this.delay = delayTime; //遅延時間(ms)
this.cbFunc = cbFunc; //その時に実行する関数
this.disabled = false; //この値を true にすると実行されなくなる
this.timeId = null; //setTimeout で使用する
this.value = target.value;
// input event を監視する
target.addEventListener ('input', this, false);
}
//イベントハンドラ
handleEvent (event) {
if (this.disabled) return;
switch (event.type) {
case 'input' : //input event を監視する
if (this.timerId)
clearTimeout (this.timerId);//タイマーを解除
this.timerId = setTimeout (this.execute.bind (this), this.delay);//タイマー設定
break;
}
}
//change イベントを発火させる
execute () {
if (this.disabled) return;
this.timerId = null;
if (this.value !== this.target.value) {
let
e = this.target,
event = e.ownerDocument.createEvent ('HTMLEvents');
event.initEvent ('change', true, true);
//change イベントの前に コールバックを実行する
if ('function' === typeof this.cbFunc)
this.cbFunc (e);
this.target.dispatchEvent (event);
}
}
//
static create (target, delayTime = 300, cbFunc = null) {
if (! target)
throw new Error ('要素がありません');
return new this (target, delayTime, cbFunc);
}
}
