JavaScriptテクニックブック

JavaScript テクニック ブック このページはHTML, CSS, JavaScriptのファイルを分離したサンプルを掲載しています(JavaScriptテクニックブックとして書籍としても購入 (アマゾン) できます)。また、prototype.jsYahoo UI LibraryScript.aculo.usAdobe Spryなどのライブラリも使用しています。これらのライブラリに関しては、各ライブラリのページから必要なファイルをダウンロードしてください。
ミスや間違い、リンクエラーなどがありましたら[email protected]までお願いします。

4月7日 SpryのアコーディオンとパネルのIE6での表示不具合を修正しました。HTML 4 TransitionalではSpryは正常に動作しないためです。
9月29日 書籍の113番(264〜265頁)でHTMLのコードが別のファイルのものになっていました。このサイトにある指定範囲の文字列を抜き出すにあるものが正しいものです。
Last update:2007/9/29 PM 9:54

■基本

  1. JavaScriptをHTML文書内に記述する
  2. JavaScriptをHTMLタグ内に記述する
  3. 別ファイルのJavaScriptファイルを読み込む
  4. ダイナミックに別ファイルのJavaScriptファイルを読み込む
  5. 後付けでイベントを定義する
  6. DOMが使えるブラウザかどうか判別する
  7. ブラウザを判別する
  8. オブジェクトの型を調べる
  9. オブジェクトが存在しない場合のみ新たにオブジェクトを生成する
  10. 一定時間後に一度だけ処理を行う
  11. 一定時間ごとに処理を行う

■フォーム

  1. フォームのエレメントへアクセスする
  2. ページが読み込まれたら指定されたテキストフィールドにフォーカスを移す
  3. テキストフィールドの内容をチェックする
  4. テキストフィールドに数字以外が入力されているか調べる
  5. テキストフィールドに英文字以外が入力されているか調べる
  6. テキストフィールドの内容が間違っている場合一瞬だけハイライトさせる(script.aculo.us)
  7. パスワードが間違っている場合に左右に揺らす(script.aculo.us)
  8. 数値以外が入力されたらメッセージを表示する(Adobe Spry)
  9. 整数以外が入力されたらメッセージを表示する(Adobe Spry)
  10. 金額以外が入力されたらメッセージを表示する(Adobe Spry)
  11. 日付以外が入力されたらメッセージを表示する(Adobe Spry)
  12. 時刻以外が入力されたらメッセージを表示する(Adobe Spry)
  13. IPアドレス以外が入力されたらメッセージを表示する(Adobe Spry)
  14. URL以外が入力されたらメッセージを表示する(Adobe Spry)
  15. メールアドレス以外が入力されたらメッセージを表示する(Adobe Spry)
  16. 入力パターンを指定する(Adobe Spry)
  17. 必要な項目のみ入力されていたら送信する(空欄チェック)
  18. 同意します、のラジオボタンがクリックされたら送信ボタンを有効にする
  19. どのラジオボタンが選択されているか調べる
  20. どのチェックボックスがチェックされているか調べる
  21. チェックボックスがチェックされたらテキストフィールドを表示する
  22. チェックボックスがチェックされたらテキストフィールドへの入力を許可する
  23. チェックボックスがチェックされたらテキストフィールドを追加する(削除する)
  24. セレクトメニューで選択された項目を取得する(選択時に指定ページに飛ぶ)
  25. セレクトメニュー項目を追加する
  26. セレクトメニュー項目に応じてもう1つのセレクトメニュー項目内容を切り替える
  27. ボタンをクリックする度に異なる処理を行う
  28. 特定の条件に合うテキストフィールドに入力された値のみ加算する
  29. フォームの送信ボタンが押されたら処理を行う
  30. フォームのリセットボタンが押されたら処理を行う

■画像

  1. 指定した画像にアクセスする
  2. 一定時間ごと画像を入れ替える
  3. マウスが重なったら画像を切り替える(ロールオーバー)
  4. マウスが重なったら複数の画像を切り替える
  5. マウスクリックで次の画像を表示する
  6. クリックで画像のサイズを変更する(トグル)
  7. 画像をドラッグする(Yahoo UI)
  8. マウスオーバーで画像が浮き出るようにする(script.aculo.us/不透明度処理)
  9. スライド表示を行う(Lightbox)
  10. サムネールを拡大し表示する(Highslide)

■ダイアログ/ウィンドウ

  1. アラートダイアログを開く
  2. 確認ダイアログを開く
  3. 文字入力ダイアログを開く
  4. モーダルダイアログを開く
  5. サブウィンドウを開く
  6. サブウィンドウから親ウィンドウのページを切り替える
  7. 親ウィンドウからサブウィンドウのページを切り替える
  8. ページ内にマルチウィンドウを表示する(Prototype Window Class)
  9. アラートダイアログを表示する(Prototype Window Class)
  10. 確認ダイアログを表示する(Prototype Window Class)
  11. 月別にサブウィンドウにファイルや画像を表示する

■HTMLへのアクセス (DOM)

  1. 特定のIDを持つオブジェクトにアクセスする
  2. 特定のタグ名を持つオブジェクトにアクセスする
  3. 特定の名前を持つオブジェクトにアクセスする
  4. 特定のクラス名を持つオブジェクトにアクセスする (prototype.js)
  5. 特定の階層構造を持つオブジェクトにアクセスする (prototype.js)
  6. ページにテキストを出力する
  7. ページにHTMLデータを出力する
  8. ノードの値を参照/設定する
  9. ノードの種類を読み出す
  10. ノードのタグ名を読み出す
  11. ノードの属性値を参照/設定する
  12. ノードを複製し追加する
  13. ノードを削除する
  14. 前後のノードを参照する
  15. テキストノードを作成する
  16. エレメントを作成する
  17. まとめてノードを追加する

■スタイルシート

  1. スタイルシートにアクセスする
  2. 文字色と背景色を設定する
  3. 不透明度を設定する
  4. 現在のスタイル情報を読み出す
  5. スタイルシートクラスを入れ替える
  6. スタイルシートクラスを入れ替える(クラスが複数指定されている場合)
  7. 画像やエレメントの表示/非表示を切り替える
  8. クリックで内容を展開しページ内容を押し下げる
  9. ボタンクリックでCSSファイルを切り替える(linkタグ切替え)
  10. 時間帯別にCSSファイルを切り替える
  11. スタイルシートを無効にする

■イベント

  1. イベントオブジェクトにアクセスする
  2. イベントを設定する/解除する
  3. ページが読み込まれたら処理を行う
  4. 画像やエレメントなどをドラッグできるようにする(script.aculo.us)
  5. 押されたキーコードを取得する
  6. マウスの座標を取得する
  7. マウスオーバーで表示されるテキストを入れ替える
  8. イベントが発生したオブジェクト(タグ)により動作を変える

■テキスト/文字列

  1. 1文字だけ抜き出す
  2. 指定範囲の文字列を抜き出す
  3. 指定位置から指定された文字数だけ抜き出す
  4. 文字列を連結する
  5. 文字列の引き算を行う
  6. 指定した文字列が存在するか調べる(indexOf)
  7. 指定した文字列にマッチするか調べる(正規表現)
  8. 文字列をエンコード/デコードする
  9. 1文字ずつページ上に文字を表示しクリックで一括表示する
  10. ページが読み込まれたら更新情報をページ内に流し込む(prototype.js)

■日付/時刻

  1. 現在の日付を表示する
  2. 現在の時刻を表示する
  3. n日後を求める
  4. 実行時間を計測する
  5. リアルタイムに時刻を表示する
  6. リアルタイムに時刻を画像で表示する
  7. アナログ時計を表示する

■その他

  1. タブ区切り形式のデータを読み込み表示する
  2. CSV形式のデータを読み込み表示する
  3. XML形式のデータを読み込み表示する
  4. JSON形式のファイルを読み込み表示する
  5. XMLデータを読み込み表示する(Adobe Spry)
  6. 該当するXMLデータだけ表示する(Adobe Spry)
  7. XMLデータをソートして表示する(Adobe Spry)
  8. HTMLテンプレート(prototype.js)
  9. 別ファイルにデータを渡す
  10. グラフを表示する
  11. クッキーのデータの読み書き

■GUI関連

  1. ツリービュー表示
  2. アコーディオン表示
  3. パネル表示
  4. タブパネル表示
  5. タブに表示する内容を別ファイルにし非同期で読み込ませる(Yahoo UI)
  6. 階層化メニュー表示
  7. スライダー表示
  8. カレンダーを表示する
  9. カラーピッカーを表示する
  10. ウィザード形式で画面を切り替える