# NodeJS!
~~到底是誰覺得把瀏覽器打包出來是個好主意~~
---
## JavaScript與Console
上學期說到，HTML+CSS+JS是網頁檔(.html)的原始語言；分別負責對瀏覽器中的「架構」、「渲染」、「動態」做追蹤或調整
---
而Node.js則是將瀏覽器中的執行環境給整個抽出來，如此一來就可以用黑畫面（主控台）執行用JavaScript寫的程式
從此，原本只為了控制網頁而生的JS，大開了電腦系統之門 :D
---
## [下載NodeJS](https://nodejs.org/en)
裝完後會有一個 "command prompt for NodeJS"，指令得用它才能執行
----
創建js檔：VS、Notepad++……甚至直接用記事本改副檔名都行（？）
用NodeJS執行：
```
node ".js檔案位置"
```
---
## 程式語言入門組合技：
----
### 程式語言1--變數
可以“隨著程式進行改變儲存值”的值
其作用如同一個箱子，可將一些文數字暫存在內
JS中的變數是以“let”宣告區域變數，“var”宣告全域（準確來說：於函數內持續存在的）變數，還有“const”是宣告常數（宣告後只得初始化數值，其後不得更改數值）
用法示意如下：
```
var V = 5;
let L = 8;
const C = 3;
//C = 30; //error
for(...)
{
var V = 200;
let L = 1357;
console.log(V); //200
console.log(L); //1357
}
console.log(L); //5
console.log(V); //1357 <- wtf
```
----
### 程式語言2--判斷
根據數值的變化判斷下一步該怎麼做，流程圖的分支
JS的語法跟大部分高階程式語言一樣：
```
if(n>10)
{
console.log("大於十");
}
```
----
### 程式語言3--迴圈
重複重複重複再重複……
for迴圈格式大致都是這樣：
for（初始值；執行條件；步進指令）
```
for (let i=0;i<10;i++)
{
console.log(i) //1234...
}
```
以及通常會有個while迴圈：
while(執行條件)
```
let x=-3;
while(x < 10)
{
console.log(x);
x += x-5;
}
```
----
### 程式語言4--陣列
用來儲存一連串資料的東西，用陣列名[索引值]儲存資料
JS沒有類型、不用大小，跟python那樣中括號丟進去就對了
```
let A=[3,1,4,1,5]
while(A[i] != 4)
{
console.log(A[i]);
}
```
備註：JS也不管你陣列裡面類別一不一致，例如[1,"hello",3.5]都是合法的存在
----
### 程式語言5--函式
用來把程式「分段處理」的用法
JS要宣告函式是用 function 這個關鍵字：
```
function f(x)
{
if(x == 0) return 1;
else return 0;
}
```
在上面那段函式定義完之後，下面的程式就能呼叫f(x)：
```
if(f(0) == 1)
{
console.log("hi");
}
```
---
* 實作題1：請輸出如下圖像，大小自定
```
* * * *
* * *
* * * *
* * *
* * * *
```
* 實作題2：輸出費氏數列（每一項數字num(x)都是前兩項（num(x-1)跟num(x-2)）的和，並且給定 num(0)=0 ,num(1)=1）
* 實作題3：把第2題的數字反向輸出一遍
（JS運算式寫法詳見分頁(下箭號)）
----
主控台輸出函數：console.log()
常見運算子：
---
## \=、\=\=、\=\=\=
```
let a=10, b="10"
console.log(a === b)
console.log(a == b)
console.log(a = b)
```
---
JS--動態弱型別語言！
* 強/弱型別：會不會在程式跑到一半時幫你“自動轉換資料類型”？
* 動態/靜態：能不能把各種不同類型的值先後“丟給同一個變數”暫存？
---
* python：動態強型別
* JAVA：靜態強型別
* c/c++：靜態強型別
動態：方便
弱型：方便
動態+弱型：非常方便
---
#### 弱型別的壞處？
```
let a;
console.log(!([]+{}+"")*2+true) // :D
console.log(a);
console.log(typeof(a));
```
#### 動態的壞處？
```
let a=true, b=1, c="1", d=[0,1]
if(a=b)
{
c=d;
}
else
{
a=c;
}
console.log(a);
console.log(b);
console.log(c);
console.log(d);
```
---
[Typescript](https://www.typescriptlang.org/)--加上型別檢查的JS！
```
let place: string = "World";
place = "sweet home";//ok
place = ["word","helo"] //error
function echo(name: string): string {
return "Hello " + name;
}
```
---
## 進階用法介紹！
（語法介紹的內容擷取自[綺龍學長的簡報](https://hackmd.io/@Anong0u0/B1O4KoXIi#/)
有興趣都可以點進去owob！
---
### Ternary Operator(三元運算子)
if的「縮寫」
```javascript=
let a = 1;
if(a==="1")
console.log("是1")
else
console.log("不是1")
```
```javascript=
let a = 1;
console.log((a==="1") ? "是1":"不是1")
```
---
## Template Strings(樣板字串)
```javascript=
console.log(`現在時間是: ${year}/${month}/${day} ${hour}:${minute}:${second}`);
```
跨行字串：
```javascript=
console.log(`1
2
3`);
/*1
2
3*/
```
---
## For Iteration(for的迭代)
考慮以下程式：
```javascript=
const data = [18,84,45,36,70,28,61,87];
let count = 0;
for (let i=0; i<data.length; i++)
{
if(data[i]<60) count++;
}
console.log(count);
//4
```
基本上只跑了一遍data這個Array，就要寫整個for，還要宣告i的始末……
----
### in、of
```javascript=
const data = [18,84,45,36,70,28,61,87];
for (let i in data)
{
console.log(i) // 以index迭代
}
```
```javascript=
for (let v of data)
{
console.log(v) // 以value迭代
}
```
---
## ... (Spread)
搜尋陣列中的最小值：
```javascript=
const data = [18,84,45,36,70,28,61,87];
console.log(Math.min(...data));
// 18
```
```javascript=
console.log(["開頭", ...data, "結尾"]);
// ['開頭', 18, 84, 45, 36, 70, 28, 61, 87, '結尾']
```
使用...可以將Array內的value展開
----
### ... (Rest)
不確定function會輸入幾個參數？
```javascript=
function test1(a, ...input)
{
console.log(a, input);
}
test1(null, true, "ABC"); // null [ true, 'ABC' ]
test1(); // undefined []
test1(1,2,3,4,5,6,7,8,9); // 1 [2, 3, 4, 5, 6, 7, 8, 9]
```
可以將最後一個參數定為Array
要注意的是只能放最後一位
---
## 為什麼輸出函數這麼長一串？
在JS中，「萬物皆為物件」
（物件是從「自定義的類別」當中宣告出來的變數，詳見後2頁範例）
---
但其實JavaScript沒有類別，畢竟原本是拿來處理網頁的，它更關心整體資料
新版還是有提供建構用的語法：
```
class player{
constructor(H,M){
this.hp = H;
this.mp = M;
}
speak()
{
console.log("hello");
}
};
```
在Class-Based的語言當中，會有更嚴格的分類與寫法
但JS只把他當成好幾組資料的組合直接用，所以才出現上面那種會讓OOP出身的同學發毛的寫法
---
```
let owo = new player();
console.log(typeof(owo));
```
在有類別的情況下，從「自訂類別」宣告出來的「自訂變數」就叫做“物件(object)”
而在JS當中，不存在類別，並且那些物件裡面還可以裝其他類別，其中在裡面放函數就是我們用的方法
所以才會出現很多內建函數都有一堆點點
---
## 那在JS中的object到底是什麼？
---
#### 來自學長的補充：
在JS裡面，object是以dictionary（字典，簡單來說就是可以用數字以外的東西當作index的陣列）的形式儲存，所以也可以用同樣的方法存取
```javascript=
const obj = {};
obj["hi"] = true;
obj.hello = "😋";
console.log(obj);
console.log(obj["hello"]);
console.log(obj.hi);
const newObj = {"我是":"新的", ...obj};
console.log(newObj);
```
---
# 簡報結束！
{"title":"JS!","contributors":"[{\"id\":\"eaada5fe-f640-48a0-907d-e339eead0db8\",\"add\":9070,\"del\":4160}]","description":"可以“隨著程式進行改變儲存值”的值其作用如同一個箱子，可將一些文數字暫存在內js的變數是以“let”宣告區域變數，“var”宣告全域（準確來說：於函數內持續存在的）變數用法示意如下："}