HTML中如何添加JavaScript代码
将JavaScript添加到HTML
可以通过以下三种方式将JavaScript代码添加到HTML文档中:
在<head>...</head>标记中包含JavaScript代码。
在<Body>...</Body>标记之间以及在body标记关闭之后添加JavaScript代码。
用HTML链接JavaScript的单独文件
在<head>标记中包含JavaScript代码。
在本节中，您将学习在<head>和</head>标签之间包含JavaScript代码。
语法
<html>
<head>
<script>
JavaScript代码
Statement 1
Statement 2
......
Statement N
</script>
</head>
<body>
</body>
</html>
在上面的语法中，在
<script> ...之间编写的JavaScript代码。 </script>标记放在HTML文件的 <head>和</head>标记之间。
示例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
在头标记中包含JavaScript
</title>
<script>
function check()
{
/* 以下语句用于在网页上显示“确认”对话框，该语句括在方括号中。 */
confirm("运行您的JavaScript代码");
}
</script>
<style>
/* 以下标记选择器按钮为Button使用不同的属性。 */
button {
background-color: red;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
color: white;
width: 100%;
opacity: 0.9;
}
/* 下面的标签选择器悬停在Button上使用opacity属性，当您将鼠标悬停在其上时，它会选择按钮。 */
button:hover {
opacity: 1;
}
</style>
</head>
<body>
<form>
<!-- 以下语句使用Button类型，该类型用于在单击此按钮时调用JavaScript函数。-->
<button type="button" onclick="check()"> 单击我以运行JavaScript代码 </button>
</form>
</body>
</html>
输出:
2、在<body>标签中包含JavaScript代码。
在本节中，您将学习如何在<body>和</body>标记之间包含JavaScript代码。
语法
<html>
<head>
</head>
<body>
<script>
JavaScript代码
Statement 1
Statement 2
......
Statement N
</script>
</body>
</html>
在以上语法中，<script>......</script>标记之间编写的JavaScript代码。 放在HTML<body>和</body>标记之间。
示例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
在正文标签中包含JavaScript
</title>
<style>
/* 以下标记选择器按钮为Button使用不同的属性。 */
button {
background-color: red;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
color: white;
width: 100%;
opacity: 0.9;
}
/* 下面的标签选择器悬停在Button上使用opacity属性，当您将鼠标悬停在其上时，它会选择按钮。 */
button:hover {
opacity: 1;
}
</style>
</head>
<body>
<form>
<script>
function bdy_JS ()
{
/* 以下语句用于在网页上显示“确认”对话框，该语句括在方括号中。 */
confirm("运行您在Body标签中使用的JavaScript代码");
}
</script>
<!-- 以下语句使用Button类型，该类型用于在单击此按钮时调用JavaScript函数。 -->
<button type="button" onclick="bdy_JS()">单击“我”以运行JavaScript代码</button>
</form>
</body>
</html>
输出:
3、在<body>标记后添加JavaScript代码。
在本节中，您将学习在<body>标记后添加JavaScript代码。
语法
<html>
<head>
</head>
<body>
</body>
<script>
JavaScript代码
Statement 1
Statement 2
......
Statement N
</script>
</html>
在以上语法中，<script>......</script>标记之间编写的JavaScript代码。 放在HTML<body>和</body>标记之后。
示例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
在body标签之后包含JavaScript代码
</title>
<style>
/* 以下标记选择器按钮为Button使用不同的属性。*/
button {
background-color: red;
color: white;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
padding: 16px 20px;
opacity: 0.9;
}
/* 下面的标签选择器悬停在Button上使用opacity属性，当您将鼠标悬停在其上时，它会选择按钮。 */
button:hover {
opacity: 1;
}
</style>
</head>
<body>
<form>
<!-- 以下语句使用Button类型，该类型用于在单击此按钮时调用JavaScript函数。 -->
<button type="button" onclick="bdy_JS()"> 单击“我”以运行JavaScript代码 </button>
</form>
</body>
<script>
function bdy_JS ()
{
/* 以下语句用于在网页上显示“确认”对话框，该语句括在方括号中。 */
confirm("Your JavaScript 您的JavaScript代码运行，在Body标记之后使用");
}
</script>
</html>
输出:
用HTML链接JavaScript的单独文件
在本节中，您将学习将JavaScript代码文件包含在HTML文件中。
语法
<html>
<head>
<script src="Name_of_JavaScript_file>
</script>
</head>
<body>
</body>
</html>
在以上语法中，
src 是<script> 标记的属性， 用于指定JavaScript文件的名称。
示例
以下代码是用JavaScript（inc）编写的，并由
.js 扩展名保存。
function funcjs ()
{
/* 以下语句在网页上显示一个“确认”对话框，该语句括在方括号中。 */
confirm("您的JavaScript代码运行，在Body标记之后使用。");
}
以下代码编写在HTML文件中，该文件使用<script> 标记中的src属性指定上述JavaScript文件。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
在HTML文件的head标签中包含JavaScript文件
</title>
<script src="inc.js">
</script>
<style>
/* 以下标记选择器按钮为Button使用不同的属性。*/
button {
background-color: red;
color: white;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
padding: 16px 20px;
opacity: 0.9;
}
/* 下面的标签选择器悬停在Button上使用opacity属性，当您将鼠标悬停在其上时，它会选择按钮。 */
button:hover {
opacity: 1;
}
</style>
</head>
<body>
<form>
<!-- 以下语句使用Button类型，该类型用于在单击此按钮时调用JavaScript函数。 -->
<button type="button" onclick="funcjs()"> 单击以运行JavaScript代码 </button>
</form>
</body>
</html>
输出:
