JavaScript_part2_জাভাস্ক্রিপ্ট লেখার পদ্ধতি ও ফাংশনের ব্যবহার
জাভাস্ক্রিপ্ট লেখার পদ্ধতি
এই অংশে আমরা শিখব, কিভাবে একটি HTML পেজ এর মধ্যে একটি জাভাস্ক্রিপ্ট কোড রাখা হয়, কোথায় জাভাস্ক্রিপ্ট কোড রাখা হয়, এক্সটার্নাল জাভাস্ক্রিপ্ট ব্যবহার করা। তো আর বেশী কথা না বলে চলুন শুরু করা যাক। কিভাবে একটি HTML পেজ এর মধ্যে জাভাস্ক্রিপ্ট রাখতে হবে তার একটি উদাহরন দেখা যাক ।
আমরা এডিটর হিসেবে Notepad++ ব্যবহার করেছি।
প্রোগ্রাম : HTML পেজ এর মধ্যে জাভাস্ক্রিপ্ট-এর উদাহরন
1. আপনার এডিটর Notepad++ ওপেন করুন।
2. নিচের প্রোগ্রাম টুকু লিখুন।
3. এখন ফাইলটিকে Program_001.html হিসাবে Save করুন।
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
document.write("Hellow, This is Nova Computer");
</script>
</body>
</html>
ফলাফল: এবার Program_001.html পেজটিকে আপনার ব্রাউজারে ওপেন করুন। নিচের চিত্রের মত আউটপুট দেখতে পাবেন।
ব্যাখ্যা: Javascript লেখার জন্য HTML এর <body> বা <head> এর মধ্যে <script>...... </script> ট্যাগ ব্যবহার করতে হয় এবং ট্যাগের মধ্যে স্ক্রিপ্টিং ল্যাগুয়েজ ঠিক করে দিতে হয় তাই উপরোক্ত উদাহরনের ৫ নং লাইনে script ট্যাগের মাঝে type="text/javascript" লেখা হয়েছে।
document.write( ) কমান্ড দ্বারা HTML এ কোন আউটপুট write বা লেখা বুঝায় অর্থ্যাৎ ব্রাউজারে সরাসরি যে টেক্সট-টিকে দেখতে চান সেটি document.write এর মধ্যে ব্রাকেট দিয়ে লিখতে হবে, যেমন ৬তম লাইনে document.write("Hellow, This is Nova Computer"); লেখা হয়েছে। লাইন শেষে একটি সেমিকোলন চিহ্ন (;) দেওয়া হয়েছে।
তাই আমাদের প্রোগ্রামের আউটপুট হিসাবে পেজটিতে Hellow, This is Nova Computer দেখা যাচ্ছে।
অর্থাৎ
<Script type = “text/ javascript”> দ্বারা ব্রাউজারে একটি Javascript ল্যাগুয়েজ কোড বলে সনাক্ত করবে এবং করা শুরু করবে।
এখন Head এ html এর মত করে title সংযোজন করবো।
প্রোগ্রাম : HTML এর মত করে title সংযোজন এবং <body>…….. </body> ট্যাগের মধ্যে script সংযোজন
1. আপনার এডিটর Notepad++ ওপেন করুন।
2. নিচের প্রোগ্রাম টুকু লিখুন।
3. এখন ফাইলটিকে Program_002.html হিসাবে Save করুন।
<!DOCTYPE html>
<html>
<head>
<title> This is Javascript Lessons </title>
</head>
<body>
<script type="text/javascript">
document.write("Hellow, This is Nova Computer");
</script>
</body>
</html>
ফলাফল : এবার Program_002.html পেজটিকে আপনার ব্রাউজারে ওপেন করুন। নিচের চিত্রের মত আউটপুট দেখতে পাবেন।
document.write( )
document.write( ) দ্বারা html এ কিছু একটা প্রিন্ট বা লিখতে হবে এরুপ বুঝায় এবং </script> দ্বারা ল্যাগুয়েজটির শেষ লাইন নির্ধারিত হয়। উপরোক্ত উদাহরণে আমরা <body> </body> ট্যাগের মধ্যে script ব্যবহার করেছি।
এবার আমরা <head>........ </head> ট্যাগের মধ্যে কিভাবে কোড লিখতে হয় দেখব।
প্রোগ্রাম : <head>........ </head> ট্যাগের মধ্যে script
1. <Script> ট্যাগসহ কোডটি আপনার HTML এর <head> ট্যাগের মধ্যে লিখুন। Program_003.html নামে পেজটি সেভ করুন।
<!DOCTYPE html>
<html>
<head>
<title>
This is Javascript Lessons
</title>
<script type="text/javascript">
document.write("Hellow, This is Nova Computer");
</script>
</head>
<body>
</body>
</html>
ফলাফল : এবার আপনার ব্রাউজারে Program_003.html পেজটিকে ওপেন করুন।
ব্যাখ্যা : কিমত্ম এই প্রাকটিসটি ভাল নয় আপনি এক্ষেত্রে অবশ্যই ফাংশন ব্যবহার করবেন। <script> ট্যাগের মধ্যে function কী ওর্য়াড লিখে ফাংশনের একটি নাম দিতে হবে। নামটি একটি ওর্য়াডে হতে হবে এবং শেষে ফাস্ট ব্রাকেটে ক্লোসসহ থাকতে হয়। তাহলেই ব্রাউজার বুঝবে এটি একটি ফাংশন। যেমন-Function MyFirstMessage() এবং পর সেকেন্ড ব্রাকেটের মধ্যে document.write বা অন্য যে কোন কমান্ডের সাথে ম্যাসেজটি দিতে হবে। শেষে <body> ট্যাগে onload ইভেন্টে ফাংশনটিকে কল করতে হবে।
চলুন নিচের উদাহরণ দেখা যাক।
প্রোগ্রাম : ফাংশন ব্যবহারের ধারনা
1. আপনার Notepad++ ওপেন করে নিচের মত করে কোড লিখুন। এবার Program_004.html হিসাবে সেভ করুন।
ফলাফল : এবার আপনার ব্রাউজারে program_004.html পেজটিকে ওপেন করুন। নিমেণর চিত্রের ন্যায় আউটপুট দেখতে পাবেন ।
ব্যাখ্যা : যদিও ফাংশন সম্পর্কিত বিসত্মারিত আমরা ফাংশন অংশে আলোচনা করব। তবে এখানে প্রাথমিক ব্যাখ্যা দেওয়া যাক। দেখুন ব্রাউজারে কোন Result আসে নাই। এটিরও ব্যাখ্যা দেওয়া হবে। আগেই বলেছি <script> ট্যাগের মধ্যে function কীওর্য়াড লিখে ফাষ্ট ব্রাকেট ক্লোসসহ একটি ওর্য়াডে ফাংশনের একটি নাম দিতে হবে। ফাংশনের নাম অবশ্যই একটি ওয়ার্ডে হতে হবে। লাইন নং ৯ -এ funtion MyFirstMassage() নাম দেওয়া হয়েছে। পরবর্তীতে সেকেন্ড ব্রাকেটর মধ্যে document.write কমান্ডে ম্যাসেজ দেওয়া হয়েছে লাইন নং ১০,১১,১২ তে। উলেখ্য document.write বা এ জাতীয় কমান্ডের ক্ষেত্রে লাইনের শেষে অবশ্যই সেমিকোলন দিয়ে শেষ করতে হবে। এইবার </script> শেষ করে ব্রাউজারে প্রর্দশন করা হয়েছে । কিন্তুু কোন রেজাল্ট আসেনি, কারণ <body> তে ফাংশনটি onload করা হয়নি । এখন আমরা ফাংশনটি কল করার জন্য onload ইভেন্টের পর equal(=) সাইন দিয়ে ফাংশনের নাম ফাষ্ট ব্রাকেট ক্লোজসহ দিয়ে দিব। চলুন নিচের উদাহরণ দেখা যাক।
প্রোগ্রাম : ফাংশন ব্যবহারের ধারনা
1. আপনার Notepad++ ওপেন করে নিচের মত করে কোড লিখুন।
2. এবার Program_005.html হিসাবে সেভ করুন।
ফলাফল : এবার আপনার ব্রাউজারে program_005.html পেজটিকে ওপেন করুন। নিমেণর চিত্রের ন্যায় আউটপুট দেখতে পাবেন ।
ব্যাখ্যা :এর আগের উদাহরনটিতে ফাংশনকে onload ইভেন্ট -এর সময় কল করা হয়নি বলে কোন রেজাল্ট আসেনি। এই উদাহরনে onload ইভেন্ট এর সময় ফাংশনটিকে কল করা হয়েছে বলে এবার ব্রাউজারে ফাংশনটির ফলাফল দেখা যাচ্ছে।
বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।
Writer: Bappi Ashraf
Published By: Gyankosh Prokashani
Amount of Pages: 464
First Publish: October-2004
Last Edition: We've February-2015 edition. Future edition may be existed!
Book Price: BDT 350 (30% Discount)
The
writer of this book has told that he has written this book with the
concept of "teach yourself". On the other hand, Web Design is a thing which is
interesting to learn. He has also told that the book is full of fan and
enjoyment so that a person can learn Web Design by himself by playing with
the example projects of this book. Book's CD Link below...
