README README HTML&CSS HTML Fundamentals 區塊元素(block element) vs 行內元素(inline element) Semantic HTML 語意化標籤 CSS Basics CSS Background CSS Fonts

NPM (Node Package Manager)，是 Node.js 預設的 node 套件管理工具，在本機端安裝 Node.js 時也會一併安裝。 套件：我們不需要重新開發就能使用別人已經開發好的程式碼 套件管理工具：當使用到到的套件愈來愈多，並且版本與相容性的管理愈來愈複雜時，就需要一個類似目錄的東西，來讓我們統一管理套件（安裝、升級、刪除） Install 初始化專案： npm init 輸入相關資訊後會新增一個 package.json 檔案，來保存所有關於套件的相關配置檔資訊。安裝第一個套件後會再多出一個 package-lock.json 檔案來保存安裝紀錄。

https://www.postman.com/ Variable set variable name value scope: global / collection change variable collection > variable

Two types of database Relational Database Consists of 2 or more tables with columns and rows The relation between tables and fields is called a schemaforeign key primary key Use SQL to communicate with the server MySQL, PostgreSQL

函式參數 (parameters) vs. 函式引數 (arguments) 先上 MDN 的說明： 參數 parameter：A parameter is a named variable passed into a function. Parameter variables are used to import arguments into functions. 引數 argument：An argument is a value (primitive or object) passed as input to a function. 「函式參數(parameters)」是定義函式時所列出的變數，用來將引數導入至函式中；「函式引數(arguments)」則是實際上輸入至函式或是函式收到的值。 // 定義函式，設定「參數」

Scope 作用域 什麼是作用域 「作用域就是一個變數的生存範圍，一旦出了這個範圍，就無法存取到這個變數」。 當我們把變數 a 宣告在 function 中，function 之外的地方都無法取用這個變數： // 把變數宣告在 function 中 function test1() { var a = "hello" }

在 HTML5 以前的 HTML 著重在功能方面，例如 <div> 標籤是一個用來放其他內容的區塊、 <p> 標籤是一個用來放文字的段落。過去往往會再給予 class 或 id 來進一步說明或區別這類無語意(non-semantic)的標籤，像是： <div class="nav"> 。 HTML5 新增了語意化標籤(Semantic Elements)，讓我們可以使用更合乎語意的標籤(tags)來開發。比方說在 HTML5 之前通通只能用 <div>，但現在可以使用 <header> 標籤來表示頁首、<footer> 標籤來表示頁尾，<nav> 標籤來標示網頁的導航區塊。 非語意化標籤 non-semantic HTML，像是 <div>、<span>、<p>... 語意化標籤 semantic HTML，像是 <header>、<footer>、<section>、<nav>、<h1>~<h6>... 圖片來源：https://www.semrush.com/blog/semantic-html5-guide/ 使用語意化標籤的優點

Block elements vs. Inline elements 區塊元素 block element display: block 盡可能佔滿整個版面（依照父元素的寬度） 可以設定寬、高：應避免寫死高度，實際高度應由裡面元素的高度推擠而來 另起一行呈現 常見的區塊元素標籤： <div>：沒有語意，單純拿來排版的標籤

W3C 協會在制訂 HTML 與 CSS 網頁設計標準時，針對不同的 HTML 標籤都會有預設的 CSS 樣式設定，例如預設的字體大小、margin、padding 等等。 但 W3C 只有提供參考範例，並沒有強制規定不同瀏覽器使用一致的 CSS 樣式。在瀏覽器百家爭鳴的背景下，開發者經常遇到不同瀏覽器（例如 IE、firefox、chrome、Safari...）各自帶有不同的 CSS 預設值，導致他們難以確保網頁在各種瀏覽器上都能呈現一致地樣式，需要花費許多心力針對每個瀏覽器做調整。 知名的 CSS 大師 Eric Meyer 在 2017 年提出了 CSS reset 的概念，目的就是為了解決不同瀏覽器之間的預設樣式差異，以確保網頁在各種瀏覽器上都能呈現一致的外觀。 使用 CSS reset 的好處 確保跨瀏覽器的一致性 簡化 CSS 開發過程

Hoisting 是怎麼發生的？ 變數和函數的宣告會在編譯階段就被放入記憶體，但實際位置和程式碼中完全一樣。 從這段 MDN 對於 hoisting 的說明大概可以了解到，Javascript 在執行程式碼之前會先進行編譯，而在編譯的過程中會將變數宣告以及函式宣告提升 (hoist) 到該 scope 的頂端，但需注意這邊並非實際改動程式碼的位置。 JS 在運作時是分成「編譯」和「執行」兩個步驟。而 hoisting 是發生在編譯的階段。 JS 在編譯的階段會將變數及函式的宣告處理好（hoist 流程下方有補充說明）並加入到 scope 中，在執行的階段去使用它。 為什麼會需要 Hoisting 在執行程式碼前，JavaScript 會把函式宣告放進記憶體裡面。這樣在即使在宣告函示之前就先呼叫它，程式碼仍然可以運作

什麼是 NaN NaN(Not a Number) 顧名思義就是非數字 NaN 的型別是 Number： typeof NaN // Number NaN 不等於任何值，也不等於自己NaN === NaN // false typeof NaN // number NaN === NaN // false :::info 備註：在 IEEE 754 的規範中就有定義如果判斷式遇到 NaN 就要回傳 false

資料型別 Data types 原始資料型別 Primitive Data Type 原始資料型別都有「原始值 (primitive value)」，且原始值是不可被更改的。 Javascript 的七種原始資料型別： Undefined Null Boolean: true / false String

Null, undefined, not defined 差異 null 與 undefined 差異 null 代表「空值」（有被賦予為空的值），轉為數值時為 0；undefined 代表「未定義」的原始值（尚未被賦予值），轉為數值時為 NaN undefined 與 not defined 差異 undefined 是變數被宣告了但沒有賦值，屬於原始型別之一；not defined 是變數沒有被宣告，不屬於原始型別，是執行程式時的錯誤訊息 (runtime error)，需要被修正。 console.log(a) // 會報錯：Uncaught ReferenceError: a is not defined var a

this 是什麼 this 是 JavaScript 的一個關鍵字 this 是 function 執行時，自動生成的一個內部物件 隨著 function 執行場合的不同，this 所指向的值，也會有所不同 this 與 function 在何處被宣告完全無關，而是取決於 function 被呼叫的方式 在大多數的情況下， this 代表的就是呼叫 function 的物件 (owner Object of the function)當 function 是某個 object 的 method，this 指的就是上層物件 this 的指向（綁定規則） 默認綁定 Default Binding 當 function 被呼叫的當下如果沒有值或在 func.call(null) 、func.call(undefined) 這類的情況下，此時 function 裡的 this 會自動綁定至全域物件：

https://www.npmjs.com/package/express One of the most popular libraries to build server with node. :::info Ref. The State of JavaScript Developer Survey ::: Install $ npm install express

Node comes with its own http built-in module using http module const http = require('http'); // grab the 'http' module const server = http.createServer( ()=> { //console.log('headers', request.headers) console.log('method', request.method) console.log('url', request.url)

Node.js https://nodejs.org/en/ allows us to run Javascript outside the browser Node.js is created using the V8 engine to read and run JS outside the browser popular for building servers Install Node.js Install https://nodejs.org/en/download/

型別斷言是 TypScript 的一種機制，允許我們手動指定一個明確的型別，提供 TypeScript 編譯器無法自行推斷的額外型別資訊。 我們可以透過這兩種寫法來指定型別斷言： 語法 尖括號 <>（angle-bracket）語法 語法：<type>value - 在需要斷言的變數前加上 <Type> 即可 const myCanvas = <HTMLCanvasElement>document.getElementById("main_canvas") as 語法

在 JavaScript 中，有兩種常見的定義函式的方式——函式宣告(Function Declaration)和函式表達式(Function Expression)： // 函式宣告式（Function Declaration） function add(x, y) { return x + y; } // 函式表達式（Function Expression） const add = function (x, y) { return x + y;

Data Types 原始資料型別 Javascript 資料型別(Data types)分為「原始資料型別(Prmitive types)」和「物件型別(Object types)」兩種。 原始資料型別包含這六種：boolean（布林值）、number（數字）、string（字串）、null（無值）、undefined（未定義值）與 symbol （標識符，ES6 才出現）。 Boolean 布林值 TypeScript 中使用 boolean 來標示布林值： let isDone: boolean = false;