JavaScript 基礎一

1 JavaScript
2 變數與資料類型

JavaScript¶

目前各主流網頁瀏覽器能夠解析的文件内容可分為HTML、CSS及JavaScript，其中HTML定義網頁內容，CSS定義網頁的佈局及樣式，而JavaScript用來呈現網頁動態效果。

JavaScript是所有Web開發人員必學的語言，JavaScript腳本須放在 <script>與</script>標籤之間，而腳本可放置在HTML的<body> 和 <head>中。

隨著HTML5和CSS3的推行，JavaScript也可用於遊戲、桌機、跨平台行動應用程式的開發及在伺服器端網路環境下執行(如Node.js)，一些數據庫，例如MongoDB也使用JavaScript作為其程式語言。

JavaScript開發工具¶

記事本或TextEdit：HTML文件為純文字，一般文字編輯器即可編輯。
Notepad++：NotePad++為在視窗環境下可取代記事本的編輯軟體，除了支援網頁原始碼高亮顯示，並提供指令提示功能，方便編輯網頁。
Visual Studio Code：是微軟公司的程式開發套件，功能強大且輕量型的程式碼編輯器。
Visual Studio：是微軟公司的程式開發套件，具有完整的開發工具集，但其功能過於龐雜，對於初學者需要一些時間才能上手。

簡易的 JavaScript 編輯器¶

Jupyter Notebook
Jupter Notebook 是一個方便可以用來練習簡單的JavaScript語法的編輯器。
Microsoft Azure Notebooks
Microsoft Azure Notebooks則是Jupter Notebook加上雲端硬碟的功能，讓使用者可以隨時隨地的編輯HTML文件。

瀏覽器¶

本文件的執行環境建議使用 Google Chrome 瀏覽器，説明内容將會以Chrome瀏覽器爲主。

註解¶

JavaScript註解可用於解釋JavaScript代碼並使其更具可讀性，單行註解以開頭 //，多行註解則包含在 / 和 / 中間，例如：

// 這是單行註解

/*
  這是多行註解
  這是多行註解
*/

基本輸出¶

console.log()¶

透過 console.log() 可將結果輸出到瀏覽器的控制台，方便除錯。在Chrome瀏覽器中按功能鍵F12，開啓Chrome開發者環境，然後點選Console頁面。

<script>
  // 請按功能鍵F12開啓Console頁面
  console.log("JavaScript");
</script>

在Console中會顯示

JavaScript

window.alert()¶

透過 window.alert()，可以顯示警示框：

<script>
   window.alert("JavaScript");
</script>

innerText / innerHTML¶

透過 getElementById()方法取得id="myDiv"的HTML元素，並將元素的內容屬性innerText或innerHTML改為"JavaScript"，兩者的差異説明如下：

innerHTML：用來設定或獲取元素内所包含的HTML標籤及文字資訊
innerText：會將内容中的 HTML 標籤當作純文字顯示

<div id="mydiv"></div>
<script>
     // innerText會過濾掉HTML標籤 
     document.getElementById("mydiv").innerHTML="<i>JavaScript</i>";
</script>

JavaScript

<div id="mydiv"></div>
<script>
     // innerText會過濾掉HTML標籤 
     document.getElementById("mydiv").innerText="<i>JavaScript</i>";
</script>

<i>JavaScript</i>

JavaScript (JS) 基本語法¶

var x, y, z; //宣告x y z 三個變數
x = 5;       //設定數值 5 給 x 變數
y = 6;     
z = x + y;   //x,y相加後，結果設定給z
console.log(z);

在Console中會顯示

11

其中等號代表設定運算子，每一段程式結束會加上分號；

變數與資料類型¶

變數的宣告¶

變數是用於存儲數據值的容器，JavaScript使用var關鍵字宣告變數，預設值為 undefined（未定義）。

var year; //未設定值，預設為undefined
year=2020;//設定值為數值2020

變數的宣告與設定可以一次完成：

var year=2020;

變數及函數命名¶

變數可以具有短名稱（如 x 和 y）或更具描述性的名稱（如 Year，carName，total_volume）。

Javascript變數及函數命名規則：

名稱必須以字母、底線或$字元開頭，例如：A4
名稱也可以是中文，例如：面積
名稱不能以數字開頭，例如：不可以是4A
名稱只能包含字母、數字、底線或中文（A-z，0-9和_）
名稱區分大小寫
不能使用保留字及關鍵字
當名稱是由二個或多個單字連結在一起時，建議利用「駝峰式大小寫」來表示，可以增加可讀性：
1. 小駝峰式命名法：例如：carName、totalVolume。
2. 大駝峰式命名法：例如：CarName、TotalVolume。

資料類型¶

變數可以儲存不同類型的資料，Javascript具有以下資料類型：

類型	説明	範例
字串	以單引號\'或雙引號\"包覆	'字串' "字串"
數值	只有一種數值類型，不分整數或浮點數	3 3.1416
布林值	只能有兩個值：true或false	true false
陣列	用方括號括起來，並以逗號分隔	[1, 2, 3] ['1', '2', '3']
物件	用大括號括起來，以鍵：值配對，並以逗號分隔	{ height:170, weight:60 }
未定義	未設定值的變數	undefined
空值	指不存在的東西	null

字串¶

Javascript中的字串可以是用單引號或雙引號括起來的文字，"Hello" 與 'Hello' 是相同的。

跳脫字元¶

要在字串中插入特殊字元或已被語法使用的符號，須使用跳脫字元。跳脫字元是以反斜線\ 加上要插入的字元構成。例如要在雙引號包圍的字串中使用雙引號，則會出現錯誤，要解決此問題，須使用跳脫字元 \"
常用的跳脫字元列表如下：

程式碼	結果	説明
\'	'	單引號
\"	"	雙引號
\\|\| 反斜線

常用的跳脫字元(控制字元)列表如下：

程式碼	結果	ASCII縮寫
\n	換行	LF
\r	歸位	CR
\t	水平Tab	HT
\v	垂直Tab	VT
\f	跳頁	FF
\b	退格鍵	BS

數值¶

Javascript只有一種數值類型，不分整數或浮點數，例如下列變數 x 及 y 都屬於數值類型：

var x = 3.14;   
var y = 10;

下列變數 x 是屬於字串類型：

var x = "3.1416";

當字串與數值相加時，其結果會是字串

var x = "3.14";   
var y = 10;  
var z = x + y;

在的結果為 "3.1410" 的字串

布林值¶

布林值只能有兩個值：true或false，通常用在具有：“是/否”、“開/關”及“真/假”的情況。

陣列¶

陣列是一個變數的集合，一次可以容納多個變數或值，語法是用方括號括起來，並以逗號分隔變數或值，例如：

<script>
  var 水果 = ["香蕉","蘋果","芒果"];
  console.log(水果); 
</script>

請按功能鍵 F12，在Console中會顯示：

Array(3)
0: "香蕉"
1: "蘋果"
2: "芒果"

陣列元素的訪問是透過索引號來訪問，例如：

<script>
  var 水果 = ["香蕉","蘋果","芒果"];
  console.log(水果[0]); 
</script>

在Console中會顯示

香蕉

物件¶

用大括號括起來，以鍵：值(key:value)配對，並以逗號分隔每組配對，例如：

<script>
  var 個人資料 = { 
      身高:170, 
      體重:60 
  };
  console.log(個人資料); 

  var personal = { 
      height:170, 
      weight:60 
  };
  console.log(personal);    
</script>

物件元素的訪問是透過鍵(key)來訪問，例如：

<script>
  var personal={height:170, weight:60};
  console.log(personal['height']); 
</script>

在Console中會顯示

170

物件中也能夠包含其他類型的資料或變數，例如：

<script>
  // 包含陣列變數  
  var 水果清單=["香蕉","蘋果","芒果"];

  var 個人資料 = { 
      身高:170, 
      體重:60,
      最愛水果: 水果清單
  };

  // 顯示完整個人資料
  console.log(個人資料); 

  // 顯示最愛水果的清單
  console.log(個人資料['最愛水果'][0]); 
</script>

在Console中會顯示

Object

身高: 170

體重: 60

最愛水果: Array(3)

0: "香蕉"

1: "蘋果"

2: "芒果"

香蕉

JSON (JavaScript Object Notation)¶

JSON是用於數據的儲存和傳輸的格式，服務器與網頁之間的數據交換經常使用JSON格式。JSON作爲數據交換格式，具有輕量化、與語言無關及易於理解等特點。

JSON語法規則簡單來説就是陣列[ ]與物件{ }的交錯格式，例如下例中的個人資料便是有3個物件構成的陣列：

<script>
  var 個人資料 = [
    {姓名:"小明",身高:170, 體重:60},
    {姓名:"小王",身高:165, 體重:55},
    {姓名:"小芬",身高:160, 體重:50}
  ];  

  // 顯示完整個人資料
  console.log(個人資料); 

  // 顯示小芬的個人資料
  console.log(個人資料[2]); 
</script>

在Console中會顯示

Array(3)

0: {姓名: "小明", 身高: 170, 體重: 60}

1: {姓名: "小王", 身高: 165, 體重: 55}

2: {姓名: "小芬", 身高: 160, 體重: 50}

Object

姓名: "小芬"

身高: 160

體重: 50