最も基本形を書いてみるね。
ただしWebの中に直書きじゃなくて、わざと別ファイルでね。
<!DOCTYPE HTML> <html dir="ltr" lang="ja" prefix="og: http://ogp.me/ns#"><!-- InstanceBegin template="/Templates/web_utf8.dwt" codeOutsideHTMLIsLocked="false" --> <head lang="ja"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>デジタル時計</title> <script type="text/javascript" language="javascript" src="./sample.js"></script> <script type="text/javascript" language="javascript"><!-- window.onload = function() { // ここにonloadしたい関数を入れる。 init(); }; --></script> </head> <body> <h1>デジタル時計</h1> <div id="clock-01"></div> </body> </html>
var savesec = -1; // clock関数を1秒周期で繰り返す function init(){ clock(); setInterval('clock();',50); }
function clock(){ var now = new Date(); var sec = now.getSeconds(); if (savesec != sec){ savesec = sec; var min = now.getMinutes(); var hr= now.getHours(); var clock1 = "" + ("0" + hr).substr(-2) + "時" + ("0" + min).substr(-2) + "分" + ("0" + sec).substr(-2) + "秒"; document.getElementById( 'clock-01' ).innerHTML = clock1.toLocaleString(); // div id="clock-01" } }
細かい構文とかはそのへんのものを見るとして、ここでのキモは三点あるの。以下に注目してね。
まず sample.js の読み込みは、HTMLの header に定義しているからわかると思う。
で、実行開始は、これ。
window.onload = function() { // ここにonloadしたい関数を入れる。 init(); };
ウインドウ読み込み時(window.onload)にこの function は実行されるわけだけど、init() はロードした sample.js に書かれてあるわね。あれが実行されるってわけ。
で、最後に表示。
sample.jsを見ると、getElementByID("clock-01")したところのinnerHTMLに書き込んでいるのがわかると思う。だったら、この clock-01 が表示位置になるわけだけど。
<h1>デジタル時計</h1> <div id="clock-01"></div>
はい、ここね。このdivブロックの中に書き込まれるわけ。
ちなみに、 ここで document.write とかやって普通にダダ書きしちゃうと、ひたすら表示したページの末尾に追記されていく から要注意。わかった?