在 Chrome 中建立和執行 JavaScript 檔案

1. 在 Chrome 中使用開發者工具建立和執行 JavaScript 檔案
2. 在 Chrome 中使用 node.js 建立和執行 JavaScript 檔案

作為 Web 開發人員，無論你做什麼，無論是前端還是後端，你總是必須以某種方式使用 JavaScript。

在我們的開發過程中，始終會在 Chrome 瀏覽器中編寫、調整和執行 JavaScript 程式碼。通常，我們通過將 JavaScript 檔案與 HTML 文件連線起來，在瀏覽器中執行 JavaScript 檔案。

但情況並非總是如此。有時，我們需要在沒有 HTML 文件的幫助下在瀏覽器中執行 JS 檔案。

因此，要在 Chrome 瀏覽器中執行 JavaScript 檔案，有兩種方法。一種方法是在 Chrome 開發工具或本地系統上建立一個 JavaScript 檔案，然後在 Chrome 瀏覽器中執行該檔案。

我們將在下面實際看到這兩種方式。

在 Chrome 中使用開發者工具建立和執行 JavaScript 檔案

建立和執行 JavaScript 檔案的最簡單方法是使用 Chrome 開發人員工具。

在開發工具中建立和執行 JavaScript 檔案的步驟：

• 開啟 Chrome 瀏覽器並按鍵盤上的 F12 以開啟 Chrome 開發者工具。或者，你也可以右鍵單擊瀏覽器內的任意位置，然後從列表中選擇檢查以開啟開發工具，如下所示。

• 開啟 Chrome 開發工具後，點選 Sources 標籤，然後選擇 Snippets 標籤。如果你看不到片段標籤頁，請單擊頂部的箭頭以訪問它。

• 要建立 JavaScript 檔案，請單擊 New Snippet 以建立該檔案併為其命名。在這裡，我們將 myFile 作為檔名。

• 在這裡，你可以使用 Ctrl + V 組合鍵編寫或貼上 JavaScript 程式碼。

下面是我們在開發工具中編寫的程式碼。

在這裡，我們剛剛建立了一個 h1 元素並在其中新增了一個句子。然後我們使用 prepend 方法在 body 標籤內的頂部顯示此文字。

var text = document.createElement('h1');
text.innerHTML = 'This is Google\'s webpage';

document.body.prepend(text);

你還可以在檔案內部進行更改時重新整理頁面。

這不會重新整理檔案內的程式碼。要執行你編寫的 JavaScript 程式碼，你可以在關鍵字上按 Ctrl + Enter。

如果你的程式碼中有一些控制檯語句，這些內容將顯示在螢幕底部的控制檯視窗中，如上圖所示。請注意，你在此檔案中編寫的任何程式碼都只能在瀏覽器開啟之前對你可用。

關閉 Chrome 瀏覽器後，你所做的所有更改都將丟失。因此，最好建立一個單獨的檔案，然後在 Chrome 瀏覽器中執行它。

這就是我們將在下一節中看到的內容。

在 Chrome 中使用 node.js 建立和執行 JavaScript 檔案

將 JavaScript 程式碼儲存在單獨的檔案中總是更好。這就是我們通常在建立生產就緒網站時的做法。

建立 JavaScript 檔案很簡單，每個人都知道怎麼做。只需在檔名末尾新增 .js 副檔名，然後，檔案現在是一個 JavaScript 檔案。

雖然，對於大多數人來說，最困難的部分是如何在瀏覽器中執行這個 JavaScript 檔案。人們通常將 JavaScript 連線到 HTML 文件，然後在 Chrome 瀏覽器中執行它。

但在這裡我們對此不感興趣。在這裡，我們將專注於在瀏覽器中直接執行 JavaScript 檔案。

這在 JavaScript 框架 node.js 的幫助下成為可能。你可以從官方網站下載 node.js 框架。

在你的系統上安裝 node.js 後，你必須開啟終端視窗並導航到儲存 JavaScript 檔案的位置。在這裡，我們還需要一個名為 express.js 的庫。

使用以下命令安裝 express。

npm i express

然後在 JavaScript 檔案中，匯入 express 庫並初始化一個 express 應用程式，如下所示。

const express = require('express');
const app = express();

app.get('/', (req, res) => {res.send('<h1>This is Google\'s webpage</h1>')})

app.listen(4000, () => {
  console.log(`Server is running on port 4000`);
});

在這裡，我們還必須指定我們的伺服器將執行的埠。在這種情況下，我們使用 4000 作為埠號。

你可以指定任意數字作為埠號，然後使用 / 路由中的 get 請求，你可以傳送 JavaScript 程式碼。此程式碼將顯示在 Chrome 瀏覽器上。

在這裡，我們將通過在名為 index.js 的檔案中編寫上述程式碼，在瀏覽器的控制檯視窗中列印一個文字，然後我們將使用 node.js 執行該檔案。

要執行 JavaScript 檔案，請執行 node filename.js 命令。確保將 filename 替換為要執行的 JavaScript 檔名，如下所示。

node index.js

現在轉到 URL localhost:4000，你將在瀏覽器上看到它的輸出。

我們使用 send() 方法傳送的內容將顯示在螢幕上。這就是我們使用 node.js 和 express.js 在 Chrome 瀏覽器中建立和執行 JavaScript 檔案的方式。