2005年05月29日(日) [長年日記]
■ [javascript] JavaScriptで定期的にHTMLを書き換える
2年ぶりにJavaScriptを使った。今回は、JavaScriptを使ってHTMLの内容を定期的に書き換える処理を行いたい。
JavaScriptのことは何も覚えていないので、まず参考になるサイトを見つける必要がある。JavaScriptの言語仕様やAPIについては
- Under Translation of ECMA-262 3rd Edition （MetaGraphic Cell）
- JScript （Dynamic Scripting）
- ECMAScriptチュートリアル （AKAMA Shun-ichi's website）
を見るのがよさそう。HTMLにJavaScriptをどのように埋め込めばいいのかについてはHTMLの仕様書内に説明があった。
- 18 スクリプト （HTML 4.01仕様書）
HTMLの書き換えはDOMを使えばできそうで、仕様書内の
- 付録 E: ECMAスクリプト言語バインディング （文書オブジェクトモデル(DOM)第1水準 仕様書 Version 1.0）
を参照すればよさそう。あとここも見た。
- 基本的 DOM インターフェイスによる HTML 要素の動的操作法 （Mozilla Japan）
JavaScriptでのタイマー処理は標準では規定されていないようで、
- Scope of setTimeout Method （MetaGraphic Cell）
- 時間処理 （ECMAScriptチュートリアル）
- ソーのJavaScriptチュートリアル上級編：Day 3 （Hotwired Japan）
を参照した。
で、出来上がったのはこれ。1秒毎にテーブルの内容を書き換えるだけ。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<title>1秒毎にテーブルの内容を書き換える</title>
<link rel="stylesheet" href="/kenichi.css" type="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
<!-- JavaScript start
var timerId;
function init() {
timerId = setTimeout("modifyTable()", 1000);
}
function finish() {
clearTimeout(timerId);
}
function modifyTable() {
var myTable = document.getElementById("myTable");
var cell = myTable.rows.item(0).cells.item(1);
var v = cell.firstChild.nodeValue;
cell.firstChild.nodeValue = parseInt(v) + 1;
timerId = setTimeout("modifyTable()", 1000);
}
// JavaScript end -->
</script>
</head>
<body onload="init()" onunload="finish()">
<h1>1秒毎にテーブルの内容を書き換える</h1>
<table id="myTable">
<tr>
<td>Time</td><td>0</td>
</tr>
</table>
</body>
</html>
■ やること
- リンク元のスリム化
- tDiaryバージョンアップ
- FSWikiバージョンアップ
- オーブンレンジ用べんり棚
- ブラウンの安い電動歯ブラシ買う
- 蛍光灯を捨てる
- 家賃
- 健康保険料
[ツッコミを入れる]