জাভাস্ক্রিপ্ট পরিচিতি
জাভাস্ক্রিপ্ট সারা বিশ্বের মধ্যে সবচেয়ে জনপ্রিয় প্রোগ্রামিং ভাষা।
চলুন উদাহরণের সাহায্যে জাভাস্ক্রিপ্টের কিছু ব্যবহার দেখি।
জাভাস্ক্রিপ্ট এইচটিএমএল কন্টেন্ট পরিবর্তন করতে পারে
জাভাস্ক্রিপ্টে বহুবিধ মেথড রয়েছে তন্মধ্যে getElementById() মেথডটি অন্যতম।
এই উদাহরনে getElementById() মেথডটি id="test" যুক্ত এইচটিএমএল এলিমেন্টকে খুঁজে বের করার জন্য ব্যবহার করা হয়েছে এবং এলিমেন্টের কন্টেন্ট "হ্যালো জাভাস্ক্রিপ্ট" দ্বারা পরিবর্তন করা হয়েছে।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3>জাভাস্ক্রিপ্ট উদাহরণ</h3>
<p id="test">জাভাস্ক্রিপ্ট এইচটিএলএল কন্টেন্ট পরিবর্তন করতে পারে।</p>
<button type="button"
onclick="document.getElementById('test').innerHTML = 'হ্যালো জাভাস্ক্রিপ্ট!'">ক্লিক করুন</button>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট এইচটিএমএল এট্রিবিউট পরিবর্তন করতে পারে
এই উদাহরণটিতে <input> ট্যাগের type এট্রিবিউট পরিবর্তন করা হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3>জাভাস্ক্রিপ্ট উদাহরণ</h3>
<button onclick="document.getElementById('test').type='text">পাসওয়ার্ড শো</button><br><br>
<input id="test" type="password" value="123456"><br><br>
<button onclick="document.getElementById('test').type='password'">পাসওয়ার্ড হাইড</button>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট এইচটিএমএল স্টাইল পরিবর্তন করতে পারে
এইচটিএমএল এলিমেন্টের এট্রিবিউট পরিবর্তন করা থেকে এইচটিএমএল স্টাইল পরিবর্তন করা একটু ভিন্নঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3>জাভাস্ক্রিপ্ট উদাহরণ</h3>
<p id="test">জাভাস্ক্রিপ্ট এইচটিএমএল এলিমেন্টের স্টাইল পরিবর্তন করতে পারে।
<button type="button" onclick="document.getElementById('test').style.color='green'">ক্লিক করি!</button>
</body>
</html>
ফলাফল