JS代码编写的位置

最新推荐文章于 2023-12-11 19:18:37 发布

mc096

最新推荐文章于 2023-12-11 19:18:37 发布

阅读量910

点赞数

分类专栏： JavaScript基础文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47325706/article/details/124019119

版权

JavaScript基础专栏收录该内容

10 篇文章 1 订阅

订阅专栏

1.在head标签里

在head标签里添加script

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//编写js代码
		</script>
	</head>
	<body>
	</body>
</html>

注意：

在HTML head部分中的JavaScripts会在被调用的时候才执行。
浏览器解析html是从上到下的。

如果把javascript放在head里的话，则先被解析,但这时候body还没有解析，所以会返回空值。一般都会绑定一个监听，当全部的html文档解析完之后，再执行代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				//执行的代码
			}
		</script>
		
	</head>
	<body>
	</body>
</html>

2.在body标签里

编写完html标签后在添加script

在HTML body部分中的JavaScripts会在页面加载的时候被执行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<script type="text/javascript">
			
		</script>
	</body>
</html>

3.在外部js文件中编写

在外部新建js文件编写js代码，并通过script引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/1.js"></script>
		
	</head>
	<body>
	</body>
</html>

写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制，是比较推荐使用的写法

需要注意的是：script一旦由于引入外部文件，就不能再编写代码了，即便编写了浏览器也会忽略
如果需要则可以再编写一个script标签

4.将js代码编写到标签的onclick属性中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button onclick="alert('点我干嘛')">点我一下</button>
	</body>
</html>

点击按钮时js代码才会执行
虽然可以写在标签的属性中，但是他们属于结构与行为耦合，不方便维护，不推荐使用

5.将js代码写在超链接的href属性中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="javascript:alert('点我干嘛');">点我一下</a>
	</body>
</html>

与button标签一样需要点击才会执行代码

还可以将其设为点击无反应，用于处理一些事物

<a href="javascript:;">你也点我</a>

mc096

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS代码编写的位置

1.在head标签里在head标签里添加script<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //编写js代码 </script> </head> <body> </body>&
复制链接

扫一扫