JScript Katana

ทำความเข้าใจ void 0 และ javascript:void(0) ใน JavaScript: การใช้งานอย่างปลอดภัย, ตัวอย่าง, และทางเลือกสมัยใหม่

ฟังก์ชันอรรถประโยชน์อื่น ๆ
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. บทนำ

JavaScript เป็นภาษาการเขียนโปรแกรมที่สำคัญในงานพัฒนาเว็บสมัยใหม่ โดยเฉพาะอย่างยิ่งเมื่อควบคุมพฤติกรรมของลิงก์หรือจัดการค่าที่ไม่ได้กำหนดไว้ การใช้นิพจน์เช่น “void 0” และ “javascript:void(0)” เป็นเรื่องที่พบบ่อย นิพจน์เหล่านี้อาจทำให้ผู้เริ่มต้นสับสน แต่การใช้ให้ถูกต้องสามารถปรับปรุงความอ่านง่ายและการทำงานได้ บทความนี้จะอธิบายความหมายและกรณีการใช้ “void 0” และ “javascript:void(0)” พร้อมแนะนำแนวปฏิบัติที่ดีที่สุดในสภาพแวดล้อมการพัฒนาสมัยใหม่ โดยการอ่านบทความนี้ คุณจะได้เรียนรู้:

  • “void 0” คืออะไรและบทบาทของมัน
  • ตัวอย่างการใช้งานและวัตถุประสงค์ของ “javascript:void(0)”
  • วิธีการทำงานในยุคใหม่โดยใช้ทางเลือกที่ปลอดภัยกว่า

ต่อจากนี้ เราจะเดินผ่านพื้นฐานและตัวอย่างการใช้งานจริงของ “void 0” ใน JavaScript

2. void 0 คืออะไร?

บทบาทพื้นฐานของ void 0

“void 0” เขียนได้ดังนี้:

console.log(void 0); // undefined

โค้ดนี้จะส่งค่ากลับเป็น “undefined” เสมอ

ความแตกต่างจาก undefined

ใน JavaScript, “undefined” เป็นตัวแปรและอาจถูกเขียนทับโดยไม่ได้ตั้งใจ ตัวอย่างเช่น:

var undefined = "test";
console.log(undefined); // "test"

หาก “undefined” ถูกเขียนทับ มันจะสูญเสียความหมายเดิม เพื่อป้องกันเรื่องนี้ “void 0” จึงถูกใช้เป็นวิธีที่รับประกันว่าจะคืนค่า “undefined”

ตัวอย่างการใช้งาน

ด้านล่างเป็นตัวอย่างของการคืนค่า “undefined” อย่างชัดเจนจากฟังก์ชัน

function example() {
  return void 0;
}

console.log(example()); // undefined

กรณีการใช้จริงของ void 0

  1. ตรวจสอบค่าที่ยังไม่ได้กำหนด
    var value = void 0;
console.log(value === undefined); // true
  1. ควบคุมลิงก์อย่างปลอดภัย
    <a href="javascript:void(0)">Link</a>

ในตัวอย่างนี้ การคลิกลิงก์จะไม่ทำให้ไปยังหน้าอื่น

3. ความหมายและการใช้ javascript:void(0)

javascript:void(0) คืออะไร?

“javascript:void(0)” ใช้ตัวดำเนินการ “void” ของ JavaScript เพื่อคืนค่า “undefined”

<a href="javascript:void(0)">A link that does not navigate</a>

การคลิกโค้ดนี้จะไม่ทำให้หน้าเปลี่ยนหรือเกิดการกระทำใด ๆ

ตัวอย่างการใช้

  1. เรียกใช้ JavaScript เมื่อคลิกปุ่ม
    <a href="javascript:void(0)" onclick="alert('Clicked!')">Button</a>
  1. การตรวจสอบความถูกต้องของฟอร์ม
    <a href="javascript:void(0)" onclick="validateForm()">Submit</a>

ในที่นี้ การเปลี่ยนหน้า จะถูกป้องกันจนกว่าการตรวจสอบฟอร์มจะเสร็จสมบูรณ์

4. ปัญหาและความเสี่ยงของ javascript:void(0)

ผลกระทบเชิงลบต่อ SEO

เครื่องมือค้นหาอาจไม่สามารถครอว์ลิงก์ที่ใช้สคีม javascript: ได้อย่างถูกต้อง สำหรับเว็บไซต์ที่ใส่ใจ SEO ควรหลีกเลี่ยงการใช้วิธีนี้

ลดการเข้าถึงได้

โปรแกรมอ่านหน้าจออาจถือ “javascript:void(0)” เป็นลิงก์ปกติ ซึ่งอาจทำให้พฤติกรรมไม่ชัดเจนสำหรับผู้ใช้ที่พึ่งพาเทคโนโลยีช่วยเหลือ

ปัญหาเมื่อ JavaScript ถูกปิด

หาก JavaScript ถูกปิด “javascript:void(0)” จะไม่ทำงานเลย ส่งผลให้ประสบการณ์ผู้ใช้ลดลง

5. ทางเลือกแทน javascript:void(0)

1. ใช้แท็ก <button>

การใช้องค์ประกอบปุ่มช่วยรักษาโครงสร้าง HTML ที่ถูกต้องพร้อมให้ควบคุมเต็มที่ด้วย JavaScript

<button type="button" onclick="alert('Clicked!')">Click</button>

2. ผสานแท็ก <a> กับ event.preventDefault()

<a href="#" onclick="event.preventDefault(); alert('Clicked!')">Click</a>

วิธีนี้จะป้องกันการนำทางของหน้าโดยใช้ JavaScript ในขณะที่ยังคง href="#" เพื่อความเข้ากันได้กับ SEO และการเข้าถึง

6. สรุปของ javascript:void(0)

ทบทวนประเด็นสำคัญ

  • “javascript:void(0)” ปิดการทำงานลิงก์เริ่มต้นและทำให้ทำงานเฉพาะเหตุการณ์ JavaScript เท่านั้น
  • อย่างไรก็ตาม มันมีข้อเสียด้าน SEO และการเข้าถึง ทำให้ไม่เหมาะกับการพัฒนาสมัยใหม่
  • ทางเลือกที่ปลอดภัยและยืดหยุ่นมากขึ้นได้แก่การใช้แท็ก <button> หรือ event.preventDefault()

7. แนวปฏิบัติที่แนะนำ

1. รักษาโครงสร้าง HTML เชิงความหมาย

Use meaningful and semantically appropriate HTML tags (e.g., <button>, <form>) to ensure proper SEO and accessibility.

2. จัดการการควบคุมเหตุการณ์ใน JavaScript

Use event listeners and preventDefault() to handle interactions in a flexible and modern way.

3. ย้ายออกจากโค้ดเก่า

If existing code uses “javascript:void(0),” consider gradually replacing it with modern alternatives.

8. สรุป

สรุปโดยรวม

  • “void 0” จะคืนค่าเป็น “undefined” เสมอ ช่วยป้องกันการเขียนทับค่าตัวแปร undefined ระดับโลกโดยไม่ได้ตั้งใจ
  • “javascript:void(0)” ปิดการทำงานของการนำทางลิงก์และใช้เพื่อควบคุมการทำงานของ JavaScript แต่ทำให้เกิดปัญหา SEO และการเข้าถึง
  • การพัฒนาเว็บสมัยใหม่แนะนำให้ใช้แท็ก HTML เชิงความหมายและ preventDefault() เพื่อพฤติกรรมที่ปลอดภัยและสอดคล้องกับมาตรฐาน

คำแนะนำสุดท้าย

While “void 0” and “javascript:void(0)” have historically been useful techniques, they are not always ideal choices in modern JavaScript development.
For new projects, it is recommended to adopt updated approaches that prioritize SEO, accessibility, and maintainability.
Build a solid understanding of these concepts and apply them effectively in real-world development.

広告