জাভাস্ক্রিপ্ট ও জাভাস্ক্রিপ্ট এর বিভিন্ন ফ্রেমওয়ার্ক গুলো, যেমন - Angular, React, jQuery, Vue.js, Ext.js, Ember.js ইত্যাদি ব্যবহার করে কোন ওয়েবসাইটকে খুব সহজভাবে সাজানো ও ইন্টার-একটিভ করে তোলা যায়।
কোন ওয়েব পেজে অর্থাৎ এইচটিএমএল কোডের সাথে বিভিন্ন ভাবে জাভাস্ক্রিপ্ট ব্যবহার করা যায়। এইচটিএমএল কোডে ৪ ভাবে জাভাস্ক্রিপ্ট ব্যবহার করা যায়। নিছে এই 4টি পদ্ধতি দেখুন।
ফাংশন ও গুরুত্বপূর্ণ স্ক্রিপ্ট সমূহ, যার ওপর অন্য স্ক্রিপ্ট গুলো নির্ভর করে সেগুলো হেড সেকশনে অর্থাৎ <head> ট্যাগের মাঝে রাখা ভালো। যদি আপনি চান জাভাস্ক্রিপ্টকে কিছু ইভেন্ট এর ওপর রান করাবেন সেক্ষেত্রে আপনি জাভাস্ক্রিপ্টকে হেড সেকশনে রাখতে পারেন।
নিচে একটি উদাহরণ দেখুন যেখানে ইউজার যখন একটি বাটনে ক্লিক করবে তখন একটি alert box দেখাবে।
<html> <head> <script type="text/javascript"> <!--function sayHello() { alert("Hello World") } //--> </script> </head> <body> <input type="button" onclick="sayHello()" value="Say Hello" /> </body> </html>
এখানে আমরা একটা ফাংশন তৈরি করেছি যার নাম sayHellow এবং এটাকে এইচটিএমএল ডকুমেন্টের হেড সেকশনে রাখা হয়েছে।।
কোন ওয়েব পেজ লোড হওয়া মাত্রই আপনি যদি জাভাস্ক্রিপ্ট কাজ করাতে বা execute করাতে চান তবে সেক্ষেত্রে আপনি জাভাস্ক্রিপ্টকে বডী সেকশন অর্থাৎ <body> ট্যাগের মাঝে রাখা ভাল, এ ক্ষেত্রে কোন ফাংশন ডিক্লারেসনের প্রয়োজন নেই।
নিছে একটি উদাহরন দেখুন, যেখানে <body> ট্যাগের মাঝে জাভাস্ক্রিপ্ট কোড রাখা হয়েছে।
<body> <script type="text/javascript"> <!--document.write("Hello World") //--> </script> <p>This is web page body </p> </body>
ওয়েব পেজের head ও body সেকশনে অর্থাৎ <head> ও <body> ট্যাগের মাঝে জাভাস্ক্রিপ্ট কোড ব্যবহার করা যায়।
নিচে একটি উদাহরণ দেখুন যেখানে একই সাথে হেড ও বডী উভয় সেকশনেই জাভাস্ক্রিপ্ট কোড রাখা হয়েছে।
<html> <head> <script type="text/javascript"> <!--function sayHello() { alert("Hello World") } //--> </script> </head> <body> <script type="text/javascript"> <!--document.write("Hello World") //--> </script> <input type="button" onclick="sayHello()" value="Say Hello" /> </body> </html>
একই জাভাস্ক্রিপ্ট কোড বিভিন্ন ওয়েব পেজে ব্যবহার করতে হলে বা কোডের পরিমান খুব বেশি হলে এক্সটারনাল জাভাস্ক্রিপ্ট ব্যবহার করা হয়। হেড ও বডী উভয় সেকশনেই এক্সটারনাল জাভাস্ক্রিপ্ট ব্যবহার করা যায়। প্রথমে জাভাস্ক্রিপ্ট কোডগুলো একটি কোড এডিটরে লিখতে হবে যেখানে <script> এবং <script> ট্যাগ থাকবে না শুধুমাত্র জাভাস্ক্রিপ্ট কোডগুলো থাকবে। উদাহরণ স্বরূপ নিচে কিছু জাভাস্ক্রিপ্ট কোড দেখুন।
function sayHello() { alert("Hello Visitor") }
তার পর এই কোড গুলো সহ ফাইলটিকে ".js" এক্সটেনশন বা ফরম্যাট দিয়ে সংরক্ষণ বা save করতে হবে। মনে করি ফাইলটিকে "filename.js" নাম দিয়ে সংরক্ষণ বা save করা হল। এরপর একটি এইচটিএমএল কোড লিখতে হবে এবং এখানে <script> ট্যাগের src এট্রিবিউট ব্যবহার করে এইচটিএমএল কোডের সাথে ফাইলটিকে লিংক করে দিতে হবে।
নিচে একটি উদাহরন দেখুন, যেখানে <script> ট্যাগ ব্যবহার করে "filename.js" নামের জাভাস্ক্রিপ্ট ফাইলটিকে লিংক করা হয়েছে।
<html> <head> <script type="text/javascript" src="filename.js" ></script> </head> <body> ....... </body> </html>
নোট - এখানে এইচটিএমএল ডকুমেন্ট ও জাভাস্ক্রিপ্ট ফাইলটি একই ফোল্ডারে রাখা হয়েছে বলে, সরাসরি কেবল ফাইল এর নামটিই কেবল file path ব্যবহার করা হয়েছে।
নোট - file path সম্পর্কে বিস্তারিত জানতে আমাদের এইচটিএমএল ফাইল পাথ ওয়েব পেজটি ব্রাউজ করুন।
শেয়ার করুন
