自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

HTML 5基礎(chǔ)之HTML 5 API的威力

開發(fā) 后端 前端
HTML5反映了在網(wǎng)絡(luò)上和在云端實(shí)施業(yè)務(wù)的方式的巨大變化。本篇文章分三部分介紹了HTML5的API,使用一個(gè)例子頁面來說明它們的功能。

本篇文章是一個(gè)由四個(gè)部分構(gòu)成的系列的第三部分,該文章系列旨在尋找并突出說明HTML5中的變化。其開始先介紹新的標(biāo)簽和頁面的組織,接著提供一些網(wǎng)頁設(shè)計(jì)方面的高層面信息,然后是表單的創(chuàng)建,以及API的使用及其價(jià)值所在,最后是Canvas提供的一些頗具創(chuàng)意的可能做法。這一第三部分介紹了HTML5的API,使用一個(gè)例子頁面來說明它們的功能。

那么,什么是API呢?

應(yīng)用編程接口(application program interface,API)是訪問一個(gè)軟件應(yīng)用的編程指令和標(biāo)準(zhǔn)的集合。通過使用API,你就可以設(shè)計(jì)出由API提供的服務(wù)來驅(qū)動(dòng)的產(chǎn)品。

HTML5擁有一些新的API,例如:

1. 一個(gè)與新的畫布元素一起使用的2D繪圖API,用于渲染圖形或是其他的視覺圖像

2. 一個(gè)支持離線web應(yīng)用的緩存機(jī)制的API

3. 一個(gè)播放視頻和音頻的API,與新的視頻和音頻元素一起使用

4. 一個(gè)歷史記錄API,其把瀏覽歷史變成可訪問的,并允許把頁面添加到這一歷史中

5. 一個(gè)和draggable屬性一起使用的拖放API

6. 一個(gè)和contenteditable屬性一起使用的編輯API

7. 鍵-值對(duì)以及內(nèi)嵌的SQL數(shù)據(jù)庫的客戶端存儲(chǔ),使用了JavaScript API

本篇文章重點(diǎn)關(guān)注兩個(gè)API:Geolocation和Web Worker,首先對(duì)這些API本身進(jìn)行分析,然后創(chuàng)建一個(gè)包含這兩個(gè)API的頁面。

無處不在的業(yè)務(wù):Geolocation

Geolocation API被用來確定和分享地理位置,API返回經(jīng)度和緯度坐標(biāo)——這是企業(yè)可用來在這一坐標(biāo)附近的區(qū)域提供服務(wù)的信息,這類服務(wù)通常被稱作基于位置的服務(wù)(location-based service, LBS)。

LBS以地理數(shù)據(jù)源為參考,這些地理數(shù)據(jù)源被用來標(biāo)識(shí)被監(jiān)控儀器的物理位置,從而識(shí)別出與這一位置相關(guān)的人。這一功能賦予感興趣的各方與這一個(gè)人進(jìn)行交互的機(jī)會(huì),這種交互是基于一些以地理位置為中心的興趣點(diǎn)市場來進(jìn)行的。

商業(yè)實(shí)際上是為客戶創(chuàng)造品質(zhì)、實(shí)用性和價(jià)值,并同時(shí)為利益相關(guān)者、債權(quán)人、股東、員工和供應(yīng)商創(chuàng)造經(jīng)濟(jì)和金融利益。以地理位置為驅(qū)動(dòng)力的LBS使得跟蹤和監(jiān)控一個(gè)包裹或是使用了非瀏覽器設(shè)備或是瀏覽器的個(gè)人變得相當(dāng)容易起來。從商業(yè)化的角度來說,地理位置所涉及的就是使用地理資產(chǎn)來確定某人或是某物所處的位置,然后把這一特定的一組信息出售給想要把這些信息用于社會(huì)、商業(yè)或是其他目的的的任何人,只要信息的擁有者的這種做法是法律許可的就可以了。

地理定位(geolocation)的工作方式

Geolocation API基于navigator這一全局對(duì)象的一個(gè)新屬性:navigator.geolocation,這一JavaScript的navigator對(duì)象提供了一些關(guān)于訪問者的瀏覽器和系統(tǒng)的有用信息。Geolocation可以確定使用了IP地址、基于web的數(shù)據(jù)庫、無線網(wǎng)絡(luò)連接,以及三角定位或是GPS技術(shù)的訪問者的經(jīng)度和緯度。應(yīng)該要注意的一點(diǎn)是,由Geolocation提供的信息的準(zhǔn)確性會(huì)基于獲取信息的手段而發(fā)生變化。偶然情況下,在一些位置上,你有可能不能獲得明確的地理位置讀數(shù)或是一點(diǎn)數(shù)據(jù)都接收不到。

腳本可使用navigator.geolocation對(duì)象來確定與用戶的宿主設(shè)備相關(guān)的位置信息,在檢索到位置信息之后,一個(gè)位置對(duì)象就會(huì)被創(chuàng)建出來,并使用這些數(shù)據(jù)做填充。

navigator.geolocation對(duì)象有三個(gè)方法:

1. getCurrentPosition()

2. watchPosition()

3. clearWatch()

getCurrentPosition()方法

getCurrentPosition()方法檢索用戶的當(dāng)前位置,但只檢索一次。當(dāng)該方法被腳本調(diào)用時(shí),方法以異步的方式來嘗試獲取宿主設(shè)備的當(dāng)前位置。異步通信意味著發(fā)送者和接收者并未同時(shí)地加入到這一通信過程中,使用異步通信能讓瀏覽器繼續(xù)進(jìn)行其他方面的活動(dòng),這樣它就無需等待來自接收實(shí)體的響應(yīng)。

 

 

 

 

getCurrentPosition()方法最多可以有三個(gè)參數(shù):

1. geolocationSuccess:帶回當(dāng)前位置的回調(diào)(callback)(必需的)

2. geolocationError. 有錯(cuò)誤發(fā)生時(shí)使用的回調(diào)(可選的)

3. geolocationOptions. 地理位置選項(xiàng)(可選的)

navigator.geolocation.getCurrentPositon()方法使用一個(gè)Position對(duì)象作為參數(shù)來把宿主設(shè)備的當(dāng)前位置返回給geolocationSuccess這一回調(diào),如果有錯(cuò)誤發(fā)生的話,geolocationError回調(diào)會(huì)使用一個(gè)PositionError對(duì)象來做調(diào)用。你可以設(shè)置geolocationOptions的三個(gè)屬性:

enableHighAccuracy、timeout和maximumAge,這些可選屬性相應(yīng)的作用分別是啟用了高的精確性,如果設(shè)備支持這種高精確性的話;一個(gè)超時(shí)時(shí)段,這是位置應(yīng)該被返回的最長等待時(shí)間;以及一個(gè)最大的時(shí)間數(shù),緩存的位置在這一時(shí)間段內(nèi)可被使用。

getCurrentPosition()方法的調(diào)用如下所示:

  1. void navigator.geolocation.getCurrentPosition(  
  2. geolocationSuccess, geolocationError, geolocationOptions); 

watchPosition()方法

watchPosition()方法定期輪詢用戶的位置,查看用戶的位置是否發(fā)生改變。其最多可帶三個(gè)參數(shù)。

當(dāng)watchPosition被調(diào)用時(shí),其異步地啟動(dòng)一個(gè)查看過程,這一過程涉及了一個(gè)新的Position對(duì)象的獲取和一個(gè)watchID的創(chuàng)建。如果這一獲取操作是成功的,則相關(guān)的使用一個(gè)Position對(duì)象作為參數(shù)的geolocationSuccess就會(huì)被調(diào)用。在失敗時(shí)涉及的操作則是使用一個(gè)非空的geolocationError參數(shù)來調(diào)用該方法,watchPosition方法使用一個(gè)PositionError對(duì)象作為參數(shù)來生成geolocationError。當(dāng)設(shè)備的位置發(fā)生改變時(shí),一個(gè)合適的帶有新的Position對(duì)象的回調(diào)就會(huì)被調(diào)用。

watchPosition()方法的調(diào)用如下所示:

  1. long navigator.geolocation.watchPosition(  
  2. geolocationSuccess, geolocationError, geolocationOptions);  

 

 

clearWatch()方法

clearWatch()方法終止正在進(jìn)行的watchPosition(),該方法只能帶一個(gè)參數(shù)。在調(diào)用時(shí),其找到之前已經(jīng)開始了的watchID參數(shù)并立即停止它。

clearWatch()方法的調(diào)用如下所示:

  1. void navigator.geolocation.clearWatch(watchID)  

Geolocation數(shù)據(jù):Position對(duì)象

Geolocation API返回一個(gè)地理上的Position對(duì)象,該對(duì)象有兩個(gè)屬性:timestamp和coords。timestamp屬性表示地理位置數(shù)據(jù)的創(chuàng)建時(shí)間,coords屬性又包含七個(gè)屬性:

1. coords.latitude:估計(jì)緯度

2. coords.longitude:估計(jì)經(jīng)度

3. coords.altitude:估計(jì)高度

4. coords.accuracy:所提供的以米為單位的經(jīng)度和緯度估計(jì)的精確度

5. coords.altitudeAccuracy:所提供的以米為單位的高度估計(jì)的精確度

6. coords.heading: 宿主設(shè)備當(dāng)前移動(dòng)的角度方向,相對(duì)于正北方向順時(shí)針計(jì)算

7. coords.speed:以米每秒為單位的設(shè)備的當(dāng)前對(duì)地速度

這些屬性中只有三項(xiàng)是保證有的:coords.latitude、coords.longitude和coords.accuracy,其余的返回null,這取決于設(shè)備的能力和其所采用的后端定位服務(wù)器。如果可能的話,heading和speed屬性可以基于用戶之前的位置計(jì)算出來。

發(fā)揮救援作用的web worker

web worker(web工作線程)補(bǔ)救了并發(fā)所引起的問題,web worker是HTML5家族對(duì)JavaScript的單線程問題的回答:它們在與主頁面分開的線程中運(yùn)行處理過程,保留頁面以用于主要的功能,比如說維持一個(gè)穩(wěn)定的UI等。

一個(gè)web worker是一個(gè)在后臺(tái)加載并執(zhí)行的JavaScript文件,這些worker允許你動(dòng)態(tài)地加載一個(gè)JavaScript,然后使用后臺(tái)的不會(huì)影響到UI的進(jìn)程來執(zhí)行腳本。web worker的訪問是受限的,其只允許傳遞字符串。因?yàn)閣eb worker不使用瀏覽器的UI線程,所以他們不允許訪問DOM。worker可以使用這兩個(gè)worker全局范圍的self和this引用,worker和父頁面的通信是通過使用事件模型和postMessage()方法來實(shí)現(xiàn)的。

因?yàn)閣eb worker有多線程行為,因此它們只能訪問JavaScript功能的一個(gè)子集,web worker可以:

1. 訪問navigator對(duì)象

2. 使用只讀的位置對(duì)象

3. 執(zhí)行XMLHttpRequest以發(fā)送HTTP或是HTTPS請求

4. 使用setTimeout()/clearTimeout()和setInterval()/clearInterval()來設(shè)置時(shí)間或是時(shí)間間隔

5. 訪問應(yīng)用的緩存

6. 使用 importScripts()方法來導(dǎo)入外部的腳本

7. 產(chǎn)生其他的web worker(子worker(subworker)必需有著與主頁面一樣的來源,且必須放置于與父worker同樣的地點(diǎn)。

web worker有兩種類型:專用型的worker和共享型的worker。

專用型web worker

專用型worker與創(chuàng)建它的腳本鏈接在一起,它可以與其他的worker或是瀏覽器組件通信,但是他不能與DOM通信。

專用型worker的創(chuàng)建方法是把一個(gè)JavaScript文件名傳遞給一個(gè)新的worker實(shí)例,通過指定worker的執(zhí)行腳本URI來使用Worker()構(gòu)造函數(shù)創(chuàng)建一個(gè)新的worker。要?jiǎng)?chuàng)建一個(gè)專用型worker的話,輸入下面給出的代碼,這一代碼創(chuàng)建了一個(gè)新的專用的Worker對(duì)象:

  1. var worker = new Worker('worker.js'); 

共享型web worker

共享型web worker和專用型worker一樣,不能訪問DOM,并且是受限地訪問窗體的屬性。共享型web worker只能與其他來自同一個(gè)域的共享型web worker通信,它的創(chuàng)建方法是把一個(gè)JavaScript名稱傳遞給一個(gè)新的共享型worker的實(shí)例來創(chuàng)建。

頁面腳本可以與共享型web worker通信,而然,與專用型web worker不同的是,通信是通過使用一個(gè)端口(port)對(duì)象并附加上一個(gè)消息事件處理程序來進(jìn)行的。另外,在使用第一個(gè)postMessage()之前,你必須要調(diào)用端口的start()方法。

在收到web worker腳本的首個(gè)消息之后,共享型web worker把一個(gè)事件處理程序附加到激活的端口上。一般情況下,處理程序會(huì)運(yùn)行自己的postMessage()方法來把一個(gè)消息返回給調(diào)用代碼,接著端口的start()方法生成一個(gè)有效的消息進(jìn)程。

為了創(chuàng)建一個(gè)共享型web worker,你必須要?jiǎng)?chuàng)建一個(gè)SharedWorker對(duì)象而不是一個(gè)Worker對(duì)象。下面的代碼說明了如何創(chuàng)建一個(gè)新的SharedWorker對(duì)象:

  1. var worker = new SharedWorker('worker.js'); 

構(gòu)造一個(gè)包含了這兩個(gè)API的頁面

你將設(shè)計(jì)一個(gè)包含了Geolocation和Web Worker API的基本工作模式的頁面,此外,你還會(huì)用到Google Map API來渲染作為地圖收集來的數(shù)據(jù)。

頁面的組織如圖1所示,其包含了一個(gè)使用< header>< /header>標(biāo)簽來創(chuàng)建的Header區(qū),一個(gè)使用< section>< /section>標(biāo)簽來創(chuàng)建的Section區(qū),以及一個(gè)使用< aside>< /aside>標(biāo)簽來創(chuàng)建的Aside區(qū)。

圖1. API頁面的布局

HTML 5


< section>和< aside>區(qū)包含了API,Section區(qū)包含了Geolocation API,Aside區(qū)包含了web worker,其用來計(jì)算素?cái)?shù)。

在執(zhí)行時(shí),網(wǎng)頁的顯示如圖2所示。如果要查看地理位置數(shù)據(jù)的話,你首先必須要同意共享你的信息。web worker在頁面加載時(shí)啟動(dòng),如果你想看一看找到的素?cái)?shù)的話,點(diǎn)擊Display Web Worker按鈕。

圖2. API網(wǎng)頁

HTML 5 

#p#

HTML文件

HTML文件一開始的內(nèi)容是清單1所示的標(biāo)準(zhǔn)的HTML5信息,< head>部分包含了一個(gè)到Google Maps API的調(diào)用,把sensor的值設(shè)置為False。使用Google Maps API對(duì)你狀態(tài)的要求是,你的應(yīng)用是否在使用一個(gè)傳感器,比如說GPS來確立位置。你必須為你的Google Maps API應(yīng)用聲明一個(gè)值為True或是False的sensor參數(shù),sensor的值必須被聲明。< head>標(biāo)簽還包含了到JavaScript和CSS3文件的鏈接,這些文件被用來處理網(wǎng)頁的功能和格式。

清單1. HTML文件開始部分的內(nèi)容

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4. <title>Basic GeoLocation Map & Web Worker Prime Number Calculator</title> 
  5. <script src="http://maps.google.com/maps/api/js?sensor=false" kesrc="http://maps.google.com/maps/api/js?sensor=false"   
  6. type="text/javascript">< /script> 
  7. <LINK href="GeolocationWebWorker.css" kesrc="GeolocationWebWorker.css" rel="stylesheet" type="text/css"> 
  8. <script src="HTML-Part3-GeolocationWebWorker.js" kesrc="HTML-Part3-GeolocationWebWorker.js" type="text/javascript">< /script> 
  9. </head> 

<body>標(biāo)簽包含了onLoad事件,該事件調(diào)用地理定位的初始化函數(shù),如清單2所示。該函數(shù)檢驗(yàn)地理定位是否可在這一瀏覽器中使用,這一初始化函數(shù)放在JavaScript文件中。如果瀏覽器可以和Geolocation API通信的話,地圖就會(huì)被渲染。

清單2. 初始化Geolocation

  1. <body onLoad="initGeoApp();"> 
  2. <header> 
  3. <hgroup> 
  4. <h1>Geolocation & Web Worker</h1> 
  5. <h2>Making it work</h2> 
  6. </hgroup> 
  7. </header> 

清單3中給出的< section>標(biāo)簽包含了navigator.geolocation對(duì)象的輸出顯示信息,API返回的經(jīng)度和緯度被用來創(chuàng)建地圖畫布,Position的coords數(shù)據(jù)也通過使用< span>< /span>標(biāo)簽顯示出來。

清單3. Geolocation的地圖和位置

  1. <section> 
  2. <p>This is the geolocation example map.</p> 
  3. <div id="map_canvas" ></div> 
  4.  
  5. <p>This is the output from the navigator.geolocation object.</p> 
  6. <table> 
  7. <tr> 
  8. <td>accuracy:</td> 
  9. <td>< span id="accuracyOutput"></span></td> 
  10. </tr> 
  11. <tr> 
  12. <td>altitude:< /td> 
  13. <td><span id="altitudeOutput"></span></td> 
  14. </tr> 
  15. <tr> 
  16. <td>altitudeAccuracy:</td> 
  17. <td>< span id="altitudeAccuracyOutput"></span></td> 
  18. </tr> 
  19. <tr> 
  20. <td>heading:</td> 
  21. <td><span id="headingOutput"></span></td> 
  22. </tr> 
  23. <tr> 
  24. <td>latitude:</td> 
  25. <td><span id="latitudeOutput"></span></td> 
  26. </tr> 
  27. <tr> 
  28. <td>longitude:</td> 
  29. <td><span id="longitudeOutput"></span></td> 
  30. </tr> 
  31. <tr> 
  32. <td>speed:</td> 
  33. <td><span id="speedOutput"></span></td> 
  34. </tr> 
  35. </table> 
  36. </section> 
  37. <aside> 
  38. <p>This is the Web Worker. </p> 
  39. <p>Prime number calculation result:  
  40. <output id="result"></output></p> 

Web Worker計(jì)算素?cái)?shù),<output>這一新的標(biāo)簽被用來顯示web worker提供的計(jì)算結(jié)果,<output>標(biāo)簽中的ID與JavaScript用來標(biāo)識(shí)其要執(zhí)行的計(jì)算的ID是相同的。在<span>和<output>標(biāo)簽中用到的ID使得它們在DOM中是可訪問的,沒有引用ID的話,JavaScript就不知道要使用哪一個(gè)<span>和<output>。清單4給出了web worker的輸出。

清單4. web worker的輸出

  1. <aside> 
  2. <p>This is the Web Worker. </p> 
  3. <p>Prime number calculation result:  
  4. <output id="result"></output></p> 

<input>中用到的onClick首先顯示由素?cái)?shù)(Prime Number)web worker計(jì)算出來的值,而第二個(gè)onClick則是被用來停止web worker的。清單5給出了代碼。在按鈕被點(diǎn)擊時(shí),displayWorker()函數(shù)引發(fā)顯示web worker計(jì)算出來的結(jié)果。web worker在頁面載入后開始計(jì)算素?cái)?shù)。

清單5. web worker的input標(biāo)簽

  1. <input type="button" value="Display Web Worker" onClick="displayWorker();"> 
  2. <input type="button" value="Stop Web Worker" onClick="stopWorker();"> 
  3.  
  4. </aside> 
  5. </body> 
  6. </html>  

#p#

JavaScript文件

JavaScript是例子頁面上展示的API背后的引擎,Geolocation API是通過調(diào)用initGeoApp()函數(shù)來初始化的,這就是由< body>標(biāo)簽中的onLoad()事件來執(zhí)行的函數(shù):其決定了你的瀏覽器是否能夠使用地理位置數(shù)據(jù)(參見清單6)。如果你的瀏覽器可以使用地理位置數(shù)據(jù)的話,則Geolocation API就會(huì)被調(diào)用。如果調(diào)用成功的話,就會(huì)使用Position中的屬性值來繪制地圖,然后屬性的值會(huì)接在地圖的后面打印出來。

清單6. Geolocation的函數(shù)

  1. function initGeoApp()  
  2. {  
  3. if( navigator.geolocation )  
  4. {   
  5. navigator.geolocation.getCurrentPosition( success, failure);  
  6. }  
  7. else  
  8. {  
  9. alert("Your browser does not support geolocation services.");  
  10. }  

基于你在HTML文件中提供的ID,document.getElementById被用來檢索值。document.getElementById是文檔對(duì)象的一個(gè)方法,應(yīng)該通過使用document.getElementById來訪問,如清單7所示。Position的屬性值存放在這里,這樣它們就能夠用來在要渲染的地圖下面打印屬性。

清單7. 使用getElementById來獲取coords的值

  1. var map;  
  2. function success(position)  
  3. {  
  4. document.getElementById("accuracyOutput").innerHTML =   
  5. position.coords.accuracy;  
  6. document.getElementById("altitudeOutput").innerHTML =   
  7. position.coords.aktitude;  
  8. document.getElementById("altitudeAccuracyOutput").innerHTML =   
  9. position.coords.altitudeAccuracy;  
  10. document.getElementById("headingOutput").innerHTML =   
  11. position.coords.heading;  
  12. document.getElementById("latitudeOutput").innerHTML =   
  13. position.coords.latitude;  
  14. document.getElementById("longitudeOutput").innerHTML =   
  15. position.coords.longitude;  
  16. document.getElementById("speedOutput").innerHTML =   
  17. position.coords.speed; 

接下來的這部分定義的是Google Map API的LatLng對(duì)象的坐標(biāo),如清單8所示。Google Map API LatLng對(duì)象提供了需要用來創(chuàng)建地圖的坐標(biāo)信息,你可以設(shè)置縮放級(jí)別和其他的幾個(gè)選項(xiàng),這些選項(xiàng)創(chuàng)建了呈現(xiàn)給用戶的地圖的外觀。

清單8. Google Map的選項(xiàng)

  1. var coordinates = new google.maps.LatLng(position.coords.latitude,   
  2. position.coords.longitude);  
  3.  
  4. var myOptions =  
  5. {  
  6. zoom: 14,  
  7. center: coordinates,  
  8. mapTypeControl: false,  
  9. navigationControlOptions: {style: google.maps.NavigationControlStyle.small},  
  10. mapTypeId: google.maps.MapTypeId.ROADMAP   
  11. }; 

注意一下mapTypeID這一選項(xiàng),該選項(xiàng)選擇的是ROADMAP,該值所呈現(xiàn)的地圖的樣子如圖2所示。該選項(xiàng)有四個(gè)可選的值:

1. ROADMAP

2. HYBRID

3. SATELLITE

4. TERRAIN

圖3給出了選擇HYBRID選項(xiàng)時(shí)網(wǎng)頁看起來的樣子。

圖3. 使用混合式地圖的API網(wǎng)頁。

HTML 5


map_canvas這一ID被用來創(chuàng)建地圖,該ID是HTML文件中的< div>的ID。

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
在地圖上放一個(gè)初始位置的標(biāo)記,清單9給出了這一代碼。

清單9. 放置一個(gè)初始的地圖標(biāo)記

  1. var marker = new google.maps.Marker({  
  2. position: coordinates,  
  3. map: map,  
  4. title: "You are here."  
  5. });  
  6. }  
  7.  
  8. function failure()  
  9. {  
  10. alert("Sorry, could not obtain location");  

web worker在頁面初始化之后就開始執(zhí)行。如果用戶想要顯示所執(zhí)行的計(jì)算的輸出的話,他/她可以點(diǎn)擊Display Web Worker按鈕,這將會(huì)調(diào)用displayWorker()函數(shù)。清單10給出了它的代碼。

清單10. web worker

  1. var worker = new Worker('PrimeNumberWebWorker.js');  
  2. function displayWorker()   
  3. {  
  4. worker.onmessage = function (event)   
  5. {   
  6. document.getElementById('result').innerHTML = event.data;  
  7. };  

如果用戶想要停止web worker的話,他/她可以點(diǎn)擊Stop Web Worker按鈕,這會(huì)調(diào)用清單11中給出的stopWorker()函數(shù)。

清單11. 終止worker

  1. function stopWorker()   
  2. {  
  3. worker.terminate();  

web worker文件

該文件是素?cái)?shù)計(jì)算器的web worker,其計(jì)算出每個(gè)素?cái)?shù)直到被終止執(zhí)行。清單12給出了它的代碼。

清單12. 計(jì)算素?cái)?shù)

  1. var n = 1;  
  2. search: while (true) {  
  3. n += 1;  
  4. for (var i = 2; i <= Math.sqrt(n); i += 1)  
  5. if (n % i == 0)  
  6. continue search;  
  7. postMessage(n);  
  8. }  

CSS3文件

清單13中給出的CSS3文件提供了HTML5頁面中顯示的格式。

清單13. CSS3描述

  1. * {font-family: Arial,Helvetica,sans-serif ;  
  2. }  
  3.  
  4. body {  
  5. margin: 0 300px 0 300px;  
  6. color: #990000;  
  7. background-color:#FFFFCC;  
  8. }  
  9.  
  10. header > hgroup h1 {  
  11. margin: 0 0 3px 0;  
  12. padding: 0;  
  13. text-align: center;  
  14. font-size: 30px;  
  15. }  
  16.  
  17.  
  18. header > hgroup h2 {  
  19. margin: 0 0 15px 0;  
  20. padding: 0;  
  21. text-align: center;  
  22. font-style: italic;  
  23. font-size: 12px;  
  24. }  
  25.  
  26.  
  27. header p {  
  28. margin: 0 0 20px 0 ;  
  29. padding: 0;  
  30. text-align: center;  
  31. font-size: 12px;  
  32. }  
  33.  
  34. aside {  
  35. width: 200px;  
  36. height: 175px;  
  37. margin: -450px 0 0 450px;  
  38. background-color: #990000;  
  39. padding: .5px 0 0 10px ;   
  40. color:#FFFFFF;  
  41. font-weight:bold;  
  42. }  
  43.  
  44. div {  
  45. width: 400px;   
  46. height: 250px;   


結(jié)論

文章系列的這一部分內(nèi)容研究了Geolocation和Web Worker API的實(shí)用性。選擇這兩個(gè)API是因?yàn)榘阉鼈兎旁谝黄鸺日f明了API使用的創(chuàng)新性又說明了實(shí)際上的可用性。對(duì)于HTML5規(guī)范在創(chuàng)建新的業(yè)務(wù)模型方面的使用來說,Geolocation是一個(gè)很好的例子。同樣,Web Worker的角色是JavaScript的并發(fā)性所固有的一些問題的解決方案。

這兩個(gè)API共同說明了一種用于商業(yè)和社會(huì)的HTML5使用模式的組合,因此,它們的功效說明了HTML5富互聯(lián)網(wǎng)應(yīng)用的特有便利性和一般管理手段。

下載

Example HTML, CSS3 and JavaScript files HTML5APIs.zip

原文:http://article.yeeyan.org/view/213582/205776

【編輯推薦】

  1. 29個(gè)非常實(shí)用的HTML 5實(shí)例、教程和技巧
  2. HTML 5怎么就成了RIA“殺手”?
  3. HTML 5來襲:Web前端開發(fā)面臨十字路口
  4. HTML 5離線存儲(chǔ)之Web SQL
  5. HTML 5可以做五件事情 超出你的想象
責(zé)任編輯:陳貽新 來源: 譯言網(wǎng)
相關(guān)推薦

2011-05-13 17:36:05

HTML

2012-03-07 10:04:11

HTML 5

2013-01-18 10:59:44

IBMdW

2010-09-03 08:58:01

HTML 5

2014-10-21 17:34:11

HTML5移動(dòng)設(shè)計(jì)

2011-04-11 10:14:47

HTML 5

2017-08-09 15:57:11

JavaScriptHtml5音頻

2014-08-28 10:16:17

HTML5

2012-05-02 10:28:16

HTML5

2012-05-23 13:00:37

HTML5

2011-08-09 09:06:43

HTML 5

2013-01-04 13:39:51

2013-01-24 10:26:04

HTML5HTML 5HTML5的未來

2012-02-23 10:32:19

HTML 5

2011-07-18 14:54:55

HTML 5

2011-04-02 09:25:43

HTML 5

2011-11-23 09:11:36

API

2011-06-07 15:14:09

HTML 5

2011-09-14 14:25:00

HTML 5

2011-06-15 09:38:56

HTML 5
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)