我们知道，在一个网页中，由文本、样式及交互三部分组成，而JavaScript主要负责网页中的交互。那么如何在HTML页面中插入JavaScript呢？因为HTML5已经快速地被前端开发人员采用，所以为了遵循HTML5标准，这篇文章主要来介绍JavaScript如何在HTML中的使用，不会涉及到在XHTML中的用法。
一、<script>元素
向HTML页面中插入JavaScript，就是使用<script>元素。它有以下几个主要常用的属性：
- type:表示编写代码使用的脚本语言的内容类型，可以省略,表现形式是
type = "text/javascript"。
- defer:使用它相当于告诉浏览器立即下载，但是延迟执行，也就是说脚本延迟到整个文档完全被解析和显示完毕之后再执行，可以省略，表现形式是
defer = "defer"。它只适用于外部脚本文件，在HTML5中已经明确规定，因此支持HTML5的实现会忽略给嵌入脚本设置的defer属性。而且还有浏览器兼容等问题，所以把延迟脚本放在页面底部仍然是最佳选择。
- async:立即异步下载外部js，js下载完毕后立即执行，不影响页面其他的操作，可以省略，表现形式是
async = "async"。只有外部脚本文件可以使用,而且标记为async的脚本并不能保证按照指定它们的先后顺序执行，因此要确保两者之间不依赖。指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容，为此，建议异步脚本不要在加载之间修改DOM。
- src:表示包含要执行代码的外部文件，可以省略，表现形式
src = "main.js"。
二、引入JavaScript
在HTML中引入JavaScript有以下2两种方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>alert</title>
<script type="text/javascript">
alert("hello world！"); // 弹出消息框
</script>
</head>
<body>
</body>
</html>
- 引入外部JavaScript文件
<script src = "main.js"></script>
三、<script>元素的位置
按照传统的做法，所有<script>元素都应该放在页面的<head>元素中，这种做法的目的是想要把CSS、JavaScript等所有外部文件的引用都放在相同的地方，但是这样做有很大的弊端，必须等到所有的JavaScript代码都被下载、解析和执行完毕以后，才能开始呈现页面的内容，因为浏览器在遇到<body>标签时才开始呈现页面内容。如果页面有很多JavaScript代码的话，就会导致浏览器在呈现页面时出现明显的延时，所以为了避免这个问题，现代的web应用程序一般都会把JavaScript代码页面后面，即主要内容后面，</body>标签前面。
四、书写规范
- JavaScript和HTML、CSS一样，对空格、换行、缩进不敏感。
- 书写代码，语句结束时，分号和空格必须有一个，否则会报错,尽量分号和空格一起使用，提高可读性。
网友评论