⚡ Sangsakala Proxy
🏠 Home
◀
▶
🔄
✕
⚡ Buka Bar
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 と文字列のメソッド