ஜாவாஸ்கிரிப்ட் மூலம் கிளிக் செய்வதை எப்படி உருவகப்படுத்துவது?
ஜாவாஸ்கிரிப்டில் கிளிக் சிமுலேஷனைப் பயன்படுத்த பின்வரும் அணுகுமுறைகளை செயல்படுத்தலாம்:
அணுகுமுறை 1: ஆன்க்ளிக் நிகழ்வைப் பயன்படுத்தி ஜாவாஸ்கிரிப்ட் மூலம் கிளிக் செய்வதை உருவகப்படுத்தவும்
ஒரு ' கிளிக் செய்யவும் பொத்தானை அழுத்தும்போது நிகழ்வு நிகழ்கிறது. பொத்தானைக் கிளிக் செய்வதன் மூலம் ஒரு செயல்பாட்டைத் தொடங்க இந்த அணுகுமுறையைப் பயன்படுத்தலாம் மற்றும் ' எண்ணிக்கை கிளிக் செய்யவும் ”ஒவ்வொரு முறையும் பட்டனை கிளிக் செய்யவும்.
பக்க குறிப்பு: ஒரு ' கிளிக் செய்யவும் ” நிகழ்வை ஒரு குறிப்பிட்ட செயல்பாட்டுடன் இணைப்பதன் மூலம் எளிமையாகப் பயன்படுத்தலாம்.
உதாரணமாக
பின்வரும் குறியீடு துணுக்கைச் செல்லவும்:
< மையம் >
< h3 பாணி = 'பின்னணி நிறம்: வெளிர் நீலம்;' > உருவகப்படுத்தப்பட்டது என்பதைக் கிளிக் செய்யவும் < இடைவெளி வர்க்கம் = 'எண்ணிக்கை' > இடைவெளி > முறை h3 >
< பொத்தான் ஐடி = 'btn1' கிளிக் செய்யவும் = 'countClick()' > என்னை கிளிக் செய்யவும் ! பொத்தானை >
மையம் >
- '' உடன் குறிப்பிட்ட தலைப்பைச் சேர்க்கவும் 'டேக் அதிகரிக்க' எண்ணிக்கை 'கிளிக்குகள்.
- அடுத்த கட்டத்தில், இணைக்கப்பட்ட '' உடன் ஒரு பொத்தானை உருவாக்கவும் கிளிக் செய்யவும் ” நிகழ்வு கவுண்ட் கிளிக்() செயல்பாட்டிற்கு திசைதிருப்பப்படுகிறது, இது பொத்தானைக் கிளிக் செய்யும் போது அணுகப்படும்.
இப்போது, பின்வரும் ஜாவாஸ்கிரிப்ட் குறியீடு வரிகள் வழியாக செல்லலாம்:
< கையால் எழுதப்பட்ட தாள் >
கிளிக்குகளை அனுமதிக்கவும் = 0 ;
செயல்பாடு countClick ( ) {
கிளிக்குகள் = கிளிக்குகள் + 1 ;
ஆவணம். querySelector ( '. எண்ணிக்கை' ) . உரை உள்ளடக்கம் = கிளிக்குகள் ;
}
கையால் எழுதப்பட்ட தாள் >
குறியீட்டின் மேலே உள்ள js பகுதியில்:
- இங்கே, முதலில் கிளிக்களை துவக்கவும் ' 0 ”.
- அதன் பிறகு, '' என்ற செயல்பாட்டை அறிவிக்கவும். கவுண்ட் கிளிக்() ”. அதன் வரையறையில், துவக்கப்பட்டதை அதிகரிக்கவும் ' கிளிக்குகள் 'உடன்' 1 ”. இதன் விளைவாக ஒவ்வொரு முறையும் பட்டனை கிளிக் செய்யும் போது எண்ணிக்கை அதிகரிக்கும்.
- இறுதியாக, அணுகவும் ' இடைவெளி 'உறுப்பைப் பயன்படுத்தி' document.querySelector() ”முறை. மேலும், விண்ணப்பிக்கவும் ' உரை உள்ளடக்கம் ஸ்பான் உறுப்புக்கு முன்னர் விவாதிக்கப்பட்ட அதிகரித்த கிளிக் எண்ணிக்கையை ஒதுக்குவதற்கான சொத்து.
வெளியீடு பின்வருமாறு இருக்கும்:
ஒவ்வொரு கிளிக்கிலும் அதிகரிக்கப்பட்ட டைமரின் செயல்பாட்டை மேலே உள்ள வெளியீட்டில் காணலாம்.
அணுகுமுறை 2: addEventListener() முறை மூலம் ஜாவாஸ்கிரிப்ட் மூலம் ஒரு கிளிக்கை உருவகப்படுத்தவும்
' addEventListener() ” முறை ஒரு நிகழ்வு கையாளுதலை ஒரு உறுப்புக்கு ஒதுக்குகிறது. ஒரு குறிப்பிட்ட நிகழ்வை ஒரு உறுப்புடன் இணைத்து, நிகழ்வின் தூண்டுதலின் மீது பயனரை எச்சரிப்பதன் மூலம் இந்த முறையைச் செயல்படுத்தலாம்.
தொடரியல்
உறுப்பு. addEventListener ( நிகழ்வு, செயல்பாடு )கொடுக்கப்பட்ட தொடரியல்:
- ' நிகழ்வு ” என்பது நிகழ்வின் பெயரைக் குறிக்கிறது.
- ' செயல்பாடு ” நிகழ்வு நிகழும்போது செயல்படுத்த வேண்டிய செயல்பாட்டைச் சுட்டிக்காட்டுகிறது.
உதாரணமாக
கீழே கொடுக்கப்பட்டுள்ள ஆர்ப்பாட்டம் கூறப்பட்ட கருத்தை விளக்குகிறது:
< மையம் >< உடல் >< ஒரு href = '#' ஐடி = 'இணைப்பு' > இணைப்பை கிளிக் செய்யவும் அ >
உடல் > மையம் >
< கையால் எழுதப்பட்ட தாள் >
ஆடு இருக்கும் = ஆவணம். getElementById ( 'இணைப்பு' ) ;
பெறு. addEventListener ( 'கிளிக்' , ( ) => எச்சரிக்கை ( 'சிமுலேட்டட் என்பதைக் கிளிக் செய்க!' ) )
கையால் எழுதப்பட்ட தாள் >
மேலே உள்ள குறியீட்டில்:
- முதலில், ஒரு ' நங்கூரம் 'குறிப்பிட்ட இணைப்பைச் சேர்க்க குறிச்சொல்
- குறியீட்டின் ஜாவாஸ்கிரிப்ட் பகுதியில், '' ஐப் பயன்படுத்தி உருவாக்கப்பட்ட இணைப்பை அணுகவும் document.getElementById() ”முறை.
- இறுதியாக, விண்ணப்பிக்கவும் ' addEventListener() ” அணுகப்பட்ட முறை ” இணைப்பு ”. ' கிளிக் செய்யவும் ” நிகழ்வு இந்த வழக்கில் இணைக்கப்பட்டுள்ளது, இது உருவாக்கப்பட்ட இணைப்பைக் கிளிக் செய்வதன் மூலம் பயனரை எச்சரிக்கும்.
வெளியீடு
அணுகுமுறை 3: கிளிக்() முறையைப் பயன்படுத்தி ஜாவாஸ்கிரிப்ட் மூலம் கிளிக் செய்வதை உருவகப்படுத்தவும்
' கிளிக்() ” முறையானது ஒரு உறுப்பு மீது மவுஸ்-கிளிக் உருவகப்படுத்துதலைச் செய்கிறது. பெயர் குறிப்பிடுவது போல் இணைக்கப்பட்ட பொத்தான்களுக்கு நேரடியாக ஒரு கிளிக் உருவகப்படுத்த இந்த முறையைப் பயன்படுத்தலாம்.
தொடரியல்
உறுப்பு. கிளிக் செய்யவும் ( )கொடுக்கப்பட்ட தொடரியல்:
- ' உறுப்பு ” கிளிக் செயல்படுத்தப்படும் உறுப்புக்கு சுட்டிக்காட்டுகிறது.
உதாரணமாக
பின்வரும் குறியீடு துணுக்கு கூறப்பட்ட கருத்தை விளக்குகிறது:
< மையம் >< உடல் >< h3 > நீ கண்டுபிடித்துவிட்டயா இது பக்கம் உதவியாக இருக்கும் ? h3 >
< பொத்தானை கிளிக் செய்யவும் = 'simulateClick()' ஐடி = 'உருவகப்படுத்து' > ஆம் பொத்தானை >
< பொத்தானை கிளிக் செய்யவும் = 'simulateClick()' ஐடி = 'உருவகப்படுத்து' > இல்லை பொத்தானை >
< h3 ஐடி = 'தலை' பாணி = 'பின்னணி நிறம்: வெளிர் பச்சை;' > h3 >
உடல் > மையம் >
- முதலில், அதில் கூறப்பட்டுள்ள தலைப்பைச் சேர்க்கவும். <சென்டர்> ” குறிச்சொல்.
- அதன் பிறகு, குறிப்பிட்ட ஐடியுடன் இரண்டு வெவ்வேறு பட்டன்களை உருவாக்கவும்.
- மேலும், இணைக்கவும் ' கிளிக் செய்யவும் ” நிகழ்வு simulateClick() செயல்பாட்டை செயல்படுத்துகிறது.
- அடுத்த கட்டத்தில், குறிப்பிடப்பட்ட '' உடன் மற்றொரு தலைப்பைச் சேர்க்கவும் ஐடி 'உடனடியாக பயனருக்கு அறிவிப்பதற்காக' கிளிக் செய்யவும் ” என்பது உருவகப்படுத்தப்படுகிறது.
இப்போது, கீழே கொடுக்கப்பட்டுள்ள ஜாவாஸ்கிரிப்ட் வரிகளுக்குச் செல்லவும்:
< கையால் எழுதப்பட்ட தாள் >செயல்பாடு simulateClick ( ) {
ஆவணம். getElementById ( 'உருவகப்படுத்து' ) . கிளிக் செய்யவும் ( )
பெறட்டும் = ஆவணம். getElementById ( 'தலை' )
பெறு. உள் உரை = 'உருவகப்படுத்தப்பட்டதைக் கிளிக் செய்க!'
}
கையால் எழுதப்பட்ட தாள் >
- ஒரு செயல்பாட்டை வரையறுக்கவும் ' சிமுலேட் கிளிக்() ”.
- இங்கே, '' ஐப் பயன்படுத்தி உருவாக்கப்பட்ட பொத்தான்களை அணுகவும் document.getElementById() 'முறை மற்றும் விண்ணப்பிக்கவும்' கிளிக்() ” முறை அவர்களுக்கு.
- இப்போது, இதேபோல், ஒதுக்கப்பட்ட தலைப்பை அணுகி, ' உள் உரை ” கூறப்பட்ட செய்தியை உருவகப்படுத்தப்பட்ட கிளிக்கில் தலைப்பாகக் காண்பிக்கும் பண்பு.
வெளியீடு
மேலே உள்ள வெளியீட்டில், உருவாக்கப்பட்ட இரண்டு பொத்தான்களும் கிளிக் செய்வதை உருவகப்படுத்துகின்றன என்பது தெளிவாகிறது.
இந்த வலைப்பதிவு JavaScript ஐப் பயன்படுத்தி கிளிக் சிமுலேஷனை எவ்வாறு பயன்படுத்துவது என்பதை விளக்குகிறது.
முடிவுரை
ஒரு ' கிளிக் செய்யவும் 'நிகழ்வு,' addEventListener() 'முறை, அல்லது' கிளிக்() ” முறையை ஜாவாஸ்கிரிப்ட் மூலம் ஒரு கிளிக் உருவகப்படுத்த பயன்படுத்தலாம். ஒரு ' கிளிக் செய்யவும் ஒவ்வொரு முறையும் கவுண்டரின் வடிவத்தில் பட்டனைக் கிளிக் செய்யும் போது ஒரு கிளிக்கை உருவகப்படுத்த நிகழ்வைப் பயன்படுத்தலாம். ' addEventListener() ஒரு நிகழ்வை இணைப்பில் இணைக்கவும், கிளிக் சிமுலேஷனில் பயனருக்கு அறிவிக்கவும் முறை பயன்படுத்தப்படலாம். ' கிளிக்() ” முறை உருவாக்கப்பட்ட பொத்தான்களுக்குப் பயன்படுத்தப்படலாம் மற்றும் ஒவ்வொரு பொத்தான்களுக்கும் தேவையான செயல்பாட்டைச் செய்கிறது. ஜாவாஸ்கிரிப்ட்டில் கிளிக் சிமுலேஷனை எவ்வாறு பயன்படுத்துவது என்பதை இந்த பதிவு விளக்குகிறது.