JavaScriptSeminarNo.2-Naoe

JavaScript第９回ゼミ直江担当

演習解答

問１

各ファイルごとの内容

 [main.html]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<title>フレームを利用したスライドショー</title>
</head>
<frameset rows="*,60">
 <frameset cols="85,*">
  <frame src="dammy.html" name="d_disp">
  <frameset cols="50%,*">
   <frame src="disp2.html" name="disp2">
   <frame src="display.html" name="display">
  </frameset>
 </frameset>
 <frame src="control.html" name="control">
</frameset>
</html>


 [display.html],[disp2.html]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<title>イメージの表示</title>
</head>
<body>
</body>
</html>


 [dammy.html]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<title>イメージの表示</title>
<script language="JavaScript" type="text/javascript">
function page(){
	var selects=document.form1.menu ;
	var num=parseInt(selects.value)-1 ;
	parent.control.displayImg(num) ;
}
</script>
</head>
<body>
<form action="#" name="form1">
<select name="menu" size=5 onchange="page()">
	<option value="1">ページ１</option>
	<option value="2">ページ２</option>
	<option value="3">ページ３</option>
	<option value="4">ページ４</option>
	<option value="5">ページ５</option>
</select>
</form>
</body>
</html>


 [control.html]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>イメージのコントロール</title>
<script language="JavaScript" type="text/javascript">
var imgNum = 0; 
var MaxImg = 5; // イメージの数
var timerID;
var delay = 2000; // 自動スライドショーの間隔
var theDocument = parent.display.document;

var theDocument2 = parent.disp2.document;

// MyImageオブジェクトを生成してimages配列に格納
var images = new Array(MaxImg);
images[0] = new MyImage("taketomi1.jpg", "牛車１");
images[1] = new MyImage("taketomi2.jpg", "牛車2");
images[2] = new MyImage("ishigaki1.jpg", "シーサー1");
images[3] = new MyImage("sand.jpg", "初夏の砂浜");
images[4] = new MyImage("sea1.jpg", "海辺の塔");


// MyImageオブジェクトのメソッド
function _getImgStr(){
	var imgStr;
	imgStr = "タイトル："
	imgStr += this.title.fontcolor("green") + "<br>";
	imgStr += "<img src=\"images/" + this.imgFile + "\">";
	imgStr += "<br>";
	return imgStr;
}

// MyImageオブジェクトのコンストラクタ
function MyImage(imgFile, title){
	this.imgFile = imgFile;
	this.title = title;
	this.getImgStr = _getImgStr;
}

//	イメージタグの書き出し
function displayImg(num){
	var numbar=num ;
	var html;

	html = "<div style='text-align:center'>";
	html += images[num].getImgStr();
	html += "イメージ番号：" + (numbar + 1) + "/" + MaxImg + "<br>";
	html += "</div>";
	theDocument.body.innerHTML = html
	
	
	if(numbar==0){
		numbar=4 ;
	} else {
		numbar-- ;
	}
	html = "<div style='text-align:center'>";
	html += images[numbar].getImgStr();
	html += "イメージ番号：" + (numbar + 1) + "/" + MaxImg + "<br>";
	html += "</div>";
	theDocument2.body.innerHTML = html
	
}

// イメージを変更する
function go(direction){

	if (direction) {
		imgNum++;
		if (imgNum == MaxImg) {
			imgNum = 0;
		}
		displayImg(imgNum);
	} else {
		imgNum--;
		if (imgNum < 0 ) {
			imgNum = MaxImg-1;
		}
		displayImg(imgNum);
	}	
}

// オートモードかどうかを調べる
function checkAuto(checkBtn){
	if (checkBtn.checked) {
		autoPlay();
	} else {
		clearTimeout(timeID);
	}
}

// オートモードでスライドショーを実行
function autoPlay() {
	go(true);
	timeID = setTimeout("autoPlay()", delay);
}

</script>

</head>
<body bgcolor="#ffffff" onload="displayImg(0)">
<form>
<div style="text-align:center">
<input type="button" name="prev" value="前へ" onclick="go(false)">
<input type="button" name="next" value="次へ" onclick="go(true)">
<input type="checkbox" name="auto"
	onclick="checkAuto(this)">自動
</div>
</form>
</body>
</html>
JavaScript第９回ゼミ直江担当

演習解答

問１

出力結果
