---
# System prepended metadata

title: W2_Javascript 簡介

---

# W2_Javascript 簡介


## ch1 補充:如何讓外部存取我本機的前端網頁?

> serve + ngrok

1). 先下載這兩個程式並安裝
- https://nodejs.org/en/
- https://ngrok.com/download

2). 安裝 serve 
```
npm i -g serve
```
3). 註冊 ngrok 會員

4). 在本機電腦設定 ngrok 個人驗證 token
```
ngrok config add-authtoken {your_token}
```

5). 打開終端機，並切換到你想分享靜態檔案的目錄
6). 使用 serve 將目標目錄變成本地端的檔案伺服器服務
```
serve .
```
7). 使用 ngrok 將本地端的服務對外開放
```
ngrok http http://localhost:3000
```



### 變數宣告 - var, let, const

**Global Scope**
```javascript=
//
var i = 1;
```


**Block Scope**
var
```javascript
var b = true;
if (b == true) {
    var i = 1;
}
console.log(i);
```
let, const
```javascript
let b = true;
if (b == true) {
    let i = 1;
}
console.log(i);
//'if' can even be removed
```
**Function Scope**
```javascript
function testScope() {
    var i = 1;
    console.log(`inner var i = ${i}`);
  }

testScope();
console.log(`$out var i = ${i}`);
```

**Const**
```javascript
const c = 1;
c = "123";
```

## 型別(Data Types)

### Number
```javascript

let num = 123;


//number 是由 64-bit 組成的，也就是所謂的 float (浮點數)，精確度不高
//  0.1+0.2=?
output(0.1+0.2);

// 使用 toFixed 解決
let fnum = 0.1+0.2;
output(fnum);
```

> 補充: [浮點數 - 如何解決精度問題以及其原理](https://ambersun1234.github.io/random/fixed-point/)

NaN 也是一種 number
```javascript
var n = Number.parseInt("a");
typeof(n);    //number
```



### String

單引號雙引號都可
```javascript
let s1 = "hello";
let s2 = 'hello';
```

取得字串長度
```javascript
"AAAAAAAAAAAAAAAAAAAAA".length
```



跳脫字元
- 如何在 JS 中印出 `I'm "Super" man!` ?


字串格式化
- 在外層使用 `` 符號
- 使用 `${variable}` 來呼叫變數

```javascript
let name = "Roberson";
console.log(`My name is ${name}`);
```

### Object

- 為 key -> value 的資料結構
- 使用 {} 宣告一個物件


```javascript
var guy = {
    "name": "Roberson",
    "age": 18,
    "isMarried": false
};

var guy2 = {
    name: "Roberson2",
    age: 18,
    isMarried: false
};

```


冷知識 - 執行 `var a = { value: 20 };` 的過程中發生哪些事?
1. 在記憶體中要一個位址(stack) - 0x12
2. 將 20 存到記憶體(heap) - 0x99
3. 將 0x12 指向 0x99
![image](https://hackmd.io/_uploads/r1pZEV7IC.png)

```javascript
let a = { money: 100 };
let b = { money: 100 };
let c = a;

a == b;
a == c;

a.money = 200;
c.money;

```

Call by value
```javascript
let a = 1;
let b = 1;
let c = a;

a == b;
a == c;
a == 100;

c
```

Call by reference - `new Number(1)`




> 補充: [Stack 與 Heap 有何差別](https://medium.com/@yauhsienhuang/stack-%E8%88%87-heap-%E6%9C%89%E4%BD%95%E5%B7%AE%E5%88%A5-acdcc11263a0)


## 相等(Equality)

```javascript
'' == '0'           // false
0 == ''             // true
0 == '0'            // true
false == 'false'    // false
false == '0'        // true
false == undefined  // false
false == null       // false
null == undefined   // true
' \t\r\n ' == 0     // true
```


## 陣列(Array)

```javascript
let arr = [1, 2, 3, 4, 5];

arr[0];

arr[-1];

//at() method can access value in -1 index


```

### 日期及時區格式(Date)

- 使用 `new Date()` 可取得日期的物件
- `Date.now()` 回傳自 1970/01/01 00:00:00 UTC 起經過的毫秒數。
    - ![image](https://hackmd.io/_uploads/S1VjKhG8R.png)
    - 這個格式稱為 timestamp


```javascript
# 取得當下的日期物件
let date = new Date();

```



## Reference

- https://www.explainthis.io/zh-hant/swe/javascript

