概要

ざっと勉強したけどメソッドとかオプションが多く覚えれん…ということでざっくりまとめることにしました。
自分が多少なりに使うものをメモする程度なので網羅しているわけではありません。
PHPから勉強を始めた人間なので、データ型などの基礎もついでにメモします。
if文やfor文といった制御構文は省略します。

基礎

データ型

総称法	データ型	意味
基本型	string	文字列の型。「'」または「"」で囲むまた、「`」で囲むと「${}」内の変数を文字列として出力できる
	number	整数と浮動小数を扱う型
	boolean	「true」または「false」の型
参照型	objext	オブジェクトを参照する
	array	配列を参照する
	function	関数を参照する

特殊な値

値	意味	確認方法
NaN	数値ではないことを表す値	isNaN()
null	何も参照していない状態リテラルのため変数に直接入力することができる	isNull()
undefined	変数が宣言されているが初期化していない状態	「typeof === 'undefined'」で判定

const、let、varの違い

	const	let	var
再定義	☓	○	○
再宣言	☓	☓	○
スコープ	ブロック	ブロック	ローカル

各種メソッド

Arrayオブジェクト

変数名.メソッド()で記述。

メソッド名	機能
join('記号')	指定のの区切り文字で1つの文字列に連結する
toString()	「,」で1つの文字列に連結する
pop()	配列の最後の要素を削除
push(a1,a2...)	配列の最後に要素を追加
shift	配列の先頭の要素を削除
unshit(a1,a2...)	配列の先頭に要素を追加
sort()	配列の中身を昇順に並び替え
reverce()	配列の中身を降順に並び替え
slice(m,n)	m番目～n-1番目の要素を取り出して配列で返す
indexOf()	配列内で引数の値が見つかった位置を返す
includes()	配列内で引数の値が含まれていればtrueを返す
entries()	すべてのキーと値を返す
keys()	すべてのキーを返す
values()	すべての値を返す

Stringオブジェクト

変数名.メソッド()で記述。

メソッド名	機能
charAt(n)	n番目の文字を取得
charCodeAt(n)	n番目の文字の文字コードを取得
concat(s1,s2...)	指定の文字列を結合
splits(s[,n])	指定の値（s）を区切り文字として分割して配列にで返す
indexOf(s[,n])	指定の文字列（s）の位置を取得。nはオプション引数で開始位置
slice(m[,n])	m～n-1番目までの文字を取得：nはオプション引数で指定がなければ末尾までを取得する
substring(m[,n])	m～n-1番目までの文字を取得：nはオプション引数で指定がなければ末尾までを取得する
substr(m,[,len])	m番目の文字からlen数分の文字列を取得：nはオプション引数で指定がなければ末尾までを取得する
toLowerCase()	小文字に変換
toUpperCase()	大文字に変換
replace(s,rep)	正規表現sに一致した文字をrepで置き換える
macth(s)	正規表現sと一致した最初の文字列を取得

※ slice(m,n)とsubstring(m,n)の違い
●引数の大小
start>endとなった場合に判定が変わります。
・slice()：空の文字列が返される
・substring()：startとendが交換されたものとして実行される

●引数が0以下の場合
引数に0未満の数値が渡された場合に処理が変わります。
・slice()：負の数は0として扱われる => イメージ：(1, -3) → (1, 0) → (0, 1)
・substring()：0として扱われる

Numberオブジェクト

変数名.メソッド()で記述

メソッド名	機能
toFixed()	絶対値を求める
toPrecision()	引数の値を下回らない最小値の整数を求める
toString()	引数の値を超えない最大の整数を求める
round()	少数第1を四捨五入した整数を求める
max()	最大値を求める
min()	最小値を求める
random()	乱数を求める

Dateオブジェクト

Dateオブジェクトを宣言してから、変数名.メソッド()で記述

メソッド名	機能
getFullYear()	年の取得：西暦4桁
getYear()	年の取得：西暦2桁（非推奨）
getMonth()	月の取得：0～11
getDate()	日の取得：1～31
getDay()	曜日の取得：0（日曜）～6（土曜）
gethours()	時間の取得：0～23
getMinuts()	分の取得：0～59
getSeconds()	秒の取得：0～59

Mathオブジェクト

Math.メソッド()で記述

メソッド名	機能
abs()	絶対値を求める
ceil()	引数の値を下回らない最小値の整数を求める
floor()	引数の値を超えない最大の整数を求める
round()	少数第1を四捨五入した整数を求める
max()	最大値を求める
min()	最小値を求める
random()	乱数を求める

DOM操作

ノードの取得（Documetオブジェクト）

Document.メソッド()で記述

メソッド名	機能
getElementById('id')	指定のidを持つ要素を返す
getElementByTagName('tag')	指定のタグ名を持つ要素を返す
getElementByName('mame')	指定のname属性要素を配列で返す
getElemetnsByClass('class')	指定のクラスを持つ要素を返す
querySelector('selector')	指定のセレクタと一致する要素を返す
querySelectorAll('selector')	指定のセレクタと一致する要素を配列で返す

HTMLタグの操作

変数名.メソッド()で記述

メソッド名	機能
createElement()	タグの新規作成
appendChild()	タグをDOMツリーに追加
removeChild()	DOMツリーからタグを削除
replaceChild()	DOMツリーのタグを変更

HTML（要素・属性・値）の操作

メソッド名	機能
textContent	表示の文字列を変更：タグは無効
innnerHTML	表示の文字列を変更：タグは有効
属性名	タグの属性を変更
style.属性名	タグに適用されているスタイルを変更

各種イベント

"メソッド=属性名"（HTMLタグ内）または、属性名.onメソッド（scriptタグ内）で記述
また、addEventListener()の引数でも同様のイベント処理を記述できる

分類	イベント名	発火タイミング
読み込み	load	Webページの読込みが完了した時
読み込み	unload	Webページに移動した時
マウス	click	クリック時
	dbclick	ダブルクリック時
	mousedown	マウスを押したタイミング
	mouseup	マウスを押してから離したタイミング
	mouseover	マウスポインタが重なったタイミング
	mouseout	マウスポインタが離れたタイミング
フォーム	submit	submitを押した時
	reset	restを押した時
	change	対象の値が変化したタイミング
フォーカス	focus	対象にフォーカスが移動した時
フォーカス	blur	対象がフォーカスから離れた時
キーボード	input	文字が入力された時

参考

[jsSTUDIO]
(http://js.studio-kingdom.com/)
[JavaScriptリファレンス]
(https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference)
[Node]
(https://developer.mozilla.org/ja/docs/Web/API/Node)
[JavaScript/DOM]
(https://phpjavascriptroom.com/?t=js)