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

2013-3-4 | 发布者:www.sealiu.tk

我的笔记：

使用<script>元素的方式有两种；直接在页面中嵌入JavaScript代码和包含外部的JavaScript文件
还有一种方法就是直接在HTML元素中嵌入JavaScript代码，如：在HTML元素中的事件处理程序
在XHTML文档中，可省略</script>标签。如：<script ... .../>; 但是不能再HTML文档中使用这语法。不符合规范，IE不能正确解析。
※JavaScript内容类型（content-type）

Text：用于标准化表示文本信息

Multipart：用于连接消息体（可以是不同类型）的多个部分构成一个信息

Application：传输应用程序数据或者二进制数据

Message：用于包装一个E-mail消息

Image：用于传输静态图像数据

Audio：用于传输音频或者声音数据

Video：传输动态影像，可以是与音频编辑在一起的视频格式
来源：维基百科
带有src属性的<script>元素不应该在其标签之间包含有额外的JavaScript代码，即使有浏览器也会忽略。
另外通过src可以包含来自外部域的Js文件，即通过src指向整个完整URL，但是可能有恶意代码注入的风险。
只要不存在defer和async属性，浏览器就会按照<script>元素在页面中出现的先后顺序依次对他们进行解析。

7.1 如果async属性为true，则脚本会相对于文档的其余部分异步执行，这样的脚本会在页面继续解析的过程中执行。

7.2 如果async属性为false，而defer属性为true，则脚本会在完成解析时得到执行。

7.3 如果async，defer属性均为false，那么脚本会立即执行，页面会在脚本执行完毕后继续解析。

7.4 async和defer属性都只适用于外部脚本文件。
<noscript>内容</noscript>用以在不支持JavaScript的浏览器中显示替换内容。

情况：浏览器不支持脚本，

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

扩展阅读：

“JavaScript高级程序设计（第3版）学习笔记1——概述”
  在HTML中使用JavaScript的方式主要有：

使用<script>标签元素引入外部文件（推荐），将代码写入外部文件中。

使用<script>标签元素嵌入JavaScript代码。

直接在HTML中嵌入JavaScript代码，比如在HTML元素中的事件处理程序。

<script>标签元素：

async charset defer language src type

说明：

（1）外部文件

A、在XHTML文档中，导入外部文件时，可以使用简写方式<script/>但是在HTML中只能<script></script>。

B、导入外部文件时，src属性是必须的，这个时候嵌入在<script></script>中的代码（如果有）会被忽略。

C、src属性也可以指定来自外部域的JavaScript文件，这一点让<script>元素异常强大，也备受争议，因为可能会让人恶意注入脚本。

D、外部文件只需要包含<script></script>中的代码即可，不需要包括<script>元素本身；外部文件一般扩展名为.js，但这不是强制的。

（2）在<script>元素中内嵌代码时，只需要指定type属性，但代码中不能出现</script>字符串，否则会解析出错。例如：

<script type="text/javascript">    //document.writeln('</script>');会将字符串中的</script>作为前面的标签结束符来解析，从而出现异常    document.writeln('</scr'+'ipt>');//通过将</script>分开，从而避免作为<script>的结束标签解析
</script>

（3）关于type属性，虽然 text/javascript和java/ecmascript都已经不被推荐使用，但一直以来使用的都还是 text/javascript，实际上，服务器在传送JavaScript文件时使用的MIME类型通常是application/x- javascript，但在type中设置这个值可能导致脚本被忽略，另外，在非IE浏览器中还可以使用application/javascript和 application/ecmascript。type如果没有指定，默认值为text/javascript。

（4）只要不包含 async和defer，浏览器会按照<script>在页面中出现的顺序依次解析；设置了defer时，会立即下载<script>元素，但是延迟执行，在规范中，要求多个含defer属性的脚本顺序执行且在DOMContentLoaded事件前执行，但是在实现中不一定满足这些要求；在HTML5中添加了async属性，和defer类似，也只是适用于外部文件，告诉浏览器立即下载文件，但延迟执行，不同的是，多个含async的脚本即便在规范中也没有规定执行的顺序，异步脚本再load事件前执行，但可能在 DOMContentLoaded之前或之后执行。

（5）在阅读之前的代码或者用一些IDE生成代码时，常常可以看到下面的结构：

<script type="text/javascript">    //<![CDATA[// 这里首先是以//开始的JavaScript注释 // 然后<![CDATA[...]]>结构是XHTML（XML）的一个特殊区域，区域内的文本不需要做任何解析，以防止XHTML将代码中的类似小于号“<”的这种特殊符号解析为元素标签// 若不使用CDATA结构，则需要转义成相应实体，比如小于号（<）需要使用（<）// 对于不兼容XHTML的，由于最开始的//注释，也能够平稳退化//]]></script>

有些不支持JavaScript的浏览器，可以将JavaScript代码包含在一个HTML注释中（由于所有主流浏览器均支持JavaScript，所以不再推荐使用）：
<script></script>

对于一些老旧浏览器或者禁用了JavaScript的浏览器，还可以使用<noscript></noscript>元素来呈现相关的说明。

文档模式

在 IE5.5中开始引入文档模式的概念，通过使用通过文档类型（doctype）切换实现的，最初包括混杂模式（quirks mode）和标准模式（standards mode），混杂模式让IE的行为与包括非标准特性的IE5相同，标准模式则让IE的行为更接近标准行为。在IE引入文档模式之后，其他浏览器也纷纷仿效。之后，IE又提出一种所谓准标准模式（almost standards mode），这种模式下的浏览器特性有很多是符合标准的，但也不尽然。所有浏览器默认开启混杂模式。

可以通过下面的方法启动标准模式：

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

通过过渡性或框架集型来触发准标准模式：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 FrameSet//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 FrameSet//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

来源：linjisong