วันพฤหัสบดีที่ 17 กรกฎาคม พ.ศ. 2557

ภาษา JavaScript ฉบับผู้เริ่มต้น part 3

: จะวางโค้ด JavaScript ที่ไหนดี?

>> มาถึง part นี้เพื่อนๆหลายคนคงได้เริ่มต้นศึกษา HTML กันบ้างแล้ว และทราบว่าภาษา HTML ที่ใช้สร้างเอกสารหรือหน้าเว็บนั้น ประกอบไปด้วยแท็กสำคัญ 3 แท็ก ได้แก่
1) <html>
2) <head>
3) <body>

โดยแท็กทั้งสามจะประกอบกันเป็นโครงสร้างพื้นฐานดังนี้
<html>
<head></head>
<body></body>
</html>

กล่าวคือมีแท็ก html ไว้ครอบแท็ก head และ body ซึ่งหน้าที่ของแท็ก head คือการระบุทรัพยากรที่มองไม่เห็น ต่างจากแท็ก body ที่ใช้สื่อถึงสิ่งที่มองเห็นเป็นสำคัญ

>> จาก part ที่ผ่านมา เพื่อนๆทราบว่าภาษา JavaScript จะเขียนไว้ภายในแท็ก <script> และ </script> ตัวอย่างเช่นคำสั่ง alert คำถามมีอยู่ว่า เราจะเขียนเจ้าแท็ก script นี้ไว้ได้ที่ไหนบ้างที่เหมาะสมที่สุดภายในโครงสร้างของเอกสาร HTML?

>> ผมมีให้เลือกอยู่สองตำแหน่งสำคัญ ได้แก่ (1) ไว้ระหว่างแท็ก head หรือ (2) ไว้ก่อนปิดแท็ก body ดังด้านล่าง
<html>
<head>(1)</head>
<body>(2)</body>
</html>

ตอบ เพื่อนๆสามารถวางแท็ก script ไว้ได้ทั้งสองตำแหน่ง ไม่ว่าจะด้วยเหตุผลแต่โบราณมาแล้ว กระทั่งกลายเป็นที่ถกเถียงกันพอสมควร นั่นเพราะโปรแกรมเล่นเว็บ (Browser) ไม่มีระบบการจัดการเรื่องนี้ที่ดีเท่าปัจจุบันครับ คือจะบอกว่าปัจจุบันวางไว้ไหนก็ได้ ไม่ต้องคิดมากไง

>> ขอฟังเหตุผลโบราณที่กล่าวมาหน่อยสิ?
ได้เลยครับ พูดกันถึงข้อเสียแล้วกัน เริ่มจากข้อเสียหากวางไว้ ณ ตำแหน่งที่ (1) ก่อน

- หากใส่ JavaScript ไว้ที่แท็ก head จะต้องรอให้ JavaScript ตัวก่อนหน้าโหลดเสร็จก่อน จึงจะโหลด JavaScript ตัวต่อไปได้ ทำให้เกิดความล่าช้า
- Web Crawler บางตัว (ตอนนี้ไม่ต้องสนใจนะ) อาจไม่อ่านหน้าเว็บทุกตัวอักษร แต่จะกำหนดจำนวนตัวอักษรที่ต้องการอ่านเอาไว้ ดังนั้น การใส่ JavaScript ไว้ที่ head มากๆ อาจทำให้ Web Crawler นั้นๆไม่ให้ความสำคัญกับเนื้อหาอื่นๆ

ทีนี้มาฟังข้อเสียหากวางไว้ ณ ตำแหน่งที่ (2) บ้าง
- สิ่งที่ไม่แสดงผลออกมา ไม่ควรอยู่ในแท็ก body ดังนั้น JavaScript ควรอยู่ในแท็ก head
- หากใส่ JavaScript ไว้ก่อนปิดแท็ก body จะทำให้การพัฒนามีความยากลำบากในบางกรณี เช่น คำสั่ง document.ready ของ jQuery (ตอนนี้ไม่ต้องสนใจกรณีนี้)
- หาก JavaScript โหลดทีหลังสิ่งอื่นๆในหน้าเว็บ อาจทำให้พฤติกรรมของผู้ใช้เว็บเปลี่ยนไป

>> สรุปจะวางโค้ด JavaScript ไว้ ณ ตำแหน่งไหน ขออีกที?
ตอบ หากเพื่อนๆไม่มั่นใจว่าโปรแกรมเล่นเว็บที่ผู้ใช้ใช้อยู่นั้น เป็นเวอร์ชันใหม่หรือเก่า และคันใจเหลือเกินกับเหตุผลข้างต้น (หรือไม่รู้สึกอะไรเลย) ก็ให้คิดอย่างนี้ครับ ให้ส่วนที่เป็นการเรียกภาษา JavaScript จากที่อื่น (แหล่งอื่นๆที่ไม่ใช่เว็บของเรา) ไว้ ณ ส่วน head และให้ส่วนที่ไม่เกี่ยวข้องกับโครงสร้าง (layout) ของหน้าเว็บรวมถึงคำสั่งที่เกี่ยวกับการโหลดสิ่งต่างๆในแท็ก body ให้วางภาษา JavaScript ไว้ ณ ก่อนปิดแท็ก body ก็หมดเรื่องแล้ว ซึ่งจะขอกล่าวถึงรายละเอียดแบบตับตับในโอกาสต่อไป

ขอบคุณแหล่งข้อมูล
- http://www.w3schools.com/js/js_examples.asp สำหรับมาตราฐานที่ดี
- http://stackoverflow.com/questions/1213281/does-javascript-have-to-be-in-the-head-tags สำหรับการถกเถียงที่มีข้อสรุป
- http://www.siamhtml.com/ (javascript-head-body-ควรใส่ไว้ที่ไหน) สำหรับข้อมูลภาษาไทย

>> ใน part ต่อไปเราจะมาทำความเข้าใจกันว่า รูปแบบของแท็ก script มีกี่รูปแบบ ควรใช้แบบไหนอย่างไรครับ

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)