(HTML)- < script >參數用法與優缺點 — 學習筆記 ( 2 )
(HTML)- < script >參數用法與優缺點 — 學習筆記 ( 2 )
< script >參數與使用的方法。
一、HTML 引入 JavaScript 的方式
在學習 HTML < script > 語法之前，首先要知道在哪裡寫 JavaScript 才行。想要在 HTML 中引入 JavaScript，一般有 3 種方式。
1. 外部 JavaScript
2.內部 JavaScript
3.元素事件 JavaScript
JavaScript 的 3 種引入方式，實際上跟 CSS 的 3 種引入方式（外部樣式表、內部樣式表、行內樣式表）是非常相似的。對比理解一下，這樣更能加深記憶。
一、外部JavaScript
外部 JavaScript，指的是把 HTML 代碼和 JavaScript 代碼單獨放在不同檔中，然後在 HTML 文檔中使用 < script > 標籤來引入 JavaScript 代碼。
外部 JavaScript 是最理想的 JavaScript 引入方式。在實際開發中，為了提升網站的性能和可維護性，一般都是使用外部 JavaScript。
語法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--1、在head中引入-->
<script src="index.js"></script>
</head>
<body>
<!--2、在body中引入-->
<script src="index.js"></script>
</body>
</html>
說明：
在 HTML 中，我們可以使用 < script > 標籤引入外部 JavaScript 檔。在 < script > 標籤中，我們只需用到 src 這一個屬性。src，是“source（源）”的意思，指向的是檔路徑。
對於 CSS 來說，外部 CSS 文件只能在 head 中引入。不過對於 JavaScript 來說，外部 JavaScript 檔不僅可以在< head> 中引入，還可以在 < body > 中引入。
此外還需要注意一點，引入外部 CSS 檔使用的是 < link > 標籤，而引入外部 JavaScript 檔使用的是 < script > 標籤。
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--引入外部CSS-->
<link rel="stylesheet" type="text/css" href="index.css"/>
<!--引入外部JavaScript-->
<script src="js/index.js"></script>
</head>
<body>
</body>
</html>
分析：
<script src = ” js/index.js ” > 表示引入檔案名為 “ index.js ” 的 JavaScript 檔，其中檔的路徑是 “ js/index.js ” 。
優、缺點：( 優點多 )
1. 頁面代碼跟 JavaScript 代碼實現有效分離，降低耦合度 。
2. 便於代碼的維護和擴展 。
3. 有利於代碼的重覆使用 。
二、內部 JavaScript
內部 JavaScript，指的是把 HTML 代碼和 JavaScript 代碼放在同一個檔中。其中 JavaScript 代碼寫在 < script >< /script > 標籤對內。
語法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--1、在head中引入-->
<script>
……
</script>
</head>
<body>
<!--2、在body中引入-->
<script>
……
</script>
</body>
</html>
說明：
同樣的，內部 JavaScript 檔不僅可以在 <head > 中引入，也可以在 < body > 中引入。一般情況下，都是在 < head > 中引入。
實際上 < script >< /script > 是一種簡寫形式，它其實等價於：
< script type = "text/javascript" >
……
</script>
一般情況下，使用簡寫形式比較多。對於上面這種寫法，也需要瞭解一下，因為不少地方採用上面這種舊寫法。
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
document.write ( "綠葉學習網，給你初戀般的感覺~" ) ;
</script>
</head>
<body>
</body>
</html>
分析：
document.write() 表示在頁面輸出一個內容，可以先記住這個方法，以後會經常用到。
優、缺點：
優點：相對於使用行內 JavaScript，內部 JavaScript 代碼較為集中，與頁面結構的實現代碼耦合度較低，比較便於維護。
缺點：JavaScript 代碼僅限於當前頁面的使用，代碼無法被多個頁面重覆使用，導致代碼冗餘度較高。
三、元素屬性 JavaScript
元素屬性 JavaScript，指的是在元素的 “事件屬性” 中直接編寫 JavaScript 或調用函數。
舉例：在元素事件中編寫 JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="button" value="按鈕" onclick="alert( '綠葉學習，給你初戀般的感覺' )"/>
</body>
</html>
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title></title>
<script>
function alertMes()
{
alert( "綠葉學習網，給你初戀般的感覺" );
}
</script>
</head>
<body>
<input type = "button" value = "按鈕" onclick = "alertMes()"/>
</body>
</html>
分析：
alert() 表示彈出一個對話方塊，可以先記住這個方法，以後會經常用到。
對於在元素屬性中引入 JavaScript，可以簡單瞭解就行，先不需要記住語法。
優、缺點：( 缺點多 )
1. 這種方式跟頁面結構代碼耦合性太強，後期維護很不方便。
2. 在開發過程中會導致產生很多的冗餘代碼，因此在開發中使用，不推薦這種方式。
PS：下述兩個參數未來使用較高，可記
document.write()：在頁面輸出一個內容。
alert() ：表示彈出一個對話方塊。
免責聲明：
1.本影像檔案皆從網上搜集轉載，不承擔任何技術及版權問題。
2.如有下載連結僅供寬頻測試研究用途，請下載後在24小時內刪除，請勿用於商業。
3.若侵犯了您的合法權益，請來信通知我們，我們會及時刪除，給您帶來的不便，深表歉意。