HTML で計算機を書く方法

コンピューターで数学をやりたいですか?これを行うには、組み込みの計算機を使用するか、簡単な HTML コードを使用して独自の計算機を作成するなど、さまざまな方法があります。 2 番目の方法を選択する場合は、まず基本的な HTML の知識を習得し、必要なコードをテキストエディターにコピーして、HTML 拡張子で保存する必要があります。次に、この HTML ファイルをブラウザで開くと、計算機を使用できます。ブラウザで数学の問題を解けるだけでなく、基本的なコーディングスキルも学べるので、一石二鳥です。

パート1 パート1/4:

コードを理解する

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":" class=\"mw-parser-output\"><\/div>"} 1さまざまな HTML タグの機能を理解します。 HTML 言語は、HTML のさまざまな要素を定義する一連のタグで構成されています。計算機を実装するには、さまざまな要素を組み合わせる必要があります。 HTML をさらに詳しく知るには、ここをクリックしてください。または、計算機コード内の各テキスト行が何を行うかを学習するには、読み進めてください。
- html : このタグは、このファイルのコードがどの言語で書かれているかを示します。コードを記述するために使用できる言語はいくつかあります。<html> タグは、ドキュメントが HTML 構文に従って HTML 言語で記述されていることを示します。 ^{[1] X研究ソース}
- head : ドキュメントに関連するメタデータを指定します。通常、Web ページのタイトル、テキストタイトルなど、ドキュメントのスタイル要素を定義するために使用されます。ドキュメント内のさまざまなヘッダー属性と情報の総称と考えてください。 ^{[2] X研究ソース}
- title : ページのタイトルを伝えます。このプロパティはドキュメントのタイトルを定義します。これは、HTML ドキュメントをブラウザーで開いたときにウィンドウのタイトルバーに表示される名前です。
- body bgcolor= "#" : この属性は、ドキュメント本体の背景色を指定します。 # 記号の後の数字は、定義済みの色に対応します。
- text="" : テキスト属性の引用符で囲まれたドキュメントテキストの色を指定します。
- form name="" : この属性はフォーム名を指定します。このフォーム名は、JavaScript による名前定義の理解に基づいて後続の構造を作成するために使用されます。たとえば、フォームの名前は calculator で、ドキュメントの後半のコンテンツに特定の構造を作成するために使用されます。 ^{[3] X研究ソース}
- input type="" : アクションが発生する場所。この属性は、入力タグが Web ページに表示する属性のタイプ (テキスト、パスワード、ボタンなど) をドキュメントに指示します。計算機で使用される入力タイプはボタンです。 ^{[4] X研究ソース}
- value="" : このディレクティブは、上記の入力要素に設定する値をドキュメントに指示します。計算機のコードを例にとると、設定値は数字（1〜9）と演算（+、-、*、/、=）になります。 ^{[5] X研究ソース}
- onClick="" : このイベント属性は、ボタンがクリックされたときにイベントをトリガーするようにドキュメントに指示します。計算機のコードを書くときは、各ボタンの文字がクリック後に結果ボックスに文字通り表示されるようにする必要があります。「6」ボタンを例に、onClick 属性の引用符の間に document.calculator.ans.value+='6' と入力します。 ^{[6] X研究ソース}
- br : ドキュメント内で改行を開始します。このタグに続くコンテンツは、前のコンテンツの次の行に表示されます。 ^{[7] XResearchソース}
- /form、/body、および /html : ドキュメント内で以前に開始されたディレクティブが終了したことを通知します。 ^{[8] XResearchソース}
広告する

パート2 パート2/4:

基本的な HTML 計算機コード

1以下のコードをコピーします。テキストボックス内のコンテンツを選択します。マウスをテキストボックスの左上隅に移動し、マウスを押したまま右下隅までドラッグします。選択したテキストは青色に変わります。その後、Mac では「Command」キーと「C」キーを同時に押し、PC では「Ctrl」キーと「C」キーを同時に押して、コードをクリップボードにコピーします。

<html>
<ヘッド>
< title > HTML 計算機</ title >
</ヘッド>
< body bgcolor = "#000000" text = "ゴールド" >
<フォーム名= "計算機" >
< input type = "button" value = "1" onClick = "document.calculator.ans.
値+='1'" >
< input type = "button" value = "2" onClick = "document.calculator.ans.
値+='2'" >
< input type = "button" value = "3" onClick = "document.calculator.ans.
値+='3'" >
< input type = "button" value = "4" onClick = "document.calculator.ans.
値+='4'" >
< input type = "button" value = "5" onClick = "document.calculator.ans.
値+='5'" >
< input type = "button" value = "6" onClick = "document.calculator.ans.
値+='6'" >
< input type = "button" value = "7" onClick = "document.calculator.ans.
値+='7'" >
< input type = "button" value = "8" onClick = "document.calculator.ans.
値+='8'" >
< input type = "button" value = "9" onClick = "document.calculator.ans.
値+='9'" >
< input type = "button" value = "-" onClick = "document.calculator.ans.
値+='-'" >
< input type = "button" value = "+" onClick = "document.calculator.ans.
値+='+'" >
< input type = "button" value = "*" onClick = "document.calculator.ans.
値+='*'" >
< input type = "button" value = "/" onClick = "document.calculator.ans.
値+='/'" >

< input type = "button" value = "0" onClick = "document.calculator.ans.
値+='0'" >
<入力タイプ= "リセット"値= "リセット" >
< input type = "button" value = "=" onClick = "document.calculator.ans.
値 = eval(document.calculator.ans.value)" >
< br >解決策は< input type = "textfield" name = "ans" value = "" >です。
</フォーム>
</本文>
</html>

パート3 パート3/4:

計算機の作成

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e6\/Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e6\/Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":" class=\"mw-parser-output\"><\/div>"} 1コンピューターでテキスト編集プログラムを開きます。利用できるプログラムは多数ありますが、利便性と品質を考えると TextEdit または Notepad をお勧めします。 ^{[9] X研究ソース}^{[10] X研究ソース}
- Mac では、画面の右上隅にある虫眼鏡をクリックして Spotlight を開きます。 TextEdit と入力し、青色で強調表示された TextEdit プログラムをクリックします。
- PC では、画面の左下隅にあるスタートメニューを開きます。検索バーに「メモ帳」と入力し、右側の検索結果列に表示されるメモ帳アプリケーションをクリックします。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/99\/Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/99\/Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":" class=\"mw-parser-output\"><\/div>"} 2計算機の HTML コードをドキュメントに貼り付けます。
- Mac では、 「Command」キーと「V」キーを同時に押しながら、ドキュメントの本文をクリックします。コードを貼り付けた後、画面上部の「フォーマット」をクリックし、 「プレーンテキストにする」を選択する必要があります。 ^{[11] X研究ソース}
- PC では、「Ctrl」キーと「V」キーを同時に押しながら、ドキュメントの本文をクリックします。
3ファイルを保存します。 PCをお使いの場合は、ウィンドウの左上にある「ファイル」ボタンをクリックし、 「名前を付けて保存」をクリックします。 Mac の場合は、ドロップダウンメニューから[保存]をクリックします。
4ファイル名に HTML 拡張子を追加します。「名前を付けて保存」メニューで、拡張子が「.html」のファイル名を入力し、「保存」をクリックします。たとえば、ファイルに「My Calculator」という名前を付ける場合は、「My Calculator.html」として保存します。広告する

パート 4パート4/4:

電卓を使う

1作成したファイルを見つけます。 Spotlight またはスタートメニューの検索バーに、前の手順で指定したファイル名を入力します。「html」拡張子は必要ありません。
2ファイルをクリックして開きます。デフォルトのブラウザでは、新しい Web ページで計算機が開きます。
3計算機のボタンをクリックして使用します。方程式の解は結果列に表示されます。広告する