JavaScript 的控制維度:行為怎麼描述

學了 JavaScript,你就多了 10 個「控制點」來描述互動行為。

「讓它可以用」「把這個做好」

沒有任何控制點,AI 只能猜

「當使用者點擊送出按鈕時,先驗證 email 格式,如果正確就發 POST 到 /api/subscribe,成功後顯示 toast 通知『訂閱成功』,失敗則顯示紅色錯誤訊息」

你在描述一個系統,而不是一個願望

你能控制的「行為控制點」

每學會一個 JavaScript 概念,就多了一個可以在 Prompt 裡使用的行為控制點。

維度
問題
Prompt 範例
事件(Event)
什麼觸發?
「當使用者點擊 .submit-btn 時」
時間(Time)
什麼時候發生?
「頁面載入 2 秒後顯示彈窗」
狀態(State)
現在是什麼狀態?
「isLoading 為 true 時顯示 spinner」
條件(Condition)
在什麼情況下?
「如果 email 包含 @,才允許送出」
資料(Data)
資料從哪來?
「從 /api/products 取得商品列表」
數量(Quantity)
一個還是多個?
「用 forEach 為每個商品建立一張卡片」
輸入(Input)
使用者怎麼操作?
「使用者在搜尋框輸入文字」
回饋(Feedback)
使用者看到什麼?
「成功後顯示綠色 toast,3 秒消失」
持久性(Persistence)
會不會被記住?
「把深色模式偏好存到 localStorage」
位置(Location)
發生在哪裡?
「在 .modal 裡面觸發,不影響背景頁面」

Prompt 改造練習

點擊每個「不好的 Prompt」,看看加上 JavaScript 控制維度後會變成什麼樣子。

31 個控制點,就是你的 Prompt 武器庫

🦴
HTML
10 個控制點

描述「有什麼」結構、層級、語意...

🎨
CSS
11 個控制點

描述「長怎樣」位置、尺寸、間距...

💪
JavaScript
10 個控制點

描述「怎麼動」事件、狀態、條件...

💡

懂前端的本質,不是會寫程式。而是你多了一套「控制點的語言」。
好的 Prompt 就是把這些控制點講清楚。
你不是在「許願」,你是在「設計系統」。