この使用例は、電卓をブラウザ上で作るというものです。

この電卓は、簡単なものなので（正数のみ）加算しかできません。
使い方は、０〜９のボタンをクリックしてEnterボタンを
クリックすると入力した値を加算（合計）します。

確認をクリックすれば実際の動きを見られます。
確認後はブラウザの”戻る”ボタンで戻ってください。

確認

  1. <HTML>
  2. <HEAD>
  4. <TITLE>電卓<TITLE>
  6. <SCRIPT LANGUAGE="JavaScript">
  7. <!--
  8. 　　var EnterFlag=false;
  9. 　　var s=0;
  11. 　　function disp(f,n){
  12. 　　　　if (EnterFlag){
  13. 　　　　　　f.box.value="";
  14. 　　　　　　EnterFlag=false;
  15. 　　　　}
  16. 　　　　f.box.value=f.box.value+n;
  17. 　　}
  19. 　　function enter(f){
  20. 　　　　s=s+eval(f.box.value);
  21. 　　　　f.box.value=s;
  22. 　　　　EnterFlag=true;
  23. 　　}
  24. //-->
  25. </SCRIPT>
  27. </HEAD>
  29. <BODY>
  31. <!--電卓-->
  32. <FORM>
  33. <INPUT NAME="box" TYPE="text" SIZE=15>
  34. <INPUT TYPE="button" VALUE=" 7 " onClick="disp(this.form,7)">
  35. <INPUT TYPE="button" VALUE=" 8 " onClick="disp(this.form,8)">
  36. <INPUT TYPE="button" VALUE=" 9 " onClick="disp(this.form,9)">
  37. <BR>
  38. <INPUT TYPE="button" VALUE=" 4 " onClick="disp(this.form,4)">
  39. <INPUT TYPE="button" VALUE=" 5 " onClick="disp(this.form,5)">
  40. <INPUT TYPE="button" VALUE=" 6 " onClick="disp(this.form,6)">
  41. <BR>
  42. <INPUT TYPE="button" VALUE=" 1 " onClick="disp(this.form,1)">
  43. <INPUT TYPE="button" VALUE=" 2 " onClick="disp(this.form,2)">
  44. <INPUT TYPE="button" VALUE=" 3 " onClick="disp(this.form,3)">
  45. <BR>
  46. <INPUT TYPE="button" VALUE=" 0 " onClick="disp(this.form,0)">
  47. <INPUT TYPE="button" VALUE=" Enter" onClick="enter(this.form)">
  48. </FORM>
  49. <!--電卓-->
  51. </BODY>
  52. </HTML>


プログラムの説明です。< >で囲まれた部分は、行番号を
表しています。また、クリックすればその行へジャンプします。

<12-15>
 この4行はEnterボタンが押された後
最初に数値ボタンが押されたときの処理をするためのものです。
<16>
 クリックされた数値が
テキストボックスに表示されるための処理
<20>
 この1行は合計を計算するための処理
<31-49>
 この範囲のものを電卓を表示させたいところに記述してください。
このソースでは純粋にJavaScriptのみを表示するようにしてありますが、
動作見本はテーブルを使うようにしてあります。


back