您的位置：首页 > Web前端 > JavaScript

JS高级程序设计（1-3章笔记）

2014-09-19 07:49 190 查看
第一章 JavaScript简介

1.1 JavaScript简史
1995.02-
公司：Netscape
主要人物：就职于Netscape的Brendan Eich(布兰登.艾奇)
事件：为Netscape Navigator 2开发一种名为LiveScript的脚本语言
1995.02-前夕
公司：Netscape
事件：临时将LiveScript改名为JavaScript
1995.02+
JavaScript1.0获得巨大成功
1996.08
公司：微软
IE3加入名为JScript的JavaScript实现
1997
组织：ECMA
事件：以JavaScript1.1为蓝本的建议被提交给欧洲计算机制造商协会（ECMA），ECMA-262诞生。
1998
组织：国家标准化组织和国际电工委员会（ISO/IEC）
事件：ISO/IEC采用ECMAScript作为标准，即ISO/IEC-16262
1.2 JavaScript实现​
说明：JavaScript的含义比ECMAScript包含的要多。

核心（ECMAScript）

文档对象模型（DOM）

浏览器对象模型（BOM）



1.2.1 ECMAScript
说明：ECMAScript-262没有参照WEB浏览器

语法

类型

语句

关键字

保留字

操作符

对象

1. 版本

ECMAScript第一版：本质上与Netscape JavaScript1.1相同（针对浏览器的部分除外）

ECMAScript第二版：主要是班级加工的结果，没有任何增删改。

ECMAScript第三版：标志着ECMAScript成为一门真正的语言

字符串处理

错误定义

数值输出

正则表达式

新控制语句

try-catch

国际化

ECMAScript第四版：正式发布前被废弃

强类型变量

新语句

新数据结构

真正的类

经典继承

数据交互新方式

ECMAScript第五版：ECMAScript3.1，在第三版的基础上进行小幅修改

澄清第三版中已知的歧义

增添新的功能

原生JSON对象（用于解析和序列化JSON数据）

继承的方法

高级属性定义

严格模式

对引擎解释和执行代码进行补充说明

2. 什么是ECMAScript兼容
基本 定义：

支持ECMA-262

支持Unicode字符标准

扩展定义：

标准中没有规定的新对象和对象的心新属性

修改扩展内置的正则表达式语法

3. WEB浏览器对ECMAScript的支持



1.2.2 文档对象模型（DOM）
1. 为什么要使用DOM
问题：IE4和Navigator4支持不同形式的DHTML，需要加以控制。
解决：负责制定Web通信标准的W3C开始着手规划DOM.
2. DOM级别
注意：DOM0级表准不存在，只是一种参照说法，指IE4和Na4最初支持的DHTML
DOM1: 映射文档的结构


DOM Core: 如何映射基于XML的文档结构

DOM HTML： 扩展添加针对HTML的对象和方法

DOM2: 扩充鼠标用户界面事件、范围、遍历等，增加对CSS的支持


DOM视图： 定义跟踪不同文档视图的接口；

DOM事件: 定义事件和事件处理的接口；

DOM样式： 定义基于CSS应用样式接口

DOM遍历和范围： 定义遍历和操作文档树的接口


DOM3: 引入以统一方式加载和保存文档的方法，开始支持XML1.0规范


3. 其他DOM标准 （W3C推荐）

SVG1.0(可伸缩矢量图)

MathML1.0(数学标记语言)

SMIL(同步多媒体集成语言)

4. WEB浏览器对DOM的支持



1.2.3 浏览器对象模型（BOM）
基本：

处理浏览器和框架；

扩展：

弹出新浏览器窗口的功能；

移动、缩放和关闭浏览器窗口的功能；

提供浏览器详细信息的navigator对象；

提供浏览器所加载页面的详细信息的location对象；

提供用户分辨率详细信息的screen对象；

对cookies的支持；

像XMLHttpRequest和ActiveXObject这样的自定义对象；

1.3 JavaScript版本（Netscape/Mozilla）



第二章 在HTML中使用JavaScript
2.1 <script>元素
历史： 由Netscape创造并在Netscape Navigator 2中首先实现。之后被加入HTML规范。
元素（HTML4.01）: 6个，全部非必需

async： 异步方式下载脚本

charset： 使用src属性指定的字符集，大多数浏览器会忽略这个值，很少用

defer: 立即下载，但 延迟到文档被完全解析和显示之后（遇到</html>）执行。只对外部文件有效

language: 使用的脚本语言，已废弃

src：执行代码的外部文件

type: 默认死type/javascript

使用方式：

直接嵌入：指定type属性，js代码中不能出现'</script>'

包含外部文件：src属性必需，可以跨域，不能混合嵌入代码，在xhtml中可以自闭合（不推荐）

2.1.1 标签的位置
惯例：<head>元素中（浏览器遇到<body>标签时才会开始呈现内容，因而会有延迟）
推荐：<body>元素中页面的内容后面
2.1.2 延迟脚本
方式：

<script type="text/javascript"defer></script> ----HTML

<script type="text/javascript"defer="defer"></script> ----XHTML

规范行为（HTML5）：

脚本会延迟到浏览器遇到</html>标签后再按照出现的顺序执行，但都先于DOMContentLoaded事件触发前执行；

只适用于外部脚本文件；

现实行为：

延迟的脚本不一定会在DOMContentLoaded事件触发前执行，也不一定按照顺序执行，为了避免加载顺序的混乱，建议只有一个defer脚本；

IE4-IE7支持对嵌入脚本的defer属性，IE8等支持HTML5实现的浏览器则会忽略这个属性。

2.1.3 异步脚本 (HTML5)
方式：


<script type="text/javascript" async></script> ----HTML

<script type="text/javascript" async="async"></script> ----XHTML

行为：
只是用外部文件；

立即异步下载，页面不会等待下载完毕和执行；

不保证顺序，因此确保异步脚本之间彼此不依赖；

页面load事件前执行，DOMContentLoaded事件之前或之后；

支持情况：
2.1.4 在XHTML中的用法（可以跳过这一节，因为HTML5标准正快速占领市场）
错误方式：<(小于号)在XHTML中被当作开始一个新标签来解析。



正确方式

方式一： 使用HTML实体替代尖括号（比如<替换<）



方式二：CData片段+JavaScript注释



2.1.5 不推荐使用的语法（早期）



2.2 嵌入代码与外部文件
外部文件优点

可维护性

可缓存（复用）

适应未来： HTML和XHTML包含的外部文件的语法相同

2.3 文档模式（IE提出，其它效仿）
注意：主要影响css呈现，某些情况下也会影响js。
类型：

混杂模式： 不推荐，如果不适用hack技术，不同浏览器差异可能非常大

<!--在文档开始处没有文档类型声明，所有浏览器默认开启混杂模式-->


标准模式： 行为相对一致

<!-- 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">

<!-- XHTML 1.0 -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<!-- 框架集型 -->

<!-- HTML 4.01 -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01  Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

<!-- XHTML 1.0 -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Frameset   //EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


2.4 <noscript>元素： 不支持JS的浏览器平稳退化的方式


用法： <body>中的任何标签中都可以使用
行为： 下列情况下浏览器才会显示其中的内容



浏览器不支持脚本；

浏览器支持脚本但脚本被禁用；

2.5 小结
第3章 基本概念
3.1 语法
3.1.1 区分大小写

3.1.2 标识符

第一个字母：    字母、_、$​

其它字母：     字母、_、$、数字

驼峰大小写格式（ECMAScript惯例但不强制）


3.1.3 注释
3.1.4 严格模式
启用方式

在整个脚本中启用

//在顶部添加

"use strict"


指定某些函数在严格模式下执行

function doSomething(){

"use strict"

//函数体

}


行为特点

在ECMAScript 5中开始支持严格模式

严格模式下ECMAScript3的一些不确定行为将会处理

某些不安全的操作会抛出错误

3.1.5 语句

1. 分号结尾（不推荐省略分号）

避免不完整的输入；

可以放心地通过删除多余的空格来压缩ECMAScript代码；

在某些情况下会增进性能；

2. 代码块使用{}(可以省略的情况下也不推荐省略)

编码意图更加清晰；

降低修改代码时出错的几率；

3.2 关键字和保留字
关键字(26)
breakcasecatchcontinuedebugger*default
deletedoelsefinallyforfunction
ifininstanceofnewreturnswitch
thisthrowtrytypeofvar void
whilewith
保留字（第三版全部+第五版let、yield）(31​)

abstractbooleanbytecharclassconst
debuggerdoubleenumexportextendsfinal
floatgotoimplementsimportintinterface
longnativepackageprivateprotectedpublic
shortstaticsupersynchronizedthrowstransient
volatile​
保留字（第五版 严格模式 8）

classconstenumextendssuperexportimport
保留字（第五版 严格模式 额外施加限制的部分）

implementspackagepublicinterfaceprivateprotectedletstaticyield
3.3 变量

特点：松散类型（可以保存任何类型的数据）
使用：


1. 局部变量

//函数内部定义+var

function test(){

var message = "hi";//函数退出时销毁

}


2. 全局变量

/*

*函数外部定义+var

*/

var message = 'hi';

/*函数内部定义+省略var(不推荐)+赋值

*只要调用一次test函数，globalVar就有了定义，就可以在函数外部的任何地方被调用

*严格模式下给未经声明的变量赋值会抛出ReferenceError错误

*/

function test(){

globalVar = "hi";

}


注意：

可以使用一条语句定义多个变量，初始化和不初始化均可；

//通过换行和缩进提高可读性

var message = "hi",

found = false,

age = 29;


在严格模式下，不能定义名为eval或arguments的变量，否则会导致语法错误

3.4 数据类型
基本数据类型（简单数据类型）（5）

UndefinedNullBooleanNumberString
复杂数据类型（1）
Object
3.4.1 typeof操作符
说明：检测给定变量的数据类型，返回字符串
注意：

null被认为是一个空对象；

函数是特殊的对象，typtof对函数和普通对象进行了区分；

Sfari 5-、Chrome 7-在对正则表达式调用typeof是返回"function"，其它返回"Object"

使用：

var message = "some string";

alert(typeof message);//变量或直接量都可以


返回值：

未声明"undefined"
布尔值"boolean"
字符串"string"
数值"number"
对象或null"object"
函数“function”
3.4.2 Undefined类型（派生自Null）
两种情况：


//1.    声明后默认取得undefined

var message;

//2    下面这个变量没有声明

//var age;


//不同点：两种变量从技术角度看有本质区别

alert(message);//"undefined"

alert(age);//产生错误


//相同点：无论哪种变量都无法执行有意义的操作

alert(typeof message);//"undefined"

alert(typeof age);//"undefined"


3.4.3 Null类型



特点： 只有一个值（null）得数据类型
null: 空对象指针



var car = null;

alert(typeof car);//"object"


使用： 如果定义的变量将来用来白村对象，最好将该变量初始化为null,方便判断该变量是否已经保存了一个对象的引用

if(car != null){
//执行体
}
null和undefined:

联系：

alert(null == undefined);//true


区别：无论在什么情况下都没有必要把一个变量的值显式设置为undefined，同样的规则对null不适用。

3.4.4 Boolean类型
两个字面值: true和false区分大小写
各种类型转换为Boolean类型：





3.4.5 Number 类型
特点：使用IEEE754格式来表示整数和浮点数（双精度数值），存在舍入误差
整数分类：在进行计算时都被转成十进制计算

十进制

八进制（在严格模式下不支持）：第一位必须为0

十六进制 ：前两位必须是0x

1. 浮点数值（最该精度17位小数）
写法

var floatNum1 = 1.1;

var floatNum2 = .1;//表示0.1,不推荐

var floatNum3 = 1.;//表示1.0，会被解析为整数1，不推荐

var floatNum4 = 3e-2;//0.03，科学记数法，小数点后带有6个0以上会被自动转为科学记数法表示


2. 数值范围

最小数

Number.MIN_VALUE(5e-324)

最大数

Number.MAX_VALUE(1.7976931348623157e+308)

查出范围的值（无法继续参与运算）

-Infinity(负无穷) Infinity(正无穷)
或
Number.NEGATIVE_INFINITY(负无穷) Number.POSITIVE_INFINITY(正无穷)
检测数值是否有效

var result = NUmber.MAX_VALUE+Number.MAX_VALUE;

alert(isFinate(result));    //false


3. NaN（Not a Number）

特点：

任何涉及NaN的操作都返回NaN;

NaN和任何值都不想等，包括其本身

alert(NaN == NaN);//false


isNaN(val) ----检测一个值是否是NaN

4. 数值转换（非数值->数值）

任何类型->数值： Number()



字符串->整数： parseInt()

字符串->浮点数： parseFloat()

3.4.6 String类型
说面： 用于表示由零个或多个16位Unicode字符组成的字符序列
注意：以单引号开头必需以单引号结尾，双引号亦。
1. 字面直接量



2. 字符串的特点

不可变的

3. 转换为字符串
toString(): null和undefined以外的所有数据类型都包含该方法

非数字调用toString()： 没有参数

数字调用toString(): 可以传递一个参数，指定输出任意有效进制格式的字符串

var num =10;

alert(num.toString());//"10"

alert(num.toString(2));//"1010"

alert(num.toString(8));//"12"

alert(num.toString(10));//"10"

alert(num.toString(16));//"a"


String(): 不知道要转换的值是不是null和undefined的情况下使用

有toString()方法直接调用；

值是null，返回“null”;

值是undefined，返回"undefined"；

val+"": 隐式调用toString()
3.4.7 Object 类型
注意：ECMA-262不负责定义宿主对象，因此BOM和DOM中的宿主对象可能会也可能不会继承Object。
Object的每个实例都具有下列属性和方法：

Constructor： 保存着用于创建当前对象的函数；

hasOwnProperty(propertyName): 用于检查传入的对象是否是另一个对象的原型；

propertyIsEnumerable(propertyName): 用于检查给定的属性能否使用for-in枚举；

toLocaleString(): 返回对象的字符串表示，该字符串与执行环境的地区对应；

toString(): 返回对象的字符串表示

valueOf(): 返回对象的字符串、数值或布尔值表示。通常与toString()方法的返回值相同。

3.5 操作符
3.5.1 一元操作符（只能操作一个值）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航