|
サンプル・コレクション
※本ページはソーテック社発行の書籍「使える！JavaScriptサンプルブック」購入者のためのものです。サンプルは書籍内容をマスターする目的のみ使用することができ、他の用途での使用・配布は一切禁止します。また、これらサンプルを実行した結果については著者、（株）ソーテック社は一切の責任を負いかねます。全てお客様の責任において御利用くださいますようお願いいたします。購入者以外の御利用はご遠慮ください。
ここで使用している全ての写真素材ファイルの著作権は篠崎柚さんにありますが、本書を学習する目的では報告や許可を必要とせず自由に使用できます。 しかし、他の目的での写真使用に関しては篠崎柚さんのページ「5memorips-photograghic」のフリー写真素材の利用規約をお守りください。
| ソースのダウンロード |
Windows用 (zip形式；約2.18MB) |
Macintosh用 (sit形式；約2.20MB) |
※ダウンロードしたサンプルファイルの解凍方法がわからない方は以下をご覧ください。
Windowsをご利用の方はこちら Macintoshをご利用の方はこちら
| カテゴリー | SECTION | タイトル | 使用イベント | 使用プロパティ・メソッド |
|---|---|---|---|---|
| ブラウザ | 001 | エクスプローラとネットスケープを見分ける | - | appName |
| ブラウザ | 002 | ブラウザバージョンを見分ける | - | appVersion |
| ブラウザ | 003 | ＯＳを見分ける | - | platform |
| ウィンドウ | 004 | 新しいウィンドウを開く | リンク | open() |
| ウィンドウ | 005 | 新ウィンドウにURLを読み込む | リンク | open() |
| ウィンドウ | 006 | 大きさを指定して新しいウィンドウを開く | リンク | open() |
| ウィンドウ | 007 | 位置を指定して新しいウィンドウを開く | リンク | open() |
| ウィンドウ | 008 | 新しいウィンドウを後ろに移動する | リンク | open()、focus() |
| ウィンドウ | 009 | 新しいウィンドウを開き、「閉じる」ボタンを付ける | ボタン | close() |
| ウィンドウ | 009-TIPS | 時間がきたら自動的にウィンドウを閉じる | setTimeout | close() |
| ウィンドウ | 010 | ウィンドウのサイズを変える | リンク | resizeTo()、resizeBy() |
| ウィンドウ | 011 | 新しいウィンドウの位置を動かす | リンク | moveBy()、moveTo() |
| ウィンドウ | 012 | 新しいウィンドウを常に前に表示する | onload、onblur | focus() |
| ウィンドウ | 013 | ウィンドウの背景色を変える | リンク | bgColor |
| ウィンドウ | 013-TIPS | ウィンドウの背景色をフェードで変える | リンク | bgColor、charAt() |
| ウィンドウ | 014 | サブウィンドウの背景画像を変える | リンク | background |
| ウィンドウ | 015 | 段落の背景画像をダイナミックに表示 | onmouseover、onmouseout | background |
| ウィンドウ | 016 | ステータスバーに文字を流す | onload、setInterval | status |
| ウィンドウ | 017 | ズームしてくるウィンドウ | onclick | resizeBy() |
| ウィンドウ | 018 | フェードインして現れるウィンドウ | setTimeout | bgColor、charAt() |
| ウィンドウ | 019 | ページを一定時間ごとに読み込む | setTimeout | reload() |
| ウィンドウ | 020 | 前のページに戻る | - | history.back() |
| フレーム | 021 | フレームにURLを読み込む | リンク、ボタン | parent、location |
| フレーム | 022 | フレームのコンテンツを変える | ボタン | parent、write()、bgColor、src |
| フレーム | 023 | インラインフレームを操作する | リンク | iframe、location、backgroundColor |
| フォーム | 024 | フォームの入力内容を読む | onsubmit | form、checked、selectedIndex、value、confirm() |
| フォーム | 025 | フォームを初期設定する | onload | form、checked、selected |
| フォーム | 026 | フォーム送信前にチェックする | onsubmit | form、checked、selected |
| フォーム | 027 | メールアドレスをチェックする | onsubmit | form、test() |
| フォーム | 028 | フォームの内容が変わったら自動計算する | onchange | form、value |
| フォーム | 029 | ユーザーに内緒でサーバーに情報を送る | - | form、hidden |
| フォーム | 030 | 指定の入力欄にカーソルを自動的に移動する | - | form、focus() |
| フォーム | 031 | フォームの最初の入力で次の入力欄を制御する | - | form、focus()、backgroundColor |
| フォーム | 032 | 全角／半角の入力モードを切り替える | onfocus | imeMode |
| フォーム | 033 | ボタンの文字や色を変える | リンク、ボタン | form、value、backgroundColor |
| テキスト | 034 | 文字の表示スタイルを変える―1 | onmouseover | color、fontSize、fontWeight |
| テキスト | 035 | 文字の表示スタイルを変える―2 | onmouseover | color、fontSize、fontWeight、fontFamily、fontStyle |
| テキスト | 036 | 文字にアンダーラインを引く | onclick | textDecoration |
| テキスト | 037 | キーワードの文字を強調する | ボタン | color、fontWeight |
| テキスト | 038 | 文字を順番に表示する | onclick | display |
| テキスト | 039 | 文字を自動的に順番に表示する | - | TIME2ビヘイビア |
| テキスト | 040 | 文字の透明度を変える | ボタン | alphaフィルター |
| テキスト | 041 | 文字がズームアウトしてくる | setInterval | fontSize |
| テキスト | 042 | 文字を自動的に指定位置まで動かす | - | TIME2ビヘイビア、ANIMATEMOTION |
| テキスト | 043 | ニュース番組っぽいタイトルアニメーション | - | TIME2ビヘイビア、ANIMATEMOTION |
| テキスト | 044 | テキストの色を変える | ボタン | color |
| テキスト | 045 | 文字の縦書きと横書きを切り替える | ボタン | writingMode |
| テキスト | 046 | 画面をまるごと回転させる | onload | マトリックスフィルター |
| テキスト | 047 | 自動的に目次を作る | - | DOM、getElementById()、getElementsByTagName()、appendChild()、createTextNode()、nodeValue |
| テキスト | 048 | PowerPoint風に文字を表示する | onload | DOM、getElementById()、left |
| テキスト | 049 | 正規表現を使ったページ内検索 | ボタン | 正規表現、RegExp、DOM、getElementById()、replace() |
| テキスト | 050 | ゴムのようにのびる文字 | onmousemove | split()、event.clientX、event.clientY、left、top、pixelLeft、pixelTop |
| テキスト | 050-TIPS | ゴムのように伸びる文字（ON/OFFできる） | onmousemove | split()、event.clientX、event.clientY、left、top、pixelLeft、pixelTop |
| テキスト | 051 | 爆発してバラバラになる文字 | onclick | alphaフィルター、left、top、pixelLeft、pixelTop |
| テキスト | 052 | XMLデータを表示する | ボタン | XML、DOM、selectNodes()、selectSingleNode()、createElement()、createTextNode()、setAttribute() |
| テキスト | 053 | ページを編集可能にする | ボタン | contentEditable |
| テキスト | 054 | カーソルの形を変える | onmouseover、ボタン | cursor |
| メッセージ | 055 | 警告ダイアログでメッセージを出す | リンク、ボタン、onmouseover | alert() |
| メッセージ | 056 | 確認ダイアログでメッセージを出す | ボタン | confirm() |
| メッセージ | 057 | 確認ダイアログでクイズを出す | ボタン | confirm() |
| メッセージ | 058 | プロンプト画面でクイズを出す | ボタン | prompt() |
| メッセージ | 059 | モーダルダイアログでメッセージを出す | ボタン | モーダルダイアログ、showModalDialog() |
| メッセージ | 060 | モードレスダイアログでメッセージを出す―1 | ボタン | モードレスダイアログ、showModelessDialog() |
| メッセージ | 061 | モードレスダイアログでメッセージを出す―2 | ボタン | モードレスダイアログ、showModelessDialog() |
| メッセージ | 062 | モードレスダイアログでメッセージを出す―3 | ボタン | モードレスダイアログ、showModelessDialog() |
| メッセージ | 063 | メッセージを新規ウィンドウで出す | リンク | open()、write() |
| メッセージ | 064 | 便利なポップアップメニューを使う | onclick | ポップアップ、display |
| メッセージ | 065 | マウスオーバーするとポップアップで説明する | onmouseover | ポップアップ、createPopup()、show() |
| メッセージ | 066 | 右クリックでコンテキストメニューを出す | onclick | コンテキストメニュー、display |
| メッセージ | 066-TIPS | F1キーを押すとヘルプ画面が出る | F1キー、onhelp | alert() |
| テーブル | 067 | １行おきに色を付けてテーブルを見やすくする | onload | backgroundColor |
| テーブル | 068 | テキストデータからテーブルをつくる | ボタン | データバインディング、recordset、MoveNext()、MovePrevious() |
| テーブル | 068-TIPS | HTMLファイルをデータバインドする | ボタン | データバインディング、DATAFORMATAS="html" |
| テーブル | 069 | 行がハイライトするテーブル | onmouseover | backgroundColor |
| テーブル | 070 | テーブルをソートできるようにする | onclick | DOM、getElementsByTagName()、getElementById()、childNodes[]、firstChild |
| テーブル | 070-TIPS | 昇順、降順を選んでソートする | onclick | DOM、getElementsByTagName()、getElementById()、childNodes[]、firstChild |
| テーブル | 071 | 列の順番が変更できるテーブル | ボタン | DOM、getElementById()、getElementsByTagName()、removeChild()、appendChild() |
| イメージ | 072 | 画像の上にマウスがきたらメッセージを表示する | onmouseover | alert() |
| イメージ | 072-TIPS | 確認してから違うページに飛ぶ | onmouseover | confirm() |
| イメージ | 073 | クリッカブルマップと連携させる | onclick | クリッカブルマップ |
| イメージ | 074 | ボタンで画像のサイズ変更 | ボタン | width、height |
| イメージ | 075 | 伸縮する画像 | onmouseover、onmouseout | height |
| イメージ | 076 | 画像を指定位置に自動的に移動させる | onload | pixelLeft、pixelTop |
| イメージ | 077 | 画像を動かして作るスタイリッシュアナログ時計 | setInterval | clientWidth、clientHeight、pixelLeft、pixelTop |
| イメージ | 078 | 画像がマウスを追いかけて動く | onmousemove | event.x、event.y、pixelLeft、pixelTop |
| イメージ | 079 | 画像をキーで動かす | onkeydown | keyCode、pixelLeft、pixelTop |
| イメージ | 080 | 画像を重ねる順番を変更する | onclick | zIndex |
| イメージ | 081 | 画像を入れ替える | リンク | Image、src |
| イメージ | 082 | パラパラアニメ | ボタン、setTimeout | Image、src |
| イメージ | 083 | TIMEビヘイビアで画像とテキストを順番に表示 | - | TIMEビヘイビア |
| イメージ | 084 | displayで順番に画像と文字を表示する | onclick | display |
| イメージ | 085 | 画像のクリッピング | onclick | clip |
| イメージ | 086 | 画像にスポットライトを当てる | - | lightフィルター |
| イメージ | 087 | 画像の透明度を変える | ボタン | alphaフィルター |
| イメージ | 088 | シルエット画像からカラー画像に切り替える | onload | alphaフィルター、pixelLeft、pixelTop |
| イメージ | 089 | マウスが乗るとカラー画像に変わる | onmouseover、onmouseout | Image、src |
| イメージ | 090 | 画像をプルダウンメニューでズーム | onchange | zoom |
| イメージ | 091 | サムネイル画像のズーム | onmouseover、onmouseout | zoom |
| イメージ | 092 | 画面に雪を降らせる | setInterval | pixelLeft、pixelTop |
| イメージ | 093 | 画像が透明になって文字が見えてくる | ボタン | alphaフィルター |
| イメージ | 094 | 画像を使ったボタン | onclick | alphaフィルター |
| イメージ | 095 | 押すと消えるボタン | onclick | Fadeトランジッション |
| イメージ | 096 | 画像の上にマウスが乗ると半透明の説明が浮き出る | onmouseover、onmouseout | visibility |
| イメージ | 097 | ウィンドウ全体にグラデーションをかける | - | gradientフィルター |
| イメージ | 098 | 画像を浮き立たせる | ボタン | shadowフィルター |
| イメージ | 099 | ホイールマウスで画像がズーム | onmousewheel | wheelDelta |
| イメージ | 100 | 勝手に動く画像 | setInterval | setExpression() |
| イメージ | 101 | フェードして２つの絵を取り替える | onclick | Fadeフィルター |
| イメージ | 102 | ブラインドが開くように画像を入れ替える | onclick | Blindsフィルター |
| イメージ | 103 | 風車のように画像を取り替える | ボタン | CrWheelフィルター |
| イメージ | 104 | ドアが開くように画像を段階的に表示する | ボタン | TIME2ビヘイビア、barndoorWipeトランジッション |
| イメージ | 105 | 引き戸のように画像を段階的に表示する | ボタン | TIME2ビヘイビア、barnWipeトランジッション |
| イメージ | 106 | 時計回りに画像を段階的に表示する | ボタン | TIME2ビヘイビア、clockWipeトランジッション |
| イメージ | 107 | 円形で画像を段階的に表示する | ボタン | TIME2ビヘイビア、ellipseWipe |
| イメージ | 108 | フェードして画像を段階的に表示する | ボタン | TIME2ビヘイビア,Fadeトランジッション |
| イメージ | 109 | 扇形に画像を段階的に表示する | ボタン | TIME2ビヘイビア、fanWipeトランジッション |
| イメージ | 110 | アイリスオープンで画像を段階的に表示する | ボタン | TIME2ビヘイビア、irisWipeトランジッション |
| イメージ | 111 | プッシュアウトして画像を横から表示する | ボタン | TIME2ビヘイビア、pushWipeトランジッション |
| イメージ | 112 | 画像を横から段階的に表示する | ボタン | TIME2ビヘイビア、slideWipeトランジッション |
| イメージ | 113 | スネークワイプで画像を段階的に表示する | ボタン | TIME2ビヘイビア,snakeWipeトランジッション |
| イメージ | 114 | スパイラルワイプで画像を段階的に表示する | ボタン | TIME2ビヘイビア、spiralWipeトランジッション |
| イメージ | 115 | 星形ワイプで画像を段階的に表示する | ボタン | TIME2ビヘイビア、starWipeトランジッション |
| イメージ | 116 | SVGで図形とテキストを描く | onload | SVG |
| イメージ | 117 | SVGでボールを変形させる | onload | SVG、setAttribute() |
| イメージ | 118 | SVGの図形をスクリプトで変更する | onclick | SVG、setAttibute() |
| イメージ | 119 | 図形を回転させる | onload | SVG、rotate() |
| イメージ | 120 | SVG図形を変形させる | onload | SVG、skew() |
| イメージ | 121 | SVG図形で波を描く | onload | SVG、ベジェ曲線 |
| 数値 | 122 | 表計算をする | onchange | form、value |
| 数値 | 123 | 複雑な計算をする | ボタン | form、value、Math.pow |
| 数値 | 124 | 乱数を利用する | ボタン | Math.random() |
| 数値 | 125 | 100時間後の日にちと曜日を計算する | - | Date()、getMilliseconds()、setMilliseconds() |
| 数値 | 126 | 目的の日までの残り日数を表示する | - | Date()、getTime()、setTime()、cookie,prompt() |
| 数値 | 127 | 日付から曜日を調べる | - | prompt()、Date、getDay() |
| 数値 | 128 | 数値データからグラフをつくる | ボタン | form、value、width |
| データ&ファイル | 129 | Cookieを使ってデータを保存する | - | cookie |
| データ&ファイル | 130 | UserDataビヘイビアでデータを保存する | - | UserDataビヘイビア |
| データ&ファイル | 131 | Excelファイルの読み込み | - | CSVファイル |
| データ&ファイル | 132 | テキストファイルに書き出す | ボタン | ActiveX |
| データ&ファイル | 133 | テキストファイルを読み込む | ボタン | ActiveX |
| データ&ファイル | 134 | スクリプトで「お気に入り」に登録する・ホームに指定する | onclick | homepageビヘイビア |
| データ&ファイル | 135 | Excelファイルを作る | onclick | ActiveX |
| データ&ファイル | 136 | Wordファイルを作る | onclick | ActiveX |
| 動画・サウンド | 137 | FLASHムービーの再生・停止・巻き戻し | onload | swf、Play()、Stop()、Rewind() |
| 動画・サウンド | 138 | サウンドの再生・停止・巻戻し | ボタン | play()、stop()、pause() |
©2003 KATSUMI KAWASAKIここで使用した写真素材は5memoripsから許可をいただいて借用いたしました。写真の著作権は全て篠崎柚さんにあります。
5memorips
