# 衝刺班 - 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的各種寫法) ![](https://i.imgur.com/v05X99W.png) ::: --- ### 設計一個 RWD 網頁，你會注意哪些關鍵的螢幕解析度？[宜] :::spoiler - 手機：360 x 640 - 平板：786 x 1024 - 電腦：1366 x 768（HDMI）、1920×1080（HDTV 1080i） ![](https://i.imgur.com/JaM6uNX.png) 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。 ![](https://i.imgur.com/yL6LoIH.png) ::: --- ### 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(橙色)」 * ![](https://i.imgur.com/L8ykmPt.png) * **目的是解決/模擬不支援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;} ![](https://i.imgur.com/2Hsdujl.png) * **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> ``` ![](https://i.imgur.com/vXTq3cH.png) ::: :::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; } ``` ![](https://i.imgur.com/qxFJ7ZK.png) ::: :::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; } ``` ![](https://i.imgur.com/LNAhw7G.png) ::: ### 使用語意標籤的好處是什麼？[若] :::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) ![](https://i.imgur.com/KLMtguH.png) 定義: * **網頁規則:** 讓各大瀏覽器可按照規則設計瀏覽器，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 單元測試框架： ![](https://i.imgur.com/HvkiaaB.png) Integration test,E2E Testing [使用Jest寫單元測試](https://wcc723.github.io/development/2020/02/02/jest-intro/) ::: ---