ஜாவாஸ்கிரிப்ட் இணைப்பு விருப்பங்களைப் புரிந்துகொள்வது
ஜாவாஸ்கிரிப்ட் குறியீட்டை மட்டுமே இயக்கும் இணைப்புகளை உருவாக்கும்போது, சரியான "href" மதிப்பைத் தேர்ந்தெடுப்பது அவசியம். இந்த முடிவு செயல்பாடு, பக்க ஏற்றுதல் வேகம் மற்றும் சரிபார்ப்பு நோக்கங்களை பாதிக்கிறது. இரண்டு பொதுவான முறைகள் "#" அல்லது "javascript:void(0)" ஆகியவற்றைப் பயன்படுத்துகின்றன.
இந்த கட்டுரையில், உங்கள் வலை அபிவிருத்தி தேவைகளுக்கு எந்த முறை சிறந்தது என்பதை நாங்கள் ஆராய்வோம். இந்த அணுகுமுறைகளை ஒப்பிட்டு, அவற்றின் விளைவுகளைப் புரிந்துகொள்ளவும், தகவலறிந்த முடிவை எடுக்கவும் உங்களுக்கு உதவுவோம்.
| கட்டளை | விளக்கம் |
|---|---|
| addEventListener | இன்லைன் ஜாவாஸ்கிரிப்ட் இல்லாமல் கிளிக்குகள் போன்ற நிகழ்வுகளைக் கையாள, குறிப்பிட்ட உறுப்புடன் நிகழ்வு கேட்பவரைச் சேர்க்கிறது. |
| event.preventDefault() | நிகழ்வின் இயல்புநிலை செயலைத் தடுக்கிறது, பொதுவாக இணைப்புகளின் இயல்புநிலை நடத்தையை நிறுத்தப் பயன்படுகிறது. |
| document.querySelector | குறிப்பிட்ட தேர்வாளருடன் பொருந்தக்கூடிய ஆவணத்தில் உள்ள முதல் உறுப்பைத் தேர்ந்தெடுக்கிறது. |
| DOMContentLoaded | ஆரம்ப HTML ஆவணம் முழுவதுமாக ஏற்றப்பட்டு பாகுபடுத்தப்படும் போது செயல்படும் நிகழ்வு. |
| $("#jsLink").click | 'jsLink' ஐடியுடன் உறுப்புடன் கிளிக் நிகழ்வு ஹேண்ட்லரை இணைக்க jQuery முறை. |
| $(document).ready | jQuery முறையானது DOM முழுமையாக ஏற்றப்பட்ட பின்னரே செயல்பாடு இயங்கும். |
ஜாவாஸ்கிரிப்ட் இணைப்பு முறைகளை ஆராய்தல்
முதல் ஸ்கிரிப்ட் எடுத்துக்காட்டில், இணைப்பு ஒரு பயன்படுத்துகிறது பண்புடன் இணைந்தது முறை. இந்த ஸ்கிரிப்ட் காத்திருக்கிறது DOM முழுமையாக ஏற்றப்படுவதை உறுதிசெய்யும் நிகழ்வு. பின்னர், அது இணைப்பு உறுப்பைத் தேர்ந்தெடுக்கிறது document.querySelector மற்றும் கிளிக் நிகழ்வு கேட்பவரைப் பயன்படுத்தி சேர்க்கிறது . தி முறை இயல்புநிலை இணைப்பு நடத்தையைத் தடுக்கிறது, அனுமதிக்கிறது எந்தவொரு எதிர்பாராத பக்க விளைவுகளும் இல்லாமல் அழைக்கப்படும் செயல்பாடு.
இரண்டாவது எடுத்துக்காட்டில், இணைப்பு ஒரு பயன்படுத்துகிறது பண்பு, இன்லைனுடன் நிகழ்வு நடத்துபவர் நேரடியாக அழைக்கிறார் செயல்பாடு. மூன்றாவது ஸ்கிரிப்ட் இணைப்பைக் கிளிக் செய்வதைக் கையாள jQuery ஐப் பயன்படுத்துகிறது. இங்கே, ஸ்கிரிப்ட் ஆவணம் தயாராக இருக்கும் வரை காத்திருக்கிறது $(document).ready. அதன்பின் அது ஒரு கிளிக் நிகழ்வு ஹேண்ட்லரை இணைப்பில் இணைக்கிறது , மற்றும் மீண்டும், உடன் இயல்புநிலை இணைப்பு நடத்தை தடுக்கிறது அழைப்பதற்கு முன் செயல்பாடு.
நிகழ்வு கேட்பவர்களுடன் ஜாவாஸ்கிரிப்ட் இணைப்பு கையாளுதல்
நிகழ்வு கேட்பவர்களுடன் ஜாவாஸ்கிரிப்ட்
// 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 இணைப்பு கையாளுதல்
ஜாவாஸ்கிரிப்ட் இன்லைன் கையாளுதல்
// 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 உடன் ஜாவாஸ்கிரிப்ட் இணைப்பு கையாளுதல்
jQuery உடன் ஜாவாஸ்கிரிப்ட்
// 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>
ஜாவாஸ்கிரிப்ட் இணைப்புகளில் href மதிப்புகளின் உகந்த பயன்பாடு
இடையே முடிவு செய்யும் போது மற்றும் ஜாவாஸ்கிரிப்ட் இணைப்புகளுக்கு, அணுகல் மற்றும் தேடுபொறி உகப்பாக்கம் (எஸ்சிஓ) மீதான தாக்கத்தை ஒருவர் கருத்தில் கொள்ள வேண்டும். பயன்படுத்தி ஜாவாஸ்கிரிப்ட் தோல்வியுற்றால், சில சமயங்களில் பக்கத்தை மேலே ஸ்க்ரோல் செய்யலாம், இது பயனர்களுக்கு இடையூறாக இருக்கலாம். இருப்பினும், இது சரியான URL கட்டமைப்பாக இருப்பதால் இது மிகவும் சொற்பொருள் சரியாக உள்ளது.
மறுபுறம், வெளிப்படையாக எதுவும் செய்யாததால், இது போன்ற சிக்கல்களை ஏற்படுத்தும் வாய்ப்பு குறைவு. இந்த அணுகுமுறை தூய்மையானது மற்றும் திட்டமிடப்படாத நடத்தையைத் தடுக்கும். இருப்பினும், சில மதிப்பீட்டாளர்கள் அதை href இன் தவறான பயன்பாடு எனக் கொடியிடலாம். எனவே, இந்த இரண்டிற்கும் இடையே தேர்ந்தெடுப்பது திட்டத்தின் குறிப்பிட்ட தேவைகள் மற்றும் சூழலைப் பொறுத்தது.
- நோக்கம் என்ன இணைப்புகளில்?
- புதிய பக்கத்திற்கு செல்லாத இணைப்பை உருவாக்க இது பயன்படுகிறது, மாறாக JavaScript செயல்பாடுகளை தூண்டுகிறது.
- ஏன் பயன்படுத்தலாம் விரும்பப்படுமா?
- இது இயல்புநிலை இணைப்பு நடத்தையை முழுவதுமாக தடுக்கிறது, தேவையற்ற ஸ்க்ரோலிங் அல்லது வழிசெலுத்தலை உறுதி செய்கிறது.
- பயன்படுத்துவதில் என்ன குறைபாடுகள் உள்ளன ?
- ஜாவாஸ்கிரிப்ட் சரியாகச் செயல்படத் தவறினால், பக்கத்தை மேலே உருட்டும்.
- இருக்கிறது சரியான HTML?
- பெரும்பாலான உலாவிகளில் இது வேலை செய்யும் போது, சில மதிப்பீட்டாளர்கள் அதை முறையற்ற பயன்பாடு எனக் கொடியிடலாம்.
- எப்படி செய்கிறது இந்த இணைப்புகளுக்கு உதவவா?
- இது நிகழ்வின் இயல்புநிலை செயலை நிறுத்துகிறது, தேவையற்ற வழிசெலுத்தல் அல்லது ஸ்க்ரோலிங் தடுக்கிறது.
- நாம் பயன்படுத்தலாமா இன்லைன் நிகழ்வு நடத்துபவர்களுக்குப் பதிலாக?
- ஆம், பயன்படுத்தி HTML ஐ சுத்தமாக வைத்திருக்கவும் ஜாவாஸ்கிரிப்ட் செயல்பாட்டை தனித்தனியாகவும் வைத்திருக்க உதவும்.
- jQuery ஐப் பயன்படுத்துவதால் என்ன பயன் ?
- DOM முழுமையாக ஏற்றப்பட்ட பின்னரே குறியீடு இயங்குவதை இது உறுதிசெய்கிறது, பிழைகளைத் தடுக்கிறது.
- ஜாவாஸ்கிரிப்ட் இணைப்புகளைப் பயன்படுத்தும் போது அணுகலைக் கருத்தில் கொள்ள வேண்டுமா?
- ஆம், ஜாவாஸ்கிரிப்ட் முடக்கப்பட்டிருந்தால், இணைப்புகள் அணுகக்கூடியதாக இருப்பதை எப்போதும் உறுதிசெய்யவும்.
இரண்டையும் ஆராய்ந்த பிறகு மற்றும் ஜாவாஸ்கிரிப்ட் இணைப்புகளுக்கு, ஒவ்வொன்றும் அதன் நன்மை தீமைகள் உள்ளன என்பது தெளிவாகிறது. பயன்படுத்தி ஜாவாஸ்கிரிப்ட் தோல்வியுற்றால், தேவையற்ற பக்க ஸ்க்ரோலிங் ஏற்படலாம் href="javascript:void(0)" எந்தவொரு இயல்புநிலை செயலையும் தடுக்கிறது ஆனால் மதிப்பீட்டாளர்களால் கொடியிடப்படலாம். சிறந்த தேர்வு உங்கள் திட்டத்தின் குறிப்பிட்ட தேவைகள் மற்றும் சரிபார்ப்பு மற்றும் அணுகல்தன்மை ஆகியவற்றின் முக்கியத்துவத்தைப் பொறுத்தது. இந்த விருப்பங்களைப் புரிந்துகொள்வதன் மூலம், டெவலப்பர்கள் மிகவும் திறமையான மற்றும் பயனர் நட்பு தீர்வுகளை செயல்படுத்த முடியும்.