JS-01-在HTML中嵌入JavaScript代碼的三種方式
1.JavaScript概述
Web的組成有HTML、CSS還有即將要學習的JavaScript(簡稱JS)。
CSS和JS主要是服務於HTML，前者讓HTML更加美觀，后者能夠讓HTML動起來。
如果把HTML比作一只光禿禿的鳥的話，那么CSS就是鳥的羽毛，JS就是讓鳥能夠飛起來的肌肉。
2.在HTML中嵌入JavaScript代碼的第一種方式
JS是一門事件驅動型的編程語言，依靠事件去驅動，然后執行對應的程序。
在JS中有很多事件，其中有一個事件就叫做：鼠標單擊，click。並且任何事件都會對應一個事件句柄，onclick。
注意：事件和事件句柄的區別是：事件句柄是在事件單詞前面加一個on，且事件句柄是以HTML標簽的屬性存在的。
第一種方式：以事件句柄的方式。
2.1通過事件句柄的方式嵌入JS代碼
下面編寫程序，實現一個按鈕，當點擊時，彈出一個對話框，顯示“Hello JS!”
在JS中有一個內置的對象叫做window，全部小寫，可以直接拿來使用。【window代表的是瀏覽器對象】
window對象有一個函數叫做alert，可以實現彈窗，用法是：window.alert("message");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在HTML中嵌入JavaScript的第一種方式</title>
</head>
<body>
<input type="button" value="點擊" onclick="window.alert('Hello JS')">
<-- JS中的字符串可以使用單引號，也可以使用雙引號 -->
<-- <input type="button" value="點擊" onclick='window.alert("Hello JS")'> -->
</body>
</html>
思考：onclick="JS代碼"，執行原理是什么？
- 當頁面打開時，js代碼不會執行執行，只是把這段JS代碼注冊到按鈕的click事件上去了，當這個按鈕發生click事件后，注冊在onclick后面的JS代碼會被瀏覽器自動調用。
注意：JS中的一條語句結束之后可以使用分號“；”，也可以不使用。
<input type="button" value="點擊" onclick="window.alert('Hello JS');">
<input type="button" value="點擊" onclick="window.alert('Hello JS')">
2.2可以在一個事件句柄中寫多條JS語句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在HTML中嵌入JavaScript的第一種方式</title>
</head>
<body>
<input type="button" value="點擊" onclick="window.alert('Hello JS')
window.alert('Hello Web')
window.alert('Hello World')">
<!-- window可以省略不寫 -->
<input type="button" value="點擊" onclick="alert('Hello JS')
alert('Hello Web')
alert('Hello World')">
</body>
</html>
3.在HTML中嵌入JavaScript代碼的第二種方式
3.1通過內部腳本塊的方式嵌入JS代碼
類似於CSS中的內部樣式表，JavaScript也可以在HTML代碼中編寫腳本代碼塊。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌入JS的第二種方式</title>
</head>
<body>
<input type="button" value="點擊打開" />
<!-- 第二種方式：內部腳本塊的方式 -->
<!-- 暴露在腳本塊中的JS程序，不需要觸發事件，打開頁面的同時執行JS代碼，且遵循自上而下的順序。-->
<script type="text/javascript">
window.alert("Hello World")
window.alert("Hello JS")
</script>
<input type="button" value="打開" />
</body>
</html>
3.2腳本塊可以出現多次且位置隨意
另外，javascript的腳本塊在一個頁面中可以出現多次，且出現位置也沒有要求。
<script type="text/javascript">
window.alert("頂部腳本塊")
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌入JS的第二種方式</title>
<script type="text/javascript">
window.alert("頭部腳本塊")
</script>
</head>
<body>
<input type="button" value="點擊打開" />
<!-- 第二種方式：內部腳本塊的方式 -->
<!-- 不需要事件觸發，打開頁面的同時執行JS代碼，且遵循自上而下的順序。-->
<script type="text/javascript">
window.alert("Hello World")
window.alert("Hello JS")
</script>
<input type="button" value="打開" />
</body>
</html>
<script type="text/javascript">
window.alert("腳部腳本塊")
</script>
3.3alert函數會阻塞整個HTML頁面的加載
alert函數會阻塞整個HTML頁面的加載，直到點擊確定。
3.4JavaScript的注釋書寫格式
JS的注釋書寫格式與java一樣。
<script type="text/javascript">
//單行注釋
/*
多行注釋
*/
window.alert("Hello World")
window.alert("Hello JS")
</script>
而java有獨特的javadoc注釋。
這里的注釋信息會被javadoc.exe工具解析提取生成幫助文檔。
/**
*
* @return 返回值
*/
public static int dosome(){
return 3;
}
4.在HTML中嵌入JavaScript代碼的第三種方式
類似於CSS的外部樣式表，我們也可以將JavaScript的代碼放到一個外部的后綴名為.js的文件中去。
這種方式也是推薦使用的。
4.1通過引入外部js文件的方式嵌入JS代碼
js文件：
alert("Hello JS")
alert("Hello World")
html文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌入JS的第三種方式</title>
</head>
<body>
<!-- 在需要的地方引入js腳本文件 -->
<script type="text/javascript" src="js/1.js"></script>
</body>
</html>
引入外部獨立的js文件時，js文件中的代碼會遵循自上而下的順序逐行執行：
4.2同一個js文件可以被引入多次。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌入JS的第三種方式</title>
</head>
<body>
<!-- 在需要的地方引入js文件 -->
<script type="text/javascript" src="js/1.js"></script>
<script type="text/javascript" src="js/1.js"></script>
</body>
</html>
但實際開發中這種需求很少。
4.3引入js文件時，能否在script標簽內再編寫js代碼，會執行嗎？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌入JS的第三種方式</title>
</head>
<body>
<!-- 在需要的地方引入js文件 -->
<script type="text/javascript" src="js/1.js">
alert("內部代碼塊")
</script>
</body>
</html>
由結果來看，不會執行。
4.4引入js文件后，能否再編寫另外的js腳本塊呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌入JS的第三種方式</title>
</head>
<body>
<!-- 在需要的地方引入js文件 -->
<script type="text/javascript" src="js/1.js"></script>
<!-- <script type="text/javascript" src="js/1.js">
alert("內部代碼塊")
</script> -->
<script type="text/javascript">
alert("內部代碼塊2")
</script>
</body>
</html>
由結果來看，可以。