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 - in は連想配列に使う（for in は配列にはダメ・??
for - of は列挙可能なオブジェクト（配列等）に使う
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
///try catch
syntaxエラー縺?try catchする必要がある、エラー繝?ンドリングはこれ以藹??に色々ある
try{
let obj = JSON.parse(input);
}catch(e){
console.log(e instanceof SyntaxError);
console.error(e.message);
console.error(e.name);
console.error(e.stack);
flg_e = 'ERROR'
}
///文字置觸?? 正鐔??表軆??replace
output = input.replace(/\,/g, ",\n"); gを付けなければ最初の臀??つだけ
■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
スタックトレースするに縺?debuggerとかconsole.trace()
JavaScriptのデバッグに縺?debugger文を使おう - Qiita
リバースエンジニアリン繧?
エレメントタブで影響のあるエレメントのソースを抜き出す
classやidの名前から機能を類推、CSSやJSで使繧?れているか検索する
[Ctrl] + [Shift] + [F] を押すとページが読み込んだソース全臀??から検索藹??
https://www.doe.co.jp/hp-tips/browser/chrome-devtools-techniques/
