initial commit

34 files changed, 5762 insertions, 0 deletions

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
+---
+<p>{{APIRef("Bluetooth API")}}{{securecontext_header}}{{SeeCompatTable}}</p>
+
+<p>The <strong><code>Bluetooth</code></strong> interface of the <a href="/en-US/docs/Web/API/Web_Bluetooth_API">Web Bluetooth API</a> returns a {{jsxref("Promise")}} to a {{domxref("BluetoothDevice")}} object with the specified options.</p>
+
+<h2 id="Interface">Interface</h2>
+
+<pre class="syntaxbox">interface Bluetooth : EventTarget {
+  [SecureContext] Promise&lt;boolean&gt; getAvailability();
+  [SecureContext] attribute EventHandler onavailabilitychanged;
+  [SecureContext, SameObject] readonly attribute BluetoothDevice? referringDevice;
+  [SecureContext] Promise&lt;BluetoothDevice&gt; requestDevice(optional RequestDeviceOptions options);
+};
+Bluetooth implements BluetoothDeviceEventHandlers;
+Bluetooth implements CharacteristicEventHandlers;
+Bluetooth implements ServiceEventHandlers;</pre>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Bluetooth.referringDevice")}} {{readonlyinline}}</dt>
+ <dd>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 <code>navigator.bluetooth.referringDevice</code>.</dd>
+</dl>
+
+<h3 id="Events">Events</h3>
+
+<dl>
+ <dt>{{domxref("Bluetooth.onavailabilitychanged")}}</dt>
+ <dd>An event handler that runs when an event of type {{event("availabilitychanged")}} has fired.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Bluetooth.getAvailability()")}}</dt>
+ <dd>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.</dd>
+ <dt>{{domxref("Bluetooth.requestDevice()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} to a {{domxref("BluetoothDevice")}} object with the specified options.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Bluetooth', '#bluetooth', 'Bluetooth')}}</td>
+   <td>{{Spec2('Web Bluetooth')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Bluetooth")}}</p>
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
+---
+<p>{{APIRef("Bluetooth API")}}{{securecontext_header}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">The <strong><code>onavailabilitychanged</code></strong> property of the {{DOMxRef("Bluetooth")}} interface is an {{DOMxRef("EventHandler")}} that processes <code>availabilitychanged</code> events that fire when the Bluetooth system as a whole becomes available or unavailable to the {{Glossary("User Agent")}}.</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>Bluetooth</em>.onavailabilitychanged = <em>functionRef</em>;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p><code>functionRef</code> is the handler function to be called when the Bluetooth <code>availabilitychanged</code> event fires.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Bluetooth", "#bluetooth", "Bluetooth")}}</td>
+   <td>{{Spec2("Web Bluetooth")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden"><font><font>ตารางความเข้ากันได้ในหน้านี้สร้างขึ้นจากข้อมูลที่มีโครงสร้าง </font><font>หากคุณต้องการมีส่วนร่วมกับข้อมูลโปรดตรวจสอบ</font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font>และส่งคำขอดึง</font></font></div>
+
+<p><font><font>{{compat ( "api.Bluetooth.onavailabilitychanged")}}</font></font></p>
+
+<h2 id="ดูสิ่งนี้ด้วย"><font><font>ดูสิ่งนี้ด้วย</font></font></h2>
+
+<ul>
+ <li><font><font>{{DOMxRef ( "Bluetooth.getAvailability")}}</font></font></li>
+</ul>
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
+---
+<p><font><font>{{APIRef ("Service Workers API")}}</font></font></p>
+
+<p><strong><code>CacheStorage</code></strong><font><font>อินเตอร์เฟซที่แสดงให้เห็นถึงการจัดเก็บข้อมูลสำหรับ {{domxref ( "แคช")}} วัตถุ</font></font></p>
+
+<p><font><font>อินเทอร์เฟซ:</font></font></p>
+
+<ul>
+ <li><font><font>จัดเตรียมไดเร็กทอรีหลักของแคชที่มีชื่อทั้งหมดซึ่งสามารถเข้าถึงได้โดย {{domxref ("ServiceWorker")}} หรือผู้ปฏิบัติงานประเภทอื่นหรือขอบเขต {{domxref ("window")}} (คุณไม่ จำกัด เฉพาะ โดยใช้กับพนักงานบริการแม้ว่าข้อมูลจำเพาะ {{SpecName ('Service Workers')}} จะกำหนดก็ตาม)</font></font>
+
+  <div class="note"><strong><font><font>หมายเหตุ</font></font></strong><font><font> : </font></font><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1026063"><font><font>Chrome และ Safari 7เพียงเปิดเผย `CacheStorage` กับบริบทหน้าต่างผ่าน </font></font></a><font><font>HTTPS </font><font>{{domxref ("window.caches")}} จะไม่ถูกกำหนดเว้นแต่จะมีการกำหนดค่าใบรับรอง SSL</font></font></div>
+ </li>
+ <li><font><font>รักษาการแมปชื่อสตริงกับออบเจ็กต์ {{domxref ("Cache")}} ที่เกี่ยวข้อง</font></font></li>
+</ul>
+
+<p><font><font>ใช้ {{domxref ("CacheStorage.open ()")}} เพื่อรับอินสแตนซ์ {{domxref ("Cache")}}</font></font></p>
+
+<p>Use {{domxref("CacheStorage.match()")}} to check if a given {{domxref("Request")}} is a key in any of the {{domxref("Cache")}} objects that the <code>CacheStorage</code> object tracks.</p>
+
+<p>You can access <code>CacheStorage</code> through the global {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}} property.</p>
+
+<div class="note"><strong>Note</strong>: CacheStorage always rejects with a <code>SecurityError</code> 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.</div>
+
+<div class="note"><strong>Note</strong>: {{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()")}}.</div>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("CacheStorage.match()")}}</dt>
+ <dd>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.</dd>
+ <dt>{{domxref("CacheStorage.has()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves to <code>true</code> if a {{domxref("Cache")}} object matching the <code>cacheName</code> exists.</dd>
+ <dt>{{domxref("CacheStorage.open()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves to the {{domxref("Cache")}} object matching the <code>cacheName</code> (a new cache is created if it doesn't already exist.)</dd>
+ <dt>{{domxref("CacheStorage.delete()")}}</dt>
+ <dd>Finds the {{domxref("Cache")}} object matching the <code>cacheName</code>, and if found, deletes the {{domxref("Cache")}} object and returns a {{jsxref("Promise")}} that resolves to <code>true</code>. If no {{domxref("Cache")}} object is found, it resolves to <code>false</code>.</dd>
+ <dt>{{domxref("CacheStorage.keys()")}}</dt>
+ <dd>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.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This code snippet is from the MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> (see <a href="https://mdn.github.io/sw-test/">sw-test running live</a>.) 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.</p>
+
+<p>In the second code block, we wait for a {{domxref("FetchEvent")}} to fire. We construct a custom response like so:</p>
+
+<ol>
+ <li>Check whether a match for the request is found in the CacheStorage. If so, serve that.</li>
+ <li>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")}} (<code>cache.put(event.request, response.clone())</code>.)</li>
+ <li>If this fails (e.g. because the network is down), return a fallback response.</li>
+</ol>
+
+<p>Finally, return whatever the custom response ended up being equal to, using {{domxref("FetchEvent.respondWith")}}.</p>
+
+<pre class="brush: js notranslate">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');
+      });
+    }
+  }));
+});
+</pre>
+
+<p>This snippet shows how the API can be used outside of a service worker context, and uses the <code>await</code> operator for much more readable code.</p>
+
+<pre class="brush: js notranslate">// 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 ) {<font><font>
+      const isOurCache = 'myapp-' === key.substr (0, 6);</font></font>
+<font><font>
+      ถ้า (currentCache === คีย์ ||! isOurCache) {</font></font><font><font>
+         ดำเนินการต่อ;</font></font><font><font>
+      }</font></font>
+<font><font>
+      caches.delete (คีย์);</font></font><font><font>
+   }</font></font><font><font>
+}</font></font>
+<font><font>
+ลอง {</font></font><font><font>
+   const data = รอ getData ();</font></font><font><font>
+   console.log ({data});</font></font><font><font>
+} catch (error) {</font></font><font><font>
+   console.error ({error});</font></font><font><font>
+}</font></font></pre>
+
+<h2 id="ข้อมูลจำเพาะ"><font><font>ข้อมูลจำเพาะ</font></font></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><font><font>ข้อมูลจำเพาะ</font></font></th>
+   <th scope="col"><font><font>สถานะ</font></font></th>
+   <th scope="col"><font><font>แสดงความคิดเห็น</font></font></th>
+  </tr>
+  <tr>
+   <td><font><font>{{SpecName ('Service Workers', '#cachestorage', 'CacheStorage')}}</font></font></td>
+   <td><font><font>{{Spec2 ('พนักงานบริการ')}}</font></font></td>
+   <td><font><font>นิยามเริ่มต้น</font></font></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ความเข้ากันได้ของเบราว์เซอร์"><font><font>ความเข้ากันได้ของเบราว์เซอร์</font></font></h2>
+
+<div class="hidden"><font><font>ตารางความเข้ากันได้ในหน้านี้สร้างขึ้นจากข้อมูลที่มีโครงสร้าง </font><font>หากคุณต้องการมีส่วนร่วมในข้อมูลโปรดดู</font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font>และส่งคำขอดึงข้อมูลมาให้เรา</font></font></div>
+
+<p><font><font>{{คอมแพต ("api.CacheStorage")}}</font></font></p>
+
+<h2 id="ดูสิ่งนี้ด้วย"><font><font>ดูสิ่งนี้ด้วย</font></font></h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers"><font><font>การใช้พนักงานบริการ</font></font></a></li>
+ <li><font><font>{{domxref ("แคช")}}</font></font></li>
+ <li><font><font>{{domxref ("WindowOrWorkerGlobalScope.caches")}}</font></font></li>
+</ul>
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
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>The <code><strong>Geolocation</strong></code> 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.</p>
+
+<p>An object with this interface is obtained using the {{domxref("navigator.geolocation")}} property implemented by the {{domxref("Navigator")}} object.</p>
+
+<div class="note">
+<p><strong>Note:</strong> 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.</p>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The <code>Geolocation</code> interface neither implements, nor inherits any property.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em><em>The <code>Geolocation</code> interface doesn't inherit any </em>method</em>.</p>
+
+<dl>
+ <dt>{{domxref("Geolocation.getCurrentPosition()")}} {{securecontext_inline}}</dt>
+ <dd>Determines the device's current location and gives back a {{domxref("Position")}} object with the data.</dd>
+ <dt>{{domxref("Geolocation.watchPosition()")}} {{securecontext_inline}}</dt>
+ <dd>Returns a <code>long</code> value representing the newly established callback function to be invoked whenever the device location changes.</dd>
+ <dt>{{domxref("Geolocation.clearWatch()")}} {{securecontext_inline}}</dt>
+ <dd>Removes the particular handler previously installed using <code>watchPosition()</code>.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removed in 15.0<br>
+    Reintroduced in 16.0</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Secure context-only</td>
+   <td>47</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>Secure context-only</td>
+   <td>{{CompatNo}}</td>
+   <td>47</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+</ul>
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
+---
+<div>{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}</div>
+
+<p><strong>Geolocation API</strong>จะช่วยให้ผู้ใช้สามารถใช้งานเว็บไซต์ได้หากพวกเขาต้องการที่จะใช้เหตุผลในการรายงานข้อมูลตำแหน่ง</p>
+
+<p>Web ส่วนขยายที่ต้องการใช้วัตถุ Geolocation ต้องเพิ่ม<code>"geolocation"</code>สิทธิ์ในการแสดงรายการ ระบบปฏิบัติการของผู้ใช้จะแจ้งให้ผู้ใช้อนุญาตการเข้าถึงตำแหน่งในครั้งแรกที่มีการร้องขอ</p>
+
+<h2 id="แนวคิดและการใช้งาน">แนวคิดและการใช้งาน</h2>
+
+<p>คุณมักจะต้องการดึงข้อมูลตำแหน่งของผู้ใช้ในแอปพลิเคชันเว็บของคุณเช่นเพื่อพล็อตตำแหน่งของพวกเขาบนแผนที่หรือแสดงข้อมูลส่วนตัวที่เกี่ยวข้องกับตำแหน่งของพวกเขา</p>
+
+<p>Geolocation API เข้าถึงได้ผ่านการเรียก {{domxref("Navigator.geolocation", "navigator.geolocation")}}; สิ่งนี้จะทำให้เบราว์เซอร์ของผู้ใช้ถามเพื่อขออนุญาตเข้าถึงข้อมูลตำแหน่งของพวกเขา หากพวกเขายอมรับเบราว์เซอร์จะใช้ฟังก์ชันการทำงานที่ดีที่สุดบนอุปกรณ์เพื่อเข้าถึงข้อมูลนี้ (ตัวอย่างเช่น GPS)</p>
+
+<p>นักพัฒนาซอฟต์แวร์สามารถเข้าถึงข้อมูลตำแหน่งนี้ได้สองวิธี:</p>
+
+<ul>
+ <li>{{domxref("Geolocation.getCurrentPosition()")}}: ดึงตำแหน่งปัจจุบันของอุปกรณ์</li>
+ <li>{{domxref("Geolocation.watchPosition()")}}: ลงทะเบียนฟังก์ชั่นการจัดการที่จะถูกเรียกโดยอัตโนมัติทุกครั้งที่มีการเปลี่ยนตำแหน่งของอุปกรณ์โดยคืนตำแหน่งที่อัปเดต</li>
+</ul>
+
+<p>ในทั้งสองกรณีการเรียกใช้เมธอดใช้เวลาถึงสามอาร์กิวเมนต์:</p>
+
+<ul>
+ <li>การเรียกกลับสำเร็จที่ได้รับคำสั่ง: หากการเรียกคืนตำแหน่งสำเร็จการเรียกกลับจะดำเนินการกับวัตถุ {{domxref("GeolocationPosition")}} เป็นพารามิเตอร์เดียวเพื่อให้สามารถเข้าถึงข้อมูลตำแหน่งได้</li>
+ <li>ข้อผิดพลาดทางเลือกโทรกลับ: หากการเรียกคืนตำแหน่งไม่สำเร็จการเรียกกลับจะดำเนินการกับวัตถุ {{domxref("GeolocationPositionError")}} เป็นพารามิเตอร์เดียวให้ข้อมูลการเข้าถึงสิ่งที่ผิดพลาด</li>
+ <li>{{domxref("PositionOptions")}} วัตถุที่เป็นตัวเลือกซึ่งมีตัวเลือกสำหรับการดึงข้อมูลตำแหน่ง</li>
+</ul>
+
+<p>สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้ Geolocation อ่าน<a href="/en-US/docs/Web/API/Geolocation_API/Using_the_Geolocation_API">ใช้ Geolocation </a>API</p>
+
+<h2 id="อินเตอร์เฟซ">อินเตอร์เฟซ</h2>
+
+<dl>
+ <dt>{{domxref("Geolocation")}}</dt>
+ <dd>คลาสหลักของ API นี้ - ประกอบด้วยวิธีการดึงข้อมูลตำแหน่งปัจจุบันของผู้ใช้เฝ้าดูการเปลี่ยนแปลงตำแหน่งและล้างนาฬิกาที่ตั้งไว้ก่อนหน้านี้</dd>
+ <dt>{{domxref("GeolocationPosition")}}</dt>
+ <dd>แสดงตำแหน่งของผู้ใช้ <code>GeolocationPosition</code>อินสแตนซ์ถูกส่งกลับโดยการเรียกร้องที่ประสบความสำเร็จให้เป็นหนึ่งในวิธีการที่มีอยู่ภายใน {{domxref("Geolocation")}} ภายในโทรกลับประสบความสำเร็จและมีการประทับเวลาบวก {{domxref("GeolocationCoordinates")}} ตัวอย่างวัตถุ</dd>
+ <dt>{{domxref("GeolocationCoordinates")}}</dt>
+ <dd>แสดงเรียงลำดับของตำแหน่งที่มีการเชื่อมโยง<code>GeolocationCoordinates</code>และข้อมูลอื่น ๆ ที่สำคัญ</dd>
+ <dt>{{domxref("GeolocationPositionError")}}</dt>
+ <dd>A <code>GeolocationPositionError</code>ถูกส่งคืนโดยการเรียกที่ไม่สำเร็จไปยังหนึ่งในวิธีการที่อยู่ภายใน {{domxref("Geolocation")}}, ภายในการเรียกกลับข้อผิดพลาดและมีรหัสข้อผิดพลาดและข้อความ</dd>
+ <dt>{{domxref("Navigator.geolocation")}}</dt>
+ <dd>API เข้าสู่ระบบส่งคืนวัตถุ {{domxref("ตำแหน่งทางภูมิศาสตร์")}}</dd>
+</dl>
+
+<h2 id="พจนานุกรม">พจนานุกรม</h2>
+
+<dl>
+ <dt>{{domxref("PositionOptions")}}</dt>
+ <dd>แสดงให้เห็นถึงเนื้อหาที่มีตัวเลือกที่จะผ่านการเก็บของ {{domxref("Geolocation.getCurrentPosition()")}} และ {{domxref("Geolocation.watchPosition()")}}</dd>
+</dl>
+
+<h2 id="ตัวอย่าง">ตัวอย่าง</h2>
+
+<div>{{page("/en-US/docs/Web/API/Geolocation_API/Using_the_Geolocation_API","Examples")}}</div>
+
+<h2 id="ข้อมูลจำเพาะ">ข้อมูลจำเพาะ</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">สเปค</th>
+   <th scope="col">สถานะ</th>
+   <th scope="col">คิดเห็น</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("ตำแหน่งทางภูมิศาสตร์")}}}</td>
+   <td>{{Spec2("ตำแหน่งทางภูมิศาสตร์")}}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ความเข้ากันได้ของเบราว์เซอร์">ความเข้ากันได้ของเบราว์เซอร์</h2>
+
+<p>{{compat("api.Geolocation")}}</p>
+
+<h3 id="ความพร้อมใช้งาน">ความพร้อมใช้งาน</h3>
+
+<p>เนื่องจาก Google เป็นผู้ให้บริการระบุตำแหน่งผ่าน WiFi ดังนั้นวานิลลา Geolocation API จึงอาจไม่ด้านใช้งานพนักงานพนักงานได้ในห้างหุ้นส่วนจำกัดห้างหุ้นส่วนจำกัดออกออกประเทศจีนที่ที่คุณคุณที่คุณคุณอาจจะใช้ที่คุณคุณคุณผู้ให้บริการบุคคลที่สามในห้างหุ้นส่วนจำกัดห้างหุ้นส่วนจำกัดท้องถิ่นเช่น<a href="http://lbsyun.baidu.com/index.php?title=jspopular/guide/geolocation">Baidu</a> , <a href="https://lbs.amap.com/api/javascript-api/guide/services/geolocation#geolocation">AutoNavi</a>หรือTencent บริการเหล่านี้ที่อยู่ IP ของผู้ใช้และ / หรือระบุตำแหน่งที่ดีขึ้น<a href="http://lbs.qq.com/tool/component-geolocation.html"> </a></p>
+
+<h2 id="ดูสิ่งนี้ด้วย">ดูสิ่งนี้ด้วย</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Geolocation_API/Using_the_Geolocation_API">ใช้ Geolocation API</a></li>
+ <li><a href="https://www.w3.org/TR/geolocation-API/" rel="external">API ตำแหน่งทางภูมิศาสตร์บน w3.org</a></li>
+ <li><a href="https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/">ใครรู้ตำแหน่งของฉัน</a> (บล็อก Hacks)</li>
+</ul>
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
+---
+<div>{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}</div>
+
+<p>Geolocation API ใช้เพื่อเรียกคืนตำแหน่งของผู้ใช้เพื่อให้สามารถใช้เพื่อแสดงตำแหน่งโดยใช้ API การแมป บทความนี้อธิบายพื้นฐานของวิธีใช้</p>
+
+<h2 id="วัตถุตำแหน่งทางภูมิศาสตร์">วัตถุตำแหน่งทางภูมิศาสตร์</h2>
+
+<p><a href="/en-US/docs/Web/API/Geolocation">Geolocation API</a>สามารถใช้ได้ผ่านทาง {{domxref("navigator.geolocation")}} วัตถุ</p>
+
+<p>หากวัตถุมีอยู่บริการระบุตำแหน่งทางภูมิศาสตร์จะพร้อมใช้งาน คุณสามารถทดสอบการมีตำแหน่งทางภูมิศาสตร์ได้ดังนี้:</p>
+
+<pre class="brush: js notranslate">if('geolocation' in navigator) {
+  /* geolocation is available */
+} else {
+  /* geolocation IS NOT available */
+}
+</pre>
+
+<h3 id="รับตำแหน่งปัจจุบัน">รับตำแหน่งปัจจุบัน</h3>
+
+<p>ในการรับตำแหน่งปัจจุบันของผู้ใช้คุณสามารถเรียกใช้วิธี {{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}} สิ่งนี้จะเริ่มต้นคำขอแบบอะซิงโครนัสเพื่อตรวจหาตำแหน่งของผู้ใช้และสอบถามฮาร์ดแวร์การจัดตำแหน่งเพื่อรับข้อมูลที่ทันสมัย เมื่อกำหนดตำแหน่งแล้วฟังก์ชันการเรียกกลับที่กำหนดไว้จะถูกดำเนินการ คุณสามารถเลือกที่จะให้ฟังก์ชั่นการติดต่อกลับที่สองที่จะดำเนินการหากเกิดข้อผิดพลาด พารามิเตอร์ตัวที่สามเป็นตัวเลือกคือวัตถุตัวเลือกที่คุณสามารถตั้งค่าอายุสูงสุดของตำแหน่งที่ส่งคืนเวลารอคำขอและถ้าคุณต้องการความแม่นยำสูงสำหรับตำแหน่ง</p>
+
+<div class="note">
+<p><strong>หมายเหตุ:</strong>โดยค่าเริ่มต้น  {{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}} พยายามตอบเร็วที่สุดเท่าที่จะทำได้ด้วยความแม่นยำต่ำ มันจะมีประโยชน์ถ้าคุณต้องการคำตอบอย่างรวดเร็วโดยไม่คำนึงถึงความถูกต้อง อุปกรณ์ที่มีจีพีเอส, ตัวอย่างเช่นสามารถใช้เวลาเป็นนาทีหรือมากกว่าที่จะได้รับสัญญาณ GPS, ข้อมูลเพื่อความแม่นยำน้อย (ที่ตั้งของทรัพย์สินทางปัญญาหรือ WiFi) <code>getCurrentPosition()</code>อาจจะกลับไป</p>
+</div>
+
+<pre class="brush: js notranslate">navigator.geolocation.getCurrentPosition((position) =&gt; {
+  doSomething(position.coords.latitude, position.coords.longitude);
+});</pre>
+
+<p>ตัวอย่างด้านบนจะทำให้<code>doSomething()</code>ฟังก์ชันทำงานเมื่อได้รับตำแหน่ง</p>
+
+<h3 id="ดูตำแหน่งปัจจุบัน">ดูตำแหน่งปัจจุบัน</h3>
+
+<p>หากข้อมูลตำแหน่งเปลี่ยนแปลง (โดยการเคลื่อนไหวของอุปกรณ์หรือข้อมูลทางภูมิศาสตร์ที่แม่นยำกว่ามาถึง) คุณสามารถตั้งค่าฟังก์ชั่นการโทรกลับที่ถูกเรียกพร้อมกับข้อมูลตำแหน่งที่อัปเดตนั้น สิ่งนี้ทำได้โดยใช้ฟังก์ชัน {{domxref("Geolocation.watchPosition","watchPosition()")}} ซึ่งมีพารามิเตอร์อินพุตเหมือนกับ {{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}}. ฟังก์ชั่นการโทรกลับถูกเรียกหลายครั้งทำให้เบราว์เซอร์สามารถอัปเดตตำแหน่งของคุณในขณะที่คุณย้ายหรือให้ตำแหน่งที่แม่นยำยิ่งขึ้นเนื่องจากใช้เทคนิคต่าง ๆ ในการระบุตำแหน่งของคุณ ฟังก์ชั่นการเรียกกลับข้อผิดพลาดซึ่งเป็นตัวเลือกเช่นเดียวกับมัน<code>getCurrentPosition()</code>สามารถเรียกซ้ำ</p>
+
+<div class="note">
+<p><strong>Note:</strong> You can use {{domxref("Geolocation.watchPosition","watchPosition()")}} without an initial {{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}} call.</p>
+</div>
+
+<pre class="brush: js notranslate">const watchID = navigator.geolocation.watchPosition((position) =&gt; {
+  doSomething(position.coords.latitude, position.coords.longitude);
+});</pre>
+
+<p>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.</p>
+
+<pre class="brush: js notranslate">navigator.geolocation.clearWatch(watchID);
+</pre>
+
+<h3 id="Fine_tuning_the_response">Fine tuning the response</h3>
+
+<p>Both {{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}} and {{domxref("Geolocation.watchPosition","watchPosition()")}} accept a success callback, an optional error callback, and an optional {{domxref("PositionOptions")}} object.</p>
+
+<p>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.</p>
+
+<p>A call to {{domxref("Geolocation.watchPosition","watchPosition")}} could look like:</p>
+
+<pre class="brush: js notranslate">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);</pre>
+
+<h2 id="Describing_a_position">Describing a position</h2>
+
+<p>The user's location is described using a {{domxref("GeolocationPosition")}} object instance, which itself contains a {{domxref("GeolocationCoordinates")}} object instance.</p>
+
+<p>The <code>GeolocationPosition</code> instance contains only two things, a <code>coords</code> property that contains the <code>GeolocationCoordinates</code> instance, and a <code>timestamp</code> property that contains a {{domxref("DOMTimeStamp")}} instance representing the time at which the position data was retrieved.</p>
+
+<p>The <code>GeolocationCoordinates</code> instance contains a number of properties, but the two you'll use most commonly are <code>latitude</code> and <code>longitude</code>, which are what you need to draw your position on a map. Hence many Geolocation success callbacks look fairly simple:</p>
+
+<pre class="brush: js notranslate">function success(position) {
+  const latitude  = position.coords.latitude;
+  const longitude = position.coords.longitude;
+
+  // Do something with your latitude and longitude
+}</pre>
+
+<p>You can however get a number of other bits of information from a <code>GeolocationCoordinates</code> object, including altitude, speed, what direction the device is facing, and an accuracy measure of the altitude, longitude, and latitude data.</p>
+
+<h2 id="Handling_errors">Handling errors</h2>
+
+<p>The error callback function, if provided when calling <code>getCurrentPosition()</code> or <code>watchPosition()</code>, expects a <code><a href="/en-US/docs/Web/API/GeolocationPositionError">GeolocationPositionError</a></code> object instance as its first parameter. This object type contains two properties, a <code>code</code> indicating what type of error has been returned, and a human-readable <code>message</code> that describes what the error code means.</p>
+
+<p>You could use it like so:</p>
+
+<pre class="brush: js notranslate">function errorCallback(error) {
+  alert(`ERROR(${error.code}): ${error.message}`);
+};
+</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>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 <code>openstreetmap.org</code> URL that will show their location.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  padding: 20px;
+  background-color:#ffffc9
+}
+
+button {
+  margin: .5rem 0;
+}
+</pre>
+</div>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html; notranslate">&lt;button id = "find-me"&gt;Show my location&lt;/button&gt;&lt;br/&gt;
+&lt;p id = "status"&gt;&lt;/p&gt;
+&lt;a id = "map-link" target="_blank"&gt;&lt;/a&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">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);
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Examples', 350, 150)}}</p>
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
+---
+<p><font><font>DOM {{domxref ("window")}} ให้การเข้าถึงประวัติของเบราเซอร์ผ่าน {{domxref ("window.history", "history")}} วัตถุ </font><font>ช่วยให้คุณสามารถเคลื่อนย้ายไปมาได้ตลอดเวลาผ่านประวัติผู้ใช้เช่นเดียวกับ - โดยเริ่มจาก HTML5 - จัดการกับเนื้อหาของสแต็คประวัติ</font></font></p>
+
+<h2 id="การเดินทางผ่านประวัติศาสตร์"><font><font>การเดินทางผ่านประวัติศาสตร์</font></font></h2>
+
+<p><font><font>ย้ายไปข้างหน้าและย้อนกลับผ่านทางประวัติศาสตร์ของผู้ใช้จะกระทำโดยใช้</font></font><code>back()</code><font><font>, </font></font><code>forward()</code><font><font>และ</font></font><code>go()</code><font><font> วิธีการ</font></font></p>
+
+<h3 id="ก้าวไปข้างหน้าและข้างหลัง"><font><font>ก้าวไปข้างหน้าและข้างหลัง</font></font></h3>
+
+<p><font><font>หากต้องการย้อนกลับไปในอดีตเพียงแค่ทำ:</font></font></p>
+
+<pre class="brush: js"><font><font>window.history.back ();
+</font></font></pre>
+
+<p><font><font>วิธีนี้จะทำหน้าที่เหมือนกับผู้ใช้คลิกที่ปุ่มย้อนกลับในแถบเครื่องมือของเบราว์เซอร์</font></font></p>
+
+<p><font><font>ในทำนองเดียวกันคุณสามารถก้าวไปข้างหน้า (เหมือนกับว่าผู้ใช้คลิกปุ่มไปข้างหน้า) เช่นนี้:</font></font></p>
+
+<pre class="brush: js"><font><font>window.history.forward ();
+</font></font></pre>
+
+<h3 id="การย้ายไปยังจุดที่เฉพาะเจาะจงในประวัติศาสตร์"><font><font>การย้ายไปยังจุดที่เฉพาะเจาะจงในประวัติศาสตร์</font></font></h3>
+
+<p><font><font>คุณสามารถใช้</font></font><code>go()</code><font><font> วิธีการโหลดหน้าเว็บเฉพาะจากประวัติเซสชันซึ่งระบุโดยตำแหน่งสัมพัทธ์ไปยังหน้าปัจจุบัน (โดยที่หน้าปัจจุบันเป็นดัชนีสัมพัทธ์ 0)</font></font></p>
+
+<p><font><font>หากต้องการย้ายกลับหนึ่งหน้า (เทียบเท่ากับการโทร</font></font><code>back()</code><font><font>):</font></font></p>
+
+<pre class="brush: js"><font><font>window.history.go (-1);
+</font></font></pre>
+
+<p><font><font>เพื่อเลื่อนหน้าเว็บเช่นเดียวกับการโทร</font></font><code>forward()</code><font><font>:</font></font></p>
+
+<pre class="brush: js"><font><font>window.history.go (1);
+</font></font></pre>
+
+<p><font><font>ในทำนองเดียวกันคุณสามารถย้ายหน้า 2 หน้าโดยการส่งผ่าน 2 เป็นต้น</font></font></p>
+
+<p><font><font>คุณสามารถกำหนดจำนวนหน้าในสแต็คประวัติโดยการดูที่ค่าของคุณสมบัติ length:</font></font></p>
+
+<pre class="brush: js"><font><font>var numberOfEntries = window.history.length;
+</font></font></pre>
+
+<div class="note"><strong><font><font>หมายเหตุ:</font></font></strong><font><font> Internet Explorer สนับสนุนการส่ง URL สตริงเป็นพารามิเตอร์ไปยัง</font></font><code>go()</code><font><font>; </font><font>นี้ไม่ได้มาตรฐานและไม่ได้รับการสนับสนุนโดยตุ๊กแก</font></font></div>
+
+<h2 id="การเพิ่มและแก้ไขรายการประวัติ"><font><font>การเพิ่มและแก้ไขรายการประวัติ</font></font></h2>
+
+<p><font><font>{{gecko_minversion_header ("2")}}</font></font></p>
+
+<p><font><font>HTML5 นำเสนอ</font><font>เมธอด</font></font><a href="/en-US/docs/Web/API/History/pushState"><font><font>history.pushState ()</font></font></a><font><font>และ</font></font><a href="/en-US/docs/Web/API/History_API#The_replaceState()_method"><font><font>history.replaceState ()</font></font></a><font><font>ซึ่งช่วยให้คุณสามารถเพิ่มและแก้ไขรายการประวัติตามลำดับได้ </font><font>วิธีการเหล่านี้ทำงานร่วมกับเหตุการณ์ {{domxref ("window.onpopstate")}}</font></font></p>
+
+<p><font><font>การใช้</font></font><code>history.pushState()</code><font><font> การเปลี่ยนแปลง referrer ที่ใช้ในส่วนหัว HTTP สำหรับ</font></font><a href="/en/DOM/XMLHttpRequest" title="en / XMLHttpRequest"><code>XMLHttpRequest</code></a><font><font>อ็อบเจ็กต์ที่สร้างขึ้นหลังจากเปลี่ยนสถานะ </font><font>ผู้อ้างอิงจะเป็น URL ของเอกสารที่มีหน้าต่างอยู่</font></font><code>this</code><font><font>ในขณะที่สร้าง</font></font><a href="/en/DOM/XMLHttpRequest" title="en / XMLHttpRequest"><code>XMLHttpRequest</code></a><font><font>วัตถุ</font></font></p>
+
+<h3 id="ตัวอย่างของวิธีการ_pushState_()"><font><font>ตัวอย่างของวิธีการ pushState ()</font></font></h3>
+
+<p><font><font>สมมติว่า</font></font><span class="nowiki"><font><font>http://mozilla.org/foo.html</font></font></span><font><font>ใช้ JavaScript ต่อไปนี้:</font></font></p>
+
+<pre class="brush: js"><font><font>var stateObj = {foo: "bar"};</font></font><font><font>
+history.pushState (stateObj, "page 2", "bar.html");</font></font>
+</pre>
+
+<p><font><font>ซึ่งจะทำให้แถบ URL แสดง</font></font><span class="nowiki"><font><font>http://mozilla.org/bar.html</font></font></span><font><font>แต่จะไม่ทำให้เบราว์เซอร์โหลด</font></font><code>bar.html</code><font><font>หรือตรวจสอบว่า</font></font><code>bar.html</code><font><font>มีอยู่</font></font></p>
+
+<p><font><font>สมมติว่าตอนนี้ผู้ใช้ไปที่</font></font><span class="nowiki"><font><font>http://google.com</font></font></span><font><font>แล้วคลิกปุ่มย้อนกลับ </font><font>ณ จุดนี้แถบ URL จะแสดง</font></font><span class="nowiki"><font><font>http://mozilla.org/bar.html</font></font></span><font><font>และ</font></font><s><font><font>หน้าจะได้รับจะไม่ได้รับการ</font></font><code>popstate</code><font><font>จัดกิจกรรมที่มี</font></font><em><font><font>สถานะของวัตถุ</font></font></em><font><font>มีสำเนาของ</font></font><code>stateObj</code></s><font><font>  ถ้าคุณอ่าน</font><font>คุณจะได้รับ</font></font><code>history.state</code><font><font> </font><font> เหตุการณ์จะไม่ถูกเรียกใช้เนื่องจากโหลดหน้าเว็บใหม่แล้ว </font><font>หน้าเว็บจะมีลักษณะเหมือน</font><font>กัน</font></font><code>stateObj</code><code>popstate</code><code>bar.html</code></p>
+
+<p><font><font>ถ้าเราคลิกย้อนกลับอีกครั้ง URL จะเปลี่ยนเป็น</font></font><span class="nowiki"><font><font>http://mozilla.org/foo.html</font></font></span><font><font>และเอกสารจะได้รับ  </font></font><code>popstate</code><font><font>เหตุการณ์พร้อมกับอ็อบเจ็กต์สถานะว่าง </font><font>ที่นี่อีกเช่นกันการย้อนกลับไม่ได้เปลี่ยนเนื้อหาของเอกสารจากสิ่งที่พวกเขาอยู่ในขั้นตอนก่อนหน้าแม้ว่าเอกสารอาจอัปเดตเนื้อหาด้วยตนเองเมื่อได้รับ</font></font><code>popstate</code><font><font>กิจกรรม</font></font></p>
+
+<h3 id="วิธีการ_pushState_()"><font><font>วิธีการ pushState ()</font></font></h3>
+
+<p><code>pushState()</code><font><font>ใช้พารามิเตอร์สามตัว ได้แก่ อ็อบเจ็กต์สถานะชื่อ (ซึ่งปัจจุบันถูกละเว้น) และ (ไม่บังคับ) URL </font><font>ลองดูแต่ละพารามิเตอร์ทั้งสามแบบนี้โดยละเอียด:</font></font></p>
+
+<ul>
+ <li>
+  <p><strong><font><font>วัตถุรัฐ</font></font></strong><font><font> - วัตถุรัฐเป็นวัตถุ JavaScript </font></font><code>pushState()</code><font><font>ซึ่งมีความเกี่ยวข้องกับประวัติศาสตร์รายการใหม่ที่สร้างขึ้นโดย </font><font>เมื่อใดก็ตามที่ผู้ใช้นำทางไปยังรัฐใหม่เป็น</font></font><code>popstate</code><font><font>เหตุการณ์ถูกยิงและ</font></font><code>state</code><font><font>ทรัพย์สินของเหตุการณ์ประกอบด้วยสำเนาของวัตถุรัฐประวัติศาสตร์ของรายการที่</font></font></p>
+
+  <p><font><font>อ็อบเจ็กต์สถานะสามารถเป็นอะไรก็ได้ที่สามารถต่อเนื่องได้ </font><font>เนื่องจาก Firefox จะบันทึกอ็อบเจ็กต์ของรัฐลงในดิสก์ของผู้ใช้เพื่อให้สามารถเรียกคืนได้หลังจากที่ผู้ใช้เริ่มต้นเบราว์เซอร์ใหม่เราจะกำหนดขีด จำกัด ขนาดของอักขระ 640 กิโลวัตต์ในการแสดงสถานะเป็นอนุกรมของอ็อบเจ็กต์สถานะ </font><font>ถ้าคุณส่งต่ออ็อบเจ็กต์สถานะที่มีการแทนเป็นอนุกรมมีขนาดใหญ่กว่านี้</font></font><code>pushState()</code><font><font>เมธอดจะโยนข้อยกเว้น </font><font>หากคุณต้องการพื้นที่มากขึ้นกว่านี้คุณจะได้รับการสนับสนุนให้ใช้</font><font>และ</font></font><code>sessionStorage</code><font><font> / หรือ</font></font><code>localStorage</code></p>
+ </li>
+ <li>
+  <p><strong><font><font>title</font></font></strong><font><font> - ขณะนี้ Firefox ละเว้นพารามิเตอร์นี้แม้ว่าจะใช้งานได้ในอนาคตก็ตาม </font><font>การผ่านสตริงที่ว่างเปล่าควรมีความปลอดภัยในการเปลี่ยนแปลงวิธีการในอนาคต </font><font>หรือคุณสามารถส่งชื่อสั้น ๆ ให้กับรัฐที่คุณกำลังย้ายได้</font></font></p>
+ </li>
+ <li>
+  <p><strong><font><font>URL</font></font></strong><font><font> - </font><strong><font>URL</font></strong><font>ของรายการประวัติการเข้าใหม่จะถูกกำหนดโดยพารามิเตอร์นี้ </font><font>โปรดทราบว่าเบราเซอร์จะไม่พยายามโหลด URL นี้หลังจากที่โทรเข้า</font></font><code>pushState()</code><font><font>มา แต่อาจพยายามโหลด URL ในภายหลังเช่นหลังจากที่ผู้ใช้รีสตาร์ทเบราเซอร์ </font><font>URL ใหม่ไม่จำเป็นต้องเป็นแบบสัมบูรณ์ </font><font>ถ้าเป็นญาติก็จะแก้ไขได้เมื่อเทียบกับ URL ปัจจุบัน </font><font>URL ใหม่ต้องมีต้นกำเนิดเดียวกันกับ URL ปัจจุบัน </font><font>มิฉะนั้น</font></font><code>pushState()</code><font><font>จะโยนข้อยกเว้น </font><font>พารามิเตอร์นี้เป็นทางเลือก; </font><font>หากไม่ได้ระบุไว้ URL จะถูกกำหนดเป็น URL ปัจจุบันของเอกสาร</font></font></p>
+ </li>
+</ul>
+
+<div class="note"><strong><font><font>หมายเหตุ:</font></font></strong><font><font>ใน Gecko 2.0 {{geckoRelease ("2.0")}} ผ่าน Gecko 5.0 {{geckoRelease ("5.0")}} วัตถุที่ส่งผ่านจะได้รับการจัดอันดับโดยใช้ JSON </font><font>เริ่มต้นในตุ๊กแก 6.0 {{geckoRelease ( "6.0")}} วัตถุที่ถูกต่อเนื่องโดยใช้</font><font>อัลกอริทึมโคลนโครงสร้าง</font></font><a href="/en/DOM/The_structured_clone_algorithm" title="en / DOM / อัลกอริทึมโคลนที่มีโครงสร้าง"><font><font> </font></font></a><font><font>นี้จะช่วยให้ความหลากหลายของวัตถุที่จะผ่านได้อย่างปลอดภัย</font></font></div>
+
+<p><font><font>ในแง่การโทร</font></font><code>pushState()</code><font><font>จะคล้ายกับการตั้งค่า</font></font><code>window.location = "#foo"</code><font><font>ทั้งสองจะสร้างและเปิดใช้งานรายการบันทึกประวัติอื่นที่เชื่อมโยงกับเอกสารปัจจุบัน </font><font>แต่</font></font><code>pushState()</code><font><font>มีประโยชน์น้อย:</font></font></p>
+
+<ul>
+ <li><font><font>URL ใหม่อาจเป็น URL ที่มีต้นกำเนิดเดียวกันกับ URL ปัจจุบัน </font><font>ในทางตรงกันข้ามการตั้งค่า</font></font><code>window.location</code><font><font>ช่วยให้คุณสามารถใช้ {{domxref ("document") {} เดียวกันได้เฉพาะเมื่อคุณแก้ไขเฉพาะแฮช</font></font></li>
+ <li><font><font>คุณไม่จำเป็นต้องเปลี่ยน URL หากไม่ต้องการ </font><font>ในทางตรงกันข้ามการตั้งค่า</font><font>จะสร้างประวัติศาสตร์เข้าใหม่เท่านั้นถ้ากัญชาปัจจุบันไม่ได้</font></font><code>window.location = "#foo";</code><code>#foo</code></li>
+ <li><font><font>คุณสามารถเชื่อมโยงข้อมูลโดยพลการกับรายการประวัติการเข้าชมใหม่ของคุณได้ </font><font>ด้วยวิธีแฮชที่ใช้คุณจำเป็นต้องเข้ารหัสข้อมูลที่เกี่ยวข้องทั้งหมดลงในสตริงที่สั้น</font></font></li>
+ <li><font><font>หาก</font></font><code>title </code><font><font>เบราว์เซอร์ใช้ภายหลังเบราเซอร์ข้อมูลนี้สามารถใช้งานได้ (ไม่ขึ้นอยู่กับการกล่าวคือแฮช)</font></font></li>
+</ul>
+
+<p><font><font>โปรดทราบว่าไม่ได้</font></font><code>pushState()</code><font><font>ทำให้เกิด</font></font><code>hashchange</code><font><font>เหตุการณ์ที่จะถูกเรียกใช้แม้ว่า URL ใหม่จะแตกต่างจาก URL เดิมในแฮชก็ตาม</font></font></p>
+
+<p><font><font>ใน</font><font>เอกสาร</font></font><a href="/en-US/docs/Mozilla/Tech/XUL"><font><font>XUL</font></font></a><font><font>จะสร้างองค์ประกอบ XUL ที่ระบุไว้</font></font></p>
+
+<p><font><font>ในเอกสารอื่น ๆ จะสร้างองค์ประกอบด้วย</font></font><code>null</code><font><font>URI namespace</font></font></p>
+
+<h3 id="วิธี_replaceState_()"><font><font>วิธี replaceState ()</font></font></h3>
+
+<p><code>history.replaceState()</code><font><font>ดำเนินการเหมือนกับที่</font></font><code>history.pushState()</code><font><font>ยกเว้นการ</font></font><code>replaceState()</code><font><font>แก้ไขรายการประวัติปัจจุบันแทนการสร้างใหม่ </font><font>โปรดทราบว่าสิ่งนี้ไม่ได้ป้องกันไม่ให้มีการสร้างรายการใหม่ในประวัติเบราเซอร์ทั่วโลก</font></font></p>
+
+<p><code>replaceState()</code><font><font> มีประโยชน์อย่างยิ่งเมื่อคุณต้องการอัปเดตอ็อบเจ็กต์สถานะหรือ URL ของรายการประวัติปัจจุบันเพื่อตอบสนองการดำเนินการบางอย่างของผู้ใช้</font></font></p>
+
+<div class="note"><strong><font><font>หมายเหตุ:</font></font></strong><font><font>ใน Gecko 2.0 {{geckoRelease ("2.0")}} ผ่าน Gecko 5.0 {{geckoRelease ("5.0")}} วัตถุที่ส่งผ่านจะได้รับการจัดอันดับโดยใช้ JSON </font><font>เริ่มต้นในตุ๊กแก 6.0 {{geckoRelease ( "6.0")}} วัตถุที่ถูกต่อเนื่องโดยใช้</font><font>อัลกอริทึมโคลนโครงสร้าง</font></font><a href="/en/DOM/The_structured_clone_algorithm" title="en / DOM / อัลกอริทึมโคลนที่มีโครงสร้าง"><font><font> </font></font></a><font><font>นี้จะช่วยให้ความหลากหลายของวัตถุที่จะผ่านได้อย่างปลอดภัย</font></font></div>
+
+<h3 id="ตัวอย่างวิธี_replaceState_()"><font><font>ตัวอย่างวิธี replaceState ()</font></font></h3>
+
+<p><font><font>สมมติว่า</font></font><span class="nowiki"><font><font>http://mozilla.org/foo.html</font></font></span><font><font>ใช้ JavaScript ต่อไปนี้:</font></font></p>
+
+<pre class="brush: js"><font><font>var stateObj = {foo: "bar"};</font></font><font><font>
+history.pushState (stateObj, "page 2", "bar.html");</font></font>
+</pre>
+
+<p><font><font>คำอธิบายของสองบรรทัดข้างต้นสามารถดูได้ที่ "ตัวอย่างของวิธีการ pushState ()" </font><font>จากนั้นสมมติว่า</font></font><span class="nowiki"><font><font>http://mozilla.org/bar.html</font></font></span><font><font>เรียกใช้ JavaScript ต่อไปนี้:</font></font></p>
+
+<pre class="brush: js"><font><font>history.replaceState (stateObj, "page 3", "bar2.html");
+</font></font></pre>
+
+<p><font><font>ซึ่งจะทำให้แถบ URL แสดง</font></font><span class="nowiki"><font><font>http://mozilla.org/bar2.html</font></font></span><font><font>แต่จะไม่ทำให้เบราว์เซอร์โหลด</font></font><code>bar2.html</code><font><font>หรือแม้แต่การตรวจสอบว่า</font></font><code>bar2.html</code><font><font>มีอยู่</font></font></p>
+
+<p><font><font>สมมติว่าตอนนี้ผู้ใช้ไปที่</font></font><span class="nowiki"><font><font>http://www.microsoft.com</font></font></span><font><font>แล้วคลิกปุ่มย้อนกลับ </font><font>ณ จุดนี้แถบ URL จะแสดง</font></font><span class="nowiki"><font><font>http://mozilla.org/bar2.html </font><font>หากผู้ใช้คลิกกลับมาอีกครั้งแถบ URL จะแสดง http://mozilla.org/foo.html และข้ามผ่าน bar.html ทั้งหมด</font></font></span></p>
+
+<h3 id="เหตุการณ์_popstate"><font><font>เหตุการณ์ popstate</font></font></h3>
+
+<p><code>popstate</code><font><font>เหตุการณ์ที่ถูกส่งไปที่หน้าต่างทุกครั้งที่มีการเปลี่ยนแปลงรายการประวัติใช้งาน </font><font>ถ้ารายการประวัติศาสตร์ที่มีการเปิดใช้งานถูกสร้างขึ้นโดยการเรียก</font></font><code>pushState</code><font><font>หรือรับผลกระทบจากการโทรไป</font></font><code>replaceState</code><font><font>ที่</font></font><code>popstate</code><font><font>เหตุการณ์</font></font><code>state</code><font><font>สถานที่ให้บริการประกอบด้วยสำเนาของวัตถุรัฐประวัติศาสตร์ของรายการที่</font></font></p>
+
+<p><font><font>ดู {{domxref ("window.onpopstate")}} สำหรับการใช้ตัวอย่าง</font></font></p>
+
+<h3 id="อ่านสถานะปัจจุบัน"><font><font>อ่านสถานะปัจจุบัน</font></font></h3>
+
+<p><font><font>เมื่อโหลดหน้าเว็บของคุณอาจมีอ็อบเจ็กต์สถานะที่ไม่ใช่ค่าว่าง </font><font>กรณีเช่นนี้อาจเกิดขึ้นได้เช่นถ้าเพจกำหนดอ็อบเจ็กต์สถานะ (ใช้</font></font><code>pushState()</code><font><font>หรือ</font></font><code>replaceState()</code><font><font>) จากนั้นผู้ใช้จะเริ่มต้นเบราว์เซอร์ใหม่ </font><font>เมื่อหน้าเว็บโหลด</font><span style="font-family: helvetica;"><span style="font-family: courier new;"><font>ซ้ำ</font></span></span><font>หน้าเว็บจะได้รับ</font><span style="font-family: helvetica;"><font>เหตุการณ์</font></span></font><span style="font-family: courier new;"><font><font>onload </font></font></span><span style="font-family: helvetica;"><font><font>แต่ไม่มี</font><font>เหตุการณ์ที่ปรากฏ </font></font></span><font><font>  แต่ถ้าคุณอ่าน</font></font><span style="font-family: courier new;"><font><font>history.state</font></font></span><font><font>คุณสมบัติที่คุณจะได้รับกลับมาวัตถุรัฐที่คุณจะได้รับถ้า</font></font><span style="font-family: courier new;"><font><font>popstate</font></font></span><font><font>ยิง</font></font></p>
+
+<p><font><font>คุณสามารถอ่านสถานะของรายการประวัติปัจจุบันได้โดยไม่ต้องรอ</font></font><code>popstate</code><font><font>เหตุการณ์โดยใช้</font></font><code>history.state</code><font><font>คุณสมบัติเช่นนี้:</font></font></p>
+
+<pre class="brush: js"><font><font>var currentState = history.state;
+</font></font></pre>
+
+<h2 id="ตัวอย่าง"><font><font>ตัวอย่าง</font></font></h2>
+
+<p><font><font>สำหรับตัวอย่างที่สมบูรณ์ของเว็บไซต์ AJAX, โปรดดูที่: </font><font>ตัวอย่างการนำทางอาแจ็กซ์</font></font></p>
+
+<h2 id="ข้อมูลจำเพาะ"><font><font>ข้อมูลจำเพาะ</font></font></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><font><font>สเปค</font></font></th>
+   <th scope="col"><font><font>สถานะ</font></font></th>
+   <th scope="col"><font><font>คิดเห็น</font></font></th>
+  </tr>
+  <tr>
+   <td><font><font>{{SpecName ('HTML WHATWG', "browsers.html # history", "History")}}</font></font></td>
+   <td><font><font>{{Spec2 ('HTML WHATWG')}}</font></font></td>
+   <td><font><font>ไม่มีการเปลี่ยนแปลงจาก {{SpecName ("HTML5 W3C")}}</font></font></td>
+  </tr>
+  <tr>
+   <td><font><font>{{SpecName ('HTML5 W3C', "browsers.html # history", "History")}}</font></font></td>
+   <td><font><font>{{Spec2 ('HTML5 W3C')}}</font></font></td>
+   <td><font><font>ความหมายเบื้องต้น</font></font></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ความเข้ากันได้ของเบราเซอร์"><font><font>ความเข้ากันได้ของเบราเซอร์</font></font></h2>
+
+<p><font><font>{{CompatibilityTable ()}}</font></font></p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><font><font>ลักษณะ</font></font></th>
+   <th><font><font>โครเมียม</font></font></th>
+   <th><font><font>ขอบ</font></font></th>
+   <th><font><font>Firefox (ตุ๊กแก)</font></font></th>
+   <th><font><font>Internet Explorer</font></font></th>
+   <th><font><font>อุปรากร</font></font></th>
+   <th><font><font>การแข่งรถวิบาก</font></font></th>
+  </tr>
+  <tr>
+   <td><font><font>replaceState, pushState</font></font></td>
+   <td><font><font>5</font></font></td>
+   <td><font><font>{{CompatVersionUnknown}}</font></font></td>
+   <td><font><font>{{CompatGeckoDesktop ("2.0")}}</font></font></td>
+   <td><font><font>10</font></font></td>
+   <td><font><font>11.50</font></font></td>
+   <td><font><font>5.0</font></font></td>
+  </tr>
+  <tr>
+   <td><font><font>history.state</font></font></td>
+   <td><font><font>18</font></font></td>
+   <td><font><font>{{CompatVersionUnknown}}</font></font></td>
+   <td><font><font>{{CompatGeckoDesktop ("2.0")}}</font></font></td>
+   <td><font><font>10</font></font></td>
+   <td><font><font>11.50</font></font></td>
+   <td><font><font>6.0</font></font></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><font><font>ลักษณะ</font></font></th>
+   <th><font><font>Android</font></font></th>
+   <th><font><font>ขอบ</font></font></th>
+   <th><font><font>Firefox Mobile (ตุ๊กแก)</font></font></th>
+   <th><font><font>IE Mobile</font></font></th>
+   <th><font><font>Opera Mobile</font></font></th>
+   <th><font><font>Safari มือถือ</font></font></th>
+  </tr>
+  <tr>
+   <td><font><font>replaceState, pushState</font></font></td>
+   <td><font><font>{{CompatUnknown ()}}</font></font></td>
+   <td><font><font>{{CompatVersionUnknown}}</font></font></td>
+   <td><font><font>{{CompatUnknown ()}}</font></font></td>
+   <td><font><font>{{CompatUnknown ()}}</font></font></td>
+   <td><font><font>{{CompatUnknown ()}}</font></font></td>
+   <td><font><font>{{CompatUnknown ()}}</font></font></td>
+  </tr>
+  <tr>
+   <td><font><font>history.state</font></font></td>
+   <td><font><font>{{CompatUnknown ()}}</font></font></td>
+   <td><font><font>{{CompatVersionUnknown}}</font></font></td>
+   <td><font><font>{{CompatUnknown ()}}</font></font></td>
+   <td><font><font>{{CompatUnknown ()}}</font></font></td>
+   <td><font><font>{{CompatUnknown ()}}</font></font></td>
+   <td><font><font>{{CompatUnknown ()}}</font></font></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><strong style="font-size: 2.143rem; font-weight: 700; letter-spacing: -1px; line-height: 1;"><font><font>ดูสิ่งนี้ด้วย</font></font></strong></p>
+
+<ul>
+ <li><font><font>{{domxref ("window.history")}}</font></font></li>
+ <li><font><font>{{domxref ("window.onpopstate")}}</font></font></li>
+</ul>
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
+---
+<p>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.</p>
+
+<div>{{APIListAlpha}}</div>
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
+---
+<div><font><font>{{DefaultAPISidebar ( "IndexedDB")}}</font></font></div>
+
+<p><font><font>IndexedDB เป็น API ระดับต่ำสำหรับการจัดเก็บข้อมูลจำนวนมากของโครงสร้างข้อมูลรวมถึงไฟล์ / blobs </font><font>API นี้ใช้ดัชนีเพื่อให้สามารถค้นหาข้อมูลนี้ได้อย่างมีประสิทธิภาพสูง </font><em><u><strong><font>แม้ว่าที่</font></strong></u></em></font><a href="/en-US/docs/Web/API/Web_Storage_API"><font><font>เก็บข้อมูลเว็บ</font></font></a><font><font>จะเป็นประโยชน์สำหรับการจัดเก็บข้อมูลจำนวนน้อย แต่จะไม่ค่อยมีประโยชน์ในการจัดเก็บข้อมูลที่มีโครงสร้างจำนวนมาก </font><font>IndexedDB มีวิธีแก้ปัญหา </font><font>นี่คือหน้า Landing Page หลักสำหรับความครอบคลุม IndexedDB ของ MDN - ที่นี่เรามีลิงก์ไปยังคู่มืออ้างอิงและคู่มือการใช้งาน API แบบเต็มรูปแบบรายละเอียดการสนับสนุนเบราเซอร์และคำอธิบายเกี่ยวกับแนวคิดหลัก ๆ</font></font></p>
+
+<p><font><font>{{AvailableInWorkers}}</font></font></p>
+
+<div class="note">
+<p><strong><font><font>หมายเหตุ</font></font></strong><font><font> : IndexedDB API มีประสิทธิภาพ แต่อาจดูเหมือนซับซ้อนเกินไปสำหรับกรณีง่ายๆ </font><font>ถ้าคุณต้องการ API แบบธรรมดาลองใช้ไลบรารีเช่น  </font></font><a href="https://localforage.github.io/localForage/"><font><font>localForage</font></font></a><font><font> , </font></font><a href="http://www.dexie.org/"><font><font>dexie.js</font></font></a><font><font> , </font></font><a href="https://github.com/erikolson186/zangodb"><font><font>ZangoDB </font></font></a><font><font><font>และ</font></font></font><font><a href="http://jsstore.net/"><font>JsStore</font></a><font>ที่ทำให้ IndexedDB เป็นโปรแกรมเมอร์ที่เป็นมิตรมากขึ้น</font></font><a href="https://github.com/erikolson186/zangodb"><font> </font></a></p>
+</div>
+
+<h2 id="แนวคิดหลักและการใช้งาน"><font><font>แนวคิดหลักและการใช้งาน</font></font></h2>
+
+<p><font><font>IndexedDB เป็นระบบฐานข้อมูลการทำธุรกรรมเช่น RDBMS แบบ SQL </font><font>แต่แตกต่างจาก RDBMSes ที่ใช้ SQL ซึ่งใช้ตารางคอลัมน์ถาวร IndexedDB เป็นฐานข้อมูลเชิงวัตถุที่ใช้ JavaScript </font><font>IndexedDB ช่วยให้คุณสามารถจัดเก็บและดึงวัตถุที่มีการสร้างดัชนีด้วย</font></font><strong><font><font>ที่สำคัญ</font></font></strong><font><font> ; </font><font>วัตถุใด ๆ ที่สนับสนุนโดย</font></font><a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm"><font><font>อัลกอริทึมโคลนที่มีโครงสร้าง</font></font></a><font><font>สามารถจัดเก็บได้ </font><font>คุณต้องระบุคีมาฐานข้อมูลเปิดการเชื่อมต่อกับฐานข้อมูลของคุณและจากนั้นดึงข้อมูลและปรับปรุงข้อมูลภายในชุดของ</font><font>การทำธุรกรรม</font></font></p>
+
+<ul>
+ <li><font><font>อ่านเพิ่มเติมเกี่ยวกับ</font></font><a href="/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB"><font><font>แนวคิดที่อยู่เบื้องหลัง </font></font></a><font><font>IndexedDB</font></font></li>
+ <li><font><font>เรียนรู้การใช้ IndexedDB แบบอะซิงโครนัสจากหลักการแรกด้วย</font><font>คู่มือ</font></font><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB"><font><font>การใช้ IndexedDB</font></font></a><font><font>ของเรา</font></font></li>
+ <li><font><font>ดูคำแนะนำสำหรับนักพัฒนาซอฟต์แวร์ที่ทำให้แอปพลิเคชันเว็บทำงานแบบออฟไลน์ได้ที่</font><font>หน้า</font><font>แอปแบบ</font></font><a href="/en-US/Apps/Build/Offline"><font><font>ออฟไลน์</font></font></a></li>
+</ul>
+
+<div class="note">
+<p><strong><font><font>หมายเหตุ</font></font></strong><font><font> : เช่นเดียวกับโซลูชันการจัดเก็บข้อมูลเว็บส่วนใหญ่ IndexedDB จะ</font></font><a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy"><font><font>ใช้นโยบายแหล่งกำเนิด</font></font></a><font><font>เดียวกัน </font><font>ดังนั้นในขณะที่คุณสามารถเข้าถึงข้อมูลที่เก็บไว้ภายในโดเมนคุณจะไม่สามารถเข้าถึงข้อมูลในโดเมนต่างๆได้</font></font></p>
+</div>
+
+<h3 id="Synchronous_และ_Asynchronous"><font><font>Synchronous และ Asynchronous</font></font></h3>
+
+<p><font><font>การดำเนินงานที่ดำเนินการโดยใช้ IndexedDB ทำแบบอะซิงโครนัสเพื่อไม่ให้บล็อกแอพพลิเคชัน </font><font>IndexedDB เดิมรวม</font><font> APIs </font></font><span style="background-color: #f5f6f5;"><font><font>แบบซิงโครนัส</font></font></span><font><font>และ  </font><span style="background-color: #f5f6f5;"><font>แบบอะซิงโครนัส </font></span><font>API ซิงโครนัสมีไว้สำหรับใช้กับ</font></font><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers"><font><font>Web Workers</font></font></a><font><font>เท่านั้น แต่ถูกนำออกจาก spec เนื่องจากไม่ชัดเจนว่าจำเป็นหรือไม่ </font><font>อย่างไรก็ตาม  </font></font><span style="background-color: #f5f6f5;"><font><font> API แบบซิงโครนัส</font></font></span><font><font>  อาจได้รับคำแนะนำใหม่หากมีความต้องการเพียงพอจากนักพัฒนาเว็บ</font></font></p>
+
+<h3 id="ข้อ_จำกัด_ในการจัดเก็บและเกณฑ์การขับไล่"><font><font>ข้อ จำกัด ในการจัดเก็บและเกณฑ์การขับไล่</font></font></h3>
+
+<p><font><font>มีเทคโนโลยีเว็บจำนวนหนึ่งที่เก็บข้อมูลประเภทเดียวกันหรือแบบอื่นทางฝั่งไคลเอ็นต์ (เช่นบนดิสก์ภายในเครื่อง) </font><font>IndexedDB เป็นเรื่องที่พูดถึงกันมากที่สุด </font><font>กระบวนการที่เบราว์เซอร์ทำงานได้ว่าจะจัดสรรพื้นที่ในการจัดเก็บข้อมูลเว็บมากน้อยเพียงใดและจะลบอะไรเมื่อถึงขีด จำกัด นั้นไม่ง่ายและแตกต่างกันระหว่างเบราว์เซอร์ </font></font><a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria"><font><font>ขีด จำกัด ของพื้นที่เก็บข้อมูลเบราเซอร์และเกณฑ์การขับไล่</font></font></a><font><font>พยายามอธิบายวิธีการทำงานนี้อย่างน้อยที่สุดในกรณีของ Firefox</font></font></p>
+
+<h2 id="อินเตอร์เฟซ"><font><font>อินเตอร์เฟซ</font></font></h2>
+
+<p><font><font>เมื่อต้องการเข้าถึงฐานข้อมูลให้เรียก</font></font><a href="/en-US/docs/Web/API/IDBFactory.open"><code>open()</code></a><font><font>ใช้</font></font><a href="/en-US/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a><font><font>แอ็ตทริบิวต์ของ</font><font>ออบเจ็กต์</font></font><a href="/en-US/docs/DOM/window"><font><font>หน้าต่าง </font></font></a><font><font>เมธอดนี้ส่งกลับค่า {{domxref ("IDBRequest")}} object; </font><font>การดำเนินการแบบอะซิงโครนัสจะสื่อสารกับแอพพลิเคชันการเรียกโดยการยิงเหตุการณ์บน {{domxref ("IDBRequest")}} วัตถุ</font></font></p>
+
+<h3 id="กำลังเชื่อมต่อกับฐานข้อมูล"><font><font>กำลังเชื่อมต่อกับฐานข้อมูล</font></font></h3>
+
+<dl>
+ <dt><font><font>{{domxref ( "IDBEnvironment")}}</font></font></dt>
+ <dd><font><font>ให้การเข้าถึงฟังก์ชันการทำงาน IndexedDB </font><font>มีการใช้งานโดย {{domxref ("window")}} และวัตถุ {{domxref ("worker")}} </font><font>อินเทอร์เฟซนี้ไม่ใช่ส่วนหนึ่งของข้อกำหนด 2.0</font></font></dd>
+ <dt><font><font>{{domxref ( "IDBFactory")}}</font></font></dt>
+ <dd><font><font>ให้การเข้าถึงฐานข้อมูล </font><font>นี่คืออินเทอร์เฟซที่ใช้งานโดยอ็อบเจ็กต์ทั่วโลก</font></font><a href="/en-US/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a><font><font>และเป็นจุดเริ่มต้นของ API</font></font></dd>
+ <dt><font><font>{{domxref ( "IDBOpenDBRequest")}}</font></font></dt>
+ <dd><font><font>หมายถึงคำขอให้เปิดฐานข้อมูล</font></font></dd>
+ <dt><font><font>{{domxref ( "IDBDatabase")}}</font></font></dt>
+ <dd><font><font>หมายถึงการเชื่อมต่อกับฐานข้อมูล </font><font>เป็นวิธีเดียวที่จะได้รับธุรกรรมในฐานข้อมูล</font></font></dd>
+ <dt><font><font>กำลังเรียกและแก้ไขข้อมูล</font></font></dt>
+</dl>
+
+<dl>
+ <dt><font><font>{{domxref ( "IDBTransaction")}}</font></font></dt>
+ <dd><font><font>หมายถึงธุรกรรม </font><font>คุณสร้างธุรกรรมในฐานข้อมูลระบุขอบเขต (เช่นที่เก็บออบเจ็กต์ที่คุณต้องการเข้าถึง) และกำหนดชนิดของการเข้าถึง (อ่านอย่างเดียวหรือเขียน readwrite) ที่คุณต้องการ</font></font></dd>
+ <dt><font><font>{{domxref ( "IDBRequest")}}</font></font></dt>
+ <dd><font><font>อินเทอร์เฟซทั่วไปที่จัดการคำขอฐานข้อมูลและให้การเข้าถึงผลการค้นหา</font></font></dd>
+ <dt><font><font>{{domxref ( "IDBObjectStore")}}</font></font></dt>
+ <dd><font><font>หมายถึงเก็บออบเจ็กต์ที่อนุญาตให้เข้าถึงชุดข้อมูลในฐานข้อมูล IndexedDB โดยค้นหาคีย์หลัก</font></font></dd>
+ <dt><font><font>{{domxref ( "IDBIndex")}}</font></font></dt>
+ <dd><font><font>นอกจากนี้ยังช่วยให้สามารถเข้าถึงชุดย่อยของข้อมูลในฐานข้อมูล IndexedDB ได้ แต่ใช้ดัชนีเพื่อดึงข้อมูลระเบียนแทนที่จะเป็นคีย์หลัก </font><font>บางครั้งก็เร็วกว่าการใช้ {{domxref ("IDBObjectStore")}}</font></font></dd>
+ <dt><font><font>{{domxref ( "IDBCursor")}}</font></font></dt>
+ <dd><font><font>Iterates มากกว่าเก็บวัตถุและดัชนี</font></font></dd>
+ <dt><font><font>{{domxref ( "IDBCursorWithValue")}}</font></font></dt>
+ <dd><font><font>Iterates มากกว่าเก็บวัตถุและดัชนีและส่งกลับค่าปัจจุบันของเคอร์เซอร์</font></font></dd>
+ <dt><font><font>{{domxref ( "IDBKeyRange")}}</font></font></dt>
+ <dd><font><font>กำหนดช่วงสำคัญที่สามารถใช้เพื่อดึงข้อมูลจากฐานข้อมูลในช่วงที่กำหนด</font></font></dd>
+ <dt><font><font>{{domxref ("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}</font></font></dt>
+ <dd><font><font>กำหนดช่วงที่สำคัญที่สามารถนำมาใช้เพื่อดึงข้อมูลจากฐานข้อมูลในช่วงที่กำหนดซึ่งจัดเรียงตามกฎของโลแคลที่ระบุสำหรับดัชนีที่ระบุ (โปรดดูที่</font></font><a href="/en-US/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code><font><font>พารามิเตอร์ที่ไม่บังคับ</font></font></a><font><font> ) </font><font>อินเทอร์เฟซนี้ไม่ใช่ส่วนหนึ่งของข้อกำหนด 2.0</font></font></dd>
+</dl>
+
+<h3 id="อินเทอร์เฟซเหตุการณ์ที่กำหนดเอง"><font><font>อินเทอร์เฟซเหตุการณ์ที่กำหนดเอง</font></font></h3>
+
+<p><font><font>ข้อกำหนดนี้จะเริ่มต้นกิจกรรมด้วยอินเทอร์เฟซที่กำหนดเองต่อไปนี้:</font></font></p>
+
+<dl>
+ <dt><font><font>{{domxref ( "IDBVersionChangeEvent")}}</font></font></dt>
+ <dd><code>IDBVersionChangeEvent</code><font><font>อินเตอร์เฟซแสดงให้เห็นว่ารุ่นของฐานข้อมูลที่มีการเปลี่ยนแปลงเป็นผลมาจากการ {{domxref ( "IDBOpenDBRequest.onupgradeneeded")}} ฟังก์ชั่นจัดการเหตุการณ์</font></font></dd>
+</dl>
+
+<h3 id="อินเตอร์เฟซล้าสมัย"><font><font>อินเตอร์เฟซล้าสมัย</font></font></h3>
+
+<p><font><font>เวอร์ชันก่อนหน้าของข้อกำหนดยังกำหนดการเชื่อมต่อที่ลบออกไปแล้วในขณะนี้ </font><font>เอกสารเหล่านี้จะได้รับการจัดทำเป็นเอกสารไว้ในกรณีที่คุณจำเป็นต้องอัพเดตโค้ดที่เขียนไว้ก่อนหน้านี้:</font></font></p>
+
+<dl>
+ <dt><font><font>{{domxref ("IDBVersionChangeRequest")}} {{obsolete_inline}}</font></font></dt>
+ <dd><font><font>หมายถึงคำขอให้เปลี่ยนเวอร์ชันของฐานข้อมูล </font><font>วิธีเปลี่ยนเวอร์ชันของฐานข้อมูลได้เปลี่ยนไปแล้ว (โดยเรียก {{domxref ("IDBFactory.open")}} โดยไม่ต้องเรียก {{domxref ("IDBDatabase.setVersion")}}) และอินเทอร์เฟซ {{domxref ("IDBOpenDBRequest")}} มีฟังก์ชันการทำงานของ {{domxref ("IDBVersionChangeRequest")}} ที่ถูกลบ</font></font></dd>
+ <dt><font><font>{{domxref ("IDBDatabaseException")}} {{obsolete_inline}}</font></font></dt>
+ <dd><font><font>หมายถึงสภาวะข้อยกเว้นที่สามารถพบได้ในขณะดำเนินการฐานข้อมูล</font></font></dd>
+ <dt><font><font>{{domxref ("IDBTransactionSync")}} {{obsolete_inline}}</font></font></dt>
+ <dd><font><font>ซิงค์เวอร์ชันของ {{domxref ("IDBTransaction")}}</font></font></dd>
+ <dt><font><font>{{domxref ("IDBObjectStoreSync")}} {{obsolete_inline}}</font></font></dt>
+ <dd><font><font>ซิงค์เวอร์ชันของ {{domxref ("IDBObjectStore")}}</font></font></dd>
+ <dt><font><font>{{domxref ("IDBIndexSync")}} {{obsolete_inline}}</font></font></dt>
+ <dd><font><font>ซิงค์เวอร์ชันของ {{domxref ("IDBIndex")}}</font></font></dd>
+ <dt><font><font>{{domxref ("IDBFactorySync")}} {{obsolete_inline}}</font></font></dt>
+ <dd><font><font>ซิงค์เวอร์ชันของ {{domxref ("IDBFactory")}}</font></font></dd>
+ <dt><font><font>{{domxref ("IDBEnvironmentSync")}} {{obsolete_inline}}</font></font></dt>
+ <dd><font><font>ซิงค์เวอร์ชันของ {{domxref ("IDBEnvironment")}}</font></font></dd>
+ <dt><font><font>{{domxref ("IDBDatabaseSync")}} {{obsolete_inline}}</font></font></dt>
+ <dd><font><font>ซิงค์เวอร์ชัน {{domxref ("IDBDatabase")}}</font></font></dd>
+ <dt><font><font>{{domxref ("IDBCursorSync")}} {{obsolete_inline}}</font></font></dt>
+ <dd><font><font>ซิงค์เวอร์ชันของ {{domxref ("IDBCursor")}}</font></font></dd>
+</dl>
+
+<h2 id="ตัวอย่าง"><font><font>ตัวอย่าง</font></font></h2>
+
+<ul>
+ <li><a class="external" href="http://marco-c.github.io/eLibri/"><font><font>eLibri:</font></font></a><font><font>ห้องสมุดที่มีประสิทธิภาพและโปรแกรมอ่าน eBook ซึ่งเขียนโดย Marco Castelluccio ผู้ชนะ IndexedDB Mozilla DevDerby</font></font></li>
+ <li><a class="external" href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages"><font><font>การแจ้งเตือนสิ่งที่ต้องทำ</font></font></a><font><font> ( </font></font><a class="external" href="http://mdn.github.io/to-do-notifications/"><font><font>ดูตัวอย่างสด</font></font></a><font><font> ): แอ็พพลิเคชันอ้างอิงสำหรับตัวอย่างในเอกสารอ้างอิง</font></font></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/"><font><font>จัดเก็บภาพและไฟล์ใน IndexedDB</font></font></a></li>
+</ul>
+
+<h2 id="ข้อมูลจำเพาะ"><font><font>ข้อมูลจำเพาะ</font></font></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><font><font>สเปค</font></font></th>
+   <th scope="col"><font><font>สถานะ</font></font></th>
+   <th scope="col"><font><font>คิดเห็น</font></font></th>
+  </tr>
+  <tr>
+   <td><font><font>{{SpecName ( 'IndexedDB')}}</font></font></td>
+   <td><font><font>{{Spec2 ( 'IndexedDB')}}</font></font></td>
+   <td><font><font>ความหมายเบื้องต้น</font></font></td>
+  </tr>
+  <tr>
+   <td><font><font>{{SpecName ("IndexedDB 2")}}</font></font></td>
+   <td><font><font>{{Spec2 ("IndexedDB 2")}}</font></font></td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ความเข้ากันได้ของเบราเซอร์"><font><font>ความเข้ากันได้ของเบราเซอร์</font></font></h2>
+
+<p><font><font>{{CompatibilityTable}}</font></font></p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><font><font>ลักษณะ</font></font></th>
+   <th><font><font>โครเมียม</font></font></th>
+   <th><font><font>ขอบ</font></font></th>
+   <th><font><font>Firefox (ตุ๊กแก)</font></font></th>
+   <th><font><font>Internet Explorer</font></font></th>
+   <th><font><font>อุปรากร</font></font></th>
+   <th><font><font>Safari (WebKit)</font></font></th>
+  </tr>
+  <tr>
+   <td><font><font>การสนับสนุนขั้นพื้นฐาน</font></font></td>
+   <td><font><font>{{CompatChrome (23)}} {{property_prefix ("webkit")}} </font></font><br>
+    <font><font>{{CompatChrome (24)}} (ไม่เป็นที่รู้จัก) </font></font><br>
+    <font><font>{{CompatChrome (38)}} (คำนำหน้าเลิกใช้แล้ว) </font></font><br>
+    <font><font>{{CompatChrome (57)}} ( คำนำหน้านำออก)</font></font></td>
+   <td><font><font>{{CompatVersionUnknown}}</font></font></td>
+   <td><font><font>{{CompatGeckoDesktop ("10.0")}} {{property_prefix ("moz")}} </font></font><br>
+    <font><font>{{CompatGeckoDesktop ("16.0")}}</font></font></td>
+   <td><font><font>10</font></font></td>
+   <td><font><font>15</font></font></td>
+   <td>
+    <p><font><font>7.1 ส่วนที่</font></font><br>
+     <font><font>10</font></font></p>
+   </td>
+  </tr>
+  <tr>
+   <td><font><font>มีอยู่ในคนงาน</font></font></td>
+   <td><font><font>{{CompatVersionUnknown}} (ไม่เป็นตัวเป็นตน) </font></font><br>
+    <font><font>{{CompatChrome (38)}} (คำนำหน้าเลิกใช้แล้ว) </font></font><br>
+    <font><font>{{CompatChrome (57)}} (นำหน้านำหน้าออก)</font></font></td>
+   <td><font><font>{{CompatVersionUnknown}}</font></font></td>
+   <td><font><font>{{CompatGeckoDesktop ("37.0")}} </font></font><sup><font><font>[1]</font></font></sup></td>
+   <td><font><font>{{CompatVersionUnknown}}</font></font></td>
+   <td><font><font>{{CompatVersionUnknown}}</font></font></td>
+   <td><font><font>10</font></font></td>
+  </tr>
+  <tr>
+   <td><font><font>ใช้ได้ในโหมดความเป็นส่วนตัว</font></font><sup><font><font>[3]</font></font></sup></td>
+   <td><font><font>{{CompatVersionUnknown}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+  </tr>
+  <tr>
+   <td><code>IDBLocaleAwareKeyRange</code></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatGeckoDesktop ("43.0")}} </font></font><sup><font><font>[2]</font></font></sup></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+  </tr>
+  <tr>
+   <td><font><font>ฐานข้อมูลที่ทำดัชนี 2.0</font></font></td>
+   <td><font><font>{{CompatChrome (58)}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatOpera (45)}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><font><font>ลักษณะ</font></font></th>
+   <th><font><font>Android Webview</font></font></th>
+   <th><font><font>Chrome สำหรับแอนดรอยด์</font></font></th>
+   <th><font><font>ขอบ</font></font></th>
+   <th><font><font>Firefox Mobile (ตุ๊กแก)</font></font></th>
+   <th><font><font>Firefox OS</font></font></th>
+   <th><font><font>โทรศัพท์ IE / Edge</font></font></th>
+   <th><font><font>Opera Mobile</font></font></th>
+   <th><font><font>Safari มือถือ</font></font></th>
+  </tr>
+  <tr>
+   <td><font><font>การสนับสนุนขั้นพื้นฐาน</font></font></td>
+   <td><font><font>{{CompatVersionUnknown}} (ไม่เป็นตัวเป็นตน) </font></font><br>
+    <font><font>{{CompatChrome (38)}} (คำนำหน้าเลิกใช้แล้ว) </font></font><br>
+    <font><font>{{CompatChrome (57)}} (นำหน้านำหน้าออก)</font></font></td>
+   <td><font><font>{{CompatVersionUnknown}} (ไม่เป็นตัวเป็นตน) </font></font><br>
+    <font><font>{{CompatChrome (38)}} (คำนำหน้าเลิกใช้แล้ว) </font></font><br>
+    <font><font>{{CompatChrome (57)}} (นำหน้านำหน้าออก)</font></font></td>
+   <td><font><font>{{CompatVersionUnknown}}</font></font></td>
+   <td><font><font>{{CompatGeckoMobile ( "22.0")}}</font></font></td>
+   <td><font><font>1.0.1</font></font></td>
+   <td><font><font>10</font></font></td>
+   <td><font><font>{{CompatOpera (22)}}</font></font></td>
+   <td><font><font>8 บางส่วน</font></font><br>
+    <font><font>10</font></font></td>
+  </tr>
+  <tr>
+   <td><font><font>มีอยู่ในคนงาน</font></font></td>
+   <td><font><font>{{CompatVersionUnknown}} (ไม่เป็นตัวเป็นตน) </font></font><br>
+    <font><font>{{CompatChrome (38)}} (คำนำหน้าเลิกใช้แล้ว) </font></font><br>
+    <font><font>{{CompatChrome (57)}} (นำหน้านำหน้าออก)</font></font></td>
+   <td><font><font>{{CompatVersionUnknown}} (ไม่เป็นตัวเป็นตน) </font></font><br>
+    <font><font>{{CompatChrome (38)}} (คำนำหน้าเลิกใช้แล้ว) </font></font><br>
+    <font><font>{{CompatChrome (57)}} (นำหน้านำหน้าออก)</font></font></td>
+   <td><font><font>{{CompatVersionUnknown}}</font></font></td>
+   <td><font><font>{{CompatGeckoMobile ("37.0")}} </font></font><sup><font><font>[1]</font></font></sup></td>
+   <td><font><font>{{CompatVersionUnknown}}</font></font></td>
+   <td><font><font>{{CompatVersionUnknown}}</font></font></td>
+   <td><font><font>{{CompatVersionUnknown}}</font></font></td>
+   <td><font><font>10</font></font></td>
+  </tr>
+  <tr>
+   <td><font><font>ใช้ได้ในโหมดความเป็นส่วนตัว</font></font><sup><font><font>[3]</font></font></sup></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+  </tr>
+  <tr>
+   <td><code>IDBLocaleAwareKeyRange</code></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatGeckoMobile ("43.0")}} </font></font><sup><font><font>[2]</font></font></sup></td>
+   <td><font><font>2.5 </font></font><sup><font><font>[2]</font></font></sup></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+  </tr>
+  <tr>
+   <td><font><font>ฐานข้อมูลที่ทำดัชนี 2.0</font></font></td>
+   <td><font><font>{{CompatChrome (58)}}</font></font></td>
+   <td><font><font>{{CompatChrome (58)}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatOpera (45)}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li><font><font>[1] {{domxref ("IDBCursorWithValue")}} ไม่สามารถใช้งานได้จนกว่า Gecko 42.0 {{geckoRelease ("42.0")}}</font></font></li>
+ <li><font><font>[2] คุณลักษณะนี้ซ่อนอยู่หลังธงเพื่อเปิดใช้งานและทดสอบไปที่ about: config และเปิดใช้งาน dom.indexedDB.experimental</font></font></li>
+ <li><font><font>[3] อาคา "โหมดการดูส่วนตัว" (Firefox) และ "ไม่ระบุตัวตน" (Chrome)</font></font></li>
+</ul>
+
+<h2 id="ดูสิ่งนี้ด้วย"><font><font>ดูสิ่งนี้ด้วย</font></font></h2>
+
+<ul>
+ <li><a class="external" href="https://github.com/localForage/localForage"><font><font>localForage</font></font></a><font><font> : Polyfill ให้ชื่อแบบง่าย: ไวยากรณ์ค่าสำหรับการจัดเก็บข้อมูลฝั่งไคลเอ็นต์ซึ่งใช้ IndexedDB ในเบื้องหลัง แต่จะกลับไปใช้ WebSQL และจากนั้นจัดเก็บในเครื่องในเบราว์เซอร์ที่ไม่สนับสนุน IndexedDB</font></font></li>
+ <li><a class="external" href="http://www.dexie.org/"><font><font>dexie.js</font></font></a><font><font> : wrapper สำหรับ IndexedDB ที่ช่วยให้สามารถพัฒนาโค้ดได้เร็วขึ้นโดยใช้ไวยากรณ์ที่ดีและเรียบง่าย</font></font></li>
+ <li><a href="https://github.com/erikolson186/zangodb"><font><font>ZangoDB</font></font></a><font><font> : อินเทอร์เฟซสำหรับ MongoDB สำหรับ IndexedDB ที่สนับสนุนการกรอง, การฉาย, การเรียงลำดับ, การอัพเดทและการรวมตัวของ MongoDB ที่คุ้นเคย</font></font></li>
+ <li><a href="http://jsstore.net/"><font><font>JsStore </font></font></a><span style='background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: medium; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;'><font><font>: เสื้อคลุม IndexedDB มีไวยากรณ์ SQL เหมือน</font></font></span></li>
+</ul>
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
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>The <strong><code>Location</code></strong> 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 <code>Location</code>, accessible via {{domxref("Document.location")}} and {{domxref("Window.location")}} respectively.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The <code>Location</code></em><em> interface doesn't inherit any property, but implements those from {{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Location.href")}}</dt>
+ <dd>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.</dd>
+ <dt>{{domxref("Location.protocol")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the protocol scheme of the URL, including the final <code>':'</code>.</dd>
+ <dt>{{domxref("Location.host")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the host, that is the <em>hostname</em>, a <code>':'</code>, and the <em>port</em> of the URL.</dd>
+ <dt>{{domxref("Location.hostname")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the domain of the URL.</dd>
+ <dt>{{domxref("Location.port")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the port number of the URL.</dd>
+ <dt>{{domxref("Location.pathname")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing an initial <code>'/'</code> followed by the path of the URL.</dd>
+ <dt>{{domxref("Location.search")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing a <code>'?'</code> followed by the parameters or "querystring" of the URL. Modern browsers provide <a href="/en-US/docs/Web/API/URLSearchParams/get#Example">URLSearchParams</a> and <a href="/en-US/docs/Web/API/URL/searchParams#Example">URL.searchParams</a> to make it easy to parse out the parameters from the querystring.</dd>
+
+ <dt>{{domxref("Location.hash")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing a <code>'#'</code> followed by the fragment identifier of the URL.</dd>
+ <dt>{{domxref("Location.username")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the username specified before the domain name.</dd>
+ <dt>{{domxref("Location.password")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the password specified before the domain name.</dd>
+ <dt>{{domxref("Location.origin")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the canonical form of the origin of the specific location.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The <code>Location</code></em><em> interface doesn't inherit any method<em>, but implements those from {{domxref("URLUtils")}}</em>.</em></p>
+
+<dl>
+ <dt>{{domxref("Location.assign()")}}</dt>
+ <dd>Loads the resource at the URL provided in parameter.</dd>
+ <dt>{{domxref("Location.reload()")}}</dt>
+ <dd>Reloads the resource from the current URL. Its optional unique parameter is a {{domxref("Boolean")}}, which, when it is <code>true</code>, causes the page to always be reloaded from the server. If it is <code>false</code> or not specified, the browser may reload the page from its cache.</dd>
+ <dt>{{domxref("Location.replace()")}}</dt>
+ <dd>Replaces the current resource with the one at the provided URL. The difference from the <code>assign()</code> method is that after using <code>replace()</code> the current page will not be saved in session {{domxref("History")}}, meaning the user won't be able to use the <em>back</em> button to navigate to it.</dd>
+ <dt>{{domxref("Location.toString()")}}</dt>
+ <dd>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.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">// 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
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "browsers.html#the-location-interface", "Location")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Location")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> on <code>Windows.location</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("21")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> on all <code>location</code> objects (but on Workers, that use {{domxref("WorkerLocation")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>username</code> and <code>password</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> on <code>Windows.location</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("21")}}</td>
+   <td>11</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> on all <code>location</code> objects (but on Workers, that use {{domxref("WorkerLocation")}})</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("26")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>username</code> and <code>password</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("26")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Two methods creating such an object: {{domxref("Window.location")}} and {{domxref("Document.location")}}.</li>
+ <li>URL related interfaces: {{domxref("URL")}}, {{domxref("URLSearchParams")}} and {{domxref("HTMLHyperlinkElementUtils")}}</li>
+</ul>
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
+---
+<p>{{DefaultAPISidebar("เซิร์ฟเวอร์ส่งเหตุการณ์")}}</p>
+
+<p>ตามเนื้อผ้าหน้าเว็บต้องส่งคำขอไปยังเซิร์ฟเวอร์เพื่อรับข้อมูลใหม่ นั่นคือหน้าร้องขอข้อมูลจากเซิร์ฟเวอร์ ด้วยเหตุการณ์ที่เซิร์ฟเวอร์ส่งเป็นไปได้ที่เซิร์ฟเวอร์จะส่งข้อมูลใหม่ไปยังหน้าเว็บได้ตลอดเวลาโดยการส่งข้อความไปยังหน้าเว็บ ข้อความขาเข้าเหล่านี้สามารถใช้เป็น<em>ข้อมูล</em><em><a href="/en-US/docs/DOM/event">กิจกรรม</a> +</em>ในหน้าเว็บ</p>
+
+<h2 id="แนวคิดและการใช้งาน">แนวคิดและการใช้งาน</h2>
+
+<p>เพื่อเรียนรู้วิธีการใช้เหตุการณ์เซิร์ฟเวอร์ส่งดูบทความของเราใช้เหตุการณ์เซิร์ฟเวอร์ส่ง</p>
+
+<h2 id="Interfaces" name="Interfaces">อินเตอร์เฟซ</h2>
+
+<dl>
+ <dt>{{domxref("EventSource")}}</dt>
+ <dd>กำหนดคุณสมบัติทั้งหมดที่จัดการการเชื่อมต่อกับเซิร์ฟเวอร์การรับเหตุการณ์ / ข้อมูลข้อผิดพลาดการปิดการเชื่อมต่อ ฯลฯ</dd>
+</dl>
+
+<h2 id="ตัวอย่าง">ตัวอย่าง</h2>
+
+<ul>
+ <li><a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo โดยใช้ PHP</a></li>
+</ul>
+
+<h2 id="สเปค">สเปค</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">สเปค</th>
+   <th scope="col">สถานะ</th>
+   <th scope="col">คิดเห็น</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName ('HTML WHATWG', '# server-sent-events', 'เหตุการณ์ที่เซิร์ฟเวอร์ส่ง')}}</td>
+   <td>{{Spec2 ('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">ดูสิ่งนี้ด้วย</h2>
+
+<h3 id="Tools" name="Tools">เครื่องมือ</h3>
+
+<ul>
+ <li><a href="https://github.com/EventSource/eventsource">EventSource polyfill สำหรับ Node.js</a></li>
+ <li>โพลีฟิลล์<a class="link-https" href="https://github.com/remy/polyfills/blob/master/EventSource.js">EventSource</a>ของชาร์ปของ Remy</li>
+ <li><a class="link-https" href="https://github.com/Yaffle/EventSource" title="https://github.com/Yaffle/EventSource">EventSource</a> Polyfill ของ Yaffle</li>
+ <li><a class="link-https" href="https://github.com/rwldrn/jquery.eventsource">ปลั๊กอิน jquery</a>ของ Rick Waldron</li>
+ <li>intercooler.js <a href="http://intercoolerjs.org/docs.html#sse">สนับสนุน SSE ที่เปิดเผย</a></li>
+</ul>
+
+<h3 id="Related_Topics" name="Related_Topics">หัวข้อที่เกี่ยวข้อง</h3>
+
+<ul>
+ <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a></li>
+ <li><a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></li>
+ <li><a href="/en-US/docs/WebSockets" title="WebSockets">WebSockets</a></li>
+</ul>
+
+<h3 id="แหล่งข้อมูลอื่น_ๆ">แหล่งข้อมูลอื่น ๆ</h3>
+
+<ul>
+ <li><a href="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/" title="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/">ทวิตเตอร์เช่นเดียวกับโปรแกรม</a>ที่ขับเคลื่อนโดยเหตุการณ์เซิร์ฟเวอร์ที่ส่งและ<a class="link-https" href="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends%20timeline" title="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends ไทม์ไลน์">รหัสบน </a>Github</li>
+ <li><a href="http://dsheiko.com/weblog/html5-and-server-sent-events" title="http://dsheiko.com/weblog/html5-and-server-sent-events">เหตุการณ์ HTML5 และเซิร์ฟเวอร์ที่ส่ง</a></li>
+ <li><a href="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html" title="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html">เหตุการณ์ที่เซิร์ฟเวอร์ส่งโดยใช้ Asp.Net</a></li>
+</ul>
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
+---
+<div><font><font>{{WebGLSidebar}}</font></font></div>
+
+<div class="summary">
+<p><span class="seoSummary"><font><font>WebGL (ห้องสมุดกราฟิกเว็บ) เป็น JavaScript API สำหรับการแสดงผลกราฟิก 3 มิติและ 2D แบบโต้ตอบที่มีประสิทธิภาพสูงภายในเว็บเบราว์เซอร์ที่รองรับโดยไม่ต้องใช้ปลั๊กอิน </font><font>WebGL ทำได้โดยการแนะนำ API ที่สอดคล้องกับ OpenGL ES 2.0 อย่างใกล้ชิดซึ่งสามารถใช้ในองค์ประกอบ HTML5 {{HTMLElement ("canvas")}} </font></font></span><font><font>ความสอดคล้องนี้ทำให้ API สามารถได้รับประโยชน์จากการเร่งความเร็วของกราฟิกฮาร์ดแวร์ที่อุปกรณ์ของผู้ใช้ใช้</font></font></p>
+</div>
+
+<p><font><font>รองรับ WebGL ใน</font></font><a href="/en-US/Firefox" title="Firefox 4 สำหรับนักพัฒนา"><font><font>Firefox</font></font></a><font><font> 4+, </font></font><a href="https://www.google.com/chrome/"><font><font>Google Chrome</font></font></a><font><font> 9+, </font></font><a href="https://www.opera.com/"><font><font>Opera</font></font></a><font><font> 12+, </font></font><a href="https://www.apple.com/safari/"><font><font>Safari</font></font></a><font><font> 5.1+, </font></font><a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie"><font><font>Internet Explorer</font></font></a><font><font> 11+ </font><font>และ</font></font><a href="https://www.microsoft.com/en-us/edge"><font><font>Microsoft Edge</font></font></a><font><font> build 10240+; </font><font>อย่างไรก็ตามอุปกรณ์ของผู้ใช้จะต้องมีฮาร์ดแวร์ที่รองรับคุณสมบัติเหล่านี้</font></font></p>
+
+<p><font><font>{{anch ("WebGL 2")}} API แนะนำการสนับสนุนชุดคุณลักษณะ OpenGL ES 3.0 เป็นส่วนใหญ่ </font><font>มีให้ผ่านทาง {{domxref ("WebGL2RenderingContext")}} ส่วนต่อประสาน</font></font></p>
+
+<p><font><font>องค์ประกอบ {{HTMLElement ("canvas")}} ยังถูกใช้โดย</font></font><a href="/en-US/docs/Web/API/Canvas_API"><font><font>Canvas API</font></font></a><font><font>เพื่อทำกราฟิก 2D บนหน้าเว็บ</font></font></p>
+
+<h2 id="การอ้างอิง"><font><font>การอ้างอิง</font></font></h2>
+
+<h3 id="อินเตอร์เฟสมาตรฐาน"><font><font>อินเตอร์เฟสมาตรฐาน</font></font></h3>
+
+<div class="index">
+<ul>
+ <li><font><font>{{domxref ( "WebGLRenderingContext")}}</font></font></li>
+ <li><font><font>{{domxref ( "WebGL2RenderingContext")}}</font></font></li>
+ <li><font><font>{{domxref ( "WebGLActiveInfo")}}</font></font></li>
+ <li><font><font>{{domxref ( "WebGLBuffer")}}</font></font></li>
+ <li><font><font>{{domxref ( "WebGLContextEvent")}}</font></font></li>
+ <li><font><font>{{domxref ( "WebGLFramebuffer")}}</font></font></li>
+ <li><font><font>{{domxref ( "WebGLProgram")}}</font></font></li>
+ <li><font><font>{{domxref ( "WebGLQuery")}}</font></font></li>
+ <li><font><font>{{domxref ( "WebGLRenderbuffer")}}</font></font></li>
+ <li><font><font>{{domxref ( "WebGLSampler")}}</font></font></li>
+ <li><font><font>{{domxref ( "WebGLShader")}}</font></font></li>
+ <li><font><font>{{domxref ( "WebGLShaderPrecisionFormat")}}</font></font></li>
+ <li><font><font>{{domxref ( "WebGLSync")}}</font></font></li>
+ <li><font><font>{{domxref ( "WebGLTexture")}}</font></font></li>
+ <li><font><font>{{domxref ( "WebGLTransformFeedback")}}</font></font></li>
+ <li><font><font>{{domxref ( "WebGLUniformLocation")}}</font></font></li>
+ <li><font><font>{{domxref ( "WebGLVertexArrayObject")}}</font></font></li>
+</ul>
+</div>
+
+<h3 id="ส่วนขยาย"><font><font>ส่วนขยาย</font></font></h3>
+
+<div class="index">
+<ul>
+ <li><font><font>{{domxref ( "ANGLE_instanced_arrays")}}</font></font></li>
+ <li><font><font>{{domxref ( "EXT_blend_minmax")}}</font></font></li>
+ <li><font><font>{{domxref ( "EXT_color_buffer_float")}}</font></font></li>
+ <li>{{domxref("EXT_color_buffer_half_float")}}</li>
+ <li>{{domxref("EXT_disjoint_timer_query")}}</li>
+ <li>{{domxref("EXT_float_blend")}} {{experimental_inline}}</li>
+ <li>{{domxref("EXT_frag_depth")}}</li>
+ <li>{{domxref("EXT_sRGB")}}</li>
+ <li>{{domxref("EXT_shader_texture_lod")}}</li>
+ <li>{{domxref("EXT_texture_compression_bptc")}}</li>
+ <li>{{domxref("EXT_texture_compression_rgtc")}}</li>
+ <li>{{domxref("EXT_texture_filter_anisotropic")}}</li>
+ <li>{{domxref("OES_element_index_uint")}}</li>
+ <li>{{domxref("OES_fbo_render_mipmap")}}</li>
+ <li>{{domxref("OES_standard_derivatives")}}</li>
+ <li>{{domxref("OES_texture_float")}}</li>
+ <li>{{domxref("OES_texture_float_linear")}}</li>
+ <li>{{domxref("OES_texture_half_float")}}</li>
+ <li>{{domxref("OES_texture_half_float_linear")}}</li>
+ <li>{{domxref("OES_vertex_array_object")}}</li>
+ <li>{{domxref("OVR_multiview2")}}</li>
+ <li>{{domxref("WEBGL_color_buffer_float")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_astc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_atc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_etc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_etc1")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_pvrtc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_s3tc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_s3tc_srgb")}}</li>
+ <li>{{domxref("WEBGL_debug_renderer_info")}}</li>
+ <li>{{domxref("WEBGL_debug_shaders")}}</li>
+ <li>{{domxref("WEBGL_depth_texture")}}</li>
+ <li>{{domxref("WEBGL_draw_buffers")}}</li>
+ <li>{{domxref("WEBGL_lose_context")}}</li>
+</ul>
+</div>
+
+<h3 id="Events">Events</h3>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/HTMLCanvasElement/webglcontextlost_event">webglcontextlost</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLCanvasElement/webglcontextrestored_event">webglcontextrestored</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLCanvasElement/webglcontextcreationerror_event">webglcontextcreationerror</a></code></li>
+</ul>
+
+<h3 id="Constants_and_types">Constants and types</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/Constants">WebGL constants</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/Types">WebGL types</a></li>
+</ul>
+
+<h3 id="WebGL_2">WebGL 2</h3>
+
+<p>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:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebGL2RenderingContext/texImage3D">3D textures</a>,</li>
+ <li><a href="/en-US/docs/Web/API/WebGLSampler">Sampler objects</a>,</li>
+ <li><a href="/en-US/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects">Uniform Buffer objects</a>,</li>
+ <li><a href="/en-US/docs/Web/API/WebGLSync">Sync objects</a>,</li>
+ <li><a href="/en-US/docs/Web/API/WebGLQuery">Query objects</a>,</li>
+ <li><a href="/en-US/docs/Web/API/WebGLTransformFeedback">Transform Feedback objects</a>,</li>
+ <li>Promoted extensions that are now core to WebGL 2: <a href="/en-US/docs/Web/API/WebGLVertexArrayObject">Vertex Array objects</a>, <a href="/en-US/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced">instancing</a>, <a href="/en-US/docs/Web/API/WebGL2RenderingContext/drawBuffers">multiple render targets</a>, <a href="/en-US/docs/Web/API/EXT_frag_depth">fragment depth</a>.</li>
+</ul>
+
+<p>See also the blog post <a href="https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/">"WebGL 2 lands in Firefox"</a> and <a href="http://webglsamples.org/WebGL2Samples/">webglsamples.org/WebGL2Samples</a> for a few demos.</p>
+
+<h2 id="Guides_and_tutorials">Guides and tutorials</h2>
+
+<p>Below, you'll find an assortment of guides to help you learn WebGL concepts and tutorials that offer step-by-step lessons and examples.</p>
+
+<h3 id="Guides">Guides</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Data">Data in WebGL</a></dt>
+ <dd>A guide to variables, buffers, and other types of data used when writing WebGL code.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/WebGL_best_practices">WebGL best practices</a></dt>
+ <dd>Tips and suggestions to help you improve the quality, performance, and reliability of your WebGL content.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">Using extensions</a></dt>
+ <dd>A guide to using WebGL extensions.</dd>
+</dl>
+
+<h3 id="Tutorials">Tutorials</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial">WebGL tutorial</a></dt>
+ <dd>A beginner's guide to WebGL core concepts. A good place to start if you don't have previous WebGL experience.</dd>
+</dl>
+
+<h3 id="Examples">Examples</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Basic_2D_animation_example">A basic 2D WebGL animation example</a></dt>
+ <dd>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.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/By_example">WebGL by example</a></dt>
+ <dd><font><font>ชุดตัวอย่างสดพร้อมคำอธิบายสั้น ๆ ที่แสดงแนวคิดและความสามารถของ WebGL </font><font>ตัวอย่างจะถูกจัดเรียงตามหัวข้อและระดับความยากซึ่งครอบคลุมบริบทการเรนเดอร์ WebGL, การโปรแกรม shader, พื้นผิว, เรขาคณิต, การโต้ตอบกับผู้ใช้และอื่น ๆ</font></font></dd>
+</dl>
+
+<h3 id="บทเรียนขั้นสูง"><font><font>บทเรียนขั้นสูง</font></font></h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection"><font><font>การฉายมุมมองโมเดล WebGL</font></font></a></dt>
+ <dd><font><font>คำอธิบายโดยละเอียดของเมทริกซ์หลักสามตัวที่โดยทั่วไปใช้เพื่อแสดงมุมมองวัตถุสามมิติ: แบบจำลองมุมมองและเมทริกซ์การฉายภาพ</font></font></dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web"><font><font>คณิตศาสตร์เมทริกซ์สำหรับเว็บ</font></font></a></dt>
+ <dd><font><font>คู่มือที่มีประโยชน์เกี่ยวกับการทำงานของเมทริกซ์การแปลง 3D และสามารถใช้บนเว็บได้ - ทั้งสำหรับการคำนวณ WebGL และในการแปลง CSS3</font></font></dd>
+</dl>
+
+<h2 id="ทรัพยากร"><font><font>ทรัพยากร</font></font></h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage"><font><font>Raw WebGL: คำแนะนำเกี่ยวกับ WebGL</font></font></a><font><font>คำ</font><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage"><font>บรรยาย</font></a><font>โดย Nick Desaulniers ที่แนะนำพื้นฐานของ WebGL </font><font>นี่เป็นจุดเริ่มต้นที่ดีหากคุณไม่เคยเขียนโปรแกรมกราฟิกระดับต่ำมาก่อน</font></font></li>
+ <li><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/"><font><font>เว็บไซต์ Khronos WebGL เว็บไซต์</font></font></a><font><font>หลักสำหรับ WebGL ที่ Khronos Group</font></font></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/"><font><font>WebGL Fundamentals</font></font></a><font><font>บทช่วยสอนพื้นฐานพร้อมพื้นฐานของ WebGL</font></font></li>
+ <li><a href="http://webglplayground.net" title="http://webglplayground.net"><font><font>สนามเด็กเล่น WebGL</font></font></a><font><font>เครื่องมือออนไลน์สำหรับการสร้างและแบ่งปันโครงการ WebGL </font><font>เหมาะสำหรับการสร้างต้นแบบอย่างรวดเร็วและการทดสอบ</font></font></li>
+ <li><a href="http://www.webglacademy.com" title="http://www.webglacademy.com"><font><font>WebGL Academy</font></font></a><font><font>เครื่องมือแก้ไข HTML / JavaScript พร้อมบทช่วยสอนเพื่อเรียนรู้พื้นฐานของการเขียนโปรแกรม webgl</font></font></li>
+ <li><a href="http://webglstats.com/"><font><font>สถิติ WebGL</font></font></a><font><font>เว็บไซต์ที่มีสถิติเกี่ยวกับความสามารถของ WebGL ในเบราว์เซอร์บนแพลตฟอร์มต่างๆ</font></font></li>
+</ul>
+
+<h3 id="ห้องสมุด"><font><font>ห้องสมุด</font></font></h3>
+
+<ul>
+ <li><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix"><font><font>glMatrix</font></font></a><font><font>เป็นเมทริกซ์ JavaScript และไลบรารีเวกเตอร์สำหรับแอป WebGL ประสิทธิภาพสูง</font></font></li>
+ <li><a href="http://senchalabs.github.com/philogl/"><font><font>PhiloGL</font></font></a><font><font>เป็นเฟรมเวิร์ก WebGL สำหรับการสร้างภาพข้อมูลการสร้างโค้ดและการพัฒนาเกม</font></font></li>
+ <li><a href="http://www.pixijs.com/"><font><font>Pixi.js</font></font></a><font><font>เป็นตัวเรนเดอร์ WebGL 2D แบบโอเพนซอร์สที่รวดเร็วและรวดเร็ว</font></font></li>
+ <li><a href="https://playcanvas.com/"><font><font>PlayCanvas</font></font></a><font><font>เป็น</font><font>นเกมโอเพนซอร์ซ</font></font></li>
+ <li><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/"><font><font>Sylvester</font></font></a><font><font>เป็นห้องสมุดโอเพนซอร์ซสำหรับจัดการเวกเตอร์และเมทริกซ์ </font><font>ไม่ได้รับการปรับให้เหมาะสมกับ WebGL แต่มีความแข็งแกร่งมาก</font></font></li>
+ <li><a href="https://threejs.org/"><font><font>three.js</font></font></a><font><font>เป็นไลบรารี 3D WebGL แบบโอเพนซอร์สที่มีคุณลักษณะครบถ้วน</font></font></li>
+ <li><a href="https://phaser.io/"><font><font>Phaser</font></font></a><font><font>เป็นเฟรมเวิร์กโอเพนซอร์สที่รวดเร็วและสนุกสำหรับเกมเบราว์เซอร์ที่ขับเคลื่อนด้วย Canvas และ WebGL</font></font></li>
+ <li><a href="https://github.com/redcamel/RedGL2"><font><font>RedGL</font></font></a><font><font>  เป็นไลบรารี 3D WebGL แบบโอเพ่นซอร์ส</font></font></li>
+ <li><a href="https://kitware.github.io/vtk-js/"><font><font>vtk.js</font></font></a><font><font>  เป็นห้องสมุด JavaScript สำหรับการสร้างภาพทางวิทยาศาสตร์ในเบราว์เซอร์ของคุณ</font></font></li>
+</ul>
+
+<h2 id="ข้อมูลจำเพาะ"><font><font>ข้อมูลจำเพาะ</font></font></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><font><font>สเปค</font></font></th>
+   <th scope="col"><font><font>สถานะ</font></font></th>
+   <th scope="col"><font><font>คิดเห็น</font></font></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><font><font>{{SpecName ( 'WebGL')}}</font></font></td>
+   <td><font><font>{{Spec2 ( 'WebGL')}}</font></font></td>
+   <td><font><font>คำจำกัดความเบื้องต้น </font><font>อ้างอิงจาก OpenGL ES 2.0</font></font></td>
+  </tr>
+  <tr>
+   <td><font><font>{{SpecName ( 'WebGL2')}}</font></font></td>
+   <td><font><font>{{Spec2 ( 'WebGL2')}}</font></font></td>
+   <td><font><font>สร้างบน WebGL 1. ขึ้นอยู่กับ OpenGL ES 3.0</font></font></td>
+  </tr>
+  <tr>
+   <td><font><font>{{SpecName ('OpenGL ES 2.0')}}</font></font></td>
+   <td><font><font>{{Spec2 ('OpenGL ES 2.0')}}</font></font></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0')}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<h3 id="WebGL_1">WebGL 1</h3>
+
+<div>
+
+
+<p>{{Compat("api.WebGLRenderingContext", 0)}}</p>
+
+<h3 id="WebGL_2_2">WebGL 2</h3>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.WebGL2RenderingContext", 0)}}</p>
+</div>
+
+<h3 id="Compatibility_notes">Compatibility notes</h3>
+
+<p><font><font>นอกเหนือจากเบราว์เซอร์แล้ว GPU เองยังต้องการการสนับสนุนคุณสมบัติ </font><font>ตัวอย่างเช่น S3 การบีบอัดพื้นผิว (S3TC) มีเฉพาะในแท็บเล็ตที่ใช้ Tegra เท่านั้น </font><font>เบราว์เซอร์ส่วนใหญ่ทำให้บริบท WebGL พร้อมใช้งานผ่าน</font></font><code>webgl</code><font><font>ชื่อบริบท แต่</font><font>เบราว์เซอร์ที่</font><font>เก่ากว่านั้นต้องการ</font></font><code>experimental-webgl</code><font><font>เช่นกัน </font><font>นอกจากนี้การที่จะเกิดขึ้น</font></font><a href="/en-US/docs/Web/API/WebGL2RenderingContext"><font><font>WebGL 2</font></font></a><code>webgl2</code><font><font>เป็นอย่างถอยหลังได้และจะมีชื่อบริบท</font></font></p>
+
+<h3 id="บันทึกตุ๊กแก"><font><font>บันทึกตุ๊กแก</font></font></h3>
+
+<h4 id="การแก้ไขข้อบกพร่องและการทดสอบ_WebGL"><font><font>การแก้ไขข้อบกพร่องและการทดสอบ WebGL</font></font></h4>
+
+<p><font><font>เริ่มต้นด้วย Gecko 10.0 {{geckoRelease ("10.0")}} มีการตั้งค่าสองแบบที่ให้คุณควบคุมความสามารถของ WebGL สำหรับการทดสอบ:</font></font></p>
+
+<dl>
+ <dt><code>webgl.min_capability_mode</code></dt>
+ <dd><font><font>คุณสมบัติบูลีนที่เมื่อ</font></font><code>true</code><font><font>เปิดใช้งานโหมดความสามารถขั้นต่ำ </font><font>เมื่ออยู่ในโหมดนี้ WebGL จะได้รับการกำหนดค่าให้สนับสนุนชุดคุณลักษณะขั้นต่ำเปลือยและความสามารถที่จำเป็นตามข้อกำหนด WebGL เท่านั้น </font><font>วิธีนี้ช่วยให้คุณมั่นใจได้ว่ารหัส WebGL ของคุณจะทำงานบนอุปกรณ์หรือเบราว์เซอร์ใด ๆ โดยไม่คำนึงถึงความสามารถของพวกเขา </font><font>นี่คือ</font></font><code>false</code><font><font>ค่าเริ่มต้น</font></font></dd>
+ <dt><code>webgl.disable_extensions</code></dt>
+ <dd><font><font>คุณสมบัติบูลีนที่เมื่อ</font></font><code>true</code><font><font>ปิดใช้งานส่วนขยาย WebGL ทั้งหมด </font><font>นี่คือ</font></font><code>false</code><font><font>ค่าเริ่มต้น</font></font></dd>
+</dl>
+
+<h2 id="ดูสิ่งนี้ด้วย"><font><font>ดูสิ่งนี้ด้วย</font></font></h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API"><font><font>Canvas API</font></font></a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility"><font><font>ข้อมูลความเข้ากันได้เกี่ยวกับส่วนขยาย WebGL</font></font></a></li>
+</ul>
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
+---
+<p>{{DefaultAPISidebar("Websockets API")}}</p>
+
+<p>The <strong>WebSocket API</strong> 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.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> While a WebSocket connection is functionally somewhat similar to standard Unix-style sockets, they are not related.</p>
+</div>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebSocket"><code>WebSocket</code></a></dt>
+ <dd>The primary interface for connecting to a WebSocket server and then sending and receiving data on the connection.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/CloseEvent">CloseEvent</a></code></dt>
+ <dd>The event sent by the WebSocket object when the connection closes.</dd>
+ <dt><a href="/en-US/docs/Web/API/MessageEvent"><code>MessageEvent</code></a></dt>
+ <dd>The event sent by the WebSocket object when a message is received from the server.</dd>
+</dl>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li>
+ <li><a href="/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_servers">Writing WebSocket servers</a></li>
+ <li><a href="/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_server">Writing a WebSocket server in C#</a></li>
+ <li><a href="/en-US/docs/Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java">Writing a WebSocket server in Java</a></li>
+</ul>
+
+<h2 id="Tools" name="Tools">Tools</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2017/06/introducing-humblenet-a-cross-platform-networking-library-that-works-in-the-browser/">HumbleNet</a>: A cross-platform networking library that works in the browser. It consists of a C wrapper around WebSockets and WebRTC that abstracts away cross-browser differences, facilitating the creation of multi-user networking functionality for games and other apps.</li>
+ <li><a href="https://github.com/uWebSockets/uWebSockets">µWebSockets</a>: Highly scalable WebSocket server and client implementation for <a href="https://isocpp.org/">C++11</a> and <a href="https://nodejs.org">Node.js</a>.</li>
+ <li><a href="https://github.com/ClusterWS/ClusterWS">ClusterWS</a>:  Lightweight, fast and powerful framework for building scalable WebSocket applications in <a href="https://nodejs.org">Node.js</a>.</li>
+ <li><a href="https://github.com/ClusterWS/cWS">CWS</a>: Fast C++ WebSocket implementation for Node.js (uWebSockets v0.14 fork)</li>
+ <li><a class="external" href="https://socket.io">Socket.IO</a>: A long polling/WebSocket based third party transfer protocol for <a href="https://nodejs.org">Node.js</a>.</li>
+ <li><a href="http://socketcluster.io/">SocketCluster</a>: A pub/sub WebSocket framework for <a href="https://nodejs.org">Node.js</a> with a focus on scalability.</li>
+ <li><a class="link-https" href="https://github.com/Worlize/WebSocket-Node">WebSocket-Node</a>: A WebSocket server API implementation for <a href="https://nodejs.org">Node.js</a>.</li>
+ <li><a href="http://www.totaljs.com">Total.js</a>: Web application framework for <a href="https://www.nodejs.org">Node.js</a> (Example: <a href="https://github.com/totaljs/examples/tree/master/websocket">WebSocket chat</a>)</li>
+ <li><a href="https://www.npmjs.com/package/faye-websocket">Faye</a>: A <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a> (two-ways connections) and <a href="/en-US/docs/Web/API/EventSource/">EventSource</a> (one-way connections) for <a href="https://nodejs.org">Node.js</a> Server and Client.</li>
+ <li><a href="http://signalr.net/">SignalR</a>: SignalR will use WebSockets under the covers when it's available, and gracefully fallback to other techniques and technologies when it isn't, while your application code stays the same.</li>
+ <li><a href="https://caddyserver.com/docs/websocket">Caddy</a>: A web server capable of proxying arbitrary commands (stdin/stdout) as a websocket.</li>
+ <li><a href="https://github.com/websockets/ws">ws</a>: a popular WebSocket client &amp; server library for <a href="https://nodejs.org/">Node.js</a>.</li>
+ <li><a href="https://github.com/bigstepinc/jsonrpc-bidirectional">jsonrpc-bidirectional</a>: Asynchronous RPC which, on a single connection, may have functions exported on the server and, and the same time, on the client (client may call server, server may also call client).</li>
+ <li><a href="https://github.com/ninenines/cowboy">cowboy</a>: Cowboy is a small, fast and modern HTTP server for Erlang/OTP with WebSocket support.</li>
+</ul>
+
+<h2 id="Related_Topics" name="Related_Topics">Related Topics</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/AJAX">AJAX</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript">JavaScript</a></li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comments</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "web-sockets.html", "WebSocket API")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="https://www.w3.org/TR/websockets/">WebSockets</a></td>
+   <td><span class="spec-CR">Candidate Recommendation</span></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{RFC(6455, "The WebSocket Protocol")}}</td>
+   <td><span class="spec-RFC">IETF RFC</span></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.WebSocket")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="http://tools.ietf.org/html/rfc6455">RFC 6455 — The WebSocket Protocol</a></li>
+ <li><a class="external" href="https://www.w3.org/TR/websockets/">WebSocket API Specification</a></li>
+ <li><a href="/en-US/docs/Server-sent_events">Server-Sent Events</a></li>
+</ul>
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
+---
+<div><font><font>{{APIRef ("DOM")}}</font></font></div>
+
+<p><span class="seoSummary"><strong><code>Window</code></strong><font><font>อินเตอร์เฟซที่แสดงให้เห็นถึงหน้าต่างที่มี {{คำศัพท์ ( "DOM")}} เอกสาร; </font></font><code>document</code><font><font>จุดสถานที่ให้บริการไปยัง</font></font><a href="/en-US/docs/Web/API/Document"><font><font>เอกสาร DOM</font></font></a><font><font>โหลดในหน้าต่างที่ </font></font></span><font><font>สามารถรับหน้าต่างสำหรับเอกสารที่ระบุได้โดยใช้คุณสมบัติ {{domxref ("document.defaultView")}}</font></font></p>
+
+<p><font><font>ตัวแปรส่วนกลาง</font></font><code>window</code><font><font>ซึ่งเป็นตัวแทนของหน้าต่างที่สคริปต์กำลังทำงานอยู่นั้นสัมผัสกับโค้ด JavaScript</font></font></p>
+
+<p><code>Window</code><font><font>อินเตอร์เฟซที่เป็นบ้านที่มีความหลากหลายของฟังก์ชั่น namespaces วัตถุและการก่อสร้างที่ไม่จำเป็นต้องเกี่ยวข้องโดยตรงกับแนวคิดของหน้าต่างอินเตอร์เฟซผู้ใช้ </font><font>อย่างไรก็ตาม</font></font><code>Window</code><font><font>อินเทอร์เฟซเป็นสถานที่ที่เหมาะสมในการรวมรายการเหล่านี้ที่จำเป็นต้องพร้อมใช้งานทั่วโลก </font><font>หลายคนเหล่านี้จะถูกบันทึกไว้ใน</font></font><a href="/en-US/docs/Web/JavaScript/Reference"><font><font>เอกสารอ้างอิง JavaScript</font></font></a><font><font>และ</font></font><a href="/en-US/docs/Web/API/Document_Object_Model"><font><font>DOM </font></font></a><font><font>อ้างอิง</font></font></p>
+
+<p><font><font>ในเบราว์เซอร์แบบแท็บแต่ละแท็บจะแสดงด้วย</font></font><code>Window</code><font><font>วัตถุ</font><font>ของตัวเอง </font><font>ทั่วโลกที่</font></font><code>window</code><font><font>เห็นโดยโค้ด JavaScript ที่ทำงานภายในแท็บหนึ่ง ๆ จะแสดงถึงแท็บที่โค้ดกำลังทำงานอยู่เสมอ </font><font>อย่างไรก็ตามในเบราว์เซอร์แบบแท็บคุณสมบัติและวิธีการบางอย่างยังคงใช้กับหน้าต่างโดยรวมที่มีแท็บเช่น {{Domxref ("Window.resizeTo", "resizeTo ()")}} และ {{Domxref (" Window.innerHeight "," innerHeight ")}} </font><font>โดยทั่วไปสิ่งที่ไม่สามารถเกี่ยวข้องกับแท็บจะเกี่ยวข้องกับหน้าต่างแทน</font></font></p>
+
+<p><font><font>{{InheritanceDiagram}}</font></font></p>
+
+<h2 id="ตัวสร้าง"><font><font>ตัวสร้าง</font></font></h2>
+
+<p><font><font>ดู</font></font><a href="/en-US/docs/DOM/DOM_Reference" title="/ en-US / docs / DOM / DOM_Reference"><font><font>อินเทอร์เฟซ DOM</font></font></a><font><font>ด้วย</font></font></p>
+
+<dl>
+ <dt><font><font>{{domxref ("DOMParser")}}</font></font></dt>
+ <dd><code>DOMParser</code><font><font>สามารถแยก XML หรือแหล่งที่มาของ HTML เก็บไว้ในสตริงเป็น DOM </font><font>เอกสาร</font></font><a href="/en-US/docs/DOM/document" title="เอกสาร"><font><font> </font></font></a><code>DOMParser</code><font><font>ที่ระบุไว้ใน</font></font><a href="https://w3c.github.io/DOM-Parsing/" title="http://html5.org/specs/dom-parsing.html"><font><font>DOM </font></font></a><font><font>แยกและเป็นอันดับ</font></font></dd>
+ <dt><font><font>{{domxref ("รูปภาพ")}}</font></font></dt>
+ <dd><font><font>ใช้สำหรับสร้าง {{domxref ("HTMLImageElement")}}</font></font></dd>
+ <dt><font><font>{{domxref ("ตัวเลือก")}}</font></font></dt>
+ <dd><font><font>ใช้สำหรับสร้าง {{domxref ("HTMLOptionElement")}}</font></font></dd>
+ <dt><font><font>{{domxref ("StaticRange")}} {{trial_inline}} {{readonlyinline}}</font></font></dt>
+ <dd><font><font>ส่งกลับคอนสตรัคเตอร์ {{domxref ('StaticRange.StaticRange', 'StaticRange ()')}} ซึ่งสร้างอ็อบเจกต์ {{domxref ('StaticRange')}}</font></font></dd>
+ <dt><font><font>{{domxref ("คนงาน")}}</font></font></dt>
+ <dd><font><font>ใช้สำหรับสร้าง</font></font><a href="/en-US/docs/DOM/Using_web_workers"><font><font>Web Worker</font></font></a></dd>
+ <dt><font><font>{{domxref ("XMLSerializer")}}</font></font></dt>
+ <dd><font><font>แปลงแผนผัง DOM เป็นซอร์ส XML หรือ HTML</font></font></dd>
+</dl>
+
+<h2 id="คุณสมบัติ"><font><font>คุณสมบัติ</font></font></h2>
+
+<p><em><font><font>อินเทอร์เฟซนี้สืบทอดคุณสมบัติจากอินเทอร์เฟซ {{domxref ("EventTarget")}} และใช้คุณสมบัติจากมิกซ์อิน {{domxref ("WindowOrWorkerGlobalScope")}} และ {{domxref ("WindowEventHandlers")}}</font></font></em></p>
+
+<p><font><font>โปรดสังเกตว่าคุณสมบัติที่เป็นอ็อบเจกต์ (เช่นสำหรับการลบล้างต้นแบบของอิลิเมนต์ในตัว) จะแสดงรายการไว้ในส่วนแยกต่างหากด้านล่าง</font></font></p>
+
+<dl>
+ <dt><font><font>{{domxref ("Window.closed")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>คุณสมบัตินี้ระบุว่าหน้าต่างปัจจุบันปิดอยู่หรือไม่</font></font></dd>
+ <dt><font><font>{{domxref ("Window.console")}} {{ReadOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนการอ้างอิงไปยังออบเจ็กต์คอนโซลที่ให้การเข้าถึงคอนโซลการดีบักของเบราว์เซอร์</font></font></dd>
+ <dt><font><font>{{domxref ("Window.controllers")}} {{ReadOnlyInline}} {{non-standard_inline}}</font></font></dt>
+ <dd><font><font>ส่งคืนอ็อบเจ็กต์คอนโทรลเลอร์ XUL สำหรับหน้าต่างโครเมี่ยมปัจจุบัน</font></font></dd>
+ <dt><font><font>{{domxref ("Window.customElements")}} {{ReadOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งกลับการอ้างอิงถึงออบเจ็กต์ {{domxref ("CustomElementRegistry")}} ซึ่งสามารถใช้เพื่อลงทะเบียน</font></font><a href="/en-US/docs/Web/Web_Components/Using_custom_elements"><font><font>องค์ประกอบที่กำหนดเอง</font></font></a><font><font>ใหม่</font><font>และรับข้อมูลเกี่ยวกับองค์ประกอบที่กำหนดเองที่ลงทะเบียนไว้ก่อนหน้านี้</font></font></dd>
+ <dt><font><font>{{domxref ("Window.crypto")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนวัตถุการเข้ารหัสลับของเบราว์เซอร์</font></font></dd>
+ <dt><font><font>{{domxref ("Window.devicePixelRatio")}} {{ReadOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งกลับอัตราส่วนระหว่างพิกเซลจริงและพิกเซลอิสระของอุปกรณ์ในจอแสดงผลปัจจุบัน</font></font></dd>
+ <dt><font><font>{{domxref ("Window.document")}} {{ReadOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนการอ้างอิงไปยังเอกสารที่มีหน้าต่าง</font></font></dd>
+ <dt><font><font>{{domxref ("Window.DOMMatrix")}} {{readOnlyInline}} {{trial_inline}}</font></font></dt>
+ <dd><font><font>ส่งกลับการอ้างอิงถึงออบเจ็กต์ {{domxref ("DOMMatrix")} ซึ่งแสดงถึงเมทริกซ์ 4x4 เหมาะสำหรับการดำเนินการ 2 มิติและ 3 มิติ</font></font></dd>
+ <dt><font><font>{{domxref ("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{trial_inline}}</font></font></dt>
+ <dd><font><font>ส่งคืนการอ้างอิงไปยังออบเจ็กต์ {{domxref ("DOMMatrixReadOnly")}} ซึ่งแสดงถึงเมทริกซ์ 4x4 เหมาะสำหรับการดำเนินการ 2 มิติและ 3 มิติ</font></font></dd>
+ <dt><font><font>{{domxref ("Window.DOMPoint")}} {{readOnlyInline}} {{trial_inline}}</font></font></dt>
+ <dd><font><font>ส่งกลับการอ้างอิงไปยังออบเจ็กต์ {{domxref ("DOMPoint")}} ซึ่งแสดงถึงจุด 2 มิติหรือ 3 มิติในระบบพิกัด</font></font></dd>
+ <dt><font><font>{{domxref ("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{trial_inline}}</font></font></dt>
+ <dd><font><font>ส่งคืนการอ้างอิงไปยังออบเจ็กต์ {{domxref ("DOMPointReadOnly")}} ซึ่งแสดงถึงจุด 2 มิติหรือ 3 มิติในระบบพิกัด</font></font></dd>
+ <dt><font><font>{{domxref ("Window.DOMQuad")}} {{readOnlyInline}} {{trial_inline}}</font></font></dt>
+ <dd><font><font>ส่งกลับการอ้างอิงถึงออบเจ็กต์ {{domxref ("DOMQuad")}} ซึ่งแสดงถึงออบเจ็กต์รูปสี่เหลี่ยมจัตุรัสนั่นคืออันที่มีสี่มุมและสี่ด้าน</font></font></dd>
+ <dt><font><font>{{domxref ("Window.DOMRect")}} {{readOnlyInline}} {{trial_inline}}</font></font></dt>
+ <dd><font><font>ส่งกลับการอ้างอิงไปยังออบเจ็กต์ {{domxref ("DOMRect")}} ซึ่งแสดงถึงสี่เหลี่ยมผืนผ้า</font></font></dd>
+ <dt><font><font>{{domxref ("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{trial_inline}}</font></font></dt>
+ <dd><font><font>ส่งกลับการอ้างอิงไปยังวัตถุ {{domxref ("DOMRectReadOnly")}} ซึ่งแสดงถึงรูปสี่เหลี่ยมผืนผ้า</font></font></dd>
+ <dt><font><font>{{domxref ("Window.event")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืน</font></font><strong><font><font>เหตุการณ์ปัจจุบัน</font></font></strong><font><font>ซึ่งเป็นเหตุการณ์ที่กำลังจัดการโดยบริบทของโค้ด JavaScript หรือ</font></font><code>undefined</code><font><font>หากไม่มีเหตุการณ์ใดที่กำลังจัดการอยู่ </font><font>ควรใช้ออบเจ็กต์ {{domxref ("Event")}} ที่ส่งตรงไปยังตัวจัดการเหตุการณ์แทนทุกครั้งที่ทำได้</font></font></dd>
+ <dt><font><font>{{domxref ("Window.frameElement")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนองค์ประกอบที่ฝังหน้าต่างหรือเป็นโมฆะหากไม่ได้ฝังหน้าต่าง</font></font></dd>
+ <dt><font><font>{{domxref ("Window.frames")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนอาร์เรย์ของเฟรมย่อยในหน้าต่างปัจจุบัน</font></font></dd>
+ <dt><font><font>{{domxref ("Window.fullScreen")}}</font></font></dt>
+ <dd><font><font>คุณสมบัตินี้ระบุว่าหน้าต่างแสดงแบบเต็มหน้าจอหรือไม่</font></font></dd>
+ <dt><font><font>{{domxref ("Window.history")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนการอ้างอิงไปยังออบเจ็กต์ประวัติ</font></font></dd>
+ <dt><font><font>{{domxref ("Window.innerHeight")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>รับความสูงของพื้นที่เนื้อหาของหน้าต่างเบราว์เซอร์รวมถึงแถบเลื่อนแนวนอนหากแสดงผล</font></font></dd>
+ <dt><font><font>{{domxref ("Window.innerWidth")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>รับความกว้างของพื้นที่เนื้อหาของหน้าต่างเบราว์เซอร์รวมถึงแถบเลื่อนแนวตั้งหากแสดงผล</font></font></dd>
+ <dt><font><font>{{domxref ("Window.isSecureContext")}} {{trial_inline}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>ระบุว่าบริบทสามารถใช้คุณลักษณะที่ต้องการบริบทที่ปลอดภัยได้หรือไม่</font></font></dd>
+ <dt><font><font>{{domxref ("Window.length")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนจำนวนเฟรมในหน้าต่าง </font><font>โปรดดู {{domxref ("window.frames")}} ด้วย</font></font></dd>
+ <dt><font><font>{{domxref ("Window.location")}}</font></font></dt>
+ <dd><font><font>รับ / ตั้งค่าตำแหน่งหรือ URL ปัจจุบันของวัตถุหน้าต่าง</font></font></dd>
+ <dt><font><font>{{domxref ("Window.locationbar")}} {{ReadOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนวัตถุแถบตำแหน่งซึ่งสามารถสลับการเปิดเผยในหน้าต่างได้</font></font></dd>
+ <dt><font><font>{{domxref ("Window.localStorage")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนการอ้างอิงไปยังออบเจ็กต์หน่วยเก็บข้อมูลในเครื่องที่ใช้ในการจัดเก็บข้อมูลที่สามารถเข้าถึงได้โดยต้นทางที่สร้างขึ้นเท่านั้น</font></font></dd>
+ <dt><font><font>{{domxref ("Window.menubar")}} {{ReadOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนวัตถุแถบเมนูซึ่งสามารถสลับการมองเห็นได้ในหน้าต่าง</font></font></dd>
+ <dt><font><font>{{domxref ("Window.messageManager")}} {{non-standard_inline}}</font></font></dt>
+ <dd><font><font>ส่งคืน</font><font>วัตถุ</font></font><a href="/en-US/docs/The_message_manager"><font><font>ตัวจัดการข้อความ</font></font></a><font><font>สำหรับหน้าต่างนี้</font></font></dd>
+ <dt><font><font>{{domxref ("Window.mozInnerScreenX")}} {{ReadOnlyInline}} {{non-standard_inline}}</font></font></dt>
+ <dd><font><font>ส่งกลับพิกัดแนวนอน (X) ของมุมบนซ้ายของวิวพอร์ตของหน้าต่างในพิกัดหน้าจอ </font><font>ค่านี้รายงานเป็นพิกเซล CSS </font><font>ดู</font></font><code>mozScreenPixelsPerCSSPixel</code><font><font>ใน {{interface ("nsIDOMWindowUtils")}} สำหรับปัจจัยการแปลงเพื่อปรับให้เข้ากับพิกเซลของหน้าจอหากจำเป็น</font></font></dd>
+ <dt><font><font>{{domxref ("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}</font></font></dt>
+ <dd><font><font>ส่งกลับพิกัดแนวตั้ง (Y) ของมุมบนซ้ายของวิวพอร์ตของหน้าต่างในพิกัดหน้าจอ </font><font>ค่านี้รายงานเป็นพิกเซล CSS </font><font>ดู</font></font><code>mozScreenPixelsPerCSSPixel</code><font><font>ปัจจัยการแปลงเพื่อปรับให้เข้ากับพิกเซลหน้าจอหากจำเป็น</font></font></dd>
+ <dt><font><font>{{domxref ("Window.name")}}</font></font></dt>
+ <dd><font><font>รับ / ตั้งชื่อของหน้าต่าง</font></font></dd>
+ <dt><font><font>{{domxref ("Window.navigator")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนการอ้างอิงไปยังวัตถุเนวิเกเตอร์</font></font></dd>
+ <dt><font><font>{{domxref ("Window.opener")}}</font></font></dt>
+ <dd><font><font>ส่งคืนการอ้างอิงไปยังหน้าต่างที่เปิดหน้าต่างปัจจุบันนี้</font></font></dd>
+ <dt><font><font>{{domxref ("Window.outerHeight")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>รับความสูงของด้านนอกของหน้าต่างเบราว์เซอร์</font></font></dd>
+ <dt><font><font>{{domxref ("Window.outerWidth")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>รับความกว้างของด้านนอกของหน้าต่างเบราว์เซอร์</font></font></dd>
+ <dt><font><font>{{domxref ("Window.scrollX", "Window.pageXOffset")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>นามแฝงสำหรับ {{domxref ("window.scrollX")}}</font></font></dd>
+ <dt><font><font>{{domxref ("Window.scrollY", "Window.pageYOffset")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>นามแฝงสำหรับ {{domxref ("window.scrollY")}}</font></font></dd>
+ <dt><font><font>{{domxref ("Window.parent")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนการอ้างอิงถึงพาเรนต์ของหน้าต่างหรือเฟรมย่อยปัจจุบัน</font></font></dd>
+ <dt><font><font>{{domxref ("Window.performance")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนอ็อบเจ็กต์ {{domxref ("Performance")}} ซึ่งรวมถึง {{domxref ("Performance.timing", "timing")}} และ {{domxref ("Performance.navigation", "navigation")}} แอตทริบิวต์ซึ่งแต่ละรายการเป็นวัตถุที่ให้</font><font>ข้อมูล</font></font><a href="/en-US/docs/Navigation_timing"><font><font>ที่เกี่ยวข้องกับ</font></font></a><font><font>ประสิทธิภาพ </font><font>โปรดดู</font></font><a href="/en-US/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing"><font><font>การใช้ Navigation Timing</font></font></a><font><font>สำหรับข้อมูลเพิ่มเติมและตัวอย่าง</font></font></dd>
+ <dt><font><font>{{domxref ("Window.personalbar")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนวัตถุ Personalbar ซึ่งสามารถสลับการมองเห็นได้ในหน้าต่าง</font></font></dd>
+ <dt><font><font>{{domxref ("Window.screen")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนการอ้างอิงไปยังออบเจ็กต์หน้าจอที่เกี่ยวข้องกับหน้าต่าง</font></font></dd>
+ <dt><font><font>{{domxref ("Window.screenX")}} และ {{domxref ("Window.screenLeft")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>คุณสมบัติทั้งสองจะคืนระยะทางแนวนอนจากขอบด้านซ้ายของวิวพอร์ตของเบราว์เซอร์ของผู้ใช้ไปทางด้านซ้ายของหน้าจอ</font></font></dd>
+ <dt><font><font>{{domxref ("Window.screenY")}} และ {{domxref ("Window.screenTop")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>คุณสมบัติทั้งสองจะคืนระยะทางแนวตั้งจากเส้นขอบด้านบนของวิวพอร์ตเบราว์เซอร์ของผู้ใช้ไปที่ด้านบนของหน้าจอ</font></font></dd>
+ <dt><font><font>{{domxref ("Window.scrollbars")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนอ็อบเจ็กต์แถบเลื่อนซึ่งสามารถสลับการมองเห็นได้ในหน้าต่าง</font></font></dd>
+ <dt><font><font>{{domxref ("Window.scrollMaxX")}} {{non-standard_inline}} {{ReadOnlyInline}}</font></font></dt>
+ <dd><font><font>ค่าชดเชยสูงสุดที่สามารถเลื่อนหน้าต่างไปเป็นแนวนอนได้นั่นคือความกว้างของเอกสารลบด้วยความกว้างของวิวพอร์ต</font></font></dd>
+ <dt><font><font>{{domxref ("Window.scrollMaxY")}} {{non-standard_inline}} {{ReadOnlyInline}}</font></font></dt>
+ <dd><font><font>ค่าชดเชยสูงสุดที่สามารถเลื่อนหน้าต่างไปยังแนวตั้งได้ (เช่นความสูงของเอกสารลบด้วยความสูงของวิวพอร์ต)</font></font></dd>
+ <dt><font><font>{{domxref ("Window.scrollX")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนจำนวนพิกเซลที่เอกสารถูกเลื่อนไปแล้วในแนวนอน</font></font></dd>
+ <dt><font><font>{{domxref ("Window.scrollY")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนจำนวนพิกเซลที่เอกสารถูกเลื่อนในแนวตั้งแล้ว</font></font></dd>
+ <dt><font><font>{{domxref ("Window.self")}} {{ReadOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนการอ้างอิงอ็อบเจ็กต์ไปยังอ็อบเจ็กต์หน้าต่างเอง</font></font></dd>
+ <dt><font><font>{{domxref ("Window.sessionStorage")}}</font></font></dt>
+ <dd><font><font>ส่งคืนการอ้างอิงไปยังออบเจ็กต์หน่วยเก็บข้อมูลเซสชันที่ใช้ในการจัดเก็บข้อมูลที่สามารถเข้าถึงได้โดยต้นทางที่สร้าง</font></font></dd>
+ <dt><font><font>{{domxref ("Window.sidebar")}} {{non-standard_inline}} {{ReadOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนการอ้างอิงไปยังวัตถุหน้าต่างของแถบด้านข้าง</font></font></dd>
+ <dt><font><font>{{domxref ("Window.speechSynthesis")}} {{ReadOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนออบเจ็กต์ {{domxref ("SpeechSynthesis")}} ซึ่งเป็นจุดเริ่มต้นในการใช้</font><font>ฟังก์ชันการสังเคราะห์</font></font><a href="/en-US/docs/Web/API/Web_Speech_API"><font><font>เสียงพูด Web Speech API</font></font></a></dd>
+ <dt><font><font>{{domxref ("Window.status")}}</font></font></dt>
+ <dd><font><font>รับ / ตั้งค่าข้อความในแถบสถานะที่ด้านล่างของเบราว์เซอร์</font></font></dd>
+ <dt><font><font>{{domxref ("Window.statusbar")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนออบเจ็กต์แถบสถานะซึ่งสามารถสลับการเปิดเผยได้ในหน้าต่าง</font></font></dd>
+ <dt><font><font>{{domxref ("Window.toolbar")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนอ็อบเจ็กต์แถบเครื่องมือซึ่งสามารถสลับการเปิดเผยได้ในหน้าต่าง</font></font></dd>
+ <dt><font><font>{{domxref ("Window.top")}} {{readOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนการอ้างอิงไปยังหน้าต่างที่อยู่บนสุดในลำดับชั้นของหน้าต่าง </font><font>คุณสมบัตินี้เป็นแบบอ่านอย่างเดียว</font></font></dd>
+ <dt><font><font>{{domxref ("Window.visualViewport")}} {{readOnlyInline}} {{trial_inline}}</font></font></dt>
+ <dd><font><font>ส่งคืนออบเจ็กต์ {{domxref ("VisualViewport")}} ซึ่งแสดงถึงวิวพอร์ตภาพสำหรับหน้าต่างที่กำหนด</font></font></dd>
+ <dt><font><font>{{domxref ("Window.window")}} {{ReadOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนการอ้างอิงไปยังหน้าต่างปัจจุบัน</font></font></dd>
+ <dt><code>window[0]</code><font><font>, </font></font><code>window[1]</code><font><font>ฯลฯ</font></font></dt>
+ <dd><font><font>ส่งคืนการอ้างอิงไปยัง</font></font><code>window</code><font><font>วัตถุในเฟรม </font><font>ดูรายละเอียดเพิ่มเติมที่ {{domxref ("Window.frames")}}</font></font></dd>
+</dl>
+
+<h3 id="คุณสมบัติดำเนินการจากที่อื่น"><font><font>คุณสมบัติดำเนินการจากที่อื่น</font></font></h3>
+
+<dl>
+ <dt><font><font>{{domxref ("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</font></font></dt>
+ <dd><font><font>ส่งคืนอ็อบเจ็กต์ {{domxref ("CacheStorage")}} ที่เชื่อมโยงกับบริบทปัจจุบัน </font><font>อ็อบเจ็กต์นี้เปิดใช้งานฟังก์ชันต่างๆเช่นการจัดเก็บเนื้อหาสำหรับการใช้งานออฟไลน์และสร้างการตอบสนองที่กำหนดเองสำหรับคำขอ</font></font></dd>
+ <dt><font><font>{{domxref ("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</font></font></dt>
+ <dd><font><font>จัดเตรียมกลไกสำหรับแอปพลิเคชันเพื่อเข้าถึงความสามารถของฐานข้อมูลที่ทำดัชนีแบบอะซิงโครนัส </font><font>ส่งคืนอ็อบเจ็กต์ {{domxref ("IDBFactory")}}</font></font></dd>
+ <dt><font><font>{{domxref ("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</font></font></dt>
+ <dd><font><font>ส่งคืนบูลีนที่ระบุว่าบริบทปัจจุบันปลอดภัย ( </font></font><code>true</code><font><font>) หรือไม่ ( </font></font><code>false</code><font><font>)</font></font></dd>
+ <dt><font><font>{{domxref ("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</font></font></dt>
+ <dd><font><font>ส่งคืนจุดเริ่มต้นของวัตถุส่วนกลางโดยจัดลำดับเป็นสตริง </font><font>(สิ่งนี้ยังไม่ปรากฏในเบราว์เซอร์ใด ๆ )</font></font></dd>
+</dl>
+
+<h3 id="คุณสมบัติที่ไม่รองรับ"><font><font>คุณสมบัติที่ไม่รองรับ</font></font></h3>
+
+<dl>
+ <dt><font><font>{{domxref ("Window.content")}} และ</font></font><code>Window._content</code><font><font>{{Non-standard_inline}} {{deprecated_inline}} {{ReadOnlyInline}}</font></font></dt>
+ <dd><font><font>ส่งคืนการอ้างอิงถึงองค์ประกอบเนื้อหาในหน้าต่างปัจจุบัน </font><font>ตั้งแต่ Firefox 57 (เริ่มต้นใช้งานเฉพาะคืนเท่านั้น) ทั้งสองเวอร์ชันมีให้ใช้งานจากรหัสโครเมี่ยม (สิทธิพิเศษ) เท่านั้นและไม่สามารถใช้งานบนเว็บได้อีกต่อไป</font></font></dd>
+ <dt><font><font>{{domxref ("Window.defaultStatus")}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>รับ / ตั้งค่าข้อความแถบสถานะสำหรับหน้าต่างที่กำหนด</font></font></dd>
+ <dt><font><font>{{domxref ("Window.dialogArguments")}} {{deprecated_inline}} {{ReadOnlyInline}}</font></font></dt>
+ <dd><font><font>รับอาร์กิวเมนต์ที่ส่งผ่านไปยังหน้าต่าง (หากเป็นกล่องโต้ตอบ) เมื่อมีการเรียก {{domxref ("window.showModalDialog ()")}} </font><font>นี่คือ {{Interface ("nsIArray")}}</font></font></dd>
+ <dt><font><font>{{domxref ("Window.directories")}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>คำพ้องความหมายของ {{domxref ("window.personalbar")}}</font></font></dd>
+ <dt><font><font>{{domxref ("Window.globalStorage")}} {{Non-standard_inline}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>อ็อบเจ็กต์หน่วยเก็บข้อมูลจำนวนมากที่ใช้สำหรับจัดเก็บข้อมูลในหลายเพจ</font></font></dd>
+ <dt><font><font>{{domxref ("Window.mozAnimationStartTime")}} {{Non-standard_inline}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>เวลาในหน่วยมิลลิวินาทีนับตั้งแต่ยุคที่วงจรการเคลื่อนไหวปัจจุบันเริ่มต้นขึ้น </font><font>ใช้ {{domxref ("Animation.startTime")}} แทน</font></font></dd>
+ <dt><font><font>{{domxref ("Window.mozPaintCount")}} {{non-standard_inline}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>ส่งคืนจำนวนครั้งที่เอกสารปัจจุบันถูกแสดงบนหน้าจอในหน้าต่างนี้ </font><font>สามารถใช้เพื่อคำนวณประสิทธิภาพการแสดงผล</font></font></dd>
+ <dt><font><font>{{domxref ("Window.orientation")}} {{readOnlyInline}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>ส่งคืนการวางแนวเป็นองศา (เพิ่มขึ้นทีละ 90 องศา) ของวิวพอร์ตที่สัมพันธ์กับการวางแนวตามธรรมชาติของอุปกรณ์</font></font></dd>
+ <dt><font><font>{{domxref ("Window.pkcs11")}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>เดิมให้การเข้าถึงเพื่อติดตั้งและลบโมดูล PKCS11</font></font></dd>
+ <dt><font><font>{{domxref ("Window.returnValue")}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>ค่าส่งคืนที่จะส่งกลับไปยังฟังก์ชันที่เรียกว่า {{domxref ("window.showModalDialog ()")}} เพื่อแสดงหน้าต่างเป็นกล่องโต้ตอบโมดอล</font></font></dd>
+</dl>
+
+<h2 id="วิธีการ"><font><font>วิธีการ</font></font></h2>
+
+<p><em><font><font>อินเทอร์เฟซนี้สืบทอดเมธอดจากอินเทอร์เฟซ {{domxref ("EventTarget")}} และใช้เมธอดจาก {{domxref ("WindowOrWorkerGlobalScope")}} และ {{domxref ("EventTarget")}}</font></font></em></p>
+
+<dl>
+ <dt><font><font>{{domxref ("Window.alert ()")}}</font></font></dt>
+ <dd><font><font>แสดงกล่องโต้ตอบการแจ้งเตือน</font></font></dd>
+ <dt><font><font>{{domxref ("Window.blur ()")}}</font></font></dt>
+ <dd><font><font>ตั้งโฟกัสให้ห่างจากหน้าต่าง</font></font></dd>
+ <dt><font><font>{{domxref ("Window.cancelAnimationFrame ()")}} {{trial_inline}}</font></font></dt>
+ <dd><font><font>ช่วยให้คุณสามารถยกเลิกการโทรกลับที่กำหนดไว้ก่อนหน้านี้ด้วย {{domxref ("Window.requestAnimationFrame")}}</font></font></dd>
+ <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt>
+ <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.</dd>
+ <dt>{{domxref("Window.clearImmediate()")}}</dt>
+ <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd>
+ <dt>{{domxref("Window.close()")}}</dt>
+ <dd>Closes the current window.</dd>
+ <dt>{{domxref("Window.confirm()")}}</dt>
+ <dd>Displays a dialog with a message that the user needs to respond to.</dd>
+ <dt>{{domxref("Window.dump()")}} {{Non-standard_inline}}</dt>
+ <dd>Writes a message to the console.</dd>
+ <dt>{{domxref("Window.find()")}}</dt>
+ <dd>Searches for a given string in a window.</dd>
+ <dt>{{domxref("Window.focus()")}}</dt>
+ <dd>Sets focus on the current window.</dd>
+ <dt>{{domxref("Window.getComputedStyle()")}}</dt>
+ <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd>
+ <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt>
+ <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd>
+ <dt>{{domxref("Window.getSelection()")}}</dt>
+ <dd>Returns the selection object representing the selected item(s).</dd>
+ <dt>{{domxref("Window.matchMedia()")}}</dt>
+ <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd>
+ <dt>{{domxref("Window.maximize()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt>
+ <dd>Minimizes the window.</dd>
+ <dt>{{domxref("Window.moveBy()")}}</dt>
+ <dd>Moves the current window by a specified amount.</dd>
+ <dt>{{domxref("Window.moveTo()")}}</dt>
+ <dd>Moves the window to the specified coordinates.</dd>
+ <dt>{{domxref("Window.open()")}}</dt>
+ <dd>Opens a new window.</dd>
+ <dt>{{domxref("Window.postMessage()")}}</dt>
+ <dd>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.</dd>
+ <dt>{{domxref("Window.print()")}}</dt>
+ <dd>Opens the Print Dialog to print the current document.</dd>
+ <dt>{{domxref("Window.prompt()")}}</dt>
+ <dd>Returns the text entered by the user in a prompt dialog.</dd>
+ <dt>{{domxref("Window.requestAnimationFrame()")}}</dt>
+ <dd>Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame.</dd>
+ <dt>{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}</dt>
+ <dd>Enables the scheduling of tasks during a browser's idle periods.</dd>
+ <dt>{{domxref("Window.resizeBy()")}}</dt>
+ <dd>Resizes the current window by a certain amount.</dd>
+ <dt>{{domxref("Window.resizeTo()")}}</dt>
+ <dd>Dynamically resizes window.</dd>
+ <dt>{{domxref("Window.scroll()")}}</dt>
+ <dd>Scrolls the window to a particular place in the document.</dd>
+ <dt>{{domxref("Window.scrollBy()")}}</dt>
+ <dd>Scrolls the document in the window by the given amount.</dd>
+ <dt>{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}</dt>
+ <dd>Scrolls the document by the given number of lines.</dd>
+ <dt>{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}</dt>
+ <dd>Scrolls the current document by the specified number of pages.</dd>
+ <dt>{{domxref("Window.scrollTo()")}}</dt>
+ <dd>Scrolls to a particular set of coordinates in the document.</dd>
+ <dt>{{domxref("Window.setImmediate()")}}</dt>
+ <dd>Executes a function after the browser has finished other heavy tasks</dd>
+ <dt>{{domxref("Window.setResizable()")}} {{Non-standard_inline}}</dt>
+ <dd>Toggles a user's ability to resize a window.</dd>
+ <dt>{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}</dt>
+ <dd>Sizes the window according to its content.</dd>
+ <dt>{{domxref("Window.stop()")}}</dt>
+ <dd>This method stops window loading.</dd>
+ <dt>{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}</dt>
+ <dd>Updates the state of commands of the current chrome window (UI).</dd>
+</dl>
+
+<h3 id="Methods_implemented_from_elsewhere">Methods implemented from elsewhere</h3>
+
+<dl>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>Register an event handler to a specific event type on the window.</dd>
+ <dt>{{domxref("EventTarget.dispatchEvent()")}}</dt>
+ <dd>Used to trigger an event.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt>
+ <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt>
+ <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt>
+ <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt>
+ <dd>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 <em>(sx, sy)</em> with width sw, and height sh.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt>
+ <dd>Starts the process of fetching a resource from the network.</dd>
+ <dt>{{domxref("EventTarget.removeEventListener")}}</dt>
+ <dd>Removes an event listener from the window.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt>
+ <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt>
+ <dd>Schedules a function to execute in a given amount of time.</dd>
+</dl>
+
+<h3 id="Deprecated_methods">Deprecated methods</h3>
+
+<dl>
+ <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Moves back one in the window history. This method is deprecated; you should instead use {{domxref("History.back", "window.history.back()")}}.</dd>
+ <dt>{{domxref("Window.captureEvents()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Registers the window to capture all events of the specified type.</dd>
+ <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Moves the window one document forward in the history. This method is deprecated; you should instead use {{domxref("History.forward", "window.history.forward()")}}.</dd>
+ <dt>{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Flashes the application icon.</dd>
+ <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Returns the browser to the home page.</dd>
+ <dt>{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Opens a new dialog window.</dd>
+ <dt>{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Releases the window from trapping events of a specific type.</dd>
+ <dt>{{domxref("Window.showModalDialog()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Displays a modal dialog.</dd>
+</dl>
+
+<h2 id="Event_handlers">Event handlers</h2>
+
+<p>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.</p>
+
+<p><em>This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Window.onappinstalled")}}</dt>
+ <dd>Called when the page is installed as a webapp. See {{domxref("Window/appinstalled_event", "appinstalled")}} event.</dd>
+ <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt>
+ <dd>An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.</dd>
+ <dt>{{domxref("Window.ondevicelight")}}</dt>
+ <dd>An event handler property for any ambient light levels changes</dd>
+ <dt>{{domxref("Window.ondevicemotion")}}</dt>
+ <dd>Called if accelerometer detects a change (For mobile devices)</dd>
+ <dt>{{domxref("Window.ondeviceorientation")}}</dt>
+ <dd>Called when the orientation is changed (For mobile devices)</dd>
+ <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}}</dt>
+ <dd>An event handler property for any device orientation changes.</dd>
+ <dt>{{domxref("Window.ondeviceproximity")}}</dt>
+ <dd>An event handler property for device proximity event</dd>
+ <dt>{{domxref("Window.ongamepadconnected")}}</dt>
+ <dd>Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).</dd>
+ <dt>{{domxref("Window.ongamepaddisconnected")}}</dt>
+ <dd>Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).</dd>
+ <dt>{{domxref("Window.onmozbeforepaint")}}</dt>
+ <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd>
+ <dt>{{domxref("Window.onpaint")}}</dt>
+ <dd>An event handler property for paint events on the window.</dd>
+ <dt>{{domxref("Window.onrejectionhandled")}}</dt>
+ <dd>An event handler for handled {{jsxref("Promise")}} rejection events.</dd>
+ <dt>{{domxref("Window.onuserproximity")}}</dt>
+ <dd>An event handler property for user proximity events.</dd>
+ <dt>{{domxref("Window.onvrdisplayconnect")}}</dt>
+ <dd>Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt>
+ <dd>Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplayactivate")}}</dt>
+ <dd>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.</dd>
+ <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt>
+ <dd>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.</dd>
+ <dt>{{domxref("Window.onvrdisplayblur")}}</dt>
+ <dd>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.</dd>
+ <dt>{{domxref("Window.onvrdisplayfocus")}}</dt>
+ <dd>Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt>
+ <dd>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).</dd>
+</dl>
+
+<h3 id="Event_handlers_implemented_from_elsewhere">Event handlers implemented from elsewhere</h3>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
+ <dd>Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress</dd>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Called when the print dialog box is closed. See {{event("afterprint")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Called when the print dialog box is opened. See {{event("beforeprint")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>An event handler property for before-unload events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
+ <dd>Called after the window loses focus, such as due to a popup.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
+ <dd>An event handler property for change events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
+ <dd>Called after the ANY mouse button is pressed &amp; released</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt>
+ <dd>Called when a double click is made with ANY mouse button.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
+ <dd>Called after the window is closed</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
+ <dd>Called when the RIGHT mouse button is pressed</dd>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
+ <dd>Called after the window receives or regains focus. See {{event("focus")}} events.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt>
+ <dd>An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt>
+ <dd>Called when the value of an &lt;input&gt; element changes</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
+ <dd>Called when you begin pressing ANY key. See {{event("keydown")}} event.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
+ <dd>Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
+ <dd>Called when you finish releasing ANY key. See {{event("keyup")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt>
+ <dd>An event handler property for {{event("languagechange")}} events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
+ <dd>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.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt>
+ <dd>Called when ANY mouse button is pressed.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
+ <dd>Called continously when the mouse is moved inside the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
+ <dd>Called when the pointer leaves the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
+ <dd>Called when the pointer enters the window</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
+ <dd>Called when ANY mouse button is released</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Called when network connection is lost. See {{event("offline")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Called when network connection is established. See {{event("online")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt>
+ <dd>Called when a back button is pressed.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
+ <dd>Called when a form is reset</dd>
+ <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt>
+ <dd>Called continuously as you are resizing the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
+ <dd>Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked</dd>
+ <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt>
+ <dd>Called when the mouse wheel is rotated around any axis</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
+ <dd>Called after text in an input field is selected</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>Called when there is a change in session storage or local storage. See {{event("storage")}} event</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
+ <dd>Called when a form is submitted</dd>
+ <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt>
+ <dd>An event handler for unhandled {{jsxref("Promise")}} rejection events.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>Called when the user navigates away from the page.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<p>Listen to these events using <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p>
+
+<dl>
+ <dt>{{domxref("Window/error_event", "error")}}</dt>
+ <dd>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.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onerror", "onerror")}} property.</dd>
+ <dt>{{domxref("Window/languagechange_event", "languagechange")}}</dt>
+ <dd>Fired at the global scope object when the user's preferred language changes.<br>
+ Also available via the {{domxref("WindowEventHandlers/onlanguagechange", "onlanguagechange")}} property.</dd>
+ <dt>{{domxref("Window/orientationchange_event", "orientationchange")}}</dt>
+ <dd>Fired when the orientation of the device has changed.<br>
+ Also available via the {{domxref("Window/onorientationchange", "onorientationchange")}} property.</dd>
+ <dt>{{domxref("Window/devicemotion_event", "devicemotion")}}</dt>
+ <dd>Fired at a regular interval, indicating the amount of physical force of acceleration the device is receiving and the rate of rotation, if available.</dd>
+ <dt>{{domxref("Window/deviceorientation_event", "deviceorientation")}}</dt>
+ <dd>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.</dd>
+ <dt>{{domxref("Document/defaultView/resize_event", "resize")}}</dt>
+ <dd>Fired when the window has been resized.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onresize", "onresize")}} property.</dd>
+ <dt>{{domxref("Document/defaultView/storage_event", "storage")}}</dt>
+ <dd>Fired when a storage area (<code>localStorage</code> or <code>sessionStorage</code>) has been modified in the context of another document.<br>
+ Also available via the {{domxref("WindowEventHandlers/onstorage", "onstorage")}} property.</dd>
+</dl>
+
+<h3 id="Animation_events">Animation events</h3>
+
+<dl>
+ <dt>{{domxref("Window/animationcancel_event", "animationcancel")}}</dt>
+ <dd>Fired when an animation unexpectedly aborts.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onanimationcancel", "onanimationcancel")}} property.</dd>
+ <dt>{{domxref("Window/animationend_event", "animationend")}}</dt>
+ <dd>Fired when an animation has completed normally.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onanimationend", "onanimationend")}} property.</dd>
+ <dt>{{domxref("Window/animationiteration_event", "animationiteration")}}</dt>
+ <dd>Fired when an animation iteration has completed.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onanimationiteration", "onanimationiteration")}} property.</dd>
+ <dt>{{domxref("Window/animationstart_event", "animationstart")}}</dt>
+ <dd>Fired when an animation starts.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onanimationstart", "onanimationstart")}} property.</dd>
+</dl>
+
+<h3 id="Clipboard_events">Clipboard events</h3>
+
+<dl>
+ <dt>{{domxref("Window/clipboardchange_event", "clipboardchange")}}</dt>
+ <dd>Fired when the system clipboard content changes.</dd>
+ <dt>{{domxref("Window/copy_event", "copy")}}</dt>
+ <dd>Fired when the user initiates a copy action through the browser's user interface.<br>
+ Also available via the {{domxref("HTMLElement/oncopy", "oncopy")}} property.</dd>
+ <dt>{{domxref("Window/cut_event", "cut")}}</dt>
+ <dd>Fired when the user initiates a cut action through the browser's user interface.<br>
+ Also available via the {{domxref("HTMLElement/oncut", "oncut")}} property.</dd>
+ <dt>{{domxref("Window/paste_event", "paste")}}</dt>
+ <dd>Fired when the user initiates a paste action through the browser's user interface.<br>
+ Also available via the {{domxref("HTMLElement/onpaste", "onpaste")}} property.</dd>
+</dl>
+
+<h3 id="Connection_events">Connection events</h3>
+
+<dl>
+ <dt>{{domxref("Window/offline_event", "offline")}}</dt>
+ <dd>Fired when the browser has lost access to the network and the value of <code>navigator.onLine</code> has switched to <code>false</code>.<br>
+ Also available via the {{domxref("WindowEventHandlers.onoffline", "onoffline")}} property.</dd>
+ <dt>{{domxref("Window/online_event", "online ")}}</dt>
+ <dd>Fired when the browser has gained access to the network and the value of <code>navigator.onLine</code> has switched to <code>true</code>.<br>
+ Also available via the {{domxref("WindowEventHandlers.ononline", "ononline")}} property.</dd>
+</dl>
+
+<h3 id="Focus_events">Focus events</h3>
+
+<dl>
+ <dt>{{domxref("Window/blur_event", "blur")}}</dt>
+ <dd>Fired when an element has lost focus.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onblur", "onblur")}} property.</dd>
+ <dt>{{domxref("Window/focus_event", "focus")}}</dt>
+ <dd>Fired when an element has gained focus.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} property</dd>
+</dl>
+
+<h3 id="Gamepad_events">Gamepad events</h3>
+
+<dl>
+ <dt>{{domxref("Window/gamepadconnected_event", "gamepadconnected")}}</dt>
+ <dd>Fired when the browser detects that a gamepad has been connected or the first time a button/axis of the gamepad is used.<br>
+ Also available via the {{domxref("Window/ongamepadconnected", "ongamepadconnected")}} property.</dd>
+ <dt>{{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}}</dt>
+ <dd>Fired when the browser detects that a gamepad has been disconnected.<br>
+ Also available via the {{domxref("Window/ongamepaddisconnected", "ongamepaddisconnected")}} property</dd>
+</dl>
+
+<h3 id="History_events">History events</h3>
+
+<dl>
+ <dt>{{domxref("Window/hashchange_event", "hashchange")}}</dt>
+ <dd>Fired when the fragment identifier of the URL has changed (the part of the URL beginning with and following the <code>#</code> symbol).<br>
+ Also available via the {{domxref("WindowEventHandlers/onhashchange", "onhashchange")}} property.</dd>
+ <dt>{{domxref("Window/pagehide_event", "pagehide")}}</dt>
+ <dd>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.<br>
+ Also available through the <code><a href="/en-US/docs/Mozilla/Tech/XUL/Attribute/onpagehide">onpagehide</a></code> event handler property.</dd>
+ <dt>{{domxref("Window/pageshow_event", "pageshow")}}</dt>
+ <dd>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.<br>
+ Also available using the <code><a href="/en-US/docs/Mozilla/Tech/XUL/Attribute/onpageshow">onpageshow</a></code> event handler property.</dd>
+ <dt><code>{{domxref("Window/popstate_event", "popstate")}}</code></dt>
+ <dd>Fired when the active history entry changes.<br>
+ Also available using the {{domxref("WindowEventHandlers/onpopstate", "onpopstate")}} event handler property.</dd>
+</dl>
+
+<h3 id="Load_unload_events">Load &amp; unload events</h3>
+
+<dl>
+ <dt>{{domxref("Window/beforeunload_event", "beforeunload")}}</dt>
+ <dd>Fired when the window, the document and its resources are about to be unloaded.<br>
+ Also available via the {{domxref("WindowEventHandlers/onbeforeunload", "onbeforeunload")}} property.</dd>
+ <dt>{{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}</dt>
+ <dd>Fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.</dd>
+ <dt>{{domxref("Window/load_event", "load")}}</dt>
+ <dd>Fired when the whole page has loaded, including all dependent resources such as stylesheets images.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onload", "onload")}} property.</dd>
+ <dt>{{domxref("Window/unload_event", "unload")}}</dt>
+ <dd>Fired when the document or a child resource is being unloaded.<br>
+ Also available via the {{domxref("WindowEventHandlers/onunload", "onunload")}} property.</dd>
+</dl>
+
+<h3 id="Manifest_events">Manifest events</h3>
+
+<dl>
+ <dt>{{domxref("Window/appinstalled_event", "appinstalled")}}</dt>
+ <dd>Fired when the browser has successfully installed a page as an application.<br>
+ Also available via the {{domxref("Window/onappinstalled", "onappinstalled")}} property.</dd>
+ <dt>{{domxref("Window/beforeinstallprompt_event", "beforeinstallprompt")}}</dt>
+ <dd>Fired when a user is about to be prompted to install a web application.<br>
+ Also available via the {{domxref("Window/onbeforeinstallprompt", "onbeforeinstallprompt")}} property.</dd>
+</dl>
+
+<h3 id="Messaging_events">Messaging events</h3>
+
+<dl>
+ <dt>{{domxref("Window/message_event", "message")}}</dt>
+ <dd>Fired when the window receives a message, for example from a call to {{domxref("Window/postMessage", "Window.postMessage()")}} from another browsing context.<br>
+ Also available via the {{domxref("WindowEventHandlers/onmessage", "onmessage")}} property.</dd>
+ <dt>{{domxref("Window/messageerror_event", "messageerror")}}</dt>
+ <dd>Fired when a <code>Window</code> object receives a message that can't be deserialized.<br>
+ Also available via the {{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}} property.</dd>
+</dl>
+
+<h3 id="Print_events">Print events</h3>
+
+<dl>
+ <dt>{{domxref("Window/afterprint_event", "afterprint")}}</dt>
+ <dd>Fired after the associated document has started printing or the print preview has been closed.<br>
+ Also available via the {{domxref("WindowEventHandlers/onafterprint", "onafterprint")}} property.</dd>
+ <dt>{{domxref("Window/beforeprint_event", "beforeprint")}}</dt>
+ <dd>Fired when the associated document is about to be printed or previewed for printing.<br>
+ Also available via the {{domxref("WindowEventHandlers/onbeforeprint", "onbeforeprint")}} property.</dd>
+</dl>
+
+<h3 id="Promise_rejection_events">Promise rejection events</h3>
+
+<dl>
+ <dt>{{domxref("Window/rejectionhandled_event", "rejectionhandled")}}</dt>
+ <dd>Sent every time a JavaScript {{jsxref("Promise")}} is rejected, regardless of whether or not there is a handler in place to catch the rejection.<br>
+ Also available through the {{domxref("WindowEventHandlers/onrejectionhandled", "onrejectionhandled")}} event handler property.</dd>
+ <dt>{{domxref("Window/unhandledrejection_event", "unhandledrejection")}}</dt>
+ <dd>Sent when a JavaScript {{jsxref("Promise")}} is rejected but there is no handler in place to catch the rejection.<br>
+ Also available using the {{domxref("WindowEventHandlers/onunhandledrejection", "onunhandledrejection")}} event handler property.</dd>
+</dl>
+
+<h3 id="Transition_events">Transition events</h3>
+
+<dl>
+ <dt>{{domxref("Window/transitioncancel_event", "transitioncancel")}}</dt>
+ <dd>Fired when a <a href="/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> is canceled.<br>
+ Also available via the {{domxref("GlobalEventHandlers/ontransitioncancel", "ontransitioncancel")}} property.</dd>
+ <dt>{{domxref("Window/transitionend_event", "transitionend")}}</dt>
+ <dd>Fired when a <a href="/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> has completed.<br>
+ Also available via the {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}} property.</dd>
+ <dt>{{domxref("Window/transitionrun_event", "transitionrun")}}</dt>
+ <dd>Fired when a <a href="/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> is first created.<br>
+ Also available via the {{domxref("GlobalEventHandlers/ontransitionrun", "ontransitionrun")}} property.</dd>
+ <dt>{{domxref("Window/transitionstart_event", "transitionstart")}}</dt>
+ <dd>Fired when a <a href="/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> has actually started.<br>
+ Also available via the {{domxref("GlobalEventHandlers/ontransitionstart", "ontransitionstart")}} property.</dd>
+</dl>
+
+<h3 id="WebVR_events">WebVR events</h3>
+
+<dl>
+ <dt>{{domxref("Window/vrdisplayactivate_event", "vrdisplayactivate")}}</dt>
+ <dd>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.<br>
+ Also available via the {{domxref("Window/onvrdisplayactivate", "onvrdisplayactivate")}} property.</dd>
+ <dt>{{domxref("Window/vrdisplayblur_event", "vrdisplayblur")}}</dt>
+ <dd>Fired when presentation to a VR display has been paused for some reason by the browser, OS, or VR hardware.<br>
+ Also available via the {{domxref("Window/onvrdisplayblur", "onvrdisplayblur")}} property.</dd>
+ <dt>{{domxref("Window/vrdisplayconnect_event", "vrdisplayconnect")}}</dt>
+ <dd>Fired when a compatible VR display is connected to the computer.<br>
+ Also available via the {{domxref("Window/onvrdisplayconnect", "onvrdisplayconnect")}} property.</dd>
+ <dt>{{domxref("Window/vrdisplaydeactivate_event", "vrdisplaydeactivate")}}</dt>
+ <dd>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.<br>
+ Also available via the {{domxref("Window/onvrdisplaydeactivate", "onvrdisplaydeactivate")}} property.</dd>
+ <dt>{{domxref("Window/vrdisplaydisconnect_event", "vrdisplaydisconnect")}}</dt>
+ <dd>Fired when a compatible VR display is disconnected from the computer.<br>
+ Also available via the {{domxref("Window/onvrdisplaydisconnect", "onvrdisplaydisconnect")}} property.</dd>
+ <dt>{{domxref("Window/vrdisplayfocus_event", "vrdisplayfocus")}}</dt>
+ <dd>Fired when presentation to a VR display has resumed after being blurred.<br>
+ Also available via the {{domxref("Window/onvrdisplayfocus", "onvrdisplayfocus")}} property.</dd>
+ <dt>{{domxref("Window/vrdisplaypresentchange_event", "vrdisplaypresentchange")}}</dt>
+ <dd>Fired when the presenting state of a VR display changes — i.e. goes from presenting to not presenting, or vice versa.<br>
+ Also available via the {{domxref("Window/onvrdisplaypresentchange", "onvrdisplaypresentchange")}} property.</dd>
+ <dt><font><font>{{domxref ("Window / vrdisplaypointerrestricted_event", "vrdisplaypointerrestricted")}}</font></font></dt>
+ <dd><font><font>ยิงเมื่อป้อนข้อมูลตัวชี้แสดงผล VR ของถูก จำกัด การบริโภคผ่าน</font><font>องค์ประกอบ</font></font><a href="/en-US/docs/Web/API/Pointer_Lock_API"><font><font> pointerlocked </font></font></a><br>
+ <font><font>พร้อมใช้งานผ่านคุณสมบัติ {{domxref ("Window / onvrdisplaypointerrestricted", "onvrdisplaypointerrestricted")}}</font></font></dd>
+ <dt><font><font>{{domxref ("Window / vrdisplaypointerunrestricted_event", "vrdisplaypointerunrestricted")}}</font></font></dt>
+ <dd><font><font>ยิงเมื่อป้อนข้อมูลตัวชี้แสดงผล VR จะไม่ถูก จำกัด การบริโภคผ่าน</font><font>องค์ประกอบ</font></font><a href="/en-US/docs/Web/API/Pointer_Lock_API"><font><font> pointerlocked </font></font></a><br>
+ <font><font>พร้อมใช้งานผ่านคุณสมบัติ {{domxref ("Window / onvrdisplaypointerunrestricted", "onvrdisplaypointerunrestricted")}}</font></font></dd>
+</dl>
+
+<h2 id="อินเทอร์เฟซ"><font><font>อินเทอร์เฟซ</font></font></h2>
+
+<p><font><font>ดู</font></font><a href="/en-US/docs/DOM/DOM_Reference" title="/ en-US / docs / DOM / DOM_Reference"><font><font>DOM </font></font></a><font><font>อ้างอิง</font></font></p>
+
+<h2 id="ความเข้ากันได้ของเบราว์เซอร์"><font><font>ความเข้ากันได้ของเบราว์เซอร์</font></font></h2>
+
+<div class="hidden"><font><font>ตารางความเข้ากันได้ในหน้านี้สร้างขึ้นจากข้อมูลที่มีโครงสร้าง </font><font>หากคุณต้องการมีส่วนร่วมในข้อมูลโปรดดู</font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font>และส่งคำขอดึงข้อมูลมาให้เรา</font></font></div>
+
+<p><font><font>{{Compat ("api.Window")}}</font></font></p>
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
+---
+<div>{{APIRef("XMLHttpRequest") } }</div>
+
+<p><span class="seoSummary"><font>ใช้วัตถุ (XHR) เพื่อโต้ตอบกับเซิร์ฟเวอร์ คุณสามารถดึงข้อมูลจาก URL โดยไม่ต้องทำการฟื้นฟูเต็มหน้า เว็บเพจการปรับปรุงเพียงบางส่วนของหน้าโดยไม่กระทบกับสิ่งที่ผู้ใช้จะทำได้</font><code>XMLHttpRequest</code></span> <code>XMLHttpRequest</code><font> ใช้มากใน {{Glossary("AJAX") } } เขียนโปรแกรม</font></p>
+
+<p>{{InheritanceDiagram (650, 150) } }</p>
+
+<p><font>แม้จะชื่อ สามารถใช้ในการดึงข้อมูลทุกประเภทของข้อมูล XML ไม่เพียง</font><code>XMLHttpRequest</code></p>
+
+<p>ถ้าจำเป็นต้องเกี่ยวข้องกับการได้รับข้อมูลเหตุการณ์หรือข้อความจากเซิร์ฟเวอร์สื่อสารของคุณ ลองใช้<a href="/en-US/docs/Web/API/Server-sent_events">กิจกรรมเซิร์ฟเวอร์ส่ง</a>ผ่านอินเทอร์เฟซ {{domxref("EventSource") } } สำหรับเพล็กซ์การสื่อสาร<a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a>อาจเป็นทางเลือกที่ดี</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}</dt>
+ <dd>The constructor initializes an XMLHttpRequest. It must be called before any other method calls.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface also inherits properties of {{domxref("XMLHttpRequestEventTarget")}} and of {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt id="xmlhttprequest-onreadystatechange">{{domxref("XMLHttpRequest.onreadystatechange")}}</dt>
+ <dd><font>An {{domxref("EventHandler")}} that is called whenever the attribute changes.</font><code>readyState</code></dd>
+ <dt id="xmlhttprequest-readystate">{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}</dt>
+ <dd><font>Returns an , the state of the request.</font><code>unsigned short</code></dd>
+ <dt>{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}</dt>
+ <dd>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.</dd>
+ <dt id="xmlhttprequest-responsetext">{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}</dt>
+ <dd><font>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.</font><code>null</code></dd>
+ <dt id="xmlhttprequest-responsetype">{{domxref("XMLHttpRequest.responseType")}}</dt>
+ <dd>Is an enumerated value that defines the response type.</dd>
+ <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}</dt>
+ <dd>Returns the serialized URL of the response or the empty string if the URL is null.</dd>
+ <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}</dt>
+ <dd><font>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.</font><code>null</code></dd>
+ <dt id="xmlhttprequest-status">{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}</dt>
+ <dd><font>Returns an with the status of the response of the request.</font><code>unsigned short</code></dd>
+ <dt id="xmlhttprequest-statustext">{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}</dt>
+ <dd><font>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).</font><code>200 OK</code></dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> According to the HTTP/2 specification (<a href="https://http2.github.io/http2-spec/#rfc.section.8.1.2.4">8.1.2.4</a> <a href="https://http2.github.io/http2-spec/#HttpResponse">Response Pseudo-Header Fields</a>), HTTP/2 does not define a way to carry the version or reason phrase that is included in an HTTP/1.1 status line.</p>
+</div>
+
+<dl>
+ <dt id="xmlhttprequest-timeout">{{domxref("XMLHttpRequest.timeout")}}</dt>
+ <dd><font>Is an representing the number of milliseconds a request can take before automatically being terminated.</font><code>unsigned long</code></dd>
+ <dt id="xmlhttprequesteventtarget-ontimeout">{{domxref("XMLHttpRequestEventTarget.ontimeout")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} that is called whenever the request times out. {{gecko_minversion_inline("12.0")}}</dd>
+ <dt id="xmlhttprequest-upload">{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}</dt>
+ <dd>Is an {{domxref("XMLHttpRequestUpload")}}, representing the upload process.</dd>
+ <dt id="xmlhttprequest-withcredentials">{{domxref("XMLHttpRequest.withCredentials")}}</dt>
+ <dd><font>Is a {{domxref("Boolean")}} that indicates whether or not cross-site requests should be made using credentials such as cookies or authorization headers.</font><code>Access-Control</code></dd>
+</dl>
+
+<h3 id="Non-standard_properties">Non-standard properties</h3>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}</dt>
+ <dd>Is a {{Interface("nsIChannel")}}. The channel used by the object when performing the request.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}</dt>
+ <dd>Is a boolean. If true, the request will be sent without cookie and authentication headers.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}</dt>
+ <dd>Is a boolean. If true, the same origin policy will not be enforced on the request.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozBackgroundRequest")}}</dt>
+ <dd>Is a boolean. It indicates whether or not the object represents a background service request.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}</dt>
+ <dd>{{jsxref("ArrayBuffer")}}. The response to the request, as a JavaScript typed array.</dd>
+ <dt>{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}</dt>
+ <dd><font><strong>This Gecko-only feature, a boolean, was removed in Firefox/Gecko 22.</strong> Please use <a href="/en-US/docs/Web/API/Server-sent_events">Server-Sent Events</a>, <a href="/en-US/docs/Web/API/WebSockets_API">Web Sockets</a>, or from progress events instead.</font><code>responseText</code></dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<p><code>onreadystatechange</code><font> as a property of the instance is supported in all browsers.</font><code>XMLHttpRequest</code></p>
+
+<p><font>Since then, a number of additional event handlers have been implemented in various browsers (, , , etc.). See <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</font><code>onload</code><code>onerror</code><code>onprogress</code></p>
+
+<p><font>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.</font><code>XMLHttpRequest</code><code>on*</code></p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.abort()")}}</dt>
+ <dd>Aborts the request if it has already been sent.</dd>
+ <dt>{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}</dt>
+ <dd><font>Returns all the response headers, separated by {{Glossary("CRLF")}}, as a string, or if no response has been received.</font><code>null</code></dd>
+ <dt>{{domxref("XMLHttpRequest.getResponseHeader()")}}</dt>
+ <dd><font>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.</font><code>null</code></dd>
+ <dt>{{domxref("XMLHttpRequest.open()")}}</dt>
+ <dd>Initializes a request. This method is to be used from JavaScript code; to initialize a request from native code, use <a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#openRequest()"><code>openRequest()</code></a> instead.</dd>
+ <dt>{{domxref("XMLHttpRequest.overrideMimeType()")}}</dt>
+ <dd>Overrides the MIME type returned by the server.</dd>
+ <dt>{{domxref("XMLHttpRequest.send()")}}</dt>
+ <dd>Sends the request. If the request is asynchronous (which is the default), this method returns as soon as the request is sent.</dd>
+ <dt>{{domxref("XMLHttpRequest.setRequestHeader()")}}</dt>
+ <dd><font>Sets the value of an HTTP request header. You must call after <a href="#open"><code>open()</code></a>, but before .</font><code>setRequestHeader()</code><code>send()</code></dd>
+</dl>
+
+<h3 id="Non-standard_methods">Non-standard methods</h3>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.init()")}}</dt>
+ <dd>Initializes the object for use from C++ code.</dd>
+</dl>
+
+<div class="warning"><strong>Warning:</strong> This method must <em>not</em> be called from JavaScript.</div>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.openRequest()")}}</dt>
+ <dd><font>Initializes a request. This method is to be used from native code; to initialize a request from JavaScript code, use <a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open()"><code>open()</code></a> instead. See the documentation for .</font><code>open()</code></dd>
+ <dt>{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}</dt>
+ <dd><font>A variant of the method that sends binary data.</font><code>send()</code></dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest/abort_event", "abort")}}</dt>
+ <dd>Fired when a request has been aborted, for example because the program called {{domxref("XMLHttpRequest.abort()")}}.<br>
+ Also available via the {{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}} property.</dd>
+ <dt>{{domxref("XMLHttpRequest/error_event", "error")}}</dt>
+ <dd>Fired when the request encountered an error.<br>
+ Also available via the {{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}} property.</dd>
+ <dt>{{domxref("XMLHttpRequest/load_event", "load")}}</dt>
+ <dd>Fired when an {{domxref("XMLHttpRequest")}} transaction completes successfully.<br>
+ Also available via the {{domxref("XMLHttpRequestEventTarget/onload", "onload")}} property.</dd>
+ <dt>{{domxref("XMLHttpRequest/loadend_event", "loadend")}}</dt>
+ <dd>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")}}).<br>
+ Also available via the {{domxref("XMLHttpRequestEventTarget/onloadend", "onloadend")}} property.</dd>
+ <dt>{{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}</dt>
+ <dd>Fired when a request has started to load data.<br>
+ Also available via the {{domxref("XMLHttpRequestEventTarget/onloadstart", "onloadstart")}} property.</dd>
+ <dt>{{domxref("XMLHttpRequest/progress_event", "progress")}}</dt>
+ <dd>Fired periodically when a request receives more data.<br>
+ Also available via the {{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}} property.</dd>
+ <dt>{{domxref("XMLHttpRequest/timeout_event", "timeout")}}</dt>
+ <dd>Fired when progress is terminated due to preset time expiring.<br>
+ Also available via the {{domxref("XMLHttpRequestEventTarget/ontimeout", "ontimeout")}} property.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Live standard, latest version</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<div>{{Compat("api.XMLHttpRequest")}}</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("XMLSerializer")}}: Serializing a DOM tree into XML</li>
+ <li><font>MDN tutorials covering :</font><code>XMLHttpRequest</code>
+  <ul>
+   <li><a href="/en-US/docs/AJAX/Getting_Started">Ajax — Getting Started</a></li>
+   <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+   <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — New Tricks in XMLHttpRequest2</a></li>
+</ul>
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
+---
+<p>{{APIRef("WebXR Device API")}}</p>
+
+<p><span class="seoSummary">The <code><strong>XRReferenceSpaceType</strong></code> enumerated type defines the strings which identify the types of reference spaces supported by WebXR.</span> This type is used when calling the {{domxref("XRSession.requestReferenceSpace", "requestReferenceSpace()")}} method to obtain a reference space for an {{domxref("XRSession")}}.</p>
+
+<h2 id="Values">Values</h2>
+
+<p>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.</p>
+
+<div id="value-list">
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">XRReferenceSpaceType</th>
+   <th scope="col">Description</th>
+   <th scope="col">Interface</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a id="bounded-floor" name="bounded-floor"><code>bounded-floor</code></a></td>
+   <td>Similar to the <code>local</code> type, except the user is not expected to move outside a predetermined boundary, given by the {{domxref("XRBoundedReferenceSpace.boundsGeometry", "boundsGeometry")}} in the returned object.</td>
+   <td>{{domxref("XRBoundedReferenceSpace")}}</td>
+  </tr>
+  <tr>
+   <td><a id="local" name="local"><code>local</code></a></td>
+   <td>
+    <p>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.</p>
+
+    <p>For devices with six degrees of freedom (6DoF) tracking, the <code>local</code> reference space tries to keep the origin stable relative to the environment.</p>
+   </td>
+   <td>{{domxref("XRReferenceSpace")}}</td>
+  </tr>
+  <tr>
+   <td><a id="local-floor" name="local-floor"><code>local-floor</code></a></td>
+   <td>Similar to the <code>local</code> 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).</td>
+   <td>{{domxref("XRReferenceSpace")}}</td>
+  </tr>
+  <tr>
+   <td><a id="unbounded" name="unbounded"><code>unbounded</code></a></td>
+   <td>A 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.</td>
+   <td>{{domxref("XRReferenceSpace")}}</td>
+  </tr>
+  <tr>
+   <td><a id="viewer" name="viewer"><code>viewer</code></a></td>
+   <td><font><font>พื้นที่ติดตามที่แหล่งกำเนิดดั้งเดิมติดตามตำแหน่งและทิศทางของผู้ดู </font><font>สิ่งนี้ใช้สำหรับสภาพแวดล้อมที่ผู้ใช้สามารถย้ายไปรอบ ๆ ทางกายภาพและได้รับการสนับสนุนโดย {{domxref ("XRSession")}} ทั้งหมดทั้งที่ดื่มด่ำและอินไลน์แม้ว่าจะมีประโยชน์มากที่สุดสำหรับเซสชันอินไลน์ </font><font>มันมีประโยชน์อย่างยิ่งเมื่อกำหนดระยะห่างระหว่างวิวเวอร์กับอินพุตหรือเมื่อทำงานกับออฟเซ็ตเว้นวรรค </font><font>มิฉะนั้นโดยทั่วไปหนึ่งในประเภทพื้นที่อ้างอิงอื่น ๆ จะถูกใช้บ่อยกว่า</font></font></td>
+   <td><font><font>{{domxref ( "XRReferenceSpace")}}</font></font></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="ข้อมูลจำเพาะ"><font><font>ข้อมูลจำเพาะ</font></font></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><font><font>สเปค</font></font></th>
+   <th scope="col"><font><font>สถานะ</font></font></th>
+   <th scope="col"><font><font>คิดเห็น</font></font></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><font><font>{{SpecName ( 'WebXR', '# enumdef-xrreferencespacetype', 'XRReferenceSpaceType')}}</font></font></td>
+   <td><font><font>{{Spec2 ( 'WebXR')}}</font></font></td>
+   <td><font><font>คำจำกัดความเบื้องต้น</font></font></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ความเข้ากันได้ของเบราว์เซอร์"><font><font>ความเข้ากันได้ของเบราว์เซอร์</font></font></h2>
+
+<p><font><font>{{compat ( "api.XRReferenceSpaceType")}}</font></font></p>
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
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary"><strong>Cascading Style Sheets</strong> (<strong>CSS</strong>) is a <a href="/en-US/docs/DOM/stylesheet">stylesheet</a> language used to describe the presentation of a document written in <a href="/en-US/docs/Web/HTML" title="HyperText Markup Language">HTML</a></span> or <a href="/en-US/docs/XML_introduction">XML</a> (including XML dialects such as <a href="/en-US/docs/Web/SVG">SVG</a>, <a href="/en-US/docs/Web/MathML">MathML</a> or {{Glossary("XHTML", "", 1)}}). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.</p>
+
+<p>CSS is one of the core languages of the <strong>open Web</strong> and is standardized across Web browsers according to the <a class="external" href="http://w3.org/Style/CSS/#specs">W3C specification</a>. Developed in levels, CSS1 is now obsolete, CSS2.1 is a recommendation, and <a href="/en-US/docs/Web/CSS/CSS3" title="CSS3">CSS3</a>, now split into smaller modules, is progressing on the standardization track.</p>
+
+<section id="sect1">
+<ul class="card-grid">
+ <li><span>CSS Introduction</span>
+
+  <p>If you're new to web development, be sure to read our <a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a> article to learn what CSS is and how to use it.</p>
+ </li>
+ <li><span>CSS Tutorials</span>
+  <p>Our <a href="/en-US/docs/Learn/CSS">CSS learning area</a> contains a wealth of tutorials to take you from beginner level to proficiency, covering all the fundamentals.</p>
+ </li>
+ <li><span>CSS Reference</span>
+  <p>Our <a href="/en-US/docs/Web/CSS/Reference">exhaustive CSS reference</a> for seasoned Web developers describes every property and concept of CSS.</p>
+ </li>
+</ul>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Tutorials">Tutorials</h2>
+
+<p>Our <a href="/en-US/docs/Learn/CSS">CSS Learning Area</a> features multiple modules that teach CSS from the ground up — no previous knowledge required.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></dt>
+ <dd>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.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a></dt>
+ <dd>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.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt>
+ <dd>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.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt>
+ <dd>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.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Tools" id="Reference">Reference</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Reference">CSS reference</a>: This exhaustive reference for seasoned Web developers describes every property and concept of CSS.</li>
+ <li>CSS key concepts:
+  <ul>
+   <li>The <a href="/en-US/docs/Web/CSS/Syntax">syntax and forms of the language</a></li>
+   <li><a href="/en-US/docs/Web/CSS/Specificity">Specificity</a>, <a href="/en-US/docs/Web/CSS/Inheritance">inheritance</a> and <a href="/en-US/docs/Web/CSS/Cascade">the Cascade</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS units and values</a></li>
+   <li><a href="/en-US/docs/Web/CSS/box_model">Box model</a> and <a href="/en-US/docs/Web/CSS/margin_collapsing">margin collapse</a></li>
+   <li>The <a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block">containing block</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context" title="The stacking context">Stacking</a> and <a href="/en-US/docs/Web/CSS/block_formatting_context" title="block formatting context">block-formatting</a> contexts</li>
+   <li><a href="/en-US/docs/Web/CSS/initial_value">Initial</a>, <a href="/en-US/docs/Web/CSS/computed_value">computed</a>, <a href="/en-US/docs/Web/CSS/used_value">used</a>, and <a href="/en-US/docs/Web/CSS/actual_value">actual</a> values</li>
+   <li><a href="/en-US/docs/Web/CSS/Shorthand_properties">CSS shorthand properties</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/Media_Queries">Media queries</a></li>
+   <li><a href="/en-US/docs/Web/CSS/animation">Animation</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 class="Tools" id="Cookbook">Cookbook</h2>
+
+<p>The <a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS layout cookbook</a> 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.</p>
+
+<h2 class="Tools" id="Tools_for_CSS_development">Tools for CSS development</h2>
+
+<ul>
+ <li>You can use the <a class="external" href="https://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> to check if your CSS is valid. This is an invaluable debugging tool.</li>
+ <li><a href="/en-US/docs/Tools">Firefox Developer Tools</a> lets you view and edit a page's live CSS via the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a> and <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a> tools.</li>
+ <li>The <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer extension</a> for Firefox lets you track and edit live CSS on watched sites.</li>
+ <li>The Web community has created various other <a href="/en-US/docs/Web/CSS/Tools">miscellaneous CSS tools</a> for you to use.</li>
+</ul>
+
+<h2 id="Meta_bugs">Meta bugs</h2>
+
+<ul>
+ <li>Firefox: {{bug(1323667)}}</li>
+</ul>
+</div>
+</div>
+</section>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Demos_of_open_web_technologies#CSS">CSS demos</a>: Get a creative boost by exploring examples of the latest CSS technologies in action.</li>
+ <li>Web languages to which CSS is often applied: <a href="/en-US/docs/Web/HTML">HTML</a>, <a href="/en-US/docs/Web/SVG">SVG</a>, <a href="/en-US/docs/Web/MathML">MathML</a>, {{Glossary("XHTML", "", 1)}}, and <a href="/en-US/docs/XML_introduction">XML</a>.</li>
+ <li>Mozilla technologies that make extensive use of CSS: <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a>, <a href="/en-US/docs/Mozilla/Firefox">Firefox</a>, and <a href="/en-US/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/en-US/docs/Mozilla/Add-ons">extensions</a> and <a href="/en-US/docs/Mozilla/Add-ons/Themes">themes</a>.</li>
+ <li><a href="https://lists.mozilla.org/listinfo/dev-tech-layout">Mozilla mailing list</a></li>
+ <li><a href="Stack Overflow|http://stackoverflow.com/questions/tagged/css">Stack Overflow questions about CSS</a></li>
+</ul>
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
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="สาระสำคัญ">สาระสำคัญ</h2>
+
+<p>คุณสมบัติ CSS <strong><code>margin</code></strong> ใช้ในการตั้งระยะขอบกั้นทั้งสี่ด้าน ซึ่งมีรูปย่อเพื่อหลีกเลี่ยงการตั้งแต่ละด้านที่แยกออกไปด้วยคุณสมบัติ margin อื่นๆ คือ: {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }} และ {{ Cssxref("margin-left") }}.</p>
+
+<p>อนุญาตให้ใช้ค่าที่ติดลบได้</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="ไวยากรณ์">ไวยากรณ์</h2>
+
+<pre class="brush:css">/* นำไปใช้กับสี่ด้าน */
+margin: 1em;
+
+/* ด้านแนวตั้ง | ด้านแนวนอน */
+margin: 5% auto;
+
+/* ด้านบน | ด้านแนวนอน | ด้านล่าง */
+margin: 1em auto 2em;
+
+/* ด้านบน | ด้านขวา | ด้านล่าง | ด้านซ้าย */
+margin: 2px 1em 0 auto;
+
+/* ค่า Global */
+margin: inherit;
+margin: initial;
+margin: unset;
+</pre>
+
+<h3 id="ค่า">ค่า</h3>
+
+<p>ยอมรับทั้งหนึ่ง สอง สาม หรือสี่ค่า ดังต่อไปนี้:</p>
+
+<dl>
+ <dt><code>&lt;ความยาว&gt;</code></dt>
+ <dd>กำหนดความกว้างคงที่ อนุญาตให้ใช้ค่าที่ติดลบได้ ดูที่ {{cssxref("&lt;length&gt;")}} สำหรับหน่วยวัดที่ใช้ได้</dd>
+ <dt><code>&lt;ร้อยละ&gt;</code></dt>
+ <dd>ค่า {{cssxref("&lt;percentage&gt;")}} ที่สัมพันธ์กับ <strong>ความกว้าง</strong> ของภายในบล็อกนั้น อนุญาตให้ใช้ค่าที่ติดลบได้</dd>
+ <dt><code>auto</code></dt>
+ <dd><code>auto จะถูกแทนที่ด้วยบางค่าที่เหมาะสม</code> เช่น สามารถใช้ในการจัดแนวบล็อก <code>div ลูกให้อยู่</code>กึ่งกลาง<font face="Consolas, Liberation Mono, Courier, monospace">ตามแนวนอนภายใน </font>div  แม่ได้ <code>{ width:50%;  margin:0 auto; }</code> </dd>
+</dl>
+
+<ul>
+ <li><strong>หนึ่ง</strong> ค่าจะถูกนำไปใช้กับ<strong>ทั้งสี่ด้าน</strong></li>
+ <li><strong>สอง</strong> ค่าจะถูกนำไปใช้กับ <strong>ด้านบนและด้านล่าง </strong>และตามด้วย <strong>ด้านซ้ายและด้านขวา</strong> </li>
+ <li><strong>สาม</strong> ค่าจะถูกนำไปใช้กับ <strong>ด้านบน </strong>ตามด้วย<strong>ด้านซ้ายและด้านขวา</strong> และตามด้วย <strong>ด้านล่าง</strong></li>
+ <li><strong>สี่</strong> ค่าจะถูกนำไปใช้กับ <strong>ด้านบน</strong> <strong>ด้านขวา</strong> <strong>ด้านล่าง</strong> และ<strong>ด้านซ้าย</strong> ตามลำดับ (ทวนเข็มนาฬิกา)</li>
+</ul>
+
+<h3 id="ไวยากรณ์ทั่วไป">ไวยากรณ์ทั่วไป</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="ตัวอย่าง">ตัวอย่าง</h2>
+
+<h3 id="ตัวอย่างอย่างง่าย">ตัวอย่างอย่างง่าย</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="ex1"&gt;
+  margin:     auto;
+  background: gold;
+  width:      66%;
+&lt;/div&gt;
+&lt;div class="ex2"&gt;
+  margin:     20px 0 0 -20px;
+  background: gold;
+  width:      66%;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight:[2,7]">.ex1 {
+  margin: auto;
+  background: gold;
+  width: 66%;
+}
+.ex2 {
+  margin: 20px 0px 0 -20px;
+  background: gold;
+  width: 66%;
+}</pre>
+
+<p>{{ EmbedLiveSample('Simple_example') }}</p>
+
+<h3 id="ตัวอย่างอื่นๆ">ตัวอย่างอื่นๆ</h3>
+
+<pre class="brush: css">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 */
+</pre>
+
+<h2 id="การจัดกึ่งกลางตามแนวนอนด้วย_margin_0_auto">การจัดกึ่งกลางตามแนวนอนด้วย <code>margin: 0 auto;</code></h2>
+
+<p>เพื่อทำให้บางสิ่งอยู่กึ่งกลางตามแนวนอนในเบราเซอร์สมัยใหม่ จะใช้ <code><a href="/en-US/docs/Web/CSS/display">display</a>: flex; <a href="/en-US/docs/Web/CSS/justify-content">justify-content</a>: center;</code> .</p>
+
+<p>อย่างไรก็ตาม เบราเซอร์เก่าเช่น IE8-9 ยังไม่พร้อมใช้งาน ในการเรียงให้กึ่งกลางภายในอิลิเมนต์แม่ ให้ใช้ <code>margin: 0 auto;</code></p>
+
+<h2 id="ข้อกำหนด">ข้อกำหนด</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">ข้อกำหนด</th>
+   <th scope="col">สถานะ</th>
+   <th scope="col">ความเห็น</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Box', '#margin', 'margin') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>ไม่มีการเปลี่ยนแปลงอย่างมีนัยสำคัญ</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>กำหนดให้ <code>margin</code> สามารถเคลื่อนไหวได้</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Removes its effect on inline elements.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#margin', 'margin') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>กำหนดนินามตั้งต้น</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ความกันได้ของเบราเซอร์">ความกันได้ของเบราเซอร์</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>คุณลักษณะ</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>การรองรับเบื้องต้น</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>ค่า auto</code></td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>6.0 (โหมดจำกัด)</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>คุณลักษณะ</th>
+  </tr>
+ </tbody>
+</table>
+
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>การรองรับเบื้องต้น</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="ดูเพิ่มเติม">ดูเพิ่มเติม</h2>
+
+<ul>
+ <li><a class="internal" href="/en/CSS/margin_collapsing" title="en/CSS/margin collapsing">การยุบระยะขอบกั้น</a></li>
+</ul>
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
+---
+<p><span class="seoSummary"><font><font>เว็บไซต์และแอปพลิเคชันมักจะต้องนำเสนอกราฟิกเช่นรูปภาพ </font></font></span><font><font>รูปภาพสแตติกสามารถแสดงได้อย่างง่ายดายโดยใช้องค์ประกอบ {{HTMLElement ("img")}} หรือโดยการตั้งค่าพื้นหลังขององค์ประกอบ HTML โดยใช้คุณสมบัติ {{cssxref ("background-image")}}} </font><font>นอกจากนี้คุณยังสามารถสร้างกราฟิกได้ทันทีหรือจัดการรูปภาพตามความเป็นจริง </font></font><span class="seoSummary"><font><font>บทความเหล่านี้ให้ข้อมูลเชิงลึกเกี่ยวกับวิธีที่คุณสามารถทำได้</font></font></span></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="กราฟิก_2D"><font><font>กราฟิก 2D</font></font></h2>
+
+<dl>
+ <dt><a href="/en-US/docs/HTML/Canvas"><font><font>ผ้าใบ</font></font></a></dt>
+ <dd><font><font>องค์ประกอบ {{HTMLElement ("canvas")}} จัดเตรียม API เพื่อวาดกราฟิก 2D โดยใช้ JavaScript</font></font></dd>
+ <dt><a href="/en-US/docs/Web/SVG"><font><font>SVG</font></font></a></dt>
+ <dd><font><font>Scalable Vector Graphics (SVG) ช่วยให้คุณใช้เส้นเส้นโค้งและรูปทรงเรขาคณิตอื่น ๆ เพื่อแสดงผลกราฟิก </font><font>ด้วยเวกเตอร์คุณสามารถสร้างภาพที่ปรับขนาดได้อย่างสมบูรณ์ในทุกขนาด</font></font></dd>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/Graphics"><font><font>ดูทั้งหมด...</font></font></a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="กราฟิก_3_มิติ"><font><font>กราฟิก 3 มิติ</font></font></h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/WebGL"><font><font>WebGL</font></font></a></dt>
+ <dd><font><font>คำแนะนำในการเริ่มต้นใช้งาน WebGL ซึ่งเป็นกราฟิก 3D API สำหรับเว็บ </font><font>เทคโนโลยีนี้ช่วยให้คุณใช้ OpenGL ES มาตรฐานในเนื้อหาเว็บ</font></font></dd>
+</dl>
+
+<h2 id="วีดีโอ"><font><font>วีดีโอ</font></font></h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video"><font><font>ใช้เสียงและวิดีโอ HTML5</font></font></a></dt>
+ <dd><font><font>การฝังวิดีโอและ / หรือเสียงในหน้าเว็บและควบคุมการเล่น</font></font></dd>
+ <dt><a href="/en-US/docs/WebRTC"><font><font>WebRTC</font></font></a></dt>
+ <dd><font><font>RTC ใน WebRTC ย่อมาจาก Real-Time Communications ซึ่งเป็นเทคโนโลยีที่เปิดใช้งานการสตรีมเสียง / วิดีโอและการแบ่งปันข้อมูลระหว่างเบราว์เซอร์ไคลเอ็นต์</font></font></dd>
+</dl>
+</div>
+</div>
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
+---
+<p>These articles provide how-to information to help you make use of specific technologies and APIs.</p>
+<div class="note">
+ <p><strong>Note:</strong> This page is going to be a mess for a little while until we finish migrating content. Our apologies!</p>
+</div>
+<div>
+ {{LandingPageListSubpages}}</div>
+<dl>
+ <dt>
+  <a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt>
+ <dd>
+  JavaScript is the powerful scripting language used to create applications for the Web.</dd>
+</dl>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web Developer Reference</a></li>
+</ul>
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
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing</a> ({{Glossary("CORS")}}) is a standard that allows a server to relax the <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>. This is used to explicitly allow some cross-origin requests while rejecting others.</span> 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.</p>
+
+<p>If the CORS configuration isn't setup correctly, the browser console will present an error like <code>"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite"</code> 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.</p>
+
+<h2 id="Identifying_the_issue">Identifying the issue</h2>
+
+<p>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:</p>
+
+<ol>
+ <li>Navigate to the web site or web app in question and open the <a href="/en-US/docs/Tools">Developer Tools</a>.</li>
+ <li>Now try to reproduce the failing transaction and check the <a href="/en-US/docs/Tools/Web_Console">console</a> if you are seeing a CORS violation error message. It will probably look like this:</li>
+</ol>
+
+<p><img alt="Firefox console showing CORS error" src="https://mdn.mozillademos.org/files/16050/cors-error2.png"></p>
+
+<p>The text of the error message will be something similar to the following:</p>
+
+<pre>Cross<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">-Origin Request Blocked: The Same Origin Policy disallows
+reading the remote resource at <em>https://some-url-here</em>. (<em>Reason:
+additional information here</em>).</span></span></span></pre>
+
+<div class="note">
+<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><strong>Note:</strong> For security reasons, specifics about what went wrong with a CORS request <em>are not available to JavaScript code</em>. 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.</span></span></span></p>
+</div>
+
+<h2 id="CORS_error_messages">CORS error messages</h2>
+
+<p>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.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDisabled">Reason: CORS disabled</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed">Reason: CORS request did not succeed</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSOriginHeaderNotAdded">Reason: CORS header ‘Origin’ cannot be added</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSExternalRedirectNotAllowed">Reason: CORS request external redirect not allowed</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp">Reason: CORS request not http</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin">Reason: CORS header ‘Access-Control-Allow-Origin’ missing</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin">Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘xyz’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials">Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMethodNotFound">Reason: Did not find method in CORS header ‘Access-Control-Allow-Methods’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowCredentials">Reason: expected ‘true’ in CORS header ‘Access-Control-Allow-Credentials’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed">Reason: CORS preflight channel did not succeed</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowMethod">Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Methods’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowHeader">Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight">Reason: missing token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMultipleAllowOriginNotAllowed">Reason: Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed</a></li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Glossary: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Server-side CORS settings</a></li>
+ <li><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS enabled image</a></li>
+ <li><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a></li>
+ <li><a href="https://www.test-cors.org">https://www.test-cors.org</a> – page to test CORS requests</li>
+</ul>
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
+---
+<p><span class="seoSummary">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.</span> A web application makes a <strong>cross-origin HTTP request</strong> when it requests a resource that has a different origin (domain, protocol, and port) than its own origin.</p>
+
+<p>An example of a cross-origin request: The frontend JavaScript code for a web application served from <code>http://domain-a.com</code> uses {{domxref("XMLHttpRequest")}} to make a request for <code>http://api.domain-b.com/data.json</code>.</p>
+
+<p>For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. For example, <code>XMLHttpRequest</code> and the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> follow the <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>. 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.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14295/CORS_principle.png" style="height: 305px; width: 440px;"></p>
+
+<p>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 <code>XMLHttpRequest</code> or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> to help mitigate the risks of cross-origin HTTP requests.</p>
+
+<h2 id="Who_should_read_this_article">Who should read this article?</h2>
+
+<p>Everyone, really.</p>
+
+<p>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 <a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">cross-origin sharing from a server perspective (with PHP code snippets)</a> is supplementary reading.</p>
+
+<h2 id="What_requests_use_CORS">What requests use CORS?</h2>
+
+<p>This <a class="external" href="https://fetch.spec.whatwg.org/#http-cors-protocol">cross-origin sharing standard</a> is used to enable cross-site HTTP requests for:</p>
+
+<ul>
+ <li>Invocations of the {{domxref("XMLHttpRequest")}} or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> APIs in a cross-site manner, as discussed above.</li>
+ <li>Web Fonts (for cross-domain font usage in <code>@font-face</code> within CSS), <a class="external" href="https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements">so that servers can deploy TrueType fonts that can only be cross-site loaded and used by web sites that are permitted to do so.</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">WebGL textures</a>.</li>
+ <li>Images/video frames drawn to a canvas using {{domxref("CanvasRenderingContext2D.drawImage()", "drawImage()")}}.</li>
+</ul>
+
+<p>This article is a general discussion of Cross-Origin Resource Sharing and includes a discussion of the necessary HTTP headers.</p>
+
+<h2 id="Functional_overview">Functional overview</h2>
+
+<p>The Cross-Origin Resource Sharing standard works by adding new <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a> 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 <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME types</a>), 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 <a href="/en-US/docs/Web/HTTP/Cookies">Cookies</a> and HTTP Authentication data) should be sent with requests.</p>
+
+<p>CORS failures result in errors, but for security reasons, specifics about what went wrong <em>are not available to JavaScript code</em>. 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.</p>
+
+<p>Subsequent sections discuss scenarios, as well as provide a breakdown of the HTTP headers used.</p>
+
+<h2 id="Examples_of_access_control_scenarios">Examples of access control scenarios</h2>
+
+<p>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.</p>
+
+<p>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 <a class="external" href="http://arunranga.com/examples/access-control/">http://arunranga.com/examples/access-control/</a>, and will work in browsers that support cross-site <code>XMLHttpRequest</code>.</p>
+
+<p>A discussion of Cross-Origin Resource Sharing from a server perspective (including PHP code snippets) can be found in the <a class="internal" href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Server-Side Access Control (CORS)</a> article.</p>
+
+<h3 id="Simple_requests">Simple requests</h3>
+
+<p>Some requests don’t trigger a <a href="#Preflighted_requests">CORS preflight</a>. 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 <a href="#Preflighted_requests">CORS preflight</a>—a so-called “simple request”—is one that meets all the following conditions:</p>
+
+<ul>
+ <li>The only allowed methods are:
+  <ul>
+   <li>{{HTTPMethod("GET")}}</li>
+   <li>{{HTTPMethod("HEAD")}}</li>
+   <li>{{HTTPMethod("POST")}}</li>
+  </ul>
+ </li>
+ <li>Apart from the headers set automatically by the user agent (for example, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}}, or <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">any of the other headers with names defined in the Fetch spec as a “forbidden header name”</a>), the only headers which are allowed to be manually set are <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">those which the Fetch spec defines as being a “CORS-safelisted request-header”</a>, which are:
+  <ul>
+   <li>{{HTTPHeader("Accept")}}</li>
+   <li>{{HTTPHeader("Accept-Language")}}</li>
+   <li>{{HTTPHeader("Content-Language")}}</li>
+   <li>{{HTTPHeader("Content-Type")}} (but note the additional requirements below)</li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li>
+   <li>{{HTTPHeader("Downlink")}}</li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li>
+  </ul>
+ </li>
+ <li>The only allowed values for the {{HTTPHeader("Content-Type")}} header are:
+  <ul>
+   <li><code>application/x-www-form-urlencoded</code></li>
+   <li><code>multipart/form-data</code></li>
+   <li><code>text/plain</code></li>
+  </ul>
+ </li>
+ <li>No event listeners are registered on any {{domxref("XMLHttpRequestUpload")}} object used in the request; these are accessed using the {{domxref("XMLHttpRequest.upload")}} property.</li>
+ <li>No {{domxref("ReadableStream")}} object is used in the request.</li>
+</ul>
+
+<div class="note"><strong>Note:</strong> 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.</div>
+
+<div class="note"><strong>Note:</strong> 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: <a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>. No other browsers implement those extra restrictions, because they’re not part of the spec.</div>
+
+<p>For example, suppose web content on domain <code class="plain">http://foo.example</code> wishes to invoke content on domain <code class="plain">http://bar.other</code>. Code of this sort might be used within JavaScript deployed on foo.example:</p>
+
+<pre class="brush: js" id="line1">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();
+  }
+}
+</pre>
+
+<p>This will lead to a simple exchange between the client and the server, using CORS headers to handle the privileges:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14293/simple_req.png" style="height: 224px; width: 521px;"></p>
+
+<p>Let us look at what the browser will send to the server in this case, and let's see how the server responds:</p>
+
+<pre class="brush: shell;highlight:[10,16]">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]
+</pre>
+
+<p>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 <code class="plain">http://foo.example</code>.</p>
+
+<p>Lines 13 - 22 show the HTTP response from the server on domain <code class="plain">http://bar.other</code>. 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 <code>Access-Control-Allow-Origin: *</code> which means that the resource can be accessed by <strong>any</strong> domain in a cross-site manner. If the resource owners at <code class="plain">http://bar.other</code> wished to restrict access to the resource to requests only from <code class="plain">http://foo.example</code>, they would send back:</p>
+
+<p><code class="plain">Access-Control-Allow-Origin: http://foo.example</code></p>
+
+<p>Note that now, no domain other than <code class="plain">http://foo.example</code> (identified by the ORIGIN: header in the request, as in line 10 above) can access the resource in a cross-site manner. The <code>Access-Control-Allow-Origin</code> header should contain the value that was sent in the request's <code>Origin</code> header.</p>
+
+<h3 id="Preflighted_requests">Preflighted requests</h3>
+
+<p>Unlike <a href="#Simple_requests">“simple requests” (discussed above)</a>, "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.</p>
+
+<p>In particular, a request is preflighted if <strong>any of the following conditions</strong> is true:</p>
+
+<ul>
+ <li><strong>If</strong> the request uses any of the following methods:
+
+  <ul>
+   <li>{{HTTPMethod("PUT")}}</li>
+   <li>{{HTTPMethod("DELETE")}}</li>
+   <li>{{HTTPMethod("CONNECT")}}</li>
+   <li>{{HTTPMethod("OPTIONS")}}</li>
+   <li>{{HTTPMethod("TRACE")}}</li>
+   <li>{{HTTPMethod("PATCH")}}</li>
+  </ul>
+ </li>
+ <li><strong>Or if</strong>, apart from the headers set automatically by the user agent (for example, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}}, or <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">any of the other header with a name defined in the Fetch spec as a “forbidden header name”</a>), the request includes any headers other than <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">those which the Fetch spec defines as being a “CORS-safelisted request-header”</a>, which are the following:
+  <ul>
+   <li>{{HTTPHeader("Accept")}}</li>
+   <li>{{HTTPHeader("Accept-Language")}}</li>
+   <li>{{HTTPHeader("Content-Language")}}</li>
+   <li>{{HTTPHeader("Content-Type")}} (but note the additional requirements below)</li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li>
+   <li>{{HTTPHeader("Downlink")}}</li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li>
+  </ul>
+ </li>
+ <li><strong>Or if</strong> the {{HTTPHeader("Content-Type")}} header has a value other than the following:
+  <ul>
+   <li><code>application/x-www-form-urlencoded</code></li>
+   <li><code>multipart/form-data</code></li>
+   <li><code>text/plain</code></li>
+  </ul>
+ </li>
+ <li><strong>Or if</strong> one or more event listeners are registered on an {{domxref("XMLHttpRequestUpload")}} object used in the request.</li>
+ <li><strong>Or if</strong> a {{domxref("ReadableStream")}} object is used in the request.</li>
+</ul>
+
+<div class="note"><strong>Note:</strong> 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: <a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>. No other browsers implement those extra restrictions, because they’re not part of the spec.</div>
+
+<p>The following is an example of a request that will be preflighted.</p>
+
+<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/post-here/';
+var body = '&lt;?xml version="1.0"?&gt;&lt;person&gt;&lt;name&gt;Arun&lt;/name&gt;&lt;/person&gt;';
+
+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);
+    }
+}
+
+......
+</pre>
+
+<p>In the example above, line 3 creates an XML body to send with the <code>POST</code> request in line 8. Also, on line 9, a "customized" (non-standard) HTTP request header is set (<code>X-PINGOTHER: pingpong</code>). 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 <code>application/xml</code>, and since a custom header is set, this request is preflighted.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14289/prelight.png"></p>
+
+<p>(Note: as described below, the actual POST request does not include the Access-Control-Request-* headers; they are needed only for the OPTIONS request.)</p>
+
+<p>Let's take a look at the full exchange between client and server. The first exchange is the <em>preflight request/response</em>:</p>
+
+<pre class="brush: none;highlight:[1,10,11,17-20]">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
+</pre>
+
+<p>Once the preflight request is complete, the real request is sent:</p>
+
+<pre class="brush: none;">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
+
+&lt;?xml version="1.0"?&gt;&lt;person&gt;&lt;name&gt;Arun&lt;/name&gt;&lt;/person&gt;
+
+
+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]
+</pre>
+
+<p>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):</p>
+
+<pre class="brush: none">Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type
+</pre>
+
+<p>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 <code>POST</code> 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 <code>X-PINGOTHER</code> and Content-Type custom headers. The server now has an opportunity to determine whether it wishes to accept a request under these circumstances.</p>
+
+<p>Lines 14 - 26 above are the response that the server sends back indicating that the request method (<code>POST</code>) and request headers (<code>X-PINGOTHER</code>) are acceptable. In particular, let's look at lines 17-20:</p>
+
+<pre class="brush: none">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</pre>
+
+<p>The server responds with <code>Access-Control-Allow-Methods</code> and says that <code>POST</code> and <code>GET</code> 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.</p>
+
+<p>The server also sends <code>Access-Control-Allow-Headers</code> with a value of "<code>X-PINGOTHER, Content-Type</code>", confirming that these are permitted headers to be used with the actual request. Like <code>Access-Control-Allow-Methods</code>, <code>Access-Control-Allow-Headers</code> is a comma separated list of acceptable headers.</p>
+
+<p>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 <a href="/en-US/docs/Web/HTTP/Headers/Access-Control-Max-Age">maximum internal value</a> that takes precedence when the <code>Access-Control-Max-Age</code> is greater.</p>
+
+<h4 id="Preflighted_requests_and_redirects">Preflighted requests and redirects</h4>
+
+<p>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.</p>
+
+<blockquote>
+<p>The request was redirected to 'https://example.com/foo', which is disallowed for cross-origin requests that require preflight</p>
+</blockquote>
+
+<blockquote>
+<p>Request requires preflight, which is disallowed to follow cross-origin redirect</p>
+</blockquote>
+
+<p>The CORS protocol originally required that behavior but <a href="https://github.com/whatwg/fetch/commit/0d9a4db8bc02251cc9e391543bb3c1322fb882f2">was subsequently changed to no longer require it</a>. However, not all browsers have implemented the change, and so still exhibit the behavior that was originally required.</p>
+
+<p>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:</p>
+
+<ul>
+ <li>change the server-side behavior to avoid the preflight and/or to avoid the redirect—if you have control over the server the request is being made to</li>
+ <li>change the request such that it is a <a href="#Simple_requests">simple request</a> that doesn’t cause a preflight</li>
+</ul>
+
+<p>But if it’s not possible to make those changes, then another way that may be possible is to this:</p>
+
+<ol>
+ <li>Make a <a href="#Simple_requests">simple request</a> (using {{domxref("Response.url")}} for the Fetch API, or {{domxref("XMLHttpRequest.responseURL")}}) to determine what URL the real preflighted request would end up at.</li>
+ <li>Make another request (the “real” request) using the URL you obtained from <code>Response.url</code> or <code>XMLHttpRequest.responseURL</code> in the first step.</li>
+</ol>
+
+<p>However, if the request is one that triggers a preflight due to the presence of the <code>Authorization</code> 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.</p>
+
+<h3 id="Requests_with_credentials">Requests with credentials</h3>
+
+<p>The most interesting capability exposed by both {{domxref("XMLHttpRequest")}} or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> and CORS is the ability to make "credentialed" requests that are aware of <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> and HTTP Authentication information. By default, in cross-site <code>XMLHttpRequest"</code> or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> invocations, browsers will <strong>not</strong> send credentials. A specific flag has to be set on the <code>XMLHttpRequest"</code> object or the {{domxref("Request")}} constructor when it is invoked.</p>
+
+<p>In this example, content originally loaded from <code class="plain">http://foo.example</code> makes a simple GET request to a resource on <code class="plain">http://bar.other</code> which sets Cookies. Content on foo.example might contain JavaScript like this:</p>
+
+<pre class="brush: js" id="line1">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();
+  }
+}</pre>
+
+<p>Line 7 shows the flag on {{domxref("XMLHttpRequest")}} that has to be set in order to make the invocation with Cookies, namely the <code>withCredentials</code> boolean value. By default, the invocation is made without Cookies. Since this is a simple <code>GET</code> request, it is not preflighted, but the browser will <strong>reject</strong> any response that does not have the {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> header, and <strong>not</strong> make the response available to the invoking web content.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14291/cred-req.png" style="height: 223px; width: 521px;"></p>
+
+<p>Here is a sample exchange between client and server:</p>
+
+<pre class="brush: none">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]
+</pre>
+
+<p>Although line 11 contains the Cookie destined for the content on <code class="plain">http://bar.other</code>, if bar.other did not respond with an {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> (line 19) the response would be ignored and not made available to web content.</p>
+
+<h4 id="Credentialed_requests_and_wildcards">Credentialed requests and wildcards</h4>
+
+<p>When responding to a credentialed request, the server <strong>must</strong> specify an origin in the value of the <code>Access-Control-Allow-Origin</code> header, instead of specifying the "<code>*</code>" wildcard.</p>
+
+<p>Because the request headers in the above example include a <code>Cookie</code> header, the request would fail if the value of the <code>Access-Control-Allow-Origin</code> header were "*". But it does not fail: Because the value of the <code>Access-Control-Allow-Origin</code> header is "<code class="plain">http://foo.example</code>" (an actual origin) rather than the "<code>*</code>" wildcard, the credential-cognizant content is returned to the invoking web content.</p>
+
+<p>Note that the <code>Set-Cookie</code> response header in the example above also sets a further cookie. In case of failure, an exception—depending on the API used—is raised.</p>
+
+<h4 id="Third-party_cookies">Third-party cookies</h4>
+
+<p>Note that cookies set in CORS responses are subject to normal third-party cookie policies. In the example above, the page is loaded from <code>foo.example</code>, but the cookie on line 22 is sent by <code>bar.other</code>, and would thus not be saved if the user has configured their browser to reject all third-party cookies.</p>
+
+<h2 id="The_HTTP_response_headers">The HTTP response headers</h2>
+
+<p>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.</p>
+
+<h3 id="Access-Control-Allow-Origin">Access-Control-Allow-Origin</h3>
+
+<p>A returned resource may have one {{HTTPHeader("Access-Control-Allow-Origin")}} header, with the following syntax:</p>
+
+<pre class="brush: none">Access-Control-Allow-Origin: &lt;origin&gt; | *
+</pre>
+
+<p><code>Access-Control-Allow-Origin</code> specifies either a single origin, which tells browsers to allow that origin to access the resource; or else — for requests <strong>without</strong> credentials — the "<code>*</code>" wildcard, to tell browsers to allow any origin to access the resource.</p>
+
+<p>For example, to allow code from the origin <code>http://mozilla.org</code> to access the resource, you can specify:</p>
+
+<pre class="brush: none">Access-Control-Allow-Origin: http://mozilla.org</pre>
+
+<p>If the server specifies a single origin rather than the "<code>*</code>" wildcard, then the server should also include <code>Origin</code> 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.</p>
+
+<h3 id="Access-Control-Expose-Headers">Access-Control-Expose-Headers</h3>
+
+<p>The {{HTTPHeader("Access-Control-Expose-Headers")}} header lets a server whitelist headers that browsers are allowed to access. For example:</p>
+
+<pre class="brush: none">Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
+</pre>
+
+<p>This allows the <code>X-My-Custom-Header</code> and <code>X-Another-Custom-Header</code> headers to be exposed to the browser.</p>
+
+<h3 id="Access-Control-Max-Age">Access-Control-Max-Age</h3>
+
+<p>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.</p>
+
+<pre class="brush: none">Access-Control-Max-Age: &lt;delta-seconds&gt;
+</pre>
+
+<p>The <code>delta-seconds</code> parameter indicates the number of seconds the results can be cached.</p>
+
+<h3 id="Access-Control-Allow-Credentials">Access-Control-Allow-Credentials</h3>
+
+<p>The {{HTTPHeader("Access-Control-Allow-Credentials")}} header Indicates whether or not the response to the request can be exposed when the <code>credentials</code> 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 <code>GET</code> 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.</p>
+
+<pre class="brush: none">Access-Control-Allow-Credentials: true
+</pre>
+
+<p><a class="internal" href="#Requests_with_credentials">Credentialed requests</a> are discussed above.</p>
+
+<h3 id="Access-Control-Allow-Methods">Access-Control-Allow-Methods</h3>
+
+<p>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.</p>
+
+<pre class="brush: none">Access-Control-Allow-Methods: &lt;method&gt;[, &lt;method&gt;]*
+</pre>
+
+<p>An example of a <a class="internal" href="#Preflighted_requests">preflight request is given above</a>, including an example which sends this header to the browser.</p>
+
+<h3 id="Access-Control-Allow-Headers">Access-Control-Allow-Headers</h3>
+
+<p>The {{HTTPHeader("Access-Control-Allow-Headers")}} header is used in response to a <a class="internal" href="#Preflighted_requests">preflight request</a> to indicate which HTTP headers can be used when making the actual request.</p>
+
+<pre class="brush: none">Access-Control-Allow-Headers: &lt;field-name&gt;[, &lt;field-name&gt;]*
+</pre>
+
+<h2 id="The_HTTP_request_headers">The HTTP request headers</h2>
+
+<p>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.</p>
+
+<h3 id="Origin">Origin</h3>
+
+<p>The {{HTTPHeader("Origin")}} header indicates the origin of the cross-site access request or preflight request.</p>
+
+<pre class="brush: none">Origin: &lt;origin&gt;
+</pre>
+
+<p>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.</p>
+
+<div class="note"><strong>Note:</strong> The <code>origin</code> can be the empty string; this is useful, for example, if the source is a <code>data</code> URL.</div>
+
+<p>Note that in any access control request, the {{HTTPHeader("Origin")}} header is <strong>always</strong> sent.</p>
+
+<h3 id="Access-Control-Request-Method">Access-Control-Request-Method</h3>
+
+<p>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.</p>
+
+<pre class="brush: none">Access-Control-Request-Method: &lt;method&gt;
+</pre>
+
+<p>Examples of this usage can be <a class="internal" href="#Preflighted_requests">found above.</a></p>
+
+<h3 id="Access-Control-Request-Headers">Access-Control-Request-Headers</h3>
+
+<p>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.</p>
+
+<pre class="brush: none">Access-Control-Request-Headers: &lt;field-name&gt;[, &lt;field-name&gt;]*
+</pre>
+
+<p>Examples of this usage can be <a class="internal" href="#Preflighted_requests">found above</a>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch', '#cors-protocol', 'CORS')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>New definition; supplants <a href="https://www.w3.org/TR/cors/">W3C CORS</a> specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Access-Control-Allow-Origin")}}</p>
+
+<h3 id="Compatibility_notes">Compatibility notes</h3>
+
+<ul>
+ <li>Internet Explorer 8 and 9 expose CORS via the <code>XDomainRequest</code> object, but have a full implementation in IE 10.</li>
+ <li>While Firefox 3.5 introduced support for cross-site <code>XMLHttpRequests</code> and Web Fonts, certain requests were limited until later versions. Specifically, Firefox 7 introduced the ability for cross-site HTTP requests for WebGL Textures, and Firefox 9 added support for Images drawn on a canvas using <code>drawImage()</code>.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS errors</a></li>
+ <li><a href="https://enable-cors.org/server.html">Enable CORS: I want to add CORS support to my server</a></li>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a class="external" href="http://www.kendoui.com/blogs/teamblog/posts/11-10-03/using_cors_with_all_modern_browsers.aspx">Using CORS with All (Modern) Browsers</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/cors/">Using CORS - HTML5 Rocks</a>
+  <ul>
+  </ul>
+ </li>
+ <li><a class="external" href="https://arunranga.com/examples/access-control/">Code Samples Showing <code>XMLHttpRequest</code> and Cross-Origin Resource Sharing</a></li>
+ <li><a href="https://github.com/jackblackevo/cors-jsonp-sample">Client-Side &amp; Server-Side (Java) sample for Cross-Origin Resource Sharing (CORS)</a></li>
+ <li><a class="internal" href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Cross-Origin Resource Sharing From a Server-Side Perspective (PHP, etc.)</a></li>
+ <li><a href="https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141">Stack Overflow answer with “how to” info for dealing with common problems</a>:
+  <ul>
+   <li>How to avoid the CORS preflight</li>
+   <li>How to use a CORS proxy to get around <em>“No Access-Control-Allow-Origin header”</em></li>
+   <li>How to fix <em>“Access-Control-Allow-Origin header must not be the wildcard”</em></li>
+  </ul>
+ </li>
+</ul>
+
+<div>{{HTTPSidebar}}</div>
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
+---
+<p>{{ HTTPSidebar }}</p>
+
+<p><strong><dfn>Hypertext Transfer Protocol (HTTP)</dfn></strong> เป็นโปรโตคอลในระดับชั้นแอพพลิเคชัน(<a class="external" href="http://en.wikipedia.org/wiki/Application_Layer" title="http://en.wikipedia.org/wiki/Application_Layer">application-layer</a>) ที่ใช้สำหรับการจัดส่งเอกสารประเภท hypermedia อย่างเช่นเอกสาร HTML และถูกออกแบบมาเพื่อใช้งานในการติดต่อสื่อสารระหว่าง web browser กับ web server และสามารถนำไปใช้ในจุดประสงค์อื่น ๆ ได้ด้วย ซึ่งรูปแบบการสื่อสารของโปรโตคอล HTTP เป็นไปตามโมเดลการสื่อสารแบบเครื่องลูกข่าย-แม่ข่าย(<a class="external" href="http://en.wikipedia.org/wiki/Client%E2%80%93server_model" title="http://en.wikipedia.org/wiki/Client–server_model">client-server model</a>) ที่เครื่องลูกข่ายจะสร้าง connection เพื่อส่ง request ไปยังเครื่องแม่ข่าย และรอจนกว่าจะได้ response กลับมาจากเครื่องแม่ข่าย นอกจากนั้น HTTP เป็นโปรโตคอลแบบ <a class="external" href="http://en.wikipedia.org/wiki/Stateless_protocol" title="http://en.wikipedia.org/wiki/Stateless_protocol">stateless protocol</a> เป็นลักษณะที่เครื่องแม่ข่ายไม่มีการจัดเก็บข้อมูล(state) ใด ๆ ที่เกิดขึ้นระหว่าง request เพราะข้อมูลแต่ละ request สามารถทำความเข้าใจได้ในตัวมันเอง และเนื่องจาก HTTP เป็นโปรโตคอลที่ใช้งานในระดับชั้นแอพพลิเคชัน ซึ่งอยู่ในระดับชั้นที่สูงกว่าโปรโตคอลในระดับล่างอย่าง TCP/IP ที่อยู่ในระดับ <a class="external" href="http://en.wikipedia.org/wiki/Transport_Layer" title="http://en.wikipedia.org/wiki/Transport_Layer">transport layer</a> มันจึงสามารถใช้รูปแบบการติดต่อสื่อสารที่มีความน่าเชื่อถือของโปรโตคอลต่าง ๆ ในระดับชั้น transport ได้ อย่างเช่น อาจจะเลือกใช้โปรโตคอล RUDP ที่มีความน่าเชื่อถือกว่า UDP ที่มีโอกาสสูญเสียข้อมูลไปโดยไม่รู้ตัวได้</p>
+
+<h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTTP/Headers" title="/en-US/docs/HTTP/Headers">HTTP Headers</a></dt>
+ <dd>HTTP message headers ใช้ในการบรรยายเกี่ยวกับ resource หรือ พฤติกรรมของเครื่องแม่ข่าย(server) หรือ เครื่องลูกข่าย(client) การสร้าง HTTP header ขึ้นใช้งานเอง สามารถทำได้ด้วยการเติมอักษร "X-" นำหน้าชื่อ header ที่ต้องการ โดย Header มาตรฐานต่าง ๆ สามารถศึกษาเพิ่มเติมได้จาก <a class="external" href="http://www.iana.org/assignments/message-headers/perm-headers.html" title="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a> เนื้อหาต้นฉบับจะถูกนิยามไว้ใน <a class="external" href="http://tools.ietf.org/html/rfc4229" title="http://tools.ietf.org/html/rfc4229">RFC 4229</a> โดยมี IANA เป็นผู้ดูแลเกี่ยวกับ<a href="http://www.iana.org/assignments/message-headers/prov-headers.html">การลงทะเบียนเพื่อเสนอ HTTP header รูปแบบใหม่</a></dd>
+ <dt><a href="/en/Web_Development/HTTP_cookies" title="HTTP cookies">HTTP cookies</a></dt>
+ <dd>การทำงานของ cookie ได้มีการนิยามไว้โดย <a class="external" href="http://tools.ietf.org/html/rfc6265">RFC 6265</a> โดยกระบวนการเกิดขึ้นหลังจากที่เครื่องแม่ข่ายได้รับ HTTP request แล้ว เครื่องแม่ข่ายจะสามารถส่ง header ชื่อ Set-Cookie ไปกับ response ให้กับเครื่องลูกข่าย หลังจากนั้นเมื่อใดก็ตามที่เครื่องลูกข่ายต้องการส่ง request ไปยังเครื่องแม่ข่าย ค่าของ cookie จะถูกส่งไปพร้อม request ด้วยเสมอ ในรูปแบบของ HTTP header ชื่อ Cookie นอกจากนั้นยังสามารถกำหนดวันและเวลาหมดอายุของ cookie และการจำกัดการเข้าถึง domain และ path ได้</dd>
+ <dt><a href="/en-US/docs/HTTP/Basic_access_authentication" title="/en-US/docs/HTTP/Basic_access_authentication">Basic access authentication</a></dt>
+ <dd>ในบริบทของการติดต่อสื่อสารบนโปรโตคอล HTTP นั้น การพิสูจน์ตัวจริงแบบพื้นฐานเพื่อการเข้าถึง <strong>(basic access authentication)</strong> เป็นวิธีการสำหรับ <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.userAgent" title="HTTP user agent">HTTP user agent</a> ในการ request ไปยังเครื่องแม่ข่ายที่ต้องมีการจัดเตรียมรหัสผู้ใช้งาน (username) และรหัสผ่าน (password) เพื่อใช้ในการพิสูจน์ตัวจริง</dd>
+ <dt><a href="/en/HTTP_Pipelining_FAQ" title="https://developer.mozilla.org/en/HTTP_Pipelining_FAQ">HTTP pipelining FAQ</a></dt>
+ <dd>HTTP/1.1 Pipelining FAQ</dd>
+ <dt><a href="/en-US/docs/HTTP/Access_control_CORS" title="/en-US/docs/HTTP/Access_control_CORS">HTTP access control (CORS)</a></dt>
+ <dd><strong>Cross-site HTTP requests</strong> are <a href="https://developer.mozilla.org/en/HTTP" title="en/HTTP">HTTP</a> requests for resources from a <strong>different domain</strong> than the domain of the resource making the request.  For instance, a resource loaded from Domain A (<code><span class="nowiki">http://domaina.example</span></code>) such as an HTML web page, makes a request for a resource on Domain B (<span class="nowiki">http://domainb.foo</span>), such as an image, using the <code>img</code> element (<code><span class="nowiki">http://domainb.foo/image.jpg</span></code>).  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.</dd>
+ <dt><a href="/En/Controlling_DNS_prefetching" title="En/Controlling DNS prefetching">Controlling DNS prefetching</a></dt>
+ <dd>Firefox 3.5 performs <strong>DNS prefetching</strong>.  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.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Response_codes" title="/en-US/docs/HTTP/HTTP_response_codes">HTTP response codes</a></dt>
+ <dd>HTTP Response Codes indicate whether a specific <a href="https://developer.mozilla.org/en/HTTP" title="en/HTTP">HTTP</a> requests has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirections, client errors, and servers errors.</dd>
+</dl>
+
+<h2 id="A_brief_history_of_HTTP">A brief history of HTTP</h2>
+
+<p>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 '<span style="font-family: courier new;">?</span>' character.</p>
+
+<p>Then, in 1992, a version was published that became, with some minor changes, HTTP/1.0 (finalized in <a class="external" href="http://tools.ietf.org/html/rfc1945" title="http://tools.ietf.org/html/rfc1945">RFC 1945</a> 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 <a class="external" href="http://en.wikipedia.org/wiki/Mime_types" title="http://en.wikipedia.org/wiki/Mime_types">MIME types</a> in conjunction with the <code>Content-Type:</code> header.</p>
+
+<p>In 1995, the <a class="external" href="http://www.ietf.org/" title="http://www.ietf.org/">IETF</a>  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 <a class="external" href="http://tools.ietf.org/html/rfc2068" title="http://tools.ietf.org/html/rfc2068">RFC 2068</a>, with minor fixes in <a class="external" href="http://tools.ietf.org/html/rfc2616" title="http://tools.ietf.org/html/rfc2616">RFC 2616</a> two years later.</p>
+
+<p>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 <code>Host:</code> 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.</p>
+
+<p>Since then, the HTTP protocol evolved by adding new <a href="/en/HTTP/Headers" title="en/HTTP/Headers">headers</a>, defining new behaviors without the need to fundamentally change the protocol. Unknown headers are simply ignored by servers or clients.</p>
+
+<p>HTTP/1.1 is currently being revised by the <a class="external" href="http://tools.ietf.org/wg/httpbis/" title="http://tools.ietf.org/wg/httpbis/">IETF HTTPbis Working Group</a>.</p>
+
+<ul>
+</ul>
+
+<h2 id="HTTP_request_methods">HTTP request methods</h2>
+
+<p>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 <a href="/en/WebDAV" title="en/WebDAV">WebDAV</a>. The  <a class="external" href="http://tools.ietf.org/wg/httpbis/" rel="external nofollow" title="http://tools.ietf.org/wg/httpbis/">IETF HTTPbis Working Group</a> 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 <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#501" rel="internal" title="en/HTTP/HTTP response codes#501">501 Not implemented</a></span> response; if it knows the method but is configured not to answer it, it must return a <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#501" rel="internal" title="en/HTTP/HTTP response codes#501">405 Method not allowed</a></span> response. Two methods are required to be supported: HEAD and GET; all others are optional.</p>
+
+<p>Two specific semantics are defined in the standard and are crucial for web developers: the <em>safety</em> property and the <em>idempotent</em> property.</p>
+
+<h3 id="Safe_methods">Safe methods</h3>
+
+<p>A <dfn>safe method</dfn> 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 <em>retrieval</em> of data. The safe HTTP methods defined in HTTP/1.1 are:</p>
+
+<ul>
+ <li>GET, used to retrieve information identified by the request URI. This information may be generated on the fly or the GET may be conditional if any of the {{ httpheader("If-Modified-Since") }}, {{ httpheader("If-Unmodified-Since") }}, {{ httpheader("If-Match") }}, {{ httpheader("If-None-Match") }} or {{ httpheader("If-Range") }} HTTP headers are set. In that latter case the information is only sent back if all the conditions are fulfilled.</li>
+ <li>HEAD, which is identical to GET but without the message body sent.</li>
+</ul>
+
+<div class="note"><strong>Notes: </strong>
+
+<ul>
+ <li>Any safe method is also <em>idempotent</em>.</li>
+ <li>Not having any side-effects means, for the GET method, that it <strong>must</strong> not be used to trigger an action outside the server, like an order in an e-commerce site. If a side-effect is wanted, a non-<em>idempotent</em> method should be used, like POST.</li>
+ <li>When a page is generated on the fly by a script, the script engine may calculate the page as if it was requested by a GET and then strip the data block. This does not cause problem as long as the GET as implemented in the script is <em>safe</em>, but if it has any side-effects (like triggering an order on an e-commerce site), the HEAD method will trigger it too. It is up to the web developer to ensure that both the GET and HEAD method are safely implemented.</li>
+</ul>
+</div>
+
+<h3 id="Idempotent_methods">Idempotent methods</h3>
+
+<p>An <dfn>idempotent method</dfn> 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.</p>
+
+<ul>
+ <li>HEAD and GET, like any safe method, are also idempotent, as a safe method doesn't have side-effects on the server.</li>
+ <li>PUT is the way to upload a new resource on the server. If the resource already exists and is different, it is replaced; if it doesn't exist, it is created.</li>
+ <li>DELETE removes a resource from the server.</li>
+</ul>
+
+<h3 id="Other_methods">Other methods</h3>
+
+<ul>
+ <li>POST is the way to trigger an action on the server. It has side-effects and can be used to trigger an order, to modify a database, to post a message in a forum, and so on.</li>
+ <li>OPTIONS is a request for communication options available on the chain between the client and the server (through eventual proxies); this method is typically sent before any <a href="/En/HTTP_access_control#Preflighted_requests" title="en/HTTP access control#Preflighted requests">preflighted cross-origin request</a>, in order to know whether it is safe to do it.
+  <div class="note"><strong>Note:</strong> <a href="/En/HTTP_access_control#Preflighted_requests" title="en/HTTP access control#Preflighted requests">Preflighted cross-origin requests</a> cannot be done on servers which don't allow or support the OPTIONS method.</div>
+ </li>
+ <li>TRACE is a kind of ping between the client and the server (through eventual proxies).</li>
+</ul>
+
+<p>Many more methods, such as PROPFIND or PATCH are defined in other standards-track RFCs of the IETF, like WebDAV.</p>
+
+<p>The CONNECT method is defined in <a class="external" href="http://tools.ietf.org/html/rfc2817" title="http://tools.ietf.org/html/rfc2817">RFC 2817</a>.</p>
+
+<h3 id="HTTP_Requests_Methods_in_HTML_Forms">HTTP Requests Methods in HTML Forms</h3>
+
+<p>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 <a href="http://programmers.stackexchange.com/a/211790">this StackExchange answer why other HTTP request methods are not allowed by the HTML specification</a>.</p>
+
+<div class="note"><strong>Note</strong>: The choice of a GET or POST method for HTML forms is not neutral. Because the GET method is a <a href="/en/HTTP#Safe_methods" title="https://developer.mozilla.org/en/HTTP#Safe_methods">safe method</a>, 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.</div>
+
+<h2 id="HTTP_response_codes">HTTP response codes</h2>
+
+<p>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:</p>
+
+<ul>
+ <li><dfn>Informational responses</dfn> (of the form <code>1xx</code>) are provisional responses. Most of the time neither the end user, nor the web developer or webmaster should have to bother with these. The most common is the <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#100" title="en/HTTP/HTTP response codes#100">100 Continue</a></span> response, indicating that the client should continue to send its request.
+
+  <div class="note"><strong>Note:</strong> No information response codes were defined in the HTTP/1.0, and therefore they must not be sent back when this version of the protocol is used.</div>
+ </li>
+ <li><dfn>Success responses</dfn> (of the form <code>2xx</code>) are for successfully processed requests. The <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#200" title="en/HTTP/HTTP response codes#200">200 OK</a></span> response is by far the most common of these responses, but the <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#206" title="en/HTTP/HTTP response codes#206">206 Partial Content</a></span> is also often seen when fetching a file or some media data like video or audio.</li>
+ <li><dfn>Redirection responses</dfn> (of the form <code>3xx</code>) indicate that the resource that the client requested has moved and the server is not able to serve it directly. Most of these responses contain some location information telling where to find the requested resource; user-agents often then retrieve it without further user interaction. The most common responses of this type are <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#301" title="en/HTTP/HTTP response codes#301">301 Moved Permanently</a></span>, indicating that the URI given is no longer valid and has been moved to another place, and <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#302" title="en/HTTP/HTTP response codes#302">302 Found</a></span> which indicates that the resource has been <em>temporarily</em> moved to another place.
+  <div class="note"><strong>Note:</strong> For webmasters, it is recommended to set up a <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#301" title="en/HTTP/HTTP response codes#301">301 Moved Permanently</a></span> redirection when moving pages to another URI, during a site reorganization for example. That allows users following links to still reach the resource and it also teaches search engines and other services the new location of the resource, so that they can transfer their metadata to it. It is also important to add adequate cache headers to the <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#301" title="en/HTTP/HTTP response codes#301">301 Moved Permanently</a></span> response so that this information is cached by the client and prevents it from making unnecessary requests to the original URI prior to fetching the resource itself.</div>
+ </li>
+ <li><dfn>Client error responses</dfn> (of the form <code>4xx</code>) indicate that the request sent by the client is either invalid, incomplete, or doesn't have enough rights to be performed. The most common such response is <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#404" title="en/HTTP/HTTP response codes#404">404 Not Found</a></span> which is sent back when the URI requested doesn't exist, but a few others are often presented to the end user, like <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#400" title="en/HTTP/HTTP response codes#400">400 Bad Request</a></span> sent when the request isn't a valid HTTP request (as this shouldn't happen but may indicate a bug into the user agent or, less likely, the server) or <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#403" title="en/HTTP/HTTP response codes#403">403 Forbidden</a></span>, sent when the client request a resource that does exist but isn't allowed to be transmitted (like a directory content).</li>
+ <li><dfn>Server error responses</dfn> (of the form <code>5xx</code>) indicate that the server had a problem handling the valid client request. The two most common such responses are <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#500" title="en/HTTP/HTTP response codes#500">500 Internal Server Error</a></span>, a generic error code indicating a bug in the server or <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#503" title="en/HTTP/HTTP response codes#503">503 Service Unavailable</a></span> indicating that the server cannot process the request due to a temporary problem, like a disabled service for maintenance purposes or the non-availability of a database.</li>
+</ul>
+
+<p>A web developer shouldn't encounter many other response codes, but people building requests using the <code><a href="/en/nsIXMLHttpRequest" title="en/XMLHttpRequest">XMLHTTPRequest</a></code> function may hit <a href="/en/HTTP/HTTP_response_codes" title="en/HTTP/HTTP response codes">less usual response codes</a>.</p>
+
+<h3 id="More_on_redirection_responses">More on redirection responses</h3>
+
+<p>Starting in Gecko 9.0 {{ geckoRelease("9.0") }}, redirections (such as 301 and 307) that specify a <code>javascript:</code> 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.</p>
+
+<h2 id="HTTP_headers">HTTP headers</h2>
+
+<p>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.</p>
+
+<p>Headers are grouped according the context in which they may appear:</p>
+
+<dl>
+ <dt>General headers</dt>
+ <dd>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") }}.</dd>
+ <dt>Request headers</dt>
+ <dd>These headers give more precise information about the resource to be fetched or about the client itself. Among them one can find <a href="/en/HTTP_Caching_FAQ" title="en/HTTP Caching FAQ">cache-related headers</a>, 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 <em>entity headers</em>.</dd>
+ <dt>Response headers</dt>
+ <dd>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 <em>entity headers</em>.</dd>
+ <dt>Entity headers</dt>
+ <dd>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.</dd>
+</dl>
+
+<p>Headers can also be grouped according to how caching and non-caching proxies handle them:</p>
+
+<dl>
+ <dt>End-to-end headers</dt>
+ <dd>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.</dd>
+ <dt>Hop-by-hop headers</dt>
+ <dd>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.</dd>
+</dl>
+
+<p>In order to learn about the specific semantic of each header, see its entry in the <a href="/en/HTTP/Headers" title="en/HTTP/Headers">comprehensive list of HTTP headers</a>.</p>
+
+<h3 id="Useful_request_headers">Useful request headers</h3>
+
+<p>Among the numerous <a href="/en/HTTP/Headers" title="en/HTTP/Headers">HTTP request headers</a>, several are especially useful when set correctly. If you are building your own requests, by using <code><a href="/en/DOM/XMLHttpRequest" title="en/XMLHTTPRequest">XMLHTTPRequest</a></code> or when writing an extension and sending <a href="/en/Setting_HTTP_request_headers" title="en/Setting HTTP request headers">custom HTTP requests via XPCOM</a>, then it is important to ensure the presence of headers that are often set by browsers based on the preferences of the user.</p>
+
+<dl>
+ <dt>Controlling the language of the resource</dt>
+ <dd>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.</dd>
+ <dt>Using conditional GET</dt>
+ <dd>Caching is a major tool to accelerate the display of web pages. Even when parts of a webpage are refreshed via an <code><a href="/en/DOM/XMLHttpRequest" title="en/XMLHTTPRequest">XMLHTTPRequest</a></code>:, 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.</dd>
+</dl>
+
+<h3 id="Useful_response_headers">Useful response headers</h3>
+
+<p>The configuration of a web server is a critical part to ensure good performance and optimal security of a web site. Among the <a href="/en/HTTP/Headers" title="en/HTTP/Headers">numerous HTTP response headers</a>, several are of specific importance and should be configured on the server</p>
+
+<h4 id="Restricting_framing">Restricting framing</h4>
+
+<p>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 <code><a href="/en/Security/CSP/CSP_policy_directives#frame-ancestors" title="en/The X-FRAME-OPTIONS response header">CSP frame-ancestors directive</a></code>. By setting it with the value <code>'none'</code>, 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 <a href="/en/Security/CSP/Introducing_Content_Security_Policy" title="en/Security/CSP/Introducing Content Security Policy">Content Security Policies</a>, may be helpful too.</p>
+
+<h4 id="Compression">Compression</h4>
+
+<p>Minimizing the amount of data transferred accelerates the display of a web page. Though most techniques, like <a href="/en/CSS/CSS_Sprites" title="en/CSS/CSS Sprites">CSS Sprites</a>, 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 <a class="external" href="http://httpd.apache.org/docs/2.0/mod/mod_deflate.html" title="http://httpd.apache.org/docs/2.0/mod/mod_deflate.html">mod_deflate module</a>.</p>
+
+<div class="note"><strong>Note:</strong> 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.</div>
+
+<h4 id="Controlling_cache">Controlling cache</h4>
+
+<p><a href="/en/HTTP_Caching_FAQ" title="en/HTTP Caching FAQ">HTTP Caching</a> 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:</p>
+
+<ul>
+ <li>Any static resource provides an {{ httpheader("Expires") }} response header that is set to far in the future. That way, the resource may stay in the cache until the user-agent flushes it for its own reasons (like reaching its cache size limit).
+  <div class="note"><strong>Note: </strong>On Apache, use the ExpiresDefault directive in your .htaccess to define a relative expires: <code>ExpiresDefault "access plus 1 month"</code>.</div>
+ </li>
+ <li>Any dynamic resource provides a {{ httpheader("Cache-control") }} response header. Theoretically, any HTTP request done through a <a href="/en/HTTP#Safe_Methods" title="en/HTTP#Safe Methods">safe method</a> (GET or HEAD) or even through a solely <a href="/en/HTTP#Idempotent_Methods" title="en/HTTP#Idempotent Methods">idempotent one</a> (DELETE, PUT) may be cached; but in practice careful study is needed to determine if the caching of the response may lead to inappropriate side-effects.</li>
+</ul>
+
+<h4 id="Setting_the_correct_MIME_types">Setting the correct MIME types</h4>
+
+<p>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.</p>
+
+<div class="note"><strong>Note: </strong>
+
+<ul>
+ <li>On Apache, one can match file extensions with a given MIME type in the .htaccess using the <font face="Verdana,Helvetica,Arial"><span style="font-family: courier new;"><code>AddType</code></span> type directive like</font><code> AddType image/jpeg jpg.</code></li>
+ <li>Most web servers send unknown-type resources using the default <code>application/octet-stream</code> MIME type; for security reasons, most browsers, like Firefox, do not allow setting a custom default action for such resources and force the user to store it to disk in order to use it. Some common cases of often incorrectly configured servers happens for the following file types:
+  <ul>
+   <li>
+    <p>Rar-encoded files. The ideal would be to be able to set the real type of the encoded files; this often is not possible (as it may not be known to the server and these files may contains several resource of different types). In that case, configure the server to send the <code>application/x-rar-compressed </code>MIME type or some users won't be able to define a useful default action for them.</p>
+   </li>
+   <li>
+    <p>Audio and video files. Only resources with the proper MIME Type will be recognized and played, using a {{ HTMLElement("video") }} or {{ HTMLElement("audio") }} elements. Be sure to <a href="/En/Media_formats_supported_by_the_audio_and_video_elements" title="En/Media formats supported by the audio and video elements">use the correct MIME type for audio and video resources</a>.</p>
+   </li>
+   <li>
+    <p>Proprietary file types. Pay special attention when serving a proprietary file type. Be sure not to forget to add an x-prefixed type for it; otherwise, special handling won't be possible. This is especially true with resources using the <a class="external" href="http://en.wikipedia.org/wiki/Keyhole_Markup_Language" title="http://en.wikipedia.org/wiki/Keyhole_Markup_Language">Keyhole Markup Language</a>, which should be served as <code>application/vnd.google-earth.kml+xml </code>for an optimal user experience.</p>
+   </li>
+  </ul>
+ </li>
+</ul>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/En/Controlling_DNS_prefetching" title="En/Controlling DNS prefetching">Controlling DNS prefetching</a></li>
+ <li>The <a href="/en/HTTP_Pipelining_FAQ" title="https://developer.mozilla.org/en/HTTP_Pipelining_FAQ">HTTP pipelining FAQ</a></li>
+ <li><a href="/en/Web_Development/HTTP_cookies" title="HTTP cookies">HTTP cookies</a></li>
+ <li><a href="/en-US/docs/HTTP/Headers" title="/en-US/docs/HTTP/Headers">HTTP Headers</a></li>
+ <li><a href="/en-US/docs/HTTP/Basic_access_authentication" title="/en-US/docs/HTTP/Basic_access_authentication">Basic access authentication</a></li>
+ <li><a href="/en-US/docs/HTTP/Access_control_CORS" title="/en-US/docs/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/HTTP"} ) }}</p>
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
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>หมายเลขสถานะของ HTTP หมายเลข <code><strong>201 Created</strong></code> แสดงถึงการร้องขอนั้นสำเร็จและทำให้เกิดการสร้างทรัพยากรใหม่ ทรัพยากรใหม่นี้ถูกสร้างสำเร็จก่อนที่การตอบสนองจะถูกส่งกลับมา และทรัพยากรใหม่นี้ถูกส่งกลับมากับเนื้อหาของข้อความด้วย ที่ตั้งของมันเป็นได้ทั้ง URL ที่ใช้ในการร้องขอ หรือเนื้อหาในส่วน header ของ {{HTTPHeader("Location")}}</p>
+
+<p>โดยปกติแล้วการใช้งานของหมายเลขสถานะนี้จะเป็นผลมาจากการร้องขอแบบ {{HTTPMethod("PUT")}}</p>
+
+<h2 id="สถานะ">สถานะ</h2>
+
+<pre class="syntaxbox">201 Created</pre>
+
+<h2 id="ข้อกำหนด">ข้อกำหนด</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">ข้อกำหนด</th>
+   <th scope="col">หัวข้อ</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "201 Created" , "6.3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="การเข้ากันได้ของเบราเซอร์">การเข้ากันได้ของเบราเซอร์</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.201")}}</p>
+
+<h2 id="ดูสิ่งนี้ด้วย">ดูสิ่งนี้ด้วย</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li>
+</ul>
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
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP response status codes indicate whether a specific <a href="/en-US/docs/Web/HTTP">HTTP</a> 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 <a href="https://tools.ietf.org/html/rfc2616#section-10">section 10 of RFC 2616</a>.</p>
+
+<h2 id="Information_responses">Information responses</h2>
+
+<dl>
+ <dt>{{HTTPStatus(100, "100 Continue")}}</dt>
+ <dd>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.</dd>
+ <dt>{{HTTPStatus(101, "101 Switching Protocol")}}</dt>
+ <dd>This code is sent in response to an {{HTTPHeader("Upgrade")}} request header by the client, and indicates the protocol the server is switching too.</dd>
+ <dt>{{HTTPStatus(102, "102 Processing")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>This code indicates that the server has received and is processing the request, but no response is available yet.</dd>
+</dl>
+
+<h2 id="Successful_responses">Successful responses</h2>
+
+<dl>
+ <dt>{{HTTPStatus(200, "200 OK")}}</dt>
+ <dd>The request has succeeded. The meaning of a success varies depending on the HTTP method:<br>
+ GET: The resource has been fetched and is transmitted in the message body.<br>
+ HEAD: The entity headers are in the message body.<br>
+ POST: The resource describing the result of the action is transmitted in the message body.<br>
+ TRACE: The message body contains the request message as received by the server</dd>
+ <dt>{{HTTPStatus(201, "201 Created")}}</dt>
+ <dd>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.</dd>
+ <dt>{{HTTPStatus(202, "202 Accepted")}}</dt>
+ <dd>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.</dd>
+ <dt>{{HTTPStatus(203, "203 Non-Authoritative Information")}}</dt>
+ <dd>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.</dd>
+ <dt>{{HTTPStatus(204, "204 No Content")}}</dt>
+ <dd>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.</dd>
+ <dt>{{HTTPStatus(205, "205 Reset Content")}}</dt>
+ <dd>This response code is sent after accomplishing request to tell user agent reset document view which sent this request.</dd>
+ <dt>{{HTTPStatus(206, "206 Partial Content")}}</dt>
+ <dd>This response code is used because of range header sent by the client to separate download into multiple streams.</dd>
+ <dt>{{HTTPStatus(207, "207 Multi-Status")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>A Multi-Status response conveys information about multiple resources in situations where multiple status codes might be appropriate.</dd>
+ <dt>{{HTTPStatus(208, "208 Multi-Status")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>Used inside a DAV: propstat response element to avoid enumerating the internal members of multiple bindings to the same collection repeatedly.</dd>
+ <dt>{{HTTPStatus(226, "226 IM Used")}} (<a href="https://tools.ietf.org/html/rfc3229">HTTP Delta encoding</a>)</dt>
+ <dd>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.</dd>
+</dl>
+
+<h2 id="Redirection_messages">Redirection messages</h2>
+
+<dl>
+ <dt>{{HTTPStatus(300, "300 Multiple Choice")}}</dt>
+ <dd>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.</dd>
+ <dt>{{HTTPStatus(301, "301 Moved Permanently")}}</dt>
+ <dd>This response code means that URI of requested resource has been changed. Probably, new URI would be given in the response.</dd>
+ <dt>{{HTTPStatus(302, "302 Found")}}</dt>
+ <dd>This response code means that URI of requested resource has been changed <em>temporarily</em>. New changes in the URI might be made in the future. Therefore, this same URI should be used by the client in future requests.</dd>
+ <dt>{{HTTPStatus(303, "303 See Other")}}</dt>
+ <dd>Server sent this response to directing client to get requested resource to another URI with an GET request.</dd>
+ <dt>{{HTTPStatus(304, "304 Not Modified")}}</dt>
+ <dd>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.</dd>
+ <dt><code>305 Use Proxy</code> {{deprecated_inline}}</dt>
+ <dd>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.</dd>
+ <dt><code>306 unused</code></dt>
+ <dd>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.</dd>
+ <dt>{{HTTPStatus(307, "307 Temporary Redirect")}}</dt>
+ <dd>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 <code>302 Found</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: if a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd>
+ <dt>{{HTTPStatus(308, "308 Permanent Redirect")}}</dt>
+ <dd>This means that the resource is now permanently located at another URI, specified by the <code>Location:</code> HTTP Response header. This has the same semantics as the <code>301 Moved Permanently</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: if a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd>
+</dl>
+
+<h2 id="Client_error_responses">Client error responses</h2>
+
+<dl>
+ <dt>{{HTTPStatus(400, "400 Bad Request")}}</dt>
+ <dd>This response means that server could not understand the request due to invalid syntax.</dd>
+ <dt>{{HTTPStatus(401, "401 Unauthorized")}}</dt>
+ <dd>Although the HTTP standard specifies "unauthorized", semantically this response means "unauthenticated". That is, the client must authenticate itself to get the requested response.</dd>
+ <dt><code>402 Payment Required</code></dt>
+ <dd>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.</dd>
+ <dt>{{HTTPStatus(403, "403 Forbidden")}}</dt>
+ <dd>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.</dd>
+ <dt>{{HTTPStatus(404, "404 Not Found")}}</dt>
+ <dd>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.</dd>
+ <dt>{{HTTPStatus(405, "405 Method Not Allowed")}}</dt>
+ <dd>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, <code>GET</code> and <code>HEAD</code>, must never be disabled and should not return this error code.</dd>
+ <dt>{{HTTPStatus(406, "406 Not Acceptable")}}</dt>
+ <dd>This response is sent when the web server, after performing <a href="/en-US/docs/HTTP/Content_negotiation#Server-driven_negotiation">server-driven content negotiation</a>, doesn't find any content following the criteria given by the user agent.</dd>
+ <dt>{{HTTPStatus(407, "407 Proxy Authentication Required")}}</dt>
+ <dd>This is similar to 401 but authentication is needed to be done by a proxy.</dd>
+ <dt>{{HTTPStatus(408, "408 Request Timeout")}}</dt>
+ <dd>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.</dd>
+ <dt>{{HTTPStatus(409, "409 Conflict")}}</dt>
+ <dd>This response is sent when a request conflicts with the current state of the server.</dd>
+ <dt>{{HTTPStatus(410, "410 Gone")}}</dt>
+ <dd>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.</dd>
+ <dt>{{HTTPStatus(411, "411 Length Required")}}</dt>
+ <dd>Server rejected the request because the <code>Content-Length</code> header field is not defined and the server requires it.</dd>
+ <dt>{{HTTPStatus(412, "412 Precondition Failed")}}</dt>
+ <dd>The client has indicated preconditions in its headers which the server does not meet.</dd>
+ <dt>{{HTTPStatus(413, "413 Payload Too Large")}}</dt>
+ <dd>Request entity is larger than limits defined by server; the server might close the connection or return an <code>Retry-After</code> header field.</dd>
+ <dt>{{HTTPStatus(414, "414 URI Too Long")}}</dt>
+ <dd>The URI requested by the client is longer than the server is willing to interpret.</dd>
+ <dt>{{HTTPStatus(415, "415 Unsupported Media Type")}}</dt>
+ <dd>The media format of the requested data is not supported by the server, so the server is rejecting the request.</dd>
+ <dt>{{HTTPStatus(416, "416 Requested Range Not Satisfiable")}}</dt>
+ <dd>The range specified by the <code>Range</code> 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.</dd>
+ <dt>{{HTTPStatus(417, "417 Expectation Failed")}}</dt>
+ <dd>This response code means the expectation indicated by the <code>Expect</code> request header field can't be met by the server.</dd>
+ <dt>{{HTTPStatus(418, "418 I'm a teapot")}}</dt>
+ <dd>The server refuses the attempt to brew coffee with a teapot.</dd>
+ <dt>{{HTTPStatus(421, "421 Misdirected Request")}}</dt>
+ <dd>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.</dd>
+ <dt>{{HTTPStatus(422, "422 Unprocessable Entity")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>The request was well-formed but was unable to be followed due to semantic errors.</dd>
+ <dt>{{HTTPStatus(423, "423 Locked")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>The resource that is being accessed is locked.</dd>
+ <dt>{{HTTPStatus(424, "424 Failed Dependency")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>The request failed due to failure of a previous request.</dd>
+ <dt>{{HTTPStatus(426, "426 Upgrade Required")}}</dt>
+ <dd>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).</dd>
+ <dt>{{HTTPStatus(428, "428 Precondition Required")}}</dt>
+ <dd>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.</dd>
+ <dt>{{HTTPStatus(429, "429 Too Many Requests")}}</dt>
+ <dd>The user has sent too many requests in a given amount of time ("rate limiting").</dd>
+ <dt>{{HTTPStatus(431, "431 Request Header Fields Too Large")}}</dt>
+ <dd>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.</dd>
+ <dt>{{HTTPStatus(451, "451 Unavailable For Legal Reasons")}}</dt>
+ <dd>The user requests an illegal resource, such as a web page censored by a government.</dd>
+</dl>
+
+<h2 id="Server_error_responses">Server error responses</h2>
+
+<dl>
+ <dt>{{HTTPStatus(500, "500 Internal Server Error")}}</dt>
+ <dd>The server has encountered a situation it doesn't know how to handle.</dd>
+ <dt>{{HTTPStatus(501, "501 Not Implemented")}}</dt>
+ <dd>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 <code>GET</code> and <code>HEAD</code>.</dd>
+ <dt>{{HTTPStatus(502, "502 Bad Gateway")}}</dt>
+ <dd>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.</dd>
+ <dt>{{HTTPStatus(503, "503 Service Unavailable")}}</dt>
+ <dd>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 <code>Retry-After:</code> 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.</dd>
+ <dt>{{HTTPStatus(504, "504 Gateway Timeout")}}</dt>
+ <dd>This error response is given when the server is acting as a gateway and cannot get a response in time.</dd>
+ <dt>{{HTTPStatus(505, "505 HTTP Version Not Supported")}}</dt>
+ <dd>The HTTP version used in the request is not supported by the server.</dd>
+ <dt>{{HTTPStatus(506, "506 Variant Also Negotiates")}}</dt>
+ <dd>The server has an internal configuration error: transparent content negotiation for the request results in a circular reference.</dd>
+ <dt>{{HTTPStatus(507, "507 Insufficient Storage")}}</dt>
+ <dd>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.</dd>
+ <dt>{{HTTPStatus(508, "508 Loop Detected")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>The server detected an infinite loop while processing the request.</dd>
+ <dt>{{HTTPStatus(510, "510 Not Extended")}}</dt>
+ <dd>Further extensions to the request are required for the server to fulfill it.</dd>
+ <dt>{{HTTPStatus(511, "511 Network Authentication Required")}}</dt>
+ <dd>The 511 status code indicates that the client needs to authenticate to gain network access.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes">List of HTTP status codes on Wikipedia</a></li>
+ <li><a href="http://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml">IANA official registry of HTTP status codes</a></li>
+</ul>
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
+---
+<section id="Quick_Links">
+<ol>
+ <li><strong><a href="/th/docs/Web">เทคโนโลยีเว็บสำหรับนักพัฒนา</a></strong></li>
+ <li class="toggle">
+  <details open><summary>พื้นฐาน</summary>
+  <ol>
+   <li><a href="/th/docs/Web/HTML">HTML</a></li>
+   <li><a href="/th/docs/Web/CSS">CSS</a></li>
+   <li><a href="/th/docs/Web/HTTP">HTTP</a></li>
+  </ol>
+  </details>
+ </li>
+ <li class="toggle">
+  <details open><summary>การเขียนสคริปต์</summary>
+  <ol>
+   <li><a href="/th/docs/Web/JavaScript">JavaScript</a></li>
+   <li><a href="/th/docs/Web/API">Web API</a></li>
+   <li><a href="/th/docs/Web/Events">Events</a></li>
+   <li><a href="/th/docs/Web/Web_components">Web Components</a></li>
+  </ol>
+  </details>
+ </li>
+ <li class="toggle">
+  <details open><summary><font size="3">กราฟิก</font></summary>
+  <ol>
+   <li><a href="/th/docs/Web/HTML/Canvas">Canvas</a></li>
+   <li><a href="/th/docs/Web/SVG">SVG</a></li>
+   <li><a href="/th/docs/Web/API/WebGL_API">WebGL</a></li>
+  </ol>
+  </details>
+ </li>
+ <li class="toggle">
+  <details open><summary>อื่นๆ</summary>
+  <ol>
+   <li><a href="/th/docs/Web/Media">เทคโนโลยยีเว็บมีเดีย</a></li>
+   <li><a href="/th/docs/WebAssembly">WebAssembly</a></li>
+   <li><a href="/th/docs/Web/MathML">MathML</a></li>
+   <li><a href="/th/docs/Web/XSLT">XSLT</a></li>
+   <li><a href="/th/docs/Web/EXSLT">EXSLT</a></li>
+   <li><a href="/th/docs/Web/XPath">XPath</a></li>
+  </ol>
+  </details>
+ </li>
+</ol>
+</section>
+
+<p class="summary">คุณลักษณะ World Wide Web ที่เปิดกว้างนั้นช่วยเปิดโอกาสอันน่าอัศจรรย์สำหรับ ผู้ที่ต้องการสร้างเว็บไซต์ หรือออนไลน์แอพพลิเคชั่น การที่จะใช้ประโยชน์จากความสามารถ ของเว็บไซต์ได้อย่างเต็มที่ คุณจำเป็นต้องรู้วิธีการใช้งานมันสำรวจลิ้งค์ด้านล่างเพื่อเรียนรู้ เกี่ยวกับเทคโนโลยีเว็บต่างๆ</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h1 class="firstHeading" id="เทคโนโลยีเว็บ" lang="th">เทคโนโลยีเว็บ</h1>
+
+<h3 id="พื้นฐาน">พื้นฐาน</h3>
+
+<dl>
+ <dt><a href="/th/docs/Web/HTML">HTML</a></dt>
+ <dd>HyperText Markup Language (HTML) หรือ ภาษามาร์กอัปข้อความหลายมิติ ใช้สำหรับการเขียนและกำหนด<em> เนื้อหา </em>ของเว็บเพจ</dd>
+ <dt><a href="/th/docs/Web/CSS">CSS</a></dt>
+ <dd>Cascading Style Sheets (CSS) ใช้เพื่อกำหนด <em>รูปร่าง</em> และ <em>การนำเสนอ </em>ของเนื้อหาบนเว็บเพจ</dd>
+ <dt><a href="/th/docs/Web/HTTP">HTTP</a></dt>
+ <dd><dfn>HyperText Transfer Protocol (HTTP)</dfn> หรือ เกณฑ์วิธีขนส่งข้อความหลายมิติ ใช้ส่ง HTML และ สื่อหลายมิติอื่นๆ บนเว็บ</dd>
+</dl>
+
+<h3 id="การเขียนสคริปต์">การเขียนสคริปต์</h3>
+
+<dl>
+ <dt><a href="/th/docs/Web/JavaScript">JavaScript</a></dt>
+ <dd>JavaScript เป็นภาษาโปรแกรมที่ทำงานบนเบราว์เซอร์ของคุณ คุณสามารถใช้มัน เพื่อเพิ่มการโต้ตอบและคุณลักษณะแบบไดนามิกให้แก่เว็บไซต์หรือแอปพลิเคชันของคุณ</dd>
+ <dd>ด้วย {{glossary("Node.js")}} คุณสามารถใช้ JavaScript บนเซิร์ฟเวอร์ได้เช่นกัน</dd>
+ <dt><a href="/th/docs/Web/Reference/API">Web API</a></dt>
+ <dd>Web Application Programming Interfaces (Web API) ใช้ดำเนินการของงานต่างๆ เช่น การจัดการ <a href="/th/docs/DOM">DOM</a> เล่นเสียงหรือวิดีโอ หรือสร้างกราฟิก 3 มิติ
+ <ul>
+  <li><a href="/th/docs/Web/API">เอกสารอ้างอิงอินเทอร์เฟส Web API</a> รายการชนิดของอ็อบเจกต์ที่คุณสามารถใช้ในขณะ พัฒนาเว็บ</li>
+  <li><a href="/th/docs/WebAPI">หน้า WebAPI</a> รายการการติดต่อสื่อสาร การเข้าถึงฮาร์ดแวร์ และ API อื่น ๆ ที่คุณสามารถใช้ในแอปพลิเคชันเว็บ</li>
+  <li><a href="/th/docs/Web/Events">เอกสารอ้างอิง Event</a> รายการ Event ทั้งหมดที่คุณสามารถใช้เพื่อติดตามและตอบสนอง ต่อสิ่งที่น่าสนใจที่เกิดขึ้นในหน้าเว็บหรือแอปพลิเคชันของคุณ</li>
+ </ul>
+ </dd>
+ <dt><a href="/th/docs/Web/Web_components">Web Components</a></dt>
+ <dd>Web Components เป็นชุดของเทคโนโลยีต่างๆที่จะทำให้คุณสามารถสร้าง องค์ประกอบกำหนดเองที่นำกลับไปใช้ได้ การทำงานของพวกมันจะถูกห่อหุ้มจาก โค้ดส่วนที่เหลือของคุณ</dd>
+</dl>
+
+<h3 id="กราฟิก">กราฟิก</h3>
+
+<dl>
+ <dt><a href="/th/docs/Web/HTML/Canvas">Canvas</a></dt>
+ <dd>องค์ประกอบ {{HTMLElement("canvas")}} ให้ API สำหรับการวาดกราฟิก 3 มิติ โดยใช้  JavaScript</dd>
+ <dt><a href="/th/docs/Web/SVG">SVG</a></dt>
+ <dd>Scalable Vector Graphics (SVG) หรือ ภาพกราฟิกเวกเตอร์ปรับขนาดได้<em> </em>ทำให้คุณสามารถใช้ เส้นตรง เส้นโค้ง และรูปทรงเรขาคณิตอื่นๆในการสร้างภาพกราฟิก<strong> </strong>คุณสามารถสร้าง รูปที่สามารถย่อหรือขยายในขนาดต่างๆได้โดยไม่เสียคุณภาพด้วยเวกเตอร์</dd>
+ <dt><a href="/th/docs/Web/API/WebGL_API">WebGL</a></dt>
+ <dd>WebGL เป็น JavaScript API ที่ทำให้คุณสามารถวาดกราฟิก 2 มิติ หรือ 3 มิติโดยใช้ องค์ประกอบ HTML {{HTMLElement("canvas")}}  เทคโนโลยีให้คุณได้ใช้ OpenGL ES มาตรฐานในเนื้อหาเว็บ</dd>
+</dl>
+
+<h3 id="เสียง_วิดีโอ_และ_มัลติมีเดีย">เสียง วิดีโอ และ มัลติมีเดีย</h3>
+
+<dl>
+ <dt><a href="/th/docs/Web/Media">เทคโนโลยยีเว็บมีเดีย</a></dt>
+ <dd>รายการของ API ที่เกี่ยวข้องกับมีเดีย พร้อมกับลิงก์สู่เอกสารคู่มือของแต่ละอัน</dd>
+ <dt><a href="/th/docs/Web/API/Media_Streams_API">การบันทึกมีเดียและสตรีม API</a></dt>
+ <dd>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.</dd>
+ <dt><a href="/th/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">การใช้ HTML เสียงและวิดีโอ</a></dt>
+ <dd>การฝังวิดีโอหรือเสียงในหน้าเว็บและการควบคุมการเล่นของมัน</dd>
+ <dt><a href="/th/docs/Web/API/WebRTC_API">WebRTC</a></dt>
+ <dd>The RTC in WebRTC stands for Real-Time Communications, the technology that enables audio/video streaming and data sharing between browser clients (peers).</dd>
+</dl>
+
+<h3 id="อื่นๆ">อื่นๆ</h3>
+
+<dl>
+ <dt><a href="/th/docs/Web/MathML">MathML</a></dt>
+ <dd>Mathematical Markup Language (MathML) หรือ ภาษามาร์กอัปเชิงคณิตศาสตร์ ทำให้คุณสามารถแสดงสมการทางคณิตศาสตร์และไวยากรณ์ที่ซับซ้อนได้</dd>
+ <dt><a href="/th/docs/Web/XSLT">XSLT</a></dt>
+ <dd>Extensible Stylesheet Language Transformations (XSLT) ทำให้คุณสามารถแปลงเอกสาร XML สู่ HTML ที่มนุษย์สามารถอ่านได้</dd>
+ <dt><a href="/th/docs/Web/EXSLT">EXSLT</a></dt>
+ <dd>ฟังก์ชันเสริมที่ช่วยเพิ่มฟีเจอร์ให้แก่ XSLT</dd>
+ <dt><a href="/th/docs/Web/XPath">XPath</a></dt>
+ <dd>XPath ให้คุณเลือกโหนด DOM ในเอกสารโดยใช้ไวยากรณ์ที่ทรงพลังกว่า <a href="/th/docs/Web/CSS/CSS_Selectors">ตัวเลือก CSS</a></dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="พื้นที่เรียนรู้">พื้นที่เรียนรู้</h2>
+
+<dl>
+ <dt><a href="/th/docs/Learn">เรียนรู้การพัฒนาเว็บ</a></dt>
+ <dd>บทความชุดนี้สร้างพื้นฐานที่จะทำให้ผู้เริ่มต้นสามารถเริ่มพัฒนาเว็บไซต์แบบง่ายได้</dd>
+ <dt><a href="/th/docs/Web/Apps/Progressive">Progressive web apps</a></dt>
+ <dd>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.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="หัวข้ออื่ีนๆ">หัวข้ออื่ีนๆ</h2>
+
+<dl>
+ <dt><a href="/th/docs/Web/Accessibility">การเข้าถึง</a></dt>
+ <dd>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.</dd>
+ <dt><a href="/th/docs/Web/Performance">ประสิทธิภาพของเว็บ</a></dt>
+ <dd>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.</dd>
+ <dt><a href="/th/docs/Web/Security">ความปลอดภัย</a></dt>
+ <dd>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.</dd>
+ <dt><a href="/th/docs/WebAssembly">WebAssembly</a></dt>
+ <dd>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.</dd>
+</dl>
+</div>
+</div>
+
+<p><span class="alllinks"><a href="/th/docs/tag/Web">แสดงทั้งหมด...</a></span></p>
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
+---
+<div>{{JsSidebar}}</div>
+
+<p class="summary"><strong>JavaScript</strong> (<strong>JS</strong>) เป็นภาษาโปรแกรมชนิดหนึ่ง, ภาษามีขนาดเล็ก, อาศัยตรวจแปลภาษา, มีคุณสมบัติ <a href="https://en.wikipedia.org/wiki/First-class_functions" title="https://en.wikipedia.org/wiki/First-class_functions">first-class functions. </a>คนส่วนใหญ่จะรู้จักว่าเป็นภาษาสคริปต์สำหรับหน้าเว็บ แต่ในปัจจุบันมีได้มีการนำไปใช้ใน <a href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_web_pages">สภาพแวดล้อมอื่นที่ไม่ใช่เว็บบราวเซอร์</a> ยกตัวอย่างเช่น <a class="external" href="https://nodejs.org/">node.js</a> หรือ <a href="https://couchdb.apache.org/">Apache CouchDB</a>. จาวาสคริปต์เป็นภาษาแบบ <a class="mw-redirect" href="https://en.wikipedia.org/wiki/Prototype-based_programming" title="Prototype-based">prototype-based</a>, multi-paradigm, dynamic scripting สนับสนุนการเขียนในรูปแบบของ object-oriented, imperative และ declarative ( เช่น การโปรแกรมแบบ functional) <a href="/en-US/docs/Web/JavaScript/About_JavaScript">อ่านเพิ่มเติม</a></p>
+
+<p>ส่วนนี้ของเว็บไซต์มีไว้สำหรับภาษา JavaScript โดยเฉพาะ, เนื้อหาจะไม่เจาะจงกับการเขียนหน้าเวป หรือ สภาพแวดล้อมอื่นๆ. สำหรับเนื้อหาเกี่ยวกับ <a href="http://en.wikipedia.org/wiki/Application_programming_interface">APIs</a> สำหรับการเขียนเวปโดยตรงนั้นสามารถดูได้ที่ <a href="/en-US/docs/Web/API">Web APIs</a> และ <a href="/en-US/docs/Glossary/DOM">DOM</a></p>
+
+<p>มาตรฐานของ JavaScript คือ <a href="/en-US/docs/JavaScript/Language_Resources">ECMAScript</a>. นับตั้งแต่ปี 2012 เป็นต้นมาบราวเซอร์ยุคใหม่ทั้งหมดรองรับการทำงานตามมาตรฐาน ECMAScript 5.1 อย่างสมบูรณ์ ในขณะที่บราวเซอร์เวอร์ชั่นที่เก่ากว่านั้นจะรองรับอย่างน้อย ECMAScript 3. ในวันที่ 17 มิถุนายน 2015 <a href="http://www.ecma-international.org/">ECMA International</a> ได้ตีพิมพ์มาตรฐาน ECMAScript รุ่นที่ 6 ซึ่งมีชื่อเรียกอย่างเป็นทางการว่า ECMAScript 2015 แต่เป็นที่รู้จักโดยทั่วไปว่า ECMAScript 6 หรือ ES6. นับตั้งแต่นั้นมาตรฐาน ECMAScript ก็จะถูกปรับปรุงทุกปี. สำหรับเอกสารฉบับนี้อ้างถึงมาตรฐานฉบับร่างรุ่นล่าสุด, ซึ่งปัจจุบันคือ <a href="http://tc39.github.io/ecma262/">ECMAScript 2020</a>.</p>
+
+<p>อย่าสับสน JavaScript กับ ภาษา <a href="https://en.wikipedia.org/wiki/Java_(programming_language)">Java</a>. ทั้ง  "Java" and "JavaScript" เป็น ตราสินค้าจดทะเบียนของบริษัท Oracle ในสหรัฐอเมริกาและประเทศอื่นๆ. ทั้งสองภาษามีความต่างอย่างมากทั้งด้าน วากยสัมพันธ์ (syntax), ความหมาย (semantics) และการใช้งาน</p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="บทเรียน">บทเรียน</h2>
+
+<p>เรียนรู้วิธีการเขียนโปรแกรมด้วย JavaScript</p>
+
+<h3 id="เบี้องต้น">เบี้องต้น</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/th/docs/Web/JavaScript/Guide">คู่มือจาวาสคริปต์</a></dt>
+ <dd>ถ้าคุณไม่รู้จัก Javascript มาก่อน คู่มือนี้จะแนะนำให้คุณรู้จักภาษานี้</dd>
+ <dt><a href="https://developer.mozilla.org/th/docs/Web/JavaScript/JavaScript_technologies_overview">ภาพรวมของเทคโนโลยีจาวาสคริปต์</a></dt>
+ <dd>บทนำเกี่ยวกับสภาพโดยทั่วไปของ Javascript บนเว็บเบราเซอร์</dd>
+ <dt><a href="https://developer.mozilla.org/th/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">บทนำเกี่ยวกับจาวาสคริปต์เชิงวัตถุ</a></dt>
+ <dd>บทนำเกี่ยวกับแนวความคิดการเขียนโปรแกรมเชิงวัตถุใน JavaScript.</dd>
+</dl>
+
+<h3 id="ขั้นกลาง">ขั้นกลาง</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/th/docs/Web/JavaScript/A_re-introduction_to_JavaScript">บทนำอีกครั้งเกี่ยวกับจาวาสคริปต์</a></dt>
+ <dd>คำอธิบายคร่าวๆ สำหรับผู้ที่คิดว่ารู้จักจาวาสคริปต์มาก่อนแล้ว</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/th/docs/Web/JavaScript/Data_structures">โครงสร้างข้อมูลของจาวาสคริปต์</a></dt>
+ <dd>คำอธิบายคร่าวๆเกี่ยวกับโครงสร้างข้อมูลที่มีในจาวาสคริปต์</dd>
+ <dt><a href="https://developer.mozilla.org/th/docs/Web/JavaScript/Equality_comparisons_and_sameness">การเปรียบเทียบความเท่ากันและความเหมือน</a></dt>
+ <dd>จาวาสคริปต์มีคำสั่งที่ใช้เปรียบเทียบอยู่สามแบบที่แตกต่างกัน: strict equality using ===, loose equality using == และ  <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="The Object.is() method determines whether two values are the same value."><code>Object.is()</code></a> method</dd>
+</dl>
+
+<h3 id="ระดับสูง">ระดับสูง</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/th/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">การสืบทอดและความต่อเนื่องของต้นแบบ</a></dt>
+ <dd>การอธิบายสิ่งที่มักเข้าใจผิดๆ และการใช้การสืบทอดแบบ prototype-based อย่างไม่ถูกต้อง</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></dt>
+ <dd>โหมด Strict จะทำให้คุณไม่สามารถใช้ตัวแปรใดๆ ก่อนที่จะมีการกำหนดค่าตั้งต้นให้แก่ตัวแปรนั้นได้ โหมดนี้จะควบคุมความแตกต่างของ ECMAScript 5 เพื่อประสิทธิภาพที่เร็วกว่าและง่ายสำหรับการแก้ไขจุดบกพร่อง</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></dt>
+ <dd>ชนิดข้อมูลแบบอาเรย์มีกระบวนการสำหรับการเข้าถึงข้อมูลแบบไบนารี่</dd>
+ <dt><a href="https://developer.mozilla.org/th/docs/Web/JavaScript/Memory_Management">การจัดการหน่วยความจำ</a></dt>
+ <dd>วงจรชีวิตหน่วยความจำและการกำจัดหน่วยความจำที่ไม่ใช้แล้วในจาวาสคริปต์</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="อ้างอิง">อ้างอิง</h2>
+
+<p>Browse the complete <a href="/en-US/docs/Web/JavaScript/Reference">JS reference</a> documentation.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">Standard objects</a></dt>
+ <dd>Get to know standard built-in objects <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="The JavaScript Array global object is a constructor for arrays, which are high-level, list-like objects."><code>Array</code></a></code>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" title="Creates a JavaScript Date instance that represents a single moment in time. Date objects are based on a time value that is the number of milliseconds since 1 January, 1970 UTC."><code>Date</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error" title="The Error constructor creates an error object. Instances of Error objects are thrown when runtime errors occur. The Error object can also be used as a base objects for user-defined exceptions. See below for standard built-in error types."><code>Error</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" title="The Function constructor creates a new Function object. In JavaScript every function is actually a Function object."><code>Function</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON" title="The JSON object contains methods for parsing JavaScript Object Notation (JSON) and converting values to JSON. It can't be called or constructed, and aside from its two method properties it has no interesting functionality of its own."><code>JSON</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math" title="Math is a built-in object that has properties and methods for mathematical constants and functions. Not a function object."><code>Math</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="The Number JavaScript object is a wrapper object allowing you to work with numerical values. A Number object is created using the Number() constructor."><code>Number</code></a>, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp" title="The RegExp constructor creates a regular expression object for matching text with a pattern."><code>RegExp</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="The String global object is a constructor for strings, or a sequence of characters."><code>String</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map" title="The Map object is a simple key/value map. Any value (both objects and primitive values) may be used as either a key or a value."><code>Map</code></a>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap" title="The WeakMap object is a collection of key/value pairs in which the keys are objects and the values can be arbitrary values."><code>WeakMap</code></a></code>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet" title="The WeakSet object lets you store weakly held objects in a collection."><code>WeakSet</code></a>, and others.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Expressions &amp; operators</a></dt>
+ <dd>Learn more about the behavior of JavaScript's operators <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, and more.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Statements">Statements &amp; declarations</a></dt>
+ <dd>Learn how <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do-while</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for-in</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for-of</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try-catch</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if-else</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch">switch</a></code>, and more JavaScript statements and keywords work.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></dt>
+ <dd>Learn how to work with JS functions to develop your applications.</dd>
+</dl>
+
+<h2 id="เครื่องมือและแหล่งที่มา">เครื่องมือและแหล่งที่มา</h2>
+
+<p>เครื่องมือที่ช่วยในขณะการเขียน และดีบั๊กโค๊ด JavaScript.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt>
+ <dd><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>, <a href="/en-US/docs/Tools/Web_Console">Web Console</a>, <a href="/en-US/docs/Tools/Profiler">JavaScript Profiler</a>, <a href="/en-US/docs/Tools/Debugger">Debugger</a>, and more.</dd>
+ <dt><a class="external" href="http://www.getfirebug.com/">Firebug</a></dt>
+ <dd>Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Shells">JavaScript Shells</a></dt>
+ <dd>A JavaScript shell allows you to quickly test snippets of JavaScript code.</dd>
+ <dt><a href="https://togetherjs.com/">TogetherJS</a></dt>
+ <dd>
+ <p class="hero-header-text large">Collaboration made easy.</p>
+ </dd>
+ <dt><a href="http://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt>
+ <dd>Stack Overflow questions tagged with "JavaScript".</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">JavaScript versions and release notes</a></dt>
+ <dd>Browse JavaScript's feature history and implementation status.</dd>
+</dl>
+</div>
+</div>
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
+---
+<div>{{QuickLinksWithSubpages("/th/docs/Web/Manifest")}}</div>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">ชนิด</th>
+   <td><code>String</code></td>
+  </tr>
+  <tr>
+   <th scope="row">จำเป็น</th>
+   <td>ใช่</td>
+  </tr>
+  <tr>
+   <th scope="row">ตัวอย่าง</th>
+   <td>
+    <pre class="brush: json">
+"icons": [{"src": "icon.webp", "sizes": "48x48", "type": "image/webp"}]</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>icons</code>สมาชิกระบุอาร์เรย์ของวัตถุที่เป็นตัวแทนของไฟล์ภาพที่สามารถใช้เป็นแอปพลิเค iconsfor บริบทที่แตกต่างกัน ตัวอย่างเช่นสามารถใช้เพื่อแสดงแอปพลิเคชันเว็บท่ามกลางรายการแอปพลิเคชันอื่น ๆ หรือเพื่อรวมเว็บแอปพลิเคชันเข้ากับ  ตัวสลับงานของ<abbr title="ระบบปฏิบัติการ">ระบบปฏิบัติการ</abbr>และ/หรือการตั้งค่าระบบ</p>
+
+<h2 id="ตัวอย่าง">ตัวอย่าง</h2>
+
+<pre class="brush: json">"ไอคอน": [
+  {
+    "src": "ไอคอน/lowres.webp",
+    "ขนาด": "48x48",
+    "type": "image/webp"
+  }
+  {
+    "src": "ไอคอน/lowres",
+    "ขนาด": "48x48"
+  }
+  {
+    "src": "ไอคอน/hd_hi.ico",
+    "ขนาด": "72x72 96x96 128x128 256x256"
+  }
+  {
+    "src": "ไอคอน/hd_hi.svg",
+    "ขนาด": "72x72"
+  }
+]</pre>
+
+<h2 id="ค่า">ค่า</h2>
+
+<p>วัตถุรูปภาพอาจมีค่าต่อไปนี้:</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">สมาชิก</th>
+   <th scope="col">ลักษณะ</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>sizes</code></td>
+   <td>สตริงที่มีมิติข้อมูลคั่นด้วยช่องว่าง </td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td>เส้นทางไปยังไฟล์รูปภาพ หาก<code>src</code>เป็น URL สัมพัทธ์ URL หลักจะเป็น URL ของไฟล์ Manifest</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td>คำแนะนำเกี่ยวกับประเภทสื่อของภาพ จุดประสงค์ของสมาชิกนี้คือเพื่อให้ตัวแทนผู้ใช้สามารถข้ามรูปภาพที่มีประเภทสื่อที่ไม่รองรับได้อย่างรวดเร็ว</td>
+  </tr>
+  <tr>
+   <td><code>purpose</code></td>
+   <td>
+    <p>กำหนดวัตถุประสงค์ของภาพตัวอย่างเช่นหากภาพมีวัตถุประสงค์เพื่อให้บริการวัตถุประสงค์พิเศษบางอย่างในบริบทของโฮสต์ระบบปฏิบัติการ (เช่นเพื่อการรวมที่ดีขึ้น)</p>
+
+    <p><a href="https://w3c.github.io/manifest/#purpose-member"><code>purpose</code></a> สามารถมีหนึ่งในค่าต่อไปนี้:</p>
+
+    <ul>
+     <li><code>badge</code>: ตัวแทนผู้ใช้สามารถแสดงไอคอนนี้โดยที่ข้อ จำกัด ด้านพื้นที่และ/หรือข้อกำหนดด้านสีแตกต่างจากไอคอนแอปพลิเคชัน</li>
+     <li><code>maskable</code>: รูปภาพได้รับการออกแบบโดยมี<a href="https://w3c.github.io/manifest/#icon-masks">ไอคอนรูปแบบและเขตปลอดภัย</a>ไว้ในใจว่าตัวแทนใด ๆ ของภาพนอกเขตปลอดภัยสามารถถูกละเว้นและถูกปกปิดโดยตัวแทนผู้ใช้</li>
+     <li><code>any</code>: ตัวแทนผู้ใช้มีอิสระที่จะแสดงไอคอนในบริบทใด ๆ (นี่คือค่าเริ่มต้น)</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ข้อมูลจำเพาะ">ข้อมูลจำเพาะ</h2>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">สเปค</th>
+   <th scope="col">สถานะ</th>
+   <th scope="col">คิดเห็น</th>
+   <th scope="col">ผลตอบรับ</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{SpecName('Manifest', '#icons-member', 'icons')}}</p>
+   </td>
+   <td>
+    <p>{{Spec2('Manifest')}}</p>
+   </td>
+   <td>
+    <p>คำจำกัดความเบื้องต้น</p>
+   </td>
+   <td>
+    <p><a href="https://github.com/w3c/manifest/issues/">ร่างการทำงานของ Web App Manifest</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ความเข้ากันได้ของเบราว์เซอร์">ความเข้ากันได้ของเบราว์เซอร์</h2>
+
+<div class="hidden">
+<p>ตารางความเข้ากันได้ในหน้านี้สร้างขึ้นจากข้อมูลที่มีโครงสร้าง หากคุณต้องการมีส่วนร่วมกับข้อมูลโปรดตรวจสอบ<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>และส่งคำขอดึง</p>
+</div>
+
+<p>{{compat("html.manifest.icons")}}</p>
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
+---
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}}</div>
+<p>Web app manifests are part of a collection of web technologies called <a href="/en-US/docs/Web/Apps/Progressive">progressive web apps</a> (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.</p>
+
+<p>The web app manifest provides information about a web application in a <a href="/en-US/docs/Glossary/JSON">JSON</a> 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).</p>
+
+<div class="hidden">
+<p>Can PWA manifest contain comments?<br>
+ It is a <a href="/en-US/docs/Glossary/JSON">JSON</a>-formatted file, with one exception: it is allowed to contain "<code>//</code>"-style comments.</p>
+</div>
+
+<h2 id="Members">Members</h2>
+
+<p>Web manifests can contain the following keys. Click on each one to link through to more information about it:</p>
+
+<p>{{ListSubpages("/en-US/docs/Web/Manifest")}}</p>
+
+<h2 id="Example_manifest">Example manifest</h2>
+
+<pre class="brush: json">{
+  "name": "HackerWeb",
+  "short_name": "HackerWeb",
+  "start_url": ".",
+  "display": "standalone",
+<span class="pl-s"><span class="pl-pds">  "</span>background_color<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>#fff<span class="pl-pds">"</span></span>,
+  "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"
+  }]
+}</pre>
+
+<h2 id="Deploying_a_manifest_with_the_link_tag" name="Deploying_a_manifest_with_the_link_tag">Deploying a manifest</h2>
+
+<p>Web app manifests are deployed in your HTML pages using a {{HTMLElement("link")}} element in the {{HTMLElement("head")}} of a document:</p>
+
+<pre class="brush: html">&lt;link rel="manifest" href="/manifest.webmanifest"&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: The <code>.webmanifest</code> extension is specified in the <a href="https://w3c.github.io/manifest/#media-type-registration">Media type registration</a> section of the specification (the response of the manifest file should return <code>Content-Type: application/manifest+json</code>). Browsers generally support manifests with other appropriate extensions like <code>.json</code> (<code>Content-Type: application/json</code>).</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: If the manifest requires credentials to fetch - the <code><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code> attribute must be set to <code>"use-credentials"</code>, even if the manifest file is in the same orgin of the current page.</p>
+</div>
+
+<ul>
+</ul>
+
+<h2 id="Splash_screens">Splash screens</h2>
+
+<p>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:</p>
+
+<ul>
+ <li><code><a href="/docs/Web/Manifest/name">name</a></code></li>
+ <li><code><a href="/docs/Web/Manifest/background_color">background_color</a></code></li>
+ <li>The icon in the <code><a href="/docs/Web/Manifest/icons">icons</a></code> array that is closest to 128dpi for the device.</li>
+</ul>
+
+<h2 id="Mime_type">Mime type</h2>
+
+<p>Manifests should be served using the <code>application/manifest+json</code> MIME type. However, it is optional to do so.  </p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Manifest')}}</td>
+   <td>{{Spec2('Manifest')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("html.manifest")}}</p>
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
+---
+<p class="summary">เพิ่มไปยังหน้าจอหลัก (หรือ A2HS สําหรับระยะสั้น) เป็นคุณลักษณะที่มีอยู่ในเบราว์เซอร์สมาร์ทโฟนที่ทันสมัยที่ช่วยให้นักพัฒนาได้อย่างง่ายดายและสะดวกในการเพิ่มทางลัดไปยังหน้าจอหลักของพวกเขาเป็นตัวแทนของเว็บแอปที่ชื่นชอบ (หรือเว็บไซต์) เพื่อให้พวกเขาสามารถเข้าถึงมันได้ด้วยการแตะเพียงครั้งเดียว คู่มือนี้จะอธิบายวิธีการใช้ A2HS และสิ่งที่คุณต้องทําในฐานะนักพัฒนาซอฟต์แวร์เพื่อให้ผู้ใช้ใช้ประโยชน์จากมัน</p>
+
+<h2 id="ทําไมต้อง_A2HS">ทําไมต้อง A2HS?</h2>
+
+<p dir="rtl">A2HS เป็นความคิดที่จะเป็นส่วนหนึ่งของปรัชญาโปร<a href="/en-US/docs/Web/Progressive_web_apps">เกรสซีเว็บ App</a> - ให้เว็บปพลิเคชันข้อดีประสบการณ์เช่นเดียวกับปพลิเคชันพื้นเมืองเพื่อให้พวกเขาสามารถแข่งขันในสงครามระบบนิเวศของวันนี้ ส่วนหนึ่งของนี้เป็นท่าทางง่ายๆในการเข้าถึงแอพพลิเคโดยแตะที่ไอคอนบนหน้าจอหลักของคุณแล้วมีมันจะปรากฏเรียบร้อยในหน้าต่างของตัวเอง A2HS ทําให้เป็นไปได้</p>
+
+<h2 id="เบราว์เซอร์ใดที่รองรับ_A2HS">เบราว์เซอร์ใดที่รองรับ A2HS?</h2>
+
+<p>A2HS ได้รับการสนับสนุนโดยมือถือ Chrome / Android เว็บวิวตั้งแต่รุ่น 31, โอเปร่าสําหรับ Android ตั้งแต่รุ่น 32 และ Firefox สําหรับ Android ตั้งแต่<a href="/en-US/docs/Mozilla/Firefox/Releases/58">รุ่น 58</a></p>
+
+<h2 id="คุณจะใช้มันได้อย่างไร">คุณจะใช้มันได้อย่างไร</h2>
+
+<p>เราได้เขียนเว็บไซต์ตัวอย่างง่ายมาก (<a href="https://mdn.github.io/pwa-examples/a2hs/">ดูการสาธิตของเราอยู่</a>และยัง<a href="https://github.com/mdn/pwa-examples/tree/master/a2hs">เห็นรหัสที่มา</a>) ที่ไม่ทํามาก แต่ได้รับการพัฒนาด้วยรหัสที่จําเป็นเพื่อให้มันจะถูกเพิ่มไปยังหน้าจอหลักเช่นเดียวกับพนักงานบริการเพื่อให้สามารถใช้งานได้แบบออฟไลน์ ตัวอย่างแสดงชุดของภาพจิ้งจอก</p>
+
+<p><font>หากคุณมี Firefox สําหรับ Android ใช้ได้ใช้เพื่อนําทางไปยังการสาธิตของเราที่ คุณจะเห็นภาพจิ้งจอก แต่สําคัญกว่าคุณจะเห็นไอคอน "บ้าน" ที่มีไอคอนบวก (+) อยู่ข้างใน - นี่คือไอคอน "เพิ่มหน้าจอโฮม" สําหรับไซต์ที่มีคุณลักษณะที่จําเป็น</font><code>https://mdn.github.io/pwa-examples/a2hs/</code></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15762/add-to-home-screen-icon.png" style="border-style: solid; border-width: 1px; display: block; height: 64px; margin: 0px auto; width: 500px;"></p>
+
+<p>แตะที่ปุ่มนี้จะแสดงแบนเนอร์ยืนยัน - การกดปุ่มใหญ่ + <em>ADD TO HOME SCREEN</em>เสร็จสิ้นการดําเนินการเพิ่มแอพไปยังหน้าจอหลัก (หมายเหตุ: ใน Android 8 และสูงกว่า ระบบระดับ "เพิ่มไปยังหน้าจอหลัก" โต้ตอบสิทธิ์จะแสดงก่อน.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15772/fx-a2hs-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 421px; margin: 0px auto; width: 700px;"></p>
+
+<p>หากคุณมี Chrome มือถือที่มีอยู่ประสบการณ์จะแตกต่างกันเล็กน้อย เมื่อโหลดเว็บไซต์ของเราคุณจะเห็นป๊อปอัพติดตั้งแบนเนอร์ขึ้นถามว่าคุณต้องการที่จะเพิ่ม app นี้ไปยังหน้าจอหลักของคุณ</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15771/chrome-a2hs-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 421px; margin: 0px auto; width: 700px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find out a lot more about Chrome install banners from the article <a href="https://developers.google.com/web/fundamentals/app-install-banners/">Web App Install Banners</a>.</p>
+</div>
+
+<p>If you choose not to add it to your Home screen at this point, you can do so later using the <em>Add to Home screen</em> icon in the main Chrome menu.</p>
+
+<p>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.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15770/a2hs-on-home-screen.png" style="border-style: solid; border-width: 1px; display: block; height: 243px; margin: 0px auto; width: 400px;"></p>
+
+<p>Tapping this icon opens it up, but as a fullscreen app, you'll no longer see the browser UI around it.</p>
+
+<h2 id="How_do_you_make_an_app_A2HS-ready">How do you make an app A2HS-ready?</h2>
+
+<p>To enable your app to be added to a Home screen, it needs the following:</p>
+
+<ul>
+ <li>To be served over HTTPs — the web is increasingly being moved in a more secure direction, and many modern web technologies (A2HS included) will work only on secure contexts.</li>
+ <li>To have a manifest file with the correct fields filled in, linked from the HTML head.</li>
+ <li>To have an appropriate icon available for displaying on the Home screen.</li>
+ <li>Chrome additionally requires the app to have a service worker registered (e.g., so it can function when offline).</li>
+</ul>
+
+<h3 id="Manifest">Manifest</h3>
+
+<p><font>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.</font><code><em>somefilename</em>.webmanifest</code><code>manifest.webmanifest</code></p>
+
+<div class="note">
+<p><font><strong>Note</strong>: The extension is specified in the <a href="https://w3c.github.io/manifest/#media-type-registration">Media type registration</a> section of the specification, but generally browsers will support manifests with other appropriate extensions, e.g. .</font><code>.webmanifest</code><code>.json</code></p>
+</div>
+
+<p>The fields needed for A2HS are as follows:</p>
+
+<ul>
+ <li><code>background_color</code><font>: Specifies a background color to be used in some app contexts. The most relevant one to A2HS is the splash screen displayed when the app icon on the Home screen is tapped and it first starts to load (this currently appears only when apps have been added to the Home screen by Chrome).</font></li>
+ <li><code>display</code><font>: Specifies how the app should be displayed. To make it feel like a distinct app (and not just a web page), you should choose a value such as (no UI is shown at all) or (very similar, but system-level UI elements such as the status bar might be visible).</font><code>fullscreen</code><code>standalone</code></li>
+ <li><code>icons</code><font>: Specifies icons for the browser to use when representing the app in different places (such as on the task switcher, or more important, the Home screen). We've included only one in our demo.</font></li>
+ <li><code>name</code>/<code>short_name</code><font>: These fields provide an app name to be displayed when representing the app in different places. provides the full app name, and provides a shortened name to be used when there is insufficient space to display the full name. You are advised to provide both if your app's name is particularly long.</font><code>name</code><code>short_name</code></li>
+ <li><code>start_url</code><font>: Provides a path to the asset that should be loaded when the added-to-Home screen app is launched. Note that this has to be a relative URL pointing to the site index, relative to the url of the manifest. Also, be aware that Chrome requires this before it will display the install banner, whereas Firefox doesn't require it for showing the home-with-a-plus icon.</font></li>
+</ul>
+
+<p>The manifest for our sample app looks like this:</p>
+
+<pre class="brush: js">{
+  "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"
+}</pre>
+
+<h3 id="Appropriate_icon">Appropriate icon</h3>
+
+<p>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).</p>
+
+<p><font>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.</font><code>type</code></p>
+
+<p>In terms of how to design the icon, you should follow the same best practices you'd follow for any Android icon (see the <a href="https://developer.android.com/guide/practices/ui_guidelines/icon_design.html">Android icon design guidelines</a>).</p>
+
+<h3 id="Link_the_HTML_to_the_manifest">Link the HTML to the manifest</h3>
+
+<p>To finish setting up your manifest, you need to reference it from the HTML of your application's home page:</p>
+
+<pre class="brush: html">&lt;<span class="pl-ent">link</span> <span class="pl-e">rel</span>=<span class="pl-s"><span class="pl-pds">"</span>manifest<span class="pl-pds">"</span></span> <span class="pl-e">href</span>=<span class="pl-s"><span class="pl-pds">"</span>manifest.webmanifest<span class="pl-pds">"</span></span>&gt;</pre>
+
+<p>Browsers that support A2HS will know where to look for your manifest once this is in place.</p>
+
+<h2 id="What_does_A2HS_not_give_you">What does A2HS not give you?</h2>
+
+<p>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 <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> to handle storing the assets offline, and if required, <a href="/en-US/docs/Web/API/Web_Storage_API">Web storage</a> or <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> to store its data.</p>
+
+<p><font>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 <a href="/en-US/docs/Web/API/Cache">Cache API</a>, and serve them from the cache instead of the network using the code in the <a href="https://github.com/mdn/pwa-examples/blob/master/a2hs/sw.js">sw.js</a> file.</font><code><a href="https://github.com/mdn/pwa-examples/blob/master/a2hs/index.js">index.js</a></code></p>
+
+<h2 id="A2HS_on_desktop">A2HS on desktop</h2>
+
+<p>While originally intended to improve user experience on mobile OSes, there is movement to make PWAs installable on desktop platforms too.</p>
+
+<div class="note">
+<p><font><strong>Note</strong>: 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.</font><code>#enable-desktop-pwas</code></p>
+</div>
+
+<h3 id="Adding_an_install_button">Adding an install button</h3>
+
+<p>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:</p>
+
+<pre class="brush: html">&lt;button class="add-button"&gt;Add to home screen&lt;/button&gt;</pre>
+
+<p>We then gave it some simple styling:</p>
+
+<pre class="brush: css">.add-button {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+}</pre>
+
+<h3 id="JavaScript_for_handling_the_install">JavaScript for handling the install</h3>
+
+<p><font>At the bottom of our <a href="https://github.com/mdn/pwa-examples/blob/master/a2hs/index.js"><code>index.js</code> file</a>, 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:</font><code>deferredPrompt</code><code>display: none</code></p>
+
+<pre class="brush: js">let deferredPrompt;
+const addBtn = document.querySelector('.add-button');
+addBtn.style.display = 'none';</pre>
+
+<p><font>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:</font><code>beforeinstallprompt</code></p>
+
+<pre class="brush: js">window.addEventListener('beforeinstallprompt', (e) =&gt; {
+  // 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) =&gt; {
+    // 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) =&gt; {
+        if (choiceResult.outcome === 'accepted') {
+          console.log('User accepted the A2HS prompt');
+        } else {
+          console.log('User dismissed the A2HS prompt');
+        }
+        deferredPrompt = null;
+      });
+  });
+});</pre>
+
+<p>So here we:</p>
+
+<ul>
+ <li>Call {{domxref("Event.preventDefault()")}} to stop Chrome 67 and earlier from calling the install prompt automatically (this behavior changed in Chrome 68).</li>
+ <li><font>Store the event object in the variable so it can be used later on to perform the actual installation.</font><code>deferredPrompt</code></li>
+ <li><font>Set the button to so it appears in the UI for the user to click.</font><code>display: block</code></li>
+ <li><font>Set a handler for the button.</font><code>click</code></li>
+</ul>
+
+<p>The click handler contains the following steps:</p>
+
+<ul>
+ <li><font>Hide the button again with — it is no longer needed once the app is installed.</font><code>display: none</code></li>
+ <li><font>Use the method available on the event object (stored in ) to trigger showing the install prompt.</font><code>prompt()</code><code>beforeinstallprompt</code><code>deferredPrompt</code></li>
+ <li><font>Respond to the user's interaction with the prompt using the property, again available on the event object.</font><code>userChoice</code><code>beforeinstallprompt</code></li>
+ <li><font>Set to null since it is no longer needed.</font><code>deferredPrompt</code></li>
+</ul>
+
+<p>So when the button is clicked, the install prompt appears.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16281/chrome-desktop-a2hs-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 163px; margin: 0px auto; width: 300px;"></p>
+
+<p><font>If the user selects <em>Install</em>, 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:</font><code>onbeforeinstallprompt</code></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16280/a2hs-installed-desktop.png" style="border-style: solid; border-width: 1px; display: block; height: 296px; margin: 0px auto; width: 500px;"></p>
+
+<p>If the user selects <em>Cancel</em>, the state of the app goes back to how it was before the button was clicked.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The code for this section was mostly taken from <a href="https://developers.google.com/web/fundamentals/app-install-banners/">App install banners/Add to Home Screen</a> by Pete LePage.</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Progressive_web_apps">Progressive web apps</a></li>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li>
+ <li><a href="/en-US/docs/Web/Manifest">Web manifest reference</a></li>
+ <li><a href="https://developers.google.com/web/fundamentals/app-install-banners/">App install banners</a></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</div>
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
+---
+<div>{{draft}}</div>
+
+<p class="summary"><img alt="PWA community logo" src="https://mdn.mozillademos.org/files/16742/pwa.png" style="display: block; float: left; height: 188px; margin: 0px auto; padding-bottom: 1em; padding-right: 2em; width: 350px;"><strong>Progressive Web Apps</strong> 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.</p>
+
+<p>In order to call a Web App a PWA, technically speaking it should have the following features: <a href="/en-US/docs/Web/Security/Secure_Contexts">Secure contexts</a> (<strong>{{Glossary("HTTPS")}}</strong>), one or more <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a>, and a <a href="/en-US/docs/Web/Manifest">manifest file</a>.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Security/Secure_Contexts">Secure contexts</a> ({{Glossary("HTTPS")}})</dt>
+ <dd>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.</dd>
+ <dt><a href="/en-US/docs/Web/API/Service_Worker_API">Service workers</a></dt>
+ <dd>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.</dd>
+ <dt><a href="/en-US/docs/Web/Manifest">Manifest file</a></dt>
+ <dd>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.</dd>
+</dl>
+
+<h2 id="PWA_advantages">PWA advantages</h2>
+
+<p>PWAs should be discoverable, installable, linkable, network independent, progressive, re-engageable, responsive, and safe. To find out more about what these mean, read <a href="/en-US/docs/Web/Progressive_web_apps/Advantages">Progressive web app advantages</a>.</p>
+
+<p>To find out how to implement PWAs, read through our <a href="/en-US/docs/Web/Progressive_web_apps/Developer_guide">PWA developer guide</a>.</p>
+
+<h2 id="Documentation">Documentation</h2>
+
+<p><strong>&lt;-- The temporary automatic list below will be replaced soon --&gt;</strong></p>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<div class="blockIndicator warning">
+<p><strong>Everything below this point is left over from the old version of this page and will be revamped as other content is overhauled.</strong></p>
+</div>
+
+<h2 id="Core_PWA_guides">Core PWA guides</h2>
+
+<p>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.</p>
+
+<ol>
+ <li><a href="/en-US/docs/Web/Progressive_web_apps/Introduction">Introduction to progressive web apps</a></li>
+ <li><a href="/en-US/docs/Web/Progressive_web_apps/App_structure">Progressive web app structure</a></li>
+ <li><a href="/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers">Making PWAs work offline with Service workers</a></li>
+ <li><a href="/en-US/docs/Web/Progressive_web_apps/Installable_PWAs">How to make PWAs installable</a></li>
+ <li><a href="/en-US/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push">How to make PWAs re-engageable using Notifications and Push</a></li>
+ <li><a href="/en-US/docs/Web/Progressive_web_apps/Loading">Progressive loading</a></li>
+</ol>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Technology_guides">Technology guides</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a> — A lengthy guide showing how and when to use web storage, IndexedDB, and service workers.</li>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using service workers</a> — A more in-depth guide covering the Service Worker API.</li>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a> — The fundamentals of IndexedDB, explained in detail.</li>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> — The Web storage API made simple.</li>
+ <li><a class="external external-icon" href="https://developers.google.com/web/updates/2015/11/app-shell" rel="noopener">Instant Loading Web Apps with An Application Shell Architecture</a> — A guide to using the App Shell coding pattern to create apps that load quickly.</li>
+ <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Using the Push API</a> — Learn the essentials behind the Web Push API.</li>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a> — Web notifications in a nutshell.</li>
+ <li><a href="/en-US/docs/Web/Apps/Modern/Responsive/responsive_design_building_blocks">The building blocks of responsive design</a> — Learn the basics of responsive design, an essential topic for modern app layout.</li>
+ <li><a href="/en-US/docs/Web/Apps/Modern/Responsive/Mobile_first">Mobile first</a> — Often when creating responsive application layouts, it makes sense to create the mobile layout as the default, and build wider layouts on top.</li>
+ <li><a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">Add to home screen guide</a> — Learn how your apps can take advantage of Add to home screen (A2HS).</li>
+</ul>
+</div>
+
+<div class="column-half">
+<h2 id="Tools">Tools</h2>
+
+<ul>
+ <li><a class="external external-icon" href="https://localforage.github.io/localForage/" rel="noopener">localForage</a> — 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.</li>
+ <li><a class="external external-icon" href="https://github.com/fxos-components/serviceworkerware" rel="noopener">ServiceWorkerWare</a> — An <em>Express-like</em> microframework for easy Service Worker development.</li>
+ <li><a class="external external-icon" href="https://github.com/mozilla/oghliner" rel="noopener">oghliner</a> — Not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</li>
+ <li><a class="external external-icon" href="https://github.com/GoogleChrome/sw-precache" rel="noopener">sw-precache</a> — A node module to generate service worker code that will precache specific resources.</li>
+ <li><a class="external external-icon" href="https://github.com/GoogleChrome/workbox" rel="noopener">workbox</a> — Spiritual successor to sw-precache with more advanced caching strategies and easy precaching.</li>
+ <li><a class="external external-icon" href="https://www.talater.com/upup/" rel="noopener">upup</a> — A tiny script that makes sure your site is always there for your users.</li>
+ <li><a class="external external-icon" href="https://serviceworke.rs/" rel="noopener">The service worker cookbook</a> — A series of excellent service worker/push recipes, showing how to implement an offline app, but also much more.</li>
+ <li><a href="https://marketplace.visualstudio.com/items?itemName=mayeedwin.vscode-pwa">PWA VS Code extension</a> - A collection of all essential code snippets you need to build Progressive Web Apps right there in your VS Code environment.</li>
+</ul>
+</div>
+</div>
+
+<ul>
+ <li><a href="https://developers.google.com/web/progressive-web-apps">Progressive web apps</a> on Google Developers.</li>
+ <li><a href="https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955#.6czgj0myh">Progressive Web Apps: Escaping Tabs Without Losing Our Soul</a> by Alex Russell.</li>
+ <li><a href="https://developers.google.com/web/progressive-web-apps/checklist">Progressive Web Apps Check List</a>.</li>
+ <li><a href="https://developers.google.com/web/tools/lighthouse">The Lighthouse Tool</a> by Google.</li>
+ <li><a href="https://github.com/angular/mobile-toolkit">Tools for building progressive web apps with Angular</a>.</li>
+ <li><a href="https://github.com/codebusking/react-pwa-guide-kit">React PWA Guide Kit</a>.</li>
+ <li><a href="https://pokedex.org/">Offline-capable Pokédex web site</a>.</li>
+ <li><a href="https://hnpwa.com/">Hacker News readers as Progressive Web Apps</a>.</li>
+ <li><a href="https://goingmeta.io/progressive-web-app/">Progressive Web App: Advantages in a nutshell</a></li>
+ <li><a href="https://ymedialabs.com/progressive-web-apps">Why Progressive Web Apps Are The Future of Mobile Web (2019 Research)</a>.</li>
+ <li><a href="https://www.csschopper.com/blog/progressive-web-apps-everything-you-need-to-know/">Progressive Web Apps: Everything You Need To Know</a></li>
+ <li><a href="https://pwafire.org">Collection of resources, codelabs and tools you need to build PWAs by the team at pwafire.org</a></li>
+ <li><a href="https://github.com/pwafire/pwadev-tips">Setting up your Progressive Web App Development environment</a></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</div>
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
+---
+<div class="summary">
+<p>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. <span class="seoSummary">The web security-oriented articles listed here provide information that may help you secure your site and its code from attacks and data theft.</span></p>
+</div>
+
+<h2 id="Content_security">Content security</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTTP/CSP">Content security policy (CSP)</a></dt>
+ <dd><strong>Content Security Policy</strong> ({{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.</dd>
+</dl>
+
+<h2 id="Connection_security">Connection security</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Security/Transport_Layer_Security">Transport security layer (TLS)</a></dt>
+ <dd>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.</dd>
+ <dt>HTTPS</dt>
+ <dd><strong>HTTPS</strong> (<strong><em>HyperText Transfer Protocol Secure</em></strong>) is an encrypted version of the <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTTP">HTTP</a> protocol. It uses <a href="https://developer.mozilla.org/en-US/docs/Glossary/SSL">SSL</a> or <a href="https://developer.mozilla.org/en-US/docs/Glossary/TLS">TLS</a> 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.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security">HTTP Strict-Transport-Security</a></dt>
+ <dd>The <code>Strict-Transport-Security:</code> <a href="https://wiki.developer.mozilla.org/en/HTTP" title="en/HTTP">HTTP</a> header lets a website specify that it may only be accessed using HTTPS.</dd>
+ <dt><a href="/en-US/docs/Web/Security/Certificate_Transparency">Certificate Transparency</a></dt>
+ <dd><strong>Certificate Transparency</strong> 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.</dd>
+ <dt><a href="/en-US/docs/Web/Security/Mixed_content">Mixed content</a></dt>
+ <dd>An HTTPS page that includes content fetched using cleartext HTTP is called a <strong>mixed content</strong> page. Pages like this are only partially encrypted, leaving the unencrypted content accessible to sniffers and man-in-the-middle attackers.</dd>
+ <dt><a href="/en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content">How to fix a website with blocked mixed content</a></dt>
+ <dd>If your website delivers HTTPS pages, all <a href="https://wiki.developer.mozilla.org/en-US/docs/Security/MixedContent#Mixed_active_content" title="/en-US/docs/Security/MixedContent#Mixed_active_content">active mixed content</a> 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.). <a href="https://wiki.developer.mozilla.org/en-US/docs/Security/MixedContent#Mixed_passivedisplay_content" title="/en-US/docs/Security/MixedContent#Mixed_passive.2Fdisplay_content">Passive mixed content</a> 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.</dd>
+ <dt><a href="/en-US/docs/Web/Security/Secure_Contexts">Secure contexts</a></dt>
+ <dd>A <strong>secure context</strong> is a <code>Window</code> or <code>Worker</code> 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 <strong>not</strong> secure is limited. Many Web APIs and features are accessible only in a secure context. The primary goal of secure contexts is to prevent <a class="external external-icon" href="https://en.wikipedia.org/wiki/man-in-the-middle attack" rel="noopener" title="man-in-the-middle attackers">man-in-the-middle attackers</a> from accessing powerful APIs that could further compromise the victim of an attack.</dd>
+ <dt><a href="/en-US/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts">Features restricted to secure contexts</a></dt>
+ <dd>This reference lists the web platform features available only in secure contexts.</dd>
+ <dt><a href="/en-US/docs/Web/Security/Weak_Signature_Algorithm">Weak signature algorithms</a></dt>
+ <dd>The strength of the hash algorithm used in <a class="glossaryLink" href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Signature/Security" title="signing: A signature, or digital signature, is a protocol showing that a message is authentic.">signing</a> a <a class="glossaryLink" href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Digital_certificate" title="digital certificate: A digital certificate is a data file that binds a publicly known cryptographic key to an organization.">digital certificate</a> 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.</dd>
+ <dt>Redirection with 301 and 302 response codes</dt>
+ <dd>to be written</dd>
+</dl>
+
+<h2 id="Data_security">Data security</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTTP/Cookies">Using HTTP Cookies</a></dt>
+ <dd>An <dfn>HTTP cookie</dfn> (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.</dd>
+ <dt><a href="/en-US/docs/Web/API/Web_Storage_API/Local_storage">Local storage</a></dt>
+ <dd>The <code>Window</code> object's <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" title="The read-only localStorage property allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions."><code>Window.localStorage</code></a> property is a way for servers to store data on a client that is persistent across sessions.</dd>
+</dl>
+
+<h2 id="Information_leakage">Information leakage</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Referer header policy: privacy and security concerns</a></dt>
+ <dd>There are privacy and security risks associated with the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer">Referer HTTP header</a>. This article describes them and offers advice on mitigating those risks.</dd>
+ <dt>Robots.txt</dt>
+ <dd>to be written</dd>
+ <dt>Site maps</dt>
+ <dd>to be written</dd>
+</dl>
+
+<h2 id="Integrity">Integrity</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Security/Same-origin_policy">Same-origin policy</a></dt>
+ <dd>The <strong>same-origin policy</strong> is a critical security mechanism that restricts how a document or script loaded from one <a href="https://developer.mozilla.org/en-US/docs/Glossary/origin">origin</a> can interact with a resource from another origin. It helps isolate potentially malicious documents, reducing possible attack vectors.</dd>
+ <dt><a href="/en-US/docs/Web/Security/Subresource_Integrity">Subresource integrity</a></dt>
+ <dd><strong>Subresource Integrity</strong> (SRI) is a security feature that enables browsers to verify that resources they fetch (for example, from a <a href="https://developer.mozilla.org/en-US/docs/Glossary/CDN">CDN</a>) are delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched resource must match.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin">HTTP Access-Control-Allow-Origin</a></dt>
+ <dd>The <code><strong>Access-Control-Allow-Origin</strong></code> response header indicates whether the response can be shared with requesting code from the given <a href="https://developer.mozilla.org/en-US/docs/Glossary/origin">origin</a>.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options">HTTP X-Content-Type-Options</a></dt>
+ <dd>
+ <p>The <code><strong>X-Content-Type-Options</strong></code> response HTTP header is a marker used by the server to indicate that the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME types</a> advertised in the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type" title="The Content-Type entity header is used to indicate the media type of the resource."><code>Content-Type</code></a> headers should not be changed and be followed. This is a way to opt-out of <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#MIME_sniffing">MIME type sniffing</a>, or, in other words, to say that the MIME types are deliberately configured.</p>
+ </dd>
+</dl>
+
+<h2 id="Clickjacking_protection">Clickjacking protection</h2>
+
+<p id="sect1">In clickjacking, a user is fooled into clicking on a UI element that performs some action other than what the user expects. </p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTTP/Headers/X-Frame-Options">HTTP X-Frame-Options</a></dt>
+ <dd>The <strong><code>X-Frame-Options</code></strong> <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a> response header can be used to indicate whether or not a browser should be allowed to render a page in a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/frame" title="&lt;frame> is an HTML element which defines a particular area in which another HTML document can be displayed. A frame should be used within a &lt;frameset>."><code>&lt;frame&gt;</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="The HTML Inline Frame element (&lt;iframe>) represents a nested browsing context, embedding another HTML page into the current one."><code>&lt;iframe&gt;</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed" title="The HTML &lt;embed> element embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in."><code>&lt;embed&gt;</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object" title="The HTML &lt;object> element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin."><code>&lt;object&gt;</code></a>. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors">CSP: frame-ancestors</a></dt>
+ <dd>The HTTP <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy" title="The HTTP Content-Security-Policy response header allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints. This helps guard against cross-site scripting attacks (XSS)."><code>Content-Security-Policy</code></a> (CSP) <code><strong>frame-ancestors</strong></code> directive specifies valid parents that may embed a page using <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/frame" title="&lt;frame> is an HTML element which defines a particular area in which another HTML document can be displayed. A frame should be used within a &lt;frameset>."><code>&lt;frame&gt;</code></a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="The HTML Inline Frame element (&lt;iframe>) represents a nested browsing context, embedding another HTML page into the current one."><code>&lt;iframe&gt;</code></a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/object" title="The HTML &lt;object> element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin."><code>&lt;object&gt;</code></a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/embed" title="The HTML &lt;embed> element embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in."><code>&lt;embed&gt;</code></a>, or <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/applet" title="The obsolete HTML Applet Element (&lt;applet>) embeds a Java applet into the document; this element has been deprecated in favor of &lt;object>."><code>&lt;applet&gt;</code></a>.</dd>
+</dl>
+
+<h2 id="User_information_security">User information security</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Security/Insecure_passwords">Insecure passwords</a></dt>
+ <dd>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.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector">Privacy and the :visited selector</a></dt>
+ <dd>Before about 2010, the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/:visited" title="The :visited CSS pseudo-class represents links that the user has already visited. For privacy reasons, the styles that can be modified using this selector are very limited."><code>:visited</code></a> 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.</dd>
+</dl>
+
+<h2 id="Security-related_glossary_terms">Security-related glossary terms</h2>
+
+<div class="twocolumns">
+<ul>
+ <li>
+  <p>{{Glossary("Block cipher mode of operation")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("Certificate authority")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("challenge", "Challenge-response authentication")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("Cipher")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("Cipher suite")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("Ciphertext")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("CORS")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("CORS-safelisted request header")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("CORS-safelisted response header")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("Cross-site scripting")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("Cryptanalysis")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("Cryptographic hash function")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("Cryptography")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("CSP")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("CSRF")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("Decryption")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("Digital certificate")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("DTLS")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("Encryption")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("Forbidden header name")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("Forbidden response header name")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("Hash")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("HMAC")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("HPKP")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("HSTS")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("HTTPS")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("Key")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("MitM")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("OWASP")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("Preflight request")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("Public-key cryptography")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("Reporting directive")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("Robots.txt")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("Same-origin policy")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("Session hijacking")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("SQL injection")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("Symmetric-key cryptography")}}</p>
+ </li>
+ <li>
+  <p>{{Glossary("TOFU")}}</p>
+ </li>
+</ul>
+
+<ul>
+ <li>
+  <p>{{Glossary("TLS")}}</p>
+ </li>
+</ul>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://lists.mozilla.org/listinfo/dev-security">Mozilla security mailing list</a></li>
+ <li><a href="https://blog.mozilla.com/security/">Security Blog</a></li>
+ <li><a href="https://twitter.com/mozsec">@mozsec on Twitter</a></li>
+</ul>
+
+<p>{{QuickLinksWithSubpages}}</p>
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
+---
+<p>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. <span class="seoSummary">An HTTPS page that includes content fetched using cleartext HTTP is called a <strong>mixed content</strong> page. Pages like this are only partially encrypted, leaving the unencrypted content accessible to sniffers and man-in-the-middle attackers.</span> That leaves the pages unsafe.</p>
+
+<h2 id="Types_of_mixed_content">Types of mixed content</h2>
+
+<p>There are two categories for mixed content: <strong>mixed passive/display content</strong> and <strong>mixed active content</strong>. 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.</p>
+
+<h3 id="Mixed_passivedisplay_content">Mixed passive/display content</h3>
+
+<p>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.</p>
+
+<h4 id="Passive_content_list">Passive content list</h4>
+
+<p>This section lists all types of HTTP requests which are considered passive content:</p>
+
+<ul>
+ <li>{{HTMLElement("img")}} (<code>src</code> attribute)</li>
+ <li>{{HTMLElement("audio")}} (<code>src</code> attribute)</li>
+ <li>{{HTMLElement("video")}} (<code>src</code> attribute)</li>
+ <li>{{HTMLElement("object")}} subresources (when an <code>&lt;object&gt;</code> performs HTTP requests)</li>
+</ul>
+
+<h3 id="Mixed_active_content">Mixed active content</h3>
+
+<p><strong>Mixed active content</strong> 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.</p>
+
+<p>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).</p>
+
+<p>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.</p>
+
+<h4 id="Active_content_examples">Active content examples</h4>
+
+<p>This section lists some types of HTTP requests which are considered active content:</p>
+
+<ul>
+ <li>{{HTMLElement("script")}} (<code>src</code> attribute)</li>
+ <li>{{HTMLElement("link")}} (<code>href</code> attribute) (this includes CSS stylesheets)</li>
+ <li>{{HTMLElement("iframe")}} (<code>src</code> attribute)</li>
+ <li>{{domxref("XMLHttpRequest")}} requests</li>
+ <li>{{domxref("GlobalFetch.fetch","fetch()")}} requests</li>
+ <li>All cases in CSS where a {{cssxref("url")}} value is used ({{cssxref("@font-face")}}, {{cssxref("cursor")}}, {{cssxref("background-image")}}, and so forth).</li>
+ <li>{{HTMLElement("object")}} (<code>data</code> attribute)</li>
+ <li>{{domxref("Navigator.sendBeacon")}} (<code>url</code> attribute)</li>
+</ul>
+
+<p>Other resource types like web fonts and workers may be considered active mixed content, as they are in Chrome.</p>
+
+<h2 id="Warnings_in_Web_Console">Warnings in Web Console</h2>
+
+<p>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.</p>
+
+<p><a class="internal" href="/files/12545/Mixed_content_-_Net_pane.png"><img alt="Screen shot of the web console displaying a mixed content warning." src="https://mdn.mozillademos.org/files/12545/Mixed_content_-_Net_pane.png" style="border-style: solid; border-width: 1px; height: 286px; width: 720px;"></a></p>
+
+<p>As well as finding these warnings in the Web Console, you could use <a href="/en-US/docs/Web/HTTP/CSP">Content Security Policy (CSP)</a> to report issues. You could also use an online crawler like <a href="http://www.jitbit.com/sslcheck/" rel="noopener">SSL-check</a> or <a href="https://www.missingpadlock.com/" rel="noopener">Missing Padlock</a> that will check your website recursively and find links to insecure content.</p>
+
+<p>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:</p>
+
+<p><a href="/files/5261/blocked-mixed-content-errors.png"><img alt="A screenshot of blocked mixed content errors in the Security Pane of the Web Console" src="https://mdn.mozillademos.org/files/12543/mixed_content_webconsole.png" style="border-style: solid; border-width: 1px; height: 285px; width: 720px;"></a></p>
+
+<p>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.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 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.</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://w3c.github.io/webappsec/specs/mixedcontent/" title="https://w3c.github.io/webappsec/specs/mixedcontent/">Mixed Content - W3C Editor's Draft</a></li>
+ <li><a href="/en-US/docs/Security/Mixed_content/How_to_fix_website_with_mixed_content">How to fix a website with blocked mixed content</a></li>
+</ul>
+
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</p>
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
+---
+<p><font><font>ลิงค์ในหน้านี้นำไปสู่บทเรียนและสื่อการฝึกอบรมที่หลากหลาย </font><font>ไม่ว่าคุณจะเพิ่งเริ่มเรียนรู้พื้นฐานหรือเป็นมือเก่าในการพัฒนาเว็บคุณสามารถค้นหาแหล่งข้อมูลที่เป็นประโยชน์ที่นี่เพื่อการปฏิบัติที่ดีที่สุด</font></font></p>
+
+<p><font><font>ทรัพยากรเหล่านี้ถูกสร้างขึ้นโดย บริษัท ที่มีความคิดก้าวหน้าและนักพัฒนาเว็บที่ยอมรับมาตรฐานแบบเปิดและแนวปฏิบัติที่ดีที่สุดสำหรับการพัฒนาเว็บและให้หรืออนุญาตการแปลผ่านใบอนุญาตเนื้อหาแบบเปิดเช่น Creative Commons</font></font></p>
+
+<h2 id="สำหรับผู้เริ่มต้นที่สามารถ​ติดต่อ​ขอ​ขอ​ขอ​ตมจบูรณ์บนเว็บ"><font><font>สำหรับผู้เริ่มต้นที่สามารถ​ติดต่อ​ขอ​ขอ​ขอ​ตมจบูรณ์บนเว็บ</font></font></h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Getting_started_with_the_web"><font><font>เริ่มต้นกับเว็บ </font></font></a></dt>
+ <dd><em><font><font>การเริ่มต้นใช้งานเว็บ</font></font></em><font><font>เป็นชุดย่อที่แนะนำให้คุณรู้จักกับการปฏิบัติจริงของการพัฒนาเว็บ </font><font>คุณจะตั้งค่าเครื่องมือที่คุณต้องการในการสร้างหน้าเว็บอย่างง่ายและเผยแพร่โค้ดอย่างง่ายของคุณเอง</font></font></dd>
+</dl>
+
+<h2 class="Documentation" id="HTML-Tutorials" name="HTML-Tutorials"><font><font>บทเรียน HTML</font></font></h2>
+
+<h3 id="ระดับเบื้องต้น"><font><font>ระดับเบื้องต้น</font></font></h3>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML"><font><font>รู้เบื้องต้นเกี่ยวกับ HTML</font></font></a></dt>
+ <dd><font><font>โมดูลนี้ตั้งค่าขั้นตอนให้คุณคุ้นเคยกับแนวคิดและไวยากรณ์ที่สำคัญดูที่การใช้ HTML กับข้อความวิธีสร้างการเชื่อมโยงหลายมิติและวิธีการใช้ HTML เพื่อจัดโครงสร้างหน้าเว็บ</font></font></dd>
+ <dt><strong><a href="/en-US/docs/HTML/Element"><font><font>การอ้างอิงองค์ประกอบ MDN HTML</font></font></a></strong></dt>
+ <dd><font><font>การอ้างอิงที่ครอบคลุมสำหรับองค์ประกอบ HTML และวิธีการที่เบราว์เซอร์ต่างๆสนับสนุนพวกเขา</font></font></dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><strong><a href="https://www.theblogstarter.com/html-for-beginners"><font><font>การสร้างเว็บเพจอย่างง่ายด้วย HTML</font></font></a> </strong></dt>
+ <dd><font><font>คำแนะนำ HTML สำหรับผู้เริ่มต้นที่มีคำอธิบายของแท็กทั่วไปรวมถึงแท็ก HTML5 </font><font>นอกจากนี้ยังมีคำแนะนำทีละขั้นตอนในการสร้างหน้าเว็บพื้นฐานพร้อมตัวอย่างโค้ด</font></font></dd>
+ <dt><strong><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external"><font><font>ความท้าทาย HTML</font></font></a> </strong></dt>
+ <dd><font><font>ใช้ความท้าทายเหล่านี้เพื่อฝึกฝนทักษะ HTML ของคุณ (ตัวอย่างเช่น "ฉันควรใช้องค์ประกอบ &lt;h2&gt; หรือองค์ประกอบ &lt;strong&gt; หรือไม่") โดยเน้นที่มาร์กอัปที่มีความหมาย</font></font></dd>
+</dl>
+</div>
+</div>
+
+<h3 id="ระดับกลาง"><font><font>ระดับกลาง</font></font></h3>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding"><font><font>มัลติมีเดียและการฝัง</font></font></a></dt>
+ <dd><font><font>โมดูลนี้สำรวจวิธีการใช้ HTML เพื่อรวมมัลติมีเดียในหน้าเว็บของคุณรวมถึงวิธีการต่าง ๆ ที่สามารถรวมรูปภาพและวิธีฝังวิดีโอเสียงและแม้แต่หน้าเว็บอื่น ๆ ทั้งหมด</font></font></dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables"><font><font>ตาราง HTML</font></font></a></dt>
+ <dd>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.</dd>
+</dl>
+</div>
+</div>
+
+<h3 id="Advanced_level">Advanced level</h3>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML forms</a></dt>
+ <dd>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.</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><strong><a href="/en-US/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">Tips for authoring fast-loading HTML pages</a></strong></dt>
+ <dd>Optimize web pages to provide a more responsive site for visitors and reduce the load on your web server and Internet connection.</dd>
+</dl>
+</div>
+</div>
+
+<h2 class="Documentation" id="CSS-Tutorials" name="CSS-Tutorials">CSS Tutorials</h2>
+
+<h3 id="Introductory_level">Introductory level</h3>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></dt>
+ <dd><font><font>CSS (Cascading Style Sheets) เป็นรหัสที่คุณใช้เพื่อจัดรูปแบบหน้าเว็บของคุณ </font></font><em><font><font>CSS Basics</font></font></em><font><font>นำคุณไปสู่สิ่งที่คุณต้องเริ่มต้น </font><font>เราจะตอบคำถามเช่น: ฉันจะทำให้ข้อความของฉันเป็นสีดำหรือสีแดงได้อย่างไร </font><font>ฉันจะทำให้เนื้อหาของฉันปรากฏในสถานที่เช่นนั้นบนหน้าจอได้อย่างไร </font><font>ฉันจะตกแต่งเว็บเพจด้วยภาพพื้นหลังและสีได้อย่างไร</font></font></dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS"><font><font>CSS เบื้องต้น</font></font></a></dt>
+ <dd><font><font>โมดูลนี้มีเนื้อหาเชิงลึกเกี่ยวกับวิธีการทำงานของ CSS รวมถึงตัวเลือกและคุณสมบัติการเขียนกฎ CSS การใช้ CSS กับ HTML วิธีการระบุความยาวสีและหน่วยอื่น ๆ ใน CSS การเรียงซ้อนและการสืบทอดข้อมูลพื้นฐานโมเดลโมเดลและการดีบัก CSS</font></font></dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes"><font><font>กล่องใส่สไตล์</font></font></a></dt>
+ <dd><font><font>ต่อไปเราจะดูกล่องใส่สไตล์ซึ่งเป็นหนึ่งในขั้นตอนพื้นฐานในการวางหน้าเว็บ </font><font>ในโมดูลนี้เราสรุปโมเดลของกล่องจากนั้นดูที่การควบคุมเลย์เอาต์ของกล่องโดยการตั้งค่าช่องว่างภายในขอบและระยะขอบการตั้งค่าสีพื้นหลังที่กำหนดเองรูปภาพและคุณสมบัติอื่น ๆ และคุณสมบัติแฟนซีเช่นเงาและตัวกรองบนกล่อง</font></font></dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text"><font><font>ข้อความสไตล์</font></font></a></dt>
+ <dd><font><font>ที่นี่เราดูที่พื้นฐานการใส่สไตล์ข้อความรวมถึงการตั้งค่าแบบอักษรความหนาและตัวเอียงตัวเว้นบรรทัดและตัวอักษรและเงาและตัวอักษรและคุณสมบัติข้อความอื่น ๆ </font><font>เราปัดเศษโมดูลโดยดูที่การใช้ฟอนต์ที่กำหนดเองกับหน้าของคุณและรายการจัดแต่งทรงผมและลิงค์</font></font></dd>
+ <dt><strong><a href="/en-US/docs/Common_CSS_Questions"><font><font>คำถาม CSS ทั่วไป</font></font></a></strong></dt>
+ <dd><font><font>คำถามและคำตอบทั่วไปสำหรับผู้เริ่มต้น</font></font></dd>
+</dl>
+</div>
+</div>
+
+<h3 id="ระดับกลาง_2"><font><font>ระดับกลาง</font></font></h3>
+
+<div class="row topicpage-table" style="width: 100%;">
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout"><font><font>โครงร่าง CSS</font></font></a></dt>
+ <dd><font><font>ณ จุดนี้เราได้ดูพื้นฐาน CSS, วิธีจัดรูปแบบข้อความและวิธีจัดรูปแบบและจัดการกล่องที่เนื้อหาของคุณอยู่ภายใน </font><font>ตอนนี้เป็นเวลาที่จะดูวิธีการวางกล่องของคุณในสถานที่ที่เหมาะสมในความสัมพันธ์กับวิวพอร์ตและอีกคนหนึ่ง </font><font>เราได้ครอบคลุมข้อกำหนดเบื้องต้นที่จำเป็นเพื่อให้สามารถดำน้ำลึกลงในเค้าโครง CSS ได้โดยดูที่การตั้งค่าการแสดงผลที่แตกต่างกันวิธีการจัดวางแบบดั้งเดิมที่เกี่ยวข้องกับการลอยและการวางตำแหน่งและเครื่องมือเค้าโครงแบบใหม่</font></font></dd>
+ <dt><strong><a href="/en-US/docs/CSS/CSS_Reference"><font><font>การอ้างอิง CSS</font></font></a></strong></dt>
+ <dd><font><font>อ้างอิง CSS ทั้งหมดโดยมีรายละเอียดเกี่ยวกับการสนับสนุนโดย Firefox และเบราว์เซอร์อื่น ๆ</font></font></dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><strong><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external"><font><font>กริดของไหล</font></font></a></strong></dt>
+ <dd><font><font>ออกแบบเลย์เอาต์ที่ปรับขนาดได้อย่างคล่องแคล่วกับหน้าต่างเบราว์เซอร์ในขณะที่ยังคงใช้ตารางตัวพิมพ์</font></font></dd>
+ <dt><strong><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external"><font><font>ความท้าทาย CSS</font></font></a> </strong></dt>
+ <dd><font><font>ยืดหยุ่นทักษะ CSS ของคุณและดูว่าคุณต้องการฝึกฝนอะไรมาก</font></font></dd>
+</dl>
+</div>
+</div>
+
+<h3 id="ระดับสูง"><font><font>ระดับสูง</font></font></h3>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><strong><a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms"><font><font>การใช้การแปลง CSS</font></font></a></strong></dt>
+ <dd><font><font>ใช้การหมุนการเอียงการปรับขนาดและการแปลโดยใช้ CSS</font></font></dd>
+ <dt><strong><a href="/en-US/docs/CSS/CSS_transitions"><font><font>การเปลี่ยน CSS</font></font></a></strong></dt>
+ <dd><font><font>การเปลี่ยน CSS ซึ่งเป็นส่วนหนึ่งของข้อกำหนด CSS3 แบบร่างให้วิธีในการสร้างการเปลี่ยนแปลงคุณสมบัติของ CSS แทนที่จะทำให้การเปลี่ยนแปลงมีผลทันที</font></font></dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><strong><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external"><font><font>คู่มือฉบับย่อเพื่อปรับใช้แบบอักษรบนเว็บ (ด้วย @ font-face)</font></font></a> </strong></dt>
+ <dd><font><font>คุณลักษณะ @ font-face จาก CSS3 ช่วยให้คุณใช้แบบอักษรที่กำหนดเองบนเว็บในแบบที่เข้าถึงได้จัดการได้และปรับขนาดได้</font></font></dd>
+ <dt><strong><a href="http://davidwalsh.name/starting-css" rel="external"><font><font>เริ่มเขียน CSS</font></font></a> </strong></dt>
+ <dd><font><font>การแนะนำเครื่องมือและวิธีการในการเขียน CSS ที่กระชับง่ายต่อการบำรุงรักษาและปรับขนาดได้</font></font></dd>
+</dl>
+</div>
+</div>
+
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial"><font><font>แบบฝึกหัด Canvas</font></font></a></dt>
+ <dd><font><font>เรียนรู้วิธีการวาดกราฟิกโดยใช้สคริปต์โดยใช้องค์ประกอบภาพวาด</font></font></dd>
+ <dt><strong><a href="http://html5doctor.com/" rel="external"><font><font>HTML5 Doctor</font></font></a></strong></dt>
+ <dd><font><font>บทความเกี่ยวกับการใช้ HTML5 ในขณะนี้</font></font></dd>
+</dl>
+</div>
+
+<h2 class="Documentation" id="JavaScript-Tutorials" name="JavaScript-Tutorials"><font><font>จาวาสคริปต์</font></font></h2>
+
+<h3 id="ระดับเบื้องต้น_2"><font><font>ระดับเบื้องต้น</font></font></h3>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps"><font><font>JavaScript ขั้นตอนแรก</font></font></a></dt>
+ <dd><font><font>ในโมดูล JavaScript แรกของเราเราจะตอบคำถามพื้นฐานบางอย่างเช่น "JavaScript คืออะไร", "มันมีลักษณะอย่างไร" และ "ทำอะไรได้บ้าง" ก่อนที่จะนำคุณไปสู่ประสบการณ์การใช้งานจริงครั้งแรกของคุณ ของการเขียน JavaScript </font><font>หลังจากนั้นเราจะพูดถึงคุณสมบัติที่สำคัญของ JavaScript ในรายละเอียดเช่นตัวแปรสตริงตัวเลขและอาร์เรย์</font></font></dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks"><font><font>การสร้างบล็อก JavaScript</font></font></a></dt>
+ <dd><font><font>ในโมดูลนี้เรายังคงให้ความสำคัญกับคุณสมบัติพื้นฐานที่สำคัญทั้งหมดของ JavaScript โดยหันความสนใจไปที่ประเภทของบล็อคโค้ดที่พบทั่วไปเช่นข้อความสั่งเงื่อนไขเงื่อนไขลูปฟังก์ชันและกิจกรรม </font><font>คุณเคยเห็นสิ่งนี้มาแล้วในหลักสูตร แต่เมื่อผ่านไป - ที่นี่เราจะพูดถึงมันทั้งหมดอย่างชัดเจน</font></font></dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics"><font><font>เริ่มต้นกับ JavaScript</font></font></a></dt>
+ <dd><font><font>JavaScript คืออะไรและจะช่วยคุณได้อย่างไร</font></font></dd>
+ <dt><strong><a href="http://www.codecademy.com/"><font><font>Codecademy</font></font></a> </strong></dt>
+ <dd><font><font>Codecademy เป็นวิธีที่ง่ายในการเรียนรู้วิธีการรหัส JavaScript </font><font>มันเป็นแบบโต้ตอบและคุณสามารถทำได้กับเพื่อนของคุณ</font></font></dd>
+ <dt><a href="https://learn.freecodecamp.org/"><font><font>freeCodeCamp</font></font></a></dt>
+ <dd><font><font>freeCodeCamp สอนภาษาและกรอบต่าง ๆ สำหรับการพัฒนาเว็บ </font><font>นอกจากนี้ยังมี  </font></font><a href="https://freecodecamp.org/forum"><font><font>ฟอรั่ม</font></font></a><font><font>การ  </font></font><a href="https://coderadio.freecodecamp.org"><font><font>สถานีวิทยุอินเทอร์เน็ต</font></font></a><font><font>และ</font><font>บล็อก</font></font></dd>
+</dl>
+</div>
+</div>
+
+<h3 id="ระดับกลาง_3"><font><font>ระดับกลาง</font></font></h3>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects"><font><font>แนะนำวัตถุ JavaScript</font></font></a></dt>
+ <dd><font><font>ใน JavaScript สิ่งต่าง ๆ ส่วนใหญ่เป็นวัตถุตั้งแต่คุณสมบัติหลักของ JavaScript เช่นสตริงและอาร์เรย์ไปจนถึง API ของเบราว์เซอร์ที่สร้างขึ้นจาก JavaScript </font><font>คุณสามารถสร้างวัตถุของคุณเองเพื่อแค็ปซูลฟังก์ชั่นและตัวแปรที่เกี่ยวข้องลงในแพ็คเกจที่มีประสิทธิภาพ </font><font>ลักษณะเชิงวัตถุของ JavaScript นั้นมีความสำคัญที่จะต้องเข้าใจหากคุณต้องการเพิ่มเติมความรู้ภาษาและเขียนโค้ดที่มีประสิทธิภาพมากขึ้นดังนั้นเราจึงได้จัดเตรียมโมดูลนี้เพื่อช่วยคุณ </font><font>ที่นี่เราสอนทฤษฎีของวัตถุและไวยากรณ์อย่างละเอียดดูที่วิธีสร้างวัตถุของคุณเองและอธิบายว่าข้อมูล JSON คืออะไรและทำงานอย่างไรกับมัน</font></font></dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs"><font><font>APIs เว็บฝั่งไคลเอ็นต์</font></font></a></dt>
+ <dd><font><font>เมื่อเขียน JavaScript ฝั่งไคลเอ็นต์สำหรับเว็บไซต์หรือแอปพลิเคชันคุณจะไม่ไปไกลมากนักก่อนที่คุณจะเริ่มใช้ API - ส่วนต่อประสานสำหรับจัดการกับแง่มุมต่าง ๆ ของเบราว์เซอร์และระบบปฏิบัติการที่เว็บไซต์ทำงานอยู่หรือแม้แต่ข้อมูลจากเว็บไซต์หรือบริการอื่น ๆ . </font><font>ในโมดูลนี้เราจะสำรวจว่า API คืออะไรและวิธีใช้ API ทั่วไปที่คุณพบเจอบ่อยครั้งในงานพัฒนาของคุณ </font></font></dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><strong><a href="/en-US/docs/A_re-introduction_to_JavaScript"><font><font>บทนำสู่ JavaScript</font></font></a></strong></dt>
+ <dd><font><font>บทสรุปของภาษาการเขียนโปรแกรม JavaScript มุ่งเป้าไปที่นักพัฒนาระดับกลาง</font></font></dd>
+ <dt><strong><a href="http://eloquentjavascript.net/" rel="external"><font><font>ฝีปากจาวาสคริปต์</font></font></a></strong></dt>
+ <dd><font><font>คู่มือที่ครอบคลุมถึงวิธีการใช้งาน JavaScript ระดับกลางและระดับสูง</font></font></dd>
+ <dt><strong><a href="http://speakingjs.com/es5/" rel="external"><font><font>การพูดจาวาสคริปต์</font></font></a> </strong></dt>
+ <dd><font><font>สำหรับโปรแกรมเมอร์ที่ต้องการเรียนรู้ JavaScript อย่างรวดเร็วและถูกต้องและสำหรับโปรแกรมเมอร์ JavaScript ที่ต้องการเพิ่มพูนทักษะและ / หรือค้นหาหัวข้อเฉพาะ</font></font></dd>
+ <dt><strong><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external"><font><font>รูปแบบการออกแบบ JavaScript ที่สำคัญ</font></font></a> </strong></dt>
+ <dd><font><font>คำแนะนำเกี่ยวกับรูปแบบการออกแบบ JavaScript ที่สำคัญ</font></font></dd>
+</dl>
+</div>
+</div>
+
+<h3 id="ระดับสูง_2"><font><font>ระดับสูง</font></font></h3>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Guide"><font><font>คู่มือการใช้งาน JavaScript</font></font></a></dt>
+ <dd><font><font>คู่มือที่ครอบคลุมและอัปเดตเป็นประจำเพื่อ JavaScript สำหรับการเรียนรู้ทุกระดับตั้งแต่เริ่มต้นจนถึงขั้นสูง</font></font></dd>
+ <dt><strong><a href="https://github.com/getify/You-Dont-Know-JS" rel="external"><font><font>คุณไม่รู้ JS</font></font></a> </strong></dt>
+ <dd><font><font>ชุดของหนังสือดำน้ำลึกเข้าไปในกลไกหลักของภาษาจาวา</font></font></dd>
+ <dt><strong><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external"><font><font>จาวาสคริปต์การ์เด้น</font></font></a></strong></dt>
+ <dd><font><font>เอกสารของส่วนที่แปลกประหลาดที่สุดของ JavaScript</font></font></dd>
+ <dt><strong><a href="http://exploringjs.com/es6/" rel="external"><font><font>สำรวจ ES6</font></font></a> </strong></dt>
+ <dd><font><font>ข้อมูลที่เชื่อถือได้และในเชิงลึกเกี่ยวกับ ECMAScript 2015</font></font></dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><strong><a href="http://shichuan.github.io/javascript-patterns" rel="external"><font><font>รูปแบบ JavaScript</font></font></a></strong></dt>
+ <dd><font><font>รูปแบบ JavaScript และคอลเลกชัน antipattern ที่ครอบคลุมรูปแบบการทำงานรูปแบบ jQuery รูปแบบปลั๊กอิน jQuery รูปแบบการออกแบบรูปแบบทั่วไปตัวอักษรและรูปแบบตัวสร้างรูปแบบการสร้างวัตถุรูปแบบการใช้รหัสซ้ำ DOM</font></font></dd>
+ <dt><strong><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/"><font><font>เบราว์เซอร์ทำงานอย่างไร</font></font></a></strong></dt>
+ <dd><font><font>บทความวิจัยโดยละเอียดที่อธิบายถึงเบราว์เซอร์ที่ทันสมัยเครื่องมือการแสดงผลหน้า ฯลฯ</font></font></dd>
+ <dt><a href="https://github.com/bolshchikov/js-must-watch"><font><font>วิดีโอ JavaScript</font></font></a> </dt>
+ <dd><font><font>คอลเลกชันวิดีโอ JavaScript เพื่อดู</font></font></dd>
+</dl>
+</div>
+</div>
+
+<h3 id="การพัฒนาเสริม"><font><font>การพัฒนาเสริม</font></font></h3>
+
+<div class="row topicpage-table" style="width: 100%;">
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions"><font><font>WebExtensions</font></font></a></dt>
+ <dd><font><font>WebExtensions เป็นระบบข้ามเบราว์เซอร์สำหรับการพัฒนาโปรแกรมเสริมของเบราว์เซอร์ </font><font>ในระดับใหญ่ระบบสามารถทำงานร่วมกับ</font></font><a class="external-icon external" href="https://developer.chrome.com/extensions"><font><font>API ส่วนขยายที่</font></font></a><font><font>รองรับโดย Google Chrome และ Opera </font><font>ส่วนใหญ่ที่เขียนไว้สำหรับเบราว์เซอร์เหล่านี้ส่วนใหญ่จะทำงานใน Firefox หรือ</font></font><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/"><font><font>Microsoft Edge</font></font></a><font><font>โดย</font></font><a href="/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome"><font><font>มีการเปลี่ยนแปลง</font></font></a><font><font>เล็กน้อย </font><font>API ที่ยังเป็นอย่างเข้ากันได้กับ</font></font><a href="/en-US/Firefox/Multiprocess_Firefox"><font><font>multiprocess </font></font></a><font><font>Firefox</font></font></dd>
+</dl>
+</div>
+</div>