JavaScriptの使い方
基本事項
- コメントを入れ子にする場合に起きる不具合
- コメントの書き方
- scriptタグの位置は、body閉じタグの前がおすすめ
- 変数などの識別子にハイフン(-)は使用できない
- 予約語
- 予約語を変数として使うとどうなる?
- キャメルケース、パスカル、スネークケース記法
- varとletの違い、注意点
- エスケープ シーケンスの一覧
- 波括弧(中括弧){}で囲まれたブロックの注意点
- 基本型(プリミティブ型)と参照型(オブジェクト型)
- 変数・関数などの命名規則
- JSファイルの非同期ロード、asyncとdeferの違い
- async属性とdefer属性の違い
- 暗黙的に「false」と判定される値 null、undefined等
演算子
文字列
- 文字列から1文字だけ取得 charAt()
- 文字列の長さを取得(サロゲートペア対策を含む)
- 文字列を置換(変換)する replace()
- 文字列を1文字ずつ分割して配列に格納
- 変数展開できる! テンプレート文字列
- 大文字、小文字を変換
数値
- 数値の桁数を揃える(0埋め)
- 数値を3桁区切りにする toLocaleString()
- 小数点以下の桁数を取得する関数
- 小数点以下の切り捨てはtrunc()がおすすめ
- 小数点以下の部分だけを取得する関数
- 平方根を求める方法(2通り)
- 進数変換(10進数 ⇔ 2進数、8進数、16進数)
- 小数点以下の切り捨て floor() は負数に注意
- 小数点以下の桁数を指定する toFixed()
- ES2015仕様のNumber.isNaN() は数値判定に使えない
- べき乗を計算する方法(2通り)
- isFinite() と Number.isFinite() の違い
- 数値判定で一番使えるのはisNaN()?isFinite()?
- 整数の乱数(ランダムな整数)を作成する
if文
- if文でのand(&&)、or(||)、not(!)の使い方
- if文で数値かどうか判定する isNaN() の注意点
- if文を省略してコードをシンプルにする
- if文の入れ子(ネスト)の注意点
- if文でnullかどうかを判定する方法
- if文を1行で書いてみる
- if 文のセミコロンをどこにつけるか迷っている方へ
- if文とswitch文、「使い分け」の基準は?
- if文で「undefined」かどうかを判定する方法
- if文の書き方
繰り返し(ループ)
配列
- 配列の初期化 まとめ
- 2次元配列の作成と初期化
- 配列の要素へのアクセス方法
- 配列に追加する前に重複チェックを行う
- 配列に連想配列(オブジェクト)を追加してみる
- 配列の途中に値を追加する splice() メソッド
- 配列の最初(先頭)に追加する unshift() メソッド
- 配列作成時、リテラルとコンストラクタどっち?
- 配列の要素を繋いで(カンマを削除して)文字列作成
- 配列で、重複した要素を削除する filter()
- 配列から特定条件の要素を削除する filter()
- ループ(for 文)を使って配列の要素を削除する
- indexOf() を使って配列の要素を削除する
- 配列の要素を削除する時に、要素間を詰める方法
- 配列の最後(末尾)の要素を削除する pop()
- 配列の特定要素の削除に some() は使わない方がいい
- 配列のインデックスを指定して削除する splice()
- 配列を「0」で初期化する
- 配列を初期化して空にする
- 配列の初期化にpushを使って追加してみる
- 配列を「文字列」で初期化する
- 配列のループ中でbreakが使える場合、使えない場合
- for 文を使った配列のループ
- forEach() を使った配列のループ
- 配列のループ中に key(index)を取得
- map() を使った配列のループ
- 配列を逆順にループする方法
- while 文を使った配列のループ
- (基本)配列を作成する
- 配列とオブジェクトの違い、使い分けの目安
- 2次元配列のソート
- 配列のソート 同じ値の場合は入れ替わる?
- 配列のソート 数値を昇順・降順にする
- オブジェクトの配列をソートする
- 配列をランダムソート(シャッフル)する
- 配列のソート 文字列を並び替える
- 疎な配列の注意点
DOM操作
- getElementsByClassName()の使い方
- get○○系のメソッドとquery○○系のメソッド
- 【注意】getAttribueのvalue値は初期値を返す
- getElementsByClassNameでクラス複数指定時の注意点
- getElementsByName()の使い方
- getElementsByTagName()の使い方
- HTMLCollectionとNodeListの違い
- querySelector()とquerySelectorAll()の違い
- querySelectorAll()の使い方
フォーム操作
- 単一選択のセレクトボックスの選択値を取得 value
- textContentとinnerHTMLの違い
- innerHTMLに設定したscript要素は無効。代替方法は?
- changeイベントの発生タイミング
- チェックボックスの選択状態を取得する checked
- textarea(テキストエリア) の値を取得する value
- 複数選択できるセレクトボックス選択状態と値を取得
- ラジオボタンの選択状態を取得する checked
- ファイル選択ダイアログで選んだテキスト内容を表示
応用・実践編
jQuery
- 画像ホバー時に文字(キャプション)を表示する
- jQeuryを導入するメリットとデメリット
- jQeurytoggle()の状態を判定する(表示・非表示)
- JavaScriptとjQueryの違いと学ぶ順番