Java Script
|
HPで使えるJava Scriptの講座とサンプル集です。興味の有る方はご覧下さいませ〜(^^) |
|
| |
|
| |
| ＃はじめに | ＃あとがき |
| ＃来客者の情報表示 | ＃ボタンを使ってみよう |
| ＃ステータスバーで遊ぶ | ＃文字を使って遊ぶ |
| ＃画像、音声で色々と | ＃ロードした時に |
| ＃フォームを使って色々と | ＃その他のスクリプト |
|
| |
|
一応動作確認はしてますが、ここのサンプルを使用して不都合等が発生しても、
俺は一切責任を負いません。自己の責任で使用して下さい。 スクリプトに関しての質問、またはリクエストは 相談BBSか MAILにて受け付けてます。 | |
| ＃訪問客の情報表示 |
| ブラウザー、ＯＳを調べる |
| 訪問客の使用ブラウザー、バージョン、そしてＯＳの種類を表示します。 あまり役に立たない気がする・・・（笑） |
| 未対応ブラウザーに警告 |
| スクリプトに対応していないブラウザーVerの場合、ページを読み込んだ時点で警告します。 やはりあまり役に立たない気がする（笑） |
| 何処から来たか表示 |
| 訪問者が何処から来たのか表示します。ソコソコ使い道はあるかもね。ほらほら、 ちょっとした遊びに使う・・・とかね（＾＾； |
| ＃ボタンを使ってみよう |
| ボタンで警告 |
| ボタンを押すとメッセージが出ます。使い道としては・・・・訪問客への挨拶とか。 ううう・・・どう使おう？ |
| ボタンで戻る |
| ボタンを押すと前のページに戻る様にするものです。応用としてリロードもあり。 これは使う時はあるかも知れないね。 |
| ボタンで確認 |
| ボタンを押すと確認ダイアログを表示します。う〜ん、やはり遊びに使うとか・・・。 役に立つとは言い難いね（笑） |
| ボタンで確認＋リンク |
| 上のスクリプトにリンク機能をプラスした物です。これは結構便利・・・かも知れない（笑） まぁ使ってみて下さい。 |
| ボタンで入力 |
| ボタンを押すと入力ダイアログを表示します。う〜ん、使い道としては、 クイズに使うとかかな？それしか無いとも言う。 |
| ボタンで入力＋隠し部屋へ |
| ボタンを押すと入力ダイアログを表示します。そこにパスワードを入力すると、隠し部屋へ。 サーバによっては禁止の場合も（＾＾； |
| ＃ステータスバーで遊ぶ |
| ステータスバーにメッセージ |
| ステータスバーに順番にメッセージを表示します。ちょっとしたＨＰの飾り付けに如何ですか〜？（笑） |
| ステータスバーにメッセージ２ |
| これもステータスバーにメッセージを表示します。こっちはタイプライターみたいな感じに表示します。 |
| ステータスバーにメッセージ３ |
| 電光掲示板にかなり近いです。右から左に文字がスクロールするワケですな。 駅とかで見かけるね（笑） |
| ステータスバーにメッセージ４ |
| 文字に触れるとステータスバーにメッセージを表示するっす。リンク先の説明する時に便利・・・かな？ |
| ＃文字を使って遊ぶ |
| 文字クリックで警告 |
| 文字をクリックするとメッセージを表示するっす。使い道は・・・説明する時くらいしか使えん！（笑） |
| 文字クリックで確認 |
| 文字をクリックすると確認ダイアログを表示します。使い道は・・・ う〜ん・・・マジで使い道ナッシング！（笑） |
| 文字クリックで確認２ |
| 文字をクリックすると確認ダイアログを表示。そしてＯＫを選ぶとリンク先へＧＯ！ これは少しは使えそう・・・。 |
| 文字に触れると警告 |
| 文字に触れるとメッセージを表示。使い方は・・・う〜ん・・・解らん。 トラップとかに如何？（笑） |
| 文字から離れると警告 |
| 文字から離れるとメッセージを表示。嫌がらせか、これは（笑） これと上のを合体したのが下のスクリプト。 |
| 文字に触れても離しても警告 |
| どっちにしろメッセージを表示。これはある意味使い道多いかもね。 可愛らしいイタズラとかにね（笑） |
| 文字に触れると確認 |
| 文字に触れると確認ダイアログ表示。あまり使い道無い様な気が・・・。 でもまぁ良いか（笑） |
| 文字に触れると確認２ |
| 文字に触れると確認ダイアログ表示。ＯＫを選ぶとジャンプ。 考えれば使い道は色々あるハズ！（多分・・・） |
| 文字に触れるとリンク |
| 文字に触れるとリンク先に吹っ飛ばされます。恐ろしい・・・。 ふふふ・・・地雷しかけるかい？（ニヤリ） |
| 文字を動く様にする |
| 画面上を文字が動きます。しかし、ブラウザーによっては動かない場合あり。 ちっとした飾り、かな？（＾＾； |
| フォントサイズ変更 |
| 表示されている文章のフォントサイズを変更します。小説とかアップしてるＨＰでは 結構便利かもね。ちなみにIE専用（＾＾） |
| フォントカラー変更 |
| 上のとは違い、文章のフォントカラーを変更します。これも小説とかアップしてるＨＰでは 結構使えるかもね。これもIE専用です（NNの方ごめん！） |
| フォントサイズ＆カラー変更 |
| 上の２つの合成バージョン！なら上のはいらないじゃん、とかってツッコミは・・・ 却下ぁぁぁぁ！！（お願い（笑）） |
| ＃画像、音声で色々と |
| 画像を切り替える |
| ボタンを使用して画像を切り替えるっす。画像を多く使ってるＨＰには便利っす。 使ってみては如何？ |
| 画像に触れると切り替え |
| 画像に触ると切り替わります。通常時、触れた時、離した時、と３通りに変化します。 スイッチみたいになるね。 |
| 画像を一定時間で切り替え |
| 一定時間で画像が切り替わります。やり方によっては簡単なアニメーションを作れるかもね。 使い方はご自由に！（＾＾） |
| 画像を選んで切り替え |
| プルダウンメニューで選んだ画像に切り替えます。イラストを複数載せる場合に便利。 スペースを大切にね！Ｂｙでん子（違） |
| 画像をランダムで表示 |
| ランダムで画像が表示されます。ＴＯＰページの画像とかに使うと良いかもね。 いつも違う画像をプレゼント！（笑） |
| 音楽を選択して再生 |
| プルダウンメニューで選択した音楽を流せます。というよりダウンロードします。 素材屋向け、かなぁ？（＾＾； |
| 音楽をランダムで再生 |
| ランダムでＢＧＭが流れます。訪問者に色々な曲を聞かせたい時に使うと便利っす。 まぁほどほどに、ね（笑） |
| 音楽をコントロールする |
| 流れてるＢＧＭをコントロールします。ボリューム、再生、停止とか色々出来ます。 聴きたい時に聴くってのが一番かな？ |
| 画像に触れると音楽再生 |
| 画像に触れるとダウンロード・・・。う〜ん・・・使い道有るのか？これ・・・。 はははは！！忘れよう（オイ） |
| 画像に触れると音楽再生２ |
| 画像に触れると音楽再生の第２弾。相変わらず使い道は不明。これの使い方は任せた！！ さぁ使ってくれたまへ（笑） |
| 画像を好きなとこに置く |
| 画像を好きなとこにおける様にします。作ったのは良いけど、 あまり意味は・・・無いだろうなぁ（＾＾； |
| 画像をフェードイン |
| 画像をフェードインします。スタイルシート使用してます。対応ブラウザはIE5.0以降のみ！ NNの方ゴメンナサイ（＾＾； |
| 画像をフェードイン+ランダム表示 |
| 画像のランダム表示とフェードインを組み合わせたScriptです。とある方のリクエストで作成。 如何でしょうか？(ﾟДﾟ) |
| 画像をフェードイン+ボタンで切り替え |
| 画像のフェードイン表示と順番で切り替えをボタン制御にしたScriptです。これもリクエストで作成。 如何？(ﾟДﾟ) |
| 画像をフェードアウト |
| 画像をフェードアウトします。こちらもスタイルシート使用してます。対応ブラウザは上と同じです。（＾＾； |
| 画像を一定時間で切り替え+フェードイン&アウト表示 |
| 画像の一定時間で切り替えをフェードインとフェードアウトと共に行います。これもとある方のリクエストで作成です。 |
| 画像を動かす |
| 画像を動かすスクリプトです。これは左右の動きのみです。ボタンで制御してます。 そしてまたIEのみ対応（＾＾； |
| 画像を動かす２ |
| 画像を動かすスクリプトの改良版です。数値指定で複雑な動きが可能。 しかし・・・スクリプトも複雑に・・・。（＾＾； |
| 画像のサイズ変更 |
| 画像のサイズを変更しますよ〜！意外に使い道は多いんじゃないかな？まぁ有効に使って下せぇ（笑） |
| 画像のサイズ変更２ |
| 画像のサイズ変更の改良版！こちらは画像をクリックすると拡大！えっ？だったら上のは いらないじゃんって？だってサンプル多いと見栄えが・・・（笑） |
| ＃ロードした時に |
| ロード直後に警告 |
| ページを読み込んだ直後にメッセージを表示。訪問客に挨拶するのに使えると思うよ。 さぁ挨拶挨拶！（笑） |
| ページ移動時に警告 |
| ページを移動する時にメッセージを表示します。こちらはお別れの挨拶に使えるかな？ 使いたい方はどうぞ〜。 |
| どっちでも警告 |
| ページを読み込んだ直後、移動する時にメッセージを表示。上の二つのスクリプトの合体です。 両方で挨拶！ってね（＾＾） |
| ロード時に確認 |
| ページを読み込んだ直後に確認ダイアログを表示。見るかどうかの選択権は相手にあり！とかね。 使うかい？ |
| ロード後に自動で移動 |
| ページを読み込んだ直後に勝手に移動します。ＨＰ移転した場合に使えるね。 他にも方法はあるけど、これで行こう！（笑） |
| フェードイン |
| ページ読み込み直後にフェードインします。 ＨＰにちょっとしたアクセントをつけてみませんか？（笑） |
| フェードイン２ |
| フェードインサンプル２つ目。こちらは応用としてフェードアウトもあるっす。 こっちは一瞬で変化。さぁ使ってみよう！ |
| 一定時間後に警告 |
| ページを読み込んで一定時間経つと警告。ま〜た使い道不明な物を作ったよ（笑） まぁ、使い方は自由！というより解らん！（爆） |
| ＃フォームを使って色々と |
| フォームにメッセージ |
| フォームにメッセージを表示します。テキストエリアをそのまま使った方が・・・。 う〜んイマイチ（苦笑） |
| フォームに順番にメッセージ |
| フォームに順番にメッセージを表示します。 ステータスバーに表示のソースを少し変えただけです（手抜き） |
| フォームに流れるメッセージ |
| フォームにメッセージを流します。こちらもちょっとした応用です。 電光掲示板ってか〜？（んな豪華なモンじゃない） |
| 時間毎に変わるメッセージ |
| フォームのメッセージを時間毎に変更しま〜す。時間は任意に設定可能。 朝昼晩のご挨拶！ってね（＾＾） |
| フォームに日時表示 |
| フォームに現在日時を表示します。リアルタイムに表示ですよ〜。 今回は曜日表示もサービス！（笑） |
| フォームにランダムで表示 |
| フォームにランダムでメッセージを表示します。使い道は・・・おみくじ位か？ というワケで、おみくじでＧＯ！（そして大凶・・・ぐはっ） |
| フォームで背景色変更 |
| フォームに好きな色を入力して背景色を変えます。結構便利です。 ＨＰを好きな色で閲覧してね！ってか？（笑） |
| フォームで計算 |
| フォームで計算をします。使い道は不明です（笑）う〜ん、通販サイトの見積もりなら、 使い道として良いけどねぇ・・・（＾＾； |
| フォームで計算２ |
| フォームで計算をします。こちらは応用すれば使い道は無限かも（笑） 楽しい使い方をしようね！ |
| ＃その他のスクリプト |
| プルダウンメニューでリンク |
| プルダウンメニューでリンク先を選択します。リンク先が多い人には便利かもね。 省スペース・・・という事に。 |
| 日付けカウントダウン |
| 目的の日付けまでカウントダウンします。イベント開催期日までカウントするってのも良いかもね。 如何ですか？ |
| 背景画像変更 |
| 背景の画像を変更出来る様にします。訪問客に選んで貰おう！！ところで、壁紙持ってるかい？ 俺は・・・持ってなかったし（黒ばっか） |
| インラインフレーム制御 |
| インラインフレームの制御をします。結構便利なスクリプトですね。 ＨＰの表示形式としての使用も良いかも（＾＾） |
| 右クリック禁止 |
| 右クリックを禁止します。ソース見られるのが嫌な時、画像のコピー防止等に使用 出来ます。まぁ完璧では無いですけどね（＾＾； |