ASP程序设计教程.ppt

1,ASP动态网页设计教程,第1章 ASP设计基础 第2章 HTML语言 第3章 JavaScript脚本语言介绍 第4章 VBScript脚本语言介绍 第5章 ASP的内置对象 第6章 ASP组件 第7章 ASP的数据库存取组件及ADO技术 第8章 ASP动态网页设计开发实例 -通用企业网站模板程序,2,第1章 ASP设计基础,1.1 Web基础 1.1.1 Web概述 1.1.2 Web常用术语 1、1、3WEB服务器技术 1.2 ASP基础 1.2.1 什么是ASP 1.2.2 ASP的运行环境及安装 1.2.3 创建虚拟目录 1.3 ASP语法简介 1.3.1 ASP的一个简单实例 1.3.2 ASP文件的基本构成和约定 1.4 ASP的开发工具及调试技巧 1.4.1 ASP的开发工具 1.4.2 ASP的调试技巧,3,1.1.1 Web概述,Web（World Wide Web）也称万维网，是Internet上一个非常重要的信息资源网，产生于20世纪90年代初。它遵循超文本传输协议，以超文本或超媒体的形式传送各种各样的信息，为用户提供了一个具有友好的图形化界面Web页，以查阅Internet上的信息文档。,4,1.1.2 Web常用术语,Web页面： 就是通常在浏览器中所看到的网页，其实是一个单一的文件。 网页： 就是用HTML编写的文本文件，包含有文字、表格、图像、链接、声音和视频等。 网站： 就是由若干网页按一定方式组织在一起，放在服务器上，提供相关信息资源。 主页： 有时也称首页，是网站的第一个页面。通常，总是和一个URL网址相对应，引导用户浏览网站。,5,1.1.2 Web常用术语（续上）,URL（Uniform Resource Locator） ： 即统一资源定位器，是一种唯一标识Internet上计算机、目录和文件的位置的命名规则。它由资源类型、存放资源的主机地址和端口以及资源目录和文件名构成。 具体如下： 资源类型 表示信息传输的协议，如http、ftp等。 主机地址 即为提供资源的主机IP地址或域名地址。 端口 表示某一服务器在该主机上所使用的TCP端口。 目录 表示提供服务的信息资源所在的目录。 文件名 由基本文件名和扩展名两部分构成。 例如： :80/study/default.html 资源类型 主机地址 端口 目录 文件名,6,1.1.2 Web常用术语（续上）,HTTP（Hypertext Transfer Protocol）： 超文本传输协议，是Internet上访问WWW信息资源的一种协议，用来传输多媒体信息。 HTML（HyperText Markup language）： 超文本标记语言，是一种描述文档结构的语言，而不能描述实际的表现形式。HTML语言使用描述性的标记符（称为标签）来指明文档的不同内容。,7,1、1、3WEB服务器技术,Microsoft IIS 5、0（6、0） PWS APACHE IPlanet Web Server EAServer Netscape Web Server等 思考： 1、如何来选择使用？ 2、一台服务器中如果安装两种WEB服务器软件时应注意什么？,8,1.2.1 什么是ASP,ASP（Active Server Pages）是一套微软开发的服务器端脚本环境，它内含于IIS（Internet Information Server）或PWS（Personal Web Server）中。使用它可以创建和运行动态、交互的Web服务器应用程序。 ASP的工作原理，就是当客户端浏览器上某用户申请一个*.ASP的文件（ASP文件的后缀名为.asp）时，Web服务器就会响应该HTTP请求，并调用ASP引擎，解释被申请文件，最后输出标准的HTML格式文件传送给客户端浏览器，由浏览器解释运行，并显示出结果，如图1-1所示。 当遇到任何与ActiveX Scripting兼容的脚本（如VBScript和JavaScript）时，ASP引擎会调用相应的脚本引擎进行处理。若脚本指令中含有访问数据库的请求，就通过ODBC与后台数据库相连，由数据库访问组件执行访问操作等。由于ASP脚本是在服务器端解释执行的，所以其所有相关的发布工作都由Web服务器负责。,9,1.2.2 ASP的运行环境及安装,如果只是用HTML设计网页，并不需要特殊的环境，直接在浏览器上浏览即可。而用ASP设计的网页是在服务器端运行的，因此必须配置相应的运行环境。 ASP的运行环境可以选择如下安装： 如果是在Windows 95/98平台上运行ASP文件，需要安装个人Web服务器PWS。 如果是在Windows NT 4.0 Server平台上运行ASP文件，需要安装IIS 4.0。 如果是在Windows 2000/XP平台上运行ASP文件，由于其已内置了IIS 5.0以上版本，故只需添加其IIS组件即可。 下面以Win XP为例，介绍如何添加IIS 5.0组件。,10,1.2.2 ASP的运行环境及安装（续上）,具体安装步骤如下： 选择“开始设置控制面板”命令，在“控制面板”窗口中，双击“添加或删除程序”图标，出现如图1-2所示的窗口。,11,1.2.2 ASP的运行环境及安装（续上）, 双击“添加/删除Windows组件”图标，打开“Windows组件向导”对话框，如图1-3所示。,12,1.2.2 ASP的运行环境及安装（续上）, 选中“组件”列表框中的“Internet信息服务(IIS)”复选框。并根据需要选择其他组件，然后单击“详细信息”按钮，打开如图1-4所示的对话框。在IIS的子组件列表中选择所需组件，选择完毕后单击“确定”按钮，返回“Windows组件向导”对话框。,13,1.2.2 ASP的运行环境及安装（续上）, 单击“下一步”按钮，此时安装程序要求插入光盘来读取需要的文件，当放入Windows 2000光盘后，单击“确定”按钮，此刻安装程序开始复制文件并进行配置IIS，如图1-5所示。,14,1.2.2 ASP的运行环境及安装（续上）, 文件复制完成后，出现如图1-6所示的对话框。单击“完成”按钮即可。,15,1.2.2 ASP的运行环境及安装（续上）,同样，当IIS安装完成后，单击鼠标右键“我的电脑”选择“管理”，打开“计算机管理”对话框，找到“Internet信息服务”选项中的“默认Web站点”，如图1-7所示，发现该服务已经启动，此时只需在IE浏览器地址栏中输入“http:/localhost”，即可看到如图1-8所示的画面。,16,1.2.3 创建虚拟目录,当Web服务器启动后，只要将ASP文件放在其默认主目录“C:Inetpubwwwroot”下即可运行。但为了调试方便，往往需创建一个虚拟目录。所谓虚拟目录，就是在URL地址中使用的目录名称，或称之为URL映射，其可以与物理目录相同，也可以不同。 下面以Windows 2000为例介绍如何创建虚拟目录。 具体操作步骤如下： 首先，在计算机上创建一个名为ASP的文件夹，比如D:ASPWEB。 其次，打开“Internet信息服务”对话框（方法见上。,17,1.2.3 创建虚拟目录（续上）, 选中“默认Web站点”，单击右键，选择“新建虚拟目录”，出现如图1-9所示安装向导对话框。,18,1.2.3 创建虚拟目录（续上）, 在向导过程中，依次输入相应内容：别名“ASPWEB”、目录“D:ASPWEB”以及权限“至少包含读取和运行脚本”后，单击“完成”按钮即可，此时如图1-10所示。,19,1.2.3 创建虚拟目录（续上）, 选中“ASPWEB”，单击右键，选择“属性”，出现如图1-11所示对话框，可以对虚拟目录重新设置。,20,1.2.3 创建虚拟目录（续上）, 单击“文档”选项，可以添加新的默认文档，如index.htm或index.asp，并可以调整其先后顺序，如图1-12所示。,至此，虚拟目录就创建完成了，以后本书中所有的例子，只要存放在该目录下即可进行调试运行。,21,1.3.1 ASP的一个简单实例,下面将编写一个简单的ASP文件，以分析ASP的基本构成。 具体操作步骤如下： 选择“开始程序附件记事本”命令，以启动记事本程序。 在记事本程序窗口中，输入以下内容： 从“文件”菜单中选择“保存”命令，将弹出“另存为”对话框，选择一个保存位置，如前面设置的名为ASPWEB虚拟目录下的chapter1子文件夹，并将文件类型改为“所有文件”，同时在“文件名”框中输入“exam1-1.asp”，单击“保存”按钮。, ASP的一个简单实例 =#6:00:00# and time()=#12:00:00# and time()您好，“ & xm & str document.write “欢迎光临我的第一个ASP页面“ “ & str response.write str % ,该程序功能是显示当前来访日期与时间，并根据当前时刻显示不同的问候语，如早上的时候，会显示“早上好！”。,22,1.3.1 ASP的一个简单实例（续上）, 打开IE，在地址栏中输入“http:/localhost/ASPWEB/chapter1/exam1-1.asp”,程序运行结果如图1-24、图1-25所示。,23,1.3.2 ASP文件的基本构成和约定,1、基本构成 从上述这个简单的ASP程序中，经分析发现，通常由以下3个部分构成： 普通的HTML文件，即一般的Web页面内容 放在内的Script脚本语言代码，由服务器端运行。 放在 内的Script脚本语言代码，由客户端直接运行。 2、约定 在ASP中，默认语言是VBScript，若要使用其他的脚本语言，可以采用以下方法切换： 或 在ASP中，VBScript脚本语言中的用户界面函数（如InputBox和MsgBox）只能在客户端 使用，而不能服务器端中使用。 在ASP中，VBScript脚本语言不区分大小写，而JavaScript则区分大小写。,24,1.4.1 ASP的开发工具,一般来说，任何文本编辑器工具都可作为ASP的开发工具，只要编写完毕后存成后缀为.asp的文件即可。 对于初学者而言，最简单最好使用的就是系统自带的记事本程序。当然，要想开发一些大型的Web应用程序，最好还是使用一些专门的开发工具，如Microsoft Visual InterDev以及Macromedia Dreamweaver MX等。 现在网上也提供了一些很好用的ASP开发小工具，如UltraEdit等，它可以将ASP脚本语言与HTML语言分颜色显示，并可帮助编写复杂的HTML语句。大家可以到一些软件园地去下载。,25,1.4.2 ASP的调试技巧,在编写ASP的过程中，不出错误是不可能的，通常，可以采用边编辑边浏览的调试方法。在运行过程中，当程序出错时，页面上会显示错误描述、出错代码行数等信息，根据这些信息，再回到编辑器中进行修改。 另外，还可以采用注释方法，将一些语句暂时注释掉，逐段调试。或者临时添加一些输出语句如Response.Write将中间结果输出查看。若调试数据库程序，经常还会用到SQL语句输出查看错误。,26,第2章 HTML语言,2.1 一个HTML文件实例 2.2 HTML基本结构及语法规则 2.2.1 HTML的基本结构 2.2.2 HTML语法规则 2.3 HTML常用标签 2.3.1 网页结构类标签 2.3.2 段落类标签 2.3.3 列表类标签 2.3.4 格式化类标签 2.3.5 超链接类标签 2.3.6 图像类标签 2.3.7 表格类标签 2.3.8 框架类标签 2.3.9 表单类标签 2.5 HTML综合实例,27,2.1 一个HTML文件实例,【例2-1】 用记事本编写HTML语言， 制作一个简单的网页，如图2-1所示。 其代码如下：, 这是我编写的第一个HTML页面 HTML简介   一个HTML文件是一页文字信息，就象一封电子邮件或一个word字处理文档，而且实际上你完全可以使用Word字处理软件来编写一个HTML网页。你也可以通过其它字处理软件编写文本文件，网络浏览器只能处理文本信息。   一个HTML文件中包含了所有将显示在网页上的文字信息，其中也包括对浏览器的一些指示，如哪些文字应放置在何处，显示模式是什么样的等。如果你还有一些图片、动画、声音或是任何其它形式的资源，HTML文件也会告诉浏览器到哪里去查找这些资源，以及这些资源将放置在网页的什么位置。HTML文件通过标签(tag)来实现这一功能。 ,28,2.2.1 HTML的基本结构,通过上面这个实例，可以发现其基本结构如下： HTML文件总是以标签开头，标签结束，用来表明这是一个HTML文件。在和标签对之间是HTML的所有内容，一般由头部和主体构成。头部总是由和标签对定义，其中包含了该HTML页面的标题和说明信息，如编码方式、关键字、编辑软件、作者信息等。头部以下就是主体部分，它以作为起始标签，作为结束标签，中间部分就是在浏览器中所看到的内容，如文字、图片动画等。,29,2.2.2 HTML语法规则,通常，在编写HTML语言时需遵守以下语法规则： HTML文件总是以htm或html作为文件的扩展名。 HTML标签不区分大小写，如与是一样的。 多个HTML标签间可以循环嵌套，但不可以交叉嵌套。 HTML文件一行可以写多个标签，一个标签也可分多行书写，不用加任何续行符。 HTML文件由浏览器解释时只认标签，并不解释源文件中的换行、回车和多个连续空格。若要显示换行则用标签，换段则用标签，而要显示多个空格，则需使用多个。,30,2.3.1 网页结构类标签,1、HTML文档标签 格式： 说明：处于文档的最前面，表示HTML文档的开始，即浏览器从开始解释，直到为止。 2、HTML文件头标签 格式： 说明：紧跟标签的后面，表示文件头部开始，到结束。其内容包含了该HTML页面的标题和说明信息，如编码方式、关键字、编辑软件、作者信息等。 3、HTML文件标题标签 格式： 说明：该标签定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示。通过该标题内容的设定，可以使读者迅速了解该网页的主要内容以及在使用搜索引擎时可以找到该页。,31,2.3.1 网页结构类标签（续上）,、HTML文件说明信息标签 格式： 说明：该标签可以用来设定说明信息，一般放在文件头部内。 属性： （1）描述语言字符集的信息，例如：，常用的#可以为gb2312、x-mac-roman、big5等。 （2）描述文档的自身信息，如作者信息、过期时间、关键词列表等。例如： ,32,2.3.1 网页结构类标签（续上）,、HTML文件主体标签 格式： 说明：位于头部之后，以开始，直到结束。定义了网页上显示的主要内容与显示格式，是整个网页的核心，浏览器窗口中所能显示的内容全部被包含在该标签中。 属性：用于设定网页的总体风格。其中： bgcolor 设置网页的背景色。 background 设置网页的背景图像。 text 设置网页文本的颜色。 link 设置尚未被访问过的超链接颜色，默认为蓝色。 vlink 设置已被访问过的超链接颜色，默认为蓝色。 alink 设置一个正被激活的超链接颜色，默认为红色。 、注释标签 格式： 说明：在HTML文件中加入注释可以使程序清晰，容易理解。该标签中的内容在被浏览器解释时会被忽略，也不会被显示。,33,2.3.2 段落类标签,、标题标签 格式： 说明：该标签可以用来指明页面上的n级标题，其中n=16，主要用于对文本中的章节进行划分。 、段落标签 格式： 说明：该标签可以定义一个段落。 属性： align 用来设定段落的对齐方式。取值有：left、right和center。 、换行标签 格式： 说明：此标签是不分段换行。,34,2.3.2 段落类标签（续上）,、水平线标签 格式： 说明：该标签可以用来在页面上插入一条水平标尺线。 属性： align 用来设定横线放置的位置。取值有：left、right和center。 size 用来设定线条粗细，取值为n个像素，默认为2。 width 用来设定线段长度，取值可为绝对值（n个像素）或相对值（相对于当前窗口的百分比），默认值为100%。,35,2.3.2 段落类标签（实例）,【例2-2】段落类标签演示，如图2-2所示。 其代码如下：, 段落类标签演示 南京国力臭氧设备有限公司 欢迎您的光临！ 公司简介 南京国力臭氧应用设备有限公司是臭氧技术应用研究学会组委单位；是臭氧技术应用研究基金会成员；是臭氧发生器和臭氧化应用设备研究、设计专业制造商。 国力技研是国内首先（一九八二年）研究低电场（3000V）生产臭氧，以空气为媒介作用于空气及物体表面微生物的臭氧发生器和臭氧化应用设备专家。 公司采用先进的电真空技术和设备，并具有完整的生产工艺和检测设施，按GMP和FDA标准在中国开创新一代适用于空气和物体表面灭菌的臭氧发生器和臭氧化应用设备。 现有产品八个系列六十余品种，供制药、生物制品、食品饮料、遗传工程、医疗卫生等领域替代紫外线灯照射、化学薰蒸、Co60放射和蒸气消毒、高温灭菌时选用。 产品介绍 ,36,2.3.3 列表类标签,、编号列表标签 格式： 说明：该编号列表中每一项由开头。 属性：type，用来设定编号方案。其中： type=1 默认值，用数字对应编号符，如1，2，3等。 type=A 用大写字母编号表项，如A，B，C等。 type=a 用小写字母编号表项，如a，b，c等。 type=I 用大写罗马字母编号表项，如I，II，III，IV等。 type=i 用小写罗马字母编号表项，如i，ii，iii，iv等。 、项目列表标签 格式： 说明：该项目列表中每一项也由开头。 属性：type，用来设定项目符的形状。其中： type=DISC 实心圆点（默认值）。 type=CIRCLE 空心圆点。 type=SQUARE 实心方块。,37,2.3.3 列表类标签（实例）,【例2-3】列表类标签演示，如图2-3所示。 其代码如下：, 列表类标签演示 公司口号 开拓创新、追求无限 度身设计、专业服务 科技领先、群策管理 产品介绍 GJF、GJFF系列臭氧发生器 GSK、GZK系列臭氧发生器电源控制系统 GJF-T系列臭氧发生器 GYD、GYDF系列臭氧发生器 ,38,2.3.4 格式化类标签,、字符风格标签 格式： 粗体 斜体 下划线 删除线 以较大字体显示 以较小字体显示 上标 下标 、预格式化标签 格式： 说明：多数情况下，html文件中的文本是基于html标签进行格式化的，文本中任何额外的空白字符（空格、制表符、回车符等）都将被浏览器忽略。这个规则的一个例外就是使用该标签。任何被该标签括起来的空白字符都可以出现在最后的屏幕输出中。,39,2.3.4 格式化类标签（续上）,、字符格式标签 格式： 说明：该标签可以文字的字体、字号和颜色。 属性： size 设置文字大小，取值范围是从1到7，其中3是默认值。 face 设置文字字体，如黑体、宋体、楷体_GB2312、Times New Roman等。 color 设置文字颜色，取值是颜色名（如red）或颜色数值（如#003366）。,40,2.3.4 格式化类标签（实例）,【例2-4】格式化类标签演示，如图2-4所示。 其代码如下：, 格式化类标签演示 度身设计、专业服务： 根据应用项目选择设备属性人为制造臭氧的方法； 根据应用要求确定臭氧浓度计算臭氧应用量； 根据应用环境条件、臭氧用量选择设备类别、型号。 每个不同的应用环境、使用条件、作用目的都存在着物理、化学及其相关的差异，正确的选择机型及用量就是成功的先决条件，国力公司的技术人员会为您作出正确的选择及满意的服务。 ,41,2.3.5 超链接类标签,1、超链接的定义： 是一个网页指向另一个目的端的链接，目的端可以是另一个网页或者同一个网页上的不同位置 2、格式： 用来设定指定的对象为一个超链接的目标，即定义锚点。 用来设定同一文档的一个目标。 用来设定超链接的另一目标或目标资源。 用来设定另一文档中的一个目标。 要注意文档路径的设置。文档路径可以分为绝对路径、文档相对路径和根相对路径。 3、分类： 文档链接、锚点链接、邮件链接、脚本链接、空链接。,42,2.3.5 超链接类标签（实例）,【例2-5】超链接类标签演示，如图2-5所示。 其代码如下：, 超链接类标签演示 公司简介 产品介绍 南京国力臭氧应用设备有限公司是臭氧技术应用研究学会组委单位；是臭氧技术应用研究基金会成员；是臭氧发生器和臭氧化应用设备研究、设计专业制造商。国力技研是国内首先（一九八二年）研究低电场（3000V）生产臭氧，以空气为媒介作用于空气及物体表面微生物的臭氧发生器和臭氧化应用设备专家。公司采用先进的电真空技术和设备，并具有完整的生产工艺和检测设施，按GMP和FDA标准在中国开创新一代适用于空气和物体表面灭菌的臭氧发生器和臭氧化应用设备。现有产品八个系列六十余品种，供制药、生物制品、食品饮料、遗传工程、医疗卫生等领域替代紫外线灯照射、化学薰蒸、Co60放射和蒸气消毒、高温灭菌时选用。 该类产品于一九八八年六月四日通过省级技术鉴定，一九九二年在第二届北京国际博览会上获得“银杯奖”，一九九八年臭氧技术在医药工业中的应用设计论文被“99国际医药、医疗器械、制药机械成果博览学术交流研讨会”有关专家评选为“优秀成果金奖”，2001年通过ISO9001：2000国际质量体系认证，具备产品检测、鉴定和验证能力。 “开拓创新、追求无限”是“国力人”的精神，企业始终贯彻“以人为本、科技领先” 的经营理念，积极引进国内外先进技术，不断完善和开发新型的臭氧应用设备为广大用户服务。国力公司的每项成果均融汇着每一位国力参与者的才华、力量和信心。热忱欢迎各大专院校、科研院所、制药企业和同仁来我公司实验、研讨、考察、验证，为华夏臭氧产业共铸辉煌。 ,43,2.3.6 图像类标签,、图像格式 要想把在文档放置图像，其格式可以是GIF、JPEG、XBM、TIFF、BMP和PICT等。其中：GIF格式文件最多只能显示256中颜色，一般用于制作透明、隔行和动画效果图片等；而JPEG格式文件可以拥有计算机所能提供的最多种颜色，适合存放高质量的彩色图片、照片。 、内嵌图像标签 格式： 说明：用来在文档中嵌入图像。 属性： src 用来设定要被包含的图像的位置和文件名，其路径名使用规则同超链接中的href属性。 alt 用来设定在纯文本浏览器中替换图像的文本。 width和height 用来设定图像的尺寸，可取绝对值或相对值。 border 用来设定图像边框的宽度，其默认值为0，无图像边框。 align 用来设定图像的位置，取值有bottom、middle、top等。,44,2.3.6 图像类标签（实例）,【例2-6】图像类标签演示，如图2-6所示。 其代码如下：, 图像类标签演示 国力公司主要客户 第一个 第二个 第三个 ,45,2.3.7 表格类标签,格式： 说明： 表格标签除了可以显示大量数据列表格式外，往往还可以用于网页的布局。 属性： border 用来设定表格边框粗细。若省略，则无边框。 width和height 用来设定表格宽度和高度，可取绝对值或相对值。 cellspacing 用来设定表格间隙。 cellpadding 用来设定表格内部空白。 Background 设置表格的背景图像 Bgcolor 设置表格的背景颜色 Align 设置表格的对齐方式：center,left和right, 表头1 表头2 表头n 表项1 表项2 表项n ,46,2.3.7 表格类标签（实例）,【例2-7】表格类标签演示，如图2-7所示。 其代码如下：, 表格类标签演示 GMX-FB系列设备技术参数 型号 电源V/Hz 臭氧产量g/h 整机功率kw 臭氧浓度ppm* 脉动压力MPa/td 工作室尺寸L.W.H(mm)* GMX-FB1000 220/50 2.2+10% 0.45 80 0.0150.03 9607501400 GMX-FB1600 220/50 3.8+10% 0.65 80 0.0150.03 12009501400 , GMX-FB2200 220/50 5.8+10% 0.85 80 0.0150.03 40011001400 ,47,2.3.8 表单类标签,格式： 说明： 使用表单可以在网页中实现交互操作。 属性： action 用来设定将要处理表单的服务器的URL。 method 用来设定客户与服务器的数据交换方式。 type 用来设定要加入表单项的类型（text，password，checkbox，radio，image，hidden，submit，reset，file、button等）。 name 用来设定该表单项名，主要在处理表单时起作用。,48,菜单项 菜单项 菜单项 . 文本输入框 ,49,2.5 HTML综合实例,本节给出一个综合实例并加以说明，如图2-7所示。通过该实例，读者可以学会一个完整的网页制作方法。,50,2.5 HTML综合实例（源代码）,其代码如下：, 走近西部 何为西部 | 西部土地 | 重点工程 | 西部之最 | 西部政策 | 它山之石 | 西部论坛 | 与我联系 ,51,2.5 HTML综合实例（源代码）,其代码如下：（续上）, 西部地区经济建设究竟需要哪些人才呢？根据中央“西部开发计划” 中的重点开发项目和西部地区现状分析，目前西部地区主要缺乏科技开发 人员、投资创业人员、教育人才和中高级企业经营管理人员等。 但西部地区具有丰富的自然资源，大量的自然资源尚未开发与利用。 最近中央专门制定开发西部的重点投资项目目录，以吸引外商投资和国 内科技人员带技术开发。因而，西部建设中，科技开发人员是重中之重。 由全国科技精英组成“智囊团”为西部地区经济发展出谋划策；以大幅 度减免税等优惠政策，鼓励、吸引东部地区人才带项目到西部投资创业。 ,52,2.5 HTML综合实例（源代码）,其代码如下： （续上）, 西部大开发还要加强生态环境的保护建设，继续大力加强农业的基础地位，同时加快将资源优势转化为经济优势，从实际出发，发展特色经济。加强旅游事业的管理，把旅游业及相关产业发展成为西部地区的支柱产业之一。 李子彬强调，西部地区应深化改革，进一步提高开放水平。他还认为，西部大开发应当以现有的经济基础较好，人口较密集，沿交通干线和城市枢纽地区作为开发的重点区域，依托欧亚大陆桥、长江黄金水道、西南出海通道，促进陇海和长江上游等经济带的形成。 在西部加快建立并完善社会主义市场经济体制，进一步提高西部地区对内对外开放水平。实现社会全面进步，切实提高人民生活水平。突出加强文化、卫生、体育、计划生育等社会事业，逐步使西部地区各族人民都能享受到最基本的公共服务。西部大开发战略是在我国经过 50年的经济建设，特别是20年的改革开放和社会主义现代化建设的大背景下提出并实施的，所以既不能沿用传统计划经济时期的区域开发模式，也不能照搬东部地区的发展模式。 ,53,第3章 JavaScript脚本语言介绍,3.1 什么是JavaScript 3.2 JavaScript的基本语法 3.3 变量和数据类型 3.3.1 基本数据类型 3.3.2 常量 3.3.3 变量 3.3.4 表达式和运算符 3.4 程序控制语句 3.4.1 选择语句 3.4.2 循环语句 3.5 函数 3.6 对象、方法、属性和事件 3.6.1 基本概念 3.6.2 常用对象的介绍 3.6.3 常用事件的应用 3.7 JavaScript综合举例 3.7.1 页面交互功能的应用 3.7.2 状态栏的应用 3.7.3 鼠标事件的应用 3.7.4 窗口的应用,54,3.1 什么是JavaScript,JavaScript是由一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。它是通过嵌入在标准的HTML语言中实现的。它的出现弥补了HTML语言的不足之处，它是Java与HTML的折衷。它的开发环境简单，不需要Java编译器，而是直接运行在Web浏览器中，因而使用它与HTML超文本标记语言、Java脚本语言结合在一起，来实现一个Web页面中链接多个对象，与Web客户交互作用，从而可以开发客户端的应用程序等。,55,3.2 JavaScript的基本语法,【例3-1】利用JavaScript编写的Hello World程序。如图3-1-1、图3-1-2所示。 其代码如下：, exam3-1.htm Hello World! ,通过这个简单的实例，在HTML语言中插入JavaScript脚本语言的语法格式为： 注意：JavaScript语句对大小写比较敏感，因此，在写JavaScript语句时要注意。,56,3.3 变量和数据类型,JavaScript脚本语言同其它语言一样，有它自身的基本数据类型、表达式和算术运算符以及程序的基本框架结构。JavaScript提供了四种基本的数据类型用来处理数字和文字，而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。 【例3-2】JavaScript的变量定义、声明及赋值的演示。如图3-2所示。 其代码如下：, exam3-2.htm var x1=5; x2=7; x3=x1+x2; x4=x1 ,通过这个实例，可以得到JavaScript变量的定义方法和赋值方法等，其语法格式为： var 变量名=数据的值,57,3.3.1 基本的数据类型,在JavaScript中四种基本的数据类型为： 数值（整数和实数） 字符串型（用“ “或 括起来的字符或数值） 布尔型（使用True或False表示） 空值 在JavaScript的基本类型中的数据可以是常量，也可以是变量。由于采用弱类型的形式，因而一个数据的变量或常量不必首先作声明，而是在使用或赋值时才确定其数据的类型。当然也可以先声明该数据的类型，它是通过在赋值时自动说明其数据类型的。,58,3.3.2 常量,JavaScript的常量主要有以下几种： 整型常量（又称字面常量，是不能改变的数据。可以使用十六进制、八进制和十进制表示其值） 实型常量（由整数部分加小数部分表示，如13.48、197.99。可以使用科学或标准方法表示：3E6、2e8等） 布尔常量（只有True或False两种值，主要用来说明或代表是或否状态） 字符型常量（使用单引号或双引号括起来的一个或多个字符。如“JavaScript“、“1234567890“等 空值（即null，表示什么也没有。如试图引用没有定义的变量，则返回一个null值） 特殊字符（同C语言一样，是一些以反斜杠开头的不可显示的特殊字符。通常称为控制字符）,59,3.3.3 变量,变量的主要作用是存取数据、提供存放信息的容器。对于变量必须明确变量的命名、变量的类型、变量的声明及其变量的作用域。 JavaScript中的变量命名同其他语言非常相似，不同之处在于： 必须是一个有效的变量，即变量以字母开头，中间可以出现数字如x1、y2等。除下划线外，变量名不能有空格、+、-和其他符号。 不能使用JavaScript中的关键字作为变量。JavaScript定义了40多个关键字，供内部声明用的，如Var、int、double、true等。 在JavaScript中，变量可以用命令Var声明： var mytest;- 定义一个mytest变量，但没有赋予它的值 var mytest=“This is a test”;- 定义一个mytest变量，同时赋予了它的值 在JavaScript中，变量也可以不作声明，而在使用时再根据数据的类型来确定其变量的类型。如： x1=200 x2=“345“ x3=True x4=12.34等 其中x1为整数，x2为字符串，x3为布尔型，x4为实型。,60,3.3.4. 表达式和运算符,在定义完变量后，就可以对它们进行赋值、改变、计算等一系列操作，这一过程通常由表达式来完成，可以说它是变量、常量、布尔及运算符的集合。表达式可以分为算术表达式、字串表达式、赋值表达式及布尔表达式等。 运算符是完成操作的一系列符号，在JavaScript中有： 算术运算符（如+、-、*、/等） 比较运算符（如!=、=等） 逻辑布尔运算符（如!、|、|等） 字串运算符（如+、+=等）,61,3.4.1 选择语句,【例3-3】if-else语句的使用。如图3-3所示。 其代码如下：, exam3-3.htm var score=75; if (score ,通过这个实例，可以得到if-else选择语句结构，其语法格式为： if（条件表达式） 语句段1; else 语句段2; 功能：若条件表达式为true，则执行语句段；否则执行语句段2。 if-else语句是JavaScript中最基本的控制语句。如果有多个分支，则需嵌套使用if-else语句，其语法格式为： if（布尔值）语句1; else（布尔值）语句2; else if（布尔值）语句3; else 语句4; 在这种情况下，每一级的布尔表达式都会被计算，若为真，则执行其相应的语句，否则执行else后的语句。,62,3.4.2 循环语句（一）,【例3-4】for循环语句的使用。如图3-4所示。 其代码如下：, exam3-4.htm var n=10,s=0; for(var i=1;i ,通过这个实例，可以得到for循环语句结构，其语法格式为： for（初值;条件;步长表达式） 语句集； 功能：每当进行循环以前都要判断条件，条件为true时，执行语句集，否则跳出循环体，每循环一次计数变量增加或减少步长表达式的值。 初值用来设置计数变量并给它赋值。步长表达式用来说明计数变量的变化规律。三个主要语句之间，必须使用逗号分隔。 for循环是一般目的的循环。而它的一种特殊应用forin循环则用于在对象的所有属性内自动移位，其语法格式为： for（j in 对象） 语句集； 循环会从0增加j，直到达到该对象中的最后一个属性的下标为止。,63,3.4.2 循环语句（二）,【例3-5】while循环语句的使用。如图3-5-1所示。 其代码如下：, exam3-5.htm var n=10,s=0,i=1; while(i ,通过这个实例，可以得到while循环语句结构，其语法格式为： while（条件） 语句集; break; continue; 功能：每当进行循环以前都要判断条件，条件为true时，执行语句集，否则跳出循环体。其中break语句可以完全终止循环，即使循环没有结束也如此。Continue语句可跳到语句集的第一句进行下一次循环。 若上述代码中，在语句“s=s=i;”后添加语句“if(i=5) break;”，则运行后，浏览器显示如图3-5-2所示。,64,3.5 函数,函数为程序设计人员提供了一个非常方便的能力。通常在进行一个复杂的程序设计时，总是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个函数。从而，使各部分充分独立，任务单一，程序清晰，易懂、易读、易维护。JavaScript函数可以封装那些在程序中可能要多次用到的模块。并可作为事件驱动的结果而调用的程序。从而实现一个函数把它与事件驱动相关联。这是与其它语言不同的地方。 通常，在进行复杂的程序设计时，总是会发现有些程序段或模块需要多次执行。为了解决此类问题，可以将之定义为一个函数，使之相对独立。JavaScript函数就可以封装那些在程序中可能要多次用到的模块，并可作为事件驱动的结果而调用的程序，从而实现一个函数把它与事件驱动相关联。,65,3.5 函数（实例）,【例3-6】函数的定义。如图3-6所示。 其代码如下：, exam3-6.htm function welcome() alert(“Hello，欢迎光临本站！“); ,通过这个实例，可以得到函数定义的一般格式为： function 函数名(参数1,参数2,) 语句集; 功能：定义一个称为“函数名”的函数。 通常，函数放在HTML文件的头部事先定义，然后被HTML文件部分中的语句调用。需要注意的是： 函数开头必须为关键字function； 函数名是区分大的； 可以通过引用函数名来调用一个函数，同时参数必须放在括号中，用逗号隔开； 在程序结束时必须使用return将值返回。,66,3.6.1 基本概念,1、什么是对象 对象是指世上的任何事物，如汽车、人、计算机等，而在JavaScript语言中，主要是指在计算机中出现的window对象、form对象、date对象以及document对象等。 2、什么是属性和方法 属性是对对象特征的描述，如人的身高、体重等，方法是控制对象动作行为的方式，如人会吃饭、走路等。又如document对象具有属性lastModified和方法write等。 3、什么是事件 事件是指可被一个对象所识别的动作。JavaScript能识别这些动作，并能够建立程序对这些事件进行响应。比如人饿了就要吃饭，我们知道，人是一个对象，饿就是一个事件，而吃饭就是方法。,67,3.6.2 常用对象的介绍,1、string对象 属性： length 表示字符串中字符个数，包括所有符号。 方法：主要有 锚点anchor()，如同HTML中（a name=“）一样； 有关字符显示的控制方法，如big()，small()，italics()，bold()，blink()，fixed()，fontsize(size)等； 字体颜色fontcolor(color)； 字符串大小写转换toLowerCase()和toUpperCase()； 字符搜索indexofcharacter,fromIndex，表示从指定formIndex位置开始搜索character第一次出现的位置； 返回子串substring(start,end)，表示从start开始到end的字符全部返回。,68,3.6.2 常用对象的介绍（续上）,2、Date对象 属性：无。 方法： 获取日期和时间，有getYear()、getMonth()、getDate()、getDay()、getHours()、getMintes()、getSeconds()、getTime()等； 设置日期和时间，有setYear()、setMonth()、setDate()、setHours()、setMintes()、setSeconds()、setTime()等。,69,3.6.2 常用对象的介绍（续上）,3、windows对象 windows对象是每个窗口或框架的顶层对象，且是文档、位置及历史对象的父对象。 属性：主要有 frames 确定文档中帧的数目，帧作为实现一个窗口的分隔操作，起到非常有用的价值。 Parent 指明当前窗口或帧的父窗口。 Defaultstatus 默认状态，它的值显示在窗口的状态栏中。 Status 包含文档窗口中帧中的当前信息。 Top 包括的是用以实现所有的下级窗口的窗口。 Window 指的是当前窗口 Self 引用当前窗口 方法：主要有 prompt() 弹出信息的输入窗口。 Alert() 弹出信息的输出窗口。 另外，JavaScript还提供了几个常用的输出方法。如document.write和document.writln()等。,70,3.6.3 常用事件的应用,1、Load和Unload事件 Load和Unload事件可以使页面完成下载时生成Load事件，同样，当退出页面时可以发生Unload事件。OnLoad和onUnload事件处理程序能够使JavaScript命令在相应的时间内执行。它们可以控制一些活动的起始时间。 2、Click事件 Click事件和onClick事件处理程序用于单击按钮和链接的地方时执行JavaScript命令。该事件通常在下列基本对象中产生： （1）button（按钮对象） （2）checkbox（复选框）或（检查列表框） （3）radio（单选按钮） （4）reset button（重置按钮） （5）submit button（提交按钮） 例如： 在onChick等号后，可以使用自己编写的函数作为事件处理程序，也可以使用JavaScript中的内部函数。同时，还可以直接使用JavaScript的代码等。又如前面例子中： ,71,3.6.3 常用事件的应用（续上）,3、MouseOver事件 通常，当我们将鼠标放到链接上面移动后，则产生MouseOver事件来表达即将要发生的情况。具体在后面的综合实例中做详细介绍。 4、Change事件 一般来说，Change事件与onChange事件处理程序用于当正在进行的动作改变时执行JavaScript命令。比如说，当利用text或textarea元素输入字符值改变时引发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件，例如： 5、onFocus事件和onBlur事件 当用户单击text对象或textarea对象以及select对象时，产生onFocus事件，此时使该对象成为当前对象。而当text对象或textarea对象以及select对象不再拥有焦点时，则该对象退到后台，引发该onBlur事件，它与onFocus事件是对应的关系。,72,3.7.1 页面交互功能的应用,【例3-7】通过用户的输入，显示用户的信息。如图3-7-1、图3-7-2所示。 其代码如下：, exam3-7.htm function getname(str) alert(“Hello，“+str+“ 欢迎光临本站！“); 请输入您的大名： ,73,3.7.2 状态栏的应用,【例3-8】在状态栏上显示跑马灯的效果。如图3-7所示。 其代码如下：,exam3-8.htm var txt=“怎么样，跑马灯的效果如何？，想不想试试“; var lentxt=txt.length; var width=100; var pos=1-width; function scroll() pos+; var scroller=“; if(pos=lentxt) pos=1-width; if(pos 注意，状态栏马上就要开始跑啦！ ,74,3.7.3 鼠标事件的应用,【例3-9】通过鼠标事件自动弹出对话框。如图3-9-1所示