JavaScript介绍（二）

痛定思痛。 2022-08-23 14:59 126阅读 0赞

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

一、控制语句

在任何一种语言中，程序控制流是必须的，它能使得整个程序减小混乱，使之顺利按其一定的方式执行。下面是JavaScript常用的程序控制流结构及语句:

１、if条件语句

![Image 1][]**　基本格式**

if（表述式）

语句段１；

......

else

语句段２；

.....

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

![Image 1][]　说明：

*  
 *  if -else 语句是JavaScript中最基本的控制语句，通过它可以改变语句的执行顺序。 
 *  表达式中必须使用关系语句，来实现判断，它是作为一个布尔值来估算的。 
 *  它将零和非零的数分别转化成false和true。
 *  若if后的语句有多行，则必须使用花括号将其括起来。

1.  
2.  if语句的嵌套

if（布尔值）语句１；

else（布尔值）语句２；

else if（布尔值）语句３；

……

else 语句４；

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

**２、****For循环语句**

![Image 1][]　基本格式

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

语句集；

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

![Image 1][]　说明：

*  初始化参数告诉循环的开始位置，必须赋予变量的初值；
 *  条件：是用于判别循环停止时的条件。若条件满足，则执行循环体，否则 跳出。 
 *  增量：主要定义循环控制变量在每次循环时按什么方式变化。 
 *  三个主要语句之间，必须使用逗号分隔。

**３、****while循环**

![Image 1][]　基本格式

while（条件）

语句集；

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

![Image 1][]　For与while语句

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

４、break和continue语句

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

二、函数

函数为程序设计人员提供了一个丰常方便的能力。通常在进行一个复杂的程序设计时，总是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个**函数**。从而，使各部分充分独立，任务单一，程序清晰，易懂、易读、易维护。JavaScript函数可以封装那些在程序中可能要多次用到的模块。并可作为事件驱动的结果而调用的程序。从而实现一个函数把它与事件驱动相关联。这是与其它语言不样的地方。

**１、****JavaScript函数定义**

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

函数体;.

Return 表达式;

说明：

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

![Image 1][]　函数由关键字Function定义。

![Image 1][]　函数名：定义自己函数的名字。

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

![Image 1][]　通过指定函数名（实参）来调用一个函数。

![Image 1][]　必须使用Return将值返回。

![Image 1][]　函数名对大小写是敏感的。

２、函数中的形式参数：

在函数的定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个数呢？在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的状态。

JavaScript语言是基于对象的（Object-Based），而不是面向对象的（object-oriented）。

**四、对象的基础知识**

１、对象的基本结构

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自动将的属性取出来，直到最后为此。

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

**　**

**４、**对象属性的引用

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

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

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))

**6**、常用对象的属性和方法

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

在JavaScript提供了string（字符串）、math（数值计算）和Date（日期）三种对象和其它一些相关的方法。从而为编程人员快速开发强大的脚本程序提供了非常有利的条件。

**1）、常用内部对象**

在JavaScript中对于对象属性与方法的引用，有两种情况：其一是说该对象是静态对象，即在引用该对象的属性或方法时不需要为它创建实例；而另一种对象则在引用它的对象或方法是必须为它创建一个实例，即该对象是动态对象。

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

2)、串对象

*   *  
     *  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的字符全部返回。

3)、算术函数的math对象

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

![Image 1][]　静动性：静态对象

（１）主要属性

math中提供了６个属性，它们是数学中经常用到的常数Ｅ、以１０为底的自然对数ＬＮ１０、以２为底的自然对数LN2、3.14159的PI、1/2的平方根SQRT1-2,2的平方根为SQRT2。

（２）主要方法

![Image 1][]　绝对值：abs()

![Image 1][]　正弦余弦值：sin(),cos()

![Image 1][]　反正弦反余弦 :asin(), acos()

![Image 1][]　正切反正切：tan(),atan()

![Image 1][]　四舍五入：round()

![Image 1][]　平方根：sqrt()

![Image 1][]　基于几方次的值：Pow(base,exponent)

...

4)、日期及时间对象

![Image 1][]　功能：提供一个有关日期和时间的对象。

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

MyDate=New Date()

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

![Image 1][]　日期起始值:１７７０年１月１日００:００:００。

1.  
2.  获取日期的时间方法

![Image 1][]　getYear(): 返回年数

![Image 1][]　getMonth():返回当月号数

![Image 1][]　getDate(): 返回当日号数

![Image 1][]　getDay():返回星期几

![Image 1][]　getHours():返回小时数

![Image 1][]　getMintes(:返回分钟数

![Image 1][]　getSeconds():返回秒数

![Image 1][]　getTime() : 返回毫秒数

（２）设置日期和时间：

![Image 1][]　setYear();设置年

![Image 1][]　setDate():设置当月号数

![Image 1][]　setMonth():设置当月份数

![Image 1][]　setHours():设置小时数

![Image 1][]　setMintes():设置分钟数

![Image 1][]　setSeconds():设置秒数

![Image 1][]　setTime ():设置毫秒数

...

7、JavaScript中的系统函数

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

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

![Image 1][]　方法名：eval（字串表达式），例：

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

1.  
2.  返回字符串ASCI码：

![Image 1][]　方法名：unEscape (string)

3．返回字符的编码：

![Image 1][]　方法名：escape(character)

4．返回实数：

parseFloat(floustring);

５、返回不同进制的数：

parseInt(numbestring ,rad.X)

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

**　** 使用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中的内部函数，显示其字符串。
 *  1.  
    2.  **使用New创建数组**
    3.  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”；
        
        一旦给数组赋于了初值后，数组中就具有真正意义的数据了，以后就可以在程序设计过  
        程中直接引用。
    4.  **创建多维数组**
    5.  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\]、
        
        …来引用。
    6.  **内部数组**
    
    在Java中为了方便内部对象的操作,可以使用窗体(Forms)、框架(Frames)、  
    元素(element)、链接(links)和锚(Anchors)数组实现对象的访问。
    
    ![Image 1][]　anchors\[\]:使用《A name=“anchorName“》标识来建立锚的链接。
    
    ![Image 1][]　links\[\]: 使用<A href=”URL”>来定义一个越文本链接项。
    
    ![Image 1][]　Forms\[\]: 在程序中使用多窗体时,建立该数组。
    
    ![Image 1][]　Elements\[\]:在一个窗口中使用从个元素时,建立该数组。 
    
    ![Image 1][]　Frames\[\]:建立框架时,使用该数组
    
    ![Image 1][]　anchors\[\]用于窗体的访问(它是通过《form name=“form1”》所指定的),link\[\]  
    用于被链接到的锚点的访问(它是通过《a href=URL》所指定的)。Forms\[\]反映窗体的  
    属性,而anchors\[\]反映Web页面中的链接属性。
    
    有关锚数组的文档：
    
        <HTML>
        <HEAD>
        <BODY>
        <A NAME=”MyAnchorsName1”> 定义第一个锚名
        HTML Code
        <A NAME=”MyAnchorsName2”> 定义第二个锚名
        HTML Code 
        <A HREF=”#MyAnchorsName1”>建立锚的链接
        <A HREF=”#MyAnchorsName2”> 建立锚的链接
        ….
    
    该文档段建立了两面全锚的链接,可通过Anchors\[\]访问这些锚。document.Anchors\[0\]反映第一个锚,而document.Anchors\[1\]反映第二个锚的有关信息。
    
    **范例1:颜色变化的例子。**
    
    test5\_2.htm
    
        <html>
        <head>
        <script>
        
        </script>
        <body>
        </body>
        </html>

[Image 1]: