JavaScript

一、什么是JavaScript
  JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象,与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷,它是Java与HTML折衷的选择,具有以下几个基本特点:
脚本编写语言
  JavaScript是一种脚本语言,它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。
  它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样,需要先编译,而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起,从而方便用户的使用操作。
基于对象的语言
  JavaScript是一种基于对象的语言,同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此,许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。
简单性
  JavaScript的简单性主要体现在:首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型,并未使用严格的数据类型。
安全性
  JavaScript是一种安全性语言,它不允许访问本地的硬盘,并不能将数据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。
动态性
  JavaScript是动态的,它可以直接对用户或客户输入做出响应,无须经过Web服务程序。它对用户的反映响应,是采用以事件驱动的方式进行的。所谓事件驱动,就是指在主页(Home Page)中执行了某种操作所产生的动作,就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。
跨平台性
  JavaScript是依赖于浏览器本身,与操作环境无关,只要能运行浏览器的计算机,并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。
二、JavaScript和Java的区别
  虽然JavaScript与Java有紧密的联系,但却是两个公司开发的不同的两个产品。Java是SUN公司推出的新一代面向对象的程序设计语言,特别适合于Internet应用程序开发;而JavaScript是Netscape公司的产品,其目的是为了扩展Netscape Navigator功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言,它的前身是Live Script;而Java的前身是Oak语言。下面对两种语言间的异同作如下比较:
基于对象和面向对象
  Java是一种真正的面向对象的语言,即使是开发简单的程序,必须设计对象。
  JavaScript是种脚本语言,它可以用来制作与网络无关的,与用户交互作用的复杂软件。它是一种基于对象(Object Based)和事件驱动(Event Driver)的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。
解释和编译
  两种语言在其浏览器中所执行的方式不一样。Java的源代码在传递到客户端执行之前,必须经过编译,因而客户端上必须具有相应平台上的仿真器或解释器,它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。
  JavaScript是一种解释性编程语言,其源代码在发往客户端执行之前不需经过编译,而是将文本格式的字符代码发送给客户编由浏览器解释执行。
强变量和弱变量
  两种语言所采取的变量是不一样的。
  Java采用强类型变量检查,即所有变量在编译之前必须作声明。
  JavaScript中变量声明,采用其弱类型。即变量在使用前不需作声明,而是解释器在运行时检查其数据类型,在使用变量之前先进行声明是一种好的习惯
代码格式不一样
  Java是一种与HTML无关的格式,必须通过像HTML中引用外媒体那么进行装载,其代码以字节代码的形式保存在独立的文档中。
  JavaScript的代码是一种文本字符格式,可以直接嵌入HTML文档中,并且可动态装载。编写HTML文档就像编辑文本文件一样方便。
嵌入方式不一样
  在HTML文档中,两种编程语言的标识不同,JavaScript代码由 <Script Language ="JavaScript">...</Script>说明,通过<!-- ...//-->标识说明:若不认识JavaScript代码的浏览器,则所有在其中的标识均被忽略;若认识,则执行其结果。使用注释这是一个好的编程习惯,它使其他人可以读懂你的语言。
而Java使用<applet>...</applet>来标识。
静态联编和动态联编
  Java采用静态联编,即Java的对象引用必须在编译时的进行,以使编译器能够实现强类型检查。
  JavaScript采用动态联编,即JavaScript的对象引用在运行时进行检查,如不经编译则就无法实现对象引用的检查。

三、JavaScript程序运行环境
软件环境:
  Windows 95/98或Windows NT。
  Netscape Navigator x.0或Internet Explorer x.0。
  用于编辑HTML文档的字符编辑器(WS、WPS、Notepad、WordPad等)或HTML文档编辑器。
硬件配置:
  首先必须具备运行Windows 95/98或Windows NT的基本硬件配置环境。推荐:
  基本内存32M。
  CRT只少需要256颜色,分辨率在640X480以上。
  CPU只少233以上。
  鼠标和其它外部设置(根据需要选用)。

三、javascript数据类型,变/常量,表达式,运算符
1、六种数据类型。
(1)、String
字符串类型:字符串是用单引号或双引号来说明的。(使用单引号来输入包含引号的字符串。)(2)、数值数据类型
JavaScript 支持整数和浮点数。
整数可以为正数、0 或者负数;
浮点数可以包含小数点、也可以包含一个 “e”(大小写均可,在科学记数法中表示“10的幂”)、或者同时包含这两项。
(3)、Boolean 类型
可能的 Boolean 值有 true 和 false。这是两个特殊值,不能用作 1 和 0。
(4)、Undefined 数据类型:一个为 undefined 的值就是指在变量被创建后,但未给该变量赋值以前所具有的值。
(5)、Null 数据类型:null 值就是没有任何值,什么也不表示。
(6)、object类型:除了上面提到的各种常用类型外,对象也是JavaScript中的重要组成部分,这部分将在后面章节详细介绍。
2、变量与常量:
常量
整型常量
JavaScript的常量通常又称字面常量,它是不能改变的数据。其整型常量可以使用十六进制、八进制和十进制表示其值。
(1)、实型常量
实型常量是由整数部分加小数部分表示,如12.32、193.98 。可以使用科学或标准方法表示:5E7、4e5等。
(2)、布尔值
布尔常量只有两种状态:True或False。 它主要用来说明或代表一种状态或标志,以说明操作流程。它与C++是不一样的,C++可以用1或0表示其状态,而JavaScript只能用True或False表示其状态。
(3)、字符型常量
使用单引号(‘)或双引号(“)括起来的一个或几个字符。如 "This is a book of JavaScript "、"3245"、"ewrt234234" 等。
(4)、空值
JavaScript中有一个空值null,表示什么也没有。如试图引用没有定义的变量,则返回一个Null值。
(5)、特殊字符
同C语言一样,JavaScript中同样以有些以反斜杠(/)开头的不可显示的特殊字符。通常称为控制字符。
变量
在 JavaScript 中变量用来存放脚本中的值,这样在需要用这个值的地方就可以用变量来代表,一个变量可以是一个数字,文本或其它一些东西。
可以使用 var 语句来进行变量声明。如:var men = true;
变量命名必须遵循以下规则:
1、JavaScript 是一种区分大小写的语言。
2、第一个字符必须是一个字母(大小写均可)、或一个下划线(_)或一个美元符 ($)。
3、后续的字符可以是字母、数字、下划线或美元符。
4、变量名称不能是保留字。

2、表达式
它是变量、常量、布尔及运算符的集合,因此表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等。
3、运算符
运算符完成操作的一系列符号,在JavaScript中有算术运算符,有比较运算符如,有逻辑布尔运算符,有字串运算符。
主要有双目运算符和单目运算符。
双目运算符由下列组成:操作数1 运算符 操作数2即由两个操作数和一个运算符组成。
单目运算符,只需一个操作数,其运算符可在前或后。
其中三目操作符主要格式如下:操作数?结果1:结果2
若操作数的结果为真,则表述式的结果为结果1,否则为结果2。
(1)、算术运算符
分单目运算符和双目运算符。
双目运算符:
+(加) 、-(减)、 *(乘)、 /(除)、 %(取模) 、|(按位或)、&(按位与)、<<(左移)、 >>(右移)、 >>>(右移,零填充)。
单目运算符:
-(取反)、~(取补)、++(递加1)、--(递减1)。
(2)、比较运算符
比较运算符它的基本操作过程是,首先对它的操作数进行比较,尔后再返回一个true或False值,有8个比较运算符:
<(小于)、>(大于)、<=(小于等于)、>=(大于等于)、==(等于)、!=(不等于)。
(3)、布尔逻辑运算符
在JavaScript中增加了几个布尔逻辑运算符:
!(取反)、&=(与之后赋值)、 &(逻辑与)、 |=(或之后赋值)、 |(逻辑或)、 ^=(异或之后赋值)、 ^(逻辑异或)、 ?:(三目操作符)、||(或)、==(等于)、|=(不等于)。
四、JavaScript程序结构 及语句
1、条件和分支语句:if...else,switch。
if...else语句完成了程序流程块中分支功能:如果其中的条件成立,则程序执行紧接着条件的语句或语句块;否则程序执行else中的语句或语句块。语法如下:
if (条件){
执行语句1
}else{
  执行语句2
}
分支语句switch可以根据一个变量的不同取值采取不同的处理方法。 语法如下:
switch (expression)
        {
         case label1: 语句串1;
         case label2: 语句串2;
         case label3: 语句串3;
            ...
         default: 语句串3;
        }
如果表达式取的值同程序中提供的任何一条语句都不匹配,将执行default 中的语句。
2、 循环语句:for, for...in,while,break,continue。
for语句的语法如下:
for (初始化部分;条件部分;更新部分){
执行部分...

只要循环的条件成立,循环体就被反复的执行。
for...in语句与for语句有一点不同,它循环的范围是一个对象所有的属性或是一个数组的所有元素。
for...in语句的语法如下:
for (变量 in 对象或数组){
语句...
}
while语句所控制的循环不断的测试条件,如果条件始终成立,则一直循环,直到条件不再成立。 语法如下:
while (条件){
   执行语句...
}
break语句结束当前的各种循环,并执行循环的下一条语句。
continue语句结束当前的循环,并马上开始下一个循环。
4.对象操作语句:with,this,new。
with语句的语法如下:
with (对象名称){
   执行语句
}
作用是这样的:如果你想使用某个对象的许多属性或方法时,只要在with语句的()中写出这个对象的名称,然后在下面的执行语句中直接写这个对象的属性名或方法名就可以了。 new语句是一种对象构造器,可以用new语句来定义一个新对象。 语法是这样的:
新对象名称= new 真正的对象名
譬如说,我们可以这样定义一个新的日期对象: var curr= new Date(),然后,变量curr就具有了Date对象的属性。
this运算符总是指向当前的对象。
5.注释语句:
//这是单行注释
/*这可以多行注释.... */
五、函数
函数为程序设计人员提供了一个丰常方便的能力。通常在进行一个复杂的程序设计时,总是根据所要完成的功能,将程序划分为一些相对独立的部分,每部分编写一个函数。从而,使各部分充分独立,任务单一,程序清晰,易懂、易读、易维护。JavaScript函数可以封装那些在程序中可能要多次用到的模块。并可作为事件驱动的结果而调用的程序。从而实现一个函数把它与事件驱动相关联。这是与其它语言不样的地方。
1、JavaScript函数定义
Function 函数名 (参数,变元){
函数体;.
Return 表达式;
}
说明:
 当调用函数时,所用变量或字面量均可作为变元传递。
 函数由关键字Function定义。
 函数名:定义自己函数的名字。
 参数表,是传递给函数使用或操作的值,其值可以是常量 ,变量或其它表达式。
 通过指定函数名(实参)来调用一个函数。
 必须使用Return将值返回。
 函数名对大小写是敏感的。
2、函数中的形式参数:
在函数的定义中,我们看到函数名后有参数表,这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个数呢?在JavaScript中可通过arguments .Length来检查参数的个数。
六、事件驱动及事件处理
归纳起来,必需使用的事件有三大类:
引起页面之间跳转的事件,主要是超连接事件。
事件浏览器自己引起的事件。
事件在表单内部同界面对象的交互。
1、概念
JavaScript是基于对象(object-based)的语言。这与Java不同,Java是面向对象的语言。而基于对象的基本特征,就是采用事件驱动(event-driven)。它是在用形界面的环境下,使得一切输入变化简单化。通常鼠标或热键的动作我们称之为事件(Event),而由鼠标或热键引发的一连串程序的动作,称之为事件驱动(Event Driver)。而对事件进行处理程序或函数,我们称之为事件处理程序(Event Handler)。
2、件处理程序
在JavaScript中对象事件的处理通常由函数(Function)担任。其基本格式与函数全部一样,可以将前面所介绍的所有函数作为事件处理程序。
格式如下:
Function 事件处理名(参数表){
事件处理语句集;
……
}

3、事件驱动
JavaScript事件驱动中的事件是通过鼠标或热键的动作引发的。它主要有以下几个事件:
(1)、单击事件onClick
当用户单击鼠标按钮时,产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生:
button(按钮对象)
checkbox(复选框)或(检查列表框)
radio (单选钮)
reset buttons(重要按钮)
submit buttons(提交按钮)

(2)、onChange改变事件
当利用text或texturea元素输入字符值改变时发该事件,同时当在select表格项中一个选项状态改变后也会引发该事件。
(3)、选中事件onSelect
当Text或Textarea对象中的文字被加亮后,引发该事件。
(4)、获得焦点事件onFocus
当用户单击Text或textarea以及select对象时,产生该事件。此时该对象成为前台对象。
(5)、失去焦点onBlur
当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时,引发该文件,他与onFocas事件是一个对应的关系。
(6)、载入文件onLoad
当文档载入时,产生该事件。onLoad一个作用就是在首次载入一个文档时检测cookie的值,并用一个变量为其赋值,使它可以被源代码使用。
(7)、卸载文件onUnload
当Web页面退出时引发onUnload事件,并可更新Cookie的状态。
七、对象的基础知识
在JavaScript中,可以使用以下几种对象:
由浏览器根据web页面的内容自动提供的对象。
JavaScript的内置对象,如Date,Math等。
服务器上的固有对象。
用户自定义的对象。
1、对象的基本结构
JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素的构成的。前者是对象在实施其所需要行为的过程中,实现信息的装载单位,从而与变量相关联;后者是指对象能够按照设计者的意图而被执行,从而与特定的函数相联。
2、引用对象的途径
一个对象要真正地被使用,可采用以下几种方式获得:
* 引用JavaScript内部对象;
* 由浏览器环境中提供;
* 创建新对象。
这就是说一个对象在被引用之前,这个对象必须存在,否则引用将毫无意义,而出现错误信息。从上面中我们可以看出JavaScript引用对象可通过三种方式获取。要么创建新的对象,要么利用现存的对象。
3、有关对象操作语句
JavaScript不是一纯面向对象的语言,它设有提供面向对象语言的许多功能,因此JavaScript设计者之所以把它你“基于对象”而不是面向对象的语言,在JavaScript中提供了几个用于操作对象的语句和关键字及运算符。
(1) For...in语句
格式如下:
For(对象属性名 in 已知对象名)
说明:
该语句的功能是用于对已知对象的所有属性进行操作的控制循环。它是将一个已知对象的所有属性反复置给一个变量;而不是使用计数器来实现的。
该语句的优点就是无需知道对象中属性的个数即可进行操作。
(2)with语句
使用该语句的意思是:在该语句体内,任何对变量的引用被认为是这个对象的属性,以节省一些代码。
with object{
...}
所有在with语句后的花括号中的语句,都是在后面object对象的作用域的。
(3)this关键字
this是对当前的引用,在JavaScript由于对象的引用是多层次,多方位的,往往一个对象的引用又需要对另一个对象的引用,而另一个对象有可能又要引用另一个对象,这样有可能造成混乱,最后自己已不知道现在引用的那一个对象,为此JavaScript提供了一个用于将对象指定当前对象的语句this。
(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、对象属性的引用
对象属性的引用可由下列三种方式之一实现:
(1)使用点(.)运算符
(2)通过对象的下标实现引用
(3)通过字符串的形式实现
5、对象的方法的引用
在JavaScript中对象方法的引用是非常简单的。
ObjectName.methods() 
6、常用对象的属性和方法
JavaScript为我们提供了一些非常有用的常用内部对象和方法。用户不需要用脚本来实现这些功能。这正是基于对象编程的真正目的。
在JavaScript提供了string(字符串)、math(数值计算)和Date(日期)三种对象和其它一些相关的方法。从而为编程人员快速开发强大的脚本程序提供了非常有利的条件。

7、常用内部对象
在JavaScript中对于对象属性与方法的引用,有两种情况:其一是说该对象是静态对象,即在引用该对象的属性或方法时不需要为它创建实例;而另一种对象则在引用它的对象或方法是必须为它创建一个实例,即该对象是动态对象。
对JavaScript内部对象的引用,以是紧紧围绕着它的属性与方法进行的。因而明确对象的静动性对于掌握和理解JavaScript内部对象是具有非常重要的意义。

1、串对象
string对象:内部静态性。
访问properties和methods时,可使用(.)运算符实现。
基本使用格式:objectName.prop/methods
(1)串对象的属性
该对象只有一个属性,即length。它表明了字符串中的字符个数,包括所有符号。
(2)串对象的方法
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的字符全部返回。
2、算术函数的math对象
功能:提供除加、减、乘、除以外的一引些自述运算。如对数,平方根等 。
静动性:静态对象
(1)主要属性
math中提供了6个属性,它们是数学中经常用到的常数E、以10为底的自然对数LN10、以2为底的自然对数LN2、3.14159的PI、1/2的平方根SQRT1-2,2的平方根为SQRT2。
(2)主要方法
绝对值:abs()
正弦余弦值:sin(),cos()
反正弦反余弦 :asin(), acos()
正切反正切:tan(),atan()
四舍五入:round()
平方根:sqrt()
基于几方次的值:Pow(base,exponent)
3、日期及时间对象
功能:提供一个有关日期和时间的对象。
静动性:动态性,即必须使用New运算符创建一个实例。例:
MyDate=New Date()
Date对象没有提供直接访问的属性。只具有获取和设置日期和时间的方法。
日期起始值:1770年1月1日00:00:00。
1. 获取日期的时间方法
getYear(): 返回年数
getMonth():返回当月号数
getDate(): 返回当日号数
getDay():返回星期几
getHours():返回小时数
getMintes(:返回分钟数
getSeconds():返回秒数
getTime() : 返回毫秒数
(2)设置日期和时间:
setYear();设置年
setDate():设置当月号数
setMonth():设置当月份数
setHours():设置小时数
setMintes():设置分钟数
setSeconds():设置秒数
setTime ():设置毫秒数
3、JavaScript中的系统函数
JavaScript中的系统函数又称内部方法。它提供了与任何对象无关的系统函数,使用这些函数不需创建任何实例,可直接用。
(1).返回字符串表达式中的值:
方法名:eval(字串表达式),例:
test=eval("8+9+5/2");
(2). 返回字符串ASCI码:
方法名:unEscape (string)
(3).返回字符的编码:
方法名:escape(character)
(4).返回实数:
parseFloat(floustring);
(5).返回不同进制的数:
parseInt(numbestring ,rad.X)
其中radix是数的进制,numbs字符串数
8、在JavaScript中创建新对象
使用JavaScript可以创建自己的对象。虽然JavaScript内部和浏览器本身的功能已十分强大,但JavaScript还是提供了创建一个新对象的方法。使其不必像超文本标识语言那样,求于或其它多媒体工具,就能完成许多复杂的工作。
在JavaScript中创建一个新的对象是十分简单的。首先它必须定义一个对象,而后再为该对象创建一个实例。这个实例就是一个新对象,它具有对象定义中的基本特征。
对象的定义
JavaScript对象的定义,其基本格式如下:
Function Object(属性表)
This.prop1=prop1
This.prop2=prop2
...
This.meth=FunctionName1;
This.meth=FunctionName2;
...
在一个对象的定义中,可以为该对象指明其属性和方法。通过属性和方法构成了一个对象的实例。
创建对象实例
一旦对象定义完成后,就可以为该对象创建一个实例了:
NewObject=New object();
其中Newobjet是新的对象,Object已经定义好的对象。例:
对象方法的使用
在对象中除了使用属性外,有时还需要使用方法。在对象的定义中,我们看到This.meth=FunctionName语句,那就是为定义对象的方法。实质对象的方法就是一个函数FunctionName,通过它实现自己的意图。
八、JavaScript中的数组 
使用New创建数组
JavaScript中没有提供像其它语言具有明显的数组类型,但可以通过function定义一个数组,并使用New对象操作符创建一个具有下标的数组。从而可以实现任何数据类型的存储。
a、定义对象的数组
Function arrayName(size){
This.length=Size;
for(var X=; X<=size;X++)
this[X]=0;
Reture this;
}
其中arrayName是定义数组的一个名子,Size是有关数组大小的值(1-size),即数组元素的个数。通过for循环对一个当前对象的数组进行定义,最后返回这个数组。
从中可以看出,JavaScript中的数组是从1到size,这与其它0到size的数组表示方法有所不同,当然你可根据需要将数组的下标由1到size调整到0到size-1,可由下列实现:
Function arrayName (size){
For (var X=0; X<=size;X++)
this[X]=0;
this.lenght=size;
Return this;
}
从上面可以看出该方法是只是调整了this.lenght的位置,该位置是用于存储数组的大小的。从而调整后的数组的下标将与其它语言一致。但请读者注意正是由于数组下标顺序由1到size,使得JavaScript中的对象功能更加强大。
b、创建数组实例
一个数组定义完成以后,还不能马上使用,必须为该数组创建一个数组实例:
Myarray=New arrayName(n);
并赋于初值:
Myarray[1]=“字串1”;
Myarray[2]=“字串2”;
Myarray[3]=“字串3”;
...
Myarray[n]=“字串n”;
一旦给数组赋于了初值后,数组中就具有真正意义的数据了,以后就可以在程序设计过程中直接引用。
创建多维数组
Function creatMArray(row,col){
var indx=0;
this.length=(row*10)+col
for(var x=1;x<=row;x++)
for(var y=1;y<=col;y++)
indx=(x*10)+y;
this[indx]=””;
}
myMArray=new creatMArray();
之后可通过myMArray[11]、myMArray[12]、myMArray[13]、myMArray[21]、myMArray[22]、myMArray[23]、
…来引用。
内部数组
在Java中为了方便内部对象的操作,可以使用窗体(Forms)、框架(Frames)、元素(element)、链接(links)和锚(Anchors)数组实现对象的访问。
anchors[]:使用《A name=“anchorName“》标识来建立锚的链接。
links[]: 使用<A href=”URL”>来定义一个越文本链接项。
Forms[]: 在程序中使用多窗体时,建立该数组。
Elements[]:在一个窗口中使用从个元素时,建立该数组。
Frames[]:建立框架时,使用该数组
anchors[]用于窗体的访问(它是通过《form name=“form1”》所指定的),link[]用于被链接到的锚点的访问(它是通过《a href=URL》所指定的)。Forms[]反映窗体的属性,而anchors[]反映Web页面中的链接属性。
九、JavaScript对象系统的使用
使用浏览器的内部对象系统, 可实现与HTML文档进行交互。它的作用是将相关元素组织包装起来,提供给程序设计人员使用,从而减轻编程人的劳动,提高设计Web页面的能力。
1、浏览器对象层次及其主要作用
除了前面提到过的文档document对象外,Navigator浏览器中还提供了窗口(Window)对象以及历史(History)和位置(Location)对象。
浏览器对象(Navigator)
提供有关浏览器的信息
窗口对象(Windows)
Window对象处于对象层次的最顶端,它提供了处理Navigator窗口的方法和属性。
位置对象(Location)
Location对象提供了与当前打开的URL一起工作的方法和属性,它是一个静态的对象。
历史对象(History)
History对象提供了与历史清单有关的信息。
文档对象(Document)
document对象包含了与文档元素(elements)一起工作的对象,它将这些元素封装起来供编程人员使用。
编程人员利用这些对象,可以对WWW浏览器环境中的事件进行控制并作出处理。在JavaScript中提供了非常丰富的内部方法和属性,从而减轻了编程人员的工作,提高编程效率。这正是基于对象与面向对象的根本区别所在。在这些对象系统中,文档对象属于非常重要的,它位于最低层,但对于我们实现Web页面信息交互起作关键作用。因而它是对象系统的核心部分。
2、文档对象功能及其作用
在Navigator浏览器中,document文档对象是核心是,同时也是最重要的。见表6-1所示。
Links链接对象
Anchor锚对象
Form窗体对象
Method方法
Prop对象
document对象的主要作用就是把这些基本的元素(如links,anchor等)包装起来,提供给编程人员使用。从另一个角度看,document对象中又是由属性和方法组成。
1、document中三个主要的对象
在document中主要有:links,anchor,form等三个最重要的对象:
(1)anchor锚对象:
anchor对象指的是<A Name=...> </A>标识在HTML源码中存在时产生的对象。它包含着文档中所有的anchors信息。
(2)链接links对象
link对象指的是用<A Href=...> </A>标记的连接一个超文本或超媒体的元素作为一个特定的URL。
(3)窗体(Form)对象
窗体对象是文档对象的一个元素,它含有多种格式的对象储存信息,使用它可以在JavaScript脚本中编写程序进行文字输入,并可以用来动态改变文档的行为。通过document. Forms[]数组来使得在同一个页面上可以有多个相同的窗体,使用forms[]数组要比使用窗体名字要方便得多。
2、文档对象中的attribute属性
document对象中的attribute属性,主要用于在引用Href标识时,控制着有关颜色的格式和有关文档标题、文档原文件的URL以及文档最后更新的日期。这部分元素的主要含义如下:
(1)链接颜色:alinkcolor
这个元素主要用于,当选取一个链接时,链接对象本身的颜色就按alinkcolor指定改变。(2)链接颜色:linkcolor
当用户使用<A Href=...> Text string </A>链接后,Textstring的颜色就会按Linkcolor所指定的颜色更新。
(3)浏览过后的颜色:VlinkColor
该属性表示的是已被浏览存储为已浏览过的链接颜色。
(4)背景颜色:bgcolor
该元素包含文档背景的颜色。
(5)前景颜色:Fgcolor
该元素包含HTML文档中文本的前景颜色。
3、文档对象的基本元素
(1)窗体属性:
窗体属性是与HTML文档中<Form>...</Form>相对应的一组对象在HTML文档所创建的窗体数,由length指定。通过document.forms.length反映该文档中所创建的窗体数目。
(2)锚属性:anchors
该属性中,包含了HTML文档的所有<A> </A>标记为Name=...的语句标识。所有“锚”的数目保存在document.anchors.length中。
(3)链接属性:links
链接属性是指在文档中<A>...</A>的由Href=...指定的数目,其链接数目保存在document.links.length中。
十、 JavaScript窗口及输入输出
JavaScript是基于对象的脚本编程语言,那么它的输入输出就是通过对象来完成的。其中有关输入可通过窗口(Window)对象来完成,而输出可通过文档(document)对象的方法来实现。
窗口输入输出
其中window.prompt()就是一个窗口对象的方法,其基本作用是,当装入Web页面时在屏幕上显示一个具有“确定”和“取消”的对话框,让你输出数据。document.writle是一个文档对象的方法,它的基本功能,是实现Web页面的输出显示。见图1所示。
1、窗口对象
该对象包括许多有用的属性、方法和事件驱动程序,编程人员可以利用这些对象控制浏览器窗口显示的各个方面,如对话框、框架等。在使用应注意以下几点:
该对象对应于HTML文档中的<Body>和<FrameSet>两种标识;
onload和onunload都是窗口对象属性;
在JavaScript脚本中可直接引用窗口对象。如:
window.alert("窗口对象输入方法")
可直接使用以下格式:
alert("窗口对象输入方法") 
2、窗口对象的事件驱动
窗口对象主要有装入Web文档事件onload和卸载时onunload事件。用于文档载入和停止载入时开始和停止更新文档。
3、窗口对象的方法
窗口对象的方法主要用来提供信息或输入数据以及创建一个新的窗口。
创建一个新窗口open()
使用window.open(参数表)方法可以创建一个新的窗口。其中参数表提供有窗口的主要特性和文档及窗口的命名。
具有OK按钮的对话框
alert()方法能创建一个具有OK按钮的对话框。
具有OK和Cancel按钮的对话框
confirm()方法为编程人员提供一个具有两个按钮的对话框。
具有输入信息的对话框
prompt()方法允许用户在对话框中输入信息,并可使用默认值,其基本格式如下prompt(“提示信息”,默认值)。 
4、窗口对象中的属性
窗口对象中的属性主要用来对浏览器中存在的各种窗口和框架的引用,其主要属性有以下几个:
(1)frames 确文档中帧的数目
frames(帧)作为实现一个窗口的分隔操作,起到非常有用的作用,在使用注意以下几点:
frames属性是通过HTML标识<Frames>的顺序来引用的,它包含了一个窗口中的全部帧数。
帧本身已是一类窗口,继承了窗口对象所有的全部属性和方法。
(2)Parent 指明当前窗口或帧的父窗口。
(3)defaultstatus:默认状态,它的值显示在窗口的状态栏中。
(4)status:包含文档窗口中帧中的当前信息。
(5)top:包括的是用以实现所有的下级窗口的窗口。
(6)window.指的是当前窗口
(7)self:引用当前窗口。
5、输出流及文档对象
在JavaScript文档对象中,提供了用于显示关闭、消除、打开HTML页面的输出流。
(1)创建新文档open()方法
(2)使用document.open()创建一个新的窗口或在指定的命令窗口内打开文档。由于窗口对象是所加载的父对象,因而我们在调用它的属性或方法时,不需要加入Window对象。例用Window. Open()与Open()是一样的。
打开一个窗口的基本格式:
Window .open("URL","窗口名字","窗口属性"]
window属性参数是由一个字符串列表项它由逗号分隔,它指明了有关新创建窗口的属性。 
参 数 设定值 含 义
toolbar yes/no 建立或不建立标准工具条
location yes/no 建立或不建立位置输入字段
directions yes/no 建立或不建立标准目录按钮
status yes/no 建立或不建立状态条
menubar yes/no 建立或不建立菜单条
scrollbar yes/no 建立或不建立滚动条
revisable yes/no 能否改变窗口大小
width yes/no 确定窗口的宽度
Height yes/no 确定窗口的高度。
在使用Open()方法时,需要注意以下点。
通常浏览器窗中,总有一个文档是打开的。因而不需要为输出建立一个新文档。
在完成对Web文档的写操作后,要使用或调用close()方法来实现对输出流的关闭。
在使用open()来打开一个新流时,可为文档指定一个有效的文档类型,有效文档类型包括text/HTML、text/gif、text/xim、text/plugin等。
(2)write()、writeln()输出显示。
该方法主要用来实现在Web页面上显示输出信息。在实际使用中,需注意以下几点:
writeln()与write()唯一不同之处在于在未尾加了一个换符。
为了正常显示其输出信息,必须指明<pre> </Pre>标记,使之告诉编辑器。
输出的文档类型,可以由浏览器中的有效的合法文本类型所确定。
(3)关闭文档流close()
在实现多个文档对象中,必须使用close()来关闭一个对象后,才能打开另一个文档对象。
(4)清除文档内容clear()
使用该方法可清除已经打开文档的内容。 
2、简单的输入、输出例子
在JavaScript中可以非常方便地实现输入输出信息,并与用户进行交互。
1、JavaScript信息的输入
通过使用JavaScript中所提供的窗口对象方法prompt(), 就能完成信息的输入。该方法提供了最简便的信息输入方式,其基本格式如下:
Window.prompt("提示信", 预定输入信息);
此方法首先在浏览器窗口中弹出一个对话框, 让用户自行输入信息。一旦输入完成后,就返回用户所输入信息的值。例:
test=prompt(“请输入数据:”,”this is a JavaScript”)
实际上prompt()是窗口对象的一个方法。因为缺省情况下所用的对象就是window对象, 所以windows对象可以省略不写。 
2、输出显示
每种语言,都必须提供信息数据的输出显示。JavaScript也是一样,它提供有几个用于信息输出显示的方法。比较常用的有window.alert()、document.write和及document.writln()方法。
(1)document.write()方法和document.writeln()方法
document是JavaScript中的一个对象在它中封装许多有用的方法,其中write()和writeln()就是用于将文本信息直接输出到浏览器窗口中的方法。
document.write();
document.writeln();
说明:
write()和writeln()方法都是用于向浏览器窗口输出文本字串;
二者的唯一区别就是writeln()方法自动在文本之后加入回车符。
(2)window.alert()输出
在JavaScript为了方便信息输出,JavaScript提供了具有独立的对话框信息输出─alert()方法。
alert()方法是window对象的一个方法,因此在使用时,不需要写window窗口对象名,而是直接使用就行了。它主要用途用在输出时产生有关警告提示信息或提示用户,一旦用户按“确定”钮后,方可继续执行其他脚本程序
十一、窗体基础知识
窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互,而用不着在之前首先进行数据输入,就可以实现动态改变Web文档的行为。
1、什么是窗体对象
窗体(Form):它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体,使用Forms[]数组来实现不同窗体的访问。
2、窗体对象的方法
窗体对象的方法只有一个--submit()方法,该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体,则使用下列格式:
document.mytest.submit() 
3、窗体对象的属性
窗体对象中的属性主要包括以下:elements name action target encoding method.
除Elements外,其它几个均反映了窗体中标识中相应属性的状态,这通常是单个窗体标识;而elements常常是多个窗体元素值的数组,例:
elements[0].Mytable.elements[1] 
4、访问窗体对象
在JavaScript中访问窗体对象可由两种方法实现:
(1)通过访问窗体
在窗体对象的属性中首先必须指定其窗体名,而后就可以通过下列标识访问窗体如:document.Mytable()。
(2)通过数组来访问窗体
除了使用窗体名来访问窗体外,还可以使用窗体对象数组来访问窗体对象。但需要注意一点,因窗体对象是由浏览器环境的提供的,而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问:
document.forms[0]
document.forms[1]
document.forms[2]... 
5、引用窗体的先决条件
在JavaScript中要对窗体引用的条件是:必须先在页面中用标识创建窗体,并将定义窗体部分放在引用之前。 
二、窗体中的基本元素
窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。
在JavaScript中要访问这些基本元素,必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下:
formName.elements[].methadName (窗体名.元素名或数组.方法)
formName.elemaent[].propertyName(窗体名.元素名或数组.属性)
下面分别介绍:
1、Text单行单列输入元素
功能:对Text标识中的元素实施有效的控制。
基本属性:
Name:设定提交信息时的信息名称。对应于HTML文档中的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息。
defaultvalue:包括Text元素的默认值
基本方法:
blur():将当前焦点移到后台。
select():加亮文字。
主要事件:
onFocus:当Text获得焦点时,产生该事件。
OnBlur:从元素失去焦点时,产生该事件。
Onselect:当文字被加亮显示后,产生该文件。
onchange:当Text元素值改变时,产生该文件。
2、textarea多行多列输入元素
功能:实施对Textarea中的元素进行控制。
基本属性
name:设定提交信息时的信息名称,对应HTML文档Textarea的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息。
Default value:元素的默认值。
方法:
blur():将输入焦点失去
select():将文字加亮后
事件:
onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后,产生该文件
Onchange:当文字值改变时,产生该事件
Onselect:当文字加亮后,产生该文件 
3、Select选择元素
功能:实施对滚动选择元素的控制。
属性:
name:设定提交信息时的信息名称,对应文档select中的name。
Length:对应文档select中的length
options:组成多个选项的数组
selectIndex;该下标指明一个选项
select在中每一选项都含有以下属性:
Text:选项对应的文字
selected:指明当前选项是否被选中
Index:指明当前选项的位置
defaultselected:默认选项
事件:
OnBlur:当select选项失去焦点时,产生该文件。
onFocas:当select获得焦点时,产生该文件。
Onchange:选项状态改变后,产生该事件。 
4、Button按钮
功能:实施对Button按钮的控制。
属性:
Name:设定提交信息时的信息名称,对应文档中button的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息。
方法:
click()该方法类似于一个按下的按钮。
事件:
onclick当单击button按钮时,产生该事件。
5、checkbox检查框
功能:实施对一个具有复选框中元素的控制。
属性:
name:设定提交信息时的信息名称。
Value:用以设定出现在窗口中对应HTML文档中Value的信息。
Checked:该属性指明框的状态true/false.
defauitchecked:默认状态
方法:
click()该方法使得框的某一个项被选中。
事件:
onclick:当框的选被选中时,产生该事件。  
6、radio无线按钮
功能:实施对一个具单选功能的无线按钮控制。
属性:
name:设定提交信息时的信息名称,对应HTML文档中的radio的name相同
value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中的radio的name。
length:单选按钮中的按钮数目。
defalechecked:默认按钮。
checked:指明选中还是没有选中。
index:选中的按钮的位置。
方法:
chick():选定一个按钮。
事件:
onclick:单击按钮时,产生该事件。
7、hidden:隐藏
功能:实施对一个具有不显示文字并能输入字符的区域元素的控制。
属性:
name:设定提交信息时的信息名称,对应HTML文档的hidden中的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档hidden中的value。
defaleitvalue:默认值 
8、Password口令
功能:实施对具有口令输入的元素的控制。
属性:
Name:设定提交信息时的信息名称,对应HTML文档中password中的name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中password中的Value。
defaultvalu:默认值
方法
select():加亮输入口令域。
blur():使这丢失passward输入焦点。
focus():获得password输入焦点。 
9、submit提交元素
功能:实施对一个具有提交功能按钮的控制。
属性:
name:设定提交信息时的信息名称,对应HTML文档中submit。
Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中value。
方法
click()相当于按下submit按钮。
事件:
onclick()当按下该按钮时,产生该事件。
十二、用JavaScript实现更复杂的交互
1、什么是框架
框架Frames最主要功用是"分割"视窗,使每个"小视窗"能显示不同的HTM L文件,不同框架之间可以互动(interact),这就是说不同框架之间可以交换讯息与资料。例如:假设您开了两个frames,第一个frame可显示书的目录,第二个frame则显示章节的具体内容。
框架可以将屏幕分割成不同的区域,每个区域有自己的URL,通过Frames[]数组对象来实现不同框架的访问。实际上框架对象本身也一类窗口,它继承了窗口对象的所有特征,并拥有所有的属性和方法。下面我们先看一下框架的例子。见图9-1所示。
以上HTML标识将屏幕分成三个框架。先将窗口分成以二行为单位的窗口,之后再按分成二个窗口。并在相应的框架中放入自己的HTML文档。
通过[Framset ]告诉浏览器您要设置几个框架;rows这项参数告诉浏览器您想将视窗分割成几列;而 cols这项参数是告诉浏览器您想将视窗分割成几行。
可以用很多组的 <frameset...> tags 将视窗分割得更复杂。
可以给每个frame一个"名字" (name)。frame的名字在JavaScript语法中的地位非常重要。     可以用 <src> 告诉浏览器您要载入哪一个 HTML文件。
2、如何访问框架
在前面我们介绍过使用document.forms[]实现单一窗体中不同元素的访问。而要实现框架中多窗体的不同元素的访问,则必须使用window对象中的Frames属性。Frames属性同样也是一个数组,他在  父框架集中为每一个子框架设有一项。通过下标实现不同框架的访问:
parent.frames[Index1].docuement.forms[index2]
通过parent.frames.length确定窗口中窗体的数目。 除了使用数组下标来访问窗体外还可以使用框架名和窗体名来实现各元素的访:
parent.framesName.decument.formNames.elementName.(m/p)
吸引众多的Web设计人员。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值