# 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後，能夠再添加一些元素進入網站。
Sign in with Wallet
Connect another wallet