[HTML]

<html>
<head>
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<script type="text/javascript" src="goukyu2.js"></script>
</head>
<body onload="tokei2()">
<center>
<div id="hato1">	・１つ目の空のブロック
</div>
<br><br>
<div id="hato2">	・２つ目の空のブロック
</div>
<div id="hato12">	・３つ目の空のブロック
</div>
<div id="hato13">	・４つ目の空のブロック
</div>
<br><br>
<img id="bird">	・５つ目の空のブロック
</center>
</body>
</html>

[javascript]

var aisatu='<input type="button" value="あいさつ" onclick="aisatu2()" style="width:160px;background-color:transparent;color:#000000;border:solid 1px #000000;cursor:pointer;font-size:18px;font-weight:bold;">';

・↑aisatuという変数にボタンとイベントを代入しています。

if(window.addEventListener){window.addEventListener("load",goukyu,false);}else if(window.attachEvent){window.attachEvent("onload",goukyu);};

・↑ページの読み込み時に関数goukyuを実行させますが，もし他の関数を実行させる事になっていた場合，（この場合，すでにonload="tokei2()が実行されています）バッティングを避けるために書きます。addEventListenerとattachEventは同じことですが，ブラウザによってはどちらかを使うことになります。ＩＥではaddEventListenerは使えません。

function tokei2(){
setInterval("tokei()",1000);
}

・↑関数tokei2()を作ります。関数tokei()を１秒ごとに実行させます。

function tokei(){
var tokei=new Date();
var byou=tokei.getSeconds();
document.getElementById("hato13").innerHTML='<br>'+'<div style="font-size:15px;">'+'コンピュータの時計から秒数を取得しています'+'</div>'+'<div style="font-size:20px;font-weight:bold;color:#0000ff;">'+byou+'</div>';

}

・↑HTML内の名前hato13に入れるドキュメントです。関数tokei()を作り，コンピュータの時計から秒数を取得し表示させます。

function goukyu(){
document.getElementById("hato1").innerHTML=aisatu;

・↑HTML内の名前hato1に入れるドキュメントです。関数goukyu()を作り，変数aisatu内のドキュメントを表示させます。

document.getElementById("hato2").innerHTML='<h3><font face="メイリオ">このドキュメントはjavascriptで書いています。</font></h3>';

・↑HTML内の名前hato2に入れるドキュメントです。直接，文字を記述しています。

document.getElementById("hato12").innerHTML='<font size="4" face="メイリオ">HTML文書へ直接，記述する事と同じですが<br>この方法を利用すれば，ドキュメントを動的に書き換える事ができます。<br>HTMLには４つの空のブロックに名前を付けてセンターに配置しています。<br>javascriptを利用して４つの空のブロックにドキュメントを表示しています。<br>右クリックしてソースをご覧ください。</font>';

・↑HTML内の名前hato12に入れるドキュメントです。直接，文字を記述しています。

document.getElementById("bird").src="10.jpg";

・↑HTML内の名前birdに入れるドキュメントです。10.jpgという画像を表示させます。

}

function aisatu2(){
alert("ご覧いただきまして，ありがとうございます。");
}

[クリック]