プログラム

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

picxpic

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

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

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

まずはHTMLです

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

これだけ。

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

[js]
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;
[/js]

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

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

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

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

記事URLをコピーしました