久久久亚洲欧洲日产国码二区,成av免费大片黄在线观看

簡體中文(ZH-CN) English(EN) 繁體中文(ZH-TW) 日本語(JA) ???(KO) Melayu(MS) Fran?ais(FR) Deutsch(DE)

direktori cari

導(dǎo)論前言為什么學(xué)習(xí)JavaScript JavaScript的歷史基本語法語法概述數(shù)值字符串對象數(shù)組函數(shù) 運算符數(shù)據(jù)類型轉(zhuǎn)換錯誤處理機制 JavaScript 編程風(fēng)格標(biāo)準(zhǔn)庫 Object對象包裝對象和Boolean對象 Number對象 String對象 Math對象 Date對象 RegExp對象 JSON對象 ArrayBuffer：類型化數(shù)組面向?qū)ο缶幊?/a> 概述封裝繼承模塊化編程 DOM Node節(jié)點 document節(jié)點 Element對象 Text節(jié)點和DocumentFragment節(jié)點 Event對象 CSS操作 Mutation Observer 瀏覽器對象瀏覽器的JavaScript引擎定時器 window對象 history對象 Ajax 同域限制和window.postMessage方法 Web Storage：瀏覽器端數(shù)據(jù)儲存機制 IndexedDB：瀏覽器端數(shù)據(jù)庫 Web Notifications API Performance API 移動設(shè)備API HTML網(wǎng)頁元素 Canvas API SVG 圖像表單文件和二進制數(shù)據(jù)的操作 Web Worker 服務(wù)器發(fā)送事件 Page Visibility API Fullscreen API：全屏操作 Web Speech requestAnimationFrame WebSocket WebRTC Web Components HTML網(wǎng)頁的API HTML網(wǎng)頁元素 Canvas API SVG 圖像表單文件和二進制數(shù)據(jù)的操作 Web Worker 服務(wù)器發(fā)送事件 Page Visibility API Fullscreen API：全屏操作 Web Speech requestAnimationFrame WebSocket WebRTC Web Components 開發(fā)工具 console對象 PhantomJS Bower：客戶端庫管理工具 Grunt：任務(wù)自動管理工具 Gulp：任務(wù)自動管理工具 Browserify：瀏覽器加載Node.js模塊 RequireJS和AMD規(guī)范 Source Map JavaScript 程序測試 JavaScript高級語法 Promise對象有限狀態(tài)機 MVC框架與Backbone.js 嚴(yán)格模式 ECMAScript 6 介紹附錄 JavaScript API列表

?
Dokumen ini menggunakan Manual laman web PHP Cina Lepaskan

watak

為了更好地為移動設(shè)備服務(wù)，HTML 5推出了一系列針對移動設(shè)備的API。

Viewport
Geolocation API

getCurrentPosition方法
watchPosition方法和clearWatch方法

Vibration API
Luminosity API
Orientation API
參考鏈接

Viewport

Viewport指的是網(wǎng)頁的顯示區(qū)域，也就是不借助滾動條的情況下，用戶可以看到的部分網(wǎng)頁大小，中文譯為“視口”。正常情況下，viewport和瀏覽器的顯示窗口是一樣大小的。但是，在移動設(shè)備上，兩者可能不是一樣大小。

比如，手機瀏覽器的窗口寬度可能是640像素，這時viewport寬度就是640像素，但是網(wǎng)頁寬度有950像素，正常情況下，瀏覽器會提供橫向滾動條，讓用戶查看窗口容納不下的310個像素。另一種方法則是，將viewport設(shè)成950像素，也就是說，瀏覽器的顯示寬度還是640像素，但是網(wǎng)頁的顯示區(qū)域達(dá)到950像素，整個網(wǎng)頁縮小了，在瀏覽器中可以看清楚全貌。這樣一來，手機瀏覽器就可以看到網(wǎng)頁在桌面瀏覽器上的顯示效果。

viewport縮放規(guī)則，需要在HTML網(wǎng)頁的head部分指定。

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
</head>

上面代碼指定，viewport的縮放規(guī)則是，縮放到當(dāng)前設(shè)備的屏幕寬度（device-width），初始縮放比例（initial-scale）為1倍，禁止用戶縮放（user-scalable）。

viewport 全部屬性如下。

width: viewport寬度
height: viewport高度
initial-scale: 初始縮放比例
maximum-scale: 最大縮放比例
minimum-scale: 最小縮放比例
user-scalable: 是否允許用戶縮放

其他的例子如下。

<meta name = "viewport" content = "width = 320,
       initial-scale = 2.3, user-scalable = no">

Geolocation API

Geolocation接口用于獲取用戶的地理位置。它使用的方法基于GPS或者其他機制（比如IP地址、Wifi熱點、手機基站等）。

下面的方法，可以檢查瀏覽器是否支持這個接口。

if(navigator.geolocation) { 
   // 支持
} else {
   // 不支持
}

這個API的支持情況非常好，所有瀏覽器都支持（包括IE 9+），所以上面的代碼不是很必要。

getCurrentPosition方法

getCurrentPosition方法，用來獲取用戶的地理位置。使用它需要得到用戶的授權(quán)，瀏覽器會跳出一個對話框，詢問用戶是否許可當(dāng)前頁面獲取他的地理位置。必須考慮兩種情況的回調(diào)函數(shù)：一種是同意授權(quán)，另一種是拒絕授權(quán)。如果用戶拒絕授權(quán)，會拋出一個錯誤。

navigator.geolocation.getCurrentPosition(geoSuccess,geoError);

上面代碼指定了處理當(dāng)前地理位置的兩個回調(diào)函數(shù)。

（1）同意授權(quán)

如果用戶同意授權(quán)，就會調(diào)用geoSuccess。

function geoSuccess(event) { 
   console.log(event.coords.latitude + ', ' + event.coords.longitude);
}

geoSuccess的參數(shù)是一個event對象。event有兩個屬性：timestamp和coords。timestamp屬性是一個時間戳，返回獲得位置信息的具體時間。coords屬性指向一個對象，包含了用戶的位置信息，主要是以下幾個值：

coords.latitude：緯度
coords.longitude：經(jīng)度
coords.accuracy：精度
coords.altitude：海拔
coords.altitudeAccuracy：海拔精度（單位：米）
coords.heading：以360度表示的方向
coords.speed：每秒的速度（單位：米）

大多數(shù)桌面瀏覽器不提供上面列表的后四個值。

（2）拒絕授權(quán)

如果用戶拒絕授權(quán)，就會調(diào)用getCurrentPosition方法指定的第二個回調(diào)函數(shù)geoError。

function geoError(event) { 
   console.log("Error code " + event.code + ". " + event.message);
}

geoError的參數(shù)也是一個event對象。event.code屬性表示錯誤類型，有四個值：

0：未知錯誤，瀏覽器沒有提示出錯的原因，相當(dāng)于常量event.UNKNOWN_ERROR。
1：用戶拒絕授權(quán)，相當(dāng)于常量event.PERMISSION_DENIED。
2：沒有得到位置，GPS或其他定位機制無法定位，相當(dāng)于常量event.POSITION_UNAVAILABLE。
3：超時，GPS沒有在指定時間內(nèi)返回結(jié)果，相當(dāng)于常量event.TIMEOUT。

(3)設(shè)置定位行為

getCurrentPosition方法還可以接受一個對象作為第三個參數(shù)，用來設(shè)置定位行為。

var option = {
            enableHighAccuracy : true,
            timeout : Infinity,
            maximumAge : 0
        };

navigator.geolocation.getCurrentPosition(geoSuccess, geoError, option);

這個參數(shù)對象有三個成員：

enableHighAccuracy：如果設(shè)為true，就要求客戶端提供更精確的位置信息，這會導(dǎo)致更長的定位時間和更大的耗電，默認(rèn)設(shè)為false。
Timeout：等待客戶端做出回應(yīng)的最大毫秒數(shù)，默認(rèn)值為Infinity（無限）。
maximumAge：客戶端可以使用緩存數(shù)據(jù)的最大毫秒數(shù)。如果設(shè)為0，客戶端不讀取緩存；如果設(shè)為infinity，客戶端只讀取緩存。

watchPosition方法和clearWatch方法

watchPosition方法可以用來監(jiān)聽用戶位置的持續(xù)改變，使用方法與getCurrentPosition方法一樣。

var watchID = navigator.geolocation.watchPosition(geoSuccess,geoError, option);

一旦用戶位置發(fā)生變化，就會調(diào)用回調(diào)函數(shù)geoSuccess。這個回調(diào)函數(shù)的事件對象，也包含timestamp和coords屬性。

watchPosition和getCurrentPosition方法的不同之處在于，前者返回一個表示符，后者什么都不返回。watchPosition方法返回的標(biāo)識符，用于供clearWatch方法取消監(jiān)聽。

navigator.geolocation.clearWatch(watchID);

Vibration API

Vibration接口用于在瀏覽器中發(fā)出命令，使得設(shè)備振動。顯然，這個API主要針對手機，適用場合是向用戶發(fā)出提示或警告，游戲中尤其會大量使用。由于振動操作很耗電，在低電量時最好取消該操作。

使用下面的代碼檢查該接口是否可用。目前，只有Chrome和Firefox的Android平臺最新版本支持它。

navigator.vibrate = navigator.vibrate 
                    || navigator.webkitVibrate 
                    || navigator.mozVibrate 
                    || navigator.msVibrate;

if (navigator.vibrate) {
    // 支持
}

vibrate方法可以使得設(shè)備振動，它的參數(shù)就是振動持續(xù)的毫秒數(shù)。

navigator.vibrate(1000);

上面的代碼使得設(shè)備振動1秒鐘。

vibrate方法還可以接受一個數(shù)組作為參數(shù)，表示振動的模式。偶數(shù)位置的數(shù)組成員表示振動的毫秒數(shù)，奇數(shù)位置的數(shù)組成員表示等待的毫秒數(shù)。

navigator.vibrate([500, 300, 100]);

上面代碼表示，設(shè)備先振動500毫秒，然后等待300毫秒，再接著振動500毫秒。

vibrate是一個非阻塞式的操作，即手機振動的同時，JavaScript代碼繼續(xù)向下運行。要停止振動，只有將0毫秒或者一個空數(shù)組傳入vibrate方法。

navigator.vibrate(0);
navigator.vibrate([]);

如果要讓振動一直持續(xù)，可以使用setInterval不斷調(diào)用vibrate。

var vibrateInterval;

function startVibrate(duration) {
    navigator.vibrate(duration);
}

function stopVibrate() {
    if(vibrateInterval) clearInterval(vibrateInterval);
    navigator.vibrate(0);
}

function startPeristentVibrate(duration, interval) {
    vibrateInterval = setInterval(function() {
        startVibrate(duration);
    }, interval);
}

Luminosity API

Luminosity API用于屏幕亮度調(diào)節(jié)，當(dāng)移動設(shè)備的亮度傳感器感知外部亮度發(fā)生顯著變化時，會觸發(fā)devicelight事件。目前，只有Firefox部署了這個API。

window.addEventListener('devicelight', function(event) {
  console.log(event.value + 'lux');
});

上面代碼表示，devicelight事件的回調(diào)函數(shù)，接受一個事件對象作為參數(shù)。該對象的value屬性就是亮度的流明值。

這個API的一種應(yīng)用是，如果亮度變強，網(wǎng)頁可以顯示黑底白字，如果亮度變?nèi)酰W(wǎng)頁可以顯示白底黑字。

window.addEventListener('devicelight', function(e) {
  var lux = e.value;

  if(lux < 50) {
    document.body.className = 'dim';
  }
  if(lux >= 50 && lux <= 1000) {
    document.body.className = 'normal';
  }
  if(lux > 1000)  {
    document.body.className = 'bright';
  } 
});

CSS下一個版本的Media Query可以單獨設(shè)置亮度，一旦瀏覽器支持，就可以用來取代Luminosity API。

@media (light-level: dim) {
  /* 暗光環(huán)境 */
}

@media (light-level: normal) {
  /* 正常光環(huán)境 */
}

@media (light-level: washed) {
  /* 明亮環(huán)境 */
}

Orientation API

Orientation API用于檢測手機的擺放方向（豎放或橫放）。

使用下面的代碼檢測瀏覽器是否支持該API。

if (window.DeviceOrientationEvent) {
  // 支持
} else {
  // 不支持
}

一旦設(shè)備的方向發(fā)生變化，會觸發(fā)deviceorientation事件，可以對該事件指定回調(diào)函數(shù)。

window.addEventListener("deviceorientation", callback);

回調(diào)函數(shù)接受一個event對象作為參數(shù)。

function callback(event){
    console.log(event.alpha);
    console.log(event.beta);
    console.log(event.gamma);
}

上面代碼中，event事件對象有alpha、beta和gamma三個屬性，它們分別對應(yīng)手機擺放的三維傾角變化。要理解它們，就要理解手機的方向模型。當(dāng)手機水平擺放時，使用三個軸標(biāo)示它的空間位置：x軸代表橫軸、y軸代表豎軸、z軸代表垂直軸。event對象的三個屬性就對應(yīng)這三根軸的旋轉(zhuǎn)角度。