JavaScriptSeminarNo.2-Naoe

JavaScript第11回ゼミ直江担当

演習解答

問１

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
.myClass { position: absolute;
	background-color: yellow;
	left: 50pt;
	top: 50pt;
	width: 300pt;
	height: 120pt;
	visibility: hidden; }
</style>
<script language="JavaScript" type="text/javascript">
function showHide(number) {
	var myDiv =new Array(3) ;
	myDiv[0]=document.getElementById("myDiv1") ;
	myDiv[1]=document.getElementById("myDiv2") ;
	myDiv[2]=document.getElementById("myDiv3") ;
	for(var i=0;i<3;i++){
		myDiv[i].style.visibility = "hidden"; 
		if(i==number){
			myDiv[i].style.visibility = "visible"; 
		}
	}
}
</script>
</head>
<body bgcolor="#ffffff">
<form name="myForm" action="#">
<p>
<input type="button"
	value="第１文書" onclick="showHide(0)">
<input type="button"
	value="第２文書" onclick="showHide(1)">
<input type="button"
	value="第３文書" onclick="showHide(2)">
</p></form>

<div id="myDiv1" class="myClass">
JavaScriptは、Webページを操作するためのスクリプト言語です。
JavaScriptを使うと、これまでのHTML(HyperText Markup Language)
だけでは不可能だったインタラクティブなWebページが簡単に作成できます。
</div>
<div id="myDiv2" class="myClass">
JavaScriptは、HTMLドキュメントの中に直接スクリプトと呼ばれるプログラムを
埋め込む形式で使用する言語です。CGIなどとは異なり、
サーバからクライアントへ転送された後にWebブラウザ上でスクリプトが解釈実行されます。
</div>
<div id="myDiv3" class="myClass">
スタイルシートは、HTML記述内容を変更することなく、
ビジュアルをコントロールできる技術です。
</div>
</body>
</html>