不用充钱能兑话费的捕鱼

書名： JavaScript前端開發與實例教程（微課視頻版）
作者名：崔仲遠等
本章字數： 497字
更新時間： 2023-09-08 19:27:32

1.3.3　在網頁中嵌入JavaScript代碼

CSS有行內樣式表、內部樣式表和外部樣式表三種方式可以添加到HTML頁面中，類似地，JavaScript有行內嵌入、內部嵌入和外部引入三種方式添加到HTML頁面中。

1. 行內嵌入

行內嵌入是指在元素的事件屬性中直接添加JavaScript代碼。由于結構分離不夠徹底，不利于后期維護，復用性不強，因此本書不推薦使用。

【例1-1】行內嵌入JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>例1-1 行內嵌入JavaScript</title>;
</head>
<body>
   <button onclick="alert('我是行內JavaScript!')">點我</button>
</body>
</html>

例1-1在Chrome瀏覽器中的運行結果，如圖1-8所示。

圖1-8　【例1-1】運行結果

2. 內部嵌入

CSS使用<style></style>標簽為HTML文檔嵌入內部樣式表，JavaScript使用<script></script>標簽為HTML文檔嵌入JavaScript程序。開發者在HTML文檔中插入<script></script>標簽，然后在<script></script>標簽里面編寫JavaScript代碼。<script></script>標簽可以有任意多個。

【例1-2】內部嵌入JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>例1-2 內部嵌入JavaScript</title>
</head>
<body>
  <script>
   alert('我是內部嵌入JavaScript');
  </script>
</body>
</html>

例1-2在Chrome瀏覽器中的運行結果，如圖1-9所示。

圖1-9　【例1-2】運行結果

3. 外部引入

CSS使用<link>標簽鏈接外部樣式表，JavaScript使用<script></script>標簽引入外部JavaScript文件。開發者首先新建外部JavaScript文件，然后在HTML文檔中使用<script></script>標簽引入外部JavaScript文件。

【例1-3】外部引入JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>例1-3 外部引入JavaScript</title>
   <script src="js/demo.js"></script>
</head>
<body>
</body>
</html>

demo.js文件代碼，如下所示：

alert('我是外部JavaScript');

例1-3中，src屬性代表引入JavaScript文件的路徑。外部JavaScript文件具有維護性高、可緩存、方便擴展、復用性高等特點，在項目開發中使用較多。例1-3在Chrome瀏覽器中的運行結果，如圖1-10所示。

圖1-10　【例1-3】運行結果

官术网_书友最值得收藏!

JavaScript前端開發與實例教程（微課視頻版）

1.3.3 在網頁中嵌入JavaScript代碼

1.3.3　在網頁中嵌入JavaScript代碼