LESSON8:ジャバスクリプトに挑戦しよう
ジャバスクリプトについて基礎から説明をしていくと 1冊の本になってしまうのでサンプルを何本か示します。 このサンプルでこんなものだと理解してください。 サンプルのようにヘッダタグの中にスクリプトを記述します。

■サンプル1・足し算
<HTML&glt;
<HEAD&glt;
<TITLE&glt;----ジャバスクリプト/サンプル1・足し算----</TITLE&glt;
<SCRIPT LANGUAGE="JavaScript"&glt;
function calc(CL) { CL.Z.value = eval(CL.X.value)+eval(CL.Y.value) }
</SCRIPT&glt;
</HEAD&glt;
<BODY BGCOLOR="#CCFFCC"&glt;
*フォームに入力された文字列を計算する
<FORM NAME="Calc"&glt;
<INPUT TYPE="text" NAME="X" VALUE="0" SIZE=10&glt;
+<INPUT TYPE="text" NAME="Y" VALUE="0" SIZE=10&glt;
=<INPUT TYPE="text" NAME="Z" SIZE=10&glt;
<P&glt;
<INPUT TYPE="button" VALUE="計算!!" onClick="calc(this.form)"&glt;
<INPUT TYPE="reset" VALUE="Clear"&glt;
</FORM&glt;
</BODY&glt;
</HTML&glt;
サンプル1・足し算へ

■サンプル2・時刻によるメッセージ変更
<HTML&glt;
<HEAD&glt;
<TITLE&glt;サンプル2・時刻によるメッセージ変更</TITLE&glt;
<BODY&glt;
*時間によってメッセージを変える<P&glt;
</HEAD&glt;
<SCRIPT LANGUAGE="JavaScript"&glt;
<!--
var h = new Date();
var t = h.getHours();
if (t<=3) document.write("夜もふけて来ました,お休みなさい。");
  else { if (t<=7) document.write("お早うございます!!");
    else { if (t<=11) document.write("午前中です。");
     else  {  if (t<=12) document.write("今日のお昼はなんですか?");
      else  {  if (t<=16) document.write("午後です。");
        else  {  if  (t<=22) document.write("早くお家に帰りましょう。");
            else   {   if  (t<=23) document.write("さあ!!テレホーダイタイムの始まりです。");
} } } } } }
//--&glt;
</SCRIPT&glt;
</BODY&glt;
</HTML&glt;
サンプル2・時刻によるメッセージ変更へ

■サンプル3・マウスポインタでの絵の変更
<HEAD&glt;
<TITLE&glt;サンプル3・マウスポインタでの絵の変更</TITLE&glt;
<SCRIPT Language="JavaScript"&glt;
<!--
function SetIcon() {}
//--&glt;
</SCRIPT&glt;
<SCRIPT Language="JavaScript1.1"&glt;
<!--
icon = Array(2) ;
icon[0]=new Image();icon[0].src="images/ima0.png" ;
icon[1]=new Image();icon[1].src="images/ima1.png" ;
function SetIcon(flag) {
    document.images[0].src=icon[flag].src ;
}
//--&glt;
</SCRIPT&glt;
</HEAD&glt;
<BODY&glt;
*画像を変更する<P&glt;
<A HREF="#" onMouseOver="SetIcon(1)" onMouseOut="SetIcon(0)"&glt;
<IMG SRC="images/ima0.png" ALT="icon" WIDTH="100" HEIGHT="100" BORDER=0&glt;
</A&glt;
</BODY&glt;
</HTML&glt;
サンプル3・マウスポインタでの絵の変更へ

■サンプル4・アニメーション
<HTML&glt;
<HEAD&glt;
<TITLE&glt;サンプル3・アニメーション</TITLE&glt;
<SCRIPT Language="JavaScript"&glt;
<!--
function anim() {}
//--&glt;
</SCRIPT&glt;
<SCRIPT Language="JavaScript1.1"&glt;
<!--
var ImageSet=0 ;
ANIM = Array(2) ;
ANIM[0]=new Image();ANIM[0].src="images/ima0.png" ;
ANIM[1]=new Image();ANIM[1].src="images/ima1.png" ;
function anim() {
    document.Anim.src=ANIM[ImageSet].src ;
    ImageSet++ ;
    if (ImageSet &glt; 1 ){ ImageSet=0 }
    setTimeout("anim()",500);
} //--&glt; </SCRIPT&glt; </HEAD&glt; <BODY onLoad="anim()"&glt; *アニメ<P&glt; <IMG SRC="images/ima0.png" NAME="Anim" ALT="Animation" WIDTH="100" HEIGHT="100" BORDER=0&glt; </BODY&glt; </HTML&glt;
サンプル4・アニメーションへ

○この他にもボタンなどの処理やフォームの処理などたくさん あるのですが、以上でおしまいにさせていただきます。

※以上が1998年までに作成したものをもとにした内容です。その後HTMLの状況はずいぶんと変化しました。 最近は,CSS(スタイルシート)を使うページがほとんどです。 スタイルシートを使い内容と表示を分離する考えが取り入れられフレーム表示は流行では なくなったようです。個人的な好みですが,全体が再表示されるスタイルシートによる配置を つかったページは、好きではないので、このサイトはフレーム表示のままですが、 ちょっとだけ、CSSを使っています。メインのページを表示するためのCSSファイルの 内容は,下のようです。


main.css
A:link{text-decoration : underline;}
A:visited{text-decoration : underline;}
A:active{text-decoration : underline;}
A:hover{text-decoration : underline; color : "#0000ff"; background : "#7979ff";}

DIV{
	font-size : 12pt;
	margin-left : 10px;
	color="#5656ff"
}

BODY{
	font-size : 10pt;
	font-family: Verdana,Tahoma,Arial,Sans-Serif;
	margin-top : 0px;
	margin-bottom : 0px;
	margin-left : 0px;
	margin-right : 0px;
}

HR{
	color : #7979ff;
}

TABLE { 
	font-family: Verdana,Tahoma,Arial,Sans-Serif;
	font-size: 10pt;
}
PRE.LIST {
	background: #CFD9FF;
	border: 1ex solid #AAAAE6;
	padding: 1ex;
}

PRE.SNIP {
	background: #CFD9FF;
	padding: 1ex;
}

PRE.CONSOLE {
	color: #CCCCCC;
	background: #000000;
	font-family: Courier New,Courier;
	padding: 1ex;
}
P.NOTE {
	background: #CFD9FF;
	border: .5ex solid #AAAAE6;
	padding: 1ex;
}

これを<HEAD>文に <link rel="stylesheet" href="css/main.css" type="text/css"> と指定しています。
これがあるので,このサイトでは<hr>としただけでラインが水色だったり,ブラウザで文字の大きさを変えても変化が なかったりしたのです。それに気づいた人は,すでにHTMLに相当詳しいと思います。かっこいいページに出会ったら,マウスを右クリックして ソースを見る癖をつけHTMLのテクニックを磨いてください。CSSを解説したサイトもたくさんあります。 本格的に学習するには,W3C consortiumを読んで更にWebクリエイターの道をお進み下さい。 ここまで,お付き合い下さって有難うございました。

LESSON7| LESSON1