核心Javascript教程（二）



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. 数组的类型

1. typeof

2. 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(){return this.street} //方法    } };    //alert(obj.addr.street); //alert(obj.addr.getStreet());

 

2). new构造函数创建

a. 系统的

obj = new Object(); obj.name = "xfzhang"; obj.age = 21; obj.getAge = function(){return this.age}; //alert(obj.getAge());

 

b. 自定义的

function Person(name, age) {    this.name = name;    this.age = age;    this.getAge = function(){return this.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对象

p2

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;