HTML と JavaScript を使用して単純な計算機を作成することは、初心者の Web 開発者にとって楽しくて勉強になる仕事かもしれません。 ユーザー インターフェイス設計のための HTML と計算処理のための JavaScript の機能を組み合わせることで、対話型で機能する計算機をブラウザ内で直接構築できます。 この投稿では、基本的な電卓をゼロから作成するプロセスを段階的に説明し、その過程で Web プログラミングの原理についても説明します。 まず、プロジェクト環境を作成する必要があります。計算機の基盤となる基本的な HTML フレームワークを構築します。さらに、電卓をより視覚的に魅力的なものにするために、CSS を使用して外観を設定します。 最後に、計算機に機能を追加するために JavaScript 環境を構成します。 目次 HTML と JavaScript を使用して単純な計算機を作成する手順 ユーザーインターフェースの設計 ユーザー入力の処理 計算の実行 シンプルな 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 計算ツールを表示するには、ここをクリックしてください。   でも公開されています ここ

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Get free Tech Tutorials Now!

Read My Stories

このオーディオは、ストーリーの元の言語で制作されています。

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

About Author

コメント

ラベル

この記事は

Related Stories

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

HackerNoon Coded: HackerNoonが最も活発に活動している上位10カ国

タップして稼ぐ：テレグラムはソラナより先に次の100億人の暗号通貨ユーザーを獲得する可能性がある

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

HackerNoon Coded: HackerNoonが最も活発に活動している上位10カ国

タップして稼ぐ：テレグラムはソラナより先に次の100億人の暗号通貨ユーザーを獲得する可能性がある

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps