【Javascript】メモ：イベントのバブリングってなに？

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/loading.js" type="text/javascript"></script>
</head>

<body>

<p id="button">CLICK</p>
<div>
	<p id="gallery"><img src="img/default.gif" /></p>
</div>

</body>
</html>

次に今回作成したloading.jsのスクリプトです。

//画像の数
imgLength = 3;

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

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

//最初に表示する画像
randomInt = 1;

$(function(){

	$("#button").click(function() {
		$("#gallery").children("img").attr("src",function(){ return "img/loading.gif" })
		var waitng = setTimeout(loadImg, 1000);
	})

	function loadImg(){
		$("#gallery").children("img").css("opacity","0").attr("src",function(){ return imgDirectory + randomInt + imgExtension })
		.animate({'opacity':'1'},	600);

		if(randomInt < imgLength){
			randomInt = parseInt(randomInt) + 1;
		}
		else{
			randomInt = 1;
		}
	}
});

今回はグルグル回るローディン画像を表示したかったので、var waitng = setTimeout(loadImg, 1000);を追加して意図的に1秒間アニメーションを見せていますが、本番環境ではこちらをloadImg();に変えてください。

ちなみにグルグルローディングのアニメーションGIFはこちらから頂きました。Chimply generates your images

かなりいいグルグルがありますね！ページの下部では選んだ画像の速度や大きさなどをカスタマイズできます。

グルグルって見て魔方陣グルグルと勘違いしそうになった人は、お友達になれそうな気がします。

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

2010.05.11

PICxPIC

さてさて、今回のスクリプトとはまったく関係ない話なのですが、私は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といった画像を保存してください。
画像の数、拡張子、保存ディレクトリはスクリプトの「//」の注釈部分で変更できます。

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

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

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

【JavaScript】項目の内容をチェックしエラーを自動表示するフォーム

2010.05.10

PICxPIC

前回の記事で紹介した選択した項目をアニメーション等で目立たせるフォームに、エラーチェックを追加したものを紹介します。

こちらがエラーチェックの機能を追加したフォームです。

PHPでこういったエラーを吐き出すのはCMSや動画投稿サイトを作ったときからやっていたのですが、やはりフォームなどでは項目に何かを書いた時点でエラーチェックをして表示してくれる方が、一度送信してから一括でエラーが表示されるよりもずっと使いやすいですね！

今回作ったもののエラーチェックは、上から「英語以外が入力されていたらエラー」、「メールアドレスっぽくなかったらエラー」、「URLっぽくなかったらエラー」、「何も入力されていなかったらエラー」です。ガーっと作ったのであんまり厳重ではありません。

今回のスクリプトをZipファイルでダウンロードするにはこちらからどうぞ。