@blog.justoneplanet.info

■サンプル

下記のリンクをクリックすると選択数値に応じた面積などがアラートされます。

■サンプルスクリプト

function figure(NAME){
	this.name = NAME;
	this.alert = function(){
		alert(this.name);
	}
}
function triangle(){
	this.getArea = function(){
		var num1 = parseInt(document.forms["area"].elements["num1"].value);
		var num2 = parseInt(document.forms["area"].elements["num2"].value);
		return (num1 * num2 / 2);
	}
}
function square(){
	this.getArea = function(){
		var num1 = parseInt(document.forms["area"].elements["num1"].value);
		var num2 = parseInt(document.forms["area"].elements["num2"].value);
		return (num1 * num2);
	}
}
triangle.prototype = new figure("底辺×高さ÷2");
/*この記述によりfigureクラスのメソッドがtriangleクラスのインスタンスでも使用可能になる*/
square.prototype = new figure("縦×横");
/*この記述によりfigureクラスのメソッドがsquareクラスのインスタンスでも使用可能になる*/
var tri = new triangle();
var sqr = new square();

■サンプルHTML

<form action="#" name="area">
底辺の長さ
<select name="num1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
高さ
<select name="num2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
<table>
<tr>
<th>三角形</th>
<td><a href="javascript:alert(tri.getArea());">面積</a></td>
<td><a href="javascript:tri.alert();">形</a></td>
</tr>
<tr>
<th>四角形</th>
<td><a href="javascript:alert(sqr.getArea());">面積</a></td>
<td><a href="javascript:sqr.alert();">形</a></td>
</tr>
</table>

■解説

人にもよるがcallを使うよりも直感的にスクリプトが書ける