第三篇Web编程基础部分

《第三篇Web编程基础部分》由会员分享，可在线阅读，更多相关《第三篇Web编程基础部分（107页珍藏版）》请在金锄头文库上搜索。

1、第三篇第三篇 Web 应用程序设计应用程序设计本章对应的是教材中的第三篇，包括本章对应的是教材中的第三篇，包括 13 15 三章内容，另外补充了一些内容。三章内容，另外补充了一些内容。这三章分别介绍了这三章分别介绍了 Web 开发基础、开发基础、Web服服务器控件及一个开发实例。务器控件及一个开发实例。Web开发涉及一些基础性的东西，开发涉及一些基础性的东西，HTML、JavaScript、CSS 等都应该有所了解，我们等都应该有所了解，我们会先简单介绍一下这方面的知识。会先简单介绍一下这方面的知识。课上将这些内容整合为一章，因此内容与课上将这些内容整合为一章，因此内容与书上有所变化。书上有所

2、变化。本章主要内容本章主要内容Web 开发基础开发基础HTML 初步初步JavaScript 简介（不介绍简介（不介绍 CSS 了了）IIS 简介简介一个简单的一个简单的 ASP.NET 程序演示程序演示 Web 控件与控件与 HTML 控件控件ASP.NET 编程的一些重要问题编程的一些重要问题常用常用 Web 服务器控件服务器控件ASP.NET 连接数据库及数据绑定与显示连接数据库及数据绑定与显示Web 表单表单 和和 Web窗体窗体 窗体和表单的英文单词都是窗体和表单的英文单词都是 Form 一般一般 HTML 的的 Form 称为称为表单表单 把把“Web表单表单”改为改为“Web窗体

3、窗体 ”，与之，与之加以区分。加以区分。另外强调另外强调写写 ASP.NET Web 应用程序，应用程序，就像写就像写 Windows 窗体程序一样简单方便，窗体程序一样简单方便，程序员可以大致了解程序员可以大致了解 HTML 即可进行开即可进行开发。发。1. Web 开发基础开发基础What is the World Wide Web ? WWW 的概念的概念 1989年由年由 Berners-Lee 提出。提出。What makes the Web work?Web 依赖于以下机制: HypertextProtocolsUniversal Resource Locator (URL)Cli

4、ent and server computers剖析一个剖析一个URL protocolhost computerdirectory pathfile nameNote: Not all URLs will have the directory and filenameWhat makes the Web work?How the Web works?2. 浏览器解释用户浏览器解释用户的请求并向相应的的请求并向相应的服务器发出请求服务器发出请求3. 服务器接受服务器接受并处理浏览器并处理浏览器的请求的请求4. 服务器发送用户所需文件服务器发送用户所需文件并被浏览器解释并被浏览器解释1. 用户发

5、送用户发送请求请求5. 浏览器显示用户所浏览器显示用户所需内容需内容BrowserClient-SideServer-SideHTML, XML, XHTMLCascading Style Sheets (CSS)Scripting languages- JavaScript, VBScriptJava AppletsActiveX controlsPlug-ins and Helpers applicationCGI/PerlPHPColdFusionScripting Languages- Server-side JavaScript- ASP, JSP, Java ServletsAPI

6、 programsClient-side & Server-side Technologies静态网页静态网页早期的早期的 WEB 技术，技术，只能处理静态的只能处理静态的HTML网页。网页。客户机向客户机向 WEB 服务服务器请求一个网页，器请求一个网页， WEB 服务器将服务器将HTML 网页下载到网页下载到客户端，由客户端解客户端，由客户端解释并运行这个网页释并运行这个网页WEB服务器服务器HTML网页客户机浏览器客户机浏览器请求请求下载下载HTTP网页网页HTML网页网页解释并运行解释并运行Internet用户端用户端服务器服务器静态网页静态网页1.开发语言：开发语言：HTML2.开发

7、工具：开发工具：FrontPage、DreamWeaver 等等3.浏览器：浏览器：IE、Netscape等等4.WEB服务器：服务器： IIS、Apache、WebLogic 等等5.OS：Windows、Unix、Linux等等早期的动态网页早期的动态网页后来，出现了一些客后来，出现了一些客户端的户端的“动态网页动态网页”技术，主要是使用技术，主要是使用嵌嵌入入到到HTML的的脚本语脚本语言言，控制控制HTML元素，元素，让呆板的让呆板的HTML页面页面“活活”起来。浏览器起来。浏览器也加上了也加上了脚本解释脚本解释功功能能WEB服务器服务器HTML/脚本网页脚本网页客户机浏览器客户机浏览

8、器 + 脚本解释器脚本解释器请求下载HTTP/脚本网页HTML/脚本网页脚本网页解释并运行服务器端动态网页技术服务器端动态网页技术客户端的技术不能解决对数据库、客户端的技术不能解决对数据库、文件等服务器资源的访问问题，限文件等服务器资源的访问问题，限制了制了 WEB技术的应用，尤其是企业技术的应用，尤其是企业级应用。级应用。于是于是 服务器端服务器端的动态网页的动态网页 技术应运技术应运而生。而生。动态网页基本原理动态网页基本原理客户机请求一个服务器端网页。客户机请求一个服务器端网页。服务器端网页是一个混合了服务器端网页是一个混合了HTML、服务器端服务器端脚本语言、服务器端资源访问对象的程序

9、。脚本语言、服务器端资源访问对象的程序。该程序接到请求后，首先在服务器上执行服务该程序接到请求后，首先在服务器上执行服务器端脚本语言，进行对服务器端资源访问对象器端脚本语言，进行对服务器端资源访问对象的调用（如数据库调用）。的调用（如数据库调用）。然后通过一个然后通过一个”过滤器过滤器”程序（程序（ASP.NET过过滤器是滤器是 aspnet_isapi.dll)，将服务器端网页执，将服务器端网页执行的结果行的结果“翻译翻译”成客户端的成客户端的HTML/脚本，脚本，下载到客户端浏览器上解释并运行。下载到客户端浏览器上解释并运行。什么是什么是 ASPASP(Active Server Page

10、) 是由是由 Microsoft 开发开发的用于构建的用于构建动态动态网站的技术。网站的技术。ASP.NET 是是 .NET Framework 的一部分，是的一部分，是一个统一的一个统一的 Web 开发模型。开发模型。能够以能够以 C# 语言编写语言编写 Web 应用程序，其开发应用程序，其开发的页面默认由两部分组成：的页面默认由两部分组成：页面文件（页面文件（.aspx）用来编写）用来编写 HTML 代码代码代码隐藏页文件（代码隐藏页文件（.aspx.cs）用于处理页面）用于处理页面逻辑，可用逻辑，可用 C# 编写。编写。早期的早期的 ASP 代码代码 Hello World by ASP

11、 ClientServerRequestReply withHTML pageASPServerComponentHands request toHands HTML pageTranslatesScriptIntoHTMLHow to load an ASP page ?缺点缺点这种服务器端的动态网页技术有两这种服务器端的动态网页技术有两个重要缺陷：个重要缺陷：服务器端脚本语言是服务器端脚本语言是解释执行解释执行的，的，效率低下。效率低下。HTML 元素和程序元素和程序代码混排代码混排，使程，使程序结构极坏，不利于写作和阅读序结构极坏，不利于写作和阅读ASP.NET 解决了这两个问题解决了这

12、两个问题它是它是编译运行编译运行的，效率相当高的，效率相当高使用了使用了“代码后置代码后置 code behind”技术，技术，使使 HTML 和代码分开和代码分开不仅利于程序写作和阅读，还使团队分不仅利于程序写作和阅读，还使团队分工成为可能。工成为可能。页面设计师可以设计页面设计师可以设计HTML，程序员可程序员可以写程序，两人的工作成果可一起运行以写程序，两人的工作成果可一起运行一个一个ASP.NET应用程序的运行过程应用程序的运行过程HTML/脚本网页WEB服务器服务器客户机客户机服务器资源服务器资源编译的后置代码编译的后置代码和和HTML文件文件过滤器过滤器aspnet_isapi.d

13、llHttpModuleHttpHandler请请求求调用调用运行结果运行结果转换成客户端转换成客户端HTML/脚本脚本解释并运行解释并运行 IIS WindowsInternet用户端用户端基于基于ASP.NET 的的 Web Site 构架构架显示文件显示文件录入数据录入数据产生产生Submit事件事件Form中的中的Object、Action (CGI文件）文件）VB / C# / VCHTML文本文本运行运行JavaScript或者或者 VBScriptDBMSCORBARemote *.Aspx.cs文件文件 VB / C# HTML 操作服务器端控件产生服务器段事件，调用服务器端事

14、件处理函数2. HTML 初步初步虽然虽然 html 的内容很多，但是常用的并不多，的内容很多，但是常用的并不多，掌握基本的内容可以应付大多情况。掌握基本的内容可以应付大多情况。进一步的内容可以在今后的使用中查找资料进一步的内容可以在今后的使用中查找资料现学现用。现学现用。可以到可以到http:/ 学习，这里除了教程还有很多实学习，这里除了教程还有很多实例，另外提供了编辑器可以当时编辑实验效例，另外提供了编辑器可以当时编辑实验效果。果。 2.1 Html 简介简介 HTML：HyperText Markup Language，超文本，超文本标记语言。标记语言。通过超文本传输协议（通过超文本传输

15、协议（HTTP：Hypertext Transport Protocol），使用（），使用（URL：Uniform Resource Locator）来定位网络文件、站点或服务）来定位网络文件、站点或服务器。器。HTML本质上不是程序语言，而是一种标记语言。本质上不是程序语言，而是一种标记语言。所谓所谓标记标记（标签、（标签、Tag），实际上是用一些固定的），实际上是用一些固定的符号表示某种含义，而浏览器具备解释各种这些符号表示某种含义，而浏览器具备解释各种这些标记的能力。标记的能力。 注意，注意，html 使用的标记都是使用的标记都是事先定义好的事先定义好的。但是浏览器并不对但是浏览器并不对

16、 html 语法做严格检查，语法做严格检查，对于有错误无法解释执行的部分会忽略。对于有错误无法解释执行的部分会忽略。例如：例如： 这是一个标记，表示用这是一个标记，表示用 1 号字号字体显示这段文字体显示这段文字 用用 html 语言写的文档即为语言写的文档即为 html 文档，使用文档，使用html 或或 htm 扩展名。扩展名。Html不区分大小写，但一般都使用小写，但不区分大小写，但一般都使用小写，但在本文中为了醒目，往往使用了大写。在本文中为了醒目，往往使用了大写。可以使用任何文本编辑器编写。可以使用任何文本编辑器编写。HTML 的基本结构的基本结构 其基本结构分为三部分：其基本结构分

17、为三部分：版本声明（版本声明（Prologue）头部（头部（Head）主体（主体（Body）其中，主要部分是头部和主体。其中，主要部分是头部和主体。 例如例如 这里写网页的标题这里写网页的标题 这里是网页的主体（显示在浏览器窗口中的部分）这里是网页的主体（显示在浏览器窗口中的部分） 我是一个标记，表示用我是一个标记，表示用 1 号字体显示一个标题号字体显示一个标题 Html 标记格式标记格式 HTML标记也经常称为元素标记也经常称为元素 ( HTML Element )，因为很多时候用来标记一些类，因为很多时候用来标记一些类似于对象的东西，比如按钮。似于对象的东西，比如按钮。 标记的格式：标记

18、的格式： 标记一般成对出现：标记一般成对出现： 这里插入内容这里插入内容 为了防止忘记写结束标记符，可采用成对书写，为了防止忘记写结束标记符，可采用成对书写，然后在中间插入的写法然后在中间插入的写法。Html 标记格式标记格式 放在放在 HEAD 标记内的信息一般不显示在标记内的信息一般不显示在浏览器的窗口中，通常这里面用来定义浏览器的窗口中，通常这里面用来定义JavaScript 函数，还可以包含函数，还可以包含 JavaScript 代码文件（代码文件（js文件）、层叠样式表（文件）、层叠样式表（CSS：Cascading Style Sheets）文件等一些预处理）文件等一些预处理工作。

19、工作。 BODY 标记内通常放上需要表示或展示标记内通常放上需要表示或展示内容的标记格式。内容的标记格式。HTML 中的注释中的注释第一种格式：第一种格式：。其中，注释内容中不可出现其中，注释内容中不可出现“”，常用，常用于说明标记里的内容；于说明标记里的内容； 第二种格式：第二种格式：。其中，注释内容中可包括其中，注释内容中可包括“”在内的任在内的任何符号，常用于注释大段的内容。何符号，常用于注释大段的内容。 HTML 元素的属性元素的属性 元素可以拥有属性。属性可以扩展元素可以拥有属性。属性可以扩展HTML元元素的表现能力。素的表现能力。比如你可以使用一个比如你可以使用一个 bgcolor

20、 属性，使得页属性，使得页面的背景色成为红色，如：面的背景色成为红色，如： 属性通常由属性名和值以属性通常由属性名和值以 name=“value” 的的形式成对出现，属性值一般用双引号括起来。形式成对出现，属性值一般用双引号括起来。属性通常是附加给属性通常是附加给 HTML 的的 Opening Tag，而不是而不是 Closing Tag。 2.2 常用的简单标记常用的简单标记 (1) 基本标记（基本标记（Basic Tags） 定义整个超文本文档定义整个超文本文档（网页）对象，描述（网页）对象，描述Web页面的起始与终止。页面的起始与终止。 设置页面的头部分，用设置页面的头部分，用来包含当

21、前文档的一些相关信息。如定义样来包含当前文档的一些相关信息。如定义样式、网页的标题、网页中使用的脚本语言以式、网页的标题、网页中使用的脚本语言以及对搜索引擎有帮助的关键字。及对搜索引擎有帮助的关键字。 用来指明文件的标题，用来指明文件的标题，其内容将显示在浏览器的标题栏内，设置它其内容将显示在浏览器的标题栏内，设置它的好处：可为下载时提供默认的文件名；可的好处：可为下载时提供默认的文件名；可为搜索引擎提供搜索关键字等。为搜索引擎提供搜索关键字等。 放置放置Web页面的正文页面的正文内容，包含文件内的文字、超链接文字的内容，包含文件内的文字、超链接文字的颜色、背景色彩、图片、动画、影像、音颜色、

22、背景色彩、图片、动画、影像、音效等几乎所有对网页的展示功能。效等几乎所有对网页的展示功能。 用来介绍与文件内容相关的信用来介绍与文件内容相关的信息。每一个息。每一个标记用于指明一个名标记用于指明一个名称或数值对，称或数值对，常常放在头部标记中常常放在头部标记中。 (2) 文本、字符格式文本、字符格式（Text & Char Format） 标题文字（标题文字（n=16） 换行标记换行标记 段落标记。注意：浏览器会忽略段落标记。注意：浏览器会忽略你输入的换行，多个空格也只看做是你输入的换行，多个空格也只看做是1个。个。用用换行是个坏习惯，正确的是使用换行是个坏习惯，正确的是使用。 水平线标记水平

23、线标记 字体标记字体标记 要显示的文字要显示的文字 设置字符串的字体、大小、颜色设置字符串的字体、大小、颜色颜色名：颜色名：red、green、blue、yellow、black、white 等。等。颜色值：格式为颜色值：格式为 #rrggbb，其中，其中，r、g、b分分别用十六进制数表示的红、绿、蓝三种颜色，别用十六进制数表示的红、绿、蓝三种颜色，如如 #FF0000 表示红色，而表示红色，而 #6CB0A6 表示一表示一种青色。种青色。 字符格式标记字符格式标记 粗体粗体bold 斜体斜体italic 文字当中划线表示删除文字当中划线表示删除 加下划线加下划线 着重强调着重强调 ：和粗体差

24、不多：和粗体差不多 定义上标定义上标 定义下标定义下标 缩进表示引用缩进表示引用 保留空格和换行等原始输入格式。有时这保留空格和换行等原始输入格式。有时这个很有用，方便！个很有用，方便！ 表示计算机代码，等宽字体表示计算机代码，等宽字体 。(3) HTML 特殊字符显示特殊字符显示 有些字符在有些字符在 HTML 中有特别含义，如中有特别含义，如 “” 是标记的开始，不显示在我们最终看到的网是标记的开始，不显示在我们最终看到的网页里。但有时我们希望在网页中显示一个页里。但有时我们希望在网页中显示一个号。号。这就要使用这就要使用 HTML 字符实体字符实体 (Character Entity)。

25、一个字符实体分成三部分：第一部分是一个一个字符实体分成三部分：第一部分是一个&符号符号；第二部分是；第二部分是实体名实体名、或者是、或者是 # 加上加上实体编号实体编号；第三部分是一个；第三部分是一个分号分号。比如，要显示小于号，就可以写比如，要显示小于号，就可以写 < 或者或者<。注意：实体名是区分大小写的注意：实体名是区分大小写的。最常用的字符实体最常用的字符实体 显示示结果果说明明Entity NameEntity Number一个空格一个空格  大于大于>>&符号符号&&双引号双引号""(4) 超链接（超

26、链接（Hyperlink） 标记标记 表示一个超表示一个超链接元素。链接元素。超链接的属性主要有超链接地址、超链接文超链接的属性主要有超链接地址、超链接文件打开的窗口位置，都在其开始标记中定义。件打开的窗口位置，都在其开始标记中定义。例如：例如： 山东大学山东大学 其中，其中，href 即超链接地址，即超链接地址， target 即窗口位即窗口位置，值置，值 _blank 表示将在一个新浏览器的窗口表示将在一个新浏览器的窗口中显示。中显示。 (5) 表格（表格（Table） 表格几乎是页面中最常用的元素，可以表格几乎是页面中最常用的元素，可以用来精确定义页面文本或图片等的排版用来精确定义页面文

27、本或图片等的排版格式、排版布局，使之整齐美观。格式、排版布局，使之整齐美观。表格最基本的三个标记是：表格最基本的三个标记是： 定义一个表格定义一个表格 定义表格内的一行定义表格内的一行 定义一行内的一个单元格定义一行内的一个单元格 表格的主要属性表格的主要属性 cellpadding=数值：单位是像素，内容与边框数值：单位是像素，内容与边框的距离的距离(默认为默认为2) cellspacing=数值：单位是像素，单元格间的数值：单位是像素，单元格间的距离距离(默认为默认为2) border=数值：单位是像素，定义表格边框宽数值：单位是像素，定义表格边框宽度度 Bordercolor=：边框颜色

28、：边框颜色Bordercolorlight=：边框明亮面的颜色：边框明亮面的颜色 Bordercolordark=：边框暗淡面的颜色：边框暗淡面的颜色 表格的主要属性表格的主要属性width=数值：单位是像素或百分比，定义表数值：单位是像素或百分比，定义表格宽度格宽度 Height=：定义表格高度：定义表格高度background=图片链接地址，定义表格背景图片链接地址，定义表格背景图图 Colspan=，单元格跨越多列，单元格跨越多列Rowspan=，单元格跨越多行，单元格跨越多行Align=值：水平对齐方式值：水平对齐方式 Valign=值：垂直对齐方式值：垂直对齐方式 Bgcolor=：

29、背景色：背景色上述属性有的只能用在表格标签中，有上述属性有的只能用在表格标签中，有的也可用在行或单元格中。的也可用在行或单元格中。表格中还可以合并单元格表格中还可以合并单元格也可嵌套表格也可嵌套表格单元格中既可以是文本，也可以是其他单元格中既可以是文本，也可以是其他元素标记。元素标记。 下面的例子显示了一个表格下面的例子显示了一个表格 这是一段这是一段 这是另外一段。这是另外一段。 这个单元格里包含了一个表格：这个单元格里包含了一个表格： A B C D 这个单元格里包含了一个图片：这个单元格里包含了一个图片： HELLO (6) HTML 框架框架(Frames) 使用框架使用框架(Fram

30、e)，可以在浏览器窗口同时显，可以在浏览器窗口同时显示多个示多个网页网页。每个。每个Frame里设定一个网页，每里设定一个网页，每个个Frame里的网页相互独立。里的网页相互独立。 标记：标记：决定如何划分决定如何划分Frame。最主要的属性是最主要的属性是cols和和rows属性。属性。使用使用cols属性，表示按列分布属性，表示按列分布Frame；使用；使用rows属性，表示按行分布属性，表示按行分布Frame。其他一些属性如可以设置边框宽度等。其他一些属性如可以设置边框宽度等。设置设置Noresize属性为属性为noresize=noresize，可，可以确保以确保Frame不能通过拖拉

31、鼠标改变大小。不能通过拖拉鼠标改变大小。 标记标记 用用 标记指定网页。标记指定网页。里有里有src属性，属性，src 值就是网页的路径和文件名。值就是网页的路径和文件名。下面的代码将下面的代码将 Frameset 分成分成2列，第一列列，第一列25%，表示第一列的宽度是窗口宽度的，表示第一列的宽度是窗口宽度的25%；第二列；第二列75%，表示第二列的宽度是窗口宽，表示第二列的宽度是窗口宽度的度的75%。第一列中显示。第一列中显示 a.html，第二列中，第二列中显示显示 b.html。 标记标记有时我们希望在一个页面中嵌入另一个有时我们希望在一个页面中嵌入另一个页面页面使用使用 可以将一个页

32、面置于一个可以将一个页面置于一个HTML 文件内。文件内。例子：例子：frameDemo 2.3 表单及表单及 HTML 控件（组件）控件（组件） 表单（表单（Form）HTML表单表单(Form)是是 HTML 的一个重要的一个重要部分，主要用于采集和提交用户输入的部分，主要用于采集和提交用户输入的信息。信息。当向服务器提交信息时，会将表单内的当向服务器提交信息时，会将表单内的所有信息打包发送到服务器。所有信息打包发送到服务器。用标记用标记 标记表单的范围。标记表单的范围。 表单要掌握以下三方面内容表单要掌握以下三方面内容（1）Action ：表单的信息提交到服务器后，：表单的信息提交到服务

33、器后，总是需要程序来进行处理，总是需要程序来进行处理，action 就指明了就指明了处理表单信息的文件。处理表单信息的文件。（2）Method：表示发送表单信息的方式。：表示发送表单信息的方式。Method 有两个值：有两个值：get 和和 post。get 方式将表单控件的方式将表单控件的 name/value 信息经过信息经过编码之后，通过编码之后，通过URL发送发送(可以在地址栏里看可以在地址栏里看到，比如到，比如 google 的例子的例子)。不适合传输大量的数据。不适合传输大量的数据。post 则将表单的内容通过则将表单的内容通过 http 发送，你在发送，你在地址栏看不到表单的提交

34、信息。地址栏看不到表单的提交信息。如果只是为取得和显示数据，一般用如果只是为取得和显示数据，一般用get；一旦涉及数据的保存和更新，建议用一旦涉及数据的保存和更新，建议用post。（3）表单控件表单控件(Form Controls) ：表单中可以容纳很多控件，如文本框、按表单中可以容纳很多控件，如文本框、按钮、单选与多选，下拉列表等。钮、单选与多选，下拉列表等。简单的例子简单的例子一个让用户输入姓名的一个让用户输入姓名的HTML表单表单(Form) ：请输入你的姓名：请输入你的姓名：说明：无论是表单还是表单控件，如果程序中需说明：无论是表单还是表单控件，如果程序中需要定位具体的控件，可以通过要

35、定位具体的控件，可以通过 name=”XXX” 或或 id=”XXX” 的形式进行标识。的形式进行标识。input 标记标记 是表单控件中最重要的一个是表单控件中最重要的一个.它其实对应它其实对应多个控件多个控件，由属性，由属性 type 进行区进行区别。别。如如 type=”text” 就是一个单行文本输入框。就是一个单行文本输入框。Type 属性可将控件显示为属性可将控件显示为 输入型、选择输入型、选择型、点击型共三类。型、点击型共三类。 Type 属性的主要取值及对应控件属性的主要取值及对应控件 text ： 文字输入域文字输入域 (输入型输入型) password ： 也是文字输入域，

36、但是输入的文也是文字输入域，但是输入的文字以密码符号字以密码符号*显示显示 (输入型输入型) file ：可以输入一个文件路径：可以输入一个文件路径 (输入型输入型) checkbox ：复选框，可以选择零个或多个：复选框，可以选择零个或多个(选选择型择型) radio ：单选框，只可以选择一个而且必须选：单选框，只可以选择一个而且必须选择一个择一个 (选择型选择型) hidden ：隐藏域，可以传送一些隐藏的信息：隐藏域，可以传送一些隐藏的信息到服务器到服务器 Type 属性的主要取值及对应控件属性的主要取值及对应控件button ：按钮：按钮(点击型点击型) image ：使用图片来显示按

37、钮，使用：使用图片来显示按钮，使用 src 属属性指定图像的位置性指定图像的位置 ( 就像就像 img 标签的标签的 src 屬屬性性)(点击型点击型) submit ：提交按钮，表单填写完毕可以提：提交按钮，表单填写完毕可以提交，把信息传送到服务器。可以使用交，把信息传送到服务器。可以使用value属性來显示按鈕上的文字属性來显示按鈕上的文字(点击型点击型) reset ：重置按钮，可以把表单中的信息清：重置按钮，可以把表单中的信息清空空(点击型点击型) input 的常用属性的常用属性有些属性只针对个别的类型有些属性只针对个别的类型value ： 输入域的值输入域的值 size ： 输入域

38、的长度输入域的长度 maxlength ： 输入域最多可输入文字的长度输入域最多可输入文字的长度 checked ： 如果是选择型的输入域，代表已如果是选择型的输入域，代表已经被选择经被选择 readonly ： 输入域可以选择，但无法修改输入域可以选择，但无法修改 input 的常用属性的常用属性disabled ： 输入域无法获得焦点，无法选择，输入域无法获得焦点，无法选择，以灰色显示，在表单中不起任何作用以灰色显示，在表单中不起任何作用 accesskey ： 表单的快捷键访问方式表单的快捷键访问方式 tabindex ： 输入域的输入域的tab键遍历顺序键遍历顺序 src ： 当使用图

39、片来表示按钮时当使用图片来表示按钮时,代表图片的代表图片的位置位置(URI) alt ： 代表表单的提示文字，当鼠标停留时代表表单的提示文字，当鼠标停留时例子：例子：inputDemo.html 其它控件标记其它控件标记 （1） 多行文本标签多行文本标签定义可多行输入的文本输入控件，文本定义可多行输入的文本输入控件，文本区中可容纳无限数量的文本。区中可容纳无限数量的文本。可以通过可以通过 cols 和和 rows 属性来规定属性来规定 textarea 的尺寸。的尺寸。例如例如 你可以在这里输入长篇大论。你可以在这里输入长篇大论。 （2） 下拉列表标签下拉列表标签 标签定义一个下拉列表，标签定

40、义一个下拉列表，在标记中插入在标记中插入 标记表示标记表示选择项。例如：选择项。例如： Volvo Fiat 其中，指定其中，指定 selected=selected“ 属性的项为属性的项为默认的选项。默认的选项。2.4 事件事件 当对表单或表单元素进行操作时，会产生当对表单或表单元素进行操作时，会产生相应的事件。相应的事件。浏览器中都内置有大量的事件处理器。这浏览器中都内置有大量的事件处理器。这些处理器会监视特定的条件或用户行为，些处理器会监视特定的条件或用户行为，例如鼠标单击。例如鼠标单击。通过使用客户端的通过使用客户端的 JavaScript，可以将某些，可以将某些特定的事件处理器作为属

41、性添加给特定的特定的事件处理器作为属性添加给特定的标签，并可以在事件发生时执行一个或多标签，并可以在事件发生时执行一个或多个个 JavaScript 命令或函数。命令或函数。 下面简单例举一些常用的事件，如何处理下面简单例举一些常用的事件，如何处理事件在事件在 JavaScript 部分再进行介绍。部分再进行介绍。窗口事件窗口事件 (Window Events)仅在仅在 body 和和 frameset 元素中有效。一般元素中有效。一般可以在这里做初始化可以在这里做初始化onload：当载入页面时执行脚本：当载入页面时执行脚本 onunload：当卸载页面时执行脚本：当卸载页面时执行脚本 表单

42、元素事件表单元素事件 (Form Element Events) 仅在表单元素仅在表单元素 Form 中有效。中有效。onsubmit：当表单被提交时执行脚本。：当表单被提交时执行脚本。最重要的一个事件，通常在提交表单时要最重要的一个事件，通常在提交表单时要做些预处理，比如检查用户输入，可以在做些预处理，比如检查用户输入，可以在此事件进行处理。此事件进行处理。 onreset：当表单被重置时执行脚本：当表单被重置时执行脚本 onselect：当元素被选取时执行脚本：当元素被选取时执行脚本 键盘事件键盘事件 (Keyboard Events)一般在表单及表单元素中有效。一般在表单及表单元素中有效

43、。onkeydown：当键盘被按下时执行脚本：当键盘被按下时执行脚本 onkeypress：当键盘被按下后又松开时执：当键盘被按下后又松开时执行脚本行脚本 onkeyup：当键盘被松开时执行脚本：当键盘被松开时执行脚本 鼠标事件鼠标事件 (Mouse Events) 一般在表单及表单元素中有效。一般在表单及表单元素中有效。onclick：当鼠标单击时执行脚本：当鼠标单击时执行脚本 ondblclick：当鼠标双击时执行脚本：当鼠标双击时执行脚本 onmousedown：当鼠标按钮按下时执行脚本：当鼠标按钮按下时执行脚本 onmousemove：当鼠标指针移动时执行脚本：当鼠标指针移动时执行脚本

44、 onmouseout：当鼠标指针移出时执行脚本：当鼠标指针移出时执行脚本 onmouseover：当鼠标指针悬停于某元素之：当鼠标指针悬停于某元素之上时执行脚本上时执行脚本 onmouseup：当鼠标按钮被松开时执行脚本：当鼠标按钮被松开时执行脚本 练习练习做一个登录页面做一个登录页面 login.html可输入用户账号、密码。可输入用户账号、密码。如果你登陆时要区分用户类型，再加上如果你登陆时要区分用户类型，再加上单选或下拉列表。单选或下拉列表。有登录及重置按钮。有登录及重置按钮。 3. JavaScript 简介简介 JavaScript 是什么？是什么？JavaScript 是一种脚本

45、语言（解释运行而非是一种脚本语言（解释运行而非编译），可以嵌入到编译），可以嵌入到 HTML 文档中并经浏文档中并经浏览器解释执行。览器解释执行。是一种是一种客户端客户端的动态网页技术，能使网页增的动态网页技术，能使网页增加互动性、及时响应用户的操作、对提交表加互动性、及时响应用户的操作、对提交表单做即时的检查等。单做即时的检查等。任何可以编写任何可以编写 HTML 文档的软件都可以用文档的软件都可以用来开发来开发 JavaScript。 Java 与与 JavaScript 有什么不同有什么不同 不要想当然地看到不要想当然地看到 Java 和和 JavaScript 都有都有“Java”，就

46、认为它们有什么亲戚关系，就认为它们有什么亲戚关系，其实它们是完完全全不同的两种东西。其实它们是完完全全不同的两种东西。其实当初他也不叫这名，后来傍名人才叫其实当初他也不叫这名，后来傍名人才叫做做 JavaScript。当然，叫这名也是有一点道理的，因为它当然，叫这名也是有一点道理的，因为它在语法结构等方面与在语法结构等方面与 Java 很类似，有很类似，有Java的基础你将很容易学习的基础你将很容易学习 JavaScript。 3.1 JavaScript 语言基础语言基础 （1）在什么地方插入在什么地方插入 JavaScriptJavaScript 几乎可以出现在几乎可以出现在 HTML 的

47、任意的任意地方。地方。使用使用标记，你可以在标记，你可以在 HTML 文档的任意地方插入文档的任意地方插入 JavaScript。不过如果要在声明框架的网页中插入，就一不过如果要在声明框架的网页中插入，就一定要在定要在之前插入，否则不会运行。之前插入，否则不会运行。 （2）基本格式）基本格式 .(JavaScript代码代码).另外一种插入另外一种插入 JavaScript 的方法，是把的方法，是把 JavaScript 代码单独写到一个文件当中，此代码单独写到一个文件当中，此文件应该用文件应该用 “.js” 作扩展名。作扩展名。然后用格式为然后用格式为 的标记把它嵌入到文档中。的标记把它嵌入

48、到文档中。 (3) JavaScript 的语句及语法结构的语句及语法结构 注意，虽然注意，虽然 HTML 不区分大小写，但是不区分大小写，但是 JavaScript 是区分大小写的是区分大小写的！注释：注释：JavaScript 和和 java 的注释类似，单的注释类似，单行注释为行注释为 “/”，而多行注释是用，而多行注释是用“/*”和和“*/”。 语句：是语言的基本单位，同样是用一个分语句：是语言的基本单位，同样是用一个分号号“;”作为作为 语句结束的标识符。语句结束的标识符。 JavaScript 的语法几乎和的语法几乎和 java 一样一样像变量命名、赋值、基本运算、函数的像变量命名

49、、赋值、基本运算、函数的声明及调用、各种逻辑结构等等。声明及调用、各种逻辑结构等等。而且在某些方面进行了简化（例如函数而且在某些方面进行了简化（例如函数的说明、数字等），使用起来更灵活、的说明、数字等），使用起来更灵活、方便。方便。比如：比如：for (i = 1; i 10; i+) document.write(i); 和和 java 的写法完全一样。的写法完全一样。 变量及声明变量及声明 变量需要声明，没有声明的变量不能使用。变量需要声明，没有声明的变量不能使用。格式为：格式为：var = ;例如：例如： var strNamr = 张三张三;注意：声明变量不用指出数据类型，其实注意：声

50、明变量不用指出数据类型，其实就是指定了类型也没用。就是指定了类型也没用。在实际执行时会根据情况自动处理。在实际执行时会根据情况自动处理。 数据类型数据类型 由于由于 JavaScript 对数据类型不进行严格的限制对数据类型不进行严格的限制（从声明变量就可看出），所以我们实际使用（从声明变量就可看出），所以我们实际使用时也很少关注变量的具体类型。时也很少关注变量的具体类型。你可以简单地看待为你可以简单地看待为“数值数值”、“字符串字符串”和和“boolean”三大类即可。三大类即可。特别：字符串需要用引号括起来，特别：字符串需要用引号括起来， JavaScript 中既可以用单引号，也可以是双

51、引号。中既可以用单引号，也可以是双引号。但是但是用哪种引号开始就要用哪种结束用哪种引号开始就要用哪种结束，而且单，而且单双引号可嵌套使用，这主要是为了方便，避免双引号可嵌套使用，这主要是为了方便，避免频繁使用转义字符。频繁使用转义字符。例如：例如：这里是这里是JavaScript 教程教程。 JavaScript 的特殊常量的特殊常量 null ：一个特殊的空值。当变量未定义，或者：一个特殊的空值。当变量未定义，或者定义之后没有对其进行任何赋值操作，它的值定义之后没有对其进行任何赋值操作，它的值就是就是“null”。企图返回一个不存在的对象时也会出现企图返回一个不存在的对象时也会出现null值

52、。值。NaN ：“Not a Number”，当运算无法返回正，当运算无法返回正确的数值时，就会返回确的数值时，就会返回“NaN”值。值。NaN 值非常特殊，因为它值非常特殊，因为它“不是数字不是数字”，所，所以任何数跟它都不相等，甚至以任何数跟它都不相等，甚至 NaN 本身也不本身也不等于等于 NaN 。 数组数组 最简单的方式，声明变量时直接赋值：最简单的方式，声明变量时直接赋值：var myArray = 1, Tom , 22 , ; 请仔细看看这里和请仔细看看这里和 java有何不同之处。有何不同之处。也可以先声明一个空数组对象，以后再添加也可以先声明一个空数组对象，以后再添加数组

53、元素：数组元素：var = new Array();还可在定义数组的时候直接初始化数据：还可在定义数组的时候直接初始化数据：var = new Array(, , .);例如，例如，var myArray = newArray(1, 4.5, Hi); 函数函数可以声明自己的函数供调用。定义函数用关可以声明自己的函数供调用。定义函数用关键字键字 function 进行声明：进行声明：function 函数名函数名(参数集参数集) . return ; 注意：注意：不需要对返回类型进行说明不需要对返回类型进行说明，如果有，如果有返回值，在函数体内直接用返回值，在函数体内直接用return语句返回

54、。语句返回。在执行一个函数的时，碰到在执行一个函数的时，碰到 return 语句，函语句，函数立刻停止执行，并返回到调用它的程序中。数立刻停止执行，并返回到调用它的程序中。 函数的参数函数的参数参数集可有可无，同样也不在乎参数的类型。参数集可有可无，同样也不在乎参数的类型。 例如：例如： function addAll ( a, b, c ) return a + b + c;调用：调用：var total = addAll(3, 4, 5) ;调用语句和函数声明并不需要同在一个调用语句和函数声明并不需要同在一个 范围之内，只要在同一页面范围之内，只要在同一页面（或引入的（或引入的 js 文件

55、中），都可调用。文件中），都可调用。 3.2 文档对象文档对象 DOM文档对象模型文档对象模型 DOM (Document Object Model) 是是Web编程中一个比较重要的概念。编程中一个比较重要的概念。深刻理解深刻理解DOM需要对需要对XML有所了解，请仔有所了解，请仔细想一下细想一下 HTML文档的结构，其实就是一系文档的结构，其实就是一系列标记的嵌套，它们构成树形结构。列标记的嵌套，它们构成树形结构。简单地可以将简单地可以将 DOM 理解为用理解为用 xml 结构的文结构的文档来描述一个页面对象的结构。档来描述一个页面对象的结构。我们用我们用JavaScript（其实任何一种页

56、面编程语（其实任何一种页面编程语言）对网页进行的所有操作，都是通过言）对网页进行的所有操作，都是通过DOM 进行的。进行的。 下图是下图是DOM对象树结构所包含的对象对象树结构所包含的对象 图中有些对象名是全小写的，有些是以大写图中有些对象名是全小写的，有些是以大写字母开头的。字母开头的。以大写字母开头的对象，引用该类的具体对以大写字母开头的对象，引用该类的具体对象时，不使用类名，而用该对象实例的象时，不使用类名，而用该对象实例的“名名字字”（Id 或或 Name），或用它所属的对象数），或用它所属的对象数组指定。组指定。例如：某名为例如：某名为 “applicationForm”的表单的表单

57、中，有一名为中，有一名为“textName”的文本框，引用的文本框，引用该文本框时，要用该文本框时，要用“document.applicationForm.textName”。 DOM 中比较重要的对象中比较重要的对象 navigator (浏览器对象浏览器对象)可获取当前使用的浏览器的资料。可获取当前使用的浏览器的资料。属性：属性：appName：返回浏览器名。：返回浏览器名。IE 返回返回 Microsoft Internet Explorer。appVersion：返回浏览器版本，包括了大版：返回浏览器版本，包括了大版本号、小版本号、语言、操作平台等信息。本号、小版本号、语言、操作平台等

58、信息。platform：返回浏览器的操作系统平台。：返回浏览器的操作系统平台。userAgent：返回以上全部信息。：返回以上全部信息。 screen (屏幕对象屏幕对象)获取当前用户的屏幕设置。获取当前用户的屏幕设置。属性：属性：width： 返回屏幕的宽度（像素数）。返回屏幕的宽度（像素数）。height： 返回屏幕的高度。返回屏幕的高度。availWidth： 返回屏幕的可用宽度（除返回屏幕的可用宽度（除去了一些不自动隐藏的类似任务栏的东去了一些不自动隐藏的类似任务栏的东西所占用的宽度）。西所占用的宽度）。availHeight 返回屏幕的可用高度。返回屏幕的可用高度。 window (

59、窗口对象窗口对象)“最大最大”的对象，它描述的是一个浏览器窗口。的对象，它描述的是一个浏览器窗口。是我们关注的是我们关注的页面内容的根页面内容的根。由于是根，一般引用它的属性、方法或下级由于是根，一般引用它的属性、方法或下级时，不需要用时，不需要用“window.xxx”这种形式，而这种形式，而直接使用直接使用“xxx”。一个框架页面也是一个窗口。一个框架页面也是一个窗口。window 对象的属性对象的属性status： 指窗口下方的指窗口下方的“状态栏状态栏”所显示的内所显示的内容。通过对容。通过对 status 赋值，可以改变状态栏的显赋值，可以改变状态栏的显示。示。opener：返回打开

60、本窗口的：返回打开本窗口的窗口对象窗口对象。如果窗口不是由其他窗口打开的，在如果窗口不是由其他窗口打开的，在 IE 中返中返回回“未定义未定义”（undefined）。）。self： 指窗口本身，最常用的是指窗口本身，最常用的是“self.close()”，放在，放在标记中：标记中：“关闭窗口关闭窗口”。parent： 返回窗口所属的框架页对象。返回窗口所属的框架页对象。 window 对象的方法对象的方法open() ：打开一个窗口。：打开一个窗口。用法：用法：open(, , );其中：其中：描述窗口中显示哪一个网页。如描述窗口中显示哪一个网页。如果留空（果留空（），则不打开任意网页。），

61、则不打开任意网页。：被打开的窗口的名称：被打开的窗口的名称（window.name），可以使用），可以使用_top、_blank等内建名称。这里的名称跟等内建名称。这里的名称跟“”里的里的“target”属性是一样的。属性是一样的。：描述被打开的窗口的外观。如果只需：描述被打开的窗口的外观。如果只需要打开一个普通窗口，该字符串留空（要打开一个普通窗口，该字符串留空（），如），如果要指定外观，就在字符串里写上一到多个参果要指定外观，就在字符串里写上一到多个参数，参数之间用逗号隔开。数，参数之间用逗号隔开。 例：打开一个例：打开一个 400 x 100 的空白的窗口的空白的窗口 open( , _

62、blank, width=400, height=100, menubar=no, toolbar=no, location=no, directories=no, status=no, scrollbars=yes, resizable=yes) ;open() 方法有返回值，返回的就是它打开的方法有返回值，返回的就是它打开的窗口对象。如：窗口对象。如：var newWindow = open(,_blank);这样把一个新窗口赋值到这样把一个新窗口赋值到“newWindow”变量变量中，以后通过中，以后通过“newWindow”变量就可以控制变量就可以控制这个窗口了。这个窗口了。 wind

63、ow 对象的方法对象的方法resizeTo()：.resizeTo(width, height)；窗口调整大小到宽窗口调整大小到宽 width 像素，高像素，高 height 像素。像素。resizeBy()：.resizeBy (deltaWidth, deltaHeight)；调整窗口大小，宽调整窗口大小，宽增大增大 deltaWidth 像素，高像素，高增增大大 deltaHeight 像素。如果取负值，则减少。像素。如果取负值，则减少。 alert() ：alert()；弹出一个只包含；弹出一个只包含“确定确定”按钮的对话框，显示按钮的对话框，显示的内容。的内容。对话框关闭前，整个文档

64、的读取、对话框关闭前，整个文档的读取、Script 的的运行都会暂停，直到用户按下运行都会暂停，直到用户按下“确定确定”。confirm()：confirm()；弹出一个包；弹出一个包含含“确定确定”和和“取消取消”按钮的对话框，显示按钮的对话框，显示的内容，要求用户做出选择。的内容，要求用户做出选择。整个文档的读取、整个文档的读取、Script 的运行都会暂停。的运行都会暂停。如果用户按下如果用户按下“确定确定”，则返回，则返回 true 值，如值，如果按下果按下“取消取消”，则返回，则返回 false 值。值。 prompt()：prompt(, )；弹出一个包含弹出一个包含“确认确认”“

65、取消取消”和一个文本和一个文本框的对话框，显示框的对话框，显示的内容，要求用的内容，要求用户在文本框输入一些数据。户在文本框输入一些数据。整个文档的读取、整个文档的读取、Script 的运行都会暂停。的运行都会暂停。如果用户按下如果用户按下“确认确认”，则返回文本框里已，则返回文本框里已有的内容，如果用户按下有的内容，如果用户按下“取消取消”，则返回，则返回 null 值。如果指定值。如果指定，则文本框里会，则文本框里会有默认值。有默认值。 history （历史对象）（历史对象）指浏览器的浏览历史。指浏览器的浏览历史。限制在用浏览器的限制在用浏览器的“前进前进”“后退后退”键可以键可以到达的

66、范围。到达的范围。方法：方法：back()： 后退，跟按下后退，跟按下“后退后退”键是等效的。键是等效的。forward() ：前进，跟按下：前进，跟按下“前进前进”键是等效键是等效的。的。 document （文档对象）（文档对象）重要！重要！描述当前窗口或指定窗口对象的文档。描述当前窗口或指定窗口对象的文档。它包含了文档从它包含了文档从到到的内容，的内容，所以我们页面中的元素都在该对象之下。所以我们页面中的元素都在该对象之下。虽然该对象很重要，但我们实际不常直接使虽然该对象很重要，但我们实际不常直接使用该对象的属性或方法，我们对其下属的对用该对象的属性或方法，我们对其下属的对象更感兴趣。象

67、更感兴趣。所以不过多介绍该对象的属性和方法，只介所以不过多介绍该对象的属性和方法，只介绍几个操作绍几个操作 document 对象的重要方法。对象的重要方法。 document 对象的方法对象的方法write(); writeln() 方法：向文档对象中写入方法：向文档对象中写入数据，所写入的内容会当成标准文档数据，所写入的内容会当成标准文档 HTML 来处理。来处理。clear()：清空当前文档。：清空当前文档。close() ：关闭文档，停止写入数据。：关闭文档，停止写入数据。如果用了如果用了 writeln() 或或 clear() 方法，就一定方法，就一定要用要用 close() 方法

68、来保证所做的更改能够显示方法来保证所做的更改能够显示出来。出来。如果文档还没有完全读取，也就是说，如果文档还没有完全读取，也就是说，JavaScript 是插在文档中的，则不必使用该是插在文档中的，则不必使用该方法。方法。 一个弹出式窗口的例子一个弹出式窗口的例子 将下列代码写为一个函数并调用：将下列代码写为一个函数并调用：var whatsNew = open(,_blank,top=50,left=50,width=200,height=300, menubar=no, toolbar=no, directories=no, location=no, status=no, resizabl

69、e=no, scrollbars=yes);whatsNew.document.write( 更新通知更新通知 );whatsNew.document.write(最后更新日期：最后更新日期：2012.12.01);whatsNew.document.write(2012.12.01：学院网站新增了：学院网站新增了获本学年奖学金学生名单，请及时查看。获本学年奖学金学生名单，请及时查看。);whatsNew.document.write( 关闭窗口关闭窗口 );whatsNew.document.close(); forms; Form （表单对象（表单对象 ） document.forms 是

70、一个数组，包含了文是一个数组，包含了文档中所有的表单（档中所有的表单（）。）。要引用单个表单，可以用要引用单个表单，可以用 document.formsx。但是一般我们都会这样做：在但是一般我们都会这样做：在标记标记中加上中加上 name=“.” 属性，那么直接用属性，那么直接用“document.” 进行引用。进行引用。Form 对象的属性对象的属性name： 返回表单的名称，也就是返回表单的名称，也就是属性。属性。action： 返回返回/设定表单的提交地址，也就设定表单的提交地址，也就是是属性。属性。method： 返回返回/设定表单的提交方法，也就设定表单的提交方法，也就是是属性。属性

71、。target： 返回返回/设定表单提交后返回的窗口，设定表单提交后返回的窗口，也就是也就是属性。属性。encoding： 返回返回/设定表单提交内容的编码设定表单提交内容的编码方式，也就是方式，也就是属性。属性。 Form 的方法与事件的方法与事件方法方法：reset() ：重置表单。这与按下：重置表单。这与按下“重置重置”按钮按钮是一样的。是一样的。submit() ：提交表单。这与按下：提交表单。这与按下“提交提交”按按钮是一样的。钮是一样的。事件事件：onclick、onsubmit、onmouseover、onmouseout、onmousedown、onmouseup等等 表单下的

72、控件对象表单下的控件对象 以下介绍的都是表单中的元素对象。以下介绍的都是表单中的元素对象。像它们公有的一些属性如像它们公有的一些属性如name属性，这里属性，这里统一介绍，就不在每个对象中重复介绍了。统一介绍，就不在每个对象中重复介绍了。属性：属性：name ：返回：返回/设定用设定用指定的指定的元素名称。元素名称。value ：返回：返回/设定用设定用指定的指定的元素的值。元素的值。form ：返回包含本元素的表单对象。：返回包含本元素的表单对象。 Checkbox复选框对象，由复选框对象，由“”指定。指定。属性：属性：checked ：返回：返回/设定该复选框对象是否被选设定该复选框对象是

73、否被选中。为布尔值。中。为布尔值。defaultChecked ：返回：返回/设定该复选框对象默设定该复选框对象默认是否被选中。为布尔值。认是否被选中。为布尔值。事件：事件：onclick Hidden隐藏对象，由隐藏对象，由“”指定。指定。属性：属性：Value：返回：返回/设定用设定用指定的元素的值。指定的元素的值。 输入型对象输入型对象Password 、Text 和和 Textarea 这三个对象的所这三个对象的所有属性、方法和事件都一样，主要的为：有属性、方法和事件都一样，主要的为：属性：属性：Value：返回：返回/设定输入区当前的值。设定输入区当前的值。defaultValue：

74、返回用：返回用指定指定的默认值。的默认值。方法：方法：select() ：选中输入区里全部文本。：选中输入区里全部文本。事件：事件：onchange：当文字内容发生改变时。：当文字内容发生改变时。 Radio单选域对象：由单选域对象：由“”指定。指定。一组一组 Radio 对象有共同的名称（对象有共同的名称（name 属性），这属性），这样的话，样的话，document.formName.radioName 就成了一就成了一个数组。要访问单个个数组。要访问单个 Radio 对象就要用：对象就要用：document.formName.radioNamen。属性：属性：checked ：返回：返回

75、/设定该单选域对象是否被选中。布设定该单选域对象是否被选中。布尔值。尔值。defaultChecked ：返回：返回/设定该对象默认是否被选中。设定该对象默认是否被选中。布尔值。布尔值。事件：事件：onclick select选择区（下拉菜单、列表）对象：由选择区（下拉菜单、列表）对象：由“”指定。指定。属性：属性：selectedIndex ：返回被选中的选项的下标。这个下：返回被选中的选项的下标。这个下标就是在标就是在 options 数组中该选项的位置。数组中该选项的位置。如果如果 Select 对象允许多项选择，则返回第一个被选对象允许多项选择，则返回第一个被选中的选项的下标。中的选项

76、的下标。事件：事件：onchangeoptions 数组的属性：数组的属性：length; selectedIndex 与所属与所属 select 对象的同名属性对象的同名属性相同。相同。 单个单个 Option 对象的属性对象的属性text ：返回：返回/指定指定 Option 对象所显示的文对象所显示的文本本value ：返回：返回/指定指定 Option 对象的值，与对象的值，与一致。一致。selected ：返回：返回/指定该对象是否被选中。指定该对象是否被选中。通过指定通过指定 true 或者或者 false，可以动态的改，可以动态的改变选中项。变选中项。defaultSelecte

77、d ：返回该对象默认是否被：返回该对象默认是否被选中。选中。true / false。 按钮对象按钮对象因为因为 Submit 与与 Button、reset 对象都是按钮，对象都是按钮，所以它们有相同的属性和方法。所以它们有相同的属性和方法。但是对按钮我们一般只关心点击它们时的操但是对按钮我们一般只关心点击它们时的操作，即作，即“onclick”事件。事件。可以用可以用 onclick=“js函数名函数名()” 的方式调用处的方式调用处理代码。理代码。而对于而对于 submit 提交按钮，一般用提交按钮，一般用 Form 对对象的象的 onsubmit 代替。代替。 使用外部使用外部 jav

78、ascript 文件文件 对于一些可重用的对于一些可重用的 js 函数，在每个页面都写函数，在每个页面都写一次显然不合适。一次显然不合适。我们可以将函数统一写入专门的以我们可以将函数统一写入专门的以 js 为扩展为扩展名名的一个文件，如果某一页面要调用该文件的一个文件，如果某一页面要调用该文件中的函数，只要在页面中导入该文件即可。中的函数，只要在页面中导入该文件即可。导入导入 js 文件的方法文件的方法在页面的在页面的标记中，指定标记中，指定标记的标记的 src属性属性为该文件的路径及名称。为该文件的路径及名称。例如，我们导入一个名为例如，我们导入一个名为 demo.js的文件：的文件：调用函

79、数处按正常方式调用即可。调用函数处按正常方式调用即可。今后应该养成好的习惯，见到值得收藏的今后应该养成好的习惯，见到值得收藏的 js 函数，分类放到相应的函数，分类放到相应的js文件中，以后需要的文件中，以后需要的时候可以直接用。时候可以直接用。例题：改进后的例题：改进后的 frameDemo1 练习练习为前面做的登录页面，加上为前面做的登录页面，加上 js 处理代码，在处理代码，在表单提交前，先检查用户的输入是否符合要表单提交前，先检查用户的输入是否符合要求。求。如果不符合，弹出提示（如果不符合，弹出提示（alert）信息。）信息。如果输入正确，弹出登录成功提示。如果输入正确，弹出登录成功提示。如有时间，练习一下如何获得单项、多选、如有时间，练习一下如何获得单项、多选、下拉列表等选择类控件当前选择的情况。下拉列表等选择类控件当前选择的情况。