back

DOMによるフォーム・コントロールの操作 (2/6)

■イベント属性の利用

それにしても、「<body>の一番下にスクリプトを書く」というのは、正直いってあんまりスマートな書き方ではありません。画面に表示しないものは、やっぱり<head>内にまとめたほうがスマートです。普通は一体、どうしてるんでしょうか？

これは、「イベント」を利用すれば解決できます。イベントというのは、ユーザーの操作やさまざまな動作によって自動的に発生する信号のようなものです。このイベントを利用することで、何らかの動作に応じて自動的にスクリプトを呼出実行させることができるようになります。

イベントの利用には、いくつかのやり方があります。もっとも簡単なのは、「HTMLのタグに用意されている、イベント用の属性を使う」というものです。HTMLタグには、JavaScriptのイベントを設定するための属性が最初から用意されているのです。

例えば、先のサンプルを、イベント用の属性を使って書き直してみましょう。これには、<body>に用意されている「onload」という属性を利用します。このonloadは、ドキュメントのロードが完了したときに発生するイベントです。これを利用し、
<body onload="…実行する処理…">
このように<body>タグを記述しておけば、ドキュメントがすべてロードされたときに必要な処理が自動的に呼び出されるようになるわけです。

下のリストにあげたサンプルでは、onload="initial();"と記述しています。これで、ドキュメントがすべて読み込まれた後で、initial関数を実行するようになります。これならスマートですね。このonload属性は、スクリプトの初期化処理に多用されるものですので、ここで覚えておきましょう。


(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

<html>
	<head>
		<script type="text/javascript">
		<!--
		function initial(){
			var one = document.getElementById("one");
			var two = document.getElementById("two");
			var three = document.getElementById("three");
			one.innerHTML = "第１のDIVタグです。";
			two.innerHTML = "第２のDIVタグです。";
			three.innerHTML = "第３のDIVタグです。";
		}
		//-->
		</script>
	</head>
	<body onload="initial();">
		<H1>TEST.</H1>
		<div id="one">TEST</div>
		<div id="two">TEST</div>
		<div id="three">TEST</div>
	</body>
</html>



　 　

記事のリストに戻る



PC Site G+ mail
copyright 2009. SYODA-tuyano.