ステップ１

HomePage Lesson !

＜JavaScript＞

[基本講座]

4,スクリプトにチャレンジしてみましょう！

　HTMLタグだけではできない、動的な表現をさせるには、スクリプトを利用します。スクリプトには、 Netscape Navigator と Internet Explorer の両方に対応している「JavaScript」と、Internet Explorer のみが対応している「VBScript」があります。これらのスクリプトをHTMLの中に書込むには、タグで「ここからはスクリプトですヨ」と表示してあげます。タグは<Script language="スクリプト名"> ～ </script> で、この中に具体的なスクリプトを書込みます。

JavaScriptのサンプル

リストボックスのフォームとJavaScript を使って、ハイパーリンクを作ってみましょう

始めに、フォームでリストボックスを作ります。

リストボックスのソースコード

	<html>
	<head>
	<title>My HomePage !</title>
	</head>
	<body>
	<form method="post">
	  <select name="link" onChange="jamp(this)">
	  <option value="リンク先のファイル名１">リンク題名１
	  <option value="リンク先のファイル名２">リンク題名２
	  <option value="リンク先のファイル名３">リンク題名３
	  </select>
	</form>
	</body>
	</html>

・ method="post" でデータをスクリプトに渡します。
・ onCange="jamp(this)" でチェックボックスの選択の時に
　 スクリプトを実行（ここではリンク先へジャンプ）します。

次に、スクリプトを<head> ～ </head> タグの中に書込みます。

JavaScriptの配置

	<html>
	<head>
	 <title>My HomePage !</title>
	  <Script language="JavaScript">
		<!--JavaScript
		function jamp(parts){
		URL=parts.options[parts.selectedIndex].value;
		location=URL;
		}
		//end-->
	  </script>
	</head>
	<body>
	・
	・
	・

出来上がるとこんな感じになります。

[応用講座]

4,スクリプトを移植してみましょう！

　JavaScript を使ったサンプルを移植するには、スクリプトの大文字小文字やスペル間違い、スクリプトの配置場所などを注意する必要が有ります。サンプルのスクリプトは、このまま、コピー＆ペーストでご利用ください。

1,テキストボックスに文字をスクロールさせるスクリプト

<body>
<FORM NAME="TBOXmsg">
	<center><INPUT name="box" size="40"></center>		
</FORM>

<SCRIPT LANGUAGE="JavaScript">
<!--JavaScript
	var msg1,msg2,msg3;
	msg1="このテキストボックスにメッセージを流すことができます。";
	msg2="下のスクリプトを見てください！";
	msg3=msg1+msg2;
	function textbox(){
	setTimeout("textbox( )",500);
	msg3=msg3.substring(2,msg3.length)+msg3.substring(0,2);
	document.TBOXmsg.box.value=msg3;
	}
	textbox();
  //end-->
</SCRIPT>
</body>

2,ステータスバーに文字をスクロールさせるスクリプト

ステータスバーにメッセージをスクロールさせています。

<body>
<SCRIPT LANGUAGE="JavaScript">
<!--JavaScript

	var msg4,msg5,msg6;
	msg4="このステータスバーにメッセージを流すことができます。";
	msg5="上のスクリプトを見てください！";
	msg6=msg4+msg5;
	function stbar(){
	setTimeout("stbar( )",500);
	msg6=msg6.substring(2,msg6.length)+msg6.substring(0,2);
	window.status=msg6;
	}
	stbar();
  //end-->
</SCRIPT>
</body>

3,サブミットボタンでブラウザの履歴にもどるスクリプト

<body>
 <center>
 <form mathod=post>
	<input type="button" value="戻る" onClick="history.back()">
 </form>
 </center>
</body>

4,カウントダウンを自動計算し数字を表示させるスクリプト

<body>
<SCRIPT LANGUAGE="JavaScript">
<!--JavaScript
				//　　設定日を1999年1月1日にするには
	var set_y = 99;		//　←ここに設定年(現在は1999年にセット)
	var set_m = 1;		//　←ここに設定月(現在は1月にセット) 
	var set_d = 1;		//　←ここに設定日(現在は1日にセット)
	var now  = new Date();
	var spday= new Date(set_y,set_m-1,set_d);  
	x = (spday.getTime() - now.getTime())/(24*60*60*1000);
	x= Math.ceil(x);
	document.write("<i>お正月まで、あと",x,"日\です</i>");	
  //end-->			//　↑文中の \ は文字化け防止
</SCRIPT>
</body>