読者です 読者をやめる 読者になる 読者になる

FOR SE

文系の学部から新卒でメーカー系のSIerに就職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界に就職

このエントリーをはてなブックマークに追加

【Javascript】きれいなJavascriptについて

【今回の内容】

 

掲題にあるように今回は、

 

きれいなJavascriptについて

 

です。

 

この「きれいな」には様々な解釈があると思います。

 ・ロジックがしっかりとしている

 ・形式がしっかりしている(コメント・変数の宣言位置)

 ・HTMLからしっかり外出しされている

 などなど。

 

まだまだ自分は未熟なので、きれいにかけるとは言えませんが、

 

書籍などを参考に今回は、

 

・HTMLからしっかり外出しされている

 とりわけ、イベントハンドラを外出し(HTMLからJavascriptにだす)することを

 やってみたいと思います。

  例)onClick,ommmouseoverなど

 

 

【なぜ外出しするのか?】

 ではなぜそもそも外出しをする必要があるのか?

 私が思いつく限りだと以下のような点が挙げられると思います。

  1、可読性をあげる

    同じHTMLファイルにHTMLとJavascriptが記述されていると   

    読みづらいです

  2、再利用性を挙げる

    外出しを行い、外部ファイルとすることで、他のページや他のモノを

    作る時でも、再利用可能になります。

    (そのまま使えない場合も多々ありますが、)

  3、保守しやすくする

    HTMLからJavascriptの参照先が一つになることで、Javascriptのソース変更時

    変更箇所が少なくなる。Javascriptのソースに関して、同じようなソースを

    複数個所で使用していると、使用箇所分ソースの変更が必要になってしまい    ます。

     参照先を共通の外部ファイルにしておけば、変更は一か所ですむと思いま    す。

     この参照先をなるべく一つにするという考えは、のHTMLとJavascriptに限    った事ではないのかなと思っています。

 

 

【補足】

 「window.loadについて」

ソースの中に以下のような記述があります。

 window.onload=event;

 function event()

 

 

 

なぜwindow.onloadというイベントを使用しなくていはいけないのでしょうか。

ちなみに、window.onloadは、ドキュメントが完全に読み込まれた時をさすイベントです。

 

 

じつは、

 

ドキュメント(document)が読み込まれ、完全なDOMが生成されるのを

待つためにwindow.onloadというイベントを使用しています。

 

一般的に、<head>の間に外部ファイルとして、JSファイルを読み込ませるので、先にJSが読み込まれてしまうのです。

先に、JSが読み込まれてしまうと、ドキュメントの完全なDOM構造が生成されていないので、DOMを使用したJSの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>

.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }