JavaScript学习笔记1：JavaScript学前介绍
主要根据图书《JavaScript高级程序设计（第3版）
》
1、JavaScript是一种专门与网页交互而设计的脚本语言，由下列三个不同的部分组成：
1）ECMAScript，由ECMA-262定义，提供核心语言功能；
2）文档对象模型(DOM) ,提供访问和操作网页内容的方法和接口；
3）浏览器对象模型（BOM），提供与浏览器交互的方法和接口。
现状：
JavaScript 的这三个组成部分，在当前5个主要浏览器(IE, Firefox, Chrome, Safari 和Opera)中都得到了不同程度的支持。其中，所有浏览器对 ECMAScript 第 3 版的支持大体上都还不错，而对ECMAScript 5 的支持程度越来越高，但对DOM的支持则彼此相差比较多。对已经纳入 HTML5 标准的 BOM 来说，尽管各浏览器都实现了某些众所周知的共同特性，但其他特性还是会因浏览器而异。
2、在HTML中使用JavaScript
1）在HTML页面中执行JS的3中方法
嵌入执行（2种方法）：
<body>
<a href="javascript:alert('运行JavaScript!');">运行 JavaScript</a>
<script type="text/javascript">
alert("直接运行的JavaScript!");
</script>
</body>
导入外部js文件：
<script src="test.js" type="text/javascript"></script>
这个时候标签内就不要再嵌入JS代码，
导入外部JS的时候，嵌入的代码会被忽略。
3、需要注意的
把JavaScript插入到HTML页面中要使用<script
>元素。使用这个元素可以把JavaScript嵌入到页面中，也可以包含外部JS文件。
1）包含外部JavaScript文件时，必须将src属性设置为指向响应文件的URL。而这个文件可以是与它的页面位于同一服务器的文件，也可以是其他任何域中的文件。
2）所有<script>元素都会按照它们在页面中出现的先后顺序依次被解析。在不适用 defer 和async 属性的情况下，只有在解析完前面<script>元素中的代码之后，才会开始解析后面<script>元素中的代码。
3）由于浏览器会先解析完不适用defer 属性的<script>元素中的代码，然后再解析后面的内容，所以一般应该吧<script>元素放在页面最后，即主要内容后面，</body>标签前面。
4）使用 defer 属性可以让脚本在文档完全呈现后再执行。延迟脚本总是按照指定它们的顺序执行。
5）使用 async 属性可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。
另外， 使用<noscript>元素可以指定在不支持脚本的浏览器中显示的替代内容。但在启用了脚本的情况下，浏览器不会显示<noscript>元素中的任何内容。
4、<script>元素 HTML4.01为<script>定义了6个属性，全是可选，language已废弃
1）type ：考虑到约定俗成和最大限度的浏览器兼容性，还是text/javascript 。其实标准来说有好几个其他值
2）src ：表示包含要执行代码的外部文件
3）charset：表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值。
4）language：已废弃，原来用于标识编写代码使用的脚本语言(如JavaScript、JavaScript1.2、VBScript)
5）defer：表示脚本可以延迟到文档完全被解析和显示之后再执行，只对外部脚本文件有效。
6）async：可选，表示应该立即下载脚本，但不应妨碍页面中的其他操作，如下载其他资源或等待加载脚本。支队外部脚本有效。
注意1：
在<script>嵌入JS代码是，不要在代码中的任何地方出现"</script>"字符串，浏览器加载时会产生错误，会认为那是结束的</script>标签，如下文：
<script type="text/javascript">
function sayScript(){
alert("</script>");
}
</script>
但是通过转义字符"\"可以解决这个问题
<script type="text/javascript">
function sayScript(){
alert("<\/script>");
}
</script>
注意2：
XHMTL可以容忍省略</script>，但HTML文档不行。
5、
XHTML代码的规则
比HTML严格得多，如
1）< 和> 直接a < b 会报错，要改写成实体编码< 还可以
2）用 <![CDATA[...这里是不需要的任意格式的文本内容...]]> 语法包裹内容 。有时候还配合注释使用
//<![CDATA[
...这里是不需要的任意格式的文本内容...
//]]>
3）在XHTML格式中，要把defer属性设置为 defer="defer" ,async也一样
6、<noscript>元素
当浏览器不支持JavaScript时，如何让页面平稳退化。
<!DOCTYPE html>
<html>
<head>
<title>ceshi</title>
</head>
<body>
<noscript>
<p>本页面需要浏览器支持(启用)Javascript</p>
</noscript>
</body>
</html>
不推荐使用的(为了让不支持 <script> 标签的浏览器能隐藏嵌入的JavaScript代码：
<script><!--
alert("Hi");
//--></script>
Chrome测试代码：
|
<!DOCTYPE html>
<html>
<head>
<title>ceshi</title>
</head>
<body>
<noscript>
<p>本页面需要浏览器支持(启用)Javascript</p>
</noscript>
<script><!--
alert("Hi");
//--></script>
</body>
</html>
|
正常时：
禁用当前页面JS后：
7、文档模式
从IE5.5开始，引入了“文档模式”的概念，这个概念是通过使用文档类型(doctype)切换来实现的，后来其他浏览器也纷纷效仿。
最初的两周文档模式是：混杂模式、标准模式。混杂模式让IE的行为与（包含非标准特性的）IE5相同，而标准模式则让IE的行为更接近标准行为。
这两种模式主要影响CSS的呈现，也会影响JS的解释执行。现阶段，开发前端代码，声明文档模式，让浏览器以适当的模式去解析，是有必要的。
详情参见：
http://www.w3school.com.cn/tags/tag_doctype.asp
<!DOCTYPE> 声明
Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。
HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。