[[HTML5とかJSとか]]
最も基本形を書いてみるね。
ただしWebの中に直書きじゃなくて、わざと別ファイルでね。
* sample.html [#ud8a7162]
<!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>
* sample.js [#ydea1245]
var savesec = -1;
// clock関数を１秒周期で繰り返す
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をどこで読み込んでいるか。
- どこから実行開始しているか。
- どこに表示しているか。
まず 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 とかやって普通にダダ書きしちゃうと、ひたすら表示したページの末尾に追記されていく'' から要注意。わかった？
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
