ஜாவாஸ்கிரிப்டில் உள் HTML பற்றி நீங்கள் தெரிந்து கொள்ள வேண்டியது எல்லாம்

ஜாவாஸ்கிரிப்டில் உள்ள உள் HTML மிகவும் எளிமையான அம்சமாகும், மேலும் இது உருவாக்கப்படும் வலைப்பக்கங்களுக்கு மிகவும் ஆற்றல்மிக்க மற்றும் பல்துறை அம்சத்தை வழங்க பரவலாகப் பயன்படுத்தப்படுகிறது.

ஜாவாஸ்கிரிப்ட் மிகவும் பரவலாக பயன்படுத்தப்படும் நிரலாக்க மொழிகளில் ஒன்றாகும். தளங்களில் அதன் பல்துறைத்திறனுக்காக இது மிகவும் பிரபலமானது. இல் வெவ்வேறு பண்புகள் உள்ளன இது ஒரு மாறும் வலைத்தளத்தை உருவாக்குவதற்கான உங்கள் வேலையை எளிதாக்குகிறது. இந்த கட்டுரையில், ஜாவாஸ்கிரிப்டில் உள்ள உள் HTML ஐ பின்வரும் வரிசையில் விவாதிப்போம்:

ஜாவாஸ்கிரிப்ட் அறிமுகம்

ஜாவாஸ்கிரிப்ட் ஒரு கிளையன்ட் பக்க நிரலாக்க மொழியாகவும் சேவையக பக்க நிரலாக்க மொழியாகவும் பயன்படுத்தப்படுகிறது. இயக்க பயன்படுகிறது கிளையன்ட் பக்கத்திலும் எந்தவொரு பயன்பாட்டின் சேவையக பக்கத்திலும். ஒரு முனையை பல இடங்களில் Node.js என்றும் குறிப்பிடலாம்.



ஜாவாஸ்கிரிப்ட் - ஜாவாஸ்கிரிப்டில் உள் HTML - எடுரேகா

ஜாவாஸ்கிரிப்ட் பல செயல்பாடுகளை எளிதில் செய்ய பல முறைகளை வழங்குகிறது. இதுதான் ஜாவாஸ்கிரிப்ட் மிகவும் பிரபலமான நிரலாக்க மொழிகளில் ஒன்றாகும், மேலும் இது பல வகையான தயாரிப்பு மேம்பாடுகளிலும் பரவலாகப் பயன்படுத்தப்படுகிறது.

ஜாவாஸ்கிரிப்டில் உள் HTML

உள் ஜாவாஸ்கிரிப்டில் உள்ள சொத்து மிகவும் எளிமையான அம்சங்களில் ஒன்றாகும், மேலும் இது உருவாக்கப்படும் வலைப்பக்கங்களுக்கு மிகவும் ஆற்றல்மிக்க மற்றும் பல்துறை அம்சங்களை வழங்க பரவலாகப் பயன்படுத்தப்படுகிறது.

உள் HTML ஐ எளிமையாக விளக்க முயற்சித்தால், உள் HTML ஆல் செய்யப்படும் பணி முழு பக்கத்தையும் புதுப்பிக்காமல் பக்க உள்ளடக்கத்தை ஏற்றுவதாகும். இது தரவு பயன்பாடுகளையும் பக்க சுமைக்கு பின்னால் உள்ள நேரத்தையும் சேமிக்கிறது மற்றும் பெற மிகவும் எளிதானது. இது பயனருக்கு மிக விரைவான மற்றும் பதிலளிக்கக்கூடிய உணர்வை அளிக்கிறது, இதனால் பயனர் அனுபவத்தை மிகச் சிறந்ததாக ஆக்குகிறது.

இது கொஞ்சம் கடினமாகத் தோன்றலாம், ஆனால் ஒரு உதாரணத்தின் உதவியுடன் இதைப் புரிந்துகொள்ள முயற்சிப்போம்.

உதாரணமாக:

 

உள் HTML உரையை மாற்ற இங்கே கிளிக் செய்க.

myFunction () {document.getElementById ('பத்தி 1'). உள் HTML = 'பத்தி மாற்றப்பட்டது!' }

இங்கே மேலே உள்ள குறியீட்டில், பத்தி குறிச்சொல்லில் அதன் ஐடி பத்தி 1 ஆகும்.

அங்கே ஒரு செயல்பாடு மைஃபங்க்ஷன் () என்று பெயரிடப்பட்டது, இது 'உள் HTML உரையை மாற்ற இங்கே கிளிக் செய்க' என்ற உரையின் கிளிக் மூலம் ரத்து செய்யப்படும்.கிளிக்கில் செயல்பாடு ரத்து செய்யப்படும்போது, ​​getElementById (“பத்தி 1”) என்று சொல்லும் செயல்பாடு செயல்படுத்தப்படுகிறது, இது ஐடியுடன் ஒரு உறுப்பு ஒரு டெமோவாக தேர்ந்தெடுக்கப்பட வேண்டும் என்று கூறியது.

மேலும், உள் HTML செயல்பாடு எங்களிடம் உள்ளது, அதாவது என்ன செய்ய வேண்டும் என்பதை ஒன்லிக்கிற்குப் பிறகு வெறுமனே குறிக்கிறது. இங்கே மேலே உள்ள எடுத்துக்காட்டில், இது வெறுமனே “பத்தி மாற்றப்பட்டது”.

மேலே உள்ள குறியீட்டின் ஆரம்ப வெளியீடு கீழே.

வரிசை குறியீடு c ++ ஐ இணைக்கவும்

கிளிக் செய்த பிறகு மாற்றப்பட்ட வெளியீடு கீழே.

ஆர்டர் செய்யப்பட்ட அல்லது வரிசைப்படுத்தப்படாத பட்டியலுடன் உள் HTML

ஆர்டர் செய்யப்பட்ட அல்லது வரிசைப்படுத்தப்படாத பட்டியலுடன் உள் HTML இன் பயன்பாட்டைக் காட்ட ஒரு எடுத்துக்காட்டு கீழே.

உதாரணமாக:

 
  • வணக்கம்
  • மீண்டும் வணக்கம்

உல் உறுப்பின் உள்ளடக்கத்தைப் பெற கீழே உள்ள பொத்தானைக் கிளிக் செய்க.

HelloFunction () function var x = document.getElementById ('myList') செயல்பட முயற்சிக்கவும். உள் HTML ஆவணம் .getElementById ('பத்தி 1'). உள் HTML = x}

இங்கே உள் HTML “இதை முயற்சிக்கவும்” என்ற பெயரால் வரையறுக்கப்பட்ட பொத்தானால் தூண்டப்படுகிறது.

மேலே உள்ள உரையின் ஆரம்ப வெளியீடு:

பொத்தானைக் கிளிக் செய்த பிறகு வெளியீடு. பொத்தானைக் கிளிக் செய்தால் பக்கத்தை மீண்டும் ஏற்றுவதற்கு வழிவகுக்காது, மாறாக உள் HTML இன் பயன்பாடு காரணமாக இருந்தது.

URL ஐ மாற்றுவதற்கான இன்னர் HTML

பொத்தானைக் கிளிக் செய்வதன் மூலம் URL ஐ மாற்ற உள் HTML இன் பயன்பாட்டைக் காட்டும் மற்றொரு எடுத்துக்காட்டு கீழே.

உதாரணமாக:

  விக்கிபீடியா இணைப்பு செயல்பாட்டை மாற்றவும் myFunction () {document.getElementById ('myAnchor'). உள் HTML = 'Google' document.getElementById ('myAnchor'). ) .target = '_blank'}

மேலே உள்ள எடுத்துக்காட்டு ஆரம்பத்தில் விக்கிபீடியா வலைத்தளத்திற்கான இணைப்பை அளிக்கிறது, ஆனால் பொத்தானைக் கிளிக் செய்தால் இணைப்பு Google க்கு மாறுகிறது.

பக்கம் மீண்டும் ஏற்றப்படாமல் இருக்கும்போது ஒரு பகுதி மட்டுமே புதுப்பிக்கப்படும்போது உள் HTML எளிதில் வரும் இதுபோன்ற பல செயல்பாடுகள் உள்ளன.இது நேரத்தை மிச்சப்படுத்துகிறது, அதே போல் குறைவான முயற்சிகளும் அணுகுமுறைக்கு செய்யப்பட வேண்டும்.உள் HTML இன் மிகப்பெரிய நன்மை இந்த அம்சத்துடன் மேம்படுத்தப்பட்ட பயனர் அனுபவமாகும்.

பாருங்கள் வழங்கியவர் எடுரேகா. HTML5, CSS3, Twitter பூட்ஸ்டார்ப் 3, jQuery மற்றும் Google API களைப் பயன்படுத்தி ஈர்க்கக்கூடிய வலைத்தளங்களை எவ்வாறு உருவாக்குவது மற்றும் அமேசான் எளிய சேமிப்பக சேவைக்கு (S3) பயன்படுத்துவது எப்படி என்பதை அறிய வலை அபிவிருத்தி சான்றிதழ் பயிற்சி உங்களுக்கு உதவும்.

எங்களுக்கு ஒரு கேள்வி கிடைத்ததா? 'ஜாவாஸ்கிரிப்டில் சரம் இணைத்தல்' இன் கருத்துகள் பிரிவில் இதைக் குறிப்பிடவும், நாங்கள் உங்களைத் தொடர்புகொள்வோம்.