核心Javascript教程（二）

来源：互联网发布：网易足球数据库编辑：程序博客网时间：2024/05/17 08:19

5. 数组

5.1.创建数组(2种方式)

1). [ ]

var arra = [ 1,"t", {

t : "aa"

},function() {

alert("----");

} ];

2). new Array()

arra =new Array(1,"t", {

t : "aa"

},function() {

alert("----");

});

5.2.访问数组中的元素

通过下标index去访问

//alert(arra[1]);

//arra[3]();

5.3.数组的类型

typeof
instanceof

//1). typeof

//alert(typeof arra); //object

//2). instanceof

//alert(arra instanceof Array);

5.4.添加和更新数组元素

arra[0] = 2;

//alert(arra[0]);

arra[5] ="kk";

//alert(arra[5]);

//alert(arra[4]); //undefined

5.5.删除数组元素

delete arra[0];

//alert(arra[0]); //undefined

5.6.扩展:

js中数组元素也可不以index存取,而以字符串key存取

arra['tt'] = "abc";

alert(arra['tt']);

6. 对象

6.1.创建对象

1).使用{}(比较数组)

var obj = {

name : "abruzzi",

age : 26,

birthday : new Date(1984, 4, 5),

addr : {

street : "Huang Quan Road",

xno : "135", //属性

getStreet : function(){returnthis.street}//方法

}

};

//alert(obj.addr.street);

//alert(obj.addr.getStreet());

2). new构造函数创建

a.系统的

obj =new Object();

obj.name ="xfzhang";

obj.age = 21;

obj.getAge =function(){returnthis.age};

//alert(obj.getAge());

b.自定义的

function Person(name, age) {

this.name = name;

this.age = age;

this.getAge =function(){returnthis.age};

}

var p =new Person("Kity", 23);

p.setAge =function(age){this.age = age}; //给对象动态的添加了一个方法

p.setAge(13);

//alert(p.getAge());

6.2.相关概念的理解

1).对象:

JavaScript对象其实就是属性的集合,具有确定性，无序性和互异性

obj = {

tt : "abc",

tt : function() {

alert("---");

}//将前面的tt属性给覆盖了

};

//alert(obj.tt);

2).对象的属性:

可以动态的添加和删除,且其值可以指向任意类型的数据

obj.test ="bb"

//alert(obj.test);

obj.test =2;

//alert(obj.test);

delete obj.test;

//alert(obj.test);

3).对象的方法:

当对象的属性指向的是一个函数时,一般会称之为方法

obj.test =function() {

//alert("-----");

};

obj.test();

obj.test =function() {

//alert("++++");

};

obj.test();

4).全局对象:

js执行的宿主环境一般会提供一个全局对象(浏览器端window)

//alert(window);

//alert(window==this);

//alert(window instanceof Window);

5).全局变量/全局函数:

全局对象的属性(在函数外面定义的变量)

//Person("BB", 12);

//alert(window.name);

alert(name);

6.3.对象的constructor属性

1). constructor是一个指向用来创建当前对象的构造函数的引用

2). 它指向创建对象的构造方法

//alert(p.constructor);

//alert(window.age);

//alert(p.constructor("mm", 12));

//alert(window.age);

Person("BB", 12);

//alert(window.age);

6.4. 内建对象(构造器函数)

1).数据封装类对象

1.1). Object :所有对象(构造器)的父级对象

toString()

var o =new Object();

o = {};

//alert(o==o.toString());

o.toString =function() {

return"my object"

};

//alert(o);

1.2). Array:数组

sort()
reverse()
push()
pop()

var arr =new Array(620,'61b','62a');

//alert(arr.reverse());

//alert(arr.sort());

//alert(arr);

//arr.push(9);

//alert(arr);

//arr.pop();

//alert(arr);

1.3). Function: 函数

1.3.1).prototype属性

1.它指向一个对象

2. 它只有在该函数被用作构造器时才会发挥作用

3. new出每个对象都自动拥有propotype的引用(__proto__),并可以将其当做自身的属性来使用

var p2 =new Person("JAck", 13);

Person.prototype.height = 13;

alert(p2.height);

Person.prototype = "ttt";

Person: ox23

Function对象

(包含代码)

prototype:”ttt”

object对象

name=Jack

age=13

__proto__:ox12

height=13

var some_obj = {

name : 'TT'

};

function F() {

};

//alert(F.prototype);

//alert(new F().name);

F.prototype = some_obj;

//alert(new F().name);

function Person(name, age) {

this.name = name;

this.age = age;

}

var p1 =new Person("Tom",12);

Person.prototype.height = 12;

//alert(p1.height);

var p2 =new Person("Jack", 13);

//alert(p2.height);

//alert(p2.__proto__.height);

//alert(p2.__proto__==Person.prototype);

Person.prototype = {weight:120};

//alert(p2.height);

var p3 =new Person("dd", 23);

//alert(p3.weight);

1.3.2). length属性:得到定义的参数个数

//alert(f.length); //区别于arguments

1.3.3). apply(obj, array)方法:

将当前函数应用到指定的对象上去执行,如果没有指定对象则为window

function Product(name, price) {

this.name = name;

this.price = price;

}

function Toy(name, price) {

Product.apply(this, arguments);

this.category ='toy';

}

Toy.prototype =new Product();

var f =new Toy("Tom", 12);

//alert(f);

1.3.4). call(obj, args)方法:

function Food(name, price) {

Product.call(this, name, price);

//this.Product(name, price)

//this.name = name;

///this.price = price;

this.category ="food";

}

Food.prototype =new Product();

var f =new Food("cat", 12);

//alert(f.toString());

1.4). String: 包装字符串的对象

toUpperCase()
toLowerCase()
charAt()
indexof()

1.5). Number: 包装数值的对象

1.6). Boolean: 包装boolea值的对象

2).工具类对象

2.1). Math: 包含一些数据计算的static方法

//alert(Math.random());

//alert(Math.min(1, 2));

2.2). Date: 日期时间对象

//alert(new Date());

2.3). RegExp: 正则表达式对象

正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串

var reg=new RegExp("^\\d{6,8}$");

reg = /^\d{6,8}$/;

//alert(reg.test("123123222"));

//alert(reg.test("12312a"));

3).错误类对象

3.1). Error

7. BOM与DOM

7.1.什么是BOM?

BOM是browser object model的缩写，简称浏览器对象模型
BOM提供了独立于内容而与浏览器窗口进行交互的对象
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C
BOM最初是Netscape浏览器标准的一部分

7.2.什么是DOM?

DOM= Document Object Model，文档对象模型， DOM 是 W3C（万维网联盟）的标准。DOM定义了访问 HTML和 XML文档的标准：独立于平台和语言的接口. W3C DOM标准被分为 3个不同的部分：

核心 DOM -针对任何结构化文档的标准模型
Node
     Document
     Element
     Attriubute
     Text
XML DOM - 针对 XML文档的标准模型
HTML DOM - 针对 HTML文档的标准模型

7.3. BOM对象详解

1) Window对象

Window 对象是浏览器端JavaScript的顶层对象(全局对象)
Window 对象代表一个浏览器窗口或一个框架。
Window浏览器自动创建。

属性

描述

document

对 Document对象的只读引用

history

对 History对象的只读引用

location

用于窗口或框架的 Location对象

parent

返回父窗口。

self

返回对当前窗口的引用。等价于 Window属性

window

window属性等价于 self属性

navigator

对 Navigator对象的只读引用

screen

对 Screen对象的只读引用。

方法

描述

alert()

显示带有一段消息和一个确认按钮的警告框。

confirm()

显示带有一段消息以及确认按钮和取消按钮的对话框。

prompt()

显示可提示用户输入的对话框。

open()

打开一个新的浏览器窗口或查找一个已命名的窗口。

close()

关闭浏览器窗口。

注:window的属性和方法可以直接引用,而不用通过window对象

2). Location对象

包含有关当前 URL的信息,并可以指定新的url
一般我们用它来请求一个新的资源:

window.location.href = “http://www.atguigu.com”;

window.location = “http://www.atguigu.com”;

3). History对象

包含浏览器前面浏览过的一系列URL的信息
一般我们用它来显示上一个页面

window.history.back();

window.history.go(-1);

4). Document对象

Document对象代表整个HTML文档，可用来访问页面中的所有元素。
Document对象window对象的一个部分,可通过window.document访问

方法

描述

getElementById()

返回对拥有指定id的第一个对象的引用

getElementsByTagName()

返回带有指定标签名的对象集合

write()

向文档写 HTML表达式或 JavaScript 代码

8. js插件spket的安装

到http://www.spket.com/download.html下载 Plugin 版本(spket-1.6.23.zip)，解压后直接放置于Eclipse的dropins目录下(..dropins/eclipse/..)，重启Eclipse.

Window -> Preferences ->General->Editors-> File Associations->选择*.js,将Spket JavaScript Editor设为Default

配置jQuery

Window -> Preferences -> Spket ->JavaScript Profiles -> New,输入“jQuery”点击OK；选择“jQuery”并点击“Add Library”然后在下拉条中选取“jQuery”；选择“jQuery”并点击“AddFile”，然后选中你下载的jQuery.js文件；设成Default;

0 0