JavaScript Tips

いつか使ってみよう! const func = ((cbFunc = arg=> { ; }) => cbFunc)() const ary = ((c=d=>'function'==typeof d?d(b):(b.push(d),c),b=[])=>c)();

ギアにペンを差し込んでグルグルまわるやつ

''' HTML canvas ol li label { display: inline-block; width: 10em; padding: 0 1ex; } ol li { margin: 2px; list-style: none; } ol li label, ol li input { border: 2px silver ridge; border-radius: 5px; } Aria B:radius B:offset Line color Gray …

location.hash と webapl を連動させるライブラリ

Ajax を利用してアプリを作るとき、location.hash の値と連動して動く。 onHashChange を使用せずに済む。 とある条件でページをスクリプトで生成するプログラムがあるとする。 その条件が変化するごとに location.hash に書き出し、コールバック(生成プロ…

location.hash を解析して object にして返す

正規表現を使うのは大げさな気がする。 location.hash を location.search に書き換えて URL.searchParams で取得するほうが簡単だろうか?[, 変数名, 大括弧, 変数値]に分割しながら解析する function parseParms (str = '') { let reg = /(?:^#)?(\D\w*)(\…

同一人物だろっ!

質問者のこいつらは同一人物だ! 回答するのを止めた。 goo では名前を漢字で、okwaveでは2つの単語をアンダースコアでつなぎ、寺尾では2つの単語をつなぐ。 回答したコードを精査しないで、そのまま引用して次の質問する。 自分のやりたいことだけが優先…

2段階プルダウンで表示内容を切り替えたい

2段階プルダウンで表示内容を切り替えたい 2段階プルダウンで1段階目の選択を終えた後に選択ボックスを見えなくしたい goo: https://oshiete.goo.ne.jp/qa/13030027.html okwave:https://okwave.jp/qa/q10026854.html無駄に答えてしまった。phpのプログラム…

HTML/JavaScriptでDOMをドラッグ&ドロップで動かせるようにしたい

https://teratail.com/questions/4pnustw5rp458d <meta charset="utf-8"> <title></title> <style> p { border: solid 1px black; width: 100px; height: 100px; margin: 0; } </style> <body> <p>drag</p> <script> class A { draggable = false; diffX = null; diffY = null; #init = function (e) { ['m…</body></meta>

画面をこするとページ遷移するコード

画面をこするとページ遷移するコードhttps://teratail.com/questions/j459osplrnxfeo 「こする」をどうとらえるか? <meta charset="utf-8"> <title></title> <style> </style> <body> <a href="https://www.google.co.jp/"> <img src="https://picsum.photos/600/200?random=1"><br> <p>Test</p> </a> <script> class A { #clientX = null…</body></meta>

javascript: さてこの質問にどうやって最小のコードで書くか?!

OKWAVE セレクトボックスで、逆順に選択しても同じにしたい https://okwave.jp/qa/q10023002.html // https://okwave.jp/qa/q10021995.html 質:「能力なき者泣き寝入りせざるを得ませんか。」俺:「学校では平等だったかもしれませんが、社会では泣くしかあり…

フェードアウトで画像を切り替える

今更ながらフェードアウトで画像を切り替える 本来ならスクリプトを使わないでできる .fade_out_change { position: relative; } .fade_out_change > * { position: absolute; left: 0; top: 0; } .chgTypeA { height: 200px; } .chgTypeB { height: 100px; …

家のこと

娘が結婚、旦那から電話で報告があった。おめでとう。 次男、「娘さんを下さい」?を言うために大阪へ。 長男、振られたらしい。

仕事を忙しくしよう

あぁ、本業が大事! きっと今年はすべきことが出来ていない。来年が良い年でありますように。

ショートコードの備忘録

//配列をテーブルにする const ary2tbody=(a,b=document.createElement('tbody'))=>a.reduce((b,a)=>(a.reduce((c,d)=>(c.insertCell().append(d),c),b.insertRow()),b),b); /* function ary2tbody (ary, tb = document.createElement('tbody')) { return ar…

配列を回転する

条件 参照元の配列を破壊しないこと。 1行で済ませること。 身勝手ではあるがなるべく reverse は使わないこと。 なるべく速度を優先すること。(調べていないけど) const ary = [ [1,2,3], [4,5,6], [7,8,9], [10,11,12] ]; const tb = a=> a.map (b=>b.j…

一人掛けベンチを作る2

連続したイベントをキャンセルし、一定時間が過ぎたらイベントを発火させる

寺尾で質問をした。 イベントを遅らせて発火させ、イベントオブジェクトから target 要素を取得したい もうちょっと自身で精査すればよかったのに・・・自己解決した。 これで文字を入力するたびに処理しなくてもよくなった。 <meta charset="UTF-8"> <title>イベントを遅らせられた</title> <body> <input type="text" name="inp"><br /> <input type="text" name="inp"><br /> <script> </body></meta>…

WEB画面に枯葉が舞う

それにしても短い休日だった。 母さん、三途の川を渡ったころだろうか。 https://oshiete.goo.ne.jp/qa/12665779.html枯葉よ~ <meta charset="UTF-8"> <title>Test</title> <body> </body></meta>

ベンチを作った

開拓地に設置するベンチを作った

開拓地

開拓地

JavaScript エンターキーで移動する。その4

teratail で回答したものより更に加筆 https://teratail.com/questions/325107 radio の checked は1つだけなので、最後に移動する。 textarea 内の改行はオートインデントが可能。 [Shift]+[Enter]は逆順に、[Ctrl]+[Enter]で checked の反転と textarea …

ISO 8601 覚書と正規表現

ISO 8601 覚書と正規表現 日付の表現 暦日付、年間通算日、週間日付の3種類だが、年間通算日と週間日付は除外する 暦日付 書式は YYYY-MM-DD または YYYYMMDDを許容する YYYYは4桁(0000-9999)、MMは2桁(01-12)、DDは2桁(01-31)とする 下位省略表記につい…

今月で一先ず teratail で回答するのはやめにしよう!

ISO 8601 継続時間表記を正規表現で抜き出す

ISO 8601 日時の期間文字列から W, Y, M, D, h, m, s を抜き出す。 書式は、P[n]Y[n]M[n]DT[n]H[n]M[n]S または、P[n]W /^P(?=(?:\d+(?:\.\d+)?W|(?:\d+(?:\.\d+)?[YMD]){1,3}(?:T(?:\d+(?:\.\d+)?[HMS]){1,3})?|T(?:\d+(?:\.\d+)?[HMS]){1,3})$)(?:(.+)W|(?…

JavaScript エンターキーで移動する。その3

隠された要素は飛ばす。 [CTRL]+[Enter]では、 checked にする テキストエリア内での処理を追加 IMEの未変換文字がある状態での Enter キーの対応 ルートの設定が個別にできること <title></title> <meta charset="utf-8"> <style> </style> <body> <form id="F"> <p> <input name="a" value="a"> <input name="b" value="b" type="hidden"> <input name="c" value="c"> </p></form></body></meta>

JavaScriptの質問に答えているだけでは、自分のスキルはあまり向上しない

なんとなくそう思った。

JavaScriptでスライドを作る!しかもスクリプトは1行

基本的な考え方 アニメーションはスタイルシートで行い。対象の要素群の先頭にだけ適用する。 アニメーションが終了するとイベントが発生するのでそれを監視する。 イベントの終了した要素を、その要素群の最後尾に移動する。 寺尾での回答 https://teratail…

SELECT[multiple]:selected を取得する方法を発明した?

そもそも SELECT:selected なんてものはない! そこで change イベントで select[multiple] をすべて監視し、selected になったもに "data-selected" を付与しておけば、いつでも querySelectorAll で取得できる。 もちろん、クエリーにもそれを付与しなけれ…

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 hash2…

Smail Sever 解決する課題 サーバー変数が取得できない モジュール形式にすることでとりあえず回避 元号日付に対応していない $str = strftime ("%Ex", strtotime ($strDate));

十年来、行って手を合わせたかった場所にやっと行くことができた。 往復に700km。 宮城県の大川小学校だ。 津波で死んだ人たちに会いたかったからだ。 周りは工事中で騒がしい場所ではあったが、近くに慰霊の石碑があった。 足が悪いので雪道は勘弁。車の…