大家好，欢迎来到IT知识分享网。
如何在HTML中使用JavaScript代码
在HTML插入
这个标签有留个属性可供自行选择使用。
- async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效
- src：可选。表示包含要执行代码的外部文件路径。
- type：可选。可以看成是language的替代属性；表示编写代码使用的脚本语言的内容类型（也称为MIME类型）。默认值为text/javaScript。
- charset：可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。
- defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7及更早版本对嵌入脚本也支持这个属性。
- language：已废弃。原来用于表示编写代码使用的脚本语言（如JavaScript、JavaScript1.2或VBScript）。大多数浏览器会忽略这个属性，因此也没有必要再用了。
使用方法
在页面中使用JavaScript有两种方法。
- 第一就是直接在script标签中嵌入JavaScript代码。
- 第二就是引入外部的JavaScript文件。
嵌入
嵌入时，一般在body的结束标签上一级创建script标签，然后在标签之中直接写进你需要的代码就好了。传统的应该是放在head标签的里面的。但是这样的话就需要等全部的JavaScript文件全部都要运行完毕才会执行页面元素，于是就把位置调整到了body标签里面，这样页面元素就可以更快的执行完，代开页面的速度就会显得更快。
<body>
<script type="text/javaScript">
...
...
</script>
</body>
这种方法是最简单的方法，但是一般在比较大的项目里面是不推荐使用这种方法的，一般都是使用引入外部文件。一来是代码混乱，不好维护代码。二来是代码不美观。
type属性现在不是强制要写上的，现在使用script标签可以直接使用，不用添加type属性也是可以的，引擎会自动识别添加。在标签的代码是从上往下执行运行的。在解释器对script元素内部的所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示的。
还有要注意的是，在script标签中任何地方都是不可以出现</script>字符串的，因为在引擎遇到字符串时会认为这是你的结束标签，直接跳出去不执行你下面的JavaScript代码了。需要使用</script>时就需要用到转义字符“ \ ”了。“<\/script>”,这样就可以正常的运行了。
<body>
<script type="text/javaScript">
function a(){
console.log("</script>"); // 抛出错误
}
function b(){
console.log("<\/script>"); // 正常运行
}
</script>
</body>
引入
用到引入的方法的，就必须要用到src的属性了，这个属性的属性值是指向外部JavaScript文件的路径。
<body>
<script type="text/javaScript" src="javaScript.js">
</script>
</body>
外部文件JavaScript.js就会被加载到当前文件之中。外部文件的内容和嵌入的内容也是一样的。
需要注意的是，引入外部文件时，也就是使用src属性时，script标签里就不需要再写JavaScript代码了，因为有是src属性生效时，只会下载并且运行外部文件的代码。忽略掉标签里的代码。而src更加强大的功能是可以引入外部域的JavaScript文件。
<body>
<script type="text/javaScript"
src="http://www.........javaScript.js">
</script>
</body
需要完整的URL，这样外部域的文件也能正常的在当前页面加载运行。引入外部域的文件要多加小心注意。因为文件的作者不知道会干出什么事情。
script标签是可以使用多个的，只要不存在defer和async属性，浏览器都会按照script元素在页面中出现的先后顺序对它们依次进行解析。顺序从是上往下执行，执行完第一个才会执行第二个。
延迟脚本
也就是使用defer属性。只对外部脚本文件有效。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer"
src="javaScript.js"></script>
<script type="text/javascript" defer="defer"
src="javaScript2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。简单来说就是页面加载时就下载文件，但是需要等到全部的文件加载完才会执行，也就是引擎运行到</html>时才会执行。HTML5的规范要求是要按照顺序来执行延迟脚本，但是在现实中有可能是会不按照顺序执行的，所以推荐使用延迟脚本时只是使用一个就可以了。
推荐的还是放在body标签里。
异步脚本
也就是使用async属性。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" async
src="javaScript.js"></script>
<script type="text/javascript" async
src="javaScript2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
同样与defer一样，async只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照指定它们的先后顺序执行。也就是说第二个文件可能会比第一个文件之前执行。所以，两个文件之间是最好不要用任何的关联。使用异步是为了页面不需要等待脚本加载，能同时运行。因此，在异步文件还在加载是最好是不要改变DOM元素。
理解解释不够全面、专业。可以自行查找相关资料查看。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/15194.html
