Web项目开发实践教程

?1.         本书的特色是叙述全面且实践性较强，从静态Web页面与动态Web页面的开发入手，结合动态页面开发技术JSP的相关知识点进行讲解，结合开发环境的配置、程序创建和发布、源代码的实现等步骤将Web项目程序的开发展现给读者，具有很强的理论意义和实践价值。每章*后提供小型案例实训，即学即用，既巩固所学内容，又锻炼实际操作能力。

 

本书以电子商务平台开发为基础，采用任务分解、案例导向的思路，按照课程内容由简单到复杂，实施难度由易到难的方式编排。每个实践案例分为案例需求说明、技能训练要点以及案例实现三个部分。
本书适合培养应用型人才高校的计算机类、信息类及电子商务类等专业使用，也可作为非计算机专业学生和工程技术人员进行Web编程时的教材及参考书籍。

 目录

 第1章概述1

1.1Web简介1

1.2Web项目开发课程地位1

1.3Web应用程序开发1

1.3.1Web的概念及发展1

1.3.2Web应用程序的运行原理2

1.3.3Web应用程序开发模式3

1.4静态网页和动态网页5

1.4.1静态与动态网页对比5

1.4.2动态网页语言6

本章小结8

本章习题8

第2章HTML静态网页制作基础10

2.1HTML语言概述10

2.1.1HTML简介10

2.1.2HTML的基本结构10

2.2常用HTML排版标记13

2.3HTML图片17

2.4超链接20

2.5HTML列表21

2.6HTML表格23

2.7表单的使用27

2.8使用frame框架分割浏览器窗口31

2.9应用音乐与视频标记33

2.10滚动标记35

2.11案例实践37

2.11.1案例需求说明37

2.11.2技能训练要点37

2.11.3案例实现37

本章小结41

本章习题41

第3章Dreamweaver基本网页编辑47

3.1Dreamweaver简介47

3.2软件界面介绍47

3.2.1文档窗口47

3.2.2状态栏48

3.2.3插入工具栏49

3.2.4文档工具栏49

3.2.5属性面板50

3.2.6结果面板50

3.2.7文件面板51

3.2.8面板组51

3.2.9菜单52

3.3Dreamweaver的基本操作54

3.3.1在网页中操作文本54

3.3.2在网页中添加特殊字符58

3.3.3在网页中添加图片59

3.3.4插入图像占位符62

3.3.5插入鼠标经过图像63

3.4创建列表64

3.4.1创建项目列表64

3.4.2创建编号列表65

3.4.3列表属性设置65

3.5在网页中使用多媒体对象66

3.5.1多媒体对象的格式66

3.5.2使用声音与视频67

3.5.3插入Flash67

3.5.4在网页中添加其他插件71

3.6插入其他对象72

3.6.1插入日期72

3.6.2插入水平线73

3.7案例实践73

3.7.1案例需求说明73

3.7.2技能训练要点74

3.7.3案例实现74

本章小结78

本章习题79

第4章CSS应用81

4.1CSS(Cascading Style Sheet)概念81

4.2CSS属性设置81

4.2.1CSS常用文本属性设置81

4.2.2CSS常用字体属性设置83

4.2.3CSS常用颜色、背景等属性设置84

4.3CSS用法85

4.3.1CSS选择器85

4.3.2CSS样式应用86

4.4DIV CSS使用方法90

4.5在Dreamweaver中创建CSS92

4.6案例实践99

4.6.1案例需求说明99

4.6.2技能训练要点100

4.6.3案例实现101

本章小结104

本章习题104

第5章JavaScript106

5.1JavaScript概述106

5.1.1JavaScript的起源106

5.1.2JavaScript的主要特点106

5.1.3JavaScript的应用107

5.2JavaScript引入方式108

5.2.1在HTML页面中嵌入JavaScript脚本108

5.2.2在HTML页面中链接外部的JavaScript文件109

5.3JavaScript语法109

5.3.1JavaScript的基本语法规则109

5.3.2变量的声明与赋值110

5.3.3函数111

5.3.4JavaScript中的对象113

5.4编写JavaScript程序118

5.5JavaScript DIV CSS结合121

5.6案例实践123

5.6.1案例需求说明123

5.6.2技能训练要点123

5.6.3案例实现123

本章小结124

本章习题125

第6章动态Web开发129

6.1Web开发概述129

6.1.1静态Web页面129

6.1.2动态Web页面130

6.2JSP简介131

6.3JSP开发环境安装与配置131

6.3.1JDK的下载、安装及环境变量配置131

6.3.2Tomcat安装135

6.4JSP页面开发与运行139

6.4.1JSP页面的基本结构139

6.4.2JSP页面的运行过程140

6.4.3JSP的运行原理147

6.5JSP的基本语法147

6.5.1JSP脚本元素148

6.5.2JSP指令148

6.5.3JSP动作组件153

6.6JSP内置对象158

6.6.1request对象158

6.6.2response对象162

6.6.3Session对象164

6.6.4application对象173

6.7JSP中的文件操作176

6.8JSP中汉字乱码处理179

6.9案例实践182

6.9.1案例需求说明182

6.9.2技能训练要点182

6.9.3案例实现182

本章小结184

本章习题184

第7章JDBC数据库连接191

7.1MySQL的安装与配置191

7.2SQLyog安装与配置195

7.3JDBC简介197

7.3.1JDBC的概念197

7.3.2JDBC驱动类型198

7.3.3JDBC工作原理198

7.4JDBC访问数据库步骤199

7.4.1创建与数据库连接199

7.4.2通过JDBC执行SQL语句201

7.4.3ResultSet对象202

7.5数据库编程应用204

7.5.1JDBC操作数据库204

7.5.2解决数据库乱码问题206

7.5.3PreparedStatement的应用208

7.5.4JDBC的其他应用211

7.6数据库连接池216

7.6.1数据库连接池概述216

7.6.2数据库连接池的基本原理216

7.6.3在服务器中配置连接池217

7.7案例实践219

7.7.1案例需求说明219

7.7.2技能训练要点220

7.7.3案例实现220

本章小结223

本章习题223

第8章服务器功能扩展技术——JavaBean与Servlet230

8.1JavaBean概述230

8.2与JvavBean相关的JSP动作组件230

8.3JavaBean与JSP的结合应用232

8.4Servlet概述243

8.5Servlet的生命周期244

8.6Servlet体系的常用类和接口245

8.7Servlet会话250

8.8案例实践257

8.8.1案例需求说明257

8.8.2技能训练要点258

8.8.3案例实现258

本章小结266

本章习题266

第9章Web项目开发实例272

9.1JSP开发模式272

9.1.1JSP JavaBean模式272

9.1.2Servlet JSP JavaBean模式272

9.2“吃遍天下”美食团购网站的设计与实现273

9.2.1系统分析与设计273

9.2.2数据库设计275

9.2.3系统实现277

本章小结339

本章习题339

附录ACSS样式表属性340

附录BJavaScript常用内建对象和预定义函数346

附录CJavaScript事件358

参考文献361

《21世纪计算机科学与技术实践型教程》
编辑委员会

主任： 陈明
委员：毛国君白中英叶新铭刘淑芬刘书家汤庸何炎祥陈永义罗四维段友祥高维东郭禾姚琳崔武子曹元大谢树煜焦金生韩江洪
策划编辑： 谢琛《21世纪计算机科学与技术实践型教程》
序
21世纪影响世界的三大关键技术是： 以计算机和网络为代表的信息技术；以基因工程为代表的生命科学和生物技术；以纳米技术为代表的新型材料技术。信息技术居三大关键技术之首。国民经济的发展采取信息化带动现代化的方针，要求在所有领域中迅速推广信息技术，导致需要大量的计算机科学与技术领域的优秀人才。计算机科学与技术的广泛应用是计算机学科发展的原动力，计算机科学是一门应用科学。因此，计算机学科的优秀人才不仅应具有坚实的科学理论基础，而且更重要的是能将理论与实践相结合，并具有解决实际问题的能力。培养计算机科学与技术的优秀人才是社会的需要、国民经济发展的需要。制定科学的教学计划对于培养计算机科学与技术人才十分重要，而教材的选择是实施教学计划的一个重要组成部分，《21世纪计算机科学与技术实践型教程》主要考虑了下述两方面。一方面，高等学校的计算机科学与技术专业的学生，在学习了基本的必修课和部分选修课程之后，立刻进行计算机应用系统的软件和硬件开发与应用尚存在一些困难，而《21世纪计算机科学与技术实践型教程》就是为了填补这部分鸿沟。将理论与实际联系起来，结合起来，使学生不仅学会了计算机科学理论，而且也学会应用这些理论解决实际问题。另一方面，计算机科学与技术专业的课程内容需要经过实践练习，才能深刻理解和掌握。因此，本套教材增强了实践性、应用性和可理解性，并在体例上做了改进——使用案例说明。实践型教学占有重要的位置，不仅体现了理论和实践紧密结合的学科特征，而且对于提高学生的综合素质，培养学生的创新精神与实践能力有特殊的作用。因此，研究和撰写实践型教材是必须的，也是十分重要的任务。优秀的教材是保证高水平教学的重要因素，选择水平高、内容新、实践性强的教材可以促进课堂教学质量的快速提升。在教学中，应用实践型教材可以增强学生的认知能力、创新能力、实践能力以及团队协作和交流表达能力。实践型教材应由教学经验丰富、实际应用经验丰富的教师撰写。此系列教材的作者不但从事多年的计算机教学，而且参加并完成了多项计算机类的科研项目，把他们积累的经验、知识、智慧、素质融合于教材中，奉献给计算机科学与技术的教学。我们在组织本系列教材过程中，虽然经过了详细地思考和讨论，但毕竟是初步的尝试，不完善甚至缺陷不可避免，敬请读者指正。
本系列教材主编陈明2005年1月于北京

前言

随着网络应用的普及与发展，Web应用程序的使用越来越广泛，Web开发技术以其开放性、灵活性、安全性和成熟度赢得了很大的市场，成为Web项目开发的重要技术手段之一。本书是在应用型人才培养的大背景下编写的，全书采用项目案例训练的设计方式，符合人才培养的行动导向，按照静态Web开发到动态Web开发的逻辑编排课程内容，案例设计时以实践应用能力为主线，强调理论知识学习与实践应用能力培养并存的人才培养思想，将Web程序开发的知识点融入案例实践中进行解析与重组，构建Web项目开发学习体系。本书以电子商务平台开发为基础，采用任务分解、案例导向的思路，按照课程内容由简单到复杂，实施难度由易到难的方式编排。每个实践案例分为案例需求说明、技能训练要点以及案例实现三个部分，使学生可以边学边练，达到所学即所得的效果。本书的特色是注重案例实践，体现应用型高校的“理论扎实、拔高实践”的人才培养原则，理论结合实际，有利于读者对相应编程思想和实践案例的理解与掌握。本书还具有以下特色: (1) 内容广泛、案例丰富，其中的例题、习题及实践案例都来源于一线教学。(2) 按照读者在学习程序设计中遇到的问题组织内容，随着读者对Web开发的理解的提高和实际动手能力的增强，课程内容由浅入深地平滑向前推进。(3) 每章都给出了相应的任务实践，配以解析和任务实现。这些内容不仅能够与理论知识点无缝对接，而且短小精炼，方便读者自行尝试。(4) 案例以电子商务平台开发为基础，每章的例题都使用相对独立的例子，并辅以实例输出。(5) 课后的练习题包括选择题、填空题、简答题和编程题，部分内容在前后章节中具有一定的延续性。(6) 本书的配套资料包含课件、实例源代码、练习题及编程练习答案。书中的源代码可以自由修改、编译，以符合使用者的需要。通过本书的学习，读者可以了解Web项目开发所需要的基本技术，对完整的Web项目的开发有一个具体的了解，减少对Web项目开发的盲目感，能够根据本书的体系循序渐进地动手做出自己的实训项目。本书特别适合培养应用型人才高校的计算机类、信息类及电子商务类等专业使用，可以作为Web技术导论、Web程序设计、互联网与Web编程、电子商务平台开发技术等课程的教材，也可以作为非计算机专业学生和工程技术人员进行Web编程时的教材及参考书籍。本书由朱林、庄丽担任主编，杨平乐、徐新、潘操、高洁担任副主编。具体分工如下表所示，全书由朱林进行整理与统稿。编者工 作 单 位编 写 内 容朱林东南大学成贤学院第6、7、8章庄丽东南大学成贤学院第9章和附录部分杨平乐江苏科技大学苏州理工学院第1、2章徐新南京工业大学浦江学院第3章潘操常州大学第4章高洁中国兵器工业第二〇八研究所第5章本书在编写过程中得到了清华大学出版社以及同行专家、学者们的大力支持和帮助，在此表示衷心的感谢。此外，本书的编写参考了部分书籍和报刊，并从互联网上参考了部分有价值的材料，在此向有关的作者、编者、译者和网站表示衷心的感谢。本书配有电子教案，并提供程序源代码，以方便读者自学，读者可发送电子邮件至[email protected]索取。由于编者水平有限，书中难免有不妥之处，敬请读者和专家批评、指正。
朱林2016年10月

评论

第5章JavaScript

5.1JavaScript概述JavaScript是一种用于Web程序开发的编程语言,它功能强大,主要用于开发交互式Web页面。JavaScript不需要进行编译,可以直接嵌入HTML页面中,把静态页面转变成支持用户交互并响应事件的动态页面。在浏览网页时,除了能看到静态的文本、图像,有时也能看到浮动的动画、信息框以及动态变换的时钟信息等。页面上这些实时的、动态的、可交互的网页效果在Web应用开发时可以使用JavaScript语言编写实现。下面针对JavaScript的起源、主要特点以及应用进行详细讲解。5.1.1JavaScript的起源JavaScript是Web页面中的一种脚本编程语言,也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。JavaScript的前身是LiveScript,是由Netscape(网景)公司开发的脚本语言。后来在Sun公司推出著名的Java语言之后,Netscape公司和Sun公司于1995年一起重新设计了LiveScript,并把它改名为JavaScript。在概念和设计方面,Java和JavaScript是两种完全不同的语言。Java是面向对象的程序设计语言,用于开发企业级应用程序,而JavaScript是在浏览器中执行,用于开发客户端浏览器的应用程序,能够实现用户与浏览器的动态交互。5.1.2JavaScript的主要特点JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的解释性脚本语言,它具有以下主要特点:  解释性。JavaScript不同于一些编译性程序语言(如C、C 等),它是一种解释性程序语言,它的源代码不需要进行编译,而是直接在浏览器中解释执行。 基于对象。JavaScript是一种基于对象的语言,它的许多功能来自于脚本环境中对象的方法与脚本的相互作用。在JavaScript中,既可以使用预定义对象,也可以使用自定义对象。 事件驱动。JavaScript可以直接对用户或客户的输入做出响应,无须经过Web服务程序,而是以事件驱动的方式进行的。例如单击鼠标、移动窗口、选择菜单等事件发生后,可以引起事件的响应。 跨平台性。在HTML页面中,JavaScript依赖于浏览器本身,与操作环境无关。只要在计算机上安装了支持JavaScript的浏览器,程序就可以正确执行。 安全性。JavaScript是一种安全性语言,它不允许访问本地硬盘,也不能对网络文档进行修改和删除,而只能通过浏览器实现信息浏览或动态交互。5.1.3JavaScript的应用作为一门独立的编程语言,JavaScript可以做很多事情,但它主流的应用还是在Web上,例如创建网页特效。使用JavaScript脚本语言实现的动态页面在网页上随处可见。下面介绍JavaScript的常见应用。1. 验证用户输入的内容使用JavaScript脚本语言可以在客户端对用户输入的内容进行验证。例如,在用户注册页面,要求用户输入注册信息,使用JavaScript可以判断用户输入的手机号、昵称及密码是否正确,如图51所示。如果用户在注册信息文本框中输入的信息不符合注册要求,或“确认密码”与“密码”文本框中输入的信息不同,将弹出相应的提示信息,如图52所示。图51用户注册页面图52弹出提示信息

2. 网页动画效果在浏览网页时,经常会看到一些动画效果,使页面显得更加活泼、生动。使用JavaScript脚本语言也可以实现动画效果,例如可以在页面中实现焦点图切换效果。3. 窗口的应用在打开网页时,经常会看到一些浮动的广告窗口,这些广告窗口是网站的盈利手段。广告窗口也可以通过JavaScript脚本语言实现。4. 文字特效使用JavaScript脚本语言可以使文字出现多种特效,例如文字跳动等。5.2JavaScript引入方式在HTML文档中,JavaScript脚本文件的使用和CSS样式文件类似。在HTML文档中引入JavaScript文件有两种方式: 一种是在HTML文档中直接嵌入JavaScript脚本,另一种是链接外部的JavaScript脚本文件。5.2.1在HTML页面中嵌入JavaScript脚本在HTML文档中,通过标记及其相关属性可以引入JavaScript代码。标记的常用属性如表51所示。表51标记的常用属性及说明属性说明language设置所使用的脚本语言及版本src设置外部脚本文件的路径位置type设置所使用的脚本语言,此属性已代替language属性defer当HTML文档加载完毕后再执行脚本语言1. language属性language属性用于指定在HTML中使用的脚本语言及其版本。language属性的使用格式如下: 2. src属性src属性用于指定外部脚本文件的路径。外部脚本文件通常使用JavaScript脚本,其扩展名为.js。src属性的使用格式如下: 3. type属性type属性用于指定HTML中使用的脚本语言及其版本。该属性从HTML 4.0标准开始,推荐使用type属性代替language属性。type属性的使用格式如下: 4. defer属性defer属性的作用是当文档加载完毕后再执行脚本。当脚本语言不需要立即运行时,设置defer属性,浏览器将不必等待脚本语言装载,这样页面加载速度会更快。但当一些脚本需要在页面加载过程中或加载完成后立即执行时,就不需要使用defer属性。defer属性的使用格式如下: 在HTML文档中,可以通过标记嵌入JavaScript代码,具体代码如下: javascript代码当HTML文件嵌入JavaScript程序代码后,浏览器程序在读到标记时,就解释执行其中的脚本。其中,标记可以放在Web页面的…标记中,也可以放在…标记中。例如,在…标记中可以输入以下代码: alert(“我要去学习JavaScript!”)//弹出警告框需要注意的是,JavaScript脚本可以放在标记中的任何位置。如果所编写的JavaScript程序用于输出网页的内容,应该将JavaScript程序置于HTML文件中需要显示该内容的位置。5.2.2在HTML页面中链接外部的JavaScript文件在Web页面引入JavaScript的另一种方法是采用链接外部JavaScript文件的形式。如果脚本代码比较复杂或是同一段代码需要被多个页面使用,则可以将这些脚本代码放置在一个单独的文件中(保存文件的扩展名是.js),然后在需要使用该代码的Web页面中链接该JavaScript文件即可。在Web页面中链接外部JavaScript文件的语法格式如下: 需要注意的是,调用外部文件myjs.js时,首先需要编写外部的JavaScript文件,并命名为myjs.js。然后,在HTML页面中调用外部的JavaScript文件myjs.js。5.3JavaScript语法[4/5]5.3.1JavaScript的基本语法规则每一种计算机语言都有自己的基本语法,学好基本语法是学好编程语言的关键。同样,学习JavaScript语言,也需要遵从一定的语法规范,如执行顺序、大小写问题以及注释语句等。1. 执行顺序JavaScript程序按照在HTML文件中出现的顺序逐行执行。如果某些代码(例如函数、全局变量等)需要在整个HTML文件中使用,好将其放在HTML文件的…标记中。某些代码,如函数体内的代码,不会被立即执行,只有当所在的函数被其他程序调用时,该代码才会被执行。2. 区分大小写JavaScript严格区分字母大小写。也就是说,在输入关键字、函数名、变量及其他标识符时,都必须采用正确的大小写形式。例如,变量username与变量userName是两个不同的变量。3. 每行结尾的分号可有可无JavaScript语言并不要求必须以分号(;)作为语句的结束标记。如果语句的结束处没有分号,JavaScript会自动将该行代码的结尾作为语句的结尾。例如,下面两行代码都是正确的。alert(“您好,欢迎学习JavaScript!”)alert(“您好,欢迎学习JavaScript!”);应该注意的是,好的代码编写习惯是在每行代码的结尾处加上分号,这样可以保证代码的严谨性和准确性。4. 注释在编写程序时,为了使代码易于阅读,通常需要为代码加一些注释。注释是对程序中某个功能或者某行代码的解释、说明,用来提高代码的可读性,而不会被JavaScript当成代码执行。 JavaScript为开发人员提供了两种注释形式: 单行注释和多行注释,具体如下: (1) 单行注释使用双斜线“//”作为注释标记,将“//”放在一行代码的末尾或者单独一行的开头,它后面的内容就是注释部分。(2) 多行注释可以包含任意行数的注释文本。多行注释是以“/”标记开始,以“/”标记结束,中间的所有内容都为注释文本。这种注释可以跨行书写,但不能有嵌套的注释。下面是合法的JavaScript注释: //这里的单行注释/这里是一段注释///这里是另一段注释/这里是多行注释/5.3.2变量的声明与赋值在JavaScript中,使用变量前需要先对其进行声明。所有的JavaScript变量都由关键字var声明,语法格式如下: varabc;在声明变量的同时也可以对变量进行赋值,例如: varabc=1;声明变量时,需要遵循的规则如下: (1) 可以使用一个关键字var同时声明多个变量,例如: var a,b,c//同时声明a、b和c三个变量(2) 可以在声明变量的同时对其赋值,即初始化,例如: var a=1,b=2,c=3;//同时声明a、b和c三个变量,并分别对其进行初始化(3) 如果只是声明了变量,并未对其赋值,则其默认为undefined。(4) var语句可以用作for循环和for/in循环的一部分,这样就使循环变量的声明成为循环语法自身的一部分,使用起来比较方便。(5) 使用var语句多次声明同一个变量,如果重复声明的变量已经有一个初始值,那么此时的声明就相当于对变量的重新赋值。当给一个尚未声明的变量赋值时,JavaScript会自动用该变量名创建一个全局变量。在一个函数内部,通常创建的只是一个仅在函数内部起作用的局部变量,而不是一个全局变量。创建一个局部变量,并不是简单地赋值给一个已经存在的局部变量,必须使用var语句进行变量的声明。另外,由于JavaScript采用弱类型的形式,可以不理会变量的数据类型,即可把任意类型的数据赋值给变量。例如,声明一些变量,具体代码如下: var a=100//数值类型var str=”网页平面设计学院”//字符串类型var bue=true//布尔类型值得注意的是,在JavaScript中,变量可以先不声明,而在使用时,根据变量的实际作用确定其所属的数据类型,为了良好的编程习惯和能够及时发现代码中的错误,建议在使用变量前对其声明。5.3.3函数在JavaScript中,经常会遇到程序需要多次重复操作的情况,这时就需要重复书写相同的代码,这样不仅加重了开发人员的工作量,而且对于代码的后期维护相当困难。为此,JavaScript提供了函数,它可以将程序中烦琐的代码模块化,提高程序的可读性,并且便于后期维护。1. 函数定义为了使代码更为简洁并可以重复使用,通常会将某段实现特定功能的代码定义成一个函数。在JavaScript程序设计中,所谓函数就是在计算机程序中由多条语句组成的逻辑单元,在JavaScript中,函数使用关键字function定义,其语法格式如下: function 函数名 ([参数1,参数2,…]){函数体}从上述语法格式可以看出,函数的定义由关键字function、“函数名”、“参数”和“函数体”4部分组成,关于这4部分的相关说明如下:  function——在声明函数时必须使用的关键字。 函数名——创建函数的名称,是的。  参数——外界传递给函数的值,是可选的,当有多个参数时,各参数用“,”分隔。 函数体——函数定义的主体,专门用于实现特定的功能。对函数定义的语法格式有所了解后,下面定义一个无参函数show(),并在函数体中输出“欢迎光临,网页平面设计学院”,具体示例如下: function show(){ alert(“欢迎光临,网页平面设计学院”);}上述代码定义的show()函数较简单,它没有定义参数,并且函数体中仅使用alert()语句返回一个字符串。2. 函数的调用当函数定义完成后,要想在程序中发挥函数的作用,必须调用这个函数。函数的调用非常简单,只需引用函数名,并传入相应的参数即可。函数调用的语法格式如下: 函数名称([参数1,参数2,…])在上述语法格式中,“[参数1,参数2,…]”是可选的,用于表示参数列表,其值可以是一个或多个。为了使初学者能够更好地理解函数调用,下面通过一个案例演示函数的调用。例51函数调用示例。nbsp;”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

点击这里function show(){ alert(“欢迎光临”);}