JavaScript簡單程式設計例項學習

阿新 • • 發佈：2020-02-16

在 HTML 頁面中嵌入 JavaScript 指令碼需要使用 <script> 標籤，使用者可以在 <script> 標籤中直接編寫 JavaScript 程式碼，具體步驟如下。

第 1 步，新建 HTML 文件，儲存為 test.html。

第 2 步，在 <head> 標籤內插入一個 <script> 標籤。

第 3 步，為 <script> 標籤設定type="text/javascript"屬性。

現代瀏覽器預設 <script> 標籤的指令碼型別為 JavaScript，因此可以省略 type 屬性；如果考慮到相容早期版本瀏覽器，則需要設定 type 屬性。

第 4 步，在 <script> 標籤內輸入 JavaScript 程式碼：document.write("<h1>Hi,JavaScript!</h1>")；

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>第一個JavaScript程式</title>
  <script type="text/javascript">
    document.write("<h1>Hi,JavaScript!</h1>");
  </script>
</head>
<body></body>
</html>

新建 JavaScript 檔案

JavaScript 程式不僅可以直接放在 HTML 文件中，也可以放在 JavaScript 檔案中。

JavaScript 檔案是文字檔案，副檔名為.js，使用任何文字編輯器都可以編輯。新建 JavaScript 檔案的步驟如下。

第1步，新建文字檔案，儲存為 test.js。注意，副檔名為.js，它表示該文字檔案是 JavaScript 型別的檔案。

第2步，開啟 test.js 檔案，在其中編寫如下 JavaScript 程式碼。

alert("Hi,JavaScript!");

在上面程式碼中，alert() 表示 Window 物件的方法，呼叫該方法將彈出一個提示對話方塊，顯示引數字串 "Hi,JavaScript!"。

第3步，儲存 JavaScript 檔案。在此建議把 JavaScript 檔案和網頁檔案放在同一個目錄下。

JavaScript 檔案不能夠獨立執行，需要匯入到網頁中，通過瀏覽器來執行。使用 <script> 標籤可以匯入 JavaScript 檔案。

第4步，新建 HTML 文件，儲存為 test.html。

第5步，在 <head> 標籤內插入一個 <script> 標籤。定義 src 屬性，設定屬性值為指向外部 JavaScript 檔案的 URL 字串。程式碼如下：

<script type="text/javascript" src="test.js"></script>

第6步，儲存網頁文件，在瀏覽器中會彈出 “Hi,JavaScript!”

定義 src 屬性的 <script> 標籤不應再包含 JavaScript 程式碼。

如果嵌入了程式碼，則只會下載並執行外部 JavaScript 檔案，嵌入程式碼將被忽略。

執行 JavaScript 程式

瀏覽器在解析 HTML 文件時，將根據文件流從上到下逐行解析和顯示。

JavaScript 程式碼也是 HTML 文件的組成部分，因此 JavaScript 指令碼的執行順序也是根據 <script> 標籤的位置來確定的。

示例

使用瀏覽器測試下面示例，會看到 JavaScript 程式碼從上到下逐步被解析的過程。

<!DOCTYPE html>
<script>
  alert("頂部指令碼");
</script>
<html>
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <script>
    alert("頭部指令碼");
  </script>
</head>
<body>
  <h1>網頁標題</h1>
  <script>
    alert("頁面指令碼");
  </script>
  <p>正文內容</p>
</body>
<script>
  alert("底部指令碼");
</script>
</html>

以上就是本次給大家整理的全部相關知識點，希望能夠給大家帶來幫助。