如何在HTML中使用JavaScript——外部引入和内部嵌入

当我们想将js脚本放入网页中时，我们无一例外的总是会想到HTML。在如何使用JavaScript之前，我们需要先了解<script>元素，其定义了6个属性async：可选。表示应该立即下载脚本，但是不应妨碍页面中的其他操作。在XHMTL总，要将async设置为async=“async”。异步脚本一定在页面的load事件前执行，但可能会在DMOContenLoaded事件出发之前或...

Daisy_pj_a

31729人浏览 · 2019-08-09 16:05:33

Daisy_pj_a · 2019-08-09 16:05:33 发布

当我们想将js脚本放入网页中时，我们无一例外的总是会想到HTML。

在如何使用JavaScript之前，我们需要先了解`<script>`元素，其定义了6个属性

async：可选。表示应该立即下载脚本，但是不应妨碍页面中的其他操作。在XHMTL总，要将async设置为async=“async”。异步脚本一定在页面的load事件前执行，但可能会在DMOContenLoaded事件出发之前或之后执行。
charset：可选。表示通过src属性指定的代码的字符集
defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行，只对外部脚本有效。在XHTML文档中，要将defer属性设置为defer=“defer”
src：可选，表示要执行的代码的外部文件。
language：已废弃
type：可选。可选值为text/javascript，text/ecmascript、application/x-javascript.默认值为text/javascript

那么如何使用<script>元素呢？有两种方式

直接在页面中嵌入JavaScript代码

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript">
	function myFunction(argument) {
		alert("内部嵌入JavaScript代码")
	}
	</script>
</head>
<body>
</body>
</html>

注意：
（1）因为按照解析嵌入式代码的规则，当浏览器遇到字符串"</script>"时，就会认为那是结束的</script>标签。所以我们需要通过转义字符""解决这个问题。

<script type="text/javascript">
	function myFunction(argument) {
		alert("<\/script>")
	}
 </script>

包含外部JavaScript文件，通过script元素的src属性，这个属性指向外部JavaScript文件的链接

	<script type="text/javascript" src="example.js"></script>

在解析外部文件时，页面的处理会暂停。
带有src属性的script标签之间不应再出现js嵌入的代码。如果包含有将会被忽略。

注意：标签的位置

按照传统的做法，是将标签放在head标签下。但是这意味着必须等到全部js代码被下载、解析和执行完成以后才开始呈现页面内容（因为浏览器在遇到body标签时才开始呈现页面内容），这对于js代码很多的页面来说，无疑会造成页面显示的明显延迟，延迟期间页面一片空白。
所以为了避免这个问题，我们规定将所有的JavaScript代码放在<body>元素中页面内容的后面。如：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div>这里是页面内容，最后放JavaScript代码</div>
	<script type="text/javascript" src="example.js"></script>
</body>
</html>