Javascriptの読まれるタイミングと実行のタイミング
070211
こんにちは、なかわけです。
昨日、仕事で発見した（というか仲間と話してて見つけた）Javascriptの話。
まずなかわけは、とあるページを制作していてチェックボックスにチェックを入れた後にページを更新するとチェックが残っていることに気が付きました。そのとき作っていたページの仕様上チェックが残っているのがまずかったので、更新したときにはチェックが外れるようにしようとJavascriptを書きました。
最初に書いたのは下のような感じ・・・
▼HTML側
<html>
<head>
...
<script type="text/javascript" language="JavaScript" src="file.js"> </script>
...
</head>
<body>
...
<input type="checkbox" id="CheckBox">
...
<head>
...
<script type="text/javascript" language="JavaScript" src="file.js"> </script>
...
</head>
<body>
...
<input type="checkbox" id="CheckBox">
...
▼外部Javascriptファイル
document.getElementById("CheckBox").checked = false;
簡単な解説をしますと、htmlファイルが外部のJavascriptファイルと読み込んでいて、そのJavascriptファイルには、htmlファイルに書いてあるチェックボックスをfalse（外せ！）と書いていたんですが、うまく動きませんでした。
その後近くの仲間となんでかね？と話していながら解決した書き方がしたみたいな感じ・・・
▼HTML側
<html>
<head>
...
<script type="text/javascript" language="JavaScript" src="file.js"> </script>
...
</head>
<body onLoad="CheckBoxFalse()">
...
<input type="checkbox" id="CheckBox">
...
<head>
...
<script type="text/javascript" language="JavaScript" src="file.js"> </script>
...
</head>
<body onLoad="CheckBoxFalse()">
...
<input type="checkbox" id="CheckBox">
...
▼外部Javascriptファイル
function CheckBoxFalse() {
document.getElementById("CheckBox").checked = false;
}
document.getElementById("CheckBox").checked = false;
}
要はどういうことかというと、ソースが読み込まれる順番だったんですね。
最初に書いた書き方だと、
htmlファイルを読み込み
↓
Javascriptファイルを読み込み（チェックボックスを外せ！）
↓
<body>読み込み
↓
チェックボックスを表示
↓
Javascriptファイルを読み込み（チェックボックスを外せ！）
↓
<body>読み込み
↓
チェックボックスを表示
これだとチェックボックスがまだ表示される前にチェックボックスを外せ！と処理されてしまいます。ばかですね、なかわけって。後の書き方だと、
htmlファイルを読み込み
↓
Javascriptファイルを読み込み（チェックボックスを外せ！っていう命令があるよ）
↓
<body>読み込み（と同時にチェックボックスを外せ！命令を実行してね）
↓
チェックボックスを表示（と同時にチェックボックスを外す）
↓
Javascriptファイルを読み込み（チェックボックスを外せ！っていう命令があるよ）
↓
<body>読み込み（と同時にチェックボックスを外せ！命令を実行してね）
↓
チェックボックスを表示（と同時にチェックボックスを外す）
となり、意図した通りに動いてくれます。気づけば当たり前のことだし、こうしてまとめて書いてるとまぬけな自分が悲しい・・・。
プログラムは上から下に処理されるんだっつーの!!
コメント (0)