トップ > Javascriptサンプル

Javascriptは、ブラウザの種類やバージョン、環境により機能するものとしないものがあります。
また、DHTMLを使用している場合もあります。
DHTMLについては「DHTMLサンプル」もご参照下さい。

■ 入力フォームで計算

Javascriptで四則演算が計算できるフォームを作成します。
このサンプルでは2つの入力項目を指定された記号で演算を行います。

「+」は加算、「-」は減算、「*」は乗算、「/」は除算を行います。
※「Javascriptサンプル」−「入力項目のチェック」「入力フォームで計算」も参考にしてください。

◆ 実行サンプル

           
略号の説明 動作が確認できたブラウザ
IE6.0 NS7.0 MZ1.7.7 FF1.5 OP7.53

【記述サンプル】

まず、テキストエディタなどを使用し、次の記述を「jscalc.js」というファイル名で保存します。
function calc_sum(){ num1 = document.frm1['num1'].value num2 = document.frm1['num2'].value cal0 = document.frm1['cal0'].value; if (cal0 == "+") sum1 = eval(num1) + eval(num2); if (cal0 == "-") sum1 = eval(num1) - eval(num2); if (cal0 == "*") sum1 = eval(num1) * eval(num2); if (cal0 == "/") sum1 = eval(num1) / eval(num2); document.frm1['num3'].value = sum1; return false; } function reset_exe(){ sum1 = ""; if (confirm('リセットします。')){ document.frm1['num1'].value = ""; document.frm1['num2'].value = ""; document.frm1['num3'].value = sum1; } }


次に、HEAD句内Javascriptの呼び出しを次のように記述します。
<script type="text/javascript" src="jscalc.js"></script>


最後に計算項目を入力するための入力フォームを次のように記述します。 <form name="frm1" action="dummy" class="exp01"> <input size="4" type="text" name="num1">  <select name="cal0"> <option value="+">+</option> <option value="-">−</option> <option value="*">*</option> <option value="/">/</option> </select>  <input size="4" type="text" name="num2">  <strong>=</strong>  <input size="5" type="text" name="num3" readonly>  <input type="button" value="計算" onclick="calc_sum();">  <input type="button" value="クリア" onclick="return reset_exe();"> </form>



page update:2019/01/09 19:55

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom