javascript-tutorial / th.javascript.info

Modern JavaScript Thai Version

โมเดิร์นจาวาสคริปฉบับภาษาไทย

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

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

นอกจากการใช้งานในเว็บเบราว์เซอร์แล้ว JavaScript ยังสามารถใช้ในการพัฒนาแอปพลิเคชันฝั่งเซิร์ฟเวอร์ด้วยแพลตฟอร์มอย่าง Node.js ทำให้สามารถสร้างแอปพลิเคชันเว็บแบบครบวงจรด้วยภาษาเดียว

ตัวอย่างการใช้งาน JavaScript ในชีวิตประจำวันของคนไทย เช่น:

• ระบบซื้อขายออนไลน์ เช่น Lazada หรือ Shopee ที่ใช้ JavaScript ในการจัดการตะกร้าสินค้า คำนวณราคา และตรวจสอบข้อมูลที่กรอกในแบบฟอร์ม
• เว็บไซต์ข่าวหรือบันเทิง เช่น Sanook หรือ Kapook ที่ใช้ JavaScript ในการโหลดข่าวเพิ่มเติมเมื่อเลื่อนจอ หรือแสดงวิดีโอโดยไม่ต้องเปลี่ยนหน้า
• ระบบจองตั๋วออนไลน์ เช่น Nok Air หรือ Thai Ticketmaster ที่ใช้ JavaScript เพื่อตรวจสอบที่นั่งว่าง และอัปเดตราคาตั๋วแบบเรียลไทม์

ในคู่มือนี้ เราจะเริ่มต้นจากพื้นฐาน เช่น ไวยากรณ์ของ JavaScript, ชนิดข้อมูล, ตัวแปร, ฟังก์ชัน, และโครงสร้างควบคุม จากนั้นจะค่อย ๆ ไปสู่หัวข้อที่ซับซ้อนขึ้น เช่น การทำงานกับ HTML และ CSS, การจัดการเหตุการณ์ และการโต้ตอบกับ API

เราหวังว่าคู่มือนี้จะช่วยให้คุณสามารถเรียนรู้และใช้งาน JavaScript ได้อย่างมั่นใจ มาร่วมกันสำรวจโลกของการพัฒนาเว็บด้วย JavaScript กันเลย!

อยากมีส่วนร่วมทำได้อย่างไร

• สามารถดูความคืบหน้าการแปลได้ที่หน้า Thai Translate Progress
• เลือกบทความที่ยังไม่ถูกติ๊กและแปล
• คอมเม้นชื่อหัวข้อที่ต้องการแปล ลงใน Thai Translate Progress issue. ตัวอย่าง An Introduction to JavaScript.
  • บอทจะทำการติ๊ก issue ดังกล่าว ทุกคนจะรับทราบว่ามีคนกำลังแปลหัวข้อนี้อยู่
  • คอมเม้นควรมีแค่ชื่อหัวข้อที่จะแปลเท่านั้น
• ทำการ fork เรโปฯนี้, แปลและส่ง PR มาเมื่อการแปลเสร็จสิ้น
  • จั่วหัว PR ควรใช้ชื่อเดียวกับหัวข้อบทความ ทีนี้บอทจะมอบหมายเลขให้ issue นั้นๆ

คลิก https://javascript.info/translate เพื่อดูรายละเอียดในภาษาอื่นๆ

Maintainers จะรีวิวและแก้ไขการแปลไปตามความเหมาะสม

หาก maintainers ไม่ตอบ หรือ ต้องการเป็น maintainers กรุณาเขียนคำร้องที่ เรโปฯหลัก.

มาช่วยร่วมกันแปลคู่มือจาวาสคริปต์ฉบับภาษาไทย

ชื่อของผู้มีส่วนร่วมและจำนวน contribution จะแสดงอยู่ในหน้า "About project" เมื่อการแปลถูกเผยแพร่เป็นที่เรียบร้อย

โครงสร้าง

ในแต่ละบทจะในโฟลเดอร์เป็นของตัวเอง

โดยโฟลเดอร์จะใช้ชื่อ N-url N แทนตัวเลขเพื่อให้ง่านต่อการจัดเรียง ส่วน url แทน URL-slug บนเว็บไซต์

ฉะนั้นในหนึ่งโฟลเดอร์จะประกอบด้วย

• index.md หมายถึงบทเรียน
• article.md หมายถึงบทความ
• task.md หมายถึงการบ้าน

ในแต่ละไฟล์จะเริ่มต้นด้วย # หัวเรื่อง เนื้อหาทั้งหมดจะเป็นภาษามาร์กดาวน์ สามารถแก้ไขได้ด้วย text editor หรือ IDE ได้ตามความชอบ

ทริปการแปล

รบกวนคงตัวแบ่งบรรทัดและย่อหน้าไว้อย่างเดิม ไม่ควรเพิ่มบรรทัดใหม่ และไม่ควรลบบรรทัดหรือย่อหน้าที่มีอยู่แล้ว เพื่อให้ง่ายต่อการ merge กับต้นฉบับภาษาอังกฤษ

ถ้าเห็นว่าสำนวนในภาษาอังกฤษหรือภาษาไทยควรปรับปรุงเพิ่มเติม สามารถส่ง PR มาได้เลย

ข้อกำหนดเพิ่มเติม

• สำหรับคำศัพท์เฉพาะทางโปรแกรมมิ่ง ไม่ควรแปลหรือทับศัพท์ใดๆลงไป ควรละคำดังกล่าวเอาไว้ เช่น "Function Declaration"
• คำที่เป็น keyword ของภาษาอย่าง resolved promise, slash, regexp และอื่นๆ - ควรตรวจดูอภิธานศัพท์เพิ่มเติมจาก MDN หากไม่พบกรุณาละไว้เช่นเดิม

ข้อความใน Code Blocks

• แปลเฉพาะคอมเม้นต์
• แปลเฉพาะ user-messages และ สตริงตัวอย่าง
• ไม่ควรแปลชื่อตัวแปร, ชื่อคลาส, ชื่อ identifiers
• เมื่อแปลเสร็จอย่าลืมตรวจสอบว่าโค้ดทำงานได้อย่างเดิม

ตัวอย่าง:

// Example
const text = "Hello, world";
document.querySelector('.hello').innerHTML = text;

✅ ทำได้ (แปลคอมเม้น)

// ตัวอย่าง
const text = 'Hello, world';
document.querySelector('.hello').innerHTML = text;

❌ ไม่ควรทำ (แปลคลาส):

// ตัวอย่าง
const text = 'Hello, world';
// ".hello" เป็นชื่อคลาสใน HTML
// ไม่ควรแปล
document.querySelector('.สวัสดี').innerHTML = text;

ลิงค์ภายนอก

ในกรณีลิงค์ภายนอกเช่นวิกีพีเดีย อย่าง https://en.wikipedia.org/wiki/JavaScript หรือมีบทความภาษาไทยอื่นๆที่มีคุณภาพและน่าเชื่อถือ สามารถแนบลิงค์ไปที่บทความนั้นๆแทน

ตัวอย่าง:

[JavaScript](https://en.wikipedia.org/wiki/JavaScript) is a programming language.

✅ ทำได้ (en -> th):

[JavaScript](https://th.wikipedia.org/wiki/JavaScript) คือภาษาโปรแกรมมิ่ง

จะใช้ลิงค์ไปหาบทความที่ได้รับการแปลแค่บางส่วนใน MDN ก็ได้

ไม่ควรแนบลิงค์บทความที่ไม่ใช่ภาษาไทย

Metadata

มีบางไฟล์, tasks จะมี YAML metadata อยู่ข้างบน สังเกตได้จาก ---:

importance: 5
---
...

ไม่ควรแปล "importance" และ metadata อื่นๆ

Anchors

ในบางหัวข้อจะมี [#anchor] ปิดท้าย ตัวอย่าง

## Spread operator [#spread-operator]

ไม่ควรแปลหรือลบส่วนที่เป็น [#...] เพราะมีไว้สำหรับ URL anchors.

รันในเครื่องส่วนตัว

คุณสามารถแก้ไขข้อความผ่าน editor ใดก็ได้ คู่มือนี้จะใช้ฟอร์แมตของ markdown เพราะเข้าใจง่าย และหากต้องการเห็นหน้าตาเวลาออนไลน์ ทางเรามีเซิฟเวอร์ที่สามารถรันคู่มือนี้ในเครื่องตัวเองได้ผ่านลิงค์ https://github.com/javascript-tutorial/server

วิธีการรันสามารถทำตามได้ที่ https://github.com/javascript-tutorial/server.

สำหรับผู้ที่ใช้ VS Code และ IDE ตระกูล JetBrains สามารถดาวน์โหลดปลั๊กอินเพื่ออำนวยความสะดวกในการเขียนมาร์กดาวน์ได้ดังต่อไปนี้

VS Code

• Markdown All in One
• Markdown Preview Github Styling

Jetbrains

• Markdown Navigator

♥
Prasit Tongpradit @EpicHigh - Maintainer

Prasit Tongpradit @EpicHigh

th.javascript.info's Issues

Object to primitive conversion

Thai Translation Progress

Maintainer List

@EpicHigh

For New Translators

Please read this first (click to open)

To translate an article:

1. Check that no one else has claimed your article in the checklist below.
2. Comment below with the title of the article that you would like to translate, exactly as listed, e.g. An Introduction to JavaScript.
   • Please take only one article at a time.
3. Fork this repo, translate the article in your fork and submit a pull request!
   • The pull request title should be same as the article, e.g. An Introduction to JavaScript (just like comment)

Please be prompt with your translations! If you find that you can't commit any more, let maintainers know so they can assign the page to someone else.

For Maintainers

Click to open

We recommend that a translation has 2 reviews to be merged.

Please let others know what you do, on community boards and chats, invite them to join. Translations become better if more people see them.

Translations are tracked below, like this:

• Home Page (@iliakan) #1

Our helpful bot watches comments and adds the translator nick and PR id, marks completed, when PR is merged. You can read the details at https://javascript.info/translate/bot.

If something doesn't work right, please contact @iliakan.

Team translation

More details about team translation: https://javascript.info/translate/bot.

Only maintainers can check/uncheck items below. If you're not, please write in a comment what you take to translate, the title, exactly as in the list.

The JavaScript language

An introduction

• An Introduction to JavaScript (@EpicHigh) #110
• Manuals and specifications (@EpicHigh) #111
• Code editors (@EpicHigh) #113
• Developer console (@EpicHigh) #114

JavaScript Fundamentals

• Hello, world! (@EpicHigh) #116
• Code structure (@EpicHigh) #119
• The modern mode, "use strict" (@EpicHigh) #120
• Variables (@EpicHigh) #138
• Data types (@EpicHigh) #139
• Interaction: alert, prompt, confirm (@EpicHigh) #140
• Type Conversions (@EpicHigh) #141
• Basic operators, maths (@EpicHigh) #142
• Comparisons (@EpicHigh) #143
• Conditional branching: if, '?' (@EpicHigh) #144
• Logical operators (@EpicHigh) #145
• Nullish coalescing operator '??' (@EpicHigh) #146
• Loops: while and for (@EpicHigh) #147
• The "switch" statement (@EpicHigh) #148
• Functions (@EpicHigh) #149
• Function expressions (@EpicHigh) #150
• Arrow functions, the basics (@EpicHigh) #151
• JavaScript specials (@EpicHigh) #152

Code quality

• Debugging in the browser (@EpicHigh) #153
• Coding Style (@EpicHigh) #154
• Comments (@EpicHigh) #155
• Ninja code (@EpicHigh) #156
• Automated testing with Mocha (@EpicHigh) #157
• Polyfills and transpilers (@EpicHigh) #158

Objects: the basics

• Objects (@koramit) #102
• Object references and copying (@EpicHigh) #159
• Garbage collection (@EpicHigh) #160
• Object methods, "this" (@EpicHigh) #161
• Constructor, operator "new" (@EpicHigh) #162
• Optional chaining '?.' (@EpicHigh) #163
• Symbol type (@EpicHigh) #164
• Object to primitive conversion (@EpicHigh) #165

Data types

• Methods of primitives (@EpicHigh) #166
• Numbers (@murphy6867)
• Strings
• Arrays
• Array methods
• Iterables
• Map and Set
• WeakMap and WeakSet
• Object.keys, values, entries
• Destructuring assignment
• Date and time
• JSON methods, toJSON

Advanced working with functions

• Recursion and stack
• Rest parameters and spread syntax (@PeterWorakarn) #95
• Variable scope, closure
• The old "var"
• Global object
• Function object, NFE
• The "new Function" syntax
• Scheduling: setTimeout and setInterval
• Decorators and forwarding, call/apply
• Function binding
• Arrow functions revisited

Object properties configuration

• Property flags and descriptors
• Property getters and setters

Prototypes, inheritance

• Prototypal inheritance
• F.prototype
• Native prototypes
• Prototype methods, objects without proto

Classes

• Class basic syntax
• Class inheritance
• Static properties and methods
• Private and protected properties and methods
• Extending built-in classes
• Class checking: "instanceof"
• Mixins

Error handling

• Error handling, "try...catch"
• Custom errors, extending Error

Promises, async/await

• Introduction: callbacks
• Promise
• Promises chaining
• Error handling with promises
• Promise API
• Promisification
• Microtasks
• Async/await

Generators, advanced iteration

• Generators
• Async iteration and generators

Modules

• Modules, introduction
• Export and Import
• Dynamic imports

Miscellaneous

• Proxy and Reflect
• Eval: run a code string
• Currying
• Reference Type
• BigInt
• Unicode, String internals
• WeakRef and FinalizationRegistry

Browser: Document, Events, Interfaces

Document

• Browser environment, specs
• DOM tree
• Walking the DOM
• Searching: getElement*, querySelector*
• Node properties: type, tag and contents
• Attributes and properties
• Modifying the document
• Styles and classes
• Element size and scrolling
• Window sizes and scrolling
• Coordinates

Introduction to Events

• Introduction to browser events (@soap)
• Bubbling and capturing
• Event delegation
• Browser default actions
• Dispatching custom events

UI Events

• Mouse events
• Moving the mouse: mouseover/out, mouseenter/leave
• Drag'n'Drop with mouse events
• Pointer events
• Keyboard: keydown and keyup
• Scrolling

Forms, controls

• Form properties and methods
• Focusing: focus/blur
• Events: change, input, cut, copy, paste
• Forms: event and method submit

Document and resource loading

• Page: DOMContentLoaded, load, beforeunload, unload
• Scripts: async, defer
• Resource loading: onload and onerror

Miscellaneous

• Mutation observer
• Selection and Range
• Event loop: microtasks and macrotasks

Frames and windows

• Popups and window methods
• Cross-window communication
• The clickjacking attack

Binary data, files

• ArrayBuffer, binary arrays
• TextDecoder and TextEncoder
• Blob
• File and FileReader

Network requests

• Fetch
• FormData
• Fetch: Download progress
• Fetch: Abort
• Fetch: Cross-Origin Requests
• Fetch API
• URL objects
• XMLHttpRequest
• Resumable file upload
• Long polling
• WebSocket
• Server Sent Events

Storing data in the browser

• Cookies, document.cookie
• LocalStorage, sessionStorage
• IndexedDB

Animation

• Bezier curve
• CSS-animations
• JavaScript animations

Web components

• From the orbital height
• Custom elements
• Shadow DOM
• Template element
• Shadow DOM slots, composition
• Shadow DOM styling
• Shadow DOM and events

Regular expressions

• Patterns and flags
• Character classes
• Unicode: flag "u" and class \p{...}
• Anchors: string start ^ and end $
• Multiline mode of anchors ^ $, flag "m"
• Word boundary: \b
• Escaping, special characters
• Sets and ranges [...]
• Quantifiers +, *, ? and {n}
• Greedy and lazy quantifiers
• Capturing groups
• Backreferences in pattern: \N and \k<name>
• Alternation (OR) |
• Lookahead and lookbehind
• Catastrophic backtracking
• Sticky flag "y", searching at position
• Methods of RegExp and String