--- # System prepended metadata title: 【JavaScript 筆記】從零開始的 JS - part 1 tags: [HTML, 網頁程式設計, JavaScript, CSS, 網頁] --- # 【JavaScript 筆記】從零開始的 JS - part 1 [TOC] 歡迎你點入本篇文章，本系列網頁程式設計，主要紀錄我個人自學的軌跡，另外也作為日後個人複習用。若你喜歡本篇文章，歡迎在文章底下點一顆愛心，或是追蹤我的個人公開頁～ --- ## 簡介（Introduction） JavaScript 接下來都簡稱 JS，JS 是一個輕量級的程式語言，也是一個腳本語言，也是一種讓網頁動起來的程式語言。 JS 是一種直譯式（Interpreted）、動態型別、跨平台的腳本語言。 - 直譯式：程式碼不需要事先編譯，瀏覽器直接讀取、直接執行。 - 動態型別：變數的型別不需要事先宣告，執行時自動判斷。 - 跨平台：能在瀏覽器、伺服器（Node.js）、甚至手機 App 上執行。 - 物件導向 + 函式導向：支援多種程式設計風格，彈性非常高。 ### JS 的小故事 JavaScript 是由 Brendan Eich 在 1995 年於 Netscape 公司任職時創造，前後只花了 10 天就設計完成。雖然名字裡有 Java，但和 Java 其實是完全不同的語言，當年取這個名字純粹是行銷噱頭，純粹只是想要蹭而已。 之後 JavaScript 被提交給 ECMA 國際組織制定標準，這個標準規範就叫做 ECMAScript（ES），每年都會更新版本，目前最新為 ES2026。 ### JS 的應用 | 應用領域 | 真實案例 | | --------- | ---------------------------------- | | 網頁互動 | 按鈕點擊、表單驗證、動態更新畫面 | | 前端框架 | React、Vue、Angular 等現代框架 | | 後端伺服器 | Node.js（可以寫 API、後端邏輯） | | 手機 App | React Native（一套程式碼跑 iOS + Android 跨平台） | | 遊戲 | 在瀏覽器裡運行的網頁遊戲 | | AI / 機器學習 | TensorFlow.js 等函式庫 | | IoT 物聯網 | 控制硬體裝置 | ### 為什麼學 JS？ 在一份 [Stack Overflow 2025 Survey](https://survey.stackoverflow.co/2025/technology#1-programming-scripting-and-markup-languages) 調查中，JavaScript 仍然是當前最多人使用的程式語言，而第二名為 Python。 主要因為 JS 可以同時做太多事情了，而且靈活性也很高，因此是非常值得學的一門程式語言。 ## 在 HTML 裡面寫 JS ### ` ``` 註：放在 `` 裡的程式碼會在網頁內容載入之前就執行，如果我們設計的 JS 需要操作頁面上的元素（例如找某個按鈕），此時頁面還沒渲染完，會找不到該元素而出錯。 ![image](https://hackmd.io/_uploads/Hko8hW3sbl.png) ### 放在 `` 結尾前 ```html= My Page

原本的標題

``` 把 ` ``` ### 內部 / 外部 js 比較 | | 內部 `` | 不推薦操作畫面：會在 HTML 渲染前執行，容易發生找不到網頁元素的錯誤，適合放純邏輯設定。 | | 放 `` 前 | `` | 推薦單頁面：保證 HTML 載入完畢後才執行 JS，適合小型測試。 | | 引入外部 .js | `` | 將 JS 與 HTML 分離，維護性高、多頁面可共用程式碼，且瀏覽器會有快取效果。 | ### Chrome Console 在網頁按 F12 或右鍵選「檢查」即可開啟開發人員工具 (DevTools) 的 Console 面板。 **基礎輸出:** - `console.log()`：最萬用的基本輸出。 - `console.info()`：系統資訊說明（外觀通常與 `log()` 無異）。 - `console.warn()`：黃字警告（需注意但不致命）。 - `console.error()`：紅字錯誤（並附上呼叫路徑）。 **進階視覺化 & 結構化:** - `console.table()`：將陣列（Array）或物件（Object）化為表格，較直觀的函式。 - `console.group()` / `console.groupEnd()`：將多行 `log()` 縮排分群組，還能摺疊收合，讓畫面不雜亂。 **效能與邏輯測試:** - `console.time("標籤")` / `console.timeEnd("標籤")`：測量執行時間（毫秒 ms），標籤名稱必須一致。 - `console.count("標籤")`：紀錄該行程式碼被執行的次數（可用 `countReset()` 重置）。 - `console.assert(條件, "錯誤訊息")`：假設驗證。只有當條件為 `false` 時，才會印出紅色錯誤訊息；`true` 則無反應。 - `console.trace()`：印出目前的函式呼叫堆疊路徑（Stack Trace），用來追蹤程式是怎麼一步步走到這裡的，深層除錯必備。 ## 參考資料 [Introduction to JavaScript - GeeksforGeeks](https://www.geeksforgeeks.org/javascript/introduction-to-javascript/) [Adding JavaScript in HTML Document - GeeksforGeeks](https://www.geeksforgeeks.org/javascript/where-to-put-javascript-in-an-html-document/) [Console in JavaScript - GeeksforGeeks](https://www.geeksforgeeks.org/javascript/console-in-javascript/) [JavaScript 简介 | 菜鸟教程](https://www.runoob.com/js/js-intro.html) [JavaScript 用法 | 菜鸟教程](https://www.runoob.com/js/js-howto.html) [Chrome 浏览器中执行 JavaScript | 菜鸟教程](https://www.runoob.com/js/js-chrome.html) [JavaScript 输出 | 菜鸟教程](https://www.runoob.com/js/js-output.html)