Skip to content

javascript-tutorial/th.javascript.info

Repository files navigation

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

ยินดีต้อนรับสู่คู่มือภาษาโปรแกรม 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

Jetbrains


Prasit Tongpradit @EpicHigh - Maintainer

Prasit Tongpradit @EpicHigh