[網頁技術]網頁程式設計初入門

[為何建議Javascript]
以我自己學習程式的經驗，學程式第一個遇到的遇到的問題就是建立環境，如何讓你寫的程式可以真的在電腦裡執行，很多程式語言都號稱用notepad就能寫程式，對啦~寫是可以寫但是電腦又看不懂，不會執行你的程式，要讓程式看得懂你的程式你還需要一位翻譯員，稱之為編譯器compiler來將你寫的程式翻成電腦看得懂的語言，並產生.exe執行檔。

在windows底下編譯器通常包裝在IDE當中，就是可以讓你很好寫程式的軟體，當你努力照著書或網站一步步安裝好，準備要好好寫程式時，會發現IDE很貼心的做出一堆工具按鈕、切出好幾個視窗框架，讓你一打開軟體就一頭霧水完全不知道自己在幹嘛，甚至因為版本更新，你參考的資料已經是舊版的，所以按照步驟完全安裝不起來，然後想學程式的熱情就被磨光光了。

所以Javascript到底好在哪，別的程式語言都要安裝編譯器就他不用?
當然不是，而是他的執行環境我們早就非常熟悉，就是平常上網、看影片用的瀏覽器，完全不用安裝其他新的軟體就能執行程式，執行的結果直接就呈現在網頁上，非常的方便。

[建立工作環境]
因此Javascript是真的可以只用notepad寫程式的語言，例如寫一個在控制台console中輸出Hello World!的程式，就像下圖一樣簡單。

接著儲存檔案時記得將副檔名設為.html，存到你想要的位置。

從檔案總管進到儲存的資料夾，會看到剛剛存的檔案以瀏覽器的圖標呈現，如果檔案還是顯示記事本圖標，代表副檔名設定不正確，通常windows系統會隱藏副檔名，請google查詢”windows顯示副檔名”並重新命名調整。

在此示範以chrome開啟，點開該檔案後看到一片白，那是因為執行結果輸出在控制台console，鍵盤按下ctrl+shift+C開啟開發者介面，點到console看到Hello World!字樣就表示你的第一個網頁程式成功執行，代表你已經是個網頁程式開發者了Oh Ya！

控制台的功能在一般使用瀏覽器的狀況下幾乎用不到，但開發網頁程式時就天天離不開他，時時把變數、物件的內容輸出出來有助於掌握整個程式的架構，同時也方便debug。

[推薦編輯器--Sublime Text 3]
雖然說可以只用notepad就寫好程式，但這只侷限在寫的程式還只有十來行的時候，當程式的架構龐大起來還是只看黑底白字的話，看沒兩下就眼花了，因此還是建議使用有語法highlight的編輯器，有拚字錯誤馬上就知道，而且不管你程式寫得怎麼樣，旁邊的人看你的螢幕花花綠綠一堆程式就覺得很厲害，用notepad看起來就很菜，別人以為你在打日記XD。
(前面所說的編譯器compiler跟編輯器editor雖然字很像，但實際上卻是完全不相關的東西，notepad就是最陽春的編輯器)
在此推薦Sublime Text 3，專為前端開發所設計的編輯器，安裝非常簡單，沒有亂七八糟的按鈕混淆視聽，預設的色調主題就非常舒服，有付費方案但無限期免費試用，非常適合網頁程式設計的新手。