對很多剛下定決心要學寫程式的新手來說，我覺得最困難的其實不是語法本身，而是「環境架設」。先讓自己的電腦可以跑起來這件事。
學使用 javascript 的話要先安裝 Node.js、還是下載 VS Code、甚至要打開可能用電腦十幾年都不會打開的終端機，這些對沒有技術背景的人來說真的很容易勸退。
常常「開始即放棄」。其實我認為，與其一開始就去搞這些複雜麻煩的電腦設定，不如先用線上編輯器快速進入寫程式的節奏，先試著寫第一行code，之後有成就了再慢慢學怎麼在自己電腦上跑環境也不遲。
讀完此篇你會學到：如何零基礎零摩擦開始寫你的第一行程式。
Codespaces
Codespaces 是github提供的服務之一。相對於其他線上編輯器，功能很完整，有類似vscode的編輯器畫面，甚至還有 Copilot可以使用。雖然服務本身是要付費，但有免費額度。
每個帳戶有120小時的核心使用時間，還有15gb的空間可以使用。基本上對於剛開始學寫程式的使用者來說，非常夠用。
未來要轉到本機端使用 vscode也比較好上手，應該說一秒上手。因為是一樣的東西。
開始使用
要開始使用 codespaces 要先註冊 github 帳號。註冊帳號的部分我就不贅述了，就交給你處理了！
註冊如果遇到困難，也可以在下面留言，我會幫你解答。
註冊好帳號進來後會像是這個樣子的畫面，會有很多模板（templates）提供你起始使用。連 react都有，方便使用者起始使用。不過我們先寫 html 來學習 javascript，先選 Blank 空白起始就可以了。在 Blank 的模板下面點 「Use this templates」 就可以開始了。
編輯器
點選使用模板進去後，會進去編輯器畫面，編輯器是 VS Code 網頁版本，也是目前最多網頁工程師使用的編輯器。選擇喜歡的主題就可以開始了。
編輯器主要的Layout如下：
- 工具列（Activity Bar）
這邊有一排小圖示，是 VS Code 的功能捷徑。常見的有：
- 檔案總管：可以看到你的專案裡有哪些檔案
- 搜尋：可以快速搜尋整個專案裡的關鍵字
- 原始碼管理：跟 Git 版本控制有關，可以提交、同步代碼。
- 執行與偵錯：執行程式、設中斷點、除錯
- 擴充功能管理：可以下載各種擴充功能，像是語法高亮、AI 助手、主題等等，vs code 會變成最最受歡迎的編輯器，就是因為強大擴充功能。
- 中間區塊：編輯器區域
寫程式的地方，一次可以打開多個檔案，像瀏覽器分頁一樣切換，每個檔案會根據你用的程式語言，自動幫你highlight用顏色分別、補齊語法。
- 左側檔案總覽
按下第一個資料夾圖示會看到這區塊。這裡會顯示你的資料夾與檔案樹狀結構。你可以直接點選打開檔案進行編輯，也可以拖曳移動。
- 下方工具列
比較常用的是可以用來看終端機，使用終端機執行程式並查看訊息。
Hello World!
學寫程式的第一行程式不管是什麼語言都是 「Hello World!」，不免俗的我們也要來一下。
新增檔案
直接在檔案總覽區域按下右鍵，點選新增檔案，檔名取做 index.js。並在編輯區域輸入下面程式碼
console.log("Hello World!");
這一段的意思是會在終端機印出 “Hello World!” 畫面看起來會像是這樣子。
執行程式碼
寫好了程式碼，總要執行看看才知道寫得對不對吧！那..要怎麼執行呢？
先點到一個左邊側邊欄工具列有一個大大個三角形的圖示「執行與除錯」，然後他會請你選偵錯工具，就選 node.js即可。
接著你就會在下面終端機看到 Hello World!! 了。恭喜你成功的寫出第一行程式了，你也是個會寫程式的人了！
再下一章會教你如何寫出一個基本的網頁並且執行網頁！而且會教你搭配AI使用。畢竟都2025 AI這麼發達了，不學一下好像不行吧！
練習題
練習題 1：修改 Hello World 文字
請把程式碼中的 "Hello World!" 改成你自己的名字，例如 "Hello Tom"
練習題 2：挑戰：印出數字加總結果
請在畫面中印出 123 加上 456 的結果
可以把練習的結果貼在留言，讓大家知道你成功了！！有問題也可以在連言區問我，謝謝。
喜歡的話記得幫我追蹤，才不會錯過我的更新！
