ここではコピーして自分のページに貼るだけで使えるJavaScriptのサンプルを紹介します。ホームページを面白くするインタラクティブな機能別の100本以上のサンプルを用意しました。HTMLのHEADやBODYなどのタグがはじめから付いていますので、そのままCD-ROMのページからコピーしてお使いいただけます。そこで使用された主な命令についての リファレンスと基本サンプルが PART4 にもありますのでご参照ください 。 また、大勢の方々にご協力をいただき複数の環境での動作確認を実施した結果を書籍本文のPart2にまとめてありますので、使用する際の参考にしてください。

OS/ブラウザ別動作確認　一覧
| HTML版
| PDF版
| エクセル版




• [基本編]
  
  
  alert() メッセージダイアログを出す
  
  ◎A/
  
  | A01 ボタンクリックでダイアログを出すNN2.X~
  | A02 ラジオボタンクリックでダイアログを出すNN2.X~
  | A03 文字をクリックしたらダイアログを出すNN2.X~
  | A04 文字にさわったらダイアログを出すNN2.X~
  | A05 写真をクリックしたらダイアログを出す1 -onClickを使うケース-NN2.X~
  | A06 写真をクリックしたらダイアログを出す2 -javascript:を使うケース-NN2.X~
  | A07 写真をクリックしたらダイアログを出す3 -functionを使うケース-NN2.X~
  | A08 写真にさわったらダイアログを出すNN2.X~
  | A09 写真から離れたらダイアログを出すNN3.X~
  | A10 リセットボタンを押したらダイアログを出すNN3.X~
  | A11 送信ボタンを押したらダイアログを出すNN2.X~
  | A12 フォームoptionの選択内容をダイアログに表示するNN2.X~
  | A1201(おまけ) A12でthisを使った場合NN2.X
  | A13 数字入力後クリックで入力確認を出し、未入力だと再入力メッセージを出すNN2.X~
  | A14 Javaが使えるかどうかのダイアログを出すNN3.X~
  | A15 ページに入ったとたんにダイアログを出す1 -読み込み完了前-NN2.X~
  | A16 ページに入ったとたんにダイアログを出す2 -読み込み完了後-NN2.X~
  | A17 ページを出る時にダイアログを出すNN2.X~
  | A18 XX秒後にメッセージを出すNN2.X~
  
  
  confirm() OK/キャンセル(またはYES/NO)の確認ダイアログを出す
  
  ◎B/
  
  | B01 ボタンクリックで確認ダイアログを出す-分岐処理をalertに出力-NN2.x~
  | B02 ラジオボタンクリックで確認ダイアログを出す-分岐処理をformに出力-NN2.x~
  | B03 文字をクリックしたら質問を出し、答えによってダイアログを出すNN2.x~
  | B04 文字にさわったら質問を出し、答えによってダイアログを出すNN2.X~
  | B05 画像をクリックしたら質問を出し、答えによってダイアログを出す1 -onClickを使うケース-NN2.x~
  | B06 画像をクリックしたら質問を出し、答えによってダイアログを出す2 -javascript:を使うケース-NN2.x~
  | B07 画像をクリックしたら質問を出し、答えによってページを分岐するNN2.X~
  | B08 写真にさわったら説明し、答えによって拡大写真を表示するNN2.X~
  | B09 リセットボタンを押したら念のために確認し、NOなら消去せず入力待ちにするNN3.X~
  | B10 送信ボタンを押したらお礼と確認ダイアログを出す、NOなら送信しないNN2.X~
  | B11 ページに入ったとたんに質問し、答えによってページを分岐するNN2.X~
  
  
  prompt() 入力用ダイアログを出す
  
  ◎C/
  
  | C01 ボタンクリックで入力用ダイアログを出し、入力内容をformに表示するNN2.X~
  | C02 ラジオボタンクリックで入力用ダイアログを出し、入力内容をダイアログに表示するNN2.X~
  | C03 ページに入ったとたんに名前を聞き、入力した名前をページに表示するNN2.X~
  | C04 パスワードでページを分岐するNN2.X~
  
  
  window.open() 1 新しいウィンドウを開く
  
  ◎D/
  
  | D01 ボタンクリックでサブウィンドウを開き、HTMLを表示するNN2.X~
  | D02 ラジオボタンクリックでサブウィンドウを開き、ページを読み込むNN2.X~
  
  ○window.open()命令の機能テスト------------
  | D03 ボタンクリックでツールバー付きのサブウィンドウを開くNN2.X~
  | D04 ボタンクリックでロケーションフィールド付きのサブウィンドウを開くNN2.X~
  | D05 ボタンクリックでディレクトリボタン付きのサブウィンドウを開くNN2.X~
  | D06 ボタンクリックでステータスバー付きのサブウィンドウを開くNN2.X~
  | D07 ボタンクリックでメニューバー付きのサブウィンドウを開くNN2.X~
  | D08 ボタンクリックでスクロールバー付きのサブウィンドウを開くNN2.X~
  | D09 ボタンクリックでリサイズ可能なサブウィンドウを開くNN2.X~
  | D10 サブウィンドウの大きさを指定するNN2.X~
  --機能テストEND--------------------------
  
  | D11 文字をクリックするとHELPウィンドウが開くNN2.X~
  | D12 文字にさわるとサブウィンドウが開き、クリックするとリンクへ飛ぶNN2.X~
  | D13 写真をクリックすると説明のサブウィンドウが開くNN2.X~
  | D14 ページに入ったとたんに「ようこそ」ウィンドウが開いて、出る時に閉じるNN2.X~
  | D15 文字をクリックするとサブウィンドウが開き、ページを読み込むNN2.X~
  | D16 カウントダウンウィンドウNN2.X~
  
  
  window.open() 2 元のウィンドウからサブウィンドウを操作する
  
  ◎E/
  
  | E01 ボタンクリックでサブウィンドウを開いたり閉じたりするNN2.X~
  | E02 ボタンクリックでサブウィンドウの中の文字を書きかえるNN2.X~
  /K08 自動的に次々とサブウィンドウの画像が切りかわるスライドショーNN3.X~
  
  
  window.opener サブウィンドウから元のウィンドウを操作する
  
  ◎F/
  
  | F01 文字クリックで親ウィンドウのフォームへ入力するNN3.X~
  | F02 ラジオボタンクリックで元のウィンドウの背景色を変更するNN3.X~
  | F03 Closeボタン付きのサブウィンドウ目次を作るNN3.X~...NN2
  
  
  frame フレームを操作する
  
  ◎G/
  
  | G01 文字にさわると別フレームに画像を読み込み、クリックでジャンプする
  / 参照 フレームテスト
  
  
  status ステータスバーに文字を出す
  
  ◎H/
  
  | H01 リンク文字にさわったらステータスバーに説明を出すNN2.X~
  | H02 ステータスバーに文字をスクロールさせるNN2.X~
  | H03 ステータスバーに日時を表示するNN2.X~
  
  
  form フォームのinput・textareaに文字を出す
  
  ◎I/
  
  | I01 ボタンクリックでINPUTフィールドへの出力文字を次々変えるNN2.X~
  | I0101(おまけ) I01にBackボタンを追加してみるNN2.X~
  / K07 サンプル写真にさわったら拡大画像と説明文を表示するNN3.X~
  
  
  onSubmit フォーム送信時に…
  
  ◎J/
  
  /A11 送信ボタンを押したらダイアログを出すNN2.X~
  /B10 送信ボタンを押したらお礼と確認ダイアログを出す、NOなら送信しないNN2.X~
  | J01 文字化けしないformメールNN2.Xと3.0~を分岐処理
  | J02 どのページからの返信かわかるメモ付きで送信するNN2.X~
  | J03 ページタイトルを自動添付して送信するNN2.X~
  | J04 相手のブラウザやマシン情報を自動添付して送信するNN2.X~
  | J05 送信ボタンを押したらありがとうのダイアログを出すNN2.X~
  | J06 送信ボタンが押されたらサブウィンドウが開き、また来てねのメッセージが点滅してアニメがお辞儀するNN2.X,NN3.X~
  
  
  Image() 画像を切りかえる(インタラクティブアニメーション)
  
  ◎K/
  
  | K01 ボタンクリックで画像を切りかえるNN3.X~
  | K02 フォームのセレクトオプション選択で画像を切りかえるNN3.X~
  | K03 文字をクリックしたら画像を切りかえるNN3.X~
  | K04 文字にさわったら画像を切りかえるNN3.X~
  | K05 写真にさわったらムービーを始め、離れると止まるNN3.X~
  | K06 サンプル写真にさわったら拡大画像を表示するNN3.X~
  | K07 サンプル写真にさわったら拡大画像と説明文を表示するNN3.X~
  | K08 自動的に次々とサブウィンドウの画像が切りかわるスライドショーNN3.X~
  | K09 ボタンをクリックするとロゴの回転方向やスピードが変わるNN3.X~
  | K10 さわると絵がかわるインタラクティブリンクボタンNN3.X~
  JavaScript大仏ムービー
  | K11 プラグインなんていらないJavaScriptムービーNN3.X~
  | K12 K11のスクリプトをシンプルにするNN3.X~
  | K13 K12にインタラクティブなスタートボタンを付けるNN3.X~
  | K14 K13にインタラクティブなストップボタンを追加するNN3.X~
  | K15 K14にインタラクティブな早送りボタンを追加するNN3.X~
  | K16 K15にインタラクティブな巻き戻しボタンを追加する　JavaScriptムービー完成!!NN3.X~
  | K17 K16のスクリプトを外部ファイルにしてHTMLをすっきりさせるNN3.X~
  
  オリジナルムービー作成サンプル
  | ムービーTEST1 牛久大仏スライドショー[.js外部ファイル]NN3.X~
  | ムービーTEST1A 牛久大仏スライドショーNN3.X~
  | ムービーTEST2 風に揺れるビーチパラソル(連続繰り返し再生)[.js外部ファイル]NN3.X~
  | ムービーTEST2A 風に揺れるビーチパラソル(連続繰り返し再生)NN3.X~
  
  
  DynamicHTMLレイヤーで文字や画像をコントロールする
  
  ◎L/
  
  | L01 ボタンクリックで文字を出現させるNN4.X~
  | L02 ボタンクリックで文字を次々と出現させるNN4.X~
  | L03 ボタンクリックで画像を出現させるNN4.X~
  | L04 ボタンクリックで画像を次々と出現させるNN4.X~
  | L05 ボタンクリックで画像を左右に移動させるNN4.X~
  | L06 ボタンクリックで画像を上下に移動させるNN4.X~
  | L07 ポップアップメニューNN4.X~
  
  
  
• [応用編]
  
  ◎M/
  
  | M01 ちょうきちをさがせっ!　ラジオボタンで作った簡単ゲームNN2.x~
  | M02 おみくじNN2.x~
  | M03 超シンプルYES/NOクイズ　12面クリアに挑戦だっ!!NN2.x~
  | M04 くじ引き用スクリプトNN3.x~
  | M05 画像版派手なおみくじNN3.x~
  | M06 ホームページ用電灯スイッチ NN2.xNN3.x~
  | M07 あっちむいてほいNN3.x~
  | M08 スロットマシンNN3.x~
  | M09 制限時間内に絵あわせをするゲームNN3.x~
  | M10 クリスマスツリー/イブの夜に逢えないふたりへ…NN3.x~
  | M11 写真セレクターと画像の先行読み込み処理NN3.x~
  | M12 簡易棒グラフNN3.x~
  
  
  



Contents

| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)

---

Maintained by
tato@fureai.or.jp works1997 Toshirou Takahashi