Show tasks

JavaScript 言語

• 導入
  • JavaScript 入門
  • マニュアルと仕様
  • コードエディタ
  • 開発者コンソール
• JavaScript の基礎
  • Hello, world!
    • alert を表示しましょう
    • 外部スクリプトで alert を表示しましょう
  • コード構造
  • モダンなモード, "use strict"
  • 変数
    • 変数の操作
    • 正しい名前を与える
    • 大文字の const?
  • データ型
    • 文字列の引用符
  • インタラクション: alert, prompt, confirm
    • シンプルなページ
  • 型変換
  • 演算子
    • プレフィックス(接頭辞)とサフィックス(接尾辞)の形式
    • 代入の結果
    • 型変換
    • 足し算を修正する
  • 比較
    • 比較
  • 条件分岐: if, '?'
    • if (ゼロの文字列)
    • JavaScriptの名前
    • Show the sign
    • 'if' を '?' で書き直しましょう
    • 'if..else' を '?' で書き直します
  • 論理演算子
    • OR の結果はなんでしょう?
    • OR されたアラートの結果は何ですか？
    • AND の結果は何?
    • AND されたアラートの結果は何でしょう?
    • OR AND OR の結果
    • 範囲内のチェック
    • 範囲外のチェック
    • "if" についても疑問
    • ログインのチェック
  • NULL合体演算子(Nullish coalescing operator) '??'
  • ループ: while と for
    • 最後のループ値
    • while でどの値が表示される？
    • どの値が "for" ループによって表示されますか？
    • ループで偶数を出力する
    • "for" を "while" で置き換える
    • 正しい値が入力されるまで繰り返す
    • 素数の出力
  • switch文
    • "switch" を "if" で書き直す
    • "if" を "switch" に書き換える
  • 関数
    • "else" は必須ですか？
    • '?' または '||' を使って関数を書き直す
    • 関数 min(a, b)
    • 関数 pow(x,n)
  • 関数式
  • アロー関数の基本
    • アロー関数を使った書き換え
  • JavaScript スペシャル（これまでのおさらい）
• コード品質
  • Chrome でのデバッグ
  • コーディングスタイル
    • Bad style
  • コメント
  • 忍者コード
  • mocha による自動テスト
    • このテストは何が問題でしょう？
  • Polyfill（ポリフィル）とトランスパイラ
• オブジェクト: 基本
  • オブジェクト
    • Hello, object
    • 空のチェック
    • 合計のオブジェクトプロパティ
    • 数値プロパティに2を掛ける
  • オブジェクト参照とコピー
  • ガベージコレクション
  • オブジェクトメソッド, "this"
    • オブジェクトリテラルで "this" を使う
    • 計算機を作成する
    • チェーン
  • コンストラクタ、 new 演算子
    • 2つの関数 - 1つのオブジェクト
    • 新しい計算機を作る
    • 新しい Accumulator を作る
  • オプショナルチェイニング(Optional chaining) '?.'
  • シンボル型
  • オブジェクトからプリミティブへの変換
• データ型
  • プリミティブのメソッド
    • 文字列プロパティを追加することはできる？
  • 数値
    • 訪問者からの数値を合計する
    • なぜ 6.35.toFixed(1) == 6.3?
    • 入力が数値であるまで繰り返す
    • 偶発的な無限ループ
    • min から max のランダムな数値
    • min から max のランダムな整数
  • 文字列
    • 最初の文字を大文字にする
    • スパムのチェック
    • テキストを切り捨てる
    • お金を抽出する
  • 配列
    • 配列はコピーされる？
    • 配列操作
    • 配列コンテキストでの呼び出し
    • 入力値の合計
    • 最大のサブ配列
  • 配列のメソッド
    • border-left-width を borderLeftWidth に変換する
    • 範囲でフィルタする
    • インプレースで範囲をフィルタする
    • 逆の順序でソートする
    • 配列のコピーとソート
    • 拡張可能な計算機を作る
    • 名前へのマップ
    • オブジェクトへのマップ
    • ソートオブジェクト
    • 配列のシャッフル
    • 平均年齢の取得
    • ユニークな配列メンバをフィルタする
    • 配列からキー付けされたオブジェクトを作成する
  • 反復可能なオブジェクト
  • Map と Set
    • ユニークな配列メンバのフィルタをする
    • アナグラムをフィルタする
    • 反復可能(iterable)なキー
  • WeakMap と WeakSet
    • "未既読" フラグを格納する
    • 読んだ日付を格納する
  • Object.keys, values, entries
    • プロパティを合計する
    • プロパティをカウントする
  • 分割代入
    • 分割代入
    • 最大の給与
  • 日付 と 時刻
    • 日付の作成
    • 平日を表示する
    • ヨーロッパの平日
    • n 日前の日付はなんでしょう？
    • 月の最後日は？
    • 今日何秒経過しましたか？
    • 明日までの秒数は？
    • 相対日付をフォーマットする
  • JSON メソッド, toJSON
    • オブジェクトを JSON に変換して戻す
    • 後方参照を除外する
• 関数の高度な機能
  • 再帰とスタック
    • 与えられた数値までのすべての数値を合計する
    • 階乗を計算する
    • フィボナッチ数
    • 単一連結リストを出力する
    • 単一連結リストを逆順で出力する
  • 残りのパラメータ(Rest parameters)とスプレッド演算子(Spread operator)
  • 変数スコープ、クロージャ
    • 関数は最新の変更を取得しますか？
    • どちらの変数が利用可能でしょう？
    • カウンタは独立していますか？
    • カウンタオブジェクト
    • if の中の関数
    • クロージャで合計する
    • 変数は参照できますか？
    • 関数を通してフィルタする
    • フィールドでソートする
    • 関数の軍隊
  • 古い "var"
  • グローバルオブジェクト
  • 関数オブジェクト, NFE
    • カウンタの設定と減少
    • 任意の量の括弧で合計する
  • "new Function" 構文
  • スケジューリング: setTimeout と setInterval
    • 毎秒を出力する
    • setTimeout を setInterval で書き直す
    • setTimeout は何を表示するでしょう？
  • デコレータと転送, call/apply
    • Spy デコレータ
    • 遅延デコレータ
    • Debounce decorator
    • Throttle decorator
  • 関数バインディング
    • メソッドとしてのバインドされた関数
    • 2つの bind
    • バインド後の関数プロパティ
    • Ask losing this
  • アロー関数ふたたび
• オブジェクトプロパティの設定
  • プロパティフラグとディスクリプタ
  • プロパティ getters と setters
• プロトタイプ, 継承
  • プロトタイプ継承
    • プロトタイプの操作
    • 検索アルゴリズム
    • どこに書きますか？
    • なぜ2匹のハムスターがお腹一杯？
  • F.prototype
    • "prototype" の変更
    • 同じコンストラクタでオブジェクトを作成する
  • ネイティブのプロトタイプ
    • 関数にメソッド "f.defer(ms)" を追加する
    • デコレートする "defer()" を関数に追加する
  • __proto__ なしでの プロトタイプ メソッド, オブジェクト
    • 辞書に toString を追加する
    • 呼び出し感の差異
• クラス
  • クラス(Class) 基本構文
    • クラスで書き直す
  • クラスの継承
    • インスタンス作成エラー
    • 拡張された時計
    • クラスは Object を拡張しますか？
  • 静的(static)プロパティとメソッド
  • Private / protected プロパティとメソッド
  • 組み込みのクラスを拡張する
  • クラスのチェック: "instanceof"
    • 奇妙な instanceof
  • ミックスイン
• エラーハンドリング
  • エラーハンドリング, "try..catch"
    • Finally or just the code?
  • カスタムエラー, Error の拡張
    • SyntaxError を継承する
• Promise, async/await
  • 前置き: コールバック
  • Promise
    • promise の再 resolve ?
    • promise での遅延
    • promise でのアニメーション付きサークル
  • Promise チェーン
    • Promise: then vs catch
  • Promise でのエラーハンドリング
    • setTimeout でのエラー
  • Promise API
    • フォールトトレラント Promise.all
    • フォールトトレラント JSON をフェッチする
  • Promisification
  • Microtasks
  • Async/await
    • async/await を使用して書き直す
    • "再スロー" を async/await で書き直す
    • 非 async から async を呼び出す
• ジェネレータ, 高度なイテレーション
  • ジェネレータ
    • 疑似乱数ジェネレータ
  • 非同期イテレーションとジェネレータ
• モジュール
  • モジュール, 導入
  • エクスポートとインポート
  • Dynamic imports(ダイナミックインポート)
• その他
  • Proxy と Reflect
    • 存在しないプロパティの読み取りエラー
    • Accessing array[-1]
    • Observable
  • Eval: コード文字列を実行する
    • Eval-計算機
  • カリー化
    • ログイン用の部分的なアプリケーション
  • 参照型
    • 構文チェック
    • "this" の値を説明してください
  • BigInt

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

• ドキュメント
  • ブラウザ環境, スペック
  • DOM ツリー
  • DOM ナビゲーション
    • DOM の子
    • 兄弟に関する質問
    • すべての対角線上のセルを選択する
  • 検索: getElement* と querySelector*
    • 要素を検索する
  • ノードのプロパティ: タイプ、タグとコンテンツ
    • 子孫を数える
    • nodeType には何がありますか？
    • コメントの中のタグ
    • "document" は階層の中でどんなところでしょう？
  • 属性とプロパティ
    • 属性を取得する
    • 外部リンクをオレンジにする
  • ドキュメントの変更
    • createTextNode vs innerHTML vs textContent
    • 要素をクリアする
    • なぜ "aaa" が残るのでしょう?
    • リストを作成する
    • オブジェクトからツリーを作成する
    • ツリーの子孫を表示する
    • カレンダーを作成する
    • setInterval を使用した色付き時計
    • リストで HTML を挿入する
    • テーブルをソートする
  • スタイルとクラス
    • 通知を作成する
  • 要素サイズとスクローリング
    • ボトムからのスクロールは何でしょう？
    • スクロールバーの幅は何でしょう？
    • フィールドの中心にボールを置く
    • 違い: CSS 幅 vs clientWidth
  • ウィンドウサイズとスクローリング
  • 座標
    • フィールドのウィンドウ座標を見つける
    • 要素の近くにノート(メモ)を表示する
    • 要素の近くにノートを表示する(absolute)
    • ノートを内部に配置する (absolute)
• イベント概論
  • ブラウザイベントの紹介
    • クリックして隠す
    • 自身を隠す
    • どのハンドラが実行されますか?
    • フィールド上でボールを移動させる
    • スライドするメニューを作る
    • 閉じるボタンを追加する
    • カルーセル
  • バブリング と キャプチャリング
  • イベント移譲(Event delegation)
    • 移譲でメッセージを隠す
    • ツリーメニュー
    • ソート可能なテーブル
    • ツールチップの振る舞い
  • ブラウザのデフォルト動作
    • なぜ "return false" が動作しないのでしょう?
    • 要素内のリンクをキャッチする
    • イメージギャラリー
  • カスタムイベントのディスパッチ
• イベントの詳細
  • マウスイベント
    • 選択可能なリスト
  • 移動: mouseover/out, mouseenter/leave
    • 改善されたツールチップ動作
    • "賢い" ツールチップ
  • マウスイベントでのドラッグ&ドロップ
    • スライダー
    • フィールドの周りでスーパーヒーローをドラッグする
  • キーボード: keydown と keyup
    • 拡張ホットキー
  • スクロール
    • エンドレスなページ
    • Up/down button
    • 目に見える画像を読み込む
• フォーム, コントロール
  • フォームプロパティとメソッド
    • select に option を追加する
  • フォーカス: focus/blur
    • 編集可能な div
    • クリックして TD を編集する
    • キーボード駆動のねずみ
  • イベント: change, input, cut, copy, paste
    • 預金計算機 Deposit calculator
  • フォームの送信: submit のイベントとメソッド
    • モーダルフォーム
• ドキュメントとリソースの読み込み
  • ページのライフサイクル: DOMContentLoaded, load, beforeunload, unload
  • スクリプト: async, defer
  • リソース読み込み: onload と onerror
    • CallBack でイメージを読み込む
• その他
  • Mutation observer
  • 選択（Selection） と 範囲（Range）
  • イベントループ(event loop): microtask と macrotask

その他の記事

• フレームとウィンドウ
  • ポップアップとウィンドウメソッド
  • ウィンドウを跨いだやり取り
  • クリックジャッキング
• バイナリデータ、ファイル
  • ArrayBuffer, binary arrays
    • 型付き配列を連結する
  • TextDecoder と TextEncoder
  • Blob
  • File と FileReader
• ネットワークリクエスト
  • Fetch
    • Github からユーザをフェッチする
  • FormData
  • Fetch: ダウンロードの進行状況
  • Fetch: Abort
  • Fetch: クロスオリジン(Cross-Origin) リクエスト
    • なぜ Origin が必要なのでしょう?
  • Fetch API
  • URL オブジェクト
  • XMLHttpRequest
  • 再開可能なファイルアップロード
  • ロングポーリング
  • WebSocket
  • Server Sent Events
• ブラウザへのデータの保存
  • Cookies(クッキー), document.cookie
  • LocalStorage, sessionStorage
    • フォームフィールドを自動保存する
  • IndexedDB
• アニメーション
  • ベジェ曲線
  • CSS アニメーション
    • 飛行機をアニメーションする (CSS)
    • 飛んでいる飛行機をアニメーションする (CSS)
    • アニメーションサークル
    • コールバック付きのアニメーション化された円
  • JavaScript アニメーション
    • バウンドするボールのアニメーション
    • 右にバウンドするボールのアニメーション
• Web components
  • 導入(From the orbital height)
  • Custom elements
    • Live timer element
  • Shadow DOM
  • Template 要素
  • Shadow DOM スロット, コンポジション
  • Shadow DOM スタイリング
  • Shadow DOMとイベント
• 正規表現
  • パターンとフラグ
  • 文字クラス
  • Unicode(ユニコード): フラグ "u" とクラス \p{...}
  • 文字列の先頭 ^ と末尾 $
    • 正規表現 ^$
  • アンカー ^ $ の複数行モード, フラグ "m"
  • 単語境界(Word boundary): \b
    • 時間を見つける
  • エスケープ, 特殊文字
  • 集合と範囲 [...]
    • Java[^script]
    • hh:mm または hh-mm の時間を見つける
  • 量指定子 +, *, ? と {n}
    • 省略記号 "..." の見つけ方は？
    • HTML カラーの正規表現
  • 貪欲と怠惰な量指定子
    • /d+? d+?/ に対するマッチ
    • HTML のコメントを見つける
    • HTML タグを見つける
  • キャプチャグループ
    • MAC アドレスのチェック
    • #abc または #abcdef の形式で色を検索する
    • すべての数値を見つける
    • 式をパースする
  • 後方参照: \N と \k<name>
  • 論理和指定子(Alternation) (OR) |
    • プログラミング言語を見つける
    • bbタグのペアを見つける
    • 引用符で囲まれた文字列を見つける
    • 完全なタグを見つける
  • 先読みと後読み(Lookahead/lookbehind)
    • 非負の整数を探す
  • 破壊的なバックトラック(Catastrophic backtracking)
  • スティッキーフラグ(sticky flag) "y", 指定位置での検索
  • RegExp と文字列のメソッド

• © 2007—2024  Ilya Kantor
• プロジェクトについて
• コンタクト