# Web企業運算 - Week1_許家維

1.本週練習清單

* Node.js之eventEmitter內容
參考網站 : https://www.runoob.com/nodejs/nodejs-event.html

* Javascript學習
搭配書籍 : 0 陷阱！0 誤解！8 天重新認識 JavaScript！
學習單元名稱 :
Day1
* 基礎知識與資料型別
* 物件、陣列以及型別判斷

* 技術文章閱讀
主題 : 實踐無障礙網頁設計
https://ithelp.ithome.com.tw/users/20108045/ironman/2454

2.程式

**03.03上課內容**

// 測試
console.log("node test");

// 引用events模塊
var events = require("events");

// EventEmitter具有事件觸發與事件監聽功能
var eventEmitter = new events.EventEmitter;

// 設定第一種觸發動作buy
// function(){}也能使用 -> 'buy',()=>{}; 代替
// on用於綁定事件，emit用於觸發事件
eventEmitter.on('buy',function(){
    // 輸出buy hamburger
    console.log("buy hamburger");
    // 接著進入eat這個動作
    eventEmitter.emit('eat');
});

// 設定第二種觸發動作eat
eventEmitter.on('eat',function(){
    console.log("eat hamburger");
});

// 設定時間(過3秒(3000ms)再執行一次eat)
setTimeout(function(){
    eventEmitter.emit('eat');
},3000);

// 表示開始buy這個動作
eventEmitter.emit('buy');


// 程式結束
console.log("Program Ended");

**Terminal**

PS C:\Users\家維\Desktop\Node_0303> nodemon test.js
[nodemon] 2.0.2
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node test.js`
node test
buy hamburger
eat hamburger
Program Ended
eat hamburger
[nodemon] clean exit - waiting for changes before restart

3.成果

學習筆記區

* **同步與非同步的差異**

<img src="https://www.oxxostudio.tw/img/articles/201706/javascript-promise-settimeout-1.jpg"></img>

// 根據以下程式碼，等待1秒後A與B會同時出現，而非A執行1秒後再執行B

setTimeout(function(){
    console.log('A');
},1000);

setTimeout(function(){
    console.log('B');
},1000);

**requestAnimationFrame筆記**
* requestAnimationFrame解決了瀏覽器不知道javascript動畫什麼時候開始、不知道最佳迴圈間隔時間的問題。它是跟著瀏覽器的繪製走的，如果瀏覽器繪製間隔是16.7ms，它就按這個間隔繪製；如果瀏覽器繪製間隔是10ms, 它就按10ms繪製。這樣就不會存在過度繪製的問題，動畫不會丟幀。
* 瀏覽器頁面每次要重繪，就會通知requestAnimationFrame，這是資源非常高效的一種利用方式
* Why?
1. 若很多個requestAnimationFrame()要執行，瀏覽器只要通知一次即可。而setTimeout是多個獨立繪製。
2. 頁面不出於當前頁面(像是頁面最小化)，頁面是**不會進行重繪的**，自然requestAnimationFrame也不會觸發(因為沒有通知)。
* 參考網址 : https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/260087/

**Javascript學習之給自己的筆記**

* var : 能夠重新宣告，會覆蓋前面的值
* let : 作用域比var小，不能在同個scope使用let關鍵字再次宣告同名稱的變數，否則會報錯(//uncaught SyntaxError: Identifier 'm' has already been declared.)
* const : 用來定義常數，只能在定義時設定初值，之後就不能改變，但可以在定義時計算初值

* 雙引號("")和單引號('')在js上沒有什麼差異，依習慣使用即可，但**不可混用**
* **undefined & null**
* undefined 代表此變數還沒有給值，所以不知道是什麼
* null 代表此變數可能曾經有值，可能沒有值

4.心得

今天在課堂上老師帶領我們入門node.js的最基礎，雖然我自己有安裝過Node.js，但也僅止於跟著網路上影片做，沒有去認真研究他的Source Code，只會最基本的npm init這類的指令。今天這堂課讓我學習到使用Node.js去綁定及觸發多個事件，另外由於其他專案需要，最近自己也在學習setTimeout()與setInterval()等概念，故把setTimeout概念加進上方的程式內。未來如果有時間的話，希望自己能夠好好研讀Node.js的細部source code，搭配原生Javascript進行學習，才能夠往前端工程師更進一步。