タスクを表示

JavaScript 言語

• はじめに
  • JavaScript入門
  • マニュアルと仕様
  • コードエディター
  • 開発者コンソール
• JavaScriptの基礎
  • Hello, world!
    • アラートを表示
    • 外部スクリプトでアラートを表示
  • コード構造
  • モダンモード、"use strict"
  • 変数
    • 変数を使う
    • 適切な名前を付ける
    • 大文字の const?
  • データ型
    • 文字列の引用符
  • インタラクション: alert, prompt, confirm
    • シンプルなページ
  • 型変換
  • 基本的な演算子、算術
    • 後置形式と前置形式
    • 代入の結果
    • 型変換
    • 足し算を修正
  • 比較
    • 比較
  • 条件分岐: if, '?'
    • if (ゼロの文字列)
    • JavaScriptの名前
    • 符号を表示
    • 'if' を '?' に書き換え
    • 'if..else' を '?' に書き換え
  • 論理演算子
    • OR の結果は?
    • OR で繋いだアラートの結果は?
    • AND の結果は?
    • AND で繋いだアラートの結果は?
    • OR AND OR の結果
    • 範囲内のチェック
    • 範囲外のチェック
    • "if" に関する質問
    • ログインの確認
  • nullish coalescing 演算子 '??'
  • ループ: while と for
    • 最後のループの値
    • while ループで表示される値は?
    • "for" ループで表示される値は?
    • ループ内の偶数を出力
    • "for" を "while" で置き換え
    • 入力が正しくなるまで繰り返す
    • 素数を出力
  • "switch" 文
    • "switch" を "if" に書き換え
    • "if" を "switch" に書き換え
  • 関数
    • "else" は必須?
    • '?' または '||' を使って関数を書き換え
    • 関数 min(a, b)
    • 関数 pow(x, n)
  • 関数式
  • アロー関数、基本
    • アロー関数で書き換え
  • JavaScript の特殊性
• コード品質
  • ブラウザでのデバッグ
  • コーディングスタイル
    • 悪いスタイル
  • コメント
  • 忍者コード
  • Mocha を使った自動テスト
    • テストの何が問題?
  • ポリフィルとトランスパイラ
• オブジェクト: 基本
  • オブジェクト
    • こんにちは、オブジェクト
    • 空かどうかを確認
    • オブジェクトのプロパティを合計
    • 数値プロパティの値を 2 倍にする
  • オブジェクトの参照とコピー
  • ガベージコレクション
  • オブジェクトメソッド、"this"
    • オブジェクトリテラルで "this" を使う
    • 電卓を作成
    • チェイニング
  • コンストラクタ、演算子 "new"
    • 2 つの関数 – 1 つのオブジェクト
    • 新しい電卓を作成
    • 新しいアキュムレータを作成
  • オプショナルチェイニング '?'
  • Symbol 型
  • オブジェクトからプリミティブへの変換
• データ型
  • プリミティブのメソッド
    • 文字列プロパティを追加できますか?
  • 数値
    • 訪問者からの数値を合計
    • なぜ 6.35.toFixed(1) == 6.3?
    • 入力が数値になるまで繰り返す
    • 時々無限ループ
    • 最小値から最大値までの乱数
    • 最小値から最大値までの乱整数
  • 文字列
    • 最初の文字を大文字にする
    • スパムのチェック
    • テキストを切り詰める
    • お金を抽出
  • 配列
    • 配列はコピーされますか?
    • 配列操作。
    • 配列コンテキストでの呼び出し
    • 入力された数を合計
    • 最大の部分配列
  • 配列メソッド
    • border-left-width を borderLeftWidth に変換
    • 範囲でフィルタリング
    • 範囲内フィルタリング
    • 降順でソート
    • 配列のコピーとソート
    • 拡張可能な電卓を作成
    • 名前へのマッピング
    • オブジェクトへのマッピング
    • 年齢でユーザーをソート
    • 配列をシャッフル
    • 平均年齢を取得
    • 一意の配列メンバーをフィルタリング
    • 配列からキー付きオブジェクトを作成
  • イテラブル
  • Map と Set
    • 一意の配列メンバーをフィルタリング
    • アナグラムをフィルタリング
    • イテラブルキー
  • WeakMap と WeakSet
    • 「未読」フラグを保存
    • 読んだ日付を保存
  • Object.keys, values, entries
    • プロパティを合計
    • プロパティをカウント
  • 分割代入
    • 分割代入
    • 最大給与
  • 日付と時間
    • 日付を作成
    • 曜日を表示
    • ヨーロッパの曜日
    • 何日前の日付は何日でしたか?
    • 月末はいつ?
    • 今日までに何秒経過しましたか?
    • 明日まであと何秒?
    • 相対日付をフォーマット
  • JSON メソッド、toJSON
    • オブジェクトを JSON に変換して元に戻す
    • 後方参照を除外
• 関数を使った高度な操作
  • 再帰とスタック
    • 指定された数までのすべての数を合計
    • 階乗を計算
    • フィボナッチ数
    • 単方向連結リストを出力
    • 単方向連結リストを逆順で出力
  • 残余引数とスプレッド構文
  • 変数のスコープ、クロージャ
    • 関数は最新の変更を取得しますか?
    • どの変数が利用可能ですか?
    • カウンターは独立していますか?
    • カウンターオブジェクト
    • if 内の関数
    • クロージャを使った合計
    • 変数は可視ですか?
    • 関数を通したフィルタリング
    • フィールドでソート
    • 関数の集団
  • 古い "var"
  • グローバルオブジェクト
  • 関数オブジェクト、NFE
    • カウンターのセットとデクリメント
    • 任意の数の括弧を使った合計
  • "new Function" 構文
  • スケジューリング: setTimeout と setInterval
    • 毎秒出力
    • setTimeout は何を表示しますか?
  • デコレーターと転送、call/apply
    • スパイデコレーター
    • 遅延デコレーター
    • デバウンスデコレーター
    • スロットルデコレーター
  • 関数バインディング
    • メソッドとしてのバインドされた関数
    • 2 番目のバインド
    • バインド後の関数プロパティ
    • "this" を失う関数を修正
    • ログインのパーシャルアプリケーション
  • アロー関数再考
• オブジェクトプロパティの構成
  • プロパティフラグとディスクリプタ
  • プロパティゲッターとセッター
• プロトタイプ、継承
  • プロトタイプ継承
    • プロトタイプの操作
    • 検索アルゴリズム
    • どこに書き込むのですか?
    • なぜ両方のハムスターは満腹なのですか?
  • F.prototype
    • "prototype" の変更
    • 同じコンストラクタでオブジェクトを作成
  • ネイティブプロトタイプ
    • 関数にメソッド "f.defer(ms)" を追加
    • 装飾 "defer()" を関数に追加
  • プロトタイプメソッド、__proto__ なしのオブジェクト
    • toString を辞書に追加
    • 呼び出しの違い
• クラス
  • クラスの基本構文
    • クラスに書き換え
  • クラスの継承
    • インスタンスの作成エラー
    • 拡張時計
  • 静的プロパティと静的メソッド
    • クラスは Object を継承しますか?
  • プライベートおよび保護されたプロパティとメソッド
  • 組み込みクラスの拡張
  • クラスのチェック: "instanceof"
    • 奇妙な instanceof
  • ミックスイン
• エラー処理
  • エラー処理、"try...catch"
    • 最後に、それともコードだけ?
  • カスタムエラー、Error の拡張
    • SyntaxError から継承
• Promise, async/await
  • はじめに: コールバック
  • Promise
    • Promise を再解決しますか?
    • Promise による遅延
    • Promise を使ったアニメーション円
  • Promise のチェイニング
    • Promise: then 対 catch
  • Promise でのエラー処理
    • setTimeout のエラー
  • Promise API
  • プロミシフィケーション
  • マイクロタスク
  • Async/await
    • async/await を使って書き換え
    • async/await で "rethrow" を書き換え
    • 非同期から非同期を呼び出す
• ジェネレーター、高度な反復処理
  • ジェネレーター
    • 擬似乱数ジェネレーター
  • 非同期反復処理とジェネレーター
• モジュール
  • モジュール、はじめに
  • エクスポートとインポート
  • 動的インポート
• その他
  • Proxy と Reflect
    • 存在しないプロパティの読み取りエラー
    • 配列[-1] にアクセスする
    • オブザーバブル
  • Eval: コード文字列を実行
    • Eval 電卓
  • カリー化
  • 参照型
    • 構文チェック
    • "this" の値を説明
  • BigInt
  • Unicode、文字列の内部
  • WeakRef と FinalizationRegistry

ブラウザ: ドキュメント、イベント、インターフェース

• ドキュメント
  • ブラウザ環境、仕様
  • DOM ツリー
  • DOM の移動
    • DOM の子要素
    • 兄弟要素に関する質問
    • すべての対角線セルを選択
  • 検索: getElement*, querySelector*
    • 要素の検索
  • ノードプロパティ: タイプ、タグ、コンテンツ
    • 子孫をカウント
    • nodeType には何がありますか?
    • コメント内のタグ
    • 階層内のどこに "document" がありますか?
  • 属性とプロパティ
    • 属性を取得
    • 外部リンクをオレンジ色にする
  • ドキュメントの変更
    • createTextNode vs innerHTML vs textContent
    • 要素をクリア
    • なぜ "aaa" が残るのですか?
    • リストを作成
    • オブジェクトからツリーを作成
    • ツリーの子孫を表示
    • カレンダーを作成
    • setInterval を使用した色付きの時計
    • リストに HTML を挿入
    • テーブルをソート
  • スタイルとクラス
    • 通知を作成
  • 要素のサイズとスクロール
    • 下からのスクロールは何ですか?
    • スクロールバーの幅は?
    • ボールをフィールド中央に配置
    • 違い: CSS 幅 vs clientWidth
  • ウィンドウサイズとスクロール
  • 座標
    • フィールドのウィンドウ座標を見つける
    • 要素の近くにメモを表示
    • 要素の近くにメモを表示 (絶対位置)
    • メモを内部に配置 (絶対位置)
• イベントの概要
  • ブラウザイベントの概要
    • クリックで非表示
    • 自身を非表示
    • どのハンドラーが実行されますか?
    • ボールをフィールド全体に移動
    • スライドメニューを作成
    • 閉じるボタンを追加
    • カルーセル
  • バブリングとキャプチャリング
  • イベント委譲
    • 委譲でメッセージを非表示
    • ツリーメニュー
    • ソート可能なテーブル
    • ツールチップの動作
  • ブラウザのデフォルトアクション
    • なぜ "return false" が機能しないのですか?
    • 要素内のリンクをキャッチ
    • 画像ギャラリー
  • カスタムイベントのディスパッチ
• UI イベント
  • マウスイベント
    • 選択可能なリスト
  • マウスの移動: mouseover/out、mouseenter/leave
    • 改善されたツールチップの動作
    • "スマート" ツールチップ
  • マウスイベントを使用したドラッグアンドドロップ
    • スライダー
    • フィールドの周りにスーパーヒーローをドラッグ
  • ポインターイベント
  • キーボード: keydown と keyup
    • 拡張ホットキー
  • スクロール
    • エンドレスページ
    • 上下ボタン
    • 表示されている画像をロード
• フォーム、コントロール
  • フォームのプロパティとメソッド
    • 選択肢を選択に追加
  • フォーカス: フォーカス/ブラー
    • 編集可能な div
    • クリックで TD を編集
    • キーボード駆動マウス
  • イベント: change, input, cut, copy, paste
    • 預金計算機
  • フォーム: イベントとメソッド submit
    • モーダルフォーム
• ドキュメントとリソースの読み込み
  • ページ: DOMContentLoaded, load, beforeunload, unload
  • スクリプト: async, defer
  • リソースの読み込み: onload と onerror
    • コールバック付きの画像読み込み
• その他
  • ミューテーションオブザーバー
  • 選択範囲と範囲
  • イベントループ: マイクロタスクとマクロタスク
    • このコードの出力は何になりますか?

追加の記事

• フレームとウィンドウ
  • ポップアップとウィンドウメソッド
  • クロスウィンドウ通信
  • クリックジャッキング攻撃
• バイナリデータ、ファイル
  • ArrayBuffer、バイナリ配列
    • 型付き配列を連結
  • TextDecoder と TextEncoder
  • Blob
  • File と FileReader
• ネットワークリクエスト
  • Fetch
    • GitHubからユーザーを取得する
  • FormData
  • Fetch: ダウンロードの進捗
  • Fetch: 中止
  • Fetch: クロスオリジンリクエスト
    • なぜオリジンが必要なのか？
  • Fetch API
  • URLオブジェクト
  • XMLHttpRequest
  • レジューム可能なファイルアップロード
  • ロングポーリング
  • WebSocket
  • Server Sent Events
• ブラウザへのデータ保存
  • Cookie、document.cookie
  • LocalStorage、sessionStorage
    • フォームフィールドの自動保存
  • IndexedDB
• アニメーション
  • ベジェ曲線
  • CSSアニメーション
    • 飛行機をアニメーションさせる（CSS）
    • 飛行中の飛行機をアニメーションさせる（CSS）
    • アニメーションする円
    • コールバック付きのアニメーションする円
  • JavaScriptアニメーション
    • 跳ねるボールをアニメーションさせる
    • 右に跳ねるボールをアニメーションさせる
• Webコンポーネント
  • 軌道高度から
  • カスタム要素
    • ライブタイマー要素
  • シャドウDOM
  • テンプレート要素
  • シャドウDOMのスロット、構成
  • シャドウDOMのスタイリング
  • シャドウDOMとイベント
• 正規表現
  • パターンとフラグ
  • 文字クラス
  • Unicode: フラグ "u" とクラス \p{...}
  • アンカー：文字列の開始 ^ と終了 $
    • 正規表現 ^$
  • アンカー ^ $ の複数行モード、フラグ "m"
  • 単語境界: \b
    • 時刻を見つける
  • エスケープ、特殊文字
  • セットと範囲 [...]
    • Java[^script]
    • 時刻を hh:mm または hh-mm で見つける
  • 量指定子 +, *, ? および {n}
    • 省略記号 "..." を見つけるには？
    • HTMLカラーの正規表現
  • 貪欲な量指定子と怠惰な量指定子
    • /d+? d+?/ の一致
    • HTMLコメントを見つける
    • HTMLタグを見つける
  • キャプチャグループ
    • MACアドレスをチェックする
    • #abc または #abcdef 形式の色を見つける
    • すべての数字を見つける
    • 式を解析する
  • パターン内の後方参照：\N および \k<name>
  • オルタネーション（OR）|
    • プログラミング言語を見つける
    • bbtagのペアを見つける
    • 引用符で囲まれた文字列を見つける
    • 完全なタグを見つける
  • 先読みと後読み
    • 非負の整数を見つける
    • Headの後ろに挿入
  • 破滅的なバックトラッキング
  • スティッキーフラグ "y"、位置での検索
  • RegExpとStringのメソッド