[前端自學轉職攻略] 10. 卡關了怎麼辦？

化繁為簡，把問題拆小逐步解決

功能不會做

先把功能拆分為小任務，在逐一解決。只要拆的夠細，一般常見功能通常都能在網上找到參考範例， 若是比較特殊的功能，也可以使用 ChatGPT 來獲得一些方向。

在網上搜尋資料時，建議優先參考官方文檔和幾個主流網站，如 MDN、W3C、StackOverflow、GitHub 等。若是參考網路文章或影片時，最好選擇發布時間較新、瀏覽量高的內容。

如果一直卡在同一個問題上，很容易讓人對程式開發失去興趣。所以當某個功能的難度超過當前的能力範圍，也可以考慮使用其他功能來替代，等多累積一些經驗後，再回來挑戰。

實際演練

以先前提到的 To Do List 為例，假如 “新增待辦事項” 不知如何下手，可以先列出功能的操作步驟：

1. 使用者輸入新增項目的內容
2. 送出新增項目
3. 新增項目插入待辦事項列表中

接著思考每個步驟的實作方式：

1. 需要一個 HTML 元素讓使用者能輸入資料，然後在 JavaScript 中取得使用者輸入的內容。
2. 需要一個 HTML 元素作為按鈕，然後在 JavaScript 中監聽使用者點擊按鈕的動作。
3. 使用 JavaScript 新增一個 HTML 元素，將使用者輸入的內容放進元素裡，然後將該元素插入待辦事項列表的 HTML 元素中。

不知道該用哪個 HTML 元素？不知道怎麼用 JavaScript 創建 HTML 元素？不知道怎麼將元素插入列表中？

問題拆細後，就來逐個找出答案，查文件、Google、ChatGPT...，找出答案的方法很多。在解決每個問題的過程中，會學到幾個不同的語法和應用方式，日積月累下來，自然會做的功能就越來越多。

Bug 不會解

學會看錯誤訊息

很多時候，錯誤訊息已經清楚地指出了問題所在，即便不知道解決方法，直接把錯誤訊息拿去 Google，找到答案的機率也很大。

定位問題

隨著專案功能的增多，有時候可能會搞不清楚是哪段程式碼觸發了問題。此時建議嘗試縮小範圍，來找出真正問題所在。像是暫時刪除部分代碼，或嘗試在線上編輯器中重現問題。

在社群上尋求幫助

網上有很多地方可以尋求協助，如 Line/FB 社群、iT 邦幫忙、StackOverflow 等。發問時，學會清楚地表達問題是很重要的，不僅會讓問題更有機會得到回覆，很多時候，在思考該如何清楚的解釋問題時，自己就找到答案了。