新卒から文系エンジニア→人材業界に転職した人のブログ

新卒から文系エンジニア→人材業界に転職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界へ。異業種×異職種の転職経験有り。

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

【Javascript】document.getElementById(id)を外だしに衝撃を受けた話

【今回の紹介】


以前、要素のイベントを追加したり、プロパティ変更をする場合には
jueryを使用した方が

 ・Code量もへる
 ・可読性もあがる

とかきましたが、シンプルな
 ・要素のイベントを追加
 ・プロパティ変更

 についてはjQueryも使っても使わなくてもあまり差はないかもしれないです、
 
 自分の学習不足な面が多かったので訂正かつそれを整理していきたいと思います。



 ※隣り合ったDOMノード、配下のDOMノードの指定、条件を指定したDOMノードの指定など
  jQueryなどのライブラリを使った方が当然かきやすいわかりやすい部分もあると思います。(てかそれがほとんど。ライブラリだし笑)
  ライブラリ未使用でソースを書いていくにしても、もっとよみやすいCodeがかけたんだなーという自分への戒めを込めて紹介します。笑




■学習前javascript

<html>
<title>javascript</title>
<head>
<meta charset='utf-8'>
</head>

<body>
<input type='text' value='' id='item1' name='text1'></input>	
<input type='button' value='挨拶' id='item2'></input>

<script>

//要素・関数を読み込んでからイベントハンドラのセットを行う
window.onload=function(){
setEvent();
}

//イベントハンドラのセット
function setEvent(){
document.getElementById('item2').onclick=hoge1;
}


function hoge1(){
var value=document.getElementById('item1').value;
alert(value);
}


</script>
</body>
</html>

■学習後javascript

<html>
<title>javascript</title>
<head>
<meta charset='utf-8'>
</head>

<body>
<input type='text' value='' id='item1' name='text1'></input>	
<input type='button' value='挨拶' id='item2'></input>

<script>

//要素・関数を読み込んでからイベントハンドラのセットを行う
window.onload=function(){
setEvent();
}

//イベントハンドラのセット
function setEvent(){
$('item2').onclick=hoge1;
}


function hoge1(){
var value=$('item1').value;
alert(value);
}

function $(id){

return document.getElementById(id);

}
</script>
</body>
</html>

■注目してほしいのは、document.getElementById(id)を外だししている部分です。
 どうやら参考の記事を見ると、常識だったみたいですが入門書だけをみてソースを書いていた自分は全く気づきませんでした
 (自分で思いついて外だしするだろとおもうかもしれませんが。笑)
 だから、document.getElementById(id)を外出しているソースをみたとき、衝撃というかすごく腑に落ちるかつ読みやすいな、と。

 そして、jQueryの基本であるobjを取得するソースにも納得しました。おそらくドキュメント内の要素を特定するIDやclassを引数にして
 内部で上記のような処理を行い、返しているんだなーと。おもしろい!






jQuery

<html>
<title>javascript</title>
<head>
<meta charset='utf-8'>
</head>

<body>
<input type='text' value='' id='item1' name='text1'></input>	
<input type='button' value='挨拶' id='item2'></input>
<script src = "http://code.jquery.com/jquery-1.11.0.min.js" ></script>
<script>

$(function(){
	$('#item2').click(function(){
		var value=$('#item1').val();
		alert(value);
});
});

</script>
</body>
</html>

■参考サイト

 JavaScript のイベントハンドラ - daily dayflower

.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; }