HTMLで電卓をプログラミングする

著者: Tamara Smith
作成日: 27 1月 2021
更新日: 1 J 2024
Anonim
プログラミング友達に教える#1~JavaScriptで電卓つくってみようの巻~
ビデオ: プログラミング友達に教える#1~JavaScriptで電卓つくってみようの巻~

コンテンツ

組み込みの電卓を使用してコンピューターで計算する方法はたくさんありますが、別の方法は、単純なHTMLコードを使用して独自の計算を作成することです。 HTMLを使用して電卓を作成するには、HTMLの基本的な知識が必要です。次に、必要なコードをテキストエディターに入力し、HTMLファイルとして保存します。その後、お気に入りのブラウザでHTMLファイルを開くと、電卓を使用できます。ブラウザで算術演算を実行できるだけでなく、プログラミングの技術に関する基本的なスキルも学ぶことができます。

ステップに

パート1/4:コードを理解する

  1. 各HTML関数の機能を学びます。 電卓の作成に使用するコードは、ドキュメントのさまざまな要素を一緒に定義するさまざまな種類の構文で構成されています。このプロセスの説明についてはここをクリックするか、コードの各行が計算機を作成するために何を行うかについて詳しく知るために読んでください。
    • html:この構文のビットは、コードで使用される言語をドキュメントの残りの部分に伝えます。コーディングする言語はいくつかありますが、この場合html>は、ドキュメントの残りの部分に、それがhtmlに含まれていることを明確にします。
    • :それ以降のすべてがデータに関するデータであり、「メタデータ」とも呼ばれることをドキュメントに通知します。 head>コマンドは通常、タイトルや見出しなど、ドキュメントの文体要素を定義するために使用されます。これは、コードの残りの部分を定義する傘と考えてください。
    • 題名:ドキュメントのタイトルがここに表示されます。この属性は、HTMLブラウザで開いたときのドキュメントのタイトルを示すために使用されます。
    • body bgcolor = "#":この属性は、HTMLページの背景と本文の色を設定します。引用符文字列内および#の後の数字は、特定の色に対応します。
    • text = "":この構文は、ドキュメントのテキストの色を設定します。
    • フォーム名= "":この属性はフォームの名前を指定し、Javascriptがフォーム名の意味を知っていることに基づいて、次に来るものの構造を構築するために使用されます。たとえば、使用するフォーム名は「calculator」です。これを使用して、ドキュメントの特定の構造を作成します。
    • 入力タイプ= "":ここで何かが起こります。属性「入力タイプ」は、引用符の間の値に含まれるテキストの種類をドキュメントのパーサーに通知します。たとえば、これはテキスト、パスワード、ボタン(電卓の場合のように)などです。
    • 値= "":このコマンドは、ドキュメントのパーサーに上記の入力タイプに含まれるものを通知します。電卓の場合、これらは数値(1〜9)と演算(+、-、 *、/、=)です。
    • onClick = "":この構文はイベントを記述し、ボタンがクリックされたときに何かを実行する必要があることを示します。電卓の場合、各ボタンのテキストもそのように認識されるようにします。したがって、「6」ボタンの前に、document.calculator.ans.value + = "6"を引用符で囲みます。
    • br:このタグはドキュメントに新しい行を作成し、テキスト(または他の何か)が別の行の後に配置されるようにします。
    • / form、/ body、/ html:これらのコマンドは、ドキュメントで以前に開いた対応するコマンドに近いものです。

パート2/4:HTML計算機の標準コード

  1. 以下のコードをコピーします。 マウスの左ボタンを押したままカーソルをボックスの左下から右上にドラッグして、下のボックス内のテキストを選択します。これにより、すべてのテキストが青色に変わります。次に、Macの場合は「Command + C」、PCの場合は「Ctrl + C」を押して、コードをクリップボードにコピーします。

html> head> title> HTML Calculator / title> / head> body bgcolor = "#000000" text = "gold"> form name = "calculator"> input type = "button" value = "1" onClick = "document。 calculator.ans.value + = '1' "> input type =" button "value =" 2 "onClick =" document.calculator.ans.value + = '2' "> input type =" button "value =" 3 "onClick =" document.calculator.ans.value + = '3' "> input type =" button "value =" + "onClick =" document.calculator.ans.value + = '+' "> input type =" button "value =" 4 "onClick =" document.calculator.ans.value + = '4' "> input type =" button "value =" 5 "onClick =" document.calculator.ans.value + = '5' ">入力タイプ="ボタン "値=" 6 "onClick =" document.calculator.ans.value + = '6' ">入力タイプ="ボタン "値="-"onClick =" document.calculator.ans。 value + = '-' "> input type =" button "value =" 7 "onClick =" document.calculator.ans.value + = '7' "> input type =" button "value =" 8 "onClick =" document.calculator.ans.value + = '8' "> input type =" button "value =" 9 "onClick =" document.calculator.ans.value + = '9' "> input type =" button "value = " *" onClick = "document.calcul ator.ans.value + = ' *' ">入力タイプ="ボタン "値=" / "onClick =" document.calculator.ans.value + = '/' ">入力タイプ="ボタン "値=" 0 "onClick =" document.calculator.ans.value + = '0' "> input type =" reset "value =" Reset "> input type =" button "value =" = "onClick =" document.calculator.ans .value = eval(document.calculator.ans.value) "> br>応答はinputtype =" textfield "name =" ans "value =" "> / form> / body> / html>

パート3/4:独自の計算機を作成する

  1. コンピューターでテキストエディターを開きます。 使用するプログラムはいくつかありますが、簡単にするために、テキストエディットまたはメモ帳を使用します。
    • Macでは、画面の右上隅にある虫眼鏡をクリックしてSpotlightを開きます。そこに着いたら、TextEditと入力し、TextEditプログラムをクリックします。このプログラムは青色で選択されているはずです。
    • PCでは、画面の左下にある[スタート]メニューを開きます。検索バーに「メモ帳」と入力し、右側の検索バーに表示されるメモ帳アプリケーションをクリックします。
  2. 電卓のHTMLコードをドキュメントに貼り付けます。
    • Macの場合は、ドキュメントの本文をクリックして、を押します。 コマンド+ V。次に、をクリックします フォーマット 画面の上部にあり、次に プレーンテキストを作成する コードを貼り付けた後。
    • PCの場合は、ドキュメントの本文をクリックしてから、 Ctrl + V.
  3. ファイルを保存します。 これは、ウィンドウのメインメニューの[ファイル]を介して行い、次に 名前を付けて保存... PCまたは セーブ... Macの場合はドロップダウンメニューから。
  4. ファイル名にHTML拡張子を追加します。 [名前を付けて保存...]メニューで、ファイル名、「。html」の順に入力し、[保存]をクリックします。たとえば、このファイルに「私の最初の計算機」という名前を付ける場合は、ファイルを「私の最初の計算機.html」として保存します。

4のパート4:電卓を使用する

  1. 作成したファイルを見つけます。 これを行うには、前の手順で説明したように、Spotlightまたは[スタート]メニューの検索バーにファイルの名前を入力します。 「html」拡張子も入力する必要はありません。
  2. ファイルをクリックして開きます。 デフォルトのブラウザは、新しいWebページで電卓を開きます。
  3. 電卓のボタンをクリックしてご利用ください。 方程式の解が回答バーに表示されます。

チップ

  • 必要に応じて、この計算機をWebページに含めることができます。
  • HTMLスタイルを使用して、電卓の外観を変更することもできます。