one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【7:Bomb】ランダムでボタンアクションを切り替える

f:id:seintoseiya:20150415225751p:plain
プロジェクトNo.7:Bomb
JavaScriptのランダム関数を使用して、複数用意したボタンの中から、毎回異なる1つのボタンだけ違うアクションをするというものを作成した。

今回のポイントは以下の通り。

  • 警告ウィンドウの表示|alert()
  • 乱数の作成|Math.random()
  • 文字列から整数に変換|parseInt()
  • ボタンを押して画像を変更|document.bomb.src

ソースコード

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>ProgressBar</title>
	<link rel="stylesheet" href="style.css">
</head>
<body onload="hideProg()">
	<div id="main">
		<div id="progBase"></div>
		<div id="prog"></div>
	</div>
	<img src="./images/morning.jpg" onload="ShowProg()">
	<img src="./images/noon.jpg" onload="ShowProg()">
	<img src="./images/evening.jpg" onload="ShowProg()">
	<img src="./images/night.jpg" onload="ShowProg()">	
	<script type="text/javascript">
	maxNum = 4;
	cnt = 0;
	wSize = 400;
	function hideProg(){
		document.getElementById("progBase").style.visibility = "hidden";
		document.getElementById("prog").style.visibility = "hidden";
	}
	function ShowProg(){
		cnt++;
		barWidth = Math.floor((cnt / maxNum) * wSize);
		document.getElementById("prog").style.width = barWidth + "px";	
	}
	</script>
</body>
</html>

警告ウィンドウの表示|alert()

警告ウィンドウを表示させるにはwindow.alert()を使います。このwindow.は省略可能です。

Javascript

alert("Out!!!");

乱数の作成|Math.random()

今回は0~4までの乱数を作成します。
まず、Math.random()で0.0以上1.0未満までのランダムな浮動小数点を発生させる事ができます。
これに作成したい範囲の数(ここでは0~4なので5)を掛けて、
Math.floor関数を使って端数を切り捨てます。

Javascript

//0~4までの乱数を発生させる
var randnum = Math.floor( Math.random() * 5 );

文字列から整数に変換|parseInt()

引数で渡ってきた値は文字列として扱われるので、乱数で生成された整数と比較するためには、文字列を整数に変換する必要があります。
文字列を整数に変換するにはparseInt()関数を使用します。

Javascript

//引数を数字に変換
var n = parseInt(num);

ボタンを押して画像を変更|document.bomb.src

前回説明した、DOMの応用です。
document.bomb.srcという様に、imgタグのsrcの内容を変更する事ができます。

Javascript

document.bomb.src = "./imgs/bob.jpeg";

全ソースはこちら

github.com

関連アプリ・書籍

JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで

JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで

JavaScript 第6版

JavaScript 第6版

入門者のJavaScript (ブルーバックス)

入門者のJavaScript (ブルーバックス)