【JavaScript】画像をランダムで表示するスクリプト
さてさて、今回のスクリプトとはまったく関係ない話なのですが、私は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といった画像を保存してください。
画像の数、拡張子、保存ディレクトリはスクリプトの「//」の注釈部分で変更できます。
どうもサイ本の難解さにハマってしまい、実際に手を動かさずに時間だけが過ぎてしまった感があるので、これからはちゃんとたくさん作って、たまにドキュメントを見直してみようと思います。