JavaScript与HTML的结合方式
时间：2018-09-27 来源：未知
向HTML页面中插入JavaScript的主要方法，就是使用<script>元素。
script元素的属性：
async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载替他资源或等待加载其他脚本。只对外部脚本文件有效。
charset：可选。表示通过src属性指定的代码的字符集。
defer：可选。表示脚本可以延迟到文档完全被解析和显示之后在执行。只对外部脚本文件有效。
src：可选。表示包含要执行代码的外部文件。
type：可选。可以看成是language的替代属性，表示编写代码使用的脚本语言的内容类型。默认值以及通常情况下的使用值：text/javascript。
script元素的使用方式：
一：直接在页面中嵌入JavaScript代码。
二：包含外部JavaScript文件。
注意：
带有src属性的<script>元素不应该在其<script>和<script/>标签之间再包含额外的JavaScript代码。如果包含了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。另外通过<script>元素的src属性还可以包含来自外部域的JavaScript文件。
标签的位置：
传统做法：所有<script>元素都应该放在页面的<head>元素中。
缺点：对于那些需要很多JavaScript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口将会是一片空白。
现代做法：一般会把全部JavaScript引用放在<body>元素中页面内容的后面。
延迟脚本：
<script>标签多的defer属性，用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后在运行，因此，defer属性相当于告诉浏览器立即下载，但延迟执行。
defer属性只适用于外部脚本。
异步脚本：
HTML5为<script>元素定义了async属性。这个属性与defer属性类似，都用于改变处理脚本的行为。async属性只适用于外部脚本,并告诉浏览器立即下载文件。但标记为async的脚本并不保证按照指定它们的先后顺序执行。但指定async属性的目的是不让页面等待多个脚本下载和执行，从而异步加载页面其他内容。为此建议异步脚本不要在加载期间修改DOM。异步脚本一定会在页面的load事件前执行。
问题：并不是所有的浏览器都支持JavaScript？
解释：不支持的浏览器会把<script>元素的内容直接输出到页面中，因而会破坏页面的布局和外观。
解决方式：给脚本加上HTML注释。
原理：不支持JavaScript的浏览器会忽略<script>标签中的内容，而那些支持JavaScript的浏览器在遇到这种情况时，则必须进一步确认其中是否包含需要解析的JavaScript代码。但是现在所有的浏览器都已经支持JavaScript了，因此也没有必要再使用这种格式了。
引用外部文件的好处：
可维护性：可以再不触及HTML的情况下，集中精力编辑JavaScript代码。
可缓存 ：如果有多个页面都需要使用同一个文件，那么这个文件只需要下载一次。加快页面加载的速度。
适应未来：无需使用前面提到的注释hack。
<noscript>元素：
可以解决浏览器不支持JavaScript时，页面平稳地退化。
当出现以下情况之一时<noscript>中的内容才会呈现出来，否则永远也不会显示：
浏览器不支持JavaScript。
浏览器支持脚本，但脚本被禁用。
