---
# System prepended metadata

title: JS簡介
tags: [HyUI4.0]

---

---
type: slide
---
# JS簡介

###### tags: `HyUI4.0`

---


## JavaScript起源

Note:
JavaScript 起源 1995，
由 網景(Netscape)公司所發明，
當初其實他們是為了自家瀏覽器所開發的，
初衷也很簡單，就是一些網頁特殊效果
或是檢查驗證表單之類的

---

![](https://i.imgur.com/mLGUoUh.png)

Note:
布蘭登·艾奇（Bremdan Eich），在 1995 年受聘於網景（Netscape）公司。當時網景公司急需一種網頁腳本語言，使得瀏覽器可以與網頁互動，那個時期，網頁的表單驗證完全依賴伺服器端的語言來驗證，如果只是打錯字，送出檢查後再被踢回來，來來回回也許就要花掉幾分鐘。
布蘭登·艾奇 借用其他語言 用了 10 天的時間創造了 Javascript。


---


## JavaScript 在哪裡執行？

* 在瀏覽器執行

* 後端也能使用 JavaScript 語言做撰寫

* 手機 app

Note:
起初 JavaScript 都在瀏覽器執行，是因為瀏覽器有各自的引擎能夠執行 JavaScript，像是 Google 為 V8
之後有位美國工程師 Google 的 V8 引擎上做進一步開發，讓非瀏覽器也能執行 JavaScript，我們稱做 Node，至此後端也能使用 JavaScript 語言做撰寫
在更之後 React 推出 React native，讓我們可以使用 JavaScript 去撰寫手機 app


---

## 關於 JavaScript 的前世今生

參考影片 1.1 7:35 - 11:30

<!-- <iframe src="https://player.vimeo.com/video/368713918?h=a7ecdcca20&color=808080&title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe> -->


---

## 變數與資料型別

---

### 變數

變數是用來儲存資料和進行運算的基本單位，
可以將變數想像為一個盒子，用來存放資料

---


*  變數的第一個字母必須為英文字母、底線 _ 或是錢字號 $ ，後面可以是英文字母、底線 _ 或是錢字號 $ 以及數字
 
*  變數宣告不能為保留字或是關鍵字
 
*  JavaScript 的語法命名是有區分大小寫的 會被認定為不同的兩個變數

---

### 弱型別語言

---

### JavaScript 是弱型別語言

在弱型別語言中，變數被宣告(declare)
且初始化(initiate)後，
還是可以去將它的值改為另一種型別。

![](https://i.imgur.com/nt5or3r.png)

Note:
強型別語言變數在被宣告的時候，必須指定一種資料型別給它，
如果對這個變數做了錯誤型別的運算時，就會出現錯誤

---

由於 JavaScript 是個「弱型別」的語言，
變數本身無需宣告型別，
型別的資訊只在值或物件本身，
變數只用來作為取得值或物件的參考

---

![](https://i.imgur.com/47DYC6p.png)

---


如果在沒有宣告變數的情況就使用的話，該變數會變成'全域物件'
而沒有該變數時使用就會出現 ReferenceError 的錯誤

![](https://i.imgur.com/4ICpMmi.png)

在使用上請儘量還是要宣告後再使用

---

沒宣告 找不到這個值

![](https://i.imgur.com/GUJyrng.png)


---

但在開發的時 即便你的變數在事前
沒有透過 var / let / const 做宣告的時候，

仍然可以給定變數初始值，但不建議這麼做。

<small>所有沒有透過 var / let / const 宣告的變數都會自動變成全域變數</small>

---

參考影片 
1.2_ 動態型別

---


在 ES6 之後宣告
「變數」與「常數」，除了 `var` 之外，
還可以透過 `let `與 `const `做宣告

<small>後面章節會針對ES6另外做介紹 </small>

---

### JavaScript的型別

---

JavaScript 內建的型別主要可以分成
基本型別 (Primitives) 與
物件型別 (Object) 兩大類

---

### 基本型別分成七種

* Number
* String
* Undefined
* Null
* Boolean
* Symbol （於 ECMAScript 6 新定義）
* BigInt

note:
除了上述幾種基本型別之外，都可以歸類至物件型別 (Object)。

判斷型別的方式，可以透過 typeof 運算子來協助我們。



---

```=jacascript
typeof  true;         // 'boolean'
typeof  '這是字串';       // 'string'
typeof  123;          // 'number'
typeof  { };          // 'object'
typeof  [ ];          // 'object'


typeof window.alert;  // 'function'
typeof null;          // 'object'

```

---

### Number

---

不管整數或帶有小數點的數字都是 數值的型別

```=javascript
var a = 10;

var b = 12.34;
```

---


另外還有幾種特殊的數字

Infinity (無限大) 、 -Infinity (負無限大) ，
以及 NaN (不是數值，Not a Number)

---

### 關於NaN

---

NaN 的全名為：Not a Number

note:
翻成中文就是這個值並不是一個數字
就字面上來說，它不是個數字，但你若用 typeof 運算子來判斷型態，它又會告訴你這是個 number。

---

```=javacsript
typeof(NaN);    // "number"
```

---

通常都會發生在進行數字的轉換上會回傳的結果

```=javascript

const a = 'abc123'
//將字串轉為數字
console.log(Number(a))   // NaN

```

---


NaN 與任何數字作數學運算，結果都是 NaN


---

 NaN 並不等於任何的數字，甚至是自己
```=javascript
NaN === NaN;    // false
```

---



參考影片 

1.2.1_變數 number 介紹


---


### String

---

String(字串)

* 字串會用 ' ' (單引號) 或 " " (雙引號) 包住，
  兩者不可混用
* 單引號與雙引號的使用在 JavaScript 沒有什麼差異，依習慣使用即可

---

```=javascript
var str  = '這是一個字串';
var str2 = "這也是一個字串";
```

---

但是，倘若要在單引號內包覆單引號，

或是雙引號內包覆雙引號就會出現問題
```=javascript
var str = 'Let's go!';    // error
```

---

如果改成這樣就可以

```=javascript
var str = "Let's go!";    // OK
```

---

可以透過 \ (跳脫字元, escape character) 來處理

```=javascript
var str = 'Let\'s go!';    // OK
```

---

如果遇到了多組的字串時，
你可以用 + (加號) 來連接字串

```=javascript
var hello = 'Hello, ' + 'World';
```

---

甚至是多行字串時，可以透過 \ (反斜線) 來繼續：

```=javascript
var hello = '這不是一行文 \
這是第二行 \
這是第三行';
```
<small>要注意的是 \ 反斜線符號後面不能有任何東西，包括空白字元</small>

---




參考影片 

1.2.2_變數 string 介紹


---



### Undefined

---


`Undefined `這個型別就只有 undefined 這個值，
當一個變數沒有被賦予任何值的時候，
它的值就是 undefined。


note:
Undefined 是一個型別，而 undefined 是一個 Undefined 型別的值，這就像是「 Number 是一個型別，而 9 就是 Number 型別的值」，是一樣。

---

宣告後 沒有賦予值

```=javascript
var a
console.log(a) // undefined
```

---

用 typeof 也可以得到 'undefined' 這個結果

![](https://i.imgur.com/lceVT7X.png)

---


參考影片 

1.2.3_undefined 介紹


---

### Null

---

null 是「存在但沒有東西」，
有種刻意用 null 來標記「沒東西」的感覺

---

```=javascript

var a;         // undefined, 尚未給值，未定義

var b = null;  // null, 明確代表此變數沒有值

```

---

網路上透過這張圖給出明確解釋

![](https://i.imgur.com/Mwr8GJt.png)


---


如果用 typeof 的話，
你會得到 'object' 這個錯誤的結果

```=javascript
console.log(typeof null) // 'object'
```

---

>這是 JavaScript 最著名的 bug 之一，在這一篇：The history of “typeof null” 文章中，作者有解釋了為什麼會有這個 bug，並且實際拿出了早期 JavaScript 引擎的程式碼來佐證，而 JavaScript 之父 Brendan Eich 也有在底下留言，修正一些細節。



---



### Boolean

---

Boolean(布林值) 這個型別
的值即是 `true `就是 `false`


---


### Symbol

---

Symbol 是 ES6 才新增的資料型別，
是除了字串以外唯一可以當作 

object 的 key 的東西，而每一個 
Symbol 的值都是獨一無二的

---

### BigInt

---

* BigInt 是 ES2020 才新增的型別
 可以展現比 Number 更大範圍的數值，
 常使用在金融領域。
 
* 它可以比 Number 更準確的表示數字，
 BigInt只能用整數使用方式就是在數字後面
 加一個 n

---


參考影片 

1.3_原始型別及物件型別


---

# 重點回顧

---

1. 變數宣告不能為保留字或是關鍵字
2. JS為弱型別 所以宣告不需指定型別
3. JS型別分為 **基本型別** 與 **物件型別** 
13. 物件型別分 null、boolean、number、
    string、undefined、symbol、BigInt

---

4. 變數宣告沒有賦予值 為undefined
5. 變數沒宣告也沒賦予 會呈現 RefrenceError

![](https://i.imgur.com/ofyfAMZ.png)

---

8. 沒宣告 Var 的情況下 變數 會變全域變數
9.  變數沒有型別 值才有 
11. null 型別為 object
12. null(空值的意思) (代表的是此變數可能曾經有值，可能沒有值) 現在沒有值 

---


14. NaN 的型別為 number
15. NaN 與任何數字相加都是NaN
17. NaN 不等於 **NaN**

---




<!-- 
9. 在同區塊內 Var可以重複宣告 let 會出現錯誤
![](https://i.imgur.com/F0UiRtX.png)

SyntaxError: Identifier 'a' has already been declared (2:4) 
![](https://i.imgur.com/eNnpaG7.png) -->

## 參考資料

[何謂 JavaScript?JavaScript 
起源及使用情境介紹](https://medium.com/@ken556621/js-%E4%BD%95%E8%AC%82-javascript-javascript-%E8%B5%B7%E6%BA%90%E5%8F%8A%E4%BD%BF%E7%94%A8%E6%83%85%E5%A2%83%E4%BB%8B%E7%B4%B9-824910748215)

[重新認識 JavaScript](https://ithelp.ithome.com.tw/articles/10190685)

[JavaScript 起源](https://cheogo.github.io/learn-javascript/201709/origin.html)

[JavaScript 前世今生 
(20190924-前端的前世今生-剪輯版)](https://vimeo.com/368713918)


---

[BigInt介紹](https://blog.huli.tw/2022/02/25/javascript-how-many-types/)

[NaN介紹](https://medium.com/andy-blog/javascript-%E6%9C%89%E8%B6%A3%E7%9A%84%E5%86%B7%E7%9F%A5%E8%AD%98-%E4%B8%80-%E7%A5%9E%E5%A5%87%E7%9A%84-nan-eefe0fc5510f) 

[Symbol介紹](https://ithelp.ithome.com.tw/articles/10220499)

[弱型別介紹](https://medium.com/@yining1204/%E9%97%9C%E6%96%BCjavascript%E7%9A%84%E5%BC%B1%E5%9E%8B%E5%88%A5%E7%89%B9%E6%80%A7-93ffcdcf623e)

[null 跟 undefined 和 NaN](https://sweeteason.pixnet.net/blog/post/43007183-javascript-%E5%9F%BA%E7%A4%8E%E6%89%93%E5%BA%95%E7%B3%BB%E5%88%97-%28%E4%BA%8C%29---%E9%97%9C%E6%96%BC-null%E3%80%81undefine)

[來數數 JavaScript 的所有資料型別](https://blog.huli.tw/2022/02/25/javascript-how-many-types/)

---

[陣列與物件](https://hackmd.io/_m5S2WiuTEqJBRyPUfsR6g#/)

---

<style>
    .reveal h1{
        font-size:2em;
    }
    .reveal h1,.reveal h2 {
         color:#c9f2ff;
}
    .reveal{
        font-size:26px;
    }
</style>