From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/th/web/api/bluetooth/index.html | 77 +++ .../api/bluetooth/onavailabilitychanged/index.html | 46 ++ files/th/web/api/cachestorage/index.html | 189 ++++++ files/th/web/api/geolocation/index.html | 142 +++++ files/th/web/api/geolocation_api/index.html | 92 +++ .../using_the_geolocation_api/index.html | 170 +++++ files/th/web/api/history_api/index.html | 249 ++++++++ files/th/web/api/index.html | 14 + files/th/web/api/indexeddb_api/index.html | 308 +++++++++ files/th/web/api/location/index.html | 217 +++++++ files/th/web/api/server-sent_events/index.html | 72 +++ files/th/web/api/webgl_api/index.html | 253 ++++++++ files/th/web/api/websockets_api/index.html | 101 +++ files/th/web/api/window/index.html | 689 +++++++++++++++++++++ files/th/web/api/xmlhttprequest/index.html | 186 ++++++ files/th/web/api/xrreferencespacetype/index.html | 78 +++ files/th/web/css/index.html | 106 ++++ files/th/web/css/margin/index.html | 227 +++++++ files/th/web/guide/graphics/index.html | 39 ++ files/th/web/guide/index.html | 27 + files/th/web/http/cors/errors/index.html | 76 +++ files/th/web/http/cors/index.html | 565 +++++++++++++++++ files/th/web/http/index.html | 227 +++++++ files/th/web/http/status/201/index.html | 41 ++ files/th/web/http/status/index.html | 171 +++++ files/th/web/index.html | 157 +++++ files/th/web/javascript/index.html | 103 +++ files/th/web/manifest/icons/index.html | 128 ++++ files/th/web/manifest/index.html | 119 ++++ .../add_to_home_screen/index.html | 211 +++++++ files/th/web/progressive_web_apps/index.html | 111 ++++ files/th/web/security/index.html | 238 +++++++ files/th/web/security/mixed_content/index.html | 85 +++ files/th/web/tutorials/index.html | 248 ++++++++ 34 files changed, 5762 insertions(+) create mode 100644 files/th/web/api/bluetooth/index.html create mode 100644 files/th/web/api/bluetooth/onavailabilitychanged/index.html create mode 100644 files/th/web/api/cachestorage/index.html create mode 100644 files/th/web/api/geolocation/index.html create mode 100644 files/th/web/api/geolocation_api/index.html create mode 100644 files/th/web/api/geolocation_api/using_the_geolocation_api/index.html create mode 100644 files/th/web/api/history_api/index.html create mode 100644 files/th/web/api/index.html create mode 100644 files/th/web/api/indexeddb_api/index.html create mode 100644 files/th/web/api/location/index.html create mode 100644 files/th/web/api/server-sent_events/index.html create mode 100644 files/th/web/api/webgl_api/index.html create mode 100644 files/th/web/api/websockets_api/index.html create mode 100644 files/th/web/api/window/index.html create mode 100644 files/th/web/api/xmlhttprequest/index.html create mode 100644 files/th/web/api/xrreferencespacetype/index.html create mode 100644 files/th/web/css/index.html create mode 100644 files/th/web/css/margin/index.html create mode 100644 files/th/web/guide/graphics/index.html create mode 100644 files/th/web/guide/index.html create mode 100644 files/th/web/http/cors/errors/index.html create mode 100644 files/th/web/http/cors/index.html create mode 100644 files/th/web/http/index.html create mode 100644 files/th/web/http/status/201/index.html create mode 100644 files/th/web/http/status/index.html create mode 100644 files/th/web/index.html create mode 100644 files/th/web/javascript/index.html create mode 100644 files/th/web/manifest/icons/index.html create mode 100644 files/th/web/manifest/index.html create mode 100644 files/th/web/progressive_web_apps/add_to_home_screen/index.html create mode 100644 files/th/web/progressive_web_apps/index.html create mode 100644 files/th/web/security/index.html create mode 100644 files/th/web/security/mixed_content/index.html create mode 100644 files/th/web/tutorials/index.html (limited to 'files/th/web') diff --git a/files/th/web/api/bluetooth/index.html b/files/th/web/api/bluetooth/index.html new file mode 100644 index 0000000000..74a1f52188 --- /dev/null +++ b/files/th/web/api/bluetooth/index.html @@ -0,0 +1,77 @@ +--- +title: Bluetooth +slug: Web/API/Bluetooth +tags: + - API + - Bluetooth + - Experimental + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web Bluetooth API +translation_of: Web/API/Bluetooth +--- +

{{APIRef("Bluetooth API")}}{{securecontext_header}}{{SeeCompatTable}}

+ +

The Bluetooth interface of the Web Bluetooth API returns a {{jsxref("Promise")}} to a {{domxref("BluetoothDevice")}} object with the specified options.

+ +

Interface

+ +
interface Bluetooth : EventTarget {
+  [SecureContext] Promise<boolean> getAvailability();
+  [SecureContext] attribute EventHandler onavailabilitychanged;
+  [SecureContext, SameObject] readonly attribute BluetoothDevice? referringDevice;
+  [SecureContext] Promise<BluetoothDevice> requestDevice(optional RequestDeviceOptions options);
+};
+Bluetooth implements BluetoothDeviceEventHandlers;
+Bluetooth implements CharacteristicEventHandlers;
+Bluetooth implements ServiceEventHandlers;
+ +

Properties

+ +

Inherits properties from its parent {{domxref("EventTarget")}}.

+ +
+
{{domxref("Bluetooth.referringDevice")}} {{readonlyinline}}
+
Returns a reference to the device, if any, from which the user opened the current page. For example, an Eddystone beacon might advertise a URL, which the user agent allows the user to open. A BluetoothDevice representing the beacon would be available through navigator.bluetooth.referringDevice.
+
+ +

Events

+ +
+
{{domxref("Bluetooth.onavailabilitychanged")}}
+
An event handler that runs when an event of type {{event("availabilitychanged")}} has fired.
+
+ +

Methods

+ +
+
{{domxref("Bluetooth.getAvailability()")}}
+
Returns a {{jsxref("Promise")}} that resolved to a {{jsxref("Boolean")}} indicating whether the user-agent has the ability to support Bluetooth. Some user-agents let the user configure an option that affects what is returned by this value. If this option is set, that is the value returned by this method.
+
{{domxref("Bluetooth.requestDevice()")}}
+
Returns a {{jsxref("Promise")}} to a {{domxref("BluetoothDevice")}} object with the specified options.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Bluetooth', '#bluetooth', 'Bluetooth')}}{{Spec2('Web Bluetooth')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Bluetooth")}}

diff --git a/files/th/web/api/bluetooth/onavailabilitychanged/index.html b/files/th/web/api/bluetooth/onavailabilitychanged/index.html new file mode 100644 index 0000000000..74e6881ee0 --- /dev/null +++ b/files/th/web/api/bluetooth/onavailabilitychanged/index.html @@ -0,0 +1,46 @@ +--- +title: Bluetooth.onavailabilitychanged +slug: Web/API/Bluetooth/onavailabilitychanged +translation_of: Web/API/Bluetooth/onavailabilitychanged +--- +

{{APIRef("Bluetooth API")}}{{securecontext_header}}{{SeeCompatTable}}

+ +

The onavailabilitychanged property of the {{DOMxRef("Bluetooth")}} interface is an {{DOMxRef("EventHandler")}} that processes availabilitychanged events that fire when the Bluetooth system as a whole becomes available or unavailable to the {{Glossary("User Agent")}}.

+ +

Syntax

+ +
Bluetooth.onavailabilitychanged = functionRef;
+
+ +

Value

+ +

functionRef is the handler function to be called when the Bluetooth availabilitychanged event fires.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Web Bluetooth", "#bluetooth", "Bluetooth")}}{{Spec2("Web Bluetooth")}}Initial definition.
+ +

Browser compatibility

+ + + +

{{compat ( "api.Bluetooth.onavailabilitychanged")}}

+ +

ดูสิ่งนี้ด้วย

+ + diff --git a/files/th/web/api/cachestorage/index.html b/files/th/web/api/cachestorage/index.html new file mode 100644 index 0000000000..1debf49bb0 --- /dev/null +++ b/files/th/web/api/cachestorage/index.html @@ -0,0 +1,189 @@ +--- +title: CacheStorage +slug: Web/API/CacheStorage +translation_of: Web/API/CacheStorage +--- +

{{APIRef ("Service Workers API")}}

+ +

CacheStorageอินเตอร์เฟซที่แสดงให้เห็นถึงการจัดเก็บข้อมูลสำหรับ {{domxref ( "แคช")}} วัตถุ

+ +

อินเทอร์เฟซ:

+ + + +

ใช้ {{domxref ("CacheStorage.open ()")}} เพื่อรับอินสแตนซ์ {{domxref ("Cache")}}

+ +

Use {{domxref("CacheStorage.match()")}} to check if a given {{domxref("Request")}} is a key in any of the {{domxref("Cache")}} objects that the CacheStorage object tracks.

+ +

You can access CacheStorage through the global {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}} property.

+ +
Note: CacheStorage always rejects with a SecurityError on untrusted origins (i.e. those that aren't using HTTPS, although this definition will likely become more complex in the future.) When testing, you can get around this by checking the "Enable Service Workers over HTTP (when toolbox is open)" option in the Firefox Devtools options/gear menu.
+ +
Note: {{domxref("CacheStorage.match()")}} is a convenience method. Equivalent functionality to match a cache entry can be implemented by returning an array of cache names from {{domxref("CacheStorage.keys()")}}, opening each cache with {{domxref("CacheStorage.open()")}}, and matching the one you want with {{domxref("Cache.match()")}}.
+ +

Methods

+ +
+
{{domxref("CacheStorage.match()")}}
+
Checks if a given {{domxref("Request")}} is a key in any of the {{domxref("Cache")}} objects that the {{domxref("CacheStorage")}} object tracks, and returns a {{jsxref("Promise")}} that resolves to that match.
+
{{domxref("CacheStorage.has()")}}
+
Returns a {{jsxref("Promise")}} that resolves to true if a {{domxref("Cache")}} object matching the cacheName exists.
+
{{domxref("CacheStorage.open()")}}
+
Returns a {{jsxref("Promise")}} that resolves to the {{domxref("Cache")}} object matching the cacheName (a new cache is created if it doesn't already exist.)
+
{{domxref("CacheStorage.delete()")}}
+
Finds the {{domxref("Cache")}} object matching the cacheName, and if found, deletes the {{domxref("Cache")}} object and returns a {{jsxref("Promise")}} that resolves to true. If no {{domxref("Cache")}} object is found, it resolves to false.
+
{{domxref("CacheStorage.keys()")}}
+
Returns a {{jsxref("Promise")}} that will resolve with an array containing strings corresponding to all of the named {{domxref("Cache")}} objects tracked by the {{domxref("CacheStorage")}}. Use this method to iterate over a list of all the {{domxref("Cache")}} objects.
+
+ +

Examples

+ +

This code snippet is from the MDN sw-test example (see sw-test running live.) This service worker script waits for an {{domxref("InstallEvent")}} to fire, then runs {{domxref("ExtendableEvent.waitUntil","waitUntil")}} to handle the install process for the app. This consists of calling {{domxref("CacheStorage.open")}} to create a new cache, then using {{domxref("Cache.addAll")}} to add a series of assets to it.

+ +

In the second code block, we wait for a {{domxref("FetchEvent")}} to fire. We construct a custom response like so:

+ +
    +
  1. Check whether a match for the request is found in the CacheStorage. If so, serve that.
    2. +
  2. If not, fetch the request from the network, then also open the cache created in the first block and add a clone of the request to it using {{domxref("Cache.put")}} (cache.put(event.request, response.clone()).)
    3. +
  3. If this fails (e.g. because the network is down), return a fallback response.
    4. +
+ +

Finally, return whatever the custom response ended up being equal to, using {{domxref("FetchEvent.respondWith")}}.

+ +
self.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  event.respondWith(caches.match(event.request).then(function(response) {
+    // caches.match() always resolves
+    // but in case of success response will have value
+    if (response !== undefined) {
+      return response;
+    } else {
+      return fetch(event.request).then(function (response) {
+        // response may be used only once
+        // we need to save clone to put one copy in cache
+        // and serve second one
+        let responseClone = response.clone();
+
+        caches.open('v1').then(function (cache) {
+          cache.put(event.request, responseClone);
+        });
+        return response;
+      }).catch(function () {
+        return caches.match('/sw-test/gallery/myLittleVader.jpg');
+      });
+    }
+  }));
+});
+
+ +

This snippet shows how the API can be used outside of a service worker context, and uses the await operator for much more readable code.

+ +
// Try to get data from the cache, but fall back to fetching it live.
+async function getData() {
+   const cacheVersion = 1;
+   const cacheName    = `myapp-${ cacheVersion }`;
+   const url          = 'https://jsonplaceholder.typicode.com/todos/1';
+   let cachedData     = await getCachedData( cacheName, url );
+
+   if ( cachedData ) {
+      console.log( 'Retrieved cached data' );
+      return cachedData;
+   }
+
+   console.log( 'Fetching fresh data' );
+
+   const cacheStorage = await caches.open( cacheName );
+   await cacheStorage.add( url );
+   cachedData = await getCachedData( cacheName, url );
+   await deleteOldCaches( cacheName );
+
+   return cachedData;
+}
+
+// Get data from the cache.
+async function getCachedData( cacheName, url ) {
+   const cacheStorage   = await caches.open( cacheName );
+   const cachedResponse = await cacheStorage.match( url );
+
+   if ( ! cachedResponse || ! cachedResponse.ok ) {
+      return false;
+   }
+
+   return await cachedResponse.json();
+}
+
+// Delete any old caches to respect user's disk space.
+async function deleteOldCaches( currentCache ) {
+   const keys = await caches.keys();
+
+   for ( const key of keys ) {
+      const isOurCache = 'myapp-' === key.substr (0, 6);
+
+      ถ้า (currentCache === คีย์ ||! isOurCache) {
+         ดำเนินการต่อ;
+      }
+
+      caches.delete (คีย์);
+   }
+}
+
+ลอง {
+   const data = รอ getData ();
+   console.log ({data});
+} catch (error) {
+   console.error ({error});
+}
+ +

ข้อมูลจำเพาะ

+ + + + + + + + + + + + + + +
ข้อมูลจำเพาะสถานะแสดงความคิดเห็น
{{SpecName ('Service Workers', '#cachestorage', 'CacheStorage')}}{{Spec2 ('พนักงานบริการ')}}นิยามเริ่มต้น
+ +

ความเข้ากันได้ของเบราว์เซอร์

+ + + +

{{คอมแพต ("api.CacheStorage")}}

+ +

ดูสิ่งนี้ด้วย

+ + diff --git a/files/th/web/api/geolocation/index.html b/files/th/web/api/geolocation/index.html new file mode 100644 index 0000000000..dce3f6b33a --- /dev/null +++ b/files/th/web/api/geolocation/index.html @@ -0,0 +1,142 @@ +--- +title: Geolocation +slug: Web/API/Geolocation +tags: + - API + - Advanced + - Geolocation API + - Interface + - NeedsTranslation + - Reference + - Secure context + - TopicStub +translation_of: Web/API/Geolocation +--- +
{{securecontext_header}}{{APIRef("Geolocation API")}}
+ +

The Geolocation interface represents an object able to programmatically obtain the position of the device. It gives Web content access to the location of the device. This allows a Web site or app to offer customized results based on the user's location.

+ +

An object with this interface is obtained using the {{domxref("navigator.geolocation")}} property implemented by the {{domxref("Navigator")}} object.

+ +
+

Note: For security reasons, when a web page tries to access location information, the user is notified and asked to grant permission. Be aware that each browser has its own policies and methods for requesting this permission.

+
+ +

Properties

+ +

The Geolocation interface neither implements, nor inherits any property.

+ +

Methods

+ +

The Geolocation interface doesn't inherit any method.

+ +
+
{{domxref("Geolocation.getCurrentPosition()")}} {{securecontext_inline}}
+
Determines the device's current location and gives back a {{domxref("Position")}} object with the data.
+
{{domxref("Geolocation.watchPosition()")}} {{securecontext_inline}}
+
Returns a long value representing the newly established callback function to be invoked whenever the device location changes.
+
{{domxref("Geolocation.clearWatch()")}} {{securecontext_inline}}
+
Removes the particular handler previously installed using watchPosition().
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Initial specification.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}910.60
+ Removed in 15.0
+ Reintroduced in 16.0		5
Secure context-only47{{CompatUnknown()}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown()}}{{CompatUnknown()}}{{CompatVersionUnknown}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
Secure context-only{{CompatNo}}47{{CompatUnknown()}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/th/web/api/geolocation_api/index.html b/files/th/web/api/geolocation_api/index.html new file mode 100644 index 0000000000..91ae57a2e6 --- /dev/null +++ b/files/th/web/api/geolocation_api/index.html @@ -0,0 +1,92 @@ +--- +title: Geolocation API +slug: Web/API/Geolocation_API +translation_of: Web/API/Geolocation_API +--- +
{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}
+ +

Geolocation APIจะช่วยให้ผู้ใช้สามารถใช้งานเว็บไซต์ได้หากพวกเขาต้องการที่จะใช้เหตุผลในการรายงานข้อมูลตำแหน่ง

+ +

Web ส่วนขยายที่ต้องการใช้วัตถุ Geolocation ต้องเพิ่ม"geolocation"สิทธิ์ในการแสดงรายการ ระบบปฏิบัติการของผู้ใช้จะแจ้งให้ผู้ใช้อนุญาตการเข้าถึงตำแหน่งในครั้งแรกที่มีการร้องขอ

+ +

แนวคิดและการใช้งาน

+ +

คุณมักจะต้องการดึงข้อมูลตำแหน่งของผู้ใช้ในแอปพลิเคชันเว็บของคุณเช่นเพื่อพล็อตตำแหน่งของพวกเขาบนแผนที่หรือแสดงข้อมูลส่วนตัวที่เกี่ยวข้องกับตำแหน่งของพวกเขา

+ +

Geolocation API เข้าถึงได้ผ่านการเรียก {{domxref("Navigator.geolocation", "navigator.geolocation")}}; สิ่งนี้จะทำให้เบราว์เซอร์ของผู้ใช้ถามเพื่อขออนุญาตเข้าถึงข้อมูลตำแหน่งของพวกเขา หากพวกเขายอมรับเบราว์เซอร์จะใช้ฟังก์ชันการทำงานที่ดีที่สุดบนอุปกรณ์เพื่อเข้าถึงข้อมูลนี้ (ตัวอย่างเช่น GPS)

+ +

นักพัฒนาซอฟต์แวร์สามารถเข้าถึงข้อมูลตำแหน่งนี้ได้สองวิธี:

+ + + +

ในทั้งสองกรณีการเรียกใช้เมธอดใช้เวลาถึงสามอาร์กิวเมนต์:

+ + + +

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้ Geolocation อ่านใช้ Geolocation API

+ +

อินเตอร์เฟซ

+ +
+
{{domxref("Geolocation")}}
+
คลาสหลักของ API นี้ - ประกอบด้วยวิธีการดึงข้อมูลตำแหน่งปัจจุบันของผู้ใช้เฝ้าดูการเปลี่ยนแปลงตำแหน่งและล้างนาฬิกาที่ตั้งไว้ก่อนหน้านี้
+
{{domxref("GeolocationPosition")}}
+
แสดงตำแหน่งของผู้ใช้ GeolocationPositionอินสแตนซ์ถูกส่งกลับโดยการเรียกร้องที่ประสบความสำเร็จให้เป็นหนึ่งในวิธีการที่มีอยู่ภายใน {{domxref("Geolocation")}} ภายในโทรกลับประสบความสำเร็จและมีการประทับเวลาบวก {{domxref("GeolocationCoordinates")}} ตัวอย่างวัตถุ
+
{{domxref("GeolocationCoordinates")}}
+
แสดงเรียงลำดับของตำแหน่งที่มีการเชื่อมโยงGeolocationCoordinatesและข้อมูลอื่น ๆ ที่สำคัญ
+
{{domxref("GeolocationPositionError")}}
+
A GeolocationPositionErrorถูกส่งคืนโดยการเรียกที่ไม่สำเร็จไปยังหนึ่งในวิธีการที่อยู่ภายใน {{domxref("Geolocation")}}, ภายในการเรียกกลับข้อผิดพลาดและมีรหัสข้อผิดพลาดและข้อความ
+
{{domxref("Navigator.geolocation")}}
+
API เข้าสู่ระบบส่งคืนวัตถุ {{domxref("ตำแหน่งทางภูมิศาสตร์")}}
+
+ +

พจนานุกรม

+ +
+
{{domxref("PositionOptions")}}
+
แสดงให้เห็นถึงเนื้อหาที่มีตัวเลือกที่จะผ่านการเก็บของ {{domxref("Geolocation.getCurrentPosition()")}} และ {{domxref("Geolocation.watchPosition()")}}
+
+ +

ตัวอย่าง

+ +
{{page("/en-US/docs/Web/API/Geolocation_API/Using_the_Geolocation_API","Examples")}}
+ +

ข้อมูลจำเพาะ

+ + + + + + + + + + + + + + +
สเปคสถานะคิดเห็น
{{SpecName("ตำแหน่งทางภูมิศาสตร์")}}}{{Spec2("ตำแหน่งทางภูมิศาสตร์")}}}
+ +

ความเข้ากันได้ของเบราว์เซอร์

+ +

{{compat("api.Geolocation")}}

+ +

ความพร้อมใช้งาน

+ +

เนื่องจาก Google เป็นผู้ให้บริการระบุตำแหน่งผ่าน WiFi ดังนั้นวานิลลา Geolocation API จึงอาจไม่ด้านใช้งานพนักงานพนักงานได้ในห้างหุ้นส่วนจำกัดห้างหุ้นส่วนจำกัดออกออกประเทศจีนที่ที่คุณคุณที่คุณคุณอาจจะใช้ที่คุณคุณคุณผู้ให้บริการบุคคลที่สามในห้างหุ้นส่วนจำกัดห้างหุ้นส่วนจำกัดท้องถิ่นเช่นBaidu , AutoNaviหรือTencent บริการเหล่านี้ที่อยู่ IP ของผู้ใช้และ / หรือระบุตำแหน่งที่ดีขึ้น

+ +

ดูสิ่งนี้ด้วย

+ + diff --git a/files/th/web/api/geolocation_api/using_the_geolocation_api/index.html b/files/th/web/api/geolocation_api/using_the_geolocation_api/index.html new file mode 100644 index 0000000000..3b2984397b --- /dev/null +++ b/files/th/web/api/geolocation_api/using_the_geolocation_api/index.html @@ -0,0 +1,170 @@ +--- +title: Using the Geolocation API +slug: Web/API/Geolocation_API/Using_the_Geolocation_API +tags: + - Geolocation API + - Guide + - Tutorial +translation_of: Web/API/Geolocation_API/Using_the_Geolocation_API +--- +
{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}
+ +

Geolocation API ใช้เพื่อเรียกคืนตำแหน่งของผู้ใช้เพื่อให้สามารถใช้เพื่อแสดงตำแหน่งโดยใช้ API การแมป บทความนี้อธิบายพื้นฐานของวิธีใช้

+ +

วัตถุตำแหน่งทางภูมิศาสตร์

+ +

Geolocation APIสามารถใช้ได้ผ่านทาง {{domxref("navigator.geolocation")}} วัตถุ

+ +

หากวัตถุมีอยู่บริการระบุตำแหน่งทางภูมิศาสตร์จะพร้อมใช้งาน คุณสามารถทดสอบการมีตำแหน่งทางภูมิศาสตร์ได้ดังนี้:

+ +
if('geolocation' in navigator) {
+  /* geolocation is available */
+} else {
+  /* geolocation IS NOT available */
+}
+
+ +

รับตำแหน่งปัจจุบัน

+ +

ในการรับตำแหน่งปัจจุบันของผู้ใช้คุณสามารถเรียกใช้วิธี {{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}} สิ่งนี้จะเริ่มต้นคำขอแบบอะซิงโครนัสเพื่อตรวจหาตำแหน่งของผู้ใช้และสอบถามฮาร์ดแวร์การจัดตำแหน่งเพื่อรับข้อมูลที่ทันสมัย เมื่อกำหนดตำแหน่งแล้วฟังก์ชันการเรียกกลับที่กำหนดไว้จะถูกดำเนินการ คุณสามารถเลือกที่จะให้ฟังก์ชั่นการติดต่อกลับที่สองที่จะดำเนินการหากเกิดข้อผิดพลาด พารามิเตอร์ตัวที่สามเป็นตัวเลือกคือวัตถุตัวเลือกที่คุณสามารถตั้งค่าอายุสูงสุดของตำแหน่งที่ส่งคืนเวลารอคำขอและถ้าคุณต้องการความแม่นยำสูงสำหรับตำแหน่ง

+ +
+

หมายเหตุ:โดยค่าเริ่มต้น  {{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}} พยายามตอบเร็วที่สุดเท่าที่จะทำได้ด้วยความแม่นยำต่ำ มันจะมีประโยชน์ถ้าคุณต้องการคำตอบอย่างรวดเร็วโดยไม่คำนึงถึงความถูกต้อง อุปกรณ์ที่มีจีพีเอส, ตัวอย่างเช่นสามารถใช้เวลาเป็นนาทีหรือมากกว่าที่จะได้รับสัญญาณ GPS, ข้อมูลเพื่อความแม่นยำน้อย (ที่ตั้งของทรัพย์สินทางปัญญาหรือ WiFi) getCurrentPosition()อาจจะกลับไป

+
+ +
navigator.geolocation.getCurrentPosition((position) => {
+  doSomething(position.coords.latitude, position.coords.longitude);
+});
+ +

ตัวอย่างด้านบนจะทำให้doSomething()ฟังก์ชันทำงานเมื่อได้รับตำแหน่ง

+ +

ดูตำแหน่งปัจจุบัน

+ +

หากข้อมูลตำแหน่งเปลี่ยนแปลง (โดยการเคลื่อนไหวของอุปกรณ์หรือข้อมูลทางภูมิศาสตร์ที่แม่นยำกว่ามาถึง) คุณสามารถตั้งค่าฟังก์ชั่นการโทรกลับที่ถูกเรียกพร้อมกับข้อมูลตำแหน่งที่อัปเดตนั้น สิ่งนี้ทำได้โดยใช้ฟังก์ชัน {{domxref("Geolocation.watchPosition","watchPosition()")}} ซึ่งมีพารามิเตอร์อินพุตเหมือนกับ {{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}}. ฟังก์ชั่นการโทรกลับถูกเรียกหลายครั้งทำให้เบราว์เซอร์สามารถอัปเดตตำแหน่งของคุณในขณะที่คุณย้ายหรือให้ตำแหน่งที่แม่นยำยิ่งขึ้นเนื่องจากใช้เทคนิคต่าง ๆ ในการระบุตำแหน่งของคุณ ฟังก์ชั่นการเรียกกลับข้อผิดพลาดซึ่งเป็นตัวเลือกเช่นเดียวกับมันgetCurrentPosition()สามารถเรียกซ้ำ

+ +
+

Note: You can use {{domxref("Geolocation.watchPosition","watchPosition()")}} without an initial {{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}} call.

+
+ +
const watchID = navigator.geolocation.watchPosition((position) => {
+  doSomething(position.coords.latitude, position.coords.longitude);
+});
+ +

The {{domxref("Geolocation.watchPosition","watchPosition()")}} method returns an ID number that can be used to uniquely identify the requested position watcher; you use this value in tandem with the {{domxref("Geolocation.clearWatch","clearWatch()")}} method to stop watching the user's location.

+ +
navigator.geolocation.clearWatch(watchID);
+
+ +

Fine tuning the response

+ +

Both {{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}} and {{domxref("Geolocation.watchPosition","watchPosition()")}} accept a success callback, an optional error callback, and an optional {{domxref("PositionOptions")}} object.

+ +

This object allows you to specify whether to enable high accuracy, a maximum age for the returned position value (up until this age it will be cached and reused if the same position is requested again; after this the browser will request fresh position data), and a timeout value that dictates how long the browser should attempt to get the position data for, before it times out.

+ +

A call to {{domxref("Geolocation.watchPosition","watchPosition")}} could look like:

+ +
function success(position) {
+  doSomething(position.coords.latitude, position.coords.longitude);
+}
+
+function error() {
+  alert('Sorry, no position available.');
+}
+
+const options = {
+  enableHighAccuracy: true,
+  maximumAge: 30000,
+  timeout: 27000
+};
+
+const watchID = navigator.geolocation.watchPosition(success, error, options);
+ +

Describing a position

+ +

The user's location is described using a {{domxref("GeolocationPosition")}} object instance, which itself contains a {{domxref("GeolocationCoordinates")}} object instance.

+ +

The GeolocationPosition instance contains only two things, a coords property that contains the GeolocationCoordinates instance, and a timestamp property that contains a {{domxref("DOMTimeStamp")}} instance representing the time at which the position data was retrieved.

+ +

The GeolocationCoordinates instance contains a number of properties, but the two you'll use most commonly are latitude and longitude, which are what you need to draw your position on a map. Hence many Geolocation success callbacks look fairly simple:

+ +
function success(position) {
+  const latitude  = position.coords.latitude;
+  const longitude = position.coords.longitude;
+
+  // Do something with your latitude and longitude
+}
+ +

You can however get a number of other bits of information from a GeolocationCoordinates object, including altitude, speed, what direction the device is facing, and an accuracy measure of the altitude, longitude, and latitude data.

+ +

Handling errors

+ +

The error callback function, if provided when calling getCurrentPosition() or watchPosition(), expects a GeolocationPositionError object instance as its first parameter. This object type contains two properties, a code indicating what type of error has been returned, and a human-readable message that describes what the error code means.

+ +

You could use it like so:

+ +
function errorCallback(error) {
+  alert(`ERROR(${error.code}): ${error.message}`);
+};
+
+ +

Examples

+ +

In the following example the Geolocation API is used to retrieve the user's latitude and longitude. If sucessful, the available hyperlink is populated with an openstreetmap.org URL that will show their location.

+ + + +

HTML

+ +
<button id = "find-me">Show my location</button><br/>
+<p id = "status"></p>
+<a id = "map-link" target="_blank"></a>
+
+ +

JavaScript

+ +
function geoFindMe() {
+
+  const status = document.querySelector('#status');
+  const mapLink = document.querySelector('#map-link');
+
+  mapLink.href = '';
+  mapLink.textContent = '';
+
+  function success(position) {
+    const latitude  = position.coords.latitude;
+    const longitude = position.coords.longitude;
+
+    status.textContent = '';
+    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
+    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
+  }
+
+  function error() {
+    status.textContent = 'Unable to retrieve your location';
+  }
+
+  if(!navigator.geolocation) {
+    status.textContent = 'Geolocation is not supported by your browser';
+  } else {
+    status.textContent = 'Locating…';
+    navigator.geolocation.getCurrentPosition(success, error);
+  }
+
+}
+
+document.querySelector('#find-me').addEventListener('click', geoFindMe);
+
+ +

Result

+ +

{{EmbedLiveSample('Examples', 350, 150)}}

diff --git a/files/th/web/api/history_api/index.html b/files/th/web/api/history_api/index.html new file mode 100644 index 0000000000..41493b4654 --- /dev/null +++ b/files/th/web/api/history_api/index.html @@ -0,0 +1,249 @@ +--- +title: Manipulating the browser history +slug: Web/API/History_API +translation_of: Web/API/History_API +--- +

DOM {{domxref ("window")}} ให้การเข้าถึงประวัติของเบราเซอร์ผ่าน {{domxref ("window.history", "history")}} วัตถุ ช่วยให้คุณสามารถเคลื่อนย้ายไปมาได้ตลอดเวลาผ่านประวัติผู้ใช้เช่นเดียวกับ - โดยเริ่มจาก HTML5 - จัดการกับเนื้อหาของสแต็คประวัติ

+ +

การเดินทางผ่านประวัติศาสตร์

+ +

ย้ายไปข้างหน้าและย้อนกลับผ่านทางประวัติศาสตร์ของผู้ใช้จะกระทำโดยใช้back(), forward()และgo() วิธีการ

+ +

ก้าวไปข้างหน้าและข้างหลัง

+ +

หากต้องการย้อนกลับไปในอดีตเพียงแค่ทำ:

+ +
window.history.back ();
+
+ +

วิธีนี้จะทำหน้าที่เหมือนกับผู้ใช้คลิกที่ปุ่มย้อนกลับในแถบเครื่องมือของเบราว์เซอร์

+ +

ในทำนองเดียวกันคุณสามารถก้าวไปข้างหน้า (เหมือนกับว่าผู้ใช้คลิกปุ่มไปข้างหน้า) เช่นนี้:

+ +
window.history.forward ();
+
+ +

การย้ายไปยังจุดที่เฉพาะเจาะจงในประวัติศาสตร์

+ +

คุณสามารถใช้go() วิธีการโหลดหน้าเว็บเฉพาะจากประวัติเซสชันซึ่งระบุโดยตำแหน่งสัมพัทธ์ไปยังหน้าปัจจุบัน (โดยที่หน้าปัจจุบันเป็นดัชนีสัมพัทธ์ 0)

+ +

หากต้องการย้ายกลับหนึ่งหน้า (เทียบเท่ากับการโทรback()):

+ +
window.history.go (-1);
+
+ +

เพื่อเลื่อนหน้าเว็บเช่นเดียวกับการโทรforward():

+ +
window.history.go (1);
+
+ +

ในทำนองเดียวกันคุณสามารถย้ายหน้า 2 หน้าโดยการส่งผ่าน 2 เป็นต้น

+ +

คุณสามารถกำหนดจำนวนหน้าในสแต็คประวัติโดยการดูที่ค่าของคุณสมบัติ length:

+ +
var numberOfEntries = window.history.length;
+
+ +
หมายเหตุ: Internet Explorer สนับสนุนการส่ง URL สตริงเป็นพารามิเตอร์ไปยังgo(); นี้ไม่ได้มาตรฐานและไม่ได้รับการสนับสนุนโดยตุ๊กแก
+ +

การเพิ่มและแก้ไขรายการประวัติ

+ +

{{gecko_minversion_header ("2")}}

+ +

HTML5 นำเสนอเมธอดhistory.pushState ()และhistory.replaceState ()ซึ่งช่วยให้คุณสามารถเพิ่มและแก้ไขรายการประวัติตามลำดับได้ วิธีการเหล่านี้ทำงานร่วมกับเหตุการณ์ {{domxref ("window.onpopstate")}}

+ +

การใช้history.pushState() การเปลี่ยนแปลง referrer ที่ใช้ในส่วนหัว HTTP สำหรับXMLHttpRequestอ็อบเจ็กต์ที่สร้างขึ้นหลังจากเปลี่ยนสถานะ ผู้อ้างอิงจะเป็น URL ของเอกสารที่มีหน้าต่างอยู่thisในขณะที่สร้างXMLHttpRequestวัตถุ

+ +

ตัวอย่างของวิธีการ pushState ()

+ +

สมมติว่าhttp://mozilla.org/foo.htmlใช้ JavaScript ต่อไปนี้:

+ +
var stateObj = {foo: "bar"};
+history.pushState (stateObj, "page 2", "bar.html");
+
+ +

ซึ่งจะทำให้แถบ URL แสดงhttp://mozilla.org/bar.htmlแต่จะไม่ทำให้เบราว์เซอร์โหลดbar.htmlหรือตรวจสอบว่าbar.htmlมีอยู่

+ +

สมมติว่าตอนนี้ผู้ใช้ไปที่http://google.comแล้วคลิกปุ่มย้อนกลับ ณ จุดนี้แถบ URL จะแสดงhttp://mozilla.org/bar.htmlและหน้าจะได้รับจะไม่ได้รับการpopstateจัดกิจกรรมที่มีสถานะของวัตถุมีสำเนาของstateObj  ถ้าคุณอ่านคุณจะได้รับhistory.state  เหตุการณ์จะไม่ถูกเรียกใช้เนื่องจากโหลดหน้าเว็บใหม่แล้ว หน้าเว็บจะมีลักษณะเหมือนกันstateObjpopstatebar.html

+ +

ถ้าเราคลิกย้อนกลับอีกครั้ง URL จะเปลี่ยนเป็นhttp://mozilla.org/foo.htmlและเอกสารจะได้รับ  popstateเหตุการณ์พร้อมกับอ็อบเจ็กต์สถานะว่าง ที่นี่อีกเช่นกันการย้อนกลับไม่ได้เปลี่ยนเนื้อหาของเอกสารจากสิ่งที่พวกเขาอยู่ในขั้นตอนก่อนหน้าแม้ว่าเอกสารอาจอัปเดตเนื้อหาด้วยตนเองเมื่อได้รับpopstateกิจกรรม

+ +

วิธีการ pushState ()

+ +

pushState()ใช้พารามิเตอร์สามตัว ได้แก่ อ็อบเจ็กต์สถานะชื่อ (ซึ่งปัจจุบันถูกละเว้น) และ (ไม่บังคับ) URL ลองดูแต่ละพารามิเตอร์ทั้งสามแบบนี้โดยละเอียด:

+ + + +
หมายเหตุ:ใน Gecko 2.0 {{geckoRelease ("2.0")}} ผ่าน Gecko 5.0 {{geckoRelease ("5.0")}} วัตถุที่ส่งผ่านจะได้รับการจัดอันดับโดยใช้ JSON เริ่มต้นในตุ๊กแก 6.0 {{geckoRelease ( "6.0")}} วัตถุที่ถูกต่อเนื่องโดยใช้อัลกอริทึมโคลนโครงสร้าง นี้จะช่วยให้ความหลากหลายของวัตถุที่จะผ่านได้อย่างปลอดภัย
+ +

ในแง่การโทรpushState()จะคล้ายกับการตั้งค่าwindow.location = "#foo"ทั้งสองจะสร้างและเปิดใช้งานรายการบันทึกประวัติอื่นที่เชื่อมโยงกับเอกสารปัจจุบัน แต่pushState()มีประโยชน์น้อย:

+ + + +

โปรดทราบว่าไม่ได้pushState()ทำให้เกิดhashchangeเหตุการณ์ที่จะถูกเรียกใช้แม้ว่า URL ใหม่จะแตกต่างจาก URL เดิมในแฮชก็ตาม

+ +

ในเอกสารXULจะสร้างองค์ประกอบ XUL ที่ระบุไว้

+ +

ในเอกสารอื่น ๆ จะสร้างองค์ประกอบด้วยnullURI namespace

+ +

วิธี replaceState ()

+ +

history.replaceState()ดำเนินการเหมือนกับที่history.pushState()ยกเว้นการreplaceState()แก้ไขรายการประวัติปัจจุบันแทนการสร้างใหม่ โปรดทราบว่าสิ่งนี้ไม่ได้ป้องกันไม่ให้มีการสร้างรายการใหม่ในประวัติเบราเซอร์ทั่วโลก

+ +

replaceState() มีประโยชน์อย่างยิ่งเมื่อคุณต้องการอัปเดตอ็อบเจ็กต์สถานะหรือ URL ของรายการประวัติปัจจุบันเพื่อตอบสนองการดำเนินการบางอย่างของผู้ใช้

+ +
หมายเหตุ:ใน Gecko 2.0 {{geckoRelease ("2.0")}} ผ่าน Gecko 5.0 {{geckoRelease ("5.0")}} วัตถุที่ส่งผ่านจะได้รับการจัดอันดับโดยใช้ JSON เริ่มต้นในตุ๊กแก 6.0 {{geckoRelease ( "6.0")}} วัตถุที่ถูกต่อเนื่องโดยใช้อัลกอริทึมโคลนโครงสร้าง นี้จะช่วยให้ความหลากหลายของวัตถุที่จะผ่านได้อย่างปลอดภัย
+ +

ตัวอย่างวิธี replaceState ()

+ +

สมมติว่าhttp://mozilla.org/foo.htmlใช้ JavaScript ต่อไปนี้:

+ +
var stateObj = {foo: "bar"};
+history.pushState (stateObj, "page 2", "bar.html");
+
+ +

คำอธิบายของสองบรรทัดข้างต้นสามารถดูได้ที่ "ตัวอย่างของวิธีการ pushState ()" จากนั้นสมมติว่าhttp://mozilla.org/bar.htmlเรียกใช้ JavaScript ต่อไปนี้:

+ +
history.replaceState (stateObj, "page 3", "bar2.html");
+
+ +

ซึ่งจะทำให้แถบ URL แสดงhttp://mozilla.org/bar2.htmlแต่จะไม่ทำให้เบราว์เซอร์โหลดbar2.htmlหรือแม้แต่การตรวจสอบว่าbar2.htmlมีอยู่

+ +

สมมติว่าตอนนี้ผู้ใช้ไปที่http://www.microsoft.comแล้วคลิกปุ่มย้อนกลับ ณ จุดนี้แถบ URL จะแสดงhttp://mozilla.org/bar2.html หากผู้ใช้คลิกกลับมาอีกครั้งแถบ URL จะแสดง http://mozilla.org/foo.html และข้ามผ่าน bar.html ทั้งหมด

+ +

เหตุการณ์ popstate

+ +

popstateเหตุการณ์ที่ถูกส่งไปที่หน้าต่างทุกครั้งที่มีการเปลี่ยนแปลงรายการประวัติใช้งาน ถ้ารายการประวัติศาสตร์ที่มีการเปิดใช้งานถูกสร้างขึ้นโดยการเรียกpushStateหรือรับผลกระทบจากการโทรไปreplaceStateที่popstateเหตุการณ์stateสถานที่ให้บริการประกอบด้วยสำเนาของวัตถุรัฐประวัติศาสตร์ของรายการที่

+ +

ดู {{domxref ("window.onpopstate")}} สำหรับการใช้ตัวอย่าง

+ +

อ่านสถานะปัจจุบัน

+ +

เมื่อโหลดหน้าเว็บของคุณอาจมีอ็อบเจ็กต์สถานะที่ไม่ใช่ค่าว่าง กรณีเช่นนี้อาจเกิดขึ้นได้เช่นถ้าเพจกำหนดอ็อบเจ็กต์สถานะ (ใช้pushState()หรือreplaceState()) จากนั้นผู้ใช้จะเริ่มต้นเบราว์เซอร์ใหม่ เมื่อหน้าเว็บโหลดซ้ำหน้าเว็บจะได้รับเหตุการณ์onload แต่ไม่มีเหตุการณ์ที่ปรากฏ   แต่ถ้าคุณอ่านhistory.stateคุณสมบัติที่คุณจะได้รับกลับมาวัตถุรัฐที่คุณจะได้รับถ้าpopstateยิง

+ +

คุณสามารถอ่านสถานะของรายการประวัติปัจจุบันได้โดยไม่ต้องรอpopstateเหตุการณ์โดยใช้history.stateคุณสมบัติเช่นนี้:

+ +
var currentState = history.state;
+
+ +

ตัวอย่าง

+ +

สำหรับตัวอย่างที่สมบูรณ์ของเว็บไซต์ AJAX, โปรดดูที่: ตัวอย่างการนำทางอาแจ็กซ์

+ +

ข้อมูลจำเพาะ

+ + + + + + + + + + + + + + + + + + + +
สเปคสถานะคิดเห็น
{{SpecName ('HTML WHATWG', "browsers.html # history", "History")}}{{Spec2 ('HTML WHATWG')}}ไม่มีการเปลี่ยนแปลงจาก {{SpecName ("HTML5 W3C")}}
{{SpecName ('HTML5 W3C', "browsers.html # history", "History")}}{{Spec2 ('HTML5 W3C')}}ความหมายเบื้องต้น
+ +

ความเข้ากันได้ของเบราเซอร์

+ +

{{CompatibilityTable ()}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ลักษณะโครเมียมขอบFirefox (ตุ๊กแก)Internet Explorerอุปรากรการแข่งรถวิบาก
replaceState, pushState5{{CompatVersionUnknown}}{{CompatGeckoDesktop ("2.0")}}1011.505.0
history.state18{{CompatVersionUnknown}}{{CompatGeckoDesktop ("2.0")}}1011.506.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ลักษณะAndroidขอบFirefox Mobile (ตุ๊กแก)IE MobileOpera MobileSafari มือถือ
replaceState, pushState{{CompatUnknown ()}}{{CompatVersionUnknown}}{{CompatUnknown ()}}{{CompatUnknown ()}}{{CompatUnknown ()}}{{CompatUnknown ()}}
history.state{{CompatUnknown ()}}{{CompatVersionUnknown}}{{CompatUnknown ()}}{{CompatUnknown ()}}{{CompatUnknown ()}}{{CompatUnknown ()}}
+
+ +

ดูสิ่งนี้ด้วย

+ + diff --git a/files/th/web/api/index.html b/files/th/web/api/index.html new file mode 100644 index 0000000000..5ddadeb7cf --- /dev/null +++ b/files/th/web/api/index.html @@ -0,0 +1,14 @@ +--- +title: Web APIs +slug: Web/API +tags: + - API + - JavaScript + - NeedsTranslation + - Reference + - Web +translation_of: Web/API +--- +

When writing code for the Web using JavaScript, there are a great many APIs available. Below is a list of all the interfaces (that is, types of objects) that you may be able to use while developing your Web app or site.

+ +
{{APIListAlpha}}
diff --git a/files/th/web/api/indexeddb_api/index.html b/files/th/web/api/indexeddb_api/index.html new file mode 100644 index 0000000000..15c6eaf802 --- /dev/null +++ b/files/th/web/api/indexeddb_api/index.html @@ -0,0 +1,308 @@ +--- +title: IndexedDB API +slug: Web/API/IndexedDB_API +translation_of: Web/API/IndexedDB_API +--- +
{{DefaultAPISidebar ( "IndexedDB")}}
+ +

IndexedDB เป็น API ระดับต่ำสำหรับการจัดเก็บข้อมูลจำนวนมากของโครงสร้างข้อมูลรวมถึงไฟล์ / blobs API นี้ใช้ดัชนีเพื่อให้สามารถค้นหาข้อมูลนี้ได้อย่างมีประสิทธิภาพสูง แม้ว่าที่เก็บข้อมูลเว็บจะเป็นประโยชน์สำหรับการจัดเก็บข้อมูลจำนวนน้อย แต่จะไม่ค่อยมีประโยชน์ในการจัดเก็บข้อมูลที่มีโครงสร้างจำนวนมาก IndexedDB มีวิธีแก้ปัญหา นี่คือหน้า Landing Page หลักสำหรับความครอบคลุม IndexedDB ของ MDN - ที่นี่เรามีลิงก์ไปยังคู่มืออ้างอิงและคู่มือการใช้งาน API แบบเต็มรูปแบบรายละเอียดการสนับสนุนเบราเซอร์และคำอธิบายเกี่ยวกับแนวคิดหลัก ๆ

+ +

{{AvailableInWorkers}}

+ +
+

หมายเหตุ : IndexedDB API มีประสิทธิภาพ แต่อาจดูเหมือนซับซ้อนเกินไปสำหรับกรณีง่ายๆ ถ้าคุณต้องการ API แบบธรรมดาลองใช้ไลบรารีเช่น  localForage , dexie.js , ZangoDB และJsStoreที่ทำให้ IndexedDB เป็นโปรแกรมเมอร์ที่เป็นมิตรมากขึ้น

+
+ +

แนวคิดหลักและการใช้งาน

+ +

IndexedDB เป็นระบบฐานข้อมูลการทำธุรกรรมเช่น RDBMS แบบ SQL แต่แตกต่างจาก RDBMSes ที่ใช้ SQL ซึ่งใช้ตารางคอลัมน์ถาวร IndexedDB เป็นฐานข้อมูลเชิงวัตถุที่ใช้ JavaScript IndexedDB ช่วยให้คุณสามารถจัดเก็บและดึงวัตถุที่มีการสร้างดัชนีด้วยที่สำคัญ ; วัตถุใด ๆ ที่สนับสนุนโดยอัลกอริทึมโคลนที่มีโครงสร้างสามารถจัดเก็บได้ คุณต้องระบุคีมาฐานข้อมูลเปิดการเชื่อมต่อกับฐานข้อมูลของคุณและจากนั้นดึงข้อมูลและปรับปรุงข้อมูลภายในชุดของการทำธุรกรรม

+ + + +
+

หมายเหตุ : เช่นเดียวกับโซลูชันการจัดเก็บข้อมูลเว็บส่วนใหญ่ IndexedDB จะใช้นโยบายแหล่งกำเนิดเดียวกัน ดังนั้นในขณะที่คุณสามารถเข้าถึงข้อมูลที่เก็บไว้ภายในโดเมนคุณจะไม่สามารถเข้าถึงข้อมูลในโดเมนต่างๆได้

+
+ +

Synchronous และ Asynchronous

+ +

การดำเนินงานที่ดำเนินการโดยใช้ IndexedDB ทำแบบอะซิงโครนัสเพื่อไม่ให้บล็อกแอพพลิเคชัน IndexedDB เดิมรวม APIs แบบซิงโครนัสและ  แบบอะซิงโครนัส API ซิงโครนัสมีไว้สำหรับใช้กับWeb Workersเท่านั้น แต่ถูกนำออกจาก spec เนื่องจากไม่ชัดเจนว่าจำเป็นหรือไม่ อย่างไรก็ตาม   API แบบซิงโครนัส  อาจได้รับคำแนะนำใหม่หากมีความต้องการเพียงพอจากนักพัฒนาเว็บ

+ +

ข้อ จำกัด ในการจัดเก็บและเกณฑ์การขับไล่

+ +

มีเทคโนโลยีเว็บจำนวนหนึ่งที่เก็บข้อมูลประเภทเดียวกันหรือแบบอื่นทางฝั่งไคลเอ็นต์ (เช่นบนดิสก์ภายในเครื่อง) IndexedDB เป็นเรื่องที่พูดถึงกันมากที่สุด กระบวนการที่เบราว์เซอร์ทำงานได้ว่าจะจัดสรรพื้นที่ในการจัดเก็บข้อมูลเว็บมากน้อยเพียงใดและจะลบอะไรเมื่อถึงขีด จำกัด นั้นไม่ง่ายและแตกต่างกันระหว่างเบราว์เซอร์ ขีด จำกัด ของพื้นที่เก็บข้อมูลเบราเซอร์และเกณฑ์การขับไล่พยายามอธิบายวิธีการทำงานนี้อย่างน้อยที่สุดในกรณีของ Firefox

+ +

อินเตอร์เฟซ

+ +

เมื่อต้องการเข้าถึงฐานข้อมูลให้เรียกopen()ใช้indexedDBแอ็ตทริบิวต์ของออบเจ็กต์หน้าต่าง เมธอดนี้ส่งกลับค่า {{domxref ("IDBRequest")}} object; การดำเนินการแบบอะซิงโครนัสจะสื่อสารกับแอพพลิเคชันการเรียกโดยการยิงเหตุการณ์บน {{domxref ("IDBRequest")}} วัตถุ

+ +

กำลังเชื่อมต่อกับฐานข้อมูล

+ +
+
{{domxref ( "IDBEnvironment")}}
+
ให้การเข้าถึงฟังก์ชันการทำงาน IndexedDB มีการใช้งานโดย {{domxref ("window")}} และวัตถุ {{domxref ("worker")}} อินเทอร์เฟซนี้ไม่ใช่ส่วนหนึ่งของข้อกำหนด 2.0
+
{{domxref ( "IDBFactory")}}
+
ให้การเข้าถึงฐานข้อมูล นี่คืออินเทอร์เฟซที่ใช้งานโดยอ็อบเจ็กต์ทั่วโลกindexedDBและเป็นจุดเริ่มต้นของ API
+
{{domxref ( "IDBOpenDBRequest")}}
+
หมายถึงคำขอให้เปิดฐานข้อมูล
+
{{domxref ( "IDBDatabase")}}
+
หมายถึงการเชื่อมต่อกับฐานข้อมูล เป็นวิธีเดียวที่จะได้รับธุรกรรมในฐานข้อมูล
+
กำลังเรียกและแก้ไขข้อมูล
+
+ +
+
{{domxref ( "IDBTransaction")}}
+
หมายถึงธุรกรรม คุณสร้างธุรกรรมในฐานข้อมูลระบุขอบเขต (เช่นที่เก็บออบเจ็กต์ที่คุณต้องการเข้าถึง) และกำหนดชนิดของการเข้าถึง (อ่านอย่างเดียวหรือเขียน readwrite) ที่คุณต้องการ
+
{{domxref ( "IDBRequest")}}
+
อินเทอร์เฟซทั่วไปที่จัดการคำขอฐานข้อมูลและให้การเข้าถึงผลการค้นหา
+
{{domxref ( "IDBObjectStore")}}
+
หมายถึงเก็บออบเจ็กต์ที่อนุญาตให้เข้าถึงชุดข้อมูลในฐานข้อมูล IndexedDB โดยค้นหาคีย์หลัก
+
{{domxref ( "IDBIndex")}}
+
นอกจากนี้ยังช่วยให้สามารถเข้าถึงชุดย่อยของข้อมูลในฐานข้อมูล IndexedDB ได้ แต่ใช้ดัชนีเพื่อดึงข้อมูลระเบียนแทนที่จะเป็นคีย์หลัก บางครั้งก็เร็วกว่าการใช้ {{domxref ("IDBObjectStore")}}
+
{{domxref ( "IDBCursor")}}
+
Iterates มากกว่าเก็บวัตถุและดัชนี
+
{{domxref ( "IDBCursorWithValue")}}
+
Iterates มากกว่าเก็บวัตถุและดัชนีและส่งกลับค่าปัจจุบันของเคอร์เซอร์
+
{{domxref ( "IDBKeyRange")}}
+
กำหนดช่วงสำคัญที่สามารถใช้เพื่อดึงข้อมูลจากฐานข้อมูลในช่วงที่กำหนด
+
{{domxref ("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}
+
กำหนดช่วงที่สำคัญที่สามารถนำมาใช้เพื่อดึงข้อมูลจากฐานข้อมูลในช่วงที่กำหนดซึ่งจัดเรียงตามกฎของโลแคลที่ระบุสำหรับดัชนีที่ระบุ (โปรดดูที่createIndex()พารามิเตอร์ที่ไม่บังคับ ) อินเทอร์เฟซนี้ไม่ใช่ส่วนหนึ่งของข้อกำหนด 2.0
+
+ +

อินเทอร์เฟซเหตุการณ์ที่กำหนดเอง

+ +

ข้อกำหนดนี้จะเริ่มต้นกิจกรรมด้วยอินเทอร์เฟซที่กำหนดเองต่อไปนี้:

+ +
+
{{domxref ( "IDBVersionChangeEvent")}}
+
IDBVersionChangeEventอินเตอร์เฟซแสดงให้เห็นว่ารุ่นของฐานข้อมูลที่มีการเปลี่ยนแปลงเป็นผลมาจากการ {{domxref ( "IDBOpenDBRequest.onupgradeneeded")}} ฟังก์ชั่นจัดการเหตุการณ์
+
+ +

อินเตอร์เฟซล้าสมัย

+ +

เวอร์ชันก่อนหน้าของข้อกำหนดยังกำหนดการเชื่อมต่อที่ลบออกไปแล้วในขณะนี้ เอกสารเหล่านี้จะได้รับการจัดทำเป็นเอกสารไว้ในกรณีที่คุณจำเป็นต้องอัพเดตโค้ดที่เขียนไว้ก่อนหน้านี้:

+ +
+
{{domxref ("IDBVersionChangeRequest")}} {{obsolete_inline}}
+
หมายถึงคำขอให้เปลี่ยนเวอร์ชันของฐานข้อมูล วิธีเปลี่ยนเวอร์ชันของฐานข้อมูลได้เปลี่ยนไปแล้ว (โดยเรียก {{domxref ("IDBFactory.open")}} โดยไม่ต้องเรียก {{domxref ("IDBDatabase.setVersion")}}) และอินเทอร์เฟซ {{domxref ("IDBOpenDBRequest")}} มีฟังก์ชันการทำงานของ {{domxref ("IDBVersionChangeRequest")}} ที่ถูกลบ
+
{{domxref ("IDBDatabaseException")}} {{obsolete_inline}}
+
หมายถึงสภาวะข้อยกเว้นที่สามารถพบได้ในขณะดำเนินการฐานข้อมูล
+
{{domxref ("IDBTransactionSync")}} {{obsolete_inline}}
+
ซิงค์เวอร์ชันของ {{domxref ("IDBTransaction")}}
+
{{domxref ("IDBObjectStoreSync")}} {{obsolete_inline}}
+
ซิงค์เวอร์ชันของ {{domxref ("IDBObjectStore")}}
+
{{domxref ("IDBIndexSync")}} {{obsolete_inline}}
+
ซิงค์เวอร์ชันของ {{domxref ("IDBIndex")}}
+
{{domxref ("IDBFactorySync")}} {{obsolete_inline}}
+
ซิงค์เวอร์ชันของ {{domxref ("IDBFactory")}}
+
{{domxref ("IDBEnvironmentSync")}} {{obsolete_inline}}
+
ซิงค์เวอร์ชันของ {{domxref ("IDBEnvironment")}}
+
{{domxref ("IDBDatabaseSync")}} {{obsolete_inline}}
+
ซิงค์เวอร์ชัน {{domxref ("IDBDatabase")}}
+
{{domxref ("IDBCursorSync")}} {{obsolete_inline}}
+
ซิงค์เวอร์ชันของ {{domxref ("IDBCursor")}}
+
+ +

ตัวอย่าง

+ + + +

ข้อมูลจำเพาะ

+ + + + + + + + + + + + + + + + + + + +
สเปคสถานะคิดเห็น
{{SpecName ( 'IndexedDB')}}{{Spec2 ( 'IndexedDB')}}ความหมายเบื้องต้น
{{SpecName ("IndexedDB 2")}}{{Spec2 ("IndexedDB 2")}} 
+ +

ความเข้ากันได้ของเบราเซอร์

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ลักษณะโครเมียมขอบFirefox (ตุ๊กแก)Internet ExplorerอุปรากรSafari (WebKit)
การสนับสนุนขั้นพื้นฐาน{{CompatChrome (23)}} {{property_prefix ("webkit")}}
+ {{CompatChrome (24)}} (ไม่เป็นที่รู้จัก)
+ {{CompatChrome (38)}} (คำนำหน้าเลิกใช้แล้ว)
+ {{CompatChrome (57)}} ( คำนำหน้านำออก)		{{CompatVersionUnknown}}{{CompatGeckoDesktop ("10.0")}} {{property_prefix ("moz")}}
+ {{CompatGeckoDesktop ("16.0")}}		1015 +

7.1 ส่วนที่
+ 10

+
มีอยู่ในคนงาน{{CompatVersionUnknown}} (ไม่เป็นตัวเป็นตน)
+ {{CompatChrome (38)}} (คำนำหน้าเลิกใช้แล้ว)
+ {{CompatChrome (57)}} (นำหน้านำหน้าออก)		{{CompatVersionUnknown}}{{CompatGeckoDesktop ("37.0")}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}10
ใช้ได้ในโหมดความเป็นส่วนตัว[3]{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
IDBLocaleAwareKeyRange{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop ("43.0")}} [2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
ฐานข้อมูลที่ทำดัชนี 2.0{{CompatChrome (58)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera (45)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ลักษณะAndroid WebviewChrome สำหรับแอนดรอยด์ขอบFirefox Mobile (ตุ๊กแก)Firefox OSโทรศัพท์ IE / EdgeOpera MobileSafari มือถือ
การสนับสนุนขั้นพื้นฐาน{{CompatVersionUnknown}} (ไม่เป็นตัวเป็นตน)
+ {{CompatChrome (38)}} (คำนำหน้าเลิกใช้แล้ว)
+ {{CompatChrome (57)}} (นำหน้านำหน้าออก)		{{CompatVersionUnknown}} (ไม่เป็นตัวเป็นตน)
+ {{CompatChrome (38)}} (คำนำหน้าเลิกใช้แล้ว)
+ {{CompatChrome (57)}} (นำหน้านำหน้าออก)		{{CompatVersionUnknown}}{{CompatGeckoMobile ( "22.0")}}1.0.110{{CompatOpera (22)}}8 บางส่วน
+ 10
มีอยู่ในคนงาน{{CompatVersionUnknown}} (ไม่เป็นตัวเป็นตน)
+ {{CompatChrome (38)}} (คำนำหน้าเลิกใช้แล้ว)
+ {{CompatChrome (57)}} (นำหน้านำหน้าออก)		{{CompatVersionUnknown}} (ไม่เป็นตัวเป็นตน)
+ {{CompatChrome (38)}} (คำนำหน้าเลิกใช้แล้ว)
+ {{CompatChrome (57)}} (นำหน้านำหน้าออก)		{{CompatVersionUnknown}}{{CompatGeckoMobile ("37.0")}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}10
ใช้ได้ในโหมดความเป็นส่วนตัว[3]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
IDBLocaleAwareKeyRange{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile ("43.0")}} [2]2.5 [2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
ฐานข้อมูลที่ทำดัชนี 2.0{{CompatChrome (58)}}{{CompatChrome (58)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera (45)}}{{CompatUnknown}}
+
+ + + +

ดูสิ่งนี้ด้วย

+ + diff --git a/files/th/web/api/location/index.html b/files/th/web/api/location/index.html new file mode 100644 index 0000000000..0e1ae33f89 --- /dev/null +++ b/files/th/web/api/location/index.html @@ -0,0 +1,217 @@ +--- +title: Location +slug: Web/API/Location +tags: + - API + - HTML DOM + - Interface + - Location + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/Location +--- +

{{APIRef("HTML DOM")}}

+ +

The Location interface represents the location (URL) of the object it is linked to. Changes done on it are reflected on the object it relates to. Both the {{domxref("Document")}} and {{domxref("Window")}} interface have such a linked Location, accessible via {{domxref("Document.location")}} and {{domxref("Window.location")}} respectively.

+ +

Properties

+ +

The Location interface doesn't inherit any property, but implements those from {{domxref("URLUtils")}}.

+ +
+
{{domxref("Location.href")}}
+
Is a {{domxref("DOMString")}} containing the entire URL. If changed, the associated document navigates to the new page. It can be set from a different origin than the associated document.
+
{{domxref("Location.protocol")}}
+
Is a {{domxref("DOMString")}} containing the protocol scheme of the URL, including the final ':'.
+
{{domxref("Location.host")}}
+
Is a {{domxref("DOMString")}} containing the host, that is the hostname, a ':', and the port of the URL.
+
{{domxref("Location.hostname")}}
+
Is a {{domxref("DOMString")}} containing the domain of the URL.
+
{{domxref("Location.port")}}
+
Is a {{domxref("DOMString")}} containing the port number of the URL.
+
{{domxref("Location.pathname")}}
+
Is a {{domxref("DOMString")}} containing an initial '/' followed by the path of the URL.
+
{{domxref("Location.search")}}
+
Is a {{domxref("DOMString")}} containing a '?' followed by the parameters or "querystring" of the URL. Modern browsers provide URLSearchParams and URL.searchParams to make it easy to parse out the parameters from the querystring.
+ +
{{domxref("Location.hash")}}
+
Is a {{domxref("DOMString")}} containing a '#' followed by the fragment identifier of the URL.
+
{{domxref("Location.username")}}
+
Is a {{domxref("DOMString")}} containing the username specified before the domain name.
+
{{domxref("Location.password")}}
+
Is a {{domxref("DOMString")}} containing the password specified before the domain name.
+
{{domxref("Location.origin")}} {{readOnlyInline}}
+
Returns a {{domxref("DOMString")}} containing the canonical form of the origin of the specific location.
+
+ +

Methods

+ +

The Location interface doesn't inherit any method, but implements those from {{domxref("URLUtils")}}.

+ +
+
{{domxref("Location.assign()")}}
+
Loads the resource at the URL provided in parameter.
+
{{domxref("Location.reload()")}}
+
Reloads the resource from the current URL. Its optional unique parameter is a {{domxref("Boolean")}}, which, when it is true, causes the page to always be reloaded from the server. If it is false or not specified, the browser may reload the page from its cache.
+
{{domxref("Location.replace()")}}
+
Replaces the current resource with the one at the provided URL. The difference from the assign() method is that after using replace() the current page will not be saved in session {{domxref("History")}}, meaning the user won't be able to use the back button to navigate to it.
+
{{domxref("Location.toString()")}}
+
Returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("URLUtils.href")}}, though it can't be used to modify the value.
+
+ +

Examples

+ +
// Create anchor element and use href property for the purpose of this example
+// A more correct alternative is to browse to the URL and use document.location or window.location
+var url = document.createElement('a');
+url.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container';
+console.log(url.href);      // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
+console.log(url.protocol);  // https:
+console.log(url.host);      // developer.mozilla.org:8080
+console.log(url.hostname);  // developer.mozilla.org
+console.log(url.port);      // 8080
+console.log(url.pathname);  // /en-US/search
+console.log(url.search);    // ?q=URL
+console.log(url.hash);      // #search-results-close-container
+console.log(url.origin);    // https://developer.mozilla.org
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "browsers.html#the-location-interface", "Location")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Location")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
origin on Windows.location{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("21")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
origin on all location objects (but on Workers, that use {{domxref("WorkerLocation")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
username and password{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
origin on Windows.location{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("21")}}11{{CompatUnknown}}{{CompatUnknown}}
origin on all location objects (but on Workers, that use {{domxref("WorkerLocation")}}){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
username and password{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/th/web/api/server-sent_events/index.html b/files/th/web/api/server-sent_events/index.html new file mode 100644 index 0000000000..7430312328 --- /dev/null +++ b/files/th/web/api/server-sent_events/index.html @@ -0,0 +1,72 @@ +--- +title: Server-sent events +slug: Web/API/Server-sent_events +translation_of: Web/API/Server-sent_events +--- +

{{DefaultAPISidebar("เซิร์ฟเวอร์ส่งเหตุการณ์")}}

+ +

ตามเนื้อผ้าหน้าเว็บต้องส่งคำขอไปยังเซิร์ฟเวอร์เพื่อรับข้อมูลใหม่ นั่นคือหน้าร้องขอข้อมูลจากเซิร์ฟเวอร์ ด้วยเหตุการณ์ที่เซิร์ฟเวอร์ส่งเป็นไปได้ที่เซิร์ฟเวอร์จะส่งข้อมูลใหม่ไปยังหน้าเว็บได้ตลอดเวลาโดยการส่งข้อความไปยังหน้าเว็บ ข้อความขาเข้าเหล่านี้สามารถใช้เป็นข้อมูลกิจกรรม +ในหน้าเว็บ

+ +

แนวคิดและการใช้งาน

+ +

เพื่อเรียนรู้วิธีการใช้เหตุการณ์เซิร์ฟเวอร์ส่งดูบทความของเราใช้เหตุการณ์เซิร์ฟเวอร์ส่ง

+ +

อินเตอร์เฟซ

+ +
+
{{domxref("EventSource")}}
+
กำหนดคุณสมบัติทั้งหมดที่จัดการการเชื่อมต่อกับเซิร์ฟเวอร์การรับเหตุการณ์ / ข้อมูลข้อผิดพลาดการปิดการเชื่อมต่อ ฯลฯ
+
+ +

ตัวอย่าง

+ + + +

สเปค

+ + + + + + + + + + + + + + + + +
สเปคสถานะคิดเห็น
{{SpecName ('HTML WHATWG', '# server-sent-events', 'เหตุการณ์ที่เซิร์ฟเวอร์ส่ง')}}{{Spec2 ('HTML WHATWG')}}
+ +

ดูสิ่งนี้ด้วย

+ +

เครื่องมือ

+ + + + + + + +

แหล่งข้อมูลอื่น ๆ

+ + diff --git a/files/th/web/api/webgl_api/index.html b/files/th/web/api/webgl_api/index.html new file mode 100644 index 0000000000..5b2a88ef9e --- /dev/null +++ b/files/th/web/api/webgl_api/index.html @@ -0,0 +1,253 @@ +--- +title: 'WebGL: 2D and 3D graphics for the web' +slug: Web/API/WebGL_API +translation_of: Web/API/WebGL_API +--- +
{{WebGLSidebar}}
+ +
+

WebGL (ห้องสมุดกราฟิกเว็บ) เป็น JavaScript API สำหรับการแสดงผลกราฟิก 3 มิติและ 2D แบบโต้ตอบที่มีประสิทธิภาพสูงภายในเว็บเบราว์เซอร์ที่รองรับโดยไม่ต้องใช้ปลั๊กอิน WebGL ทำได้โดยการแนะนำ API ที่สอดคล้องกับ OpenGL ES 2.0 อย่างใกล้ชิดซึ่งสามารถใช้ในองค์ประกอบ HTML5 {{HTMLElement ("canvas")}} ความสอดคล้องนี้ทำให้ API สามารถได้รับประโยชน์จากการเร่งความเร็วของกราฟิกฮาร์ดแวร์ที่อุปกรณ์ของผู้ใช้ใช้

+
+ +

รองรับ WebGL ในFirefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, Internet Explorer 11+ และMicrosoft Edge build 10240+; อย่างไรก็ตามอุปกรณ์ของผู้ใช้จะต้องมีฮาร์ดแวร์ที่รองรับคุณสมบัติเหล่านี้

+ +

{{anch ("WebGL 2")}} API แนะนำการสนับสนุนชุดคุณลักษณะ OpenGL ES 3.0 เป็นส่วนใหญ่ มีให้ผ่านทาง {{domxref ("WebGL2RenderingContext")}} ส่วนต่อประสาน

+ +

องค์ประกอบ {{HTMLElement ("canvas")}} ยังถูกใช้โดยCanvas APIเพื่อทำกราฟิก 2D บนหน้าเว็บ

+ +

การอ้างอิง

+ +

อินเตอร์เฟสมาตรฐาน

+ +
+ +
+ +

ส่วนขยาย

+ +
+ +
+ +

Events

+ + + +

Constants and types

+ + + +

WebGL 2

+ +

WebGL 2 is a major update to WebGL which is provided through the {{domxref("WebGL2RenderingContext")}} interface. It is based on OpenGL ES 3.0 and new features include:

+ + + +

See also the blog post "WebGL 2 lands in Firefox" and webglsamples.org/WebGL2Samples for a few demos.

+ +

Guides and tutorials

+ +

Below, you'll find an assortment of guides to help you learn WebGL concepts and tutorials that offer step-by-step lessons and examples.

+ +

Guides

+ +
+
Data in WebGL
+
A guide to variables, buffers, and other types of data used when writing WebGL code.
+
WebGL best practices
+
Tips and suggestions to help you improve the quality, performance, and reliability of your WebGL content.
+
Using extensions
+
A guide to using WebGL extensions.
+
+ +

Tutorials

+ +
+
WebGL tutorial
+
A beginner's guide to WebGL core concepts. A good place to start if you don't have previous WebGL experience.
+
+ +

Examples

+ +
+
A basic 2D WebGL animation example
+
This example demonstrates the simple animation of a one-color shape. Topics examined are adapting to aspect ratio differences, a function to build shader programs from sets of multiple shaders, and the basics of drawing in WebGL.
+
WebGL by example
+
ชุดตัวอย่างสดพร้อมคำอธิบายสั้น ๆ ที่แสดงแนวคิดและความสามารถของ WebGL ตัวอย่างจะถูกจัดเรียงตามหัวข้อและระดับความยากซึ่งครอบคลุมบริบทการเรนเดอร์ WebGL, การโปรแกรม shader, พื้นผิว, เรขาคณิต, การโต้ตอบกับผู้ใช้และอื่น ๆ
+
+ +

บทเรียนขั้นสูง

+ +
+
การฉายมุมมองโมเดล WebGL
+
คำอธิบายโดยละเอียดของเมทริกซ์หลักสามตัวที่โดยทั่วไปใช้เพื่อแสดงมุมมองวัตถุสามมิติ: แบบจำลองมุมมองและเมทริกซ์การฉายภาพ
+
คณิตศาสตร์เมทริกซ์สำหรับเว็บ
+
คู่มือที่มีประโยชน์เกี่ยวกับการทำงานของเมทริกซ์การแปลง 3D และสามารถใช้บนเว็บได้ - ทั้งสำหรับการคำนวณ WebGL และในการแปลง CSS3
+
+ +

ทรัพยากร

+ + + +

ห้องสมุด

+ + + +

ข้อมูลจำเพาะ

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
สเปคสถานะคิดเห็น
{{SpecName ( 'WebGL')}}{{Spec2 ( 'WebGL')}}คำจำกัดความเบื้องต้น อ้างอิงจาก OpenGL ES 2.0
{{SpecName ( 'WebGL2')}}{{Spec2 ( 'WebGL2')}}สร้างบน WebGL 1. ขึ้นอยู่กับ OpenGL ES 3.0
{{SpecName ('OpenGL ES 2.0')}}{{Spec2 ('OpenGL ES 2.0')}}
{{SpecName('OpenGL ES 3.0')}}{{Spec2('OpenGL ES 3.0')}}
+ +

Browser compatibility

+ +

WebGL 1

+ +
+ + +

{{Compat("api.WebGLRenderingContext", 0)}}

+ +

WebGL 2

+ + + +

{{Compat("api.WebGL2RenderingContext", 0)}}

+
+ +

Compatibility notes

+ +

นอกเหนือจากเบราว์เซอร์แล้ว GPU เองยังต้องการการสนับสนุนคุณสมบัติ ตัวอย่างเช่น S3 การบีบอัดพื้นผิว (S3TC) มีเฉพาะในแท็บเล็ตที่ใช้ Tegra เท่านั้น เบราว์เซอร์ส่วนใหญ่ทำให้บริบท WebGL พร้อมใช้งานผ่านwebglชื่อบริบท แต่เบราว์เซอร์ที่เก่ากว่านั้นต้องการexperimental-webglเช่นกัน นอกจากนี้การที่จะเกิดขึ้นWebGL 2webgl2เป็นอย่างถอยหลังได้และจะมีชื่อบริบท

+ +

บันทึกตุ๊กแก

+ +

การแก้ไขข้อบกพร่องและการทดสอบ WebGL

+ +

เริ่มต้นด้วย Gecko 10.0 {{geckoRelease ("10.0")}} มีการตั้งค่าสองแบบที่ให้คุณควบคุมความสามารถของ WebGL สำหรับการทดสอบ:

+ +
+
webgl.min_capability_mode
+
คุณสมบัติบูลีนที่เมื่อtrueเปิดใช้งานโหมดความสามารถขั้นต่ำ เมื่ออยู่ในโหมดนี้ WebGL จะได้รับการกำหนดค่าให้สนับสนุนชุดคุณลักษณะขั้นต่ำเปลือยและความสามารถที่จำเป็นตามข้อกำหนด WebGL เท่านั้น วิธีนี้ช่วยให้คุณมั่นใจได้ว่ารหัส WebGL ของคุณจะทำงานบนอุปกรณ์หรือเบราว์เซอร์ใด ๆ โดยไม่คำนึงถึงความสามารถของพวกเขา นี่คือfalseค่าเริ่มต้น
+
webgl.disable_extensions
+
คุณสมบัติบูลีนที่เมื่อtrueปิดใช้งานส่วนขยาย WebGL ทั้งหมด นี่คือfalseค่าเริ่มต้น
+
+ +

ดูสิ่งนี้ด้วย

+ + diff --git a/files/th/web/api/websockets_api/index.html b/files/th/web/api/websockets_api/index.html new file mode 100644 index 0000000000..fe713179a4 --- /dev/null +++ b/files/th/web/api/websockets_api/index.html @@ -0,0 +1,101 @@ +--- +title: The WebSocket API (WebSockets) +slug: Web/API/WebSockets_API +translation_of: Web/API/WebSockets_API +--- +

{{DefaultAPISidebar("Websockets API")}}

+ +

The WebSocket API is an advanced technology that makes it possible to open a two-way interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.

+ +
+

Note: While a WebSocket connection is functionally somewhat similar to standard Unix-style sockets, they are not related.

+
+ +

Interfaces

+ +
+
WebSocket
+
The primary interface for connecting to a WebSocket server and then sending and receiving data on the connection.
+
CloseEvent
+
The event sent by the WebSocket object when the connection closes.
+
MessageEvent
+
The event sent by the WebSocket object when a message is received from the server.
+
+ +

Guides

+ + + +

Tools

+ + + + + + + +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComments
{{SpecName("HTML WHATWG", "web-sockets.html", "WebSocket API")}}{{Spec2("HTML WHATWG")}}
WebSocketsCandidate Recommendation
{{RFC(6455, "The WebSocket Protocol")}}IETF RFC
+ +

Browser compatibility

+ + + +

{{Compat("api.WebSocket")}}

+ +

See also

+ + diff --git a/files/th/web/api/window/index.html b/files/th/web/api/window/index.html new file mode 100644 index 0000000000..0763771320 --- /dev/null +++ b/files/th/web/api/window/index.html @@ -0,0 +1,689 @@ +--- +title: Window +slug: Web/API/Window +translation_of: Web/API/Window +--- +
{{APIRef ("DOM")}}
+ +

Windowอินเตอร์เฟซที่แสดงให้เห็นถึงหน้าต่างที่มี {{คำศัพท์ ( "DOM")}} เอกสาร; documentจุดสถานที่ให้บริการไปยังเอกสาร DOMโหลดในหน้าต่างที่ สามารถรับหน้าต่างสำหรับเอกสารที่ระบุได้โดยใช้คุณสมบัติ {{domxref ("document.defaultView")}}

+ +

ตัวแปรส่วนกลางwindowซึ่งเป็นตัวแทนของหน้าต่างที่สคริปต์กำลังทำงานอยู่นั้นสัมผัสกับโค้ด JavaScript

+ +

Windowอินเตอร์เฟซที่เป็นบ้านที่มีความหลากหลายของฟังก์ชั่น namespaces วัตถุและการก่อสร้างที่ไม่จำเป็นต้องเกี่ยวข้องโดยตรงกับแนวคิดของหน้าต่างอินเตอร์เฟซผู้ใช้ อย่างไรก็ตามWindowอินเทอร์เฟซเป็นสถานที่ที่เหมาะสมในการรวมรายการเหล่านี้ที่จำเป็นต้องพร้อมใช้งานทั่วโลก หลายคนเหล่านี้จะถูกบันทึกไว้ในเอกสารอ้างอิง JavaScriptและDOM อ้างอิง

+ +

ในเบราว์เซอร์แบบแท็บแต่ละแท็บจะแสดงด้วยWindowวัตถุของตัวเอง ทั่วโลกที่windowเห็นโดยโค้ด JavaScript ที่ทำงานภายในแท็บหนึ่ง ๆ จะแสดงถึงแท็บที่โค้ดกำลังทำงานอยู่เสมอ อย่างไรก็ตามในเบราว์เซอร์แบบแท็บคุณสมบัติและวิธีการบางอย่างยังคงใช้กับหน้าต่างโดยรวมที่มีแท็บเช่น {{Domxref ("Window.resizeTo", "resizeTo ()")}} และ {{Domxref (" Window.innerHeight "," innerHeight ")}} โดยทั่วไปสิ่งที่ไม่สามารถเกี่ยวข้องกับแท็บจะเกี่ยวข้องกับหน้าต่างแทน

+ +

{{InheritanceDiagram}}

+ +

ตัวสร้าง

+ +

ดูอินเทอร์เฟซ DOMด้วย

+ +
+
{{domxref ("DOMParser")}}
+
DOMParserสามารถแยก XML หรือแหล่งที่มาของ HTML เก็บไว้ในสตริงเป็น DOM เอกสาร DOMParserที่ระบุไว้ในDOM แยกและเป็นอันดับ
+
{{domxref ("รูปภาพ")}}
+
ใช้สำหรับสร้าง {{domxref ("HTMLImageElement")}}
+
{{domxref ("ตัวเลือก")}}
+
ใช้สำหรับสร้าง {{domxref ("HTMLOptionElement")}}
+
{{domxref ("StaticRange")}} {{trial_inline}} {{readonlyinline}}
+
ส่งกลับคอนสตรัคเตอร์ {{domxref ('StaticRange.StaticRange', 'StaticRange ()')}} ซึ่งสร้างอ็อบเจกต์ {{domxref ('StaticRange')}}
+
{{domxref ("คนงาน")}}
+
ใช้สำหรับสร้างWeb Worker
+
{{domxref ("XMLSerializer")}}
+
แปลงแผนผัง DOM เป็นซอร์ส XML หรือ HTML
+
+ +

คุณสมบัติ

+ +

อินเทอร์เฟซนี้สืบทอดคุณสมบัติจากอินเทอร์เฟซ {{domxref ("EventTarget")}} และใช้คุณสมบัติจากมิกซ์อิน {{domxref ("WindowOrWorkerGlobalScope")}} และ {{domxref ("WindowEventHandlers")}}

+ +

โปรดสังเกตว่าคุณสมบัติที่เป็นอ็อบเจกต์ (เช่นสำหรับการลบล้างต้นแบบของอิลิเมนต์ในตัว) จะแสดงรายการไว้ในส่วนแยกต่างหากด้านล่าง

+ +
+
{{domxref ("Window.closed")}} {{readOnlyInline}}
+
คุณสมบัตินี้ระบุว่าหน้าต่างปัจจุบันปิดอยู่หรือไม่
+
{{domxref ("Window.console")}} {{ReadOnlyInline}}
+
ส่งคืนการอ้างอิงไปยังออบเจ็กต์คอนโซลที่ให้การเข้าถึงคอนโซลการดีบักของเบราว์เซอร์
+
{{domxref ("Window.controllers")}} {{ReadOnlyInline}} {{non-standard_inline}}
+
ส่งคืนอ็อบเจ็กต์คอนโทรลเลอร์ XUL สำหรับหน้าต่างโครเมี่ยมปัจจุบัน
+
{{domxref ("Window.customElements")}} {{ReadOnlyInline}}
+
ส่งกลับการอ้างอิงถึงออบเจ็กต์ {{domxref ("CustomElementRegistry")}} ซึ่งสามารถใช้เพื่อลงทะเบียนองค์ประกอบที่กำหนดเองใหม่และรับข้อมูลเกี่ยวกับองค์ประกอบที่กำหนดเองที่ลงทะเบียนไว้ก่อนหน้านี้
+
{{domxref ("Window.crypto")}} {{readOnlyInline}}
+
ส่งคืนวัตถุการเข้ารหัสลับของเบราว์เซอร์
+
{{domxref ("Window.devicePixelRatio")}} {{ReadOnlyInline}}
+
ส่งกลับอัตราส่วนระหว่างพิกเซลจริงและพิกเซลอิสระของอุปกรณ์ในจอแสดงผลปัจจุบัน
+
{{domxref ("Window.document")}} {{ReadOnlyInline}}
+
ส่งคืนการอ้างอิงไปยังเอกสารที่มีหน้าต่าง
+
{{domxref ("Window.DOMMatrix")}} {{readOnlyInline}} {{trial_inline}}
+
ส่งกลับการอ้างอิงถึงออบเจ็กต์ {{domxref ("DOMMatrix")} ซึ่งแสดงถึงเมทริกซ์ 4x4 เหมาะสำหรับการดำเนินการ 2 มิติและ 3 มิติ
+
{{domxref ("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{trial_inline}}
+
ส่งคืนการอ้างอิงไปยังออบเจ็กต์ {{domxref ("DOMMatrixReadOnly")}} ซึ่งแสดงถึงเมทริกซ์ 4x4 เหมาะสำหรับการดำเนินการ 2 มิติและ 3 มิติ
+
{{domxref ("Window.DOMPoint")}} {{readOnlyInline}} {{trial_inline}}
+
ส่งกลับการอ้างอิงไปยังออบเจ็กต์ {{domxref ("DOMPoint")}} ซึ่งแสดงถึงจุด 2 มิติหรือ 3 มิติในระบบพิกัด
+
{{domxref ("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{trial_inline}}
+
ส่งคืนการอ้างอิงไปยังออบเจ็กต์ {{domxref ("DOMPointReadOnly")}} ซึ่งแสดงถึงจุด 2 มิติหรือ 3 มิติในระบบพิกัด
+
{{domxref ("Window.DOMQuad")}} {{readOnlyInline}} {{trial_inline}}
+
ส่งกลับการอ้างอิงถึงออบเจ็กต์ {{domxref ("DOMQuad")}} ซึ่งแสดงถึงออบเจ็กต์รูปสี่เหลี่ยมจัตุรัสนั่นคืออันที่มีสี่มุมและสี่ด้าน
+
{{domxref ("Window.DOMRect")}} {{readOnlyInline}} {{trial_inline}}
+
ส่งกลับการอ้างอิงไปยังออบเจ็กต์ {{domxref ("DOMRect")}} ซึ่งแสดงถึงสี่เหลี่ยมผืนผ้า
+
{{domxref ("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{trial_inline}}
+
ส่งกลับการอ้างอิงไปยังวัตถุ {{domxref ("DOMRectReadOnly")}} ซึ่งแสดงถึงรูปสี่เหลี่ยมผืนผ้า
+
{{domxref ("Window.event")}} {{readOnlyInline}}
+
ส่งคืนเหตุการณ์ปัจจุบันซึ่งเป็นเหตุการณ์ที่กำลังจัดการโดยบริบทของโค้ด JavaScript หรือundefinedหากไม่มีเหตุการณ์ใดที่กำลังจัดการอยู่ ควรใช้ออบเจ็กต์ {{domxref ("Event")}} ที่ส่งตรงไปยังตัวจัดการเหตุการณ์แทนทุกครั้งที่ทำได้
+
{{domxref ("Window.frameElement")}} {{readOnlyInline}}
+
ส่งคืนองค์ประกอบที่ฝังหน้าต่างหรือเป็นโมฆะหากไม่ได้ฝังหน้าต่าง
+
{{domxref ("Window.frames")}} {{readOnlyInline}}
+
ส่งคืนอาร์เรย์ของเฟรมย่อยในหน้าต่างปัจจุบัน
+
{{domxref ("Window.fullScreen")}}
+
คุณสมบัตินี้ระบุว่าหน้าต่างแสดงแบบเต็มหน้าจอหรือไม่
+
{{domxref ("Window.history")}} {{readOnlyInline}}
+
ส่งคืนการอ้างอิงไปยังออบเจ็กต์ประวัติ
+
{{domxref ("Window.innerHeight")}} {{readOnlyInline}}
+
รับความสูงของพื้นที่เนื้อหาของหน้าต่างเบราว์เซอร์รวมถึงแถบเลื่อนแนวนอนหากแสดงผล
+
{{domxref ("Window.innerWidth")}} {{readOnlyInline}}
+
รับความกว้างของพื้นที่เนื้อหาของหน้าต่างเบราว์เซอร์รวมถึงแถบเลื่อนแนวตั้งหากแสดงผล
+
{{domxref ("Window.isSecureContext")}} {{trial_inline}} {{readOnlyInline}}
+
ระบุว่าบริบทสามารถใช้คุณลักษณะที่ต้องการบริบทที่ปลอดภัยได้หรือไม่
+
{{domxref ("Window.length")}} {{readOnlyInline}}
+
ส่งคืนจำนวนเฟรมในหน้าต่าง โปรดดู {{domxref ("window.frames")}} ด้วย
+
{{domxref ("Window.location")}}
+
รับ / ตั้งค่าตำแหน่งหรือ URL ปัจจุบันของวัตถุหน้าต่าง
+
{{domxref ("Window.locationbar")}} {{ReadOnlyInline}}
+
ส่งคืนวัตถุแถบตำแหน่งซึ่งสามารถสลับการเปิดเผยในหน้าต่างได้
+
{{domxref ("Window.localStorage")}} {{readOnlyInline}}
+
ส่งคืนการอ้างอิงไปยังออบเจ็กต์หน่วยเก็บข้อมูลในเครื่องที่ใช้ในการจัดเก็บข้อมูลที่สามารถเข้าถึงได้โดยต้นทางที่สร้างขึ้นเท่านั้น
+
{{domxref ("Window.menubar")}} {{ReadOnlyInline}}
+
ส่งคืนวัตถุแถบเมนูซึ่งสามารถสลับการมองเห็นได้ในหน้าต่าง
+
{{domxref ("Window.messageManager")}} {{non-standard_inline}}
+
ส่งคืนวัตถุตัวจัดการข้อความสำหรับหน้าต่างนี้
+
{{domxref ("Window.mozInnerScreenX")}} {{ReadOnlyInline}} {{non-standard_inline}}
+
ส่งกลับพิกัดแนวนอน (X) ของมุมบนซ้ายของวิวพอร์ตของหน้าต่างในพิกัดหน้าจอ ค่านี้รายงานเป็นพิกเซล CSS ดูmozScreenPixelsPerCSSPixelใน {{interface ("nsIDOMWindowUtils")}} สำหรับปัจจัยการแปลงเพื่อปรับให้เข้ากับพิกเซลของหน้าจอหากจำเป็น
+
{{domxref ("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}
+
ส่งกลับพิกัดแนวตั้ง (Y) ของมุมบนซ้ายของวิวพอร์ตของหน้าต่างในพิกัดหน้าจอ ค่านี้รายงานเป็นพิกเซล CSS ดูmozScreenPixelsPerCSSPixelปัจจัยการแปลงเพื่อปรับให้เข้ากับพิกเซลหน้าจอหากจำเป็น
+
{{domxref ("Window.name")}}
+
รับ / ตั้งชื่อของหน้าต่าง
+
{{domxref ("Window.navigator")}} {{readOnlyInline}}
+
ส่งคืนการอ้างอิงไปยังวัตถุเนวิเกเตอร์
+
{{domxref ("Window.opener")}}
+
ส่งคืนการอ้างอิงไปยังหน้าต่างที่เปิดหน้าต่างปัจจุบันนี้
+
{{domxref ("Window.outerHeight")}} {{readOnlyInline}}
+
รับความสูงของด้านนอกของหน้าต่างเบราว์เซอร์
+
{{domxref ("Window.outerWidth")}} {{readOnlyInline}}
+
รับความกว้างของด้านนอกของหน้าต่างเบราว์เซอร์
+
{{domxref ("Window.scrollX", "Window.pageXOffset")}} {{readOnlyInline}}
+
นามแฝงสำหรับ {{domxref ("window.scrollX")}}
+
{{domxref ("Window.scrollY", "Window.pageYOffset")}} {{readOnlyInline}}
+
นามแฝงสำหรับ {{domxref ("window.scrollY")}}
+
{{domxref ("Window.parent")}} {{readOnlyInline}}
+
ส่งคืนการอ้างอิงถึงพาเรนต์ของหน้าต่างหรือเฟรมย่อยปัจจุบัน
+
{{domxref ("Window.performance")}} {{readOnlyInline}}
+
ส่งคืนอ็อบเจ็กต์ {{domxref ("Performance")}} ซึ่งรวมถึง {{domxref ("Performance.timing", "timing")}} และ {{domxref ("Performance.navigation", "navigation")}} แอตทริบิวต์ซึ่งแต่ละรายการเป็นวัตถุที่ให้ข้อมูลที่เกี่ยวข้องกับประสิทธิภาพ โปรดดูการใช้ Navigation Timingสำหรับข้อมูลเพิ่มเติมและตัวอย่าง
+
{{domxref ("Window.personalbar")}} {{readOnlyInline}}
+
ส่งคืนวัตถุ Personalbar ซึ่งสามารถสลับการมองเห็นได้ในหน้าต่าง
+
{{domxref ("Window.screen")}} {{readOnlyInline}}
+
ส่งคืนการอ้างอิงไปยังออบเจ็กต์หน้าจอที่เกี่ยวข้องกับหน้าต่าง
+
{{domxref ("Window.screenX")}} และ {{domxref ("Window.screenLeft")}} {{readOnlyInline}}
+
คุณสมบัติทั้งสองจะคืนระยะทางแนวนอนจากขอบด้านซ้ายของวิวพอร์ตของเบราว์เซอร์ของผู้ใช้ไปทางด้านซ้ายของหน้าจอ
+
{{domxref ("Window.screenY")}} และ {{domxref ("Window.screenTop")}} {{readOnlyInline}}
+
คุณสมบัติทั้งสองจะคืนระยะทางแนวตั้งจากเส้นขอบด้านบนของวิวพอร์ตเบราว์เซอร์ของผู้ใช้ไปที่ด้านบนของหน้าจอ
+
{{domxref ("Window.scrollbars")}} {{readOnlyInline}}
+
ส่งคืนอ็อบเจ็กต์แถบเลื่อนซึ่งสามารถสลับการมองเห็นได้ในหน้าต่าง
+
{{domxref ("Window.scrollMaxX")}} {{non-standard_inline}} {{ReadOnlyInline}}
+
ค่าชดเชยสูงสุดที่สามารถเลื่อนหน้าต่างไปเป็นแนวนอนได้นั่นคือความกว้างของเอกสารลบด้วยความกว้างของวิวพอร์ต
+
{{domxref ("Window.scrollMaxY")}} {{non-standard_inline}} {{ReadOnlyInline}}
+
ค่าชดเชยสูงสุดที่สามารถเลื่อนหน้าต่างไปยังแนวตั้งได้ (เช่นความสูงของเอกสารลบด้วยความสูงของวิวพอร์ต)
+
{{domxref ("Window.scrollX")}} {{readOnlyInline}}
+
ส่งคืนจำนวนพิกเซลที่เอกสารถูกเลื่อนไปแล้วในแนวนอน
+
{{domxref ("Window.scrollY")}} {{readOnlyInline}}
+
ส่งคืนจำนวนพิกเซลที่เอกสารถูกเลื่อนในแนวตั้งแล้ว
+
{{domxref ("Window.self")}} {{ReadOnlyInline}}
+
ส่งคืนการอ้างอิงอ็อบเจ็กต์ไปยังอ็อบเจ็กต์หน้าต่างเอง
+
{{domxref ("Window.sessionStorage")}}
+
ส่งคืนการอ้างอิงไปยังออบเจ็กต์หน่วยเก็บข้อมูลเซสชันที่ใช้ในการจัดเก็บข้อมูลที่สามารถเข้าถึงได้โดยต้นทางที่สร้าง
+
{{domxref ("Window.sidebar")}} {{non-standard_inline}} {{ReadOnlyInline}}
+
ส่งคืนการอ้างอิงไปยังวัตถุหน้าต่างของแถบด้านข้าง
+
{{domxref ("Window.speechSynthesis")}} {{ReadOnlyInline}}
+
ส่งคืนออบเจ็กต์ {{domxref ("SpeechSynthesis")}} ซึ่งเป็นจุดเริ่มต้นในการใช้ฟังก์ชันการสังเคราะห์เสียงพูด Web Speech API
+
{{domxref ("Window.status")}}
+
รับ / ตั้งค่าข้อความในแถบสถานะที่ด้านล่างของเบราว์เซอร์
+
{{domxref ("Window.statusbar")}} {{readOnlyInline}}
+
ส่งคืนออบเจ็กต์แถบสถานะซึ่งสามารถสลับการเปิดเผยได้ในหน้าต่าง
+
{{domxref ("Window.toolbar")}} {{readOnlyInline}}
+
ส่งคืนอ็อบเจ็กต์แถบเครื่องมือซึ่งสามารถสลับการเปิดเผยได้ในหน้าต่าง
+
{{domxref ("Window.top")}} {{readOnlyInline}}
+
ส่งคืนการอ้างอิงไปยังหน้าต่างที่อยู่บนสุดในลำดับชั้นของหน้าต่าง คุณสมบัตินี้เป็นแบบอ่านอย่างเดียว
+
{{domxref ("Window.visualViewport")}} {{readOnlyInline}} {{trial_inline}}
+
ส่งคืนออบเจ็กต์ {{domxref ("VisualViewport")}} ซึ่งแสดงถึงวิวพอร์ตภาพสำหรับหน้าต่างที่กำหนด
+
{{domxref ("Window.window")}} {{ReadOnlyInline}}
+
ส่งคืนการอ้างอิงไปยังหน้าต่างปัจจุบัน
+
window[0], window[1]ฯลฯ
+
ส่งคืนการอ้างอิงไปยังwindowวัตถุในเฟรม ดูรายละเอียดเพิ่มเติมที่ {{domxref ("Window.frames")}}
+
+ +

คุณสมบัติดำเนินการจากที่อื่น

+ +
+
{{domxref ("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}
+
ส่งคืนอ็อบเจ็กต์ {{domxref ("CacheStorage")}} ที่เชื่อมโยงกับบริบทปัจจุบัน อ็อบเจ็กต์นี้เปิดใช้งานฟังก์ชันต่างๆเช่นการจัดเก็บเนื้อหาสำหรับการใช้งานออฟไลน์และสร้างการตอบสนองที่กำหนดเองสำหรับคำขอ
+
{{domxref ("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}
+
จัดเตรียมกลไกสำหรับแอปพลิเคชันเพื่อเข้าถึงความสามารถของฐานข้อมูลที่ทำดัชนีแบบอะซิงโครนัส ส่งคืนอ็อบเจ็กต์ {{domxref ("IDBFactory")}}
+
{{domxref ("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}
+
ส่งคืนบูลีนที่ระบุว่าบริบทปัจจุบันปลอดภัย ( true) หรือไม่ ( false)
+
{{domxref ("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}
+
ส่งคืนจุดเริ่มต้นของวัตถุส่วนกลางโดยจัดลำดับเป็นสตริง (สิ่งนี้ยังไม่ปรากฏในเบราว์เซอร์ใด ๆ )
+
+ +

คุณสมบัติที่ไม่รองรับ

+ +
+
{{domxref ("Window.content")}} และWindow._content{{Non-standard_inline}} {{deprecated_inline}} {{ReadOnlyInline}}
+
ส่งคืนการอ้างอิงถึงองค์ประกอบเนื้อหาในหน้าต่างปัจจุบัน ตั้งแต่ Firefox 57 (เริ่มต้นใช้งานเฉพาะคืนเท่านั้น) ทั้งสองเวอร์ชันมีให้ใช้งานจากรหัสโครเมี่ยม (สิทธิพิเศษ) เท่านั้นและไม่สามารถใช้งานบนเว็บได้อีกต่อไป
+
{{domxref ("Window.defaultStatus")}} {{deprecated_inline}}
+
รับ / ตั้งค่าข้อความแถบสถานะสำหรับหน้าต่างที่กำหนด
+
{{domxref ("Window.dialogArguments")}} {{deprecated_inline}} {{ReadOnlyInline}}
+
รับอาร์กิวเมนต์ที่ส่งผ่านไปยังหน้าต่าง (หากเป็นกล่องโต้ตอบ) เมื่อมีการเรียก {{domxref ("window.showModalDialog ()")}} นี่คือ {{Interface ("nsIArray")}}
+
{{domxref ("Window.directories")}} {{deprecated_inline}}
+
คำพ้องความหมายของ {{domxref ("window.personalbar")}}
+
{{domxref ("Window.globalStorage")}} {{Non-standard_inline}} {{deprecated_inline}}
+
อ็อบเจ็กต์หน่วยเก็บข้อมูลจำนวนมากที่ใช้สำหรับจัดเก็บข้อมูลในหลายเพจ
+
{{domxref ("Window.mozAnimationStartTime")}} {{Non-standard_inline}} {{deprecated_inline}}
+
เวลาในหน่วยมิลลิวินาทีนับตั้งแต่ยุคที่วงจรการเคลื่อนไหวปัจจุบันเริ่มต้นขึ้น ใช้ {{domxref ("Animation.startTime")}} แทน
+
{{domxref ("Window.mozPaintCount")}} {{non-standard_inline}} {{deprecated_inline}}
+
ส่งคืนจำนวนครั้งที่เอกสารปัจจุบันถูกแสดงบนหน้าจอในหน้าต่างนี้ สามารถใช้เพื่อคำนวณประสิทธิภาพการแสดงผล
+
{{domxref ("Window.orientation")}} {{readOnlyInline}} {{deprecated_inline}}
+
ส่งคืนการวางแนวเป็นองศา (เพิ่มขึ้นทีละ 90 องศา) ของวิวพอร์ตที่สัมพันธ์กับการวางแนวตามธรรมชาติของอุปกรณ์
+
{{domxref ("Window.pkcs11")}} {{deprecated_inline}}
+
เดิมให้การเข้าถึงเพื่อติดตั้งและลบโมดูล PKCS11
+
{{domxref ("Window.returnValue")}} {{deprecated_inline}}
+
ค่าส่งคืนที่จะส่งกลับไปยังฟังก์ชันที่เรียกว่า {{domxref ("window.showModalDialog ()")}} เพื่อแสดงหน้าต่างเป็นกล่องโต้ตอบโมดอล
+
+ +

วิธีการ

+ +

อินเทอร์เฟซนี้สืบทอดเมธอดจากอินเทอร์เฟซ {{domxref ("EventTarget")}} และใช้เมธอดจาก {{domxref ("WindowOrWorkerGlobalScope")}} และ {{domxref ("EventTarget")}}

+ +
+
{{domxref ("Window.alert ()")}}
+
แสดงกล่องโต้ตอบการแจ้งเตือน
+
{{domxref ("Window.blur ()")}}
+
ตั้งโฟกัสให้ห่างจากหน้าต่าง
+
{{domxref ("Window.cancelAnimationFrame ()")}} {{trial_inline}}
+
ช่วยให้คุณสามารถยกเลิกการโทรกลับที่กำหนดไว้ก่อนหน้านี้ด้วย {{domxref ("Window.requestAnimationFrame")}}
+
{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}
+
Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.
+
{{domxref("Window.clearImmediate()")}}
+
Cancels the repeated execution set using setImmediate.
+
{{domxref("Window.close()")}}
+
Closes the current window.
+
{{domxref("Window.confirm()")}}
+
Displays a dialog with a message that the user needs to respond to.
+
{{domxref("Window.dump()")}} {{Non-standard_inline}}
+
Writes a message to the console.
+
{{domxref("Window.find()")}}
+
Searches for a given string in a window.
+
{{domxref("Window.focus()")}}
+
Sets focus on the current window.
+
{{domxref("Window.getComputedStyle()")}}
+
Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.
+
{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}
+
Gets default computed style for the specified element, ignoring author stylesheets.
+
{{domxref("Window.getSelection()")}}
+
Returns the selection object representing the selected item(s).
+
{{domxref("Window.matchMedia()")}}
+
Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.
+
{{domxref("Window.maximize()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.minimize()")}} (top-level XUL windows only)
+
Minimizes the window.
+
{{domxref("Window.moveBy()")}}
+
Moves the current window by a specified amount.
+
{{domxref("Window.moveTo()")}}
+
Moves the window to the specified coordinates.
+
{{domxref("Window.open()")}}
+
Opens a new window.
+
{{domxref("Window.postMessage()")}}
+
Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.
+
{{domxref("Window.print()")}}
+
Opens the Print Dialog to print the current document.
+
{{domxref("Window.prompt()")}}
+
Returns the text entered by the user in a prompt dialog.
+
{{domxref("Window.requestAnimationFrame()")}}
+
Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame.
+
{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}
+
Enables the scheduling of tasks during a browser's idle periods.
+
{{domxref("Window.resizeBy()")}}
+
Resizes the current window by a certain amount.
+
{{domxref("Window.resizeTo()")}}
+
Dynamically resizes window.
+
{{domxref("Window.scroll()")}}
+
Scrolls the window to a particular place in the document.
+
{{domxref("Window.scrollBy()")}}
+
Scrolls the document in the window by the given amount.
+
{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}
+
Scrolls the document by the given number of lines.
+
{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}
+
Scrolls the current document by the specified number of pages.
+
{{domxref("Window.scrollTo()")}}
+
Scrolls to a particular set of coordinates in the document.
+
{{domxref("Window.setImmediate()")}}
+
Executes a function after the browser has finished other heavy tasks
+
{{domxref("Window.setResizable()")}} {{Non-standard_inline}}
+
Toggles a user's ability to resize a window.
+
{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}
+
Sizes the window according to its content.
+
{{domxref("Window.stop()")}}
+
This method stops window loading.
+
{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}
+
Updates the state of commands of the current chrome window (UI).
+
+ +

Methods implemented from elsewhere

+ +
+
{{domxref("EventTarget.addEventListener()")}}
+
Register an event handler to a specific event type on the window.
+
{{domxref("EventTarget.dispatchEvent()")}}
+
Used to trigger an event.
+
{{domxref("WindowOrWorkerGlobalScope.atob()")}}
+
Decodes a string of data which has been encoded using base-64 encoding.
+
{{domxref("WindowOrWorkerGlobalScope.btoa()")}}
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}
+
Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}
+
Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at (sx, sy) with width sw, and height sh.
+
{{domxref("WindowOrWorkerGlobalScope.fetch()")}}
+
Starts the process of fetching a resource from the network.
+
{{domxref("EventTarget.removeEventListener")}}
+
Removes an event listener from the window.
+
{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}
+
Schedules a function to execute every time a given number of milliseconds elapses.
+
{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}
+
Schedules a function to execute in a given amount of time.
+
+ +

Deprecated methods

+ +
+
{{domxref("Window.back()")}} {{Non-standard_inline}} {{deprecated_inline}}
+
Moves back one in the window history. This method is deprecated; you should instead use {{domxref("History.back", "window.history.back()")}}.
+
{{domxref("Window.captureEvents()")}} {{Non-standard_inline}} {{deprecated_inline}}
+
Registers the window to capture all events of the specified type.
+
{{domxref("Window.forward()")}} {{Non-standard_inline}} {{deprecated_inline}}
+
Moves the window one document forward in the history. This method is deprecated; you should instead use {{domxref("History.forward", "window.history.forward()")}}.
+
{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{deprecated_inline}}
+
Flashes the application icon.
+
{{domxref("Window.home()")}} {{Non-standard_inline}} {{deprecated_inline}}
+
Returns the browser to the home page.
+
{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{deprecated_inline}}
+
Opens a new dialog window.
+
{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{deprecated_inline}}
+
Releases the window from trapping events of a specific type.
+
{{domxref("Window.showModalDialog()")}} {{Non-standard_inline}} {{deprecated_inline}}
+
Displays a modal dialog.
+
+ +

Event handlers

+ +

These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.

+ +

This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.

+ +
+
{{domxref("Window.onappinstalled")}}
+
Called when the page is installed as a webapp. See {{domxref("Window/appinstalled_event", "appinstalled")}} event.
+
{{domxref("Window.onbeforeinstallprompt")}}
+
An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.
+
{{domxref("Window.ondevicelight")}}
+
An event handler property for any ambient light levels changes
+
{{domxref("Window.ondevicemotion")}}
+
Called if accelerometer detects a change (For mobile devices)
+
{{domxref("Window.ondeviceorientation")}}
+
Called when the orientation is changed (For mobile devices)
+
{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}}
+
An event handler property for any device orientation changes.
+
{{domxref("Window.ondeviceproximity")}}
+
An event handler property for device proximity event
+
{{domxref("Window.ongamepadconnected")}}
+
Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).
+
{{domxref("Window.ongamepaddisconnected")}}
+
Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).
+
{{domxref("Window.onmozbeforepaint")}}
+
An event handler property for the MozBeforePaint event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.
+
{{domxref("Window.onpaint")}}
+
An event handler property for paint events on the window.
+
{{domxref("Window.onrejectionhandled")}}
+
An event handler for handled {{jsxref("Promise")}} rejection events.
+
{{domxref("Window.onuserproximity")}}
+
An event handler property for user proximity events.
+
{{domxref("Window.onvrdisplayconnect")}}
+
Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).
+
{{domxref("Window.onvrdisplaydisconnect")}}
+
Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).
+
{{domxref("Window.onvrdisplayactivate")}}
+
Represents an event handler that will run when a display is able to be presented to (when the {{event("vrdisplayactivate")}} event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.
+
{{domxref("Window.onvrdisplaydeactivate")}}
+
Represents an event handler that will run when a display can no longer be presented to (when the {{event("vrdisplaydeactivate")}} event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.
+
{{domxref("Window.onvrdisplayblur")}}
+
Represents an event handler that will run when presentation to a display has been paused for some reason by the browser, OS, or VR hardware (when the {{event("vrdisplayblur")}} event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.
+
{{domxref("Window.onvrdisplayfocus")}}
+
Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).
+
{{domxref("Window.onvrdisplaypresentchange")}}
+
represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("vrdisplaypresentchange")}} event fires).
+
+ +

Event handlers implemented from elsewhere

+ +
+
{{domxref("GlobalEventHandlers.onabort")}}
+
Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress
+
{{domxref("WindowEventHandlers.onafterprint")}}
+
Called when the print dialog box is closed. See {{event("afterprint")}} event.
+
{{domxref("WindowEventHandlers.onbeforeprint")}}
+
Called when the print dialog box is opened. See {{event("beforeprint")}} event.
+
{{domxref("WindowEventHandlers.onbeforeunload")}}
+
An event handler property for before-unload events on the window.
+
{{domxref("GlobalEventHandlers.onblur")}}
+
Called after the window loses focus, such as due to a popup.
+
{{domxref("GlobalEventHandlers.onchange")}}
+
An event handler property for change events on the window.
+
{{domxref("GlobalEventHandlers.onclick")}}
+
Called after the ANY mouse button is pressed & released
+
{{domxref("GlobalEventHandlers.ondblclick")}}
+
Called when a double click is made with ANY mouse button.
+
{{domxref("GlobalEventHandlers.onclose")}}
+
Called after the window is closed
+
{{domxref("GlobalEventHandlers.oncontextmenu")}}
+
Called when the RIGHT mouse button is pressed
+
{{domxref("GlobalEventHandlers.onerror")}}
+
Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.
+
{{domxref("GlobalEventHandlers.onfocus")}}
+
Called after the window receives or regains focus. See {{event("focus")}} events.
+
{{domxref("WindowEventHandlers.onhashchange")}}
+
An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.
+
{{domxref("GlobalEventHandlers.oninput")}}
+
Called when the value of an <input> element changes
+
{{domxref("GlobalEventHandlers.onkeydown")}}
+
Called when you begin pressing ANY key. See {{event("keydown")}} event.
+
{{domxref("GlobalEventHandlers.onkeypress")}}
+
Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.
+
{{domxref("GlobalEventHandlers.onkeyup")}}
+
Called when you finish releasing ANY key. See {{event("keyup")}} event.
+
{{domxref("WindowEventHandlers.onlanguagechange")}}
+
An event handler property for {{event("languagechange")}} events on the window.
+
{{domxref("GlobalEventHandlers.onload")}}
+
Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.
+
{{domxref("WindowEventHandlers.onmessage")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousedown")}}
+
Called when ANY mouse button is pressed.
+
{{domxref("GlobalEventHandlers.onmousemove")}}
+
Called continously when the mouse is moved inside the window.
+
{{domxref("GlobalEventHandlers.onmouseout")}}
+
Called when the pointer leaves the window.
+
{{domxref("GlobalEventHandlers.onmouseover")}}
+
Called when the pointer enters the window
+
{{domxref("GlobalEventHandlers.onmouseup")}}
+
Called when ANY mouse button is released
+
{{domxref("WindowEventHandlers.onoffline")}}
+
Called when network connection is lost. See {{event("offline")}} event.
+
{{domxref("WindowEventHandlers.ononline")}}
+
Called when network connection is established. See {{event("online")}} event.
+
{{domxref("WindowEventHandlers.onpagehide")}}
+
Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.
+
{{domxref("WindowEventHandlers.onpageshow")}}
+
Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.
+
{{domxref("WindowEventHandlers.onpopstate")}}
+
Called when a back button is pressed.
+
{{domxref("GlobalEventHandlers.onreset")}}
+
Called when a form is reset
+
{{domxref("GlobalEventHandlers.onresize")}}
+
Called continuously as you are resizing the window.
+
{{domxref("GlobalEventHandlers.onscroll")}}
+
Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked
+
{{domxref("GlobalEventHandlers.onwheel")}}
+
Called when the mouse wheel is rotated around any axis
+
{{domxref("GlobalEventHandlers.onselect")}}
+
Called after text in an input field is selected
+
{{domxref("GlobalEventHandlers.onselectionchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.
+
{{domxref("WindowEventHandlers.onstorage")}}
+
Called when there is a change in session storage or local storage. See {{event("storage")}} event
+
{{domxref("GlobalEventHandlers.onsubmit")}}
+
Called when a form is submitted
+
{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}
+
An event handler for unhandled {{jsxref("Promise")}} rejection events.
+
{{domxref("WindowEventHandlers.onunload")}}
+
Called when the user navigates away from the page.
+
+ +

Events

+ +

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

+ +
+
{{domxref("Window/error_event", "error")}}
+
Fired when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.
+ Also available via the {{domxref("GlobalEventHandlers/onerror", "onerror")}} property.
+
{{domxref("Window/languagechange_event", "languagechange")}}
+
Fired at the global scope object when the user's preferred language changes.
+ Also available via the {{domxref("WindowEventHandlers/onlanguagechange", "onlanguagechange")}} property.
+
{{domxref("Window/orientationchange_event", "orientationchange")}}
+
Fired when the orientation of the device has changed.
+ Also available via the {{domxref("Window/onorientationchange", "onorientationchange")}} property.
+
{{domxref("Window/devicemotion_event", "devicemotion")}}
+
Fired at a regular interval, indicating the amount of physical force of acceleration the device is receiving and the rate of rotation, if available.
+
{{domxref("Window/deviceorientation_event", "deviceorientation")}}
+
Fired when fresh data is available from the magnetometer orientation sensor about the current orientation of the device as compared to the Earth coordinate frame.
+
{{domxref("Document/defaultView/resize_event", "resize")}}
+
Fired when the window has been resized.
+ Also available via the {{domxref("GlobalEventHandlers/onresize", "onresize")}} property.
+
{{domxref("Document/defaultView/storage_event", "storage")}}
+
Fired when a storage area (localStorage or sessionStorage) has been modified in the context of another document.
+ Also available via the {{domxref("WindowEventHandlers/onstorage", "onstorage")}} property.
+
+ +

Animation events

+ +
+
{{domxref("Window/animationcancel_event", "animationcancel")}}
+
Fired when an animation unexpectedly aborts.
+ Also available via the {{domxref("GlobalEventHandlers/onanimationcancel", "onanimationcancel")}} property.
+
{{domxref("Window/animationend_event", "animationend")}}
+
Fired when an animation has completed normally.
+ Also available via the {{domxref("GlobalEventHandlers/onanimationend", "onanimationend")}} property.
+
{{domxref("Window/animationiteration_event", "animationiteration")}}
+
Fired when an animation iteration has completed.
+ Also available via the {{domxref("GlobalEventHandlers/onanimationiteration", "onanimationiteration")}} property.
+
{{domxref("Window/animationstart_event", "animationstart")}}
+
Fired when an animation starts.
+ Also available via the {{domxref("GlobalEventHandlers/onanimationstart", "onanimationstart")}} property.
+
+ +

Clipboard events

+ +
+
{{domxref("Window/clipboardchange_event", "clipboardchange")}}
+
Fired when the system clipboard content changes.
+
{{domxref("Window/copy_event", "copy")}}
+
Fired when the user initiates a copy action through the browser's user interface.
+ Also available via the {{domxref("HTMLElement/oncopy", "oncopy")}} property.
+
{{domxref("Window/cut_event", "cut")}}
+
Fired when the user initiates a cut action through the browser's user interface.
+ Also available via the {{domxref("HTMLElement/oncut", "oncut")}} property.
+
{{domxref("Window/paste_event", "paste")}}
+
Fired when the user initiates a paste action through the browser's user interface.
+ Also available via the {{domxref("HTMLElement/onpaste", "onpaste")}} property.
+
+ +

Connection events

+ +
+
{{domxref("Window/offline_event", "offline")}}
+
Fired when the browser has lost access to the network and the value of navigator.onLine has switched to false.
+ Also available via the {{domxref("WindowEventHandlers.onoffline", "onoffline")}} property.
+
{{domxref("Window/online_event", "online ")}}
+
Fired when the browser has gained access to the network and the value of navigator.onLine has switched to true.
+ Also available via the {{domxref("WindowEventHandlers.ononline", "ononline")}} property.
+
+ +

Focus events

+ +
+
{{domxref("Window/blur_event", "blur")}}
+
Fired when an element has lost focus.
+ Also available via the {{domxref("GlobalEventHandlers/onblur", "onblur")}} property.
+
{{domxref("Window/focus_event", "focus")}}
+
Fired when an element has gained focus.
+ Also available via the {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} property
+
+ +

Gamepad events

+ +
+
{{domxref("Window/gamepadconnected_event", "gamepadconnected")}}
+
Fired when the browser detects that a gamepad has been connected or the first time a button/axis of the gamepad is used.
+ Also available via the {{domxref("Window/ongamepadconnected", "ongamepadconnected")}} property.
+
{{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}}
+
Fired when the browser detects that a gamepad has been disconnected.
+ Also available via the {{domxref("Window/ongamepaddisconnected", "ongamepaddisconnected")}} property
+
+ +

History events

+ +
+
{{domxref("Window/hashchange_event", "hashchange")}}
+
Fired when the fragment identifier of the URL has changed (the part of the URL beginning with and following the # symbol).
+ Also available via the {{domxref("WindowEventHandlers/onhashchange", "onhashchange")}} property.
+
{{domxref("Window/pagehide_event", "pagehide")}}
+
Sent when the browser hides the current document while in the process of switching to displaying in its place a different document from the session's history. This happens, for example, when the user clicks the Back button or when they click the Forward button to move ahead in session history.
+ Also available through the onpagehide event handler property.
+
{{domxref("Window/pageshow_event", "pageshow")}}
+
Sent when the browser makes the document visible due to navigation tasks, including not only when the page is first loaded, but also situations such as the user navigating back to the page after having navigated to another within the same tab.
+ Also available using the onpageshow event handler property.
+
{{domxref("Window/popstate_event", "popstate")}}
+
Fired when the active history entry changes.
+ Also available using the {{domxref("WindowEventHandlers/onpopstate", "onpopstate")}} event handler property.
+
+ +

Load & unload events

+ +
+
{{domxref("Window/beforeunload_event", "beforeunload")}}
+
Fired when the window, the document and its resources are about to be unloaded.
+ Also available via the {{domxref("WindowEventHandlers/onbeforeunload", "onbeforeunload")}} property.
+
{{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}
+
Fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
+
{{domxref("Window/load_event", "load")}}
+
Fired when the whole page has loaded, including all dependent resources such as stylesheets images.
+ Also available via the {{domxref("GlobalEventHandlers/onload", "onload")}} property.
+
{{domxref("Window/unload_event", "unload")}}
+
Fired when the document or a child resource is being unloaded.
+ Also available via the {{domxref("WindowEventHandlers/onunload", "onunload")}} property.
+
+ +

Manifest events

+ +
+
{{domxref("Window/appinstalled_event", "appinstalled")}}
+
Fired when the browser has successfully installed a page as an application.
+ Also available via the {{domxref("Window/onappinstalled", "onappinstalled")}} property.
+
{{domxref("Window/beforeinstallprompt_event", "beforeinstallprompt")}}
+
Fired when a user is about to be prompted to install a web application.
+ Also available via the {{domxref("Window/onbeforeinstallprompt", "onbeforeinstallprompt")}} property.
+
+ +

Messaging events

+ +
+
{{domxref("Window/message_event", "message")}}
+
Fired when the window receives a message, for example from a call to {{domxref("Window/postMessage", "Window.postMessage()")}} from another browsing context.
+ Also available via the {{domxref("WindowEventHandlers/onmessage", "onmessage")}} property.
+
{{domxref("Window/messageerror_event", "messageerror")}}
+
Fired when a Window object receives a message that can't be deserialized.
+ Also available via the {{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}} property.
+
+ + + +
+
{{domxref("Window/afterprint_event", "afterprint")}}
+
Fired after the associated document has started printing or the print preview has been closed.
+ Also available via the {{domxref("WindowEventHandlers/onafterprint", "onafterprint")}} property.
+
{{domxref("Window/beforeprint_event", "beforeprint")}}
+
Fired when the associated document is about to be printed or previewed for printing.
+ Also available via the {{domxref("WindowEventHandlers/onbeforeprint", "onbeforeprint")}} property.
+
+ +

Promise rejection events

+ +
+
{{domxref("Window/rejectionhandled_event", "rejectionhandled")}}
+
Sent every time a JavaScript {{jsxref("Promise")}} is rejected, regardless of whether or not there is a handler in place to catch the rejection.
+ Also available through the {{domxref("WindowEventHandlers/onrejectionhandled", "onrejectionhandled")}} event handler property.
+
{{domxref("Window/unhandledrejection_event", "unhandledrejection")}}
+
Sent when a JavaScript {{jsxref("Promise")}} is rejected but there is no handler in place to catch the rejection.
+ Also available using the {{domxref("WindowEventHandlers/onunhandledrejection", "onunhandledrejection")}} event handler property.
+
+ +

Transition events

+ +
+
{{domxref("Window/transitioncancel_event", "transitioncancel")}}
+
Fired when a CSS transition is canceled.
+ Also available via the {{domxref("GlobalEventHandlers/ontransitioncancel", "ontransitioncancel")}} property.
+
{{domxref("Window/transitionend_event", "transitionend")}}
+
Fired when a CSS transition has completed.
+ Also available via the {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}} property.
+
{{domxref("Window/transitionrun_event", "transitionrun")}}
+
Fired when a CSS transition is first created.
+ Also available via the {{domxref("GlobalEventHandlers/ontransitionrun", "ontransitionrun")}} property.
+
{{domxref("Window/transitionstart_event", "transitionstart")}}
+
Fired when a CSS transition has actually started.
+ Also available via the {{domxref("GlobalEventHandlers/ontransitionstart", "ontransitionstart")}} property.
+
+ +

WebVR events

+ +
+
{{domxref("Window/vrdisplayactivate_event", "vrdisplayactivate")}}
+
Fired when a VR display becomes available to be presented to, for example if an HMD has been moved to bring it out of standby, or woken up by being put on.
+ Also available via the {{domxref("Window/onvrdisplayactivate", "onvrdisplayactivate")}} property.
+
{{domxref("Window/vrdisplayblur_event", "vrdisplayblur")}}
+
Fired when presentation to a VR display has been paused for some reason by the browser, OS, or VR hardware.
+ Also available via the {{domxref("Window/onvrdisplayblur", "onvrdisplayblur")}} property.
+
{{domxref("Window/vrdisplayconnect_event", "vrdisplayconnect")}}
+
Fired when a compatible VR display is connected to the computer.
+ Also available via the {{domxref("Window/onvrdisplayconnect", "onvrdisplayconnect")}} property.
+
{{domxref("Window/vrdisplaydeactivate_event", "vrdisplaydeactivate")}}
+
Fired when a VR display can no longer be presented to, for example if an HMD has gone into standby or sleep mode due to a period of inactivity.
+ Also available via the {{domxref("Window/onvrdisplaydeactivate", "onvrdisplaydeactivate")}} property.
+
{{domxref("Window/vrdisplaydisconnect_event", "vrdisplaydisconnect")}}
+
Fired when a compatible VR display is disconnected from the computer.
+ Also available via the {{domxref("Window/onvrdisplaydisconnect", "onvrdisplaydisconnect")}} property.
+
{{domxref("Window/vrdisplayfocus_event", "vrdisplayfocus")}}
+
Fired when presentation to a VR display has resumed after being blurred.
+ Also available via the {{domxref("Window/onvrdisplayfocus", "onvrdisplayfocus")}} property.
+
{{domxref("Window/vrdisplaypresentchange_event", "vrdisplaypresentchange")}}
+
Fired when the presenting state of a VR display changes — i.e. goes from presenting to not presenting, or vice versa.
+ Also available via the {{domxref("Window/onvrdisplaypresentchange", "onvrdisplaypresentchange")}} property.
+
{{domxref ("Window / vrdisplaypointerrestricted_event", "vrdisplaypointerrestricted")}}
+
ยิงเมื่อป้อนข้อมูลตัวชี้แสดงผล VR ของถูก จำกัด การบริโภคผ่านองค์ประกอบ pointerlocked
+ พร้อมใช้งานผ่านคุณสมบัติ {{domxref ("Window / onvrdisplaypointerrestricted", "onvrdisplaypointerrestricted")}}
+
{{domxref ("Window / vrdisplaypointerunrestricted_event", "vrdisplaypointerunrestricted")}}
+
ยิงเมื่อป้อนข้อมูลตัวชี้แสดงผล VR จะไม่ถูก จำกัด การบริโภคผ่านองค์ประกอบ pointerlocked
+ พร้อมใช้งานผ่านคุณสมบัติ {{domxref ("Window / onvrdisplaypointerunrestricted", "onvrdisplaypointerunrestricted")}}
+
+ +

อินเทอร์เฟซ

+ +

ดูDOM อ้างอิง

+ +

ความเข้ากันได้ของเบราว์เซอร์

+ + + +

{{Compat ("api.Window")}}

diff --git a/files/th/web/api/xmlhttprequest/index.html b/files/th/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..fdf5705218 --- /dev/null +++ b/files/th/web/api/xmlhttprequest/index.html @@ -0,0 +1,186 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +translation_of: Web/API/XMLHttpRequest +--- +
{{APIRef("XMLHttpRequest") } }
+ +

ใช้วัตถุ (XHR) เพื่อโต้ตอบกับเซิร์ฟเวอร์ คุณสามารถดึงข้อมูลจาก URL โดยไม่ต้องทำการฟื้นฟูเต็มหน้า เว็บเพจการปรับปรุงเพียงบางส่วนของหน้าโดยไม่กระทบกับสิ่งที่ผู้ใช้จะทำได้XMLHttpRequest XMLHttpRequest ใช้มากใน {{Glossary("AJAX") } } เขียนโปรแกรม

+ +

{{InheritanceDiagram (650, 150) } }

+ +

แม้จะชื่อ สามารถใช้ในการดึงข้อมูลทุกประเภทของข้อมูล XML ไม่เพียงXMLHttpRequest

+ +

ถ้าจำเป็นต้องเกี่ยวข้องกับการได้รับข้อมูลเหตุการณ์หรือข้อความจากเซิร์ฟเวอร์สื่อสารของคุณ ลองใช้กิจกรรมเซิร์ฟเวอร์ส่งผ่านอินเทอร์เฟซ {{domxref("EventSource") } } สำหรับเพล็กซ์การสื่อสารWebSocketsอาจเป็นทางเลือกที่ดี

+ +

Constructor

+ +
+
{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}
+
The constructor initializes an XMLHttpRequest. It must be called before any other method calls.
+
+ +

Properties

+ +

This interface also inherits properties of {{domxref("XMLHttpRequestEventTarget")}} and of {{domxref("EventTarget")}}.

+ +
+
{{domxref("XMLHttpRequest.onreadystatechange")}}
+
An {{domxref("EventHandler")}} that is called whenever the attribute changes.readyState
+
{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}
+
Returns an , the state of the request.unsigned short
+
{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}
+
Returns an {{jsxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, JavaScript object, or a {{domxref("DOMString")}}, depending on the value of {{domxref("XMLHttpRequest.responseType")}}, that contains the response entity body.
+
{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}
+
Returns a {{domxref("DOMString")}} that contains the response to the request as text, or if the request was unsuccessful or has not yet been sent.null
+
{{domxref("XMLHttpRequest.responseType")}}
+
Is an enumerated value that defines the response type.
+
{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}
+
Returns the serialized URL of the response or the empty string if the URL is null.
+
{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}
+
Returns a {{domxref("Document")}} containing the response to the request, or if the request was unsuccessful, has not yet been sent, or cannot be parsed as XML or HTML. Not available in workers.null
+
{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}
+
Returns an with the status of the response of the request.unsigned short
+
{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}
+
Returns a {{domxref("DOMString")}} containing the response string returned by the HTTP server. Unlike {{domxref("XMLHttpRequest.status")}}, this includes the entire text of the response message ("", for example).200 OK
+
+ +
+

Note: According to the HTTP/2 specification (8.1.2.4 Response Pseudo-Header Fields), HTTP/2 does not define a way to carry the version or reason phrase that is included in an HTTP/1.1 status line.

+
+ +
+
{{domxref("XMLHttpRequest.timeout")}}
+
Is an representing the number of milliseconds a request can take before automatically being terminated.unsigned long
+
{{domxref("XMLHttpRequestEventTarget.ontimeout")}}
+
Is an {{domxref("EventHandler")}} that is called whenever the request times out. {{gecko_minversion_inline("12.0")}}
+
{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}
+
Is an {{domxref("XMLHttpRequestUpload")}}, representing the upload process.
+
{{domxref("XMLHttpRequest.withCredentials")}}
+
Is a {{domxref("Boolean")}} that indicates whether or not cross-site requests should be made using credentials such as cookies or authorization headers.Access-Control
+
+ +

Non-standard properties

+ +
+
{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}
+
Is a {{Interface("nsIChannel")}}. The channel used by the object when performing the request.
+
{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}
+
Is a boolean. If true, the request will be sent without cookie and authentication headers.
+
{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}
+
Is a boolean. If true, the same origin policy will not be enforced on the request.
+
{{domxref("XMLHttpRequest.mozBackgroundRequest")}}
+
Is a boolean. It indicates whether or not the object represents a background service request.
+
{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}
+
{{jsxref("ArrayBuffer")}}. The response to the request, as a JavaScript typed array.
+
{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}
+
This Gecko-only feature, a boolean, was removed in Firefox/Gecko 22. Please use Server-Sent Events, Web Sockets, or from progress events instead.responseText
+
+ +

Event handlers

+ +

onreadystatechange as a property of the instance is supported in all browsers.XMLHttpRequest

+ +

Since then, a number of additional event handlers have been implemented in various browsers (, , , etc.). See Using XMLHttpRequest.onloadonerroronprogress

+ +

More recent browsers, including Firefox, also support listening to the events via standard {{domxref("EventTarget.addEventListener", "addEventListener()")}} APIs in addition to setting properties to a handler function.XMLHttpRequeston*

+ +

Methods

+ +
+
{{domxref("XMLHttpRequest.abort()")}}
+
Aborts the request if it has already been sent.
+
{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}
+
Returns all the response headers, separated by {{Glossary("CRLF")}}, as a string, or if no response has been received.null
+
{{domxref("XMLHttpRequest.getResponseHeader()")}}
+
Returns the string containing the text of the specified header, or if either the response has not yet been received or the header doesn't exist in the response.null
+
{{domxref("XMLHttpRequest.open()")}}
+
Initializes a request. This method is to be used from JavaScript code; to initialize a request from native code, use openRequest() instead.
+
{{domxref("XMLHttpRequest.overrideMimeType()")}}
+
Overrides the MIME type returned by the server.
+
{{domxref("XMLHttpRequest.send()")}}
+
Sends the request. If the request is asynchronous (which is the default), this method returns as soon as the request is sent.
+
{{domxref("XMLHttpRequest.setRequestHeader()")}}
+
Sets the value of an HTTP request header. You must call after open(), but before .setRequestHeader()send()
+
+ +

Non-standard methods

+ +
+
{{domxref("XMLHttpRequest.init()")}}
+
Initializes the object for use from C++ code.
+
+ +
Warning: This method must not be called from JavaScript.
+ +
+
{{domxref("XMLHttpRequest.openRequest()")}}
+
Initializes a request. This method is to be used from native code; to initialize a request from JavaScript code, use open() instead. See the documentation for .open()
+
{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}
+
A variant of the method that sends binary data.send()
+
+ +

Events

+ +
+
{{domxref("XMLHttpRequest/abort_event", "abort")}}
+
Fired when a request has been aborted, for example because the program called {{domxref("XMLHttpRequest.abort()")}}.
+ Also available via the {{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}} property.
+
{{domxref("XMLHttpRequest/error_event", "error")}}
+
Fired when the request encountered an error.
+ Also available via the {{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}} property.
+
{{domxref("XMLHttpRequest/load_event", "load")}}
+
Fired when an {{domxref("XMLHttpRequest")}} transaction completes successfully.
+ Also available via the {{domxref("XMLHttpRequestEventTarget/onload", "onload")}} property.
+
{{domxref("XMLHttpRequest/loadend_event", "loadend")}}
+
Fired when a request has completed, whether successfully (after {{domxref("XMLHttpRequest/load_event", "load")}}) or unsuccessfully (after {{domxref("XMLHttpRequest/abort_event", "abort")}} or {{domxref("XMLHttpRequest/error_event", "error")}}).
+ Also available via the {{domxref("XMLHttpRequestEventTarget/onloadend", "onloadend")}} property.
+
{{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}
+
Fired when a request has started to load data.
+ Also available via the {{domxref("XMLHttpRequestEventTarget/onloadstart", "onloadstart")}} property.
+
{{domxref("XMLHttpRequest/progress_event", "progress")}}
+
Fired periodically when a request receives more data.
+ Also available via the {{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}} property.
+
{{domxref("XMLHttpRequest/timeout_event", "timeout")}}
+
Fired when progress is terminated due to preset time expiring.
+ Also available via the {{domxref("XMLHttpRequestEventTarget/ontimeout", "ontimeout")}} property.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}}Live standard, latest version
+ +

Browser compatibility

+ + + +
{{Compat("api.XMLHttpRequest")}}
+ +

See also

+ + diff --git a/files/th/web/api/xrreferencespacetype/index.html b/files/th/web/api/xrreferencespacetype/index.html new file mode 100644 index 0000000000..924dc67251 --- /dev/null +++ b/files/th/web/api/xrreferencespacetype/index.html @@ -0,0 +1,78 @@ +--- +title: XRReferenceSpaceType +slug: Web/API/XRReferenceSpaceType +translation_of: Web/API/XRReferenceSpaceType +--- +

{{APIRef("WebXR Device API")}}

+ +

The XRReferenceSpaceType enumerated type defines the strings which identify the types of reference spaces supported by WebXR. This type is used when calling the {{domxref("XRSession.requestReferenceSpace", "requestReferenceSpace()")}} method to obtain a reference space for an {{domxref("XRSession")}}.

+ +

Values

+ +

The reference space returned by {{domxref("XRSession.requestReferenceSpace()")}} is either {{domxref("XRReferenceSpace")}} or {{domxref("XRBoundedReferenceSpace")}}. The "Interface" column in the table below indicates which of the two types is returned for each reference space type constant.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
XRReferenceSpaceTypeDescriptionInterface
bounded-floorSimilar to the local type, except the user is not expected to move outside a predetermined boundary, given by the {{domxref("XRBoundedReferenceSpace.boundsGeometry", "boundsGeometry")}} in the returned object.{{domxref("XRBoundedReferenceSpace")}}
local +

A tracking space whose native origin is located near the viewer's position at the time the session was created. The exact position depends on the underlying platform and implementation. The user isn't expected to move much if at all beyond their starting position, and tracking is optimized for this use case.

+ +

For devices with six degrees of freedom (6DoF) tracking, the local reference space tries to keep the origin stable relative to the environment.

+ 		{{domxref("XRReferenceSpace")}}
local-floorSimilar to the local type, except the starting position is placed in a safe location for the viewer to stand, where the value of the y axis is 0 at floor level. If that floor level isn't known, the {{Glossary("user agent")}} will estimate the floor level. If the estimated floor level is non-zero, the browser is expected to round it such a way as to avoid fingerprinting (likely to the nearest centimeter).{{domxref("XRReferenceSpace")}}
unboundedA tracking space which allows the user total freedom of movement, possibly over extremely long distances from their origin point. The viewer isn't tracked at all; tracking is optimized for stability around the user's current position, so the native origin may drift as needed to accommodate that need.{{domxref("XRReferenceSpace")}}
viewerพื้นที่ติดตามที่แหล่งกำเนิดดั้งเดิมติดตามตำแหน่งและทิศทางของผู้ดู สิ่งนี้ใช้สำหรับสภาพแวดล้อมที่ผู้ใช้สามารถย้ายไปรอบ ๆ ทางกายภาพและได้รับการสนับสนุนโดย {{domxref ("XRSession")}} ทั้งหมดทั้งที่ดื่มด่ำและอินไลน์แม้ว่าจะมีประโยชน์มากที่สุดสำหรับเซสชันอินไลน์ มันมีประโยชน์อย่างยิ่งเมื่อกำหนดระยะห่างระหว่างวิวเวอร์กับอินพุตหรือเมื่อทำงานกับออฟเซ็ตเว้นวรรค มิฉะนั้นโดยทั่วไปหนึ่งในประเภทพื้นที่อ้างอิงอื่น ๆ จะถูกใช้บ่อยกว่า{{domxref ( "XRReferenceSpace")}}
+
+ +

ข้อมูลจำเพาะ

+ + + + + + + + + + + + + + + + +
สเปคสถานะคิดเห็น
{{SpecName ( 'WebXR', '# enumdef-xrreferencespacetype', 'XRReferenceSpaceType')}}{{Spec2 ( 'WebXR')}}คำจำกัดความเบื้องต้น
+ +

ความเข้ากันได้ของเบราว์เซอร์

+ +

{{compat ( "api.XRReferenceSpaceType")}}

diff --git a/files/th/web/css/index.html b/files/th/web/css/index.html new file mode 100644 index 0000000000..15b34c9be5 --- /dev/null +++ b/files/th/web/css/index.html @@ -0,0 +1,106 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - Landing + - Reference + - TopicStub + - การออกแบบ + - การอ้างอิง + - ต้องการการแปล + - เค้าโครง +translation_of: Web/CSS +--- +
{{CSSRef}}
+ +

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or {{Glossary("XHTML", "", 1)}}). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

+ +

CSS is one of the core languages of the open Web and is standardized across Web browsers according to the W3C specification. Developed in levels, CSS1 is now obsolete, CSS2.1 is a recommendation, and CSS3, now split into smaller modules, is progressing on the standardization track.

+ +
+ + +
+
+

Tutorials

+ +

Our CSS Learning Area features multiple modules that teach CSS from the ground up — no previous knowledge required.

+ +
+
Introduction to CSS
+
This module starts with the basics of how CSS works, including selectors and properties, writing CSS rules, applying CSS to HTML, how to specify length, color, and other units in CSS, cascade and inheritance, box model basics, and debugging CSS.
+
Styling text
+
This module discusses text styling fundamentals, including setting fonts, boldness, italics, line and letter spacing, text drop shadows, and other text properties. This module finishes with applying custom fonts to your page, and styling lists and links.
+
Styling boxes
+
This module looks at styling boxes, one of the fundamental steps towards laying out a web page. In this module we recap the box model, then look at controlling box layouts by setting margins, borders, and padding, custom background colors, images and other features, and fancy features such as drop shadows and filters on boxes.
+
CSS layout
+
At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so you can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and newfangled layout tools like flexbox.
+
+
+ +
+

Reference

+ + + +

Cookbook

+ +

The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.

+ +

Tools for CSS development

+ + + +

Meta bugs

+ +
    +
  • Firefox: {{bug(1323667)}}
    • +
+
+
+
+ +

See also

+ + diff --git a/files/th/web/css/margin/index.html b/files/th/web/css/margin/index.html new file mode 100644 index 0000000000..e0dc9d6183 --- /dev/null +++ b/files/th/web/css/margin/index.html @@ -0,0 +1,227 @@ +--- +title: margin +slug: Web/CSS/margin +tags: + - CSS + - การอ้างอิง + - คุณสมบัติของ CSS +translation_of: Web/CSS/margin +--- +
{{CSSRef}}
+ +

สาระสำคัญ

+ +

คุณสมบัติ CSS margin ใช้ในการตั้งระยะขอบกั้นทั้งสี่ด้าน ซึ่งมีรูปย่อเพื่อหลีกเลี่ยงการตั้งแต่ละด้านที่แยกออกไปด้วยคุณสมบัติ margin อื่นๆ คือ: {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }} และ {{ Cssxref("margin-left") }}.

+ +

อนุญาตให้ใช้ค่าที่ติดลบได้

+ +

{{cssinfo}}

+ +

ไวยากรณ์

+ +
/* นำไปใช้กับสี่ด้าน */
+margin: 1em;
+
+/* ด้านแนวตั้ง | ด้านแนวนอน */
+margin: 5% auto;
+
+/* ด้านบน | ด้านแนวนอน | ด้านล่าง */
+margin: 1em auto 2em;
+
+/* ด้านบน | ด้านขวา | ด้านล่าง | ด้านซ้าย */
+margin: 2px 1em 0 auto;
+
+/* ค่า Global */
+margin: inherit;
+margin: initial;
+margin: unset;
+
+ +

ค่า

+ +

ยอมรับทั้งหนึ่ง สอง สาม หรือสี่ค่า ดังต่อไปนี้:

+ +
+
<ความยาว>
+
กำหนดความกว้างคงที่ อนุญาตให้ใช้ค่าที่ติดลบได้ ดูที่ {{cssxref("<length>")}} สำหรับหน่วยวัดที่ใช้ได้
+
<ร้อยละ>
+
ค่า {{cssxref("<percentage>")}} ที่สัมพันธ์กับ ความกว้าง ของภายในบล็อกนั้น อนุญาตให้ใช้ค่าที่ติดลบได้
+
auto
+
auto จะถูกแทนที่ด้วยบางค่าที่เหมาะสม เช่น สามารถใช้ในการจัดแนวบล็อก div ลูกให้อยู่กึ่งกลางตามแนวนอนภายใน div  แม่ได้ { width:50%;  margin:0 auto; } 
+
+ + + +

ไวยากรณ์ทั่วไป

+ +
{{csssyntax}}
+ +

ตัวอย่าง

+ +

ตัวอย่างอย่างง่าย

+ +

HTML

+ +
<div class="ex1">
+  margin:     auto;
+  background: gold;
+  width:      66%;
+</div>
+<div class="ex2">
+  margin:     20px 0 0 -20px;
+  background: gold;
+  width:      66%;
+</div>
+ +

CSS

+ +
.ex1 {
+  margin: auto;
+  background: gold;
+  width: 66%;
+}
+.ex2 {
+  margin: 20px 0px 0 -20px;
+  background: gold;
+  width: 66%;
+}
+ +

{{ EmbedLiveSample('Simple_example') }}

+ +

ตัวอย่างอื่นๆ

+ +
margin: 5%;                /* ระยะขอบกั้น 5% ทั้งหมด */
+
+margin: 10px;              /* ระยะขอบกั้น 10px ทั้งหมด */
+
+margin: 1.6em 20px;        /* ระยะขอบกั้นด้านบนและด้านล่าง 1.6em และ ด้านซ้ายและด้านขวา 20px */
+
+margin: 10px 3% 1em;       /* ระยะขอบกั้นด้านบน 10px ด้านซ้ายและด้านขวา 3% และด้านล่าง 1em */
+
+margin: 10px 3px 30px 5px; /* ระยะขอบกั้นด้านบน 10px ด้านขวา 3px ด้านล่าง 30px และด้านซ้าย 5px */
+
+margin: 1em auto;          /* ระยะขอบกั้นด้านบนและด้านล่าง 1em  และกล่องจะถูกจัดกึ่งกลางตามแนวนอน */
+
+margin: auto;              /* กล่องจะถูกจัดกึ่งกลางตามแนวนอน ระยะขอบกั้นด้านบนและด้านล่างเป็น 0 */
+
+ +

การจัดกึ่งกลางตามแนวนอนด้วย margin: 0 auto;

+ +

เพื่อทำให้บางสิ่งอยู่กึ่งกลางตามแนวนอนในเบราเซอร์สมัยใหม่ จะใช้ display: flex; justify-content: center; .

+ +

อย่างไรก็ตาม เบราเซอร์เก่าเช่น IE8-9 ยังไม่พร้อมใช้งาน ในการเรียงให้กึ่งกลางภายในอิลิเมนต์แม่ ให้ใช้ margin: 0 auto;

+ +

ข้อกำหนด

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ข้อกำหนดสถานะความเห็น
{{ SpecName('CSS3 Box', '#margin', 'margin') }}{{ Spec2('CSS3 Box') }}ไม่มีการเปลี่ยนแปลงอย่างมีนัยสำคัญ
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}{{ Spec2('CSS3 Transitions') }}กำหนดให้ margin สามารถเคลื่อนไหวได้
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}{{ Spec2('CSS2.1') }}Removes its effect on inline elements.
{{ SpecName('CSS1', '#margin', 'margin') }}{{ Spec2('CSS1') }}กำหนดนินามตั้งต้น
+ +

ความกันได้ของเบราเซอร์

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
คุณลักษณะChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
การรองรับเบื้องต้น1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1") }}3.03.51.0 (85)
ค่า auto1.0{{CompatUnknown}}{{ CompatGeckoDesktop("1") }}6.0 (โหมดจำกัด)3.51.0 (85)
+
+ +
+ + + + + + +
คุณลักษณะ
+ + + + + + + + + + + + + + + + + + + + + +
AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
การรองรับเบื้องต้น1.0{{CompatVersionUnknown}}{{ CompatGeckoMobile("1") }}6.06.01.0
+
+ +

ดูเพิ่มเติม

+ + diff --git a/files/th/web/guide/graphics/index.html b/files/th/web/guide/graphics/index.html new file mode 100644 index 0000000000..a521c73391 --- /dev/null +++ b/files/th/web/guide/graphics/index.html @@ -0,0 +1,39 @@ +--- +title: Graphics on the Web +slug: Web/Guide/Graphics +translation_of: Web/Guide/Graphics +--- +

เว็บไซต์และแอปพลิเคชันมักจะต้องนำเสนอกราฟิกเช่นรูปภาพ รูปภาพสแตติกสามารถแสดงได้อย่างง่ายดายโดยใช้องค์ประกอบ {{HTMLElement ("img")}} หรือโดยการตั้งค่าพื้นหลังขององค์ประกอบ HTML โดยใช้คุณสมบัติ {{cssxref ("background-image")}}} นอกจากนี้คุณยังสามารถสร้างกราฟิกได้ทันทีหรือจัดการรูปภาพตามความเป็นจริง บทความเหล่านี้ให้ข้อมูลเชิงลึกเกี่ยวกับวิธีที่คุณสามารถทำได้

+ +
+
+

กราฟิก 2D

+ +
+
ผ้าใบ
+
องค์ประกอบ {{HTMLElement ("canvas")}} จัดเตรียม API เพื่อวาดกราฟิก 2D โดยใช้ JavaScript
+
SVG
+
Scalable Vector Graphics (SVG) ช่วยให้คุณใช้เส้นเส้นโค้งและรูปทรงเรขาคณิตอื่น ๆ เพื่อแสดงผลกราฟิก ด้วยเวกเตอร์คุณสามารถสร้างภาพที่ปรับขนาดได้อย่างสมบูรณ์ในทุกขนาด
+
+ +

ดูทั้งหมด...

+
+ +
+

กราฟิก 3 มิติ

+ +
+
WebGL
+
คำแนะนำในการเริ่มต้นใช้งาน WebGL ซึ่งเป็นกราฟิก 3D API สำหรับเว็บ เทคโนโลยีนี้ช่วยให้คุณใช้ OpenGL ES มาตรฐานในเนื้อหาเว็บ
+
+ +

วีดีโอ

+ +
+
ใช้เสียงและวิดีโอ HTML5
+
การฝังวิดีโอและ / หรือเสียงในหน้าเว็บและควบคุมการเล่น
+
WebRTC
+
RTC ใน WebRTC ย่อมาจาก Real-Time Communications ซึ่งเป็นเทคโนโลยีที่เปิดใช้งานการสตรีมเสียง / วิดีโอและการแบ่งปันข้อมูลระหว่างเบราว์เซอร์ไคลเอ็นต์
+
+
+
diff --git a/files/th/web/guide/index.html b/files/th/web/guide/index.html new file mode 100644 index 0000000000..415bd14d23 --- /dev/null +++ b/files/th/web/guide/index.html @@ -0,0 +1,27 @@ +--- +title: Web developer guide +slug: Web/Guide +tags: + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide +--- +

These articles provide how-to information to help you make use of specific technologies and APIs.

+
+

Note: This page is going to be a mess for a little while until we finish migrating content. Our apologies!

+
+
+ {{LandingPageListSubpages}}
+
+
+ JavaScript
+
+ JavaScript is the powerful scripting language used to create applications for the Web.
+
+

See also

+ diff --git a/files/th/web/http/cors/errors/index.html b/files/th/web/http/cors/errors/index.html new file mode 100644 index 0000000000..d1dd12dc75 --- /dev/null +++ b/files/th/web/http/cors/errors/index.html @@ -0,0 +1,76 @@ +--- +title: CORS errors +slug: Web/HTTP/CORS/Errors +tags: + - CORS + - Errors + - HTTP + - HTTPS + - Messages + - NeedsTranslation + - Same-origin + - Security + - TopicStub + - console + - troubleshooting +translation_of: Web/HTTP/CORS/Errors +--- +
{{HTTPSidebar}}
+ +

Cross-Origin Resource Sharing ({{Glossary("CORS")}}) is a standard that allows a server to relax the same-origin policy. This is used to explicitly allow some cross-origin requests while rejecting others. For example, if a site offers an embeddable service, it may be necessary to relax certain restrictions. Setting up such a CORS configuration isn't necessarily easy and may present some challenges. In these pages, we'll look into some common CORS error messages and how to resolve them.

+ +

If the CORS configuration isn't setup correctly, the browser console will present an error like "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite" indicating that the request was blocked due to violating the CORS security rules. This might not necessarily be a set-up mistake, though. It's possible that the request is in fact intentionally being disallowed by the user's web application and remote external service. However, If the endpoint is meant to be available, some debugging is needed to succeed.

+ +

Identifying the issue

+ +

To understand the underlying issue with the CORS configuration, you need to find out which request is at fault and why. These steps may help you do so:

+ +
    +
  1. Navigate to the web site or web app in question and open the Developer Tools.
    2. +
  2. Now try to reproduce the failing transaction and check the console if you are seeing a CORS violation error message. It will probably look like this:
    3. +
+ +

Firefox console showing CORS error

+ +

The text of the error message will be something similar to the following:

+ +
Cross-Origin Request Blocked: The Same Origin Policy disallows
+reading the remote resource at https://some-url-here. (Reason:
+additional information here).
+ +
+

Note: For security reasons, specifics about what went wrong with a CORS request are not available to JavaScript code. All the code knows is that an error occurred. The only way to determine what specifically went wrong is to look at the browser's console for details.

+
+ +

CORS error messages

+ +

Firefox's console displays messages in its console when requests fail due to CORS. Part of the error text is a "reason" message that provides added insight into what went wrong.  The reason messages are listed below; click the message to open an article explaining the error in more detail and offering possible solutions.

+ + + +

See also

+ + diff --git a/files/th/web/http/cors/index.html b/files/th/web/http/cors/index.html new file mode 100644 index 0000000000..195504e50f --- /dev/null +++ b/files/th/web/http/cors/index.html @@ -0,0 +1,565 @@ +--- +title: Cross-Origin Resource Sharing (CORS) +slug: Web/HTTP/CORS +tags: + - AJAX + - CORS + - Cross-Origin Resource Sharing + - Fetch + - Fetch API + - HTTP + - HTTP Access Controls + - NeedsTranslation + - Same-origin policy + - Security + - TopicStub + - XMLHttpRequest + - 'l10n:priority' +translation_of: Web/HTTP/CORS +--- +

Cross-Origin Resource Sharing ({{Glossary("CORS")}}) is a mechanism that uses additional {{Glossary("HTTP")}} headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin. A web application makes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, and port) than its own origin.

+ +

An example of a cross-origin request: The frontend JavaScript code for a web application served from http://domain-a.com uses {{domxref("XMLHttpRequest")}} to make a request for http://api.domain-b.com/data.json.

+ +

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. For example, XMLHttpRequest and the Fetch API follow the same-origin policy. This means that a web application using those APIs can only request HTTP resources from the same origin the application was loaded from, unless the response from the other origin includes the right CORS headers.

+ +

+ +

The CORS mechanism supports secure cross-origin requests and data transfers between browsers and web servers. Modern browsers use CORS in an API container such as XMLHttpRequest or Fetch to help mitigate the risks of cross-origin HTTP requests.

+ +

Who should read this article?

+ +

Everyone, really.

+ +

More specifically, this article is for web administrators, server developers, and front-end developers. Modern browsers handle the client-side components of cross-origin sharing, including headers and policy enforcement. But this new standard means servers have to handle new request and response headers. Another article for server developers discussing cross-origin sharing from a server perspective (with PHP code snippets) is supplementary reading.

+ +

What requests use CORS?

+ +

This cross-origin sharing standard is used to enable cross-site HTTP requests for:

+ + + +

This article is a general discussion of Cross-Origin Resource Sharing and includes a discussion of the necessary HTTP headers.

+ +

Functional overview

+ +

The Cross-Origin Resource Sharing standard works by adding new HTTP headers that allow servers to describe the set of origins that are permitted to read that information using a web browser. Additionally, for HTTP request methods that can cause side-effects on server's data (in particular, for HTTP methods other than {{HTTPMethod("GET")}}, or for {{HTTPMethod("POST")}} usage with certain MIME types), the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with an HTTP {{HTTPMethod("OPTIONS")}} request method, and then, upon "approval" from the server, sending the actual request with the actual HTTP request method. Servers can also notify clients whether "credentials" (including Cookies and HTTP Authentication data) should be sent with requests.

+ +

CORS failures result in errors, but for security reasons, specifics about what went wrong are not available to JavaScript code. All the code knows is that an error occurred. The only way to determine what specifically went wrong is to look at the browser's console for details.

+ +

Subsequent sections discuss scenarios, as well as provide a breakdown of the HTTP headers used.

+ +

Examples of access control scenarios

+ +

Here, we present three scenarios that illustrate how Cross-Origin Resource Sharing works. All of these examples use the {{domxref("XMLHttpRequest")}} object, which can be used to make cross-site invocations in any supporting browser.

+ +

The JavaScript snippets included in these sections (and running instances of the server-code that correctly handles these cross-site requests) can be found "in action" at http://arunranga.com/examples/access-control/, and will work in browsers that support cross-site XMLHttpRequest.

+ +

A discussion of Cross-Origin Resource Sharing from a server perspective (including PHP code snippets) can be found in the Server-Side Access Control (CORS) article.

+ +

Simple requests

+ +

Some requests don’t trigger a CORS preflight. Those are called “simple requests” in this article, though the {{SpecName('Fetch')}} spec (which defines CORS) doesn’t use that term. A request that doesn’t trigger a CORS preflight—a so-called “simple request”—is one that meets all the following conditions:

+ + + +
Note: These are the same kinds of cross-site requests that web content can already issue, and no response data is released to the requester unless the server sends an appropriate header. Therefore, sites that prevent cross-site request forgery have nothing new to fear from HTTP access control.
+ +
Note: WebKit Nightly and Safari Technology Preview place additional restrictions on the values allowed in the {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, and {{HTTPHeader("Content-Language")}} headers. If any of those headers have ”non-standard” values, WebKit/Safari does not consider the request to meet the conditions for a “simple request”. What WebKit/Safari considers “non-standard” values for those headers is not documented except in the following WebKit bugs: Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language, Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS, and Switch to a blacklist model for restricted Accept headers in simple CORS requests. No other browsers implement those extra restrictions, because they’re not part of the spec.
+ +

For example, suppose web content on domain http://foo.example wishes to invoke content on domain http://bar.other. Code of this sort might be used within JavaScript deployed on foo.example:

+ +
var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/public-data/';
+
+function callOtherDomain() {
+  if(invocation) {
+    invocation.open('GET', url, true);
+    invocation.onreadystatechange = handler;
+    invocation.send();
+  }
+}
+
+ +

This will lead to a simple exchange between the client and the server, using CORS headers to handle the privileges:

+ +

+ +

Let us look at what the browser will send to the server in this case, and let's see how the server responds:

+ +
GET /resources/public-data/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Referer: http://foo.example/examples/access-control/simpleXSInvocation.html
+Origin: http://foo.example
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 00:23:53 GMT
+Server: Apache/2.0.61
+Access-Control-Allow-Origin: *
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Transfer-Encoding: chunked
+Content-Type: application/xml
+
+[XML Data]
+
+ +

Lines 1 - 10 are headers sent. The main HTTP request header of note here is the {{HTTPHeader("Origin")}} header on line 10 above, which shows that the invocation is coming from content on the domain http://foo.example.

+ +

Lines 13 - 22 show the HTTP response from the server on domain http://bar.other. In response, the server sends back an {{HTTPHeader("Access-Control-Allow-Origin")}} header, shown above in line 16. The use of the {{HTTPHeader("Origin")}} header and of {{HTTPHeader("Access-Control-Allow-Origin")}} show the access control protocol in its simplest use. In this case, the server responds with a Access-Control-Allow-Origin: * which means that the resource can be accessed by any domain in a cross-site manner. If the resource owners at http://bar.other wished to restrict access to the resource to requests only from http://foo.example, they would send back:

+ +

Access-Control-Allow-Origin: http://foo.example

+ +

Note that now, no domain other than http://foo.example (identified by the ORIGIN: header in the request, as in line 10 above) can access the resource in a cross-site manner. The Access-Control-Allow-Origin header should contain the value that was sent in the request's Origin header.

+ +

Preflighted requests

+ +

Unlike “simple requests” (discussed above), "preflighted" requests first send an HTTP request by the {{HTTPMethod("OPTIONS")}} method to the resource on the other domain, in order to determine whether the actual request is safe to send. Cross-site requests are preflighted like this since they may have implications to user data.

+ +

In particular, a request is preflighted if any of the following conditions is true:

+ + + +
Note: WebKit Nightly and Safari Technology Preview place additional restrictions on the values allowed in the {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, and {{HTTPHeader("Content-Language")}} headers. If any of those headers have ”non-standard” values, WebKit/Safari preflights the request. What WebKit/Safari considers “non-standard” values for those headers is not documented except in the following WebKit bugs: Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language, Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS, and Switch to a blacklist model for restricted Accept headers in simple CORS requests. No other browsers implement those extra restrictions, because they’re not part of the spec.
+ +

The following is an example of a request that will be preflighted.

+ +
var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/post-here/';
+var body = '<?xml version="1.0"?><person><name>Arun</name></person>';
+
+function callOtherDomain(){
+  if(invocation)
+    {
+      invocation.open('POST', url, true);
+      invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
+      invocation.setRequestHeader('Content-Type', 'application/xml');
+      invocation.onreadystatechange = handler;
+      invocation.send(body);
+    }
+}
+
+......
+
+ +

In the example above, line 3 creates an XML body to send with the POST request in line 8. Also, on line 9, a "customized" (non-standard) HTTP request header is set (X-PINGOTHER: pingpong). Such headers are not part of the HTTP/1.1 protocol, but are generally useful to web applications. Since the request uses a Content-Type of application/xml, and since a custom header is set, this request is preflighted.

+ +

+ +

(Note: as described below, the actual POST request does not include the Access-Control-Request-* headers; they are needed only for the OPTIONS request.)

+ +

Let's take a look at the full exchange between client and server. The first exchange is the preflight request/response:

+ +
OPTIONS /resources/post-here/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Origin: http://foo.example
+Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:39 GMT
+Server: Apache/2.0.61 (Unix)
+Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Methods: POST, GET, OPTIONS
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 0
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain
+
+ +

Once the preflight request is complete, the real request is sent:

+ +
POST /resources/post-here/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+X-PINGOTHER: pingpong
+Content-Type: text/xml; charset=UTF-8
+Referer: http://foo.example/examples/preflightInvocation.html
+Content-Length: 55
+Origin: http://foo.example
+Pragma: no-cache
+Cache-Control: no-cache
+
+<?xml version="1.0"?><person><name>Arun</name></person>
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:40 GMT
+Server: Apache/2.0.61 (Unix)
+Access-Control-Allow-Origin: http://foo.example
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 235
+Keep-Alive: timeout=2, max=99
+Connection: Keep-Alive
+Content-Type: text/plain
+
+[Some GZIP'd payload]
+
+ +

Lines 1 - 12 above represent the preflight request with the {{HTTPMethod("OPTIONS")}} method. The browser determines that it needs to send this based on the request parameters that the JavaScript code snippet above was using, so that the server can respond whether it is acceptable to send the request with the actual request parameters. OPTIONS is an HTTP/1.1 method that is used to determine further information from servers, and is a {{Glossary("safe")}} method, meaning that it can't be used to change the resource. Note that along with the OPTIONS request, two other request headers are sent (lines 10 and 11 respectively):

+ +
Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type
+
+ +

The {{HTTPHeader("Access-Control-Request-Method")}} header notifies the server as part of a preflight request that when the actual request is sent, it will be sent with a POST request method. The {{HTTPHeader("Access-Control-Request-Headers")}} header notifies the server that when the actual request is sent, it will be sent with a X-PINGOTHER and Content-Type custom headers. The server now has an opportunity to determine whether it wishes to accept a request under these circumstances.

+ +

Lines 14 - 26 above are the response that the server sends back indicating that the request method (POST) and request headers (X-PINGOTHER) are acceptable. In particular, let's look at lines 17-20:

+ +
Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Methods: POST, GET
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400
+ +

The server responds with Access-Control-Allow-Methods and says that POST and GET are viable methods to query the resource in question. Note that this header is similar to the {{HTTPHeader("Allow")}} response header, but used strictly within the context of access control.

+ +

The server also sends Access-Control-Allow-Headers with a value of "X-PINGOTHER, Content-Type", confirming that these are permitted headers to be used with the actual request. Like Access-Control-Allow-Methods, Access-Control-Allow-Headers is a comma separated list of acceptable headers.

+ +

Finally, {{HTTPHeader("Access-Control-Max-Age")}} gives the value in seconds for how long the response to the preflight request can be cached for without sending another preflight request. In this case, 86400 seconds is 24 hours. Note that each browser has a maximum internal value that takes precedence when the Access-Control-Max-Age is greater.

+ +

Preflighted requests and redirects

+ +

Not all browsers currently support following redirects after a preflighted request. If a redirect occurs after a preflighted request, some browsers currently will report an error message such as the following.

+ +
+

The request was redirected to 'https://example.com/foo', which is disallowed for cross-origin requests that require preflight

+
+ +
+

Request requires preflight, which is disallowed to follow cross-origin redirect

+
+ +

The CORS protocol originally required that behavior but was subsequently changed to no longer require it. However, not all browsers have implemented the change, and so still exhibit the behavior that was originally required.

+ +

So until all browsers catch up with the spec, you may be able to work around this limitation by doing one or both of the following:

+ + + +

But if it’s not possible to make those changes, then another way that may be possible is to this:

+ +
    +
  1. Make a simple request (using {{domxref("Response.url")}} for the Fetch API, or {{domxref("XMLHttpRequest.responseURL")}}) to determine what URL the real preflighted request would end up at.
    2. +
  2. Make another request (the “real” request) using the URL you obtained from Response.url or XMLHttpRequest.responseURL in the first step.
    3. +
+ +

However, if the request is one that triggers a preflight due to the presence of the Authorization header in the request, you won’t be able to work around the limitation using the steps above. And you won’t be able to work around it at all unless you have control over the server the request is being made to.

+ +

Requests with credentials

+ +

The most interesting capability exposed by both {{domxref("XMLHttpRequest")}} or Fetch and CORS is the ability to make "credentialed" requests that are aware of HTTP cookies and HTTP Authentication information. By default, in cross-site XMLHttpRequest" or Fetch invocations, browsers will not send credentials. A specific flag has to be set on the XMLHttpRequest" object or the {{domxref("Request")}} constructor when it is invoked.

+ +

In this example, content originally loaded from http://foo.example makes a simple GET request to a resource on http://bar.other which sets Cookies. Content on foo.example might contain JavaScript like this:

+ +
var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/credentialed-content/';
+
+function callOtherDomain(){
+  if(invocation) {
+    invocation.open('GET', url, true);
+    invocation.withCredentials = true;
+    invocation.onreadystatechange = handler;
+    invocation.send();
+  }
+}
+ +

Line 7 shows the flag on {{domxref("XMLHttpRequest")}} that has to be set in order to make the invocation with Cookies, namely the withCredentials boolean value. By default, the invocation is made without Cookies. Since this is a simple GET request, it is not preflighted, but the browser will reject any response that does not have the {{HTTPHeader("Access-Control-Allow-Credentials")}}: true header, and not make the response available to the invoking web content.

+ +

+ +

Here is a sample exchange between client and server:

+ +
GET /resources/access-control-with-credentials/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Referer: http://foo.example/examples/credential.html
+Origin: http://foo.example
+Cookie: pageAccess=2
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:34:52 GMT
+Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2
+X-Powered-By: PHP/5.2.6
+Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Credentials: true
+Cache-Control: no-cache
+Pragma: no-cache
+Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 106
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain
+
+
+[text/plain payload]
+
+ +

Although line 11 contains the Cookie destined for the content on http://bar.other, if bar.other did not respond with an {{HTTPHeader("Access-Control-Allow-Credentials")}}: true (line 19) the response would be ignored and not made available to web content.

+ +

Credentialed requests and wildcards

+ +

When responding to a credentialed request, the server must specify an origin in the value of the Access-Control-Allow-Origin header, instead of specifying the "*" wildcard.

+ +

Because the request headers in the above example include a Cookie header, the request would fail if the value of the Access-Control-Allow-Origin header were "*". But it does not fail: Because the value of the Access-Control-Allow-Origin header is "http://foo.example" (an actual origin) rather than the "*" wildcard, the credential-cognizant content is returned to the invoking web content.

+ +

Note that the Set-Cookie response header in the example above also sets a further cookie. In case of failure, an exception—depending on the API used—is raised.

+ +

Third-party cookies

+ +

Note that cookies set in CORS responses are subject to normal third-party cookie policies. In the example above, the page is loaded from foo.example, but the cookie on line 22 is sent by bar.other, and would thus not be saved if the user has configured their browser to reject all third-party cookies.

+ +

The HTTP response headers

+ +

This section lists the HTTP response headers that servers send back for access control requests as defined by the Cross-Origin Resource Sharing specification. The previous section gives an overview of these in action.

+ +

Access-Control-Allow-Origin

+ +

A returned resource may have one {{HTTPHeader("Access-Control-Allow-Origin")}} header, with the following syntax:

+ +
Access-Control-Allow-Origin: <origin> | *
+
+ +

Access-Control-Allow-Origin specifies either a single origin, which tells browsers to allow that origin to access the resource; or else — for requests without credentials — the "*" wildcard, to tell browsers to allow any origin to access the resource.

+ +

For example, to allow code from the origin http://mozilla.org to access the resource, you can specify:

+ +
Access-Control-Allow-Origin: http://mozilla.org
+ +

If the server specifies a single origin rather than the "*" wildcard, then the server should also include Origin in the {{HTTPHeader("Vary")}} response header — to indicate to clients that server responses will differ based on the value of the {{HTTPHeader("Origin")}} request header.

+ +

Access-Control-Expose-Headers

+ +

The {{HTTPHeader("Access-Control-Expose-Headers")}} header lets a server whitelist headers that browsers are allowed to access. For example:

+ +
Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
+
+ +

This allows the X-My-Custom-Header and X-Another-Custom-Header headers to be exposed to the browser.

+ +

Access-Control-Max-Age

+ +

The {{HTTPHeader("Access-Control-Max-Age")}} header indicates how long the results of a preflight request can be cached. For an example of a preflight request, see the above examples.

+ +
Access-Control-Max-Age: <delta-seconds>
+
+ +

The delta-seconds parameter indicates the number of seconds the results can be cached.

+ +

Access-Control-Allow-Credentials

+ +

The {{HTTPHeader("Access-Control-Allow-Credentials")}} header Indicates whether or not the response to the request can be exposed when the credentials flag is true. When used as part of a response to a preflight request, this indicates whether or not the actual request can be made using credentials. Note that simple GET requests are not preflighted, and so if a request is made for a resource with credentials, if this header is not returned with the resource, the response is ignored by the browser and not returned to web content.

+ +
Access-Control-Allow-Credentials: true
+
+ +

Credentialed requests are discussed above.

+ +

Access-Control-Allow-Methods

+ +

The {{HTTPHeader("Access-Control-Allow-Methods")}} header specifies the method or methods allowed when accessing the resource. This is used in response to a preflight request. The conditions under which a request is preflighted are discussed above.

+ +
Access-Control-Allow-Methods: <method>[, <method>]*
+
+ +

An example of a preflight request is given above, including an example which sends this header to the browser.

+ +

Access-Control-Allow-Headers

+ +

The {{HTTPHeader("Access-Control-Allow-Headers")}} header is used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.

+ +
Access-Control-Allow-Headers: <field-name>[, <field-name>]*
+
+ +

The HTTP request headers

+ +

This section lists headers that clients may use when issuing HTTP requests in order to make use of the cross-origin sharing feature. Note that these headers are set for you when making invocations to servers. Developers using cross-site {{domxref("XMLHttpRequest")}} capability do not have to set any cross-origin sharing request headers programmatically.

+ +

Origin

+ +

The {{HTTPHeader("Origin")}} header indicates the origin of the cross-site access request or preflight request.

+ +
Origin: <origin>
+
+ +

The origin is a URI indicating the server from which the request initiated. It does not include any path information, but only the server name.

+ +
Note: The origin can be the empty string; this is useful, for example, if the source is a data URL.
+ +

Note that in any access control request, the {{HTTPHeader("Origin")}} header is always sent.

+ +

Access-Control-Request-Method

+ +

The {{HTTPHeader("Access-Control-Request-Method")}} is used when issuing a preflight request to let the server know what HTTP method will be used when the actual request is made.

+ +
Access-Control-Request-Method: <method>
+
+ +

Examples of this usage can be found above.

+ +

Access-Control-Request-Headers

+ +

The {{HTTPHeader("Access-Control-Request-Headers")}} header is used when issuing a preflight request to let the server know what HTTP headers will be used when the actual request is made.

+ +
Access-Control-Request-Headers: <field-name>[, <field-name>]*
+
+ +

Examples of this usage can be found above.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch', '#cors-protocol', 'CORS')}}{{Spec2('Fetch')}}New definition; supplants W3C CORS specification.
+ +

Browser compatibility

+ + + +

{{Compat("http.headers.Access-Control-Allow-Origin")}}

+ +

Compatibility notes

+ + + +

See also

+ + + +
{{HTTPSidebar}}
diff --git a/files/th/web/http/index.html b/files/th/web/http/index.html new file mode 100644 index 0000000000..832303c8c0 --- /dev/null +++ b/files/th/web/http/index.html @@ -0,0 +1,227 @@ +--- +title: HTTP +slug: Web/HTTP +tags: + - HTTP + - Headers + - NeedsTranslation + - TopicStub +translation_of: Web/HTTP +--- +

{{ HTTPSidebar }}

+ +

Hypertext Transfer Protocol (HTTP) เป็นโปรโตคอลในระดับชั้นแอพพลิเคชัน(application-layer) ที่ใช้สำหรับการจัดส่งเอกสารประเภท hypermedia อย่างเช่นเอกสาร HTML และถูกออกแบบมาเพื่อใช้งานในการติดต่อสื่อสารระหว่าง web browser กับ web server และสามารถนำไปใช้ในจุดประสงค์อื่น ๆ ได้ด้วย ซึ่งรูปแบบการสื่อสารของโปรโตคอล HTTP เป็นไปตามโมเดลการสื่อสารแบบเครื่องลูกข่าย-แม่ข่าย(client-server model) ที่เครื่องลูกข่ายจะสร้าง connection เพื่อส่ง request ไปยังเครื่องแม่ข่าย และรอจนกว่าจะได้ response กลับมาจากเครื่องแม่ข่าย นอกจากนั้น HTTP เป็นโปรโตคอลแบบ stateless protocol เป็นลักษณะที่เครื่องแม่ข่ายไม่มีการจัดเก็บข้อมูล(state) ใด ๆ ที่เกิดขึ้นระหว่าง request เพราะข้อมูลแต่ละ request สามารถทำความเข้าใจได้ในตัวมันเอง และเนื่องจาก HTTP เป็นโปรโตคอลที่ใช้งานในระดับชั้นแอพพลิเคชัน ซึ่งอยู่ในระดับชั้นที่สูงกว่าโปรโตคอลในระดับล่างอย่าง TCP/IP ที่อยู่ในระดับ transport layer มันจึงสามารถใช้รูปแบบการติดต่อสื่อสารที่มีความน่าเชื่อถือของโปรโตคอลต่าง ๆ ในระดับชั้น transport ได้ อย่างเช่น อาจจะเลือกใช้โปรโตคอล RUDP ที่มีความน่าเชื่อถือกว่า UDP ที่มีโอกาสสูญเสียข้อมูลไปโดยไม่รู้ตัวได้

+ +

Documentation

+ +
+
HTTP Headers
+
HTTP message headers ใช้ในการบรรยายเกี่ยวกับ resource หรือ พฤติกรรมของเครื่องแม่ข่าย(server) หรือ เครื่องลูกข่าย(client) การสร้าง HTTP header ขึ้นใช้งานเอง สามารถทำได้ด้วยการเติมอักษร "X-" นำหน้าชื่อ header ที่ต้องการ โดย Header มาตรฐานต่าง ๆ สามารถศึกษาเพิ่มเติมได้จาก IANA registry เนื้อหาต้นฉบับจะถูกนิยามไว้ใน RFC 4229 โดยมี IANA เป็นผู้ดูแลเกี่ยวกับการลงทะเบียนเพื่อเสนอ HTTP header รูปแบบใหม่
+
HTTP cookies
+
การทำงานของ cookie ได้มีการนิยามไว้โดย RFC 6265 โดยกระบวนการเกิดขึ้นหลังจากที่เครื่องแม่ข่ายได้รับ HTTP request แล้ว เครื่องแม่ข่ายจะสามารถส่ง header ชื่อ Set-Cookie ไปกับ response ให้กับเครื่องลูกข่าย หลังจากนั้นเมื่อใดก็ตามที่เครื่องลูกข่ายต้องการส่ง request ไปยังเครื่องแม่ข่าย ค่าของ cookie จะถูกส่งไปพร้อม request ด้วยเสมอ ในรูปแบบของ HTTP header ชื่อ Cookie นอกจากนั้นยังสามารถกำหนดวันและเวลาหมดอายุของ cookie และการจำกัดการเข้าถึง domain และ path ได้
+
Basic access authentication
+
ในบริบทของการติดต่อสื่อสารบนโปรโตคอล HTTP นั้น การพิสูจน์ตัวจริงแบบพื้นฐานเพื่อการเข้าถึง (basic access authentication) เป็นวิธีการสำหรับ HTTP user agent ในการ request ไปยังเครื่องแม่ข่ายที่ต้องมีการจัดเตรียมรหัสผู้ใช้งาน (username) และรหัสผ่าน (password) เพื่อใช้ในการพิสูจน์ตัวจริง
+
HTTP pipelining FAQ
+
HTTP/1.1 Pipelining FAQ
+
HTTP access control (CORS)
+
Cross-site HTTP requests are HTTP requests for resources from a different domain than the domain of the resource making the request.  For instance, a resource loaded from Domain A (http://domaina.example) such as an HTML web page, makes a request for a resource on Domain B (http://domainb.foo), such as an image, using the img element (http://domainb.foo/image.jpg).  This occurs very commonly on the web today — pages load a number of resources in a cross-site manner, including CSS stylesheets, images and scripts, and other resources.
+
Controlling DNS prefetching
+
Firefox 3.5 performs DNS prefetching.  This is a feature by which Firefox proactively performs domain name resolution on both links that the user may choose to follow as well as URLs for items referenced by the document, including images, CSS, JavaScript, and so forth. This prefetching is performed in the background, so that the DNS is likely to already have been resolved by the time the referenced items are actually needed.  This reduces latency when, for example, the user actually clicks a link.
+
HTTP response codes
+
HTTP Response Codes indicate whether a specific HTTP requests has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirections, client errors, and servers errors.
+
+ +

A brief history of HTTP

+ +

Since its original conception, as a protocol with one single method (GET) and returning only HTML pages, the HTTP protocol went through several revisions. The first documented version was HTTP/0.9 in 1991, corresponding to the original version. Very simple, it has a rudimentary search capability via the HTML {{ HTMLElement("isindex") }} element and an extension of the URL using the '?' character.

+ +

Then, in 1992, a version was published that became, with some minor changes, HTTP/1.0 (finalized in RFC 1945 in May 1996). One major improvement over the previous version was the ability to transmit files of different types, like images, videos, scripts, CSS documents, and so on, instead of only HTML files: this is achieved by using MIME types in conjunction with the Content-Type: header.

+ +

In 1995, the IETF  began developing a new version of HTTP, which would become HTTP/1.1. It quickly spread into wide usage, and it was officially standardized in 1997 in RFC 2068, with minor fixes in RFC 2616 two years later.

+ +

HTTP/1.1 brought the ability to reuse established connections for subsequent requests, greatly improving the performance of the protocol by lowering the latency between them; this is especially useful with complex HTML documents that need to fetch several subsequent files, like images or style sheets. It also brought the Host: header, which allows a single server, listening on a specific port, to receive requests for several websites; this paved the way for colocating numerous websites on one single server, greatly reducing the cost of hosting.

+ +

Since then, the HTTP protocol evolved by adding new headers, defining new behaviors without the need to fundamentally change the protocol. Unknown headers are simply ignored by servers or clients.

+ +

HTTP/1.1 is currently being revised by the IETF HTTPbis Working Group.

+ + + +

HTTP request methods

+ +

The request method indicates the action to be performed by the server. The HTTP/1.1 standard defines seven methods and allows other methods to be added later. Over the years, a few ones have been added in standards like WebDAV. The  IETF HTTPbis Working Group is currently working on an IANA registry to list them all. If a server receives a request method that it doesn't know, it must return a 501 Not implemented response; if it knows the method but is configured not to answer it, it must return a 405 Method not allowed response. Two methods are required to be supported: HEAD and GET; all others are optional.

+ +

Two specific semantics are defined in the standard and are crucial for web developers: the safety property and the idempotent property.

+ +

Safe methods

+ +

A safe method is a method that doesn't have any side-effects on the server. In other words, this property means that the method must be used only for retrieval of data. The safe HTTP methods defined in HTTP/1.1 are:

+ + + +
Notes: + + +
+ +

Idempotent methods

+ +

An idempotent method is a method such that the side-effects on the server of several identical requests with the method are the same as the side-effects of one single request.

+ + + +

Other methods

+ + + +

Many more methods, such as PROPFIND or PATCH are defined in other standards-track RFCs of the IETF, like WebDAV.

+ +

The CONNECT method is defined in RFC 2817.

+ +

HTTP Requests Methods in HTML Forms

+ +

In HTML, different HTTP request methods can be specified in the {{ htmlattrxref("method", "form") }} attribute of the {{ HTMLElement("form") }} element, but also to the {{ htmlattrxref("formmethod", "input") }} of the {{ HTMLElement("input") }} and {{ HTMLElement("button") }} elements. But not all HTTP methods can be used with these attributes; only GET and POST method are allowed by the HTML specification. See this StackExchange answer why other HTTP request methods are not allowed by the HTML specification.

+ +
Note: The choice of a GET or POST method for HTML forms is not neutral. Because the GET method is a safe method, it should be used only in cases where no side-effect is expected; e.g., it shouldn't be used to transmit an order, as this order is a side-effect. In all cases where such side-effects are expected, the POST method should be used.
+ +

HTTP response codes

+ +

When answering a client request, the server sends back a three-digit number indicating whether the request was successfully processed. These codes can be grouped in five categories:

+ + + +

A web developer shouldn't encounter many other response codes, but people building requests using the XMLHTTPRequest function may hit less usual response codes.

+ +

More on redirection responses

+ +

Starting in Gecko 9.0 {{ geckoRelease("9.0") }}, redirections (such as 301 and 307) that specify a javascript: URI are no longer performed. Instead, a bad connection error is presented. This helps avoid cross-site scripting attacks. See {{ bug(255119) }} if you want more details.

+ +

HTTP headers

+ +

HTTP headers allow the client and the server to pass additional information with the request or the response. A request header consists of its case-insensitive name followed by a colon ':', then by its value (without CRLF in it). Leading white space before the value is ignored.

+ +

Headers are grouped according the context in which they may appear:

+ +
+
General headers
+
These headers apply to both requests and responses but are unrelated to the data eventually transmitted in the body. They therefore apply only to the message being transmitted. There are only a few of them and new ones cannot be added without increasing the version number of the HTTP protocol. The exhaustive list for HTTP/1.1 is {{ httpheader("Cache-Control") }}, {{ httpheader("Connection") }}, {{ httpheader("Date") }}, {{ httpheader("Pragma") }}, {{ httpheader("Trailer") }}, {{ httpheader("Transfer-Encoding") }}, {{ httpheader("Upgrade") }}, {{ httpheader("Via") }} and {{ httpheader("Warning") }}.
+
Request headers
+
These headers give more precise information about the resource to be fetched or about the client itself. Among them one can find cache-related headers, transforming a GET method in a conditional GET, like {{ httpheader("If-Modified-Since") }}, user-preference information like {{ httpheader("Accept-Language") }} or {{ httpheader("Accept-Charset") }} or plain client information like {{ httpheader("User-Agent") }}. New request headers cannot officially be added without increasing the version number of the HTTP protocol. But, it is common for new request headers to be added if both the server and the client agree on their meaning. In that case, a client should not assume that they will be handled adequately by the server; unknown request headers are handled as entity headers.
+
Response headers
+
These headers give more information about the resource sent back, like its real location ({{ httpheader("Location") }}) or about the server itself, like its name and version ({{ httpheader("Server") }}). New response headers cannot be added without increasing the version number of the HTTP protocol. But, it is common for new response headers to be added if both the server and the client agree on their meaning. In that case, a server should not assume that they will be handled adequately by the client ; unknown response headers are handled as entity headers.
+
Entity headers
+
These headers give more information about the body of the entity, like its length ({{ httpheader("Content-Length") }}), an identifying hash ({{ httpheader("Content-MD5") }}), or its MIME-type ({{ httpheader("Content-Type") }}). New entity headers can be added without increasing the version number of the HTTP protocol.
+
+ +

Headers can also be grouped according to how caching and non-caching proxies handle them:

+ +
+
End-to-end headers
+
These headers must be transmitted to the final recipient of the message; that is, the server for a request message or the client for a response message. Such a header means that intermediate proxies must retransmit it unmodified and also that caches must store it.
+
Hop-by-hop headers
+
These headers are meaningful only for a single transport-level connection and must not be retransmitted by proxies or cached. Such headers are: {{ httpheader("Connection") }}, {{ httpheader("Keep-Alive") }}, {{ httpheader("Proxy-Authenticate") }}, {{ httpheader("Proxy-Authorization") }}, {{ httpheader("TE") }}, {{ httpheader("Trailers") }}, {{ httpheader("Transfer-Encoding") }} and {{ httpheader("Upgrade") }}. Note that only hop-by-hop headers may be set using the {{ httpheader("Connection") }} general header.
+
+ +

In order to learn about the specific semantic of each header, see its entry in the comprehensive list of HTTP headers.

+ +

Useful request headers

+ +

Among the numerous HTTP request headers, several are especially useful when set correctly. If you are building your own requests, by using XMLHTTPRequest or when writing an extension and sending custom HTTP requests via XPCOM, then it is important to ensure the presence of headers that are often set by browsers based on the preferences of the user.

+ +
+
Controlling the language of the resource
+
Most user-agents, like Firefox, allow the user to set a preference for the language for receiving a resource. The browser translate this into an {{ httpheader("Accept-Language") }} header. It is good practice for web developers, when building specific HTTP requests, to include such a header too.
+
Using conditional GET
+
Caching is a major tool to accelerate the display of web pages. Even when parts of a webpage are refreshed via an XMLHTTPRequest:, it is a good idea to use the {{ httpheader("If-Modified-Since") }} header (and other similar ones) in order to fetch the new content only if it has changed. This approach lowers the burden on the network.
+
+ +

Useful response headers

+ +

The configuration of a web server is a critical part to ensure good performance and optimal security of a web site. Among the numerous HTTP response headers, several are of specific importance and should be configured on the server

+ +

Restricting framing

+ +

Several cross-site scripting (XSS) attacks take advantage of the ability to put third-party content inside an {{ HTMLElement("frame") }} or {{ HTMLElement("iframe") }}. In order to mitigate that risk, modern browsers have introduced the CSP frame-ancestors directive. By setting it with the value 'none', it prevents the browser from displaying this resource inside of a frame. Using it on critical resources (like those containing a formularies or critical information) will reduce the risk caused by XSS attacks. Note that this specific HTTP response header is not the only way to mitigate XSS risks; other techniques, like setting some Content Security Policies, may be helpful too.

+ +

Compression

+ +

Minimizing the amount of data transferred accelerates the display of a web page. Though most techniques, like CSS Sprites, should be applied on the site itself, compression of data must be set at the web server level. If set, resources requested by the client with an {{ httpheader("Accept-Encoding") }} request header are compressed using the appropriate method and sent back with a {{ httpheader("Content-Encoding") }} response header. Setting these in Apache 2 servers is done by using the mod_deflate module.

+ +
Note: Be aware that not all data formats can be efficiently compressed. Already-compressed media data, like JPEG images or most audio and video formats, do not shrink using another pass of compression. In fact, they often become larger due to the overhead of the compression method. It is important not to try to compress these resource types any further; there is no advantage in size and the compression/decompression mechanism is resource-intensive.
+ +

Controlling cache

+ +

HTTP Caching is a technique that prevents the same resource from being fetched several times if it hasn't change. Configuring the server with the correct response headers allows the user-agent to adequately cache the data. In order to do that, be sure that:

+ + + +

Setting the correct MIME types

+ +

The MIME type is the mechanism to tell the client the kind of document transmitted: the extension of a file name has no meaning on the web. It is therefore important that the server is correctly set up so that the correct MIME type is transmitted with each document: user-agents often use this MIME-type to determine what default action to do when a resource is fetched.

+ +
Note: + + +
+ +

See also

+ + + +

{{ languages( { "ja": "ja/HTTP"} ) }}

diff --git a/files/th/web/http/status/201/index.html b/files/th/web/http/status/201/index.html new file mode 100644 index 0000000000..9cef9d44f9 --- /dev/null +++ b/files/th/web/http/status/201/index.html @@ -0,0 +1,41 @@ +--- +title: 201 Created +slug: Web/HTTP/Status/201 +translation_of: Web/HTTP/Status/201 +--- +
{{HTTPSidebar}}
+ +

หมายเลขสถานะของ HTTP หมายเลข 201 Created แสดงถึงการร้องขอนั้นสำเร็จและทำให้เกิดการสร้างทรัพยากรใหม่ ทรัพยากรใหม่นี้ถูกสร้างสำเร็จก่อนที่การตอบสนองจะถูกส่งกลับมา และทรัพยากรใหม่นี้ถูกส่งกลับมากับเนื้อหาของข้อความด้วย ที่ตั้งของมันเป็นได้ทั้ง URL ที่ใช้ในการร้องขอ หรือเนื้อหาในส่วน header ของ {{HTTPHeader("Location")}}

+ +

โดยปกติแล้วการใช้งานของหมายเลขสถานะนี้จะเป็นผลมาจากการร้องขอแบบ {{HTTPMethod("PUT")}}

+ +

สถานะ

+ +
201 Created
+ +

ข้อกำหนด

+ + + + + + + + + + + + +
ข้อกำหนดหัวข้อ
{{RFC("7231", "201 Created" , "6.3.2")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
+ +

การเข้ากันได้ของเบราเซอร์

+ + + +

{{Compat("http.status.201")}}

+ +

ดูสิ่งนี้ด้วย

+ + diff --git a/files/th/web/http/status/index.html b/files/th/web/http/status/index.html new file mode 100644 index 0000000000..e490502369 --- /dev/null +++ b/files/th/web/http/status/index.html @@ -0,0 +1,171 @@ +--- +title: HTTP response status codes +slug: Web/HTTP/Status +tags: + - HTTP + - NeedsTranslation + - Status codes + - TopicStub +translation_of: Web/HTTP/Status +--- +
{{HTTPSidebar}}
+ +

HTTP response status codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirects, client errors, and servers errors. Status codes are defined by section 10 of RFC 2616.

+ +

Information responses

+ +
+
{{HTTPStatus(100, "100 Continue")}}
+
This interim response indicates that everything so far is OK and that the client should continue with the request or ignore it if it is already finished.
+
{{HTTPStatus(101, "101 Switching Protocol")}}
+
This code is sent in response to an {{HTTPHeader("Upgrade")}} request header by the client, and indicates the protocol the server is switching too.
+
{{HTTPStatus(102, "102 Processing")}} ({{Glossary("WebDAV")}})
+
This code indicates that the server has received and is processing the request, but no response is available yet.
+
+ +

Successful responses

+ +
+
{{HTTPStatus(200, "200 OK")}}
+
The request has succeeded. The meaning of a success varies depending on the HTTP method:
+ GET: The resource has been fetched and is transmitted in the message body.
+ HEAD: The entity headers are in the message body.
+ POST: The resource describing the result of the action is transmitted in the message body.
+ TRACE: The message body contains the request message as received by the server
+
{{HTTPStatus(201, "201 Created")}}
+
The request has succeeded and a new resource has been created as a result of it. This is typically the response sent after a PUT request.
+
{{HTTPStatus(202, "202 Accepted")}}
+
The request has been received but not yet acted upon. It is non-committal, meaning that there is no way in HTTP to later send an asynchronous response indicating the outcome of processing the request. It is intended for cases where another process or server handles the request, or for batch processing.
+
{{HTTPStatus(203, "203 Non-Authoritative Information")}}
+
This response code means returned meta-information set is not exact set as available from the origin server, but collected from a local or a third party copy. Except this condition, 200 OK response should be preferred instead of this response.
+
{{HTTPStatus(204, "204 No Content")}}
+
There is no content to send for this request, but the headers may be useful. The user-agent may update its cached headers for this resource with the new ones.
+
{{HTTPStatus(205, "205 Reset Content")}}
+
This response code is sent after accomplishing request to tell user agent reset document view which sent this request.
+
{{HTTPStatus(206, "206 Partial Content")}}
+
This response code is used because of range header sent by the client to separate download into multiple streams.
+
{{HTTPStatus(207, "207 Multi-Status")}} ({{Glossary("WebDAV")}})
+
A Multi-Status response conveys information about multiple resources in situations where multiple status codes might be appropriate.
+
{{HTTPStatus(208, "208 Multi-Status")}} ({{Glossary("WebDAV")}})
+
Used inside a DAV: propstat response element to avoid enumerating the internal members of multiple bindings to the same collection repeatedly.
+
{{HTTPStatus(226, "226 IM Used")}} (HTTP Delta encoding)
+
The server has fulfilled a GET request for the resource, and the response is a representation of the result of one or more instance-manipulations applied to the current instance.
+
+ +

Redirection messages

+ +
+
{{HTTPStatus(300, "300 Multiple Choice")}}
+
The request has more than one possible responses. User-agent or user should choose one of them. There is no standardized way to choose one of the responses.
+
{{HTTPStatus(301, "301 Moved Permanently")}}
+
This response code means that URI of requested resource has been changed. Probably, new URI would be given in the response.
+
{{HTTPStatus(302, "302 Found")}}
+
This response code means that URI of requested resource has been changed temporarily. New changes in the URI might be made in the future. Therefore, this same URI should be used by the client in future requests.
+
{{HTTPStatus(303, "303 See Other")}}
+
Server sent this response to directing client to get requested resource to another URI with an GET request.
+
{{HTTPStatus(304, "304 Not Modified")}}
+
This is used for caching purposes. It is telling to client that response has not been modified. So, client can continue to use same cached version of response.
+
305 Use Proxy {{deprecated_inline}}
+
Was defined in a previous version of the HTTP specification to indicate that a requested response must be accessed by a proxy. It has been deprecated due to security concerns regarding in-band configuration of a proxy.
+
306 unused
+
This response code is no longer used, it is just reserved currently. It was used in a previous version of the HTTP 1.1 specification.
+
{{HTTPStatus(307, "307 Temporary Redirect")}}
+
Server sent this response to directing client to get requested resource to another URI with same method that used prior request. This has the same semantic than the 302 Found HTTP response code, with the exception that the user agent must not change the HTTP method used: if a POST was used in the first request, a POST must be used in the second request.
+
{{HTTPStatus(308, "308 Permanent Redirect")}}
+
This means that the resource is now permanently located at another URI, specified by the Location: HTTP Response header. This has the same semantics as the 301 Moved Permanently HTTP response code, with the exception that the user agent must not change the HTTP method used: if a POST was used in the first request, a POST must be used in the second request.
+
+ +

Client error responses

+ +
+
{{HTTPStatus(400, "400 Bad Request")}}
+
This response means that server could not understand the request due to invalid syntax.
+
{{HTTPStatus(401, "401 Unauthorized")}}
+
Although the HTTP standard specifies "unauthorized", semantically this response means "unauthenticated". That is, the client must authenticate itself to get the requested response.
+
402 Payment Required
+
This response code is reserved for future use. Initial aim for creating this code was using it for digital payment systems however this is not used currently.
+
{{HTTPStatus(403, "403 Forbidden")}}
+
The client does not have access rights to the content, i.e. they are unauthorized, so server is rejecting to give proper response. Unlike 401, the client's identity is known to the server.
+
{{HTTPStatus(404, "404 Not Found")}}
+
The server can not find requested resource. In the browser, this means the URL is not recognized. In an API, this can also mean that the endpoint is valid but the resource itself does not exist. Servers may also send this response instead of 403 to hide the existence of a resource from an unauthorized client. This response code is probably the most famous one due to its frequent occurence on the web.
+
{{HTTPStatus(405, "405 Method Not Allowed")}}
+
The request method is known by the server but has been disabled and cannot be used. For example, an API may forbid DELETE-ing a resource. The two mandatory methods, GET and HEAD, must never be disabled and should not return this error code.
+
{{HTTPStatus(406, "406 Not Acceptable")}}
+
This response is sent when the web server, after performing server-driven content negotiation, doesn't find any content following the criteria given by the user agent.
+
{{HTTPStatus(407, "407 Proxy Authentication Required")}}
+
This is similar to 401 but authentication is needed to be done by a proxy.
+
{{HTTPStatus(408, "408 Request Timeout")}}
+
This response is sent on an idle connection by some servers, even without any previous request by the client. It means that the server would like to shut down this unused connection. This response is used much more since some browsers, like Chrome, Firefox 27+, or IE9, use HTTP pre-connection mechanisms to speed up surfing. Also note that some servers merely shut down the connection without sending this message.
+
{{HTTPStatus(409, "409 Conflict")}}
+
This response is sent when a request conflicts with the current state of the server.
+
{{HTTPStatus(410, "410 Gone")}}
+
This response would be sent when the requested content has been permenantly deleted from server, with no forwarding address. Clients are expected to remove their caches and links to the resource. The HTTP specification intends this status code to be used for "limited-time, promotional services". APIs should not feel compelled to indicate resources that have been deleted with this status code.
+
{{HTTPStatus(411, "411 Length Required")}}
+
Server rejected the request because the Content-Length header field is not defined and the server requires it.
+
{{HTTPStatus(412, "412 Precondition Failed")}}
+
The client has indicated preconditions in its headers which the server does not meet.
+
{{HTTPStatus(413, "413 Payload Too Large")}}
+
Request entity is larger than limits defined by server; the server might close the connection or return an Retry-After header field.
+
{{HTTPStatus(414, "414 URI Too Long")}}
+
The URI requested by the client is longer than the server is willing to interpret.
+
{{HTTPStatus(415, "415 Unsupported Media Type")}}
+
The media format of the requested data is not supported by the server, so the server is rejecting the request.
+
{{HTTPStatus(416, "416 Requested Range Not Satisfiable")}}
+
The range specified by the Range header field in the request can't be fulfilled; it's possible that the range is outside the size of the target URI's data.
+
{{HTTPStatus(417, "417 Expectation Failed")}}
+
This response code means the expectation indicated by the Expect request header field can't be met by the server.
+
{{HTTPStatus(418, "418 I'm a teapot")}}
+
The server refuses the attempt to brew coffee with a teapot.
+
{{HTTPStatus(421, "421 Misdirected Request")}}
+
The request was directed at a server that is not able to produce a response. This can be sent by a server that is not configured to produce responses for the combination of scheme and authority that are included in the request URI.
+
{{HTTPStatus(422, "422 Unprocessable Entity")}} ({{Glossary("WebDAV")}})
+
The request was well-formed but was unable to be followed due to semantic errors.
+
{{HTTPStatus(423, "423 Locked")}} ({{Glossary("WebDAV")}})
+
The resource that is being accessed is locked.
+
{{HTTPStatus(424, "424 Failed Dependency")}} ({{Glossary("WebDAV")}})
+
The request failed due to failure of a previous request.
+
{{HTTPStatus(426, "426 Upgrade Required")}}
+
The server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol. The server sends an {{HTTPHeader("Upgrade")}} header in a 426 response to indicate the required protocol(s).
+
{{HTTPStatus(428, "428 Precondition Required")}}
+
The origin server requires the request to be conditional. Intended to prevent the 'lost update' problem, where a client GETs a resource's state, modifies it, and PUTs it back to the server, when meanwhile a third party has modified the state on the server, leading to a conflict.
+
{{HTTPStatus(429, "429 Too Many Requests")}}
+
The user has sent too many requests in a given amount of time ("rate limiting").
+
{{HTTPStatus(431, "431 Request Header Fields Too Large")}}
+
The server is unwilling to process the request because its header fields are too large. The request MAY be resubmitted after reducing the size of the request header fields.
+
{{HTTPStatus(451, "451 Unavailable For Legal Reasons")}}
+
The user requests an illegal resource, such as a web page censored by a government.
+
+ +

Server error responses

+ +
+
{{HTTPStatus(500, "500 Internal Server Error")}}
+
The server has encountered a situation it doesn't know how to handle.
+
{{HTTPStatus(501, "501 Not Implemented")}}
+
The request method is not supported by the server and cannot be handled. The only methods that servers are required to support (and therefore that must not return this code) are GET and HEAD.
+
{{HTTPStatus(502, "502 Bad Gateway")}}
+
This error response means that the server, while working as a gateway to get a response needed to handle the request, got an invalid response.
+
{{HTTPStatus(503, "503 Service Unavailable")}}
+
The server is not ready to handle the request. Common causes are a server that is down for maintenance or that is overloaded. Note that together with this response, a user-friendly page explaining the problem should be sent. This responses should be used for temporary conditions and the Retry-After: HTTP header should, if possible, contain the estimated time before the recovery of the service. The webmaster must also take care about the caching-related headers that are sent along with this response, as these temporary condition responses should usually not be cached.
+
{{HTTPStatus(504, "504 Gateway Timeout")}}
+
This error response is given when the server is acting as a gateway and cannot get a response in time.
+
{{HTTPStatus(505, "505 HTTP Version Not Supported")}}
+
The HTTP version used in the request is not supported by the server.
+
{{HTTPStatus(506, "506 Variant Also Negotiates")}}
+
The server has an internal configuration error: transparent content negotiation for the request results in a circular reference.
+
{{HTTPStatus(507, "507 Insufficient Storage")}}
+
The server has an internal configuration error: the chosen variant resource is configured to engage in transparent content negotiation itself, and is therefore not a proper end point in the negotiation process.
+
{{HTTPStatus(508, "508 Loop Detected")}} ({{Glossary("WebDAV")}})
+
The server detected an infinite loop while processing the request.
+
{{HTTPStatus(510, "510 Not Extended")}}
+
Further extensions to the request are required for the server to fulfill it.
+
{{HTTPStatus(511, "511 Network Authentication Required")}}
+
The 511 status code indicates that the client needs to authenticate to gain network access.
+
+ +

See also

+ + diff --git a/files/th/web/index.html b/files/th/web/index.html new file mode 100644 index 0000000000..7789948f6f --- /dev/null +++ b/files/th/web/index.html @@ -0,0 +1,157 @@ +--- +title: เทคโนโลยีเว็บสำหรับนักพัฒนา +slug: Web +tags: + - Landing + - NeedsTranslation + - Web +translation_of: Web +--- + + +

คุณลักษณะ World Wide Web ที่เปิดกว้างนั้นช่วยเปิดโอกาสอันน่าอัศจรรย์สำหรับ ผู้ที่ต้องการสร้างเว็บไซต์ หรือออนไลน์แอพพลิเคชั่น การที่จะใช้ประโยชน์จากความสามารถ ของเว็บไซต์ได้อย่างเต็มที่ คุณจำเป็นต้องรู้วิธีการใช้งานมันสำรวจลิ้งค์ด้านล่างเพื่อเรียนรู้ เกี่ยวกับเทคโนโลยีเว็บต่างๆ

+ +
+
+

เทคโนโลยีเว็บ

+ +

พื้นฐาน

+ +
+
HTML
+
HyperText Markup Language (HTML) หรือ ภาษามาร์กอัปข้อความหลายมิติ ใช้สำหรับการเขียนและกำหนด เนื้อหา ของเว็บเพจ
+
CSS
+
Cascading Style Sheets (CSS) ใช้เพื่อกำหนด รูปร่าง และ การนำเสนอ ของเนื้อหาบนเว็บเพจ
+
HTTP
+
HyperText Transfer Protocol (HTTP) หรือ เกณฑ์วิธีขนส่งข้อความหลายมิติ ใช้ส่ง HTML และ สื่อหลายมิติอื่นๆ บนเว็บ
+
+ +

การเขียนสคริปต์

+ +
+
JavaScript
+
JavaScript เป็นภาษาโปรแกรมที่ทำงานบนเบราว์เซอร์ของคุณ คุณสามารถใช้มัน เพื่อเพิ่มการโต้ตอบและคุณลักษณะแบบไดนามิกให้แก่เว็บไซต์หรือแอปพลิเคชันของคุณ
+
ด้วย {{glossary("Node.js")}} คุณสามารถใช้ JavaScript บนเซิร์ฟเวอร์ได้เช่นกัน
+
Web API
+
Web Application Programming Interfaces (Web API) ใช้ดำเนินการของงานต่างๆ เช่น การจัดการ DOM เล่นเสียงหรือวิดีโอ หรือสร้างกราฟิก 3 มิติ +
    +
  • เอกสารอ้างอิงอินเทอร์เฟส Web API รายการชนิดของอ็อบเจกต์ที่คุณสามารถใช้ในขณะ พัฒนาเว็บ
    • +
  • หน้า WebAPI รายการการติดต่อสื่อสาร การเข้าถึงฮาร์ดแวร์ และ API อื่น ๆ ที่คุณสามารถใช้ในแอปพลิเคชันเว็บ
    • +
  • เอกสารอ้างอิง Event รายการ Event ทั้งหมดที่คุณสามารถใช้เพื่อติดตามและตอบสนอง ต่อสิ่งที่น่าสนใจที่เกิดขึ้นในหน้าเว็บหรือแอปพลิเคชันของคุณ
    • +
+
+
Web Components
+
Web Components เป็นชุดของเทคโนโลยีต่างๆที่จะทำให้คุณสามารถสร้าง องค์ประกอบกำหนดเองที่นำกลับไปใช้ได้ การทำงานของพวกมันจะถูกห่อหุ้มจาก โค้ดส่วนที่เหลือของคุณ
+
+ +

กราฟิก

+ +
+
Canvas
+
องค์ประกอบ {{HTMLElement("canvas")}} ให้ API สำหรับการวาดกราฟิก 3 มิติ โดยใช้  JavaScript
+
SVG
+
Scalable Vector Graphics (SVG) หรือ ภาพกราฟิกเวกเตอร์ปรับขนาดได้ ทำให้คุณสามารถใช้ เส้นตรง เส้นโค้ง และรูปทรงเรขาคณิตอื่นๆในการสร้างภาพกราฟิก คุณสามารถสร้าง รูปที่สามารถย่อหรือขยายในขนาดต่างๆได้โดยไม่เสียคุณภาพด้วยเวกเตอร์
+
WebGL
+
WebGL เป็น JavaScript API ที่ทำให้คุณสามารถวาดกราฟิก 2 มิติ หรือ 3 มิติโดยใช้ องค์ประกอบ HTML {{HTMLElement("canvas")}}  เทคโนโลยีให้คุณได้ใช้ OpenGL ES มาตรฐานในเนื้อหาเว็บ
+
+ +

เสียง วิดีโอ และ มัลติมีเดีย

+ +
+
เทคโนโลยยีเว็บมีเดีย
+
รายการของ API ที่เกี่ยวข้องกับมีเดีย พร้อมกับลิงก์สู่เอกสารคู่มือของแต่ละอัน
+
การบันทึกมีเดียและสตรีม API
+
A reference for the API that makes it possible to stream, record, and manipulate media both locally and across a network. This includes using local cameras and microphones to capture video, audio, and still images.
+
การใช้ HTML เสียงและวิดีโอ
+
การฝังวิดีโอหรือเสียงในหน้าเว็บและการควบคุมการเล่นของมัน
+
WebRTC
+
The RTC in WebRTC stands for Real-Time Communications, the technology that enables audio/video streaming and data sharing between browser clients (peers).
+
+ +

อื่นๆ

+ +
+
MathML
+
Mathematical Markup Language (MathML) หรือ ภาษามาร์กอัปเชิงคณิตศาสตร์ ทำให้คุณสามารถแสดงสมการทางคณิตศาสตร์และไวยากรณ์ที่ซับซ้อนได้
+
XSLT
+
Extensible Stylesheet Language Transformations (XSLT) ทำให้คุณสามารถแปลงเอกสาร XML สู่ HTML ที่มนุษย์สามารถอ่านได้
+
EXSLT
+
ฟังก์ชันเสริมที่ช่วยเพิ่มฟีเจอร์ให้แก่ XSLT
+
XPath
+
XPath ให้คุณเลือกโหนด DOM ในเอกสารโดยใช้ไวยากรณ์ที่ทรงพลังกว่า ตัวเลือก CSS
+
+
+ +
+

พื้นที่เรียนรู้

+ +
+
เรียนรู้การพัฒนาเว็บ
+
บทความชุดนี้สร้างพื้นฐานที่จะทำให้ผู้เริ่มต้นสามารถเริ่มพัฒนาเว็บไซต์แบบง่ายได้
+
Progressive web apps
+
Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform web applications. These apps work everywhere and provide several features that give them the same user experience advantages as native apps. This set of docs and guides tell you all you need to know about PWAs.
+
+ +
+
+ +

หัวข้ออื่ีนๆ

+ +
+
การเข้าถึง
+
Accessible websites enable as many people as possible to use the web, including those whose visual, auditory, or other abilities are limited in some way. This set of articles provides information about accessible web development.
+
ประสิทธิภาพของเว็บ
+
Web performance is the art of making sure web applications download fast and are responsive to user interaction, regardless of a users bandwidth, screen size, network, or device capabilities.
+
ความปลอดภัย
+
Don't let your website or app leak private data to the bad guys. Use this set of articles to make sure your projects are secure.
+
WebAssembly
+
WebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++ and Rust with a compilation target so that they can run on the web.
+
+
+
+ +

แสดงทั้งหมด...

diff --git a/files/th/web/javascript/index.html b/files/th/web/javascript/index.html new file mode 100644 index 0000000000..76f8f096a5 --- /dev/null +++ b/files/th/web/javascript/index.html @@ -0,0 +1,103 @@ +--- +title: JavaScript +slug: Web/JavaScript +tags: + - JavaScript + - Landing + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript +--- +
{{JsSidebar}}
+ +

JavaScript (JS) เป็นภาษาโปรแกรมชนิดหนึ่ง, ภาษามีขนาดเล็ก, อาศัยตรวจแปลภาษา, มีคุณสมบัติ first-class functions. คนส่วนใหญ่จะรู้จักว่าเป็นภาษาสคริปต์สำหรับหน้าเว็บ แต่ในปัจจุบันมีได้มีการนำไปใช้ใน สภาพแวดล้อมอื่นที่ไม่ใช่เว็บบราวเซอร์ ยกตัวอย่างเช่น node.js หรือ Apache CouchDB. จาวาสคริปต์เป็นภาษาแบบ prototype-based, multi-paradigm, dynamic scripting สนับสนุนการเขียนในรูปแบบของ object-oriented, imperative และ declarative ( เช่น การโปรแกรมแบบ functional) อ่านเพิ่มเติม

+ +

ส่วนนี้ของเว็บไซต์มีไว้สำหรับภาษา JavaScript โดยเฉพาะ, เนื้อหาจะไม่เจาะจงกับการเขียนหน้าเวป หรือ สภาพแวดล้อมอื่นๆ. สำหรับเนื้อหาเกี่ยวกับ APIs สำหรับการเขียนเวปโดยตรงนั้นสามารถดูได้ที่ Web APIs และ DOM

+ +

มาตรฐานของ JavaScript คือ ECMAScript. นับตั้งแต่ปี 2012 เป็นต้นมาบราวเซอร์ยุคใหม่ทั้งหมดรองรับการทำงานตามมาตรฐาน ECMAScript 5.1 อย่างสมบูรณ์ ในขณะที่บราวเซอร์เวอร์ชั่นที่เก่ากว่านั้นจะรองรับอย่างน้อย ECMAScript 3. ในวันที่ 17 มิถุนายน 2015 ECMA International ได้ตีพิมพ์มาตรฐาน ECMAScript รุ่นที่ 6 ซึ่งมีชื่อเรียกอย่างเป็นทางการว่า ECMAScript 2015 แต่เป็นที่รู้จักโดยทั่วไปว่า ECMAScript 6 หรือ ES6. นับตั้งแต่นั้นมาตรฐาน ECMAScript ก็จะถูกปรับปรุงทุกปี. สำหรับเอกสารฉบับนี้อ้างถึงมาตรฐานฉบับร่างรุ่นล่าสุด, ซึ่งปัจจุบันคือ ECMAScript 2020.

+ +

อย่าสับสน JavaScript กับ ภาษา Java. ทั้ง  "Java" and "JavaScript" เป็น ตราสินค้าจดทะเบียนของบริษัท Oracle ในสหรัฐอเมริกาและประเทศอื่นๆ. ทั้งสองภาษามีความต่างอย่างมากทั้งด้าน วากยสัมพันธ์ (syntax), ความหมาย (semantics) และการใช้งาน

+ +
+
+

บทเรียน

+ +

เรียนรู้วิธีการเขียนโปรแกรมด้วย JavaScript

+ +

เบี้องต้น

+ +
+
คู่มือจาวาสคริปต์
+
ถ้าคุณไม่รู้จัก Javascript มาก่อน คู่มือนี้จะแนะนำให้คุณรู้จักภาษานี้
+
ภาพรวมของเทคโนโลยีจาวาสคริปต์
+
บทนำเกี่ยวกับสภาพโดยทั่วไปของ Javascript บนเว็บเบราเซอร์
+
บทนำเกี่ยวกับจาวาสคริปต์เชิงวัตถุ
+
บทนำเกี่ยวกับแนวความคิดการเขียนโปรแกรมเชิงวัตถุใน JavaScript.
+
+ +

ขั้นกลาง

+ +
+
บทนำอีกครั้งเกี่ยวกับจาวาสคริปต์
+
คำอธิบายคร่าวๆ สำหรับผู้ที่คิดว่ารู้จักจาวาสคริปต์มาก่อนแล้ว
+
+ +
+
โครงสร้างข้อมูลของจาวาสคริปต์
+
คำอธิบายคร่าวๆเกี่ยวกับโครงสร้างข้อมูลที่มีในจาวาสคริปต์
+
การเปรียบเทียบความเท่ากันและความเหมือน
+
จาวาสคริปต์มีคำสั่งที่ใช้เปรียบเทียบอยู่สามแบบที่แตกต่างกัน: strict equality using ===, loose equality using == และ  Object.is() method
+
+ +

ระดับสูง

+ +
+
การสืบทอดและความต่อเนื่องของต้นแบบ
+
การอธิบายสิ่งที่มักเข้าใจผิดๆ และการใช้การสืบทอดแบบ prototype-based อย่างไม่ถูกต้อง
+
Strict mode
+
โหมด Strict จะทำให้คุณไม่สามารถใช้ตัวแปรใดๆ ก่อนที่จะมีการกำหนดค่าตั้งต้นให้แก่ตัวแปรนั้นได้ โหมดนี้จะควบคุมความแตกต่างของ ECMAScript 5 เพื่อประสิทธิภาพที่เร็วกว่าและง่ายสำหรับการแก้ไขจุดบกพร่อง
+
JavaScript typed arrays
+
ชนิดข้อมูลแบบอาเรย์มีกระบวนการสำหรับการเข้าถึงข้อมูลแบบไบนารี่
+
การจัดการหน่วยความจำ
+
วงจรชีวิตหน่วยความจำและการกำจัดหน่วยความจำที่ไม่ใช้แล้วในจาวาสคริปต์
+
+
+ +
+

อ้างอิง

+ +

Browse the complete JS reference documentation.

+ +
+
Standard objects
+
Get to know standard built-in objects Array, Boolean, Date, Error, Function, JSON, Math, Number, Object, RegExp, String, Map, Set, WeakMap, WeakSet, and others.
+
Expressions & operators
+
Learn more about the behavior of JavaScript's operators instanceof, typeof, new, this, and more.
+
Statements & declarations
+
Learn how do-while, for-in, for-of, try-catch, let, var, const, if-else, switch, and more JavaScript statements and keywords work.
+
Functions
+
Learn how to work with JS functions to develop your applications.
+
+ +

เครื่องมือและแหล่งที่มา

+ +

เครื่องมือที่ช่วยในขณะการเขียน และดีบั๊กโค๊ด JavaScript.

+ +
+
Firefox Developer Tools
+
Scratchpad, Web Console, JavaScript Profiler, Debugger, and more.
+
Firebug
+
Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
+
JavaScript Shells
+
A JavaScript shell allows you to quickly test snippets of JavaScript code.
+
TogetherJS
+
+

Collaboration made easy.

+
+
Stack Overflow
+
Stack Overflow questions tagged with "JavaScript".
+
JavaScript versions and release notes
+
Browse JavaScript's feature history and implementation status.
+
+
+
diff --git a/files/th/web/manifest/icons/index.html b/files/th/web/manifest/icons/index.html new file mode 100644 index 0000000000..730d3bce5d --- /dev/null +++ b/files/th/web/manifest/icons/index.html @@ -0,0 +1,128 @@ +--- +title: icons +slug: Web/Manifest/icons +translation_of: Web/Manifest/icons +--- +
{{QuickLinksWithSubpages("/th/docs/Web/Manifest")}}
+ + + + + + + + + + + + + + + + +
ชนิดString
จำเป็นใช่
ตัวอย่าง + 
+"icons": [{"src": "icon.webp", "sizes": "48x48", "type": "image/webp"}]
+
+ +

iconsสมาชิกระบุอาร์เรย์ของวัตถุที่เป็นตัวแทนของไฟล์ภาพที่สามารถใช้เป็นแอปพลิเค iconsfor บริบทที่แตกต่างกัน ตัวอย่างเช่นสามารถใช้เพื่อแสดงแอปพลิเคชันเว็บท่ามกลางรายการแอปพลิเคชันอื่น ๆ หรือเพื่อรวมเว็บแอปพลิเคชันเข้ากับ  ตัวสลับงานของระบบปฏิบัติการและ/หรือการตั้งค่าระบบ

+ +

ตัวอย่าง

+ +
"ไอคอน": [
+  {
+    "src": "ไอคอน/lowres.webp",
+    "ขนาด": "48x48",
+    "type": "image/webp"
+  }
+  {
+    "src": "ไอคอน/lowres",
+    "ขนาด": "48x48"
+  }
+  {
+    "src": "ไอคอน/hd_hi.ico",
+    "ขนาด": "72x72 96x96 128x128 256x256"
+  }
+  {
+    "src": "ไอคอน/hd_hi.svg",
+    "ขนาด": "72x72"
+  }
+]
+ +

ค่า

+ +

วัตถุรูปภาพอาจมีค่าต่อไปนี้:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
สมาชิกลักษณะ
sizesสตริงที่มีมิติข้อมูลคั่นด้วยช่องว่าง 
srcเส้นทางไปยังไฟล์รูปภาพ หากsrcเป็น URL สัมพัทธ์ URL หลักจะเป็น URL ของไฟล์ Manifest
typeคำแนะนำเกี่ยวกับประเภทสื่อของภาพ จุดประสงค์ของสมาชิกนี้คือเพื่อให้ตัวแทนผู้ใช้สามารถข้ามรูปภาพที่มีประเภทสื่อที่ไม่รองรับได้อย่างรวดเร็ว
purpose +

กำหนดวัตถุประสงค์ของภาพตัวอย่างเช่นหากภาพมีวัตถุประสงค์เพื่อให้บริการวัตถุประสงค์พิเศษบางอย่างในบริบทของโฮสต์ระบบปฏิบัติการ (เช่นเพื่อการรวมที่ดีขึ้น)

+ +

purpose สามารถมีหนึ่งในค่าต่อไปนี้:

+ +
    +
  • badge: ตัวแทนผู้ใช้สามารถแสดงไอคอนนี้โดยที่ข้อ จำกัด ด้านพื้นที่และ/หรือข้อกำหนดด้านสีแตกต่างจากไอคอนแอปพลิเคชัน
    • +
  • maskable: รูปภาพได้รับการออกแบบโดยมีไอคอนรูปแบบและเขตปลอดภัยไว้ในใจว่าตัวแทนใด ๆ ของภาพนอกเขตปลอดภัยสามารถถูกละเว้นและถูกปกปิดโดยตัวแทนผู้ใช้
    • +
  • any: ตัวแทนผู้ใช้มีอิสระที่จะแสดงไอคอนในบริบทใด ๆ (นี่คือค่าเริ่มต้น)
    • +
+
+ +

ข้อมูลจำเพาะ

+ + + + + + + + + + + + + + + + + + +
สเปคสถานะคิดเห็นผลตอบรับ
+

{{SpecName('Manifest', '#icons-member', 'icons')}}

+ 		+

{{Spec2('Manifest')}}

+ 		+

คำจำกัดความเบื้องต้น

+ 		+

ร่างการทำงานของ Web App Manifest

+
+ +

ความเข้ากันได้ของเบราว์เซอร์

+ + + +

{{compat("html.manifest.icons")}}

diff --git a/files/th/web/manifest/index.html b/files/th/web/manifest/index.html new file mode 100644 index 0000000000..96287f66c5 --- /dev/null +++ b/files/th/web/manifest/index.html @@ -0,0 +1,119 @@ +--- +title: Web App Manifest +slug: Web/Manifest +tags: + - App + - Manifest + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/Manifest +--- +
{{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}}
+

Web app manifests are part of a collection of web technologies called progressive web apps (PWAs), which are websites that can be installed to a device’s homescreen without an app store. Unlike regular web apps with simple homescreen links or bookmarks, PWAs can be downloaded in advance and can work offline, as well as use regular web apps APIs to, for example receiving push notifications.

+ +

The web app manifest provides information about a web application in a JSON text file, necessary for the web app to be downloaded and be presented to the user similarly to a native app (e.g., be installed on the homescreen of a device, providing users with quicker access and a richer experience). PWA manifests include its name, author, icon(s), version, description, and list of all the necessary resources (among other things).

+ + + +

Members

+ +

Web manifests can contain the following keys. Click on each one to link through to more information about it:

+ +

{{ListSubpages("/en-US/docs/Web/Manifest")}}

+ +

Example manifest

+ +
{
+  "name": "HackerWeb",
+  "short_name": "HackerWeb",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#fff",
+  "description": "A simply readable Hacker News app.",
+  "icons": [{
+    "src": "images/touch/homescreen48.png",
+    "sizes": "48x48",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen72.png",
+    "sizes": "72x72",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen96.png",
+    "sizes": "96x96",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen144.png",
+    "sizes": "144x144",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen168.png",
+    "sizes": "168x168",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen192.png",
+    "sizes": "192x192",
+    "type": "image/png"
+  }],
+  "related_applications": [{
+    "platform": "play",
+    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
+  }]
+}
+ + + +

Web app manifests are deployed in your HTML pages using a {{HTMLElement("link")}} element in the {{HTMLElement("head")}} of a document:

+ +
<link rel="manifest" href="/manifest.webmanifest">
+ +
+

Note: The .webmanifest extension is specified in the Media type registration section of the specification (the response of the manifest file should return Content-Type: application/manifest+json). Browsers generally support manifests with other appropriate extensions like .json (Content-Type: application/json).

+
+ +
+

Note: If the manifest requires credentials to fetch - the crossorigin attribute must be set to "use-credentials", even if the manifest file is in the same orgin of the current page.

+
+ + + +

Splash screens

+ +

In Chrome 47 and later, a splash screen is displayed for sites launched from a homescreen. This splashscreen is auto-generated from properties in the web app manifest, specifically:

+ + + +

Mime type

+ +

Manifests should be served using the application/manifest+json MIME type. However, it is optional to do so.  

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Manifest')}}{{Spec2('Manifest')}}Initial definition.
+ +

Browser compatibility

+ +

{{Compat("html.manifest")}}

diff --git a/files/th/web/progressive_web_apps/add_to_home_screen/index.html b/files/th/web/progressive_web_apps/add_to_home_screen/index.html new file mode 100644 index 0000000000..7513fbd8de --- /dev/null +++ b/files/th/web/progressive_web_apps/add_to_home_screen/index.html @@ -0,0 +1,211 @@ +--- +title: Add to Home screen +slug: Web/Progressive_web_apps/Add_to_home_screen +translation_of: Web/Progressive_web_apps/Add_to_home_screen +--- +

เพิ่มไปยังหน้าจอหลัก (หรือ A2HS สําหรับระยะสั้น) เป็นคุณลักษณะที่มีอยู่ในเบราว์เซอร์สมาร์ทโฟนที่ทันสมัยที่ช่วยให้นักพัฒนาได้อย่างง่ายดายและสะดวกในการเพิ่มทางลัดไปยังหน้าจอหลักของพวกเขาเป็นตัวแทนของเว็บแอปที่ชื่นชอบ (หรือเว็บไซต์) เพื่อให้พวกเขาสามารถเข้าถึงมันได้ด้วยการแตะเพียงครั้งเดียว คู่มือนี้จะอธิบายวิธีการใช้ A2HS และสิ่งที่คุณต้องทําในฐานะนักพัฒนาซอฟต์แวร์เพื่อให้ผู้ใช้ใช้ประโยชน์จากมัน

+ +

ทําไมต้อง A2HS?

+ +

A2HS เป็นความคิดที่จะเป็นส่วนหนึ่งของปรัชญาโปรเกรสซีเว็บ App - ให้เว็บปพลิเคชันข้อดีประสบการณ์เช่นเดียวกับปพลิเคชันพื้นเมืองเพื่อให้พวกเขาสามารถแข่งขันในสงครามระบบนิเวศของวันนี้ ส่วนหนึ่งของนี้เป็นท่าทางง่ายๆในการเข้าถึงแอพพลิเคโดยแตะที่ไอคอนบนหน้าจอหลักของคุณแล้วมีมันจะปรากฏเรียบร้อยในหน้าต่างของตัวเอง A2HS ทําให้เป็นไปได้

+ +

เบราว์เซอร์ใดที่รองรับ A2HS?

+ +

A2HS ได้รับการสนับสนุนโดยมือถือ Chrome / Android เว็บวิวตั้งแต่รุ่น 31, โอเปร่าสําหรับ Android ตั้งแต่รุ่น 32 และ Firefox สําหรับ Android ตั้งแต่รุ่น 58

+ +

คุณจะใช้มันได้อย่างไร

+ +

เราได้เขียนเว็บไซต์ตัวอย่างง่ายมาก (ดูการสาธิตของเราอยู่และยังเห็นรหัสที่มา) ที่ไม่ทํามาก แต่ได้รับการพัฒนาด้วยรหัสที่จําเป็นเพื่อให้มันจะถูกเพิ่มไปยังหน้าจอหลักเช่นเดียวกับพนักงานบริการเพื่อให้สามารถใช้งานได้แบบออฟไลน์ ตัวอย่างแสดงชุดของภาพจิ้งจอก

+ +

หากคุณมี Firefox สําหรับ Android ใช้ได้ใช้เพื่อนําทางไปยังการสาธิตของเราที่ คุณจะเห็นภาพจิ้งจอก แต่สําคัญกว่าคุณจะเห็นไอคอน "บ้าน" ที่มีไอคอนบวก (+) อยู่ข้างใน - นี่คือไอคอน "เพิ่มหน้าจอโฮม" สําหรับไซต์ที่มีคุณลักษณะที่จําเป็นhttps://mdn.github.io/pwa-examples/a2hs/

+ +

+ +

แตะที่ปุ่มนี้จะแสดงแบนเนอร์ยืนยัน - การกดปุ่มใหญ่ + ADD TO HOME SCREENเสร็จสิ้นการดําเนินการเพิ่มแอพไปยังหน้าจอหลัก (หมายเหตุ: ใน Android 8 และสูงกว่า ระบบระดับ "เพิ่มไปยังหน้าจอหลัก" โต้ตอบสิทธิ์จะแสดงก่อน.

+ +

+ +

หากคุณมี Chrome มือถือที่มีอยู่ประสบการณ์จะแตกต่างกันเล็กน้อย เมื่อโหลดเว็บไซต์ของเราคุณจะเห็นป๊อปอัพติดตั้งแบนเนอร์ขึ้นถามว่าคุณต้องการที่จะเพิ่ม app นี้ไปยังหน้าจอหลักของคุณ

+ +

+ +
+

Note: You can find out a lot more about Chrome install banners from the article Web App Install Banners.

+
+ +

If you choose not to add it to your Home screen at this point, you can do so later using the Add to Home screen icon in the main Chrome menu.

+ +

Regardless of which browser you are using, when you choose to add the app to your Home screen, you'll see it appear along with a short title, in the same way that native apps do.

+ +

+ +

Tapping this icon opens it up, but as a fullscreen app, you'll no longer see the browser UI around it.

+ +

How do you make an app A2HS-ready?

+ +

To enable your app to be added to a Home screen, it needs the following:

+ + + +

Manifest

+ +

The web manifest is written in standard JSON format and should be placed somewhere inside your app directory (in the root is probably best) with the name (we've chosen ). It contains multiple fields that define certain information about the web app and how it should behave.somefilename.webmanifestmanifest.webmanifest

+ +
+

Note: The extension is specified in the Media type registration section of the specification, but generally browsers will support manifests with other appropriate extensions, e.g. ..webmanifest.json

+
+ +

The fields needed for A2HS are as follows:

+ + + +

The manifest for our sample app looks like this:

+ +
{
+  "background_color": "purple",
+  "description": "Shows random fox pictures. Hey, at least it isn't cats.",
+  "display": "fullscreen",
+  "icons": [
+    {
+      "src": "icon/fox-icon.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "name": "Awesome fox pictures",
+  "short_name": "Foxes",
+  "start_url": "/pwa-examples/a2hs/index.html"
+}
+ +

Appropriate icon

+ +

As shown in the above manifest listing, we are including a 192 x 192 px icon for use in our app. You can include more sizes if you want; Android will choose the most appropriate size for each different use case. You could also decide to include different types of icons so devices can use the best one they are able to (e.g., Chrome already supports the WebP format).

+ +

Note that the member in each icon's object specifies the icon's mimetype, so the browser can quickly read what type the icon is, and then ignore it and move to a different icon if it doesn't support it.type

+ +

In terms of how to design the icon, you should follow the same best practices you'd follow for any Android icon (see the Android icon design guidelines).

+ + + +

To finish setting up your manifest, you need to reference it from the HTML of your application's home page:

+ +
<link rel="manifest" href="manifest.webmanifest">
+ +

Browsers that support A2HS will know where to look for your manifest once this is in place.

+ +

What does A2HS not give you?

+ +

Bear in mind that when you add an app to your Home screen, it just makes the app easily accessible — it doesn't download the app's assets and data to your device and make the app available offline, or anything like that. To make your app work offline, you have to use the Service Worker API to handle storing the assets offline, and if required, Web storage or IndexedDB to store its data.

+ +

In our example app, we've just used a service worker to store all necessary files. The service worker is registered against the site with the final code block in the file. We then cache all the site's assets using the Cache API, and serve them from the cache instead of the network using the code in the sw.js file.index.js

+ +

A2HS on desktop

+ +

While originally intended to improve user experience on mobile OSes, there is movement to make PWAs installable on desktop platforms too.

+ +
+

Note: At the time of writing, the functionality described below was only supported in newer versions of Chrome — by default on Windows, and behind the flag on macOS.#enable-desktop-pwas

+
+ +

Adding an install button

+ +

To make our PWA installable on desktop, we first added a button to our document to allow users to do the installation — this isn't made available automatically on desktop apps, and the installation needs to be triggered by a user gesture:

+ +
<button class="add-button">Add to home screen</button>
+ +

We then gave it some simple styling:

+ +
.add-button {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+}
+ +

JavaScript for handling the install

+ +

At the bottom of our index.js file, we added some JavaScript to handle the installation. First of all, we declare a variable (which we'll explain later on), get a reference to our install button, and set it to initially:deferredPromptdisplay: none

+ +
let deferredPrompt;
+const addBtn = document.querySelector('.add-button');
+addBtn.style.display = 'none';
+ +

We hide the button initially because the PWA will not be available for install until it follows the A2HS criteria. When this happens, supporting browsers will fire a event. We can then use a handler like the one below to handle the installation:beforeinstallprompt

+ +
window.addEventListener('beforeinstallprompt', (e) => {
+  // Prevent Chrome 67 and earlier from automatically showing the prompt
+  e.preventDefault();
+  // Stash the event so it can be triggered later.
+  deferredPrompt = e;
+  // Update UI to notify the user they can add to home screen
+  addBtn.style.display = 'block';
+
+  addBtn.addEventListener('click', (e) => {
+    // hide our user interface that shows our A2HS button
+    addBtn.style.display = 'none';
+    // Show the prompt
+    deferredPrompt.prompt();
+    // Wait for the user to respond to the prompt
+    deferredPrompt.userChoice.then((choiceResult) => {
+        if (choiceResult.outcome === 'accepted') {
+          console.log('User accepted the A2HS prompt');
+        } else {
+          console.log('User dismissed the A2HS prompt');
+        }
+        deferredPrompt = null;
+      });
+  });
+});
+ +

So here we:

+ + + +

The click handler contains the following steps:

+ + + +

So when the button is clicked, the install prompt appears.

+ +

+ +

If the user selects Install, the app is installed (available as standalone desktop app), and the Install button no longer shows (the event no longer fires if the app is already installed). When you open the app, it will appear in its own window:onbeforeinstallprompt

+ +

+ +

If the user selects Cancel, the state of the app goes back to how it was before the button was clicked.

+ +
+

Note: The code for this section was mostly taken from App install banners/Add to Home Screen by Pete LePage.

+
+ +

See also

+ + + +
{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}
diff --git a/files/th/web/progressive_web_apps/index.html b/files/th/web/progressive_web_apps/index.html new file mode 100644 index 0000000000..3b4e8c88e0 --- /dev/null +++ b/files/th/web/progressive_web_apps/index.html @@ -0,0 +1,111 @@ +--- +title: Progressive web apps (PWAs) +slug: Web/Progressive_web_apps +tags: + - App + - Application + - Apps + - Modern web apps + - NeedsTranslation + - PWA + - Progressive web apps + - TopicStub + - Web app + - Web applications +translation_of: Web/Progressive_web_apps +--- +
{{draft}}
+ +

PWA community logoProgressive Web Apps are web apps that use emerging web browser APIs and features along with traditional progressive enhancement strategy to bring a native app-like user experience to cross-platform web applications. Progressive Web Apps are a useful design pattern, though they aren't a formalized standard. PWA can be thought of as similar to AJAX or other similar patterns that encompass a set of application attributes, including use of specific web technologies and techniques. This set of docs tells you all you need to know about them.

+ +

In order to call a Web App a PWA, technically speaking it should have the following features: Secure contexts ({{Glossary("HTTPS")}}), one or more Service Workers, and a manifest file.

+ +
+
Secure contexts ({{Glossary("HTTPS")}})
+
The web application must be served over a secure network. Being a secure site is not only a best practice, but it also establishes your web application as a trusted site especially if users need to make secure transactions. Most of the features related to a PWA such as geolocation and even service workers are available only once the app has been loaded using HTTPS.
+
Service workers
+
A service worker is a script that allows intercepting and control of how a web browser handles its network requests and asset caching. With service workers, web developers can create reliably fast web pages and offline experiences.
+
Manifest file
+
A {{Glossary("JSON")}} file that controls how your app appears to the user and ensures that progressive web apps are discoverable. It describes the name of the app, the start URL, icons, and all of the other details necessary to transform the website into an app-like format.
+
+ +

PWA advantages

+ +

PWAs should be discoverable, installable, linkable, network independent, progressive, re-engageable, responsive, and safe. To find out more about what these mean, read Progressive web app advantages.

+ +

To find out how to implement PWAs, read through our PWA developer guide.

+ +

Documentation

+ +

<-- The temporary automatic list below will be replaced soon -->

+ +

{{LandingPageListSubpages}}

+ +
+

Everything below this point is left over from the old version of this page and will be revamped as other content is overhauled.

+
+ +

Core PWA guides

+ +

The following guides show you what need to do to implement a PWA, by examining a simple example and showing you how all the pieces work.

+ +
    +
  1. Introduction to progressive web apps
    2. +
  2. Progressive web app structure
    3. +
  3. Making PWAs work offline with Service workers
    4. +
  4. How to make PWAs installable
    5. +
  5. How to make PWAs re-engageable using Notifications and Push
    6. +
  6. Progressive loading
    7. +
+ +
+
+

Technology guides

+ + +
+ +
+

Tools

+ +
    +
  • localForage — A nice simple JavaScript library for making client-side data storage really simple; it uses IndexedDB by default and falls back to Web SQL/Web Storage if necessary.
    • +
  • ServiceWorkerWare — An Express-like microframework for easy Service Worker development.
    • +
  • oghliner — Not only a template but a tool for deploying Offline Web Apps to GitHub Pages.
    • +
  • sw-precache — A node module to generate service worker code that will precache specific resources.
    • +
  • workbox — Spiritual successor to sw-precache with more advanced caching strategies and easy precaching.
    • +
  • upup — A tiny script that makes sure your site is always there for your users.
    • +
  • The service worker cookbook — A series of excellent service worker/push recipes, showing how to implement an offline app, but also much more.
    • +
  • PWA VS Code extension - A collection of all essential code snippets you need to build Progressive Web Apps right there in your VS Code environment.
    • +
+
+
+ + + +
{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}
diff --git a/files/th/web/security/index.html b/files/th/web/security/index.html new file mode 100644 index 0000000000..c00772364d --- /dev/null +++ b/files/th/web/security/index.html @@ -0,0 +1,238 @@ +--- +title: Web security +slug: Web/Security +tags: + - Landing + - NeedsTranslation + - Security + - TopicStub + - Web +translation_of: Web/Security +--- +
+

Ensuring that your website or open web application is secure is critical. Even simple bugs in your code can result in private information being leaked, and bad people are out there trying to find ways to steal data. The web security-oriented articles listed here provide information that may help you secure your site and its code from attacks and data theft.

+
+ +

Content security

+ +
+
Content security policy (CSP)
+
Content Security Policy ({{Glossary("CSP")}}) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting ({{Glossary("XSS")}}) and data injection attacks. These attacks are used for everything from data theft to site defacement to the distribution of malware.
+
+ +

Connection security

+ +
+
Transport security layer (TLS)
+
The Transport Layer Security ({{Glossary("TLS")}}) protocol is the standard for enabling two networked applications or devices to exchange information privately and robustly. Applications that use TLS can choose their security parameters, which can have a substantial impact on the security and reliability of data. This article provides an overview of TLS and the kinds of decisions you need to make when securing your content.
+
HTTPS
+
HTTPS (HyperText Transfer Protocol Secure) is an encrypted version of the HTTP protocol. It uses SSL or TLS to encrypt all communication between a client and a server. This secure connection allows clients to be sure that they are connected with the intended server, and to exchange sensitive data.
+
HTTP Strict-Transport-Security
+
The Strict-Transport-Security: HTTP header lets a website specify that it may only be accessed using HTTPS.
+
Certificate Transparency
+
Certificate Transparency is an open framework designed to protect against and monitor for certificate misissuances. Newly issued certificates are 'logged' to publicly run, often independent CT logs which maintain an append-only, cryptographically assured record of issued TLS certificates.
+
Mixed content
+
An HTTPS page that includes content fetched using cleartext HTTP is called a mixed content page. Pages like this are only partially encrypted, leaving the unencrypted content accessible to sniffers and man-in-the-middle attackers.
+
How to fix a website with blocked mixed content
+
If your website delivers HTTPS pages, all active mixed content delivered via HTTP on these pages will be blocked by default. Consequently, your website may appear broken to users (if iframes or plugins don't load, etc.). Passive mixed content is displayed by default, but users can set a preference to block this type of content, as well. This page explains what you should be aware of as a web developer.
+
Secure contexts
+
A secure context is a Window or Worker for which there is reasonable confidence that the content has been delivered securely (via HTTPS/TLS), and for which the potential for communication with contexts that are not secure is limited. Many Web APIs and features are accessible only in a secure context. The primary goal of secure contexts is to prevent man-in-the-middle attackers from accessing powerful APIs that could further compromise the victim of an attack.
+
Features restricted to secure contexts
+
This reference lists the web platform features available only in secure contexts.
+
Weak signature algorithms
+
The strength of the hash algorithm used in signing a digital certificate is a critical element of the security of the certificate. This article provides some information about signature algorithms known to be weak, so you can avoid them when appropriate.
+
Redirection with 301 and 302 response codes
+
to be written
+
+ +

Data security

+ +
+
Using HTTP Cookies
+
An HTTP cookie (web cookie, browser cookie) is a small piece of data that a server sends to the user's web browser. The browser may store it and send it back with later requests to the same server. Typically, it's used to tell if two requests came from the same browser — keeping a user logged-in, for example.
+
Local storage
+
The Window object's Window.localStorage property is a way for servers to store data on a client that is persistent across sessions.
+
+ +

Information leakage

+ +
+
Referer header policy: privacy and security concerns
+
There are privacy and security risks associated with the Referer HTTP header. This article describes them and offers advice on mitigating those risks.
+
Robots.txt
+
to be written
+
Site maps
+
to be written
+
+ +

Integrity

+ +
+
Same-origin policy
+
The same-origin policy is a critical security mechanism that restricts how a document or script loaded from one origin can interact with a resource from another origin. It helps isolate potentially malicious documents, reducing possible attack vectors.
+
Subresource integrity
+
Subresource Integrity (SRI) is a security feature that enables browsers to verify that resources they fetch (for example, from a CDN) are delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched resource must match.
+
HTTP Access-Control-Allow-Origin
+
The Access-Control-Allow-Origin response header indicates whether the response can be shared with requesting code from the given origin.
+
HTTP X-Content-Type-Options
+
+

The X-Content-Type-Options response HTTP header is a marker used by the server to indicate that the MIME types advertised in the Content-Type headers should not be changed and be followed. This is a way to opt-out of MIME type sniffing, or, in other words, to say that the MIME types are deliberately configured.

+
+
+ +

Clickjacking protection

+ +

In clickjacking, a user is fooled into clicking on a UI element that performs some action other than what the user expects. 

+ +
+
HTTP X-Frame-Options
+
The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe>, <embed> or <object>. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.
+
CSP: frame-ancestors
+
The HTTP Content-Security-Policy (CSP) frame-ancestors directive specifies valid parents that may embed a page using <frame>, <iframe>, <object>, <embed>, or <applet>.
+
+ +

User information security

+ +
+
Insecure passwords
+
Serving login forms over HTTP is especially dangerous because of the wide variety of attacks that can be used against them to extract a user’s password. Network eavesdroppers could steal a user's password by sniffing the network, or by modifying the served page in transit.
+
Privacy and the :visited selector
+
Before about 2010, the CSS :visited selector allowed websites to uncover a user's browsing history and figure out what sites the user had visited. To mitigate this problem, browsers have limited the amount of information that can be obtained from visited links.
+
+ + + +
+ + + +
+ +

See also

+ + + +

{{QuickLinksWithSubpages}}

diff --git a/files/th/web/security/mixed_content/index.html b/files/th/web/security/mixed_content/index.html new file mode 100644 index 0000000000..8992059b18 --- /dev/null +++ b/files/th/web/security/mixed_content/index.html @@ -0,0 +1,85 @@ +--- +title: Mixed content +slug: Web/Security/Mixed_content +tags: + - HTTP + - HTTPS + - NeedsTranslation + - Security + - TopicStub + - Web + - console +translation_of: Web/Security/Mixed_content +--- +

When a user visits a page served over {{Glossary("HTTPS")}}, their connection with the web server is encrypted with {{Glossary("TLS")}} and is therefore safeguarded from most sniffers and man-in-the-middle attacks. An HTTPS page that includes content fetched using cleartext HTTP is called a mixed content page. Pages like this are only partially encrypted, leaving the unencrypted content accessible to sniffers and man-in-the-middle attackers. That leaves the pages unsafe.

+ +

Types of mixed content

+ +

There are two categories for mixed content: mixed passive/display content and mixed active content. The difference lies in the threat level of the worst case scenario if content is rewritten as part of a man-in-the-middle attack. In the case of passive content, the threat is lower (the page may contain misleading content, or the user's cookies may be stolen). In the case of active content, the threat can lead to phishing, sensitive data disclosure, redirection to malicious sites, etc.

+ +

Mixed passive/display content

+ +

Mixed passive/display content is content served over HTTP that is included in an HTTPS webpage, but that cannot alter other portions of the webpage. For example, an attacker could replace an image served over HTTP with an inappropriate image or message to the user. The attacker could also infer information about the user's activities by watching which images are served to the user; often images are only served on a specific page within a website. If the attacker observes HTTP requests to certain images, they could determine which webpage the user is visiting.

+ +

Passive content list

+ +

This section lists all types of HTTP requests which are considered passive content:

+ + + +

Mixed active content

+ +

Mixed active content is content that has access to all or parts of the Document Object Model of the HTTPS page. This type of mixed content can alter the behavior of the HTTPS page and potentially steal sensitive data from the user. Hence, in addition to the risks described for mixed display content above, mixed active content is vulnerable to a few other attack vectors.

+ +

In the mixed active content case, a man-in-the-middle attacker can intercept the request for the HTTP content. The attacker can also rewrite the response to include malicious JavaScript code. Malicious active content can steal the user's credentials, acquire sensitive data about the user, or attempt to install malware on the user's system (by leveraging vulnerabilities in the browser or its plugins, for example).

+ +

The risk involved with mixed content does depend on the type of website the user is visiting and how sensitive the data exposed to that site may be. The webpage may have public data visible to the world or private data visible only when authenticated. If the webpage is public and has no sensitive data about the user, using mixed active content still provides the attacker with the opportunity to redirect the user to other HTTP pages and steal HTTP cookies from those sites.

+ +

Active content examples

+ +

This section lists some types of HTTP requests which are considered active content:

+ + + +

Other resource types like web fonts and workers may be considered active mixed content, as they are in Chrome.

+ +

Warnings in Web Console

+ +

The Firefox Web Console displays a mixed content warning message in the Net pane when a page on your website has this issue. The mixed content resource that was loaded via HTTP will show up in red, along with the text "mixed content", which links to this page.

+ +

Screen shot of the web console displaying a mixed content warning.

+ +

As well as finding these warnings in the Web Console, you could use Content Security Policy (CSP) to report issues. You could also use an online crawler like SSL-check or Missing Padlock that will check your website recursively and find links to insecure content.

+ +

Starting in Firefox 23, mixed active content is blocked by default (and mixed display content can be blocked by setting a preference). To make it easier for web developers to find mixed content errors, all blocked mixed content requests are logged to the Security pane of the Web Console, as seen below:

+ +

A screenshot of blocked mixed content errors in the Security Pane of the Web Console

+ +

To fix this type of error, all requests to HTTP content should be removed and replaced with content served over HTTPS. Some common examples of mixed content include JavaScript files, stylesheets, images, videos, and other media.

+ +
+

Note: Since Firefox 55, the loading of mixed content is allowed on http://127.0.0.1/ (see {{bug(903966)}}). Chrome allows mixed content on http://127.0.0.1/ and http://localhost/. Safari does not allow any mixed content.

+
+ +

See also

+ + + +

{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}

diff --git a/files/th/web/tutorials/index.html b/files/th/web/tutorials/index.html new file mode 100644 index 0000000000..44d392ebd9 --- /dev/null +++ b/files/th/web/tutorials/index.html @@ -0,0 +1,248 @@ +--- +title: Tutorials +slug: Web/Tutorials +tags: + - ผู้เริ่ม + - เบราว์เซอร์ +translation_of: Web/Tutorials +--- +

ลิงค์ในหน้านี้นำไปสู่บทเรียนและสื่อการฝึกอบรมที่หลากหลาย ไม่ว่าคุณจะเพิ่งเริ่มเรียนรู้พื้นฐานหรือเป็นมือเก่าในการพัฒนาเว็บคุณสามารถค้นหาแหล่งข้อมูลที่เป็นประโยชน์ที่นี่เพื่อการปฏิบัติที่ดีที่สุด

+ +

ทรัพยากรเหล่านี้ถูกสร้างขึ้นโดย บริษัท ที่มีความคิดก้าวหน้าและนักพัฒนาเว็บที่ยอมรับมาตรฐานแบบเปิดและแนวปฏิบัติที่ดีที่สุดสำหรับการพัฒนาเว็บและให้หรืออนุญาตการแปลผ่านใบอนุญาตเนื้อหาแบบเปิดเช่น Creative Commons

+ +

สำหรับผู้เริ่มต้นที่สามารถ​ติดต่อ​ขอ​ขอ​ขอ​ตมจบูรณ์บนเว็บ

+ +
+
เริ่มต้นกับเว็บ
+
การเริ่มต้นใช้งานเว็บเป็นชุดย่อที่แนะนำให้คุณรู้จักกับการปฏิบัติจริงของการพัฒนาเว็บ คุณจะตั้งค่าเครื่องมือที่คุณต้องการในการสร้างหน้าเว็บอย่างง่ายและเผยแพร่โค้ดอย่างง่ายของคุณเอง
+
+ +

บทเรียน HTML

+ +

ระดับเบื้องต้น

+ +
+
+
+
รู้เบื้องต้นเกี่ยวกับ HTML
+
โมดูลนี้ตั้งค่าขั้นตอนให้คุณคุ้นเคยกับแนวคิดและไวยากรณ์ที่สำคัญดูที่การใช้ HTML กับข้อความวิธีสร้างการเชื่อมโยงหลายมิติและวิธีการใช้ HTML เพื่อจัดโครงสร้างหน้าเว็บ
+
การอ้างอิงองค์ประกอบ MDN HTML
+
การอ้างอิงที่ครอบคลุมสำหรับองค์ประกอบ HTML และวิธีการที่เบราว์เซอร์ต่างๆสนับสนุนพวกเขา
+
+
+ +
+
+
การสร้างเว็บเพจอย่างง่ายด้วย HTML 
+
คำแนะนำ HTML สำหรับผู้เริ่มต้นที่มีคำอธิบายของแท็กทั่วไปรวมถึงแท็ก HTML5 นอกจากนี้ยังมีคำแนะนำทีละขั้นตอนในการสร้างหน้าเว็บพื้นฐานพร้อมตัวอย่างโค้ด
+
ความท้าทาย HTML 
+
ใช้ความท้าทายเหล่านี้เพื่อฝึกฝนทักษะ HTML ของคุณ (ตัวอย่างเช่น "ฉันควรใช้องค์ประกอบ <h2> หรือองค์ประกอบ <strong> หรือไม่") โดยเน้นที่มาร์กอัปที่มีความหมาย
+
+
+
+ +

ระดับกลาง

+ +
+
+
+
มัลติมีเดียและการฝัง
+
โมดูลนี้สำรวจวิธีการใช้ HTML เพื่อรวมมัลติมีเดียในหน้าเว็บของคุณรวมถึงวิธีการต่าง ๆ ที่สามารถรวมรูปภาพและวิธีฝังวิดีโอเสียงและแม้แต่หน้าเว็บอื่น ๆ ทั้งหมด
+
+
+ +
+
+
ตาราง HTML
+
Representing tabular data on a webpage in an understandable, {{glossary("Accessibility", "accessible")}} way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.
+
+
+
+ +

Advanced level

+ +
+
+
+
HTML forms
+
Forms are a very important part of the Web — these provide much of the functionality you need for interacting with websites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side parts of forms.
+
+
+ +
+
+
Tips for authoring fast-loading HTML pages
+
Optimize web pages to provide a more responsive site for visitors and reduce the load on your web server and Internet connection.
+
+
+
+ +

CSS Tutorials

+ +

Introductory level

+ +
+
+
+
CSS basics
+
CSS (Cascading Style Sheets) เป็นรหัสที่คุณใช้เพื่อจัดรูปแบบหน้าเว็บของคุณ CSS Basicsนำคุณไปสู่สิ่งที่คุณต้องเริ่มต้น เราจะตอบคำถามเช่น: ฉันจะทำให้ข้อความของฉันเป็นสีดำหรือสีแดงได้อย่างไร ฉันจะทำให้เนื้อหาของฉันปรากฏในสถานที่เช่นนั้นบนหน้าจอได้อย่างไร ฉันจะตกแต่งเว็บเพจด้วยภาพพื้นหลังและสีได้อย่างไร
+
CSS เบื้องต้น
+
โมดูลนี้มีเนื้อหาเชิงลึกเกี่ยวกับวิธีการทำงานของ CSS รวมถึงตัวเลือกและคุณสมบัติการเขียนกฎ CSS การใช้ CSS กับ HTML วิธีการระบุความยาวสีและหน่วยอื่น ๆ ใน CSS การเรียงซ้อนและการสืบทอดข้อมูลพื้นฐานโมเดลโมเดลและการดีบัก CSS
+
+
+ +
+
+
กล่องใส่สไตล์
+
ต่อไปเราจะดูกล่องใส่สไตล์ซึ่งเป็นหนึ่งในขั้นตอนพื้นฐานในการวางหน้าเว็บ ในโมดูลนี้เราสรุปโมเดลของกล่องจากนั้นดูที่การควบคุมเลย์เอาต์ของกล่องโดยการตั้งค่าช่องว่างภายในขอบและระยะขอบการตั้งค่าสีพื้นหลังที่กำหนดเองรูปภาพและคุณสมบัติอื่น ๆ และคุณสมบัติแฟนซีเช่นเงาและตัวกรองบนกล่อง
+
ข้อความสไตล์
+
ที่นี่เราดูที่พื้นฐานการใส่สไตล์ข้อความรวมถึงการตั้งค่าแบบอักษรความหนาและตัวเอียงตัวเว้นบรรทัดและตัวอักษรและเงาและตัวอักษรและคุณสมบัติข้อความอื่น ๆ เราปัดเศษโมดูลโดยดูที่การใช้ฟอนต์ที่กำหนดเองกับหน้าของคุณและรายการจัดแต่งทรงผมและลิงค์
+
คำถาม CSS ทั่วไป
+
คำถามและคำตอบทั่วไปสำหรับผู้เริ่มต้น
+
+
+
+ +

ระดับกลาง

+ +
+
+
+
โครงร่าง CSS
+
ณ จุดนี้เราได้ดูพื้นฐาน CSS, วิธีจัดรูปแบบข้อความและวิธีจัดรูปแบบและจัดการกล่องที่เนื้อหาของคุณอยู่ภายใน ตอนนี้เป็นเวลาที่จะดูวิธีการวางกล่องของคุณในสถานที่ที่เหมาะสมในความสัมพันธ์กับวิวพอร์ตและอีกคนหนึ่ง เราได้ครอบคลุมข้อกำหนดเบื้องต้นที่จำเป็นเพื่อให้สามารถดำน้ำลึกลงในเค้าโครง CSS ได้โดยดูที่การตั้งค่าการแสดงผลที่แตกต่างกันวิธีการจัดวางแบบดั้งเดิมที่เกี่ยวข้องกับการลอยและการวางตำแหน่งและเครื่องมือเค้าโครงแบบใหม่
+
การอ้างอิง CSS
+
อ้างอิง CSS ทั้งหมดโดยมีรายละเอียดเกี่ยวกับการสนับสนุนโดย Firefox และเบราว์เซอร์อื่น ๆ
+
+
+ +
+
+
กริดของไหล
+
ออกแบบเลย์เอาต์ที่ปรับขนาดได้อย่างคล่องแคล่วกับหน้าต่างเบราว์เซอร์ในขณะที่ยังคงใช้ตารางตัวพิมพ์
+
ความท้าทาย CSS 
+
ยืดหยุ่นทักษะ CSS ของคุณและดูว่าคุณต้องการฝึกฝนอะไรมาก
+
+
+
+ +

ระดับสูง

+ +
+
+
+
การใช้การแปลง CSS
+
ใช้การหมุนการเอียงการปรับขนาดและการแปลโดยใช้ CSS
+
การเปลี่ยน CSS
+
การเปลี่ยน CSS ซึ่งเป็นส่วนหนึ่งของข้อกำหนด CSS3 แบบร่างให้วิธีในการสร้างการเปลี่ยนแปลงคุณสมบัติของ CSS แทนที่จะทำให้การเปลี่ยนแปลงมีผลทันที
+
+
+ +
+
+
คู่มือฉบับย่อเพื่อปรับใช้แบบอักษรบนเว็บ (ด้วย @ font-face) 
+
คุณลักษณะ @ font-face จาก CSS3 ช่วยให้คุณใช้แบบอักษรที่กำหนดเองบนเว็บในแบบที่เข้าถึงได้จัดการได้และปรับขนาดได้
+
เริ่มเขียน CSS 
+
การแนะนำเครื่องมือและวิธีการในการเขียน CSS ที่กระชับง่ายต่อการบำรุงรักษาและปรับขนาดได้
+
+
+
+ +
+
+
แบบฝึกหัด Canvas
+
เรียนรู้วิธีการวาดกราฟิกโดยใช้สคริปต์โดยใช้องค์ประกอบภาพวาด
+
HTML5 Doctor
+
บทความเกี่ยวกับการใช้ HTML5 ในขณะนี้
+
+
+ +

จาวาสคริปต์

+ +

ระดับเบื้องต้น

+ +
+
+
+
JavaScript ขั้นตอนแรก
+
ในโมดูล JavaScript แรกของเราเราจะตอบคำถามพื้นฐานบางอย่างเช่น "JavaScript คืออะไร", "มันมีลักษณะอย่างไร" และ "ทำอะไรได้บ้าง" ก่อนที่จะนำคุณไปสู่ประสบการณ์การใช้งานจริงครั้งแรกของคุณ ของการเขียน JavaScript หลังจากนั้นเราจะพูดถึงคุณสมบัติที่สำคัญของ JavaScript ในรายละเอียดเช่นตัวแปรสตริงตัวเลขและอาร์เรย์
+
การสร้างบล็อก JavaScript
+
ในโมดูลนี้เรายังคงให้ความสำคัญกับคุณสมบัติพื้นฐานที่สำคัญทั้งหมดของ JavaScript โดยหันความสนใจไปที่ประเภทของบล็อคโค้ดที่พบทั่วไปเช่นข้อความสั่งเงื่อนไขเงื่อนไขลูปฟังก์ชันและกิจกรรม คุณเคยเห็นสิ่งนี้มาแล้วในหลักสูตร แต่เมื่อผ่านไป - ที่นี่เราจะพูดถึงมันทั้งหมดอย่างชัดเจน
+
+
+ +
+
+
เริ่มต้นกับ JavaScript
+
JavaScript คืออะไรและจะช่วยคุณได้อย่างไร
+
Codecademy 
+
Codecademy เป็นวิธีที่ง่ายในการเรียนรู้วิธีการรหัส JavaScript มันเป็นแบบโต้ตอบและคุณสามารถทำได้กับเพื่อนของคุณ
+
freeCodeCamp
+
freeCodeCamp สอนภาษาและกรอบต่าง ๆ สำหรับการพัฒนาเว็บ นอกจากนี้ยังมี  ฟอรั่มการ  สถานีวิทยุอินเทอร์เน็ตและบล็อก
+
+
+
+ +

ระดับกลาง

+ +
+
+
+
แนะนำวัตถุ JavaScript
+
ใน JavaScript สิ่งต่าง ๆ ส่วนใหญ่เป็นวัตถุตั้งแต่คุณสมบัติหลักของ JavaScript เช่นสตริงและอาร์เรย์ไปจนถึง API ของเบราว์เซอร์ที่สร้างขึ้นจาก JavaScript คุณสามารถสร้างวัตถุของคุณเองเพื่อแค็ปซูลฟังก์ชั่นและตัวแปรที่เกี่ยวข้องลงในแพ็คเกจที่มีประสิทธิภาพ ลักษณะเชิงวัตถุของ JavaScript นั้นมีความสำคัญที่จะต้องเข้าใจหากคุณต้องการเพิ่มเติมความรู้ภาษาและเขียนโค้ดที่มีประสิทธิภาพมากขึ้นดังนั้นเราจึงได้จัดเตรียมโมดูลนี้เพื่อช่วยคุณ ที่นี่เราสอนทฤษฎีของวัตถุและไวยากรณ์อย่างละเอียดดูที่วิธีสร้างวัตถุของคุณเองและอธิบายว่าข้อมูล JSON คืออะไรและทำงานอย่างไรกับมัน
+
APIs เว็บฝั่งไคลเอ็นต์
+
เมื่อเขียน JavaScript ฝั่งไคลเอ็นต์สำหรับเว็บไซต์หรือแอปพลิเคชันคุณจะไม่ไปไกลมากนักก่อนที่คุณจะเริ่มใช้ API - ส่วนต่อประสานสำหรับจัดการกับแง่มุมต่าง ๆ ของเบราว์เซอร์และระบบปฏิบัติการที่เว็บไซต์ทำงานอยู่หรือแม้แต่ข้อมูลจากเว็บไซต์หรือบริการอื่น ๆ . ในโมดูลนี้เราจะสำรวจว่า API คืออะไรและวิธีใช้ API ทั่วไปที่คุณพบเจอบ่อยครั้งในงานพัฒนาของคุณ 
+
+
+ +
+
+
บทนำสู่ JavaScript
+
บทสรุปของภาษาการเขียนโปรแกรม JavaScript มุ่งเป้าไปที่นักพัฒนาระดับกลาง
+
ฝีปากจาวาสคริปต์
+
คู่มือที่ครอบคลุมถึงวิธีการใช้งาน JavaScript ระดับกลางและระดับสูง
+
การพูดจาวาสคริปต์ 
+
สำหรับโปรแกรมเมอร์ที่ต้องการเรียนรู้ JavaScript อย่างรวดเร็วและถูกต้องและสำหรับโปรแกรมเมอร์ JavaScript ที่ต้องการเพิ่มพูนทักษะและ / หรือค้นหาหัวข้อเฉพาะ
+
รูปแบบการออกแบบ JavaScript ที่สำคัญ 
+
คำแนะนำเกี่ยวกับรูปแบบการออกแบบ JavaScript ที่สำคัญ
+
+
+
+ +

ระดับสูง

+ +
+
+
+
คู่มือการใช้งาน JavaScript
+
คู่มือที่ครอบคลุมและอัปเดตเป็นประจำเพื่อ JavaScript สำหรับการเรียนรู้ทุกระดับตั้งแต่เริ่มต้นจนถึงขั้นสูง
+
คุณไม่รู้ JS 
+
ชุดของหนังสือดำน้ำลึกเข้าไปในกลไกหลักของภาษาจาวา
+
จาวาสคริปต์การ์เด้น
+
เอกสารของส่วนที่แปลกประหลาดที่สุดของ JavaScript
+
สำรวจ ES6 
+
ข้อมูลที่เชื่อถือได้และในเชิงลึกเกี่ยวกับ ECMAScript 2015
+
+
+ +
+
+
รูปแบบ JavaScript
+
รูปแบบ JavaScript และคอลเลกชัน antipattern ที่ครอบคลุมรูปแบบการทำงานรูปแบบ jQuery รูปแบบปลั๊กอิน jQuery รูปแบบการออกแบบรูปแบบทั่วไปตัวอักษรและรูปแบบตัวสร้างรูปแบบการสร้างวัตถุรูปแบบการใช้รหัสซ้ำ DOM
+
เบราว์เซอร์ทำงานอย่างไร
+
บทความวิจัยโดยละเอียดที่อธิบายถึงเบราว์เซอร์ที่ทันสมัยเครื่องมือการแสดงผลหน้า ฯลฯ
+
วิดีโอ JavaScript 
+
คอลเลกชันวิดีโอ JavaScript เพื่อดู
+
+
+
+ +

การพัฒนาเสริม

+ +
+
+
+
WebExtensions
+
WebExtensions เป็นระบบข้ามเบราว์เซอร์สำหรับการพัฒนาโปรแกรมเสริมของเบราว์เซอร์ ในระดับใหญ่ระบบสามารถทำงานร่วมกับAPI ส่วนขยายที่รองรับโดย Google Chrome และ Opera ส่วนใหญ่ที่เขียนไว้สำหรับเบราว์เซอร์เหล่านี้ส่วนใหญ่จะทำงานใน Firefox หรือMicrosoft Edgeโดยมีการเปลี่ยนแปลงเล็กน้อย API ที่ยังเป็นอย่างเข้ากันได้กับmultiprocess Firefox
+
+
+
-- cgit v1.2.3-54-g00ecf