環境

通常javascript必須搭配HTML使用，可以使用codesandbox來學習javascript，新增sandbox時，請選擇「static」

Untitled

新增一個bmi.html

<!DOCTYPE html>
<html>
  <head>
    <title>BMI</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>

    <script>
    </script>
  </body>
</html>

因為index.html改成:

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    **<ul>
      <li><a href="bmi.html">BMI</a></li>
    </ul>**
  </body>
</html>

我們就利用bmi.html，來實作javascript。

如果不小心選到其他樣板，要換回static，請修改package.json:

{
  "name": "dom",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "start": "serve",
    "build": "echo This is a static template, there is no bundler or bundling involved!"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/codesandbox-app/static-template.git"
  },
  "keywords": [],
  "author": "Ives van Hoorne",
  "license": "MIT",
  "bugs": {
    "url": "<https://github.com/codesandbox-app/static-template/issues>"
  },
  "homepage": "<https://github.com/codesandbox-app/static-template#readme>",
  "devDependencies": {
    "serve": "^11.2.0"
  }
}

變數

接下來我們來介紹一下變數，變數是程式設計的基礎概念。在javascript裡是不需要宣告變數的資料型態，而是根據變數的資料內容自動判斷資料型態。

在javascript有多種定義變數的方法，在這裡我們使用的是let(詳參: JavaScript Let)，也就是告訴javascript，我需要一個叫做num的變數。接下來使用指定敘述設定起始值，也就是讓num這個變數的內容為10。也就是把「=」右邊的值設定到左邊的變數裡。

let num = 10;

我們定義的變數，名稱是可以自訂的。不過，變數名稱是有些限制，例如，第一個字必須是英文字母，不能用保留字，例如var、let (詳參:JavaScript Reserved Words )。另外，使用let定義變數時，只能定義一次，重複定義的話，javascript就會回報變數已定義。

注意一件事，在程式語言裡，是利用浮點運算數來儲存帶小數點的數字，所以，帶小數點的數字是不精準的。例如，0.1+0.2會是0.30000000000000004。

變數是可以計算的，也就是可以形成運算式，一個運算式是由運算子跟運算元構成，例如，加減乘除都是運算子，是所謂的二元運算子，所以，會將運算子左右的運算元 (如:數字或另一個運算式)進行計算。例如，我們要計算BMI，可以這樣寫。 在javascript裡「**」是指數運算。(可參考: 運算式與運算子)