บทเรียนนี้จะพาทุกคนไปรู้จักวิธีการเขียนโค้ดภาษา JavaScript Hello World ฝังลงไปในหน้า HTML บนเว็บไซต์ (Embed JavaScript Code on HTML Page) เพื่อผสานการทำงานระหว่างไฟล์ .html และ .js ให้เว็บไซต์สามารถทำงานแบบ Interactive ได้อย่างมีประสิทธิภาพ ช่วยให้เว็บไซต์มีชีวิตชีวา และโต้ตอบกับผู้ใช้งานได้ดียิ่งขึ้น
ข้อควรรู้ ก่อนเริ่มต้นเขียนโค้ด JavaScript หรือ JS
ก่อนที่เราจะเริ่มเขียนภาษาโปรแกรมต่างๆ ได้ จำเป็นต้องเข้าใจธรรมชาติของภาษานั้นๆ รวมทั้ง Syntax พื้นฐาน ก่อนเป็นอันดับแรก โดยธรรมชาติของภาษา JS การทำงานจะเริ่มต้นจาก บน-ลง-ล่าง เสมอ หรือเป็นการทำงานตามลำดับขั้น
JavaScript เข้ากันได้กับ HTML หรือเปล่า ?
แน่นอนสามารถทำงานร่วมกันได้ แต่เป็นการเพิ่มฟังก์ชันการทำงาน และความยืดหยุ่นให้กับเว็บไซต์เป็นหลัก อาทิเช่น
- ควบคุม DOM (Document Object Model) หรือ Element บนหน้าเว็บไซต์
- จัดการกับเนื้อหาบนเว็บไซต์แบบเรียลไทม์ หรือจัดการ Event ต่างๆ ที่สำคัญของเว็บ เช่น การคลิก เป็นต้น
- สร้างเอฟเฟกต์ภาพนิ่ง และภาพเคลื่อนไหว รวมทั้งการโต้ตอบบนหน้าเว็บฯ
เมื่อเข้าใจหลักการพื้นฐาน และการทำงานร่วมกันของทั้ง 2 ภาษาแล้ว วันนี้เราจะเริ่มต้นเข้าสู่บทเรียนแรกคือ การแทรกโค้ดภาษาสคริปต์เข้าไปในโครงสร้างของเว็บไซต์อย่าง HTML (HyperText Markup Language) ซึ่งสามารถทำได้ 2 วิธี ดังต่อไปนี้
การฝัง JavaScript Hello World บนเว็บไซต์ (โดยตรง)
ก่อนอื่นเราต้องจำแนกโครงสร้างของโค้ดระหว่างภาษา HTML กับ JavaScript ให้ออกก่อน วิธีสังเกตุง่ายๆ คือโค้ดภาษา JS จะอยู่ภายใต้แท็ก <script> </script> เสมอ ซึ่งเราสามารถเขียนชุดคำสั่ง alert() ด้วยภาษา JS เพื่อแสดงผลการแจ้งเตือน “Hello World” แทรกไปในภาษา HTML ได้โดยตรง
ซึ่งหลักการทำงานพื้นฐานนี้เป็นจุดเริ่มต้นการเขียนโค้ด HTML + JS เพื่อออกแบบฟังก์ชันการทำงานเชิงโต้ตอบของเว็บไซต์
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title> <script>alert('Hello, World!');</script> </head>
</html>
การฝังแบบอ้างอิงไฟล์จากภายนอก
นอกจากการแทรกโค้ดลงไปโดยตรงแล้ว นักพัฒนายังสามารถฝังโค้ดโดยใช้ Script File ได้ด้วยเช่นกัน ซึ่งเป็นการเขียนโค้ดภาษา JS แยกเก็บไว้ในไฟล์สกุล .js ตางหาก และทำการอ้างอิงไฟล์เหล่านี้ เข้าไปในโปรเจคเว็บไซต์ของเรา ดังนี้
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World [External .js]</title> <script src="js/custom.js"></script> </head>
</html>
ประโยชน์ของวิธีการอ้างอิงไฟล์จากภายนอก คือการทำให้โค้ดเป็นระเบียบยิ่งขึ้น รวมทั้งลดอัตราการโหลดของสคริปต์ที่ไม่จำเป็น และนอกจากนี้ยังสามารถช่วยให้นักพัฒนาเรียกใช้บริการ JS Service Packages จากผู้ให้บริการรายอื่นได้สะดวก
JS Service Packages หรือบริการต่างๆ ที่นักพัฒนารายอื่นสร้างขึ้น และนำมาแบ่งปันเพื่อใช้งานในวงกว้าง มักถูกจัดเก็บไว้บน CDN หรือ Content Delivery Network ซึ่งเป็นเครือข่ายเซิร์ฟเวอร์ที่กระจายอยู่ทั่วโลก โดยผู้ใช้สามารถเข้าถึงเนื้อหาแพ็กเกจ JS ได้สะดวก และยังสามารถช่วยเพิ่มความเร็วในการโหลดหน้าเว็บขึ้นได้ (แต่ก็ไม่ได้เสมอไป ขึ้นอยู่กับปริมาณการเรียกใช้สคริปต์ ณ เวลานั้น)
บทสรุป
การนำ JavaScript มาผนวกกับการสร้างเว็บแบบดั้งเดิมสามารถช่วยให้นักพัฒนาสร้างเว็บไซต์แบบ interactive เพื่อโต้ตอบกับผู้ใช้ได้มีประสิทธิภาพยิ่งขึ้น อีกทั้งยังสามารถช่วยให้เว็บไซต์มีความน่าสนใจกว่าเว็บไซต์แบบดั้งเดิมทั่วไป การเรียนรู้การฝังสคริปต์ลงในหน้าเว็บไซต์สามารถต่อยอดไปสู่การพัฒนาฟังก์ชันเพื่อตอบโต้กับผู้ใช้งานที่หลากหลายได้ในอนาคต ~ ซึ่งนับเป็นพื้นฐานที่สำคัญ
