# 衝刺班 - HTML、CSS、JavaScript
## HTML/CSS
### 什麼是 DOCTYPE？[若]
:::spoiler answer
* <!DOCTYPE> 聲明位於 HTML 文檔的第一行，<html> 標籤之前。
* <!DOCTYPE> 告訴了瀏覽器應使用哪種 文件格式定義 來解析這個文檔。
* 有了<!DOCTYPE>，瀏覽器就會以標準模式（standard mode）對文檔進行解析，否則會以兼容模式（quirks mode）來解析文檔。
* 在 HTML 5 出現之後，不再需要指定 文件格式定義(DTD)。
**補充：標準模式和兼容模式**
在 HTML5 之前，有許多不同的渲染模式，但是在 HTML5 的時代，就剩下標準模式和兼容模式。
:bookmark:標準模式 (standard mode)：有寫<!DOCTYPE html>的情況下，瀏覽器就知道要用 HTML5 的 標準模式來處理這份文件。
:bookmark:兼容模式 (quirks mode)：兼容模式的存在基本上是為了維持瀏覽器「向後相容」的能力，因為當初有些瀏覽器是在 HTML 與 CSS 的標準被定義出來之前，就已開發上市，因此渲染方式會與後來遵循「標準模式」的瀏覽器有些差異。
**補充：DTD 文件格式定義 （ Document Type Definition ）**
DTD有主要兩個任務:
1.它幫助我們編寫合乎格式的代碼
2.它讓瀏覽器正確地顯示代碼。
因為有不同的標記語言，所以會有不同的DTD。
(可參考下圖 過去宣告doctype的各種寫法)
:::
---
### 設計一個 RWD 網頁，你會注意哪些關鍵的螢幕解析度？[宜]
:::spoiler
- 手機：360 x 640
- 平板：786 x 1024
- 電腦：1366 x 768（HDMI）、1920×1080（HDTV 1080i）
1. 根據上面畫出來的圖來分別在 ***600/900/1200/1800*** 設置斷點，這樣就會符合世上大部份人的裝置。
2. 根據bootstrap中的響應點來設置 ***320/480/768/1024**，*若你的網站是要用 bootstrap來建置。
:::
---
### display:inline 和 display:block 的差異？[月]
:::spoiler **回答**
- 每個 HTML 元素都有一個預設的 display 值，不同的元素屬性會有不同的預設值。
- 若該元素的 display 屬性被標示為 block 就被稱為「區塊元素」，若被標示為 inline 就稱為「行內元素」。
| display: | block | inline | inline-block |
| -------- | -------- | -------- | -------- |
| 預設寬度 | 100% | Fit | Fit |
| 設定寬高 | O | X | O |
| margin| O | X | O |
| padding | O | ! | O |
| Tags | h1~h6、p、ol、li | span、em、strong、img | X
[ ! ] 可以使用 `padding-top` 以及 `padding-bottom`，但其不會推擠周圍的 inline elements，反而會覆蓋其他的 inline elements。
:::
---
### display:none 和 visibility:hidden 的差異？[東]
:::spoiler answer
兩者都是使用 CSS 做 element 的隱藏
- 當使用 `display:none` 時
element 會被隱藏，並且連 element 原本所佔有的整個寬高都會消失
- 當使用 `visibility:hidden` 時
element 會被隱藏，但 element 所佔有的空間仍會存在，只是不可見
<img src="https://i.imgur.com/6wlMUB0.png" width="500px">
:::
---
### box-sizing 的作用？
:::spoiler
* **用途是更改CSS box model(元素視為Box)中計算元素(element)寬度和高度標準的預設值。**
* **元素範圍空間**
* 四層矩形構成
* 由內而外:「content-box(藍色)、padding-box(綠色)、border-box(橙黃)、margin-box(橙色)」
* 
* **目的是解決/模擬不支援CSS box model規範的瀏覽器行為。**
* **box-sizing屬性有兩種主要的值:**
**1.content-box(預設值):**
* 寬度與高度為元素本身
* 寬度與高度不包含邊框（border）、內邊距（padding）、外邊距（margin）
* 尺寸計算公式:
* .box {width: 350px}; 而且 {border: 10px solid black;}
**2.border-box:**
* 包括內容（content），內邊距（padding）和邊框（border）
* 但不包括外邊距（margin）
* Quirks 模式時 Internet Explorer 所使用的盒模型
* 尺寸計算方式:
* .box {width: 350px; border: 10px solid black;}
* **box-sizing屬性程式範例:**
```
/* Keyword values */
box-sizing: content-box;
box-sizing: border-box;
/* Global values */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;
```
## 參考依據:
> https://developer.mozilla.org/zh-TW/docs/Web/CSS/box-sizing
> https://ithelp.ithome.com.tw/articles/10252827
:::
---
### 什麼是 margin collapsing？ [Raiy]
* 對於兩個區塊元素(使用 inline-block 的行內元素不算)，若 margin 的「上下」有重疊到數值，那麼會取最大值，而不會加總，這種情況就是邊界重疊。
* 注意：
1. 設定為float、position：absolute 的元素不會產生邊界重疊
2. 只有 top、bottom 會有這狀況，left、right 不會
* 根據 MDN 提出，有**三種狀況**會發生邊界重疊
:::spoiler 第一種：同一層相鄰元素 → 兩個 p 段落最後只會相隔 10 px
```
<style>
p:nth-child(1){
margin-bottom: 10px;
}
p:nth-child(2){
margin-top: 10px;
}
</style>
<p>下邊界範圍會...</p>
<p>...跟這個元素的上邊界範圍重疊。</p>
```
:::
:::spoiler 第二種：父層與最上面(第一個)子元素、最下面(最後一個)子元素貼在一起，重疊的話也只取最大值
<font color="#dd0000">**注意：若父元素有設定border、padding、內容設定成inline、clear-fix之類的，就會影響collapsing，使其作用不了**</font>
```
<div>
<p id="p1">一個 p </p>
<p id="p2">一個 p </p>
</div>
div,p{
margin-top: 10px;
margin-bottom: 10px;
}
```
:::
:::spoiler 第三種：空元素
當同一個元素上邊界範圍可以直接貼到下邊界範圍(大概是該元素不具高度的意思)，上下的元素也會發生邊界重疊。這種情況會發生在一個元素完全沒有設定邊框 ( border ) 、 內距 ( padding )、高度 ( height ) 、最小高度 ( min-height ) 、最大高度 ( max-height ) 、內容設定為 inline 或是加上 clear-fix 的時候。
```
<p>Some example text.</p>
<div></div> // 這個元素沒有任何高度
<p>Some example text.</p>
div {
margin: 0;
padding: 0;
}
p {
margin: 10px 0;
}
```
:::
### 使用語意標籤的好處是什麼？[若]
:::spoiler Answer
HTML5 新增了語意化標籤(Semantic Elements)，像是 header標籤、main標籤、footer標籤 …等。不同於以往只能用 div標籤來劃分區塊，語意化標籤的出現，使得網頁中每個區塊的設計目的可以更清楚的表現。
**SEO 優化**
因為結構明確的關係，所以搜尋引擎在搜尋網站的同時，可以更精準。同時也因為架構明確，會被搜尋引擎判斷是個架構完整網頁，也會提升網站的排名。
**維護方便**
在找看標籤的同時，大概可以知道哪些部分是標題或是選單，網站管理員的維護工作會更簡單與容易。
:::
---
### `<div>` 和 `<span>` 的差異？ [宜]
:::spoiler
# `<div>`和`<span>`最主要的區別在於
- `<div>`是一個**塊級元素**，它包含的元素會自動換行。
- `<span>`是**行內元素**，在它的前後不會換行。
`<span>`沒有結構上的意義，只是單純的應用樣式，其他元素不適合時，就可以使用`<span>`元素。
`<span>`可以作為`<div>`的子元素，但`<div>`不能是`<span>`的子元素。
:::
---
### 請分享一個瀏覽器相容性的問題解決案例？[月]
:::spoiler Answer
- 寫 CSS3 的時候常常會遇到還沒有被標準化的屬性，就會需要使用到瀏覽器私有屬性的前綴字。有很多外掛可以處理這件事情，使用 Sass 的時候他會自動處理，而 Webpack 可以安裝 PostCSS 、 autoprefixer 與 Normalization 的套件。
- 寫 TIMECELL 的時候，因為有使用到 JSX 和 ES6 的語法，有使用 Webpack 的 @babel/polyfill 套件做相容性的處理。
前綴字補充：
>**`moz`** 代表firefox瀏覽器私有屬性
**`ms`** 代表IE瀏覽器私有屬性
**`webkit`** 代表chrome、safari私有屬性
**`o`** 代表opera私有屬性
:::
---
### 如何優化網頁的載入速度？有哪些可能的做法和考量？[若]
:::spoiler Answer
1. **資源優化** - 靜態圖片資源進行無損壓縮，減少傳輸的資料量。
3. **利用瀏覽器快取** - 在 HTTP Header 中設定暫存資源與使用期限，使用者可從自己的磁碟載入先前下載過的資源，，減少等待載入的時間。
4. **延遲載入** - 在頁面讀取的時候，將相對不重要的資源延後載入，藉以讓使用者能更快看到重要內容。
5. **程式拆分**
* 按照路由切分在特定頁面只載入相關的腳本與樣式檔。
* 常用的第三方套件被放在某個公用的 js 檔案中，這樣瀏覽器就能夠進行快取，即使要看到新版的應用，也不一定要重新下載這個部分。
* CSS-in-JS 的方案讓樣式檔可以跟著元件一起載入。
[更多補充](https://linyencheng.github.io/2021/03/09/experience-sharing-web-page-loading-performance/)
:::
---
### 什麼是 HTML DOM？[巧]
::: spoiler
文件物件模型DOM (Document Object Model)
定義:
* **網頁規則:**
讓各大瀏覽器可按照規則設計瀏覽器，DOM 就是規則的一個定義
* **結構化的物件組成:**
HTML 文件內的各個標籤，包括文字、圖片等等都定義成物件，物件最終會形成一個樹狀結構
* **文件擁有屬性與函式的節點:**
節點也可以附加事件處理程序，一旦觸發事件就會執行處理程序。
**【DOM 節點組成:】**
* **Document:**
Document 就是指這份文件，也就是這份 HTML 檔的開端，所有的一切都會從 Document 開始往下進行。
* **Element:**
文件內的各個標籤，因此像是各種 HTML Tag 都是被歸類在 Element 裡面。
```
<div>、<p>
```
* **Text:**
被各個標籤包起來的文字，Hello World 被 Element 包起來，因此 Hello World 就是此 Element 的 Text
```
<h1>Hello World</h1>
```
* **Attribute:**
各個標籤內的相關屬性
**【DOM 遍歷:】**
1. **父子關係(Parent and Child):**
簡單來說就是上下層節點，上層為 Parent Node ，下層為 Child Node 。
1. **兄弟關係(Siblings):**
同一層節點，彼此間只有 Previous 以及 Next 兩種
:::
---
### 你會用什麼方式做 CSS Normalization？ [Raiy]
:::spoiler Answer
(!) 這題請根據自身習慣做調整~
ANS ：針對專案情況判斷
- 手刻、時程夠、樣式比較繽紛複雜的，我會選擇 Reset，因為彈性最大
- 有用到其他 CSS 框架的，那就照該框架官方建議的模式，像 Bootstrap 就導入 Normalize.css，而Material UI 提供 CssBaseline 以及 ScopedCsseline 的組件 、 Tailwind 提供 Preflight 都是為了解決瀏覽器相容性的問題
- 小專案或者時程較趕的就會考慮 Normalize.css
- 也要視團隊需求而定
:::
---
<br >
## JavaScript
### 什麼是 Pure Function？ [SOL]
:::spoiler answer
### Pure function(純粹函式)
==意指相同的輸入，永遠會得到相同的輸出，而且沒有任何顯著的副作用。==
* 給定相同的輸入(傳入值)，一定會回傳相同輸出值結果(回傳值)
* 不會產生副作用(Side Effects)
* 不依賴任何外部的狀態
```javascript=
const sum = function(value1, value2) {
return value1 + value2
}
```
### impure function
它需要依賴外部的變數值
```javascript=
let count = 1
let increaseAge = function(value) {
return count += value
}
```
### 追求「Pure」的理由：
- 具可快取性（cachable），可建立快取方法加速運算。
- 具有移植性（portable），由於純函式具有一致性，因此函式可輕鬆移到別的程式中。
- 引用具有透明性（referntial transparency），引用資料從何而來一清二楚，
- 函式本身即為文件（self-documenting），不必再另外撰寫一份說明文件，相對容易理解好維護。
- 具可測試性（testable）
:::
---
### 請說明 Unit Test 想解決的問題是什麼，可以分享你寫的 Unit Test 案例嗎？ [SOL]
:::spoiler answer
### 在開發的時候常常遇到一些問題：
* 找 BUG 找不到在哪裡
* 每次修改都要從頭重新(手動)測試(若出先問題要再找問題在哪XD)
* 改好新功能但舊功能就壞掉..
* 越晚發現 BUG，修Bug的時間成本越高，若能越早找到問題點，越能降低成本
* 要到真實環境(瀏覽器)才能測試程式無誤
* 平行開發時，要等待其他人開發完成才能測試（瓶頸...）
### Unit test是什麼？可以幫我們解決什麼？
以程式中最小的邏輯單元為對象(通常是 Function or Class)，撰寫測試程式，來驗證邏輯正確與否，以達到保護系統邏輯不會在持續開發或維護的過程中被破壞，並確保 Code 的品質，這就是 UT 的定位。單元測試是程式開發的一種方法論，所以觀念上適用所有的程式語言。
- 避免修改程式碼後的錯誤：修改程式的過程中可能會發生蝴蝶效應，A 處修改的原始碼卻使看似毫無關聯的 B 處錯誤。
- 不需要每次修改都重新人工測試
- 等等解決以上那些問題
==程式是照你寫的跑而不是照你想的跑，Unit Test 能確保並驗證程式寫的和你想的一樣==
#### JavaScript 單元測試框架：
Integration test,E2E Testing
[使用Jest寫單元測試](https://wcc723.github.io/development/2020/02/02/jest-intro/)
:::
---
Sign in via Facebook
Sign in via X(Twitter)
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Connect another wallet