脚本标签 - Javascript (1)

📌 相关文章

📜 脚本标签 - Javascript (1)

📅 最后修改于: 2023-12-03 15:27:42.555000 🧑 作者: Mango

脚本标签 - Javascript

脚本标签是一种在HTML文档中嵌入脚本的方法，常用的脚本语言之一是Javascript。通过Javascript脚本，我们可以实现动态的HTML效果，响应用户交互事件，以及和后端服务器交互等功能。

使用脚本标签

在HTML文档中，我们可以使用<script>标签嵌入Javascript代码。代码可以直接写在<script>标签内部，也可以放在外部文件中以src属性引用。下面是一个简单的例子：

<!DOCTYPE html>
<html>
<head>
	<title>脚本标签 - Javascript</title>
</head>
<body>
	<h1>点击按钮显示当前时间</h1>
	<button onclick="alert(new Date())">查看时间</button>
	<script>
		// 这里放Javascript代码
		console.log('Hello, world!');
	</script>
</body>
</html>

在上面的例子中，我们通过<button>标签做了一个交互效果，当用户点击"查看时间"按钮时，会弹出一个提示框，显示当前系统时间。这个效果就是通过在<button>标签上设置onclick属性，并将一段Javascript代码作为属性值来实现的。

编写Javascript代码

Javascript语法与C、Java等语言有些差别，但是基本的编程概念和技巧都是相通的。下面是一个简单的Javascript函数，它会在网页上显示"Hello, world!"：

function sayHello() {
	alert('Hello, world!');
}

例如，我们可以将这个函数与HTML中的交互事件绑定，实现在点击按钮时调用。

<button onclick="sayHello()">Say Hello</button>
<script>
function sayHello() {
	alert('Hello, world!');
}
</script>

在HTML中引用外部Javascript文件

如果我们要编写复杂的Javascript程序，粘贴到HTML文档中并不是最佳的选择。实际上，我们可以将Javascript代码放到一个独立的.js文件中，然后通过<script>标签的src属性引用即可。下面是一个例子：

在index.html中：

<!DOCTYPE html>
<html>
<head>
	<title>外部Javascript文件</title>
	<script src="main.js"></script>
</head>
<body>
	<h1>欢迎来到我的网站</h1>
	<p>这是一个演示使用外部Javascript文件的例子。</p>
</body>
</html>

在main.js中：

// 这是一个Javascript文件
console.log('这是一个外部Javascript文件！');

总结

脚本标签是一种在HTML文档中嵌入脚本的方法，常用的脚本语言之一是Javascript。通过Javascript脚本，我们可以实现动态的HTML效果，响应用户交互事件，以及和后端服务器交互等功能。我们可以在HTML文档中嵌入Javascript代码，也可以将Javascript代码放在外部文件中引用。对于更复杂的Javascript程序，这种代码分离方式会更方便管理和维护。