HTML5及CSS3web前端开发技术习题答案解析 下载本文

用户输入。一些Web应用提供一个接口让用户输入地址、邮政编码或选择所在的区域,可以使用这些信息获得位置信息,这样就可以避免误差范围太大或延迟时间太久,这也是一种实用的定位方法。

(2)简述Geolocation API中描述地理位置信息的属性及其含义。

在Geolocation API的Position对象(或这个对象的属性)中,有地理位置信息的属性及描述。如果数据不可用,将返回null值。

属性 latitude longitude accuracy altitude altitudeAccurancy heading timestamp 当前地理位置的纬度信息 当前地理位置的经度信息 经度和纬度的准确度,是监测的位置与实际位置的误差范围(以米为单位) 当前地理位置的海拔高度(以米为单位) 获取到的海拔高度的精度(以米为单位) 设备的前进方向,用面朝正北方向的顺时针旋转角度来表示 获取地理位置信息的时间信息 描述 这些属性封装 (3)Geolocation API的getCurrentPosition()和watchPosition()方法有什么区别?

getCurrentPosition()用来获取用户当前位置的地理信息,watchPosition()可以监听和跟踪用户的地理位置信息,可以在地图上持续标记用户的活动路径、计算移动距离等。

2.操作题

(1)设计一个网页,在Google静态地图上标注用户当前的地理位置信息(用纬度和经度表示)。

参考示例8-3完成。

(2)设计一个网页获取用户当前位置信息的全部数据,包括纬度、经度、海拔、海拔精度和速度等,如果不能获取当前位置,给出相应的提示信息。

参考示例8-1完成。

第九章

1.简答题

(1)叙述离线Web应用工作机制。

离线Web应用指的是浏览器访问服务器的过程中,当服务器无法连接时,Web应用仍然可以运行。离线Web应用工作过程,核心是对应用缓存文件的解析和执行。

①客户端浏览器中输入要访问页面的URL地址,向该地址指向的Web服务器发出请求。

②Web服务器根据浏览器送来的请求,将请求的文档和所需资源返回给浏览器。 ③浏览器解析返回的文档,处理或显示从Web服务器返回的资源文件。如果支持离线Web应用,重点考察manifest缓存文件,该文件由html标记的manifest属性指定。可分为以下3种情况。

? ?

如果是第1次访问Web服务器,浏览器向服务器请求所有manifest文件中声明缓存的文件到本地,同时更新本地缓存。

如果不是第1次访问Web服务器,并且manifest文件没有被修改,Web应用将使用本地被缓存的文件。

? 如果不是第1次访问Web服务器,并且manifest文件被修改或发生了版本变化,浏览器将向服务器请求manifest文件中声明的文件,并保存到本地缓存。

上面的过程主要面向Web服务器在线的情况,如果支持离线应用程序的Web服务器不在线时,浏览器就会使用已经下载到本地缓存中的文件,从而在离线状态下运行Web应用程序。

离线Web应用的一个典型例子,用户可以在不连接Web服务器的情况下,编辑一个邮件或博客,并将其保存在本地,待下次连接Web服务器时再完成提交工作。

(2)开发离线Web应用程序需要哪些步骤?

①离线资源缓存。首先需要确定Web应用程序离线工作所需的资源文件。当处于在线状态时,下载这些文件并缓存到本地。当离线时,浏览器无法连接Web服务器,则可以自动加载这些资源文件,从而实现离线访问应用程序。在HTML5中,通过manifest文件清单指明需要缓存的资源。

②检测在线状态。在支持离线的Web应用程序中,浏览器应该判断在线或离线的状态,并做出对应的处理。

③本地数据存储。在离线时,Web应用程序需要能够把数据存储到本地,以便以后在线时可以同步到Web服务器上。

(3)manifest缓存文件清单的内容具体包括哪些选项,功能是什么?

manifest缓存文件是离线Web应用的关键,该文件清单的内容具体说明如下。

manifest文件第一行必须是CACHE MANIFEST,文件扩展名建议使用appcache,也可

以使用manifest。

CACHE:指定需要缓存的文件,清单中列出的文件在首次访问Web服务器进下载并缓

存。

NETWORK:指定的文件需要与服务器连接才能获取,不会被缓存。 *是文件通配符,

代表除了在CACHE中指明的文外件,所有其他文件都不缓存,需要从Web服务器获得。

FALLBACK:在此选项下列出的文件当页面无法访问时,使用备用的资源文件。 文件编码必须是utf-8。

实现应用缓存,需要在标记中定义manifest属性,从而在网页中引用manifest文件,例如:

在访问网页时,按照test. appcache文件中指定的文件列表进行缓存。在一些Web服务器上可能需要配置对manifest文件的支持,保存后需要重新启动Web服务器。具体请参阅相应的Web服务器手册。

(4)Web Storage API中的localStorage和sessionStorage区别是什么?

Web Storage提供两种方式将数据保存在客户端:一种是localStorage,另一种是sessionStorage。从两种存储方式的名字可以看出,localStorage被称做本地存储,将数据保存在客户端本地;sessionStorage被称为会话存储,将数据保存在session中,浏览器关闭后session对象消失。两者的主要差异在于数据的保存周期和有效范围,如下所示。

Web Storage类型 localStorage sessionStorage 数据保存周期 数据保存在本地存储(硬盘),网页关闭后,数据仍然存在,执行删除命令后数据会消失。 数据临时保存在session对象中,在网页浏览期间存续,网页关闭,数据丢失 有效范围 同一网站的网页可以访问 仅对当前浏网页可以访问

(5)Web Storage API有哪些常用方法,功能是什么?

sessionStorage和localStorage可使用的API都相同,其功能包括保存数据、读取数据、删除

数据、得到索引的key值等。

localStorage 和sessionStoragey都使用setItem()方法用来保存数据,格式如下: localStorage.setItem(\

localStorage和sessionStoragey都使用getItem()方法用来读取数据,格式如下: var value = localStorage.getItem(\

删除数单个数据需要指明删除的key值,形式如下。如果key参数没有对应数据,则不执行任何操作。

localStorage.removeItem(\

是遍历Storage对象时,需要使用key(index)方法允许获取一个指定位置的键值。语法格式 localStorage.key(index);

2.操作题

(1)参考示例9-5使用localStorage实现一个计数器功能,先在同一浏览器的不同页面访问,再在不同浏览器的页面访问,观察页面显示结果。

localStorage文档

Session计数器


//script03.js

function saveStorage(id){

var data = document.getElementById(id).value; var time = new Date().getTime(); //alert(time);

localStorage.setItem(time,data); alert(\数据已保存。\

loadStorage('msg'); }

function loadStorage(id){

var result = '

for(var i = 0;i < localStorage.length;i++) { var key = localStorage.key(i); //alert(key);

var value = localStorage.getItem(key); var date= new Date(); date.setTime(key);

var datestr = date.toGMTString();

result += '

'; }

result += '

' + value + '' + datestr + '
';

var target = document.getElementById(id); target.innerHTML = result; }

function clearStorage(){ localStorage.clear();

alert(\全部数据被清除。\ loadStorage('msg'); }

第十章

1.简答题

(1)Web Workers API中常用的方法和事件有哪些?各自功能是什么?

Web Workers作为一种后台执行的线程,它的功能包括创建线程,线程与前端页面的数据交互,线程本身占用大量内存资源,本身也需要关闭或销毁。HTML5的Web Workers API中的方法和事件就是对上面的功能进行了封装。使用Web Workers API,用户可以很容易地创建在后台运行的线程(Worker),并完成数据交互和终止线程。Web Workers常用的方法和事件下表所示。

方法/事件 Worker()方法 postMessage()方法 terminate()方法 close()方法 setTimeout()方法 setInterval ()方法 onmessage事件 构造器,用于创建线程 用于发送信息 终止线程,并释放浏览器/计算机资源 结束线程 在线程中实现定时处理 在线程中实现定时处理 获得接收消息的事件句柄 功能

(2)实现前台页面与后台线程互相传递数据有哪几种方法?请写出代码。

通过发送和接收消息来实现前面页面与后台线程互相传递数据。如果想接收消息,用下面方式之一。

第1种方法,通过获取Worker对象的onmessage事件的句柄可以在后台线程中接收消息,代码如下。方法的回调函数的参数(下面代码中的event)中,有线程交互的数据。

worker.onmessage=function(event) { //消息处理,数据为event.data }

第2种方法,使用addEventListener()方法对message事件进行监听。 work.addEventListener(\

//document.getElementById(‘message’).innerHTML=e.data; //消息处理,数据为event.data },false);

如果想要发送消息, 需要使用postMessage()方法。使用Worker对象的postMessag()方法来发送消息,代码如下。发送的消息是文本数据,也可以是JSON。

worker.postMessage(message);

(3)SharedWorker和Worker有什么区别?

HTML5 中的 Web Worker分为两种不同线程类型,一种称为专用线程(Dedicated Worker),另外一种就是共享线程 Shared Worker。SharedWorker也是Worker,但多个页面可以共用一个SharedWorker后台线程,并且可通过该后台线程共享数据。

创建SharedWorker线程的方法与前面创建Worker线程的方法类似,只是构造器略有区别。代码如下。var worker=new SharedWorker(url, [name]);

该方法第一个参数用于指定后台线程文件的URL地址,该脚本文件中定义了在后台线程中所要执行的处理,第二个参数为可选参数,用于指定Worker的名称。当用户创建多个SharedWorker对象时,脚本程序将根据创建SharedWorker对象时使用的url参数值与name参数值来决定是否创建不同的线程。

2.操作题

(1)使用Web Worker设计多线程的网页页面,前台向后台线程发送10个0~200的随机数;后台线程接收数据后,选出其中5的倍数,并将数据发送至前端页面;由前端页面在一个span