HTML と JavaScript を使用して単純な計算機を作成する最良の方法

Shuseel Baral5m2023/08/01

ここでは、HTML と JavaScript を使用して、整数の単純な算術演算を実行できる単純な計算機を作成する手順を説明します。

featured image - HTML と JavaScript を使用して単純な計算機を作成する最良の方法

HTML と JavaScript を使用して単純な計算機を作成することは、初心者の Web 開発者にとって楽しくて勉強になる仕事かもしれません。

ユーザーインターフェイス設計のための HTML と計算処理のための JavaScript の機能を組み合わせることで、対話型で機能する計算機をブラウザ内で直接構築できます。

この投稿では、基本的な電卓をゼロから作成するプロセスを段階的に説明し、その過程で Web プログラミングの原理についても説明します。

まず、プロジェクト環境を作成する必要があります。計算機の基盤となる基本的な HTML フレームワークを構築します。さらに、電卓をより視覚的に魅力的なものにするために、CSS を使用して外観を設定します。

最後に、計算機に機能を追加するために JavaScript 環境を構成します。

HTML と JavaScript を使用して単純な計算機を作成する手順
- 1. ユーザーインターフェースの設計
- 1. ユーザー入力の処理
- 1. 計算の実行
シンプルな HTML 計算機の完全な HTML コード
シンプルな HTML 計算機のプレビュー
結論

HTML と JavaScript を使用して単純な計算機を作成する手順

ここでは、HTML と JavaScript を使用して、整数の単純な算術演算を実行できる単純な計算機を作成する手順を説明します。

テキストとボタンの入力はフォーム要素内のテーブルで使用され、OnClick イベントは画面上にボタンの値を配置するか、数値を評価するために使用されます。

1. ユーザーインターフェイスの設計

ユーザーインターフェイス (UI) は電卓の前面です。入力と結果を表示するためのクリーンなディスプレイを作成します。整数と演算子用のインタラクティブなボタンも提供します。私たちの目標は、電卓ユーザーのあらゆる側面を豊かにする直感的でユーザーフレンドリーなデザインを生み出すことです。

電卓のユーザーインターフェイスを設計するには、次の手順を実行します。

ステップ 1. まず、以下に示すように、<form> 要素および <body> タグとともに <html> タグを作成します。

 <html> <head><title>A Simple Calculator Using HTML</title></head> <body> <h3>A Simple Calculator Using HTML</h3> <form Name="calc"> </form> </body> </html>

ステップ 2. 次に、<table> …..</table> タグを使用して <form>……</form> タグ内にテーブルを作成し、<tr を使用してテーブル行のテーブルデータ内に 2 種類の入力テキストとボタンを挿入します><td>….</td></tr> タグ。

 <table id="calc" border=2> <tr> <td colspan=5><input id="btn" name="display" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr> </table>

ステップ 3. 次に、<input> タグを使用してボタンを作成し、<tr><td>….</td></tr> タグを持つテーブル行内にこれらのボタンの「id」と「value」を設定します。以下に示します。

 <tr> <td><input id="btn" type=button value="MC"></td> <td><input id="btn" type=button value="0"></td> <td><input id="btn" type=button value="1"></td> <td><input id="btn" type=button value="2"></td> <td><input id="btn" type=button value="+"></td> </tr> <tr> <td><input id="btn" type=button value="MS"></td> <td><input id="btn" type=button value="3"></td> <td><input id="btn" type=button value="4"></td> <td><input id="btn" type=button value="5"></td> <td><input id="btn" type=button value="-"></td> </tr> <tr> <td><input id="btn" type=button value="MR"></td> <td><input id="btn" type=button value="6"></td> <td><input id="btn" type=button value="7"></td> <td><input id="btn" type=button value="8"></td> <td><input id="btn" type=button value="x"></td> </tr> <tr> <td><input id="btn" type=button value="M+"></td> <td><input id="btn" type=button value="9"></td> <td><input id="btn" type=button value="±"></td> <td><input id="btn" type=button value="="></td> <td><input id="btn" type=button value="/"></td> </tr> <tr> <td><input id="btn" type=button value="1/x"></td> <td><input id="btn" type=button value="."></td> <td><input id="btn" type=button value="x2"></td> <td><input id="btn" type=button value="√"></td> <td><input id="btn" type=button value="C"></td> </tr>

ステップ 4. 最後に、次の CSS コードを追加して、以下に示す <style>…..</style> タグを持つ電卓のデザインを与えます。

 <style> #calc{width:300px;height:250px;} #btn{width:100%;height:40px;font-size:20px;} </style>

2. ユーザー入力の処理

電卓のユーザーインターフェイスを設計するには、次の手順を実行します。

＃ステップ1。入力と計算結果を表示するために作成した表示ボタンに、以下のように「onkeypress」イベントを割り当てます。

 <tr> <td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr>

ステップ 2. 以下に示すように、数字と算術演算子を持つすべてのボタンに OnClick イベントを割り当てます。

 <tr> <td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td> <td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td> <td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td> <td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td> <td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td> </tr> <tr> <td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td> <td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td> <td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td> <td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td> <td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td> </tr> <tr> <td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td> <td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td> <td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td> <td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td> <td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td> </tr>

3. 計算の実行

すべての算術演算子に OnClick イベントを割り当て、Clear(C) ボタンにスペース ("") を含む二重引用符を指定し、以下に示すように eval() 関数を使用して OnClick イベントの数値を評価します。

 <tr> <td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td> <td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td> <td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))"> </td> <td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td> <td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td> </tr> <tr> <td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td> <td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td> <td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td> <td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td> <td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td> </tr>

単純な HTML 計算機の完全な HTML コード

<html> <head></head> <body> <h3>Simple Calculator</h3> <br/> <style> #calc{width:300px;height:250px;} #btn{width:100%;height:40px;font-size:20px;} </style> <form Name="calc"> <table id="calc" border=2> <tr> <td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr> <tr> <td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td> <td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td> <td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td> <td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td> <td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td> </tr> <tr> <td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td> <td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td> <td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td> <td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td> <td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td> </tr> <tr> <td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td> <td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td> <td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td> <td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td> <td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td> </tr> <tr> <td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td> <td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td> <td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))"> </td> <td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td> <td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td> </tr> <tr> <td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td> <td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td> <td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td> <td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td> <td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td> </tr> </table> </form> </body> </html>

シンプルな HTML 計算機のプレビュー

InfoTechSite で公開されているオリジナル記事の HTML 電卓を表示および使用できます。

HTML 計算ツールを表示するには、ここをクリックしてください。

ここでも公開されています

L O A D I N G
. . . comments & more!

About Author

Shuseel Baral@shuseel

I am a software engineer and web developer from Nepal. My interests range from technology to education.

Read my stories Get free Tech Tutorials Now!