know yourselves. information, computer, 7 wonders, various.

Friday, March 6, 2020

JavaScript_part9_জাভাস্ক্রিপ্ট ফাংশন ও Return Statement




জাভাস্ক্রিপ্ট ফাংশন (Function)
অনেকগুলি Statement এর সমন্বয়ে গঠিত একটি একক ইউনিটই হচ্ছে function. একই কাজ বারবার করার দরকার হতে পারে, এর হাত থেকে রেহাই পাবার জন্য ফাংশন একটি বড় উদাহরন। আসলে Javascript এ বিভিন্ন ধরনের কাজের জন্য বিভিন্ন ফাংশন তৈরী করে লাইব্রেরীতে রেখে দেওয়া হয়েছে এবং প্রয়োজন অনুসারে এই ফাংশনকে কল করা হয়।
আমরা ইতিমধ্যে জাভাস্ক্রিপ্টের কোর function এর উদাহরণ দিয়েছি। যেমন: alert(), document.write(), getElementById() ইত্যাদি। একটি ডকুমেন্ট এর মধ্যে ফাংশনকে (head) বা (body) ট্যাগের মধ্যে ডিজাইন করা যায়।
function-এর গঠন:
যে কোন function মোট  2 ধাপ পার হয়ে সম্পন্ন হয়।
1.  Function Definition
2.  Function Calling.
Function Definition:
কোন ফাংশন কি কাজ করবে সেটি function definition এর মধ্যে বর্ননা করা থাকে। অর্থাৎ function definition এর মধ্যে কোড লিখতে হয়। function definition এর Structure হচ্ছে নিন্মরূপ:
function functionname()
{
Statements;
}
চলুন নিচের উদাহরনটি দেখা যাক
<script type="text/JavaScript">
function CalculateSum()
{
var number=document.getElementById("txtNumber").value;
number=parseInt(number);
var i;
var sum=0;
for(i=1;i<=number;i++)
{
sum=sum+i;
}
alert(" The Summation of "+number+ " is = " +sum);
}
</script>
এখানে ফাংশনের নাম CalculateSum অর্থ্যাৎ Caculate Sum নামে একটি ফাংশন ডিফাইন করা হয়েছে এবং ফাংশনের ব্লকের মধ্যে কিছু Example code বা Statement দেওয়া হল।
Function Calling
সাধারনত ফাংশন ডিফাইন করার পর ফাষ্ট ব্রাকেটসহ একটি নাম দেওয়া হয় এবং ফাংশন বডির মধ্যে বিসত্মারিত কাজের বর্ননা থাকে। পরে যখন ফাংশনটির কাজের দরকার হয় অর্থাৎ html এর যে ইভেন্ট এর সময় এই ফাংশনে কাজ হবে সেই ইভেন্টের সময় কল করতে হয়। যেমন: onload, onclick, onchange ইত্যাদি। আমরা ইতিমধ্যে onclick ইভেন্ট এ function ব্যবহার করেছি। তবে এখন আমরা আরও শিখব প্যারামিটার পাসিং এবং রিটার্ন ভ্যালু ইত্যাদি। উদাহরণস্বরূপ আমরা বাটনের onclick ইভেন্টের মাধ্যমে কল করব। সেক্ষেত্রে প্রয়োজনীয় কোডটি হল নিম্নরূপ:
<button onclick=“CalculateSum( ) ;>OK</button>

ফাংশন কলিং (with Aurgument)
যখন কোন একটি ফাংশনকে কোন ইভেন্টের মাধ্যমে কল করা হয়, তখন আপনি চাইলে ফাংশনের মাধ্যমে যে কোন ভ্যালু/ভ্যালুগুলো pass করতে পারেন। এই ভ্যালুগুলোকে Parameter বলে। এই ভ্যালু বা আর্গুমেন্টগুলো কেবল ফাংশনের মধ্যে ব্যবহৃত হতে পারে।
Aurgument ফাংশন ডিক্লিয়ারের এর নিয়ম:
function name (var1, var2)
{
statement
}
তবে ইভেন্টে কল করার সময় খেয়াল রাখতে হবে যেন মূল ফাংশনের ভেরিয়েবলগুলো এবং কল করার সয়ম ভেরিয়েবলগুলো একই অর্ডার বা ক্রমানুসারে থাকে।
 ফাংশনের উদাহরন
১.        আপনার এডিটরে নিম্নোক্ত কোডগুলো লিখুন
২.       এবার ফাইলটিকে কে একটি নির্দিষ্ট  নামে  সেভ করুন। আমরা এখানে program_0038.html নামে সেভ করেছি
<html>
<head>
<title>Function Argument Example</title>
<script type="text/JavaScript">
function CalculateSum(Num1, Num2)
{
var sum=parseInt(Num1)+parseInt(Num2);
alert(sum);
}
</script>
<head>
<body>
Input  Number1: <input type="text" id="txtNumber1" /><br />
Input  Number2: <input type="text" id="txtNumber2" /><br />
<button onclick="CalculateSum(document.getElementById('txtNumber1').value, document.getElementById('txtNumber2').value)">OK</button>
</body>
</html>
ফলাফল :    এবার আপনার ব্রাউজারে program_0038.html ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত ফলাফল দেখতে পাবেন।
৩.        এবার দুটি ভ্যালু ইনপুট দিন এবং OK বাটন ক্লিক করুন। ভ্যালু দুটির যোগফল পাওয়া যাবে।

ব্যাখ্যা: এখানে CalculateSum(Num1, Num2) নামে একটি ফাংশন তৈরী করা হয়েছে যার Aurgument হল Num1, Num2    এবার এই আর্গুমেন্টদুটিতে ভ্যালু  দিতে হবে, যা কোন ইভেন্টে ফাংশন  কল করার সময় পাস করাতে হবে। আর ফাংশনটি তার আর্গুমেন্ট ব্যবহার করে স্টেটমেন্ট অনুযায়ী কাজ করবে, এখানে আর ফাংশনের মাঝে ভ্যালু দুটি যোগ করে আলার্ট দেবার কোড লেখা হয়েছে।

এবার চোখ রাখা এক html ট্যাগে, এখানে আমরা দুটি টেক্সট বক্স নিয়েছি কারণ আমরা আমাদের ইনপুটকৃত টেক্সট বক্সের ভ্যালু যোগ করব।
প্রথম টেক্সট বক্সের Id হল txtnumber1
দ্বিতীয় টেক্সট বক্সের Id হল txtnumber2
পূর্বের ন্যায় আমরা বাটনের onclick ইভেন্টে ফাংশনটি কল করতে হবে। তবে এবার প্যারামিটার পাস করাতে হবে। আর এজন্য আমরা ভ্যালুটিকে ধারন করলাম:
document.getElementById(txtnumber1).value document.getElementById(txtnumber1).value
এই ভ্যালুদুটি-ই ফাংশনের মধ্যে একটি কমা ( ’ ) দ্বারা পাস করা হয়েছে।এখন যখন বাটনটিতে ক্লিক করা হবে তখন ফাংশনটি কল হবে, আর ফাংশনটির মধ্যকার কাজ ফাংশনটি শুরু করবে। যেহেতু বাটনটিতে ক্লিক করার সাথে সাথে টেক্সটবক্স দুটির ভ্যালু ফাংশনে পাস হয়ে যাবে তাই ফাংশনটি এবার এই ভ্যালুদুটি নিয়ে অপারেশন করতে পারবে।
Return Statement
মাঝেমধ্যে এমনটি প্রয়োজন হয়ে পড়ে যখন একটি ফাংশনের আউটপুট ভ্যালু যে স্থান থেকে ফাংশন কল করা হয়েছে সেখানে ফেরত দিতে হয় বা রিটার্ন করা হয়।
এই কাজটিই মূলত: Return Statement করে থাকে।
চলুন নিচের প্রোগ্রামটি প্রাকটিস করা যাক।
 ফাংশনের উদাহরন
১.        আপনার এডিটরে নিম্নোক্ত কোডগুলো লিখুন।  এবার ফাইলটিকে কে একটি নির্দিষ্ট  নামে  সেভ করুন। আমরা এখানে program_0039.html নামে সেভ করেছি
<html>
<head>
<title>Function Return Example</title>
<script type="text/JavaScript">
function CalculateSum(Num1, Num2)
{
var sum=0;
if(parseInt(Num1)>parseInt(Num2))
{
return sum;
}
else
{
sum=parseInt(Num1)+parseInt(Num2);
return sum;
}
}
</script>
<head>
<body>
Input  Number1: <input type="text" id="txtNumber1" /><br />
Input  Number2: <input type="text" id="txtNumber2" /><br />
<button onclick="alert(CalculateSum(document.getElementById('txtNumber1').value, document.getElementById('txtNumber2').value))">OK</button>
</body>
</html>
ফলাফল :    এবার আপনার ব্রাউজারে program_0039.html ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত ফলাফল দেখতে পাবেন। দুটি ভ্যালু ইনপুট দিন এবং OK বাটন ক্লিক করুন। ভ্যালু দুটির যোগফল পাওয়া যাবে।
ব্যাখ্যা:   প্রোগ্রামটি লক্ষ্য করুন। যদি number1, number2 এর চেয়ে বড় হয় তবে ফলাফল আসবে ০ আর যদি  number1, number2 এর চেয়ে ছোট হয় তবে এদের Sum দেখা যাবে। এর কারন প্রোগ্রামে এরকম কন্ডিশন দিয়ে যোগফল রিটার্ন করা হয়েছে। এবং এই রিটার্নকৃত ভ্যালু বাটনে ক্লিক ইভেন্টের সময় অ্যালার্ট হিসাবে দেখানো হয়েছে।
Previous Post                                                                                           Next Post

  বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।

Book Name: Mastering Microsoft  Word
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... 

 cd

RELATED POST LINKS BELOW ********************************************