■サンプル
下記のリンクをクリックすると選択数値に応じた面積などがアラートされます。
三角形 | 面積 | 公式 |
---|---|---|
四角形 | 面積 | 公式 |
■サンプルスクリプト
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を使うよりも直感的にスクリプトが書ける