アプリであそぼう。こどもも、おとなも。

【JavaScript】画像をランダムで表示するスクリプト

さてさて、今回のスクリプトとはまったく関係ない話なのですが、私はJavaScript(Ajax)とPHPを使って、あるサービスを開発したいと考えています。

しかしそれを開発するためのJavascriptの技術と私の今のJavascriptのレベルが凄まじく離れており、今すぐに手をつけることはできません。
まずは基本をちゃんと抑え、それから一つずつステップアップしたいと思います。そのためには簡単なものから少しずつ作っていこう、と。

そんなわけで今回はjqueryなどを使わず、画像をランダムで切り返るスクリプトを作ってみました。なんだか初めて自分でJavascriptを書いた気がします。
やはりプログラムのレベルを上げるには、プログラミングすることですね。

まずはHTMLです

<head>
<script src="js/random.js" type="text/javascript"></script>
</head>
<body>
	<p><img src="" name="myImg"></p>
</body>


これだけ。

次に外部ファイルで読み込んだJavascriptです。

function randomImg(){

	//画像の数
	imgLength = 6;

	//画像の拡張子
	imgExtension = ".png";

	//画像の保存ディレクトリ
	imgDirectory = "img/";

	randomInt = Math.random() * imgLength;
	randomInt = Math.ceil(randomInt);
	imgDirectory + randomInt + imgExtension;
	test = document.myImg.src;

	document.myImg.src = imgDirectory + randomInt + imgExtension;
}

window.onload = randomImg;

これで、imgフォルダに1.png、2.pngといった画像を保存してください。
画像の数、拡張子、保存ディレクトリはスクリプトの「//」の注釈部分で変更できます。

完成のサンプルはこちらです。

また、完成サンプルをダウンロードするにはこちらです

どうもサイ本の難解さにハマってしまい、実際に手を動かさずに時間だけが過ぎてしまった感があるので、これからはちゃんとたくさん作って、たまにドキュメントを見直してみようと思います。