JavaScript 入門

Created: October-14, 2018

在本教程中，你將學習如何製作支援 JavaScript 的網頁。

JavaScript 入門

在這裡，你將瞭解使用 JavaScript 向網頁新增互動性是多麼的容易。但是，在開始之前，請確保你具有 HTML 和 CSS 的一些工作知識。

好吧，讓我們開始使用最流行的客戶端指令碼語言。

將 JavaScript 新增到你的網頁

通常有三種方法可以將 JavaScript 新增到網頁中：

在一對 <script> 和 </script> 標記之間嵌入 JavaScript 程式碼。
使用 .js 擴充套件建立外部 JavaScript 檔案，然後通過 <script> 標記的 src 屬性將其載入到頁面中。
使用特殊的標記直接放置 JavaScript 程式碼的 HTML 標記內屬性，例如 onclick ， onmouseover ， onkeypress ， onload 等。

以下部分將詳細描述每個過程：

嵌入 JavaScript 程式碼

你可以將 JavaScript 程式碼直接嵌入到網頁中，方法是將它們放在 <script> 和 </script> 標記之間。該 <script> 標籤表明所包含的陳述被解釋為可執行指令碼，而不是 HTML 瀏覽器。這是一個例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Embedding JavaScript</title>
</head>
<body>
    <script>
    var greet = "Hello World!";
    document.write(greet); // Prints: Hello World!
    </script>
</body>
</html>

上例中的 JavaScript 程式碼只是在網頁上列印文字訊息。你將在後續章節中瞭解每個 JavaScript 語句的含義。

注意： 自 HTML5 起不再需要 <script> 標記的 type 屬性(比如 <script type="text/javascript">)。JavaScript 是 HTML5 的預設指令碼語言。

呼叫外部 JavaScript 檔案

你還可以將 JavaScript 程式碼放入帶 .js 副檔名的單獨檔案中，然後通過標記的 src 屬性在文件中呼叫該檔案 <script> ，如下所示：

<script src =" js/hello.js "> </script>

如果你希望多個文件可以使用相同的指令碼，這將非常有用。它可以避免你一次又一次地重複相同的任務，並使你的網站更容易維護。

好吧，讓我們建立一個名為 hello.js 的 JavaScript 檔案，並將以下程式碼放入其中：

// A function to display a message
function sayHello() {
    alert("Hello World!");
}

// Call function on click of the button
document.getElementById("myBtn").onclick = sayHello;

現在，你可以使用 <script> 標記在網頁中呼叫此外部 JavaScript 檔案，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Including External JavaScript File</title>        
</head>
<body>    
    <button type="button" id="myBtn">Click Me</button>
    <script src="js/hello.js"></script>
</body>
</html>

注意： 通常在第一次下載外部 JavaScript 檔案時，它會儲存在瀏覽器的快取中（就像影象和樣式表一樣），因此不需要從構成網頁的 Web 伺服器多次下載它載入速度更快。

將 JavaScript 程式碼內聯放置

你也可以將 JavaScript 程式碼內嵌通過使用特殊標記直接將其插入 HTML 標記中的屬性，如 onclick ， onmouseover ， onkeypress ， onload 等。

但是，你應該避免將大量 JavaScript 程式碼內聯，因為它會使用 HTML 混亂你的 HTML 並使你的 JavaScript 程式碼難以維護。這是一個例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inlining JavaScript</title>        
</head>
<body>    
    <button onclick="alert('Hello World!')">Click Me</button>
</body>
</html>

上面的示例將在單擊按鈕元素時顯示警告訊息。

提示： 你應始終將網頁（即 HTML）的內容和結構與展示（CSS）和行為（JavaScript）分開。

指令碼在 HTML 文件中的定位

<script> 元素可以被放置在 <head> ，或 <body> HTML 文件的部分。但理想情況下，指令碼應放在正文部分的末尾，就在結束 </body> 標記之前，它會使你的網頁載入速度更快。

每個 <script> 標記都會阻止頁面呈現過程，直到它完全下載並執行 JavaScript 程式碼，這將顯著影響你的網站效能。

提示： 你可以 <script> 在單個文件中放置任意數量的元素。但是，它們按照它們在文件中出現的順序從上到下進行處理。