最近、Javascriptについて、いくつかのブログで話題になっていましたがどんな話か簡単に話してみると、昔ながらの書き方でonloadをbodyタグに埋め込んだり、href=”javascript:void(0)”とリンクを無効にしたり、という処理をしてしまうと、制作現場において作業を分担するにあたりミスを伴う、という話だったようです。様々な書き方についてもっと込み入った話でしたがここではこの程度で。
確かに、すべてをJavascriptを記述する.jsファイルやスクリプトタグ内に記述しないのは、ケアレスミスで記述し忘れなどをおこす可能性があり、別々の人がHTMLとJavascriptを作っていると特にそのミスを発見するのに時間がかかるかもしれません。
そこで、jQueryなどのフレームワークを利用するのも良いのですが、まずは1枚の.jsファイルで処理ができる方法を身につけた方が何かと勉強になるでしょうから、フレームワークは止めておきます。
HTML
<p>
<a href="#" id="large">大</a>
<a href="#" id="mid">中</a>
<a href="#" id="small">小</a>
<a href="#" id="red">赤</a>
<a href="#" id="blue">青</a>
<a href="#" id="black">黒</a>
</p>
<ul>
<li><a href="#" id="text1">テキスト入れ替え</a></li>
<li><a href="#" id="text2">テキスト入れ替え2</a></li>
</ul>
<p id="test">この部分を入れ替えます。</p>
Javascript
function $ge(e){return document.getElementById(e);}
function changeFontLarge(){testID.style.fontSize=’18px’;}
function changeFontMid(){testID.style.fontSize=’14px’;}
function changeFontSmall(){testID.style.fontSize=’10px’;}
function changeColorRed(){testID.style.color="red";}
function changeColorBlue(){testID.style.color="blue";}
function changeColorBlack(){testID.style.color="black";}
function show1(){
var nexttext = "test1で入れ替えています。";
testID.innerHTML = nexttext;
}
function show2(){
var nexttext=’test2で入れ替えました。<br />’;
nexttext += ‘<a href="http://www.anchortag.jp/" target="_blank">リンクもこの通りです。</a>’;
testID.innerHTML = nexttext;
}
window.onload=function(){
testID=$ge(‘test’);
$ge(‘large’).onclick = changeFontLarge;
$ge(‘mid’).onclick = changeFontMid;
$ge(‘small’).onclick = changeFontSmall;
$ge(‘red’).onclick = changeColorRed;
$ge(‘blue’).onclick=changeColorBlue;
$ge(‘black’).onclick=changeColorBlack;
$ge(‘text1’).onclick=show1;
$ge(‘text2’).onclick=show2;
}
