JavaScript Where To - Jassif Team

<script> குறிச்சொல்

HTML இல், JavaScript குறியீடு <script> மற்றும் </script> குறிச்சொற்களுக்கு இடையில் செருகப்படுகிறது.

எடுத்துக்காட்டு

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

📝 குறிப்பு:

பழைய JavaScript எடுத்துக்காட்டுகள் type பண்பைப் பயன்படுத்தலாம்: <script type="text/javascript">. type பண்பு தேவையில்லை. JavaScript என்பது HTML இல் இயல்புநிலை ஸ்கிரிப்டிங் மொழியாகும்.

JavaScript செயல்பாடுகள் மற்றும் நிகழ்வுகள்

ஒரு JavaScript செயல்பாடு என்பது JavaScript குறியீட்டின் தொகுதி ஆகும், இது "அழைக்கப்படும்" போது செயல்படுத்தப்படலாம்.

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

பின்னர் வரும் அத்தியாயங்களில் செயல்பாடுகள் மற்றும் நிகழ்வுகள் பற்றி நீங்கள் மேலும் அறிவீர்கள்.

JavaScript <head> அல்லது <body> இல்

நீங்கள் எந்தவொரு HTML ஆவணத்திலும் எத்தனை ஸ்கிரிப்ட்களையும் வைக்கலாம்.

ஸ்கிரிப்ட்களை HTML பக்கத்தின் <body> அல்லது <head> பிரிவில் அல்லது இரண்டிலும் வைக்கலாம்.

JavaScript <head> இல்

இந்த எடுத்துக்காட்டில், ஒரு JavaScript செயல்பாடு ஒரு HTML பக்கத்தின் <head> பிரிவில் வைக்கப்படுகிறது.

பொத்தான் கிளிக் செய்யப்படும் போது செயல்பாடு அழைக்கப்படுகிறது:

எடுத்துக்காட்டு

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

நேரடி டெமோ:

இது ஒரு பத்தி

JavaScript <body> இல்

இந்த எடுத்துக்காட்டில், ஒரு JavaScript செயல்பாடு ஒரு HTML பக்கத்தின் <body> பிரிவில் வைக்கப்படுகிறது.

பொத்தான் கிளிக் செய்யப்படும் போது செயல்பாடு அழைக்கப்படுகிறது:

எடுத்துக்காட்டு

<!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

நேரடி டெமோ:

இது ஒரு பத்தி

⚡ செயல்திறன் உதவிக்குறிப்பு:

<body> உறுப்பின் அடிப்பகுதியில் ஸ்கிரிப்ட்களை வைப்பது காட்சி வேகத்தை மேம்படுத்துகிறது, ஏனெனில் ஸ்கிரிப்ட் விளக்கம் காட்சியை மெதுவாக்குகிறது.

வெளிப்புற JavaScript

ஸ்கிரிப்ட்களை வெளிப்புற கோப்புகளிலும் வைக்கலாம்:

வெளிப்புற கோப்பு: myScript.js

function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}

அதே குறியீடு பல்வேறு வலைப்பக்கங்களில் பயன்படுத்தப்படும்போது வெளிப்புற ஸ்கிரிப்ட்கள் நடைமுறைக்குரியவை.

JavaScript கோப்புகள் .js கோப்பு நீட்டிப்பைக் கொண்டுள்ளன.

வெளிப்புற ஸ்கிரிப்டைப் பயன்படுத்த, ஸ்கிரிப்ட் கோப்பின் பெயரை <script> குறிச்சொல்லின் src (மூல) பண்பில் வைக்கவும்:

எடுத்துக்காட்டு

<script src="myScript.js"></script>

நீங்கள் விரும்பினால் வெளிப்புற ஸ்கிரிப்ட் குறிப்பை <head> அல்லது <body> இல் வைக்கலாம்.

ஸ்கிரிப்ட் <script> குறிச்சொல் சரியாக எங்கு அமைந்துள்ளதோ அங்கே இருப்பதைப் போலவே செயல்படும்.

⚠️ எச்சரிக்கை:

வெளிப்புற ஸ்கிரிப்ட்களில் <script> குறிச்சொற்கள் இருக்கக்கூடாது.

வெளிப்புற JavaScript நன்மைகள்

ஸ்கிரிப்ட்களை வெளிப்புற கோப்புகளில் வைப்பதில் சில நன்மைகள் உள்ளன:

இது HTML மற்றும் குறியீட்டை பிரிக்கிறது
இது HTML மற்றும் JavaScript ஐப் படிக்கவும் பராமரிக்கவும் எளிதாக்குகிறது
கேச் செய்யப்பட்ட JavaScript கோப்புகள் பக்க ஏற்றத்தை விரைவுபடுத்தும்

ஒரு பக்கத்தில் பல ஸ்கிரிப்ட் கோப்புகளைச் சேர்க்க - பல ஸ்கிரிப்ட் குறிச்சொற்களைப் பயன்படுத்தவும்:

எடுத்துக்காட்டு

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

வெளிப்புற குறிப்புகள்

ஒரு வெளிப்புற ஸ்கிரிப்டை 3 வெவ்வேறு வழிகளில் குறிப்பிடலாம்:

முழு URL உடன் (முழு வலை முகவரி)
கோப்புப் பாதையுடன் (/js/ போன்றது)
எந்தப் பாதையும் இல்லாமல்

இந்த எடுத்துக்காட்டு myScript.js உடன் இணைக்க முழு URL ஐப் பயன்படுத்துகிறது:

<script src="https://www.jassifteam.com/js/myScript.js"></script>

இந்த எடுத்துக்காட்டு myScript.js உடன் இணைக்க கோப்புப் பாதையைப் பயன்படுத்துகிறது:

<script src="/js/myScript.js"></script>

இந்த எடுத்துக்காட்டு myScript.js உடன் இணைக்க எந்தப் பாதையும் பயன்படுத்தாது:

<script src="myScript.js"></script>

HTML கோப்புப் பாதைகள் அத்தியாயத்தில் கோப்புப் பாதைகள் பற்றி மேலும் அறியலாம்.

JavaScript பயிற்சிகள்

இந்த டுடோரியலில் உள்ள பல அத்தியாயங்கள் உங்கள் அறிவு நிலையைச் சரிபார்க்கக்கூடிய பயிற்சியுடன் முடிகின்றன.

❓ HTML இல், JavaScript குறியீடுகள் எந்த HTML குறிச்சொற்களுக்குள் செருகப்பட வேண்டும்?

✓ சரி! JavaScript குறியீடு <script> மற்றும் </script> குறிச்சொற்களுக்குள் செருகப்பட வேண்டும்

✗ தவறு! <javascript> என்பது HTML இல் ஒரு சரியான குறிச்சொல் அல்ல

✗ தவறு! <head> பிரிவு ஸ்கிரிப்ட்களைக் கொண்டிருக்கலாம், ஆனால் JavaScript குறியீடு இன்னும் <script> குறிச்சொற்களுக்குள் இருக்க வேண்டும்