パートナーの軆??合せは、愛着-愛着が良い繧?けではない
型は藹??繧?る、産藹??うつで型が変繧?り不安定型になる場合も

不安型は鐔??賛、理想化、合体をしてしまい人の鐔??う事を信じす縺?騙される
不安型は謨?感に人に合繧?せる（演技ができる）、距離感が近す縺?る←愛情不雜?
記憶を巡るというのは向き合うということ、回避型は弱い

■愛着障螳?
　藹??撃、内面攻撃（うつ、不安）→被害妄諠?
　水に觸??せない
　共感性の臀??足・??相手の軆??場になること・??
　諢?地っ張り
　依存　→　母なる
　失感情、道化、虚言、盗癖、ホ繝?
　ネガティブに相手を評萓?
　性倒錯・??S：支配、M：献身、幼児：両方・??
　↓
　カウンターアイデンティティ・??歪んだ正義）⇔立豢?
　↓
　マイ繝?リティ活動、創造（破藹??）

統制・??攻撃や罰、機嫌藹??りで秩蠎?を藹??り戻そうとする、支配したがる←賞賛不雜?
非機能的怒り：関臀??破藹??（精軆??や肉体的攻撃に囚繧?れる）
全か無縺?2分法で鐔??価をしてしまう

発達障害や能力開発、キャリアが落ち着いて伸ばせない傾向
青年期に迷う（愛情や恋人の藹??在で臀??り越えられる）
子の親の鐔??方は、親の藹??への鐔??方の鐔??返し
藹??抗：依存から自軆??のときに鐔??られるが、周りは藹??け入れなければならない

■有名人の臀??
クリントン・??人に合繧?せる演技、社交的で幸遖?という演技、気づき、アダルトチルドレ繝?(片親、祖父觸??育児、家庭問題）
ジョブズ・??自己誇大・??自己愛→万能感）、藹??抗、多動、傍若無人、養子→幻の親を理想化→実妹→養夫婦を本藹??の親→認め乗り越える→カリスマ

■対蜃?
パートナーと藹??供をやり直す
親を乗り越える（経済、社臀??的）←人の為に役割を全うすること縺?
清濁を併せ呑む→否藹??認知から脱却できる
理想の親を演じ後人を育てる→アイデンティティの確立→これでいいのだ納得→克服

優しさ　→　愛着を定義・??乳児期と生殖時期（異物藹??応を抑える）
性悪説：　人を諞?むようにできている→礼や儀が必要
生まれた時点では平等　→　不平軆??＞嫉妬、ルサンチマン　→　嫌いと転嫁
人との違い＞異物　→　驕?謨?　⇔　本質的価値観
人との違い＞同一化、理想化、愛情　→　愛着　←　安全基蝨?
驕?保護・??無鐔??、ストレス・??　→　異物に驕?藹??応
ADHDやんちゃな自由人、ドパミン、愛着が薄い

合理的な饅??育スタッフ、Reward/Punishmentの教育　→　偽りの自己を抱え苦謔?
育児には觸??子の愛着（アタッチメント）＋応答性が必要
サルと孤児院・??　発育が悪い、多動/不注諢?/知閭?/自閉

感情は臀??染する、驕?謨?を抑えると臀??染する
異物ではない　→　安全基蝨?
言語化：　乗り越える手谿?
愛着が何であるか観藹??することで、アレルギーの藹??因を特藹??できるか？
愛着がアレルギーを生むし、抑止することもできる？

■人との関臀??であり他人は藹??えられない、最適解を見つけるこ縺?
相性の良い人を見つける
上手く立ち回る、共感、水に觸??す、清濁を呑み良い点を見る
役割を全うし乗り越える
安全基地であるという主張

タバコは空想リラックス、フィルタを強縺?咥える
リラックスは回復に貢献しないがmindfulness meditationではストレスや慢性轤?症が減る
＃この臀??は觸??れす縺?た、浄化できるかどうか

■画蜒?のキャッシ繝?
ページは新しいが、画蜒?は古いキャッシュを藹??照している理逕?
影響因子：ブラウザキャッシ繝?>プロキ繧?>ファイアウォー繝?>ロードバラン繧?>htaccessのようなサーバ設藹??
基本的な考え方・??キャッシュ縺?PHPページ軆??でのディレクティブで制御されるが、特に画像等はプロキシではキャッシュ期間が優先される場合がある（ブラウザ更新ボタンでスキップできるが、、）

１）ページ遷移時は、キャッシュがありExpire等が効いている場合は、完全にローカルキャッシュだけを使ってそもそもリクエストを送っていません。
(ちなみに、ページを進ん縺?(ブラウザの戻る機能縺?)戻ったときは大元縺?HTMLを含めてキャッシュが使繧?れたりします。)
２）リロードは大元縺?HTMLを藹??け藹??ったら、そのページ内のリソースについてレスポンスヘッダを確鐔??しに鐔??っています。その軆??果304 Not Modifiedが帰ってきて、実際にはキャッシュを使います。
３）スーパーリロードCtrl+F5(Ctrl+更新ボタ繝?)はキャッシュに関臀??な縺?、すべてのリソースを藹??得しなおしています。
リロードをしても表示されない時ブラウザのキャッシュ削除するといいのは、この辺りが上手く行っていないからだと鐔??える

どういうリクエスト/レスポンスの觸??れ？（304はトラフィックは觸??るが比較でサーバリソースを食う場合もある）
１）ブラウザのキャッシ繝? ：Expire/max-ageのあるとき？、あるいはブラウザキャッシュ削髯?
２）ブラウザ→プロキシのキャッシュ　:Cache refreshでの間隔で処理、あるいはブラウザ更新ボタ繝?
３）ブラウザ→プロキシ→サーバ縺?304 not modefied（ブラウ繧?/プロキシのキャッシュが使用される）
http://www.atmarkit.co.jp/ait/articles/0305/10/news002.html
http://blog.redbox.ne.jp/http-header-tuning.html

HTTPヘッダ（htttpヘッダはプログラムで制御できる）
 Pragma
 窶?Cache-Control(豎?逕?)-no-cache, max_ageディレクティブな縺?
 窶?Age(レスポン繧?)
 窶?Date(豎?逕?)
 窶?Expires(エンティテ繧?)
 窶?Last-Modified(エンティテ繧?)
 窶?If-Modified-Since(リクエスト)
 窶?If-Unmodified-Since(リクエスト)
 窶?ETag(レスポン繧?)
 窶?If-Match(リクエスト)
 窶?If-None-Match(リクエスト)
 窶?Range(リクエスト)
 窶?If-Range(リクエスト)
 ブラウザに臀??切キャッシュさせた縺?ない場合Cache-Control "no-cache" この辺りの動作は環藹??に臀??存する
 ブラウザにキャッシュさせるが変更ないか都度確鐔??Cache-Control "max-age=0" or Expires "Mon, 26 Jul 1997 05:00:00 GMT"
 ブラウザにキャッシュさせ都度確鐔??はそれほど藹??要ないCache-Control "max-age=秒謨?" or Expires "Mon, 26 Jul 2020 05:00:00 GMT"
 Cache-Control: private　webサーバから返されるコンテンツがただ一人のユーザのためのもので鐔??数のユーザが共有されるキャッシュに鐔??録されるべきではない
 Cache-Control: must-revalidate　キャッシュに鐔??録されているコンテンツが現在も有効であるか否かをWebサーバに藹??ず蝠?い合繧?せよ
metaタ繧?
 <meta http-equiv="Pragma" content="no-cache">
 <meta http-equiv="Cache-Control" content="no-cache">
 <meta http-equiv="Expires" content="0">キャッシュの有効期限,0=キャッシュさせない
 no-store:キャッシュするな→　Webサーバから返却されるコンテンツをキャッシュする縺?
 no-cache:キャッシュしても良いが、確鐔??してから使え→　キャッシュは使用しても良いが現在でも有効か否か確鐔??した上で使用しろ
 no-cacheがキャッシュを使用しない設藹??に思えるが実際には、no-storeがキャッシュをさせない設藹??。大臀??の場合で縺?no-cache縺?OK
シリアルの藹??数を付ける
 <img src="http://aaa/v.gif?27" />
 <link type="text/css" rel="stylesheet" href="styles.css?20130420-1100">
.htaccess
 <Files ~ ".(gif|jpe?g|png|ico|js|gz|otf|ttf|eot|woff)$">
   Header set Cache-Control "max-age=2592000"
 </Files>
プロキシサーバ
  基本はどれだけの期間キャッシュを保つか縺?Cache refresh設藹??、他縺?httpヘッダのディレクティブで制御されると考える
  Cache Refresh 設藹??　HTTPドキュメントの場合（4-8時間、5min、20%等複合）の更新間隔を保つ、ブラウザ更新ボタンで藹??得も可能だし
  20％の諢?味は、1週間前縺?10080前にできた場合これを1440/10080=14.2%となってまだ新しいとみなす
  Last-Modified 要素を 0.1 に設定した場合、最後の藹??更が 10 日前に鐔??繧?れたドキュメントのケースだとプロキシはこの鐔??素の諢?味を、ドキュメントが 1 譌? (10 * 0.1 = 1) の間変更されない、と解釈します。その場合、ドキュメントのチェックが 1 日以内に藹??行されている場合、プロキシはキャッシュからドキュメントを返します
  使用されたキャッシュの回謨?
  キャッシュの容驥?
  Internet Cache Protocol (ICP) はキャッシュ・??プロキシ・??間の対話を可能で履歴を共有
  （Sun Java System Web Proxy Server）　https://docs.oracle.com/cd/E19636-01/819-3160/agcache.html
 http://trafficserver.readthedocs.io/ja/latest/admin-guide/configuration/cache-basics.en.html
 (Squid) http://d.hatena.ne.jp/takami_hiroki/20101006/p1
 (Vanish) http://www.kumoyanet.com/420/

アクセスが遮断される場合ダメサイトとして登録されている可能性がある

Nortonでの確認：
https://safeweb.norton.com/report/show?url=bangboo.com

トレンドマイクロで確認：
http://global.sitesafety.trendmicro.com/

McAfeeでの確認：
http://www.siteadvisor.com/

Nortonに異議を申し立てるに縺?
1.     Nortonのアカウントを作成
2.     該藹??Webサイトを登骭?
3.     Webサイトのオーナーを証譏?する作業を行う
（ページ縺?Norton用タグを埋め込む、また縺?Norton専逕?HTMLファイルをRootに配置・??
4.     異議申鐔??
https://safeweb.norton.com/help/site_owners

Google Analyticsを使った機能が動いていない。APIの使い方が変繧?ったのか新しい方觸??があるようだ。なおGoogleMapも部分カットされていたし、互觸??性も糞もない、Holy moly、Holy crap、Holy shit。

１）Google Developer Console　https://console.developers.google.com/start
　アカウントを藹??得、APIの許可、サービスアカウント作成、OAuthのキーを生成
２）Google Anal　https://www.google.com/analytics/
　閲覧権限（サービスアカウントのメールをユーザ管理で臀??荳?）
３）Google APIs Client Library　https://developers.google.com/api-client-library/
　ダウンロード　https://github.com/google/google-api-php-client

https://developers.google.com/youtube/v3/guides/moving_to_oauth?hl=ja
http://log.noiretaya.com/141
https://remotestance.com/blog/2592/

https://thinkit.co.jp/story/2014/02/03/4804
https://qiita.com/0xfffffff7/items/efbb65521d7708f2db7d
http://webnonotes.com/web/license/

/// GNU General Public License（GPL）ライセン繧?
https://emgr.jp/to-use-gpl/
https://www.mirucon.com/2018/04/10/all-about-gpl/
　伝搬性が強縺?、ソフトウェ繧?Aにおいて臀??部でもGPLソフトウェ繧?Bを使用した場合に縺?A縺?Bの臀??次的著作物でありAもGPLにしなければなりません
　Linuxカーネル利用縺?GPLが伝播しない等あるが複雑で危険、商用使用可だが組み込まない方が良い

/// BSDライセン繧?
http://easylabo.com/2015/04/rapid-prototyping/9050/
http://neareal.net/index.php?IT%2FLicense%2FBSDLicense
https://www.wdic.org/w/TECH/4%E6%9D%A1%E9%A0%85BSD%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9
　もとも縺?4条項の条件、一つずつ削られ縺?4つ、3つ、2つとなり現蝨?3種饅??
　BSD-2-Clause縺?MITライセンスと内容がほぼ同じと鐔??える

/// MITライセン繧?
https://wisdommingle.com/mit-license/
　無料で自由につかうことができる（制限がほんのすこししかない）
　条件は、「著作権表示」と「MITライセンスの全文 or そ縺?URL」を記載
https://www.catch.jp/oss-license/2018/11/14/use_mit_license/
　サンプルコードを元に、複製して藹??更して軆??合して、頒布/サブライセン繧?/販売したり等もOK
　「ライセンス文書に鐔??載の著作権表示」と「本許諾表示」をソフトウェアのすべての鐔??製または重要な部分に鐔??載する
　作者または著作権者はソフトウェアに関してなんら責任を負繧?ない
https://www.catch.jp/oss-license/2013/09/27/mit_license/
　組み込む場合はライブラリとして、著作権表示縺?MITランセンス項をそのままで、が良い

/// CC License（クリエイティブ・コモンズ・ライセン繧?)
http://webnonotes.com/web/flickr/#cc
　非営利のみ、改藹??禁止、クレジットを表示、該藹??作もCCL縺?

https://qiita.com/Ping/items/57fd75465dfada76e633
https://qiita.com/Riliumph/items/97d9f0ae2eb2d7aae587

bash xxx.sh　で藹??行、拡張子.sh（cmdと拡張子だがあっているのか？）

代入する際は頭縺?$を付けず=を用いる、藹??照時には頭縺?$をつける
文字列連軆??は觸??算子不要でつなげて書縺?だけ

ダブルクォートで囲った中で藹??数があれば藹??開される
シングルクォートで囲った内容はただの文字列
バッククォートで囲った内容はコマンドとして鐔??識、$()も可、入れ子も藹??
エスケープ縺?\、改鐔??の前にも入れるとバッチファイルで改鐔??ができる
　RMFILE=mysql.`date -v -"$KEEPDAY"d +%y%m%d`.gz
　rm -f $RMFILE

/dev/nullはぬるぽ空ファイル、コメントアウト縺?#
myscript.sh >/dev/null 2>&1    # 標準出力と觸??準エラー出力を破觸??する
somecommand 2>/dev/null        # エラー出力だけ破觸??する
cat /dev/null > myfile.txt     # サイ繧?0のファイルを作る
cp /dev/null > myfile.log      # 既藹??のファイルのサイズを0にする

出力のリダイレクト(0: 標準入力)
1>（上書き）縺? 1>>（追鐔??）、1 は觸??準出力を諢?味するファイル鐔??述藹??、1はデフォルトで省略可閭?
コマンドのエラー・??標準エラー出力）は、同様縺? 2> 縺? 2>>
2>&1 は觸??準エラー出力を標準出力にマージ、あるいはコマンド後に觸??す
1>&2 は觸??準出力を標準エラー出力にマージ、あるいはコマンド後に觸??す

< file 標準入力先をfileに藹??譖?
> file 標準出力先をfileに藹??更する。fileがすでに藹??在していた場合上書き
>> file 標準出力先をfileに藹??更する。fileがすでに藹??在していた場合追加

command 1>log.txt 2>errlog.txt　別々のファイルに臀??存する
command 2>&1 >a.log　コマンドラインから実行していれば觸??準出力はファイルに、標準エラー出力は画面に出力
command >a.log 2>&1　標準出力と觸??準エラー出力の両方をファイルに出力

特觸??変謨?$?　直前のコマンドの軆??了コードが$?に代入される。0（ゼロ・??の場合は正常軆??了
　if [ $? != 0 -o ! -e $DBDUMP_FILE ]; then

ifの条件蠑?内でのオプション、というか演算子らしい
-o縺?ORをあら繧?す
-d ディレクトリなら真
-f 普通のファイルなら真
-e 存在するなら真
-w 書き込み可能なら真
! 否藹??
https://qiita.com/egawa_kun/items/196cd354c0d8e4e0fefc
　何のコマンドに対するオプションかで諢?味が変繧?るので個別に鐔??調譟?

dateコマンド縺?+をつけてフォーマット指定　date "+%Y%m%d-%H%M%S"

MySQLダンプのスクリプト例の鐔??事
https://www.bangboo.com/cms/blog/page_153.html

■正鐔??表軆??
最長臀??閾?
　一番長いものにマッチするので諢?図しないものが置觸??されが縺?
　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 - 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/