วิธีใช้ HTML <script> Element

เรียนรู้วิธีใช้ HTML <script> ธาตุ

HTML <script> ใช้เพื่อเพิ่มโค้ด JavaScript ลงในเอกสารของคุณ

ด้วย <script> คุณสามารถเพิ่ม JavaScript ได้สองวิธี:

คุณสามารถฝังโค้ด JavaScript แบบอินไลน์ได้โดยตรงในเอกสารของคุณ
หรือนำเข้า/โหลดไฟล์ JavaScript ภายนอก (.js )

ดังนั้นจึงเป็นเรื่องของการโหลด JavaScript ภายในเทียบกับภายนอก

มาดูทั้งสองตัวเลือกกัน

จาวาสคริปต์แบบอินไลน์

ในการฝังโค้ด JavaScript ในบรรทัด คุณต้องกำหนดแท็กสคริปต์เปิดและปิด และใส่โค้ด JS ไว้ภายใน:

<script>
  // Add your JavaScript code here
</script>

<script> สามารถใส่องค์ประกอบลงใน <head> . ของเอกสารของคุณได้ องค์ประกอบ:

<!DOCTYPE html>
<html>
  <head>
    <script>
      // Add your JavaScript code here
    </script>
  </head>
  <body>
    ...
  </body>
</html>

หรือนอก <head> ก่อนปิด </body> แท็กองค์ประกอบ:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    ...
    <script>
      // Add your JavaScript code here
    </script>
  </body>
</html>

แล้วอะไรคือความแตกต่างระหว่างการวาง JavaScript ใน <head> เทียบกับ <body> ?

ความแตกต่างคือ ประสิทธิภาพ และมันสามารถเป็น ใหญ่ ความแตกต่าง

โดยค่าเริ่มต้น เอกสาร HTML และองค์ประกอบจะถูกแยกวิเคราะห์ (อ่าน) และแสดงผลจากบนลงล่าง เมื่อคุณโหลดและรันโค้ด JavaScript ใน <head> , การเรนเดอร์ของ ส่วนที่เหลือ ขององค์ประกอบหน้าของคุณ (เนื้อหาที่มองเห็นได้ของคุณ) จะถูกบล็อกจนกว่าสคริปต์จะถูกแยกวิเคราะห์และเรียกใช้โค้ดเสร็จสิ้น

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

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

เอาล่ะ ตอนนี้คุณรู้วิธีฝังโค้ด JavaScript แบบอินไลน์แล้วและวิธีดำเนินการอย่างมีประสิทธิภาพสูงสุด

ตอนนี้ มาดูการนำเข้าโค้ด JavaScript ภายนอก และความแตกต่างจาก JavaScript ภายใน (อินไลน์)

นำเข้าไฟล์ JavaScript ภายนอก

ในการโหลดโค้ด JavaScript ภายนอก คุณต้องนำเข้าผ่านไฟล์ที่มี .js การขยาย. เช่น. main.js .

มันทำงานดังนี้:

<script src="main.js"></script>

และเช่นเดียวกับ inline JavaScript คุณสามารถใส่ไว้ใน <head> . ของคุณ องค์ประกอบ:

<!DOCTYPE html>
<html>
  <head>
    <script src="main.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

หรือก่อนปิดแท็กองค์ประกอบเนื้อหา </body> :

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    ...
    <script src="main.js"></script>
  </body>
</html>

แอตทริบิวต์การเลื่อน

ด้วย Javascript ที่ทันสมัย มีประสิทธิภาพมากยิ่งขึ้น วิธีการเรียกใช้สคริปต์ภายนอกของคุณมากกว่าการโหลดที่ด้านล่างของหน้า

เราสามารถใช้ defer แอตทริบิวต์บน <script> องค์ประกอบ:

<script defer src="main.js"></script>

แล้วใส่ไว้ใน <head> . ของคุณ องค์ประกอบ:

<!DOCTYPE html>
<html>
  <head>
    <script defer src="main.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

ด้วย defer . นี้ โค้ด JavaScript ของคุณถูกโหลด (ไม่ได้ดำเนินการ) ในขณะที่ กำลังแยกวิเคราะห์โค้ด HTML แต่จะไม่ทำงานจนกว่า หลัง แยกวิเคราะห์ HTML เสร็จแล้ว

หากสคริปต์ภายนอกของคุณอยู่ด้านล่าง (ก่อน </body> ) สิ่งนี้จะเกิดขึ้น:

ขั้นแรก แยกวิเคราะห์โค้ด HTML
จากนั้นก็แสดงผล HTML
จากนั้นก็โหลดโค้ด JavaScript
จากนั้นก็รันโค้ด JavaScript

ด้วย defer เรากำลัง กำลังโหลด รหัส JavaScript ในขณะที่ HTML กำลังแยกวิเคราะห์ (แบบคู่ขนาน) ดังนั้นทันทีที่ HTML ของคุณเสร็จสิ้น โค้ด JavaScript จะถูกโหลดแล้วและพร้อมที่จะดำเนินการ

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

ไม่เป็นไรถ้าคุณไม่เข้าใจdefer .นี้ แนวคิดตอนนี้ เมื่อคุณมีประสบการณ์จริงกับมันแล้ว

สิ่งสำคัญที่สุดคือต้องรู้ว่า โดยทั่วไป วิธีที่มีประสิทธิภาพที่สุดในการรันโค้ด JavaScript บนเว็บไซต์ของคุณ

นานาน่ารู้:

คุณใช้ได้เฉพาะ defer แอตทริบิวต์ในไฟล์ JavaScript ภายนอก — ไม่อยู่ในโค้ด JavaScript แบบอินไลน์
เมื่อนำเข้าสคริปต์ภายนอก คุณต้องระบุพาธต้นทางที่สัมพันธ์กัน ดังนั้นหาก JavaScript main.js ของคุณ ไฟล์อยู่ในโฟลเดอร์ชื่อ js ภายในไดเรกทอรีโครงการรากของคุณ คุณนำเข้าเช่นนี้ src="/js/main.js"
บางครั้ง คุณจะเห็น <script> องค์ประกอบที่มีตัวระบุภาษาโดยใช้ type แอตทริบิวต์ <script type="text/javascript"> ใน HTML5 (เวอร์ชันล่าสุด) คุณไม่จำเป็นต้องทำเช่นนี้อีกต่อไป เนื่องจากมีการตั้งค่าเริ่มต้นไว้แล้ว