JavaScript学习笔记——如何将JavaScript代码加入网页（＜script＞标签）

最新推荐文章于 2023-12-30 15:46:30 发布

Insomnia_X

最新推荐文章于 2023-12-30 15:46:30 发布

阅读量3.3k

点赞数 1

分类专栏： JavaScript学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/Insomnia_X/article/details/118633905

版权

JavaScript学习笔记专栏收录该内容

41 篇文章 2 订阅

订阅专栏

如何将JavaScript代码加入网页

如何将JavaScript代码加入网页？——使用<script>元素

HTML文件中包含众多元素，如<html>、<head>、<script>、<body>等
使用<script>标签将JavaScript代码添加到网页的<head>或<body>元素中

方法一：使用`<script>`将代码嵌入`<head>`元素中

这是常见的方式，能让代码更容易找到，但并非总是最佳方式

一般格式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Your HTML Page</title>
		<script>
			//JavaScript代码通常放在这里
		</script>
	</head>
	<body>
		//网页内容放在这里	
	</body>
</html>

将下面的内容输入到一个名为behavior.html的文件中，在浏览器中打开并加载，就能看到运行效果

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Just a Generic Page</title>
		<script>
			setTimeout(wakeUpUser, 5000);
			function wakeUpUser() {
				alert("Are you going to stare at this boring page forever?");
			}
		</script>
	</head>
	<body>
		<h1>Just a generic heading</h1>
		<p>Not a lot to read about here. I'm just an obligatory 
		paragraph living in an example in a JavaScript book. 
		I'm looking for something to make my life more exciting.</p>
	</body>
</html>

方法二：使用`<script>`将代码嵌入`<body>`元素中

也可以将代码内嵌在网页的<body>元素中(通常是最后)

这是更好的做法，因为浏览器加载网页时，将先加载<head>元素的所有内容，再加载<body>元素
如果将代码放在<head>中，用户可能必须等一会儿才能看到网页。如果将代码放在<body>的末尾部分，则用户等待这些代码加载时就能看到网页的内容。

还有更好的方法吗？请接着往下看

方法三：将代码放在独立的文件中，在`<head>`中链接该文件

使用<script>标签的src特性来指定JavaScript文件的URL

ps. CSS和JavaScript既可以放在网页中，也可将其放在独立的文件中，并在网页中包含该文件

放在外部文件中(独立于HTML)，代码更容易维护，还可用于多个网页
但这种方法也有缺点，那就是所有代码都将在网页的部分之前加载

还有更佳的方式吗？请继续往下看。

方法四：将代码放在独立的文件中，在`<body>`中链接该文件

这是鱼和熊掌兼得的最佳方式。既有一个独立且易于维护的JavaScript文件，又在网页末尾引用它，这样它将在网页加载完毕后再加载

具体做法：
将原来<script>标签中的JavaScript代码取出，原样放在code.js文件中
再在<script>开始标签中添加一个引用code.js的src特性

ps.此处假定code.js与原来的HTML文件位于同一个目录下

...
<body>
	<script src="somecode.js">//利用src特性连接到JavaScript文件
	
	//将原来的JavaScript代码取出，并放在“code.js”文件中
	//此时<script>元素中再包含任何Javascript代码
	
	</script>
</body>
...

注意：使用src特性引用独立的Javascript文件（.js）时
<script>标签内中不能再包含任何Javascript代码

此情况下，若想添加Javascript代码，必须使用另外的<script>标签

Insomnia_X

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记——如何将JavaScript代码加入网页（＜script＞标签）

如何将JavaScript代码加入网页如何将JavaScript代码加入网页？——使用<script>元素HTML文件中包含众多元素，如<html>、<head>、<script>、<body>等使用<script>标签将JavaScript代码添加到网页的<head>或<body>元素中方法一：使用<script>将代码嵌入<head>元素中这是常见的方式，能让代码更容易找到，
复制链接

扫一扫