HTMLで電卓を作成する方法

著者: John Stephens
作成日: 21 1月 2021
更新日: 14 5月 2024
Anonim
[第1回] 超々基本的なHTMLを作る - 電卓アプリを作ろう!
ビデオ: [第1回] 超々基本的なHTMLを作る - 電卓アプリを作ろう!

コンテンツ

この記事の内容:コードを理解する電卓の基本的なコードを書く電卓を作成する電卓を使う11リファレンス

組み込みの計算機を使用してコンピューターで計算を行う方法は多数ありますが、HTMLコードだけを使用して独自の計算機を作成することもできます。これを行うには、必要なコードをextension.htmlで保存したeファイルにコピーする前に、HTMLの基本を学習する必要があります。次に、お気に入りのブラウザでファイルを開いて、計算機にアクセスします。この手法により、コンピュータープログラミングの技術の基本を学びながら、ブラウザーで直接計算を行うことができます。


ステージ

パート1コードを理解する



  1. コードの仕組みを理解します。 計算機の作成に使用するコードは、ドキュメントのさまざまな要素を定義するために相互に連携する小さなコードに基づいています。このリンクをクリックしてHTMLの詳細を確認するか、電卓に使用するコードの各行の動作を確認できます。
    • HTML:このコードは、ドキュメントの残りの部分に使用されている言語を示します。多くの異なるプログラミング言語が使用されており、タグはドキュメントの残りの部分に、今回は使用しているのがHTMLであることを示します。
    • ヘッド :これは、次の情報が「メタデータ」とも呼ばれるデータであることをドキュメントに伝えます。このタグは通常、タイトル、ヘッダーなど、ドキュメントのスタイル要素を定義するために使用されます。これは、残りのコードが定義される傘のようなものです。
    • タイトル :これは、ドキュメントに付けるタイトルです。このタグは、ブラウザで開かれたドキュメントのタイトルを表示するために使用されます。
    • body bgcolor = "#" :ドキュメントの背景色を設定します。シャープの後に表示される数字は、あらかじめ決められた色に対応しています。
    • = '' :引用符で囲まれた単語は、ドキュメント上のeの色を示します。
    • フォーム名= "" :この属性は、JavaScriptがどのフォームが話されているかを知ることができるように、後に続くものの構造に使用されるフォームの名前を示します。たとえば、使用するフォーム名は、ドキュメントの特定の構造を作成する「計算機」です。
    • 入力タイプ= "" :これは、アクションが行われる場所です。 「入力タイプ」属性は、残りの括弧内のeの値タイプをドキュメントに伝えます。たとえば、e、パスワード、ボタン(電卓の場合と同様)などです。
    • 値=「」 :この属性は、ドキュメントに「入力タイプ」属性の内容を伝えます。電卓の場合、1〜9の数字と算術記号(+、-、*、/、=)を表示します。
    • onclickの= "" :このコードは、ボタンがアクティブになったときに何かが発生する必要があることをドキュメントに伝えるイベントを記述しています。電卓の場合、ユーザーが押したボタンに対応する番号を表示します。たとえば、ボタン6が有効な場合、document.calculator.in.value + = 6を引用符で囲みます。
    • BR :これは改行を示すタグであり、次に来るコードの残りはすべて下の行に表示されます。
    • /フォーム、/ボディ、および/ html これらの終了タグは、前に開いたタグが終了して閉じたことをブラウザに伝えます。

パート2電卓の基本コードを書く

以下のコードをコピーします。ボックスの左上隅からカーソルを押したまま下のeを選択し、e全体が青く見えるように右下隅にドラッグします。 eをコピーするには、Macでは「Command + C」を、PCでは「Ctrl + C」を押します。


HTML電卓

結果は

パート3電卓の作成




  1. コンピューターでeファイルを開きます。 使用できるプログラムは多数ありますが、品質のために、編集またはメモ帳を使用することをお勧めします。
    • Macでは、画面の右上にある虫眼鏡をクリックしてSpotlightを開きます。開いたら、次を入力します 編集します 青で選択するプログラムをクリックします。
    • PCでは、ボタンをクリックします スタート 左下。検索バーに、次を入力します メモ帳 結果に表示されるアプリケーションをクリックします。


  2. HTMLコードをドキュメントに貼り付けます。
    • Macでは、ドキュメントの本文をクリックして、 「コマンド+ V」。次にクリックする必要があります フォーマット 画面上部で シンプルなeで表示 コードを貼り付けた後。
    • PCで、ドキュメントの本文をクリックし、を押してコードを貼り付けます 「Ctrl + V」.


  3. ファイルを保存します。 ボタンをクリックするだけです ファイル ウィンドウの左上から 名前を付けて保存... PCまたは 保存... Macでは、表示されるドロップダウンメニューで。


  4. HTML拡張機能を追加します。 メニューに移動したら、ファイル名を入力してから「.html」をクリックしてからクリックします 記録。たとえば、このファイルを「my first calculator」と呼ぶ場合は、「MyPremierCalculette.html」という名前で付けることができます。

パート4電卓の使用



  1. HTMLファイルを見つけます。 MacのSpotlightまたはWindowsの[スタート]メニューの検索バーにファイル名を入力するだけです。ファイルの拡張子を入力する必要はありません。


  2. クリックして開きます。 デフォルトのブラウザは、新しいタブで計算機を開きます。


  3. ボタンをクリックして使用します。 計算の結果は、この目的で提供されるバーに表示されます。

その他のセクション 家でロマンチックな夕食をとることは、外食よりもはるかに特別なことです-言うまでもなく、より安価です。自宅でデートをしながらロマンチックなディナーを計画したい場合は、ディナーのデートが始まる前に、慎重にメニューを準備し、気分を設定するだけです。あなたの特別な誰かとロマンチックな夜を過ごす方法を見つけるためにこれらのステップに従ってください。 方法1/2:メニューの計画 wikiH...

その他のセクション 多くのカップルが目的地の結婚式のために、そして楽園で一緒に新しい生活を始めるために、ハワイの豪華な島々に旅行します。ビーチでの簡単な結婚式から壮大なお祝いまで、ハワイはあらゆる種類の結婚式に多くのオプションを提供しています。これほど大規模なイベントや遠くからのイベントを計画したことがない場合は、結婚式のイベントを成功させるために、大切な日に必要なリソースにアクセスして予約する方...

お勧めします