Java ScriptとJ Query

乱数が使いたい！　Java Scriptと奮闘中

Java Scriptのお勉強にはいっても、ちょびっとずつしかすすまない、悲しい見習ですが、やっとこさで乱数の利用まできました。

エクセルでもrandom()という関数がありますが、やっぱりありましたJava Scriptにもランダム。うーん、ランダム！

算術計算を扱うMathオブジェクトのひとつとしてrandamメソッドがあります。このメソッドを使うと0以上1未満の乱数を返してくれます。

エクセルといっしょ。これだと、小数点以下のずらーという数字が返されてくるので、このままだと使いにくい。順番とかを決めたり、くじ引きしたり、一定数以内の整数のみで乱数が必要なときが多いです。
学校の席決めとか、福引とか、そういうことしか思い当たらない見習ですが…。

ということで、たとえば100未満の整数の中から乱数がほしいときは、Math.random()で出てきた乱数を100倍してから小数点以下を切り捨てればOKなので、小数点以下切捨てのMath.floorメソッドとあわせて使います。

randomNo=Math.floor(Math.random()*100);

となります。だた、これだと、100という数字が変化した場合に、変更がちょっと面倒かも…。
なので、ここに変数名をつけておきます。乱数を発生させるときの最大数を入れる変数としてMaxNoを作りました。

MaxNo=100;

var randomNo;
randomNo=Math.floor(Math.random()*randomNo);

ただ、これだと、100未満の数字で、100は乱数として発生しません。100以下の整数で乱数がほしい場合は、

MaxNo=100;

var randomNo;
randomNo=Math.floor(Math.random()*(randomNo+1));

となります。

ではではということで、見習、作ってみました。
おススメのサイトへのリンクをランダムに発生します。おススメのサイトは4つなので、0から3までの乱数を生成して、それに応じたサイトへのリンクを書き出します。

<script type="text/javascript">

<!--

numOfSites=4;

var num;

num=Math.floor(Math.random()*numOfSites);

if(num==0){

document.write('<a href="http://yahoo.co.jp/">Yahoo!はいかが？</a>');

}

else if(num==1){

document.write('<a href="http://google.co.jp/">Googleはいかが？</a>');

}

else if(num==2){

document.write('<a href="http://mori.beginners-luck.net/">森歩き日記を見てくれるとうれしい！</a>');

}

else{

document.write('<a href="http://pc.beginners-luck.net/">自称パソプロ計画を見てくれるとうれしい！</a>');

}

// ->

</script>

▼サンプル

もういっこトライしてみました。

ファイル名がimg0.gif、img1.gif、img2.gif、img3.gifという4つの画像ファイルがあります。それらのどれを表示させるか、乱数を使って決めます。

それから、その乱数で発生した数字に応じて、一緒にテキストも書き出すようにしてみました。

それと、別のところでも使えるように、乱数を発生させる関数を独立させて定義してみました。getRandom()という指定の数未満（ここでは4）の乱数を発生させるユーザ定義関数を作成しました。ここで4未満の乱数をmikujinumに代入します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta http-equiv="content-script-type" content="text/javascript">

<meta http-equiv="content-style-type" content="text/css">

<title>気持ちだけ占い</title>

<style type="text/css">

h1,p {

text-align:center;

font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

margin:auto;

}

</style>

<script type="text/javascript">

<!--

function getRandom(){

var num;

num=4;

return Math.floor(Math.random()*num);

}

var mikujinum;

mikujinum=getRandom();

// ->

</script>

</head>

<body>

<h1>今日の運勢かも</h1>

<p>

<script type="text/javascript">

<!--

document.write('<img src="img/mikuji/img',mikujinum,'.gif"></p><p>');

if(mikujinum==0){

document.write('今日はとってもいいことありそうな');

}

else if(mikujinum==1){

document.write('きっといいことあるだろなぁ');

}

else if(mikujinum==2){

document.write('おお、けっこういいんじゃ・・・');

}

else{

document.write('たぶんOK、じつはいいことあるかもね');

}

// ->

</script>

</p>

</body>

</html>

▼サンプル

うまくいったかな。ときどき。

2012年1月17日1:55 AM| カテゴリー： Java ScriptとJ Query,見習い奮闘記| コメント (0)

for文とif文にトライ Java Scriptで画像を管理

Java Scriptが呪文としか思えないと思う見習ですが、for文を使って、連番のファイル名のついた画像ファイルを呼び出すのにトライです。画像ファイルのファイル名は「imgBig1.jpg」から数字部分のみ連番で増えていきます。

photoNoのところで、作成した画像の枚数を入力してやれば、今後、画像が増えてもここだけ修正すればOKです。(現在は9枚あります)

サンプル1のソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta http-equiv="content-script-type" content="text/javascript">

<title>Java Scriptで画像を呼び出してみる</title>

<style type="text/css">

*{

margin:0;

padding:0;

}

div{

width:150px;

margin:auto;

}

p{

float:left;

padding:5px;

}

.clr{

clear:both;

visibility:hidden;

}

img {

border:none;

}

</style>

</head>

<body>

<div>

<script type="text/javascript">

<!--

var photoNo=9;

for (var i=1; i<=photoNo; i++){



document.write('<p><a href="img/imgBig',i,'.jpg" target="_blank"><img src="img/imgBig',i,'.jpg" width="40" height="30"></a></p>');

if(i%3==0){

document.write("<br class=clr>");

}

}



// -->

</script>

</div>

</body>

</html>

▼サンプル1

画像を囲っているp要素にfloatをかけています。いまさら、といわれそうですが、3枚おきに<br class=”clr”>を入れることで、floatを解除しています。これはiが3で割り切れたときには<br class=”clr”>を記述するとしています。でも、やっぱり意味のない<br class=”clr”>を入れるのはちょっとと思い、もう1つ作ってみました。

サンプル2のソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta http-equiv="content-script-type" content="text/javascript">

<title>Java Scriptで画像を呼び出してみる</title>

<style type="text/css">

*{

margin:0;

padding:0;

}

div {

width:150px;

margin:auto;

}

p{

float:left;

padding:5px;

}

.clr{

clear:both;

}

img {

border:none;

}

</style>

</head>

<body>

<div>

<script type="text/javascript">

<!--

var photoNo=9;

for (var i=1; i<=photoNo; i++){

if((i-1)%3==0){

document.write('<p class="clr"><a href="img/imgBig',i,'.jpg" target="_blank"><img src="img/imgBig',i,'.jpg" width="40" height="30"></a></p>');

}

else{

document.write('<p><a href="img/imgBig',i,'.jpg" target="_blank"><img src="img/imgBig',i,'.jpg" width="40" height="30"></a></p>');

}

}



// -->

</script>

</div>

</body>

</html>

▼サンプル2

無意味なbrを入れる代わりに、先頭に来るPにのみclearのスタイルをつけられるクラスを設定しました。ここでは3枚おきに行を変えたいので、3の倍数の次のものにclearを設定します。ということでiから1引いたものが3の倍数だったときは、クラスつきのPを書き出すように設定しました。

うひひ。なんか、ちょっとカッコいいかもしんない、とうれしくなる見習です。

2012年1月9日1:31 AM| カテゴリー： Java ScriptとJ Query,見習い奮闘記| コメント (0)

confirmとかpromptとかをつかってみる　Java Script奮闘の巻

「OK」か「キャンセル」を押させるダイアログボックスを出し、条件を入力させる方法（メソッド）を使ってみました。confirmというメソッドです。コンファームといえば、「確認」です、飛行機のチケット取れてるか再確認するのは「リコンファーム」。旅行に行きたくなる見習ですが、張り切っていきます。

で、入力されたデータを基に、条件がかわります。

promptメソッドを使うと、ユーザーにデータを入力してもらうためのダイアログボックスが出ます。プロンプトって、辞書で引くと「促す」とかそういう意味で、コンピュータ用語の場合、入力を促すものということで、コマンドプロンプトとか、あります。そういえば、アメリカの大統領とかが、演説するときあんちょこみたいに見てる透明な板みたいなのって、テレプロンプトっていいますよね。

で、promptで入力された数字を条件にして、条件式を設定して判定します。
条件式の結果によって、alertでダイアログボックスに表示される文章がかわります。

ということで、選挙立候補できる年齢かを判断するJavaScriptを作ってみました。

参院と衆院に立候補できる年齢はそれぞれ30歳と25歳です。

まず、参院か衆院かを尋ね、その後、現在の年齢を入力してもらい、出馬ができる年齢以上かどうかを判定します。

JavaScriptのコード

<script type="text/javascript">

  <!--

  var Sanin=30;

  var Shuin=25;

  var isSanin;

  var age;

  var yourage;

  

  isSanin=confirm("出馬は参議院戦ですか(衆議院ならキャンセル)");

  if(isSanin){

  age=Sanin;

  }

  else{

  age=Shuin;

  }

  yourage=prompt("あなたの現在の年齢を入力","");

  yourage=parseInt(yourage);

  if(age<=yourage){

  alert("出馬できる年齢です");

  }

  else{

  alert("まだ出馬できる年齢ではありません");

  }

  // -->

  </script>

▼サンプル

どきどき。なんとか、なったでしょうか…。

2012年1月7日12:49 AM| カテゴリー： Java ScriptとJ Query,見習い奮闘記| コメント (0)

« 古い記事 新しい記事 »