Eloquent JavaScript: การแนะนำเชิงสมัยใหม่สำหรับการเขียนโปรแกรม

📚 สรุปเนื้อหา

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

การดำน้ำลึกอย่างลึกซึ้งและสวยงามไปยังหัวใจของการเขียนโปรแกรมด้วยจาวาสคริปต์

ผู้แต่ง: มารีญ ฮาวเออร์เบเค

คำขอบคุณ: ได้รับการสนับสนุนจากผู้บริจาคทางการเงิน 454 คน; ภาพประกอบโดย วัสิฟ ไฮเดอร์, มักซ์ เซียนตัว, มาร์กาเรียตา มาร์ติเนซ, โฮเซ่ เมโนร์, จิม ไทนีย์, ไดเล่ แม็คเกรกอร์, เจอฟ อาวาโลน, โธมัส พาเลฟ, และ อันโตนิโอ เพอร์โดโม ปาสตอร์

🎯 เป้าหมายการเรียนรู้

1. นิยามว่า "โปรแกรม" คืออะไร และอธิบายระดับความเป็นนามธรรมที่แตกต่างกันในภาษาคอมพิวเตอร์
2. ใช้เลขจำนวนและตัวดำเนินการทางคณิตศาสตร์ในจาวาสคริปต์เพื่อผลิตค่าต่าง ๆ
3. ประกาศตัวแปรและอัปเดตค่าตัวแปร พร้อมปฏิบัติตามกฎการตั้งชื่อและข้อจำกัดคำสงวน
4. ใช้โครงสร้างควบคุมที่แข็งแรงโดยใช้ do ลูป, for ลูป และคำสั่ง switch พร้อมรักษากำกับโค้ดให้สะอาดผ่านการเว้นบรรทัดและการใส่คอมเมนต์
5. นิยามและเรียกใช้ฟังก์ชันด้วยหลายรูปแบบ จัดการพารามิเตอร์ อาร์กิวเมนต์ที่ไม่จำเป็น และสภาพแวดล้อมเชิงคำสั่งที่ซ้อนกัน
6. ประยุกต์แนวคิดเชิงฟังก์ชันขั้นสูง เช่น การเรียกซ้ำ (recursion), คลอเจอร์ (closure) และเรียกซ้อน (call stack) เพื่อแก้ปัญหาอัลกอริธึมที่ซับซ้อน
7. ใช้เมธอดเฉพาะสำหรับวัตถุและอาร์เรย์เพื่อจัดการโครงสร้างข้อมูลที่ซับซ้อนและสตริง
8. ใช้ฟังก์ชันระดับสูง (filter, map, reduce) เพื่อแยกตรรกะและจัดองค์ประกอบการแปลงข้อมูล
9. นำทางและจัดการห่วงโซ่โปรโตไทป์เพื่อสร้างวัตถุที่มีโครงสร้าง สามารถนำกลับมาใช้ใหม่ได้ และอินเทอร์เฟซแบบพอลิมอร์ฟิก
10. สร้างอินเทอร์เฟซแบบพอลิมอร์ฟิกเพื่อจัดการการแสดงผลข้อมูลที่ซับซ้อน (ตาราง)

🔹 บทที่ 1: หลักการพื้นฐานของจาวาสคริปต์และโครงสร้างโปรแกรม

ภาพรวม: บทนี้แนะนำแนวคิดพื้นฐานของการเขียนโปรแกรมด้วยจาวาสคริปต์ ตั้งแต่การนิยามทางปรัชญาของโปรแกรม ไปจนถึงกลไกทางเทคนิคของโค้ด นักเรียนจะสำรวจว่าข้อมูลถูกแทนที่ด้วยชนิดข้อมูลและบิตอย่างไร วิธีการเปลี่ยนแปลงค่าโดยใช้ตัวดำเนินการ และวิธีการจัดโครงสร้างโปรแกรมโดยใช้ตัวแปร นิพจน์ และคำสั่ง บทนี้ยังครอบคลุมพฤติกรรมเฉพาะของจาวาสคริปต์ เช่น การแปลงประเภทอัตโนมัติ และการประเมินแบบตัดวงจร (short-circuit evaluation)

ผลลัพธ์การเรียนรู้:

• นิยามว่า "โปรแกรม" คืออะไร และอธิบายระดับความเป็นนามธรรมที่แตกต่างกันในภาษาคอมพิวเตอร์
• ใช้เลขจำนวนและตัวดำเนินการทางคณิตศาสตร์ในจาวาสคริปต์เพื่อผลิตค่า
• ประกาศตัวแปรและอัปเดตค่าตัวแปร พร้อมปฏิบัติตามกฎการตั้งชื่อและข้อจำกัดคำสงวน

🔹 บทที่ 2: ฟังก์ชันและโครงสร้างข้อมูลที่ซับซ้อน

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

ผลลัพธ์การเรียนรู้:

• ใช้โครงสร้างควบคุมที่แข็งแรงโดยใช้ do ลูป, for ลูป และคำสั่ง switch พร้อมรักษากำกับโค้ดให้สะอาดผ่านการเว้นบรรทัดและการใส่คอมเมนต์
• นิยามและเรียกใช้ฟังก์ชันด้วยหลายรูปแบบ จัดการพารามิเตอร์ อาเรย์ที่ไม่จำเป็น และสภาพแวดล้อมเชิงคำสั่งที่ซ้อนกัน
• ประยุกต์แนวคิดเชิงฟังก์ชันขั้นสูง เช่น การเรียกซ้ำ (recursion), คลอเจอร์ (closure) และเรียกซ้อน (call stack) เพื่อแก้ปัญหาอัลกอริธึมที่ซับซ้อน

🔹 บทที่ 3: ฟังก์ชันระดับสูงและโปรโตไทป์

ภาพรวม: บทนี้สำรวจการเปลี่ยนผ่านจากขั้นตอนการจัดการข้อมูลพื้นฐานไปสู่รูปแบบขั้นสูงของการเขียนโปรแกรมเชิงฟังก์ชันและเชิงวัตถุในจาวาสคริปต์ ครอบคลุมการจัดเก็บข้อมูลอย่างมีประสิทธิภาพโดยใช้ Map และวัตถุระดับโลก อำนาจของฟังก์ชันระดับสูงในการสร้างตรรกะ (กรอง แปลง และสรุป) และกลไกพื้นฐานของระบบวัตถุในจาวาสคริปต์ รวมถึงโปรโตไทป์ คอนสตรัคเตอร์ และพอลิมอร์ฟิซึม

ผลลัพธ์การเรียนรู้:

• ใช้เมธอดเฉพาะสำหรับวัตถุและอาร์เรย์เพื่อจัดการโครงสร้างข้อมูลที่ซับซ้อนและสตริง
• ใช้ฟังก์ชันระดับสูง (filter, map, reduce) เพื่อแยกตรรกะและจัดองค์ประกอบการแปลงข้อมูล
• นำทางและจัดการห่วงโซ่โปรโตไทป์เพื่อสร้างวัตถุที่มีโครงสร้าง สามารถนำกลับมาใช้ใหม่ได้ และอินเทอร์เฟซแบบพอลิมอร์ฟิก

🔹 บทที่ 4: การเขียนโปรแกรมเชิงวัตถุและจัดการข้อผิดพลาด

ภาพรวม: บทนี้สำรวจรูปแบบการเขียนโปรแกรมเชิงวัตถุขั้นสูงในจาวาสคริปต์ โดยเน้นพอลิมอร์ฟิซึมผ่านอินเทอร์เฟซการจัดวางตาราง และการออกแบบระบบนิเวศจำลอง ("ชีวิตอิเล็กทรอนิกส์") บทนี้ยังเปลี่ยนไปสู่ความน่าเชื่อถือของซอฟต์แวร์ โดยครอบคลุม "โหมดเข้มงวด" (Strict Mode) เทคนิคการดีบัก และความสำคัญของการทดสอบอย่างเป็นระบบเพื่อลดข้อผิดพลาดที่พบบ่อยในนักพัฒนา

ผลลัพธ์การเรียนรู้:

• สร้างอินเทอร์เฟซแบบพอลิมอร์ฟิกเพื่อจัดการการแสดงผลข้อมูลที่ซับซ้อน (ตาราง)
• เปรียบเทียบการสืบทอด (inheritance) กับการประกอบ (composition) เพื่อสร้างโครงสร้างวัตถุที่ขยายได้
• จัดการบริบทการดำเนินการ (this) ภายในฟังก์ชันระดับสูงและเมธอดของวัตถุ

🔹 บทที่ 5: การจับคู่รูปแบบและโมดูลาร์ไรเซชัน

ภาพรวม: บทนี้ครอบคลุมความต้องการสองด้านของโปรแกรมสมัยใหม่: การประมวลผลข้อมูลสตริงที่ซับซ้อน และการจัดระเบียบโค้ดให้อยู่ในโครงสร้างที่บำรุงรักษาได้ นักเรียนจะเรียนรู้การใช้รูปแบบการจับคู่ (Regular Expressions) เพื่อแสดงและจัดการรูปแบบข้อความ ตามด้วยการสำรวจการโมดูลาร์ไรเซชันเพื่อแยกโค้ด จัดการชื่อพื้นที่ (namespace) และอำนวยความสะดวกในการนำกลับมาใช้ใหม่

ผลลัพธ์การเรียนรู้:

• สร้างและทดสอบรูปแบบการจับคู่ (regular expressions) โดยใช้รูปแบบตัวหนังสือและตัวสร้าง (constructor notation)
• ใช้เทคนิคการจับคู่รูปแบบขั้นสูง เช่น การจัดกลุ่ม การย้อนกลับ (backtracking) และการซ้ำแบบไม่หยุดยาว (non-greedy repetition)
• ประยุกต์หลักการออกแบบโมดูลาร์เพื่อป้องกันการปนเปื้อนชื่อพื้นที่และแยกส่วนต่าง ๆ ของโปรแกรมออกจากกัน

🔹 บทที่ 6: การออกแบบภาษาและสภาพแวดล้อมเว็บ

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

ผลลัพธ์การเรียนรู้:

• ใช้ระบบโมดูลที่แข็งแรงโดยใช้ฟังก์ชัน define และจัดการความสัมพันธ์ที่ซับซ้อน
• สร้างตัววิเคราะห์ (parser) และตัวประเมิน (evaluator) ที่ทำงานได้สำหรับภาษาเฉพาะโดเมน รวมถึงการจัดการสโคปและฟังก์ชัน
• อธิบายสถาปัตยกรรมของเว็บ รวมถึง TCP/IP โครงสร้างของ HTML และผลกระทบด้านความปลอดภัยจากการกักขังในเบราว์เซอร์ (browser sandbox)

🔹 บทที่ 7: อีเวนต์และแพลตฟอร์มแบบโต้ตอบ

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

ผลลัพธ์การเรียนรู้:

• จัดการการจัดวางและสไตล์ของ DOM: ใช้จาวาสคริปต์อ่านขนาดองค์ประกอบ ใช้สไตล์แบบส่งต่อ (cascading styles) และทำให้องค์ประกอบเคลื่อนไหวด้วยตำแหน่งของ CSS และตรีโกณมิติ
• ควบคุมอีเวนต์อย่างมีประสิทธิภาพ: ใช้การจัดการอีเวนต์ขั้นสูง เช่น การควบคุมการส่งต่อ (propagation control), การป้องกันการกระทำเริ่มต้น (preventing default actions), และการจัดการอีเวนต์เฉพาะ (คีย์บอร์ด แม่เหล็ก แทรกซึม และโฟกัส)
• ปรับปรุงการดำเนินงานของสคริปต์: ใช้เว็บเวิร์กเกอร์สำหรับการประมวลผลเบื้องหลัง และใช้การดีบูน/ทรอตติ้ง (debouncing/throttling) เพื่อจัดการอีเวนต์ที่เกิดขึ้นบ่อยครั้ง

🔹 บทที่ 8: กราฟิกแค้นส์และโปรโตคอลเครือข่าย

ภาพรวม: บทนี้สำรวจการเปลี่ยนผ่านจากการเรนเดอร์เกมโดยใช้ DOM ไปสู่การใช้ API แบบประสิทธิภาพสูงของ HTML5 Canvas พร้อมกลไกพื้นฐานของการเคลื่อนไหวแบบ 2D ในเกมแพลตฟอร์ม นักเรียนจะเรียนรู้การประยุกต์ใช้ตรรกะเกมที่ซับซ้อน เช่น แรงโน้มถ่วงและการตรวจจับการชน พร้อมทักษะการวาดแบบอิมเพอร์เสฟ (imperative drawing) นอกจากนี้ บทนี้ยังแนะนำโปรโตคอล HTTP และวัตถุ XMLHttpRequest สำหรับการจัดการการสื่อสารระหว่างผู้ใช้กับเซิร์ฟเวอร์

ผลลัพธ์การเรียนรู้:

• ใช้การตรวจจับการชนแบบตารางและแรงโน้มถ่วงในการเคลื่อนที่ในสภาพแวดล้อมเกม
• ใช้ API HTML5 Canvas ในการเรนเดอร์เส้นทาง เส้นโค้ง ภาพ และภาพเคลื่อนไหวแบบชุดสปีริต (sprite sheets)
• ใช้การเปลี่ยนแปลงพิกัด (การขยาย หมุน กลับด้าน) และจัดการสถานะของคอนเท็กซ์โดยใช้ save และ restore

🔹 บทที่ 9: ฟอร์มขั้นสูงและแอปพลิเคชันที่คงทน

ภาพรวม: บทนี้สำรวจเทคนิคการพัฒนาเว็บขั้นสูง โดยเน้นการสื่อสารแบบไม่เป็นลำดับผ่าน XMLHttpRequest และ Promise การโต้ตอบอย่างลึกซึ้งกับฟิลด์ฟอร์มใน HTML และการจัดเก็บข้อมูลฝั่งไคลเอนต์ นักเรียนจะเรียนรู้การจัดการคำขอเครือข่ายแบบไม่เป็นลำดับด้วยหัวข้อเฉพาะ และจัดการข้อผิดพลาดในกระบวนการแบบไม่เป็นลำดับ โดยสร้างแอปพลิเคชันทาสีแบบโมดูลาร์ และเครื่องมือจดโน้ตที่คงอยู่ตลอดเวลา

ผลลัพธ์การเรียนรู้:

• ตั้งค่าและดำเนินการคำขอเครือข่ายแบบไม่เป็นลำดับโดยใช้ XMLHttpRequest และการเรียงลำดับแบบ Promise
• จัดการพฤติกรรมฟอร์มที่ซับซ้อน รวมถึงการจัดการโฟกัส การปิดใช้งานฟิลด์ และการจัดการไฟล์
• ใช้ localStorage และ sessionStorage เพื่อจัดเก็บข้อมูลฝั่งไคลเอนต์ เพื่อรักษาสถานะของแอปพลิเคชัน

🔹 บทที่ 10: การพัฒนาฝั่งเซิร์ฟเวอร์ด้วย Node.js

ภาพรวม: บทนี้เชื่อมช่องว่างระหว่างการโต้ตอบขั้นสูงบนฝั่งไคลเอนต์กับตรรกะบนฝั่งเซิร์ฟเวอร์ นักเรียนจะต้องเรียนรู้เครื่องมือจัดการภาพวาดขั้นสูงและข้อจำกัดด้านความปลอดภัยของเบราว์เซอร์ก่อนจะเปลี่ยนไปสู่สภาพแวดล้อม Node.js เพื่อสร้างเซิร์ฟเวอร์ไฟล์แบบไม่เป็นลำดับและแอปพลิเคชันเว็บแบบเรียลไทม์โดยใช้เทคโนโลยีการโพลล์ยาว (long-polling) และการจัดเส้นทางแบบ RESTful

ผลลัพธ์การเรียนรู้:

• ใช้เครื่องมือวาดขั้นสูง (เส้น, ลบ, สเปรย์, ฉีดสีเต็ม) และจัดการความปลอดภัยของแค้นส์ (การปนเปื้อน - Tainting)
• ดำเนินการสคริปต์ฝั่งเซิร์ฟเวอร์โดยใช้ Node.js จัดการการพึ่งพาผ่าน NPM และจัดการการอ่าน/เขียนแบบไม่เป็นลำดับด้วย callback และ promise
• สร้างเซิร์ฟเวอร์ HTTP ที่ทำงานได้จริง รองรับการจัดการไฟล์ การประมวลผลคำขอแบบ JSON และการอัปเดตแบบเรียลไทม์ผ่าน long-polling