diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 000000000..490051876
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1 @@
+github: iliakan
diff --git a/.gitignore b/.gitignore
index 6f90fd190..1a71fb7c8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,4 @@ sftp-config.json
Thumbs.db
+/svgs
\ No newline at end of file
diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md
index e2efd175e..f183b7da8 100644
--- a/1-js/01-getting-started/1-intro/article.md
+++ b/1-js/01-getting-started/1-intro/article.md
@@ -1,121 +1,121 @@
-# มาทำความรู้จักจาวาสคริปต์
+# บทนำสู่ JavaScript
-มาดูกันว่าจาวาสคริปต์ทำอะไรได้บ้าง มีอะไรพิเศษ และสำรวจเทคโนโลยีในโลกจาวาสคริปต์กัน
+มาดูกันว่า JavaScript มีลักษณะพิเศษอะไรบ้าง ทำอะไรได้บ้าง และเข้ากันได้ดีกับเทคโนโลยีใดบ้าง
-## จาวาสคริปต์คืออะไร
+## JavaScript คืออะไร?
-เริ่มแรกเดิมที *จาวาสคริปต์* มีหน้าที่ทำให้เว็บไซต์ *ดูกับราวมีชีวิต*
+*JavaScript* ถือกำเนิดขึ้นมาเพื่อ "ทำให้เว็บเพจมีชีวิตชีวา"
-โปรแกรมแบบนี้เรียกกันว่า *สคริปต์* โปรแกรมจะถูกเขียนลงบนไฟล์ HTML และทำงานอัตโนมัติเมื่อโหลดหน้าเว็บ
+โปรแกรมที่เขียนด้วยภาษานี้เรียกว่า *สคริปต์* ซึ่งสามารถแทรกลงในโค้ด HTML ของเว็บเพจได้โดยตรง และทำงานโดยอัตโนมัติเมื่อเพจนั้นโหลดขึ้นมา
-สคริปต์ดังกล่าวจะทำงานได้เหมือนการแสดงข้อความทั่วไป ที่ไม่จำเป็นต้องติดตั้งโปรแกรม หรือคอมไพล์ไฟล์ดังกล่าวไว้ก่อน
+สคริปต์เขียนและส่งให้เบราว์เซอร์รันในรูปแบบข้อความธรรมดา ไม่ต้องมีขั้นตอนคอมไพล์ใดๆ ก่อนเลย
-ด้วยเรื่องนี้ทำให้จาวาสคริปต์แตกต่างไปจากภาษาที่ชื่อคล้ายกันอย่าง [จาวา](https://th.wikipedia.org/wiki/ภาษาจาวา) (Java)
+ในแง่นี้ JavaScript แตกต่างจากภาษา [Java](https://en.wikipedia.org/wiki/Java_(programming_language)) อย่างชัดเจน
-```smart header="Why JavaScript?"
-ในตอนแรกจาวาสคริปต์มีชื่อว่า "LiveScript" แต่ด้วยความที่ภาษาจาวาดังมากในตอนนั้น ผู้สร้างเลยตัดสินใจเปลี่ยนชื่อภาษานี้เป็นจาวาสคริปต์ เพื่อหวังผลว่าชื่อของจาวาจะให้ส่งเสริมให้นักพัฒนาคนอื่นๆหันมาใช้ภาษาใหม่นี้ ในฐานะน้องเล็กของภาษาจาวา
+```smart header="ทำไมถึงมีชื่อว่า JavaScript?"
+ในยุคแรก JavaScript มีชื่อว่า "LiveScript" แต่เนื่องจาก Java กำลังได้รับความนิยมอย่างสูงในขณะนั้น จึงมีการตัดสินใจนำเสนอภาษาใหม่นี้ในฐานะ "น้องชาย" ของ Java เพื่อให้เป็นที่สนใจมากขึ้น
-จาวาสคริปต์ก็วิวัฒนาการในทางของตัวเอง ก็เติบใหญ่จนพร้อมเป็นอิสระเสียแล้ว มีผู้พัฒนาฟีเจอร์และสเปคของภาษาเรียกกันว่า "[ECMAScript](https://th.wikipedia.org/wiki/อีซีเอ็มเอสคริปต์) (เอ็กม่าสคริปต์ ชื่อไม่เป็นทางการ)"
+แต่เมื่อค่อยๆ พัฒนาต่อมา JavaScript ก็กลายเป็นภาษาที่มีเอกลักษณ์เฉพาะตัวอย่างสมบูรณ์ มีมาตรฐานของตัวเองที่เรียกว่า [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript) และปัจจุบันไม่มีความเกี่ยวข้องใดๆ กับ Java อีกต่อไป
```
-ในทุกวันนี้จาวาสคริปต์ไม่จำเป็นต้องใช้เว็บเบราเซอร์ในการทำงานอีกแล้ว เพราะจาวาสคริปต์สามารถทำงานได้บนเซิฟเวอร์หรืออุปกรณ์อะไรก็ได้ ที่ติดตั้งโปรแกรมพิเศษที่ชื่อ [JavaScript engine (จาวาสคริปต์เอนจิน)](https://en.wikipedia.org/wiki/JavaScript_engine).
+ทุกวันนี้ JavaScript ไม่ได้จำกัดอยู่แค่ในเบราว์เซอร์อีกต่อไป แต่รันได้บนเซิร์ฟเวอร์หรืออุปกรณ์ใดก็ตามที่มีโปรแกรมพิเศษที่เรียกว่า [JavaScript engine](https://en.wikipedia.org/wiki/JavaScript_engine)
-เว็บบราวเซอร์จะฝังตัวจาวาสคริปต์เอนจินไว้อยู่แล้ว ซึ่งก็มีชื่อเฉพาะว่า "JavaScript virtual machine (จาวาสคริปต์เวอชวลมะชีน)"
+เบราว์เซอร์แต่ละตัวมี engine ของตัวเองฝังอยู่ในตัว บางครั้งเรียกว่า "JavaScript virtual machine"
-เอนจินต่างกัน ก็ใช้ชื่อ (codename) ต่างกันไปอีกอย่างเช่น
+Engine แต่ละตัวมีชื่อเรียก (codename) ที่แตกต่างกัน เช่น:
-- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- ใน Chrome และ Opera.
-- [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- ใน Firefox.
-- นอกจากนี้ยังมีชื่ออื่นๆอย่าง Trident (ไทร'เดินทฺ) และ Chakra (จักระ) ใน IE, ChakraCore (จักระคอร์) ใน Microsoft Edge, Nitro (ไนโตร) และ SquirrelFish (สเควอ'เริลฟิช) ใน Safari
+- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- ใน Chrome, Opera และ Edge
+- [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- ใน Firefox
+- ...มีชื่อเรียกอื่นๆ อีก เช่น "Chakra" ใน IE, "JavaScriptCore", "Nitro" และ "SquirrelFish" ใน Safari เป็นต้น
-การจดจำชื่อด้านบนจะมีประโยชน์ โดยเฉพาะเวลาอ่านบทความที่พัฒนาเขียนขึ้น ตัวอย่างเช่น "ฟีเจอร์บางอย่างได้รับการสนับสนุนใน V8 แล้ว" นั่นหมายถึงฟีเจอร์บางอย่างใช้ได้เฉพาะบน Chrome กับ Opera แล้ว
+จำชื่อเหล่านี้ไว้จะเป็นประโยชน์ เพราะมักปรากฏในบทความสำหรับนักพัฒนาอยู่เสมอ เราก็จะใช้ชื่อเหล่านี้เช่นกัน ตัวอย่างเช่น ถ้าได้ยินว่า "ฟีเจอร์ X รองรับโดย V8" ก็หมายความว่าน่าจะทำงานได้ใน Chrome, Opera และ Edge
-```smart header="แล้วเอนจินทำงานยังไง?"
+```smart header="engine ทำงานอย่างไร?"
-เอนจินเป็นเรื่องซับซ้อน หากแต่หลักการนั้นเป็นเรื่องง่าย
+Engine มีกระบวนการทำงานที่ค่อนข้างซับซ้อน แต่หลักการพื้นฐานไม่ยากเลย
-1. เอนจินอ่านสคริปต์
-2. เอนจินแปล (บ้างเรียกคอมไพล์) ภาษาสคริปต์เป็นภาษาเครื่อง
-3. เครื่องอ่านภาษาเครื่องและทำงานตามนั้น ในเวลาเพียงเสี้ยววินาที
+1. Engine (ที่ฝังมากับเบราว์เซอร์) อ่าน ("parse") สคริปต์
+2. แล้วแปลง ("compile") สคริปต์ให้เป็นภาษาเครื่อง
+3. จากนั้นก็รันโค้ดภาษาเครื่องได้อย่างรวดเร็ว
-ตัวเอนจินเริ่ม optimizations ในแต่ละขั้นตอน โดยการ เอนจินยังคอยตรวจสอบสคริปต์ขณะคอมไพล์ว่าสามารถทำงานได้ไหม วิเคราห์ flow ของข้อมูล กระทั่งทำการเพิ่มประสิทธิภาพของภาษาเครื่องอีกด้วย
+Engine จะใช้เทคนิคการปรับแต่งในทุกขั้นตอน โดยติดตามข้อมูลของสคริปต์ที่ผ่านการคอมไพล์แล้ว วิเคราะห์การไหลของข้อมูล และนำข้อมูลที่ได้มาปรับแต่งรหัสภาษาเครื่องให้ดีขึ้นไปอีก
```
-## แล้วจาวาสคริปต์บนบราวเซอร์สามารถทำอะไรได้บ้าง
+## JavaScript ในเบราว์เซอร์ทำอะไรได้บ้าง?
-จาวาสคริปต์เป็นภาษาโปรแกรมมิ่งที่ "ปลอดภัย" เพราะว่าจาวาสคริปต์ไม่สามารถเข้าถึงหน่วยความจำ ควบคุมซีพียูได้ เพราะว่าจาวาสคริปต์ทำงานอยู่บนเว็บบราวเซอร์ ที่ไม่ได้ต้องการความสามารถดังกล่าวอยู่แล้ว
+JavaScript สมัยใหม่เป็นภาษาโปรแกรมที่ "ปลอดภัย" ไม่สามารถเข้าถึงระดับล่างของหน่วยความจำหรือซีพียูได้โดยตรง เพราะออกแบบมาสำหรับเบราว์เซอร์ที่ไม่จำเป็นต้องใช้ฟีเจอร์เหล่านั้น
-ความสามารถของจาวาสคริปต์จึงขึ้นอยู่กับ environment (เอนไว'เรินเมินทฺ) ที่จาวาสคริปต์ทำงานด้วย อย่างเช่น [Node.js](https://wikipedia.org/wiki/Node.js) ที่อนุญาตให้จาวาสคริปต์สามารถอ่านหรือเขียนไฟล์ได้, ส่ง request หา endpoint อื่นๆ, และความสามารถอื่นๆอีกมากมาย
+ความสามารถของ JavaScript ขึ้นอยู่กับสภาพแวดล้อมที่ใช้งานเป็นอย่างมาก ตัวอย่างเช่น [Node.js](https://wikipedia.org/wiki/Node.js) เสริมความสามารถให้ JavaScript อ่านหรือเขียนไฟล์ใดๆ ก็ได้ ส่งคำขอผ่านเน็ตเวิร์ค และอื่นๆ อีกมาก
-บนเบราเซอร์จาวาสคริปต์ก็สามารถทำทุกอย่างที่เกี่ยวข้องกับ การจัดการเว็บไซต์ การโต้ตอบผู้ใช้งาน รวมไปถึง เป็นเว็ปเซิฟเวอร์
+ส่วน JavaScript ในเบราว์เซอร์นั้น ทำได้ทุกอย่างที่เกี่ยวกับการจัดการเว็บเพจ การโต้ตอบกับผู้ใช้ และเว็บเซิร์ฟเวอร์
-ตัวอย่างเช่น
+ตัวอย่างเช่น JavaScript ในเบราว์เซอร์สามารถ:
-- เพิ่มหรือจัดการกับ HTML, เพิ่ม แก้ไข หรือ ลบ เนื้อหาบนเว็บไซต์, เปลี่ยนรูปลักษณ์ของเว็บไซต์
-- ตอบโต้การกระทำจากผู้ใช้ ทำงานเมื่อคลิกเมาส์ จับการเคลื่อนไหวของเมาส์ หรือ การกดบนแป้นพิมพ์
-- ส่ง request ผ่านเครือข่ายไปยังเซิฟเวอร์, ดาวน์โหลด และอัพโหลดไฟล์ หรือที่เรียกว่า [AJAX](https://th.wikipedia.org/wiki/เอแจ็กซ์) (เอแจ็กซ์) และ [COMET](https://en.wikipedia.org/wiki/Comet_(programming)) (คัม'มิท)
-- รับ และ ตั้งค่าคุกกี้ (cookies) ถามคำถามผู้ใช้งาน หรือ แสดงข้อความ
-- จำจดข้อมูลในฝั่งไคลเอ็นต์ (client-side) หรือที่เรียกว่าที่เก็บข้อมูลในตัวเครื่อง (local storage)
+- เพิ่ม HTML ใหม่ลงในหน้าเว็บ เปลี่ยนแปลงเนื้อหาที่มีอยู่ แก้ไขรูปแบบ (style) ของหน้าเว็บ
+- ตอบสนองต่อการกระทำของผู้ใช้ เช่นการคลิกเมาส์ การเลื่อนเคอร์เซอร์ และการกดปุ่ม
+- ส่งคำขอไปยังเซิร์ฟเวอร์ผ่านเครือข่าย ดาวน์โหลดและอัปโหลดไฟล์ (เรียกกันว่า [AJAX](https://en.wikipedia.org/wiki/Ajax_(programming)) และ [COMET](https://en.wikipedia.org/wiki/Comet_(programming)))
+- รับและตั้งค่าคุกกี้ ถามคำถามผู้ใช้ แสดงข้อความ
+- จำข้อมูลฝั่งไคลเอนต์ ("local storage")
-## แล้วจาวาสคริปต์บนเบราเซอร์ทำอะไรไม่ได้บ้าง
+## JavaScript ในเบราว์เซอร์ทำอะไรไม่ได้บ้าง?
-ความสามารถของจาวาสตริป์บนเบราเซอร์ก็มีจำกัดเช่นกัน เพื่อความปลอดภัยของผู้ใช้ โดยมีจุดประสงค์ไม่ให้เว็บไม่ดีบางเว็บเข้าถึงข้อมูลส่วนตัว หรือทำการใดๆต่อข้อมูลของผู้ใช้งาน
+JavaScript ในเบราว์เซอร์มีข้อจำกัดด้านความสามารถ เพื่อปกป้องความปลอดภัยของผู้ใช้ เป้าหมายคือป้องกันไม่ให้หน้าเว็บอันตรายเข้าถึงข้อมูลส่วนตัวหรือทำให้ข้อมูลเสียหาย
-ตัวอย่างเช่น
+ตัวอย่างของข้อจำกัดเหล่านั้น ได้แก่:
-- จาวาสคริปต์บนเบราเซอร์ไม่สามารถอ่านหรือเขียนไฟล์ใดๆบนฮาร์ดดิสก์ คัดลอกหรือสั่งโปรแกรมอื่นๆทำงาน ไม่สามารถเข้าถึงฟังก์ชั่นของระบบปฎิบัติการ (OS) ได้
+- JavaScript ในหน้าเว็บไม่สามารถอ่าน/เขียน/คัดลอกไฟล์ในฮาร์ดดิสก์ หรือเรียกโปรแกรมอื่นๆ ได้โดยตรง ไม่มีสิทธิ์เข้าถึงฟังก์ชันระบบของระบบปฏิบัติการโดยตรง
- เบราเซอร์ในทุกวันนี้อนุญาตให้ทำงานกับไฟล์ได้ แต่ก็มีข้อจำกัดไว้ โดยทำได้เพียงแค่บางอย่างเท่านั้น เช่น วางไฟล์จากเครื่องบนหน้าต่างเบราเซอร์
+ เบราว์เซอร์รุ่นใหม่อนุญาตให้ทำงานกับไฟล์ได้บ้าง แต่การเข้าถึงมีขอบเขตจำกัดอย่างเข้มงวดและต้องได้รับความยินยอมจากผู้ใช้ก่อน เช่น การ "ลาก" ไฟล์มาวางในหน้าเว็บ หรือเลือกผ่านแท็ก ``
- นอกจากนี้ยังอนุญาตให้เข้าถึงกล้อง ไมโครโฟน และอุปกรณ์อื่นๆ แต่ต้องได้รับอนุญาตจากผู้ใช้งานก่อน
-- หน้าต่างและแท็บต่างกันก็ไม่รู้ตัวตนของอีกฝ่าย แต่จะรู้เมื่อจาวาสคริปต์สั่งเบราเซอร์เปิดอีกแท็บหรือหน้าต่างหนึ่งมา แต่ในกรณีนี้ จาวาสคริปต์หน้าหนึ่ง จะไม่สามารถเข้าถึงอะไรก็ตามของอีกหน้าหนึ่งได้ เมื่อมาจากต่างเว็บไซต์ ต่างพอร์ต (port) ต่างโดเมน ต่างโปรโตคอล และอื่นๆ
+ มีวิธีโต้ตอบกับกล้อง ไมโครโฟน และอุปกรณ์อื่นๆ ได้ แต่ต้องขออนุญาตผู้ใช้อย่างชัดเจนทุกครั้ง ดังนั้นหน้าเว็บจึงไม่มีทางแอบเปิดเว็บแคมดูโดยที่ผู้ใช้ไม่รู้ตัวแล้วส่งข้อมูลไปยัง [NSA](https://en.wikipedia.org/wiki/National_Security_Agency) ได้
+- แท็บ/วินโดว์ต่างๆ โดยปกติแล้วไม่รู้จักกัน แม้บางครั้งอาจทำได้ เช่นเมื่อหน้าต่างหนึ่งใช้ JavaScript เปิดหน้าต่างอื่นขึ้นมา แต่แม้ในกรณีนี้ JavaScript จากหน้าหนึ่งก็ยังไม่สามารถเข้าถึงอีกหน้าได้ หาก URL นั้นมาจากโดเมน โปรโตคอล หรือพอร์ตที่ต่างกัน นโยบายนี้เรียกว่า "Same Origin Policy"
- ในที่นี้เรียกกันว่า "Same Origin Policy" ดังนั้นใน*ทั้งสองหน้า*จะต้องยอมรับการแลกเปลี่ยนข้อมูลระหว่างกัน จาวาสคริปต์จึงมีฟีเจอร์มาเพื่อจัดการกับปัญหาข้างต้น จะมีพูดถึงเรื่องนี้กันอีกทีในภายหลังด้วย
-้
- ความปลอดภัยของผู้ใช้จึงมาพร้อมกับข้อจำกัด ดังนั้นเว็บไซต์ A จะไม่สามารถขโมยข้อมูล gmail.com ที่เปิดอีกแท็บหนึ่งได้
-- จาวาสคริปต์สติดต่อเซิฟเวอร์ผ่านเน็ตได้สบายหากเป็นแหล่งที่มาเดียวกัน แต่ก็มีข้อจำกัด เมื่อต้องรับส่งข้อมูลระหว่างเว็บไซต์หรือโดเมนที่ต่างกัน แม้ว่าจะมีทาง แต่ก็ต้องมีข้อตกลงระหว่างทั้งสอง อย่างเช่น HTTP headers ทั้งนี้เหตุผลก็มาจากความปลอดภัยของผู้ใช้งานอีกเช่นกัน
+ การจะแลกเปลี่ยนข้อมูลระหว่างหน้าเว็บได้นั้น *ทั้งสองฝ่ายต้องตกลงยินยอม* และต้องมีโค้ด JavaScript พิเศษเพื่อจัดการ ซึ่งเราจะพูดถึงในบทเรียนข้างหน้า
+
+ ข้อจำกัดนี้ก็เพื่อความปลอดภัยของผู้ใช้เช่นกัน ลองนึกดูว่าจะเป็นอย่างไรถ้าหน้า `http://anysite.com` ที่เปิดอยู่ในแท็บหนึ่งแอบเข้าถึง `http://gmail.com` ในอีกแท็บแล้วขโมยข้อมูลออกไป
+- JavaScript ติดต่อกับเซิร์ฟเวอร์ต้นทางของหน้านั้นได้สะดวก แต่การรับข้อมูลจากโดเมนหรือไซต์อื่นมีข้อจำกัดเข้มงวด จะทำได้ก็ต่อเมื่อได้รับความยินยอมชัดเจนจากเซิร์ฟเวอร์ปลายทาง (ผ่าน HTTP header) ซึ่งก็เป็นมาตรการด้านความปลอดภัยอีกเช่นกัน
-ข้อจำกัดดังกล่าวมีเฉพาะบนเว็บเบราเซอร์เท่านั้น นอกจากนี้เบราเซอร์ทุกวันนี้ก็ยังอนุญาตให้ใช้ปลั๊กอิน บ้างเรียกส่วนขยาย (extensions) ซึ่งอาจขอสิทธิ์อนุญาตจากเบราเซอร์เพิ่มเติมได้
+ข้อจำกัดเหล่านี้จะหมดไปทันทีหาก JavaScript ทำงานนอกเบราว์เซอร์ เช่นบนเซิร์ฟเวอร์ นอกจากนี้ เบราว์เซอร์สมัยใหม่ยังอนุญาตให้ปลั๊กอิน/ส่วนขยายขอสิทธิ์เพิ่มเติมได้
-## สิ่งที่ทำให้จาวาสคริปต์ไม่เหมือนใคร
+## อะไรทำให้ JavaScript โดดเด่น?
-มีสามอย่างใหญ่ๆที่ทำให้จาวาสคริปต์ไม่เหมือนใคร
+JavaScript มีอย่างน้อย *3 จุดเด่น* ที่ทำให้มันแตกต่าง:
```compare
-+ ทำงานกับ HTML/CSS ได้อย่างสมบูรณ์
-+ เรื่องเล็กๆเสร็จง่าย
-+ เบราเซอร์ใหญ่ๆ ดังๆ สนับสนุน
++ ผสานเข้ากับ HTML/CSS ได้อย่างลงตัว
++ ทำสิ่งง่ายๆ ได้อย่างง่ายดาย
++ รองรับโดยเบราว์เซอร์หลักทั้งหมด และเปิดใช้งานเป็นค่าเริ่มต้น
```
-จาวาสคริปต์เป็นเทคโนโลยีเบราเซอร์ที่รวมสามสิ่งนี้
-ทำให้จาวาสคริปต์มีความไม่เหมือนใคร จึงเป็นเหตุผลที่เทคโนโลยีนี้ถูกใช้แพร่หลายที่สุด ในการสร้างส่วนต่อผสานกับเบราเซอร์
+JavaScript เป็นเทคโนโลยีเบราว์เซอร์เพียงอย่างเดียวที่รวม 3 จุดเด่นนี้เข้าด้วยกัน
-สร้างเซิฟเวอร์ หรือแอพฯบนมือถือและอื่นๆ
+นั่นคือสิ่งที่ทำให้ JavaScript โดดเด่น และนั่นคือเหตุผลที่ JavaScript กลายเป็นเครื่องมือที่แพร่หลายที่สุดสำหรับสร้างส่วนติดต่อผู้ใช้บนเบราว์เซอร์
-## ภาษาที่ "นอกเหนือจาก" จาวาสคริปต์
+อย่างไรก็ตาม ปัจจุบัน JavaScript ยังใช้สร้างเซิร์ฟเวอร์ แอปมือถือ และอื่นๆ ได้อีกด้วย
-syntax ของจาวาสคริปต์ไม่ได้ตอบโจทย์ความต้องการได้ทุกคน ต่างคนก็ต่างต้องการฟีเจอร์ในแบบของตัวเอง
+## ภาษาที่ "transpile" เป็น JavaScript
-โจทย์จึงแตกต่างกันไปตาม project และ requirement ของแต่ละคน
+ไวยากรณ์ของ JavaScript อาจไม่ตอบโจทย์ความต้องการของทุกคน แต่ละคนอยากได้ฟีเจอร์ที่ต่างกัน เรื่องนี้เป็นเรื่องปกติ เพราะแต่ละโปรเจกต์และแต่ละคนมีบริบทที่ไม่เหมือนกัน
-เพียงไม่กี่ปีมานี้ ภาษาใหม่ๆจึงถือกำเนิดขึ้นจำนวนมาก ซึ่งจะแปลงเป็นจาวาสคริปต์ก่อน จะทำงานบนเบราเซอร์
+ดังนั้น ในช่วงไม่กี่ปีมานี้จึงมีภาษาโปรแกรมใหม่ๆ เกิดขึ้นมากมาย โดยภาษาเหล่านี้จะถูก *transpile* (แปลง) เป็น JavaScript ก่อนรันในเบราว์เซอร์
-เครื่องมือในทุกวันนี้ช่วยให้การแปลเป็นอีกภาษานั้นรวดเร็วขึ้นมาก จริงๆแล้วนักพัฒนาสามารถโค้ดเป็นอีกภาษาหนึ่ง แล้วแปลเป็นอีกภาษาหนึ่งได้โดยอัตโนมัติ โดยที่ไม่ต้องทำอะไรเพิ่มเติมเลย
+เครื่องมือสมัยใหม่ทำให้ขั้นตอน transpile รวดเร็วและโปร่งใส นักพัฒนาสามารถเขียนโค้ดด้วยภาษาอื่นแล้วให้แปลงเป็น JavaScript เบื้องหลังโดยอัตโนมัติ
-ตัวอย่างภาษาเหล่านั้นได้แก่:
+ตัวอย่างของภาษาเหล่านั้น ได้แก่:
-- [CoffeeScript](http://coffeescript.org/) เป็นภาษาที่ดีไซน์์เพื่อให้อ่านง่าย เป็นที่นิยมในหมู่นักพัฒนาภาษารูบี้ (Ruby)
-- [TypeScript](http://www.typescriptlang.org/) เป็นภาษาที่เพิ่มความเข้มงวดเรื่องชนิดข้อมูล (data typing) เพื่อลดความยุ่งยากในการพัฒนา และสนับสนุนระบบที่ซับซ้อน พัฒนาโดยไมโครซอฟท์ (Microsoft)
-- [Flow](http://flow.org/) เป็นภาษาเพิ่มความเข้มงวดเรื่องชนิดข้อมูล พัฒนาโดยเฟสบุ๊ค (Facebook)
-- [Dart](https://www.dartlang.org/) เป็นภาษาสแตนด์อโลน (standalone) ที่มีเอนจินของตัวเอง ทำงานบน environment ที่ไม่ใช่เบราเซอร์ (อย่างเช่น มือถือ) แต่สามารถแปลงสู่จาวาสคริปต์ได้ พัฒนาโดยกูเกิ้ล (Google)
-- [Brython](https://brython.info/) เป็นตัวแปลภาษาจากไพธอน (Python) เป็นจาวาสคริปต์ ทำให้เขียนเว็บแอพฯจากภาษาไพธอนล้วนๆได้
+- [CoffeeScript](https://coffeescript.org/) เป็น "syntactic sugar" สำหรับ JavaScript โดยนำเสนอไวยากรณ์ที่กระชับกว่า ช่วยให้เราเขียนโค้ดได้ชัดเจนและถูกต้องมากขึ้น เป็นที่นิยมในหมู่นักพัฒนา Ruby
+- [TypeScript](https://www.typescriptlang.org/) เน้นการเพิ่ม "strict data typing" เพื่อให้การพัฒนาและดูแลระบบที่ซับซ้อนง่ายขึ้น พัฒนาโดย Microsoft
+- [Flow](https://flow.org/) ก็เพิ่ม data typing เช่นกัน แต่ในรูปแบบที่แตกต่างออกไป พัฒนาโดย Facebook
+- [Dart](https://www.dartlang.org/) เป็นภาษาแยกต่างหากที่มี engine เป็นของตัวเอง สามารถทำงานในสภาพแวดล้อมที่ไม่ใช่เบราว์เซอร์ได้ (เช่น แอปมือถือ) และยังสามารถ transpile เป็น JavaScript ได้ พัฒนาโดย Google
+- [Brython](https://brython.info/) เป็น transpiler ที่แปลง Python เป็น JavaScript ทำให้สามารถเขียนแอปด้วย Python บริสุทธิ์ได้โดยไม่ต้องใช้ JavaScript
+- [Kotlin](https://kotlinlang.org/docs/reference/js-overview.html) เป็นภาษาโปรแกรมสมัยใหม่ที่กระชับและปลอดภัย สามารถกำหนดเป้าหมายไปที่เบราว์เซอร์หรือ Node ได้
-ยังมีภาษาอื่นๆที่ไม่ได้อยู่ในตัวอย่างนี้อีก แต่แน่นอนว่าหลายๆคนไม่ค่อยได้เขียนจาวาสคริปต์ตรงๆอีกแล้ว แต่เขียนเป็นภาษาที่แปลเป็นจาวาสคริปต์อีกทีแทน แต่รู้จักกับจาวาสคริปต์จะช่วยให้เราเข้าใจภาษาที่เราเขียนอยู่ได้ดียิ่งขึ้น
+ยังมีภาษาอื่นๆ อีกมากมาย แม้จะใช้ภาษาเหล่านี้ก็ตาม แต่การเรียนรู้ JavaScript โดยตรงก็ยังจำเป็น เพื่อให้เข้าใจอย่างถ่องแท้ว่ากำลังทำอะไรอยู่
## สรุป
-- จาวาสคริปต์ตอนแรกถูกสร้างมาให้ทำงานเฉพาะเบราเซอร์ แต่ก็ยังสามารถทำงานนอกเบราเซอร์ได้เช่นกัน
-- ทุกวันนี้จาวาสคริปต์ไม่เหมือนก่อนอีกแล้ว ภาษานี้ถูกใช้อย่างแพร่หลายมาก แถมทำงานกับ HTML/CSS ได้อย่างสมบูรณ์
-- มีภาษาที่ถูกแปลเป็นจาวาสคริปต์อีกที โดยภาษาเหล่านี้ก็จะมีฟีเจอร์ต่างกัน หากเริ่มมั่นใจในจาวาสคริปต์แล้ว ขอแนะนำให้ลองสัมผัสพวกนี้สักหน่อย
+- JavaScript เกิดมาเพื่อใช้กับเบราว์เซอร์โดยเฉพาะ แต่ปัจจุบันแพร่หลายไปในสภาพแวดล้อมอื่นๆ อีกมากมาย
+- ปัจจุบัน JavaScript เป็นภาษาเบราว์เซอร์ที่ได้รับการยอมรับกว้างขวางที่สุด ทำงานร่วมกับ HTML/CSS ได้อย่างลงตัว
+- มีหลายภาษาที่ "transpile" เป็น JavaScript และมีฟีเจอร์เสริมบางอย่าง แนะนำให้ลองศึกษาคร่าวๆ หลังจากเชี่ยวชาญ JavaScript แล้ว
diff --git a/1-js/01-getting-started/1-intro/limitations.svg b/1-js/01-getting-started/1-intro/limitations.svg
index a7863c63c..76ea43fd7 100644
--- a/1-js/01-getting-started/1-intro/limitations.svg
+++ b/1-js/01-getting-started/1-intro/limitations.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/01-getting-started/2-manuals-specifications/article.md b/1-js/01-getting-started/2-manuals-specifications/article.md
index f37ca5fe0..14fb29b66 100644
--- a/1-js/01-getting-started/2-manuals-specifications/article.md
+++ b/1-js/01-getting-started/2-manuals-specifications/article.md
@@ -1,39 +1,37 @@
+# คู่มือและข้อกำหนด
-# คู่มือและข้อมูลเชิงลึก
-
-คู่มือเล่มนี้เป็น *คู่มือการสอน* โดยมีจุดมุ่งหมายเพื่อให้ผู้เรียนค่อยๆคุ้นเคยกับภาษาก่อน
+หนังสือเล่มนี้เป็น *บทเรียน* ที่มุ่งหวังให้ค่อยๆ เรียนรู้ภาษา JavaScript อย่างเป็นขั้นเป็นตอน แต่เมื่อคุ้นเคยกับพื้นฐานแล้ว ก็อาจต้องการแหล่งข้อมูลอ้างอิงเพิ่มเติม ได้แก่
## ข้อกำหนด
-ข้อกำหนด ECMA-262 (The ECMA-262 specification)** ประกอบด้วยข้อมูลเชิงลึก มีรายละเอียด และมีความเป็นทางการสูง ทั้งยังเป็นมาตรฐานของจาวาสคริปต์
+[ข้อกำหนด ECMA-262](https://www.ecma-international.org/publications/standards/Ecma-262.htm) เป็นเอกสารที่มีรายละเอียดเชิงลึก ครบถ้วน และเป็นทางการที่สุดเกี่ยวกับ JavaScript เป็นตัวกำหนดมาตรฐานของภาษานี้
-แต่ด้วยทั้งข้อมูลและรายละเอียดในเชิงลึก ข้อกำหนดนี้เลยทำความเข้าใจยากมาก ดังนั้นหากต้องการข้อมูลที่น่าเชื่อถือ และอัดแน่นไปด้วยข้อมูลของภาษา ก็อยากดังกล่าวให้อ่านกำหนดนี้
+แต่เนื่องจากมีลักษณะเป็นทางการมาก จึงอาจทำความเข้าใจได้ยากในช่วงแรก ดังนั้น หากต้องการแหล่งอ้างอิงที่ถูกต้องที่สุดเกี่ยวกับรายละเอียดต่างๆ ของภาษา ข้อกำหนดนี้คือคำตอบ แต่ไม่เหมาะสำหรับการใช้งานในชีวิตประจำวัน
-รายการสเปคของเวอร์ชั่นในจาวาสคริปต์จะออกใหม่ทุกๆปี ในระหว่างจะทำการออกเวอร์ชั่นใหม่ ผู้ออกจะออกหนังสือร่างรายการสเปคเอาไว้ สามาถอ่านได้ที่ลิงค์นี้
+ข้อกำหนดเวอร์ชันใหม่จะออกมาทุกปี ระหว่างนั้น สามารถดูร่างข้อกำหนดล่าสุดได้ที่
-หากต้องการอ่านข้อมูลฟีเจอร์ที่กำลังพัฒนา และฟีเจอร์ที่กำลังจะออกมาเป็นมาตรฐาน โปรดเข้าไปที่ลิงค์นี้ .
+สำหรับฟีเจอร์ใหม่ล่าสุด รวมถึงฟีเจอร์ที่ "ใกล้จะเป็นมาตรฐาน" (หรือที่เรียกว่า "stage 3") สามารถดูได้ที่
-หรือต้องการพัฒนาเว็บแอพฯบนเบราเซอร์ ก็จะมีอีกข้อกำหนดหนึ่ง จะพูดถึงอีกทีใน[ส่วนที่สอง](info:browser-environment)
+นอกจากนี้ ถ้ากำลังพัฒนาเว็บสำหรับเบราว์เซอร์ ยังมีข้อกำหนดเพิ่มเติมที่กล่าวถึงใน[ส่วนที่สอง](info:browser-environment) ของบทเรียนนี้ด้วย
-## คู่มือ
+## คู่มืออ้างอิง
-- **MDN (Mozilla) คู่มืออ้างอิงสำหรับจาวาสคริปต์** คู่มือพร้อมตัวอย่าง เป็นคู่มือที่ให้รายละเอียดเชิงลึกดีมาก ยิ่งถ้ารายเป็นฟังก์ชั่นหรือเมธอด (Method)
+- **MDN (Mozilla) JavaScript Reference** เป็นคู่มือหลักที่มีตัวอย่างและข้อมูลเชิงลึกอีกมากมาย เหมาะสำหรับค้นหารายละเอียดเกี่ยวกับฟังก์ชัน เมธอด และอื่นๆ
- เข้าชมที่ลิงต์นี้ .
+ เข้าถึงได้ที่
- ค้นหาจากอินเตอร์เน็ตโดยพิมพ์ "MDN [ตามด้วยฟังก์ชั่นหรือเมธอดที่อยากรู้]" เช่น อยากรู้จักฟังชั่นก์ parseInt
+ อย่างไรก็ตาม บ่อยครั้งการค้นหาผ่าน Google จะสะดวกกว่า เพียงพิมพ์ "MDN [คำที่ต้องการ]" เช่น เพื่อหาข้อมูลเกี่ยวกับฟังก์ชัน `parseInt`
-- **MSDN** -คู่มือของไมโครซอฟท์ก็เป็นอีกทางเลือกหนึ่งที่ดี รวมไปถึงจาวาสคริปต์ (พูดถึงในชื่อ JScript) แต่หากต้องทำงานหรืออยากรู้อะไรบางอย่างเกี่ยวกับ IE มาที่ลิงค์นี้จะดีกว่า
+## ตารางความเข้ากันได้
- ค้นหาจากอินเตอร์เน็ตโดยพิมพ์ "[ตามด้วยฟังก์ชั่นหรือเมธอดที่อยากรู้] MSDN" หรือ "[ตามด้วยฟังก์ชั่นหรือเมธอดที่อยากรู้] MSDN jscript" ก็ได้
+JavaScript เป็นภาษาที่พัฒนาอยู่ตลอดเวลา มีฟีเจอร์ใหม่ๆ เพิ่มเข้ามาอยู่เสมอ
-## ตารางเช็คว่าเอนจินแต่ละตัวสนับสนุนฟีเจอร์ใดบ้าง
+หากต้องการตรวจสอบว่าฟีเจอร์ต่างๆ รองรับโดยเบราว์เซอร์และเอ็นจิ้นอื่นๆ มากน้อยเพียงใด สามารถดูได้จาก:
-จึงเป็นเรื่องที่ควรรู้ว่าเบราเซอร์หรือเอนจินที่ทำงานด้วยนั้น สนับสนุนฟีเจอร์นี้ด้วยหรือไม่ โปรดดูตามลิสต์ด้านล่าง
+- - ตารางการรองรับฟีเจอร์แยกตามหมวดหมู่ เช่น หากต้องการดูว่าเอ็นจิ้นใดบ้างรองรับฟังก์ชันการเข้ารหัสลับสมัยใหม่ ค้นหาได้ที่
-- - เว็บไซต์ที่ใช้ตรวจว่าฟีเจอร์นั้นๆ เบราเซอร์สนับสนุนหรือไม่ เช่น อยากจะรู้ว่าเบราเซอร์ไหนที่สนับสนุนฟีเจอร์เกี่ยวกับการถอดรหัส (cryptography) บ้าง .
-- - ตารางสำหรับดูชุดฟีเจอร์ใหม่ๆ ได้รับการสนับสนุนจากเอนจินใดบ้างแล้ว
+- - ตารางแสดงฟีเจอร์ต่างๆ ของภาษา พร้อมระบุว่าเอ็นจิ้นใดรองรับหรือไม่รองรับบ้าง
-แหล่งข้อมูลที่กล่าวมาล้วนมีรายละเอียด และข้อมูลที่มีประโยชน์ที่ใช้ในการพัฒนาจริงๆ
+แหล่งข้อมูลเหล่านี้มีประโยชน์มากในการพัฒนาจริง เพราะครอบคลุมรายละเอียดของภาษา ความเข้ากันได้ และข้อมูลสำคัญอื่นๆ
-หากต้องการข้อมูลเชิงลึกต่างๆ โปรดบุ๊กมาร์คหน้าหน้านี้ โดยเราจะรออัพเดทให้ทันสมัยอยู่เสมอ
+จดจำแหล่งอ้างอิงเหล่านี้ไว้ (หรือบุ๊กมาร์กหน้านี้) สำหรับตอนที่ต้องการข้อมูลเชิงลึกเกี่ยวกับฟีเจอร์ใดๆ ของภาษา
diff --git a/1-js/01-getting-started/3-code-editors/article.md b/1-js/01-getting-started/3-code-editors/article.md
index e58806b8b..d38e11799 100644
--- a/1-js/01-getting-started/3-code-editors/article.md
+++ b/1-js/01-getting-started/3-code-editors/article.md
@@ -1,45 +1,49 @@
-# Code editors
+# ตัวแก้ไขโค้ด
-Code editor เป็นสิ่งที่นักพัฒนามักใช้เวลาร่วมมากที่สุด
+ตัวแก้ไขโค้ด (code editor) คือเครื่องมือที่โปรแกรมเมอร์ใช้เวลาส่วนใหญ่ในการทำงานด้วย
-โดยจะมี 2 ประเภทหลักๆ นักพัฒนาจะใช้หนึ่งในสองอย่างนี้ คือ IDE และ lightweight editor
+ตัวแก้ไขโค้ดมีสองประเภทหลักๆ คือ IDE และตัวแก้ไขแบบเบา (lightweight editor) ซึ่งนักพัฒนาหลายคนมักจะใช้ทั้งสองแบบควบคู่กันไป
## IDE
-คำว่า [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) (Integrated Development Environment) หมายถึงเครื่องมือที่ประกอบด้วยฟีเจอร์มากมายที่ใช้จัดการงานระดับโปรเจ็คต์ IDE จึงไม่ใช่แค่ text editor ธรรมดา แต่เป็น "development environment" เต็มรูปแบบ
+[IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) ย่อมาจาก Integrated Development Environment หมายถึงตัวแก้ไขโค้ดที่ทรงพลัง พร้อมฟีเจอร์ครบครัน และทำงานในระดับ "โปรเจ็กต์ทั้งหมด" ตามชื่อนั่นเอง ไม่ใช่แค่ตัวแก้ไขธรรมดา แต่เป็น "สภาพแวดล้อมการพัฒนา" อย่างครบวงจร
-IDE โหลดโปรเจค (ที่ประกอบด้วยไฟล์จำนวนมาก) ที่มีฟีเจอร์หลักๆคือ navigation ระหว่างไฟล์, autocompletion, บางตัวจะมี version management system อย่างกิต (git) ให้ด้วย, testing environment และฟีเจอร์ที่จัดการกับโปรเจ็คต์โดยเฉพาะ
+IDE จะโหลดโครงการ (ซึ่งอาจประกอบด้วยหลายไฟล์) เข้ามา ช่วยให้เราสามารถสลับไปมาระหว่างไฟล์ต่างๆ ได้ มีระบบเติมโค้ดอัตโนมัติตามบริบทของโปรเจ็กต์ทั้งหมด (ไม่ใช่เฉพาะไฟล์ที่กำลังเปิดอยู่) และเชื่อมต่อกับระบบจัดการเวอร์ชัน เช่น [git](https://git-scm.com/) รวมถึงมีการผนวกรวมกับสภาพแวดล้อมการทดสอบ และอื่นๆ ในระดับของโครงการด้วย
-หากยังไม่มี IDE ในดวงใจ ลองดู IDE ด้านล่างไว้พิจารณา
+ยังไม่เคยใช้ IDE มาก่อน? ลองพิจารณาตัวเลือกเหล่านี้:
-- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, ฟรี).
-- [WebStorm](http://www.jetbrains.com/webstorm/) (cross-platform, เสียตัง).
+- [Visual Studio Code](https://code.visualstudio.com/) (รองรับหลายแพลตฟอร์ม, ฟรี)
+- [WebStorm](https://www.jetbrains.com/webstorm/) (รองรับหลายแพลตฟอร์ม, มีค่าใช้จ่าย)
-สำหรับผู้ใช้ Windows หลายๆคนอาจมีความสับสนกับชื่อระหว่าง Visual Studio Code กับ Visual Studio ตัวหลังเป็น IDE แบบเสียตัง และดีที่สุดของ IDE สำหรับ Windows โดยเฉพาะฝั่งของ .NET และ JavaScript ก็พอใช้ได้ ยังมีเวอร์ชั่นฟรีให้ใช้ด้วย [Visual Studio Community](https://www.visualstudio.com/vs/community/).
+สำหรับ Windows ยังมี "Visual Studio" ด้วย อย่าสับสนกับ "Visual Studio Code" นะ "Visual Studio" เป็น IDE ที่ทรงพลังและเสียค่าใช้จ่าย มีเฉพาะบน Windows เท่านั้น เหมาะสำหรับการพัฒนาบนแพลตฟอร์ม .NET และสามารถใช้งานกับ JavaScript ได้เป็นอย่างดีเช่นกัน โดยมีเวอร์ชันฟรีชื่อ [Visual Studio Community](https://www.visualstudio.com/vs/community/)
-IDE ส่วนมากจะเสียตัง แต่จะมีระยะเวลาทดลองใช้ แต่ค่าใช้จ่ายส่วนนี้มักจะเล็กน้อยเมื่อเทียบกับรายได้ของนักพัฒนาต่างประเทศ เก่งๆ หรือทำงานมาหลายปี ดังนั้นเลือกที่ตัวเองชอบมากที่สุด
+IDE หลายตัวมีค่าใช้จ่าย แต่ก็มีระยะทดลองใช้ฟรี ซึ่งเมื่อเทียบกับเงินเดือนของนักพัฒนาที่ดีแล้ว ค่าใช้จ่ายเหล่านั้นถือว่าน้อยมาก ดังนั้นควรเลือกตัวที่เหมาะสมกับตัวเองที่สุด
-## Lightweight editors
+## ตัวแก้ไขแบบเบา
-"Lightweight editors" ไม่ได้มีฟีเจอร์เทียบเท่า IDE แต่เร็ว สวย และใช้งานง่าย
+ตัวแก้ไขแบบเบา (lightweight editor) อาจจะไม่ทรงพลังเท่า IDE แต่เปิดไวเบาสบาย และใช้งานง่าย
-ส่วนใหญ่มักจะใช้เพื่อเปิดไฟล์แก้ไขได้ทันที
+ส่วนใหญ่แล้วจะใช้เพื่อเปิดและแก้ไขไฟล์ได้อย่างรวดเร็ว
-ความแตกต่างระหว่าง IDE กับ Lightweight editors คือ IDE มักจะทำงานในระดับโปรเจค ที่ต้องอาศัยการประมวล โหลดข้อมูลจำนวนมาก หรือวิเคราะห์โครงสร้างในโปรเจ็คต์ และอื่นๆ ส่วนแบบ lightweight จะตอบโจทย์ด้านความเร็ว หากเราต้องการแก้ไขไฟล์แค่ไฟล์เดียว
+จุดต่างสำคัญคือ IDE ทำงานในระดับโปรเจ็กต์ จึงใช้เวลาโหลดตอนเริ่มต้นมากกว่า ต้องวิเคราะห์โครงสร้างโปรเจ็กต์และอื่นๆ อีกมาก ในขณะที่ตัวแก้ไขแบบเบาเปิดไฟล์ได้เร็วกว่ามาก
-ในทางปฎิบัติ lightweight editors บางตัวอาจมีปลั๊กอินไว้ติดตั้งเพิ่มเติมด้วย เช่น ตัววิเคราะห์ directory-level syntax และ autocompleters ดังนั้นจึงไม่มีเส้นแบ่งระหว่างตัวที่เป็น IDE กับ lightweight ชัดเจนมากนัก
+ในทางปฏิบัติ ตัวแก้ไขแบบเบาก็อาจมีปลั๊กอินต่างๆ เพิ่มเข้ามาได้มากมาย รวมถึงมีตัวช่วยวิเคราะห์ไวยากรณ์และระบบเติมโค้ดอัตโนมัติในระดับไดเรกทอรี ทำให้แยกความแตกต่างระหว่างตัวแก้ไขแบบเบากับ IDE ได้ไม่ชัดเจนนัก
-ก็จะมีตัวเลือกดังต่อไปนี้
+มีตัวเลือกมากมาย เช่น:
-- [Atom](https://atom.io/) (cross-platform, ฟรี).
-- [Sublime Text](http://www.sublimetext.com) (cross-platform, ให้ทดลองใช้).
-- [Notepad++](https://notepad-plus-plus.org/) (Windows, ฟรี).
-- [Vim](http://www.vim.org/) and [Emacs](https://www.gnu.org/software/emacs/) IDEs สำหรับโปรแกรมเมอร์ที่แท้จริง
+- [Sublime Text](https://www.sublimetext.com/) (รองรับหลายแพลตฟอร์ม, shareware)
+- [Notepad++](https://notepad-plus-plus.org/) (Windows, ฟรี)
+- [Vim](https://www.vim.org/) และ [Emacs](https://www.gnu.org/software/emacs/) ก็เจ๋งมากสำหรับคนที่เชี่ยวชาญ
-## อย่าเถียงกันเลย
+## อย่าถกเถียงกันเลย
-รายการ editor ข้างที่แนะนำข้างต้น เป็น editor ที่คนรอบข้างที่เป็นนักพัฒนาและตัวผมเองใช้ (แค่ตัวเดียวนะ) เป็นเวลานาน และมีความสุขที่ได้ใช้
+ตัวแก้ไขโค้ดที่ยกมาข้างต้นเป็นตัวที่ผู้เขียนและเพื่อนๆ นักพัฒนาใช้มานานและพอใจกัน
-มี editor อีกมากมายพร้อมเป็นตัวเลือกสำหรับเรา จงเลือกตัวที่เหมาะกับเรามากที่สุด
+แน่นอนว่ายังมีตัวเลือกอื่นๆ อีกมากมายในโลกกว้าง เลือกตัวที่ถูกใจที่สุดแล้วกัน
-ตัว editor เอง ก็เป็นเหมือนเครื่องมืออื่นๆ ดังนั้นเหตุผลจึงขึ้นอยู่กับโปรเจคที่ทำ นิสัย และความชอบของเรามากกว่า
+การเลือกใช้ตัวแก้ไขโค้ด ก็เหมือนกับการเลือกใช้เครื่องมืออื่นๆ เป็นเรื่องของรสนิยมส่วนบุคคล และขึ้นอยู่กับประเภทของโปรเจ็กต์ นิสัยการทำงาน และความชอบเฉพาะตัวของแต่ละคน
+
+ความเห็นส่วนตัวของผู้เขียน:
+
+- ผมใช้ [Visual Studio Code](https://code.visualstudio.com/) หากพัฒนา frontend (ฝั่งหน้าบ้าน) เป็นหลัก
+- แต่หากใช้ภาษา/แพลตฟอร์มอื่นๆ เป็นส่วนใหญ่ โดยมี frontend แค่บางส่วน ผมจะพิจารณาใช้ตัวอื่น เช่น XCode (Mac), Visual Studio (Windows) หรือ IDE จากค่าย Jetbrains (WebStorm สำหรับ JavaScript, PHPStorm สำหรับ PHP, RubyMine สำหรับ Ruby เป็นต้น) ทั้งนี้ขึ้นอยู่กับภาษาหลักของโปรเจ็กต์
diff --git a/1-js/01-getting-started/4-devtools/article.md b/1-js/01-getting-started/4-devtools/article.md
index fcc37789d..dd1df8089 100644
--- a/1-js/01-getting-started/4-devtools/article.md
+++ b/1-js/01-getting-started/4-devtools/article.md
@@ -1,62 +1,63 @@
-# Developer console
+# คอนโซลนักพัฒนา
-โค้ดที่เขียนมักจะมาพร้อมข้อผิดพลาด และเหล่านักพัฒนามักจะทำเรื่องนี้อยู่เป็นนิจ
+เมื่อเขียนโค้ด มักจะเกิดข้อผิดพลาดได้เสมอ ไม่ว่าจะระมัดระวังแค่ไหน ก็ยังมีโอกาสทำผิดพลาดอยู่ดี... เอ่อ กำลังพูดถึงอะไรอยู่น่ะ? ต้องขอแก้ใหม่ ถ้าเป็นมนุษย์ *ย่อมต้อง* ทำผิดพลาดแน่ๆ ยกเว้นว่าจะเป็น[หุ่นยนต์](https://en.wikipedia.org/wiki/Bender_(Futurama))
-แต่ในเบราเซอร์ ผู้ใช้งานจะไม่เห็นความผิดพลาด ที่เหล่านักพัฒนาทำไว้ ดังนั้นหากสคริปต์ที่เราเขียนมีข้อผิดพลาด เราจะไม่รู้และแก้ไขมันได้เลย
+แต่โดยค่าเริ่มต้น ผู้ใช้จะไม่เห็นข้อผิดพลาดเหล่านั้นบนหน้าเว็บ ดังนั้น หากสคริปต์มีจุดบกพร่อง เราก็จะไม่รู้ว่าพังตรงไหน ทำให้แก้ไขไม่ได้
-เพื่อย้อนไปดูว่าเราพลาดอะไรไป "เครื่องมือสำหรับนักพัฒนา (developer tools)" จึงติดมากับเบราเซอร์ด้วย
+เพื่อให้เห็นข้อผิดพลาดและข้อมูลดีบั๊กที่มีประโยชน์อื่นๆ เกี่ยวกับสคริปต์ เบราว์เซอร์จึงมี "เครื่องมือนักพัฒนา" (developer tools) ติดตั้งมาด้วย
-นักพัฒนาส่วนใหญ่มักจะใช้ Chrome และ Firefox นั่นก็เพราะว่าทั้งสองตัวมี เครื่องมือสำหรับการพัฒนาที่ดีที่สุดในตลาด โดยปกตินักพัฒนามักเลือกใช้เบราเซอร์เพียงตัวเดียวในการพัฒนา แต่จะใช้เบราเซอร์อื่นร่วมด้วย แต่หลังจากที่ปัญหาเกิดแล้ว เช่น โค้ดที่เขียนไม่ซัพพอร์ตใน IE
+นักพัฒนาส่วนใหญ่นิยมใช้ Chrome หรือ Firefox ในการพัฒนา เพราะมีเครื่องมือนักพัฒนาที่ทรงพลังที่สุด แม้ว่าเบราว์เซอร์อื่นๆ ก็มีเครื่องมือที่คล้ายกัน บางทีอาจจะมีฟีเจอร์พิเศษด้วย แต่มักจะตามหลัง Chrome หรือ Firefox เสมอ ดังนั้นนักพัฒนาจึงมักมีเบราว์เซอร์ "โปรด" สำหรับทำงาน และเปลี่ยนไปใช้เบราว์เซอร์อื่นเป็นครั้งคราวเมื่อพบปัญหาเฉพาะของเบราว์เซอร์นั้น
-เครื่องมือเหล่านี้มาพร้อมฟีเจอร์ที่ตอบโจทย์การพัฒนาหลากหลาย เราจะเริ่มไล่ดูกันไปทีละอย่าง
+เครื่องมือนักพัฒนานั้นมีประสิทธิภาพสูงและมีฟีเจอร์มากมาย ในช่วงแรก เราจะเรียนรู้วิธีเปิดใช้งาน ดูข้อผิดพลาด และรันคำสั่ง JavaScript กัน
## Google Chrome
-ลองเปิดหน้า [bug.html](bug.html).
+ลองเปิดหน้า [bug.html](bug.html) ดู
-เปิด developer tools ดู จะเห็นว่ามี error ในโค้ดจาวาสคริปต์ แต่ผู้ใช้จะมองไม่เห็น
+ในโค้ด JavaScript บนหน้านั้นมีบั๊กซ่อนอยู่ ซึ่งผู้ใช้ทั่วไปมองไม่เห็น ลองเปิดเครื่องมือนักพัฒนาขึ้นมาดูกัน
-กด `F12` บน Windows หรือ `Cmd+Opt+J` บน Mac
+กด `key:F12` หรือหากใช้ Mac ให้กด `key:Cmd+Opt+J`
-developer tools จะเปิดหน้า console ขึ้นมาโดย default
+เครื่องมือนักพัฒนาจะเปิดขึ้นที่แท็บ Console เป็นค่าเริ่มต้น
-หน้าตาจะคล้ายๆแบบนี้
+หน้าตาจะออกมาประมาณนี้:
-
+
-หน้าตาตัว developer tools จะเปลี่ยนไปตามเวอร์ชั่น ถึงหน้าตาที่เปิดออกมาจะไม่เป๊ะเว่อร์ แต่เค้าโครงจะคล้ายๆกัน
+หน้าตาของเครื่องมือนักพัฒนาขึ้นอยู่กับเวอร์ชันของ Chrome ที่ใช้ อาจเปลี่ยนไปบ้างตามเวลา แต่โดยรวมจะคล้ายๆ กับในภาพ
-- ลองมองไปที่ console จะเห็นว่ามี error ที่เป็นแถบและตัวอักษรสีแดงอยู่ นั่นเพราะว่าเบราเซอร์ไม่รู้จักคำสั่ง "lalala"
-- ซ้ายมือของแถบ จะเห็นว่ามีการบอกบรรทัดที่ error นี้เกิดขึ้น
+- ตรงนี้เราจะเห็นข้อความแสดงข้อผิดพลาดสีแดง ในกรณีนี้ สคริปต์มีคำสั่งที่ไม่รู้จักชื่อ "lalala"
+- ทางด้านขวา จะมีลิงก์ที่คลิกได้ ซึ่งจะระบุไฟล์ต้นทาง `bug.html:12` พร้อมเลขบรรทัดที่เกิดข้อผิดพลาด
-ข้างล่างข้อความ error จะสังเกตเห็นว่ามีลูกศรสีน้ำเงินอยู่ ตัวมันเองแทน "command line" เราสามารถพิมพ์จาวาสคริปต์ลงไป แล้วกด `enter` เพื่อสั่งโค้ดทำงาน หรือ `shift-enter` เพื่อพิมพ์โค้ดหลายบรรทัดแทน
+ใต้ข้อความแสดงข้อผิดพลาดจะมีสัญลักษณ์ `>` สีฟ้า นี่คือ "บรรทัดคำสั่ง" (command line) ที่เราสามารถพิมพ์คำสั่ง JavaScript แล้วกด `key:Enter` เพื่อรันมันได้
-เมื่อเราเปิดมาพบข้อผิดพลาด นั่นก็ถือเป็นการเริ่มต้นที่ดีแล้ว เราจะกลับมาพูดรายละเอียดในเชิงเกี่ยวกับเครื่องมือนักพัฒนา และการดีบักกันต่อในบท
+ตอนนี้เราก็เห็นข้อผิดพลาดแล้ว ซึ่งเพียงพอสำหรับการเริ่มต้น เราจะกลับมาศึกษาเครื่องมือนักพัฒนากันอีกในภายหลัง และจะคุยเรื่องการดีบั๊กอย่างละเอียดมากขึ้นในบท
-## Firefox, Edge, และเบราเซอร์ตัวอื่นๆ
-```smart header="ป้อนคำสั่งหลายบรรทัด"
-เมื่อเราพิมพ์โค้ดจาวาสคริปต์ลงไปในหน้าคอนโซล เมื่อกด `key:Enter` โค้ดชุดนั้นก็จะทำงาน
+```smart header="การป้อนหลายบรรทัด"
+โดยปกติ เมื่อเราพิมพ์โค้ดบรรทัดเดียวลงไปในคอนโซล และกด `key:Enter` มันจะรันคำสั่งนั้นทันที
-เมื่อจะป้อนโค้ดหลายบรรทัด, ให้กดปุ่ม `key:Shift+Enter` จะช่วยให้เราสามารถพิมพ์โค้ดหลายบรรทัดได้
+แต่ถ้าต้องการพิมพ์หลายบรรทัด ให้กด `key:Shift+Enter` แทน วิธีนี้จะช่วยให้เราใส่ชิ้นส่วนโค้ด JavaScript ยาวๆ ได้
```
-นักพัฒนาส่วนใหญ่ใช้ `F12` เพื่อเปิดหน้า console
+## Firefox, Edge และอื่นๆ
-developer tools มักจะคล้ายๆกันไม่ว่าจะต่างเวอร์ชั่น ต่างเบราเซอร์ หากเชี่ยวชาญเพียงหนึ่ง ก็ใช้ตัวอื่นได้สูสีกัน
+เบราว์เซอร์ส่วนใหญ่ใช้ `key:F12` เพื่อเปิดเครื่องมือนักพัฒนา
+
+ลักษณะและการใช้งานค่อนข้างใกล้เคียงกัน พอรู้วิธีใช้เครื่องมือใดเครื่องมือหนึ่งแล้ว (เช่น เริ่มจาก Chrome) ก็สามารถเปลี่ยนไปใช้อันอื่นได้ไม่ยาก
## Safari
-Safari (เบราเซอร์ของผู้ใช้ Mac) ตัวนี้จะมาพร้อมความไม่เหมือนใคร โดยเราต้องไปเปิด "Develop menu" ก่อน
+Safari (เบราว์เซอร์ของ Mac ที่ไม่รองรับ Windows/Linux) มีความแตกต่างนิดหน่อย ต้องเปิดใช้งาน "Develop menu" ก่อน
-เปิดหน้า "Preferences" ไปที่ "Advanced" และติ๊ก checkbox ด้านล่าง
+เปิด Settings แล้วไปที่แท็บ "Advanced" จะเห็นช่องทำเครื่องหมายที่ด้านล่างของหน้า:
-ทีนี้กด `Cmd+Opt+C` หน้า console จะปรากฎขึ้น แถมเมนูด้านบน ยังปรากฎแถบ "Develop" เมื่อคลิกก็จะมีคำสั่งหลากหลายให้เลือกใช้
+ตอนนี้ `key:Cmd+Opt+C` จะสามารถเปิด/ปิดคอนโซลได้ และสังเกตว่าจะมีเมนูใหม่ชื่อ "Develop" ปรากฏที่ด้านบนขวา ซึ่งมีคำสั่งและตัวเลือกต่างๆ มากมาย
## สรุป
-- Developer tools ช่วยให้เห็น error, สั่งโค้ดทำงาน, ตรวจค่าตัวแปร และอื่นๆ
-- เปิดโดยกด `F12` สำหรับเบราเซอร์ส่วนใหญ่บน Windows แต่ Chrome บน Mac จะใช้ `Cmd+Opt+J` Safari จะเป็น `Cmd+Opt+C` อย่าลืมไปเปิดโหมดนักพัฒนาบน Safari ก่อน
+- เครื่องมือนักพัฒนาช่วยให้เราเห็นข้อผิดพลาด รันคำสั่ง ตรวจสอบตัวแปร และอีกสารพัด
+- สามารถเปิดใช้งานได้ด้วย `key:F12` ในเบราว์เซอร์ส่วนใหญ่บน Windows ส่วน Chrome บน Mac ใช้ `key:Cmd+Opt+J`, Safari ใช้ `key:Cmd+Opt+C` (ต้องเปิดใช้ก่อน)
-ทีนี้ปูพื้นเรื่อง environment กันมาสักพักแล้ว ก็พร้อมที่จาวาสคริปต์ออกโรง
+ตอนนี้เตรียมสภาพแวดล้อมเรียบร้อยแล้ว ในบทถัดไป เราจะลงมือศึกษา JavaScript กัน
diff --git a/1-js/01-getting-started/4-devtools/chrome.png b/1-js/01-getting-started/4-devtools/chrome.png
deleted file mode 100644
index 4cb3ea2f4..000000000
Binary files a/1-js/01-getting-started/4-devtools/chrome.png and /dev/null differ
diff --git a/1-js/01-getting-started/4-devtools/chrome.webp b/1-js/01-getting-started/4-devtools/chrome.webp
new file mode 100644
index 000000000..bdf067079
Binary files /dev/null and b/1-js/01-getting-started/4-devtools/chrome.webp differ
diff --git a/1-js/01-getting-started/4-devtools/chrome@2.webp b/1-js/01-getting-started/4-devtools/chrome@2.webp
new file mode 100644
index 000000000..2aeca5898
Binary files /dev/null and b/1-js/01-getting-started/4-devtools/chrome@2.webp differ
diff --git a/1-js/01-getting-started/4-devtools/chrome@2x.png b/1-js/01-getting-started/4-devtools/chrome@2x.png
deleted file mode 100644
index b87404a8f..000000000
Binary files a/1-js/01-getting-started/4-devtools/chrome@2x.png and /dev/null differ
diff --git a/1-js/01-getting-started/4-devtools/safari.png b/1-js/01-getting-started/4-devtools/safari.png
index 64c7a3f6c..4538827eb 100644
Binary files a/1-js/01-getting-started/4-devtools/safari.png and b/1-js/01-getting-started/4-devtools/safari.png differ
diff --git a/1-js/01-getting-started/4-devtools/safari@2x.png b/1-js/01-getting-started/4-devtools/safari@2x.png
index 27def4d09..1561b2bd9 100644
Binary files a/1-js/01-getting-started/4-devtools/safari@2x.png and b/1-js/01-getting-started/4-devtools/safari@2x.png differ
diff --git a/1-js/01-getting-started/index.md b/1-js/01-getting-started/index.md
index 7e349a1a7..685f6dad9 100644
--- a/1-js/01-getting-started/index.md
+++ b/1-js/01-getting-started/index.md
@@ -1,3 +1,3 @@
-# มาทำความรู้จักจาวาสคริปต์
+# บทนำ
-ภาษาจาวาสริปต์และ environment ที่ใช้ในการพัฒนา
+ในบทนี้เราจะพูดถึงเกี่ยวกับภาษา JavaScript และสภาพแวดล้อมที่ใช้ในการพัฒนาโปรแกรมด้วยภาษานี้
diff --git a/1-js/02-first-steps/01-hello-world/article.md b/1-js/02-first-steps/01-hello-world/article.md
index 969061491..8ef9a548d 100644
--- a/1-js/02-first-steps/01-hello-world/article.md
+++ b/1-js/02-first-steps/01-hello-world/article.md
@@ -1,16 +1,16 @@
-# Hello, world
+# สวัสดี ชาวโลก!
-ส่วนนี้เป็นบทสอนเกี่ยวกับหัวใจหลักของจาวาสคริปต์
+ในส่วนนี้ของบทเรียน เราจะเริ่มศึกษาพื้นฐานของภาษา JavaScript กัน
-แต่เราต้องเตรียมสภาพแวดล้อม (environment) ที่เหมาะสมแก่การทำงานสคริปต์ของเรากันก่อน แต่ด้วยความที่คู่มือฉบับนี้อยู่บนเว็บไซต์อยู่แล้ว ผู้เรียนจึงไม่มีความจำเป็นต้องจัดเตรียมสภาพแวดล้อมใดๆเลย เช่น Node.js ผู้เรียนสามารถสั่งสคริปต์ทำงานผ่านเบราเซอร์โดยตรง ก่อนจะนอกเรื่องกันเราจะกลับมาพูดถึงจาวาสคริปต์ที่ทำงานบนเบราเซอร์อีกทีใน[บทถัดไป]((/ui))
+แต่ก่อนอื่น เราต้องมีสภาพแวดล้อมสำหรับรันสคริปต์ก่อน เนื่องจากหนังสือเล่มนี้อยู่บนออนไลน์ เบราว์เซอร์จึงเป็นตัวเลือกที่สะดวกที่สุด เราจะพยายามจำกัดการใช้คำสั่งเฉพาะของเบราว์เซอร์ (เช่น `alert`) ให้น้อยที่สุด เผื่อว่าต้องการมุ่งเน้นไปที่สภาพแวดล้อมอื่นๆ เช่น Node.js แทน ส่วนการใช้ JavaScript ในเบราว์เซอร์โดยเฉพาะจะกล่าวถึงในรายละเอียดใน[ส่วนถัดไป](/ui)ของบทเรียน
-ก่อนอื่นเลย เรามาดูวิธีการแนบสคริปต์ไปบนเว็บเพจกันก่อน โดยที่สภาพแวดล้อมฝั่งเซิฟเวอร์ (อย่าง Node.js) เราสามารถสั่งสคริปต์ทำงานได้โดยการพิมพ์ว่า `"node my.js"` ในเทอร์มินัล
+ทีนี้มาดูกันว่าจะแทรกสคริปต์ลงในหน้าเว็บได้อย่างไร สำหรับสภาพแวดล้อมฝั่งเซิร์ฟเวอร์อย่าง Node.js นั้น รันสคริปต์ด้วยคำสั่ง `"node my.js"` ได้เลย
-## ภายใต้แท็กสคริปต์
+## แท็ก "script"
-เราสามารถเขียนจาวาสคริปต์ไปบนส่วนใดก็ได้ในไฟล์ HTML โดยใช้แท็ก `
*/!*
- ...After the script.
+ ...หลังสคริปต์
@@ -34,51 +34,51 @@
```
```online
-เราสามารถสั่งสคริปต์นี้ทำงานได้โดยคลิกปุ่ม "play" ที่มุมขวาบน
+ลองรันตัวอย่างนี้ได้โดยคลิกปุ่ม "เล่น" ที่มุมบนขวาของกล่องโค้ด
```
-เมื่อถึงคิวที่เบราเซอร์ประมวลผลในแท็กนี้ สคริปต์เหล่านี้ก็จะทำงานอัตโนมัติ
+แท็ก `