JavaScript ਲਿੰਕ ਵਿਕਲਪਾਂ ਨੂੰ ਸਮਝਣਾ
ਜਦੋਂ ਉਹ ਲਿੰਕ ਬਣਾਉਂਦੇ ਹਨ ਜੋ ਸਿਰਫ਼ JavaScript ਕੋਡ ਨੂੰ ਚਲਾਉਂਦੇ ਹਨ, ਤਾਂ ਸਹੀ "href" ਮੁੱਲ ਦੀ ਚੋਣ ਕਰਨਾ ਜ਼ਰੂਰੀ ਹੈ। ਇਹ ਫੈਸਲਾ ਕਾਰਜਕੁਸ਼ਲਤਾ, ਪੰਨਾ ਲੋਡ ਦੀ ਗਤੀ, ਅਤੇ ਪ੍ਰਮਾਣਿਕਤਾ ਦੇ ਉਦੇਸ਼ਾਂ ਨੂੰ ਪ੍ਰਭਾਵਤ ਕਰਦਾ ਹੈ। ਦੋ ਆਮ ਤਰੀਕਿਆਂ ਵਿੱਚ "#" ਜਾਂ "javascript:void(0)" ਦੀ ਵਰਤੋਂ ਸ਼ਾਮਲ ਹੈ।
ਇਸ ਲੇਖ ਵਿੱਚ, ਅਸੀਂ ਜਾਂਚ ਕਰਾਂਗੇ ਕਿ ਤੁਹਾਡੀਆਂ ਵੈੱਬ ਵਿਕਾਸ ਲੋੜਾਂ ਲਈ ਕਿਹੜਾ ਤਰੀਕਾ ਬਿਹਤਰ ਹੈ। ਅਸੀਂ ਇਹਨਾਂ ਦੇ ਪ੍ਰਭਾਵਾਂ ਨੂੰ ਸਮਝਣ ਅਤੇ ਇੱਕ ਸੂਚਿਤ ਫੈਸਲਾ ਲੈਣ ਵਿੱਚ ਤੁਹਾਡੀ ਮਦਦ ਕਰਨ ਲਈ ਇਹਨਾਂ ਪਹੁੰਚਾਂ ਦੀ ਤੁਲਨਾ ਕਰਾਂਗੇ।
| ਹੁਕਮ | ਵਰਣਨ |
|---|---|
| addEventListener | ਇਨਲਾਈਨ JavaScript ਤੋਂ ਬਿਨਾਂ ਕਲਿੱਕਾਂ ਵਰਗੇ ਇਵੈਂਟਾਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਇੱਕ ਇਵੈਂਟ ਲਿਸਨਰ ਨੂੰ ਨਿਸ਼ਚਿਤ ਤੱਤ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ। |
| event.preventDefault() | ਕਿਸੇ ਘਟਨਾ ਦੀ ਡਿਫੌਲਟ ਕਾਰਵਾਈ ਨੂੰ ਵਾਪਰਨ ਤੋਂ ਰੋਕਦਾ ਹੈ, ਆਮ ਤੌਰ 'ਤੇ ਲਿੰਕਾਂ ਦੇ ਡਿਫੌਲਟ ਵਿਵਹਾਰ ਨੂੰ ਰੋਕਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। |
| document.querySelector | ਦਸਤਾਵੇਜ਼ ਦੇ ਅੰਦਰ ਪਹਿਲਾ ਤੱਤ ਚੁਣਦਾ ਹੈ ਜੋ ਨਿਰਧਾਰਤ ਚੋਣਕਾਰ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ। |
| DOMContentLoaded | ਇੱਕ ਇਵੈਂਟ ਜੋ ਉਦੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਸ਼ੁਰੂਆਤੀ HTML ਦਸਤਾਵੇਜ਼ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲੋਡ ਅਤੇ ਪਾਰਸ ਹੋ ਜਾਂਦਾ ਹੈ। |
| $("#jsLink").click | ਆਈ.ਡੀ. 'jsLink' ਦੇ ਨਾਲ ਐਲੀਮੈਂਟ ਨਾਲ ਕਲਿੱਕ ਇਵੈਂਟ ਹੈਂਡਲਰ ਨੂੰ ਨੱਥੀ ਕਰਨ ਲਈ jQuery ਵਿਧੀ। |
| $(document).ready | jQuery ਵਿਧੀ ਜੋ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ ਕਿ ਫੰਕਸ਼ਨ ਕੇਵਲ DOM ਦੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲੋਡ ਹੋਣ ਤੋਂ ਬਾਅਦ ਚੱਲਦਾ ਹੈ। |
JavaScript ਲਿੰਕ ਵਿਧੀਆਂ ਦੀ ਪੜਚੋਲ ਕਰਨਾ
ਪਹਿਲੀ ਸਕ੍ਰਿਪਟ ਉਦਾਹਰਨ ਵਿੱਚ, ਲਿੰਕ ਇੱਕ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ href="#" ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਇੱਕ ਨਾਲ ਮਿਲਾ ਕੇ addEventListener ਢੰਗ. ਇਹ ਸਕ੍ਰਿਪਟ ਦੀ ਉਡੀਕ ਕਰ ਰਹੀ ਹੈ DOMContentLoaded DOM ਪੂਰੀ ਤਰ੍ਹਾਂ ਲੋਡ ਹੋਣ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਇਵੈਂਟ। ਫਿਰ, ਇਹ ਇਸ ਨਾਲ ਲਿੰਕ ਤੱਤ ਦੀ ਚੋਣ ਕਰਦਾ ਹੈ document.querySelector ਅਤੇ ਵਰਤਦੇ ਹੋਏ ਇੱਕ ਕਲਿਕ ਇਵੈਂਟ ਲਿਸਨਰ ਜੋੜਦਾ ਹੈ addEventListener. ਦ event.preventDefault() ਵਿਧੀ ਡਿਫਾਲਟ ਲਿੰਕ ਵਿਵਹਾਰ ਨੂੰ ਰੋਕਦੀ ਹੈ, ਜਿਸਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ myJsFunc ਫੰਕਸ਼ਨ ਨੂੰ ਬਿਨਾਂ ਕਿਸੇ ਅਣਇੱਛਤ ਮਾੜੇ ਪ੍ਰਭਾਵਾਂ ਦੇ ਬੁਲਾਇਆ ਜਾਵੇਗਾ।
ਦੂਜੀ ਉਦਾਹਰਣ ਵਿੱਚ, ਲਿੰਕ ਇੱਕ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ href="javascript:void(0)" ਗੁਣ, ਇੱਕ ਇਨਲਾਈਨ ਨਾਲ onclick ਇਵੈਂਟ ਹੈਂਡਲਰ ਸਿੱਧੇ ਕਾਲ ਕਰ ਰਿਹਾ ਹੈ myJsFunc ਫੰਕਸ਼ਨ। ਤੀਜੀ ਸਕ੍ਰਿਪਟ ਲਿੰਕ ਕਲਿੱਕ ਨੂੰ ਸੰਭਾਲਣ ਲਈ jQuery ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਦਰਸਾਉਂਦੀ ਹੈ। ਇੱਥੇ, ਸਕ੍ਰਿਪਟ ਦਸਤਾਵੇਜ਼ ਦੇ ਤਿਆਰ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰਦੀ ਹੈ $(document).ready. ਇਹ ਫਿਰ ਲਿੰਕ ਨਾਲ ਇੱਕ ਕਲਿੱਕ ਇਵੈਂਟ ਹੈਂਡਲਰ ਨੂੰ ਜੋੜਦਾ ਹੈ $("#jsLink").click, ਅਤੇ ਦੁਬਾਰਾ, ਨਾਲ ਡਿਫਾਲਟ ਲਿੰਕ ਵਿਵਹਾਰ ਨੂੰ ਰੋਕਦਾ ਹੈ event.preventDefault() ਨੂੰ ਕਾਲ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ myJsFunc ਫੰਕਸ਼ਨ.
ਇਵੈਂਟ ਸੁਣਨ ਵਾਲਿਆਂ ਨਾਲ JavaScript ਲਿੰਕ ਹੈਂਡਲਿੰਗ
ਇਵੈਂਟ ਸੁਣਨ ਵਾਲਿਆਂ ਨਾਲ ਜਾਵਾ ਸਕ੍ਰਿਪਟ
// Function to be called on link clickfunction myJsFunc() {alert("myJsFunc");}// Adding event listener to the linkdocument.addEventListener("DOMContentLoaded", function() {var link = document.querySelector("#jsLink");link.addEventListener("click", function(event) {event.preventDefault(); // Prevent default link behaviormyJsFunc(); // Call the function});});<a href="#" id="jsLink">Run JavaScript Code</a>
href="javascript:void(0)" ਨਾਲ JavaScript ਲਿੰਕ ਹੈਂਡਲਿੰਗ
JavaScript ਇਨਲਾਈਨ ਹੈਂਡਲਿੰਗ
// Function to be called on link clickfunction myJsFunc() {alert("myJsFunc");}// Inline event handler in HTML<a href="javascript:void(0)" onclick="myJsFunc()">Run JavaScript Code</a>
jQuery ਨਾਲ JavaScript ਲਿੰਕ ਹੈਂਡਲਿੰਗ
jQuery ਨਾਲ JavaScript
// Ensure jQuery is loaded before this script$(document).ready(function() {// Function to be called on link clickfunction myJsFunc() {alert("myJsFunc");}// jQuery click event handler$("#jsLink").click(function(event) {event.preventDefault(); // Prevent default link behaviormyJsFunc(); // Call the function});});<a href="#" id="jsLink">Run JavaScript Code</a>
JavaScript ਲਿੰਕਾਂ ਵਿੱਚ href ਮੁੱਲਾਂ ਦੀ ਸਰਵੋਤਮ ਵਰਤੋਂ
ਵਿਚਕਾਰ ਫੈਸਲਾ ਕਰਦੇ ਸਮੇਂ href="#" ਅਤੇ href="javascript:void(0)" JavaScript ਲਿੰਕਾਂ ਲਈ, ਕਿਸੇ ਨੂੰ ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ ਖੋਜ ਇੰਜਨ ਔਪਟੀਮਾਈਜੇਸ਼ਨ (SEO) 'ਤੇ ਪ੍ਰਭਾਵ ਨੂੰ ਵਿਚਾਰਨਾ ਚਾਹੀਦਾ ਹੈ। ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ href="#" ਜੇ JavaScript ਫੇਲ ਹੋ ਜਾਂਦੀ ਹੈ, ਤਾਂ ਕਈ ਵਾਰ ਪੰਨੇ ਨੂੰ ਸਿਖਰ 'ਤੇ ਸਕ੍ਰੋਲ ਕਰਨ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦਾ ਹੈ, ਜੋ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਪਰੇਸ਼ਾਨ ਹੋ ਸਕਦਾ ਹੈ। ਹਾਲਾਂਕਿ, ਇਹ ਵਧੇਰੇ ਅਰਥਪੂਰਨ ਤੌਰ 'ਤੇ ਸਹੀ ਹੈ ਕਿਉਂਕਿ ਇਹ ਇੱਕ ਵੈਧ URL ਬਣਤਰ ਬਣਿਆ ਹੋਇਆ ਹੈ।
ਦੂਜੇ ਹਥ੍ਥ ਤੇ, href="javascript:void(0)" ਅਜਿਹੇ ਮੁੱਦਿਆਂ ਦਾ ਕਾਰਨ ਬਣਨ ਦੀ ਸੰਭਾਵਨਾ ਘੱਟ ਹੈ, ਕਿਉਂਕਿ ਇਹ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਕੁਝ ਨਹੀਂ ਕਰਦਾ ਹੈ। ਇਹ ਪਹੁੰਚ ਸਾਫ਼ ਹੋ ਸਕਦੀ ਹੈ ਅਤੇ ਕਿਸੇ ਅਣਇੱਛਤ ਵਿਵਹਾਰ ਨੂੰ ਰੋਕ ਸਕਦੀ ਹੈ। ਹਾਲਾਂਕਿ, ਕੁਝ ਵੈਲੀਡੇਟਰ ਇਸ ਨੂੰ href ਦੀ ਗਲਤ ਵਰਤੋਂ ਵਜੋਂ ਫਲੈਗ ਕਰ ਸਕਦੇ ਹਨ। ਇਸ ਲਈ, ਇਹਨਾਂ ਦੋਵਾਂ ਵਿਚਕਾਰ ਚੋਣ ਕਰਨਾ ਪ੍ਰੋਜੈਕਟ ਦੀਆਂ ਖਾਸ ਲੋੜਾਂ ਅਤੇ ਸੰਦਰਭ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ।
JavaScript href ਮੁੱਲਾਂ ਬਾਰੇ ਅਕਸਰ ਪੁੱਛੇ ਜਾਂਦੇ ਸਵਾਲ
- ਦਾ ਮਕਸਦ ਕੀ ਹੈ href="#" ਲਿੰਕਾਂ ਵਿੱਚ?
- ਇਹ ਇੱਕ ਲਿੰਕ ਬਣਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਜੋ ਇੱਕ ਨਵੇਂ ਪੰਨੇ 'ਤੇ ਨੈਵੀਗੇਟ ਨਹੀਂ ਕਰਦਾ, ਪਰ ਇਸ ਦੀ ਬਜਾਏ JavaScript ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਚਾਲੂ ਕਰਦਾ ਹੈ।
- ਕਿਉਂ ਵਰਤ ਸਕਦਾ ਹੈ href="javascript:void(0)" ਨੂੰ ਤਰਜੀਹ ਦਿੱਤੀ ਜਾਵੇ?
- ਇਹ ਡਿਫੌਲਟ ਲਿੰਕ ਵਿਵਹਾਰ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਰੋਕਦਾ ਹੈ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਕੋਈ ਅਣਚਾਹੇ ਸਕ੍ਰੌਲਿੰਗ ਜਾਂ ਨੈਵੀਗੇਸ਼ਨ ਨਾ ਹੋਵੇ।
- ਵਰਤਣ ਦੀਆਂ ਕਮੀਆਂ ਕੀ ਹਨ href="#"?
- ਇਹ ਪੰਨੇ ਨੂੰ ਸਿਖਰ 'ਤੇ ਸਕ੍ਰੋਲ ਕਰਨ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦਾ ਹੈ ਜੇਕਰ JavaScript ਸਹੀ ਢੰਗ ਨਾਲ ਚਲਾਉਣ ਵਿੱਚ ਅਸਫਲ ਰਹਿੰਦੀ ਹੈ।
- ਹੈ href="javascript:void(0)" ਵੈਧ HTML?
- ਹਾਲਾਂਕਿ ਇਹ ਜ਼ਿਆਦਾਤਰ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਕੰਮ ਕਰਦਾ ਹੈ, ਕੁਝ ਵੈਲੀਡੇਟਰ ਇਸ ਨੂੰ ਗਲਤ ਵਰਤੋਂ ਵਜੋਂ ਫਲੈਗ ਕਰ ਸਕਦੇ ਹਨ।
- ਕਿਵੇਂ ਕਰਦਾ ਹੈ event.preventDefault() ਇਹਨਾਂ ਲਿੰਕਾਂ ਵਿੱਚ ਮਦਦ ਕਰੋ?
- ਇਹ ਅਣਚਾਹੇ ਨੈਵੀਗੇਸ਼ਨ ਜਾਂ ਸਕ੍ਰੋਲਿੰਗ ਨੂੰ ਰੋਕਦੇ ਹੋਏ, ਇਵੈਂਟ ਦੀ ਡਿਫੌਲਟ ਕਾਰਵਾਈ ਨੂੰ ਰੋਕਦਾ ਹੈ।
- ਕੀ ਅਸੀਂ ਵਰਤ ਸਕਦੇ ਹਾਂ addEventListener ਇਨਲਾਈਨ ਈਵੈਂਟ ਹੈਂਡਲਰ ਦੀ ਬਜਾਏ?
- ਹਾਂ, ਵਰਤ ਕੇ addEventListener HTML ਨੂੰ ਸਾਫ਼ ਅਤੇ ਵੱਖਰੀ JavaScript ਕਾਰਜਸ਼ੀਲਤਾ ਰੱਖਣ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦਾ ਹੈ।
- jQuery ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਕੀ ਫਾਇਦਾ ਹੈ $(document).ready?
- ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਕੋਡ ਸਿਰਫ਼ DOM ਦੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲੋਡ ਹੋਣ ਤੋਂ ਬਾਅਦ ਚੱਲਦਾ ਹੈ, ਗਲਤੀਆਂ ਨੂੰ ਰੋਕਦਾ ਹੈ।
- ਕੀ ਸਾਨੂੰ JavaScript ਲਿੰਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਪਹੁੰਚਯੋਗਤਾ 'ਤੇ ਵਿਚਾਰ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ?
- ਹਾਂ, ਹਮੇਸ਼ਾ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਲਿੰਕ ਪਹੁੰਚਯੋਗ ਰਹਿਣ ਅਤੇ ਜੇਕਰ JavaScript ਅਯੋਗ ਹੈ ਤਾਂ ਫਾਲਬੈਕ ਪ੍ਰਦਾਨ ਕਰੋ।
href ਮੁੱਲਾਂ 'ਤੇ ਅੰਤਮ ਵਿਚਾਰ
ਦੋਵਾਂ ਦੀ ਜਾਂਚ ਕਰਨ ਤੋਂ ਬਾਅਦ href="#" ਅਤੇ href="javascript:void(0)" JavaScript ਲਿੰਕਾਂ ਲਈ, ਇਹ ਸਪੱਸ਼ਟ ਹੈ ਕਿ ਹਰੇਕ ਦੇ ਆਪਣੇ ਫਾਇਦੇ ਅਤੇ ਨੁਕਸਾਨ ਹਨ। ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ href="#" ਜੇਕਰ JavaScript ਫੇਲ ਹੋ ਜਾਂਦੀ ਹੈ ਤਾਂ ਅਣਚਾਹੇ ਪੇਜ ਸਕ੍ਰੋਲਿੰਗ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦੀ ਹੈ, ਜਦੋਂ ਕਿ href="javascript:void(0)" ਕਿਸੇ ਵੀ ਡਿਫੌਲਟ ਕਾਰਵਾਈ ਨੂੰ ਰੋਕਦਾ ਹੈ ਪਰ ਵੈਲੀਡੇਟਰਾਂ ਦੁਆਰਾ ਫਲੈਗ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਸਭ ਤੋਂ ਵਧੀਆ ਵਿਕਲਪ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਦੀਆਂ ਖਾਸ ਲੋੜਾਂ ਅਤੇ ਪ੍ਰਮਾਣਿਕਤਾ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਦੇ ਮਹੱਤਵ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ। ਇਹਨਾਂ ਵਿਕਲਪਾਂ ਨੂੰ ਸਮਝ ਕੇ, ਡਿਵੈਲਪਰ ਵਧੇਰੇ ਕੁਸ਼ਲ ਅਤੇ ਉਪਭੋਗਤਾ-ਅਨੁਕੂਲ ਹੱਲ ਲਾਗੂ ਕਰ ਸਕਦੇ ਹਨ।