43回目授業内容　イベントハンドラ〜脱線

[授業][Dreamweaver][JavaScript]

DHTML（ダイナミックHTML）

JavaScriptイベントハンドラ

  • formオブジェクト
    • 標準体重
<script>
function stdWeight(myForm) {
	var height, weight;
	height = Number(myForm.height.value);
	if (myForm.sex[0].checked){
	weight = (height - 80) * 0.7;
	} else {
		weight = (height - 70) * 0.6;
	}
	myForm.weight.value = weight;
}
</script>
</head>
<body>
<form name="weightForm">
<p>男性：<input type="radio" name="sex" checked>
女性：<input type="radio" name="sex"></p>
<p>身長：<input type="text" name="height">cm</p>
<p><input type="button" value="計算" name="calc" onClick="stdWeight(this.form)"></p>
<p>標準体重：<input type="text" name="weight">kg</p>
</form>
</body>
  • windowオブジェクト
    • Windowを開く
<script>
function openWin(){
	var win =window.open('', '', 'width=520, height=400');//windowを開く
	win.document.open();//documentオブジェクトを開く
	win.document.write('<img src="img/1.jpg">');//イメージを表示
	win.document.write('<form><p>');//フォームを表示
	win.document.write('<input type="button" value="閉じる"');//[閉じる]ボタンを表示
	win.document.write('onclick="window.close()">');//イベントハンドラ
	win.document.write('<p></form>');
	win.document.close();//documentオブジェクトを閉じる
}
</script>
</head>
<body background="img/background.gif">
<form name="myForm"><p>
<input type="button" value="開く" name="openBtn" onclick="openWin()">
</p></form>
</body>

<script type="text/javascript">
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
</script>
</head>
<body>
<form name="myForm">
<p>
<input name="openBtn" type="button" onClick="MM_openBrWindow('subwin.html','new','toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes,width=550,height=450')" value="開く">
</p></form>
</body>
  • 画像置換
<script>
var imgs;
function init() {
	imgs = new Array(3);
	for (var i = 0; i <= (imgs.length - 1); i++) {
	imgs[i] = new Image(403, 496);
	imgs[i].src = 'img/00' + i + '.jpg'
	}
}
window.onload = init;

var num = 0;
function changeImg() {
	document.myImg.src = imgs[num].src
	num++;
	if (num == 3) num = 0;
}
</script>
</head>
<body>
<h1>イメージを操作する</h1>
<p><img src="img/off.jpg" name="myImg" width="403" height="496" onclick="changeImg()"></p>
</body>



脱線話（復活）

-

四十路男Tokiyoの人生再スタートblogもやってます。