前端开发实用技术教程.doc

第1章 Web前端开发技术概述一、选择题1C 2B 3A 4C 5C6D 二、填空题1HTML2HTTP（Hypertext Transfer Protocol，超文本传输协议）3HTML，CSS，JavaScript4background5img三、简答题1答：图1-1 C/S架构应用程序的工作原理在Web应用程序出现之前，“客户机/服务器”（C/S）是应用程序的主流架构。C/S架构应用程序的工作原理如图1-1所示。C/S架构应用程序的特点是客户机通过发送一条消息或一个操作来启动与服务器之间的交互，而服务器通过返回消息进行响应。客户端程序为用户提供管理和操作界面，而数据通常保存在服务器端。在部署C/S架构的应用程序时，需要为每个用户安装客户端程序，升级应用程序是也同样需要升级客户端程序。这无疑增加了维护成本。典型的客户机/服务器网络模型就是支持多用户的数据库管理系统。2答：随着互联网的应用和推广，浏览器/服务器（B/S）网络模型诞生了，其工作原理如图1-3所示。图1-3 浏览器/服务器（B/S）网络模型B/S结构的应用程序只需要部署在Web服务器上即可，应用程序可以是HTML（HTM）文件或ASP、PHP等脚本文件。用户只需要安装Web浏览器就可以浏览所有网站的内容。这无疑比C/S结构应用程序要方便得多。3答：Web服务器通常需要有固定的IP地址和永久域名，其主要功能如下：l 存放Web应用程序。l 接受用户申请的服务。如果用户申请浏览ASP、PHP等脚本文件，则Web服务器会对脚本进行解析，生成对应的临时HTML（HTM）文件。l 如果脚本中需要访问数据库，则将SQL语句传送到数据库服务器，并接收查询结果。l 将HTML（HTM）文件传送到Web浏览器。4答：Web浏览器的主要功能如下：l 由用户向指定的Web服务器（网站）申请服务。申请服务时需要指定Web服务器的域名或地址以及要浏览的HTML（HTM）文件或ASP、PHP等脚本文件。l 从Web服务器下载申请的HTML（HTM）文件。l 解析并显示HTML（HTM）文件，用户可以通过Web浏览器申请指定的Web服务器l Web浏览器和Web服务器使用HTTP协议进行通信。5答：在完成需求分析和总体设计的情况下，开发Web应用程序的基本流程如图1-4所示。图1-4 开发Web应用程序的基本流程1设计Web应用程序中包含的模块和页面在开始开发Web应用程序之前，应由项目组长或系统分析员将Web应用程序划分成若干模块，并定义每个模块包含的页面以及模块间的接口。这是项目组成员分工合作的前提。2配置Web服务器运行Web应用程序需要一个载体，即Web服务器。一个Web服务器可以放置多个Web应用程序，也可以把Web服务器称为Web站点。通常服务器有两层含义，一方面它代表计算机硬件设备，用来安装操作系统和其他应用软件；另一方面它又代表安装在硬件服务器上的相关软件。要配置Web应用程序，首先需要准备一台硬件服务器，如果没有特殊需要，选择普通的PC服务器即可。PC服务器的组件与普通计算机相似，只是PC服务器比普通计算机拥有更高的性能和更好的稳定性。在开发和测试阶段，或者比较小的网络环境下，也可以使用普通计算机作为Web服务器。Web服务器应用程序可以响应用户通过浏览器提交的请求。常用的Web服务器应用程序包括IIS和Apache等。数据库服务器用来存储网站中的数据，例如注册用户的信息、用户发贴的信息等。常用的数据库产品包括SQL Server、Access、Oracle和MySQL等。3前端开发通常需要根据总体设计文档将每个功能模块划分成若干个网页文件；前端开发的主要任务是设计网页的架构、显示风格、特效和一些客户端功能。通常由美工设计网页中需要使用的图片和flash等资源，再使用DreamWeaver设计网页的界面，包括网页的基本框架和网页中的静态元素，例如表格、静态图像和静态文本等，然后使用JavaScript程序实现网页特效和客户端功能。关于Web前端开发实用技术的具体情况将在1.2小节介绍。4后端开发在完成需求分析和总体设计后，程序员（通常项目组里有专门负责数据库管理和编程的人员）需要根据总体设计的要求设计具体的数据库结构，包括创建数据库、决定数据库中包含哪些表和视图、设计表和视图结构等。在设计数据库结构后，可以通过编写数据库脚本来创建这些数据库对象。在安装应用程序时就可以执行这些数据库脚本来创建数据库对象了。后端开发的重点还在于程序员在网页中添加ASP、PHP或ASP.NET代码，访问数据库、完成网页的具体功能。5集成在很多情况下，前端开发和后端开发是由一个人完成的。此时就不存在前端和后端的集成问题了。如果有专门的前端开发人员，则需要在开发前期约定好网页的框架和数据接口，然后分别开发，最后将前端开发和后端开发的成果集成在一起。完成集成工作的程序员需要同时熟悉前端开发技术和后端开发技术。通常可以由前端开发人员在实现了后端开发功能的网页中添加前端开发的代码，实现网页特效。后端开发的主要职责是准备数据，前端开发的主要职责是丰富行为。6测试Web应用程序，通过测试后上线运行在Web应用程序开发完成后，需要测试其具体功能的实现情况。在通过测试达到实际应用的需求后，可以将Web应用程序布署到Web服务器上。通常需要准备一个备份Web服务器，以便实现数据备份，并且在增加新功能时提供测试环境。第2章 JavaScript语言基础一、选择题1B 2A 3A二、填空题1js2=3continue4break三、简答题1答：类型具体描述Undefined当声明的变量未初始化时，该变量的默认值是 undefinedNull空值，如果引用一个没有定义的变量，则返回空值Boolean布尔类型，包含true和falseString字符串类型，由单引号或双引号括起来的字符Number数值类型，可以是32位、64位整数或浮点数2答：3答:for(表达式1; 表达式2; 表达式3) 循环体程序在开始循环时计算表达式1的值，通常对循环计数器变量进行初始化设置；每次循环开始之前，计算表达式2的值，如果为True，则继续执行循环，否则退出循环；每次循环结束之后，对表达式3进行求值，通常改变循环计数器变量的值，使表达式2在某次循环结束后等于False，从而退出循环。第3章 javaScript函数一、选择题1B 2B 3D二、填空题1confirm()2escape()3return4. js三、简答题1. 答：可以使用function关键字来创建自定义函数，其基本语法结构如下：function 函数名 (参数列表) 函数体参数列表可以为空，即没有参数；也可以包含多个参数，参数之间使用逗号（,）分隔。函数体可以是一条语句，也可以由一组语句组成。2. 答：1在JavaScript中使用函数名来调用函数2在HTML中使用javascript:方式调用JavaScript函数3与事件结合调用JavaScript函数3. 答：在函数中也可以定义变量，在函数中定义的变量被称为局部变量。局部变量只在定义它的函数内部有效，在函数体之外，即使使用同名的变量，也会被看作是另一个变量。相应地，在函数体之外定义的变量是全局变量。全局变量在定义后的代码中都有效，包括它后面定义的函数体内。如果局部变量和全局变量同名，则在定义局部变量的函数中，只有局部变量是有效的。4. 答：在HTML文件中引用函数库js文件的方法如下：/ 引用js文件中的函数第4章 操作HTML元素一、选择题1A 2B 3B 4A 5B二、填空题1document.getElementById()2. attr()3has()三、简答题面向对象程序设计思想可以将一组数据和与这组数据有关操作组装在一起，形成一个实体，这个实体就是对象。具有相同或相似性质的对象的抽象就是类。因此，对象的抽象是类，类的具体化就是对象。例如，如果人类是一个类，则一个具体的人就是一个对象。第5章 jQuery插件一、选择题1A 2C 3A 4D二、填空题1jquery.插件名.js2jQuery. expr3jQuery对象.封装的jQuery对象方法4jQuery.全局函数名()5waypoint()三、简答题1答:jQuery插件可以分为下面3种类型。（1）封装jQuery对象方法：把一些常用功能定义为函数，绑定到jQuery对象上，从而扩展了jQuery对象。（2）全局函数：把自定义函数附加到jQuery命名空间下，从而作为一个公共的全局函数使用。（3）自定义选择器：编写一个自定义函数，返回满足指定条件的HTML元素对应的jQuery对象。2答：(function($) / 这里放插件代码 )(jQuery);第6章 表单编程一、选择题1C 2B 3A 4B 5A二、填空题1提交按钮（submit）；重置按钮（reset）；普通按钮（button）2type3textarea4submit；reset；button5blur三、简答题1答1使用document.getElementById()方法获取表单对象2使用document.getElementsByName()方法获取表单对象3使用document. getElementsByTagName ()方法获取表单对象4使用document.forms数组获取表单对象2答：使用document.getElementById()方法、document.getElementsByName()方法和document. getElementsByTagName ()方法获取表单元素对象。除此之外，还可以使用下面的方法获取表单元素对象。1使用表单的elements数组属性获取表单元素对象2以表单元素名作为表单对象的属性获取表单元素对象第7章 JavaScript编辑和调试工具一、填空题1工作区2工作台（workbench）3开发人员工具4Console二、练习题略第8章 设置CSS样式一、选择题1C 2A 3D 4B二、填空题1Cascading Style Sheet（层叠样式表）2border-radius3box-shadow4document.styleSheets三、简答题1答：CSS是Cascading Style Sheet（层叠样式表）的缩写，它可以扩展HTML的功能，重新定义HTML元素的显示方式。CSS所能改变的属性包括字体、文字间的空间、列表、颜色、背景、页边距和位置等。使用CSS的好处在于用户只需要一次性定义文字的显示样式，就可以在各个网页中统一使用了，这样既避免了用户的重复劳动，也可以使系统的界面风格统一。CSS是一种能使网页格式化的标准，使用CSS可以使网页格式（由CSS定义）与内容（由HTML定义）分开，先决定文本的格式是什么样的，然后再确定文档的内容。2答：在CSS3中，设置边框颜色的属性如下。l border-bottom-colors：定义底边框的颜色；l border-top-colors:：定义顶边框的颜色；l border-left-colors:：定义左边框的颜色；l border-right-colors:：定义右边框的颜色。第9章 Ajax编程一、选择题1A 2B 3B 4A二、填空题1XMLHttpRequest2onreadystatechange3getResponseHeader()4timeout三、简答题1答使用XMLHttpRequest对象可以实现下面的功能：l 在不重新加载页面的情况下更新网页；l 在页面已加载后从服务器请求数据；l 在页面已加载后从服务器接收数据；l 在后台向服务器发送数据。2答l method：用于请求的 HTTP 方法。值包括GET、POST和HEAD。l url：所调用的服务器资源的URL。l async：布尔值，指示这个调用使用异步还是同步，默认为true（即异步）。l username：可选参数，为url所需的授权提供认证用户。l password：可选参数，为url所需的授权提供认证密码。第10章 JavaScript HTML5编程一、选择题1A 2C 3D 4C 5A6A 二、填空题1拖拽（drag）；放开（drop）2dataTransfer3Geolocation API4Audio5Loop617source三、问答题1答：标 签具 体 描 述mark用于定义带有记号的文本time用于定义公历的时间（24小时制）或日期，时间和时区meter用于定义度量衡。仅用于已知最大和最小值的度量。浏览器会使用图形方式表现 meter标签，例如，在Google Chrome中meter标签的表现如图10-2所示progress用于定义一个进度条，例如，在Google Chrome中progress标签的表现如图10-3所示2答：在HTML5中可以通过下面的方法进行绘图：l 使用Canvas API动态地绘制各种效果精美的图形；l 绘制可伸缩矢量图形（SVG）。3答：位置信息的通常来源包括。l GPS（全球定位系统）：这种方式可以提供很精确的定位，但需要专门的硬件设备，定位效率也不高。l IP地址：多用于计算机设备，定位并不准确。l RFID（Radio Frequency Identification，无线射频标签）：可以通过读卡器的信号、报文到达时间或定位器等等数据确定标签的位置。lWiFi：无线上网时，可以通过WiFi热点（AP或无线路由器）来定位客户端设备。l GSM/CDMA小区标识码：可以根据手机用户的基站数据定位手机设备。l 用户输入：除了以上方法外，还可以允许用户自定义位置信息。第11章 最流行的JavaScript脚本库jQuery一、选择题1D 2C 3D 4B二、填空题1src2$(*)3:first4attr()5Animate()6fx三、简答题1答（1）ancestor descendant（祖先 后代）选择器ancestor descendant选择器可以选取指定祖先元素的所有指定类型的后代元素。例如，使用$(form input)可以选择表单中的所有input元素。（2）parent child（父 子）选择器parent child选择器可以选取指定父元素的所有子元素，子元素必须包含在父元素中。例如，使用$(form input)可以选择表单中的所有input元素。（3）prev + next（前 + 后）选择器prev + next选择器可以选取紧接在指定的prev元素后面的next元素。例如，使用$(