Home > イヌでもわかるJavaScript講座 お品書き
イヌでもわかるJavaScript講座 お品書き へ戻ります
イヌでもわかるJavaScript講座


Step.62 - ランダムにリンクする


リンク用コンボボックスと、乱数を使ってランダムにリンクするボタンを作ってみます。


Step テーマ
● とくになし

実行例




リスト


<script type="text/javascript"><!--
myTable = new Array(// リンク先の登録
"hajimeni.htm",// はじめに のアドレス
"step1.htm",// Step.1 のアドレス
"aisatu.htm",// Step.2 のアドレス
"getdate.htm",// Step.3 のアドレス
"function.htm"// Step.4 のアドレス
);
 
function myGo(){// コンボボックスからリンク先を選択した
     mySelect = document.myForm.myMenu.selectedIndex;// 選択した番号を取得
     if(mySelect!=0) location.href = myTable[mySelect-1];// 選択した所へリンク
}
 
function myRndLink(){// ランダムリンクを選択した
     myRnd = Math.floor( Math.random() * myTable.length );// 0〜(URLの数-1)の乱数を求める
     location.href = myTable[myRnd];// リンクする
}
// --></script>
<form name="myForm">
<select name="myMenu" size="1" onchange="myGo()">
<option>★☆★☆リンク先を選んでください☆★☆★</option>
<option>はじめに </option>
<option>Step.1 いきなりJavaScriptを使ってみましょう </option>
<option>Step.2 あいさつ文を表示してみましょう </option>
<option>Step.3 現在の日付と時間を表示してみましょう </option>
</select>
<input type="button" value="ランダム リンク!" onclick="myRndLink()">
</form>


サンプルだけの HTMLは こちらへ

説明


今回のサンプルは、
Step.26 「コンボボックスを使って、目次を作りましょう その2」 と、
Step.61 「ランダムリンクボタンを作ってみましょう」 を、セットにしたものです。

つまり、コンボボックスから、任意のリンク先を選ぶこともできるし、ランダムボタンでリスト内のいずれかを ランダムに選択してリンクできるようにしたものです。

myTable のURLは、コンボボックス選択、ランダムボタンの両方で使います。
よって、このテーブルのURLの並びは、<OPTION>タグの並びと同じでなければ いけません。

コンボボックスの第1テーブルは、「★☆★☆リンク先を選んでください☆★☆★」という、リンク先のないタイトルにしました。
ですから、myGo()内の、
if ( mySelect != 0 ) location.href = myTable[mySelect-1];
つまり、mySelect が 0 の場合は 上のタイトルを選択した場合なので、スルーするようにしています。
mySelect を 1 引いているのは、タイトルが余分にテーブルにいるので、1 を引いて、myTable の番号にあわせています。


参考ステップ
Step.7 履歴移動ボタンをつくってみましょう ※ location.href
Step.13 リンク先を新しいウィンドウで表示してみましょう ※ window.open
Step.14 九九の問題に答えてみましょう ※ Math.random
Step.25 プルダウンメニューを使って目次を作りましょう その1  ※ コンボボックス
Step.26 プルダウンメニューを使って目次を作りましょう その2  ※ コンボボックス
Step.61 ランダムリンクボタンを作ってみましょう 


 
イヌでもわかるJavaScript講座 お品書き へ戻ります