JS总结

最新推荐文章于 2024-07-12 22:54:26 发布

weixin_30593261

最新推荐文章于 2024-07-12 22:54:26 发布

阅读量80

点赞数

文章标签： javascript java c/c++ ViewUI

原文链接：http://www.cnblogs.com/du892294464/p/6686519.html

版权

JS知识总结

　　JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择，具有以下几个基本特点：

　　JavaScript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。它与HTML标识结合在一起，从而方便用户的使用操作。

它的变量类型是采用弱类型，并未使用严格的数据类型。

JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。

JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。

　　2.　　JavaScript中变量声明，采用其弱类型。即变量在使用前不需作声明，而是解释器在运行时检查其数据类型，如：

　　x=1234;

　　y＝"4321";

　　前者说明x为其数值型变量，而后者说明y为字符型变量。

在HTML文档中，JavaScript使用<Script>...</Script>来标识

JavaScript采用动态联编，即JavaScript的对象引用在运行时进行检查，如不经编译则就无法实现对象引用的检查。

如同HTML标识语言一样， JavaScript程序代码是一些可用字处理软件浏览的文本，它在描述页面的HTML相关区域出现。

　　JavaScript代码由 <Script Language ="JavaScript">...</Script>说明。在标识<Script Language="JavaScript">...</Script>之间就可加入JavaScript脚本。

通过标识说明：若不认识JavaScript代码的浏览器，则所有在其中的标识均被忽略；若认识，则执行其结果。　　JavaScript 以 </Script> 标签结束。

　　可将<Script>...</Script>标识放入head>.. </Head>或<Body> ...</Body>之间。将JavaScript标识放置<Head>... </Head>在头部之间，使之在主页和其余部分代码之前装载，从而可使代码的功能更强大；可以将JavaScript标识放置在<Body>... </Body>主体之间以实现某些部分动态地创建文档。

在JavaScript中四种基本的数据类型：数值（整数和实数）、字符串型（用“”号或‘’括起来的字符或数值）、布尔型（使True或False表示）和空值。在JavaScript的基本类型中的数据可以是常量，也可以变量。由于JavaScript采用弱类型的形式，因而一个数据的变量或常量不必首先作声明，而是在使用或赋值时确定其数据的类型的。当然也可以先声明该数据的类型，它是通过在赋值时自动说明其数据类型的。

整型常量　　　　JavaScript的常量通常又称字面常量，它是不能改变的数据。其整型常量可以使用十六进制、八进制和十进制表示其值。

布尔值　　　　布尔常量只有两种状态：True或False

字符型常量　　使用单引号（‘）或双引号（“）括起来的一个或几个字符。如 "This is a book of JavaScript"、"3245"、"ewrt234234" 等。

空值　　　　　　JavaScript中有一个空值null,表示什么也没有。如试图引用没有定义的变量,则返回一个Null值。

变量　　　变量的主要作用是存取数据、提供存放信息的容器。对于变量必须明确变量的命名、变量的类型、变量的声明及其变量的作用域。

变量的命名

JavaScript中的变量命名同其计算机语言非常相似，这里要注意以下两点：

必须是一个有效的变量，即变量以字母开头，中间可以出现数字如test1、text2等。除下划线（－）作为连字符外，变量名称不能有空格、（＋）、（－）、（，）或其它符号。不能使用JavaScript中的关键字作为变量。

　　在JavaScript中定义了４０多个类键字，这些关键是JavaScript内部使用的，不能作为变量的名称。如Var、int、double、true不能作为变量的名称。

　　在对变量命名时，最好把变量的意义与其代表的意思对应起来，以免出现错误。

变量的类型

　　在JavaScript中，变量可以用命令Var作声明:

　　var mytest;

　　该例子定义了一个mytest变量。但没有赋予它的值。

　　Var mytest=”This is a book”

　　该例子定义了一个mytest变量, 同时赋予了它的值。

　　在JavaScript中，变量以可以不作声明，而在使用时再根据数据的类型来确其变量的类型。

　　如：

　　x=100

　　y="125"

　　xy= True

　　cost=19.5等。

　　其中x整数，y为字符串，xy为布尔型，cost为实型。

变量的声明及其作用域

　　JavaScript变量可以在使用前先作声明，并可赋值。通过使用var关键字对变量作声明。对变量作声明的最大好处就是能及时发现代码中的错误；因为JavaScript是采用动态编译的，而动态编译是不易发现代码中的错误，特别是变量命名的方面。

　　对于变量还有一个重要性──那就是变量的作用域。在JavaScript中同样有全局变量和局部变量。全局变量是定义

在所有函数体之外，其作用范围是整个函数；而局部变量是定义在函数体之内，只对其该函数是可见的，而对其它函数则是不可见的。

表达式和运算符

１、表达式

　　在定义完变量后，就可以对它们进行赋值、改变、计算等一系列操作，这一过程通常又叫称一个叫表达式来完成，

可以说它是变量、常量、布尔及运算符的集合，因此表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表

达式等。

２、运算符

　　运算符完成操作的一系列符号，在JavaScript中有算术运算符，如＋、-、*、/等；有比较运算符如!＝、＝＝等;

有逻辑布尔运算符如！（取反）、|、||; 有字串运算如＋、＋＝等。

　　在JavaScript主要有双目运算符和单目运算符。其双目运算符由下列组成：

　　操作数１运算符操作数２

　　即由两个操作数和一个运算符组成。如50＋40、"This"+"that"等。单目运算符，只需一个操作数，其运算符可在

前或后。

（１）算术运算符

　　JavaScript中的算术运算符有单目运算符和双目运算符。

双目运算符：

+（加）、-（减）、 *（乘）、 /（除）、 %（取模）、|（按位或）、&(按位与)、<<（左移）、 >>（右移）、

>>>（右移，零填充）。

单目运算符：

-（取反）、~（取补）、++（递加1）、--（递减1）。

（２）比较运算符

　　比较运算符它的基本操作过程是，首先对它的操作数进行比较，尔后再返回一个true或False值，有８个比较运算符

<(小于)、>(大于)、<=(小于等于)、>=(大于等于)、==(等于)、!=(不等于)。

（３）布尔逻辑运算符

　　在JavaScript中增加了几个布尔逻辑运算符:

!（取反)、&=（与之后赋值）、 &（逻辑与）、 |=（或之后赋值）、 |（逻辑或）、 ^=（异或之后赋值）、 ^（逻辑

异或）、 ?:（三目操作符）、||（或）、==(等于)、|=(不等于)。

　　其中三目操作符主要格式如下：

操作数？结果１：结果２

　　若操作数的结果为真，则表述式的结果为结果１，否则为结果２。

JavaScript程序构成

　　JavaScript脚本语言的基本构成是由控制语句、函数、对象、方法、属性等,来实现编程的。

JavaScript常用的程序控制流结构及语句:

１、if条件语句

　基本格式

if（表述式）

语句段１；

......

else

语句段２；

.....

　　功能：若表达式为true，则执行语句段１；否则执行语句段２。

　　说明：

　　if -else 语句是JavaScript中最基本的控制语句，通过它可以改变语句的执行顺序。

　　表达式中必须使用关系语句，来实现判断，它是作为一个布尔值来估算的。

　　它将零和非零的数分别转化成false和true。若if后的语句有多行，则必须使用花括号将其括起来。

if语句的嵌套：

if（布尔值）语句１；

else（布尔值）语句２；

else if（布尔值）语句３；

……

else 语句４；

　　在这种情况下，每一级的布尔表述式都会被计算，若为真，则执行其相应的语句，否则执行else后的语句。

２、For循环语句

　基本格式

for（初始化；条件；增量）

语句集；

　　功能：实现条件循环，当条件成立时，执行语句集，否则跳出循环体。

　　说明：

　　初始化参数告诉循环的开始位置，必须赋予变量的初值；

　　条件：是用于判别循环停止时的条件。若条件满足，则执行循环体，否则跳出。

　　增量：主要定义循环控制变量在每次循环时按什么方式变化。

　　三个主要语句之间，必须使用逗号分隔。

３、while循环

　　基本格式

　while（条件）

　语句集；

　　该语句与For语句一样，当条件为真时，重复循环，否则退出循环。

　　For与while语句都是循环语句，使用For语句在处理有关数字时更易看懂，也较紧凑；而while循环对复杂的语句效

果更特别。

４、break和continue语句

　　与C++语言相同，使用break语句使得循环从For或while中跳出，continue使得跳过循环内剩余的语句而进入下一次循环。

二、函数

　　函数为程序设计人员提供了一个丰常方便的能力。通常在进行一个复杂的程序设计时，总是根据所要完成的功能，

将程序划分为一些相对独立的部分，每部分编写一个函数。从而，使各部分充分独立，任务单一，程序清晰，易懂、易

读、易维护。JavaScript函数可以封装那些在程序中可能要多次用到的模块。并可作为事件驱动的结果而调用的程序。

从而实现一个函数把它与事件驱动相关联。这是与其它语言不样的地方。

１、JavaScript函数定义

Function 函数名（参数,变元）{

函数体;.

Return 表达式;

}

说明：

　　当调用函数时,所用变量或字面量均可作为变元传递。

　　函数由关键字Function定义。

　　函数名：定义自己函数的名字。

　　参数表，是传递给函数使用或操作的值，其值可以是常量，变量或其它表达式。

　　通过指定函数名（实参）来调用一个函数。

　　必须使用Return将值返回。

　　函数名对大小写是敏感的。

２、函数中的形式参数：

　　在函数的定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个

数呢？在JavaScript中可通过arguments .Length来检查参数的个数。

例：

Function function_Name(exp1,exp2,exp3,exp4)

Number =function _Name . arguments .length;

if (Number>1）

document.wrile(exp2);

if (Number>2)

document.write(exp3);

if(Number>3)

document.write(exp4);

...

三、事件驱动及事件处理

１、基本概念

　　JavaScript是基于对象(object-based)的语言。这与Java不同,Java是面向对象的语言。而基于对象的基本特征，

就是采用事件驱动(event-driven)。它是在用形界面的环境下，使得一切输入变化简单化。通常鼠标或热键的动作我们

称之为事件（Event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动（Event Driver）。而对事件进行

处理程序或函数，我们称之为事件处理程序（Event Handler）。

２、事件处理程序

　　在JavaScript中对象事件的处理通常由函数(Function)担任。其基本格式与函数全部一样，可以将前面所介绍的所

有函数作为事件处理程序。格式如下：

Function 事件处理名（参数表）{

事件处理语句集；

……

}

３、事件驱动

　　JavaScript事件驱动中的事件是通过鼠标或热键的动作引发的。它主要有以下几个事件：

（１）单击事件onClick

　　当用户单击鼠标按钮时，产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基

本对象中产生：

button（按钮对象）

checkbox（复选框）或（检查列表框）

radio （单选钮）

reset buttons（重要按钮）

submit buttons（提交按钮）

例：可通过下列按钮激活change()文件：

<Form>

</Form>

　　在onClick等号后，可以使用自己编写的函数作为事件处理程序，也可以使用JavaScript中内部的函数。还可以直

接使用JavaScript的代码等。例：

<Input type="button" value=" " οnclick=alert("这是一个例子"）;

（２）onChange改变事件

　　当利用text或texturea元素输入字符值改变时发该事件，同时当在select表格项中一个选项状态改变后也会引发该

事件。

例： <Form>

</Form>

（３）选中事件onSelect

　　当Text或Textarea对象中的文字被加亮后，引发该事件。

（４）获得焦点事件onFocus

　　当用户单击Text或textarea以及select对象时，产生该事件。此时该对象成为前台对象。

（５）失去焦点onBlur

　　当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时，引发该文件，他与onFocas事件是一个

对应的关系。

（６）载入文件onLoad

　　当文档载入时，产生该事件。onLoad一个作用就是在首次载入一个文档时检测cookie的值，并用一个变量为其赋值

，使它可以被源代码使用。

（７）卸载文件onUnload

　　当Web页面退出时引发onUnload事件，并可更新Cookie的状态。

四、范例

　　范例1：下例程序是一个自动装载和自动卸载的例子。即当装入HTML文档时调用loadform()函数,而退出该文档进入

另一HTML文档时则首先调用unloadform()函数,确认后方可进入。

<HTML>

<HEAD>

<!--

function loadform(){

alert("这是一个自动装载例子!");

}

function unloadform(){

alert("这是一个卸载例子!");

}

//-->

</Script>

</HEAD>

</BODY>

</HTML>

　　范例2：这是一个获取浏览器版本号的程序。该程序首先显示一个波浪一提示信息。之后显示浏览器的版本号有关信

息。

<html>

<head>

// -->

function makeArray(n){

this.length=n

return this

}

function hexfromdec(num) {

hex=new makeArray(1);

var hexstring="";

var shifthex=16;

var temp1=num;

for(x=1; x>=0; x--) {

hex[x]=Math.round(temp1/shifthex - .5);

hex[x-1]=temp1 - hex[x] * shifthex;

temp1=hex[x-1];

shifthex /= 16;

}

for (x=1; x>=0; x--) { hexstring+=getletter(hex[x]); }

return (hexstring);

}

function getletter(num) {

if (num < 10) { return num; }

else {

if (num == 10) { return "A" }

if (num == 11) { return "B" }

if (num == 12) { return "C" }

if (num == 13) { return "D" }

if (num == 14) { return "E" }

if (num == 15) { return "F" }

}

function rainbow(text){

var color_d1;

var allstring="";

for(i=0;i<text.length;i=i+2){

color_d1=255*Math.sin(i/(text.length/3));

color_h1=hexfromdec(color_d1);

allstring+="<FONT COLOR="+color_h1+"ff"+color_h1+">"+text.substring(i,i+2)+"</FONT>";

}

return allstring;

}

function sizefont(text){

var color_d1;

var allstring="";

var flag=0;

for(i=0,j=0;i<text.length;i=i+1){

if (flag==0) {

j++;

if (j>=7) {

flag=1;}}

if (flag==1) {

j=j-1;

if (j<=0) {

flag=0; }}

allstring+="<FONT SIZE="+ j + ">" + text.substring(i,i+1) + "</FONT>";

}

return allstring;

}

document.write("<font size=8><CENTER>")

document.write("<BR><BR>")

document.write( sizefont("这是一个获取WEB浏览器的程序"))

document.write("</CENTER></font>")

document.write("浏览器名称: "+navigator.appName+"<br>");

document.write("版本号: "+navigator.appVersion+"<br>");

document.write("代码名字: "+navigator.appCodeName+"<br>");

document.write("用户代理标识: "+navigator.userAgent);

</script>

　　本讲介绍了JavaScript程序设计的有关内容。程序流、函数、事件是我们学习掌握JavaScript编程的重点。

第四讲基于对象的JavaScript语言

　　JavaScript语言是基于对象的（Object-Based），而不是面向对象的（object-oriented）。之所以说它是一门基

于对象的语言，主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的

复杂对象统一起来，从而形成一个非常强大的对象系统。

　　虽然JavaScript语言是一门基于对象的，但它还是具有一些面向对象的基本特征。它可以根据需要创建自己的对象

，从而进一步扩大JavaScript的应用范围，增强编写功能强大的Web文档。

一、对象的基础知识

１、对象的基本结构

　　JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素的构成的。前者是对象在实施其所需

要行为的过程中，实现信息的装载单位，从而与变量相关联；后者是指对象能够按照设计者的意图而被执行，从而与特

定的函数相联。

２、引用对象的途径

　　一个对象要真正地被使用，可采用以下几种方式获得：

引用JavaScript内部对象；

由浏览器环境中提供；

创建新对象。

　　这就是说一个对象在被引用之前，这个对象必须存在，否则引用将毫无意义，而出现错误信息。从上面中我们可以

看出JavaScript引用对象可通过三种方式获取。要么创建新的对象，要么利用现存的对象。

３、有关对象操作语句

　　JavaScript不是一纯面向对象的语言，它设有提供面向对象语言的许多功能，因此JavaScript设计者之所以把它你

“基于对象”而不是面向对象的语言，在JavaScript中提供了几个用于操作对象的语句和关键字及运算符。

1）、For...in语句

格式如下：

For（对象属性名 in 已知对象名）

说明：

　　该语句的功能是用于对已知对象的所有属性进行操作的控制循环。它是将一个已知对象的所有属性反复置给一个变

量；而不是使用计数器来实现的。

　　该语句的优点就是无需知道对象中属性的个数即可进行操作。

例：下列函数是显示数组中的内容：

Function showData(object)

for (var X=0; X<30;X++)

document.write(object[i])；

　　该函数是通过数组下标顺序值，来访问每个对象的属性，使用这种方式首先必须知道数组的下标值，否则若超出范

围，则就会发生错误。而使For...in语句，则根本不需要知道对象属性的个数，见下：

Function showData(object)

for(var prop in object)

document.write(object[prop])；

　　使用该函数时，在循环体中，For自动将的属性取出来，直到最后为此。

.with语句

　　使用该语句的意思是：在该语句体内，任何对变量的引用被认为是这个对象的属性，以节省一些代码。

with object{

...}

所有在with语句后的花括号中的语句，都是在后面object对象的作用域的。

.this关键字

　　this是对当前的引用，在JavaScript由于对象的引用是多层次，多方位的，往往一个对象的引用又需要对另一个对

象的引用，而另一个对象有可能又要引用另一个对象，这样有可能造成混乱，最后自己已不知道现在引用的那一个对象

，为此JavaScript提供了一个用于将对象指定当前对象的语句this。

.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作为一个新的日期对象了。

４、对象属性的引用

　　对象属性的引用可由下列三种方式之一实现：

（１）使用点（.）运算符

university.Name=“云南省”

university.city=“昆明市”

university.Date="1999"

其中university是一个已经存在的对象，Name、City、Date是它的三个属性，并通过操作对其赋值。

（２）通过对象的下标实现引用

university[0]=“云南”

university[1]=“昆明市”

university[2]="1999"

通过数组形式的访问属性，可以使用循环操作获取其值。

function showunievsity(object)

for (var j=0;j<2; j++)

document.write(object[j])

若采用For...in则可以不知其属性的个数后就可以实现：

Function showmy(object)

for (var prop in this)

docament.write(this[prop]);

（３）通过字符串的形式实现

university["Name"]=“云南”

university["City"]=“昆明市”

university["Date"]="1999"

５、对象的方法的引用

　　在JavaScript中对象方法的引用是非常简单的。

ObjectName.methods()

实际上methods()=FunctionName方法实质上是一个函数。如引用university对象中的showmy（）方法，则可使用：

document.write (university.showmy())

或：document.write(university)

如引用math内部对象中cos()的方法

则：

with(math)

document.write(cos(35));

document.write(cos(80));

若不使用with则引用时相对要复杂些：

document.write(Math.cos(35))

document.write(math.sin(80))

二、常用对象的属性和方法

　　JavaScript为我们提供了一些非常有用的常用内部对象和方法。用户不需要用脚本来实现这些功能。这正是基于对

象编程的真正目的。

　　在JavaScript提供了string（字符串）、math（数值计算）和Date（日期）三种对象和其它一些相关的方法。从而

为编程人员快速开发强大的脚本程序提供了非常有利的条件。

１、常用内部对象

　　在JavaScript中对于对象属性与方法的引用，有两种情况：其一是说该对象是静态对象，即在引用该对象的属性或

方法时不需要为它创建实例；而另一种对象则在引用它的对象或方法是必须为它创建一个实例，即该对象是动态对象。

　　对JavaScript内部对象的引用，以是紧紧围绕着它的属性与方法进行的。因而明确对象的静动性对于掌握和理解

JavaScript内部对象是具有非常重要的意义。

１)、串对象

string对象：内部静态性。

访问properties和methods时，可使用（.）运算符实现。

基本使用格式：objectName.prop/methods

（１）串对象的属性

　　该对象只有一个属性，即length。它表明了字符串中的字符个数，包括所有符号。例：

　　mytest="This is a JavaScript"

　　mystringlength=mytest.length

　　最后mystringlength返回mytest字串的长度为20。

（２）串对象的方法

　　string对象的方法共有１９个。主要用于有关字符串在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的字符全部返回。

２)、算术函数的math对象

　功能：提供除加、减、乘、除以外的一引些自述运算。如对数，平方根等。

　静动性：静态对象

（１）主要属性

　　math中提供了６个属性，它们是数学中经常用到的常数Ｅ、以１０为底的自然对数ＬＮ１０、以２为底的自然对数

LN2、3.14159的PI、1/2的平方根SQRT1-2,2的平方根为SQRT2。

（２）主要方法

　绝对值：abs()

　正弦余弦值：sin(),cos()

　反正弦反余弦 :asin(), acos()

　正切反正切：tan(),atan()

　四舍五入：round()

　平方根：sqrt()

　基于几方次的值：Pow(base,exponent)

...

３)、日期及时间对象

　　功能：提供一个有关日期和时间的对象。

　　静动性：动态性，即必须使用New运算符创建一个实例。例:

　　MyDate=New Date()

　　Date对象没有提供直接访问的属性。只具有获取和设置日期和时间的方法。

　　日期起始值:１７７０年１月１日００:００:００。

　　获取日期的时间方法

　　getYear(): 返回年数

　　getMonth():返回当月号数

　　getDate(): 返回当日号数

　　getDay():返回星期几

　　getHours():返回小时数

　　getMintes(:返回分钟数

　　getSeconds():返回秒数

　　getTime() : 返回毫秒数

（２）设置日期和时间：

　　setYear();设置年

　　setDate():设置当月号数

　　setMonth():设置当月份数

　　setHours():设置小时数

　　setMintes():设置分钟数

　　setSeconds():设置秒数

　　setTime ():设置毫秒数

　　...

2、JavaScript中的系统函数

　　JavaScript中的系统函数又称内部方法。它提供了与任何对象无关的系统函数，使用这些函数不需创建任何实例,

可直接用。

返回字符串表达式中的值：

　方法名：eval（字串表达式），例：

　test=eval("8+9+5/2");

返回字符串ASCI码：

　方法名：unEscape (string)

返回字符的编码：

　方法名：escape(character)

返回实数：

　parseFloat(floustring);

返回不同进制的数：

　parseInt(numbestring ,rad.X)

　其中radix是数的进制，numbs字符串数

三、范例

　　下面是一个时钟显示的JavaScript文档。在文档中用了非常多的函数。

<style>

</style>

function showClock() {

}

function hideClock() {

}

var timerID = null

var timerRunning = false

function stopClock() {

if(timerRunning)

clearTimeout(timerID);

timerRunning = false

document.clock.face.value = "";

}

function showTime() {

var now = new Date();

var year = now.getYear();

var month = now.getMonth() + 1;

var date = now.getDate();

var hours = now.getHours();

var mins = now.getMinutes();

var secs = now.getSeconds();

var timeVal = "";

timeVal += ((hours <= 12) ? hours : hours - 12);

timeVal += ((mins < 10) ? ":0" : ":") + mins;

timeVal += ((secs <= 10) ? ":0" : ":") + secs;

timeVal += ((hours < 12) ? "AM" : "PM");

timeVal += ((month < 10) ? " on 0" : " on ") + month + "-";

timeVal += date + "-" + year;

document.clock.face.value = timeVal;

timerID = setTimeout("showTime()", 1000);

timerRunning = true

}

function startClock() {

stopClock();

showTime();

}

function windowOpener( indexnum ){

var loadpos="date.html"+"#"+indexnum;

controlWindow=window.open

(loadpos,"date","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable

=yes,width=620,height=400");

}

</script>

</head>

<tr>

<div align="center"><center><p><input TYPE="text" NAME="face" size="20" VALUE style="background-

color: #c0c0c0"> </p>

</center></div>

</form>

</td>

</tr>

</table>

</center></div>

</body>

</html>

　　本讲介绍了基于对象的JavaScript中常用内部对象属性、方法的使用。

阅读全文(73) | 回复(1) | 引用(0)

回复:JavaScript教程

alpha发表评论于2005-3-15 9:48:59

第五讲创建新对象

　使用JavaScript可以创建自己的对象。虽然JavaScript内部和浏览器本身的功能已十分强大，但JavaScript还是提

供了创建一个新对象的方法。使其不必像超文本标识语言那样，求于或其它多媒体工具，就能完成许多复杂的工作。

　　在JavaScript中创建一个新的对象是十分简单的。首先它必须定义一个对象，而后再为该对象创建一个实例。这个

实例就是一个新对象，它具有对象定义中的基本特征。

一、对象的定义

JavaScript对象的定义，其基本格式如下：

Function Object（属性表）

This.prop1=prop1

This.prop2=prop2

...

This.meth=FunctionName1;

This.meth=FunctionName2;

...

　　在一个对象的定义中，可以为该对象指明其属性和方法。通过属性和方法构成了一个对象的实例。如以下是一个关

于University对象的定义：

Function university(name,city,creatDate URL)

This.name=name

This.city=city

This.creatDate=New Date(creatDate)

This.URL=URL

其基本含义如下：

Name－指定一个“单位”名称。　

City－“单位”所在城市。　

CreatDate－记载university对象的更新日期。　

URL－该对象指向一个网址。

二、创建对象实例

　　一旦对象定义完成后，就可以为该对象创建一个实例了：

NewObject=New object();

其中Newobjet是新的对象，Object已经定义好的对象。例：

U1=New university(“云南省”，“昆明市”，"January 05,199712:00:00","http://www.YN.KM")

U2=New university(“云南电子科技大学”，“昆明”,"January 07,1997 12:00:00","htlp://www.YNKJ.CN")

三、对象方法的使用

　　在对象中除了使用属性外，有时还需要使用方法。在对象的定义中，我们看到This.meth=FunctionName语句，那就

是为定义对象的方法。实质对象的方法就是一个函数FunctionName，通过它实现自己的意图。

　　例:在university对象中增加一个方法，该方法是显示它自己本身，并返回相应的字串。

function university(name,city,createDate,URL)

This.Name=Name;

This.city=city;

This.createDate=New Date(creatDate)；

This.URL=URL；

This.showuniversity=showuniversity;

其中This.showuniversity就是定义了一个方法－－－showuniversity()。

而showuniversity()方法是实现university对象本身的显示。

function showuniversity()

For (var prop in this)

alert(prop+="+this[prop]+"");

其中alert是JavaScript中的内部函数，显示其字符串。

四、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，这与其它０到size的数组表示方法有所不同，当然你可根据需

要将数组的下标由１到size调整到０到size－１,可由下列实现:

Function arrayName (size)

For (var X=0; X<=size;X++)

this[X]=0;

this.lenght=size;

Return this;

　　从上面可以看出该方法是只是调整了this.lenght的位置，该位置是用于存储数组的大小的。从而调整后的数组的

下标将与其它语言一致。但请读者注意正是由于数组下标顺序由１到size，使得JavaScript中的对象功能更加强大。

b、创建数组实例

　　一个数组定义完成以后，还不能马上使用，必须为该数组创建一个数组实例：

　　Myarray=New arrayName(n);

并赋于初值：

Myarray[1]=“字串１”；

Myarray[2]=“字串２”；

Myarray[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页面中的链接属性。

有关锚数组的文档：

<A NAME=”MyAnchorsName1”> 定义第一个锚名

HTML Code

<A NAME=”MyAnchorsName2”> 定义第二个锚名

HTML Code

<A HREF=”#MyAnchorsName1”>建立锚的链接

<A HREF=”#MyAnchorsName2”> 建立锚的链接

….

该文档段建立了两面全锚的链接,可通过Anchors[]访问这些锚。document.Anchors[0]反映第一个锚,而

document.Anchors[1]反映第二个锚的有关信息。

五、范例

范例1：一个动态文字滚动的例子。

with (top.window.location)

{baseURL = href.substring (0,href.lastIndexOf ("/") + 1)}

total_toc_items = 0;

current_overID = "";

last_overID = "";

browser = navigator.appName;

version = parseInt(navigator.appVersion);

client=null;

loaded = 0;

if (browser == "Netscape" && version >= 3) client = "ns3";

function toc_item (img_name,icon_col,width,height) {

if (client =="ns3") {

img_prefix = baseURL + img_name;

this.icon_col = icon_col;

this.toc_img_off = new Image (width,height);

this.toc_img_off.src = img_prefix + "_off.gif";

this.toc_img_on = new Image (width,height);

this.toc_img_on.src = img_prefix + "_on.gif";

}

function new_toc_item (img_name,icon_row,width,height) {

toc_item [img_name] = new toc_item (img_name,icon_row,width,height);

}

function toc_mouseover (itemID) {

if (client =="ns3") {

current_overID = itemID;

if (current_overID != last_overID) {

document [current_overID].src = toc_item [current_overID].toc_img_on.src;

if (last_overID != "") {

document.images [last_overID].src = toc_item[last_overID].toc_img_off.src;

}

last_overID = current_overID;

}

function toc_mouseout () {

if (client =="ns3") {

if (current_overID != "") {

document.images [current_overID].src = toc_item [current_overID].toc_img_off.src;

}

current_overID = "";

last_overID = "";

}

new_toc_item ("1",2,120,20);

<!-- Begin

function bannerObject(p){

this.msg = MESSAGE

this.out = " "

this.pos = POSITION

this.delay = DELAY

this.i = 0

this.reset = clearMessage}

function clearMessage(){

this.pos = POSITION}

var POSITION = 50;

var DELAY = 150;

var MESSAGE = "这是一个动态JavaScript文字显示的例子";

var scroll = new bannerObject();

function scroller(){

scroll.out += " ";

if(scroll.pos>0)

for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++) { scroll.out +=" " ; }

if (scroll.pos>= 0)

scroll.out += scroll.msg

else

scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)

document.noticeForm.notice.value = scroll.out

scroll.out = " ";

scroll.pos--;

if (scroll.pos < -(scroll.msg.length)) { scroll.reset(); } setTimeout

('scroller()',scroll.delay);}

</script>

</head>

<body οnlοad="scroller()" bgcolor="#000000" link="#C0C0C0" vlink="#C0C0C0"

alink="#008080"

text="#C0C0C0">

<tr>

</form>

</td>

</tr>

</table>

</center></div>

</body></html>

范例2:颜色变化的例子。

<!--

function makearray(n) {

this.length = n;

for(var i = 1; i <= n; i++)

this[i] = 0;

return this;}

hexa = new makearray(16);

for(var i = 0; i < 10; i++)

hexa[i] = i;

hexa[10]="a";

hexa[11]="b";

hexa[12]="c";

hexa[13]="d";

hexa[14]="e";

hexa[15]="f";

function hex(i) {

if (i < 0)

return "00";

else if (i > 255)

return "ff";

else return "" + hexa[Math.floor(i/16)] + hexa[i%16];}

function setbgColor(r, g, b) {

var hr = hex(r);

var hg = hex(g);

var hb = hex(b);

document.bgColor = "#"+hr+hg+hb;}

function fade(sr, sg, sb, er, eg, eb, step) {

for(var i = 0; i <= step; i++) {

setbgColor( Math.floor(sr * ((step-i)/step) + er * (i/step)),

Math.floor(sg * ((step-i)/step) + eg * (i/step)), Math.floor(sb *

((step-i)/step) + eb * (i/step))); }}

function fadein() {

fade(255,0,0,0,0,255,100);

fade(0,0,255,0,255,0,100);

fade(0,255,0, 0,0,0, 100);}

fadein();

// -->

</script>

<body>

</body></html>

　　本讲介绍了用户自行创建对象的方法, 用户可根据需要创建自己的对象。并介绍了JavaScript中建数组的方法。

第六讲使用内部对象系统

　　使用浏览器的内部对象系统, 可实现与HTML文档进行交互。它的作用是将相关元素组织包装起来，提供给程序设计

人员使用，从而减轻编程人的劳动，提高设计Web页面的能力。

一、浏览器对象层次及其主要作用

　　除了前面提到过的文档document对象外，Navigator浏览器中还提供了窗口（Window）对象以及历史（History）

和位置（Location）对象。

浏览器对象(Navigator):

　　提供有关浏览器的信息

窗口对象(Windows)：

　　Window对象处于对象层次的最顶端，它提供了处理Navigator窗口的方法和属性。

位置对象(Location)：

　　Location对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态的对象。

历史对象(History)：

　　History对象提供了与历史清单有关的信息。

文档对象(Document) ：

　　document对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装起来供编程人员使用。

　　编程人员利用这些对象，可以对WWW浏览器环境中的事件进行控制并作出处理。在JavaScript中提供了非常丰富的

内部方法和属性,从而减轻了编程人员的工作,提高编程效率。这正是基于对象与面向对象的根本区别所在。在这些对象

系统中,文档对象属于非常重要的,它位于最低层,但对于我们实现Web页面信息交互起作关键作用。因而它是对象系统的

核心部分。

二、文档对象功能及其作用

　　在Navigator浏览器中，document文档对象是核心是，同时也是最重要的。见下表：

Links　　　Anchor　　Form　　　Method　　Prop

链接对象　　锚对象　窗体对象　　方法　　　对象

　　document对象的主要作用就是把这些基本的元素（如links,anchor等）包装起来，提供给编程人员使用。从另一个

角度看，document对象中又是由属性和方法组成。

１、document中三个主要的对象

　　在document中主要有：links,anchor,form等三个最重要的对象：

（１）anchor锚对象：

　　anchor对象指的是<A Name=...> </A>标识在HTML源码中存在时产生的对象。它包含着文档中所有的anchors信息

。

（２）链接links对象

　　link对象指的是用<A Href=...> </A>标记的连接一个超文本或超媒体的元素作为一个特定的URL。

（３）窗体（Form）对象

　　窗体对象是文档对象的一个元素，它含有多种格式的对象储存信息，使用它可以在JavaScript脚本中编写程序进行

文字输入，并可以用来动态改变文档的行为。通过document. Forms[]数组来使得在同一个页面上可以有多个相同的窗

体,使用forms[]数组要比使用窗体名字要方便得多。

　　例:下面就是一个使用窗体数组和窗体名字的例子。该程序使得两个窗体中的字段内容保持一致。

<body>

<form >

</form>

</form>

</body></html>

　　其中用了OnChnge事件(当窗体内容改变时激发)。第一个使用窗体名字标识my,第二个使用窗体数组Forms[]。其效

果是一致。

２、文档对象中的attribute属性

　　document对象中的attribute属性，主要用于在引用Href标识时，控制着有关颜色的格式和有关文档标题、文档原

文件的URL以及文档最后更新的日期。这部分元素的主要含义如下：

（１）链接颜色：alinkcolor

　　这个元素主要用于，当选取一个链接时，链接对象本身的颜色就按alinkcolo r指定改变。

（２）链接颜色：linkcolor

　　当用户使用<A Href=...> Text string </A>链接后，Textstring的颜色就会按Linkcolor所指定的颜色更新。

（３）浏览过后的颜色：VlinkColor

　　该属性表示的是已被浏览存储为已浏览过的链接颜色。

（４）背景颜色：bgcolor

　　该元素包含文档背景的颜色。

（５）前景颜色：Fgcolor

　　该元素包含HTML文档中文本的前景颜色。

３、文档对象的基本元素

（１）窗体属性：

　　窗体属性是与HTML文档中<Form>...</Form>相对应的一组对象在HTML文档所创建的窗体数，由length指定。通过

document.forms.length反映该文档中所创建的窗体数目。

（２）锚属性：anchors

　　该属性中，包含了HTML文档的所有<A> </A>标记为Name=...的语句标识。所有“锚”的数目保存在

document.anchors.length中。

（３）链接属性：links

　　链接属性是指在文档中<A>...</A>的由Href=...指定的数目，其链接数目保存在document.links.length中。

三、范例

例1:下面我们通过一个例子来说明文档对象的综合应用。输出结果见图6-2所示。

</HEAD>

<BOdy>

请输入数据：

</Form>

<A name="Link1" href="test31.htm">链接到第一个文本</a><br>

<A name="Link2" href="test32.htm">链接到第二个文本</a><br>

<A name="Link2" href="test33.htm">链接到第三个文本</a><br>

<BR>

document.write("文档有"+document.links.length+"个链接"+"<br>");

document.write("文档有"+document.anchors.length+"个锚点"+"<br>");

document.write("文档有"+document.forms.length+"个窗体");

</script>

</body>

</HTML>

例子2：下列程序随机产生每日一语。

<HTML>

<HEAD>

<!--

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("<FONT SIZE=8 COLOR=DARKBLUE>" + tips[index]+"</FONT>");

</Script>

</HEAD>

</BODY>

</HTML>

　　本讲主要介绍了JavaScript对象系统的使用方法，其中重点介绍了文档对象及使用。

第七讲窗口及输入输出

　　JavaScript是基于对象的脚本编程语言，那么它的输入输出就是通过对象来完成的。其中有关输入可通过窗口

（Window）对象来完成，而输出可通过文档（document）对象的方法来实现。

一、窗口及输入输出

请看下面例子：

<HTML>

<Head>

Var test=window.prompt("请输入数据:");

document.write(test+"JavaScript输入输出的例子");

</script>

</Head>

</HTML>

　　其中window.prompt()就是一个窗口对象的方法，其基本作用是，当装入Web页面时在屏幕上显示一个具有“确定”

和“取消”的对话框，让你输出数据。document.writle是一个文档对象的方法，它的基本功能，是实现Web页面的输出

显示。见下图所示。

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、窗口对象中的属性

　　窗口对象中的属性主要用来对浏览器中存在的各种窗口和框架的引用，其主要属性有以下几个：

frames 文档中帧的数目

frames（帧）作为实现一个窗口的分隔操作，起到非常有用的作用，在使用注意以下几点：

　frames属性是通过HTML标识<Frames>的顺序来引用的，它包含了一个窗口中的全部帧数。

　帧本身已是一类窗口，继承了窗口对象所有的全部属性和方法。

Parent 指明当前窗口或帧的父窗口。

defaultstatus:默认状态，它的值显示在窗口的状态栏中。

status:包含文档窗口中帧中的当前信息。

top:包括的是用以实现所有的下级窗口的窗口。

window.指的是当前窗口

self:引用当前窗口。

5、输出流及文档对象

　　在JavaScript文档对象中，提供了用于显示关闭、消除、打开HTML页面的输出流。

（１）创建新文档open()方法

　　使用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等。

（２）write()、writeln()输出显示。

　　该方法主要用来实现在Web页面上显示输出信息。在实际使用中，需注意以下几点：

writeln()与write()唯一不同之处在于在未尾加了一个换符。

为了正常显示其输出信息，必须指明<pre> </Pre>标记，使之告诉编辑器。

输出的文档类型，可以由浏览器中的有效的合法文本类型所确定。

（３）关闭文档流close()

　　在实现多个文档对象中，必须使用close()来关闭一个对象后，才能打开另一个文档对象。

（４）清除文档内容clear()

　　使用该方法可清除已经打开文档的内容。

二、简单的输入、输出例子

　　在JavaScript中可以非常方便地实现输入输出信息，并与用户进行交互。

1、JavaScript信息的输入

　　通过使用JavaScript中所提供的窗口对象方法prompt(), 就能完成信息的输入。该方法提供了最简便的信息输入方

式，其基本格式如下：

Window.prompt("提示信", 预定输入信息);

　　此方法首先在浏览器窗口中弹出一个对话框, 让用户自行输入信息。一旦输入完成后，就返回用户所输入信息的值

。例:

test=prompt（“请输入数据:”，”this is a JavaScript”）

　　实际上prompt()是窗口对象的一个方法。因为缺省情况下所用的对象就是window对象, 所以windows对象可以省略

不写。

2、输出显示

　　每种语言，都必须提供信息数据的输出显示。JavaScript也是一样，它提供有几个用于信息输出显示的方法。比较

常用的有window.alert()、document.write和及document.writln()方法。

１)、document.write()方法和document.writeln()方法

　　document是JavaScript中的一个对象在它中封装许多有用的方法，其中write()和writeln()就是用于将文本信息

直接输出到浏览器窗口中的方法。

document.write()；

document.writeln()；

说明：

　write()和writeln()方法都是用于向浏览器窗口输出文本字串；

　二者的唯一区别就是writeln()方法自动在文本之后加入回车符。

２)、 window.alert()输出

　　在JavaScript为了方便信息输出，JavaScript提供了具有独立的对话框信息输出─alert()方法。

alert()方法是window对象的一个方法，因此在使用时，不需要写window窗口对象名，而是直接使用就行了。它主要用

途用在输出时产生有关警告提示信息或提示用户，一旦用户按“确定”钮后，方可继续执行其他脚本程序。例:

<HTML>

<HEAD>

</HEAD>

<BODY>

alert("这是一个JavaScript测试程序");

</Script>

</BODY>

</HTML>

３)、利用输入、输出方法实现交互

　　在JavaScript中，可以利用prompt()方法和write()方法实现与Web页面用户进行交互。例下面就是一个有关实现交

互的例子。

<HTML>

<HEAD>

</HEAD>

<BODY>

<!-- Hide From Other Browsers

document.write("<H1>有关交互的例子");

my=prompt("请输入数据:");

document.write(my+"</H1>");

document.close();

// Stop Hiding from Other Browsers-->

</Script>

</BODY>

</HTML>

从上面程序可以看出：

　可通过write()和prompt()方法实现交互。

　在JavaScript脚本语言中可以使用HTML标识语言的代码。从而实现混合编程。其中<H1>和<Br>就是HTML标识符。

三、范例

下列程序演示了你进入主页所停留的时间。

<html>

<td vAlign="top" width="135">您在此停留了：

</form>

var id, iM = 0, iS = 1;

start = new Date();

function go()

{

now = new Date();

time = (now.getTime() - start.getTime()) / 1000;

time = Math.floor( time);

iS = time % 60;

iM = Math.floor( time / 60);

if ( iS < 10)

document.myform.clock.value = " " + iM + " 分 0" + iS + " 秒";

else

document.myform.clock.value = " " + iM + " 分 " + iS + " 秒";

id = setTimeout( "go()", 1000);

}

go();

</script>

</body>

</html>

在浏览器中的结果，见下图1所示。

第八讲 WEB页面信息的交互

　　要实现动态交互，必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识。

一、窗体基础知识

　　窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互，而用不着在之前首先进行数据输入，就可以

实现动态改变Web文档的行为。

１、什么是窗体对象

　　窗体（Form）:它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms[]数组来实现不

同窗体的访问。

</form>

</form>

　　在Forms[0]中共有三个基本元素，而Forms[1]中只有两个元素。

　　窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：

<Form

Name ="表的名称"

Target ="指定信息的提交窗口"

action ="接收窗体程序对应的URL"

Method =信息数据传送方式(get/post)

enctype ="窗体编码方式"

[onsubmit ="JavaScript代码"]>

</Form>

２、窗体对象的方法

　　窗体对象的方法只有一个--submit()方法，该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体,则使用

下列格式：

document.mytest.submit()

３、窗体对象的属性

　　窗体对象中的属性主要包括以下：elements name action target encoding method.

　　除Elements外，其它几个均反映了窗体中标识中相应属性的状

态，这通常是单个窗体标识；而elements常常是多个窗体元素值的数组，例：

elements[0].Mytable.elements[1]

４、访问窗体对象

　　在JavaScript中访问窗体对象可由两种方法实现：

（１）通过访问窗体

　　在窗体对象的属性中首先必须指定其窗体名，而后就可以通过下列标识访问窗体如：document.Mytable()。

（２）通过数组来访问窗体　　除了使用窗体名来访问窗体外，还可以使用窗体对象数组来访问窗体对象。但需要注意

一点，因窗体对象是由浏览器环境的提供的，而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体

对象的访问：

document.forms[0]

document.forms[1]

document.forms[2]

...

５、引用窗体的先决条件

　　在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创建窗体，并将定义窗体部分放在引用之前。

二、窗体中的基本元素

　　窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。

　　在JavaScript中要访问这些基本元素，必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素

主要是通过该元素的属性或方法来引用。其引用的基本格式见下:

formName.elements[].methadName (窗体名.元素名或数组.方法)

formName.elemaent[].propertyName(窗体名.元素名或数组.属性)

下面分别介绍：

１、Text单行单列输入元素

　功能：对Text标识中的元素实施有效的控制。

　基本属性：

　　Name：设定提交信息时的信息名称。对应于HTML文档中的Name。

　　Value：用以设定出现在窗口中对应HTML文档中Value的信息。

　　defaultvalue：包括Text元素的默认值

　基本方法：

　　blur()：将当前焦点移到后台。

　　select()：加亮文字。

　主要事件：

　　onFocus：当Text获得焦点时，产生该事件。

　　OnBlur：从元素失去焦点时，产生该事件。

　　Onselect：当文字被加亮显示后，产生该文件。

　　onchange：当Text元素值改变时，产生该文件。

　例：...

</form>

...

document.mytest.value="that is a Javascript";

document.mytest.select();

document.mytest.blur();

</script>

２、textarea多行多列输入元素

　功能：实施对Textarea中的元素进行控制。

　基本属性

name：设定提交信息时的信息名称，对应HTML文档Textarea的Name。

Value：用以设定出现在窗口中对应HTML文档中Value的信息。

Default value：元素的默认值。

　方法：

blur()：将输入焦点失去

select()：将文字加亮后

　事件：

onBlur:当失去输入焦点后产生该事件

onFocus:当输入获得焦点后，产生该文件

Onchange:当文字值改变时，产生该事件

Onselect:当文字加亮后，产生该文件

３、Select选择元素

　功能：实施对滚动选择元素的控制。

　属性：

name:设定提交信息时的信息名称，对应文档select中的name。

Length:对应文档select中的length

options:组成多个选项的数组

selectIndex;该下标指明一个选项

select在中每一选项都含有以下属性：

Text:选项对应的文字

selected:指明当前选项是否被选中

Index:指明当前选项的位置

defaultselected:默认选项

　事件：

OnBlur：当select选项失去焦点时，产生该文件。

onFocas:当select获得焦点时，产生该文件。

Onchange:选项状态改变后，产生该事件。

４、Button按钮

　功能：实施对Button按钮的控制。

　属性：

Name:设定提交信息时的信息名称，对应文档中button的Name。

Value:用以设定出现在窗口中对应HTML文档中Value的信息。

　方法：

click()该方法类似于一个按下的按钮。

　事件：

onclick当单击button按钮时，产生该事件。

例：

</form>

...

document.elements[0].value="mytest"; //通过元素访问

或

document.testcallvalue="mytest"; // 通过名字访问

</script>

.....

５、checkbox检查框

　功能：实施对一个具有复选框中元素的控制。

　属性：

name:设定提交信息时的信息名称。

Value:用以设定出现在窗口中对应HTML文档中Value的信息。

Checked:该属性指明框的状态true/false.

defauitchecked:默认状态

　方法：

click()该方法使得框的某一个项被选中。

　事件：

onclick:当框的选被选中时，产生该事件。

６、radio无线按钮

　功能：实施对一个具单选功能的无线按钮控制。

　属性：

name:设定提交信息时的信息名称，对应HTML文档中的radio的name相同

value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中的radio的name。

length:单选按钮中的按钮数目。

defalechecked:默认按钮。

checked:指明选中还是没有选中。

index:选中的按钮的位置。

　方法：

chick():选定一个按钮。

　事件：

onclick:单击按钮时，产生该事件。

７、hidden:隐藏

　功能：实施对一个具有不显示文字并能输入字符的区域元素的控制。

　属性：

name:设定提交信息时的信息名称，对应HTML文档的hidden中的Name。

Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档hidden中的value。

defaleitvalue:默认值

８、Password口令

　功能：实施对具有口令输入的元素的控制。

　属性：

Name:设定提交信息时的信息名称，对应HTML文档中password中的name。

Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中password中的Value。

defaultvalu:默认值

　方法

select():加亮输入口令域。

blur():使这丢失passward输入焦点。

focus():获得password输入焦点。

９、submit提交元素

　功能：实施对一个具有提交功能按钮的控制。

　属性：

name:设定提交信息时的信息名称，对应HTML文档中submit。

Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中value。

　方法

click()相当于按下submit按钮。

　事件：

onclick()当按下该按钮时，产生该事件。

三、范例

　　下面我们演示通过点击一个按钮（red）来改变窗口颜色，点击“调用动态按钮文档”调用一个动态按钮文档。

//原来的颜色

document.bgColor="blue";

document.vlinkColor="white";

document.linkColor="yellow";

document.alinkcolor="red";

//动态改变颜色

function changecolor(){

document.bgColor="red";

document.vlinkColor="blue";

document.linkColor="green";

document.alinkcolor="blue";

}

</script>

</HEAD>

<A href="test8_2.htm"> 调用动态按钮文档</a>

<form >

</form>

</BODY>

</HTML>

输出结果见下图1所示。

动态按钮程序。

<tr>

<p><input type="submit" name="banner" VALUE="Submit"

onClick="alert('You have to put an \'action=[url]\' on the form

tag!!')"> <br>

var id,pause=0,position=0;

function banner() {

// variables declaration

var i,k,msg=" 这里输入你要的内容";// increase msg

k=(30/msg.length)+1;

for(i=0;i<=k;i++) msg+=" "+msg;

// show it to the window

document.form2.banner.value=msg.substring(position,position-30);

// set new position

if(position++==msg.length) position=0;

// repeat at entered speed

id=setTimeout("banner()",60); }

// end -->

banner();

</script></p>

</form>

</td>

</tr>

</table>

</center></div>

<BODY>

</BODY>

</HTML>

输出结果见下图所示。

　　本讲介绍了使用JavaScript脚本实现Web页面信息交互的方法。其中主要介绍了窗体中的基本元素的主要功能和使

用。

第九讲实现更复杂的交互

一、什么是框架

　　框架Frames最主要功用是"分割"视窗，使每个"小视窗"能显示不同的HTM L文件，不同框架之间可以互动

(interact)，这就是说不同框架之间可以交换讯息与资料。例如:假设您开了两个frames，第一个frame可显示书的目录

，第二个frame则显示章节的具体内容。

　　框架可以将屏幕分割成不同的区域，每个区域有自己的URL，通过Frames[]数组对象来实现不同框架的访问。实际

上框架对象本身也一类窗口，它继承了窗口对象的所有特征，并拥有所有的属性和方法。

</HEAD>

</Frameset>

</HTML>

　　以上HTML标识将屏幕分成三个框架。先将窗口分成以二行为单位的窗口，之后再按分成二个窗口。并在相应的框架

中放入自己的HTML文档。

　　通过[Framset ]告诉浏览器您要设置几个框架；rows这项参数告诉浏览器您想将视窗分割成几列；而 cols这项参

数是告诉浏览器您想将视窗分割成几行。

　　可以用很多组的 <frameset...> tags 将视窗分割得更复杂。

　　可以给每个frame一个"名字" (name)。frame的名字在JavaScript语法中的地位非常重要。

　　可以用 <src> 告诉浏览器您要载入哪一个 HTML文件。

二、如何访问框架

　　在前面我们介绍过使用document.forms[]实现单一窗体中不同元素的访问。而要实现框架中多窗体的不同元素的访

问，则必须使用window对象中的Frames属性。Frames属性同样也是一个数组，他在父框架集中为每一个子框架设有一项

。通过下标实现不同框架的访问:

parent.frames[Index1].docuement.forms[index2]

通过parent.frames.length确定窗口中窗体的数目。

除了使用数组下标来访问窗体外还可以使用框架名和窗体名来实现各元素的访问：

parent.framesName.decument.formNames.elementName.(m/p)

三、范例

　　下面我们通过一个具体的实例, 来说明利用JavaScript脚本在WEB中实现更为复杂的信息交互。该例子是在一个多

窗口中实现窗体信息的动态交互,在程序中首先在浏览器窗口中制作三个用于窗体交互的窗口,每个窗体窗口实现不同信

息的动态交互。

main.html为主调用文档它首先将窗口划分为具有二行的窗体,尔后再将第二行的窗体划分为具有二列的窗体；

1.html为显示标题文档；

2.html为第二框架文档其中需要注意的是:

通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”；

3.html为第三框架文档。

主调文档

主要作用是将窗口划分为具有二行的窗体,尔后再将第二行的窗体划分为具有二列的窗体。

main.htm

<HTML>

<HEAD>

</HEAD>

</Frameset>

</HTML>

第一个框架

主要作用是显示标题文档。

1.htm

<HTML>

<HEAD>

</HEAD>

<H2>使用框架实现WEB交互</H2>

</HTML>

第二个框架

主要作用是实现交互。可以通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”。

2.htm

<HTML>

<HEAD>

</HEAD>

<Body>

请选择城市：<BR>

<Option>云南省

<Option>四川省

<Option>贵州省

<Option>山东省

<Option>江苏省

<Option>浙江省

<Option>安徽省

<Option>河南省

</select><BR>

<HR>

</Form>

<pre>

document.test9_1.elements[0].options[0].text="昆明市";

document.test9_1.elements[0].options[1].text="成都市";

</script>

</pre>

</Body>

</HTML>

第三个框架

主要作用是实现交互。

3.htm

<HTML>

<HEAD>

</HEAD>

<Body>

请输入用户名：

<HR>

请选择:

<HR>

<BR>

</Form>

document.test9_2.elements[0].value="劳动和社会保障";

document.test9_2.elements[1].checked=true;

document.test9_2.elements[2].checked=true;

document.test9_2.elements[3].checked=false;

</script>

</Body>

</HTML>

转载于:https://www.cnblogs.com/du892294464/p/6686519.html

weixin_30593261

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS总结

JS知识总结　　JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与...
复制链接

扫一扫

JS总结

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