僕はhtmlが煩雑になるのがとても嫌いである。
スタイルは外部cssに全て書くべきだと思うしjavascriptは絶対外部に作りたいし可能ならphpも書きたくない。
そんな頑固おやじのごとく信念で今まで突き進んできたのだが今回下記の問題でちょっとはまってしまった。
問題:
外部からjsを読み込ませたい、かつページが読み込まれた後にjsを動作させたいが使う変数をグローバルにしたい場合はどうすればよいか。
ローカル変数とグローバル変数の問題だがwindow.onload()とdocument.getElementByIdが絡んでくるととたんにはまる人がいる。
特に、うまくいかなかったらwindow.onload()ですべて解決すると思っていた雑魚プログラマの僕には難題だった。
具体的な解決方法の一例に移ろう。
htmlページでユーザにテキストを入力してもらいそれを使ってなにかしらレスポンスする物を作りたいとすると外部にjsを作ってhtmlをjs側でid取得から適当にやるとうまくいかないことが多い。
ページの要素を取得する前に外部jsを読み込み終わってしまって例のvar unchiはobj要素を探せないことになる。
ページ下部にscriptをじかに書く方法もあると思うしhtmlのbody onload = function() とかやれると思うけどきれいじゃないし嫌なので外部に頑張って書く。
index.html
<html>
<script type="text/javascript" src="clean.js"></script>
</script>
<input type="text" id="obj">
<html>clean.js
動かないあるいは後で不具合よく吐くやつ
var unchi = document.getElementById("obj");
function toilet (){
...
}
function water flowing (){
...
}clean.js
よさげなやつ
var unchi = new Object();
window.onload = function () {
unchi = document.getElementById("obj");
}
function toilet (){
...
}
function water flowing (){
...
}まずグローバル変数を関数外でオブジェクトとして宣言。
loadし終わったらhtmlのobj要素を取得しろよな、と書いてやれば大体うまくいくと思う。
もちろんグローバル変数なので他の関数でもunchi変数を使える。
ベストな方法ではないかもしれないけどベターではありそうなのでいい感じだ。
頑固おやじの僕もにっこりである。
