Raellen's notes

辦理失業給付的過程與經驗談

Thu, 08 Jan 2026 16:11:00 GMT

很不幸地我被資遣了，由於是非自願離職，可以去勞動力發展署辦理就業保險失業給付。

以下會列出所有過程，當作紀錄

以下所有規則僅適用於中華民國地區

一、辦理離職

離職需要注意幾道程序跟細節：

資遣預告期
謀職假
非自願離職證明書
其他注意事項

1. 資遣預告期

若勞工以在單位服務滿三個月，根據勞基法，資遣勞工是需要提前預告的：

年資3個月~未滿1年：10天前預告。
年資1年~未滿3年：20天前預告。
年資3年以上：30天前預告。

如果雇主沒有依法提前預告，雇主則必須將預告期折算成工資作為補償，另外發給員工「預告工資」；

否則勞工可以向勞方勞務提供地（工會為登記所在地）的地方政府(也就是公司所在地的地方政府)申請勞資爭議調解

2. 謀職假

謀職假就是讓勞工外出謀職的假別

可以利用這個謀職假去其他公司面試

呈上題，被通知被資遣到離職日的期間，每七日可以申請兩日的謀職假

3. 非自願離職證明書

若想申請失業給付，必須要請公司開立有非自願離職證明書

內容必須包含勞工離職原因、公司用印、負責人簽名或印章

屆時必須向勞動力發展署提供非自願離職證明書的正本，所以要注意不要拿到影本

若公司不願提供非自願離職證明書，

可向公司所在地的勞動部主管機關提出申訴或檢舉。

利用勞資調解，透過第三方協助解決紛爭

提起民事訴訟，要求雇主依法補發

4. 其他注意事項

簽署任何文件之前：

離職時公司可能會要求簽署離職單或聲明書，

請一定要看清楚上面寫的條文，只要是涉及「申請離職」等字樣，就絕對不要簽

因為這代表是勞工自己申請離職，而非公司資遣！

還有勞工是有交接工作的義務的，最好是雙方簽署一份交接文件，拍照錄影存證

若已有文件證明交接完畢，後續公司要求任何形式的交接可以不配合

二、辦理失業給付

1. 前往勞動力發展署辦理失業給付認定

前往辦理失業給付認定之前，可以先透過電話預約時段，避免在現場等太久

辦理所需要的必要文件：

非自願離職證明
存摺
身分證
要扶養的父母或小孩的身分證或戶口名簿

2. 失業給付認定流程

申請失業給付需經過14天無法推介就業或安排職訓的期間 (失業認定)

大致上流程如下：

失業認定 (14天)
初次認定
再次認定

失業認定期間若確實找不到工作，就可以申請初次認定

只有認定成功後才會提供給付

失業認定流程

進入勞動力發展署後，會需要先填寫申請書及工作介紹卡，工作部分就是看現場提供的廠商及工作有哪些，自己填寫

在申請流程中，櫃台人員將會詳細將所有須知都講清楚，

在認定流程中最需要注意的是，櫃台人員將會開一張介紹卡(可自行選擇哪家廠商)，必須在14天內自行求職並且填寫完畢，透過掛號或是親自繳納的方式提供給人員，否則就無法進行下一步的認定

←目前我在這個認定的步驟，如果有後續將會繼續更新

3. 失業期間的工作

成功認定後的失業期間是可以找工作的，但是如果超過「基本工資」(撰文期間最新的基本工資為每月 29,500元)，就不得請領失業給付

4. 提早就業獎助津貼

在領取失業補助的期間若提早找到工作，就可以領取「提早就業獎助津貼」

發生被資遣的事情，沒有人願意，所以請各位要爭取自己的權益

參考資料：

1. 資遣通報 Q&A

2. 資遣通報、資遣預告日期如何算？資遣員工合法流程這2點不少

3. 勞資爭議調解

4. 謀職假怎麼算？

5. 離職證明書如何申請？範本下載、用途與補助申請

Astro 加入 Cusdis 作為留言系統

Mon, 13 Oct 2025 21:26:00 GMT

Cusdis 官方有提供語法使你可以嵌入留言板在 Astro blog裡
但是有幾個問題

CSS 很陽春
如何根據 Astro 客製化 Config

1. Astro 客製化的 Config 如何寫

需要注意的是 data-page-id 那三個 page 相關的設定
只要照這下面填，留言就能留到各個不同文章
data-app-id請填官方給你的 id

<div id="cusdis_thread"
  data-host="https://cusdis.com"
  data-app-id="here-is-your-id"
  data-page-id={Astro.url.pathname}
  data-page-url={Astro.url.pathname}
  data-page-title={pageTitle}
></div>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>

2. 改 CSS

在你嵌入 Cusdis 的頁面加入此 CSS

<script>
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.addedNodes.length == 0) return;
const iframe = mutation.addedNodes[0];
if (iframe.tagName !== 'IFRAME') return;

const additionalStyles = `
.dark {
background: black;
}
`;

iframe.srcdoc = iframe.srcdoc.replace('</style>', additionalStyles + '</style>');
});
});
observer.observe(document.getElementById("cusdis_thread"), { childList: true, subtree: true });
</script>

additionalStyles 裡面加入需要的 CSS

但是 iframe 本身的高度跟滾動軸那些也被限制，
所以要回到嵌入留言系統的頁面 (也就是上面那頁的父頁面，通常是[slug].astro)加入以下語法

  #cusdis_thread iframe {
    border-radius: 12px;
    border: 2px solid #b6deef;
    width: 100%;
    min-height: 400px;
    transition: all 0.3s ease;
  }

根據自己需求在此加入需要的樣式即可

參考資料：

Add and customize Cusdis with Hugo

Youtube 影片下載不求人 (yt-dlp)

Wed, 11 Jun 2025 13:11:00 GMT

本文以 Windows 系統為主進行教學

安裝工具

yt-dlp
- 下載對應自己系統的版本，若你使用 Windows，請下載yt-dlp.exe
ffmpeg(yt-dlp 訂製版本)
- 依照電腦版本下載，若為 64 位元，就下載 ffmpeg-master-latest-win64-gpl.zip
- 下載好後解壓縮並放進資料夾，將資料夾命名為 **ffmpeg**

在電腦任一處建立 yt-dlp 資料夾，並將 yt-dlp.exe 及 ffmpeg 資料夾放在 yt-dlp 裡面

設定環境變數

在搜尋列中搜尋「編輯系統環境變數」，點進去
點選右下角環境變數部分
在系統變數下找到 Path，並對Path點兩下
點選新增，加入剛才 yt-dlp的資料夾
再一次點選新增，加入yt-dlp底下的ffmpeg中的bin 資料夾 yt-dlp\ffmpeg\bin
一路按確定，直到按到環境變數視窗也被關掉。一定要按確定，否則不會成功加進去

新增設定

到 Windows 的 Roaming
- 會在 C:\Users\UserName\AppData\Roaming
- 也可以在搜尋欄搜尋%appdata%進入
新建資料夾取名為 yt-dlp，並進入此 yt-dlp 資料夾
在此新建新文件： config.txt

在config.txt 中輸入以下內容

--output '[PATH]\%(title)s.%(ext)s'
--force-ipv4
--concurrent-fragments 8
--part
--continue
--throttled-rate 200K
--retries 10

--output '[PATH]\%(title)s.%(ext)s'是設定下載影片要儲存的位置，

PATH的地方輸入資料夾位置，我的位置在C:\videos，

所以第一行要改為--output 'C:\videos\%(title)s.%(ext)s'

開始使用

用系統管理員角色打開 cmd ，或你習慣的 terminal

在 cmd 中，輸入 yt-dlp youtube-url

youtube-url 網址的部分，就輸入你想下載的 youtube 網址

接著就會開始下載了，下載完後，可以在你先前設定的下載資料夾中找到

參考來源

【密技】yt-dlp — 傳說中的辣個工具 Ver. 2.0 (2024年重新編寫第二版)

Django 架設筆記

Sat, 07 Jun 2025 22:25:00 GMT

新增資料夾 project
進powershell
1. 打指令
```
Set-ExecutionPolicy RemoteSigned
```
2. 按 Y
3. 關掉視窗
開啟 Anaconda powershell prompt
1. 輸入指令
```
	conda init powershell
```
2. 關掉視窗
開啟 Anaconda prompt
1. 安裝 virtualenv
```
pip install virtualenv
```
2. cd到project資料夾
  1. 如果要指到D槽,則輸入
```
D:
```
3. 打指令創建虛擬環境
```
virtualenv backendvenv
```
4. 創好後,進入虛擬環境(前面會寫backendvenv)
```
backendvenv\Scripts\activate
```
安裝 django 專案
1. 在虛擬環境中，安裝django
```
pip install django
```
2. 確認是否成功
```
django-admin --version
```
3. 建立新專案 (myproject的部分改成你的專案名稱)
```
django-admin startproject myproject
cd myproject
```
創建後台
1. 建立資料庫
```
python manage.py migrate
```
2. 創立後臺管理員帳號
```
python manage.py createsuperuser
```
3. 按照它的提示輸入帳號、email、密碼等資訊
4. 啟動專案
```
python manage.py runserver
```
5. 在瀏覽器輸入這個網址，進入前端介面
```
http://127.0.0.1:8000/
```
6. 輸入這個網址，進入後端控制台
```
http://127.0.0.1:8000/admin
```

[筆記] Python Numpy 常見方法

Thu, 05 Jun 2025 21:23:00 GMT

NumPy 常用方法整理（含參數說明）

1. 建立陣列（Array Creation）

| 方法 | 說明 | 參數用途 | |------|------|-----------| | np.array([1, 2, 3]) | 從 list 建立陣列 | list: 欲轉為陣列的 Python list | | np.zeros((2, 3)) | 建立全為 0 的 2x3 陣列 | shape: 陣列形狀，如 (rows, cols) | | np.ones((2, 3)) | 建立全為 1 的 2x3 陣列 | 同上 | | np.full((2, 2), 7) | 建立所有值為 7 的 2x2 陣列 | shape: 陣列形狀，fill_value: 欲填入的數值 | | np.eye(3) | 建立 3x3 單位矩陣 | N: 矩陣大小（N x N） | | np.arange(0, 10, 2) | 建立從 0 到 10 間隔為 2 的序列 | start: 起始值，stop: 結束值（不含），step: 步長 | | np.linspace(0, 1, 5) | 在 0 到 1 間平均產生 5 個數 | start, stop, num: 數量 | | np.random.randint(0, 10, size=5) | 隨機產生整數陣列 | low, high: 範圍（含 low，不含 high），size: 數量 |

2. 陣列屬性與操作

| 方法 | 說明 | 參數用途 | |------|------|-----------| | arr.shape | 查看形狀 | 無參數，回傳 tuple | | arr.ndim | 查看維度數 | 無參數，回傳整數 | | arr.size | 總元素數量 | 無參數，回傳整數 | | arr.dtype | 元素型別 | 無參數，回傳型別 | | arr.reshape((3, 2)) | 改變形狀為 3x2 | shape: 新的形狀，總元素數須一致 | | arr.flatten() | 攤平成一維陣列 | 無參數 | | arr.T | 轉置 | 無參數 |

3. 數學運算

| 方法 | 說明 | 參數用途 | |------|------|-----------| | np.add(a, b) / a + b | 加法 | a, b: 陣列或數字，形狀需可對應 | | np.subtract(a, b) / a - b | 減法 | 同上 | | np.multiply(a, b) / a * b | 乘法 | 同上 | | np.divide(a, b) / a / b | 除法 | 同上 | | np.power(a, b) / a ** b | a 的 b 次方 | 同上 | | np.sqrt(a) | 開根號 | a: 陣列或數值 | | np.exp(a) | e 的 a 次方 | 同上 | | np.log(a) | 自然對數 ln(a) | 同上 |

4. 統計函數

| 方法 | 說明 | 參數用途 | |------|------|-----------| | arr.sum() | 總和 | axis: 指定維度（可選），例如 axis=0 沿列加總 | | arr.mean() | 平均值 | 同上 | | arr.std() | 標準差 | 同上 | | arr.var() | 變異數 | 同上 | | arr.min() | 最小值 | 同上 | | arr.max() | 最大值 | 同上 | | arr.argmin() | 最小值索引 | 同上 | | arr.argmax() | 最大值索引 | 同上 |

5. 邏輯與篩選

| 方法 | 說明 | 參數用途 | |------|------|-----------| | arr > 5 | 元素是否大於 5 | 5: 比較條件，回傳布林陣列 | | arr[arr > 5] | 篩選大於 5 的值 | 條件表達式可組合使用 | | np.where(arr > 5, 1, 0) | 條件為真則回傳 1，否則 0 | condition, x, y: 條件為真則取 x 否則取 y | | np.any(arr > 5) | 是否有任一符合條件 | condition: 條件式 | | np.all(arr > 5) | 是否全部符合條件 | 同上 |

[AI] 10款 Text-to-Code AI 工具

Thu, 29 May 2025 14:50:00 GMT

以下是 10 款熱門的「文字轉程式碼」（Text-to-Code）AI 工具的介紹，包含其主要特點、優點與缺點，幫助您根據需求選擇合適的開發輔助工具：

1. Lovable.dev

特點：AI 驅動的全端應用程式生成平台，支援 Supabase、GitHub 整合，並提供 CI/CD、自動部署與即時協作功能。
優點：
- 無需編碼即可快速建立原型。
- 支援多種後端與部署環境。
- 適合設計師與非工程背景者使用。
缺點：
- 錯誤修復需消耗大量 token，可能導致成本上升。
- 大型專案可能出現錯誤迴圈，需人工介入。

2. Rocket.new

特點：Rocket MV BASIC 是一個 Visual Studio Code 擴充套件，支援 MV BASIC 編輯、編譯與除錯。
優點：
- 整合於 VS Code，提升開發效率。
- 提供格式化與除錯功能。
缺點：
- 主要針對 MV BASIC 語言，適用範圍有限。
- 缺乏現代 Web 開發支援。

3. Altan.ai

特點：無需拖放或編碼，透過與 AI 對話即可建構應用程式，並提供應用市集與 AI 元件分享。
優點：
- 簡單直觀的使用介面。
- 適合非技術背景用戶。
缺點：
- 網站有時載入緩慢，穩定性待提升。
- 聊天機器人回應有時不夠精確。

4. Von.dev

特點：目前缺乏公開資訊，無法評估其功能與效能。
建議：等待更多官方資訊釋出後再進行評估。

5. Tempo.new

特點：AI 驅動的應用程式建構平台，支援從需求文檔生成、設計到部署的全流程。
優點：
- 自動生成產品需求文檔（PRD）。
- 適合快速開發 AI 應用程式。
缺點：
- 對於複雜應用可能需進一步手動調整。
- 尚處於發展初期，功能尚未完善。

6. Trae.ai

特點：輕量級 AI 編輯器，支援即時程式碼預覽、圖像轉程式碼、Claude AI 整合等功能。
優點：
- 完全免費，適合快速專案啟動。
- 支援圖像轉程式碼，創新功能。
缺點：
- 功能尚不穩定，仍在發展中。
- 生態系統支援較少。

7. Bolt.new

特點：基於 StackBlitz 的 WebContainers 技術，透過自然語言提示生成全端應用程式。
優點：
- 快速生成應用程式原型。
- 無需本地安裝，瀏覽器即用。
缺點：
- 對於複雜應用需手動調整與除錯。
- 資源載入有時不穩定。

8. Create.xyz

特點：AI 驅動的應用程式建構平台，支援從設計到部署的全流程。
優點：
- 快速生成功能性應用程式。
- 適合創作者與非技術用戶。
缺點：
- 知名度較低，社群支援有限。
- 進階功能與控制權有限。

9. Reflex.dev

特點：純 Python 全端框架：Reflex 是一個開源的全端 Python 框架，允許開發者使用純 Python 語言構建前端和後端，無需編寫 JavaScript。
建議：前端控制有限：對於需要高度自訂前端的應用，可能需要額外的調整。

10. Co.dev

特點：代碼擁有權：用戶擁有生成代碼的完全控制權，方便後續自訂和擴展。
建議：功能限制：目前僅支援 Web 應用，不支援移動應用或瀏覽器擴展。

總結建議：

初學者與非技術背景者：建議使用 Altan.ai、Create.xyz 或 Bolt.new，這些工具提供直觀的介面與快速的應用程式生成能力。
需要快速原型開發：Lovable.dev 與 Tempo.new 提供從設計到部署的全流程支援，適合快速迭代。
開發者與進階用戶：Trae.ai 提供即時預覽與圖像轉程式碼功能，適合需要更高控制權的用戶。

RD 與其他角色對任務執行的不同見解

Tue, 26 Nov 2024 11:24:42 GMT

我發現 RD 與其他角色對任務執行的見解有相當程度的不同：

今天得到一隻minor 任務：

我與開任務的 RD 確認需要做什麼功能、我回報我這邊狀況、對方表示我將狀況貼到 ticket 上即可，等待上級下一步指示。

我以為事情到這邊結束了。

有一個測試工程師碰巧看到這個任務，詢問我說為何還需要等上即確認，不是直接修改就好嗎？

結果變成我與任務回報者與這位測試工程師，三人一起討論為什麼不要直接修改：

測試表示這功能修改不是很簡單？直接修改就好，為什麼需要再與上級確認？這樣不是又多一層工？

任務回報者說：「但你不知道這個節點是否一樣，改下去是否有更多effort，所以才需要等待上級確認，確定要做我們才可以花時間下去改。」

RD 身為任務執行的第一線人員，對程式碼的理解通常較深刻，所以考慮的大多不是效率，而是任務執行後會否對整個系統造成影響。

Java學習：第1週-Java基礎知識

Tue, 13 Aug 2024 10:23:29 GMT

一、數據類型和變量宣告（閱讀和實踐）

1. 基本數據類型（Primitive Data Types）

Java中有八種類型的基本數據類型：

整數型:
- byte（8位）：範圍是 -128 到 127
- short（16位）：範圍是 -32,768 到 32,767
- int（32位）：範圍是 -2^31 到 2^31-1
- long（64位）：範圍是 -2^63 到 2^63-1，需在數字後加 "L"
浮點數型:
- float（32位）：單精度浮點數，需在數字後加 "F"
- double（64位）：雙精度浮點數，默認的浮點數類型
字符型:
- char（16位）：單個字符，例如 'a', 'A', '1', '漢'
布爾型:
- boolean：僅有兩個值：true 或 false

2. 變量宣告（Variable Declaration）

在Java中，變量需要先宣告後才能使用。宣告變量的語法如下：

type variableName = initialValue;

type：變量的數據類型（如 int, double, char 等）
variableName：變量名稱，需遵循命名規則
initialValue（可選）：變量的初始值

例子

int age = 25;           // 整數型變量
double salary = 55000.50; // 浮點數型變量
char grade = 'A';        // 字符型變量
boolean isJavaFun = true; // 布爾型變量

3. 變量的作用域（Scope of Variables）

變量的作用域是指變量在程序中可訪問的範圍。Java中的變量主要有三種作用域：

局部變量（Local Variables）：在方法內部宣告，僅在方法內部可見。
實例變量（Instance Variables）：在類中但在方法外宣告，對象實例使用這些變量。
類變量（Class Variables，也稱靜態變量 Static Variables）：用 static 關鍵字宣告，在整個類中共享。

4. 常量（Constants）

如果某個變量的值在程序執行期間不會改變，可以使用 final 關鍵字將其聲明為常量。

final int MAX_AGE = 100;

5. 實踐練習

你可以通過以下簡單的練習來鞏固所學知識：

練習 1: 宣告並初始化各種類型的變量

public class DataTypePractice {
    public static void main(String[] args) {
        // 整數型
        byte b = 10;
        short s = 100;
        int i = 1000;
        long l = 10000L;

        // 浮點數型
        float f = 10.5F;
        double d = 20.5;

        // 字符型
        char c = 'A';

        // 布爾型
        boolean isJavaFun = true;

        // 常量
        final int MAX_VALUE = 100;

        // 輸出變量值
        System.out.println("byte: " + b);
        System.out.println("short: " + s);
        System.out.println("int: " + i);
        System.out.println("long: " + l);
        System.out.println("float: " + f);
        System.out.println("double: " + d);
        System.out.println("char: " + c);
        System.out.println("boolean: " + isJavaFun);
        System.out.println("final int: " + MAX_VALUE);
    }
}

練習 2: 嘗試更改常量的值並觀察錯誤

final int MAX_VALUE = 100;
MAX_VALUE = 200; // 這行代碼會產生編譯錯誤

這些練習可以幫助你掌握Java中數據類型和變量宣告的基本概念。如果你在練習過程中遇到任何問題，隨時可以告訴我！

—

複習運算符和表達式時，我們將探討Java中的各種運算符類型以及它們的使用方法，然後通過練習來加深理解。

二、運算符和表達式

1. 運算符概述

Java中的運算符可以分為幾個主要類型：

算術運算符（Arithmetic Operators）
關係運算符（Relational Operators）
邏輯運算符（Logical Operators）
位元運算符（Bitwise Operators）
賦值運算符（Assignment Operators）
增量與減量運算符（Increment/Decrement Operators）
條件運算符（三元運算符 Ternary Operator）

2. 各類運算符的詳細介紹

2.1 算術運算符（Arithmetic Operators）

加法（+）：a + b
減法（-）：a - b
乘法（*）：a * b
除法（/）：a / b
取餘（%）：a % b

2.2 關係運算符（Relational Operators）

等於（==）：a == b
不等於（!=）：a != b
大於（>）：a > b
小於（<）：a < b
大於等於（>=）：a >= b
小於等於（<=）：a <= b

2.3 邏輯運算符（Logical Operators）

邏輯與（&&）：a && b
邏輯或（||）：a || b
邏輯非（!）：!a

2.4 位元運算符（Bitwise Operators）

按位與（&）：a & b
按位或（|）：a | b
按位非（~）：~a
按位異或（^）：a ^ b
左移（<<）：a << n
右移（>>）：a >> n
無符號右移（>>>）：a >>> n

2.5 賦值運算符（Assignment Operators）

賦值（=）：a = b
加等於（+=）：a += b （相當於 a = a + b）
減等於（-=）：a -= b （相當於 a = a - b）
乘等於（*=）：a *= b （相當於 a = a * b）
除等於（/=）：a /= b （相當於 a = a / b）
取餘等於（%=）：a %= b （相當於 a = a % b）

2.6 增量與減量運算符（Increment/Decrement Operators）

前增量（++a）：先增加後使用
後增量（a++）：先使用後增加
前減量（--a）：先減少後使用
後減量（a--）：先使用後減少

2.7 條件運算符（三元運算符 Ternary Operator）

條件運算符：condition ? expression1 : expression2
- 如果條件為 true，返回 expression1 的值；否則返回 expression2 的值。

3. 實踐練習

以下是一些簡單的練習，可以幫助你更好地理解這些運算符的應用。

練習 1: 算術運算符

public class ArithmeticOperators {
    public static void main(String[] args) {
        int a = 10, b = 5;
        System.out.println("a + b = " + (a + b)); // 15
        System.out.println("a - b = " + (a - b)); // 5
        System.out.println("a * b = " + (a * b)); // 50
        System.out.println("a / b = " + (a / b)); // 2
        System.out.println("a % b = " + (a % b)); // 0
    }
}

練習 2: 關係和邏輯運算符

public class RelationalLogicalOperators {
    public static void main(String[] args) {
        int a = 10, b = 5;
        System.out.println("a > b = " + (a > b));  // true
        System.out.println("a < b = " + (a < b));  // false
        System.out.println("a == b = " + (a == b)); // false
        System.out.println("a != b = " + (a != b)); // true

        boolean result = (a > b) && (b > 0); // true
        System.out.println("(a > b) && (b > 0) = " + result);
    }
}

練習 3: 賦值運算符和增量/減量運算符

public class AssignmentIncrementOperators {
    public static void main(String[] args) {
        int a = 10;
        a += 5; // 相當於 a = a + 5
        System.out.println("a += 5 = " + a); // 15

        int b = 10;
        System.out.println("b++ = " + (b++)); // 10 (使用後增加)
        System.out.println("++b = " + (++b)); // 12 (增加後使用)
    }
}

練習 4: 三元運算符

public class TernaryOperator {
    public static void main(String[] args) {
        int a = 10, b = 5;
        String result = (a > b) ? "a is greater" : "b is greater";
        System.out.println(result); // "a is greater"
    }
}

三、控制結構（if, switch）

在Java中，控制結構（Control Structures）用於控制程式的執行流程，其中 if 和 switch 是兩種最常見的選擇結構（Selection Structures）。它們允許程式根據條件的結果來決定執行哪一段代碼。

1. `if` 控制結構

if 控制結構根據一個或多個條件表達式的結果來決定是否執行某段代碼。這些條件通常是布爾表達式，即它們的結果為 true 或 false。

1.1 基本語法

if (condition) {
    // 當condition為true時執行的代碼
}

1.2 `if-else` 語法

如果條件為 false，則可以使用 else 來執行另一段代碼。

if (condition) {
    // 當condition為true時執行的代碼
} else {
    // 當condition為false時執行的代碼
}

1.3 `if-else if-else` 語法

當有多個條件需要檢查時，可以使用 else if 來鏈接多個條件。

if (condition1) {
    // 當condition1為true時執行的代碼
} else if (condition2) {
    // 當condition1為false且condition2為true時執行的代碼
} else {
    // 當所有條件都為false時執行的代碼
}

1.4 範例

public class IfElseExample {
    public static void main(String[] args) {
        int num = 10;

        if (num > 0) {
            System.out.println("The number is positive.");
        } else if (num < 0) {
            System.out.println("The number is negative.");
        } else {
            System.out.println("The number is zero.");
        }
    }
}

解釋: 在這個例子中，如果 num 大於 0，則打印 "The number is positive."，如果小於 0，則打印 "The number is negative."，如果等於 0，則打印 "The number is zero."

2. `switch` 控制結構

switch 控制結構用於根據變量的值來選擇多個代碼塊中的一個來執行。這在處理多個選擇時比使用大量的 if-else 更加清晰和高效。

2.1 基本語法

switch (expression) {
    case value1:
        // 當expression等於value1時執行的代碼
        break;
    case value2:
        // 當expression等於value2時執行的代碼
        break;
    // 你可以添加更多的case
    default:
        // 當expression不等於任何case值時執行的代碼
        break;
}

**break**: break 用來退出 switch 結構。如果省略 break，程式將繼續執行下一個 case，這稱為「穿透」。
**default**: default 是可選的，當 expression 不匹配任何 case 時執行 default 代碼塊。

2.2 範例

public class SwitchExample {
    public static void main(String[] args) {
        int day = 3;
        String dayName;

        switch (day) {
            case 1:
                dayName = "Sunday";
                break;
            case 2:
                dayName = "Monday";
                break;
            case 3:
                dayName = "Tuesday";
                break;
            case 4:
                dayName = "Wednesday";
                break;
            case 5:
                dayName = "Thursday";
                break;
            case 6:
                dayName = "Friday";
                break;
            case 7:
                dayName = "Saturday";
                break;
            default:
                dayName = "Invalid day";
                break;
        }

        System.out.println("Day " + day + " is " + dayName);
    }
}

解釋: 在這個例子中，變量 day 的值是 3，程式會匹配 case 3，然後將 dayName 設為 "Tuesday" 並打印出來。

3. `if` 和 `switch` 的區別

用途: if 用於處理布爾條件，適合複雜的條件判斷；switch 適合處理具體值的選擇，如枚舉類型、整數類型等。
可讀性: 當處理多個選擇時，switch 結構通常比一連串的 if-else 更加清晰。
效率: 在某些情況下，switch 可能比多個 if-else 更高效，特別是當 case 很多時。

4. 實踐練習

練習 1: 使用 `if-else` 控制結構

public class IfElsePractice {
    public static void main(String[] args) {
        int score = 85;

        if (score >= 90) {
            System.out.println("Grade: A");
        } else if (score >= 80) {
            System.out.println("Grade: B");
        } else if (score >= 70) {
            System.out.println("Grade: C");
        } else if (score >= 60) {
            System.out.println("Grade: D");
        } else {
            System.out.println("Grade: F");
        }
    }
}

練習 2: 使用 `switch` 控制結構

public class SwitchPractice {
    public static void main(String[] args) {
        char grade = 'B';

        switch (grade) {
            case 'A':
                System.out.println("Excellent!");
                break;
            case 'B':
            case 'C':
                System.out.println("Well done");
                break;
            case 'D':
                System.out.println("You passed");
                break;
            case 'F':
                System.out.println("Better try again");
                break;
            default:
                System.out.println("Invalid grade");
                break;
        }
    }
}

為何在 switch 中使用 break 而不是 return

在 switch 中使用 break 而不是 return

是因為 break 用來退出 switch 結構並繼續執行 switch 之後的代碼。

而 return 則會直接退出當前方法，不會執行 switch 之後的代碼。因此，break 適用於需要在 switch 結構後繼續執行其他代碼的情況，而 return 則適用於需要立即退出方法的情況。

四、控制結構（for, while, do-while）

控制結構中的迴圈結構（Loop Structures）允許我們重複執行某段代碼。Java中的主要迴圈結構包括 for、while 和 do-while。

1. `for` 迴圈

for 迴圈通常用於在已知確切迭代次數的情況下使用。它是一個集成的迴圈結構，將初始化、條件檢查和增量操作集中在一個語句中。

1.1 基本語法

for (initialization; condition; update) {
    // 迴圈中要重複執行的代碼
}

initialization: 迴圈開始前執行的初始化操作，通常是變量的宣告和賦值。
condition: 在每次迭代前檢查的條件，當條件為 true 時，迴圈繼續執行；當條件為 false 時，迴圈終止。
update: 每次迭代後執行的操作，通常用來更新迴圈變量。

1.2 範例

public class ForLoopExample {
    public static void main(String[] args) {
        for (int i = 0; i < 5; i++) {
            System.out.println("Iteration: " + i);
        }
    }
}

解釋: 這個 for 迴圈從 i = 0 開始，當 i < 5 時迴圈繼續，每次迭代後 i 增加1。這將打印 0 到 4 的值。

2. `while` 迴圈

while 迴圈在每次迭代前檢查條件，並在條件為 true 時繼續執行迴圈體內的代碼。

2.1 基本語法

while (condition) {
    // 迴圈中要重複執行的代碼
}

condition: 這是布爾表達式，當條件為 true 時，迴圈繼續執行；當條件為 false 時，迴圈終止。

2.2 範例

public class WhileLoopExample {
    public static void main(String[] args) {
        int i = 0;
        while (i < 5) {
            System.out.println("Iteration: " + i);
            i++;
        }
    }
}

解釋: 這個 while 迴圈從 i = 0 開始，當 i < 5 時迴圈繼續，每次迭代後 i 增加1。這將打印 0 到 4 的值。

3. `do-while` 迴圈

do-while 迴圈與 while 迴圈類似，但不同的是，它保證至少執行一次迴圈體，因為條件是在每次迭代後檢查的。

3.1 基本語法

do {
    // 迴圈中要重複執行的代碼
} while (condition);

condition: 這是布爾表達式，當條件為 true 時，迴圈繼續執行；當條件為 false 時，迴圈終止。

3.2 範例

public class DoWhileLoopExample {
    public static void main(String[] args) {
        int i = 0;
        do {
            System.out.println("Iteration: " + i);
            i++;
        } while (i < 5);
    }
}

解釋: 這個 do-while 迴圈與 while 迴圈類似，但即使在初始條件不成立的情況下，也會至少執行一次迴圈體中的代碼。這將打印 0 到 4 的值。
do-while 循環與 while 循環的主要區別在於執行條件的檢查時間點：

簡而言之，do-while 保證循環體至少執行一次，而 while 可能一次也不執行。

4. 迴圈中的控制語句

在迴圈中，我們經常使用一些控制語句來更靈活地控制迴圈的執行：

**break**: 終止迴圈的執行並跳出迴圈。
**continue**: 跳過當前迭代，直接進入下一次迭代。

4.1 範例：`break` 和 `continue`

public class LoopControlExample {
    public static void main(String[] args) {
        for (int i = 0; i < 10; i++) {
            if (i == 5) {
                break;  // 當 i 等於 5 時，終止迴圈
            }
            if (i % 2 == 0) {
                continue;  // 當 i 是偶數時，跳過當前迭代
            }
            System.out.println("Iteration: " + i);
        }
    }
}

解釋: 在這個範例中，當 i 等於 5 時，break 語句將終止迴圈。當 i 是偶數時，continue 語句將跳過當前迭代。

5. 實踐練習

練習 1: 使用 `for` 迴圈

public class ForLoopPractice {
    public static void main(String[] args) {
        // 打印從 1 到 10 的數字
        for (int i = 1; i <= 10; i++) {
            System.out.println(i);
        }
    }
}

練習 2: 使用 `while` 迴圈

public class WhileLoopPractice {
    public static void main(String[] args) {
        int i = 1;
        // 使用 while 迴圈打印從 1 到 10 的數字
        while (i <= 10) {
            System.out.println(i);
            i++;
        }
    }
}

練習 3: 使用 `do-while` 迴圈

public class DoWhileLoopPractice {
    public static void main(String[] args) {
        int i = 1;
        // 使用 do-while 迴圈打印從 1 到 10 的數字
        do {
            System.out.println(i);
            i++;
        } while (i <= 10);
    }
}

五、基礎練習題

在8月12日的基礎練習題中，我們將概括並應用前四天學習的內容，即Java中的數據類型、變量宣告、運算符和表達式，以及控制結構（if, switch, for, while, do-while）。

基礎練習題概述

這些練習題將幫助你鞏固以下幾個方面的知識：

數據類型和變量宣告
運算符和表達式
控制結構（**if**, **switch**, **for**, **while**, **do-while**）

練習題 1: 基本計算器

任務: 創建一個簡單的計算器程式，它可以執行加法、減法、乘法和除法。

import java.util.Scanner;

public class BasicCalculator {
    public static void main(String[] args) {
        Scanner scanner = new Scanner(System.in);

	//Scanner 是 Java 中的一個類，用於從用戶輸入中讀取數據。
	//nextDouble 是 Scanner 類中的一個方法，用於讀取用戶輸入的下一個雙精度浮點數（double）。
        System.out.println("Enter first number:");
        double num1 = scanner.nextDouble();

        System.out.println("Enter second number:");
        double num2 = scanner.nextDouble();

        System.out.println("Enter an operator (+, -, *, /):");
        char operator = scanner.next().charAt(0);

        double result = 0;

        switch (operator) {
            case '+':
                result = num1 + num2;
                break;
            case '-':
                result = num1 - num2;
                break;
            case '*':
                result = num1 * num2;
                break;
            case '/':
                if (num2 != 0) {
                    result = num1 / num2;
                } else {
                    System.out.println("Error: Division by zero");
                    return;
                }
                break;
            default:
                System.out.println("Error: Invalid operator");
                return;
        }

        System.out.println("The result is: " + result);
    }
}

概念應用: 使用了數據類型（double）、運算符（+, , , /）、switch 控制結構。
具體來說：這在需要用戶輸入單個字符時特別有用，例如在本例中，用戶輸入操作符（+, -, *, /）。
- scanner.next() 會讀取用戶輸入的下一個完整字符串。
- charAt(0) 會提取該字符串的第一個字符（索引為0）。

練習題 2: 判斷整數的奇偶性

任務: 輸入一個整數，判斷該整數是奇數還是偶數。

import java.util.Scanner;

public class OddEvenChecker {
    public static void main(String[] args) {
        Scanner scanner = new Scanner(System.in);

        System.out.println("Enter an integer:");
        int number = scanner.nextInt();

        if (number % 2 == 0) {
            System.out.println(number + " is even.");
        } else {
            System.out.println(number + " is odd.");
        }
    }
}

概念應用: 使用了數據類型（int）、運算符（%）、if-else 控制結構。

練習題 3: 計算1到10的總和

任務: 使用 for 迴圈計算並輸出1到10的整數總和。

public class SumOfNumbers {
    public static void main(String[] args) {
        int sum = 0;

        for (int i = 1; i <= 10; i++) {
            sum += i;
        }

        System.out.println("Sum of numbers from 1 to 10 is: " + sum);
    }
}

概念應用: 使用了數據類型（int）、賦值運算符（+=）、for 迴圈。

練習題 4: 反轉整數數組

任務: 使用 while 迴圈反轉一個整數數組的順序。

public class ReverseArray {
    public static void main(String[] args) {
        int[] numbers = {1, 2, 3, 4, 5};
        int left = 0, right = numbers.length - 1;

        while (left < right) {
            // 交換元素
            int temp = numbers[left];
            numbers[left] = numbers[right];
            numbers[right] = temp;

            left++;
            right--;
        }

        // 輸出反轉後的數組
        for (int num : numbers) {
            System.out.print(num + " ");
        }
    }
}

概念應用: 使用了數據類型（int）、while 迴圈、陣列操作。

練習題 5: 計算數字的階乘

任務: 使用 do-while 迴圈計算一個正整數的階乘。

import java.util.Scanner;

public class FactorialCalculator {
    public static void main(String[] args) {
        Scanner scanner = new Scanner(System.in);

        System.out.println("Enter a positive integer:");
        int number = scanner.nextInt();

        int factorial = 1;
        int i = 1;

        do {
            factorial *= i;
            i++;
        } while (i <= number);

        System.out.println("Factorial of " + number + " is: " + factorial);
    }
}

概念應用: 使用了數據類型（int）、運算符（``）、do-while 迴圈。
為了解決這個問題，可以使用long類型來存儲更大的數值，甚至可以使用BigInteger類型來存儲更大的數值而不會溢出。以下是使用BigInteger的範例：這樣就可以正確計算大數的階乘而不會溢出。

練習題 6: 最大公因數（GCD）

任務: 使用 if 和 while 迴圈計算兩個整數的最大公因數。

import java.util.Scanner;

public class GCDCalculator {
    public static void main(String[] args) {
        Scanner scanner = new Scanner(System.in);

        System.out.println("Enter first integer:");
        int num1 = scanner.nextInt();

        System.out.println("Enter second integer:");
        int num2 = scanner.nextInt();

        while (num1 != num2) {
            if (num1 > num2) {
                num1 -= num2;
            } else {
                num2 -= num1;
            }
        }

        System.out.println("GCD is: " + num1);
    }
}

概念應用: 使用了數據類型（int）、if 控制結構、while 迴圈。

這樣做的原因是為了計算兩個數字的最大公因數（GCD）。這是一種基於歐幾里得算法的迭代方法。具體步驟如下：

比較兩個數字大小：如果 num1 大於 num2，則將 num1 減去 num2。
更新變量值：這樣做的目的是將較大的數字減小，直到兩個數字相等。
繼續迭代：如果 num1 不大於 num2，則將 num2 減去 num1。這樣的迭代過程會不斷縮小兩個數字的差距。
結束條件：當 num1 等於 num2 時，兩者的值即為最大公因數。

這種方法的核心在於，每次迭代都將較大的數字減小，直到兩個數字相等。這個相等的數字就是這兩個數字的最大公因數。

Markdown 語法支持

Fri, 26 Jul 2024 08:00:00 GMT

基本語法

Markdown 是一種輕量級且易於使用的語法，用於為您的寫作設計風格。

標題

文章內容較多時，可以用標題分段：

# 標題 1

## 標題 2

## 大標題

### 小標題

標題預覽會打亂文章的結構，所以在此不展示。

粗斜體

_斜體文本_

**粗體文本**

**_粗斜體文本_**

預覽：

斜體文本

粗體文本

粗斜體文本

鏈接

文字鏈接 [鏈接名稱](http://鏈接網址)

預覽：

文字鏈接鏈接名稱

行內代碼

這是一條 `單行代碼`

預覽：

這是一條 行內代碼

代碼塊

```js
// calculate fibonacci
function fibonacci(n) {
  if (n <= 1) return 1
  return fibonacci(n - 1) + fibonacci(n - 2)
}
```

預覽：

// calculate fibonacci
function fibonacci(n) {
  if (n <= 1) return 1
  return fibonacci(n - 1) + fibonacci(n - 2)
}

當前使用 shiki 作為代碼高亮插件，支持的語言請參考 shiki / languages。

行內公式

這是一條行內公式 $e^{i\pi} + 1 = 0$

預覽：

這是一條行內公式 $e^{i\pi} + 1 = 0$

公式塊

$$
\hat{f}(\xi) = \int_{-\infty}^{\infty} f(x) e^{-2\pi i x \xi} \, dx
$$

預覽：

$$ \hat{f}(\xi) = \int_{-\infty}^{\infty} f(x) e^{-2\pi i x \xi} , dx $$

當前使用 KaTeX 作為數學公式插件，支持的語法請參考 KaTeX Supported Functions。

圖片

![CWorld](https://cravatar.cn/avatar/1ffe42aa45a6b1444a786b1f32dfa8aa?s=200)

預覽：

刪除線

~~刪除線~~

預覽：

~~刪除線~~

列表

普通無序列表

- 1
- 2
- 3

預覽：

普通有序列表

1. GPT-4
2. Claude Opus
3. LLaMa

預覽：

GPT-4
Claude Opus
LLaMa

列表里可以繼續嵌套語法

引用

> 槍響，雷鳴，劍起。繁花血景。

預覽：

槍響，雷鳴，劍起。繁花血景。

引用里也可以繼續嵌套語法。

換行

markdown 分段落是需要空一行的。

如果不空行
就會在一段

第一段

第二段

預覽：

如果不空行就會在一段

第一段

第二段

分隔符

如果你有寫分割線的習慣，可以新起一行輸入三個減號--- 或者星號 ***。當前後都有段落時，請空出一行：

---

預覽：

高級技巧

行內 HTML 元素

目前只支持部分段內 HTML 元素效果，包括 <kdb> <b> <i> <em> <sup> <sub> <br> ，如

鍵位顯示

使用 <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd> 重啟電腦

預覽：

使用 Ctrl + Alt + Del 重啟電腦

粗斜體

<b> Markdown 在此處同樣適用，如 _加粗_ </b>

預覽：

Markdown 在此處同樣適用，如加粗

其他 HTML 寫法

折疊塊

<details><summary>點擊展開</summary>它被隱藏了</details>

預覽：

表格

| 表頭1 | 表頭2 |
| ----- | ----- |
| 內容1 | 內容2 |

預覽：

| 表頭1 | 表頭2 | | ----- | ----- | | 內容1 | 內容2 |

注釋

在引用的地方使用 [^注釋] 來添加注釋。

然後在文檔的結尾，添加注釋的內容（會默認於文章結尾渲染之）。

[^注釋]: 這里是注釋的內容

預覽：

在引用的地方使用 ^注釋來添加注釋。

然後在文檔的結尾，添加注釋的內容（會默認於文章結尾渲染之）。

To-Do 列表

- [ ] 未完成的任務
- [x] 已完成的任務

預覽：

[ ] 未完成的任務
[x] 已完成的任務

符號轉義

如果你的描述中需要用到 markdown 的符號，比如 _ # * 等，但又不想它被轉義，這時候可以在這些符號前加反斜杠，如 \_ \# \* 進行避免。

\_不想這里的文本變斜體\_

\*\*不想這里的文本被加粗\*\*

預覽：

_不想這里的文本變斜體_

**不想這里的文本被加粗**

內嵌 Astro 組件

See User Components and Advanced Components for details.

[筆記] 自訂 VS Code Snippets (程式碼片段)

Thu, 16 May 2024 23:07:06 GMT

紀錄下如何自訂好用的Snippets 讓寫程式更快速

選取 Files > Preferences > Configure User Snippets

選擇想寫的 Snippets 所使用的語言，我選 JS

會進入這個編輯畫面

{
 	"Snippet名稱": {
 		"prefix": "觸發Snippet的關鍵字",
 		"body": [
 			"console.log('$1');",
 			"$2"
 		],
 		"description": "Snippet的介紹"
 	}
}

body 是一個陣列，每一行的文字是用引號包起，逗號分開
$1 代表可以自訂的變數

打開一個新.js，並輸入剛剛自訂的 prefix，就會發現它自動帶入剛剛設定的 Snippet 囉

小技巧：可以叫 ChatGPT 幫你把程式碼改成陣列的模式

[筆記] Hugo 部落格採用 Static CMS

Thu, 09 May 2024 11:34:24 GMT

前言

之前我就一直想為部落格新增 CMS (也就是為部落格新增後台管理系統)，

嘗試了不同系統，諸如：OutStatic、Netlify CMS，前者介面太陽春、後者是已死的系統，

直到我查到鰭狀漏斗的「重獲新生的 Netlify CMS」，了解到原來 Netlify CMS後續是有人接手做的，於是我選擇了被分支出來的 Static CMS 作為我部落格新的後台系統

教學

設置上跟 Netlify CMS挺像的，如果你也想將它加入你的網站，請先閱讀這份官方文檔

~~但讀起來實在是覺得講得不夠清楚~~

以下我直接分享我的配置給各位，如果有疑問或想法都可以留言討論

資料結構

在/static/資料夾內新增admin資料夾，並且在admin資料夾內新增config.yml及index.html

static
├── admin
│   ├── config.yml
└── └── index.html

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://unpkg.com/@staticcms/app@^4.0.0/dist/main.css" />
    <title>Content Manager</title>
  </head>
  <body>
    <!-- Include the script that builds the page and powers Static CMS -->
    <script src="https://unpkg.com/@staticcms/app@^4.0.0/dist/static-cms-app.js"></script>
    <script>
      window.CMS.init();
    </script>
    <script>
      if (window.netlifyIdentity) {
        window.netlifyIdentity.on('init', user => {
          if (!user) {
            window.netlifyIdentity.on('login', () => {
              document.location.href = '/admin/';
            });
          }
        });
      }
    </script>
  </body>
</html>

按照以上設置你的 index.html

config.yml

先貼整個設置再一一講解

backend:
  name: git-gateway
  branch: master
publish_mode: editorial_workflow
media_folder: "static/images" # Folder where user uploaded files should go
public_folder: "images"
collections:
  - name: "posts" # Used in routes, e.g., /admin/collections/post
    label: "Posts" # Used in the UI
    folder: "content/posts" # The path to the folder where the documents are stored
    path: "{{slug}}/index"
    media_folder: "/static/images" # Save images in the post's own folder instead of the static folder
    public_folder: "/images"
    create: true # Allow users to create new documents in this collection
    fields: # The fields for each document, usually in front matter
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Subtitle", name: "subtitle", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Featured Image", name: "feature", widget: "image" }
      - { label: "Body", name: "body", widget: "markdown" }
      - { label: "Tags", name: "tags", widget: "list", field: { label: "Tag", name: "tag", widget: "string" } }
  - name: "pages"
    label: "Pages"
    files:
      - file: "content/_index.md"
        label: "Home Page"
        name: "home"
        fields:
          - { label: "Title", name: "title", widget: "string" }
          - { label: "Blurb", name: "blurb", widget: "text" }
          - {
              label: "Section",
              name: "section",
              widget: "object",
              fields:
                [
                  { label: "Heading", name: "heading", widget: string },
                  { label: "Text", name: "text", widget: "text" },
                ],
            }
      - name: 'about'
        label: 'About Page'
        file: 'content/about.md'
        fields: 
          - {label: 'Title', name: 'title', widget: 'string'}
          - {label: 'Body', name: 'body', widget: 'markdown'}

      - name: 'archive'
        label: 'Archive Page'
        file: 'content/archive.md'
        fields:
          - {label: 'Title', name: 'title', widget: 'string'}
          - {label: 'Body', name: 'body', widget: 'markdown'}

backend

backend:
  name: git-gateway
  branch: master

這邊設置你要推上的分支名，我直接設master

publish_mode

publish_mode: editorial_workflow

加這行會開啟 Static CMS特有的編輯工作流，雖然改狀態很麻煩，但如果你想要有儲存草稿功能建議添加這行

fields

 - { label: "Title", name: "title", widget: "string" }
      - { label: "Subtitle", name: "subtitle", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Featured Image", name: "feature", widget: "image" }
      - { label: "Body", name: "body", widget: "markdown" }
      - { label: "Tags", name: "tags", widget: "list", field: { label: "Tag", name: "tag", widget: "string" } }

colletctions/post底下的 filelds 就是文字編輯器上編輯 markdown 屬性的地方，請依據自己用的框架、部落格主題去設置這塊

[程式] JavaScript ES6 筆記

Wed, 08 May 2024 07:14:23 GMT

Destructuring Objects and Arrays

const book = {
    id: 1,
    title: "The Lord of the Rings",
    publicationDate: "1954-07-29",
    author: "J. R. R. Tolkien",
    genres: [
      "fantasy",
      "high-fantasy",
      "adventure",
      "fiction",
      "novels",
      "literature",
    ],
    hasMovieAdaptation: true,
    pages: 1216,
    translations: {
      spanish: "El señor de los anillos",
      chinese: "魔戒",
      french: "Le Seigneur des anneaux",
    },
    reviews: {
      goodreads: {
        rating: 4.52,
        ratingsCount: 630994,
        reviewsCount: 13417,
      },
      librarything: {
        rating: 4.53,
        ratingsCount: 47166,
        reviewsCount: 452,
      },
    },
};

可以直接取用物件中的key,得到相對應value

const { title, author, pages, pulicationDate, genres, hasMovieAdaptation} = book; 
console.log(title) // => The Lord of the Rings

可以直接將陣列解構復值

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest); // [30, 40, 50];

「…」語法，可用在物件或陣列上

可以將陣列的值複製進另一個陣列

const updateBook = {
  ...book,
  moviePublicationDate: "2001-12-19",
  pages: 1210,
};
//這樣updateBook將會包含book物件的所有屬性，又加上後面兩個屬性

模板語法

用重音符將${} 包起來，${}中可以放語法

const summary = `${title} is a book`;
console.log(summary) // 'The Lord of the Ring is a book;'

三元運算符

如果第一個邏輯結果為 True ，返回 ? 後第一個結果，否則返回第二個

const isBookAvaliable = false;
const canTheBookBeBorrowed = isBookAvaliable ? 'Avaliable' : 'Unavaliable';

? (可選鏈運算子) 及 ?? (null合併運算子)

  const librarything = book.reviews.librarything?.reviewsCount ?? 0;

**?** 表示如果 **book.reviews.librarything** 是 **null** 或 **undefined**，則不會試圖訪問 **reviewsCount** 属性，而是直接返回 **undefined**
**?? 0**：表示如果左側的表達式（**book.reviews.librarything?.reviewsCount**）的結果是 **null** 或 **undefined**，則 **librarything** 的值將是 **0**。

|| 邏輯運算子與 ?? 的區別

**??**是會在左側為 **null** 或 **undefined** 時返回右側的值

**||** 則會在左側為任何 falsy (包含 0、false、null、undefined 和 “”) 的值時返回右邊的值

let count = 0;
console.log(count ?? 10);  // 輸出 0，因為 count 不是 null 或 undefined
console.log(count || 10);  // 輸出 10，因為 count 是 falsy 值

陣列 .map() 方法

用於將陣列中的每個元素按照某種計算規則轉換成新的元素，然後將這些新元素組成一個新陣列返回

const x = [1,2,3,4,5];
console.log(x.map((el)=> el*2); // [2,4,6,8,10]

陣列 .filter() 方法

根據特定條件從一個陣列中創建一個新陣列，新陣列只包含符合條件的元素

let newArray = array.filter(function(item, index, arr), thisArg);

const longBooks = books.filter(book => book.pages > 500);
console.log(longBooks);
// longBooks 將會只包含那些超過 500 頁的書

陣列 .reduce() 方法

將陣列中的所有元素累計成單一的結果。**reduce()** 對陣列中的每個元素（從左到右）執行一個由你提供的 reducer 函數，並將其結果累積起來，最終返回一個單一的值

**reduce()** 方法接受兩個參數：一個 reducer 函數和一個可選的初始累加值。

array.reduce(function(accumulator, currentValue, currentIndex, array), initialValue)

accumulator：累加器累積回調的返回值；它是上一次調用回調後返回的累積值，或者是提供的初始值（**initialValue**）。
currentValue：陣列中正在處理的當前元素。
currentIndex（可選）：陣列中正在處理的當前元素的索引。如果提供了 **initialValue**，則索引號從 **0** 開始，否則從 **1** 開始。
array（可選）：調用 **reduce** 的陣列。
initialValue（可選）：作為第一個調用 **reduce** 函數時第一個參數的值。

如果不提供 **initialValue**，**reduce()** 會將數組的第一個元素作為初始累加值，並從第二個元素開始執行 reducer 函數。如果陣列為空且沒有提供 **initialValue**，將拋出一個錯誤。

範例：

const pagesAllBooks = books.reduce((acc, book)=>acc + book.pages,0);

陣列 .filter() 方法

排序陣列中的元素

const arr = [3,6,1,7,9]
const sorted = arr.sort((a,b)=> a-b); // [1,3,6,7,9] 升冪
const down = arr.sort((a,b) => b-a); // [9,7,6,3,1] 降冪

compareFunction（可選）：一個可以自定義如何排序元素的函數。這個函數應該接受兩個參數（通常表示為 a 和 b），並根據比較的需要返回一個數值：
- 如果返回值小於 0，那麼 a 會被排在 b 前面。
- 如果返回值等於 0，a 和 b 的相對位置不變。
- 如果返回值大於 0，b 會被排在 a 前面。
因為 **sort()** 方法對原陣列進行原地排序，使用時要注意可能會改變原始數據。

新增元素到陣列

const newBook = {
  id: 6,
  title:"Harry Potter and the Chamber of Secrets",
  author: "J. K. Rowling",
}
const booksAfterAdding = [...books, newBook];
console.log(booksAfterAdding);

刪除陣列元素

const booksAfterDelete = books.filter(book => book.id !== 3);
console.log(books); //結果將不含 id 為 3 的書

非同步

Promise

什麼是 Promise？

**Promise** 是一個對象，代表了一個最終可能完成或失敗的非同步操作的結果。它允許你對非同步操作的成功值或失敗原因進行關聯處理。

Promise 的狀態

**Promise** 有三種狀態：

Pending（待定）：初始狀態，非同步操作尚未完成也未被拒絕。
Fulfilled（已實現）：表示相關的非同步操作已成功完成。
Rejected（已拒絕）：表示相關的非同步操作已失敗。

創建 Promise

你可以使用 **Promise** 的構造函數來創建一個新的 **Promise**。構造函數接受一個執行器函數作為參數，這個函數又接受兩個函數作為參數：**resolve** 和 **reject**。

let myPromise = new Promise((resolve, reject) => {
    // 非同步操作
    const condition = true;  // 假設條件判斷為非同步操作是否成功
    if (condition) {
        resolve('Operation successful');
    } else {
        reject('Error occurred');
    }
});

使用 Promise

當 **Promise** 被解決或拒絕時，你可以使用 **.then()** 和 **.catch()** 方法來處理成功或失敗的結果。

**.then()**：接受兩個函數作為參數。第一個函數是在 **Promise** 被解決時調用的，第二個（可選）函數是在 **Promise** 被拒絕時調用的。
**.catch()**：接受一個函數作為參數，用於處理 **Promise** 被拒絕的情況。

fetch("<http://jsonplaceholder.typicode.com/todos>")
  .then((res)=>res.json())
  .then(data => console.log(data

Async & Await 語法糖

在 JavaScript 中，**await** 是一個用於處理非同步操作的關鍵字，它只能在 **async** 函數內部使用。**await** 關鍵字可以暫停 **async** 函數的執行，等待 **Promise** 的解決或拒絕，然後恢復 **async** 函數的執行並返回解決值。

基本使用

要使用 **await**，首先需要定義一個 **async** 函數。**async** 函數是一種返回 **Promise** 對象的函數。在這個函數體內，你可以使用 **await** 來等待 **Promise** 完成。

async function getTodos() {
  const res = await fetch("<http://jsonplaceholder.typicode.com/todos>");
  const data = await res.json();
  console.log(data);
}

在上述代碼中，**somePromise()** 應該是一個返回 **Promise** 的函數。當 **Promise** 被解決時，它的解決值會被賦值給 **result** 變量。如果 **Promise** 被拒絕，則會拋出異常，可以使用 **try...catch** 結構來捕獲這個異常。

詳細解釋

當 **await** 表達式被執行時，它會暫停包含它的 **async** 函數的執行。如果 **Promise** 成功解決，則返回的值會作為 **await** 表達式的結果。如果 **Promise** 被拒絕，則拒絕的原因會被拋出作為異常。

**await** 只能在 **async** 函數內部使用。
使用 **await** 時，如果不加控制，可能會導致程序的性能下降，因為它會在等待 **Promise** 解決時暫停函數的執行。在處理多個獨立的 **Promise** 時，應考慮並行執行它們（如使用 **Promise.all()**）。
**await** 會將非 **Promise** 值轉換為立即解決的 **Promise**，這意味著你可以等待任何值，但這可能會導致不必要的微小延遲。

[程式] Vue 3 改版後與 Vue 2 的差異

Thu, 24 Nov 2022 15:00:00 GMT

學習資源

影片：
- Vue 3 Composition API Introduction
- Vue 3 For Beginners - Full Tutorial Course
參考資料：- 重新認識 Vue.js | Kuro Hsu - 升級 Vue 3 前，你必須要知道的改動 - Vue3 Hook 到底是啥黑魔法？

升級後的重大變革

新增功能

1. Composition API

相關邏輯可以集中
減少 this 指向的問題
Vue3 自定義Hook
- 使用 Composition API 寫法取代舊版 mixins
- hook是一個函式
- 將程式碼拆解，能夠讓各個頁面引用
  - 可以當作公用的函式

2. useCssVars

可以在組件加上自訂的 CSS 變數 var()

3. Teleport

Teleport 可以將定義的內容轉移到目標元素。

4. Fragments

模板可以省略根元素，避免多出許多不必要的元素

5. Emits Component Option

Vue 3 提供 emits 的聲明，用法就像 props 一樣。

6. Suspense & Error Boundary

Suspense 是非同步載入的組件，在資料讀取完成以及渲染完成之前，會先顯示 #fallback 的內容。
可以不用特地加一個 loading 變數來處理加載資料時的判斷

7. ::v-slotted & ::v-global

棄用的功能

1. KeyCode

2. `$on`, `$off`& `$once`

移除 $on, $off& $once 也代表不能再使用EventBus

3. Inline Template Attribute

<!-- before -->
<my-comp inline-template :msg="parentMsg">
  {{ msg }} {{ childState }}
</my-comp>

<!-- after -->
<my-comp v-slot="{ childState }">
  {{ parentMsg }} {{ childState }}
</my-comp>
<!-- my-comp -->
<slot :childState="childState" />

4. Filters

5. $listeners

在 Vue3 中 $listeners 已經整合到 $attrs

Vue2:
<input type="text" v-bind="$attrs" v-on="$listeners" />
Vue3:
<input type="text" v-bind="$attrs" />

Composition API 簡介

Composition API 是什麼

Composition API 其實就是要取代 Vue2時，元件與元件間的程式碼與邏輯結構分散，難以重複使用的問題。也可看作Function-based APIs，就是以函式作為邏輯的中心，將「該放一起的東西放在一起」。

Vue2 的 Options API 出了什麼問題？

原先，Vue2是將不同功能拆開來使用，但是隨著元件的增多。同一個邏輯操作的程式碼卻散佈在各個地方，不但不利於維護，也難以重複使用。

功能與邏輯的重複使用

Mixins 不再建議繼續使用
自定義指令 透過app.directive() 來建立一個客製化的指令，假設叫它'img-fallback'

當圖片載入錯誤時，用預設圖取代
```
//建立新元件
const app = vue.createApp({});

//在 app 註冊自定義指令
app.directive('img-fallback', {
    //mounted hook
    mounted(el){
    //當el觸發error事件的時候，把src換成預設圖
        el.add.EventListener('error',() => {
        el.src = 'default.png'
        })
    }
})
```
此時便可在所有想設定預設圖的<img>標籤加上v-img-fallback的自訂指令
```
<div-id="app">
<img
    v-img-fallback
    src="noimage.png"
</div>
```
此時，當瀏覽器試圖取得不存在的圖檔(noimage.png)時，就會觸發error事件，並且將圖檔置換成預設圖片。

除了 mounted鉤子外，還有其他的鉤子可以使用：
- created
- beforeMounted
- mounted
- beforeUpdate
- updated
- beforeUnmount
- unmomunted

這裡的鉤子函式是「指令」所使用的鉤子函式，與生命週期鉤子沒有直接關係。

Composition API 將跨元件共用的屬性(如data、computed、methods等)包裝起來，然後再將要使用的元件引入進去。與mixins最大的差別在於，被import到元件內的屬性，必須要以「物件」或「函式」的形式來將它們引入到元件中。

Vue3 自定義Hook

能夠將程式碼拆解，成為能夠引用的公用函式

範例程式碼：./mouse

import { ref, onMounted, onUnmounted } from "vue";

export function useMousePosition() {
  const x = ref(0);
  const y = ref(0);

  function update(e) {
    x.value = e.pageX;
    y.value = e.pageY;
  }

  onMounted(() => {
    window.addEventListener("mousemove", update);
  });

  onUnmounted(() => {
    window.removeEventListener("mousemove", update);
  });

  return { x, y };
}

在頁面或組件中引用的方式

// 引用整個函式
import { useMousePosition } from "./mouse";

export default {
  setup() {
      // 定義並return 函式所return的東西即可
    const { x, y } = useMousePosition();
    return { x, y };
  },
};

Composition API 核心

Compostion API 與 Options API 最大的差別：

元件的實體物件內不會再有 data、computed、methods 與生命週期 Hooks 等屬性（禁止再將上述屬性放到實體物件中）
取代原先分散式的結構
解決以 this 取得屬性所產生的問題
以新的setup()函式取代

setup: 啟動元件的位置

增加可讀性
要將模板內會用到的部分 return 出去

setup(){
// 將程式邏輯定義在todoList()內
// 增加可讀性
    const {todo, items, add , remove } = todoList();

// 將模板會用到的部分 return 出去
    return {
    todo,
    items,
    add,
    remove
    };
}

props 與 context

當setup()啟動時，會帶入兩個參數：props與context 由於已經不再使用 this 來存取屬性，所以可以透過 setup 函式提供的 props 物件來取得 props 的內容

取代原先以 this 存取屬性的 props
context名稱可自訂

export default {
props {
    defaultNum: {
    type: Number,
    defautl: 0
    }
},
//注意要加上props
    setup(props,context) {
        // 透過prop物件取的對應的屬性
        console.log(props.defaultNum);
    }
}

context物件

提供了 attrs, slots, emit 三種屬性，分別對應到元件的實體物件上
可以透過 context.attrs、context.slots、context.emit 來使用

<template>
    <div @click="clickInfo">
        子组件 == {{name1}}, {{title1}}
    </div>
</template>
<script>
import { reactive } from 'vue'
export default {
    name: 'child1',
    props: {
        name: String,
        title: String
    },
    setup(props, context){

        const name1 = reactive(props.name)
        const title1 = reactive(props.title)
        // 子组件点击事件
        const clickInfo = ()=>{
            // 抛出事件
            context.emit('itemclick', {name: 'emitClick'})
        }
        return { name1, title1, clickInfo };
    }
}
</script>

ref 與 reactive ：使值動態響應

在Compotision API 中，可以使用ref()來將數值進行包裝，並且回傳一個響應式的「物件」。這個ref()函式：

可以包裝原始型別(primitive)，也可以包裝物件或陣列。
必須後綴.value來讀取數值

在這個物件內，會提供一個value的屬性，可以透過這個value來更新或讀取狀態內的數值：

const count = ref(0);
console.log(count.value); //0
count.valut++;
console.log(count.value); //1

範例：count.vue

<template>
    <h1>{{ count }}</h1>
    <button @click="plus">Plus</button>
</template>

<script>
    // 透過import 引入 ref
    import { ref } from 'vue';

    export default {
        setup(){
            const count = ref(0)
        }

        return {
            // 透過 ref()包裝的數值可保有響應性
            count,
            plus,
            // 純數值在模板中同樣可以渲染，但不會有響應性追蹤
            nonReactiveCount: 0
        }
    }
</script>

ref 與 Dom 節點：替代$ref

由於setup()中已無this.$ref可用，要存取DOM中的元素，可利用先前提到的ref()。

<template>
    <!-- 模板內要加上 ref 屬性 -->
    <div ref="root"></div>
</template>

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

    export default {
        setup(){
            // 這裡的 root 與 <div ref="root"> 配對
            const root = ref(null);

            //可以透過 root.value 取得實際的 DOM 元素
            onMounted(()=>{
                console.log(root.value);
            })
        return {
            root,
            }
        }
    }
</script>

v-for 與 ref 複數動態節點： v-bind:ref

當 DOM 節點是透過 v-for 產生，同時又需要 ref 綁定模板時，可以透過 v-bind:ref 綁定到某個陣列：

<div
    v-for="(item, i) in list"
    :ref=" el => { divs[i] = el }"
>
    {{ item }}
</div>

如此便能指定divs[0]、divs[1]、divs[2]所對應的<div>節點：

export default {
    setup(){
        const list = reactive([1,2,3]);
        const divs = ref ([]);

        //確保在每次更新前重置divs
        onBeforeUpdate(()=> {
            divs.value = [];;lll
        })

        return {
            list,
            divs,
        }
    }
}

reactive() ：包裝響應式物件的另一種函式

除了ref()，也可以使用reactive()來包裝響應式物件。兩者最大的不同是:

ref()可以包裝原始型別(primitive)，也可以包裝物件或陣列。
reactive內的參數只能是「物件」
reactive()存取內部屬性時，不需後綴.value

<template>
    <h1>{{ data.count }}</h1>
    <button @click="data.plus">plus</button>
</template>

<script>
import { reactive } from "vue"
export default {
    setup(){
        //reactive包裝物件
        const data = reactive({
        count:0,
        plus() => data.count++
        });

        return {
            data
        };
    }
};
</scrpit>

reactive()回傳一個被ES6 Proxy代理過的物件，才能做到響應式的更新。

toRefs 與 reactive：解決ES6解構語法造成的不響應問題

使用ES6的展開運算子「...」時，會將物件從響應式狀態抽離，變成普通物件。因此需要改用 toRefs()

<template>
    <h1>{{ data.count }}</h1>
    <button @click="data.plus">plus</button>
</template>

<script>
import { toRefs } from "vue"
import counter from "./counter"

export default {
    setup(){
        //reactive包裝物件
        const count = counter();

        return {
            ...toRefs(count)
        };
    }
};
</scrpit>

computed

Composition API的computed，要改為函數式的寫法：

要後綴 .value 來讀取值
computed 的參數為一個 getter 函式，並回傳一個 ref 物件

<template>
    <h1>{{ data.count }}</h1>
    <h1>{{ doubleCount }}</h1>
    <h1>{{ quadrupleCount }}</h1>

    <button @click="plus">
        Plus
    </button>
</template>

<script>
import { ref, computed } from "vue"
import counter from "./counter"

export default {
    setup(){
        const count = ref(0);

        // computed 的參數為一個 getter 函式，並回傳一個 ref 物件
        const doubleCount = computed(()=> count.value * 2);

        //使用 computed回傳的內容要後綴.value
        const quadrupleCount = computed(()=> doubleCount.value * 2);
        const plus = () => count.value++;

        return {
            count,
            doubleCount,
            quadrupleCount,
            plus
        };
    }
};
</scrpit>

computed 的 get 與 set

computed 可以傳入 getter
computed 可以傳入 get 與 set

const count = ref(0)

const plusOne = computed({
    get:() => count.value + 1,
    set:(val) => {
        count.value = val - 1
    }
})

readonly

將物件傳到readonly()中，會回傳一個被代理過的「唯獨」物件：

setup() {
    const original = reactive({ count: 0 });
    const copy = readonly(orignal);
    const plus = () => original.count++;

    return {
        original,
        copy,
        plus,
    }
}

執行plus()後，original.count 會從 0 變成 1 而透過readonly()包裝後回傳的copy物件，內部的.count 也會變成 1

methods

Composition API 不再提供methods
直接將函式透過setup() return出去即可

watch & watchEffect

在 Composition API中，要改為函數式語法
可以觀察單一的 ref 物件
也可以觀察響應的 reactive 物件

觀察單一 ref 物件

watch(count, (val, oldVal) => {
    console.log(`new count is $(val), preCount is $(oldVal)`)
})

觀察 reactive 物件

將傳入 watch()的參數count 改為 ()=>data.count

watch(
    ()=>data.count,
    (val, oldVal) => { console.log(`new count is $(val), preCount is $(oldVal)`)}
)

透過陣列同時 watch 多個屬性

callback 是共用的

    watch(
        [() => data.count,() => data.doubleCount],
        ([newCount, newDoubleCount], [PreCount, PreDoubleCound]) => {
            console.log(`new count is $(newCount), prevCount is ${prevCount}` )
            console.log(`new doubleCount is $(newDoubleCount), prevDoubleCount is ${prevDoubleCount}` )
        }
    )

對不同屬性更新想執行不同的動作

可以分別寫兩個 watch

觀察陣列或物件

需要在watch()中加入第三個參數， {deep: true}

watchEffect

當.value更新時，會呼叫callback
與 watch的差別：
- watchEffect會在 setup 剛建立時就執行一次
- 不需要像watch一樣指定觀察的目標
- 內部的callback函式對應數值更新後自動執行( 類似coumputed )
- watchEffect 無法取得更新前的數值

watchEffect(()=> {
    console.log("watchEffect", count.value);
})

解除 watchEffect 觀察

個別的watchEffect() 被呼叫後會回傳一個屬於它的停止函式。
想要解除觀察時，可以呼叫該watchEffect() 所回傳的函式來停止觀察。
只能在現存元件中使用，如果元件被銷毀，provide 與 inject 的連結就會失效

const stop1 = watchEffect(() => {
    console.log("watchEffect", count.value)
})

相依性注入 (Dependency Injection)

Composition API 版的 provide 與 inject store.js

    export {
        todoList: symbol()
    };

在提供狀態的元件加上provide()，並將內容指定到對應的物件上： provide.vue

//提供者元件
import { ref, provide } from "vue";
import store from "./store";

export defautl {
    setup(){
        const todoList = ref([]);

        // 將 todoList 透過 provide 指定到 store.todoList
        provide(store.todoList, todoList);

        return {
            todoList,
        };
    },
};

在取用的元件，透過inject取出： inject.vue

//取用者元件
import { ref, inject } from "vue";
import store from "./store";

export default {
    setup(){
        // 透過inject 取出 store.todoList
        const todoList = inject (store.todoList);

        return {
            todoList,
        }
    }
}

Composition API 的生命週期鉤子

在 Composition API 中，生命鉤子改為函數式的語法：

//使用時先import
import { onMounted, onUpdated, onUnmounted } from 'vue';

const MyComponent = {
    setup() {

        onMounted(()=> {
            console.log('mounted');
        });

        onUpdated(()=> {
            console.log('updated!');
        })

        onUnmounted(()=> {
            console.log('unmounted!')
        })
    }
}

[筆記] Notion:Database基本用法

Tue, 30 Mar 2021 14:00:00 GMT

Relation (關聯)

- 在表單後建立ADVANED /  ↗︎Relation
- 選擇Select a database，並且關聯到B表單
- 點擊框框添加需要關聯的資料

Roll up (查找)

- **建立了Relation後才能使用Rollup**
- 在B表單中建立 ADVANED / 🔍 Rollup
    - 在Relation中 選取A表單

Create Linked Database (連結資料庫)
- 打/
- 輸入Create Linked Database
- 選擇要連結的資料庫，完成

[程式] Vue 基本介紹

Wed, 24 Mar 2021 03:00:00 GMT

Vue.js 介紹

Vue.js 具備直觀的語法讓開發者在學習上都可以輕鬆上手，搭配它簡單的雙向綁定，讓我們可以專注於資料狀態的管理。搭配它多樣化的延伸工具，可以開發 SPA ( Single Page Application )。

MVVM 結構 Vue不是一個完全MVVM的架構，只是受到MVVM的啟發。我們在畫面上看到的外觀就是View，而我們所操控的就是Model。

資料的動態 ViewModel是與畫面做綁定的，因此寫程式碼時只需要寫Model，資料變動的同時，ViewModel就會去控制視圖的變化。因此調整視圖或是資料時，View及Model兩邊的資訊會同時變更。

可以放入多個Vue app(應用程式) 宣告多個 Vue 應用程式，在Vue的開發者工具中就會看見多個<root> 但通常只會建立一個應用程式。

不適用巢狀結構應用程式中不能包另外一個應用程式。

開發環境 Vue 是透過資料來驅動畫面的，而資料是不斷在變動的，因此除錯時需要了解目前資料的狀態。基於以上狀況， Vue 較難以使用console.log的方式來進行除錯，利用瀏覽器中 Vue 插件的環境來除錯，是比較理想的方式。

透過CDN 建置新專案

對於製作原型或學習，你可以這樣使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

對於生產環境，我們推薦鏈接到一個明確的版本號和構建文件，以避免新版本造成的不可預期的破壞：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

透過vue-cli 建置新專案

$ npm install -g vue-cli
$ vue init webpack-simple [project name]

$ cd [project name]
$ npm install
$ npm run dev

建立應用程式

Vue在建立時會宣告一個新的 Vue 應用程式，裡面擺放物件；而生成之後必須綁定一個 HTML 的元素。而Vue一次只能綁定一個元素，因此綁定ID是比較好的。

in body

<div id="vueApp">
  {{ text }}
</div>

in script

var app = new Vue({
  el: '#vueApp',
  data: {
    text:'這裡是一串文字',
    array:[
    {item1},
    {item2}
    ]
  }
})

MVVM 的概念

MVVM與MVC的差別

MVC 概念

透過Controller轉接去要求Model取資料

MVVM 概念

ViewModel是與畫面做綁定的，因此寫程式碼時只需要寫Model，資料變動的同時，ViewModel就會去控制視圖的變化。

因此調整視圖或是資料時，View及Model兩邊的資訊會同時變更。

與傳統jQuery的差別

傳統的jQuery是直接操作DOM元素，而Vue.js在操作DOM元素時是透過資料的狀態去操作畫面。

聲明式渲染

Vue.js 的核心是一個允許採用簡潔的模板語法來聲明式地將數據渲染進DOM 的系統：在script中綁定好元素，再回到元素中用{{}}去呼叫

在 html 中

<div id="app">
  {{ message }}
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

Vue指令

vue指令 Vue筆記除了使用{{}}的方式，也可利用指令的方式來綁定資料。

v-model：可以實現資料的雙向綁定
v-text：相當於js的innerText
v-html：相當於js的innerHTML
v-bind：（單向）動態綁定一個或多個attribute屬性指令
v-for、v-if：做類似forEach的迴圈
v-on：處理互動行為

常見簡寫

v-on: == @
v-bind ==

v-model 雙向綁定

可以透過本指令，綁定物件的資料。說明 : 把 input的value值 和 data里的msg 绑定到了一起,一方改变,另外一方也会跟改变

使用方式 : v-model 一般使用在表單元素上
限制使用：
- <input>
- <select>
- <textarea>
- components

重點 : v-model 使用在不同的表单元素上, 绑定的值不一样 v-model 绑定到文本输入框里面 => 绑定是字符串类型的内容 v-model 绑定到多选框里面 ==> 绑定是布尔类型true/false

in body

<div id="vueApp">
    <input type="text" v-model="message">
</div>

in script

var app = new vue({
    el:'#vueApp',
    data:{
        imgSrc="圖片網址",
        className="img-fluid"
    }
})

v-html

預期：string
詳細：更新元素的innerHTML。注意：內容按普通HTML插入-不會作為Vue模板進行編譯。如果試圖使用v-html組合模板，可以重新考慮是否通過使用組件來替代。

Html注意事項在網站上動態渲染任意HTML是非常危險的，因為容易導致XSS攻擊。只在可信內容上使用v-html，永不用在用戶提交的內容上。

v-bind 動態屬性指令

單向動態綁定數據（從M->V）透過增加屬性的方式，可以連結圖片或是網址、或是增加class

v-bind官方說明
簡寫：v-bind: 可簡寫為 :

{{}} 不能用在属性值上, 一般使用在标签内容部分，位置
v-bind 動態綁定一個數據 (單向 M -> V)
v-bind 一般使用在屬性上，任意標籤皆可使用

v-bind:class 動態切換

官方說明：Class與Style綁定

對象語法：我們可以傳給 v-bind:class 一個對象，以動態地切換 class 。注意 v-bind:class 指令可以與普通的 class 特性共存

v-if & v-for 動態產生多筆資料於畫面上

data中可以放入類似JSON的資料結構，也就是可以放置陣列進去。添加v-for的屬性做類似forEach的迴圈，並且在標籤中渲染出值。

顯示陣列中數值

 <pre>{{陣列名稱}}</pre>

v-for寫法

作用：巡訪陣列，創造出對應的標籤。

寫法：先v-for指定某個陣列，再在標籤中以{{}}呼叫該陣列的元素

基本寫法

          陣列元素
<li v-for='item in list'>{{ item.name }} {{ item.id }}</li>

取出陣列索引值

            陣列元素,元素對應的索引
<li v-for='(item,index) in list' >{{ item }} {{ index }}</li>

巡訪特定對象

<li v-for='(value,key) in obj'>{{ value }} {{ key }}</li>

巡訪次数

<li v-for='i in 100'>{{ i }}</li>
<li v-for='i in 100'>{{ i - 1 }}</li>

範例

在html中

<ui>
  <li v-for="item in list">
    {{item.name}}
  </li>
</ui>

在script中

var app = new Vue({
  el: '#app',
  data: {
    list: [
      {
        name: '小明',
        age: 16
      },
      {
        name: '媽媽',
        age: 38,
      },
      {
        name: '漂亮阿姨',
        age: 24
      }
    ]
  }
})

v-if

在v-for的迴圈中加入判斷式

寫法：直接在標籤裡面增加v-for的屬性來添加判斷式

in body

<ul>
    <li v-for="item in list" v-if="item.age < 25">
      {{ item.name }} 年齡是 {{ item.age}}
    </li>
</ul>

v-on : 處理互動行為

官方說明：v-on
v-on: 可簡寫為 @

綁定事件，觸發方法會寫在html的元件上，而不是Vue.js的原始碼中。

寫法：在input中用v-model綁定text，並在data底下再新增一個 method 物件，然後使用 v-on:觸發方式 = "methods"來綁定物件。

在底下利用{{}}呼叫新的newText值

<input v-model="text">
<button v-on:click="reverseText">我是按鈕</button>
{{newText}}

v-on後加上判斷式

在v-on後可以加入判斷式，判斷式直接套用物件，就可以不用寫完整的method。 <button ＠click="isTransform = !isTransform"></button>

關於`this`在 Vue 的用法

在 JavaScript 中 this 在全域環境都會指向 window 如果在 Vue 中 this則會指向 Vue 的 app

利用this指定data底下的物件

範例：

  var app = new Vue({
    el: '#app',
    data: {
      text: '',
      newText: ''
    },
    methods:{
      reverseText: function(){
      console.log('點我', this.text);
      this.text = this.newText;
      }
    }
  });

修飾符

v-on 搭配修飾符，能夠直接調用事件，而不用通過method。

事件修飾符
- 官方說明：事件修飾符
- 範例：v-on:click.prevent，利用修飾符取代event.preventDefault();

<a href="#" v-on:click.prevent></a>

按鍵修飾符
- 官方說明：按鍵修飾符
- 範例：v-on:keyup.enter，submit會在key是enter時調用

<input v-on:keyup.enter="submit">

computed 運算功能

computed是app中的一個功能，它透過 data 中的值的變更，將結果回傳於變數中，並且可以運用在畫面上。在 computed 中所宣告的任何屬性都會是 function ，且它都會 return 一個值。

範例：

<div id="app">
    {{ reverseText }}
</div>


<script>
    var app = new Vue{
        el: '#app',
        data: {
            text: '',
            newText:''
        },
        computed: {
            reverseText: function(){
            return this.text
            }
        }
    }
</script>

Methods 及 Computed 差別

computed
- 在監控資料更動後，重新運算結果呈現於畫面上
- 一般來說不會修改資料，只會回傳用於畫面呈現的資料
methods
- 就是互動的函式，需要觸發才會運作
- 會用來修改資料內容
效能 - 資料量大時， computed 只要資料變動就會觸發，無形之中執行次數也會增加，自然會比較慢。因此在大量資料時，會建議透過 methods 減少不必要的運算喔

Vue 表單與資料的綁定

選項

  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check2" v-model="checkboxArray" value="雞">
    <label class="form-check-label" for="check2">雞</label>
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check3" v-model="checkboxArray" value="豬">
    <label class="form-check-label" for="check3">豬</label>
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check4" v-model="checkboxArray" value="牛">
    <label class="form-check-label" for="check4">牛</label>
  </div>
  <p>晚餐火鍋裡有<span v-for="item in checkboxArray">{{item}}</span>。</p>

Raellen's notes

辦理失業給付的過程與經驗談

一、辦理離職

1. 資遣預告期

2. 謀職假

3. 非自願離職證明書

4. 其他注意事項

二、 辦理失業給付

1. 前往勞動力發展署辦理失業給付認定

2. 失業給付認定流程

失業認定流程

3. 失業期間的工作

4. 提早就業獎助津貼

參考資料：

Astro 加入 Cusdis 作為留言系統

1. Astro 客製化的 Config 如何寫

2. 改 CSS

Youtube 影片下載不求人 (yt-dlp)

安裝工具

設定環境變數

新增設定

開始使用

參考來源

Django 架設筆記

[筆記] Python Numpy 常見方法

NumPy 常用方法整理（含參數說明）

1. 建立陣列（Array Creation）

2. 陣列屬性與操作

3. 數學運算

4. 統計函數

5. 邏輯與篩選

[AI] 10款 Text-to-Code AI 工具

1. Lovable.dev

2. Rocket.new

3. Altan.ai

4. Von.dev

5. Tempo.new

6. Trae.ai

7. Bolt.new

8. Create.xyz

9. Reflex.dev

10. Co.dev

總結建議：

RD 與其他角色對任務執行的不同見解

Java學習：第1週-Java基礎知識

一、 數據類型和變量宣告（閱讀和實踐）

1. 基本數據類型（Primitive Data Types）

2. 變量宣告（Variable Declaration）

例子

3. 變量的作用域（Scope of Variables）

4. 常量（Constants）

5. 實踐練習

練習 1: 宣告並初始化各種類型的變量

練習 2: 嘗試更改常量的值並觀察錯誤

二、運算符和表達式

1. 運算符概述

2. 各類運算符的詳細介紹

2.1 算術運算符（Arithmetic Operators）

2.2 關係運算符（Relational Operators）

2.3 邏輯運算符（Logical Operators）

2.4 位元運算符（Bitwise Operators）

2.5 賦值運算符（Assignment Operators）

2.6 增量與減量運算符（Increment/Decrement Operators）

2.7 條件運算符（三元運算符 Ternary Operator）

3. 實踐練習

練習 1: 算術運算符

練習 2: 關係和邏輯運算符

練習 3: 賦值運算符和增量/減量運算符

練習 4: 三元運算符

三、控制結構（if, switch）

1. if 控制結構

1.1 基本語法

1.2 if-else 語法

1.3 if-else if-else 語法

1.4 範例

2. switch 控制結構

2.1 基本語法

2.2 範例

3. if 和 switch 的區別

4. 實踐練習

二、辦理失業給付

一、數據類型和變量宣告（閱讀和實踐）

1. `if` 控制結構

1.2 `if-else` 語法

1.3 `if-else if-else` 語法

2. `switch` 控制結構

3. `if` 和 `switch` 的區別

練習 1: 使用 `if-else` 控制結構

練習 2: 使用 `switch` 控制結構

1. `for` 迴圈

2. `while` 迴圈

3. `do-while` 迴圈

`do-while` 循環與 `while` 循環的主要區別在於執行條件的檢查時間點：

4.1 範例：`break` 和 `continue`

練習 1: 使用 `for` 迴圈

練習 2: 使用 `while` 迴圈

練習 3: 使用 `do-while` 迴圈