JavaScript培训日志☆6

niwenhui

六、JavaScript语言中的对象模型
JavaScript被称为是“基于对象的” (而不是面向对象的)，它有对象的概念, 但没有面向对象中的继承的概念。从对象定义的角度来看, JavaScript程序中有三种不同类型的对象：
l         JavaScript语言自身所提供的内置对象（built-in object）
l         浏览器中所提供的内置对象
l         程序中用户定义的对象（用户自己定义的对象）。
1、对象的编程特性简要回顾：
l         一个对象是一个由变量、其他对象或方法组成的一个集合：
l         在一个对象中包含的其他对象和变量被称为属性 (property)；     
l         在一个对象内的函数(function)称为这个对象的方法( method)；  
l         在一个特定的对象中的一些特性的序列称为数组, 例如document对象中的image[]；多维数组是由含有数组特性的对象数组构造的
2、对象引用
当一个HTML文档被加载到浏览器后，它所有的对象都按照浏览器的文档对象所规定的严格层次结构存放到内存。要有一种方法让Script指出用户要使用的是哪一个对象，这就需要进行对象引用。
JavaScript用严格的层次结构引导Script至文档的任何区域，对每个对象的引用必须包括从顶部到对象的所有层次，直至对象名，路径中各个相连的对象之间用句点分开。
（1）引用对象中的属性（变量）的形式：
父对象. 属性1[索引1]. 属性2..最后属性[索引N]
对象属性的引用可由下列三种方式之一实现：
l         使用点（.）运算符
university.Name=”云南省”;
university.City=”昆明市”;
university.Date="1999"
其中university是一个已经存在的对象，Name、City、Date是它的三个属性，并通过操作对其赋值。
l         通过对象的下标实现引用
university[0]= ”云南省”;
university[1]= ”昆明市”;
university[2]="1999" ;
通过数组形式的访问属性，可以使用循环操作获取其值。
function showunievsity(object)
{
for (var j=0;j
{
document.write(object[j])
}
}
l         通过字符串的形式实现
university["Name"]=”云南省”;;
university["City"]=”昆明市”;
university["Date"]="1999"
（2）引用对象中的方法可以采用如下形式引用：
对象.方法(参数值)；
    一个含有典型属性和方法的对象的例子：
document 是对应一个 .html文档的对象，浏览器读进文档后生成；
document.writeln(“hello”) 是这个对象的一个方法，输出带换行的字符串；
document.location 是该对象（当前网页）的一个属性，含有该网页的URL。
3、有关对象操作的语句
JavaScript不是纯面向对象的语言，它设有提供面向对象语言的许多功能，因此JavaScript的设计者只把它称为“基于对象”而不是面向对象的语言，但在JavaScript中提供了几个用于操作对象的语句和关键词及运算符。
（1）for...in语句
格式如下：
for（对象属性名 in 已知对象名）
说明：
l         该语句的功能是用于对已知对象的所有属性进行操作的控制循环。它是将一个已知对象的所有属性反复置给一个变量；而不是使用计数器来实现的。
l         该语句的优点就是无需知道对象中属性的个数即可进行操作。
例：下列函数是显示数组中的内容：
function showData(object)
{
for (var X=0; X
{
document.write(object)；
}
    }
该函数是通过数组下标顺序值，来访问每个对象的属性，使用这种方式首先必须知道数组的下标值，否则若超出范围，则就会发生错误。而使用for...in语句，则根本不需要知道对象属性的个数，见下面的代码：
function showData(object)
{
for(var prop in object)
{
document.write(prop)；
}
}
使用该函数时，在循环体中for...in语句自动将对象的属性取出来，直到最后为此。
（2）with语句
使用该语句的意思是：在该语句体内，任何对变量的引用都被认为是对这个对象的属性引用，从而可以节省一些代码。  格式如下：
with object
{
...
}
所有在with语句后的花括号中的语句，都是在后面object对象的作用域的。 例：
with Math
{
document.write(cos(35));
document.write(cos(80));
}
若不使用with则引用时，可能会相对要复杂些：
document.write(Math.cos(35)) ;
document.write(Math.sin(80)) ;
（3）this关键词
this是对当前对象的引用，在JavaScript中由于对象的引用是多层次，多方位的，往往一个对象的引用又需要对另一个对象的引用，而另一个对象有可能又要引用另一个对象，这样有可能造成混乱，最后自己已不知道现在引用的那一个对象，为此JavaScript提供了一个用于将对象指定当前对象的语句this。
    在JavaScript的对象系统中，this关键字用在两种地方：
l         在构造器函数中，指代新创建的对象实例
l         在对象的方法被调用时，指代调用该方法的对象实例
如果一个函数被作为普通函数(而不是对象方法)调用，那么在函数中的this关键字将指向window对象。与此相同的，如果this关键字不在任何函数中，那么他也指向window对象。
由于在JavaScript中不明确区分函数与方法。因此有些代码看起来很奇怪。下面的this指代调用该方法的对象实例：
function foo()
{   
        if (this===window)
{
            document.write('call a function.', '
');
        }
        else
{
            document.write('call a method, by object: ', this.name, '
');
         }
}
下面的this指代new关键字新创建实例
function MyObject(name)
{  
  this.name = name;
  this.foo = foo;
}
var obj1 = new MyObject('obj1');
var obj2 = new MyObject('obj2');

（4）new运算符
虽然在JavaScript中对象的功能已经是非常强大的了。但更强大的是设计人员可以按照需求来创建自己的对象，以满足某一特定的要求。使用new运算符可以创建一个新的对象。其创建对象使用如下格式：
newObject=new Object(Parameters table);
其中newObject是新创建出的对象：Object是已经存在的类； parameters table参数表；new是JavaScript中的命令语句。
如创建一个日期新对象
newData=new Data();
birthDay=new Data(December 12.1998);
之后就可使用newData、birthDay作为一个新的日期对象了。

4、JavaScript语言中的内置对象
（1）主要的内置对象   
对象
描述
Array
表述数组。
Boolean
表述布尔值。
Date
表述日期。
Function
指定了一个可编译为函数的字符串 JavaScript 代码。
Math
提供了基本的数学常量和函数；如其 PI 属性包含了π的值。
Number
表述实数数值。
Object
包含了由所有 JavaScript 对象共享的基本功能。
RegExp
表述了一个正则表达式；同时包含了由所有正则表达式对象的共享的静态属性。
String
表述了一个 JavaScript 字符串。
screen
屏幕对象（代表用户的显示器）
（2）引用对象的属性与方法
在JavaScript中，对于对象的属性与方法的引用，有两种形式：
l         其一是该对象为静态对象（如Math），即在引用该对象的属性或方法时不需要为它创建实例；
l         而对于动态对象（如String、Date、Array和screen等）则在引用它的对象或方法之前，必须为它创建一个实例。
（3）字符串对象的编程应用
l         串对象的属性
该对象只有一个属性，即length。它表明了字符串中的字符个数，包括所有符号。例：
mytest="This is a JavaScript" ;
myStringLength=mytest.length;
最后myStringLength返回mytest字符串的长度为20。
l         串对象的方法
String对象的方法共有19个。主要用于有关字符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换。其主要方法如下：
ü         锚点anchor()：该方法创建如用Html文件中一样的anchor标记。使用anchor如用Html中(A Name="")一样。通过下列格式访问:String.anchor(anchorName)。
ü         有关字符显示的控制方法
big()字体显示, Italics()斜体字显示，bold()粗体字显示，blink()字符闪烁显示，small（）字符用小体字显示，fixed()固定高亮字显示、fontsize(size)控制字体大小等。
ü         字体颜色方法；fontcolor(color)
ü         字符串大小写转换
toLowerCase()－小写转换，toUpperCase()大写转换。下列把一个给定的串分别转换成大写和小写格式:
string=stringValue.toUpperCase()和string=stringValue.toLowerCase()
ü         字符搜索：indexOf[charactor,fromIndex] 从指定formIndtx位置开始搜索charactor第一次出现的位置。
ü         返回字符串的一部分字符串：substring(start,end) 从start开始到end的字符全部返回。
var the_substring = the_string.substring(from, to);
"From"指的是子字符串中第１个字母的位置，"to"有点奇特，它是该子字符串中比最后一个位置大１的位置。使用这种神奇的方法你可以标记子字符串的起始和结束位置，用"to"的位置减去"from"的位置就会得出该子字符串的长度。
var the_string = "monkey";
var clergy = the_string.substring(0,4);
var tool = the_string.substring(3,6);
运行该段代码后变量clergy的值为"monk"; 变量tool的值为"key"。
l         字符串的分割方法(splitting method) ：可以使用split方法用限位器来分割一系列的名称，然后将其放在一个数组中。
例如：
var my_friends ="trixie,moxie,sven,guido,hermes";
var friend_array =my_friends.split(",");
for (loop=0; loop
{
    document.writeln(friend_array[loop] + " is myfriend.
");
}
这段代码将字符串my_friends分割成包含５个元素的数组．JavaScript可以为你自动建立一个数组，所以你无需使用new Array()；将字符串分割成数组之后，我们使用了循环语句写出每一个名称。
还可以利用split方法简化域名提取：
var the_url = window.prompt("What's the URL?","");
var first_split = the_url.split("//");
var without_resource = first_split[1];
var second_split = without_resource.split("/");
var domain = second_split[0];
这段代码简化了很多而且也更容易理解．我们来分析一些这段代码：
var the_url = prompt("What's the URL?",""); 提示用户输入一个URL，假设用户输入
http://www.webmonkey.com/javascript/index.html

var first_split = the_url.split("//"); 将用户输入的字符串分割成两块：first_split[0]是"http:"，first_split[1]是"www.webmonkey.com/javascript/index.html."
var without_resource = first_split[1]; 提取出数组中的第２个元素，所以现在without_resource是"www.webmonkey.com/javascript/index.html."
var second_split = without_resource.split("/"); 将without_resource分割成３块：
www.webmonkey.com
, javascript, 和index.html。
var domain = second_split[0]; 现在我们提取出新数组中的第１个元素就可得出域名
（4）算术函数的Math对象的编程应用
l         功能：提供除加、减、乘、除以外的一引些自述运算。如对数，平方根等。
l         主要属性
Math中提供了６个属性，它们是数学中经常用到的常数Ｅ、以１０为底的自然对数ＬＮ１０、以２为底的自然对数LN2、3.14159的PI、1/2的平方根SQRT1-2,2的平方根为SQRT2。
l         主要方法：绝对值：abs()、正弦余弦值：sin(),cos()、反正弦反余弦 :asin(), acos() 、正切反正切：tan(),atan() 、四舍五入：round() 、平方根：sqrt() 、基于几方次的值：Pow(base,exponent) 等
（5）日期及时间对象的编程应用
l         功能：提供一个有关日期和时间的对象。 但在使用它时必须使用new运算符创建一个实例。例：
MyDate=new Date() ;
Date对象没有提供直接访问的属性。只具有获取和设置日期和时间的方法，日期起始值：1970年1月1日00：00：00
l         获取日期的时间方法
　      getYear()： 返回年数、getMonth()：返回当月号数、getDate()： 返回当日号数 、getDay()：返回星期几、getHours()：返回小时数 、getMintes()：返回分钟数 、getSeconds()：返回秒数 、getTime()： 返回毫秒数。
l         设置日期和时间：
　      setYear();设置年 、setDate():设置当月号数、    setMonth():设置当月份数、setHours():设置小时数 、setMintes():设置分钟数、   setSeconds():设置秒数、setTime ():设置毫秒数。
（6）Array数组对象的编程应用
l         功能：它隐含地代表某一个数组，即只要创建出一个数组就可以通过数组名来引用该对象内的方法和属性。
l         属性：length，它指明了数组的长度。
l         方法：join() 将数组值连接变为一个字符串；reverse()将数组值倒序；sort()  将对数组值进行排序;
arrayName=new Array(3);
arrayName [0]="B";
arrayName [1]="A";
arrayName [2]="C";
document.write(arrayName.length+"
");
document.write(arrayName.join()+"
");
document.write(arrayName.reverse().join()+"
");
document.write(arrayName.sort().join())+"
";
（7）screen屏幕对象的编程应用
    screen.height屏幕高度
    screen.width屏幕宽度
    screen.availHeight屏幕可见高度
    screen.availWidth屏幕可见宽度
    screen.colorDepth色深8 ，16，32位颜色
5、浏览器的内部对象
    使用浏览器的内部对象系统, 可实现与HTML文档进行交互。它的作用是将浏览器窗口内的各个相关元素组织封装起来，提供给Web程序设计人员使用，从而减轻编程人的劳动，提高设计Web页面的能力。
（1）浏览器对象层次及其主要作用
l         浏览器对象(navigator)：提供有关当前浏览器的环境信息
l         窗口对象(window)：window对象处于对象层次的最顶端，它提供了处理浏览器窗口的方法和属性，代表整个浏览器窗口。
n         位置对象(location)：location对象提供了与当前打开的URL一起工作的方法和属性，代表当前页面的URL，它是一个静态的对象（不需要创建出它就可以使用）。
n         历史对象(history)：history对象提供了与历史清单有关的信息，代表已经访问过的页面URL。
n         文档对象(document)：document对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装起来供编程人员使用，代表当前页面的整个内容。
n         状态对象（status）：表示窗口状态栏中的临时信息
（2）document文档对象功能及其作用
在浏览器中，document文档对象是核心同时也是最重要的。document对象的主要作用就是把这些基本的元素（如links、anchor和form等）包装起来，提供给编程人员使用。
从另一个角度看，document对象中又是由属性和方法组成。
（3）document文档对象中包含有三个主要的对象：links,anchor,form等三个最重要的对象。
l         anchor锚对象：anchor对象指的是 标识在HTML源码中存在时产生的对象。
l         链接links对象：link对象指的是用 元素标记的连接一个超文本或超媒体的元素作为一个特定的URL。
l         表单（Form）对象
表单对象是文档对象的一个元素，它含有多种格式的对象储存信息，使用它可以在JavaScript脚本中编写程序进行文字输入，并可以用来动态改变文档的行为。通过document. Forms[]数组来使得在同一个页面上可以有多个表单,使用forms[]数组要比使用表单名字要方便得多。
其reset()/submit()方法，该方法主要功用就是实现表单信息的提交。
（4）应用示例
例:下面就是一个使用表单数组和表单名字的例子。该程序使得两个表单中的字段内容保持一致。
其中用了OnChnge事件(当表单内容改变时激发)。第一个使用表单名字标识myForm1,第二个使用表单数组Forms[]。其效果是一致。
（5）document文档对象中主要的属性
　　document对象中的属性，主要用于在引用href标识时，控制着有关颜色的格式和有关文档标题、文档原文件的URL以及文档最后更新的日期。这部分元素的主要含义如下：
l         链接颜色alinkcolor：这个元素主要用于，当选取一个链接时，链接对象本身的颜色就按alinkcolo r指定改变。
l         链接颜色linkcolor：当用户使用 Text string 链接后，Textstring的颜色就会按Linkcolor所指定的颜色更新。
l         浏览过后的颜色VlinkColor：该属性表示的是已被浏览存储为已浏览过的链接颜色。
l         背景颜色bgcolor：该元素包含文档背景的颜色。
l         前景颜色Fgcolor：该元素包含HTML文档中文本的前景颜色。
（6）应用范例
例1:下面我们通过一个例子来说明文档对象的综合应用。输出结果见图所示。
请输入数据：
链接到第一个文本
链接到第二个文本
链接到第三个文本

第一锚点
第二锚点
第三锚点
document.write("文档有"+document.links.length+"个链接"+"
");
document.write("文档有"+document.anchors.length+"个锚点"+"
");
document.write("文档有"+document.forms.length+"个窗体");
　
例2：下列程序随机产生每日一语。
tips = new Array(6);
tips[0]="每日一语（1）";
tips[1]="每日一语（2）";
tips[2]="每日一语（3）";
tips[3]="每日一语（4）";
tips[4]="每日一语（5）";
tips[5]="每日一语（6）";
index = Math.floor(Math.random() * tips.length);
document.write("" + tips[index]+"");
输出结果见图所示。　
例3：利用document对象产生Roll Menu
var index = 7
link = new Array(6);
text = new Array(6);
link[0] ='sample.htm'
link[1] ='sample.htm'
link[2] ='sample.htm'
link[3] ='sample.htm'
link[4] ='sample.htm'
link[5] ='sample.htm'
link[6] ='sample.htm'
text[0] ='菜单一'
text[1] ='菜单一'
text[2] ='菜单一'
text[3] ='菜单一'
text[4] ='菜单一'
text[5] ='菜单一'
text[6] ='菜单一'
document.write ("");
for (i=0;i
{
document.write (" 　");
document.write (text + "
");
}
document.write ("")


本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u3/101620/showart_2027555.html