জাভাস্ক্রিপ্ট সূচনা
এই চ্যাপ্টারে আমরা দেখবো জাভা স্ক্রিপ্ট দিয়ে আমরা কি কি করতে পারি।
জাভাস্ক্রিপ্ট HTML এর কনটেন্ট পরিবর্তন করতে পারে ।
জাভাস্ক্রিপ্ট এর বহুল ব্যবহৃত মেথড হচ্ছে getElementById()
উদাহরনঃ
document.getElementById("demo").innerHTML = "Hello JavaScript";জাভাস্ক্রিপ্ট সিংগেল/ ডাবল কোটেশন উভয়ই সাপোর্ট করে। তাই উপরের উদাহরন কে আমরা নিচের মত করেও লিখতে পারি কোনরূপ সমস্যা ছাড়াই।
document.getElementById('demo').innerHTML = 'Hello JavaScript';জাভাস্ক্রিপ্ট HTML এর এ্যাট্রিবিউট এর ভ্যেলু পরিবর্তন করতে পারে।
যেমনঃ জাভাস্ক্রিপ্ট ট্যাগ এর src (source) এ্যাট্রিবিউট এর ভ্যেলু পরিবর্তন করা যায়।
এখান থেকে গিয়ে উদাহরনটি দেখে নিতে পারেনঃ
এ্যাট্রিবিউট এর ভ্যেলু পরিবর্তন
জাভাস্ক্রিপ্ট 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> জাভাস্ক্রিপ্ট 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>
জাভাস্ক্রিপ্ট হাইড করা HTML এলিমেন্ট show করতে ব্যবহার করা হয় display স্টাইল পরিবর্তন করার মাধ্যমে যেমনঃ
<!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>
