2017年9月27日(水)
[JavaScript] 変数にオブジェクトを格納しておく #HTML5&CSS3&JavaScript HTMLでは、タグそのものやタグで区切られた部分を、塊としたオブジェクトとして扱えます。DOM [Document Object Model] のルールに従い、オブジェクトを指定します。
手っ取り早いのは、オブジェクトのIDを指定するやり方です。下記のプログラミングでは、IDがid_div1のオブジェクト内に「あ」を出力しています。
--
<html>
<head>
<script>
window.onload = _setup;
function _setup(){
document.getElementById("id_div1").innerHTML = "あ";
}
</script>
</head>
<body>
<div id="id_div1"></div>
</body>
</html>
--
こんなに短いプログラミングですが、注意点が３つあります。
１つは、わざわざ、ページがすべて読み込まれてから、関数_setup()を実施していることです。下記のように記述すると、まだオブジェクトのIDが確定する前にID指定するので、エラーとなります。
-- × --
<script>
document.getElementById("id_div1").innerHTML = "あ";
</script>
--
２つ目は、window.onlaodにおける関数の指定です。下記のように()を付けるとエラーになります。
-- × --
window.onload = _setup();
--
最後の１つは、ID指定の場合、複数形にして、getElementsById()としないことです。IDは、１つだけというのが前提となっています。
-- × --
document.getElementsById("id_div1").innerHTML = "あ";
--
さて、プログラミングの中で、何度も同じオブジェクトを指定する場合、変数にオブジェクトを格納しておくことをお勧めします。下記のプログラミングでは、変数$id_div1にオブジェクトを格納しています。
--
<html>
<head>
<script>
window.onload = _setup;
function _setup(){
$id_div1 = document.getElementById("id_div1");
}
</script>
</head>
<body>
<div id="id_div1"></div>
</body>
</html>
--
P.S. ガレコレ流では、『変数名』の頭に$（ドル）を付けます。他のプログラミング言語ではよく見られますが、JavaScriptでは$が不要です。しかし、$が無いとコマンドなのか変数なのか識別が難しくなるので、そうしています。また、予約定数名とのバッティングを回避できます。
『関数名』の頭に_（アンダースコア）を付けています。これも、予約関数名とバッティングしないようにするためです。
プログラミングにも、ちょっとした工夫が必要です。
P.S.2 onloadに関しては、いろいろな記述方法があります。自分は、上記の記述を好んで使っています。
お問い合わせ