DOMによるフォーム・コントロールの操作 (2/6)
作成:2010-04-02 12:08
更新:2010-05-11 18:40
更新:2010-05-11 18:40
■イベント属性の利用
それにしても、「<body>の一番下にスクリプトを書く」というのは、正直いってあんまりスマートな書き方ではありません。画面に表示しないものは、やっぱり<head>内にまとめたほうがスマートです。普通は一体、どうしてるんでしょうか？
これは、「イベント」を利用すれば解決できます。イベントというのは、ユーザーの操作やさまざまな動作によって自動的に発生する信号のようなものです。このイベントを利用することで、何らかの動作に応じて自動的にスクリプトを呼出実行させることができるようになります。
イベントの利用には、いくつかのやり方があります。もっとも簡単なのは、「HTMLのタグに用意されている、イベント用の属性を使う」というものです。HTMLタグには、JavaScriptのイベントを設定するための属性が最初から用意されているのです。
例えば、先のサンプルを、イベント用の属性を使って書き直してみましょう。これには、<body>に用意されている「onload」という属性を利用します。このonloadは、ドキュメントのロードが完了したときに発生するイベントです。これを利用し、
下のリストにあげたサンプルでは、onload="initial();"と記述しています。これで、ドキュメントがすべて読み込まれた後で、initial関数を実行するようになります。これならスマートですね。このonload属性は、スクリプトの初期化処理に多用されるものですので、ここで覚えておきましょう。
これは、「イベント」を利用すれば解決できます。イベントというのは、ユーザーの操作やさまざまな動作によって自動的に発生する信号のようなものです。このイベントを利用することで、何らかの動作に応じて自動的にスクリプトを呼出実行させることができるようになります。
イベントの利用には、いくつかのやり方があります。もっとも簡単なのは、「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>
※関連コンテンツ
「初心者のためのJavaScriptプログラミング入門」に戻る