交互式Web前端开发实践pdf下载pdf下载

交互式Web前端开发实践百度网盘pdf下载

作者:
简介:本篇主要提供交互式Web前端开发实践pdf下载
出版社:清华大学出版社
出版时间:2017-06
pdf下载价格:0.00¥

免费下载


书籍下载


内容介绍

编辑推荐

  

本书以Web前端开发工程师在Web前端开发过程中的实际需要和应该掌握的技术为基础,全面、系统地介绍了Web前端开发所涉及的相关知识点和开发技巧,涵盖网页设计基础知识、高级编程知识:HTML(含HTML 5)、CSS(含CSS3)、JavaScript基础及jQuery框架。每章都配置了大量的实用案例,图文并茂,效果直观。
  

内容简介

  

  本书以Web前端开发过程中的实际需要和应该掌握的技术为基础,全面、系统地介绍了Web前端开发所涉及的相关知识点和开发技巧,涵盖HTML(含HTML 5)、CSS(含CSS 3)、JavaScript基础及jQuery框架等网页设计基础知识、高级编程知识。每章都配置了大量的实用案例,图文并茂,效果直观。

  本书分3部分,共8章。第一部分为基础篇,主要介绍Web前端开发基础知识、HTML标记语言、HTML 5新特性、CSS基础知识、盒子模型、CSS+DIV布局、JavaScript语言及网页设计方法等内容;第二部分为进阶篇,详细介绍了JavaScript的面向对象编程思想及常用的JavaScript框架,重点介绍了jQuery框架的使用,并辅以大量的案例和综合实例进行讲解,让读者能通过本阶段的学习提高前端设计和编程的能力;第三部分为实战篇,综合运用前两部分的理论知识,结合软件开发流程,详细讲解了“点餐系统”前端的功能设计、编程实现及各方面的内容和技巧。

  本书可作为从事Web前端开发、网页设计与制作、网站开发及网页编程等行业人员的参考书,也可作为应用型本科院校及培训学校计算机及相关专业的教材。


  

精彩书评

  NULL

目录

第一部分基础篇
第1章Web前端开发概述31.1Web概述3
1.1.1Web的发展4
1.1.2Web特点及架构5
1.2Web新技术的发展及应用8
1.2.1Web 3.09
1.2.2Web新技术的应用11
1.3Web前端开发12
1.3.1什么是Web前端开发技术12
1.3.2Web前端开发工程师13
1.4Web前端开发工具15
1.4.1CSS工具15
1.4.2JavaScript工具15
1.4.3图像优化工具17
1.4.4开发及调试工具18
本章小结19
第2章HTML标记语言20
2.1HTML基础20
2.1.1HTML编写规范20
2.1.2HTML基本结构21
2.1.3查看HTML文件22
2.2HTML标签22
2.2.1文字与段落22
2.2.2图片与超链接25
2.2.3列表标签28
2.2.4表格标签32
2.2.5表单标签332.2.6注释标签35
2.3XHTML基础36
2.3.1XHTML简介36
2.3.2XHTML语法36
2.3.3XHTML与HTML的区别37
2.4HTML 538
2.4.1HTML 5文档结构38
2.4.2HTML 5新增的结构标签及属性38
2.4.3HTML 5音视频40
2.4.4HTML 5表单42
2.4.5HTML 5画布49
本章小结64
第3章CSS层叠样式表65
3.1CSS 2基础65
3.1.1CSS编写规范65
3.1.2CSS选择符67
3.1.3文本样式70
3.1.4背景边框样式71
3.1.5列表样式75
3.1.6其他样式77
3.2CSS 3基础79
3.2.1CSS 3新增特性79
3.2.2CSS 3变形设置96
3.2.3CSS 3动画设置98
3.3布局基础102
3.3.1盒子模型102
3.3.2布局方式104
3.4综合实例108
3.4.1需求分析108
3.4.2实现源代码109
本章小结111
第4章JavaScript编程基础112
4.1JavaScript概述112
4.1.1JavaScript的特点112
4.1.2JavaScript的优点及缺点113
4.1.3第一个JavaScript例子113
4.2JavaScript 语法114
4.2.1JavaScript语句114
4.2.2JavaScript 注释115
4.2.3变量与常量115
4.2.4运算符116
4.2.5正则表达式117
4.3JavaScript 函数120
4.3.1函数的定义120
4.3.2函数的参数及返回值121
4.3.3函数的调用121
4.4JavaScript程序结构122
4.4.1顺序结构122
4.4.2选择结构123
4.4.3循环结构125
4.5异常处理129
4.6JavaScript事件的处理131
4.6.1JavaScript事件概述131
4.6.2窗口事件132
4.6.3表单元素事件133
4.6.4键盘事件134
4.6.5鼠标事件135
4.6.6图像事件136
4.7JavaScript DOM136
4.7.1JavaScript HTML DOM概述136
4.7.2HTML DOM对象137
4.7.3HTML DOM的简单应用143
4.8综合实例146
4.8.1需求描述146
4.8.2分析及实现146
本章小结151
第二部分进阶篇
第5章JavaScript高级编程1555.1面向过程编程和面向对象编程概述155
5.1.1面向过程编程155
5.1.2面向对象编程155
5.2JavaScript的面向对象编程157
5.2.1对象的创建与调用157
5.2.2常用的内置对象158
5.3JavaScript框架164
5.3.1Prototype164
5.3.2YUI165
5.3.3ExtJS166
5.3.4jQuery168
5.3.5Dojo171
5.3.6MooTools171
5.4综合实例171
5.4.1需求描述172
5.4.2分析及实现172
本章小结175
第6章jQuery编程176
6.1jQuery简介176
6.2jQuery的基本功能176
6.2.1引用jQuery类库176
6.2.2第一个jQuery程序177
6.2.3jQuery选择器178
6.2.4jQuery事件方法185
6.2.5jQuery动画190
6.2.6DOM操作194
6.2.7解决冲突199
6.2.8编写插件202
6.3第三方插件及使用方法209
6.3.1校验控件formValidator211
6.3.2日期控件My97DatePicker219
6.4综合实例220
6.4.1需求描述220
6.4.2分析及实现221
本章小结225
第7章客户端数据请求技术226
7.1客户端请求技术简介226
7.2Web Service简介227
7.2.1XML文件228
7.2.2Web Service原理230
7.2.3Web Service的调用234
7.3HTTP请求239
7.3.1HTTP通信机制240
7.3.2HTTP请求的调用243
7.4ajax247
7.4.1XMLHttpRequest对象247
7.4.2JSON251
7.4.3jQuery中的ajax253
本章小结261
第三部分实战篇
第8章在线订餐网站2658.1项目背景265
8.2系统需求和设计265
8.2.1功能设计265
8.2.2数据库设计265
8.2.3程序设计267
8.3功能实现276
8.3.1首页276
8.3.2菜品一览和菜品详情282
8.3.3注册和登录297
8.3.4购物车300
8.3.5订单管理305
本章小结310
参考文献311

精彩书摘

  第1章Web前端开发概述

  接正文1.1Web概述

  Web是Internet中最受欢迎的一种多媒体信息服务系统。整个系统由Web服务器、浏览器和通信协议组成。通信协议HTTP能够传输任意类型的数据对象来满足Web服务器与客户之间的多媒体通信的需要。Web带来的是世界范围的超级文本服务。用户可通过Internet从全世界任何地方调来所希望得到的文本、图像(包括活动影像)和声音等信息。另外,Web还可提供其他的Internet服务如Telnet、FTP、Gopher和NetUser等。

  在Web网站上,不仅可以传递文字信息,还可以传递图形、声音、影像、动画等多媒体信息。Web的成功在于使用了HTTP超文本传输协议,制定了一套标准的、易为人们掌握的超文本标记语言HTML,使用了信息资源的统一定位格式URL。我们可以把Web看作一个图书馆,而每一个网站就是这个图书馆中的一本书。每个网站都包括许多画面,进入该网站时显示的第一个画面就是“主页”或“首页”(相当于书的目录),而同一个网站的其他画面都是“网页”(相当于书页)。

  1.HTTP协议

  从网络协议的角度看,HTTP是对TCP/IP协议集的扩展,作为浏览器与服务器间的通信协议,处于TCP/IP层次中的应用层。

  HTTP是一种无状态协议,即服务器不保留与客户交易时的任何状态,这可以大大减轻服务器的存储负担,从而保持较快的响应速度。HTTP又是一种面向对象的协议,允许传输任意类型的数据对象。它通过数据类型和长度来标识所传送的数据内容和大小,并允许对数据进行压缩传送。浏览器软件配置于用户端计算机上,用户发出的请求通过浏览器分析后,按HTTP规范送给服务器,服务器按用户需求,将HTML(超文本标记语言)文档送回给用户。

  2.Web服务的基本过程

  Web最吸引人的地方是它的“简单性”,其工作过程也是客户机/服务器模式(C/S)。Web的工作可分为4个基本阶段:连接、请求、响应和关闭(见图11)。它们都属于HTTP的下层基础。信息资源以网页(HTML文件)形式存储在Web服务器中,当用户希望得到某种信息时,要先与Internet沟通连接(上网);然后用户通过Web客户端程序(浏览器)向Web服务器发出请求;Web服务器根据客户的请求给予响应,将在Web服务器中存放的、符合用户要求的某个网页发送给客户端,浏览器在收到该页面后对其进行解释,最终将图文等信息呈现给客户;一次Web服务操作结束后,关闭此次连接,或用户根据需要进行下一次请求。这样,用户可以通过网页中的链接,方便地访问位于其他Web服务器中的页面或其他类型的网络信息资源。

  图11HTTP的请求响应模型

  Web服务器集成了所有视觉辅助效果来表示信息,这些信息可以按多种格式存在,易于浏览和理解。例如,在讨论复杂问题时,可以使用图表、影像剪辑甚至交互式应用程序,而不仅仅是字符文本,这样便于解释论题,使人一目了然。与其他信息发布工具相比,Web服务由于所需的费用很低并且覆盖面广,因而具有很大的吸引力。另外,使用各种搜索机制和Web站点分类目录数据库注册一个Web站点,可以使客户在需要时得到所需的信息。

  1.1.1Web的发展

  最早的网络构想可以追溯到1980年蒂姆·伯纳斯·李构建的ENQUIRE项目。这是一个类似维基百科的超文本在线编辑数据库。尽管这与万维网大不相同,但是它们有许多相同的核心思想,甚至还包括一些伯纳斯·李的万维网(WorldWideWeb,WWW,也作Web、W3)之后的下一个项目语义网中的构想。

  1989年3月,伯纳斯·李撰写了《关于信息化管理的建议》一文,文中提及ENQUIRE并且描述了一个更加精巧的管理模型。1990年11月12日他和罗伯特·卡里奥(RobertCailliau)合作提出了一个更加正式的关于万维网的建议。在1990年11月13日他在一台工作站上设计了第一个网页以实现他文中的想法。

  在那年的圣诞假期,伯纳斯·李制作了让一个网络工作所必需的所有工具:第一个万维网浏览器(同时也是编辑器)和第一个网页服务器。

  1991年8月6日,他在alt.hypertext新闻组上发表了万维网项目简介的文章,这一天也标志着因特网上万维网公共服务的首次亮相。

  万维网中至关重要的超文本概念起源于20世纪60年代的几个项目。譬如泰德·尼尔森(TedNelson)的仙那都项目(projectXanadu)和道格拉斯·英格巴特(DouglasEngelbart)的NLS。而这两个项目的灵感都是来源于万尼瓦尔·布什在其1945年发表的《和我们想的一样》论文中为微缩胶片设计的“记忆延伸”(memex)系统。

  蒂姆·伯纳斯·李的另一个才华横溢的突破是将超文本嫁接到因特网上。在他的《编织网络》一书中,他解释说自己曾一再向使用者们建议这两种技术的结合是可行的,但是没有任何人响应他的建议,最后他只好自己解决了这个问题。他发明了一个全球网络资源唯一认证的系统:统一资源标识符。

  万维网和其他超文本系统有很多不同之处。

  (1)万维网上需要单项链接而不是双向链接,这使得任何人可以在资源拥有者不做任何改变时链接该资源。与早期的网络系统相比,这对于网络服务器和网络浏览器来说已经是很大的进步,但它的副作用是产生了坏链的问题。

  (2)万维网不像某些应用软件如HyperCard那样是私有的,这使得服务器和客户端能够独立地发展和扩展,而不受许可权限制。

  1993年4月30日,欧洲核子研究组织宣布万维网对任何人免费开放,并且不收取任何费用。两个月之后Gopher宣布不再免费,从而造成大量用户从Gopher转向万维网联盟。万维网联盟(WorldWideWebConsortium,W3C)又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立,建立者是万维网的发明者蒂姆·伯纳斯·李。

  1.1.2Web特点及架构1.Web的形式及特点(1)易于导航的图形化Web

  Web非常流行的一个很重要的原因就在于它可以在一页上同时显示色彩丰富的图形和文本的性能。在Web之前Internet上的信息只有文本形式。Web可以提供将图形、音频、视频信息集合于一体的特性。同时,Web是非常易于导航的,只需要从一个链接跳到另一个链接,就可以在各页各站点之间进行浏览。

  (2)与平台无关的Web

  无论用户的系统平台是什么,都可以通过Internet访问万维网。浏览万维网对用户的系统平台没有什么限制。对万维网的访问是通过一种叫作浏览器(browser)的软件实现的,如Netscape的Navigator、NCSA的Mosaic、Microsoft的InternetExplorer等。

  (3)分布式的Web

  大量的图形、音频和视频信息会占用相当大的磁盘空间,用户甚至无法预知信息的多少。对于Web没有必要把所有信息都放在一起,信息可以放在不同的站点上。只需要在浏览器中指明这个站点就可以了。这使得在物理上并不一定在一个站点的信息在逻辑上实现了一体化,至少从用户的角度来看这些信息是一体的。

  图12展示了Web之间的典型链接方式,Web站点都存在于不同的物理位置,站点上存放着各种文档,这些文档中有一些文字与其他文字的显示方式有所区别,用于链接到其他站点,称为“超链接”,用户只要在上面单击,浏览器就可以跳转到对应的站点并显示相应的内容。

  图12Web站点之间的链接

  (4)交互式的动态Web

  由于各Web站点的信息包含站点本身的信息,信息的提供者可以经常对站点中的信息进行更新,如某个协议的发展状况、公司的广告等,Web站点上的信息是需要经常更新的。

  Web的交互性首先表现在它的超链接上,用户的浏览顺序和所访问的站点完全由他自己决定。系统另外通过HTTP的Get请求从服务器中获得动态的信息,用户通过填写form表单向服务器提交(HttpPost)请求,服务器根据用户的请求返回相应信息,实现良好的人机交互,如图13所示。

  图13动态网页示意图

  2.C/S与B/S架构

  (1)C/S架构

  C/S(Client/Server)又称客户/服务器模式,是大家熟知的软件系统体系结构,这种模式通过将任务合理分配到客户端和服务器端,降低了系统的通信开销,但需要安装客户端才可进行管理操作。

  客户端和服务器端的程序不同,用户的程序主要在客户端,客户端程序主要完成用户具体的业务。客户端需要安装专用的客户端软件。服务器端主要提供数据管理、数据共享、数据及系统维护和并发控制等功能。服务器通常采用高性能的PC、工作站或小型机,并采用大型数据库系统,如Oracle、Sybase、Informix或SQLServer。

  C/S模式的优点是能充分发挥客户端PC的处理能力,很多工作可以在客户端处理后再提交给服务器,其优点就是客户端响应速度快,存在的缺点如下:

  随着互联网的飞速发展,移动办公和分布式办公越来越普及,这需要使我们设计的系统具有扩展性。这种方式的远程访问需要专门的技术,同时要对系统进行专门的设计来处理分布式的数据。

  客户端需要安装专用的客户端软件。首先涉及安装的工作量;其次任何一台计算机出问题,如病毒、硬件损坏,都需要进行安装或维护,特别是一个单位有很多分部或专卖店的情况下,不是工作量的问题,而是路程的问题。还有,系统软件升级时,每一台客户机都需要重新安装,其维护和升级成本非常高。

  客户端的操作系统一般有一定的限制。比如使用Windows98的客户端不能用Windows2000或WindowsXP,或者不适用于微软新的操作系统等,更不用说Linux、UNIX等。

  (2)B/S架构

  B/S(Browser/Server)架构是浏览器和服务器结构(见图14)。它是随着Internet技术的兴起而对C/S架构进行改进的结构。

  图14B/S系统架构

  这种架构中客户端(Browser)几乎没有专门的应用程序,应用程序基本上都在服务器端(Server)。由于客户端没有程序,应用程序的升级和维护都可以在服务器端完成,升级维护十分方便。由于客户端使用浏览器,使得用户界面“丰富多彩”,但数据的打印输出等功能受到了限制。为了克服这个缺点,一般把利用浏览器方式实现困难的功能单独开发成可以发布的控件,再在客户端利用程序进行调用。

  B/S结构是Web兴起后的一种网络结构模式,Web浏览器是客户端最主要的应用软件。这种模式统一了客户端,将系统功能实现的核心部分集中到服务器上,简化了系统的开发、维护和使用。客户机上只要安装一个浏览器(Browser),如NetscapeNavigator或InternetExplorer,服务器上安装Oracle、Sybase、Informix或SQLServer等数据库。浏览器通过WebServer同数据库进行数据交互,这样就大大简化了客户端计算机的载荷,减轻了系统维护与升级的成本和工作量,降低了用户的总体成本(TCO)。

  (3)C/S与B/S的区别

  C/S建立在局域网的基础上,B/S建立在广域网的基础上。其区别主要有如下几点。

  ①硬件环境不同:C/S一般建立在专用的网络上,形成小范围的局域网环境,局域网之间通过专门的服务器提供连接和数据交换服务。B/S建立在广域网之上,不必限定专门的网络硬件环境。例如电话上网、租用设备、信息管理,有比C/S更强的适应范围,一般只要有操作系统和浏览器就行。

  ②对安全性的要求不同:C/S一般面向相对固定的用户群,对信息安全的控制能力很强,一般高度机密的信息系统采用C/S结构较适宜,可以通过B/S发布部分公开信息。B/S建立在广域网之上,对安全的控制能力相对弱,面向不可知的用户群。

  ③程序的架构不同:C/S程序可以更加注重流程,可以对权限进行多层次校验,对系统的运行速度可以较少考虑。B/S对安全性以及访问速度要进行多重考虑,建立在需要更加优化的基础上,比C/S有更高的要求。B/S结构的程序架构是发展的趋势,从微软的.NET系列到BizTalk2000、Exchange2000等,全面支持网络构件搭建的系统。SUN和IBM推出的JavaBean构件技术等使B/S更加成熟。

  ④软件的重用性不同:C/S程序必须进行整体性的考虑,构件的重用性不如在B/S模式下构件的重用性好。B/S的多重结构,要求构件有相对独立的功能,因此具有相对较好的重用性。

  ⑤系统维护不同:系统维护在软件生存周期中的开销较大。C/S程序由于整体性强,必须整体考察,处理出现的问题以及系统升级较难,有时可能需要再做一个全新的系统。B/S程序由构件组成,方便个别构件的更换,可以实现系统的无缝升级,系统维护开销可以减到最小,用户从网上自己下载并安装相关程序就可以实现系统升级。

  ⑥处理的问题不同:C/S程序可以处理的用户相对固定并且在相同区域,安全性要求与操作系统相关性高。B/S建立在广域网上,面向不同的用户群且分散在不同地域,这是C/S无法做到的,因此与操作系统平台的关系最小。

  ⑦用户接口不同:C/S大多是建立在Windows平台上,表现方法有限。对程序员要求普遍较高。B/S建立在浏览器上,有更加丰富和生动的方式与用户交流,并且大部分难度较低,可降低开发成本。

  ……


前言/序言

  近十年来,信息技术产业发展态势良好,在我国经济发展中起着非常重要的推动作用。信息技术产业也是“十三五”期间被列为重点发展的产业,市场前景广阔,Web前端开发工程师的需求量大幅增加。一名合格的Web前端开发工程师必须掌握基本的Web前端开发技术,包括CSS、HTML、DOM、JavaScript、ajax等,在掌握这些技术的同时,更要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和潜在的Bug。一名合格的前端工程师除了掌握网站性能优化、SEO和服务器端的基础知识等知识结构之外,还必须学会运用各种工具进行辅助开发,比如处理IE系列浏览器兼容性问题的IEtester,Firefox排错用的Firebug、FlashFirebug、Debugger等调试工具。总而言之,一名合格的Web前端开发工程师不但要掌握技术层面的知识,还要掌握理论层面的知识,包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等内容。

  本书基于HTML、CSS、jQuery、ajax等技术编写,重点突出交互式的Web前端技术实现。本书囊括了编者及其团队成员多年Web前端开发与设计的经验,是一本可以使读者快速建立规范的Web前端开发意识和工程化软件开发思想的书籍,是一本可以使读者快速提高Web前端开发技能并快速达到Web前端开发工程师岗位任职能力要求的书籍。本书内容编排结构合理,知识由浅入深,以较全面的知识点、丰富的案例、完整的综合项目实践为主要内容,结合分层开发思想,循序渐进地引导读者在基础篇学习基础理论,在进阶篇学习编程技巧,在高级篇通过综合项目实战提高Web前端开发技能。

  本书由冷亚洪、黄炜负责全书的编写、统稿、知识点及案例设计。具体编写分工为:第1章由李发陵编写,第2章由冷亚洪编写,第3、4章由阚洪编写,第5、6章由宋宇编写,第7、8章由黄炜编写。

  本书的特色如下:

  (1)本书内容编排结构合理,知识点由浅入深,循序渐进地引导读者快速入门,并能提高初级及以上读者的实际应用水平,让读者能够快速适应对Web前端开发工程师岗位的新要求。

  (2)本书采用“案例制”和“项目制”相结合的思想,通过大量的案例帮助读者对知识点的理解及掌握,使用综合项目案例(在线订餐系统)提升读者的综合应用能力。(3)本书重点突出Web的交互式开发,结合软件的面向对象和分层开发思想进行编程,让读者掌握的不仅是传统的HTML+DIV+CSS+jQuery编程,而且会掌握软件开发思想,掌握前端与后台之间的交互式设计与实现。

  (4)本书在综合项目案例部分,提供了Java和C#两种语言实现后台的数据处理,方便Java和C#方向的读者学习。

  (5)本书使用市场上最流行的软件开发技术,使读者在完成本书的学习后,可以无缝地过渡到对应的工作岗位。

  我们期望本书能为阅读者们提供以下帮助。

  (1)软件类应用型本科或高职高专人才培养的实训教材。

  (2)Web前端开发工程师的岗前学习教材。

  (3)培训机构的培训教材。

  (4)Web前端开发工程师的能力提升学习书籍。

  在本书的编写过程中,参阅了大量的资料,尤其是参考文献中列出的资料。在此对所有资料的编写者表示衷心的感谢!由于本书内容涉及面广,加之编者的水平有限,不当之处在所难免,恳请广大读者朋友批评、指正,我们将不胜感激,编者的邮箱是7357220@qq.com。

  编者

  2017年1月