■正規表現
最長一致
一番長いものにマッチするので意図しないものが置換されがち
ABC (c) & DEF (c)でABC (c)にマッチさせたいとき、
ABC.*)の代わりにABC[^)]*がベターとかそういうこと
.* 繰り返し
.+ 1文字以上
[a-zA-ZO-9][a-zA-ZO-9] 英数2文字 → A1等
[a-zA-ZO-9]+\.jpg JPGファイル
\$100 \でエスケープ → $100
\\100 エスケープをエスケープ → \100
^ 行頭 ^# → #以外
否定 [^a-z] → aからz以外
$ 行末 jpg$ → jpgで終わる行
. 任意の１文字 ... → 3文字
* 直前文字の0回以上の繰り返し a* → aとか とかaaaaとか
シェル）0文字以上の任意の文字 *.pdf → pdfファイル
? 直前文字の1文字か0文字 all? → allかal
シェル）任意の1文字 ??? → 3文字
+ 直前文字1回以上の繰り返し a+ → aとかaaaaとか
- 範囲(文字コード上の) [0-2] → 0か1か2
[] いずれか1文字 [012] → 0か1か2
| いずれかの文字 slee|ap → sleeかap(前後文字をまとめて判断)
() まとまり sle(e|a)p → sleepかsleap
\< 単語の先頭境界 \<no → nothingやnobody等
\> 単語の末尾境界 \<no\> → noのみ
{min, max} 繰り返し回数の範囲 e{2，5} → eeやeeeeeやbeepやdeep等
シェル）リスト展開 e{2，5} → e2とe5
\b 空文字
\d 数字1文字 [0-9]
\D 数字1文字以外 [^0-9]
\s 空白文字（改ページ、改行、タブを含む）[ \f\n\r\t]
\S \s以外
\w アルファベット数字 [a-zA-ZO-9]
\W アルファベット数字以外 [^a-zA-ZO-9]
■-の範囲は文字コード上
なのでEBCDICコード(IBMEBCDICカナ)の[A-Z]は$}を含む、[A-IJ-RS-Z]が正しい
なのでposixのブラケットが安全[[:alnum:]]
■サンプルは検索すると早いが
https://murashun.jp/blog/20190215-01.html#chapter-3
■デバッガー
https://www.debuggex.com/
■Winのワイルドカード
? 1文
* １文字以上
■オラクルSQL
% NULLを除く0文字以上の任意の文字列にマッチ
_ 任意の1文字にマッチ
■本（正規表現の達人）を見よ
シェルのメタキャラクタを使う(リストを見やすく)
シェルのメタキャラクタを使う(ファイル名を補完)
コマンドの検索パターンとして使う(条件検索)
メールアドレスを抽出する
メールアドレスを抽出する(もっと厳密に)
メールアドレスを抽出する(Perlで)
コメン卜行・空行を削除する
マッチした文字列を抽出する(Perlで)
コメント行・空行を削除する(厳密に)
コメント行・空行を削除する(Perlで)
コメン卜行・空行を削除する(Cのソースコードから)
改行コードを変燥する(Win⇔UNIX⇔Mac)
電話番号をチェックする(簡易版)
時刻を条件にロクファイルをチェックする
HTMLファイルから見出しを抽出する
HTMLファイルから見出しを抽出する(さらに加工)
HTMLファイルの記述を修正する
郵便番号のチェック(Webフォームで)
英小文字からなる文字列にマッチする正規表現は？
西暦の年月日を「年/月/日」の形式で表す正規表現は？
‘daemon'と‘demon'の両方にマッチする正規表現は？
タブで区切られた2つの項目を入れ替え、カンマ区切りにするには？
メールボックスファイルからメールアドレスを抽出するには？
メールアドレスのユーザ名を厳密にチェックするには？
メールアドレスのドメイン名を厳密にチェックするには？
Perlで変数に格納されている文字列と正規表現がマッチするかとごうかテストするには？
JavaScriptで、変数に格納されている文字列と正規表現がマッチするかどうかテストするには？
シェルスクリプトからコメント行空行を削除するには？
正規表現にマッチした文字列から必要な部分だけ抽出するには？
余分なスペスを取り除くには
Cのソースコードからコメント行空行を削除するには？
複数行にまたがったコメントを取り除くには？
正規表現を使って改行コードを変換するには？
電話番号をチェックするには？
時刻をチェックするには？
郵便番号をチェックするには？
HTMLの見出しタグに困まれたデータを取り出すには？
HTMLファイルの記述をまとめて修正するには？
sedで前方参照を使うには？
大文字小文字の区別を無視するには？
sedでパタンの区切り文字「/」を変更するには？
Perlでパタンの区切り文字「/」を変更するには？
ファイル名がある範囲の文字で、終わっているファイルを表示するには？
長いファイル名を入力する手聞を省くには？
「.」「..」を含み、「.」からはじまるファイル名のファイルを表示するには？
「.」「..」は含まずに、「.」からはじまるファイル名のファイルを表示するには
多量の画面出力に対して、ページ単位でスクロールを止めるには？
画面出力をファイルに保存するには？
編集前と編集後のデータを比較するには？
元のファイルからどれくらいデータが抽出されたか調べるには？
データをソー卜するには？
重複するデータをlつにまとめるには？
findコマンドの検索条件にメタキャラクタを使うには？
入力行の指定した文字位置から指定したフィルドを切り出すには？
egrepコマンドで、検索条件にマッチした行円以外"を表示するには？
viで複数ファイルを編集するには？
viの検索パタンに正規表現を使うには？
trコマンドで空行を削除するには？
viで、改行コードを変換するには？
trコマンドで改行コードを変換するには？
■改行コード
\n(LF)：Unix系OS全般、Mac OS X
\r\n(CR+LF)：Windows系OS
\r(CR)：古いMac OS（9以前）
varを省略した場合は関数内での宣言であってもグローバル変数(window.と同じ)
関数外のvarはグローバル変数
関数内のvarのみローカル変数（だが、関数の中に関数を作るとスコープチェーンによって、内側のローカル変数から順に探していくので、関数の外からは見えないが関数の内からはアクセスされる恐れはある）
関数を変数の様に書ける（無名関数）、スコープチェーンやレンダリングが関係している(後述)
//関数式による定義、JSは全てobjでありobjを受け取ってその中のメソッドを使う、New不要のケース
create_row = function(){
var tbody = document.getElementById("input_tbody");
var new_row = tbody.insertRow(num_row+1);
var cell1 = new_row.insertCell(0);
var copy = function(cell,tb,arg){
cell.innerHTML = tb.rows[num_row].cells[arg].innerHTML;
}
return {tbody: tbody, cell1: cell1, copy: copy};
};
copy_cell = function(obj_create_row){
obj_create_row.copy(obj_create_row.cell1, obj_create_row.tbody, 0);
};
//ここからフロー
num_row = 1;
setTimeout(function(){
console.log('setTimeOut');
obj_cr = create_row();
copy_cell(obj_cr);
num_row++;
}, 2000);
//ここからHTML
<table border=1>
<thead><tr><th>Items</th><th>Expenditure</th></tr></thead>
<tbody id="input_tbody"><tr><th>Pen</th><td>3,000</td></tr>
<tr><th>Eraser</th><td>1,000</td></tr></tbody>
</table>
ココから改めて追記する形でJavascriptの学び直し
///基礎文法
http://gifnksm.hatenablog.jp/entry/20100131/1264934942
一番下にリンク集がある、コメントも仕様が分かり参考になる
https://language-and-engineering.hatenablog.jp/entry/20100111/p1
///オブジェクト
https://www.wakuwakubank.com/posts/464-javascript-array-object-pattern/
オブジェクトは連想配列ようである、なおJSには配列[]/オブジェクト{}/JSON[{"":""},{"":""}]を使う
var obj = {a: 1, b: 2};
for (var i in obj) {
alert(obj[i]);
}
for each (var v in obj) {
alert(v);
}
オブジェクトにはメソッドも付与しカプセル化可
var man = {
time: 0,
gettime: function() { this.time = new Date(); },
hello: function() { alert(this.time + 'hello!'); },
};
man.gettime();
man.hello();
///インスタンス化
ファンクションでクラスを宣言（←古い。Classが実装される前の話）
https://so-zou.jp/web-app/tech/programming/javascript/grammar/function/class/
function Image() {
this.width = 0;
this.height = 0;
this.src = '';
}
実はそれにはプロトタイプもあるので足せる（蛇足になるのでリンク等を参照）
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain
Image.prototype.type = 'image object';
Image.prototype.width = null;
Image.prototype.height = null;
Image.prototype.src = null;
Image.prototype.resizeTo = function(aNewWidth, aNewHeight) {
this.width = aNewWidth;
this.height = aNewHeight;
};
まとめて下記の書き方もできる
Image.prototype = {
type : 'image object',
width : null,
height : null,
src : null,
resizeTo : function(aNewWidth, aNewHeight) { alert(aNewWidth + aNewHeight); }
};
newでコンストラクタでのインスタンス化する
var img = new Image();
img.resizeTo(30, 40);
///無名関数、匿名関数、クロージャ、関数式
https://www.sejuku.net/blog/25026
クロージャとは関数とその関数が定義された状態をセットにした特殊なオブジェクト
var メソッド名的変数 = function(引数) { /*処理*/ } あるいは他メソッド(function(引数) { /*処理*/ });等で直使用
メリットとして
極力グローバルの変数や関数を使わなくて済む
余計な関数名や変数名を考えなくても済む
無名関数は式が実行されるときにFunctionオブジェクトが生成される
無名関数は定義より前では呼び出せない（定義した所で呼び出すので混同がなく安全と考えられる）
Javascriptは同名をオーバーライドする
旧来の関数宣言は定義より前に実行が書かれていても呼べる
どの関数が使われるか注意が必要（便利だが大規模では危険と考える場合も）
手続き型ではこうだが、
<html>
<head>
<script type="text/javascript">
function button1Click(){
alert(1);
}
function windowOnload(){
var button1 = document.getElementById("button1");
button1.onclick = button1Click;
}
</script>
</head>
<body onload="windowOnload()">
<form name="foo">
<input type="button" id="button1" value="1">
</form>
</body>
↓無名関数ではこう
<script type="text/javascript">
window.onload = function(){
document.getElementById("button1").onclick = function(){
alert(1);
};
};
</script>
//下記は無名関数を変数に入れているので実行自体はされない
実行結果を入れている分けではない、なお実際は変数名が関数名だが
var hello = function(){alert("Hello");};
//これなら実行される、ほかにも即時関数の書き方がある
setTimeout(function(){ alert("Aloha"); },1000);
///即時関数
functionから始まる関数定義そのものを()でくくって(arg)を付けて即実行できる
普通()だが関数式と評価されればいいので、!でも同じ、+-でもOK
(function(){ /*処理*/ })();
<script>
var sum = (function(a,b){
var result = a + b;
return result;
})(1,2);
alert(sum);
!function(a,b){
let result = a + b;
alert(result);
}(3,4);
+function(a,b){
let result = a + b;
alert(result);
}(5,6);
</script>
///上記重複だがclassが導入されたES6より前の書き方（Classがないver）
https://www.yunabe.jp/docs/javascript_class_in_google.html
関数には関数式（無名関数）と関数宣言の2通り
関数宣言は旧来のfunction name(){}の方法
下記例が関数式
//関数式でのクラス、これはnewが必要だった
var Person = function(name, age) {
this.name = name;
this.age = age;
};
var alice = new Person("Alice", 7);
console.log(alice.name); // Alice
//これならnewは不要
var Person = function() {
return { name: "alice", age: 7 };
};
var alice = Person();
console.log(alice.name); // Alice
//オブジェクトでの継承、オブジェクトではnewが不要
var sayHelloShared = function() {
console.log("Hello, I'm " + this.name);
};
var alice = {
sayHello: sayHelloShared,
name: "Alice"
};
var bob = {
sayHello: sayHelloShared,
name: "Bob",
child: alice
};
alice.sayHello(); // Hello, I'm Alice
bob.sayHello(); // Hello, I'm Bob
bob.child.sayHello(); // Hello, I'm Alice
//new必要？
エラーがでなければ不要といえるのでは、、、
newするとコンストラクタで明示的初期化がされインスタンスも作られるが、、、
Javascriptは全てがオブジェクトであり、newを要不要は仕様でなく使い方の範疇のようで、それゆえ、functionでクラス化したり、メソッドを定義したり、無名関数だったりできる、、、newもエラーがでなければ不要かと
//扱い注意
thisが指す対象が、objが参照で別実態だったり、タグ要素であったりで注意が必要
console.logに出して確認するといいかも
メソッド内で使われている this が指すものは呼び出され方によって変わる
obj.hoge(); の形で呼び出された場合thisはobjになり
hoge();の形で呼び出された場合はthisは window (グローバルオブジェクト) になります
https://so-zou.jp/web-app/tech/programming/javascript/grammar/function/class/
別実態
var Person = function(a, b) {
return { name: a, age: b };
};
var alice = new Person('Alice', 7);
var takahashi = new Person('Takahashi', 6);
takahashi = alice;
console.log(takahashi.name); //Alice
///ECMAScript 6 (ES6) でクラスの構文が追加
クラス構文にはクラス宣言とクラス式という 2 つの定義方法
クラス宣言の方法
class Teki{
constructor(name, hp){
this.name = name;
this.hp = hp;
}
attack(){
console.log(`${this.name}の攻撃！`);
}
}
class Dragon extends Teki{
hello(){
console.log(`${this.name}のHPは${this.hp}です。`)
}
}
var boss = new Dragon('どらごん', 3000);
boss.attack(); // どらごんの攻撃！
boss.hello(); // どらごんのHPは3000で
こちらがクラス式
var Foo = class {
hello(){
console.log("Hi!");
}
};
var obj = new Foo();
obj.hello();
///可変変数（変数名に変数を使いたいとき）はevalで変数を含んで実行する
var new_div = eval('document.querySelector(\'#item' + settings.num_item + '\')');
eval('window.item' + settings.num_item + ' = new classItem;');
エスケープは円マーク
indow.a とwindow.を付けるとグローバルになる(関数の中からグローバル変数を作る等)
//タグ要素を取得、cssセレクタで指定
document.querySelector('#main .posts h1'); //最初の一つを取得
document.querySelectorAll('a'); //すべて取得
///実行の順番
https://kde.hateblo.jp/entry/2017/05/20/212928
https://www.javadrive.jp/javascript/ini/index2.html
ブラウザはスクリプトが記述されたHTMLファイルを順に解析しながらブラウザに表示。その途中に<script>要素が現れるとHTMLの解析を一時中断し、そのスクリプトが実行されるのを待ちます。そしてスクリプトの実行が終了すると続きからHTMLを実行していきます
Javascriptは同名をオーバーライドします
そのためwindow.onload = function(){は、複数あってもオーバーライドで一番下だけ実行する
外部ソースにwindow.onload = function(){ があってもトータルでどれか一つしか実行されない
window.onload = function(){
alert('1');
}
window.onload = function(){
alert('2');
}
テストしました
<html>
<head>
<script type="text/javascript" src="/js/js1.js"></script>
<script type="text/javascript">
alert('at header 1');
window.onload = function(){
alert('at window.onload');
}
alert('at header 2 after window.online');
</script>
<script type="text/javascript" src="/js/js2.js"></script>
</head>
<body onload="alert('at body tag onload');">
<script type="text/javascript">alert('at body');</script>
</body>
</html>
↓
下記順番に実行される
↓
1)js 1
2)header1
3)header2 after window.online
4)js2
5)body
6)window.onloadの中で最後のもの一つだけ実行(最下行が強い)
js1 window.onload(後ろのwindow.onloadあると本項目は実行されない)
window.onload(後ろのbody tag onloadがあると本項目は実行されない)
body tag onload(これがあると'at window.onload'は実行されない)
js2 window.onload(これがあると'body tag onload'は実行されない)
onloadは実行の順番を遅くする方法、他のテクとして
window.addEventListener('DOMContentLoaded', function() {
これはDOMのツリー構造が完了した時点で実行されるのでonloadより早い
bodyの閉じタグ直前にJSを入れる
//JavaScriptはシングルスレッド、非同期でも待ちが発生する場合もあり遅い、WebWorkersならマルチ可
setTimeoutは 「指定秒数後に実行」ではなく「指定秒数後に実行キューに登録」
https://language-and-engineering.hatenablog.jp/entry/20090614/p1
JavaScriptの非同期処理は並列処理でない
非同期処理では処理が実行できるようになるのを待ち実行できるようになってから実行する
タイマー系はシングルスレッド問題がある、書き方ではない、()必要、""不要、無名関数でもだめ
setInterval(set(),10) setInterval("set",10) setInterval(function(){set();},10);
setTimeout(function(){ }, 0)と書くと擬似的に並列処理ができるらしい
非同期処理の考慮はpromise/async/awaitで行うことが多いが癖が強い、こちらに移行
https://www.bangboo.com/cms/blog/page_341.html
マルチスレッドで実行するにはWebWorkersというAPIを使うと実装可
Web Workerとメインスレッドでのデータのやり取りにはpostMessageというメソッドを利用する必要がある
https://qiita.com/klme_u6/items/ea155f82cbe44d6f5d88
オブジェクト的な方が早い
手続き型の上から下への書き方は、実行スレッドが通信中に解放されないことである。
UIスレッドからこんなプログラムを実行すればユーザーインターフェイスが無反応になる。
https://satoshi.blogs.com/life/2010/01/sync_vs_async.html
//Web worker 並行処理 postMessage
https://www.html5rocks.com/ja/tutorials/workers/basics/
https://www.atmarkit.co.jp/ait/articles/1201/13/news138_2.html
別ファイルにしてキックするだけで簡単
///引数
https://wp-p.info/tpl_rep.php?cat=js-application&fl=r12
数が多くても少なくても実行される、可変長引数argumentsオブジェクトを使っているから
var f = function(x, y, z){
console.log(x);
console.log(y);
console.log(z);
console.log(arguments[0]);
if(arguments.length == 4){ console.log('4'); }
};
f(1, 2, 3); //1,2,3,1
f(1, 2, 3, 4); //1,2,3,1,4
f(1, 2); //1,2,undefined,1
■ES6での変更
https://qiita.com/soarflat/items/b251caf9cb59b72beb9b
///letは再宣言が不可能な宣言、constは再宣言と再代入が不可能な宣言
varは利用する理由がない？varは関数スコープで関数内ならどこでもOK、またグローバル化も可
letとconstはカーリーブラケット{}によるブロックスコープが有効で、For等ブラケット外からアクセスできない
letとconstは安全、varに単純置き換えはアルゴが変わるのでできない
if (true) {
var a = 1;
let b = 'aaa';
b = 'bbb'; // 再代入する
let b = 'ccc'; // 再宣言はエラー
const C = 'ddd';
C = 'eee'; // 再代入はエラー
}
console.log(a); // => 1
console.log(b); // => undefined
console.log(C); // => undefined
///アロー関数(無名関数の省略形、なおthisの扱いが違う)
アロー関数は、関数が定義されたスコープ内のthisを参照する
従来の無名関数は関数の呼び方によってthisの参照先が異なる
const fn = (a, b) => {
return a + b;
};
// 単一式の場合はブラケットやreturnを省略できる
const fn = (a, b) => a + b;
// ブラケットやreturnを省略してオブジェクトを返したい場合は`()`で囲む
const fn = (a, b) => ({ sum: a + b });
// アロー変数はargumentsがなく可変長引数を使う必要がある
const arrow = (...arguments) => { console.log(arguments); }
arrow(1, 2, 3) //=> [ 1, 2, 3 ]
///関数にデフォルト引数を指定できる
function multiply (a = 5) {
///分割代入
const [a, b, c, d] = [1, 2, {d: 3}, 3];
const object = {a: 1, b: 2, c: {d: 3}};
const {a, b, c, c: {d}} = object;
///テンプレート文字列（プレースホルダ）
``（バッククオート）で文字列を囲むと${}で文字列内に変数展開ができる
const name = 'soarflat';
const name = 'aaa';
console.log(`AAA is ${name}`);
///スプレッド構文
...で可変長の複数要素を表す、下記のように柔軟に
function func1 (a, ...r) { alert(a + r + r[0]); }
func1(1, 2, 3, 4, 5);//でa=1、r[0]=2が入る
console.log(Math.max(r)); // => NaN
console.log(Math.max(...r)); // => 5 上手くいかないケースでも使える
function func2 (a, b, c){
func2(...array_arg);//argumentsオブジェクトのようにできる
const [a, b, ...c] = ['a', 'b', 'c', 'C'];
console.log(c); // => ["c", "C"]
const array2 = [...c, 4, 5, 6];
for in/for ofで配列やオブジェクトの扱い
const array = [65, 55, 80, 100];
const obj = {name: 'aaa', country: 'Japan'}
for(const index in array) {
console.log(array[index]);
}//65 55 80 100
for(const key in obj) {
console.log(key);
}//name country
for(const value of array) {
console.log(value);
}//65 55 80 100
■promise/async/await はこちらに移行
https://www.bangboo.com/cms/blog/page_341.html
■FetchはAjax変わりになる
https://qiita.com/tomoyukilabs/items/9b464c53450acc0b9574
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch
fetchでget post
https://qiita.com/okashi/items/b5d5635b399396294af3
■ショートハンド
糖衣構文（シンタックスシュガー）とも：同じ意味の処理を元の構文よりシンプルに書ける別の書き方のこと
https://www.webprofessional.jp/shorthand-javascript-techniques/
https://qiita.com/kozzzz/items/b4cd57ead41fc6355afd
短縮記法が色々あって読みにくい↑を参考
他にもあるが、下記は参考になったので↓
「!==」(厳密不等価)は「&&」(論理AND)よりも強く結びつく
つまりnull!==e&&(e.innerHTML=t,e.style.display="block")は
(null!==e)&&(e.innerHTML=t,e.style.display="block") という意味
「&&」は 論理AND は、下記の動作をする
前から評価する
評価値「偽」が出たならば、「偽」を返して残りの部分は評価しない
カンマ演算子は、単純にカンマで区切られた式を順番に評価し、最後の式の値を返す
演算子であるのでカンマで区切られるものはすべて値・関数・式である必要
最終的にその演算子で繋がった式全体で真または偽となります
<script type="text/javascript">
let aaa={
displayResult:function(t){
let e=document.getElementById("result");
//該当DIVがあれば&&()の処理をする、IFの省略
null!==e&&(e.innerHTML=t,e.style.display="block")
}
};
window.onload = function(){
(function(t){
let e=document.getElementById("result");
if(e){
e.innerHTML=t;
e.style.display="block";
}
})('bbb');
setTimeout(aaa.displayResult('bbb'),5000);
};
</script>
<div id="result" style="display:none">aaa</div>
■ゲーム
https://qiita.com/doxas/items/9debec7e1f0c19bc8daa チュート８迄でOKか、９でボス１０で処理高速化
http://www.west-mira.jp/javascript/list/4/16/ の打打打
どちらもsetTimeoutで自己関数を呼び出すループをしている
var run = true;
var fps = 1000 / 30;
window.onload = function(){
// ループ処理
(function(){
// HTMLを更新
info.innerHTML = message + ' at ' + mouse.x + ' : ' + mouse.y;
if(p.length() < chara.size){
// 衝突があったのでパラメータを変更してループを抜ける
run = false;
message = 'GAME OVER !!';
break;
}
// フラグにより再帰呼び出し
if(run){setTimeout(arguments.callee, fps);}
})();
};
function Games(){
//判定処理やら得点処理やら描画処理
clearTimeout(my_time);//setTimeoutをキャンセル
if(tokutenn<0){
game_end=1;
alert("GAME OVER...");
}
if(game_end!=1)my_time=setTimeout('Games();',hayasa);
}
■ネイティブで実現させるフロントエンド
https://blog.kannart.co.jp/coding/1199/
カルーセル addEventListenerでクリックされると要素分移動する
ハンバーガ 画面サイズでハンバーガDivの表示切替、クリックでナビDiv表示
グローバルナビ マウスオーバでナビDiv表示
フッター固定 スクロール300でposition:fixedを表示
スムーズスクロール scrollTop分をsettimeoutでループし段々移動
無限スクロール ローディング画像を非表示＞最下部に行けば＞ローディングを表示＞要素を追加していくが
ページネーションのURL page.php?p=3から指定の要素を取り込んでいる（サーバサイド処理不要）
///解説系
https://www.nishi2002.com/14962.html フッター表示
https://beginners.atompro.net/smpdhtm_divhide1.html ナビ
https://popo-design.net/template/ シンプルRWD
http://cly7796.net/wp/javascript/implement-infinite-scrolling/ 無限スクロール
///例
カルーセル、ヒーロー、グローバルナビ
https://www.rakuten-card.co.jp/e-navi/members/index.xhtml
スクロール系（タイトルとナビとサブナビとフッターが各スクロールポイントが違う、広告追従、トップ戻るボタン）
フッターに広告、トップにスクロールで戻るボタン
https://ferret-plus.com/6385
https://www.sejuku.net/blog/52998
https://liginc.co.jp/392786 （グローバルナビも）
広告がスクロールに追従
https://dekiru.net/article/19272/
sticky-state 2.4.1 - (http://soenkekluth.com/) - https://github.com/soenkekluth/sticky-state#readme
スクロールの進み具合を表示、最後に広告？
https://blog.hubspot.jp/google-forms
無限スクロール ローディングbyスクロール
https://shopping.yahoo.co.jp/search?p=Oakley+holbrook
ハンバーガ拡大アニメ
https://rfs.jp/sb/javascript/js-lab/resize-header-scroll.html
Wijimo Grapecity 感じのいいレスポンシブ
https://demo.grapecity.com/wijmo/demos/Input/ListBox/InfiniteScroll
ドラッグ&ドロップでHTML要素を移動
https://q-az.net/elements-drag-and-drop/
https://web-designer.cman.jp/javascript_ref/mouse/move/
https://qiita.com/kaikusakari/items/ca45910a35712daca68c
ドラッグ&ドロップでファイルをアップロード
https://platycerium.sakura.ne.jp/node/812
https://www.okushin.co.jp/kodanuki_note/2018/02/%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0%E3%82%A2%E3%83%B3%E3%83%89%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%81%A7%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC.html
↓使用されるJS
https://lab.syncer.jp/Web/API_Interface/Reference/IDL/DataTransfer/dropEffect/
https://lab.syncer.jp/Web/API_Interface/Reference/IDL/DataTransfer/effectAllowed/
https://lab.syncer.jp/Web/API_Interface/Reference/IDL/Event/preventDefault/
https://app.codegrid.net/entry/dnd-api-1
https://qiita.com/tochiji/items/4e9e64cabc0a1cd7a1ae
https://chaika.hatenablog.com/entry/2019/02/15/090000
DataTransferは、ドラッグ操作やクリップボード操作で転送されるデータ扱うインターフェイス
コンストラクタ
DataTransfer() 新しいDataTransferのオブジェクトを作成します。
メソッド
clearData() 転送中のデータを削除します。
getData() 転送中のデータの内容を取得します。
setData() 転送中のデータの内容を変更します。
setDragImage() ドラッグ操作中に表示するイメージを設定します。
プロパティ
dropEffect 転送データを取り扱う時のドロップ側の操作を返します。
種類：copy, move, link, none
effectAllowed 転送データを取り扱う時のドラッグ側の操作を返します。
種類：copy, move, link, copyLink, copyMove, linkMove, all, none, uninitialized
files 転送中のファイルの一覧をFileListで返します。
items 転送中のデータの一覧をDataTransferItemListで返します。
types 転送中のデータの種類の一覧を配列で返します。
addEventListener()でリッスンするドラッグイベント
dragstart, drag, dragenter, dragleave, dragover, drop, dragend
preventDefault() 規定の動作をキャンセルし文字入力やクリックや画面の遷移を行わない等
stopPropagation() イベント伝播を行わないようにする
classList クラス属性でDOM操作できるオブジェクト、クラスの追加/削除/切替/含むか判定等ができる
■ indexedDB
https://dev.classmethod.jp/articles/html5-indexed-database-api/
キーバリューを保存できる
このサイトのバックアップもアップロードフォルダーに一応取ってある
/// BANGBOO BLOG /// - Dexie がラッパーとして良き
IndexedDB のインターフェースは非同期でイベントベース
indexedDB.openのonsuccessで実行が必要だったり、UX上は良いかもしれんが扱いは面倒（毎回Openのonsuccessで良いが）
色んな形式で保存できるらしい、インデックス化は便利か
https://qiita.com/butakoma/items/2c1c956b63fcf956a137
https://ikkyu.hateblo.jp/entry/2019/11/23/180259
https://blog.htmlhifive.com/2018/06/06/indexed-db/
https://qiita.com/sachiko-kame/items/aebd618ef39de982ed7b
/// 他のクライアントへのデータ保存
１）localStorage/sessionStorageは同期型でgetItem/setItemを実行できる、5MBでStringのみ
扱いは簡単だが、引っこ抜き安全でない
https://techracho.bpsinc.jp/hachi8833/2019_10_09/80851
https://www.granfairs.com/blog/staff/local-storage-01
https://qiita.com/masamitsu-konya/items/c69515604570150d3ab9
２）Cookieはサーバでヘッダーで生成される、4KBまで、JSで生成し書込/読込できる、サーバ送信される？
通常ページ表示でCookieがブラウザ保存され、再度そのページにアクセスの際ブラウザからCookieがサーバーに送信
https://qiita.com/dokkoisho/items/b415f1c9852c8fd12ec8
https://www.sejuku.net/blog/28696
Secure属性 httpsの通信の時のみCookieを送信、のぞかれないように、ONに
HHTPOnly属性 JSでの参照を防ぐ、ONに
SameSite属性 上の2つをした上でサイト構成を見てLAX以上にできればする
Strict: 同一サイト/ドメインリクエスト間のリクエストでのみCookieを送信
Lax: 他サイト/ドメインの遷移で、GETであればCookieセット
None: 以前通りリクエスト先がCookieをセットしたドメインであればCookieをセット
https://laboradian.com/same-site-cookies/
https://www.future-shop.jp/magazine/info-samesite
https://www.softel.co.jp/blogs/tech/archives/4942
■知りたい実装
/// e = pow(10)=10の累乗=0の数
31536e3 は 31536 * pow(10,3) = 31536000 であり秒数換算で1年
/// 引数にアルファベット1文字 function(a,b,c,x,y,z,e,t,n,s,o){
a,b,cとかx,y,zとかの順番とか、後は大体頭文字
eはイベント、エラー、エレメント、Tはタイプ、テンポラリ、ターゲット、テキスト、Nはナンバー、Sはストリング、Oはオブジェクト、Iはインクリメント等
/// エンコード系
btoa バイナリデータの文字列から base64 エンコードされた文字列を作成、文字列変換なので入力はアスキー化かURIエンコードの事前処理が必要
atob base64 形式でエンコードされたデータの文字列をデコード
escape 文字列をASCII形式でエンコード、ブラウザによってはLatin1ではなくUnicodeになる？
unescape ASCII形式の文字列をデコード
encodeURIComponent スペースが%20になったりURL用エンコード
decodeURIComponent URL用にエンコードされた文字列をデコード
base64はa-Z0-9と幾つかの記号の64種で画像や音声等バイナリを文字化しメール送信等の用途、普通はURIエンコードだけ使う感じか
==============================
■Chrome DevTools デバッガー
JSをソースタブで開く
{} でMinifyを解除
ブレイクポイントで止めて変数の状態を調べステップ(イン)で実行
console.log()でロギング
エラー発生時の自動一時停止の有効化
https://qiita.com/d-dai/items/0b580b26bb1d1622eb46
https://ja.javascript.info/debugging-chrome
リバースエンジニアリング
エレメントタブで影響のあるエレメントのソースを抜き出す
classやidの名前から機能を類推、CSSやJSで使われているか検索する
[Ctrl] + [Shift] + [F] を押すとページが読み込んだソース全体から検索可
https://www.doe.co.jp/hp-tips/browser/chrome-devtools-techniques/
