iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 28
1
Modern Web

有角拾系列 第 28

# 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試作一表單,規格:

  1. 兩個輸入框
  2. 一個提交按鈕
  3. 點擊按鈕時呈現兩個輸入數字之和

本篇實作CSS效果單純個人喜好,重點在JS語法的學習脈絡,故不會著墨CSS細節


前置作業

  1. 基本HTML, CSS知識

  2. 新增一資料夾至少包含以下三種檔案:index.html、style.css、main.js 到對應資料夾結構中,我想放到背景的照片也放入images資料夾中

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

撰寫HTML (index.html)

  1. 數字需要透過輸入框寫入,而輸入框需要包覆在<form>tag之中;依序在<body>中填入<form>、2個<input>後,給予對應#id以便JS操作,這邊的<form> id命名為starCalculator,而2個<input>框id則分別命名為starNumber1starNumber2

  2. 將欲引入的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)

  1. 根據上面所撰寫的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')
tagdocument.getElementByTagName('xxx')
classname:document.getElementByClassName('xxx')
iddocument.getElementById('xxx')

  1. 設變數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);
  1. 想請瀏覽器在按下submit按鈕時,幫我們計算兩個input相加結果,所以我們要先用querySelectot找HTML<form>上的id,並且為"submit"加上事件監聽器addEventListener,其3個參數分別為:(1)submit事件,(2) 接著寫一匿名函數把前述第2點中的變數starNumberTotal放進來,如果這段相加變數不放進匿名函式,網頁載入(解析)尚未完成,JS算式就會先相加了,所以程式碼擺放位置也要注意;(3)設定false代表使用「捕獲」機制
  2. 下一步,在函式中加入簡單的alert來跳出相加結果
  3. 最後,幫匿名函式事件加上preventDefault
document.querySelector("#starCalculator").addEventListener(
  "submit",
  function (event) {
    let starNumberTotal = starNumber1.valueAsNumber + starNumber2.valueAsNumber;
    alert(starNumberTotal);
    event.preventDefault();
  },
  false
);

成果展示:提示框成功顯示數字相加結果了!


上一篇
Star Calculator
下一篇
運算式與運算子
系列文
有角拾30

尚未有邦友留言

立即登入留言