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

《前端开发实用技术教学教程.doc》由会员分享，可在线阅读，更多相关《前端开发实用技术教学教程.doc（12页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、.第 1 章 Web 前端开发技术概述一、选择题1C 2B 3A 4C 5C6D 二、填空题1HTML2HTTP（Hypertext Transfer Protocol ，超文本传输协议）3HTML，CSS，JavaScript4background5img三、简答题1答：在 Web 应用程序出现之前， “客户机/服务器”（C/S）是应用程序的主流架构。C/S 架构应用程序的工作原理如图 1-1 所示。C/S 架构应用程序的特点是客户机通过发送一条消息或一个操作来启动与服务器之间的交互，而服务器通过返回消息进行响应。客户端程序为用户提供管理和操作界面，而数据通常保存在服务器端。在部署 C/S

2、架构的应用程序时，需要为每个用户安装客户端程序，升级应用程序是也同样需要升级客户端程序。这无疑增加了维护成本。典型的客户机/服务器网络模型就是支持多用户的数据库管理系统。2答：随着互联网的应用和推广，浏览器/服务器（B/S）网络模型诞生了，其工作原理如图1-3 所示。图 1-3 浏览器/服务器（B/S）网络模型B/S 结构的应用程序只需要部署在 Web 服务器上即可，应用程序可以是HTML（ HTM）文件或 ASP、 PHP 等脚本文件。用户只需要安装 Web 浏览器就可以浏览所有网站的内容。这无疑比 C/S 结构应用程序要方便得多。客 户 机 图 1-1 C/S 架构应用程序的工作原理.3答

3、：Web 服务器通常需要有固定的 IP 地址和永久域名，其主要功能如下： 存放 Web 应用程序。 接受用户申请的服务。如果用户申请浏览 ASP、PHP 等脚本文件，则 Web 服务器会对脚本进行解析，生成对应的临时 HTML（HTM ）文件。 如果脚本中需要访问数据库，则将 SQL 语句传送到数据库服务器，并接收查询结果。 将 HTML（HTM）文件传送到 Web 浏览器。4答：Web 浏览器的主要功能如下： 由用户向指定的 Web 服务器（网站）申请服务。申请服务时需要指定 Web 服务器的域名或地址以及要浏览的 HTML（HTM ）文件或 ASP、PHP 等脚本文件。 从 Web 服务器

4、下载申请的 HTML（HTM）文件。 解析并显示 HTML（HTM ）文件，用户可以通过 Web 浏览器申请指定的 Web 服务器 Web 浏览器和 Web 服务器使用 HTTP 协议进行通信。5答：在完成需求分析和总体设计的情况下，开发 Web 应用程序的基本流程如图 1-4 所示。.图 1-4 开发 Web 应用程序的基本流程1设计 Web 应用程序中包含的模块和页面在开始开发 Web 应用程序之前，应由项目组长或系统分析员将 Web 应用程序划分成若干模块，并定义每个模块包含的页面以及模块间的接口。这是项目组成员分工合作的前提。2配置 Web 服务器运行 Web 应用程序需要一个载体，即

5、 Web 服务器。一个 Web 服务器可以放置多个Web 应用程序，也可以把 Web 服务器称为 Web 站点。通常服务器有两层含义，一方面它代表计算机硬件设备，用来安装操作系统和其他应用软件；另一方面它又代表安装在硬件服务器上的相关软件。要配置 Web 应用程序，首先需要准备一台硬件服务器，如果没有特殊需要，选择普通的 PC 服务器即可。PC 服务器的组件与普通计算机相似，只是 PC 服务器比普通计算机拥有更高的性能和更好的稳定性。在开发和测试阶段，或者比较小的网络环境下，也可以使用普通计算机作为 Web 服务器。Web 服务器应用程序可以响应用户通过浏览器提交的请求。常用的 Web 服务器

6、应用程序包括 IIS 和 Apache 等。数据库服务器用来存储网站中的数据，例如注册用户的信息、用户发贴的信息等。常用的数据库产品包括 SQL Server、Access 、Oracle 和 MySQL 等。3前端开发通常需要根据总体设计文档将每个功能模块划分成若干个网页文件；前端开发的主要任务是设计网页的架构、显示风格、特效和一些客户端功能。通常由美工设计网页中需要使用的图片和 flash 等资源，再使用 DreamWeaver 设计网页的界面，包括网页的基本框架和网页中的静态元素，例如表格、静态图像和静态文本等，然后使用 JavaScript 程序实现网页特效和客户端功能。关于 Web

7、前端开发实用技术的具体情况将在 1.2 小节介绍。4后端开发在完成需求分析和总体设计后，程序员（通常项目组里有专门负责数据库管理和编程的人员）需要根据总体设计的要求设计具体的数据库结构，包括创建数据库、决定数据库中包含哪些表和视图、设计表和视图结构等。在设计数据库结构后，可以通过编写数据库脚本来创建这些数据库对象。在安装应用程序时就可以执行这些数据库脚本来创建数据库对象了。后端开发的重点还在于程序员在网页中添加 ASP、PHP 或 ASP.NET 代码，访问数据库、完成网页的具体功能。5集成在很多情况下，前端开发和后端开发是由一个人完成的。此时就不存在前端和后端的集成问题了。如果有专门的前端开

8、发人员，则需要在开发前期约定好网页的框架和数据接口，然后分别开发，最后将前端开发和后端开发的成果集成在一起。完成集成工作的程序员需要同时熟悉前端开发技术和后端开发技术。通常可以由前端开发人员在实现了后端开发功能的网页中添加前端开发的代码，实现网页特效。后端开发的主要职责是准备数据，前端开发的主要职责是丰富行为。6测试 Web 应用程序，通过测试后上线运行在 Web 应用程序开发完成后，需要测试其具体功能的实现情况。在通过测试达到实际应用的需求后，可以将 Web 应用程序布署到 Web 服务器上。通常需要准备一个备份 Web服务器，以便实现数据备份，并且在增加新功能时提供测试环境。.第 2 章

9、JavaScript 语言基础一、选择题1B 2A 3A二、填空题1js2=3continue4break三、简答题1答：类型 具体描述Undefined 当声明的变量未初始化时，该变量的默认值是 undefinedNull 空值，如果引用一个没有定义的变量，则返回空值Boolean 布尔类型，包含 true 和 falseString 字符串类型，由单引号或双引号括起来的字符Number 数值类型，可以是 32 位、64 位整数或浮点数2答：.3答:for(表 达 式 1; 表 达 式 2; 表 达 式 3) 循 环 体程序在开始循环时计算表达式 1 的值，通常对循环计数器变量进行初始化设置

10、；每次循环开始之前，计算表达式 2 的值，如果为 True，则继续执行循环，否则退出循环；每次循环结束之后，对表达式 3 进行求值，通常改变循环计数器变量的值，使表达式 2 在某次循环结束后等于 False，从而退出循环。第 3 章 javaScript 函数一、选择题1B 2B 3D二、填空题1confirm()2escape()3return4. js三、简答题1. 答：可以使用 function 关键字来创建自定义函数，其基本语法结构如下：function 函 数 名 (参 数 列 表 )函 数 体参数列表可以为空，即没有参数；也可以包含多个参数，参数之间使用逗号（,）分隔。函数体可以是

11、一条语句，也可以由一组语句组成。2. 答：1在 JavaScript 中使用函数名来调用函数2在 HTML 中使用“javascript:“方式调用 JavaScript 函数3与事件结合调用 JavaScript 函数3. 答：在函数中也可以定义变量，在函数中定义的变量被称为局部变量。局部变量只在定义它的函数内部有效，在函数体之外，即使使用同名的变量，也会被看作是另一个变量。相.应地，在函数体之外定义的变量是全局变量。全局变量在定义后的代码中都有效，包括它后面定义的函数体内。如果局部变量和全局变量同名，则在定义局部变量的函数中，只有局部变量是有效的。4. 答：在 HTML 文件中引用函数库

12、js 文件的方法如下：/ 引 用 js 文 件 中 的 函 数第 4 章 操作 HTML 元素一、选择题1A 2B 3B 4A 5B二、填空题1document.getElementById() 2. attr()3has()三、简答题面向对象程序设计思想可以将一组数据和与这组数据有关操作组装在一起，形成一个实体，这个实体就是对象。具有相同或相似性质的对象的抽象就是类。因此，对象的抽象是类，类的具体化就是对象。例如，如果人类是一个类，则一个具体的人就是一个对象。第 5 章 jQuery 插件一、选择题1A 2C 3A 4D二、填空题1jquery.插件名.js2jQuery. expr3jQu

13、ery 对象.封装的 jQuery 对象方法.4jQuery. 全局函数名()5waypoint()三、简答题1答:jQuery 插件可以分为下面 3 种类型。（1）封装 jQuery 对象方法：把一些常用功能定义为函数，绑定到 jQuery 对象上，从而扩展了 jQuery 对象。（2）全局函数：把自定义函数附加到 jQuery 命名空间下，从而作为一个公共的全局函数使用。（3）自定义选择器：编写一个自定义函数，返回满足指定条件的 HTML 元素对应的jQuery 对象。2答：(function($) / 这 里 放 插 件 代 码 )(jQuery);第 6 章 表单编程一、选择题1C 2

14、B 3A 4B 5A二、填空题1提交按钮（submit） ；重置按钮（ reset） ；普通按钮（button）2type3textarea4“submit“；“reset“；“button“5blur三、简答题1答1使用 document.getElementById()方法获取表单对象2使用 document.getElementsByName()方法获取表单对象3使用 document. getElementsByTagName ()方法获取表单对象.4使用 document.forms 数组获取表单对象2答：使用 document.getElementById()方法、document

15、.getElementsByName()方法和 document. getElementsByTagName ()方法获取表单元素对象。除此之外，还可以使用下面的方法获取表单元素对象。1使用表单的 elements 数组属性获取表单元素对象2以表单元素名作为表单对象的属性获取表单元素对象第 7 章 JavaScript 编辑和调试工具一、填空题1工作区2工作台（workbench）3开发人员工具4Console二、练习题略第 8 章 设置 CSS 样式一、选择题1C 2A 3D 4B二、填空题1Cascading Style Sheet （层叠样式表）2border-radius3box-sh

16、adow4document.styleSheets.三、简答题1答：CSS 是 Cascading Style Sheet（层叠样式表）的缩写，它可以扩展 HTML 的功能，重新定义 HTML 元素的显示方式。 CSS 所能改变的属性包括字体、文字间的空间、列表、颜色、背景、页边距和位置等。使用 CSS 的好处在于用户只需要一次性定义文字的显示样式，就可以在各个网页中统一使用了，这样既避免了用户的重复劳动，也可以使系统的界面风格统一。CSS 是一种能使网页格式化的标准，使用 CSS 可以使网页格式（由 CSS 定义）与内容（由 HTML 定义）分开，先决定文本的格式是什么样的，然后再确定文档的

17、内容。2答：在 CSS3 中，设置边框颜色的属性如下。 border-bottom-colors：定义底边框的颜色； border-top-colors:：定义顶边框的颜色； border-left-colors:：定义左边框的颜色； border-right-colors:：定义右边框的颜色。第 9 章 Ajax 编程一、选择题1A 2B 3B 4A二、填空题1XMLHttpRequest 2onreadystatechange3getResponseHeader() 4timeout三、简答题1答使用 XMLHttpRequest 对象可以实现下面的功能： 在不重新加载页面的情况下更新网页

18、； 在页面已加载后从服务器请求数据； 在页面已加载后从服务器接收数据； 在后台向服务器发送数据。2答 method：用于请求的 HTTP 方法。值包括 GET、POST 和 HEAD。. url：所调用的服务器资源的 URL。 async：布尔值，指示这个调用使用异步还是同步，默认为 true（即异步） 。 username：可选参数，为 url 所需的授权提供认证用户。 password：可选参数，为 url 所需的授权提供认证密码。第 10 章 JavaScript HTML5 编程一、选择题1A 2C 3D 4C 5A6A 二、填空题1拖拽（drag） ；放开（drop ） 2dataT

19、ransfer3Geolocation API 4Audio5Loop 617source三、问答题1答：标 签 具 体 描 述mark 用于定义带有记号的文本time 用于定义公历的时间（24 小时制）或日期，时间和时区meter 用于定义度量衡。仅用于已知最大和最小值的度量。浏览器会使用图形方式表现 meter 标签，例如，在 Google Chrome 中 meter 标签的表现如图 10-2 所示progress 用于定义一个进度条，例如，在 Google Chrome 中 progress 标签的表现如图 10-3 所示2答：在 HTML5 中可以通过下面的方法进行绘图： 使用 Canvas API 动态地绘制各种效果精美的图形； 绘制可伸缩矢量图形（SVG） 。3答：位置信息的通常来源包括。 GPS（全球定位系统）：这种方式可以提供很精确的定位，但需要专门的硬件设备，定位效率也不高。 IP 地址：多用于计算机设备，定位并不准确。 RFID（Radio Frequency Identification，无线射频标签）：可以通过读卡器的信号、报文到达时间或定位器等等数据确定标签的位置。