JavaScript高级程序设计学习笔记——第二章在HTML中使用JavaScript-CSDN博客

本文链接：https://blog.csdn.net/paul617/article/details/47280839

今天来到“高3 ”的第二章，在HTML中使用JavaScript，也就是我们平时开发最常用的模式了。

`<script>`元素

在HTML4.01中为<script>元素添加了6个属性，其中1个language被废弃了，其他属性都是可选属性，也就是说，一个不带任何属性的<script></script>也是合法的。

async:立即下载脚本，不应妨碍页面上其他操作（即下载该外部脚本不阻塞页面）
charset：大部分浏览器会忽略其值，所以别用了
defer:脚本延时文档完全被解析和显示之后再执行
language:已废弃
src:最常用的外部文件引入方式
type:不需要设置，默认属性还是text/javascript

所以一般会有2种方式，一种是在HTML内部的JavaScript脚本，直接使用<script> 代码段 </script>，不需要添加任何属性，包括type属性；另一种是引入外部文件，最简洁的方式是<script scr="xxx.js"></script>，另外可以根据需要设置async和defer属性来决定脚本是否异步加载或者是延时加载。

需要注意的是如果不设置async和defer属性，浏览器会按照<script>元素在页面出现的先后顺序依次解析。所以若不同的脚步存在依赖关系（比如jQuery插件依赖jQuery）则需要注意脚本的顺序。

标签的位置

传统做法放到<head>中，但是由于浏览器会因为加载脚本而阻塞，所以都放到<body>元素中页面内容的后面。（浏览器在遇到<body>时才开始呈现内容）。

延迟脚本

脚本被延迟到整个页面解析完毕后（这个不是很理解，解析完毕是指window.onload但是又和后面的DOMContentLoaded事件触发前执行矛盾，代查找资料）运行，设置defer属性后立即下载，延迟执行。（在规范中，多个延迟脚本会按照顺序执行，会在DOMContentLoaded事件触发前执行，但实际情况下，上面说的规范就没用了全是不一定！）

<script defer="defer" src="example.js"></script>

异步脚本

脚本异步加载，不会阻塞页面，注意异步脚本一定在页面load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行。

<script async="async" src="example.js"></script>

JavaScript在XHTML中用法

虽然没用过XHTML，不过了解一下也好，记录一下几点：

XHTML（Extensible HyperText Markup Language）是将HTML作为XML的应用而定义的一个标准
代码规则更严格，如在<script>中使用<（小于号）会被当做开始一个新标签来解析
解决方案
- 用HTML实体（<)替换
- 在支持XHTML浏览器中，引入CData片段：<![CDATA[ ... ] ]>
- 在不支持XHTML浏览器中，加入JavaScript注释//

<script>
// <![ CDATA [
                ...
// ]]>

</script>

嵌入代码与外部文件

最好使用外部文件来包含JavaScript代码，优点：
- 可维护性：JavaScript与HTML分离
- 可缓存：多页面使用同一JavaScript文件，只需下载一次
- 适应未来：对XHTML和HTML而言包含外部文件的语法相同

文档模式

也就是最开头的<DOCTYPE>指定的，目前文档模式有三种：混杂模式（quirks mode）、标准模式（standards mode）和准标准模式（almost standards mode）。

准标准模式下很对特性都会按照浏览器标准去解析（当然，不是所有），文档开始处如果没有发现文档类型声明，则默认是混杂模式。混杂模式不值得推荐，目前大部分网站用的都是标准模式。

以前一直不清楚doctype怎么写，不过好消息是，在Html5中，对于文档类型已经统一，直接写法是即可，非常简单明了。再来看看过去复杂的标准：

触发标准模式:

<!-- HTML 4.01 严格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 严格型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- HTML 5 -->
<!DOCTYPE html>

触发准标准模式:

<!-- HTML 4.01 过渡型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!-- HTML 4.01 框架集型 -->
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<!-- XHTML 1.0 过渡型 -->
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- XHTML 1.0 框架集型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

`<noscript>`元素

在<noscript>元素中的内容在下列情况中显示

浏览器不支持脚本
浏览器支持脚本，但脚本被禁用

小结

在html中使用JavaScript，外部文件src指向脚本url，可以是本地资源，也可以跨域。两个属性，defer延时，async异步加载不阻塞页面。