JavaScript ਲਿੰਕਾਂ ਲਈ ਸਰਵੋਤਮ href ਮੁੱਲ
JavaScript ਕੋਡ ਨੂੰ ਚਲਾਉਣ ਵਾਲੇ ਲਿੰਕ ਬਣਾਉਣ ਵੇਲੇ, ਡਿਵੈਲਪਰ ਅਕਸਰ `href="#"` ਅਤੇ `href="javascript:void(0)"` ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਿਚਕਾਰ ਬਹਿਸ ਕਰਦੇ ਹਨ। ਇਹ ਵਿਧੀਆਂ ਆਮ ਤੌਰ 'ਤੇ ਵਰਤਮਾਨ ਪੰਨੇ ਤੋਂ ਦੂਰ ਨੈਵੀਗੇਟ ਕੀਤੇ ਬਿਨਾਂ JavaScript ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਚਾਲੂ ਕਰਨ ਲਈ ਵਰਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ।
ਇਹ ਲੇਖ ਕਾਰਜਸ਼ੀਲਤਾ, ਪੰਨਾ ਲੋਡ ਸਪੀਡ, ਅਤੇ ਪ੍ਰਮਾਣਿਕਤਾ ਦੇ ਰੂਪ ਵਿੱਚ ਦੋਵਾਂ ਪਹੁੰਚਾਂ ਦੇ ਚੰਗੇ ਅਤੇ ਨੁਕਸਾਨ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ। ਅੰਤਰਾਂ ਨੂੰ ਸਮਝਣਾ ਕੁਸ਼ਲ ਅਤੇ ਅਨੁਕੂਲ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਬਣਾਉਣ ਵੇਲੇ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਵਧੇਰੇ ਸੂਚਿਤ ਫੈਸਲੇ ਲੈਣ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦਾ ਹੈ।
| ਹੁਕਮ | ਵਰਣਨ |
|---|---|
| <script> | ਇੱਕ ਕਲਾਇੰਟ-ਸਾਈਡ ਸਕ੍ਰਿਪਟ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ JavaScript। |
| function myJsFunc() | JavaScript ਵਿੱਚ myJsFunc ਨਾਮਕ ਇੱਕ ਫੰਕਸ਼ਨ ਘੋਸ਼ਿਤ ਕਰਦਾ ਹੈ। |
| alert() | ਨਿਰਧਾਰਤ ਸੁਨੇਹੇ ਦੇ ਨਾਲ ਇੱਕ ਚੇਤਾਵਨੀ ਡਾਇਲਾਗ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ। |
| <a href="#" | ਇੱਕ ਹਾਈਪਰਲਿੰਕ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਮੌਜੂਦਾ ਪੰਨੇ ਦੇ ਸਿਖਰ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਦਾ ਹੈ। |
| onclick | ਵਿਸ਼ੇਸ਼ਤਾ ਜੋ JavaScript ਕੋਡ ਨੂੰ ਲਾਗੂ ਕਰਦੀ ਹੈ ਜਦੋਂ ਇੱਕ ਤੱਤ ਨੂੰ ਕਲਿੱਕ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। |
| href="javascript:void(0)" | ਹਾਈਪਰਲਿੰਕ ਦੀ ਡਿਫੌਲਟ ਕਾਰਵਾਈ ਨੂੰ ਰੋਕਦਾ ਹੈ ਅਤੇ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਕੁਝ ਨਹੀਂ ਕਰਦਾ। |
href ਮੁੱਲਾਂ ਦੇ ਨਾਲ JavaScript ਲਿੰਕਾਂ ਨੂੰ ਸਮਝਣਾ
ਪ੍ਰਦਾਨ ਕੀਤੀਆਂ ਸਕ੍ਰਿਪਟਾਂ ਹਾਈਪਰਲਿੰਕਸ ਬਣਾਉਣ ਲਈ ਦੋ ਆਮ ਤਰੀਕਿਆਂ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਕਰਦੀਆਂ ਹਨ ਜੋ ਕਲਿਕ ਕਰਨ 'ਤੇ JavaScript ਕੋਡ ਨੂੰ ਚਲਾਉਂਦੀਆਂ ਹਨ। ਪਹਿਲੀ ਉਦਾਹਰਨ ਵਰਤਦਾ ਹੈ <a href="#" ਦੇ ਨਾਲ-ਨਾਲ onclick JavaScript ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰਨ ਲਈ ਵਿਸ਼ੇਸ਼ਤਾ myJsFunc(). ਇਹ ਵਿਧੀ ਸਿੱਧੀ ਹੈ ਪਰ ਇਸ ਵਿੱਚ ਇੱਕ ਕਮਜ਼ੋਰੀ ਹੈ: ਇਹ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਫੌਲਟ ਵਿਵਹਾਰ ਦੇ ਕਾਰਨ ਪੰਨੇ ਦੇ ਸਿਖਰ ਤੱਕ ਸਕ੍ਰੌਲ ਕਰਨ ਦਾ ਕਾਰਨ ਬਣਦਾ ਹੈ href="#" ਵਿਸ਼ੇਸ਼ਤਾ. ਇਸਦੇ ਬਾਵਜੂਦ, ਇਹ ਲਿੰਕਾਂ ਵਿੱਚ JavaScript ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਇੱਕ ਸਧਾਰਨ ਅਤੇ ਅਕਸਰ ਵਰਤਿਆ ਜਾਣ ਵਾਲਾ ਤਰੀਕਾ ਹੈ, ਖਾਸ ਤੌਰ 'ਤੇ ਸੰਦਰਭਾਂ ਵਿੱਚ ਜਿੱਥੇ ਘੱਟੋ-ਘੱਟ ਕਾਰਜਸ਼ੀਲਤਾ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
ਦੂਜੀ ਉਦਾਹਰਨ ਵਰਤਦਾ ਹੈ <a href="javascript:void(0)" ਦੇ ਨਾਲ ਜੋੜ ਕੇ onclick ਵਿਸ਼ੇਸ਼ਤਾ. ਇਹ ਪਹੁੰਚ ਹਾਈਪਰਲਿੰਕ ਦੀ ਡਿਫੌਲਟ ਕਾਰਵਾਈ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਰੋਕਦੀ ਹੈ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ ਕਿ ਕੋਈ ਅਣਚਾਹੇ ਸਕ੍ਰੋਲਿੰਗ ਜਾਂ ਨੈਵੀਗੇਸ਼ਨ ਨਹੀਂ ਹੁੰਦੀ ਹੈ। ਦੀ ਵਰਤੋਂ javascript:void(0) ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੈ ਕਿ ਲਿੰਕ ਦੀ ਇੱਕੋ ਇੱਕ ਕਾਰਵਾਈ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਫੰਕਸ਼ਨ ਨੂੰ ਚਲਾਉਣਾ ਹੈ, ਪੰਨੇ ਦੀ ਸਥਿਤੀ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕੀਤੇ ਬਿਨਾਂ। ਇਹ ਵਿਧੀ ਪੰਨੇ ਦੀ ਮੌਜੂਦਾ ਸਕ੍ਰੌਲ ਸਥਿਤੀ ਨੂੰ ਬਣਾਈ ਰੱਖਣ ਅਤੇ ਬੇਲੋੜੇ ਰੀਲੋਡ ਤੋਂ ਬਚਣ ਲਈ ਲਾਭਦਾਇਕ ਹੋ ਸਕਦੀ ਹੈ, ਇਸ ਨੂੰ ਬਹੁਤ ਸਾਰੀਆਂ ਆਧੁਨਿਕ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਇੱਕ ਤਰਜੀਹੀ ਵਿਕਲਪ ਬਣਾਉਂਦੀ ਹੈ।
JavaScript ਕੋਡ ਨੂੰ ਚਲਾਉਣ ਲਈ "href='#'" ਦੀ ਵਰਤੋਂ ਕਰਨਾ
HTML ਅਤੇ JavaScript ਉਦਾਹਰਨ
<!DOCTYPE html><html><head><title>JavaScript Link Example</title><script>function myJsFunc() {alert("myJsFunc");}</script></head><body><a href="#" onclick="myJsFunc();">Run JavaScript Code</a></body></html>
JavaScript ਕੋਡ ਨੂੰ ਚਲਾਉਣ ਲਈ "href='javascript:void(0)'" ਦੀ ਵਰਤੋਂ ਕਰਨਾ
HTML ਅਤੇ JavaScript ਉਦਾਹਰਨ
<!DOCTYPE html><html><head><title>JavaScript Link Example</title><script>function myJsFunc() {alert("myJsFunc");}</script></head><body><a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a></body></html>
JavaScript ਲਿੰਕਾਂ ਲਈ ਸਹੀ href ਮੁੱਲ ਦੀ ਚੋਣ ਕਰਨਾ
ਵਿਚਕਾਰ ਫੈਸਲਾ ਕਰਦੇ ਸਮੇਂ href="#" ਅਤੇ href="javascript:void(0)" JavaScript ਲਿੰਕਾਂ ਲਈ, ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਅਤੇ ਵੈੱਬ ਮਿਆਰਾਂ ਲਈ ਪ੍ਰਭਾਵ ਨੂੰ ਵਿਚਾਰਨਾ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਦ href="#" ਵਿਧੀ ਸੁਵਿਧਾਜਨਕ ਅਤੇ ਵਿਆਪਕ ਤੌਰ 'ਤੇ ਮਾਨਤਾ ਪ੍ਰਾਪਤ ਹੈ, ਪਰ ਇਹ ਪੰਨੇ ਦੇ ਸਿਖਰ 'ਤੇ ਡਿਫਾਲਟ ਹੋ ਕੇ ਉਪਭੋਗਤਾ ਦੀ ਸਕ੍ਰੌਲ ਸਥਿਤੀ ਨੂੰ ਸੰਭਾਵੀ ਤੌਰ 'ਤੇ ਵਿਗਾੜਨ ਦੀ ਕਮੀ ਪੇਸ਼ ਕਰਦੀ ਹੈ। ਇਹ ਖਾਸ ਤੌਰ 'ਤੇ ਲੰਬੇ ਪੰਨਿਆਂ 'ਤੇ ਸਮੱਸਿਆ ਵਾਲਾ ਹੋ ਸਕਦਾ ਹੈ ਜਿੱਥੇ ਉਪਭੋਗਤਾ ਲਿੰਕ ਨੂੰ ਕਲਿੱਕ ਕਰਨ ਤੋਂ ਬਾਅਦ ਆਪਣੀ ਜਗ੍ਹਾ ਗੁਆ ਸਕਦੇ ਹਨ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ href="#" ਅਣਜਾਣੇ ਵਿੱਚ ਨੇਵੀਗੇਸ਼ਨ ਪ੍ਰਵਾਹ ਅਤੇ ਵੈਬਸਾਈਟ ਦੀ ਪਹੁੰਚਯੋਗਤਾ ਵਿੱਚ ਦਖਲ ਦੇ ਸਕਦਾ ਹੈ।
ਦੂਜੇ ਹਥ੍ਥ ਤੇ, href="javascript:void(0)" ਲਿੰਕ ਦੀ ਡਿਫੌਲਟ ਕਾਰਵਾਈ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਰੋਕ ਕੇ ਇੱਕ ਕਲੀਨਰ ਹੱਲ ਪੇਸ਼ ਕਰਦਾ ਹੈ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਲਿੰਕ ਉਪਭੋਗਤਾ ਦੀ ਸਕ੍ਰੋਲ ਸਥਿਤੀ ਨੂੰ ਪ੍ਰਭਾਵਤ ਨਹੀਂ ਕਰਦਾ ਹੈ ਜਾਂ ਅਣਚਾਹੇ ਨੇਵੀਗੇਸ਼ਨ ਵਿਵਹਾਰਾਂ ਨੂੰ ਪੇਸ਼ ਨਹੀਂ ਕਰਦਾ ਹੈ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ javascript:void(0) ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਇਹ ਦਰਸਾਉਂਦੇ ਹੋਏ ਕਿ ਲਿੰਕ ਸਿਰਫ਼ JavaScript ਕੋਡ ਨੂੰ ਚਲਾਉਣ ਲਈ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ, ਆਧੁਨਿਕ ਵੈੱਬ ਵਿਕਾਸ ਅਭਿਆਸਾਂ ਨਾਲ ਬਿਹਤਰ ਢੰਗ ਨਾਲ ਇਕਸਾਰ ਕਰਦਾ ਹੈ। ਇਹ ਪਹੁੰਚ ਕੋਡ ਪੜ੍ਹਨਯੋਗਤਾ ਅਤੇ ਰੱਖ-ਰਖਾਅਯੋਗਤਾ ਵਿੱਚ ਸੁਧਾਰ ਕਰ ਸਕਦੀ ਹੈ, ਜਿਸ ਨਾਲ ਦੂਜੇ ਡਿਵੈਲਪਰਾਂ ਲਈ ਲਿੰਕ ਦੇ ਉਦੇਸ਼ ਨੂੰ ਸਮਝਣਾ ਆਸਾਨ ਹੋ ਜਾਂਦਾ ਹੈ।
JavaScript ਲਿੰਕਾਂ ਵਿੱਚ href ਮੁੱਲਾਂ ਬਾਰੇ ਆਮ ਸਵਾਲ ਅਤੇ ਜਵਾਬ
- ਕੀ ਇਹ href="#" ਇੱਕ ਲਿੰਕ ਵਿੱਚ ਕਰਦੇ ਹੋ?
- href="#" ਇੱਕ ਹਾਈਪਰਲਿੰਕ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਮੌਜੂਦਾ ਪੰਨੇ ਦੇ ਸਿਖਰ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਦਾ ਹੈ।
- ਮੈਨੂੰ ਕਿਉਂ ਵਰਤਣਾ ਚਾਹੀਦਾ ਹੈ href="javascript:void(0)"?
- href="javascript:void(0)" ਹਾਈਪਰਲਿੰਕ ਦੀ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਕਾਰਵਾਈ ਨੂੰ ਰੋਕਦਾ ਹੈ ਅਤੇ ਕਿਸੇ ਵੀ ਅਣਇੱਛਤ ਪੇਜ ਸਕ੍ਰੋਲਿੰਗ ਜਾਂ ਨੈਵੀਗੇਸ਼ਨ ਤੋਂ ਬਚਦਾ ਹੈ।
- ਵਿਚਕਾਰ ਇੱਕ ਪ੍ਰਦਰਸ਼ਨ ਅੰਤਰ ਹੈ href="#" ਅਤੇ href="javascript:void(0)"?
- ਕੋਈ ਮਹੱਤਵਪੂਰਨ ਪ੍ਰਦਰਸ਼ਨ ਅੰਤਰ ਨਹੀਂ ਹੈ, ਪਰ href="javascript:void(0)" ਅਣਚਾਹੇ ਸਕ੍ਰੋਲਿੰਗ ਨੂੰ ਰੋਕ ਕੇ ਇੱਕ ਨਿਰਵਿਘਨ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਪ੍ਰਦਾਨ ਕਰ ਸਕਦਾ ਹੈ।
- ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਕਿਹੜਾ ਤਰੀਕਾ ਬਿਹਤਰ ਹੈ?
- href="javascript:void(0)" ਆਮ ਤੌਰ 'ਤੇ ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਬਿਹਤਰ ਹੁੰਦਾ ਹੈ ਕਿਉਂਕਿ ਇਹ ਉਪਭੋਗਤਾ ਦੇ ਨੈਵੀਗੇਸ਼ਨ ਪ੍ਰਵਾਹ ਵਿੱਚ ਵਿਘਨ ਪਾਉਣ ਤੋਂ ਬਚਦਾ ਹੈ।
- ਕੀ ਮੈਂ ਵਰਤ ਸਕਦਾ ਹਾਂ href="#" ਗੈਰ-ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਲਿੰਕਾਂ ਲਈ?
- ਹਾਂ, ਪਰ ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਇੱਕ ਵੈਧ URL ਜਾਂ ਇੱਕ ਉਚਿਤ JavaScript ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਬਿਹਤਰ ਹੈ।
- ਵਰਤਣ ਦੀਆਂ ਕਮੀਆਂ ਕੀ ਹਨ href="#"?
- ਪ੍ਰਾਇਮਰੀ ਕਮੀ ਇਹ ਹੈ ਕਿ ਇਹ ਪੰਨੇ ਨੂੰ ਸਿਖਰ 'ਤੇ ਸਕ੍ਰੋਲ ਕਰਨ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦਾ ਹੈ, ਜੋ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਵਿਗਾੜ ਸਕਦਾ ਹੈ।
- ਕਿਵੇਂ ਕਰਦਾ ਹੈ onclick ਕੀ ਇਹਨਾਂ href ਮੁੱਲਾਂ ਨਾਲ ਕੰਮ ਕਰਨਾ ਹੈ?
- ਦ onclick ਵਿਸ਼ੇਸ਼ਤਾ JavaScript ਕੋਡ ਨੂੰ ਲਾਗੂ ਕਰਦੀ ਹੈ ਜਦੋਂ ਲਿੰਕ ਨੂੰ ਕਲਿੱਕ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਭਾਵੇਂ ਕਿ ਕੋਈ ਵੀ ਹੋਵੇ href ਮੁੱਲ।
- ਹੈ href="javascript:void(0)" ਇੱਕ ਵੈਧ URL?
- ਹਾਂ, href="javascript:void(0)" ਇੱਕ ਵੈਧ URL ਹੈ ਜੋ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਕੋਈ ਕਾਰਵਾਈ ਨਹੀਂ ਕਰਦਾ ਹੈ।
JavaScript ਲਿੰਕ href ਮੁੱਲਾਂ 'ਤੇ ਅੰਤਿਮ ਵਿਚਾਰ
ਸਿੱਟੇ ਵਜੋਂ, ਜਦੋਂ ਕਿ ਦੋਵੇਂ href="#" ਅਤੇ href="javascript:void(0)" JavaScript ਲਿੰਕ ਬਣਾਉਣ ਲਈ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੁੰਦੇ ਹਨ, ਉਹ ਵੱਖ-ਵੱਖ ਉਦੇਸ਼ਾਂ ਦੀ ਪੂਰਤੀ ਕਰਦੇ ਹਨ। href="#" ਸਿੱਧਾ ਹੈ ਪਰ ਪੰਨੇ ਨੂੰ ਸਕ੍ਰੋਲ ਕਰਕੇ ਉਪਭੋਗਤਾ ਦੇ ਅਨੁਭਵ ਨੂੰ ਵਿਗਾੜ ਸਕਦਾ ਹੈ। ਇਸ ਦੇ ਉਲਟ, href="javascript:void(0)" ਕਿਸੇ ਵੀ ਡਿਫੌਲਟ ਕਾਰਵਾਈ ਨੂੰ ਰੋਕ ਕੇ ਇੱਕ ਨਿਰਵਿਘਨ ਪਰਸਪਰ ਪ੍ਰਭਾਵ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ। ਆਧੁਨਿਕ ਵੈੱਬ ਵਿਕਾਸ ਲਈ, href="javascript:void(0)" ਸਫ਼ੇ ਦੀ ਸਥਿਤੀ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕੀਤੇ ਬਿਨਾਂ JavaScript ਐਗਜ਼ੀਕਿਊਸ਼ਨ ਦੇ ਇਸ ਦੇ ਸਾਫ਼-ਸੁਥਰੇ ਪ੍ਰਬੰਧਨ ਦੇ ਕਾਰਨ ਆਮ ਤੌਰ 'ਤੇ ਤਰਜੀਹੀ ਵਿਕਲਪ ਹੈ।