JavaScript教程

最新推荐文章于 2022-03-24 22:07:10 发布

hbrqlpf

最新推荐文章于 2022-03-24 22:07:10 发布

阅读量1.2k

点赞数

分类专栏： HTML/CSS/JavaScript 文章标签： javascript 文档 html 语言浏览器框架

本文链接：https://blog.csdn.net/hbrqlpf/article/details/1810500

版权

HTML/CSS/JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

第一讲 JavaScript 语言概况

一、什么是JavaScript

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

1、是一种脚本编写语言

2、基于对象的语言。

3、简单性

4、安全性

5、动态性的

6、跨平台性

JavaScript 是一种新的描述语言，它可以被嵌入到 HTML 的文件之中。 JavaScript语言可以做到回应使用者的需求事件 (如： form 的输入) ，而不用任何的网络来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给服务器 (server)处理，再传回来的过程，而直接可以被客户端 (client) 的应用程序所处理。

二、JavaScript 和Java 的区别

　　虽然JavaScript与Java有紧密的联系，但却是两个公司开发的不同的两个产品。Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发；而JavaScript是Netscape公司的产品，其目的是为了扩展Netscape Navigator功能，而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言，下面对两种语言间的异同作如下比较：

1 、基于对象和面向对象

Java是一种真正的面向对象的语言，即使是开发简单的程序，必须设计对象。 JavaScript是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。它是一种基于对象（Object Based）和事件驱动（Event Driver）的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。

2 、解释和编译

两种语言在其浏览器中所执行的方式不一样。Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的虚拟机，它可以通过虚拟机实现独立于某个特定的平台编译代码的束缚。JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户端由浏览器解释执行。

3 、强变量和弱变量

两种语言所采取的变量是不一样的。Java采用强类型变量检查，即所有变量在编译之前必须作声明。JavaScript中变量声明，采用其弱类型。即变量在使用前不需作声明，而是解释器在运行时检查其数据类型

4 、代码格式不一样

Java是一种与HTML无关的格式，必须通过像HTML中引用外媒体那么进行装载，其代码以字节代码的形式保存在独立的文档中。JavaScript的代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载。编写HTML文档就像编辑文本文件一样方便。

5 、嵌入方式不一样

在HTML文档中，两种编程语言的标识不同，JavaScript使用<Script>...</Script>来标识，而Java使用<applet>...</applet>来标识。

6 、静态联编和动态联编

Java采用静态联编，即Java的对象引用必须在编译时的进行，以使编译器能够实现强类型检查。JavaScript采用动态联编，即JavaScript的对象引用在运行时进行检查，如不经编译则就无法实现对象引用的检查。

第二讲 JavaScript 基本数据结构

一、JavaScript 代码的加入

　　 JavaScript 的脚本包括在 HTML 中，它成为 HTML 文档的一部分。与 HTML 标识相结合，构成了一个功能强大的 Internet 网上编程语言。可以直接将JavaScript脚本加入文档：

JavaScript语言代码；

JavaScript 语言代码;

</Script>

说明：

　通过标识<Script>...</Script>指明JavaScript脚本源代码将放入其间。

　通过属性Language ="JavaScript"说明标识中是使用的何种语言，这里是JavaScript语言, 表示在JavaScript中使用的语言。

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

二、基本数据类型

　　JavaScript脚本语言同其它语言一样，有它自身的基本数据类型、表达式和算术运算符以及程序的基本框架结构。

1、基本数据类型

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

2、常量

整型常量

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

实型常量

实型常量是由整数部分加小数部分表示，如12.32、193.98 。可以使用科学或标准方法表示：5E7、4e5等。

布尔值

布尔常量只有两种状态：True或False。它主要用来说明或代表一种状态或标志，以说明操作流程。

字符型常量

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

空值

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

特殊字符

同Ｃ语言一样，JavaScript中同样以有些以反斜杠（／）开头的不可显示的特殊字符。通常称为控制字符。

3、变量

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

变量的命名

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

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

Ｂ、不能使用JavaScript中的关键字作为变量。

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

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

变量的类型

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

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

变量的声明及其作用域

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

对于变量还有一个重要性──那就是变量的作用域。在JavaScript中同样有全局变量和局部变量。全局变量是定义在所有函数体之外，其作用范围是整个函数；而局部变量是定义在函数体之内，只对其该函数是可见的，而对其它函数则是不可见的。

三、表达式和运算符

１、表达式

　　在定义完变量后，就可以对它们进行赋值、改变、计算等一系列操作，这一过程通常又叫称一个叫表达式来完成，可以说它是变量、常量、布尔及运算符的集合，因此表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等。

２、运算符

　　运算符完成操作的一系列符号，在JavaScript中有算术运算符，如＋、-、*、/等；有比较运算符如!＝、＝＝等; 有逻辑布尔运算符如！（取反）、|、||; 有字串运算如＋、＋＝等。

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

操作数１运算符操作数２

单目运算符，只需一个操作数，其运算符可在前或后。

（１）算术运算符

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

双目运算符：

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

单目运算符：

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

（２）比较运算符

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

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

（３）布尔逻辑运算符

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

!（取反)、&=（与之后赋值）、 &（逻辑与）、 |=（或之后赋值）、 |（逻辑或）、 ^=（异或之后赋值）、 ^（逻辑异或）、 ?:（三目操作符）、||（或）、==(等于)、|=(不等于)。

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

操作数？结果１：结果２

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

第三讲 JavaScript 程序构成

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

一、程序控制流

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

１、if条件语句

２、for循环语句

３、while循环

４、break和continue语句

二、函数

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

１、JavaScript函数定义

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

函数体;.

Return 表达式;

}

２、函数中的形式参数：

在函数的定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个数呢？在 JavaScript 中可通过 arguments .Length 来检查参数的个数。

三、事件驱动及事件处理

１、基本概念

JavaScript是基于对象(object-based)的语言。这与Java不同,Java是面向对象的语言。而基于对象的基本特征，就是采用事件驱动 (event-driven) 。它是在用形界面的环境下，使得一切输入变得简单化。通常鼠标或热键的动作我们称之为事件（ Event ），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动（ Event Driver ）。而对事件进行处理程序或函数，我们称之为事件处理程序（ Event Handler ）。

２、事件处理程序

在 JavaScript 中对象事件的处理通常由函数 (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对象不再拥有焦点、而退到后台时，引发该文件，他与onFocus事件是一个对应的关系。

（６）载入文件 onLoad

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

（７）卸载文件 onUnload

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

第四讲 基于对象的JavaScript 语言

JavaScript 语言是基于对象的（ Object-Based ），而不是面向对象的（ object-oriented ）。之所以说它是一门基于对象的语言，主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来，从而形成一个非常强大的对象系统。

　　虽然JavaScript语言是一门基于对象的，但它还是具有一些面向对象的基本特征。它可以根据需要创建自己的对象，从而进一步扩大JavaScript的应用范围，增强编写功能强大的Web文档。

一、对象的基础知识

１、对象的基本结构

　　 JavaScript 中的对象是由属性 (properties) 和方法 (methods) 两个基本的元素的构成的。前者是对象在实施其所需要行为的过程中，实现信息的装载单位，从而与变量相关联；后者是指对象能够按照设计者的意图而被执行，从而与特定的函数相联。

２、引用对象的途径

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

引用 JavaScript 内部对象；

由浏览器环境中提供；

创建新对象。

一个对象在被引用之前，这个对象必须存在，否则引用将毫无意义，而出现错误信息。从上面中我们可以看出JavaScript引用对象可通过三种方式获取。要么创建新的对象，要么利用现存的对象。

３、有关对象操作语句

　　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 Class(Parameters table);

其中Newobject创建的新对象：Class是类名； parameters table参数表；new是JavaScript中的命令语句。

４、对象属性的引用

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

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

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

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

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

５、对象的方法的引用

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

ObjectName.methods()

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

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

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

1、常用内部对象

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

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

1)、串对象

string对象：内部静态性

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

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

（1）串对象的属性

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

mytest="This is a JavaScript"

mystringlength=mytest.length

（2）串对象的方法

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

2）、算术函数的math对象

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

　静动性：静态对象

（1）主要属性

math中提供了６个属性，它们是数学中经常用到的常数

（2）主要方法

绝对值：abs()

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

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

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

　四舍五入：round()

　平方根：sqrt()

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

3）、日期及时间对象

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

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

MyDate=New Date()

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

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

（1）获取日期的时间方法

getYear()：返回年数

getMonth()：返回当月号数

getDate()：返回当日号数

　getDay()：返回星期几

getHours()：返回小时数

　getMintes()：返回分钟数

getSeconds()：返回秒数

getTime()：返回毫秒数

（2）设置日期和时间：

setYear()：设置年

　setDate()：设置当月号数

　setMonth()：设置当月份数

　setHours()：设置小时数

　setMintes()：设置分钟数

setSeconds()：设置秒数

　setTime ()：设置毫秒数

2、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字符串数

第五讲 创建新对象

使用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")

三、对象方法的使用

在对象中除了使用属性外，有时还需要使用方法。在对象的定义中，我们看到

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 中的数组

1 、使用 New 创建数组

2 、 JavaScript 中没有提供像其它语言具有明显的数组类型，但可以通过 function 定义一个数组，并使用 New 对象操作符创建一个具有下标的数组。从而可以实现任何数据类型的存储。

a、定义对象的数组

Function arrayName(size){

This.length=Size;

for(var X=1; X<=size;X++)

this[X]=0;

Reture this;

}

其中arrayName是定义数组的一个名子，Size是有关数组大小的值（1-size），即数组元素的个数。通过for循环对一个当前对象的数组进行定义，最后返回这个数组。

b、创建数组实例

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

Myarray=New arrayName(n);

并赋于初值：

Myarray[1]=“字串１”；

Myarray[2]=“字串２”；

Myarray[3]=“字串３”；

Myarray[n]=“字串n”；

一旦给数组赋于了初值后，数组中就具有真正意义的数据了，以后就可以在程序设计过

程中直接引用。

3 、创建多维数组

4、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]、

…来引用。

5 、内部数组

在 Java 中为了方便内部对象的操作 , 可以使用窗体 (Forms) 、框架 (Frames) 、

元素 (element) 、链接 (links) 和锚 (Anchors) 数组实现对象的访问。

anchors[]:使用《A name=“anchorName“》标识来建立锚的链接。

links[]: 使用<A href=”URL”>来定义一个越文本链接项。

Forms[]: 在程序中使用多窗体时,建立该数组。

Elements[]:在一个窗口中使用从个元素时,建立该数组。

　Frames[]:建立框架时,使用该数组

第六讲 使用内部对象系统

使用浏览器的内部对象系统 , 可实现与 HTML 文档进行交互。它的作用是将相关元素组织包装起来，提供给程序设计人员使用，从而减轻编程人的劳动，提高设计 Web 页面的能力。

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

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

浏览器对象 (Navigator)

提供有关浏览器的信息

窗口对象 (Windows)

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

位置对象 (Location)

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

历史对象 (History)

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

文档对象 (Document)

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

　　编程人员利用这些对象，可以对WWW浏览器环境中的事件进行控制并作出处理。在JavaScript中提供了非常丰富的内部方法和属性,从而减轻了编程人员的工作,提高编程效率。这正是基于对象与面向对象的根本区别所在。在这些对象系统中,文档对象属于非常重要的,它位于最低层,但对于我们实现Web页面信息交互起作关键作用。因而它是对象系统的核心部分。

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

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

１、 document 中三个主要的对象

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

（１）anchor锚对象：

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

（２）链接links对象

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

（３）窗体（Form）对象

　　窗体对象是文档对象的一个元素，它含有多种格式的对象储存信息，使用它可以在JavaScript脚本中编写程序进行文字输入，并可以用来动态改变文档的行为。通过document. Forms[]数组来使得在同一个页面上可以有多个相同的窗体,使用forms[]数组要比使用窗体名字要方便得多。

２、文档对象中的 attribute 属性

　　document对象中的attribute属性，主要用于在引用Href标识时，控制着有关颜色的格式和有关文档标题、文档原文件的URL以及文档最后更新的日期。这部分元素的主要含义如下：

（１）链接颜色：alinkcolor

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

（２）链接颜色：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中。

第七讲 窗口及输入输出

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()方法

使用Window.open()创建一个新的窗口或在指定的命令窗口内打开文档。由于窗口对象是所加载的父对象,因而我们在调用它的属性或方法时,不需要加入Window对象。例用Window. Open()

与Open()是一样的。

打开一个窗口的基本格式：

Window .open("URL","窗口名字","窗口属性"]

在使用Open()方法时，需要注意以下点：

通常浏览器窗中，总有一个文档是打开的。因而不需要为输出建立一个新文档。

在完成对Web文档的写操作后，要使用或调用close()方法来实现对输出流的关闭。

在使用open()来打开一个新流时，可为文档指定一个有效的文档类型，有效文档类型包括text/HTML、text/gif、text/xim、text/plugin等。

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

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

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

（３）关闭文档流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()方法。

（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窗口对象名，而是直接使用就行了。它主要用途用在输出时产生有关警告提示信息或提示用户，一旦用户按“确定”钮后，方可继续执行其他脚本程序。例:

（3）利用输入、输出方法实现交互

在JavaScript中，可以利用prompt()方法和write()方法实现与Web页面用户进行交互。

在 JavaScript 脚本语言中可以使用 HTML 标识语言的代码。从而实现混合编程。

第八讲 WEB 页面信息的交互

一、窗体基础知识

窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互

１、什么是窗体对象

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

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

２、窗体对象的方法

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

３、窗体对象的属性

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

除Elements外，其它几个均反映了窗体中标识中相应属性的状态，这通常是单个窗体标识；而elements常常是多个窗体元素值的数组

４、访问窗体对象

在 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元素值改变时，产生该文件。

２、 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按钮时，产生该事件。

５、 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()当按下该按钮时，产生该事件。

第九讲 实现更复杂的交互

一、什么是框架

　　框架 Frames 最主要功用是 " 分割 " 视窗，使每个 " 小视窗 " 能显示不同的 HTML 文件，不同框架之间可以互动 (interact) ，这就是说不同框架之间可以交换讯息与资料。例如:假设您开了两个frames，第一个frame可显示书的目录，第二个frame则显示章节的具体内容。

　　框架可以将屏幕分割成不同的区域，每个区域有自己的 URL ，通过 Frames[] 数组对象来实现不同框架的访问。实际上框架对象本身也一类窗口，它继承了窗口对象的所有特征，并拥有所有的属性和方法。下面我们先看一下框架的例子。见图9-1所示。

<HTML>

<HEAD>

</HEAD>

</Frameset>

</HTML>

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

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

　　可以给每个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)

hbrqlpf

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript教程

第一讲 JavaScript语言概况一、什么是JavaScript JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷
复制链接

扫一扫

专栏目录

JavaScript教程

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