今天要介紹的是昨天暫時跳過的JavaScripts，因為JavaScripts的範圍非常的廣且深，因此我們今天只會稍微的了解有一個基本的觀念，並不會非常的深入去了解它，而今天我們會把它拆解成三個層次來介紹。

JavaScripts是什麼?

JavaScripts(簡稱JS，之後文章內出現也會用JS縮寫)，是一種網頁腳本語言，負責讓網頁不會只有靜態的圖片和文字，讓使用者能夠和網頁互動。例如以下的幾種用途:表單的檢查(例如註冊檢查密碼長度)、按下按鈕後改變文字或播放影片、與伺服器交換資料等功能。

JS的基本語法

1.變數(Variables)
let: 可以改變數值的變數(可變數)
const:宣告後無法改變(不可變數)
注意變數命名規則:不能以數字開頭也不能有空格

範例:

const name = "Izumi";  //表示name是不會變動的值
let age = 18;   //表示age是可變動的值

2.資料型態(Data Types)

區分資料型態可以提升我們對於程式可讀性以及讓電腦更有效率的使用記憶體，例如字串我們能夠知道他是一串字而需要的記憶體空間取決於字數與編碼，布林我們則能馬上判斷出只有是否兩種選項且電腦只需要儲存是與否兩種狀態。而以下這些是我們在JS中常見的資料型態以及舉例。

• 字串(String): "Izumi"
• 數字(Number):46(js不分是否為浮點數)
• 布林(Boolean)：true / false
• 陣列(Array):[1,2,3]
• 物件(Object):{name: "Izumi",age:999}

3.運算符(Operators)

運算符主要的功能是幫我們處理一些數字的資料以及判斷，如加減乘除之基本運算也包括在內。雖然基本與我們日常生活的基本運算使用的符號大致相同，但有些還是有點不一樣，因此我會把基本的內容都打在下方。

a+b:加法a加b
a-b:減法a減b
a*b:乘法a乘b
a/b:除法a除b
a%b:取a除b的餘數
a**b:a的b次方
a>/<b:判斷a是否大於/小於b
a == "b":寬鬆相等，不比較資料型態
a === "b":嚴格相等，資料型態必須也相同

由於條件判斷與迴圈與基本的C語言相差不大，這裡不多做贅述。

4.箭頭函式

一種JS在ES6引入得更簡潔的函式語法，使用=>來定義，如果只有一行return可省略{}及return，同時也會自動沿用外層作用域的 this（稱為 lexical this）

範例:

const greet = (name) => {
    console.log(`哈囉 ${name}`);
}
greet("Izumi");

5.事件監聽(互動網頁必備)

以JS為例，若我們對一個元素加上事件監聽，則當使用者觸發某事如點擊、鼠標移動至指定區域時便會執行我們指定的程式。

基本語法:
element.addEventListener("事件名稱", 處理函式);

按鈕偵測範例:

const btn = document.getElementById("myBtn");

btn.addEventListener("click", () => {
  alert("You Click Me！");
});

而事件監聽的好處則是可以監聽多種事件，且同一元素可以綁定多個事件監聽以及與HTML分離，讓我們的程式碼變更乾淨。

如何在網頁中使用JS?

通常我們有兩種方式，第一種是直接粗暴的把JS程式碼加在HTML的標籤中，然而這種方式容易導致程式碼與HTML混在一起，維護也比較不方便。因此通常我們會用第二種方法，也就是將JS存成.js檔案再用 引入，這樣程式碼便能與HTML分開。

今日小結

天啊!寫這段的時候真的是有種讓人快要發瘋的感覺，因為JS的東西真的非常的多，而有些東西不講可惜，講了又怕沒辦法好好地進行吸收，引此有些東西就被放棄掉了(例如迴圈)，下次如過需要更深入的內容應該會在出個JS第二集，不然一次講完內容真的不是一天就能完整吸收的!明天我們會來認識Cookie。