---
# System prepended metadata

title: Web企業運算_Week2_許家維

---

# Web企業運算_Week2_許家維

# **練習清單**


1. 上課內容
* node fs文件管理系統
* node Express框架
* Javascript 錯誤處理
2. 購買網域 & 虛擬伺服器相關資料
3. 切版練習 - 個人履歷網站(Bootstrap + Jquery)
4. 技術文章 : avaScript - JavaScript 變數與資料型別
https://ithelp.ithome.com.tw/articles/10216831

# **程式**


* 非同步讀取 fs.readFile()
* 同步讀取 fs.readFileSync('檔名'); 
```
// 使用fs模塊
var fs = require('fs');

// 非同步讀取
fs.readFile('input.txt',function(err,data){
    // (err) => (err == true) 
    if(err) 
        // 輸出錯誤訊息至控制台
        return console.error(err);
        // 傳回目前文件內的字串
        console.log("非同步讀取 - " + data.toString());
})

// 同步讀取
var data = fs.readFileSync('input.txt');
console.log("同步讀取 - " + data.toString());

console.log("Read ended");
```

執行結果
```
PS C:\Users\家維\Desktop\node0310> node week2_1.js
同步讀取 - 國立彰化師範大學
Read ended
非同步讀取 - 國立彰化師範大學
```

**查看目前目錄與檔案**
```
// 目前目錄名稱
console.log(__dirname);
// 目前檔案名稱
console.log(__filename);
```
執行結果
```
C:\Users\家維\Desktop\node0310
C:\Users\家維\Desktop\node0310\week2_1.js
```

**設定延遲時間**
```
// setTimeout() : 執行完才會執行下一次
let i = 1;
setTimeout(()=>{
    i = i * 2 ; 
    console.log(i);
},1000);

// setInterval() : 一個還沒做完就會做下一次
let j = 2048 ;
setInterval(()=>{
    j = j / 2;
    console.log(j);
},1500);
```
執行結果
```
2
1024
512
256
128
64
32
16
```

**Express 框架**
* npm install express -g (Global)
* npm install express (Location)
```
// 使用express模塊
var express = require('express');
var app = express();


// req  : 表示 HTTP 請求，包含請求查詢字串，參數，内容，HTTP 頭部等属性
// res  :  response 表示 HTTP 的回應，即在接收到請求時向客户端發送的 HTTP 回應數據


var server = app.listen(8081,()=>{
    console.log("Hello Express Server");
    var host = server.address().address
    var port = server.address().port
    console.log("http://%s:%s", host, port)
    // 此時可用http://120.0.0.1:8081進入頁面
});

// 主頁面輸出
app.get('/',function(req,res) {
    console.log("這裡是首頁");
    res.send("這裡是首頁");
});

// 其他頁面
app.get('/about', function (req, res) {
    console.log("/about");
    res.send('關於頁面');
});

// 匹配/user/jacky”網址，網址中的jacky將被捕獲，作為req.params.who屬性的值
app.get('/user/:id',(req,res) =>{
    res.send(req.params.id);
});
```
執行結果
```
Hello Express Server
http://:::8081
```

建**立一表單頁面，並將使用者填入數據轉為JSON檔案儲存**
```
// 設定主頁 & 表單，並將表單結果轉為JSON格式

app.get('/index.html', function (req, res) {
    res.sendFile( __dirname + "/" + "index.html" );
});
  
app.get('/process_get', function (req, res) {
    // 輸出 JSON 格式
    var response = {
        "first_name":req.query.first_name,
        "last_name":req.query.last_name
    };
    console.log(response);
    res.end(JSON.stringify(response));
});
```
執行結果
```
{ first_name: 'YO', last_name: '123' }
{ first_name: '456', last_name: '123' }
```

**Javascript 錯誤處理**
```
// 錯誤處理
// 我們預期在 try 區塊內的程式碼會成功執行
// 但當有 try 區塊中有任何錯誤發生時，會立即進入 catch 的區塊
// 如果沒有錯誤發生，則會跳過 catch 區塊
// finally 則是會在 try...catch... 之後先被執行

try {
    var x = 10;
    x = x + add;
    console.log("Try區塊正確才能顯示出來")
} catch (exception) {
    console.log(x);
    console.log("Try區塊有錯誤喔")
} finally {
    console.log(x);
    console.log("在try catch區塊後執行")
};
```

執行結果
```
PS C:\Users\家維\Desktop\node0310> node error.js
10
Try區塊有錯誤喔
10
在try catch區塊後執行
```

**Javascript 函式用法**

```
let personal = {
    name : 'Jacky',
    age: 23,
    birth: 860224,
    // 將陣列資料轉為一個Function
    toString: function(){
        // this.XX 這個函式內的變數
        return this.name + "年齡為" + this.age + "出生日為" + this.birth
    }
};
// 輸出每個資料
console.log(personal.name);
console.log(personal.age);
console.log(personal.birth);
// 2秒後輸出
setTimeout(function() {
    console.log(personal.toString());
},2000);
```
執行結果
```
Jacky
23
860224
Jacky年齡為23出生日為860224
```



# **成果筆記**

**FS文件系統**
* 打開文件 : fs.open()
* 寫入文件 : fs.writeFile()
* 擷取文件 ; fs.fturncate()
<br>

**動畫設定**
* requestAnimationFrame：要**自己 call 自己**，才會有下一次。不用設時間，會根據執行時間的快慢做調整。**是處理動畫首選**。函式內預設就會產生 time 這個變數。
* setTimeout： 一定要執行完後才能執行下一次，但仍會超過時間。可以用來處理資料。
* setInterval：一個還沒做完就會做下一次，而且會超過時間，最好少用。

**錯誤處理**

在撰寫程式的過程中發生錯誤（error）或出現例外情況（exception）是經常出現的情況，一般我們會把「錯誤」稱作「例外」，兩者可以交替著使用。
* try語句使你可以測試程式區塊是否存在錯誤。
* catch語句使你可以處理錯誤。
* throw語句使你可以建立自定義錯誤。
* finally語句使你可以在嘗試並捕獲之後執行代碼，而不管結果如何。

**this用法**
我們可以簡單理解為，**this所在函式被呼叫時的當前作用域**
Ex.
var fun = function() 
{
    console.log(this);
}

fun();// console: window，fun 的執行context為window，即this所在函式（fun()）被呼叫時的當前作用域為window。

new fun();//console: fun，fun 的執行context為fun物件內，即this所在函式（fun()）被呼叫時的當前作用域為fun物件內。

但有一種特殊情況

```
<input type=”button” id=”aButton” value=”demo” onclick=”demo()” />
<script type=”text/javascript”>
function demo() {
    this.value = Math.random();
}
</script>
```

點選這個button之後，你會發現按鈕的value值沒有改變。
原因：在本程式碼執行的情況下**this指向的是window物件**。




# **心得**

這週的上課內容較多，理解的時間也較長。雖然可能沒辦法把fs及express的內容完全熟悉，但能操作的基本上都有實際操作過一次了，下次專案需要使用時，至少知道要使用哪一種方法了。另外，最近由於專案問題，發現自己在JS方面較為不足，決心利用這門課的學習時間，從最基礎開始認真理解JS之原理。目前也為了實習的履歷投遞建置自己的個人履歷網站，目前先以畫面為主，利用Bootstrap+Jquery做出簡單美觀的網站，並輔以些許互動元素。希望未來在認真學習js後，能夠再添加一些元素進入網站。