diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
| commit | 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch) | |
| tree | a9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/th | |
| parent | 074785cea106179cb3305637055ab0a009ca74f2 (diff) | |
| download | translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.gz translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.bz2 translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.zip | |
initial commit
Diffstat (limited to 'files/th')
110 files changed, 11838 insertions, 0 deletions
diff --git a/files/th/_redirects.txt b/files/th/_redirects.txt new file mode 100644 index 0000000000..9d8f424d62 --- /dev/null +++ b/files/th/_redirects.txt @@ -0,0 +1,8 @@ +# FROM-URL TO-URL +/th/docs/MDN/Getting_started /th/docs/MDN/Contribute/Getting_started +/th/docs/Tools/WebIDE/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%97%E0%B8%B3%E0%B8%87%E0%B8%B2%E0%B8%99%E0%B8%A3%E0%B9%88%E0%B8%A7%E0%B8%A1%E0%B8%81%E0%B8%B1%E0%B8%9A%E0%B8%84%E0%B8%AD%E0%B8%A3%E0%B9%8C%E0%B9%82%E0%B8%94%E0%B8%A7%E0%B8%B2%E0%B9%81%E0%B8%AD%E0%B8%9E%E0%B8%9E%E0%B8%A5%E0%B8%B4%E0%B9%80%E0%B8%84%E0%B8%8A%E0%B8%B1%E0%B9%88%E0%B8%99%E0%B9%83%E0%B8%99_WebIDE /th/docs/Tools/WebIDE/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%97%E0%B9%8D%E0%B8%B2%E0%B8%87%E0%B8%B2%E0%B8%99%E0%B8%A3%E0%B9%88%E0%B8%A7%E0%B8%A1%E0%B8%81%E0%B8%B1%E0%B8%9A%E0%B8%84%E0%B8%AD%E0%B8%A3%E0%B9%8C%E0%B9%82%E0%B8%94%E0%B8%A7%E0%B8%B2%E0%B9%81%E0%B8%AD%E0%B8%9E%E0%B8%9E%E0%B8%A5%E0%B8%B4%E0%B9%80%E0%B8%84%E0%B8%8A%E0%B8%B1%E0%B9%88%E0%B8%99%E0%B9%83%E0%B8%99_WebIDE +/th/docs/Web/Guide/CSS /th/docs/Learn/CSS +/th/docs/Web/Guide/CSS/Using_CSS_animations /th/docs/Web/CSS/CSS_Animations/Using_CSS_animations +/th/docs/Web/Guide/HTML /th/docs/Learn/HTML +/th/docs/Web/Guide/HTML/%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B9%80%E0%B8%9A%E0%B8%B7%E0%B9%89%E0%B8%AD%E0%B8%87%E0%B8%95%E0%B9%89%E0%B8%99 /th/docs/Learn/HTML/Introduction_to_HTML +/th/docs/en /en-US/ diff --git a/files/th/_wikihistory.json b/files/th/_wikihistory.json new file mode 100644 index 0000000000..7bdd82ca66 --- /dev/null +++ b/files/th/_wikihistory.json @@ -0,0 +1,472 @@ +{ + "Glossary": { + "modified": "2020-10-07T11:14:20.810Z", + "contributors": [ + "peterbe", + "SphinxKnight", + "wbamberg", + "david_ross" + ] + }, + "Glossary/Data_structure": { + "modified": "2019-09-01T17:43:14.582Z", + "contributors": [ + "relta", + "Mr-nojoke" + ] + }, + "Learn": { + "modified": "2020-07-16T22:43:48.437Z", + "contributors": [ + "SphinxKnight", + "relta", + "miniy11mm", + "NeuxSLX", + "Sleeplesx", + "khaolek", + "reisizer", + "kscarfone" + ] + }, + "Learn/Accessibility": { + "modified": "2020-07-16T22:40:00.935Z", + "contributors": [ + "msobanjo" + ] + }, + "Learn/CSS": { + "modified": "2020-07-16T22:25:37.531Z", + "contributors": [ + "Andrew_Pfeiffer" + ] + }, + "Learn/Front-end_web_developer": { + "modified": "2020-08-16T11:08:31.575Z", + "contributors": [ + "wanchaiwuthikun", + "SphinxKnight", + "pong559" + ] + }, + "Learn/HTML": { + "modified": "2020-07-16T22:22:23.884Z", + "contributors": [ + "TornadoIDS" + ] + }, + "Learn/JavaScript": { + "modified": "2020-07-16T22:29:44.958Z", + "contributors": [ + "SphinxKnight" + ] + }, + "Learn/ฝั่งเซิร์ฟเวอร์": { + "modified": "2020-08-22T12:32:08.079Z", + "contributors": [ + "luciferz2130" + ] + }, + "Learn/เริ่มต้นใช้งานเว็บ": { + "modified": "2020-08-22T12:21:31.189Z", + "contributors": [ + "luciferz2130" + ] + }, + "MDN": { + "modified": "2020-02-19T17:58:18.306Z", + "contributors": [ + "jswisher", + "SphinxKnight", + "wbamberg", + "Jeremie", + "Panan", + "Sheppy" + ] + }, + "MDN/Contribute": { + "modified": "2019-01-16T18:29:32.685Z", + "contributors": [ + "wbamberg", + "boymanomai", + "Sheppy" + ] + }, + "MDN/Contribute/Getting_started": { + "modified": "2020-09-30T17:16:18.005Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "wichai05", + "Ahmad.Safie", + "reisizer", + "puidesu", + "satthawut" + ] + }, + "MDN/Contribute/Howto": { + "modified": "2020-12-07T19:29:57.352Z", + "contributors": [ + "wbamberg", + "jswisher" + ] + }, + "MDN/Contribute/Howto/Create_an_MDN_account": { + "modified": "2019-04-30T21:53:50.225Z", + "contributors": [ + "wbamberg", + "wittawat456" + ] + }, + "MDN/Contribute/Howto/Do_a_technical_review": { + "modified": "2019-07-02T19:28:15.866Z", + "contributors": [ + "aliceparklad", + "wbamberg", + "nhoobee", + "daneeyan" + ] + }, + "MDN/Contribute/Localize": { + "modified": "2019-01-16T19:30:54.828Z", + "contributors": [ + "wbamberg", + "Sheppy" + ] + }, + "MDN/Contribute/Localize/Translating_pages": { + "modified": "2019-03-23T23:09:24.482Z", + "contributors": [ + "wbamberg", + "reisizer", + "Panan", + "satthawut", + "Kaanpakpum" + ] + }, + "MDN_at_ten": { + "modified": "2019-03-23T22:48:09.302Z", + "contributors": [ + "wkforever" + ] + }, + "Mozilla": { + "modified": "2019-03-23T23:27:29.227Z", + "contributors": [ + "Nampa", + "Sheppy" + ] + }, + "Mozilla/Developer_guide": { + "modified": "2019-03-23T23:10:45.317Z", + "contributors": [ + "Sheppy" + ] + }, + "Mozilla/Firefox": { + "modified": "2019-09-10T15:02:19.712Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "taksakorn", + "matchbox_par", + "rigelenrique", + "Nampa", + "satthawut" + ] + }, + "Mozilla/Firefox/เปิดผนึก": { + "modified": "2019-01-16T18:30:43.586Z", + "contributors": [ + "wbamberg", + "Nampa" + ] + }, + "Mozilla/Firefox/เปิดผนึก/30": { + "modified": "2019-03-23T23:12:58.184Z", + "contributors": [ + "wbamberg", + "Dexpaktho" + ] + }, + "Mozilla/Firefox/เปิดผนึก/47": { + "modified": "2019-03-23T22:22:47.058Z", + "contributors": [ + "wbamberg", + "kdex", + "itclinic" + ] + }, + "Tools": { + "modified": "2020-07-29T11:39:03.529Z", + "contributors": [ + "SphinxKnight", + "Panan", + "katesuwan" + ] + }, + "Tools/Debugger": { + "modified": "2020-07-16T22:35:06.450Z", + "contributors": [ + "Sheppy" + ] + }, + "Tools/Debugger/www.หนังโป้.com": { + "modified": "2020-07-16T22:35:17.110Z", + "contributors": [ + "SphinxKnight", + "abdulmana293" + ] + }, + "Tools/Eyedropper": { + "modified": "2020-07-16T22:36:07.984Z", + "contributors": [ + "teoli", + "suphattharaphong" + ] + }, + "Web": { + "modified": "2020-05-28T02:06:08.399Z", + "contributors": [ + "SphinxKnight", + "nattapon6398", + "srisuk19766", + "relta", + "NeuxSLX", + "Sleeplesx", + "reisizer", + "chananya", + "arnonchai", + "teoli", + "Bownee1", + "pamawc", + "Rest" + ] + }, + "Web/API": { + "modified": "2020-10-12T08:30:06.264Z", + "contributors": [ + "SphinxKnight", + "saharat.170214", + "pannawat.nm", + "produmdl", + "benz11260", + "taksakorn", + "teoli", + "fscholz" + ] + }, + "Web/API/Bluetooth": { + "modified": "2020-10-15T22:28:48.955Z", + "contributors": [ + "bershanskiy" + ] + }, + "Web/API/Bluetooth/onavailabilitychanged": { + "modified": "2020-10-15T22:28:45.649Z", + "contributors": [ + "srisuk19766" + ] + }, + "Web/API/CacheStorage": { + "modified": "2020-08-22T12:38:50.465Z", + "contributors": [ + "luciferz2130" + ] + }, + "Web/API/Geolocation": { + "modified": "2019-03-23T22:07:06.603Z", + "contributors": [ + "northvanhooser" + ] + }, + "Web/API/Geolocation_API": { + "modified": "2020-10-15T22:29:46.688Z", + "contributors": [ + "Chaiwat24", + "SphinxKnight", + "nwbl567" + ] + }, + "Web/API/Geolocation_API/Using_the_Geolocation_API": { + "modified": "2020-07-28T02:48:21.553Z", + "contributors": [ + "SphinxKnight", + "piyananjarutsri022" + ] + }, + "Web/API/History_API": { + "modified": "2019-03-18T21:12:00.554Z", + "contributors": [ + "SphinxKnight" + ] + }, + "Web/API/IndexedDB_API": { + "modified": "2019-03-18T21:41:47.120Z", + "contributors": [ + "Jatupan" + ] + }, + "Web/API/Location": { + "modified": "2019-03-18T21:33:00.088Z", + "contributors": [ + "depthdev" + ] + }, + "Web/API/Server-sent_events": { + "modified": "2019-07-25T02:31:57.327Z", + "contributors": [ + "SphinxKnight", + "filmendless" + ] + }, + "Web/API/WebGL_API": { + "modified": "2020-10-15T22:30:46.388Z", + "contributors": [ + "Tawoops" + ] + }, + "Web/API/WebSockets_API": { + "modified": "2020-10-15T22:31:06.629Z", + "contributors": [ + "peadrakw" + ] + }, + "Web/API/Window": { + "modified": "2020-10-15T22:33:16.953Z", + "contributors": [ + "luciferz2130" + ] + }, + "Web/API/XMLHttpRequest": { + "modified": "2020-10-15T22:18:02.697Z", + "contributors": [ + "weera1991" + ] + }, + "Web/API/XRReferenceSpaceType": { + "modified": "2020-10-15T22:28:59.643Z", + "contributors": [ + "srisuk19766" + ] + }, + "Web/CSS": { + "modified": "2020-06-15T00:41:37.200Z", + "contributors": [ + "Chainarong24NutDogg", + "SphinxKnight", + "athagoras", + "jswisher" + ] + }, + "Web/CSS/margin": { + "modified": "2019-03-23T22:21:58.914Z", + "contributors": [ + "athagoras" + ] + }, + "Web/Guide": { + "modified": "2019-03-23T23:21:03.054Z", + "contributors": [ + "www_test" + ] + }, + "Web/Guide/Graphics": { + "modified": "2020-06-17T05:44:57.223Z", + "contributors": [ + "Tawoops" + ] + }, + "Web/HTTP": { + "modified": "2020-10-07T12:00:24.952Z", + "contributors": [ + "james1979-th", + "tanchanok.klanthip", + "wirocnchu", + "gamemher2540", + "groovecoder" + ] + }, + "Web/HTTP/CORS": { + "modified": "2020-10-15T22:09:54.933Z", + "contributors": [ + "ghayth.mkh" + ] + }, + "Web/HTTP/CORS/Errors": { + "modified": "2019-03-18T21:24:52.809Z", + "contributors": [ + "nchevobbe" + ] + }, + "Web/HTTP/Status": { + "modified": "2019-03-23T22:02:20.627Z", + "contributors": [ + "mgold" + ] + }, + "Web/HTTP/Status/201": { + "modified": "2020-10-15T21:59:06.958Z", + "contributors": [ + "panuwizzle" + ] + }, + "Web/JavaScript": { + "modified": "2020-03-22T02:25:15.696Z", + "contributors": [ + "ipskn2dev", + "SphinxKnight", + "gdaz", + "Pipat", + "enthdoc", + "Bon1986", + "kerawits", + "spywhere", + "adadesions", + "teoli", + "Oliver_Propst" + ] + }, + "Web/Manifest": { + "modified": "2020-10-15T22:20:13.119Z", + "contributors": [ + "wbamberg" + ] + }, + "Web/Manifest/icons": { + "modified": "2020-10-15T22:20:14.805Z", + "contributors": [ + "SphinxKnight", + "Somchai-99" + ] + }, + "Web/Progressive_web_apps": { + "modified": "2020-05-13T03:40:40.802Z", + "contributors": [ + "laurenslang91" + ] + }, + "Web/Progressive_web_apps/Add_to_home_screen": { + "modified": "2020-05-13T03:40:42.415Z", + "contributors": [ + "SphinxKnight" + ] + }, + "Web/Security": { + "modified": "2020-12-07T17:30:28.307Z", + "contributors": [ + "jswisher" + ] + }, + "Web/Security/Mixed_content": { + "modified": "2020-05-29T14:46:01.678Z", + "contributors": [ + "rambo-panda" + ] + }, + "Web/Tutorials": { + "modified": "2019-09-13T21:22:10.128Z", + "contributors": [ + "Kritlnwzeed38" + ] + } +}
\ No newline at end of file diff --git a/files/th/archive/add-ons/deploying_a_plugin_as_an_extension/index.html b/files/th/archive/add-ons/deploying_a_plugin_as_an_extension/index.html new file mode 100644 index 0000000000..99cb34be71 --- /dev/null +++ b/files/th/archive/add-ons/deploying_a_plugin_as_an_extension/index.html @@ -0,0 +1,82 @@ +--- +title: Deploying a Plugin as an Extension +slug: Archive/Add-ons/Deploying_a_Plugin_as_an_Extension +tags: + - Plugins + - add-on +translation_of: Archive/Add-ons/Deploying_a_Plugin_as_an_Extension +--- +<p>One of the new features available in Firefox 1.5 is the ability to place browser plugins in a Firefox extension. This feature is particularly useful for vendors who wish to deploy the plugin even if Firefox is not currently installed, or who want to use the automatic extension update mechanism to update their plugin to a newer version.</p> + +<p>Historically, most people have chosen to use an install.js script to install a plugin. When this method is used, you can choose to either place the plugin into the plugins directory, or, on Windows, place it into your own directory and modify the Windows registry to let Firefox know where to find the plugin. The downside to this method is that once the plugin is installed, it might be difficult for users to upgrade, uninstall, or disable the plugin.</p> + +<p>With Firefox 1.5, you can use the built-in extension mechanism to make a plugin available to your users. This allows the plugin to be treated like other Firefox extensions; it can be upgraded, disabled, or uninstalled using the Firefox user interface.</p> + +<p>In this article, we will create an extension for the Rhapsody Player Engine. Normally, this plugin is installed in a local directory, and a registry item is used to let Firefox know about the plugin.</p> + +<p>First, let's take a look at the structure of the XPI file used for a browser plugin.</p> + +<pre class="eval">RhapsodyPlayerEngine_Inst_Win.xpi + install.rdf + plugins/ + license.rtf + nprhapengine.dll +</pre> + +<p>The important file here is the <code>install.rdf file</code>. This contains information about our extension; all extensions have one. Here's what a basic <code>install.rdf file</code> looks like:</p> + +<pre class="eval"><RDF xmlns="<span class="nowiki">http://www.w3.org/1999/02/22-rdf-syntax-ns#</span>" + xmlns:em="<span class="nowiki">http://www.mozilla.org/2004/em-rdf#</span>"> + <Description about="<span class="nowiki">urn:mozilla:install-manifest</span>"> + <em:id><span class="nowiki">RhapsodyPlayerEngine@rhapsody.com</span></em:id> + <em:name>Rhapsody Player Engine</em:name> + <em:version>1.0.0.487</em:version> + + <em:targetApplication> + <Description> + <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> + <em:minVersion>1.5</em:minVersion> + <em:maxVersion>1.5.0.*</em:maxVersion> + </Description> + </em:targetApplication> + + </Description> +</RDF> +</pre> + +<p>You can get more detailed information about this file at <a href="/en/Install_Manifests" title="en/Install_Manifests">install.rdf</a>.</p> + +<p>We'll cover the basics.</p> + +<p>The <code>id</code> specifies a unique ID that uniquely identifes this extension of the form. If you have written extensions for Firefox in the past, you'll notice that we no longer require the use of GUIDs as extension IDs.</p> + +<p>The <code>name</code> specifies the name of the extension that appears in the extension manager.</p> + +<p>The <code>version</code> is used for version checking when we are updating extensions.</p> + +<p>The <code>targetApplication</code> section specifies that platform we want to work on (that ID is for Firefox). It also specifies what versions of Firefox we want to work with.</p> + +<p>Now that we have an <code>install.rdf file</code>, we can actually package the XPI. Simply use the ZIP utility to create the XPI file. Make sure you keep the directory structure!</p> + +<p>Now we can open the XPI in Firefox and it will get installed. You'll have to restart Firefox so the plugin will be available.</p> + +<p>After restarting Firefox, the extension manager will include an entry for the Rhapsody Player Engine. Because it is an extension, we can disable/enable it, as well as uninstall it.</p> + +<p>You'll notice that one thing we did not do is provide a mechanism for updating the plugin, as discussed at the beginning of this article. Let's cover that now.</p> + +<p>One of the additional things that can be placed in the install.rdf is called an <code>updateURL</code>. For example:</p> + +<pre class="eval"><em:updateURL><<span class="nowiki">http://www.rhapsody.com/update.rdf</span>></em:updateURL> +</pre> + +<p>This URL specifies <a href="/en/Extension_Versioning%2c_Update_and_Compatibility#Update_RDF_Format" title="en/Extension_Versioning%2c_Update_and_Compatibility#Update_RDF_Format">an RDF file that can be used</a> to tell Firefox that there are updates available for your extension. This RDF file can be updated to indicate that an update to our extension/plugin is available.</p> + +<p>Finally, if you want to package plugins for multiple platforms into a single extension, you can do that as well. There are two ways to do this.</p> + +<p>First, you can simply put all the files in the plugins directory. Firefox will load the correct plugins based on the platform, simply because the plugins for other platforms won't load.</p> + +<p>If your plugin is for Windows, don't forget add to version resources to your plugin's DLL. Also, supply MIMEType and FileExtents, without these your plugin won't work.</p> + +<p>Michael Kaply<br> + Firefox Advocate<br> + <a class="link-mailto" href="mailto:mkaply@us.ibm.com" rel="freelink">mkaply@us.ibm.com</a></p> diff --git a/files/th/archive/add-ons/index.html b/files/th/archive/add-ons/index.html new file mode 100644 index 0000000000..9c0f942944 --- /dev/null +++ b/files/th/archive/add-ons/index.html @@ -0,0 +1,11 @@ +--- +title: Add-ons +slug: Archive/Add-ons +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Add-ons +--- +<p>Archived add-ons documentation.</p> + +<p>{{SubpagesWithSummaries}}</p> diff --git a/files/th/archive/apps/design/index.html b/files/th/archive/apps/design/index.html new file mode 100644 index 0000000000..6177bbf1c3 --- /dev/null +++ b/files/th/archive/apps/design/index.html @@ -0,0 +1,34 @@ +--- +title: Designing Open Web Apps +slug: Archive/Apps/Design +tags: + - Apps + - CSS + - Design + - Examples + - Guide + - Layout + - Mobile + - NeedsTranslation + - Styleguides + - TopicStub + - UX + - Usability + - Web Development + - patterns +translation_of: Archive/Apps/Design +--- +<div class="summary"> +<p>In this section, we'll introduce design and UX principles to incorporate into your Open Web Apps. In an effort to help you kickstart your project, we have included links to relevant examples and style guides.</p> +</div> + +<h2 id="General_Web_app_design">General Web app design</h2> + +<p>The items under this section apply generally to Web app design.</p> + +<dl> + <dt><a href="/en-US/Apps/Design/Planning">Planning</a></dt> + <dd>The articles in this section provide information on planning a successful Web app, including high level planning ideas and general design principles.</dd> + <dt><a href="/en-US/Apps/Design/UI_layout_basics">UI layout basics</a></dt> + <dd>These articles provide guides and theory behind implementing effective layouts for Open Web Apps, including responsive design, flexible boxes, etc.</dd> +</dl> diff --git a/files/th/archive/apps/design/ui_layout_basics/index.html b/files/th/archive/apps/design/ui_layout_basics/index.html new file mode 100644 index 0000000000..e9b9d4c5a4 --- /dev/null +++ b/files/th/archive/apps/design/ui_layout_basics/index.html @@ -0,0 +1,29 @@ +--- +title: UI layout basics +slug: Archive/Apps/Design/UI_layout_basics +tags: + - Design + - Layouts + - NeedsTranslation + - TopicStub + - UI +translation_of: Archive/Apps/Design/UI_layout_basics +--- +<div class="summary"> +<p>Guides and theory behind implementing effective layouts for Open Web Apps.</p> +</div> + +<dl> + <dt><a href="/en-US/Apps/Design/UI_layout_basics/responsive_design_building_blocks">The building blocks of responsive design</a></dt> + <dd>Learn the basics of responsive design, an essential topic for modern app layout.</dd> + <dt><a href="/en-US/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design">Responsive design versus adaptive design</a></dt> + <dd>Demystifying the terms "responsive" and "adaptive", and how they relate.</dd> + <dt><a href="/en-US/Apps/Design/UI_layout_basics/Mobile_First">Mobile first</a></dt> + <dd>Often when creating responsive application layouts, it makes sense to create the mobile layout as the default, and build wider layouts on top.</dd> + <dt><a href="/en-US/Apps/Design/UI_layout_basics/Graphics_for_responsive_sites">Graphics for responsive sites</a></dt> + <dd>Ideas to keep in mind when designing graphics for responsive sites and applications.</dd> + <dt><a href="/en-US/Apps/Design/UI_layout_basics/Responsive_Navigation_Patterns">Responsive navigation patterns</a></dt> + <dd>How do you make a UI that looks and works as great on a smartphone as it does on the desktop? Learn how to design UIs that change to fit your user's screen.</dd> + <dt><a href="/en-US/Web/Guide/CSS/Flexible_boxes">Flexible boxes</a></dt> + <dd>Flexbox is a very useful CSS feature for flexible, responsive layouts.</dd> +</dl> diff --git a/files/th/archive/apps/design/ui_layout_basics/responsive_design_versus_adaptive_design/index.html b/files/th/archive/apps/design/ui_layout_basics/responsive_design_versus_adaptive_design/index.html new file mode 100644 index 0000000000..46955e9f20 --- /dev/null +++ b/files/th/archive/apps/design/ui_layout_basics/responsive_design_versus_adaptive_design/index.html @@ -0,0 +1,10 @@ +--- +title: Responsive design versus adaptive design +slug: Archive/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design +translation_of: Archive/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design +--- +<p><font><font>ทั้งความพยายามในการออกแบบที่ตอบสนองและปรับตัวได้เพื่อเพิ่มประสิทธิภาพประสบการณ์ผู้ใช้ในอุปกรณ์ต่าง ๆ ปรับขนาดวิวพอร์ตที่แตกต่างกันความละเอียดบริบทการใช้งานกลไกการควบคุมและอื่น ๆ</font></font></p> + +<p><font><font>การออกแบบที่ตอบสนองต่อการทำงานบนหลักการของความยืดหยุ่น - เว็บไซต์ของเหลวเดียวที่สามารถดูดีบนอุปกรณ์ใด ๆ </font><font>เว็บไซต์ตอบสนองใช้การสืบค้นสื่อกริดที่ยืดหยุ่นและรูปภาพตอบสนองเพื่อสร้างประสบการณ์ผู้ใช้ที่ยืดหยุ่นและเปลี่ยนแปลงตามปัจจัยหลายประการ</font></font></p> + +<p><font><font>การออกแบบที่ปรับเปลี่ยนได้นั้นมีความหมายเหมือนกับนิยามของการปรับปรุงแบบก้าวหน้า </font><font>แทนที่จะเป็นการออกแบบที่ยืดหยุ่นเพียงแบบเดียวการออกแบบแบบปรับได้จะตรวจจับอุปกรณ์และคุณสมบัติอื่น ๆ จากนั้นให้คุณสมบัติและรูปแบบที่เหมาะสมโดยยึดตามขนาดชุดวิวพอร์ตที่กำหนดไว้ล่วงหน้าและคุณสมบัติอื่น ๆ</font></font></p> diff --git a/files/th/archive/apps/index.html b/files/th/archive/apps/index.html new file mode 100644 index 0000000000..dca7e09fea --- /dev/null +++ b/files/th/archive/apps/index.html @@ -0,0 +1,14 @@ +--- +title: Apps +slug: Archive/Apps +tags: + - Apps + - Firefox OS + - NeedsTranslation + - TopicStub + - Web +translation_of: Archive/Apps +--- +<p class="summary">This page includes archived content for Apps, including obsolete web app content, Firefox OS app-related content, and so forth.</p> + +<dl><dt class="landingPageList"><a href="/en-US/docs/Archive/Apps/Advanced_topics">Advanced topics</a></dt><dd class="landingPageList">These articles provide extra information on more advanced Open Web Apps topics. Topics such as app architecture documentation to help with the design and implementation of open web apps and other documentation for creating a store for selling and distributing open web apps.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Apps/Reference">App Development API Reference</a></dt><dd class="landingPageList">Technical review completed. Editorial review completed.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Apps/Design">Designing Open Web Apps</a></dt><dd class="landingPageList">The items under this section apply generally to Web app design.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Apps/Graphics_and_UX">Graphics and UX</a></dt><dd class="landingPageList">When creating Open Web Apps, you need to give a lot of consideration to the look and feel, user experience and workflow of your applications. In previous parts of this material we looked at application planning and flexible layouts for applications, and in this section we will go further, looking at both general patterns and design techniques that work for Open Web Apps, and specific techniques and assets that will help you put together great-looking Firefox OS apps that match the experience of the device's default applications.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Apps/Architecture">Open web app architecture</a></dt><dd class="landingPageList">Apps can be installed from the server that hosts them ("self-hosting") or from a store. Mozilla launched the Firefox Marketplace in a test mode for apps in 2012. Other third-party app stores are also possible using this architecture. Apps can be free or paid. Stores can support validation of purchases to ensure that apps are run only by users who purchased them. The Firefox Marketplace will support this.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Apps/Rec_Room_-Animation_and_Graphics">Rec Room - Animation and Graphics</a></dt><dd class="landingPageList">There are various tools found all around the web for creating animations and graphics for your work. In this article, we will go over a few of these options so that you can use to make your project stand out! For example, CSS is one way to apply animations to HTML elements, while Chartist is a great tool for creating graphs and charts.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Apps/Tools_and_frameworks">Tools and frameworks</a></dt><dd class="landingPageList"></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Apps/App_validator">Validating web apps with the App Validator</a></dt><dd class="landingPageList">Some checks that the validator performs include:</dd></dl> diff --git a/files/th/archive/b2g_os/index.html b/files/th/archive/b2g_os/index.html new file mode 100644 index 0000000000..ed3ae4c41f --- /dev/null +++ b/files/th/archive/b2g_os/index.html @@ -0,0 +1,81 @@ +--- +title: B2G OS +slug: Archive/B2G_OS +translation_of: Archive/B2G_OS +--- +<p><strong>FireFox OS</strong> คือ <span class="short_text" id="result_box" lang="th"><span class="hps">โอเพนซอร์ส</span></span> ด้วยเหตุนี้จึงฟรีจาก<span class="short_text" id="result_box" lang="th"><span class="hps">เทคโนโลยีที่เป็นกรรมสิทธิ์</span></span>, ในขณะที่ยังคงเปิดช่องทางสำหรับเหล่า นักพัฒนาแอพลิเคชั่นเพื่อสร้างสรรค์ผลิตภัณท์ที่ดีเยี่ยม นอกจากนี้ ยังคงยืดหยุ่นและมีประสิทธิภาพมากพอที่จะทำให้ผู้ใช้ปลายทางมีความสุข</p> + +<p>Firefox OS ยังคงอยู่ภายใต้การพัฒนาอย่างหนัก; พวกเรายังคงทำงานอย่างไม่หยุดหย่อน บนเส้นทางที่จะทำให้ง่ายขึ้นสำหรับคุณในการใช้งานและแฮกระบบ Gaia (การตั้งค่าพื้นฐานของแอพ) ซึ่งจะเป็นการสร้างสไตล์ในแบบคุณ. อย่างไรก็ตาม, คุณจำเป็นต้องมีความรู้เกี่ยวกับระบบ เพื่อที่จะสร้างสรรค์ เช่น การสร้าง Firefox OS stack ทั้งหมด, หรือ การแฟลชระบบเพื่อเปลี่ยนมาเป็น FireFox OS ลิ้งค์นำทางด้านล่างนี้จะแนะแนวทางและเจตจำนง สำหรับนักพัฒนาเว็บ ที่มีความสนใจ ในการทำงานและการแก้ไขเปลี่ยนแปลง Gaia หรือ กำลังพัฒนาแอพที่จะใช้งานบนอุปกรณ์ FireFox OS อยู่</p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">เอกสารเกี่ยวกับ FireFox OS</h2> + + <dl> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Introduction" title="en-US/docs/Mozilla/Firefox_OS/Introduction">เริ่มแรกสำหรับ FireFox OS</a></dt> + <dd>แนะนำข้อมูลเกี่ยว Firefox OS และการทำงานของมัน</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Tips_and_tricks" title="/en-US/docs/Mozilla/Firefox_OS/Tips_and_tricks"> ทริป และ ทริค FireFox OS</a></dt> + <dd>บทความสั้นๆบางบทความ เกี่ยวกับทริปและทริคที่มีประโยชน์ เพื่อที่จะรู้ FireFox OS ในขณะกำลังเจาะระบบ</dd> + <dt></dt> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Apps" title="/en-US/docs/Mozilla/Firefox_OS/Apps">การเขียนแอพสำหรับ Firefox OS</a></dt> + <dd>ข้อมูลเกี่ยวกับสร้างแอพบน Firefox OS</dd> + <dt><a href="https://marketplace.firefox.com/developers/" title="https://marketplace.firefox.com/developers/">จุดศูนย์กลางของนักพัฒนา</a></dt> + <dd>เครื่องมือต่าง ๆ,การฝึกซ้อม,และ บริการ สำหรับนักพัฒนาแอพบน Firefox OS</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/UX" title="/en-US/docs/">ประสบการณ์ ผู้ใช้งาน</a></dt> + <dd>แนะแนวรูปแบบและการทำงานที่ผู้ใช้ต้องการ—รวมถึง รูปแบบโค้ดและ<span class="short_text" id="result_box" lang="th"><span class="alt-edited hps"> เทมเพลต</span></span> —เพื่อช่วยคุณสร้างแอพ FireFox OS ที่ดึงดูดใจ, และไม่เปลี่ยนแปลง</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform" title="/en-US/docs/Mozilla/Firefox_OS/Platform">แพลตฟอร์มของ FireFox OS</a></dt> + <dd>เอกสารเกี่ยวกับ แพลตฟอร์มของ FireFox OS รวมถึง Gonk, Gaia และสิ่งอื่นๆที่เกี่ยวข้อง ซึ่งรวมไปถึง เอกสารข้อมูลเกี่ยวกับการสร้าง และการติดตั้ง แพลตฟอร์มบนอุปกรณ์ และการสร้างการจำลองและเลียนแบบด้วย</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Security" title="/en-US/docs/Mozilla/Firefox_OS/Security">ความปลอดภัย</a></dt> + <dd>เอกสารเกี่ยวกับความปลอดภัยบน FireFox OS; ซึ่งรวมไปถึงหัวข้อเกี่ยวกับ อุปกณ์ความปลอดภัยจากมุมมองของคนอื่นๆ : มุมองของนักพัฒนาแอพ, ผู้ประกอบอุปกรณ์, และอื่นๆ</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Performance" title="/en-US/docs/Mozilla/Firefox_OS/Performance">การทำงาน</a></dt> + <dd>บทความเกี่ยวกับ การเพิ่มประสิทธภาพสูงสุดบน แอพลิเคชั่นของ FireFox OS</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Troubleshooting" title="/en-US/docs/Mozilla/Firefox_OS/Troubleshooting"><span class="short_text" id="result_box" lang="th"><span class="hps">การแก้ไขปัญหา</span></span></a></dt> + <dd>แนะแนวทางการตัดสินใจ แก้ไขปัญหาทั่วๆไปบน FireFox OS</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging" title="en-US/docs/Mozilla/Firefox_OS/Debugging"><span class="short_text" id="result_box" lang="th"><span class="hps">การแก้จุดบกพร่อง</span><span>บน</span> <span class="hps">Firefox</span> <span class="hps">OS</span></span></a></dt> + <dd>แนะแนวทางการแก้ไข จุดบกพร่องจากทั้งสองชนิดระหว่าง บนโทรศัพท์มือถือ และตัวระบบ FireFox OS เอง</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide" title="/en-US/docs/Mozilla/Firefox_OS/Boot to Gecko developer phone guide">แนะแนวทาง นักพัฒนาโทรศัพท์มือถือ FireFox OS</a></dt> + <dd>แนะแนวทางสำหรับนักพัฒนาโทรศัพท์มือถือ ที่ทางโมซิลล่าได้เอื้ออำนวยให้สำหรับนักพัฒนาบางราย นี่ยังรวมถึงแนะแนว สำหรับคนที่ได้ถูกติดตั้ง FireFox OS บนโทรศัพท์ของคุณแล้ว</dd> + </dl> + + <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="/en-US/docs/tag/B2G">ดูทั้งหมด...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">รับความช่วยเหลือจากชุมชน</h2> + + <p>ถ้าคุณกำลังทำงานกับ Firefox OS หรือ กำลังพัฒนาแอพอยู่ คุณคงชอบที่จะใช้งานบนอุปกรณ์ Firefox OS นี่คือแหล่งข้อมูลที่จะช่วยคุณได้</p> + + <ul> + <li>ถามคำถามของคุณบน ช่องโมซิลล่า IRC Boot to Gecko: <a class="link-irc" href="irc://irc.mozilla.org/b2g" title="irc://irc.mozilla.org/b2g">#b2g</a></li> + </ul> + + <p><span class="alllinks"><a class="external external-icon" href="http://www.catb.org/%7Eesr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html"><em>อย่าลืมสำหรับ มรรยาทของชุมชน</em>...</a></span></p> + + + <div class="almost_half_cell" id="gt-res-content"> + <div dir="ltr" style="zoom: 1;"> + <h2 class="Tools" id="หัวข้อที่เกี่ยวข้อง">หัวข้อที่เกี่ยวข้อง</h2> + </div> + </div> + + + <ul> + <li><a href="/en-US/docs/Mobile" title="en-US/docs/Mobile">โทรศัพท์</a></li> + <li><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a></li> + <li><a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a></li> + <li><a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></li> + </ul> + + <h2 class="Tools" id="Resources">Resources</h2> + + <ul> + <li><a class="link-https" href="https://wiki.mozilla.org/B2G/FAQ" title="B2G/FAQ">Mozilla wiki FAQ</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/B2G/Schedule_Roadmap" title="https://wiki.mozilla.org/B2G/Schedule_Roadmap">Roadmap</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart">Feature support chart</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Geeksphone_FAQ" title="/en-US/docs/Mozilla/Firefox_OS/Geeksphone_FAQ">Geeksphone FAQ</a></li> + </ul> + </td> + </tr> + </tbody> +</table> diff --git a/files/th/archive/b2g_os/phone_guide/flame/index.html b/files/th/archive/b2g_os/phone_guide/flame/index.html new file mode 100644 index 0000000000..8a97dae559 --- /dev/null +++ b/files/th/archive/b2g_os/phone_guide/flame/index.html @@ -0,0 +1,67 @@ +--- +title: Flame +slug: Archive/B2G_OS/Phone_guide/Flame +translation_of: Archive/B2G_OS/Phone_guide/Flame +--- +<p><img alt="A picture of the Flame device, showing the Firefox OS homescreen containing several app icons." src="https://mdn.mozillademos.org/files/8373/flame-dev-hud.png" style="float: left; margin-bottom: 20px; margin-right: 50px; width: 25%;"></p> + +<p> </p> + +<p><span class="seoSummary">Flame device is the official reference device for developing, testing, and debugging Firefox OS and open web apps. This guide provides basic information about its hardware specifications as well as practical documentation specific to experimenting with, developing for, and testing of software compatible with this phone.</span></p> + +<p>The Flame hardware offers a representative set of specs — including FWVGA display and dual-core processor — to help developers build great content and experiences. A stable hardware platform is also good for testers, making it easier to test and address specific software issues without having to worry about device model-specific bugs, etc.</p> + +<p>If you have your phone in hand and want to start playing with it, developing and distributing apps, or contributing to the Firefox platform, the following links will also get you where you need to go:</p> + +<ul> + <li><a href="/en-US/Firefox_OS">Firefox OS zone</a>: For creating your own Firefox OS builds and contributing to the B2G and Gaia projects.</li> + <li><a href="/en-US/Apps">App Center zone</a>: For building open web apps compatible with Firefox OS.</li> + <li><a href="/en-US/Marketplace">Marketplace zone</a>: For information on publishing and distributing apps.</li> + <li><a href="https://marketplace.firefox.com/">Firefox Marketplace</a>: The best place to find and publish new Firefox OS apps.</li> +</ul> + +<p>If you’d like to find out more about updating the operating system, recovering it, pushing apps to it, or phone specs, you’ll find the information you need at the following two articles :</p> + +<ul> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Flame/Initial_setup">Initial setup</a>: Essential steps to follow for setting up your computer to work with your Flame.</li> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Flame/Updating_your_Flame">Updating your Flame</a>: How to update or upgrade Firefox OS on your Flame, push apps to it, and troubleshoot and test it.</li> +</ul> + +<h2 id="Get_a_device">Get a device</h2> + +<p>Flame sales have come to an end. There are still opportunities left for Mozilla contributors to get free Flames, including the upcoming Foxtrot program. If you have questions about getting a device for development or testing, please reach out to Asa Dotzler on the <a href="irc://irc.mozilla.org/fxos">#fxos</a> channel on IRC.</p> + +<h2 id="Device_specifications">Device specifications</h2> + +<p>You can find more of the device specifications listed on our <a href="/en-US/Firefox_OS/Phone_guide/Phone_specs">Phone and device specs page</a>.</p> + +<h3 id="Network"><strong>Network</strong></h3> + +<ul> + <li>GSM 850/900/1800/1900MHz</li> + <li>UMTS 850/900/1900/2100MHz</li> + <li>Wifi 802.11b/g/n</li> + <li>Bluetooth 3.0</li> +</ul> + +<h3 id="Hardware">Hardware</h3> + +<ul> + <li>Dual-SIM</li> + <li>NFC</li> + <li>Accelerometer</li> + <li>FM radio</li> + <li>Proximity Sensor</li> + <li>GPS W / A-GPS support</li> + <li>Ambient Light Sensor</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Flame/Initial_setup">Initial setup</a>: Essential steps to follow for setting up your computer to work with your Flame.</li> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Flame/Updating_your_Flame">Updating your Flame</a>: How to update or upgrade Firefox OS on your Flame, push apps to it, and troubleshoot and test it.</li> + <li><a href="https://hacks.mozilla.org/2014/08/videos-getting-started-with-your-flame-device/">Getting started with your Flame</a>: How-to videos by Chris Heilmann.</li> + <li><a href="http://mozilla.github.io/flame-on/">Flame On</a>: Great starting page for all Flame owners created at Mozilla Festival 2014.</li> + <li><a href="https://blog.mozilla.org/press/2014/02/developer-momentum-2/">Original announcement</a>: Press Announcement, February 23, 2014.</li> +</ul> diff --git a/files/th/archive/b2g_os/phone_guide/index.html b/files/th/archive/b2g_os/phone_guide/index.html new file mode 100644 index 0000000000..1268868928 --- /dev/null +++ b/files/th/archive/b2g_os/phone_guide/index.html @@ -0,0 +1,82 @@ +--- +title: Firefox OS phone guide +slug: Archive/B2G_OS/Phone_guide +tags: + - B2G + - Firefox OS + - Landing + - NeedsTranslation + - Phones + - TopicStub +translation_of: Archive/B2G_OS/Phone_guide +--- +<div class="summary"> +<p><span class="seoSummary">This section contains developer information relevant to specific phones that run Firefox OS — both developer and consumer devices.</span> We have general information available on <a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS" title="Building and installing Firefox OS">Building and installing Firefox OS</a> and <a href="/en-US/Firefox_OS/Developing_Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS/Hacking_Firefox_OS">Hacking Firefox OS</a>, so please go there for information about building and installing the platform from scratch. Developers with specific phones in their possession may however find the following articles useful.</p> +</div> + +<h2 id="Developer_phone_information">Developer phone information</h2> + +<p>The phones listed here are specifically geared towards developers wanting to experiment with Firefox OS, including developing apps and contributing to the operating system itself. As such, they typically have unlocked SIMs, system files, etc.</p> + +<dl> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Flame">Flame</a></dt> + <dd>The Flame device is the official reference device for developing, testing, and debugging Firefox OS and open web apps, produced in partnership with T<sup>2</sup>Mobile.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Geeksphone">Geeksphone</a></dt> + <dd>In this article we cover some basic tips on how to keep your Geeksphone up-to-date and how to tweak the system Gaia applications.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/ZTE_OPEN">ZTE OPEN</a></dt> + <dd>This article contains information on the ZTE OPEN Firefox OS device.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/ZTE_OPEN_C">ZTE OPEN C</a></dt> + <dd>The ZTE Open C is an updated ZTE-produced Firefox OS device, with higher end hardware and newer software.</dd> +</dl> + +<h2 id="Consumer_phone_information">Consumer phone information</h2> + +<p>The phones listed here are consumer models, so not ideal for developers wanting to hack on devices. However, might be still useful for developers looking for more technical information on these consumer models. For a more complete list of devices, see our <a href="https://www.mozilla.org/en-US/firefox/os/devices/">Find Firefox OS near you</a> page.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Alcatel_One_Touch_Fire">Alcatel One Touch Fire</a></dt> + <dd>Based on Firefox OS 1.3 and available in more than 5 countries.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Phone_guide/Alcatel_One_Touch_Pixi_3_%283.5%29">Alcatel One Touch Pixi 3 (3.5)</a></dt> + <dd><span>High-end consumer smartphone, powered by Firefox OS 2.0, with a 2 megapixel camera.</span></dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Alcatel_Onetouch_Fire_C_4020D">Alcatel Onetouch Fire 2C 4020D</a></dt> + <dd>Based on Tarako Firefox OS (1.3T) and released in India.</dd> + <dt><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Alcatel_One_Touch_Fire_C">Alcatel Onetouch Fire C</a></dt> + <dd>Based on Tarako Firefox OS (1.3T) and released in India.</dd> + <dt><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Alcatel_One_Touch_Fire_E">Alcatel Onetouch Fire E</a></dt> + <dd>Available in 5 countries.</dd> + <dt><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Cherry_Mobile_Ace">Cherry Mobile Ace</a></dt> + <dd>Based on Firefox OS 1.3T and available in the Philippines.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Fx0">Fx0</a></dt> + <dd>First Firefox OS phone released in Japan, by KDDI.</dd> + <dt><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Huawei_Y300_II">Huawei Y300 II</a></dt> + <dd>Based on Firefox OS 1.1 and available in the Philippines and Mexico.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Intex_Cloud_FX">Intex Cloud FX</a></dt> + <dd>First Firefox OS Tarako phone released in India and based on Firefox OS 1.3T.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/LG_fireweb">LG Fireweb</a></dt> + <dd>Based on Firefox OS 1.1 and available in Uruguay and Brasil.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Spice_Fire_One_MI_FX1">Spice Firefox MI FX1</a></dt> + <dd>Based on Tarako Firefox OS (1.3T) and released in India.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Spice_Fire_One_MI_FX2">Spice Firefox MI FX2</a></dt> + <dd><span>High-end consumer 3G smartphone powered by FirefoxOS 1.4 with a 2 megapixel camera, released in India.</span></dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Symphony_GoFox_F15">Symphony GoFox F15</a></dt> + <dd>First Firefox OS Device to come with 3G video calling capability, launched in Bangladesh.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Zen_U105_Fire">Zen U105 Fire</a></dt> + <dd>Based on Firefox OS Tarako, available in India.</dd> + <dt style="font-size: 13.63636302948px; line-height: 19.0909080505371px;"><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/ZTE_Open_II">ZTE Open II</a></dt> + <dd style="font-size: 13.63636302948px; line-height: 19.0909080505371px;"><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;">Has a</span><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;">1.2 GHz dual core </span><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;">processor and a </span><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;">2.0 MP </span><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;">Rear Camera</span>, available in 7 countries.</dd> + <dt style="font-size: 13.63636302948px; line-height: 19.0909080505371px;"><a href="/en-US/docs/Mozilla/Firefox_OS/Phone_guide/Orange_Klif">Orange Klif</a></dt> + <dd style="font-size: 13.63636302948px; line-height: 19.0909080505371px;"><span>The Orange Klif is a 3G Smartphone, powered by Firefox OS 2.0, with a 2 megapixel camera. It is available in a number of African countries.</span></dd> +</dl> + +<h2 id="General_Firefox_OS_information">General Firefox OS information</h2> + +<dl> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Phone_specs">Firefox OS phone data</a></dt> + <dd>In this article we list the various available Firefox OS phones along with information such as their code names, availability, and specific hardware features.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Firefox_OS_device_features">General device features</a></dt> + <dd>This page lists typical Firefox OS hardware features and minimum hardware requirements.</dd> + <dt><a href="/en-US/Firefox_OS/Troubleshooting">Troubleshooting</a></dt> + <dd>This article provides tips for resolving common problems you may have while using Firefox OS.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Best_practices_open_reference_devices">Best practices for open reference devices</a></dt> + <dd>A set of best practices that we believe should come highly recommended for any widely available open reference devices. All of the recent Firefox OS reference devices have followed these practices.</dd> +</dl> diff --git a/files/th/archive/b2g_os/quickstart/app_tools/index.html b/files/th/archive/b2g_os/quickstart/app_tools/index.html new file mode 100644 index 0000000000..af0a106940 --- /dev/null +++ b/files/th/archive/b2g_os/quickstart/app_tools/index.html @@ -0,0 +1,16 @@ +--- +title: App tools +slug: Archive/B2G_OS/Quickstart/App_tools +translation_of: Archive/B2G_OS/Quickstart/App_tools +--- +<div class="summary"> + <p>What do you use to build Open Web Apps? The answer is "anything you would normally use to build for the web." The following is a list of tools and resources to help you get started making Open Web Apps. They can be easily integrated into your existing web development workflow, if you have one, or you can build a new workflow around them.</p> +</div> +<h2 id="App_Validator">App Validator</h2> +<p>Is your app ready for the Firefox Marketplace? The <a href="https://marketplace.firefox.com/developers/validator">App validator</a> will check your manifest and show you any errors it may have, or warnings you should consider.</p> +<h2 id="Firefox_OS_Simulator">Firefox OS Simulator</h2> +<p>Installing and using the <a href="https://marketplace.firefox.com/developers/docs/firefox_os_simulator">Firefox OS Simulator</a> is the easiest way to get up and running with your app. After installed the simulator is accessible via the Tools -> Web Developer -> Firefox OS Simulator menu. The simulator launches with a JavaScript console so that you may debug your application from within the simulator!</p> +<h2 id="App_Manager">App Manager</h2> +<p>The new kid on the block with regards to testing tools is called the <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_App_Manager">App Manager</a>. This tool allows you to connect desktop Firefox to a compatible device via USB (or a Firefox OS simulator), push apps straight to the device, validate apps, and debug them as they run on the device.</p> +<h2 id="Firefox_Developer_Tools">Firefox Developer Tools</h2> +<p>Firefox now ships with a default set of developer tools built from the ground up to ensure a great development experience that is both snappy and efficient. To find out more about how these tools work, and see a detailed list of what else Mozilla has to offer, head on over to our <a href="/en-US/docs/Tools">Tools zone</a>.</p> diff --git a/files/th/archive/b2g_os/quickstart/index.html b/files/th/archive/b2g_os/quickstart/index.html new file mode 100644 index 0000000000..a5bb4fa406 --- /dev/null +++ b/files/th/archive/b2g_os/quickstart/index.html @@ -0,0 +1,51 @@ +--- +title: Build +slug: Archive/B2G_OS/Quickstart +tags: + - Apps + - NeedsTranslation + - Quickstart + - TopicStub +translation_of: Archive/B2G_OS/Quickstart +--- +<div class="summary"> + <p><span class="seoSummary">Quickstart information on coding open web apps.</span></p> +</div> +<dl> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_open_web_apps">Introduction to open web apps</a></dt> + <dd> + What are open web apps? How they differ from regular web pages? Why is this significant? This article aims to answer these questions and more.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Your_first_app">Your first app</a></dt> + <dd> + This article takes you through the basic steps and additional knowledge on top of regular web development required to create installable open web apps.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_Firefox_OS">Introduction to Firefox OS</a></dt> + <dd> + An introduction to Firefox OS, Mozilla's new open web app-based mobile platform.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_manifests">Introduction to manifests</a></dt> + <dd> + An FAQ designed to answer any questions you may have about manifests, hosting apps, origins, and other such topics.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/For_Web_developers">App development for web developers</a></dt> + <dd> + If you're a web developer, how do open web apps differ from what you're used to? This article explains all.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/For_mobile_developers">App development for mobile developers</a></dt> + <dd> + If you're a native mobile application developer, what advantages can open web apps bring to you, and how do they differ from what you are used to? Here are some ideas.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Developing_app_functionality">Developing app functionality</a></dt> + <dd> + This page talks about the kinds of different functionality that you might want to build into your apps, with links to further information.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Payments">Payments</a></dt> + <dd> + How do you build functionality to make people pay for installing your open web apps? Here is the lowdown.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/App_tools">App tools</a></dt> + <dd> + Last for this section, we provide some links to more information on the tools available to help you develop great open web apps.</dd> +</dl> diff --git a/files/th/archive/b2g_os/simulator/index.html b/files/th/archive/b2g_os/simulator/index.html new file mode 100644 index 0000000000..164bf61eb2 --- /dev/null +++ b/files/th/archive/b2g_os/simulator/index.html @@ -0,0 +1,58 @@ +--- +title: Firefox OS Simulator +slug: Archive/B2G_OS/Simulator +translation_of: Archive/B2G_OS/Simulator +--- +<div class="note"> + <p>This page describes the Firefox OS Simulator for developers targeting Firefox OS 1.2 or later. If you're developing apps for Firefox OS 1.1, then you should check out the documentation for the <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator">Firefox OS 1.1 Simulator</a> instead.</p> +</div> +<p><span style="line-height: 1.5;">The Firefox OS Simulator is <span style="line-height: 1.5;">a version of the higher layers of Firefox OS</span> that simulates a Firefox OS device, but runs on the desktop</span><span style="line-height: 1.5;">. This means that in many cases, you don't need a real device to test and debug your app. </span><span style="line-height: 1.5;">It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.</span></p> +<p><span style="line-height: 1.5;">The Simulator is packaged and distributed as a Firefox add-on. Once you've downloaded it and installed it in Firefox, you can run it, push apps to it, and attach the developer tools to it,</span><span style="line-height: 1.5;"> using the </span><a href="/docs/Tools/WebIDE"><span style="line-height: 1.5;">WebIDE</span></a><span style="line-height: 1.5;">.</span></p> +<h2 id="Installation"><span style="line-height: 1.5;">Installation</span></h2> +<p><span style="line-height: 1.5;">To install the simulator, use <a href="/docs/Tools/WebIDE#Adding_a_Simulator">WebIDE's Manage Simulators pane</a> (available as part of Firefox 33 and onwards). Multiple versions are available, and you are advised to install them all, for maximum flexibility.</span></p> +<p>To start the Simulator, you choose it from WebIDE's runtime list. For more details, see the <a href="/docs/Tools/WebIDE#Selecting_a_runtime" style="font-size: 14px; font-weight: normal; line-height: 1.5;">instructions in the WebIDE documentation</a>. Once the Simulator's running, you can push apps to it and debug them using the WebIDE, just as you can with a real device.</p> +<p>If you are using the <a href="/Firefox_OS/Using_the_App_Manager">App Manager</a> (an older tool available prior to the WebIDE), you can install a simulator via the following button:</p> +<p><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; color: white; text-align: center; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; display: inline-block; background-color: rgb(129, 188, 46); white-space: nowrap; text-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px 0px, rgba(0, 0, 0, 0.298039) 0px -1px 0px 0px inset;">Install Simulator</a></p> +<h2 id="The_Simulator_UI" style="line-height: 30px;">The Simulator UI</h2> +<p><span style="line-height: 22.00800132751465px;">The Simulator appears as a separate window, sized so the simulated screen area is 320x480 pixels. </span><span style="line-height: 22.00800132751465px;">To simulate touch events you can click the mouse button and drag while holding the button down. So by clicking and dragging right-to-left from the Home Screen, you'll see the built-in apps, as well as any apps you have added:</span></p> +<p><img alt="" src="https://mdn.mozillademos.org/files/7173/simulator-1.2.png" style="width: 810px; height: 623px; display: block; margin: 0px auto;"></p> +<p>The Simulator has two buttons in a toolbar at the bottom:</p> +<ul> + <li>the button on the left takes you to the Home screen, or switches the Simulator off if you hold it down</li> + <li>the button on the right switches the Simulator between portrait and landscape orientation. This will generate the <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Managing_screen_orientation#Listening_orientation_change" title="/en-US/docs/WebAPI/Detecting_device_orientation">orientationchange</a> event.</li> +</ul> +<h2 id="Limitations_of_the_Simulator">Limitations of the Simulator</h2> +<p>Note that the Firefox OS Simulator isn't a perfect simulation.</p> +<h3 id="Hardware_limitations">Hardware limitations</h3> +<p>Apart from screen size, the Simulator does not simulate the hardware limitations of a Firefox OS device such as available memory or CPU speed.</p> +<h3 id="Audiovideo_codecs">Audio/video codecs</h3> +<p>The following codecs depend on hardware-accelerated decoding and are therefore not yet supported:</p> +<ul> + <li>MP3</li> + <li>AAC</li> + <li>H.264 (MP4)</li> + <li>WebM</li> +</ul> +<p>This means it isn't possible to use the Simulator to test video playback in apps and on websites like Youtube that rely on these codecs.</p> +<h3 id="Unsupported_APIs"><a name="Unsupported-APIs">Unsupported APIs</a></h3> +<p>Certain APIs that work on the device won't work on the Simulator, generally because the supporting hardware is not available on the desktop. We've implemented simulations for some APIs such as geolocation, and expect to add more in future releases. However, at the moment the following APIs are not supported. Using them might throw errors or just return incorrect results:</p> +<ul> + <li><a href="/en-US/WebAPI/WebTelephony" title="/en-US/WebAPI/WebTelephony">Telephony</a></li> + <li><a href="/en-US/docs/WebAPI/WebSMS" title="/en-US/docs/WebAPI/WebSMS">WebSMS</a></li> + <li><a href="/en-US/docs/WebAPI/WebBluetooth" title="/en-US/docs/WebAPI/WebBluetooth">WebBluetooth</a></li> + <li><a href="/en-US/docs/WebAPI/Using_Light_Events" title="/en-US/docs/WebAPI/Using_Light_Events">Ambient Light</a></li> + <li><a href="/en-US/docs/WebAPI/Proximity" title="/en-US/docs/WebAPI/Proximity">Proximity</a></li> + <li><a href="/en-US/docs/WebAPI/Network_Information" title="/en-US/docs/WebAPI/Network_Information">Network Information</a></li> + <li><a href="/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">navigator.onLine and offline events</a></li> + <li><a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration</a></li> +</ul> +<h2 id="Getting_help"><a name="Simulator-help"></a>Getting help</h2> +<p><span style="line-height: 1.5;">If you have a question, try asking us on the </span><a href="https://lists.mozilla.org/listinfo/dev-developer-tools" style="line-height: 1.5;">dev-developer-tools mailing list</a><span style="line-height: 1.5;"> or on </span><a href="irc://irc.mozilla.org/#devtools" style="line-height: 1.5;">#devtools on irc.mozilla.org</a><span style="line-height: 1.5;">.</span></p> +<h3 id="How_to_enable_verbose_logging"><a name="Simulator-verbose-logging"></a>How to enable verbose logging</h3> +<p>You can see messages logged from your app in the <a href="/en-US/docs/Tools/Web_Console">Web Console</a>, which you can attach to your app using the <a href="/docs/Tools/WebIDE/Troubleshooting">WebIDE</a>. If you want to catch early messages happening during app startup, before the console gets connected and working, you can enable verbose logging in the Simulator.</p> +<p>Visit about:config and <strong>create</strong> a new preference. The preference name is different for each version of the Simulator:</p> +<ul> + <li>extensions.fxos_1_3_simulator@mozilla.org.sdk.console.logLevel for Firefox OS 1.3</li> + <li>extensions.fxos_1_2_simulator@mozilla.org.sdk.console.logLevel for Firefox OS 1.2</li> +</ul> +<p>Set it to the string value "all", and disable, then reenable, the add-on in the Add-on Manager. Now extra messages about the Simulator's operation will appear in the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>.</p> diff --git a/files/th/archive/b2g_os/using_the_app_manager/index.html b/files/th/archive/b2g_os/using_the_app_manager/index.html new file mode 100644 index 0000000000..b9c7b30dfa --- /dev/null +++ b/files/th/archive/b2g_os/using_the_app_manager/index.html @@ -0,0 +1,277 @@ +--- +title: Using the App Manager +slug: Archive/B2G_OS/Using_the_App_Manager +translation_of: Archive/B2G_OS/Using_the_App_Manager +--- +<div class="summary"> +<p>The App Manager is a tool available in Firefox for Desktop which provides a number of useful tools to help you test, deploy and debug HTML5 web apps on Firefox OS phones and the Firefox OS Simulator, directly from your browser.</p> + +<p>The App Manager is for developers targeting Firefox OS 1.2 or later. If you're developing apps for Firefox OS 1.1, then you should check out the documentation for the <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator">Firefox OS 1.1 Simulator</a> instead.</p> + +<p>The App Manager is being replaced by the <a href="/en-US/docs/Tools/WebIDE">WebIDE</a>, which is new in Firefox 33. The WebIDE provides all the features of the App Manager, but also provides an editing environment for you to create and develop Firefox OS apps.</p> +</div> + +<p style="text-align: center;">{{EmbedYouTube("z1Bxg1UJVf0")}}</p> + +<p>The App Manager is composed of:</p> + +<ul> + <li>An <a href="#Apps_panel"><em>Apps panel</em></a>, which manages local apps (app source code located on your computer) and apps hosted externally, allowing you to package and install them on your device or simulator, and debug them using Toolboxes</li> + <li>A <a href="#Device_panel"><em>Device panel</em></a>, which displays information about the connected device including Firefox OS version installed, permissions required for using device APIs on the device, and apps installed</li> + <li><a href="/en-US/docs/Tools_Toolbox"><em>Toolboxes</em></a>, which are are sets of developer tools (web console, inspector, debugger, etc.) that can be connected to a running app via the Apps panel to perform debugging operations</li> +</ul> + +<h2 id="Quick_setup"><a name="Configuring_device">Quick setup</a></h2> + +<p>This section is designed to get you up and running as soon as possible; if you need some more detail please skip forward to the {{ anch("Device and system configuration") }} section and start reading from there. Also see the {{ anch("Troubleshooting") }} section for help if you are having trouble.</p> + +<ol> + <li>Make sure you have Firefox Desktop 26+ installed</li> + <li>Open the App Manager (in the URL bar, type <code>about:app-manager</code>)</li> + <li>If you don't have a real device: + <ol> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the Firefox OS Simulator</a></li> + <li>In App Manager's bottom toolbar, click on <em>Start Simulator</em>, then click on the name of the installed simulator, which should appear there.</li> + </ol> + </li> + <li>If you have a real device: + <ol> + <li>Make sure your device is running Firefox OS 1.2+</li> + <li>On Windows, make sure to install the drivers provided by your phone manufacturer</li> + <li>In the Settings of your device, disable Screen Lock (<code>Settings > Phone lock > <code>Lock Screen</code></code>) and enable Remote Debugging (<code>Settings > Device information > More information > Developer</code>)</li> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the ADB Helper</a> add-on in Firefox Desktop</li> + <li>Connect your device to your machine via a USB cable</li> + <li>You should see the name of your device in the App Manager's bottom bar. Click on it.</li> + </ol> + </li> + <li>The bottom bar should show "Connected to: xxx"</li> + <li>Click on the <em>Apps</em> panel and add an app (packaged or hosted)</li> + <li>The <em>Refresh</em> button validates your app and installs it on the Simulator/Device</li> + <li>The <em>Debug</em> button connects the developer tools to the running app</li> + <li><strong>See the {{ anch("Troubleshooting") }} section for help if you are having trouble</strong></li> +</ol> + +<h2 id="Device_and_system_configuration">Device and system configuration</h2> + +<p>The first thing you'll need to do when using the App Manager is make sure your system and phone are set up correctly. This section will run through all the steps required.</p> + +<h3 id="Firefox_OS_1.2_required">Firefox OS 1.2+ required</h3> + +<p>Make sure your device is running Firefox OS 1.2/Boot2Gecko 1.2 or higher. To check which version of Firefox OS the device is runing, go to <code>Settings > Device Information > Software</code>.</p> + +<p>If you don't have a high enough version installed, depending on what phone you have you will need to either install an available nightly build of Firefox 1.2+, or configure and build it yourself from source.</p> + +<p>Builds available:</p> + +<ul> + <li><a href="http://downloads.geeksphone.com/">Geeksphone Keon/Peak builds</a> (to find out more about using these, read <a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Updating and Tweaking your Firefox OS Developer Preview phone/Geeksphone</a>)</li> + <li>More to follow</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: To build your own Firefox OS 1.2+ distribution, follow the instructions located at <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">Building and installing Firefox OS</a>, starting with <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">Firefox OS build prerequisites</a>.</p> +</div> + +<h3 id="Remote_debugging">Remote debugging</h3> + +<p>Next, you need to enable remote debugging in Firefox OS. To do so, go to <code>Settings > Device information > More information > Developer</code> and check the Remote Debugging checkbox.</p> + +<h3 id="Adb_Helper_Add-on" name="Adb_Helper_Add-on">ADB or ADB helper</h3> + +<p>The process uses the Android Debug Bridge (ADB) to handle the device-computer connection and communication. There are two options for running ADB:</p> + +<ul> + <li> + <p>Let Firefox handle ADB (recommended). <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the ADB Helper add-on</a>, which makes the process easier. With this installed, there's no need to install the ADB, and no need to type the <code>adb forward</code> command: everything is handled by the add-on.</p> + <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;" title="https://addons.mozilla.org">Download ADB Helper Add-on</a></li> + <li>Use ADB manually. You need to have it installed on your computer: download and install <code>adb</code> as explained in <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">Installing ADB</a>. You'll need to enable port forwarding by entering the following command into your terminal: + <pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre> + Note that you'll need to do this every time the phone is restarted or unplugged then re-plugged.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: There's no need to run this command if you installed the ADB Helper Add-on.</p> +</div> + +<h2 id="Connecting_your_device_to_the_App_Manager">Connecting your device to the App Manager</h2> + +<p>With all your configuration done, it's now time to plug your device into your computer and start the App Manager:</p> + +<ol> + <li>Plug the device into your computer via USB.</li> + <li>Disable Screen lock on your device by going to <code>Settings > Screen Lock</code> and unchecking the <code>Lock Screen</code> checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.</li> + <li>Start the App Manager — In Firefox Desktop select the <code>Tools > Web Developer > App Manager</code> menu option, or type <code>about:app-manager</code> in the URL bar.</li> + <li>At the bottom of the App Manager tab, you will see a connection status bar (see screenshot below). You should be able to connect your device by clicking the "Connect to localhost:6000" button.</li> + <li>If this works successfully, a prompt should appear on your device: "An incoming request to permit remote debugging connection was detected. Allow connection?". Tap the OK button (You may also have to press the power button on the phone so you can see the prompt.) The connection status bar should update to say "Connected to B2G", with a Disconnect button available to press if you want to cancel the connection.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6263/connection-status.png" style="display: block; height: 30px; margin: 0px auto; width: 600px;"></p> + +<div class="note"> +<p><strong>Note</strong>: The other controls in the connection status bar allow you to connect a simulator to the App Manager, which we cover in the next section, below, and change the port that the connection happens on. If you change the port, you'll also need to enable port forwarding for this port as well, as instructed in the {{anch("Enable port forwarding")}} section, above.</p> +</div> + +<h2 id="Using_a_Firefox_OS_Simulator_Add-on"><a name="Simulator">Using a Firefox OS Simulator Add-on</a></h2> + +<p>If you haven't got a real device available to use with App Manager, you can still try it out using a <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> Add-on. To start off, install the simulator with the following button (multiple versions are available; you are advised to install them all, for maximum flexibility):</p> + +<p><a class="download-button external ignore-external" href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" rel="noopener">Install Simulator</a></p> + + +<p>Once you've installed the simulator(s), you need to go to about:app-manager to see the connection status bar at the bottom of the App Manager tab, and click the "Start simulator" button. At least three buttons will appear:</p> + +<ul> + <li>"Firefox OS 1.3", "Firefox OS 1.2" ... etc. (or something similar): the left-most buttons contain the names of the simulator versions you have installed. Click one to start a connection to a simulator.</li> + <li>"Add": the middle button navigates to the simulator install links in this article, so you can add more Simulators (Firefox OS 1.3, Firefox OS 1.4, etc.)</li> + <li>"Cancel": the right hand button cancels the connection.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: The Firefox OS 1.5 Simulator has been removed, as 1.5 was changed to 2.0. If you have the Firefox OS 1.5 Simulator installed, it won't automatically update to 2.0, so you should uninstall 1.5 and install 2.0 instead. The Firefox OS 2.0 simulator will then automatically update.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: The Firefox OS 1.2 Simulator has been removed, as no phones are likely to be released with version 1.2 installed — this version is therefore of limited value, and it makes more sense to spend your time debugging on other versions.</p> +</div> + +<h2 id="Running_custom_builds_in_the_App_Manager">Running custom builds in the App Manager</h2> + +<p>Note that you can run custom B2G Desktop and Gaia/Gecko builds in the App Manager via the simulator. Read <a href="/en-US/Firefox_OS/Running_custom_builds_in_the_App_Manager">Running custom Firefox OS/Gaia builds in the App Manager</a> for instructions on how to do this.</p> + +<h2 id="Apps_panel_2"><a name="Apps_panel">Apps panel</a></h2> + +<p>Now that everything is working, let's review the functionality available inside the App Manager, starting with the Apps panel. From here, you can import an existing app to push onto your device and debug:</p> + +<ul> + <li>To install a local app, click on the plus next to the "Add Packaged App" label and use the resulting file chooser dialog to select the directory your app is contained inside.</li> + <li>To install an externally hosted app, enter the absolute URL of the app's manifest file into the text field inside the "Add Hosted App" box, then press the plus button.</li> +</ul> + +<p>Information about your app should appear on the right hand side of the window, as seen below:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6261/apps-panel.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p> + +<h3 id="Manifest_editor">Manifest editor</h3> + +<p>From Firefox 28 onwards, the Apps Panel includes an editor for the app manifest:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6613/apps-panel-fx-28.png" style="display: block; margin: 0px auto; width: 600px;"></p> + +<h3 id="Debugging">Debugging</h3> + +<p>Clicking on <em>"Update"</em> will update (install) the app on the device. Clicking on <em>"debug"</em> will connect a toolbox to the app, allowing you to debug its code directly:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6265/debug.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p> + +<div class="note"> +<p>You'll enjoy playing around with the toolbox — try altering the DOM, CSS etc. and you'll see the updates reflected on the device in realtime. Such updates will be saved on the installed app code; you'll see them next time you open the app on the device.</p> +</div> + +<p>Before Firefox 28, the tools are launched in a separate window. From Firefox 28 onwards, the tools are launched in a separate tab in the App Manager itself, alongside the Apps and Device tabs. The tab is given your app's icon so it's easy to find:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6615/toolbox-fx-28.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p> + +<h3 id="Errors">Errors</h3> + +<p>If an app was not added successfully — for example if the URL was incorrect, or you selected a packaged app folder — an entry will be added to the page for this app, but this will include error information.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6259/apps-error.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p> + +<p>You can also delete an app from this view, by hovering over the App name/description on the left of the window, and pressing the "X" button that appears in each case. This however doesn't remove the app from the device. To do that you need to manually remove the app using the device itself.</p> + +<h2 id="Device_panel_2"><a name="Device_panel">Device panel</a></h2> + +<p>The <em>Device</em> tab displays information about the connected device. From the <em>"</em>Installed Apps<em>"</em> window, apps on the device can be started and debugged.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6267/device-tab.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p> + +<div class="note"> +<p>Note: Certified Apps are not listed by default. <a href="#Debugging_Certified_Apps">See how to debug certified apps</a>.</p> +</div> + +<p><a name="permissions"></a>The "Permissions" window shows the required priviledges for different <a href="/en-US/docs/WebAPI">Web APIs</a> on the current device:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6269/permissions.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p> + +<p>Finally, you can take a screenshot of the current device display by clicking the "Screenshot" button. The screenshot appears in a new tab on Firefox, and from there you can save or discard it as you wish.</p> + +<h2 id="Debugging_Certified_Apps_2"><a name="Debugging_Certified_Apps">Debugging Certified Apps</a></h2> + +<p>Currently only devices running a development build of Firefox OS 1.2+ are capable of debugging certified apps. If you have a development build, you can enable certified app debugging by changing the pref <code>devtools.debugger.forbid-certified-apps</code> to <code>false</code> in your profile. To do this, follow the steps below:</p> + +<ol> + <li> + <p>On your computer, enter the following command in Terminal/console to enter your device's filesystem via the shell:</p> + + <pre class="brush: bash">adb shell</pre> + + <p>Your prompt should change to <code>root@android</code>.</p> + </li> + <li> + <p>Next, stop B2G running using the following command:</p> + + <pre class="brush: bash">stop b2g</pre> + </li> + <li> + <p>Navigate to the following directory:</p> + + <pre>cd /data/b2g/mozilla/*.default/</pre> + </li> + <li> + <p>Here, update the prefs.js file with the following line:</p> + + <pre class="brush: js">echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js</pre> + </li> + <li> + <p>After you've finished editing and saving the file, start B2G again using the following command:</p> + + <pre class="brush: bash">start b2g</pre> + </li> + <li> + <p>Exit the android filesystem using the <code>exit</code> command; this will return you to your normal terminal prompt.</p> + </li> + <li> + <p>Next, reconnect to the App Manager and you should see certified apps appear for debugging.</p> + </li> +</ol> + +<div class="note"> +<p>Note: If you want to add this preference to your Gaia build you can run <code>make DEVICE_DEBUG=1 reset-gaia</code>.</p> +</div> + +<h2 id="Troubleshooting_2"><a name="Troubleshooting">Troubleshooting</a></h2> + +<p id="My_device_is_not_recognized">If the device is not recognized:</p> + +<ul> + <li>If clicking the button corresponding to your Firefox OS phone doesn't do anything, make sure you haven't connected an Android phone at the same time as the Firefox OS phone to your computer.</li> + <li>Read the <a href="#Configuring_device">Device and system configuration</a> section thoroughly, and make sure all the steps are followed:</li> + <li>Is your device running at least Firefox OS 1.2?</li> + <li>Don't see all the apps? Do you need to enable <a href="#Debugging_Certified_Apps">Certified Apps debugging</a>?</li> + <li>Did you enable "Remote Debugging" in the settings of your phone?</li> + <li>If you are not using the <a href="#Adb_Helper_Add-on">ADB Helper add-on</a>: + <ul> + <li>Did you successfully run the <code>adb forward</code> command?</li> + </ul> + </li> + <li>If you are using the <a href="#Adb_Helper_Add-on">ADB Helper add-on</a> and your device is not listed in the bottom toolbar: + <ul> + <li>If you use Linux, <a href="http://developer.android.com/tools/device.html#setting-up">make sure to setup udev correctly</a></li> + <li>If you use Windows, <a href="http://developer.android.com/tools/device.html#setting-up">make sure to install the appropriate drivers</a></li> + <li>You can also enable verbose logging to gather diagnostics: + <ul> + <li>Use about:config to set the pref "<span class="message"><span class="content"><span class="email">extensions.adbhelper@mozilla.org.sdk</span>.console.logLevel"</span></span> to the string value "all"</li> + <li>Disable and re-enable the ADB Helper add-on from the add-ons manager, or restart Firefox</li> + <li>Open the App Manager again</li> + <li>In the <a href="/docs/Tools/Browser_Console">Browser Console</a>, you should now see additional output lines that mention "adbhelper"</li> + <li>If you see them but aren't sure what they mean, stop by the <a href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">#devtools room on IRC</a> or <a href="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&assigned_to=nobody%40mozilla.org&attach_text=&blocked=&bug_file_loc=http%3A%2F%2F&bug_ignored=0&bug_severity=normal&bug_status=NEW&cf_blocking_b2g=---&cf_crash_signature=&cf_status_b2g18=---&cf_status_b2g_1_1_hd=---&cf_status_b2g_1_2=---&cf_status_firefox24=---&cf_status_firefox25=---&cf_status_firefox26=---&cf_status_firefox27=---&cf_status_firefox_esr17=---&cf_status_firefox_esr24=---&cf_tracking_b2g18=---&cf_tracking_firefox24=---&cf_tracking_firefox25=---&cf_tracking_firefox26=---&cf_tracking_firefox27=---&cf_tracking_firefox_esr17=---&cf_tracking_firefox_esr24=---&cf_tracking_firefox_relnote=---&cf_tracking_relnote_b2g=---&comment=&component=Developer%20Tools%3A%20App%20Manager&contenttypeentry=&contenttypemethod=autodetect&contenttypeselection=text%2Fplain&data=&defined_groups=1&dependson=&description=&flag_type-203=X&flag_type-37=X&flag_type-41=X&flag_type-5=X&flag_type-607=X&flag_type-720=X&flag_type-721=X&flag_type-737=X&flag_type-748=X&flag_type-781=X&flag_type-787=X&flag_type-791=X&flag_type-799=X&flag_type-800=X&flag_type-802=X&flag_type-803=X&flag_type-809=X&flag_type-825=X&form_name=enter_bug&keywords=&maketemplate=Remember%20values%20as%20bookmarkable%20template&op_sys=All&priority=--&product=Firefox&qa_contact=developer.tools%40firefox.bugs&rep_platform=x86&requestee_type-203=&requestee_type-41=&requestee_type-5=&requestee_type-607=&requestee_type-748=&requestee_type-781=&requestee_type-787=&requestee_type-791=&requestee_type-800=&short_desc=&status_whiteboard=&target_milestone=---&version=Trunk">file a bug</a> with the log output</li> + </ul> + </li> + </ul> + </li> + <li>See <strong>"???????"</strong> instead of the device name on Linux? You have permissions issues. <a href="http://developer.android.com/tools/device.html#setting-up">Make sure to setup udev correctly</a>.</li> + <li>Is your phone screen unlocked?</li> + <li>If the command "adb devices" shows no entries even though the phone is connected and unlocked, you may have to <a href="http://blog.fh-kaernten.at/wehr/?p=1182">edit adb_usb.ini</a>.</li> +</ul> + +<p>Can't connect your device to the App Manager or start the simulator? <a href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">Let us know</a> or <a href="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&assigned_to=nobody%40mozilla.org&attach_text=&blocked=&bug_file_loc=http%3A%2F%2F&bug_ignored=0&bug_severity=normal&bug_status=NEW&cf_blocking_b2g=---&cf_crash_signature=&cf_status_b2g18=---&cf_status_b2g_1_1_hd=---&cf_status_b2g_1_2=---&cf_status_firefox24=---&cf_status_firefox25=---&cf_status_firefox26=---&cf_status_firefox27=---&cf_status_firefox_esr17=---&cf_status_firefox_esr24=---&cf_tracking_b2g18=---&cf_tracking_firefox24=---&cf_tracking_firefox25=---&cf_tracking_firefox26=---&cf_tracking_firefox27=---&cf_tracking_firefox_esr17=---&cf_tracking_firefox_esr24=---&cf_tracking_firefox_relnote=---&cf_tracking_relnote_b2g=---&comment=&component=Developer%20Tools%3A%20App%20Manager&contenttypeentry=&contenttypemethod=autodetect&contenttypeselection=text%2Fplain&data=&defined_groups=1&dependson=&description=&flag_type-203=X&flag_type-37=X&flag_type-41=X&flag_type-5=X&flag_type-607=X&flag_type-720=X&flag_type-721=X&flag_type-737=X&flag_type-748=X&flag_type-781=X&flag_type-787=X&flag_type-791=X&flag_type-799=X&flag_type-800=X&flag_type-802=X&flag_type-803=X&flag_type-809=X&flag_type-825=X&form_name=enter_bug&keywords=&maketemplate=Remember%20values%20as%20bookmarkable%20template&op_sys=All&priority=--&product=Firefox&qa_contact=developer.tools%40firefox.bugs&rep_platform=x86&requestee_type-203=&requestee_type-41=&requestee_type-5=&requestee_type-607=&requestee_type-748=&requestee_type-781=&requestee_type-787=&requestee_type-791=&requestee_type-800=&short_desc=&status_whiteboard=&target_milestone=---&version=Trunk">file a bug</a>.</p> diff --git a/files/th/archive/index.html b/files/th/archive/index.html new file mode 100644 index 0000000000..b7a3cfe8de --- /dev/null +++ b/files/th/archive/index.html @@ -0,0 +1,20 @@ +--- +title: Archive of obsolete content +slug: Archive +translation_of: Archive +--- +<p>(th translation)</p> + +<p>Here at MDN, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and browsers. Perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers. Or for "reasons," your company is required to use very old software and you need to build Web content that runs on that software. Or perhaps you're just curious about the history of an obsolete feature or API, and how it worked.</p> + +<p>There are many reasons older documentation can be useful. So, we've established this area into which we can archive older documentation. Material in this Archived content zone should <strong>not</strong> be used for building new Web sites or apps for modern browsers. It's here for historical reference only.</p> + +<div class="note"> +<p><strong>Note to writers:</strong> We need to try to keep the subpages here organized instead of all dumped into one large folder. Try to create subtrees for categories of material. Also, only move pages here that are <strong>extremely</strong> obsolete. If anyone might realistically need the information in a living product, it may not be appropriate to move it here. In general, it may be best to discuss it in the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs chat room</a> before moving content here.</p> +</div> + +<p>{{SubpagesWithSummaries}}</p> + +<h2 id="Subnav">Subnav</h2> + +<p>{{ListSubpages("/en-US/docs/Archive", 2, 0, 1)}}</p> diff --git a/files/th/archive/meta_docs/index.html b/files/th/archive/meta_docs/index.html new file mode 100644 index 0000000000..52de2c8447 --- /dev/null +++ b/files/th/archive/meta_docs/index.html @@ -0,0 +1,12 @@ +--- +title: MDN "meta-documentation" archive +slug: Archive/Meta_docs +tags: + - Archive + - MDN + - NeedsTranslation + - TopicStub +translation_of: Archive/Meta_docs +--- +<p>Here you'll find archived "meta-documentation"; that is, documentation about how to write documentation on MDN. The articles here are obsolete and should no longer be referenced; we are retaining them here for reference while we migrate some content to new places, but very little of this is useful.</p> +<p>{{LandingPageListSubpages}}</p> diff --git a/files/th/archive/meta_docs/writing_content/index.html b/files/th/archive/meta_docs/writing_content/index.html new file mode 100644 index 0000000000..50a6418805 --- /dev/null +++ b/files/th/archive/meta_docs/writing_content/index.html @@ -0,0 +1,56 @@ +--- +title: Writing content +slug: Archive/Meta_docs/Writing_content +translation_of: Archive/Meta_docs/Writing_content +--- +<p>There are always things that can be added or updated on MDN. Whether it's all-new documentation for a sparkling new API or a revision to an older API that's changed subtly, you'll find lots of opportunities to help.</p> + +<h2 id="Editing_an_existing_page">Editing an existing page</h2> + +<p>If you've found a page you'd like to revise, simply click the "edit" button at its top right corner. This will open the WYSIWYG editor for working on the page's contents. See the <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide">MDN editor guide</a> for details on how to work with the editor, as well as how to work with the macro system we use to help automate the construction and formatting of content.</p> + +<p>There are lots of reasons you might edit an existing page:</p> + +<ul> + <li>You've spotted an error or typo.</li> + <li>You want to reword something to be easier to understand.</li> + <li>The layout or formatting of the page is messy.</li> + <li>The API being documented has changed and the documentation needs updating to match the changes.</li> + <li>You'd like to add information about a behavior difference between multiple browsers for an API.</li> + <li>You want to add or improve a code sample. See {{anch("Add a code sample")}} below for details.</li> + <li>The article is a stub, or is simply missing important details.</li> +</ul> + +<h2 id="Adding_a_new_page">Adding a new page</h2> + +<p>This is the big one! Adding a new page to MDN makes the Web love you and want to hug you. There are several obvious reasons to create a new page, including to document an API that's not yet documented or to add a new tutorial or guide on a topic.</p> + +<p>There are some ways to go about creating a new page on MDN, once you've <a href="/en-US/docs/Project:MDN/Contributing/Getting_started#Logging_into_MDN">logged in</a>:</p> + +<dl> + <dt>Click a "missing page" link</dt> + <dd>As you browse MDN, you'll occasionally find links to pages that don't exist yet. Often, as we create articles, we include links to pages that need to be created, even if they haven't been made yet. This helps us keep track of things that need to eventually be done, although sometimes it takes some time to get back to them. You should feel free to do so! Just click these links and you'll be taken straight into the editor for the new page.</dd> + <dt>Create a subpage</dt> + <dd>Near the top-right corner of each article is a <strong>"Advanced"</strong> drop-down menu. In that menu is a <strong>"New sub-page"</strong> option. Clicking that option opens the page editor for a new page whose parent page in the site hierarchy is the page on which you chose <strong>"New sub-page"</strong>. Simply fill out the title and slug and start writing the article's content.</dd> + <dt>Create a clone</dt> + <dd>You can also clone an existing page using the <strong>"Clone this page"</strong> option in the "This page" drop-down menu. Clicking this option makes a copy of the current page, whose parent page is the same as the current page, and opens the editor on that page, where you can set the page's title and slug, as well as edit the content of the page. This is typically a good way to add a new page to an existing reference area of the site, for example, because it gets you a sample layout for the content.</dd> + <dt>Create a link to a page that doesn't exist, then click it</dt> + <dd>This is a bit of a hybrid method. Since every page ought to be linked to from somewhere, you could start by creating a link to the new article by adding it to an existing page, then, after saving that page, you can click the link you just inserted to open an editor for the new article.</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> If you're not logged in, you will get a 404 error when trying to visit an article that doesn't exist, instead of being offered an editor for a new page.</p> +</div> + +<h2 id="Finding_information">Finding information</h2> + +<p>There's a lot of information out there, and it can be tricky to hunt down the exact help you need. Here are some tips to get you started.</p> + +<dl> + <dt><a href="https://wiki.mozilla.org/Modules">Module owner lists</a></dt> + <dd>Mozilla projects work on a "module owner" basis; each major component has an owner or owners who are responsible for what goes on there. These owners are often your best source of information — or at least a great way to find the right person to talk to.</dd> + <dt><a href="http://mxr.mozilla.org/">Mozilla source cross-reference</a></dt> + <dd>MXR, the Mozilla cross-reference, lets you access all the source code for the Mozilla project (with the exception of some things, like much of Firefox OS, which is located on GitHub). The code and its comments are often a great resource for information.</dd> + <dt><a href="http://wiki.mozilla.org/">Mozilla wiki</a></dt> + <dd>The Mozilla wiki — often referred to as "wikimo" — is a repository of process and design notes, drafts, plans, and preliminary specifications. Despite being often a cluttered mess, it's a treasure trove of invaluable information.</dd> +</dl> diff --git a/files/th/archive/mozilla/index.html b/files/th/archive/mozilla/index.html new file mode 100644 index 0000000000..34a4090d47 --- /dev/null +++ b/files/th/archive/mozilla/index.html @@ -0,0 +1,223 @@ +--- +title: Archived Mozilla and build documentation +slug: Archive/Mozilla +translation_of: Archive/Mozilla +--- +<p><strong>Translation in progress</strong></p> + +<p>These articles are archived, obsolete documents about Mozilla, Gecko, and the process of building Mozilla projects.</p> + + + +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/ActiveX_Control_for_Hosting_Netscape_Plug-ins_in_IE">ActiveX Control for Hosting Netscape Plug-ins in IE</a></dt> + <dd class="landingPageList">Microsoft has removed support for Netscape plug-ins from IE 5.5 SP 2 and beyond. If you are a plug-in author, you may find this project saves you a lot of work!</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/ant_script_to_assemble_an_extension">ant script to assemble an extension</a></dt> + <dd class="landingPageList">This ant script helps to <a href="en/Extension_Packaging">package an extension</a></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/SpiderMonkey">Archived SpiderMonkey docs</a></dt> + <dd class="landingPageList">This section contains old SpiderMonkey documentation.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Autodial_for_Windows_NT">Autodial for Windows NT</a></dt> + <dd class="landingPageList">This document is intended to explain how the autodial helper feature implemented for <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=93002" title="FIXED: [distribution]Conn: Auto-dial for NT-based Windows">bug 93002</a> works and why it works that way.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Automated_testing_tips_and_tricks">Automated testing tips and tricks</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Automatic_Mozilla_Configurator">Automatic Mozilla Configurator</a></dt> + <dd class="landingPageList"><a href="/en-US/docs/ankh8">Ankh8</a></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Automatically_Handle_Failed_Asserts_in_Debug_Builds">Automatically Handle Failed Asserts in Debug Builds</a></dt> + <dd class="landingPageList">As of 2004-12-8, it is now possible to automatically handle failed asserts in debug builds of Mozilla for Windows.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/BlackConnect">BlackConnect</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Blackwood">Blackwood</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Bonsai">Bonsai</a></dt> + <dd class="landingPageList">It is a tool that lets you perform queries on the contents of a CVS archive; you can: get a list of checkins, see what checkins have been made by a given person, or on a given CVS branch, or in a particular time period. It also includes tools for looking at checkin logs (and comments); doing diffs between various versions of a file; and finding out which person is responsible for changing a particular line of code ("cvsblame").</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Bookmark_keywords">Bookmark Keywords</a></dt> + <dd class="landingPageList">Practically every Web surfer has bookmarks, of course, and power surfers usually have hundreds stuffed into folders within folders. In addition to being handy pointers to useful resources, bookmarks in Mozilla can be used to make the address bar itself a power tool. Searches, lookups, package tracking, and even word definitions can all be retrieved from user-customized bookmarks.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Building_TransforMiiX_standalone">Building TransforMiiX standalone</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/callCalendarView">calICalendarView</a></dt> + <dd class="landingPageList">An object implementing <code>calICalendarView</code> is generally intended to serve as a way of manipulating a set of DOM nodes corresonding to a visual representation of <a href="en/CalIEvent">calIEvent</a> and <a href="en/CalITodo">calITodo</a> objects. Because of this close association between methods and attributes on the one hand, and content on the other, <code>calICalendarView</code> implementations are particularly well suited to XBL. There is, however, no practical obstacle to the interface being implemented by any javascript object associated with a group of DOM nodes, even non-anonymous XUL nodes.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/callCalendarViewController">calICalendarViewController</a></dt> + <dd class="landingPageList">A <code>calICalendarViewController</code> provides a way for a <a href="en/CalICalendarView">calICalendarView</a> to create, modify, and delete items. Implementing a <code>calICalendarViewController</code> allows for these actions to be performed in a manner consistent with the rest of the application in which the <a href="en/CalICalendarView">calICalendarView</a> is included.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/callFileType">calIFileType</a></dt> + <dd class="landingPageList">The <code>calIFileType</code> interface provides information about a specific file type.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Chromeless">Chromeless</a></dt> + <dd class="landingPageList">[This project may not be active — check Github <a href="https://github.com/mozilla/chromeless" title="https://github.com/mozilla/chromeless">https://github.com/mozilla/chromeless</a>]</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Creating_a_Firefox_sidebar_extension">Creating a Firefox sidebar extension</a></dt> + <dd class="landingPageList">This article describes how to create a registered sidebar for Firefox 2 or greater. See the references section for information on creating extension in earlier browsers.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Creating_a_hybrid_CD">Creating a hybrid CD</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Creating_a_microsummary">Creating a Microsummary</a></dt> + <dd class="landingPageList">A microsummary generator is a set of instructions for creating a microsummary from the content of a page. Web pages can reference generators via <code><link rel="microsummary"></code> elements in their <code><head></code> elements. Generators can also be independently downloaded and installed by users if they include a list of pages to which they apply.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Creating_a_Mozilla_extension">Creating a Mozilla Extension</a></dt> + <dd class="landingPageList">A Mozilla extension is an installable enhancement to the Mozilla browser that provides additional functionality (for example <a class="external" href="http://linky.mozdev.org/">Linky</a>, which adds an item to the context menu for opening multiple links in a document or selection). This tutorial walks you through the process of building a Mozilla extension that adds an icon to Mozilla's status bar showing the current status of the Mozilla source code (i.e. whether or not the latest version of the code is compiling successfully and passing tests). The extension will access <a class="external" href="http://tinderbox.mozilla.org/">Tinderbox</a>, mozilla.org's webtool for tracking source code status, to get the status of the code.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Creating_a_sking_for_Firefox_Getting_Started">Creating a Skin for Firefox/Getting Started</a></dt> + <dd class="landingPageList">Download the latest version of Firefox and install it. Be sure to install the DOM Inspector extension as well.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Creating_a_skin_for_Mozilla">Creating a Skin for Mozilla</a></dt> + <dd class="landingPageList">In order to create a skin for mozilla, you will need to know three things. How to edit images, extract zip files, and how to modify CSS. Mozilla uses standard gif, png, and jpeg images for the buttons and CSS to style everything else in the interface.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Creating_a_Skin_for_SeaMonkey_2.x">Creating a Skin for SeaMonkey 2.x</a></dt> + <dd class="landingPageList">You're going to make a theme for SeaMonkey 2, but don't know how? I hope this manual will help you.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Creating_regular_expressions_for_a_microsummary_generator">Creating regular expressions for a microsummary generator</a></dt> + <dd class="landingPageList">A regular expression is a special kind of string (i.e. a sequence of characters) that matches patterns of characters in other strings. Microsummary generators use them to identify the pages that the generators know how to summarize by matching patterns in those pages' URLs.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Dehydra">Dehydra</a></dt> + <dd class="landingPageList">The development focus switched to <a href="https://wiki.mozilla.org/DXR">DXR</a> (where the "D" comes from "Dehydra"), which is based on clang instead of gcc. Try DXR instead, or else try the gcc python plugin: <a href="https://fedorahosted.org/gcc-python-plugin/" title="https://fedorahosted.org/gcc-python-plugin/">https://fedorahosted.org/gcc-python-plugin/</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Developing_New_Mozilla_Features">Developing New Mozilla Features</a></dt> + <dd class="landingPageList">Tips For Contributing New Features To Mozilla.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Devmo_launch_roadmap">Devmo 1.0 Launch Roadmap</a></dt> + <dd class="landingPageList">Comments, ideas, questions and other discussion should be added on the <a href="en/Devmo_talk/1.0_Launch_Roadmap">Devmo talk:1.0 Launch Roadmap</a> page. Further details on smaller tasks being done are available at <a>User:Dria:TODO</a> page. See also <a>Current Events</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Download_Manager_improvements_in_Firefox_3">Download Manager improvements in Firefox 3</a></dt> + <dd class="landingPageList">Firefox 3 offers improvements to the Download Manager that allow multiple progress listeners, use of the <a href="/en-US/docs/Storage">Storage</a> API for data management, download resuming, and more. In addition, you can augment or replace the Download Manager's user interface by implementing the new <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadManagerUI" title="">nsIDownloadManagerUI</a></code> interface.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Download_Manager_preferences">Download Manager preferences</a></dt> + <dd class="landingPageList">There are several preferences used by the Download Manager. This article provides a list of them.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Drag_and_drop">Drag and Drop</a></dt> + <dd class="landingPageList">This section describes how to implement objects that can be dragged around and dropped onto other objects.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/DTrace">DTrace</a></dt> + <dd class="landingPageList"> <strong>DTrace</strong> is Sun Microsystem's dynamic tracing framework that allows developers to instrument a program with probes that have little to no effect on performance when not in use and very little when active. Probe data can be collected with scripts written in <a class="external" href="http://docs.sun.com/app/docs/doc/817-6223">D</a> (no, not <a href="https://en.wikipedia.org/wiki/D_(programming_language)" title="that one">that one</a>). Mozilla DTrace support has <a class="external" href="http://www.opensolaris.org/os/project/mozilla-dtrace/">been added</a> by the Sun DTrace team and can be used on Solaris 10 and Mac OS X 10.5.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Embedding_FAQ">Embedding FAQ</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Embedding_Mozilla_in_a_Java_Application_using_JavaXPCOM">Embedding Mozilla in a Java Application using JavaXPCOM</a></dt> + <dd class="landingPageList"><a href="/en/XULRunner" title="en/XULRunner">XULRunner</a> ships with the <a href="/en/JavaXPCOM" title="en/JavaXPCOM">JavaXPCOM</a> component, which allows Java code to interact with XPCOM objects. As you will see in this article, working with XPCOM objects in Java is not that much different than doing so in C++.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Error_console">Error Console</a></dt> + <dd class="landingPageList">The Error Console is a tool available in most Mozilla-based applications that is used for reporting errors in the application chrome and in web pages user opens. It reports <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>-related errors and warnings, <a href="/en-US/docs/CSS" title="CSS">CSS</a> errors and arbitrary messages from chrome code. In Firefox, the Error Console can be opened from the tools menu or by Ctrl-Shift-J.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Exception_logging_in_JavaScript">Exception logging in JavaScript</a></dt> + <dd class="landingPageList">Technical review completed.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Project:Existing_Content">Existing Content</a></dt> + <dd class="landingPageList">This is a list of existing mozilla.org documentation. It needs to be <a class="external" href="http://mail.mozilla.org/pipermail/devmo-general/2005-July/000214.html">checked, prioritized, and migrated</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Extension_Frequently_Asked_Questions">Extension Frequently Asked Questions</a></dt> + <dd class="landingPageList">This is quick set of answers to the most common issues with <a class="internal" href="/en/Extensions" title="en/Extensions">extension</a> development. They are currently written with mostly Firefox in mind, but most if not all should easily translate to SeaMonkey, Thunderbird or any of the other applications. For Thunderbird, you may also find the extension <a class="internal" href="/en/Extensions/Thunderbird/HowTos" title="en/Extensions/Thunderbird/HowTos">HowTo</a> or <a class="internal" href="/en/Extensions/Thunderbird/FAQ" title="en/Extensions/Thunderbird/FAQ">FAQ</a> pages helpful.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Fighting_Junk_Mail_with_Netscape_7.1">Fighting Junk Mail with Netscape 7.1</a></dt> + <dd class="landingPageList"><span class="comment">Summary: Is your mail account drowning in a flood of spam? Netscape 7.1 includes built-in junk mail filtering that you can train to meet your specific needs. Eric Meyer share his experiences with making the junk mail controls more effective, and looks at other preferences you might want to set to keep your account safe.</span></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Firefox_Sync">Firefox Sync</a></dt> + <dd class="landingPageList">Sync refers to a family of related components and services which provide synchronization of data between Mozilla application instances. These components and services include:</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Force_RTL">Force RTL</a></dt> + <dd class="landingPageList">(This is a temporary placeholder/stub for the Force RTL page)</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Gecko_Coding_Help_Wanted">Gecko Coding Help Wanted</a></dt> + <dd class="landingPageList">Take a look through <a href="http://lxr.mozilla.org/">LXR</a>, and you'll realize that Mozilla's source code is a big place.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/GRE">GRE</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Project:Hacking_wiki">Hacking wiki</a></dt> + <dd class="landingPageList">To be able to hack the MDC wiki software, you'll need a local webserver install, which <a class="external" href="http://meta.wikimedia.org/wiki/Help:Introduction#System_Requirements">can run MediaWiki</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Help_viewer">Help Viewer</a></dt> + <dd class="landingPageList">Help Viewer: Allows information to be shown to the user inside Mozilla.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Helper_Apps">Helper Apps (and a bit of Save As)</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Hidden_prefs">Hidden prefs</a></dt> + <dd class="landingPageList"><span style="background: lemonchiffon; border: 1px solid navajowhite; display: block; margin-bottom: 1em; overflow: hidden; text-align: center;"><strong style="border-bottom: 1px solid navajowhite; color: coral; display: block; font-weight: 700;">This page has been flagged by editors or users as needing technical review.</strong> Until it is fully reviewed, it may contain inaccurate or incorrect information. </span></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Nanojit_merging">How to Write and Land Nanojit Patches</a></dt> + <dd class="landingPageList">Adobe and Mozilla share a copy of Nanojit. This means that landing nanojit patches is a bit complicated, but experience has taught us that this is <strong>much</strong> better than having separate versions of nanojit.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/HTTP_Class_Overview">HTTP Class Overview</a></dt> + <dd class="landingPageList">This document provides an overview of the classes used by the Mozilla <a href="/en/HTTP" title="en/HTTP">HTTP</a> implementation. It's meant as a guide to developers wishing to understand or extend the Mozilla HTTP implementation.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Introducing_the_Audio_API_Extension">Introducing the Audio API extension</a></dt> + <dd class="landingPageList">The Audio Data API extension extends the HTML5 specification of the <a href="/en-US/docs/Web/HTML/Element/audio" title="The HTML <audio> element is used to represent sound content in documents. Added as part of HTML5, it may contain several audio sources, represented using the src attribute or the <source> element; the browser will choose the most suitable one. Fallback content for browser not supporting the <audio> element can be added too."><code><audio></code></a> and <a href="/en-US/docs/Web/HTML/Element/video" title="The HTML <video> element is used to embed video content in an HTML or XHTML document."><code><video></code></a> media elements by exposing audio metadata and raw audio data. This enables users to visualize audio data, to process this audio data and to create new audio data.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Java_in_Firefox_Extensions">Java in Firefox Extensions</a></dt> + <dd class="landingPageList">If you are in need of calling Java code from within a Firefox <a href="/en/Extensions" title="en/Extensions">extension</a>, you can make use of <a class="external" href="http://en.wikipedia.org/wiki/LiveConnect">LiveConnect</a>. LiveConnect gives your extension's JavaScript code (linked from or contained in XUL code) access to 2 objects: <code>java</code> and <code>Packages</code> (note that per <a class="external" href="http://forums.java.net/jive/thread.jspa?threadID=45933&tstart=0">this thread</a>, although the <a class="link-https" href="https://jdk6.dev.java.net/plugin2/liveconnect/">new documentation</a> for the LiveConnect reimplementation states that these <a class="link-https" href="https://jdk6.dev.java.net/plugin2/liveconnect/#DEPRECATED_FUNCTIONALITY">globals will be deprecated</a> (in the context of applets), "Firefox and the Java Plug-In will continue to support the global java/Packages keywords, in particular in the context of Firefox extensions."). These 2 objects let you make use of the standard JDK classes, e.g.,</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/JavaScript_crypto">JavaScript crypto</a></dt> + <dd class="landingPageList">Mozilla defines a special JavaScript object to allow web pages access to certain cryptographic-related services. These services are a balance between the functionality web pages need and the requirement to protect users from malicious web sites. Most of these services are available via the DOM <a href="/en-US/docs/Web/API/Window" title="The window object represents a window containing a DOM document; the document property points to the DOM document loaded in that window."><code>window</code></a> object as <a href="/en-US/docs/Web/API/Window/crypto" title="The Window.crypto read-only property returns the Crypto object associated to the global object. This object allows web pages access to certain cryptographic related services."><code>window.crypto</code></a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Jetpack">Jetpack</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Litmus_tests">Litmus tests</a></dt> + <dd class="landingPageList">Litmus tests are (non-automated) tests that are documented in the litmus database. See <a class="external" href="http://litmus.mozilla.org" rel="freelink">http://litmus.mozilla.org</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Makefile.mozextension.2">Makefile.mozextension.2</a></dt> + <dd class="landingPageList">This Makefile is a modification of the <code>Makefile.mozextention</code>, found in <a class="external" href="http://kb.mozillazine.org/Makefile_for_packaging_an_extension">Makefile for packaging an extension - MozillaZine Knowledge Base</a> (2005).</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Microsummary_topics">Microsummary topics</a></dt> + <dd class="landingPageList">To programmatically install a microsummary generator -- for example, in an extension that helps users create custom generators for their favorite sites -- obtain a reference to the <a class="external" href="http://lxr.mozilla.org/mozilla/source/browser/components/microsummaries/public/nsIMicrosummaryService.idl#178"><code>nsIMicrosummaryService</code></a> interface implemented by the <a class="external" href="http://lxr.mozilla.org/mozilla/source/browser/components/microsummaries/src/nsMicrosummaryService.js.in"><code>nsIMicrosummaryService</code></a> component, then call its <code><a class="external" href="http://lxr.mozilla.org/mozilla/source/browser/components/microsummaries/public/nsIMicrosummaryService.idl#191">installGenerator()</a></code> method, passing it an XML document containing the generator.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Migrate_apps_from_Internet_Explorer_to_Mozilla">Migrate apps from Internet Explorer to Mozilla</a></dt> + <dd class="landingPageList">When Netscape started the Mozilla browser, it made the conscious decision to support W3C standards. As a result, Mozilla is not fully backwards-compatible with Netscape Navigator 4.x and Microsoft Internet Explorer legacy code; for example, Mozilla does not support <code><layer></code> as I will discuss later. Browsers, like Internet Explorer 4, that were built before the conception of W3C standards inherited many quirks. In this article, I will describe Mozilla's quirks mode, which provides strong backwards HTML compatibility with Internet Explorer and other legacy browsers.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Monitoring_downloads">Monitoring downloads</a></dt> + <dd class="landingPageList">Firefox 3 makes it easier than ever to monitor the status of downloads. Although it was possible to do so in previous versions of Firefox, it was previously only possible for one observer to do so at a time. Firefox 3 introduces new API that allows any number of listeners to observe downloads.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Mozilla_Application_Framework">Mozilla Application Framework</a></dt> + <dd class="landingPageList"><em>The Mozilla Application Framework: for powerful, easy to develop cross-platform applications</em></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Mozilla_crypto_FAQ">Mozilla Crypto FAQ</a></dt> + <dd class="landingPageList">In this document I try to answer some frequently asked questions about the Mozilla web browser and mail/news client and its support for SSL, S/MIME, and related features based on cryptographic technology. Note that this document is for your information only and is not intended as legal advice. If you wish to develop and distribute cryptographic software, particularly for commercial sale or distribution, then you should consult an attorney with expertise in the particular laws and regulations that apply in your jurisdiction.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Modules_and_Module_ownership">Mozilla Modules and Module Ownership</a></dt> + <dd class="landingPageList">REDIRECT <a class="redirect" href="http://www.mozilla.org/hacking/module-ownership.html">http://www.mozilla.org/hacking/module-ownership.html</a></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/mozprocess">Mozprocess</a></dt> + <dd class="landingPageList"><a class="link-https" href="https://github.com/mozilla/mozbase/tree/master/mozprocess">mozprocess</a> provides python process management via an operating system and platform transparent interface to Mozilla platforms of interest. Mozprocess aims to provide the ability to robustly terminate a process (by timeout or otherwise), along with any child processes, on Windows, OS X, and Linux. Mozprocess utilizes and extends <code>subprocess.Popen</code> to these ends.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Nanojit">Nanojit</a></dt> + <dd class="landingPageList">Nanojit is a small, cross-platform C++ library that emits machine code. Both the Tamarin JIT and the SpiderMonkey JIT (a.k.a. TraceMonkey) use Nanojit as their back end.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Project:New_Skin_Notes">New Skin Notes</a></dt> + <dd class="landingPageList">Devmo has a new skin that is ready for testing. If you go to your <a>user preferences</a>, you can change the skin to "Devmo". This is currently just a preview, but we would appreciate help with testing.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Persona">Persona</a></dt> + <dd class="landingPageList"><a href="https://login.persona.org/">Mozilla Persona</a> is a cross-browser login system for the Web, that's easy to use and easy to deploy. It works on <a href="/en-US/docs/persona/Browser_compatibility">all major browsers</a>, and you can <a href="/en-US/docs/Persona/Quick_Setup">get started today</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Plug-n-Hack">Plug-n-Hack</a></dt> + <dd class="landingPageList"><strong>Plug-n-Hack</strong> (PnH) is a proposed standard from the Mozilla security team for defining how security tools can interact with browsers in a more useful and usable way.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Plugin_architecture">Plugin Architecture</a></dt> + <dd class="landingPageList">This page contains some notes on how plugins work internally in Gecko. It is mainly of interest to Gecko developers.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Porting_NSPR_to_Unix_Platforms">Porting NSPR to Unix Platforms</a></dt> + <dd class="landingPageList">Last modified 16 July 1998</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Project:DevEdge">Priority Content</a></dt> + <dd class="landingPageList"><strong>Update:</strong> I've removed documents from this list that have been migrated into the wiki. The list of completed documents is available through the <a href="en/DevEdge">DevEdge</a> page.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Prism">Prism</a></dt> + <dd class="landingPageList">Prism is a simple XULRunner-based browser that hosts web applications without the normal web browser user interface. Prism is based on a concept called Site-Specific Browsers (SSB). An SSB is designed to work exclusively with a single web application. It doesn’t have the menus, toolbars and other accoutrements of a traditional web browser. An SSB also offers tighter integration with the operating system and desktop than a typical web application running through a web browser. Applications running in an SSB are therefore able to benefit from many of the advantages of the desktop and of the web at the same time.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Proxy_UI">Proxy UI</a></dt> + <dd class="landingPageList">(Recently Added - some support for reading OS and account settings.)</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Remote_XUL">Remote XUL</a></dt> + <dd class="landingPageList">How to use XUL delivered from a webserver, not as part of chrome.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Space_Manager_Detailed_Design">Space Manager Detailed Design</a></dt> + <dd class="landingPageList">The Space Manager and related classes and structures are an important of the Gecko Layout system, specifically Block Layout. See the High Level Design document for an overview of the Space Manager, and as an introduction to the classes, structures and algorithms container in this, the Detailed Design Document.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Space_Manager_High_Level_Design">Space Manager High Level Design</a></dt> + <dd class="landingPageList">The Space Manager and associated classes and structures are used by Block and Line layout to manage rectangular regions that are occupied and available, for correct handling of floated elements and the elements that flow around them. When elements are floated to the left or right in a layout, they take up space and influence where other elements can be placed. The Space Manager is responsible for keeping track of where space is taken up and where it is available. This information is used by block layout to correctly compute where other floated elements should be placed, and how much space is available to normal in-flow elements that flow around the floated bits.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Standalone_XPCOM">Standalone XPCOM</a></dt> + <dd class="landingPageList"><strong>Standalone XPCOM</strong> is a tree configuration that builds a minimal set of libraries (shared mostly) that can be used to get all features of XPCOM. The contents of this standalone XPCOM in general are:</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Stress_testing">Stress testing</a></dt> + <dd class="landingPageList">Consume.exe from the <a class="external" href="http://www.microsoft.com/downloads/details.aspx?FamilyID=9d467a69-57ff-4ae7-96ee-b18c4790cffd&displaylang=en">Windows Server 2003 Resource Kit Tools</a> can consume various resources: physical memory, CPU time, page file, disk space and even the kernel pool. Although for Win2003, it should install into WinXP fine (Win2000 compatibility is unknown). The only downside is you can't specify how much of the resource to use, only which one to consume. Also be warned: always remember the -time option, or you may be hitting that physical reset button sooner than you would have liked!</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Bundles">Structure of an installable bundle</a></dt> + <dd class="landingPageList"><a href="/en/XUL_Application_Packaging" title="en/XUL_Application_Packaging">XULRunner applications</a>, <a href="/en/Extensions" title="en/Extensions">extensions</a>, and <a href="/en/Themes" title="en/Themes">themes</a> all share a common directory structure, and in some cases the same bundle can be used as a standalone XULRunner application as well as an installable application extension.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Supporting_private_browsing_mode">Supporting private browsing mode</a></dt> + <dd class="landingPageList">Firefox 3.5 introduced private browsing mode, in which potentially private information is not recorded. This includes cookies, history information, download information, and so forth.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/SXSW_2007_presentations">SXSW 2007 presentations</a></dt> + <dd class="landingPageList">Presentations about the Mozilla project given at the SXSW 2007 event in Austin, Texas.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Table_Cellmap">Table Cellmap</a></dt> + <dd class="landingPageList">The table layout use the cellmap for two purposes:</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Table_Cellmap_-_Border_Collapse">Table Cellmap - Border Collapse</a></dt> + <dd class="landingPageList">This document describes the additional information that is stored for border collapse tables in the cellmap.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Table_Layout_Regression_Tests">Table Layout Regression Tests</a></dt> + <dd class="landingPageList">Changes in layout, parser and content code can have unintended side effects, also known as regressions. It is good style to check for these unwanted regressions and fixing them before checkin rather than causing Bugzilla avalanches.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Table_Layout_Strategy">Table Layout Strategy</a></dt> + <dd class="landingPageList">The table layout algorithm is based on two W3C recommendations: <a class="external" href="http://www.w3.org/TR/html401/struct/tables.html">HTML 4.01 (Chapter 11)</a> and <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">CSS2.1 (Chapter 17)</a>.In CSS2 a distinction between fixed and auto layout of tables has been introduced. The auto-layout mechanism is implemented in <code>BasicTableLayoutStrategy.cpp</code> the fixed-layout in <code>FixedTableLayoutStrategy.cpp</code>. All these files are in the <code>layout/html/table/src</code> subdirectory.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Tamarin">Tamarin</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/The_Download_Manager_schema">The Download Manager schema</a></dt> + <dd class="landingPageList">The Download Manager uses an SQLite table to keep track of downloads in progress as well as queued and past downloads.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/The_life_of_an_HTML_HTTP_request">The life of an HTML HTTP request</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/The_new_nsString_class_implementation_(1999)">The new nsString class implementation (1999)</a></dt> + <dd class="landingPageList">This document is intended to briefly describe the new nsString class architecture, and discuss the implications on memory management, optimizations, internationalization and usage patterns.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/TraceVis">TraceVis</a></dt> + <dd class="landingPageList">TraceVis is a performance visualization system for TraceMonkey. If TraceMonkey is built with TraceVis, and run with TraceVis enabled, then TraceMonkey will output a log of all its activity transitions. The log can be postprocessed into a visualization that can be used to rapidly diagnose many tracing-related performance issues.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Treehydra">Treehydra</a></dt> + <dd class="landingPageList">Try the gcc python plugin instead: <a href="https://fedorahosted.org/gcc-python-plugin/" title="https://fedorahosted.org/gcc-python-plugin/">https://fedorahosted.org/gcc-python-plugin/</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/URIs_and_URLs">URIs and URLs</a></dt> + <dd class="landingPageList">Handling network and locally retrievable resources is a central part of Necko. Resources are identified by URI "Uniform Resource Identifier" (Taken from <a class="external" href="http://tools.ietf.org/html/rfc2396" title="http://tools.ietf.org/html/rfc2396">RFC 2396</a>):</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/URIScheme">URIScheme</a></dt> + <dd class="landingPageList">List of Mozilla supported URI schemes</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Using_addresses_of_stack_variables_with_NSPR_threads_on_win16">Using addresses of stack variables with NSPR threads on win16</a></dt> + <dd class="landingPageList">This is a cautionary note that may be old information for some of you. However, since it affects the portability of code, it was deemed prudent to include a short memo describing the issue.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Using_Monotone_with_Mozilla_CVS">Using Monotone With Mozilla CVS</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Using_SVK_with_Mozilla_CVS">Using SVK With Mozilla CVS</a></dt> + <dd class="landingPageList">When working with Mozilla, you tend to accumulate patches which need to be reviewed, super-reviewed, and/or approved before they can be committed to the trunk. When you have only a few uncommitted patches, you can get by using cvs diff, and just editing the output to remove other patches before submitting. However, this approach quickly becomes unscalable, especially when you have different fixes in the same tree. Using a distributed versioning system like SVK takes out much of the hassle of managing your patches.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Venkman">Venkman</a></dt> + <dd class="landingPageList">Venkman is the code name for Mozilla's JavaScript Debugger. It aims to provide a powerful <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a> debugging environment for Mozilla based browsers namely Firefox, Netscape 7.x/9.x and SeaMonkey. Note that it is not included in the Gecko-based browsers such as K-Meleon, Galeon and Netscape 8.x. Venkman has been provided as part of the Mozilla install distribution since October 2001, as well as an <a href="/en-US/docs/Extensions" title="en-US/docs/Extensions">extension</a> package in <a href="/en-US/docs/XPI" title="en-US/docs/XPI">XPI</a> format.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Video_presentations">Video presentations</a></dt> + <dd class="landingPageList">Mozilla is actively working to produce video presentations that can help you learn how the Mozilla codebase works and how to take advantage of its technology in your own applications and extensions. This article is a jumping-off point to help you find those presentations.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Why_embed_Gecko">Why Embed Gecko</a></dt> + <dd class="landingPageList"><strong>Gecko - the Smart Embedding Choice</strong></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/xbDesignMode.js">xbDesignMode.js</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/XML_in_Mozilla">XML in Mozilla</a></dt> + <dd class="landingPageList">Mozilla has a relatively good support for <a href="/en-US/docs/XML" title="XML">XML</a>. Several World Wide Web Consortium (<a href="http://www.w3.org/">W3C</a>) Recommendations and drafts from the XML family of specifications are supported, as well as other related technologies.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/XPInstall">XPInstall</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/XPJS_Components_Proposal">XPJS Components Proposal</a></dt> + <dd class="landingPageList">Draft 1.0</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/XRE">XRE</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/XTech_2005_Presentations">XTech 2005 Presentations</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/XTech_2006_Presentations">XTech 2006 Presentations</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/XUL_Explorer">XUL Explorer</a></dt> + <dd class="landingPageList">XUL Explorer is a <a href="/en/XULRunner" title="en/XULRunner">XULRunner</a> application that provides an easy way to experiment with XUL. It’s a simple editor that can preview XUL inline or in a separate popup window. It has a list of code snippets (small fragments of XUL or JavaScript) that can be quickly inserted into the editor. The XUL can be loaded from and saved to files. A XUL validator and the <a href="/en/Error_Console" title="en/Error_Console">Error Console</a> are both available to help debug problems. The help menu provides access to XUL information on MDC. There is even simple “keyword” help lookup for XUL elements.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/XULRunner">XULRunner</a></dt> + <dd class="landingPageList"><strong>XULRunner</strong> is a Mozilla runtime package that can be used to bootstrap <a href="/en-US/docs/XUL" title="XUL">XUL</a>+<a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> applications that are as rich as Firefox and Thunderbird. It provides mechanisms for installing, upgrading, and uninstalling these applications.</dd> +</dl> diff --git a/files/th/archive/mozilla/xul/attribute/image.onload/index.html b/files/th/archive/mozilla/xul/attribute/image.onload/index.html new file mode 100644 index 0000000000..0b6e4a80a5 --- /dev/null +++ b/files/th/archive/mozilla/xul/attribute/image.onload/index.html @@ -0,0 +1,15 @@ +--- +title: image.onload +slug: Archive/Mozilla/XUL/Attribute/image.onload +tags: + - รูปภาพ + - โหลดภาพ +translation_of: Archive/Mozilla/XUL/Attribute/image.onload +--- +<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/th/docs/XUL/XUL_Reference">XUL Reference home</a></span></div> + +<dl> + <dt><code id="a-image.onload"><a href="https://developer.mozilla.org/th/docs/Mozilla/Tech/XUL/Attribute/image.onload">image.onload</a></code></dt> + <dd>ประเภท: <em>script code</em></dd> + <dd>This event handler will be called on the <code><a href="/th/docs/Mozilla/Tech/XUL/image" title="image">image</a></code> element when the image has finished loading. This applies whether the image is applied via the <code id="a-src"><a href="https://developer.mozilla.org/th/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code> attribute or the <code>list-style-image</code> style property. If you change the image, the event will fire again when the new image loads. This event will not bubble up the element tree.</dd> +</dl> diff --git a/files/th/archive/mozilla/xul/attribute/index.html b/files/th/archive/mozilla/xul/attribute/index.html new file mode 100644 index 0000000000..d618284df5 --- /dev/null +++ b/files/th/archive/mozilla/xul/attribute/index.html @@ -0,0 +1,311 @@ +--- +title: Attribute (XUL) +slug: Archive/Mozilla/XUL/Attribute +tags: + - NeedsTranslation + - TopicStub + - XUL Attributes + - XUL Reference +translation_of: Archive/Mozilla/XUL/Attribute +--- +<div><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/th/docs/XUL/XUL_Reference">XUL Reference home</a></span></div> + +<ul> + <li><a href="/en-US/docs/XUL/Attribute/acceltext" title="XUL/Attribute/acceltext">acceltext</a></li> + <li><a href="/en-US/docs/XUL/Attribute/accessible" title="XUL/Attribute/accessible">accessible</a></li> + <li><a href="/en-US/docs/XUL/Attribute/accesskey" title="XUL/Attribute/accesskey">accesskey</a></li> + <li><a href="/en-US/docs/XUL/Attribute/activetitlebarcolor" title="XUL/Attribute/activetitlebarcolor">activetitlebarcolor</a> </li> + <li><a href="/en-US/docs/XUL/Attribute/afterselected" title="XUL/Attribute/afterselected">afterselected</a></li> + <li><a href="/en-US/docs/XUL/Attribute/align" title="XUL/Attribute/align">align</a></li> + <li><a href="/en-US/docs/XUL/Attribute/allowevents" title="XUL/Attribute/allowevents">allowevents</a></li> + <li><a href="/en-US/docs/XUL/Attribute/allownegativeassertions" title="XUL/Attribute/allownegativeassertions">allownegativeassertions</a></li> + <li><a href="/en-US/docs/XUL/Attribute/alternatingbackground" title="XUL/Attribute/alternatingbackground">alternatingbackground</a></li> + <li><a href="/en-US/docs/XUL/Attribute/alwaysopenpopup" title="XUL/Attribute/alwaysopenpopup">alwaysopenpopup</a></li> + <li><a href="/en-US/docs/XUL/Attribute/attribute" title="XUL/Attribute/attribute">attribute</a></li> + <li><a href="/en-US/docs/XUL/Attribute/autoCheck" title="XUL/Attribute/autoCheck">autoCheck</a></li> + <li><a href="/en-US/docs/XUL/Attribute/autocompleteenabled" title="XUL/Attribute/autocompleteenabled">autocompleteenabled</a></li> + <li><a href="/en-US/docs/XUL/Attribute/autocompletepopup" title="XUL/Attribute/autocompletepopup">autocompletepopup</a></li> + <li><a href="/en-US/docs/XUL/Attribute/autocompletesearch" title="XUL/Attribute/autocompletesearch">autocompletesearch</a></li> + <li><a href="/en-US/docs/XUL/Attribute/autocompletesearchparam" title="XUL/Attribute/autocompletesearchparam">autocompletesearchparam</a></li> + <li><a href="/en-US/docs/XUL/Attribute/autoFill" title="XUL/Attribute/autoFill">autoFill</a></li> + <li><a href="/en-US/docs/XUL/Attribute/autoFillAfterMatch" title="XUL/Attribute/autoFillAfterMatch">autoFillAfterMatch</a></li> + <li><a href="/en-US/docs/XUL/Attribute/autoscroll" title="XUL/Attribute/autoscroll">autoscroll</a></li> + <li><a href="/en-US/docs/XUL/Attribute/beforeselected" title="XUL/Attribute/beforeselected">beforeselected</a></li> + <li><a href="/en-US/docs/XUL/Attribute/buttonaccesskeyaccept" title="XUL/Attribute/buttonaccesskeyaccept">buttonaccesskeyaccept</a></li> + <li><a href="/en-US/docs/XUL/Attribute/buttonaccesskeycancel" title="XUL/Attribute/buttonaccesskeycancel">buttonaccesskeycancel</a></li> + <li><a href="/en-US/docs/XUL/Attribute/buttonaccesskeydisclosure" title="XUL/Attribute/buttonaccesskeydisclosure">buttonaccesskeydisclosure</a></li> + <li><a href="/en-US/docs/XUL/Attribute/buttonaccesskeyextra1" title="XUL/Attribute/buttonaccesskeyextra1">buttonaccesskeyextra1</a></li> + <li><a href="/en-US/docs/XUL/Attribute/buttonaccesskeyextra2" title="XUL/Attribute/buttonaccesskeyextra2">buttonaccesskeyextra2</a></li> + <li><a href="/en-US/docs/XUL/Attribute/buttonaccesskeyhelp" title="XUL/Attribute/buttonaccesskeyhelp">buttonaccesskeyhelp</a></li> + <li><a href="/en-US/docs/XUL/Attribute/buttonalign" title="XUL/Attribute/buttonalign">buttonalign</a></li> + <li><a href="/en-US/docs/XUL/Attribute/buttondir" title="XUL/Attribute/buttondir">buttondir</a></li> + <li><a href="/en-US/docs/XUL/Attribute/buttondisabledaccept" title="XUL/Attribute/buttondisabledaccept">buttondisabledaccept</a></li> + <li><a href="/en-US/docs/XUL/Attribute/buttonlabelaccept" title="XUL/Attribute/buttonlabelaccept">buttonlabelaccept</a></li> + <li><a href="/en-US/docs/XUL/Attribute/buttonlabelcancel" title="XUL/Attribute/buttonlabelcancel">buttonlabelcancel</a></li> + <li><a href="/en-US/docs/XUL/Attribute/buttonlabeldisclosure" title="XUL/Attribute/buttonlabeldisclosure">buttonlabeldisclosure</a></li> + <li><a href="/en-US/docs/XUL/Attribute/buttonlabelextra1" title="XUL/Attribute/buttonlabelextra1">buttonlabelextra1</a></li> + <li><a href="/en-US/docs/XUL/Attribute/buttonlabelextra2" title="XUL/Attribute/buttonlabelextra2">buttonlabelextra2</a></li> + <li><a href="/en-US/docs/XUL/Attribute/buttonlabelhelp" title="XUL/Attribute/buttonlabelhelp">buttonlabelhelp</a></li> + <li><a href="/en-US/docs/XUL/Attribute/buttonorient" title="XUL/Attribute/buttonorient">buttonorient</a></li> + <li><a href="/en-US/docs/XUL/Attribute/buttonpack" title="XUL/Attribute/buttonpack">buttonpack</a></li> + <li><a href="/en-US/docs/XUL/Attribute/buttons" title="XUL/Attribute/buttons">buttons</a></li> + <li><a href="/en-US/docs/XUL/Attribute/checked" title="XUL/Attribute/checked">checked</a></li> + <li><a href="/en-US/docs/XUL/Attribute/checkState" title="XUL/Attribute/checkState">checkState</a></li> + <li><a href="/en-US/docs/XUL/Attribute/clicktoscroll" title="XUL/Attribute/checkState">clicktoscroll</a></li> + <li><a href="/en-US/docs/XUL/Attribute/class" title="XUL/Attribute/class">class</a></li> + <li><a href="/en-US/docs/XUL/Attribute/closebutton" title="XUL/Attribute/closebutton">closebutton</a></li> + <li><a href="/en-US/docs/XUL/Attribute/Closemenu" title="XUL/Attribute/closemenu">closemenu</a></li> + <li><a href="/en-US/docs/XUL/Attribute/coalesceduplicatearcs" title="XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></li> + <li><a href="/en-US/docs/XUL/Attribute/collapse" title="XUL/Attribute/collapse">collapse</a></li> + <li><a href="/en-US/docs/XUL/Attribute/collapsed" title="XUL/Attribute/collapsed">collapsed</a></li> + <li><a href="/en-US/docs/XUL/Attribute/color" title="XUL/Attribute/color">color</a></li> + <li><a href="/en-US/docs/XUL/Attribute/cols" title="XUL/Attribute/cols">cols</a></li> + <li><a href="/en-US/docs/XUL/Attribute/command" title="XUL/Attribute/command">command</a></li> + <li><a href="/en-US/docs/XUL/Attribute/commandupdater" title="XUL/Attribute/commandupdater">commandupdater</a></li> + <li><a href="/en-US/docs/XUL/Attribute/completedefaultindex" title="XUL/Attribute/completedefaultindex">completedefaultindex</a></li> + <li><a href="/en-US/docs/XUL/Attribute/container" title="XUL/Attribute/container">container</a></li> + <li><a href="/en-US/docs/XUL/Attribute/containment" title="XUL/Attribute/containment">containment</a></li> + <li><a href="/en-US/docs/XUL/Attribute/contentcontextmenu" title="XUL/Attribute/contentcontextmenu">contentcontextmenu</a></li> + <li><a href="/en-US/docs/XUL/Attribute/contenttooltip" title="XUL/Attribute/contenttooltip">contenttooltip</a></li> + <li><a href="/en-US/docs/XUL/Attribute/context" title="XUL/Attribute/context">context</a></li> + <li><a href="/en-US/docs/XUL/Attribute/contextmenu" title="XUL/Attribute/contextmenu">contextmenu</a></li> + <li><a href="/en-US/docs/XUL/Attribute/control" title="XUL/Attribute/control">control</a></li> + <li><a href="/en-US/docs/XUL/Attribute/crop" title="XUL/Attribute/crop">crop</a></li> + <li><a href="/en-US/docs/XUL/Attribute/curpos" title="XUL/Attribute/curpos">curpos</a></li> + <li><a href="/en-US/docs/XUL/Attribute/current" title="XUL/Attribute/current">current</a></li> + <li><a href="/en-US/docs/XUL/Attribute/currentset" title="XUL/Attribute/currentset">currentset</a></li> + <li><a href="/en-US/docs/XUL/Attribute/customindex" title="XUL/Attribute/customindex">customindex</a></li> + <li><a href="/en-US/docs/XUL/Attribute/customizable" title="XUL/Attribute/customizable">customizable</a></li> + <li><a href="/en-US/docs/XUL/Attribute/cycler" title="XUL/Attribute/cycler">cycler</a></li> + <li><a href="/en-US/docs/XUL/Attribute/datasources" title="XUL/Attribute/datasources">datasources</a></li> + <li><a href="/en-US/docs/XUL/Attribute/decimalplaces" title="XUL/Attribute/decimalplaces">decimalplaces</a></li> + <li><a href="/en-US/docs/XUL/Attribute/default" title="XUL/Attribute/default">default</a></li> + <li><a href="/en-US/docs/XUL/Attribute/defaultButton" title="XUL/Attribute/defaultButton">defaultButton</a></li> + <li><a href="/en-US/docs/XUL/Attribute/defaultset" title="XUL/Attribute/defaultset">defaultset</a></li> + <li><a href="/en-US/docs/XUL/Attribute/description" title="XUL/Attribute/description">description</a></li> + <li><a href="/en-US/docs/XUL/Attribute/dir" title="XUL/Attribute/dir">dir</a></li> + <li><a href="/en-US/docs/XUL/Attribute/disableAutocomplete" title="XUL/Attribute/disableAutocomplete">disableAutocomplete</a></li> + <li><a href="/en-US/docs/XUL/Attribute/disableautoselect" title="XUL/Attribute/disableautoselect">disableautoselect</a></li> + <li><a href="/en-US/docs/XUL/Attribute/disableclose" title="XUL/Attribute/disableclose">disableclose</a></li> + <li><a href="/en-US/docs/XUL/Attribute/disabled" title="XUL/Attribute/disabled">disabled</a></li> + <li><a href="/en-US/docs/XUL/Attribute/disablehistory" title="XUL/Attribute/disablehistory">disablehistory</a></li> + <li><a href="/en-US/docs/XUL/Attribute/disableKeyNavigation" title="XUL/Attribute/disableKeyNavigation">disableKeyNavigation</a></li> + <li><a href="/en-US/docs/XUL/Attribute/disablesecurity" title="XUL/Attribute/disablesecurity">disablesecurity</a></li> + <li><a href="/en-US/docs/XUL/Attribute/dlgtype" title="XUL/Attribute/dlgtype">dlgtype</a></li> + <li><a href="/en-US/docs/XUL/Attribute/dragging" title="XUL/Attribute/dragging">dragging</a></li> + <li><a href="/en-US/docs/XUL/Attribute/editable" title="XUL/Attribute/editable">editable</a></li> + <li><a href="/en-US/docs/XUL/Attribute/editortype" title="XUL/Attribute/editortype">editortype</a></li> + <li><a href="/en-US/docs/XUL/Attribute/element" title="XUL/Attribute/element">element</a></li> + <li><a href="/en-US/docs/XUL/Attribute/empty" title="XUL/Attribute/empty">empty</a></li> + <li><a href="/en-US/docs/XUL/Attribute/emptytext" title="XUL/Attribute/emptytext">emptytext</a> <span class="inlineIndicator deprecated deprecatedInline" title="(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)">Deprecated since Gecko 2</span></li> + <li><a href="/en-US/docs/XUL/Attribute/enableColumnDrag" title="XUL/Attribute/enableColumnDrag">enableColumnDrag</a></li> + <li><a href="/en-US/docs/XUL/Attribute/enablehistory" title="XUL/Attribute/enablehistory">enablehistory</a></li> + <li><a href="/en-US/docs/XUL/Attribute/equalsize" title="XUL/Attribute/equalsize">equalsize</a></li> + <li><a href="/en-US/docs/XUL/Attribute/eventnode" title="XUL/Attribute/eventnode">eventnode</a></li> + <li><a href="/en-US/docs/XUL/Attribute/events" title="XUL/Attribute/events">events</a></li> + <li><a href="/en-US/docs/XUL/Attribute/expr" title="XUL/Attribute/expr">expr</a></li> + <li><a href="/en-US/docs/XUL/Attribute/firstdayofweek" title="XUL/Attribute/firstdayofweek">firstdayofweek</a></li> + <li><a href="/en-US/docs/XUL/Attribute/firstpage" title="XUL/Attribute/firstpage">firstpage</a></li> + <li><a href="/en-US/docs/XUL/Attribute/first-tab" title="XUL/Attribute/first-tab">first-tab</a></li> + <li><a href="/en-US/docs/XUL/Attribute/fixed" title="XUL/Attribute/fixed">fixed</a></li> + <li><a href="/en-US/docs/XUL/Attribute/flags" title="XUL/Attribute/flags">flags</a></li> + <li><a href="/en-US/docs/XUL/Attribute/flex" title="XUL/Attribute/flex">flex</a></li> + <li><a href="/en-US/docs/XUL/Attribute/focused" title="XUL/Attribute/focused">focused</a></li> + <li><a href="/en-US/docs/XUL/Attribute/forceComplete" title="XUL/Attribute/forceComplete">forceComplete</a></li> + <li><a href="/en-US/docs/XUL/Attribute/grippyhidden" title="XUL/Attribute/grippyhidden">grippyhidden</a></li> + <li><a href="/en-US/docs/XUL/Attribute/grippytooltiptext" title="XUL/Attribute/grippytooltiptext">grippytooltiptext</a></li> + <li><a href="/en-US/docs/XUL/Attribute/group" title="XUL/Attribute/group">group</a></li> + <li><a href="/en-US/docs/XUL/Attribute/handleCtrlTab" title="XUL/Attribute/handleCtrlTab">handleCtrlTab</a></li> + <li><a href="/en-US/docs/XUL/Attribute/height" title="XUL/Attribute/height">height</a></li> + <li><a href="/en-US/docs/XUL/Attribute/helpURI" title="XUL/Attribute/helpURI">helpURI</a></li> + <li><a href="/en-US/docs/XUL/Attribute/hidden" title="XUL/Attribute/hidden">hidden</a></li> + <li><a href="/en-US/docs/XUL/Attribute/hidechrome" title="XUL/Attribute/hidechrome">hidechrome</a></li> + <li><a href="/en-US/docs/XUL/Attribute/hidecolumnpicker" title="XUL/Attribute/hidecolumnpicker">hidecolumnpicker</a></li> + <li><a href="/en-US/docs/XUL/Attribute/hideheader" title="XUL/Attribute/hideheader">hideheader</a></li> + <li><a href="/en-US/docs/XUL/Attribute/hideseconds" title="XUL/Attribute/hideseconds">hideseconds</a></li> + <li><a href="/en-US/docs/XUL/Attribute/hidespinbuttons" title="XUL/Attribute/hidespinbuttons">hidespinbuttons</a></li> + <li><a href="/en-US/docs/XUL/Attribute/Highlightnonmatches" title="XUL/Attribute/highlightnonmatches">highlightnonmatches</a> </li> + <li><a href="/en-US/docs/XUL/Attribute/homepage" title="XUL/Attribute/homepage">homepage</a></li> + <li><a href="/en-US/docs/XUL/Attribute/href" title="XUL/Attribute/href">href</a></li> + <li><a href="/en-US/docs/XUL/Attribute/icon" title="XUL/Attribute/icon">icon</a></li> + <li><a href="/en-US/docs/XUL/Attribute/id" title="XUL/Attribute/id">id</a></li> + <li><a href="/en-US/docs/XUL/Attribute/ignoreBlurWhileSearching" title="XUL/Attribute/ignoreBlurWhileSearching">ignoreBlurWhileSearching</a></li> + <li><a href="/en-US/docs/XUL/Attribute/ignorecase" title="XUL/Attribute/ignorecase">ignorecase</a></li> + <li><a href="/en-US/docs/XUL/Attribute/ignoreincolumnpicker" title="XUL/Attribute/ignoreincolumnpicker">ignoreincolumnpicker</a></li> + <li><a href="/en-US/docs/XUL/Attribute/ignorekeys" title="XUL/Attribute/ignorekeys">ignorekeys</a></li> + <li><a href="/en-US/docs/XUL/Attribute/image" title="XUL/Attribute/image">image</a></li> + <li><a href="/en-US/docs/XUL/Attribute/inactivetitlebarcolor" title="XUL/Attribute/inactivetitlebarcolor">inactivetitlebarcolor</a> </li> + <li><a href="/en-US/docs/XUL/Attribute/increment" title="XUL/Attribute/increment">increment</a></li> + <li><a href="/en-US/docs/XUL/Attribute/index" title="XUL/Attribute/index">index</a></li> + <li><a href="/en-US/docs/XUL/Attribute/inputtooltiptext" title="XUL/Attribute/inputtooltiptext">inputtooltiptext</a></li> + <li><a href="/en-US/docs/XUL/Attribute/insertafter" title="XUL/Attribute/insertafter">insertafter</a></li> + <li><a href="/en-US/docs/XUL/Attribute/insertbefore" title="XUL/Attribute/insertbefore">insertbefore</a></li> + <li><a href="/en-US/docs/XUL/Attribute/instantApply" title="XUL/Attribute/instantApply">instantApply</a></li> + <li><a href="/en-US/docs/XUL/Attribute/inverted" title="XUL/Attribute/inverted">inverted</a></li> + <li><a href="/en-US/docs/XUL/Attribute/iscontainer" title="XUL/Attribute/iscontainer">iscontainer</a></li> + <li><a href="/en-US/docs/XUL/Attribute/isempty" title="XUL/Attribute/isempty">isempty</a></li> + <li><a href="/en-US/docs/XUL/Attribute/key" title="XUL/Attribute/key">key</a></li> + <li><a href="/en-US/docs/XUL/Attribute/keycode" title="XUL/Attribute/keycode">keycode</a></li> + <li><a href="/en-US/docs/XUL/Attribute/keytext" title="XUL/Attribute/keytext">keytext</a></li> + <li><a href="/en-US/docs/XUL/Attribute/label" title="XUL/Attribute/label">label</a></li> + <li><a href="/en-US/docs/XUL/Attribute/lastpage" title="XUL/Attribute/lastpage">lastpage</a></li> + <li><a href="/en-US/docs/XUL/Attribute/lastSelected" title="XUL/Attribute/lastSelected">lastSelected</a></li> + <li><a href="/en-US/docs/XUL/Attribute/last-tab" title="XUL/Attribute/last-tab">last-tab</a></li> + <li><a href="/en-US/docs/XUL/Attribute/left" title="XUL/Attribute/left">left</a></li> + <li><a href="/en-US/docs/XUL/Attribute/linkedpanel" title="XUL/Attribute/linkedpanel">linkedpanel</a></li> + <li><a href="/en-US/docs/XUL/Attribute/max" title="XUL/Attribute/max">max</a></li> + <li><a href="/en-US/docs/XUL/Attribute/maxheight" title="XUL/Attribute/maxheight">maxheight</a></li> + <li><a href="/en-US/docs/XUL/Attribute/maxlength" title="XUL/Attribute/maxlength">maxlength</a></li> + <li><a href="/en-US/docs/XUL/Attribute/maxpos" title="XUL/Attribute/maxpos">maxpos</a></li> + <li><a href="/en-US/docs/XUL/Attribute/maxrows" title="XUL/Attribute/maxrows">maxrows</a></li> + <li><a href="/en-US/docs/XUL/Attribute/maxwidth" title="XUL/Attribute/maxwidth">maxwidth</a></li> + <li><a href="/en-US/docs/XUL/Attribute/member" title="XUL/Attribute/member">member</a></li> + <li><a href="/en-US/docs/XUL/Attribute/menu" title="XUL/Attribute/menu">menu</a></li> + <li><a href="/en-US/docs/XUL/Attribute/menuactive" title="XUL/Attribute/menuactive">menuactive</a></li> + <li><a href="/en-US/docs/XUL/Attribute/min" title="XUL/Attribute/min">min</a></li> + <li><a href="/en-US/docs/XUL/Attribute/minheight" title="XUL/Attribute/minheight">minheight</a></li> + <li><a href="/en-US/docs/XUL/Attribute/minResultsForPopup" title="XUL/Attribute/minResultsForPopup">minResultsForPopup</a></li> + <li><a href="/en-US/docs/XUL/Attribute/minwidth" title="XUL/Attribute/minwidth">minwidth</a></li> + <li><a href="/en-US/docs/XUL/Attribute/mode" title="XUL/Attribute/mode">mode</a></li> + <li><a href="/en-US/docs/XUL/Attribute/modifiers" title="XUL/Attribute/modifiers">modifiers</a></li> + <li><a href="/en-US/docs/XUL/Attribute/mousethrough" title="XUL/Attribute/mousethrough">mousethrough</a></li> + <li><a href="/en-US/docs/XUL/Attribute/Movetoclick" title="XUL/Attribute/movetoclick">movetoclick</a></li> + <li><a href="/en-US/docs/XUL/Attribute/multiline" title="XUL/Attribute/multiline">multiline</a></li> + <li><a href="/en-US/docs/XUL/Attribute/multiple" title="XUL/Attribute/multiple">multiple</a></li> + <li><a href="/en-US/docs/XUL/Attribute/name" title="XUL/Attribute/name">name</a></li> + <li><a href="/en-US/docs/XUL/Attribute/negate" title="XUL/Attribute/negate">negate</a></li> + <li><a href="/en-US/docs/XUL/Attribute/newlines" title="XUL/Attribute/newlines">newlines</a></li> + <li><a href="/en-US/docs/XUL/Attribute/next" title="XUL/Attribute/next">next</a></li> + <li><a href="/en-US/docs/XUL/Attribute/noautofocus" title="XUL/Attribute/noautofocus">noautofocus</a></li> + <li><a href="/en-US/docs/XUL/Attribute/noautohide" title="XUL/Attribute/noautohide">noautohide</a></li> + <li><a href="/en-US/docs/XUL/Attribute/noinitialfocus" title="XUL/Attribute/noinitialfocus">noinitialfocus</a> </li> + <li><a href="/en-US/docs/XUL/Attribute/nomatch" title="XUL/Attribute/nomatch">nomatch</a></li> + <li><a href="/en-US/docs/XUL/Attribute/Norestorefocus" title="XUL/Attribute/norestorefocus">norestorefocus</a></li> + <li><a href="/en-US/docs/XUL/Attribute/object" title="XUL/Attribute/object">object</a></li> + <li><a href="/en-US/docs/XUL/Attribute/observes" title="XUL/Attribute/observes">observes</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onbeforeaccept" title="XUL/Attribute/onbeforeaccept">onbeforeaccept</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onbookmarkgroup" title="XUL/Attribute/onbookmarkgroup">onbookmarkgroup</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onchange" title="XUL/Attribute/onchange">onchange</a></li> + <li><a class="internal" href="/en-US/docs/XUL/Attribute/onclick" title="XUL/Attribute/Onclick">onclick</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onclosetab" title="XUL/Attribute/onclosetab">onclosetab</a></li> + <li><a href="/en-US/docs/XUL/Attribute/oncommand" title="XUL/Attribute/oncommand">oncommand</a></li> + <li><a href="/en-US/docs/XUL/Attribute/oncommandupdate" title="XUL/Attribute/oncommandupdate">oncommandupdate</a></li> + <li><a href="/en-US/docs/XUL/Attribute/ondialogaccept" title="XUL/Attribute/ondialogaccept">ondialogaccept</a></li> + <li><a href="/en-US/docs/XUL/Attribute/ondialogcancel" title="XUL/Attribute/ondialogcancel">ondialogcancel</a></li> + <li><a href="/en-US/docs/XUL/Attribute/ondialogdisclosure" title="XUL/Attribute/ondialogdisclosure">ondialogclosure</a></li> + <li><a href="/en-US/docs/XUL/Attribute/ondialogextra1" title="XUL/Attribute/ondialogextra1">ondialogextra1</a></li> + <li><a href="/en-US/docs/XUL/Attribute/ondialogextra2" title="XUL/Attribute/ondialogextra2">ondialogextra2</a></li> + <li><a href="/en-US/docs/XUL/Attribute/ondialoghelp" title="XUL/Attribute/ondialoghelp">ondialoghelp</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onerror" title="XUL/Attribute/onerror">onerror</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onerrorcommand" title="XUL/Attribute/onerrorcommand">onerrorcommand</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onextra1" title="XUL/Attribute/onextra1">onextra1</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onextra2" title="XUL/Attribute/onextra2">onextra2</a></li> + <li><a href="/en-US/docs/XUL/Attribute/oninput" title="XUL/Attribute/oninput">oninput</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onload" title="XUL/Attribute/onload">onload</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onnewtab" title="XUL/Attribute/onnewtab">onnewtab</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onpageadvanced" title="XUL/Attribute/onpageadvanced">onpageadvanced</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onpagehide" title="XUL/Attribute/onpagehide">onpagehide</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onpagerewound" title="XUL/Attribute/onpagerewound">onpagerewound</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onpageshow" title="XUL/Attribute/onpageshow">onpageshow</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onpaneload" title="XUL/Attribute/onpaneload">onpaneload</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onpopuphidden" title="XUL/Attribute/onpopuphidden">onpopuphidden</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onpopuphiding" title="XUL/Attribute/onpopuphiding">onpopuphiding</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onpopupshowing" title="XUL/Attribute/onpopupshowing">onpopupshowing</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onpopupshown" title="XUL/Attribute/onpopupshown">onpopupshown</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onsearchcomplete" title="XUL/Attribute/onsearchcomplete">onsearchcomplete</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onselect" title="XUL/Attribute/onselect">onselect</a></li> + <li><a href="/en-US/docs/XUL/Attribute/ontextcommand" title="XUL/Attribute/ontextcommand">ontextcommand</a></li> + <li><a href="/en-US/docs/XUL/Attribute/ontextentered" title="XUL/Attribute/ontextentered">ontextentered</a></li> + <li><a href="/en-US/docs/XUL/Attribute/ontextrevert" title="XUL/Attribute/ontextrevert">ontextrevert</a></li> + <li><a href="/en-US/docs/XUL/Attribute/ontextreverted" title="XUL/Attribute/ontextreverted">ontextreverted</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onunload" title="XUL/Attribute/onunload">onunload</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onwizardback" title="XUL/Attribute/onwizardback">onwizardback</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onwizardcancel" title="XUL/Attribute/onwizardcancel">onwizardcancel</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onwizardfinish" title="XUL/Attribute/onwizardfinish">onwizardfinish</a></li> + <li><a href="/en-US/docs/XUL/Attribute/onwizardnext" title="XUL/Attribute/onwizardnext">onwizardnext</a></li> + <li><a href="/en-US/docs/XUL/Attribute/open" title="XUL/Attribute/open">open</a></li> + <li><a href="/en-US/docs/XUL/Attribute/ordinal" title="XUL/Attribute/ordinal">ordinal</a></li> + <li><a href="/en-US/docs/XUL/Attribute/orient" title="XUL/Attribute/orient">orient</a></li> + <li><a href="/en-US/docs/XUL/Attribute/pack" title="XUL/Attribute/pack">pack</a></li> + <li><a href="/en-US/docs/XUL/Attribute/pageid" title="XUL/Attribute/pageid">pageid</a></li> + <li><a href="/en-US/docs/XUL/Attribute/pageincrement" title="XUL/Attribute/pageincrement">pageincrement</a></li> + <li><a href="/en-US/docs/XUL/Attribute/pagestep" title="XUL/Attribute/pagestep">pagestep</a></li> + <li><a href="/en-US/docs/XUL/Attribute/parent" title="XUL/Attribute/parent">parent</a></li> + <li><a href="/en-US/docs/XUL/Attribute/parsetype" title="XUL/Attribute/parsetype">parsetype</a></li> + <li><a href="/en-US/docs/XUL/Attribute/persist" title="XUL/Attribute/persist">persist</a></li> + <li><a href="/en-US/docs/XUL/Attribute/persistence" title="XUL/Attribute/persistence">persistence</a></li> + <li><a href="/en-US/docs/XUL/Attribute/phase" title="XUL/Attribute/phase">phase</a></li> + <li><a href="/en-US/docs/XUL/Attribute/pickertooltiptext" title="XUL/Attribute/pickertooltiptext">pickertooltiptext</a></li> + <li><a href="/en-US/docs/XUL/Attribute/placeholder" title="XUL/Attribute/placeholder">placeholder</a> </li> + <li><a href="/en-US/docs/XUL/Attribute/popup" title="XUL/Attribute/popup">popup</a></li> + <li><a href="/en-US/docs/XUL/Attribute/position" title="XUL/Attribute/position">position</a></li> + <li><a href="/en-US/docs/XUL/Attribute/predicate" title="XUL/Attribute/predicate">predicate</a></li> + <li><a href="/en-US/docs/XUL/Attribute/preference" title="XUL/Attribute/preference">preference</a></li> + <li><a href="/en-US/docs/XUL/Attribute/preference-editable" title="XUL/Attribute/preference-editable">preference-editable</a></li> + <li><a href="/en-US/docs/XUL/Attribute/primary" title="XUL/Attribute/primary">primary</a></li> + <li><a href="/en-US/docs/XUL/Attribute/priority" title="XUL/Attribute/priority">priority</a></li> + <li><a href="/en-US/docs/XUL/Attribute/properties" title="XUL/Attribute/properties">properties</a></li> + <li><a href="/en-US/docs/XUL/Attribute/querytype" title="XUL/Attribute/querytype">querytype</a></li> + <li><a href="/en-US/docs/XUL/Attribute/readonly" title="XUL/Attribute/readonly">readonly</a></li> + <li><a href="/en-US/docs/XUL/Attribute/ref" title="XUL/Attribute/ref">ref</a></li> + <li><a href="/en-US/docs/XUL/Attribute/rel" title="XUL/Attribute/rel">rel</a></li> + <li><a href="/en-US/docs/XUL/Attribute/remote" title="/en-US/docs/XUL/Attribute/remote">remote</a></li> + <li><a href="/en-US/docs/XUL/Attribute/removeelement" title="XUL/Attribute/removeelement">removeelement</a></li> + <li><a href="/en-US/docs/XUL/Attribute/resizeafter" title="XUL/Attribute/resizeafter">resizeafter</a></li> + <li><a href="/en-US/docs/XUL/Attribute/resizebefore" title="XUL/Attribute/resizebefore">resizebefore</a></li> + <li><a href="/en-US/docs/XUL/Attribute/rows" title="XUL/Attribute/rows">rows</a></li> + <li><a href="/en-US/docs/XUL/Attribute/screenX" title="XUL/Attribute/screenX">screenX</a></li> + <li><a href="/en-US/docs/XUL/Attribute/screenY" title="XUL/Attribute/screenY">screenY</a></li> + <li><a href="/en-US/docs/XUL/Attribute/Searchbutton" title="XUL/Attribute/searchbutton">searchbutton</a></li> + <li><a href="/en-US/docs/XUL/Attribute/searchSessions" title="XUL/Attribute/searchSessions">searchSessions</a></li> + <li><a href="/en-US/docs/XUL/Attribute/searchlabel" title="XUL/Attribute/searchlabel">searchlabel</a></li> + <li><a href="/en-US/docs/XUL/Attribute/selected" title="XUL/Attribute/selected">selected</a></li> + <li><a href="/en-US/docs/XUL/Attribute/selectedIndex" title="XUL/Attribute/selectedIndex">selectedIndex</a></li> + <li><a href="/en-US/docs/XUL/Attribute/seltype" title="XUL/Attribute/seltype">seltype</a></li> + <li><a href="/en-US/docs/XUL/Attribute/setfocus" title="XUL/Attribute/setfocus">setfocus</a></li> + <li><a href="/en-US/docs/XUL/Attribute/showcaret" title="XUL/Attribute/showcaret">showcaret</a></li> + <li><a href="/en-US/docs/XUL/Attribute/showCommentColumn" title="XUL/Attribute/showCommentColumn">showCommentColumn</a></li> + <li><a href="/en-US/docs/XUL/Attribute/showpopup" title="XUL/Attribute/showpopup">showpopup</a></li> + <li><a href="/en-US/docs/XUL/Attribute/size" title="XUL/Attribute/size">size</a></li> + <li><a href="/en-US/docs/XUL/Attribute/sizemode" title="XUL/Attribute/sizemode">sizemode</a></li> + <li><a href="/en-US/docs/XUL/Attribute/sizetopopup" title="XUL/Attribute/sizetopopup">sizetopopup</a></li> + <li><a href="/en-US/docs/XUL/Attribute/smoothscroll" title="XUL/Attribute/smoothscroll">smoothscroll</a></li> + <li><a href="/en-US/docs/XUL/Attribute/sort" title="XUL/Attribute/sort">sort</a></li> + <li><a href="/en-US/docs/XUL/Attribute/sortActive" title="XUL/Attribute/sortActive">sortActive</a></li> + <li><a href="/en-US/docs/XUL/Attribute/sortDirection" title="XUL/Attribute/sortDirection">sortDirection</a></li> + <li><a href="/en-US/docs/XUL/Attribute/sortResource" title="XUL/Attribute/sortResource">sortResource</a></li> + <li><a href="/en-US/docs/XUL/Attribute/sortResource2" title="XUL/Attribute/sortResource2">sortResource2</a></li> + <li><a href="/en-US/docs/XUL/Attribute/spellcheck" title="XUL/Attribute/spellcheck">spellcheck</a></li> + <li><a href="/en-US/docs/XUL/Attribute/src" title="XUL/Attribute/src">src</a></li> + <li><a href="/en-US/docs/XUL/Attribute/state" title="XUL/Attribute/state">state</a></li> + <li><a href="/en-US/docs/XUL/Attribute/statedatasource" title="XUL/Attribute/statedatasource">statedatasource</a></li> + <li><a href="/en-US/docs/XUL/Attribute/statusbar" title="XUL/Attribute/statusbar">statusbar</a></li> + <li><a href="/en-US/docs/XUL/Attribute/statustext" title="XUL/Attribute/statustext">statustext</a></li> + <li><a href="/en-US/docs/XUL/Attribute/style" title="XUL/Attribute/style">style</a></li> + <li><a href="/en-US/docs/XUL/Attribute/subject" title="XUL/Attribute/subject">subject</a></li> + <li><a href="/en-US/docs/XUL/Attribute/substate" title="XUL/Attribute/substate">substate</a></li> + <li><a href="/en-US/docs/XUL/Attribute/suppressonselect" title="XUL/Attribute/suppressonselect">suppressonselect</a></li> + <li><a href="/en-US/docs/XUL/Attribute/tabindex" title="XUL/Attribute/tabindex">tabindex</a></li> + <li><a href="/en-US/docs/XUL/Attribute/tabScrolling" title="XUL/Attribute/tabScrolling">tabScrolling</a></li> + <li><a href="/en-US/docs/XUL/Attribute/targets" title="XUL/Attribute/targets">targets</a></li> + <li><a href="/en-US/docs/XUL/Attribute/template" title="XUL/Attribute/template">template</a></li> + <li><a href="/en-US/docs/XUL/Attribute/timeout" title="XUL/Attribute/timeout">timeout</a></li> + <li><a href="/en-US/docs/XUL/Attribute/title" title="XUL/Attribute/title">title</a></li> + <li><a href="/en-US/docs/XUL/Attribute/toolbarname" title="XUL/Attribute/toolbarname">toolbarname</a></li> + <li><a href="/en-US/docs/XUL/Attribute/tooltip" title="XUL/Attribute/tooltip">tooltip</a></li> + <li><a href="/en-US/docs/XUL/Attribute/tooltiptext" title="XUL/Attribute/tooltiptext">tooltiptext</a></li> + <li><a href="/en-US/docs/XUL/Attribute/tooltiptextnew" title="XUL/Attribute/tooltiptextnew">tooltiptextnew</a></li> + <li><a href="/en-US/docs/XUL/Attribute/top" title="XUL/Attribute/top">top</a></li> + <li><a href="/en-US/docs/XUL/Attribute/type" title="XUL/Attribute/type">type</a></li> + <li><a href="/en-US/docs/XUL/Attribute/uri" title="XUL/Attribute/uri">uri</a></li> + <li><a href="/en-US/docs/XUL/Attribute/userAction" title="XUL/Attribute/userAction">userAction</a></li> + <li><a href="/en-US/docs/XUL/Attribute/validate" title="XUL/Attribute/validate">validate</a></li> + <li><a href="/en-US/docs/XUL/Attribute/value" title="XUL/Attribute/value">value</a></li> + <li><a href="/en-US/docs/XUL/Attribute/var" title="XUL/Attribute/var">var</a></li> + <li><a href="/en-US/docs/Mozilla/Tech/XUL/Attribute/visuallyselected">visuallyselected</a></li> + <li><a href="/en-US/docs/XUL/Attribute/wait-cursor" title="XUL/Attribute/wait-cursor">wait-cursor</a></li> + <li><a href="/en-US/docs/XUL/Attribute/width" title="XUL/Attribute/width">width</a></li> + <li><a href="/en-US/docs/XUL/Attribute/windowtype" title="XUL/Attribute/windowtype">windowtype</a></li> + <li><a href="/en-US/docs/XUL/Attribute/wrap" title="XUL/Attribute/wrap">wrap</a></li> + <li><a href="/en-US/docs/XUL/Attribute/wraparound" title="XUL/Attribute/wraparound">wraparound</a></li> +</ul> diff --git a/files/th/archive/mozilla/xul/index.html b/files/th/archive/mozilla/xul/index.html new file mode 100644 index 0000000000..5696c6d96b --- /dev/null +++ b/files/th/archive/mozilla/xul/index.html @@ -0,0 +1,82 @@ +--- +title: XUL +slug: Archive/Mozilla/XUL +tags: + - Landing + - Mozilla + - NeedsTranslation + - TopicStub + - XUL +translation_of: Archive/Mozilla/XUL +--- +<div>{{FirefoxSidebar}}</div> + +<div class="callout-box"><strong><a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial">XUL Tutorial</a></strong><br> +A guided tutorial that will help you get started with XUL, originally from XULPlanet.</div> + +<p><span class="seoSummary"><strong>XUL</strong> (XML User Interface Language) is Mozilla's <a href="/en-US/docs/XML_introduction">XML</a>-based language for building user interfaces of applications like Firefox.</span> The term XUL is sometimes used to refer to the whole <a href="/en-US/docs/Mozilla/The_Mozilla_platform">Mozilla platform</a> (e.g. XUL applications are applications using XUL and other components of the platform).</p> + +<p><a href="/en-US/docs/Mozilla/Tech/XUL/XUL_controls">XUL Controls</a> lists some of the common controls provided by XUL.</p> + +<div class="topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation">Documentation</h2> + +<dl> + <dt><strong><a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial">XUL Tutorial</a></strong></dt> + <dd>A guided tutorial that will help you get started with XUL, originally from XULPlanet.</dd> + <dt><a href="/en-US/docs/Mozilla/Tech/XUL/XUL_Reference">XUL Reference</a></dt> + <dd>XUL elements, attributes, properties, methods, and event handlers.</dd> + <dt><a href="/en-US/docs/Mozilla/Tech/XUL/XUL_controls">XUL Controls</a></dt> + <dd>A quick list of all of the available XUL controls.</dd> + <dt><a href="/en-US/docs/Mozilla/Tech/XUL/The_Joy_of_XUL">The Joy of XUL</a></dt> + <dd>Describes the key features and components of XUL.</dd> + <dt><a href="/en-US/docs/Mozilla/Tech/XUL/PopupGuide">Menus and Popups Guide</a></dt> + <dd>A guide on using menus and popup panels.</dd> + <dt><a href="/en-US/docs/Mozilla/Tech/XUL/Template_Guide">Template Guide</a></dt> + <dd>A detailed guide on XUL templates, which is a means of generating content from a datasource.</dd> + <dt><a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">Drag and Drop</a></dt> + <dd>How to perform drag and drop operations.</dd> +</dl> + +<dl> + <dt>XUL Periodic Table</dt> + <dd>This collection of XUL demos used to be available as a web page, but can no longer be viewed in Firefox since support for <a href="/en-US/docs/Mozilla/Tech/XUL/Using_Remote_XUL">Remote XUL</a> was disabled. There is a XULRunner application containing the XUL Periodic Table which can be opened with Gecko based browsers. <a href="https://github.com/matthewkastor/XULRunner-Examples">You can get it here</a>. See: <a href="/en-US/docs/Archive/Mozilla/XULRunner/Tips#Using_Firefox_3_to_run_XULRunner_applications">Using Firefox 3 to run XULRunner applications</a> for instructions on running XULRunner apps in Firefox.</dd> + <dt>Changes to XUL</dt> + <dd>New XUL features and changes to existing features are included in the <a href="/en-US/docs/Mozilla/Firefox/Releases">Firefox developer release notes</a>.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/XUL">View All...</a></span></p> +</div> + +<div class="section"> +<h2 class="Community" id="Community">Community</h2> + +<ul> + <li>View Mozilla forums...{{ DiscussionList("dev-tech-xul", "mozilla.dev.tech.xul") }}</li> + <li><a class="link-irc" href="irc://irc.mozilla.org/xul">#xul on irc.mozilla.org</a></li> +</ul> + +<h2 class="Tools" id="Tools">Tools</h2> + +<ul> + <li><a class="external" href="https://github.com/KM-200/xul/tree/master/docs">XUL online live editor</a> (copy & paste snippets from here and run them)</li> + <li><a href="/en-US/docs/Archive/Mozilla/XUL_Explorer">XUL Explorer</a> (a lightweight XUL IDE)</li> + <li><a class="external" href="https://github.com/matthewkastor/XULExplorer">XULExplorer</a> (Patched version of XUL explorer)</li> + <li><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">Extension developer's extension</a> (featuring a Live XUL Editor)</li> + <li><a class="external" href="http://forum.addonsmirror.net/index.php?showtopic=751">XULRef sidebar</a></li> + <li><a class="external" href="http://www.getfirebug.com/">Firebug</a></li> + <li><a href="/en-US/docs/Tools/Add-ons/DOM_Inspector">DOM Inspector</a></li> + <li><a class="external" href="http://www.spket.com/">Spket IDE</a>, IDE for XUL/XBL</li> + <li><a class="external" href="http://www.amplesdk.com">Ample SDK</a>, (Cross-browser XUL renderer in JavaScript/HTML)</li> +</ul> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Tools">View All...</a></span></p> + +<h2 class="Related_Topics" id="Related_Topics">Related Topics</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Mozilla/Tech/XBL">XBL</a> {{Deprecated_Inline}}, <a href="/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/Web/RDF">RDF</a>, <a href="/en-US/docs/Mozilla/Add-ons">Extensions</a>, <a href="/en-US/docs/Archive/Mozilla/XULRunner">XULRunner</a></li> +</ul> +</div> +</div> diff --git a/files/th/archive/mozilla/xul/ภาพ,อิมเมจ/index.html b/files/th/archive/mozilla/xul/ภาพ,อิมเมจ/index.html new file mode 100644 index 0000000000..e8d9a97827 --- /dev/null +++ b/files/th/archive/mozilla/xul/ภาพ,อิมเมจ/index.html @@ -0,0 +1,151 @@ +--- +title: รูปภาพ +slug: 'Archive/Mozilla/XUL/ภาพ,อิมเมจ' +translation_of: Archive/Mozilla/XUL/image +--- +<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/th/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">Examples</a> | + <a href="#Attributes">Attributes</a> | + <a href="#Properties">Properties</a> | + <a href="#Methods">Methods</a> | + <a href="#Related">Related</a> ] +</span></div> + +<h3 id="ภาพรวม">ภาพรวม</h3> + +<p>An element that displays an image, much like the HTML <a href="/En/HTML/Element/Img" title="https://developer.mozilla.org/en/HTML/element/img"><code>img</code></a> element. The <code id="a-src"><a href="https://developer.mozilla.org/th/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code> attribute can be used to specify the URL of the image.</p> + +<p>ข้อมูลเพิ่มเติมได้ที่ <a href="/en/XUL_Tutorial/Adding_Labels_and_Images" title="en/XUL_Tutorial/Adding_Labels_and_Images">XUL tutorial</a>.</p> + +<div class="noinclude"> +<div class="note"> +<p><strong>บันทึก:</strong> Prior to <span title="(Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5)">Gecko 8.0</span>, images did not shrink down with the same ratio in both directions when specifying maximum sizes using <code>maxheight</code> or <code>maxwidth</code>. The new behavior aligns more with the HTML <a href="/th/docs/Web/HTML/Element/img" title="The documentation about this has not yet been written; please consider contributing!"><code><img></code></a> element and shrinks both the width and height down proportionally.</p> +</div> +</div> + +<dl> + <dt>Attributes</dt> + <dd><a href="#a-onerror">onerror</a>, <a href="#a-image.onload">onload</a>, <a href="#a-src">src</a>, <a href="#a-validate">validate</a></dd> +</dl> + +<dl> + <dt>Properties</dt> + <dd><a href="#p-accessibleType">accessibleType</a>, <a href="#p-src">src</a></dd> +</dl> + +<dl> + <dt>Style classes</dt> + <dd><a href="#s-alert-icon">alert-icon</a>, <a href="#s-error-icon">error-icon</a>, <a href="#s-message-icon">message-icon</a>, <a href="#s-question-icon">question-icon</a></dd> +</dl> + +<h3 id="ตัวอย่าง">ตัวอย่าง</h3> + +<div class="float-right"><img alt="Image:Firefoxlogo2.png" class="internal" src="/@api/deki/files/220/=Firefoxlogo2.png"></div> + +<pre class="eval"><image src='Firefoxlogo.png' width='135' height='130'/> +</pre> + +<h3 id="Attributes">Attributes</h3> + +<p> </p><div id="a-onerror"> + + +<dl> + <dt><code id="a-onerror"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/onerror">onerror</a></code></dt> + <dd>Type: <em>script code</em></dd> + <dd>This event is sent to an <code><a href="/en-US/docs/Mozilla/Tech/XUL/image" title="image">image</a></code> element when an error occurs loading the image.</dd> +</dl> +</div> <div id="a-image.onload"> + + +<dl> + <dt><code id="a-image.onload"><a href="https://developer.mozilla.org/th/docs/Mozilla/Tech/XUL/Attribute/image.onload">image.onload</a></code></dt> + <dd>ประเภท: <em>script code</em></dd> + <dd>This event handler will be called on the <code><a href="/th/docs/Mozilla/Tech/XUL/image" title="image">image</a></code> element when the image has finished loading. This applies whether the image is applied via the <code id="a-src"><a href="https://developer.mozilla.org/th/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code> attribute or the <code>list-style-image</code> style property. If you change the image, the event will fire again when the new image loads. This event will not bubble up the element tree.</dd> +</dl> +</div> <div id="a-src"> + +<dl> + <dt> + <code id="a-src"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code></dt> + <dd> + Type: <em>URI</em></dd> + <dd> + The URI of the content to appear in the element.</dd> +</dl> + + +</div> <div id="a-validate"> + + +<dl> + <dt><code id="a-validate"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/validate">validate</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>This attribute indicates whether to load the image from the cache or not. This would be useful if the images are stored remotely or you plan on swapping the image frequently. The following values are accepted, or leave out the attribute entirely for default handling:</dd> + <dd> + <dl> + <dt><code>always</code></dt> + <dd>The image is always checked to see whether it should be reloaded.</dd> + <dt><code>never</code></dt> + <dd>The image will be loaded from the cache if possible.</dd> + </dl> + </dd> +</dl> +</div> + +<h3 id="Properties">Properties</h3> + +<div id="p-accessibleType"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/accessibleType">accessibleType</a></span></code></dt> + <dd> + Type: <em>integer</em></dd> + <dd> + A value indicating the type of accessibility object for the element.</dd> +</dl> +</div> <div id="p-src"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/src">src</a></span></code></dt> + <dd>Type: <em>URL</em></dd> + <dd>Gets and sets the value of the <code id="a-src"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code> attribute.</dd> +</dl></div> <table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited Properties</strong><br> <small> <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/width">width</a></span></code></small></p> </td> </tr> </tbody> +</table> + +<h3 id="Methods">Methods</h3> + +<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited Methods</strong><br> <small><code><a href="https://developer.mozilla.org/th/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.appendChild">appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/th/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/th/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.cloneNode">cloneNode()</a></code>, <a class="internal" href="/En/DOM/Node.compareDocumentPosition" title="En/DOM/Node.compareDocumentPosition">compareDocumentPosition</a>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/th/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/th/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.getBoundingClientRect">getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.getClientRects">getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/th/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/th/docs/Mozilla/Tech/XUL/Method/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.getElementsByClassName">getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <a class="internal" href="/En/DOM/Node.getFeature" title="En/DOM/Node.getFeature">getFeature</a>, <a class="internal" href="/En/DOM/Node.getUserData" title="En/DOM/Node.getUserData">getUserData</a>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.isDefaultNamespace">isDefaultNamespace()</a></code>, <a class="internal" href="/En/DOM/Node.isEqualNode" title="En/DOM/Node.isEqualNode">isEqualNode</a>, <a class="internal" href="/En/DOM/Node.isSameNode" title="En/DOM/Node.isSameNode">isSameNode</a>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.isSupported">isSupported()</a></code>, <a class="internal" href="/En/DOM/Node.lookupNamespaceURI" title="En/DOM/Node.lookupNamespaceURI">lookupNamespaceURI</a>, <a class="internal" href="/En/DOM/Node.lookupPrefix" title="En/DOM/Node.lookupPrefix">lookupPrefix</a>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.querySelector">querySelector()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.querySelectorAll">querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code>, <a class="internal" href="/En/DOM/Node.setUserData" title="En/DOM/Node.setUserData">setUserData</a></small></p> </td> </tr> </tbody> +</table> + +<h3 id="Style_classes">Style classes</h3> + +<dl> + <dt> + <code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/alert-icon">alert-icon</a></code></dt> + <dd> + Class that adds an alert icon. This typically looks like an exclamation mark. This and the other icon classes may be used by <code><a href="/en-US/docs/Mozilla/Tech/XUL/image" title="image">image</a></code> elements or other elements which can have an image.</dd> +</dl> <dl> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/error-icon">error-icon</a></code></dt> + <dd>Class that adds an error icon. This will typically be a red "X" icon.</dd> +</dl> <dl> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/message-icon">message-icon</a></code></dt> + <dd>Class that adds a message box icon.</dd> +</dl> <dl> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/question-icon">question-icon</a></code></dt> + <dd>Class that adds a question icon, which usually looks like a question mark.</dd> +</dl> + +<h3 id="เนื้อหาที่เกี่ยวข้อง">เนื้อหาที่เกี่ยวข้อง</h3> + +<p>See also the <code id="a-image"><a href="https://developer.mozilla.org/th/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> and <code id="a-icon"><a href="https://developer.mozilla.org/th/docs/Mozilla/Tech/XUL/Attribute/icon">icon</a></code> attributes.</p> + +<h3 id="Interfaces">Interfaces</h3> + +<ul> + <li><code><a href="/th/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessibleProvider" title="">nsIAccessibleProvider</a></code></li> + <li><code><a href="/th/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMXULImageElement" title="">nsIDOMXULImageElement</a></code></li> +</ul> + +<div class="noinclude"> </div> diff --git a/files/th/glossary/data_structure/index.html b/files/th/glossary/data_structure/index.html new file mode 100644 index 0000000000..8be04c700d --- /dev/null +++ b/files/th/glossary/data_structure/index.html @@ -0,0 +1,17 @@ +--- +title: Data structure +slug: Glossary/Data_structure +tags: + - อภิธาน + - โครงสร้างข้อมูล +translation_of: Glossary/Data_structure +--- +<p><strong>โครงสร้างข้อมูล(Data structure)</strong> คือวิธีจัดการ<em>ข้อมูล</em> (<em>data)</em> เพื่อให้ใช้งานได้อย่างมีประสิทธิภาพ</p> + +<h2 id="อ่านเพิ่มEdit"><strong>อ่านเพิ่ม</strong><a class="button section-edit only-icon" href="https://developer.mozilla.org/en-US/docs/Glossary/Accessibility$edit#Learn_more" rel="nofollow, noindex"><span>Edit</span></a></h2> + +<h3 class="highlight-spanned" id="ความรู้ทั่วไป"><span class="highlight-span">ความรู้ทั่วไป</span></h3> + +<ul> + <li>{{interwiki("wikipedia", "โครงสร้างข้อมูล", "โครงสร้างข้อมูล")}} บนวิกิพีเดีย</li> +</ul> diff --git a/files/th/glossary/index.html b/files/th/glossary/index.html new file mode 100644 index 0000000000..8e1c81312d --- /dev/null +++ b/files/th/glossary/index.html @@ -0,0 +1,45 @@ +--- +title: Glossary +slug: Glossary +tags: + - Beginner + - Glossary + - Index + - Landing + - NeedsTranslation + - TopicStub +translation_of: Glossary +--- +<div style="width: 44%; float: right; margin: 4px 0 .5em 1em; line-height: 1.4;">{{LearnBox({"title":"Learn a new term:"})}}</div> + +<p class="summary" style="padding-top: 0; border-top-width: 0;"><span class="seoSummary">Web technologies contain long lists of jargon and abbreviations that are used in documentation and coding. This glossary provides definitions of words and abbreviations you need to know to successfully understand and build for the web.</span></p> + +<h2 id="Glossary_of_Terms"><strong>Glossary of Terms</strong></h2> + +<p>{{GlossaryList({"split": "h3", "css": "multiColumnList"})}}</p> + +<h2 id="Contribute_to_the_glossary">Contribute to the glossary</h2> + +<p>This glossary is a never ending work in progress. You can help improving it by <a href="/en-US/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">writing new entries</a> or by making the existing ones better. The easiest way to start is to hit the following link or to pick one of the suggested terms below.</p> + +<p><strong><a href="/en-US/docs/new?parent=4391">Add a new entry to the glossary</a></strong></p> + +<p>{{GlossaryList({"terms":["at-rule", "ALPN", "Attack", "Byte-Order Mark", "client", "Character set", "cryptosystem", "debug", "digital signature", "execution", "flex-direction", "GLSL", "Interface", "Library", "Memory management", "routers", "Self-Executing Anonymous Function", "Stylesheet", "Vector image"], "filter": "notdefined", "css": "multiColumnList"})}}</p> + +<p>If you want to know more on how to contribute to the glossary, check out <a href="/en-US/docs/MDN/Doc_status/Glossary">the glossary documentation status page</a>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/MDN/Community">Join the MDN community</a></li> +</ul> + +<div class="hidden"> +<h2 id="Subnav">Subnav</h2> + +<section id="Quick_Links"> +<ol> + <li><strong><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a></strong>{{ListSubpagesForSidebar("/en-us/docs/Glossary", 1)}}</li> +</ol> +</section> +</div> diff --git a/files/th/learn/accessibility/index.html b/files/th/learn/accessibility/index.html new file mode 100644 index 0000000000..66e2bc7961 --- /dev/null +++ b/files/th/learn/accessibility/index.html @@ -0,0 +1,62 @@ +--- +title: Accessibility +slug: Learn/Accessibility +tags: + - ARIA + - Accessibility + - Articles + - Beginner + - CSS + - CodingScripting + - HTML + - JavaScript + - Landing + - Learn + - Module + - NeedsTranslation + - TopicStub +translation_of: Learn/Accessibility +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Learning some HTML, CSS, and JavaScript is useful if you want to become a web developer, but your knowledge needs to go further than just using the technologies — you need to use them responsibly so that you maximize the audience for your websites and don't lock anyone out of using them. To achieve this, you need to adhere to general best practices (which are demonstrated throughout the <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> topics), do <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a>, and consider accessibility from the start. In this module, we'll cover the latter in detail.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>To get the most out of this module, it would be a good idea to either work through at least the first two modules of the <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> topics, or perhaps even better, work through the relevant parts of the accessibility module as you work through the related technology topics.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you can try out most of the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></dt> + <dd>This article starts the module off with a good look at what accessibility actually is — this includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></dt> + <dd>A great deal of web content can be made accessible just by making sure the correct HTML elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></dt> + <dd>CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences, but if misused they can significantly harm accessibility. This article outlines some CSS and JavaScript best practices that should be considered to ensure that even complex content is as accessible as possible.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></dt> + <dd>Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></dt> + <dd>Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives, so they can be understood by assistive technologies and their users. This article shows how.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></dt> + <dd>With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></dt> + <dd>In the assessment for this module, we present to you a simple site with a number of accessibility issues that you need to diagnose and fix.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Start Building Accessible Web Applications Today</a> — an excellent series of video tutorials by Marcy Sutton.</li> + <li><a href="https://dequeuniversity.com/resources/">Deque University resources</a> — includes code examples, screen reader references, and other useful resources.</li> + <li><a href="http://webaim.org/resources/">WebAIM resources</a> — includes guides, checklists, tools, and more.</li> +</ul> diff --git a/files/th/learn/css/index.html b/files/th/learn/css/index.html new file mode 100644 index 0000000000..03b2f56611 --- /dev/null +++ b/files/th/learn/css/index.html @@ -0,0 +1,45 @@ +--- +title: CSS +slug: Learn/CSS +tags: + - Beginner + - CSS + - CodingScripting + - NeedsContent + - NeedsTranslation + - TopicStub +translation_of: Learn/CSS +--- +<p>Whereas {{glossary("HTML")}} only specifies content structure, another major Web technology called {{Glossary('CSS')}} specifies how the content should look.</p> + +<p>CSS stands for <em>Cascading style sheet</em>. You can write CSS code inside {{HTMLElement("style")}} tags, but you normally write separate <code>.css</code> files so you can reuse styling information. CSS uses selectors to apply styles to HTML elements. We suggest you start with the following pages to pick up some skills and learn how to use CSS properly. Pick a page that looks interesting to you. If you don't know where to start, move from the first basic skill to the last advanced skill.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 id="The_basics">The basics</h2> + +<p>Start here if you aren't familiar with CSS:</p> + +<dl> + <dt><a href="/en-US/Learn/CSS/CSS_properties">What CSS properties are & how to use them</a></dt> + <dd>This article explains how to use selectors apply CSS properties to HTML elements.</dd> + <dt><a href="/en-US/Learn/CSS/Basic_text_styling_in_CSS">Basic text styling in CSS</a></dt> + <dd>Styling text is one easy application of CSS. Learn how in this article.</dd> + <dt><a href="/en-US/Learn/CSS/Using_CSS_in_a_web_page">Using CSS in a webpage</a></dt> + <dd>Knowing CSS is one thing, but you also need to make it play well with {{Glossary("HTML")}}. The article explains how.</dd> +</dl> +</div> + +<div class="section"> +<h2 id="In_depth">In depth</h2> + +<p>Once you get used to working with CSS, here are some details to explore:</p> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Reference">CSS Reference</a></dt> + <dd>An exhaustive reference for seasoned Web developers describing every CSS property and concept.</dd> +</dl> +</div> +</div> + +<p> </p> diff --git a/files/th/learn/front-end_web_developer/index.html b/files/th/learn/front-end_web_developer/index.html new file mode 100644 index 0000000000..0f845fc458 --- /dev/null +++ b/files/th/learn/front-end_web_developer/index.html @@ -0,0 +1,193 @@ +--- +title: Front-end web developer +slug: Learn/Front-end_web_developer +tags: + - CSS + - HTML + - JavaScript +translation_of: Learn/Front-end_web_developer +--- +<p>{{learnsidebar}}</p> + +<p>ยินดีต้อนรับสู่เส้นทางการเรียนรู้สำหรับนักพัฒนาเว็บส่วนหน้าของเรา!</p> + +<p>ที่นี่เรามีหลักสูตรโครงสร้างที่จะสอนทุกสิ่งที่คุณจำเป็นต้องรู้เพื่อเป็นนักพัฒนาเว็บส่วนหน้า เพียงทำงานผ่านแต่ละส่วนเรียนรู้ทักษะใหม่ ๆ (หรือปรับปรุงทักษะที่มีอยู่) ตามที่คุณไป แต่ละส่วนมีแบบฝึกหัดและการประเมินผลเพื่อทดสอบความเข้าใจของคุณก่อนที่จะก้าวไปข้างหน้า</p> + +<h2 id="วิชาที่ครอบคลุม">วิชาที่ครอบคลุม</h2> + +<p>วิชาที่ครอบคลุมคือ:</p> + +<ul> + <li>การตั้งค่าพื้นฐานและการเรียนรู้วิธีการเรียนรู้</li> + <li>มาตรฐานเว็บและแนวปฏิบัติที่ดีที่สุด (เช่นความสามารถในการเข้าถึงและความเข้ากันได้ของเบราว์เซอร์ข้าม)</li> + <li>HTML ภาษาที่ให้โครงสร้างเนื้อหาเว็บและความหมาย</li> + <li>CSS ภาษาที่ใช้ในการจัดรูปแบบหน้าเว็บ</li> + <li>JavaScript ซึ่งเป็นภาษาสคริปต์ที่ใช้ในการสร้างการทำงานแบบไดนามิกบนเว็บ</li> + <li>เครื่องมือที่ใช้เพื่ออำนวยความสะดวกในการพัฒนาเว็บฝั่งไคลเอ็นต์ที่ทันสมัย</li> +</ul> + +<p>You can work through sections in order, but each one is also self-contained. For example, if you already know HTML, you can skip ahead to the CSS section.</p> + +<h2 id="ข้อกำหนดเบื้องต้น">ข้อกำหนดเบื้องต้น</h2> + +<p>คุณไม่จำเป็นที่ต้องมีความรู้มาก่อนที่จะเรียนหลักสูตรนี้ เพียงแค่คุณมี ความตั้งใจที่จะเรียนรู้ คอมพิวเตอร์ที่สามารถใช้งานเบราว์เซอร์และสามารถเชื่อมต่ออินเทอร์เน็ตได้</p> + +<p>หากคุณไม่แน่ใจว่าการพัฒนาเว็บไซต์นี้หเฝฝเหมาะกับคุณหรือไม่ และหากคุณต้องการคำแนะนำอย่างละเอียดก่อนเรียนหลักสูตรนี้, ให้เริ่มทดลองใช้งาน <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> </p> + +<h2 id="Getting_help">Getting help</h2> + +<p>We have tried to make learning front-end web development as comfortable as possible, but you will probably still get stuck because you don't understand something, or some code is just not working.</p> + +<p>Don't panic. We all get stuck, whether we are beginner or professional web developers. The <a href="/en-US/docs/Learn/Learning_and_getting_help">Learning and getting help</a> article provides you with a series of tips for looking up information and helping yourself. If you are still stuck, feel free to post a question on our <a href="https://discourse.mozilla.org/c/mdn/learn/">Discourse forum</a>.</p> + +<p>Let's get started. Good luck!</p> + +<h2 id="The_learning_pathway">The learning pathway</h2> + +<h3 id="Getting_started">Getting started</h3> + +<p>Time to complete: 1.5–2 hours</p> + +<h4 id="Prerequisites">Prerequisites</h4> + +<p>Nothing except basic computer literacy.</p> + +<h4 id="How_will_I_know_Im_ready_to_move_on">How will I know I'm ready to move on?</h4> + +<p>There are no assessments in this part of the course. But make sure you don't skip. It is important to get you set up and ready to do work for exercises later on in the course.</p> + +<h4 id="Guides">Guides</h4> + +<ul> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a> — basic tool setup (15 min read)</li> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">Background on the web and web standards</a> (45 min read)</li> + <li><a href="/en-US/docs/Learn/Learning_and_getting_help">Learning and getting help</a> (45 min read)</li> +</ul> + +<h3 id="Semantics_and_structure_with_HTML">Semantics and structure with HTML</h3> + +<p>Time to complete: 35–50 hours</p> + +<h4 id="Prerequisites_2">Prerequisites</h4> + +<p>Nothing except basic computer literacy, and a basic web development environment.</p> + +<h4 id="How_will_I_know_Im_ready_to_move_on_2">How will I know I'm ready to move on?</h4> + +<p>The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module.</p> + +<h4 id="Modules">Modules</h4> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> (15–20 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a> (15–20 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/HTML/Tables">HTML tables</a> (5–10 hour read/exercises)</li> +</ul> + +<h3 id="Styling_and_layout_with_CSS">Styling and layout with CSS</h3> + +<p>Time to complete: 90–120 hours</p> + +<h4 id="Prerequisites_3">Prerequisites</h4> + +<p>It is recommended that you have basic HTML knowledge before starting to learn CSS. You should at least study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> first.</p> + +<h4 id="How_will_I_know_Im_ready_to_move_on_3">How will I know I'm ready to move on?</h4> + +<p>The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module.</p> + +<h4 id="Modules_2">Modules</h4> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> (10–15 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks">CSS building blocks</a> (35–45 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a> (15–20 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a> (30–40 hour read/exercises)</li> +</ul> + +<h4 id="Additional_resources">Additional resources</h4> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS layout cookbook</a></li> +</ul> + +<h3 id="Interactivity_with_JavaScript">Interactivity with JavaScript</h3> + +<p>Time to complete: 135–185 hours</p> + +<h4 id="Prerequisites_4">Prerequisites</h4> + +<p>It is recommended that you have basic HTML knowledge before starting to learn JavaScript. You should at least study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> first.</p> + +<h4 id="How_will_I_know_Im_ready_to_move_on_4">How will I know I'm ready to move on?</h4> + +<p>The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module.</p> + +<h4 id="Modules_3">Modules</h4> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a> (30–40 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a> (25–35 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects">Introducing JavaScript objects</a> (25–35 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a> (30–40 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous">Asynchronous JavaScript</a> (25–35 hour read/exercises)</li> +</ul> + +<h3 id="Web_forms_—_Working_with_user_data">Web forms — Working with user data</h3> + +<p>Time to complete: 40–50 hours</p> + +<h4 id="Prerequisites_5">Prerequisites</h4> + +<p>Forms require HTML, CSS, and JavaScript knowledge. Given the complexity of working with forms, it is a dedicated topic.</p> + +<h4 id="How_will_I_know_Im_ready_to_move_on_5">How will I know I'm ready to move on?</h4> + +<p>The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module.</p> + +<h4 id="Modules_4">Modules</h4> + +<ul> + <li><a href="/en-US/docs/Learn/Forms">Web forms</a> (40–50 hours)</li> +</ul> + +<h3 id="Making_the_web_work_for_everyone">Making the web work for everyone</h3> + +<p>Time to complete: 60–75 hours</p> + +<h4 id="Prerequisites_6">Prerequisites</h4> + +<p>เป็นความคิดที่ดีที่จะรู้จัก HTML, CSS และ JavaScript ก่อนที่จะทำงานในส่วนนี้ เทคนิคและแนวปฏิบัติที่ดีที่สุดหลายเรื่องมีหลายเทคโนโลยี</p> + +<h4 id="ฉันจะรู้ได้อย่างไรว่าฉันพร้อมจะเดินหน้าต่อไป">ฉันจะรู้ได้อย่างไรว่าฉันพร้อมจะเดินหน้าต่อไป?</h4> + +<p>การประเมินผลในแต่ละโมดูลถูกออกแบบมาเพื่อทดสอบความรู้ของคุณในเรื่อง การดำเนินการประเมินให้เสร็จสมบูรณ์เป็นการยืนยันว่าคุณพร้อมที่จะไปยังโมดูลถัดไป</p> + +<h4 id="โมดูล">โมดูล</h4> + +<ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">การทดสอบข้ามเบราว์เซอร์</a> (อ่าน / แบบฝึกหัด 25-30 ชั่วโมง)</li> + <li><a href="/en-US/docs/Learn/Accessibility">การช่วยสำหรับการเข้าถึง</a> (อ่าน / แบบฝึกหัด 20-25 ชั่วโมง)</li> +</ul> + +<h3 id="เครื่องมือที่ทันสมัย">เครื่องมือที่ทันสมัย</h3> + +<p>ระยะเวลาดำเนินการ: 55–90 ชั่วโมง</p> + +<h4 id="ข้อกำหนดเบื้องต้น_2">ข้อกำหนดเบื้องต้น</h4> + +<p>เป็นความคิดที่ดีที่จะรู้ HTML, CSS และ JavaScript ก่อนที่จะทำงานในส่วนนี้เนื่องจากเครื่องมือที่กล่าวถึงทำงานร่วมกับเทคโนโลยีเหล่านี้มากมาย</p> + +<h4 id="ฉันจะรู้ได้อย่างไรว่าฉันพร้อมจะเดินหน้าต่อไป_2">ฉันจะรู้ได้อย่างไรว่าฉันพร้อมจะเดินหน้าต่อไป?</h4> + +<p>ไม่มีบทความการประเมินเฉพาะในชุดของโมดูลนี้ แบบฝึกหัดกรณีศึกษาในตอนท้ายของโมดูลที่สองและสามเตรียมความพร้อมสำหรับการเข้าใจความจำเป็นของเครื่องมือที่ทันสมัย</p> + +<h4 id="โมดูล_2">โมดูล</h4> + +<ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/GitHub">Git และ GitHub</a> (อ่าน 5 ชั่วโมง)</li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">ทำความเข้าใจกับเครื่องมือการพัฒนาเว็บฝั่งไคลเอ็นต์</a> (อ่าน 20–25 ชั่วโมง)</li> + <li> + <p><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">ทำความเข้าใจกับเฟรมเวิร์ก JavaScript ฝั่งไคลเอ็นต์</a> (อ่าน / ฝึกซ้อม 30-60 ชั่วโมง)</p> + </li> +</ul> diff --git a/files/th/learn/html/index.html b/files/th/learn/html/index.html new file mode 100644 index 0000000000..e2aad092ab --- /dev/null +++ b/files/th/learn/html/index.html @@ -0,0 +1,58 @@ +--- +title: HTML +slug: Learn/HTML +tags: + - Beginner + - Guide + - HTML + - Intro + - Learn + - NeedsTranslation + - Topic + - TopicStub +translation_of: Learn/HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">To build websites, you should know about {{Glossary('HTML')}} — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.</p> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>Ideally you should start your learning journey by learning HTML. Start by reading <a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a>. You may then move on to learning about more advanced topics such as:</p> + +<ul> + <li><a href="/en-US/docs/Learn/CSS">CSS</a>, and how to use it to style HTML (for example alter your text size and fonts used, add borders and drop shadows, layout your page with multiple columns, add animations and other visual effects.)</li> + <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, and how to use it to add dynamic functionality to web pages (for example find your location and plot it on a map, make UI elements appear/disappear when you toggle a button, save users' data locally on their computers, and much much more.)</li> +</ul> + +<p>Before starting this topic, you should have at least basic familiarity with using computers, and using the web passively (i.e. just looking at it, consuming the content). You should have a basic work environment set up as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and understand how to create and manage files, as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — both are parts of our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p> + +<p>It is recommended that you work through <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web </a>before attempting this topic, however it isn't absolutely necessary; much of what is covered in the <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> article is also covered in our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module, albeit in a lot more detail.</p> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a></dt> + <dd>This module sets the stage, getting you used to important concepts and syntax, looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a webpage.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a></dt> + <dd>This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML Tables</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> + <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 web sites, 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> + +<h2 id="Solving_common_HTML_problems">Solving common HTML problems</h2> + +<p><a href="/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a> provides links to sections of content explaining how to use HTML to solve very common problems when creating a webpage: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.</p> + +<h2 id="See_also">See also</h2> + +<div class="document-head" id="wiki-document-head"> +<dl> + <dt><a href="/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a> on MDN</dt> + <dd>The main entry point for HTML documentation on MDN, including detailed element and attribute references — if you want to know what attributes an element has or what values an attribute has, for example, this is a great place to start.</dd> +</dl> +</div> diff --git a/files/th/learn/index.html b/files/th/learn/index.html new file mode 100644 index 0000000000..bbc331db41 --- /dev/null +++ b/files/th/learn/index.html @@ -0,0 +1,139 @@ +--- +title: เรียนรู้การพัฒนาเว็บ +slug: Learn +tags: + - Beginner + - CSS + - HTML + - Intro + - Landing + - NeedsTranslation + - Web + - สารบัญ + - เรียนรู้ +translation_of: Learn +--- +<p>{{LearnSidebar}}</p> + +<div class="summary"> +<p>ยินดีต้อนรับสู่พื้นที่เรียนรู้ MDN จุดมุ่งหมายของบทความชุดนี้ คือการสร้างพื้นฐานที่จะทำให้ผู้เริ่มต้นสามารถเริ่มพัฒนาเว็บไซต์แบบง่ายได้</p> + +<p>จุดมุ่งหมายของพื้นที่นี้ไม่ใช่การนำคุณจากการเป็น<em> "ผู้เริ่มต้น" </em>ไปสู่การเป็น<em>"ผู้เชี่ยวชาญ"</em> แต่จะเป็นการทำให้คุณสามารถเรียนรู้ ด้วยวิธีของคุณเองได้อย่างผ่อนคลายไม่ว่าจะเป็นการเรียนรู้จาก <a href="/th/">ส่วนที่เหลือของ MDN</a>หรือจากแหล่งข้อมูลระดับกลางถึงสูงอื่นๆที่จำเป็นต้องใช้ความรู้พื้นฐาน</p> + +<p>ถ้าคุณเป็นผู้เริ่มต้นจริงๆ การพัฒนาเว็บอาจเป็นเรื่องที่ท้าทายพวกเรา จะนำพาคุณและมอบรายละเอียดที่เพียงพอที่จะทำให้คุณรู้สึกผ่อนคลาย และสามารถเรียนรู้ในหัวข้อต่างๆได้อย่างถูกต้อง คุณจะรู้สึกสบายไม่ว่าคุณ จะเป็นนักเรียนที่กำลังเรียนรู้เกี่ยวกับการพัฒนาเว็บ หรือจะเป็นอาจารณ์ ที่กำลังมองหาเนื้อหาสำหรับชั้นเรียน, ผู้ที่ทำเป็นงานอดิเรก, หรือผู้ที่เพียงต้องการที่จะเรียนรู้ถึงการทำงานของเทคโนโลยีเว็บ</p> +</div> + +<div class="warning"> +<p><strong>สำคัญ : </strong>เนื้อหาในพื้นที่การเรียนรู้จะถูกเพิ่มอยู่สม่ำเสมอ ถ้าคุณมีคำถามเกี่ยวกับหัวข้อ ที่ต้องการให้ครอบคุม หรือรู้สึกว่าขาดหาย กรุณาติดต่อพวกเราส่วน {{anch("ติดต่อเรา")}} ด้านล่าง</p> +</div> + +<h2 id="จะเริ่มต้นที่ไหนดี">จะเริ่มต้นที่ไหนดี</h2> + +<ul class="card-grid"> + <li><span>ผู้เริ่มต้น:</span> + + <p>หากคุณเป็นผู้เริ่มต้นอย่างแท้จริง พวกเราขอแนะนำ<a href="/th/docs/Learn/Getting_started_with_the_web">เริ่มต้นกับเว็บ</a> ซึ่งจะให้ข้อมูลเบื้องต้น เกี่ยวกับการพัฒนาเว็บ</p> + </li> + <li><span>คำถามเฉพาะ:</span> + <p>ถ้าคุณมีคำถามเฉพาะเกี่ยวกับ การพัฒนาเว็บไซต์ในส่วน <a href="/th/docs/Learn/Common_questions">คำถามทั่วไป </a>ของพวกเราอาจมีบางสิ่งที่ช่วยตอบคุณได้</p> + </li> + <li><span>รู้เกินกว่าพื้นฐาน:</span> + <p>ถ้าคุณรู้เกี่ยวกับพื้นฐานแล้วขึ้นตอนต่อไปสำหรับการเรียนรู้คือ {{glossary("HTML")}} และ {{glossary("CSS")}} โดยสรุปแลัว ควรเริ่มต้นที่ <a href="/th/docs/Learn/HTML/Introduction_to_HTML">บทนำสู่ HTML </a>ของพวกเราแล้วไปเรียนรู้ต่อที่ <a href="/th/docs/Learn/CSS/Introduction_to_CSS">บทนำสู่ CSS</a></p> + </li> + <li><span>ย้ายไปสู่การเขียนสคริปต์:</span> + <p>ถ้าคุณสามารถใช้งาน HTML และ CSS ได้อย่างคล่องแคล่วแล้ว หรือคุณสนใจแต่การเขียน<span class="Thai th-reading" lang="th">โค้ด </span>ขั้นตอนต่อไปคือ {{glossary("JavaScript")}} หรือการพัฒนาในฝัง Server เริ่มต้นด้วย <a href="/th/docs/Learn/JavaScript/First_steps">JavaScript ขั้นตอนแรก</a> และ <a href="/th/docs/Learn/Server-side/First_steps">Server-side ขั้นตอนแรก</a> ของพวกเร </p> + </li> +</ul> + +<div class="note"> +<p><strong>หมายเหตุ</strong>: <a href="/th/docs/Glossary">อภิธานศัพท์</a> ของเราจะช่วยให้คำจำกัดความของคำศัพท์ต่างๆ</p> +</div> + +<p>{{LearnBox({"title":"Quick learning: Vocabulary"})}}</p> + +<h2 id="เนื้อหาที่ครอบคลุม">เนื้อหาที่ครอบคลุม</h2> + +<p>นี่คือเนื้อหาที่เราครอบคลุมในพื้นที่เรียนรู้ MDN</p> + +<dl> + <dt><a href="/en-US/Learn/Getting_started_with_the_web">เริ่มต้นกับเว็บ</a></dt> + <dd>Provides a practical introduction to web development for complete beginners.</dd> + <dt><a href="/th/docs/Learn/HTML">HTML — โครงสร้างของเว็บ</a></dt> + <dd>HTML is the language that we use to structure the different parts of our content and define what their meaning or purpose is. This topic teaches HTML in detail.</dd> + <dt><a href="/th/docs/Learn/CSS">CSS — ตกแต่งเว็บ</a></dt> + <dd>CSS is the language that we can use to style and lay out our web content, as well as adding behavior like animation. This topic provides comprehensive coverage of CSS.</dd> + <dt><a href="/th/docs/Learn/JavaScript">JavaScript — การเขียนสคริปต์แบบไดนามิกด้านไคลเอนต์ </a></dt> + <dd>JavaScript is the scripting language used to add dynamic functionality to web pages. This topic teaches all the essentials needed to become comfortable with writing and understanding JavaScript.</dd> + <dt><a href="/th/docs/Learn/Accessibility">การเข้าถึง — ทำให้ทุกคนสามารถใช้เว็บไซต์ได้</a></dt> + <dd>Accessibility is the practice of making web content available to as many people as possible regardless of disability, device, locale, or other differentiating factors. This topic gives you all you need to know.</dd> + <dt><a href="/th/docs/Learn/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/Learn/Tools_and_testing">เครื่องมือและการทดสอบ</a></dt> + <dd>This topic covers the tools developers use to facilitate their work, such as cross browser testing tools.</dd> + <dt><a href="/th/docs/Learn/Server-side">การเขียนโปรแกรมเว็บไซต์ฝั่งเซอร์เวอร์</a></dt> + <dd>Even if you are concentrating on client-side web development, it is still useful to know how servers and server-side code features work. This topic provides a general introduction to how the server-side works, and detailed tutorials showing how to build up a server-side app using two popular frameworks — Django (Python) and Express (node.js). </dd> +</dl> + +<h2 id="รับโค้ดตัวอย่างของเรา">รับโค้ดตัวอย่างของเรา</h2> + +<p>โค้ดตัวอย่างที่คุณจะเจอในพื้นที่เรียนรู้นั้น<a href="https://github.com/mdn/learning-area/">มีอยู่บน GitHub ทั้งหมด</a> หากคุณต้องการที่จะ คัดลอกมันลงบนคอมพิวเตอร์ของคุณ วิธีที่ง่ายที่สุดคือการดาวน์โหลด<a href="https://github.com/mdn/learning-area/archive/master.zip">ไฟล์ ZIP จากมาสเตอร์ branch ล่าสุด</a></p> + +<p>หากคุณต้องการที่จะคัดลอกจากรีพอซิทรีในรูปแบบที่ยืดหยุ่นกว่า ซึ่งจะทำให้คุณสามารถอัปเดต ได้อย่างอัตโนมัติ คุณจะต้องทำตามขั้นตอนที่ซับซ้อนกว่าเดิมดังต่อไปนี้:</p> + +<ol> + <li><a href="https://git-scm.com/downloads">ติดตั้ง Git</a> บนเครื่องของคุณ นี่คือซอฟต์แวร์สำหรับควบคุมการปรับปรุงแก้ไขที่ GitHub ใช้เป็นฐานในการทำงาน</li> + <li><a href="https://github.com/join">สร้างบัญชี GitHub</a></li> + <li>เมื่อสร้างบัญชีเสร็จแล้ว ลงชื่อเข้าใช้ที่ <a href="https://github.com">github.com</a> ด้วยชื่อผู้ใช้และรหัสผ่านของคุณ</li> + <li>เปิดคอมมานด์พรอมต์ (วินโดวส์) หรือเทอร์มินัล (<a href="https://help.ubuntu.com/community/UsingTheTerminal">ลีนุกซ์</a>, <a href="http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">แมคโอเอส</a>) บนคอมพิวเตอร์ของคุณ</li> + <li>การคัดลอกรีพอซิทรีของพื้นที่เรียนรู้นี้สู่โฟลเดอร์ชื่อ <code>learning-area</code> ณ ตำแหน่งปัจจุบันที่คอมมานด์พรอมต์หรือเทอร์มินัลกำลังชี้อยู่ สามารถทำได้ด้วยคำสั่งต่อไปนี้: + <pre class="brush: bash line-numbers language-bash"><code class="language-bash"><span class="function token">git</span> clone https://github.com/mdn/learning-area</code></pre> + </li> + <li>ตอนนี้คุณสามารถเข้าสู่ไดเรกทอรี และหาไฟล์ที่คุณต้องการ (สามารถทำได้โดยการใช้ Finder/File Explorer หรือ <a href="https://en.wikipedia.org/wiki/Cd_(command)">คำสั่ง cd</a>)</li> +</ol> + +<p>คุณสามารถอัปเดต <code>learning-area</code> รีพอซิทรีที่มีการเปลี่ยนแปลงในมาสเตอร์บน GitHub ด้วยขั้นตอนต่อไปนี้:</p> + +<ol> + <li>ในคอมมานด์พรอมต์หรือเทอร์มินัลของคุณ ให้เข้าไปข้างในไดเรกทอรี <code>learning-area</code> โดยใช้ <code>cd</code> ยกตัวอย่างเช่น หากคุณกำลังอยู่ในไดเรกทอรีแม่ ให้ใช้คำสั่ง: + + <pre class="brush: bash line-numbers language-bash"><code class="language-bash"><span class="function token">cd</span> learning-area</code></pre> + </li> + <li>อัปเดตรีพอซิทรีด้วยคำสั่งต่อไปนี้: + <pre class="brush: bash line-numbers language-bash"><code class="language-bash"><span class="function token">git</span> pull</code></pre> + </li> +</ol> + +<h2 id="ติดต่อเรา_2"><a id="ติดต่อเรา" name="ติดต่อเรา">ติดต่อเรา</a></h2> + +<p> ถ้าคุณต้องการติดต่อพวกเราเกี่ยวกับบางสิ่ง ทางเลือกที่ดีที่สุดคือ ทิ้งข้อความที่ <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">learning area discourse thread</a> หรือ <a href="https://developer.mozilla.org/en-US/docs/MDN/Community/Conversations#Chat_in_IRC">IRC channels</a> ของพวกเรา เราต้องการทราบข้อมูลจากคุณเกี่ยวกับสิ่งที่ คุณคิดว่าผิดพลาดหรือขาดหายไปในเว็บไซต์ ขอหัวข้อการเรียนรู้ใหม่ ขอความช่วยเหลือใน รายการที่คุณไม่เข้าใจ หรือคำถามหรือข้อสงสัยอื่น ๆ</p> + +<p>ถ้าคุณสนใจช่วยพัฒนาปรับปรุงเนื้อหา ดูที่ <a href="https://developer.mozilla.org/en-US/Learn/How_to_contribute">how you can help</a> และรับการติดต่อ พวกเราดีใจมากที่จะได้ติดต่อกับคุณ ไม่ว่าคุณจะเป็นผู้เรียน คุณครู ผู้มีประสบการณ์ด้านการพัฒนาเว็บไซต์ หรือใครสักคนที่สนใจช่วยปรับปรุง ประสบการณ์การเรียนรู้นี้</p> + +<article class="approved"> +<div class="boxed translate-rendered text-content"> +<h2 id="ดูเพิ่ม">ดูเพิ่ม</h2> + +<dl> + <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Mozilla developer newsletter</a></dt> + <dd>Our newsletter for web developers, which is a great resource for all levels of experience.</dd> + <dt><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web demystified</a></dt> + <dd>A great series of videos explaining web fundamentals, aimed at complete beginners to web development. Created by <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</dd> + <dt><a href="https://www.codecademy.com/">Codecademy</a></dt> + <dd>A great interactive site for learning programming languages from scratch.</dd> + <dt><a href="https://www.bitdegree.org/learn/">BitDegree</a></dt> + <dd>Basic coding theory with a gamified learning process. Mainly focused on beginners.</dd> + <dt><a href="https://code.org/">Code.org</a></dt> + <dd>Basic coding theory and practice, mainly aimed at children/complete beginners.</dd> + <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a> </dt> + <dd>Free and open courses for learning tech skills, with mentorship and project-based learning</dd> + <dt><a href="https://www.freecodecamp.org/">freeCodeCamp.org</a></dt> + <dd>Interactive site with tutorials and projects to learn web development.</dd> + <dt><a href="https://learning.mozilla.org/web-literacy/">Web literacy map</a></dt> + <dd>A framework for entry-level web literacy & 21st Century skills, which also provides access to teaching activities sorted by category.</dd> + <dt><a href="https://learning.mozilla.org/activities">Teaching activities</a></dt> + <dd>A series of teaching activities for teaching (and learning) created by the Mozilla Foundation, covering everything from basic web literacy and privacy to JavaScript and hacking Minecraft.</dd> + <dt><a href="https://edabit.com/">Edabit</a></dt> + <dd>Hundreds of free interactive coding challenges in various languages.</dd> +</dl> +</div> +</article> diff --git a/files/th/learn/javascript/index.html b/files/th/learn/javascript/index.html new file mode 100644 index 0000000000..f01ce72c27 --- /dev/null +++ b/files/th/learn/javascript/index.html @@ -0,0 +1,66 @@ +--- +title: JavaScript +slug: Learn/JavaScript +tags: + - Beginner + - CodingScripting + - JavaScript + - JavaScripting beginner + - Landing + - Module + - NeedsTranslation + - Topic + - TopicStub + - 'l10n:priority' +translation_of: Learn/JavaScript +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">{{Glossary("JavaScript")}} is a programming language that allows you to implement complex things on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, or interactive maps, or animated 2D/3D graphics, or scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved.</p> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>JavaScript is arguably more difficult to learn than related technologies such as <a href="/en-US/docs/Learn/HTML">HTML</a> and <a href="/en-US/docs/Learn/CSS">CSS</a>. Before attempting to learn JavaScript, you are strongly advised to get familiar with at least these two technologies first, and perhaps others as well. Start by working through the following modules:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></li> +</ul> + +<p>Having previous experience with other programming languages might also help.</p> + +<p>After getting familiar with the basics of JavaScript, you should be in a position to learn about more advanced topics, for example:</p> + +<ul> + <li>JavaScript in depth, as taught in our <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript guide</a></li> + <li><a href="/en-US/docs/Web/API">HTML5 APIs</a></li> +</ul> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules, in a suggested order for working through them.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a></dt> + <dd>In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key JavaScript features in detail, such as variables, strings, numbers and arrays.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a></dt> + <dd>In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code block such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Introducing JavaScript objects</a></dt> + <dd>In JavaScript, most things are objects, from core JavaScript features like strings and arrays to the browser APIs built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages. The object-oriented nature of JavaScript is important to understand if you want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you. Here we teach object theory and syntax in detail, look at how to create your own objects, and explain what JSON data is and how to work with it.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a></dt> + <dd>When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work. </dd> +</dl> + +<h2 id="Solving_common_JavaScript_problems">Solving common JavaScript problems</h2> + +<p><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a> provides links to sections of content explaining how to use JavaScript to solve very common problems when creating a webpage.</p> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript">JavaScript on MDN</a></dt> + <dd>The main entry point for core JavaScript documentation on MDN — this is where you'll find extensive reference docs on all aspects of the JavaScript language, and some advanced tutorials aimed at experienced JavaScripters.</dd> + <dt><a href="https://www.youtube.com/user/codingmath">Coding math</a></dt> + <dd>An excellent series of video tutorials to teach the math you need to understand to be an effective programmer, by <a href="https://twitter.com/bit101">Keith Peters</a>.</dd> +</dl> diff --git a/files/th/learn/ฝั่งเซิร์ฟเวอร์/index.html b/files/th/learn/ฝั่งเซิร์ฟเวอร์/index.html new file mode 100644 index 0000000000..4235bdb5e2 --- /dev/null +++ b/files/th/learn/ฝั่งเซิร์ฟเวอร์/index.html @@ -0,0 +1,50 @@ +--- +title: การเขียนโปรแกรมเว็บไซต์ฝั่งเซิร์ฟเวอร์ +slug: Learn/ฝั่งเซิร์ฟเวอร์ +translation_of: Learn/Server-side +--- +<div><a href="/th/docs/">{{LearnSidebar}}</a></div> + +<p class="summary"><strong><em><font><font>แบบไดนามิกเว็บไซต์</font></font></em></strong><font><font> - </font></font><em><strong><font><font> การเขียนโปรแกรมฝั่งเซิร์ฟเวอร์</font></font></strong></em><font><font>หัวข้อเป็นชุดของโมดูลที่แสดงให้เห็นว่าการสร้างเว็บไซต์แบบไดนามิก; </font><font>เว็บไซต์ที่ให้ข้อมูลที่กำหนดเองเพื่อตอบสนองคำขอ HTTP </font><font>โมดูลนี้ให้คำแนะนำทั่วไปเกี่ยวกับการเขียนโปรแกรมฝั่งเซิร์ฟเวอร์พร้อมกับคำแนะนำระดับเริ่มต้นเฉพาะเกี่ยวกับวิธีใช้เฟรมเวิร์กเว็บ Django (Python) และ Express (Node.js / JavaScript) เพื่อสร้างแอปพลิเคชันพื้นฐาน</font></font></p> + +<p><font><font>เว็บไซต์หลักส่วนใหญ่ใช้เทคโนโลยีฝั่งเซิร์ฟเวอร์เพื่อแสดงข้อมูลแบบไดนามิกตามที่ต้องการ </font><font>ตัวอย่างเช่นลองนึกดูว่ามีสินค้ากี่ชิ้นใน Amazon และจินตนาการว่ามีการเขียนโพสต์บน Facebook กี่รายการ </font><font>การแสดงสิ่งเหล่านี้ทั้งหมดโดยใช้เพจแบบคงที่ต่างกันจะไม่มีประสิทธิภาพอย่างมากดังนั้นไซต์ดังกล่าวจะแสดงเทมเพลตแบบคงที่แทน (สร้างโดยใช้</font></font><a href="/en-US/docs/Learn/HTML"><font><font>HTML</font></font></a><font><font> , </font></font><a href="/en-US/docs/Learn/CSS"><font><font>CSS</font></font></a><font><font>และ</font></font><a href="/en-US/docs/Learn/JavaScript"><font><font>JavaScript</font></font></a><font><font> ) จากนั้นอัปเดตข้อมูลที่แสดงในเทมเพลตเหล่านั้นแบบไดนามิกเมื่อจำเป็นเช่นเมื่อคุณต้องการ ดูผลิตภัณฑ์อื่นใน Amazon</font></font></p> + +<p><font><font>ในโลกสมัยใหม่ของการพัฒนาเว็บขอแนะนำให้เรียนรู้เกี่ยวกับการพัฒนาฝั่งเซิร์ฟเวอร์</font></font></p> + +<h2 id="เส้นทางการเรียนรู้"><font><font>เส้นทางการเรียนรู้</font></font></h2> + +<p><font><font>การเริ่มต้นด้วยการเขียนโปรแกรมฝั่งเซิร์ฟเวอร์มักจะง่ายกว่าการพัฒนาฝั่งไคลเอ็นต์เนื่องจากเว็บไซต์แบบไดนามิกมักจะดำเนินการที่คล้ายคลึงกันมาก (การดึงข้อมูลจากฐานข้อมูลและแสดงในเพจการตรวจสอบความถูกต้องของข้อมูลที่ผู้ใช้ป้อนและบันทึกไว้ใน ฐานข้อมูลการตรวจสอบสิทธิ์ของผู้ใช้และการล็อกอินผู้ใช้ ฯลฯ ) และสร้างขึ้นโดยใช้เว็บเฟรมเวิร์กที่ทำให้การทำงานของเว็บเซิร์ฟเวอร์เหล่านี้และอื่น ๆ เป็นเรื่องง่าย</font></font></p> + +<p><font><font>ความรู้พื้นฐานเกี่ยวกับแนวคิดการเขียนโปรแกรม (หรือภาษาโปรแกรมเฉพาะ) มีประโยชน์ แต่ไม่จำเป็น </font><font>ในทำนองเดียวกันไม่จำเป็นต้องมีความเชี่ยวชาญในการเขียนโค้ดฝั่งไคลเอ็นต์ แต่ความรู้พื้นฐานจะช่วยให้คุณทำงานได้ดีขึ้นกับนักพัฒนาซอฟต์แวร์ที่สร้างเว็บฝั่งไคลเอ็นต์ "ส่วนหน้า"</font></font></p> + +<p><font><font>คุณจะต้องเข้าใจ "วิธีการทำงานของเว็บ" </font><font>เราขอแนะนำให้คุณอ่านหัวข้อต่อไปนี้ก่อน:</font></font></p> + +<ul> + <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server"><font><font>เว็บเซิร์ฟเวอร์คืออะไร</font></font></a></li> + <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need"><font><font>ฉันต้องใช้ซอฟต์แวร์อะไรในการสร้างเว็บไซต์</font></font></a></li> + <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server"><font><font>คุณอัพโหลดไฟล์ไปยังเว็บเซิร์ฟเวอร์ได้อย่างไร?</font></font></a></li> +</ul> + +<p><font><font>ด้วยความเข้าใจพื้นฐานดังกล่าวคุณก็พร้อมที่จะดำเนินการตามโมดูลต่างๆในส่วนนี้ </font></font></p> + +<h2 id="โมดูล"><font><font>โมดูล</font></font></h2> + +<p><font><font>หัวข้อนี้ประกอบด้วยโมดูลต่อไปนี้ </font><font>คุณควรเริ่มต้นด้วยโมดูลแรกจากนั้นไปที่หนึ่งในโมดูลต่อไปนี้ซึ่งแสดงวิธีการทำงานกับภาษาฝั่งเซิร์ฟเวอร์ที่เป็นที่นิยมมากสองภาษาโดยใช้เว็บเฟรมเวิร์กที่เหมาะสม </font></font></p> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps"><font><font>ขั้นตอนแรกการเขียนโปรแกรมเว็บไซต์ฝั่งเซิร์ฟเวอร์</font></font></a></dt> + <dd><font><font>โมดูลนี้ให้ข้อมูลเทคโนโลยีที่ไม่เชื่อเรื่องพระเจ้าเกี่ยวกับการเขียนโปรแกรมเว็บไซต์ฝั่งเซิร์ฟเวอร์เช่น "มันคืออะไร" "มันแตกต่างจากการเขียนโปรแกรมฝั่งไคลเอนต์อย่างไร" และ "ทำไมจึงมีประโยชน์" </font><font>โมดูลนี้ยังสรุปเฟรมเวิร์กเว็บฝั่งเซิร์ฟเวอร์ที่เป็นที่นิยมมากขึ้นและให้คำแนะนำเกี่ยวกับวิธีการเลือกสิ่งที่ดีที่สุดสำหรับไซต์ของคุณ </font><font>สุดท้ายนี้มีการแนะนำการรักษาความปลอดภัยเว็บเซิร์ฟเวอร์</font></font></dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django"><font><font>Django Web Framework (Python)</font></font></a></dt> + <dd><font><font>Django เป็นเว็บเฟรมเวิร์กฝั่งเซิร์ฟเวอร์ที่ได้รับความนิยมอย่างมากเขียนด้วยภาษา Python </font><font>โมดูลนี้อธิบายว่าเหตุใด Django จึงเป็นเฟรมเวิร์กเว็บเซิร์ฟเวอร์ที่ดีวิธีตั้งค่าสภาพแวดล้อมการพัฒนาและวิธีดำเนินงานทั่วไปกับมัน</font></font></dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs"><font><font>Express Web Framework (Node.js / JavaScript)</font></font></a></dt> + <dd><font><font>Express เป็นเว็บเฟรมเวิร์กยอดนิยมซึ่งเขียนด้วย JavaScript และโฮสต์ภายในสภาพแวดล้อมรันไทม์ node.js </font><font>โมดูลจะอธิบายถึงประโยชน์หลักบางประการของเฟรมเวิร์กนี้วิธีตั้งค่าสภาพแวดล้อมการพัฒนาของคุณและวิธีดำเนินงานการพัฒนาเว็บและการปรับใช้งานทั่วไป</font></font></dd> +</dl> + +<h2 id="ดูสิ่งนี้ด้วย"><font><font>ดูสิ่งนี้ด้วย</font></font></h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Node_server_without_framework"><font><font>เซิร์ฟเวอร์โหนดที่ไม่มีกรอบ</font></font></a></dt> + <dd><font><font>บทความนี้แสดงเซิร์ฟเวอร์ไฟล์แบบคงที่แบบธรรมดาที่สร้างด้วย Node.js บริสุทธิ์สำหรับผู้ที่คุณไม่ต้องการใช้เฟรมเวิร์ก</font></font></dd> + <dt><a href="/en-US/docs/Learn/Server-side/Configuring_server_MIME_types"><font><font>การกำหนดค่าประเภท MIME ของเซิร์ฟเวอร์อย่างถูกต้อง</font></font></a></dt> + <dd><font><font>การกำหนดค่าเซิร์ฟเวอร์ของคุณเพื่อส่ง {{อภิธานศัพท์ ("MIME types")}} ที่ถูกต้อง (หรือที่เรียกว่าประเภทสื่อหรือประเภทเนื้อหา) ไปยังเบราว์เซอร์เป็นสิ่งสำคัญสำหรับเบราว์เซอร์เพื่อให้สามารถประมวลผลและแสดงเนื้อหาได้อย่างถูกต้อง </font><font>นอกจากนี้ยังเป็นสิ่งสำคัญในการป้องกันเนื้อหาที่เป็นอันตรายจากการปลอมตัวเป็นเนื้อหาที่ไม่เป็นอันตราย</font></font></dd> +</dl> diff --git a/files/th/learn/เริ่มต้นใช้งานเว็บ/index.html b/files/th/learn/เริ่มต้นใช้งานเว็บ/index.html new file mode 100644 index 0000000000..0eb9b565f5 --- /dev/null +++ b/files/th/learn/เริ่มต้นใช้งานเว็บ/index.html @@ -0,0 +1,55 @@ +--- +title: เริ่มต้นใช้งานเว็บ +slug: Learn/เริ่มต้นใช้งานเว็บ +translation_of: Learn/Getting_started_with_the_web +--- +<div><font><font>{{LearnSidebar}}</font></font></div> + +<div class="summary"> +<p><em><font><font>การเริ่มต้นใช้งานเว็บ</font></font></em><font><font>เป็นซีรีส์สั้น ๆ ที่จะแนะนำคุณเกี่ยวกับการปฏิบัติจริงของการพัฒนาเว็บ </font><font>คุณจะต้องตั้งค่าเครื่องมือที่จำเป็นในการสร้างหน้าเว็บแบบธรรมดาและเผยแพร่โค้ดง่ายๆของคุณเอง</font></font></p> +</div> + +<h2 id="เรื่องราวของเว็บไซต์แรกของคุณ"><font><font>เรื่องราวของเว็บไซต์แรกของคุณ</font></font></h2> + +<p><font><font>การสร้างเว็บไซต์แบบมืออาชีพเป็นงานที่ต้องทำมากมายดังนั้นหากคุณยังใหม่กับการพัฒนาเว็บเราขอแนะนำให้คุณเริ่มต้นจากเล็ก ๆ </font><font>คุณจะไม่สร้าง Facebook ใหม่ในทันที แต่มันไม่ยากที่จะทำให้เว็บไซต์ง่ายๆของคุณเองทางออนไลน์เราจะเริ่มที่นั่น</font></font></p> + +<p><font><font>ด้วยการทำงานตามบทความด้านล่างตามลำดับคุณจะไม่ต้องทำอะไรเลยเพื่อให้หน้าเว็บแรกของคุณออนไลน์ </font><font>มาเริ่มการเดินทางกันเลย!</font></font></p> + +<h3 id="การติดตั้งซอฟต์แวร์พื้นฐาน"><a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software"><font><font>การติดตั้งซอฟต์แวร์พื้นฐาน</font></font></a></h3> + +<p><font><font>เมื่อพูดถึงเครื่องมือในการสร้างเว็บไซต์มีหลายอย่างให้เลือก </font><font>หากคุณเพิ่งเริ่มต้นคุณอาจสับสนกับอาร์เรย์ของเครื่องมือแก้ไขโค้ดเฟรมเวิร์กและเครื่องมือทดสอบที่มีอยู่ </font><font>ใน</font></font><a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software"><font><font>การติดตั้งซอฟต์แวร์พื้นฐาน</font></font></a><font><font>เราจะแสดงวิธีการติดตั้งซอฟต์แวร์ที่คุณต้องการเพื่อเริ่มต้นการพัฒนาเว็บขั้นพื้นฐานแบบทีละขั้นตอน</font></font></p> + +<h3 id="เว็บไซต์ของคุณจะเป็นอย่างไร"><a href="/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like"><font><font>เว็บไซต์ของคุณจะเป็นอย่างไร?</font></font></a></h3> + +<p><font><font>ก่อนที่คุณจะเริ่มเขียนโค้ดสำหรับเว็บไซต์ของคุณคุณควรวางแผนก่อน </font><font>คุณกำลังจัดแสดงข้อมูลอะไร </font><font>คุณใช้ฟอนต์และสีอะไร </font></font><a href="/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like"><font><font>เว็บไซต์ของคุณจะเป็นอย่างไร? </font></font></a><font><font>เราสรุปวิธีการง่ายๆที่คุณสามารถปฏิบัติตามเพื่อวางแผนเนื้อหาและการออกแบบไซต์ของคุณ</font></font></p> + +<h3 id="การจัดการกับไฟล์"><a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files"><font><font>การจัดการกับไฟล์</font></font></a></h3> + +<p><font><font>เว็บไซต์ประกอบด้วยไฟล์จำนวนมาก: เนื้อหาข้อความโค้ดสไตล์ชีตเนื้อหาสื่อและอื่น ๆ </font><font>เมื่อคุณสร้างเว็บไซต์คุณต้องรวบรวมไฟล์เหล่านี้ให้เป็นโครงสร้างที่เหมาะสมและตรวจสอบให้แน่ใจว่าพวกเขาสามารถพูดคุยกันได้ </font></font><a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files"><font><font>การจัดการกับไฟล์</font></font></a><font><font>จะอธิบายถึงวิธีตั้งค่าโครงสร้างไฟล์ที่เหมาะสมสำหรับเว็บไซต์ของคุณและปัญหาที่คุณควรทราบ</font></font></p> + +<h3 id="พื้นฐาน_HTML"><a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics"><font><font>พื้นฐาน HTML</font></font></a></h3> + +<p><font><font>Hypertext Markup Language (HTML) คือรหัสที่คุณใช้เพื่อจัดโครงสร้างเนื้อหาเว็บของคุณและให้ความหมายและวัตถุประสงค์ </font><font>ตัวอย่างเช่นเนื้อหาของฉันเป็นชุดของย่อหน้าหรือรายการสัญลักษณ์แสดงหัวข้อย่อยหรือไม่ </font><font>ฉันมีภาพแทรกบนหน้าของฉันหรือไม่? </font><font>ฉันมีตารางข้อมูลหรือไม่? </font><font>โดยไม่ทำให้คุณ</font></font><a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics"><font><font>พื้นฐาน HTML</font></font></a><font><font>ให้ข้อมูลมากพอที่จะทำให้คุณคุ้นเคยกับ HTML</font></font></p> + +<h3 id="พื้นฐาน_CSS"><a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics"><font><font>พื้นฐาน CSS</font></font></a></h3> + +<p><font><font>Cascading Stylesheets (CSS) คือโค้ดที่คุณใช้จัดรูปแบบเว็บไซต์ของคุณ </font><font>ตัวอย่างเช่นคุณต้องการให้ข้อความเป็นสีดำหรือสีแดง? </font><font>ควรวาดเนื้อหาบนหน้าจอที่ใด </font><font>ภาพพื้นหลังและสีใดที่ควรใช้ในการตกแต่งเว็บไซต์ของคุณ </font></font><a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics"><font><font>ข้อมูลเบื้องต้นเกี่ยวกับ CSS</font></font></a><font><font>จะนำคุณไปสู่สิ่งที่คุณต้องใช้ในการเริ่มต้น</font></font></p> + +<h3 id="พื้นฐาน_JavaScript"><a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics"><font><font>พื้นฐาน JavaScript</font></font></a></h3> + +<p><font><font>JavaScript เป็นภาษาการเขียนโปรแกรมที่คุณใช้เพื่อเพิ่มคุณลักษณะแบบโต้ตอบให้กับเว็บไซต์ของคุณ </font><font>ตัวอย่างบางส่วนอาจเป็นเกมสิ่งที่เกิดขึ้นเมื่อกดปุ่มหรือป้อนข้อมูลในแบบฟอร์มเอฟเฟกต์สไตล์ไดนามิกภาพเคลื่อนไหวและอื่น ๆ อีกมากมาย </font></font><a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics"><font><font>ข้อมูลเบื้องต้นเกี่ยวกับ JavaScript</font></font></a><font><font>ช่วยให้คุณทราบถึงสิ่งที่เป็นไปได้ในภาษาที่น่าตื่นเต้นนี้และจะเริ่มต้นอย่างไร</font></font></p> + +<h3 id="เผยแพร่เว็บไซต์ของคุณ"><a href="/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website"><font><font>เผยแพร่เว็บไซต์ของคุณ</font></font></a></h3> + +<p><font><font>เมื่อคุณเขียนโค้ดและจัดระเบียบไฟล์ที่ประกอบเป็นเว็บไซต์ของคุณเสร็จแล้วคุณจะต้องวางโค้ดทั้งหมดทางออนไลน์เพื่อให้คนอื่นค้นพบได้ </font></font><a href="/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website"><font><font>การเผยแพร่โค้ดตัวอย่างของคุณจะ</font></font></a><font><font>อธิบายถึงวิธีการรับโค้ดตัวอย่างแบบง่ายทางออนไลน์โดยใช้ความพยายามขั้นต่ำ</font></font></p> + +<h3 id="เว็บทำงานอย่างไร"><a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works"><font><font>เว็บทำงานอย่างไร</font></font></a></h3> + +<p><font><font>เมื่อคุณเข้าถึงเว็บไซต์โปรดของคุณสิ่งที่ซับซ้อนมากมายเกิดขึ้นในเบื้องหลังที่คุณอาจไม่รู้ </font></font><a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works"><font><font>วิธีการทำงานของเว็บ</font></font></a><font><font>สรุปสิ่งที่เกิดขึ้นเมื่อคุณดูเว็บเพจบนคอมพิวเตอร์ของคุณ</font></font></p> + +<h2 id="ดูสิ่งนี้ด้วย"><font><font>ดูสิ่งนี้ด้วย</font></font></h2> + +<ul> + <li><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g"><font><font>Web Demystified</font></font></a><font><font> : ชุดวิดีโอที่ยอดเยี่ยมที่อธิบายพื้นฐานของเว็บโดยมุ่งเป้าไปที่ผู้เริ่มต้นพัฒนาเว็บโดยสมบูรณ์ </font><font>สร้างโดย</font></font><a href="https://twitter.com/JeremiePat"><font><font>Jeremie </font></font></a><font><font>Patonnier</font></font></li> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards"><font><font>มาตรฐานเว็บและเว็บ</font></font></a><font><font> : บทความนี้ให้ข้อมูลพื้นฐานที่เป็นประโยชน์บนเว็บ - ความเป็นมาของเทคโนโลยีมาตรฐานเว็บคืออะไรทำงานร่วมกันได้อย่างไรทำไม "นักพัฒนาเว็บ" จึงเป็นอาชีพที่ดีให้เลือกและประเภทของแนวทางปฏิบัติที่ดีที่สุด คุณจะได้เรียนรู้ตลอดหลักสูตร</font></font></li> +</ul> diff --git a/files/th/mdn/contribute/getting_started/index.html b/files/th/mdn/contribute/getting_started/index.html new file mode 100644 index 0000000000..4604fa8d1a --- /dev/null +++ b/files/th/mdn/contribute/getting_started/index.html @@ -0,0 +1,125 @@ +--- +title: เริ่มต้น สู่ MDN +slug: MDN/Contribute/Getting_started +translation_of: MDN/Contribute/Getting_started +--- +<div>{{MDNSidebar}}</div><div class="syntaxbox" id="What_is_MDN.3F"><span class="seoSummary">เราคือ สังคมเสรี หรือกลุ่มเปิด สังคมที่เป็นกลุ่มของผู้ที่เป็นนักพัฒนาและสร้างสิ่งดีๆสำหรับเว็บไซต์ , โดยไม่คำนึงถึง แบรนด์ บราวเซอร์ตัวเปิดดูเว็บไซต์, หรือแพลตฟอร์ม. ทุกคนสามารถร่วมเป็นส่วนหนึ่งในการที่จะพัฒนาหรือทำสิ่งดีๆ. เราร่วมกันพัฒนาต่อยอดหรือสร้างนวัตกรรมใหม่ๆบนเว็บเพื่อสิ่งที่ดีกว่า. เริ่มต้นที่นี่ กับคุณ.</span></div> + +<p><span>ทุกๆส่วนของ MDN (เอกสาร, ตัวอย่าง, การสาธิต, และตัวเว็บไซต์เอง) ได้ถูกสร้างขึ้นหรือทำขึ้นโดยใครก็ได้ภายในสังคมเปิดหรือสังคมเสรีของนักพัฒนา แต่มันจะไม่ได้อะไรหากไมไ่ด้รับการช่วยเหลือของพวกคุณเช่นกัน</span></p> + +<p>3 ขั้นตอน สู่ MDN</p> + +<p>MDN คือ wiki. ไม่ว่าใครที่ไหนก็สามารถ สร้าง เพิ่ม และ แก้ไข เนื้อหา. คุณไม่จำเป็นต้องเป็นนักพัฒนาโปรแกรมหรือที่เรียกว่าโปรแกรมเม่อร์ หรือมีความรู้ทางด้านเทคโนโลยีมากมาย. มีหลายสิ่งที่จำเป็นจะต้องทำให้เสร็จสมบูรณ์ จากความสามารถพื้นฐาน(ด้วยการพิสูจน์อักษร และแก้ไขข้อผิดพลาด)</p> + +<p>จะมีส่วนร่วมสนับสนุนนั้นไม่ยากและปลอดภัย. แม้กระทั่งคุณจะทำไม่ถูกต้อง, ก็สามารถแก้ไขได้โดยง่าย; ถ้าคุณไม่รู้ว่าจะต้องทำอย่างไร หรือให้มันดูเป็นแบบไหน, หรือหลักวัยยากรณ์ของคุณไม่ดี ก็ไม่ต้องจำเป็นต้องกังวลหรือคิดมากเกี่ยวกับมัน! พวกเรามีทีมที่ทำอาชีพเกี่ยวกับด้านนี้ที่จะทำให้มั่นใจว่า เนื้อหาขอวง MDN น้นถูกต้องและดีที่สุดเท่าที่เป็นไปได้. จะมีบางคนที่จะทำให้งานขอวงคุณเขียนออกมาได้ดีที่สุด. แบ่งปันสิ่งที่คุณรู้ และติดตามผลงานที่ดีของคุณให้กับสังคม เพื่อช่วยเหลืองานของคุณให้ดียิ่งขึ้น</p> + +<h3 id="ขั้นตอนที่_1_สร้างบัญชีของ_MDN">ขั้นตอนที่ 1: สร้างบัญชีของ MDN</h3> + +<p>ในการเริ่มต้น ที่จะมีส่วนร่วมและช่วยเหลือใน MDN. คุณจำเป็นที่จะต้องมีซักบัญชีของ MDN สำหรับรายละเอียดคลิกได้ที่ลิงค์นี้ <a href="/en-US/docs/MDN/Contribute/Howto/Create_an_MDN_account">how to create an account</a>.</p> + +<h3 id="ขั้นตอนที่_2_เลือกส่วนที่จะทำให้เสร็จ">ขั้นตอนที่ 2: เลือกส่วนที่จะทำให้เสร็จ</h3> + +<p>ในขณะที่คุณเข้าสู่ระบบแล้ว, อ่านรายละเอียด และความแตกต่างของงานแต่ละประเภท จากประเภทงานที่เป็นไปได้กับกรายละเอียด, และตัดสินใจในสิ่งที่คุณสนใจมากที่สุด, คุณสามารถเลือกงานที่คุณชอบและเริ่มต้นในการมีส่วนร่วมช่วยเหลือ.</p> + +<h3 id="ขั้นตอนที่_3_ทำกระบวนการ_หรืองานนั้น">ขั้นตอนที่ 3: ทำกระบวนการ หรืองานนั้น</h3> + +<p>เมื่อคุณได้ตัดสนใจสิ่งใดสิ่งหนึ่งที่คุณจะทำได้แล้ว, หาหน้า,รหัสอักษร, ตัวอย่าง, อย่าสิ่งใดๆ. เพื่อเริ่มงานและ ทำงานนั้น!</p> + +<p>ไม่ต้องกังวลหรือคิดมากเกี่ยวกับการทำงานว่าต้องออกมาสมบูรณ์ที่สุด; ผู้ช่วยเหลือหรือผู้ที่มีส่วนร่วมใน MDN คนอื่นๆ จะช่วยแก้ไขข้อผิดพลาดผ่านการช่วยเหลือนั้นเช่นกัน หากคุณมีคำถามใดๆ, ให้เข้าไปที่หน้า <a href="/en-US/docs/MDN/Community">Community</a> เพื่อดูรายละเอียดของรายการอีเมล์และห้องสนทนา คุณจะพบว่าคุณสามารถหาคำตอบได้ที่ไหน.</p> + +<div class="note"> +<p><strong>Note: </strong>If you want to experiment with editing on MDN before doing something "for real", we have a <strong><a href="/en-US/docs/Sandbox">Sandbox</a></strong> page for you to play around in. Please limit your experiments to this page. Please don't make unneeded changes to content pages just to see what happens; that's making a mess for others to clean up.</p> +</div> + +<p>เมื่อคุณทำงานในสิ่งที่คุณเลือกเสร็จแล้ว, หากคุณยังมีเวลาว่าง คุณสามารถเลือกงานชิ้นอื่นๆ ได้โดยการเข้าไปที่ <a href="#">other things you can do on MDN</a>.</p> + +<h2 id="Possible_task_types">Possible task types</h2> + +<p>There are multiple avenues you can take to contribute to MDN depending on your skill set and interests. Even though some tasks may be daunting, we do have lots of simple activities available. A lot of them need only five minutes (or less!) of your time. Along with the task and its short description, you will find the approximate time that each type of task typically takes.</p> + +<h3 id="ตัวเลือกที่_1_ฉันชอบตัวอักษรอักขระ">ตัวเลือกที่ 1: ฉันชอบตัวอักษรอักขระ</h3> + +<p>คุณสามารถช่วยเราจากตัวอย่างหรือแก้ไข เอกสารและแก้ไขหรือทำให้ถูกต้องให้กับเอกสารเหล่านั้น</p> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page">Set the summary for a page</a> (5-15 minutes)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Do_an_editorial_review">Editorial Reviews</a> (5–30 minutes)</li> + <li><a href="/en-US/docs/MDN/User_guide/Writing#Editing_an_existing_page">Update an existing article with new information</a> (5 minutes-1 hour)</li> + <li><a href="/en-US/docs/Project:MDN/Contributing/How_to/Write_a_new_entry_in_the_Glossary">Write a new entry in the Glossary</a> (15 minutes-1 hour)</li> + <li><a href="/en-US/docs/MDN/User_guide/Writing#Adding_a_new_page">Write an article about a new technology or API</a> (30 minutes-2 hours)</li> + <li><a href="/en-US/docs/Project:MDN/Contributing/How_to/Write_an_article_to_help_learning_the_web">Write an article to help people learn about the web</a> (1-3 hours)</li> +</ul> + +<div class="note"><strong>Note:</strong> If you are reviewing articles or writing new ones, we ask you to please review the <a href="/en-US/docs/MDN/Contribute/Content/Style_guide">Style Guide</a>. This will help to ensure that articles are consistent.</div> + +<h3 id="ตัวเลือกที่_2_ชั้นชอบรหัสหรือเขียนโปรแกรม">ตัวเลือกที่ 2: ชั้นชอบรหัสหรือเขียนโปรแกรม</h3> + +<p>We need more code samples! You can also help build our site platform, <a href="https://developer.mozilla.org/en-US/docs/Project:MDN/Kuma">Kuma</a>!</p> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live">Convert code samples to be "live"</a> (30 minutes)</li> + <li><a href="https://kuma.readthedocs.org/en/latest/installation-vagrant.html">Set up a Kuma build environment</a> (1 hour)</li> + <li><a href="https://github.com/mozilla/kuma#readme">Send your code patch to the Kuma codebase</a> (1 hour)</li> + <li><a href="https://developer.mozilla.org/en-US/demos/submit">Submit a new demo </a>(1 hour)</li> +</ul> + +<h3 id="ตัวเลือกที่_3_ฉันชอบทั้งสองอย่าง_ทั้งตังหนังสือตัวอักษรและการสร้างหรือถอดรหัสหรือการเขียนโปรแกรม">ตัวเลือกที่ 3: ฉันชอบทั้งสองอย่าง ทั้งตังหนังสือตัวอักษรและการสร้างหรือถอดรหัสหรือการเขียนโปรแกรม</h3> + +<p>We have tasks that require both technical and language skills, like writing new articles, reviewing for technical accuracy, or adapting documents.</p> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Tag_JavaScript_pages">Tag JavaScript pages</a> (5 minutes)</li> + <li><a href="/en-US/docs/MDN/Promote">Promote MDN on your own website</a> (5 minutes)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Do_a_technical_review">Technical reviews</a> (30 minutes)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Update_API_page_layout">Update API page layout</a> (30 minutes)</li> + <li><a href="/en-US/docs/MDN/Contribute/Creating_and_editing_pages#Creating_a_new_page">Write a new article on a topic you are familiar with</a> (1 hour or more)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Create an interactive exercise to help people learn about the web</a> (1 hour or more)</li> +</ul> + +<h3 id="ตัวเลือกที่_4_ฉันต้องการ_MDN_ในภาษาของฉัน">ตัวเลือกที่ 4: ฉันต้องการ MDN ในภาษาของฉัน</h3> + +<p>ทุกๆเขตที่อยู่ในอาศัย และการแปลภาษานั้นของแต่ละถิ่นภาษานั้นๆ สามารถทำเสร็จใน MDN ได้ ซึ่งเป็นสิ่งที่ตื่นตาตื่นใจมากซึ่งมันสำเร็จได้โดยอาสาสมัครในสังคม</p> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Localize/Translating_pages">Translating pages</a> (2 hours)</li> + <li>Connect with other localizers listed in <a href="/en-US/docs/MDN/Contribute/Localize/Localization_projects">Localization projects</a> (30 minutes)</li> +</ul> + +<h3 id="ตัวเลือกที่_5_ฉันพบข้อผิดพลาดบางอย่างของเนื้อหา_แต่ไม่รู้ว่าจะแก้ไขอย่างไร">ตัวเลือกที่ 5: ฉันพบข้อผิดพลาดบางอย่างของเนื้อหา แต่ไม่รู้ว่าจะแก้ไขอย่างไร</h3> + +<p>คุณสามารถรายงานข้อผิดพลาดโดย <a class="external" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla%20Developer%20Network">filing a documentation bug</a>. (5 minutes)</p> + +<p>Use these field values:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Bugzilla field</strong></td> + <td><strong>Value</strong></td> + </tr> + <tr> + <td><code>product</code></td> + <td><a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Developer+Documentation">Developer Documentation</a></td> + </tr> + <tr> + <td><code>component</code></td> + <td>[choose an area appropriate to the topic, or "General" if you're not sure or you don't see the right one]</td> + </tr> + <tr> + <td><code>URL</code></td> + <td>The page where you found the problem</td> + </tr> + <tr> + <td><code>Description</code></td> + <td>As much as you know or have time to describe about the problem and where to find correct information. This can include people ("talk to so-and-so") as well as Web links.</td> + </tr> + </tbody> +</table> + +<h2 id="Other_things_you_can_do_on_MDN">Other things you can do on MDN</h2> + +<ul> + <li><a href="/en-US/docs/Project:Community">Join the MDN Community</a>.</li> + <li><a href="/en-US/profile">Fill out your profile</a> so others can know more about you.</li> + <li>Learn more about <a href="/en-US/docs/MDN/Contribute">contributing to MDN</a>.</li> +</ul> diff --git a/files/th/mdn/contribute/howto/create_an_mdn_account/index.html b/files/th/mdn/contribute/howto/create_an_mdn_account/index.html new file mode 100644 index 0000000000..0f0427dc02 --- /dev/null +++ b/files/th/mdn/contribute/howto/create_an_mdn_account/index.html @@ -0,0 +1,36 @@ +--- +title: How to create an MDN account +slug: MDN/Contribute/Howto/Create_an_MDN_account +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +<div>{{MDNSidebar}}</div><p><span class="seoSummary"><font><font>ในการแก้ไขเนื้อหาใน MDN คุณต้องมีโปรไฟล์ MDN </font><font>คุณไม่จำเป็นต้องมีโปรไฟล์ถ้าคุณต้องการอ่านและค้นหาเอกสาร MDN เท่านั้น </font><font>คู่มือนี้จะช่วยคุณในการตั้งค่าโปรไฟล์ MDN ของคุณ</font></font></span></p> + +<div class="pull-aside"> +<div class="moreinfo"><strong><font><font>ทำไม MDN จึงต้องการที่อยู่อีเมลของฉัน? </font></font></strong><br> +<br> +<font><font>ที่อยู่อีเมลของคุณใช้สำหรับการกู้คืนบัญชีและผู้บริหารระบบ MDN จะติดต่อคุณเกี่ยวกับบัญชีของคุณหรือกิจกรรมของคุณในเว็บไซต์หากจำเป็น </font></font><br> +<br> +<font><font>นอกจากนี้คุณสามารถลงทะเบียนเพื่อรับการแจ้งเตือน (เช่น</font></font><a href="/en-US/docs/MDN/Contribute/Howto/Watch_a_page"><font><font>เมื่อมีการเปลี่ยนแปลงหน้าเว็บบางหน้า</font></font></a><font><font> ) และข้อความ (ตัวอย่างเช่นถ้าคุณเลือกเข้าร่วมทีมทดสอบเบต้าของเราคุณอาจได้รับอีเมลเกี่ยวกับคุณลักษณะใหม่ ๆ ที่ต้องการการทดสอบ) </font></font><br> +<br> +<font><font>ที่อยู่อีเมลของคุณจะไม่ปรากฏบน MDN และจะใช้เฉพาะตาม</font></font><a href="https://www.mozilla.org/privacy/websites/"><font><font>นโยบายส่วนบุคคล</font></font></a><font><font>เท่านั้น</font></font><br> + +<div class="note"><font><font>ถ้าคุณลงชื่อเข้าใช้ MDN ผ่าน GitHub และคุณใช้ที่อยู่อีเมล "noreply" ใน GitHub คุณจะ</font></font><em><font><font>ไม่</font></font></em><font><font>ได้รับข้อความ (รวมถึงการแจ้งเตือนเมื่อสมัครสมาชิกเพจ) จาก MDN</font></font></div> +</div> +</div> + +<ol> + <li><font><font>ที่ด้านบนสุดของทุกหน้าใน MDN คุณจะพบปุ่มที่มีข้อความ</font></font><strong><font><font>ลงชื่อเข้า</font></font></strong><font><font>ใช้ </font><font>ชี้เมาส์ไปที่เมาส์นี้ (หรือแตะที่นี่ถ้าคุณใช้อุปกรณ์เคลื่อนที่) เพื่อแสดงรายการบริการตรวจสอบสิทธิ์ที่เราสนับสนุนในการลงชื่อเข้าใช้ MDN</font></font></li> + <li><font><font>เลือกบริการที่จะลงชื่อเข้าใช้ด้วย </font><font>ขณะนี้มีเฉพาะ GitHub เท่านั้น </font><font>โปรดทราบว่าหากคุณเลือก GitHub ลิงก์ไปยังโปรไฟล์ GitHub ของคุณจะถูกรวมไว้ในหน้าโปรไฟล์ MDN สาธารณะของคุณ</font></font></li> + <li><font><font>ทำตามคำแนะนำของ GitHub เพื่อเชื่อมต่อบัญชีของคุณกับ MDN</font></font></li> + <li><font><font>เมื่อบริการตรวจสอบสิทธิ์ส่งคืนคุณเป็น MDN คุณจะได้รับพร้อมท์ให้ป้อนชื่อผู้ใช้และที่อยู่อีเมล </font></font><em><font><font>ชื่อผู้ใช้ของคุณจะปรากฏต่อสาธารณะเพื่อให้เครดิตคุณสำหรับงานที่คุณทำ </font></font></em><font><strong><font>อย่าใช้ที่อยู่อีเมลของคุณเป็นชื่อผู้ใช้ของคุณ</font></strong></font></li> + <li><font><font>คลิก</font><font>สร้างโปรไฟล์</font></font><strong><font><font> MDN ของฉัน</font></font></strong></li> + <li><font><font>หากที่อยู่อีเมลที่คุณระบุในขั้นตอนที่ 4 ไม่ใช่แบบเดียวกับที่คุณใช้กับบริการรับรองความถูกต้องโปรดตรวจสอบอีเมลของคุณและคลิกลิงก์ในอีเมลยืนยันที่เราส่งให้คุณ</font></font></li> +</ol> + +<p><font><font>แค่นั้นแหละ! </font><font>คุณมีบัญชี MDN แล้วคุณสามารถแก้ไขหน้าได้ทันที!</font></font></p> + +<p><font><font>คุณสามารถคลิกที่ชื่อของคุณที่ด้านบนของหน้า MDN เพื่อดูโปรไฟล์สาธารณะของคุณ </font><font>จากตรงนั้นคุณสามารถคลิก</font></font><strong><font><font>แก้ไข</font></font></strong><font><font>เพื่อทำการเปลี่ยนแปลงหรือเพิ่มโปรไฟล์ของคุณ</font></font></p> + +<div class="note"> +<p><font><font>ชื่อผู้ใช้ใหม่ต้องไม่มีช่องว่างหรืออักขระ "@" </font><font>โปรดจำไว้ว่าชื่อผู้ใช้ของคุณจะปรากฏต่อสาธารณชนเพื่อระบุงานที่คุณทำ</font></font></p> +</div> diff --git a/files/th/mdn/contribute/howto/do_a_technical_review/index.html b/files/th/mdn/contribute/howto/do_a_technical_review/index.html new file mode 100644 index 0000000000..9979f85c10 --- /dev/null +++ b/files/th/mdn/contribute/howto/do_a_technical_review/index.html @@ -0,0 +1,51 @@ +--- +title: How to do a technical review +slug: MDN/Contribute/Howto/Do_a_technical_review +translation_of: MDN/Contribute/Howto/Do_a_technical_review +--- +<div>{{MDNSidebar}}</div><h2 id="IncludeSubnav_(_en-US_เอกสาร_MDN)"><font><font><font><font>{{IncludeSubnav ( "/ en-US / เอกสาร / MDN")}}</font></font></font></font></h2> + +<p class="summary"><strong><font><font><font><font>การตรวจสอบทางเทคนิค</font></font></font></font></strong><font><font><font><font>ประกอบด้วยการตรวจสอบความถูกต้องทางด้านเทคนิคและความสมบูรณ์ของบทความและแก้ไขได้ถ้าจำเป็น</font></font></font><font><font><font>ถ้าเป็นนักเขียนของบทความต้องการให้คนอื่นตรวจสอบเนื้อหาทางเทคนิคของบทความนักเขียนเห็บ "การตรวจสอบทางเทคนิคช่อง" ขณะที่การแก้ไข</font></font></font><font><font><font>การติดต่อมักจะเขียนเป็นวิศวกรที่เฉพาะเจาะจงในการดำเนินการตรวจสอบทางเทคนิค แต่ทุกคนที่มีความเชี่ยวชาญทางเทคนิคในหัวข้อสามารถทำอย่างใดอย่างหนึ่ง</font></font></font></font></p> + +<p><span class="seoSummary"><font><font><font><font>บทความนี้อธิบายถึงวิธีการที่จะดำเนินการตรวจสอบทางเทคนิคจึงช่วยให้เพื่อให้มั่นใจว่าเนื้อหา MDN อย่างถูกต้อง</font></font></font></font></span></p> + +<dl> + <dt><font><font><font><font>งานของคุณคืออะไร?</font></font></font></font></dt> + <dd><font><font><font><font>การตรวจสอบและแก้ไขบทความเพื่อความถูกต้องและครบถ้วนทางเทคนิค</font></font></font></font></dd> + <dt><font><font><font><font>ที่ไม่ได้จะต้องมีการทำ?</font></font></font></font></dt> + <dd><font><font><font><font>ในบทความที่เฉพาะเจาะจงที่ถูกทำเครื่องหมายเป็นต้องมี</font></font></font><font><font><font>การตรวจสอบทางเทคนิค</font></font></font></font></dd> + <dt><font><font><font><font>สิ่งใดที่คุณจำเป็นต้องรู้ที่จะทำงานได้หรือไม่</font></font></font></font></dt> + <dd> + <ul> + <li><font><font><font><font>ความรู้จากผู้เชี่ยวชาญในหัวข้อของบทความที่คุณกำลังตรวจสอบ</font></font></font><font><font><font>หากอ่านบทความไม่ได้สอนอะไรใหม่อย่างมีนัยสำคัญจะพิจารณาตัวเองผู้เชี่ยวชาญ</font></font></font></font></li> + <li><font><font><font><font>วิธีการแก้ไขบทความวิกิพีเดียใน MDN</font></font></font></font></li> + </ul> + </dd> + <dt><font><font><font><font>มีขั้นตอนอะไรจะทำหรือไม่</font></font></font></font></dt> + <dd> + <ol> + <li><font><font><font><font>เลือกบทความเพื่อทบทวน:</font></font></font></font> + <ol> + <li><font><font><font><font>ไปที่รายการของหน้าเว็บที่ต้องการ</font></font></font><font><font><font>แสดงความคิดเห็นทางเทคนิค</font></font></font><font><font><font>นี้แสดงหน้าเว็บทั้งหมดที่มีการตรวจสอบทางเทคนิคได้รับการร้องขอ</font></font></font></font></li> + <li><font><font><font><font>เลือกหน้ามีหัวข้อที่คุณมีความคุ้นเคยกับ</font></font></font></font></li> + <li><font><font><font><font>คลิกที่ลิงค์บทความเพื่อโหลดหน้าเว็บ</font></font></font></font></li> + </ol> + </li> + <li><a id="core-steps" name="core-steps"></a><font><font><font><font>อ่านบทความที่ให้ความสนใจใกล้เคียงกับรายละเอียดทางเทคนิค: บทความถูกต้องหรือไม่</font></font></font><font><font><font>มีอะไรหายไป? </font></font></font><font><font><font>อย่าลังเลที่จะเปลี่ยนไปยังเพจที่แตกต่างกันถ้าคนแรกที่คุณเลือกไม่เหมาะกับคุณ</font></font></font></font></li> + <li><font><font><font><font>"ตรวจสอบอย่างรวดเร็ว" </font></font></font><font><font><font>ๆ</font></font></font></font><br> + <img alt="ภาพหน้าจอของกล่องแถบด้านข้างของรายการความคิดเห็นที่ได้รับการร้องขอและช่วยให้ธงจะมีการเปลี่ยนแปลง" src="https://mdn.mozillademos.org/files/13016/SidebarTechReviewRequested.png"></li> + <li><font><font><font><font>ยกเลิกการเลือก</font></font></font></font><strong><font><font><font><font>เทคนิค</font></font></font></font></strong><font><font><font><font>ช่องทำเครื่องหมายและคลิก</font></font></font><font><font><font>บันทึก</font></font></font></font></li> + <li><font><font><font><font>หากคุณพบข้อผิดพลาดที่ต้องได้รับการแก้ไขแล้วคุณจะดีใจที่รู้ว่าคุณยังสามารถเปลี่ยนสถานะคำขอตรวจสอบจากภายในบรรณาธิการ</font></font></font><font><font><font>นี่คือขั้นตอนการทำงาน:</font></font></font></font> + <ol> + <li><font><font><font><font>แก้ไขหน้าให้คลิก</font></font></font></font><strong><font><font><font><font>แก้ไข</font></font></font></font></strong><font><font><font><font>ปุ่มที่อยู่ด้านบนของหน้า; </font></font></font><font><font><font>นี้ทำให้คุณเข้าสู่</font></font></font><font><font><font>การแก้ไข MDN</font></font></font></font></li> + <li><font><font><font><font>แก้ไขข้อมูลทางด้านเทคนิคใด ๆ ที่ไม่ถูกต้องและ / หรือเพิ่มข้อมูลใด ๆ ที่สำคัญที่ขาดหายไป</font></font></font></font></li> + <li><font><font><font><font>ป้อน</font></font></font></font><strong><font><font><font><font>Revision </font></font></font></font></strong><font><font><font><font>ๆ ที่อธิบายถึงสิ่งที่คุณทำ เช่น </font></font></font></font><font><font><font><font>ๆ </font></font></font><font><font><font>qualfied ในการตรวจสอบ</font></font></font></font></li> + <li><font><font><font><font>ยกเลิกการเลือก</font></font></font><strong><font><font><font>เทคนิค</font></font></font></strong><font><font><font>กล่องใต้</font></font></font><strong><font><font><font>ทบทวนจำเป็น?</font></font></font></strong><font><font><font>เพียงด้านล่างพื้นที่แสดงความคิดเห็นการทบทวนของหน้า</font></font></font></font><em> </em></li> + <li><font><font><font><font>ที่คลิก</font></font></font></font><strong><font><font><font><font>เผยแพร่</font></font></font></font></strong><font><font><font><font>ปุ่ม</font></font></font></font></li> + </ol> + </li> + </ol> + + <p><font><font><font><font>ขอแสดงความยินดี! </font></font></font><font><font><font>คุณเสร็จสิ้นการตรวจสอบทางเทคนิคครั้งแรกของคุณ! </font></font></font><font><font><font>ขอขอบคุณสำหรับความช่วยเหลือของคุณ!</font></font></font></font></p> + </dd> +</dl> diff --git a/files/th/mdn/contribute/howto/index.html b/files/th/mdn/contribute/howto/index.html new file mode 100644 index 0000000000..08734f5092 --- /dev/null +++ b/files/th/mdn/contribute/howto/index.html @@ -0,0 +1,15 @@ +--- +title: How-to guides +slug: MDN/Contribute/Howto +tags: + - Landing + - MDN Meta + - NeedsTranslation + - TopicStub +translation_of: MDN/Contribute/Howto +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p>These articles provide step-by-step guides to accomplishing specific goals when contributing to MDN.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/th/mdn/contribute/index.html b/files/th/mdn/contribute/index.html new file mode 100644 index 0000000000..0d83cb13a9 --- /dev/null +++ b/files/th/mdn/contribute/index.html @@ -0,0 +1,92 @@ +--- +title: Contributing to MDN +slug: MDN/Contribute +tags: + - Documentation + - Guide + - Landing + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN/Contribute +--- +<div>{{MDNSidebar}}</div><p>Welcome! By visiting this page, you've taken the first step toward becoming a contributor to MDN. <span class="seoSummary">The guides here cover all aspects of contributing to MDN, including style guides, guides to using our editor and tools, and more.</span></p> +<div class="row topicpage-table"> + <div class="section"> + <h2 id="Contributor_guides">Contributor guides</h2> + <dl> + <dt> + <a href="/en-US/docs/MDN/Getting_started">Getting started</a></dt> + <dd> + A quick start guide to getting set up and making your first contribution.</dd> + <dt> + <a href="/en-US/docs/MDN/Contribute/Style_guide">Content and style guide</a></dt> + <dd> + The MDN content and style guide provides details about writing style, page layout, and content styles, so that the content you write fits in with the rest of MDN's content.</dd> + <dt> + <a href="/en-US/docs/MDN/Contribute/Editor">Editor guide</a></dt> + <dd> + A complete guide to using MDN's editor.</dd> + <dt> + <a href="/en-US/docs/MDN/Contribute/Reviewing_articles">Reviewing articles</a></dt> + <dd> + A guide to performing technical and editorial reviews of articles' content, to help us ensure that all content on MDN is as useful and readable as can be!</dd> + <dt> + <a href="/en-US/docs/MDN/Contribute/Conventions">Terminology and conventions</a></dt> + <dd> + Our terminology and conventions guide provides information you can use to ensure that you use the correct terminology to describe things.</dd> + <dt> + <a href="/en-US/docs/MDN/Contribute/Community">Working with the MDN community</a></dt> + <dd> + A guide to working with our community, finding help, and connecting with the people with the answers to the questions that arise while you contribute to MDN.</dd> + <dt> + <a href="/en-US/docs/MDN/Contribute/FAQ">Frequently asked questions</a></dt> + <dd> + Tips and answers to the most common questions about contributing to MDN.</dd> + </dl> + <dl> + <dt> + <a href="/en-US/docs/MDN/Contribute/Kuma">Contributing to Kuma</a></dt> + <dd> + A guide to contributing to the Kuma project. Kuma is the platform that powers the MDN Web site.</dd> + </dl> + </div> + <div class="section"> + <h2 id="How_to...">How to...</h2> + <p>Our <a href="/en-US/docs/MDN/Contribute/Howto">how-to guides</a> provide step-by-step instructions to help you accomplish specific tasks when contributing to MDN.</p> + <dl> + <dt> + <a href="/en-US/docs/MDN/Contribute/Howto/Document_a_CSS_property">How to document a CSS property</a></dt> + <dd> + A guide to writing documentation of CSS properties. All CSS property documents should match the style and layout described in this article.</dd> + <dt> + How to document an HTML element</dt> + <dd> + This guide to documenting HTML elements will ensure that the documents you write match others on MDN.</dd> + <dt> + <a href="/en-US/docs/MDN/Contribute/Howto/Tag">How to properly tag pages</a></dt> + <dd> + This guide to tagging pages provides information about our standards for tagging, including lists of tags that have standard meanings on MDN. Following this guide will ensure that your content is properly categorized, more easily searchable, and that our search filtering mechanism works properly with your articles.</dd> + <dt> + <a href="/en-US/docs/MDN/Contribute/Howto/Interpret_specifications">How to interpret specifications</a></dt> + <dd> + This guide will help you to properly interpret standard Web specifications; being able to read these can be an art form, and knowing how to do it will help you produce better documentation.</dd> + </dl> + <h2 id="Localization">Localization</h2> + <dl> + <dt> + <a href="/en-US/docs/MDN/Contribute/Localize/Tour">Localization guided tour</a></dt> + <dd> + This guided tour will teach you how to localize content on MDN.</dd> + <dt> + <a href="/en-US/docs/MDN/Contribute/Localize/Guide">Localization guide</a></dt> + <dd> + This guide provides details about the localization process for MDN content.</dd> + <dt> + <a href="/en-US/docs/MDN/Contribute/Localize/Localization_projects">Localization projects</a></dt> + <dd> + Find the localization project for your language—or, if there isn't one, learn how to start a new one!</dd> + </dl> + </div> +</div> +<p> </p> diff --git a/files/th/mdn/contribute/localize/index.html b/files/th/mdn/contribute/localize/index.html new file mode 100644 index 0000000000..ed2a2577cd --- /dev/null +++ b/files/th/mdn/contribute/localize/index.html @@ -0,0 +1,29 @@ +--- +title: Localizing MDN +slug: MDN/Contribute/Localize +tags: + - Documentation + - Localization + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN/Contribute/Localize +--- +<div>{{MDNSidebar}}</div><p>MDN is used by people all over the world as a reference and guide to Web technologies, as well as to the internals of Firefox itself. Our localization communities are a key part of the Mozilla project; their work in translating and localizing our documentation helps people around the world develop for the open Web. If you'd like to learn more about our localization teams, join one of the teams, or even start a new localization, this is the place to begin.</p> +<p>{{LandingPageListSubpages}}</p> +<h2 id="Localization_tools">Localization tools</h2> +<p>There are several useful tools that you'll use during localization work:</p> +<dl> + <dt> + <a href="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim" title="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim">Verbatim</a></dt> + <dd> + Used for translation of strings across multiple Mozilla projects, including the MDN user interface (as well as the Firefox user interface).</dd> + <dt> + <a href="http://transvision.mozfr.org/" title="http://transvision.mozfr.org/">Transvision</a></dt> + <dd> + A utility provided by Mozilla France, which lets you search for occurrences of an English string, finding all the various translations into a target locale that are used throughout Mozilla code. Useful for finding the preferred translations for words or phrases.</dd> +</dl> +<h2 id="See_also">See also</h2> +<ul> + <li><a href="/en-US/docs/Mozilla/Localization" title="/en-US/docs/Mozilla/Localization">Localization at Mozilla</a></li> +</ul> diff --git a/files/th/mdn/contribute/localize/translating_pages/index.html b/files/th/mdn/contribute/localize/translating_pages/index.html new file mode 100644 index 0000000000..8185f639b3 --- /dev/null +++ b/files/th/mdn/contribute/localize/translating_pages/index.html @@ -0,0 +1,35 @@ +--- +title: การแปลหน้า MDN +slug: MDN/Contribute/Localize/Translating_pages +translation_of: MDN/Contribute/Localize/Translating_pages +--- +<div>{{MDNSidebar}}</div><p><span style="font-size: 14px; line-height: 1.5;">บทความนี้เป็นแนวทางพื้นฐานในการแปลเนื้อหาใน MDN รวมทั้งกลไกการทำงานของการแปลและเคล็ดลับเกี่ยวกับวิธีการที่เหมาะสมในการจัดการหลายประเภทของเนื้อหา</span></p> + +<h2 id="เริ่มต้นการแปลหน้าใหม่"><span class="short_text" id="result_box" lang="th"><span class="hps">เริ่มต้น</span><span>การแปล</span><span>หน้าใหม่</span></span></h2> + +<p><span id="result_box" lang="th"><span class="hps">เมื่อ</span><span>คุณเจอ</span><span>หน้า</span><span>คุณต้องการ</span><span>ที่จะแปล</span><span>เป็นภาษาของคุณ</span><span> โปรดทำตามขั้นตอน</span><span>เหล่านี้:</span></span></p> + +<ol> + <li>คลิกที่ <strong>Languages icon</strong> ({{FontAwesomeIcon("icon-globe")}})เพื่อเปิดเมนู <strong>Languages</strong> แล้วคลิก <strong>Add a Translation</strong>. หน้าเพจภาษาที่เลือกแปลจะปรากฎ.</li> + <li>Click the language that you want to translate the page into. The Translating Article view opens with the original language text displayed on the left side of the view.</li> + <li>Under <strong>Translate Description</strong>, you can translate the title and optionally the slug into the target language. The slug is the last part of the URL of a page (for example, "Translating_pages" for this article.) Some language communities do not translate the slug, keeping the same slug as English. Compare with other articles in your language to determine the common practice. You can click the minus sign next to <strong>Translate Description</strong> to hide this information when you are done with it, to make more room for the <strong>Translate Content</strong> section.</li> + <li>Under <strong>Translate Content</strong>, translate the body of the page.</li> + <li>Fill at least one <strong>tag</strong> for the page</li> + <li>Click <strong>Save Changes</strong> when you are done.</li> +</ol> + +<div class="note"><strong>Note:</strong> The user interface elements of the Translating Article view are initially shown in English. On subsequent visits to translate a particular article, the UI is shown in the appropriate language if a localization of MDN is available for that language. The MDN user interface can be localized using <a href="https://localize.mozilla.org/projects/mdn/" title="https://localize.mozilla.org/projects/mdn/">Verbatim</a>. See <a href="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim" title="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim">Localizing with Verbatim</a> for details on how to use this tool.</div> + +<h2 id="การแก้ไขหน้าการแปล"><span class="short_text" id="result_box" lang="th"><span class="hps">การแก้ไข</span><span>หน้า</span></span><span class="short_text" lang="th"><span>การแปล</span></span></h2> + +<ul> + <li>On a translated page, click the <strong>Edit</strong> button (sometimes labeled in the target language). The Translating Article view opens.</li> +</ul> + +<p>If the English version has been changed since the translation was last updated, the Translating Article view shows a source-level "diff" of the changes in the English version. This helps you see what needs to be updated in the translation.</p> + +<h2 id="แท็กการแปล">แท็กการแปล</h2> + +<p>It's important that each page is tagged with at least one tag. Even if this is translation.</p> + +<p>Some tags are used for search filters, or as conventions between contributors. They should not be translated. To know these tags, read the <a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards">tagging standards</a>. You are free to create translated tags to group content if this is not covered by one of the standards tags.</p> diff --git a/files/th/mdn/index.html b/files/th/mdn/index.html new file mode 100644 index 0000000000..d83d1544d8 --- /dev/null +++ b/files/th/mdn/index.html @@ -0,0 +1,39 @@ +--- +title: โครงการ MDN +slug: MDN +tags: + - Documentation + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN +--- +<div>{{MDNSidebar}}</div> + +<p><strong>MDN Web Docs</strong> is a wiki on which we document the open Web, Mozilla technologies, and other developer topics. Anyone is welcome to add and edit content. You don't need to be a programmer or know a lot about technology; there are many different tasks that need to be performed, from the simple (proof-reading and correcting typos) to the complex (writing API documentation).</p> + +<div class="summary"> +<p>The mission of MDN Web Docs is to provide <em>developers</em> with the <em>information</em> they need to <em>easily</em> build projects on the <em>web platform</em>. We invite you to help!</p> +</div> + +<p>We need your help! It's easy. Don't worry about asking for permission or about making mistakes. On the other hand, please get to know the <a href="/en-US/docs/MDN/Community" title="/en-US/docs/MDN/Community">MDN community</a>; we're here to help you! The documentation below should get you started, but don't hesitate to join the discussion in the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs chat room</a>.</p> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/MDN/Getting_started">Newcomer quick start</a></span> + + <p>Are you new to MDN and want to learn how to help make it better? Start here!</p> + </li> + <li><span><a href="/en-US/docs/MDN/Contribute">I'm an advanced user</a></span> + <p>Access our full, in-depth guide for MDN contributors to learn more once you've gotten comfortable.</p> + </li> + <li><span><a href="/en-US/docs/MDN/Promote">Spread the word</a></span> + <p>If you love MDN, help get the word out! Find art, tools, and guides for promoting MDN.</p> + </li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/MDN/Community">Join the MDN Community</a></li> + <li><a href="https://app.zenhub.com/workspace/o/mdn/sprints/boards?repos=121649843,55001853,70901646,134759439,90252175,1352520,3311772,82040629,121278372,33677290,132630865">Scrum board</a></li> +</ul> diff --git a/files/th/mdn_at_ten/index.html b/files/th/mdn_at_ten/index.html new file mode 100644 index 0000000000..9a47d2bcee --- /dev/null +++ b/files/th/mdn_at_ten/index.html @@ -0,0 +1,48 @@ +--- +title: MDN at 10 +slug: MDN_at_ten +translation_of: MDN_at_ten +--- +<p><span style="display: none;"> </span> </p> + +<p> </p> + +<p><span style="display: none;"> </span> </p> + +<div class="summary"><span class="seoSummary">Celebrate 10 years of documenting your Web.</span></div> + +<div class="column-container"> +<div class="column-8"> +<p> </p> + +<h2 id="The_history_of_MDN">The history of MDN</h2> + +<p>In early 2005, a small team of idealists set out to create a new, free, community-built online resource for all Web developers. Their brilliant but offbeat idea grew into today’s Mozilla Developer Network—the premier resource for all open Web technologies. Ten years later, our global community is bigger than ever, and together we’re still creating documentation, sample code and learning resources for all open Web technologies, including CSS, HTML, JavaScript and everything else that makes the open Web as powerful as it is.</p> + +<p><a class="learnmore" href="/en-US/docs/MDN_at_ten/History_of_MDN">Learn more <span class="offscreen">about the history</span></a></p> + +<p> </p> + +<h2 id="Contributing_to_MDN">Contributing to MDN</h2> + +<p>For ten years, the MDN community has been documenting the open Web. From fixing simple typos to writing entire suites of an entirely new API, everyone has something to offer and no contribution is too large or too small. We have over 90,000 pages of content that have been written or translated by members of our outstanding community of Mozillians. You can become one of them.</p> + +<p><a class="learnmore" href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">Learn more <span class="offscreen">about contributing</span></a></p> + +<p> </p> + +<p> </p> +</div> + +<div class="column-4">{{TenthCampaignQuote}}</div> + +<h2 id="Subnav">Subnav</h2> + +<ol> + <li><a href="/en-US/docs/MDN_at_ten/">MDN at 10</a></li> + <li><a href="/en-US/docs/MDN_at_ten/History_of_MDN">The history of MDN</a></li> + <li><a href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">Contributing to MDN</a></li> +</ol> +</div> + +<p> </p> diff --git a/files/th/mozilla/developer_guide/index.html b/files/th/mozilla/developer_guide/index.html new file mode 100644 index 0000000000..71002634d5 --- /dev/null +++ b/files/th/mozilla/developer_guide/index.html @@ -0,0 +1,151 @@ +--- +title: Developer guide +slug: Mozilla/Developer_guide +tags: + - Developing Mozilla + - Landing + - Mozilla + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Developer_guide +--- +<p><span class="seoSummary">There are lots of ways to contribute to the Mozilla project: coding, testing, improving the build process and tools, or contributing to the documentation. This guide provides information that will not only help you get started as a Mozilla contributor, but that you'll find handy to refer to even as an old hand.</span></p> +<div class="row topicpage-table"> + <div class="section"> + <h2 class="Documentation" id="Documentation_topics">Documentation topics</h2> + <dl> + <dt> + <a href="/en-US/docs/Introduction" title="Introduction">Getting Started</a></dt> + <dd> + A step-by-step beginner's guide to getting involved with Mozilla.</dd> + </dl> + <dl> + <dt> + <a class="internal" href="/en-US/docs/Developer_Guide/Source_Code" title="en-US/docs/Developer_Guide/Source_Code">Working with Mozilla Source Code</a></dt> + <dd> + A code overview, how to get the code, and the coding style guide.</dd> + <dt> + <a class="internal" href="/en-US/docs/Developer_Guide/Build_Instructions" title="en-US/docs/Developer_Guide/Build_Instructions">Build Instructions</a></dt> + <dd> + How to build Firefox, Thunderbird, SeaMonkey, or other Mozilla applications.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Development_process_overview" title="en-US/docs/Developer Guide/Development process overview">Development process overview</a></dt> + <dd> + An overview of the entire Mozilla development process.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Multiple_Firefox_Profiles" title="en-US/docs/Mozilla/Multiple_Firefox_Profiles">Managing multiple profiles</a></dt> + <dd> + When working with prerelease versions of Firefox, it's often helpful to have multiple Firefox profiles, such as one for each channel, or for different kinds of testing.</dd> + <dt> + <a class="internal" href="/en-US/docs/Mozilla_automated_testing" title="en-US/docs/Mozilla automated testing">Automated Testing</a></dt> + <dd> + How to run Mozilla's automated tests, and how to write new tests.</dd> + <dt> + <a class="internal" href="/en-US/docs/Developer_Guide/How_to_Submit_a_Patch" title="en-US/docs/Getting your patch in the tree">How to submit a patch</a></dt> + <dd> + After getting your patch written, you need to get it checked into the tree. This article explains the review process and how to get your patch approved.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Getting_documentation_updated" title="en-US/docs/Developer_Guide/Getting documentation updated">Getting documentation updated</a></dt> + <dd> + How to ensure that documentation is kept up to date as you develop.</dd> + <dt> + <a class="internal" href="/en-US/docs/Mozilla_Modules_and_Module_Ownership" title="en-US/docs/Mozilla Modules and Module Ownership">Mozilla modules and module ownership</a></dt> + <dd> + This article provides information about Mozilla's modules, what the role of a module owner is, and how module owners are selected.</dd> + <dt> + <a class="internal" href="/en-US/docs/Code_snippets" title="en-US/docs/Code_snippets">Code snippets</a></dt> + <dd> + Useful code samples for a wide variety of things you might need to figure out how to do.</dd> + <dt> + <a class="internal" href="/en-US/docs/Mozilla_Development_Strategies" title="en-US/docs/Mozilla Development Strategies">Mozilla development strategies</a></dt> + <dd> + Tips for how to make the most of your time working on the Mozilla project.</dd> + <dt> + <a class="internal" href="/en-US/docs/Debugging" title="en-US/docs/Debugging">Debugging</a></dt> + <dd> + Find helpful tips and guides for debugging Mozilla code.</dd> + <dt> + <a href="/en-US/docs/Performance" title="en-US/docs/Performance">Performance</a></dt> + <dd> + Performance guides and utilities to help you make your code perform well (and to play nicely with others).</dd> + <dt> + <a class="internal" href="/en-US/docs/The_Mozilla_platform" title="en-US/docs/The Mozilla platform">The Mozilla platform</a></dt> + <dd> + Information about the workings of the Mozilla platform.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Adding_APIs_to_the_navigator_object" title="en-US/docs/Developer_Guide/Adding_APIs_to_the_navigator_object">Adding APIs to the navigator object</a> {{ gecko_minversion_inline("9.0") }}</dt> + <dd> + How to augment the {{ domxref("window.navigator") }} object with additional APIs.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Interface_Compatibility" title="en-US/docs/Developer Guide/Interface Compatibility">Interface Compatibility</a></dt> + <dd> + Guidelines for modifying scriptable and binary APIs in Mozilla.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Customizing_Firefox" title="en-US/docs/Developer Guide/Customizing Firefox">Customizing Firefox</a></dt> + <dd> + Information about creating customized versions of Firefox.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Virtual_ARM_Linux_environment" title="Virtual ARM Linux environment">Virtual ARM Linux environment</a></dt> + <dd> + How to set up an ARM emulator running Linux for testing ARM-specific, but not necessarily platform-specific, code. Useful for mobile developers.</dd> + <dt> + <a href="/en-US/docs/Introduction/Obsolete_Build_Caveats_and_Tips" title="Obsolete Build Caveats and Tips">Obsolete Build Caveats and Tips</a></dt> + <dd> + A place to put build tips which are no longer relevant to building the latest version of the code from main but are relevant when building old codebases.</dd> + </dl> + </div> + <div class="section"> + <h2 class="Tools" id="Tools">Tools</h2> + <dl> + <dt> + <a class="link-https" href="https://bugzilla.mozilla.org/" title="https://bugzilla.mozilla.org/">Bugzilla</a></dt> + <dd> + The <a class="internal" href="/en-US/docs/Bugzilla" title="en-US/docs/Bugzilla">Bugzilla</a> database used to track issues for Mozilla projects.</dd> + <dt> + <a class="external" href="http://mxr.mozilla.org/" title="http://mxr.mozilla.org/">MXR</a></dt> + <dd> + Browse and search the Mozilla source code repository on the Web.</dd> + <dt> + <a href="http://dxr.mozilla.org/">DXR</a></dt> + <dd> + Next generation of searching Mozilla's source code. In active development.</dd> + <dt> + <a class="external" href="http://bonsai.mozilla.org/cvsqueryform.cgi" title="http://bonsai.mozilla.org/cvsqueryform.cgi">Bonsai</a></dt> + <dd> + The <a class="internal" href="/en-US/docs/Bonsai" title="en-US/docs/Bonsai">Bonsai</a> tool lets you find out who changed what file in the repository, and when they did it.</dd> + <dt> + <a class="internal" href="/en-US/docs/Mercurial" title="en-US/docs/Mercurial">Mercurial</a></dt> + <dd> + The distributed version-control system used to manage Mozilla's source code.</dd> + <dt> + <a class="external" href="https://tbpl.mozilla.org/" title="http://tinderbox.mozilla.org/showbuilds.cgi">TBPL (Tinderbox Push Log)</a></dt> + <dd> + <span class="internal">Tinderbox Push Log</span> shows the status of the tree (whether or not it currently builds successfully). Check this before checking in and out, to be sure you're working with a working tree.</dd> + <dt> + <a class="internal" href="/en-US/docs/Crash_reporting" title="en-US/docs/Crash reporting">Crash tracking</a></dt> + <dd> + Information about the <a class="link-https" href="https://crash-reports.mozilla.com/reports" title="https://crash-reports.mozilla.com/reports">Socorro</a> crash reporting system.</dd> + <dt> + <span class="external">Performance tracking: <a href="https://datazilla.mozilla.org/">Datazilla</a> and <a href="http://graphs.mozilla.org/">Graphs</a></span></dt> + <dd> + See performance information for Mozilla projects.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Callgraph" title="en-US/docs/Developing Mozilla/Callgraph">Callgraph</a></dt> + <dd> + A tool to help perform static analysis of the Mozilla code by generating callgraphs automatically.</dd> + <dt> + <a class="external" href="http://www.mozilla.org/community/developer-forums.html" title="http://www.mozilla.org/community/developer-forums.html">Developer forums</a></dt> + <dd> + A topic-specific list of discussion forums where you can talk about Mozilla development issues.</dd> + <dt> + <a class="external" href="http://www.codefirefox.com/cheatsheet/" title="http://www.brianbondy.com/mozilla/cheatsheet/">Mozilla Platform Development Cheat Sheet</a></dt> + <dd> + Brian Bondy's list of frequently referenced information for platform developers.</dd> + <dt> + <a class="external" href="http://www.codefirefox.com/videos/" title="http://www.brianbondy.com/mozilla/cheatsheet/">Firefox development video tutorials</a></dt> + <dd> + Brian Bondy's video tutorials on Firefox development.</dd> + </dl> + </div> +</div> +<p> </p> diff --git a/files/th/mozilla/firefox/index.html b/files/th/mozilla/firefox/index.html new file mode 100644 index 0000000000..4de7a09594 --- /dev/null +++ b/files/th/mozilla/firefox/index.html @@ -0,0 +1,67 @@ +--- +title: Firefox +slug: Mozilla/Firefox +tags: + - m +translation_of: Mozilla/Firefox +--- +<div>{{FirefoxSidebar}}</div> + +<p>0<a href="http://www.mozilla.org/en-US/firefox/new/" title="http://www.mozilla.org/en-US/products/download.html">Firefox</a> คือเว็บเบาร์เซอร์ยอดนิยมจากโมซิลล่า, เข้าถึงได้หลากหลายแฟลตฟอร์มร่วมด้วย GNU/Linux, Mac OS X และ บนวินโดวส์เดสก์ท็อป, รวมไปถึงบนโทรศัพท์มือถือแอนดรอยด์. ซึ่งเข้ากันได้กับเทคโนโลยีเว็บล่าสุด และ<a href="/en-US/docs/Tools">เครื่องมือพัฒนา</a>ที่มีสมรรถภาพสูง, Firefox เป็นเว็บเบราเซอร์ ที่ดีที่สุดสำหรับนักพัฒนาเว็บ และผู้ใช้งานทุกคน</p> + +<p>Firefox คือ โครงการ <span class="short_text" id="result_box" lang="th"><span class="hps">โอเพนซอร์ส </span></span>; โค้ดต่างๆมากมายถูกทำขึ้นโดย ชุมชนอาสาสมัครขนาดใหญ่ของเรา ที่นี่คุณจะได้เรียนรู้ การสร้างสรรค์และสนับสนุน โครงการจาก FireFox , แต่คุณยังสามารถค้นหาลิงค์ ข้อมูลเกี่ยวกับการสร้าง ส่วนเสริม บน FireFox ผ่านเครื่องมือพัฒนาใน FireFox และ อื่นๆ</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">เอกสาร add-on สำหรับนักพัฒนา</h2> + +<dl> + <dt><a href="/en-US/add-ons">ส่วนเสริม</a></dt> + <dd>เอกสารทั้งหมด เกี่ยวกับการสร้าง ส่วนเสริม สำหรับ FireFox</dd> + <dt><a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/">ส่วนเสริม SDK</a></dt> + <dd>Firefox SDK คือทางเลือกใหม่, มีสมรรถภาพสูง, และง่ายกว่าเก่า ในการใช้ SDK สำหรับ การสร้างส่วนขยายของ FireFox คุณควรลองใช้สิ่งนี้แทน ส่วนเสริม แบบเก่าถ้าเป็นไปได้</dd> + <dt><a href="/en-US/docs/Extensions" title="/en-US/docs/Extensions">ส่วนขยาย</a></dt> + <dd>เอกสาร สำหรับผู้พัฒนาส่วนขยายของ FireFox</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox/Releases" title="/en-US/docs/Mozilla/Firefox/Releases">จดหมายเปิดผนึกสำหรับนักพัฒนา</a></dt> + <dd>แต่ละจดหมายที่ถูกเปิดผนึก จะมาพร้อมกับข้อมูล คุณลักษณะใหม่ๆ และสร้างการเปลี่ยนแปลงต่อนักพัฒนาทุกสาย เช็คจดหมายของเรา เหล่านักพัฒนากัน!</dd> +</dl> + +<p>i<span class="alllinks"><a href="/en-US/docs/tag/Addons">ดูทั้งหมด.....</a></span></p> + +<h2 class="Documentation" id="Docs_for_Firefox_developers" name="Docs_for_Firefox_developers">เอกสารสำหรับ นักพัฒนา FireFox</h2> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Firefox/Releases" title="/en-US/docs/Mozilla/Firefox/Releases">จดหมายเปิดผนึกสำหรับนักพัฒนา</a></dt> + <dd>แต่ละจดหมายที่ถูกเปิดผนึก จะมาพร้อมกับข้อมูล คุณลักษณะใหม่ๆ และสร้างการเปลี่ยนแปลงต่อนักพัฒนาทุกสาย เช็คจดหมายของเรา เหล่านักพัฒนากัน!</dd> + <dt><a href="/en-US/docs/Developer_Guide" title="/en-US/docs/Developer_Guide">แนะแนวทางสำหรับ ผู้พัฒนา</a></dt> + <dd>แนวทางนักพัฒนาของโมซิลล่า; ทำความเข้าใจกับข้อมูล-เอกสาร สำหรับการเข้าร่วมและเป็นส่วนหนึ่ง ในโครงการของโมซิลล่า</dd> + <dt><a href="/en-US/docs/Mozilla" title="/en-US/docs/Mozilla">เอกสารโครงการ โมซิลล่า</a></dt> + <dd>โครงการของโมซิลล่า เป็นโครงการใหญ่และซับซ้อน ; ตรวจสอบเอกสารทั้งหมดของทุกๆโครงการ</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Firefox">ดูทั้งหมด...</a></span></p> +</div> + +<div class="section"> +<h2 class="Community" id="Community" name="Community">ชุมชนนักพัฒนา FireFox</h2> + +<p>คุณเป็นนักพัฒนาของ FireFox ใช่ใหม? คุณต้องการจะเป็นใช่ใหม?</p> + +<ul> + <li>ถามคำถามของคุณบนช่องโมซิลล่า IRC : <a class="link-irc" href="irc://irc.mozilla.org/developers">#นักพัฒนา</a></li> +</ul> + +<dl> + <dt><a href="https://mail.mozilla.com/home/akeybl@mozilla.com/Release%20Management.html" title="https://mail.mozilla.com/home/akeybl@mozilla.com/Release%20Management.html">ปฏิทินใหม่</a></dt> + <dd>Firefox ได้พัฒนาเสร็จตามตารางเวลา 6 สัปดาห์ ; นี่คือรุ่นใหม่ ที่ถูกปล่อยออกมาทุกๆ 6 สัปดาห์ ตรวจสอบตารางเวลาของเรา, หรือ <a href="https://mail.mozilla.com/home/akeybl@mozilla.com/Release%20Management.ics" title="https://mail.mozilla.com/home/akeybl@mozilla.com/Release%20Management.ics">หรือลงชื่อติดตามปฏิทิน iCal</a></dd> +</dl> + +<p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html"><em>อย่าลืมสำหรับ มรรยาทของชุมชน</em>...</a></span></p> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">หัวข้อที่เกี่ยวข้อง</h2> + +<ul> + <li><a href="/en-US/docs/XUL" title="XUL">XUL</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>, <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a>, <a href="/en-US/themes">ธีม</a>, <a href="/en-US/docs/Developer_Guide" title="Developing_Mozilla">การพัฒนา โมซิลล่า</a>, <a href="/en-US/docs/Extensions" title="Extensions">ส่วนขยาย</a></li> +</ul> +</div> +</div> diff --git a/files/th/mozilla/firefox/privacy/index.html b/files/th/mozilla/firefox/privacy/index.html new file mode 100644 index 0000000000..b1d032e685 --- /dev/null +++ b/files/th/mozilla/firefox/privacy/index.html @@ -0,0 +1,16 @@ +--- +title: Privacy +slug: Mozilla/Firefox/Privacy +tags: + - NeedsTranslation + - Privacy + - Security + - TopicStub +translation_of: Mozilla/Firefox/Privacy +--- +<div>{{FirefoxSidebar}}</div><p>{{ ListSubpages () }}</p> + +<ul> + <li><a href="https://support.mozilla.org/en-US/products/firefox/privacy-and-security">Privacy and security settings</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web Security</a></li> +</ul> diff --git a/files/th/mozilla/firefox/privacy/tracking_protection/index.html b/files/th/mozilla/firefox/privacy/tracking_protection/index.html new file mode 100644 index 0000000000..371f3e9873 --- /dev/null +++ b/files/th/mozilla/firefox/privacy/tracking_protection/index.html @@ -0,0 +1,74 @@ +--- +title: Tracking Protection +slug: Mozilla/Firefox/Privacy/Tracking_Protection +translation_of: Mozilla/Firefox/Privacy/Tracking_Protection +--- +<div>{{FirefoxSidebar}}</div><h2 id="What_is_tracking_protection">What is tracking protection?</h2> + +<p>Starting in version 42, Firefox Desktop and Firefox for Android include built-in tracking protection. In Private Browsing windows (tabs, in Firefox for Android), Firefox will block content loaded from domains that track users across sites.</p> + +<p>Some blocked content is part of the page layout, and users may notice layout issues where Firefox blocked these loads. Sometimes users won’t notice at all, if the page grid works such that other page elements slide in to fill holes left by blocked elements.</p> + +<p>When Firefox blocks content, it will log a message to the Web Console like this:</p> + +<pre>The resource at "http://some/url" was blocked because tracking protection is enabled.</pre> + +<p>Note that with Firefox for Android, you can access console output using the remote debugger.</p> + +<p>The Firefox UI will indicate to users when content has been blocked and enable them to unblock it for the current session if they choose. Users will also be able to disable tracking protection entirely if they choose.</p> + +<h2 id="How_does_Firefox_choose_what_to_block">How does Firefox choose what to block?</h2> + +<p>Content is blocked based on the domain from which it is to be loaded.</p> + +<p>Firefox will ship with a list of sites which have been identified as engaging in cross-site tracking of users. When tracking protection is enabled, Firefox will block content from sites in the list.</p> + +<p>Sites that track users are most commonly third-party advertising and analytics sites.</p> + +<h2 id="What_does_this_mean_for_your_website">What does this mean for your website?</h2> + +<p>Most obviously, it means that when tracking protection is enabled:</p> + +<ul> + <li>content served from third-party trackers will not be visible to users</li> + <li>your site won't be able to use third-party advertising or analytics services that engage in tracking</li> +</ul> + +<p>More subtly, if other parts of your site depend on trackers being loaded, then these parts will also be broken when tracking protection is enabled. For example, if your site includes a callback that runs when content from a tracking site is loaded, then the callback will not execute.</p> + +<p>For example, you should not use Google Analytics in the following way:</p> + +<pre class="brush:html example-bad"><a href="http://www.example.com" onclick="trackLink('http://www.example.com', event);">Visit example.com</a> +<script> +function trackLink(url,event) { + event.preventDefault(); + ga('send', 'event', 'outbound', 'click', url, { + 'transport': 'beacon', + 'hitCallback': function() { + document.location = url; + } + }); +} +</script></pre> + +<p>Instead, you should account for the case when Google Analytics is missing by checking to see if the ga object has initialized:</p> + +<pre class="brush:html example-good"><a href="http://www.example.com" onclick="trackLink('http://www.example.com', event);">Visit example.com</a> +<script> +function trackLink(url,event) { + event.preventDefault(); + if (window.ga && <span class="pl-smi">ga</span>.loaded) { + ga('send', 'event', 'outbound', 'click', url, { + 'transport': 'beacon', + 'hitCallback': function() { document.location = url; } + }); + } else { + document.location = url; + } +} +</script> +</pre> + +<p>More information about this technique is available at <a href="https://hacks.mozilla.org/2016/01/google-analytics-privacy-and-event-tracking/">Google Analytics, Privacy, and Event Tracking</a>.</p> + +<p>Note that depending on a third party in this way is not a good practice anyway, as it means your site can be broken if the third party is slow or unavailable, or if the tracker is blocked by an add-on.</p> diff --git a/files/th/mozilla/firefox/เปิดผนึก/30/index.html b/files/th/mozilla/firefox/เปิดผนึก/30/index.html new file mode 100644 index 0000000000..cd3dead3ee --- /dev/null +++ b/files/th/mozilla/firefox/เปิดผนึก/30/index.html @@ -0,0 +1,65 @@ +--- +title: Firefox 30 for developers +slug: Mozilla/Firefox/เปิดผนึก/30 +translation_of: Mozilla/Firefox/Releases/30 +--- +<div>{{FirefoxSidebar}}</div><p>Want to help document Firefox 30? See the <a class="external" href="http://beta.elchi3.de/doctracker/#list=fx&version=30.0">list of bugs that need to be written about</a> and pitch in!</p> +<h2 id="Changes_for_Web_developers">Changes for Web developers</h2> +<h3 id="Developer_Tools">Developer Tools</h3> +<ul> + <li>A Box Model Highlighter has been implemented ({{bug(663778)}}).</li> + <li>Anywhere a DOM node appears in the console output, it is highlighted when you hover over that console output ({{bug(757866)}}). Similarly all JS functions and objects are highlighted in the console output ({{bug(584733)}}). More information about the console improvement can be found in this <a href="http://www.robodesign.ro/mihai/blog/web-console-improvements-episode-30">blog post</a>.</li> + <li>Support for {{domxref("Console.count()")}} has been added ({{bug(922208)}}).</li> +</ul> +<h3 id="CSS">CSS</h3> +<ul> + <li>The property {{cssxref("background-blend-mode")}} has been enabled by default ({{bug(970600)}}).</li> + <li>The non-standard {{cssxref("overflow-clip-box")}} property has been implemented for use in UA stylesheets only ({{bug(966992)}}).</li> + <li>The {{cssxref("line-height")}} property now affects single-line text inputs (<code><input type=text|password|email|search|tel|url|unknown></code> types) although it cannot shrink them below a line height of <code>1.0</code> ({{bug(349259)}}).</li> + <li>The {{cssxref("line-height")}} property now also affects <code>type=button</code>, with no restrictions ({{bug(697451)}}).</li> + <li>Change to keyframes' name does not affect current elements ({{bug(978648)}}).</li> +</ul> +<h3 id="HTML">HTML</h3> +<p><em>No change.</em></p> +<h3 id="JavaScript">JavaScript</h3> +<ul> + <li>New ES6-compatible <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">array comprehensions</a> <code>[for (item of iterable) item]</code> and <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Generator_comprehensions">generator comprehensions</a> <code>(for (item of iterable) item)</code> have been implemented ({{bug(979865)}}).</li> + <li>Typed arrays are now extensible and support new named properties ({{bug(695438)}}).</li> + <li>The {{jsxref("Error.prototype.stack")}} property now contains column numbers ({{bug(762556)}}) and has been improved <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/Stack#Stack_of_eval'ed_code">when using <code>Function()</code> and <code>eval()</code> calls</a>. This can help you to better debug minified or generated JavaScript code.</li> +</ul> +<h3 id="InterfacesAPIsDOM">Interfaces/APIs/DOM</h3> +<ul> + <li>{{domxref("Navigator.sendBeacon")}} has been implemented, easing telemetry collection ({{bug(936340)}}).</li> + <li>Added a <code>relList</code> property returning a {{domxref("DOMTokenList")}} to {{domxref("HTMLLinkElement")}}, {{domxref("HTMLAreaElement")}} and {{domxref("HTMLAnchorElement")}} ({{bug(968637)}}).</li> + <li>As per the latest specification, the first argument of {{domxref("OscillatorNode.start")}} and {{domxref("OscillatorNode.stop")}} is now optional and defaults to <code>0</code> ({{bug(982541)}}).</li> + <li>The method {{domxref("Navigator.requestWakeLock()")}} and the non-standard {{domxref("MozWakeLock")}} are no longer available from the Web on Desktop ({{bug(963366)}}).</li> + <li>The <code>DOM_VK_ENTER</code> constant has been removed from {{domxref("KeyboardEvent")}} ({{bug(969247)}}).</li> + <li>Web components' {{domxref("Document.register")}} has been adapted to follow the behavior described in the latest version of the specification ({{bug(856140)}}).</li> + <li>Basic support for Hit regions on canvas has been added: the methods {{domxref("CanvasRenderingContext2D.addHitRegion()")}} and {{domxref("CanvasRenderingContext2D.removeHitRegion()")}} have been added. These are disabled by default; to activate them set the preference <code>canvas.hitregions.enabled</code> to <code>true</code>. ({{bug(966591)}})</li> + <li>The non-standard, and deprecated since Firefox 15, {{domxref("Blob.mozSlice")}} is no longer supported ({{bug(961804)}}).</li> + <li>The non-standard {{domxref("ArchiveReader")}} and {{domxref("ArchiveRequest")}} are no longer exposed to the Web ({{bug(968883)}}).</li> + <li><a href="http://dxr.mozilla.org/mozilla-central/source/dom/webidl/">WebIDL constructors</a> cannot be called as functions anymore. They need to be preceded by the keyword <code>new</code>. ({{bug(916644)}})</li> + <li>Added support for a new value (<code>alpha</code>) for the second, optional, parameter of the {{domxref("Canvas.getContext()")}} method allowing to define if alpha blending must be stored or not for this context. When not, the per-pixel alpha value in this store is always <code>1.0</code>. This allows the back-end to implement a fast-track. ({{bug(982480)}})</li> +</ul> +<h3 id="MathML">MathML</h3> +<p><em>No change.</em></p> +<h3 id="SVG">SVG</h3> +<ul> + <li>{{SVGElement("feDropShadow")}}, and its interface {{domxref("SVGFEDropShadowElement")}}, from the Filter Effects Module are now supported ({{bug(964200)}}).</li> +</ul> +<h3 id="AudioVideo">Audio/Video</h3> +<ul> + <li>On Linux, Gstreamer 1.0 is now supported (instead of 0.10) ({{bug(806917)}}).</li> +</ul> +<h2 id="Security">Security</h2> +<p><em>No change.</em></p> +<h2 id="Changes_for_add-on_and_Mozilla_developers">Changes for add-on and Mozilla developers</h2> +<ul> + <li>The interface <code>nsIDOMWindowUtils</code> now supports the Boolean attribute <code>audioMuted</code> and <code>audioVolume</code>, a float in the range <code>[0.0</code> , <code>1.0]</code>, allowing to control the sound produced by a window (that is any tab or iframe). There is no UI for this, but is available to add-ons. ({{bug(923247)}})</li> +</ul> +<h2 id="See_also">See also</h2> +<ul> + <li><a href="/en-US/docs/Mozilla/Firefox/Releases/30/Site_Compatibility">Site Compatibility for Firefox 30</a></li> +</ul> +<h3 id="Older_versions">Older versions</h3> +<p>{{Firefox_for_developers('29')}}</p> diff --git a/files/th/mozilla/firefox/เปิดผนึก/47/index.html b/files/th/mozilla/firefox/เปิดผนึก/47/index.html new file mode 100644 index 0000000000..e827aa2ea2 --- /dev/null +++ b/files/th/mozilla/firefox/เปิดผนึก/47/index.html @@ -0,0 +1,174 @@ +--- +title: Firefox 47 for developers +slug: Mozilla/Firefox/เปิดผนึก/47 +translation_of: Mozilla/Firefox/Releases/47 +--- +<div>{{FirefoxSidebar}}</div><p><a href="https://www.mozilla.org/firefox/developer/" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">To test the latest developer features of Firefox,<br> + install Firefox Developer Edition</a>Firefox 47 was released on June 6, 2016. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.</p> + +<h2 id="Changes_for_Web_developers">Changes for Web developers</h2> + +<h3 id="Developer_Tools">Developer Tools</h3> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Browser_detection_using_the_user_agent">User-agent spoofing</a> from the <a href="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode">Responsive mode</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Memory/Dominators_view#Retaining_Paths_panel">Retaining paths panel</a> in memory tool</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker">Service workers</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API">Push API</a> debugging + <ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/about:debugging">about:debugging</a> dashboard for workers</li> + <li>Cached requests are now shown in <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor">Network Monitor</a></li> + <li>Support for <a href="https://developer.mozilla.org/en-US/docs/Web/API/Cache">cache storage</a> in <a href="https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a></li> + </ul> + </li> + <li>Ability to filter <a href="https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a> entries</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Console</a> now detects incomplete input and switches multi-line mode</li> + <li>Updated breakpoint style in <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger">Debugger</a></li> + <li>Prevent panels from hiding automatically using the <a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a>, to aid browser and add-on debugging</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour#Fonts_view">Font inspector</a> has been disabled by default</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/3D_View">3D view</a> has been removed</li> + <li>Developer tools theme refresh</li> + <li>Disable the Font Panel ({{bug(1247723)}}).</li> +</ul> + +<h3 id="HTML">HTML</h3> + +<p><em>No change.</em></p> + +<h3 id="CSS">CSS</h3> + +<ul> + <li>Support for the {{cssxref("::backdrop")}} pseudo-element has been added ({{bug(1064843)}}).</li> + <li>The case-insensitive modifier <code>i</code> (like in <code>[foo=bar i]</code>) for <a href="/en-US/docs/Web/CSS/Attribute_selectors">attribute selectors</a> has been implemented ({{bug(888190)}}).</li> + <li>An experimental implementation of CSS Mask Image properties landed. For the moment, this will only be available on Nightly versions of Firefox.y: shorthand version of {{cssxref("mask")}}, as well as {{cssxref("mask-repeat")}}, {{cssxref("mask-position")}}, {{cssxref("mask-size")}} are now available ({{bug(686281)}}).</li> + <li>The {{cssxref("clip-path")}} property now experimentally supports <code>polygon()</code>, <code>ellipse()</code>, and <code>circle()</code> on HTML elements (does not support <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1246762">inset()</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1246764">path()</a>), behind the pref <code>layout.css.clip-path-shapes.enabled</code> that defaults to <code>false</code> ({{bug(1075457)}}). Interpolation (and therefore animation) of these values is not yet supported.</li> + <li>Our still experimental grid implementation has been updated: + <ul> + <li>{{cssxref("align-content")}}: <code>normal</code> behaves now as <code>stretch</code> for grid containers ({{bug(1237754)}}).</li> + <li>The order of column/row values for {{cssxref('grid')}}, {{cssxref('grid-template')}}, and {{cssxref('grid-gap')}} properties has been swapped ({{bug(1251999)}}).</li> + </ul> + </li> + <li>The {{cssxref("@media/display-mode", "display-mode")}} media feature is now supported ({{bug("1104916")}}).</li> + <li>The value <code>true</code> of {{cssxref("text-align")}} and {{cssxref("text-align-last")}} has been renamed to <code>unsafe</code> ({{bug("1250342")}}).</li> +</ul> + +<h3 id="JavaScript">JavaScript</h3> + +<ul> + <li>The new ES2017 {{jsxref("Object.values()")}} and {{jsxref("Object.entries()")}} methods have been implemented ({{bug(1232639)}}).</li> + <li>The deprecated <a href="/en-US/docs/Archive/Web/Old_Proxy_API">old Proxy API</a> (<code>Proxy.create</code> and <code>Proxy.createFunction</code>) now presents a deprecation warning in the console and will be removed in a future version. Use the standard {{jsxref("Proxy")}} object instead ({{bug(892903)}}).</li> + <li>Support for the deprecated non-standard <code>flags</code> argument of <code>String.prototype.</code>{{jsxref("String.prototype.match", "match")}}/{{jsxref("String.prototype.search", "search")}}/{{jsxref("String.prototype.replace", "replace")}} has been dropped in non-release builds ({{bug(1245801)}}).</li> + <li>As per the new ES2016 specification, the {{jsxref("Proxy")}} <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/enumerate">enumerate</a> trap for <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> statements has been removed ({{bug(1246318)}}).</li> + <li>The {{jsxref("Array.prototype.indexOf()")}} and {{jsxref("Array.prototype.lastIndexOf()")}} methods (and their {{jsxref("TypedArray")}} equivalents) have been updated to never return <code>-0</code> as per the ECMAScript specification ({{bug(1242043)}}).</li> +</ul> + +<h3 id="InterfacesAPIsDOM">Interfaces/APIs/DOM</h3> + +<h4 id="DOM_HTML_DOM">DOM & HTML DOM</h4> + +<ul> + <li>The property {{domxref("Document.scrollingElement")}} has been implemented behind the pref <code>dom.document.scrollingElement.enabled</code> that defaults to <code>false</code> ({{bug(1153322)}}).</li> +</ul> + +<h4 id="WebGL">WebGL</h4> + +<p><em>No change.</em></p> + +<h4 id="IndexedDB">IndexedDB</h4> + +<ul> + <li>The {{domxref("IDBKeyRange.includes()")}} method has been implemented ({{bug("1251498")}}).</li> +</ul> + +<h4 id="Service_Worker_and_related_APIs">Service Worker and related APIs</h4> + +<ul> + <li>The {{domxref("Request.Request()")}} constructor can now accept a referrer option in its init object ({{bug(1251448)}}).</li> + <li>The {{domxref("Request.referrerPolicy")}} property is now supported ({{bug(1251872)}}).</li> + <li> + <p><a href="/en-US/docs/Web/API/Service_Worker_API">Service workers</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API">Push</a> have been disabled in the <a class="external external-icon" href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR) ({{bug(1232029)}}).</p> + </li> +</ul> + +<h4 id="WebRTC">WebRTC</h4> + +<ul> + <li>Support for the {{domxref("RTCIceServer")}} dictionary has been updated in keeping with revisions to the WebGL 1.0 specification by adding support for the {{domxref("RTCIceServer.credentialType", "credentialType")}} property. This property is a string which specifies whether the credential is a password or a token. Currently, Firefox only supports <code>"password"</code>.</li> +</ul> + +<h4 id="New_APIs">New APIs</h4> + +<p><em>No change.</em></p> + +<h4 id="Others">Others</h4> + +<ul> + <li>{{domxref("Cache.add()")}} and {{domxref("Cache.addAll()")}} now raises a <code>TypeError</code> exception if the response status is not in the <code>200</code> range ({{bug(1244764)}}).</li> + <li>The <a href="/en-US/docs/Mozilla/Firefox_OS/API/App_installation_and_management_APIs">App installation and management APIs</a> (<code>navigator.mozApps.*</code>) are no longer exposed to non-Firefox OS platforms ({{bug("1238576")}}).</li> + <li><a href="/en-US/docs/Web/API/Web_Crypto_API">Web Crypto API</a> methods can now use the RSA-PSS cryptographic algorithm ({{bug (1191936)}}).</li> + <li>The <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a> has had the {{domxref("Permissions.revoke()")}} method added ({{bug("1197461")}}).</li> + <li>The <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>, which extends the functionality of {{htmlelement("iframe")}}s to allow the creation of frames for displaying web content using HTML — and was previously only available in Firefox OS — is now available to desktop chrome code too ({{bug(1238160)}}).</li> + <li>The <a href="/en-US/docs/Web/API/notification">Notification API</a>'s {{domxref("Notification.requestPermission()","requestPermission()")}} method has been updated from a callback to a promised-based syntax ({{bug(1241278)}}).</li> + <li>The <a href="/en-US/docs/Web/API/Fullscreen_API">Fullscreen API</a> has been updated to the latest spec and unprefixed. Some methods have been renamed or have seen their capitalization changed ({{bug(743198)}}). Note that this is behind the <code>full-screen-api.unprefix.enabled</code> preference, defaulting to false ({{bug(1268749)}}).</li> +</ul> + +<h3 id="AudioVideo">Audio/Video</h3> + +<ul> + <li>Now WAV file with u-law compression encoding can be played({{bug(851530)}}).</li> + <li><a href="https://www.widevine.com/">Widevine</a> Content Decryption Module provided by Google Inc. is available via the <a href="/en-US/docs/Web/API/Encrypted_Media_Extensions_API">Encrypted Media Extensions API</a> for use with MP4 (only; see {{bug(1257716)}} for EME-with-WebM support) on Windows Vista and later and on Mac OS X enabling migration off Silverlight ({{bug(1265270)}}).</li> +</ul> + +<h2 id="HTTP">HTTP</h2> + +<ul> + <li>The default value of the {{HTTPHeader("Accept")}} header for images is now <code>*/*</code> instead of <code>image/png,image/*;q=0.8,*/*;q=0.5</code> ({{bug(1249474)}}).</li> +</ul> + +<h2 id="Networking">Networking</h2> + +<p><em>No change.</em></p> + +<h2 id="Security">Security</h2> + +<ul> + <li>URL with the <code>view-source:</code> protocol don't open the <a href="/en-US/docs/Tools/View_source">View Source</a> tool anymore when used from a Web page ({{bug(1172165)}}).</li> + <li>The Firefox <a href="https://blog.mozilla.org/futurereleases/2013/09/24/plugin-activation-in-firefox/">click-to-activate plugin whitelist</a> has been removed: only Flash doesn't need to be clicked to be activated ({{bug(1263630)}}).</li> +</ul> + +<h2 id="Changes_for_add-on_and_Mozilla_developers">Changes for add-on and Mozilla developers</h2> + +<h3 id="Interfaces">Interfaces</h3> + +<ul> + <li>The CSS tokenizer is now available in JavaScript for add-ons ({{bug(1152033)}}).</li> +</ul> + +<h3 id="FUEL">FUEL</h3> + +<p>The <a href="/en-US/docs/Mozilla/Tech/Toolkit_API/FUEL">FUEL</a> JavaScript library, introduced back in Firefox 3, <strong>has been removed</strong>. This library was designed to aid in add-on development and with the introduction of the <a href="/en-US/docs/Mozilla/Add-ons/SDK">Add-on SDK</a> and, now, by <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> support, is no longer useful. ({{bug(1090880)}})</p> + +<h3 id="XUL">XUL</h3> + +<p><em>No change.</em></p> + +<h3 id="JavaScript_code_modules">JavaScript code modules</h3> + +<p><em>No change.</em></p> + +<h3 id="XPCOM">XPCOM</h3> + +<p><em>No change.</em></p> + +<h3 id="Other">Other</h3> + +<p><em>No change.</em></p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://www.fxsitecompat.com/en-US/versions/47">Site Compatibility for Firefox 47</a></li> +</ul> + +<h2 id="Older_versions">Older versions</h2> + +<p>{{Firefox_for_developers(46)}}</p> diff --git a/files/th/mozilla/firefox/เปิดผนึก/index.html b/files/th/mozilla/firefox/เปิดผนึก/index.html new file mode 100644 index 0000000000..544c0ef3d0 --- /dev/null +++ b/files/th/mozilla/firefox/เปิดผนึก/index.html @@ -0,0 +1,8 @@ +--- +title: จดหมายเปิดผนึกถึงนักพัฒนา Firefox +slug: Mozilla/Firefox/เปิดผนึก +translation_of: Mozilla/Firefox/Releases +--- +<div>{{FirefoxSidebar}}</div><p>หน้านี้เอื้ออำนวย ลิงค์ไปสู่ "Firefox X สำหรับนักพัฒนา" บนความในแต่ละครั้งที่ FireFox ส่งออกมา จดหมายเหล่านี้ จะให้คุณได้เห็นว่า มีคุณลักษณะใหม่ที่เพิ่มเข้ามา และ บัคที่ถูกตัดทิ้งไปในแต่ละรุ่นของ FireFox</p> +<div class="multiColumnList"> + {{ListSubpages("",1,0,1)}}</div> diff --git a/files/th/mozilla/gecko/chrome/index.html b/files/th/mozilla/gecko/chrome/index.html new file mode 100644 index 0000000000..7c4fe1bfec --- /dev/null +++ b/files/th/mozilla/gecko/chrome/index.html @@ -0,0 +1,17 @@ +--- +title: Chrome +slug: Mozilla/Gecko/Chrome +tags: + - API + - Apps + - Chrome + - Gecko + - Microsoft + - Mozilla +translation_of: Mozilla/Gecko/Chrome +--- +<p>{{draft}}</p> + +<p>This page contains information specific to Chrome code running in Gecko.</p> + +<p>{{SubpagesWithSummaries}}</p> diff --git a/files/th/mozilla/gecko/index.html b/files/th/mozilla/gecko/index.html new file mode 100644 index 0000000000..dc063979b4 --- /dev/null +++ b/files/th/mozilla/gecko/index.html @@ -0,0 +1,67 @@ +--- +title: Gecko +slug: Mozilla/Gecko +tags: + - Gecko + - Mozilla + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Gecko +--- +<div class="summary"> +<p><span class="seoSummary"><strong>Gecko</strong> is the name of the layout engine developed by the Mozilla Project. It was originally named NGLayout. Gecko's function is to read web content, such as <a href="/en-US/docs/HTML" title="HTML">HTML</a>, <a href="/en-US/docs/CSS" title="CSS">CSS</a>, <a href="/en-US/docs/XUL" title="XUL">XUL</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>, and render it on the user's screen or print it. In XUL-based applications Gecko is used to render the application's user interface as well.</span></p> +</div> + +<p>Gecko is used in many applications, including a few browsers, such as Firefox, SeaMonkey, etc. (for a complete list, please refer to <a class="external" href="http://en.wikipedia.org/wiki/Gecko_%28layout_engine%29#Web_browsers" rel="external" title="http://en.wikipedia.org/wiki/Gecko_(layout_engine)#Web_browsers">Wikipedia's article on Gecko</a>.) Products using the same version of Gecko have identical support for standards.</p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation">Documentation</h2> + + <dl> + <dt><a href="/en-US/docs/Mozilla/Gecko/Chrome">Chrome</a></dt> + <dd> + <p>This page contains information specific to Chrome code running in Gecko.</p> + </dd> + <dt><a href="/en-US/docs/Gecko_FAQ" title="Gecko_FAQ">Gecko FAQ</a></dt> + <dd>Frequently asked questions about Gecko.</dd> + <dt><a href="/en-US/docs/Gecko_DOM_Reference" title="https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference">Gecko DOM reference</a></dt> + <dd>Reference to the DOM.</dd> + <dt><a href="/en-US/docs/Gecko-Specific_DOM_Events" title="Gecko/Gecko event reference">Gecko event reference</a></dt> + <dd>Reference to events used within Gecko and Mozilla applications; for web-standard DOM events, see the <a href="/en-US/docs/DOM/DOM_event_reference" title="DOM/DOM event reference">DOM event reference</a>.</dd> + <dt><a href="/en-US/docs/Gecko/Versions" title="Gecko/Versions">Gecko versions and application versions</a></dt> + <dd>Versions of Gecko and the applications they're used in.</dd> + <dt><a class="external" href="/en-US/docs/Introduction_to_Layout_in_Mozilla" title="https://developer.mozilla.org/en-US/docs/Introduction_to_Layout_in_Mozilla">Introduction to Layout in Mozilla</a></dt> + <dd>Tech Talk on layout.</dd> + <dt><a href="/en-US/docs/Embedding_Mozilla" title="Embedding_Mozilla">Embedding Mozilla</a></dt> + <dd>Using Gecko in your own application.</dd> + <dt><a href="/en-US/docs/Character_Sets_Supported_by_Gecko" title="Character Sets Supported by Gecko">Character sets supported by Gecko</a></dt> + <dd>A list of the character sets supported by Gecko.</dd> + <dt><a href="/en-US/docs/Gecko/HTML_parser_threading" title="Gecko/HTML_parser_threading">HTML parser threading</a></dt> + <dd>Description of multithreading in the HTML parser.</dd> + <dt>{{interwiki('wikimo', 'Gecko:Home_Page', 'Gecko Home Page on MozillaWiki')}}</dt> + <dd>Home for the active developers. Roadmaps and more up-to-date resources.</dd> + </dl> + + <p><span class="alllinks"><a href="/en-US/docs/tag/Gecko" title="tag/Gecko">View All...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community">Community</h2> + + <ul> + <li>View Mozilla forums... {{DiscussionList("dev-tech-layout", "mozilla.dev.tech.layout")}}</li> + </ul> + + <h2 class="Related_Topics" id="Related_Topics">Related Topics</h2> + + <dl> + <dd><a href="/en-US/docs/Web_Standards" title="Web_Standards">Web Standards</a>, <a href="/en-US/docs/XUL" title="XUL">XUL</a>, <a href="/en-US/docs/Embedding_Mozilla" title="Embedding_Mozilla">Embedding Mozilla</a>, <a href="/en-US/docs/Developer_Guide" title="Developing_Mozilla">Developing Mozilla</a></dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/th/mozilla/index.html b/files/th/mozilla/index.html new file mode 100644 index 0000000000..c2fb1b4176 --- /dev/null +++ b/files/th/mozilla/index.html @@ -0,0 +1,10 @@ +--- +title: Mozilla +slug: Mozilla +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla +--- +<p>บทความด้านล่างเหล่านี้ร่วมด้วย เนื้อหาเกี่ยวกับการดาวน์โหลด และการสร้าง โมซิลล่าโค้ด ในส่วนเพิ่มเติม,คุณจะเจอบทความที่มีประโยชน์เกี่ยวกับ การทำงานของโค้ด, การสร้าง add-ons สำหรับแอพลิเคชั่นบน โมซิลล่า และสิ่งเหล่านี้</p> +<p>{{LandingPageListSubpages}}</p> diff --git a/files/th/mozilla/integrated_authentication/index.html b/files/th/mozilla/integrated_authentication/index.html new file mode 100644 index 0000000000..ec50a0e2ba --- /dev/null +++ b/files/th/mozilla/integrated_authentication/index.html @@ -0,0 +1,50 @@ +--- +title: Integrated Authentication +slug: Mozilla/Integrated_authentication +translation_of: Mozilla/Integrated_authentication +--- +<p class="summary">This document provides an overview of Mozilla's support for integrated authentication. <span class="seoSummary">This entails support for the the Simple and Protected GSS-API Negotiation Mechanism (SPNEGO) internet standard (<a class="external" href="https://tools.ietf.org/html/rfc2478" title="RFC 2478">RFC 2478</a>) to negotiate either Kerberos, NTLM, or other authentication protocols supported by the operating system.</span> SPNEGO is commonly referred to as the "negotiate" authentication protocol.</p> + +<p>Mozilla does not have its own internal implementation of SPNEGO. Instead, it leverages system libraries that provide SPNEGO; SSPI on Microsoft Windows, and GSS-API on Linux, Mac OSX, and other UNIX-like systems.</p> + +<p>The Mozilla implementation of SPNEGO can be found under {{ Source("extensions/auth/") }}. It used to live in extensions/negotiateauth.</p> + +<p>Mozilla also supports raw NTLM authentication using an internal implementation (based on the <a class="external" href="http://davenport.sourceforge.net/ntlm.html">documentation</a> provided by Eric Glass) that supports NTLMv1/LMv1 and NTLM2 Session Key modes. As of Mozilla 1.7, there is no support for NTLMv2/LMv2. This is mainly due to the fact that NTLMSSP does not provide a means to negotiate use of NTLMv2/LMv2. <i>This document is incomplete ...</i></p> + +<h3 id="Flow_Diagram">Flow Diagram</h3> + +<p>The diagram below shows how various components interact.</p> + +<p><img alt="Image:integrated-auth.png" class="internal" src="/@api/deki/files/735/=Integrated-auth.png"></p> + +<h3 id="Configuration">Configuration</h3> + +<p>By default, Mozilla rejects all SPNEGO challenges from a web server. This is to protect the user from the possibility of DNS-spoofing being used to stage a man-in-the-middle exploit (see {{ Bug(17578) }} for more info). Moreover, with Windows clients NTLM may be negotiated as the authentication protocol. So, it is paramount that the browser does not freely exchange NTLM user credentials with any server that requests them. The NTLM response includes a hash of the user's logon credentials. On older versions of Windows this hash is computed using a relatively weak algorithm (see <a class="external" href="http://ubiqx.org/cifs/SMB.html#SMB.8">Hertel</a> for more info on NTLM authentication).</p> + +<p>Mozilla currently supports a whitelist of sites that are permitted to engage in SPNEGO authentication with the browser. This list is intended to be configured by an IT department prior to distributing Mozilla to end-users.</p> + +<p>The preferences are:</p> + +<pre class="notranslate">pref("network.negotiate-auth.trusted-uris", <em>site-list</em>); +pref("network.negotiate-auth.delegation-uris", <em>site-list</em>); +pref("network.automatic-ntlm-auth.trusted-uris", <em>site-list</em>); +</pre> + +<p>where, <em>site-list</em> is a comma-separated list of URL prefixes or domains of the form:</p> + +<pre class="notranslate"><em>site-list</em> = "mydomain.com, https://myotherdomain.com" +</pre> + +<p><code>network.negotiate-auth.trusted-uris</code> lists the sites that are permitted to engage in SPNEGO authentication with the browser, and <code>network.negotiate-auth.delegation-uris</code> lists the sites for which the browser may delegate user authorization to the server. <code>network.automatic-ntlm-auth.trusted-uris</code> lists the trusted sites to use NTLM authentification.</p> + +<p>If you wish to use non-fully-qualified entries of the form <code>mydomain.com</code> in the above preferences for NTLM and SPNEGO authentication, you will also need to set the preferences <code>network.automatic-ntlm-auth.allow-non-fqdn</code> and <code>network.negotiate-auth.allow-non-fqdn</code> (respectively) to <code>true</code>.</p> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Author(s): <a class="link-mailto" href="mailto:darin@meer.net">Darin Fisher</a></li> + <li>Last Updated Date: December 27, 2005</li> + <li>Copyright Information: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="https://www.mozilla.org/foundation/licensing/website-content.html">Details</a>.</li> +</ul> +</div> diff --git a/files/th/mozilla/localization/index.html b/files/th/mozilla/localization/index.html new file mode 100644 index 0000000000..61a11694cd --- /dev/null +++ b/files/th/mozilla/localization/index.html @@ -0,0 +1,24 @@ +--- +title: Localization at Mozilla +slug: Mozilla/Localization +tags: + - Landing + - Localization + - Mozilla + - TopicStub + - Translation + - l10n +translation_of: Mozilla/Localization +--- +<p><span class="seoSummary"><strong>การแปลเป็นภาษาท้องถิ่น</strong> (L10n) คือกระบวนการแปลอินเทอร์เฟซผู้ใช้ของซอฟต์แวร์จากภาษาหนึ่งไปเป็นอีกภาษาหนึ่งและเป็นการปรับให้เข้ากับวัฒนธรรมของแต่ละชาติ ทรัพยากรเหล่านี้มีให้สำหรับผู้ที่มีความสนใจในมุมมองทางเทคนิคที่เกี่ยวข้องกับการแปลเป็นภาษาท้องถิ่น</span> โดยมีให้สำหรับนักพัฒนาและผู้สนับสนุนทุก ๆ คน</p> + +<h2 id="ดูเพิ่มเติม">ดูเพิ่มเติม</h2> + +<dl> + <dt><a href="/th/docs/Project:MDN/Localizing" title="/en-US/docs/Project:MDN/Localizing">การแปลเป็นภาษาท้องถิ่นผ่าน MDN</a></dt> + <dd>ทรัพยากรนี้ครอบคลุมเอกสารคู่มือเกี่ยวกับการแปลเป็นภาษาท้องถิ่นผ่าน MDN</dd> + <dt><a href="/en-US/Apps/Build/Localization">App localization</a></dt> + <dd>เอกสารคู่มือชุดนี้ใช้เฉพาะกับการแปลแอปเป็นภาษาท้องถิ่น รวมทั้งแอปใน Firefox OS ด้วย</dd> + <dt><a href="/en-US/docs/Web/API/L10n">L10n</a></dt> + <dd>เอกสารอ้างอิงสำหรับ API ของ L10n ที่ Mozilla ใช้แปล Firefox OS เป็นภาษาท้องถิ่น</dd> +</dl> diff --git a/files/th/mozilla/marketplace/index.html b/files/th/mozilla/marketplace/index.html new file mode 100644 index 0000000000..e10fc79c72 --- /dev/null +++ b/files/th/mozilla/marketplace/index.html @@ -0,0 +1,160 @@ +--- +title: Firefox Marketplace +slug: Mozilla/Marketplace +tags: + - Apps + - Beginner + - Firefox OS + - Intro + - Marketplace + - NeedsTranslation + - TopicStub + - 'l10n:priority' +translation_of: Archive/Mozilla/Marketplace +--- +<p class="summary">The Firefox Marketplace is an open and non-proprietary online marketplace for web apps. <span class="seoSummary">In this zone you'll find all the information you need to prepare and publish apps on the Firefox Marketplace. Find guidance on how to make apps successful, delivery options, publishing and updating apps, and the libraries and APIs to make use of Marketplace features.</span></p> + +<p>Mozilla is bringing its core values — openness, freedom, user choice — to the world of app publishing.</p> + +<p>Using standard Web technologies, languages, and tools, the <a href="https://marketplace.firefox.com/">Firefox Marketplace</a> enables you to publish <a href="/en-US/Apps">Open Web Apps</a>. These apps can be packaged, running within Firefox OS, or hosted on your own web server. Published apps are available to users of Firefox OS phones wherever they are in the world. Users discover your apps easily in Firefox Marketplace using the featured apps section, app categories, and powerful search. Users are then able to install free apps instantly, or buy paid apps with the growing support for credit card payments and operator billing.</p> + +<div class="topicpage-table"> +<div class="section"> +<h2 id="Preparing_for_success"><a href="/en-US/Marketplace/Prepare">Preparing for success</a></h2> + +<p>Whether you're creating apps for pleasure or profit, you'll want people to discover, use, and enjoy them. This section explains how to spread the word and build communities of satisfied users.</p> + +<h2 id="Publication_options"><a href="/en-US/Marketplace/Options">Publication options</a></h2> + +<p>Packaged or Hosted, that is the question. Find out about delivering your app content and the options for making your apps available on Android devices and desktops, in addition to Firefox OS.</p> + +<h2 id="Publishing_apps"><a href="/en-US/Marketplace/Publishing/Introduction">Publishing apps</a></h2> + +<p>Unleash your apps on the waiting world. Find out how to get your apps on Firefox Marketplace, including the processes for submitting your apps, the review process, updating your apps, monitoring their performance, and reviewing user feedback.</p> +</div> + +<div class="section"> +<h2 id="Tools_for_app_development">Tools for app development</h2> + +<dl> + <dt><a href="/en-US/Marketplace/APIs">Firefox Marketplace Libraries and APIs</a></dt> + <dd>Get an overview and find links to the libraries and APIs available to add features to your Marketplace apps.</dd> + <dt><a href="/en-US/Apps/Tools_and_frameworks/App_developer_tools">App developer tools</a></dt> + <dd>Find a complete list of the tools you can use to make Open Web App development efficient and fun.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE">WebIDE</a></dt> + <dd>Your primary tool to test, deploy, and debug <a href="https://developer.mozilla.org/en-US/Firefox_OS">Firefox OS</a> apps using the <a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> or a real Firefox OS device.</dd> +</dl> +</div> +</div> + +<div class="blockIndicator communitybox" dir="ltr"> +<div class="column-container"> +<h2 id="Join_the_Marketplace_community">Join the Marketplace community</h2> + +<div class="column-half"> +<div class="communitysubhead">Choose your preferred method for joining the discussion:</div> + +<ul class="communitymailinglist"> + <li><a href="https://lists.mozilla.org/listinfo/dev-marketplace">Mailing list</a></li> + <li><a href="https://twitter.com/Boot2Gecko">Twitter</a></li> + <li><a href="http://stackoverflow.com/questions/tagged/firefox-os">Stack Overflow</a></li> + <li><a href="http://groups.google.com/group/mozilla.dev.marketplace">Newsgroup</a></li> + <li><a href="http://groups.google.com/group/mozilla.dev.marketplace/feeds">RSS feed</a></li> +</ul> +</div> + +<div class="column-half"> +<ul class="communitycontact"> + <li><strong>IRC: </strong><a href="irc://irc.mozilla.org/marketplace">#marketplace</a> <span class="smaller">(<a href="https://wiki.mozilla.org/IRC">learn more</a>)</span></li> + <li><strong>Contribute: </strong><a href="https://wiki.mozilla.org/Marketplace/Contributing/ThisMonth" title="Discover what you can do to contribute regularly to the Marketplace project">Marketplace this month</a></li> +</ul> +</div> +</div> +</div> + +<h2 id="Subnav">Subnav</h2> + +<section id="Quick_Links"> +<ol> + <li class="toggle"> + <details><summary><a href="/en-US/Marketplace/Prepare">Prepare for success</a></summary> + + <ol> + <li><a href="/en-US/Marketplace/Prepare/Introduction">Introduction</a></li> + <li><a href="/en-US/Marketplace/Prepare/Deciding_what_to_build">Deciding what to build</a></li> + <li><a href="/en-US/Marketplace/Prepare/Getting_to_know_your_users">Getting to know your users</a></li> + <li><a href="/en-US/Marketplace/Prepare/Choosing_your_business_model">Choosing your business model</a></li> + <li><a href="/en-US/Marketplace/Prepare/Localizing_your_apps">Localizing your apps</a></li> + <li><a href="/en-US/Marketplace/Prepare/Promoting_your_app">Promoting your app</a></li> + <li><a href="/en-US/Marketplace/Prepare/Creating_your_community">Creating your community</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details><summary><a href="/en-US/Marketplace/Options">Your publication options</a></summary> + <ol> + <li><a href="/en-US/Marketplace/Options/Introduction">Introduction</a></li> + <li><a href="/en-US/Marketplace/Options/Packaged_apps">Packaged apps</a></li> + <li><a href="/en-US/Marketplace/Options/Hosted_apps">Hosted apps</a></li> + <li><a href="/en-US/Marketplace/Options/Packaged_or_hosted">Packaged or hosted?</a></li> + <li><a href="/en-US/Marketplace/Options/Mobile_optimized_websites">Mobile-optimized websites</a></li> + <li><a href="/en-US/Marketplace/Options/Self_publishing">Publish apps yourself</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details><summary><a href="/en-US/Marketplace/Publishing">App publishing overview</a></summary> + <ol> + <li><a href="/en-US/Marketplace/Publishing/Introduction">Introduction</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submission_checklist">Submission checklist</a></li> + <li><a href="/en-US/Marketplace/Publishing/Marketplace_review_criteria" title="An explanation of the criteria an app must meet in order to be published on the Firefox Marketplace">Marketplace review criteria</a></li> + <li><a href="/en-US/Marketplace/Publishing/Marketplace_showcase_criteria">Marketplace showcase criteria</a></li> + <li><a href="/en-US/Marketplace/Publishing/Adding_a_subdomain" title="For security reasons, each app must have its own domain (or subdomain) on the Web. This article covers how to go about creating a subdomain for your app.">Adding a subdomain for an app</a></li> + <li><a href="/en-US/Marketplace/Publishing/Policies_and_Guidelines">Policies and Guidelines</a> + <ol> + <li><a href="/en-US/Marketplace/Publishing/Policies_and_Guidelines/Introduction">Introduction</a></li> + <li><a href="/en-US/Marketplace/Publishing/Policies_and_Guidelines/Marketplace_screenshot_criteria" title="Some guidelines on how to create an effective screenshot for marketplace submission">Marketplace screenshot criteria</a></li> + <li><a href="/en-US/Marketplace/Publishing/Policies_and_Guidelines/Privacy_policies" title="Your users' privacy is very important, so you need to develop and adhere to a reasonable privacy policy to engender their trust. This article provides a guide to developing privacy policies.">Privacy policy</a></li> + <li><a href="/en-US/Marketplace/Publishing/Policies_and_Guidelines/Testing_and_troubleshooting">App testing and troubleshooting</a></li> + </ol> + </li> + </ol> + </details> + </li> + <li class="toggle"> + <details><summary><a href="/en-US/Marketplace/Publishing/Submit">Submit your app</a></summary> + <ol> + <li><a href="/en-US/Marketplace/Publishing/Submit/Overview">Overview</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submit/Sign-in_to_your_developer_account" title="This step-by-step guide will help you successfully submit your app to the Firefox Marketplace.">Step 1: Sign-in</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submit/Load_your_app">Step 2: Load app</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submit/Enter_your_apps_details">Step 3: Listing details</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submit/Next_steps">Step 4: Next steps</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submit/Rating_Your_Content">Step 5: App rating</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submit/Define_your_team">Step 6: Define team members</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submit/View_your_listing">Step 7: View listing</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submit/Edit_other_localizations">Step 8: Edit other localizations</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details><summary><a href="/en-US/Marketplace/Publishing/Managing_your_apps">Managing and updating published apps</a></summary> + <ol> + <li><a href="/en-US/Marketplace/Publishing/Managing_your_apps/Introduction_Managing_your_apps">Introduction</a></li> + <li><a href="/en-US/Marketplace/Publishing/Managing_your_apps/Status___Versions">Your app's status</a></li> + <li><a href="/en-US/Marketplace/Publishing/Updating_apps" title="Information about how both hosted and packaged app updates are handled, and what you need to do to ensure that your app properly supports updating.">Updating apps</a></li> + <li><a href="/en-US/Marketplace/Publishing/Managing_your_apps/App_Statistics">App Stats</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details><summary><a href="/en-US/docs/Mozilla/Marketplace/Add-on_submission">Add-on submission</a></summary> + <ol> + <li><a href="/en-US/docs/Mozilla/Marketplace/Add-on_submission">Add-on submission overview</a></li> + <li><a href="/en-US/docs/Mozilla/Marketplace/Add-on_submission/Review_criteria">Add-on review criteria</a></li> + </ol> + </details> + </li> + <li><a href="/en-US/Marketplace/APIs">Libraries and APIs</a></li> + <li><a href="/en-US/Marketplace/FAQ">Firefox Marketplace FAQ</a></li> +</ol> +</section> diff --git a/files/th/mozilla/marketplace/prepare/deciding_what_to_build/index.html b/files/th/mozilla/marketplace/prepare/deciding_what_to_build/index.html new file mode 100644 index 0000000000..9ef2c2e0f3 --- /dev/null +++ b/files/th/mozilla/marketplace/prepare/deciding_what_to_build/index.html @@ -0,0 +1,49 @@ +--- +title: Deciding what to build +slug: Mozilla/Marketplace/Prepare/Deciding_what_to_build +translation_of: Archive/Mozilla/Marketplace/Prepare/Deciding_what_to_build +--- +<div class="summary"> +<p><span class="seoSummary"><font><font>ค้นหาคำแนะนำเกี่ยวกับการตัดสินใจในการปพลิเคชันและเกมคุณจะสร้างตลาดสำหรับ Firefox</font></font></span></p> +</div> + +<p><font><font>ในโลกที่มีมนต์ </font></font><strong><font><font>'จะมี</font><font>app </font></font></strong><font><font>สำหรับที่' </font><font>จึงมักจะดูเหมือนว่าจะเป็นจริงมันอาจจะดูเหมือนน่ากลัวเมื่อมันมาถึงการเลือกสิ่งที่ app ที่จะสร้าง </font><font>อย่างไรก็ตามในขณะที่มักจะ misquoted อดีตข้าราชการสหรัฐอเมริกาสิทธิบัตรของชาร์ลส์ฮอลแลนด์ Duell กล่าวว่าในปี 1902 "ในความคิดของฉันก่อนหน้านี้ทั้งหมดก้าวหน้าในสายต่างๆของการประดิษฐ์จะปรากฏที่ไม่มีนัยสำคัญโดยสิ้นเชิงเมื่อเทียบกับผู้ที่ศตวรรษที่ปัจจุบันจะเป็นพยาน </font><font>ฉันเกือบจะหวังว่าฉันอาจจะมีชีวิตของฉันอีกครั้งที่จะเห็นสิ่งมหัศจรรย์ซึ่งอยู่ในเกณฑ์. "คำพูดเหล่านี้จะเป็นจริงในวันนี้ขณะที่พวกเขามานานกว่า 100 ปีที่ผ่านมา</font></font></p> + +<h2 id="การสร้างความคิดของคุณ"><font><font>การสร้างความคิดของคุณ</font></font></h2> + +<p><font><font>เพื่อที่คุณจะเริ่มต้น? </font><font>นี่เป็นคำแนะนำบางส่วน:</font></font></p> + +<ul> + <li><strong><font><font>สิ่งที่ง่าย─ไม่ต้องกลัวที่จะเริ่มต้นด้วยสิ่งที่คุณรู้แม้ว่าจะคาดเดาความคิดเช่นเดียวกับปพลิเคชันที่มีอยู่แล้วในตลาด </font></font></strong><font><font>คุณอาจต้องการที่จะใช้ app ครั้งแรกของคุณเป็นโอกาสที่จะเรียนรู้เครื่องมือและกระบวนการและที่ดี </font><font>แต่ไม่ยังพิจารณาว่าคุณสามารถนำเสนอสิ่งที่ไม่ซ้ำกันหรือดีกว่าปพลิเคชันที่มีอยู่เพื่อให้คุณยืนออกเป็นมากกว่าเพียงแค่ว่า 'ฉันเกินไป'</font></font></li> + <li><strong><font><font>สิ่งที่คุณรู้─งานอดิเรกทักษะดอกเบี้ยหรือกีฬา </font></font></strong><font><font>ทั้งหมดเหล่านี้อาจมีความเป็นไปได้สำหรับปพลิเคชันที่ช่วยหรือแจ้งให้ผู้คนที่มีความสนใจคล้ายกัน</font></font></li> + <li><strong><font><font>ปัญหาในชีวิตประจำ─ปพลิเคชันที่ประสบความสำเร็จจำนวนมากที่อยู่ในชีวิตประจำวันปัญหา </font></font></strong><font><font>พูดคุยกับครอบครัวเพื่อนและเพื่อนร่วมงานและมองออกไปทำงานสำหรับ 'คุณจะต้องสามารถที่จะสร้าง app สำหรับที่แสดงความคิดเห็น </font><font>ยังมองหากิจกรรมที่ข้อมูลในอินเทอร์เน็ตจะได้รับความหมายมากขึ้นเพราะที่ตั้งของผู้ใช้หรือกิจกรรมปัจจุบัน</font></font></li> + <li><strong><font><font>ปพลิเคชันที่ขาดหายไป─ทบทวนแคตตาล็อกของปพลิเคชันในตลาดเพื่อระบุสิ่งที่อาจจะหายไป</font></font></strong></li> + <li><strong><font><font>ข้อเสนอแนะ App</font></font></strong><font><font> ─ไม่มองข้ามข้อเสนอแนะที่มีให้ในปพลิเคชันอื่น ๆ </font><font>ภายในความคิดเห็นนี้คุณจะเจอการร้องขอจากผู้ใช้สำหรับการทำงานที่เพิ่มคุณสมบัติที่แตกต่างกันร้องเรียนว่าส่วนหนึ่งของโปรแกรมบางส่วนทำงานได้ไม่ดีหรือเป็นนัย ๆ ว่าผู้ที่คาดว่าจะ app ที่จะทำบางสิ่งบางอย่างที่แตกต่างกันอย่างสิ้นเชิง </font><font>ความคิดเห็นเหล่านี้เป็นอย่างดีอาจมีแรงบันดาลใจ; </font><font>เพียงแค่ต้องระวังว่ามันไม่ได้ส่งผลให้ 'ฉันเกินไป' แอพพลิเค</font></font></li> + <li><strong><font><font>App </font></font></strong><font><font>ข้อเสนอแนะเว็บไซต์ฟอรั่มอินเทอร์เน็ตและเช่นกัน─จำนวนเว็บไซต์ให้ทางสำหรับผู้ใช้เพื่อให้คำแนะนำสำหรับการปพลิเคชันมือถือ </font><font>เหล่านี้ยังสามารถเป็นแหล่งที่มาของความคิดที่มีผล แต่อย่าลืมตรวจสอบข้อตกลงและเงื่อนไขก่อนที่คุณจะเริ่มต้นสร้างแอปบนพื้นฐานความคิดที่คุณเห็นในเว็บไซต์เหล่านี้</font></font></li> + <li><strong><font><font>เปิด APIs</font></font></strong><font><font> ─หลายเว็บไซต์และบริการที่นำเสนอ API แบบเปิดที่ช่วยให้คุณสามารถเข้าถึงข้อมูลและบริการของตน </font><font>ช่วงนี้จาก APIs ในการควบคุมแกดเจ็ตผ่านข้อมูลของรัฐบาลที่มีขนาดใหญ่และผู้ให้บริการที่เป็นอิสระ </font><font>เหล่านี้เป็นไปได้สำหรับการดำเนินการเสนอวิธีการใหม่ ๆ ในการทำสิ่งที่ปฏิบัติงานใหม่ที่มีแกดเจ็ตหรือการนำเสนอข้อมูลในรูปแบบที่ให้ความช่วยเหลือกับผู้ใช้งานที่ไม่คาดคิด</font></font></li> +</ul> + +<h2 id="การตรวจสอบความคิดของคุณ"><font><font>การตรวจสอบความคิดของคุณ</font></font></h2> + +<p><font><font>ไม่ว่าแหล่งที่มาของแรงบันดาลใจของคุณคุณควรจะ:</font></font></p> + +<ol> + <li><font><font>ยืนยันปัญหาที่คุณต้องการที่จะแก้ปัญหาที่เป็นจริงและผู้ใช้ที่จะต้องการ app ที่จะแก้ปัญหาได้ </font><font>มีบางคำแนะนำที่ดีเกี่ยวกับกระบวนการนี้คือการวางแผน App </font><font>ของคุณหน้าในส่วนของการออกแบบของศูนย์ต่าง</font></font></li> + <li><font><font>เปรียบเทียบความคิดของคุณปพลิเคชันที่มีอยู่แล้วในตลาดและร้านค้าสำหรับแพลตฟอร์มอื่น ๆ </font><font>หากคุณพบสิ่งที่คล้ายกันก็ไม่ใช่เหตุผลที่จะละทิ้งความคิดของคุณมากกว่าที่จะถามตัวเองว่าผมสามารถทำมันได้ดีกว่า ' </font><font>คุณอาจจะสามารถที่จะแก้ปัญหาได้เร็วขึ้นดีขึ้นหรือในการมีส่วนร่วมมากขึ้นวิธีที่สนุก─ 'การสร้างที่ดีกว่ากับดักหนู' อาจเป็นเพียงสิ่งที่จำเป็น</font></font></li> + <li><font><font>ตรวจสอบว่าคุณมีสิทธิ์ที่จำเป็นในการสร้าง app ของคุณ </font><font>ความคิดที่ไม่ทั้งหมดและข้อมูลจะถูกนำเสนอในทางที่เปิด </font><font>มีอยู่ช่วงหนึ่งที่มากที่สุดคุณอาจจะสามารถที่จะใช้ข้อมูลหรือบริการโดยการทำน้อยกว่าการให้การยอมรับสำหรับการใช้พวกเขาอย่างที่คนอื่น ๆ อาจจะมีการออกใบอนุญาตและผลกระทบค่าใช้จ่าย </font><font>ให้แน่ใจว่าคุณเข้าใจเหล่านี้ก่อนที่จะเริ่มโครงการของคุณ</font></font></li> + <li><font><font>ตรวจสอบว่าเทคโนโลยีที่มีอยู่ </font><font>เมื่อบางชนิดของการตรวจสอบไม่ได้อยู่มันอาจจะเป็นว่าเทคโนโลยีที่คุณจำเป็นต้องใช้มันก็ไม่สามารถใช้งานบนแพลตฟอร์มเป้าหมายที่ได้รับการสนับสนุนแหล่งที่มาต่อพ่วงหรือข้อมูล</font></font></li> +</ol> + +<p><font><font>แต่ไม่ต้องกลัวที่จะทดสอบ </font><font>เพียงเพราะทุกคำแนะนำที่คุณได้รับบอกว่ามันเป็นความคิดที่ดีนำมาใช้ครั้งเดียวและปลดปล่อยในการใช้โทรศัพท์มือถือก็อาจตีคอร์ดที่ไม่มีใครอยู่รอบตัวคุณจะได้รับรู้ </font><font>นอกจากนี้ถ้าคุณตรวจสอบครั้งแรกไม่ประสบความสำเร็จคุณจะอยู่ใน บริษัท ที่ดี - นกโกรธเป็นนักพัฒนา 52 </font></font><sup><font><font>อันดับเกม</font></font></sup></p> + +<p><font><font>และพูดคุยของเกมที่นี่คุณมีทั้งความท้าทายมากขึ้นและมีโอกาสมากขึ้น </font><font>ตัวเลือกเดียวที่มีอยู่ในการพิจารณาเป็นเกมที่ดีในการพัฒนา </font><font>คิดเกี่ยวกับเกมที่คุณเล่นเป็นเด็กเกมครอบครัวเกมที่คุณเล่นที่โรงเรียนแม้เกมในท้องถิ่นหรือภูมิภาคที่อาจแปลให้ผู้ชมทั่วโลก </font><font>อีกถนนมีผลการสำรวจเป็นตำนานและตำนานท้องถิ่นไม่เพียง แต่พวกเขาจะช่วยกำหนดการเล่นเกม แต่ความจริงที่พวกเขาอาจจะดูแปลกที่แปลกหรือแปลกที่ผู้ชมทั่วโลกสามารถเพิ่มอุทธรณ์ของพวกเขา</font></font></p> + +<p><font><font>นอกจากนี้ยังเป็นมูลค่าการจดจำว่า app ของคุณไม่จำเป็นต้องสำหรับอุปกรณ์มือถือ </font><font>ปพลิเคชัน Firefox </font></font><a href="/en-US/Marketplace/Options/Open_web_apps_for_desktop"><font><font>ตลาดนอกจากนี้ยังสามารถติดตั้งบนพีซีและแท็บเล็ </font></font></a><font><font>ดังนั้นหากความคิดของคุณคือสำหรับ app ที่ซับซ้อนที่มีมากขึ้นเหมาะกับการมุ่งเน้นไปที่ผู้ใช้จะนำไปใช้บนพีซีหรือแท็บเล็ตที่ไม่ได้ทิ้งมัน </font><font>และยังจำได้ว่าแอพพลิเคสก์ท็อปที่ซับซ้อนอาจได้รับประโยชน์จากโทรศัพท์มือถือรุ่นมุ่งเน้นไปที่การตั้งค่าที่สำคัญของผู้ใช้งานอาจต้องการที่จะดำเนินการออกไปจากโต๊ะของพวกเขา</font></font></p> + +<p><font><font>มีอยู่แล้วอาจจะมีคนนับล้านของปพลิเคชันออกมี แต่มีนับล้านขึ้นมาและแหล่ง unlikeliest เพียงแค่อาจจะเป็นแหล่งกำเนิดของสิ่งที่แอปพลิเคขนาดใหญ่ต่อไป</font></font></p> + +<h2 id="ดู"><font><font>ดู:</font></font></h2> + +<ul> + <li><font><font>App </font></font><a href="https://developer.mozilla.org/en-US/Apps/Design/Planning_your_app"><font><font>ศูนย์ส่วนการออกแบบการวางแผน</font><font>App ของคุณ</font></font></a></li> +</ul> diff --git a/files/th/mozilla/marketplace/publishing/submit/index.html b/files/th/mozilla/marketplace/publishing/submit/index.html new file mode 100644 index 0000000000..265a1ad776 --- /dev/null +++ b/files/th/mozilla/marketplace/publishing/submit/index.html @@ -0,0 +1,10 @@ +--- +title: Submit +slug: Mozilla/Marketplace/Publishing/Submit +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace/Publishing/Submit +--- +<p>This section describes the process for submitting an app to Firefox Marketplace</p> +<p>Residual details: <a href="/en-US/Marketplace/Publishing/Submit/Submitting_an_app">https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Submitting_an_app</a></p> diff --git a/files/th/mozilla/marketplace/publishing/submit/overview/index.html b/files/th/mozilla/marketplace/publishing/submit/overview/index.html new file mode 100644 index 0000000000..934043efce --- /dev/null +++ b/files/th/mozilla/marketplace/publishing/submit/overview/index.html @@ -0,0 +1,122 @@ +--- +title: Overview +slug: Mozilla/Marketplace/Publishing/Submit/Overview +translation_of: Archive/Mozilla/Marketplace/Publishing/Submit/Overview +--- +<div class="summary"> +<p><font><font>เพื่อให้การปพลิเคชันของคุณที่มีอยู่บน Firefox ตลาดแต่ละคนจะต้องมีการส่งไปยังตลาดและมีการทบทวนก่อนที่จะตีพิมพ์. </font></font><span class="seoSummary"><font><font>หน้านี้ให้ภาพรวมกระบวนการที่เกี่ยวข้องในการส่งแอพใน Firefox ตลาด.</font></font></span><font><font>หน้าภายหลังการให้รายละเอียดเพิ่มเติมเกี่ยวกับแต่ละขั้นตอน</font></font></p> +</div> + +<div class="note"> +<p><font><font>สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับขั้นตอนของกระบวนการแต่ละโปรดปฏิบัติตามลิงก์ในหัวข้อขั้นตอนหรือเริ่มต้นกระบวนการจากขั้นตอนที่ 1 การแสดงแผนภาพของขั้นตอนการให้บริการที่ด้านล่างของหน้านี้</font></font></p> +</div> + +<p><font><font>นอกจากนี้คุณยังสามารถทำตามขั้นตอนการยื่นในวิดีโอนี้: </font></font><a class="video-item" href="http://s.vid.ly/embeded.html?link=8k2n4w&autoplay=false"><font><font>http://vid.ly/8k2n4w</font></font></a></p> + +<h2 id="กระบวนการ"><font><font>กระบวนการ</font></font></h2> + +<p><font><font>ดังนั้นคุณจึงต้องการที่จะส่งแอพพลิเคของคุณเพื่อ Firefox ตลาดขอเริ่มต้น:</font></font></p> + +<dl> + <dt><a href="/en-US/Marketplace/Publishing/Submit/Sign-in_to_your_developer_account"><font><font>ขั้นที่ 1 - ลงชื่อเข้าใช้บัญชีของคุณพัฒนา</font></font></a></dt> + <dd> + <ul> + <li><font><font>ไปที่ตลาด Firefox Hub พัฒนา</font></font></li> + <li><font><font>คลิกส่ง app ของคุณไปยังตลาด</font></font></li> + <li><font><font>ลงชื่อเข้าใช้บัญชีนักพัฒนาของคุณ:</font></font> + <ul> + <li><font><font>หากคุณไม่ได้ลงทะเบียนคุณจะถูกถามในการลงทะเบียน</font></font></li> + <li><font><font>หากคุณไม่ได้ทำเช่นนั้นแล้วคุณจะถูกขอให้ยอมรับข้อตกลงการพัฒนาตลาดของ Firefox</font></font></li> + </ul> + </li> + </ul> + </dd> + <dt><a href="/en-US/Marketplace/Publishing/Submit/Load_your_app"><font><font>ขั้นตอนที่ 2 - โหลด app ของคุณ</font></font></a></dt> + <dd><font><font>บนส่งแอพหน้านี้:</font></font> + <ul> + <li><font><font>เลือกว่า app เป็นฟรีหรือจ่าย</font></font></li> + <li><font><font>เลือกแพลตฟอร์ม app ที่จะสามารถใช้ได้ใน</font></font></li> + <li><font><font>ไม่ว่าจะเป็นแอพพลิเคเลือกเป็นเจ้าภาพหรือแพคเกจแล้ว:</font></font> + <ul> + <li><font><font>สำหรับแอพพลิเคเจ้าภาพให้การเชื่อมโยงไปยังไฟล์ที่ชัดแจ้ง</font></font></li> + <li><font><font>สำหรับการตรวจสอบแพคเกจที่อัปโหลด</font></font><code><font><font>package.zip</font></font></code><font><font>ไฟล์และหลังจากที่ได้รับการตรวจสอบระบุความต้องการขั้นต่ำ API</font></font></li> + </ul> + </li> + <li><font><font>คลิกที่ดำเนินการต่อ</font></font></li> + </ul> + </dd> + <dt><a href="/en-US/Marketplace/Publishing/Submit/Enter_your_apps_details"><font><font>ขั้นตอนที่ 3 - ป้อนรายละเอียดของแอป</font></font></a></dt> + <dd> + <p><font><font>ในการแก้ไขรายละเอียดต่างหน้านี้:</font></font></p> + + <ul> + <li><font><font>แก้ไข URL app หากคุณต้องการ</font></font></li> + <li><font><font>แก้ไขคำอธิบาย (ให้ชัดแจ้งใน) หากคุณต้องการ</font></font></li> + <li><font><font>เลือกหนึ่งหรือสองประเภท</font></font></li> + <li><font><font>จัดให้มีนโยบายความเป็นส่วนตัว</font></font></li> + <li><font><font>ที่กำหนดไว้หน้าบ้านและเว็บไซต์สนับสนุนถ้าคุณมีพวกเขา</font></font></li> + <li><font><font>ให้ที่อยู่อีเมลสนับสนุน</font></font></li> + <li><font><font>ระบุว่าการตรวจสอบที่ต้องการการสนับสนุนแฟลช</font></font></li> + <li><font><font>เพิ่มอย่างน้อยหนึ่งหน้าจอหรือวิดีโอ</font></font></li> + <li><font><font>ให้ความเห็นเพิ่มเติมสำหรับการวิจารณ์ app (เช่นสัญญาณในรายละเอียดของแอพพลิเคถ้าต้องการให้พวกเขา) - ทราบคุณเท่านั้นที่จะสามารถที่จะปรับเปลี่ยนการบันทึกเหล่านี้โดยการส่งรุ่นใหม่ของแอป</font></font></li> + <li><font><font>เลือกว่า app ที่จะได้รับการเผยแพร่ทันทีที่ได้รับการอนุมัติ - ทราบคุณเท่านั้นที่จะสามารถที่จะปรับเปลี่ยนการตั้งค่านี้โดยการส่งรุ่นใหม่ของแอป</font></font></li> + <li><font><font>คลิกที่ดำเนินการต่อ</font></font></li> + </ul> + </dd> + <dt><a href="/en-US/Marketplace/Publishing/Submit/Next_steps"><font><font>ขั้นตอนที่ 4 - ดูรายละเอียดของขั้นตอนถัดไป</font></font></a></dt> + <dd><font><font>ในขั้นตอนถัดไปหน้าคลิกดำเนินการต่อ</font></font></dd> + <dt><a href="/en-US/Marketplace/Publishing/Submit/Rating_Your_Content"><font><font>ขั้นตอนที่ 5 - ได้รับการจัดอันดับเนื้อหา</font></font></a></dt> + <dd><font><font>ในการจัดอันดับเนื้อหาหน้านี้:</font></font> + <ul> + <li><font><font>ที่จะได้รับคะแนนใหม่คลิกสร้างใบรับรองความนิยม IARC </font><font>และบนเว็บไซต์ของ IARC กรอกแบบสอบถามการจัดอันดับ</font></font></li> + <li><font><font>เพื่อเข้าสู่การจัดอันดับที่คุณได้รับแล้วให้มัน</font></font><strong><font><font>ID </font></font></strong><font><font>ส่งและรหัสรักษาความปลอดภัย</font></font></li> + </ul> + </dd> + <dt><a href="/en-US/Marketplace/Publishing/Pricing/Introduction"><font><font>ขั้นตอนที่ 6 - การปรับปรุงความพร้อมใช้งานและรายละเอียดการชำระเงิน</font></font></a></dt> + <dt style="margin-left: 40px;"><font><font>ขั้นตอนที่ 6a - ถ้า app ที่เป็นอิสระ (และไม่รวมถึงการซื้อใน app):</font></font></dt> + <dd style="margin-left: 40px;"><font><font>บนเมนูซ้ายมือคลิกเข้ากันได้ </font><font>เปลี่ยนประเทศ app ที่จะสามารถใช้ได้ในกรณีที่คุณต้องการ</font></font></dd> + <dt style="margin-left: 40px;"><font><font>ขั้นตอนที่ 6b - ถ้า app จะจ่าย (หรือฟรี แต่รวมถึงการตรวจสอบในการชำระเงิน)</font></font></dt> + <dd style="margin-left: 40px;"><font><font>บนเมนูซ้ายมือคลิกเข้ากันได้และการชำระเงิน</font></font> + <ul> + <li><font><font>การตั้งค่าบัญชีผู้ให้บริการการชำระเงินของคุณเช่น Bango และ Boku</font></font></li> + <li><font><font>การตั้งราคาที่ระบุว่าการตรวจสอบรวมถึงผลิตภัณฑ์ในการตรวจสอบและเลือกประเทศ app ที่จะสามารถใช้ได้ใน</font></font></li> + <li><font><font>ถ้า app จะถูกนำเสนอเป็นอัพเกรดพรีเมี่ยมเป็น app ฟรีระบุ app ฟรี</font></font></li> + </ul> + </dd> + <dt style="margin-left: 40px;"><font><font>ขั้นตอนที่ 6 c - ถ้า app รวมถึงผลิตภัณฑ์ใน app:</font></font></dt> + <dd style="margin-left: 40px;"> + <ul> + <li><font><font>ในการคลิกเมนูด้านซ้ายมือ</font></font><strong><font><font>In-App </font></font></strong><font><font>การชำระเงินและได้รับที่สำคัญ</font><font>API ของคุณและความลับ </font><font>(โปรดทราบว่าคุณจะต้องส่งการปรับปรุงเพื่อ</font><font>app ของคุณเมื่อคีย์ API </font><a href="/en-US/Marketplace/Monetization/In-app_payments"><font>และความลับที่ได้รับการเพิ่มลงไปสำหรับรายละเอียดเพิ่มเติมโปรดดูที่การชำระเงินในแอปพลิ.)</font></a></font></li> + <li><font><font>หากคุณกำลังใช้</font></font><a href="/en-US/Marketplace/Monetization/In-app_payments_section/fxPay_iap"><font><font>fxPay</font></font></a><font><font>บนคลิกที่เมนูด้านซ้ายมือ</font></font><strong><font><font>In-App </font></font></strong><font><font>ผลิตภัณฑ์และกำหนดแต่ละผลิตภัณฑ์ใน</font><font>app ของคุณ</font></font></li> + </ul> + </dd> + <dt><a href="/en-US/Marketplace/Publishing/Submit/Define_your_team"><font><font>ขั้นตอนที่ 7 - สมาชิกในทีมติดตั้ง (ถ้ามี)</font></font></a></dt> + <dd><font><font>บนเมนูซ้ายมือคลิกสมาชิกในทีมและเพิ่มสมาชิกในทีมเพิ่มเติมใด</font><font>ๆ หากคุณต้องการ</font></font></dd> + <dt><a href="/en-US/Marketplace/Publishing/Submit/View_your_listing"><font><font>ขั้นตอนที่ 8 - ดูรายชื่อ (ถ้ามี)</font></font></a></dt> + <dd><font><font>บนเมนูซ้ายมือคลิกดูรายชื่อและดูรายการตลาด</font><font>app ของคุณถ้าคุณต้องการ</font></font></dd> + <dt><a href="/en-US/Marketplace/Publishing/Submit/Edit_other_localizations"><font><font>ขั้นตอนที่ 9 - แก้ไขการแปลรายชื่ออื่น ๆ (ถ้ามี)</font></font></a></dt> + <dd><font><font>บนเมนูซ้ายมือคลิกแก้ไขรายชื่อและแก้ไข</font><font>URL app, คำอธิบายและประเภทใด ๆ ของ localizations ปพลิเคชันหรือเพิ่มรายละเอียดสถานที่อื่น ๆ ที่ได้รับการสนับสนุนโดยตลาด Firefox</font></font></dd> +</dl> + +<p><font><font>app ของคุณตอนนี้อยู่ในคิวการตรวจสอบ </font><font>คุณสามารถตรวจสอบความคืบหน้าผ่านกระบวนการตรวจสอบโดยการคลิกสถานะและรุ่นที่เมนูซ้ายมือ </font><font>จำไว้ว่าถ้า app ของคุณทำให้การใช้งานของการชำระเงินใน app ที่คุณจะต้องใช้รหัสในคีย์ API และส่งการปรับปรุงการตรวจสอบก่อนที่จะสามารถเผยแพร่ได้</font></font></p> + +<h2 id="แผนภูมิการไหล"><font><font>แผนภูมิการไหล</font></font></h2> + +<p><img alt="แผนภูมิการไหลแสดงขั้นตอนการส่งแอพพลิเค" src="https://mdn.mozillademos.org/files/8137/Submission%20Process%20v4.png" style="height: 2834px; width: 1260px;"></p> + +<h2 id="อะไรต่อไป"><font><font>อะไรต่อไป</font></font></h2> + +<p><font><font>หลังจากเสร็จสิ้นการส่ง app ของคุณคุณอาจต้องการที่จะ:</font></font></p> + +<ul> + <li><a href="https://marketplace.firefox.com/developers/support"><font><font>ได้รับการสนับสนุน</font></font></a></li> + <li><font><font>รับข่าวสารและการปรับปรุงจาก:</font></font> + <ul> + <li><a href="https://hacks.mozilla.org/"><font><font>บล็อก Hacks</font></font></a></li> + <li><a href="https://www.youtube.com/user/mozhacks"><font><font>ช่องวิดีโอ Hacks บน YouTube</font></font></a></li> + <li><a href="https://twitter.com/mozhacks"><font><font>ฟีด Twitter ของ Hacks</font></font></a></li> + <li><a class="external external-icon" href="https://marketplace.firefox.com/developers/#newsletter-signup"><font><font>แอปและจดหมายข่าว Hacks</font></font></a></li> + </ul> + </li> + <li><a href="https://wiki.mozilla.org/Marketplace/Contributing/Apps"><font><font>ได้รับเกี่ยวข้องกับตลาด</font></font></a></li> +</ul> diff --git a/files/th/mozilla/mobile/index.html b/files/th/mozilla/mobile/index.html new file mode 100644 index 0000000000..d7ff6a6ea7 --- /dev/null +++ b/files/th/mozilla/mobile/index.html @@ -0,0 +1,14 @@ +--- +title: Mobile +slug: Mozilla/Mobile +translation_of: Mozilla/Mobile +--- +<h2 id="Firefox_OS" name="Firefox_OS"><a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a></h2> +<p>Firefox OS is an open source mobile operating system which uses Linux and Mozilla's Gecko engine to run a user interface and set of applications written entirely in HTML, CSS and JavaScript.</p> +<p>Read about how to install Firefox OS and how to develop apps for it.</p> +<h2 id="Firefox_for_Android" name="Firefox_for_Android"><a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android</a></h2> +<p>Firefox for Android is Mozilla's mobile web browser for Android devices. It's recently been rewritten to use Android's native UI, making it faster, leaner and more responsive. It provides support for powerful APIs to access device capabilities such as the camera and telephony stack.</p> +<p>Read about how to help create Firefox for Android, how to use its device APIs, and how to build mobile add-ons.</p> +<h2 id="Mobile_web_development" name="Mobile_web_development"><a href="/en-US/docs/Web/Guide/Mobile">Mobile web development</a></h2> +<p>Mobile devices have very different hardware characteristics from desktop or laptop computers, and many of the APIs used to work with them are still in the process of being standardized.</p> +<p>Read about how to develop web sites that look good on mobile devices and take advantage of the new possibilities they offer. Learn how to make sure your web site works well on different browsers.</p> diff --git a/files/th/mozilla/persona/index.html b/files/th/mozilla/persona/index.html new file mode 100644 index 0000000000..2b7168de0e --- /dev/null +++ b/files/th/mozilla/persona/index.html @@ -0,0 +1,130 @@ +--- +title: Persona +slug: Mozilla/Persona +tags: + - Persona +translation_of: Archive/Mozilla/Persona +--- +<div class="callout-box"> +<p><strong>รับการติดต่อ หรือ ขอความช่วยเหลือ!</strong></p> + +<p><strong>ติตตาม</strong> <a class="external" href="http://identity.mozilla.com/" title="http://identity.mozilla.com/">บล็อกของเรา</a>,เข้าร่วม <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-identity" title="https://lists.mozilla.org/listinfo/dev-identity">รายชื่อผู้รับจดหมายข่าวของเรา</a>, หรือ ค้นหาเราในแท็ก<a class="link-irc" href="irc://irc.mozilla.org/identity" title="irc://irc.mozilla.org/identity">#identity</a> บน <a class="link-https" href="https://wiki.mozilla.org/IRC" title="https://wiki.mozilla.org/IRC"> IRC</a>.</p> +</div> + +<p><a class="link-https" href="https://www.mozilla.org/en-US/persona/" title="https://www.mozilla.org/en-US/persona/">Mozilla Persona</a> คือ ระบบล็อคอินข้ามเบาร์เซอร์บนหน้าเว็บ และระบบการตรวจสอบความปลอดภัย สำหรับระบบเว็บพื้นฐาน บนเว็บเบาร์เซอร์ที่ใช้ID โปโตคอลในการทำงาน. เพื่อให้แน่ใจว่า Persona ทำงานในทุกๆที่ และ ทุกๆคน, โมซิลล่าได้จัดทำบริการเล็กๆสำหรับ <a href="/th-TH/docs/Persona/Bootstrapping_Persona">ศูนย์กลางทางเลือก</a> ที่มีข้อมูลเกี่ยวกับ Persona ให้ติดตามกัน</p> + +<p>ทำไมคุณและเว็บไซต์ของคุณควรใช้งาน Persona?</p> + +<ol> + <li><strong>Persona ทำการลบทิ้ง การระบุรหัสผ่านบนเว็บไซต์อย่างสมบูรณ์</strong>, ผู้ใช้งานและเว็บไซต์เป็นอิสระจากภาระของการสร้าง,จัดการและ จัดทำระบบเก็บรหัสผ่านเพื่อความปลอดภัย</li> + <li><strong>Persona ง่ายต่อการใช้งาน </strong>เพียงแค่ 2 คลิก ผู้ใช้งาน Persona ก็สามารถล็อคอินเข้าสู่ เว็บไซต์ใหม่ เช่น<a href="http://voo.st"> Voost</a> โดยผ่านพ้นความยุ่งยากกับการเชื่อมโยงกับบัญชีที่เกี่ยวข้อง</li> + <li><strong>Persona ง่ายต่อการดำเนินการ</strong><strong>. </strong>นักพัฒนาสามารถเพิ่ม Persona ไปยังไซต์ของตนเองได้ภายใน บ่ายวันเดียว</li> + <li>ดีที่สุด, ไม่มีการ <strong>จำกัดการเข้าสู่ระบบ</strong> นักพัฒนาจะได้รับที่อยู่อีเมลล์ยืนยันสำหรับทุกๆผู้ใช้งานของเขา,และ ผู้ใช้งานสามารถใช้งานได้ทุกที่อยู่อีเมล์จาก Persona</li> + <li><strong>Persona สร้างขึ้นบนเว็บเปิดที่ใช้ ID โปโตคอล ในการทำงาน.</strong> ผู้ผลิตเว็บไซต์ที่เป็นที่นิยมเพียงหนึ่งเดียว จะนำเสนอ เบาร์เซอร์ID ให้ลูกค้า, <strong>และพวกเขาไม่จำเป็นต้องพึ่งพา การล็อคอินบนหน้าเว็บโมซิลล่าเลย</strong></li> +</ol> + +<p>อ่านต่อ เพื่อเริ่มต้น!</p> + +<div class="note"><strong>หมายเหตุ:</strong> Persona อยู่ในการพัฒนาที่จริงจัง. ติมตาม <a class="external" href="http://identity.mozilla.com/" title="http://identity.mozilla.com/">บล็อก</a> ของเรา เพื่อที่จะเรียนรู้ลักษณะใหม่ๆ, หรือเข้าร่วม <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-identity" title="https://lists.mozilla.org/listinfo/dev-identity">รายชื่อผู้รับจดหมายข่าวของเรา</a> และเสนอข้อเสนอแนะกับเรา!</div> + +<h2 id="การใช้งาน_Persona_บนเว็บไซต์ของคุณ">การใช้งาน Persona บนเว็บไซต์ของคุณ</h2> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h3 id="เริ่มต้นใช้งาน">เริ่มต้นใช้งาน</h3> + + <dl> + <dt><a href="/en-US/docs/Persona/Why_Persona" title="BrowserID/Why_BrowserID">ทำไมต้อง Persona?</a></dt> + <dd>เรียนรู้เกี่ยวกับ การรับรองการสนับสนุนจาก Persona บนเว็บไซต์ของคุณ, และ เปรียบเทียบเอกลักษณ์และระบบความน่าเชื่อถือ กับระบบอื่นๆ</dd> + <dt><a href="/en-US/docs/Persona/Quick_Setup" title="BrowserID/Quick setup">ติดตั้งระบบอย่างรวดเร็ว</a></dt> + <dd>การติดตั้งอย่างรวดเร็ว ผ่านการแสดงการเพิ่ม Persona บนเว็บไซต์ของคุณ</dd> + </dl> + </td> + <td> + <h3 id="Persona_API_reference">Persona API reference</h3> + + <dl> + <dt><a href="/en-US/docs/DOM/navigator.id" title="navigator.id">The navigator.id API reference</a></dt> + <dd>Reference for the <code>navigator.id</code> object, which web developers can use to integrate Persona into sites.</dd> + <dt><a href="/en-US/docs/Persona/Remote_Verification_API" title="BrowserID/Remote_Verification_API">Verification API reference</a></dt> + <dd>Reference for the remote verification API hosted at <code>https://verifier.login.persona.org/verify</code>.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <h3 id="Guides">Guides</h3> + + <dl> + <dt><a href="/en-US/docs/Persona/Security_Considerations" title="BrowserID/Security considerations">Security considerations</a></dt> + <dd>Practices and techniques to make sure your Persona deployment is secure.</dd> + <dt><a href="/en-US/docs/Persona/Browser_compatibility" title="/Browser_compatibility">Browser compatibility</a></dt> + <dd>Learn exactly which browsers support Persona.</dd> + <dt><a href="/en-US/docs/Persona/Internationalization" title="/Internationalization">Internationalization</a></dt> + <dd>Learn how Persona handles different languages.</dd> + </dl> + </td> + <td> + <h3 id="Resources">Resources</h3> + + <dl> + <dt><a class="link-https" href="/en-US/docs/Persona/Libraries_and_plugins" title="https://github.com/mozilla/browserid/wiki/BrowserID-Libraries">Libraries and plugins</a></dt> + <dd>Find a drop-in library for your favorite programming language, web framework, blog, or content management system.</dd> + <dt><a class="link-https" href="https://github.com/mozilla/browserid-cookbook" title="https://github.com/mozilla/browserid-cookbook">The Persona cookbook</a></dt> + <dd>Example source code for Persona sites. Includes snippets in C# (MVC3), PHP, Node.JS, and more.</dd> + <dt><a href="/en-US/docs/persona/branding" title="persona/branding">Branding resources</a></dt> + <dd>Sign in buttons and other graphics to help present Persona to your users.</dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 id="Information_for_Identity_Providers">Information for Identity Providers</h2> + + <p>If you're an email provider or another identity-providing service, check out the links below to learn about becoming a Persona Identity Provider.</p> + + <dl> + <dt><a href="/en-US/docs/Persona/Identity_Provider_Overview" title="IdP">IdP Overview</a></dt> + <dd>A high level view of Persona Identity Providers.</dd> + <dt><a href="/en-US/docs/Persona/Implementing_a_Persona_IdP" title="Guide to Implementing a Persona IdP">Implementing an IdP</a></dt> + <dd>A detailed guide to the technical details of becoming an IdP.</dd> + <dt><a href="/en-US/docs/Persona/.well-known-browserid" title="https://developer.mozilla.org/en-US/docs/Persona/.well-known-browserid">.well-known/browserid</a></dt> + <dd>An overview of the structure and purpose of the <code>.well-known/browserid</code> file, which IdPs use to advertise their support for the protocol.</dd> + </dl> + </td> + <td> + <h2 id="The_Persona_Project">The Persona Project</h2> + + <dl> + <dt><a href="/en-US/docs/Persona/Glossary" title="navigator.id">Glossary</a></dt> + <dd>BrowserID and Persona terminology defined.</dd> + <dt><a href="/en-US/docs/Persona/FAQ" title="BrowserID/FAQ">FAQ</a></dt> + <dd>Answers to common questions.</dd> + <dt><a href="/en-US/docs/Persona/Protocol_Overview" title="BrowserID/Protocol overview">Protocol overview</a></dt> + <dd>A mid-level technical overview of the underlying BrowserID protocol.</dd> + <dt><a href="/en-US/docs/persona/Crypto" title="MDN">Crypto</a></dt> + <dd>A look at the cryptographic concepts behind Persona and BrowserID.</dd> + <dt><a class="link-https" href="https://github.com/mozilla/id-specs/blob/prod/browserid/index.md" title="https://github.com/mozilla/id-specs/blob/master/browserid/index.md">The Spec</a></dt> + <dd>Deep technical details live here.</dd> + <dt><a href="/en-US/docs/Persona/Bootstrapping_Persona" title="Persona/Bootstrapping_Persona">The Persona Website</a></dt> + <dd>To get Persona going, we're hosting three services at <a class="link-https" href="https://login.persona.org" rel="freelink">https://login.persona.org</a>: a fallback Identity Provider, a portable implementation of the {{ domxref("navigator.id") }} APIs, and an identity assertion verification service.</dd> + <dt><a href="https://github.com/mozilla/browserid">The Persona Source Code</a></dt> + <dd>The code behind the Persona website lives in a repository on GitHub. Pull requests welcome!</dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<dl> + <dt> </dt> +</dl> diff --git a/files/th/mozilla/projects/index.html b/files/th/mozilla/projects/index.html new file mode 100644 index 0000000000..ac8536e706 --- /dev/null +++ b/files/th/mozilla/projects/index.html @@ -0,0 +1,15 @@ +--- +title: Mozilla Projects +slug: Mozilla/Projects +tags: + - Landing + - Mozilla + - NeedsContent + - NeedsTranslation + - Projects + - TopicStub +translation_of: Mozilla/Projects +--- +<p><span class="seoSummary">Mozilla has a number of projects other than <a href="/en-US/docs/Mozilla/Firefox">Firefox</a> itself. Many of these are components of Firefox or are tools used to create Firefox, but may be used by other projects as well. Here you'll find links to documentation about these projects.</span></p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/th/mozilla/projects/nss/index.html b/files/th/mozilla/projects/nss/index.html new file mode 100644 index 0000000000..d3838634d5 --- /dev/null +++ b/files/th/mozilla/projects/nss/index.html @@ -0,0 +1,174 @@ +--- +title: Network Security Services +slug: Mozilla/Projects/NSS +translation_of: Mozilla/Projects/NSS +--- +<p><strong><font><font>Network Security Services</font></font></strong><font><font> ( </font></font><strong><font><font>NSS</font></font></strong><font><font> ) คือชุดของไลบรารีที่ออกแบบมาเพื่อรองรับการพัฒนาข้ามแพลตฟอร์มของแอปพลิเคชันไคลเอนต์และเซิร์ฟเวอร์ที่เปิดใช้งานความปลอดภัย </font><font>แอปพลิเคชันที่สร้างด้วย NSS สามารถรองรับ SSL v3, TLS, PKCS # 5, PKCS # 7, PKCS # 11, PKCS # 12, S / MIME, X.509 v3 ใบรับรองและมาตรฐานความปลอดภัยอื่น ๆ</font></font></p> + +<p><font><font>สำหรับข้อมูลรายละเอียดเกี่ยวกับมาตรฐานการสนับสนุนให้ดู</font></font><a href="/en-US/docs/Overview_of_NSS" title="Overview_of_NSS"><font><font>ภาพรวมของ </font></font></a><font><font>NSS </font><font>สำหรับรายชื่อของคำถามที่ถามบ่อยดูที่</font><font>คำถามที่พบบ่อย</font></font></p> + +<p><font><font>NSS มีให้บริการภายใต้ Mozilla Public License </font><font>สำหรับข้อมูลเกี่ยวกับการดาวน์โหลดรุ่น NSS เป็นไฟล์ tar ดู</font></font><a href="https://developer.mozilla.org/en-US/docs/NSS_Sources_Building_Testing"><font><font>ดาวน์โหลด PKI </font></font></a><font><font>มา</font></font></p> + +<p><font><font>หากคุณเป็นนักพัฒนาและต้องการที่จะนำไปสู่การ NSS คุณอาจต้องการที่จะอ่านเอกสาร</font></font><a href="/en-US/docs/An_overview_of_NSS_Internals" title="/ en-US / docs / An_overview_of_NSS_Internals"><font><font>ภาพรวม highlevel รายละเอียดภายในของ NSS</font></font></a><font><font>และ</font></font><a href="/en-US/docs/Getting_Started_With_NSS" title="/ en-US / docs / Getting_Started_With_NSS"><font><font>การเริ่มต้นกับ </font></font></a><font><font>NSS</font></font></p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation"><font><font>เอกสารประกอบ</font></font></h2> + + <h3 id="ข้อมูลพื้นฐาน"><font><font>ข้อมูลพื้นฐาน</font></font></h3> + + <dl> + <dt><a href="/en-US/docs/Overview_of_NSS"><font><font>ภาพรวมของ NSS</font></font></a></dt> + <dd><font><font>ให้ข้อมูลสรุปสั้น ๆ เกี่ยวกับ NSS และความสามารถ</font></font></dd> + <dt><a href="/en-US/docs/NSS_FAQ"><font><font>คำถามที่พบบ่อย NSS</font></font></a></dt> + <dd><font><font>ตอบคำถามพื้นฐานเกี่ยวกับ NSS</font></font></dd> + <dt><a href="/en-US/docs/Introduction_to_Public-Key_Cryptography"><font><font>ข้อมูลเบื้องต้นเกี่ยวกับการเข้ารหัสคีย์สาธารณะ</font></font></a></dt> + <dd><font><font>อธิบายแนวคิดพื้นฐานของการเข้ารหัสคีย์สาธารณะที่รองรับ NSS</font></font></dd> + <dt><a href="/en-US/docs/Introduction_to_SSL"><font><font>ข้อมูลเบื้องต้นเกี่ยวกับ SSL</font></font></a></dt> + <dd><font><font>แนะนำโปรโตคอล SSL รวมถึงข้อมูลเกี่ยวกับการเข้ารหัสการเข้ารหัสที่รองรับโดย SSL และขั้นตอนที่เกี่ยวข้องกับ SSL handshake</font></font></dd> + </dl> + + <h3 id="เริ่มต้นใช้งาน"><font><font>เริ่มต้นใช้งาน</font></font></h3> + + <dl> + <dt><a href="/en-US/docs/NSS/NSS_Releases" title="NSS_releases"><font><font>NSS เผยแพร่</font></font></a></dt> + <dd><font><font>หน้านี้มีข้อมูลเกี่ยวกับ NSS รุ่นปัจจุบันและในอดีต</font></font></dd> + <dt><a href="/en-US/docs/NSS_Sources_Building_Testing"><font><font>รับซอร์สโค้ดและสร้างมัน</font></font></a></dt> + <dd><font><font>คำแนะนำในการสร้าง NSS บนแพลตฟอร์มต่างๆที่รองรับ</font></font></dd> + <dt><a href="/en-US/docs/Mozilla/Developer_guide/Source_Code/Mercurial"><font><font>รับซอร์สโค้ด Mozilla โดยใช้ Mercurial</font></font></a></dt> + <dd><font><font>ข้อมูลเกี่ยวกับการทำงานกับ Mercurial</font></font></dd> + <dt><a href="/en-US/docs/Mozilla/Developer_guide/Source_Code/CVS"><font><font>รับซอร์สโค้ด Mozilla โดยใช้ CVS (เลิกใช้แล้ว)</font></font></a></dt> + <dd><font><font>เอกสาร CVS เก่าที่เลิกใช้แล้ว</font></font></dd> + </dl> + + <h3 id="NSS_API"><font><font>NSS API</font></font></h3> + + <dl> + <dt><a href="/en-US/docs/Introduction_to_Network_Security_Services"><font><font>ข้อมูลเบื้องต้นเกี่ยวกับบริการรักษาความปลอดภัยเครือข่าย</font></font></a></dt> + <dd><font><font>ให้ภาพรวมของไลบรารี NSS และสิ่งที่คุณจำเป็นต้องรู้เพื่อใช้งาน</font></font></dd> + <dt><a href="NSS/SSL_functions"><font><font>NSS SSL ฟังก์ชั่นสาธารณะ</font></font></a></dt> + <dd><font><font>สรุป SSL API ที่ส่งออกโดยไลบรารีที่ใช้ร่วมกันของ NSS</font></font></dd> + <dt><a href="/en-US/docs/NSS_reference"><font><font>การอ้างอิง NSS SSL</font></font></a></dt> + <dd><font><font>API ใช้เพื่อเรียกใช้การดำเนินการ SSL</font></font></dd> + <dt><a href="NSS/NSS_API_GUIDELINES"><font><font>แนวทาง NSS API</font></font></a></dt> + <dd><font><font>อธิบายวิธีการจัดระเบียบไลบรารีและรหัสและแนวทางในการพัฒนาโค้ด (หลักการตั้งชื่อการจัดการข้อผิดพลาดความปลอดภัยของเธรด ฯลฯ )</font></font></dd> + <dt><a href="NSS/nss_tech_notes"><font><font>หมายเหตุทางเทคนิค NSS</font></font></a></dt> + <dd><font><font>ลิงก์ไปยังบันทึกทางเทคนิคของ NSS ซึ่งให้ข้อมูลล่าสุดเกี่ยวกับคุณสมบัติใหม่ของ NSS และเอกสารประกอบสำหรับหัวข้อขั้นสูงในการเขียนโปรแกรมด้วย NSS</font></font></dd> + </dl> + + <h3 id="เครื่องมือการทดสอบและรายละเอียดทางเทคนิคอื่น_ๆ"><font><font>เครื่องมือการทดสอบและรายละเอียดทางเทคนิคอื่น ๆ</font></font></h3> + + <dl> + <dt><a href="/en-US/docs/Mozilla/Projects/NSS/Building"><font><font>สร้างคำแนะนำสำหรับ NSS</font></font></a></dt> + <dd>Describe how to check out and build NSS releases.</dd> + </dl> + + <dl> + <dt><a href="/en-US/docs/Mozilla/Projects/NSS/NSS_Developer_Tutorial">NSS Developer Tutorial</a></dt> + <dd>How to make changes in NSS. Coding style, maintaining ABI compatibility.</dd> + </dl> + + <dl> + <dt><a href="NSS/Tools">NSS Tools</a></dt> + <dd>Tools for developing, debugging, and managing applications that use NSS.</dd> + <dt><a href="NSS/NSS_Sample_Code">Sample Code</a></dt> + <dd>Demonstrates how NSS can be used for cryptographic operations, certificate handling, SSL, etc.</dd> + <dt><a href="NSS/NSS_Third-Party_Code">Third-Party Code</a></dt> + <dd>A list of third-party code included in the NSS library.</dd> + <dt><a href="https://www-archive.mozilla.org/projects/security/pki/nss/testnss_32.html">NSS 3.2 Test Suite</a></dt> + <dd><strong>Archived version.</strong> Describes how to run the standard NSS tests.</dd> + <dt><a href="https://www-archive.mozilla.org/projects/security/pki/nss/performance_reports.html">NSS Performance Reports</a></dt> + <dd><strong>Archived version.</strong> Links to performance reports for NSS 3.2 and later releases.</dd> + <dt><a href="https://www-archive.mozilla.org/projects/security/pki/nss/nss-3.11/nss-3.11-algorithms.html">Encryption Technologies Available in NSS 3.11</a></dt> + <dd><strong>Archived version.</strong> Lists the cryptographic algorithms used by NSS 3.11.</dd> + <dt><a href="https://www-archive.mozilla.org/projects/security/pki/nss/loadable_certs.html">NSS 3.1 Loadable Root Certificates</a></dt> + <dd><strong><font><font>เวอร์ชันที่เก็บถาวร </font></font></strong><font><font>อธิบายโครงร่างสำหรับการโหลดใบรับรอง CA หลัก</font></font></dd> + <dt><a href="https://www-archive.mozilla.org/projects/security/pki/nss/db_formats.html"><font><font>cert7.db</font></font></a></dt> + <dd><strong><font><font>เวอร์ชันที่เก็บถาวร </font></font></strong><font><font>รูปแบบทั่วไปของฐานข้อมูล cert7.db</font></font></dd> + </dl> + + <h3 id="ข้อมูล_PKCS_11"><font><font>ข้อมูล PKCS # 11</font></font></h3> + + <ul> + <li><a href="/en-US/docs/PKCS11" title="PKCS11"><font><font>เอกสารประกอบเกี่ยวกับโมดูล PKCS # 11</font></font></a></li> + <li><a href="/en-US/docs/PKCS11_Implement"><font><font>การใช้ PKCS # 11 สำหรับ NSS</font></font></a></li> + <li><a href="/en-US/docs/PKCS11_Module_Specs" title="PKCS11_Module_Specs"><font><font>สตริง NSS ใช้เพื่อโหลดโมดูล PKCS # 11</font></font></a></li> + <li><a href="/en-US/docs/PKCS11_FAQ"><font><font>PKCS # 11 คำถามที่พบบ่อย</font></font></a></li> + <li><a href="/en-US/docs/PKCS11_Jar_Install"><font><font>การใช้ JAR Installation Manager เพื่อติดตั้งโมดูลการเข้ารหัส PKCS # 11</font></font></a></li> + <li><a href="https://www-archive.mozilla.org/projects/security/pki/pkcs11/"><font><font>PKCS # 11 Conformance Testing - เวอร์ชันที่เก็บถาวร</font></font></a></li> + </ul> + + <dl> + </dl> + + <h3 id="ใบรับรอง_CA_ที่โหลดไว้ล่วงหน้าใน_NSS"><font><font>ใบรับรอง CA ที่โหลดไว้ล่วงหน้าใน NSS</font></font></h3> + + <ul> + <li><a href="https://www.mozilla.org/projects/security/certs/policy/"><font><font>นโยบายใบรับรอง Mozilla CA</font></font></a></li> + <li><a href="https://wiki.mozilla.org/CA/Included_Certificates"><font><font>รายการใบรับรอง CA ที่โหลดไว้ล่วงหน้า</font></font></a> + <ul> + <li><font><font>ผู้ใช้รายการนี้ต้องพิจารณาการตั้งค่าบิตความน่าเชื่อถือสำหรับใบรับรองหลักที่รวมอยู่ </font></font><a href="https://www.imperialviolet.org/2012/01/30/mozillaroots.html"><font><font>ข้อมูลเพิ่มเติม</font></font></a><font><font> , </font></font><a href="https://github.com/agl/extract-nss-root-certs"><font><font>สกัดรากและบิตความไว้วางใจ</font></font></a></li> + </ul> + </li> + </ul> + + <dl> + </dl> + + <h3 id="NSS_สร้างขึ้นบน_Netscape_Portable_Runtime_NSPR"><font><font>NSS สร้างขึ้นบน Netscape Portable Runtime (NSPR)</font></font></h3> + + <dl> + <dt><a href="NSPR"><font><font>Netscape Portable Runtime</font></font></a></dt> + <dd><font><font>หน้าโครงการ NSPR</font></font></dd> + <dt><a href="/en-US/docs/Mozilla/Projects/NSPR/Reference"><font><font>การอ้างอิง NSPR</font></font></a></dt> + <dd><font><font>เอกสาร NSPR API</font></font></dd> + </dl> + + <h3 id="ข้อมูลเพิ่มเติม"><font><font>ข้อมูลเพิ่มเติม</font></font></h3> + + <ul> + <li><a href="/en-US/docs/JavaScript_crypto" title="JavaScript_crypto"><font><font>การใช้อ็อบเจกต์ window.crypto จาก JavaScript</font></font></a></li> + <li><a href="/en-US/docs/HTTP_Delegation" title="HTTP_Delegation"><font><font>การมอบหมายการดาวน์โหลด HTTP สำหรับ OCSP</font></font></a></li> + <li><a href="/en-US/docs/TLS_Cipher_Suite_Discovery" title="TLS_Cipher_Suite_Discovery"><font><font>TLS Cipher Suite Discovery</font></font></a></li> + <li><a href="/en-US/docs/NSS_Certificate_Download_Specification" title="NSS_Certificate_Download_Specification"><font><font>ข้อกำหนดการดาวน์โหลดใบรับรอง NSS</font></font></a></li> + <li><a href="/en-US/docs/NSS/FIPS_Mode_-_an_explanation" title="โหมด FIPS - คำอธิบาย"><font><font>โหมด FIPS - คำอธิบาย</font></font></a></li> + <li><a href="/en-US/docs/NSS_Key_Log_Format" title="รูปแบบบันทึกคีย์ NSS"><font><font>รูปแบบของไฟล์บันทึกคีย์</font></font></a></li> + <li><font><font>ดู</font></font><a href="/en-US/docs/tag/NSS" title="/ en-US / docs / tag / NSS"><font><font>บทความที่เกี่ยวข้องกับ NSS ทั้งหมดบน MDN</font></font></a></li> + </ul> + + <h3 id="การวางแผน"><font><font>การวางแผน</font></font></h3> + + <p><font><font>ข้อมูลเกี่ยวกับการวางแผน NSS สามารถพบได้ที่</font></font><a class="external" href="https://wiki.mozilla.org/NSS"><font><font>wiki.mozilla.org</font></font></a><font><font>รวมถึง:</font></font></p> + + <ul> + <li><a class="external" href="https://wiki.mozilla.org/FIPS_Validation"><font><font>การตรวจสอบ FIPS</font></font></a></li> + <li><a class="external" href="https://wiki.mozilla.org/NSS:Roadmap"><font><font>หน้า NSS Roadmap</font></font></a></li> + <li><a href="https://fedoraproject.org/wiki/User:Mitr/NSS:DeveloperFriendliness" title="https://fedoraproject.org/wiki/User:Mitr/NSS:Developer ความเป็นมิตร"><font><font>โครงการปรับปรุง NSS</font></font></a></li> + </ul> + </td> + <td> + <h2 class="Community" id="Community" name="Community"><font><font>ชุมชน</font></font></h2> + + <ul> + <li><font><font>ดูฟอรัม Mozilla Security ...</font></font></li> + </ul> + + <p><font><font>{{DiscussionList ("dev-security", "mozilla.dev.security")}}</font></font></p> + + <ul> + <li><font><font>ดูฟอรัม Mozilla Cryptography ...</font></font></li> + </ul> + + <p><font><font>{{DiscussionList ("dev-tech-crypto", "mozilla.dev.tech.crypto")}}</font></font></p> + + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics"><font><font>หัวข้อที่เกี่ยวข้อง</font></font></h2> + + <ul> + <li><a href="/en-US/docs/Security" title="ความปลอดภัย"><font><font>ความปลอดภัย</font></font></a></li> + </ul> + </td> + </tr> + </tbody> +</table> diff --git a/files/th/mozilla/qa/index.html b/files/th/mozilla/qa/index.html new file mode 100644 index 0000000000..d79bac2238 --- /dev/null +++ b/files/th/mozilla/qa/index.html @@ -0,0 +1,239 @@ +--- +title: 'QA: Quality assurance at Mozilla' +slug: Mozilla/QA +tags: + - Landing + - QA + - Testing +translation_of: Mozilla/QA +--- +<p><font><font>มอซิลลากิจกรรมการประกันคุณภาพการประกัน (QA) ทีมไดรฟ์คุณภาพซอฟต์แวร์ทั่ว Mozilla และมีบทบาทสำคัญในการปล่อยความหลากหลายของผลิตภัณฑ์ซอฟต์แวร์ในตาราง </font><font>ภายในแต่ละโครงการใน Mozilla เราทำงานในการสำรวจคุณสมบัติใหม่เขียนและดำเนินการทดสอบการค้นพบและยื่นข้อบกพร่องในการสร้างและการบำรุงรักษาเครื่องมือในการเก็บรวบรวมและวิเคราะห์ตัวชี้วัดและการสนับสนุนการเปิดตัวผลิตภัณฑ์ระดับโลกที่ส่งเสริมการเปิดเว็บ</font></font></p> + +<p><span class="seoSummary"><font><font>ที่นี่คุณจะพบบทความและเครื่องมือที่จะช่วยให้คุณเกียร์ขึ้นไปร่วมทีม QA ทดสอบ Firefox เพื่อให้แน่ใจว่าแต่ละรุ่นจะดีเท่าที่จะสามารถ</font></font></span></p> + +<h2 id="เริ่ม"><font><font>เริ่ม</font></font></h2> + +<ul class="card-grid"> + <li><span><font><font>ฉันจะช่วยทดสอบ?</font></font></span> + + <p><font><font>ยังมีอีกหลายวิธีที่คุณจะกลายเป็น</font></font><a href="/en-US/docs/Mozilla/QA/How_can_I_help_test_"><font><font>ผู้มีส่วนร่วมของชุมชน</font></font></a><font><font>ให้กับทีมงานที่มีคุณภาพของ Mozilla</font></font></p> + </li> + <li><span><font><font>เป็นโรคจิต</font></font></span> + <p><font><font>ทุกโครงการ Mozilla ใช้</font></font><a href="https://bugzilla.mozilla.org/"><font><font>Bugzilla</font></font></a><font><font>เพื่อติดตามข้อบกพร่อง </font><font>เรียนรู้วิธีการ</font></font><a href="/en-US/docs/Mozilla/QA/Bug_writing_guidelines" title="/ en-US / เอกสาร / Mozilla / QA / Bug_writing_guidelines"><font><font>รายงานข้อผิดพลาด</font></font></a><font><font>และทำความคุ้นเคยกับ</font></font><a href="/en-US/docs/What_to_do_and_what_not_to_do_in_Bugzilla"><font><font>สิ่งที่ต้องทำใน </font></font></a><font><font>Bugzilla</font></font></p> + </li> + <li><span><font><font>เหตุการณ์ที่เกิดขึ้น</font></font></span> + <p><font><font>มีส่วนร่วมในรายสัปดาห์ของเรา</font></font><a href="/en-US/docs/Mozilla/QA/Bug_Verification_Day"><font><font>Bug วันตรวจสอบ</font></font></a><font><font>หรือ</font><font>ข้อผิดพลาดวัน Triage </font><font>คุณยังอาจ</font><a href="/en-US/docs/Mozilla/QA/Organizing_a_Testday"><font>จัด testday</font></a><font>สำหรับชุมชนท้องถิ่นของคุณ!</font></font></p> + </li> + <li><span><font><font>ไออาร์ซี</font></font></span> + <p><a href="/en-US/docs/Mozilla/QA/Getting_Started_with_IRC"><font><font>เริ่มต้นกับไออาร์ซี</font></font></a><font><font>ในรูปแบบหลักของการสื่อสารสำหรับสมาชิกของชุมชน Mozilla</font></font></p> + </li> +</ul> + +<h2 id="เป็นโรคจิต"><font><font>เป็นโรคจิต</font></font></h2> + +<div class="row topicpage-table"> +<div class="section"> +<h3 id="รายงานข้อบกพร่อง"><font><font>รายงานข้อบกพร่อง</font></font></h3> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Bugzilla"><font><font>Bugzilla</font></font></a></dt> + <dd><font><font>ทุกโครงการ Mozilla ใช้</font></font><a href="https://bugzilla.mozilla.org/"><font><font>Bugzilla</font></font></a><font><font>เพื่อติดตามข้อบกพร่อง </font><font>คุณจะต้อง</font></font><a href="https://bugzilla.mozilla.org/createaccount.cgi"><font><font>สร้างบัญชีกับ Bugzilla</font></font></a><font><font>เพื่อรายงานข้อบกพร่องและ triage พวกเขา</font></font></dd> + <dt><a href="/en-US/docs/Mozilla/QA/Bug_writing_guidelines" title="/ en-US / เอกสาร / Mozilla / QA / Bug_writing_guidelines"><font><font>แนวทางการเขียนข้อผิดพลาด</font></font></a></dt> + <dd><font><font>ได้อย่างมีประสิทธิภาพมากขึ้นข้อผิดพลาดจะมีการรายงานที่มีแนวโน้มมากขึ้นที่เป็นวิศวกรจริงจะแก้ไขได้ </font><font>โดยปฏิบัติตามหลักเกณฑ์เหล่านี้คุณสามารถช่วยให้มั่นใจว่าข้อบกพร่องของคุณอยู่ที่ด้านบนของกองวิศวกร Mozilla 'และได้รับการแก้ไข</font></font></dd> + <dt><a href="/en-US/docs/Mozilla/QA/A_Bugs_Life" title="/ en-US / เอกสาร / Mozilla / QA / A_Bugs_Life"><font><font>ชีวิตของแมลง</font></font></a></dt> + <dd><font><font>กวดวิชานี้จะให้ภาพรวมของสิ่งที่เกิดขึ้นในรัฐที่ข้อผิดพลาดที่จะผ่านไปเช่นเดียวกับวิธีการที่จะไปจากที่หนึ่งไปยังอีกที่อยู่ในชีวิตทั้งหมด </font><font>นอกจากนี้ยังอธิบายความหมายของธง / คำหลักที่ใช้ในการควบคุมคุณภาพ</font></font></dd> + <dt><a href="/en-US/docs/Mozilla/QA/Filing_Crash_Bugs"><font><font>ยื่นข้อบกพร่องผิดพลาด</font></font></a></dt> + <dd><font><font>เอกสารนี้แสดงแนวทางและเคล็ดลับเกี่ยวกับวิธีการยื่นรายงานข้อผิดพลาดสำหรับการเกิดปัญหาในทางที่จะช่วยในการแก้จุดบกพร่องและแก้ไขปัญหาที่รายงาน</font></font></dd> +</dl> +</div> + +<div class="section"> +<h3 id="triaging_ข้อบกพร่อง"><font><font>triaging ข้อบกพร่อง</font></font></h3> + +<dl> + <dt><a href="/en-US/docs/Mozilla/QA/Confirming_unconfirmed_bugs" title="EN-US / เอกสาร / ยืนยันข้อบกพร่องที่ไม่ยืนยัน"><font><font>ยืนยันข้อบกพร่องที่ไม่ยืนยัน</font></font></a></dt> + <dd><font><font>แจ้งรายงานข้อผิดพลาดที่มีประโยชน์และปิดส่วนที่เหลือ</font></font></dd> + <dt><a href="/en-US/docs/Mozilla/QA/Triaging_Bugs_for_Firefox" title="/ en-US / เอกสาร / Mozilla / QA / Triaging_Bugs_for_Firefox"><font><font>triaging Bugs สำหรับ Firefox</font></font></a></dt> + <dd><font><font>ข้อมูลเกี่ยวกับกระบวนการข้อผิดพลาดทั้งหมด triaging - การประมวลผลจากข้อบกพร่องที่เข้ามาเพื่อแคบลงขั้นตอนในการทำซ้ำข้อบกพร่อง</font></font></dd> + <dt><a href="/en-US/docs/Screening_duplicate_bugs"><font><font>การตรวจคัดกรองโรคจิตที่ซ้ำกัน</font></font></a></dt> + <dd><font><font>ช่วยให้ได้รับการแก้ไขข้อบกพร่องได้เร็วขึ้นโดยการคัดกรองรายงานเข้ามาซ้ำกัน</font></font></dd> + <dt><a href="/en-US/docs/What_to_do_and_what_not_to_do_in_Bugzilla"><font><font>หลักเกณฑ์ทั่วไป</font></font></a></dt> + <dd><font><font>สิ่งที่ต้องทำและสิ่งที่ไม่ต้องทำใน Bugzilla</font></font></dd> +</dl> +</div> +</div> + +<hr> +<h2 id="การทดสอบด้วยตนเอง"><font><font>การทดสอบด้วยตนเอง</font></font></h2> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Mozilla/QA/Test_Case_Writing_Primer"><font><font>คู่มือการใช้งานกรณีทดสอบการเขียนรองพื้น</font></font></a></dt> + <dd><font><font>วิธีการเขียนคู่มือกรณีทดสอบที่เหมาะสม</font></font></dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><a href="https://moztrap.mozilla.org/"><font><font>MozTrap</font></font></a></dt> + <dd><font><font>คู่มือ Mozilla ควบคุมคุณภาพของกรณีทดสอบที่อาศัยอยู่ใน MozTrap เป็นเครื่องมือในบ้าน </font><font>คุณจะต้องมี ID Persona เพื่อเข้าสู่ระบบและดำเนินการกรณีทดสอบ </font><font>เรียนรู้วิธีการทำงานกับ</font></font><a href="https://moztrap.readthedocs.org"><font><font>MozTrap </font></font></a><font><font>เอกสาร</font></font></dd> +</dl> +</div> +</div> + +<hr> +<h2 id="การทดสอบอัตโนมัติ"><font><font>การทดสอบอัตโนมัติ</font></font></h2> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Mozilla/QA/Automated_testing" title="/ en-US / เอกสาร / Mozilla / QA / Automated_testing"><font><font>การทดสอบอัตโนมัติที่ Mozilla</font></font></a></dt> + <dd><font><font>เอกสารเกี่ยวกับการสร้างและการใช้การทดสอบแบบอัตโนมัติรหัส Mozilla</font></font></dd> + <dt><a href="/en-US/docs/Mozilla/QA/Developing_tests" title="EN-US / เอกสาร / Developing_Tests"><font><font>การทดสอบการพัฒนา</font></font></a></dt> + <dd><font><font>ตรวจสอบให้แน่ใจว่าการเปลี่ยนแปลงในอนาคตที่จะ Mozilla ไม่ทำลายสิ่งที่ทำงานในปัจจุบันได้อย่างถูกต้อง</font></font></dd> + <dt><a href="/en-US/docs/Mozilla/QA/Avoiding_intermittent_oranges" title="EN-US / เอกสาร / QA / หลีกเลี่ยงส้มเนื่อง"><font><font>หลีกเลี่ยงความล้มเหลวในการทดสอบเป็นระยะ ๆ</font></font></a></dt> + <dd><font><font>ข้อเสนอแนะสำหรับวิธีที่จะทำให้การทดสอบของคุณน่าเชื่อถือมากขึ้นจึงช่วยให้เพื่อหลีกเลี่ยงการสุ่มความล้มเหลวในการทดสอบเป็นระยะ ๆ</font></font></dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Mozilla/QA/Robocop" title="/ en-US / เอกสาร / Mozilla / QA / Robocop"><font><font>Robocop</font></font></a></dt> + <dd><font><font>Robocop เป็นระบบทดสอบอัตโนมัติใช้สำหรับ Firefox สำหรับ Android </font><font>เรียนรู้ของ</font></font><a href="/en-US/docs/Mozilla/QA/Robocop/Code_style_guidelines"><font><font>แนวสไตล์รหัส</font></font></a></dd> + <dt><a href="/en-US/docs/Mozilla/QA/Marionette"><font><font>หุ่นเชิด</font></font></a></dt> + <dd><font><font>เริ่มต้นกับการทดสอบ Marionette UI</font></font></dd> + <dt><a href="/en-US/docs/Mozilla/QA/web-platform-tests"><font><font>แพลตฟอร์มการทดสอบเว็บ</font></font></a></dt> + <dd><font><font>เรียนรู้วิธีการใช้มาตรฐานอุตสาหกรรม, เบราว์เซอร์ข้ามแพลตฟอร์ม</font></font><a href="http://testthewebforward.org/docs/"><font><font>ระบบการทดสอบ Runtime เว็บ</font></font></a><font><font>จาก</font></font><a href="https://www.w3.org/"><font><font>W3C</font></font></a><font><font>ใช้โดย Mozilla และอื่น ๆ เพื่อให้แน่ใจว่าการทำงานร่วมกันเบราว์เซอร์</font></font></dd> + <dt><a href="/en-US/docs/Mozilla/QA/external-media-tests"><font><font>การทดสอบการบันทึกข้อมูลภายนอก</font></font></a></dt> + <dd><font><font>เริ่มต้นการทดสอบองค์ประกอบวิดีโอ HTML5 โดยใช้ VideoPuppeteer เป็น</font></font><a href="/en-US/docs/Mozilla/QA/Marionette"><font><font>หุ่นกระบอก</font></font></a><font><font> - ชุดทดสอบชั่นที่ใช้ในการทดสอบเว็บไซต์เช่น YouTube และ Netflix</font></font></dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Firefox_QE"><font><font>Firefox QE</font></font></h2> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Mozilla/QA/Triaging_Bugs_for_Firefox" title="/ en-US / เอกสาร / Mozilla / QA / Triaging_Bugs_for_Firefox"><font><font>triaging Bugs สำหรับ Firefox</font></font></a></dt> + <dd><font><font>ข้อมูลเกี่ยวกับกระบวนการข้อผิดพลาดทั้งหมด triaging - การประมวลผลจากข้อบกพร่องที่เข้ามาเพื่อทำให้แคบลงตามขั้นตอนในการทำซ้ำข้อผิดพลาด</font></font></dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Mozilla/QA/Tips_and_Tricks"><font><font>เคล็ดลับและเทคนิค</font></font></a></dt> + <dd><font><font>เคล็ดลับและเทคนิคเหล่านี้จะทำให้ชีวิตของคุณง่ายขึ้นเมื่อคุณมีการทดสอบ</font></font></dd> +</dl> +<a href="/en-US/docs/Downloading_Nightly_or_Trunk_Builds"><font><font>ดาวน์โหลดต่อคืนหรือลำต้นสร้าง</font></font></a> + +<dl> + <dd><font><font>ทุก 24 ชั่วโมงเป็น "ยามค่ำคืน" สร้างที่ถูกสร้างขึ้นทดสอบทั่วโลกดาวน์โหลดและการทดสอบการรายงานที่พวกเขาไปพร้อมกับข้อผิดพลาดใด ๆ ที่ตีพวกเขา </font></font></dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Mozilla/Command_Line_Options"><font><font>เลือกบรรทัดคำสั่ง</font></font></a></dt> + <dd><font><font>เลือกบรรทัดคำสั่งที่ใช้ในการระบุตัวเลือกเริ่มต้นที่แตกต่างกันสำหรับ Firefox</font></font></dd> + <dt><a href="/en-US/docs/Mozilla/Performance/Reporting_a_Performance_Problem"><font><font>รายงานปัญหาประสิทธิภาพการทำงาน</font></font></a></dt> + <dd><font><font>บทความนี้จะแนะนำคุณในการรายงานปัญหาประสิทธิภาพการทำงานโดยใช้</font><font>นามสกุลตุ๊กแก Profiler</font></font></dd> + <dt><a href="/en-US/docs/Crash_reporting"><font><font>รายงานความผิดพลาด</font></font></a></dt> + <dd><font><font>เรือ Firefox กับโอเพนซอร์สระบบการรายงานความผิดพลาด</font></font></dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Firefox_สำหรับ_Android"><font><font>Firefox สำหรับ Android</font></font></h2> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Mozilla/QA/Mobile_Firefox"><font><font>มือถือ Firefox</font></font></a></dt> + <dd><font><font>Firefox สำหรับ Android เป็นรุ่นมือถือของ Firefox ด้วยรูปลักษณ์ Android พื้นเมืองและความรู้สึก</font></font></dd> + <dt><a href="/en-US/Firefox_for_Android/Compatibility_Testing"><font><font>ทดสอบความเข้ากัน</font></font></a></dt> + <dd><font><font>ช่วยให้เราระบุเว็บไซต์ที่ไม่ทำงานได้ดีใน Firefox โดยการรายงานปัญหาเฉพาะที่คุณพบในการสอบสวนของคุณ</font></font></dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Mozilla/QA/Fennec_Android:_Logging_with_the_Android_Debug_and_Logcat"><font><font>เข้าสู่ระบบด้วยสะพาน Android Debug และ Logcat</font></font></a></dt> + <dd><font><font>บทความนี้จะให้คำแนะนำในการดาวน์โหลดและการตั้งค่าสภาพแวดล้อมที่หนึ่งที่สามารถเข้าถึงและดูบันทึกระบบ Android</font></font></dd> + <dt><a href="/en-US/docs/Mozilla/QA/Firefox_Mobile:_Enabling_the_Error_Console"><font><font>การเปิดใช้งานข้อผิดพลาดคอนโซล</font></font></a></dt> + <dd><font><font>ดูบทความของ Mozilla Hacks ใน</font></font><a class="external external-icon" href="https://hacks.mozilla.org/2012/08/remote-debugging-on-firefox-for-android/"><font><font>การแก้จุดบกพร่องระยะไกลบน Firefox สำหรับ Android</font></font></a><font><font>สำหรับเนื้อหาเว็บ </font><font>หากคุณต้องการที่จะแก้ปัญหาเบราว์เซอร์ Firefox ตัวเองใช้ของ Android </font><font>logcat ADB</font></font></dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Firefox_OS"><font><font>Firefox OS</font></font></h2> + +<div class="row topicpage-table"> +<div class="section"> +<h3 id="การทดสอบด้วยตนเอง_2"><font><font>การทดสอบด้วยตนเอง</font></font></h3> + +<dl> + <dt><a href="/en-US/Firefox_OS/Simulator_vs_Emulator_vs_Device"><font><font>จำลอง VS Emulator VS อุปกรณ์</font></font></a></dt> + <dd><font><font>เหล่านี้มีสามตัวเลือกขั้นพื้นฐานเมื่อมันมาถึงได้รับสภาพแวดล้อม Firefox OS เพื่อที่จะทำงานบนหรือการพัฒนาสำหรับ Firefox OS</font></font></dd> + <dt><a href="/en-US/Firefox_OS/Debugging"><font><font>แก้จุดบกพร่อง</font></font></a></dt> + <dd><font><font>ค้นพบเครื่องมือที่แตกต่างกันในการกำจัดของคุณเพื่อแก้ปัญหารหัส Firefox ระบบปฏิบัติการของคุณ</font></font></dd> + <dt><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Filing_bugs_against_Firefox_OS"><font><font>แจ้งข้อผิดพลาด</font></font></a></dt> + <dd><font><font>บทความนี้จะให้คำแนะนำเกี่ยวกับข้อบกพร่องการยื่นกับโครงการ Firefox OS รวมทั้ง Gaia และ B2G</font></font></dd> +</dl> +</div> + +<div class="section"> +<h3 id="แพลทฟอร์ม_(Gecko)"><font><font>แพลทฟอร์ม (Gecko)</font></font></h3> + +<dl> + <dt><a href="/en-US/Firefox_OS/Platform/Automated_testing"><font><font>การทดสอบแบบอัตโนมัติ</font></font></a></dt> + <dd><font><font>เรียนรู้แง่มุมต่าง ๆ ของการทดสอบ Firefox OS, รวมทั้งการทดสอบการทำงานที่แตกต่างกันระบบอัตโนมัติและผลการรายงานและการติดตาม</font></font></dd> + <dt><a href="/en-US/Firefox_OS/Platform/Automated_testing/Gaia_performance_tests"><font><font>การทดสอบประสิทธิภาพ Gaia</font></font></a></dt> + <dd><font><font>บทความนี้จะให้ข้อมูลเกี่ยวกับการทำงานการทดสอบประสิทธิภาพการทำงานบน Gaia เช่นเดียวกับวิธีการสร้างการทดสอบใหม่</font></font></dd> + <dt><a href="/en-US/Firefox_OS/Platform/Feature_support_chart"><font><font>คุณลักษณะแผนภูมิการสนับสนุน</font></font></a></dt> + <dd><font><font>มีหลายสร้างแตกต่างกันของ Firefox OS ที่คุณสามารถดาวน์โหลดหรือสร้างสำหรับตัวเองและมีความแตกต่างบางอย่างระหว่างประเภทของคุณสมบัติที่มีอยู่ในแต่ละอุปกรณ์</font></font></dd> +</dl> +</div> +</div> + +<hr> +<h2 id="เว็บ_QA"><font><font>เว็บ QA</font></font></h2> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Mozilla/QA/Reducing_testcases" title="EN-US / เอกสาร / testcases ลด"><font><font>ลด testcases</font></font></a></dt> + <dd><font><font>ปรับปรุงการรายงานข้อผิดพลาดโดยการเปิดหน้าเว็บแบ่งออกเป็น testcases ง่ายซึ่งช่วยให้นักพัฒนาสามารถเข้าใจข้อผิดพลาดและนอกจากนี้ยังสามารถใช้สำหรับการสร้างการทดสอบแบบอัตโนมัติ</font></font></dd> + <dt><a href="/en-US/docs/Mozilla/QA/Managing_Web_QA_XFails"><font><font>ผู้จัดการ XFails</font></font></a></dt> + <dd><font><font>หนึ่งในงานที่ต่อเนื่องของแผนก QA เว็บเป็น xfails ผู้จัดการ </font><font>เอกสารนี้จะอธิบายสิ่งที่ xfails มีและอธิบายขั้นตอนหนึ่งที่สามารถใช้เวลาในการตรวจสอบและปรับปรุงพวกเขา</font></font></dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Mozilla/QA/Running_Web_QA_automated_tests"><font><font>การทดสอบการทำงานอัตโนมัติ</font></font></a></dt> + <dd><font><font>ดังนั้นคุณสนใจที่จะเอื้อต่อการควบคุมคุณภาพของ Mozilla เว็บโครงการอัตโนมัติ แต่ไม่ทราบว่าจะเริ่มต้นอย่างไร </font><font>เอกสารนี้จะช่วยให้คุณได้รับและทำงานชุดของการทดสอบในประเทศ</font></font></dd> +</dl> +</div> +</div> + +<hr> +<h2 id="อภิธานศัพท์"><font><font>อภิธานศัพท์</font></font></h2> + +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Glossary/Smoke_Test"><font><font>ทดสอบสูบบุหรี่</font></font></a></dt> + <dd></dd> +</dl> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://lists.mozilla.org/listinfo/dev-quality">Mailing list</a></li> + <li><a href="https://quality.mozilla.org/">Blog</a></li> + <li><a href="/en-US/docs/tag/QA" title="EN-US / เอกสาร / แท็ก / ควบคุมคุณภาพ"><font><font>ดูเอกสารทั้งหมดที่ติดแท็ก QA</font></font></a></li> + <li><a href="/en-US/docs/tag/QA:Tools" title="EN-US / เอกสาร / Tag / QA: เครื่องมือ"><font><font>ดูเอกสารทั้งหมด QA แท็ก: เครื่องมือ</font></font></a></li> +</ul> diff --git a/files/th/mozilla/tech/index.html b/files/th/mozilla/tech/index.html new file mode 100644 index 0000000000..8a54865338 --- /dev/null +++ b/files/th/mozilla/tech/index.html @@ -0,0 +1,15 @@ +--- +title: Mozilla technologies +slug: Mozilla/Tech +tags: + - Landing + - Mozilla + - NeedsTranslation + - Reference + - TopicStub + - XUL +translation_of: Mozilla/Tech +--- +<p>Mozilla has several technologies used as components of its projects. These are documented here.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/th/mozilla_mathml_project/index.html b/files/th/mozilla_mathml_project/index.html new file mode 100644 index 0000000000..2b45c419b6 --- /dev/null +++ b/files/th/mozilla_mathml_project/index.html @@ -0,0 +1,76 @@ +--- +title: Mozilla MathML Project +slug: Mozilla_MathML_Project +tags: + - MathML + - MathML Project + - NeedsTranslation + - TopicStub +translation_of: Mozilla/MathML_Project +--- +<h2 id="Updates">Updates</h2> +<p><img alt="mathboard.png" class="internal default" src="/@api/deki/files/4238/=mathboard.png" style="float: right;"></p> +<ul> + <li><a href="/en/Mozilla_MathML_Project/Status" title="en/Mozilla MathML Project/Status">Status of each tag</a></li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite" title="en/Mozilla MathML Project/MathML3Testsuite">Result of the MathML 3 Testsuite</a></li> + <li><a class="external" href="http://www.wg9s.com/mozilla/firefox/">Unofficial nightly builds with MathML patches applied</a> (maintained by Bill Gianopoulos)</li> + <li><a href="/en-US/docs/Mozilla_MathML_Project/Student_Projects" title="/en-US/docs/Mozilla_MathML_Project/Student_Projects">Student Projects</a></li> + <li><a href="/en/Mozilla_MathML_Project/Updates" title="en/Mozilla_MathML_Project/Updates">All Updates...</a> + <p><span style="display: none;"> </span></p> + </li> +</ul> +<h3 id="November_16_2012">November 16, 2012</h3> +<p><a href="http://www.glazman.org/weblog/dotclear/index.php?post/2012/11/16/MathML-and-Thunderbird">MathML and Thunderbird</a></p> +<h3 id="November_14_2012">November 14, 2012</h3> +<p><a href="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/11/14/Writing-mathematics-in-emails">Writing mathematics in emails </a></p> +<h3 id="October_12_2012">October 12, 2012</h3> +<p>MathML has been enabled in Chrome Canary!</p> +<h3 id="September_25_2012">September 25, 2012</h3> +<p>Story of a MathML summer project by Quentin Headen: <a href="http://phaseshiftsoftware.com/post/538" title="http://phaseshiftsoftware.com/post/538">Summer of Mozilla</a>.</p> +<h3 id="September_1_2012">September 1, 2012</h3> +<p><a href="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/09/01/Mozilla-MathML-Project%3A-Roadmap" title="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/09/01/Mozilla-MathML-Project%3A-Roadmap">Mozilla MathML Project: Roadmap</a></p> +<p>Thank you to all the contributors who have worked on the MathML project this summer!</p> +<h3 id="May_3_2012">May 3, 2012</h3> +<p>New MathJax option available in Wikipedia. If you have a Wikipedia account, <a class="external" href="http://groups.google.com/group/mozilla.dev.tech.mathml/browse_frm/thread/0ec9c3ccaee4964c#">mathematical formulas can now be rendered with MathML</a>!</p> +<h2 id="Community">Community</h2> +<ul> + <li>View Mozilla forums... {{ DiscussionList("dev-tech-mathml", "mozilla.dev.tech.mathml") }}</li> + <li><a class="link-irc" href="irc://irc.mozilla.org/%23mathml" rel="external" title="irc://irc.mozilla.org/%23mathml">IRC channel</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/MathML:Home_Page">Wiki used by contributors</a> - check out the latest developments and help us improving MathML in Mozilla.</li> +</ul> +<h2 id="Links">Links</h2> +<ul> + <li>Installing <a href="/en/Mozilla_MathML_Project/Fonts" title="en/Mozilla MathML Project/Fonts">fonts for Mozilla's MathML engine</a></li> + <li><a class="external" href="http://www.w3.org/TR/MathML3/">MathML Version 3.0</a> - W3C Recommendation, 21 October 2010</li> + <li><a class="external" href="http://www.w3.org/Math/testsuite/"><abbr>W3C</abbr> <abbr>MathML</abbr> Test Suite</a> - Designed to check the implementation of each element one attribute (or built-in rendering behavior) at a time in a fairly thorough manner.</li> + <li><a href="/en/MathML" title="MathML">MathML in Mozilla Developer Network</a></li> +</ul> +<h3 id="Sample_MathML_Documents">Sample <abbr>MathML</abbr> Documents</h3> +<ul> + <li><a href="/en/Mozilla_MathML_Project/Screenshots" title="en/Mozilla MathML Project/Screenshots">Screenshots</a></li> + <li><a class="external" href="http://www.mozilla.org/projects/mathml/start.html"><abbr>MathML</abbr> Start Page</a> - with translations in different languages (<a class="external" href="http://www.mozilla.org/projects/mathml/start-ar.html">Arabic</a>, <a class="external" href="http://www.mozilla.org/projects/mathml/start-zh.html">Chinese</a>, <a class="external" href="http://www.mozilla.org/projects/mathml/start-hebrew.html">Hebrew</a>, <a class="external" href="http://www.mozilla.org/projects/mathml/start-thai.html">Thai</a>)</li> + <li><a class="external" href="http://www.mozilla.org/projects/mathml/demo/basics.html">MathML Basics</a> - Document tailored to display correctly with just the Symbol font that is pre-installed by default on most OS configurations.</li> + <li><a class="external" href="http://www.mozilla.org/projects/mathml/demo/texvsmml.html"><abbr>MathML</abbr> Torture Test</a> - Comparative testing of MathML rendering against TeX.</li> + <li>Demo of some MathML tags: <a class="external" href="http://www.mozilla.org/projects/mathml/demo/mfrac.html">mfrac</a>, <a class="external" href="http://www.mozilla.org/projects/mathml/demo/mo.html">mo</a>, <a class="external" href="http://www.mozilla.org/projects/mathml/demo/mtable.html">mtable</a>, <a class="external" href="http://www.mozilla.org/projects/mathml/demo/mspace.html">mspace</a>, <a class="external" href="http://www.mozilla.org/projects/mathml/demo/mmultiscripts.html">mmultiscripts</a>, <a class="external" href="http://www.mozilla.org/projects/mathml/demo/roots.html">msqrt-mroot</a>.</li> + <li><a class="external" href="http://www.mozilla.org/projects/mathml/demo/extras.html">MathML Extras</a> - Technology demonstration of some interesting upshots from building natively upon the browser environment.</li> + <li><a class="external" href="http://golem.ph.utexas.edu/~distler/blog/archives/000104.html">Blog</a> with comments that include MathML.</li> +</ul> +<h3 id="Create_MathML_Documents">Create <abbr>MathML</abbr> Documents</h3> +<ul> + <li><a href="/en/Mozilla_MathML_Project/Authoring" title="en/Mozilla MathML Project/Authoring">Authoring MathML</a></li> + <li><a class="external" href="http://www.w3.org/Math/Software/mathml_software_cat_editors.html">Editors</a></li> + <li><a class="external" href="http://www.w3.org/Math/Software/mathml_software_cat_converters.html">Converters</a></li> + <li><a class="external" href="http://www.w3.org/Math/Software/mathml_software_cat_stylesheets.html">Stylesheets</a></li> +</ul> +<div class="originaldocinfo"> + <h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + <ul> + <li>Author(s): Roger B. Sidje</li> + <li>Other Contributors: Frédéric Wang</li> + <li>Last Updated Date: April 4, 2010</li> + <li>Copyright Information: Portions of this content are © 1999–2010 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Details</a>.</li> + </ul> +</div> +<p> </p> +<div id="cke_pastebin" style="position: absolute; top: 196.667px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"> + </div> diff --git a/files/th/mozilla_mathml_project/start/index.html b/files/th/mozilla_mathml_project/start/index.html new file mode 100644 index 0000000000..74db3b2237 --- /dev/null +++ b/files/th/mozilla_mathml_project/start/index.html @@ -0,0 +1,77 @@ +--- +title: MathML In Action +slug: Mozilla_MathML_Project/Start +translation_of: Mozilla/MathML_Project/Start +--- +<h2 id="MathML_in_Action" style="text-align: center;">MathML in Action</h2> +<p>คุณเห็นสมการที่สวยงามตลอดหน้านี้รึเปล่า? ไม่เหรอ? ว้า.. แย่หน่อยนะ. นี่คือ <a href="https://developer.mozilla.org/@api/deki/files/5690/=start.png">ภาพจับหน้าจอ</a> แสดงสิ่งที่คุณพลาดไป. <a href="./">ดาวน์โหลด</a> Mozilla ที่ใช้ MathML ได้ (MathML-enabled build) เสียตั้งแต่ตอนนี้ เพื่ออะไรๆ จะได้ดีขึ้น.</p> +<p>หรือว่าคุณมี build ที่ใช้ MathML ได้แล้ว แต่สิ่งที่คุณได้เห็นนั้น ไม่เหมือนกับในภาพจับหน้าจอ? ถ้าเป็นอย่างนั้น บางทีคุณอาจจะยังไม่มี <a href="fonts/">ฟอนต์ MathML</a> บางตัวก็ได้.</p> +<p>เอาละ ตกลงว่า ตอนนี้คุณมีทุกอย่างพร้อมแล้ว, คุณน่าจะเห็นสมการนี้ ในรูปแบบต่างๆ : <math> <mrow> <mover> <mi>x</mi> <mo>^</mo> </mover> <mo>+</mo> <mover> <mi>xy</mi> <mo>^</mo> </mover> <mo>+</mo> <mover> <mi>xyz</mi> <mo>^</mo> </mover> <mo>.</mo> </mrow> </math> ลองสมการเล็กๆ ดู, <math> <mrow> <mo>det</mo> <mo lspace="0" rspace="0" symmetric="false">|</mo> <mfrac linethickness="0"> <mi>a</mi> <mi>c</mi> </mfrac> <mfrac linethickness="0"> <mi>b</mi> <mi>d</mi> </mfrac> <mo lspace="0" rspace="0" symmetric="false">|</mo> <mo>=</mo> <mi>a</mi> <mi>d</mi> <mo>-</mo> <mi>b</mi> <mi>c</mi> <mo>,</mo> </mrow> </math> ซึ่งก็สามารถที่จะแสดงในแบบ displaystyle เป็น <math display="block"> <mrow> <mo>det</mo> <mo>|</mo> <mtable> <mtr> <mtd> <mi>a</mi> </mtd> <mtd> <mi>b</mi> </mtd> </mtr> <mtr> <mtd> <mi>c</mi> </mtd> <mtd> <mi>d</mi> </mtd> </mtr> </mtable> <mo>|</mo> <mo>=</mo> <mi>a</mi> <mi>d</mi> <mo>-</mo> <mi>b</mi> <mi>c</mi> <mo>.</mo> </mrow> </math></p> +<p>การจัดตัวพิมพ์สำหรับสมการคณิตศาสตร์นั้นเป็นเรื่องละเอียดอ่อน <a href="./">MathML ใน Mozilla</a> มุ่งหวังที่จะทำตาม <a href="http://www.w3.org/Math/">ข้อกำหนด MathML</a> เพื่อให้ <i>สิ่งที่คุณเห็นคือสิ่งที่คุณได้มาร์คอัพไว้ (What You See Is What You Markup)</i>, หรือจะเรียกอีกแบบ <i>สิ่งที่คุณเห็นคือสิ่งที่คุณได้ทำ (What You See Is What You Made)</i>, หรือเอาสั้นๆ "WYSIWYM". ความแตกต่างระหว่างสมการสองอันข้างล่างนี้ คือ การมาร์คอัพ! <math display="block"> <msup> <mrow> <mo minsize="3" symmetric="false">(</mo> <mo>...</mo> <msup> <mrow> <mo minsize="2" symmetric="false">(</mo> <msup> <mrow> <mo symmetric="false">(</mo> <msub> <mi>a</mi> <mn>0</mn> </msub> <mo>+</mo> <msub> <mi>a</mi> <mn>1</mn> </msub> <mo symmetric="false">)</mo> </mrow> <msub> <mi>n</mi> <mn>1</mn> </msub> </msup> <mo>+</mo> <msub> <mi>a</mi> <mn>2</mn> </msub> <mo minsize="2" symmetric="false">)</mo> </mrow> <msub> <mi>n</mi> <mn>2</mn> </msub> </msup> <mo>+</mo> <mo>...</mo> <mo>+</mo> <msub> <mi>a</mi> <mi>p</mi> </msub> <mo minsize="3" symmetric="false">)</mo> </mrow> <msub> <mi>n</mi> <mi>p</mi> </msub> </msup> </math> <math display="block"> <msup> <mrow> <mo>(</mo> <mo>...</mo> <msup> <mrow> <mo>(</mo> <msup> <mrow> <mo>(</mo> <msub> <mi>a</mi> <mn>0</mn> </msub> <mo>+</mo> <msub> <mi>a</mi> <mn>1</mn> </msub> <mo>)</mo> </mrow> <msub> <mi>n</mi> <mn>1</mn> </msub> </msup> <mo>+</mo> <msub> <mi>a</mi> <mn>2</mn> </msub> <mo>)</mo> </mrow> <msub> <mi>n</mi> <mn>2</mn> </msub> </msup> <mo>+</mo> <mo>...</mo> <mo>+</mo> <msub> <mi>a</mi> <mi>p</mi> </msub> <mo>)</mo> </mrow> <msub> <mi>n</mi> <mi>p</mi> </msub> </msup> </math></p> +<p>สัญลักษณ์ "ราก" ของสมการที่เป็นตัวหนาอันนี้ <math> <mstyle mathvariant="bold"> <msup> <mi>y</mi> <mn>3</mn> </msup> <mo>+</mo> <mi>p</mi> <mi>y</mi> <mo>+</mo> <mi>q</mi> <mo>=</mo> <mn>0</mn> </mstyle> </math> ก็เป็นตัวหนาเช่นเดียวกัน <math display="block"> <mstyle mathvariant="bold"> <mi>y</mi> <mo>=</mo> <mroot> <mrow> <mo>-</mo> <mfrac> <mi>q</mi> <mn>2</mn> </mfrac> <mo>+</mo> <mroot> <mrow> <mfrac> <msup> <mi>q</mi> <mn>2</mn> </msup> <mn>4</mn> </mfrac> <mo>+</mo> <mfrac> <msup> <mi>p</mi> <mn>3</mn> </msup> <mn>27</mn> </mfrac> </mrow> <mn>2</mn> </mroot> </mrow> <mn>3</mn> </mroot> <mo>+</mo> <mroot> <mrow> <mo>-</mo> <mfrac> <mi>q</mi> <mn>2</mn> </mfrac> <mo>-</mo> <mroot> <mrow> <mfrac> <msup> <mi>q</mi> <mn>2</mn> </msup> <mn>4</mn> </mfrac> <mo>+</mo> <mfrac> <msup> <mi>p</mi> <mn>3</mn> </msup> <mn>27</mn> </mfrac> </mrow> <mn>2</mn> </mroot> </mrow> <mn>3</mn> </mroot> <mo>.</mo> </mstyle> </math></p> +<p>เหมือนๆ กับสัญลักษณ์ "ราก" ของสมการนี้ <math> <mrow> <mi>a</mi> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mi>b</mi> <mi>x</mi> <mo>+</mo> <mi>c</mi> <mo>=</mo> <mn>0</mn> <mo>,</mo> </mrow> </math> คลิกตรงไหนก็ได้ในพื้นที่สีเหลือง เพื่อ ย่อ/ขยาย :</p> +<div style="display: none;"> + <h2 id="Zoomable_Math" name="Zoomable_Math">Zoomable Math</h2> + <h3 id="HTML_Content">HTML Content</h3> + <pre class="brush: html"> <p> + <math display="block"> + <mstyle id="zoomableMath" mathbackground="yellow"> + <mrow> + <mi>x</mi> + <mo>=</mo> + <mfrac> + <mrow> + <mrow> + <mo>-</mo> + <mi>b</mi> + </mrow> + <mo>&#xB1;</mo> + <msqrt> + <mrow> + <msup> + <mi>b</mi> + <mn>2</mn> + </msup> + <mo>-</mo> + <mrow> + <mn>4</mn> + <mi>a</mi> + <mi>c</mi> + </mrow> + </mrow> + </msqrt> + </mrow> + <mrow> + <mn>2</mn> + <mi>a</mi> + </mrow> + </mfrac> + </mrow> + </mstyle> + </math> + </p> + +</pre> + <h3 id="JavaScript_Content">JavaScript Content</h3> + <pre class="brush: js"> function zoomToggle() + { + if (this.hasAttribute("mathsize")) { + this.removeAttribute("mathsize"); + } else { + this.setAttribute("mathsize", "200%"); + } + } + + function load() + { + document.getElementById("zoomableMath"). + addEventListener("click", zoomToggle, false); + } + + window.addEventListener("load", load, false);</pre> +</div> +<p style="text-align: center;">{{ EmbedLiveSample('Zoomable_Math') }}</p> +<p>ลองพิจารณาการมาร์คอัพที่น่าสนใจอันนี้ <math display="block"> <mrow> <mo>{</mo> <mtable> <mtr> <mtd columnalign="center"> <mrow> <msub> <mi>u</mi> <mi>t</mi> </msub> <mo>+</mo> <msub> <mrow> <mi>f</mi> <mo>(</mo> <mi>u</mi> <mo>)</mo> </mrow> <mi>x</mi> </msub> <mo>=</mo> <mn>0</mn> </mrow> </mtd> </mtr> <mtr> <mtd columnalign="center"> <mrow> <mi>u</mi> <mo stretchy="false">(</mo> <mn>0</mn> <mo>,</mo> <mi>x</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mrow> <mo>{</mo> <mtable> <mtr> <mtd> <mrow> <msup> <mi>u</mi> <mo>-</mo> </msup> </mrow> </mtd> <mtd> <mrow> <mtext>if </mtext> <mi>x</mi> <mo><</mo> <mn>0</mn> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <msup> <mi>u</mi> <mo>+</mo> </msup> </mrow> </mtd> <mtd> <mrow> <mtext>if </mtext> <mi>x</mi> <mo>></mo> <mn>0</mn> </mrow> </mtd> </mtr> </mtable> </mrow> </mrow> </mtd> </mtr> </mtable> </mrow> </math> หรือการมาร์คอัพที่ซับซ้อนอย่าง <math display="block"> <mrow> <msub> <mover> <mi>Ell</mi> <mo>^</mo> </mover> <mi>Y</mi> </msub> <mo stretchy="false">(</mo> <mi>Z</mi> <mo>;</mo> <mi>z</mi> <mo>,</mo> <mi>τ</mi> <mo stretchy="false">)</mo> <mo>:=</mo> <msub> <mo>∫</mo> <mi>Y</mi> </msub> <mo>(</mo> <munder> <mo>∏</mo> <mi>l</mi> </munder> <mfrac> <mrow> <mrow> <mo>(</mo> <mfrac> <msub> <mi>y</mi> <mi>l</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>)</mo> </mrow> <mrow> <mi>θ</mi> <mo>(</mo> <mfrac> <msub> <mi>y</mi> <mi>l</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <msup><mi>θ</mi> <mo>′</mo></msup> <mo stretchy="false">(</mo> <mn>0</mn> <mo stretchy="false">)</mo> </mrow> <mrow> <mi>θ</mi> <mo stretchy="false">(</mo> <mo>-</mo> <mi>z</mi> <mo stretchy="false">)</mo> <mrow> <mi>θ</mi> <mo>(</mo> <mfrac> <msub> <mi>y</mi> <mi>l</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>)</mo> </mrow> </mrow> </mfrac> <mo>)</mo> <mo>×</mo> <mo>(</mo> <munder> <mo>∏</mo> <mi>k</mi> </munder> <mfrac> <mrow> <mrow> <mi>θ</mi> <mo>(</mo> <mfrac> <msub> <mi>e</mi> <mi>k</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>-</mo> <mo stretchy="false">(</mo> <msub> <mi>α</mi> <mi>k</mi> </msub> <mo>+</mo> <mn>1</mn> <mo stretchy="false">)</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>θ</mi> <mo stretchy="false">(</mo> <mo>-</mo> <mi>z</mi> <mo stretchy="false">)</mo> </mrow> <mrow> <mrow> <mi>θ</mi> <mo>(</mo> <mfrac> <msub> <mi>e</mi> <mi>k</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>θ</mi> <mo stretchy="false">(</mo> <mo>-</mo> <mo stretchy="false">(</mo> <msub> <mi>α</mi> <mi>k</mi> </msub> <mo>+</mo> <mn>1</mn> <mo stretchy="false">)</mo> <mi>z</mi> <mo stretchy="false">)</mo> </mrow> </mfrac> <mo>)</mo> </mrow> </math> <math display="block"> <mrow> <mi>π</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo stretchy="false">)</mo> <mo>=</mo> <munderover> <mo>∑</mo> <mrow> <mi>m</mi> <mo>=</mo> <mn>2</mn> </mrow> <mi>n</mi> </munderover> <mrow> <mo>⌊</mo> <msup> <mrow> <mo>(</mo> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>k</mi> <mo>=</mo> <mn>1</mn> </mrow> <mrow> <mi>m</mi> <mo>-</mo> <mn>1</mn> </mrow> </munderover> <mrow> <mo minsize="1.5">⌊</mo> <mo>(</mo> <mi>m</mi> <mo>/</mo> <mi>k</mi> <mo>)</mo> <mo minsize="2">/</mo> <mo>⌈</mo> <mi>m</mi> <mo>/</mo> <mi>k</mi> <mo>⌉</mo> <mo minsize="1.5">⌋</mo> </mrow> </mrow> <mo>)</mo> </mrow> <mrow> <mo>-</mo> <mn>1</mn> </mrow> </msup> <mo>⌋</mo> </mrow> </mrow> </math> <math display="block"> <mrow> <msub> <mrow> <mo>∥</mo> <mi>ϕ</mi> <mo>∥</mo> </mrow> <mrow> <msubsup> <mi>W</mi> <mi>s</mi> <mi>k</mi> </msubsup> <mo stretchy="false">(</mo> <msub> <mi>Ω</mi> <mi>g</mi> </msub> <mo stretchy="false">)</mo> </mrow> </msub> <mo>≝</mo> <msup> <mrow> <mo>(</mo> <munder> <mo>∑</mo> <mrow> <mo>|</mo> <mi>α</mi> <mo>|</mo> <mo>≦</mo> <mi>k</mi> </mrow> </munder> <msubsup> <mfenced close="∥" open="∥"> <mfrac> <mrow> <msup> <mo>∂</mo> <mi>α</mi> </msup> <mi>ϕ</mi> </mrow> <mrow> <mo>∂</mo> <msup> <mi>ξ</mi> <mi>α</mi> </msup> </mrow> </mfrac> </mfenced> <mrow> <msup> <mi>L</mi> <mi>s</mi> </msup> <mo stretchy="false">(</mo> <msub> <mi>Ω</mi> <mi>g</mi> </msub> <mo stretchy="false">)</mo> </mrow> <mi>s</mi> </msubsup> <mo>)</mo> </mrow> <mrow> <mn>1</mn> <mo>/</mo> <mi>s</mi> </mrow> </msup> </mrow> </math></p> +<p>ตัวอย่างอื่นๆ, ให้ดูที่ลิงก์ในหน้าของ <a href="./">โครงการ MathML</a>, และถ้าคุณ <a href="build.html">สร้าง</a> ตัวโปรแกรม Mozilla ใช้เอง, กรุณาดูที่ไดเรกทอรี <i>mozilla/layout/mathml/tests</i>.</p> +<p>เอาละ, แล้วยังไงต่อไปล่ะ? หลังจากที่คุณได้ลอง MathML ใน Mozilla แล้ว คุณได้เห็นอะไรบ้าง? จะทำยังไงกับบางสิ่งบางอย่างที่คุณคิดว่า มันดูจะไม่ตรงตามข้อกำหนด MathML ซะเท่าไหร่? หรือบางอย่างที่มันดูน่ารำคาญ ไม่น่าดู, และคุณคิดว่าคุณสามารถทำมันได้ดีกว่าซะอีก? หรือบางอย่างที่มันเคยใช้ได้ก่อนหน้านี้ แต่ว่าตอนนี้มันใช้ไม่ได้แล้ว (เรียกอีกอย่างว่า regressions)? ไม่ว่าจะเป็นกรณีไหน, ให้ตรงไปที่ <a href="../../quality/bug-writing-guidelines.html">Bugzilla</a> เพื่อรายงานปัญหาที่พบ. Bugzilla มีเนื้อที่จำนวนมากสำหรับจัดเก็บปัญหาเหล่านี้, และแน่นอน, ปัญหาของคุณคงจะไม่ได้รับการแก้ไขแน่ ถ้ามันไม่เคยถูกรายงาน!</p> +<p><a href="../../get-involved.html">มาช่วยกัน</a> ต่อเติม เสริม <a href="../../newlayout/">Gecko</a> ด้วยตัววาด MathML ที่มีความสามารถสูง และทำตามมาตรฐาน. คุณสามารถทำได้เดี๋ยวนี้ ตอนนี้ โดย <a href="authoring.html">ใส่เนื้อหา MathML ลงในเวบของคุณ</a>, แจ้งข้อผิดพลาดที่ <a href="../../quality/bug-writing-guidelines.html">Bugzilla</a>, และถ้าคุณสามารถช่วยเรื่องเขียนโปรแกรมได้, มาช่วย <a href="http://lxr.mozilla.org/seamonkey/source/layout/mathml/">ตรวจสอบ/ปรับปรุง โค้ดปัจจุบัน</a>, และ/หรือ เลือกอะไรสักอย่างนึงจาก <a href="update.html">รายการสิ่งที่ต้องทำ (ToDo)</a>.</p> diff --git a/files/th/tools/debugger/index.html b/files/th/tools/debugger/index.html new file mode 100644 index 0000000000..c384131b2e --- /dev/null +++ b/files/th/tools/debugger/index.html @@ -0,0 +1,59 @@ +--- +title: The Firefox JavaScript Debugger +slug: Tools/Debugger +tags: + - Debugger + - Debugging + - Dev Tools + - JavaScript + - NeedsTranslation + - Tools + - TopicStub + - 'l10n:priority' +translation_of: Tools/Debugger +--- +<div>{{ToolsSidebar}}</div> + +<p>The JavaScript Debugger enables you to step through JavaScript code and examine or modify its state to help track down bugs.</p> + +<p>{{EmbedYouTube("QK4hKWmJVLo")}}</p> + +<p>You can use it to debug code running locally in Firefox or running remotely, for example on an Android device running Firefox for Android. See <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>to learn how to connect the debugger to a remote target.</p> + +<p>To find your way around the debugger, here's a <a href="/en-US/docs/Tools/Debugger/UI_Tour">quick tour of the UI</a>.</p> + +<h2 id="How_to">How to</h2> + +<p>To find out what you can do with the debugger, see the following how-to guides:</p> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Open_the_debugger">Open the debugger</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint">Set a breakpoint</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">Set a conditional breakpoint</a></li> + <li><a href="/en-US/docs/Tools/Debugger/Set_an_XHR_breakpoint">Set an XHR breakpoint</a></li> + <li><a href="/en-US/docs/Tools/Debugger/Set_a_logpoint">Set a logpoint</a></li> + <li><a href="/en-US/docs/Tools/Debugger/Set_event_listener_breakpoints">Set event listener breakpoints</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Disable_breakpoints">Disable breakpoints</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Step_through_code">Step through code</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Breaking_on_exceptions">Break on exceptions</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Set_Watch_Expressions">Set watch expressions</a></li> + <li><a href="/en-US/docs/Tools/Debugger/Debug_worker_threads">Debug worker threads</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">Pretty-print a minified file</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Search">Search</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources">Debug eval sources</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">Use a source map</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Use_watchpoints">Use watchpoints</a></li> + <li><a href="/en-US/docs/Tools/Debugger/Break_on_DOM_mutation">Break on DOM Mutation</a></li> +</ul> +</div> + +<hr> +<h2 id="Reference">Reference</h2> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Debugger/Keyboard_shortcuts">Keyboard shortcuts</a></li> + <li><a href="/en-US/docs/Tools/Debugger/Source_map_errors">Source map errors</a></li> +</ul> +</div> diff --git a/files/th/tools/debugger/www.หนังโป้.com/index.html b/files/th/tools/debugger/www.หนังโป้.com/index.html new file mode 100644 index 0000000000..a4c0bcf086 --- /dev/null +++ b/files/th/tools/debugger/www.หนังโป้.com/index.html @@ -0,0 +1,149 @@ +--- +title: หนังโป้ +slug: Tools/Debugger/www.หนังโป้.com +translation_of: Tools/Debugger/UI_Tour +--- +<div>{{ToolsSidebar}}</div> + +<p>บทความนี้แนะนำโดยย่อเกี่ยวกับส่วนหลักของส่วนต่อประสานผู้ใช้ JavaScript Debugger UI ถูกแบ่งออกเป็นสามส่วนในแนวตั้ง</p> + +<ul> + <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">บานหน้าต่างรายการแหล่งที่มา</a></li> + <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">บานหน้าต่างแหล่งที่มา</a></li> + <li>เนื้อหาของบานหน้าต่างที่สามขึ้นอยู่กับสถานะปัจจุบันของดีบักเกอร์และอาจรวมถึงส่วนต่อไปนี้: + <ul> + <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Toolbar">แถบเครื่องมือ</a></li> + <li>รับชมการแสดงออก</li> + <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Breakpoints_list">จุดพัก</a></li> + <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Call_stack">เรียกสแตก</a></li> + <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Scopes">ขอบเขต</a></li> + <li>XHR</li> + <li>จุดพักการฟังเหตุการณ์</li> + <li>การเปลี่ยนสายพันธุ์ของ DOM</li> + </ul> + </li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16840/debugger_uiTour_01.png" style="border: 1px solid black; display: block; height: 598px; margin-left: auto; margin-right: auto; width: 922px;"></p> + +<h2 id="บานหน้าต่างรายการแหล่งที่มา">บานหน้าต่างรายการแหล่งที่มา</h2> + +<p>บานหน้าต่างรายการแหล่งข้อมูลจะแสดงรายการไฟล์ต้นฉบับ JavaScript ทั้งหมดที่โหลดลงในหน้าและช่วยให้คุณสามารถเลือกหนึ่งไฟล์ที่จะดีบั๊กที่แหล่งข้อมูลระดับบนสุดจะถูกจัดระเบียบโดยแหล่งกำเนิดและภายใต้ว่าพวกเขาจัดระเบียบ โดยโครงสร้างที่พวกเขาจะให้บริการ</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16841/debugger_uiTour_02.png" style="border: 1px solid black; display: block; height: 598px; margin-left: auto; margin-right: auto; width: 922px;"></p> + +<p>คุณสามารถ<a href="/en-US/docs/Tools/Debugger/How_to/Search#Searching_for_files">ค้นหาไฟล์</a>โดยใช้<kbd>Ctrl</kbd>+ <kbd>P</kbd>( <kbd>Cmd</kbd>+ <kbd>P</kbd>บน Mac)</p> + +<p>ส่วนขยายของเว็บจะแสดงรายการในบานหน้าต่างรายการแหล่งที่มาโดยใช้ชื่อส่วนขยาย</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16868/source_list_pane.png" style="border: 1px solid black; display: block; height: 324px; margin: 0px auto; width: 373px;"></p> + +<p>มีตัวเลือกเมนูหลายไฟล์และโฟลเดอร์หรือกลุ่มโดยทั่วไปแล้วจะดูได้โดยคลิกขวาที่รายการ</p> + +<p>สำหรับไฟล์ตัวเลือกเมนูบริบทต่อไปนี้จะมีให้ใช้งาน:</p> + +<p><img alt="สกรีนช็อตแสดงตัวเลือกเมนูบริบทสำหรับไฟล์ในบานหน้าต่างรายการแหล่งที่มา" src="https://mdn.mozillademos.org/files/17200/debugger-source-list-file-menu.png" style="height: 205px; width: 298px;"></p> + +<ul> + <li><strong>คัดลอก URI ของแหล่งที่มาคัดลอก</strong>ตัวระบุแบบเต็มของไฟล์ไปยังคลิปบอร์ด</li> + <li><strong>แหล่งที่มาของ Blackbox</strong>ทำให้โปรแกรมดีบั๊กข้ามไฟล์เมื่อฟังก์ชั่น "เข้าสู่" สิ่งนี้มีประโยชน์ในการหลีกเลี่ยงการเข้าไปในห้องสมุดที่โค้ดของคุณใช้ เมื่อไฟล์เป็น "blackboxed" ไฟล์นั้นจะมีไอคอนรูปตาเล็ก ๆ อยู่ข้างๆแทนไฟล์ของไอคอนปกติ</li> + <li><strong>ไฟล์ดาวน์โหลดจะ</strong>เปิดกล่องโต้ตอบไฟล์เพื่อให้คุณสามารถบันทึกไฟล์ไว้ในเครื่องได้</li> +</ul> + +<p>สำหรับโฟลเดอร์และกลุ่มมีตัวเลือกเมนูบริบทต่อไปนี้:</p> + +<p><img alt="สกรีนช็อตแสดงตัวเลือกเมนูบริบทสำหรับโฟลเดอร์ในบานหน้าต่างรายการแหล่งที่มา" src="https://mdn.mozillademos.org/files/17201/debugger-source-list-folder-menu.png" style="height: 203px; width: 536px;"></p> + +<ul> + <li><strong>ยุบทั้งหมด</strong>ยุบโฟลเดอร์ย่อยทั้งหมดของรายการ</li> + <li><strong>ขยายทั้งหมด</strong>ขยายโฟลเดอร์ย่อยทั้งหมดของรายการ</li> + <li><strong>ตั้งค่าไดเรกทอรีราก</strong>เปลี่ยนมุมมองรายการแหล่งที่มาเพื่อให้เห็นเฉพาะรายการและรายการย่อย ชื่อของไดเรกทอรีที่เลือกจะแสดงที่ด้านบนของบานหน้าต่างรายการแหล่งที่มา การคลิกที่ชื่อนี้จะเปลี่ยนเป็นบานหน้าต่างเพื่อแสดงรายการที่มาทั้งหมด</li> + <li><strong>Blackbox</strong> (ตั้งแต่ Firefox 76) + <ul> + <li><strong>ไฟล์ Blackbox ในไดเรกทอรีนี้</strong>ทำให้ไฟล์ทั้งหมดในไดเรกทอรีที่เลือกถูกข้ามโดยดีบักเกอร์ ไฟล์ลูกทั้งหมดได้รับไอคอนรูปดวงตาและตัวเลือกเมนูโฟลเดอร์จะเปลี่ยนเป็น<strong>ไฟล์ Unblackbox ในไดเรกทอรี</strong>นี้</li> + <li><strong>ไฟล์ Blackbox ที่อยู่นอกไดเรกทอรีนี้</strong>ทำให้ไฟล์ทั้งหมดนอกเหนือจากที่อยู่ในไดเรกทอรีที่เลือกถูกข้ามโดยตัวดีบั๊ก ไฟล์ดังกล่าวทั้งหมดจะได้รับไอคอนรูปดวงตาและตัวเลือกเมนูสำหรับโฟลเดอร์นั้นจะเปลี่ยนเป็น<strong>ไฟล์ Unblackbox นอกไดเรกทอรี</strong>นี้</li> + </ul> + </li> +</ul> + +<h3 id="มุมมองโครงร่าง">มุมมองโครงร่าง</h3> + +<p>มุมมองโครงร่างแสดงแผนผังสำหรับการนำทางไฟล์ที่เปิดอยู่ในปัจจุบัน ใช้เพื่อข้ามไปยังนิยามฟังก์ชันคลาสหรือเมธอดโดยตรง</p> + +<h2 id="บานหน้าต่างแหล่งที่มา">บานหน้าต่างแหล่งที่มา</h2> + +<p>นี่แสดงไฟล์ JavaScript ที่โหลดอยู่ในปัจจุบัน</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16843/debugger_uiTour_02.5.png" style="border: 1px solid black; display: block; height: 598px; margin-left: auto; margin-right: auto; width: 922px;">เมื่อบานหน้าต่างต้นทางมุ่งเน้นคุณสามารถ<a href="/en-US/docs/Tools/Debugger/How_to/Search#Searching_within_a_file">ค้นหาสตริงในไฟล์</a>โดยใช้<kbd>Ctrl</kbd>+ <kbd>F</kbd>( <kbd>Cmd</kbd>+ <kbd>F</kbd>บน Mac)</p> + +<p><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint">Breakpoints</a> have a blue arrow overlaid on the line number. <a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">Conditional breakpoints</a> have an orange arrow. If you're stopped at a breakpoint, the entire line gets a green overlay. In the screenshot below there are three breakpoints:</p> + +<ul> + <li>line 82 has a normal breakpoint and execution is paused here</li> + <li>line 85 has a logpoint which logs the contents of tablerow to the console</li> + <li>line 100 has a conditional breakpoint</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16842/debugger_uiTour_03.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;"></p> + +<p>The third column shows more information about the breakpoints. For example, the logpoint at line 85 logs the value of the tableRow variable to the console and the conditional breakpoint at line 100 breaks if the contents of the todoList is undefined.</p> + +<h2 id="Toolbar"><a name="toolbar">Toolbar</a></h2> + +<p>At the top of the right-hand pane, there's a toolbar:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16844/debugger_toolbar.png" style="display: block; height: 126px; margin-left: auto; margin-right: auto; width: 236px;"></p> + +<p>The toolbar consists of:</p> + +<ul> + <li>Four buttons to <a href="/en-US/docs/Tools/Debugger/How_to/Step_through_code">control the debugger's movement through the script</a>: + + <ul> + <li><strong>Play/pause</strong> (F8): pauses or resumes execution of the script you're debugging. When it displays a "play" icon, that means the script is paused, either because you've paused it with this button or because you've hit a breakpoint.</li> + <li><strong>Step over</strong> (F10): steps across the current line of JavaScript code.</li> + <li><strong>Step in</strong> (F11): steps into the function call on the current line of JavaScript code.</li> + <li><strong>Step out</strong> (Shift-F11): runs the script until the current function exits.</li> + </ul> + </li> + <li>a button that can be used to deactivate all breakpoints</li> +</ul> + +<h2 id="Breakpoints_list">Breakpoints list</h2> + +<p>Under the toolbar, you'll see all the breakpoints you've set. Next to each breakpoint is a checkbox which you can use to <a href="/en-US/docs/Tools/Debugger/How_to/Disable_breakpoints">enable/disable it</a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16845/debugger_uiTour_breakpoints.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;"></p> + +<h2 id="Watch_expressions">Watch expressions</h2> + +<p>You can add watch expressions in the right pane. They will be evaluated when code execution is paused:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14845/watch-expressions.png" style="display: block; height: 769px; margin-left: auto; margin-right: auto; width: 504px;"></p> + +<h2 id="Variable_tooltip">Variable tooltip</h2> + +<p>Hover on a variable show a tooltip with its value inside:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14851/tooltip-1.gif" style="display: block; height: 522px; margin-left: auto; margin-right: auto; width: 988px;"></p> + +<h2 id="Call_stack">Call stack</h2> + +<p>When the debugger's paused, you'll see a call stack:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16846/debugger_uiTour_call_stack.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;">Each level of the call stack gets a line, with the name of the function and the filename and line number. Clicking the line opens that source in the source pane.</p> + +<p>Right-clicking in the call stack pane opens a context menu with the following items:</p> + +<ul> + <li><strong>เปิดใช้งานการจัดกลุ่มเฟรมเวิร์ก</strong>รวบรวมรายการที่เป็นของเฟรมเวิร์กลงในกลุ่มที่ยุบได้ (ตัวอย่างเช่น jQuery ในภาพหน้าจอด้านบน) เมื่อเปิดใช้งานการจัดกลุ่มตัวเลือกเมนูจะเปลี่ยนเป็น<strong>ปิดใช้งานการจัดกลุ่มเฟรมเวิร์</strong>ก</li> + <li><strong>คัดลอก URI ต้นทางคัดลอก</strong>ตัวระบุแบบเต็มของไฟล์ต้นฉบับไปยังคลิปบอร์ด</li> + <li><strong>แหล่งที่มาของ Blackbox</strong>ทำให้โปรแกรมดีบั๊กข้ามไฟล์เมื่อฟังก์ชั่น "เข้าสู่" สแต็กเฟรมใด ๆ จากไฟล์ต้นฉบับ blackboxed จะถูกซ่อนในบานหน้าต่างการโทรสแต็ก (หากต้องการลบข้อ จำกัด นี้ให้เลือก<strong>แหล่ง Unblackbox</strong>ในเมนูบริบทของรายการแหล่งข้อมูลหรือบานหน้าต่างแหล่งที่มา)</li> + <li><strong>คัดลอกการติดตามสแต็กคัดลอก</strong>รายการทั้งหมดในสแตกการโทร (รวมถึง URIs และหมายเลขบรรทัด) ไปยังคลิปบอร์ด</li> +</ul> + +<h2 id="ขอบเขต">ขอบเขต</h2> + +<p>คุณจะเห็นป้ายชื่อ "ขอบ" พร้อมลูกศรซ่อนอยู่หลังป้ายชื่อตัวละครที่ซ่อนอยู่ในตอนท้ายของโปรแกรม:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16847/debugger_uiTour_scopes.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;">ภาชนะที่ถูกจัดเรียงตามขอบ: ส่วนใหญ่จะขึ้นก่อนหน้านี้และวงกลมใหญ่ทั่วโลก</p> diff --git a/files/th/tools/eyedropper/index.html b/files/th/tools/eyedropper/index.html new file mode 100644 index 0000000000..0c7192993a --- /dev/null +++ b/files/th/tools/eyedropper/index.html @@ -0,0 +1,42 @@ +--- +title: Eyedropper +slug: Tools/Eyedropper +translation_of: Tools/Eyedropper +--- +<div class="geckoVersionNote"> +<p><font><font>Eyedropper ใหม่ใน Firefox 31</font></font></p> +</div> + +<p><font><font>เครื่องมือ Eyedropper ช่วยให้คุณสามารถเลือกสีที่มีในหน้าปัจจุบัน </font><font>มันทำงานเหมือนแว่นขยายทั่วหน้าช่วยให้คุณสามารถเลือกที่มีความแม่นยำพิกเซล </font><font>ภายใต้แว่นขยายจะแสดงค่าสีสำหรับพิกเซลปัจจุบันโดยใช้รูปแบบใดก็ตามที่คุณได้เลือกไว้ใน</font></font><a href="/en-US/docs/Tools_Toolbox#Inspector"><font><font>การตั้งค่า</font></font></a><font><font> :</font></font></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7749/eyedropper.png" style="display: block; height: 204px; margin-left: auto; margin-right: auto; width: 305px;"><font><font>คุณสามารถใช้มันในหนึ่งในสองวิธี:</font></font></p> + +<ul> + <li><font><font>เพื่อเลือกสีจากหน้าและคัดลอกไปยังคลิปบอร์ด</font></font></li> + <li><font><font>การเปลี่ยนแปลงค่าสีในกฎของสารวัตรดูสีที่คุณเลือกจากหน้า</font></font></li> +</ul> + +<h2 id="คัดลอกสีไปยังคลิปบอร์ด"><font><font>คัดลอกสีไปยังคลิปบอร์ด</font></font></h2> + +<p><font><font>เปิด Eyedropper ในหนึ่งในสองวิธี:</font></font></p> + +<ul> + <li><font><font>เลือก "Eyedropper" ภายใต้เมนู "Web Developer"</font></font></li> + <li><font><font>คลิกปุ่ม Eyedropper ใน</font></font><a href="/en-US/docs/Tools_Toolbox#Toolbar"><font><font>แถบเครื่องมือกล่องเครื่องมือ</font></font></a><font><font> (แต่ทราบว่าปุ่มนี้ไม่อยู่โดยค่าเริ่มต้น: คุณจำเป็นต้องเพิ่มโดยการตรวจสอบ "คว้าสีจากหน้า" ใน</font></font><a href="/en-US/docs/Tools_Toolbox#Settings"><font><font>การตั้งค่าเครื่องมือสำหรับนักพัฒนา</font></font></a><font><font> )</font></font></li> +</ul> + +<p><font><font>ขณะที่คุณเลื่อนเมาส์ไปรอบ ๆ หน้าคุณจะเห็นค่าสีในปัจจุบันในการเปลี่ยนแปลง Eyedropper </font><font>คลิกสำเนาค่าสีในปัจจุบันไปยังคลิปบอร์ด</font></font></p> + +<p><font><font>{{EmbedYouTube ("xf2uk6UyRB8")}}</font></font></p> + +<h2 id="การเปลี่ยนค่าสีในมุมมองกฎ"><font><font>การเปลี่ยนค่าสีในมุมมองกฎ</font></font></h2> + +<p><font><font>ค่าสีที่ปรากฏในกฎของสารวัตรดูมีตัวอย่างสีไปให้พวกเขา: คลิกตัวอย่างที่แสดงให้เห็น</font></font><a href="/en-US/docs/Tools/Page_Inspector#Color_picker"><font><font>ป๊อปอัพตัวเลือกสี </font></font></a><font><font>จาก Firefox 31 ป๊อปอัพที่มีไอคอน Eyedropper: คลิกที่ไอคอนนี้เพื่อเปิดใช้ Eyedropper</font></font></p> + +<p><font><font>ตอนนี้เมื่อคุณคลิก Eyedropper สีในมุมมองกฎที่ถูกกำหนดให้เป็นสีที่คุณเลือก</font></font></p> + +<p><font><font>{{EmbedYouTube ("0Zx1TN21QOo")}}</font></font></p> + +<h2 id="แป้นพิมพ์ลัด"><font><font>แป้นพิมพ์ลัด</font></font></h2> + +<p><font><font>{{Page ("</font></font>en-US/docs/tools/Keyboard_shortcuts<font><font>", "Eyedropper")}}</font></font></p> diff --git a/files/th/tools/index.html b/files/th/tools/index.html new file mode 100644 index 0000000000..376632a8b8 --- /dev/null +++ b/files/th/tools/index.html @@ -0,0 +1,218 @@ +--- +title: เครื่องมือสำหรับนักพัฒนา Firefox +slug: Tools +tags: + - Developing Mozilla + - NeedsMarkupWork + - NeedsTechnicalReview + - NeedsTranslation + - Tools + - TopicStub + - Web Development + - 'Web Development:Tools' +translation_of: Tools +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">Examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile.</p> + +<p>If you are looking for information on using the web developer tools available in Firefox, you've come to the right place — this page provides links to detailed information on all of the core tools and additional tools, and further information such as how to connect to and debug Firefox for Android, how to extend the devtools, and how to debug the browser as a whole.</p> + +<p>Please explore the links found in the sidebar, and further down the page. If you have any feedback or questions about the devtools, send us messages on our mailing list or IRC channel (see the <a href="/en-US/docs/Tools#Join_the_Developer_tools_community">community links near the bottom of the page</a>). If you have any feedback or questions specifically about the documentation, the <a href="https://discourse.mozilla.org/c/mdn">MDN discourse</a> is a good place to post.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are just getting started with web development and using developer tools, our <a href="/en-US/docs/Learn">learning web development</a> docs will help you — see <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a> and <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a> for good starting points.</p> +</div> + +<h2 id="The_Core_Tools">The Core Tools</h2> + +<p>You can open the Firefox Developer Tools from the menu by selecting <em>Tools</em> > <em>Web Developer</em> > <em>Toggle Tools</em> or use the keyboard shortcut <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd> on Windows and Linux, or <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> on macOS.</p> + +<p>The ellipsis menu on the right-hand side of Developer Tools, contains several commands that let you perform actions or change tool settings.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16087/DevTools_LayoutMenu.png" style="display: block; height: 290px; margin: 0 auto; width: 225px;"></p> + +<table class="standard-table" style="height: 178px; width: 840px;"> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16092/iframe_button.png" style="height: 69px; width: 69px;"></td> + <td>This button only appears when there are multiple iframes on a page. Click it to display a list of the iframes on the current page and select the one with which you want to work.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="height: 69px; width: 69px;"></td> + <td>Click this button to take a screenshot of the current page. (<strong>Note:</strong> This feature is not turned on by default and must be enabled in settings before the icon will appear.)</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="height: 69px; width: 69px;"></td> + <td>Toggles Responsive Design Mode.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="height: 69px; width: 69px;"></td> + <td>Opens the menu that includes docking options, the ability to show or hide the split console, and Developer Tools settings. The menu also includes links to the documentation for Firefox Web Tools and the Mozilla Community.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="height: 69px; width: 69px;"></td> + <td>Closes the Developer Tools</td> + </tr> + </tbody> +</table> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Page_Inspector">Page Inspector</h3> + +<p><a href="/en-US/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/16371/landingPage_PageInspector.png" style="border: 1px solid black; display: block; height: 171px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>View and edit page content and layout. Visualise many aspects of the page including the box model, animations, and grid layouts.</p> +</div> + +<div class="column-half"> +<h3 id="Web_Console">Web Console</h3> + +<p><a href="/en-US/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/16368/landingPage_Console.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>See messages logged by a web page and interact with the page using JavaScript.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="JavaScript_Debugger">JavaScript Debugger</h3> + +<p><a href="/en-US/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/16369/landingPage_Debugger.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Stop, step through, examine, and modify the JavaScript running in a page.</p> +</div> + +<div class="column-half"> +<h3 id="Network_Monitor">Network Monitor</h3> + +<p><a href="/en-US/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16370/landingPage_Network.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>See the network requests made when a page is loaded.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Performance_Tools">Performance Tools</h3> + +<p><a href="/en-US/docs/Tools/Performance"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16372/landingPage_Performance.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Analyze your site's general responsiveness, JavaScript, and layout performance.</p> +</div> + +<div class="column-half"> +<h3 id="Responsive_Design_Mode">Responsive Design Mode</h3> + +<p><a href="/en-US/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/16373/landingPage_ResponsiveDesign.png" style="border-style: solid; border-width: 1px; display: block; height: 865px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>See how your website or app will look and behave on different devices and network types.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Accessibility_inspector">Accessibility inspector</h3> + +<p><a href="/en-US/docs/Tools/Accessibility_inspector"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16367/landingPage_Accessibility.png" style="border-style: solid; border-width: 1px; border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Provides a means to access the page's accessibility tree, allowing you to check what's missing or otherwise needs attention.</p> +</div> + +<div class="column-half"></div> +</div> + +<div class="note"> +<p><strong>Note</strong>: The collective term for the UI inside which the DevTools all live is the <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a>.</p> +</div> + +<h2 id="More_Tools">More Tools</h2> + +<p>These developer tools are also built into Firefox. Unlike the "Core Tools" above, you might not use them every day.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/Memory">Memory</a></dt> + <dd>Figure out which objects are keeping memory in use.</dd> + <dt><a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a></dt> + <dd>Inspect cookies, local storage, indexedDB, and session storage present in a page.</dd> + <dt><a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></dt> + <dd>Inspect the page's DOM properties, functions, etc.</dd> + <dt><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt> + <dd>Select a color from the page.</dd> + <dt><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></dt> + <dd>A text editor built into Firefox that lets you write and execute JavaScript.</dd> + <dt><a href="/en-US/docs/Tools/Style_Editor">Style Editor</a></dt> + <dd>View and edit CSS styles for the current page.</dd> + <dt><a href="/en-US/docs/Tools/Screenshot_tool">Taking screenshots</a></dt> + <dd>Take a screenshot of the entire page or of a single element.</dd> + <dt><a href="/en-US/docs/Tools/Measure_a_portion_of_the_page">Measure a portion of the page</a></dt> + <dd>Measure a specific area of a web page.</dd> + <dt><a href="/en-US/docs/Tools/Rulers">Rulers</a></dt> + <dd>Overlay horizontal and vertical rulers on a web page</dd> +</dl> +</div> + +<div class="column-container"> +<div class="column-third"> +<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p> + +<p style="text-align: center;">For the latest developer tools and features, try Firefox Developer Edition.</p> + +<p><a href="https://www.mozilla.org/en-US/firefox/developer/" style="width: 300px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Download Firefox Developer Edition</a></p> +</div> + +<div class="column-third"></div> +</div> + +<h2 id="Connecting_the_Developer_Tools">Connecting the Developer Tools</h2> + +<p>If you open the developer tools using <a href="/en-US/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">keyboard shortcuts</a> or the equivalent menu items, they'll target the document hosted by the currently active tab. But you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different devices.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></dt> + <dd>Debug add-ons, content tabs, and workers running in the browser.</dd> + <dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Connecting to Firefox for Android</a></dt> + <dd>Connect the developer tools to an instance of Firefox running on an Android device.</dd> + <dt><a href="/en-US/docs/Tools/Working_with_iframes">Connecting to iframes</a></dt> + <dd>Connect the developer tools to a specific iframe in the current page.</dd> + <dt><a href="/en-US/docs/Tools/Valence">Connecting to other browsers</a></dt> + <dd>Connect the developer tools to Chrome on Android and Safari on iOS.</dd> +</dl> +</div> + +<h2 id="Debugging_the_browser">Debugging the browser</h2> + +<p>By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/Browser_Console">Browser Console</a></dt> + <dd>See messages logged by the browser itself and by add-ons, and run JavaScript code in the browser's scope.</dd> + <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt> + <dd>Attach the Developer Tools to the browser itself.</dd> +</dl> +</div> + +<h2 id="Extending_the_devtools">Extending the devtools</h2> + +<p>For information on extending the Firefox DevTools, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a> over in the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">Browser Extensions</a> section of MDN.</p> + +<h2 id="Migrating_from_Firebug">Migrating from Firebug</h2> + +<p>Firebug has come to the end of its lifespan (see <a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug lives on in Firefox DevTools</a> for details of why), and we appreciate that some people will find migrating to another less familiar set of DevTools to be challenging. To ease a transition from Firebug to the Firefox developer tools, we have written a handy guide — <a href="/en-US/docs/Tools/Migrating_from_Firebug">Migrating from Firebug</a>.</p> + +<h2 id="Contribute">Contribute</h2> + +<p>If you want to help improve the developer tools, these resources will get you started.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="https://docs.firefox-dev.tools/">Get Involved</a></dt> + <dd>Our developer documentation explains how to get involved.</dd> + <dt><a href="http://bugs.firefox-dev.tools/">bugs.firefox-dev.tools</a></dt> + <dd>A tool helping to find bugs to work on.</dd> +</dl> +</div> diff --git a/files/th/tools/webide/index.html b/files/th/tools/webide/index.html new file mode 100644 index 0000000000..13acbd9330 --- /dev/null +++ b/files/th/tools/webide/index.html @@ -0,0 +1,42 @@ +--- +title: WebIDE +slug: Tools/WebIDE +tags: + - Apps + - B2G + - Debugging + - Firefox OS + - NeedsTranslation + - TopicStub + - WebIDE + - tool +translation_of: Archive/WebIDE +--- +<div class="summary"> +<p><span id="result_box" lang="th"><span class="hps">WebIDE</span> <span class="hps">ช่วยให้คุณสามารถ</span><span>สร้าง, แก้ไข,</span> <span class="hps">ทำงานและ</span><span>การแก้ปัญหา</span><span class="alt-edited">แอพพลิเคชั่น</span><span>เว็บ</span></span> <span class="short_text" id="result_box" lang="th"><span class="hps">โดยใช้</span></span> <a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> <span class="short_text" id="result_box" lang="th"><span class="hps">หรือ</span><span>อุปกรณ์ </span><span class="hps">Firefox</span> <span class="hps">OS </span></span><span class="short_text" lang="th"><span>จริง</span> </span></p> + +<p><span class="short_text" id="result_box" lang="th"><span class="hps">นอกจากนี้ยัง</span><span>ช่วยให้คุณสามารถ</span><span>เชื่อมต่อ</span></span> <a href="https://developer.mozilla.org/en-US/docs/Tools">Firefox Developer Tools</a> <span id="result_box" lang="th"><span class="hps">ไปยัง</span><span>เบราว์เซอร์</span><span>อื่น ๆ</span> <span class="hps">รวมทั้ง</span> <span class="hps">Firefox สำหรับ</span> <span class="hps">Android,</span> <span class="hps">Chrome บน</span> <span class="hps">Android,</span> <span class="hps">และ Safari</span> <span class="hps">บน iOS</span></span><br> + โปรดดู <span id="result_box" lang="th"><span class="hps">หน้า</span></span> <a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging">Remote Debugging</a> <span id="result_box" lang="th"><span>สำหรับคำแนะนำ</span><span>เกี่ยวกับวิธีการ</span><span>เชื่อมต่อกับ</span><span>เบราว์เซอร์</span><span>ที่เฉพาะเจาะจง</span></span></p> +</div> + +<p>With WebIDE, you first <a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes">set up one or more runtimes</a>. A runtime is an environment in which you'll run and debug the app. A runtime could be a Firefox OS device connected to the desktop over USB (or over Wi-Fi since <a href="/en-US/Firefox/Releases/39">Firefox 39</a>), or it could be a Firefox OS Simulator installed on the desktop itself.</p> + +<p>Next, you <a href="/en-US/docs/Tools/WebIDE/Creating_and_editing_apps">create an app, or open an existing app</a>. If you're creating a new app you can start with a template that includes the directory structure and the minimum boilerplate you need to get started, or a more complete template that shows how to use a privileged API. WebIDE shows your app's files in a tree, and you can edit and save them using a built-in source editor. Of course, you don't have to use the built-in editor: you can develop your app entirely outside WebIDE, and only use it for debugging.</p> + +<p>Finally, you can <a href="/en-US/docs/Tools/WebIDE/Running_and_debugging_apps">install the app in one of the runtimes and run it</a>. You can then open the usual suite of developer tools - the <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Console</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger">JavaScript Debugger</a> and so on - to examine and modify the running app.</p> + +<hr> +<dl> + <dt><a href="/th/docs/Tools/WebIDE/การเปิด_WebIDE">การเปิด WebIDE</a></dt> + <dd><span class="short_text" id="result_box" lang="th"><span class="hps">วิธีการเปิด</span> <span class="hps">WebIDE</span> <span class="hps">จากภายใน</span> <span class="hps">Firefox</span></span></dd> + <dt><a href="/th/docs/Tools/WebIDE/การตั้งค่ารันไทม์">การตั้งค่ารันไทม์</a></dt> + <dd><span id="result_box" lang="th"><span class="hps">วิธีการ</span><span>เชื่อมต่อกับ</span><span>รันไทม์</span><span>ในที่ที่คุณ</span><span>สามารถติดตั้ง</span><span class="alt-edited">แอพพลิเคชั่น</span><span>รวมทั้ง</span><span>อุปกรณ์</span> <span class="hps">Firefox</span> <span class="hps">OS,</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">Simulator</span><span>,</span> <span class="hps">และ Firefox</span> <span class="hps">สำหรับ Android</span></span></dd> + <dt><a href="/th/docs/Tools/WebIDE/การสร้างและการแก้ไขแอพพลิเคชั่น">การสร้างและการแก้ไขแอพพลิเคชั่น</a></dt> + <dd><span class="short_text" id="result_box" lang="th"><span class="hps">วิธีการ</span><span> สร้าง เปิด</span><span> และพัฒนา</span><span class="alt-edited">แอพพลิเคชั่น โดย</span><span>ใช้</span> <span class="hps">WebIDE</span></span></dd> + <dt><a href="/th/docs/Tools/WebIDE/การทำงานและการแก้จุดบกพร่องแอพพลิเคชั่น">การทำงานและการแก้จุดบกพร่องแอพพลิเคชั่น</a></dt> + <dd><span id="result_box" lang="th"><span class="hps">วิธีการติดตั้ง</span></span><span class="short_text" id="result_box" lang="th"><span class="alt-edited">แอพพลิเคชั่น</span></span><span lang="th"><span>รันไทม์</span><span>และ</span><span>แก้ปัญหา</span><span>โดยใช้</span> <span class="hps">Firefox</span> <span class="hps">เครื่องมือสำหรับนักพัฒนา</span></span></dd> + <dt><a href="/th/docs/Tools/WebIDE/การทำงานร่วมกับคอร์โดวาแอพพลิเคชั่นใน_WebIDE">การทำงานร่วมกับคอร์โดวาแอพพลิเคชั่นใน WebIDE</a></dt> + <dd><span id="result_box" lang="th"><span class="hps">จาก</span> <span class="hps">Firefox</span> <span class="hps">39,</span> <span class="hps">คุณสามารถแก้ไข</span><span>และการแก้ปัญหา</span><span>คอร์โดวา</span><span class="alt-edited">แอพพลิเคชั่น</span><span>ที่ใช้</span> <span class="hps">WebIDE</span></span></dd> + <dt><a href="/th/docs/Tools/WebIDE/Troubleshooting">การแก้ไขปัญหา </a></dt> + <dd><span id="result_box" lang="th"><span class="hps">ความช่วยเหลือสำหรับ</span><span>ปัญหาเกี่ยวกับ</span> <span class="hps">WebIDE</span> <span class="hps">โดยเฉพาะอย่างยิ่ง</span><span>ปัญหา</span><span>การเชื่อมต่อกับ</span><span>รันไทม์</span></span></dd> +</dl> diff --git a/files/th/tools/webide/troubleshooting/index.html b/files/th/tools/webide/troubleshooting/index.html new file mode 100644 index 0000000000..d6dd5fd51c --- /dev/null +++ b/files/th/tools/webide/troubleshooting/index.html @@ -0,0 +1,117 @@ +--- +title: การแก้ไขปัญหา WebIDE +slug: Tools/WebIDE/Troubleshooting +translation_of: Archive/WebIDE/Troubleshooting +--- +<h2 id="การเชื่อมต่ออุปกรณ์_Firefox_OS_ผ่าน_USB"><span class="short_text" id="result_box" lang="th"><span class="hps">การเชื่อมต่ออุปกรณ์</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">ผ่าน USB</span></span></h2> + +<p><span id="result_box" lang="th"><span class="hps">ถ้าคุณ</span><span>กำลังพยายามที่จะ</span><span>เชื่อมต่ออุปกรณ์</span> <span class="hps">Firefox</span> <span class="hps">OS เพื่อ</span> <span class="hps">WebIDE</span> <span class="hps">และ มันไม่</span><span>แสดงขึ้น</span></span> <span class="short_text" id="result_box" lang="th"><span class="hps">นี่คือบาง</span><span>สิ่งที่คุณสามารถ</span><span>ลองทำ:</span></span></p> + +<ul> + <li><font><font>ตรวจสอบรุ่นของ Firefox OS: ให้แน่ใจว่าอุปกรณ์ของคุณใช้</font></font><strong><font><font>Firefox OS 1.2 / Boot2Gecko 1.2 </font></font></strong><font><font>หรือสูงกว่า </font></font><code>Device Information > Software</code><font><font>การตรวจสอบรุ่นไปที่แอปการตั้งค่าบนอุปกรณ์แล้ว</font><font> </font><font>ถ้าคุณไม่มีเวอร์ชันที่สูงพอให้ค้นหาอุปกรณ์ของคุณใน</font></font><a href="/en-US/Firefox_OS/Developer_phone_guide"><font><font>คู่มือสำหรับนักพัฒนาซอฟต์แวร์</font></font></a><font><font>และทำตามคำแนะนำในการอัปเกรด</font></font></li> + <li><font><font>เปิดใช้งานการแก้จุดบกพร่องระยะไกล: </font></font><code>Device information > More information > Developer</code><font><font>ในแอปตั้งค่าบนอุปกรณ์ให้ไปที่</font></font> + <ul> + <li><font><font>Firefox OS 1.3 ขึ้นไป: "Remote Debugging" เป็นเพียงช่องทำเครื่องหมายง่ายๆ </font><font>ทำเครื่องหมายในช่อง</font></font></li> + <li><font><font>Firefox OS 1.4 ขึ้นไป: "Remote Debugging" จะขอให้คุณเปิดใช้งานเฉพาะ ADB หรือ ADB และ DevTools </font><font>เลือก "ADB และ DevTools"</font></font></li> + </ul> + </li> + <li><font><font>ปิดใช้งานการล็อกหน้าจอในอุปกรณ์ของคุณ: ในแอปการตั้งค่าบนอุปกรณ์ให้ไปที่</font></font><code>Screen Lock</code><font><font>และยกเลิกการ</font></font><code>Lock Screen</code><font><font>เลือกช่องทำเครื่องหมาย </font><font>นี่เป็นวิธีที่ดีเพราะเมื่อหน้าจอถูกล็อคการเชื่อมต่อโทรศัพท์สูญหายซึ่งหมายความว่าจะไม่สามารถแก้ปัญหาได้อีกต่อไป</font></font></li> + <li><font><font>ตรวจสอบว่าคุณไม่ได้เชื่อมต่อโทรศัพท์ Android พร้อมกับโทรศัพท์ระบบปฏิบัติการ Firefox ในคอมพิวเตอร์ของคุณ</font></font></li> + <li>Check the USB cable you are using:เปลี่ยนการกระทำทุกอย่างเป็นภาษา ไทย + <p> </p> + + <ul> + <li><font><font>ลองถอดปลั๊กและเสียบสายเคเบิล USB อีกครั้ง</font></font></li> + <li><font><font>ลองเสียบสาย USB เข้ากับพอร์ตอื่นในคอมพิวเตอร์ของคุณ </font><font>คุณอาจต้องสลับระหว่างพอร์ต</font></font></li> + <li><font><font>ลองใช้สาย USB อื่น </font><font>สายที่มากับโทรศัพท์มักมีคุณภาพไม่ดีและมักล้มเหลว</font></font></li> + <li><font><font>ลองใช้สายเคเบิล USB ที่สั้นกว่า </font><font>สาย USB ยาวได้รับทราบว่าไม่ทำงานได้ดี</font></font></li> + </ul> + </li> + <li><font><font>ลองปิดใช้งานและเปิดใช้งานการแก้ไขปัญหาระยะไกลอีกครั้งในแอปการตั้งค่าบนอุปกรณ์</font></font></li> + <li><font><font>ถ้า</font></font><a href="/en-US/docs/Tools/WebIDE#Custom_runtimes"><font><font>คุณปิดการใช้งาน ADB Addon Helper</font></font></a><font><font>คุณทำสำเร็จ</font></font><code>adb forward</code><font><font>หรือไม่?</font></font></li> + <li><font><font>ถ้าคุณใช้ Linux:</font></font> + <ul> + <li><font><font>ให้แน่ใจว่าคุณเพิ่ม</font></font><code>udev</code><font><font>ไฟล์กฎตามที่บันทึกไว้ในขั้นตอนที่ 3 ของคู่มือนี้เพื่อ</font><font>ตั้งค่าอุปกรณ์</font></font><a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up"><font><font> Android </font></font></a><code>idVendor</code><font><font>แอตทริบิวต์ที่จะใช้สำหรับ Geeksphone คือ "05c6" และ</font></font><a class="external external-icon" href="http://developer.android.com/tools/device.html#VendorIds"><font><font>หน้านี้</font></font></a><font><font>รายการอื่น ๆ</font></font><code>idVendor</code><font><font>ค่า </font><font>จากนั้นให้เรียกใช้</font></font><code>adb devices</code><font><font>เพื่อให้แน่ใจว่าอุปกรณ์ของคุณอยู่ในรายการ </font><font>หากอุปกรณ์ดูเหมือนจะเป็น "no permission" คุณต้องรีสตาร์ทเซิร์ฟเวอร์ adb (เช่น</font></font><code>adb kill-server;adb start-server</code><font><font>)</font></font></li> + </ul> + </li> + <li><font><font>ถ้าคุณใช้ Windows:</font></font> + <ul> + <li><font><font>คุณจำเป็นต้องติดตั้งไดรเวอร์เป็นเอกสารในขั้นตอนที่ 3 ของคู่มือนี้เพื่อ</font><font>ตั้งค่าอุปกรณ์</font></font><a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up"><font><font> Android </font></font></a><font><font>คุณสามารถค้นหาไดรเวอร์สำหรับอุปกรณ์ Geeksphone บน</font></font><a class="external external-icon" href="http://downloads.geeksphone.com/"><font><font>เว็บไซต์ Geeksphone</font></font></a><font><font>และไดรเวอร์สำหรับอุปกรณ์ของ Google บน</font><font>เว็บไซต์ของ</font></font><a href="http://developer.android.com/sdk/win-usb.htm"><font><font> Google </font></font></a><font><font>Windows 8 เป็นค่าเริ่มต้นจะไม่ให้คุณติดตั้งโปรแกรมควบคุมที่ไม่ได้ลงชื่อ </font><font>ดูการกวดวิชานี้เกี่ยวกับ</font></font><a class="external-icon external" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html"><font><font>"วิธีการติดตั้งโปรแกรมควบคุมที่ไม่ได้ลงนามใน Windows </font></font></a><font><font>8"</font></font></li> + <li><font><font>หาก WebIDE ไม่สามารถดูอุปกรณ์ของคุณหลังจากทำตามขั้นตอนทั้งหมดที่คุณอาจต้อง</font></font><a class="external-icon external" href="http://blog.fh-kaernten.at/wehr/?p=1182"><font><font>แก้ไข </font></font></a><font><font>adb_usb.ini</font></font></li> + </ul> + </li> + <li><font><font>หากคุณใช้ Mac OS X:</font></font> + <ul> + <li><font><font>หากคุณได้รับข้อผิดพลาดเกี่ยวกับการหมดเวลาที่เชื่อมต่อกับอุปกรณ์จำลองและอุปกรณ์จริงคุณอาจไม่สามารถเชื่อมต่อกับ localhost เนื่องจากไฟล์ว่าง / etc / hosts </font><font>คุณสามารถแก้ปัญหาได้โดยประชากรของไฟล์และล้างแคช DNS </font><font>ตามที่อธิบายไว้ที่นี่</font></font></li> + <li><font><font>หากคุณเป็นผู้ใช้ EasyTether คุณจะต้องถอนการติดตั้งหรือปิดใช้งาน EasyTether: </font></font><code>sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</code></li> + </ul> + </li> +</ul> + +<h2 id="การเชื่อมต่ออุปกรณ์_Firefox_OS_ผ่าน_Wi-Fi"><span class="short_text" id="result_box" lang="th"><span class="hps">การเชื่อมต่ออุปกรณ์</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">ผ่าน Wi-Fi</span></span></h2> + +<ul> + <li><font><font>ตรวจสอบเวอร์ชันของคุณ: การดีบักแบบ Wi-Fi ต้องใช้ Firefox 39 หรือสูงกว่าและอุปกรณ์ Firefox OS ที่ใช้งาน Firefox OS 3.0 จาก 2015-03-27 หรือใหม่กว่า</font></font></li> + <li><font><font>เครื่องสแกนโค้ด QR อาจเป็นเรื่องที่น่าหงุดหงิดในขณะนี้เนื่องจากอุปกรณ์จริงจะจับภาพความละเอียดต่ำมาก </font></font><a href="https://bugzil.la/1145772"><font><font>ข้อผิดพลาด 1145772</font></font></a><font><font>มีเป้าหมายเพื่อปรับปรุงสิ่งนี้ในเร็ว ๆ นี้ </font><font>หากคุณมีปัญหาในเรื่องนี้ให้ลองสแกนด้วยทิศทางที่ต่างกัน </font><font>หากคุณเลือก "สแกนและจดจำแล้วคุณจะไม่ต้องสแกนรหัสอีกครั้งในครั้งต่อไปที่คุณเชื่อมต่อคอมพิวเตอร์กับอุปกรณ์นี้</font></font></li> +</ul> + +<h2 id="การเชื่อมต่อกับ_Firefox_สำหรับ_Android"><span class="short_text" id="result_box" lang="th"><span class="hps">การเชื่อมต่อกับ</span> <span class="hps">Firefox</span> <span class="hps">สำหรับ Android</span></span></h2> + +<p><font><font>หากคุณกำลังพยายามเชื่อมต่อกับอินสแตนซ์ Firefox ที่รันบน Android OS และไม่ปรากฏขึ้นคุณสามารถลองทำสิ่งต่างๆต่อไปนี้:</font></font></p> + +<ul> + <li><font><font>ตรวจสอบเวอร์ชั่นของ Firefox: ให้แน่ใจว่าอุปกรณ์ของคุณใช้</font></font><strong><font><font>Firefox 36 </font></font></strong><font><font>หรือสูงกว่า </font><font>WebIDE จะไม่ตรวจสอบรุ่นเก่าโดยอัตโนมัติเพื่อให้คุณต้องเปิดใช้งานการส่งต่อพอร์ตและเชื่อมต่อกับพอร์ตอุปกรณ์ - ทำตามคำแนะนำ</font><font>ที่นี่</font></font></li> + <li><font><font>ให้แน่ใจว่าคุณได้เปิดใช้งานการแก้จุดบกพร่องระยะไกลใน Firefox: เปิด Firefox สำหรับ Android เปิดเมนูเลือก</font><font>แล้วตรวจสอบช่องทำเครื่องหมายที่</font></font><code>Settings</code><code>Developer Tools > Remote debugging</code></li> + <li><font><font>ตรวจสอบว่ามีการแก้จุดบกพร่อง USB ในการตั้งค่านักพัฒนาซอฟต์แวร์ของอุปกรณ์</font></font></li> + <li><font><font>ถ้าคุณยังไม่เห็นอุปกรณ์ของคุณในหน้าต่าง WebIDE ให้ลองสลับ</font></font><code>Remote debugging</code><font><font>บนโทรศัพท์</font></font> + <ul> + <li><font><font>ตัดการเชื่อมต่ออุปกรณ์ของคุณจากคอมพิวเตอร์และปิด</font></font><code>Remote debugging</code><font><font>เครื่อง</font></font></li> + <li><font><font>เชื่อมต่ออุปกรณ์อีกครั้งและเปิด</font></font><code>Remote debugging</code><font><font>- โปรแกรมนี้จะรีสตาร์ทอินสแตนซ์ดีบักเกอร์บนโทรศัพท์</font></font></li> + <li><font><font>ลองเชื่อมต่อผ่าน WebIDE อีกครั้ง</font></font></li> + </ul> + </li> + <li><font><font>หากใช้ Windows ตรวจสอบให้แน่ใจว่าอุปกรณ์ Android ของคุณได้รับการตรวจสอบอย่างถูกต้องและใช้ไดรฟ์ USB ของ Google ที่มาพร้อมกับ Android SDK</font></font></li> +</ul> + +<h2 id="การเชื่อมต่อกับเบราว์เซอร์อื่น_ๆ_(Chrome_Safari)"><span class="short_text" id="result_box" lang="th"><span class="hps">การเชื่อมต่อกับ</span><span>เบราว์เซอร์</span><span>อื่น ๆ</span> <span class="atn hps">(</span><span>Chrome, Safari</span><span>)</span></span></h2> + +<p><font><font>WebIDE ใช้</font></font><a href="/en-US/docs/Tools/Valence"><font><font>Valence (ก่อนหน้านี้คือ Firefox Tools Adapter)</font></font></a><font><font>เพื่อเข้าถึงเบราว์เซอร์อื่นเช่น Chrome และ Safari </font></font></p> + +<p><font><font>หากคุณกำลังมีปัญหาในการเชื่อมต่อกับเบราว์เซอร์อื่น ๆ เหล่านี้ให้ตรวจสอบขั้นตอนการติดตั้งและบันทึกอื่น ๆ สำหรับเบราว์เซอร์ผู้ที่อยู่ใน</font><font>หน้า</font></font><a href="/en-US/docs/Tools/Valence"><font><font> Valence</font></font></a></p> + +<h2 id="ไม่สามารถแก้ปัญหาบางแอพพลิเคชั่น(debug)">ไม่สามารถแก้ปัญหาบาง<span class="short_text" id="result_box" lang="th"><span class="alt-edited">แอพพลิเคชั่น(</span></span>debug<span class="short_text" lang="th"><span class="alt-edited">)</span></span></h2> + +<p><font><font>หากคุณพบว่าคุณไม่สามารถแก้ปัญหาแอปพลิเคชันที่ได้รับการรับรองแอปที่ติดตั้งหรือแอปที่ติดตั้งไว้ในอุปกรณ์จริงแล้วคุณอาจกำลังดูนโยบายด้านความปลอดภัยที่มีสิทธิ์ จำกัด ของ WebIDE </font><font>หากต้องการข้อมูลเพิ่มเติมโปรดดูที่ส่วนที่เกี่ยวกับ</font></font><a href="/en-US/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29"><font><font>การแก้จุดบกพร่องไม่ จำกัด แอป (รวมถึงแอพพลิเคได้รับการรับรองกระบวนการหลัก ฯลฯ</font></font></a><font><font> )</font></font></p> + +<h2 id="ไม่สามารถโหลดรายชื่อโครงการ"><span class="short_text" id="result_box" lang="th"><span class="hps">ไม่สามารถโหลด</span><span>รายชื่อ</span><span>โครงการ</span></span></h2> + +<p><font><font>หากคุณเปิด WebIDE ใน Firefox เวอร์ชันใดเวอร์ชันหนึ่งแล้วปรับลดรุ่นเป็น Firefox เวอร์ชันก่อนหน้าด้วยโปรไฟล์เดียวกันคุณอาจเห็นข้อผิดพลาด "Unable to load project list" เมื่อเปิด WebIDE ในเวอร์ชัน Firefox ก่อนหน้านี้</font></font></p> + +<p><font><font>ซึ่งอาจเกิดขึ้นได้เมื่อระบบจัดเก็บข้อมูลที่ WebIDE ใช้ ( </font></font><a href="/en-US/docs/Web/API/IndexedDB_API"><font><font>IndexedDB</font></font></a><font><font> ) จำเป็นต้องย้ายหรือปรับโครงสร้างไฟล์ภายในสำหรับเวอร์ชัน Firefox รุ่นใหม่ </font><font>รายการโครงการจะกลายเป็นเวอร์ชันล่าสุดของ Firefox ที่ไม่สามารถเข้าถึงได้</font></font></p> + +<p><font><font>ไม่มีข้อมูลสูญหาย แต่คุณจะต้องใช้ Firefox รุ่นล่าสุดที่ใช้กับโปรไฟล์ของคุณเพื่อรับรายชื่อโครงการ</font></font></p> + +<p><font><font>ถ้าคุณต้องการใช้ Firefox เวอร์ชันเก่ากว่านี้คุณสามารถลองลบรายการโครงการตามวิธีการต่อไปนี้ได้ แต่นี่ไม่ได้รับการสนับสนุนและอาจส่งผลต่อปัญหาหรือการสูญหายของข้อมูลเพิ่มเติม:</font></font></p> + +<ol> + <li><font><font>ปิด Firefox</font></font></li> + <li><font><font>ค้นหาไดเรกทอรีโปรไฟล์ Firefox ของคุณ</font></font></li> + <li><font><font>ค้นหา</font></font><code>storage</code><font><font>โฟลเดอร์ภายในไดเร็กทอรีโปรไฟล์</font></font></li> + <li><font><font>ภายใต้บางส่วนของต้นไม้แฟ้มนี้ควรมีไฟล์และ / หรือไดเรกทอรีที่ขึ้นต้นด้วย</font></font><code>4268914080AsptpcPerjo</code><font><font>(ชื่อที่ถูกแฮชของฐานข้อมูล)</font></font></li> + <li><font><font>ลบไฟล์และไดเรกทอรีดังกล่าวออก</font></font></li> + <li><font><font>เริ่ม Firefox และ WebIDE อีกครั้ง</font></font></li> +</ol> + +<h2 id="เปิดใช้งานการเข้าสู่ระบบ"><span class="short_text" id="result_box" lang="th"><span class="hps">เปิดใช้งาน</span><span>การเข้าสู่ระบบ</span></span></h2> + +<p><font><font>นอกจากนี้คุณยังสามารถเปิดใช้งานการบันทึกข้อมูลแบบ verbose เพื่อรวบรวมการวินิจฉัย:</font></font></p> + +<ol start="1" style="list-style-type: decimal;"> + <li><font><font>เปิด</font></font><a class="external external-icon" href="http://kb.mozillazine.org/About:config"><font><font>about: config</font></font></a><font><font>และเพิ่มการตั้งค่าใหม่ที่เรียกว่า</font></font><code>extensions.adbhelper@mozilla.org.sdk.console.logLevel</code><font><font>มีค่าสตริง</font></font><code>all</code><font><font>และการตั้งค่า</font><font>ไป</font></font><code>extensions.adbhelper@mozilla.org.debug</code><code>true</code></li> + <li><font><font>ใน</font></font><a class="external external-icon" href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons"><font><font>Add-on Manager</font></font></a><font><font>ให้ปิดใช้งานและเปิดใช้งาน</font><a class="external external-icon" href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons"><font>Add-on</font></a><font>ของ ADB Helper ใหม่</font></font></li> + <li><font><font>เปิด</font></font><a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console"><font><font>เบราว์เซอร์คอนโซล</font></font></a><code>adb</code><font><font>และตอนนี้คุณจะเห็นข้อความที่คอนโซลหน้าด้วย</font><font> </font><font>ถ้าข้อความไม่ได้มีความหมายอะไรกับคุณ</font><font>ขอความช่วยเหลือ</font></font></li> +</ol> + +<h2 id="ต้องการความช่วยเหลือ">ต้องการ<span class="short_text" id="result_box" lang="th"><span class="hps">ความช่วยเหลือ</span></span></h2> + +<p>ไปที่ <a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">#devtools room on IRC</a> <span class="short_text" id="result_box" lang="th"><span class="hps">และเราจะพยายาม</span><span>ที่จะช่วย</span></span></p> diff --git a/files/th/tools/webide/การตั้งค่ารันไทม์/index.html b/files/th/tools/webide/การตั้งค่ารันไทม์/index.html new file mode 100644 index 0000000000..cbc902734e --- /dev/null +++ b/files/th/tools/webide/การตั้งค่ารันไทม์/index.html @@ -0,0 +1,161 @@ +--- +title: การตั้งค่ารันไทม์ +slug: Tools/WebIDE/การตั้งค่ารันไทม์ +translation_of: Archive/WebIDE/Setting_up_runtimes +--- +<p>A runtime is an environment in which you'll run and debug the app. A runtime could be a Firefox OS device connected to the desktop over USB, it could be a Firefox OS Simulator installed on the desktop itself, or it could be another instance of Firefox Desktop.</p> + +<p>Under the "Select Runtime" dropdown, runtimes are grouped into four types:</p> + +<dl> + <dt><a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Connecting_a_Firefox_OS_device">USB DEVICES</a></dt> + <dd>Firefox OS devices connected over USB. From Firefox 36 this also gets you connected to <a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Firefox for Android over USB</a>.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Connecting_over_WiFi">WI-FI DEVICES</a></dt> + <dd>Firefox OS devices connected over Wi-Fi. <em>New in Firefox 39.</em></dd> + <dt><a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Adding_a_Simulator">SIMULATORS</a></dt> + <dd>Instances of the Firefox OS Simulator that you've installed.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Other_runtimes">OTHER</a></dt> + <dd>Remote runtimes to connect WebIDE to an arbitrary host and port. If you have the <a href="/en-US/docs/Tools/Valence">Valence</a> add-on installed, this section will also list the <a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Valence-enabled_runtimes">additional runtimes it enables</a>.</dd> +</dl> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10377/webide-select-runtime.png" style="display: block; height: 701px; margin-left: auto; margin-right: auto; width: 799px;">The rest of this section describes how you can add some runtimes.</p> + +<h2 id="การเชื่อมต่ออุปกรณ์_Firefox_OS"><span class="short_text" id="result_box" lang="th"><span class="hps">การเชื่อมต่ออุปกรณ์</span> <span class="hps">Firefox</span> <span class="hps">OS</span></span></h2> + +<p>If you have a sufficiently recent version of Firefox and Firefox OS, you can <a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Connecting_over_WiFi">connect the Firefox OS device over WiFi</a>. Otherwise, you must connect over USB.</p> + +<h3 id="การเชื่อมต่อผ่าน_USB"><span class="short_text" id="result_box" lang="th"><span class="hps">การเชื่อมต่อ</span><span>ผ่าน USB</span></span></h3> + +<p>Before you can connect a Firefox OS device, there's some setup you have to go through:</p> + +<ul> + <li><strong>Check your Firefox OS version: </strong>Make sure your device is running Firefox OS 1.2/Boot2Gecko 1.2 or higher. To check the version, go to the Settings app on the device, then <code>Device Information > Software</code>. If you don't have a high enough version, find your device in the <a href="/en-US/Firefox_OS/Developer_phone_guide">developer phone guide</a> and follow the instructions for upgrading.</li> + <li><strong>Enable remote debugging: </strong>In the Settings app on the device, go to <code>Device information > More information > Developer</code>. + <ul> + </ul> + + <ul> + <li>Firefox OS 1.3 and earlier: "Remote Debugging" is just a simple checkbox. Check it.</li> + <li>Firefox OS 1.4 and later: "Remote Debugging" asks you to enable for just ADB, or for ADB and DevTools. Select "ADB and DevTools".</li> + </ul> + </li> + <li><strong>Disable Screen lock on your device:</strong> In the Settings app on the device, go to <code>Screen Lock</code> and uncheck the <code>Lock Screen</code> checkbox. This is required because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.</li> + <li><strong>If you want unrestricted debugging privileges, including certified apps, built-in apps, and apps already installed on a real device</strong>: See the section on <a href="/en-US/docs/Tools/WebIDE/Running_and_debugging_apps#Unrestricted_app_debugging_(including_certified_apps.2C_main_process.2C_etc.)">Unrestricted app debugging (including certified apps, main process, etc.)</a>.</li> +</ul> + +<div class="note"> +<p><strong>เฉพาะ Linux:</strong></p> + +<ul> + <li>Add a <code>udev</code> rules file, as documented in step 3 of this guide to <a href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. The <code>idVendor</code> attribute to use for the Geeksphone is "05c6", and <a href="http://developer.android.com/tools/device.html#VendorIds">this page</a> lists other <code>idVendor</code> values.</li> +</ul> +</div> + +<div class="note"> +<p><strong>เฉพาะ Windows:</strong></p> + +<ul> + <li>You need to install drivers, as documented in step 3 of this guide to <a href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. You can find drivers for Geeksphone devices on the <a href="http://downloads.geeksphone.com/">Geeksphone web site</a>. Windows 8 by default will not let you install unsigned drivers. See this tutorial on <a class="external external-icon" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"How to install an unsigned driver on Windows 8"</a>.</li> + <li>If WebIDE can't see your device after following all the steps, you may have to <a class="external external-icon" href="http://blog.fh-kaernten.at/wehr/?p=1182">edit adb_usb.ini</a>.</li> +</ul> +</div> + +<p>If there are any other Android devices connected to your computer, disconnect them. Now connect the device to the computer using USB. You should see the device appear under "USB DEVICES":</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8045/webide-select-runtime-keon.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 710px;"></p> + +<p>If you don't see your device, see the <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a> page.</p> + +<h3 id="การเชื่อมต่อผ่าน_WiFi"><span class="short_text" id="result_box" lang="th"><span class="hps">การเชื่อมต่อ</span><span>ผ่าน WiFi</span></span></h3> + +<p>To connect over WiFi, you need:</p> + +<ul> + <li>Firefox 39 or later</li> + <li>a Firefox OS device running a build of Firefox OS 3.0 from 2015-03-27 or later</li> +</ul> + +<p>This doesn't use <a href="http://developer.android.com/tools/help/adb.html">ADB</a> at all, and is therefore likely to be more reliable than the USB method.</p> + +<h4 id="Enable_WiFi_debugging">Enable WiFi debugging</h4> + +<p>First, enable WiFi debugging on the Firefox OS device.</p> + +<ol> + <li>Open <a href="/en-US/Firefox_OS/Debugging/Developer_settings">Developer Settings</a> on the device (Settings -> Developer)</li> + <li>Check "DevTools via Wi-Fi"</li> + <li>Edit the device name if desired</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10361/fxos-wifi-opts.png" style="display: block; height: 512px; margin: 0px auto; width: 352px;"></p> + +<h4 id="Select_the_device">Select the device</h4> + +<p>In WebIDE, click the "Select Runtime" menu. You should see a section labeled "Wi-Fi Devices", and your device should appear under it:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10365/webide-wifi-runtime.png" style="display: block; height: 700px; margin: 0px auto; width: 708px;">Select your device.</p> + +<h4 id="Authenticate">Authenticate</h4> + +<p>Next, in the WebIDE you'll see a prompt with a QR code:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10367/webide-qr-code.png" style="display: block; height: 458px; margin: 0px auto; width: 886px;">On the device, you'll see a connection prompt giving you options to "Scan" or "Scan and Remember". Choose one of the options and scan the QR code. Now WebIDE should connect to the device, and the device icon next to "Select Runtime" should turn blue to indicate this.</p> + +<p>The QR code scanner can be a bit frustrating at the moment, as real devices appear to capture a very low resolution picture. <a href="https://bugzil.la/1145772">Bug 1145772</a> aims to improve this soon. If you have trouble with this, try scanning with a few different orientations.</p> + +<p>If you chose "Scan and Remember, then you won't have to scan the code again the next time you connect your computer to this device.</p> + +<h2 id="การเชื่อมต่อกับ_Firefox_สำหรับ_Android"><span class="short_text" id="result_box" lang="th"><span class="hps">การเชื่อมต่อกับ</span> <span class="hps">Firefox</span> <span class="hps">สำหรับ Android</span></span></h2> + +<p>From Firefox 36 onwards Android devices connected over USB and running Firefox for Android appear as a runtime under "USB devices". See the article on <a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">connecting to Firefox for Android from WebIDE</a>.</p> + +<p>Before Firefox 36, you can <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">connect to Firefox for Android without using WebIDE at all</a>, or can use WebIDE by setting up a <a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Remote_runtime">custom remote runtime</a>.</p> + +<h2 id="Adding_a_Simulator">Adding a Simulator</h2> + +<p><span style="line-height: 1.5;">The <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> is <span style="line-height: 1.5;">a version of the higher layers of Firefox OS</span> that simulates a Firefox OS device, but runs on the desktop</span><span style="line-height: 1.5;">. </span><span style="line-height: 1.5;">It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.</span></p> + +<p><span style="line-height: 1.5;">This means that in many cases, you don't need a real device to test and debug your app. </span></p> + +<p>The Simulator doesn't ship inside Firefox but as a Firefox <a href="/en-US/Add-ons">add-on</a>. If you click "Install Simulator" in the Runtimes dropdown menu, you will go to a page from which you can install Simulators for various versions of Firefox OS.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8039/webide-install-simulator.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">You can install as many as you like. Be patient, though: the Simulator may take a few minutes to download. Once you've installed some Simulators you can close this "Extra Components" window, and the Simulators you've installed appear as options in the Runtimes dropdown menu:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8047/webide-select-runtime-keon-simulator.png" style="display: block; height: 559px; margin-left: auto; margin-right: auto; width: 712px;">To learn more about the Simulator, see its <a href="/en-US/docs/Tools/Firefox_OS_Simulator">documentation page</a>.</p> + +<h2 id="Other_runtimes">Other runtimes</h2> + +<h3 id="Remote_runtime">Remote runtime</h3> + +<p>With a remote runtime you can use an arbitrary hostname and port to connect to the remote device.</p> + +<p>Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or <a href="http://developer.android.com/tools/help/adb.html">ADB</a>. By default, WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.</p> + +<p>This is convenient in most cases, but sometimes you might want to use ADB outside of WebIDE: for example, you might be running ADB directly from the command line. In that case you'll connect to the device by specifying a host and port using the <a href="http://developer.android.com/tools/help/adb.html#forwardports"><code>adb forward</code></a> command (example: <code>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</code>).<br> + <br> + If you then want to use WebIDE to connect as well, you should <a href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons#w_how-to-disable-extensions-and-themes">disable the ADB Helper add-on</a> and connect WebIDE using the Custom runtime option, entering the host and port that you passed to <code>adb forward</code> (example: <code>localhost:6000</code>).</p> + +<p>Also, before Firefox 36, the ADB Helper does not yet support connecting to Firefox for Android, so if you want to connect WebIDE to Firefox for Android, you'll need to set up your own port forwarding and use a custom runtime. <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">See more about connecting to Firefox for Android using ADB prior to Firefox 36</a>.</p> + +<h3 id="Valence-enabled_runtimes">Valence-enabled runtimes</h3> + +<p>If you have the <a href="/en-US/docs/Tools/Valence">Valence</a> add-on installed, you'll see three additional runtimes:</p> + +<ul> + <li>Chrome on Android</li> + <li>Safari on iOS</li> + <li>Chrome Desktop</li> +</ul> + +<p>For instructions on how to connect to these runtimes, see the relevant entry in the <a href="/en-US/docs/Tools/Remote_Debugging">Remote Debugging</a> page.</p> + +<h2 id="Selecting_a_runtime">Selecting a runtime</h2> + +<p>Once you've set up a runtime you can select it using the "Select Runtime" menu.</p> + +<ul> + <li>If you select a Simulator, WebIDE launches the Simulator.</li> + <li>If you select a Firefox OS device WebIDE connects to the device. On the device a dialog will ask you to confirm that you wish to connect: press "OK".</li> +</ul> + +<p>Now the "play" button in the center of the WebIDE toolbar is enabled: click it to <a href="/en-US/docs/Tools/WebIDE/Running_and_debugging_apps">install and run the app</a> in the selected runtime.</p> diff --git a/files/th/tools/webide/การทํางานร่วมกับคอร์โดวาแอพพลิเคชั่นใน_webide/index.html b/files/th/tools/webide/การทํางานร่วมกับคอร์โดวาแอพพลิเคชั่นใน_webide/index.html new file mode 100644 index 0000000000..a4b5dbc4bc --- /dev/null +++ b/files/th/tools/webide/การทํางานร่วมกับคอร์โดวาแอพพลิเคชั่นใน_webide/index.html @@ -0,0 +1,43 @@ +--- +title: การทำงานร่วมกับคอร์โดวาแอพพลิเคชั่นใน WebIDE +slug: Tools/WebIDE/การทํางานร่วมกับคอร์โดวาแอพพลิเคชั่นใน_WebIDE +translation_of: Archive/WebIDE/Working_with_Cordova_apps_in_WebIDE +--- +<div class="geckoVersionNote"> +<p>New in Firefox 39.</p> +</div> + +<p><a href="http://cordova.apache.org/">Apache Cordova</a><span id="result_box" lang="th"><span class="hps"> ช่วยให้คุณสามารถ</span><span>เขียน</span><span class="alt-edited">แอพพลิเคชั่น</span><span>โดยใช้ HTML,</span> <span class="hps">JavaScript และ</span> <span class="hps">CSS และ</span><span>แล้วสร้าง</span><span>รุ่น</span><span>พื้นเมือง</span><span>ของ</span><span>มันสำหรับ</span><span>แพลตฟอร์มโทรศัพท์มือถือ</span><span>เช่น</span> <span class="hps">iOS และ Android </span></span><br> + โดยคอร์โดวา <a href="/en-US/Apps/Tools_and_frameworks/Cordova_support_for_Firefox_OS">คุณยังสามารถสร้างรุ่น app ของคุณสำหรับ Firefox OS</a></p> + +<p>From Firefox 39 onwards, WebIDE directly supports Cordova apps: this means that you can edit Cordova apps in WebIDE, and WebIDE takes care of generating the Firefox OS version for you.</p> + +<p>First, create a Cordova app, as you normally would:</p> + +<ul> + <li>Install Cordova, if you haven't already: + <pre class="brush: bash"><code>npm install -g cordova</code></pre> + </li> +</ul> + +<ul> + <li>Create your Cordova app: + <pre class="brush: bash"><code>cordova create my-app</code></pre> + </li> +</ul> + +<ul> + <li>Add Firefox OS as a target platform for your app: + <pre class="brush: bash">cd my-app +cordova platform add firefoxos</pre> + </li> +</ul> + +<p>Next:</p> + +<ul> + <li><a href="/en-US/docs/Tools/WebIDE/Opening_WebIDE">open WebIDE</a></li> + <li>select <a href="/en-US/docs/Tools/WebIDE/Creating_and_editing_apps#Open_a_packaged_app">"Open Packaged App"</a>, and select the directory containing your Cordova app's <code>config.xml</code> file.</li> +</ul> + +<p>Now you can edit the app as a Cordova app, and whenever you <a href="/en-US/docs/Tools/WebIDE/Running_and_debugging_apps#Running_apps">run the app</a>, WebIDE takes care of generating the Firefox OS version behind the scenes. WebIDE also regenerates the Firefox OS version whenever you make any changes that would affect your app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, so it can perform <a href="/en-US/docs/Tools/WebIDE/Creating_and_editing_apps#Manifest_validation">manifest validation</a>.</p> diff --git a/files/th/tools/webide/การเปิด_webide/index.html b/files/th/tools/webide/การเปิด_webide/index.html new file mode 100644 index 0000000000..709cde4ece --- /dev/null +++ b/files/th/tools/webide/การเปิด_webide/index.html @@ -0,0 +1,26 @@ +--- +title: การเปิด WebIDE +slug: Tools/WebIDE/การเปิด_WebIDE +translation_of: Archive/WebIDE/Opening_WebIDE +--- +<p><span class="short_text" id="result_box" lang="th"><span class="hps">มีสามวิธี</span><span>ที่จะเปิด</span> <span class="hps">WebIDE</span> <span class="hps">ได้แก่:</span></span></p> + +<ul> + <li>ในเมนู <em>Tools > Web Developer</em> แล้ว <span class="short_text" id="result_box" lang="th"><span class="hps">คลิกที่</span><span>รายการ</span> </span><em>WebIDE</em></li> + <li><span class="short_text" id="result_box" lang="th"><span class="hps">ใช้แป้นพิมพ์ลัด</span></span> <em>Shift + F8</em>.</li> + <li><span class="short_text" id="result_box" lang="th"><span class="hps">คลิกที่ไอคอน</span><span>เฉพาะ </span><span>ใน</span><span>แถบเครื่องมือ</span> <span class="hps">Firefox</span></span> มันจะแสดงเสมอถ้าคุณใช้ <a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition </a> <span class="short_text" id="result_box" lang="th"><span class="hps">และ</span><span> Firefox</span> <span class="hps">อื่น ๆ</span> <span class="hps">จาก</span></span> <a href="/th/Firefox/Releases/36">เวอร์ชั่น 36</a> <span class="short_text" id="result_box" lang="th"><span class="hps">เป็นต้นไป</span><span>ก็จะปรากฏขึ้น</span><span>หลังจากที่คุณได้</span><span>เปิด</span></span> WebIDE หนึ่งครั้ง:</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9437/webide-icon.png" style="display: block; margin-left: auto; margin-right: auto; width: 897px;"></p> + +<p><span class="short_text" id="result_box" lang="th"><span class="hps">นี่คือสิ่งที่ดูเหมือน </span></span><span class="short_text" lang="th"> <span class="hps">WebIDE</span><span class="hps">:</span></span><img alt="" src="https://mdn.mozillademos.org/files/8033/webide-initial.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">The dropdown on the left labeled <em>Open App</em> lets you open existing apps or create new ones. The dropdown on the right labeled <em>Select Runtime</em> lets you select a runtime or <a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes">set up a new runtime</a>.</p> + +<p>The buttons in the middle run, stop, and debug the app: they are only enabled when you have opened an app and selected a runtime.</p> + +<p>You can change the font size throughout WebIDE using the standard keyboard shortcuts (use <code>Command</code> instead of <code>Control</code> on OS X):</p> + +<ul> + <li><code>Ctrl +</code> increases font size.</li> + <li><code>Ctrl -</code> decreases font size.</li> + <li><code>Ctrl 0</code> resets the font size to the default.</li> +</ul> 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<boolean> getAvailability(); + [SecureContext] attribute EventHandler onavailabilitychanged; + [SecureContext, SameObject] readonly attribute BluetoothDevice? referringDevice; + [SecureContext] Promise<BluetoothDevice> requestDevice(optional RequestDeviceOptions options); +}; +Bluetooth implements BluetoothDeviceEventHandlers; +Bluetooth implements CharacteristicEventHandlers; +Bluetooth implements ServiceEventHandlers;</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) => { + 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) => { + 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"><button id = "find-me">Show my location</button><br/> +<p id = "status"></p> +<a id = "map-link" target="_blank"></a> +</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 & 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 & 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 <input> 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 & 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><ความยาว></code></dt> + <dd>กำหนดความกว้างคงที่ อนุญาตให้ใช้ค่าที่ติดลบได้ ดูที่ {{cssxref("<length>")}} สำหรับหน่วยวัดที่ใช้ได้</dd> + <dt><code><ร้อยละ></code></dt> + <dd>ค่า {{cssxref("<percentage>")}} ที่สัมพันธ์กับ <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"><div class="ex1"> + margin: auto; + background: gold; + width: 66%; +</div> +<div class="ex2"> + margin: 20px 0 0 -20px; + background: gold; + width: 66%; +</div></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 = '<?xml version="1.0"?><person><name>Arun</name></person>'; + +function callOtherDomain(){ + if(invocation) + { + invocation.open('POST', url, true); + invocation.setRequestHeader('X-PINGOTHER', 'pingpong'); + invocation.setRequestHeader('Content-Type', 'application/xml'); + invocation.onreadystatechange = handler; + invocation.send(body); + } +} + +...... +</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 + +<?xml version="1.0"?><person><name>Arun</name></person> + + +HTTP/1.1 200 OK +Date: Mon, 01 Dec 2008 01:15:40 GMT +Server: Apache/2.0.61 (Unix) +Access-Control-Allow-Origin: http://foo.example +Vary: Accept-Encoding, Origin +Content-Encoding: gzip +Content-Length: 235 +Keep-Alive: timeout=2, max=99 +Connection: Keep-Alive +Content-Type: text/plain + +[Some GZIP'd payload] +</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: <origin> | * +</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: <delta-seconds> +</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: <method>[, <method>]* +</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: <field-name>[, <field-name>]* +</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: <origin> +</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: <method> +</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: <field-name>[, <field-name>]* +</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 & 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 & 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 & 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"><link rel="manifest" href="/manifest.webmanifest"></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"><<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>></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"><button class="add-button">Add to home screen</button></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) => { + // Prevent Chrome 67 and earlier from automatically showing the prompt + e.preventDefault(); + // Stash the event so it can be triggered later. + deferredPrompt = e; + // Update UI to notify the user they can add to home screen + addBtn.style.display = 'block'; + + addBtn.addEventListener('click', (e) => { + // hide our user interface that shows our A2HS button + addBtn.style.display = 'none'; + // Show the prompt + deferredPrompt.prompt(); + // Wait for the user to respond to the prompt + deferredPrompt.userChoice.then((choiceResult) => { + if (choiceResult.outcome === 'accepted') { + console.log('User accepted the A2HS prompt'); + } else { + console.log('User dismissed the A2HS prompt'); + } + deferredPrompt = null; + }); + }); +});</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><-- The temporary automatic list below will be replaced soon --></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="<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 <frameset>."><code><frame></code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="The HTML Inline Frame element (<iframe>) represents a nested browsing context, embedding another HTML page into the current one."><code><iframe></code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed" title="The HTML <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><embed></code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object" title="The HTML <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><object></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="<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 <frameset>."><code><frame></code></a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="The HTML Inline Frame element (<iframe>) represents a nested browsing context, embedding another HTML page into the current one."><code><iframe></code></a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/object" title="The HTML <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><object></code></a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/embed" title="The HTML <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><embed></code></a>, or <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/applet" title="The obsolete HTML Applet Element (<applet>) embeds a Java applet into the document; this element has been deprecated in favor of <object>."><code><applet></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><object></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 ของคุณ (ตัวอย่างเช่น "ฉันควรใช้องค์ประกอบ <h2> หรือองค์ประกอบ <strong> หรือไม่") โดยเน้นที่มาร์กอัปที่มีความหมาย</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> diff --git a/files/th/zones/index.html b/files/th/zones/index.html new file mode 100644 index 0000000000..0ce4d6ea6c --- /dev/null +++ b/files/th/zones/index.html @@ -0,0 +1,53 @@ +--- +title: โซน +slug: Zones +translation_of: Zones +--- +<p><span id="result_box" lang="th"><span class="hps">MDN โซน คือศูนย์รวบรวมข้อมูลเกี่ยวกับหัวข้อและผลิตภัณฑ์ต่างๆ รายการที่เห็นด้านล่างคือโซนทั้งหมดที่เรามีอยู่ตอนนี้</span></span></p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 id="สร้างเว็บและแอป">สร้างเว็บและแอป </h2> + +<dl> + <dt><a href="/en-US/Apps">ศูนย์รวมแอป</a></dt> + <dd>Learn how to create open Web apps—rich experiences that run across multiple devices and form factors—using the same Web standards and open technologies you already know.</dd> + <dt><a href="/en-US/docs/Learn">เรียนรู้</a></dt> + <dd>This zone is all about articles to help newcomers to Web development get started in this exciting new world.</dd> + <dt><a href="/en-US/docs/Tools">เครื่องมือสำหรับนักพัฒนาแอป</a></dt> + <dd>Learn how to use the Firefox developer tools to debug, test, and optimize your Web apps and sites.</dd> + <dt><a href="/en-US/Marketplace">ตลาด Firefox</a></dt> + <dd>An open, non-proprietary online marketplace for Web applications built using HTML, CSS, and JavaScript. Submit apps to the Firefox Marketplace or use the code to build your own marketplace.</dd> + <dt><a href="/en-US/docs/Games">Game development</a></dt> + <dd>Learn how to develop games for the Web, how to port existing games to Web technologies, and how to turn your games into Web apps.</dd> +</dl> +</div> + +<div class="section"> +<h2 id="Products" name="Products"><span class="short_text" id="result_box" lang="th"><span class="hps">ผลิตภัณฑ์</span><span>และโครงการ</span></span></h2> + +<dl> + <dt><a href="/en-US/docs/Emscripten">Emscripten</a></dt> + <dd>An LLVM to JavaScript compiler; this lets you compile, for example, C++ code into JavaScript code which can be run in any Web browser.</dd> + <dt><a href="/en-US/docs/L20n">L20n</a></dt> + <dd>A JavaScript localization framework for unleashing your natural language's power with simple code.</dd> + <dt><a href="/en-US/docs/Project:MDN">The MDN project</a></dt> + <dd>The Mozilla Developer Network (this site) relies on its community of readers and contributors to grow and improve. You can learn here how to help use, contribute to, and build the code behind MDN!</dd> + <dt><a href="/en-US/Persona">Persona</a></dt> + <dd>A new simple, privacy-sensitive single-sign in system developed by Mozilla which lets users log into your Web site using their email address, freeing you from password management.</dd> +</dl> + +<h2 id="เทคโนโลยีของ_Mozilla"><span class="short_text" id="result_box" lang="th"><span class="hps">เทคโนโลยีของ</span> <span class="hps">Mozilla</span></span></h2> + +<dl> + <dt><a href="/en-US/Add-ons">Add-ons</a></dt> + <dd>Learn how to build and install extensions, themes, and plug-ins for Mozilla-based software, including the popular Firefox Web browser.</dd> + <dt><a href="/en-US/Firefox">Firefox</a></dt> + <dd>Learn all about Firefox, from how to build and revise it to how to build add-ons specifically for it.</dd> + <dt><a href="/en-US/Firefox_OS">Firefox OS</a></dt> + <dd>A new mobile operating system developed by Mozilla which lets users install and run open Web applications created using HTML, CSS, and JavaScript.</dd> +</dl> +</div> +</div> + +<p> </p> |