33岁转职者的前端笔记-DAY 19 练习写一个计算机

写计算机前必学的知识点

资料型别 (typeof)

检查变数的型别：typeof

资料型别如下：

string 字串
number 数字
boolean 布林 (true, false)
object 物件

取余数范例

取10除3的余数：
console.log(10 % 3);
答案是1

parseInt = 字串的数字会转换成数字的整数，无条件舍去小数点
parseFloat = 包在字串的数字转换成数字并且有小数点

计算机写法练习

范例图如下：

语法：

HTML

 <form id="form">
    <input type="number" id="xInput" min="0" max="100000" required> +
    <input type="number" id="yInput" min="0" max="100000" required> =
    <span id="result"></span>
    <br><br>
    <button>计算</button>

  </form>
  

JavaScript

// 取得画面上要控制的标签(DOM Document Object Model)
const form = document.getElementById("form"),
  xInput = document.getElementById("xInput"),
  yInput = document.getElementById("yInput"),
  result = document.getElementById("result");
  // 从标签取得的任何资料都是字串

form.addEventListener("submit",  function (e) {
  //预防重新整理的预设行为
  e.preventDefault();
  // e = event
  //表单送出後的流程
console.log("表单被送出罗!", e);
const x = parseInt(xInput.value);
const y = parseInt(yInput.value);
const ans = x + y;
result.innerText = ans;
});