HTML教程-将JavaScript代码添加到HTML
将JavaScript代码添加到HTML有以下三种方法：
- 在
<head>标签中包含JavaScript代码。 - 在
<body>标签内并在闭合body标签之后包含JavaScript代码。 - 在HTML中链接独立的JavaScript文件。
在<head>标签中包含JavaScript代码
在这种方法中，您可以将JavaScript代码放置在<head>和</head>标签之间。
语法
<html>
<head>
<script>
JavaScript代码
语句1
语句2
......
语句N
</script>
</head>
<body>
</body>
</html>在上述语法中，将<script>... </script>标签之间的JavaScript代码放置在HTML文件的<head>和</head>标签之间。
示例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>在head标签中添加JavaScript</title>
<script>
function check() {
/* 下面的语句用于在网页上显示一个带有括号中语句的确认对话框。 */
confirm("Your JavaScript Code Run");
}
</script>
<style>
/* 下面的标签选择器为按钮使用了不同的属性。 */
button {
background-color: red;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
color: white;
width: 100%;
opacity: 0.9;
}
/* 下面的标签选择器为鼠标悬停在按钮上时使用了透明度属性。 */
button:hover {
opacity: 1;
}
</style>
</head>
<body>
<form>
<!-- 下面的语句使用按钮类型，当单击该按钮时调用JavaScript函数。 -->
<button type="button" onclick="check()">点击我运行JavaScript代码</button>
</form>
</body>
</html>在<body>标签中包含JavaScript代码
在这种方法中，您可以将JavaScript代码放置在<body>和</body>标签之间。
语法
<html>
<head>
</head>
<body>
<script>
JavaScript代码
语句1
语句2
......
语句N
</script>
</body>
</html>在上述语法中，将<script>... </script>标签之间的JavaScript代码放置在<body>和</body>标签之间。
示例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>在body标签中添加JavaScript</title>
<style>
/* 下面的标签选择器为按钮使用了不同的属性。 */
button {
background-color: red;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
color: white;
width: 100%;
opacity: 0.9;
}
/* 下面的标签选择器为鼠标悬停在按钮上时使用了透明度属性。 */
button:hover {
opacity: 1;
}
</style>
</head>
<body>
<form>
<!-- 下面的语句使用按钮类型，当单击该按钮时调用JavaScript函数。 -->
<button type="button" onclick="check()">点击我运行JavaScript代码</button>
</form>
<script>
function check() {
/* 下面的语句用于在网页上显示一个带有括号中语句的确认对话框。 */
confirm("Your JavaScript Code Run");
}
</script>
</body>
</html>链接独立的JavaScript文件
在这种方法中，您可以创建一个独立的JavaScript文件，并通过<script>标签链接到HTML文件中。
语法
<html>
<head>
</head>
<body>
<script src="path_to_your_js_file.js"></script>
</body>
</html>在上述语法中，使用< script src="path_to_your_js_file.js" >标签将独立的JavaScript文件链接到HTML文件中。
示例
在HTML文件的同一目录下创建一个名为script.js的JavaScript文件，并将以下内容添加到该文件中：
function check() {
/* 下面的语句用于在网页上显示一个带有括号中语句的确认对话框。 */
confirm("Your JavaScript Code Run");
}然后，将以下代码添加到HTML文件中：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>链接独立的JavaScript文件</title>
<style>
/* 下面的标签选择器为按钮使用了不同的属性。 */
button {
background-color: red;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
color: white;
width: 100%;
opacity: 0.9;
}
/* 下面的标签选择器为鼠标悬停在按钮上时使用了透明度属性。 */
button:hover {
opacity: 1;
}
</style>
</head>
<body>
<form>
<!-- 下面的语句使用按钮类型，当单击该按钮时调用JavaScript函数。 -->
<button type="button" onclick="check()">点击我运行JavaScript代码</button>
</form>
<script src="script.js"></script>
</body>
</html>
