JavaScript入門
JavaScript入門講座です。
JavaScriptの基本的な文法、制御構造、文字列、配列、DOM操作など
をわかりやすく解説しています。
Webアプリ開発など、
さまざまなシーンでJavaScriptは使われています。
基本事項
- JavaScriptとは
- JavaScriptコードの組み込み方法
- コメント記述方法・２種類
- データ型について
- undefinedの意味とチェック方法
- オブジェクトについて
- オブジェクトの存在を確認
- 現在のファイル名を取得
- 画像のプリロード
- メソッドチェーン
- console.log の小技
- console.table
- console.dir
- console.time 処理時間
- Promiseの基本的な使い方
- フォーム部品の有効化・無効化
- キーコードを取得する
- おすすめエディタ
- 定型文（コピペ用）
まとめ・一覧
- 演算子一覧
- ビルトイン関数
- Stringオブジェクト（文字列）
- Arrayオブジェクト（配列）
- Mathオブジェクト(数値計算）
- Dateオブジェクト（日付）
- Windowオブジェクト（ウィンドウ）
- Eventオブジェクト（イベント）
- canvas「2dコンテキスト」
- イベントハンドラ
- DOM（Document Object Model）
変数・定数
- var文 変数宣言
- letは再定義するとエラーになる
- varとletどっちを使う？
- varとletの違い（トップレベルでの宣言時）
- constは再定義や再代入するとエラーになる
- constで値を変更してもエラーにならないケース
- 変数や関数の名前として使える文字
- 【注意】変数や関数の名前に-ハイフン
- 変数名や関数名の命名記法３つ
- 変数宣言の巻き上げ
条件分岐
ループ
ジャンプ文
数値
- 数値リテラル（10, 2, 8, 16進数）
- 乱数を取得する
- 数値の桁数をそろえる
- isNaN() 数値かどうか判定
- 奇数・偶数判定
- 割り算で商（整数）と余りを求める
- べき乗（累乗）の計算 pow, **
- 「2進数」⇔「10進数」相互変換
- 「8進数」⇔「10進数」相互変換
- 「16進数」⇔「10進数」相互変換
- 2進数の数値を計算する
- 8進数の数値を計算する
- 16進数の数値を計算する
小数点
- 小数点表示、かつ3桁区切り
- 小数点以下の切り捨て・切り上げ・四捨五入
- 小数点以下を0埋め toFixed()
- 小数点数を任意の桁数で丸める toFixed
- 小数点以下の桁数をチェック
- 数値が小数点を含むか整数かを判定
文字列
- 分割 split()
- split() テキストを改行で分割
- 一部を取得（文字数指定）substr()
- 一部を取得（範囲指定）substring()
- charAt() 1文字を取得する
- +演算子 連結
- 置換 replace()
- 改行をすべて削除する
- 検索 indexOf()
- 前後の空白を削除 trim()
- 大文字・小文字変換
- 文字列の長さ length
- 特定の文字の数をカウントする方法
- プリミティブ型とオブジェクト型を比較
正規表現
- 正規表現を生成する２つの方法
- マッチを確認 search(),test()
- マッチ文字列を取得 match()
- マッチ文字列の詳細 exec()
- match() と exec() の違い
- 「最長一致」と「最短一致」の違い
- 正規表現による数値チェック（10・2・16進数）
日付・時刻
- 日付をフォーマットする
- 時刻をフォーマットする
- n日後、n日前の日付を取得（加算・減算）
- 日付や時間の差を計算する
- 日付や時刻をまとめて指定
- 日付や時刻を個別に指定
- 日付や時刻を個別に取得
- 現在日時や1分後のタイムスタンプを取得
- 日付文字列からタイムスタンプを取得 parse
型変換・型判定
配列
- 配列の特徴
- 配列の作成
- 配列を連番で初期化
- 配列の要素へのアクセス
- 疎な配列
- 配列の長さ length
- 配列の要素の追加と削除
- push, pop, shift, unshift
- 指定要素を削除 splice()
- null、undefined、空文字を削除
- 配列の要素を巡回
- for文で配列をループ
- 配列の要素内容の位置を検索 indexOf()
- 配列の要素内容の有無を検索 includes()
- 多次元配列の作成
- 配列の要素を連結 join()
- 要素の順番を逆にする reverse()
- 要素をソートする sort()
- 要素を日付でソートする
- 複数のキーでソート
- 要素追加 + 新たな配列作成 concat()
- サブ配列（スライス）を返す slice()
- 条件に一致する要素を取り出す filter()
- filterで重複要素を削除・抽出
- filterで空要素を削除
- 配列をシャッフルする
関数
オブジェクト指向
DOM操作
- getElementById()
- IDを複数指定
- 同じid名が複数ある場合（idの重複）
- getElementById()で該当idがない場合の値
- getElementsByTagName()
- getElementsByTagNameで複数タグ指定は可能？
- getElementsByClassName()
- getElementsByName()で複数のname指定は可能？
- 要素を作成 createElement()
- 要素を追加 appendChild()
- 要素を追加 insertBefore()
- 要素を削除 removeChild()
- 要素をまとめて作成・挿入する
- 要素の存在を確認
- 要素の座標・サイズを取得
- innerHTML プロパティ
- textContent プロパティ
- テキストボックスの値を取得・設定
- テキストボックスを選択状態にする
- placeholder（入力ヒント）を設定する
- セレクトボックスの値を取得・設定
- リストボックス（複数選択）の値を取得・設定
- チェックボックスの値を取得・設定
- ラジオボタンの値を取得・設定
- クラスを追加・削除する
- z-indexを指定する
- イベントハンドラの設定方法
- loadイベントとwindow.onload=function()
- addEventListenerで引数を渡す
- タッチデバイスのイベント
- クリックイベントを発火させる
- window.onloadに注意
タイマー
- setInterval()とsetTimeout()の違い
- setTimeoutやsetIntervalで関数に引数を渡す
- タイマーの多重起動を防止する
- タイマーで経過秒数を取得する
- ループ中にスリープを入れる
- setIntervalの精度（正確性）を検証
音声・動画の再生
API
- イベントやオブジェクト
- 動作しない時の確認事項
- 画像を D & D
- テキストを D & D
- 準備編: Canvas を配置
- 矩形を描画
- 直線を描画
- 多角形を描画
- 円・円弧を描画
- テキストを描画
- 図形に影をつける
- グラデーションを適用
- ベジェ曲線を描画
- 画像を読み込む
- 画像のクリッピング
- 画像を繰り返し表示
- rotate() 回転
- scale() 拡大・縮小
用語
- 用語
- シングルクォートとダブルクォート
- ==と===の違い
- nullとundefinedの違い
- 「i++」と「++i」の違い
- 配列とオブジェクトの違い
- 連想配列とオブジェクトの違い
- substring()とslice()の違い
- window と document の違い