Fundamentals
What is JavaScript
อธิบายว่า JavaScript คือคำสั่งที่ browser รันให้อย่างไร พร้อมฝึกเขียน console.log() เพื่อสั่งงานและอ่านผลลัพธ์ใน console ผ่านโจทย์ที่ไล่ระดับ
1) เปิดหน้าที่กดปุ่มแล้วไม่มีอะไรเกิดขึ้น
สมมติเราทำหน้าร้านกาแฟไว้หนึ่งหน้า มีข้อความต้อนรับและปุ่ม `ดูเมนูวันนี้` ครบทุกอย่าง แต่พอผู้ใช้กดปุ่ม กลับไม่มีอะไรเกิดขึ้น ข้อความบนหน้าเหมือนเดิมทุกตัวอักษร สาเหตุคือ HTML กับ CSS อธิบายได้แค่ว่า หน้าเว็บมีอะไรและหน้าตาเป็นอย่างไร แต่ไม่ได้บอกว่าเมื่อผู้ใช้กดปุ่มควรเกิดอะไรขึ้น หน้าเว็บแบบนี้จึงดูได้อย่างเดียว แต่โต้ตอบไม่ได้ ถ้าต้องการให้กดปุ่มแล้วมีอะไรเกิดขึ้น ต้องมีคำสั่งที่ browser รันให้ตอนนั้น — นั่นคือจุดที่ JavaScript เข้ามา
ทายก่อน: ถ้าหน้าร้านกาแฟนี้มี HTML กับ CSS ครบ แต่ไม่มี JavaScript เลย เมื่อผู้ใช้กดปุ่ม `ดูเมนูวันนี้` ข้อความบนหน้าจะเปลี่ยนหรือไม่?
2) JavaScript คือคำสั่งที่ browser รันให้
JavaScript คือภาษาโปรแกรม (programming language) ที่เราใช้เขียนคำสั่งให้คอมพิวเตอร์ทำตามที่เราต้องการ คำสั่งของเราจะทำงานได้ต้องมีตัวรัน คำว่า runtime หมายถึงโปรแกรมที่อ่านคำสั่งแล้วลงมือทำตามทีละคำสั่ง JavaScript มี runtime สองที่ที่เราจะเจอบ่อยในเส้นทางนี้: - ใน browser — ใช้ควบคุมหน้าเว็บและตอบสนองต่อผู้ใช้ - ใน Node.js — ใช้รันบนเครื่องหรือ server คำสั่งแรกที่ใช้คุยกับโปรแกรมคือ `console.log()` — สั่งให้ runtime แสดงค่าออกมาใน console เพื่อให้เราเห็นว่าโค้ดทำงานอย่างไร
JavaScript คือโค้ดที่เราเขียน ส่วน browser หรือ Node.js คือ runtime ที่อ่านและรันโค้ดนั้น
3) อ่านคำสั่งจากบนลงล่าง
`console.log()` รับค่าที่ต้องการแสดงไว้ในวงเล็บ เรียกค่าที่ส่งเข้าไปแบบนี้ว่า argument หลักง่าย ๆ ที่ทำให้อ่านโค้ดได้ถูกต้อง: - หนึ่งบรรทัดคือหนึ่งคำสั่ง - runtime อ่านจากบนลงล่าง บรรทัดที่เขียนก่อนจะทำงานก่อน - ข้อความต้องอยู่ในเครื่องหมายคำพูด เพื่อบอกว่า "นี่คือข้อความ" ไม่ใช่ชื่อของอะไรบางอย่าง - ส่งได้หลายค่าพร้อมกัน เช่น `console.log("คะแนน:", 10)` จะแสดงสองค่าโดยมีช่องว่างคั่นให้
รันแล้ว console จะแสดง เปิดหน้าร้านแล้ว → กำลังเตรียมเมนู → พร้อมรับออเดอร์ ตามลำดับ
4) โค้ดเดียวกันรันได้สองที่: browser กับ Node.js
โค้ด JavaScript ชุดเดียวกันรันได้ทั้งใน browser และ Node.js ต่างกันแค่รันอยู่ที่ไหนและงานที่ทำ เราเห็นผลลัพธ์ของทั้งสองที่ผ่าน console เหมือนกัน
| runtime | รันที่ไหน | ใช้ทำอะไร | เห็นผลได้อย่างไร |
|---|---|---|---|
| browser | ในแท็บที่เปิดหน้าเว็บ | ตอบสนองผู้ใช้ ควบคุมหน้าเว็บ | console ใน DevTools |
| Node.js | บนเครื่องของเราหรือ server | API, เครื่องมือ, สคริปต์ทำงานอัตโนมัติ | console ใน terminal |
5) ข้อความต้องอยู่ในเครื่องหมายคำพูด
ทายก่อน: จากสองแบบนี้ แบบไหนจะแสดงข้อความออกทาง console ได้ และแบบไหนจะทำให้โปรแกรมหยุด?
ลืมเครื่องหมายคำพูดคือจุดพลาดแรก
JavaScript จะมอง สวัสดี เป็นชื่อของอะไรบางอย่าง แล้วหยุดเพราะไม่รู้จักชื่อนั้น บรรทัดถัดไปไม่ถูกทำ
JavaScript รู้ว่านี่คือข้อความ จึงแสดงออกทาง console ได้
สามคำถามก่อนกดรัน
ข้อความอยู่ในเครื่องหมายคำพูดหรือยัง
ข้อความทุกตัวต้องมีเครื่องหมายคำพูดคร่อม ถ้าลืม โปรแกรมจะหยุดทันทีที่บรรทัดนั้น
หนึ่งบรรทัดทำงานกี่คำสั่ง
หนึ่งบรรทัดควรมีหนึ่งคำสั่ง เพื่อให้อ่านลำดับการทำงานจากบนลงล่างได้
ลำดับบรรทัดตรงกับผลลัพธ์ที่ต้องการหรือยัง
ถ้าผลลัพธ์ออกมาสลับกัน ให้ตรวจว่าเราสลับบรรทัดหรือเปล่า
Lab 1: พิมพ์ข้อความแรกด้วย console.log
Lab 2: สองคำสั่ง เรียงตามลำดับ
Lab 3: ข้อความกับตัวเลขในคำสั่งเดียว
Lab 4: เรียงลำดับคำสั่งใหม่
Lab 5: ซ่อมบรรทัดที่ทำให้โปรแกรมหยุด
Lab 6: ซ่อมโปรแกรมสองจุด
Lab 7: เขียนประกาศร้านจากผลลัพธ์ที่กำหนด
สรุปและก้าวต่อไป
- JavaScript คือคำสั่งที่ runtime อย่าง browser หรือ Node.js อ่านและรันให้จากบนลงล่าง
- `console.log()` ใช้แสดงค่าออกมาดูใน console และรับได้หลายค่าพร้อมกัน
- ข้อความต้องอยู่ในเครื่องหมายคำพูด ถ้าลืม โปรแกรมจะหยุดที่บรรทัดนั้น
- ลำดับบรรทัดคือลำดับการทำงานจริง — สลับบรรทัดคือสลับลำดับผลลัพธ์
- ก้าวต่อไป: เรียน JavaScript in HTML (javascript-in-html) เพื่อเชื่อมโค้ด JavaScript เข้ากับหน้าเว็บและรู้ว่า browser รันโค้ดตรงจุดไหนของหน้า