Boolean   論理値
null      null値
undefined 未定義
Number    数値
BigInt    長整数
String    文字列
Symbol    シンボル
Object    オブジェクト

// 文字列でも使える
const expr = 'Apple';
switch (expr) {
  case 'Orange':
    console.log('Orange');
    break;
  case 'Grape':
  case 'Muscat':
    console.log('Grape and Muscat');
    break;
  default:
    console.log(`Don't know ${expr}`);
}

var    変数宣言
let    ブロックスコープでローカル変数を宣言
const  ブロックスコープで読み取り専用([再代入]不可の意)の定数を宣言([再代入]を防止するが、[変更]は防止しない)
※constは再代入はできないがプロパティは変更できる。
varは極力使用しない！

[配列/オブジェクトの代入]
元の配列/オブジェクトを参照する(同じポインタ)
＝代入先の内容を変更すると元の配列/オブジェクトが変更される
コピー(同じ内容で別ポインタを作成)が必要
https://developer.mozilla.org/ja/docs/Glossary/Shallow_copy
https://developer.mozilla.org/ja/docs/Glossary/Deep_copy

FormDataオブジェクト
　Formタグで送信する内容と同じ
　multipartでの送信可能

window.history
// [プロパティ]
window.history.length //個数
window.history.current //現在
window.history.next //次
window.history.previous //前
// [メソッド]
window.history.back() //後へ
window.history.forward() //前へ
window.history.go(n) //指定
// [履歴操作]
window.history.pushState(state, null, url) //ヒストリに指定したURLを追加
window.history.replaceState(state, null, url) //最新エントリをURLにを置換え
window.history.state //上記2つでstate指定したオブジェクト情報を受け取る
// [TIPS]
// 履歴を潰す(消去)
window.history.pushState(null, null, null)

// レスポンスヘッダーからContent-Typeを取得
const contentType = response.headers['content-type'];

encodeURI()
decodeURI()

// １つ(idはHTML上で一意)だけが取得できる
const btn = Document.getElementById('button1');
// 複数
const btns = Document.getElementsByTagName('button');
for(const num = 0; num < btns.length; ++num){
  console.log(btns[num].innerHTML);
}
// 最初の１つ目 divタグの中のspanタグの１つ目
const btn2 = Document.querySelector('div span');
// 複数 divタグの中のspanタグのリスト
const btns2 = Document.querySelectorAll('div span');

const ele = Document.getElementById('input1');
ele.disabled = true;

const ele = Document.getElementById('input1');
ele.style.color = 'red';
ele.style.backgroundcolor = 'green';

[CORSセーフリストレスポンスヘッダー]以外を取得するには
Access-Control-Expose-Headersヘッダが必要
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Access-Control-Expose-Headers

//オブジェクト作成
try{
  xmlhttp = new XMLHttpRequest();
}catch(e){
  //IEの場合
  xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}

//通信完了のコールバック
xml.onreadystatechange = function() {
  //0:まだopenメソッドを呼んでいない
  //1:まだsendメソッドを呼んでいない
  //2:通信を開始したがまだ返信がない
  //3:受信の途中
  //4:受信が完了
  if(xmlhttp.readyState == 4){ //
    //通信が完了した場合
    document.getElementById('disp').innerHTML = xmlhttp.responseText;
  }
}

//実行
xmlhttp.open('GET', 'sample.cgi?aaa=bbb');
xmlhttp.send(null);

//this.valueを渡す
<input type="text" onKeyUp="xxxxx(this.value);" >

//onKeyUpイベントを使う
<input type="text" onKeyUp="xxxxx(this.value);" >

const json_str = JSON.stringify(obj)

const obj = JSON.parse(json_str)

const obj = {};
obj.name = 'blue'; // 'name': 'blue'

const p1 = document.getElementById('p1');
p1.classList.add('text_type1');
p1.classList.remove('text_type1');

//filterで削除(詰まる)
const data = {[{'a':'A', 'b':1},{'a':'B', 'b':2},{'a':'C', 'b':3}]};
const deldata = {'a':'B', 'b':1};
//マッチしないものを除外する
data = data.filter(x => x != deldata);

<style>
.selected {
  background-color: #dff1ff;
}
tr:hover{
  background-color: lightgreen;
}
</style>
<script>
var lastselectrow;
function rowselect(currentRow){
  const table1 = document.getElementById('table1');
  if(event.ctrlKey){
    // 選択(追加)
    currentRow.classList.add('selected');
    lastselectrow = currentRow.rowIndex;
    return false;
  }else{
    if(event.shiftKey){
      //クリア
      for(let row of table1.rows){
        row.classList.remove('selected');
      }
      
      //範囲選択
      if(lastselectrow < currentRow.rowIndex){
        for(let i = lastselectrow; i <= currentRow.rowIndex ; i++){
          table1.rows[i].classList.add('selected');
        }
      }else{
        for(let i = currentRow.rowIndex; i <= lastselectrow ; i++){
          table1.rows[i].classList.add('selected');
        }
      }
      
      lastselectrow = currentRow.rowIndex;
      return false;
    }else{
      //キーなし
      //クリア
      for(let row of table1.rows){
        row.classList.remove('selected');
      }
      //選択行のみ
      currentRow.classList.add('selected');
      lastselectrow = currentRow.rowIndex;
      return false;
    }
  }
}
</script>

const params = {};
params.key1 = value1;
params.key2 = value2;

// 親画面 小画面の#retvalに値を受け取りたい要素名を設定
function openChildWindow() {
	const child = window.open('小画面.html','タイトル','width=360,height=320,scrollbars=no');
	child.addEventListener('load', function(){
		child.document.querySelector("#retval").value = param;
	});
	return false; //submitをキャンセル
}

// 小画面
function closeEvent() {
  // 親画面に渡したい値
	const text = document.querySelector('#result').innerHTML;

	//親画面有無判定
	if ( !window.opener || !Object.keys(window.opener).length ) {
		return false;
	}

	//親画面に値を挿入
  const params = document.querySelector('#retval').value;
  if(params.length > 0){
    window.opener.document.getElementById(params).value = text;
  }

	//ウィンドウを閉じる
	window.close();
}

// クリップボードから値を受け取る firefoxは設定が必要
navigator.clipboard.readText()
.then((text) => {
  console.log(text);
});

// クリップボードに値を渡す
navigator.clipboard.writeText(値)

let a, b, rest;
[a, b] = [10, 20]; //a=10, b=20

[a, b, ...rest] = [10, 20, 30, 40, 50]; //a=10, b=20, rest=[30,40,50]

if (value == null) {
  //null or undefined
}

// 指定のページに移動する
const url = 'https://www.google.co.jp/';
window.location.href = url;

// 確認ダイアログを表示
if (confirm('確認しましたか？')) {
  //OKを押した場合
}

const selectedString = document.getSelection();

// ページの先頭に移動(絶対位置:scroll)
window.scroll(0,0);
// 画面の1/4だけ移動(相対位置:scrollBy)
window.scrollBy(0, screen.height/4);

const list = ['a','b','c'];
for (let one of list) console.log(one);

const array = ['a','a','b','c',true,'c',false,true];
const array2 = [...new Set(array)]; // 'a','b','c',true,false

let arrayList = [];
for (const num = 0; num < 10; num++){
  arrayList.push(num);
}

const list = ['123', '12345', '123456', '12', '1234567'];
// 結果は1件でも必ず配列
const over3List = list.filter(one => one.length > 3);
console.dir(over3List); // '12345', '123456', '1234567'

const list = ['123', '12345', '123456', '12', '1234567'];
// 結果は必ず1件(初めにヒットしたものだけ) 該当なしならundefined
const over3One = list.find(one => one.length > 3);
console.dir(over3One); // '12345'

const list = (オブジェクト配列) //"data"で配列
const list2 = list.map(one => ({attr1: false, data: one}));

const items = [
  {'name':'item1', 'price': 1000},
  {'name':'item3', 'price': 3000},
  {'name':'item2', 'price': 2000},
];

items.sort(function(a,b){
  // 降順
  if(a.price > b.price) return -1;
  if(a.price < b.price) return 1;
  return 0;
});

const ele = ...
ele.addEventListener(
  'xxxx', 
  function() {},
  false  // useCapture
);

xxxx
　load:Webページの読み込みが完了した時(リソースを含む)
　DOMContentLoaded:Webページの読み込みが完了した時(リソース含まず)
　click:マウスでクリック時
　mousedown:マウスのボタンを押している時
　mouseup:マウスのボタンを離した時
　mousemove:マウスカーソルを移動した時
　keydown:キーボードのキーを押した時
　keyup:キーボードのキーを離した時
　keypress:キーボードのキーを押している時
　change:フォーム部品の状態が変更された時
　submit:フォームのsubmitボタンを押した時
　scroll:画面がスクロールした時

第３引数:useCapture(Boolean)
　true  キャプチャフェーズ(上から[Window->Document->html]イベント要素に)
　false バブリングフェーズ(イベント要素から上へ)

addEventListenerが関数の引数にイベントオブジェクトを渡します
　引数を定義しなくても、変数"event"で取得できる？！

window.onload() {
  const e1 = document.getElementById('textarea1');
  const e2 = document.getElementById('label1');
  e1.addEventListener('input', () => {
    e2.textContent = textArea.value.length;
  }, false);
}

// log/info/warn/error 表示 色分けの有無の違い
console.error(表示内容);
// assert 第一引数がfalseなら第二引数を表示する
console.assert(false, 表示内容);
// dir 階層的なリストで表示する
console.dir(変数);
// table 表形式で表示する
console.table(変数);
// time timeEndまでの時間を計測 文字列で計測単位を管理(例示では'count')
console.time('count');
....
console.timeEnd('count');

const str = 'aaa bbb ccc ddd eee fff ggg';
const words = str.split(' ');
console.log(words[3]); //ddd

// substrは非推奨(削除対象)
const str = 'abcdefg';
console.log(str.substring(1, 3)); //bc

const aryA = ...
// const aryB = aryA; // これだと同じポインタ
const aryB = aryA.concat(); // concatで引数なしでポインタを別にする

// 入れ子
const objectA = {};
objectA['propertyB'] = 123; // ブラケット演算子での指定
objectA.propertyC = 'C'; // ドット演算子での指定

// キーでループ
const obj = {a:1, b:2, c:3};
Object.keys(obj).forEach(function(key) {
  console.log(`${key} => ${obj[key]}`);
});

// キーの有無判定
const obj = {a:1, b:2, c:3};
// キーの有無(深い)
console.log('a' in obj); // true
// キーの有無(浅い)
console.log(obj.hasOwnProperty('a')); // true

// === 厳密等価演算子(自動変換なし)
// ==  等価演算子(自動変換あり)
const a = '1';
const b = 1;
console.log(a == b); // true
console.log(a === b); // false

substring 文字列の部分取得
split 指定文字で分割

splice 配列からindex指定で削除

// Promiseを待つ
const response = await PromiseFunction();

// Promiseが拒否された場合にcatch句を実行(responseはundefinedになる)
const response = await promisedFunction().catch((err) => { console.error(err); });

出典
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/await

例)
https://www.example.com:80/context1/index.html?param1=1¶m2=A#section1

href = https://www.example.com:80/context1/index.html?param1=1¶m2=A#section1
protocol = https:
host = www.example.com:80
hostname = www.example.com
port = 80
pathname = /context1/index.html
search = ?param1=1¶m2=A
hash = #section1

出典
https://developer.mozilla.org/ja/docs/Web/API/Location

const data = 'a, b, c, d';
function downloadCSV(data) {
  // CSVデータ準備
  const bom  = new Uint8Array([0xef, 0xbb, 0xbf]); // BOM付きにする場合
  const blob = new Blob([bom, data], { type: 'text/csv' });
  const url  = window.URL.createObjectURL(blob);
  // ダウンロード
  const ele = document.createElement('a'); 
  ele.href = url;
  ele.download = 'xxxx.csv';
  ele.click();
  // メモリ解放
  window.URL.revokeObjectURL(url);
}

<input type="file" id="fileEle" multiple accept="image/*" style="display:none" />
<a href="#" id="fileSelect">いくつかのファイルを選択してください。</a>
<div id="fileList"><p>ファイルが選択されていません。</p></div>

// 非標準の属性(Attribute)
const ele = document.getElementBy...
// 設定
ele.setAttribute('hogehoge', 'ageage');
// 取得
console.log(ele.getAttribute('hogehoge'));

inputタグ(HTMLInputElement)#type=file
イベント: change, input
共通属性: required
追加属性: accept, capture, multiple
IDL属性: files, value
メソッド: select()
MDN URL: https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/file

multiple 複数選択可能
accept ファイル形式の指定 拡張子指定(.xxx)、コンテンツタイプ指定(image/xxx)ができる、カンマ区切りで複数指定可能

function dragStartHandle(evt) {
  // ドラッグ元の情報を設定
  evt.setData("text", ev.target.id);
  // 設定値:none/copy/copyLink/copyMove/link/linkMove/move/all
  evt.dataTranser.effectAllowed = 'move';
}

[コンテンツ属性]
その属性が存在しないorその設定値が無効であってもその属性に設定されている値を返す
[IDL属性(JavaScriptプロパティ)]
その属性が無効である場合はエラーになり、その設定値が無効な値の場合は既定値を返す

例）inputタグであるelementの属性typeに値"hogehoge"と設定した場合
const ele = ...
const value1 = ele.getAttribute('type');
const value2 = ele.type;
console.log(`コンテンツ属性:[${value1}] IDL属性:[${value2}]`);
// コンテンツ属性:[hogehoge] IDL属性:[text]

[CDN] - https://cdnjs.com/libraries/Chart.js
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.min.js

[npm install]
# npm install chart.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js" />
<script>
const ctx = document.getElementById('mychart');
const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    datasets: [{
      label: 'Red',
      data: [20, 35, 40, 30, 45, 35, 40],
      borderColor: '#f88',
    }],
  },
  options: { },
});
</script>
<div>
<canvas id="mychart"></canvas>
</div>

[グラフの種類の指定]
line  線グラフ
bar   棒グラフ
pie   円グラフ(パイ)
doughnut 円グラフ(ドーナッツ)
radar レーダーチャート
polarArea 鶏頭図
bubble バブルチャート
scatter 散布図

設定詳細 - 出典:とほほのchart.js入門
https://www.tohoho-web.com/ex/chartjs-params.html

// CSSクラスで制御する方が一般的かも
function toggleViewBox( boxid ) {
  const ele = document.getElementById(boxid);
  if (ele.style.display != 'none') {
    ele.style.display = 'none';
  } else {
    ele.style.display = '';
  }
}

// バッククオートと${}で中身が展開される [ECMAScript 6]から
const alphabet = 'ABCDEFG...';
console.log(`alphabet=${alphabet}`);

-- 残余引数(ES6以降)
function sum(...theArgs) {
  let total = 0;
  for (const arg of theArgs) {
    total += arg;
  }
  return total;
}
-- [arguments]オブジェクト
function sum() {
  let total = 0;
  for (let index = 0; index < arguments.length ; index++) {
    total += arguments[index];
  }
  return total;
}

// イベントを発火させる
const event = new Event('click');
const button = document.getElementById('myButton');
button.dispatchEvent(event);

deferをつけると、JS読み込みで止まらない＆JS実行がDOM読み込み後になる
<script src="xxxx.js" defer ></script>

// マルチバイトではない文字列の場合はatob/btoaでそのままエンコード/デコード
const text = "abcdefg";
// エンコード
const encoded = window.btoa(text);
// デコード
const decoded = window.atob(encoded);

function convValue(param, defaultValue='') {
  if (param == null) {
      // null or undefinedと表示されないための対策
      return defaultValue;
  }
  if (typeof param === 'object'){
      // [object Object]と表示されないための対策
      return defaultValue;
  }
  return param;
}

// ダミーっぽいファイルを作る
const file = new File(['a'], 'DUMMY.bin', '{type: "application/octet-stream"}')

Math.ceil 切り上げ
Math.floor 切り捨て
Math.round 四捨五入
Math.trunc 小数以下削除

const num = '12345';
const value = String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
console.log(value); // '12,345'

const objectA = { a: 1, b: 'B', c: 11 }; 
const objectB = Object.assgin({}, objectA);

function isDiff(pObjectA, pObjectB, pArrayKeys) {
  for (let key of pArrayKeys) {
    if (pObjectA !== pObjectB) {
      return true;
    }
  }
  return false;
}

/**
 * 引数を[ / ]を付けて結合
 * @params 結合したい文字列
 */
function joinTextSlash(...pArgs) {
  const list = pArgs.filter(v => v != null && v !== '');
  return list.join(' / ');
}

/**
 * ファイル名から拡張子を取得
 * @params pFilename ファイル名
 */
function getExtension(pFilename) {
  let ext = '';
  const index = pFilename.lastIndexOf('.');
  if (index !== -1) {
    ext = pFilename.substring(index + 1);
  }
  return ext;
}

// 基本
function 関数名(引数1, 引数2, ...) {}
// デフォルトあり
function 関数名(引数1=デフォルト値1, 引数2=デフォルト値2, ...) {}
// 可変長引数(配列) [ES2015]
function 関数名(...args) {
  for (let i = 0 ; i < args.length ; i++) {
    console.log(`引数${i}=[${args[i]}]`);
  }
}

// 保存
window.localStorage.setItem('キー', 値);
//取得
window.localStorage.getItem('キー');

/**
* 桁数チェック
* @params pItem チェック対象
* @params pCount 桁数 
*/
function isLengthOVer(pItem, pCount) {
  if (pItem != null && pItem !== '' && pItem.length > pCount) {
    return true;
  }
  return false;
} 

// consoleを出さないようにする
window.console = {'log':()=>{},'debug':()=>{}, 'warn':()=>{}, 'info':()=>{}}

[使用するとき]
<script type="module" src="xxxxx.js" ></script>
(xxxxx.js)
import { モジュール名 } from "./モジュール.js";
(モジュール.js)
export function モジュール名() { 処理 }

[使用できるブラウザとバージョン]
iOS Safari 10.1以上（2017年3月リリース）
macOS Safari 10.3以上（2017年3月リリース）
Chrome 61以上（2017年8月リリース）
Edge 16以上（2017年10月リリース）
Firefox 60以上（2018年5月リリース）