JavaScript & JQuery 交互式Web前端开发

欢迎选择一种更高效的学习JavaScript和jQuery的方式。你是一名JavaScript新手?或是您曾经向自己的Web页面上添加过一些脚本，但想以一种更好的方式来实现它们？本书非常适合您。本书不仅向您展示如何阅读和编写JavaScript代码，同时还会以一种简单且视觉化的方式，教您有关计算机编程的基础知识。阅读本书之前，您只需要对HTML和CSS有一些了解即可。通过将编程理论与用来演示JavaScript和jQuery如何被应用于流行站点之上的示例相结合，本书将教会您如何让网站更具交互性、吸引性、可用性。很快，您就能够像一名程序员那样去思考和编写代码了。学习内容•阅读和编写JavaScript代码•让网站更具交互性•使用jQuery简化代码•重现流行的Web技巧涉及技术•幻灯片与灯箱效果•改进的表单与验证•使用Ajax、API和JSON•过滤、搜索与排序在线支持•代码示例•实践练习•其他参考资料[美]JonDuckett　　　　著杜伟　柴晓伟　涂曙光译JavaScriptandjQuery:InteractiveFront-EndWebDevelopmentJavaScript&jQuery交互式Web前端开发定价：79.80元　　JonDuckett近十多年来一直从事网站设计和构建工作。Jon曾加盟小公司，也曾供职于跨国集团。Jon迄今已撰写了十多本介绍Web设计、编程、可用性和可访问性的书籍。JavaScript&jQuery交互式Web前端开发　　欢迎您选择一种更高效的学习HTML和CSS的方式。　　不管您设计和建立新网站，还是想更好地控制现有网站，都可以在《HTML&CSS设计与构建网站》一书的指导下创建出用户友好、令用户赏心悦目的Web内容。我们知道，编码是一项令人望而生畏的工作，而本书却采用有别于许多传统编程书籍的新颖编排方式，将使您收到事半功倍的学习效果。　　每一页都在短小精悍的示例代码的引导下，简明直观、直截了当地阐述一个新主题。本书还提供关于如何组织和设计网页的实用信息，以便帮助您创建充满魅力、易于使用的网站。学习本书不要求您具有任何经验！JavaScript&jQueryWeb[美]JonDuckett著杜伟柴晓伟涂曙光译北京JonDuckettJavaScriptandjQuery:InteractiveFront-EndWebDevelopmentEISBN：978-1-118-53164-8Copyright©2014byJohnWiley&Sons,Inc.,Indianapolis,IndianaAllRightsReserved.Thistranslationpublishedunderlicense.Trademarks:Wiley,Wrox,theWroxlogo,ProgrammertoProgrammer,andrelatedtradedressaretrademarksorregisteredtrademarksofJohnWiley&Sons,Inc.and/oritsafiliates,intheUnitedStatesandothercountries,andmaynotbeusedwithoutwrittenpermission.AccessisaregisteredtrademarkofMicrosoftCorporation.Allothertrademarksarethepropertyoftheirrespectiveowners.JohnWiley&Sons,Inc.,isnotassociatedwithanyproductorvendormentionedinthisbook.本书中文简体字版由WileyPublishing,Inc.授权清华大学出版社出版。未经出版者书面许可，不得以任何方式复制或抄袭本书内容。北京市版权局著作权合同登记号图字：01-2014-6430CopiesofthisbooksoldwithoutaWileystickeronthecoverareunauthorizedandillegal.本书封面贴有Wiley公司防伪标签，无标签者不得销售。版权所有，侵权必究。侵权举报电话：010-6278298913701121933图书在版编目(CIP)数据JavaScript&jQuery交互式Web前端开发/(美)达克特(Duckett,J.)著；杜伟，柴晓伟，涂曙光译.—北京：清华大学出版社，2015书名原文：JavaScriptandjQuery:InteractiveFront-EndWebDevelopmentISBN978-7-302-39763-2Ⅰ.①J…Ⅱ.①达…②杜…③柴…④涂…Ⅲ.①JAVA语言—程序设计Ⅳ.①TP312中国版本图书馆CIP数据核字(2015)第077130号责任编辑：王军李维杰封面设计：牛艳敏版式设计：思创景点责任校对：曹阳责任印制：王静怡出版发行：清华大学出版社网址：，地址：北京清华大学学研大厦A座邮编：100084社总机：010-62770175邮购：010-62786544投稿与读者服务：010-62776969，[e-mail]质量反馈：010-62772015，[e-mail]装订者：河北三河市新茂装订厂经销：全国新华书店开本：148mm×210mm印张：19.625字数：924千字版次：2015年6月第1版印次：2015年6月第1次印刷印数：1～4000定价：79.80元————————————————————————————————————————产品编号：今天的Web网站，已经和10年前(甚至5年前)的Web网站有了很大的区别。无论是网站具有的交互性、面对用户的友好性，还是网页上所展现内容的丰富性，相比以前都有了巨大飞跃。这一切都拜JavaScript这门强大且灵活的编程语言所赐。JavaScript已经从以前的一门仅仅提供某些有趣特效的玩具脚本语言，转变为在Web网站开发中承担着核心角色的重要工具。无论使用何种服务器技术来创建Web网站，JavaScript都是Web工程师必须使用的前端语言。但是，由于JavaScript语言本身特有的灵活性、动态性等特点，学习JavaScript语言无论是对一名在其他编程语言领域具有丰富经验的软件工程师，还是一名刚刚踏入编程世界的新手，都是一个不小的挑战。本书以通俗易懂、由浅入深的方式，向读者一步一步介绍了JavaScript，是一本非常好的JavaScript前端开发入门书籍。使用大量的图示是本书的一大特点。常言道，“一图胜万言”，通过使用这些图示，能够让读者更加清晰明了地理解本书所要阐述的概念和知识。丰富的代码示例和代码流程图，则是本书的另一大特点。代码示例可以让读者更多地了解Web网页上那些特效和功能是如何通过代码实现的，与代码示例配套的代码流程图则降低了阅读代码的难度，也让读者对代码的执行过程和逻辑有了更直观的理解。由于jQuery几乎已经成为Web前端代码的“标配”，因此本书将jQuery库也纳入进来。jQuery可以让Web前端工程师事半功倍，更轻松地达成自己的目标。本书由杜伟、柴晓伟、涂曙光翻译，参与本次翻译活动的还有梁祝权、钟凤华、毛士之、张杉杉、张文旭、彭康、尼春雨、李明、陈龙、董欢。总而言之，如果想要找到一本几乎“零难度”的JavaScript前端开发入门书籍，通过阅读而快速成为一名Web前端工程师，那么此书将是不二之选。祝阅读快乐，学习快乐！译者(杜伟/柴晓伟/涂曙光)译者序源代码下载前言3前言JavaScript&jQuery交互式Web前端开发IV1理解一些基本的编程概念，以及JavaScript程序员用来描述这些概念的术语。2学习JavaScript这门语言本身，这就像学习其他任何语言一样，你需要知道这门语言的词汇，以及使用词汇来组织语句。3通过学习JavaScript如何被用在现今的Web网站中的例子，来熟悉如何使用它。在阅读本书过程中，你唯一需要的设备就是一台安装有现代Web浏览器的计算机，以及你昀喜欢的代码编辑器(例如记事本、TextEdit、SublimeText、Coda等)。本书讲解如何将JavaScript应用于浏览器中，以创建出更富交互性、更有趣、对用户更友好的Web网站。你还将从本书中学习jQuery，因为它使得JavaScript代码的编写容易了许多。要充分吸收本书中的内容，在阅读本书之前，你需要了解如何使用HTML和CSS来构建Web页面。除了这个要求以外，并不需要你有任何编程方面的经验。学习使用JavaScript编程包含：前言V总结部分位于每一章的结尾，它们提醒你每一章中涵盖的关键主题。示例部分将你要从每一章中学到的主题归纳在一起，并且展示如何应用它们。图表和信息图部分使用黑色背景，对要讨论的主题提供简单、可视化的参考。背景信息部分显示成白色，介绍在每章将要讨论的主题的一些上下文信息。参考部分介绍关键的JavaScript代码段。HTML代码使用蓝色字体显示，CSS代码使用粉红色字体显示，JavaScript则使用绿色字体显示。每一章的开头是介绍部分。它们将介绍每一章你要学习的关键概念。JavaScript如何使Web浏览器更富有交互性当一个Web页面被展现在浏览器中时，JavaScript能让你通过访问和修改页面上的内容和标记，使得Web页面更富有交互性。2修改内容可以使用JavaScript将元素、属性和文本添加到页面上，或者从页面上删除这些内容。例如：●在第一个h1元素的后面添加一段文本●更改class属性的值，将新的CSS规则应用到那些元素上●更改img元素的大小和位置1访问内容可以使用JavaScript选择HTML页面上的任意元素、属性或文本。例如：●选择页面上所有h1元素中的文本●选择拥有class属性且该属性包含某个值的所有元素●查看id属性值等于email的文本输入框里面输入了什么样的内容JavaScript&jQuery交互式Web前端开发VI4响应事件可以指定一段脚本，让它在某个特定的事件发生时运行。例如，脚本可以在如下事件发生时运行：●按下按钮●点击(或按下)链接●光标移动到元素上●向表单中添加信息●一定时间之后●Web页面已完成加载3编制规则可以为浏览器指定一组要执行的步骤(就像食谱上的烹饪步骤一样)，这些步骤使浏览器能够访问或修改页面上的内容。例如:●图库脚本可以检测用户点击了哪张图片，然后显示被点击图片的放大版。●房贷计算器可以从表单中收集数据，执行运算，然后显示每月的还款额。●动画可以检查浏览器窗口的大小，然后将一张图片移到可视区域(也被称为viewport)的底部。前言VIIJavaScript涵盖编程中许多传统的规则。通过响应用户的操作，使得Web页面更具交互性。JavaScript&jQuery交互式Web前端开发VIII幻灯片特效在第11章中展现幻灯片特效可以在给定页面的同一块区域内显示一系列不同的图片(或其他HTML内容)。这些图片可以按照顺序自动播放，或在用户人工点击后播放。这种特效使得在有限区域内可以显示更多的内容。响应：脚本在页面载入后执行访问：获取要展现的每张幻灯片修改：只显示第一张幻灯片(隐藏其他的幻灯片)编制：设置计时器，决定何时显示下一张幻灯片修改：更改要显示的幻灯片响应：用户点击不同幻灯片的按钮编制：检测要显示哪张幻灯片修改：显示用户要查看的幻灯片表单在第13章中展现当用户在页面上输入表单中的信息时，对表单进行验证(检查表单的填写是否正确)是很重要的。JavaScript可以在发生错误时警告用户。可以基于输入的任何数据进行精巧的运算，并将结果展现给用户。响应：当用户输入他们的名字，点击提交按钮时访问：从