あなたの最初の計算機のアプリを作るには

4507 ワード
codenewbie javascript beginners テキストリンク
皆さんこんにちは!
免責事項:これはステップバイステップガイドあなたの完全な空想電卓アプリを構築することではありません
あなただけのDOMと関数を学んだ場合は、計算機のアプリを実践し、理論的な学習を統合する良い方法でありえます.

こうしましょう
  • ユーザー入力
    • <input type="number" id="value1" class="inputBox">
<input type="number" id="value2" class="inputBox">
    JavaScriptのID値を後で処理するために予約します.
  • ユーザインタラクション
    • <div class="box__sum">
   <button class="btn" id="sum">+</button>
   <p id="sum_result">0</p>
</div>
    電卓の各算術演算の原則は同じですが、違いは算術演算子の使用です.
    今、我々は2つの入力フォームをユーザーが入力すると、合計操作を行うには、ボタンをクリックします.
  • 和関数
    • 
function calculatorSum() {
    let value1 = document.querySelector("#value1").value;
    let value2 = document.querySelector("#value2").value;
    let total = parseFloat(value1) + parseFloat(value2);

    document.querySelector("#sum_result").innerHTML = `${total}`;
}
    注意:Valueプロパティを使用すると、文字列を返します.
    value 1とvalue 2を数値に変換しない場合、+演算子を使用して2つの文字列を連結できます.そして、value 1とvalue 2が文字列であることを思い出してください.
  • ボタンと機能呼び出し
    • const btnSum = document.querySelector("#sum").addEventListener("click", calculatorSum);
    ボタンで行きますid="sum" クリックすると、calculatorSum 関数.
    CodePen for your sum calculator
    それはきれいではないが、仕事をする.
    さて、それはあなた次第です.
  • あなたはより算術演算子を増やすことができます
  • あなたはCSSを追加することができますし、iPhoneの計算機のように見えるように
  • あなたのコードをクリーンアップし、効率を向上させることができます
    • あなたが学んでいる場合は、練習と一貫性を忘れないでくださいあなたの進歩の鍵です!
    シンプルなチャットプログラム
    MySQLデータリアルタイム同期Elasticsearchスキーム