ในบทความนี้ คุณจะได้เรียนรู้เกี่ยวกับการแทรกโค้ด JavaScript ในเอกสาร HTML วิธีที่เป็นไปได้ ความแตกต่างระหว่างวิธีเหล่านี้ และอื่นๆ อีกมากมาย
ข้อกำหนดเบื้องต้น
คุณควรมีความคุ้นเคยกับ HTML/CSS บ้าง คุณไม่จำเป็นต้องมีประสบการณ์การเขียนโปรแกรมมาก่อน
แท็ก ‹script›
ใน HTML โค้ด JavaScript จะถูกแทรกระหว่างแท็ก <script> ถึง </script>
<script> // Here goes your JS code </script>
คุณสามารถวางสคริปต์จำนวนเท่าใดก็ได้ในเอกสาร HTML สามารถวางสคริปต์ไว้ใน <body> หรือในส่วน <head> ของหน้า HTML หรือทั้งสองอย่าง
มีความแตกต่างหรือไม่?
ฉันดีใจที่คุณถามเพราะมีความแตกต่างและมันค่อนข้างสำคัญ
แนวทางปฏิบัติที่ดีที่สุดคือการใส่แท็ก JavaScript <script> หน้าแท็กปิด</body> แทนที่จะวางไว้ในส่วน <head> ของ HTML ของคุณ
เหตุผลก็คือ HTML โหลดจากบนลงล่าง ศีรษะจะโหลดก่อน จากนั้นจึงโหลดร่างกาย และตามด้วยทุกสิ่งที่อยู่ภายในร่างกาย หากเราใส่ JavaScript ไว้ที่ส่วนหัว JavaScript ทั้งหมดจะโหลดก่อนที่จะโหลด HTML ใดๆ ซึ่งอาจก่อให้เกิดปัญหาเล็กน้อย :
- หากคุณมีโค้ดใน JavaScript ที่เปลี่ยนแปลง HTML ทันทีที่โค้ด JavaScript โหลดขึ้นมา ยังไม่มีองค์ประกอบ HTML ใด ๆ ที่จะได้รับผลกระทบ ดังนั้นจึงดูเหมือนว่าโค้ด JavaScript ไม่ทำงาน และคุณ อาจได้รับข้อผิดพลาด
- หากคุณมี JavaScript จำนวนมาก อาจทำให้การโหลดหน้าเว็บของคุณช้าลงอย่างเห็นได้ชัด เนื่องจากจะโหลด JavaScript ทั้งหมดก่อนที่จะโหลด HTML ใดๆ
เมื่อคุณวาง JavaScript ไว้ที่ด้านล่างของเนื้อหา HTML จะทำให้ HTML มีเวลาโหลดก่อนที่จะโหลด JavaScript ใดๆ ซึ่งสามารถป้องกันข้อผิดพลาด และเพิ่มความเร็วในการตอบสนองของเว็บไซต์ได้
มาทำความเข้าใจเพิ่มเติมด้วยตัวอย่าง (และไม่ต้องกังวลกับไวยากรณ์ที่ฉันใช้ คุณเพียงแค่ต้องเข้าใจว่าเรากำลังพยายามทำอะไร)
ในโค้ดด้านบน ฉันพยายามเปลี่ยนสีของย่อหน้าเป็นสีเขียวโดยเขียน JavaScript ใน <head>tag ผลลัพธ์ก็คือ:
ดังนั้นโค้ดจึงไม่ส่งผลต่อสีของย่อหน้า เนื่องจากดังที่เราได้กล่าวไว้ก่อนหน้านี้ สคริปต์จะโหลดก่อนย่อหน้า ดังนั้น ณ เวลานั้น จึงไม่มีย่อหน้าใดที่เราสามารถเปลี่ยนสีได้
ทีนี้ลองกลับกันที่ด้านล่างของร่างกาย:
และแน่นอนว่าเราได้สิ่งที่เราต้องการ เพราะตอนนี้โค้ด JS รู้ย่อหน้าแล้ว
อีกประการหนึ่ง: แม้ว่าวิธีที่ดีที่สุดในการรวม JavaScript ไว้ท้าย HTML <body> แต่การใส่ JavaScript ไว้ใน <head> ของ HTML ไม่ได้ ทำให้เกิดข้อผิดพลาดเสมอไป
จาวาสคริปต์ภายนอก
JavaScript ยังสามารถใช้ในไฟล์ภายนอกได้ ไฟล์ JavaScript มีนามสกุลไฟล์ '.js' หากต้องการใช้สคริปต์ภายนอก ให้ใส่ชื่อของไฟล์สคริปต์ในแอตทริบิวต์ src ของแท็กสคริปต์
|<scriptsrc="myScript.js"></script>
ข้อดีของ JavaScript ภายนอก:
การวางโค้ด JavaScript ในไฟล์ js ภายนอกมีข้อดีมากกว่าสคริปต์อินไลน์:
- การแยกโค้ด HTML และ JavaScript จะช่วยให้จัดการฐานโค้ดได้ง่ายขึ้น
- นักออกแบบสามารถทำงานร่วมกับผู้เขียนโค้ดแบบคู่ขนานได้โดยไม่มีความขัดแย้งของโค้ด
- ทำงานได้ดีกับระบบควบคุมเวอร์ชันซอร์สโค้ดสมัยใหม่ เช่น GIT ซึ่งหมายความว่าแต่ละไฟล์เหล่านี้จะรักษาประวัติและสามารถเช็คอินและเช็คเอาท์โดยโปรแกรมเมอร์หลายคนได้
- รหัสและ HTML สามารถอ่านได้ง่าย
- ไฟล์ JavaScript ภายนอกจะถูกแคชโดยเบราว์เซอร์และสามารถเพิ่มความเร็วในการโหลดหน้าเว็บได้
- แพ็คเกจ JavaScript ยอดนิยมจำนวนมากมีให้บริการโฮสต์บนเครือข่ายการจัดส่งเนื้อหา (cdn) และคุณสามารถชี้ไปที่แพ็คเกจเหล่านั้นได้โดยใช้ URL ใน src เพื่อหลีกเลี่ยงการคัดลอกไฟล์ js ไปยังโฟลเดอร์ในเครื่อง
เป็นเรื่องที่ควรค่าแก่การกล่าวถึงว่ามีข้อดีอื่นๆ อยู่บ้าง แต่เนื่องจากบทความนี้มีไว้สำหรับนักพัฒนาที่ไม่เชี่ยวชาญ ฉันจึงเลือกที่จะไม่พูดถึงเรื่องนี้
ไม่พร้อมกันและเลื่อนออกไป
มีวิธีต่างๆ มากมายให้คุณโหลด JavaScript ภายนอก โดยไม่ต้องกังวลว่าคุณควรรวมไว้ที่ใด รูปภาพนี้อธิบายวิธีการทำงานของแอตทริบิวต์ทั้งสองนี้และความแตกต่างคืออะไร
แค่นี้สำหรับวันนี้เท่านั้น! ฉันหวังว่าคุณจะสนุกกับสิ่งนี้ และหวังว่ามันจะช่วยให้คุณเข้าใจหัวข้อนี้ ขอบคุณ ที่อ่านข้อความนี้ พบกันใหม่เร็วๆ นี้สำหรับเนื้อหาเพิ่มเติม! 😄
