const 定数名; //変更できない
let 変数名; //変更できる

document.querySlector('要素名');
document.querySlectorAll('要素名'); //要素を全て取得します。配列で返ってきます
document.getElemntById('id名');
document.getElementsByClassName('クラス名');

ちなみに、要素を作る場合
document.createElement('要素名');
要素.cloneNode(true); //複製する場合はtrue

親要素.childNodes //親要素の子ノードを取得
親要素.children //親要素の子要素を取得
親要素.firstChild //親要素の最初の子ノードを取得
親要素.lastChild //親要素の最後の子ノードを取得
親要素.firstElementChild //親要素の最初の子要素を取得
親要素.firstElementChild //親要素の最初の子要素を取得
小要素.parentNode //小要素の親ノードを取得
要素.previousSibling //要素の1つ前の兄弟ノードを取得
要素.nextSibling //要素の1つ後の兄弟ノードを取得
要素.previousElementSibling //要素の1つ前の兄弟要素を取得
要素.nextElementSibling //要素の1つ後の兄弟要素を取得

要素.appendChild(子要素);　//要素に小要素を追加します
要素.insertBefore(子要素, 指定要素); //要素の指定要素の前に子要素をいれます
要素.removeChild(子要素); //要素の子要素を削除します

要素.textContent = 'text'; //要素の中身がtextになります
要素.style.color = 'red'; //要素の色がredになります
要素.classList.add('クラス名'); //要素にクラス名をつけます
要素.classList.remove('クラス名'); //要素のクラス名を除きます
要素.classList.contain('クラス名'); //要素にクラス名が付いているか判定します
要素.classList.toggle('クラス名'); //クラス名が付いていれば外し、付いてなければつけます

function 関数名(引数){
　処理;
  return 返り値;
}
const 関数名 = function(引数){
　処理;
  return 返り値;
}
const 関数名 = (引数) => {} もしくは 返り値のみ;

配列.unshift(); //配列の先頭に加わる
配列.shift(); //配列の先頭から削除
配列.push(); //配列の最後に加わる
配列.pop(); //配列の最後から削除
配列.splice(x, y, z); //配列のxからy個の要素を除いてzを加える

配列.forEach((配列の要素) => {
　処理;
});
それぞれの要素に対して処理が行えます。
配列の要素にindexを入れると何本目の要素か認識させることもできます。

const 新しい配列 = 配列.map((配列の要素) => {
　処理;
));
それぞれの要素に対して処理して新しい配列を作ります。
配列の要素にindexを入れると何本目の要素か認識させることもできます。
mapではなくfilterにすると処理に合うものだけを配列で返します。

配列に配列を加える場合、...をつけましょう
const x = [4, 5, 6];
const y = [1, 2, 3, ...x];
...がないと配列の中に配列ができます。
さらに、変数に配列を渡す時に...をつけて配列として渡すことで元の配列の順番を崩さずに配列を処理できます。
値そのものが代入される、という感じです。

変数の入れ替え
let x = 3;
let y = 4;
[x, y] = [y, x];
これだけでxとyの値を入れ替えることができます。

値の割り振り
const array = [1, 2, 3, 4];
const [x, y, ...other] = array;
これでx=1, y=2, other=[3,4]が入ります


const String = 配列.join('/'); //配列の要素が/で繋がり文字になります
const String = 'a/b/c';
const [A, B, C] = String.split('/'); //A=a, B=b, C=cとなります。

Math.floor(引数); //小数点以下の切り下げ
Math.ceil(引数); //小数点以下の切り上げ
Math.round(引数); //小数点以下を四捨五入
Math.random(); //0~0.99までのランダムな数字を生成
toFixed(数);　//指定した数まで小数点以下を表示

const date = new Date(); //引数に年,月,日にちを渡すとその日の情報が取れます。
例えばnew Date(2020, 5, 0); // 月は０から日にちは１から始まるのでこの場合、2020年の5月末日を取得します。
date.getFullYear(); //現在の年を取得
date.getMonths(); //現在の月を取得
date.getDate(); //現在の日にちを取得
date.getDay(); //現在の曜日を0から6の数字で取得
date.getHours(); //現在の時間を取得
date.getMinutes(); //現在の分を取得
date.getSeconds(); //現在の秒を取得
date.getMilliseconds(); //現在のミリ秒を取得

setInterval(() => {
　処理;
}, 1000); //1000ミリ秒後に処理を行います。処理が終わらなくても1000ミリ秒後に処理を行います。
setTimeout(() => {
　処理;
}, 1000); //1000ミリ秒後に処理を1回だけ行います。繰り返す時は処理が終わった時間から1000ミリ秒後です。

//タイマーを作る場合
let startTime = Date.now();
function Timer(){
		const time = new Date(Date.now() - startTime);
		const m = String(time.getMinutes()).padStart(2, '0');
		const s = String(time.getSeconds()).padStart(2, '0');
		const ms = String(time.getMilliseconds()).padStart(3, '0');
		timer.textContent = `${m}:${s}.${ms}`;
		TimeId = setTimeout(() => {
			Timer();
		}, 10);
}
//時間を止める場合
clearTimeout(TimeId);

//arrと言う配列をシャッフルする場合
function shuffle(arr){
		for(let i = arr.length - 1; i > 0; i--){
			const n = Math.floor(Math.random() * (i + 1));
			[arr[i], arr[n]] = [arr[n], arr[i]];
		}
		return arr;
}

parseInt('1', 10); //1という文字を10進数の文字に変換
数字に変換できない場合はNaNを返します

文字列.UpperCase(); //文字列を大文字にします
文字列.LowerCase(); //文字列を小文字にします

alart();
confirm();

try{
　処理;
}catch(e){
 処理でエラーが出てきた場合の処理；//console.log(e);とするとエラーが見れます。処理も最後まで行きます。
}

const Object = {
　x: 値,
　y: 値,
　z: 値,
}
配列は配列名[番号]でその番目の要素が抽出できました。
オブジェクトの場合はオブジェクト名.キー名で取りだすことができます。

オブジェクトのキー名だけ取得したい、という時もあります。
const key = Object.key(オブジェクト名);
これでkeyにキーだけが配列として入ります。

オブジェクトは配列のように使うこともできます。
const Object1 = {
    z: 300,
    zz: 400,
  };

const Object2 = {
    x: 100, 
    y: 200,
    ...Object1,
  };
これでObject1がObject2に入りました。さらに配列のように取り出すこともできます。

const {x, r, ...others} = Object2;
これでx=100, y=200, others={z: 300, zz: 400}となります。

if(条件){
  条件がtrueの場合の処理
}else{
　falseの場合の処理
}
これを下記のように書くこともできます。
条件 ? 条件がtrueの場合の処理 : falseの場合の処理 ;

switch(変数){
  case 変数がここに入るものと同じ場合: ここの処理が実行;
  break ;
  case 変数がここに入るものと同じ場合: ここの処理が実行;
  break ;
  default それ以外の場合: ここが実行;
　break;
}

for(let i = 0; i < number; i++){
  iがnumberよりも小さい場合ここの処理を実行する;
　ifと組み合わせてcontinueだとスキップ、breakだと終了させることもできる
}

while(条件){
　条件がtrueの間、ここの処理を実行する;
}
これを逆にして書くこともできる
do{
　条件がtrueの間、ここの処理を実行する;　//ただ１回目の処理は条件関係なく実行する
}while(条件);

要素.addEventListener('click', () => {
　処理;
});
click以外にも
focus(選択された時)
blur(選択が外れた時)
input(内容が変更した時)
change(変更が確定した時)
submit(formを送信する時)
()にeを渡して{}にe.preventDefaultとするとページのリロードを停止できます
さらに、親要素にaddEventListenerをつけた場合,
親要素はe.currentTargent, 子要素はe.targetで取得できます。

//必要な数だけElementを作る場合
for(let i = 0; i < Number.length; i++){
	const li = document.createElement('li');
	li.textContent = Number[i];
	board.appendChild(li);
}

//クラスの基本形
class クラス名 {
    constructor(引数) {
      this.text = 引数;
    }
    関数名(){
      処理;
    }
}
const クラス名(引数);

//継承
class 子クラス extends 親クラス{
    constructor(引数,引数) {
      super(親クラスのプロパティ) = 引数;
　　　 this.プロパティ = 引数;
    }
}
子クラスを呼び出せば親クラスのメソッドも使えます。

<head>
<script src="{{ asset('js/app.js') }}"></script>
</head>

if(document.URL.match(ルート指定)){
    //ここにJavascriptを記載
  }