# JS簡介
###### tags: `HyUI4.0`
---
## JavaScript起源
Note:
JavaScript 起源 1995，
由 網景(Netscape)公司所發明，
當初其實他們是為了自家瀏覽器所開發的，
初衷也很簡單，就是一些網頁特殊效果
或是檢查驗證表單之類的
---
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)後，
還是可以去將它的值改為另一種型別。
Note:
強型別語言變數在被宣告的時候，必須指定一種資料型別給它，
如果對這個變數做了錯誤型別的運算時，就會出現錯誤
---
由於 JavaScript 是個「弱型別」的語言，
變數本身無需宣告型別，
型別的資訊只在值或物件本身，
變數只用來作為取得值或物件的參考
---
---
如果在沒有宣告變數的情況就使用的話，該變數會變成'全域物件'
而沒有該變數時使用就會出現 ReferenceError 的錯誤
在使用上請儘量還是要宣告後再使用
---
沒宣告 找不到這個值
---
但在開發的時 即便你的變數在事前
沒有透過 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' 這個結果
---
參考影片
1.2.3_undefined 介紹
---
### Null
---
null 是「存在但沒有東西」，
有種刻意用 null 來標記「沒東西」的感覺
---
```=javascript
var a; // undefined, 尚未給值，未定義
var b = null; // null, 明確代表此變數沒有值
```
---
網路上透過這張圖給出明確解釋
---
如果用 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
---
8. 沒宣告 Var 的情況下 變數 會變全域變數
9. 變數沒有型別 值才有
11. null 型別為 object
12. null(空值的意思) (代表的是此變數可能曾經有值，可能沒有值) 現在沒有值
---
14. NaN 的型別為 number
15. NaN 與任何數字相加都是NaN
17. NaN 不等於 **NaN**
---
<!--
9. 在同區塊內 Var可以重複宣告 let 會出現錯誤
SyntaxError: Identifier 'a' has already been declared (2:4)
 -->
## 參考資料
[何謂 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>
{"metaMigratedAt":"2023-06-17T15:41:59.389Z","metaMigratedFrom":"YAML","title":"JS簡介","breaks":true,"contributors":"[{\"id\":\"fda39c8c-d6a8-4660-b643-d2ea31f0a0a8\",\"add\":22610,\"del\":15610}]"}