Fundamentals
JavaScript in HTML
อธิบายวิธีเชื่อม JavaScript เข้ากับหน้า HTML ด้วย tag script ทั้งแบบ inline และไฟล์ภายนอก พร้อมฝึกวางตำแหน่งและแก้จุดผิดที่พบบ่อยผ่านโจทย์ไล่ระดับ
1) โค้ดที่ถูกต้อง แต่หน้าเว็บไม่รู้จัก
เรามีไฟล์ JavaScript ที่เขียนไว้เรียบร้อย และมีหน้า HTML ที่มีปุ่มอยู่แล้ว แต่เมื่อเปิดหน้าเว็บ ข้อความที่ควรขึ้นใน console กลับไม่ขึ้นเลย ทั้งที่คำสั่งในไฟล์ JavaScript ไม่ได้ผิดตรงไหน สาเหตุไม่ได้อยู่ที่คำสั่ง JavaScript แต่อยู่ที่หน้า HTML ไม่ได้บอก browser ว่าให้โหลดและรันไฟล์นั้น browser จึงไม่รู้ว่าไฟล์นั้นเป็นส่วนหนึ่งของหน้าเว็บนี้ การเชื่อม JavaScript เข้ากับหน้าเว็บจึงเป็นขั้นที่ต้องมีทุกโปรเจกต์ และเป็นเรื่องแรกที่ต้องเข้าใจก่อนจะเขียน logic ที่ซับซ้อนขึ้น
ทายก่อน: ถ้าไฟล์ `app.js` ถูกต้องทุกบรรทัด แต่หน้า HTML ไม่มี tag ที่อ้างถึงไฟล์นั้น เมื่อเปิดหน้าเว็บจะเกิดอะไรขึ้น?
2) `<script>` คือจุดที่บอก browser ว่าให้รันโค้ด
`<script>` คือ tag ของ HTML ที่บอก browser ว่า ตรงจุดนี้มี JavaScript ให้อ่านและรัน เมื่อ browser อ่านมาถึง tag นี้ มันจะรันคำสั่งข้างในทันทีจากบนลงล่าง เราเชื่อม JavaScript เข้ากับหน้าเว็บได้สองแบบหลัก: - Inline script — เขียนคำสั่ง JavaScript ไว้ข้างใน tag `<script>` ในไฟล์ HTML โดยตรง - External file — เก็บคำสั่งไว้ในไฟล์ `.js` แยกต่างหาก แล้วอ้างถึงด้วย attribute `src` เช่น `<script src="app.js"></script>` สองแบบนี้ให้ผลการทำงานเหมือนกัน ต่างกันแค่ตำแหน่งของโค้ดและวิธีดูแลต่อในโปรเจกต์จริง
3) หน้าตาของ inline script และ external script
แบบแรกคือ inline — คำสั่ง JavaScript อยู่ในไฟล์ HTML เดียวกัน:
แบบที่สองคือ external — HTML อ้างถึงไฟล์ `.js` และคำสั่งย้ายไปอยู่ในไฟล์นั้น:
จุดที่ต้องจำ: tag `<script>` แบบ external ไม่มีโค้ดอยู่ข้างใน มีแค่ `src` ชี้ไปที่ไฟล์ `.js` ถ้าใส่ทั้ง `src` และโค้ดข้างใน browser จะใช้เฉพาะไฟล์จาก `src` และมองข้ามโค้ดข้างใน
4) วาง `<script>` ตรงไหนของหน้า
browser อ่าน HTML จากบนลงล่าง เมื่อเจอ `<script>` มันจะหยุดอ่าน HTML ชั่วคราวเพื่อรัน JavaScript ก่อน แล้วจึงอ่านส่วนที่เหลือต่อ ถ้าวาง script ไว้ใน `<head>` โค้ดจะรันก่อนที่เนื้อหาส่วนล่างของหน้าเว็บจะถูกสร้าง ทำให้โค้ดที่ต้องอ้างถึงส่วนนั้นทำงานผิดพลาดได้ สำหรับผู้เริ่มต้น วิธีที่ปลอดภัยคือวาง `<script>` ไว้ท้าย `<body>` ก่อน `</body>` ให้เนื้อหาหน้าเว็บถูกสร้างครบก่อน แล้วจึงรันโค้ด
5) ข้อผิดพลาดที่เจอบ่อยกับ `<script>`
ทายก่อน: จากสองแบบนี้ แบบไหนจะได้ผลลัพธ์จากไฟล์ `app.js` และแบบไหนจะไม่ได้?
ใส่ src แล้วอย่าใส่โค้ดข้างใน
เมื่อมี `src` browser จะใช้คำสั่งจากไฟล์ภายนอกเท่านั้น โค้ดข้างใน tag จะถูกมองข้าม
คำสั่งทั้งหมดอยู่ในไฟล์ `.js` ที่อ้างถึง ทำให้ HTML อ่านง่ายและแก้ไขที่เดียว
| ข้อผิดพลาด | ผลที่เกิดขึ้น | วิธีแก้ |
|---|---|---|
| ชื่อไฟล์ใน `src` ไม่ตรงกับไฟล์จริง | browser โหลดไฟล์ไม่เจอ คำสั่งทั้งหมดไม่ทำงาน | เทียบชื่อไฟล์และโฟลเดอร์ให้ตรงกัน รวมตัวพิมพ์เล็ก-ใหญ่ |
| ลืมปิด `</script>` | HTML หลังจากนั้นถูกมองเป็น JavaScript ทำให้หน้าเพี้ยน | ปิด tag `</script>` ให้ครบทุกครั้ง |
| วาง `<script>` ไว้ใน `<head>` | โค้ดรันก่อนเนื้อหาหน้าเว็บถูกสร้าง | ย้าย tag ไปไว้ท้าย `<body>` ก่อน `</body>` |
Lab 1: เพิ่ม inline script
Lab 2: เชื่อมไฟล์ JavaScript ภายนอก
Lab 3: สองคำสั่งใน inline script เดียว
Lab 4: ย้าย script จาก head ไปท้าย body
Lab 5: แก้ชื่อไฟล์ใน src
Lab 6: จัดหน้าใหม่ให้เหลือ external script จุดเดียว
Lab 7: เรียง tag ให้ config รันก่อน app.js
สรุปและก้าวต่อไป
- `<script>` คือจุดที่บอก browser ว่าให้อ่านและรัน JavaScript ตรงตำแหน่งนั้น
- Inline script เหมาะกับตัวอย่างสั้น ๆ ส่วน external file เหมาะกับโปรเจกต์จริงที่ต้องดูแลต่อ
- เมื่อใช้ `src` แล้ว ต้องปล่อยให้ tag ว่าง โค้ดทั้งหมดอยู่ในไฟล์ `.js`
- วาง `<script>` ไว้ท้าย `<body>` เพื่อให้เนื้อหาหน้าเว็บถูกสร้างครบก่อนโค้ดทำงาน
- ก้าวต่อไป: เรียน Variables (var, let, const) (variables-var-let-const) เพื่อตั้งชื่อเก็บค่าและนำค่าเดิมกลับมาใช้ แทนการเขียนค่าซ้ำหลายที่