ஜாவாஸ்கிரிப்ட்
ஆனது வெப் பக்கங்களை உயிரோட்டத்துடன் இருக்க பயன்படுகின்றது. ஜாவாஸ்கிரிப்ட் கொண்டு
எழுதப்படும் நிரல்கள் ஸ்கிரிப்ட் எனப்படுகின்றன. இது html உடன் சேர்ந்து எழுதப் படுகின்றது.
Html ஃபைல்
லோட் ஆகும் பொழுது இடுவும் ரன் ஆகும்.
இது பிளைன்
டெக்ஸ்ட் ஆக எடுத்துக் கொள்ளப்படுகின்றது. கம்பைல் செய்ய தேவையில்லை.இவ்வாறு ஜாவாஸ்கிரிப்ட்
ஆனது மற்ற மொழிகளில் இருந்து குறிப்பாக ஜாவாவில் இருந்து வேறுபடுகின்றது.
தொடக்கத்தில்
இது உருவாக்கப்பட்ட போது லைவ் ஸ்கிரிப்ட் என்று பெயரிடப்பட்டது.அப்பொழுது ஜாவா பிரபலமாய்
இருந்த காரணத்தால் அதன் இளைய சகோதராய் இருக்கட்டும் என ஜாவாஸ்கிரிப்ட் என பெயரிடப்
பட்டது. ஆனால் அதற்கு பிறகு மற்ற மொழிகளை சார்ந்திராமல் சுதந்திர மொழியாய் ECMAScript ஆக மாற்றமானது. ஆக இதற்கும் ஜாவாவிற்கும் எந்தவித
தொடர்பும் இல்லை.
இப்பொழுது
ஜாவா பிரவுசரில் அல்லாது சர்வரிலும் இயக்கப்படுகின்றது.மேலும் the JavaScript
engine. என்ற சிறப்பு
நிரல் கொண்ட எந்த கருவியிலும் இயங்குகின்றது.
நவீன ஜாவாஸ்கிரிப்ட் ஆனது மிகவும் பாதுகாப்பான மொழியாகும்,
இது சிஸ்டம் மெமரியையோ அல்லது cpu-யையோ ஆக்சஸ் செய்ய இயலாது. ஏனெனில் இது தொடக்கத்தில்
பிரவுசரில் இயங்குவதற்கென்றே உருவாக்கப்பட்டது.
ஜாவா ஸ்கிரிப்டின்
திறன் ஆனது அது இயங்கும் என்விரான்மெண்டை சார்ந்திருக்கின்றது.உதாரணத்திற்கு
node.js ஆனது தன்னிச்சையான ஃபைல்களை ரீட் ரைட் செய்தல் நெட் வொர்க் கோரிக்கையை இயக்குதல்
போன்றவற்றை செய்கின்றது.
பிரவுசரில்
ஜாவாஸ்கிரிப்ட் ஆனது பயனருடன் இன்டெராக்ட் செய்தல் சர்வருடன் தொடர்பு கொள்ளுதல் போன்ற
வற்றை செய்கின்றது.
ஜாவாஸ்கிரிப்ட்
கொண்டு பின் வருவனவற்றை செய்யலாம்.
ஒரு
html பக்கத்தின் அடக்கத்தை மாற்றலாம்.
ஜாவா ஸ்கிப்ரிடின்
மெத்தடுகளில் ஒன்று
getElementById()கீழே உள்ள சான்று
நிரலில் ஒரு html எலெமென்ட் ஆனது அதன் id மூலம் கண்டறியப்பட்டு அதன் அடக்கம்(innerHTML)
மாற்றப்படுகின்றது. சான்று நிரல்.
<!DOCTYPE
html>
<html>
<body>
<h2>What
Can JavaScript Do?</h2>
<p
id="demo">JavaScript can change HTML content.</p>
<button
type="button"
onclick='document.getElementById("demo").innerHTML = "Hello
JavaScript!"'>Click Me!</button>
</body>
</html>
மேலே உள்ள
நிரலில் பட்டனின் onclick ஈவண்டில் demo என்ற id கொண்ட பாராகிராப்பின் அடக்கமானது
“Hello javascript!” என மாறுகின்றது.
குறிப்பு
ஜாவாஸ்கிரிப்ட் ஆனது டபிள் கோட்ஸ் மற்றும் சிங்கிள் கோட்ஸ் இரண்டையுமே சப்போர்ட்ஸ்
செய்கின்றது.
ஜாவாஸ்கிரிப்ட்
கொண்டு ஒரு html எலெமென்டின் பண்பின் மதிப்பை மாற்றலாம்.உதாரணத்திற்கு img டேக்கின்
src ஆட்ரிப்யூட்டின் மதிப்பை மாற்றலாம்.
சான்று
நிரல்.
<!DOCTYPE
html>
<html>
<body>
<h2>What
Can JavaScript Do?</h2>
<p>JavaScript
can change HTML attribute values.</p>
<p>In
this case JavaScript changes the value of the src (source) attribute of an
image.</p>
<button
onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn
on the light</button>
<img
id="myImage" src="pic_bulboff.gif"
style="width:100px">
<button
onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn
off the light</button>
</body>
</html>
மேலே உள்ள
நிரலில் ஒரு பட்டனை சொடுக்கிதன் பொழுது img டேக்கின் src ஆனது ஒரு மதிப்பைக் கொண்டுள்ளது.
மற்றொரு பட்டனை கிளிக் செய்யும் பொழுது அது வேறொரு மதிப்பு கொண்டுள்ள்து.
ஜாவாஸ்கிரிப்ட்
கொண்டு html எலெமெண்டுகளின் ஸ்டைலை மாற்றலாம். சான்றாக கீழே உள்ள நிரலில் ஒரு எலெமெண்டின்
ஃபாண்ட் சைஸ் மாற்றியமைக்கப்படுகின்றது.
சான்று
நிரல்.
<!DOCTYPE html>
<html>
<body>
<h2>What Can
JavaScript Do?</h2>
<p
id="demo">JavaScript can change the style of an HTML
element.</p>
<button
type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click
Me!</button>
</body>
</html>
மேலே உள்ள நிரலில் பட்டனை கிளிக் செய்யும் பொழுது demo என்ற id
கொண்ட பாராகிராப் எலெமெண்டின் ஃபாண்ட் சைஸ் ஆனது 35px ஆக மாற்றம்
செய்யப்படுகின்றது.
ஜாவாஸ்கிரிப்ட்
ஆனது ஒரு html –எலெமென்டை ஹைட் (hide) செய்யபயன்படுகின்றது.
சான்று நிரல்.
<!DOCTYPE
html>
<html>
<body>
<h2>What
Can JavaScript Do?</h2>
<p
id="demo">JavaScript can hide HTML elements.</p>
<button
type="button"
onclick="document.getElementById('demo').style.display='none'">Click
Me!</button>
</body>
</html>
மேலே உள்ள
நிரலில் பட்டனை கிளிக் செய்யும் பொழுது demo என்ற id கொண்ட பாராகிராப் ஆனது
மறைக்கப்படுகின்றது.
இதே மாதிரி ஒரு
html எலெமெண்டை காட்சிப்படுத்தலாம்.
மாதிரி நிரல்.
<!DOCTYPE html>
<html>
<body>
<h2>What Can
JavaScript Do?</h2>
<p>JavaScript
can show hidden HTML elements.</p>
<p
id="demo" style="display:none">Hello
JavaScript!</p>
<button
type="button"
onclick="document.getElementById('demo').style.display='block'">Click
Me!</button>
</body>
</html>
மேலே உள்ள
நிரலில் தொடக்கத்தில் demo என்ற id கொண்ட பாராகிராப் ஆனது மறைக்கப்படுகின்றது. அதே
எலெமென்ட் பட்டனை கிளிக் செய்யும் பொழுது தோற்றுவிக்கப்படுகின்றது.
\நன்றி.
முத்து
கார்த்திகேயன்,மதுரை.
No comments:
Post a Comment