Android教程之用HTML5构建Web应用程序(一)ppt课件.pptx

《Android教程之用HTML5构建Web应用程序(一)ppt课件.pptx》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、Android教程之用HTML5构建Web应用程序（一）简介准备工具探测的能力清单1.探测脚本清单2.检测DOM清单3.不同浏览器的功能基于HTML5已经涌现出了很多新的特性和标准。一旦您发现了当今浏览器中的一些可用的特性，就可以在您的应用程序中充分利用这些特性。在本文中，通过开发一些示例应用程序来了解如何探寻和使用最新的Web技术。本文的绝大多数代码都是HTML、JavaScript和CSS—Web开发人员的核心技术。简介为了能跟随我们的示例进行学习，最重要的一件事情是要有多个浏览器供测试使用。

2、建议使用MozillaFirefox、AppleSafari和GoogleChrome最新版本。本文中我们使用的是MozillaFirefox3.6、AppleSafari4.04和GoogleChrome5.0.322。您可能还希望在移动浏览器上进行测试。例如，最新的Android和iPhoneSDK被用于在模拟机上测试它们的浏览器。这些示例包括非常小的用Java™写的后端组件。本文使用的是JDK1.6.0_17和ApacheTomcat6.0.14。Android教程之准备工具有一个关于Web

3、开发人员的笑谈，Web开发人员用他们20%的时间写代码，然后用剩下的80%的时间让这些代码能够在所有浏览器中运转起来并获得相同的效果。要说Web开发人员已习惯于处理不同浏览器间的差别多少有点不切实际。随着浏览器新一轮创新浪潮的出现，这种低效的方法仍然没有改善。最新、最好的浏览器所支持的特性在不断变化。不过，也有好的一面，这些新特性均集中在Web标准，这就让您能够现在就开始使用这些新特性。您可以采用渐进增强的老技巧、提供一些基线特性、查找高级特性，然后用出现的额外特性增强您的应用程序。要做到这一点，

4、我们需要学习如何探测新功能。清单1显示了一个简单的探测脚本。Android教程之探测的能力functiondetectBrowserCapabilities(){$("userAgent").innerHTML=navigator.userAgent;varhasWebWorkers=!!window.Worker;$("workersFlag").innerHTML=""+hasWebWorkers;varhasGeolocation=!!navigator.geolocation;$("geo

5、Flag").innerHTML=""+hasGeolocation;if(hasGeolocation){document.styleSheets[0].cssRules[1].style.display="block";navigator.geolocation.getCurrentPosition(function(location){$("geoLat").innerHTML=location.coords.latitude;$("geoLong").innerHTML=location.

6、coords.longitude;});}Android教程之清单1.探测脚本varhasDb=!!window.openDatabase;$("dbFlag").innerHTML=""+hasDb;varvideoElement=document.createElement("video");varhasVideo=!!videoElement["canPlayType"];varogg=false;varh264=false;if(hasVideo){ogg=videoElement.can

7、PlayType('video/ogg;codecs="theora,vorbis"')

8、

9、"no";h264=videoElement.canPlayType('video/mp4;codecs="avc1.42E01E,mp4a.40.2"')

10、

11、"no";}$("videoFlag").innerHTML=""+hasVideo;if(hasVideo){varvStyle=document.styleSheets[0].cssRules[0].style;vStyle.display="b

12、lock";}$("h264Flag").innerHTML=""+h264;$("oggFlag").innerHTML=""+ogg;}目前已经出现了大量新特性和标准，成为了HTML5标准的一部分。本文重点将放在几个最有用的特性上。清单1中的脚本探测到了四个新特性：Webworker（多线程）地理定位数据库存储本地视频回放这个脚本的开头显示了用户浏览器的用户代理。它通常是一个惟一标识此浏览器的字符串，但它很容易被篡改。对于这个应用程序它已经足够好了。下一步是开始检测特性。首先要