電腦科學新手村
64免費公開
Bicky 曾是只會抄程式作業的學生，現在鼓起勇氣重新踏入電腦科學領域。希望透過輕鬆的文章分享寫程式的思路，還會帶你了解電腦背後的運作邏輯。文章會搭配哈佛 CS50 課程，從最基礎的知識開始，讓你即使沒有背景也能跟上，歡迎對電腦科學有興趣卻不知道從何下手的夥伴加入！
Top 5
為什麼瀏覽器一直問你 Cookie 要不要開？
你一定看過這種提示：「我們使用 Cookie 優化使用者體驗，是否允許所有 Cookie？」
這不是在煩你，而是在問你：願不願意讓網站在你的瀏覽器裡「留下記號」，記住你是誰、你做過什麼。
這些「記號」就是 Cookie，它是瀏覽器儲存資料的一種方
為什麼瀏覽器一直問你 Cookie 要不要開？
你一定看過這種提示：「我們使用 Cookie 優化使用者體驗，是否允許所有 Cookie？」
這不是在煩你，而是在問你：願不願意讓網站在你的瀏覽器裡「留下記號」，記住你是誰、你做過什麼。
這些「記號」就是 Cookie，它是瀏覽器儲存資料的一種方
在寫程式的世界裡，最怕的就是「我以為沒問題，結果一堆 bug」。這篇筆記要帶你認識如何用「測試」和「CI/CD」幫助我們自動檢查錯誤、提升開發效率！
🧪 測試是什麼？為什麼要測試？
測試就是「寫程式來測試程式」，聽起來有點繞，但其實很簡單：
你寫了一個功能，接著寫一段測試程式來確認它真的能正
在寫程式的世界裡，最怕的就是「我以為沒問題，結果一堆 bug」。這篇筆記要帶你認識如何用「測試」和「CI/CD」幫助我們自動檢查錯誤、提升開發效率！
🧪 測試是什麼？為什麼要測試？
測試就是「寫程式來測試程式」，聽起來有點繞，但其實很簡單：
你寫了一個功能，接著寫一段測試程式來確認它真的能正
前情提要：從前端到後端的橋樑
前面了解 React、Vue 或其他前端框架，但當你需要與資料庫溝通、處理使用者輸入或串接第三方服務時，就需要一個能處理 HTTP 請求的後端框架。這時，Express + Node.js 就是最輕量、最易入門的選擇。
Express 是什麼？為什麼選它？
Exp
前情提要：從前端到後端的橋樑
前面了解 React、Vue 或其他前端框架，但當你需要與資料庫溝通、處理使用者輸入或串接第三方服務時，就需要一個能處理 HTTP 請求的後端框架。這時，Express + Node.js 就是最輕量、最易入門的選擇。
Express 是什麼？為什麼選它？
Exp
AI 時代，買課程滿天飛，但怎麼學才會精？
我花了一次家教費，換來不必一輩子買課程，也學會真正探索知識、克服卡關的方法。
這篇文章分享我從半途而廢到真正開竅的學習故事，告訴你在資訊爆炸時代，怎麼握緊自己的方向。
AI 時代，買課程滿天飛，但怎麼學才會精？
我花了一次家教費，換來不必一輩子買課程，也學會真正探索知識、克服卡關的方法。
這篇文章分享我從半途而廢到真正開竅的學習故事，告訴你在資訊爆炸時代，怎麼握緊自己的方向。
現代 JavaScript 教學：從語法到實戰應用，涵蓋陣列方法(map, forEach, reduce)、物件解構、原型鏈與 Class、React 基礎(函數組件、useState)、JavaScript 引擎簡介及商業應用案例。教學包含圖解、範例及常見錯誤比較，幫助讀者快速上手。
現代 JavaScript 教學：從語法到實戰應用，涵蓋陣列方法(map, forEach, reduce)、物件解構、原型鏈與 Class、React 基礎(函數組件、useState)、JavaScript 引擎簡介及商業應用案例。教學包含圖解、範例及常見錯誤比較，幫助讀者快速上手。
這篇文章循序漸進介紹 JavaScript 的非同步機制，包含同步與非同步的概念、call stack 和 event loop 的運作、callback、Promise 和 async/await 的用法與優缺點，並搭配程式碼範例及商業應用情境說明，幫助讀者瞭解非同步流程並提升開發效率。
這篇文章循序漸進介紹 JavaScript 的非同步機制，包含同步與非同步的概念、call stack 和 event loop 的運作、callback、Promise 和 async/await 的用法與優缺點，並搭配程式碼範例及商業應用情境說明，幫助讀者瞭解非同步流程並提升開發效率。
這篇文章記錄學習 JavaScript 事件冒泡、事件委託、事件傳遞和停止傳遞的筆記，包含基本概念說明、程式碼範例和實際應用案例，並以淺顯易懂的方式說明事件物件 (e) 的用途。
這篇文章記錄學習 JavaScript 事件冒泡、事件委託、事件傳遞和停止傳遞的筆記，包含基本概念說明、程式碼範例和實際應用案例，並以淺顯易懂的方式說明事件物件 (e) 的用途。
最近在思考把 Threads 貼文轉移到notion變成資料庫跟加上主題編號，但100多篇文真的很懶得複製貼上。於是我參考了以下文章，並搭配 Copilot 把細微的功能修改，約2小時內可完成。這篇文章的目的是補充原作者沒有截圖到的內容，並分享「一鍵擷取」的功能，把第一篇到最新一篇的文全部抓下來。
最近在思考把 Threads 貼文轉移到notion變成資料庫跟加上主題編號，但100多篇文真的很懶得複製貼上。於是我參考了以下文章，並搭配 Copilot 把細微的功能修改，約2小時內可完成。這篇文章的目的是補充原作者沒有截圖到的內容，並分享「一鍵擷取」的功能，把第一篇到最新一篇的文全部抓下來。
這篇開始進到跟網頁互動較密切相關的單元，我會學習DOM 跟常用的網頁設計指令。練的環境是 VS code，之前的環境是Colab，但Colab比較適合Python。
DOM（Document Object Model），文件物件模型
DOM 是瀏覽器幫你把 網頁HTML 變成 JavaScrip
這篇開始進到跟網頁互動較密切相關的單元，我會學習DOM 跟常用的網頁設計指令。練的環境是 VS code，之前的環境是Colab，但Colab比較適合Python。
DOM（Document Object Model），文件物件模型
DOM 是瀏覽器幫你把 網頁HTML 變成 JavaScrip
這篇文章提供一個逐步教學，教你如何使用 VS Code 和 Live Server 外掛建立一個簡單的網頁，並搭配 JavaScript 程式碼呈現互動效果。教學包含建立檔案、撰寫 HTML 和 JavaScript 程式碼，以及使用 Live Server 預覽網頁的步驟。
這篇文章提供一個逐步教學，教你如何使用 VS Code 和 Live Server 外掛建立一個簡單的網頁，並搭配 JavaScript 程式碼呈現互動效果。教學包含建立檔案、撰寫 HTML 和 JavaScript 程式碼，以及使用 Live Server 預覽網頁的步驟。
終於慢慢撿回JS的手感了！這篇文章深入淺出地解釋函式宣告、函式表達式、回呼函式，並搭配範例講解創作階段和執行階段。從Hoisting、匿名函式到非同步操作，助你釐清JS函式運作的關鍵概念。文末還有小測驗，幫助你融會貫通！
終於慢慢撿回JS的手感了！這篇文章深入淺出地解釋函式宣告、函式表達式、回呼函式，並搭配範例講解創作階段和執行階段。從Hoisting、匿名函式到非同步操作，助你釐清JS函式運作的關鍵概念。文末還有小測驗，幫助你融會貫通！
這篇文章提供 JavaScript 的基礎教學，涵蓋變數、作用域、資料型別、以及常見的錯誤與陷阱。以淺顯易懂的白話文搭配程式碼範例，幫助讀者快速掌握 JavaScript 的核心概念。
這篇文章提供 JavaScript 的基礎教學，涵蓋變數、作用域、資料型別、以及常見的錯誤與陷阱。以淺顯易懂的白話文搭配程式碼範例，幫助讀者快速掌握 JavaScript 的核心概念。
本系列文章將循序漸進地介紹 JavaScript 的核心概念，從基礎語法到進階應用，例如非同步程式設計和 React 基礎。內容淺顯易懂，並使用生活化的比喻幫助讀者理解，搭配程式碼範例，適合 JavaScript 初學者學習。
本系列文章將循序漸進地介紹 JavaScript 的核心概念，從基礎語法到進階應用，例如非同步程式設計和 React 基礎。內容淺顯易懂，並使用生活化的比喻幫助讀者理解，搭配程式碼範例，適合 JavaScript 初學者學習。
本文介紹行動通訊網路的演進歷史，從1G到5G，並說明ITU與3GPP在制定通訊規格上的重要角色，以及5G的三大關鍵應用場景：URLLC、eMBB和mMTC。
本文介紹行動通訊網路的演進歷史，從1G到5G，並說明ITU與3GPP在制定通訊規格上的重要角色，以及5G的三大關鍵應用場景：URLLC、eMBB和mMTC。
這篇文章說明網路的七層模型、IP 位址、通訊埠、TCP/UDP 協定、HTTP 協定、HTTP 狀態碼以及 WebSocket，並解釋它們之間的關係與互動方式。文中包含許多圖表和範例，幫助讀者理解這些網路概念。
這篇文章說明網路的七層模型、IP 位址、通訊埠、TCP/UDP 協定、HTTP 協定、HTTP 狀態碼以及 WebSocket，並解釋它們之間的關係與互動方式。文中包含許多圖表和範例，幫助讀者理解這些網路概念。
學習CSS的技巧與工具，包含偽類、遊標樣式、絕對單位和相對單位、元素顯示與隱藏、Flexbox、響應式設計(RWD)、Bootstrap和Tailwind等，幫助你設計出漂亮且在不同螢幕上都好用且順眼的網頁。
學習CSS的技巧與工具，包含偽類、遊標樣式、絕對單位和相對單位、元素顯示與隱藏、Flexbox、響應式設計(RWD)、Bootstrap和Tailwind等，幫助你設計出漂亮且在不同螢幕上都好用且順眼的網頁。
學習網頁設計的 CSS 三大重要觀念：Box model、Position 與 z-index。透過此文章，瞭解 padding、border、margin 的應用、position 屬性的五種定位方式，以及 z-index 如何控制元素的堆疊順序，並附上相關學習資源與實例說明。
學習網頁設計的 CSS 三大重要觀念：Box model、Position 與 z-index。透過此文章，瞭解 padding、border、margin 的應用、position 屬性的五種定位方式，以及 z-index 如何控制元素的堆疊順序，並附上相關學習資源與實例說明。
這篇文章介紹 CSS 的樣式表、選擇 HTML 元素的方法和 CSS 權重。內容包含內聯樣式、內部樣式、外部樣式、元素選擇器、類別選擇器、ID 選擇器、通用選擇器以及 CSS 權重等重要概念。並以淺顯易懂的方式說明，搭配便當的例子做比喻，讓讀者更容易理解 CSS 的應用和原理。
這篇文章介紹 CSS 的樣式表、選擇 HTML 元素的方法和 CSS 權重。內容包含內聯樣式、內部樣式、外部樣式、元素選擇器、類別選擇器、ID 選擇器、通用選擇器以及 CSS 權重等重要概念。並以淺顯易懂的方式說明，搭配便當的例子做比喻，讓讀者更容易理解 CSS 的應用和原理。
這篇文章提供 Python 程式碼逐步解說如何使用 Pandas 與 Plotly 繪製 Walmart 財報 Sankey 圖表。文章詳細解釋每個變數、字典和函式的用途，並說明如何處理財務數據，最後產生視覺化的 Sankey 圖表。
這篇文章提供 Python 程式碼逐步解說如何使用 Pandas 與 Plotly 繪製 Walmart 財報 Sankey 圖表。文章詳細解釋每個變數、字典和函式的用途，並說明如何處理財務數據，最後產生視覺化的 Sankey 圖表。
前情提要：
視覺化 Walmart 財報- 01 (安裝環境、檔案基本介紹）
本筆記要開始進入拆解程式碼跟邏輯的階段，為了方便講解，我用 Colab 作筆記 （其實是有點懶得安裝套件)。我的學習方式中英文網頁搜尋 + 搭配ChatGPT 問「為什麼」，目的是我可以「白話文解釋程式碼」
前情提要：
視覺化 Walmart 財報- 01 (安裝環境、檔案基本介紹）
本筆記要開始進入拆解程式碼跟邏輯的階段，為了方便講解，我用 Colab 作筆記 （其實是有點懶得安裝套件)。我的學習方式中英文網頁搜尋 + 搭配ChatGPT 問「為什麼」，目的是我可以「白話文解釋程式碼」
Top 5
為什麼瀏覽器一直問你 Cookie 要不要開？
你一定看過這種提示：「我們使用 Cookie 優化使用者體驗，是否允許所有 Cookie？」
這不是在煩你，而是在問你：願不願意讓網站在你的瀏覽器裡「留下記號」，記住你是誰、你做過什麼。
這些「記號」就是 Cookie，它是瀏覽器儲存資料的一種方
為什麼瀏覽器一直問你 Cookie 要不要開？
你一定看過這種提示：「我們使用 Cookie 優化使用者體驗，是否允許所有 Cookie？」
這不是在煩你，而是在問你：願不願意讓網站在你的瀏覽器裡「留下記號」，記住你是誰、你做過什麼。
這些「記號」就是 Cookie，它是瀏覽器儲存資料的一種方
在寫程式的世界裡，最怕的就是「我以為沒問題，結果一堆 bug」。這篇筆記要帶你認識如何用「測試」和「CI/CD」幫助我們自動檢查錯誤、提升開發效率！
🧪 測試是什麼？為什麼要測試？
測試就是「寫程式來測試程式」，聽起來有點繞，但其實很簡單：
你寫了一個功能，接著寫一段測試程式來確認它真的能正
在寫程式的世界裡，最怕的就是「我以為沒問題，結果一堆 bug」。這篇筆記要帶你認識如何用「測試」和「CI/CD」幫助我們自動檢查錯誤、提升開發效率！
🧪 測試是什麼？為什麼要測試？
測試就是「寫程式來測試程式」，聽起來有點繞，但其實很簡單：
你寫了一個功能，接著寫一段測試程式來確認它真的能正
前情提要：從前端到後端的橋樑
前面了解 React、Vue 或其他前端框架，但當你需要與資料庫溝通、處理使用者輸入或串接第三方服務時，就需要一個能處理 HTTP 請求的後端框架。這時，Express + Node.js 就是最輕量、最易入門的選擇。
Express 是什麼？為什麼選它？
Exp
前情提要：從前端到後端的橋樑
前面了解 React、Vue 或其他前端框架，但當你需要與資料庫溝通、處理使用者輸入或串接第三方服務時，就需要一個能處理 HTTP 請求的後端框架。這時，Express + Node.js 就是最輕量、最易入門的選擇。
Express 是什麼？為什麼選它？
Exp
AI 時代，買課程滿天飛，但怎麼學才會精？
我花了一次家教費，換來不必一輩子買課程，也學會真正探索知識、克服卡關的方法。
這篇文章分享我從半途而廢到真正開竅的學習故事，告訴你在資訊爆炸時代，怎麼握緊自己的方向。
AI 時代，買課程滿天飛，但怎麼學才會精？
我花了一次家教費，換來不必一輩子買課程，也學會真正探索知識、克服卡關的方法。
這篇文章分享我從半途而廢到真正開竅的學習故事，告訴你在資訊爆炸時代，怎麼握緊自己的方向。
現代 JavaScript 教學：從語法到實戰應用，涵蓋陣列方法(map, forEach, reduce)、物件解構、原型鏈與 Class、React 基礎(函數組件、useState)、JavaScript 引擎簡介及商業應用案例。教學包含圖解、範例及常見錯誤比較，幫助讀者快速上手。
現代 JavaScript 教學：從語法到實戰應用，涵蓋陣列方法(map, forEach, reduce)、物件解構、原型鏈與 Class、React 基礎(函數組件、useState)、JavaScript 引擎簡介及商業應用案例。教學包含圖解、範例及常見錯誤比較，幫助讀者快速上手。
這篇文章循序漸進介紹 JavaScript 的非同步機制，包含同步與非同步的概念、call stack 和 event loop 的運作、callback、Promise 和 async/await 的用法與優缺點，並搭配程式碼範例及商業應用情境說明，幫助讀者瞭解非同步流程並提升開發效率。
這篇文章循序漸進介紹 JavaScript 的非同步機制，包含同步與非同步的概念、call stack 和 event loop 的運作、callback、Promise 和 async/await 的用法與優缺點，並搭配程式碼範例及商業應用情境說明，幫助讀者瞭解非同步流程並提升開發效率。
這篇文章記錄學習 JavaScript 事件冒泡、事件委託、事件傳遞和停止傳遞的筆記，包含基本概念說明、程式碼範例和實際應用案例，並以淺顯易懂的方式說明事件物件 (e) 的用途。
這篇文章記錄學習 JavaScript 事件冒泡、事件委託、事件傳遞和停止傳遞的筆記，包含基本概念說明、程式碼範例和實際應用案例，並以淺顯易懂的方式說明事件物件 (e) 的用途。
最近在思考把 Threads 貼文轉移到notion變成資料庫跟加上主題編號，但100多篇文真的很懶得複製貼上。於是我參考了以下文章，並搭配 Copilot 把細微的功能修改，約2小時內可完成。這篇文章的目的是補充原作者沒有截圖到的內容，並分享「一鍵擷取」的功能，把第一篇到最新一篇的文全部抓下來。
最近在思考把 Threads 貼文轉移到notion變成資料庫跟加上主題編號，但100多篇文真的很懶得複製貼上。於是我參考了以下文章，並搭配 Copilot 把細微的功能修改，約2小時內可完成。這篇文章的目的是補充原作者沒有截圖到的內容，並分享「一鍵擷取」的功能，把第一篇到最新一篇的文全部抓下來。
這篇開始進到跟網頁互動較密切相關的單元，我會學習DOM 跟常用的網頁設計指令。練的環境是 VS code，之前的環境是Colab，但Colab比較適合Python。
DOM（Document Object Model），文件物件模型
DOM 是瀏覽器幫你把 網頁HTML 變成 JavaScrip
這篇開始進到跟網頁互動較密切相關的單元，我會學習DOM 跟常用的網頁設計指令。練的環境是 VS code，之前的環境是Colab，但Colab比較適合Python。
DOM（Document Object Model），文件物件模型
DOM 是瀏覽器幫你把 網頁HTML 變成 JavaScrip
這篇文章提供一個逐步教學，教你如何使用 VS Code 和 Live Server 外掛建立一個簡單的網頁，並搭配 JavaScript 程式碼呈現互動效果。教學包含建立檔案、撰寫 HTML 和 JavaScript 程式碼，以及使用 Live Server 預覽網頁的步驟。
這篇文章提供一個逐步教學，教你如何使用 VS Code 和 Live Server 外掛建立一個簡單的網頁，並搭配 JavaScript 程式碼呈現互動效果。教學包含建立檔案、撰寫 HTML 和 JavaScript 程式碼，以及使用 Live Server 預覽網頁的步驟。
終於慢慢撿回JS的手感了！這篇文章深入淺出地解釋函式宣告、函式表達式、回呼函式，並搭配範例講解創作階段和執行階段。從Hoisting、匿名函式到非同步操作，助你釐清JS函式運作的關鍵概念。文末還有小測驗，幫助你融會貫通！
終於慢慢撿回JS的手感了！這篇文章深入淺出地解釋函式宣告、函式表達式、回呼函式，並搭配範例講解創作階段和執行階段。從Hoisting、匿名函式到非同步操作，助你釐清JS函式運作的關鍵概念。文末還有小測驗，幫助你融會貫通！
這篇文章提供 JavaScript 的基礎教學，涵蓋變數、作用域、資料型別、以及常見的錯誤與陷阱。以淺顯易懂的白話文搭配程式碼範例，幫助讀者快速掌握 JavaScript 的核心概念。
這篇文章提供 JavaScript 的基礎教學，涵蓋變數、作用域、資料型別、以及常見的錯誤與陷阱。以淺顯易懂的白話文搭配程式碼範例，幫助讀者快速掌握 JavaScript 的核心概念。
本系列文章將循序漸進地介紹 JavaScript 的核心概念，從基礎語法到進階應用，例如非同步程式設計和 React 基礎。內容淺顯易懂，並使用生活化的比喻幫助讀者理解，搭配程式碼範例，適合 JavaScript 初學者學習。
本系列文章將循序漸進地介紹 JavaScript 的核心概念，從基礎語法到進階應用，例如非同步程式設計和 React 基礎。內容淺顯易懂，並使用生活化的比喻幫助讀者理解，搭配程式碼範例，適合 JavaScript 初學者學習。
本文介紹行動通訊網路的演進歷史，從1G到5G，並說明ITU與3GPP在制定通訊規格上的重要角色，以及5G的三大關鍵應用場景：URLLC、eMBB和mMTC。
本文介紹行動通訊網路的演進歷史，從1G到5G，並說明ITU與3GPP在制定通訊規格上的重要角色，以及5G的三大關鍵應用場景：URLLC、eMBB和mMTC。
這篇文章說明網路的七層模型、IP 位址、通訊埠、TCP/UDP 協定、HTTP 協定、HTTP 狀態碼以及 WebSocket，並解釋它們之間的關係與互動方式。文中包含許多圖表和範例，幫助讀者理解這些網路概念。
這篇文章說明網路的七層模型、IP 位址、通訊埠、TCP/UDP 協定、HTTP 協定、HTTP 狀態碼以及 WebSocket，並解釋它們之間的關係與互動方式。文中包含許多圖表和範例，幫助讀者理解這些網路概念。
學習CSS的技巧與工具，包含偽類、遊標樣式、絕對單位和相對單位、元素顯示與隱藏、Flexbox、響應式設計(RWD)、Bootstrap和Tailwind等，幫助你設計出漂亮且在不同螢幕上都好用且順眼的網頁。
學習CSS的技巧與工具，包含偽類、遊標樣式、絕對單位和相對單位、元素顯示與隱藏、Flexbox、響應式設計(RWD)、Bootstrap和Tailwind等，幫助你設計出漂亮且在不同螢幕上都好用且順眼的網頁。
學習網頁設計的 CSS 三大重要觀念：Box model、Position 與 z-index。透過此文章，瞭解 padding、border、margin 的應用、position 屬性的五種定位方式，以及 z-index 如何控制元素的堆疊順序，並附上相關學習資源與實例說明。
學習網頁設計的 CSS 三大重要觀念：Box model、Position 與 z-index。透過此文章，瞭解 padding、border、margin 的應用、position 屬性的五種定位方式，以及 z-index 如何控制元素的堆疊順序，並附上相關學習資源與實例說明。
這篇文章介紹 CSS 的樣式表、選擇 HTML 元素的方法和 CSS 權重。內容包含內聯樣式、內部樣式、外部樣式、元素選擇器、類別選擇器、ID 選擇器、通用選擇器以及 CSS 權重等重要概念。並以淺顯易懂的方式說明，搭配便當的例子做比喻，讓讀者更容易理解 CSS 的應用和原理。
這篇文章介紹 CSS 的樣式表、選擇 HTML 元素的方法和 CSS 權重。內容包含內聯樣式、內部樣式、外部樣式、元素選擇器、類別選擇器、ID 選擇器、通用選擇器以及 CSS 權重等重要概念。並以淺顯易懂的方式說明，搭配便當的例子做比喻，讓讀者更容易理解 CSS 的應用和原理。
這篇文章提供 Python 程式碼逐步解說如何使用 Pandas 與 Plotly 繪製 Walmart 財報 Sankey 圖表。文章詳細解釋每個變數、字典和函式的用途，並說明如何處理財務數據，最後產生視覺化的 Sankey 圖表。
這篇文章提供 Python 程式碼逐步解說如何使用 Pandas 與 Plotly 繪製 Walmart 財報 Sankey 圖表。文章詳細解釋每個變數、字典和函式的用途，並說明如何處理財務數據，最後產生視覺化的 Sankey 圖表。
前情提要：
視覺化 Walmart 財報- 01 (安裝環境、檔案基本介紹）
本筆記要開始進入拆解程式碼跟邏輯的階段，為了方便講解，我用 Colab 作筆記 （其實是有點懶得安裝套件)。我的學習方式中英文網頁搜尋 + 搭配ChatGPT 問「為什麼」，目的是我可以「白話文解釋程式碼」
前情提要：
視覺化 Walmart 財報- 01 (安裝環境、檔案基本介紹）
本筆記要開始進入拆解程式碼跟邏輯的階段，為了方便講解，我用 Colab 作筆記 （其實是有點懶得安裝套件)。我的學習方式中英文網頁搜尋 + 搭配ChatGPT 問「為什麼」，目的是我可以「白話文解釋程式碼」