JavaScript入門
JavaScript入門講座です。
JavaScriptの基本的な文法、制御構造、文字列、配列、DOM操作など
をわかりやすく解説しています。
Webアプリ開発など、
さまざまなシーンでJavaScriptは使われています。
基本事項
- JavaScriptとは
- JavaScriptコードの組み込み方法
- コメント記述方法・２種類
- オブジェクトについて
- オブジェクトの存在を確認
- 現在のファイル名を取得
- 画像のプリロード
- メソッドチェーン
- console.log の小技
- console.table
- console.dir
- Promiseの基本的な使い方
- フォーム部品の有効化・無効化
- キーコードを取得する
- おすすめエディタ
まとめ・一覧
変数・定数
- letは再定義するとエラーになる
- varとletどっちを使う？
- varとletの違い（トップレベルでの宣言時）
- constは再定義や再代入するとエラーになる
- constで値を変更してもエラーにならないケース
- 変数や関数の名前として使える文字
- 【注意】変数や関数の名前に-ハイフン
条件分岐
ループ
ジャンプ文
数値
小数点
文字列
- 分割 split()
- split() テキストを改行で分割
- 一部を取得（文字数指定）substr()
- +演算子 連結
- 置換 replace()
- 改行をすべて削除する
- 検索 indexOf()
- 前後の空白を削除 trim()
- 大文字・小文字変換
- 文字列の長さ length
- 特定の文字の数をカウントする方法
正規表現
- 正規表現を生成する２つの方法
- マッチを確認 search(),test()
- マッチ文字列を取得 match()
- マッチ文字列の詳細 exec()
- match() と exec() の違い
- 「最長一致」と「最短一致」の違い
- 正規表現による数値チェック（10・2・16進数）
日付・時刻
- 日付をフォーマットする
- 時刻をフォーマットする
- n日後、n日前の日付を取得（加算・減算）
- 日付や時間の差を計算する
- 日付や時刻を個別に指定
- 日付や時刻を個別に取得
- 現在日時や1分後のタイムスタンプを取得
- 日付文字列からタイムスタンプを取得 parse
型変換・型判定
配列
- 配列の作成
- 配列を連番で初期化
- 配列の要素へのアクセス
- 疎な配列
- 配列の長さ length
- 指定要素を削除 splice()
- null、undefined、空文字を削除
- for文で配列をループ
- 配列の要素内容の位置を検索 indexOf()
- 配列の要素内容の有無を検索 includes()
- 多次元配列の作成
- 要素を日付でソートする
- 複数のキーでソート
- filterで重複要素を削除・抽出
- filterで空要素を削除
関数
オブジェクト指向
DOM操作
- IDを複数指定
- 同じid名が複数ある場合（idの重複）
- getElementById()で該当idがない場合の値
- getElementsByTagName()
- getElementsByTagNameで複数タグ指定は可能？
- getElementsByClassName()
- getElementsByName()で複数のname指定は可能？
- 要素を作成 createElement()
- 要素を追加 appendChild()
- 要素を削除 removeChild()
- 要素の存在を確認
- innerHTML プロパティ
- textContent プロパティ
- テキストボックスの値を取得・設定
- テキストボックスを選択状態にする
- placeholder（入力ヒント）を設定する
- セレクトボックスの値を取得・設定
- リストボックス（複数選択）の値を取得・設定
- チェックボックスの値を取得・設定
- ラジオボタンの値を取得・設定
- z-indexを指定する
- イベントハンドラの設定方法
- loadイベントとwindow.onload=function()
- addEventListenerで引数を渡す
- タッチデバイスのイベント
- クリックイベントを発火させる
タイマー
音声・動画の再生
API
- 動作しない時の確認事項
- 準備編: Canvas を配置
- 矩形を描画
- 直線を描画
- 多角形を描画
- 円・円弧を描画
- 図形に影をつける
- ベジェ曲線を描画
- 画像を読み込む
- 画像のクリッピング
- 画像を繰り返し表示
- rotate() 回転
- scale() 拡大・縮小