87 篇文章含有標籤「前端工程」

檢視所有標籤

常見軟體工程師/Web 開發技術面試及學習資源整理

2023年3月22日 · 閱讀時間約 2 分鐘

kdchang

以下彙整常見軟體工程師技術面試及學習資源整理：

程式解題網站

線上程式學習網站

常見程式題目

技術面試題目

系統設計

參考文件

【Day 13】什麼是工程師的技術面試？為什麼技術面試看的不只是技術？

CSS transition 入門教學筆記 | 學習筆記

2022年12月14日 · 閱讀時間約 3 分鐘

kdchang

前言

CSS transition 屬性允許元素在狀態變化時產生平滑的動畫效果，使 UI 更加流暢和自然。這項技術通常應用於按鈕、圖片、卡片等 UI 元素的互動效果，如懸停、點擊或狀態變更。

1. `transition` 基礎概念

CSS transition 屬性用於定義當元素的某些 CSS 屬性發生變化時，該變化應如何逐漸呈現，而非立即改變。基本語法如下：

transition: property duration timing-function delay;

property：指定要應用過渡效果的 CSS 屬性。
duration：設定過渡動畫的時間（如 0.5s、200ms）。
timing-function：定義動畫的速度曲線（如 ease、linear）。
delay：動畫開始前的延遲時間（可選，默認為 0s）。

2. `transition` 常見應用

2.1 過渡單一屬性

.button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: darkblue;
}

當滑鼠懸停在 .button 上時，背景顏色將在 0.3s 內從 blue 變為 darkblue。

2.2 過渡多個屬性

.card {
    width: 200px;
    height: 300px;
    background-color: lightgray;
    transform: scale(1);
    transition: background-color 0.3s ease, transform 0.5s ease-in-out;
}

.card:hover {
    background-color: gray;
    transform: scale(1.1);
}

當滑鼠懸停時，.card 的背景顏色會變深，並且整個卡片會放大 1.1 倍。

3. `transition` 進階應用

3.1 `transition-timing-function`（動畫速度曲線）

timing-function 用於定義動畫的速度變化方式，常見的值如下：

linear：等速變化。
ease（預設值）：開始與結束較慢，中間較快。
ease-in：開始較慢，之後加速。
ease-out：開始較快，最後減速。
ease-in-out：開始和結束都較慢。

範例：

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: transform 1s ease-in-out;
}

.box:hover {
    transform: translateX(200px);
}

當滑鼠懸停時，.box 會平滑地向右移動 200px，並且動畫在開始和結束時較慢。

3.2 `transition-delay`（延遲時間）

可以設定 transition-delay 來延遲動畫的開始時間。

.box {
    width: 100px;
    height: 100px;
    background-color: green;
    transition: background-color 0.5s ease-in 1s;
}

.box:hover {
    background-color: darkgreen;
}

當滑鼠懸停時，background-color 會延遲 1s 後才開始變化。

4. `transition` 實際應用範例

4.1 按鈕的點擊效果

.button {
    padding: 12px 24px;
    background-color: #ff5733;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease-out;
}

.button:active {
    transform: scale(0.95);
}

當按下 .button 時，按鈕會稍微縮小，產生按壓感。

4.2 漸變顯示效果

.fade-box {
    width: 100px;
    height: 100px;
    background-color: blue;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.fade-box.show {
    opacity: 1;
}

當 .show 類別被添加時，.fade-box 會在 1s 內逐漸顯示。

4.3 圖片放大效果

.image-container img {
    width: 100px;
    transition: width 0.3s ease-in-out;
}

.image-container:hover img {
    width: 150px;
}

當滑鼠懸停時，圖片會平滑地放大。

5. `transition` vs `animation`

雖然 transition 和 animation 都能用來製作動畫，但它們的用途不同：

transition：適合用於元素的狀態變更（如 hover、focus）。
animation：適用於更複雜的動畫，如連續循環的動畫。

如果需要更高級的動畫，例如無限重複、按時間順序變化的動畫，則應使用 @keyframes 和 animation。

6. 總結

CSS transition 是製作動畫效果最簡單且高效的方法之一。透過 transition，可以讓 UI 更加生動，使使用者體驗更流暢。掌握 transition 的基本語法與進階應用後，可以靈活運用於各種互動效果，如按鈕動畫、圖片過渡、淡入淡出等，讓網頁更加吸引人。

CSS transform 入門教學筆記 | 學習筆記

2021年12月14日 · 閱讀時間約 3 分鐘

kdchang

前言

CSS transform 屬性是一個強大的工具，可以用來對 HTML 元素進行旋轉、縮放、移動及傾斜等變換，而不會影響其他元素的佈局。這使得 transform 非常適合用來建立動畫效果、視覺調整以及 UI 微調。

1. `transform` 基礎概念

transform 屬性可以接受一個或多個變換函數，使元素在不影響文檔流的情況下進行變換。這些變換主要包含：

平移 (translate)
縮放 (scale)
旋轉 (rotate)
傾斜 (skew)
矩陣變換 (matrix)

2. `transform` 常見屬性

2.1 平移 (`translate`)

translate(x, y) 用於移動元素的 X 軸與 Y 軸位置。

.box {
    transform: translate(50px, 100px);
}

此範例將 .box 元素向右移動 50px，向下移動 100px。

單軸平移

translateX(50px)：僅在 X 軸移動 50px。
translateY(100px)：僅在 Y 軸移動 100px。

2.2 縮放 (`scale`)

scale(x, y) 用於縮放元素。

.box {
    transform: scale(1.5, 0.5);
}

此範例將 .box 元素的寬度放大 1.5 倍，高度縮小為原來的一半。

單軸縮放

scaleX(2)：寬度變為 2 倍。
scaleY(0.5)：高度變為 0.5 倍。

2.3 旋轉 (`rotate`)

rotate(angle) 用於旋轉元素。

.box {
    transform: rotate(45deg);
}

此範例將 .box 元素順時針旋轉 45 度。

2.4 傾斜 (`skew`)

skew(x-angle, y-angle) 用於使元素傾斜。

.box {
    transform: skew(30deg, 10deg);
}

此範例將 .box 在 X 軸方向傾斜 30 度，在 Y 軸方向傾斜 10 度。

單軸傾斜

skewX(15deg)：僅在 X 軸傾斜 15 度。
skewY(25deg)：僅在 Y 軸傾斜 25 度。

2.5 矩陣變換 (`matrix`)

matrix(a, b, c, d, e, f) 是一個綜合性變換函數，允許透過 6 個參數來同時應用縮放、旋轉、傾斜與位移。

.box {
    transform: matrix(1, 0.5, 0.5, 1, 50, 100);
}

這樣的矩陣表示：

1：X 軸縮放。
0.5：X 軸傾斜。
0.5：Y 軸傾斜。
1：Y 軸縮放。
50：X 軸位移。
100：Y 軸位移。

3. `transform` 的應用範例

3.1 建立簡單的 hover 效果

利用 transform，可以輕鬆製作滑鼠懸停的動畫效果，例如按鈕放大效果：

.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    text-align: center;
    border-radius: 5px;
    transition: transform 0.3s ease-in-out;
}

.button:hover {
    transform: scale(1.1);
}

3.2 圖片翻轉效果

使用 rotateY(180deg) 來製作翻轉效果，常用於卡片翻轉動畫。

.card {
    width: 200px;
    height: 300px;
    background-color: lightgray;
    transform: rotateY(0deg);
    transition: transform 0.5s;
}

.card:hover {
    transform: rotateY(180deg);
}

3.3 旋轉動畫

結合 @keyframes 和 transform，可以製作無限旋轉動畫。

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: red;
    animation: spin 2s linear infinite;
}

4. `transform-origin` 的應用

transform-origin 屬性用於指定變換的基準點，預設值為 50% 50%（元素中心）。

.box {
    transform-origin: top left;
    transform: rotate(45deg);
}

此範例中，元素將以左上角為旋轉點，而非默認的中心點。

5. `perspective` 與 3D 變換

當使用 3D 變換（如 rotateX、rotateY）時，可使用 perspective 來模擬景深效果。

.container {
    perspective: 500px;
}

.box {
    transform: rotateY(45deg);
}

此範例讓 .box 具有 3D 透視效果，使其看起來更真實。

6. 總結

CSS transform 是一個靈活且強大的屬性，可以用來製作動畫、視覺調整及增強 UI 體驗。透過 translate、scale、rotate、skew 等函數，你可以輕鬆地操控元素的外觀，讓你的網頁更具吸引力。

HTML 入門教學筆記 | 學習筆記

2021年12月14日 · 閱讀時間約 4 分鐘

kdchang

1. 什麼是 HTML？

HTML（HyperText Markup Language，超文本標記語言）是建立網頁的標準語言。它用標籤（tags）來結構化內容，讓瀏覽器能夠解析並顯示網頁。HTML 主要負責網頁的結構，而樣式與行為則交由 CSS 和 JavaScript 負責。

2. HTML 文件基本結構

一個基本的 HTML 文件包含以下部分：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個 HTML 頁面</title>
</head>
<body>
    <h1>歡迎來到我的網站</h1>
    <p>這是一個簡單的 HTML 頁面。</p>
</body>
</html>

<!DOCTYPE html>：宣告 HTML5 文件類型。
<html lang="zh-TW">：定義 HTML 根標籤，lang="zh-TW" 表示使用繁體中文。
<head>：包含頁面的元資訊（meta information），如編碼、標題等。
<meta charset="UTF-8">：設定網頁使用 UTF-8 編碼，確保中文字元正確顯示。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：讓網頁適應不同裝置的螢幕大小。
<title>：設定瀏覽器標籤上的標題。
<body>：放置網頁的主要內容，如標題、段落、圖片等。

3. 常見 HTML 標籤

3.1 標題與段落

HTML 提供六種標題 (<h1> 到 <h6>)，以及 <p> 用來表示段落。

<h1>這是主標題</h1>
<h2>這是次標題</h2>
<h3>這是小標題</h3>
<p>這是一段文字，HTML 會自動換行。</p>

3.2 超連結

使用 <a> 標籤建立超連結：

<a href="https://www.google.com" target="_blank">前往 Google</a>

href 指定連結網址。
target="_blank" 讓連結在新視窗開啟。

3.3 圖片

使用 <img> 來插入圖片：

<img src="image.jpg" alt="示範圖片" width="300">

src 指定圖片來源。
alt 提供替代文字。
width 設定圖片寬度（可用 height 指定高度）。

3.4 清單

有序清單 (<ol>) 和無序清單 (<ul>)：

<h2>購物清單</h2>
<ul>
    <li>蘋果</li>
    <li>香蕉</li>
    <li>橘子</li>
</ul>

<h2>步驟</h2>
<ol>
    <li>打開電腦</li>
    <li>開啟瀏覽器</li>
    <li>輸入網址</li>
</ol>

3.5 表格

使用 <table> 來建立表格，並搭配 <tr>（表格列）、<th>（表頭）、<td>（儲存格）：

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年齡</th>
    </tr>
    <tr>
        <td>小明</td>
        <td>25</td>
    </tr>
    <tr>
        <td>小華</td>
        <td>30</td>
    </tr>
</table>

border="1" 設定表格邊框。

3.6 表單

使用 <form> 來建立表單：

<form action="submit.php" method="post">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" required>
    <br>
    <label for="email">電子郵件：</label>
    <input type="email" id="email" name="email" required>
    <br>
    <input type="submit" value="提交">
</form>

action="submit.php" 指定表單提交到 submit.php。
method="post" 指定使用 POST 方法傳遞數據。
required 讓輸入欄位變成必填。

4. HTML5 新增標籤

HTML5 引入了一些語義化標籤，使網頁更具結構性。

<header>
    <h1>網站標題</h1>
</header>
<nav>
    <ul>
        <li><a href="#">首頁</a></li>
        <li><a href="#">關於我們</a></li>
        <li><a href="#">聯絡我們</a></li>
    </ul>
</nav>
<section>
    <h2>最新消息</h2>
    <p>這是一則最新消息的內容。</p>
</section>
<footer>
    <p>版權所有 &copy; 2025</p>
</footer>

<header>：頁首。
<nav>：導覽區塊。
<section>：內容區塊。
<footer>：頁尾資訊。

5. HTML 與 CSS 結合

雖然 HTML 定義了結構，但我們通常使用 CSS 來美化頁面。內嵌 CSS 可以寫在 <style> 內：

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        text-align: center;
    }
    h1 {
        color: #007bff;
    }
    p {
        font-size: 18px;
    }
</style>

或者外部引入 CSS 檔案：

<link rel="stylesheet" href="styles.css">

6. 總結

這篇教學筆記介紹了 HTML 的基本語法，包括標籤、結構與常見元素。學會這些後，可以進一步學習 CSS 來美化網頁，或是學習 JavaScript 增強互動性。最好的學習方式是透過實際練習與製作小專案來熟悉 HTML 語法。

Vue.js 3 官方入門語法教學筆記 [13] - Slots 插槽 | 學習筆記

2021年2月14日 · 閱讀時間約 1 分鐘

kdchang

除了透過 Props 傳遞資料外，父元件還可以透過插槽將模板片段傳遞給子元件：

<template>
  <ChildComp>
    這是一些插槽內容！
  </ChildComp>
</template>

在子元件中，可以使用 <slot> 元素作為插槽來渲染父元件傳遞的內容：

<template>
  <!-- 子元件的模板 -->
  <slot />
</template>

插槽內的內容會被視為「預設內容」：當父元件沒有傳遞插槽內容時，會顯示這些預設內容：

<template>
  <slot>預設內容</slot>
</template>

目前我們尚未向 <ChildComp> 傳遞任何插槽內容，因此你應該會看到預設內容。現在試著利用父元件的 msg 狀態，為子元件提供一些插槽內容吧！

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const msg = ref('from parent')
</script>

<template>
  <ChildComp>Message: {{ msg }}</ChildComp>
</template>

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const msg = ref('from parent')
</script>

<template>
  <ChildComp>Message: {{ msg }}</ChildComp>
</template>

Vue.js 3 官方入門語法教學筆記 [12] - Emits 事件傳遞 | 學習筆記

2021年2月12日 · 閱讀時間約 1 分鐘

kdchang

除了接收 Props 之外，子元件也可以向父元件觸發事件：

<script setup>
// 宣告要觸發的事件
const emit = defineEmits(['response'])

// 觸發事件並傳遞參數
emit('response', 'hello from child')
</script>

emit() 的第一個參數是事件名稱，任何額外的參數都會傳遞給事件監聽器。

父元件可以使用 v-on 來監聽子元件觸發的事件——如下範例中，處理函式接收來自子元件 emit 的額外參數，並將其賦值給本地狀態：

<template>
  <ChildComp @response="(msg) => childMsg = msg" />
</template>

現在我們在編輯器中試試看吧！

Vue.js 3 官方入門語法教學筆記 [11] - Props 屬性 | 學習筆記

2021年2月11日 · 閱讀時間約 1 分鐘

kdchang

子元件可以透過 Props 接收來自父元件的輸入。首先，子元件需要宣告它所接收的 Props：

<!-- ChildComp.vue -->
<script setup>
const props = defineProps({
  msg: String
})
</script>

注意，defineProps() 是一個編譯時的巨集，不需要額外匯入。一旦宣告後，msg Prop 就可以在子元件的模板中使用，也可以透過 defineProps() 返回的物件在 JavaScript 中存取。

父元件可以像設定屬性一樣，將 Prop 傳遞給子元件。若要傳遞動態值，也可以使用 v-bind 語法：

<template>
  <ChildComp :msg="greeting" />
</template>

我們現在在編輯器中試試看吧！

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const greeting = ref('Hello from parent')
</script>

<template>
  <ChildComp :msg="greeting" />
</template>

<script setup>
const props = defineProps({
  msg: String
})
</script>

<template>
  <h2>{{ msg || 'No props passed yet' }}</h2>
</template>

Vue.js 3 官方入門語法教學筆記 [10] - Components 元件 | 學習筆記

2021年2月10日 · 閱讀時間約 1 分鐘

kdchang

到目前為止，我們只使用了一個單一的元件。實際的 Vue 應用程式通常是由巢狀元件所組成的。

父元件可以在其模板中渲染另一個元件作為子元件。要使用子元件，我們需要先匯入它：

import ChildComp from './ChildComp.vue'

然後，我們可以在模板中使用該元件，如下所示：

<template>
  <ChildComp />
</template>

我們現在試試看將匯入子元件並將其渲染到模板中。

<script setup>
import ChildComp from './ChildComp.vue'
</script>

<template>
  <ChildComp />
</template>

<template>
  <h2>A Child Component!</h2>
</template>

Vue.js 3 官方入門語法教學筆記 [9] - Watchers 觀察者 | 學習筆記

2021年2月9日 · 閱讀時間約 2 分鐘

kdchang

有時我們可能需要以反應性的方式執行「Side-effect 副作用」，例如，當一個數值改變時將其記錄到控制台。我們可以使用觀察者來實現這一點：

import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newCount) => {
  // 是的，console.log() 是一種副作用
  console.log(`新的計數是：${newCount}`)
})

watch() 可以直接監視一個 ref，每當 count 的值改變時，回調函數就會被觸發。watch() 也可以監視其他類型的數據來源——更多細節請參閱指南：觀察者（Watchers）。

比將訊息記錄到控制台更實用的例子，可能是當一個 ID 發生變化時，根據新 ID 獲取數據。我們的代碼目前是在元件掛載時，從一個模擬 API 獲取 todos 數據。此外，還有一個按鈕可以遞增應該被獲取的 todo ID。請嘗試實現一個觀察者，在按下按鈕時根據新 ID 獲取新的 todo 數據。

參考範例：

<script setup>
import { ref, watch } from 'vue'

const todoId = ref(1)
const todoData = ref(null)

async function fetchData() {
  todoData.value = null
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  todoData.value = await res.json()
}

fetchData()

watch(todoId, fetchData)
</script>

<template>
  <p>Todo id: {{ todoId }}</p>
  <button @click="todoId++" :disabled="!todoData">Fetch next todo</button>
  <p v-if="!todoData">Loading...</p>
  <pre v-else>{{ todoData }}</pre>
</template>

Vue.js 3 官方入門語法教學筆記 [8] - Lifecycle and Template Refs 生命週期與模板引用 | 學習筆記

2021年2月8日 · 閱讀時間約 2 分鐘

kdchang

Lifecycle and Template Refs 生命週期與模板引用

到目前為止，Vue.js 透過響應式資料與聲明式渲染，幫助我們處理了所有的 DOM 更新。然而，無可避免地會有需要手動操作 DOM 的情況。

我們可以使用特殊的 ref 屬性來請求模板引用 (template ref)，也就是模板中某個元素的引用：

範例

<template>
  <p ref="pElementRef">hello</p>
</template>

定義引用

為了訪問這個引用，我們需要宣告一個名稱匹配的 ref：

import { ref } from 'vue';

const pElementRef = ref(null);

請注意，這個 ref 在初始化時會是 null，因為當 <script setup> 被執行時，對應的 DOM 元素還不存在。模板引用只有在元件掛載 (mounted) 後才能被訪問。

在掛載後執行程式碼

我們可以使用 onMounted() 函式在掛載後執行程式碼：

import { onMounted } from 'vue';

onMounted(() => {
  // 元件已掛載完成
});

生命週期鉤子

這稱為生命週期鉤子 (lifecycle hook)，它允許我們在元件生命週期的特定時間點註冊回呼函式。其他的生命週期鉤子還包括 onUpdated 和 onUnmounted 等。更多細節請參考官方文件生命週期圖示。

試試看

現在，我們可以嘗試添加一個 onMounted 鉤子，透過 pElementRef.value 訪問 <p> 元素，並對其進行一些直接的 DOM 操作（例如更改 textContent）。

<script setup>
import { ref, onMounted } from 'vue'

const pElementRef = ref(null)

onMounted(() => {
  pElementRef.value.textContent = 'mounted!'
})
</script>

<template>
  <p ref="pElementRef">Hello</p>
</template>

程式解題網站​

線上程式學習網站​

常見程式題目​

技術面試題目​

系統設計​

參考文件​

前言​

1. transition 基礎概念​

2. transition 常見應用​

2.1 過渡單一屬性​

2.2 過渡多個屬性​

3. transition 進階應用​

3.1 transition-timing-function（動畫速度曲線）​

3.2 transition-delay（延遲時間）​

4. transition 實際應用範例​

4.1 按鈕的點擊效果​

4.2 漸變顯示效果​

4.3 圖片放大效果​

5. transition vs animation​

6. 總結​

前言​

1. transform 基礎概念​

2. transform 常見屬性​

2.1 平移 (translate)​

單軸平移​

2.2 縮放 (scale)​

單軸縮放​

2.3 旋轉 (rotate)​

2.4 傾斜 (skew)​

單軸傾斜​

2.5 矩陣變換 (matrix)​

3. transform 的應用範例​

3.1 建立簡單的 hover 效果​

3.2 圖片翻轉效果​

3.3 旋轉動畫​

4. transform-origin 的應用​

5. perspective 與 3D 變換​

6. 總結​

1. 什麼是 HTML？​

2. HTML 文件基本結構​

3. 常見 HTML 標籤​

3.1 標題與段落​

3.2 超連結​

3.3 圖片​

3.4 清單​

3.5 表格​

3.6 表單​

4. HTML5 新增標籤​

5. HTML 與 CSS 結合​

6. 總結​

Lifecycle and Template Refs 生命週期與模板引用​

範例​

定義引用​

在掛載後執行程式碼​

生命週期鉤子​

試試看​

程式解題網站

線上程式學習網站

常見程式題目

技術面試題目

系統設計

參考文件

前言

1. `transition` 基礎概念

2. `transition` 常見應用

2.1 過渡單一屬性

2.2 過渡多個屬性

3. `transition` 進階應用

3.1 `transition-timing-function`（動畫速度曲線）

3.2 `transition-delay`（延遲時間）

4. `transition` 實際應用範例

4.1 按鈕的點擊效果

4.2 漸變顯示效果

4.3 圖片放大效果

5. `transition` vs `animation`

6. 總結

前言

1. `transform` 基礎概念

2. `transform` 常見屬性

2.1 平移 (`translate`)

單軸平移

2.2 縮放 (`scale`)

單軸縮放

2.3 旋轉 (`rotate`)

2.4 傾斜 (`skew`)

單軸傾斜

2.5 矩陣變換 (`matrix`)

3. `transform` 的應用範例

3.1 建立簡單的 hover 效果

3.2 圖片翻轉效果

3.3 旋轉動畫

4. `transform-origin` 的應用

5. `perspective` 與 3D 變換

6. 總結

1. 什麼是 HTML？

2. HTML 文件基本結構

3. 常見 HTML 標籤

3.1 標題與段落

3.2 超連結

3.3 圖片

3.4 清單

3.5 表格

3.6 表單

4. HTML5 新增標籤

5. HTML 與 CSS 結合

6. 總結

Lifecycle and Template Refs 生命週期與模板引用

範例

定義引用

在掛載後執行程式碼

生命週期鉤子

試試看