第一篇面試題目如下:

1. 筆試 - 若講到 css box-model，是否有含 border、font-size、padding？
答案：是的，CSS Box Model 包含了 content、padding、border、margin 这四个部分。

2. 筆試 - 請寫出 var、const、let 的差異
答案：
- `var` 函式作用域，函式外使用var宣告會成為全域變數或全域屬性。
- `let` 區塊作用域，允許重新賦值。
- `const` 區塊作用域，不允許重新賦值。

3. 筆試 - 請描述如果要做出一個 Modal、light 燈箱效果，簡易用文字描述你會如何透過 CSS、JS 整合開發？
答案：
- HTML 建立 Modal 結構，使用 CSS 讓他預設為隐藏並居中。
- CSS 建立一個 active ，使其取消隱藏並顯示。
- 使用 JavaScript 添加事件監聽，觸發時添加 CSS active 到 Modal 中使其顯示，取消預設隱藏。
- 當點擊背景或者 close button ， JavaScript 事件監聽拿掉 active ，使 Modal 隱藏。

4. 上機考 - 請列舉至少三個能夠達成水平與垂直置中的 CSS 作法
答案：
- 使用 Flexbox:

     .container {
       display: flex;
       justify-content: center; /* 水平居中 */
       align-items: center; /* 垂直居中 */
     }

- 使用 Grid:

     .container {
       display: grid;
       place-items: center; /* 同时水平和垂直居中 */
     }

- 使用绝对定位和负边距:

     .centered {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
     }

5. 筆試 - 請描述何謂 AJAX 非同步，以及你習慣如何實踐？
答案：AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，通过 JavaScript 向服务器发送请求并获取数据的技术。在实践中，可以使用以下步骤来实现：
- 使用 fetch API 或者採用 axios
- 定义请求的方法（GET、POST 等）、URL 和需要发送的数据。
- 使用 Promise 的 `.then()` 方法。

---
第二篇面試題目如下:

1. 筆試 - CSS 的 display 除了 block 值以外，具你所知還有哪幾個？
答案：除了 `block` 值之外，CSS 的 `display` 属性还有：
- `inline`：元素以行内元素方式显示，但会保留元素的边界和高度。
- `inline-block`：元素以行内块级元素方式显示，可以设置宽高，且在同一行内。
- `inline-flex`：元素以行内弹性盒子方式显示。
- `inline-table`：元素以行内表格方式显示。

2. 筆試 - 請描述 SVG、PNG、gif 圖片的差異，以及網站圖片使用時機
答案：
- SVG：矢量圖形，基于 XML，可无损放大，适合图标和简单图形。
- PNG：支持透明背景，无损压缩，适用于复杂图像和透明度的背景。
- GIF：支持透明背景和简单动画，但色彩表现较差，適用于小型動畫。

3. 上機考 - 請用 AJAX 撈取此 API，並在網頁上顯示前 10 筆旅館姓名，API為:https://ptx.transportdata.tw/MOTC/v2/Tourism/Hotel?%24top=30&%24format=JSON
答案：以下是使用 JavaScript 和 AJAX 获取API数据并在网页上显示前10家旅馆名称的示例：

const apiUrl = "https://ptx.transportdata.tw/MOTC/v2/Tourism/Hotel?%24top=30&%24format=JSON";
let data=[]
const hotelList=[]
let num = 10
fetch(apiUrl)
    .then((response)=>{
    return response.json()
})
    .then((jsonData)=>{
  data = jsonData
    let str=''
   const content = document.querySelector('.content')
    for(let i= 0; i <=  num ;i++){
        hotelList.push(data[i])
    }
    hotelList.forEach((item)=>{
        str+=`<li>${item.HotelName}</li>`
    })
  content.innerHTML=str
})
    .catch((error)=>{console.error('error fetching data',error)})

4. 筆試 - 請描述 meyerweb css reset 與 Normalize.css 差異在哪裡？
答案：Meyerweb CSS Reset 和 Normalize.css 都是用来重置或规范化浏览器的默认样式的工具，但有以下区别：
- Meyerweb CSS Reset：將全部樣式清除重置。
- Normalize.css：保留部分樣式。

5. 筆試 - 平常您習慣如何解決跨瀏覽器的前端問題？
答案：解决跨浏览器问题的常见方法包括：
- 使用CSS前缀（如 `-webkit-`、`-moz-`）来處理特定的CSS属性。
- 使用CSS框架例如bootstrap5
- 使用CSS Reset 或 Normalize.css 確保一致性。
- 使用JavaScript或框架来处理一些浏览器差异性，如jQuery。
- 進行跨瀏覽器測試，使用不同瀏覽器進行測試，確保可以正常運作。

---
第三篇面試題目如下:

1. 筆試 - 請分享 z-index 的使用時機
答案：`z-index` 用于控制元素的堆叠顺序。合适的使用时机包括：
- 有重疊問題時，透過調整z-index，解決其問題
- 調整z-index，確保Menu或其他組件是位於其他元素之上，

2. 筆試 - 描述 CSS 的 box-sizing: border-box 的用法在哪，你平常會使用嗎？
答案：`box-sizing: border-box` ，將寬高設定於 border 內，寬高包含 border padding content。平常都會是使用他，才能更精準地控制尺寸。

3. 筆試 - 請描述就您所知的 CSS 權重覆蓋觀念
答案：依照CSS 權重去採用權重較高的樣式設定，當一個元素擁有多個樣式時，會根據何者樣式權重較高採用何者。權重順序大致為：!important >行內屬性 > ID選擇器 > 類別選擇器 > 元素選擇器

4. 筆試 - 您會如何管理 CSS 結構，並透過哪些技術與設計模式來優化？
答案：我会使用以下技术和设计模式来管理 CSS 结构和优化：
- 使用預處理器例如SASS，設定變數或者蜂巢結構
- 使用预处理器（如Sass、Less）来提供变量、嵌套和混合功能，提高可维护性。
- 使用CSS框架（如Bootstrap）。
- 制定固定的命名規則並有明瞭的註解。
- 使用命名约定和注释来提高代码可读性，如有意义的类名和清晰的注释。

5. 筆試 - == 和 === 有什麼差異？
答案：皆為運算子。== 會自動進行型別轉換，並比較值是否相等。 === 則除了比較值之外，不會進行型別轉換，還會判斷型別是否也相等。

6. 上機考 - 請用 JS 寫出 99 乘法表，並透过 console 印出 (2x1=2 2x2=4 2x3=6...9x9=81)

for (let i = 2; i <= 9; i++) {
  for (let j = 1; j <= 9; j++) {
    console.log(`${i}x${j}=${i * j}`);
  }
}

7. 筆試 - 請解釋何謂 JS 作用域 (Scope)
答案作用域可以分為兩種主要類型：全域作用域和區域作用域。限制變數在程式中可以被存取的範圍，可分為全域變數和區域變數，確定變數在哪些地方可以被引用和修改。

---
第四篇面試題目如下:

1. 筆試 - 請描述 CSS 的 class 與 ID 有什麼差異？
答案：皆為 CSS的選擇器一種
- `class`：可以重複使用樣式
- `ID`：HTML中只能存在唯一該ID的元素，因此只適用於該單一元素樣式。

2. 筆試 - 您是否有習慣使用的 CSS 格線系統 (grid system)？
答案：是的，使用bootstrap 的格線系統，或CSS Grid 或 FLEXBOX。

3. 筆試 - 請解釋 JS 的 by value vs by reference 特性
答案：JS 中的 "by value" 意味着传递基本数据类型（如字符串、数字）时，会复制其值；"by reference" 意味着传递引用数据类型（如对象、数组）时，会传递指向相同内存地址的引用。

- By Value（按值傳遞）：傳遞原始數據類型，JavaScript 會複製變數的值並將其傳遞給新的變數。這意味著新的變數獨立於原始變數，修改一個變數不會影響另一個變數。
- By Reference（按引用傳遞）：
當傳遞為Object或 Function，JavaScript 會將變數的參考（或記憶體位置）傳遞給新的變數。這表示新的變數實際上指向相同記憶體位置，修改一個變數將影響到所有指向該記憶體空間的變數。

4. 筆試 - 請解釋 JS 的 Hoisting 特性
答案：JS分為創造階段和執行階段，在創造階段的時候，順序會根據其變數和函式的特性而提升更改，Hoisting 是指在創造階段，使其順序提升至最先。

5. 筆試 - 請描述從輸入網址列到渲染畫面，過程經歷了什麼事？
答案：
1. 瀏覽器輸入網址
2. 解析URL向DNS查找域名取得IP地址
3. 通過TCP協議和伺服器建立連結
4. 請求傳遞跟接受資料
5. 解析HTML 建立DOM tree
6. 解析CSS 建立 CSSOM tree
7. 合併為 Render tree
8. 排版並繪製內容，渲染到畫面上。

---

第五篇面試題目如下(1題純上機考)
請透過 codepen 嘗試作 todolist 待辦清單，並請用純 JS 撰寫，不可使用套件與框架，應用需含有以下功能：

*透過 input 表單輸入待辦事項，按送出按鍵後，下方列表會出現新增的待辦事項
*每筆待辦事項可以被刪除
*每筆待辦事項勾選已完成，完成後待辦事項的文字會被劃中線，以表示完成
*當關閉網頁時，重新開啟時，原本儲存的待辦事項仍會保留在介面上，可使用 cookie、localstorage 技術

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TO do List</title>
</head>

<body>
    <div class="input_content_container">
        <h2>輸入欄位</h2>
        <div>
            <input type="text" class="input_content">
            <button type="button" class="btn btn_enter">確認</button>
        </div>
    </div>
    <h2>TODO清單</h2>
    <ul class="todoList_List_container">
        <!--         <li data-id="" class="todoList_List">
            <div class="todoList_List_layout">
                <input type="checkbox" class="input_checkbox">
                <p class="todoList_content">內容</p>
                <button type="button" class="btn btn_delete">刪除</button>
            </div>
        </li> -->
    </ul>
</body>
</html>

CSS

        .input_content {
            font-size: 1rem;
            padding: 0.5rem;
        }

        .todoList_List::marker {
            margin: auto 0;
        }

        .todoList_List_layout {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .input_checkbox {
            width: 1rem;
            aspect-ratio: 1/1;
        }

        .todoList_content {
            font-size: 1.2rem;
        }

        .input_checkbox:checked~.todoList_content {
            text-decoration: line-through;
        }

        .btn {
            color: black;
            font-size: 1rem;
        }

JS

        let todoList = [];
        const input_content = document.querySelector('.input_content');
        const todoList_List_container = document.querySelector('.todoList_List_container');
        const btn_enter = document.querySelector('.btn_enter');


        // 將事項加入清單的陣列
        function getFromLocalStorage() {
            todoList = JSON.parse(localStorage.getItem('todoList'))||[]
        }
        function saveToLocalStorage() {
            localStorage.setItem('todoList', JSON.stringify(todoList));
        }
        // render
        function render() {
            if (todoList === null) {
                return
            }
            let str = ''
            todoList.forEach((item) => {
                str += `
                <li data-id="${item.id}" class="todoList_List">
                    <div class="todoList_List_layout">
                        <input type="checkbox" data-id="${item.id}" data-input="input_checkbox" class="input_checkbox" ${item.active ? 'checked' : ''}>
                        <p class="todoList_content">${item.content}</p>
                        <button type="button" data-id="${item.id}" data-btn="delete" class="btn btn_delete" >刪除</button>
                    </div>
                </li>`
            })
            todoList_List_container.innerHTML = str
            saveToLocalStorage()
        }
        // 刪除
        function dele(id) {
            const index = todoList.findIndex(item => item.id == id);
            todoList.splice(index, 1)
            render()
        }
        // 完成
        function done(id) {
            const index = todoList.findIndex(item => item.id == id)
            todoList[index].active = !todoList[index].active
            saveToLocalStorage()
        }
        // 初始化
        function init() {
            getFromLocalStorage()
            render()
        }
        init()

        btn_enter.addEventListener('click', () => {
            const content = input_content.value.trim();
            if (input_content.value == '') {
                return
            }
            let obj = {
                id: Date.now(),
                content,
                active: false
            }
            todoList.push(obj)
            render()
            input_content.value = ''
        })

        todoList_List_container.addEventListener('click', (e) => {
            //監聽刪除功能
            let btnType = e.target.getAttribute('data-btn')
            let id = e.target.getAttribute('data-id')
            if (btnType === 'delete') {
                dele(id)
            }

            //監聽是否完成功能
            let input_checkbox = e.target.getAttribute('data-input')
            if (input_checkbox === 'input_checkbox') {
                done(id)
            }
        })

<iframe height="300" style="width: 100%;" scrolling="no" title="todolist" src="https://codepen.io/firebro42/embed/BaGEdXe?default-tab=js%2Cresult&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/firebro42/pen/BaGEdXe">
todolist</a> by FiReBrO42 (<a href="https://codepen.io/firebro42">@firebro42</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>