JavaScript(ジャバスクリプト)で作った、ちょっと便利なサンプル集。
逆引き的に目的から探せる。
イベント
- ボタンをクリックすると、関数を呼び出す
- ラジオボタンをクリックすると、関数を呼び出す
- ページ読み込み時に、複数の関数を呼び出す
- ページ読み込み時に、特定のラジオボタンをクリック
- クリックイベントにイベントハンドラをバインド
- ダブルクリックイベントにイベントハンドラをバインド
- マウスムーブイベントにイベントハンドラをバインド
- マウスオーバーイベントとマウスアウトイベントにイベントハンドラをバインド
- クリックイベントに引数付きイベントハンドラを動的にバインド
- リスト項目のクリックイベントに引数付きイベントハンドラを動的にバインド
- マウスのボタンを押している間実行し続け、ボタンを放すと止まるアニメーション
- 特定のクラス名を持つ全ての要素のクリック時の処理を指定
- クリック時、関数は呼び出すが、リンク先「#」は開かないa要素 (1)
- クリック時、関数は呼び出すが、リンク先「#」は開かないa要素 (2)
- リンク先URLの末尾が「#」である複数のa要素のリンクを無効化 (1)
- リンク先URLの末尾が「#」である複数のa要素のリンクを無効化 (2)
クッキー
フォーム
- 送信フォームの必須項目が入力済みかチェック
- 送信フォームの入力内容が半角数字かチェック
- 送信フォームの入力内容が半角英数かチェック
- 送信フォームの入力文字数をチェック
- 送信フォームのメールアドレス入力内容をチェック
- フォーム内容リセット前にダイアログで確認
- リセット前に確認し「リセットしました」を2秒表示
- 特定のラジオボタンだけテキスト入力欄を有効化
- 特定のラジオボタンだけテキスト入力欄を表示
- 同意するを選ぶと送信ボタンを有効化
- ロールオーバーでラジオボタンの色を反転
- マウスポインタの動作でラジオボタンの色を変更
- フォームの内容の変更を特定の要素に即反映
- フォームの内容を一行にまとめ表に追加
- テキスト入力欄のテキストを選択
- テキストエリアのテキストを選択
表
リスト
- 配列の内容を、writeメソッドで順序リスト(ol要素)に表示
- 配列の内容を、DOM操作で順序リスト(ol要素)に表示
- 2次元配列の内容を、DOM操作で入れ子の順序リスト(ol要素)に表示
- 簡易オブジェクトの内容を、DOM操作で順不同リスト(ol要素)に表示
- 可変長引数の内容を、DOM操作で順序リスト(ol要素)に表示
- 配列の内容を、Array.forEachメソッドやwriteメソッドで順序リスト(ol要素)に表示
- 配列の内容を、Array.forEachメソッドやDOM操作で順序リスト(ol要素)に表示
- リスト項目を他のリストへ移動
- リスト項目のクリックイベントに引数付きイベントハンドラを動的にバインド
- ドラッグ&ドロップで、リスト(ol要素)間を移動できるリスト項目(li要素)
配列
- 配列の内容を、writeメソッドで順序リスト(ol要素)に表示
- 配列の内容を、DOM操作で順序リスト(ol要素)に表示
- 2次元配列の内容を、DOM操作で入れ子の順序リスト(ol要素)に表示
- 配列の内容を、Array.forEachメソッドやwriteメソッドで順序リスト(ol要素)に表示
- 配列の内容を、Array.forEachメソッドやDOM操作で順序リスト(ol要素)に表示
- 配列の内容を合計
- 配列から最大値を取得
- 配列から最小値を取得
- 数値のフィルタリング
- 配列に特定の要素があるか検索
- 配列の要素を自然順ソート
- 配列の要素を逆順ソート
- 配列と配列を連結
- 5つの配列を連結
- 二次元配列を一次元配列にまとめる
時間
アニメーション
- ボッス要素を自動スクロール
- ボッス要素の内容を指定回数分点滅
- マウスのボタンを押している間実行し続け、ボタンを放すと止まるアニメーション
- JavaScriptでボッス要素を自動横スクロール
- ボタンクリックでスクロールするインラインフレーム(IFrame要素)
- 自動横スクロールするインラインフレーム(IFrame要素)
- ボックス要素を半透明から不透明に変更するフェードインアニメーション
- ボックス要素を不透明から半透明に変更するフェードアウトアニメーション
- ボックス要素を透明から不透明に変更するフェードインアニメーション
- ボックス要素を不透明から透明に変更するフェードアウトアニメーション
- ボックス要素の幅を、指定したサイズまで拡大縮小アニメーション
- ボックス要素の高さを、指定したサイズまで拡大縮小するアニメーション
- ボックス要素の幅を、指定した割合まで拡大縮小するアニメーション
- 画像を、指定したサイズまで拡大縮小するアニメーション