後端框架與API 開發(二) – 靜態資源 ※ 靜態資源回傳
※ 什麼是靜態資源:
定義:是指事先準備好的資源,這些資源在伺服器上是靜態的、不會隨著每個請求而改變。
資源通常包括:
靜態 HTML 文件。
CSS。
圖像(Image)。
Video。
字體文件:google fonts。
favicon:網頁名稱旁邊的ico
後端框架與API 開發(1-1) ※ 補充說明:
※ npm 常用指令:
◦ npm init–y:快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。
◦ npm info 套件名稱 version:快速查詢指定 npm 套件的最新版本號。
◦ npm install套件名稱:用來安裝
設計模式與程式架構(八) ※ 轉接器模式
定義:
轉接器模式是一種結構型設計模式(有時也被稱為wrapper或裝飾模式),用於將一個類(class)的接口轉換成客戶端所期望的另一個接口。這使得原本因接口不匹配而無法工作的類(class)可以一起工作,讓接口不兼容的類別能夠合作無間。
※ 數字到字符的轉換過程範例
/
設計模式與程式架構(七) ※ 生產者和消費者模式
定義:
生產者和消費者在同一時間內共同存取某一個資料空間。生產者負責生成數據並將其放入共享空間,消費者負責從共享空間中取走數據進行處理。兩者之間互不相干,也不須互相知道對方的存在。
共同存取資料空間:生產者和消費者共享同一個資料空間。這個空間通常是緩衝區或隊列,用於在它
設計模式與程式架構(六) ※ 觀察者模式
定義:
觀察者模式(Observer Pattern)是一種設計模式,涉及兩個主要角色:觀察者(Observers)和被觀察者(Subject)。在這種模式中,一群觀察者訂閱並觀察某個被觀察的對象。當被觀察者的狀態發生改變時,它會通知所有觀察者,讓他們知曉並作出相應的反應。這種模
設計模式與程式架構(五) ※ 工廠模式
定義:
工廠模式是一種實現了「工廠」概念的物件導向設計模式。它提供一個通用的工廠介面,將創建instance(實例)的程式碼交由子類別各自實現,並根據需求去動態地生成相應的物件。這種模式將物件的創建邏輯與使用邏輯分開,使程式碼更容易維護和擴展。
特點:
具有高度標準化和同質性的
設計模式與程式架構(四) ※ 單例模式介紹
※ 定義:單例模式是一種設計模式,確保一個class(類)只有一個實例,並提供一個存取它的全域存取點。無論如何取值,皆只對這個實例取值。
※ 目的:保證一個類別只會產生一個物件,而且提供存取該物件的統一方法。
※ 講解:單例模式確保一個類無論怎麼 new 或 get,都只能拿
設計模式與程式架構(三) ※ 設計模式的五大精神介紹(S.O.L.I.D):
※ 第一大精神 — S:單一職責原則(Single responsibility principle, SRP)
※ 定義:
每個物件,不管是類別或函數,都應該只負責一項功能。
當需求改變時,僅需改相關的區域,而不需要更動其他不相關的部分
※ 設計模式與程式架構(二) ※ TypeScript範例說明:
interface ITest {
test1: string
test2: number
print: (arg: string[]) => boolean
}
class Test implements ITest {
public te
※ 設計模式與程式架構(一) ※ 何謂Typescript?
Typescript是Microsoft開發出來的一種JavaScript的擴展程式語言。
※ 為什麼選擇 TypeScript?
靜態型別:
在執行程式碼之前就能避免許多錯誤。
幫助開發人員更快發現型別使用上的問題。
有效提升開發應用程式的效率。
輕鬆
※ 物件導向程式設計-OPP(七) ※ OPP第三大核心-多型
※ 多型的基本定義:
多型是利用繼承的特性,讓不同的子類別可以實現相同的介面,但在呼叫這些介面的方法時會表現出不同的行為。這使得程式設計更具彈性和擴展性,避免了複雜的條件判斷式,同時促進了代碼的重用。
class Animal {
makeSound() {
※ 物件導向程式設計-OPP(六) ※ OPP第一大核心-封裝
封裝的精神在於將「方法」、「屬性」和「邏輯」包裝在類別裡面,透過類別的實例來實現。這樣外部物件不需要了解內部的實現細節,只需要知道如何使用該類別提供的接口即可。換句話說,封裝是將內部細節隱藏起來,只暴露必要的部分給使用者。
封裝的核心概念是,使用者如果想要接觸資料,只
※ 物件導向程式設計-OPP(五) ※ class類別
什麼是class?
class是創造consturctor function時的語法糖,本質上與使用function創造物件(object)的行為沒有不同。
class的作用:
用來定義、描述要創造的物件(object)具有那些屬性、行為的一個表達式。就像是「車子的設計圖
※ 物件導向程式設計-OPP(四) ※ 模板字串(template literal):
使用「``」作為語法,作為字串拼接。
呈現多行內容。
const multiLineString = `This is a string
that spans multiple
lines.`
console.log(multiLineStr
※ 物件導向程式設計-OPP(三) ※ ES6 變數宣告介紹:
在ES6中,推薦使用let和const取代原有的var來宣告變數。
※ var的特點:
勢力範圍(scope)只有兩種:function、global(全域部分)。
勢力範圍(scope)指的是宣告變數的範圍,能夠被有效的使用的範圍。
可以在宣告變數之前就使用。
※ 物件導向程式設計-OPP(二) ※ Object(物件) & Constructor Function(建構式函式)
Object(物件)是什麼?
物件是一種「可以將資料、程式碼包含在其中」的資料結構。
Object(物件)的兩種創造方式:
匿名物件:直接使用"{}"。沒有特別的名字,直接從Object中繼承過來的一個物件
※ 物件導向程式設計-OPP(一) ※ OPP(Object-oriented programming)簡介
什麼是OPP?
OPP是一種軟體開發的風格方式。
是一種撰寫程式時的思考模式。
OPP的目的:
企圖將電腦世界的資料類比到現實中「物件」的概念。
將函數化的資料處理方式用類比到現實世界的互動關係,來簡化思考的難度。
※ Git基本觀念與命令操作 ※ 需要做版本備份時:
git init:初始化此資料夾,由git 開始追蹤版本控制。
git add:將檔案加入到暫存區。
git commit:把暫存區的內容提交到儲存庫。
git status:查看目前所有檔案的狀態。
git log:查看過去所有commit的記錄。
※ 需要做修
※ 認識命令列指令與應用 ※ 介面是什麼:
介面:人跟電腦互相溝通的管道。
使用者與電腦互相溝通的方式稱為使用者的介面。
※ 使用者的介面類型:
文字使用者介面:CUI。使用純鍵盤來下指令溝通,對象是伺服器(SERVER)。
圖型使用者介面:GUI。使用圖像去做點擊或拖拉的方式。
※ 命令列(Command li
※ 認識DOM(四) ※ 說明事件委派 (Event Delegation) ,背後的運作機制。
網頁元素接收事件的順序,流程有兩種個方向的傳遞:
由下而上的,稱為事件冒泡 (event bubbling)
由上而下的,稱為事件捕獲 (event capturing)
※ 事件冒泡 Event Bubbling
※ 讓程式碼更簡潔的方法 ※ 好用的陣列迭代器:forEach
forEach 的使用時機:
需要從頭到尾把陣列中的每一個元素都印出來 ,就適合使用 forEach 方法。
forEach 的必要參數是一個函式:
forEach() 的功能是把陣列的每個元素都丟進某個函式執行一次,因此必要的參數是一個函式。
語法:
※ 認識DOM(三) ※ 查找 DOM 元素有兩種途徑:
直接選出一個節點 (select):要在樹狀結構裡查找資料,至少要先選出第一個元素。
從一個特定節點,查找到週邊的節點 :選出一個元素後,就可以順著結構找出父元素、子元素 、甚至同一層的兄弟元素,這種行為稱為「遍歷 (traverse)」。
※ 選出特定 D
※ 認識DOM(二) ※ Javascript和HTML的關係
當我們輸入新的網址或按下重新整理時,從解析檔案到畫面顯示出來,瀏覽器會進行以下流程:
解析 HTML / CSS 檔案,建立物件模型:
HTML → DOM (Document Object Model)。
CSS → CSSOM (CSS Obje
※ 認識DOM(一) ※ DOM是什麼?
DOM 全名為 Document Object Model 中文翻譯為 文件物件模型,就是把一份 HTML 文件內的各個標籤,包括文字、圖片等等都定義成物件,而這些物件最終會形成一個樹狀結構。
就 Document Object Model 這個名字來說,其中 documen
※ 認識非同步概念(五) ※ 非同步概念總複習
為什麼要使用 Promise?
在 JavaScript 開發中,處理非同步操作是常見需求,涉及如文件讀寫、數據庫查詢或網路請求等耗時任務。傳統的回調方式可能導致代碼結構混亂,稱為「回調地獄」,難以維護和理解。
Promise 是解決這問題的方法。它是一個物件(objec
※ 認識非同步概念(四) 認識 async/await基本概念:
async 的本質是 promise 的語法糖 ,只要 function 標記為 async,就表示裡頭可以撰寫 await 的同步語法,而 await 顧名思義就是「等待」,它會確保一個 promise 物件都解決 ( resolve ) 或出錯 ( re
※ 認識非同步概念(三) 什麼是 Promise.all?
在有多個 Promise 的時候,使用 Promise.all 可以確保「所有的 Promise 都執行完以後,才進入 then」。
Promise.all 語法結構:
Promise.all 接受的參數是陣列形式。
什麼時候要使用 Promise.all?
※ 認識非同步概念(二) ※ Promise基本介紹
什麼是 Promise?
Promise 是 JavaScript 的一個構造函式,用於創建表示非同步操作的物件實例。使用 new Promise() 時,你會創建一個包含非同步操作的實例,這個實例可以透過其繼承的方法如 then(), catch(), 和 fina
※ 認識非同步概念(一) ※ 同步概念:
單純地「由上而下」執行程式碼,而且一次只執行一件事,也就是「按順序執行,一個動作結束才能切換到下一個」。缺點是你需要「等待」事情執行完畢,才能繼續往下走。
※ 非同步概念:
盡可能讓主要的執行程序不需要停下來等待,若遇到要等待的事情,就發起一個「非同步處理」,讓主程序繼續執行,
認識 JavaScript (十五) ※ 函式進階介紹:
箭頭函式:
箭頭函式相比於一般函式,語法相當簡潔。除了少去 function 關鍵字,如果只有一個參數,箭頭函式可以省略括號;只有一行程式碼,就是直接簡單返回一個變數或簡單的表達式,可以省略大括號和 return。例子如下:
//一般函式計算平方用的寫法
const squ
認識 JavaScript (十四) ※ 函式基礎介紹:
※ JavaScript 特殊的函式特性:
函式可以當成值來傳遞 (可以放進變數或放進物件)
函式可以當成函式的參數
callback - 在特定事件中觸發函式 (非同步特性)
※ 函式的基本寫法:
※ 調用 (invoke) 函式:
"調用" 意指呼叫或執行
認識 JavaScript (十三) ※ switch用法:
switch是 JavaScript 中的一個控制結構,是一種更結構化的方法來替代多個 if...else 語句,特別是當需要根據同一變數的多個值進行不同操作時非常有用。
※ switch語法:
switch 語句首先評估括號內的表達式 (expression)。
認識 JavaScript (十二) ※ 條件判斷語法
決策中需要處理分歧的狀況,就會用到「if」、「else if」、「else」。
※ 語法結構:
條件式使用小括號(),裡面放判斷式。
要執行的程式碼放在大括號{}裡。
條件式只會有 true 或 false 兩種結果。
※ 常用的比較運算子:
> 大於
< 小於
認識 JavaScript (十一) ※ 質數判斷
質數:除了1跟本身,沒有其他的因數。
因數:可以整除的數字。
用到的運算符號:「%」 mod 求餘數。
整除: mod完為0,沒有餘數。
※ 使用for迴圈
let x = 97 // 可以修改成其他數值來測試
//flag標記
let isNotPrime = false
認識 JavaScript (十) ※ 迴圈控制的兩個指令:break(跳脫)、continue(繼續)
break(跳脫):當遇到一個需要強制脫離迴圈的情境,使用break(跳脫)就會直接跳出迴圈。
continue(繼續):用於跳過迴圈目前的迭代,直接開始下一次迭代的執行。
造成無限迴圈的例子:
說明:
當 x 的值
認識 JavaScript (九) ※ 何謂巢狀迴圈(NESTD LOOP):
指的是一個迴圈內包含另一個迴圈的結構。在程式設計中,這種結構常用於需要進行多層次迭代的場合,例如處理多維數組、逐行逐列處理表格資料等。
※ 例子:九九乘法表
說明:
外層迴圈:for (let i = 1; i <= 9; i = i + 1) 這
認識 JavaScript (八) ※ 迴圈(for loop)介紹:
迴圈的用途是重複執行程式碼,只要條件滿足,就會執行特定的動作。
for (let i = 0; i < 10; i = i + 1) {
console.log(i);
}
說明:
for:對於。
let:因為迭代器的數值會一直改變所以要用let
認識 JavaScript (七) ※ 常用Object(物件)型態的方法:
拿到object裡面某個key的value(值):
拿到所有屬性:
※ 存取物件屬性:點記法與括號記法
使用點記法 (dot notation) 或括號記法 (bracket notation) 來存取物件的值,以下兩種寫法的結果是一樣的:
//
認識 JavaScript (六) ※ 常用arry型態的方法:
長度:
length
查詢第N個元素:
[]
查詢元素在第N個:
indexOf( )
判斷是否為array:
isArray()
新增和刪除:
push():新增後面的數值
unshift():新增前面的數值
pop():刪除後面的數值
sh
認識 JavaScript (五) ※ JavaScript 的命名慣例:
變數名稱是兩個單字以上的組合時,JavaScript 傳統上會採用駝峰命名法(camel case)。也就是將第一個單字之外的接下來每一個字首大寫,例如 myBirthday。
區分大小寫:大小寫是有區分的,如 MyBirthday 與 myBirthd
認識 JavaScript (四) ※ 常用number型態的運算方法:
加、減、乘、除
求餘數(mod):%
※ JavaScript 內建的 Math 物件提供了許多number相關的方法和常數。以下是一些常見的內建 Math 功能:
Math.PI:算出圓的面積。
Math.ceil:無條件進位
Math.floor
認識 JavaScript (三) ※ 認識變數:
變數(variable)是在程式裡面把東西存起來的概念。
基於不讓電腦每次都需要重新運算,把需要花時間運算的東西先存起來,之後再直接拿出來使用,所以我們需要變數。
變數儲存的位置在電腦裡的記憶體。變數就像是一個箱子,記憶體就像是一個倉庫。箱子的名稱就是變數名稱,箱子的內容物就是
認識 JavaScript (二) ※ JavaScript的五種運算子:
我們希望操控這些值,來達成我們想要的結果。
運算式由運算元和運算子組成。運算元是指我們要拿去做運算的東西是什麼?例如:5和4。運算子是他要做什麼樣子的運算?例如:"+"。
算術運算子:"+加"、"-減"、"*乘"、"/除"、"%(mod餘數概念)"。
※ 認識 JavaScript (一) ※ JavaScript 來源:
國際標準化組織﹘ECMA推出的通行標準稱為 ECMAScript,目的是讓各家瀏覽器能根據 ECMAScript 標準來實作能在該瀏覽器運行的 JavaScript。簡單說ECMAscript 是語法標準的規格書,它描述了各種語言應該呈現的樣子、規則,以及細節。
※ 後端面試考古題(五) ※ 什麼是資料庫反正規化?優缺點是什麼?
※ 什麼是資料庫反正規化?
資料庫反正規化(Database Denormalization)是一種將資料庫中的資料再次加工,將資料從正規化狀態轉換為非正規化狀態的過程。在反正規化中,我們通常會將數據合併到一個或少量表中,以提高查詢性能或簡化數據模型。
※ 後端面試考古題(四) ※ 什麼是資料庫正規化?為什麼需要正規化?
什麼是資料庫正規化?
資料庫正規化是一種設計關聯式資料庫的方法,目的是建立良好結構的關聯表,主要目的有二:
去除重複性:建立沒有重複的關聯表。因為重複資料不只浪費資料庫的儲存空間,而且會產生資料維護上的問題。
去除不一致的相依性:資料相依是指關聯表
後端技術考古題-開發工具 補充篇 ※ 簡短說明Git 和 Git Flow 是什麼?如何應用?
Git 是什麼?
Git是一個分散式版本控制軟體,能夠紀錄檔案的狀態變化,以及協調多個開發者之間的工作。它允許團隊成員協作編輯和管理項目的代碼庫,並且能夠追蹤文件的歷史變更、恢復到以前的版本、合併不同版本的代碼,以及解決代碼衝突等。
※ 後端面試考古題(三) ※ ORM 是什麼?ORM 的優缺點是什麼?
ORM 是什麼?
ORM 專用於關聯式資料庫 (relational database)一種叫「物件映射 (object mapping)」 的技術,主要是用程式語言裡的「物件」來包裝資料庫的 SQL (structured query langua
※ 後端面試考古題(二) ※ 什麼是 RESTful API?
這種運用 HTTP 來表達語義的路由設計風格稱為 RESTful API,它描述了如何實現 Web API 的架構。所謂的 API 是應用程式介面 (application programming interface),網址也是一種應用程式的「介面」,故稱為
※ 後端面試考古題(一) ※ 什麼是快取 (Cache)[kash]?快取 (Cache) 的機制為何?
什麼是快取 (Cache)?
快取(Cache)是一種將資料存儲在特定位置以便快速檢索的技術。目的是為了彌補 Database 在業務邏輯複雜且數據量龐大時的不足,基本原理是將可重複使用的資料,也就是最常或最近使用的
後端技術考古題-開發工具 下篇(四) ※ Git(四)
空的資料夾無法被加入 Git 進行版本控制,但這個資料夾如果又是很重要的資料夾,你會怎麼處理?
當空的目錄無法被加入 Git 進行版本控制時,有以下的做法可以解決:
在那個空目錄裡隨便放一個檔案就行了。
在這個資料夾中添加一個名為 .gitkeep 的空檔案,讓 Git 能
後端技術考古題-開發工具 下篇(三) ※ Git(三)
什麼是 staging area?
在 Git 中,staging area是暫存區的意思,也被稱為索引(index)。透過一個git add 指令把檔案從工作目錄移至暫存區。再透過一個git commit 指令把暫存區的內容移至儲存庫。
當多人協作時你要開發個功能,但不
後端技術考古題-開發工具 下篇 (二) ※ 關於Git (二)
請寫下從 Github 上複製一個專案下來,做一次遞交,然後推上去會用到的所有 git 指令。
複製專案(Clone) markdown-here:
git clone https://github.com/adam-p/markdown-here.git
如果在訊息
後端技術考古題-開發工具 下篇 關於Git(一)
版本管理系統是什麼?為什麼要用?
版本管理系統(Version Control System,VCS)是一種追蹤和管理項目代碼、文件和資源變更的工具。
工作流程上可防止每個人因使用自己的開發程式搭配不同且不相容的工具所引起的混亂。版本控制會同步處理版本,並確定變更不會與其他人
認識MySQL ※ MySQL是什麼?
MySQL是一種開源(免費)的關聯式資料庫管理系統,所以任何人都可以免費使用,是Web開發中最常用的資料庫之一。MySQL 會將資料儲存在由資料列與資料欄組成的資料表中。使用者可使用結構化查詢語言 (通常稱為 SQL) 來定義、操控、控管及查詢資料。
簡單來說,資料
認識MongoDB ※ 什麼是MongoDB?
MongoDB是一個開源、跨平台的非關聯式資料庫,屬於一種文件導向(Document-oriented database)的資料庫管理系統,也就是 NoSQL 數據庫管理系統(DBMS)。
※ 什麼是非關聯式資料庫(NoSQL)?
非關聯式資料庫(NoSQL)的意思
後端技術考古題-開發工具 中篇 ※ 主題關鍵字
Git flow:
※ 說明:
Git Flow 是一種基於 Git 版本控制系統的擴展,用於協助團隊進行項目的軟體開發和版本管理,就流程來說屬於概括性的流程。
這種工作流程定義了一組明確的分支模型,以協助有效地進行功能開發、修復錯誤和發布版本。
Git Flow
後端框架與API 開發(一) ※ Express 專案步驟筆記清單
Node.js 環境建置核對
新增專案資料夾
設定 package.json
npm init -y
設定程式入口為 app.js
安裝 Express:npm install express
設定主程式 app.js
建構應用程式伺服器
設定
後端技術考古題-開發工具 上篇 ※ 必考題一: Command Line
工程師面試時通常不會著墨太多在此科目上,考題只考涵蓋的基本指令。
※ 說明:Command Line是使用純文字與電腦溝通的方式,和圖形化介面 GUI是不一樣的。
※ 常用基本指令:
pwd=print the current directory:顯
後端技術考古題- Web Operations 下篇 描述我所瞭解的 Web 攻擊技術
何謂網路攻擊?
駭客透過各種系統漏洞或惡意程式,搭配許多技術和工具進行攻擊。目標是要在企業或個人電腦網路中損害、取得控制權或存取重要的文件和系統。
例如:
XSS(Cross-Site Scripting,跨站腳本攻擊/跨網站指令碼):指網路罪犯透過存在安全
後端技術考古題- Web Operations 上篇 ※ 效能
What tools would you use to monitor or analyze your performance ?
中文意思:在監控或分析系統性能方面可能會使用哪些工具?
※ 解答:
常見的監控和分析工具,可分成以下6大類:
系統監控工具: 例如,Promethe
後端技術考古題-資料庫篇(下) ※ 資料庫與 SQL
※ 題目:
請寫出 SQL 讀取 people table 中所有 gender 是 M 而且 age 大於 18 的資料。
※ 解答:
SELECT *
FROM people
WHERE gender = 'M' AND a
後端技術考古題-資料庫篇(上) ※ 基本操作:SQL 語法,SELECT, WHERE, CREATE, UPDATE, DELETE。
SELECT:從資料庫中或資料表中指定要選擇的欄位中取得資料,稱之為查詢 (query)。
※ 語法:要由兩部分構成,第一部分是要 "拿什麼" 資料 (若有多項用逗號隔開);第二部分則為
資料與資料庫 ※什麼是資料 :
說明:
「資料」(information/data) 是網路應用程式的核心。
使用者分享的照片、電商販賣的產品,或是搜索引擎提供的餐廳評價都是資料。
主要特徵:
生活中任何基本的事實 (fact) 或是值 (value) 都可以被稱為資料。例如:你的名字、你的生日。
因
Node.js + MongoDB建立最愛球員清單 建立一個屬於自己喜愛球員的清單。
※ 專案開發環境
架設 Node.js 伺服器。
用 Express.js 進行全端開發。
用 MongoDB 資料庫。
※ 專案開發技術
使用 Express handlebars,為球員清單做出佈局和局部樣板
A28: 畢業部落格-自我成長 緣起
在電子廠做了18年,從助理技術員變成高級技術員。原本只是個操作機台的檢驗員,目前的工作是負責品質管理。18年來也曾動過轉職的念頭,參加國家考試的高考、地方特考,結果就是名落孫山。為了增加自己的專業能力,提高自己的履歷能被看見的機會,也自費去學習專案管理和ISO 9001:2015 品質管理系
老爸的私房錢的專案介紹 為何會選擇記帳程式做專案?
網路上有很多各種記帳方式,用Excel方式來記帳士很多人熟悉的作法。但既然我已經學習了JavaScript這個程式語言,就想試看看如何藉由程式語言寫出一個簡易的記帳程式。
技術選擇方面
選擇Node.js是因為他是一個可以讓JavaScript 執行環境;我可以直接在電腦
認識程式與電腦 1.什麼是電腦:
電腦是透過程式碼的指令,經由「輸入(input)→儲存(storage)/處理(processing)→輸出(output)」的流程,完成人類需要的結果。
2. 什麼是程式?有兩種說法。
第一種說法:就是運行在電腦上的一種指令,這種說法描述了程式的特質與概念,也就是說「運行在電腦上
Java Script自學經驗回顧 來到學期2-3的階段,第一個作業就是打造餐廳清單。原本認為經過電影清單的學習經歷之後,對於打造餐廳清單應該也不會太過困難;沒想到我花了2個月的時間才把作業完整交出去。
在寫餐廳清單的初期,第一個碰到的問題就是首頁無法秀出餐廳評分這個選項。我試著參考其他同學的作品也改了版面的設計,卻始終無法出現餐廳評