diff options
| author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
| commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
| tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/th | |
| parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
| download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip | |
remove retired locales (#699)
Diffstat (limited to 'files/th')
63 files changed, 0 insertions, 8644 deletions
diff --git a/files/th/_redirects.txt b/files/th/_redirects.txt deleted file mode 100644 index 909fec6d83..0000000000 --- a/files/th/_redirects.txt +++ /dev/null @@ -1,20 +0,0 @@ -# DO NOT EDIT THIS FILE MANUALLY. -# Use the CLI instead: -# -# yarn content add-redirect <fromURL> <toURL> -# -# FROM-URL TO-URL -/th/docs/Learn/ฝั่งเซิร์ฟเวอร์ /th/docs/Learn/Server-side -/th/docs/Learn/เริ่มต้นใช้งานเว็บ /th/docs/Learn/Getting_started_with_the_web -/th/docs/MDN/Contribute/Howto/Create_an_MDN_account /th/docs/orphaned/MDN/Contribute/Howto/Create_an_MDN_account -/th/docs/MDN/Contribute/Howto/Do_a_technical_review /th/docs/orphaned/MDN/Contribute/Howto/Do_a_technical_review -/th/docs/MDN/Getting_started /th/docs/MDN/Contribute/Getting_started -/th/docs/MDN_at_ten /th/docs/MDN/At_ten -/th/docs/Mozilla/Firefox/เปิดผนึก /th/docs/Mozilla/Firefox/Releases -/th/docs/Mozilla/Firefox/เปิดผนึก/30 /th/docs/Mozilla/Firefox/Releases/30 -/th/docs/Mozilla/Firefox/เปิดผนึก/47 /th/docs/Mozilla/Firefox/Releases/47 -/th/docs/Tools/Debugger/www.หนังโป้.com /th/docs/Tools/Debugger/UI_Tour -/th/docs/Tools/WebIDE/การทำงานร่วมกับคอร์โดวาแอพพลิเคชั่นใน_WebIDE /th/docs/Tools/WebIDE/การทํางานร่วมกับคอร์โดวาแอพพลิเคชั่นใน_WebIDE -/th/docs/Web/Guide/CSS /th/docs/Learn/CSS -/th/docs/Web/Guide/HTML /th/docs/Learn/HTML -/th/docs/en /en-US/ diff --git a/files/th/_wikihistory.json b/files/th/_wikihistory.json deleted file mode 100644 index 6c996613a3..0000000000 --- a/files/th/_wikihistory.json +++ /dev/null @@ -1,455 +0,0 @@ -{ - "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/Getting_started_with_the_web": { - "modified": "2020-08-22T12:21:31.189Z", - "contributors": [ - "luciferz2130" - ] - }, - "Learn/HTML": { - "modified": "2020-07-16T22:22:23.884Z", - "contributors": [ - "TornadoIDS" - ] - }, - "Learn/JavaScript": { - "modified": "2020-07-16T22:29:44.958Z", - "contributors": [ - "SphinxKnight" - ] - }, - "Learn/Server-side": { - "modified": "2020-08-22T12:32:08.079Z", - "contributors": [ - "luciferz2130" - ] - }, - "MDN": { - "modified": "2020-02-19T17:58:18.306Z", - "contributors": [ - "jswisher", - "SphinxKnight", - "wbamberg", - "Jeremie", - "Panan", - "Sheppy" - ] - }, - "MDN/At_ten": { - "modified": "2019-03-23T22:48:09.302Z", - "contributors": [ - "wkforever" - ] - }, - "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-14T11:30:10.604Z", - "contributors": [ - "wbamberg", - "jswisher" - ] - }, - "Mozilla": { - "modified": "2019-03-23T23:27:29.227Z", - "contributors": [ - "Nampa", - "Sheppy" - ] - }, - "Mozilla/Firefox": { - "modified": "2019-09-10T15:02:19.712Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "taksakorn", - "matchbox_par", - "rigelenrique", - "Nampa", - "satthawut" - ] - }, - "Mozilla/Firefox/Releases": { - "modified": "2019-01-16T18:30:43.586Z", - "contributors": [ - "wbamberg", - "Nampa" - ] - }, - "Mozilla/Firefox/Releases/30": { - "modified": "2019-03-23T23:12:58.184Z", - "contributors": [ - "wbamberg", - "Dexpaktho" - ] - }, - "Mozilla/Firefox/Releases/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/UI_Tour": { - "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/Headers": { - "modified": "2020-12-13T08:48:11.495Z", - "contributors": [ - "chrisdavidmills" - ] - }, - "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-14T09:31:16.518Z", - "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" - ] - }, - "orphaned/MDN/Contribute/Howto/Create_an_MDN_account": { - "modified": "2019-04-30T21:53:50.225Z", - "contributors": [ - "wbamberg", - "wittawat456" - ] - }, - "orphaned/MDN/Contribute/Howto/Do_a_technical_review": { - "modified": "2019-07-02T19:28:15.866Z", - "contributors": [ - "aliceparklad", - "wbamberg", - "nhoobee", - "daneeyan" - ] - } -} diff --git a/files/th/glossary/data_structure/index.html b/files/th/glossary/data_structure/index.html deleted file mode 100644 index 8be04c700d..0000000000 --- a/files/th/glossary/data_structure/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -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 deleted file mode 100644 index 8e1c81312d..0000000000 --- a/files/th/glossary/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -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 deleted file mode 100644 index 66e2bc7961..0000000000 --- a/files/th/learn/accessibility/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -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 deleted file mode 100644 index 03b2f56611..0000000000 --- a/files/th/learn/css/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -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 deleted file mode 100644 index 0f845fc458..0000000000 --- a/files/th/learn/front-end_web_developer/index.html +++ /dev/null @@ -1,193 +0,0 @@ ---- -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/getting_started_with_the_web/index.html b/files/th/learn/getting_started_with_the_web/index.html deleted file mode 100644 index 464cfb3ef3..0000000000 --- a/files/th/learn/getting_started_with_the_web/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: เริ่มต้นใช้งานเว็บ -slug: Learn/Getting_started_with_the_web -translation_of: Learn/Getting_started_with_the_web -original_slug: Learn/เริ่มต้นใช้งานเว็บ ---- -<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/learn/html/index.html b/files/th/learn/html/index.html deleted file mode 100644 index e2aad092ab..0000000000 --- a/files/th/learn/html/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -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 deleted file mode 100644 index bbc331db41..0000000000 --- a/files/th/learn/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -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 deleted file mode 100644 index f01ce72c27..0000000000 --- a/files/th/learn/javascript/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -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/server-side/index.html b/files/th/learn/server-side/index.html deleted file mode 100644 index 1212709b56..0000000000 --- a/files/th/learn/server-side/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: การเขียนโปรแกรมเว็บไซต์ฝั่งเซิร์ฟเวอร์ -slug: Learn/Server-side -translation_of: Learn/Server-side -original_slug: Learn/ฝั่งเซิร์ฟเวอร์ ---- -<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/mdn/at_ten/index.html b/files/th/mdn/at_ten/index.html deleted file mode 100644 index 02df910e96..0000000000 --- a/files/th/mdn/at_ten/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: MDN at 10 -slug: MDN/At_ten -translation_of: MDN_at_ten -original_slug: MDN_at_ten ---- -<p><span class="hidden"> </span> </p> - -<p> </p> - -<p><span class="hidden"> </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/mdn/contribute/getting_started/index.html b/files/th/mdn/contribute/getting_started/index.html deleted file mode 100644 index 4604fa8d1a..0000000000 --- a/files/th/mdn/contribute/getting_started/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -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/index.html b/files/th/mdn/contribute/howto/index.html deleted file mode 100644 index 08734f5092..0000000000 --- a/files/th/mdn/contribute/howto/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -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 deleted file mode 100644 index 0d83cb13a9..0000000000 --- a/files/th/mdn/contribute/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -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/index.html b/files/th/mdn/index.html deleted file mode 100644 index d83d1544d8..0000000000 --- a/files/th/mdn/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -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/mozilla/firefox/index.html b/files/th/mozilla/firefox/index.html deleted file mode 100644 index 4de7a09594..0000000000 --- a/files/th/mozilla/firefox/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -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/releases/30/index.html b/files/th/mozilla/firefox/releases/30/index.html deleted file mode 100644 index d337a687b7..0000000000 --- a/files/th/mozilla/firefox/releases/30/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Firefox 30 for developers -slug: Mozilla/Firefox/Releases/30 -translation_of: Mozilla/Firefox/Releases/30 -original_slug: Mozilla/Firefox/เปิดผนึก/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/releases/47/index.html b/files/th/mozilla/firefox/releases/47/index.html deleted file mode 100644 index c2be89ca97..0000000000 --- a/files/th/mozilla/firefox/releases/47/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: Firefox 47 for developers -slug: Mozilla/Firefox/Releases/47 -translation_of: Mozilla/Firefox/Releases/47 -original_slug: Mozilla/Firefox/เปิดผนึก/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/releases/index.html b/files/th/mozilla/firefox/releases/index.html deleted file mode 100644 index 28fdecf0c4..0000000000 --- a/files/th/mozilla/firefox/releases/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: จดหมายเปิดผนึกถึงนักพัฒนา Firefox -slug: Mozilla/Firefox/Releases -translation_of: Mozilla/Firefox/Releases -original_slug: Mozilla/Firefox/เปิดผนึก ---- -<div>{{FirefoxSidebar}}</div><p>หน้านี้เอื้ออำนวย ลิงค์ไปสู่ "Firefox X สำหรับนักพัฒนา" บนความในแต่ละครั้งที่ FireFox ส่งออกมา จดหมายเหล่านี้ จะให้คุณได้เห็นว่า มีคุณลักษณะใหม่ที่เพิ่มเข้ามา และ บัคที่ถูกตัดทิ้งไปในแต่ละรุ่นของ FireFox</p> -<div class="multiColumnList"> - {{ListSubpages("",1,0,1)}}</div> diff --git a/files/th/mozilla/index.html b/files/th/mozilla/index.html deleted file mode 100644 index c2fb1b4176..0000000000 --- a/files/th/mozilla/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Mozilla -slug: Mozilla -tags: - - NeedsTranslation - - TopicStub -translation_of: Mozilla ---- -<p>บทความด้านล่างเหล่านี้ร่วมด้วย เนื้อหาเกี่ยวกับการดาวน์โหลด และการสร้าง โมซิลล่าโค้ด ในส่วนเพิ่มเติม,คุณจะเจอบทความที่มีประโยชน์เกี่ยวกับ การทำงานของโค้ด, การสร้าง add-ons สำหรับแอพลิเคชั่นบน โมซิลล่า และสิ่งเหล่านี้</p> -<p>{{LandingPageListSubpages}}</p> diff --git a/files/th/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/th/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html deleted file mode 100644 index 0028687b13..0000000000 --- a/files/th/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: How to create an MDN account -slug: orphaned/MDN/Contribute/Howto/Create_an_MDN_account -translation_of: MDN/Contribute/Howto/Create_an_MDN_account -original_slug: 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/orphaned/mdn/contribute/howto/do_a_technical_review/index.html b/files/th/orphaned/mdn/contribute/howto/do_a_technical_review/index.html deleted file mode 100644 index aea658eb56..0000000000 --- a/files/th/orphaned/mdn/contribute/howto/do_a_technical_review/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: How to do a technical review -slug: orphaned/MDN/Contribute/Howto/Do_a_technical_review -translation_of: MDN/Contribute/Howto/Do_a_technical_review -original_slug: 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/tools/debugger/index.html b/files/th/tools/debugger/index.html deleted file mode 100644 index c384131b2e..0000000000 --- a/files/th/tools/debugger/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -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/ui_tour/index.html b/files/th/tools/debugger/ui_tour/index.html deleted file mode 100644 index ba66e82936..0000000000 --- a/files/th/tools/debugger/ui_tour/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: หนังโป้ -slug: Tools/Debugger/UI_Tour -translation_of: Tools/Debugger/UI_Tour -original_slug: Tools/Debugger/www.หนังโป้.com ---- -<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 deleted file mode 100644 index 0c7192993a..0000000000 --- a/files/th/tools/eyedropper/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -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 deleted file mode 100644 index 376632a8b8..0000000000 --- a/files/th/tools/index.html +++ /dev/null @@ -1,218 +0,0 @@ ---- -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/web/api/bluetooth/index.html b/files/th/web/api/bluetooth/index.html deleted file mode 100644 index 74a1f52188..0000000000 --- a/files/th/web/api/bluetooth/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -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 deleted file mode 100644 index 74e6881ee0..0000000000 --- a/files/th/web/api/bluetooth/onavailabilitychanged/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -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 deleted file mode 100644 index 1debf49bb0..0000000000 --- a/files/th/web/api/cachestorage/index.html +++ /dev/null @@ -1,189 +0,0 @@ ---- -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 deleted file mode 100644 index dce3f6b33a..0000000000 --- a/files/th/web/api/geolocation/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -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 deleted file mode 100644 index 91ae57a2e6..0000000000 --- a/files/th/web/api/geolocation_api/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -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 deleted file mode 100644 index 3b2984397b..0000000000 --- a/files/th/web/api/geolocation_api/using_the_geolocation_api/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -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 deleted file mode 100644 index a00cf0ca4b..0000000000 --- a/files/th/web/api/history_api/index.html +++ /dev/null @@ -1,249 +0,0 @@ ---- -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 deleted file mode 100644 index 5ddadeb7cf..0000000000 --- a/files/th/web/api/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -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 deleted file mode 100644 index 15c6eaf802..0000000000 --- a/files/th/web/api/indexeddb_api/index.html +++ /dev/null @@ -1,308 +0,0 @@ ---- -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 deleted file mode 100644 index 0e1ae33f89..0000000000 --- a/files/th/web/api/location/index.html +++ /dev/null @@ -1,217 +0,0 @@ ---- -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 deleted file mode 100644 index 7430312328..0000000000 --- a/files/th/web/api/server-sent_events/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -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 deleted file mode 100644 index 5b2a88ef9e..0000000000 --- a/files/th/web/api/webgl_api/index.html +++ /dev/null @@ -1,253 +0,0 @@ ---- -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 deleted file mode 100644 index fe713179a4..0000000000 --- a/files/th/web/api/websockets_api/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -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 deleted file mode 100644 index 9b84908ede..0000000000 --- a/files/th/web/api/window/index.html +++ /dev/null @@ -1,689 +0,0 @@ ---- -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 deleted file mode 100644 index 015d252f1d..0000000000 --- a/files/th/web/api/xmlhttprequest/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -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 deleted file mode 100644 index 924dc67251..0000000000 --- a/files/th/web/api/xrreferencespacetype/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -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 deleted file mode 100644 index 15b34c9be5..0000000000 --- a/files/th/web/css/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -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 deleted file mode 100644 index f5c72f37f4..0000000000 --- a/files/th/web/css/margin/index.html +++ /dev/null @@ -1,228 +0,0 @@ ---- -title: margin -slug: Web/CSS/margin -tags: - - CSS - - การอ้างอิง - - คุณสมบัติของ CSS -translation_of: Web/CSS/margin -translation_of_original: Web/CSS/margin-new ---- -<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> - -{{csssyntax}} - -<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 deleted file mode 100644 index a521c73391..0000000000 --- a/files/th/web/guide/graphics/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -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 deleted file mode 100644 index 415bd14d23..0000000000 --- a/files/th/web/guide/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -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 deleted file mode 100644 index d1dd12dc75..0000000000 --- a/files/th/web/http/cors/errors/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -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 deleted file mode 100644 index 195504e50f..0000000000 --- a/files/th/web/http/cors/index.html +++ /dev/null @@ -1,565 +0,0 @@ ---- -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/headers/index.html b/files/th/web/http/headers/index.html deleted file mode 100644 index 11d0d9ca86..0000000000 --- a/files/th/web/http/headers/index.html +++ /dev/null @@ -1,469 +0,0 @@ ---- -title: HTTP headers -slug: Web/HTTP/Headers -tags: - - HTTP - - HTTP Header - - Headers - - NeedsTranslation - - Networking - - Overview - - Reference - - TopicStub -translation_of: Web/HTTP/Headers ---- -<div>{{HTTPSidebar}}</div> - -<p><span class="seoSummary"><strong>HTTP headers</strong> let the client and the server pass additional information with an HTTP request or response. An HTTP header consists of its case-insensitive name followed by a colon (<code>:</code>), then by its value.</span> {{Glossary("Whitespace")}} before the value is ignored.</p> - -<p>Custom proprietary headers have historically been used with an <code>X-</code> prefix, but this convention was deprecated in June 2012 because of the inconveniences it caused when nonstandard fields became standard in <a href="https://tools.ietf.org/html/rfc6648">RFC 6648</a>; others are listed in an <a class="external" href="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a>, whose original content was defined in <a class="external" href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA also maintains a <a class="external" href="http://www.iana.org/assignments/message-headers/prov-headers.html">registry of proposed new HTTP headers</a>.</p> - -<p>Headers can be grouped according to their contexts:</p> - -<ul> - <li>{{Glossary("General header", "General headers")}} apply to both requests and responses, but with no relation to the data transmitted in the body.</li> - <li>{{Glossary("Request header", "Request headers")}} contain more information about the resource to be fetched, or about the client requesting the resource.</li> - <li>{{Glossary("Response header", "Response headers")}} hold additional information about the response, like its location or about the server providing it.</li> - <li>{{Glossary("Entity header", "Entity headers")}} contain information about the body of the resource, like its <a href="/en-US/docs/Web/HTTP/Headers/Content-Length">content length</a> or <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a>.</li> -</ul> - -<p>Headers can also be grouped according to how {{Glossary("Proxy_server", "proxies")}} handle them:</p> - -<ul> - <li>{{ httpheader("Connection") }}</li> - <li>{{ httpheader("Keep-Alive") }}</li> - <li>{{ httpheader("Proxy-Authenticate") }}</li> - <li>{{ httpheader("Proxy-Authorization") }}</li> - <li>{{ httpheader("TE") }}</li> - <li>{{ httpheader("Trailer") }}</li> - <li>{{ httpheader("Transfer-Encoding") }}</li> - <li>{{ httpheader("Upgrade") }} (see also <a href="/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism">Protocol upgrade mechanism</a>).</li> -</ul> - -<dl> - <dt id="e2e">End-to-end headers</dt> - <dd>These headers <em>must</em> be transmitted to the final recipient of the message: the server for a request, or the client for a response. Intermediate proxies must retransmit these headers unmodified and caches must store them.</dd> - <dt id="hbh">Hop-by-hop headers</dt> - <dd>These headers are meaningful only for a single transport-level connection, and <em>must not</em> be retransmitted by proxies or cached. Note that only hop-by-hop headers may be set using the {{httpheader("Connection")}} general header.</dd> -</dl> - -<h2 id="Authentication">Authentication</h2> - -<dl> - <dt>{{HTTPHeader("WWW-Authenticate")}}</dt> - <dd>Defines the authentication method that should be used to access a resource.</dd> - <dt>{{HTTPHeader("Authorization")}}</dt> - <dd>Contains the credentials to authenticate a user-agent with a server.</dd> - <dt>{{HTTPHeader("Proxy-Authenticate")}}</dt> - <dd>Defines the authentication method that should be used to access a resource behind a proxy server.</dd> - <dt>{{HTTPHeader("Proxy-Authorization")}}</dt> - <dd>Contains the credentials to authenticate a user agent with a proxy server.</dd> -</dl> - -<h2 id="Caching">Caching</h2> - -<dl> - <dt>{{HTTPHeader("Age")}}</dt> - <dd>The time, in seconds, that the object has been in a proxy cache.</dd> - <dt>{{HTTPHeader("Cache-Control")}}</dt> - <dd>Directives for caching mechanisms in both requests and responses.</dd> - <dt>{{HTTPHeader("Clear-Site-Data")}}</dt> - <dd>Clears browsing data (e.g. cookies, storage, cache) associated with the requesting website.</dd> - <dt>{{HTTPHeader("Expires")}}</dt> - <dd>The date/time after which the response is considered stale.</dd> - <dt>{{HTTPHeader("Pragma")}}</dt> - <dd>Implementation-specific header that may have various effects anywhere along the request-response chain. Used for backwards compatibility with HTTP/1.0 caches where the <code>Cache-Control</code> header is not yet present.</dd> - <dt>{{HTTPHeader("Warning")}}</dt> - <dd>General warning information about possible problems.</dd> -</dl> - -<h2 id="Client_hints">Client hints</h2> - -<p>HTTP {{Glossary("Client_hints", "Client hints")}} are a work in progress. Actual documentation can be found on the <a href="https://httpwg.org/http-extensions/client-hints.html">website of the HTTP working group</a>.</p> - -<dl> - <dt>{{HTTPHeader("Accept-CH")}} {{experimental_inline}}</dt> - <dd>Servers can advertise support for Client Hints using the <code>Accept-CH</code> header field or an equivalent HTML <code><meta></code> element with <code>http-equiv</code> attribute (<a href="https://httpwg.org/http-extensions/client-hints.html#HTML5"><cite>[HTML5]</cite></a>).</dd> - <dt>{{HTTPHeader("Accept-CH-Lifetime")}} {{experimental_inline}}</dt> - <dd>Servers can ask the client to remember the set of Client Hints that the server supports for a specified period of time, to enable delivery of Client Hints on subsequent requests to the server’s origin (<a href="https://httpwg.org/http-extensions/client-hints.html#RFC6454"><cite>[RFC6454]</cite></a>).</dd> - <dt>{{HTTPHeader("Early-Data")}} {{experimental_inline}}</dt> - <dd>Indicates that the request has been conveyed in early data.</dd> - <dt>{{HTTPHeader("Content-DPR")}} {{experimental_inline}}</dt> - <dd>A number that indicates the ratio between physical pixels over CSS pixels of the selected image response.</dd> - <dt>{{HTTPHeader("DPR")}} {{experimental_inline}}</dt> - <dd>A number that indicates the client’s current Device Pixel Ratio (DPR), which is the ratio of physical pixels over CSS pixels (Section 5.2 of <a href="https://httpwg.org/http-extensions/client-hints.html#CSSVAL"><cite>[CSSVAL]</cite></a>) of the layout viewport (Section 9.1.1 of <a href="https://httpwg.org/http-extensions/client-hints.html#CSS2"><cite>[CSS2]</cite></a>) on the device.</dd> - <dt>{{HTTPHeader("Device-Memory")}} {{experimental_inline}}</dt> - <dd>Technically a part of Device Memory API, this header represents an approximate amount of RAM client has.</dd> - <dt>{{HTTPHeader("Save-Data")}} {{experimental_inline}}</dt> - <dd>A boolean that indicates the user agent's preference for reduced data usage.</dd> - <dt>{{HTTPHeader("Viewport-Width")}} {{experimental_inline}}</dt> - <dd> - <div id="rfc.section.3.3.p.1"> - <p>A number that indicates the layout viewport width in CSS pixels. The provided pixel value is a number rounded to the smallest following integer (i.e. ceiling value).</p> - </div> - - <div id="rfc.section.3.3.p.2"> - <p>If <code>Viewport-Width</code> occurs in a message more than once, the last value overrides all previous occurrences.</p> - </div> - </dd> - <dt>{{HTTPHeader("Width")}} {{experimental_inline}}</dt> - <dd> - <div id="rfc.section.3.2.p.1"> - <p>The <code>Width</code> request header field is a number that indicates the desired resource width in physical pixels (i.e. intrinsic size of an image). The provided pixel value is a number rounded to the smallest following integer (i.e. ceiling value).</p> - </div> - - <div id="rfc.section.3.2.p.2"> - <p>If the desired resource width is not known at the time of the request or the resource does not have a display width, the <code>Width</code> header field can be omitted. If <code>Width</code> occurs in a message more than once, the last value overrides all previous occurrences</p> - </div> - </dd> -</dl> - -<h2 id="Conditionals">Conditionals</h2> - -<dl> - <dt>{{HTTPHeader("Last-Modified")}}</dt> - <dd>The last modification date of the resource, used to compare several versions of the same resource. It is less accurate than {{HTTPHeader("ETag")}}, but easier to calculate in some environments. Conditional requests using {{HTTPHeader("If-Modified-Since")}} and {{HTTPHeader("If-Unmodified-Since")}} use this value to change the behavior of the request.</dd> - <dt>{{HTTPHeader("ETag")}}</dt> - <dd>A unique string identifying the version of the resource. Conditional requests using {{HTTPHeader("If-Match")}} and {{HTTPHeader("If-None-Match")}} use this value to change the behavior of the request.</dd> - <dt>{{HTTPHeader("If-Match")}}</dt> - <dd>Makes the request conditional, and applies the method only if the stored resource matches one of the given ETags.</dd> - <dt>{{HTTPHeader("If-None-Match")}}</dt> - <dd>Makes the request conditional, and applies the method only if the stored resource <em>doesn't</em> match any of the given ETags. This is used to update caches (for safe requests), or to prevent to upload a new resource when one already exists.</dd> - <dt>{{HTTPHeader("If-Modified-Since")}}</dt> - <dd>Makes the request conditional, and expects the entity to be transmitted only if it has been modified after the given date. This is used to transmit data only when the cache is out of date.</dd> - <dt>{{HTTPHeader("If-Unmodified-Since")}}</dt> - <dd>Makes the request conditional, and expects the entity to be transmitted only if it has not been modified after the given date. This ensures the coherence of a new fragment of a specific range with previous ones, or to implement an optimistic concurrency control system when modifying existing documents.</dd> - <dt>{{HTTPHeader("Vary")}}</dt> - <dd>Determines how to match request headers to decide whether a cached response can be used rather than requesting a fresh one from the origin server.</dd> -</dl> - -<h2 id="Connection_management">Connection management</h2> - -<dl> - <dt>{{HTTPHeader("Connection")}}</dt> - <dd>Controls whether the network connection stays open after the current transaction finishes.</dd> - <dt>{{HTTPHeader("Keep-Alive")}}</dt> - <dd>Controls how long a persistent connection should stay open.</dd> -</dl> - -<h2 id="Content_negotiation"><a href="/en-US/docs/Web/HTTP/Content_negotiation">Content negotiation</a></h2> - -<dl> - <dt>{{HTTPHeader("Accept")}}</dt> - <dd>Informs the server about the {{Glossary("MIME_type", "types")}} of data that can be sent back.</dd> - <dt>{{HTTPHeader("Accept-Charset")}}</dt> - <dd>Which {{Glossary("character encodings")}} the client understands.</dd> - <dt>{{HTTPHeader("Accept-Encoding")}}</dt> - <dd>The encoding algorithm, usually a <a href="/en-US/docs/Web/HTTP/Compression">compression algorithm</a>, that can be used on the resource sent back.</dd> - <dt>{{HTTPHeader("Accept-Language")}}</dt> - <dd>Informs the server about the human language the server is expected to send back. This is a hint and is not necessarily under the full control of the user: the server should always pay attention not to override an explicit user choice (like selecting a language from a dropdown).</dd> -</dl> - -<h2 id="Controls">Controls</h2> - -<dl> - <dt>{{HTTPHeader("Expect")}}</dt> - <dd>Indicates expectations that need to be fulfilled by the server to properly handle the request.</dd> - <dt>{{HTTPHeader("Max-Forwards")}}</dt> -</dl> - -<h2 id="Cookies">Cookies</h2> - -<dl> - <dt>{{HTTPHeader("Cookie")}}</dt> - <dd>Contains stored <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> previously sent by the server with the {{HTTPHeader("Set-Cookie")}} header.</dd> - <dt>{{HTTPHeader("Set-Cookie")}}</dt> - <dd>Send cookies from the server to the user-agent.</dd> - <dt>{{HTTPHeader("Cookie2")}} {{obsolete_inline}}</dt> - <dd>Contains an HTTP cookie previously sent by the server with the {{HTTPHeader("Set-Cookie2")}} header, but has been <strong>obsoleted</strong>. Use {{HTTPHeader("Cookie")}} instead.</dd> - <dt>{{HTTPHeader("Set-Cookie2")}} {{obsolete_inline}}</dt> - <dd>Sends cookies from the server to the user-agent, but has been <strong>obsoleted</strong>. Use {{HTTPHeader("Set-Cookie")}} instead.</dd> -</dl> - -<h2 id="CORS">CORS</h2> - -<p><em>Learn more about CORS <a href="CORS">here</a>.</em></p> - -<dl> - <dt>{{HTTPHeader("Access-Control-Allow-Origin")}}</dt> - <dd>Indicates whether the response can be shared.</dd> - <dt>{{HTTPHeader("Access-Control-Allow-Credentials")}}</dt> - <dd>Indicates whether the response to the request can be exposed when the credentials flag is true.</dd> - <dt>{{HTTPHeader("Access-Control-Allow-Headers")}}</dt> - <dd>Used in response to a {{Glossary("Preflight_request", "preflight request")}} to indicate which HTTP headers can be used when making the actual request.</dd> - <dt>{{HTTPHeader("Access-Control-Allow-Methods")}}</dt> - <dd>Specifies the methods allowed when accessing the resource in response to a preflight request.</dd> - <dt>{{HTTPHeader("Access-Control-Expose-Headers")}}</dt> - <dd>Indicates which headers can be exposed as part of the response by listing their names.</dd> - <dt>{{HTTPHeader("Access-Control-Max-Age")}}</dt> - <dd>Indicates how long the results of a preflight request can be cached.</dd> - <dt>{{HTTPHeader("Access-Control-Request-Headers")}}</dt> - <dd>Used when issuing a preflight request to let the server know which HTTP headers will be used when the actual request is made.</dd> - <dt>{{HTTPHeader("Access-Control-Request-Method")}}</dt> - <dd>Used when issuing a preflight request to let the server know which <a href="/en-US/docs/Web/HTTP/Methods">HTTP method</a> will be used when the actual request is made.</dd> - <dt>{{HTTPHeader("Origin")}}</dt> - <dd>Indicates where a fetch originates from.</dd> - <dt>{{HTTPHeader("Timing-Allow-Origin")}}</dt> - <dd>Specifies origins that are allowed to see values of attributes retrieved via features of the <a href="/en-US/docs/Web/API/Resource_Timing_API">Resource Timing API</a>, which would otherwise be reported as zero due to cross-origin restrictions.</dd> -</dl> - -<h2 id="Do_Not_Track">Do Not Track</h2> - -<dl> - <dt>{{HTTPHeader("DNT")}}</dt> - <dd>Expresses the user's tracking preference.</dd> - <dt>{{HTTPHeader("Tk")}}</dt> - <dd>Indicates the tracking status of the corresponding response.</dd> -</dl> - -<h2 id="Downloads">Downloads</h2> - -<dl> - <dt>{{HTTPHeader("Content-Disposition")}}</dt> - <dd>Indicates if the resource transmitted should be displayed inline (default behavior without the header), or if it should be handled like a download and the browser should present a “Save As” dialog.</dd> -</dl> - -<h2 id="Message_body_information">Message body information</h2> - -<dl> - <dt>{{HTTPHeader("Content-Length")}}</dt> - <dd>The size of the resource, in decimal number of bytes.</dd> - <dt>{{HTTPHeader("Content-Type")}}</dt> - <dd>Indicates the media type of the resource.</dd> - <dt>{{HTTPHeader("Content-Encoding")}}</dt> - <dd>Used to specify the compression algorithm.</dd> - <dt>{{HTTPHeader("Content-Language")}}</dt> - <dd>Describes the human language(s) intended for the audience, so that it allows a user to differentiate according to the users' own preferred language.</dd> - <dt>{{HTTPHeader("Content-Location")}}</dt> - <dd>Indicates an alternate location for the returned data.</dd> -</dl> - -<h2 id="Proxies">Proxies</h2> - -<dl> - <dt>{{HTTPHeader("Forwarded")}}</dt> - <dd>Contains information from the client-facing side of proxy servers that is altered or lost when a proxy is involved in the path of the request.</dd> - <dt>{{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}}</dt> - <dd>Identifies the originating IP addresses of a client connecting to a web server through an HTTP proxy or a load balancer.</dd> - <dt>{{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}}</dt> - <dd>Identifies the original host requested that a client used to connect to your proxy or load balancer.</dd> - <dt>{{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}}</dt> - <dd>Identifies the protocol (HTTP or HTTPS) that a client used to connect to your proxy or load balancer.</dd> - <dt>{{HTTPHeader("Via")}}</dt> - <dd>Added by proxies, both forward and reverse proxies, and can appear in the request headers and the response headers.</dd> -</dl> - -<h2 id="Redirects">Redirects</h2> - -<dl> - <dt>{{HTTPHeader("Location")}}</dt> - <dd>Indicates the URL to redirect a page to.</dd> -</dl> - -<h2 id="Request_context">Request context</h2> - -<dl> - <dt>{{HTTPHeader("From")}}</dt> - <dd>Contains an Internet email address for a human user who controls the requesting user agent.</dd> - <dt>{{HTTPHeader("Host")}}</dt> - <dd>Specifies the domain name of the server (for virtual hosting), and (optionally) the TCP port number on which the server is listening.</dd> - <dt>{{HTTPHeader("Referer")}}</dt> - <dd>The address of the previous web page from which a link to the currently requested page was followed.</dd> - <dt>{{HTTPHeader("Referrer-Policy")}}</dt> - <dd>Governs which referrer information sent in the {{HTTPHeader("Referer")}} header should be included with requests made.</dd> - <dt>{{HTTPHeader("User-Agent")}}</dt> - <dd>Contains a characteristic string that allows the network protocol peers to identify the application type, operating system, software vendor or software version of the requesting software user agent. See also the <a href="/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox user agent string reference</a>.</dd> -</dl> - -<h2 id="Response_context">Response context</h2> - -<dl> - <dt>{{HTTPHeader("Allow")}}</dt> - <dd>Lists the set of HTTP request methods supported by a resource.</dd> - <dt>{{HTTPHeader("Server")}}</dt> - <dd>Contains information about the software used by the origin server to handle the request.</dd> -</dl> - -<h2 id="Range_requests">Range requests</h2> - -<dl> - <dt>{{HTTPHeader("Accept-Ranges")}}</dt> - <dd>Indicates if the server supports range requests, and if so in which unit the range can be expressed.</dd> - <dt>{{HTTPHeader("Range")}}</dt> - <dd>Indicates the part of a document that the server should return.</dd> - <dt>{{HTTPHeader("If-Range")}}</dt> - <dd>Creates a conditional range request that is only fulfilled if the given etag or date matches the remote resource. Used to prevent downloading two ranges from incompatible version of the resource.</dd> - <dt>{{HTTPHeader("Content-Range")}}</dt> - <dd>Indicates where in a full body message a partial message belongs.</dd> -</dl> - -<h2 id="Security">Security</h2> - -<dl> - <dt>{{HTTPHeader("Cross-Origin-Embedder-Policy")}} ({{Glossary("COEP")}})</dt> - <dd>Allows a server to declare an embedder policy for a given document.</dd> -</dl> - -<dl> - <dt>{{HTTPHeader("Cross-Origin-Opener-Policy")}} ({{Glossary("COOP")}})</dt> - <dd>Prevents other domains from opening/controlling a window.</dd> -</dl> - -<dl> - <dt>{{HTTPHeader("Cross-Origin-Resource-Policy")}} ({{Glossary("CORP")}})</dt> - <dd>Prevents other domains from reading the response of the resources to which this header is applied.</dd> - <dt>{{HTTPHeader("Content-Security-Policy")}} ({{Glossary("CSP")}})</dt> - <dd>Controls resources the user agent is allowed to load for a given page.</dd> - <dt>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</dt> - <dd>Allows web developers to experiment with policies by monitoring, but not enforcing, their effects. These violation reports consist of {{Glossary("JSON")}} documents sent via an HTTP <code>POST</code> request to the specified URI.</dd> - <dt>{{HTTPHeader("Expect-CT")}}</dt> - <dd>Allows sites to opt in to reporting and/or enforcement of Certificate Transparency requirements, which prevents the use of misissued certificates for that site from going unnoticed. When a site enables the Expect-CT header, they are requesting that Chrome check that any certificate for that site appears in public CT logs.</dd> - <dt>{{HTTPHeader("Feature-Policy")}}</dt> - <dd>Provides a mechanism to allow and deny the use of browser features in its own frame, and in iframes that it embeds.</dd> -</dl> - -<dl> - <dt>{{HTTPHeader("Origin-Isolation")}} {{experimental_inline}}</dt> - <dd>Provides a mechanism to allow web applications to isolate their origins.</dd> -</dl> - -<dl> - <dt>{{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}})</dt> - <dd>Force communication using HTTPS instead of HTTP.</dd> - <dt>{{HTTPHeader("Upgrade-Insecure-Requests")}}</dt> - <dd>Sends a signal to the server expressing the client’s preference for an encrypted and authenticated response, and that it can successfully handle the {{CSP("upgrade-insecure-requests")}} directive.</dd> - <dt>{{HTTPHeader("X-Content-Type-Options")}}</dt> - <dd>Disables MIME sniffing and forces browser to use the type given in {{HTTPHeader("Content-Type")}}.</dd> - <dt>{{HTTPHeader("X-Download-Options")}}</dt> - <dd>The <code><a href="https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/jj542450(v=vs.85)?#the-noopen-directive">X-Download-Options</a></code> HTTP header indicates that the browser (Internet Explorer) should not display the option to "Open" a file that has been downloaded from an application, to prevent phishing attacks as the file otherwise would gain access to execute in the context of the application. (Note: related <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/18488178/">MS Edge bug</a>).</dd> - <dt>{{HTTPHeader("X-Frame-Options")}} (XFO)</dt> - <dd>Indicates whether a browser should be allowed to render a page in a {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} or {{HTMLElement("object")}}.</dd> - <dt>{{HTTPHeader("X-Permitted-Cross-Domain-Policies")}}</dt> - <dd>Specifies if a cross-domain policy file (<code>crossdomain.xml</code>) is allowed. The file may define a policy to grant clients, such as Adobe's Flash Player (now obsolete), Adobe Acrobat, Microsoft Silverlight (now obsolete), or Apache Flex, permission to handle data across domains that would otherwise be restricted due to the <a href="/en-US/docs/Web/Security/Same-origin_policy">Same-Origin Policy</a>. See the <a href="https://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html">Cross-domain Policy File Specification</a> for more information.</dd> - <dt>{{HTTPHeader("X-Powered-By")}}</dt> - <dd>May be set by hosting environments or other frameworks and contains information about them while not providing any usefulness to the application or its visitors. Unset this header to avoid exposing potential vulnerabilities.</dd> - <dt>{{HTTPHeader("X-XSS-Protection")}}</dt> - <dd>Enables cross-site scripting filtering.</dd> -</dl> - -<h3 id="HTTP_Public_Key_Pinning_GlossaryHPKP">HTTP Public Key Pinning ({{Glossary("HPKP")}})</h3> - -<p>HTTP Public Key Pinning has been deprecated and removed in favor of Certificate Transparency and {{HTTPHeader("Expect-CT")}}.</p> - -<dl> - <dt>{{HTTPHeader("Public-Key-Pins")}}</dt> - <dd>Associates a specific cryptographic public key with a certain web server to decrease the risk of {{Glossary("MITM")}} attacks with forged certificates.</dd> - <dt>{{HTTPHeader("Public-Key-Pins-Report-Only")}}</dt> - <dd>Sends reports to the report-uri specified in the header and does still allow clients to connect to the server even if the pinning is violated.</dd> -</dl> - -<h3 id="Fetch_metadata_request_headers">Fetch metadata request headers</h3> - -<dl> - <dt>{{HTTPHeader("Sec-Fetch-Site")}}</dt> - <dd>It is a request header that indicates the relationship between a request initiator's origin and its target's origin. It is a Structured Header whose value is a token with possible values <code>cross-site</code>, <code>same-origin</code>, <code>same-site</code>, and <code>none</code>.</dd> - <dt>{{HTTPHeader("Sec-Fetch-Mode")}}</dt> - <dd>It is a request header that indicates the request's mode to a server. It is a Structured Header whose value is a token with possible values <code>cors</code>, <code>navigate</code>, <code>nested-navigate</code>, <code>no-cors</code>, <code>same-origin</code>, and <code>websocket</code>.</dd> - <dt>{{HTTPHeader("Sec-Fetch-User")}}</dt> - <dd>It is a request header that indicates whether or not a navigation request was triggered by user activation. It is a Structured Header whose value is a boolean so possible values are <code>?0</code> for false and <code>?1</code> for true.</dd> - <dt>{{HTTPHeader("Sec-Fetch-Dest")}}</dt> - <dd>It is a request header that indicates the request's destination to a server. It is a Structured Header whose value is a token with possible values <code>audio</code>, <code>audioworklet</code>, <code>document</code>, <code>embed</code>, <code>empty</code>, <code>font</code>, <code>image</code>, <code>manifest</code>, <code>object</code>, <code>paintworklet</code>, <code>report</code>, <code>script</code>, <code>serviceworker</code>, <code>sharedworker</code>, <code>style</code>, <code>track</code>, <code>video</code>, <code>worker</code>, <code>xslt</code>, and <code>nested-document</code>.</dd> -</dl> - -<h2 id="Server-sent_events">Server-sent events</h2> - -<dl> - <dt>{{HTTPHeader("Last-Event-ID")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("NEL")}} {{experimental_inline}}</dt> - <dd>Defines a mechanism that enables developers to declare a network error reporting policy.</dd> - <dt>{{HTTPHeader("Ping-From")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Ping-To")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Report-To")}}</dt> - <dd>Used to specify a server endpoint for the browser to send warning and error reports to.</dd> -</dl> - -<h2 id="Transfer_coding">Transfer coding</h2> - -<dl> - <dt>{{HTTPHeader("Transfer-Encoding")}}</dt> - <dd>Specifies the form of encoding used to safely transfer the entity to the user.</dd> - <dt>{{HTTPHeader("TE")}}</dt> - <dd>Specifies the transfer encodings the user agent is willing to accept.</dd> - <dt>{{HTTPHeader("Trailer")}}</dt> - <dd>Allows the sender to include additional fields at the end of chunked message.</dd> -</dl> - -<h2 id="WebSockets">WebSockets</h2> - -<dl> - <dt>{{HTTPHeader("Sec-WebSocket-Key")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Sec-WebSocket-Extensions")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Sec-WebSocket-Accept")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Sec-WebSocket-Protocol")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Sec-WebSocket-Version")}}</dt> - <dd>...</dd> -</dl> - -<h2 id="Other">Other</h2> - -<dl> - <dt>{{HTTPHeader("Accept-Push-Policy")}} {{experimental_inline}}</dt> - <dd>A client can express the desired push policy for a request by sending an <code><a href="https://tools.ietf.org/html/draft-ruellan-http-accept-push-policy-00#section-3.1">Accept-Push-Policy</a></code> header field in the request.</dd> - <dt>{{HTTPHeader("Accept-Signature")}} {{experimental_inline}}</dt> - <dd>A client can send the <code><a href="https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.3.7">Accept-Signature</a></code> header field to indicate intention to take advantage of any available signatures and to indicate what kinds of signatures it supports.</dd> - <dt>{{HTTPHeader("Alt-Svc")}}</dt> - <dd>Used to list alternate ways to reach this service.</dd> - <dt>{{HTTPHeader("Date")}}</dt> - <dd>Contains the date and time at which the message was originated.</dd> - <dt>{{HTTPHeader("Large-Allocation")}}</dt> - <dd>Tells the browser that the page being loaded is going to want to perform a large allocation.</dd> - <dt>{{HTTPHeader("Link")}}</dt> - <dd>The <code><a href="https://tools.ietf.org/html/rfc5988#section-5">Link</a></code> entity-header field provides a means for serialising one or more links in HTTP headers. It is semantically equivalent to the HTML {{HTMLElement("link")}} element.</dd> - <dt>{{HTTPHeader("Push-Policy")}} {{experimental_inline}}</dt> - <dd>A <code><a href="https://tools.ietf.org/html/draft-ruellan-http-accept-push-policy-00#section-3.2">Push-Policy</a></code> defines the server behaviour regarding push when processing a request.</dd> - <dt>{{HTTPHeader("Retry-After")}}</dt> - <dd>Indicates how long the user agent should wait before making a follow-up request.</dd> - <dt>{{HTTPHeader("Signature")}} {{experimental_inline}}</dt> - <dd>The <code><a href="https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.3.1">Signature</a></code> header field conveys a list of signatures for an exchange, each one accompanied by information about how to determine the authority of and refresh that signature.</dd> - <dt>{{HTTPHeader("Signed-Headers")}} {{experimental_inline}}</dt> - <dd>The <code><a href="https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.5.1.2">Signed-Headers</a></code> header field identifies an ordered list of response header fields to include in a signature.</dd> - <dt>{{HTTPHeader("Server-Timing")}}</dt> - <dd>Communicates one or more metrics and descriptions for the given request-response cycle.</dd> - <dt>{{HTTPHeader("Service-Worker-Allowed")}}</dt> - <dd>Used to remove the <a href="https://w3c.github.io/ServiceWorker/#path-restriction">path restriction</a> by including this header <a href="https://w3c.github.io/ServiceWorker/#service-worker-script-response">in the response of the Service Worker script</a>.</dd> - <dt>{{HTTPHeader("SourceMap")}}</dt> - <dd>Links generated code to a <a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">source map</a>.</dd> - <dt>{{HTTPHeader("Upgrade")}}</dt> - <dd>The relevant RFC document for the <a href="https://tools.ietf.org/html/rfc7230#section-6.7">Upgrade header field is RFC 7230, section 6.7</a>. The standard establishes rules for upgrading or changing to a different protocol on the current client, server, transport protocol connection. For example, this header standard allows a client to change from HTTP 1.1 to HTTP 2.0, assuming the server decides to acknowledge and implement the Upgrade header field. Neither party is required to accept the terms specified in the Upgrade header field. It can be used in both client and server headers. If the Upgrade header field is specified, then the sender MUST also send the Connection header field with the upgrade option specified. For details on the Connection header field <a href="https://tools.ietf.org/html/rfc7230#section-6.1">please see section 6.1 of the aforementioned RFC</a>.</dd> - <dt>{{HTTPHeader("X-DNS-Prefetch-Control")}}</dt> - <dd>Controls DNS prefetching, a feature by which browsers proactively perform 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.</dd> - <dt>{{HTTPHeader("X-Firefox-Spdy")}} {{deprecated_inline}} {{non-standard_inline}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("X-Pingback")}} {{non-standard_inline}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("X-Requested-With")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("X-Robots-Tag")}}{{non-standard_inline}}</dt> - <dd>The <code><a href="https://developers.google.com/search/reference/robots_meta_tag#xrobotstag">X-Robots-Tag</a></code> HTTP header is used to indicate how a web page is to be indexed within public search engine results. The header is effectively equivalent to <code><meta name="robots" content="..."></code>.</dd> - <dt>{{HTTPHeader("X-UA-Compatible")}} {{non-standard_inline}}</dt> - <dd>Used by Internet Explorer to signal which document mode to use.</dd> -</dl> - -<h2 id="Contributing">Contributing</h2> - -<p>You can help by <a href="/en-US/docs/MDN/Contribute/Howto/Document_an_HTTP_header">writing new entries</a> or improving the existing ones.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_header_fields">Wikipedia page on List of HTTP headers</a></li> - <li><a href="https://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a></li> - <li><a href="https://httpwg.org/specs/">HTTP Working Group</a></li> -</ul> diff --git a/files/th/web/http/index.html b/files/th/web/http/index.html deleted file mode 100644 index 832303c8c0..0000000000 --- a/files/th/web/http/index.html +++ /dev/null @@ -1,227 +0,0 @@ ---- -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 deleted file mode 100644 index 9cef9d44f9..0000000000 --- a/files/th/web/http/status/201/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -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 deleted file mode 100644 index e490502369..0000000000 --- a/files/th/web/http/status/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -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 deleted file mode 100644 index 7789948f6f..0000000000 --- a/files/th/web/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -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 deleted file mode 100644 index 76f8f096a5..0000000000 --- a/files/th/web/javascript/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -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 deleted file mode 100644 index 730d3bce5d..0000000000 --- a/files/th/web/manifest/icons/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -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 deleted file mode 100644 index 96287f66c5..0000000000 --- a/files/th/web/manifest/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -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 deleted file mode 100644 index 7513fbd8de..0000000000 --- a/files/th/web/progressive_web_apps/add_to_home_screen/index.html +++ /dev/null @@ -1,211 +0,0 @@ ---- -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 deleted file mode 100644 index 3b4e8c88e0..0000000000 --- a/files/th/web/progressive_web_apps/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -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 deleted file mode 100644 index c00772364d..0000000000 --- a/files/th/web/security/index.html +++ /dev/null @@ -1,238 +0,0 @@ ---- -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 deleted file mode 100644 index 8992059b18..0000000000 --- a/files/th/web/security/mixed_content/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -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 deleted file mode 100644 index 44d392ebd9..0000000000 --- a/files/th/web/tutorials/index.html +++ /dev/null @@ -1,248 +0,0 @@ ---- -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> |