iT邦幫忙

javascript相關文章
共有 5912 則文章

技術 App 內建瀏覽器裡的 Passkey:API 存在,不代表能用

英文版在 dev.to。 最近幫會員登入加上 Passkey,結果在 LINE 的內建瀏覽器裡踩到一個很隱蔽的問題:按鈕有出現,按下去沒反應,而且沒有任何錯...

My Project Day 30:Git/GitHub 部署與 30 天鐵人賽完賽全紀錄

app link : https://college-expense-tracker-sandy.vercel.app/ 歷經了 29 天的程式碼重構、UI/...

My Project Day 27 - 29:App 的行動化體驗與介面全面升級

Day 27:版面配置更改(RWD 實踐) 在前幾天的開發中,我們的記帳網站在電腦螢幕上展現了極佳的質感與功能性。然而,身為一個手機不離身的大學生,如果打開記...

My Project Day 25 - 26 :主題與色系切換系統

Day 25 :CSS 變數架構與全站樣式同步 1.root 預設變數與多套色系 /* 藍*/ :root { --bg-color: #f4f6f9;...

My Project Day 23-24:實作「每月固定支出」自動化智慧記帳機制

Day 23:實作「每月固定支出」自動化智慧記帳機制 在前面的開發中,我們已經完成了記帳 CRUD、預算控制、月曆檢視、圓餅圖統計以及安全密碼鎖。然而,在日常...

My Project Day 15 - 22 :登入系統實作規劃

在前面的天數中,我們成功打造了具備 SPA 頁面切換、即時記帳、動態月曆、Chart.js 統計圖表與 CSV 匯出的完整記帳網頁。然而,當一個網站開始記錄使...

My Project Day 14~19|Google OAuth 2.0 授權流程與 Google Calendar API 整合實作

一、實作目標 前面已經完成 Google Cloud 專案設定、啟用 Google Calendar API、建立 OAuth 2.0 憑證,以及產生 Goog...

My Project Day 13|產生 Google OAuth 2.0 授權網址

一、學習目標 第十二天已經完成 credentials.json 的讀取,並使用 Google API Client Library 建立 OAuth 2.0...

鐵人賽 Vibe Coding DAY 28

技術 Day 28|不是每個 needs review 都代表同一種過期

Day 27 我處理的是 Setup Status 和真正完成條件不一致的問題。 那篇結尾我留了一個差異:needs-review 規則和 Schema〈十四、...

技術 Vue3 Vite+Javascript引用Plotly.js實作統計圖表-以P-chart不良率管制圖為例

摘要: 先用vite快速建立Vue3新專案,預設程式語言為Javascript,然後一步一步安裝Plotly.js並引用實作統計管制圖表,以P-chart不良率...

My Project Day 14:實作 localStorage 資料清除與金庫重設機制

隨著測試與使用的資料越來越多,如果使用者想要一口氣清空所有紀錄、重新開始記帳該怎麼辦呢?所以今天我們會為專案加入 「清除全部紀錄與重設金庫」 功能。透過 lo...

My Project Day 13:實作一鍵匯出 CSV 報表功能

在前面的天數中,我們依序完成許多功能。資料雖然都透過 localStorage 安全地保存在瀏覽器中,但如果使用者想用 Excel 進行更深入的財務分析或備份...

鐵人賽 Vibe Coding DAY 26

技術 Day 26|不能只相信 disabled button

Day 25 最後留了一個小洞,我寫的是: setup 不完整時,generateSpecFromState() 應該拒絕產生 spec,stage 不應前進...

My Project Day 11|Google Calendar API 與 OAuth 2.0 環境設定

一、學習目標 今天開始進行 Discord Bot 與 Google Calendar 的串接,主要目標是完成 Google Cloud 專案設定、啟用 Goo...

鐵人賽 Vibe Coding DAY 25

技術 Day 25|按鈕該鎖住的時候,是哪個條件在擋?

Day 24 最後留了一個很明確的方向: Day 25 我想給它補 focused unit coverage:每個條件單獨壞一次,看它自己能不能讓整個判斷不...

My Project Day12:引入 Chart.js 繪製消費比例圓餅圖與左右分欄儀表板

今天會進入視覺化的重頭戲:透過前端輕量級圖表套件 Chart.js,在「統計」頁面畫出各類別的消費比例圓餅圖。同時即時計算各類別的金額與佔比百分比。 一、...

鐵人賽 Vibe Coding DAY 23

技術 Day 23|這次我測的不是能不能往前,而是不能太早往前

Day 22 結尾,我留了一句話: 還沒填完時,產生 Project Specification 應該不能按。 今天就補這一條。 ClarifyBuild...

鐵人賽 Vibe Coding DAY 22

技術 Day 22|我沒有塞 draft,從空白的 Idea 走完了六站

Day 21 結尾我留了一個很具體的方向。 如果 Day 22 要繼續補 browser test,就補一條從 Idea Entry 一路走到 Prompt P...

My Project Day 11:將記帳明細渲染至月曆檢視中

昨天我們成功用 JavaScript 刻出了動態的月曆網格與月份切換功能。今天會進入到資料繫結,讓存在 localStorage 裡的消費紀錄自動找到對應的日...

My Project Day 9|讓 /add 不只格式正確,日期時間也要真的合理

一、今天的學習目標 前幾天我已經讓 /add 可以接收三個欄位: title date time 而且也有使用 Regex 檢查日期是不是 8 位數、時間是不是...

My Project Day 10:動態日曆排版與跨月切換實作

不同於死板的列表,一個好的記帳軟體一定要能用月曆檢視每天的花費狀況。今天我們會透過 JavaScript 動態計算當月的總天數、第一天是星期幾,並完美排版出 7...

鐵人賽 Vibe Coding DAY 20

技術 Day 20|終於補 browser test,但我只測使用者看得到的事

Day 18 我說還沒有 browser test。 Day 19 我又說 browser test 一樣先放著。 今天 Day 20,終於輪到它了。 不過今天...

鐵人賽 JavaScript DAY 30

技術 Day 30|重新學一次 JavaScript 之後:如何面對新的 API 與 AI?

摘要 30 天沿著資料走了一趟: 學到了同步資料流、非同步資料流、資料到手之後怎麼存與複製,最後是不要了怎麼停。一路帶出三個問題: 誰推進、資料是共用還是複製、...

鐵人賽 JavaScript DAY 29

技術 Day 29|誰該擁有 AbortController?從 TanStack Query 看非同步工作的生命週期

摘要 取消要分兩個角色:判斷「還要不要」的一方持有 AbortController,負責喊停;做事的一方只拿 signal,交給 fetch 這類會停下來的 A...

鐵人賽 Software Development DAY 24

技術 Day 24:案例——一次 AI 寫測試掩蓋掉真正 bug 的真實除錯過程

前言:進入第四部,用真實案例把前面 23 天的原則串起來 從今天開始是這個系列的第四部:實戰案例與總結。前面 23 天講了不少原則——假陽性測試、過度 mock...

鐵人賽 JavaScript DAY 28

技術 Day 28|AbortSignal 逾時、組合與錯誤判斷:取消之後,catch 收到什麼?

摘要 AbortSignal.timeout() 讓「等太久」也能變成一個 signal,AbortSignal.any() 則把好幾個停止條件合成一個,誰先發...

My Project Day 09:實作預算設定與超支視覺警示功能

在前幾天的重構與 SPA 架構完成後,我們的記帳網站已經有了大概的的骨架。今天,我們要把「預算」這個分頁的功能補齊,並在總覽儀表板加上 UI/UX 設計:預算...

鐵人賽 Vibe Coding DAY 16

技術 Day 16|把資料存起來之前,先決定什麼不能被存成真相

昨天 Day 15,我把 ClarifyBuild 的 Specification Setup 從容易出錯的文字格式,改成比較明確的 row-based edi...

My Project Day 7|新增 /help 指令,讓使用者查看目前可使用的功能

一、今天的學習目標前幾天已經完成了 /add 指令,Day 6 也把 /add 的功能從 index.js 拆到獨立的 add.js 中。隨著功能增加,我希望使...

鐵人賽 JavaScript DAY 27

技術 Day 27|Promise 不能取消,那 AbortController 到底取消了什麼?

摘要 AbortController 不會把 Promise 強制關掉;它透過 AbortSignal 通知願意配合的工作停止,fetch()、事件監聽器與自訂...