JavaScript（核心、BOM、DOM）

JavaScript是基于对象和事件驱动的客户端脚本语言。有如下特点：

• 交互性
• 安全性（不可以直接访问本地硬盘）
• 跨平台性（只要是可以解析js的浏览器都可以执行，和平台无关）

1、JavaScript和Java不同！ ①所属：NetScape和Sun ②基于对象和面向对象 ③JS可以直接解析执行，Java需先编译在运行 ④JavaScript是一种弱类型的语言，Java是强类型的语言。

2、JavaScript的实现包括以下3个部分：

1）核心（ECMAScript）：描述了JS的语法和基本对象。

2）文档对象模型 ☆（DOM）：处理网页内容的方法和接口

3）浏览器对象模型（BOM）：与浏览器交互的方法和接口

ECMAScript扩展知识：

① ECMAScript是一个标准，JS只是它的一个实现，其他实现包括ActionScript。

② “ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力……”，即ECMAScript不与具体的宿主环境相绑定，如JS的宿主环境是浏览器，AS的宿主环境是Flash。

③ECMAScript描述了以下内容：语法、类型、语句、关键字、保留字、运算符、对象。

3、在HTML中使用JavaScript

1）在

标签内部直接编写JS代码

2）通过script标签的src属性直接引入外部js文件

注意：若以上两种方式同时存在，则标签内部定义的JS代码不会被执行。

JS核心

4、JS的数据类型（☆）

在JS中使用var关键词声明变量，变量的类型会根据其所赋值来决定。JS中数据类型分为原始数据类型（5种）和引用数据类型（Object类型）。

1）5种原始数据类型：Undefined、Null、Boolean、Number和String。需要注意的是JS中字符串属于原始数据类型。

2）typeof运算符：查看变量类型，对变量或值调用typeof运算符将返回下列值之一：

• undefined – 如果变量是 Undefined 类型的
• boolean – 如果变量是 Boolean 类型的
• number – 如果变量是 Number 类型的
• string – 如果变量是 String 类型的
• object – 如果变量是一种引用类型或 Null 类型的

3）通过instanceof 运算符解决引用类型判断问题

4）JS中对类型的定义：一组值的集合。如Boolean类型的值有两个：true、false。Undefined和Null 类型都只有一个值，分别是undefined和null。

5）null 被认为是对象的占位符，typeof运算符对于null值返回“object”。

6）原始数据类型和引用数据类型变量在内存中的存放如下：

5、局部变量和全局变量

在函数中声明的变量只能在函数中使用，当你退出函数时，变量就会被释放，这种变量被称为局部变量。因为每个局部变量只在各自的函数中有效，所以你可以在不同的函数中使用名称相同的变量。

如果在函数之外声明变量，那么页面中所有的函数都可以使用它。在全局变量被声明后，它们就开始生效了。在网页被关闭后，变量才会失效。

注意：JS语言中，在代码块中声明的变量属于全局变量。

6、数组（两种创建方式）

1）var arr = [123,”abc”,true,null]

2）var arr = new Array(4); //创建数组长度为4的数组

var arr = new Array(123,”abc”,true,null);//等同于1）

注意：

①js中，数组元素类型可以不一致。

②js中，数组长度可以动态改变。

③接着上述代码，typeof arr 和 arr instanceof Array 分别输出object和true。

7、函数

特点：关键字function；无需指定返回值类型；参数列表声明不需var关键字；无函数重载；函数内部可以直接调用arguments数组（隐式定义），该数组存储了实参列表；函数名代表一种引用类型，可用（函数名 instanceof Function）测试；打印函数引用会输出整个函数定义。

8、动态函数和匿名函数

1）动态函数是通过js的内置对象Function定义。形式为：new Function(arg1 , arg2)，由于arg1和arg2为变量，所以可以动态指定。如：

var run = new Function(“x,y”,”return x+y;”);

2）匿名函数：没有函数名，形如：var run = function(x,y){return x+y;};

注：打印动态函数的引用可以发现动态函数也是匿名函数。

9、JS对象（需要new一个对象）

1）String对象，方法分为两类：①与Html有关的 ②同java中的String相似的。具体查文档。

2）Array对象，一些常用方法：

• concat() 同String的concat()方法。
• join() 同String的split()方法相反。
• pop()、push() 同栈中的弹栈、压栈。
• sort() 对数组元素排序。

3）Date对象

getTime()、Date.parse(dateString)方法返回时间戳。

钟表例子：在body中加入onload=”startTime();”则可以在#div_1块中动态显示当前时间

1 2 3 4 5 6 7 8

function startTime(){     var date = new Date();     var h = date.getHours();     var m = date.getMinutes();     var s = date.getSeconds();     document.getElementById("div_1").innerHTML=h+" : "+m+" : "+s;     setTimeout("startTime()",500); }

4）Math对象，主要是一些静态方法，常用的有random()、ceil(x)/floor(x)/round(x)方法。

5）RegExp对象：该对象代表正则表达式，用于字符串匹配

① 两种RegExp对象创建方式：

方式一，new 一个RegExp对象：var regExp = new RegExp(“[a-zA-Z0-9]{3,8}”);

方式二，通过直接量赋值：var regExp = /^[a-zA-Z0-9]{3,8}$/;

② 正则表达式的具体写法使用时查询文档。

③ 常用方法：test(string)，返回true或false。

10、全局函数

encodeURI / decodeURI：编码解码URI

进行url跳转时可以整体使用encodeURI

encodeURIComponent / decodeURIComponent：编码解码URI组件

传递参数时需要使用encodeURIComponent

escape / unescape：对字符串进行unicode编码

isNaN：检查某个值是否为NaN（Not a Number，非数字）

parseInt、parseFloat：将字符串解析为整数和浮点数

eval：计算JS字符串，并把它作为脚本代码来执行。

BOM（浏览器对象模型）

11、BOM（浏览器对象模型）

1）window对象：浏览器中打开的窗口

① 如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

② window.frames 返回窗口中所有命名的框架

③parent是父窗口（如果窗口是顶级窗口，那么parent==self==top）

top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe）

self是当前窗口（等价window）

opener是用open方法打开当前窗口的那个窗口

④与消息框有关的方法：alert(String)、confirm(String)、prompt(String)

⑤两种定时器：setTimeout(code,latency) 和 setInterval(code,period)

注：setTimeout只执行一次code，如果要多次调用，可以让code自身再次调用setTimeout()；setInteval()会不停地调用code，直到clearInterval()被调用。

2）location对象：包含当前URL信息。重点掌握location对象的href属性，用于设置或返回完整的URL。

3）history对象：主要是back()/forward()和go()方法，几乎用不到。


转载：（东风化宇 2014年08月05日 于 Flyne 发表）