...

サンプル・コレクション

カバーイメージ ※本ページはソーテック社発行の書籍「使える!JavaScriptサンプルブック」購入者のためのものです。サンプルは書籍内容をマスターする目的のみ使用することができ、他の用途での使用・配布は一切禁止します。また、これらサンプルを実行した結果については著者、(株)ソーテック社は一切の責任を負いかねます。全てお客様の責任において御利用くださいますようお願いいたします。購入者以外の御利用はご遠慮ください。

ここで使用している全ての写真素材ファイルの著作権は篠崎柚さんにありますが、本書を学習する目的では報告や許可を必要とせず自由に使用できます。 しかし、他の目的での写真使用に関しては篠崎柚さんのページ「5memorips-photograghic」のフリー写真素材の利用規約をお守りください。

アマゾンで購入 7&Yで購入 ブックサービスで購入

ソースのダウンロード

Windows用
(zip形式;約2.18MB)
Macintosh用
(sit形式;約2.20MB)
※ダウンロードしたサンプルファイルの解凍方法がわからない方は以下をご覧ください。
 Windowsをご利用の方はこちら   Macintoshをご利用の方はこちら
カテゴリー SECTION タイトル使用イベント使用プロパティ・メソッド
ブラウザ001エクスプローラとネットスケープを見分ける-appName
ブラウザ002ブラウザバージョンを見分ける-appVersion
ブラウザ003OSを見分ける-platform
ウィンドウ004新しいウィンドウを開くリンクopen()
ウィンドウ005新ウィンドウにURLを読み込むリンクopen()
ウィンドウ006大きさを指定して新しいウィンドウを開くリンクopen()
ウィンドウ007位置を指定して新しいウィンドウを開くリンクopen()
ウィンドウ008新しいウィンドウを後ろに移動するリンクopen()、focus()
ウィンドウ009新しいウィンドウを開き、「閉じる」ボタンを付けるボタンclose()
ウィンドウ009-TIPS時間がきたら自動的にウィンドウを閉じるsetTimeoutclose()
ウィンドウ010ウィンドウのサイズを変えるリンクresizeTo()、resizeBy()
ウィンドウ011新しいウィンドウの位置を動かすリンクmoveBy()、moveTo()
ウィンドウ012新しいウィンドウを常に前に表示するonload、onblurfocus()
ウィンドウ013ウィンドウの背景色を変えるリンクbgColor
ウィンドウ013-TIPSウィンドウの背景色をフェードで変えるリンクbgColor、charAt()
ウィンドウ014サブウィンドウの背景画像を変えるリンクbackground
ウィンドウ015段落の背景画像をダイナミックに表示onmouseover、onmouseoutbackground
ウィンドウ016ステータスバーに文字を流すonload、setIntervalstatus
ウィンドウ017ズームしてくるウィンドウonclickresizeBy()
ウィンドウ018フェードインして現れるウィンドウsetTimeoutbgColor、charAt()
ウィンドウ019ページを一定時間ごとに読み込むsetTimeoutreload()
ウィンドウ020前のページに戻る-history.back()
フレーム021フレームにURLを読み込むリンク、ボタンparent、location
フレーム022フレームのコンテンツを変えるボタンparent、write()、bgColor、src
フレーム023インラインフレームを操作するリンクiframe、location、backgroundColor
フォーム024フォームの入力内容を読むonsubmitform、checked、selectedIndex、value、confirm()
フォーム025フォームを初期設定するonloadform、checked、selected
フォーム026フォーム送信前にチェックするonsubmitform、checked、selected
フォーム027メールアドレスをチェックするonsubmitform、test()
フォーム028フォームの内容が変わったら自動計算するonchangeform、value
フォーム029ユーザーに内緒でサーバーに情報を送る-form、hidden
フォーム030指定の入力欄にカーソルを自動的に移動する-form、focus()
フォーム031フォームの最初の入力で次の入力欄を制御する-form、focus()、backgroundColor
フォーム032全角/半角の入力モードを切り替えるonfocusimeMode
フォーム033ボタンの文字や色を変えるリンク、ボタンform、value、backgroundColor
テキスト034文字の表示スタイルを変える―1onmouseovercolor、fontSize、fontWeight
テキスト035文字の表示スタイルを変える―2onmouseovercolor、fontSize、fontWeight、fontFamily、fontStyle
テキスト036文字にアンダーラインを引くonclicktextDecoration
テキスト037キーワードの文字を強調するボタンcolor、fontWeight
テキスト038文字を順番に表示するonclickdisplay
テキスト039文字を自動的に順番に表示する-TIME2ビヘイビア
テキスト040文字の透明度を変えるボタンalphaフィルター
テキスト041文字がズームアウトしてくるsetIntervalfontSize
テキスト042文字を自動的に指定位置まで動かす-TIME2ビヘイビア、ANIMATEMOTION
テキスト043ニュース番組っぽいタイトルアニメーション-TIME2ビヘイビア、ANIMATEMOTION
テキスト044テキストの色を変えるボタンcolor
テキスト045文字の縦書きと横書きを切り替えるボタンwritingMode
テキスト046画面をまるごと回転させるonloadマトリックスフィルター
テキスト047自動的に目次を作る-DOM、getElementById()、getElementsByTagName()、appendChild()、createTextNode()、nodeValue
テキスト048PowerPoint風に文字を表示するonloadDOM、getElementById()、left
テキスト049正規表現を使ったページ内検索ボタン正規表現、RegExp、DOM、getElementById()、replace()
テキスト050ゴムのようにのびる文字onmousemovesplit()、event.clientX、event.clientY、left、top、pixelLeft、pixelTop
テキスト050-TIPSゴムのように伸びる文字(ON/OFFできる)onmousemovesplit()、event.clientX、event.clientY、left、top、pixelLeft、pixelTop
テキスト051爆発してバラバラになる文字onclickalphaフィルター、left、top、pixelLeft、pixelTop
テキスト052XMLデータを表示するボタンXML、DOM、selectNodes()、selectSingleNode()、createElement()、createTextNode()、setAttribute()
テキスト053ページを編集可能にするボタンcontentEditable
テキスト054カーソルの形を変えるonmouseover、ボタンcursor
メッセージ055警告ダイアログでメッセージを出すリンク、ボタン、onmouseoveralert()
メッセージ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-TIPSF1キーを押すとヘルプ画面が出るF1キー、onhelpalert()
テーブル0671行おきに色を付けてテーブルを見やすくするonloadbackgroundColor
テーブル068テキストデータからテーブルをつくるボタンデータバインディング、recordset、MoveNext()、MovePrevious()
テーブル068-TIPSHTMLファイルをデータバインドするボタンデータバインディング、DATAFORMATAS="html"
テーブル069行がハイライトするテーブルonmouseoverbackgroundColor
テーブル070テーブルをソートできるようにするonclickDOM、getElementsByTagName()、getElementById()、childNodes[]、firstChild
テーブル070-TIPS昇順、降順を選んでソートするonclickDOM、getElementsByTagName()、getElementById()、childNodes[]、firstChild
テーブル071列の順番が変更できるテーブルボタンDOM、getElementById()、getElementsByTagName()、removeChild()、appendChild()
イメージ072画像の上にマウスがきたらメッセージを表示するonmouseoveralert()
イメージ072-TIPS確認してから違うページに飛ぶonmouseoverconfirm()
イメージ073クリッカブルマップと連携させるonclickクリッカブルマップ
イメージ074ボタンで画像のサイズ変更ボタンwidth、height
イメージ075伸縮する画像onmouseover、onmouseoutheight
イメージ076画像を指定位置に自動的に移動させるonloadpixelLeft、pixelTop
イメージ077画像を動かして作るスタイリッシュアナログ時計setIntervalclientWidth、clientHeight、pixelLeft、pixelTop
イメージ078画像がマウスを追いかけて動くonmousemoveevent.x、event.y、pixelLeft、pixelTop
イメージ079画像をキーで動かすonkeydownkeyCode、pixelLeft、pixelTop
イメージ080画像を重ねる順番を変更するonclickzIndex
イメージ081画像を入れ替えるリンクImage、src
イメージ082パラパラアニメボタン、setTimeoutImage、src
イメージ083TIMEビヘイビアで画像とテキストを順番に表示-TIMEビヘイビア
イメージ084displayで順番に画像と文字を表示するonclickdisplay
イメージ085画像のクリッピングonclickclip
イメージ086画像にスポットライトを当てる-lightフィルター
イメージ087画像の透明度を変えるボタンalphaフィルター
イメージ088シルエット画像からカラー画像に切り替えるonloadalphaフィルター、pixelLeft、pixelTop
イメージ089マウスが乗るとカラー画像に変わるonmouseover、onmouseoutImage、src
イメージ090画像をプルダウンメニューでズームonchangezoom
イメージ091サムネイル画像のズームonmouseover、onmouseoutzoom
イメージ092画面に雪を降らせるsetIntervalpixelLeft、pixelTop
イメージ093画像が透明になって文字が見えてくるボタンalphaフィルター
イメージ094画像を使ったボタンonclickalphaフィルター
イメージ095押すと消えるボタンonclickFadeトランジッション
イメージ096画像の上にマウスが乗ると半透明の説明が浮き出るonmouseover、onmouseoutvisibility
イメージ097ウィンドウ全体にグラデーションをかける-gradientフィルター
イメージ098画像を浮き立たせるボタンshadowフィルター
イメージ099ホイールマウスで画像がズームonmousewheelwheelDelta
イメージ100勝手に動く画像setIntervalsetExpression()
イメージ101フェードして2つの絵を取り替えるonclickFadeフィルター
イメージ102ブラインドが開くように画像を入れ替えるonclickBlindsフィルター
イメージ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トランジッション
イメージ116SVGで図形とテキストを描くonloadSVG
イメージ117SVGでボールを変形させるonloadSVG、setAttribute()
イメージ118SVGの図形をスクリプトで変更するonclickSVG、setAttibute()
イメージ119図形を回転させるonloadSVG、rotate()
イメージ120SVG図形を変形させるonloadSVG、skew()
イメージ121SVG図形で波を描くonloadSVG、ベジェ曲線
数値122表計算をするonchangeform、value
数値123複雑な計算をするボタンform、value、Math.pow
数値124乱数を利用するボタンMath.random()
数値125100時間後の日にちと曜日を計算する-Date()、getMilliseconds()、setMilliseconds()
数値126目的の日までの残り日数を表示する-Date()、getTime()、setTime()、cookie,prompt()
数値127日付から曜日を調べる-prompt()、Date、getDay()
数値128数値データからグラフをつくるボタンform、value、width
データ&ファイル129Cookieを使ってデータを保存する-cookie
データ&ファイル130UserDataビヘイビアでデータを保存する-UserDataビヘイビア
データ&ファイル131Excelファイルの読み込み-CSVファイル
データ&ファイル132テキストファイルに書き出すボタンActiveX
データ&ファイル133テキストファイルを読み込むボタンActiveX
データ&ファイル134スクリプトで「お気に入り」に登録する・ホームに指定するonclickhomepageビヘイビア
データ&ファイル135Excelファイルを作るonclickActiveX
データ&ファイル136Wordファイルを作るonclickActiveX
動画・サウンド137FLASHムービーの再生・停止・巻き戻しonloadswf、Play()、Stop()、Rewind()
動画・サウンド138サウンドの再生・停止・巻戻しボタンplay()、stop()、pause()

©2003 KATSUMI KAWASAKI

ここで使用した写真素材は5memoripsから許可をいただいて借用いたしました。写真の著作権は全て篠崎柚さんにあります。

5memorips