à²à²¦à³ href=javascript:void(0) à²®à²¾à²¨à³à²¯ HTML?

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್

Liam Lambert

ಮಂಗಳವಾರ, ಜೂನ್ 11, 2024 03:57:18 ಪೂರ್ವಾಹ್ನ

JavaScript ಲಿಂಕ್ ಆಯ್ಕೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

JavaScript ಕೋಡ್ ಅನ್ನು ಮಾತ್ರ ರನ್ ಮಾಡುವ ಲಿಂಕ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವಾಗ, ಸರಿಯಾದ "href" ಮೌಲ್ಯವನ್ನು ಆರಿಸುವುದು ಅತ್ಯಗತ್ಯ. ಈ ನಿರ್ಧಾರವು ಕ್ರಿಯಾತ್ಮಕತೆ, ಪುಟ ಲೋಡ್ ವೇಗ ಮತ್ತು ಮೌಲ್ಯೀಕರಣದ ಉದ್ದೇಶಗಳ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ. ಎರಡು ಸಾಮಾನ್ಯ ವಿಧಾನಗಳು "#" ಅಥವಾ "javascript:void(0)" ಅನ್ನು ಬಳಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ.

ಈ ಲೇಖನದಲ್ಲಿ, ನಿಮ್ಮ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಅಗತ್ಯಗಳಿಗೆ ಯಾವ ವಿಧಾನವು ಉತ್ತಮವಾಗಿದೆ ಎಂಬುದನ್ನು ನಾವು ಪರಿಶೀಲಿಸುತ್ತೇವೆ. ಅವುಗಳ ಪರಿಣಾಮಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ತಿಳುವಳಿಕೆಯುಳ್ಳ ನಿರ್ಧಾರವನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡಲು ನಾವು ಈ ವಿಧಾನಗಳನ್ನು ಹೋಲಿಸುತ್ತೇವೆ.

ಆಜ್ಞೆ	ವಿವರಣೆ
addEventListener	ಇನ್‌ಲೈನ್ JavaScript ಇಲ್ಲದೆಯೇ ಕ್ಲಿಕ್‌ಗಳಂತಹ ಈವೆಂಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಅಂಶಕ್ಕೆ ಈವೆಂಟ್ ಆಲಿಸುವವರನ್ನು ಸೇರಿಸುತ್ತದೆ.
event.preventDefault()	ಈವೆಂಟ್‌ನ ಡೀಫಾಲ್ಟ್ ಕ್ರಿಯೆಯನ್ನು ಸಂಭವಿಸದಂತೆ ತಡೆಯುತ್ತದೆ, ಸಾಮಾನ್ಯವಾಗಿ ಲಿಂಕ್‌ಗಳ ಡೀಫಾಲ್ಟ್ ನಡವಳಿಕೆಯನ್ನು ನಿಲ್ಲಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ.
document.querySelector	ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಸೆಲೆಕ್ಟರ್‌ಗೆ ಹೊಂದಿಕೆಯಾಗುವ ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿ ಮೊದಲ ಅಂಶವನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತದೆ.
DOMContentLoaded	ಆರಂಭಿಕ HTML ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಲೋಡ್ ಮಾಡಿದಾಗ ಮತ್ತು ಪಾರ್ಸ್ ಮಾಡಿದಾಗ ಫೈರ್ ಆಗುವ ಈವೆಂಟ್.
$("#jsLink").click	'jsLink' ID ಯೊಂದಿಗೆ ಅಂಶಕ್ಕೆ ಕ್ಲಿಕ್ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಲಗತ್ತಿಸಲು jQuery ವಿಧಾನ.
$(document).ready	jQuery ವಿಧಾನವು DOM ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಲೋಡ್ ಮಾಡಿದ ನಂತರವೇ ಕಾರ್ಯವು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲಿಂಕ್ ವಿಧಾನಗಳನ್ನು ಅನ್ವೇಷಿಸಲಾಗುತ್ತಿದೆ

ಮೊದಲ ಸ್ಕ್ರಿಪ್ಟ್ ಉದಾಹರಣೆಯಲ್ಲಿ, ಲಿಂಕ್ ಅನ್ನು ಬಳಸುತ್ತದೆ href="#" a ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಲ್ಪಟ್ಟ ಗುಣಲಕ್ಷಣ addEventListener ವಿಧಾನ. ಈ ಸ್ಕ್ರಿಪ್ಟ್ ಕಾಯುತ್ತಿದೆ DOMContentLoaded DOM ಸಂಪೂರ್ಣವಾಗಿ ಲೋಡ್ ಆಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಈವೆಂಟ್. ನಂತರ, ಇದು ಲಿಂಕ್ ಅಂಶವನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತದೆ document.querySelector ಮತ್ತು ಬಳಸಿಕೊಂಡು ಕ್ಲಿಕ್ ಈವೆಂಟ್ ಕೇಳುಗನನ್ನು ಸೇರಿಸುತ್ತದೆ addEventListener. ದಿ event.preventDefault() ವಿಧಾನವು ಡೀಫಾಲ್ಟ್ ಲಿಂಕ್ ನಡವಳಿಕೆಯನ್ನು ತಡೆಯುತ್ತದೆ, ಅನುಮತಿಸುತ್ತದೆ myJsFunc ಯಾವುದೇ ಅನಪೇಕ್ಷಿತ ಅಡ್ಡ ಪರಿಣಾಮಗಳಿಲ್ಲದೆ ಕರೆಯಲಾಗುವ ಕಾರ್ಯ.

ಎರಡನೇ ಉದಾಹರಣೆಯಲ್ಲಿ, ಲಿಂಕ್ ಅನ್ನು ಬಳಸುತ್ತದೆ href="javascript:void(0)" ಗುಣಲಕ್ಷಣ, ಇನ್ಲೈನ್ನೊಂದಿಗೆ onclick ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ನೇರವಾಗಿ ಕರೆ ಮಾಡುತ್ತಾನೆ myJsFunc ಕಾರ್ಯ. ಮೂರನೇ ಸ್ಕ್ರಿಪ್ಟ್ ಲಿಂಕ್ ಕ್ಲಿಕ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು jQuery ಅನ್ನು ಬಳಸುವುದನ್ನು ತೋರಿಸುತ್ತದೆ. ಇಲ್ಲಿ, ಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಡಾಕ್ಯುಮೆಂಟ್ ಸಿದ್ಧವಾಗಲು ಕಾಯುತ್ತದೆ $(document).ready. ಇದು ನಂತರ ಲಿಂಕ್‌ಗೆ ಕ್ಲಿಕ್ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಲಗತ್ತಿಸುತ್ತದೆ $("#jsLink").click, ಮತ್ತು ಮತ್ತೆ, ಡೀಫಾಲ್ಟ್ ಲಿಂಕ್ ನಡವಳಿಕೆಯನ್ನು ತಡೆಯುತ್ತದೆ event.preventDefault() ಕರೆ ಮಾಡುವ ಮೊದಲು myJsFunc ಕಾರ್ಯ.

ಈವೆಂಟ್ ಕೇಳುಗರೊಂದಿಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲಿಂಕ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್

ಈವೆಂಟ್ ಕೇಳುಗರೊಂದಿಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್

// Function to be called on link click
function myJsFunc() {
    alert("myJsFunc");
}

// Adding event listener to the link
document.addEventListener("DOMContentLoaded", function() {
    var link = document.querySelector("#jsLink");
    link.addEventListener("click", function(event) {
        event.preventDefault(); // Prevent default link behavior
        myJsFunc(); // Call the function
    });
});

<a href="#" id="jsLink">Run JavaScript Code</a>

href="javascript:void(0)" ಜೊತೆಗೆ JavaScript ಲಿಂಕ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇನ್‌ಲೈನ್ ನಿರ್ವಹಣೆ

// Function to be called on link click
function myJsFunc() {
    alert("myJsFunc");
}

// Inline event handler in HTML
<a href="javascript:void(0)" onclick="myJsFunc()">Run JavaScript Code</a>

jQuery ಜೊತೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲಿಂಕ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್

jQuery ಜೊತೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್

// Ensure jQuery is loaded before this script
$(document).ready(function() {
    // Function to be called on link click
    function myJsFunc() {
        alert("myJsFunc");
    }

    // jQuery click event handler
    $("#jsLink").click(function(event) {
        event.preventDefault(); // Prevent default link behavior
        myJsFunc(); // Call the function
    });
});

<a href="#" id="jsLink">Run JavaScript Code</a>

JavaScript ಲಿಂಕ್‌ಗಳಲ್ಲಿ href ಮೌಲ್ಯಗಳ ಅತ್ಯುತ್ತಮ ಬಳಕೆ

ನಡುವೆ ನಿರ್ಧರಿಸುವಾಗ href="#" ಮತ್ತು href="javascript:void(0)" ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲಿಂಕ್‌ಗಳಿಗಾಗಿ, ಪ್ರವೇಶಿಸುವಿಕೆ ಮತ್ತು ಸರ್ಚ್ ಎಂಜಿನ್ ಆಪ್ಟಿಮೈಸೇಶನ್ (ಎಸ್‌ಇಒ) ಮೇಲಿನ ಪರಿಣಾಮವನ್ನು ಒಬ್ಬರು ಪರಿಗಣಿಸಬೇಕು. ಬಳಸಿ href="#" ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವಿಫಲವಾದಲ್ಲಿ ಕೆಲವೊಮ್ಮೆ ಪುಟವನ್ನು ಮೇಲಕ್ಕೆ ಸ್ಕ್ರಾಲ್ ಮಾಡಲು ಕಾರಣವಾಗಬಹುದು, ಇದು ಬಳಕೆದಾರರಿಗೆ ಕಿರಿಕಿರಿ ಉಂಟುಮಾಡಬಹುದು. ಆದಾಗ್ಯೂ, ಇದು ಮಾನ್ಯವಾದ URL ರಚನೆಯಾಗಿ ಉಳಿದಿರುವುದರಿಂದ ಇದು ಹೆಚ್ಚು ಶಬ್ದಾರ್ಥವಾಗಿ ಸರಿಯಾಗಿದೆ.

ಮತ್ತೊಂದೆಡೆ, href="javascript:void(0)" ಅಂತಹ ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡುವ ಸಾಧ್ಯತೆ ಕಡಿಮೆ, ಏಕೆಂದರೆ ಅದು ಸ್ಪಷ್ಟವಾಗಿ ಏನನ್ನೂ ಮಾಡುವುದಿಲ್ಲ. ಈ ವಿಧಾನವು ಸ್ವಚ್ಛವಾಗಿರುತ್ತದೆ ಮತ್ತು ಯಾವುದೇ ಅನಪೇಕ್ಷಿತ ನಡವಳಿಕೆಯನ್ನು ತಡೆಯಬಹುದು. ಆದಾಗ್ಯೂ, ಕೆಲವು ವ್ಯಾಲಿಡೇಟರ್‌ಗಳು ಇದನ್ನು href ನ ತಪ್ಪಾದ ಬಳಕೆ ಎಂದು ಫ್ಲ್ಯಾಗ್ ಮಾಡಬಹುದು. ಆದ್ದರಿಂದ, ಈ ಎರಡರ ನಡುವೆ ಆಯ್ಕೆಯು ನಿರ್ದಿಷ್ಟ ಅಗತ್ಯತೆಗಳು ಮತ್ತು ಯೋಜನೆಯ ಸಂದರ್ಭವನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ.

JavaScript href ಮೌಲ್ಯಗಳ ಬಗ್ಗೆ ಪದೇ ಪದೇ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು

ಉದ್ದೇಶವೇನು href="#" ಲಿಂಕ್‌ಗಳಲ್ಲಿ?
ಹೊಸ ಪುಟಕ್ಕೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡದ ಲಿಂಕ್ ಅನ್ನು ರಚಿಸಲು ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ, ಬದಲಿಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಾರ್ಯಗಳನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ.
ಏಕೆ ಬಳಸಬಹುದು 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)" ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲಿಂಕ್‌ಗಳಿಗಾಗಿ, ಪ್ರತಿಯೊಂದೂ ಅದರ ಸಾಧಕ-ಬಾಧಕಗಳನ್ನು ಹೊಂದಿದೆ ಎಂಬುದು ಸ್ಪಷ್ಟವಾಗಿದೆ. ಬಳಸಿ href="#" ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವಿಫಲವಾದರೆ ಅನಗತ್ಯ ಪುಟ ಸ್ಕ್ರೋಲಿಂಗ್‌ಗೆ ಕಾರಣವಾಗಬಹುದು href="javascript:void(0)" ಯಾವುದೇ ಡೀಫಾಲ್ಟ್ ಕ್ರಿಯೆಯನ್ನು ತಡೆಯುತ್ತದೆ ಆದರೆ ವ್ಯಾಲಿಡೇಟರ್‌ಗಳಿಂದ ಫ್ಲ್ಯಾಗ್ ಮಾಡಬಹುದು. ಉತ್ತಮ ಆಯ್ಕೆಯು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ನ ನಿರ್ದಿಷ್ಟ ಅಗತ್ಯತೆಗಳು ಮತ್ತು ಮೌಲ್ಯೀಕರಣ ಮತ್ತು ಪ್ರವೇಶದ ಪ್ರಾಮುಖ್ಯತೆಯನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ. ಈ ಆಯ್ಕೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ಡೆವಲಪರ್‌ಗಳು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿ ಮತ್ತು ಬಳಕೆದಾರ ಸ್ನೇಹಿ ಪರಿಹಾರಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಬಹುದು.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲಿಂಕ್‌ಗಳಿಗಾಗಿ ಅತ್ಯುತ್ತಮ href ಮೌಲ್ಯವನ್ನು ಆರಿಸುವುದು