【Javascript】きれいなJavascriptについて
【今回の内容】
掲題にあるように今回は、
きれいなJavascriptについて
です。
この「きれいな」には様々な解釈があると思います。
・ロジックがしっかりとしている
・形式がしっかりしている（コメント・変数の宣言位置）
・ＨＴＭＬからしっかり外出しされている
などなど。
まだまだ自分は未熟なので、きれいにかけるとは言えませんが、
書籍などを参考に今回は、
・ＨＴＭＬからしっかり外出しされている
とりわけ、イベントハンドラを外出し（HTMLからJavascriptにだす）することを
やってみたいと思います。
例）onClick,ommmouseoverなど
【なぜ外出しするのか？】
ではなぜそもそも外出しをする必要があるのか？
私が思いつく限りだと以下のような点が挙げられると思います。
１、可読性をあげる
同じHTMLファイルにHTMLとJavascriptが記述されていると
読みづらいです
２、再利用性を挙げる
外出しを行い、外部ファイルとすることで、他のページや他のモノを
作る時でも、再利用可能になります。
（そのまま使えない場合も多々ありますが、）
３、保守しやすくする
HTMLからJavascriptの参照先が一つになることで、Javascriptのソース変更時
変更箇所が少なくなる。Javascriptのソースに関して、同じようなソースを
複数個所で使用していると、使用箇所分ソースの変更が必要になってしまい ます。
参照先を共通の外部ファイルにしておけば、変更は一か所ですむと思いま す。
この参照先をなるべく一つにするという考えは、のHTMLとJavascriptに限 った事ではないのかなと思っています。
【補足】
「window.loadについて」
ソースの中に以下のような記述があります。
window.onload=event;
function event()
なぜwindow.onloadというイベントを使用しなくていはいけないのでしょうか。
ちなみに、window.onloadは、ドキュメントが完全に読み込まれた時をさすイベントです。
じつは、
ドキュメント（document）が読み込まれ、完全なＤＯＭが生成されるのを
待つためにwindow.onloadというイベントを使用しています。
一般的に、＜head＞の間に外部ファイルとして、ＪＳファイルを読み込ませるので、先にＪＳが読み込まれてしまうのです。
先に、ＪＳが読み込まれてしまうと、ドキュメントの完全なＤＯＭ構造が生成されていないので、ＤＯＭを使用したＪＳのfunctionがうまくきのうしなくてなってしまいます。
【参考ソース】
<html>
<head></head>
<body>
<h2>全てのテキストボックスの値を空欄にする</h2>
<body>
<div id="inputValue"> <!--このdivブロックのidから取得-->
<h2>氏名</h2><input type="text" value="" name="box"></br>
<h2>住所</h2><input type="text" value=""name="box"></br>
<h2>電話番号</h2><input type="text" value=""name="box"></br>
<h2>趣味</h2><input type="text" value=""name="box"></br>
<h2>備考</h2><input type="text" value=""name="box"></br>
</div>
<input type="button" value="送信">
<input type="button" value="初期化" id="clear_Button">
<script Language="JavaScript" type="text/javascript">
window.onload=event;
function event(){
var clear_Button=document.getElementById("clear_Button");
clear_Button.setAttribute("onclick","allclear()");}
function allclear(){
var str=document.getElementById("inputValue");
var textbox_value=str.getElementsByTagName("input");
for(i=0;i<textbox_value.length;i++){
textbox_value[i].value="";}
}
</script>
</body>
</html>
