在HTML中使用JavaScript
1.script元素
要把JavaScript放到网页中，就不得不涉及web的核心语言——HTML，向HTML页面中插入JavaScript主要方法就是使用<script>元素，HTML4.01为<script>定义了下列6个属性。
1. async： 可选，表示应该立即下载脚本，但不妨碍页面中的其他操作，只对外部脚本文 件有效
2. charset： 可选，表示通过src属性指定的代码的字符集。
3. defer： 可选，表示脚本可以延迟到文档完全被解析和显示之后执行，只对外部脚本有效
4. language：已废弃，原本表示编写代码使用的脚本语言（如JavaScript、JavaScript1.2、VBScript），因为大多数浏览器会忽略此属性所以没有必要再用了
5. src：可选，表示包含要执行代码的外部文件，引入外部文件为必选属性
6. type：可选，可以看成是language的替代属性，表示编写代码使用的脚本语言的内容类型（也称为MIME类型），默认为text/javascript。
使用JavaScript元素的方式有两种：直接在页面中嵌入JavaScript代码和包含外部JavaScript文件。
比如说：
<script>
function sayHi(){
alert('Hi!')
}
sayHi();
</script>
包含在script元素内部的JavaScript代码会被从上而下依次解析，切记在script元素内部不要出现</script>。按照解析嵌入式代码的规则，当浏览器遇到</script>元素的时候会将其当作结束</script>标签。
<script>
function sayHi(){
alert('</script>'); // 会报错
alert('<\/script>'); // 使用\转义字符进行转义
}
sayHi();
</script>
如果要通过<script>标签引入外部JavaScript脚本，则src属性是必须的，这个src属性的值指向JavaScript文件的链接地址，例如：<script src = ‘outer.js’></script>。在这个例子中外部文件outer.js将被加载到当前页面中。外部文件只需包含通常要放在<script></script>内部的JavaScript代码即可。与解析嵌入式JavaScript代码一样，在解析外部js文件（包括下载）时，页面的处理也会暂时停止。
2.script标签的位置
按照传统的做法，所有的<script>标签的位置都应该放在<head>元素中，例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
<script src='.postcssrc.js'></script>
</head>
<body>
这里写内容
</body>
</html>
这种做法的目的就是把所有的外部文件（包括css文件）的引用都放在相同的地方，可是
在文档的<head>元素中包含所有的JavaScript文件，意味着必须等到全部的JavaScript代码都被下载、解析和执行完成之后才能开始呈现页面的内容（body标签内的内容），对于那些需要很多JavaScript代码的页面来说，这出现了很明显的延迟，在延迟的期间浏览器的窗口呈现的是一片空白，为了避免这个问题，现在的JavaScript的引入都放在了 </body>上面，页面内容的后面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
</head>
<body>
这里写内容
<script src='.postcssrc.js'></script>
</body>
</html>
这样，在解析包含JavaScript代码之前，页面的内容完全呈现在浏览器中。
3.延迟脚本
HTML4.01为<script>定义了defer属性，表示脚本可以延迟到文档完全被解析和显示之后执行，只对外部脚本有效，相当于告诉浏览器立即下载，但延迟执行。来个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
<script src='.postcssrc1.js' defer='defer'></script>
<script src='.postcssrc2.js' defer='defer'></script>
</head>
<body>
这里写内容
</body>
</html>
在这个例子中，我们虽然把<script>标签放在<head>标签中，但其中的脚本将延迟到页面渲染完毕之后会立即执行，由于很多浏览器会忽略这个属性，所以还是把script标签放在 </body>上面，页面内容的后面比较好。
4.异步脚本
HTML5为script定义了async属性，这个属性和defer属性类似，都是用于改变处理脚本的行为，同样只对外部引入JavaScript脚本生效，并告诉浏览器立即下载文件，但是与defer不同的async不保证他们的先后顺序的执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
<script src='.postcssrc1.js' sync></script>
<script src='.postcssrc2.js' sync></script>
</head>
<body>
这里写内容
</body>
</html>
在上面的代码中，第二个脚本文件可能会比第一个脚本文件先执行，因此两者之间互不依赖非常重要。指定sync属性的目的不是让页面等待两个脚本文件下载和执行，从而加载页面其他内容，建议异步脚本不要在加载期间修改dom。
注意：异步脚本一定会在页面的load事件之前执行，但可能会在DOMContentLoaded事件触发之前或者之后执行。
上一篇： 对js基础知识的一些理解
下一篇： 妈，起床吃饭了