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

シェアする

  • このエントリーをはてなブックマークに追加
  • 0

あーりーです。

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

A8 JavaScript

おまけ

JavaScriptを一人で勉強していてわからないことがあれば、teratailで質問することをおすすめします。

プログラミングに特化したYahoo!知恵袋のようなサイトです。

超・初心者のぼくにも優しく教えてくれました。

とても感謝しています。

関連記事コンテンツ



シェアする

  • このエントリーをはてなブックマークに追加

フォローする

自己紹介

あーりーと申します。アクセスありがとうございます。布団でぬくぬくしながら本を読んだりスマホでテレビを見たり、のんびり過ごすのが好きです。

ブログ村

ブログランキング・にほんブログ村へ

グロースファクター 毛髪再生