[Node.js] 客戶端與伺服器端
[Node.js] 客戶端與伺服器端伺服器端的代碼由 Node.js 驅動,並監聽來自瀏覽器發送的請求,這個過程簡單來說我們在瀏覽器的網址欄輸入網站地址,接著按下 Enter,即會發送請求到託管該網站的伺服器,然後伺服器查看該請求,並決定發送什麼內容回去。
而現在大多數的情況,伺服器將會以 HTML 頁面作為響應的內容,但也可以是圖片、JSON … 等。
IP 位址 & 域名現今可能有數百萬台的伺服器在管理著數以百萬計的網站,而瀏覽器又是通過何種方式能夠正確的連接、並回應我們需要的東西?這裡簡單的了解 IP 位址和網域為其提供了什麼幫助。
IP 位址 (Internet Protocol Address 網際網路協定位址)就像每個人住的家都有一個且唯一的地址,連接到網路的所有電腦也都具有唯一的 IP 位址,現在某些特殊的電腦稱之為主機,表示它們在網路上託管著網站,如果我們想連接到該主機上的伺服器,則需要知道該主機的 IP 位址,將該 IP 輸入瀏覽器便可連接。
域名 (Domain Name 或簡稱 Domain 網域)但 IP 位址只是一串的數字,對於我們人來說要記住其實很麻 ...
CodePen 線上前端程式編輯器
CodePen 線上前端程式編輯器一般要編寫程式碼都要下載編輯器或開發環境,CodePen 提供了線上操作的服務,讓我們可以不用下載、安裝軟體,即可編寫程式碼,只需要能夠開啟網頁的瀏覽器就可以,甚至可以將程式碼儲存在雲端,遷入到自己的網頁、部落格中也是小意思。
首先開啟 CodePen 的網站,點選 Sign Up for Free 免費註冊,如果已有帳號則點選 Log In 登入
註冊方式有以下,擇一即可
登入後,點擊頭像選擇 New Pen
就可以開始編輯 HTML、CSS、JS 程式碼,打完後會自動產生對應的結果在下面的視窗
可以點擊右上角的 Save 儲存該 Pen
右下會出現一些選項,Embed 可以用來嵌入到自己的網頁中
點擊做一些嵌入時的設定
下方選擇 iframe,並複製提供的 code 貼到自己的網站即可嵌入
如下就是嵌入網頁中的結果
See the Pen Hello World! by cub30462
(@cub30462) on CodePen.
[Node.js] 基礎與檔案系統
[Node.js] 基礎與檔案系統全域物件window 是瀏覽器的 global object 全域物件但在 Node.js 中,全域物件不是 window,而是 global
可以試著在 js 檔中輸入
1console.log(global);
並透過終端執行該 js 檔,可以看到如下畫面
可以發現有些與瀏覽器的 window 有一樣的 methods
這裡再試著將 js 檔改成如下
123global.setTimeout(() => { console.log("時間到!");}, 3000);
執行 3 秒後,顯示如下
也可以省略 global,效果仍舊一樣
123setTimeout(() => { console.log("時間到!");}, 3000);
到這裡可以發現 global 與 window 很相似,但還是有不同的地方,例如無法使用 DOM 的 functions,因為 document 在 window 中存在,在 global 卻不存在,不過這不是什麼大 ...
[Node.js] 介紹與開始
[Node.js] 介紹與開始在開始之前,首先說明學習的資源主要為 The Net Ninja 的 Node.js Crash Course Tutorial 系列,部分內容參考 W3Schools 及其它使用到的框架官方文件等,以快速、直接的瞭解 Node.js 及其基礎應用。
Node.js 簡介以前 JS 只能在有 v8 引擎的瀏覽器上執行時 (JavaScript 為直譯語言),編譯成機器碼。
Node.js 則是用 C++ 編寫,並包裝了 v8 引擎,因此現在不只可以在瀏覽器上,更可以直接在電腦或是伺服器上運行 JS。此外 Node.js 並不僅是 v8 引擎的包裝環境,也添加了額外的功能給 JavaScript,比如:
從電腦上讀取或寫入檔案
連接到數據庫
作為伺服器的內容
以上為作為伺服器後端語言希望能做到的工作
使用 Node.js 的優點
如果使用者是先從前端領域開始學習的,那麼可以使用相同的 JavaScript 作為學習後端的語言,而不需再去學其它的語言(但還是要學習與前端稍不一樣的 Node.js)
Node.js 有大量的第三方軟件包和工具可以使用,幫助網 ...
命名風格
命名風格記錄幾種常見的程式變數、函式命名風格
Camel Case 駝峰式單字的第一個字母以大寫來表示,依第一個單字是否大小寫又可區分為大、小駝峰式
大駝峰式 (upper camel case, or Pascal case)例: FirstName、LastName、PascalCase
小駝峰式 (lower camel case, or dromedary case)例: firstName、lastName、lowerCamelCase
Kebab Case單字與單字間使用連字符號來連接(kebab 意思為烤肉串)
例: first-name、last-name、kebab-case
Snake Case單字與單字間使用下劃線符號來連接
例: first_name、last_name、snake_case
網路的分類與通訊協定
網路的分類與通訊協定Scope 網路區域範圍網路由於節點之間連線的距離不同,使用的線材及連線方式也會有所不同,而依照網路覆蓋的範圍大小,主要可以分為 區域網路(LAN) 以及 廣域網路(WAN)
區域網路 (Local Area Network,簡稱 LAN)傳輸距離較近,大多在辦公室或一棟建築物的範圍內,將該區域內的電腦或其他設備連接起來,形成網路以達彼此訊息傳遞、資源分享的目的。而區域網路最常用的組成方式為乙太網路,由於距離較短可以選用較貴的連線線材。另外 LAN 拿到的 IP 大部分是虛擬 IP,例如 192.168.x.y 與 10.x.y.z 通常為虛擬 ip ,不在實體的網路。可在 cmd 輸入 ipconfig 指令查看 IP,如下 192.168.1.102 即表示虛擬 IP 虛擬 IP 能夠連到外界的網路,但外界的網路無法定位到該 IP
廣域網路 (Wide Area Network,簡稱 WAN)傳輸距離較遠,如城市與城市之間,可跨越了數百或數千公里的距離,可以說是區域網路的延伸,由於距離較遠所以通常使用公共或價格較低廉的通訊設備,例如使用電話線加上數據機,也 ...
架設 Hexo 部落格
架設 Hexo 部落格
什麼是 HexoHexo 是一個能夠讓使用者快速建立部落格網誌的框架,使用 Markdown 標記語言解析文章,如果編寫過專案的 readme.md 或是使用過 HackMD 撰寫過筆記應該會比較熟悉 Markdown,第一次接觸或是不熟悉的可以在網路上搜索,但本文還不會涉及到該部分。
安裝需求在安裝 Hexo 之前,電腦必須安裝 Node.js 以及 Git,關於安裝這兩者的細節這裡就不多贅述,網路上已有很多教學,但要注意官方文件標明 Node.js 版本需不低於8.10,建議使用 10.0 以上版本。
此外使用 Hexo 框架架設部落格,最後會佈署到 GitHub 上,所以如果沒有 Github 帳戶的使用者也要申辦一個。
安裝 Hexo安裝完前面的需求後,接著透過 npm 來安裝 Hexo,輸入以下指令
1npm install -g hexo-cli
筆者是使用 VScode 程式編輯器,沒有安裝的也可以使用電腦本身的 cmd 終端機操作
安裝完 Hexo 後,輸入以下指令建立專案結構
123hexo init folder// 初始、建立一個新的 ...