首页 > WEB开发 > 前端开发 > JavaScript(核心、BOM、DOM)
2014
08-05

JavaScript(核心、BOM、DOM)

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

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

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

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

1)核心(ECMAScript):描述了JS的语法和基本对象

2)文档对象模型 ☆(DOM):处理网页内容的方法和接口

3)浏览器对象模型(BOM):与浏览器交互的方法和接口

three parts of JS

ECMAScript扩展知识:

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

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

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

3、在HTML中使用JavaScript

1)在<script></script>标签内部直接编写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)原始数据类型和引用数据类型变量在内存中的存放如下:

memory of datatype in js

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块中动态显示当前时间

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,非数字)

parseIntparseFloat:将字符串解析为整数和浮点数

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()方法,几乎用不到。


JavaScript(核心、BOM、DOM)》有 1 条评论

  1. 希梦 说:

    基础知识很全面,值得一看

留下一个回复

你的email不会被公开。