あーりーです。
趣味でのんびりと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入門」にまとめてあります。よろしければご覧ください。
