JavaScript காட்சி வாய்ப்புகள்
JavaScript தரவுகளை வெவ்வேறு வழிகளில் "காட்சிப்படுத்த" முடியும்:
- innerHTML அல்லது innerText பயன்படுத்தி HTML உறுப்பில் எழுதுதல்
- document.write() பயன்படுத்தி HTML வெளியீட்டில் எழுதுதல்
- window.alert() பயன்படுத்தி எச்சரிக்கை பெட்டியில் எழுதுதல்
- console.log() பயன்படுத்தி உலாவி கன்சோலில் எழுதுதல்
innerHTML பயன்படுத்துதல்
ஒரு HTML உறுப்பை அணுக, நீங்கள் document.getElementById(id) முறையைப் பயன்படுத்தலாம்.
HTML உறுப்பை அடையாளம் காண id பண்பைப் பயன்படுத்தவும்.
பின்னர் HTML உறுப்பின் HTML உள்ளடக்கத்தை மாற்ற innerHTML பண்பைப் பயன்படுத்தவும்:
எடுத்துக்காட்டு
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "<h2>Hello World</h2>";
</script>
</body>
</html>நேரடி டெமோ: innerHTML
குறிப்பு:
ஒரு HTML உறுப்பின் innerHTML பண்பை மாற்றுவது HTML இல் தரவைக் காட்சிப்படுத்த மிகவும் பொதுவான வழியாகும்.
innerText பயன்படுத்துதல்
ஒரு HTML உறுப்பை அணுக, document.getElementById(id) முறையைப் பயன்படுத்தவும்.
பின்னர் HTML உறுப்பின் உள் உரையை மாற்ற innerText பண்பைப் பயன்படுத்தவும்:
எடுத்துக்காட்டு
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerText = "Hello World";
</script>
</body>
</html>நேரடி டெமோ: innerText
குறிப்பு:
நீங்கள் ஒரு HTML உறுப்பை மாற்ற வேண்டும் போது innerHTML ஐப் பயன்படுத்தவும்.
நீங்கள் வெறும் எளிய உரையை மட்டும் மாற்ற வேண்டும் போது innerText ஐப் பயன்படுத்தவும்.
document.write() பயன்படுத்துதல்
சோதனை நோக்கங்களுக்காக, document.write() பயன்படுத்துவது வசதியானது:
எடுத்துக்காட்டு
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>HTML ஆவணம் ஏற்றப்பட்ட பிறகு document.write() பயன்படுத்தினால், இருக்கும் அனைத்து HTML ஐயும் நீக்கிவிடும்:
எடுத்துக்காட்டு
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>எச்சரிக்கை டெமோ: document.write()
கவனம்: இந்த பொத்தானைக் கிளிக் செய்தால், இந்த பக்கத்தின் அனைத்து உள்ளடக்கமும் நீக்கப்பட்டு "11" மட்டுமே காட்டப்படும்!
எச்சரிக்கை:
document.write() முறை சோதனை நோக்கங்களுக்காக மட்டுமே பயன்படுத்தப்பட வேண்டும். இது HTML ஆவணம் முழுமையாக ஏற்றப்பட்ட பிறகு பயன்படுத்தக்கூடாது.
window.alert() பயன்படுத்துதல்
நீங்கள் எச்சரிக்கை பெட்டியைப் பயன்படுத்தி தரவைக் காட்சிப்படுத்தலாம்:
எடுத்துக்காட்டு
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>நீங்கள் window சொல்லை தவிர்க்கலாம்.
JavaScript இல், window பொருள் உலகளாவிய நோக்கப் பொருளாகும். இதன் பொருள் மாறிகள், பண்புகள் மற்றும் முறைகள் இயல்புநிலையாக window பொருளுக்கு சொந்தமானவை. window சொல்லைக் குறிப்பிடுவது விருப்பமானது என்பதும் இதன் பொருள்:
எடுத்துக்காட்டு
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body>
</html>நேரடி டெமோ: alert()
console.log() பயன்படுத்துதல்
பிழைதிருத்த நோக்கங்களுக்காக, உலாவியில் தரவைக் காட்சிப்படுத்த console.log() முறையை அழைக்கலாம்.
பின்னர் வரும் அத்தியாயத்தில் பிழைதிருத்தம் பற்றி மேலும் அறிவீர்கள்.
எடுத்துக்காட்டு
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>நேரடி டெமோ: console.log()
இந்த பொத்தானைக் கிளிக் செய்து, உங்கள் உலாவியின் கன்சோலைத் திறக்கவும் (F12 அழுத்தவும்).
JavaScript அச்சிடுதல்
JavaScript க்கு எந்த அச்சு பொருள் அல்லது அச்சு முறைகளும் இல்லை.
நீங்கள் JavaScript இலிருந்து வெளியீட்டு சாதனங்களை அணுக முடியாது.
தற்போதைய சாளரத்தின் உள்ளடக்கத்தை அச்சிட உலாவியில் window.print() முறையை அழைக்கலாம் என்பது மட்டுமே விதிவிலக்கு.
எடுத்துக்காட்டு
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>நேரடி டெமோ: அச்சிடுதல்
JavaScript பயிற்சிகள்
இந்த டுடோரியலில் உள்ள பல அத்தியாயங்கள் உங்கள் அறிவு நிலையைச் சரிபார்க்கக்கூடிய பயிற்சியுடன் முடிகின்றன.