JavaScript
JavaScriptとは

JavaScriptはWebページを閲覧するブラウザの上で作動する簡単なプログラムです。 これによってWebページを動的に変化させることができます。つまりWebページをみている側 の反応に応じて別の対応をさせることができます。
JavaScriptの書き方

JavaScriptは次のように書きます。

<SCRIPT LANGUAGE="JavaScript1.3">
<!---
JavaSriptのソース
//--->
</SCRIPT >

ここで<!---と--->はその間の文書はhtml文書としては、表示しない コメントであることを意味します。 これはJavaScript1.3に対応していないブラウザで表示した時、そのソースが表示されてしまうことを 防ぐためです。また、JavaScript1.3はJavaScript1.1, JavaScript1.2, JavaScriptとすることができます。 そのときはソースもそれに対応したものにします。 機能的にはJavaScript1.3が最も進んでいますが、古いものしかつかえないブラウザもあることを 考える必要もあります。

JavaScriptを無効にしている場合あるいは対応していないブラウザへのメッセージ の表示をする

つぎのように書きます。このメッセージはJavaScriptが有効の時は表示されません。

<NOSCRIPT >
このページはJavaScript1.3に対応しています。
</NOSCRIPT>

コメントの書き方、および文章の区切り方

次の例のようにします。

<SCRIPT LANGUAGE="JavaScript">
<!---
//この１行はコメントです。表示されません。
/* この間は
すべてコメントです。表示されません。
何を書いても表示されません。 */
//--->
</SCRIPT>

コメントを書くには上の例のように/*と*/でコメント部分をはさむかあるいは //のあとに書きます。//のあとはそれ以降の１行がコメントとしてあつかわれます。
文章の区切りは ; で示します。これで明示しないとたとえ改行がしてあっても １行として扱われます。

オブジェクト・プロパティ・メソッド

JavaScriptではブラウザの各構成要素や情報をオブジェクトとして取り扱い、この値を変更したり 値に応じて処理を変えたりできます。オブジェクトはブラウザが持っている部品や情報のナビゲータオブジェクトと 組み込みオブジェクトからなります。
ナビゲータオブジェクトは階層構造をもち、 最も上の階層にはwindow, screen, navigator, eventのオブジェクトがあります。 この下にさらにオブジェクトがあります。たとえばwindowオブジェクトはFrame, document, location, historyの オブジェクトを持ちます。 他方、組み込みオブジェクトは Date, Math, string, Array, function, Object, Boolean, Number, RegularExpression などがあります。説明はここではしませんが、あとで例を出した時に順に説明します。

プロパティ　 オブジェクトは属性をもっています。属性のことをプロパティといいます。 たとえば windowオブジェクトはdocumentオブジェクトを持ちます。 これはHTMLファイルを操作したり、その情報を操作するオブジェクトです。
これのプロパティとしてはbgColor, fgColor, lastModified, URL, linkColorなどがあります。 これは順に背景の色、テキストの色、ファイルの最終更新日、現在のURL、リンクの色です。 このとき、次のようにするとこれを変更できます。これ以外のプロパティの変更はあとで述べます。 ここで変更した値はHTML文章の中での変更より優先されます。

<SCRIPT LANGUAGE="JavaScript">
<!---
document.bgColor="#FFAAFF"
document.fgColor="#FF0000"
document.linkColor="#00AAFF"
document.vlinkColor="#00AAFF"
document.alinkColor="#00AAFF"
//--->
</SCRIPT>

上から順に、 背景色、文字の色、リンクの色、以前行ったことのあるリンク、現在アクティブなリンクの色 を変更します。 色の指定は色番号の項を参照してください。

メソッド　メソッドはオブジェクトに対して動作を指定します。 メソッドはオブジェクトの次に.(ピリオド)で区切って、オブジェクト.メソッドのように 書きます。たとえば document.write()があります。これは文字を書き出すのに用います。 括弧の中には書き出す文字を"で囲んで書きます。また、タグを書くこともできます。 このときは、タグとして評価されます。次の例を参照してください。

<SCRIPT LANGUAGE="JavaScript1.3">
<!---
document.open();
document.write("文字の例です。<BR>");
document.write("<B>文字の例です。</B><BR>");
document.write("<FONT COLOR=\"yellow\">文字の例です。 </FONT><BR>");
document.write("文字の例です。"+"文字をつなげます。<BR>");
document.write("<IMG SRC='back01.gif' ALT='back01.gif' WIDTH='100' HEIGHT='60' ><BR>");
document.close();
//--->
</SCRIPT >

document.open()は引数なしで文書の記述が始まったことをしめします。 この時以前に表示されていた文字は消去されます。
次に、 文書の記述をします。 最後にdocument.close()で文書の記述を終わらせます。 document.open()は省略可能ですが、document.close()は記述するようにしてください。

この例では文字列の最後には<BR>を出力して改行をするようにしています。 これを書かなければ改行は行われません。 また字体を太字にしたり、色を変えたりしています。文字を連結するには+で連結します。 長い文書はエラーが発生することがありますので長い文書は区切って＋で連結することにします。 ここで注意することとして"を出力するためには\"を用いることに注意します。
次の行は画像back01.gifを出力しています。

この例を表示させるにはここをクリックしてください。

イベントハンドラ　ページが読み込まれたり、マウスがクリックされたとか マウスが離れたとか特定の動作をイベントという。 このようなイベントが起こった時にスクリプトプログラムの実行を開始することができます。 このようなイベントの取得、つまりそれが起こったことをしらせるものをイベントハンドラという。 たとえばイベントハンドラ名＝関数、あるいはスクリプトで設定します。 ここで関数については次を参照してください。

関数　
関数とは一連の処理をまとめたものです。　たとえばウインドウを開いてそこの文字を表示したり、 時刻を表示したり、あるいは計算をしたりする数学の関数も関数です。 関数は通常は<HEAD>タグの中で行い、呼び出しは<BODY>タグの 中で行います。なぜならば関数が定義されないうちに呼び出されるのを防ぐためです。
関数の定義は次のようにします。

function 関数名(引数、引数、引数、...){処理手続き }

ここで引数は関数に渡す値のことです。引数がないときは括弧だけをかいておき 引数は書きません。 関数名は以下に述べるような約束を満足すれば、自由につけることができます。

関数を呼び出すときはイベントハンドラのところで述べたように 関数名(引数、引数、...)と書いて呼び出します。
関数名をつけるときの約束

予約語　次の語はシステムであらかじめ使われているので 個人で定義した関数名として使用することはできません。

abstract, boolean, break, byte, case, catch, char, class, const, continue, defalt, delete, do,
double, else, extends, false, final, finally, float, for, function, goto, if, implements, import, in,
instanceof, int, interface, long, native, new, null, package, private, protected, public, return,
short, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof, var, void, while, with

変数　変数は値をいれておく箱のような物と考えればよいでしょう。 変数は次のようにして設定します。

var 　変数名 = 値

変数名は関数名と同じ規則を満足すれば自由に設定できます。ここで =は値を代入することをあらわします。

演算子　演算子とは数値の計算あるいは比較に用いる記号のことです。 算術演算子には次のようなものがあります。

　 =　 変数に値を代入する
　+ 　 加法
　 -　 減法
　*　乗算
　/　割り算
　%　割り算であまりを求める
　++　値を1増やす。(インクリメント)
　--　値を1減らす。(デクリメント)
"文字列Ａ"+"文字列B"文字列Ａと文字列Ｂをつなげる
"文字列Ａ"+="文字列B"文字列Ａのあとに文字列Ｂを追加する

インクリメントとデクリメントの意味は次のようです。

　 a=b++　 a=b を実行してからb=b+1
　a=b-- 　 a=bを実行してからb=b-1
　 a=++b　 b=b+1を実行してからa=b
　a=--b　b=b-1を実行してからa=b

比較演算子については次のようになります。aとbを比較して真の時はtrueの値を返し、偽のときはfalseの値を返す。

　 a == b　 aと bは等しい
　a! == b 　 a とbは等しくない
　 a < b　 aはbより小さい
　a <= b　aはbより小さいか等しい
　 a > b　 aはbより大きい
　a>= b 　 a はbより大きいか等しい

論理演算子について述べます。

　 a && b　 a かつb
　a || b 　 a またはb
　 a ! b　 a はbでない

条件演算子は条件式　? a:b 条件式を評価して真(true)のときはaを実行し、偽の時はbを実行します。

Java Script の命令文

幾つかのよく用いる命令文について述べます。

for 文　 書式は次のようです。

for 　(初期値；条件式；増減式){　処理　}

例
document.open();
for (k=1; k<=10; k++) { document.write(k + " 回目<BR>" ); };
document.close();

まずk=1と初期値を設定して、条件式が成立していれば処理を実行します。処理を実行したあとでkを1だけ増やします。そして、条件式をしらべ真であるならば処理を実行します。 処理を実行したあとでkを1だけ増やします。これを繰り返します。

例
for (k=1; k<=10000; k++) { ; }

これは時間稼ぎをする時に用います。数値を増やすと時間稼ぎをする時間は長くなります。

この例を表示させるにはここをクリックしてください。

変数の宣言

var 名前 = 値

varのあとに変数が宣言されて、値が代入されます。

例
var k =1;
var youbi = " 日曜日 " ;

最初の例では変数kが宣言されて1が代入されます。 次の例では変数youbiが宣言されて日曜日が代入されます。文字列を代入する時は 上の例のように"で囲みます。

while 文　 書式は次のようです。

while　(条件式){　処理　}

条件式が真の間は処理を繰り返します。

例
document.open();
var k =1;
while (k <=10) {document.write(k + " 回目<BR>".fontsize(5) );
k ++;
};
document.close();

この例を表示させるにはここをクリックしてください。

ここで.fontsize(5)はフォントの大きさを5に変更します。

if　文

ｉｆ文は条件式に応じて条件式が真のときは処理1を実行しそれ以外のときは処理2を実行します。 処理2は省略することもできます。書式は次のようになります。

if (条件式) { 処理1 }
else {処理2 }

例
document.open();
var now= new Date(); //new Date()は現在の日付を now 変数に代入します
var k = now.getHours();//now 変数から時間を取り出します
if (k<6) {document.write("まだ早朝です ".fontsize(6) ); }; //最初の if は else　がない
if (( k >=6 && k<= 20) ) {document.write(" もう起きてください".fontsize(6) ); }
else {document.write(" もう寝ましょう ".fontsize(6)); };
document.close();

この例を表示させるにはここをクリックしてください。

戻る

Java Scriptの例

次の例を見てください。

ファイルの読み込み日時と時間を表示する

次のようにして書きます。

var today は変数todayに日付を代入します。new Date()は日付を取得します。

var today = new Date();

getYear()メソッドは西暦を取り出します。 getMonth()メソッドは月を取り出します。ただし、１月は０から始まる整数なので 1を足しておきます。 getDate()メソッドは日を取り出します。

document.write("<B>" + "ページ読み込み日時： " + today.getYear() + "年" + (today.getMonth()+1)
+ "月" + today.getDate() + "日 " + "</B>" + "<BR>");

getHours()は時間を取り出します。 getMinutes()メソッドは分を取り出します。 getSeconds()メソッドは秒を取り出します。

document.write("<B>" + "ページ読み込み時刻： " +today.getHours() + "時" + today.getMinutes()+"分"+ today.getSeconds()+"秒" +"</B>" +"<P>");

曜日を表示する

このためには配列変数を導入して次のようにします。 ここで曜日が土曜日と日曜日は色を変えるために "日".fontcolor("red")のように"日"の後に .fontcolor("red")を加えています。 このようにプロパティを加えることで文字の色を変化させることができます。 土曜日の色を変えるのも同じ方法です。 today.getDay()はtodayも曜日を日曜日から順に0,1,2,...,6であたえます。 そこで配列の引数にこれを与えて対応する曜日を表示させます。

曜日配列変数の定義

youbi= new Array(7);
youbi[0] ="日".fontcolor("red");
youbi[1] ="月";
youbi[2] ="火";
youbi[3] ="水";
youbi[4] ="木";
youbi[5] ="金";
youbi[6] ="土".fontcolor("blue");

日付の取得

var today = new Date();

日付の書き出し

document.write("<B>" + "ページ読み込み日時：" + today.getYear() + "年"+(today.getMonth()+1)
+ "月" +today.getDate() + "日 " +"(" + youbi[today.getDay()] + ")" + "</B>" +"<BR>");

時間を午前、午後で表示する

today.getHours()の時間に応じて処理を分けます。そのため if 文を用います。 if 文では条件は括弧()の中に書きます。条件を満足する場合の実行することは { }の中に書きます。条件を満足しない時に実行することがあればそれは else 以下で { }の中に書きます。

時間の取得

var h = today.getHours();

午前、午後に応じて書き出す。if 以下で午前中の処理 h<12 をおこない、else 以下で午後の処理を実行する。

if ( h <12)
{
document.write("<B>" + "ページ読み込み時刻： " + "午前 " + h + "時" + today.getMinutes()+"分"+ today.getSeconds()+"秒" +"</B>" +"<P>");
}
else
{h = h-12;
document.write("<B>" + "ページ読み込み時刻： " +"午後 " + h + "時" + today.getMinutes()+"分"+
today.getSeconds()+"秒" +"</B>" +"<P>");
}

西暦を元号で表示する

最近は用いる機会は少なくなりましたが、元号で表示したい場合もあると思いますので その方法を書いておきます。昭和と平成しか対応していません。また、平成の最初ですこし修正が必要ですが それは各自に任せます。

曜日配列変数の定義

youbi= new Array(7);
youbi[0] ="日".fontcolor("red");
youbi[1] ="月";
youbi[2] ="火";
youbi[3] ="水";
youbi[4] ="木";
youbi[5] ="金";
youbi[6] ="土".fontcolor("blue");

日付の取得 yは西暦が入ります。gengouは昭和あるいは平成が入ります。

var today = new Date();
var y = today.getYear();
var gengou ="平成";

西暦から昭和あるいは平成での年を計算します

if (y < 1988)
{
y = y -1925;
gengou = "昭和";
};
if ( y == 1988)
{
y = "元"
};
if (y > 1988)
{
y = y -1988;
};

日付の書き出し

document.write("<B>" + "ページ読み込み日時：" + gengou + y + "年"+ (today.getMonth()+1) + "月"
+today.getDate() + "日 " +"(" + youbi[today.getDay()] + ")" +"</B>" +"<BR>");

この例はここをクリックしてください

ページの最終更新日を表示します

最終更新日のデータはdocument オブジェクトのlastModifiedプロパティが持っています。 それを表示させたのが 最初の行です。これではそっけないので少し手を加えます。それが２行目と３行目です。 最終更新日と最終更新時間を表示します。 ここではdocument.lastModified.substr(m,n)メソッドを用います。これは最初を0として、m番目からn 文字を抜き出すメソッドです。 文字の数え方はunicodeなので英語も日本語も１文字として数えます。

最終更新日を書き出したもの

document.write("<B>"+"ページ最終更新日： "+ document.lastModified +"</B>"+"<BR>");

年、月、日を取り出して並べ替えて表示する。

document.write("<B>"+"ページ最終更新日： "+ document.lastModified.substr(6,4)
+"年" + document.lastModified.substr(0,2)
+"月"+ document.lastModified.substr(3,2) +"日 "+"</B>"+"<BR>");
document.write("<B>"+"ページ最終更新時間： "+ document.lastModified.substr(11,2) +"時"
+ document.lastModified.substr(14,2) +"分" + document.lastModified.substr(17,2) +"秒"+"</B>"+"<P>");

日付の頭のゼロを取り除く

これでよいのですが、もう少し凝ってみます。つまり08ではなくて8のように表示させることを考えます。日付も 一桁の数のとき０が頭につかないようにします。それにはif文を用いて分岐させます。 まず年、月と日を表す変数y, m, dを準備します。 そこには対応する年、月、日を更新情報から取り出して代入しておきます。 つぎに、document.lastModifiedから日付の情報を取り出し、 その最初の文字を調べます。それが0であればその次の文字からmとdに代入し、そうでなければそのまま代入します。 次のようになります。

更新データの取り出し yは年、mは月、dは日を表す変数

var y = document.lastModified.substr(6,4);
var d = document.lastModified.substr(3,2);
var m = document.lastModified.substr(0,2);

0の修正

if ( document.lastModified.substr(0,1)=="0" ) {m = document.lastModified.substr(1,1)};
if (document.lastModified.substr(3,1) == "0") { d = document.lastModified.substr(4,1)};

更新データの書き出し

document.write("<B>"+"ページ最終更新日： "+ y +"年"+ m +"月"
+ d +"日 "+"</B>"+"<BR>");

時刻の表示の修正

時刻も同じようにして修正することができます。

時刻の修正

変数の定義

var h = document.lastModified.substr(11,2);
var m = document.lastModified.substr(14,2);
var s = document.lastModified.substr(17,2);

0の修正

if ( document.lastModified.substr(11,1)=="0" ) {h = document.lastModified.substr(12,1)};
if ( document.lastModified.substr(14,1)=="0" ) {m = document.lastModified.substr(15,1)};
if ( document.lastModified.substr(17,1)=="0" ) {s = document.lastModified.substr(18,1)};

時間の書き出し

document.write("<B>"+"ページ最終更新時間： "+ h +"時"+ m +"分"+ s +"秒"+"</B>"+"<P>");

さて、上の最終更新日は曜日の情報がありません。これを表示させます。 そのためにはこれを計算すればよいのですが、ここでは上のgetDayメソッドを用いて取り出します。 そのため、最終更新日の日付を定義してこれから読み出します。

最終更新日の西暦、月、日の情報を得る。

var y= document.lastModified.substr(6,4);
var m= document.lastModified.substr(0,2);
var d= document.lastModified.substr(3,2);

最初の0の処理 これをしておかないと整数化してから日付の設定がうまくいきません。

if ( document.lastModified.substr(0,1)=="0" ) {m = document.lastModified.substr(1,1)};
if (document.lastModified.substr(3,1) == "0") { d = document.lastModified.substr(4,1)};

整数化する。

var yn = parseInt(y);
var mn = parseInt(m);
var dn = parseInt(d);

これから新しい日付を設定する。

Newday = new Date();
Newday.setDate(dn);
Newday.setMonth(mn-1);
Newday.setYear(yn);

曜日配列変数の定義

youbi= new Array(7);
youbi[0] ="日".fontcolor("red");
youbi[1] ="月";
youbi[2] ="火";
youbi[3] ="水";
youbi[4] ="木";
youbi[5] ="金";
youbi[6] ="土".fontcolor("blue");

日付と曜日を書き出す

document.write("<B>"+"ページ最終更新日： "+ document.lastModified.substr(6,4) +"年"+ m +"月"
+ d +"日 " +"("+ youbi[Newday.getDay()] +")"+"</B>"+"<BR>");

この例はここをクリックしてください

日に応じた連絡を表示する。時間に応じてメッセージを表示する

ページを読み込んだ時、日付に応じて連絡事項を表示します。 また、ページを読み込んだ時間に応じてページに異なった挨拶を表示します。 これを行うためには日付または時間に応じてあいさつ文を設定し、それを表示します。 以下ではこのような例をあげます。

曜日配列変数の定義 土曜日と日曜日は色を変える。

youbi= new Array(7);
youbi[0] ="日".fontcolor("red");
youbi[1] ="月";
youbi[2] ="火";
youbi[3] ="水";
youbi[4] ="木";
youbi[5] ="金";
youbi[6] ="土".fontcolor("blue");

メッセージの種類を規定する。月ごとに１０成分の配列変数を定義して用います。 空欄は必要に応じて埋めてください。

１月のメッセージ

mes1 = new Array(10);
mes1[0] = "あけましておめでとうございます";
mes1[1] = "今日から授業開始です";
mes1[2] = "成人の日です。";
mes1[3] = "後期試験が始まります。";
mes1[4] = "共通一次試験です。";
mes1[5] = "";
mes1[6] = "";
mes1[7] = "";
mes1[8] = "";
mes1[9] = "";

2月のメッセージ

mes2 = new Array(10);
mes2[0] = "建国記念日です";
mes2[1] = "後期の授業が終了です";
mes2[2] = "経済学部一般入試です。";
mes2[3] = "";
mes2[4] = "";
mes2[5] = "";
mes2[6] = "";
mes2[7] = "";
mes2[8] = "";
mes2[9] = "";

3月のメッセージ

mes3 = new Array(10);
mes3[0] = "春分の日です";
mes3[1] = "中央大学卒業式です";
mes3[2] = "";
mes3[3] = "";
mes3[4] = "";
mes3[5] = "";
mes3[6] = "";
mes3[7] = "";
mes3[8] = "";
mes3[9] = "";

4月のメッセージ

mes4 = new Array(10);
mes4[0] = "中央大学経済学部入学式です";
mes4[1] = "経済学部ガイダンスが始まります";
mes4[2] = "経済学部授業が始まります";
mes4[3] = "ゼミの登録が始まります";
mes4[4] = "みどりの日です";
mes4[5] = "";
mes4[6] = "";
mes4[7] = "";
mes4[8] = "";
mes4[9] = "";

5月のメッセージ

mes5 = new Array(10);
mes5[0] = "メーデーです";
mes5[1] = "憲法記念日です";
mes5[2] = "国民の祝日です";
mes5[3] = "子供の日です";
mes5[4] = "";
mes5[5] = "";
mes5[6] = "";
mes5[7] = "";
mes5[8] = "";
mes5[9] = "";

6月のメッセージ

mes6 = new Array(10);
mes6[0] = "";
mes6[1] = "";
mes6[2] = "";
mes6[3] = "";
mes6[4] = "";
mes6[5] = "";
mes6[6] = "";
mes6[7] = "";
mes6[8] = "";
mes6[9] = "";

7月のメッセージ

mes7 = new Array(10);
mes7[0] = "中央大学創立記念日です";
mes7[1] = "海の日です";
mes7[2] = "前期試験が始まります";
mes7[3] = "前期試験が終わります";
mes7[4] = "夏休みが始まります";
mes7[5] = "前期補講が始まります。";
mes7[6] = "";
mes7[7] = "";
mes7[8] = "";
mes7[9] = "";

8月のメッセージ

mes8 = new Array(10);
mes8[0] = "";
mes8[1] = "";
mes8[2] = "";
mes8[3] = "";
mes8[4] = "";
mes8[5] = "";
mes8[6] = "";
mes8[7] = "";
mes8[8] = "";
mes8[9] = "";

9月のメッセージ

mes9 = new Array(10);
mes9[0] = "敬老の日です";
mes9[1] = "後期授業が始まります";
mes9[2] = "秋分の日です";
mes9[3] = "";
mes9[4] = "";
mes9[5] = "";
mes9[6] = "";
mes9[7] = "";
mes9[8] = "";
mes9[9] = "";

10月のメッセージ

mes10 = new Array(10);
mes10[0] = "体育の日です";
mes10[1] = "";
mes10[2] = "";
mes10[3] = "";
mes10[4] = "";
mes10[5] = "";
mes10[6] = "";
mes10[7] = "";
mes10[8] = "";
mes10[9] = "";

11月のメッセージ

mes11 = new Array(10);
mes11[0] = "中央大学大学祭が始まります";
mes11[1] = "文化の日です";
mes11[2] = "勤労感謝の日です";
mes11[3] = "";
mes11[4] = "";
mes11[5] = "";
mes11[6] = "";
mes11[7] = "";
mes11[8] = "";
mes11[9] = "";

12月のメッセージ

mes12 = new Array(10);
mes12[0] = "天皇誕生日です";
mes12[1] = "冬休みが始まります";
mes12[2] = "";
mes12[3] = "";
mes12[4] = "";
mes12[5] = "";
mes12[6] = "";
mes12[7] = "";
mes12[8] = "";
mes12[9] = "";

時間のメッセージ

mes0 = new Array(24);
mes0[0] = "0時のメッセージ";
mes0[1] = "1時のメッセージ";
mes0[2] = "2時のメッセージ";
mes0[3] = "3時のメッセージ";
mes0[4] = "4時のメッセージ";
mes0[5] = "5時のメッセージ";
mes0[6] = "おはようございます";
mes0[7] = "おはようございます";
mes0[8] = "8時のメッセージ";
mes0[9] = "9時のメッセージ";
mes0[10] = "10時のメッセージ";
mes0[11] = "11時のメッセージ";
mes0[12] = "そろそろお昼です";
mes0[13] = "13時のメッセージ";
mes0[14] = "14時のメッセージ";
mes0[15] = "15時のメッセージ";
mes0[16] = "16時のメッセージ";
mes0[17] = "17時のメッセージ";
mes0[18] = "18時のメッセージ";
mes0[19] = "19時のメッセージ";
mes0[20] = "こんばんわ。おげんきですか";
mes0[21] = "21時のメッセージ";
mes0[22] = "22時のメッセージ";
mes0[23] = "23時のメッセージ";

時間、月と日に応じてメッセージを選択する。何もない時はこれを表示します。

var mess = "アクセスありがとうございます".fontcolor("#FF00AA");

m=月, d=日に対応するメッセージを選ぶ

function getmessage(m,d) {
if (m==1&&d==1){mess=mes1[0]};
if (m==1&&d==6){mess=mes1[1]};
if (m==1&&d==14){mess=mes1[2]};
if (m==1&&d==15){mess=mes1[3]};
if (m==2&&d==11){mess=mes2[0]};
if (m==2&&d==22){mess=mes2[2]};
if (m==3&&d==20){mess=mes3[0]};
if (m==3&&d==25){mess=mes3[1]};
if (m==4&&d==1){mess=mes4[0]};
if (m==4&&d==4){mess=mes4[1]};
if (m==4&&d==8){mess=mes4[2]};
if (m==4&&d==11){mess=mes4[3]};
if (m==4&&d==29){mess=mes4[4]};
if (m==5&&d==1){mess=mes5[0]};
if (m==5&&d==3){mess=mes5[1]};
if (m==5&&d==4){mess=mes5[2]};
if (m==5&&d==5){mess=mes5[3]};
if (m==7&&d==6){mess=mes7[0]};
if (m==7&&d==20){mess=mes7[1]};
if (m==9&&d==15){mess=mes9[0]};
if (m==9&&d==21){mess=mes9[1]};
if (m==9&&d==23){mess=mes9[2]};
if (m==10&&d==8){mess=mes10[0]};
if (m==11&&d==1){mess=mes11[0]};
if (m==11&&d==3){mess=mes11[1]};
if (m==11&&d==23){mess=mes11[2]};
if (m==12&&d==23){mess=mes12[0]};
if (m==12&&d==26){mess=mes12[1]};
if (m==0&&d==0){mess=mes0[0]};//ここからは時間に応じたメッセージの表示 m=0, d=時間
if (m==0&&d==1){mess=mes0[1]};
if (m==0&&d==2){mess=mes0[2]};
if (m==0&&d==3){mess=mes0[3]};
if (m==0&&d==4){mess=mes0[4]};
if (m==0&&d==5){mess=mes0[5]};
if (m==0&&d==6){mess=mes0[6]};
if (m==0&&d==7){mess=mes0[7]};
if (m==0&&d==8){mess=mes0[8]};
if (m==0&&d==9){mess=mes0[9]};
if (m==0&&d==10){mess=mes0[10]};
if (m==0&&d==11){mess=mes0[11]};
if (m==0&&d==12){mess=mes0[12]};
if (m==0&&d==13){mess=mes0[13]};
if (m==0&&d==14){mess=mes0[14]};
if (m==0&&d==15){mess=mes0[15]};
if (m==0&&d==16){mess=mes0[16]};
if (m==0&&d==17){mess=mes0[17]};
if (m==0&&d==18){mess=mes0[18]};
if (m==0&&d==19){mess=mes0[19]};
if (m==0&&d==20){mess=mes0[20]};
if (m==0&&d==21){mess=mes0[21]};
if (m==0&&d==22){mess=mes0[22]};
if (m==0&&d==23){mess=mes0[23]};
}

日付の取得とメッセージの設定

var today = new Date() ;

getmessage(today.getMonth()+1,today.getDate());

日付の書き出し

document.write("<B>" + today.getYear() + "年"+ (today.getMonth()+1) + "月" + today.getDate() + "日 " +"(" + youbi[today.getDay()] + ")"+"</B>" +"<P>");

メッセージの書き出し

document.write("<B>"+"<FONT SIZE=5>" + mess +"</FONT>" +"</B>" +"<P>");

すこし、変化を与えてみます。

document.write("<SPAN STYLE='border: 5px outset; background-color: aqua'>"+ "<FONT SIZE=6>" + mess +"</FONT>"+"</SPAN>"+"<P>")

時間に応じたメッセージを設定します。関数をm=0, d = 時間 として用います

getmessage(0,today.getHours());

メッセージの書き出し

document.write("<SPAN STYLE='border: 5px outset; background-color: aqua'>"+ "<FONT SIZE=7>" + mess +"</FONT>"+"</SPAN>"+"<P>")

この例はここをクリックしてください

時計を表示する

ファイルの読み込んだ時の時間を表示するのではなく、絶えず時刻を表示するような 簡単な時計機能を実現します。このためには時間を絶えず更新する必要があります。 以下ではこのような例をあげます。

時計を表示させる枠の表示

<FORM NAME="clock1">
<INPUT TYPE="text" NAME="watch1" STYLE="border: 5px outset; background-color: white; font-weight: bold; font-size: 36pt; color: #FF0080" SIZE=7>
</FORM>

var stoptime = 0;//時計を表示する時間をカウントする変数

var clock;//時刻を入れる変数

function timewatch(){
if (stoptime <1200){ //360秒後に時計を止める処理, stoptimeは時計を表示する時間をカウントする変数

stoptime ++ ;
var time = new Date();//時刻

var hour = time.getHours();//時間

var min = time.getMinutes();//分

var sec = time.getSeconds();//秒

if (hour<10) {
hour = "0" + hour;} ;
if (min<10) {
min = "0"+ min;} ;
if (sec<10) {
sec = "0" +sec;} ;
clock = hour + ":" + min+":"+sec;

setTimeout("timewatch()",300); //300ミリ秒でtimewatch()は繰り返される

//次の行のコメントを取るとステータス行に時刻を表示します。

//window.status="現在時刻: "+clock;

document.clock1.watch1.value = clock; // 時刻を設定する

} };//timewatch() の定義

timewatch();//時計を動作させる

時計の表示の例はここをクリックしてください

ステータス行にメッセージを表示する

ステータス行は情報を表示するのに便利です。

var stoptime = 0;//メッセージを表示する回数をカウントする変数
var j=0;//メッセージを指定する変数

msg = new Array(16);//長さ16の配列変数の定義

msg[0]="☆☆☆☆☆☆　こんにちわ　☆☆☆☆☆　こんにちわ　☆☆☆☆☆☆　こんにちわ　☆☆☆☆☆";
msg[1]="☆☆☆☆☆☆　こんにちわ　☆☆☆☆☆　こんにちわ　☆☆☆☆☆☆　こんにちわ　☆☆☆☆☆";
msg[2]="☆☆☆☆☆☆　私のホームページへようこそいらっしゃいました　☆☆☆☆☆☆☆";
msg[3]="☆☆☆☆☆☆　私のホームページへようこそいらっしゃいました　☆☆☆☆☆☆☆";
msg[4]="☆☆☆☆☆☆　私のホームページへようこそいらっしゃいました　☆☆☆☆☆☆☆";
msg[5]="--------------　中央大学の吉野ゼミです　-------------";
msg[6]="--------------　中央大学の吉野ゼミです　-------------";
msg[7]="--------------　中央大学の吉野ゼミです　-------------";
msg[8]="-----------　どうぞ楽しいひと時を　--------";
msg[9]="-----------　どうぞ楽しいひと時を　--------";
msg[10]="-----------　どうぞ楽しいひと時を　--------";
msg[11]="---------お過ごしください---------";
msg[12]="---------お過ごしください---------";
msg[13]="☆☆☆☆☆　どうぞ楽しいひと時をお過ごしください　☆☆☆☆☆";
msg[14]="☆☆☆☆☆　どうぞ楽しいひと時をお過ごしください　☆☆☆☆☆";
msg[15]="☆☆☆☆☆　どうぞ楽しいひと時をお過ごしください　☆☆☆☆☆";

function Event1() {
if (stoptime <50){
stoptime ++ ;
if (j == msg.length){
j=0;};
if (j <= msg.length){
window.status = msg[j];
j++;
setTimeout("Event1()",500);//500ミリ秒後に関数Event1()を呼び出す
};
}//stoptime<50である時の処理
else {
window.status=" ";
};
};//function Event1() の定義終わり
Event1();//関数 Event1() を呼び出し

例はここをクリックしてください

戻る