第1章
读懂网站代码

本章导读

要想自己动手建立网站，掌握一门网页编程语言是必需的。我们知道，无论多么绚丽的网页，都要由编程语言去实现。本章为大家介绍几种常见的网页语言，重点介绍HTML和ASP语言网页编程常用知识点。

思维导图

1.1 代码基础知识

下面来了解常用网页语言的基础知识。

1.1.1 HTML语言

HTML是一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果。HTML只是标示语言，基本上你只要明白了各种标记的用法，便算学懂了HTML。HTML的格式非常简单，只是由文字及标记组合而成。在编辑方面，任何文字编辑器都可以，只要能将文件另存成．htmI格式即可，当然以专业的网页编辑软件为佳。

设计HTML语言的目的是能把存放在一台计算机中的文本或图形与另一台计算机中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前计算机上还是在网络的其他计算机上。只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台计算机中。

HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的计算机或浏览器。

1.1.2 ASP语言

ASP是Active Server Page的缩写，意为“动态服务器页面”。ASP是微软公司开发的代替CGI脚本程序的一种应用，它可以与数据库和其他程序进行交互，是一种简单、方便的编程工具。ASP网页文件的格式是．asp，现在常用于各种动态网站中。

ASP是一种服务器端脚本编写环境，可以用来创建和运行动态网页或Web应用程序。ASP网页可以包含HTML标记、普通文本、脚本命令以及COM组件等。利用ASP可以向网页中添加交互式内容（如在线表单），也可以创建使用HTML网页作为用户界面的Web应用程序。与HTML相比，ASP网页具有以下特点。

① 利用ASP可以突破静态网页的一些功能限制，实现动态网页技术。

② ASP文件是包含在HTML代码所组成的文件中的，易于修改和测试。

③ 服务器上的ASP解释程序会在服务器端执行ASP程序，并将结果以HTML格式传送到客户端浏览器上，因此使用各种浏览器都可以正常浏览ASP所产生的网页。

④ ASP提供了一些内置对象，使用这些对象可以使服务器端脚本功能更强。例如，可以从Web浏览器中获取用户通过HTML表单提交的信息，并在脚本中对这些信息进行处理，然后向Web浏览器发送信息。

⑤ ASP可以使用服务器端ActiveX组件来执行各种各样的任务，如存取数据库、发送EmaiI或访问文件系统等。

⑥ 由于服务器是将ASP程序执行的结果以HTML格式传回客户端浏览器，因此使用者不会看到ASP所编写的原始程序代码，可防止ASP程序代码被窃取。

⑦ 方便连接ACCESS与SQL数据库。

⑧ 开发需要有丰富的经验，否则会留出漏洞，被骇客（cracker）利用，进行注入攻击。ASP也不仅仅局限于与HTML结合制作Web网站，还可以与XHTML和WML语言结合制作WAP手机网站，其原理也是一样的。

1.1.3 JSP语言

JSP和Servlet放在一起讲，是因为它们都是Sun公司的J2EE（Java 2 platform Enterprise Edition）应用体系中的一部分。

Servlet的形式和前面提到过的CGI差不多，其HTML代码和后台程序是分开的。它们的启动原理也差不多，都是服务器接到客户端的请求后，进行应答。不同的是，CGI对每个客户请求都打开一个进程（Process），而Servlet却在响应第一个请求的时候被载入，一旦Servlet被载入，便处于已执行状态。对于以后其他用户的请求，它并不打开进程，而是打开一个线程（Thread），将结果发送给客户。由于线程与线程之间可以通过生成自己的父线程（Parent Thread）来实现资源共享，这样就减轻了服务器的负担。所以，Java Servlet可以用来做大规模的应用服务。

虽然在形式上JSP和ASP或PHP看上去很相似——都可以被内嵌在HTML代码中。但是，它的执行方式和ASP或PHP完全不同。在JSP被执行的时候，JSP文件被JSP解释器（JSP Parser）转换成Servlet代码，然后Servlet代码被Java编译器编译成.class字节文件，这样就由生成的Servlet来对客户端应答。所以，JSP可以看作Servlet的脚本语言（Script Language）版。

由于JSP/Servlet都是基于Java的，所以它们也有Java语言的最大优点——平台无关性，也就是所谓的“一次编写，随处运行”（WORA - Write Once, Run Anywhere）。除了这个优点，JSP/Servlet的效率以及安全性也是相当惊人的。因此，JSP/Servlet虽然在国内目前的应用并不广泛，但是其前途不可限量。

在调试JSP代码时，如果程序出错，JSP服务器会返回出错信息，并在浏览器中显示。由于JSP是先被转换成Servlet后再运行的，所以，浏览器中所显示的代码出错的行数并不是JSP源代码的行数，而是指转换后的Servlet程序代码的行数。这给调试代码带来一定困难。所以，在排除错误时可以采取分段排除的方法（在可能出错的代码前后输出一些字符串，用字符串是否被输出来确定代码段从哪里开始出错），逐步缩小出错代码段的范围，最终确定错误代码的位置。

1.1.4 PHP语言

PHP的全名非常有趣，它是一个巢状的缩写名称——“PHP: Hypertext Preprocessor”，打开缩写还是缩写。PHP是一种HTML内嵌式的语言 (就像上面讲的ASP那样)。而PHP独特的语法混合了C、Java、Perl以及PHP式的新语法。它可以比CGI或者Perl更快速地执行动态网页。

PHP的源代码完全公开。在Open Source意识抬头的今天，它更是这方面的中流砥柱。不断地有新的函数库加入，以及不停地更新，使得PHP无论在UNIX或是Win32的平台上都可以有更多新的功能。它提供的丰富函数，在程式设计方面有着更好的资源。

平台无关性是PHP的最大优点，但是在优点的背后，还是有一些小小的缺点。如果在PHP中不使用ODBC，而用其自带的数据库函数（这样的效率要比使用ODBC高）来连接数据库的话，使用不同的数据库，PHP的函数名不能统一。这样，使得程序的移植变得有些麻烦。不过，作为目前应用最为广泛的一种后台语言，PHP的优点还是非常明显的。

1.1.5 ASP.NET语言

ASP最新的版本ASP.NET并不完全与ASP早期的版本后向兼容，因为该软件进行了完全重写。早期的ASP技术实际上与PHP的共同之处比与ASP.NET的共同之处多得多，ASP.NET是用于构建Web应用程序的一个完整的框架。这个模型的主要特性之一是选择编程语言的灵活性。ASP.NET可以使用脚本语言（如VBscript、Jscript、Perlscript和Python）以及编译语言（如VB、C#、C、Cobol、Smalltalk和Lisp）。新框架使用通用语言运行环境 (CLR)；源代码编译成Microsoft中间语言代码，然后CLR执行这些代码。

这个框架还提供真正的面向对象编程 (OOP)，并支持真正的继承、多态和封装。.NET类库根据特定的任务（例如，使用XML或图像处理）组织成可继承的类。

除了编程语言和方法之外，数据库访问也是要着重关心的一个因素。当您用ASP.NET编程时，可以用ODBC来集成数据库；ODBC提供了一组一致的调用函数来访问目标数据库。

ASP.NET的优势很明显在于它简洁的设计和实施。这是面向对象的编程人员的梦想——语言灵活，并支持复杂的面向对象特性。

ASP.NET的另一个优势是其开发环境。例如，开发人员可以使用WebMatrix（一个社区支持的工具）、Visual Studio .NET或各种Borland工具（如Delphi和C++ Builder）。例如， Visual Studio允许设置断点、跟踪代码段和查看调用堆栈。总而言之，它是一个复杂的调试环境。许多其他第三方的ASP.NET IDE解决方案也将必然出现。

1.2 熟悉HTML

网站是由各个网页组成的，而HTML又是网页主要的组成部分。所以要学习网站怎样建设，必须从HTML语言学起。

先简单的介绍一下HTML语言。HTML是一种标记语言，在网页的编辑中用于标识网页中的不同元素。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。或许有些使用过一般网页编辑软件的读者会说：“不懂HTML语言也能编辑出一个非常优秀的网页来”，确实是这样的，如使用Macromedia Dreamweaver就能做到。但是要成为一个真正的网页编程高手，一定要了解HTML语言的基本结构。在本节中将讲解HTML的基础知识以及网页相关知识，这些内容的学习和掌握是一个网页设计高手成长的必经之路。

1.2.1 我的第一个HTML页面

一个HTML文件的后缀名是．htm或者是．html。我们使用文本编辑器就可以编写HTML文件。和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。

现在让我们亲自写一个HTML文件来大体看看网页的结构吧。

打开记事本，新建一个文件，输入以下代码，然后将这个文件存成myfirst.html。

<html>
<head>
<title>欢迎光临</title>
</head>
<body>
<! --下面是网页内容-->
这是我的第一个HTML页面<b>这些文件是加粗的</b>
</body>
</html>

双击文件，系统会自动使用浏览器打开它，可以看到它的效果。上面各个代码的含义如下。

① HTML这个文件的第一个Tag是<html>，这个标记告诉你的浏览器，这是HTML文件的头。文件的最后一个Tag是</html>，表示HTML文件到此结束。

② 在<head>和</head>之间的内容，是头部信息。头部内的信息通常是不显示出来的，一般在浏览器里看不到。但是这并不表示这些信息没有用处。比如，可以在Head信息里加上一些关键词，有助于搜索引擎搜索到网页。

③ 在<title>和</title>之间的内容，是这个文件的标题。可以在浏览器最顶端的标题栏看到这个标题。

④ 在<body>和</body>之间的信息，是正文。

⑤ 在<b>和</b>之间的文字，用粗体表示。<b>顾名思义，就是bold（加粗）的意思。

从上面的例子我们可以看出HTML文件有以下这些特点。

① HTML文件看上去和一般文本类似，但是它比一般文本多了Tag，如<html>, <b>等。通过这些Tag，可以告诉浏览器如何显示这个文件。

② Tag以“<”开始，以“>”结束。

③ Tag通常是成对出现的，如<body></body>。

④ HTML的Tag不区分大小写。比如，<HTML>和<html>其实是相同的。

⑤ 注释由开始标记“<! --”和结束标记“-->”构成，注释内容不在浏览器窗口中显示。

1.2.2 HTML元素的属性

HTML元素用Tag表示，它可以拥有属性，属性用来扩展HTML元素的能力。比如，可以使用一个bgcolor属性，使得页面的背景色成为红色，就像这样：

<body bgcolor="red">

属性通常由属性名和值成对出现，就像这样：name="value"。上面例子中的bgcolor就是name, red就是value。属性值一般用双引号标记起来。

属性通常是附加给HTML的开始标记，而不是结束标记。

1.2.3 BODY属性的设置

BODY标记作为网页的主体部分，有很多内置属性，这些属性用于设置网页的总体风格。主要属性见下表。

在上述属性中，各个颜色属性的值有两种表示方法：一种是使用颜色名称来指定，如红色、绿色和蓝色分别用red、green和blue表示；另一种是使用十六进制RGB格式表示，表示形式为color＝"#RRGGBB"或color＝"RRGGBB"，其中RR是红色、GG是绿色、BB是蓝色，各颜色分量的取值范围为00—FF。例如，#00FF00表示绿色，#FFFFFF表示白色。

背景图片属性值是一个相对路径的图片文件名。例如<body backgroud＝"bg.gif">中bg.gif是背景图片的名字，这个实际是带相对路径的图片文件名字。例如，你做的这个页面放在d:\myweb\，而背景图片的位置放在d:\myweb\images\，那么就需要这样写了：<body backgroud＝"images\bg.gif">。

1.2.4 字体属性的应用

1．标题字体

<h#>文字</h#>

其中# =1,2,3,4,5,6。

例如，<h1>你好，欢迎光临</h1>

用于设置文档中的标题，<H1>到<H 6>标题标记会自动将字体加粗，并在文字上下空一行。

2．字体的大小

<font size=#>文字</font>。

其中#=1, 2, 3, 4, 5, 6, 7 or +#, -#

例如，<font size=7>你好，欢迎光临</font>

3．字体的修饰

粗体：<b>文字</b>

斜体：<i>文字</i>

下画线：<u>文字</u>

删除线：<strike>文字</strike>

闪烁：<blink>文字</blink>

增强：<strong>文字</strong>

强调：<em>文字</em>

4．字体颜色

指定颜色<font color=#>文字</font>

例如，红色文字可以表示为：<font color=red>文字</font>或者<font color=#ff0000>文字</font>。

1.2.5 在网页中插入图像

大量采用在网页设计中的图像，网页的美感大多来自精心处理的图像。可使用IMG标记在网页中插入一个图像。以下为IMG标记最常用的4个属性。

● SRC属性：给出图像文件的URL地址，图像可以是JPEG文件、GIF文件或PNG文件。

● AIT属性：给出图像的简单文本说明，这段文本将在浏览器不能显示图像或图像或者加载时间过长时显示。

● HEIGHT属性：设置图像的高度，所用单位可以是像素或百分数。

● WIDTH属性：设置图像的宽度。

|提示|

如果只给出了高度或宽度，则图像将按比例进行缩放。

1.2.6 表格的使用

表格在网页设计中有着广泛的应用，它不仅可作为信息的一种表示形式，还常用于页面设计中的布局与定位。

1．表格的创建

表格一般由若干行和若干列的单元格组成，表格上面可以有一个标题，表的第一行称为表头。与表格相关的标签如下。

● <table>：界定表格，最常用的属性是border，定义边界线的粗细。

● <tr>：定义表格的一行。

● <td>：定义单元格。

2．表格的常用属性

|提示|

<TD>ALIGN和VALIGN属性将会覆盖任何为整个一行指定的排列方式。

以下代码将创建一个2行2列的表格。

<table width="540" height="249" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="204">这是第一行第一列</td>
<td width="336" align="center">这是第一行第二列，居中</td>
</tr>
<tr>
<td>这是第二行第一列</td>
<td valign="bottom">这是第二行第二列，文字居于底部</td>
</tr>
</table>

代码运行效果如下图所示。

1.2.7 框架的使用

框架网页将浏览器上的视窗分成不同区域，在每个区域中都可以独立显示一个网页，也就是所谓的分割窗口。框架网页通过一个或多个FRAMESET和FRAME标记来定义。 FRAMESET表示框自集，FRAME代表一个框架。在框架网页中，将FRMAESET标记置于HEAD之后，以取代BODY的位置，还可以使用noframes标记给出框架不能被显示时的替换内容。

以下代码是创建一个包含有2个框架的页面，并在框架中各自放入不同网站的首页，效果如下图所示。

<HTML>
<HEAD>
<TITLE>框窗实作</TITLE>
</HEAD>
<FRAMESET COLS="500, *" >
  <FRAME SRC="http://www.sohu.com" NAME="1">
  <FRAME SRC="http://www.163.com" NAME="2">
</FRAMESET>
</HTML>

示例解释：

● COLS="500, ＊" ：垂直切割成2个画面，一个为500像素，另一个为余下的宽度。你也可以切成三个，如COLS="300, ＊,100"。

● SRC="http://www.sohu.com"：设定此框架中要显示的网页名称。每个框架一定要对应一个网页，否则就会产生错误，这里将搜狐首页面置入左框架中。

● NAME="1"：设定这个框架的名称，这样才能指定框架来作连结。

常见的框架结构包括上方固定、下方固定、右侧固定、左侧固定四种基本框架，代码如下。

上方固定：

<frameset rows="80, *" frameborder="no" border="0" framespacing="0">
<frame src="test1.htm" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
<frame src="test2.htm" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>

下方固定：

<frameset rows="*,80" frameborder="no" border="0" framespacing="0">
<frame src="test1.htm" name="mainFrame" id="mainFrame" title="mainFrame" />
<frame src="test2.htm" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame"title="bottomFrame" />
</frameset>

右侧固定：

<frameset cols="*,80" frameborder="no" border="0" framespacing="0">
<frame src="test1.htm" name="mainFrame" id="mainFrame" title="mainFrame" />
<frame src="test2.htm" name="rightFrame" scrolling="No" noresize="noresize" id="rightFrame"title="rightFrame" />
</frameset>

左侧固定：

<frameset cols="80, *" frameborder="no" border="0" framespacing="0">
<frame src="test1.htm" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame"title="leftFrame" />
<frame src="test2.htm" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>

其他诸如上方固定右侧嵌套、右侧固定上方嵌套等都是由这几个基本型构成。

1.2.8 表单的使用

留言版就是一个表单运用很好的例子。表单通常必须配合脚本或后台程序来运行才有意义。本单元纯粹以介绍各式表单为主，在本书的后面章节我们将介绍如何将表单与程序相结合。

以下是常用表单及属性的代码示例及相应的效果。

1.2.9 超链接的使用

没有链接，WWW将失去存在的意义。文件链接是超链中最常用的一种情形，基本语法格式如下。

<a href="字符串" target="字符串" title="字符串’>文本</a>

其中各属性描述如下。

① href：该属性是必选项，用于指定目标端点的url地址。

② target：该属性是可选项，用于指定一个窗口或框架的名称。目标文档将在指定窗口或框架中打开。如果省略该属性，则在超链所处的窗体或框架中打开目标文档。

③ title：该属性也是可选项，用于指定鼠标移到超级链接所显示的标题文字。

建立一个百度的超链接如下。

<a href="http://www.baidu.com">百度</a>

1.3 熟悉JavaScript语言

想要学好网页设计，JavaScript语言的熟练应用必不可少，下面简单介绍。

1.3.1 JS简介及特点

JavaScript是一种基于对象和事件驱动，并具有安全性能的脚本语言。有了JavaScript，可使网页变得生动。使用它的目的是与HTML超文本标识语言、Java脚本语言一起实现在一个网页中链接多个对象，与网络客户交互作用，从而可以开发客户端的应用程序。它是通过嵌入或调入在标准的HTML语言中实现的。

JavaScript具有以下特点。

① JavaScript是动态的，它可以直接对用户或客户输入作出响应，无须经过Web服务程序。

② JavaScript是一种脚本语言，它本身提供了非常丰富的内部对象供设计人员使用。

③ JavaScript是一种可以嵌入Web页面中的解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户，由浏览器解释执行。

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

⑤ JavaScript的代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载。编写HTML文档就像编辑文本文件一样方便。

⑥ JavaScript使用 <script>...</script> 来标识。

1.3.2 JS的数据类型和变量

JavaScript有六种数据类型。主要的类型有number、string、object以及Boolean类型，其他两种类型为null和undefined。

● String字符串类型：字符串是用单引号或双引号来说明的（使用单引号来输入包含引号的字符串）。

● 数值数据类型：JavaScript支持整数和浮点数。整数可以为正数、0或者负数；浮点数可以包含小数点，也可以包含一个 “e”（大小写均可，在科学记数法中表示“10的幂”），或者同时包含这两项。

● Boolean类型：可能的Boolean值有true和false。这是两个特殊值，不能用作1和0。

● Undefined数据类型：一个为undefined的值就是指在变量被创建后，但未给该变量赋值以前所具有的值。

● Null数据类型：null值就是没有任何值，什么也不表示。

● object类型：除了上面提到的各种常用类型外，对象也是JavaScript中的重要组成部分。

在JavaScript中变量用来存放脚本中的值，在需要用这个值的地方就可以用变量来代表，一个变量可以是一个数字，文本或其他一些东西。

JavaScript是一种对数据类型变量要求不太严格的语言，所以不必声明每一个变量的类型。变量声明尽管不是必须的，但在使用变量之前先进行声明是一种好的习惯。可以使用var语句来进行变量声明。例如，var men = true; // men中存储的值为Boolean类型。

变量命名：JavaScript是一种区分大小写的语言，因此将一个变量命名为computer和将其命名为Computer是不一样的。

另外，变量名称的长度是任意的，但必须遵循以下规则。

① 第一个字符必须是一个字母（大小写均可），或一个下画线(_)或一个美元符 ($)。

② 后续的字符可以是字母、数字、下画线或美元符。

③ 变量名称不能是保留字。

1.3.3 JS的语句及语法

JavaScript所提供的语句分为6个大类，分别是变量声明赋值语句、函数定义语句、条件和分支语句、循环语句、对象操作语句和注释语句。

1．变量声明，赋值语句

变量简单地说就是指那些没有固定值，可以改变的数。在使用一个变量之前，首先要声明这个变量，在JavaScript中使用var关键字声明变量。

语法如下： var变量名称 [=初始值] 。

通常我们可以一次声明一个变量，如：

Var a;

也可以一次声明多个变量，如：

Var a, b, c;

还可以在声明变量的同时给变量赋一个初始值，如：

var a = 32 //定义b是一个变量，且有初值为32。

|提示|

变量名可以是任意长度，但必须符合下列规则。

① 变量名的第一个字符必须是英文字母，或者是下画线符号。

② 变量名的第一个字母不能是数字。其后的字符，可以是英文字母、数字或下画线符号。

③ 变量名不能是JavaScript的保留字。

2．条件和分支语句

if...else条件语句：条件语句通俗的讲就是根据你想要满足的条件进行的判断，在满足你想要的条件时执行什么语句，当不满足你想要的条件时执行什么语句。条件语句是所有程序语言中最基本的语句之一。

if...else语句完成了程序流程块中分支功能：如果其中的条件成立，则程序执行紧接着条件的语句或语句块；否则程序执行else中的语句或语句块。

用法如：

if (result == true)
      {
      response = "你答对了！"
      }else{
      response = "你错了！"
      }

switch分支语句：分支语句简单的说就是选择语句，根据一个变量的不同取值选择不同的处理方法。

用法如：

Switch (score){
Case 50:
  Result="悲哀呀，你挂科了";
  Break;
Case 60:
  Result="很幸运，你勉强通过";
 Break;
Case 70:
  Result="不错，还需要加油呀";
 Break;
Case 80:
  Result="还能更进一步吗？";
 Break;
Case 90:
  Result="高手呀，佩服佩服";
 Break;
}

Break关键词用来跳出分支语句，如果判断score为50，接着执行result="悲哀呀，你挂科了"，直接跳出switch语句，不再进行下面的条件判断。

|提示|

当分支条件比较少时，if ...else与switch都可以使用，在分支条件较多时使用switch最为有效。

3．循环语句

循环语句是指实现重复计算或操作的语句，循环语句也是高级语言中常用语句之一。在JavaScript中常用循环语句有for, for … in , while, do while。

for语句用于在执行次数一定的情况下，语法如下。

for (变量=开始值；变量<=结束值；变量=变量+步进值)
    {
      需要反复执行的语句．..
 }

只要变量小于结束值，循环体就被反复的执行。如：

var i=0
for (i=0; i<=10; i++)
{
document.write("已运行次数：" + i)
document.write("<br />")
}

for...in语句与for语句有一点不同，它循环的范围是一个对象所有的属性或是一个数组的所有元素。语法如下。

for (变量in 对象或数组)
{
要执行的语句．..
}

如：

var i
var sz = new Array()
sz[0] = "11"
sz[1] = "12"
sz[2] = "13"
for (x in sz)
{
document.write(sz[i] + "<br />")
}

while语句所控制的循环不断地测试条件，如果条件始终成立，则一直循环，直到条件不再成立。语法如下。

while (变量<=结束值)
  {
要执行的语句．..
}
如：
var i=0
while (i<=10)
{
document.write("已运行次数： " + i)
document.write("<br />")
i=i+1
}

Do...while语句与while语句很相似，在判断之前先执行一次语句，然后判断是否符合指定条件，当条件符合时候接着再执行语句，如：

var i=0
do
{
document.write("已运行次数：" + i)
document.write("<br />")
i=i+1
}
while (i<0)

|提示|

do...while语句至少执行一次，而while语句则不然，当指定条件不成立时候，语句不被执行。

1．函数定义语句

函数是一组随时随地可以调用的语句，用来实现程序的功能和方法。在JavaScript中，函数用关键词function定义，语法如下。

function 函数名称 （函数所带的参数）
        {
            函数执行部分
          }

return语句将结束函数并返回后面表达式的值，return语句的语法为：“return表达式”函数结束时可以没有return语句，但是只要遇到return语句函数就结束。函数的定义和调用如下。

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
function getSqrt(x)
{
var y=x * x;
document.write(y);
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
getSqrt(8);
</SCRIPT>
</BODY>
</HTML>

程序定义了一个函数，该函数没有返回值。每次调用就会将相应的内容显示到浏览器上。

2．对象操作语句

JavaScript是一种基于对象的编程的语言，它为我们提供了丰富的对象，这就需要我们懂得如何去操作这些对象，这就是对象操作语句。常用对象操作语句有with、new和this。

With语句起到这样的作用，如果你想使用某个对象的许多属性或方法时，只要在with语句的（）中写出这个对象的名称，然后在下面的执行语句中直接写这个对象的属性名或方法名就可以了。语法如下。

with (对象名称)
{
执行语句
}
如：
with(document)
{
  write("文档的标题是 ： \"" + title + "\".");
  write("文档的URL是： " + URL);
  }

其中title和url就是document的两个属性。

new语句是一种对象构造器，可以用new语句来定义一个新对象。语法如下。

新对象名称＝ new真正的对象名

例如，我们可以这样定义一个新的日期对象： var curr＝ new Date()，然后，变量curr就具有了Date对象的属性。

this运算符总是指向当前的对象。

3．注释语句

注释语句就是在程序的开始或中间，对程序进行说明的语句。在程序的后继维护开发中，注释语句起到非常重要的作用。注释语句有单行注释（//）和多行注释(/＊＊/)，如：

//这是单行注释

/＊这可以多行注释．.. ＊/

1.3.4 JS的对象及其属性和方法

在对象操作语句中我们了解了对象这个概念，JavaScript为我们提供了一些非常有用的常用内部对象和方法。用户不需要用脚本来实现这些功能。这正是基于对象编程的真正目的。在实际工作中，我们经常用到这些对象方法。熟练灵活地运用这些对象方法，能给我们的工作带来很大的便利。

在实际工作中我们频繁使用的对象有字符串、数组、日期和时间。

1．字符串对象String

字符串很容易理解，就是一些字符的集合。如s=“this is a string”，这就代表s为字符串变量，而“this is a string”是一串字符。字符串对象有以下属性和方法。

（1）获取字符串长度length属性

如：

var a=' ';
a.length;                            //返回0
var b ='javascript';
b.length;                            //返回10

（2）截取字符串substring方法

substring方法可以接受两个参数来指定截取范围，当第二个参数被省略时，默认截取到字符串的结尾。如：

var a = ' this is a string ';
var b=a.substring(2,4);        //b='is'
var c=a.substring(2);    //c='is a string'

（3）字符串替换replace方法

replace方法可以将字符串中指定的内容替换成新的内容并返回一个新的字符串。如：

var a= ’我要建网站’;
var b=a.replace(’要’, ’学习’);                   //b= ’我学习建网站’

从例子中我们看到replace方法有2个参数，第一个为需要被替换的子字符串，第二个为替换的内容。当执行replace方法时，程序会在字符串中查找所有与第一个参数相符的片段，并替换为第二个参数指定的内容。如：

Var a = 'this is a string ';
Var b=replace(' is' , 'aa '); //b= 'thaa aa a string'

（4）大小写转换toLowerCase和toUpperCase

在程序处理过程中，有时候需要对字符串进行变大写或变小写，比如，比较两个字符串是否相等。toLowerCase是把所有字母转为小写，相应的toUpperCase是把所有字符转为大写。如：

Var a= 'This is a string ';
Var b=a.tolowercase(); //b='this is a string'
Var c=a.touppercase(); //c='THIS IS A STRING'

2．数组对象Array

数组同字符串对象一样，是一种数据类型，通过数组可以把若干变量有序地组织起来，也是最常用的数据类型之一。它有两种创建方式，其一通过数组直接进行创建；其二通过Array关键词进行创建。如：

var a = [123,44 , '3',22]; //直接创建数组
var b= new Array(6); //6个元素的数组

数组常用的属性方法有获取数组的长度、添加数组中的元素。同字符串一样，数组也是通过length函数获取长度的。如：

Var a=['1', '2', '3', '4', '5'];
Var b=a.length    //b=5

向数组中添加数据使用unshift关键字操作。如：

Var a=['1', '2', '3', '4', '5'];
a.unshift(0);         //a=[0,1,2,3,4,5]

|提示|

在JavaScript语言中，数组中值的数据类型可以不一致，这一点与其他语言有区别。

3．日期和时间对象Date

对时间的处理是程序设计中经常需要做的事情。在JavaScript中，时间由Date对象表示，一个Date对象表示一个日期和时间值。Date对象提供了丰富的方法来对这些值进行操作。日期和时间类型通过Date关键字进行创建。如：

var now = new Date(); //返回的是一个表示当前时间的对象

日期和时间对象有很多常用属性和方法。

● getFullYear()：返回对象中的年份部分，用四位数表示。

● getMonth()：返回对象中的月份部分（从0开始计算）。

● getDate()：返回对象所代表的一月中的第几天。

● getDay()：返回对象所代表的一周中的第几天。

● getHours()：返回对象中的小时部分。

● getMinutes()：返回对象中的分钟部分。

● getSeconds()：返回对象中的秒部分。

● getMilliseconds()：返回对象中的毫秒部分。

● getTime()：返回对象的内部毫秒表示。

使用起来都是一样的，如：

var now = new Date();
var curryear=now. getFullYear() //返回当前年份curryear='2012'

|提示|

对象只是一种特殊的数据。

1.3.5 JS的事件处理

事件是浏览器响应用户交互操作的一种机制，JavaScript的事件处理机制可以改变浏览器响应用户操作的方式，这样就开发出具有交互性并易于使用的网页。

浏览器为了响应某个事件而进行的处理过程，叫作事件处理。

事件定义了用户与页面交互时产生的各种操作，例如单击超级连接或按钮时，就产生一个单击（click）操作事件。浏览器在程序运行的大部分时间都等待交互事件的发生，并在事件发生时，自动调用事件处理函数，完成事件处理过程。

事件不仅可以在用户交互过程中产生，而且浏览器自己的一些动作也可以产生事件，例如，当载入一个页面时，就会发生load事件，卸载一个页面时，就会发生unload事件等。

归纳起来，必须使用的事件有三大类。

① 引起页面之间跳转的事件，主要是超链接事件。

② 事件浏览器自己引起的事件。

③ 事件在表单内部同界面对象的交互。

界面事件包括Click（单击）、MouseOut（鼠标移出）、MouseOver（鼠标移过）和MouseDown（鼠标按下）等。

1．单击事件

鼠标单击事件是常见的事件，语法非常简单：“onclick=函数或是处理语句”。如：

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="BUTTON" VALUE="单击" ONCLICK="alert(’鼠标单击’)">
</FORM>
</BODY>
</HTML>

当鼠标单击按钮的时候，自动弹出一个对话框，显示的结果如下图所示。

2．处理下拉列表

下拉列表是常用的一种网页元素，一般利用ONCHANGE事件来处理。如：

<HTML>
<HEAD>
</HEAD>
<BODY>
<SELECT NAME="selAddr" SIZE="1" ONCHANGE="func()">
<OPTION SELECTED VALUE="郑州">郑州</OPTION>
<OPTION VALUE="洛阳">洛阳</OPTION>
<OPTION VALUE="开封">开封</OPTION>
</SELECT>
<SCRIPT LANGUAGE="JavaScript">
function func()
{
alert("你选择了" + selAddr.value);
}
</SCRIPT>
</BODY>
</HTML>

每个下拉列表的OPTION项都有一个VALUE值，读出来的是VALUE属性的值。执行的结果如下图所示。

1.4 熟悉ASP语言

ASP英文全称为Active Server Pages，它是一种动态网页，文件后缀名为．asp, ASP网页是包含有服务器端脚本的HTML网页。WEB服务器会处理这些脚本，将其转换成HTML格式，再传到客户的浏览器端。

1.4.1 ASP能为我们做什么？

ASP语言在动态网站开发的过程中的作用如下。

① 动态地编辑、改变或者添加页面的任何内容。

② 对由用户从HTML表单提交的查询或者数据作出响应、访问数据或者数据库，并向浏览器返回结果。

③ 为不同的用户定制网页。

④ 由于ASP代码无法从浏览器端察看，确保了站点的安全性。

1.4.2 ASP的工作原理

ASP的工作原理如下图所示。

上图的含义如下。

① 客户端输入网页地址（URL），通过网络向服务器发送一个ASP的文件请求。

② 服务器开始运行ASP文件代码，从数据库中取需要的数据或写数据。

③ 服务器把数据库反馈的数据发送到客户端上显示。

1.4.3 ASP基本语法

ASP的基本语法如下。

书写格式：<%语句……%>

（1）if条件语句

<%
 If 条件1 then
语句1
elseif条件2 then
语句2
else
语句3
Endif
%>

if语句完成了程序流程块中分支功能：如果其中的条件成立，则程序执行紧接着条件的语句或语句块；否则程序执行else中的语句或语句块。

（2）while循环语句

<%
while 条件
语句
Wend
%>

while语句所控制的循环不断地测试条件，如果条件始终成立，则一直循环，直到条件不再成立。

（3）for循环语句

<%
for count=1 to n step m
语句1
exit for
语句2
Next
%>

for语句只要循环条件成立，便一直执行，直到条件不在成立。

ASP还有其他语句，但常用的、必须掌握的也就是上述四点。

|提示|

从上述讲解中可以看到ASP语法与JavaScript语法之间有很多相似之处，在学习时可以对照一下，有助于理解区分。

1.4.4 ASP常用内建对象

在ASP中，提供的对象以及组件都可以用来实现和扩展ASP应用程序的功能。每个对象都有其各自的属性、集合和方法，并且可以响应有关事件。用户不必了解对象内部复杂的数据传递与执行机制，只需在程序中设置或调用某个对象特定的属性、集合或方法，即可实现该对象所提供的特定功能。

常用的对象有以下几个。

① Response：用来传输数据到客户端浏览器。

② Request：用来读取客户端浏览器的数据。

③ Server：用来提供某些Web服务器端的属性与方法。

④ Session：用来存储当前应用程序单个使用者专用的数据。

1.4.5 对象的属性和方法

本节将详细讲述常见ASP对象的属性和方法。

1. Response对象

Response对象的作用是向浏览器输出文本、数据和cookies，并可重新定向网页，或用来控制向浏览器传送网页的动作。

Response常用的属性是Expires，这个属性用来设置网页过期时间。Response常用的方法有两个，分别是Write方法和Redirect方法。

① Write方法输出数据到客户端浏览器。

Response.write变量或字符串。代码如下。

<%
Response.write"您好！<br>"
Response.write"今天是"&now()
%>

②Redirect方法用来将客户端的浏览器重新定向到一个新的网页。

Response.Redirect网址变量或字符串。代码如下。

<%
Response.Redirect"http://www.sohu.com"
%>

③Response.End方法用来停止输出，代码如下。

<%
For i=1 to  5 setp 1
  If i<=3 then
    Response.write "i="&i
  Else
    Response.end
  End if
next
%>

输出结果只有i=1; i=2和i=3。

2. request对象

Request对象用来读取客户端的表单信息或其他传送到服务器端的信息，并可在此基础上实现将客户数据存入Web数据库或对其作进一步的处理。

Request对象属性一般情况下使用不到，这里不再阐述。

Request常用方法集合有Form、QueryString两个最为常用。

Form集合取得客户端在Form表单中输入用Post方法提交信息。

（1） Request.Form元素

下面通过案例来学习，信息提交页面代码如下。

<html><head><title>示例</title></head>
<body>
<form method="POST" action="form1.asp" name="form1">
<p><font size="3"><b>请在此输入客户资料：</b></font></p>
<p>您的姓名：<input type="text" name="name" size="16"></p>
<p><input type="submit" value="确认提交" name="B1">&nbsp;
<input type="reset" value="全部重填" name="B2"></p>
</form></body></html>

信息读取页面代码如下。

<%
Dim name
name = Request.Form ("name")
Response.Write "<P><B>" & "您提交的信息如下：" & "</B></P>"
Response.Write "您的姓名是：" & name & "<br>"
%>

（2）Request.QueryString集合

Request对象的QueryString集合同样可以包含传送到Web服务器的各个表单值，这些值在URL请求中表现为若干项用问号连接起来的一串文本。

语法：Request.QueryString元素。

下面通过案例来学习，信息输入页面代码如下。

<html>
<head>
<title>QueryString</title>
</head>
<body>
<form method="GET" action="form1.asp" name="form1">
<p><font size="3"><b>请在此输入客户资料：</b></font></p>
<p>您的姓名：<input type="text" name="name" size="16"></p>
<p><input type="submit" value="提交" name="B1">&nbsp;
<input type="reset" value="重填" name="B2"></p>
</form>
</body>
</html>

信息获取页面

<%
Dim name
name = Request.QueryString ("name")
Response.Write name & "：您好！" & "<br>"
%>

（3）ServerVariables方法

Request对象的ServerVariables方法得到一些服务器端的信息，如当前ASP的文件名、客户端的IP地址等。示例代码如下。

<html>
<head>
<title>ServerVariables</title>
</head>
<body>
PATH_INFO返回：
<%=Request.ServerVariables("PATH_INFO")%><br>  //返回文件路径
REMOTE_ADDR返回：
<%=Request.ServerVariables("REMOTE_ADDR")%><br>  //返回客户端地址
SERVER_NAME返回：
<%=Request.ServerVariables("SERVER_NAME")%><br>  //返回服务名
</body></html>

3. server对象

Server对象主要用来创建COM对象和Scripting组件、转化数据格式、管理其他网页的执行。

语法：

Server．方法|属性(变量或字符串|=整数)

Server对象常见有两个方法，它们是CreateObject方法和MapPath方法。

（1）CreateObject方法

Server.CreateObject方法是Server对象最为重要的方法之一，可用来创建已经注册到服务器上的某个ActiveX组件的实例，从而实现一些仅靠脚本语句难以实现的功能。例如对数据库的连接和访问、对文件的存取、电子邮件的发送和活动广告的显示等。

语法：

Set对象变量名= Server. CreateObject ("ActiveX组件名")

示例代码如下。

<%
Set Fso = Server.CreateObject("Scripting.FileSystemObject")
%>

（2）MapPath方法

MapPath方法的作用是把所指定的相对路径或者虚拟路径转换为物理路径。

语法：

Server.MapPath(虚拟路径字符串)

示例代码如下。

<%
Path = Server. MapPath ("/form1.asp")
Response.Write "form1.asp网页的实际路径为：" & Path
%>

4. Session对象

Session对象用来为每个客户存储独立的数据或特定客户的信息，使用Session对象可以为每个客户保存指定的数据。存储在某个客户Session对象中的任何数据都可以在该客户调用下一个页面时取得。在用户与网站交互的整个会话期间内，Session对象中的变量值都不会丢失，直到会话超时或访问者离开时为止，该Session对象才被释放。

Session常用属性有两个，存储用户的Session ID和用来设置Session的有效期时长的Timeout。

常用方法有一个清除Session对象的Abandon。

我们可以用Session保存变量或字符串等信息。

语法：Session("Session名字")=变量或字符串信息。

示例代码如下。

<% Session("username")="Lisi"%>

从Session中调用该信息的语法：

变量=Session("Session名字")

示例代码如下。

<% a=session("Session名字") %>

利用Timeout属性可以修改Session对象的有效期时长，默认为20分钟。

语法：Session.Timeout=整数（分钟）。

示例代码如下。

<% Session.Timeout=30 ’改为30分钟 %>

Session对象到期后会自动清除，但到期前可以用Abandon方法强行清除。

语法：Session.Abandon。

示例代码如下。

<% Session.Abandon %>

5. Cookie对象

Cookie对象也是一个比较重要的对象。那么什么是cookie呢？Cookie是用户访问某些网站时，由Web服务器在客户端磁盘上写入的一些小文件，用于记录浏览者的个人信息、浏览器类型、何时访问该网站以及执行过哪些操作等。

Cookie的属性用于指定Cookie自身的有关信息，语法格式如下。

Response.Cookies(name).attribute = value

其中参数attribute指定属性的名称，可以是下列之一。

① Domain：只允许写。如果设置该属性，则Cookie将被发送到对该域的请求中去。

② Expires：只允许写，用于指定Cookie的过期日期。为了在会话结束后将Cookie存储在客户端磁盘上，必须设置该日期。如果此项属性的设置未超过当前日期，则在任务结束后Cookie将到期。

③ HasKeys：只允许读，用于确定Cookie是否包含关键字。

④ Path：只允许写。如果被指定，则Cookie将只发送到对该路径的请求中。如果未设置该属性，则使用应用程序的路径。

⑤ Secure：只允许写，用于指定Cookie是否安全。

下面来学习有关Cookie的操作。

（1）设置Cookie的值

使用Response对象的Cookies集合可以设置客户端的Cookie值。如果指定的Cookie不存在，则创建它。若存在，则设置新的值并且将旧值删去。语法格式如下。

Response.Cookies(name)[(key)] = value

其中参数name指定Cookie的名称。参数value指定分配给Cookie的值。参数key是可选的，用于指定Cookie的关键字。若不指定key，则创建一个单值Cookie；若指定了key，则创建一个Cookie字典，而key将被设置为value。

创建单值Cookie的代码如下。

<%
Response. Cookies("Username")="zhangshihua" //
Response. Cookies("Username").Expires="July 29,2008"
%>

创建多值Cookie如：

<%
Response. Cookies("User")("Name")="chenfan"
  Response. Cookies("User")("Sex")="male"
  Response. Cookies("User")("Password")="20120601"
  Response. Cookies("User").Expires="June,1,2012"
%>

（2）输出Cookie中保存的值

Request.Cookies集合，用来提取存储在客户计算机Cookie中的值。

如：

<%=Request.Cookies("Username")%>

6. Application对象

Application对象是一个比较重要的对象，对Application对象的理解关键是：网站所有的用户公用一个Application对象，当网站服务器开启的时候，Application就被创建。利用Application这一特性，可以方便地创建聊天室和网站计数器等常用站点应用程序。

Application对象没有自己的属性，用户可以根据自己的需要定义属性，来保存一些信息，其基本语法是：Application（“自定义属性名”），这一点与Session定义一样。

如：

<%
Application("Greeting")="你好！"
response.write Application("Greeting")
%>

首先对自定义属性Application("Greeting")赋值，然后程序将其输出。执行完以后，该对象就被保存在服务器上。

或许阅读完本章，依然不明白这些东西和网站是如何具体联系起来的，那么也没关系，在本书后续章节将结合实战案例详细为你由浅入深地讲解网站程序设计的全过程。

高手支招

◇ JavaScript中什么时候用return语句？

当有值需要返回时候，必须使用return语句。函数在定义时并没有被执行，只有函数被调用时，其中的代码才真正被执行。

◇ 如何区分Cookie和Session？

Cookie和Session的主要区别如下。

① Cookie数据存放在客户的浏览器上，Session数据放在服务器上。

② Cookie不是很安全，别人可以分析存放在本地的Cookie后进行修改，如果需要考虑到安全问题，应当使用Session。

③ Session会在一定时间内保存在服务器上。当访问增多，会占用服务器比较多的性能。如果需要减轻服务器负载，应当使用Cookie。

④ 单个Cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个Cookie。

综上所述，建议用户把登录信息等重要信息存放为Session，其他信息可以考虑存放在Cookie中。 0sDUVxxZffNpcuqF7Myodz3bBToZ9ovKWopsYJ8zVOC3Dv4+2zr2iJPYG5c6gDCU