概要
ざっと勉強したけどメソッドとかオプションが多く覚えれん…ということでざっくりまとめることにしました。
自分が多少なりに使うものをメモする程度なので網羅しているわけではありません。
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)