নাম-শরিফুল ইসলাম
Job category-Php Coder
Javascript এইচটিএমএল পেজ কে অনেক গতিশীল এবং ইন্টার্যাক্টিভ করে তুলে।
এইচটিএমএল <script> ট্যাগ
জাভাস্ক্রিপ্ট এর মতো ক্লায়েন্ট সাইড স্ক্রিপ্ট কে সঙ্গায়িত করার জন্য <script> ট্যাগ ব্যবহার করা হয়।
<script> এর উপাদান (এলিমেন্ট) হিসেবে স্ক্রিপ্টিং স্টেটমেন্ট বা বাহিরের একটি স্ক্রিপ্ট ফাইলকে src এট্রিবউট দ্বারা লিঙ্ক করে।
জাভাস্ক্রিপ্ট এর সাধারণ ব্যবহার হচ্ছে ইমেজ (স্টিল ছবি) ব্যবহার কৌশল, ফর্ম যাচাইকরণ, এবং গতিশীল বস্তুর পরিবর্তন।
নিচের স্ক্রিপ্টটি ফলাফল হিসেবে Hello JavaScript! প্রদর্শন করে। এইচটিএমএল ইলিমিন্ট এর ভিতরে id="demo" হিসেবে লেখা হয়।
উদাহরণ
<!DOCTYPE html> <html> <body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body> </html>
ফলাফল
Hello JavaScript!
এইচটিএমএল <noscript> ট্যাগ
যদি ব্যবহারকারীর ব্রাউজারে স্ক্রিপ্ট ডিজাবল করা থাকে বা তার ব্রাউজার স্ক্রিপ্ট সমর্থন না করে তাহলে ব্যবহারকারীকে একটি বিকল্প কনটেন্ট প্রদর্শন করার জন্য <noscript> ট্যাগ ব্যবহার করা হয়। শুধুমাত্র ব্রাউজারে স্ক্রিপ্টিং ডিজাবল বা ব্রাউজার স্ক্রিপ্ট সমর্থন না করলেই <noscript> ট্যাগ এর কনটেন্ট প্রদর্শিত হয়।
উদাহরণ
<!DOCTYPE html> <html> <body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>A browser without support for JavaScript will show the text written inside the noscript element.</p> </body> </html>
ফলাফল:
Hello JavaScript!
A browser without support for JavaScript will show the text written inside the noscript element.
জাভাস্ক্রিপ্ট এর একটি পরীক্ষা (আমাদের জাভাস্ক্রিপ্ট টিওটোরিয়াল থেকে)
জাভাস্ক্রিপ্ট যা করতে পারে তার কিছু উদাহরণ নিচে দেওয়া হল:
JavaScript can change HTML content:
<!DOCTYPE html> <html> <body>
<h1>My First JavaScript</h1>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">This is a demonstration.</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</body>
</html>
ফলাফলঃ
My First JavaScript
JavaScript can change the content of an HTML element:
This is a demonstration.
JavaScript can change HTML styles:
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
ফলাফলঃ
My First JavaScript
JavaScript can change the style of an HTML element.
JavaScript can change HTML attributes
<!DOCTYPE html>
<html>
<body>
<script>
function light(sw) {
var pic;
if (sw == 0) {
pic = "pic_bulboff.gif"
} else {
pic = "pic_bulbon.gif"
}
document.getElementById('myImage').src = pic;
}
</script>
<img id="myImage" src="pic_bulboff.gif" width="100" height="180">
<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>
</body>
</html>
ফলাফলঃ
এইচটিএমএল scripts ট্যাগ
| ট্যাগ | বর্ণনা |
| <script> | client side script কে ডিফাইন করে |
| <noscript> | যদি client-side-script সাপোর্ট না করে তাহলে ইউজারদের জন্য বিকল্প কনটেন্ট ডিফাইন করে থাকে |
