Joe's Blog

[JS] Hoisting 提升hoisting 提升hoisting 提升的作用使變數和函數的宣告看起來移動到程式碼的頂端，但實際上並非如此，而是程式在編譯期間在宣告變數和函數的部分會先建立記憶體空間，在執行的時候才會將值賦予到該記憶體空間。 看後面的程式來了解更多 hoisting 的特性。 變數的 hoisting 對未宣告的變數存取時拋出 not defined 的錯誤 1console.log(a); // Uncaught ReferenceError: a is not defined hoisting 的作用使宣告的變數值為 undefined 12console.log(a); // undefinedvar a = 10; 可以將以上程式想像成以下(之所以為想像是因為原理並不是真的 JavaScript 引擎會將程式碼變換成如下) 123var a;console.log(a) // undefineda = 10; 第 1, 2 行由於宣告但還未賦予值，所以為 undefined，由此可以看出將 var a = 10 拆解成 var a 及 a = 1 ...

[Node.js] MongoDB前面學習了模板及中介軟體的使用，這裡要再學習數據庫，在其中儲存數據，然後從我們的應用程式獲得數據並將其注入到模板。 什麼是 MongoDB數據庫可以分為兩種，一種為 SQL 關聯式資料庫，另一種則為 NoSQL 非關聯式資料庫。兩者的數據結構不一樣，SQL 使用 tables 的 rows、columns 儲存數據記錄，NoSQL 使用 collections 及 documents。 這裡我們要學習名為 MongoDB 的 NoSQL 數據庫，其會將資料分成好幾個 collections 有些像 SQL 的 table，每個 collection 將用於儲存特定類型的資料，例如有一個 user collection 儲存用戶的 documents、另一個 blog collection 則儲存 blog 的 documents。 而每個 document 則像 SQL 的 record 記錄，每個 document 代表單一個數據項目，例如一個 blog document 代表一個部落格文章的數據，並以 JSON 的格式儲存 而我們可以連接到 M ...

[Node.js] Middleware 中介軟體什麼是 Middleware?中介軟體基本為在獲取請求和發送回應之間，在伺服器上運行的代碼，例如前面學習到的 app.get()、app.use() 即是中介軟體，而兩者之間的差別在於 app.get() 只會針對使用 get 方法的請求觸發，且中介軟體在代碼中是自上而下的運行，因此中介軟體的載入順序很重要，這點會在學習完本節筆記了解到。 那麼中介軟體除了之前的使用方式之外，還能做什麼? 回應 404 頁面 (前面使用方式) 記錄每個向伺服器發出請求的詳細訊息 在一些受到保護的路徑頁面，用於身分驗證檢查 分析從請求發送過來的 JSON 數據 以上為常見的使用 先回顧之前的 app.js 代碼 12345678910111213141516171819202122232425262728const express = require('express');const app = express();app.set('view engine', 'ejs'); app.list ...

[JS] DOM 的事件傳遞機制? 捕獲? 冒泡?在閱讀本文章前，須先了解 DOM 基本的 addEventListener() 事件添加用法，本文主要記錄 DOM 的事件傳遞機制，以及釐清 stopPropagation() 與 preventDefault() 的使用。 Event Flow 事件流程關於事件傳遞最常見的情況便是網頁元素中，父元素包含子元素，兩者皆添加事件，當點擊子元素時也相當於點擊了父元素，所以兩個元素的點擊事件都會觸發，那麼哪一個會先執行呢? 這點在瞭解後面的事件流程後相信就會明白了。 事件流程可以分為三種階段 capture phase 捕獲階段 target phase 目標階段 bubbling phase 冒泡階段 這裡以點擊 (click) 事件為例，但事件流程並不限於點擊事件而已 Capture Phase 捕獲階段圖片來源：Event Flow: capture, target, and bubbling 當點擊網頁某一元素時，會先進行事件捕獲的階段，從最外圍的根節點往下傳遞到點擊的元素，中間經過的父元素都會觸發點擊事件，並依序從最外圍的元 ...

[JS] Closure 閉包在看本篇文章前，建議先了解 scope & scope chain 再來看會比較好。 什麼是閉包?closure 閉包 就是在某函數內宣告另一個函數，該內部函數能夠存取當下的作用域環境，之後即使在該作用域鏈以外的地方使用調用該內部函數，仍然能夠存取該作用域環境的值。 光看敘述可能很難理解意思，直接看以下的範例 12345678910111213141516var a = 20;function outer() { var a = 10; function inner() { console.log(a); } return inner;}const test = outer();test(); // 10console.log(a); // 20 outer() 會回傳 inner 函數，將該函數分配給 test 常數，執行 test() 便會列印出 a 變數的值 10。 看起來好像很合理，但記得在函數裡宣告的變數壽命在函數被調用時創建，在函數執行結束後被刪除，從這點來看變數 a 在 oute ...

[JS] Scope & Scope chainJavaScript 之 Scope 作用域這裡先針對 JavaScript 的作用域進行說明，但作用域並不是 JS 語言才有，作用域簡單來說就是「一個變數能夠被存取的範圍，如果超出該範圍就不能存取到該變數」，或者也有人說作用域就是一個變數的生存範圍。 在 ES6 之前，唯一能夠產生出作用域的是 function，並以此區分為 local scope (區域作用域) 及 global scope (全域作用域)，兩者區別看以下的範例來了解 123456789101112var a = 'global';function test() { var b = 'local'; console.log(a); // global console.log(b); // local}console.log(a); // globalconsole.log(b); // Uncaught ReferenceError: b is not definedtest(); ...

[Node.js] View EnginesView EnginesNode.js 從前面學習到現在，在伺服器響應瀏覽器所用到 HTML 頁面都是靜態的 HTML，內容都是事先就定義好的，現在想要動態的注入數據，例如部落格文章或是個人資料頁面上的用戶資料，而如何很好地在網頁模板上輸出這些數據，我們可以使用稱為 View Engines 視圖引擎或是模板引擎，使用 View Engines 編寫的模板與 HTML 語法相似，且能夠做到將數據動態的注入到網頁中。而 View Engines 也有很多種，例如 Express Handlebars、pug、EJS，而接下來我們將要使用 EJS 繼續後面的學習。 EJS首先安裝 EJS，只要開啟專案在終端輸入 npm install ejs，這裡的專案使用上一筆記的 app.js 安裝 ejs 開啟 package.json 確認已安裝 ejs 接下來要使用 express 做模板引擎的開發，如果你開啟 EJS 的官網可以看到它是直接引入 ejs 模組使用，不一定要結合 express 使用。 開啟 app.js 註冊 view engine， ...

[Node.js] Express什麼是 express觀看 Node.js 上一文章 server.js 的 code，在那樣的情況下編寫不算太困難，但如果開始添加更複雜的路徑或是處理表單… 等，要添加更多的伺服器邏輯，那麼它將會變得相當混亂，難以管理。 而 Express 是一個能幫助我們更輕鬆管理該情況的框架，它能使我們的 code 更容易閱讀、更新和擴增。 首先透過 npmjs.com 搜尋 express，看到安裝的部分 這裡筆者開啟一個空的專案，並在終端輸入 npm init 指令，初始化專案並產生 package.json 檔案 接著輸入安裝 express 的指令 npm install express 透過 package.json 的 dependencies 確認已安裝 express 建立 express app可以看 express 官方文件學習如何使用 express，以下我們直接示範，並與之前的 server.js 做比較 在專案建立一個 app.js 檔 在 app.js 輸入以下 code 12const express = require(' ...

[Node.js] NPM 套件管理工具NPM 套件管理工具前面文章介紹使用 fs 檔案系統的 Node.js 內建模組，但如果我們想使用一些其它的第三方軟體套件來獲得其它的功能且不在內建模組裡，怎麼辦? 我們可以使用 npm（Node Package Manager，「node包管理器」） 來安裝，透過 npm 將 Node.js 程序包直接從電腦上或是單一個專案安裝、更新或刪除，這些程序包有很多種類，例如前端框架 Vue、React … 等。 想要搜尋有什麼樣的套件以及如何使用可以到 npm 的網站，只要在網址輸入 npmjs.com 在 search bar 輸入想安裝的套件，如 express 點擊 express，可以看到如何安裝及使用 安裝全域套件 nodemon這裡就來實際安裝一個套件示範，前面筆記在執行 server.js 時，伺服器處於不斷監聽的狀態，每次改變了 server.js 的 code，都要終止監聽然後再執行，這在開發中很是麻煩。 現在來安裝 nodemon 的套件可以幫助我們實時的重新加載(刷新)伺服器，加快開發速度。 在 npm 網頁搜尋 nodemon ...

[Node.js] 請求與響應首先介紹在上一 Node.js 系列文章中出現的 req 及 res 物件。 Request Object將上一筆記中的 server.js 第四行 console.log('request made'); 改為 console.log(req); 123456789const http = require('http');const server = http.createServer(( req, res) => { // 兩個參數 req 為請求物件，res 為響應回覆物件 console.log(req); // 修改該行，列印出 req 物件});server.listen(3000, 'localhost', () => { console.log('listening for requests on port 3000')}); 執行並在瀏覽器連上 localhost：3000 可以看到 req 物件 ...