# JS杂食-06--小实作-1: Star Calculator

参考资料1：MDN — the Mozilla Developer Network
参考资料2：0 陷阱！0 误解！8 天重新认识 JavaScript！
参考资料3：[笔记][JavaScript]所谓的「停止事件」到底是怎麽一回事？
图片来源(NASA开放非商用皆可自由取用）： NASA Image and Video Library
终端机效果参考来源：Retro Terminal Blog Style

用HTML+纯JS试作一表单，规格：

两个输入框
一个提交按钮
点击按钮时呈现两个输入数字之和

本篇实作CSS效果单纯个人喜好，重点在JS语法的学习脉络，故不会着墨CSS细节

前置作业

基本HTML, CSS知识
新增一资料夹至少包含以下三种档案：index.html、style.css、main.js 到对应资料夹结构中，我想放到背景的照片也放入images资料夹中

images
|--nasa.jpg
scripts
|--main.js
styles
|--style.css
index.html

撰写HTML (`index.html`)

数字需要透过输入框写入，而输入框需要包覆在<form>tag之中；依序在<body>中填入<form>、2个<input>後，给予对应#id以便JS操作，这边的<form> id命名为starCalculator，而2个<input>框id则分别命名为starNumber1、starNumber2
将欲引入的JS档案放在</body>前，以避免HTML画面还没解析完JS就先运作，举例：如果画面还没跑完，星星计算机就先计算(JS)，那麽等画面(HTML+CSS)跑完使用者输入数字後，这个画面将没办法提供相加结果，因为JS早已运作过

<body>
  <form id="starCalculator">
    <p>
      <input type="number" placeholder="input a random number" id="starNumber1"> + <input type="number" placeholder="input a random number" id="starNumber2">
    </p>
    <input type="submit" id="submit">
  </form>
  
  <script src="scripts/main.js"></script>
</body>

脚本载入策略(Script loading strategies)
若需要将内部JavaScript或外部JavaScript放在HTML的<head>区域，而非如同上述范例放在</body>前；内部JavaScript可使用"DOMContentLoaded"来解决，而外部则可以使用defer，例如：<script src="main.js" defer></script>，两者不存在同时使用，详情请参考连结。

撰写JavaScript (`main.js`)

根据上面所撰写的HTML档案，接着以JS语法取得两个想操控的<input>输入框，取得id的方式是使用 querySelector

let starNumber1 = document.querySelector("#starNumber1");
let starNumber2 = document.querySelector("#starNumber2");

严格来说1.是透过DOM API来取得节点，常见有以下四种：
Selector选取器：回传第一个NodeListdocument.querySelector('..xxx or #xxx or xxx')、回传所有NodeListdocument.querySelectorAll('xxx')
tag：document.getElementByTagName('xxx')
classname：document.getElementByClassName('xxx')
id：document.getElementById('xxx')

设变数starNumberTotal，将两个输入框相加的结果存在其中
starNumberTotal = starNumber1 + starNumber2;，然而这时候打开浏览器console会发现相加结果NaN，於是反查starNumber1得知这时捕捉到的数字还是字串，所以可以透过浏览器检查有哪些属性，这边我发现了valueAsNumber(下方还有另外两种方法)

// 这样写浏览器就能把输入的数字真正读成数字并相加

let starNumberTotal = starNumber1.valueAsNumber + starNumber2.valueAsNumber;

// 用Number()，注意starNumber1&2 後面接的是value

let starNumberTotal = Number(starNumber1.value) + Number(starNumber2.value);

// 使用parseInt()，注意starNumber1&2 里面接的是字串value

let starNumberTotal = parseInt(starNumber1.value) + parseInt(starNumber2.value);

想请浏览器在按下submit按钮时，帮我们计算两个input相加结果，所以我们要先用querySelectot找HTML<form>上的id，并且为"submit"加上事件监听器addEventListener，其3个参数分别为：（1)submit事件,(2) 接着写一匿名函数把前述第2点中的变数starNumberTotal放进来，如果这段相加变数不放进匿名函式，网页载入(解析）尚未完成，JS算式就会先相加了，所以程序码摆放位置也要注意；(3)设定false代表使用「捕获」机制
下一步，在函式中加入简单的alert来跳出相加结果
最後，帮匿名函式事件加上preventDefault

document.querySelector("#starCalculator").addEventListener(
  "submit",
  function (event) {
    let starNumberTotal = starNumber1.valueAsNumber + starNumber2.valueAsNumber;
    alert(starNumberTotal);
    event.preventDefault();
  },
  false
);