Java Scriptの参考書
個人サイトでよく見かける「日記帳」ですが、ダラダラと長文が続くだけで読むのも付かれてしまうものです。 だからといって、１日１日を１つのファイルにしていたのでは１年で３６５ファイル、その数も膨大になります。 CGIを使えばそれなりのことができるのでしょうが、そこまでやるのも・・・
１月を１ページにまとめて、任意の日にちをクリックすることでその日の内容を表示します。 １画面に１日の内容なので、読み手もその気になるかもしれません。 当然だけど、複数の日にちの内容を同時に表示するには改造が必要です。
HEAD部分にスタイルとスクリプトを記述します。 内容部分のスタイルもここに記述します。
BODY部に各日にちの内容をDIV要素に記述します。 31日あれば、DIV要素は初期の表示分も含めて32個指定します。
テーブル内のA要素にHREF属性でリンク先を「JavaScript:ChangeDiary(x)」にします。 ただし、xは「0」が初期表示用、「1」からが各日にちに対応します。
それほど改造の余地は無いでしょうが、初期表示を無くすことやスタイルの変更などが簡単に出来ます。
IE4,IE5,NN4,N6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift-jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Diary</title>
<style type="text/css">
<!--
a{
text-decoration: none;
}
h1{
font-size: 24pt;
font-weight: bold;
color: #c30;
margin: 0;
padding: 0 0 0 10px;
border-style: solid;
border-color: #f00;
border-width: 0px 0px 1px 20px;
}
div.tbl{
position: absolute;
top: 70;
left: 20;
}
div.day{
position: absolute;
top: 70;
left: 220;
margin: 0%;
padding: 10px 20px 10px 10px;
border: 1pt solid #f90;
background-color: #fcc;
visibility: hidden;
}
-->
</style>
<script language="JavaScript">
<!--
//ブラウザのバージョンチェック
var brw_v = navigator.appVersion.charAt(0);
var brw_n = navigator.appName.charAt(0);
var iIE4 = false;
var iNN4 = false;
if((brw_v >= 4)&&(brw_n == "M"))iIE4 = true;
if((brw_v >= 4)&&(brw_n == "N"))iNN4 = true;
var bDay = -1; //初期に何も表示しないなら「0」とする
function ChangeDiary(nDay){
//HIDE
if(document.getElementById){
if(document.getElementById("iL" + bDay)){
document.getElementById("iL" + bDay).style.visibility = "hidden"
}
}else if(document.all){
if(document.all("iL" + bDay)){
document.all("iL" + bDay).style.visibility = "hidden"
}
}else if(document.layers){
if(document.layers["iL" + bDay]){
document.layers["iL" + bDay].visibility = "hide"
}
}
//SHOW
if(document.getElementById){
document.getElementById("iL" + nDay).style.visibility = "visible"
}else if(document.all){
document.all("iL" + nDay).style.visibility = "visible"
}else if(document.layers){
document.layers["iL" + nDay].visibility = "show"
}
//BUFFER
bDay = nDay;
}
// -->
</script>
</head>
<body onload="JavaScript:ChangeDiary(0)">
<h1>日記帳</h1>
<div class="tbl">
<table border="1">
<tr>
<td>日</td>
<td>月</td>
<td>火</td>
<td>水</td>
<td>木</td>
<td>金</td>
<td>土</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="JavaScript:ChangeDiary(1)">1</a></td>
</tr>
<tr>
<td><a href="JavaScript:ChangeDiary(2)">2</a></td>
<td><a href="JavaScript:ChangeDiary(3)">3</a></td>
<td><a href="JavaScript:ChangeDiary(4)">4</a></td>
<td><a href="JavaScript:ChangeDiary(5)">5</a></td>
<td><a href="JavaScript:ChangeDiary(6)">6</a></td>
<td><a href="JavaScript:ChangeDiary(7)">7</a></td>
<td><a href="JavaScript:ChangeDiary(8)">8</a></td>
</tr>
<tr>
<td><a href="JavaScript:ChangeDiary(9)">9</a></td>
<td><a href="JavaScript:ChangeDiary(10)">10</a></td>
<td><a href="JavaScript:ChangeDiary(11)">11</a></td>
<td><a href="JavaScript:ChangeDiary(12)">12</a></td>
<td><a href="JavaScript:ChangeDiary(13)">13</a></td>
<td><a href="JavaScript:ChangeDiary(14)">14</a></td>
<td><a href="JavaScript:ChangeDiary(15)">15</a></td>
</tr>
<tr>
<td><a href="JavaScript:ChangeDiary(16)">16</a></td>
<td><a href="JavaScript:ChangeDiary(17)">17</a></td>
<td><a href="JavaScript:ChangeDiary(18)">18</a></td>
<td><a href="JavaScript:ChangeDiary(19)">19</a></td>
<td><a href="JavaScript:ChangeDiary(20)">20</a></td>
<td><a href="JavaScript:ChangeDiary(21)">21</a></td>
<td><a href="JavaScript:ChangeDiary(22)">22</a></td>
</tr>
<tr>
<td><a href="JavaScript:ChangeDiary(23)">23</a></td>
<td><a href="JavaScript:ChangeDiary(24)">24</a></td>
<td><a href="JavaScript:ChangeDiary(25)">25</a></td>
<td><a href="JavaScript:ChangeDiary(26)">26</a></td>
<td><a href="JavaScript:ChangeDiary(27)">27</a></td>
<td><a href="JavaScript:ChangeDiary(28)">28</a></td>
<td><a href="JavaScript:ChangeDiary(29)">29</a></td>
</tr>
<tr>
<td><a href="JavaScript:ChangeDiary(30)">30</a></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="day" id="iL0">
左のカレンダーをクリックすると、ここに表示されます。
</div>
<div class="day" id="iL1">
DAY --- 1 Apr
</div>
<div class="day" id="iL2">
DAY --- 2 Apr
</div>
<div class="day" id="iL3">
DAY --- 3 Apr
</div>
<div class="day" id="iL4">
DAY --- 4 Apr
</div>
<div class="day" id="iL5">
DAY --- 5 Apr
</div>
<div class="day" id="iL6">
DAY --- 6 Apr
</div>
<div class="day" id="iL7">
DAY --- 7 Apr
</div>
<div class="day" id="iL8">
DAY --- 8 Apr
</div>
<div class="day" id="iL9">
DAY --- 9 Apr
</div>
<div class="day" id="iL10">
DAY --- 10 Apr
</div>
<div class="day" id="iL11">
DAY --- 11 Apr
</div>
<div class="day" id="iL12">
DAY --- 12 Apr
</div>
<div class="day" id="iL13">
DAY --- 13 Apr
</div>
<div class="day" id="iL14">
DAY --- 14 Apr
</div>
<div class="day" id="iL15">
DAY --- 15 Apr
</div>
<div class="day" id="iL16">
DAY --- 16 Apr
</div>
<div class="day" id="iL17">
DAY --- 17 Apr
</div>
<div class="day" id="iL18">
DAY --- 18 Apr
</div>
<div class="day" id="iL19">
DAY --- 19 Apr
</div>
<div class="day" id="iL20">
DAY --- 20 Apr
</div>
<div class="day" id="iL21">
DAY --- 21 Apr
</div>
<div class="day" id="iL22">
DAY --- 22 Apr
</div>
<div class="day" id="iL23">
DAY --- 23 Apr
</div>
<div class="day" id="iL24">
DAY --- 24 Apr
</div>
<div class="day" id="iL25">
DAY --- 25 Apr
</div>
<div class="day" id="iL26">
DAY --- 26 Apr
</div>
<div class="day" id="iL27">
DAY --- 27 Apr
</div>
<div class="day" id="iL28">
DAY --- 28 Apr
</div>
<div class="day" id="iL29">
DAY --- 29 Apr
</div>
<div class="day" id="iL30">
DAY --- 30 Apr
</div>
</body>
</html>