JavaScriptでリンクをランダムに表示する方法

JavaScript

あーりーです。

趣味でのんびりとJavaScriptの勉強をしています。

勉強というよりは、楽しんでいます。

 

先日は「JavaScriptで文字をランダムに表示する方法」について書きました。

ぼくがJavaScriptの勉強をはじめた1カ月前に、「JavaScriptでこんなことができるようになるとイイなぁ~」とイメージしていたことの一つが、このランダムという機能です。

 

ランダムに文字を表示する。

ランダムにリンクを作る。

ランダムに画像を表示する。

 

これができれば、ブラウザ画面の表示にいろんな幅や可能性が出てきますよね。

ゲーム性や意外性も生まれます。

 

というわけで。

今回のテーマは「ランダムにリンクを作る」です。

ランダムにリンクを作る

ブラウザ上で文字をクリック(またはタップ)すると、別のページに飛ぶ機能があります。

リンクです。

 

ページが読み込まれるときに、毎回同じリンクじゃなくて、ランダムにリンクが表示されたら面白いですよね。

今回はそれをやってみます。

 

こちらです。

<html>
<head>
</head>
<body>

<script>
var a=[];
a[0]="<a href='URL1'>あ</a>";
a[1]="<a href='URL2'>い</a>";
a[2]="<a href='URL3'>う</a>";
var x;
x=Math.floor(Math.random()*3); 
document.write(a[x]);
</script>

</body>
</html>

※HTMLの部分は究極にあっさりと書いています。

 

緑色の部分がJavaScriptです。

実行結果

上の内容をメモ帳などのエディタにコピペして、URL1、URL2、URL3の部分を実際のリンク先のURLに変更し、HTML形式で保存します。

 

保存したファイルを開くと…

「あ」「い」「う」のうち、どれか一文字がブラウザに表示されます。

 

文字をクリックすると、それぞれのリンク先へ飛びます。

解説

仕組みは「文字をランダムに表示する方法」と同じです。

「文字」の部分が、リンクに変わっただけです。

 

では、1行ずつ詳しく見ていきますね。

空の配列

まず…

この行で「a」という空の配列を作っています。

var a=[];

 

空の配列について詳しくは、過去記事の「空の配列とは」をご覧ください。

配列にリンクを代入

つぎに…

さっき作った「a」という配列に、リンクを代入しています。

 

それがこちら。

a[0]="<a href='URL1'>あ</a>";
a[1]="<a href='URL2'>い</a>";
a[2]="<a href='URL3'>う</a>";

 

「あ」「い」「う」が画面に表示される文字です。

 

URL1、URL2、URL3は、それぞれのリンク先のURLを表わしています。

この部分は、実際に飛びたいURLに書き換えます。

ダブルクォートとシングルクォート

ここでは、リンクのタグを丸ごと、ダブルクォートで囲んで(挟んで)います。

赤い部分がダブルクォートです。

a[0]="<a href='URL1'>あ</a>";
a[1]="<a href='URL2'>い</a>";
a[2]="<a href='URL3'>う</a>";

 

通常、リンクのタグの中にもダブルクォートがありますよね。

でも、今回はリンクのタグ内でダブルクォートが使えません。

 

なぜなら…

上で赤く示したように、すでに全体の囲みのところで使ってしまっているからです。

 

そんなときは、かわりにシングルクォートを使います。

URLを囲っている赤い部分がシングルクォートです。

a[0]="<a href='URL1'>あ</a>";
a[1]="<a href='URL2'>い</a>";
a[2]="<a href='URL3'>う</a>";

ランダムな整数を作る

つづいて…

この行で、これから「x」という変数を使いますよ~と宣言しています。

var x;

 

さらに…

この行で「0」から「2」までのランダムな整数を作って、変数「x」に代入しています。

x=Math.floor(Math.random()*3); 

 

よく見ると、赤い部分で「3」をかけています。

x=Math.floor(Math.random()*3); 

 

3」をかけることで、「2」が最大値になります。

なぜそうなるのか、詳しくは過去記事の「JavaScriptでランダムな数字の最大値を決める仕組み」をご覧ください。

ランダムな整数に応じてリンクを表示

最後に…

この行で、ランダムにリンクを表示しています。

document.write(a[x]);

リンクが表示される仕組み

document.write(文字); が文字を表示する命令です。

今回は、表示する文字として a[x] が設定されています。

 

ところで。

 

a[x] って何?

という話なんですが…

 

これは、「a」という配列の「x」番目の内容という意味です。

何番目

a」という配列は、さっき登場しましたよね。

 

a」という配列の何番目に何が入っているかは、さっき出てきたこの部分を見るとわかります。

赤い部分が、何番目かを表わしています。

a[0]="<a href='URL1'>あ</a>";
a[1]="<a href='URL2'>い</a>";
a[2]="<a href='URL3'>う</a>";

※順番は「1」番目からではなく「0」番目から始まります。

 

つまり…

a」という配列の「0」番目に入っている内容とは、以下の赤い部分です。

a[0]="<a href='URL1'>あ</a>";
a[1]="<a href='URL2'>い</a>";
a[2]="<a href='URL3'>う</a>";

 

a」という配列の「1」番目に入っている内容とは、以下の赤い部分です。

a[0]="<a href='URL1'>あ</a>";
a[1]="<a href='URL2'>い</a>";
a[2]="<a href='URL3'>う</a>";

 

a」という配列の「2」番目に入っている内容とは、以下の赤い部分です。

a[0]="<a href='URL1'>あ</a>";
a[1]="<a href='URL2'>い</a>";
a[2]="<a href='URL3'>う</a>";

 

さっき、「0」から「2」までのランダムな整数を作りました。

その結果が変数「x」に代入されています。

 

x」は、ランダムです。

ときには「0」であり、ときには「1」であり、ときには「2」です。

 

そのため、「a」という配列の「x」番目を表示すると、ランダムなリンクが画面に現れるわけです。

今回のポイント

以上が、リンクをランダムに表示する方法です。

 

仕組みは、先日の「JavaScriptで文字をランダムに表示する方法」と一緒ですが、今回のちょっとしたポイントとして以下のことを覚えておくと、何かの役に立つかも知れません。

  • タグも丸ごと変数に代入できる
  • ダブルクォートが使えないときはシングルクォート

 

ではでは。

今回はこれでおしまい~。

 

JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。

タイトルとURLをコピーしました