pg电子试玩教程

書名： JavaScript前端開發(fā)與實例教程（微課視頻版）
作者名：崔仲遠(yuǎn)等
本章字?jǐn)?shù)： 497字
更新時間： 2023-09-08 19:27:32

1.3.3　在網(wǎng)頁中嵌入JavaScript代碼

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

1. 行內(nèi)嵌入

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

【例1-1】行內(nèi)嵌入JavaScript

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

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

圖1-8　【例1-1】運行結(jié)果

2. 內(nèi)部嵌入

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

【例1-2】內(nèi)部嵌入JavaScript

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

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

圖1-9　【例1-2】運行結(jié)果

3. 外部引入

CSS使用<link>標(biāo)簽鏈接外部樣式表，JavaScript使用<script></script>標(biāo)簽引入外部JavaScript文件。開發(fā)者首先新建外部JavaScript文件，然后在HTML文檔中使用<script></script>標(biāo)簽引入外部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文件具有維護性高、可緩存、方便擴展、復(fù)用性高等特點，在項目開發(fā)中使用較多。例1-3在Chrome瀏覽器中的運行結(jié)果，如圖1-10所示。

圖1-10　【例1-3】運行結(jié)果

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

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

1.3.3 在網(wǎng)頁中嵌入JavaScript代碼

1.3.3　在網(wǎng)頁中嵌入JavaScript代碼